.slide { height: 11.1rem; }
.slide-item > picture { display: none; -webkit-background-size: 100% auto; background-size: 100% auto; }
.slide-item > picture[mobile] { display: block; }


.slide-pos { bottom: .4rem; }
.slide-pos > span { width: .16rem; height: .16rem; padding: 0; margin-left: .08rem; margin-right: .08rem; border: none; -webkit-border-radius: 50%; border-radius: 50%; background-color: #fff; -webkit-transition: background-color .3s; -o-transition: background-color .3s; transition: background-color .3s; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.slide-pos > span::after { display: none; }
.slide-pos > span.active { background-color: var(--primary); }

.brand-concept { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; overflow: hidden; }
.brand-concept-sec { width: auto; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; padding-top: .8rem; padding-left: .25rem; padding-right: .25rem; -webkit-transition: background-color .3s, -webkit-box-shadow .3s; transition: background-color .3s, -webkit-box-shadow .3s; -o-transition: background-color .3s, box-shadow .3s; transition: background-color .3s, box-shadow .3s; transition: background-color .3s, box-shadow .3s, -webkit-box-shadow .3s; }
.brand-concept-sec::after { display: none; }
.brand-concept-sec:nth-of-type(2) { padding-left: .1rem; padding-right: .1rem; }
.brand-concept-sec > h2 { font-size: .32rem; }
.brand-concept-sec > p { margin-top: .4rem; font-size: .22rem; }
.brand-concept-sec:hover { background-color: var(--primary); -webkit-box-shadow: 0 .09rem .27rem rgba(0, 0, 0, .2); box-shadow: 0 .09rem .27rem rgba(0, 0, 0, .2); }

.brand-intro { padding-bottom: .95rem; }
.brand-desc { padding-top: 4.6rem; padding-bottom: .7rem; background-position: center 1rem; -webkit-background-size: auto 3.2rem; background-size: auto 3.2rem; font-size: .28rem; }
.brand-desc > h2 { height: .88rem; margin-bottom: .4rem; }
.brand-desc > p { padding-left: .35rem; padding-right: .35rem; line-height: 2; }
.brand-history { padding: 0 .35rem; background: none; }
.brand-history > h2,
.brand-history > h3 { display: none; }
.brand-history-list { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; margin-top: 0; }
.brand-history-list::after { display: none; }
.brand-history-list > li { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; margin-left: .1rem; overflow: hidden; }
.brand-history-list > li:first-of-type { margin-left: 0; }
.brand-history-list > li:nth-of-type(2) > .brand-history-item { background-image: url('../images/m-brand-history-item-2-bg.jpg'); }
.brand-history-list > li:nth-of-type(3) > .brand-history-item { padding: 0;  background-image: url('../images/m-brand-history-item-3-bg.jpg'); }
.brand-history-list > li:nth-of-type(4) > .brand-history-item { padding: 0;  background-image: url('../images/m-brand-history-item-4-bg.jpg'); }
.brand-history-item { width: 100%; height: 4rem; padding: 0; -webkit-transform-origin: center top; -ms-transform-origin: center top; transform-origin: center top; -webkit-transition: -webkit-transform .5s; transition: -webkit-transform .5s; -o-transition: transform .5s; transition: transform .5s; transition: transform .5s, -webkit-transform .5s; background: #555 url('../images/m-brand-history-item-default-bg.jpg') center no-repeat; -webkit-background-size: cover; background-size: cover; }
.brand-history-item > .item-hd { 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-bottom: .6rem; background: inherit; -webkit-background-size: inherit inherit; background-size: inherit; }
.brand-history-item::after,
.brand-history-item:hover::after,
.brand-history-item:active::after,
.brand-history-item > .item-hd > i { display: none; }
.brand-history-item > .item-hd > strong { font-size: .48rem; }
.brand-history-item > .item-hd > strong::after { font-size: .18rem; }
.brand-history-item > .item-hd >  strong[append]::after { top: .1rem; }
.brand-history-item > .item-hd > h3 { margin: 0 0 0 .1rem; font-size: .22rem; letter-spacing: .1rem; }
.brand-history-item > .item-hd >  h3::after { display: none; }
.brand-history-item > .item-bd {
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 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;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
    height: 2.7rem;
    padding: .24rem .1rem;
    margin-top: -1px;
    color: #333;
    font-size: .22rem;
    line-height: 1.5;
    background-color: var(--primary);
    background-color: rgba(254, 163, 11, .95);
    -webkit-backdrop-filter: saturate(180%) blur(.2rem);
            backdrop-filter: saturate(180%) blur(.2rem);
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    -o-transition: transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    }
.brand-history-item:hover,
.brand-history-item:active { -webkit-transform: translateY(-2.69rem); -ms-transform: translateY(-2.69rem); transform: translateY(-2.69rem); }
.brand-history-item:hover > .item-hd,
.brand-history-item:active > .item-hd { -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; padding-bottom: .3rem; }

.product-line-tab { top: .35rem; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding-left: .45rem; padding-right: .45rem; }
.product-line-tab > li { margin-left: 0; margin-right: 0; }
.product-line-tab > li::after { bottom: -0.05rem; width: .56rem; }
.product-line-tab > li > em { font-size: .22rem; }
.product-line-tab > li > strong { font-size: .28rem; }

.product-line-con { height: 13.6rem; }
.product-line-sec { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }
.product-line-sec > aside { width: 100%; height: 6rem; padding: 0; margin: 0; }
.product-line-sec > aside > i { position: absolute; margin: auto; }
.product-line-sec > aside > h2 { margin-top: 2.55rem; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.product-line-sec > aside > h3 { font-size: .32rem; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.product-line-sec > aside > h4 { margin-top: 1.3rem; font-size: .28rem; }
.product-line-sec.active > aside > p { margin-bottom: .4rem; font-size: .24rem; }
.product-line-sec.active > aside > i { opacity: .4; }

.product-line-sec > main { width: 100%; height: 7.6rem; }
.product-slide { width: 100%; padding-bottom: 1rem; }
.product-slide-item { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; padding-top: 0; }
.product-slide-item > .pic { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-sizing: border-box; box-sizing: border-box; max-width: 100%; width: 6rem; height: 6rem; padding: 0; min-height: unset; margin: .5rem auto; }
.product-slide-item > h3 { font-size: .24rem; }
.product-slide-pos { height: 1rem; }

.brand-ip-con { height: auto; padding-top: .5rem; padding-bottom: .5rem; overflow: hidden; }
.brand-ip-con::before { position: relative; bottom: -1.85rem; width: 3rem; margin-top: 0; margin-left: -0.25rem; }
.brand-ip-main { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; width: auto; margin-left: .4rem; margin-right: .44rem; font-size: .24rem; line-height: 2; }
.brand-ip-main > h2 { font-size: .96rem; }
.brand-ip-main > h2::before { top: .4rem; left: -.9rem; height: .3rem; padding-left: .06rem; padding-right: .06rem; font-size: .22rem; line-height: .3rem; }
.brand-ip-main > h3 { margin-top: -0.2rem; margin-bottom: .2rem; font-size: .28rem; }

.brand-design { height: 10.5rem; background-image: url('../images/m-brand-design-bg.png'); background-position: center .6rem; -webkit-background-size: 6.5rem auto; background-size: 6.5rem auto; }
.brand-design-sec { padding-left: .64rem; padding-right: .64rem; }
.brand-design-sec::before { width: 3.24rem; margin-left: 0; }

.brand-design-sec > p { position: relative; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; width: 2.14rem; height: 4.2rem; padding-left: .2rem; padding-right: .2rem; border-width: .03rem; margin-top: auto; margin-bottom: .8rem; margin-left: auto; -webkit-border-radius: .1rem; border-radius: .1rem; font-size: .24rem; line-height: 1.5; }
.brand-design-sec > p::before,
.brand-design-sec > p::after {
    content: '';
    position: absolute;
    top: -0.9rem;
    left: 0;
    right: 0;
    height: 1.1rem;
    background: url('../images/brand-design-desc-bg.png') center top no-repeat;
    -webkit-background-size: 100% auto;
            background-size: 100% auto;
    }
.brand-design-sec > p::after { top: unset; bottom: -0.6rem; background-position: center bottom; }
.brand-design-aside { margin-top: .8rem; font-size: .24rem; }
.brand-design-tab { margin-bottom: .45rem; }
.brand-design-tab > li { width: 1.4rem; height: .8rem; }
.brand-design-tab > li::before {
    content: '';
    position: absolute;
    top: -0.25rem;
    left: -0.15rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 1.7rem;
    height: 1.3rem;
    border: .04rem solid #fff;
    -webkit-border-radius: .1rem;
            border-radius: .1rem;
    opacity: 0;
    -webkit-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s;
    }
.brand-design-tab > li::after { display: none; }
.brand-design-tab > li:hover::before { opacity: 1; }

.brand-solex { background-image: none; }
.brand-solex::after { bottom: -4.92rem; }
.brand-solex-con { height: 8.74rem; }
.brand-solex-list { left: .12rem; right: .12rem; bottom: 2.4rem; height: 2.5rem; }
.brand-solex-item > i { width: 1.5rem; height: 1.5rem; font-size: 1rem; line-height: 1.3rem; }
.brand-solex-item > i::after { -webkit-background-size: .7rem auto; background-size: .7rem auto; }
.brand-solex-item > h3 { margin-top: .05rem; font-size: .36rem; }
.brand-solex-item > strong { font-size: .32rem; }
.brand-solex-item:nth-of-type(2) { margin-left: -0.42rem; -webkit-transform: translateY(-80%); -ms-transform: translateY(-80%); transform: translateY(-80%); }
.brand-solex-item:nth-of-type(3) { -webkit-transform: translateY(-125%); -ms-transform: translateY(-125%); transform: translateY(-125%); }
.brand-solex-item:nth-of-type(4) { margin-right: -0.42rem; -webkit-transform: translateY(-85%); -ms-transform: translateY(-85%); transform: translateY(-85%); }

.contact-con { position: relative; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; padding: 3.2rem .8rem .5rem; }
.contact-main { width: 100%; }
.contact-main > h2 { margin-bottom: .3rem; text-align: center; }
.contact-form-row { margin-top: .65rem; }
.contact-form-row:first-of-type { margin-top: 0; }
.contact-form-row > label { margin-bottom: .1rem; font-size: .24rem; text-align: center; }
.contact-form-input > input { height: .8rem; -webkit-border-radius: .4rem; border-radius: .4rem; font-size: .28rem; }
.contact-form-textarea > textarea { height: 4.28rem; font-size: .28rem;  }
.contact-form-button { margin-top: .46rem; }
.contact-form-button > button { width: 100%; height: .88rem; -webkit-border-radius: .44rem; border-radius: .44rem; font-size: .32rem; }

.contact-logo.logo { position: absolute; top: .85rem; left: 0; right: 0; width: 2.7rem; height: .75rem; margin-left: auto; margin-right: auto; }
.contact-aside { margin-right: unset; }
.contact-aside > h3 { position: absolute; top: 1.8rem; left: 0; right: 0; text-align: center; font-size: .32rem; }
.contact-meta { margin-top: .8rem; font-size: .26rem; }
.contact-meta > dt { margin-top: .3rem; margin-bottom: .1rem; }
.contact-meta > dt:first-of-type { margin-top: 0; }

.contact-qrcode > dt,
.contact-follow > dt { font-size: .32rem; }
.contact-qrcode > dd,
.contact-follow > dd { margin-top: .2rem; }
.contact-qrcode > dd { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }
.contact-qrcode-item { font-size: .26rem; }
.contact-qrcode-item > img { width: 1.4rem; height: 1.4rem; margin-left: auto; margin-right: auto; margin-bottom: .1rem; border-width: .1rem; }

.contact-follow-item { font-size: .26rem; -webkit-background-size: auto .44rem; background-size: auto .44rem; }
.contact-follow-item > img { width: 1.8rem; height: 1.8rem; margin-bottom: .1rem; border-width: .1rem; }
.contact-follow-item.weibo,
.contact-follow-item.baidu { top: -0.3rem; width: .6rem; height: .6rem; margin-left: 1.2rem; }
.contact-follow-item.baidu { margin-left: .6rem; }

@supports (width: max(1px, 1px)) {
    .slide { height: min(11.1rem, calc(var(--window-height) - .9rem)); }
}