/* 
    songljmail@163.com
 */

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    /*background: url(../img/index/bg.png) center top repeat;*/
}

.container {
    max-width: 1400px;
}

.head,
.foot {
    width: 100%;
    position: fixed;
    right: 0;
    z-index: 5;
}

.head {
    top: 0;
    border-bottom: none;
}

.foot {
    bottom: 0;
    color: #333;
    background-color: #f2f2f2;
}

.title {
    /*width: 46.84%;*/
    width: 35.84%;
    position: absolute;
    top: 35px;
    left: 50%;
    /*margin: 2.22% 0 0 -23.42%;*/
    margin: 2.22% 0 0 -18.42%;
}

.downloadBox {
    position: absolute;
    top: -95px;
    left: 50%;
    margin-left: -165px !important;
    width: 330px;
    z-index: 10;
}

.download {
    display: inline-block;
    padding-top: 15px;
    width: 158px;
    height: 55px;
    line-height: 1;
    font-size: 20px;
    text-align: center;
    color: #986712;
    border: 1px solid #fab91a;

    /*margin: -2.78% 0 0 -125px;*/

    background-color: #fffff5;
    background: -webkit-linear-gradient(#fffff5, #fcfae4);
    background: -moz-linear-gradient(#fffff5, #fcfae4);
    background: -ms-linear-gradient(#fffff5, #fcfae4);
    background: -o-linear-gradient(#fffff5, #fcfae4);
    background: linear-gradient(#fffff5, #fcfae4);

    -webkit-box-shadow: 0px 4px 7px rgba(130, 119, 65, 0.33);
    -moz-box-shadow: 0px 4px 7px rgba(130, 119, 65, 0.33);
    -ms-box-shadow: 0px 4px 7px rgba(130, 119, 65, 0.33);
    -o-box-shadow: 0px 4px 7px rgba(130, 119, 65, 0.33);
    box-shadow: 0px 4px 7px rgba(130, 119, 65, 0.33);
}

.download:hover {
    background-color: #ffffe5;
    background: -webkit-linear-gradient(#ffffe5, #fdfddb);
    background: -moz-linear-gradient(#ffffe5, #fdfddb);
    background: -ms-linear-gradient(#ffffe5, #fdfddb);
    background: -o-linear-gradient(#ffffe5, #fdfddb);
    background: linear-gradient(#ffffe5, #fdfddb);
}

.download img {
    width: 22px;
    height: 22px;
    vertical-align: bottom;
}

.download p {
    margin-top: 5px;
    color: #c8a261;
    font-size: 14px;
}

.bg {
    height: 100%;
}

.bg ul {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
}

.bg li {
    opacity: 0.1;
    filter: alpha(opacity=10);
    position: absolute;
    top: 0;
    left: 50%;

    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
}

.bg .item0 {
    margin: 18.92% 0 0 -36.57%;
    padding: 5%;
    background-color: #f1a114;
}

.bg .item1 {
    margin: 16.39% 0 0 -29%;
    padding: 2.5%;
    background-color: #0261bb;
}

.bg .item2 {
    margin: -24.38% 0 0 18.32%;
    padding: 4.04%;
    background-color: #516dff;
}

.bg .item3 {
    margin: -17% 0 0 21.6%;
    padding: 9.25%;
    background-color: #73a411;
}

.bg .item4 {
    margin: 17.5% 0 0 36%;
    padding: 4.04%;
    background-color: #79219a;
}

.bg .item5 {
    margin: 23.04% 0 0 41%;
    padding: 2.5%;
    background-color: #d23531;
}

.loop {
    width: 100%;
    position: absolute;
    top: 66px;
    left: 0;
    margin-top: 6%;

    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

.loop li,
.loop div {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.loop li {
    width: 40.88%;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 50%;
    margin-top: 9.58%;
    margin-left: -20.44%;
    z-index: 0;

    -webkit-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.4);
    -ms-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.4);
    -o-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.4);
}

.loop .item0 {
    width: 65.76%;
    margin-top: 0%;
    margin-left: -32.88%;
    z-index: 3;
}

.loop .item1,
.loop .item4 {
    width: 49.44%;
    margin-top: 5.88%;
    z-index: 2;
}

.loop .item1 {
    margin-left: -7.77%;
}

.loop .item2 {
    margin-left: 9.58%;
    z-index: 1;
}

.loop .item3 {
    margin-left: -50.46%;
    z-index: 1;
}

.loop .item4 {
    margin-left: -41.67%;
}

.loop img {
    width: 100%;
}

.loop div {
    width: 100%;
    height: 100%;
    background-color: #000;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.3;
    filter: alpha(opacity=30);
}

.loop .item0 div {
    opacity: 0;
    filter: alpha(opacity=0);
}

/***** 适配 *****/
@media (max-width: 750px) {
    .title {
        width: 88.8%;
        margin: 7% 0 0 -44.4%;
    }

    .loop {
        margin-top: 20%;
    }
}