@charset "UTF-8";

/* 首页轮播 */
.slide { position: relative; height: 100vh; height: var(--window-height); overflow: hidden; background-color: #555; }
.slide-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; height: 100%; }
.slide-item { position: relative; z-index: 1; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: 100%; overflow: hidden; background: center no-repeat; -webkit-background-size: cover; background-size: cover; text-indent: -999em; }
.slide-item > picture {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: center no-repeat;
    -webkit-background-size: cover;
            background-size: cover;
    }
.slide-item > picture[mobile] { display: none; }
.slide-item > h2,
.slide-item > h3,
.slide-item > em,
.slide-item > h4 { position: absolute; top: -999em; opacity: 0; }

.slide-pos { position: absolute; bottom: .25rem; left: 0; right: 0; z-index: 9; 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; }
.slide-pos > span { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: .1rem; height: .1rem; margin-left: .05rem; margin-right: .05rem; padding: 2px; border: 1px solid transparent; overflow: hidden; -webkit-transition: border-color .2s, color .2s; -o-transition: border-color .2s, color .2s; transition: border-color .2s, color .2s; color: #fff; text-indent: -999em; cursor: pointer; }
.slide-pos > span::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: .1rem;
    height: 0;
    margin: auto;
    border-bottom: .1rem solid currentColor;
    -webkit-transition: border-color .2s;
    -o-transition: border-color .2s;
    transition: border-color .2s; 
    }
.slide-pos > span:hover,
.slide-pos > span:active { color: var(--primary); }
.slide-pos > span.active { color: var(--primary); border-color: var(--primary); }

/* 品牌理念 */
.brand-concept { 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; height: 3.94rem; background-color: var(--blue); }
.brand-concept-sec { position: relative; z-index: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -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; width: 4.3rem; color: #fff; text-align: center; line-height: 1.4; }
.brand-concept-sec > h2 { font-size: .36rem; }
.brand-concept-sec > p { margin-top: .3rem; font-size: .2rem; opacity: 0; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: opacity .3s .15s linear, -webkit-transform .3s .15s; transition: opacity .3s .15s linear, -webkit-transform .3s .15s; -o-transition: transform .3s .15s, opacity .3s .15s linear; transition: transform .3s .15s, opacity .3s .15s linear; transition: transform .3s .15s, opacity .3s .15s linear, -webkit-transform .3s .15s; }
.brand-concept-sec::before {
    content: '';
    display: block;
    width: 100%;
    height: .62rem;
    margin-bottom: .14rem;
    background: center no-repeat;
    -webkit-background-size: auto 100%;
            background-size: auto 100%;
    }
.brand-concept-sec::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    bottom: -0.4rem;
    background-color: var(--primary);
    opacity: 0;
    -webkit-box-shadow: 0 .09rem .27rem rgba(0, 0, 0, .2);
            box-shadow: 0 .09rem .27rem rgba(0, 0, 0, .2);
    -webkit-transition: opacity .2s linear;
    -o-transition: opacity .2s linear;
    transition: opacity .2s linear;
    }
.brand-concept-sec.sec-1::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 55 56'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%23fff;fill-rule:evenodd%7D%3C/style%3E%3C/defs%3E%3Cpath class='a' d='M4 0h47a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4zM4 20h47a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4v-8a4 4 0 0 1 4-4zM4 40h47a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4v-8a4 4 0 0 1 4-4z'/%3E%3C/svg%3E"); }
.brand-concept-sec.sec-2::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 859.13 854.72'%3E%3Ccircle cx='218.21' cy='116.58' r='116.58' fill='%23fff'/%3E%3Ccircle cx='640.91' cy='116.58' r='116.58' fill='%23fff'/%3E%3Cpath d='M287.49 266.16H148.94c-107.23 0-179.25 110-136.36 208.28l150.09 343.91c21.16 48.49 89.93 48.49 111.09 0l150.09-343.91c42.89-98.27-29.13-208.28-136.36-208.28zM258.21 625a40 40 0 0 1-40 40 40 40 0 0 1-40-40V405a40 40 0 0 1 40-40 40 40 0 0 1 40 40zM846.55 646.44L696.46 302.53c-21.16-48.49-89.93-48.49-111.09 0L435.28 646.44c-42.89 98.27 29.13 208.28 136.36 208.28h138.55c107.23 0 179.25-110.01 136.36-208.28zm-165.64 66.13a40 40 0 0 1-80 0v-220a40 40 0 0 1 80 0z' fill='%23fff'/%3E%3C/svg%3E"); }
.brand-concept-sec.sec-3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 62'%3E%3Crect width='27' height='27' rx='6' fill='%23fff'/%3E%3Crect y='34' width='27' height='28' rx='6' fill='%23fff'/%3E%3Crect x='34' y='34' width='27' height='28' rx='6' fill='%23fff'/%3E%3Cpath d='M37.89 19.1l-.71 4.18a3.17 3.17 0 0 0 4.59 3.35l3.75-2a3.14 3.14 0 0 1 2.95 0l3.75 2a3.17 3.17 0 0 0 4.59-3.35l-.71-4.18a3.16 3.16 0 0 1 .9-2.81l3-3a3.17 3.17 0 0 0-1.75-5.41l-4.2-.61a3.17 3.17 0 0 1-2.38-1.73l-1.83-3.77a3.17 3.17 0 0 0-5.69 0l-1.87 3.81a3.17 3.17 0 0 1-2.39 1.73l-4.19.61a3.17 3.17 0 0 0-1.7 5.41l3 3a3.16 3.16 0 0 1 .89 2.77z' fill='%23fff'/%3E%3C/svg%3E"); }
.brand-concept-sec:hover > p,
.brand-concept-sec:active > p { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; }
.brand-concept-sec:hover::before,
.brand-concept-sec:active::before { -webkit-animation: jello 1s .2s; animation: jello 1s .2s; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; }
.brand-concept-sec:hover::after,
.brand-concept-sec:active::after { opacity: 1; }
@-webkit-keyframes jello {
    0%,11.1%,to { -webkit-transform: translateZ(0); transform: translateZ(0); }
    22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); }
    33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); }
    44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); }
    55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); }
    66.6% { -webkit-transform: skewX(-.78125deg) skewY(-.78125deg); transform: skewX(-.78125deg) skewY(-.78125deg); }
    77.7% { -webkit-transform: skewX(.390625deg) skewY(.390625deg); transform: skewX(.390625deg) skewY(.390625deg); }
    88.8% { -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg); transform: skewX(-.1953125deg) skewY(-.1953125deg); }
}
@keyframes jello {
    0%,11.1%,to { -webkit-transform: translateZ(0); transform: translateZ(0); }
    22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); }
    33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); }
    44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); }
    55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); }
    66.6% { -webkit-transform: skewX(-.78125deg) skewY(-.78125deg); transform: skewX(-.78125deg) skewY(-.78125deg); }
    77.7% { -webkit-transform: skewX(.390625deg) skewY(.390625deg); transform: skewX(.390625deg) skewY(.390625deg); }
    88.8% { -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg); transform: skewX(-.1953125deg) skewY(-.1953125deg); }
}

/* 品牌介绍 */
.brand-desc { padding-top: 7rem; padding-bottom: .9rem; background: url('../images/children.jpg') center 1.8rem no-repeat; -webkit-background-size: auto 5rem; background-size: auto 5rem; text-align: center; font-size: .26rem; }
.brand-desc > h2 { height: 1.15rem; margin-bottom: .9rem; background: url('../images/logo-primary.png') center no-repeat; -webkit-background-size: auto 100%; background-size: auto 100%; background-image: -webkit-image-set(url('../images/logo-primary.png') 1x, url('../images/logo-primary@2x.png') 2x); background-image: image-set(url('../images/logo-primary.png') 1x, url('../images/logo-primary@2x.png') 2x); text-indent: -999em; }
.brand-desc > p { font-size: .28rem; line-height: 1.8; word-break: break-all; }

/* 品牌历史 */
.brand-history { padding-top: .6rem; padding-bottom: 1.1rem; background: #555 url(../images/brand-history-bg.jpg) center no-repeat; -webkit-background-size: cover; background-size: cover; overflow: hidden; text-align: center; color: #fff; }
.brand-history > h2 { font-size: .34rem; }
.brand-history > h3 { font-size: .2rem; }
.brand-history-list { position: relative; z-index: 1; 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; margin-top: .5rem; }
.brand-history-list::after {
    content: '';
    position: absolute;
    top: 1.04rem;
    left: 0;
    right: 0;
    z-index: -1;
    border-top: 1px solid #c9c9c9;
    }
.brand-history-list > li { margin-left: .6rem; }
.brand-history-list > li:first-of-type { margin-left: 0; }
.brand-history-list > li:nth-last-of-type(1) > .brand-history-item { padding-left: .1rem; padding-right: .1rem; }
.brand-history-list > li:nth-last-of-type(2) > .brand-history-item { padding-left: .15rem; padding-right: .15rem; }
.brand-history-item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; z-index: 1; width: 2.4rem; height: 4.24rem; padding: 1.04rem .3rem .35rem;  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.brand-history-item::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    display: none;
    border: 1px solid #fff;
    -webkit-border-radius: .1rem;
            border-radius: .1rem;
    -webkit-animation: scaleIn .3s;
            animation: scaleIn .3s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    }
.brand-history-item > .item-hd { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; }
.brand-history-item > .item-hd > i { position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; 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; width: .7rem; height: .7rem; margin: -0.35rem auto 0; -webkit-border-radius: 50%; border-radius: 50%; font: 600 .24rem 'SourceHanSansCN Heavy', 'Arial'; color: transparent; }
.brand-history-item > .item-hd > i::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: .14rem;
    height: .14rem;
    margin: auto;
    -webkit-border-radius: inherit;
            border-radius: inherit;
    background-color: #c9c9c9;
    -webkit-transform-origin: center;
        -ms-transform-origin: center;
            transform-origin: center;
    -webkit-transition: opacity .3s, -webkit-transform .3s;
    transition: opacity .3s, -webkit-transform .3s;
    -o-transition: opacity .3s, transform .3s;
    transition: opacity .3s, transform .3s;
    transition: opacity .3s, transform .3s, -webkit-transform .3s;
    }
.brand-history-item > .item-hd > i::after {
    content: '';
    position: absolute;
    top: -0.05rem;
    right: -0.05rem;
    bottom: -0.05rem;
    left: -0.05rem;
    display: none;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border: 1px dashed var(--primary);
    -webkit-border-radius: inherit;
            border-radius: inherit;
    -webkit-animation: loading 10s infinite .5s linear;
            animation: loading 10s infinite .5s linear;
    }
.brand-history-item > .item-hd > strong { position: relative; font: 600 .7rem/1.2 'SourceHanSansCN Heavy', 'Arial'; }
.brand-history-item > .item-hd > strong::after {
    content: '+';
    position: absolute;
    top: .1rem;
    left: 100%;
    font-weight: 400;
    font-size: .28rem;
    }
.brand-history-item > .item-hd > strong[append]::after { content: attr(append); top: .14rem; }
.brand-history-item > .item-hd > h3 { position: relative; margin: -0.15rem 0 .3rem .12rem; font-size: .24rem; letter-spacing: .12rem; line-height: 1.2; }
.brand-history-item > .item-hd > h3::after {
    content: '';
    position: absolute;
    bottom: -0.1rem;
    left: 0;
    right: 0;
    width: .3rem;
    margin-left: auto;
    margin-right: auto;
    border-bottom: .02rem solid var(--primary);
    }
.brand-history-item > .item-bd { font-size: .18rem; line-height: 1.66; text-align: justify; opacity: 0; -webkit-transition: opacity .3s; -o-transition: opacity .3s; transition: opacity .3s; }
.brand-history-item:hover::after,
.brand-history-item:active::after { display: block; }
.brand-history-item:hover > .item-hd > i,
.brand-history-item:active > .item-hd > i { color: #fff; background-color: var(--primary); opacity: 0; -webkit-animation: bounceIn .5s; animation: bounceIn .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; }
.brand-history-item:hover > .item-hd > i::before,
.brand-history-item:active > .item-hd > i::before { -webkit-transform: scale3d(0,0,0); transform: scale3d(0,0,0); opacity: 0; }
.brand-history-item:hover > .item-hd > i::after,
.brand-history-item:active > .item-hd > i::after { display: block; }
.brand-history-item:hover > .item-bd,
.brand-history-item:active > .item-bd { opacity: 1; }

@-webkit-keyframes scaleIn {
    0% { opacity: 0; -webkit-transform: scale3d(1.25,1.25,1.25); transform: scale3d(1.25,1.25,1.25); }
    100% { opacity: 1; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); }
}

@keyframes scaleIn {
    0% { opacity: 0; -webkit-transform: scale3d(1.25,1.25,1.25); transform: scale3d(1.25,1.25,1.25); }
    100% { opacity: 1; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); }
}
@-webkit-keyframes bounceIn {
    0%,20%,40%,60%,80%,to { -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-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: scale3d(1,1,1); transform: scale3d(1,1,1); }
}
@keyframes bounceIn {
    0%,20%,40%,60%,80%,to { -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-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: scale3d(1,1,1); transform: scale3d(1,1,1); }
}
@-webkit-keyframes loading {
    0% { -webkit-transform: rotate(0); transform: rotate(0); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes loading {
    0% { -webkit-transform: rotate(0); transform: rotate(0); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

/* 产品系列 */
.product-line { position: relative; overflow: hidden; text-align: center; }
.product-line-tab { position: absolute; top: .3rem; left: 0; right: 0; z-index: 19; 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; margin-left: auto; margin-right: auto; }
.product-line-tab > li { position: relative; margin-left: .45rem; margin-right: .45rem; cursor: pointer;  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.product-line-tab > li::after {
    content: '';
    position: absolute;
    bottom: -0.08rem;
    left: 0;
    right: 0;
    width: .88rem;
    margin-left: auto;
    margin-right: auto;
    border-bottom: .06rem solid currentColor;
    opacity: 0;
    -webkit-transform: scaleX(0);
        -ms-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transition: opacity .3s, -webkit-transform .3s;
    transition: opacity .3s, -webkit-transform .3s;
    -o-transition: opacity .3s, transform .3s;
    transition: opacity .3s, transform .3s;
    transition: opacity .3s, transform .3s, -webkit-transform .3s;
    }
.product-line-tab > li > em { display: block; font-size: .14rem; font-style: normal; }
.product-line-tab > li > strong { display: block; font-size: .22rem; }
.product-line-tab > li.active::after,
.product-line-tab > li:hover::after,
.product-line-tab > li:active::after { opacity: 1; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); }

.product-line-con { position: relative; height: 10.8rem; overflow: hidden; }
.product-line-sec { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; background-color: var(--sec-primary); opacity: 0; -webkit-transition: opacity .3s; -o-transition: opacity .3s; transition: opacity .3s; }
.product-line-sec > aside { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -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; width: 5.5rem; padding-top: 1.1rem; padding-bottom: .5rem; margin-left: auto; color: #fff; line-height: 1.2; font-size: .18rem; }
.product-line-sec > aside::after {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    bottom: 0;
    width: .13rem;
    opacity: .8;
    }
.product-line-sec > aside > h2 { font-size: .5rem; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; -webkit-transition: opacity .3s .3s, -webkit-transform .3s .3s; transition: opacity .3s .3s, -webkit-transform .3s .3s; -o-transition: opacity .3s .3s, transform .3s .3s; transition: opacity .3s .3s, transform .3s .3s; transition: opacity .3s .3s, transform .3s .3s, -webkit-transform .3s .3s; }
.product-line-sec > aside > h3 { font-size: .28rem; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; -webkit-transition: opacity .3s .3s, -webkit-transform .3s .3s; transition: opacity .3s .3s, -webkit-transform .3s .3s; -o-transition: opacity .3s .3s, transform .3s .3s; transition: opacity .3s .3s, transform .3s .3s; transition: opacity .3s .3s, transform .3s .3s, -webkit-transform .3s .3s; }
.product-line-sec > aside > h4 { font-size: .28rem; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); opacity: 0; -webkit-transition: opacity .3s .3s, -webkit-transform .3s .3s; transition: opacity .3s .3s, -webkit-transform .3s .3s; -o-transition: opacity .3s .3s, transform .3s .3s; transition: opacity .3s .3s, transform .3s .3s; transition: opacity .3s .3s, transform .3s .3s, -webkit-transform .3s .3s; }
.product-line-sec > aside > i { width: 2.75rem; height: 3rem; margin-top: .75rem; margin-bottom: .75rem; background: url('../images/product-line-icon-sprite.svg') 0 0 no-repeat; -webkit-background-size: 100% auto; background-size: 100% auto; opacity: .7; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; -webkit-transition: opacity .3s .5s, -webkit-transform .3s .5s; transition: opacity .3s .5s, -webkit-transform .3s .5s; -o-transition: opacity .3s .5s, transform .3s .5s; transition: opacity .3s .5s, transform .3s .5s; transition: opacity .3s .5s, transform .3s .5s, -webkit-transform .3s .5s; }
.product-line-sec > aside > p { margin-top: .1rem; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); opacity: 0; -webkit-transition: opacity .3s .3s, -webkit-transform .3s .3s; transition: opacity .3s .3s, -webkit-transform .3s .3s; -o-transition: opacity .3s .3s, transform .3s .3s; transition: opacity .3s .3s, transform .3s .3s; transition: opacity .3s .3s, transform .3s .3s, -webkit-transform .3s .3s; }

.product-line-sec > main { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; width: 50%; background-color: #fff; }
.product-line-sec.active { z-index: 9; opacity: 1; }
.product-line-sec.active > aside > h2,
.product-line-sec.active > aside > h3,
.product-line-sec.active > aside > h4,
.product-line-sec.active > aside > p { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
.product-line-sec.active > aside > i { opacity: .8; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
.product-line-sec.sec-1 { --sec-primary: #ffe700; }
.product-line-sec.sec-1 > aside > i { background-position: 0 0;  }
.product-line-sec.sec-2 { --sec-primary: #fea30b; }
.product-line-sec.sec-2 > aside > i { background-position: 0 -3rem;  }
.product-line-sec.sec-3 { --sec-primary: #21c0f1; }
.product-line-sec.sec-3 > aside > i { background-position: 0 -6rem;  }
.product-line-sec.sec-4 { --sec-primary: #2f76ff; }
.product-line-sec.sec-4 > aside > i { background-position: 0 -9rem; }

/* 产品展示幻灯片 */
.product-slide { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-sizing: border-box; box-sizing: border-box; width: 5.5rem; height: 100%; padding-bottom: 1.4rem; overflow: hidden; }
.product-slide-list { width: 100%; height: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
.product-slide-item { position: relative; z-index: 1; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -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; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%; padding-top: 1.6rem; overflow: hidden; }
.product-slide-item > h3 { padding-left: .3rem; padding-right: .3rem; font-size: .22rem; }
.product-slide-item > .pic { 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; width: 5rem; height: 5rem; margin-top: .5rem; overflow: hidden; }
.product-slide-item > .pic > img { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; display: block; max-width: 100%; width: auto; max-height: 100%; height: auto; }

.product-slide-pos { position: absolute; bottom: 0; left: 0; right: 0; 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; height: 1.4rem; }
.product-slide-pos > span { width: .12rem; height: .12rem; margin-left: .06rem; margin-right: .06rem; -webkit-border-radius: 50%; border-radius: 50%; background-color: #cacaca; text-indent: -999em; overflow: hidden; -webkit-transition: background-color .3s; -o-transition: background-color .3s; transition: background-color .3s; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.product-slide-pos > span.active,
.product-slide-pos > span:hover,
.product-slide-pos > span:active { background-color: var(--sec-primary); }

.brand-ip { background-color: #ffe700; }
.brand-ip-con { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 6.38rem; }
.brand-ip-con::before {
    content: '';
    display: block;
    margin-top: .7rem;
    margin-left: -0.7rem;
    width: 4.96rem;
    background: url('../images/brand-ip-default.svg') center top no-repeat;
    -webkit-background-size: 100% auto;
            background-size: 100% auto;
    }
.brand-ip-main { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; width: 5.9rem; margin-left: auto; font-size: .22rem; line-height: 1.8; }
.brand-ip-main > h2 { position: relative; margin-top: -0.1rem; font: 600 1.6rem/1.2 'SourceHanSansCN Heavy', 'Arial'; }
.brand-ip-main > h2::before {
    content: '品牌IP';
    position: absolute;
    top: .1rem;
    left: 0;
    height: .3rem;
    padding-left: .08rem;
    padding-right: .08rem;
    -webkit-border-radius: .04rem;
            border-radius: .04rem;
    color: #fff;
    font-size: .22rem;
    line-height: .3rem;
    text-align: center;
    background-color: var(--primary);
    }
.brand-ip-main > h3 { margin-top: -0.3rem; margin-bottom: .4rem; font-size: .4rem; }
.brand-badge > picture > img { display: block; width: 100%; height: auto; }

/* 品牌换装 */
.brand-design { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; height: 11rem; padding-bottom: .5rem; background: var(--primary) url('../images/brand-design-bg.jpg') center no-repeat; -webkit-background-size: auto 100%; background-size: auto 100%; }
.brand-design-main { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; width: 100%; overflow: hidden; }
.brand-design-sec { position: absolute; top: 0; left: 0; right: 0; bottom: 0; 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; 
opacity: 0; -webkit-transition: opacity .3s; -o-transition: opacity .3s; transition: opacity .3s; }
.brand-design-sec::before {
    content: '';
    display: block;
    width: 3.68rem;
    height: 100%;
    margin-left: .6rem;
    background: center bottom no-repeat;
    -webkit-background-size: 100% auto;
            background-size: 100% auto;
    }
.brand-design-sec > p { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: border-box; box-sizing: border-box; width: 4.1rem; height: 2.05rem; margin-top: 4.4rem; padding: .2rem; margin-left: .55rem; border: .05rem solid rgba(0, 0, 0, .9); -webkit-border-radius: .2rem; border-radius: .2rem; font-size: .2rem; line-height: 2; text-align: justify; background-color: #fff; }
.brand-design-sec.active { opacity: 1; }
.brand-design-sec.default::before { background-image: url('../images/brand-ip-default.svg'); }
.brand-design-sec.sec-1::before { background-image: url('../images/brand-ip-1.svg'); }
.brand-design-sec.sec-2::before { background-image: url('../images/brand-ip-2.svg'); }
.brand-design-sec.sec-3::before { background-image: url('../images/brand-ip-3.svg'); }

.brand-design-aside { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; margin-top: 1rem; color: #fff; text-align: center; font-size: .2rem; }
.brand-design-tab { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-bottom: .2rem; }
.brand-design-tab > li { position: relative; width: 2.6rem; height: 1.54rem; margin-left: .4rem; margin-right: .4rem; background: center no-repeat; -webkit-background-size: auto 100%; background-size: auto 100%; text-indent: -999em; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.brand-design-tab > li::after {
    content: '';
    position: absolute;
    top: -0.34rem;
    left: 0;
    right: 0;
    width: 0;
    height: 0;
    margin-left: auto;
    margin-right: auto;
    border-left: .09rem solid transparent;
    border-right: .09rem solid transparent;
    border-bottom: .16rem solid rgba(0, 0, 0, .9);
    -webkit-border-radius: .02rem;
            border-radius: .02rem;
    opacity: 0;
    -webkit-transform: translateY(.2rem);
        -ms-transform: translateY(.2rem);
            transform: translateY(.2rem);
    -webkit-transition: opacity .3s, -webkit-transform .3s;
    transition: opacity .3s, -webkit-transform .3s;
    -o-transition: opacity .3s, transform .3s;
    transition: opacity .3s, transform .3s;
    transition: opacity .3s, transform .3s, -webkit-transform .3s;
    }
.brand-design-tab > li.sec-1 { background-image: url('../images/brand-design-tab-1.png'); background-image: -webkit-image-set(url('../images/brand-design-tab-1.png') 1x, url('../images/brand-design-tab-1@2x.png') 2x); background-image: image-set(url('../images/brand-design-tab-1.png') 1x, url('../images/brand-design-tab-1@2x.png') 2x); }
.brand-design-tab > li.sec-2 { background-image: url('../images/brand-design-tab-2.png'); background-image: -webkit-image-set(url('../images/brand-design-tab-2.png') 1x, url('../images/brand-design-tab-2@2x.png') 2x); background-image: image-set(url('../images/brand-design-tab-2.png') 1x, url('../images/brand-design-tab-2@2x.png') 2x); }
.brand-design-tab > li.sec-3 { background-image: url('../images/brand-design-tab-3.png'); background-image: -webkit-image-set(url('../images/brand-design-tab-3.png') 1x, url('../images/brand-design-tab-3@2x.png') 2x); background-image: image-set(url('../images/brand-design-tab-3.png') 1x, url('../images/brand-design-tab-3@2x.png') 2x); }
.brand-design-tab > li:active { -webkit-transform: scale3d(.975,.975,.975); transform: scale3d(.975,.975,.975); }
.brand-design-tab > li:hover::after { opacity: 1; -webkit-transform: translateY(.15rem); -ms-transform: translateY(.15rem); transform: translateY(.15rem); }
.brand-design-tab > li.active::after,
.brand-design-tab > li:active::after { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }

/* 品牌诠释 */
.brand-solex { position: relative; background: #f3f3f3 url('../images/brand-solex-bg.jpg') center no-repeat; -webkit-background-size: cover; background-size: cover; overflow: hidden; }
.brand-solex::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5.68rem;
    width: 4.92rem;
    height: 8.93rem;
    margin-left: auto;
    margin-right: auto;
    background: url('../images/brand-ip-line.png') center top no-repeat;
    -webkit-background-size: 100% auto;
            background-size: 100% auto;
    opacity: .8;
    }
.brand-solex-con { position: relative; height: 8.35rem; text-align: center; }
.brand-solex-list { position: absolute; bottom: 0; left: -1.1rem; right: -1.1rem; z-index: 2; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; height: 3.4rem; line-height: 1.2; }
.brand-solex-item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.brand-solex-item > i {
    position: relative;
    display: inline-block;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 2rem;
    height: 2rem;
    border: .02rem solid var(--primary);
    -webkit-border-radius: 50%;
            border-radius: 50%;
    color: #fff;
    font: 600 1.3rem/1.8rem 'SourceHanSansCN Bold', 'Arial';
    background-color: var(--primary);
    overflow: hidden;
    -webkit-transition: color .3s, background-color .3s;
    -o-transition: color .3s, background-color .3s;
    transition: color .3s, background-color .3s;
    }
.brand-solex-item > i::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: center no-repeat;
    -webkit-background-size: .8rem auto;
            background-size: .8rem auto;
    opacity: 0;
    -webkit-transform: scale3d(0,0,0);
            transform: scale3d(0,0,0);
    -webkit-transform-origin: center;
        -ms-transform-origin: center;
            transform-origin: center;
    -webkit-transition: opacity .3s, -webkit-transform .3s;
    transition: opacity .3s, -webkit-transform .3s;
    -o-transition: opacity .3s, transform .3s;
    transition: opacity .3s, transform .3s;
    transition: opacity .3s, transform .3s, -webkit-transform .3s;
    }
.brand-solex-item > h3 { margin-top: .1rem; font-size: .48rem; color: #959595; opacity: 0; -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); -webkit-transition: opacity .3s .3s, -webkit-transform .3s .3s; transition: opacity .3s .3s, -webkit-transform .3s .3s; -o-transition: opacity .3s .3s, transform .3s .3s; transition: opacity .3s .3s, transform .3s .3s; transition: opacity .3s .3s, transform .3s .3s, -webkit-transform .3s .3s; }
.brand-solex-item > h3::first-letter { color: var(--primary); }
.brand-solex-item > strong { font-size: .36rem; color: #676767; opacity: 0; -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); -webkit-transition: opacity .2s, -webkit-transform .2s; transition: opacity .2s, -webkit-transform .2s; -o-transition: opacity .2s, transform .2s; transition: opacity .2s, transform .2s; transition: opacity .2s, transform .2s, -webkit-transform .2s; }
.brand-solex-item:nth-of-type(1) > i::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 503.88 526.71'%3E%3Cpath d='M491.25 74.14a42.58 42.58 0 0 0-26.42-8.93h-2.61c-.51 0-6.75.37-16.47.37a400 400 0 0 1-77.44-7.26c-38.53-8.13-82.95-45.43-95.94-52.76a44.74 44.74 0 0 0-43.19 0C227.59 6.5 181 49.1 135.49 58.4a406.75 406.75 0 0 1-78 7.25c-9.73 0-16 0-16.55-.36h-2.62a42.76 42.76 0 0 0-26.06 8.85A30.69 30.69 0 0 0 0 98.24v82.37C0 485.42 234.41 524.68 244.35 526.2a53 53 0 0 0 6.9.51 41.81 41.81 0 0 0 6.89-.51c1.24 0 5.88-.94 13.07-2.68l-.09-.14C315.79 512.65 453.39 464.56 493 285.7a168.58 168.58 0 0 0-163.07 3 23.65 23.65 0 0 0 0 5.45l7.25 40.57a23.14 23.14 0 0 1-33.52 24.52l-30.65-16a2.26 2.26 0 0 0 .16-.26h-.44l-5.43-2.82a23.12 23.12 0 0 0-21.77 0l-36.29 19.31a23.16 23.16 0 0 1-33.68-24.32l6.83-40.64a23.19 23.19 0 0 0-6.76-20.47L146 245.42a23.16 23.16 0 0 1 12.7-39.56l40.8-6a23.16 23.16 0 0 0 17.4-12.7l18.15-37a23.15 23.15 0 0 1 41.51 0l18.73 36.79a23.12 23.12 0 0 0 17.48 12.64l40.79 5.8a23.16 23.16 0 0 1 12.71 39.19l-29.4 29a23.2 23.2 0 0 0-6.9 15.09 168.6 168.6 0 0 1 163.07-3.05 484.41 484.41 0 0 0 10.82-105.08V98.16a31 31 0 0 0-12.61-24.02z' fill='%23fea30b'/%3E%3C/svg%3E"); }
.brand-solex-item:nth-of-type(2) { -webkit-transform: translateY(-80%); -ms-transform: translateY(-80%); transform: translateY(-80%); }
.brand-solex-item:nth-of-type(2) > i::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 85.51 76.69'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%23fea30b;fill-rule:evenodd%7D%3C/style%3E%3C/defs%3E%3Cpath class='a' d='M1.08 31c-1.63 4.88-1.7 9.56 1.77 12.62 10.43 9.2 32.88 23 39 26s8.62 6.55 21 7a46.67 46.67 0 0 0 7.95-.35C41.93 62.92 9 37.34 1.08 31zM84.85 60.65c-2.8-9.2-9.55-11.71-16.11-20a2.47 2.47 0 0 1-.39 0h-18a2.5 2.5 0 0 1 0-5h15q-.84-1.4-1.65-3H46.35a2.5 2.5 0 0 1 0-5h15.31a60.29 60.29 0 0 1-.81-7c-.32-5.08-2.5-9.28-12-8s-18-11-18-11-3.74-7.36-17 9A82.49 82.49 0 0 0 3.09 26.24c5.5 4.37 44.75 35.45 75.44 48 5.3-2.4 8.47-6.68 6.32-13.59z'/%3E%3C/svg%3E"); }
.brand-solex-item:nth-of-type(3) { -webkit-transform: translateY(-120%); -ms-transform: translateY(-120%); transform: translateY(-120%); }
.brand-solex-item:nth-of-type(3) > i::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 75 75'%3E%3Cpath d='M37.5 0A37.5 37.5 0 1 0 75 37.5 37.5 37.5 0 0 0 37.5 0zM48 26a5 5 0 1 1-5 5 5 5 0 0 1 5-5zm-21 0a5 5 0 1 1-5 5 5 5 0 0 1 5-5zm29.65 19.39C56.46 45.58 50.36 57.76 37 58c-13.36-.23-19.46-12.41-19.65-12.6a3 3 0 0 1 5.3-2.82c.1 0 5.37 9.63 14.35 9.41 9 .22 14.33-9.36 14.35-9.41a3 3 0 0 1 5.3 2.81z' fill='%23fea30b' fill-rule='evenodd'/%3E%3C/svg%3E"); }
.brand-solex-item:nth-of-type(4) { -webkit-transform: translateY(-80%); -ms-transform: translateY(-80%); transform: translateY(-80%); }
.brand-solex-item:nth-of-type(4) > i::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 727.45 819.2'%3E%3Cpath d='M694.68 180.22L396.49 8.19C386.66 3.28 375.2 0 363.73 0S340.79 3.28 331 8.19l-298.19 172A66.09 66.09 0 0 0 0 237.57v344.06c0 22.94 13.11 44.24 32.77 57.37L331 811c9.83 6.55 21.3 8.19 32.77 8.19s22.93-3.28 32.76-8.19l298.15-172a66.09 66.09 0 0 0 32.77-57.35V237.57c0-22.94-13.11-44.24-32.77-57.35zM544 337.51l-134.4 80.28c-9.83 4.92-16.38 16.39-16.38 27.86v160.56a32.77 32.77 0 0 1-65.54 0V445.65c0-11.47-4.91-21.31-14.75-27.86l-126.15-78.64C172 329.32 167.12 308 177 293.27s31.13-19.66 45.87-9.83l122.88 77c11.47 6.55 24.58 6.55 34.41 0l132.66-78.64c16.38-9.83 36-4.91 42.6 11.47 9.83 14.73 4.91 34.41-11.42 44.24z' fill='%23fea30b'/%3E%3C/svg%3E"); }
.brand-solex-item:nth-of-type(5) > i::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 51.61 64.61'%3E%3Cpath d='M38.07 32.6l11.66-16.32a10.12 10.12 0 0 0-2.16-14 9.69 9.69 0 0 0-13.71 2.2L25.94 15.6 17.75 4.12A9.69 9.69 0 0 0 4 1.91a10.13 10.13 0 0 0-2.16 14L13.8 32.59 2.28 48.72a10.12 10.12 0 0 0 2.15 14 9.69 9.69 0 0 0 13.71-2.2l7.79-10.9 7.34 10.29A9.69 9.69 0 0 0 47 62.09a10.12 10.12 0 0 0 2.16-14z' fill='%23fea30b'/%3E%3C/svg%3E"); -webkit-background-size: .52rem auto; background-size: .52rem auto; }

.brand-solex-item:hover > i,
.brand-solex-item:active > i { background-color: transparent; color: transparent; }
.brand-solex-item:hover > i::after,
.brand-solex-item:active > i::after { opacity: 1; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); }
.brand-solex-item:hover > h3,
.brand-solex-item:active > h3 { -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
.brand-solex-item:hover > strong,
.brand-solex-item:active > strong { -webkit-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s; opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }

.contact { background-color: #123270; }
.contact-con { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 1.1rem .5rem; color: #fff; }
.contact-aside { margin-right: auto; }
.contact-aside > h3 { margin-top: .1rem; font-size: .24rem; letter-spacing: .06rem; }
.contact-logo.logo { width: 2.4rem; height: .66rem; }
.contact-meta { margin-top: .85rem; font-size: .16rem; line-height: 1.2; }
.contact-meta > dt { color: rgba(255, 255, 255, .5); }
.contact-meta > dd,
.contact-meta > dd > address { font-weight: 600; font-style: normal; }
.contact-meta > dd > a { color: inherit; }
.contact-meta > dd.tel { font-size: .36rem; }
.contact-meta > dt { margin-top: .25rem; margin-bottom: .05rem; }
.contact-meta > dt:first-of-type { margin-top: 0; }
.contact-qrcode,
.contact-follow { margin-top: .8rem; }
.contact-qrcode > dt,
.contact-follow > dt { font-size: .18rem; }
.contact-qrcode > dd,
.contact-follow > dd { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-top: .1rem; overflow: hidden; }
.contact-qrcode-item { display: block; margin-left: .4rem; text-align: center; font-size: .18rem; color: inherit; }
.contact-qrcode-item:first-child { margin-left: 0; }
.contact-qrcode-item > img { display: block; -webkit-box-sizing: border-box; box-sizing: border-box; width: 1.08rem; height: 1.08rem; margin-bottom: .05rem; border: .08rem solid #fff; }

.contact-follow-item { display: block; text-align: center; font-size: .18rem; color: inherit; background: center no-repeat; -webkit-background-size: auto .3rem; background-size: auto .3rem; }
.contact-follow-item > img { display: block; -webkit-box-sizing: border-box; box-sizing: border-box; width: 1.08rem; height: 1.08rem; margin-bottom: .05rem; border: .08rem solid #fff; }
.contact-follow-item.weibo,
.contact-follow-item.baidu { position: relative; top: -0.18rem; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; width: .4rem; height: .3rem; margin-top: auto; margin-bottom: auto; margin-left: .6rem; text-indent: -999em; background: center no-repeat; -webkit-background-size: auto 100%; background-size: auto 100%; -webkit-transition: opacity .3s; -o-transition: opacity .3s; transition: opacity .3s; }
.contact-follow-item.weibo { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E %3Cpath fill='%23ffffff' d='M407 177.6c7.6-24-13.4-46.8-37.4-41.7-22 4.8-28.8-28.1-7.1-32.8 50.1-10.9 92.3 37.1 76.5 84.8-6.8 21.2-38.8 10.8-32-10.3zM214.8 446.7C108.5 446.7 0 395.3 0 310.4c0-44.3 28-95.4 76.3-143.7C176 67 279.5 65.8 249.9 161c-4 13.1 12.3 5.7 12.3 6 79.5-33.6 140.5-16.8 114 51.4-3.7 9.4 1.1 10.9 8.3 13.1 135.7 42.3 34.8 215.2-169.7 215.2zm143.7-146.3c-5.4-55.7-78.5-94-163.4-85.7-84.8 8.6-148.8 60.3-143.4 116s78.5 94 163.4 85.7c84.8-8.6 148.8-60.3 143.4-116zM347.9 35.1c-25.9 5.6-16.8 43.7 8.3 38.3 72.3-15.2 134.8 52.8 111.7 124-7.4 24.2 29.1 37 37.4 12 31.9-99.8-55.1-195.9-157.4-174.3zm-78.5 311c-17.1 38.8-66.8 60-109.1 46.3-40.8-13.1-58-53.4-40.3-89.7 17.7-35.4 63.1-55.4 103.4-45.1 42 10.8 63.1 50.2 46 88.5zm-86.3-30c-12.9-5.4-30 .3-38 12.9-8.3 12.9-4.3 28 8.6 34 13.1 6 30.8.3 39.1-12.9 8-13.1 3.7-28.3-9.7-34zm32.6-13.4c-5.1-1.7-11.4.6-14.3 5.4-2.9 5.1-1.4 10.6 3.7 12.9 5.1 2 11.7-.3 14.6-5.4 2.8-5.2 1.1-10.9-4-12.9z'%3E%3C/path%3E %3C/svg%3E"); }
.contact-follow-item.baidu { margin-left: .3rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 736.02 819.2'%3E%3Cpath d='M110.51 433.41c85.66-19.18 76.71-125.29 74.15-148.3-5.11-37.08-47.3-98.45-101-93.34C14.62 196.89 1.84 303 1.84 303c-10.23 47.31 21.73 150.86 108.67 130.41zm93.33 185.38c-2.56 7.67-7.67 26.85-2.56 44.75 10.23 37.07 42.19 39.63 42.19 39.63h44.75V589.39h-47.3c-21.74 5.11-34.52 21.73-37.08 29.4zm69-364.37c47.31 0 85.66-56.25 85.66-127.85S320.19 0 272.88 0s-85.66 56.25-85.66 127.85c-1.28 69 38.36 126.57 85.66 126.57zm207.11 9C543.92 271 586.11 202 593.78 147c7.67-53.7-34.52-116.35-79.27-125.3C467.21 9 411 85.66 405.84 135.52c-2.55 58.81 10.23 118.9 74.15 127.85zm157.3 313.18s-101-79.26-157.25-164.92c-79.27-125.3-189.22-76.68-228.85-12.79-37.08 63.93-95.89 106.11-103.56 116.34C139.92 528 27.41 589.39 51.7 700.61 76 814.4 165.49 811.84 165.49 811.84s63.92 5.12 140.63-12.78 140.64 5.11 140.64 5.11S621.91 863 669.21 747.92c44.75-112.51-32-171.32-32-171.32zM341.92 749.2H228.13c-49.86-10.23-69-44.75-69-49.86-2.56-5.12-16.63-34.52-7.68-81.83 21.74-69 81.83-76.71 81.83-76.71h58.81v-74.15h51.11zm209.67-2.56h-130.4C371.32 731.3 370 696.78 370 696.78v-147h51.15v133c2.55 15.35 19.17 16.63 19.17 16.63h53.7v-147h56.25v194.23zm184.1-393.78c0-24.29-19.17-103.56-98.44-103.56s-85.66 74.16-85.66 122.7 5.11 118.9 101 113.79c93.33 2.55 83.1-108.67 83.1-133z' fill='%23fff'/%3E%3C/svg%3E"); }
.contact-follow-item.weibo:hover,
.contact-follow-item.weibo:active,
.contact-follow-item.baidu:hover,
.contact-follow-item.baidu:active { opacity: .85; }

.contact-main { width: 4.2rem; }
.contact-main > h2 { margin-bottom: .5rem; font-size: .24rem; }
.contact-form-row { margin-top: .35rem; }
.contact-form-row:first-of-type { margin-top: 0; }
.contact-form-row > label { display: block; padding-left: .1rem; padding-right: .1rem; margin-bottom: .02rem; font-size: .18rem; }
.contact-form-input > input { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: .52rem; padding: .05rem .26rem; border: 1px solid #2156bc; -webkit-border-radius: .26rem; border-radius: .26rem; color: #fff; font-size: .18rem; line-height: normal; -webkit-transition: border-color .3s, background-color .3s; -o-transition: border-color .3s, background-color .3s; transition: border-color .3s, background-color .3s; }
.contact-form-input > input:focus { border-color: #2f76ff; background-color: rgba(0, 0, 0, .1); }
.contact-form-textarea > textarea { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 3rem; padding: .2rem; border: 1px solid #2156bc; -webkit-border-radius: .04rem; border-radius: .04rem; color: #fff; font-size: .18rem; line-height: normal; -webkit-transition: border-color .3s, background-color .3s; -o-transition: border-color .3s, background-color .3s; transition: border-color .3s, background-color .3s; resize: none; }
.contact-form-textarea > textarea::-webkit-input-placeholder { color: inherit; font-size: inherit; }
.contact-form-textarea > textarea:-ms-input-placeholder { color: inherit; font-size: inherit; }
.contact-form-textarea > textarea::-ms-input-placeholder { color: inherit; font-size: inherit; }
.contact-form-textarea > textarea::placeholder { color: inherit; font-size: inherit; }
.contact-form-textarea > textarea:focus { border-color: #2f76ff; background-color: rgba(0, 0, 0, .1); }

.contact-form-button { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; margin-top: .3rem; }
.contact-form-button > button { display: block; width: 1rem; height: .42rem; -webkit-border-radius: .21rem; border-radius: .21rem; color: #fff; font-size: .2rem; background-color: var(--primary); cursor: pointer; -webkit-transition: color .3s; -o-transition: color .3s; transition: color .3s; }
.contact-form-button > button:hover,
.contact-form-button > button:active,
.contact-form-button > button:focus { color: rgba(255, 255, 255, .75); }

@supports (width: max(1px, 2px)) {
    .brand-design { height: max(11rem, var(--window-height)); }
    .product-line-con { height: min(10.8rem, var(--window-height));  }
}