.header{ background: url("../images-jsao/header-bg.jpg") repeat-x; padding-top: 35px; min-width:1200px;}
.header .logo{float: left;margin-right: 80px;}
.header .header-nav{ float: left;}
.header .header-nav li{float: left; color: #cbccce; font-size: 16px; margin-left: 35px; padding: 12px 5px 60px; cursor: pointer;}
.header .header-nav li a{color: #cbccce;}
.header .header-nav li.active{ border-bottom:1px solid #ccc;}
.header .buy-btn{width: 119px; height: 25px; line-height: 25px; text-align: center;color: #4a4a4b; background: #fdd000; display: block; float: right; cursor: pointer;margin-top: 10px; border-radius:5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;  }


.section1{position:relative;background:#fdd000; overflow: hidden; min-width: 1200px; min-height: 600px;}
.section1 .wrapper{position: relative; height: 100%;}
.section1 .img1{ position: absolute;bottom: 0;width: 100%;left: -10%;}
.section1 .img2{ position: absolute;width: 50%;left: 25%;top: 3%;}
.section1 .img3{ position: absolute;width: 15%;top: 10%;left: 45%; cursor: pointer;}
.section1 .img4{ position: absolute;width: 18%;right: 25%;top: 25%;}
.section1 .img5{ position: absolute;width: 13%;bottom: 10%;left: 14%;}
.section1 .img6{ position: absolute;width: 20%;bottom: 10%;left: 50%;}
.section1 .img7{ position: absolute;width: 26%;bottom: 0;  left: 28%;}
.section1 .section1-list{position: absolute;width: 100%; background: rgba(0,0,0,0.6); bottom: 0; left: 0; padding: 20px 0;}
.section1 .section1-list img{margin: 0 auto; display: block;}

.section1.active .img1{ animation-name:slideInUp;animation-delay:0.5s;}
.section1.active .img2{ animation-name:fadeInDown;animation-delay:1s;}
.section1.active .img3{ animation-name:fadeInDown;animation-delay:1s;}
.section1.active .img4{ animation-name:fadeIn;animation-delay:1s;}
.section1.active .img5{ animation-name:fadeInLeft;animation-delay:1s;}
.section1.active .img6{ animation-name:fadeInRight;animation-delay:2s;}
.section1.active .img7{ animation-name:fadeInRight;animation-delay:1.5s;}
.section1.active .section1-list{animation-name:slideInUp;animation-delay:2.5s;}

.section2{position:relative;background: #fff; min-width: 1200px;}
.section2 .wrapper{ position: relative; height: 100%;}
.section2 .img1{position: absolute; width: 60%; left: 20%; top: 4%;}
.section2 .img2{position: absolute; width: 100%; left: 0%; bottom: 0%;}
.section2 .img3{position: absolute; width: 35%;  right: 22%;  top: 36%;}
.section2 .img4{ position: absolute; width: 29%; right: 45%; top: 45%;}
.section2-pad{ position: absolute; width: 35%; height: 100%;  left: 0%; top: 20%;}
.section2 .img5{position: absolute;top: 11px; left: 49px;  width: 90%;}
.section2 .img6{position: absolute;top: 11px; left: 49px;  width: 90%;}

.section2.active .img1{animation-name:fadeInDown;animation-delay:0.5s;}
.section2.active .img2{animation-name:fadeInUp;animation-delay:1s; left: 10%; transition: left 1s 3s cubic-bezier(.25,.46,.45,.94);}
.section2.active .img3{animation-name:fadeInRight;animation-delay:1.5s; right: 12%; transition: right 1s 3s cubic-bezier(.25,.46,.45,.94);}
.section2.active .img4{animation-name:fadeIn;animation-delay:2.5s; transform: translateX(120px); transition: transform 1s 3s cubic-bezier(.25,.46,.45,.94);}
.section2.active .section2-pad{animation-name:fadeInLeft;animation-delay:3s;}
.section2.active .img6{animation-name:fadeIn;animation-delay:4s;}

.section3{position:relative;background: #191a1d; min-width: 1200px; overflow: hidden;}
.section3 .wrapper{ position: relative; height: 100%;}
.section3 .img1{position: absolute; width: 60%; left: 20%; top: 4%;}

.section4{position:relative;background: #fff; min-width: 1200px;}
.section4 .wrapper{ position: relative; height: 100%;}
.section4 .page-title{color: #1a1a1a; font-size: 45px; text-align: center; padding: 2% 0 1%;}
.section4 .voide-btn-box{width: 700px; margin: 0 auto;}
.section4 .voide-btn-box li{float: left;width: 111px; height: 43px; line-height: 43px; border: 1px solid #46474c; border-radius: 50px;-webkit-border-radius: 50px; text-indent: 20px; font-size: 18px;margin: 5px 13px; background: #f5f5f5 url("../images-jsao/voide-ico.png") no-repeat; background-position: 66px 10px; cursor: pointer;  }
.section4 .voide-btn-box li.on{ background-color: #f5c92a;}
.section4 .voide-btn-box li.title-name{background: none; border: none; cursor: initial;}
.section4 .img1{position: absolute;width: 80%; left: 10%; top: 30%;}
.section4 .img2{position: absolute;width: 15%; left: 0; top: 2%;}
.section4 .img3{position: absolute;width: 4%;  right: 15%;  bottom: 0;  }

.section5{position:relative;background:url("../images-jsao/bg5.png") no-repeat; background-size: 100% 100%; min-width: 1200px;}
.section5 .wrapper{ position: relative; height: 100%;}
.section5 .page-title{color: #fdd000; font-size: 45px; text-align: center; padding-top: 7%;}
.section5 .img1{ position: absolute; top: 20%; left: 13%; width: 25%;}
.section5 .img2{position: absolute;top: 54%;  left: 4%; width: 40%;}
.section5 .img3{position: absolute; top: 20%;right: 13%; width: 25%;}
.section5 .img4{position: absolute;top: 54%;  right: 4%; width: 40%;}

.section6{position:relative;background:#e6bf07;min-width: 1200px; overflow: hidden;}
.section6 .img1{position: absolute;bottom: 0;left: 0;width:65%;}
.section6 .img2{position: absolute;width: 56%; left: 22%;  top: 5%;}
.section6 .img3{position: absolute;top: 25%;left: 26%;  width: 18%;}
.section6 .img4{position: absolute;top: 35%;left: 28%;  width: 18%;}
.section6 .img5{position: absolute;top: 45%;left: 31%;  width: 18%;}
.section6 .img6{position: absolute;top: 55%;left: 34%;  width: 18%;}
.section6 .img7{position: absolute;top: 65%;left: 37%;  width: 18%;}
.section6 .img8{position: absolute;top: 25%;left: 50%;  width: 18%;}
.section6 .img9{position: absolute;top: 35%;left: 53%;  width: 18%;}
.section6 .img10{position: absolute;top: 45%;left: 56%;  width: 18%;}
.section6 .img11{position: absolute;top: 55%;left: 59%;  width: 18%;}

.section6.active .img1{animation-name:slideInUp;animation-delay:1s;}
.section6.active .img2{animation-name:fadeInDown;animation-delay:0.5s;}
.section6.active .img3{animation-name:fadeInRight;animation-delay:1.5s;}
.section6.active .img4{animation-name:fadeInRight;animation-delay:2s;}
.section6.active .img5{animation-name:fadeInRight;animation-delay:2.5s;}
.section6.active .img6{animation-name:fadeInRight;animation-delay:3s;}
.section6.active .img7{animation-name:fadeInRight;animation-delay:3.5s;}
.section6.active .img8{animation-name:fadeInRight;animation-delay:4s;}
.section6.active .img9{animation-name:fadeInRight;animation-delay:4.5s;}
.section6.active .img10{animation-name:fadeInRight;animation-delay:5s;}
.section6.active .img11{animation-name:fadeInRight;animation-delay:5.5s;}

.section7{position:relative;background:#fff;min-width: 1200px;}
.section7 .img1{position: absolute;top: 5%; left: 20%; width: 12%;}
.section7 .img2{position: absolute;top: 5%; right: 20%; width:40%; }
.section7 .img3{position: absolute;top: 30%; left: 20%; width: 40%;}
.section7 .img4{position: absolute;top: 30%; right: 20%; width: 12%;}
.section7 .img5{position: absolute;top: 65%;left: 20%; width: 12%;}
.section7 .img6{position: absolute;top: 65%;right: 20%; width:40%; }

.section7.active .img1{animation-name:fadeInLeft;animation-delay:0.5s;}
.section7.active .img2{animation-name:fadeInRight;animation-delay:0.5s;}
.section7.active .img3{animation-name:fadeInLeft;animation-delay:1.5s;}
.section7.active .img4{animation-name:fadeInRight;animation-delay:1.5s;}
.section7.active .img5{animation-name:fadeInLeft;animation-delay:2.5s;}
.section7.active .img6{animation-name:fadeInRight;animation-delay:2.5s; }

.footer{ background: #000; min-width:1200px;}
.footer .wrapper{ height: 52px; padding: 40px 0;}
.footer span{display: block; line-height: 52px; float: left;font-size: 31px; color: #fff;}
.footer img{float: left; margin: 10px 10px 0 50px;}
.footer .buy-btn{width: 150px;margin-left: 15px; height: 46px;line-height: 46px; text-align: center;color: #000; background: #ecc305; float: right;cursor: pointer; border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;}

.swiper-box{width: 850px; overflow: hidden; position: absolute;top: 266px;left: 175px;}
.swiper-container {width: 100%;  padding-top: 20px;  padding-bottom: 115px;  }
.swiper-slide {background-position: center;  background-size: cover;  width: 300px;  height: 484px;  }
.swiper-slide .swiper-note{padding-top: 500px;  }
.swiper-slide .swiper-note{display: none;}
.swiper-slide-active .swiper-note{display: block;}
.swiper-slide h3 {text-align: center;  font-size: 24px;  color: #fdd000;  }
.swiper-slide h3 span{color: #fff;  }
.swiper-slide p{color: #fff;  font-size: 16px;  width: 300px;  line-height: 1.5;  text-align: center;}

.voide-mask{position: fixed; top: 50%; left: 50%; margin:-169px 0 0 -300px; width: 600px;height:338px ; background: rgba(0,0,0,0.6);}
.voide-mask .mask-close{position: absolute; top: -15px; right: -15px; width: 30px; height: 30px; display: block; border: 1px solid #000; border-radius: 50%; -webkit-border-radius: 50%; text-align: center; line-height: 25px; font-size: 24px; font-weight: bolder; color: #000; cursor: pointer;align-self: center;
    transform:rotate(45deg);
    -ms-transform:rotate(45deg); 	/* IE 9 */
    -moz-transform:rotate(45deg); 	/* Firefox */
    -webkit-transform:rotate(45deg); /* Safari �� Chrome */
    -o-transform:rotate(45deg);
}




@media screen and (max-width: 1366px) {
	.section1,.section2,.section3,.section4,.section5,.section6,.section7{
	  min-width:1200px; overflow: hidden;
	}
	
    .section1 .img1{ position: absolute;bottom: 0;width: 67%;left: 3%;}
    .section1 .img2{ position: absolute;width: 44%;left: 28%;top: 3%;}
    .section1 .img3{ position: absolute;width: 12%;top: 12%;left: 46%; cursor: pointer;}
    .section1 .img4{ position: absolute;width: 20%;right: 25%;top: 25%;}
    .section1 .img5{ position: absolute;width: 13%;bottom: 10%;left: 10%;}
    .section1 .img6{ position: absolute;width: 18%;bottom: 8%;left: 44%;}
    .section1 .img7{ position: absolute;width: 26%;bottom: 0;  left: 23%;}

    .section2 .img1{position: absolute; width: 50%; left: 25%; top: 4%;}
    .section2 .img2{position: absolute;     width: 72%; left: 13%; bottom: 0%;}
    .section2 .img3{position: absolute; width: 30%;right: 23%; top: 26%;}
    .section2 .img4{ position: absolute; width: 18%;right: 46%;top: 45%;}
    .section2-pad{ position: absolute; width: 35%;  left: 0; top: 20%;}
    .section2 .img5{position: absolute;top: 6px; left: 26px;  width: 77%;}
    .section2 .img6{position: absolute;    top: 12px;left: 44px;width: 68%;}

    .section2.active .img2{animation-name:fadeInUp;animation-delay:1s; left: 23%; transition: left 1s 3s cubic-bezier(.25,.46,.45,.94);}
    .section2.active .img3{animation-name:fadeInRight;animation-delay:1.5s; right: 13%; transition: right 1s 3s cubic-bezier(.25,.46,.45,.94);}

    .section3 .img1{position: absolute; width: 40%; left: 30%; top: 3%;}
    .swiper-box{width: 850px; overflow: hidden; position: absolute;top: 140px;left: 175px;}
    .swiper-slide {background-position: top center;  background-size: cover;  width: 300px;  height: 350px;  }
    .swiper-slide .swiper-note{padding-top: 352px;  }

    .section4 .img1{position: absolute;width: 46%; left: 27%; top: 37%;}

    .section5 .page-title{color: #fdd000; font-size: 42px; text-align: center; padding-top: 3%;}
    .section5 .img1{ position: absolute; top: 20%; left: 20%; width: 17%;}
    .section5 .img2{position: absolute;top: 56%;  left: 12%; width: 33%;}
    .section5 .img3{position: absolute; top: 20%;right: 20%; width: 17%;}
    .section5 .img4{position: absolute;top: 56%;  right: 12%; width: 33%;}

    .section6 .img1{position: absolute;bottom: 0;left: 0;width:56%;}
    .section6 .img2{position: absolute;width: 50%; left: 25%;  top: 5%;}

    .section7 .img1{position: absolute;top: 5%; left: 22%; width: 10%;}
    .section7 .img2{position: absolute;top: 5%; right: 22%; width:38%; }
    .section7 .img3{position: absolute;top: 33%; left: 22%; width: 38%;}
    .section7 .img4{position: absolute;top: 33%; right: 22%; width: 10%;}
    .section7 .img5{position: absolute;top: 68%;left: 22%; width: 10%;}
    .section7 .img6{position: absolute;top: 68%;right: 22%; width:38%; }
}

@media screen and (max-width: 1200px) {
	/*  #dowebok > img{animation:none!important;}  */
		.section1,.section2,.section3,.section4,.section5,.section6,.section7 {min-height:650px;}
        .section1.active .img1,.section1.active .img2,.section1.active .img3,.section1.active .img4,.section1.active .img5,.section1.active .img6,.section1.active .img7,.section1.active .section1-list{animation:none;} 
        .section2.active [class^="img"],.section2.active .section2-pad{animation:none;transform:none;transition:none; }
        .section2.active .img3{right:23%;}
        .section2.active .img2{left:13%;}
        .section6.active [class^="img"]{animation:none;}
        .section7.active [class^="img"]{animation:none;}
}