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

#catalog { position: relative; padding: 100px 0; margin: 0 auto; }
#catalog>.container { margin: 0 auto; }
#catalog>.container .item { display: block; float: left; width: 50%; box-sizing: border-box; background: #F4FAFF; overflow: hidden; border-bottom: 5px solid #fff; border-right: 5px solid #fff; transition: all .35s; }
#catalog>.container .item:nth-child(2n) { border-right: 0; }
#catalog>.container .item>a { position: relative; display: block; text-align: center; box-sizing: border-box; padding: 80px 0; }
#catalog>.container .item>a>.ico { transition: all .35s; }
#catalog>.container .item>a>.ico>img { width: 140px; height: auto; }
#catalog>.container .item>a>.tit { font-size: 3rem; color: rgba(4,91,169,1); font-weight: bold; transition: all .35s; }
#catalog>.container .item>a>.more { position: absolute; z-index: 20; right: 0; bottom: -60px; width: 60px; height: 60px; line-height: 60px; color: #fff; text-align: center; transition: all .5s; }
#catalog>.container .item>a>.more>i { font-size: 3rem; transition: all .35s; }
#catalog>.container .item:hover { background: rgba(4,91,169,1); background: linear-gradient(to right bottom, rgba(4,91,169,1), rgba(50,150,212,1)); }
#catalog>.container .item>a:hover .more { bottom: 0; background: rgba(0,0,0,.8); }
#catalog>.container .item>a:hover .tit { color: #fff; transform: translateY(10px); font-weight: normal; }
#catalog>.container .item>a:hover .ico { transform: scale(1.16); }

#product { position: relative; margin: 0 auto; }
#product>.divider { position: absolute; z-index: 1; top: 0; left: 25%; width: 1px; height: 100%; box-sizing: border-box; background: #ddd; content: ''; }
#product>.container { position: relative; margin: 0 auto; }
#product>.container .prolist { position: relative; z-index: 80; top: 0; left: 0; display: block; width: 25%; box-sizing: border-box; text-align: left; }
#product>.container .prolist>ul { display: block; }
#product>.container .prolist>ul>li { position: relative; display: block; border-bottom: 1px solid #ddd; }
#product>.container .prolist>ul>li>span.on { position: absolute; z-index: 30; right: 0; top: 0; cursor: pointer; text-align: center; width: 80px; height: 120px; line-height: 120px; color: rgba(50,150,212,1); transition: all .3s; }
#product>.container .prolist>ul>li>span.on>i { font-size: 2rem; font-weight: bold; }
#product>.container .prolist>ul>li.active>span.on { color: rgba(255,255,255,1); }
#product>.container .prolist>ul>li.active>a { font-weight: bold; color: #fff; background: rgba(4,91,169,1); background: linear-gradient(to right bottom, rgba(4,91,169,1), rgba(50,150,212,1)); }
#product>.container .prolist>ul>li>a { position: relative; display: block; font-size: 1.8rem; padding: 30px 0 30px 100px; }
#product>.container .prolist>ul>li>a>img { display: inline-block; vertical-align: center; height: 60px; width: auto; margin-right: 10px; border-radius: 10%; }
#product>.container .prolist>ul>li>div.show { display: block; }
#product>.container .prolist>ul>li>div { display: none; padding: 30px 0 30px 100px; background: #f7f7f7; }
#product>.container .prolist>ul>li>div>a { position: relative; display: block; padding: 20px 15px; font-size: 1.6rem; transition: all .35s; }
#product>.container .prolist>ul>li>div>a:after { position: absolute; z-index: 5; left: 0; top: 50%; margin-top: -3px; width: 6px; height: 6px; border-radius: 100%; border: 1px solid transparent; background: rgba(4,91,169,1); content: ''; transition: all .35s; }
#product>.container .prolist>ul>li>div>a:hover:after { background: none; border: 1px solid rgba(4,91,169,1); }

#product>.container .w100 { width: 100% !important; }
#product>.container .display { width: 75%; box-sizing: border-box; padding: 0 100px; }
#product>.container .display>.type { text-align: left; font-size: 2.4rem; font-weight: bold; padding: 50px 0 20px 0; color: rgba(4,91,169,1); border-bottom: 1px solid #ddd; }
#product>.container .display>.type>a { display: inline-block; color: rgba(4,91,169,1); }
#product>.container .display>.list { text-align: left; padding: 50px 0; }
#product>.container .display>.list>ul { margin: 0 auto; }
#product>.container .display>.list>ul>li { display: block; float: left; width: 31.33%; margin-right: 3%; margin-bottom: 3%; box-sizing: border-box; border: 1px solid #ddd; }
#product>.container .display>.list>ul>li:nth-child(3n) { margin-right: 0; }
#product>.container .display>.list>ul>li>a { position: relative; display: block; }
#product>.container .display>.list>ul>li>a:after { position: absolute; z-index: 32; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; background: rgba(4,91,169,0); content: ''; transition: all .35s; }
#product>.container .display>.list>ul>li .img { text-align: center; overflow: hidden; }
#product>.container .display>.list>ul>li .img>img { width: 100%; height: auto; transition: 1s; }
#product>.container .display>.list>ul>li .tit { text-align: center; font-size: 1.6rem; padding: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#product>.container .display>.list>ul>li:hover .img>img { transform: scale(1.1); }
#product>.container .display>.list>ul>li:hover a:after { opacity: 1; }

#product>.keyword { text-align: center; margin: 0 auto; padding: 50px 0; font-size: 1.4rem; color: #666; }
#product>.keyword>span { display: inline-block; font-size: 1.6rem; font-weight: bold; color: rgba(4,91,169,1); }

#product>.container .display>.list>ul>li .tit>em.searHeight { color: rgba(50,150,212,1); font-style: normal; text-decoration: none; }


#product>.path { padding: 120px 0 30px 0; background: #f7f7f7; font-size: 1.4rem; color: #999; }
#product>.path>.route { width: 70%; box-sizing: border-box; padding-left: 4%; }
#product>.path>.route a { display: inline-block; color: #999; transition: all .35s; }
#product>.path>.route a:hover { color: rgba(4,91,169,1); }
#product>.path>.back { width: 30%; box-sizing: border-box; padding-right: 4%; text-align: right; }
#product>.path>.back>a { display: inline-block; padding: 10px 30px; font-size: 1.6rem; color: rgba(50,150,212,1); border: 2px solid rgba(50,150,212,1); border-radius: 5px; transition: all .35s; }
#product>.path>.back>a:hover { background: rgba(50,150,212,1); color: #fff; }

#product>.view { margin: 0 auto; padding: 50px 0; }
#product>.view .title { text-align: center; font-size: 4rem; color: #333; padding: 30px 0; margin: 0 auto; }
#product>.view .focus { position: relative; width: 60%; margin: 0 auto; }
#product>.view .focus .swiper-slide { text-align: center; }
#product>.view .focus .swiper-slide:after { position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background: url("../img/logo.png") no-repeat; background-position: 50% 50%; background-size: auto; -webkit-filter: grayscale(100%); opacity: .1; content: ''; }
#product>.view .focus .swiper-slide>img { max-width: 100%; height: auto; text-align: center; }
#product>.view .focus .button-prev { position: absolute; z-index: 3; left: 0; top: 50%; }
#product>.view .focus .button-next { position: absolute; z-index: 3; right: 0; top: 50%; }
#product>.view .focus .button-prev>i, #product>.view .focus .button-next>i { font-size: 4rem; cursor: pointer; }
#product>.view .focus .swiper-button-disabled { opacity: .2; }
#product>.view .focus .swiper-pagination-bullet-active { background: rgba(4,91,169,1) !important; }

#product>.view .tags { box-sizing: border-box; margin: 0 auto; padding-top: 50px; }
#product>.view .tags .tab-nav { text-align: left; background: #f7f7f7; padding: 0 30px; }
#product>.view .tags .tab-nav>ul { width: 86%; max-width: 1280px; margin: 0 auto; }
#product>.view .tags .tab-nav>ul>li { position: relative; display: inline-block; vertical-align: top; padding: 20px 50px; transition: all .35s; }
#product>.view .tags .tab-nav>ul>li>a { font-size: 1.8rem; font-weight: bold; color: #333; transition: all .35s; }
#product>.view .tags .tab-nav>ul>li.active:after { width: 100%; }
#product>.view .tags .tab-nav>ul>li.active:before { opacity: 1; }
#product>.view .tags .tab-nav>ul>li.active { background: rgba(4,91,169,1); }
#product>.view .tags .tab-nav>ul>li.active a { color: rgba(255,255,255,1); }
#product>.view .tags .tab-box { width: 86%; max-width: 1280px; margin: 0 auto; padding: 50px 0; }
#product>.view .tags .tab-box>.tab-item { display: none; text-align: left; }
#product>.view .tags .tab-box>.current { display: block; }
#product>.view .tags .tab-box>.tab-item>.tit { display: none; }
#product>.view .tags .tab-box>.tab-item>.con { padding: 20px 0; font-size: 1.6rem; line-height: 2.8rem; color: #666; }
#product>.view .tags .tab-box>.tab-item>.con table { box-sizing: border-box; width: 100%; border: 1px solid #ddd; }
#product>.view .tags .tab-box>.tab-item>.con table td { border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; color: #666; font-size: 1.6rem; padding: 5px; }
#product>.view .tags .tab-box>.tab-item>.con img { max-width: 100%; height: auto; }
#product>.view .back { display: none; box-sizing: border-box; text-align: center; margin: 0 auto; padding-top: 20px; }
#product>.view .back>a { display: block; padding: 10px 0; font-size: 1.6rem; color: rgba(50,150,212,1); border: 2px solid rgba(50,150,212,1); border-radius: 5px; transition: all .35s; }
#product>.view .back>a:hover { background: rgba(50,150,212,1); color: #fff; }


@media only screen and (max-width: 1520px) {
#product>.divider { left: 28%; }
#product>.container .prolist { width: 28%; }
#product>.container .display { width: 72%; }
}

@media only screen and (max-width: 1360px) {
#catalog>.container .item>a { padding: 60px 0; }
#catalog>.container .item>a>.ico>img { width: 120px; }

#product>.divider { left: 30%; }
#product>.container .prolist { width: 30%; }
#product>.container .prolist>ul>li>a { font-size: 1.6rem; }
#product>.container .prolist>ul>li>a>img { height: 54px; }
#product>.container .prolist>ul>li>span.on { width: 70px; height: 114px; line-height: 114px; }
#product>.container .prolist>ul>li>span.on>i { font-size: 1.8rem; }
#product>.container .prolist>ul>li>div>a { font-size: 1.4rem; }
#product>.container .display { width: 70%; padding: 0 80px; }
#product>.container .display>.list>ul>li .tit { font-size: 1.4rem; }
}

@media only screen and (max-width: 1280px) {
#catalog>.container .item>a>.tit { font-size: 2.4rem; }
#catalog>.container .item>a>.more { bottom: -40px; width: 40px; height: 40px; line-height: 40px; }
#catalog>.container .item>a>.more>i { font-size: 2.4rem; }

#product>.divider { display: none; }
#product>.container .prolist { float: none; width: 100%; background: #f7f7f7; }
#product>.container .prolist>ul>li { position: relative; float: left; width: 20%; background: #fff; border-right: 1px solid #ddd; }
#product>.container .prolist>ul>li>span.on { display: none; }
#product>.container .prolist>ul>li>a { font-size: 1.4rem; padding: 20px; text-align: center; }
#product>.container .prolist>ul>li>a>img { display: block; height: 60px; margin: 0 auto 10px auto; }
#product>.container .prolist>ul>li>div { position: absolute; z-index: 80; left: 0; padding: 30px; background: rgba(50,150,212,1); }
#product>.container .prolist>ul>li>div.show { display: none; }

#product>.container .display { float: none; width: 100%; padding: 0 40px; }
#product>.container .display>.type { font-size: 2rem; }

#product>.view .focus .swiper-slide:after { background-size: 62% auto; }

#product>.view .tags .tab-nav>ul>li { padding: 20px 30px; }
#product>.view .tags .tab-nav>ul>li>a { font-size: 1.6rem; }
#product>.view .tags .tab-box>.tab-item>.con { font-size: 1.4rem; line-height: 2.4rem; }
}

@media only screen and (max-width: 1080px) {
#catalog>.container .item>a { padding: 50px 0; text-align: center; }
#catalog>.container .item>a>.tit { padding-left: 0; }

#catalog>.container .item>a:hover .ico { transform: scale(1.1); }
}

@media only screen and (max-width: 980px) {
#catalog { padding: 60px 0; }
#catalog>.container .item>a>.tit { font-size: 2rem; }

#product>.container .prolist>ul>li { width: 33.33%; }
#product>.container .display>.list>ul>li { width: 48%; margin-right: 0; margin-bottom: 4%; }
#product>.container .display>.list>ul>li:nth-child(even) { float: right; }

#product>.view .title { font-size: 3rem; }
#product>.view .focus { width: 100%; }
#product>.view .tags { padding: 0; }
#product>.view .tags .tab-nav { display: none; }
#product>.view .tags .tab-box { width: 100%; max-width: inherit; }
#product>.view .tags .tab-box>.tab-item { display: block; }
#product>.view .tags .tab-box>.tab-item>.tit { position: relative; display: block; box-sizing: border-box; border-bottom: 1px solid #eee; cursor: pointer; font-size: 1.6rem; padding: 20px 0 20px 80px; }
#product>.view .tags .tab-box>.tab-item>.tit:after { position: absolute; z-index: 1; left: 60px; top: 50%; margin-top: -8px; width: 3px; height: 16px; background: rgba(4,91,169,1); content: ''; }
#product>.view .tags .tab-box>.tab-item:first-child>.tit { border-top: 1px solid #eee; }
#product>.view .tags .tab-box>.tab-item>.tit>i { position: absolute; z-index: 10; right: 80px; top: 50%; margin-top: -10px; width: 20px; height: 20px; line-height: 20px; font-size: 1.8rem; color: #ccc; margin-right: 10px; transition: all .35s; }
#product>.view .tags .tab-box>.tab-item>.tit.active { background: #F4FAFF; color: rgba(4,91,169,1); }
#product>.view .tags .tab-box>.tab-item>.tit.active>i { transform: rotate(180deg); }
#product>.view .tags .tab-box>.tab-item>.con { /*display: none;*/ padding: 50px 80px; }
#product>.view .tags .tab-box>.tab-item>.con table td { font-size: 1.4rem; }
#product>.view .back { display: block; }
}

@media only screen and (max-width: 780px) {
#catalog>.container .item>a>.tit { font-size: 1.8rem; }
}

@media only screen and (max-width: 640px) {
#catalog { padding: 30px 0; }
#catalog>.container .item>a { padding: 30px 0; }
#catalog>.container .item>a>.tit { font-size: 1.3rem; font-weight: normal; }

#product>.container .display { padding: 0 20px; }
#product>.container .display>.list>ul>li { width: 100%; float: none; }
#product>.container .display>.list>ul>li:nth-child(even) { float: none; }

#product>.view .tags .tab-box>.tab-item>.tit { padding: 20px 0 20px 60px; }
#product>.view .tags .tab-box>.tab-item>.tit:after { left: 45px; }
#product>.view .tags .tab-box>.tab-item>.tit>i { right: 60px; }
#product>.view .tags .tab-box>.tab-item>.con { /*display: none;*/ padding: 50px 60px; }

#product>.view .tags .tab-box>.tab-item>.con { font-size: 1.4rem; line-height: 2.4rem; }
#product>.view .tags .tab-box>.tab-item>.con table td { font-size: 1.2rem; }
}

@media only screen and (max-width: 520px) {
#catalog>.container .item>a>.tit { font-size: 1.2rem; }

#product>.container .prolist>ul>li { width: 50%; }
#product>.container .prolist>ul>li>a { font-size: 1.2rem; padding: 10px; }
#product>.container .prolist>ul>li>a>img { height: 50px; }

#product>.path>.route { width: 100%; float: none; padding: 0 7%; }
#product>.path>.back { display: none; }

#product>.view .tags .tab-box>.tab-item>.tit { padding: 20px 0 20px 40px; font-size: 1.4rem; }
#product>.view .tags .tab-box>.tab-item>.tit:after { left: 30px; }
#product>.view .tags .tab-box>.tab-item>.tit>i { right: 20px; font-size: 1.4rem; }
#product>.view .tags .tab-box>.tab-item>.con { /*display: none;*/ padding: 30px; }
}