/*-------------初始化--------------*/ @charset "utf-8"; html{font-size:625%;} body{background-color:#fff;} body,html,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd, th,td,form,object,iframe,blockquote,pre,a,abbr,address, code,img,fieldset,form,label,figure{margin:0;padding:0;} body,html,input,button,textarea{color:#333;font-family:Arial;line-height:1.5; font-size: 16px;} article,aside,figcaption,figure,footer,header,main,nav,section{display:block;} h1{font-size:20px;} h2{font-size:18px;} h3{font-size:16px;} h4,h5{font-size:14px;} img{max-width:100%;border:none;vertical-align:middle;} li{list-style:none;} i,em{font-style:normal;} a{color:#333;text-decoration:none;} a:focus{outline:none;} a:hover{color:var(--commonColor);text-decoration:none;} input[type="text"]:focus{outline:none;}input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;} input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="file"]>input[type="button"]::-moz-focus-inner{padding:0;border:none;} hr{margin:15px 0 15px 0;height:1px;border:none;border-top:1px dashed #c1c1c1;} a:active,select,input,textarea{outline:0 !important;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;} *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;outline:0;-ms-box-sizing:border-box;-o-box-sizing:border-box;} /*------------------------------- font start ----------------------------------*/ @font-face { font-weight: normal; font-style: normal; font-family: 'fontawesome'; src: url("../fonts/Font-Awesome/fontawesome-webfont.eot"); src: url("../fonts/Font-Awesome/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/Font-Awesome/fontawesome-webfont.woff") format("woff"), url("../fonts/Font-Awesome/fontawesome-webfont.ttf") format("truetype"), url("../fonts/Font-Awesome/fontawesome-webfont.svg#fontawesomeBold") format("svg"); font-display: fallback; font-display: swap; } @font-face { font-family: 'Work Sans-Bold'; src: url('../fonts/WorkSans-Bold.ttf'); font-display: swap; } @font-face { font-family: 'Work Sans-Regular'; src: url('../fonts/WorkSans-Regular.ttf'); font-display: swap; } @font-face { font-family: 'Roboto-Regular'; src: url('../fonts/Roboto/Roboto-Regular.ttf'); font-display: swap; } @font-face { font-family: 'Roboto-Bold'; src: url('../fonts/Roboto/Roboto-Bold.ttf'); font-display: swap; } @font-face { font-family: 'Roboto-BlackItalic'; src: url('../fonts/Roboto/ROBOTO-BLACKITALIC.TTF'); font-display: swap; } /*------------------------------- font end ----------------------------------*/ /* clear floating */ .clearfix:after,.layout:after,.sys_row:after,.web_main:after,.page_main:after,.nav_wrap .head_nav:after,.items_list ul:after,.product_items:after,.promote_list:after,.cate_items ul:after,.web_head .logo:after,.product-intro:after,.detail-tabs:after,.foot_bottom:after,.news_cell:after,.sys_row:after,.banner_navigate_button:after{clear:both;display:block;visibility:hidden;height:0;content:"";} .clearfix,.layout,.sys_row,.clearfix,.layout,.sys_row,.flex_row,.web_main,.page_main,.nav_wrap .head_nav,.items_list ul,.product_items,.promote_list,.cate_items ul,.web_head .logo,.product-intro,.detail-tabs,.foot_bottom,.sys_row,.banner_navigate_button{zoom:1;} .clear{clear:both;} .category_tab_wrap .product_items:after{display:none;} /* layout */ body{position:absolute;top:0;left:0;overflow-x:hidden;width:100%;} .layout {width: 1480px; position: relative; margin:0 auto;} .layoutLeft{width: 100%; box-sizing: border-box; padding-right: calc((100% - 1480px) / 2);} .layoutRight{width: 100%; box-sizing: border-box; padding-left: calc((100% - 1480px) / 2);} @media only screen and (max-width: 1620px) { .layout{width: 100%; padding: 0 70px; box-sizing: border-box;} .layoutLeft{padding: 0 70px 0 0;} .layoutRight{padding: 0 0 0 70px;} /* .head_layer .layout{width: 96%; margin: 0 auto;} */ } @media only screen and (max-width: 1450px) { .layout{width: 100%; padding: 0 60px; box-sizing: border-box;} .layoutLeft{padding: 0 60px 0 0;} .layoutRight{padding: 0 0 0 60px;} } @media only screen and (max-width: 1200px) { body {min-width:inherit; } } @media only screen and (max-width: 980px) { .layout{padding: 0 15px;} } /* @media (max-width:1240px){ .layout{width:95%;} } */ .z9999{z-index:9999 !important;} .hide{display:none;} /*gotop*/ .gotop{position:fixed;right:50px;bottom:50px;z-index:99999;visibility:hidden;-webkit-box-sizing:content-box;box-sizing:content-box;width:50px;height:50px;background-color:#ab2b35;background-clip:content-box;box-shadow:0 0 8px rgba(0,0,0,.2);color:#ffffff;text-align:center;text-align:center;font-size:18px;line-height:50px;opacity:0;cursor:pointer;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;-webkit-transform:translateY(100%);-moz-transform:translateY(100%);-o-transform:translateY(100%);transform:translateY(100%);-ms-transform:translateY(100%);} .gotop:hover,.gotop.active:hover{background-color:var(--commonColor);color:#fff;} .gotop.active{visibility:visible;opacity:1;-webkit-transform:none;-moz-transform:none;-o-transform:none;transform:none;-ms-transform:none;} .gotop:before,.gotop em{-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;} .gotop em{position:absolute;top:0;left:0;width:100%;color:#fff;font-size:12px;opacity:0;-webkit-transform:translateY(10px);-o-transform:translateY(10px);transform:translateY(10px);filter:alpha(opacity=0);-ms-transform:translateY(10px);} .gotop:before{display:block;content:'\f176';font-family:'fontawesome';} .gotop:hover em{opacity:1;-webkit-transform:none;-o-transform:none;transform:none;filter:alpha(opacity=100);-ms-transform:none;} .gotop:hover:before{opacity:0;-webkit-transform:translateY(-15px) scale(.5);-o-transform:translateY(-15px) scale(.5);transform:translateY(-15px) scale(.5);-ms-transform:translateY(-15px) scale(.5);filter:alpha(opacity=0);} /* transition */ .head_nav li a,.nav_wrap .head_nav li li a,.nav_wrap .head_nav li ul,.nav_wrap .head_nav li li>a:before,.head_nav b:after,.product_item figure,.gotop,.product-item .item-img img,.product_item .item_img img,.product_item .item_img a,.product_item,.product_item .item_img a:before,.product_item .item_img a:after,.product_item .item_img:after,.product-btn-wrap a,.web_head,.change-language .change-language-title a:after,.newsletter .button,.mobile-head-item .middle-show-content-wrap,.product_item figure figcaption,.foot_item a,.pages a,.head_sns li img,.side_product_item .add-friend,.side_product_item .add-friend:after,.side-product-items .btn-prev,.side-product-items .btn-next,.blog-item:after,.product-button-prev,.product-button-next,.company_subscribe .button:after {-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;-ms-transition:all .3s ease;} .head_nav>li>a:before,.head_nav>li>a:after,.icon-cate,.foot_txt_list li a:before,.web_footer .button:before {-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;} .company_subscribe .button .button_txt,.company_subscribe .button .button_ico {-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;} figcaption,img,.product_item a:after,a,.nav_wrap .nav_btn_close,.index_main .product_item figure,.foot_item.foot_nav .fot_tit:before,.foot_item.foot_nav .fot_tit:after,.feature_product_item .feature_imgbg,.feature_product_item .feature_imgpd img,.goods-may-like .navigate_button_next:before,.goods-may-like .navigate_button_prev:before,.advantage_items .advantage_item,.advantage_img:before,.feature_item .img_item img,.feature_item .feature_title,.feature_prev,.feature_next,.side-cate>li>a{-webkit-transition:all .35s ease-in-out;-o-transition:all .35s ease-in-out;transition:all .35s ease-in-out;} /* transition */ .hoverItem, .hoverItem::before, .hoverItem::after, .hoverItem .title, .hoverItem .brief, .hoverItem .pubPic, .hoverItem .pubPic::before, .pubPic img, .hoverItem .more, .hoverItem .item_icon, .hoverItem .order, .pubMore::before, .pubMore, .pubMoreBg, .hoverPic, .moreBtn, .moreBtn::before, .moreBtn::after{ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .hoverItem:hover .pubPic img, .hoverPic:hover{ -webkit-transform: scale(1.08); -moz-transform: scale(1.08); -o-transform: scale(1.08); transform: scale(1.08); } /* flex */ .flex_row,.items_list>ul{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;-o-flex-wrap:wrap;flex-wrap:wrap;} .flex_row_nowrap{-webkit-flex-wrap:nowrap;-moz-flex-wrap:nowrap;-ms-flex-wrap:nowrap;-o-flex-wrap:nowrap;flex-wrap:nowrap;} /* button */ .sys_btn{position:relative;display:inline-block;overflow:hidden;padding:.2em 2em .2em 1em;min-width:150px;border:2px solid var(--commonColor);background-color:#f9f9f9;color:#333 !important;vertical-align:middle;text-align:left;text-transform:uppercase;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.1em;font-size:22px;line-height:2;cursor:pointer;transition:all .3s ease-in-out;-webkit-transform:scale(1);-o-transform:scale(1);transform:scale(1);user-select:none;-ms-transform:scale(1);} .sys_btn:hover{background-color:var(--commonColor);color:#fff !important;} .sys_btn:after{position:absolute;top:50%;right:1.5em;margin-top:-.6em;content:'\f04b';font-size:12px;font-family:'fontawesome';line-height:1.2em;} /* placeholder */ input::-webkit-input-placeholder{color:rgba(0,0,0,.71);} input:-moz-placeholder{color:rgba(0,0,0,.71);} input::-moz-placeholder{color:rgba(0,0,0,.71);} input:-ms-input-placeholder{color:rgba(0,0,0,.71);} /* box-sizing */ .index_promote,.company_subscribe .button,.nav_wrap,.product_item .item_img{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-ms-box-sizing:content-box;-o-box-sizing:content-box;} /* font-family */ .search-btn,.side-cate li .icon-cate:before,.product-btn-wrap a:before,.mobile-head-item .title:before,.head_nav>li:after,.head_nav li b:after,.download-item .item-button:before,.faq-item .faq-title:before{display:inline-block;text-decoration:inherit;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:"fontawesome";speak:none;} .fa:before,.btn_more:after,.sys_btn:after,.head-search .search-btn:before,.swiper-button-next:before,.swiper-button-prev:before,.side-product-items .btn-prev:before,.side-product-items .btn-next:before,.product-btn-wrap .email:before,.product-btn-wrap .pdf:before,.company_subscribe .button:after{font-family:'fontawesome';} /*flex_row*/ .flex_row{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;-o-flex-wrap:wrap;flex-wrap:wrap;justify-content:space-between;-webkit-justify-content:space-between;} /* .flex{display:flex;justify-content:center;} */ .flex{ display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;flex-direction:row;} .flexColumn{ -webkit-box-orient: vertical;-webkit-box-direction: normal;-moz-box-orient: vertical;-moz-box-direction: normal;-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column; } .flexSpaceBe{ -webkit-box-pack: justify;-webkit-justify-content: space-between;-ms-flex-pack: justify;-moz-box-pack: justify;justify-content: space-between; } .flexCenter{ -webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;-moz-box-pack: center;justify-content: center; } .flexEnd{ -webkit-box-pack: end;-webkit-justify-content: flex-end;-ms-flex-pack: end;-moz-box-pack: end;justify-content: flex-end; } .flexWrap{ flex-wrap: wrap;-webkit-box-flex: wrap;-webkit-flex-wrap: wrap;-moz-box-flex: wrap;-ms-flex-wrap: wrap; } .alignCenter{ -webkit-align-items: center;-webkit-box-align: center;-ms-flex-align: center;-moz-box-align: center;align-items: center;box-align: center; } .alignBottom{ -webkit-box-align: end;-ms-flex-align: end;-moz-box-align: end;-webkit-align-items: flex-end;align-items: flex-end; } .alignTop{ -webkit-box-align: start;-ms-flex-align: start;-moz-box-align: start;-webkit-align-items: flex-start;align-items: flex-start; } /* img */ .pubPic{position: relative; width: 100%; height: 0; overflow: hidden; padding-bottom: 75%;} .pubPic img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;} .ellipsis{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} .ellipsis2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow:ellipsis;} .ellipsis3{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow:ellipsis;} .ellipsis4{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;text-overflow:ellipsis;} .ellipsis5{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 5;overflow: hidden;text-overflow:ellipsis;} .ellipsis6{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;overflow: hidden;text-overflow:ellipsis;} /*------------------------------- animation start ----------------------------------*/ .animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;} .animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;} .animated.hinge{-webkit-animation-duration:2s;animation-duration:2s;} @-webkit-keyframes fadeInLeftA{0%{opacity:0;-webkit-transform:translate3d(-30%,0,0);transform:translate3d(-30%,0,0);}100%{opacity:1;-webkit-transform:none;transform:none;}} @keyframes fadeInLeftA{0%{opacity:0;-webkit-transform:translate3d(-30%,0,0);transform:translate3d(-30%,0,0);-ms-transform:translate3d(-30%,0,0);}100%{opacity:1;-webkit-transform:none;transform:none;-ms-transform:none;}} .fadeInLeftA{-webkit-animation-name:fadeInLeftA;animation-name:fadeInLeftA;} @-webkit-keyframes fadeInUpA{0%{opacity:0;-webkit-transform:translate3d(0,30%,0);transform:translate3d(0,30%,0);}100%{opacity:1;-webkit-transform:none;transform:none;}} @keyframes fadeInUpA{0%{opacity:0;-webkit-transform:translate3d(0,30%,0);transform:translate3d(0,30%,0);-ms-transform:translate3d(0,30%,0);}100%{opacity:1;-webkit-transform:none;transform:none;-ms-transform:none;}} .fadeInUpA{-webkit-animation-name:fadeInUpA;animation-name:fadeInUpA;} @-webkit-keyframes fadeInRightA{0%{opacity:0;-webkit-transform:translate3d(30%,0,0);transform:translate3d(30%,0,0);}100%{opacity:1;-webkit-transform:none;transform:none;}} @keyframes fadeInRightA{0%{opacity:0;-webkit-transform:translate3d(30%,0,0);transform:translate3d(30%,0,0);-ms-transform:translate3d(30%,0,0);}100%{opacity:1;-webkit-transform:none;transform:none;-ms-transform:none;}} .fadeInRightA{-webkit-animation-name:fadeInRightA;animation-name:fadeInRightA;} @-webkit-keyframes fadeInDownA{0%{opacity:0;-webkit-transform:translate3d(0,-20%,0);transform:translate3d(0,-20%,0);}100%{opacity:1;-webkit-transform:none;transform:none;}} @keyframes fadeInDownA{0%{opacity:0;-webkit-transform:translate3d(0,-20%,0);transform:translate3d(0,-20%,0);-ms-transform:translate3d(0,-20%,0);}100%{opacity:1;-webkit-transform:none;transform:none;-ms-transform:none;}} .fadeInDownA{-webkit-animation-name:fadeInDownA;animation-name:fadeInDownA; }@keyframes fadeInA{0%{opacity:0;}100%{opacity:1;}} .fadeInA{-webkit-animation-name:fadeInA;animation-name:fadeInA;} @-webkit-keyframes flipInY{0%{opacity:0;-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);}60%{opacity:1;-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg);}to{-webkit-transform:perspective(400px);transform:perspective(400px);}} @keyframes flipInY{0%{opacity:0;-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);}60%{opacity:1;-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg);}to{-webkit-transform:perspective(400px);transform:perspective(400px);}} .flipInY{-webkit-backface-visibility:visible !important;backface-visibility:visible !important;-webkit-animation-name:flipInY;animation-name:flipInY;} @-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);}to{opacity:1;-webkit-transform:none;transform:none;}} @keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);}to{opacity:1;-webkit-transform:none;transform:none;}} .fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;} @keyframes pointPulse{0%,100%{transform:scale(0.9);box-shadow:0 0 0 0 rgba(255,255,255,0.2);}50%{transform:scale(1.1);box-shadow:0 0 0 5px rgba(255,255,255,0.1);}} @keyframes innerPulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.3);opacity:0.8;}} @keyframes swing{20%{-webkit-transform:rotate(40deg);-ms-transform:rotate(40deg);transform:rotate(40deg)}40%{-webkit-transform:rotate(-20deg);-ms-transform:rotate(-20deg);transform:rotate(-20deg)}60%{-webkit-transform:rotate(10deg);-ms-transform:rotate(10deg);transform:rotate(10deg)}80%{-webkit-transform:rotate(-10deg);-ms-transform:rotate(-10deg);transform:rotate(-10deg)}to{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}} .swing{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing} @keyframes pointPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(0,0,0,0.2);}50%{transform:scale(1.2);box-shadow:0 0 0 5px rgba(0,0,0,0.1);}} @keyframes innerPulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.3);opacity:0.8;}} /*------------------------------- animation end ----------------------------------*/ /*------------------------------- swiper-slide start ----------------------------------*/ .slider_banner{position:relative;overflow:hidden;z-index:98;} .swiper-container-no-flexbox .swiper-slide{float:left} .swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column} .swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box} .swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} .swiper-container-multirow>.swiper-wrapper{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap} .swiper-container-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto} .swiper-slide{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;overflow:hidden;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform} .swiper-invisible-blank-slide{visibility:hidden} .swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto} .swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:height,-webkit-transform;transition-property:height,-webkit-transform;-o-transition-property:transform,height;transition-property:transform,height;transition-property:transform,height,-webkit-transform} .swiper-container-3d{-webkit-perspective:1200px;perspective:1200px} .swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;transform-style:preserve-3d} .swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10} .swiper-container-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))} .swiper-container-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))} .swiper-container-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))} .swiper-container-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))} .swiper-container-wp8-horizontal,.swiper-container-wp8-horizontal>.swiper-wrapper{-ms-touch-action:pan-y;touch-action:pan-y} .swiper-container-wp8-vertical,.swiper-container-wp8-vertical>.swiper-wrapper{-ms-touch-action:pan-x;touch-action:pan-x} .swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:40px;height:70px;margin-top:-35px;z-index:10;cursor:pointer;opacity:0;-moz-transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;} .swiper-container:hover .swiper-button-next,.swiper-container:hover .swiper-button-prev{} .swiper-container:hover .swiper-button-prev{left:65px;} .swiper-container:hover .swiper-button-next{right:65px;} .swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{cursor:auto;pointer-events:none;opacity: 0.3;} .swiper-button-prev,.swiper-container-rtl .swiper-button-next{width:40px;height:70px;padding:20px 10px;background: rgba(0, 0, 0, .8) url(../img/public/banner-perv.png) no-repeat center center;background-size:auto;left:10px;right:auto} .swiper-button-next,.swiper-container-rtl .swiper-button-prev{width:40px;height:70px;padding:20px 10px;background: rgba(0, 0, 0, .8) url(../img/public/banner-next.png) no-repeat center center;background-size:auto;right:10px;left:auto} .swiper-button-next:hover{background: var(--commonColor) url(../img/public/banner-next.png) no-repeat center center;} .swiper-button-prev:hover{background: var(--commonColor) url(../img/public/banner-perv.png) no-repeat center center;} .slider_banner:hover .swiper-button-prev{left:72px;opacity:1;} .slider_banner:hover .swiper-button-next{right:72px;opacity:1;} .swiper-button-lock{display:none} .swiper-pagination{position:absolute;text-align:center;-webkit-transition:.3s opacity;-o-transition:.3s opacity;transition:.3s opacity;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10} .swiper-pagination.swiper-pagination-hidden{opacity:0} .swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:60px;left:0;width:100%} .swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33);position:relative} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)} .swiper-pagination-bullet{width:14px;height:14px;display:inline-block;vertical-align:middle;border-radius:100%;background:#D9D9D9; opacity: 1;} button.swiper-pagination-bullet{border:none;margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none} .swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{background:var(--commonColor);} .swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)} .swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block} .swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:8px} .swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;-webkit-transition:.2s top,.2s -webkit-transform;transition:.2s top,.2s -webkit-transform;-o-transition:.2s transform,.2s top;transition:.2s transform,.2s top;transition:.2s transform,.2s top,.2s -webkit-transform} .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 5px;width:36px;height:3px;background:#FFFFFF;border-radius:unset;opacity:1;} .swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);white-space:nowrap} .swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s left,.2s -webkit-transform;transition:.2s left,.2s -webkit-transform;-o-transition:.2s transform,.2s left;transition:.2s transform,.2s left;transition:.2s transform,.2s left,.2s -webkit-transform} .swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s right,.2s -webkit-transform;transition:.2s right,.2s -webkit-transform;-o-transition:.2s transform,.2s right;transition:.2s transform,.2s right;transition:.2s transform,.2s right,.2s -webkit-transform} .swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute} .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#007aff;position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top} .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{-webkit-transform-origin:right top;-ms-transform-origin:right top;transform-origin:right top} .swiper-container-horizontal{overflow:hidden;} .swiper-container-horizontal>.swiper-pagination-progressbar{width:100%;height:4px;left:0;top:0} .swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0} .swiper-pagination-white .swiper-pagination-bullet-active{width:36px;height:3px;background:#2000C3 !important;} .swiper-pagination-progressbar.swiper-pagination-white{background:rgba(255,255,255,.25)} .swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill{background:#fff} .swiper-pagination-black .swiper-pagination-bullet-active{background:#000} .swiper-pagination-progressbar.swiper-pagination-black{background:rgba(0,0,0,.25)} .swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill{background:#000} .swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)} .swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%} .swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%} .swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0} .swiper-scrollbar-cursor-drag{cursor:move} .swiper-scrollbar-lock{display:none} .swiper-zoom-container{width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:center} .swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain} .swiper-slide-zoomed{cursor:move} .swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;-webkit-animation:swiper-preloader-spin 1s steps(12,end) infinite;animation:swiper-preloader-spin 1s steps(12,end) infinite} .swiper-lazy-preloader:after{display:block;content:'';width:100%;height:100%;background-position:50%;background-size:100%;background-repeat:no-repeat} .swiper-lazy-preloader-white:after{} @-webkit-keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}} @keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}} .swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000} .swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out} .swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity} .swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none} .swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto} .swiper-container-cube{overflow:visible} .swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;width:100%;height:100%} .swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none} .swiper-container-cube.swiper-container-rtl .swiper-slide{-webkit-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0} .swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto} .swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible} .swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden} .swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0} .swiper-container-flip{overflow:visible} .swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1} .swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none} .swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto} .swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden} .swiper-container-coverflow .swiper-wrapper{-ms-perspective:1200px} .slider_banner .swiper-slide img{width:100%;} .slider_banner .swiper-slide img+img{position:absolute;left:0;top:0;} .slider_banner .swiper-slide img{width:100%;transition:3s linear;transform:scale(1.05);} .slider_banner .swiper-slide.swiper-slide-active img{transform:scale(1);} @media only screen and (max-width: 980px){ .swiper-pagination-bullet{width: 12px; height: 12px;} } /*------------------------------- swiper-slide end ----------------------------------*/ /*--------------------------右侧客服按钮------------------------------*/ /* index_scrollsidebar */ #index_scrollsidebar {top: 42%; right: 2px; transition: all ease-in-out 1s; opacity: 0; position: fixed; z-index: 99999; text-transform: none;} .fixed-body #index_scrollsidebar{opacity: 1;} #index_scrollsidebar ul li { width: 56px;height: 56px;background-color: var(--commonColor); border-radius: 10px;margin-bottom: 3px;display: flex; justify-content: center;align-items: center;position: relative; } #index_scrollsidebar ul li .show0 { position: absolute; background-color: var(--commonColor); padding: 6px; border-radius: 8px; right: 72px; top: 50%; transition: all ease-in-out .5s; transform: translateY(-50%); display: none; } #index_scrollsidebar ul li .show0, #index_scrollsidebar ul li .show0 a{font-size: 16px;color: #fff;text-wrap: nowrap;} #index_scrollsidebar ul li:hover .show0 { display: block;box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); } #index_scrollsidebar ul li>a { display: flex; width: 100%; height: 100%; border-radius: 8px; text-align: center; line-height: 62px; align-items: center; justify-content: center; box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); } #index_scrollsidebar ul li>span { display: flex; width: 100%; height: 100%; border-radius: 8px; text-align: center; line-height: 62px; align-items: center; justify-content: center; box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); } #index_scrollsidebar ul li img { border: none; vertical-align: middle; max-width: 50%; } #index_scrollsidebar .gototop {background-color: #333;} #index_scrollsidebar .gototop .s_smooth { display: flex; width: 100%; height: 100%; border-radius: 8px; text-align: center; line-height: 62px; align-items: center; justify-content: center; cursor: pointer; } .hvr-radial-out { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); position: relative; overflow: hidden; background: var(--commonColor); -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: .3s; transition-duration: .3s; } .hvr-radial-out:before { content: ""; position: absolute; border-radius: 100%; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: var(--commonColor); -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out } .hvr-radial-out:hover, .hvr-radial-out:focus, .hvr-radial-out:active {color: #fff;} .hvr-radial-out:hover:before, .hvr-radial-out:focus:before, .hvr-radial-out:active:before {-webkit-transform: scale(2);transform: scale(2)} @media only screen and (max-width: 1024px) { #index_scrollsidebar {display: none;} .foot_inner .foot_link_pro { width: 31% !important; } .foot_inner .foot_left { width: 35% !important; max-width: 410px; } .mar_top { padding-bottom: 1px !important; margin-top: 0% !important; } } .fix_slide_foot { display: none;background: #0E0E0E;position: fixed; width: 100%;bottom: 0;flex-wrap: nowrap;flex-direction: row; justify-content: space-evenly;align-items: stretch;height: 50px;z-index: 111; } .fix_slide_foot li { /* border-right: 1px solid white; */ align-content: center; display: flex;width: 100%;align-items: center;justify-content: center; } .fix_slide_foot li:nth-child(even){background: #464646;} .fix_slide_foot li:last-of-type() {border-right: none;} .fix_slide_foot li a[title=email] img {height: 30px;} .fix_slide_foot li a { display: flex;width: 100%;align-items: center;justify-content: center; align-content: center; } .fix_slide_foot li img {height: 30px;width: auto;} .show0 img {width: 120px;margin: 0 auto 10px;display: block;max-width: unset !important;} .show0 img:last-child {margin-bottom: 0;} @media only screen and (max-width: 1024px) { #index_scrollsidebar{display: none;} body {padding-bottom: 50px;} } /*---------------------------统一全站颜色---------------------------------*/ :root{ --commonColor: #013B9C; --comColorRgb: 1, 59, 156; --swiper-pagination-bottom: 0; --txtColor: #798190; } .inquiry-pop-bd .content-wrap.form .ch_form_wrap ul input,.inquiry-pop-bd .content-wrap.form .ch_form_wrap ul textarea{border-left:3px solid var(--commonColor);} .inquiry-pop-bd .content-wrap.form .ch_form_wrap .item_submit input{background-color:var(--commonColor);} #cont>ul>li>a{text-transform:capitalize;} #cont h2{background:var(--commonColor) !important;} #cont>ul>li>ul>li>a{color:var(--commonColor) !important;} #cont>ul>li>ul>li>ul>li>a{color:var(--commonColor) !important;} #cont>ul>li>ul>li>ul>li>a:before{border-top-color:var(--commonColor) !important;border-right-color:var(--commonColor) !important;} #cont>ul>li>ul>li>ul>li>a:hover{text-decoration:underline} .content-wrap.form .ch_form_wrap .item_submit input:hover{background-color: var(--commonColor) !important;} /*==============web_head=================*/ .web_head{position:relative;z-index:999; width: 100%; background: #fff;} .head_top{height: 60px; overflow: hidden; position: relative;} .head_top .layout{height: 100%;} .head_top .layout::after{display: none;} .head_top .top_right{position: relative; z-index: 1;} .head_top::after{position: absolute; top: 0; right: 0; width: 35%; content: ''; background: var(--commonColor); height: 100%; z-index: 0;} .head_top::before{position: absolute; top: 0; right: 35%; content: ''; border-top: 60px solid var(--commonColor); border-left: 60px solid transparent; border-bottom: 0; border-right: 0; border-radius: 5px 0 0 0;} .head_top .head_icon .def_img{height: 36px; width: 36px; display: block;} .head_top .head_icon li:nth-child(n+2){margin-left: 16px;} .head_top .head_icon .def_img:hover{animation: swing 0.5s;} .head_logo{margin-right: 15px;} .head_logo img{max-height: 68px;} .head_layer .nav_wrap { position: relative; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; padding: 16px 0; } .nav_wrap .head_nav { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; white-space: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; justify-content: space-around; position: relative; z-index: 2; padding: 0; max-width: 1080px; margin: 0 auto; /* background: #fff; border-radius: 40px; max-width: 900px; */ max-width: 900px; } .nav_wrap .head_nav:after {display: none;} .nav_wrap .head_nav>li{ display: inline-block; line-height: 62px; font-size: 20px; perspective: 1500px; vertical-align: middle; position: relative; } .nav_wrap .head_nav>li:first-child{margin-left: 0;} .nav_wrap .head_nav>li>a { position: relative; display: block; padding: 0 0 0; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); white-space: nowrap; text-transform: capitalize; font-weight: bold; } .nav_wrap .head_nav>li.nav-current>a{color: var(--commonColor);} .nav_wrap .head_nav>li>a:after{ position: absolute; left: 50%; width: 0; bottom: 10px; height: 3px; background: var(--commonColor); content: ''; border-radius: 10px; } .nav_wrap .head_nav>li>a>b { display: inline-block; margin-left: 5px; vertical-align: middle; } .nav_wrap .head_nav>li>a>b:after { /* content: "\f0d7"; */ display: block; font-size: 18px; border-radius: 10px; border-top: 6px solid #333; border-bottom: 0; content: ''; border-left: 6px solid transparent; border-right: 6px solid transparent; vertical-align: middle; } .nav_wrap .head_nav>li:hover{z-index: 2;} .nav_wrap .head_nav>li:hover>a{color: var(--commonColor);} .nav_wrap .head_nav>li.nav-current>a:after, .nav_wrap .head_nav>li:hover>a:after{width: 24px; margin-left: -12px;} .nav_wrap .head_nav>li.nav-current>a>b:after, .nav_wrap .head_nav>li:hover>a>b:after { border-top-color: var(--commonColor); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg) } .nav_wrap .head_nav li ul { width: 260px; padding: 10px 0; background-color: #fff; /* border: 1px solid rgba(0,0,0,.2); */ position: absolute; left: 0; top: 102%; z-index: 999; -webkit-transform: translateY(8%); -ms-transform: translateY(8%); -o-transform: translateY(8%); transform: translateY(8%); opacity: 0; visibility: hidden; box-sizing: border-box; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; box-shadow: 4px 4px 0 rgba(0,0,0,.04); border-radius: 0 0 6px 6px; } .nav_wrap .head_nav>li ul ul {left: 102%; top: -10px;} .nav_wrap .head_nav li:hover>ul { -webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none; opacity: 1; visibility: visible; } .nav_wrap .head_nav li.menu_left ul {left: auto; right: 0;} .nav_wrap .head_nav li.menu_left ul ul {right: 102%;} .nav_wrap .head_nav>li li { position: relative; text-align: left; padding: 0; white-space: normal; text-transform: capitalize; } .nav_wrap .head_nav>li li a { display: block; line-height: 1.4em; padding: 10px 24px 10px 18px; font-size: 16px; position: relative; color: #333; overflow: hidden; /* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */ } .nav_wrap .head_nav>li li:hover>a:before,.nav_wrap .head_nav>li li a:before { content: ""; display: block; width: 4px; height: 30%; position: absolute; color: var(--commonColor); left: 0; top: 40%; opacity: 0; } .nav_wrap .head_nav>li li:hover>a:before,.nav_wrap .head_nav>li li a:hover:before { top: 50%; margin-top: -11px; height: 22px; opacity: 1; background-color: var(--commonColor); color: var(--commonColor); } .nav_wrap .head_nav>li li>a b:after { content: ""; display: inline-block; width: 0; height: 0; overflow: hidden; border-left: 6px solid #333; border-right: 0; border-radius: 10px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); } .nav_wrap .head_nav>li li:last-child>a {border-bottom: 0;} .nav_wrap .head_nav>li li:hover>a {color: var(--commonColor);} .nav_wrap .head_nav>li li:hover>a b:after {border-left-color: var(--commonColor);} .fixed-nav .head_top{display: none;} .fixed-nav .head_layer { width: 100%; position: fixed; left: 0; top: 0; z-index: 9; -webkit-transition: none; -o-transition: none; transition: none; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); opacity: 1; /* background-color: hsla(0,0%,100%,.95); */ background: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 10px 0 rgba(0, 0, 0,.1) } .fixed-nav .head_logo img {max-height: 44px; margin-right: 0;} .fixed-nav .nav_wrap{padding: 3px 0;} .fixed-nav .nav_wrap .head_nav>li {line-height: 60px;} .fixed-nav .nav_wrap .head_nav>li>ul{top: 100%;} .fixed-nav .change-language .change-language-cont { top: 100%; background-color: hsla(0,0%,100%,.95) } .fixed-nav-active .head_layer { -webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none; opacity: 1; -webkit-transition: all .6s ease; -o-transition: all .6s ease; transition: all .6s ease; z-index: 100; } .fixed-nav-active .nav_wrap:before {opacity: 1; height: 100%;} .fixed-nav-active .head_layer .sheader { display: none; } .container_page .web_head{position: static; top: 0; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);} @media only screen and (max-width: 1450px) { .head_logo img{max-height: 56px;} } @media only screen and (max-width: 1280px) { .web_head .layout{padding: 0 30px;} .fixed-nav .head_logo img, .head_logo img{max-height: 42px;} .web_head .logo{margin-right: 12px;} .nav_wrap .head_nav>li{font-size: 18px;} .nav_wrap .head_nav>li>a>b{margin-left: 2px;} } @media only screen and (max-width: 1100px) { .web_head .layout{padding: 0 20px;} } @media only screen and (max-width: 980px) { .web_head .change-language, .web_head .nav_wrap .head_nav { display: none; } .fix_slide_foot {display: flex;} .pro_list{ flex-wrap: wrap;} .web_head .nav_wrap{position: static;} .web_head .head-search {display: none;} .head-search .search-attr,.web_head .head_right {display: none;} .head_layer .layout {display: none; text-align: center;} .index_web_head {position: static; text-align: center;} .index_web_head .head_layer {position: static; } .head_nav {width: 100%;} .head_nav li { position: relative; display: block; width: 100%; font-size: 18px; } .head_nav>li {border-bottom: 1px solid #eee; line-height: 38px; text-transform: capitalize;} .head_nav>li>b{position: absolute; right: 0; width: 30px; height: 30px; top: 4px; background: #fff; z-index: 1;} .head_nav>li>b::before{content: '\f106'; display: block; line-height: 30px; text-align: center; font-size: 16px; color: #666; transition: all 0.3s ease; font-family: fontawesome;} .head_nav>li>b.up_icon::before{transform: rotate(180deg);} .mobile_gn .head_nav>li a{display: block;} .head_nav>li:after { /* content: "\f105"; */ position: absolute; right: 0; top: 0; color: #999; font-size: 12px; } .head_nav li ul { display: none; width: 100%; margin-bottom: 6px; } .head_nav li ul li { width: auto; padding: 2px 10px; font-size: 17px; text-transform: capitalize; line-height: 32px } .head_nav li ul li:before { content: ""; width: 3px; height: 3px; background: #999; border-radius: 50%; position: absolute; left: 0; top: 15px; } .head_nav li ul li li { line-height: 28px; font-size: 16px; } .head_nav li ul li li:before,.web_head .nav_wrap { display: none } } .web_head .operate_box{align-items: center;} .web_head .btn--search{display:flex;align-items: center; width:36px;height:36px;text-align: center; margin:0 14px;position:relative;vertical-align:middle;cursor:pointer;-webkit-box-sizing:content-box;box-sizing:content-box; background:url(../img/icon_search.png) no-repeat center;background-size: 26px auto; border-radius: 6px; transition: all 0.5s ease;} .web_head .btn--search:hover{background-image: url(../img/icon_search_1.png);} .web_head .change-language{position:relative;white-space:nowrap;display:flex;align-items:center;padding: 0; height: 60px;} .web_head .change-language-title{position:relative;} .change-language-title.medium-title a{font-line-height:1.5;text-align:left;font-style:normal;text-transform:capitalize; display: flex; align-items: center;} .web_head .change-language:hover .change-language-title.medium-title a{color: var(--commonColor);} .web_head .change-language-title .language-flag .language--img{content:'';display:inline-block;width:18px;height:12px;margin-right: 10px; vertical-align:top;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;} .web_head .change-language .change-language-cont{border-radius:3px;box-shadow:1px 1px 3px rgba(0,0,0,.2);} .web_head .change-language:before {content:'';position:absolute;left:0;top:50%; margin-top: -6px; width:1px;height:12px;background:#FFFFFF;margin-right: 15px;} .mobile-head-items{display:none;} .mobile-head-language .prisna-wp-translate-seo,.change-language .prisna-wp-translate-seo{display:block;display:flex;flex-direction:column;} .change-language .change-language-title a:after{display:inline-block;padding:0 6px;content:"\f107";font-size:20px;font-family:'fontawesome';} .change-language:hover .change-language-title a:after{-webkit-transform:rotate(-180deg);-moz-transform:rotate(-360deg);-o-transform:rotate(-180deg);transform:rotate(-180deg);-ms-transform:rotate(-180deg);padding-right:6px;padding-left:6px;} .change-language .change-language-cont{position:absolute;top:100%;right:0;z-index:999;display:flex; flex-wrap: wrap; visibility:hidden;overflow-y:scroll;padding:20px 10px 20px 20px;width:360px;max-height:80vh;border:1px solid #eee;border-radius:5px;background:#FFF;opacity:0;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;transform:scale3d(0.9,0.9,1);-ms-transition:all 0.3s ease-in-out; justify-content: space-between;} .change-language:hover .change-language-cont{visibility:visible;opacity:1;transform:scale3d(1,1,1);} .change-language .change-language-cont li{display:inline-block;overflow:hidden;margin:0 0 10px;padding:0 10px 0 0;width:48%;vertical-align:top;border-bottom:1px solid #eee;padding-bottom:5px;} .change-language .change-language-cont li a:hover{color:var(--commonColor);} .change-language .change-language-cont .lang-item-hide{display:none !important;} .change-language .change-language-cont .lang-more{position:relative;display:block;text-align:center;line-height:30px;cursor:pointer;} .change-language .change-language-cont .more-active{font-size:20px;} .change-language .change-language-title .language-flag span{position:relative;display:inline-block;overflow:hidden;vertical-align:top;white-space:nowrap;zoom:1;padding-left:0 !important;font-line-height: 1.5; font-weight:400;font-size:16px;} .language-flag span{position:relative;display:inline-block;overflow:hidden;vertical-align:top;white-space:nowrap;zoom:1;padding-left:10px;line-height:1.5;text-align:left;font-style:normal;text-transform:capitalize;} .change-language::-webkit-scrollbar{width:5px;} .change-language::-webkit-scrollbar-track{background-color:#fff;} .change-language::-webkit-scrollbar-thumb{border-radius:3px;background-color:rgba(0,0,0,.3);} .change-language .language-cont:hover::-webkit-scrollbar-thumb{display:block;} .change-language-title .language-flag .language--img{display:inline-block;width:21px;} .language--img {background: url(../img/yuzhongBG.jpg)no-repeat center center/18px auto;display: inline-block;width: 18px;height: 12px; vertical-align: middle;/*position: absolute;top: 50%;transform: translateY(-50%);*/ margin-right: 4px;} li.language-flag a {position: relative; display: block;} .language-en {background-position: 0 -218px;} .language-af {background-position: 0 -1px;} .language-sq {background-position: 0 -940px;} .language-am {background-position: 0 -9px;} .language-be {background-position: 0 -48px;} .language-eu {background-position: 0 -252px;} .language-az {background-position: 0 -36px;} .language-hy {background-position: 0 -456px;} .language-ar {background-position: 0 -24px;} .language-am {background-position: 0 -12px;} .language-fy {background-position: 0px -300px;} .language-fr {background-position: 0px -288px;} .language-fi {background-position: 0px -276px;} .language-et {background-position: 0px -240px;} .language-eo {background-position: 0px -192px;} .language-en {background-position: 0 -216px;} .language-da {background-position: 0px -168px;} .language-cs {background-position: 0px -144px;} .language-hr {background-position: 0px -420px;} .language-co {background-position: 0px -132px;} .language-ceb {background-position: 0px -108px;} .language-ca {background-position: 0px -96px;} .language-bg {background-position: 0 -448px;} .language-bs {background-position: 0 -84px;} .language-bn {background-position: 0 -72px;} .language-be {background-position: 0 -48px;} .language-is {background-position: 0px -492px;} .language-sm {background-position: 0px -972px;} .language-ro {background-position: 0px -888px;} .language-pa {background-position: 0px -840px;} .language-pt {background-position: 0px -876px;} .language-pl {background-position: 0px -852px;} .language-fa {background-position: 0px -264px;} .language-ps {background-position: 0px -264px;} .language-or {background-position: 0px -827px;} .language-no {background-position: 0px -780px;} .language-ne {background-position: 0px -792px;} .language-my {background-position: 0px -768px;} .language-mn {background-position: 0px -720px;} .language-mr {background-position: 0px -732px;} .language-mi {background-position: 0px -684px;} .language-mt {background-position: 0px -756px;} .language-ml {background-position: 0px -708px;} .language-ms {background-position: 0px -744px;} .language-mg {background-position: 0px -672px;} .language-mk {background-position: 0px -696px;} .language-lb {background-position: 0px -624px;} .language-lt {background-position: 0px -648px;} .language-lv {background-position: 0px -660px;} .language-la {background-position: 0px -613px;} .language-lo {background-position: 0px -636px;} .language-ky {background-position: 0px -600px;} .language-ku {background-position: 0px -120px;} .language-ko {background-position: 0px -588px;} .language-rw {background-position: 0px -912px;} .language-km {background-position: 0px -564px;} .language-kk {background-position: 0px -552px;} .language-kn {background-position: 0px -576px;} .language-jv {background-position: 0px -528px;} .language-ja {background-position: 0px -516px;} .language-it {background-position: 0px -504px;} .language-ga {background-position: 0px -312px;} .language-id {background-position: 0px -467px;} .language-ig {background-position: 0px -480px;} .language-hu {background-position: 0px -443px;} .language-hmn {background-position: 0px -408px;} .language-hi {background-position: 0px -397px;} .language-he {background-position: 0px -384px;} .language-haw {background-position: 0px -300px;} .language-ha {background-position: 0px -1079px;} .language-ht {background-position: 0px -432px;} .language-gu {background-position: 0px -348px;} .language-el {background-position: 0px -204px;} .language-de {background-position: 0px -180px;} .language-ka {background-position: 0px -540px;} .language-gl {background-position: 0px -336px;} .language-ru {background-position: 0px -900px;} .language-gd {background-position: 0px -324px;} .language-sr {background-position: 0px -1006px;} .language-st {background-position: 0px -1017px;} .language-sn {background-position: 0px -984px;} .language-sd {background-position: 0px -984px;} .language-si {background-position: 0px -1271px;} .language-sk {background-position: 0px -1223px;} .language-sl {background-position: 0px -960px;} .language-so {background-position: 0px -994px;} .language-es {background-position: 0px -227px;} .language-su {background-position: 0px -1031px;} .language-sw {background-position: 0px -1055px;} .language-sv {background-position: 0px -1043px;} .language-tl {background-position: 0px -1115px;} .language-tg {background-position: 0px -1091px;} .language-ta {background-position: 0px -1067px;} .language-tt {background-position: 0px -1151px;} .language-te {background-position: 0px -1079px;} .language-th {background-position: 0px -1103px;} .language-tr {background-position: 0px -1138px;} .language-tk {background-position: 0px -1115px;} .language-uk {background-position: 0px -1175px;} .language-ur {background-position: 0px -1187px;} .language-ug {background-position: 0px -1163px;} .language-uz {background-position: 0px -1175px;} .language-vi {background-position: 0px -1211px;} .language-cy {background-position: 0px -156px;} .language-xh {background-position: 0px -1223px;} .language-yi {background-position: 0px -1235px;} .language-yo {background-position: 0px -1247px;} .language-zu {background-position: 0px -1259px;} .language-zh {background-position: 0px -1282px;} .language-zh-TW {background-position: 0px -1282px;} @media only screen and (max-width: 1024px) { /* mobile-header */ .mobile-body-mask { width: 100%; height: 100vh; background: rgba(0,0,0,.6); position: fixed; left: 0; top: 0; z-index: 90; } .mobile-ico-close { width: 30px; height: 30px; position: absolute; right: -35px; top: 0; background: #fff url(../img/mobile_close.png) 50% no-repeat; background-size: 50% auto; cursor: pointer; font-family: fontawesome; } .mobile-head-inner{ height: 100%; padding: 0 15px; position: relative; background: #fff; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1); } .mobile-head-logo{position: relative;} .phoneLogo img{ height: 35px; } .mobile_gn{ display: flex; align-items: center; } .mobile-head-item { float: left; width: 32px; } .mobile-head-search{ order: 2; margin-left: 6px; } .mobile-head-language{ order: 1; } .mobile-head-nav{ order: 3; margin-left: 6px; white-space: nowrap; } .mobile-head-item.mobile-head-aside { float: right } .mobile-head-item .title { width: 100%; height: 32px; line-height: 32px; overflow: hidden; text-align: center; cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent; font-size: 14px; } .mobile-head-item.mobile-head-language .title{ font-size: 18px; width: 100%; text-align: left; } .mobile-head-item .title a { position: relative; display: block; } .mobile-head-item .title:before{ width: 100%; height: 100%; content: ''; display: inline-block; } .mobile-head-item.mobile-head-home .title a:before { content: "\f015"; } .mobile-head-item.mobile-head-nav .title:before { /* content: '\f0c9'; */ /* width: 30px; float: left; */ background: url(../img/icon_menu.png) no-repeat center/ 26px auto; } .mobile-head-item.mobile-head-language .title:before { /* content: "\f0d7"; position: absolute; right: 1px; top: 0; width: auto; height: auto; font-size: 16px; */ background: url(../img/icon_lan.png) no-repeat center/ 22px auto; /* width: 0; height: 0; */ } .mobile-head-item.mobile-head-language .title span{position: relative;} .mobile-head-item.mobile-head-language .title span::after{ content: '\f107'; font-size: 22px; margin-left: 4px; display: inline-block; font-family: fontawesome; } .mobile-head-item.mobile-head-search .title:before { /* content: "\f002"; */ background: url(../img/icon_search1.png) no-repeat center/ 24px auto; } .mobile-head-item.mobile-head-social .title:before { content: "\f007"; } .mobile-head-item.mobile-head-aside .title:before { content: "\f060"; } .mobile-head-item .main-content-wrap { background: #fff; top: 0; display: block; z-index: 99999; } .mobile-head-item .main-content-wrap .content-wrap { overflow-y: auto; height: 100%; padding: 15px 10px 15px; background-color: #fff; } .mobile-head-search .main-content-wrap .content-wrap { padding: 15px 10px; } .mobile-head-item .main-content-wrap.middle-content-wrap .content-wrap { overflow-y: hidden; } .mobile-head-item .side-content-wrap { position: fixed; display: block; left: -70%; width: 70%; height: 100%; text-align: left; text-transform: capitalize; } .mobile-head-item .middle-content-wrap { position: absolute; left: 0; width: 100%; height: auto; padding: 20px 0; opacity: 0; visibility: hidden; } .mobile-head-item .middle-show-content-wrap { top: 30px; visibility: visible; opacity: 1; } /* language */ .mobile-head-items .trp-language-wrap{padding-bottom: 42px;} .mobile-head-items .trp-language-wrap a{margin-right: 0; border-bottom: 1px solid #f2f2f2;} .mobile-head-items .change-language-cont li{border-bottom: 1px solid #ececec;} .mobile-head-items .change-language-cont li a{display: block; line-height: 26px; padding: 6px 0;} /* .search_form */ .search_form .search-ipt{line-height: 60px; padding: 0 20px 0 0; width: calc(100% - 150px); float: left; font-size: 20px; border-bottom: 1px solid #999;} .search_form .search_submit{background: url(../img/icon_search_w.png) no-repeat 20% center/ auto 20px; background-color: var(--commonColor); float: right; width: 150px; height: 50px; margin: 0; border: none; padding: 0; color: #fff; border-radius: 25px; padding: 0 0 0 20px; font-size: 16px; margin-top: 5px;} .search_form .search_submit:hover{opacity: 0.9;} .mobile-head-search .middle-content-wrap{padding: 10px 15px; top: 50px; left: 0; width: 100%;} .middle-content-wrap .search_form{display: block; left: 20px; top: 20px; right: 20px; width: auto; position: static; margin: 0;} .mobile-head-search .main-content-wrap .content-wrap{padding: 15px 0;} .search_form .search-ipt{width: calc(100% - 111px); opacity: 1; -webkit-appearance: none; -moz-transform: none; -webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none; -moz-transform-origin: 0% 50%; -webkit-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -moz-transition: transform .3s; -webkit-transition: transform .3s; -ms-transition: transform .3s; -o-transition: transform .3s; transition: transform .3s; font-size: 20px; line-height: 42px; } .search_form .search_submit{width: 110px; height: 42px; background-position: 16% center; margin-top: 0;} .mobile-head-search .mobile-ico-close{top: -35px; right: 0;} .search_tip{display: none;} } /*------------------------------- search start ----------------------------------*/ .container{min-height:100vh;} .search-ipt{border:0;background:transparent;border-radius:0;-webkit-appearance:none;} .web-search{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;visibility:hidden;} .web-search .btn--search-close{display:inline-block;font-size:1.8em;border-radius:50%;position:absolute;top:1.25em;right:1.25em;display:none;background-image:url(../img/public/search_btn_close.png);background-position:center;background-repeat:no-repeat;-webkit-background-size:auto 35%;background-size:auto 35%;background-color:#ccc;width:42px;height:42px;line-height:42px;cursor:pointer;-webkit-transition:transform .3s ease;-o-transition:transform .3s ease;transition:transform .3s ease;} .web-search .btn--search-close:hover{background-color:var(--commonColor);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);} .js .btn--search-close{display:block;} .web-search .search-ipt{font-family:inherit;line-height:1em;display:inline-block;box-sizing:border-box;width:75%;padding:0.05em 0;color:#333;border-bottom:3px solid;font-size:20px;} .web-search .search-ipt::-webkit-input-placeholder{color:#333;font-weight:bold;} .web-search .search-ipt::-moz-placeholder{opacity:1;color:#333;font-weight:bold;} .web-search .search-ipt:-ms-input-placeholder{color:#333;font-weight:bold;} .web-search .search-ipt::-webkit-search-cancel-button,.web-search .search-ipt::-webkit-search-decoration{-webkit-appearance:none;} .web-search .search-ipt::-ms-clear{display:none;} .web-search .search-attr{font-size:90%;display:block;width:75%;margin:0 auto;padding:0.85em 0;text-align:right;color:#333;} .js .container{position:relative;-moz-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out;} .js .main-wrap--move{height:100vh;} .js .web-search{pointer-events:none;} .js .search--open{pointer-events:auto;opacity:1;visibility:visible;} .web-search .btn--search-close{opacity:0;-webkit-transition:opacity 0.3s ease;-o-transition:opacity 0.3s ease;transition:opacity 0.3s ease;} .search--open .btn--search-close{opacity:1;-webkit-transition:transform .3s ease;-o-transition:transform .3s ease;transition:transform .3s ease;-webkit-animation:bounceInA 1s ease;-o-animation:bounceInA 1s ease;animation:bounceInA 1s ease;} .search__suggestion,.web-search .search-attr{opacity:0;-moz-transform:translate3d(0,30px,0);-webkit-transform:translate3d(0,30px,0);-ms-transform:translate3d(0,30px,0);-o-transform:translate3d(0,30px,0);transform:translate3d(0,30px,0);-moz-transition:opacity 0.8s,transform 0.8s;-webkit-transition:opacity 0.8s,transform 0.8s;-ms-transition:opacity 0.8s,transform 0.8s;-o-transition:opacity 0.8s,transform 0.8s;transition:opacity 0.8s,transform 0.8s;} .search--open .search-attr{opacity:1;-moz-transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);font-size:20px;} .js .web-search .search-ipt{font-size:60px;font-weight:bold;border-bottom-width:1px;padding:15px 0;-moz-transform:scale3d(0,1,1);-webkit-transform:scale3d(0,1,1);-ms-transform:scale3d(0,1,1);-o-transform:scale3d(0,1,1);transform:scale3d(0,1,1);-moz-transform-origin:0% 50%;-webkit-transform-origin:0% 50%;-ms-transform-origin:0% 50%;-o-transform-origin:0% 50%;transform-origin:0% 50%;-moz-transition:transform .3s;-webkit-transition:transform .3s;-ms-transition:transform .3s;-o-transition:transform .3s;transition:transform .3s;opacity:0;text-transform:uppercase;} .js .web-search .search-ipt,.web-search .search-attr{-webkit-transition-delay:0.4s;-o-transition-delay:0.4s;transition-delay:0.4s;} .js .search--open .search-ipt{-moz-transform:scale3d(1,1,1);-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);-o-transform:scale3d(1,1,1);transform:scale3d(1,1,1);opacity:1;-moz-transition-duration:0.4s;-webkit-transition-duration:0.4s;-ms-transition-duration:0.4s;-o-transition-duration:0.4s;transition-duration:0.4s;} .js .search--open .search-btn{display:none !important;} .web-search .search-attr{padding-bottom:0;} .js .web-search{width:70%;height:240px;position:fixed;left:0;top:0;right:0;bottom:0;padding:50px 0;margin:auto;border-radius:8px;z-index:100001;} .js .web-search::before{content:'';position:absolute;top:0;right:0;width:100%;height:100%;opacity:0;background:rgba(255,255,255,0.98);background-color:#fff;-webkit-transform:translateY(-30%) scale(1,0);-ms-transform:translateY(-30%) scale(1,0);-o-transform:translateY(-30%) scale(1,0);transform:translateY(-30%) scale(1,0);-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;} .js .search--open::before{opacity:1;-webkit-transform:none;-ms-transform:none;-o-transform:none;transform:none;} .main-wrap--move:after{content:'';display:block;width:100%;height:100%;background-color:rgba(0,0,0,0.7);position:fixed;left:0;top:0;z-index:100000;} /*------------------------------- search end ----------------------------------*/ /*------------------------------------ web_foot start -------------------------------------------------*/ /* web_footer */ .web_footer {padding-top: 4.5%; background-color: #171719;} .web_footer,.web_footer a{color: #fff;} .web_footer .foot_logo{display: block; margin-bottom: 16px;} .web_footer .foot_logo img {max-height: 64px;} .foot_inner{padding: 0 0 4.5%;} .foot_inner .foot_left{width: 28%; max-width: 410px;} /* .foot_inner .foot_right_info{width: 25%; max-width: 350px;} */ .foot_inner .foot_link_pro{width: 52%;} .foot_inner .foot_link_quick{width: 15%; max-width: 150px;} .foot_left .brief{line-height: 28px; opacity: 0.9;} .foot_icon{margin-top: 30px;} .foot_icon li{margin-right: 6%;} .foot_icon li:last-child{margin-right: 0;} .foot_icon li a{display: block; width: 46px; height: 46px; position: relative; overflow: hidden; border-radius: 50%; border: 1px solid #fff; padding: 6px;} .foot_icon li a img{width: 34px; height: 34px; background: #fff; border-radius: 50%; padding: 5px; position: absolute; left: 5px; top: 5px;} .foot_icon li a .hover_img{top: 6px; opacity: 0;} .foot_icon li a:hover{border-color: var(--commonColor);} .foot_icon li a:hover .def_img{background: var(--commonColor);} .foot_icon li a:hover .hover_img{top: 6px; opacity: 1;background: var(--commonColor);} .foot_inner .link_th{font-size: 20px; font-weight: bold; font-family: 'Work Sans-SemiBold'; text-transform: uppercase;} .foot_inner .link_th .txt{display: inline-block; position: relative;} .foot_inner .link_list{margin-top: 20px; text-transform: capitalize;} .foot_link .link_list li{line-height: 26px; padding: 5px 0;} .foot_link .link_list li a{color: #fff; font-size: 16px; position: relative; display: inline-block;} .foot_link_pro .link_list li{width: 31%;} .foot_info_list{margin-top: 0;} .foot_info_list li{margin-top: 16px; line-height: 26px; background-position: left center; background-size: auto 24px; background-repeat: no-repeat; position: relative; padding: 3px 0; padding-left: 46px; text-transform: none;} .foot_info_list li::before{position: absolute; left: 0; top: 50%; margin-top: -18px; width: 36px; height: 36px; content: ''; background-repeat: no-repeat; background-position: center; background-size: 36px auto;} .foot_info_list li.address::before{background-image: url(../img/icon_add.png);} .foot_info_list li.tel::before{background-image: url(../img/icon_tel.png);} .foot_info_list li.mail::before{background-image: url(../img/icon_email.png);} .foot_info_list li a{word-wrap: break-word;} .foot_info_list li a span{text-transform: uppercase;} .foot_info_list li.address{opacity: 0.9;} .foot_info_list li:hover::before{animation: swing 0.5s;} .foot_info_list li a:hover, .foot_link .link_list li a:hover{color: var(--commonColor); text-decoration: underline;} .web_footer .foot_bottom{padding: 35px 0; line-height: 1.5;} .foot_bottom{border-top: 2px solid #bbb; text-align: center;} .foot_bottom a{color: #fff;} .foot_bottom a:hover{color: #fff; text-decoration: underline;} .foot_icon_mobile{display: none;} @media only screen and (max-width: 1400px) { .foot_inner .foot_left{width: 32%; max-width: 410px;} /* .foot_inner .foot_right_info{width: 25%; max-width: 350px;} */ .foot_inner .foot_link_pro{width: 48%} .foot_link_pro .link_list li{width: 48%;} } @media only screen and (max-width: 1024px) { .web_footer {overflow: hidden; padding-top: 30px; padding-bottom: 56px;} .foot_link_pro .link_list li{width: 100%;} } @media only screen and (max-width: 980px) { .web_footer .foot_logo {float: none; margin: 0 auto 6px; text-align: left;} .web_footer .foot_logo img{max-height: 56px;} .web_head .head_top{display: none;} .web_head .head_layer .layout{display: none;} .mobile-head-items { position: fixed; top: 0; left: 0; width: 100%; height: 50px; z-index: 1000; display: block; } /* .foot_inner */ .web_footer,.web_footer a{opacity: 1;} .foot_inner{flex-direction: column; padding-bottom: 6px;} .foot_inner .foot_left{width: 100% !important; max-width: unset; order: 1; margin-bottom: 6px;} .foot_left .brief{opacity: 1;} .foot_left .foot_icon{display: none;} .foot_inner .foot_link_pro, .foot_inner .foot_link_quick{width: 100%; max-width: unset; order: 2; margin-bottom: 15px;} .foot_inner .foot_link_pro{order: 3; margin-top: 6px;} .foot_inner .link_th .txt{display: block;} .foot_inner .link_th .txt::before{width: 100%; height: 2px;} .foot_inner .foot_link li a{display: block;} .foot_link_pro .link_th{position: relative;} .foot_link_pro .link_th a{display: block;} .foot_link_pro .link_th b{position: absolute; width: 30px; height: 30px; right: 0; top: 0; color: #fff;} .foot_link_pro .link_th b::before{content: '\f0d8'; display: block; line-height: 30px; text-align: center; font-size: 18px; font-family: fontawesome; transition: 0.5s ease;} .foot_link_pro .link_th b.up_icon::before{transform: rotate(180deg);} .foot_inner .foot_link_pro{margin-top: 12px; width: 100% !important;} .foot_inner .foot_right_info{width: 100%; max-width: unset; order: 4;} .foot_right_info .link_th{border-bottom: 1px solid rgba(255, 255, 255, 0.5);} .foot_info_list{margin-top: 20px;} .foot_info_list li{margin-bottom: 15px;} .foot_info_list li a:hover, .foot_link .link_list li a:hover, .foot_bottom a:hover{text-decoration: none; color: #fff;} .foot_icon{margin-top: 20px;} .foot_icon li{margin-right: 15px; margin-bottom: 15px;} .foot_icon li a{width: 46px; height: 46px;} .foot_icon li a img{width: 32px; height: 32px;} .foot_form{margin-top: 20px;} .web_footer .foot_bottom{padding: 16px 0; line-height: 28px; background: none; text-align: left; margin-bottom: 9%;} .foot_bottom span.sp{display: block;} .product_info .btn_div{ margin-bottom: 10px;} } /*--------------------------------------------------- path bar ----------------------------------------------------------*/ .lbanner-pp{position:relative; } .lbanner-pp .lbanner_wrap{padding: 4% 0; background-repeat:no-repeat;background-size:cover;background-position: center; position: relative;} .lbanner-pp .lbanner_wrap::before{ background-color: #00000061; content: ''; width: 100%; height: 100%; content: ''; position: absolute; top: 0; z-index: 1; } .lbanner-pp .layout{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center; z-index: 99;} .lbanner-pp .lbanner_wrap>.layout{min-height: 150px;} .lbanner-pp .lbanner-text .title{font-family:'Roboto-Regular';color:#FFFFFF; text-align: center;} .lbanner-pp .lbanner-btn{margin-top: 25px; display: none;} .lbanner-pp .lbanner-btn a{background: #FFFFFF;display: inline-block; width: 150px; padding: 10px 30px;font-family:'Roboto-Bold';font-weight:bold;font-size:16px;color:#333333;line-height:28px;text-align:center;font-style:normal;text-transform:uppercase;} .lbanner-pp .lbanner-btn a:nth-child(-n+1){margin-right: 20px;} .lbanner-pp .lbanner-btn a:hover{background-color: var(--commonColor); color: #FFFFFF;} .lbanner-pp .path_bar{padding: 14px 0;background: #EBEBEB;} .lbanner-pp .path_bar ul{width: 100%; display:flex;flex-wrap:wrap;justify-content:flex-start;} .lbanner-pp .path_bar ul li{display:inline-block;} .lbanner-pp .path_bar ul li a,.lbanner-pp .path_bar ul li span{font-family:Roboto,Roboto;font-weight:400;font-size:16px;line-height:28px;text-align:left;font-style:normal;text-transform:capitalize;} .lbanner-pp .path_bar ul li::after{content:">";display:inline-block;margin:0 10px 3px 10px;font-weight:bold;width:10px;height:6px;} .lbanner-pp .path_bar ul li:hover a{color: var(--commonColor);} .lbanner-pp .path_bar ul li:last-child span, .lbanner-pp ul li.nav_current span{color: var(--commonColor);} .lbanner-pp .path_bar ul li:last-child:after{display:none;} .lbanner-pp .path_bar ul li:last-child a{color: var(--commonColor);} .lbanner-pp.products-lbanner{position:relative;background-repeat:no-repeat;background-size:cover;} .lbanner-pp.products-lbanner::after{content:'';display:inline-block;width:50%;height:100%;background-color:#000;position:absolute;left:0;top:0;z-index:1;} .lbanner-pp.products-lbanner .layout{position:relative;z-index:20;} .lbanner-pp .lbanner-text .lbanner_btn a img{margin-right:16px;} @media screen and (max-width:1023px){ .lbanner-pp{margin-top: 50px;} } @media screen and (max-width:980px){ .lbanner-pp .lbanner_wrap{padding: 30px 0 36px;} .lbanner-pp .lbanner_wrap>.layout{min-height: 110px;} .lbanner-pp .lbanner-img{display:none;} .lbanner-pp .lbanner-text{width:100%;} .lbanner-pp .path_bar ul li a, .lbanner-pp .path_bar ul li span{font-size: 18px; line-height: 1.5;} .lbanner-pp .lbanner-btn{margin-top: 18px;} .lbanner-pp .lbanner-text .lbanner_btn a{font-size:16px;padding:0 30px;line-height:26px;} .lbanner-pp .lbanner-btn a{padding: 2px 23px; width: 127px;} .lbanner-btn .btn_print{display: none !important;} } /*--------------------------------------------------- path bar ----------------------------------------------------------*/ /*----------------------------------aside---------------------------------*/ .main_wrap{flex-direction:row;flex-wrap:nowrap;align-items:flex-start;justify-content:space-between} .aside{width: 22%; position:sticky; top: 90px;} .side-tit-bar{position:relative;} .side-tit-bar .side-tit{position:relative;margin-bottom: 10px;} .side-tit-bar .side-tit,.side-tit-bar .side-tit a{position:relative;font-family:'Roboto-Bold';font-weight:bold;font-size:24px;color:#020C1E;line-height:39px;text-align:left;font-style:normal;text-transform:capitalize;} .side-tit-bar .side-tit a:hover{color: var(--commonColor);} .side-tit-bar .side-tit .txt-impt{font-weight:bold} .side-widget{position:relative; margin-bottom: 30px;} .side-widget:last-child{margin-bottom: 0;} .side-cate{} .side-cate>li{position:relative;line-height:38px;font-size:.16rem} .side-cate ul{display:none; margin-top: 12px;} .side-cate ul ul{margin: 5px 0;} .side-cate li a{position:relative;display:block;overflow:hidden;font-family:'Roboto-Regular';font-weight:400;font-size:18px;color:#020C1E;line-height:28px;text-align:left;font-style:normal;text-transform:capitalize;} .side-cate>li>a{padding: 14px 36px 14px 20px;} .side-cate li .icon-cate{display:block;position:absolute;right: 6px;top: 16px;font-size:18px;cursor:pointer;line-height:1.5;border-radius:0;-webkit-transition:all .15s ease;-o-transition:all .15s ease;transition:all .15s ease; width: 26px; height: 30px; text-align: center;} .side-cate li li .icon-cate{top: 9px;} .side-cate>li.nav-current>ul{display:block} .side-cate .nav-current>ul{display:block} .side-cate li .icon-cate.icon-cate:before{display:inline-block;font-family:"fontawesome";content:'\f0da';font-size:18px;line-height:1.5;color:#5C6574;transform:rotate(0deg); transition: transform .5s ease-in-out;} .side-cate li .icon-cate.icon-cate-up:before{transform: rotate(90deg);} .side-cate li.li_active .icon-cate.icon-cate:before{color:var(--commonColor)} .side-cate>li>ul>li{position: relative; } .side-cate li li{padding:0 20px;padding-right: 0;} .side-cate li li li{padding-left: 15px;} .side-cate li li a{padding-right:0;font-family:'Roboto-Regular';font-weight:400;font-size:16px;color:#5C6574;line-height:1.7;text-align:left;font-style:normal;text-transform:capitalize; padding: 8px 36px 8px 0;} .side-cate li.active>.icon-cate{color:#000} .side-cate li li.nav-current>a{color:var(--commonColor) !important} .side-cate>li.nav-current>a{background-color: var(--commonColor); color: #FFFFFF;} .side-cate>li.nav-current>a:hover{color: #FFFFFF !important; text-decoration: underline;} .side-cate li.nav-current>.icon-cate.icon-cate:before{color: #FFFFFF !important;} .side-cate li ul li.nav-current>.icon-cate.icon-cate:before{color: var(--commonColor) !important;} .side-cate li a:hover{color:var(--commonColor)} .side-cate li li.nav-current>.icon-cate,.side-cate li li>.icon-cate:hover,li.show_li>.icon-cate{color:#000} .side-product-items{position:relative;padding:.5rem 0} .side-product-items .items_content{position:relative} .side_product_item{position:relative;display:block;width:100%;overflow:hidden} .side_product_item figure{position:relative;display:table;width:100%;height:.95rem;overflow:hidden} .side_product_item .item-img,.side_product_item figcaption{display:table-cell} .side_product_item .item-img{width:.72rem;vertical-align:middle} .side_product_item .item-img img{position:relative;display:block;width:100%;border:1px solid #e3e3e3;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease} .side_product_item figcaption{vertical-align:middle} .side_product_item figcaption a{display:inline-block;line-height:.2rem;max-height:.4rem;overflow:hidden;padding-left:.15rem} .side_product_item:hover .item-img{border-color:var(--commonColor)} .side_product_item .item-img:hover+figcaption a{color:#da9d67} .side-product-items .btn-prev,.side-product-items .btn-next{position:absolute;left:0;width:100%;height:15px;display:block;cursor:pointer;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;opacity:.2;filter:alpha(opacity=20)} .side-product-items .btn-prev{top:.2rem;background:url(img/side_product_up.png) no-repeat center center} .side-product-items .btn-next{bottom:.2rem;background:url(img/side_product_down.png) no-repeat center center} .side-product-items .disabled{display:block;opacity:.1;filter:alpha(opacity=1);cursor:default} .side-product-items .btn-prev:not(.disabled):hover,.side-product-items .btn-next:not(.disabled):hover{opacity:.5;filter:alpha(opacity=50)} .aside .side-bn{max-width:100%;margin:0 0 25px 0} .aside .side-bn img{max-width:100%} .main{position:relative;width:calc(78% - 45px)} @media only screen and (max-width: 1450px) { .aside{width: 260px;} .main{width: calc(100% - 300px);} } @media only screen and (max-width: 1150px) { .aside{display: none;} .main{width: 100%;} } /*--------------------------------------------------------------*/ .pagination{margin-top:40px;display:flex;justify-content:center;align-items:center} .pagination .nav-links{display:flex;justify-content:center;align-items:center} .pagination a,.pagination span{width:42px;height:42px;border:1px solid #C5C5C5; border-radius: 50%; display:inline-block;font-size:18px;color:#333333;line-height:40px;text-align:center;font-style:normal;text-transform:none;margin-right:14px} .pagination .page-numbers:last-child{margin-right: 0;} .pagination a.next{border:1px solid transparent; background-color: unset; display: flex; align-items: center; width: auto !important; border-radius:3px 3px 3px 3px;width:42px;height:42px;font-size:16px;color:#333;line-height:41px;text-align:center;font-style:normal;text-transform:uppercase; padding-right: 8px;} .pagination a.prev{border:1px solid transparent; background-color: unset; display: flex; align-items: center; width: auto !important; border-radius:3px 3px 3px 3px;width:42px;height:42px;font-size:16px;color:#333;line-height:41px;text-align:center;font-style:normal;text-transform:uppercase; padding-left: 8px;} .pagination a.prev::after{content:'';display:inline-block;width:14px;height:40px;background-image:url(../img/pages_prev.png); border: 1px solid transparent;background-position:center center;background-repeat:no-repeat;background-size:90% auto; margin: 0 6px; transition: all .5s ease;} .pagination a.next::before{content:'';display:inline-block;width:14px;height:40px;background-image:url(../img/pages_next.png); border: 1px solid transparent;background-position:center center;background-repeat:no-repeat;background-size:90% auto; margin: 0 6px; transition: all .5s ease;} .pagination a:hover{background: var(--commonColor); border-color: var(--commonColor);} .pagination a.page-numbers:hover{color:#FFFFFF;} .pagination a.next:hover,.pagination a.prev:hover{border: 1px solid var(--commonColor) !important; color: var(--commonColor);background-color: unset;} .pagination span.current{background: var(--commonColor); border-color: var(--commonColor);} .pagination span.current{color:#FFFFFF} .click_btn{width:100%;margin-top:30px;flex-direction:row; align-items:flex-start;} .click_btn .colo_btn a{font-family:'Roboto-Regular';font-weight:400;font-size:18px;color:var(--txtColor);line-height:43px;text-align:left;font-style:normal;text-transform:uppercase;} .prev_btn,.next_btn{width:100%;display:flex;align-items:center;justify-content:space-between;} .prev_btn{margin-top: 12px;} .prev_btn .colo_btn,.next_btn .colo_btn{width:auto;} .click_btn .prev_btn:hover .colo_btn a,.click_btn .next_btn:hover .colo_btn a{color:var(--commonColor);} .prev_btn .con{width:calc(100% - 100px);margin: 0 15px;} .next_btn .con{width:calc(100% - 100px);margin: 0 15px;} .prev_btn .con,.prev_btn .con a,.prev_btn .con span,.next_btn .con,.next_btn .con a,.next_btn .con span{ display: inline-block; font-family:'Roboto-Regular';font-weight:400;font-size:16px;color:var(--txtColor);line-height:28px;text-align:left;font-style:normal;text-transform:none;} .click_btn .next_btn .con a{display: inline-block; width: 100%; text-align: left;} .prev_btn .con:hover a,.next_btn .con:hover a{color: var(--commonColor);} /*-----------------------------mobile--------------------------------*/ @media only screen and (max-width: 1024px) { .container{width:100%} .z10000{position:relative;z-index:100000} .aside-box{display:none} .main{width:100%} .lbanner-pp .layout{flex-direction:column} .lbanner-pp .lbanner-text .detail{height:auto;overflow:visible} .aside{display:none} .main_wrap{flex-direction:column} .pagination{margin-top: 24px;} .pagination a, .pagination span{height: 38px; min-width: 38px; line-height: 36px; width: auto; margin-right: 10px;} .pagination a.next, .pagination a.prev{height: 38px; line-height: 38px;} .pagination .page-numbers:last-child{margin-right: 0;} .click_btn{flex-direction: column; margin-top: 20px;} .next_btn{flex-direction: row;margin-top: 15px;} .click_btn .next_btn .con a{text-align: left;} .prev_btn .colo_btn, .next_btn .colo_btn{margin-right: 12px;} .next_btn .con, .prev_btn .con{margin: 0; width: auto; flex: 1;} } /* pad_top mar_top */ .pad_top{padding-top: 5.5%;} .pad_bot{padding-bottom: 5.5%;} .pad_tb{padding: 5.5% 0;} .mar_top{margin-top: 5.5%;} @media only screen and (max-width: 1400px) { .pad_top{padding-top: 4.5%;} .pad_bot{padding-bottom: 4.5%;} .pad_tb{padding: 4.5% 0;} .mar_top{margin-top: 4.5%;} } @media only screen and (max-width: 980px) { .pad_top{padding-top: 28px;} .pad_bot{padding-bottom: 28px;} .pad_tb{padding: 28px 0;} .mar_top{margin-top: 28px;} } /* web_th */ .web_th{text-align: center; text-transform: capitalize;} .web_th .title{font-size: 48px; line-height: 1.2; font-family: 'Work Sans-Bold'; color: #333;} .web_th .title .txt{color: inherit; position: relative; font-size: inherit;} .web_th .title .txt b{color: var(--commonColor);} .web_th .title a.txt:hover{color: var(--commonColor); text-decoration: underline;} .web_th .brief{line-height: 1.75; color: #666; margin-top: 12px;} .th_left{text-align: left;} .th_right{text-align: right;} .th_small .title{font-size: 42px;} .th_white .title{color: #fff;} .th_white .title a.txt:hover{color: var(--commonColor);} .th_white .brief{color: #fff;} @media only screen and (max-width: 1550px) { .web_th .title{font-size: 46px;} .th_small .title{font-size: 38px;} } @media only screen and (max-width: 1400px) { .web_th .title{font-size: 42px;} .th_small .title{font-size: 36px;} } @media only screen and (max-width: 1350px) { .web_th .title{font-size: 38px;} .th_small .title{font-size: 28px;} } @media only screen and (max-width: 1200px) { .web_th .title{font-size: 36px;} .th_small .title{font-size: 24px;} } @media only screen and (max-width: 980px) { .web_th.flex{flex-direction: column; align-items: center;} .web_th.flex .title{width: 100%;} .web_th .title{font-size: 26px;} .web_th .title br{display: none;} .web_th .brief{margin-top: 12px; font-size: 16px;} } @-webkit-keyframes bounceInA{0%,20%,40%,60%,80%,to{-webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);transition-timing-function: cubic-bezier(.215,.61,.355,1)}0%{opacity: 0;-webkit-transform: scale3d(.3,.3,.3);transform: scale3d(.3,.3,.3)}20%{-webkit-transform: scale3d(1.1,1.1,1.1);transform: scale3d(1.1,1.1,1.1)}40%{-webkit-transform: scale3d(.9,.9,.9);transform: scale3d(.9,.9,.9)}60%{opacity: 1;-webkit-transform: scale3d(1.03,1.03,1.03);transform: scale3d(1.03,1.03,1.03)}80%{-webkit-transform: scale3d(.97,.97,.97);transform: scale3d(.97,.97,.97)}to{opacity: 1;-webkit-transform: scaleX(1);transform: scaleX(1)}} @keyframes bounceInA{0%,20%,40%,60%,80%,to{-webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);transition-timing-function: cubic-bezier(.215,.61,.355,1)}0%{opacity: 0;-webkit-transform: scale3d(.3,.3,.3);-ms-transform: scale3d(.3,.3,.3);transform: scale3d(.3,.3,.3)}20%{-webkit-transform: scale3d(1.1,1.1,1.1);-ms-transform: scale3d(1.1,1.1,1.1);transform: scale3d(1.1,1.1,1.1)}40%{-webkit-transform: scale3d(.9,.9,.9);-ms-transform: scale3d(.9,.9,.9);transform: scale3d(.9,.9,.9)}60%{opacity: 1;-webkit-transform: scale3d(1.03,1.03,1.03);-ms-transform: scale3d(1.03,1.03,1.03);transform: scale3d(1.03,1.03,1.03)}80%{-webkit-transform: scale3d(.97,.97,.97);-ms-transform: scale3d(.97,.97,.97);transform: scale3d(.97,.97,.97)}to{opacity: 1;-webkit-transform: scaleX(1);-ms-transform: scaleX(1);transform: scaleX(1)}} .bounceInA {-webkit-animation-name: bounceInA;animation-name: bounceInA;-webkit-animation-duration: .75s;animation-duration: .75s} @-webkit-keyframes jump{0%{-webkit-transform: translateY(0)}25%{-webkit-transform: translateY(-20%)}50%{-webkit-transform: translateY(0)}75%{-webkit-transform: translateY(-10%)}to{-webkit-transform: translateY(0)}} @keyframes jump{0%{transform: translateY(0)}25%{transform: translateY(-20%)}50%{transform: translateY(0)}75%{transform: translateY(-10%)}to{transform: translateY(0)}} .jump{-webkit-animation-name:jump;animation-name:jump; } .pagination ul li:last-child span{ width: 100% !important; border: initial !important; } .prev-page a{ width: 100% !important; border-radius: 0 !important;} .next-page a{ width: 100% !important; border-radius: 0 !important;} .content-wrap.form .ch_form_wrap .item_submit input:hover{ border: 1px solid #445ba7; background: #fff !important; color: #445ba7;}