*{margin: 0; padding: 0;}
body{font-family: microsoft yahei !important;}
img{border: none;}
a{text-decoration: none;}


ul,ol,li,dl,dt,dd{list-style: none;}
.clearfix:after{content: ".";height: 0;display: block;clear: both;visibility: hidden;}
.clearfix{*zoom:1;}


body{width: 100%;*cursor: default;overflow: hidden;font: 16px/1.5 "Microsoft YaHei", Helvetica, STHeiti STXihei, Microsoft JhengHei, Arial;}
#pageContain{overflow: hidden;}
.page{display: none;width: 100%;height: 100%;overflow: hidden;position: absolute;top: 0;left: 0;/*margin-top: 39px;*/}
.contain{width: 100%;height: 100%;display: none;position: relative;z-index: 0;}
.current .contain, .slide .contain{display: block;}
.current{display: block;z-index: 1;}
.slide{display: block;z-index: 2;}
.swipe{display: block;z-index: 3;transition-duration: 0ms !important;-webkit-transition-duration: 0ms !important;}
.page1{background:url(images/yk3_01.jpg) center no-repeat;}
.page2{background:url(images/yk3_02.jpg) center no-repeat; background-size: 100% ;}
.page3{background:url(images/yk3_03.jpg) center no-repeat;}
.page4{background: #fff;}


#navBar{z-index: 3;position: absolute;top: 30%;right: 3%;background:url(images/ykIcon_1.png) no-repeat -19px -1197px;padding: 37px 10px 0px  11px;}

.active{width: 30px;height: 30px;}
#navBar li{border: 1px solid #fff;color:#fff;cursor: pointer;margin-bottom: 48px;border-radius: 50%;line-height: 30px;text-align: center;width: 30px;height: 30px;list-style: none;font-size: 12px;}
#navBar li.active{background:url(images/ykIcon_1.png) no-repeat -141px -1230px;width: 30px;height: 30px;border: none;text-indent: -9999px;}

.navBar_2{background:url(images/ykIcon_1.png) no-repeat -1295px -1576px!important;}
.navBar_2 li{color: #30344f!important;border: 1px solid #30344f!important;}
.navBar_2 li.active{border: none!important;}


/* 2017-5-31 */ 
.ykTop{position: fixed;top:10px;left: 40px;height: 65px;width: 100%;z-index: 9;}


.topLogo{width: 173px;height: 46px;background:url(images/ykIcon_1.png) no-repeat -22px -622px;float: left;}
.topLogo a{width: 100%;height: 100%;display: inline-block;}
.topNav{float: right;margin-right: 30px;margin-top: 15px;}
.topNav li{float: left;padding-right:20px;color: #fff;}
.topNav li a{font-size: 16px;color: #fff;}
.topNav li.regiTop,.topNav li.loginTop{padding-right: 20px;}
.regiTop a{padding-left: 25px;background:url(images/ykIcon_1.png) no-repeat -22px -709px;}
.loginTop a{padding-left: 25px;background:url(images/ykIcon_1.png) no-repeat -103px -709px;}
.ykTop_2 .topNav li{color: #30344f;}
.ykTop_2 .topNav li a{color: #30344f;}
.ykTop_2 .topLogo{background: url(images/ykIcon_1.png) no-repeat -4px -785px;}
.ykTop_2 .regiTop a{padding-left: 25px;background:url(images/ykIcon_1.png) no-repeat -316px -709px;}
.ykTop_2 .loginTop a{padding-left: 25px;background:url(images/ykIcon_1.png) no-repeat -423px -709px;}


.orderBtn{width: 203px;height: 48px;display: block;color: #fff;border-radius: 3px;line-height: 48px;text-align: center;border: 1px solid #fff;font-size: 24px;transition: all 0.5s ease;}
.orderBtn:hover{color: #333;background: #fff;}
.botGuid{width: 34px;height: 54px;position: absolute;bottom: 5%;left: 50%;margin-left: -17px;background:url(images/botGuid.gif);}

.conLeft{width:614px;height: 558px;background:url(images/ykIcon_1.png) no-repeat -11px -4px;float: left;padding: 25px 0 0 26px;overflow: hidden;}

.leftAnimate{width: 585px;height: 331px;border: 0px solid #fff;background-color:#eaeaea;position: relative;}
.leftBar{width: 80px;height: 331px;background:url(images/ykIcon_2.png) no-repeat -96px -577px;float: left;}
.rightCon{width: 502px;height: 331px;float: left;background: url(images/yk2_06.png) no-repeat -0px -0px;}
.rightTop{position: absolute;top:16px;left: 78px;z-index: 10;}
.rightBot{width: 495px;height: 195px;background:url(images/ykIcon_2.png) no-repeat -1084px -670px;margin-left: 6px;position: absolute;top:93px;left: 82px; }
.rightTop li{float: left;width: 160px;}
.rightTop li dt{float: left;}
.rightTop li dd{float: left;color: #333;font-size: 12px;padding-top: 20px;}

.page3 .rightCon{background:url(images/ykIcon_2.png) no-repeat -273px -969px;}
.page3 .rightFlo{background:url(images/ykIcon_2.png) no-repeat -1104px -985px;width: 390px;height: 313px;position: absolute;right: 0px;bottom: 0px;}
.page4 .rightCon{background:url(images/ykIcon_2.png) no-repeat -273px -1337px;}
.page4 .rightFlo{background:url(images/ykIcon_2.png) no-repeat -1104px -1354px;width: 390px;height: 313px;position: absolute;right: 0px;bottom: 0px;}
.page5 .rightCon{background:url(images/ykIcon_2.png) no-repeat -273px -1758px;}
.page5 .rightFlo{background:url(images/ykIcon_2.png) no-repeat -1104px -1773px;width: 390px;height: 313px;position: absolute;right: 0px;bottom: 0px;}

.current .leftAnimate{}
.current .leftBar{animation: anim_1 3s ease 0s;animation-fill-mode:forwards;opacity: 0;}

.current .firLi img{animation: scal_1 3s ease 0s;animation-fill-mode:forwards;transform: translate(400px,300px);}

.current .secLi img{animation: scal_1 3s ease 2s;animation-fill-mode:forwards;transform: translate(400px,300px);}
.current .thiLi img{animation: scal_1 3s ease 4s;animation-fill-mode:forwards;transform: translate(400px,300px);}




/* 2017-6-1 */
.contain{width: 1200px;margin: 0 auto;color: #fff;position: relative;}
.page1 .con_1{position: absolute;top:50%;right: 0px;width: 520px;text-align: center;margin-top: -270px;}
.con_1 h2{font-size: 58px;font-weight: normal;height: 60px;line-height: 60px;padding-bottom: 25px;}
.tip_1{font-size: 24px;height: 24px;line-height: 24px;padding-bottom: 25px;}
.page1 .orderBtn{margin: 0 auto 60px;}
.page1 dl{text-align: left;padding-left: 85px;margin-bottom: 10px;position: relative;left:0px;}
.page1 dt{float: left;width: 75px;height: 60px;margin-right: 20px;}
.page1 dd{float: left;padding-top: 10px;}
.page1 dd h4{font-size: 18px;font-weight: normal;height: 18px;line-height: 18px;padding-bottom: 5px;}
.page1 dd p{font-size: 12px;font-weight: normal;}
.firDl dt{background:url(images/ykIcon_1.png) no-repeat -8px -911px;}
.secDl dt{background:url(images/ykIcon_1.png) no-repeat -10px -1016px;}

.page2 h2{color: #30344f;font-size: 58px;font-weight: normal;text-align: center;height: 60px;line-height: 60px;padding-bottom: 20px;position: absolute;top:10%;width: 100%;}
.tip_2{color: #30344f;font-size: 16px;font-weight: normal;text-align: center;height: 20px;line-height: 20px;position: absolute;top:19%;width: 100%;}

.conRight{position: absolute;top:50%;right:0px;width: 525px;margin-top: -70px;}
.conRight h2{font-weight:normal;font-size: 58px;height: 60px;line-height: 60px;padding-bottom: 20px;-webkit-transform: translate(0,-600px);-moz-transform: translate(0,-600px);transform: translate(0,-600px);}
.conRight p{font-size: 16px;line-height:30px;-webkit-transform: translate(0,600px);-moz-transform: translate(0,600px);transform: translate(0,600px);}
.conRight .orderBtn{margin-top:20px;}
.conRightTop{padding:25px 25px;background-color: #4e5480;width: 435px;border-radius: 5px;transform: translate(600px,0);}
.conRightTop p{font-size: 30px;line-height: 36px;}
.conRightBot{margin-top: 60px;}
.conRightBot ul{width: 590px;}
.conRightBot li{float: left;width: 65px;margin-right: 36px;text-align: center;transform: translate(1000px,0);}
.conRightBot em{width: 68px;height: 55px;display: block;background-image:url(images/ykIcon_1.png);background-repeat:no-repeat;}
.gl em{background-position:-10px -1646px;}
.xs em{background-position:-120px -1646px;}
.kh em{background-position:-235px -1646px;}
.lx em{background-position:-347px -1646px;}
.ht em{background-position:-451px -1646px;}
.conRightBot span{font-size: 16px;height: 20px;line-height: 20px;display: inline-block;padding-top: 5px;}
.xsTop{padding-top: 115px;position: absolute;top: 0%;background:url(images/ykIcon_1.png) no-repeat -886px -1637px;width: 115px;left: 260px;opacity: 0;}
.xsTop span{display: inline-block;line-height: 60px;font-size: 34px;}
.xsLine{width: 310px;height: 130px;background:url(images/ykIcon_1.png) no-repeat -605px -1820px;position: absolute;top:69%;left: 0px;opacity: 0;}
.xsBox{width: 360px;position: absolute;top:50%;left: 250px;height: 260px;}
.page4 h2{color: #30344f;position: absolute;top:20%;width: 100%;text-align: center;font-size: 58px;font-weight: normal;height: 60px;line-height: 60px;}

.treeBox{position: absolute;top:50%;width: 1000px;left: 50%;height: 460px;margin-top: -150px;margin-left: -500px;}

.treeBox li{position: absolute;bottom: 0;background-image:url(images/ykIcon_1.png);background-repeat: no-repeat;opacity: 0;}
.tree_1{width: 65px;height: 73px;left: 0px;background-position: -531px -1282px;}
.tree_2{width:120px;height: 145px;left: 140px;background-position: -660px -1206px;}
.tree_3{width: 238px;height: 245px;left: 305px;background-position: -834px -1103px;}
.tree_4{width: 375px;height: 446px;left: 580px;background-position: -1110px -904px;}
.tree_4 em{width: 177px;height: 50px;display: block;background:url(images/ykIcon_1.png) no-repeat -1218px -781px;position: absolute;top:139px;left:96px;}
.page4 .botGuid{background:url(images/ykIcon_1.png) no-repeat -18px -1797px;cursor: default;}

.botGuid{background:url(images/ykIcon_1.png) no-repeat -102px -1802px;}
.botGuid em{width: 7px;height: 7px;position: absolute;top:10px;left:11px;background:url(images/ykIcon_1.png) no-repeat -168px -1809px;animation: anim_6 1s ease infinite;}





.con_1 h2{position: relative;left: 30px;}
.con_1 .tip_1{position: relative;left: 30px;opacity: 0.6;}
.con_1 .orderBtn{position: relative;left: 30px;opacity: 1;}
.firDl{position: relative;left: 30px;opacity: 0;}
.secDl{position: relative;left: 30px;opacity: 0;}

.current .con_1 h2{}
.current .con_1 .tip_1{opacity: 1;}
.current .con_1 .orderBtn{}
.current .firDl{opacity: 1;}
.current .secDl{opacity: 1;}

.current .xsTop{animation: fadeIn 1.5s ease 2s;animation-fill-mode:forwards;}
.current .xsLine{animation: fadeIn 1s ease 1s;animation-fill-mode:forwards;}
.current .conRightTop{animation:anim_3 1.5s ease 0s;animation-fill-mode:forwards; }

.current .gl{animation: anim_3 1.5s ease 1.5s;animation-fill-mode:forwards;}
.current .xs{animation: anim_3 1.5s ease 2s;animation-fill-mode:forwards;}
.current .kh{animation: anim_3 1.5s ease 2.5s;animation-fill-mode:forwards;}
.current .lx{animation: anim_3 1.5s ease 3s;animation-fill-mode:forwards;}
.current .ht{animation: anim_3 1.5s ease 3.5s;animation-fill-mode:forwards;}
.current .conRight h2{animation: anim_4 1.5s ease 0s;animation-fill-mode:forwards;}
.current .conRight p{animation: anim_5 1.5s ease 0s;animation-fill-mode:forwards;}
.current .tree_1{animation: fadeIn2 1s ease 0s;animation-fill-mode:forwards;}
.current .tree_2{animation: fadeIn2 2s ease 1s;animation-fill-mode:forwards;}
.current .tree_3{animation: fadeIn2 2s ease 2s;animation-fill-mode:forwards;}
.current .tree_4{animation: fadeIn2 2s ease 3s;animation-fill-mode:forwards;}


@keyframes anim_1{
    0%{
        opacity: 0;
        -webkit-transform: translate(-80px,0);
        transform: translate(-80px,0);
    }
    50%{
        opacity: 0;
        -webkit-transform: translate(-80px,0);
        transform: translate(-80px,0);
    }
    100%{
        opacity: 1;
        -webkit-transform: translate(0px,0);
        transform: translate(0px,0);
    }
}


@keyframes anim_2{
    0%{
        opacity: 0.1;
        left:30px;
        -webkit-transform: translate(50px,0);
        -webkit-transform: scale(0);
        transform: translate(50px,0);
        transform: scale(0);
    }
    
    100%{
        opacity: 1;
        left:0px;
        -webkit-transform: translate(0px,0);
        -webkit-transform: scale(1);
        transform: translate(0px,0);
        transform: scale(1);
    }
}

@keyframes anim_3{
    0%{
        -webkit-transform: translate(600px,0);
        transform: translate(600px,0);
    }
    
    100%{
        -webkit-transform: translate(0px,0);
        transform: translate(0px,0);
        
    }
}
@keyframes anim_4{
    0%,100%,60%,75%,90% {
        -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1);
        animation-timing-function: cubic-bezier(0.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-600px,0);
        transform: translate3d(0,-600px,0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0,5px,0);
        transform: translate3d(0,5px,0)
    }

    75% {
        -webkit-transform: translate3d(0,-10px,0);
        transform: translate3d(0,-10px,0)
    }

    90% {
        -webkit-transform: translate3d(0,5px,0);
        transform: translate3d(0,5px,0)
    }

    100% {
        -webkit-transform: none;
        transform: none
    }
}
@keyframes anim_5{
    0%,100%,60%,75%,90% {
        -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1);
        animation-timing-function: cubic-bezier(0.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,600px,0);
        transform: translate3d(0,600px,0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0,-5px,0);
        transform: translate3d(0,-5px,0)
    }

    75% {
        -webkit-transform: translate3d(0,10px,0);
        transform: translate3d(0,10px,0)
    }

    90% {
        -webkit-transform: translate3d(0,-5px,0);
        transform: translate3d(0,-5px,0)
    }

    100% {
        -webkit-transform: none;
        transform: none
    }
}
@keyframes anim_6{
 

    0% {
        opacity: 1;
        -webkit-transform: translate3d(0,3px,0);
        transform: translate3d(0,3px,0)
    }

    30% {
        opacity: 1;
        -webkit-transform: translate3d(0,-1px,0);
        transform: translate3d(0,-1px,0)
    }

    

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0,3px,0);
        transform: translate3d(0,3px,0)
    }
}

@keyframes fadeIn{
    0%{
        opacity: 0;       
    }
    
    100%{
        opacity: 1;
       
    }
}
@keyframes fadeIn2{
    0%{
        opacity: 0;
        -webkit-transform: scale(0,0);
        transform: scale(0,0);       
    }
    
    100%{
        opacity: 1;
        -webkit-transform: scale(1,1);
        transform: scale(1,1);
    }
}



@keyframes scal_1{
    0%{
        opacity: 0;
        -webkit-transform: translate(400px,300px);
        transform: translate(400px,300px);
        z-index: 999;
    }
    50%{
        opacity: 0.8;
        -webkit-transform: scale(0.8);
        -webkit-transform: translate(0px,0);
        transform: scale(0.8);
        transform: translate(0px,0);
    }
    100%{
        opacity: 0.8;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }
}

@media screen and (max-width: 1366px) {
    .tip_2{top:20%;}
}

.alertBox{position: fixed;width: 100%;height: 100%;top:0px;left: 0px;z-index: 99;}
.alertBg{position: fixed;width: 100%;height: 100%;background-color: #000;opacity: 0.7;filter: alpha(opacity=70);}
.alertClose{width: 60px;height: 60px;position: absolute;top:1px;right: 28px;cursor: pointer;}

/*.alertCon{width:654px;height: 640px;position: fixed;top:50%;left: 53.5%;margin-top: -307px;margin-left: -393px;background: #fff;background:url(images/alertCon_03.png) no-repeat;}*/
.alertCon{width:654px;height: 640px;position: fixed;top:50%;left: 53.5%;margin-top: -307px;margin-left: -393px;background: #fff;background:url(images/alertCon_05.png) no-repeat;}
.topNav li.regiTop{border: 1px solid #fff;padding:10px 40px;margin-right: 20px;border-radius: 5px;}
.topNav li.regiTop:hover{background-color: #fff;}
.topNav li.regiTop:hover a{color: #30344f;background:url(images/ykIcon_1.png) no-repeat -316px -709px;}
.ykTop_2 .topNav li.regiTop{border:1px solid #30344f;}
.ykTop_2 .topNav li.regiTop:hover{border:1px solid #fff;background-color: #30344f;}
.ykTop_2 .topNav li.regiTop:hover a{color: #fff;background:url(images/ykIcon_1.png) no-repeat -22px -709px;}
.regiLink{width: 640px;height: 390px;position: absolute;top: 94px;left: 0px;}
.regiLink_2{width: 180px;height: 46px;position: absolute;top: 509px;left:50%;margin-left: -90px;border: 0px solid #000;}