@font-face {
    font-family: Gilroy-Regular;
    src: url(../fonts/opensans-regular.ttf)
}

@font-face {
    font-family: Gilroy-HeavyItalic;
    src: url(../fonts/gesstwobold-bold.ttf)
}

@font-face {
    font-family: OpenSans-Light;
    src: url(../fonts/opensans-light.ttf)
}

@font-face {
    font-family: OpenSans-Bold;
    src: url(../fonts/opensans-bold.ttf)
}

@font-face {
    font-family: OpenSans-Semibold;
    src: url(../fonts/opensans-semibold.ttf)
}

@font-face {
    font-family: "Sharp Sans No1-Light";
    src: url("../../common/font/Sharp Sans No1-Light.otf")
}

@font-face {
    font-family: "Sharp Sans No1-Medium";
    src: url("../../common/font/Sharp Sans No1-Medium.otf")
}

@font-face {
    font-family: DINNextLTW23-Regular;
    src: url(../../common/font/DINNextLTW23-Regular.ttf)
}

@font-face {
    font-family: "DB Adman X Bd";
    src: url("../fonts/db adman x bd.ttf")
}

@font-face {
    font-family: "DB Adman X";
    src: url("../fonts/db adman x.ttf")
}

@font-face {
    font-family: "DB Adman X";
    src: url("../fonts/db adman x li.ttf")
}

@font-face {
    font-family: "OpenSans-Regular TH";
    font-display: swap;
    src: url("../fonts/db adman x.ttf");
    font-style: normal;
    font-weight: 400
}

@font-face {
    font-family: "OpenSans-Light TH";
    font-display: swap;
    src: url("../fonts/db adman x li.ttf");
    font-style: normal;
    font-weight: 400
}

@font-face {
    font-family: "OpenSans-Bold TH";
    font-display: swap;
    src: url("../fonts/db adman x bd.ttf");
    font-style: normal;
    font-weight: 400
}

@font-face {
    font-family: KhmerOsBattambang-Bold;
    src: url(../fonts/khmerosbattambang-bold.ttf)
}

@font-face {
    font-family: Myanmar3_2018;
    src: url(../fonts/myanmar3_2018.ttf)
}

.btn {
    font-size: 16px;
    line-height: 44px;
    text-align: center;
    padding: 0 33px;
    background: 0 0;
    display: inline-block;
    -webkit-transition: background-color ease-in-out .2s, color ease-in-out .2s, border-color ease-in-out .2s;
    transition: background-color ease-in-out .2s, color ease-in-out .2s, border-color ease-in-out .2s
}

.btn-whole {
    width: 100%;
    padding: 0
}

.btn-white {
    border: .01rem solid #fff;
    color: #fff
}

.btn-white:hover {
    background: #fff;
    color: #000
}

.btn-black {
    border: .01rem solid #000;
    color: #000
}

.btn-black:hover {
    background: #000;
    color: #fff
}

.btn-primary {
    background: #ffc915;
    border: .01rem solid #ffc915;
    color: #000
}

.btn-primary:hover {
    background: #d9ab11;
    border: .01rem solid #d9ab11
}

.crumbs {
    height: .52rem;
    font-size: .12rem;
    line-height: .18rem;
    color: #000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media screen and (min-width:769px) {
    .crumbs {
        height: .6rem;
        font-size: .14rem;
        line-height: .2rem
    }
}

.crumbs a {
    color: #000
}

.crumbs a:hover {
    color: #ffc915
}

.crumbs .crumbs-line {
    margin: 0 .05rem
}

.dialog-video {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: #fff;
    z-index: 15
}

.dialog-video .dialog-video-container {
    width: 60vw;
    position: relative
}

@media screen and (max-width:768px) {
    .dialog-video .dialog-video-container {
        width: 70vw
    }
}

.dialog-video .dialog-video-container video {
    width: 100%
}

.dialog-video .dialog-video-container .dialog-video-close {
    background-image: url(../fonts/3334b5aef588439392bb6094e80b7d48.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center;
    width: .4rem;
    height: .4rem;
    position: absolute;
    right: -.1rem;
    top: -.9rem
}

@media screen and (max-width:768px) {
    .dialog-video .dialog-video-container .dialog-video-close {
        right: 0;
        top: -.3rem;
        width: .24rem;
        height: .24rem
    }
}

.dialog-video .dialog-video-container:before {
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    width: 100%;
    text-align: center;
    color: rgba(51, 51, 51, .5);
    content: 'loading...';
    font-size: .16rem;
    z-index: -1
}

@media screen and (max-width:768px) {
    .lang-eg .product-nav,
    .lang-il .product-nav {
        height: .88rem
    }
}

.lang-eg .product-nav .product-nav-list,
.lang-il .product-nav .product-nav-list {
    width: 680px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.lang-eg .product-nav .product-nav-list ul,
.lang-il .product-nav .product-nav-list ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.lang-eg .product-nav .product-nav-list ul li,
.lang-il .product-nav .product-nav-list ul li {
    margin-right: 64px;
    font-size: 12px;
    line-height: 17px
}

.lang-eg .product-nav .product-nav-list ul li:last-child,
.lang-il .product-nav .product-nav-list ul li:last-child {
    margin-right: 64px
}

.lang-eg .product-nav .product-nav-list ul li a,
.lang-il .product-nav .product-nav-list ul li a {
    color: #94989d
}

.lang-eg .product-nav .product-nav-list ul li a.active,
.lang-il .product-nav .product-nav-list ul li a.active {
    color: #000
}

@media screen and (max-width:768px) {
    .lang-eg .product-nav .product-nav-list,
    .lang-il .product-nav .product-nav-list {
        width: 3.6rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: .44rem;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        background: #fff;
        -webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, .05);
        box-shadow: 0 1px 0 0 rgba(0, 0, 0, .05);
        border-top: solid .01rem #e9e9e9;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap
    }
    .lang-eg .product-nav .product-nav-list ul li,
    .lang-il .product-nav .product-nav-list ul li {
        margin-right: .35rem;
        font-size: .12rem;
        line-height: .17rem
    }
    .lang-eg .product-nav .product-nav-list ul li:last-child,
    .lang-il .product-nav .product-nav-list ul li:last-child {
        margin-right: .35rem
    }
}

.lang-eg .product-nav .product-nav-btn,
.lang-il .product-nav .product-nav-btn {
    padding: 0 25px;
    line-height: 33px;
    font-size: 12px;
    text-align: center;
    background: #ffc915;
    color: #000;
    -webkit-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s
}

.lang-eg .product-nav .product-nav-btn:hover,
.lang-il .product-nav .product-nav-btn:hover {
    background: #d9ab11
}

@media screen and (max-width:768px) {
    .lang-eg .product-nav .product-nav-btn,
    .lang-il .product-nav .product-nav-btn {
        line-height: .33rem;
        font-size: .12rem;
        padding: 0 .1rem
    }
}

.product-nav {
    background: #fff;
    width: 100%;
    z-index: 10
}

@media screen and (max-width:768px) {
    .product-nav {
        height: .88rem
    }
}

.product-nav.fixed {
    position: fixed;
    z-index: 10;
    top: 0
}

@media screen and (max-width:768px) {
    .product-nav.fixed {
        top: .439rem
    }
}

@media screen and (min-width:769px) {
    .product-nav {
        border-bottom: solid .01rem #e9e9e9;
        top: 44px
    }
}

.product-nav .wrapper {
    height: 50px;
    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;
    position: relative
}

@media screen and (max-width:768px) {
    .product-nav .wrapper {
        width: 3.24rem;
        height: .88rem;
        padding-bottom: .44rem
    }
}

.product-nav .product-nav-svg {
    height: 16px
}

@media screen and (max-width:768px) {
    .product-nav .product-nav-svg {
        height: .14rem
    }
}

.product-nav .product-nav-svg img {
    height: 100%
}

.product-nav .product-nav-list {
    width: 680px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.product-nav .product-nav-list ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.product-nav .product-nav-list ul li {
    margin-right: 64px;
    font-size: 12px;
    line-height: 17px
}

.product-nav .product-nav-list ul li:last-child {
    margin-right: 0
}

.product-nav .product-nav-list ul li a {
    color: #94989d
}

.product-nav .product-nav-list ul li a.active {
    color: #000
}

@media screen and (max-width:768px) {
    .product-nav .product-nav-list {
        position: absolute;
        left: -.24rem;
        top: .44rem;
        width: 3.6rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: .44rem;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        background: #fff;
        -webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, .05);
        box-shadow: 0 1px 0 0 rgba(0, 0, 0, .05);
        border-top: solid .01rem #e9e9e9;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap
    }
    .product-nav .product-nav-list ul li {
        margin-right: .35rem;
        font-size: .12rem;
        line-height: .17rem
    }
    .product-nav .product-nav-list ul li:last-child {
        margin-right: 0
    }
}

.product-nav .product-nav-btn {
    padding: 0 25px;
    line-height: 33px;
    font-size: 12px;
    text-align: center;
    background: #ffc915;
    color: #000;
    -webkit-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s
}

.product-nav .product-nav-btn:hover {
    background: #d9ab11
}

@media screen and (max-width:768px) {
    .product-nav .product-nav-btn {
        line-height: .33rem;
        font-size: .12rem;
        padding: 0 .1rem
    }
}

.purchase-box {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .3);
    z-index: 15;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: opacity ease-in-out .3s;
    transition: opacity ease-in-out .3s
}

.purchase-box.visible {
    opacity: 1;
    visibility: visible
}

.purchase-box .purchase-site-modal {
    background: #fff;
    position: relative
}

.purchase-box .purchase-site-modal .purchase-site-close-icon {
    position: absolute;
    top: .24rem;
    right: .24rem;
    cursor: pointer
}

@media screen and (max-width:768px) {
    .purchase-box .purchase-site-modal .purchase-site-close-icon {
        top: .1rem;
        right: .1rem
    }
}

.purchase-box .purchase-site-modal .purchase-site-message {
    -webkit-box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, .1);
    box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, .1);
    border-radius: 4px 4px 0 0;
    text-align: center;
    color: #333;
    padding: .4rem 0
}

.purchase-box .purchase-site-modal .purchase-site-message .message-buy-now {
    width: 100%;
    font-size: .2rem;
    margin-bottom: .08rem;
    line-height: .27rem
}

@media screen and (max-width:768px) {
    .purchase-box .purchase-site-modal .purchase-site-message .message-buy-now {
        font-size: .16rem;
        margin-bottom: .05rem;
        line-height: .22rem
    }
}

.purchase-box .purchase-site-modal .purchase-site-message .message-tips {
    width: 100%;
    font-size: .14rem;
    line-height: .19rem
}

.purchase-box .purchase-site-modal .purchase-site-option {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: .32rem 1.32rem;
    max-height: 60vh;
    max-width: 60vh;
    overflow-y: auto
}

@media screen and (max-width:768px) {
    .purchase-box .purchase-site-modal .purchase-site-option {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding: .2rem
    }
}

.purchase-box .purchase-site-modal .purchase-site-option .country-item {
    margin-right: .1rem
}

@media screen and (max-width:768px) {
    .purchase-box .purchase-site-modal .purchase-site-option .country-item {
        margin-right: 0
    }
}

.purchase-box .purchase-site-modal .purchase-site-option .purchase-site-details {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    max-width: 720px
}

@media screen and (max-width:768px) {
    .purchase-box .purchase-site-modal .purchase-site-option .purchase-site-details {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        max-width: 3rem
    }
    .purchase-box .purchase-site-modal .purchase-site-option .purchase-site-details picture {
        display: block;
        height: .75rem
    }
}

.purchase-box .purchase-site-modal .purchase-site-option .purchase-site-details a {
    text-align: center;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 4px;
    margin: 9px;
    overflow: hidden
}

@media screen and (max-width:768px) {
    .purchase-box .purchase-site-modal .purchase-site-option .purchase-site-details a {
        width: 2.8rem;
        height: .8rem;
        border: .01rem solid rgba(0, 0, 0, .1);
        line-height: .6rem
    }
}

.purchase-box .purchase-site-modal .purchase-site-option .purchase-site-details a img {
    width: 160px;
    height: 160px
}

@media screen and (max-width:768px) {
    .purchase-box .purchase-site-modal .purchase-site-option .purchase-site-details a img {
        width: auto;
        height: .8rem;
        vertical-align: middle
    }
}

@media screen and (max-width:768px) {
    .purchase-box .purchase-site-modal .purchase-site-option .purchase-site-details a {
        margin: 0 0 .1rem 0
    }
}

body {
    /* font-size: .14rem; */
    margin: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden
}

.wrapper {
    width: 3.12rem;
    margin: 0 auto
}

@media screen and (min-width:769px) {
    .wrapper {
        width: 1200px
    }
}

ul {
    padding: 0;
    margin: 0
}

ul li {
    list-style: none
}

a {
    text-decoration: none
}

button {
    padding: 0
}

.indiscernible {
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(0 0 99.9% 99.9%);
    clip-path: inset(0 0 99.9% 99.9%);
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0
}


/* h1,
h2,
h3,
h4,
h5,
h6,
p {
    font-weight: 400;
    margin: 0
} */

img {
    vertical-align: top;
    border: 0
}

figure {
    margin: 0;
    padding: 0
}

.header {
    background-color: #fff;
    -webkit-transition: background-color .1s;
    transition: background-color .1s;
    width: 100%;
    z-index: 11
}

@media screen and (max-width:768px) {
    .header {
        position: -webkit-sticky;
        position: sticky;
        top: 0
    }
    .header.app-style .nav-right .nav-search {
        display: block
    }
    .header.app-style .nav-right .menu-fold,
    .header.app-style .nav-right .nav-user {
        display: none
    }
}

@media screen and (min-width:769px) {
    .header {
        -webkit-box-shadow: 0 .02rem .2rem 0 rgba(0, 0, 0, .05);
        box-shadow: 0 .02rem .2rem 0 rgba(0, 0, 0, .05)
    }
}

.header.opacity {
    opacity: 0
}

.header .mall-plus {
    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;
    border-bottom: 1px solid #ebebeb
}

@media screen and (max-width:768px) {
    .header .mall-plus {
        display: none
    }
}

.header .wrapper {
    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;
    position: relative;
    height: .44rem
}

@media screen and (min-width:769px) {
    .header .wrapper {
        height: 60px
    }
}

@media screen and (max-width:768px) {
    .header .wrapper {
        width: 3.24rem;
        justify-items: flex-end
    }
}

.header .menu-fold {
    display: block;
    position: relative;
    z-index: 1000
}

@media screen and (min-width:769px) {
    .header .menu-fold {
        display: none
    }
}

.header .icon {
    width: .3rem;
    height: .3rem
}

@media screen and (min-width:769px) {
    .header .icon {
        width: 30px;
        height: 30px
    }
}

.header-fixed {
    position: fixed;
    top: 0
}

.header-fixed .mall-plus {
    display: none
}

.lines-ellipsis {
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.app-tabs {
    display: none
}

@media screen and (max-width:768px) {
    .app-tabs {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 3.6rem;
        padding: 0 .16rem .1rem;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: .54rem;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }
    .app-tabs .app-tab {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-size: .1rem;
        color: #333
    }
    .app-tabs .app-tab.cart {
        position: relative
    }
    .app-tabs .app-tab.cart .header-cart-count {
        position: absolute;
        display: block;
        width: .14rem;
        height: .14rem;
        background: #ff545d;
        color: #fff;
        font-size: .08rem;
        border-radius: 50%;
        right: -.06rem;
        top: -.06rem;
        line-height: .14rem
    }
    .app-tabs .app-tab.active {
        color: #ffc915
    }
    .app-tabs .app-tab .icon {
        display: block;
        width: .24rem;
        height: .24rem
    }
    .app-tabs .app-tab span {
        white-space: nowrap;
        text-align: center
    }
}

@media screen and (min-width:769px) {
    .header-plus {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 1200px;
        height: 36px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }
    .header-plus ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }
    .header-plus ul li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 36px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }
    .header-plus ul li:hover a {
        color: #ffc915
    }
    .header-plus ul li .icon {
        width: 16px;
        height: 16px;
        display: none
    }
    .header-plus ul li a {
        color: #666;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        cursor: pointer;
        height: 40px;
        font-size: 12px
    }
    .header-plus ul li>span {
        display: block;
        height: 34px;
        color: #b2b2b2;
        line-height: 34px
    }
    .header-plus ul li:nth-child(odd) {
        padding: 0 14px
    }
    .header-plus ul li:nth-child(odd) label {
        cursor: pointer
    }
    .header-plus ul li:nth-child(odd) #account-cart {
        color: #d0021b
    }
    .header-plus ul li:first-child {
        padding-left: 0
    }
}

.header .nav {
    display: none
}

@media screen and (min-width:769px) {
    .header .nav {
        display: block
    }
}

.header .nav ul.nav-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

@media screen and (min-width:769px) {
    .header .nav ul.nav-menu {
        /* width: 880px; */
        width: 100%;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: flex-end
    }
}

.header .nav ul.nav-menu>li {
    cursor: pointer
}

@media screen and (min-width:769px) {
    .header .nav ul.nav-menu>li {
        padding: 0 20px;
        height: 60px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }
    .header .nav ul.nav-menu>li.menu-tab {
        display: none
    }
}

.header .nav ul.nav-menu>li>a {
    font-size: 14px;
    line-height: 44px;
    display: block;
    color: #000;
    white-space: nowrap
}

.header .nav ul.nav-menu>li>a:hover {
    color: #00acff
}

@media screen and (min-width:769px) {
    .header .nav ul.nav-menu>li>a .icon {
        display: none
    }
}

.header .nav .nav-submenu-arrow {
    display: none
}

@media screen and (min-width:769px) {
    .header .nav .nav-submenu {
        position: absolute;
        left: 0;
        margin-left: 50%;
        top: 60px;
        width: 2560px;
        background: #fff;
        -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        visibility: hidden;
        min-height: 260px;
        opacity: 0;
        z-index: 8;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding: 30px 0
    }
    .header .nav .nav-submenu.visible {
        visibility: visible;
        opacity: 1;
        -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .15);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .15)
    }
    .header .nav .nav-submenu.visible .nav-submenu-wrapper {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1
    }
    .header .nav .nav-submenu .submenu-tabs {
        width: 220px
    }
    .header .nav .nav-submenu .submenu-tabs .secondary-menu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 40px;
        cursor: pointer;
        font-size: 14px
    }
    .header .nav .nav-submenu .submenu-tabs .secondary-menu .icon {
        display: none;
        width: 20px;
        height: 20px
    }
    .header .nav .nav-submenu .submenu-tabs .secondary-menu.active {
        /* font-weight: 700 */
        color: #00acff;
    }
    .header .nav .nav-submenu .submenu-tabs .secondary-menu.active .icon {
        display: block
    }
    .header .nav .nav-submenu .submenu-container {
        display: none
    }
    .header .nav .nav-submenu .submenu-container.visible {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%
    }
    .header .nav .nav-submenu .nav-submenu-wrapper {
        width: 1200px;
        overflow: hidden;
        padding-left: 0;
        position: relative;
        -webkit-transform: translate(0, 10px);
        -ms-transform: translate(0, 10px);
        transform: translate(0, 10px);
        opacity: 0;
        -webkit-transition: opacity ease-in-out .3s, -webkit-transform ease-in-out .3s;
        transition: opacity ease-in-out .3s, -webkit-transform ease-in-out .3s;
        transition: transform ease-in-out .3s, opacity ease-in-out .3s;
        transition: transform ease-in-out .3s, opacity ease-in-out .3s, -webkit-transform ease-in-out .3s;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }
    .header .nav .nav-submenu .secondary-menus {
        display: none
    }
    .header .nav .nav-submenu ul {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-transition: -webkit-transform .5s;
        transition: -webkit-transform .5s;
        transition: transform .5s;
        transition: transform .5s, -webkit-transform .5s
    }
    .header .nav .nav-submenu ul>li {
        cursor: pointer;
        width: 300px;
        height: 100px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 10px 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-top: 10px
    }
    .header .nav .nav-submenu ul>li.more-product {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        cursor: pointer
    }
    .header .nav .nav-submenu ul>li.more-product a {
        margin-left: 20px;
        color: #000
    }
    .header .nav .nav-submenu ul>li.more-product .more-accessories {
        margin-left: 10px
    }
    .header .nav .nav-submenu ul>li.more-product-mobile {
        display: none
    }
    .header .nav .nav-submenu ul>li>a {
        text-align: center;
        font-size: 14px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }
    .header .nav .nav-submenu ul>li>a .nav-submenu-img {
        margin-right: 20px;
        text-align: center;
    }
    .header .nav .nav-submenu ul>li>a .nav-submenu-img label {
        display: none
    }
    .header .nav .nav-submenu ul>li>a .nav-submenu-img img {
        width: 80px;
        height: 80px;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        text-align: center;
    }
    .header .nav .nav-submenu ul>li>a .nav-submenu-info {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start
    }
    .header .nav .nav-submenu ul>li>a .nav-submenu-info .nav-submenu-type {
        display: block;
        text-align: left;
        color: #2eb4cb
    }
    .header .nav .nav-submenu ul>li>a .nav-submenu-title {
        line-height: 18px;
        margin-top: 4px;
        color: #000;
        font-size: 14px;
        text-align: left;
        width: 175px
    }
    .header .nav .nav-submenu ul>li>a .nav-submenu-price {
        text-align: left;
        line-height: 22px;
        margin-top: 4px;
        color: #dd0b25;
        font-weight: 600
    }
    .header .nav .nav-submenu ul>li>a .nav-submenu-price i {
        font-style: normal;
        font-size: 12px;
        color: #6a6a6a
    }
}

.nav-right {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.nav-right a:last-child {
    margin-left: .1rem
}

.nav-right.app .nav-search {
    display: block
}

.nav-right.app .menu-fold,
.nav-right.app .nav-user {
    display: none
}

.nav-right .nav-cart {
    display: none
}

@media screen and (max-width:768px) {
    .nav-right {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        z-index: 100
    }
}

.nav-right .nav-user .red-point {
    position: relative
}

.nav-right .nav-user .red-point:after {
    position: absolute;
    content: '';
    display: block;
    width: .1rem;
    height: .1rem;
    border-radius: 50%;
    background: #d0021b;
    right: 0
}

.nav-right .nav-search {
    display: none
}

@media screen and (min-width:769px) {
    .nav-right {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end
    }
    .nav-right .nav-search {
        display: block;
        right: 70px;
        top: 5px;
        cursor: pointer
    }
    .nav-right a:last-child {
        /* margin-left: .7rem */
    }
    .nav-right .nav-cart {
        display: block
    }
    .nav-right .nav-user {
        -webkit-transform: translate(.06rem, 0);
        -ms-transform: translate(.06rem, 0);
        transform: translate(.06rem, 0)
    }
    .nav-right .nav-user.plus {
        display: none
    }
}

.nav-submenu-panel {
    position: fixed;
    background: #fff;
    height: 0;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 8;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity ease-in-out .3s, height ease-in-out .3s;
    transition: opacity ease-in-out .3s, height ease-in-out .3s;
    -webkit-box-shadow: 0 .02rem .2rem 0 rgba(0, 0, 0, .1);
    box-shadow: 0 .02rem .2rem 0 rgba(0, 0, 0, .1)
}

.nav-submenu-panel.visible {
    opacity: 1;
    visibility: visible;
    height: calc(100vh + 50px)
}

@media screen and (min-width:769px) {
    .nav-submenu-panel.visible {
        height: 304px
    }
}

@media screen and (max-width:768px) {
    .header .nav {
        position: absolute;
        left: 0;
        top: .44rem;
        overflow: auto;
        opacity: 0;
        -webkit-transition: opacity ease-in-out .3s;
        transition: opacity ease-in-out .3s;
        display: block;
        visibility: hidden;
        width: 3.6rem;
        margin-right: -.18rem;
        margin-left: -.18rem;
        height: calc(100vh - .88rem);
        padding-bottom: .4rem
    }
    .header .nav .icon {
        width: .24rem;
        height: .24rem
    }
    .header .nav.visible {
        opacity: 1;
        visibility: visible;
        background: #fff
    }
    .header .nav ul.nav-menu {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        width: 3.12rem;
        margin: 0 auto;
        padding-bottom: .44rem
    }
    .header .nav ul.nav-menu>li {
        width: 100%;
        padding: 0 0;
        min-height: .48rem
    }
    .header .nav ul.nav-menu>li.menu-tab {
        width: 1.56rem;
        min-height: .4rem
    }
    .header .nav ul.nav-menu>li.menus-last {
        border-bottom: .01rem solid #eee;
        padding-bottom: .2rem;
        margin-bottom: .1rem
    }
    .header .nav ul.nav-menu>li>a {
        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;
        font-size: .14rem
    }
    .header .nav ul.nav-menu>li>a .icon {
        width: .2rem;
        height: .2rem;
        -webkit-transition: -webkit-transform .3s;
        transition: -webkit-transform .3s;
        transition: transform .3s;
        transition: transform .3s, -webkit-transform .3s
    }
    .header .nav ul.nav-menu>li>a .icon.icon-arrow-rotate {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg)
    }
}

@media screen and (max-width:768px) {
    .header .nav .nav-submenu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 3.12rem;
        margin: 0 auto;
        max-height: 0;
        padding: 0 0;
        visibility: hidden;
        -webkit-transition: max-height ease-in-out .3s, visibility ease-in-out .3s, opacity ease-in-out .3s, padding ease-in-out .3s;
        transition: max-height ease-in-out .3s, visibility ease-in-out .3s, opacity ease-in-out .3s, padding ease-in-out .3s;
        overflow: hidden;
        opacity: 0
    }
    .header .nav .nav-submenu.visible {
        visibility: visible;
        max-height: 150vh;
        opacity: 1
    }
    .header .nav .nav-submenu .nav-submenu-wrapper .submenu-tabs {
        display: none
    }
    .header .nav .nav-submenu .nav-submenu-wrapper .secondary-menus {
        font-size: .14rem;
        height: .44rem;
        line-height: .44rem
    }
    .header .nav .nav-submenu .nav-submenu-wrapper .secondary-menus .secondary-menu {
        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;
        padding-left: .1rem
    }
    .header .nav .nav-submenu .nav-submenu-wrapper .secondary-menus .secondary-menu .icon {
        width: .2rem;
        height: .2rem
    }
    .header .nav .nav-submenu .nav-submenu-wrapper .secondary-products {
        height: 0;
        overflow: hidden;
        opacity: 0;
        -webkit-transition: height ease-in-out .3s, opacity ease-in-out .3s, padding ease-in-out .3s;
        transition: height ease-in-out .3s, opacity ease-in-out .3s, padding ease-in-out .3s
    }
    .header .nav .nav-submenu .nav-submenu-wrapper .secondary-products.visible {
        opacity: 1;
        height: 100%
    }
    .header .nav .nav-submenu ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 0 .2rem
    }
    .header .nav .nav-submenu ul>li {
        width: 1.04rem;
        display: none;
        margin-bottom: .1rem
    }
    .header .nav .nav-submenu ul>li:first-child {
        display: block
    }
    .header .nav .nav-submenu ul>li:nth-child(2) {
        display: block
    }
    .header .nav .nav-submenu ul>li:nth-child(3) {
        display: block
    }
    .header .nav .nav-submenu ul>li:nth-child(4) {
        display: block
    }
    .header .nav .nav-submenu ul>li:nth-child(5) {
        display: block
    }
    .header .nav .nav-submenu ul>li.more-product {
        display: none
    }
    .header .nav .nav-submenu ul>li.more-product-mobile {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 1.9rem
    }
    .header .nav .nav-submenu ul>li.more-product-mobile .icon {
        width: .36rem;
        height: .36rem
    }
    .header .nav .nav-submenu ul>li.more-product-mobile .more-accessories {
        margin-top: .2rem;
        color: #000
    }
    .header .nav .nav-submenu ul>li>a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-size: .12rem;
        line-height: .2rem;
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }
    .header .nav .nav-submenu ul>li>a .nav-submenu-img {
        text-align: center
    }
    .header .nav .nav-submenu ul>li>a .nav-submenu-img label {
        color: #21b9d3;
        height: .24rem;
        width: 100%;
        display: block;
        font-size: .1rem;
        text-align: center;
    }
    .header .nav .nav-submenu ul>li>a .nav-submenu-img img {
        width: .8rem;
        height: .8rem;
        text-align: center;
    }
    .header .nav .nav-submenu ul>li>a .nav-submenu-info {
        width: 1.2rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }
    .header .nav .nav-submenu ul>li>a .nav-submenu-info .nav-submenu-type {
        display: none
    }
    .header .nav .nav-submenu ul>li>a .nav-submenu-info span {
        display: block
    }
    .header .nav .nav-submenu ul>li>a .nav-submenu-info i {
        font-style: normal;
        font-size: .08rem;
        margin-right: .02rem;
        color: #6a6a6a
    }
    .header .nav .nav-submenu ul>li>a .nav-submenu-info i.right-start {
        margin-left: .02rem
    }
    .header .nav .nav-submenu ul>li>a .nav-submenu-info del {
        margin-left: .02rem
    }
    .header .nav .nav-submenu ul>li>a .nav-submenu-title {
        color: #000;
        margin-top: .1rem;
        margin-bottom: .04rem;
        text-align: center;
        line-height: .14rem;
        display: -ms-flexbox;
        display: flex;
        display: -webkit-box;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        text-overflow: ellipsis;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical
    }
    .header .nav .nav-submenu ul>li>a .nav-submenu-price {
        color: #dd0b25;
        font-weight: 600;
        padding-right: .03rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: baseline;
        -ms-flex-align: baseline;
        align-items: baseline
    }
}

.header-account {
    position: absolute;
    top: 44px;
    right: 0;
    width: 180px;
    z-index: 10;
    visibility: hidden;
    opacity: 0;
    height: 0;
    overflow: hidden;
    -webkit-transition: opacity .3s, visibility .3s, height .3s;
    transition: opacity .3s, visibility .3s, height .3s;
    background: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 20px
}

.header-account.plus {
    display: none
}

.header-account.plus-account-list {
    left: auto;
    top: 0;
    right: 110px
}

@media screen and (max-width:768px) {
    .header-account {
        width: 3.6rem;
        margin-right: -.18rem;
        margin-left: -.18rem;
        padding: .2rem .16rem
    }
    .header-account.plus {
        display: block
    }
}

.header-account.visible {
    visibility: visible;
    opacity: 1;
    height: auto;
    -webkit-transition: height .3s linear;
    transition: height .3s linear;
    -webkit-box-shadow: 0 4px 19px -2px rgba(0, 0, 0, .08);
    box-shadow: 0 4px 19px -2px rgba(0, 0, 0, .08)
}

@media screen and (max-width:768px) {
    .header-account.visible {
        height: 100vh;
        -webkit-box-shadow: none;
        box-shadow: none
    }
}

.header-account li {
    width: 100%;
    height: 32px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #fff;
    cursor: pointer
}

.header-account li:hover a {
    color: #ffc915
}

.header-account li #account-cart {
    color: #d0021b
}

@media screen and (max-width:768px) {
    .header-account li {
        width: 100%;
        height: .36rem;
        line-height: .36rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-line-pack: center;
        align-content: center
    }
    .header-account li:last-child {
        margin-top: .1rem
    }
    .header-account li:last-child a {
        width: 100%;
        height: .4rem;
        background: #f4f4f4;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }
}

.header-account a {
    color: #000;
    line-height: .18rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: left;
    -ms-flex-pack: left;
    justify-content: left;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media screen and (min-width:769px) {
    .header-account a {
        line-height: 18px
    }
}

.header-account a label {
    cursor: pointer
}

.lang-id .header-account ul {
    padding: .1rem .2rem .17rem
}

@media screen and (min-width:769px) {
    .lang-id .header-account ul {
        padding: .1rem .4rem .17rem
    }
}

.lang-id .header-account a .icon {
    margin-left: .06rem
}

@media screen and (min-width:769px) {
    .lang-id .header-account a .icon {
        margin-left: .06rem;
        width: .3rem;
        height: .3rem
    }
}

.lang-cz .header-account .header-account-panel,
.lang-es .header-account .header-account-panel,
.lang-eu .header-account .header-account-panel,
.lang-it .header-account .header-account-panel,
.lang-uk .header-account .header-account-panel {
    width: auto!important
}

@media screen and (min-width:769px) {
    .logo .icon-logo {
        position: relative;
        z-index: 10;
        width: 80px;
        height: 24px
    }
}

@media screen and (max-width:768px) {
    .logo .icon-logo {
        width: .74rem;
        height: .22rem
    }
}

@media screen and (min-width:769px) {
    .logo .icon-logo.cn {
        position: relative;
        z-index: 10;
        width: 120px;
        height: 24px
    }
}

@media screen and (max-width:768px) {
    .logo .icon-logo.cn {
        width: .93rem;
        height: .19rem
    }
}

.logo .logo-dist {
    width: .2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline
}

.logo .logo-dist .logo-r-left {
    background-image: url(../fonts/0be5281fa2b94c828d6bde6bd7521483.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center;
    width: .07em;
    height: .13rem;
    background-size: auto 100%;
    opacity: 1;
    -webkit-transition: opacity ease-in-out .2s;
    transition: opacity ease-in-out .2s
}

.logo .logo-dist .logo-r-right {
    background-image: url(../fonts/6e82614bd821464b9c115022596dff02.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center;
    width: .12rem;
    height: .17rem;
    background-size: auto 100%;
    -webkit-transform: translate(-.07rem, 0);
    -ms-transform: translate(-.07rem, 0);
    transform: translate(-.07rem, 0);
    opacity: 1;
    -webkit-transition: opacity .5s;
    transition: opacity .5s
}

.logo .logo-src {
    position: absolute;
    left: -.22rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    visibility: hidden
}

.logo .logo-src .logo-r {
    background-image: url(../fonts/5355aed633584d8fa2fd751a275ec31d.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center;
    width: .06rem;
    height: .1rem;
    background-size: auto 100%;
    -webkit-transform: translate(.2rem, 0);
    -ms-transform: translate(.2rem, 0);
    transform: translate(.2rem, 0);
    opacity: 0;
    -webkit-transition: all ease-in-out .3s .1s;
    transition: all ease-in-out .3s .1s
}

.logo .logo-src .logo-e {
    background-image: url(../fonts/82d5d4c99cf34495b7a98c40bea3ce1f.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center;
    width: .1rem;
    height: .1rem;
    background-size: auto 100%;
    -webkit-transform: translate(.15rem, 0);
    -ms-transform: translate(.15rem, 0);
    transform: translate(.15rem, 0);
    opacity: 0;
    -webkit-transition: all ease-in-out .2s .1s;
    transition: all ease-in-out .2s .1s
}

.logo .logo-src .logo-a {
    background-image: url(../fonts/09c51f161058437190beffc36efac583.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center;
    width: .1rem;
    height: .1rem;
    margin-left: .01rem;
    background-size: auto 100%;
    -webkit-transform: translate(.05rem, 0);
    -ms-transform: translate(.05rem, 0);
    transform: translate(.05rem, 0);
    opacity: 0;
    -webkit-transition: all ease-in-out .3s .1s;
    transition: all ease-in-out .3s .1s
}

.logo .logo-src .logo-l {
    background-image: url(../fonts/646579f39cd14b14970a73875c327e12.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center;
    background-size: auto 100%;
    width: .02rem;
    height: .14rem;
    margin-left: .02rem;
    background-size: auto 100%;
    -webkit-transform: translate(-.03rem, 0);
    -ms-transform: translate(-.03rem, 0);
    transform: translate(-.03rem, 0);
    opacity: 0;
    -webkit-transition: all ease-in-out .1s .1s;
    transition: all ease-in-out .1s .1s
}

.logo .logo-src .logo-m {
    background-image: url(../fonts/a3d5fff03b9740599d33cd069dc4d22c.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center;
    width: .14rem;
    height: .1rem;
    margin-left: .02rem;
    background-size: auto 100%;
    -webkit-transform: translate(-.13rem, 0);
    -ms-transform: translate(-.13rem, 0);
    transform: translate(-.13rem, 0);
    opacity: 0;
    -webkit-transition: all ease-in-out .2s .1s;
    transition: all ease-in-out .2s .1s
}

.logo .logo-src .logo-e-last {
    background-image: url(../fonts/82d5d4c99cf34495b7a98c40bea3ce1f.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center;
    width: .1rem;
    height: .1rem;
    margin-left: .01rem;
    background-size: auto 100%;
    -webkit-transform: translate(-.25rem, 0);
    -ms-transform: translate(-.25rem, 0);
    transform: translate(-.25rem, 0);
    opacity: 0;
    -webkit-transition: all ease-in-out .3s .1s;
    transition: all ease-in-out .3s .1s
}

.logo .logo-dist.animate span {
    opacity: 0
}

.logo .logo-src.animate {
    visibility: visible
}

.logo .logo-src.animate span {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1
}

.header-notify {
    background: #111;
    display: none;
    color: #fff;
    left: 0;
    top: 0;
    z-index: 9;
    width: 100%;
    font-size: 14px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

@media screen and (max-width:768px) {
    .header-notify {
        font-size: .1rem;
        line-height: .14rem
    }
}

.header-notify .wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

@media screen and (max-width:768px) {
    .header-notify .wrapper {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
}

.header-notify .wrapper p {
    line-height: 40px
}

@media screen and (max-width:768px) {
    .header-notify .wrapper p {
        line-height: .16rem;
        padding: .04rem 0;
        width: 3rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }
}

.header-notify .wrapper .icon-notify-close {
    width: 16px;
    height: 16px;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer
}

@media screen and (max-width:768px) {
    .header-notify .wrapper .icon-notify-close {
        position: static;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
        width: .16rem;
        height: .16rem
    }
}

.header-notify .notify-bg-wrapper {
    position: relative;
    text-align: center
}

.header-notify .notify-bg-wrapper .header-notify-bg {
    width: 1920px
}

@media screen and (max-width:768px) {
    .header-notify .notify-bg-wrapper .header-notify-bg {
        width: 3.6rem
    }
}

@media screen and (max-width:768px) {
    .header-notify .notify-bg-wrapper .header-notify-bg.pc {
        display: none
    }
}

.header-notify .notify-bg-wrapper .header-notify-bg.mobile {
    display: none
}

@media screen and (max-width:768px) {
    .header-notify .notify-bg-wrapper .header-notify-bg.mobile {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }
}

.header-notify .notify-bg-wrapper .icon-notify-wrapper {
    position: absolute;
    width: 1200px;
    left: 50%;
    top: 0;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

@media screen and (max-width:768px) {
    .header-notify .notify-bg-wrapper .icon-notify-wrapper {
        width: 3.6rem
    }
}

.header-notify .notify-bg-wrapper .icon-notify-wrapper .icon-notify-container {
    position: absolute;
    top: 12px;
    right: 0;
    width: 30px;
    height: 30px;
    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
}

@media screen and (max-width:768px) {
    .header-notify .notify-bg-wrapper .icon-notify-wrapper .icon-notify-container {
        top: .12rem;
        right: .08rem;
        width: .24rem;
        height: .24rem
    }
}

.header-notify .notify-bg-wrapper .icon-notify-wrapper .icon-notify-container .icon-notify-close.icon-close-w {
    width: 16px;
    height: 16px;
    cursor: pointer
}

@media screen and (max-width:768px) {
    .header-notify .notify-bg-wrapper .icon-notify-wrapper .icon-notify-container .icon-notify-close.icon-close-w {
        width: .16rem;
        height: .16rem
    }
}

@media screen and (max-width:768px) {
    .product-nav {
        top: .6rem
    }
}

@media screen and (min-width:769px) {
    .header-plus-visible .product-nav {
        top: 136px
    }
}

.header-notify-visible .header-notify {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

@media screen and (min-width:769px) {
    .header-notify-visible .product-nav {
        top: 180px
    }
}

@media screen and (min-width:769px) {
    .header-app-visable .product-nav {
        top: 180px
    }
}

.header-app-visable body {
    padding-top: 0
}

@media screen and (max-width:768px) {
    .header-app-visable body {
        padding-top: 0
    }
}

.toApp-header {
    display: none;
    margin: 0 auto;
    background: #1c1b1b
}

@media screen and (max-width:768px) {
    .toApp-header {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 0 .1rem;
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }
}

.toApp-header .toApp-wrapper {
    width: 12rem;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    height: .44rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

@media screen and (max-width:768px) {
    .toApp-header .toApp-wrapper {
        width: 3.28rem;
        padding-right: .24rem
    }
}

.toApp-header .toApp-header--title {
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media screen and (max-width:768px) {
    .toApp-header .toApp-header--title {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: initial;
        -ms-flex-align: initial;
        align-items: initial;
        font-size: .1rem;
        line-height: .12rem
    }
}

.toApp-header .app-icon {
    width: .32rem;
    margin-right: .16rem
}

@media screen and (max-width:768px) {
    .toApp-header .app-icon {
        margin-right: .1rem
    }
}

.toApp-header .close-icon--app {
    width: .16rem;
    cursor: pointer;
    position: absolute;
    right: 0
}

.toApp-header .description {
    margin-left: .16rem;
    font-size: .12rem;
    width: 3rem;
    color: #bbb
}

@media screen and (max-width:768px) {
    .toApp-header .description {
        width: initial;
        margin-left: 0;
        font-size: .1rem
    }
}

.toApp-header .r-button {
    width: 1rem;
    height: .24rem;
    border-radius: .12rem;
    font-size: .1rem;
    -webkit-transition: background-color ease-in-out .2s, color ease-in-out .2s, border-color ease-in-out .2s;
    transition: background-color ease-in-out .2s, color ease-in-out .2s, border-color ease-in-out .2s;
    color: #000;
    background: #fff;
    border: none;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.toApp-header .r-button:hover {
    background: #ffc915;
    color: #000
}

@media screen and (max-width:768px) {
    .toApp-header .r-button {
        width: .72rem;
        height: .24rem
    }
    .toApp-header .r-button:hover {
        background: #ffc915;
        color: #000
    }
}

.search-bar {
    position: absolute;
    left: 0;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background: #fff;
    display: none;
    height: .44rem
}

@media screen and (min-width:769px) {
    .search-bar {
        z-index: 10001;
        height: 60px
    }
}

.search-bar .search-container {
    width: 600px;
    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;
    position: relative
}

.search-bar .search-container .search-input-container {
    position: relative;
    height: 60px
}

.search-bar .search-container .search-input-container .search-action {
    display: none
}

.search-bar .search-container .search-input-container .icon-close {
    display: none
}

.search-bar .search-container .search-input-container .search-input {
    width: 1200px;
    outline: 0;
    height: 60px;
    line-height: 60px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: none;
    font-size: 14px;
    padding-right: 36px
}

.search-bar .search-container .search-input-container .icon {
    position: absolute;
    top: 15px;
    cursor: pointer
}

.search-bar .search-container .search-input-container .icon.left {
    right: 50px;
    opacity: .3
}

.search-bar .search-container .search-input-container .icon.left:hover {
    opacity: 1
}

.search-bar .search-container .search-input-container .icon.right {
    right: 0
}

.search-bar .search-container .hot-search {
    position: absolute;
    top: 60px;
    width: 2560px;
    background: #fff;
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .15);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .15);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.search-bar .search-container .hot-search .hot-search-container {
    width: 1200px;
    padding: 10px 0;
    font-size: 14px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-height: 178px
}

.search-bar .search-container .hot-search .hot-title {
    height: 40px;
    line-height: 40px;
    color: #9b9b9b
}

.search-bar .search-container .hot-search ul li {
    height: 40px;
    line-height: 40px;
    cursor: pointer
}

.search-bar .search-container .hot-search ul li:hover {
    color: #fbbd0f
}

@media screen and (max-width:768px) {
    .search-bar .search-container {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start
    }
    .search-bar .search-container .search-input-container {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: auto
    }
    .search-bar .search-container .search-input-container .search-action {
        display: none
    }
    .search-bar .search-container .search-input-container .search-input {
        width: 2.46rem;
        outline: 0;
        background: #f2f2f2;
        height: .32rem;
        line-height: .32rem;
        text-indent: .3rem;
        font-size: .12rem;
        padding-right: .36rem;
        border-radius: .2rem
    }
    .search-bar .search-container .search-input-container .icon {
        position: absolute;
        width: .16rem;
        height: .16rem;
        top: .08rem;
        cursor: pointer;
        opacity: .5
    }
    .search-bar .search-container .search-input-container .icon.left {
        right: .08rem;
        left: auto;
        opacity: .5;
        display: none
    }
    .search-bar .search-container .search-input-container .icon.right {
        left: .08rem;
        right: auto
    }
    .search-bar .search-container .hot-search {
        display: none;
        position: absolute;
        top: .38rem;
        width: 3.6rem;
        background: #fff;
        font-size: 12px;
        height: 100vh;
        left: -.18rem
    }
    .search-bar .search-container .hot-search .hot-search-container {
        width: 100%;
        padding: 0 .16rem;
        font-size: .12rem;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }
    .search-bar .search-container .hot-search .hot-title {
        padding: .1rem 0;
        height: auto;
        line-height: .2rem;
        font-size: .14rem
    }
    .search-bar .search-container .hot-search ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        font-size: .12rem
    }
    .search-bar .search-container .hot-search ul li {
        height: .28rem;
        line-height: .28rem;
        text-align: center;
        padding: .05rem .1rem;
        margin-right: .08rem;
        border-radius: .03rem;
        margin-bottom: .1rem;
        cursor: pointer;
        background: #f4f4f5
    }
}

.header .center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.header .product-show .navproduct {
    position: absolute;
    height: 0;
    width: 19.2rem;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    background-color: #f9f9f9;
    -webkit-box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, .1);
    box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, .1);
    -webkit-transition: height ease-out .3s;
    transition: height ease-out .3s;
    z-index: 2;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.header .product-show .navproduct.navproduct-hover {
    height: 200px
}

.header .product-show .navproduct.navproduct-price.navproduct-hover {
    height: 220px
}

.header .product-show .navproduct.navproduct-price .navpro-list li a {
    height: auto;
    padding-bottom: 28px
}

@media screen and (max-width:768px) {
    .header .product-show .navproduct.navproduct-price .navpro-list li a {
        height: 1.1rem
    }
}

.header .product-show .navproduct .navpro-list {
    width: 900px;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    padding: 0 40px
}

.header .product-show .navproduct .navpro-list .more-arrow-right {
    position: absolute;
    top: 15px;
    right: 0;
    width: 40px;
    height: 190px;
    cursor: pointer;
    background: #f9f9f9;
    background-image: url(../fonts/arrow.svg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.header .product-show .navproduct .navpro-list .more-arrow-left {
    display: none;
    position: absolute;
    top: 15px;
    left: 0;
    width: 40px;
    height: 190px;
    cursor: pointer;
    background: #f9f9f9;
    background-image: url(../fonts/arrow.svg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center;
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg)
}

.header .product-show .navproduct .navpro-list .navpro-ul-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    float: initial;
    padding-right: 0;
    position: relative;
    left: 0;
    top: 0;
    -webkit-transition: left .3s ease-in;
    transition: left .3s ease-in;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.header .product-show .navproduct .navpro-list .navpro-ul-list li {
    background: #fff;
    margin: 15px 10px;
    padding: 0;
    position: relative
}

.header .product-show .navproduct .navpro-list .navpro-ul-list li a {
    display: block;
    height: 160px;
    width: 160px;
    background: #fff
}

.header .product-show .navproduct .navpro-list .navpro-ul-list li a img {
    width: 160px;
    margin-top: 15px
}

.header .product-show .navproduct .navpro-list .navpro-ul-list li a .product-name h3 {
    font-family: OpenSans-Regular, "PingFang SC", "Microsoft YaHei", sans-serif, Arial;
    font-size: 16px;
    color: #333;
    text-align: center;
    line-height: 24px;
    margin-top: 2px
}

.header .product-show .navproduct .navpro-list .navpro-ul-list li a .product-name span.new-tip {
    position: absolute;
    top: 7px;
    left: 64px;
    font-size: 12px;
    color: #1890ff;
    font-family: OpenSans-Semibold, "PingFang SC", "Microsoft YaHei", sans-serif, Arial;
    line-height: 17px
}

.header .product-show .navproduct .navpro-list .navpro-ul-list li a .navpro-price {
    font-size: 16px;
    color: #fa6f16;
    letter-spacing: 0;
    text-align: center;
    line-height: 22px
}

@media screen and (max-width:768px) {
    .header .product-show .navproduct .navpro-list .navpro-ul-list li a .navpro-price {
        float: right;
        margin-top: .42rem;
        line-height: .24rem
    }
}

.header .mask-layer {
    opacity: 0;
    height: 100vh;
    display: none;
    position: absolute;
    background: rgba(0, 0, 0, .3);
    width: 19.2rem;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    margin-left: 50%;
    top: 76px;
    left: 0;
    -webkit-transition: opacity .3s;
    transition: opacity .3s
}

.header .mask-layer.mask-layer-active {
    opacity: 1;
    display: block
}

@media screen and (max-width:768px) {
    .header .product-show {
        position: relative
    }
    .header .product-show .nav-arrow {
        height: .48rem;
        width: .48rem;
        display: inline-block;
        position: absolute;
        right: .17rem;
        top: .04rem;
        background-image: url(../fonts/ic_nav_product_more.svg);
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: top center;
        background-size: 50%;
        -webkit-transition: -webkit-transform .3s;
        transition: -webkit-transform .3s;
        transition: transform .3s;
        transition: transform .3s, -webkit-transform .3s
    }
    .header .product-show .nav-more-arrow {
        -webkit-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
        transform: rotate(-180deg)
    }
    .header .product-show .navproduct {
        position: relative;
        width: 2.96rem;
        margin-left: 1.5rem;
        left: 0;
        top: 0;
        -webkit-box-shadow: #fff;
        box-shadow: #fff;
        background: #fff;
        opacity: 0;
        border-bottom: none;
        -webkit-transition: height .4s ease, opacity .4s ease;
        transition: height .4s ease, opacity .4s ease
    }
    .header .product-show .navproduct.navproduct-active-click {
        opacity: 1;
        border-bottom: solid .01rem rgba(51, 51, 51, .1)
    }
    .header .product-show .navproduct .navpro-list {
        height: 100%;
        padding: 0
    }
    .header .product-show .navproduct .navpro-list .more-arrow-right {
        display: none
    }
    .header .product-show .navproduct .navpro-list .more-arrow-left {
        display: none
    }
    .header .product-show .navproduct .navpro-list .navpro-ul-list {
        margin-top: .01rem;
        padding-top: 0;
        height: 100%;
        display: block
    }
    .header .product-show .navproduct .navpro-list .navpro-ul-list li {
        margin: 0;
        padding: 0 .32rem
    }
    .header .product-show .navproduct .navpro-list .navpro-ul-list li a {
        height: 1.1rem;
        width: 2.64rem
    }
    .header .product-show .navproduct .navpro-list .navpro-ul-list li a img {
        width: 1rem;
        height: .8rem;
        float: left;
        margin: .13rem 0 0 -.31rem
    }
    .header .product-show .navproduct .navpro-list .navpro-ul-list li a .product-name {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start
    }
    .header .product-show .navproduct .navpro-list .navpro-ul-list li a .product-name h3 {
        font-family: OpenSans-Regular, "PingFang SC", "Microsoft YaHei", sans-serif, Arial;
        font-size: .16rem;
        color: #333;
        text-align: center;
        line-height: .24rem;
        margin-top: .42rem;
        margin-left: -.16rem;
        float: left
    }
    .header .product-show .navproduct .navpro-list .navpro-ul-list li a .product-name span.new-tip {
        position: static
    }
    .header .product-show .navproduct .navpro-list .navpro-ul-list li:last-child a {
        border-bottom: none
    }
    .header .product-show a {
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }
    .header .product-show a.nav-line {
        border: none
    }
}

.product-nav {
    width: 100%;
    z-index: 2;
    border-bottom: 1px solid rgba(51, 51, 51, .15)
}

.product-nav .product-name {
    display: inline;
    font-size: 16px;
    line-height: .72rem
}

.product-nav .product-btn {
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer
}

.product-nav .product-btn .btn {
    border-color: #ffc915;
    background: #ffc915;
    color: #fff;
    font-size: 16px;
    line-height: 24px;
    border-radius: 4px
}

.product-nav .product-btn .btn:hover {
    border-color: #e4b30f;
    background: #e4b30f
}

.product-nav .product-menu {
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0)
}

.product-nav .product-menu:after,
.product-nav .product-menu:before {
    content: "";
    display: table;
    clear: both
}

.product-nav .product-menu li {
    float: left;
    text-align: center;
    margin: 0 .36rem
}

.product-nav .product-menu li a {
    font-size: 16px;
    line-height: .72rem;
    display: block;
    color: rgba(51, 51, 51, .5)
}

.product-nav .product-menu li a.active {
    color: #333
}

.product-nav .product-menu li a:hover {
    color: #333
}

.product-nav.product-nav-fixed {
    position: fixed;
    top: 0;
    z-index: 20;
    background: #fff
}

.product-nav.product-nav-fixed .product-menu li a {
    color: rgba(51, 51, 51, .5)
}

.product-nav.product-nav-fixed .product-menu li a.active {
    color: #333
}

.product-nav.product-nav-fixed .product-menu li a:hover {
    color: #333
}

.product-nav.product-nav-fixed .wrapper .product-name {
    color: #333
}

@media screen and (max-width:768px) {
    .product-nav.product-nav-fixed .wrapper .product-more {
        background-image: url(../fonts/ic_nav_product_more.svg)
    }
}

@media screen and (max-width:768px) {
    .product-nav {
        background: #fff
    }
    .product-nav.realme2-line {
        border-bottom: none
    }
    .product-nav.product-nav-white {
        background: #fff
    }
    .product-nav.product-nav-white .wrapper .product-name {
        color: #333
    }
    .product-nav.product-nav-white .wrapper .product-more {
        background-image: url(../fonts/ic_nav_product_more.svg)
    }
    .product-nav.product-nav-black .wrapper .product-name {
        color: #333
    }
    .product-nav.product-nav-black .wrapper .product-more {
        background-image: url(../fonts/ic_nav_product_more.svg)
    }
    .product-nav .wrapper {
        width: 3.24rem;
        height: auto;
        padding: 0 .04rem 0 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }
    .product-nav .wrapper .product-btn {
        right: .16rem
    }
    .product-nav .wrapper .product-btn .btn {
        padding: .02rem .08rem;
        font-size: .12rem
    }
    .product-nav .wrapper .product-name {
        line-height: .6rem;
        font-size: .16rem
    }
    .product-nav .wrapper .product-menu {
        position: absolute;
        top: .58rem;
        left: 0;
        -webkit-transform: inherit;
        -ms-transform: inherit;
        transform: inherit;
        width: 100%;
        height: 0;
        opacity: 0;
        z-index: 1;
        display: none
    }
    .product-nav .wrapper .product-menu li {
        display: block;
        width: 100%;
        float: none;
        margin: 0
    }
    .product-nav .wrapper .product-menu li a {
        font-size: .16rem;
        line-height: .56rem
    }
    .product-nav .wrapper .product-menu.product-menu-active {
        opacity: 1;
        background: #fff;
        height: auto;
        display: block
    }
    .product-nav .wrapper .product-menu.product-menu-active li a {
        color: rgba(51, 51, 51, .5)
    }
    .product-nav .wrapper .product-menu.product-menu-active li a.active {
        color: #333
    }
    .product-nav .wrapper .product-menu.product-menu-active li a:hover {
        color: #333
    }
    .product-nav .wrapper .product-more {
        right: 1.51rem;
        top: .05rem;
        margin-right: .045rem;
        height: .48rem;
        width: .48rem;
        display: inline-block;
        position: absolute;
        background-image: url(../fonts/ic_nav_product_more.svg);
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: top center;
        background-size: 50%;
        -webkit-transition: -webkit-transform .3s;
        transition: -webkit-transform .3s;
        transition: transform .3s;
        transition: transform .3s, -webkit-transform .3s
    }
    .product-nav .wrapper .product-more-arrow {
        -webkit-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
        transform: rotate(-180deg)
    }
    .product-nav .wrapper .product-mask {
        height: 100vh;
        position: absolute;
        top: .61rem;
        width: 100%;
        margin-left: -.16rem;
        opacity: 0;
        display: none;
        background-color: rgba(0, 0, 0, .5);
        -webkit-transition: opacity .3s;
        transition: opacity .3s
    }
    .product-nav .wrapper .product-mask.product-mask-active {
        opacity: 1;
        display: block
    }
}

.horizontal-screen {
    display: none;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    z-index: 101
}

.horizontal-screen.fiexd {
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: fixed;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%)
}

.horizontal-screen .horizontal-screen-icon {
    margin-top: 35vh;
    width: 120px;
    height: 120px;
    background-image: url(../fonts/4122cfa72429472ca96937d65c421769.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-logo.cn {
    background-image: url(../fonts/4463ae9d44d24265ab8097e95000eaae.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-user-simple {
    background-image: url(../fonts/b390f57625084a589b1d262927e37ca2.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-user {
    background-image: url(../fonts/bde596e261a1401e9dbf1a44df92c354.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-cart {
    background-image: url(../fonts/a84090766a844c388500a8da57cb017d.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-menu {
    background-image: url(../fonts/e344ab9b0d5f48cd8ddbbb87ec2d8901.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center;
    -webkit-transition: background-image .2s;
    transition: background-image .2s;
    background-size: auto .3rem;
    background-position: center center
}

.icon-menu.icon-menu-open {
    background-image: url(../fonts/3334b5aef588439392bb6094e80b7d48.woff)
}

.icon-s-7tian {
    background-image: url(../fonts/ccf6b7d83d3d4167982d504c3691f781.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-s-baoyou {
    background-image: url(../fonts/1b63ba0119f54e4eb17dede173c0e8d6.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-s-huanhuo {
    background-image: url(../fonts/8894d751d0c6484dab96dbed393d86c7.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-s-zhengpin {
    background-image: url(../fonts/507cc7b09f9045308796ab819ed9ec72.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-plus {
    background-image: url(../fonts/c39b5db33cd14b688f46b48666845148.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-less {
    background-image: url(../fonts/40f828da476c4c5fb73a0fc3179e9051.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-close {
    background-image: url(../fonts/5d6f72bc748b454a94bbf0802a004a85.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-china {
    background-image: url(../fonts/china-7740bf67d9.svg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-chat {
    background-image: url(../fonts/c45b7e2afb02425ab82af92476a1333d.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-weibo {
    background-image: url(../fonts/9dd4103f506e4dd4bb8fd84cf2a25639.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-wechat {
    background-image: url(../fonts/a3150d428cbd4bc3b1cd4e7c8758abfc.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-emblem {
    background-image: url(../fonts/6c9286fe247443ce837edda6dca382c4.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-order {
    background-image: url(../fonts/4355889e199248d3bca130dfe30c507e.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-rpass {
    background-image: url(../fonts/5789e9ea0ecf42129fe8d9d2f3984464.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-userinfo {
    background-image: url(../fonts/51e5008327ba48fc92a464598b40340c.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-address {
    background-image: url(../fonts/8a0d30a954784c938c517d9cb84c45c1.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-coupon {
    background-image: url(../fonts/098b43b060a64f24af3301632b95a796.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-register {
    background-image: url(../fonts/bde596e261a1401e9dbf1a44df92c354.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-arrow-right {
    background-image: url(../fonts/f43b00ca7d484de6a87fcce30f5526d5.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-arrow-down {
    background-image: url(../fonts/5cbda28642d24fad8e4b0ee566fd82b1.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-facebook {
    background-image: url(../fonts/bd7592f4db0a4d84bf2d9d08d067aaee.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-instagram {
    background-image: url(../fonts/ec9e74da5901413695598d243d560e78.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-twitter {
    background-image: url(../fonts/07da7b73d77d424e8222a4b1862676a3.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-youtube {
    background-image: url(../fonts/9c1ed21f75cb4570a02a278fc554a49f.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-s-cod {
    background-image: url(../fonts/dcd1bd03d6b6425c87ccca33942c3a0a.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-s-freeshipping {
    background-image: url(../fonts/e572f70f845a42dbb05eef1a2a1c979e.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-s-online {
    background-image: url(../fonts/c4d5c9c564fd4ae09d0cee07825d6c8c.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-s-payment {
    background-image: url(../fonts/4fa69ef611d0480d9f08d5d155b4e403.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-notify-close {
    background-image: url(../fonts/ff9ae9a6c1614e8fab95a7d1b761d160.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-payment-rp {
    background-image: url(../fonts/946049381f13461bb6a59c9a77cbe794.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-cod-rp {
    background-image: url(../fonts/f8bc4a6f16fd4ad09639a3b4973e3403.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-search {
    background-image: url(../fonts/1c12b5b1de0045238d1b269b4c9864bd.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-secure-au {
    background-image: url(../fonts/898809f2574e4461b06fdc75f941b06c.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-warranty-au {
    background-image: url(../fonts/13d4712fce654fada769aa3169caacba.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-reviews {
    background-image: url(../fonts/19551470fd80452d91283a9d51269019.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-s-cod-eu {
    background-image: url(../fonts/bb2295dbfff943568b70810d1c1f66ff.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-s-payment-eu {
    background-image: url(../fonts/9b7dca62b4f14544b2b3049f8cad4d38.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-telegram {
    background-image: url(../fonts/92a9466ebf4b460c9653e1770b23d819.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-more-product {
    background-image: url(../fonts/e770bbaa4b4746219400714df329c121.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-close-white {
    background-image: url(../fonts/c36d2be1ff42457484e3fb3934b01f40.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-close-w {
    background-image: url(../fonts/e71a575929c34e57b1e3527ccf6c97bd.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-app-cart.active {
    background-image: url(../fonts/83fe67a44c9c469ca64f453af1d70dba.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-app-categories {
    background-image: url(../fonts/42196ca08c074c6890967454bb15ea48.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-app-categories.active {
    background-image: url(../fonts/8756dc69f469420fbaed0e9b4efcbdd0.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-app-home {
    background-image: url(../fonts/e065a39399804e69a5469001084558fc.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-app-home.active {
    background-image: url(../fonts/243f0ccf3ff04deb9491164e5cda92a7.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-app-me {
    background-image: url(../fonts/95e09609bd4e43efb8eab6319dd92cee.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.icon-app-me.active {
    background-image: url(../fonts/b4aedee936f54d1b8ed4086d8e5332bb.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.footer {
    background: #fff
}

@media screen and (max-width:768px) {
    .footer.app-style .r-cookie {
        bottom: .54rem
    }
}

.sec-no-public img {
    height: 1.8rem
}

@media screen and (min-width:769px) {
    .sec-no-public img {
        height: 4rem;
        position: relative;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%)
    }
}

.footer-services {
    padding: .2rem 0;
    background: #fff
}

@media screen and (min-width:769px) {
    .footer-services {
        display: block;
        -webkit-box-shadow: none;
        box-shadow: none;
        padding-bottom: 0
    }
}

.footer-services .wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

@media screen and (max-width:768px) {
    .footer-services .wrapper {
        width: 3.6rem;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 0 .08rem;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }
}

.footer-services .footer-service {
    text-align: center;
    font-size: .12rem;
    line-height: .18rem;
    color: #6a6a6a;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: .1rem
}

.footer-services .footer-service .icon {
    width: .24rem;
    height: .24rem;
    margin-bottom: .12rem
}

@media screen and (max-width:768px) {
    .footer-services .footer-service span {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: .86rem;
        height: .24rem;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        line-height: .12rem
    }
}

@media screen and (min-width:769px) {
    .footer-services .footer-service {
        width: 25%;
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 20px
    }
    .footer-services .footer-service .icon {
        width: 40px;
        height: 40px;
        margin-bottom: 10px
    }
}

.lang-au .footer-services .wrapper,
.lang-cz .footer-services .wrapper,
.lang-es .footer-services .wrapper,
.lang-eu .footer-services .wrapper,
.lang-fr .footer-services .wrapper,
.lang-it .footer-services .wrapper,
.lang-uk .footer-services .wrapper {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.footer-center .footer-services {
    display: block
}

@media screen and (min-width:769px) {
    .footer-center .footer-services {
        display: none
    }
}

@media screen and (min-width:769px) {
    .footer-center {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 1200px;
        margin: 0 auto;
        padding: 50px 0 10px 0
    }
    .footer-center .footer-menus {
        width: 880px
    }
    .footer-center .footer-contact {
        width: 202px
    }
}

.footer-menus {
    background: #fff
}

@media screen and (max-width:768px) {
    .footer-menus {
        padding: .16rem 0
    }
}

@media screen and (min-width:769px) {
    .footer-menus {
        background: 0 0
    }
}

.footer-menus .icon {
    width: .2rem;
    height: .2rem
}

@media screen and (min-width:769px) {
    .footer-menus .icon {
        display: none
    }
}

.footer-menus .wrapper {
    width: 3.28rem
}

@media screen and (min-width:769px) {
    .footer-menus .wrapper {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }
}

@media screen and (min-width:769px) {
    .footer-menus .footer-menu {
        width: 220px;
        border-bottom: 0
    }
}

@media screen and (max-width:768px) {
    .footer-menus .footer-menu {
        margin-bottom: .12rem
    }
    .footer-menus .footer-menu:last-child {
        margin-bottom: 0
    }
}

.footer-menus .footer-menu .footer-menu-title {
    font-size: .12rem;
    color: #000;
    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;
    line-height: .28rem;
    font-weight: 700
}

.footer-menus .footer-menu .footer-menu-title .icon {
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s
}

@media screen and (min-width:769px) {
    .footer-menus .footer-menu .footer-menu-title {
        margin-bottom: 10px;
        border-bottom: 0;
        line-height: 28px;
        font-size: 14px
    }
}

.footer-menus .footer-menu:last-child .footer-menu-title {
    border-bottom: 0
}

.footer-menus .footer-menu .footer-menu-list {
    line-height: .28rem
}

.footer-menus .footer-menu .footer-menu-list a {
    color: #000
}

.footer-menus .footer-menu .footer-menu-list a:hover {
    color: #ffc915
}

.footer-menus .footer-menu .footer-menu-list a.hotFocus {
    color: red
}

@media screen and (max-width:768px) {
    .footer-menus .footer-menu .footer-menu-list {
        max-height: 0;
        padding: 0 .14rem;
        overflow: hidden;
        -webkit-transition: all .3s;
        transition: all .3s
    }
    .footer-menus .footer-menu .footer-menu-list a {
        font-size: .1rem
    }
}

@media screen and (min-width:769px) {
    .footer-menus .footer-menu .footer-menu-list {
        display: block;
        font-size: 12px;
        line-height: 28px
    }
    .footer-menus .footer-menu .footer-menu-list a {
        font-size: 12px
    }
}

.footer-menus .footer-menu.visible .footer-menu-title .icon {
    -webkit-transition: ease-in-out background-image .3s;
    transition: ease-in-out background-image .3s;
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg)
}

.footer-menus .footer-menu.visible .footer-menu-list {
    max-height: 2.4rem;
    padding: .1rem .14rem .2rem
}

.footer-contact {
    padding: .1rem 0 .2rem;
    text-align: center
}

@media screen and (min-width:769px) {
    .footer-contact {
        padding: 0;
        -webkit-box-shadow: none;
        box-shadow: none
    }
}

.footer-contact .footer-contact-phone {
    line-height: .23rem
}

.footer-contact .footer-contact-phone a {
    font-size: .18rem;
    color: #333;
    font-weight: 700
}

@media screen and (min-width:769px) {
    .footer-contact .footer-contact-phone {
        font-size: 22px;
        line-height: 20px
    }
    .footer-contact .footer-contact-phone a {
        font-size: .18rem;
        color: #000
    }
}

.footer-contact .footer-contact-time {
    font-size: .1rem;
    color: #6a6a6a;
    margin-top: .1rem;
    line-height: .14rem
}

@media screen and (min-width:769px) {
    .footer-contact .footer-contact-time {
        margin-top: 6px;
        font-size: 12px;
        line-height: 18px
    }
}

.footer-contact .footer-contact-online {
    margin-top: .2rem
}

.footer-contact .footer-contact-online a {
    width: 2rem;
    line-height: .4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: .14rem;
    color: #000;
    margin: 0 auto;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: .01rem solid #000;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-weight: 700
}

.footer-contact .footer-contact-online a .icon {
    margin-right: .12rem;
    width: .3rem;
    height: .3rem
}

@media screen and (min-width:769px) {
    .footer-contact .footer-contact-online {
        margin-top: 20px
    }
    .footer-contact .footer-contact-online a {
        font-size: 14px;
        -webkit-transition: background-color .3s, color .3s;
        transition: background-color .3s, color .3s;
        width: 180px;
        line-height: 40px
    }
    .footer-contact .footer-contact-online a:hover {
        background: #000;
        color: #fff
    }
    .footer-contact .footer-contact-online a:hover .icon {
        background-image: url(../fonts/16c3aabe93bb4966a7c6ff4ba418b486.woff);
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: top center
    }
    .footer-contact .footer-contact-online a .icon {
        width: 30px;
        height: 30px;
        margin-right: 8px
    }
}

.footer-contact .footer-socials {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

@media screen and (max-width:768px) {
    .footer-contact .footer-socials {
        padding: .3rem 0
    }
}

@media screen and (min-width:769px) {
    .footer-contact .footer-socials {
        margin-top: 30px
    }
}

.footer-contact .footer-socials .footer-social {
    margin-right: .44rem;
    position: relative
}

.footer-contact .footer-socials .footer-social.footer-wechat i {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    top: -1.2rem;
    width: 1.2rem;
    height: 1.2rem;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out
}

.footer-contact .footer-socials .footer-social.footer-wechat:hover i {
    visibility: visible;
    opacity: 1;
    background-image: url(../fonts/74deab232de543d5909da5a1eadbd764.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center;
    width: 30px;
    height: 30px;
    position: absolute;
    right: 10px;
    top: 10px;
    display: block
}

@media screen and (max-width:768px) {
    .region-select .region-select-container .region-select-close {
        right: .05rem;
        top: .05rem;
        width: .24rem;
        height: .24rem;
        opacity: .5
    }
}

.region-select .region-select-container .region-select-content {
    background: #fff;
    padding: 40px 0 30px
}

@media screen and (max-width:768px) {
    .region-select .region-select-container .region-select-content {
        padding: .3rem 0 .2rem
    }
}

.region-select .region-select-container .region-select-title {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 10px;
    font-weight: 600;
    text-align: center
}

@media screen and (max-width:768px) {
    .region-select .region-select-container .region-select-title {
        font-size: .16rem;
        line-height: .22rem;
        margin-bottom: .07rem
    }
}

.region-select .region-select-container .region-select-desc {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 30px;
    color: #6a6a6a;
    text-align: center
}

@media screen and (max-width:768px) {
    .region-select .region-select-container .region-select-desc {
        font-size: .14rem;
        margin-bottom: .2rem;
        padding: 0 .24rem
    }
}

.region-select .region-select-container .region-select-item .region-select-subtitle {
    background: #f4f4f5;
    padding: 0 60px;
    font-size: 14px;
    line-height: 30px;
    color: #000
}

@media screen and (max-width:768px) {
    .region-select .region-select-container .region-select-item .region-select-subtitle {
        font-size: .12rem;
        padding: 0 .3rem;
        line-height: .3rem
    }
}

.region-select .region-select-container .region-select-item ul {
    padding: 10px 0 10px 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

@media screen and (max-width:768px) {
    .region-select .region-select-container .region-select-item ul {
        padding: .1rem .3rem
    }
}

.region-select .region-select-container .region-select-item ul li {
    font-size: 14px;
    line-height: 40px;
    color: #6a6a6a;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 370px
}

@media screen and (max-width:768px) {
    .region-select .region-select-container .region-select-item ul li {
        width: 2.68rem;
        font-size: .12rem;
        line-height: .34rem
    }
}

.region-select .region-select-container .region-select-item ul li a {
    color: #000;
    font-weight: 600;
    width: 130px
}

@media screen and (max-width:768px) {
    .region-select .region-select-container .region-select-item ul li a {
        width: 1.2rem
    }
}

.region-select .region-select-container .region-select-item ul li label {
    width: 110px
}

@media screen and (max-width:768px) {
    .region-select .region-select-container .region-select-item ul li label {
        width: 1.1rem
    }
}

@media screen and (min-width:769px) {
    .lang-eg .region-select,
    .lang-il .region-select,
    .lang-iq .region-select,
    .lang-sa .region-select {
        overflow: hidden
    }
}

.lang-eg .region-select .region-select-container .region-select-item ul,
.lang-il .region-select .region-select-container .region-select-item ul,
.lang-iq .region-select .region-select-container .region-select-item ul,
.lang-sa .region-select .region-select-container .region-select-item ul {
    padding: 10px 60px 10px 0
}

.r-cookie {
    position: fixed;
    z-index: 12;
    width: 100%;
    bottom: 0;
    height: .6rem;
    background-color: #fff;
    display: none;
    -webkit-box-shadow: 0 -1px 0 0 #e9e9e9;
    box-shadow: 0 -1px 0 0 #e9e9e9
}

.r-cookie .r-cookie--body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.r-cookie .r-cookie--btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.r-cookie .r-btn {
    font-size: .14rem;
    width: 1.4rem;
    text-align: center;
    height: .4rem;
    line-height: .4rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    font-family: OpenSans-Regular, "Microsoft YaHei", sans-serif, Arial
}

.r-cookie .r-btn--normal {
    border: 1px solid #c2c7ca;
    color: #676c73;
    margin-right: .1rem
}

.r-cookie .r-btn--primary {
    background: #ffc915;
    color: #000;
    border: none
}

.r-cookie .r-cookie--content {
    font-size: 12px;
    color: #000
}

.r-cookie .r-cookie--content a {
    font-size: .12rem
}

.r-cookie .r-cookie-footer {
    padding-bottom: .6rem
}

.r-cookie.dialog-v {
    background: rgba(0, 0, 0, .6);
    height: auto;
    padding: 10px 0;
    -webkit-box-shadow: none;
    box-shadow: none
}

.r-cookie.dialog-v .wrapper {
    position: relative;
    width: 1080px
}

.r-cookie.dialog-v .r-btn {
    height: 24px;
    font-size: 12px;
    width: auto;
    min-width: 60px;
    padding: 5px 12px;
    line-height: 14px;
    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;
    border-radius: 12px;
    white-space: nowrap;
    cursor: pointer;
    font-family: OpenSans-Semibold, "PingFang SC", "Microsoft YaHei", sans-serif, Arial
}

.r-cookie.dialog-v .r-btn--normal,
.r-cookie.dialog-v .r-btn--primary {
    background: rgba(255, 255, 255, 0);
    border: .5px solid #fff;
    color: #fff;
    margin-right: 10px
}

.r-cookie.dialog-v .r-btn--normal:last-child,
.r-cookie.dialog-v .r-btn--primary:last-child {
    margin-right: 0
}

.r-cookie.dialog-v .r-btn--normal:hover,
.r-cookie.dialog-v .r-btn--primary:hover {
    background: #fff;
    color: #000
}

.r-cookie.dialog-v .r-cookie--content {
    color: #fff;
    margin-right: 30px
}

.r-cookie.dialog-v .r-cookie--content a {
    font-size: 12px;
    color: #fff
}

.r-cookie .icon-close-w {
    position: absolute;
    display: block;
    width: 16px;
    height: 16px;
    right: -60px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer
}

@media screen and (max-width:768px) {
    .r-cookie {
        height: initial
    }
    .r-cookie .r-cookie--body {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: .3rem .2rem .1rem;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }
    .r-cookie .r-cookie--content {
        margin-bottom: .1rem;
        font-size: .12rem;
        line-height: .14rem
    }
    .r-cookie .r-btn {
        width: 1.2rem;
        font-size: .12rem;
        height: .28rem;
        line-height: .28rem
    }
    .r-cookie .r-cookie-footer {
        padding-bottom: 1.44rem
    }
    .r-cookie.dialog-v {
        padding: 0;
        -webkit-box-shadow: none;
        box-shadow: none
    }
    .r-cookie.dialog-v .wrapper {
        width: 100%
    }
    .r-cookie.dialog-v .r-btn {
        width: auto;
        min-width: .6rem;
        height: .24rem;
        font-size: .1rem;
        padding: .05rem .12rem;
        line-height: .14rem;
        border-radius: .12rem
    }
    .r-cookie.dialog-v .r-btn--normal,
    .r-cookie.dialog-v .r-btn--primary {
        border: .005rem solid #fff;
        margin-right: .2rem
    }
    .r-cookie.dialog-v .r-btn--normal:last-child,
    .r-cookie.dialog-v .r-btn--primary:last-child {
        margin-right: 0
    }
    .r-cookie.dialog-v .r-cookie--content {
        width: 3.2rem;
        margin-right: 0;
        text-align: center
    }
    .r-cookie.dialog-v .r-cookie--content a {
        font-size: .1rem
    }
    .r-cookie .icon-close-w {
        width: .16rem;
        height: .16rem;
        right: .1rem;
        top: .06rem;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

.cookie-manage-container {
    padding: 40px 60px;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #fff;
    z-index: 12;
    visibility: hidden;
    opacity: 0
}

.cookie-manage-container.visible {
    visibility: visible;
    opacity: 1
}

.cookie-manage-container .cookie-title {
    font-size: 20px;
    line-height: 28px;
    text-align: center
}

.cookie-manage-container .cookie-close {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 16px;
    height: 16px;
    background-image: url(../fonts/218dde169df24f0691c41c410337b3aa.woff);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center;
    cursor: pointer
}

@media screen and (max-width:768px) {
    .cookie-manage-container .cookie-close {
        right: .16rem;
        top: .16rem;
        width: .16rem;
        height: .16rem
    }
}

.cookie-manage-container .cookie-content {
    width: 480px
}

.cookie-manage-container .cookie-content .cookie-item {
    font-size: 14px;
    line-height: 20px;
    margin-top: 20px
}

.cookie-manage-container .cookie-content .cookie-item:last-child {
    margin-bottom: 20px
}

.cookie-manage-container .cookie-content .cookie-item .cookie-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 4px
}

.cookie-manage-container .cookie-content .cookie-item .cookie-header .icon-checkbox {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAW0lEQVRYR+3XUQ3AMAhFUXCwusC/GoKI4YAty7JmCko/bg28y/mrRkRW1SE9L9Xdr57td3UGmJmuDPkOJwABBBBAAAEEEEAAAQQQQGAfgZX/wv/WI3CKyGgKyBs0tuXfDPdggQAAAABJRU5ErkJggg==);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center;
    cursor: pointer
}

.cookie-manage-container .cookie-content .cookie-item .cookie-header.enable .icon-checkbox {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACBUlEQVRYR+2XTUgUYRjHf7O7frXIqjVJwiKrwbYaSHTzUNAhK6Eo0ALBi3pV6SzevAkieAuhUx+nrKS6hZIHI7yI7m4pInuQ2BDWr03ddeRlXGZgXWdmx2U9zHubd57n+f/m/z7PDCMpP+UZFO5QjCUxKynzslIM7YymA+A44DhQWAeq7sN+DJLhnJNeOADvLQhNgZKGlR5IfD8VojAApX5o/golV1VRJQVLbbC3mAVx/gDuSmj6AhVBTSz+FtYG7DogiUcxeGu7IfgOfHe1uK0fEO1UXThlmXPAdw/8wxDpgFQ8N0RgDOQu7X7yDyw/hPSWjSa83AEN4yB5YHcRwk/gaCe74LV+8A9p+4f/VPH99TNdM3DADc3fwNuis3QOos9BOdD2ah5D4yuQxDEBR/8h8gx2fhl+aI2PwCND0zSUB7Rim59hpVftCe9tCH0AV/lJxyuw2gebnwzFRYAxgIgqq4fQNJTWakX/voaNCdWhkivafmwENsZNiZsHEJGXbkLoI4gxy6xUAjw+3bi9gbVB0+LWAER0ZSsE34OrLFskMQu/X+Qct1xU5o5An13dDtcnQXLpxi0Ky48gvW3p6a07kCkvd0NgVL06jMPSAziIWRbPH0Bk1r2EugEIP4XdhbzE7QGI7IobkIzkLW4fwJa0mmy9Cc9BVF/CAXAcuAAOFPn3/BgLgM0n+AWTNwAAAABJRU5ErkJggg==);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center
}

.cookie-manage-container .cookie-content .cookie-item .cookie-description {
    color: #4a4a4a
}

.cookie-manage-container .btn-primary {
    background-color: #ffc915;
    width: 230px;
    height: 40px;
    font-size: 14px;
    line-height: 40px;
    text-align: center;
    margin: 0 auto
}

@media screen and (max-width:768px) {
    .cookie-manage-container {
        padding: 0 .24rem;
        bottom: 0;
        top: auto;
        -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        border-radius: .08rem .08rem 0 0
    }
    .cookie-manage-container .cookie-title {
        font-size: .16rem;
        line-height: .6rem;
        text-align: left
    }
    .cookie-manage-container .cookie-content {
        width: 3.12rem;
        height: 50vh;
        overflow-y: scroll
    }
    .cookie-manage-container .cookie-content .cookie-item {
        font-size: .12rem;
        line-height: .16rem;
        margin-top: .16rem
    }
    .cookie-manage-container .cookie-content .cookie-item:first-child {
        margin-bottom: .1rem
    }
    .cookie-manage-container .cookie-content .cookie-item:last-child {
        margin-bottom: .2rem
    }
    .cookie-manage-container .cookie-content .cookie-item .cookie-header {
        margin-bottom: .04rem
    }
    .cookie-manage-container .cookie-content .cookie-item .cookie-header .icon-checkbox {
        width: .16rem;
        height: .16rem;
        margin-right: .1rem
    }
    .cookie-manage-container .btn-primary {
        width: 3.12rem;
        height: .4rem;
        font-size: .14rem;
        line-height: .4rem;
        margin: .2rem auto
    }
}

.footer-popUp {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .4);
    z-index: 19
}

@media screen and (max-width:768px) {
    .footer-popUp {
        background: rgba(0, 0, 0, .8)
    }
}

.footer-popUp .popUp-content {
    position: absolute
}

.footer-popUp .popUp-content .content-btns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.footer-popUp .popUp-content .content-title {
    color: #000
}

@media screen and (max-width:768px) {
    .footer-popUp .popUp-content {
        bottom: 0;
        border-radius: .08rem .08rem 0 0;
        background: #fff;
        width: 100%;
        font-size: .12rem;
        line-height: .18rem;
        height: calc(100% - 100px)
    }
    .footer-popUp .popUp-content .mobile-content {
        position: relative;
        width: 3.12rem;
        margin: 0 auto;
        padding-top: .2rem;
        height: 100%
    }
    .footer-popUp .popUp-content .mobile-content .icon-close {
        position: absolute;
        width: .16rem;
        height: .16rem;
        top: .16rem;
        right: -.08rem;
        padding: 3px
    }
    .footer-popUp .popUp-content .mobile-content .content-title {
        font-size: .16rem;
        line-height: .22rem;
        font-weight: 600
    }
    .footer-popUp .popUp-content .mobile-content .content-text {
        margin-top: .29rem
    }
    .footer-popUp .popUp-content .mobile-content .content-text a {
        color: #000;
        border-bottom: 1px solid #000;
        padding-bottom: 1px;
        font-weight: 600
    }
    .footer-popUp .popUp-content .mobile-content .content-text span {
        display: inline-block;
        margin: .2rem 0
    }
    .footer-popUp .popUp-content .mobile-content .content-btns {
        position: absolute;
        bottom: .4rem;
        width: 3.12rem
    }
    .footer-popUp .popUp-content .mobile-content .content-btns button {
        width: 1.5rem;
        height: .4rem;
        border: 1px solid #000;
        font-size: .14rem;
        cursor: pointer;
        background: #fff
    }
    .footer-popUp .popUp-content .mobile-content .content-btns button:nth-child(2) {
        background: #ffc915;
        border: none
    }
}

@media screen and (min-width:769px) {
    .footer-popUp .popUp-content {
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 600px;
        padding: 30px 0;
        font-size: 14px;
        color: #4a4a4a;
        line-height: 22px;
        background: #fff
    }
    .footer-popUp .popUp-content .icon-close {
        position: absolute;
        width: 16px;
        height: 16px;
        top: 10px;
        right: 10px;
        padding: 6px;
        cursor: pointer
    }
    .footer-popUp .popUp-content .mobile-content {
        width: 480px;
        margin: 0 auto
    }
    .footer-popUp .popUp-content .content-title {
        font-size: 20px;
        line-height: 27px;
        text-align: center
    }
    .footer-popUp .popUp-content .content-text {
        margin: 27px 0
    }
    .footer-popUp .popUp-content .content-text a {
        color: #000;
        border-bottom: 1px solid #000;
        padding-bottom: 1px;
        font-weight: 600
    }
    .footer-popUp .popUp-content .content-text span {
        display: inline-block;
        margin: 20px 0
    }
    .footer-popUp .popUp-content button {
        width: 230px;
        height: 40px;
        border: 1px solid #000;
        color: #000;
        font-size: 14px;
        cursor: pointer;
        background: #fff;
        -webkit-transition: background-color .3s, color .3s;
        transition: background-color .3s, color .3s
    }
    .footer-popUp .popUp-content button:hover {
        background: #000;
        color: #fff
    }
    .footer-popUp .popUp-content button:nth-child(2) {
        background: #ffc915;
        border: none
    }
    .footer-popUp .popUp-content button:nth-child(2):hover {
        background: #d9ab11;
        color: #000
    }
}

.popUp-hidden {
    display: none
}

.informationdialog {
    position: fixed;
    bottom: 80px;
    right: 20px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    padding-bottom: 50px;
    display: none;
    z-index: 10
}

@media screen and (max-width:768px) {
    .informationdialog {
        background-color: rgba(0, 0, 0, .2);
        width: 100vw;
        height: 100vh;
        bottom: 0;
        right: 0;
        left: 0;
        top: 0;
        z-index: 12;
        font-size: .14rem;
        display: none;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

.informationdialog .informationdialog-container {
    padding: 20px;
    background: #fff;
    -webkit-box-shadow: 0 6px 20px 0 rgba(0, 0, 0, .13);
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, .13);
    max-height: 600px;
    overflow-y: auto
}

@media screen and (max-width:768px) {
    .informationdialog .informationdialog-container {
        padding: .2rem;
        max-height: 4.5rem;
        overflow-y: scroll
    }
}

.informationdialog .informationdialog-container .informationdialog-link-content .informationdialog-link-item {
    text-decoration: none;
    display: block;
    width: 260px
}

@media screen and (max-width:768px) {
    .informationdialog .informationdialog-container .informationdialog-link-content .informationdialog-link-item {
        width: 2.6rem;
        margin-right: 0
    }
}

.informationdialog .informationdialog-container .informationdialog-link-content .informationdialog-link-item .link-item-content {
    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;
    line-height: 44px
}

@media screen and (max-width:768px) {
    .informationdialog .informationdialog-container .informationdialog-link-content .informationdialog-link-item .link-item-content {
        line-height: .36rem
    }
}

.informationdialog .informationdialog-container .informationdialog-link-content .informationdialog-link-item .link-item-content .link-icon-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.informationdialog .informationdialog-container .informationdialog-link-content .informationdialog-link-item .link-item-content .link-icon-left img {
    width: 24px;
    height: 24px;
    margin-right: 12px
}

@media screen and (max-width:768px) {
    .informationdialog .informationdialog-container .informationdialog-link-content .informationdialog-link-item .link-item-content .link-icon-left img {
        width: .2rem;
        height: .2rem
    }
}

.informationdialog .informationdialog-container .informationdialog-link-content .informationdialog-link-item .link-item-content .link-icon-left .link-icon-text {
    color: #333;
    text-align: center
}

@media screen and (min-width:769px) {
    .informationdialog .informationdialog-container .informationdialog-link-content .informationdialog-link-item .link-item-content .link-icon-left .link-href.link-icon-text:hover {
        color: #ffc915
    }
}

.informationdialog .informationdialog-container .informationdialog-link-content .informationdialog-link-item .link-item-content .link-icon-right {
    width: 9px;
    height: 16px
}

@media screen and (max-width:768px) {
    .informationdialog .informationdialog-container .informationdialog-link-content .informationdialog-link-item .link-item-content .link-icon-right {
        width: .09rem;
        height: .16rem
    }
}

.informationdialog .informationdialog-container .informationdialog-link-content .informationdialog-link-item .link-item-tel {
    height: 24px;
    margin-left: 36px;
    color: #ffc915;
    line-height: 24px;
    font-size: 18px;
    margin-bottom: 4px
}

@media screen and (max-width:768px) {
    .informationdialog .informationdialog-container .informationdialog-link-content .informationdialog-link-item .link-item-tel {
        line-height: .24rem;
        height: .24rem;
        margin-left: .33rem;
        font-size: .16rem
    }
}

.informationdialog .informationdialog-container .informationdialog-link-content .informationdialog-link-item .link-item-text {
    white-space: pre-wrap;
    margin-left: 36px;
    font-size: 12px;
    color: #ccc;
    line-height: 16px;
    font-weight: 400
}

@media screen and (max-width:768px) {
    .informationdialog .informationdialog-container .informationdialog-link-content .informationdialog-link-item .link-item-text {
        line-height: .14rem;
        margin-left: .33rem
    }
}

.informationdialog .informationdialog-container .informationdialog-link-content .informationdialog-link-item .informationdialog-code-img {
    margin: 0 auto;
    width: 160px
}

@media screen and (max-width:768px) {
    .informationdialog .informationdialog-container .informationdialog-link-content .informationdialog-link-item .informationdialog-code-img {
        width: 1.2rem
    }
}

.informationdialog .informationdialog-container .informationdialog-link-content .informationdialog-link-item .informationdialog-code-img img {
    width: 160px;
    height: 160px;
    margin-bottom: 20px
}

@media screen and (max-width:768px) {
    .informationdialog .informationdialog-container .informationdialog-link-content .informationdialog-link-item .informationdialog-code-img img {
        width: 1.2rem;
        height: 1.2rem
    }
}

.informationdialog .informationdialog-container .informationdialog-link-content .informationdialog-link-item:focus {
    outline: 0
}

.informationdialog-icon-play {
    z-index: 10;
    position: fixed;
    bottom: 80px;
    right: 26px
}

@media screen and (max-width:768px) {
    .informationdialog-icon-play {
        bottom: .45rem;
        right: .16rem
    }
}

.informationdialog-icon-play img {
    width: 48px;
    height: 48px
}

@media screen and (max-width:768px) {
    .informationdialog-icon-play img {
        width: .48rem;
        height: .48rem
    }
}

.mask {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba(0, 0, 0, .3);
    z-index: 10;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .3s, visibility .3s;
    transition: opacity .3s, visibility .3s
}

.mask.visible {
    visibility: visible;
    opacity: 1
}

.mask-untouch {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    visibility: hidden;
    background-color: rgba(0, 0, 0, .2);
    z-index: 11
}

.mask-untouch.fixed {
    visibility: visible
}

.lang-zh {
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif, Arial
}

.lang-en {
    font-family: OpenSans-Regular, "PingFang SC", "Microsoft YaHei", sans-serif, Arial
}

.lang-th {
    font-family: "DB Adman X", "PingFang SC", "Microsoft YaHei", sans-serif, Arial
}

.lang-kh {
    font-family: KhmerOsBattambang-Bold, "PingFang SC", "Microsoft YaHei", sans-serif, Arial
}

.lang-mm {
    font-family: OpenSans-Regular, "PingFang SC", "Microsoft YaHei", sans-serif, Arial
}

.lang-eg,
.lang-iq,
.lang-sa {
    font-family: DINNextLTW23-Regular, "PingFang SC", "Microsoft YaHei", sans-serif, Arial
}

.pingfang {
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif, Arial
}

.gilroy {
    font-family: Gilroy-Regular, "PingFang SC", "Microsoft YaHei", sans-serif, Arial
}

.gilroy-medium {
    font-family: Gilroy-Medium, "PingFang SC", "Microsoft YaHei", sans-serif, Arial
}

.gilroy-bold {
    font-family: Gilroy-Bold, "PingFang SC", "Microsoft YaHei", sans-serif, Arial
}

.hansans {
    font-family: SourceHanSansCN-Normal, "PingFang SC", "Microsoft YaHei", sans-serif, Arial
}

.opensans {
    font-family: OpenSans-Regular, "PingFang SC", "Microsoft YaHei", sans-serif, Arial
}

.opensans-bold {
    font-family: OpenSans-Bold, "PingFang SC", "Microsoft YaHei", sans-serif, Arial
}

.opensans-semibold {
    font-family: OpenSans-Semibold, "PingFang SC", "Microsoft YaHei", sans-serif, Arial
}

.opensans-light {
    font-family: OpenSans-Light, "PingFang SC", "Microsoft YaHei", sans-serif, Arial
}

.sharpsans-light {
    font-family: "Sharp Sans No1-Light", "PingFang SC", "Microsoft YaHei", sans-serif, Arial
}

.sharpsans-medium {
    font-family: "Sharp Sans No1-Medium", "PingFang SC", "Microsoft YaHei", sans-serif, Arial
}

.gilroy-heavyI {
    src: url(../../common/font/Gilroy-HeavyItalic.otf)
}

.gilroy-boldI {
    src: url(../../common/font/Gilroy-BoldItalic.otf)
}

.lang-en .footer-contact .footer-socials .footer-social {
    margin-right: .2rem
}

.lang-en .footer-contact .footer-socials .footer-social:last-child {
    margin-right: 0
}

.lang-en .software .software-wrapper .software-items .software-item .software-mobile .software-mobile-title a {
    display: block
}

@media screen and (min-width:769px) {
    .lang-en .footer-contact .footer-socials .footer-social {
        margin-right: 20px
    }
    .lang-en .footer-contact .footer-socials .footer-social:last-child {
        margin-right: 0
    }
}

@media screen and (min-width:769px) {
    .lang-en .support-category {
        padding-bottom: .6rem
    }
    .lang-en .support-category .support-category-row .support-category-col {
        margin-bottom: .2rem
    }
}

@media screen and (max-width:768px) {
    .lang-en .sec-specs-banner .sec-specs-colors {
        z-index: 1
    }
    .lang-en .sec-banner {
        margin-top: .42rem
    }
}

.footer-announce {
    color: #6a6a6a;
    font-size: .12rem;
    margin-top: .33rem;
    line-height: .2rem
}

.footer-announce i.footer-br-pc {
    display: block
}

.footer-line {
    margin: 0 5px
}

@media screen and (max-width:768px) {
    .footer-announce {
        font-size: .08rem;
        line-height: .12rem;
        margin-top: .15rem;
        text-align: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }
    .footer-announce span {
        margin-bottom: .12rem
    }
    .footer-announce i.footer-br-pc {
        display: none
    }
    .footer-line {
        display: none
    }
}

html.lang-eg,
html.lang-il,
html.lang-iq,
html.lang-sa {
    direction: rtl
}

.lang-eg .footer-contact .footer-socials .footer-social,
.lang-il .footer-contact .footer-socials .footer-social,
.lang-iq .footer-contact .footer-socials .footer-social,
.lang-sa .footer-contact .footer-socials .footer-social {
    margin-left: 20px;
    margin-right: 0
}

.lang-eg .footer-contact .footer-socials .footer-social:last-child,
.lang-il .footer-contact .footer-socials .footer-social:last-child,
.lang-iq .footer-contact .footer-socials .footer-social:last-child,
.lang-sa .footer-contact .footer-socials .footer-social:last-child {
    margin-left: 0
}

@media screen and (min-width:769px) {
    .lang-th .footer-menus .footer-menu .footer-menu-title,
    .lang-th .header .nav .nav-submenu .submenu-tabs .secondary-menu,
    .lang-th .header .nav .nav-submenu ul>li.more-product .more-accessories,
    .lang-th .header .nav .nav-submenu ul>li>a .nav-submenu-price,
    .lang-th .header .nav .nav-submenu ul>li>a .nav-submenu-title,
    .lang-th .header .nav ul.nav-menu>li>a {
        font-size: 20px!important
    }
    .lang-th .footer-bottom .copyright,
    .lang-th .footer-bottom .footer-legal,
    .lang-th .footer-contact .footer-contact-time,
    .lang-th .footer-menus .footer-menu .footer-menu-list a,
    .lang-th .footer-region a {
        font-size: 16px!important
    }
}

@media screen and (max-width:768px) {
    .lang-th .footer-menus .footer-menu .footer-menu-title,
    .lang-th .header .nav .nav-submenu .submenu-tabs .secondary-menu,
    .lang-th .header .nav .nav-submenu ul>li.more-product .more-accessories,
    .lang-th .header .nav .nav-submenu ul>li>a .nav-submenu-price,
    .lang-th .header .nav ul.nav-menu>li>a {
        font-size: .2rem!important
    }
    .lang-th .footer-bottom .copyright,
    .lang-th .footer-bottom .footer-legal,
    .lang-th .footer-contact .footer-contact-time,
    .lang-th .footer-menus .footer-menu .footer-menu-list a,
    .lang-th .footer-region a {
        font-size: .14rem!important
    }
    .lang-th .footer-menus .footer-menu .footer-menu-list a {
        font-size: .16rem!important
    }
    .lang-th .header .nav .nav-submenu ul>li>a .nav-submenu-img label {
        font-size: .12rem;
        text-align: center;
    }
    .lang-th .header .nav .nav-submenu ul>li>a .more-accessories {
        font-size: .16rem
    }
}

@media screen and (min-width:769px) {
    .lang-th .header-notify {
        font-size: 16px
    }
}

@media screen and (max-width:768px) {
    .lang-th .header-notify {
        font-size: .16rem
    }
}

@media screen and (min-width:769px) {
    .lang-th .header .mall-plus {
        font-size: 16px
    }
}

@media screen and (min-width:769px) {
    .lang-th .header .wrapper .nav .nav-menu .false>a {
        font-weight: 600
    }
}

@media screen and (min-width:769px) {
    .lang-th .header .wrapper .nav .nav-menu .menus-last>a {
        font-weight: 600
    }
}

@media screen and (min-width:769px) {
    .lang-th .header .wrapper .nav .nav-menu .false .nav-submenu .nav-submenu-wrapper .secondary-products li a .nav-submenu {
        font-weight: 600
    }
}

@media screen and (max-width:768px) {
    .lang-th .header .wrapper .nav .nav-menu .false .nav-submenu .nav-submenu-wrapper .secondary-products li a .nav-submenu-info .nav-submenu-title {
        font-size: .16rem
    }
}

@media screen and (max-width:768px) {
    .lang-th .header .wrapper .nav .nav-menu .false .nav-submenu .nav-submenu-wrapper .secondary-menus .secondary-menu label {
        font-size: .2rem
    }
}

.lang-th .header .wrapper .nav .nav-menu .menus-last .nav-submenu .nav-submenu-wrapper .submenu-container .secondary-products li a .nav-submenu {
    font-weight: 600
}

@media screen and (min-width:769px) {
    .lang-th .footer .footer-center .footer-contact .footer-contact-phone {
        font-size: 30px
    }
}

.del-price {
    display: none
}

.purchase-site-overlay {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .8);
    z-index: 5;
    display: none;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer
}

.purchase-site-overlay .purchase-site-modal {
    background: #fff;
    position: relative
}

.purchase-site-overlay .purchase-site-modal .purchase-site-close-icon {
    position: absolute;
    top: .24rem;
    right: .24rem
}

@media screen and (max-width:768px) {
    .purchase-site-overlay .purchase-site-modal .purchase-site-close-icon {
        top: .1rem;
        right: .1rem
    }
}

.purchase-site-overlay .purchase-site-modal .purchase-site-message {
    -webkit-box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, .1);
    box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, .1);
    border-radius: 4px 4px 0 0;
    text-align: center;
    color: #333;
    padding: .4rem 0
}

.purchase-site-overlay .purchase-site-modal .purchase-site-message .message-buy-now {
    width: 100%;
    font-family: OpenSans-Bold, "PingFang SC", "Microsoft YaHei", sans-serif, Arial;
    font-size: .2rem;
    margin-bottom: .08rem;
    line-height: .27rem
}

@media screen and (max-width:768px) {
    .purchase-site-overlay .purchase-site-modal .purchase-site-message .message-buy-now {
        font-size: .16rem;
        margin-bottom: .05rem;
        line-height: .22rem
    }
}

.purchase-site-overlay .purchase-site-modal .purchase-site-message .message-tips {
    width: 100%;
    font-family: OpenSans-Regular, "PingFang SC", "Microsoft YaHei", sans-serif, Arial;
    font-size: .14rem;
    line-height: .19rem
}

.purchase-site-overlay .purchase-site-modal .purchase-site-option {
    padding: .32rem 1.32rem
}

@media screen and (max-width:768px) {
    .purchase-site-overlay .purchase-site-modal .purchase-site-option {
        padding: .2rem;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
}

.purchase-site-overlay .purchase-site-modal .purchase-site-option .purchase-site-details {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

@media screen and (max-width:768px) {
    .purchase-site-overlay .purchase-site-modal .purchase-site-option .purchase-site-details {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.purchase-site-overlay .purchase-site-modal .purchase-site-option .purchase-site-details a {
    text-align: center;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 4px;
    margin: 0 .08rem;
    overflow: hidden
}

@media screen and (max-width:768px) {
    .purchase-site-overlay .purchase-site-modal .purchase-site-option .purchase-site-details a {
        width: 2.8rem;
        line-height: .6rem
    }
}

.purchase-site-overlay .purchase-site-modal .purchase-site-option .purchase-site-details a img {
    width: 1.6rem;
    height: 1.6rem
}

@media screen and (max-width:768px) {
    .purchase-site-overlay .purchase-site-modal .purchase-site-option .purchase-site-details a img {
        width: .88rem;
        height: auto;
        vertical-align: middle
    }
}

@media screen and (max-width:768px) {
    .purchase-site-overlay .purchase-site-modal .purchase-site-option .purchase-site-details a {
        margin: 0 0 .1rem 0
    }
}