@charset "utf-8";

#catalog{margin: 0 auto; position: relative;z-index: 90;}
#catalog .wrap{margin: 0 auto; max-width: inherit; padding: 100px 0 400px 0; }
#catalog .layout{ position: relative; margin: 0 auto; overflow: hidden;}
#catalog .layout>section{ display: block; float: left; width: 50%;}
#catalog .layout>section>a{display: block; background: #eee;zoom: 1;  position: relative; }
#catalog .layout>section>a:before, #catalog .layout>section>a:after { content: ""; display: table; }
#catalog .layout>section>a:after { clear: both; }
#catalog .layout>section .box{  position: absolute; z-index: 30; left: 0;top: 0; width:50%; height: 100%; padding: 50px; box-sizing: border-box;}
#catalog .layout>section .box:after{position: absolute;z-index: 10; content: ''; top: 30px; right: -30px; width: 0; height: 0;border-top:30px solid transparent;border-bottom:30px solid transparent;border-left:30px solid #eee;}
#catalog .layout>section .box>.title{font-size: 3.2rem;color: #333;}
#catalog .layout>section .box>.more{ position: absolute;z-index: 12; right: 30px; bottom: 30px; font-size: 1.5rem; color: #12479b;}
#catalog .layout>section .box>.more span{display: inline-block;vertical-align: middle; margin-right: 7px;}
#catalog .layout>section .box>.more i{display: inline-block;vertical-align: middle; background: #12479b; width: 30px;height: 30px; line-height: 27px; border: 2px solid #12479b; text-align: center; border-radius: 100%; color: #fff;}
#catalog .layout>section .img{width: 50%; padding: 30px 0; float: right; background: rgba(255,255,255,1); position: relative;overflow: hidden;}
#catalog .layout>section .img:after{position: absolute;z-index: 1; left: 50%;top: 50%;width: 10px;height: 10px; background: rgba(18,71,155,.3); opacity: 0; transform: translate(-50%,-50%); content: ''; transition: all .35s;}
#catalog .layout>section .img>img{width: 100%;height: auto;}
#catalog .layout>section>a:hover .img:after{ width: 100%;height: 100%;opacity: 1;}
#catalog .layout>section:nth-of-type(4n+3)>a, #catalog .layout>section:nth-of-type(4n+4)>a {background: #3c4f64;}
#catalog .layout>section:nth-of-type(4n+3) .box, #catalog .layout>section:nth-of-type(4n+4) .box{ left: auto;right: 0;}
#catalog .layout>section:nth-of-type(4n+3) .box:after, #catalog .layout>section:nth-of-type(4n+4) .box:after{ right: auto; left: -60px; border-left:30px solid transparent; border-right:30px solid #3c4f64;}
#catalog .layout>section:nth-of-type(4n+3) .box>.title, #catalog .layout>section:nth-of-type(4n+4) .box>.title{color: #fff;}
#catalog .layout>section:nth-of-type(4n+3) .box>.more, #catalog .layout>section:nth-of-type(4n+4) .box>.more{color: #fff;}
#catalog .layout>section:nth-of-type(4n+3) .box>.more i, #catalog .layout>section:nth-of-type(4n+4) .box>.more i{ background: none; border-color: #fff; }
#catalog .layout>section:nth-of-type(4n+3) .img, #catalog .layout>section:nth-of-type(4n+4) .img{float: left;}



#products{margin: 0 auto; position: relative;z-index: 90;}
#products .wrap{margin: 0 auto; max-width: 1460px; padding: 100px 0 200px 0; }
#products .title{text-align: center;margin: 0 auto; padding: 30px 0;}
#products .title>h3{display: block;font-size: 5rem;}
#products .type{margin: 0 auto; padding: 30px 0 15px 0;}
#products .type>.theme{display: inline-block; float: left;  width: 70px; color: #333; }
#products .type>.theme>h3{ position: relative; display: inline-block; font-size: 2rem;}
#products .type>.theme>h3:after{position: absolute;z-index: 12; right:-22px;top:50%; transform: translateY(-50%); content: '：';}
#products .type>.box{display: inline-block; float: left; width: calc(100% - 80px); }
#products .type>.box>ul{ display: block; }
#products .type>.box>ul>li{display: inline-block; margin-right: 30px; margin-top: 2px;}
#products .type>.box>ul>li>a{ position: relative; display: inline-flex; align-items: center; align-content: center; }
#products .type>.box>ul>li>a>i{display: inline-block; font-size: 2.4rem; margin-right: 5px;}
#products .type>.box>ul>li>a>span{display: inline-block; font-size: 1.8rem; }
#products .type>.box>ul>li>a:after{ display: none; position: absolute;z-index: 1; left: 0;top: 50%; margin-top: -8px; width: 18px; height: 18px; box-sizing: border-box; border: 1px solid #aaa; border-radius: 100%; content: '';transition: all .35s;}
#products .type>.box>ul>li>a:hover:after{border-color: #12479b;}
#products .type>.box>ul>li.active a{color: #12479b;}
#products .series{margin: 0 auto; padding: 15px 0 30px 0; border-top: 1px solid #ddd;}


#products .layout{ position: relative; margin: 0 auto; overflow: hidden; padding: 50px 0;}
#products .layout>.item{ margin: 0 auto 50px auto;}
#products .layout>.item>.title{font-size: 3rem; text-align: left;margin: 0 auto; padding: 10px 0;}
#products .layout .lists{margin: 0 auto; padding: 10px 0;}
#products .layout .lists>ul>li{display: block; float: left; width: 22.75%; margin-right: 3%; margin-bottom: 3%;}
#products .layout .lists>ul>li:nth-child(4n){margin-right: 0;}
#products .layout .lists>ul>li>a{display: block;}
#products .layout .lists>ul>li>a>.img{border: 1px solid #e6e6e6; background: #fff; box-sizing: border-box;padding: 40px; text-align: center; position: relative; margin: 0 auto;}
#products .layout .lists>ul>li>a>.img:after{position: absolute;z-index: 1; left: 50%;top: 50%;width: 10px;height: 10px; background: rgba(18,71,155,.3); opacity: 0; transform: translate(-50%,-50%); content: ''; transition: all .35s;}
#products .layout .lists>ul>li>a>.img>img{ height: 100%;width: auto; object-fit: cover;}
#products .layout .lists>ul>li>a>.tit{ text-align: center; font-size: 1.6rem; color: #333; height: 45px; line-height: 45px; padding: 0 10px; overflow: hidden;text-overflow:ellipsis; white-space: nowrap; transition: all .35s;}
#products .layout .lists>ul>li>a:hover .tit{color: #12479b;}
#products .layout .lists>ul>li>a:hover .img:after{ width: 100%;height: 100%;opacity: 1;}
#products .layout .back{text-align: center;margin: 0 auto;padding: 50px 0;}
#products .layout .back>a{display: inline-block; border: 1px solid #ddd; border-radius: 30px; padding: 10px 50px; font-size: 1.6rem; transition: all .35s;}
#products .layout .back>a:hover{background: #12479b; border-color: #12479b; color: #fff; transform: translateY(-8px);}





#products .view{margin: 0 auto;}
#products .view>.title{ display: none; text-align: center;font-size: 2.4rem; color: #12479b;}
#products .view>.introduce{margin: 0 auto; position: relative;}
#products .view>.introduce>.focus{ position: relative; z-index: 2;  width: 43%;max-width: 600px; box-sizing: border-box;}
#products .view>.introduce>.focus .show{ position:relative; display: block; margin:0 auto; padding: 50px; background: #fff; box-shadow: 5px 5px 16px rgba(0,0,0,.04);  box-sizing: border-box; }
#products .view>.introduce>.focus .show .swiper{width:100%; height:100%; margin: 0 auto;box-sizing: border-box;overflow: hidden; }
#products .view>.introduce>.focus .show .swiper-slide{ opacity: 0!important; text-align: center; margin: 0 auto;}
#products .view>.introduce>.focus .show .swiper-slide-active{opacity: 1!important;}
#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:#12479b;}
#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: #12479b; }
#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:2px solid #12479b!important;}
#products .view>.introduce>.focus .thumbs>.swiper .swiper-slide{width:71px!important; height:71px; background: #fff; box-sizing: border-box; border: 2px 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{ position: relative;z-index: 30; width: 52%; min-height: 800px; box-sizing: border-box;padding: 80px 120px; text-align: left;}
#products .view>.introduce>.info>.title{ text-align: left; padding-bottom: 20px;  border-bottom: 1px solid #ddd;}
#products .view>.introduce>.info>.title>h3{font-size: 6rem; font-weight: bold; color: #12479b;}
#products .view>.introduce>.info>.title>span{font-size: 3rem; color: #666;}
#products .view>.introduce>.info>.intro{display: block; font-size: 1.6rem; line-height: 3rem; color: #666;padding: 30px 0;}
#products .view>.introduce>.info .button{ text-align: left; padding: 40px 0;}
#products .view>.introduce>.info .button>a{display:inline-flex; float: left; align-items: center; align-content: center; justify-content: center; border: 2px solid #12479b; border-radius: 50px; text-align: center;  color: #12479b; margin-right: 10px; overflow: hidden;  height: 46px; line-height: 46px; padding: 0 36px; transition: all .35s;}
#products .view>.introduce>.info .button>a>i{display: inline-block;font-size: 3rem;}
#products .view>.introduce>.info .button>a>span{display: inline-block;font-size: 1.6rem; font-weight: bold;}
#products .view>.introduce>.info .button>a.mail{width: 70px; padding: 0; text-align: center;background: #12479b;color: #fff; border-color: #12479b;}
#products .view>.introduce>.info .button>a.mail>span{display: none; font-weight: normal;}
#products .view>.introduce>.info .button>a:hover{ background:#12479b; border-color: #12479b; color: #fff;}
#products .view>.introduce>.info .button>a.mail:hover{background: none; color: #12479b;}

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


    #catalog .layout>section .box>.title { font-size: 2.8rem; }


}

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

    #products .title>h3 { font-size: 4.2rem;}


}




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

    #catalog .wrap{padding: 100px 0 300px 0; }

    #catalog .layout>section .box {padding: 40px;}
    #catalog .layout>section .box:after { top: 30px; right: -24px;border-top: 24px solid transparent; border-bottom: 24px solid transparent; border-left: 24px solid #eee;}
    #catalog .layout>section .box>.title { font-size: 2.4rem; }
    #catalog .layout>section .box>.more { font-size: 1.4rem; }
    #catalog .layout>section .box>.more i {width: 24px; height: 24px; line-height: 21px;}




    #products .view>.introduce>.info{padding: 50px 80px 0 80px; min-height: auto;}



}


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

    #catalog .layout>section .box>.title { font-size: 2.2rem; }


    #products .title>h3 { font-size: 3.6rem;}



    #products .type>.theme>h3{ font-size: 1.8rem;}
    #products .type>.box>ul>li>a>i{font-size: 2.2rem;}
    #products .type>.box>ul>li>a>span{font-size: 1.6rem; }


    #products .layout>.item>.title { font-size: 2.8rem; }
    #products .layout .lists>ul>li { width: 31.33%;}
    #products .layout .lists>ul>li:nth-child(4n) { margin-right: 3%;}
    #products .layout .lists>ul>li:nth-child(3n) { margin-right: 0;}

    #products .layout .lists>ul>li>a>.img { padding: 30px 40px; }


    #products .view>.introduce>.focus{width: 50%;max-width: 100%;}
    #products .view>.introduce>.info{width: 46%;}
    #products .view>.introduce>.info>.title>h3 { font-size: 5.6rem;}
    #products .view>.introduce>.info>.title>span {font-size: 2.4rem;}

}

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


    #catalog .layout>section{ display: block; float: none; width: 100%;}
    #catalog .layout>section .box>.title { font-size: 3rem; }


    #catalog .layout>section:nth-of-type(odd) .box{ left: 0; right: auto; }
    #catalog .layout>section:nth-of-type(odd) .box:after{top: 30px; left: auto; right: -60px; border-top:30px solid transparent;border-bottom:30px solid transparent;border-left:30px solid #eee;border-right:30px solid transparent;}
    #catalog .layout>section:nth-of-type(odd)>a {background: #eee;}
    #catalog .layout>section:nth-of-type(odd) .box>.title{color: #333;}
    #catalog .layout>section:nth-of-type(odd) .box>.more{ color: #12479b;}
    #catalog .layout>section:nth-of-type(odd) .box>.more i{background: #12479b; border-color: #12479b;}
    #catalog .layout>section:nth-of-type(odd) .img{float: right;}

    #catalog .layout>section:nth-of-type(even)>a {background: #3c4f64;}
    #catalog .layout>section:nth-of-type(even) .box{ left: auto;right: 0;}
    #catalog .layout>section:nth-of-type(even) .box:after{ right: auto; left: -60px; border-top:30px solid transparent; border-left:30px solid transparent; border-bottom: 30px solid transparent; border-right:30px solid #3c4f64;}
    #catalog .layout>section:nth-of-type(even) .box>.title{color: #fff;}
    #catalog .layout>section:nth-of-type(even) .box>.more{color: #fff;}
    #catalog .layout>section:nth-of-type(even) .box>.more i{ background: none; border-color: #fff; }
    #catalog .layout>section:nth-of-type(even) .img{float: left;}


}


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


    #products .type>.box>ul>li{ float: left; width: 25%; margin-right: 0; }

    #products .view>.introduce>.info{padding: 30px 50px;}
    #products .view>.introduce>.info>.title>h3 { font-size: 4.8rem;}
    #products .view>.introduce>.info>.title>span {font-size: 2rem;}



}


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


    #catalog .layout>section .box>.title { font-size: 2.8rem; }
    #catalog .layout>.content>.title{ font-size: 3rem;}



    #products .title>h3 { font-size: 2.8rem;}

    #products .type>.theme>h3{ font-size: 1.6rem;}

    #products .type>.box>ul>li>a>i{font-size: 2rem;}
    #products .type>.box>ul>li>a>span{font-size: 1.4rem; }


    #products .layout>.item>.title { font-size: 2rem;}
    #products .layout .lists>ul>li { width: 48%; margin-right: 0;}
    #products .layout .lists>ul>li:nth-child(4n) { margin-right: 0;}
    #products .layout .lists>ul>li:nth-child(even) { float: right;}


    #products .view>.title{display: block;}
    #products .view>.introduce>.focus { width: 100%; float: none;}
    #products .view>.introduce>.focus .show .swiper-pagination { display: block; bottom: 0; }
    #products .view>.introduce>.focus .thumbs{opacity: 0!important; height: 0!important; margin: 0 auto!important;}
    #products .view>.introduce>.info { width: 100%; float: none;padding: 0 30px; }
    #products .view>.introduce>.info>.title{display: none;}


}

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

    #products .type>.box>ul>li{ width: 33.33%;}

}

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



    #catalog .layout>section .box { position: relative; width: 100%;height: auto; padding: 50px;}
    #catalog .layout>section .box:after { top: auto!important;   left: 50%!important;   right: auto!important;  bottom: -58px!important;  transform: translateX(-50%); border-top: 30px solid #eee!important; border-bottom: 30px solid transparent!important; border-left: 30px solid transparent!important; border-right: 30px solid transparent!important; }
    #catalog .layout>section:nth-of-type(even) .box:after{ border-top: 30px solid #3c4f64!important;}
    #catalog .layout>section .box>.title {  padding: 20px 0; font-size: 3.2rem; }
    #catalog .layout>section .box>.more {  position: relative; width: 100%; text-align: right;right: 0; bottom: 0;}
    #catalog .layout>section .img { width: 100%; float: none!important;}

    #products .wrap { padding: 0 0 100px 0;}
    #products .title { padding-top: 100px;}
    #products .title>h3 { font-size: 2.4rem;}

    #products .type{padding: 15px 0;}
    #products .type>.theme{display: block; float: none;  width: 100%; }
    #products .type>.theme>h3:after{display: none;  }
    #products .type>.box{display: block; float: none; width: 100%; padding-top: 5px; }
    #products .type>.box>ul>li{ width: 50%;}
    #products .series{padding: 15px 0;}




    #products .layout .lists>ul>li>a>.tit { font-size: 1.4rem; }








}

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

    #catalog .wrap {  padding: 100px 0 150px 0;}

    #catalog .layout>section .box{padding: 25px;}
    #catalog .layout>section .box>.title { font-size: 2.4rem; }

    #products .title { padding-top: 50px;}
    #products .layout .lists>ul>li>a>.tit { font-size: 1.2rem; }

    #products .type>.theme>h3{ font-size: 1.5rem;}
    #products .type>.box>ul>li>a>i{font-size: 1.8rem;}
    #products .type>.box>ul>li>a>span{font-size: 1.2rem; }



}