.font-white{color:#fff;}
.font-black{color:#333;}
.font-center{text-align: center;}
.title-box {margin: 100px 0 0;}
.title-box h1{font-size: 48px; line-height: 72px; font-weight: 600;}
.title-box p{line-height: 36px; font-size: 24px;}
.section{position: relative; width: 100%; height: 1200px; overflow: hidden;}

/*
.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);}
*/

.titanium-series{position: relative;}
.titanium-series .product-banner{position: relative; height: 1000px; overflow: hidden;background: linear-gradient(135deg, #e7ebee 20%, #eee 60%, #caced1 100%);}
.titanium-series .product-banner::before{content:''; position: absolute; inset: 0; background: url('../images/img_titanium.png') 120% center / 62% no-repeat; }
.titanium-series .product-banner .wrap{position: relative;}
.d-flex{display: flex; height: 100%;}
.titanium-series .product-banner .title-box {color:#333; flex: 1;}
.titanium-series .product-banner .title-content{height: 1000px; display: table-cell; vertical-align: middle;}
.title-sk{font-size: 32px; font-weight: bold;}
.titanium-series .product-banner .title-box h1{font-size: 64px; font-weight: bold;}
.titanium-series .product-banner .title-box .curve{background: #00a0e9; padding:6px 10px; margin:0 0 0 10px; color: #fff; border-radius: 10px;}
.dev-type{margin:100px 0 0; font-size: 21px; font-weight: bold;}
.titanium-series .product-banner .title-box p{color:#fff; background: linear-gradient(45deg, #2eafe9, #56c8fc); padding:0 10px; margin:20px 0 0; display: inline-block; border-radius: 20px;}
.titanium-series .product-banner .title-box .fun{ line-height: 28px; font-size: 14px; color:#666;}
.titanium-series .product-main-content{position: relative; overflow: hidden; box-sizing: border-box;}
.img-titanium{ flex: 1;}

.section_sw4t{height: 1280px; background:#fff; overflow: hidden;}
.section_sw4t .section_body{position: relative; height: calc(100% - 100px); z-index: 1;}
.section_sw4t .img-sw4t{background:url('../images/index_sw4t.png') center no-repeat; position: absolute; inset: 0;}
.section_sw4t .img-sw4t div{color:#333; position: absolute; font-size: 18px; width: 260px;}
.section_sw4t .img-sw4t .n1{top:152px; left:124px; text-align: right;}
.section_sw4t .img-sw4t .n2{top:508px; left:124px; text-align: right;}
.section_sw4t .img-sw4t .n3{top:818px; left:124px; text-align: right;}
.section_sw4t .img-sw4t .n4{top:152px; left:1090px;}
.section_sw4t .img-sw4t .n5{top:480px; left:1090px;}
.section_sw4t .img-sw4t .n6{top:836px; left:1090px;}


.section_fun1{height: 1440px; background: #f2f2f2; overflow: hidden;}
.fun_comm {width: 100%; height: 1100px; margin:100px 0 0; position: relative; background: url('../images/index_fun1_bg.png') top center no-repeat;}
.fun_comm .dev-comm{text-align: center; color:#333; position: absolute;  width: 260px; font-size: 14px;}
.section_fun1 .fun_comm .n1{top:254px; left:112px;}
.section_fun1 .fun_comm .n2{top:636px; left:112px;}
.section_fun1 .fun_comm .n3{bottom:28px; left:112px;}
.section_fun1 .fun_comm .n4{top:254px; right:112px;}
.section_fun1 .fun_comm .n5{top:636px; right:112px;}
.section_fun1 .fun_comm .n6{bottom:28px; right:112px;}
.section_fun1 .fun_comm .c0{top:642px; left:580px; width: 320px;}
.section_fun1 .fun_comm .tip-up{top:316px; left:580px; width: 320px;}
.section_fun1 .fun_comm .tip-down{bottom:98px; left:580px; width: 320px;}

.section_ac3n{height: 1000px; background: #fff; overflow: hidden;}
.section_ac3n .img-ac3n{ margin:100px 0 0; height: 490px; background:url('../images/index_ac3n.png') center/ 100% auto no-repeat;}

.section_fun2{height: 1440px; background: #f2f2f2; overflow: hidden;}
.section_fun2 .img-fun2{ margin:100px 0 0; height: 1000px; background:url('../images/index_fun2.png') center/ auto 100% no-repeat;}

.section_fun3{height: auto; background: #fff; overflow: hidden;}
.section_fun3 .fun-base{margin:60px 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
.section_fun3 .fun-base .item{padding:20px; margin:10px; border-radius: 10px; height: 100px; flex: 0 0 300px; font-size: 18px; display: flex; align-items: center; justify-content: center;}
.section_fun3 .fun-base .item:nth-child(odd){background: #cbced3;}
.section_fun3 .fun-base .item:nth-child(even){background: #e5e5e5;}
.section_fun3 .img-fun3{height: 600px; background: url('../images/index_fun3.png') center / auto 100% no-repeat; margin:60px auto 0;}


.wrap-flex {display: flex; align-items: center; justify-content: center;}
.section_fun4{height: 1000px; background: url('../images/index_pir_bg.png') center no-repeat; overflow: hidden;}
.section_fun4::after{content:''; display:block; width: 1200px; height: 747px; margin:100px auto 0; background: url('../images/index_switch_pir.png') center / cover no-repeat;}


.section_nightlamp{height: 1000px; background: url('../images/index_nightlamp_bg.png') center / cover no-repeat; overflow: hidden;}
.section_nightlamp  .wrap{display: flex; flex-wrap: wrap; width: 1440px; justify-content: center;}
.section_nightlamp  .wrap::before{content:''; width: 840px; height: 1000px; background: url('../images/img_nightlamp.png') center bottom / 60% no-repeat}
.section_nightlamp  .title-box{width: 600px;}

.section_hidekey{height: 1000px; background: url('../images/index_hidekey_bg.png') center no-repeat; overflow: hidden;}
.section_hidekey::after{content:''; display:block; height: 100%; background: url('../images/img_hidekey.png') center 20% / auto 56% no-repeat;}