@charset "utf-8";
/* CSS Document */





#product{margin:0 auto;}

#product>.search{position:relative; background:#fff;overflow:hidden; box-sizing:border-box; padding:70px 0; margin:0 auto;}
#product>.search>form{width:72%; max-width:600px; margin:0 auto; position:relative;}
#product>.search>form input[type="text"]{outline: medium; height:58px; line-height:58px; width:100%; padding-left:23px; padding-right: 20px; border:none; font-size:16px; border-radius:50px; box-shadow:0 0 12px rgba(183, 183, 183, 0.33); color:#666; box-sizing:border-box; overflow:hidden;}
#product>.search>form input::-webkit-input-placeholder{color:#ccc;}
#product>.search button{width: 58px; height: 58px; background: url('../img/icon_go_gray.png') no-repeat center/26px 26px; border: 0px none; outline: none; position: absolute; right: 5px; top: 0; cursor: pointer;}


#product>.catalog{width:90%; max-width:1600px; box-sizing:border-box; margin:0 auto; padding:50px 0;}
#product>.catalog>ul{margin:0 auto;}
#product>.catalog>ul>li{position:relative; display:block; min-height: 380px; background:#fff; margin-bottom:2.5%; box-shadow:0 0 12px rgba(183, 183, 183, 0.33);}
#product>.catalog>ul>li a{display: block; height: 100%; cursor: pointer;}
#product>.catalog>ul>li .img{position:absolute; z-index:99; width:45%; height: 100%; left: 0; top: 0; border-radius:0 150px 0 0; background:#fff; overflow:hidden; transition:all .35s; background-size: cover; background-position: center 70%;}
/*
#product>.catalog>ul>li .br{ position:absolute;z-index:3;left:0;top:0; width:40%; height:100%;}
#product>.catalog>ul>li .br:after{ position:absolute;z-index:2;right:-60px;top:0; width:100%;height:100%; border-radius:0 150px 0 0; background:rgba(23,97,171,.5); content:'';}
#product>.catalog>ul>li .br:before{ position:absolute;z-index:4;right:-30px;top:0; width:100%;height:100%; border-radius:0 150px 0 0; background:rgba(2,54,106,.8); content:'';}
*/
#product>.catalog>ul>li .con{width:55%; padding:45px 100px 0 100px; float:right; text-align:left; box-sizing:border-box;}
#product>.catalog>ul>li .con>.tit{ display:block; position:relative; padding-bottom:20px;}
#product>.catalog>ul>li .con>.tit:after{position:absolute;z-index:3;left:0;bottom:0;width:60px;height:3px;background:#666;content:'';}
#product>.catalog>ul>li .con>.tit>a{ display:block; color:#464646;font-size:36px;}
#product>.catalog>ul>li .con>.txt{padding:30px 0 0 0; text-align:left;}
#product>.catalog>ul>li .con>.txt>a{ position:relative; display:block;padding:5px 20px; box-sizing:border-box; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; font-size:16px;color:#333;transition:all .35s;}
#product>.catalog>ul>li .con>.txt>a:after{position:absolute;z-index:3;left:0;top:50%; margin-top:-3px; width:6px;height:6px; background:#ddd;content:'';transition:all .35s;}
#product>.catalog>ul>li .con>.txt>a:hover{ color:#026ab5;padding-left:25px;}
#product>.catalog>ul>li .con>.more{text-align:left; margin-top: 20px;}
#product>.catalog>ul>li .con>.more>a{display:inline-block; border:1px solid #eee;border-radius:100%; width:40px; height:40px; line-height:40px; font-family:Arial; font-size:34px; text-align:center;overflow:hidden; color:rgba(2,106,181,1); transition:all .35s;}
#product>.catalog>ul>li .con>.more>a:hover{transform: rotate(180deg); border:1px solid #ccc;}
#product>.catalog>ul>li:nth-child(even) .img{border-radius:150px 0 0 0; left: unset; right: 0;}
#product>.catalog>ul>li:nth-child(even) .con{float:left; padding-left:100px;}
/*
#product>.catalog>ul>li:nth-child(even) .br{left:auto; right:0;}
#product>.catalog>ul>li:nth-child(even) .br:after{left:-60px; right:auto;border-radius:150px 0 0 0;}
#product>.catalog>ul>li:nth-child(even) .br:before{left:-30px; right:auto;border-radius:150px 0 0 0;}
*/

#product>.product{width:100%; margin:0 auto;}
#product>.product>.nav{padding:50px; border-top:1px solid #eee;}
#product>.product>.nav>ul>li{ position:relative; display:inline-block; margin:0 10px; transition:all .35s;}
#product>.product>.nav>ul>li>a{ position:relative; display:block;border:1px solid #ccc;padding:15px 30px;font-size:16px; color:#555;overflow:hidden; transition:all .35s;}
#product>.product>.nav>ul>li>a:before{content:''; display:block; position:absolute; width:100%; height:200px; background:rgba(255,255,255,.0); transform:rotate(45deg); left:-80%; top:-100px; transition:all .45s ease;}
#product>.product>.nav>ul>li>a:hover{background:#026ab5;color:#fff; border:1px solid rgba(2,106,181,1);}
#product>.product>.nav>ul>li>a:hover:before{left:-60%; background:rgba(255,255,255,.16);}
#product>.product>.nav>ul>li.A>a{background:#026ab5; color:#fff;border:1px solid rgba(2,106,181,1);}
#product>.product>.nav>ul>li.A>a:before{left:-60%; background:rgba(255,255,255,.16);}
#product>.product>.nav>ul>li.A:after{ position:absolute;z-index:1;left:50%;bottom:-8px; margin-left:-8px; content:''; width: 0;height: 0;border-top: 8px solid rgba(2,106,181,1);border-right: 8px solid transparent;border-left:8px solid transparent;}

#product>.product>.container{ width:90%; max-width:1600px; margin:0 auto; padding:50px; box-sizing:border-box; text-align:left; transition:all .35s;}
#product>.product>.container li{ display:block; float:left; width:23.5%; margin-right:2%; margin-bottom:2%; border:1px solid #ddd; box-sizing:border-box; background:#fff;}
#product>.product>.container li:nth-child(4n){margin-right:0 !important;}
#product>.product>.container li>a{ display:block; position:relative; padding-bottom: 22px;}
#product>.product>.container li>a:after{position:absolute; z-index:8; left:0; top:0; width:100%; height:100%; background:rgba(216,33,40,0); content:''; transition:all .35s;}
#product>.product>.container li .tips{position:absolute; z-index:6; right:0; top:0;}
#product>.product>.container li .tips>img{ width:60px; height:auto;}
#product>.product>.container li .view{position:absolute; z-index:9; left:0; top:0; width:100%; opacity:0; padding-top:40%; text-align:center; font-size:14px; color:rgba(255,255,255,1); transition:all .35s;}
#product>.product>.container li .view .icon{ position:relative; display:block; margin:0px auto 10px auto; width:58px; height:58px; border:1px solid rgba(255,255,255,1); border-radius:100%; text-align:center; overflow:hidden;}
#product>.product>.container li .view .icon>img{ position:absolute; left:-100%; top:0; width:100%; height:auto; margin:0px auto; transition:all .35s;}
#product>.product>.container li .img{display:block; width:100%; height: 0; padding-bottom: 100%; text-align:center; overflow:hidden;}
#product>.product>.container li .img>img{ width:100%; height:auto; margin:0 auto; transition:all .8s;}
#product>.product>.container li .name{ font-size:15px; text-align:center; padding:0 20px; margin-top: 20px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; -webkit-box-pack: center; overflow: hidden; color: #464646; height: 42px; line-height: 1.4;}
#product>.product>.container li>a:hover:after{ background:rgba(2,106,181,.6);}
#product>.product>.container li>a:hover .view{ opacity:1;}
#product>.product>.container li>a:hover .view .icon>img{ left:0;}
#product>.product>.container li>a:hover .img>img{transform:scale(1.2);}


#product>.view{margin:0 auto;}
#product>.view .path-back{ position:relative; margin:0 auto;padding-top:90px; background:#1761ab url("../img/product_path_bg.jpg") no-repeat; background-position:right bottom;}
#product>.view .path-back>.path{text-align:left; color:rgba(255,255,255,.7); height:120px; line-height:120px; box-sizing:border-box; padding-left:300px; font-size:16px;}
#product>.view .path-back>.path>a{display:inline-block; color:rgba(255,255,255,.7); transition:all .35s;}
#product>.view .path-back>.path>a>img{height:18px; width:auto; margin-right:6px;}
#product>.view .path-back>.path>a:hover{color:rgba(255,255,255,1); text-decoration:underline;}
#product>.view .path-back>.back{ position:absolute;z-index:3;left:-10px;top:90px; text-align:center; height:120px;transform: skewX(-10deg);}
#product>.view .path-back>.back>a{ display:block;padding:0 90px;font-size:22px; line-height:120px; color:#fff; background:#022347; transition:all .35s; }
#product>.view .path-back>.back>a>img{ height:30px; width:auto;margin-right:10px;}
#product>.view .path-back>.back>a:hover{ background:#004897;}
#product>.view .title{ padding-top:60px; font-size:30px; color:#222; background:#fff;margin:0 auto;}
#product>.view .focus{ width:100%; height:800px; margin:0 auto; padding-bottom:40px; background:#fff;}
#product>.view .focus>.wrap{ width:86%; max-width:1200px; margin:0 auto;}
#product>.view .focus .bimg{ position:relative; width:100%; height:700px;}
#product>.view .focus .bimg .swiper-wrapper:hover{z-index:11; position:relative;}
#product>.view .focus .bimg .swiper-slide>img{max-width:90%; max-height:90%; display: inline-block; vertical-align: middle;}
#product>.view .focus .bimg .swiper-slide:after{content: ''; display: inline-block; height: 100%; vertical-align: middle; width: 0; font-size: 0;}
#product>.view .focus .bimg .swiper-container{width:100%; height:100%;}
#product>.view .focus .bimg .arrow-left{ position:absolute; z-index:99; left:0; top:50%; margin-top:-30px; width:60px; height:60px; background:url("../img/icon_arrow_noline_left_black.png") no-repeat; background-position:50% 50%; background-size:100% auto;cursor:pointer; opacity:.2; transition:all .35s;}
#product>.view .focus .bimg .arrow-right{ position:absolute; z-index:99; right:0; top:50%; margin-top:-30px; width:60px; height:60px; background:url("../img/icon_arrow_noline_right_black.png") no-repeat; background-position:50% 50%; background-size:100% auto; cursor:pointer; opacity:.2; transition:all .35s;}
#product>.view .focus .bimg .arrow-left:hover, #product>.view .focus .bimg .arrow-right:hover{opacity:.8;}
#product>.view .focus .img{width:100%; margin:10px auto;}
#product>.view .focus .img .swiper-container{width:321px; height:80px; margin:auto; text-align:center;}
#product>.view .focus .img .swiper-slide{width:71px; height:71px;}
#product>.view .focus .img img{padding:1px; width:100%; height:100%; display:block; border:1px solid transparent; cursor:pointer; box-sizing:border-box;}
#product>.view .focus .img .active-nav img{padding:0; border:1px solid #026ab5 !important;}
#product>.view .focus .img .active-nav{position:relative; z-index:11;}
#product>.view .tags{ width:86%; max-width:1200px; margin:0 auto;padding:100px 0;}
#product>.view .tags>.tag-tit{margin:0 auto; box-sizing:border-box; border:2px solid #777; padding:0 20px; border-radius:10px;}
#product>.view .tags>.tag-tit li{position:relative; display:inline-block; float:left; width:33.33%; box-sizing:border-box;}
#product>.view .tags>.tag-tit li>a{ display:block; padding:20px 30px; color:#464646; font-size:18px;}
#product>.view .tags>.tag-tit li>a>span{ display:inline-block;vertical-align: middle; font-size:30px; margin-right:10px;}
#product>.view .tags>.tag-tit li>a.A{background:#777; color:#fff; border-radius:8px;}
#product>.view .tags>.tag-con{display:block;text-align:left;}
#product>.view .tags>.tag-con .con{padding:50px 0; display:none;}
#product>.view .tags>.tag-con .tit{display:none;}
#product>.view .tags>.tag-con .con>.tit_s{font-size:18px;font-weight:bold;color:#026ab5;}
#product>.view .tags>.tag-con .con>.txt_s{ font-size:16px; line-height:30px; color:#333; padding:20px 0 50px 0;}
#product>.view .tags>.tag-con .con>.txt_s img{max-width:100%; height:auto;}
#product>.view .tags>.tag-con .con>.list_s{display:block; text-align:left;}
#product>.view .tags>.tag-con .con>.list_s>a{display:block; float:left;width:50%;font-size:16px; color:#333;padding:10px 0; padding-right:20px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; box-sizing:border-box; transition:all .35s;}
#product>.view .tags>.tag-con .con>.list_s>a:hover{ color:#026ab5; text-decoration:underline;}
#product>.view .tags>.tag-con .con>.list_s>a img{height:60px; width:auto; margin-right:20px; border:1px solid #ddd;padding:10px;}
#product>.view .tags>.tag-con .con>.pdf>a img{ height:50px; border:0 !important;}
#product>.view .tags>.tag-con .con table{width:100%; border-left:1px solid #ddd; border-top:1px solid #ddd; box-sizing:border-box; border-collapse:collapse;}
#product>.view .tags>.tag-con .con table td{border-right:1px solid #ddd; border-bottom:1px solid #ddd; font-size:15px; padding:5px; transition:all .25s;}
#product>.view .tags>.tag-con .con table td p,#product>.view .tags>.tag-con .con table td div{margin:0;}
#product>.view .tags>.tag-con .con table td:hover{background:#eee;}


@media only screen and (max-width: 1650px){
  #product>.catalog>ul>li .img{position:absolute;z-index:99; left:0; top:0; width:45%; height:100%;}
}

@media only screen and (max-width: 1500px){
  #product>.catalog>ul>li .img{ border-radius: 0 !important;}

  #product>.catalog>ul>li .img img{width:100%; height:100%;}
  #product>.product>.nav>ul>li>a{padding:15px 20px;}

}

@media only screen and (max-width: 1200px){
  #product>.catalog>ul>li .con{ padding-left:150px;}
  #product>.catalog>ul>li .con>.tit>a{ font-size:30px;}
  #product>.catalog>ul>li .con>.txt{padding:20px 0;}
  #product>.catalog>ul>li .con>.txt>a{ font-size:14px;}
  #product>.catalog>ul>li .con>.more>a{width:32px; height:32px; line-height:32px; font-size:28px;}
  #product>.product>.nav{padding:0;}
  #product>.product>.nav>ul>li{ width:33.33%; float:left;margin:0 !important;}
  #product>.product>.nav>ul>li>a{ padding:15px 0; margin-left:-1px;margin-top:-1px;}
  #product>.product>.nav>ul>li.A:after{opacity:0;}
  #product>.product>.container{padding:50px 0;}
  #product>.product>.container li{ width:32%;}
  #product>.product>.container li:nth-child(3n){margin-right:0 !important;}
  #product>.product>.container li:nth-child(4n){margin-right:2% !important;}

  #product>.view .tags>.tag-con .tableWap{width:100%; overflow:scroll;}
  #product>.view .tags>.tag-con .tableWap table th, #product>.view .tags>.tag-con .tableWap table td{white-space:nowrap; font-size:12px;}
}

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

  #product>.catalog>ul>li .img{ position:relative; width:100%; float:none; border-radius:0;}
  #product>.catalog>ul>li .img img{position:relative; width:100%;height:auto;margin-left:0;}
  #product>.catalog>ul>li .br{ position:relative;z-index:999; width:100%;}
  #product>.catalog>ul>li .br:after{ position:absolute;z-index:2;right:0;top:0; width:100%;height:10px; border-radius:0!important;}
  #product>.catalog>ul>li .br:before{ position:absolute;z-index:4;right:0;top:10px; width:100%;height:10px; border-radius:0!important;}
  #product>.catalog>ul>li .con{ width:100%;padding:50px; float:none; text-align:left;}
  #product>.catalog>ul>li:nth-child(even) .br{left:0; right:auto;}
  #product>.catalog>ul>li:nth-child(even) .br:after{left:0; right:auto; border-radius:0!important;}
  #product>.catalog>ul>li:nth-child(even) .br:before{left:0; right:auto; border-radius:0!important;}
  #product>.catalog>ul>li:nth-child(even) .img{float:none;border-radius:0!important;}
  #product>.catalog>ul>li:nth-child(even) .con{float:none;padding-left:50px;}


  #product>.view .path-back>.path{height:80px; line-height:80px; padding-left:220px; font-size:12px;}
  #product>.view .path-back>.back{ height:80px;}
  #product>.view .path-back>.back>a{ padding:0 60px; font-size:20px; line-height:80px; }
  #product>.view .path-back>.back>a>img{ height:26px;}

  #product>.view .tags>.tag-tit li>a{ font-size:16px;}
  #product>.view .tags>.tag-tit li>a>span{ font-size:26px;}
  #product>.view .tags>.tag-con .con>.list_s>a{float:none;width:100%;font-size:14px;}
  #product>.view .tags>.tag-con .con>.list_s>a img{height:40px; }
  #product>.view .tags>.tag-con .con>.pdf>a img{ height:40px;}

}
@media only screen and (max-width: 800px){
  #product>.product>.container li{ width:49%;margin-right:0 !important;}
  #product>.product>.container li:nth-child(even){float:right;}
  #product>.product>.container li:nth-child(3n){margin-right:0 !important;}
  #product>.product>.container li:nth-child(4n){margin-right:0 !important;}
  #product>.view .path-back{ padding-top:60px;}
  #product>.view .path-back>.back{top:60px;}

  #product>.view .title{ font-size:24px;}
  #product>.view .focus{height:auto;}
  #product>.view .focus .bimg{ height:auto;}


}
@media only screen and (max-width: 640px){
  #product>.search{padding:40px 0;}
  #product>.search>form input[type="text"]{height:46px; line-height:46px;}
  #product>.search>form button{height:46px; background-size: 20px; right: 0;}
  #product>.product>.nav>ul>li{width:50%;}
  #product>.view .path-back{height:60px;}
  #product>.view .path-back>.path{display:none;}
  #product>.view .path-back>.back{ height:60px;}
  #product>.view .path-back>.back>a{ padding:0 60px; font-size:16px; line-height:60px; }
  #product>.view .title{ font-size:18px;padding:50px 20px 0 20px;}
  #product>.view .tags{padding:50px 0;}
  #product>.view .tags>.tag-tit{display:none;}
  #product>.view .tags>.tag-con .con{padding-bottom:20px;}
  #product>.view .tags>.tag-con .tit{display:block; position:relative; font-size:16px;padding:10px 15px; color:#666; margin-top:-1px; border:1px solid #ddd; background:rgba(255,255,255,.6);}
  #product>.view .tags>.tag-con .tit:after{position:absolute;z-index:4; right:20px;top:50%; margin-top:-2px; width: 0;height: 0;border-top: 8px solid rgba(0,0,0,.1);border-right: 8px solid transparent;border-left:8px solid transparent; content:''; transition:all .35s;}
  #product>.view .tags>.tag-con .tit>span{ display:inline-block;vertical-align: middle; font-size:26px; margin-right:10px;}
  #product>.view .tags>.tag-con .tit-active{ background:#026ab5 !important; color:#ffffff !important;}
  #product>.view .tags>.tag-con .tit-active:after{border-top: 8px solid rgba(255,255,255,.3);transform:rotate(180deg);}
}
@media only screen and (max-width: 420px){
  #product>.catalog>ul>li .con>.tit>a{ font-size:22px;}
  #product>.catalog>ul>li .con{ padding:50px 30px;}
  #product>.catalog>ul>li:nth-child(even) .con{padding-left:30px;}
  #product>.product>.nav>ul>li>a{ font-size:14px;}
  #product>.product>.container li{ float:none!important; width:100%; margin-bottom:20px !important;}

}