@import 'global.css';

/* container */
.header,
.plate1,
.plate2,
.plate3,
.plate4{
    width: 100%;
    min-width: 1460px;
    max-width: 1920px;
    margin: 0 auto;
}

/*header*/
.header{
    background: url("../images/header_back.jpg") no-repeat center top;
    height: 1010px;
}
.header-top{
    width: 100%;
    max-width: 1920px;
    height: 130px;
    margin: 0 auto 705px;
}
.header-top.active{
    opacity: 0;
}
.header-top.active .logo,
.header-top.active .header-link{
    display: none;
}
.logo{
    width: 201px;
    height: 97px;
    background: url("../images/logo.png") no-repeat center center;
    position: absolute;
    top: 15px;
    left: 155px;
}
.header-link{
    width: 260px;
    height: 41px;
    position: absolute;
    top: 12px;
    right: 46px;
    z-index: 10;
}
.header-link>a,
.header-link>div{
    float: left;
}
.header-link>a{
    display: block;
    height: 41px;
    width: 41px;
    margin-right: 20px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
}
.header-link-home{
    background: url("../images/top_nav1.png") no-repeat center center;
}
.header-link-home:hover{
    background: url("../images/top_nav1_hover.png") no-repeat center center;
}
.header-link-login{
    background: url("../images/top_nav2.png") no-repeat center center;
}
.header-link-login:hover{
    background: url("../images/top_nav2_hover.png") no-repeat center center;
}
.header-link-download{
    background: url("../images/top_nav3.png") no-repeat center center;
}
.header-link-download:hover{
    background: url("../images/top_nav3_hover.png") no-repeat center center;
}
.header-share-btn{
    background: url("../images/top_nav4.png") no-repeat center center;
    height: 41px;
    width: 41px;
    cursor: pointer;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
}
.header-share-btn:hover{
    background: url("../images/top_nav4_hover.png") no-repeat center center;
}

.share-content {
    display: none;
    margin-top: 10px;
    margin-left: -147px;
}
.share-content i {
    float: left;
    width: 51px;
    height: 51px;
    cursor: pointer;
    margin: 0 2px;
}

.qq {
    background: url("../images/share-icon.png") no-repeat 0 -1px;
}

.wx {
    background: url("../images/share-icon.png") no-repeat -72px -1px;
}

.sina {
    background: url("../images/share-icon.png") no-repeat -279px -1px;
}

.qzone {
    background: url("../images/share-icon.png") no-repeat -211px -1px;
}

.header-start-up{
    width: 242px;
    height: 72px;
    margin: 0 auto;
}
.header-start-up a{
    display: block;
    width: 100%;
    height: 100%;
    background: url("../images/download.png");
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
}
.header-start-up a.active{
    background: url("../images/start.png");
}
.header-start-up a:hover{
    transform: scale(0.98);
    -webkit-transform: scale(0.98);
    -moz-transform: scale(0.98);
    -ms-transform: scale(0.98);
    -o-transform: scale(0.98);
}

/* plate1 */
.plate1{
    background: url("../images/plate1_back.jpg") no-repeat center top;
    height: 816px;
}
.plate1>div{
    width: 1460px;
    height: 804px;
    padding-top: 214px;
    background: url("../images/plate1_back_2.png") no-repeat left 12px;
    margin: 0 auto;
}
.plate1-content{
    width: 575px;
    margin-left: 749px;
}
.plate1-title{
    width: 312px;
    height: 127px;
    background: url("../images/plate1_title.png");
}
.plate1-text{
    width: 575px;
    height: 160px;
    padding-top: 13px;
    font-size: 15px;
    line-height: 20px;
}
.plate1-btn{
    width: 575px;
    height: 100px;
}
.plate1-btn li{
    float: left;
    width: 66px;
    height: 100px;
    position: relative;
    margin-right: 17px;
    cursor: pointer;
}
.plate1-btn li:last-child{
    margin-right: 0;
}
.plate1-btn-1:hover::after{
    display: block;
    content: '';
    width: 440px;
    height: 154px;
    background: url("../images/plate1_tips_1.jpg");
    position: absolute;
    top: 100px;
    left: 0;
}
.plate1-btn-2:hover::after{
    display: block;
    content: '';
    width: 329px;
    height: 103px;
    background: url("../images/plate1_tips_2.jpg");
    position: absolute;
    top: 100px;
    left: 0;
}
.plate1-btn-3:hover::after{
    display: block;
    content: '';
    width: 405px;
    height: 103px;
    background: url("../images/plate1_tips_3.jpg");
    position: absolute;
    top: 100px;
    left: 0;
}
.plate1-btn-4:hover::after{
    display: block;
    content: '';
    width: 398px;
    height: 115px;
    background: url("../images/plate1_tips_4.jpg");
    position: absolute;
    top: 100px;
    left: 0;
}
.plate1-btn-5:hover::after{
    display: block;
    content: '';
    width: 395px;
    height: 163px;
    background: url("../images/plate1_tips_5.jpg");
    position: absolute;
    top: 100px;
    left: -85px;
}
.plate1-btn-6:hover::after{
    display: block;
    content: '';
    width: 425px;
    height: 105px;
    background: url("../images/plate1_tips_6.jpg");
    position: absolute;
    top: 100px;
    left: -195px;
}
.plate1-btn-7:hover::after{
    display: block;
    content: '';
    width: 433px;
    height: 121px;
    background: url("../images/plate1_tips_7.jpg");
    position: absolute;
    top: 100px;
    left: -285px;
}
.plate1-btn li i{
    display: block;
    width: 66px;
    height: 67px;
    margin-bottom: 10px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
}
.plate1-btn li i:hover{
    transform: scale(0.98);
    -webkit-transform: scale(0.97);
    -moz-transform: scale(0.98);
    -ms-transform: scale(0.98);
    -o-transform: scale(0.98);
}
.plate1-btn li p{
    text-align: center;
    color: #423229;
    line-height: 20px;
    font-size: 15px;
}
.plate1-btn-1 i{
    background: url("../images/plate1_icon_1.png");
}
.plate1-btn-2 i{
    background: url("../images/plate1_icon_2.png");
}
.plate1-btn-3 i{
    background: url("../images/plate1_icon_3.png");
}
.plate1-btn-4 i{
    background: url("../images/plate1_icon_4.png");
}
.plate1-btn-5 i{
    background: url("../images/plate1_icon_5.png");
}
.plate1-btn-6 i{
    background: url("../images/plate1_icon_6.png");
}
.plate1-btn-7 i{
    background: url("../images/plate1_icon_7.png");
}



/* plate2 */
.plate2{
    background: url("../images/plate2_back.jpg") no-repeat center top;
    height: 1096px;
}
.plate2-title{
    width: 1460px;
    height: 206px;
    background: url("../images/plate2_title.png") no-repeat center top;
    margin: 0 auto 12px;
}
.plate2-content{
    width: 1435px;
    height: 792px;
    background: url("../images/plate2_back_2.png");
    position: relative;
    margin: 0 auto;
}
.plate2-portrait{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.plate2-portrait a{
    display: block;
    position: absolute;
    width: 609px;
    height: 403px;
}
.plate2-portrait-blue {
    top: 19px;
    right: 35px;
}
.plate2-portrait-red{
    bottom: 19px;
    left: 35px;

}

.plate2-btn{
    width: 435px;
    height: 87px;
    position: absolute;
    bottom: 44px;
    left: 52px;
    z-index: 10;
}
.plate2-btn li{
    float: left;
    width: 87px;
    height: 87px;
    cursor: pointer;
    margin-right: 28px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
}
.plate2-btn li:last-child{
    margin-right: 0;
}
.plate2-btn li:hover{
    transform: scale(0.98);
    -webkit-transform: scale(0.98);
    -moz-transform: scale(0.98);
    -ms-transform: scale(0.98);
    -o-transform: scale(0.98);
}
.plate2-btn-1{
    background: url("../images/plate2_icon_1.png");
}
.plate2-btn-2{
    background: url("../images/plate2_icon_2.png");
}
.plate2-btn-3{
    background: url("../images/plate2_icon_3.png");
}
.plate2-btn-4{
    background: url("../images/plate2_icon_4.png");
}

/* plate3 */
.plate3{
    background: url("../images/plate3_back.jpg") no-repeat center top;
    height: 970px;
}
.plate3-title{
    width: 1460px;
    height: 150px;
    background: url("../images/plate3_title.png") no-repeat center top;
    margin: 0 auto 60px;
}
.plate3-content{
    width: 1300px;
    height: 661px;
    background: url("../images/plate3_img.png");
    margin: 0 auto;
}
.plate3-text{
    float: right;
    width: 424px;
    padding-top: 117px;
}
.plate3-text p{
    width: 353px;
    margin-left: 20px;
}
.plate3-text-1,
.plate3-text-2,
.plate3-text-3{
    color: #E5D6B6;
    font-size: 20px;
    line-height: 20px;
    font-weight: bold;
}
.plate3-text-2{
    margin: 25px 0;
}
.plate3-text-3{
    margin-bottom: 50px;
}
.plate3-text-4,
.plate3-text-5{
    color: #A39A85;
    font-size: 14px;
    line-height: 26px;
}

/* plate4 */
.plate4{
    background: url("../images/plate4_back.jpg") no-repeat center top;
    height: 656px;
}
.plate4-title{
    width: 1460px;
    height: 155px;
    background: url("../images/plate4_title.png") no-repeat center top;
    margin: 0 auto 75px;
}
.plate4-content{
    width: 1062px;
    height: 274px;
    margin: 0 auto;
}
.plate4-content li{
    float: left;
    width: 205px;
    height: 274px;
    margin-right: 80px;
}
.plate4-content li:last-child{
    margin-right: 0;
}
.plate4-tab-1{
    background: url("../images/plate4_tab_1.jpg");
}
.plate4-tab-2{
    background: url("../images/plate4_tab_2.jpg");
}
.plate4-tab-3{
    background: url("../images/plate4_tab_3.jpg");
}
.plate4-tab-4{
    background: url("../images/plate4_tab_4.jpg");
}


/* open-img */
.open-img{
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
}
.open-img ul{
    width: 1243px;
    height: 692px;
    position: fixed;
    left: 50%;
    margin-left: -621.5px;
    top: 50%;
    margin-top: -346px;
}
.open-img li{
    display: none;
    position: absolute;
}
.open-img-max{
    width: 1243px;
    height: 692px;
}
.open-img-min{
    width: 1077px;
    height: 463px;
    left: 50%;
    margin-left: -538.5px;
}
.open-img li img{
    display: block;
    width: 100%;
    height: 100%;
}