@charset "utf-8";

/* reset.css */
html {margin:0;padding:0;border:0;}
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:'Microsoft YaHei,Arial';vertical-align:baseline; list-style: none;word-warp: break-warp;word-break: break-all;}
article, aside, dialog, figure, footer, header, hgroup, nav, section {display:block;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance: none;}input[type="number"]{-moz-appearance: textfield;}
select, input, img { vertical-align: middle; outline: none;border:0 }
select{appearance:none;-moz-appearance:none;-webkit-appearance:none;}
select::-ms-expand { display: none; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {   color: #816926;   }   
input:-moz-placeholder, textarea:-moz-placeholder {   color: #816926;   }   
input::-moz-placeholder, textarea::-moz-placeholder {    color: #816926;   }   
input:-ms-input-placeholder, textarea:-ms-input-placeholder {    color: #816926;   }
textarea{resize: none;}
body { font-size: 14px; font-family: Microsoft YaHei; }
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;float:none !important;}
table, th, td {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:'';}
blockquote, q {quotes:"" "";}
a img {border:none;}
select, input, img { vertical-align: middle; outline: none;border:0 }
a { text-decoration: none;  blr: expression(this.onFocus=this.blur());outline: none; }
a:hover {  text-decoration: none; }
a:focus{ outline: none;}
.ovf{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-ms-text-overflow: ellipsis;-o-text-overflow: ellipsis;-moz-binding: url("ellipsis.xml#ellipsis");}
.cl:after { content: ""; display: block; clear: both;visibility: hidden;height: 0 }
.cl { zoom: 1; }
.fl { float: left; }
.fr { float: right;}
.mb2{margin-bottom: 20px;}
.scroll::-webkit-scrollbar  {  width: 6px;  height: 6px;  background-color: #F5F5F5;  }   
.scroll::-webkit-scrollbar-track  {  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  border-radius: 10px;  background-color: #F5F5F5;  }  
.scroll::-webkit-scrollbar-thumb  {  border-radius: 10px;  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  background-color: #555;  } 
body{ min-width: 1550px; margin: 0 auto; background: #f3f7f9;}
.wrap1260{ width: 1260px; position: relative; margin: 0 auto;}
.wrap1550{ width: 1550px; position: relative; margin: 0 auto;}

/***m1**/
.m1{ height: 900px; background: url(../images/m1.jpg) no-repeat center top; position: relative; overflow: hidden;}
.m1 .slogan{ display: inline-block; width: 574px; position: absolute; top: 105px; left: -4px;z-index: 9;}
.fly1{ display:block; position: absolute; left: 50%; margin-left: -540px; top:650px; width: 123px; z-index: 5; animation: moveTop 4.2s linear 0s infinite; -webkit-animation: moveTop 3.2s linear 0s infinite; }
.fly2{ display:block; position: absolute; left: 50%; margin-left: -840px; top:102px; width: 141px; z-index: 5; animation: moveTop 4.2s linear 0s infinite; -webkit-animation: moveTop 3.6s linear 0s infinite; }
#scene { position: absolute; left: 0; top:0; width: 100%; height: 100%;}
#scene li{ position: absolute; left: 0; top:0; width: 100%; height: 100%;}
.m1 .img1 img{ display: inline-block; width: 954px; position: absolute; left: 50%; margin-left: 14px; top:-15px; z-index: 1}
.m1 .img2 img{ display: inline-block; position: absolute; left: 50%; bottom: 0; width: 360px; height: 462px; z-index: 2; margin-left: -980px;}
.m1 .img3 img{display: inline-block; position: absolute; right: 50%; bottom: 0; width: 852px; height: 413px; z-index: 2; margin-right: -960px;}
.m1 .img4 img{display: inline-block; position: absolute; left: 50%; bottom: 0; z-index: 3; left: 50%; margin-left: -700px; width: 1690px;}

/**m2**/
.m2{ height: 753px; background: #fff url(../images/m2-bg-new.png) no-repeat center top; position: relative; overflow: hidden;}
.m2-bg{ display:block; position: absolute; left: 50%; margin-left: -725px; top:72px; width: 1450px; height: 648px;} 
.m2 .m2-desc{ width: 712px; position: absolute; right:40px; top:272px; height: 310px; color:#1f2833; }
.m2 .m2-desc p{font-size: 16px; line-height: 26px; text-indent: 2em; padding-bottom: 10px;}

.m-song {background: #F6FFE5 url(../images/song-bg.png) no-repeat center bottom; padding-bottom: 266px;}
.m-song-inner {width: 1450px;margin: 0 auto; padding-top: 104px;}
.song-pic-box {font-size: 0;border: 6px solid  #fff;margin-top: 30px;}
.song-video-box {padding: 6px;background-color: #fff;align-self: flex-start;}
.song-video-box img {cursor: pointer;}
.song-video-title {font-size: 24px;text-align: center;padding: 24px 0;}

/**m3**/
.m3{height: 1011px; background: url(../images/m3.jpg) no-repeat center top; position: relative; overflow: hidden;margin-top:-1px;}
.m3 .htit{ color: #fff; font-size: 48px; font-weight: bold; }
.m3 .m3-swiper{ width: 1300px;}
.m3 .htit span{ display: block; font-size: 24px; font-weight: normal;}
.m3 .swiper-slide{ height: 557px;}
.m3 .m3-item{ width: 414px; height: 445px; background-color: #fff; position: relative; margin-top: 32px; transition: all .4s; -webkit-transition: all .4s; margin-top: 80px;}
.m3-item a{ display: block; width: 414px; height: 263px; overflow: hidden; cursor: pointer; }
.m3-item a img{ width: 100%;}
.m3-item .stype{ display: inline-block; width: 147px; height: 66px; background: #a2efa5; text-align: center; line-height: 66px; font-size: 30px; font-weight: bold; color: #096890; border-radius: 33px; -webkit-border-radius: 33px; position: absolute; left: 50%; margin-left: -74px; top: -33px;}
.m3-item h2{ color: #1f2833; font-size: 24px; font-weight: bold; margin:0 30px; height: 58px; line-height: 60px;}
.m3-item p{ margin: 0 30px; font-size: 15px; color: #1f2833; max-height: 100px; overflow: hidden; line-height: 24px;}
.m3-item .more{ display: block; width: 140px; height: 30px; line-height: 30px; text-align: center;  font-size: 16px; position: absolute; right: 10px; top:276px; background-color: #48bfaf; border-radius: 15px; -webkit-border-radius: 15px; background: url(../images/more.png) no-repeat center center; cursor: pointer; }
.m3 .product-more{ height: 440px; background: #4cd6c1; }
.m3 .product-more a{height: 440px;}
.m3 .swiper-button-next, .m3 .swiper-button-prev{ width: 73px; height: 73px; background: url(../images/btn-point.png) no-repeat; outline: none;}
.m3 .swiper-button-prev{ background-position: 0 0; left: 0; top:686px; margin: 0; }
.m3 .swiper-button-prev:hover{ opacity: .6; filter:alpha(opacity=60);}
.m3 .swiper-button-next{ background-position: -108px 0px; left: 109px; top:686px; margin: 0; }
.m3 .swiper-button-next:hover{ opacity: .6; filter:alpha(opacity=60); }
.m3 .m3-item:hover{ box-shadow: 5px 5px 20px rgba(0,0,0,.5); transform:translateY(-20px); -webkit-transform: translateY(-20px);}


/**m4**/
.m4{ height: 972px; position: relative; background: url(../images/m4.jpg) no-repeat center top; overflow: hidden; margin-bottom: -1px; }
.m4 .htit{ color: #1f2833; font-size: 48px; font-weight: bold; }
.m4 .htit span{ display: block; font-size: 24px; font-weight: normal;}
.m4-cont{ background: url(../images/cont.png) no-repeat center 60px; min-height: 712px;}
.m4 .m4-desc{ color: #1f2833; font-size: 22px; width: 900px; position: absolute; left: 110px; top:750px; line-height: 32px;}

/**m5**/
.m5{ height: 840px; position: relative; background: url(../images/m5.jpg) no-repeat center top; overflow: hidden;}
.m5 h3{ text-align: center; color: #fff; font-size: 48px; font-weight: bold;}
.m5 ul{ width: 104%; margin-top: 64px;}
.m5 li{ width: 288px; height: 355px; position: relative; float: left; margin-right: 26px; background: #fff; text-align: center; transition:all .4s; -webkit-transition: all .4s;}
.m5 img{ width: 271px; padding: 10px 8px 4px 8px;}
.m5 p{ height: 48px; line-height: 48px; text-align: left; padding-left: 16px; font-size: 18px; color: #1f2833;}
.m5 .btnVote{ display: inline-block; width: 126px; height: 52px; position: absolute; left: 50%; margin-left: -63px; top:380px; line-height: 52px; text-align: center; color: #1f2833; font-size: 18px; background: #bbffc7; border-radius: 26px; -webkit-border-radius: 26px; cursor: pointer;}
.m5 .disable{ background: #b6fff2;}
.m5 li:hover{ transform:translateY(-10px); -webkit-transform:translateY(-10px); box-shadow: 0px 0px 10px 4px rgba(0,0,0,.3)}
.m5 li:hover .btnVote{background-color: #ffffff;}
/**m6**/
.m6{ position: relative; height: 530px; overflow: hidden; background: #f3f7f9;}
.m6 .security{ display: block; margin: 0 auto; margin-bottom: 10px;}
.m6 h3{ text-align: center; color: #1f2833; font-weight: bold; font-size: 48px; }
.m6 ul{ width: 104%; margin-top: 50px;}
.m6 li{ width: 288px; height: 242px; margin: 0 10px; background: #fff; float: left; text-align: center; cursor: pointer; transition:all .4s; -webkit-transition: all .4s;}
.m6 li img{ padding-top: 8px;}
.m6 p{ text-align: center; color: #1f2833; font-size: 18px; padding-top: 18px; overflow: hidden;}
.m6 li:hover{ transform:translateY(-10px); -webkit-transform:translateY(-10px); box-shadow: 0px 0px 10px 4px rgba(0,0,0,.3)}
/**footer**/
.footer{width:1140px;margin:0 auto;padding:20px 0;text-align: center;}
.footer p{line-height:24px;color:#a1a1a1;}
.footer a{ color: #aeb2b8;}

/**弹窗**/
.prompt{ position: fixed; left: 0; top:0; width: 100%; height: 100%; background: rgba(0,0,0,.7); z-index: 999; display: none;}
.popbox{ position: relative; z-index: 999; transform:translate(-50%,-50%); left: 50%; top:50%; background: #000;}
.prompt-video .popbox{ width: 914px;height: 534px; background: #000; border-radius: 5px; -webkit-border-radius: 5px;}
.close{ display: inline-block; width: 70px; height: 70px; background: url(../images/close.png) no-repeat center center; position: absolute; right: -80px; top:0; cursor: pointer;}
.prompt-video video{ width: 100%; height: 100%;}
.prompt-vote .popbox{ width: 607px; height: 317px; background: url(../images/pop-succ.png) no-repeat center top;}
.prompt-vote p{ padding-top: 144px;text-align: center;color: #1f2833;font-size: 18px;line-height: 30px; margin-left: 234px; }
.prompt-works .popbox { width: 1192px; height: 779px;}
.prompt-works .worksbg4{ background: url(../images/pop-img1.png) no-repeat 50px top;}
.prompt-works .worksbg2{ background: url(../images/pop-img2.png) no-repeat 41px top;}
.prompt-works .worksbg3{ background: url(../images/pop-img3.png) no-repeat 90px top;}
.prompt-works .worksbg1{ background: url(../images/pop-img4.png) no-repeat 45px -47px;}
.prompt-works .worksbg5{ background: url(../images/pop-img5.png) no-repeat 90px 0;}
.prompt-works .worksbg6{ background: url(../images/pop-img6.png) no-repeat 90px top;}
.prompt-works .works{ height: 572px; text-align: center; display: none}
.prompt-works h3{ font-size: 30px; font-weight: bold; padding: 44px 0 20px 0; color: #fff;}
.prompt-works p{ font-size: 16px; line-height: 32px; width: 876px; margin: 0 auto; text-align: left; color: #fff;}
.prompt-works ul{ text-align: center;}
.prompt-works li{ width: 110px;height: 112px; display:inline-block; background: url(../images/works-point.png) no-repeat; margin: 0 14px; opacity: .6; filter:alpha(opacity=60); transition:all .4s; -webkit-transition: all .4s; cursor: pointer;}
.prompt-works .point4{ background-position: 14px 0}
.prompt-works .point2{ background-position: -127px 0}
.prompt-works .point3{ background-position: -269px 0}
.prompt-works .point1{ background-position: -410px 0}
.prompt-works .point5{ background-position: -555px 0}
.prompt-works .point6{ background-position: -694px 0}
.prompt-works .on{transform:translateY(-20px); -webkit-transform: translateY(-20px); opacity: 1; filter:alpha(opacity=100);}
.prompt-works .close{ right: 0;}
.p5-icon{ display:none; width: 152px; height: 140px; background: url(../images/p-icon.png) no-repeat center top; position: absolute; left: 35px; top:-36px;}
.p3-icon{display:none; width: 209px; height: 292px; background: url(../images/p-icon2.png) no-repeat center top; position: absolute; left: -29px;top: 232px;}
.p1-icon{display:none; width: 179px; height: 119px; background: url(../images/p-icon3.png) no-repeat center top; position: absolute; left: 70px;top: -18px;}
.worksbg5 .p5-icon{ display:block; }
.worksbg3 .p3-icon{ display:block; }
.worksbg1 .p1-icon{ display:block; }

.active .s1{ -webkit-animation:wave 0.6s linear infinite; animation:wave 0.6s linear infinite; }
.active .s2{ -webkit-animation:wave 0.8s linear infinite; animation:wave 0.8s linear infinite; }
.active .s3{ -webkit-animation:wave 0.7s linear infinite; animation:wave 0.7s linear infinite; }
.active .s4{ -webkit-animation:wave 0.5s linear infinite; animation:wave 0.5s linear infinite; }
.active .s5{ -webkit-animation:wave 0.9s linear infinite; animation:wave 0.9s linear infinite; }

@media only screen and (max-width: 1551px) {
    body{ overflow-x: hidden; min-width: 1366px; }  
    .m5 li{ margin-right: 10px; width: 18%; }
    .m5 li img{ width: 88%;}
    .m6 li{ margin-right: 0; width: 18%;}
    .m6 li img{ width: 88%;}
    .wrap1550{ width: 1366px; position: relative; margin: 0 auto; margin-left: 16px;}
    /*.wrap1260{ margin-left: 26px;}*/
    .m3 .m3-swiper{ margin-left: -26px; }
    .m4 .m4-desc{ margin-left: 14px; top:806px; }
    .wrap1550,.wrap1260,.m2-bg{ transform:scale(.9); -webkit-transform: scale(.9); }
    .m2 .m2-desc{ top:316px; }
}   


/***动画***/
@-webkit-keyframes moveTop{
  0%{-webkit-transform:translate(0px,0px);}
  50%{-webkit-transform:translate(-6px,20px);}
  100%{-webkit-transform:translate(0px,0px);}
}
@-moz-keyframes moveTop{
  0%{-moz-transform:translate(0px,0px);}
  50%{-moz-transform:translate(-6px,20px);}
  100%{-moz-transform:translate(0px,0px);}
}
@-ms-keyframes moveTop{
  0%{-ms-transform:translate(0px,0px);}
  50%{-ms-transform:translate(-6px,20px);}
  100%{-ms-transform:translate(0px,0px);}
}
@-o-keyframes moveTop{
  0%{-o-transform:translate(0px,0px);}
  50%{-o-transform:translate(-6px,20px);}
  100%{-o-transform:translate(0px,0px);}
}
@keyframes moveTop{
  0%{transform:translate(0px,0px);}
  50%{transform:translate(-6px,20px);}
  100%{transform:translate(0px,0px);}
}

/**音符跳动**/
@-webkit-keyframes wave{0%{height:10px}50%{height: 30px}100%{height: 10px}}
@keyframes wave{0%{height:10px}50%{height: 30px}100%{height: 10px}}

/**360度旋转**/
@-webkit-keyframes rcircle{
    0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform-origin:0 0;transform-origin:0 0}
    100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);-webkit-transform-origin:0 0;transform-origin:0 0}
}
@keyframes rcircle{
    0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}
}

/**3d 旋转**/
@keyframes round{
    0%{-webkit-transform:rotateY(0deg);-ms-transform:rotateY(0deg);transform:rotateY(0deg)}
    50%{-webkit-transform:rotateY(180deg);-ms-transform:rotateY(180deg);transform:rotateY(180deg)}
    100%{-webkit-transform:rotateY(360deg);-ms-transform:rotateY(360deg);transform:rotateY(360deg)}
}

@-webkit-keyframes round{
    0%{transform: rotateY(0deg);-webkit-transform:rotateY(0deg);}
    50%{transform: rotateY(180deg);-webkit-transform: rotateY(180deg);}
    100%{transform: rotateY(360deg);-webkit-transform: rotateY(360deg);}
}

/**箭头上下飘动**/
@-webkit-keyframes float{
    0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
    50%{opacity:1;-webkit-transform:translateY(6px);transform:translateY(6px)}
    100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes float{
    0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
    50%{opacity:1;-webkit-transform:translateY(6px);-ms-transform:translateY(6px);transform:translateY(6px)}
    100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
}

@-webkit-keyframes fadeIn{
    0%{opacity:0}100%{opacity:1}}
@keyframes fadeIn{
    0%{opacity:0}100%{opacity:1}}

@-webkit-keyframes fadeInDown{
    0%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}
    100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes fadeInDown{
    0%{opacity:0;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)}
    100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}

@-webkit-keyframes fadeInDownBig{
    0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}
    100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes fadeInDownBig{
    0%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}
    100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}

@-webkit-keyframes fadeInLeft{
    0%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}
    100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}
@keyframes fadeInLeft{
    0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}
    100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}

@-webkit-keyframes fadeInLeftBig{
    0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}
    100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}
@keyframes fadeInLeftBig{
    0%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}
    100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}

@-webkit-keyframes fadeInRight{
    0%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}
    100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}
@keyframes fadeInRight{
    0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}
    100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}

@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}
    100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}
@keyframes fadeInRightBig{
    0%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}
    100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}

@-webkit-keyframes fadeInUp{
    0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}
    100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}
    100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}

@-webkit-keyframes fadeInUpBig{
    0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}
    100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes fadeInUpBig{
    0%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}
    100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}

/**二维码横线**/
@-webkit-keyframes updown{
    0%{opacity:1;-webkit-transform:translateY(20px);transform:translateY(20px)}
    50%{opacity:1;-webkit-transform:translateY(70px);transform:translateY(70px)}
    100%{opacity:1;-webkit-transform:translateY(20px);transform:translateY(20px)}
}
@keyframes updown{
    0%{opacity:1;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}
    50%{opacity:1;-webkit-transform:translateY(70px);-ms-transform:translateY(70px);transform:translateY(70px)}
    100%{opacity:1;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}
}