.font-white{color:#fff;}
.font-black{color:#333;}
.font-center{text-align: center;}
.title-box h1{font-size: 48px; line-height: 72px; padding:0 0 20px 0; font-weight: 600; padding:200px 0 0;}
.title-box p{line-height: 36px; font-size: 24px; padding:40px 0 0;}
.section{position: relative; width: 100%; height: 1200px;}
/*
.section .transi-up{opacity: 0; -webkit-transform: translate3d(0,30px,0); -moz-transform: translate3d(0,30px,0); transform: translate3d(0,30px,0);}
.section.is-visible .transi-up{opacity: 1; -webkit-transition: opacity .8s; -moz-transition: opacity .8s; transition: opacity .8s; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); transform: translateZ(0);}
*/

.sw-light{position: relative;}
.sw-light .product-banner{position: relative; height: 1080px; overflow: hidden; background: url('../images/ac_switch_banner.jpg') 50% no-repeat #141414;}
.sw-light .product-banner .wrap{position: relative;}
.sw-light .product-banner .title-box {width: 100%; margin:280px 0 0; color:#fff; text-align: right;}
.sw-light .product-banner .title-box h1{}
.sw-light .product-banner .title-box .curve{background: #00a0e9; padding:6px 10px; margin:0 0 0 10px; color: #fff; border-radius: 10px;}
.sw-light .product-banner .title-box p{color:#fff;}
.sw-light .product-banner .title-box .fun{ line-height: 28px; font-size: 14px; color:#b2b2b2;}
.sw-light .product-main-content{position: relative; overflow: hidden; box-sizing: border-box;}

.section_compose{background: url('../images/index_compose_bg.jpg') no-repeat #272727; background-position: center; background-size: 1920px 1200px;}
.section_compose .img-compose{background: url('../images/index_compose.png') no-repeat; width: 1466px; height: 320px; margin:240px auto 0;}

.section_mode{background: url('../images/index_mode_bg.jpg') no-repeat #000; background-position: center; background-size:  1920px 1200px;}
.section_mode .img-mode{background: url('../images/index_mode.png') no-repeat; background-size: cover; width: 860px; height: 625px; margin:80px auto 0;}

.section_matching{background: url('../images/index_matching_bg.jpg') no-repeat #bbc0c5; background-position: center; background-size:  1920px 1200px;}

.section_internet{background: #1d1d1d; background-position: center; background-size:  1920px 1200px;}
.section_internet .img-internet{background: url('../images/index_internet.png') no-repeat; background-size: cover; width: 1640px; height: 466px; margin:80px auto 0;}

.section_relation{background: url('../images/index_relation_bg.jpg') no-repeat #eaf1f9; background-position: center; background-size:  1920px 1200px;}
.section_relation .context{position: relative; width: 1920px; margin:0 auto;}
.section_relation .img-relation-d{position: absolute; top:300px; left:280px; background: url('../images/index_relation_d.png') no-repeat; background-size: cover; width: 320px; height: 320px;}
.section_relation .context ul.item{position: absolute; top:136px; left:720px;}
.section_relation .context ul.item li{width: 234px; height: 580px; background-size: cover; float: left; margin:0 0 0 16px;}
.section_relation .context ul.item .r1{background: url('../images/index_relation_r1.png') no-repeat; }
.section_relation .context ul.item .r2{background: url('../images/index_relation_r2.png') no-repeat;}
.section_relation .context ul.item .r3{background: url('../images/index_relation_r3.png') no-repeat;}
.section_relation .context ul.item .r4{background: url('../images/index_relation_r4.png') no-repeat;}
.section_relation .context ul.item li span{opacity: 0; display: block; height: 100%; font-size: 36px; font-weight: 600; text-align: center; padding:272px 0 0; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s;}
.section_relation .context ul.item li:hover span{opacity: 1; background: rgba(255,255,255,.8);}

.section_lock{height: 1080px; background: url('../images/index_lock_bg.jpg') no-repeat #000; background-position: center; background-size:  cover;}

.section_morecontrol{height: 1600px; background: #fff; background-position: center; background-size:  1920px 1200px;}
.section_morecontrol .img-morecontrol{background: url('../images/index_morecontrol.png') no-repeat; background-size: cover; width: 1400px; height: 964px; margin:100px auto 0;}

.section_timer{height: 1080px; background: url('../images/index_timer_bg.jpg') no-repeat #e4e9ed; background-position: center; background-size:  1920px 1080px;}
.section_timer .context{position: relative; width: 1920px; margin:0 auto;}
.section_timer .context ul.item{position: absolute; width: 100%; height: 620px; margin:60px 0 0;}
.section_timer .context ul.item li{width: 534px; height: 566px; background-color: rgba(170,200,234,.2)!important; background-size: cover; position: absolute; top:0;}
.section_timer .context ul.item li span{text-align: center; position: absolute; bottom: 0; width: 100%; height: 36px; line-height: 36px; background: #333; color: #fff;}
.section_timer .context ul.item .d1{background: url('../images/control_date_d1.png') no-repeat; left:0;}
.section_timer .context ul.item .d2{background: url('../images/control_date_d2.png') no-repeat; left:50%; margin-left: -267px;}
.section_timer .context ul.item .d3{background: url('../images/control_date_d3.png') no-repeat; right:0;}

.section_parameter{height: 2160px; background: url('../images/index_parameter.jpg') no-repeat #afb7be; background-position: center;}




