html,body{background: #fff;}
#warning{ margin: 0 auto;}

#warning>.display{margin: 0 auto;}
#warning>.display>.title{ padding: 50px 0 20px 0; font-size: 4rem;font-weight: bold; text-transform: uppercase; text-align: center;}
#warning>.display>.layout{margin: 0 auto; padding: 80px 0;}
#warning>.display>.layout>.box_left{  position: relative; max-width: 320px; width: 22%; text-align: left;}
#warning>.display>.layout>.box_right{width: 72%;box-sizing: border-box; padding-bottom: 50px;}

#warning>.display .search, #connect>.display .search{margin: 0 auto;}
#warning>.display .search>form, #connect>.display .search>form{ width:100%; height:50px; border: 2px solid #ccc; border-radius: 5px; overflow: hidden;}
#warning>.display .search>form>input[type="text"], #connect>.display .search>form>input[type="text"]{outline: medium;float:left;height:50px;line-height:50px;width:70%; padding-left: 20px; border:none; background: none;  font-size:1.4rem;color:#333;box-sizing:border-box;overflow:hidden;}
#warning>.display .search>form>input::-webkit-input-placeholder, #connect>.display .search>form>input::-webkit-input-placeholder{ color:#999;}
#warning>.display .search>form>button, #connect>.display .search>form>button{ position: relative;float:right;width:48px;height:46px; line-height: 46px; border-radius: 5px; border: 2px solid #fff; background: #42a73f;  color:#fff;cursor:pointer;box-sizing:border-box;overflow:hidden;}
#warning>.display .search>form>button>i， #connect>.display .search>form>button>i{font-size: 1.6rem; }

#warning>.display .categories, #connect>.display .categories{ position: relative; top: 0;}
#warning>.display .categories>.toggler, #connect>.display .categories>.toggler{display: none; background: #42a73f; text-align: center; border-radius: 5px;}
#warning>.display .categories>.toggler>a, #connect>.display .categories>.toggler>a{display: block;color: #fff;font-size: 1.6rem;padding: 15px 0;}
#warning>.display .categories>.toggler>a>i, #connect>.display .categories>.toggler>a>i{ margin-right: 6px;}
#warning>.display .categories>.toggler>a>span, #connect>.display .categories>.toggler>a>span{font-weight: bold;}

#warning>.display .categories .nav>ul, #connect>.display .categories .nav>ul{margin: 0 auto;}
#warning>.display .categories .nav>ul>li, #connect>.display .categories .nav>ul>li{display: block; position: relative;border-bottom: 2px solid #eee; transition: all .35s;}
#warning>.display .categories .nav>ul>li>a, #connect>.display .categories .nav>ul>li>a{display: block; position: relative; padding: 20px 0; text-transform: capitalize; font-size: 1.6rem;color: #333; transition: all .35s;}
#warning>.display .categories .nav>ul>li:hover, #connect>.display .categories .nav>ul>li:hover,#warning>.display .categories .nav>ul>li.active, #connect>.display .categories .nav>ul>li.active{border-color: #42a73f; color: #42a73f;}
#warning>.display .categories .nav>ul>li>a:hover, #connect>.display .categories .nav>ul>li>a:hover, #warning>.display .categories> .nav>ul>li.active>a, #connect>.display .categories .nav>ul>li.active>a{color: #42a73f;}
#warning>.display .categories .nav>ul>li .toggle, #connect>.display .categories .nav>ul>li .toggle{position: absolute;z-index: 90; right:0; top: 0; cursor: pointer; border: 0; background: none; width: 40px;height: 60px; line-height: 60px; transition: all .35s;}
#warning>.display .categories .nav>ul>li .toggle:after, #connect>.display .categories .nav>ul>li .toggle:after{position: absolute;z-index: 1; top: 0; right: 0; width: 100%;text-align: center; font-family: iconfont; font-size: 2.4rem; font-weight: bold; color: #42a73f; content: '\e6b9'; transition: all .35s;}
#warning>.display .categories .nav>ul>li.active .toggle:after, #connect>.display .categories .nav>ul>li.active .toggle:after{content: '\e6ba';}
#warning>.display .categories .nav>ul>li ul, #connect>.display .categories .nav>ul>li ul{display: none; padding-bottom: 20px;}
#warning>.display .categories .nav>ul>li ul>li, #connect>.display .categories .nav>ul>li ul>li{display: block; margin-bottom: 10px; text-align: left;}
#warning>.display .categories .nav>ul>li ul>li>a, #connect>.display .categories .nav>ul>li ul>li>a{ position: relative; display: block; padding: 0 16px; font-size: 1.5rem; line-height: 2.2rem;}
#warning>.display .categories .nav>ul>li ul>li>a:after, #connect>.display .categories .nav>ul>li ul>li>a:after{position: absolute;z-index: 1; left: 4px;top:9px;width: 6px;height: 2px; background: #42a73f; content: '';transition: all .35s;}
#warning>.display .categories .nav>ul>li a.active, #connect>.display .categories .nav>ul>li a.active{color: #42a73f;}
#warning>.display .categories .nav.layui-layer-wrap, #connect>.display .categories .nav.layui-layer-wrap{ padding: 30px;}

#warning>.display .recordcount{text-align: left; padding-bottom: 20px; font-size: 1.6rem; color: #666;}
#warning>.display .recordcount>span{display: inline-block;font-size: 1.8rem; margin: 0 2px; color: #42a73f;font-weight: bold;}
#warning>.display>.product .recordcount>span.keys{color: #ff8800; font-size: 2.4rem; font-weight: normal; text-decoration: underline;}
#warning>.display .lists{ margin: 0 auto;}
#warning>.display .lists>.list-tr{ background: #eee; }
#warning>.display .lists>.list-tr>li{display: block; float: left; text-align: left; box-sizing: border-box; font-size: 1.6rem; color: #333; line-height: 50px;}
#warning>.display .lists>.list-tr>li.img{width: 20%; color: #eee;user-select: none;}
#warning>.display .lists>.list-tr>li.title{width: 30%; padding: 0 20px;}
#warning>.display .lists>.list-tr>li.color{width:20%;}
#warning>.display .lists>.list-tr>li.intro{width:30%;}
#warning>.display .lists>.list-td{ margin: 0 auto;}
#warning>.display .lists>.list-td>li{border: 1px solid #ddd;  zoom: 1; margin: 10px auto;}
#warning>.display .lists>.list-td>li:before, #warning>.display .lists>.list-td>li:after { content: ""; display: table; }
#warning>.display .lists>.list-td>li:after { clear: both; }
#warning>.display .lists>.list-td>li>a{display: block;}
#warning>.display .lists>.list-td>li>a>div{display: block; float: left; text-align: left; box-sizing: border-box;}
#warning>.display .lists>.list-td>li>a>div.img{width: 20%;}
#warning>.display .lists>.list-td>li>a>div.title{width: 30%;padding: 50px 20px;}
#warning>.display .lists>.list-td>li>a>div.title>span{display: block; font-size: 2rem; color: #111;}
#warning>.display .lists>.list-td>li>a>div.title>p{display: block; font-size: 1.4rem; color: #666; padding-bottom: 6px;}
#warning>.display .lists>.list-td>li>a>div.color{width:20%; padding: 50px 0;}
#warning>.display .lists>.list-td>li>a>div.color>img{display: inline-block; margin-right: 5px;}
#warning>.display .lists>.list-td>li>a>div.intro{width:30%;padding: 50px 50px 50px 0;}
#warning>.display .lists>.list-td>li>a>div.intro span{ display: inline-block; margin: 0 6px 6px 0; font-style: normal; padding: 5px; background: #eee; color: #666; border-radius: 5px; font-size: 1.2rem;}
#warning>.display .lists>.list-td>li>a>div.intro span.highlight{background: #ff8800; color: #fff;}
#warning>.display .lists>.list-td>li>a>div.intro span .searHeight{text-decoration: none; color: #fff;}
#warning>.display .lists>.list-td>li>a .searHeight{ font-style: normal; color: #ff8800; text-decoration: underline;}
#warning>.display .loadmore{ text-align: center; margin: 0 auto;}
#warning>.display .loadmore>.url>a{display: inline-flex; width: 100%; align-items: center;justify-content: center; border: 1px solid #ddd; background: #fff; font-size: 1.6rem; font-weight: bold; color: #666;padding: 12px 40px; transition: all .35s;}
#warning>.display .loadmore>.url>a>i{display: inline-block;margin-left: 8px; font-size: 1.4rem; color: #42a73f; transition: all .35s;}
#warning>.display .loadmore>.url>a:hover { background: #f7f7f7; }

#warning>.view{position: relative;  margin: 0 auto; box-sizing: border-box; }
#warning>.view .introduce{display: block;margin: 20px auto 60px auto;}
#warning>.view .introduce .thumbs{position:relative;}
#warning>.view .introduce .thumbs>.swiper{ width:80px; height:600px;}
#warning>.view .introduce .thumbs>.swiper .swiper-slide{ height: 80px!important; border:2px solid #ddd; border-radius: 8px; overflow: hidden; cursor: pointer; box-sizing:border-box;}
#warning>.view .introduce .thumbs>.swiper img{width:auto;height:100%;box-sizing:border-box;}
#warning>.view .introduce .thumbs>.swiper .swiper-slide-thumb-active{border-color: #42a73f;}
#warning>.view .introduce .thumbs>.swiper .play{position: absolute;z-index: 10; left: 0;top: 0;width: 100%;height: 100%; background: url("../image/play_ico.png") no-repeat; background-size: cover;}
#warning>.view .introduce .info{ position: relative; width: calc(100% - 110px);box-sizing: border-box; padding: 50px 0 50px 50px; border-radius: 25px; background: #fff;box-shadow: 1px 7px 9px 0 #e9e9e9; }
#warning>.view .introduce .info>.show{ position:relative; display: inline-block; max-width:600px; width: 50%; cursor: pointer; margin:0 auto;}
#warning>.view .introduce .info>.show .swiper{ width:100%; height:100%; margin: 0 auto;border: 1px solid #eee;overflow: visible!important;}
#warning>.view .introduce .info>.show .swiper-slide{ position: relative; text-align: center; margin: 0 auto;}
#warning>.view .introduce .info>.show .swiper-slide>a{ position: relative;z-index: 100; display: block;}
#warning>.view .introduce .info>.show .swiper-slide>a:after{position: absolute;z-index: 90; top: 0;left: 0; width: 100%;height: 100%; background: url("../image/mask.png") no-repeat; background-position: 50% 50%; content: '';}
#warning>.view .introduce .info>.show .swiper-slide>a>img{max-width: 100% !important; vertical-align: center;}
#warning>.view .introduce .info>.show .swiper-slide .play{ position: absolute;z-index: 50; left: 0;top: 50%; transform: translateY(-50%); width: 100%;}
#warning>.view .introduce .info>.show .swiper-slide .play>iframe{ width: 100%; height: 450px; margin: 0 auto;}
#warning>.view .introduce .info>.show .swiper-pagination{ display:none; text-align:center; position:relative; bottom:0;}
#warning>.view .introduce .info>.show .swiper-pagination .swiper-pagination-bullet {width: 10px;height: 10px;margin:0 3px;}
#warning>.view .introduce .info>.show .swiper-pagination .swiper-pagination-bullet-active{background:#666;}
#warning>.view .introduce .content{width: 50%; text-align: left; box-sizing: border-box; padding:10px  50px;}
#warning>.view .introduce .content>.title{ font-size: 1.6rem; color: #666;}
#warning>.view .introduce .content>.model{font-size: 4rem; font-weight: bold; padding: 20px 0;}
#warning>.view .introduce .content>.text{ font-size: 1.4rem; line-height: 2rem; color: #666;}
#warning>.view .introduce .content>.sparkle{ padding: 20px 0;border-bottom: 1px solid #ddd;}
#warning>.view .introduce .content>.sparkle img{margin-right: 6px;}
#warning>.view .introduce .content>.color{text-align: left; padding: 20px 0; border-bottom: 1px solid #ddd;}
#warning>.view .introduce .content>.intro{text-align: left; padding: 20px 0; border-bottom: 1px solid #ddd;}
#warning>.view .introduce .content>.intro>ul{display: block;}
#warning>.view .introduce .content>.intro>ul>li{display: block; padding:6px 0;font-size: 1.4rem; clear: both;zoom: 1; }
#warning>.view .introduce .content>.intro>ul>li>span{display: inline-block; float: left; width: 90px; height: 20px; color: #888;}
#warning>.view .introduce .content>.intro>ul>li>p{display: flow-root; word-break: break-word; color: #333;}
#warning>.view .introduce .content>.intro>ul>li>p img{margin-right: 5px;}
#warning>.view .introduce .content>.button{ display: flex;justify-content: space-between; justify-items: center; padding-top: 20px;}
#warning>.view .introduce .content>.button>a{display: inline-block; background: #42a73f; border: 1px solid #ddd;box-shadow: 1px 2px 4px 0 rgba(0,0,0,.1);  text-align: center; font-size: 1.4rem; font-weight: bold; color: #fff; width: 48%; height: 40px;line-height: 40px; border-radius: 30px; transition: all .35s;}
#warning>.view .introduce .content>.button>a.consult{ background: #fff; color: #111;}
#warning>.view .details{margin: 0 auto; background: #fff;}
#warning>.view .details>.navbar{ position: relative;z-index: 700; left: 0; background: #313131; width: 100%; height: 70px; margin: 0 auto; transition: all .35s;}
#warning>.view .details>.navbar .back{width: 70px; line-height: 70px;}
#warning>.view .details>.navbar .back>a{color: #fff;display:block; transition: all .35s;}
#warning>.view .details>.navbar .back>a>i{font-size: 3rem; font-weight: bold;}
#warning>.view .details>.navbar .back>a:hover{opacity: .5;}
#warning>.view .details>.navbar .title{ line-height: 70px; text-align: left; font-size: 2.4rem; font-weight: bold; color: #fff;}
#warning>.view .details>.navbar .nav{ width: 50%; height: 70px; line-height: 70px; text-align: right; display: block; }
#warning>.view .details>.navbar .nav>a{display: inline-block; position: relative; color: #fff; font-size: 1.6rem; margin-left: 50px;}
#warning>.view .details>.navbar .nav>a:after{opacity: 0; position: absolute;z-index: 10; left: 0;bottom:10px;width: 100%;height: 3px;background: #fff;content: '';transition: all .35s; }
#warning>.view .details>.navbar .nav>a.active:after{opacity: 1;}
#warning>.view .details>.navbar-fixed{position: fixed; top: 80px;}
#warning>.view .details>.detail{ margin: 0 auto;padding: 50px 0;}
#warning>.view .details>.detail .items{margin: 50px auto; padding: 50px 0; border-bottom: 1px solid #aaa;}
#warning>.view .details>.detail .items:last-child{border-bottom: 0;}
#warning>.view .details>.detail .items .title{text-align: center;font-size: 4rem; font-weight: bold; color: #111;}
#warning>.view .details>.detail .items .content{ padding: 50px 0;}
#warning>.view .details>.detail .items .content>p{display: block; position: relative; font-size: 1.6rem; color: #333; margin-bottom: 15px;}
#warning>.view .details>.detail .items .content .table-container{position: relative;}
#warning>.view .details>.detail .items .content .table-container>.table-wrapper{ position: relative; overflow:hidden; overflow-x:auto;}
#warning>.view .details>.detail .items .content .table-container>.table-wrapper::-webkit-scrollbar {width:1px;height: 5px;}
#warning>.view .details>.detail .items .content .table-container>.table-wrapper::-webkit-scrollbar-thumb {background:#666;}
#warning>.view .details>.detail .items .content .table-container>.table-wrapper::-webkit-scrollbar-track {border-radius: 0;background: #ededed;}
#warning>.view .details>.detail .items .content .table-container:after{ display: none; position: absolute;z-index: 10; left: 0; bottom: -30px; font-size: 1.1rem; color: #ccc; content: '拖动表格进行浏览';}
#warning>.view .details>.detail .items .content table{border-collapse: separate;  empty-cells: hide; box-sizing: border-box; width: 100%!important; min-width: 1200px; background: #fff; overflow: hidden; border-top-left-radius: 16px; border-left: 1px solid #ddd;}
#warning>.view .details>.detail .items .content table td{ text-align: center;  border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; color: #666; font-size: 1.4rem;padding:20px 10px;}
#warning>.view .details>.detail .items .content table .firstRow{background: #111;}
#warning>.view .details>.detail .items .content table .firstRow>td{ border-color: #111; color: #fff;font-weight: bold; font-size: 1.6rem;}
#warning>.view .details>.detail .items .content table thead{ background: #111;}
#warning>.view .details>.detail .items .content table thead tr td{ border-color: #111; color: #fff;font-weight: bold; font-size: 1.6rem;}
#warning>.view .details>.detail .items .content table thead tr td:first-child{border-top-left-radius: 16px;}
#warning>.view .details>.detail .items .content table thead tr td:last-child{border-top-right-radius: 16px;}

#warning>.view .details>.detail .items .content img{max-width: 100%;height: auto;}
#warning>.view .details>.detail .items .content .pdfs{text-align: left;}
#warning>.view .details>.detail .items .content .pdfs>li{display: block;float: left;width: 31.33%; margin-right: 3%; margin-bottom: 3%;}
#warning>.view .details>.detail .items .content .pdfs>li:nth-child(3n){margin-right: 0;}
#warning>.view .details>.detail .items .content .pdfs>li>a{ position: relative; display: flex; justify-content: flex-start; align-items: center; border: 1px solid #ddd; border-radius: 8px; padding: 10px 20px; background: #fff; transition: all .35s;}
#warning>.view .details>.detail .items .content .pdfs>li>a:after{opacity: 0; position: absolute;z-index: 1; right: 15px;top: 50%; transform: translateY(-50%); width: 36px;height: 36px; line-height: 36px; text-align: center; font-size: 2.4rem; color: #333; background: #eee; border-radius: 100%; font-family: iconfont; content: '\ebb4';transition: all .35s;}
#warning>.view .details>.detail .items .content .pdfs>li>a .ico{display: inline-block; }
#warning>.view .details>.detail .items .content .pdfs>li>a .ico>i{color: #42a73f; font-size: 3rem;}
#warning>.view .details>.detail .items .content .pdfs>li>a .tit{ display: inline-block; flex-grow: 1; font-size: 1.4rem; font-weight: bold; color: #333; padding: 10px; transition: all .35s;}
#warning>.view .details>.detail .items .content .pdfs>li>a:hover .tit{text-decoration: underline;}
#warning>.view .details>.detail .items .content .pdfs>li>a:hover:after{opacity: 1;}

#warning>.view .details>.detail .items .content .bracket{text-align: left; margin: 0 auto;}
#warning>.view .details>.detail .items .content .bracket>li{display: block;float: left;width: 17.6%; margin-right: 3%; margin-bottom: 3%;}
#warning>.view .details>.detail .items .content .bracket>li:nth-child(5n){margin-right: 0;}
#warning>.view .details>.detail .items .content .bracket>li>a{ position: relative; display: block; text-align: center; border-radius: 10px; padding: 0 20px; background: #fff; box-shadow: 0 5px 8px rgba(0,0,0,.1); transition: all .35s;}
#warning>.view .details>.detail .items .content .bracket>li>a .img{display: block; }
#warning>.view .details>.detail .items .content .bracket>li>a .img>img{ width: 100%;height: auto;}
#warning>.view .details>.detail .items .content .bracket>li>a .tit{ display: block; font-size: 1.4rem; font-weight: bold; color: #333; padding-bottom: 20px; transition: all .35s;}


#warning>.view .quickmenu, #connect>.view .quickmenu{position: fixed;z-index: 999; right: 50px;bottom: 6%;}
#warning>.view .quickmenu>a, #connect>.view .quickmenu>a{display: block; width: 60px;height: 60px; line-height: 60px; box-shadow: 0 2px 6px rgba(0,0,0,.12);margin-bottom: 6px; background: rgba(255,255,255,.8); text-align: center; transition: all .35s}
#warning>.view .quickmenu>a i, #connect>.view .quickmenu>a i{font-size: 2.4rem;}
#warning>.view .quickmenu>a:hover, #connect>.view .quickmenu>a:hover{background: rgba(0,0,0,.4); color: #fff;}
#warning>.view .quickmenu>a.gotop, #connect>.view .quickmenu>a.gotop{ display: none; background: rgba(215,13,25,.8); color: #fff;}






#connect{ margin: 0 auto;}
#connect>.display{margin: 0 auto;}
#connect>.display>.title{ padding: 50px 0 20px 0 ; font-size: 4rem;font-weight: bold; text-align: center;}
#connect>.display>.catalog{ margin: 0 auto;}
#connect>.display>.catalog .lists{margin: 0 auto; padding: 80px 0;}
#connect>.display>.catalog .lists ul>li{display: block; float: left;width: 30%; margin-bottom: 3%; margin-right: 5%;}
#connect>.display>.catalog .lists ul>li:nth-child(3n){ margin-right: 0;}
#connect>.display>.catalog .lists ul>li>a{display: block;}
#connect>.display>.catalog .lists ul>li>a>.img{border-radius: 16px;overflow: hidden; transition: all .35s;}
#connect>.display>.catalog .lists ul>li>a>.img>img{width: 100%;height: auto; transition: all .8s;}
#connect>.display>.catalog .lists ul>li>a>.box{padding: 20px; text-align: center;}
#connect>.display>.catalog .lists ul>li>a>.box>.tit{ position: relative; display: block; font-size: 2rem; padding-bottom: 15px; font-weight: bold; color: #333;transition: all .35s;}
#connect>.display>.catalog .lists ul>li>a>.box>.tit:after{position: absolute;z-index: 2; left: 50%;bottom: 0;width: 40px;height: 2px; background: #ddd; transform: translateX(-50%); content: '';transition: all .35s;}
#connect>.display>.catalog .lists ul>li>a:hover .img{box-shadow: 0 8px 16px rgba(0,0,0,.2);}
#connect>.display>.catalog .lists ul>li>a:hover .img>img{transform: scale(1.1);}
#connect>.display>.catalog .lists ul>li>a:hover .box>.tit:after{ width: 70px; background: #42a73f;}
#connect>.display>.catalog .lists ul>li>a:hover .box>.tit{color: #42a73f; }

#connect>.display>.product{margin: 0 auto; padding: 80px 0;}
#connect>.display>.product>.box_left{  position: relative; max-width: 320px; width: 22%; text-align: left;}
#connect>.display>.product>.box_right{width: 72%;box-sizing: border-box;}
#connect>.display>.product .recordcount{text-align: left; padding-bottom: 20px; font-size: 1.6rem; color: #666;}
#connect>.display>.product .recordcount>span{display: inline-block;font-size: 1.8rem; margin: 0 2px; color: #42a73f;font-weight: bold;}
#connect>.display>.product .recordcount>span.keys{color: #ff8800; font-size: 2.4rem; font-weight: normal; text-decoration: underline;}
#connect>.display>.product .lists{margin: 0 auto;}
#connect>.display>.product .lists ul>li{display: block; float: left;width: 22.75%; margin-bottom: 3%; margin-right: 3%;}
#connect>.display>.product .lists ul>li:nth-child(4n){ margin-right: 0;}
#connect>.display>.product .lists ul>li>a{display: block;}
#connect>.display>.product .lists ul>li>a>.img{border-radius: 16px;overflow: hidden; border: 1px solid #ddd; box-sizing: border-box; transition: all .35s;}
#connect>.display>.product .lists ul>li>a>.img>img{width: 100%;height: auto; transition: all .8s;}
#connect>.display>.product .lists ul>li>a>.tit{ position: relative; display: block; padding-top: 20px; font-size: 1.6rem; text-align: center; color: #333; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition: all .35s;}
#connect>.display>.product .lists ul>li>a .searHeight{ font-style: normal; color: #ff8800; text-decoration: underline;}
#connect>.display>.product .lists ul>li>a:hover .img{}
#connect>.display>.product .lists ul>li>a:hover .img>img{transform: scale(1.2);}
#connect>.display>.product .lists ul>li>a:hover .tit{color: #42a73f; }
#connect>.display>.product .loadmore{ text-align: center; margin: 0 auto; padding-top: 30px; border-top: 1px solid #ddd;}
#connect>.display>.product .loadmore>.url>a{display: inline-flex; align-items: center;justify-content: center; border: 1px solid #42a73f; background: #42a73f; border-radius: 8px; font-size: 1.6rem; font-weight: bold; color: #fff;padding: 12px 40px; transition: all .35s;}
#connect>.display>.product .loadmore>.url>a>i{display: inline-block;margin-left: 8px; font-size: 1.4rem; transition: all .35s;}
#connect>.display>.product .loadmore>.url>a:hover { background: #fff;color: #42a73f; }
#connect>.display>.product .loadmore>.url>a:hover i{color: #999;}


#connect>.view{position: relative;  margin: 0 auto; box-sizing: border-box; }





#connect>.view .introduce{display: block;margin: 20px auto 60px auto;}
#connect>.view .introduce .thumbs{position:relative;}
#connect>.view .introduce .thumbs>.swiper{ width:80px; height:600px;}
#connect>.view .introduce .thumbs>.swiper .swiper-slide{ height: 80px!important; border:2px solid #ddd; border-radius: 8px; overflow: hidden; cursor: pointer; box-sizing:border-box;}
#connect>.view .introduce .thumbs>.swiper img{width:auto;height:100%;box-sizing:border-box;}
#connect>.view .introduce .thumbs>.swiper .swiper-slide-thumb-active{border-color: #42a73f;}
#connect>.view .introduce .thumbs>.swiper .play{position: absolute;z-index: 10; left: 0;top: 0;width: 100%;height: 100%; background: url("../image/play_ico.png") no-repeat; background-size: cover;}
#connect>.view .introduce .info{ position: relative; width: calc(100% - 110px);box-sizing: border-box; padding: 50px 0 50px 50px; border-radius: 25px; background: #fff;box-shadow: 1px 7px 9px 0 #e9e9e9; }
#connect>.view .introduce .info>.show{ position:relative; display: inline-block; max-width:600px; width: 50%; cursor: pointer; margin:0 auto;}
#connect>.view .introduce .info>.show .swiper{ width:100%; height:100%; margin: 0 auto;border: 1px solid #eee;overflow: visible!important;}
#connect>.view .introduce .info>.show .swiper-slide{ position: relative; text-align: center; margin: 0 auto;}
#connect>.view .introduce .info>.show .swiper-slide>a{ position: relative;z-index: 100; display: block;}
#connect>.view .introduce .info>.show .swiper-slide>a:after{position: absolute;z-index: 90; top: 0;left: 0; width: 100%;height: 100%; background: url("../image/mask.png") no-repeat; background-position: 50% 50%; content: '';}
#connect>.view .introduce .info>.show .swiper-slide>a>img{max-width: 100% !important; vertical-align: center;}
#connect>.view .introduce .info>.show .swiper-slide .play{ position: absolute;z-index: 50; left: 0;top: 50%; transform: translateY(-50%); width: 100%;}
#connect>.view .introduce .info>.show .swiper-slide .play>iframe{ width: 100%; height: 450px; margin: 0 auto;}
#connect>.view .introduce .info>.show .swiper-pagination{ display:none; text-align:center; position:relative; bottom:0;}
#connect>.view .introduce .info>.show .swiper-pagination .swiper-pagination-bullet {width: 10px;height: 10px;margin:0 3px;}
#connect>.view .introduce .info>.show .swiper-pagination .swiper-pagination-bullet-active{background:#666;}
#connect>.view .introduce .content{width: 50%; text-align: left; box-sizing: border-box; padding:10px  50px;}
#connect>.view .introduce .content>.title{ font-size: 1.6rem; color: #666;}
#connect>.view .introduce .content>.model{font-size: 4rem; font-weight: bold; padding: 20px 0;}
#connect>.view .introduce .content>.text{ font-size: 1.4rem; line-height: 2rem; color: #666;}
#connect>.view .introduce .content>.sparkle{ padding: 20px 0;border-bottom: 1px solid #ddd;}
#connect>.view .introduce .content>.sparkle img{margin-right: 6px;}
#connect>.view .introduce .content>.color{text-align: left; padding: 20px 0; border-bottom: 1px solid #ddd;}
#connect>.view .introduce .content>.intro{text-align: left; padding: 20px 0; line-height: 3.8rem; color: #888; border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;}
#connect>.view .introduce .content>.intro>ul{display: block;}
#connect>.view .introduce .content>.intro>ul>li{display: block; padding:6px 0;font-size: 1.4rem; clear: both;zoom: 1; }
#connect>.view .introduce .content>.intro>ul>li>span{display: inline-block; float: left; width: 90px; height: 20px; color: #888;}
#connect>.view .introduce .content>.intro>ul>li>p{display: flow-root; word-break: break-word; color: #333;}
#connect>.view .introduce .content>.intro>ul>li>p img{margin-right: 5px;}
#connect>.view .introduce .content>.button{ display: flex;justify-content: space-between; justify-items: center; padding-top: 20px;}
#connect>.view .introduce .content>.button>a{display: inline-block; background: #111; border: 1px solid #ddd;box-shadow: 1px 2px 4px 0 rgba(0,0,0,.1);  text-align: center; font-size: 1.4rem; font-weight: bold; color: #fff; width: 48%; height: 40px;line-height: 40px; border-radius: 30px; transition: all .35s;}
#connect>.view .introduce .content>.button>a.consult{ background: #fff; color: #111;}


#connect>.view .details{  box-sizing: border-box; background: #fff; margin: 0 auto;}
#connect>.view .details>.navbar{ position: relative;z-index: 500; left: 0; background: #313131; width: 100%; height: 70px; margin: 0 auto; transition: all .35s;}
#connect>.view .details>.navbar .back{width: 70px; line-height: 70px;}
#connect>.view .details>.navbar .back>a{color: #fff;display:block; transition: all .35s;}
#connect>.view .details>.navbar .back>a>i{font-size: 3rem; font-weight: bold;}
#connect>.view .details>.navbar .title{ position: relative; line-height:70px; text-align: left; font-size: 2.4rem;color: #fff;}
#connect>.view .details>.detail{ margin: 0 auto;padding: 120px 0 80px 0;}
#connect>.view .details>.detail>.item{ margin: 0 auto;}
#connect>.view .details>.detail>.item>.content{ padding: 10px 0; font-size: 1.6rem; line-height: 2.4rem; color: #666;}
#connect>.view .details>.detail>.item>.content>p{margin-bottom: 10px;}
#connect>.view .details>.detail>.item>.content .table-container{position: relative;width: 80%; }
#connect>.view .details>.detail>.item>.content .table-container>.table-wrapper{ position: relative;}
#connect>.view .details>.detail>.item>.content .table-container>.table-wrapper::-webkit-scrollbar {width:1px;height: 5px;}
#connect>.view .details>.detail>.item>.content .table-container>.table-wrapper::-webkit-scrollbar-thumb {background:#666;}
#connect>.view .details>.detail>.item>.content .table-container>.table-wrapper::-webkit-scrollbar-track {border-radius: 0;background: #ededed;}
#connect>.view .details>.detail>.item>.content .table-container:after{ display: none; position: absolute;z-index: 10; left: 0; bottom: -30px; font-size: 1.1rem; color: #ccc; content: '拖动表格进行浏览';}
#connect>.view .details>.detail>.item>.content table{  box-sizing: border-box; width: 100%!important; border: 1px solid #ddd;}
#connect>.view .details>.detail>.item>.content table tr{ background: #fff; transition: all .35s;}
#connect>.view .details>.detail>.item>.content table td{border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; text-align: center; color: #666; font-size: 1.6rem;padding:5px;text-overflow: ellipsis; white-space: nowrap;}
#connect>.view .details>.detail>.item>.content table tr:hover{background: #fff8f8;}
#connect>.view .details>.detail>.item>.content table>thead{width: 100%; box-sizing: border-box;}
#connect>.view .details>.detail>.item>.content table>thead>tr{background: #eee!important;}
#connect>.view .details>.detail>.item>.content table>thead>tr>td{ font-weight: bold; font-size: 1.4rem;}
#connect>.view .details>.detail>.item>.content .table-fixed-header{ display: none; position: fixed;z-index: 100; top: 82px; }

#connect>.view .details>.detail>.item>.content img{max-width: 100%;height: auto;}
#connect>.view .details>.detail>.item>.content .pdfs{text-align: left;}
#connect>.view .details>.detail>.item>.content .pdfs>li{display: block;float: left;width: 31.33%; margin-right: 3%; margin-bottom: 3%;}
#connect>.view .details>.detail>.item>.content .pdfs>li:nth-child(3n){margin-right: 0;}
#connect>.view .details>.detail>.item>.content .pdfs>li>a{ position: relative; display: flex; justify-content: flex-start; align-items: center; border: 1px solid #ddd; border-radius: 8px; padding: 10px 20px; background: #fff; transition: all .35s;}
#connect>.view .details>.detail>.item>.content .pdfs>li>a:after{opacity: 0; position: absolute;z-index: 1; right: 15px;top: 50%; transform: translateY(-50%); width: 36px;height: 36px; line-height: 36px; text-align: center; font-size: 2.4rem; color: #333; background: #eee; border-radius: 100%; font-family: iconfont; content: '\ebb4';transition: all .35s;}
#connect>.view .details>.detail>.item>.content .pdfs>li>a .ico{display: inline-block; }
#connect>.view .details>.detail>.item>.content .pdfs>li>a .ico>i{color: #42a73f; font-size: 3rem;}
#connect>.view .details>.detail>.item>.content .pdfs>li>a .tit{ display: inline-block; flex-grow: 1; font-size: 1.4rem; font-weight: bold; color: #333; padding: 10px; transition: all .35s;}
#connect>.view .details>.detail>.item>.content .pdfs>li>a:hover .tit{text-decoration: underline;}
#connect>.view .details>.detail>.item>.content .pdfs>li>a:hover:after{opacity: 1;}

#connect>.view .details>.dimensions{  position: fixed;z-index: 600; right: 20px; top: 25%;}
#connect>.view .details>.dimensions>.click{ display: none; position: absolute;z-index: 10; right: 30px; width: 60px; height: 60px; text-align: center; padding-top: 14px; line-height: 1.6rem; overflow: hidden; cursor: pointer; font-size: 1.4rem; color: #fff; font-weight: bold; background: linear-gradient(45deg, #ff3b47, #42a73f); border-radius: 100%; box-shadow: 0 2px 6px rgba(0,0,0,.1); transition: all .35s;}
#connect>.view .details>.dimensions>.click>span{position: relative;z-index: 10;}
#connect>.view .details>.dimensions>.click:after{ position: absolute;z-index: 2; left: 50%; top: 50%; width: 0;height: 0;opacity: 0; border-radius: 100%; content: ''; transform: translate(-50%,-50%); background: rgba(255,255,255,.2); transition: all .35s;}
#connect>.view .details>.dimensions>.click:hover:after{ width: 80px; height: 80px;opacity: 1; }
#connect>.view .details>.dimensions>.content{ display: none; position: relative;}
#connect>.view .details>.dimensions>.content>.close{ position: absolute;z-index: 10; left: 15px;top: 15px; text-align: left; }
#connect>.view .details>.dimensions>.content>.close>span{display: inline-block; cursor: pointer; background: #999; color: #fff;font-size: 1.4rem; border-radius: 2px; padding: 5px 10px; transition: all .35s;}
#connect>.view .details>.dimensions>.content>.close>span:hover{background: #42a73f;}
#connect>.view .details>.dimensions>.content>.box{border: 1px solid #eee; width: 400px; box-shadow: 0 2px 6px rgba(0,0,0,.1); }
#connect>.view .details>.dimensions>.content>.box>img{width: 100%;height: auto;}

#connect>.view .details>.button{ display: flex;justify-content: flex-end; justify-items: center; padding: 50px 0 100px 0; border-top: 1px solid #ddd;}
#connect>.view .details>.button>a{display: inline-block; background: #111; border: 1px solid #ddd;box-shadow: 1px 2px 4px 0 rgba(0,0,0,.1); margin-left: 30px;  text-align: center; font-size: 1.6rem; font-weight: bold; color: #fff; padding: 0 50px;  height: 50px;line-height: 50px; border-radius: 30px; transition: all .35s;}
#connect>.view .details>.button>a.consult{ background: #fff; color: #111;}








@media only screen and (max-width: 1460px){


    #connect>.display>.product .lists ul>li{width: 31.33%;}
    #connect>.display>.product .lists ul>li:nth-child(4n){ margin-right: 3%;}
    #connect>.display>.product .lists ul>li:nth-child(3n){ margin-right: 0;}

    #warning>.view .details>.navbar .title {font-size: 2.2rem; }
    #warning>.view .details>.navbar .back { width: 40px; }
    #warning>.view .details>.navbar .nav>a{ font-size: 1.5rem; margin-left: 30px;}
    #warning>.view .details>.detail .items .content .bracket>li{width: 22.75%;}
    #warning>.view .details>.detail .items .content .bracket>li:nth-child(5n){margin-right: 3%;}
    #warning>.view .details>.detail .items .content .bracket>li:nth-child(4n){margin-right: 0;}

    #connect>.view .details>.detail>.item>.content .table-container{width: 70%; }
    #connect>.view .details>.detail>.item>.content table td{font-size: 1.5rem;}


    #connect>.view .details>.dimensions>.content>.box{width: 320px;}



}




@media only screen and (max-width: 1280px){

    #warning>.display>.title{font-size: 3.2rem;}
    #warning>.display>.layout>.box_left{  width: 26%;}
    #warning>.display>.layout>.box_right{width: 68%;}


    #connect>.display>.title{font-size: 3.2rem;}
    #connect>.display>.product>.box_left{ width: 26%;}
    #connect>.display>.product>.box_right{width: 68%;}

    #connect>.view .details>.dimensions{ top: 40%;}
    #connect>.view .details>.dimensions>.content>.box{width: 240px;}

}

@media only screen and (max-width: 1200px){

    #connect>.view .details>.detail>.item>.content .table-container{width: 100%; }
    #connect>.view .details>.detail>.item>.content table td{font-size: 1.2rem; padding: 2px;}


    #connect>.view .details>.dimensions>.content>.close>span { font-size: 1.2rem; }


}


@media only screen and (max-width: 1080px){

    #warning>.display .lists>.list-td>li>a>div.title{padding: 30px 20px;}
    #warning>.display .lists>.list-td>li>a>div.color{padding: 30px 0;}
    #warning>.display .lists>.list-td>li>a>div.color>img{width: 16px;}
    #warning>.display .lists>.list-td>li>a>div.intro{padding: 30px 20px 30px 0;}

    #warning>.view .introduce .content>.intro>ul>li{font-size: 1.2rem; }
    #warning>.view .introduce .content>.intro>ul>li>p img { width: 16px; }
    #warning>.view .details>.detail .items .content .bracket>li{width: 31.33%;}
    #warning>.view .details>.detail .items .content .bracket>li:nth-child(5n){margin-right: 3%;}
    #warning>.view .details>.detail .items .content .bracket>li:nth-child(4n){margin-right: 3%;}
    #warning>.view .details>.detail .items .content .bracket>li:nth-child(3n){margin-right: 0;}


    #connect>.display>.product .lists ul>li{width: 48.5%; margin-right: 0}
    #connect>.display>.product .lists ul>li:nth-child(4n){ margin-right: 0;}
    #connect>.display>.product .lists ul>li:nth-child(even){ float: right;}


}

@media only screen and (max-width: 960px){

    #warning>.display>.layout>.box_left{   max-width: initial; width: 100%; float: none;}
    #warning>.display>.layout>.box_left .search{ width: 68%;float: left;}
    #warning>.display>.layout>.box_left .categories{padding: 0;width: 30%; float: right;}
    #warning>.display>.layout>.box_left .categories>.nav{display: none;}
    #warning>.display>.layout>.box_left .categories>.toggler{display: block;}
    #warning>.display>.layout>.box_right{width: 100%;float: none;}
    #warning>.display .recordcount{padding-top: 20px;}

    #warning>.view .introduce{margin: 20px auto; width: 100%; max-width: none;}
    #warning>.view .introduce .thumbs{display: none; }
    #warning>.view .introduce .info{ width: 100%;padding: 50px 0; border-radius: 0;}
    #warning>.view .introduce .info>.show{ max-width:none; width: 100%; float: none; }
    #warning>.view .introduce .info>.show .swiper{border: 0;}
    #warning>.view .introduce .info>.show .swiper-pagination{ display:block;}
    #warning>.view .introduce .content{width: 100%; float: none;}
    #warning>.view .details>.navbar{ height: auto; }
    #warning>.view .details>.navbar .back{width:30px; line-height: 50px;}
    #warning>.view .details>.navbar .back>a>i{font-size: 2rem;}
    #warning>.view .details>.navbar .title{ float: none;width: 100%; line-height: 50px; font-size: 2rem;}
    #warning>.view .details>.navbar .nav{ float: none; width: 100%; height: auto; line-height: normal; text-align: center; padding:10px 0; border-top: 1px solid rgba(255,255,255,.2);}
    #warning>.view .details>.navbar .nav>a{font-size: 1.4rem; margin:0 10px; padding: 20px 0;}
    #warning>.view .details>.detail .items { margin: 30px auto; padding: 30px 0;}
    #warning>.view .details>.detail .items .title { font-size: 3rem; }
    #warning>.view .details>.detail .items .content table td{font-size: 1.2rem;padding:10px;}
    #warning>.view .details>.detail .items .content table .firstRow>td{font-size: 1.4rem;}
    #warning>.view .details>.detail .items .content table thead tr td{font-size: 1.4rem;}







    #connect>.display>.catalog .lists ul>li{width: 48%; margin-bottom: 0; margin-right:0;}
    #connect>.display>.catalog .lists ul>li:nth-child(even){ float: right;}

    #connect>.display>.product>.box_left{   max-width: initial; width: 100%; float: none;}
    #connect>.display>.product>.box_left .search{ width: 68%;float: left;}
    #connect>.display>.product>.box_left .categories{padding: 0;width: 30%; float: right;}
    #connect>.display>.product>.box_left .categories>.nav{display: none;}
    #connect>.display>.product>.box_left .categories>.toggler{display: block;}
    #connect>.display>.product>.box_right{width: 100%;float: none;}
    #connect>.display>.product .recordcount{padding-top: 20px;}
    #connect>.display>.product .lists ul>li{width: 31.33%; margin-right: 3%;}
    #connect>.display>.product .lists ul>li:nth-child(4n){ margin-right: 3%;}
    #connect>.display>.product .lists ul>li:nth-child(3n){ margin-right: 0;}
    #connect>.display>.product .lists ul>li:nth-child(even){float: left;}

    #connect>.view .introduce{margin: 20px auto; width: 100%; max-width: none;}
    #connect>.view .introduce .thumbs{display: none; }
    #connect>.view .introduce .info{ width: 100%;padding: 50px 0; border-radius: 0;}
    #connect>.view .introduce .info>.show{ max-width:none; width: 100%; float: none; }
    #connect>.view .introduce .info>.show .swiper{border: 0;}
    #connect>.view .introduce .info>.show .swiper-pagination{ display:block;}
    #connect>.view .introduce .content{width: 100%; float: none;}


    #connect>.view .details>.detail>.item>.content .table-fixed-header table{display: none; }
    #connect>.view .details>.detail>.item>.content .table-container>.table-wrapper{  overflow:hidden; overflow-x:auto;}


    #connect>.view .details>.button{padding: 30px 0 60px 0; border-top: 0}

    #connect>.view .details>.dimensions{  position: fixed;z-index: 600; right: 20px; top: 25%;}
    #connect>.view .details>.dimensions>.content{ display: none; position: relative;}
    #connect>.view .details>.dimensions>.content>.close>span{font-size: 1.2rem;padding: 3px 8px;}
    #connect>.view .details>.dimensions>.content>.box{width: 260px; }










    .quickmenu{display: none;}

}


@media only screen and (max-width: 860px){

    #warning>.view .details>.detail .items .title {font-size: 2.8rem; }

    #warning>.view .details>.detail .items .content .bracket>li{width: 48.5%; margin-right: 0;}
    #warning>.view .details>.detail .items .content .bracket>li:nth-child(5n){margin-right: 0;}
    #warning>.view .details>.detail .items .content .bracket>li:nth-child(4n){margin-right: 0;}
    #warning>.view .details>.detail .items .content .bracket>li:nth-child(even){float: right;}


    #connect>.display>.catalog .lists ul>li>a>.box>.tit { font-size: 1.8rem; }
    #connect>.display>.product .lists ul>li{width: 48.5%; margin-right: 0}
    #connect>.display>.product .lists ul>li:nth-child(4n){ margin-right: 0;}
    #connect>.display>.product .lists ul>li:nth-child(even){ float: right;}
    #connect>.view .details>.detail { padding: 50px 0;}


    #connect>.view .details>.navbar{ height: 50px;}
    #connect>.view .details>.navbar .back{width: 50px; line-height: 50px;}
    #connect>.view .details>.navbar .back>a>i{font-size: 2rem;}
    #connect>.view .details>.navbar .title{ line-height:50px; font-size: 1.8rem;}


}




@media only screen and (max-width: 640px){

    #warning>.display>.title{font-size:2.8rem;}
    #warning>.display>.layout{padding: 50px 0;}
    #warning>.display .lists>.list-tr>li.img{width: 10%;}
    #warning>.display .lists>.list-tr>li.title{width: 40%;}
    #warning>.display .lists>.list-td>li>a>div.img{width: 50%;}
    #warning>.display .lists>.list-td>li>a>div.img>img{ max-width: 200px;display: inline-block; margin:  0 auto;}
    #warning>.display .lists>.list-td>li>a>div.title{ float: right; width: 50%;padding: 30px 0 0 0;}
    #warning>.display .lists>.list-td>li>a>div.color{float: right; width: 50%; padding: 10px 0;}
    #warning>.display .lists>.list-td>li>a>div.intro{float: right; width: 50%;padding: 10px 20px 10px 0;}

    #warning>.view .details>.detail .items .title {font-size: 2.4rem; }
    #warning>.view .details>.detail .items .content>p{font-size: 1.4rem;}




    #connect>.display>.catalog .lists { padding: 30px 0; }
    #connect>.display>.product { padding: 30px 0; }
    #connect>.display>.product .lists ul>li>a>.tit {  padding:10px 0; font-size: 1.4rem; }

    #connect>.view .title{ font-size: 2rem;}

    #connect>.view .details>.navbar .back { width: 40px; }

    #connect>.view .details>.detail {padding: 20px 0 0 0;}

    #connect>.view .details>.detail>.item>.content {font-size: 1.4rem;  line-height: 2rem;}
    #connect>.view .details>.detail>.item>.content .table-container{width: 100%; }
    #connect>.view .details>.detail>.item>.content table td{font-size: 1.2rem;}


    #connect>.view .details>.dimensions{  position: fixed;z-index: 600; right: 0; bottom: 0; top: auto; width: 100%;}
    #connect>.view .details>.dimensions>.click{ bottom:40px; right: 30px; width: 40px; height: 40px; padding-top: 6px; line-height: 1.4rem; font-size: 1.2rem; }
    #connect>.view .details>.dimensions>.content>.box{width: 100%; background: #fff; text-align: center; }
    #connect>.view .details>.dimensions>.content>.box img{width: 200px; height: auto;}

    #connect>.view .details>.button{display: block;}
    #connect>.view .details>.button>a{ display: block; margin-left: 0; margin-bottom: 20px; font-size: 1.4rem; font-weight: bold; color: #fff; padding: 0 10px;  height: 40px;line-height: 40px; border-radius: 40px; transition: all .35s;}











}

@media only screen and (max-width: 520px){

    #warning>.display>.title{font-size: 2.4rem;}
    #warning>.display>.layout{padding: 30px 0;}
    #warning>.display .categories>.toggler>a, #connect>.display .categories>.toggler>a{font-size: 1.4rem;padding: 15px 0;}
    #warning>.display .categories>.toggler>a>i, #connect>.display .categories>.toggler>a>i{ font-size: 1.4rem;}
    #warning>.display .recordcount{ font-size: 1.4rem;}
    #warning>.display .lists>.list-tr{display: none;}
    #warning>.display .lists>.list-td>li>a>div.img{width: 100%; float: none; text-align: center;}
    #warning>.display .lists>.list-td>li>a>div.title{ float: none; width: 100%;padding: 0; text-align: center}
    #warning>.display .lists>.list-td>li>a>div.color{float: none; width: 100%; padding: 10px 0; text-align: center;}
    #warning>.display .lists>.list-td>li>a>div.intro{float: none; width: 100%;padding: 0 20px 20px 20px; text-align: center;}



    #warning>.view .details>.navbar-fixed {top: 60px;}







}