@charset "utf-8";
/*index主页轮播*/
.flexslider {position: relative;width: 100%;height: 400px;overflow: hidden;zoom: 1;}    
.flexslider .slides li {width: 100%; }    
.flex-direction-nav a {width: 70px;height: 70px;line-height: 99em;overflow: hidden;margin: -35px 0 0;display: block;background:url(../img/ad_ctr.png) no-repeat;position: absolute;top: 50%;z-index: 10;cursor: pointer;opacity: 0;filter: alpha(opacity=0);-webkit-transition: all .3s ease;border-radius: 35px; }   
.flex-direction-nav .flex-next {background-position: 0 -70px;right: 0;}    
.flex-direction-nav .flex-prev {left: 0;}  
.flexslider:hover .flex-next {opacity: 0.8;filter: alpha(opacity=25); }    
.flexslider:hover .flex-prev {opacity: 0.8;filter: alpha(opacity=25);}    
.flexslider:hover .flex-next:hover,.flexslider:hover .flex-prev:hover {opacity: 1;filter: alpha(opacity=50); cursor:pointer;}    
.flex-control-nav { width: 100%;position: absolute;bottom: 10px; text-align: center;}    
.flex-control-nav li { margin: 0 2px;display: inline-block; zoom: 1;*display: inline;}  
.flex-control-paging li a {background:url(../img/dot.png) no-repeat 0 -16px;display: block; height: 16px;overflow: hidden;text-indent: -99em;width: 16px;cursor: pointer;}   
.flex-control-paging li a.flex-active,.flex-control-paging li.active a {background-position: 0 0;}    
.flexslider .slides li>div>img {width: 100%;height: 400px;display: block; }
/*我们的优势*/
.title{ width:60rem; text-align:center;margin:2rem  auto 0 auto;}
.title h3{ color:#333; font-size:1.6rem; font-weight:normal; margin-bottom:0.5rem; }
.title span{ color:#666;font-size:.8rem;}
.index-us{ width:60rem; margin:2rem auto;  height:296px;}
.index-us img{ float:left;}
.index-us>span{ float:left; background-color:#fff; color: #999; }
.index-us>span>h4{padding-bottom:1rem;font-size: 1.5rem; width:15rem; border-bottom: 2px solid #e6e6e6;color:#333;margin:.5rem 0 1rem 2rem;}
.index-us>span>span{margin-left:2rem; display:block; color:#757575; line-height:1.6rem; font-size:.8rem; width:38rem;}
/*发展历程*/
.History{background-color: #fafafa; list-style: none; width: 1920px;padding-bottom: 1rem;margin: 0 auto;}
.History ul{ margin:0 auto;width: 1200px; padding: 4rem 0 2rem 0;}
.History ul li{display: inline-block; width: 4rem; height: 4rem; border-radius: 50%; border:2px solid #0bb9f8; text-align: center; font-weight: bold; color: #0bb9f8; line-height: 4.1rem; margin:.76rem; cursor: pointer;}
.History ul li.Ul-clickStyle{background-color:#0bb9f8; color: #fff;}
.History ol li{display: none; text-align: center; font-size: .8rem; line-height: 1.6rem; height: 4.1rem; padding-bottom: 1rem; color: #333;}
/*案例*/
.index-case{ height:22.5rem; margin:1.5rem auto 0 auto; width:60rem;}
.index-case-left{ width:41rem; float:left;}
.index-case-left ul{ display:flex;-webkit-display:flex; flex-direction: row; flex-wrap:wrap;}
.index-case-left ul li{ width:19rem; display:block; height:6rem; position:relative; margin:0 1.5rem 1.5rem 0;}
.index-case-left ul li a{ width:19rem; display:block; height:6rem; }
.index-case-left ul li img{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:none;}
.index-case-left-list1 a{ background-image:url(../img/index-main-case-1.jpg);}
.index-case-left-list2 a{ background-image:url(../img/index-main-case-2.jpg);}
.index-case-left-list3 a{ background-image:url(../img/index-main-case-3.jpg);}
.index-case-left-list4 a{ background-image:url(../img/index-main-case-4.jpg);}
.index-case-left-list5 a{ background-image:url(../img/index-main-case-5.jpg);}
.index-case-left-list6 a{ background-image:url(../img/index-main-case-6.jpg);}
.index-case-left ul li a:hover{ background-position:bottom;}
.index-case-left ul li a:hover img{ display:block; cursor: pointer;}
 
.index-case-right{ width:18.8rem; height:21rem; float:left; border:1px solid #0473bd;}
.index-case-right ul{ margin-top:0.6rem;}
.index-case-right ul li{ height:2.5rem;margin:0 1rem; border-bottom: 1px solid #eee;}
.index-case-right ul li a{color:#999;font-size:.8rem; line-height:2rem;  }
.index-case-right ul li a:hover{ color:#0bb9f8;}
.index-case-right ul li a .text{display: inline-block; width:250px; height: 2rem; overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1; width:12rem; float:left;}
.index-case-right ul li a .time{ float:right; color: #ccc;}
.index-case-more{margin-top:0.7rem; height:4.6rem; background-color:#0473bd;}
.index-case-more>p{ height:1.2rem;}
.index-case-more a{ display:block;}
.index-case-more a:hover p{ background-color:#fff; color:#0473bd;}
.index-case-more a p{ border:1px solid #fff; color:#fff; font-size:.7rem; line-height:2rem; width:14rem; margin:0 auto; text-align:center; }
/*case内容*/
.case{display: flex; flex-wrap:wrap; justify-content:space-between; width: 60rem; margin: 2rem auto 8rem auto;}
.case-list{ width: 18rem; border:1px solid #ebebeb;  height: 18rem;}
.case-list li{line-height: 3rem; border-bottom: 1px solid #ebebeb; padding-left: 1rem; font-size: .8rem; color: #666;}
.case-list li:last-child{border-bottom:none;}
.case-list li:hover{color: #0b73f5; cursor: pointer;}
.case-box{width:40rem; min-height: 40rem;}
.case-main{display: none;}
.case-main:nth-child(1){display: block;}
.case-main h1{ font-size: 1.2rem; margin-bottom: 1rem;}
.case-main p{ color: #666; font-size: .7rem; line-height: 1.4rem;}
.case-main p b{font-size: .8rem;}
/*我们的用户*/
.index-user{ width: 1200px; margin: 0 auto;}
.user{ display:flex; -webkit-display:flex; justify-content:space-around; -webkit-justify-content:space-around; }
.user>div{ width:18rem; margin:4rem 2rem; border-bottom: 1px solid #ebebeb;border-top: 1px solid #ebebeb;padding:1.5rem 0;}
.user>div p{ font-size:1.8rem; text-align:center; color:#666; font-weight:bold; line-height:3rem;}
.user>div span{ display:block;font-size:.8rem; text-align:center; color:#999; line-height:2rem;}

/*企业图片logo*/
.index-company{ padding-bottom:50px;}
.index-company ul{ display:flex;-webkit-display:flex; flex-direction:row;-webkit-flex-direction:row; flex-wrap:wrap;}
.index-company ul li{ border-top:1px solid #e5e5e5;border-right:1px solid #e5e5e5; height:5rem; width:9.9rem; overflow:hidden; position:relative;}
.index-company ul li:nth-child(1),
.index-company ul li:nth-child(7){ border-left:1px solid #e5e5e5;}
.index-company ul li:nth-child(7),
.index-company ul li:nth-child(8),
.index-company ul li:nth-child(9),
.index-company ul li:nth-child(10),
.index-company ul li:nth-child(11),
.index-company ul li:nth-child(12){ border-bottom:1px solid #e5e5e5;}
.index-company ul li img{ transition:0.6s;-moz-transition:0.6s; -ms-transition:0.6s; -o-transition:0.6s; -webkit-transition:0.6s;}
.index-company ul li:hover img{position:absolute; bottom:0px; left:0;transform: rotateY(360deg); -moz-transform: rotateY(360deg); -ms-transform: rotateY(360deg); -o-transform: rotateY(360deg); -webkit-transform: rotateY(360deg);}
/*Product*/
.product-main,.about-main,.news-main,.maincommon,.product-k-content{ width:60rem; margin: 0 auto;}
.product-main h1,.about-main h1{ color: #0bb9f8; font-size:1.8rem; text-align: center; margin: 5rem 0 4rem 0;}
.product-main article{ font-size: .8rem; line-height: 1.6rem; border-bottom: solid 1px #ebebeb; padding-bottom: 3rem; width: 60rem; display:flex; -webkit-display:flex; -webkit-justify-content:space-between; justify-content:space-between;}
.product-main article div { width: 29rem; }
.product-main article div h2{ font-weight: normal; margin-bottom:1rem;}
.product-main article div a{ background-color: #ffcc00; width: 6rem; line-height: 1.5rem; display: block; text-align: center; font-size: .7rem; color: #fff; border-radius:3px; margin-top: 20px;}
.product-main .article-2,.product-main .article-3,.product-main .article-4{ margin-top: 3rem;}
.product-main .article-4{ border:none;}
/*电子锁*/
.productGs-recommend,.productGs-box{width:60rem; margin: 0 auto;}
.productGs-recommend h1,.productGs-box h1{ color: #333; font-size:1.6rem; font-weight: normal; text-align: center; margin: 5rem 0 1rem 0;}
.productGs-recommend>hr,.productGs-box>hr{ margin: 0 auto; background-color:#0bb9f8; height: .25rem; width: 3.6rem; }
.productGs-recommend>p,.productGs-box>p{ text-align: center; font-size: .8rem; color: #999; line-height: 2.8rem;}
.productGs-recommend ul{ margin-top: 1rem; display:flex; -webkit-display:flex; justify-content:space-around; -webkit-justify-content:space-around;}
.productGs-recommend ul li{ width: 13.5rem; border:1px solid #f0f0f0; animation:myfirst 1s;-webkit-animation:myfirst 1s;}
.productGs-recommend ul li img{ margin: 2rem auto .5rem auto; display: block;}
.productGs-recommend ul li p{ font-size: 1.2rem; color: #333; padding: .5rem 1rem; text-align: center;}
.productGs-recommend ul li>hr{ width: 1.4rem; height: 1px; background-color: #f0f0f0; margin: 0 auto;}
.productGs-recommend ul li font{ color: #999; text-align: center; font-size: .7rem; line-height: 1.4rem; padding:1rem 1.5rem 2rem 1.5rem; display: inline-block;}
.productGs-recommend ul li:hover{border:1px solid #0bb9f8; cursor: pointer; transition: all 1s;}
.productGs-recommend ul li:hover hr{ width: 7.2rem;transition: all 0.5s;}
.productGs-box{height: 800px; }
.productGs-box-left{float: left; margin:0 0.7rem; }
.productGs-box-right{width: 946px; float: left;display:flex; -webkit-display:flex;  flex-wrap:wrap; -webkit-flex-wrap:wrap;}
.productGs-box-right li{ width: 224px; border:1px solid #f0f0f0; height: 286px; margin:0px 6px 14px 6px; background-color: #fff;box-shadow: 0 5px 10px rgba(0,0,0,.1);}
.productGs-box-right li img{margin: 1rem auto .5rem auto; display: block;}
.productGs-box-right li h3{ font-weight: normal; font-size: .8rem; line-height: 1.6rem; text-align: center;}
.productGs-box-right li span{ font-size: .6rem; color: #999; text-align: center; display:block;}
.productGs-box-right li p{font-size: .7rem;line-height: 1.4rem; color: #0bb9f8; text-align: center;}
.productGs-box-right li:hover{transition: all 0.3s; box-shadow: 0 5px 10px rgba(0,0,0,.2);}
.productGs-box-left img:hover{transition: all 0.3s; box-shadow: 0 5px 10px  rgba(0,0,0,.2); cursor: pointer;}
/*about*/
.about-main h1{ margin-bottom: 0.5rem;}
.about-main>p{ text-align: center; font-size: 1rem; margin-bottom: 3rem; }
.about-main article p{ font-size: .8rem; line-height: 1.6rem;  margin-bottom: 6rem;}
.about-main article h3{ font-size: 1rem; font-weight: 900; text-align: center;}
.about-main article img{ margin: 4rem 0 5rem 0;}

/*contact*/
.contact-main span{ font-size: .8rem; line-height: 1.6rem; margin-bottom: 2rem; display: block;}
.contact-main article{display:flex; -webkit-display:flex; -webkit-justify-content:space-between; justify-content:space-between;}
.contact-main-map{ background: url(../img/contact-img-1.jpg) no-repeat center; width: 43rem; height: 24rem;}
.contact-main-text{ width: 16rem;}
.contact-main article{ margin-bottom: 6rem;}
.contact-main article .contact-main-text p{ margin-bottom: 2rem;}
.contact-main article .contact-main-text a{color:#666; font-size: .8rem; line-height: 1.6rem; padding-left: 1.1rem; width: 8rem; display: block;}
.contact-main article .contact-main-text .mail{ background:url(../img/foot-icon-mail1.png) no-repeat left center ;}
.contact-main article .contact-main-text .phone{ background:url(../img/foot-icon-phone1.png) no-repeat left center ;}
.contact-main article .contact-main-text .Facebook{ background:url(../img/foot-icon-facebook1.png) no-repeat left center ;}
.contact-main article .contact-main-text .Youtube{ background:url(../img/foot-icon-Youtube1.png) no-repeat left center ;}
.contact-main article .contact-main-text .Linkedin{ background:url(../img/foot-icon-linked1.png) no-repeat left center ;}
.contact-main article .contact-main-text .Amazon{ background:url(../img/foot-icon-amazon1.png) no-repeat left center ;}

/*news*/
.news-main h1{color: #0bb9f8; font-size:1.8rem; margin: 5rem 0 .5rem 0; text-align: center;}
.news-main>p{font-size:1rem; margin: 0 0 3rem 0;text-align: center;}
.news-main span{ font-size: .8rem; line-height: 1.6rem; margin-bottom: 3rem; display: block;}
.news-main ul li{margin-bottom: 2rem; display:flex; -webkit-display:flex; -webkit-justify-content:flex-start; justify-content:flex-start;}
.news-main ul li img{margin:.5rem 1rem .5rem .5rem; }
.news-main ul li h3{ font-size: 1rem; line-height: 3rem; font-weight: normal;}
.news-main ul li p{ font-size: .8rem; line-height: 1.6rem;}
.news-main ul li p a{ text-decoration: underline;}

/*product-k,product-c,product-h 产品列表*/
.maincommon{margin-bottom: 3rem; }
.maincommon h1{margin-bottom: 3rem;  color: #333; font-size:1.8rem; text-align: center; margin: 5rem 0 4rem 0;}
.maincommon article>div{background: #fafafa;padding: 1rem;}
.maincommon article>div span b{ margin-bottom: .5rem; display: block; color: #EA6125;}
.maincommon article>div p{ font-size: .8rem; line-height: 1.6rem; }
.maincommon article ul{margin: 1rem 0 0rem 0; display: flex; -webkit-display:flex; flex-flow:wrap; -webkit-flex-flow:wrap;}
.maincommon article ul li{ width: 284px; margin:18px 18px 0 0; border: 1px solid #f5f5f5; position: relative;} 
.maincommon article ul li:nth-child(4n){margin-right: 0;}
.maincommon article ul li img.new{position: absolute; width: 42px; left: 0;}
.maincommon article ul li img{width:282px;} 
.maincommon article ul li p{  padding-left: 1rem; font-size: .7rem;}
.maincommon article ul li span{color:#999;line-height: 2rem; font-size: .7rem; display: block;padding:0 0 1rem 1rem;}
.maincommon article ul li p a{ color: #f9b41e;}
.maincommon article ul li:hover{ box-shadow:0px 0px 4px #cccccc; z-index: 999; cursor: pointer;}
.product-key{ width: 60rem; overflow: hidden; margin: 0 auto;}
.product-main-key-1{ height: 520px; background: url(../img/pro/pro-img-bj-1.jpg) no-repeat; background-size:100% 100%; }
.product-main-key-1-text{ margin: 0 auto; text-align: center;}
.product-main-key-1-text h1{margin-top: 5rem;font-size: 2.4rem;color:#000;}
.product-main-key-1-text h2{font-size: 1.2rem;color:#3d3a3a;}
.product-main-key-1-text p{margin-top: .5rem;font-size: .8rem;color:#3d3a3a;}
.product-main-key-2{ background-color:#000; height: 25rem; }
.product-main-key-2 h1{ color: #fff; font-size: 2.4rem;text-align: center;padding-top: 3rem; font-weight: 400;}
.product-main-key-2 p{ color: #ebebeb; font-size: .8rem; width: 50rem; margin: 1rem auto 0 auto; line-height: 1.6rem;}
.product-main-key-3 ul{margin: 2rem auto;}
.product-main-key-3 ul li{ width: 17rem; display: inline-block; margin: 2rem 1rem; }
.product-main-key-3 ul li h3{ font-size: 1.2rem; line-height: 2.4rem; font-weight: 400; color: #4ca6ff;}
.product-main-key-3 ul li p{ font-size: .7rem; line-height: 1.4rem;}
.product-main-key-4 div{width: 60rem; margin: 0 auto;}
.product-main-key-4 div h1{ text-align: center; line-height: 8rem; margin-bottom: 2rem; font-size: 1.8rem;}
.product-main-key-4 div ul{display: flex; flex-wrap:wrap;}
.product-main-key-4 div ul li{width: 30rem; height: 18rem;}
.product-main-key-4 div ul li:nth-child(1){background-color: #f4f4f4; border-radius: 1.5rem 0 0 0;}
.product-main-key-4 div ul li:nth-child(4){background-color: #f4f4f4; border-radius: 0 0 1.5rem 0 ;}
.product-main-key-4 div ul li p{ margin: 0 auto; width: 22rem; margin-top:7rem; font-size: .8rem; line-height:1.6rem; }
.product-main-key-4 div ul li p a{ color: #7d6b57; font-size: 1.6rem;}
.product-main-key-5{margin-top: 6rem; }
.product-main-key-5 div h1{font-size: 1.8rem; text-align: center;}
.product-main-key-5 div p{ font-size: .8rem; line-height: 2.4rem; text-align: center; margin-bottom: 3rem;color: #ccc;}
.product-main-key-6{background: url(../img/pro/pro-img-bj-6.jpg) no-repeat; height: 28rem; margin-top: 5rem;}
.product-main-key-6 p{ color: #fff; font-size: 2.4rem; line-height: 3.6rem; margin:9rem auto 0 auto; width: 40rem;}
.product-main-key-7{background: url(../img/pro/pro-img-bj-7.jpg) no-repeat;height: 28rem;}
.product-main-key-7 p{ color: #333; font-size: 1.8rem; line-height: 2.4rem;width: 330px; margin: 15% 0 0 10%;}
.product-main-key-7 font{ font-size: .8rem; line-height: 1.6rem; color: #666; width: 330px; margin: 1% 0 0 10%;; display: block;}
.product-main-key-8{background: url(../img/pro/pro-img-bj-8.jpg) no-repeat;height: 28rem;}
.product-main-key-8 p{ color: #fff; font-size: 1.8rem; line-height: 2.4rem;width: 330px; margin: 15% 0 0 10%;}
.product-main-key-8 font{ font-size: .8rem; line-height: 1.6rem;width: 330px; color: rgba(255,255,255,.8);margin: 1% 0 0 10%; display: block;}
.product-main-key-9{background: url(../img/pro/pro-img-bj-9.jpg) no-repeat;height: 28rem;}
.product-main-key-9 p{ color: #666; font-size: 1.8rem; line-height: 2.4rem;width: 330px; margin: 15% 0 0 12%;}
.product-main-key-9 p a{ font-size: .8rem;}
.product-main-key-10{ background-color: #f5f9fa; padding-bottom: 4rem; margin-bottom: 4rem; }
.product-main-key-10 div h1{ text-align: center; font-size: 1.2rem; line-height:1.8rem; margin: 4rem 0 2rem 0; }
.product-main-key-10 div ul{ display: flex; flex-wrap:wrap; justify-content:space-between;width: 51rem; margin:0 auto;}
.product-main-key-10 div ul li{ text-align: center; width: 16.9rem;}
.product-main-key-10 div ul li h3{ color: #c9d9f2; font-size:2rem; font-weight: normal; line-height: 4rem; }
.product-main-key-10 div ul li p{ font-size: .8rem; }
/*product-k-content*/
.product-k-content{ margin:1.5rem auto 4rem auto; height: 40rem; display: none; }
.product-k-content-img{ width: 30rem;float: left;}
.product-k-content .product-k-content-img-big{width: 30rem;  height: 30rem; border: solid 1px #f5f5f5; }
.product-k-content .product-k-content-img-big ul li{text-align: center; } 
.product-k-content .product-k-content-img-big ul li img{width: 29.9rem;}
.product-k-content .product-k-content-img-small{ width: 30rem; display:flex; -webkit-display:flex; -webkit-justify-content:flex-start; justify-content:flex-start;}
.product-k-content .product-k-content-img-small img{margin: 1rem .5rem; width: 5rem; height: 5rem; border: 1px solid #f0f0f0; display: block;}
.product-k-content .product-k-content-img-small img:hover{ border: 1px solid #0bb9f8; cursor: pointer;}
.product-k-content-text{ width: 28rem; margin-left: 2rem; float: right;}
.product-k-content-text h4{ font-size:.9rem; line-height: 1.8rem; margin-top: 2rem;}
.product-k-content-text h4 a{ color: #0bb9f8;}
.product-k-content-text>p{ font-size: .8rem; line-height: 1.6rem;}
.product-k-content-text h5{ color: #f9b41e;font-size:.9rem; line-height: 1.8rem; margin-top: 1.5rem;}
.product-k-content-text ul li p{ font-size: .8rem; line-height: 1.6rem;}
.product-k-content-text ul li p span{ color: #999; width:9rem; display: inline-block;}
.product-k-content-text>a{ background-color: #ffcc00; width: 6rem; line-height: 1.5rem; display: block; text-align: center; font-size: .7rem; color: #fff; border-radius:3px; margin-top: 6px; cursor: pointer;}
.product-k-content-text a:nth-child(5){display: none;}/*隐藏留言*/
/*LeaveWord*/
.LeaveWord{ display: none; position:absolute; left: 50%; top:50%; margin-top: -280px; margin-left: -420px; height: 30rem; width: 26rem;  background-color: #fff; border: 1px solid #ebebeb; box-shadow: 0 0 8px #999;}
.LeaveWord>p{ background-color: #ebebeb; color: red; text-align: right; padding-right: .5rem; line-height: 1.6rem; height: 1.6rem; cursor: pointer;}
.LeaveWord ul{ margin-left: 2rem;}
.LeaveWord ul li>p{ color: #999; font-size: .7rem; margin-top: .5rem; line-height: 1.4rem;}
.LeaveWord ul li>p>a{color: red;}
.LeaveWord ul li input{ border: 1px solid #ebebeb; height: 1.6rem; width: 22rem; font-size: .7rem; padding: 0 0 0 6px;}
.LeaveWord ul li select{border: 1px solid #ebebeb; height: 1.6rem; width: 22rem; font-size: .7rem; padding: 0 0 0 6px;}
.LeaveWord ul li textarea{border: 1px solid #ebebeb; padding:0 0 0 6px;width:22rem; line-height:1.4rem; height:5rem;resize:none;font-size: .7rem; }
.LeaveWord ul li input.button{width: 3.5rem; height: 1.5rem; color: #fff; background-color:#ffcc00; border-radius: 3px; border:none; cursor: pointer; margin-top: .5rem;}

/*外贸留言PasswordMessage*/
.messageTable{ margin: 0 auto; width: 60rem; min-height: 36rem;}
.messageTable table{width: 60rem; margin-top: 2rem;max-height:30rem; text-align: left; line-height: 1.4rem;  border-collapse: collapse;table-layout: fixed; overflow:auto; display: inline-block; border:1px solid #f5f5f5;overflow-y:auto;}
.messageTable table tr{height: 2rem;}
.messageTable table thead tr th{border:1px solid #ccc; background-color: #ebebeb; font-size: .7rem;padding-left: .3rem; height: 2rem;}
.messageTable table tbody tr td{border:1px solid #ccc; font-size: .7rem; padding-left: .3rem;  }
.messageTable span{ margin-top: .5rem; display: block; text-align: right; font-size: .7rem;}
.messageTable span a{ padding: 4px 10px; border: solid 1px #e5e5e5; cursor: pointer; background-color: #f5f5f5; }
.messageTable span a:nth-child(3){border-right: none; border-left: none;}
.messageTable span a:hover{background-color: #fff;}

/*验证*/
*{padding:0;margin:0;border:0;list-style:none;text-decoration:none;box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box;}
.floatingFrame{z-index: 2000;position:fixed;top:0;left:0;width:100%;height:100%;background: rgba(54,193,244,.96);}
.floatingContent{width: 20rem;margin-left:40%;margin-top: 18rem;border-radius:.3rem;background-color: #fff;}
.panelBox {width:100%;padding:1rem;font-size:.8rem;overflow:hidden; box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);}
.panelBox input {display: inline-block;width:80%;height: 1.8rem;padding-left:.4rem;font-size:.8rem;outline: none;border:1px solid #ccc;}
.panelBox span {display: block;float:right;width:3rem;height:1.8rem;line-height:1.8rem;font-size:.7rem;text-align:center;color:#fff;border-radius:.4rem;background-color: #36c1f4;cursor: pointer;} 
.panelBox span:hover{ background-color:#0b9ace; }