@font-face {
    font-family: 'MiSans-Light';
    src: url('../Fonts/MiSans-Light.ttf') format('truetype');
}
@font-face {
    font-family: 'MiSans-Medium';
    src: url('../Fonts/MiSans-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'MiSans-Demibold';
    src: url('../Fonts/MiSans-Demibold.ttf') format('truetype');
}
.fade{opacity:0}
body{min-width:1080px;font-family:MiSans-Light}
.font-blod{font-family:MiSans-Demibold}
.navBar {
    padding: 0 8.33%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: flex-start;
    height: 6rem;
    width: 100%;
    min-width:1080px;
    z-index: 199;
    overflow: unset !important;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 110;
    -webkit-transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
    transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
    border-bottom: solid 1px transparent;
}
.navBar .logo{width:220px;height:44px;background-image:url(../Images/common/logo.png);background-size:cover;background-repeat:no-repeat;background-position:center;margin-top:1rem}
.nav>ul>li{float:left;padding:0 1.5rem;font-size:1rem;line-height:6rem;max-width:7rem;white-space:nowrap}
a.old {
    border-right: 1px solid #fff;
    padding-right: 0.5rem;
    margin-right: 0.5rem;
}
.sub-link {
    font-size: .8rem;
}
.sub-link:hover{color:#007765 !important}
.subNav {
    position: absolute;
    width: 100%;
    left: 0;
    height: 0;
    top: 100%;
    text-align: center;
    line-height: 5rem;
    font-size: 1rem;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
}
.subNav a{color: #e70310;}
.navBar.fixed-top-ex,.navBar:hover{background:#fff;border-bottom:1px solid #f2f2f2}
.navBar.fixed-top-ex a,.navBar:hover a{color:#000}
.navBar.fixed-top-ex .logo,.navBar:hover .logo{background-image:url(../Images/common/logo_l.png?1)}
.navBar.fixed-top-ex .old,.navBar:hover .old{border-color:#000}
.section{background:#fff}
footer.footer-wrap {
    background: #f2f2f2;
    padding: 13rem 8.333% 3rem;
    color: #000;
    position:relative
}
.footer-wrap .more__link-top {
    position: absolute;
    right: 8.333%;
    top: 0;
    background: #007765;
    transform: rotate(-90deg) translateY(-61px);
    padding: 25px 20px;
    transform-origin: right top;
    border: none;
}
.footer-wrap .langq{width:100%;margin-top:-8%}
.footer {
    justify-content: space-between;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-top: 1rem;
    position: relative;
    border-top: 1px solid #000;
    margin-top: 2rem;
}
.footer-company {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.footer-company h3{font-size:1.35rem;}
.company-wuyistar{width:13rem;}
.company-shop {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    align-items: flex-end;
    position:relative;
}
.footer-nav>ul>li{float:left;margin-left:2rem;width:9rem}
.nav-title{font-weight:bold;font-size:1.35rem;}
.footer-subNav li{margin-top:1rem}
.footer-nav a:hover{text-decoration:underline !important;}
.company-address{margin:1.25rem 0 .5rem;}
.footer-bottom {
    justify-content: space-between;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    display: flex;
    padding: .5rem 0;
    font-size: 0.75rem;
}
.shop li{float:left;margin-right:2rem}
.shop a:hover{color:#007765;font-weight:bold}
.footer-wrap a{color:#000}
.shop{font-size:1.125rem}
.copyright>p{margin-top:.5rem}
.footer-right{text-align:right}


.popup {
    position: fixed;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,.5);
    top: 0;
    left: 0;
    z-index: 999;
    display:none
}
.popup>div{
    background: #fff;
    position: absolute;
    left:50%;
    top:50%;
    margin-left:-350px;
    margin-top:-200px;
    width: 700px;
    height: 400px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.popup .popup-logo{
    position: absolute;
    left: 30px;
    width: 115px;
    top: 24px;
}
.popup .emty{width:220px;}
.popup .popup-tip{font-size:1.25rem;margin-top:1rem}
.closeBtn {
    position: absolute;
    width: 30px;
    height:30px;
    right: 30px;
    top: 24px;
    transform:rotate(45deg)
}
.closeBtn::before{
        content: "";
    position: absolute;
    height: 100%;
    width: 2px;
    background: #000;
    left: 14px;
    top:0
}
.closeBtn::after{
        content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background: #000;
    top: 14px;
    left:0
}
.out-link{position:relative}
.out-link .out-link-code{
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 2rem;
    display:none
}
.out-link a {
    margin-left: 2rem;
    display:inline-block
}
.out-link a:hover .out-link-code{display:block}
.out-link .link-hover{
    position: absolute;
    left: 0;
    top: 0;
    opacity:0;
}
.out-link-icon{position:relative;}
.out-link a:hover .link-icon{opacity:0}
.out-link a:hover .link-hover{opacity:1}
.more__link-swiper:hover{background:#000;color:#fff}

.more__link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #000;
    border: 1px solid #000;
    width: 117px;
    padding: 8px 16px;
    transition: all .15s linear
}
.more__link p{font-size:.8rem;font-weight:bold}
.more__link.green{color:#007765;border-color:#007765}
.more__link.green path{stroke: rgb(0, 131, 117);}
.more__link.green:hover{background:#007765;color:#fff;border-color:#007765}
.more__link.green:hover path{stroke:rgb(255, 255, 255);}
.more__link:hover{background:#fcc9a4;border-color:#fcc9a4}
/*.more__link:hover .buttonIn,.more__link:hover .buttonIn::before,.more__link:hover .buttonIn::after{border-width:2px}
.more__link:hover .buttonIn::after{top:-2px}*/
.buttonIn{line-height:0;position:relative;width:20px;border-top:1px solid;}
.buttonIn::after,.buttonIn::before{
    content: "";
    position: absolute;
    height: 6px;
    width: 5px;
    border-left: 1px solid;
    right: 0;
}
.buttonIn::before{
    border-bottom:1px solid;
    border-bottom-left-radius:100%;
    bottom:0
}
.buttonIn::after{
    border-top:1px solid;
    border-top-left-radius:100%;
    top:-1px
}
.js-viewport-children > * {
    opacity: 0;
    transform: translate3d(0,100px,0);
    transition: transform 1.2s cubic-bezier(.14,1,.34,1),opacity .4s cubic-bezier(.215,.61,.355,1);
}
.js-viewport-children.viewed>* {
    opacity: 1;
    transform: translateZ(0);
}
.js-viewport-children>:nth-child(1) {
    transition-delay: .08s;
}
.js-viewport-children>:nth-child(2) {
    transition-delay: .16s;
}
.js-viewport-children>:nth-child(3) {
    transition-delay: .24s;
}
.js-viewport-children>:nth-child(4) {
    transition-delay: .32s;
}
.js-viewport-children>:nth-child(5) {
    transition-delay: .40s;
}
.js-viewport-children>:nth-child(6) {
    transition-delay: .48s;
}
.js-viewport-children>:nth-child(7) {
    transition-delay: .56s;
}
.js-viewport-children>:nth-child(8) {
    transition-delay: .64s;
}
.js-viewport-children>:nth-child(9) {
    transition-delay: .72s;
}
.js-viewport-children>:nth-child(10) {
    transition-delay: .80s;
}
.js-viewport-children>:nth-child(11) {
    transition-delay: .88s;
}
.overlay{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 199;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    pointer-events:none;
    width: 100%;
    height:100%;
}
.overlay .bg{
    width:100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #007765;
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
    z-index: 0;
}
.router-enter-active{
    -webkit-transition: opacity .3s ease;
    -o-transition: opacity .3s ease;
    transition: opacity .3s ease;
}
.router-enter-active .bg{
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transition: -webkit-transform .6s cubic-bezier(.19,1,.22,1);
    transition: -webkit-transform .6s cubic-bezier(.19,1,.22,1);
    -o-transition: transform .6s cubic-bezier(.19,1,.22,1);
    transition: transform .6s cubic-bezier(.19,1,.22,1);
    transition: transform .6s cubic-bezier(.19,1,.22,1),-webkit-transform .6s cubic-bezier(.19,1,.22,1);
}
.router-leave-active{
    -webkit-transition: opacity .8s ease .4s;
    -o-transition: opacity .8s ease .4s;
    transition: opacity .8s ease .4s;
}
.router-leave-active .bg{
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
    -webkit-transition: -webkit-transform .4s cubic-bezier(.19,1,.22,1) .4s;
    transition: -webkit-transform .4s cubic-bezier(.19,1,.22,1) .4s;
    -o-transition: transform .4s cubic-bezier(.19,1,.22,1) .4s;
    transition: transform .4s cubic-bezier(.19,1,.22,1) .4s;
    transition: transform .4s cubic-bezier(.19,1,.22,1) .4s,-webkit-transform .4s cubic-bezier(.19,1,.22,1) .4s;
}
.router-enter,.router-leave-to {
    opacity: 0;
}
.router-enter .bg, .router-leave-to .bg{
    -webkit-transform: scaleY(0) skewY(20deg);
    transform: scaleY(0) skewY(20deg);
}
.overlay .loading-image {
    position: relative;
    z-index: 1;
}
.overlay .loading-image .loading-image__inner{
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
    width:0
}
.router-leave-active .loading-image{
    -webkit-transform: translate3d(0,-100px,0);
    transform: translate3d(0,-100px,0);
    opacity:0;
    -webkit-transition: opacity .4s cubic-bezier(.95,.05,.795,.035),-webkit-transform .4s cubic-bezier(.95,.05,.795,.035) .05s;
    transition: opacity .4s cubic-bezier(.95,.05,.795,.035),-webkit-transform .4s cubic-bezier(.95,.05,.795,.035) .05s;
    -o-transition: opacity .4s cubic-bezier(.95,.05,.795,.035),transform .4s cubic-bezier(.95,.05,.795,.035) .05s;
    transition: opacity .4s cubic-bezier(.95,.05,.795,.035),transform .4s cubic-bezier(.95,.05,.795,.035) .05s;
    transition: opacity .4s cubic-bezier(.95,.05,.795,.035),transform .4s cubic-bezier(.95,.05,.795,.035) .05s,-webkit-transform .4s cubic-bezier(.95,.05,.795,.035) .05s;
}
.router-enter-active .loading-image {
    -webkit-transition: opacity .6s,-webkit-transform .6s cubic-bezier(.19,1,.22,1);
    transition: opacity .6s,-webkit-transform .6s cubic-bezier(.19,1,.22,1);
    -o-transition: opacity .6s,transform .6s cubic-bezier(.19,1,.22,1);
    transition: opacity .6s,transform .6s cubic-bezier(.19,1,.22,1);
    transition: opacity .6s,transform .6s cubic-bezier(.19,1,.22,1),-webkit-transform .6s cubic-bezier(.19,1,.22,1);
}

.img-fill{width:100%}

ul.sub-menu {
    display: none;
    padding:1rem 0
}
.nav{position:relative}
.navCategory::after {
    content: "";
    display: none;
    width: 100vw;
    position: absolute;
    height: calc(100% - 6rem);
    top: 6rem;
    background: rgba(248,248,248,0.96);
    z-index: -1;
    right: -8.33vw;
}
.sub-menu > li {
    line-height: 4rem;
    text-align: left;
    position: relative;
}
.navCategory:hover::after {
    display: block;
}
.menubtn:hover > .sub-menu {
    display: block;
}
.menubtn:hover>a{color:#007765;font-weight:bold}
.sub-menu a:hover{font-weight:bold}
.line-height{line-height:0}