@charset "utf-8"; /* CSS Document */ #catalog{margin: 0 auto; padding: 150px 0;} #catalog .layout>.lists{margin: 0 auto;} #catalog .layout>.lists>ul{margin: 0 auto;} #catalog .layout>.lists>ul>li{ display: block; background: #f9f9f9; padding: 20px; margin-bottom:30px; transition: all .35s;} #catalog .layout>.lists>ul>li>a{display: block;} #catalog .layout>.lists>ul>li>a:before, #catalog .layout>.lists>ul>li>a:after { content: ""; display: table; } #catalog .layout>.lists>ul>li>a:after { clear: both; } #catalog .layout>.lists>ul>li .photo{ float: left; width: 50%;overflow: hidden;} #catalog .layout>.lists>ul>li .photo>.img{ position: relative; border-radius: 50%; padding: 10%;overflow: hidden; box-sizing: border-box;} #catalog .layout>.lists>ul>li .photo>.img>span{ position: relative; display: block; height: 360px; background-position: 50% 50%;} #catalog .layout>.lists>ul>li .photo>.img>span img{display: none;} #catalog .layout>.lists>ul>li .photo>.img>span:after{position: absolute;z-index: 10; background: rgba(0,0,0,.1); width: 100%;height: 100%;content: ''; transition: all .35s;} #catalog .layout>.lists>ul>li .photo>.img>span:before{position: absolute;z-index: 30; top: 50%; left: 50%; width: 100px;height: 100px; line-height: 100px;transform: translate(-50%,-40%); font-family: iconfont; font-size: 6rem; color: #fff; text-align: center; content: '\e66c'; opacity: 0; transition: all .35s;} #catalog .layout>.lists>ul>li .box{width: 50%; float: right; box-sizing: border-box; padding:6%; text-align: left;} #catalog .layout>.lists>ul>li .box>.tit{font-size: 3.6rem; color: #333;transition: all .35s;} #catalog .layout>.lists>ul>li .box>.tit>img{height: 40px; width: auto; margin-right: 10px;} #catalog .layout>.lists>ul>li .box>.txt{ padding: 20px 0; width: 86%; font-size: 1.6rem; color: #999; line-height: 2.4rem;} #catalog .layout>.lists>ul>li .box>.more{ padding-top: 20px;} #catalog .layout>.lists>ul>li .box>.more>span{display: inline-block; padding: 12px 25px; border: 1px solid #c7000c; background: #c7000c; border-radius: 10px 0 10px 0; font-size: 1.5rem; color: #fff;transition: all .35s;} #catalog .layout>.lists>ul>li .box>.more>span>em{font-style: normal; margin-right: 6px;} #catalog .layout>.lists>ul>li:nth-child(even) .photo{float: right;} #catalog .layout>.lists>ul>li:nth-child(even) .box{ float: left;} #catalog .layout>.lists>ul>li>a:hover .photo>.img>span:after{background: rgba(0,0,0,.5);} #catalog .layout>.lists>ul>li>a:hover .photo>.img>span:before{opacity: 1;transform: translate(-50%,-50%) rotate(180deg); } #catalog .layout>.lists>ul>li:hover{background: #fff;box-shadow: 0 0 16px rgba(0,0,0,.1);} #catalog .layout>.lists>ul>li:hover .box>.more>span{ background: none; color: #c7000c} #products{margin: 0 auto; padding: 150px 0;} #products.highlight{ background: #eef2f5;} #products .layout{margin: 0 auto;} #products .layout>.layout-box-left{ width: 22%; padding-right: 50px; box-sizing: border-box; text-align: left; border-right: 1px solid #ddd;} #products .layout>.layout-box-right{position: relative;z-index: 0; width: 70%;box-sizing: border-box; padding: 30px 0;} #products .layout .categories{ position: relative; top: 0;padding: 30px 0; } #products .layout .categories .toggler{display: none; width: 80px; height: 70px; background: #d70d19; box-shadow: -5px 5px 16px rgba(0,0,0,.2); text-align: center; border-radius:50px 0 0 50px;} #products .layout .categories .toggler>a{display: block;color: #fff; padding-top: 10px;} #products .layout .categories .toggler>a>i{display: block; font-size: 3rem;} #products .layout .categories .toggler>a>span{ display: block; font-size: 1.2rem;} #products .layout .categories .nav>ul{margin: 0 auto;} #products .layout .categories .nav>ul>li{display: block; position: relative;border-bottom: 2px solid #ddd; transition: all .35s;} #products .layout .categories .nav>ul>li>a{display: block; position: relative; padding: 20px 40px 20px 0; text-transform: capitalize; font-size: 1.6rem;color: #333; transition: all .35s;} #products .layout .categories .nav>ul>li:hover, #products .layout .categories .nav>ul>li.active{border-color: #d70d19; color: #d70d19;} #products .layout .categories .nav>ul>li>a:hover, #products .layout .categories .nav>ul>li.active>a{color: #d70d19;} #products .layout .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;} #products .layout .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: #d70d19; content: '\e66c'; transition: all .35s;} #products .layout .categories .nav>ul>li .toggle.active:after{content: '\e667';} #products .layout .categories .nav>ul>li ul{display: none; padding-bottom: 20px;} #products .layout .categories .nav>ul>li ul>li ul{padding:10px 0;} #products .layout .categories .nav>ul>li ul>li{ position: relative; display: block; margin-bottom: 10px; text-align: left;} #products .layout .categories .nav>ul>li ul>li>.toggle{ width: 40px; height: 22px; line-height: 22px;} #products .layout .categories .nav>ul>li ul>li>.toggle:after{ font-size: 2rem; } #products .layout .categories .nav>ul>li ul>li>a{ position: relative; display: block; padding: 0 16px; font-size: 1.5rem; line-height: 2.2rem;} #products .layout .categories .nav>ul>li ul>li>a:after{position: absolute;z-index: 1; left: 4px;top:9px;width: 4px;height: 4px; background: #d70d19; content: '';transition: all .35s;} #products .layout .categories .nav>ul>li a.active{color: #d70d19;} #products .layout .categories .nav.layui-layer-wrap{ padding: 30px;} #products .layout .title{ position: relative; font-size: 3rem; font-weight: bold; color: #333;} #products .layout .recordcount{text-align: left; font-size: 1.6rem; color: #999; padding: 5px 0 20px 0;} #products .layout .recordcount>span{display: inline-block;padding: 0 2px;} #products .layout .lists{margin: 0 auto; padding: 50px 0; } #products .layout .lists>ul{margin: 0 auto;} #products .layout .lists>ul>li{display: block;float: left;width:31.33%; margin-right: 3%; margin-bottom: 3%;overflow: hidden; position: relative; box-sizing: border-box; transition: all .35s; } #products .layout .lists>ul>li:nth-child(3n){margin-right: 0;} #products .layout .lists>ul>li .img{ position: relative; background:#fff; border: 0px solid #ddd;box-sizing: border-box;} #products .layout .lists>ul>li .img>img{ width:100%; height: auto; transition: all .8s;} #products .layout .lists>ul>li .details{ opacity: 0; position: absolute;z-index: 50; left: 50%; top: 50%; background: rgba(199,0,12,.9); box-sizing: border-box; padding: 40px; text-align: left; width: 100%; height: 100%; transform: translate(-50%,0); transition: all .35s;} #products .layout .lists>ul>li .details>.tit{ font-size: 2rem; font-weight: bold; color: #fff!important;} #products .layout .lists>ul>li .details>.txt{ padding: 30px 0; text-align: left; font-size: 1.4rem; color: #fff; line-height: 2rem;} #products .layout .lists>ul>li .details>.more{position: absolute;z-index: 10;right: 30px;bottom: 30px; font-size: 1.4rem; color: rgba(255,255,255,.7);} #products .layout .lists>ul>li .box{font-size:1.8rem; color: #333; text-align: center;padding: 20px; text-overflow:ellipsis; white-space: nowrap; overflow: hidden; transition: all .35s;} #products .layout .lists>ul>li:hover{} #products .layout .lists>ul>li:hover .tit{ color: #c7000c;} #products .layout .lists>ul>li:hover .details{opacity: 1;transform: translate(-50%,-50%);} #products .layout .loadmore{text-align: center;} #searchs{margin: 0 auto; padding: 150px 0;} #searchs .layout .recordcount{text-align: left; font-size: 1.6rem; color: #666; padding: 20px 0;} #searchs .layout .recordcount>b{display: inline-block; font-size: 1.8rem; color: #c7000c; text-decoration: underline;} #searchs .layout .recordcount>span{display: inline-block;padding: 0 2px; color: #ee9900;} #searchs .layout .lists{margin: 0 auto; padding: 30px 0; } #searchs .layout .lists>ul{margin: 0 auto;} #searchs .layout .lists>ul>li{display: block;border: 1px solid #eee; margin-bottom: 3%;overflow: hidden; position: relative; padding: 30px; box-sizing: border-box; transition: all .35s; } #searchs .layout .lists>ul>li .img{ position: relative; width: 15%; float: left; background:#fff; box-sizing: border-box;} #searchs .layout .lists>ul>li .img>img{ width:100%; height: auto; transition: all .8s;} #searchs .layout .lists>ul>li .box{ float: right; width: 80%; text-align: left;padding: 20px;transition: all .35s;} #searchs .layout .lists>ul>li .box>.tit{ text-overflow:ellipsis; white-space: nowrap; overflow: hidden; font-size: 1.8rem; font-weight: bold; color: #333; transition: all .35s;} #searchs .layout .lists>ul>li .box .searHeight{font-style: normal; color: #c7000c;text-decoration: underline;} #searchs .layout .lists>ul>li .box>.txt{ padding: 16px 0; font-size: 1.4rem; color: #999; line-height: 2.4rem;} #searchs .layout .lists>ul>li .box>.more{ padding-top: 10px;} #searchs .layout .lists>ul>li .box>.more>span{ border: 1px solid #eee; display: inline-block;padding: 10px 20px; font-size: 1.2rem; color: #888; transition: all .5s;} #searchs .layout .lists>ul>li:hover .tit{ color: #c7000c;} #searchs .layout .lists>ul>li:hover .more>span{ background: #c7000c; border-color: #c7000c;color: #fff;} #searchs .layout .loadmore{text-align: center; border-top: 0; padding-top: 20px;} #products .layout .view{position: relative; margin: -100px auto 0 auto; box-sizing: border-box; } #products .layout .view .introduce{display: block;margin: 50px auto; padding: 50px; background: #fff; box-shadow: 0 2px 16px rgba(0,0,0,.1);} #products .layout .view .introduce .thumbs{position:relative;} #products .layout .view .introduce .thumbs>.swiper{ width:80px;} #products .layout .view .introduce .thumbs>.swiper .swiper-slide{border:1px solid #ddd; overflow: hidden; cursor: pointer; box-sizing:border-box;} #products .layout .view .introduce .thumbs>.swiper img{width:auto;height:100%;box-sizing:border-box;} #products .layout .view .introduce .thumbs>.swiper .swiper-slide-thumb-active{border-color: #d70d19;} #products .layout .view .introduce .thumbs>.swiper .play{position: absolute;z-index: 10; left: 0;top: 0;width: 100%;height: 100%; background: url("../img/play_ico.png") no-repeat; background-size: cover;} #products .layout .view .introduce .info{ position: relative; width: calc(100% - 110px);box-sizing: border-box; background: #fff; } #products .layout .view .introduce .info>.show{ position:relative; display: inline-block; max-width:600px; width: 45%; cursor: pointer; margin:0 auto;} #products .layout .view .introduce .info>.show .swiper{ width:100%; height:100%; margin: 0 auto;border: 1px solid #ddd;overflow: visible!important;} #products .layout .view .introduce .info>.show .swiper-slide{ position: relative; text-align: center; margin: 0 auto;} #products .layout .view .introduce .info>.show .swiper-slide>a{ position: relative;z-index: 100; display: block;} #products .layout .view .introduce .info>.show .swiper-slide>a:after{position: absolute;z-index: 90; top: 0;left: 0; width: 100%;height: 100%; background: url("../img/mask.png") no-repeat; background-position: 50% 50%; content: '';} #products .layout .view .introduce .info>.show .swiper-slide>a>img{max-width: 100% !important; vertical-align: center;} #products .layout .view .introduce .info>.show .swiper-slide .play{ position: absolute;z-index: 50; left: 0;top: 50%; transform: translateY(-50%); width: 100%;} #products .layout .view .introduce .info>.show .swiper-slide .play>iframe{ width: 100%; height: 450px; margin: 0 auto;} #products .layout .view .introduce .info>.show .swiper-pagination{ display:none; text-align:center; position:relative; bottom:0;} #products .layout .view .introduce .info>.show .swiper-pagination .swiper-pagination-bullet {width: 10px;height: 10px;margin:0 3px;} #products .layout .view .introduce .info>.show .swiper-pagination .swiper-pagination-bullet-active{background:#666;} #products .layout .view .introduce .content{width: 55%; text-align: left; box-sizing: border-box; padding:10px 0 10px 100px;} #products .layout .view .introduce .content>.title{font-size: 3.6rem; font-weight: bold; padding: 20px 0; border-bottom: 4px solid #eee;} #products .layout .view .introduce .content>.text{text-align: left; padding: 30px 0 60px 0;} #products .layout .view .introduce .content>.text>h3{ display: block; font-size: 2rem; font-weight: bold; color: #c7000c;} #products .layout .view .introduce .content>.text>p{ padding-top: 20px; font-size: 1.4rem; line-height: 2.4rem; color: #666;} #products .layout .view .introduce .content>.button{ text-align: left; padding-top: 20px;} #products .layout .view .introduce .content>.button>a{display:inline-block; background: #c7000c; border: 2px solid #c7000c; text-align: center; font-size: 1.6rem; font-weight: bold; color: #fff; padding: 0 32px; height: 40px;line-height: 40px; transition: all .35s;} #products .layout .view .introduce .content>.button>a:hover{ background: none; border-color: #c7000c; color: #c7000c;} #products .layout .view .introduce .content>.url{ text-align: left; padding-top: 20px;} #products .layout .view .introduce .content>.url>a{ margin-right: 20px; border: 0; text-align: left; font-size: 1.4rem; font-weight: normal; background: #fff; color: #666;} #products .layout .view .introduce .content>.url>a i{ display: inline-block; vertical-align: middle; font-size: 2.4rem; color: #c7000c; margin-right: 5px;} #products .layout .view .introduce .content>.url>a span{display: inline-block; vertical-align: middle;} #products .layout .view .introduce .content>.url>a.tel{color: #c7000c; font-weight: bold;} #products .layout .view .details{margin: 0 auto; background: #fff;box-shadow: 0 2px 16px rgba(0,0,0,.1);} #products .layout .view .details>.detail{ margin: 0 auto; padding:0 50px;} #products .layout .view .details>.detail .wrap{width: 100%;max-width: none;} #products .layout .view .details>.detail .items{margin: 0 auto; padding: 50px 0; border-bottom: 3px solid #eee;} #products .layout .view .details>.detail .items:last-child{border-bottom: 0;} #products .layout .view .details>.detail .items .title{text-align: left;font-size: 2.4rem; font-weight: bold; color: #333;} #products .layout .view .details>.detail .items .content{ padding: 50px 0;} #products .layout .view .details>.detail .items .content>p{display: block; position: relative; font-size: 1.6rem; color: #333; margin-bottom: 15px;} #products .layout .view .details>.detail .items .content img{max-width: 80%;} #products .layout .view .details>.detail .items .content .table-container{position: relative; padding-bottom: 30px; cursor: all-scroll;} #products .layout .view .details>.detail .items .content .table-container>.table-wrapper{ position: relative; overflow:hidden; overflow-x:auto;} #products .layout .view .details>.detail .items .content .table-container>.table-wrapper::-webkit-scrollbar {width:10px;height: 10px;} #products .layout .view .details>.detail .items .content .table-container>.table-wrapper::-webkit-scrollbar-thumb {background:#666;} #products .layout .view .details>.detail .items .content .table-container>.table-wrapper::-webkit-scrollbar-track {border-radius: 0;background: #ededed;} #products .layout .view .details>.detail .items .content .table-container:after{ display: none; position: absolute;z-index: 10; right: 0; bottom: 10px; font-size: 1.1rem; color: #ccc; content: '拖动表格进行浏览';} #products .layout .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: 0;} #products .layout .view .details>.detail .items .content table td{ text-align: left; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; color: #666; font-size: 1.4rem;padding:10px;} #products .layout .view .details>.detail .items .content table td:first-child{background: #f7f7f7; } #products .layout .view .details>.detail .items .content table td:nth-child(2){} #products .layout .view .details>.detail .items .content table td:last-child{border-right: 0;} #products .layout .view .details>.detail .related{ position: relative;} #products .layout .view .details>.detail .related .swiper{ padding: 50px 0;} #products .layout .view .details>.detail .related .swiper .swiper-slide{overflow: hidden;} #products .layout .view .details>.detail .related .swiper .swiper-slide .img{ position: relative; background:#fff;box-sizing: border-box;} #products .layout .view .details>.detail .related .swiper .swiper-slide .img>img{ width:100%; height: auto; transition: all .8s;} #products .layout .view .details>.detail .related .swiper .swiper-slide .tit{text-align: center; font-size: 1.8rem; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;} #products .layout .view .details>.detail .related .swiper .swiper-slide .details{ opacity: 0; position: absolute;z-index: 50; left: 50%; top: 50%; background: rgba(199,0,12,.9); box-sizing: border-box; padding: 40px; text-align: left; width: 100%; height: 100%; transform: translate(-50%,0); transition: all .35s;} #products .layout .view .details>.detail .related .swiper .swiper-slide .details>.tit{ text-align: left; font-size: 2rem; font-weight: bold; color: #fff!important;} #products .layout .view .details>.detail .related .swiper .swiper-slide .details>.txt{ padding: 30px 0; text-align: left; font-size: 1.4rem; color: #fff; line-height: 2rem;} #products .layout .view .details>.detail .related .swiper .swiper-slide .details>.more{position: absolute;z-index: 10;right: 30px;bottom: 30px; font-size: 1.4rem; color: rgba(255,255,255,.7);} #products .layout .view .details>.detail .related .swiper .swiper-slide:hover .details{opacity: 1;transform: translate(-50%,-50%);} #products .layout .view .details>.detail .related .swiper .swiper-slide:hover .tit{color: #fff;} #products .layout .view .details>.detail .related .swiper .button-next, #products .layout .view .details>.detail .related .swiper .button-prev{ cursor: pointer; position: absolute;z-index: 10; right: 0; top: 50%; transform: translateY(-50%); width: 40px;height: 40px; line-height: 40px; text-align: center; transition: all .35s;} #products .layout .view .details>.detail .related .swiper .button-prev{ right: auto; left: 0;} #products .layout .view .details>.detail .related .swiper .button-next>i, #products .layout .view .details>.detail .related .swiper .button-prev>i{ font-size: 6rem;} #products .layout .view .details>.detail .related .swiper .button-next:hover, #products .layout .view .details>.detail .related .swiper .button-prev:hover{color: #c7000c;} #products .layout .view .back{text-align: center; padding-top: 50px;} #products .layout .view .back>a{display: inline-block; border: 1px solid #ccc; padding: 12px 60px; font-size: 1.8rem; border-radius: 50px; transition: all .35s;} #products .layout .view .back>a:hover{background: #c7000c; color: #fff; border-color: #c7000c; box-shadow: 0 3px 16px rgba(0,0,0,.16);} #navpart.highlight{ background: #fff!important; border-top: 1px solid #eee;} #samples{ position: relative; margin: 0 auto;} #samples .wrap{max-width: 1280px;} #samples .layout {margin: 0 auto; padding-top: 20px;} #samples .layout .close{position: absolute;z-index: 60; right: 0;top:10px; width: 40px; height: 40px; line-height: 40px; cursor: pointer; text-align: left; color: #333;} #samples .layout .close>i{ position: relative;z-index: 20; font-size: 2.4rem;} #samples .layout .title{ text-align: center;} #samples .layout .title>h3{font-size: 1.8rem; color: #333;} #samples .layout .title>h3>strong{font-weight: bold; font-size: 2.4rem; vertical-align: middle;} #samples .layout .title>h3>span{display: inline-block; vertical-align: middle; margin-left: 6px;} #samples .layout .describe{ text-align: center; width: 80%; margin:0 auto; font-size: 1.4rem; color: #999; line-height: 2rem;} #samples .layout .form{margin: 0 auto; padding:10px 0;} #samples .layout .form .row{ position: relative; display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap; margin: 0 auto;} #samples .layout .form .row>[class*="col-"] {padding-right: 0;} #samples .layout .form .row>.group{display: block; margin-bottom: 10px;} #samples .layout .form .row>.group dt{ font-size: 1.4rem; color: #333; margin-bottom: 5px;} #samples .layout .form .row>.group dt>span{display: inline-block; margin-left: 10px; color: #d70d19; font-size: 1.4rem;} #samples .layout .form .row>.group dd>input{ display:inline-block; box-sizing:border-box; width:100%; height: 38px; line-height: 38px; border-radius: 2px; padding:0 10px;-webkit-appearance:none; font-size: 1.4rem; border:1px solid #ddd; color:#666;text-align:left; transition: all .35s;} #samples .layout .form .row>.group dd>input::-webkit-input-placeholder{ color:#999;} #samples .layout .form .row>.group dd>textarea{ display:block;box-sizing:border-box; width:100%;height:auto;padding:13px 10px;-webkit-appearance:none; font-size: 1.4rem; line-height:3.2rem; border:1px solid #ddd; color:#666;text-align:left;transition: all .35s;} #samples .layout .form .row>.group dd>textarea::-webkit-input-placeholder{ color:#999;} #samples .layout .form .row>.group dd>input:hover, #samples .form .row>.group dd>textarea:hover{border-color: #ccc;} #samples .layout .form .row>.col-3{width: 33.33%; flex: 0 0 33.33%;} #samples .layout .form .row>.col-5{width: 50%; flex: 0 0 50%;} #samples .layout .form .row>.col-10{width: 100%; flex: 0 0 100%;} #samples .layout .form .row>.button{text-align: right;} #samples .layout .form .row>.button .form_button{display:block; width: 100%; box-sizing:border-box; border: 0!important; text-align: center; border-radius: 2px; font-weight: bold;height: 50px; line-height: 50px; background: #d70d19;padding:0 100px; font-size: 1.6rem; color:#fff; cursor:pointer; transition: all .35s;} #samples .layout .form .row>.button .form_button:hover{background: #555;} #samples .layout .form .layui-input, #samples .layout .form .layui-select, #samples .layout .form .layui-textarea{height: 50px!important; line-height: 50px\9!important;} #samples .layout .form .layui-form-select dl dd.layui-this {background-color: #666!important;} #samples .layout .form #checkimg{display:inline-block; position: absolute; top: 0; right: 30px; margin-top: 30px; cursor:pointer;} #samples .layout .complete{ display: none; margin: 50px auto; text-align: center;} #samples .layout .complete>.ico{ text-align: center; background: #25b747; width: 70px; height: 70px; line-height: 70px; border-radius: 100%; margin: 0 auto;} #samples .layout .complete>.ico>i{ font-size: 6rem;color: #fff;} #samples .layout .complete>.box{ padding: 20px; width: 60%; margin: 0 auto;} #samples .layout .complete>.box>.tips{color: #999; padding-bottom: 10px;} #samples .layout .complete>.box>.tips>span{display: inline-block;color: #d70d19; margin-right: 3px;} #samples .layout .complete>.box>.text{font-size: 1.4rem;color: #666; line-height: 2rem;} .layui-layer-btn .layui-layer-btn0 { border-color: #333!important; background-color: #333!important; color: #fff!important;} @media only screen and (max-width: 1460px) { #products .layout .view .introduce .content>.text{padding: 30px 0;} /*#products .layout .view .introduce .thumbs>.swiper{ height:auto;}*/ } @media only screen and (max-width: 1280px) { #catalog .layout>.lists>ul>li .photo>.img>span { height: 300px;} #catalog .layout>.lists>ul>li .box>.tit { font-size: 3.2rem;} #catalog .layout>.lists>ul>li .box>.txt {font-size: 1.4rem; } #catalog .layout>.lists>ul>li .box>.more>span { padding: 10px 20px; font-size: 1.4rem;} #products .layout>.layout-box-left{ width: 24%;} #products .layout>.layout-box-right{width: 68%;} #products .layout .title{ font-size: 2.4rem;} #products .layout .recordcount { font-size: 1.4rem; } #products .layout .lists>ul>li .details{ padding: 30px;} #products .layout .view .introduce .content{padding: 0 0 0 80px;} #products .layout .view .introduce .content>.title{font-size: 2.8rem; padding: 15px 0;} #products .layout .view .introduce .content>.text>h3{font-size: 1.8rem;} #products .layout .view .details>.detail .items .title { font-size: 2rem;} #products .layout .view .details>.detail .items .content .table-container:after{ display: block;} #products .layout .view .details>.detail .related .swiper .swiper-slide .tit{font-size: 1.6rem; ;} #products .layout .view .details>.detail .related .swiper .swiper-slide .details{ padding: 20px; } #products .layout .view .details>.detail .related .swiper .swiper-slide .details>.tit{ font-size: 1.8rem; } #products .layout .view .details>.detail .related .swiper .swiper-slide .details>.txt{ padding: 20px 0; font-size: 1.2rem;} #products .layout .view .details>.detail .related .swiper .swiper-slide .details>.more{ font-size: 1.2rem; } #searchs .layout .lists>ul>li .img{ width: 30%; } #searchs .layout .lists>ul>li .box{ width: 65%;} } @media only screen and (max-width: 1080px) { #navpart .path{ width: 70%;} #navpart .nav{width: 30%;} #catalog .layout>.lists>ul>li{padding: 0;} #catalog .layout>.lists>ul>li .photo{width: 100%;float: none;} #catalog .layout>.lists>ul>li .photo>.img {border-radius: 0;padding: 0;} #catalog .layout>.lists>ul>li .photo>.img>span { height: auto; background: none!important;} #catalog .layout>.lists>ul>li .photo>.img>span img{display: block;width: 100%;height: auto;} #catalog .layout>.lists>ul>li .box{width: 100%; float: none; padding:6%;} #catalog .layout>.lists>ul>li .box>.tit { font-size: 2.8rem;} #products .layout .lists>ul>li{width:48%; margin-right: 0; } #products .layout .lists>ul>li:nth-child(even){float: right;} } @media only screen and (max-width: 960px){ #navpart.highlight{background: #f7f7f7!important;} #navpart.highlight .path{width: 100%; float: none;} #navpart .nav{display: none;} #catalog .layout>.lists>ul>li .box>.tit {font-size: 2.4rem;} #catalog .layout>.lists>ul>li .box>.txt { width: 100%;} #catalog .layout>.lists>ul>li .box>.more { padding-top: 0; } #catalog .layout>.lists>ul>li .box>.more>span {padding: 8px 16px; font-size: 1.2rem;} #products .layout>.layout-box-left{ width: 100%; float: none; border: 0; padding: 0;} #products .layout>.layout-box-right{width: 100%; float: none;padding: 0;} #products .layout .categories{padding: 0; position: fixed; right: 0; top: 50%;z-index: 19991015; } #products .layout .categories>.nav{display: none;} #products .layout .categories>.toggler{display: block;} #products.highlight{ padding-top: 80px;} #products.highlight .wrap{width: 100%;max-width: inherit;} #products .layout .view .introduce{margin: 20px auto; width: 100%; max-width: none;} #products .layout .view .introduce .thumbs{display: none; } #products .layout .view .introduce .info{ width: 100%;padding:0; border-radius: 0;} #products .layout .view .introduce .info>.show{ max-width:none; width: 100%; float: none; } #products .layout .view .introduce .info>.show .swiper{border: 0;} #products .layout .view .introduce .info>.show .swiper-pagination{ display:block;} #products .layout .view .introduce .content{width: 100%; float: none;padding-left: 0;} #products .layout .view .details>.detail .items .content img {max-width: 100%;} } @media only screen and (max-width:860px) { #searchs .layout .recordcount { padding: 0; font-size: 1.4rem; } #searchs .layout .lists>ul>li .box>.tit {font-size: 1.6rem;} #searchs .layout .lists>ul>li .box>.txt { font-size: 1.2rem; line-height: 2rem; } } @media only screen and (max-width:640px) { #catalog { padding: 50px 0; } #catalog .layout>.lists>ul>li .box {padding: 30px 30px 50px 30px;} #catalog .layout>.lists>ul>li .box>.tit { font-size: 2rem;} #catalog .layout>.lists>ul>li .box>.txt { padding: 10px 0; font-size: 1.2rem;} #products { padding: 50px 0; } #products .layout .title{ font-size: 1.6rem;} #products .layout .lists>ul>li .box{font-size:1.4rem; padding: 0 20px;} #products .layout .view .introduce .content>.title {font-size: 2.4rem;} #products .layout .view .details>.detail .items { padding: 30px 0; } #products .layout .view .details>.detail .items .content { padding: 20px 0;} #products .layout .view .details>.detail .items .content>p{font-size: 1.4rem;} #products .layout .view .details>.detail .items .content table td{ font-size: 1.2rem;} #products .layout .view .back>a{padding: 10px 40px; font-size: 1.4rem;} #searchs {padding: 50px 0;} #searchs .layout .lists>ul>li .img{ width: 45%;} #searchs .layout .lists>ul>li .box{ width: 50%; padding: 0 20px;} } @media only screen and (max-width:520px) { #products .layout .view .introduce { padding: 30px; } #products .layout .view .introduce .content>.title {font-size: 2rem;} #products .layout .view .introduce .content>.text>h3 { font-size: 1.6rem;} #products .layout .view .introduce .content>.text>p {font-size: 1.2rem;line-height: 2rem; } #products .layout .view .introduce .content>.button{padding-top: 0;} #products .layout .view .introduce .content>.button>a { font-size: 1.4rem;} #products .layout .view .details>.detail { padding: 0 30px;} #products .layout .view .details>.detail .items .title {font-size: 1.8rem;} #searchs .layout .lists>ul>li{padding: 0;} #searchs .layout .lists>ul>li .img{ width: 100%; float: none;} #searchs .layout .lists>ul>li .box{ float: none; width: 80%; margin: 0 auto; padding:10px 0 30px 0;} #searchs .layout .lists>ul>li .box>.more>span {padding: 6px 10px;} }