@charset "utf-8";

#catalog{margin: 0 auto;}
#catalog .wrap{margin: 0 auto; max-width: 1400px; padding: 100px 0;}
#catalog .theme{ margin: 0 auto;}
#catalog .theme>.title{display: block; text-align: left; margin: 0 auto;}
#catalog .theme>.title>h3{ position: relative; padding-bottom: 20px; display: block; font-size: 3.2rem; color: #333;}
#catalog .theme>.intro{ width: 70%; margin: 0 auto; padding: 30px 0; text-align: center;font-size: 1.6rem; color: rgba(255,255,255,.5); line-height: 2.4rem;}
#catalog .container{margin: 0 auto; padding: 50px 0;}
#catalog .container>.lists{margin: 0 auto;}
#catalog .container>.lists>ul{margin: 0 auto;}
#catalog .container>.lists>ul>li{ position: relative; z-index: 10; display: block; float: left; width: 22.75%; margin-right: 3%; margin-bottom: 3%; background: #fff; box-shadow: 0 2px 16px rgba(0,0,0,.1);box-sizing: border-box; transition: all .35s;}
#catalog .container>.lists>ul>li:nth-child(4n){ margin-right: 0;}
#catalog .container>.lists>ul>li a{display: block; position: relative}
#catalog .container>.lists>ul>li a>.img{ position: relative; overflow: hidden; text-align: center;}
#catalog .container>.lists>ul>li a>.img>img{transition: all 1s;}
#catalog .container>.lists>ul>li a>.title{ box-sizing: border-box; height: 90px; padding: 10px 30px; text-align: center; position: relative; font-size: 2rem; font-weight: bold; line-height: 3rem; color: #000; transition: all .35s;}
#catalog .container>.lists>ul>li:hover{ box-shadow: 0 2px 16px rgba(40,27,110,.3);}
#catalog .container>.lists>ul>li:hover .img>img{transform: scale(.8);}
#catalog .container>.lists>ul>li:hover .title{color: #281b6e;}




#products{margin: 0 auto; padding: 100px 0;}
#products .wrap{max-width: 1400px;}
#products.highlight{ background: #eef2f5;}
#products .layout{margin: 0 auto;}
#products .layout>.layout-box-left{ width: 22%; box-sizing: border-box; text-align: left; border: 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; }
#products .layout .categories .toggler{ width: 100%; box-sizing: border-box;padding-left: 20px; background: #281b6e;}
#products .layout .categories .toggler>a{display: flex;height: 70px;  align-content: center; align-items: center; color: #fff;}
#products .layout .categories .toggler>a>i{display: inline-block; font-size: 3rem;}
#products .layout .categories .toggler>a>span{ display: inline-block; font-size: 2rem; margin-left: 10px; font-weight: bold;}
#products .layout .categories .nav>ul{margin: 0 auto;}
#products .layout .categories .nav>ul>li{display: block; position: relative;border-bottom: 1px solid #eee; transition: all .35s;}
#products .layout .categories .nav>ul>li:last-child{border-bottom: 0;}
#products .layout .categories .nav>ul>li>a{display: flex; align-items: center; align-content: center; justify-content: flex-start; position: relative; padding: 20px; text-transform: capitalize; font-size: 1.6rem;color: #333; transition: all .35s;}
#products .layout .categories .nav>ul>li>a img{ display: inline-block; vertical-align: middle; height: 50px; width: auto; margin-right: 10px;}
#products .layout .categories .nav>ul>li>a span{display: inline-block;}
#products .layout .categories .nav>ul>li:hover, #products .layout .categories .nav>ul>li.active{color:#281b6e; background: #f7f7f7; }
#products .layout .categories .nav>ul>li>a:hover, #products .layout .categories .nav>ul>li.active>a{color: #281b6e;}
#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: #cc151e; 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 a.active{color: #281b6e; font-weight: bold;}
#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%;position: relative; box-shadow: 0 2px 16px rgba(0,0,0,.1); box-sizing: border-box; transition: all .35s; }
#products .layout .lists>ul>li:nth-child(3n){margin-right: 0;}

#products .search .layout .recordcount{ text-align: center; color: #281b6e;}
#products .search .layout .recordcount>b{color: #cc151e; font-size: 2rem}
#products .search .layout .lists>ul>li{ width: 22.75%;}
#products .search .layout .lists>ul>li:nth-child(3n){margin-right: 3%;}
#products .search .layout .lists>ul>li:nth-child(4n){margin-right: 0;}

#products .layout .lists>ul>li .img{ position: relative; background:#fff;box-sizing: border-box;padding: 20px; transition: all .35s;}
#products .layout .lists>ul>li .img>img{ width:100%; height: auto; transition: all .8s;}
#products .layout .lists>ul>li .title{ height: 50px; font-size:1.6rem; color: #333; text-align: center; margin-bottom:30px;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding:0 30px; transition: all .35s;}
#products .layout .lists>ul>li:hover{ box-shadow: 0 2px 16px rgba(40,27,110,.3);}
#products .layout .lists>ul>li:hover .img>img{transform: scale(.9)}
#products .layout .lists>ul>li:hover .title{ color: #281b6e;}
#products .layout .loadmore{text-align: center;}




#sear{margin: -30px auto 0 auto; position: relative;z-index: 60;}
#sear>.layout{ display: flex; align-content: center;align-items: center; justify-content: space-between; width: 86%;max-width: 800px; box-sizing: border-box;padding: 0 30px;background: #fff; border-radius: 50px;overflow: hidden; margin: 0 auto; border: 1px solid #ddd; box-shadow: 0 2px 10px rgba(0,0,0,.1);}
#sear>.layout input{display: inline-block; flex: 1; border: 0; height: 60px; line-height: 60px; font-size: 1.6rem; color: #333;}
#sear>.layout input::placeholder{color: #999;}
#sear>.layout>a{display: inline-block; color: #281b6e;}
#sear>.layout>a>i{font-size: 2.6rem;}





#products .view{ margin: 0 auto;}
#products .view .title{display: none; margin: 0 auto; text-align: center; font-size: 3rem;color: #333; line-height: 3.2rem;}
#products .view .introduce{display: block;margin: 0 auto; padding: 30px 0;}
#products .view .introduce>.focus{width: 43%;max-width: 600px; box-sizing: border-box;}
#products .view .introduce>.focus .show{ position:relative; display: block; margin:0 auto;  box-sizing: border-box; }
#products .view .introduce>.focus .show .swiper{width:100%; height:100%; margin: 0 auto;box-sizing: border-box; border: 1px solid #ddd; overflow: hidden; }
#products .view .introduce>.focus .show .swiper-slide{ text-align: center; margin: 0 auto;}
#products .view .introduce>.focus .show .swiper-slide>img{max-width:100%; max-height:100%; margin: 0 auto;  vertical-align: center;}
#products .view .introduce>.focus .show .swiper-pagination{ display:none; text-align:center; position:relative; bottom:-10px;}
#products .view .introduce>.focus .show .swiper-pagination .swiper-pagination-bullet {width: 8px;height: 8px; margin:0 3px;}
#products .view .introduce>.focus .show .swiper-pagination .swiper-pagination-bullet-active{background:#d71a20;}
#products .view .introduce>.focus .show .arrow-prev, #products .view .introduce>.focus .show .arrow-next{ display: none; position:absolute; z-index:99; left:0; top:50%; margin-top:-20px; width:40px; height:40px; line-height: 40px; cursor: pointer; text-align: center; border-radius: 100%; background: rgba(0,0,0,.2); transition: all .35s; }
#products .view .introduce>.focus .show .arrow-next{ left: auto; right: 0; }
#products .view .introduce>.focus .show .arrow-prev i, #products .view .introduce>.focus .show .arrow-next i{ font-size: 2.4rem; color: #231815; transition: all .35s;}
#products .view .introduce>.focus .show .arrow-prev:hover, #products .view .introduce>.focus .show .arrow-next:hover{ background: #d71a20; }
#products .view .introduce>.focus .thumbs{width:100%; margin:30px auto;}
#products .view .introduce>.focus .thumbs>.swiper{width:321px; height:80px; margin:auto; text-align:center;}
#products .view .introduce>.focus .thumbs>.swiper .swiper-slide-thumb-active{border:1px solid #281b6e!important;}
#products .view .introduce>.focus .thumbs>.swiper .swiper-slide{width:71px!important; height:71px; box-sizing: border-box; border: 1px solid #ddd;}
#products .view .introduce>.focus .thumbs>.swiper img{padding:1px; width:100%; height:100%; display:block; border:1px solid transparent; cursor:pointer; box-sizing:border-box;}
#products .view .introduce>.info{width: 50%; text-align: left; box-sizing: border-box; padding: 20px 0;}
#products .view .introduce>.info>.title{display:block; text-align: left; font-size: 4rem; line-height: 5rem; color: #000;}
#products .view .introduce>.info>.intro{display: block; color: #333; font-size: 1.4rem; padding: 30px 0;}
#products .view .introduce>.info>.intro>h3{ display: block; }
#products .view .introduce>.info>.intro>p{display: block; padding-top: 10px; line-height: 1.8rem;}
#products .view .introduce>.info>.button{ text-align: left; padding: 20px 0;}
#products .view .introduce>.info>.button>a{display:inline-block; background: #cc151e; border: 2px solid #cc151e; text-align: center; font-size: 1.6rem; font-weight: bold; color: #fff;  border-radius: 40px; padding: 6px 32px; transition: all .35s;}
#products .view .introduce>.info>.button>a:hover{ background: none; border-color: #cc151e; color: #cc151e;}
#products .view .introduce>.info>.share{text-align: left;margin: 0 auto;}
#products .view .introduce>.info>.share>.tit{display: block; padding-bottom: 10px; font-size: 1.6rem; color: #cc151e;}
#products .view .introduce>.info>.share>.con{display: block;}
#products .view .introduce>.info>.share>.con a{margin: 0 10px 0 0;}
#products .view .details{margin: 0 auto;}
#products .view .details>.item{margin: 0 auto 60px auto;}
#products .view .details>.item>.title{display: block; font-size: 3rem; font-weight: bold; color: #333; text-align: left;}
#products .view .details>.item>.content{ padding: 20px 0; font-size: 1.6rem; line-height: 2.8rem; color: #666;}
#products .view .details>.item>.content>p{margin-bottom: 15px;}
#products .view .details>.item>.content .table-container{position: relative;}
#products .view .details>.item>.content .table-container>.table-wrapper{ position: relative; overflow:hidden; overflow-x:auto;}
#products .view .details>.item>.content .table-container:after{ display: none; position: absolute;z-index: 10; left: 0; bottom: -30px; font-size: 1.1rem; color: #ccc; content: '拖动表格进行浏览';}
#products .view .details>.item>.content table{  box-sizing: border-box; width: 100%!important; border: 1px solid #ddd;}
#products .view .details>.item>.content table td{border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; color: #666; font-size: 1.6rem;padding:15px;}
#products .view .details>.item>.content table tr:first-child td:first-child{width: 240px!important;}
#products .view .details>.item>.content img{max-width: 100%;height: auto;}




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


    #catalog .container>.lists>ul>li a>.title{ font-size: 1.8rem;}


    #products .layout .categories .toggler>a>span {font-size: 2rem; }
    #products .layout .categories .nav>ul>li>a{font-size: 1.4rem;}

    #products .layout .lists { padding: 30px 0; }

}



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

    #catalog .theme>.title>h3 {font-size: 2.8rem;}
    #catalog .container>.lists>ul>li a>.title{ font-size: 1.6rem;}

    #products .layout .categories .toggler>a>i {font-size: 2.4rem; }
    #products .layout .categories .toggler>a>span { font-size: 1.7rem; }


    #products .layout>.layout-box-right { padding: 0;}
    #products .layout .title { font-size: 2.8rem; }
    #products .layout .lists>ul>li .title { height: 40px; font-size: 1.4rem;padding: 0 20px; }


    #products .view .introduce>.info>.title { font-size: 3rem;line-height: 4rem; }

    #products .view .details>.item>.title {font-size: 2.8rem; }



}

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

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

    #products .layout>.layout-box-left {width: 24%;}
    #products .layout .categories .toggler>a>span { font-size: 1.8rem;}


}

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

    #products .layout .categories .toggler>a>span { font-size: 1.5rem; }

    #products .layout .categories .nav>ul>li>a{padding: 20px 15px;}
    #products .layout .categories .nav>ul>li>a img { height: 40px; margin-right: 5px;}


}

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


    #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; left: 0; top: 50%;z-index: 19991015; }
    #products .layout .categories .nav{display: none;}
    #products .layout .categories .nav>ul>li>.toggle{ display: block;}
    #products .layout .categories .toggler{display: block; padding: 0 20px; background:#cc151e; box-shadow: 0 4px 16px rgba(0,0,0,.1);}
    #products .layout .categories .toggler>a>span{display: none;}

    #products .view{position: relative; }
    #products .view .title{display: block; margin:  0 auto}
    #products .view .introduce>.focus{ float: none; width: 100%; max-width: inherit; background: #fff; margin: 0 auto;}
    #products .view .introduce>.focus .show .swiper{ border: 1px solid #ddd; box-shadow: 0 0 0 rgba(0,0,0,0)}
    #products .view .introduce>.info{float: none; width: 100%;}
    #products .view .introduce>.info>.title{display: none;}



}






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

    #catalog .theme>.title>h3 { font-size: 2.4rem;}


    #catalog .container>.lists>ul>li a>.title{ height: 65px; font-size: 1.4rem; line-height: 2rem;padding: 10px;}



    #products .layout .title { font-size: 2.4rem;}
    #products .layout .recordcount { font-size: 1.4rem;}

    #products .layout .lists>ul>li{width:48%; margin-right: 0; margin-bottom: 20px; }
    #products .layout .lists>ul>li:nth-child(even){ float: right;}


    #products .view .title {font-size: 2.4rem; line-height: 2.6rem; }
    #products .view .details>.item>.title { font-size: 2rem;}
    #products .view .details>.item>.content { font-size: 1.4rem; line-height: 2.4rem; }

}



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

    #catalog .wrap{padding: 50px 0;}

    #catalog .theme>.title>h3 { font-size: 2rem;}
    #catalog .container{padding: 30px 0;}
    #catalog .container>.lists>ul>li{ width: 48%; margin-right: 0; margin-bottom: 20px;}
    #catalog .container>.lists>ul>li:nth-child(4n){ margin-right: 0;}
    #catalog .container>.lists>ul>li:nth-child(even){ float: right; }


    #sear>.layout input{height: 46px; line-height: 46px; font-size: 1.4rem;}


    #products { padding: 50px 0; }
    #products .layout .title {font-size:1.8rem;}
    #products .layout .recordcount { font-size: 1.2rem;}


    #products .view .details>.item>.title { font-size: 1.8rem;}





}


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


    #products .layout .lists>ul>li{width:100%;float: none }
    #products .layout .lists>ul>li:nth-child(even){ float: none;}
    #products .layout .lists>ul>li .title { height: auto; padding: 20px;-webkit-line-clamp: none; }


    #products .view .details>.item>.title { font-size: 1.6rem;}



}