.ipDialog .el-dialog__body {
    padding: 30px 45px;
    text-align: center
}

.ipDialog .el-dialog__body .ipChangeText {
    font-size: 18px;
    font-weight: 400;
    color: #222;
    line-height: 25px;
    margin-bottom: 30px;
    word-break: break-word
}

.ipDialog .el-dialog__body .button {
    margin-bottom: 40px
}

@media screen and (max-width:767px) {
    .ipDialog {
        background: none !important
    }

    .ipDialog .el-dialog {
        width: calc(100vw - 30px) !important
    }

    .ipDialog .el-dialog__body {
        padding: 10px 30px;
        text-align: center
    }

    .ipDialog .el-dialog__body .ipChangeText {
        font-size: 16px;
        font-weight: 400;
        color: #222;
        line-height: 22px;
        margin-bottom: 30px;
        word-break: break-word
    }

    .ipDialog .el-dialog__body .button {
        margin-bottom: 20px
    }
}

.TopTips {
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 400;
    line-height: 36px;
    height: 36px;
    text-align: center;
    top: 0;
    z-index: 1
}

.TopTips .TopTips-text {
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    margin-bottom: 0
}

@media screen and (max-width:767px) {

    .fix-menu,
    .MMMenu {
        display: none
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {

    .MMMenu,
    .MMMenu .menu {
        position: relative;
        height: 60px
    }

    .MMMenu .menu {
        max-width: calc(100% - 40px);
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .MMMenu .menu .menu_left {
        position: absolute;
        left: 0;
        top: 50%;
        z-index: 1;
        transform: translateY(-50%);
        max-width: 105px;
        max-height: 70px;
        display: flex;
        align-items: center
    }

    .MMMenu .menu .menu_left img {
        max-height: 50px
    }

    .MMMenu .menu .menu_center {
        margin: 0;
        padding-inline-start: 0;
        align-items: center
    }

    .MMMenu .menu .menu_center,
    .MMMenu .menu .menu_center .menu-list {
        display: flex;
        justify-content: center
    }

    .MMMenu .menu .menu_right {
        position: absolute;
        right: 0;
        top: 50%;
        z-index: 1;
        transform: translateY(-50%)
    }

    .MMMenu .menu .menu_right .search {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        background: var(--button);
        display: flex;
        justify-content: center;
        align-items: center
    }

    .MMMenu .menu .menu_right .search i {
        font-size: 20px;
        color: var(--white);
        cursor: pointer
    }

    .MMMenu .menu .menu_right .search input {
        outline: none;
        width: 200px;
        height: 40px;
        border-radius: 20px;
        font-size: 14px;
        padding-left: 10px;
        border: none;
        position: absolute;
        right: 0;
        z-index: -1;
        bottom: 0;
        background: var(--button);
        color: var(--white)
    }

    .fix-menu {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 999;
        background-color: var(--Menu);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1)
    }

    .fix-menu .menu {
        max-width: calc(100% - 40px);
        margin: 0 auto;
        height: 60px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .fix-menu .menu .menu_left {
        position: absolute;
        left: 0;
        top: 50%;
        z-index: 1;
        transform: translateY(-50%);
        max-width: 105px;
        max-height: 70px;
        display: flex;
        align-items: center
    }

    .fix-menu .menu .menu_left img {
        max-height: 50px
    }

    .fix-menu .menu .menu_center {
        margin: 0;
        padding-inline-start: 0;
        align-items: center
    }

    .fix-menu .menu .menu_center,
    .fix-menu .menu .menu_center .menu-list {
        display: flex;
        justify-content: center
    }

    .fix-menu .menu .menu_right {
        position: absolute;
        right: 0;
        top: 50%;
        z-index: 1;
        transform: translateY(-50%)
    }

    .fix-menu .menu .menu_right .search {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        background: var(--button);
        display: flex;
        justify-content: center;
        align-items: center
    }

    .fix-menu .menu .menu_right .search i {
        font-size: 20px;
        color: var(--white);
        cursor: pointer
    }

    .fix-menu .menu .menu_right .search input {
        outline: none;
        width: 200px;
        height: 40px;
        border-radius: 20px;
        font-size: 14px;
        padding-left: 10px;
        border: none;
        position: absolute;
        right: 0;
        z-index: -1;
        bottom: 0;
        background: var(--button);
        color: var(--white)
    }

    .menu-unit {
        color: var(--titleFont);
        float: left;
        list-style: none;
        margin-right: 30px;
        position: relative;
        height: 50px;
        line-height: 50px;
        cursor: pointer
    }

    .menu-unit .secMenu-list {
        height: 21px;
        font-size: 14px;
        color: var(--titleFont);
        line-height: 21px
    }

    .menu-unit .secMenu-list .secMenu-list-item {
        min-width: 125px;
        width: max-content;
        padding: 7px 7px 7px 16px;
        background-color: var(--Menu)
    }

    .menu-unit .secMenu-list .secMenu-list-item span {
        color: var(--titleFont)
    }

    .menu-unit .secMenu-list .secMenu-list-item:hover .sec-span,
    .menu-unit .secMenu-list .secMenu-list-item:hover .third-span:hover {
        color: var(--button)
    }

    .menu-unit .after:after {
        content: "";
        width: 0;
        height: 2px;
        background: var(--button);
        position: absolute;
        bottom: 10px;
        left: 50%;
        transition: all .3s
    }

    .menu-unit:hover,
    .menu-unit:hover a {
        color: var(--button)
    }

    .menu-unit:hover .after:after {
        left: 0;
        width: 100%
    }

    .menu-unit:hover i {
        color: var(--button)
    }

    #side-menu {
        margin: 0;
        padding-inline-start: 0;
        display: flex;
        align-items: center;
        justify-content: center
    }

    #side-second-menu {
        padding: 5px 0;
        background-color: var(--Menu);
        top: 50px;
        left: 0;
        box-shadow: -3px 4px 8px 0 rgba(0, 0, 0, .2)
    }

    #side-second-menu,
    #side-third-menu {
        list-style: none;
        position: absolute;
        height: auto;
        width: max-content;
        z-index: 9;
        cursor: pointer
    }

    #side-third-menu {
        top: 0;
        left: 148px
    }
}

@media screen and (min-width:1200px) {

    .MMMenu,
    .MMMenu .menu {
        position: relative;
        height: 72px
    }

    .MMMenu .menu {
        max-width: calc(100% - 80px);
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .MMMenu .menu .menu_left {
        position: absolute;
        left: 0;
        top: 50%;
        z-index: 1;
        transform: translateY(-50%);
        max-width: 105px;
        max-height: 70px;
        display: flex;
        align-items: center
    }

    .MMMenu .menu .menu_left img {
        max-height: 70px
    }

    .MMMenu .menu .menu_center {
        margin: 0;
        padding-inline-start: 0;
        align-items: center
    }

    .MMMenu .menu .menu_center,
    .MMMenu .menu .menu_center .menu-list {
        display: flex;
        justify-content: center
    }

    .MMMenu .menu .menu_right {
        position: absolute;
        right: 0;
        top: 50%;
        z-index: 1;
        transform: translateY(-50%)
    }

    .MMMenu .menu .menu_right .search {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        background: var(--button);
        display: flex;
        justify-content: center;
        align-items: center
    }

    .MMMenu .menu .menu_right .search i {
        font-size: 20px;
        color: var(--white);
        cursor: pointer
    }

    .MMMenu .menu .menu_right .search input {
        outline: none;
        width: 200px;
        height: 40px;
        border-radius: 20px;
        font-size: 14px;
        padding-left: 10px;
        border: none;
        position: absolute;
        right: 0;
        z-index: -1;
        bottom: 0;
        background: var(--button);
        color: var(--white)
    }

    .fix-menu {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 999;
        background-color: var(--Menu);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1)
    }

    .fix-menu .menu {
        max-width: calc(100% - 80px);
        margin: 0 auto;
        height: 72px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .fix-menu .menu .menu_left {
        position: absolute;
        left: 0;
        top: 50%;
        z-index: 1;
        transform: translateY(-50%);
        max-width: 105px;
        max-height: 70px;
        display: flex;
        align-items: center
    }

    .fix-menu .menu .menu_left img {
        max-height: 60px
    }

    .fix-menu .menu .menu_center {
        margin: 0;
        padding-inline-start: 0;
        align-items: center
    }

    .fix-menu .menu .menu_center,
    .fix-menu .menu .menu_center .menu-list {
        display: flex;
        justify-content: center
    }

    .fix-menu .menu .menu_right {
        position: absolute;
        right: 0;
        top: 50%;
        z-index: 1;
        transform: translateY(-50%)
    }

    .fix-menu .menu .menu_right .search {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        background: var(--button);
        display: flex;
        justify-content: center;
        align-items: center
    }

    .fix-menu .menu .menu_right .search i {
        font-size: 20px;
        color: var(--white);
        cursor: pointer
    }

    .fix-menu .menu .menu_right .search input {
        outline: none;
        width: 200px;
        height: 40px;
        border-radius: 20px;
        font-size: 14px;
        padding-left: 10px;
        border: none;
        position: absolute;
        right: 0;
        z-index: -1;
        bottom: 0;
        background: var(--button);
        color: var(--white)
    }

    .menu-unit {
        color: var(--titleFont);
        float: left;
        list-style: none;
        margin-right: 30px;
        position: relative;
        height: 50px;
        line-height: 50px;
        cursor: pointer
    }

    .menu-unit .secMenu-list {
        height: 21px;
        font-size: 14px;
        color: var(--titleFont);
        line-height: 21px
    }

    .menu-unit .secMenu-list .secMenu-list-item {
        min-width: 125px;
        width: max-content;
        padding: 7px 7px 7px 16px;
        background-color: var(--Menu)
    }

    .menu-unit .secMenu-list .secMenu-list-item span {
        color: var(--titleFont)
    }

    .menu-unit .secMenu-list .secMenu-list-item:hover .sec-span,
    .menu-unit .secMenu-list .secMenu-list-item:hover .third-span:hover {
        color: var(--button)
    }

    .menu-unit .after:after {
        content: "";
        width: 0;
        height: 2px;
        background: var(--button);
        position: absolute;
        bottom: 10px;
        left: 50%;
        transition: all .3s
    }

    .menu-unit:hover,
    .menu-unit:hover a {
        color: var(--button)
    }

    .menu-unit:hover .after:after {
        left: 0;
        width: 100%
    }

    .menu-unit:hover i {
        color: var(--button)
    }

    #side-menu {
        margin: 0;
        padding-inline-start: 0;
        display: flex;
        align-items: center;
        justify-content: center
    }

    #side-second-menu {
        padding: 5px 0;
        background-color: var(--Menu);
        top: 50px;
        left: 0;
        box-shadow: -3px 4px 8px 0 rgba(0, 0, 0, .2)
    }

    #side-second-menu,
    #side-third-menu {
        list-style: none;
        position: absolute;
        height: auto;
        width: max-content;
        z-index: 9;
        cursor: pointer
    }

    #side-third-menu {
        top: 0;
        left: 148px
    }
}

@media screen and (min-width:768px) {
    .login {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1050;
        overflow: hidden;
        outline: 0;
        overflow-x: hidden;
        overflow-y: auto
    }

    .login,
    .login .shodow {
        width: 100%;
        height: 100%
    }

    .login .shodow {
        background-color: rgba(0, 0, 0, .5)
    }

    .login .shodow .login-item {
        width: 420px;
        background-color: var(--white);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        padding: 0 40px;
        border-radius: 6px
    }

    .login .shodow .login-item .emailTips {
        position: absolute;
        top: 105px;
        right: 40px;
        font-size: 14px;
        color: var(--red)
    }

    .login .shodow .login-item .accountEmailTips {
        position: absolute;
        top: 89px;
        right: 40px;
        font-size: 14px;
        color: var(--red)
    }

    .login .shodow .login-item .accountPasswordTips {
        position: absolute;
        top: 151px;
        right: 40px;
        font-size: 14px;
        color: var(--red)
    }

    .login .shodow .login-item .accountPasswordSameTips {
        position: absolute;
        top: 215px;
        right: 40px;
        font-size: 14px;
        color: var(--red)
    }

    .login .shodow .login-item .setPasswordTips {
        position: absolute;
        top: 178px;
        right: 40px;
        font-size: 14px;
        color: var(--red)
    }

    .login .shodow .login-item .setPasswordSameTips {
        position: absolute;
        top: 242px;
        right: 40px;
        font-size: 14px;
        color: var(--red)
    }

    .login .shodow .login-item .login-item-title {
        text-align: center;
        font-size: 28px;
        font-weight: 500;
        color: #aaa;
        margin: 40px 0 30px;
        cursor: pointer
    }

    .login .shodow .login-item .login-item-title .login_to_login,
    .login .shodow .login-item .login-item-title .signup_to_login {
        margin-right: 40px
    }

    .login .shodow .login-item .login-item-title .login_to_login,
    .login .shodow .login-item .login-item-title .login_to_signup:hover,
    .login .shodow .login-item .login-item-title .signup_to_login:hover,
    .login .shodow .login-item .login-item-title .signup_to_signup {
        color: var(--black)
    }

    .login .shodow .login-item .forgot-item-title {
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        color: #33475b;
        margin: 60px 0 30px
    }

    .login .shodow .login-item .agreeServices {
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        color: #33475b;
        margin: 0 0 20px
    }

    .login .shodow .login-item .agreeServices span {
        display: block
    }

    .login .shodow .login-item .el-input__inner {
        width: 420px
    }

    .login .shodow .login-item .el-input {
        width: 420px;
        margin-bottom: 24px
    }

    .login .shodow .login-item .passwordInput {
        margin-bottom: 5px
    }

    .login .shodow .login-item .rember-forgot {
        font-size: 14px;
        line-height: 18px;
        margin-bottom: 29px;
        padding-left: 20px
    }

    .login .shodow .login-item .rember-forgot input {
        position: absolute;
        line-height: 14px;
        width: 16px;
        height: 16px;
        left: 38px;
        top: 225px
    }

    .login .shodow .login-item .rember-forgot .forgot {
        color: #7c98b6;
        float: right;
        cursor: pointer
    }

    .login .shodow .login-item .login-button {
        width: 420px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-radius: 4px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        margin-bottom: 30px;
        position: relative
    }

    .login .shodow .login-item .orange-button {
        background: #06f;
        border: 1px solid #06f;
        color: #fff
    }

    .login .shodow .login-item .gary-button {
        background: #f4f4f5;
        border: 1px solid #d2d5d8;
        color: #a6acb1
    }

    .login .shodow .login-item .loginGuest {
        border-radius: 4px;
        margin-top: -20px;
        background: #fff;
        border: 1px solid #dcdfe6;
        color: #000
    }

    .login .shodow .login-item .forgot-button,
    .login .shodow .login-item .loginGuest {
        width: 420px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        margin-bottom: 20px;
        position: relative
    }

    .login .shodow .login-item .forgot-button {
        border-radius: 4px
    }

    .login .shodow .login-item .line {
        width: 420px;
        height: 26px;
        border-top: 1px solid #dfe3eb;
        margin: 0 auto 10px
    }

    .login .shodow .login-item .line .or {
        width: 50px;
        height: 26px;
        background-color: #fff;
        margin: -13px auto 0;
        text-align: center;
        line-height: 26px;
        font-size: 14px;
        color: #33475b
    }

    .login .shodow .login-item .goback {
        cursor: pointer;
        text-align: center;
        margin: 0 auto 60px;
        color: #33475b
    }

    .login .shodow .login-item .face-google {
        width: 42opx
    }

    .login .shodow .login-item .face-google .facebook {
        background-color: #3b5998;
        float: left
    }

    .login .shodow .login-item .face-google .facebook,
    .login .shodow .login-item .face-google .google {
        cursor: pointer;
        width: 45%;
        height: 40px;
        text-align: center;
        line-height: 40px;
        font-size: 16px;
        font-weight: 500;
        color: #fff;
        border-radius: 4px;
        margin-bottom: 30px
    }

    .login .shodow .login-item .face-google .google {
        background-color: #dd4b39;
        float: right
    }

    .login .shodow .login-item .close {
        position: absolute;
        top: 16px;
        right: 20px;
        font-size: 24px;
        cursor: pointer
    }

    .login .shodow .login-item .close i {
        font-size: 24px
    }

    .login .shodow .login-item .setPassHeader {
        margin-top: 50px;
        margin-bottom: 30px
    }

    .login .shodow .login-item .setPassHeader .setPassTitle {
        font-size: 20px;
        font-weight: 500;
        color: #222;
        line-height: 28px;
        margin-bottom: 10px
    }

    .login .shodow .login-item .setPassHeader .setPassText {
        font-size: 14px;
        font-weight: 400;
        color: #444;
        line-height: 20px
    }

    .login .shodow .login-item .setPasswordSuccess {
        margin: 80px 0 76px;
        width: 420px;
        text-align: center
    }

    .login .shodow .login-item .setPasswordSuccess i {
        font-size: 72px;
        width: 72px;
        height: 72px;
        line-height: 72px;
        color: #49cc49
    }

    .login .shodow .login-item .setPasswordSuccess .setPasswdSuccessTitle {
        font-size: 24px;
        color: #000;
        line-height: 29px;
        margin-bottom: 10px;
        margin-top: 20px
    }

    .login .shodow .login-item .setPasswordSuccess .setPasswdSuccessText {
        font-size: 14px;
        font-weight: 400;
        color: #777;
        line-height: 20px;
        margin-bottom: 30px
    }

    .login .shodow .login-item .setPasswordSuccess .setPasswdSuccessBtn {
        width: 240px;
        height: 44px;
        background: #407cfe;
        border-radius: 3px;
        font-size: 16px;
        font-weight: 400;
        color: #fff;
        line-height: 44px;
        text-align: center;
        margin: 0 auto;
        cursor: pointer
    }
}

@media screen and (max-width:767px) {
    .login {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1050;
        overflow: hidden;
        outline: 0;
        overflow-x: hidden;
        overflow-y: auto
    }

    .login,
    .login .shodow {
        width: 100%;
        height: 100%
    }

    .login .shodow {
        background-color: rgba(0, 0, 0, .5)
    }

    .login .shodow .login-item {
        width: calc(100vw - 70px);
        background-color: var(--white);
        position: absolute;
        left: 50%;
        top: 40%;
        transform: translate(-50%, -50%);
        padding: 0 20px 20px;
        border-radius: 6px
    }

    .login .shodow .login-item .emailTips {
        position: absolute;
        top: 105px;
        right: 20px;
        font-size: 14px;
        color: var(--red)
    }

    .login .shodow .login-item .accountEmailTips {
        position: absolute;
        top: 70px;
        right: 20px;
        font-size: 14px;
        color: var(--red)
    }

    .login .shodow .login-item .accountPasswordTips {
        position: absolute;
        top: 128px;
        right: 20px;
        font-size: 14px;
        color: var(--red)
    }

    .login .shodow .login-item .accountPasswordSameTips {
        position: absolute;
        top: 188px;
        right: 20px;
        font-size: 14px;
        color: var(--red)
    }

    .login .shodow .login-item .login-item-title {
        text-align: center;
        font-size: 28px;
        font-weight: 500;
        color: #aaa;
        margin: 40px 0 30px;
        cursor: pointer
    }

    .login .shodow .login-item .login-item-title .login_to_login,
    .login .shodow .login-item .login-item-title .signup_to_login {
        margin-right: 40px
    }

    .login .shodow .login-item .login-item-title .login_to_login,
    .login .shodow .login-item .login-item-title .login_to_signup:hover,
    .login .shodow .login-item .login-item-title .signup_to_login:hover,
    .login .shodow .login-item .login-item-title .signup_to_signup {
        color: var(--black)
    }

    .login .shodow .login-item .forgot-item-title {
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        color: #33475b;
        margin: 60px 0 24px
    }

    .login .shodow .login-item .agreeServices {
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        color: #33475b;
        margin: 0 0 20px
    }

    .login .shodow .login-item .el-input__inner {
        width: calc(100vw - 70px)
    }

    .login .shodow .login-item .el-input {
        width: calc(100vw - 70px);
        margin-bottom: 20px
    }

    .login .shodow .login-item .rember-forgot {
        font-size: 14px;
        line-height: 14px;
        margin-bottom: 40px;
        padding-left: 20px
    }

    .login .shodow .login-item .rember-forgot input {
        position: absolute;
        line-height: 14px;
        width: 16px;
        height: 16px;
        left: 20px;
        top: 196px
    }

    .login .shodow .login-item .rember-forgot .forgot {
        color: #7c98b6;
        float: right;
        cursor: pointer
    }

    .login .shodow .login-item .login-button {
        width: calc(100vw - 70px);
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-radius: 4px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        margin-bottom: 28px;
        position: relative
    }

    .login .shodow .login-item .orange-button {
        background: #06f;
        border: 1px solid #06f;
        color: #fff
    }

    .login .shodow .login-item .gary-button {
        background: #f4f4f5;
        border: 1px solid #d2d5d8;
        color: #a6acb1
    }

    .login .shodow .login-item .loginGuest {
        border-radius: 4px;
        margin-top: -20px;
        background: #fff;
        border: 1px solid #dcdfe6;
        color: #000
    }

    .login .shodow .login-item .forgot-button,
    .login .shodow .login-item .loginGuest {
        width: calc(100vw - 70px);
        height: 40px;
        text-align: center;
        line-height: 40px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        margin-bottom: 20px;
        position: relative
    }

    .login .shodow .login-item .forgot-button {
        border-radius: 4px
    }

    .login .shodow .login-item .line {
        width: calc(100vw - 70px);
        height: 22px;
        border-top: 1px solid #dfe3eb;
        margin: 0 auto 11px
    }

    .login .shodow .login-item .line .or {
        width: 40px;
        height: 22px;
        background-color: #fff;
        margin: -10px auto 0;
        text-align: center;
        line-height: 21px;
        font-size: 12px;
        color: #33475b
    }

    .login .shodow .login-item .goback {
        cursor: pointer;
        margin: 0 auto;
        text-align: center;
        color: #33475b
    }

    .login .shodow .login-item .face-google {
        width: calc(100vw - 70px)
    }

    .login .shodow .login-item .face-google .facebook {
        background-color: #3b5998;
        float: left
    }

    .login .shodow .login-item .face-google .facebook,
    .login .shodow .login-item .face-google .google {
        cursor: pointer;
        width: 45%;
        height: 40px;
        text-align: center;
        line-height: 40px;
        font-size: 16px;
        font-weight: 400;
        color: #fff;
        border-radius: 4px
    }

    .login .shodow .login-item .face-google .google {
        background-color: #dd4b39;
        float: right
    }

    .login .shodow .login-item .close {
        position: absolute;
        top: 14px;
        right: 26px;
        font-size: 20px;
        cursor: pointer
    }

    .login .shodow .login-item .close i {
        font-size: 24px
    }

    .login .shodow .login-item .setPassHeader {
        margin-top: 30px;
        margin-bottom: 20px
    }

    .login .shodow .login-item .setPassHeader .setPassTitle {
        font-size: 20px;
        font-weight: 500;
        color: #222;
        line-height: 28px;
        margin-bottom: 10px
    }

    .login .shodow .login-item .setPassHeader .setPassText {
        font-size: 14px;
        font-weight: 400;
        color: #444;
        line-height: 20px
    }

    .login .shodow .login-item .setPasswordSuccess {
        margin: 40px 0 36px;
        width: calc(100vw - 60px);
        text-align: center
    }

    .login .shodow .login-item .setPasswordSuccess i {
        font-size: 72px;
        width: 72px;
        height: 72px;
        line-height: 72px;
        color: #49cc49
    }

    .login .shodow .login-item .setPasswordSuccess .setPasswdSuccessTitle {
        font-size: 24px;
        color: #000;
        line-height: 29px;
        margin-bottom: 10px;
        margin-top: 20px
    }

    .login .shodow .login-item .setPasswordSuccess .setPasswdSuccessText {
        font-size: 14px;
        font-weight: 400;
        color: #777;
        line-height: 20px;
        margin-bottom: 30px
    }

    .login .shodow .login-item .setPasswordSuccess .setPasswdSuccessBtn {
        width: 240px;
        height: 44px;
        background: #407cfe;
        border-radius: 3px;
        font-size: 16px;
        font-weight: 400;
        color: #fff;
        line-height: 44px;
        text-align: center;
        margin: 0 auto;
        cursor: pointer
    }
}

@media screen and (min-width:1200px) {
    .el-dropdown {
        color: var(--MenuFont) !important
    }

    .el-dropdown-menu__item:not(.is-disabled):hover {
        background-color: var(--lightButton) !important;
        color: var(--button) !important
    }

    .langMoney {
        display: flex
    }

    .langMoney .language {
        display: flex;
        justify-content: flex-end;
        height: 40px;
        font-size: 18px !important;
        line-height: 40px
    }

    .langMoney .language #google_translate_element {
        display: inline-block;
        height: 40px
    }

    .langMoney .language #google_translate_element .skiptranslate.goog-te-gadget .goog-te-gadget-simple {
        border: none;
        height: 40px;
        line-height: 40px;
        background-color: transparent
    }

    .langMoney .language #google_translate_element .skiptranslate.goog-te-gadget .goog-te-gadget-simple img.goog-te-gadget-icon {
        display: none !important
    }

    .langMoney .language #google_translate_element .skiptranslate.goog-te-gadget .goog-te-gadget-simple a.goog-te-menu-value {
        color: var(--MenuFont);
        text-decoration: none
    }

    .langMoney .language #google_translate_element .skiptranslate.goog-te-gadget .goog-te-gadget-simple a.goog-te-menu-value span {
        color: var(--MenuFont) !important
    }

    .langMoney .moneyList {
        margin-left: 20px;
        display: flex;
        justify-content: flex-end;
        height: 40px;
        font-size: 18px;
        line-height: 40px
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .el-dropdown {
        color: var(--MenuFont) !important
    }

    .el-dropdown-menu__item:not(.is-disabled):hover {
        background-color: var(--lightButton) !important;
        color: var(--button) !important
    }

    .langMoney {
        display: flex
    }

    .langMoney .language {
        display: flex;
        justify-content: flex-end;
        height: 40px;
        font-size: 18px !important;
        line-height: 40px
    }

    .langMoney .language #google_translate_element {
        display: inline-block;
        height: 40px
    }

    .langMoney .language #google_translate_element .skiptranslate.goog-te-gadget .goog-te-gadget-simple {
        border: none;
        height: 40px;
        line-height: 40px;
        background-color: transparent
    }

    .langMoney .language #google_translate_element .skiptranslate.goog-te-gadget .goog-te-gadget-simple img.goog-te-gadget-icon {
        display: none !important
    }

    .langMoney .language #google_translate_element .skiptranslate.goog-te-gadget .goog-te-gadget-simple a.goog-te-menu-value {
        color: var(--MenuFont);
        text-decoration: none
    }

    .langMoney .language #google_translate_element .skiptranslate.goog-te-gadget .goog-te-gadget-simple a.goog-te-menu-value span {
        color: var(--MenuFont) !important
    }

    .langMoney .moneyList {
        margin-left: 20px;
        display: flex;
        justify-content: flex-end;
        height: 40px;
        font-size: 18px;
        line-height: 40px
    }
}

@media screen and (max-width:767px) {
    .el-dropdown {
        color: var(--MenuFont)
    }

    .el-dropdown-menu__item:not(.is-disabled):hover {
        background-color: var(--lightButton);
        color: var(--button)
    }

    .langMoney {
        display: flex
    }

    .langMoney .language,
    .langMoney .language i {
        font-size: 16px
    }

    .langMoney .language #google_translate_element {
        display: inline-block;
        height: 40px
    }

    .langMoney .language #google_translate_element .skiptranslate.goog-te-gadget .goog-te-gadget-simple {
        border: none;
        height: 40px;
        line-height: 40px;
        background-color: var(--themeBGC)
    }

    .langMoney .language #google_translate_element .skiptranslate.goog-te-gadget .goog-te-gadget-simple img.goog-te-gadget-icon {
        display: none !important
    }

    .langMoney .language #google_translate_element .skiptranslate.goog-te-gadget .goog-te-gadget-simple a.goog-te-menu-value {
        color: var(--titleFont);
        text-decoration: none
    }

    .langMoney .moneyList {
        font-size: 16px;
        margin-left: 20px
    }

    .langMoney .moneyList i {
        font-size: 16px
    }
}

.shopCart-and-inquiryBasket1 {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    align-items: center
}

.shopCart-and-inquiryBasket1 .iconfont:not(:last-child) {
    margin: 0 15px 0 0
}

@media screen and (min-width:1200px) {
    .NavBar {
        border-bottom: 1px solid var(--MenuLine)
    }

    .NavBar .nav_bar {
        max-width: calc(100% - 80px);
        margin: 0 auto;
        height: 44px;
        position: relative
    }

    .NavBar .nav_bar .nav_bar_left {
        right: 0;
        transform: translateY(-50%)
    }

    .NavBar .nav_bar .nav_bar_center,
    .NavBar .nav_bar .nav_bar_left {
        color: var(--titleFont);
        font-size: 16px;
        position: absolute;
        top: 50%;
        z-index: 10
    }

    .NavBar .nav_bar .nav_bar_center {
        left: 50%;
        transform: translate(-50%, -50%)
    }

    .NavBar .nav_bar .nav_bar_center .foot-share {
        text-align: left
    }

    .NavBar .nav_bar .nav_bar_center .foot-share i {
        font-size: 20px;
        padding: 0 3px
    }

    .NavBar .nav_bar .nav_bar_center .foot-share i:hover {
        color: var(--button)
    }

    .NavBar .nav_bar .nav_bar_right {
        color: var(--titleFont);
        font-size: 16px;
        position: absolute;
        right: 0;
        top: 50%;
        z-index: 2;
        transform: translateY(-50%)
    }

    .NavBar .nav_bar .nav_bar_right .cart,
    .NavBar .nav_bar .nav_bar_right .user {
        float: right;
        height: 42px;
        margin-right: 10px;
        line-height: 42px;
        position: relative;
        cursor: pointer
    }

    .NavBar .nav_bar .nav_bar_right .cart i,
    .NavBar .nav_bar .nav_bar_right .user i {
        font-size: 24px
    }

    .NavBar .nav_bar .nav_bar_right .cart i:hover,
    .NavBar .nav_bar .nav_bar_right .user i:hover {
        color: var(--button)
    }

    .NavBar .nav_bar .nav_bar_right .cart .account,
    .NavBar .nav_bar .nav_bar_right .user .account {
        position: absolute;
        align-items: center;
        line-height: 24px;
        background-color: var(--Menu);
        right: 0;
        top: 35px;
        padding: 10px 0;
        z-index: 2;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .2);
        cursor: pointer
    }

    .NavBar .nav_bar .nav_bar_right .cart .account .user-login,
    .NavBar .nav_bar .nav_bar_right .user .account .user-login {
        width: 100%;
        height: 32px;
        line-height: 32px
    }

    .NavBar .nav_bar .nav_bar_right .cart .account .user-login span,
    .NavBar .nav_bar .nav_bar_right .user .account .user-login span {
        padding: 0 10px;
        float: right;
        white-space: nowrap
    }

    .NavBar .nav_bar .nav_bar_right .cart .account .user-login:hover span,
    .NavBar .nav_bar .nav_bar_right .user .account .user-login:hover span {
        color: var(--button)
    }

    .NavBar .nav_bar .nav_bar_right .cart .account .create-account,
    .NavBar .nav_bar .nav_bar_right .user .account .create-account {
        width: 100%;
        height: 32px;
        line-height: 32px
    }

    .NavBar .nav_bar .nav_bar_right .cart .account .create-account span,
    .NavBar .nav_bar .nav_bar_right .user .account .create-account span {
        padding: 0 10px;
        float: right;
        white-space: nowrap
    }

    .NavBar .nav_bar .nav_bar_right .cart .account .create-account:hover span,
    .NavBar .nav_bar .nav_bar_right .user .account .create-account:hover span {
        color: var(--button)
    }

    .NavBar .nav_bar .nav_bar_right .cart {
        margin-right: 20px
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .NavBar {
        border-bottom: 1px solid var(--MenuLine)
    }

    .NavBar .nav_bar {
        max-width: calc(100% - 40px);
        margin: 0 auto;
        height: 40px;
        position: relative
    }

    .NavBar .nav_bar .nav_bar_left {
        right: 0;
        transform: translateY(-50%)
    }

    .NavBar .nav_bar .nav_bar_center,
    .NavBar .nav_bar .nav_bar_left {
        color: var(--titleFont);
        font-size: 16px;
        position: absolute;
        top: 50%;
        z-index: 1
    }

    .NavBar .nav_bar .nav_bar_center {
        left: 50%;
        transform: translate(-50%, -50%)
    }

    .NavBar .nav_bar .nav_bar_center .foot-share {
        text-align: left
    }

    .NavBar .nav_bar .nav_bar_center .foot-share i {
        font-size: 20px;
        padding: 0 3px
    }

    .NavBar .nav_bar .nav_bar_center .foot-share i:hover {
        color: var(--button)
    }

    .NavBar .nav_bar .nav_bar_right {
        color: var(--titleFont);
        font-size: 16px;
        position: absolute;
        right: 0;
        top: 50%;
        z-index: 2;
        transform: translateY(-50%)
    }

    .NavBar .nav_bar .nav_bar_right .cart,
    .NavBar .nav_bar .nav_bar_right .user {
        float: right;
        height: 42px;
        margin-right: 10px;
        line-height: 42px;
        position: relative;
        cursor: pointer
    }

    .NavBar .nav_bar .nav_bar_right .cart i,
    .NavBar .nav_bar .nav_bar_right .user i {
        font-size: 24px
    }

    .NavBar .nav_bar .nav_bar_right .cart i:hover,
    .NavBar .nav_bar .nav_bar_right .user i:hover {
        color: var(--button)
    }

    .NavBar .nav_bar .nav_bar_right .cart .account,
    .NavBar .nav_bar .nav_bar_right .user .account {
        position: absolute;
        align-items: center;
        line-height: 24px;
        background-color: var(--Menu);
        right: 0;
        top: 35px;
        padding: 10px 0;
        z-index: 2;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .2);
        cursor: pointer
    }

    .NavBar .nav_bar .nav_bar_right .cart .account .user-login,
    .NavBar .nav_bar .nav_bar_right .user .account .user-login {
        width: 100%;
        height: 32px;
        line-height: 32px
    }

    .NavBar .nav_bar .nav_bar_right .cart .account .user-login span,
    .NavBar .nav_bar .nav_bar_right .user .account .user-login span {
        padding: 0 10px;
        float: right;
        white-space: nowrap
    }

    .NavBar .nav_bar .nav_bar_right .cart .account .user-login:hover span,
    .NavBar .nav_bar .nav_bar_right .user .account .user-login:hover span {
        color: var(--button)
    }

    .NavBar .nav_bar .nav_bar_right .cart .account .create-account,
    .NavBar .nav_bar .nav_bar_right .user .account .create-account {
        width: 100%;
        height: 32px;
        line-height: 32px
    }

    .NavBar .nav_bar .nav_bar_right .cart .account .create-account span,
    .NavBar .nav_bar .nav_bar_right .user .account .create-account span {
        padding: 0 10px;
        float: right;
        white-space: nowrap
    }

    .NavBar .nav_bar .nav_bar_right .cart .account .create-account:hover span,
    .NavBar .nav_bar .nav_bar_right .user .account .create-account:hover span {
        color: var(--button)
    }

    .NavBar .nav_bar .nav_bar_right .cart {
        margin-right: 20px
    }
}

@media screen and (max-width:767px) {
    .NavBar {
        display: none
    }
}

.shopCart-and-inquiryBasket2 {
    display: inline-flex;
    display: -webkit-inline-flex;
    justify-content: flex-start;
    align-items: center
}

.shopCart-and-inquiryBasket2 .iconfont:not(:last-child) {
    margin-right: 10px
}

@media screen and (min-width:768px) {
    .xsNavBar {
        display: none
    }
}

@media screen and (max-width:767px) {
    .xsNavBar {
        color: var(--titleFont)
    }

    .xsNavBar .xs-nav-bar {
        background-color: var(--Menu);
        position: relative;
        z-index: 1001
    }

    .xsNavBar .xs-nav-bar .xs-nav-bar-list {
        margin: 0 auto;
        height: 124px;
        position: relative
    }

    .xsNavBar .xs-nav-bar .xs-nav-bar-list .navBarMoney {
        padding: 0 20px;
        height: 44px;
        font-size: 18px;
        line-height: 44px;
        border-bottom: 1px solid var(--themeLine)
    }

    .xsNavBar .xs-nav-bar .xs-nav-bar-list .navBarMoney .language-list {
        float: left
    }

    .xsNavBar .xs-nav-bar .xs-nav-bar-list .navBarMoney .language-list i {
        padding-left: 0;
        cursor: pointer;
        font-size: 18px
    }

    .xsNavBar .xs-nav-bar .xs-nav-bar-list .navBarMoney .menu_button {
        float: right;
        position: relative
    }

    .xsNavBar .xs-nav-bar .xs-nav-bar-list .navBarMoney .menu_button .cart {
        position: absolute;
        right: 50px;
        top: 0
    }

    .xsNavBar .xs-nav-bar .xs-nav-bar-list .navBarMoney .menu_button .account {
        position: absolute;
        height: 80px;
        background-color: var(--Menu);
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .2);
        right: 0;
        z-index: 3
    }

    .xsNavBar .xs-nav-bar .xs-nav-bar-list .navBarMoney .menu_button .account .create-account,
    .xsNavBar .xs-nav-bar .xs-nav-bar-list .navBarMoney .menu_button .account .user-login {
        padding: 0 10px;
        float: right
    }

    .xsNavBar .xs-nav-bar .xs-nav-bar-list .navBarMoney .menu_button .account .create-account span,
    .xsNavBar .xs-nav-bar .xs-nav-bar-list .navBarMoney .menu_button .account .user-login span {
        line-height: 40px;
        white-space: nowrap
    }

    .xsNavBar .xs-nav-bar .xs-nav-bar-list .languageList {
        position: absolute;
        line-height: 32px;
        text-align: left;
        font-size: 18px;
        padding: 0 8px;
        left: 9px;
        background-color: var(--Menu);
        border: 2px solid var(--themeLine);
        z-index: 6
    }

    .xsNavBar .xs-nav-bar .xs-nav-bar-list .fix_menu {
        position: fixed;
        top: 0;
        width: 100%;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1);
        height: 80px;
        background-color: var(--Menu);
        z-index: 9999;
        display: flex;
        align-items: center
    }

    .xsNavBar .xs-nav-bar .xs-nav-bar-list .fix_menu .logo {
        position: absolute;
        left: 20px;
        max-width: 140px;
        max-height: 70px;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .xsNavBar .xs-nav-bar .xs-nav-bar-list .fix_menu .logo img {
        max-width: 140px;
        max-height: 70px
    }

    .xsNavBar .xs-nav-bar .xs-nav-bar-list .fix_menu .iconic_iphone_filter,
    .xsNavBar .xs-nav-bar .xs-nav-bar-list .fix_menu .iconic_shop_shutdown {
        color: var(--titleFont);
        font-size: 24px;
        line-height: 80px;
        position: absolute;
        right: 20px
    }

    .xsNavBar .xs-nav-bar .xs-nav-bar-list .fix_menu .iconmoblie_search_1 {
        color: var(--titleFont);
        font-size: 24px;
        line-height: 80px;
        position: absolute;
        right: 70px
    }

    .xsNavBar .xs-nav-bar .xs-nav-bar-list .fix_menu .search-input {
        width: 100vw;
        height: 80px;
        line-height: 50px;
        position: absolute;
        align-items: center;
        justify-content: center;
        display: flex;
        top: 0;
        left: 0;
        background-color: var(--Menu)
    }

    .xsNavBar .xs-nav-bar .xs-nav-bar-list .fix_menu .search-input input {
        height: 40px;
        font-size: 18px;
        width: calc(100vw - 40px);
        border: none;
        padding-left: 35px;
        padding-right: 35px;
        background-color: var(--Menu);
        border-bottom: 1px solid var(--themeLine)
    }

    .xsNavBar .xs-nav-bar .xs-nav-bar-list .fix_menu .search-input .iconmoblie_search_2 {
        position: absolute;
        left: 25px;
        top: 27px;
        font-size: 24px;
        line-height: 24px;
        z-index: 1;
        cursor: pointer
    }

    .xsNavBar .xs-nav-bar .xs-nav-bar-list .fix_menu .search-input .shutdown {
        position: absolute;
        right: 25px;
        font-size: 24px;
        z-index: 1;
        line-height: 24px;
        cursor: pointer
    }

    .xsNavBar .xs-nav-bar .xs-nav-bar-list .menu {
        height: 80px;
        background-color: var(--Menu);
        position: relative;
        width: 100%;
        display: flex;
        align-items: center
    }

    .xsNavBar .xs-nav-bar .xs-nav-bar-list .menu .logo {
        position: absolute;
        left: 20px;
        max-width: 140px;
        max-height: 70px;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .xsNavBar .xs-nav-bar .xs-nav-bar-list .menu .logo img {
        max-width: 140px;
        max-height: 70px
    }

    .xsNavBar .xs-nav-bar .xs-nav-bar-list .menu .iconic_iphone_filter,
    .xsNavBar .xs-nav-bar .xs-nav-bar-list .menu .iconic_shop_shutdown {
        color: var(--titleFont);
        font-size: 24px;
        line-height: 80px;
        position: absolute;
        right: 20px
    }

    .xsNavBar .xs-nav-bar .xs-nav-bar-list .menu .iconmoblie_search_1 {
        color: var(--titleFont);
        font-size: 24px;
        line-height: 80px;
        position: absolute;
        right: 70px
    }

    .xsNavBar .xs-nav-bar .xs-nav-bar-list .menu .search-input {
        width: 100vw;
        height: 80px;
        line-height: 50px;
        position: absolute;
        align-items: center;
        justify-content: center;
        display: flex;
        top: 0;
        left: 0;
        background-color: var(--Menu)
    }

    .xsNavBar .xs-nav-bar .xs-nav-bar-list .menu .search-input input {
        height: 40px;
        font-size: 18px;
        width: calc(100vw - 40px);
        border: none;
        padding-left: 35px;
        padding-right: 35px;
        background-color: var(--Menu);
        border-bottom: 1px solid var(--themeLine)
    }

    .xsNavBar .xs-nav-bar .xs-nav-bar-list .menu .search-input .iconmoblie_search_2 {
        position: absolute;
        left: 25px;
        top: 27px;
        font-size: 24px;
        line-height: 24px;
        z-index: 1;
        cursor: pointer
    }

    .xsNavBar .xs-nav-bar .xs-nav-bar-list .menu .search-input .shutdown {
        position: absolute;
        right: 25px;
        font-size: 24px;
        line-height: 24px;
        z-index: 1;
        cursor: pointer
    }

    .xsNavBar .xs-nav-bar .xs-nav-bar-list .search-enter-active,
    .xsNavBar .xs-nav-bar .xs-nav-bar-list .search-leave-active {
        transition: all .3s
    }

    .xsNavBar .xs-nav-bar .xs-nav-bar-list .search-enter,
    .xsNavBar .xs-nav-bar .xs-nav-bar-list .search-leave-to {
        opacity: 0
    }

    .xsNavBar .change {
        position: fixed;
        z-index: 999;
        width: 100%
    }

    .xsNavBar i {
        font-size: 24px;
        font-weight: 400;
        cursor: pointer
    }
}

@media screen and (min-width:768px) {
    .xsmenu {
        display: none
    }
}

@media screen and (max-width:767px) {
    .xsmenu .xsmenu-list {
        transition-property: opacity, background-color;
        bottom: 0;
        z-index: 1001;
        width: 100vw;
        background-color: rgba(0, 0, 0, .4)
    }

    .xsmenu .xs-menu,
    .xsmenu .xsmenu-list {
        transition-duration: .5s;
        position: fixed;
        height: 100vh
    }

    .xsmenu .xs-menu {
        background-color: var(--themeBGC);
        color: #000;
        margin: 0;
        list-style: none;
        overflow: auto;
        width: 80vw;
        touch-action: pan-y;
        left: -100vw;
        top: 0;
        opacity: 0;
        transition-property: opacity, left;
        z-index: 1002
    }

    .xsmenu .xs-menu .menuTitle {
        margin: 16px;
        color: var(--titleFont);
        line-height: 32px;
        font-size: 20px
    }

    .xsmenu .xs-menu .closeMenu {
        position: absolute;
        right: 20px;
        top: 16px;
        font-size: 24px
    }

    .xsmenu .menu-unit {
        list-style: none;
        border-bottom: 1px solid var(--themeLine);
        font-size: 16px;
        line-height: 44px;
        padding: 0 20px
    }

    .xsmenu .menu-unit .font-orange {
        text-decoration: none;
        color: var(--button)
    }

    .xsmenu .menu-unit .font-black {
        text-decoration: none;
        color: var(--titleFont)
    }

    .xsmenu #side-menu {
        margin: 0;
        padding-inline-start: 0
    }

    .xsmenu #side-second-menu {
        list-style: none;
        padding-inline-start: 20px;
        background-color: var(--themeBGC);
        font-size: 14px;
        line-height: 20px
    }

    .xsmenu #side-second-menu div {
        padding-bottom: 12px
    }

    .xsmenu a {
        text-decoration: none;
        color: var(--titleFont)
    }

    .xsmenu i {
        float: right;
        font-size: 20px;
        line-height: 44px
    }
}

.list-item {
    display: inline-block;
    margin-right: 30px
}

.xs-list-item {
    padding: .3rem .5rem
}

input::-webkit-input-placeholder {
    color: var(--white)
}

input:-moz-placeholder,
input::-moz-placeholder {
    color: var(--white)
}

input:-ms-input-placeholder {
    color: var(--white)
}

@media screen and (min-width:1200px) {
    .transparentHeader {
        position: absolute;
        width: 100%;
        z-index: 999;
        color: var(--titleFont)
    }

    .header {
        background-color: var(--Menu);
        color: var(--titleFont)
    }

    .unTipsHeader {
        height: 117px
    }

    .tipsHeader,
    .unTipsHeader {
        border-bottom: 1px solid var(--MenuLine)
    }

    .tipsHeader {
        height: 153px
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .transparentHeader {
        position: absolute;
        width: 100%;
        z-index: 999;
        color: var(--titleFont)
    }

    .header {
        background-color: var(--Menu);
        color: var(--titleFont)
    }

    .unTipsHeader {
        height: 101px
    }

    .tipsHeader,
    .unTipsHeader {
        border-bottom: 1px solid var(--MenuLine)
    }

    .tipsHeader {
        height: 137px
    }
}

@media screen and (max-width:767px) {
    .header {
        height: 124px
    }

    .header,
    .tipsHeader {
        background-color: var(--Menu)
    }

    .tipsHeader {
        height: 160px
    }
}

@media screen and (min-width:1200px) {
    .bottom-bar {
        height: 56px;
        width: 100%;
        border-top: 1px solid var(--white);
        line-height: 56px
    }

    .bottom-bar .bottom-barList {
        max-width: 1180px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between
    }

    .bottom-bar .bottom-barList .foot-share i {
        color: var(--footFont);
        font-size: 20px;
        padding: 0 3px
    }

    .bottom-bar .bottom-barList .foot-share i:hover {
        color: var(--button)
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .bottom-bar {
        height: 56px;
        width: 100%;
        border-top: 1px solid var(--white);
        line-height: 56px
    }

    .bottom-bar .bottom-barList {
        max-width: 750px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between
    }

    .bottom-bar .bottom-barList .foot-share i {
        color: var(--footFont);
        font-size: 20px;
        padding: 0 3px
    }

    .bottom-bar .bottom-barList .foot-share i:hover {
        color: var(--button)
    }
}

@media screen and (max-width:767px) {
    .bottom-bar {
        height: 122px;
        width: 100%;
        border-top: 1px solid var(--white);
        line-height: 56px
    }

    .bottom-bar .bottom-barList {
        text-align: center
    }

    .bottom-bar .bottom-barList .foot-share {
        display: none
    }
}

@media screen and (min-width:1200px) {
    .AboutUs {
        max-width: 1180px;
        margin: 0 auto 10px;
        padding-top: 35px
    }

    .AboutUs .series {
        display: flex;
        flex-flow: wrap;
        overflow: hidden
    }

    .AboutUs .series .series-item {
        flex: 1
    }

    .AboutUs .series .series-item .AboutUs-item {
        width: 100%;
        height: 50px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .AboutUs .series .series-item .AboutUs-item .icon {
        text-align: center
    }

    .AboutUs .series .series-item .AboutUs-item .icon i {
        color: var(--titleFont);
        font-size: 24px
    }

    .AboutUs .series .series-item .span {
        color: var(--footFont);
        font-size: 14px;
        line-height: 18px;
        text-align: center;
        max-width: 280px;
        margin: 0 auto
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .AboutUs {
        max-width: 750px;
        margin: 0 auto 25px;
        padding-top: 25px
    }

    .AboutUs .series {
        display: flex;
        flex-flow: wrap;
        overflow: hidden
    }

    .AboutUs .series .series-item {
        flex: 1
    }

    .AboutUs .series .series-item .AboutUs-item {
        width: 100%;
        height: 50px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .AboutUs .series .series-item .AboutUs-item .icon {
        text-align: center
    }

    .AboutUs .series .series-item .AboutUs-item .icon i {
        color: var(--titleFont);
        font-size: 24px
    }

    .AboutUs .series .series-item .span {
        color: var(--footFont);
        font-size: 14px;
        line-height: 18px;
        text-align: center;
        max-width: 220px;
        margin: 0 auto
    }
}

@media screen and (max-width:767px) {
    .AboutUs {
        display: none
    }
}

#whatsapp {
    bottom: 220px !important;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .15) !important
}

#whatsapp,
.fb_dialog_advanced,
.fb_dialog_mobile {
    z-index: 999 !important
}

.fb_dialog_advanced iframe,
.fb_dialog_mobile iframe {
    bottom: 150px !important
}

@media screen and (min-width:768px) {
    .xsAboutUs {
        display: none
    }
}

@media screen and (max-width:767px) {
    .xsAboutUs {
        width: calc(100vw - 30px);
        margin: 0 auto
    }

    .xsAboutUs .xsAboutUs-span {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap
    }

    .xsAboutUs .xsAboutUs-span i {
        flex: 0 0 100%;
        font-size: 20px;
        color: var(--footFont);
        text-align: center;
        margin-bottom: 10px
    }

    .xsAboutUs .xsAboutUs-span .span {
        font-size: 16px;
        color: var(--footFont);
        padding: 0 20px;
        text-align: center;
        margin-bottom: 10px;
        line-height: 20px
    }

    .xsAboutUs .xsAboutUs-span .span div,
    .xsAboutUs .xsAboutUs-span .span div span {
        font-size: 16px !important;
        line-height: 20px !important
    }

    .xsAboutUs .foot-share {
        text-align: center;
        line-height: 60px;
        padding-top: 10px;
        margin-bottom: 10px;
        height: 60px
    }

    .xsAboutUs .foot-share i {
        color: var(--footFont);
        font-size: 20px;
        padding: 0 8px
    }

    .xsAboutUs .foot-share i:hover {
        color: var(--button)
    }
}

@media screen and (min-width:1200px) {
    .footerMenu {
        max-width: 1180px;
        margin: 0 auto;
        height: 80px;
        flex-flow: wrap;
        overflow: hidden;
        justify-content: center;
        align-items: center
    }

    .footerMenu,
    .footerMenu .foot-menu {
        display: flex
    }

    .footerMenu .foot-menu .fmenu-unit {
        padding: 0 15px
    }

    .footerMenu .foot-menu .fmenu-unit .fmenu-active span {
        height: 19px;
        font-size: 16px;
        color: var(--titleFont);
        line-height: 19px
    }

    .footerMenu .foot-menu .fmenu-unit .fmenu-active span:hover {
        color: var(--button)
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .footerMenu {
        max-width: 750px;
        margin: 0 auto;
        height: 50px;
        flex-flow: wrap;
        overflow: hidden;
        justify-content: center;
        align-items: center
    }

    .footerMenu,
    .footerMenu .foot-menu {
        display: flex
    }

    .footerMenu .foot-menu .fmenu-unit {
        padding: 0 15px
    }

    .footerMenu .foot-menu .fmenu-unit .fmenu-active span {
        height: 19px;
        font-size: 16px;
        color: var(--titleFont);
        line-height: 19px
    }

    .footerMenu .foot-menu .fmenu-unit .fmenu-active span:hover {
        color: var(--button)
    }
}

@media screen and (max-width:767px) {
    .footerMenu {
        display: none
    }
}

@media screen and (min-width:768px) {
    .button-fix {
        display: none
    }
}

@media screen and (max-width:767px) {
    .button-fix {
        position: fixed;
        bottom: -1px;
        width: 100vw;
        height: 72px;
        background-color: var(--themeBGC);
        text-align: center;
        margin-top: 11px;
        z-index: 401;
        border-top: 1px solid var(--themeLine)
    }

    .button-fix .button-row {
        display: flex;
        flex-flow: wrap;
        padding-top: 10px;
        color: var(--footFont)
    }

    .button-fix .button-row .button-item {
        flex: 1
    }

    .button-fix .button-row .button-item i {
        font-size: 32px;
        color: var(--footPhone)
    }

    .button-fix .button-row .active,
    .button-fix .button-row .active i {
        color: var(--footPhoneChoose)
    }
}

@media screen and (min-width:1200px) {
    .chat_with_supplier {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 72px;
        line-height: 72px;
        background-color: hsla(0, 0%, 95.7%, .8);
        box-shadow: 0 0 7px 0 #efefef;
        z-index: 1000
    }

    .chat_with_supplier .chat-item {
        width: 1180px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between
    }

    .chat_with_supplier .chat-item .chat-tips {
        color: var(--black);
        font-size: 24px;
        font-weight: 400
    }

    .chat_with_supplier .chat-item .face-google {
        display: flex;
        align-items: center;
        justify-content: center
    }

    .chat_with_supplier .chat-item .face-google .face-button {
        background-color: #274687;
        margin-right: 20px
    }

    .chat_with_supplier .chat-item .face-google .face-button,
    .chat_with_supplier .chat-item .face-google .google-button {
        padding: 0;
        width: 178px;
        height: 40px;
        line-height: 40px;
        color: var(--white);
        font-size: 16px;
        border-radius: 4px;
        border: 0;
        text-align: center;
        cursor: pointer
    }

    .chat_with_supplier .chat-item .face-google .google-button {
        background-color: #eb4435
    }

    .chat_with_supplier .chat-close {
        position: absolute;
        left: 20px;
        top: 0
    }

    .chat_with_supplier .chat-close i {
        font-size: 20px;
        color: var(--black);
        cursor: pointer
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .chat_with_supplier {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 72px;
        line-height: 72px;
        background-color: hsla(0, 0%, 95.7%, .8);
        box-shadow: 0 0 7px 0 #efefef;
        z-index: 1000
    }

    .chat_with_supplier .chat-item {
        width: 750px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between
    }

    .chat_with_supplier .chat-item .chat-tips {
        color: var(--black);
        font-size: 24px;
        font-weight: 400
    }

    .chat_with_supplier .chat-item .face-google {
        display: flex;
        align-items: center;
        justify-content: center
    }

    .chat_with_supplier .chat-item .face-google .face-button {
        background-color: #274687;
        margin-right: 20px
    }

    .chat_with_supplier .chat-item .face-google .face-button,
    .chat_with_supplier .chat-item .face-google .google-button {
        padding: 0;
        width: 178px;
        height: 40px;
        line-height: 40px;
        color: var(--white);
        font-size: 16px;
        border-radius: 4px;
        border: 0;
        text-align: center;
        cursor: pointer
    }

    .chat_with_supplier .chat-item .face-google .google-button {
        background-color: #eb4435
    }

    .chat_with_supplier .chat-close {
        position: absolute;
        left: 20px;
        top: 0
    }

    .chat_with_supplier .chat-close i {
        font-size: 20px;
        color: var(--black);
        cursor: pointer
    }
}

@media screen and (max-width:767px) {
    .chat_with_supplier {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 72px;
        line-height: 72px;
        background-color: hsla(0, 0%, 95.7%, .8);
        box-shadow: 0 0 7px 0 #efefef;
        z-index: 1000
    }

    .chat_with_supplier .chat-item {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        margin: 16px auto 0
    }

    .chat_with_supplier .chat-item .chat-tips {
        display: none
    }

    .chat_with_supplier .chat-item .face-google {
        display: flex;
        align-items: center;
        justify-content: flex-end
    }

    .chat_with_supplier .chat-item .face-google .face-button {
        background-color: #274687
    }

    .chat_with_supplier .chat-item .face-google .face-button,
    .chat_with_supplier .chat-item .face-google .google-button {
        padding: 0;
        width: 37.5vw;
        height: 40px;
        line-height: 40px;
        color: var(--white);
        font-size: 16px;
        border-radius: 4px;
        border: 0;
        text-align: center;
        margin-right: 5vw
    }

    .chat_with_supplier .chat-item .face-google .google-button {
        background-color: #eb4435
    }

    .chat_with_supplier .chat-close {
        position: absolute;
        left: 0;
        top: 16px;
        height: 40px;
        line-height: 40px;
        width: 15vw;
        text-align: center
    }

    .chat_with_supplier .chat-close i {
        font-size: 20px;
        color: var(--black);
        cursor: pointer
    }
}

@media screen and (min-width:768px) {
    .sendSuccessShadow {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: auto;
        margin: 0;
        z-index: 2021;
        background-color: rgba(0, 0, 0, .5);
        display: flex;
        justify-content: center;
        align-items: center
    }

    .sendSuccessShadow .sendSuccess {
        width: 500px;
        height: 360px;
        border-radius: 4px;
        background: var(--white);
        box-shadow: 0 6px 24px 0 rgba(34, 34, 34, .2);
        position: relative
    }

    .sendSuccessShadow .sendSuccess .iconic_shop_shutdown {
        position: absolute;
        right: 20px;
        top: 20px;
        font-size: 20px;
        color: #777;
        cursor: pointer
    }

    .sendSuccessShadow .sendSuccess .successCon {
        text-align: center;
        padding: 70px 80px
    }

    .sendSuccessShadow .sendSuccess .successCon i {
        color: #49cc49;
        font-size: 80px
    }

    .sendSuccessShadow .sendSuccess .successCon .successP1 {
        color: var(--black);
        font-size: 24px;
        line-height: 30px;
        margin-bottom: 20px;
        margin-top: 10px;
        font-weight: 500
    }

    .sendSuccessShadow .sendSuccess .successCon .successP2 {
        color: #777;
        font-size: 16px;
        line-height: 22px;
        word-break: break-word
    }
}

@media screen and (max-width:767px) {
    .sendSuccessShadow {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: auto;
        margin: 0;
        z-index: 2021;
        background-color: rgba(0, 0, 0, .5);
        display: flex;
        justify-content: center;
        align-items: center
    }

    .sendSuccessShadow .sendSuccess {
        position: relative;
        width: calc(100vw - 30px);
        height: 280px;
        border-radius: 4px;
        background: var(--white);
        box-shadow: 0 6px 24px 0 rgba(34, 34, 34, .2)
    }

    .sendSuccessShadow .sendSuccess .iconic_shop_shutdown {
        position: absolute;
        right: 20px;
        top: 20px;
        font-size: 20px;
        color: #777;
        cursor: pointer
    }

    .sendSuccessShadow .sendSuccess .successCon {
        text-align: center;
        padding: 40px 20px
    }

    .sendSuccessShadow .sendSuccess .successCon i {
        color: #49cc49;
        font-size: 60px
    }

    .sendSuccessShadow .sendSuccess .successCon .successP1 {
        color: var(--black);
        font-size: 24px;
        line-height: 30px;
        margin-bottom: 20px;
        margin-top: 10px;
        font-weight: 500
    }

    .sendSuccessShadow .sendSuccess .successCon .successP2 {
        color: #777;
        font-size: 16px;
        line-height: 22px;
        word-break: break-word
    }
}

@media screen and (min-width:768px) {
    .contacts_po .content .el-form {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between
    }

    .contacts_po .content .el-form .el-form-item {
        flex: 0 0 49%;
        width: 49%;
        margin-bottom: 15px
    }

    .contacts_po .content .el-form .el-form-item .el-form-item__label {
        padding: 0
    }

    .contacts_po .content .el-form .el-form-item .el-select {
        width: 100%
    }

    .contacts_po .content .el-form .message {
        flex: 0 0 100%;
        width: 100%
    }

    .contacts_po .content .el-form .message .el-textarea__inner {
        height: 120px !important;
        min-height: 120px !important
    }

    .contacts_po .dialog-footer {
        display: flex;
        justify-content: center
    }
}

@media screen and (max-width:767px) {
    .contacts_po .content .el-form {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between
    }

    .contacts_po .content .el-form .el-input {
        width: calc(100vw - 28px)
    }

    .contacts_po .content .el-form .el-form-item {
        flex: 0 0 100%;
        width: 100%;
        margin-bottom: 10px
    }

    .contacts_po .content .el-form .el-form-item .el-form-item__label {
        padding: 0
    }

    .contacts_po .content .el-form .message {
        flex: 0 0 100%;
        width: 100%
    }

    .contacts_po .content .el-form .message .el-textarea__inner {
        height: 120px !important;
        min-height: 120px !important
    }

    .contacts_po .dialog-footer {
        display: flex;
        justify-content: center
    }
}

@media screen and (min-width:768px) {
    [data-v-3589555b] .el-dialog {
        width: 750px !important
    }

    [data-v-3589555b] .el-form-item__label {
        height: 20px;
        font-size: 14px;
        color: #111;
        line-height: 20px;
        padding: 0;
        margin-bottom: 4px
    }

    .message[data-v-3589555b] {
        width: 100% !important
    }

    [data-v-3589555b] .el-textarea__inner {
        height: 151px;
        resize: none;
        margin-bottom: 0
    }

    [data-v-3589555b] .el-button--primary {
        background: #222;
        color: #fff
    }
}

@media screen and (max-width:767px) {
    [data-v-3589555b] .el-dialog {
        margin: 0 auto !important;
        width: 100vw !important;
        box-shadow: none
    }

    [data-v-3589555b] .el-dialog__header {
        height: 50px;
        padding: 0 20px;
        display: flex;
        align-items: center;
        box-shadow: 0 1px 0 0 rgba(225, 228, 231, .5);
        position: fixed;
        width: calc(100vw - 40px);
        background: var(--white);
        z-index: 1
    }

    [data-v-3589555b] .el-dialog__body {
        padding: 65px 15px 26px
    }

    [data-v-3589555b] .el-collapse-item__header {
        height: 34px;
        background: #f5f6f7;
        padding-left: 10px
    }

    [data-v-3589555b] .el-form {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between
    }

    [data-v-3589555b] .el-form .el-form-item,
    [data-v-3589555b] .el-form .el-input {
        width: calc(100vw - 28px);
        margin-bottom: 16px
    }

    [data-v-3589555b] .el-form-item__label {
        height: 20px;
        font-size: 14px;
        color: #111;
        line-height: 20px;
        padding: 0;
        margin-bottom: 4px
    }

    [data-v-3589555b] .upload-file .el-upload-list {
        display: none
    }

    .message[data-v-3589555b] {
        width: 100% !important
    }

    [data-v-3589555b] .el-textarea__inner {
        height: 151px;
        resize: none;
        margin-bottom: 0
    }

    [data-v-3589555b] .el-button--primary {
        background: #222;
        color: #fff
    }

    .content-item[data-v-3589555b] {
        display: flex;
        flex-flow: wrap;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        position: relative
    }

    .content-item-left[data-v-3589555b] {
        display: flex;
        margin-bottom: 20px;
        width: calc(100vw - 30px)
    }

    .content-item-left img[data-v-3589555b] {
        width: 56px;
        height: 56px
    }

    .content-item-left-desc[data-v-3589555b] {
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        margin-left: 10px
    }

    .content-item-left-desc .detail[data-v-3589555b] {
        width: calc(100vw - 96px);
        font-size: 14px;
        line-height: 17px;
        color: #111;
        word-break: normal;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        max-height: 34px;
        margin-bottom: 5px
    }

    .content-item-left-desc .price[data-v-3589555b],
    .content-item-left-desc .skuList[data-v-3589555b] {
        width: calc(100vw - 96px);
        height: 17px;
        font-size: 14px;
        color: #777;
        line-height: 20px;
        margin-bottom: 5px
    }

    .content-item-center[data-v-3589555b] {
        display: flex;
        flex: 0 0 100px;
        position: absolute;
        bottom: 0
    }

    .content-item-center span[data-v-3589555b] {
        border: 1px solid #e05248;
        color: #e05248;
        border-radius: 2px;
        width: 96px;
        height: 24px;
        font-size: 12px;
        text-align: center;
        line-height: 24px
    }

    .content-item-right[data-v-3589555b] {
        font-size: 14px;
        color: #111;
        flex: 0 0 100%;
        line-height: 20px;
        text-align: right
    }

    .content-desc[data-v-3589555b] {
        height: 20px;
        font-size: 14px;
        color: #111;
        line-height: 20px;
        padding: 19px 0 16px
    }

    .content .upload-file[data-v-3589555b] {
        display: flex;
        height: 20px;
        font-size: 14px;
        color: #407cfe;
        line-height: 20px
    }

    .content .upload-file span[data-v-3589555b] {
        cursor: pointer
    }

    .content .upload-file .share[data-v-3589555b] {
        margin-left: 32px
    }

    .content .upload-file .SharedFileLink[data-v-3589555b] {
        display: none
    }

    .content .upload-file-desc[data-v-3589555b] {
        height: 17px;
        font-size: 12px;
        color: #999;
        line-height: 17px;
        margin-top: 8px
    }

    .content .upload-list[data-v-3589555b] {
        width: calc(100vw - 28px)
    }

    .content .upload-list-item[data-v-3589555b] {
        height: 25px;
        display: flex;
        justify-content: space-between;
        align-items: center
    }

    .content .upload-list-item[data-v-3589555b] .el-upload-list__item-status-label {
        position: static
    }
}

@media screen and (min-width:768px) {
    .contacts_fixed_button {
        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .15);
        position: fixed;
        right: 23pt;
        bottom: 80px;
        border-radius: 3px;
        z-index: 999;
        width: 48px;
        height: 48px;
        background: var(--button);
        transition: all .2s linear;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer
    }

    .contacts_fixed_button i {
        font-size: 28px;
        color: var(--buttonFont)
    }

    .contacts_fixed_button:hover {
        background-color: var(--buttonHover)
    }

    .contacts_fixed_button:hover i {
        color: var(--buttonFont)
    }

    .contacts_popup_shadow {
        position: fixed;
        background-color: rgba(0, 0, 0, .5);
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 2000
    }

    .contacts_popup_shadow .products_detail_contact_us_row {
        max-width: 750px;
        margin: 150px auto 0
    }

    .contacts_popup_shadow .products_detail_contact_us_row .products_detail_contact_us_title {
        max-width: 750px;
        width: 100%;
        height: 50px;
        top: 100px;
        background-color: var(--white);
        position: absolute;
        text-align: center;
        font-size: 24px;
        padding-top: 30px;
        border-radius: 10px;
        z-index: 1;
        margin-top: -15px;
        color: var(--black)
    }

    .contacts_popup_shadow .products_detail_contact_us_row .products_detail_contact_us_title i {
        position: absolute;
        right: 50px;
        top: 40px;
        cursor: pointer;
        font-size: 18px
    }

    .contacts_popup_shadow .products_detail_contact_us_row .products_detail_contact_us_form {
        position: absolute;
        width: auto;
        height: auto;
        background-color: var(--white)
    }
}

@media screen and (max-width:767px) {
    .contacts_fixed_button {
        display: none
    }

    .el-dialog__wrapper {
        background: var(--white)
    }

    .contacts_popup_shadow {
        position: fixed;
        background-color: rgba(255, 0, 0, .5);
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 2000
    }

    .contacts_popup_shadow .products_detail_contact_us_row {
        max-width: 750px;
        margin: 150px auto 0
    }

    .contacts_popup_shadow .products_detail_contact_us_row .products_detail_contact_us_title {
        max-width: 750px;
        width: 100%;
        height: 50px;
        top: 100px;
        background-color: var(--white);
        position: absolute;
        text-align: center;
        font-size: 24px;
        padding-top: 30px;
        border-radius: 10px;
        z-index: 1;
        margin-top: -15px;
        color: var(--black)
    }

    .contacts_popup_shadow .products_detail_contact_us_row .products_detail_contact_us_title i {
        position: absolute;
        right: 50px;
        top: 40px;
        cursor: pointer;
        font-size: 18px
    }

    .contacts_popup_shadow .products_detail_contact_us_row .products_detail_contact_us_form {
        position: absolute;
        width: auto;
        height: auto;
        background-color: var(--white)
    }
}

@media screen and (min-width:768px) {
    .backTop {
        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .15);
        position: fixed;
        right: 23pt;
        bottom: 18px;
        border-radius: 3px;
        z-index: 1000;
        width: 48px;
        height: 48px;
        background: var(--button);
        transition: all .2s linear;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer
    }

    .backTop i {
        font-size: 20px;
        font-weight: 900;
        color: var(--buttonFont)
    }

    .backTop:hover {
        background-color: var(--buttonHover)
    }

    .backTop:hover i {
        color: var(--buttonFont)
    }
}

@media screen and (max-width:767px) {
    .backTop {
        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .15);
        position: fixed;
        right: 16pt;
        bottom: 80px;
        border-radius: 3px;
        z-index: 999;
        width: 44px;
        height: 44px;
        background: var(--button);
        transition: all .2s linear;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer
    }

    .backTop i {
        font-size: 24px;
        color: var(--buttonFont)
    }

    .backTop:hover {
        background-color: var(--buttonHover)
    }

    .backTop:hover i {
        color: var(--buttonFont)
    }
}

.footer {
    background: var(--footBGC);
    color: var(--footFont)
}

.footer a {
    color: var(--footFontText)
}

.footer a:hover {
    color: var(--button)
}

@media screen and (min-width:1200px) {

    .typeOne,
    .typeThree {
        display: flex;
        flex-flow: wrap;
        overflow: hidden;
        justify-content: space-between
    }

    .typeOne .activities-rows,
    .typeThree .activities-rows {
        position: relative;
        flex: 0 0 575px;
        max-width: 575px
    }

    .typeOne .activities-rows img,
    .typeThree .activities-rows img {
        width: 575px;
        height: 575px;
        object-fit: cover
    }

    .typeOne .activities-rows .activities-title,
    .typeThree .activities-rows .activities-title {
        color: var(--titleFont);
        margin-bottom: 10px;
        transform: translate(0) rotate(0deg);
        transition: all .5s;
        opacity: 0
    }

    .typeOne .activities-rows:hover .activities-title,
    .typeThree .activities-rows:hover .activities-title {
        color: var(--button);
        opacity: 1;
        transform: translateY(-40px) rotate(0deg)
    }

    .typeTwo {
        position: relative
    }

    .typeTwo .activities-rows:first-child {
        width: 776.66px
    }

    .typeTwo .activities-rows:first-child img {
        width: 776.66px;
        height: 776.66px;
        object-fit: cover
    }

    .typeTwo .activities-rows:nth-child(2) {
        position: absolute;
        top: 0;
        right: 0;
        width: 373.33px
    }

    .typeTwo .activities-rows:nth-child(2) img {
        width: 373.33px;
        height: 373.33px;
        object-fit: cover
    }

    .typeTwo .activities-rows:nth-child(3) {
        top: 403px;
        right: 0;
        position: absolute;
        width: 373.33px
    }

    .typeTwo .activities-rows:nth-child(3) img {
        width: 373.33px;
        height: 373.33px;
        object-fit: cover
    }

    .typeTwo .activities-title {
        color: var(--titleFont);
        margin-bottom: 20px;
        transform: translate(0) rotate(0deg);
        transition: all .5s;
        opacity: 0
    }

    .typeTwo .activities-rows:hover .activities-title {
        color: var(--button);
        opacity: 1;
        transform: translateY(-40px) rotate(0deg)
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {

    .typeOne,
    .typeThree {
        display: flex;
        flex-flow: wrap;
        overflow: hidden;
        justify-content: space-between
    }

    .typeOne .activities-rows,
    .typeThree .activities-rows {
        position: relative;
        flex: 0 0 365px;
        max-width: 365px
    }

    .typeOne .activities-rows img,
    .typeThree .activities-rows img {
        width: 365px;
        height: 365px;
        object-fit: cover
    }

    .typeOne .activities-rows .activities-title,
    .typeThree .activities-rows .activities-title {
        color: var(--titleFont);
        transform: translate(0) rotate(0deg);
        transition: all .5s;
        opacity: 0
    }

    .typeOne .activities-rows:hover .activities-title,
    .typeThree .activities-rows:hover .activities-title {
        color: var(--button);
        opacity: 1;
        transform: translateY(-30px) rotate(0deg)
    }

    .typeTwo {
        position: relative
    }

    .typeTwo .activities-rows:first-child {
        width: 495px
    }

    .typeTwo .activities-rows:first-child img {
        width: 495px;
        height: 495px;
        object-fit: cover
    }

    .typeTwo .activities-rows:nth-child(2) {
        position: absolute;
        top: 0;
        right: 0;
        width: 235px
    }

    .typeTwo .activities-rows:nth-child(2) img {
        width: 235px;
        height: 235px;
        object-fit: cover
    }

    .typeTwo .activities-rows:nth-child(3) {
        top: 260px;
        right: 0;
        position: absolute;
        width: 235px
    }

    .typeTwo .activities-rows:nth-child(3) img {
        width: 235px;
        height: 235px;
        object-fit: cover
    }

    .typeTwo .activities-title {
        color: var(--titleFont);
        margin-bottom: 20px;
        transform: translate(0) rotate(0deg);
        transition: all .5s;
        opacity: 0
    }

    .typeTwo .activities-rows:hover .activities-title {
        color: var(--button);
        opacity: 1;
        transform: translateY(-30px) rotate(0deg)
    }
}

@media screen and (max-width:767px) {

    .typeOne,
    .typeThree,
    .typeTwo {
        display: flex;
        flex-flow: wrap;
        overflow: hidden;
        justify-content: space-between
    }

    .typeOne .activities-rows a,
    .typeThree .activities-rows a,
    .typeTwo .activities-rows a {
        position: relative;
        width: calc(50vw - 22.5px);
        height: calc(50vw - 22.5px);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 40px
    }

    .typeOne .activities-rows a img,
    .typeThree .activities-rows a img,
    .typeTwo .activities-rows a img {
        max-width: calc(50vw - 22.5px);
        max-height: calc(50vw - 22.5px)
    }

    .typeOne .activities-rows a .activities-title,
    .typeThree .activities-rows a .activities-title,
    .typeTwo .activities-rows a .activities-title {
        position: absolute;
        bottom: -25px;
        color: var(--titleFont)
    }
}

@media screen and (min-width:1200px) {
    .activities {
        max-width: 1180px;
        margin: 0 auto 60px;
        height: auto;
        font-size: 20px;
        text-align: center
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .activities {
        max-width: 750px;
        margin: 0 auto 40px;
        height: auto;
        text-align: center
    }
}

@media screen and (max-width:767px) {
    .activities {
        width: calc(100vw - 30px);
        margin: 0 auto 40px;
        text-align: center
    }
}

@media screen and (min-width:1200px) {
    .Collection .collection-title {
        width: 100%;
        height: 120px;
        background-color: var(--collectionBanner);
        text-align: center;
        margin-bottom: 60px;
        border-bottom: 1px solid var(--themeLine)
    }

    .Collection .collection-title .title-item1 {
        font-size: 32px;
        margin: 0;
        padding-top: 35px;
        line-height: 32px;
        color: var(--titleFont)
    }

    .Collection .collection-title .title-item2 {
        margin: 0 auto;
        padding-top: 12px;
        color: var(--crumbs);
        font-size: 16px;
        font-weight: 700 !important
    }

    .Collection .collection-title .title-item2 i {
        font-weight: 700 !important
    }

    .Collection .collection-title .title-item2 a {
        color: var(--crumbs)
    }

    .Collection .collection-title .title-item2 a:hover {
        color: var(--button)
    }

    .Collection .collection-title .title-item2 span {
        font-weight: 700 !important;
        color: var(--crumbs)
    }

    .Collection .collection-title .title-item2 .el-breadcrumb {
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .Collection .collection-list {
        max-width: 1180px;
        margin: 0 auto 60px
    }

    .Collection .collection-list .collection-list-item {
        display: flex;
        overflow: hidden;
        margin-bottom: 26px
    }

    .Collection .collection-list .collection-list-item .collection-font {
        flex: 0 0 178px;
        width: 178px;
        height: 178px;
        text-align: center;
        margin-right: 20px;
        z-index: 1;
        display: flex;
        background-color: var(--collectionBanner);
        align-items: center;
        border: 1px solid var(--themeLine)
    }

    .Collection .collection-list .collection-list-item .collection-font .collection-font-title {
        font-size: 20px;
        color: var(--titleFont);
        line-height: 28px;
        height: 56px;
        font-weight: 400;
        display: -webkit-box;
        overflow: hidden;
        text-align: left;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        width: 160px;
        padding: 0 10px;
        margin-bottom: 10px
    }

    .Collection .collection-list .collection-list-item .collection-font .collection-font-number {
        font-size: 14px;
        font-weight: 400;
        color: var(--crumbs);
        line-height: 20px;
        padding-top: 10px
    }

    .Collection .collection-list .collection-list-item .collection-font .collection_button {
        text-align: left;
        width: 160px;
        padding: 0 10px;
        display: flex
    }

    .Collection .collection-list .collection-list-item .collection-font .collection_button .collection_button_left {
        width: 24px;
        height: 24px;
        border-radius: 3px;
        border: 1px solid #777;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 5px;
        cursor: pointer
    }

    .Collection .collection-list .collection-list-item .products_rows {
        display: flex;
        overflow: hidden;
        transition: all .3s ease-out .1s
    }

    .Collection .collection-list .collection-list-item .products_rows .img {
        flex: 0 0 180px;
        width: 180px;
        height: 180px;
        position: relative;
        margin-right: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden
    }

    .Collection .collection-list .collection-list-item .products_rows .img .product-shadow {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 180px;
        height: 0;
        opacity: .6;
        transition: all .5s ease-out;
        -moz-transition: all .5s ease-out;
        -ms-transition: all .5s ease-out;
        -webkit-transition: all .5s ease-out;
        -o-transition: all .5s ease-out
    }

    .Collection .collection-list .collection-list-item .products_rows .img .product-name {
        position: absolute;
        width: 160px;
        opacity: 0;
        left: 10px;
        top: 50px;
        transition: all .3s ease-out;
        -moz-transition: all .3s ease-out;
        -ms-transition: all .3s ease-out;
        -webkit-transition: all .3s ease-out;
        -o-transition: all .3s ease-out;
        color: var(--white)
    }

    .Collection .collection-list .collection-list-item .products_rows .img .product-name h4 {
        font-weight: 400;
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical
    }

    .Collection .collection-list .collection-list-item .products_rows .img .product-name p {
        border-top: 1px solid var(--white);
        padding-top: 12px;
        margin-top: 12px
    }

    .Collection .collection-list .collection-list-item .products_rows .img .product-title {
        position: absolute;
        width: 160px;
        height: 30px;
        text-align: center;
        background: rgba(0, 0, 0, .3);
        bottom: 0;
        left: 0;
        font-size: 16px;
        line-height: 30px;
        color: var(--white);
        padding: 0 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        transition: all .5s ease-out;
        -moz-transition: all .5s ease-out;
        -ms-transition: all .5s ease-out;
        -webkit-transition: all .5s ease-out;
        -o-transition: all .5s ease-out
    }

    .Collection .collection-list .collection-list-item .products_rows .img img {
        max-width: 180px;
        max-height: 180px;
        cursor: pointer;
        display: block
    }

    .Collection .collection-list .collection-list-item .products_rows .img:last-child {
        margin-right: 0
    }

    .Collection .collection-list .collection-list-item .products_rows .img:hover .product-shadow {
        width: 180px;
        height: 180px;
        background-color: rgba(0, 0, 0, .8)
    }

    .Collection .collection-list .collection-list-item .products_rows .img:hover .product-name {
        opacity: 1;
        transition: all .5s ease-out .2s;
        -moz-transition: all .5s ease-out .2s;
        -ms-transition: all .5s ease-out .2s;
        -webkit-transition: all .5s ease-out .2s;
        -o-transition: all .5s ease-out .2s
    }

    .Collection .collection-list .collection-list-item .products_rows .img:hover .product-title {
        opacity: 0
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .Collection .collection-title {
        width: 100%;
        height: 120px;
        background-color: var(--collectionBanner);
        text-align: center;
        margin-bottom: 40px;
        border-bottom: 1px solid var(--themeLine)
    }

    .Collection .collection-title .title-item1 {
        font-size: 32px;
        margin: 0;
        padding-top: 35px;
        line-height: 32px;
        color: var(--titleFont)
    }

    .Collection .collection-title .title-item2 {
        margin: 0 auto;
        padding-top: 12px;
        color: var(--crumbs);
        font-size: 16px;
        font-weight: 700 !important
    }

    .Collection .collection-title .title-item2 i {
        font-weight: 700 !important
    }

    .Collection .collection-title .title-item2 a {
        color: var(--crumbs)
    }

    .Collection .collection-title .title-item2 a:hover {
        color: var(--button)
    }

    .Collection .collection-title .title-item2 span {
        font-weight: 700 !important;
        color: var(--crumbs)
    }

    .Collection .collection-title .title-item2 .el-breadcrumb {
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .Collection .collection-list {
        max-width: 750px;
        margin: 0 auto 60px
    }

    .Collection .collection-list .collection-list-item {
        display: flex;
        overflow: hidden;
        margin-bottom: 26px
    }

    .Collection .collection-list .collection-list-item .collection-font {
        flex: 0 0 170.5px;
        width: 170.5px;
        height: 170.5px;
        text-align: center;
        margin-right: 20px;
        z-index: 1;
        display: flex;
        background-color: var(--collectionBanner);
        border: 1px solid var(--themeLine);
        align-items: center
    }

    .Collection .collection-list .collection-list-item .collection-font .collection-font-title {
        font-size: 20px;
        color: var(--titleFont);
        line-height: 28px;
        height: 56px;
        font-weight: 400;
        display: -webkit-box;
        overflow: hidden;
        text-align: left;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        width: 160px;
        padding: 0 10px;
        margin-bottom: 10px
    }

    .Collection .collection-list .collection-list-item .collection-font .collection-font-number {
        font-size: 14px;
        font-weight: 400;
        color: var(--crumbs);
        line-height: 20px;
        padding-top: 10px
    }

    .Collection .collection-list .collection-list-item .collection-font .collection_button {
        text-align: left;
        width: 160px;
        padding: 0 10px;
        display: flex
    }

    .Collection .collection-list .collection-list-item .collection-font .collection_button .collection_button_left {
        width: 24px;
        height: 24px;
        border-radius: 3px;
        border: 1px solid #777;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 5px;
        cursor: pointer
    }

    .Collection .collection-list .collection-list-item .products_rows {
        display: flex;
        overflow: hidden;
        transition: all .3s ease-out .1s
    }

    .Collection .collection-list .collection-list-item .products_rows .img {
        flex: 0 0 172.5px;
        width: 172.5px;
        height: 172.5px;
        position: relative;
        margin-right: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden
    }

    .Collection .collection-list .collection-list-item .products_rows .img .product-shadow {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 172.5px;
        height: 0;
        opacity: .6;
        transition: all .5s ease-out;
        -moz-transition: all .5s ease-out;
        -ms-transition: all .5s ease-out;
        -webkit-transition: all .5s ease-out;
        -o-transition: all .5s ease-out
    }

    .Collection .collection-list .collection-list-item .products_rows .img .product-name {
        position: absolute;
        width: 152.5px;
        opacity: 0;
        left: 10px;
        top: 50px;
        transition: all .3s ease-out;
        -moz-transition: all .3s ease-out;
        -ms-transition: all .3s ease-out;
        -webkit-transition: all .3s ease-out;
        -o-transition: all .3s ease-out;
        color: var(--white)
    }

    .Collection .collection-list .collection-list-item .products_rows .img .product-name h4 {
        font-weight: 400;
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical
    }

    .Collection .collection-list .collection-list-item .products_rows .img .product-name p {
        border-top: 1px solid var(--white);
        padding-top: 12px;
        margin-top: 12px
    }

    .Collection .collection-list .collection-list-item .products_rows .img .product-title {
        position: absolute;
        width: 152.5px;
        height: 30px;
        text-align: center;
        background: rgba(0, 0, 0, .3);
        bottom: 0;
        left: 0;
        font-size: 16px;
        line-height: 30px;
        color: var(--white);
        padding: 0 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        transition: all .5s ease-out;
        -moz-transition: all .5s ease-out;
        -ms-transition: all .5s ease-out;
        -webkit-transition: all .5s ease-out;
        -o-transition: all .5s ease-out
    }

    .Collection .collection-list .collection-list-item .products_rows .img img {
        max-width: 172.5px;
        max-height: 172.5px;
        cursor: pointer;
        display: block
    }

    .Collection .collection-list .collection-list-item .products_rows .img:last-child {
        margin-right: 0
    }

    .Collection .collection-list .collection-list-item .products_rows .img:hover .product-shadow {
        width: 172.5px;
        height: 172.5px;
        background-color: rgba(0, 0, 0, .8)
    }

    .Collection .collection-list .collection-list-item .products_rows .img:hover .product-name {
        opacity: 1;
        transition: all .5s ease-out .2s;
        -moz-transition: all .5s ease-out .2s;
        -ms-transition: all .5s ease-out .2s;
        -webkit-transition: all .5s ease-out .2s;
        -o-transition: all .5s ease-out .2s
    }

    .Collection .collection-list .collection-list-item .products_rows .img:hover .product-title {
        opacity: 0
    }
}

@media screen and (max-width:767px) {
    .Collection {
        display: none
    }
}

@media screen and (min-width:1200px) {
    .Collection5 .collection-title {
        width: 100%;
        height: 120px;
        background-color: var(--type1);
        text-align: center
    }

    .Collection5 .collection-title .title-item1 {
        font-size: 32px;
        margin: 0;
        padding-top: 35px;
        line-height: 32px;
        color: var(--titleFont)
    }

    .Collection5 .collection-title .title-item2 {
        margin: 0 auto;
        padding-top: 12px;
        font-size: 16px
    }

    .Collection5 .collection-title .title-item2,
    .Collection5 .collection-title .title-item2 i {
        color: var(--textFont);
        font-weight: 700 !important
    }

    .Collection5 .collection-title .title-item2 a {
        color: var(--textFont)
    }

    .Collection5 .collection-title .title-item2 a:hover {
        color: var(--titleFont)
    }

    .Collection5 .collection-title .title-item2 span {
        font-weight: 700 !important;
        color: var(--textFont)
    }

    .Collection5 .collection-title .title-item2 .el-breadcrumb {
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .Collection5 .collection-list {
        max-width: 1200px;
        margin: 0 auto 60px;
        display: flex;
        flex-flow: wrap
    }

    .Collection5 .collection-list .collection_box {
        flex: 0 0 380px;
        height: 380px;
        margin-right: 20px;
        margin-bottom: 20px
    }

    .Collection5 .collection-list .collection_box .collection-list-item {
        display: flex;
        overflow: hidden;
        margin-bottom: 26px
    }

    .Collection5 .collection-list .collection_box .collection-list-item .collection-font {
        flex: 0 0 380px;
        width: 380px;
        height: 380px;
        text-align: center;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .Collection5 .collection-list .collection_box .collection-list-item .collection-font img {
        max-height: 380px;
        max-width: 380px
    }

    .Collection5 .collection-list .collection_box .collection-list-item .collection-font .collection-font-title {
        position: absolute;
        max-width: 300px;
        background: hsla(0, 0%, 100%, .7);
        padding: 20px;
        border-radius: 3px
    }

    .Collection5 .collection-list .collection_box .collection-list-item .collection-font .collection-font-title .collection-font-name {
        font-size: 18px;
        color: var(--titleFont);
        line-height: 24px;
        font-weight: 400;
        display: -webkit-box;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        max-height: 48px;
        margin-bottom: 10px
    }

    .Collection5 .collection-list .collection_box .collection-list-item .collection-font .collection-font-title .collection-font-num {
        font-size: 14px;
        color: var(--titleFont);
        line-height: 20px;
        font-weight: 400
    }

    .Collection5 .collection-list .collection_box:hover .collection-font .collection-font-title .collection-font-name {
        color: var(--button)
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .Collection5 .collection-title {
        width: 100%;
        height: 120px;
        background-color: var(--type1);
        text-align: center
    }

    .Collection5 .collection-title .title-item1 {
        font-size: 32px;
        margin: 0;
        padding-top: 35px;
        line-height: 32px;
        color: var(--titleFont)
    }

    .Collection5 .collection-title .title-item2 {
        margin: 0 auto;
        padding-top: 12px;
        font-size: 16px
    }

    .Collection5 .collection-title .title-item2,
    .Collection5 .collection-title .title-item2 i {
        color: var(--textFont);
        font-weight: 700 !important
    }

    .Collection5 .collection-title .title-item2 a {
        color: var(--textFont)
    }

    .Collection5 .collection-title .title-item2 a:hover {
        color: var(--titleFont)
    }

    .Collection5 .collection-title .title-item2 span {
        font-weight: 700 !important;
        color: var(--textFont)
    }

    .Collection5 .collection-title .title-item2 .el-breadcrumb {
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .Collection5 .collection-list {
        max-width: 765px;
        margin: 0 auto 40px;
        display: flex;
        flex-flow: wrap
    }

    .Collection5 .collection-list .collection_box {
        flex: 0 0 240px;
        height: 240px;
        margin-right: 15px;
        margin-bottom: 15px
    }

    .Collection5 .collection-list .collection_box .collection-list-item {
        display: flex;
        overflow: hidden;
        margin-bottom: 26px
    }

    .Collection5 .collection-list .collection_box .collection-list-item .collection-font {
        flex: 0 0 240px;
        width: 240px;
        height: 240px;
        text-align: center;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .Collection5 .collection-list .collection_box .collection-list-item .collection-font img {
        max-height: 240px;
        max-width: 240px
    }

    .Collection5 .collection-list .collection_box .collection-list-item .collection-font .collection-font-title {
        position: absolute;
        max-width: 180px;
        background: hsla(0, 0%, 100%, .7);
        padding: 10px;
        border-radius: 3px
    }

    .Collection5 .collection-list .collection_box .collection-list-item .collection-font .collection-font-title .collection-font-name {
        font-size: 18px;
        color: var(--titleFont);
        line-height: 24px;
        font-weight: 400;
        display: -webkit-box;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        max-height: 48px;
        margin-bottom: 5px
    }

    .Collection5 .collection-list .collection_box .collection-list-item .collection-font .collection-font-title .collection-font-num {
        font-size: 14px;
        color: var(--titleFont);
        line-height: 20px;
        font-weight: 400
    }

    .Collection5 .collection-list .collection_box:hover .collection-font .collection-font-title .collection-font-name {
        color: var(--button)
    }
}

@media screen and (max-width:767px) {
    .Collection5 {
        display: none
    }
}

@media screen and (min-width:1200px) {
    .xs_collection {
        display: none
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .xs_collection {
        display: none
    }
}

@media screen and (max-width:767px) {
    .xs_collection {
        background-color: var(--white)
    }

    .xs_collection .xs_collection-title {
        width: 100%;
        height: 96px;
        background-color: var(--collectionBanner);
        text-align: center;
        border-bottom: 1px solid var(--themeLine)
    }

    .xs_collection .xs_collection-title .title-item1 {
        font-size: 32px;
        margin: 0;
        padding-top: 35px;
        line-height: 32px;
        color: var(--titleFont)
    }

    .xs_collection .xs_collection-list {
        max-width: calc(100vw - 30px);
        margin: 0 auto;
        padding-top: 10px
    }

    .xs_collection .xs_collection-list .xs_collection-list-item {
        display: flex;
        flex-flow: wrap;
        justify-content: space-between
    }

    .xs_collection .xs_collection-list .xs_collection-list-item .xs_collection-font {
        flex: 0 0 calc(50vw - 24.5px);
        width: calc(50vw - 24.5px);
        height: calc(50vw - 24.5px);
        background-color: var(--white);
        border: 1px solid var(--themeLine);
        text-align: center
    }

    .xs_collection .xs_collection-list .xs_collection-list-item .xs_collection-font .xs_collection-font-title {
        font-size: 20px;
        color: var(--titleFont);
        padding-top: 20px;
        line-height: 28px;
        height: 56px;
        font-weight: 400;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2
    }

    .xs_collection .xs_collection-list .xs_collection-list-item .xs_collection-font .xs_collection-font-number {
        font-size: 14px;
        font-weight: 400;
        color: var(--crumbs);
        line-height: 20px;
        padding: 10px
    }

    .xs_collection .xs_collection-list .xs_collection-list-item .xs_collection-font .button a {
        color: var(--white);
        text-decoration: none
    }

    .xs_collection .xs_collection-list .xs_collection-list-item .xs-img {
        flex: 0 0 calc(50vw - 22.5px);
        width: calc(50vw - 22.5px);
        margin-bottom: 10px
    }

    .xs_collection .xs_collection-list .xs_collection-list-item .xs-img img {
        width: 100%;
        height: calc(50vw - 22.5px);
        object-fit: cover
    }
}

@media screen and (min-width:1200px) {
    .blog-prouduct {
        max-width: 280px;
        text-align: left;
        position: relative;
        margin-bottom: 40px
    }

    .blog-prouduct .blog-prouduct-title {
        text-transform: uppercase;
        height: 18px;
        font-size: 16px;
        font-weight: 700;
        color: var(--titleFont);
        line-height: 19px
    }

    .blog-prouduct .blog-prouduct-row {
        overflow: hidden
    }

    .blog-prouduct .blog-prouduct-row .blog-prouduct-row-item {
        margin: 10px 0;
        display: flex;
        flex-flow: wrap;
        cursor: pointer
    }

    .blog-prouduct .blog-prouduct-row .blog-prouduct-row-item .blog-prouduct-row-item-pic {
        flex: 0 0 80px;
        width: 80px;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .blog-prouduct .blog-prouduct-row .blog-prouduct-row-item .blog-prouduct-row-item-pic img {
        max-width: 80px;
        max-height: 80px;
        height: auto;
        width: auto
    }

    .blog-prouduct .blog-prouduct-row .blog-prouduct-row-item .blog-prouduct-row-text {
        margin-left: 16px;
        flex: 0 0 174px;
        width: 174px
    }

    .blog-prouduct .blog-prouduct-row .blog-prouduct-row-item .blog-prouduct-row-text .title {
        font-size: 14px;
        color: var(--titleFont);
        line-height: 22px;
        margin: 10px 0;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical
    }

    .blog-prouduct .blog-prouduct-row .blog-prouduct-row-item .blog-prouduct-row-text .title:hover {
        color: var(--button)
    }

    .blog-prouduct .blog-prouduct-row .blog-prouduct-row-item .blog-prouduct-row-text .price {
        font-size: 16px;
        font-weight: 500;
        color: var(--titleFont);
        line-height: 19px;
        margin: 0;
        text-overflow: ellipsis
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .blog-prouduct {
        max-width: 190px;
        text-align: left;
        position: relative;
        margin-bottom: 40px
    }

    .blog-prouduct .blog-prouduct-title {
        text-transform: uppercase;
        font-size: 16px;
        font-weight: 700;
        color: var(--titleFont);
        line-height: 19px
    }

    .blog-prouduct .blog-prouduct-row {
        overflow: hidden
    }

    .blog-prouduct .blog-prouduct-row .blog-prouduct-row-item {
        margin: 10px 0;
        display: flex;
        flex-flow: wrap;
        cursor: pointer
    }

    .blog-prouduct .blog-prouduct-row .blog-prouduct-row-item .blog-prouduct-row-item-pic {
        flex: 0 0 80px;
        width: 80px;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .blog-prouduct .blog-prouduct-row .blog-prouduct-row-item .blog-prouduct-row-item-pic img {
        max-width: 80px;
        max-height: 80px;
        height: auto;
        width: auto
    }

    .blog-prouduct .blog-prouduct-row .blog-prouduct-row-item .blog-prouduct-row-text {
        margin-left: 10px;
        flex: 0 0 100px;
        width: 100px
    }

    .blog-prouduct .blog-prouduct-row .blog-prouduct-row-item .blog-prouduct-row-text .title {
        font-size: 14px;
        color: var(--titleFont);
        line-height: 22px;
        margin: 10px 0;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical
    }

    .blog-prouduct .blog-prouduct-row .blog-prouduct-row-item .blog-prouduct-row-text .title:hover {
        color: var(--button)
    }

    .blog-prouduct .blog-prouduct-row .blog-prouduct-row-item .blog-prouduct-row-text .price {
        font-size: 16px;
        font-weight: 500;
        color: var(--titleFont);
        line-height: 19px;
        margin: 0;
        text-overflow: ellipsis
    }
}

@media screen and (max-width:767px) {
    .blog-prouduct {
        display: none
    }
}

@media screen and (min-width:768px) {
    .fold-prouduct {
        display: none
    }
}

@media screen and (max-width:767px) {
    .fold-prouduct .fold-prouduct-title {
        text-transform: uppercase;
        height: 18px;
        font-size: 16px;
        font-weight: 700;
        color: var(--titleFont);
        line-height: 19px;
        padding-left: 15px;
        margin-bottom: 20px
    }

    .fold-prouduct .fold-prouduct-list {
        display: flex;
        flex-flow: wrap;
        justify-content: space-between;
        width: calc(100vw - 30px);
        margin: 0 auto 20px
    }

    .fold-prouduct .fold-prouduct-list .fold-prouduct-row {
        flex: 0 0 50%;
        max-width: calc(50vw - 22.5px)
    }

    .fold-prouduct .fold-prouduct-list .fold-prouduct-row .fold-prouduct-row-item {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: calc(50vw - 22.5px);
        min-height: calc(50vw - 22.5px);
        margin-bottom: 10px
    }

    .fold-prouduct .fold-prouduct-list .fold-prouduct-row .fold-prouduct-row-item .fold-prouduct-row-item-pic img {
        width: 100%
    }

    .fold-prouduct .fold-prouduct-list .fold-prouduct-row .fold-prouduct-row-text {
        text-align: center;
        font-size: 16px
    }

    .fold-prouduct .fold-prouduct-list .fold-prouduct-row .fold-prouduct-row-text .productTitle {
        color: var(--titleFont)
    }

    .fold-prouduct .fold-prouduct-list .fold-prouduct-row .fold-prouduct-row-text .fold-price {
        color: var(--titleFont);
        margin-bottom: 5px
    }
}

@media screen and (min-width:1200px) {
    .BlogList {
        max-width: 1180px;
        margin: 0 auto 60px;
        display: flex;
        justify-content: space-between;
        flex-flow: wrap
    }

    .BlogList .blog_list_left {
        flex: 0 0 860px;
        width: 860px;
        position: relative
    }

    .BlogList .blog_list_left .list {
        margin-bottom: 20px;
        background-color: var(--type1);
        padding: 20px
    }

    .BlogList .blog_list_left .list p {
        margin: 0;
        padding: 0
    }

    .BlogList .blog_list_left .list .title {
        font-size: 20px;
        font-weight: 700;
        padding-bottom: 16px;
        color: var(--titleFont)
    }

    .BlogList .blog_list_left .list .date {
        color: var(--textFont);
        font-size: 14px;
        padding-bottom: 21px
    }

    .BlogList .blog_list_left .list .text {
        color: var(--textFont);
        font-size: 16px;
        margin-bottom: 21px;
        max-width: 1180px;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        text-justify: newspaper;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2
    }

    .BlogList .blog_list_left .list .button {
        padding: 0 10px
    }

    .BlogList .blog_list_left .pagination {
        position: absolute;
        bottom: -40px;
        left: 50%;
        transform: translateX(-50%)
    }

    .BlogList .blog_list_left .pagination .el-icon,
    .BlogList .blog_list_left .pagination .el-pager li {
        font-size: 16px
    }

    .BlogList .blog_list_left .pagination button:hover {
        color: var(--button)
    }

    .BlogList .blog_list_left .pagination .el-pager li.active {
        color: var(--button);
        cursor: default
    }

    .BlogList .blog_list_left .pagination .el-pager li:hover {
        color: var(--button)
    }

    .BlogList .blog_list_right {
        flex: 0 0 280px;
        width: 280px
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .BlogList {
        max-width: 750px;
        margin: 0 auto 60px;
        display: flex;
        justify-content: space-between;
        flex-flow: wrap
    }

    .BlogList .blog_list_left {
        flex: 0 0 530px;
        width: 530px;
        position: relative
    }

    .BlogList .blog_list_left .list {
        margin-bottom: 20px;
        background-color: var(--type1);
        padding: 20px
    }

    .BlogList .blog_list_left .list p {
        margin: 0;
        padding: 0
    }

    .BlogList .blog_list_left .list .title {
        font-size: 16px;
        font-weight: 700;
        padding-bottom: 16px;
        color: var(--titleFont)
    }

    .BlogList .blog_list_left .list .date {
        color: var(--textFont);
        font-size: 14px;
        padding-bottom: 21px
    }

    .BlogList .blog_list_left .list .text {
        color: var(--textFont);
        font-size: 14px;
        margin-bottom: 21px;
        max-width: 750px;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        text-justify: newspaper;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2
    }

    .BlogList .blog_list_left .list .button {
        padding: 0 10px
    }

    .BlogList .blog_list_left .pagination {
        position: absolute;
        bottom: -40px;
        left: 50%;
        transform: translateX(-50%)
    }

    .BlogList .blog_list_left .pagination .el-icon,
    .BlogList .blog_list_left .pagination .el-pager li {
        font-size: 16px
    }

    .BlogList .blog_list_left .pagination button:hover {
        color: var(--button)
    }

    .BlogList .blog_list_left .pagination .el-pager li.active {
        color: var(--button);
        cursor: default
    }

    .BlogList .blog_list_left .pagination .el-pager li:hover {
        color: var(--button)
    }

    .BlogList .blog_list_right {
        flex: 0 0 190px;
        width: 190px
    }
}

@media screen and (max-width:767px) {
    .BlogList {
        margin: 30px auto 60px;
        position: relative
    }

    .BlogList .list {
        width: calc(100vw - 30px);
        margin: 0 auto 20px;
        background-color: var(--type1);
        padding: 20px
    }

    .BlogList .list p {
        margin: 0;
        padding: 0
    }

    .BlogList .list .title {
        font-size: 16px;
        font-weight: 700;
        padding-bottom: 16px;
        color: var(--titleFont)
    }

    .BlogList .list .date {
        color: var(--textFont);
        font-size: 14px;
        padding-bottom: 19px
    }

    .BlogList .list .text {
        color: var(--textFont);
        font-size: 14px;
        margin-bottom: 30px;
        max-width: calc(100vw - 30px);
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        text-justify: newspaper;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5
    }

    .BlogList .list .button {
        padding: 0 10px
    }

    .BlogList .pagination {
        position: absolute;
        bottom: -40px;
        left: 50%;
        transform: translateX(-50%)
    }

    .BlogList .pagination .el-icon,
    .BlogList .pagination .el-pager li {
        font-size: 16px
    }

    .BlogList .pagination button:hover {
        color: var(--button)
    }

    .BlogList .pagination .el-pager li.active {
        color: var(--button);
        cursor: default
    }

    .BlogList .pagination .el-pager li:hover {
        color: var(--button)
    }
}

@media screen and (min-width:1200px) {
    .carousel {
        width: 100%;
        margin: 0 auto 60px
    }

    .carousel .el-carousel__container {
        position: relative
    }

    .carousel .carousel-pic {
        height: 100%;
        position: relative
    }

    .carousel .carousel-pic .mask {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0
    }

    .carousel .carousel-pic .slides-words {
        position: absolute
    }

    .carousel .carousel-pic .slides-words .slides-title {
        font-weight: 500;
        line-height: 50px;
        font-size: 40px;
        width: 65vw;
        transform: translateY(20px) rotate(0deg);
        transition: all .5s;
        opacity: 0
    }

    .carousel .carousel-pic .slides-words .flyH2 {
        transform: translate(0) rotate(0deg);
        opacity: 1
    }

    .carousel .carousel-pic .slides-words .slide-subtitle {
        margin: 10px 4px 20px;
        font-size: 18px;
        font-weight: 400;
        line-height: 24px;
        transform: translateY(20px) rotate(0deg);
        transition: all .5s;
        opacity: 0
    }

    .carousel .carousel-pic .slides-words .flyH3 {
        transform: translate(0) rotate(0deg);
        opacity: 1
    }

    .carousel .carousel-pic .slides-words .button {
        transform: translateY(30px) rotate(0deg);
        transition: all .5s;
        opacity: 0
    }

    .carousel .carousel-pic .slides-words .flyButton {
        transform: translate(0) rotate(0deg);
        opacity: 1
    }

    .carousel .carousel-pic .slides-words-center {
        text-transform: uppercase;
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 65vw
    }

    .carousel .carousel-pic .slides-words-left {
        text-align: left;
        top: 50%;
        transform: translateY(-50%);
        left: calc(50vw - 590px)
    }

    .carousel .carousel-pic .slides-words-right {
        text-align: right;
        top: 50%;
        right: calc(50vw - 590px);
        transform: translateY(-50%)
    }

    .carousel .carousel-pic .slides-words-leftbottom {
        text-align: left;
        bottom: 40px;
        left: calc(50vw - 590px)
    }

    .carousel .carousel-pic .slides-words-rightbottom {
        text-align: right;
        bottom: 40px;
        right: calc(50vw - 590px)
    }

    .carousel .carousel-pic .bg {
        width: 100%;
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .carousel {
        width: 100%;
        margin: 0 auto 40px
    }

    .carousel .el-carousel__container {
        position: relative;
        height: 460px
    }

    .carousel .carousel-pic {
        height: 100%;
        position: relative
    }

    .carousel .carousel-pic .mask {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0
    }

    .carousel .carousel-pic .slides-words {
        position: absolute
    }

    .carousel .carousel-pic .slides-words .slides-title {
        font-weight: 500;
        line-height: 50px;
        font-size: 32px;
        width: 65vw;
        transform: translateY(20px) rotate(0deg);
        transition: all .5s;
        opacity: 0
    }

    .carousel .carousel-pic .slides-words .flyH2 {
        transform: translate(0) rotate(0deg);
        opacity: 1
    }

    .carousel .carousel-pic .slides-words .slide-subtitle {
        margin: 10px 4px 20px;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        transform: translateY(20px) rotate(0deg);
        transition: all .5s;
        opacity: 0
    }

    .carousel .carousel-pic .slides-words .flyH3 {
        transform: translate(0) rotate(0deg);
        opacity: 1
    }

    .carousel .carousel-pic .slides-words .button {
        transform: translateY(30px) rotate(0deg);
        transition: all .5s;
        opacity: 0
    }

    .carousel .carousel-pic .slides-words .flyButton {
        transform: translate(0) rotate(0deg);
        opacity: 1
    }

    .carousel .carousel-pic .slides-words-center {
        text-transform: uppercase;
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 65vw
    }

    .carousel .carousel-pic .slides-words-left {
        text-align: left;
        top: 50%;
        transform: translateY(-50%);
        left: calc(50vw - 375px)
    }

    .carousel .carousel-pic .slides-words-right {
        text-align: right;
        top: 50%;
        right: calc(50vw - 375px);
        transform: translateY(-50%)
    }

    .carousel .carousel-pic .slides-words-leftbottom {
        text-align: left;
        bottom: 40px;
        left: calc(50vw - 375px)
    }

    .carousel .carousel-pic .slides-words-rightbottom {
        text-align: right;
        bottom: 40px;
        right: calc(50vw - 375px)
    }

    .carousel .carousel-pic .bg {
        width: 100%;
        height: 460px;
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover
    }
}

@media screen and (max-width:767px) {
    .carousel {
        width: 100%;
        margin: 0 auto 40px
    }

    .carousel .carousel-cut .el-carousel__container {
        position: relative;
        height: 120vw !important
    }

    .carousel .carousel-cut .el-carousel__container .carousel-pic {
        height: 100%;
        position: relative
    }

    .carousel .carousel-cut .el-carousel__container .carousel-pic .mask {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0
    }

    .carousel .carousel-cut .el-carousel__container .carousel-pic .slides-words {
        position: absolute
    }

    .carousel .carousel-cut .el-carousel__container .carousel-pic .slides-words .slides-title {
        font-weight: 500;
        line-height: 35px;
        font-size: 32px;
        transform: translateY(20px) rotate(0deg);
        transition: all .5s;
        opacity: 0
    }

    .carousel .carousel-cut .el-carousel__container .carousel-pic .slides-words .flyH2 {
        transform: translate(0) rotate(0deg);
        opacity: 1
    }

    .carousel .carousel-cut .el-carousel__container .carousel-pic .slides-words .slide-subtitle {
        margin: 15px 4px;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        transform: translateY(20px) rotate(0deg);
        transition: all .5s;
        opacity: 0
    }

    .carousel .carousel-cut .el-carousel__container .carousel-pic .slides-words .flyH3 {
        transform: translate(0) rotate(0deg);
        opacity: 1
    }

    .carousel .carousel-cut .el-carousel__container .carousel-pic .slides-words .button {
        transform: translateY(30px) rotate(0deg);
        transition: all .5s;
        opacity: 0
    }

    .carousel .carousel-cut .el-carousel__container .carousel-pic .slides-words .flyButton {
        transform: translate(0) rotate(0deg);
        opacity: 1
    }

    .carousel .carousel-cut .el-carousel__container .carousel-pic .slides-words-center {
        text-transform: uppercase;
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 65vw
    }

    .carousel .carousel-cut .el-carousel__container .carousel-pic .slides-words-left {
        text-align: left;
        top: 50%;
        transform: translateY(-50%);
        left: 50px
    }

    .carousel .carousel-cut .el-carousel__container .carousel-pic .slides-words-right {
        text-align: right;
        top: 50%;
        right: 50px;
        transform: translateY(-50%)
    }

    .carousel .carousel-cut .el-carousel__container .carousel-pic .slides-words-leftbottom {
        text-align: left;
        bottom: 40px;
        left: 50px
    }

    .carousel .carousel-cut .el-carousel__container .carousel-pic .slides-words-rightbottom {
        text-align: right;
        bottom: 40px;
        right: 50px
    }

    .carousel .carousel-cut .el-carousel__container .carousel-pic .bg {
        width: 100%;
        height: 120vw !important;
        object-fit: cover;
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover
    }

    .carousel .carousel-uncut .el-carousel__container {
        position: relative;
        height:200px;
    }

    .carousel .carousel-uncut .el-carousel__container .carousel-pic {
        height: 100%;
        position: relative
    }

    .carousel .carousel-uncut .el-carousel__container .carousel-pic .mask {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0
    }

    .carousel .carousel-uncut .el-carousel__container .carousel-pic .slides-words {
        position: absolute
    }

    .carousel .carousel-uncut .el-carousel__container .carousel-pic .slides-words .slides-title {
        font-weight: 500;
        line-height: 35px;
        font-size: 32px;
        transform: translateY(20px) rotate(0deg);
        transition: all .5s;
        opacity: 0
    }

    .carousel .carousel-uncut .el-carousel__container .carousel-pic .slides-words .flyH2 {
        transform: translate(0) rotate(0deg);
        opacity: 1
    }

    .carousel .carousel-uncut .el-carousel__container .carousel-pic .slides-words .slide-subtitle {
        margin: 15px 4px;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        transform: translateY(20px) rotate(0deg);
        transition: all .5s;
        opacity: 0
    }

    .carousel .carousel-uncut .el-carousel__container .carousel-pic .slides-words .flyH3 {
        transform: translate(0) rotate(0deg);
        opacity: 1
    }

    .carousel .carousel-uncut .el-carousel__container .carousel-pic .slides-words .button {
        transform: translateY(30px) rotate(0deg);
        transition: all .5s;
        opacity: 0
    }

    .carousel .carousel-uncut .el-carousel__container .carousel-pic .slides-words .flyButton {
        transform: translate(0) rotate(0deg);
        opacity: 1
    }

    .carousel .carousel-uncut .el-carousel__container .carousel-pic .slides-words-center {
        text-transform: uppercase;
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 65vw
    }

    .carousel .carousel-uncut .el-carousel__container .carousel-pic .slides-words-left {
        text-align: left;
        top: 50%;
        transform: translateY(-50%);
        left: 50px
    }

    .carousel .carousel-uncut .el-carousel__container .carousel-pic .slides-words-right {
        text-align: right;
        top: 50%;
        right: 50px;
        transform: translateY(-50%)
    }

    .carousel .carousel-uncut .el-carousel__container .carousel-pic .slides-words-leftbottom {
        text-align: left;
        bottom: 40px;
        left: 50px
    }

    .carousel .carousel-uncut .el-carousel__container .carousel-pic .slides-words-rightbottom {
        text-align: right;
        bottom: 40px;
        right: 50px
    }

    .carousel .carousel-uncut .el-carousel__container .carousel-pic .bg {
        width: 100%;
        object-fit: cover;
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover
    }
}

@media screen and (min-width:1200px) {

    .ProductSeriesList,
    .ProductSeriesList .ProductSeriesImg {
        width: 100%
    }

    .ProductSeriesList .ProductSeriesImg img {
        width: 100%;
        object-fit: cover
    }

    .ProductSeriesList .ProductSeriesContect {
        max-width: 1180px;
        margin: 40px auto 0
    }

    .ProductSeriesList .ProductSeriesContect .title {
        font-size: 24px;
        line-height: 30px;
        color: var(--titleFont);
        text-align: center;
        margin-bottom: 30px
    }

    .ProductSeriesList .ProductSeriesContect .text {
        margin-bottom: 40px
    }

    .ProductSeriesList .series_product {
        max-width: 1180px;
        margin: 0 auto 100px;
        display: flex;
        flex-flow: wrap;
        position: relative
    }

    .ProductSeriesList .series_product .series_product_item {
        flex: 0 0 25%;
        max-width: 25%;
        overflow: hidden;
        display: flex;
        justify-content: center
    }

    .ProductSeriesList .series_product .series_product_item .series_product_item_pic {
        font-size: 16px;
        position: relative;
        width: 275px;
        height: 275px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px
    }

    .ProductSeriesList .series_product .series_product_item .series_product_item_pic img {
        max-width: 275px;
        max-height: 275px
    }

    .ProductSeriesList .series_product .series_product_item .productTitle {
        max-width: 275px;
        -webkit-line-clamp: 2;
        color: var(--titleFont)
    }

    .ProductSeriesList .series_product .series_product_item .productPrice {
        max-width: 275px;
        color: var(--titleFont)
    }

    .ProductSeriesList .series_product .series_product_item:hover .productTitle {
        color: var(--button)
    }

    .ProductSeriesList .series_product .pagination {
        position: absolute;
        bottom: -60px;
        left: 50%;
        transform: translateX(-50%)
    }

    .ProductSeriesList .series_product .pagination .el-icon,
    .ProductSeriesList .series_product .pagination .el-pager li {
        font-size: 16px
    }

    .ProductSeriesList .series_product .pagination button:hover {
        color: var(--button)
    }

    .ProductSeriesList .series_product .pagination .el-pager li.active {
        color: var(--button);
        cursor: default
    }

    .ProductSeriesList .series_product .pagination .el-pager li:hover {
        color: var(--button)
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {

    .ProductSeriesList,
    .ProductSeriesList .ProductSeriesImg {
        width: 100%
    }

    .ProductSeriesList .ProductSeriesImg img {
        width: 100%;
        object-fit: cover
    }

    .ProductSeriesList .ProductSeriesContect {
        max-width: 750px;
        margin: 30px auto 0
    }

    .ProductSeriesList .ProductSeriesContect .title {
        font-size: 20px;
        line-height: 24px;
        color: var(--titleFont);
        text-align: center;
        margin-bottom: 20px
    }

    .ProductSeriesList .ProductSeriesContect .text {
        margin-bottom: 30px
    }

    .ProductSeriesList .series_product {
        max-width: 750px;
        margin: 0 auto 80px;
        display: flex;
        flex-flow: wrap;
        position: relative
    }

    .ProductSeriesList .series_product .series_product_item {
        flex: 0 0 25%;
        max-width: 25%;
        overflow: hidden;
        display: flex;
        justify-content: center
    }

    .ProductSeriesList .series_product .series_product_item .series_product_item_pic {
        font-size: 16px;
        position: relative;
        width: 167.5px;
        height: 167.5px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px
    }

    .ProductSeriesList .series_product .series_product_item .series_product_item_pic img {
        max-width: 167.5px;
        max-height: 167.5px
    }

    .ProductSeriesList .series_product .series_product_item .productTitle {
        max-width: 167.5px;
        -webkit-line-clamp: 2;
        color: var(--titleFont)
    }

    .ProductSeriesList .series_product .series_product_item .productPrice {
        max-width: 167.5px;
        color: var(--titleFont)
    }

    .ProductSeriesList .series_product .series_product_item:hover .productTitle {
        color: var(--button)
    }

    .ProductSeriesList .series_product .pagination {
        position: absolute;
        bottom: -40px;
        left: 50%;
        transform: translateX(-50%)
    }

    .ProductSeriesList .series_product .pagination .el-icon,
    .ProductSeriesList .series_product .pagination .el-pager li {
        font-size: 16px
    }

    .ProductSeriesList .series_product .pagination button:hover {
        color: var(--button)
    }

    .ProductSeriesList .series_product .pagination .el-pager li.active {
        color: var(--button);
        cursor: default
    }

    .ProductSeriesList .series_product .pagination .el-pager li:hover {
        color: var(--button)
    }
}

@media screen and (max-width:767px) {

    .ProductSeriesList,
    .ProductSeriesList .ProductSeriesImg,
    .ProductSeriesList .ProductSeriesImg img {
        width: 100%
    }

    .ProductSeriesList .ProductSeriesContect {
        width: calc(100vw - 30px);
        margin: 30px auto 0
    }

    .ProductSeriesList .ProductSeriesContect .title {
        font-size: 20px;
        line-height: 24px;
        color: var(--titleFont);
        text-align: center;
        margin-bottom: 20px
    }

    .ProductSeriesList .ProductSeriesContect .text {
        margin-bottom: 30px
    }

    .ProductSeriesList .series_product {
        display: flex;
        flex-flow: wrap;
        justify-content: space-between;
        position: relative;
        margin-bottom: 60px
    }

    .ProductSeriesList .series_product .series_product_item {
        flex: 0 0 50%;
        max-width: calc(50% - 7.5px);
        overflow: hidden;
        display: flex;
        justify-content: center
    }

    .ProductSeriesList .series_product .series_product_item .series_product_item_pic {
        font-size: 16px;
        position: relative;
        width: calc(50vw - 22.5px);
        height: calc(50vw - 22.5px);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px
    }

    .ProductSeriesList .series_product .series_product_item .series_product_item_pic img {
        max-width: calc(50vw - 22.5px);
        max-height: calc(50vw - 22.5px)
    }

    .ProductSeriesList .series_product .series_product_item .productTitle {
        max-width: calc(50vw - 22.5px);
        -webkit-line-clamp: 2;
        color: var(--titleFont)
    }

    .ProductSeriesList .series_product .series_product_item .productPrice {
        max-width: calc(50vw - 22.5px);
        color: var(--titleFont)
    }

    .ProductSeriesList .pagination {
        position: absolute;
        bottom: -50px;
        left: 50%;
        transform: translateX(-50%)
    }

    .ProductSeriesList .pagination .el-icon,
    .ProductSeriesList .pagination .el-pager li {
        font-size: 16px
    }

    .ProductSeriesList .pagination button:hover {
        color: var(--button)
    }

    .ProductSeriesList .pagination .el-pager li.active {
        color: var(--button);
        cursor: default
    }

    .ProductSeriesList .pagination .el-pager li:hover {
        color: var(--button)
    }
}

@media screen and (min-width:1200px) {
    .combinationProduct {
        max-width: 1180px;
        margin: 0 auto 60px;
        overflow: hidden;
        position: relative
    }

    .combinationProduct .combinationProduct_cover {
        width: 1180px;
        height: 270px;
        margin-bottom: 30px
    }

    .combinationProduct .combinationProduct_cover img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .combinationProduct .combinationProduct-title {
        margin: 0 0 16px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        text-transform: uppercase;
        font-size: 24px;
        font-weight: 500;
        color: var(--titleFont)
    }

    .combinationProduct .combinationProduct-desc {
        margin-bottom: 30px
    }

    .combinationProduct .combinationProduct-item {
        display: flex;
        overflow: hidden;
        transition: all .3s ease-out .1s
    }

    .combinationProduct .combinationProduct-item .featured4 {
        flex: 0 0 295px;
        max-width: 295px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        margin-bottom: 20px
    }

    .combinationProduct .combinationProduct-item .featured-item {
        width: 280px;
        position: relative
    }

    .combinationProduct .combinationProduct-item .featured-item .firstImg {
        position: absolute;
        height: 280px;
        width: 280px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        margin-bottom: 10px;
        transition: all .5s;
        background-color: var(--white);
        top: 0;
        left: 50%;
        transform: translateX(-50%)
    }

    .combinationProduct .combinationProduct-item .featured-item .firstImg img {
        max-width: 280px;
        max-height: 280px
    }

    .combinationProduct .combinationProduct-item .featured-item .firstImg:hover {
        opacity: 0
    }

    .combinationProduct .combinationProduct-item .featured-item .secondImg {
        font-size: 16px;
        position: relative;
        height: 280px;
        width: 280px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        margin-bottom: 10px
    }

    .combinationProduct .combinationProduct-item .featured-item .secondImg img {
        max-width: 280px;
        max-height: 280px
    }

    .combinationProduct .combinationProduct-item .featured-item .productPrice {
        margin: 0
    }

    .combinationProduct .combinationProduct_button {
        display: flex;
        height: 32px;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        width: 95%;
        left: 2.5%;
        bottom: 200px;
        opacity: 0;
        transition-property: opacity, width, left;
        transition-duration: .5s
    }

    .combinationProduct .combinationProduct_button .combinationProduct_button_item {
        width: 44px;
        height: 44px;
        border-radius: 22px;
        background-color: var(--button);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer
    }

    .combinationProduct .combinationProduct_button .combinationProduct_button_item i {
        color: var(--white)
    }

    .combinationProduct .combinationProduct_button .combinationProduct_button_item:hover {
        background-color: var(--buttonHover)
    }

    .combinationProduct:hover .combinationProduct_button {
        opacity: 1;
        width: 100%;
        left: 0
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .combinationProduct {
        max-width: 750px;
        margin: 0 auto 40px;
        overflow: hidden;
        position: relative
    }

    .combinationProduct .combinationProduct_cover {
        width: 750px;
        height: 170px;
        margin-bottom: 20px
    }

    .combinationProduct .combinationProduct_cover img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .combinationProduct .combinationProduct-title {
        margin: 0 0 12px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        text-transform: uppercase;
        font-size: 24px;
        font-weight: 500;
        color: var(--titleFont)
    }

    .combinationProduct .combinationProduct-desc {
        margin-bottom: 20px
    }

    .combinationProduct .combinationProduct-item {
        display: flex;
        overflow: hidden;
        transition: all .3s ease-out .1s;
        margin-bottom: 10px
    }

    .combinationProduct .combinationProduct-item .featured4 {
        flex: 0 0 187.5px;
        max-width: 187.5px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        margin-bottom: 20px
    }

    .combinationProduct .combinationProduct-item .featured4 .featured-item {
        width: 172.5px;
        position: relative
    }

    .combinationProduct .combinationProduct-item .featured4 .featured-item .firstImg {
        position: absolute;
        height: 172.5px;
        width: 172.5px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        margin-bottom: 10px;
        transition: all .5s;
        background-color: var(--white);
        top: 0;
        left: 50%;
        transform: translateX(-50%)
    }

    .combinationProduct .combinationProduct-item .featured4 .featured-item .firstImg img {
        max-width: 172.5px;
        max-height: 172.5px
    }

    .combinationProduct .combinationProduct-item .featured4 .featured-item .firstImg:hover {
        opacity: 0
    }

    .combinationProduct .combinationProduct-item .featured4 .featured-item .secondImg {
        font-size: 16px;
        position: relative;
        height: 172.5px;
        width: 172.5px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        margin-bottom: 10px
    }

    .combinationProduct .combinationProduct-item .featured4 .featured-item .secondImg img {
        max-width: 172.5px;
        max-height: 172.5px
    }

    .combinationProduct .combinationProduct-item .featured4 .featured-item .productPrice {
        margin: 0
    }

    .combinationProduct .combinationProduct_button {
        display: flex;
        height: 32px;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        width: 95%;
        left: 2.5%;
        bottom: 160px;
        opacity: 0;
        transition-property: opacity, width, left;
        transition-duration: .5s
    }

    .combinationProduct .combinationProduct_button .combinationProduct_button_item {
        width: 44px;
        height: 44px;
        border-radius: 22px;
        background-color: var(--button);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer
    }

    .combinationProduct .combinationProduct_button .combinationProduct_button_item i {
        color: var(--white)
    }

    .combinationProduct .combinationProduct_button .combinationProduct_button_item:hover {
        background-color: var(--buttonHover)
    }

    .combinationProduct:hover .combinationProduct_button {
        opacity: 1;
        width: 100%;
        left: 0
    }
}

@media screen and (max-width:767px) {
    .combinationProduct {
        margin: 0 auto 40px;
        width: calc(100vw - 30px)
    }

    .combinationProduct .combinationProduct_cover {
        width: calc(100vw - 30px);
        margin-bottom: 30px
    }

    .combinationProduct .combinationProduct_cover img {
        width: 100%
    }

    .combinationProduct .combinationProduct-title {
        line-height: 24px;
        margin: 0 0 20px;
        text-align: center;
        text-transform: uppercase;
        font-size: 24px;
        font-weight: 500;
        color: var(--titleFont)
    }

    .combinationProduct .combinationProduct-desc {
        margin-bottom: 20px
    }

    .combinationProduct .combinationProduct-item {
        display: flex;
        flex-flow: wrap;
        justify-content: space-between
    }

    .combinationProduct .combinationProduct-item .featured4 {
        flex: 0 0 50%;
        max-width: calc(50% - 7.5px);
        overflow: hidden;
        padding-bottom: 10px
    }

    .combinationProduct .combinationProduct-item .featured4 .featured-item {
        width: calc(50vw - 22.5px)
    }

    .combinationProduct .combinationProduct-item .featured4 .featured-item .firstImg {
        font-size: 16px;
        position: relative;
        width: calc(50vw - 22.5px);
        height: calc(50vw - 22.5px);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px
    }

    .combinationProduct .combinationProduct-item .featured4 .featured-item .firstImg img {
        max-width: calc(50vw - 22.5px);
        max-height: calc(50vw - 22.5px)
    }

    .combinationProduct .combinationProduct-item .featured4 .featured-item .secondImg {
        display: none
    }

    .combinationProduct .combinationProduct-item .featured4 .featured-item .productPrice {
        margin: 0
    }

    .combinationProduct .combinationProduct_button {
        display: none
    }
}

@media screen and (min-width:1200px) {
    .company_attribute {
        width: 100%;
        margin: 0 auto 60px
    }

    .company_attribute .company_attribute_center {
        max-width: 1180px;
        margin: 0 auto
    }

    .company_attribute .company_attribute_center .company_attribute_title {
        text-align: left;
        margin-bottom: 25px;
        font-size: 24px;
        font-weight: 700;
        color: var(--titleFont)
    }

    .company_attribute .company_attribute_center .half {
        display: flex;
        flex-flow: wrap;
        justify-content: space-between
    }

    .company_attribute .company_attribute_center .half .half-item {
        flex: 0 0 calc(50% - 2px);
        width: 50%;
        min-height: 48px;
        line-height: 24px;
        display: flex;
        align-items: center;
        background-color: var(--white);
        margin-bottom: 4px
    }

    .company_attribute .company_attribute_center .half .half-item .half-item-left {
        flex: 0 0 174px;
        padding-left: 20px;
        float: left;
        color: var(--textFont)
    }

    .company_attribute .company_attribute_center .half .half-item .half-item-right {
        word-break: break-all;
        padding: 5px 30px 5px 0;
        float: right;
        color: var(--titleFont);
        max-width: 300px
    }

    .company_attribute .company_attribute_center .whole {
        display: flex;
        width: 100%;
        background-color: var(--white);
        margin-bottom: 4px
    }

    .company_attribute .company_attribute_center .whole .whole-item-left {
        flex: 0 0 174px;
        padding-left: 20px;
        width: 150px;
        color: var(--textFont);
        height: 48px;
        line-height: 48px
    }

    .company_attribute .company_attribute_center .whole .whole-item-right {
        margin: auto 0;
        padding: 10px 0;
        color: var(--titleFont)
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .company_attribute {
        width: 100%;
        margin: 0 auto 40px
    }

    .company_attribute .company_attribute_center {
        max-width: 750px;
        margin: 0 auto
    }

    .company_attribute .company_attribute_center .company_attribute_title {
        text-align: left;
        margin-bottom: 25px;
        font-size: 20px;
        font-weight: 700;
        color: var(--titleFont)
    }

    .company_attribute .company_attribute_center .half {
        display: flex;
        flex-flow: wrap;
        justify-content: space-between
    }

    .company_attribute .company_attribute_center .half .half-item {
        flex: 0 0 calc(50% - 2px);
        width: 50%;
        min-height: 48px;
        line-height: 24px;
        display: flex;
        align-items: center;
        background-color: var(--white);
        margin-bottom: 4px
    }

    .company_attribute .company_attribute_center .half .half-item .half-item-left {
        flex: 0 0 164px;
        padding-left: 10px;
        float: left;
        color: var(--textFont)
    }

    .company_attribute .company_attribute_center .half .half-item .half-item-right {
        word-break: break-all;
        padding: 5px 10px 5px 0;
        float: right;
        color: var(--titleFont);
        max-width: 180px
    }

    .company_attribute .company_attribute_center .whole {
        display: flex;
        width: 100%;
        background-color: var(--white);
        margin-bottom: 4px
    }

    .company_attribute .company_attribute_center .whole .whole-item-left {
        flex: 0 0 164px;
        padding-left: 10px;
        width: 150px;
        color: var(--textFont);
        height: 48px;
        line-height: 48px
    }

    .company_attribute .company_attribute_center .whole .whole-item-right {
        margin: auto 0;
        padding: 10px 0;
        color: var(--titleFont)
    }
}

@media screen and (max-width:767px) {
    .company_attribute {
        width: 100%;
        margin: 0 auto 40px
    }

    .company_attribute .company_attribute_center {
        max-width: calc(100vw - 30px);
        margin: 0 auto
    }

    .company_attribute .company_attribute_center .company_attribute_title {
        text-align: left;
        margin-bottom: 20px;
        font-size: 20px;
        font-weight: 700;
        color: var(--titleFont)
    }

    .company_attribute .company_attribute_center .half {
        display: block;
        flex-flow: wrap;
        margin: 0 auto
    }

    .company_attribute .company_attribute_center .half .half-item {
        line-height: 32px;
        padding: 0 10px;
        background-color: var(--white);
        margin-bottom: 4px
    }

    .company_attribute .company_attribute_center .half .half-item .half-item-left {
        color: var(--textFont)
    }

    .company_attribute .company_attribute_center .half .half-item .half-item-right {
        word-break: break-all;
        color: var(--titleFont)
    }

    .company_attribute .company_attribute_center .whole {
        display: flex;
        flex-flow: wrap;
        padding: 0 10px;
        background-color: var(--white);
        margin-bottom: 4px
    }

    .company_attribute .company_attribute_center .whole .whole-item-left {
        width: 150px;
        color: var(--textFont);
        line-height: 32px
    }

    .company_attribute .company_attribute_center .whole .whole-item-right {
        width: 560px;
        margin: auto 0;
        padding: 10px 0;
        color: var(--titleFont)
    }
}

@media screen and (min-width:1200px) {
    .Download {
        max-width: 1180px;
        margin: 0 auto 60px;
        text-align: left
    }

    .Download .Download-title {
        font-size: 24px;
        padding-bottom: 30px;
        margin: 0;
        color: var(--titleFont)
    }

    .Download .Download-item {
        flex-flow: wrap;
        justify-content: space-between;
        padding: 10px 20px;
        border: 1px solid var(--themeLine);
        background-color: var(--white)
    }

    .Download .Download-item .Download-item-row {
        overflow: hidden;
        height: 48px;
        border-bottom: 1px solid var(--themeLine)
    }

    .Download .Download-item .Download-item-row .row-item-pic {
        font-size: 16px;
        text-align: center
    }

    .Download .Download-item .Download-item-row .row-item-pic .icon21file {
        float: left;
        line-height: 48px;
        font-size: 20px
    }

    .Download .Download-item .Download-item-row .row-item-pic .title {
        color: var(--textFont);
        float: left;
        margin: 0;
        padding-left: 5px;
        line-height: 48px;
        font-size: 14px
    }

    .Download .Download-item .Download-item-row .row-item-pic .title:hover a {
        color: var(--button)
    }

    .Download .Download-item .Download-item-row .row-item-pic .iconic_shop_download {
        float: right;
        line-height: 48px;
        font-size: 16px;
        cursor: pointer
    }

    .Download .Download-item .Download-item-row .row-item-pic .iconic_shop_download:hover {
        color: var(--button)
    }

    .Download .Download-item .Download-item-row:last-child {
        border: none
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .Download {
        max-width: 750px;
        margin: 0 auto 40px;
        text-align: left
    }

    .Download .Download-title {
        font-size: 24px;
        padding-bottom: 30px;
        margin: 0;
        color: var(--titleFont)
    }

    .Download .Download-item {
        flex-flow: wrap;
        justify-content: space-between;
        padding: 10px 20px;
        border: 1px solid var(--themeLine);
        background-color: var(--white)
    }

    .Download .Download-item .Download-item-row {
        overflow: hidden;
        height: 48px;
        border-bottom: 1px solid var(--themeLine)
    }

    .Download .Download-item .Download-item-row .row-item-pic {
        font-size: 16px;
        text-align: center
    }

    .Download .Download-item .Download-item-row .row-item-pic .icon21file {
        float: left;
        line-height: 48px;
        font-size: 20px
    }

    .Download .Download-item .Download-item-row .row-item-pic .title {
        color: var(--textFont);
        float: left;
        margin: 0;
        padding-left: 5px;
        line-height: 48px;
        font-size: 14px
    }

    .Download .Download-item .Download-item-row .row-item-pic .title:hover a {
        color: var(--button)
    }

    .Download .Download-item .Download-item-row .row-item-pic .iconic_shop_download {
        float: right;
        line-height: 48px;
        font-size: 16px;
        cursor: pointer
    }

    .Download .Download-item .Download-item-row .row-item-pic .iconic_shop_download:hover {
        color: var(--button)
    }

    .Download .Download-item .Download-item-row:last-child {
        border: none
    }
}

@media screen and (max-width:767px) {
    .Download {
        width: calc(100vw - 30px);
        margin: 0 auto 40px;
        text-align: left
    }

    .Download .Download-title {
        font-size: 24px;
        padding-bottom: 20px;
        margin: 0;
        color: var(--titleFont)
    }

    .Download .Download-item {
        flex-flow: wrap;
        justify-content: space-between;
        padding: 10px;
        border: 1px solid var(--themeLine);
        background-color: var(--white)
    }

    .Download .Download-item .Download-item-row {
        overflow: hidden;
        height: 48px;
        border-bottom: 1px solid var(--themeLine)
    }

    .Download .Download-item .Download-item-row .row-item-pic {
        font-size: 16px;
        text-align: center
    }

    .Download .Download-item .Download-item-row .row-item-pic .icon21file {
        float: left;
        line-height: 48px;
        font-size: 20px
    }

    .Download .Download-item .Download-item-row .row-item-pic .title {
        color: var(--textFont);
        float: left;
        padding-left: 5px;
        line-height: 48px;
        width: 60vw;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-align: left;
        text-overflow: ellipsis
    }

    .Download .Download-item .Download-item-row .row-item-pic .title:hover a {
        color: var(--button)
    }

    .Download .Download-item .Download-item-row .row-item-pic .iconic_shop_download {
        float: right;
        line-height: 48px;
        font-size: 16px;
        cursor: pointer
    }

    .Download .Download-item .Download-item-row:last-child {
        border: none
    }
}

@media screen and (min-width:1200px) {
    .company_map {
        width: 1180px;
        margin: 0 auto 60px;
        height: 360px;
        position: relative;
        display: flex;
        flex-direction: row-reverse
    }

    .company_map .address,
    .company_map .company_map_item {
        width: 590px;
        height: 360px
    }

    .company_map .address {
        position: absolute;
        left: 0;
        top: 0;
        margin: 0 auto
    }

    .company_map .address .address-item {
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: 401;
        text-align: center;
        display: -webkit-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }

    .company_map .address .address-item .address-title {
        font-size: 20px;
        padding-top: 10px;
        font-weight: 600;
        line-height: 28px;
        color: var(--titleFont)
    }

    .company_map .address .address-item .address-text {
        padding-bottom: 24px;
        font-size: 14px;
        font-weight: 400;
        color: var(--textFont);
        line-height: 20px;
        padding-top: 15px;
        max-height: 135px;
        width: 80%;
        text-align: center;
        margin: 0 auto;
        overflow: hidden
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .company_map {
        width: 750px;
        margin: 0 auto 40px;
        height: 300px;
        position: relative;
        display: flex;
        flex-direction: row-reverse
    }

    .company_map .address,
    .company_map .company_map_item {
        width: 375px;
        height: 300px
    }

    .company_map .address {
        position: absolute;
        left: 0;
        top: 0;
        margin: 0 auto
    }

    .company_map .address .address-item {
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: 401;
        text-align: center;
        display: -webkit-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }

    .company_map .address .address-item .address-title {
        font-size: 20px;
        padding-top: 10px;
        font-weight: 600;
        line-height: 28px;
        color: var(--titleFont)
    }

    .company_map .address .address-item .address-text {
        padding-bottom: 24px;
        font-size: 14px;
        font-weight: 400;
        color: var(--textFont);
        line-height: 20px;
        padding-top: 15px;
        max-height: 135px;
        width: 80%;
        text-align: center;
        margin: 0 auto;
        overflow: hidden
    }
}

@media screen and (max-width:767px) {
    .company_map {
        width: calc(100vw - 30px);
        margin: 0 auto 40px;
        height: 310px;
        z-index: 0;
        position: relative
    }

    .company_map .address {
        display: none
    }

    .company_map .company_map_item {
        width: 100%;
        height: 100%
    }
}

@media screen and (min-width:1200px) {
    .company-top {
        width: 100%;
        margin: 40px 0 60px
    }

    .company-top .company-top-item {
        max-width: 1180px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between
    }

    .company-top .company-top-item .company_top_image {
        flex: 0 0 580px;
        max-width: 580px;
        height: 480px;
        position: relative;
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover
    }

    .company-top .company-top-item .company_top_image img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .company-top .company-top-item .company_top_image .playerButton {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .company-top .company-top-item .company_top_image .playerButton i {
        font-size: 50px;
        cursor: pointer;
        color: hsla(0, 0%, 100%, .9)
    }

    .company-top .company-top-item .company_text {
        flex: 0 0 580px;
        max-width: 580px;
        position: relative;
        display: flex;
        align-items: center
    }

    .company-top .company-top-item .company_text .company_text_list .company_text-title {
        text-transform: uppercase;
        font-size: 24px;
        font-weight: 700;
        padding-left: 40px;
        text-align: left;
        margin-bottom: 15px;
        color: var(--titleFont)
    }

    .company-top .company-top-item .company_text .company_text_list .company_text-content {
        font-size: 16px;
        padding-left: 40px;
        line-height: 22px;
        color: var(--textFont)
    }

    .company-top .company-top-item .company_text .company_text_list .company_text-content div {
        margin-bottom: 20px
    }

    .company-top .videoShadow {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1050;
        width: 100%;
        height: 100%;
        overflow: hidden;
        outline: 0;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: rgba(0, 0, 0, .5)
    }

    .company-top .videoShadow .company_video {
        width: auto;
        max-width: 80vw;
        max-height: 80vh;
        height: auto;
        background-color: var(--white);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%)
    }

    .company-top .videoShadow .company_video video {
        display: block;
        max-width: 80vw;
        max-height: 80vh
    }

    .company-top .videoShadow .company_video .company_video_close {
        position: absolute;
        right: -30px;
        top: -30px
    }

    .company-top .videoShadow .company_video .company_video_close i {
        font-size: 28px;
        font-weight: 700;
        color: var(--white);
        cursor: pointer
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .company-top {
        width: 100%;
        margin: 40px 0
    }

    .company-top .company-top-item {
        max-width: 750px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between
    }

    .company-top .company-top-item .company_top_image {
        flex: 0 0 365px;
        max-width: 365px;
        height: 300px;
        position: relative;
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover
    }

    .company-top .company-top-item .company_top_image img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .company-top .company-top-item .company_top_image .playerButton {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .company-top .company-top-item .company_top_image .playerButton i {
        font-size: 50px;
        cursor: pointer;
        color: hsla(0, 0%, 100%, .9)
    }

    .company-top .company-top-item .company_text {
        flex: 0 0 365px;
        max-width: 365px;
        position: relative;
        display: flex;
        align-items: center
    }

    .company-top .company-top-item .company_text .company_text_list .company_text-title {
        text-transform: uppercase;
        font-size: 24px;
        font-weight: 700;
        padding-left: 10px;
        text-align: left;
        margin-bottom: 15px;
        color: var(--titleFont)
    }

    .company-top .company-top-item .company_text .company_text_list .company_text-content {
        font-size: 16px;
        padding-left: 10px;
        line-height: 22px;
        color: var(--textFont)
    }

    .company-top .company-top-item .company_text .company_text_list .company_text-content div {
        margin-bottom: 20px
    }

    .company-top .videoShadow {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1050;
        width: 100%;
        height: 100%;
        overflow: hidden;
        outline: 0;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: rgba(0, 0, 0, .5)
    }

    .company-top .videoShadow .company_video {
        width: auto;
        max-width: 80vw;
        max-height: 80vh;
        height: auto;
        background-color: var(--white);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%)
    }

    .company-top .videoShadow .company_video video {
        display: block;
        max-width: 80vw;
        max-height: 80vh
    }

    .company-top .videoShadow .company_video .company_video_close {
        position: absolute;
        right: -30px;
        top: -30px
    }

    .company-top .videoShadow .company_video .company_video_close i {
        font-size: 28px;
        font-weight: 700;
        color: var(--white);
        cursor: pointer
    }
}

@media screen and (max-width:767px) {
    .company-top {
        width: 100%;
        margin-bottom: 40px
    }

    .company-top .company-top-item {
        width: calc(100vw - 30px);
        margin: 0 auto 40px
    }

    .company-top .company-top-item .company_top_image {
        width: 100vw;
        margin-left: -15px;
        margin-bottom: 20px;
        position: relative;
        background-color: transparent;
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover
    }

    .company-top .company-top-item .company_top_image img {
        width: 100%
    }

    .company-top .company-top-item .company_top_image .playerButton {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .company-top .company-top-item .company_top_image .playerButton i {
        font-size: 50px;
        cursor: pointer;
        color: hsla(0, 0%, 100%, .9)
    }

    .company-top .company_text {
        padding: 0;
        margin: 15px
    }

    .company-top .company_text .company_text-title {
        text-transform: uppercase;
        font-size: 24px;
        font-weight: 700;
        margin: 0 0 20px;
        color: var(--titleFont)
    }

    .company-top .company_text .company_text-content {
        font-size: 14px;
        line-height: 22px;
        color: var(--textFont);
        margin-bottom: 30px
    }

    .company-top .videoShadow {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1050;
        width: 100%;
        height: 100%;
        overflow: hidden;
        outline: 0;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: rgba(0, 0, 0, .5)
    }

    .company-top .videoShadow .company_video {
        width: auto;
        max-width: 100vw;
        max-height: 100vh;
        height: auto;
        background-color: var(--white);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%)
    }

    .company-top .videoShadow .company_video video {
        display: block;
        max-width: 100vw;
        max-height: 100vh
    }

    .company-top .videoShadow .company_video .company_video_close {
        position: absolute;
        right: 10px;
        top: -40px
    }

    .company-top .videoShadow .company_video .company_video_close i {
        font-size: 28px;
        font-weight: 700;
        color: var(--white);
        cursor: pointer
    }
}

@media screen and (min-width:1200px) {
    .Company-trademark {
        max-width: 1180px;
        margin: 0 auto 60px;
        text-align: left;
        overflow: hidden;
        position: relative
    }

    .Company-trademark .Company-trademark-title {
        font-size: 24px;
        padding-bottom: 30px;
        margin: 0;
        color: var(--titleFont)
    }

    .Company-trademark .Company-trademark-item {
        overflow-x: scroll;
        overflow-y: hidden;
        display: flex;
        min-width: 1180px;
        max-width: 20000px;
        overflow: hidden
    }

    .Company-trademark .Company-trademark-item .max768 {
        display: none
    }

    .Company-trademark .Company-trademark-item .row {
        padding-right: 20px;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .Company-trademark .Company-trademark-item .row .row-item-pic {
        width: 380px;
        max-height: 400px;
        height: auto
    }

    .Company-trademark .Company-trademark-item .row .row-item-pic .row-item-pic-img {
        display: flex;
        align-items: center;
        justify-content: center
    }

    .Company-trademark .Company-trademark-item .row .row-item-pic .row-item-pic-img img {
        max-width: 380px;
        max-height: 400px;
        display: block;
        cursor: pointer
    }

    .Company-trademark .Company-trademark-item .row .row-item-pic .row-item-title {
        cursor: pointer;
        color: var(--white);
        height: 48px;
        width: 100%;
        background-color: rgba(0, 0, 0, .322);
        padding: 0;
        margin: -48px 0 0;
        position: relative;
        z-index: 1;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        line-height: 48px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .Company-trademark .trademark_button {
        cursor: pointer;
        z-index: 2;
        width: 40px;
        height: 40px;
        border-radius: 20px;
        background-color: rgba(0, 0, 0, .5);
        line-height: 40px;
        text-align: center;
        font-size: 32px;
        font-weight: 900;
        color: var(--white);
        opacity: 0
    }

    .Company-trademark .trademark_button i {
        line-height: 40px
    }

    .Company-trademark .prev {
        position: absolute;
        left: 10px;
        top: calc(50% + 14px)
    }

    .Company-trademark .next {
        position: absolute;
        right: 25px;
        top: calc(50% + 14px)
    }

    .Company-trademark .fix_trademark {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1050;
        width: 100%;
        height: 100%;
        overflow: hidden;
        outline: 0;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: rgba(0, 0, 0, .5)
    }

    .Company-trademark .fix_trademark .fix_trademark_pic {
        width: auto;
        max-width: 80vw;
        max-height: 80vh;
        height: auto;
        background-color: var(--white);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%)
    }

    .Company-trademark .fix_trademark .fix_trademark_pic img {
        display: block;
        max-width: 80vw;
        max-height: 80vh
    }

    .Company-trademark .fix_trademark .fix_trademark_pic .fix_trademark_close {
        position: absolute;
        right: -30px;
        top: -30px
    }

    .Company-trademark .fix_trademark .fix_trademark_pic .fix_trademark_close i {
        font-size: 28px;
        font-weight: 700;
        color: var(--white);
        cursor: pointer
    }

    .Company-trademark:hover .trademark_button {
        opacity: 1
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .Company-trademark {
        max-width: 750px;
        margin: 0 auto 40px;
        text-align: left;
        overflow: hidden;
        position: relative
    }

    .Company-trademark .Company-trademark-title {
        font-size: 24px;
        padding-bottom: 10px;
        margin: 0;
        color: var(--titleFont)
    }

    .Company-trademark .Company-trademark-item {
        overflow-x: scroll;
        overflow-y: hidden;
        display: flex;
        width: auto;
        overflow: hidden
    }

    .Company-trademark .Company-trademark-item .max768 {
        display: none
    }

    .Company-trademark .Company-trademark-item .row {
        padding-right: 15px;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .Company-trademark .Company-trademark-item .row .row-item-pic {
        max-height: 228px;
        height: auto;
        width: 240px
    }

    .Company-trademark .Company-trademark-item .row .row-item-pic .row-item-pic-img {
        display: flex;
        align-items: center;
        justify-content: center
    }

    .Company-trademark .Company-trademark-item .row .row-item-pic .row-item-pic-img img {
        max-width: 240px;
        max-height: 228px;
        display: block;
        cursor: pointer
    }

    .Company-trademark .Company-trademark-item .row .row-item-pic .row-item-title {
        cursor: pointer;
        color: var(--white);
        height: 30px;
        width: 100%;
        background-color: rgba(0, 0, 0, .322);
        padding: 0;
        margin: -30px 0 0;
        position: relative;
        z-index: 1;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        line-height: 30px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .Company-trademark .trademark_button {
        cursor: pointer;
        opacity: 0;
        z-index: 2;
        width: 40px;
        height: 40px;
        border-radius: 20px;
        background-color: rgba(0, 0, 0, .5);
        line-height: 40px;
        text-align: center;
        font-size: 32px;
        font-weight: 900;
        color: var(--white)
    }

    .Company-trademark .trademark_button i {
        line-height: 40px
    }

    .Company-trademark .prev {
        position: absolute;
        left: 10px;
        top: calc(50% + 8px)
    }

    .Company-trademark .next {
        position: absolute;
        right: 10px;
        top: calc(50% + 8px)
    }

    .Company-trademark .fix_trademark {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1050;
        width: 100%;
        height: 100%;
        overflow: hidden;
        outline: 0;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: rgba(0, 0, 0, .5)
    }

    .Company-trademark .fix_trademark .fix_trademark_pic {
        width: auto;
        max-width: 80vw;
        max-height: 80vh;
        height: auto;
        background-color: var(--white);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%)
    }

    .Company-trademark .fix_trademark .fix_trademark_pic img {
        display: block;
        max-width: 80vw;
        max-height: 80vh
    }

    .Company-trademark .fix_trademark .fix_trademark_pic .fix_trademark_close {
        position: absolute;
        right: -30px;
        top: -30px
    }

    .Company-trademark .fix_trademark .fix_trademark_pic .fix_trademark_close i {
        font-size: 28px;
        font-weight: 700;
        cursor: pointer;
        color: var(--white)
    }

    .Company-trademark:hover .trademark_button {
        opacity: 1
    }
}

@media screen and (max-width:767px) {
    .Company-trademark {
        width: calc(100vw - 30px);
        margin: 0 auto 40px;
        text-align: center
    }

    .Company-trademark .Company-trademark-title {
        font-size: 24px;
        padding-bottom: 10px;
        margin: 0;
        text-align: left;
        color: var(--titleFont)
    }

    .Company-trademark .Company-trademark-item {
        overflow-x: scroll;
        overflow-y: hidden
    }

    .Company-trademark .Company-trademark-item .Company-trademark-item-list {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 40px
    }

    .Company-trademark .Company-trademark-item .Company-trademark-item-list .row {
        margin-right: 10px;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 220px;
        max-height: 280px;
        position: relative
    }

    .Company-trademark .Company-trademark-item .Company-trademark-item-list .row img {
        max-width: 220px;
        max-height: 280px;
        width: auto;
        height: auto
    }

    .Company-trademark .Company-trademark-item .Company-trademark-item-list .row .row-item-title {
        font-size: 16px;
        position: absolute;
        bottom: -30px;
        color: var(--textFont)
    }

    .Company-trademark .Company-trademark-item .min769,
    .Company-trademark .trademark_button {
        display: none
    }

    .Company-trademark .fix_trademark {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1050;
        width: 100%;
        height: 100%;
        overflow: hidden;
        outline: 0;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: rgba(0, 0, 0, .5)
    }

    .Company-trademark .fix_trademark .fix_trademark_pic {
        width: auto;
        max-width: 80vw;
        max-height: 80vh;
        height: auto;
        background-color: var(--white);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%)
    }

    .Company-trademark .fix_trademark .fix_trademark_pic img {
        display: block;
        max-width: 80vw;
        max-height: 80vh
    }

    .Company-trademark .fix_trademark .fix_trademark_pic .fix_trademark_close {
        position: absolute;
        right: -30px;
        top: -30px
    }

    .Company-trademark .fix_trademark .fix_trademark_pic .fix_trademark_close i {
        font-size: 28px;
        font-weight: 700;
        color: var(--white);
        cursor: pointer
    }
}

@media screen and (min-width:1200px) {
    .contacts_left {
        flex: 0 0 280px
    }

    .contacts_left .contacts_information {
        margin-top: 45px;
        padding: 30px 20px;
        color: var(--titleFont);
        min-height: 270px
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .contacts_left {
        flex: 0 0 240px
    }

    .contacts_left .contacts_information {
        margin-top: 40px;
        padding: 20px 10px;
        color: var(--titleFont);
        min-height: 260px
    }
}

@media screen and (max-width:767px) {
    .contacts_left {
        flex: 0 0 calc(100vw - 30px);
        width: calc(100vw - 30px);
        margin: 0 auto
    }

    .contacts_left .contacts_information {
        color: var(--titleFont);
        min-height: 260px
    }
}

@media screen and (min-width:1200px) {
    .contacts_us_form_right {
        flex: 0 0 860px
    }

    .contacts_us_form_right .contact-form {
        width: 860px;
        margin: 10px auto 40px;
        opacity: 1;
        position: relative;
        border-radius: 10px
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .contacts_us_form_right {
        flex: 0 0 490px
    }

    .contacts_us_form_right .contact-form {
        width: 490px;
        margin: 10px auto 40px;
        opacity: 1;
        position: relative;
        border-radius: 10px
    }
}

@media screen and (max-width:767px) {
    .contacts_us_form_right {
        flex: 0 0 100%
    }

    .contacts_us_form_right .contact-form {
        width: calc(100vw - 30px);
        margin: 10px auto 40px;
        opacity: 1;
        position: relative
    }

    .contacts_us_form_right .contact-form .el-input__inner {
        border: 1px solid var(--themeLine)
    }
}

@media screen and (min-width:1200px) {
    .Contactsus {
        width: 100%;
        margin: 0 auto
    }

    .Contactsus .bg {
        width: 100%;
        height: 240px;
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover
    }

    .Contactsus .bg .contact-list {
        max-width: 1180px;
        margin: 0 auto
    }

    .Contactsus .bg .contact-list .contact_title {
        text-transform: uppercase;
        font-size: 32px;
        height: 240px;
        line-height: 240px;
        margin: 0 auto;
        text-align: center
    }

    .Contactsus .contactsusList {
        width: 1180px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .Contactsus {
        width: 100%;
        margin: 0 auto
    }

    .Contactsus .bg {
        width: 100%;
        height: 200px;
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover
    }

    .Contactsus .bg .contact-list {
        max-width: 750px;
        margin: 0 auto
    }

    .Contactsus .bg .contact-list .contact_title {
        text-transform: uppercase;
        font-size: 24px;
        height: 200px;
        line-height: 200px;
        margin: 0 auto;
        text-align: center
    }

    .Contactsus .contactsusList {
        width: 750px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between
    }
}

@media screen and (max-width:767px) {
    .Contactsus {
        width: 100%
    }

    .Contactsus .bg {
        width: 100%;
        height: 160px;
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover
    }

    .Contactsus .bg .contact-list {
        max-width: 100vw;
        margin: 0 auto
    }

    .Contactsus .bg .contact-list .contact_title {
        text-transform: uppercase;
        font-size: 24px;
        margin: 0 auto;
        text-align: center;
        line-height: 160px
    }

    .Contactsus .contactsusList {
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap
    }
}

@media screen and (min-width:1200px) {
    .essenceBlog {
        max-width: 1180px;
        margin: 60px auto
    }

    .essenceBlog .essenceBlog-title {
        text-transform: uppercase;
        font-size: 24px;
        line-height: 28px;
        margin: 0 0 12px;
        text-align: center;
        color: var(--titleFont)
    }

    .essenceBlog .essenceBlog-viewall {
        text-align: center;
        margin-bottom: 30px;
        font-size: 14px;
        line-height: 16px
    }

    .essenceBlog .essenceBlog-viewall a:hover {
        cursor: pointer;
        color: var(--button)
    }

    .essenceBlog .essenceBlog-item {
        display: flex;
        flex-flow: wrap;
        justify-content: flex-start
    }

    .essenceBlog .essenceBlog-item .essenceBlog-row {
        width: 380px;
        margin: 0 6.5px;
        position: relative
    }

    .essenceBlog .essenceBlog-item .essenceBlog-row .essenceBlog-img {
        width: 380px;
        height: 280px;
        margin-bottom: 30px
    }

    .essenceBlog .essenceBlog-item .essenceBlog-row .essenceBlog-img img {
        width: 380px;
        height: 280px;
        object-fit: cover
    }

    .essenceBlog .essenceBlog-item .essenceBlog-row .essenceBlog-subject {
        padding: 0 10px;
        font-weight: 500;
        line-height: 24px;
        margin-bottom: 20px;
        font-size: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        color: var(--titleFont)
    }

    .essenceBlog .essenceBlog-item .essenceBlog-row .essenceBlog-subject:hover {
        color: var(--button)
    }

    .essenceBlog .essenceBlog-item .essenceBlog-row .essenceBlog-content {
        padding: 0 10px;
        height: 60px;
        font-weight: 400;
        line-height: 20px;
        word-break: normal !important;
        display: -webkit-box !important;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        margin-bottom: 10px;
        font-size: 14px;
        color: var(--textFont)
    }

    .essenceBlog .essenceBlog-item .essenceBlog-row .essenceBlog-time {
        height: 24px;
        line-height: 24px;
        font-weight: 400;
        font-size: 14px;
        color: var(--textFont);
        position: absolute;
        top: 246px;
        left: 10px;
        padding: 0 5px;
        color: var(--white);
        border-radius: 3px;
        background: var(--button)
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .essenceBlog {
        max-width: 750px;
        margin: 40px auto
    }

    .essenceBlog .essenceBlog-title {
        text-transform: uppercase;
        font-size: 24px;
        line-height: 28px;
        margin: 0 0 12px;
        text-align: center;
        color: var(--titleFont)
    }

    .essenceBlog .essenceBlog-viewall {
        text-align: center;
        margin-bottom: 24px;
        font-size: 14px;
        line-height: 16px
    }

    .essenceBlog .essenceBlog-viewall a:hover {
        cursor: pointer;
        color: var(--button)
    }

    .essenceBlog .essenceBlog-item {
        display: flex;
        flex-flow: wrap;
        justify-content: flex-start
    }

    .essenceBlog .essenceBlog-item .essenceBlog-row {
        width: 240px;
        margin: 0 5px;
        position: relative
    }

    .essenceBlog .essenceBlog-item .essenceBlog-row .essenceBlog-img {
        width: 240px;
        height: 177px;
        margin-bottom: 20px
    }

    .essenceBlog .essenceBlog-item .essenceBlog-row .essenceBlog-img img {
        width: 240px;
        height: 177px;
        object-fit: cover
    }

    .essenceBlog .essenceBlog-item .essenceBlog-row .essenceBlog-subject {
        padding: 0 10px;
        font-weight: 500;
        line-height: 24px;
        margin-bottom: 10px;
        font-size: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        color: var(--titleFont)
    }

    .essenceBlog .essenceBlog-item .essenceBlog-row .essenceBlog-subject:hover {
        color: var(--button)
    }

    .essenceBlog .essenceBlog-item .essenceBlog-row .essenceBlog-content {
        padding: 0 10px;
        height: 60px;
        font-weight: 400;
        line-height: 20px;
        word-break: normal !important;
        display: -webkit-box !important;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        margin-bottom: 10px;
        font-size: 14px;
        color: var(--textFont)
    }

    .essenceBlog .essenceBlog-item .essenceBlog-row .essenceBlog-time {
        height: 24px;
        line-height: 24px;
        font-weight: 400;
        font-size: 14px;
        color: var(--textFont);
        position: absolute;
        top: 146px;
        left: 10px;
        padding: 0 5px;
        color: var(--white);
        border-radius: 3px;
        background: var(--button)
    }
}

@media screen and (max-width:767px) {
    .essenceBlog {
        max-width: 540px;
        margin: 40px auto;
        width: calc(100vw - 30px)
    }

    .essenceBlog .essenceBlog-title {
        text-transform: uppercase;
        font-size: 24px;
        line-height: 24px;
        margin: 0 0 20px;
        color: var(--titleFont);
        text-align: center
    }

    .essenceBlog .essenceBlog-viewall {
        display: none
    }

    .essenceBlog .essenceBlog-item {
        display: flex;
        flex-flow: wrap
    }

    .essenceBlog .essenceBlog-item .essenceBlog-row:last-child {
        margin: 0 auto
    }

    .essenceBlog .essenceBlog-item .essenceBlog-row {
        width: calc(100vw - 30px);
        margin: 0 auto 20px
    }

    .essenceBlog .essenceBlog-item .essenceBlog-row .essenceBlog-img {
        width: calc(100vw - 30px);
        height: calc(73.7vw - 22.1px);
        margin-bottom: 20px
    }

    .essenceBlog .essenceBlog-item .essenceBlog-row .essenceBlog-img img {
        width: calc(100vw - 30px);
        height: calc(73.7vw - 22.1px);
        object-fit: cover
    }

    .essenceBlog .essenceBlog-item .essenceBlog-row .essenceBlog-list {
        position: relative
    }

    .essenceBlog .essenceBlog-item .essenceBlog-row .essenceBlog-list .essenceBlog-subject {
        font-weight: 500;
        line-height: 24px;
        margin-bottom: 20px;
        font-size: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        color: var(--titleFont)
    }

    .essenceBlog .essenceBlog-item .essenceBlog-row .essenceBlog-list .essenceBlog-content {
        font-weight: 400;
        line-height: 20px;
        word-break: normal !important;
        display: -webkit-box !important;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        font-size: 14px;
        color: var(--textFont)
    }

    .essenceBlog .essenceBlog-item .essenceBlog-row .essenceBlog-list .essenceBlog-time {
        height: 24px;
        line-height: 24px;
        font-weight: 400;
        font-size: 14px;
        color: var(--textFont);
        position: absolute;
        top: -52px;
        left: 10px;
        padding: 0 5px;
        color: var(--white);
        border-radius: 3px;
        background: var(--button)
    }
}

@media screen and (min-width:1200px) {
    .featuredProduct {
        max-width: 1180px;
        margin: 0 auto 60px;
        overflow: hidden;
        position: relative
    }

    .featuredProduct .featuredProduct-title {
        text-transform: uppercase;
        font-size: 24px;
        margin: 0 0 12px;
        height: 28px;
        color: var(--titleFont);
        line-height: 28px;
        text-align: center
    }

    .featuredProduct .featuredProduct-viewall {
        font-size: 16px;
        line-height: 24px;
        margin: 0 0 24px;
        text-align: center
    }

    .featuredProduct .featuredProduct-viewall a {
        font-size: 14px;
        color: var(--textFont)
    }

    .featuredProduct .featuredProduct-viewall a:hover {
        cursor: pointer;
        color: var(--button)
    }

    .featuredProduct .featuredProduct-item {
        display: flex;
        overflow: hidden;
        transition: all .3s ease-out .1s
    }

    .featuredProduct .featuredProduct-item .featured4 {
        flex: 0 0 295px;
        max-width: 295px;
        overflow: hidden;
        display: flex;
        justify-content: center
    }

    .featuredProduct .featuredProduct-item .featured-item {
        width: 280px
    }

    .featuredProduct .featuredProduct-item .featured-item .featured-item-pic {
        font-size: 16px;
        position: relative;
        height: 280px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 18px;
        overflow: hidden
    }

    .featuredProduct .featuredProduct-item .featured-item .featured-item-pic img {
        max-width: 280px;
        max-height: 280px;
        transition: all .5s
    }

    .featuredProduct .featuredProduct-item .featured-item .featured-item-pic img:hover {
        transform: scale(1.05)
    }

    .featuredProduct .featuredProduct_button {
        display: flex;
        height: 32px;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        width: 95%;
        left: 2.5%;
        top: 50%;
        opacity: 0;
        transition-property: opacity, width, left;
        transition-duration: .5s
    }

    .featuredProduct .featuredProduct_button .featuredProduct_button_item {
        width: 44px;
        height: 44px;
        border-radius: 22px;
        background-color: var(--button);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer
    }

    .featuredProduct .featuredProduct_button .featuredProduct_button_item i {
        color: var(--white)
    }

    .featuredProduct .featuredProduct_button .featuredProduct_button_item:hover {
        background-color: var(--buttonHover)
    }

    .featuredProduct:hover .featuredProduct_button {
        opacity: 1;
        width: 100%;
        left: 0
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .featuredProduct {
        max-width: 750px;
        margin: 0 auto 40px;
        overflow: hidden;
        position: relative
    }

    .featuredProduct .featuredProduct-title {
        text-transform: uppercase;
        font-size: 24px;
        margin: 0 0 12px;
        height: 28px;
        color: var(--titleFont);
        line-height: 28px;
        text-align: center
    }

    .featuredProduct .featuredProduct-viewall {
        font-size: 16px;
        line-height: 24px;
        margin: 0 0 24px;
        text-align: center
    }

    .featuredProduct .featuredProduct-viewall a {
        font-size: 14px;
        color: var(--textFont)
    }

    .featuredProduct .featuredProduct-viewall a:hover {
        cursor: pointer;
        color: var(--button)
    }

    .featuredProduct .featuredProduct-item {
        display: flex;
        overflow: hidden;
        transition: all .3s ease-out .1s
    }

    .featuredProduct .featuredProduct-item .featured4 {
        flex: 0 0 187.5px;
        max-width: 187.5px;
        overflow: hidden;
        display: flex;
        justify-content: center
    }

    .featuredProduct .featuredProduct-item .featured4 .featured-item {
        width: 172.5px
    }

    .featuredProduct .featuredProduct-item .featured4 .featured-item .featured-item-pic {
        font-size: 16px;
        position: relative;
        height: 172.5px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 18px;
        overflow: hidden
    }

    .featuredProduct .featuredProduct-item .featured4 .featured-item .featured-item-pic img {
        max-width: 172.5px;
        max-height: 172.5px;
        transition: all .5s
    }

    .featuredProduct .featuredProduct-item .featured4 .featured-item .featured-item-pic img:hover {
        transform: scale(1.05)
    }

    .featuredProduct .featuredProduct_button {
        display: flex;
        height: 32px;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        width: 95%;
        left: 2.5%;
        top: 45%;
        opacity: 0;
        transition-property: opacity, width, left;
        transition-duration: .5s
    }

    .featuredProduct .featuredProduct_button .featuredProduct_button_item {
        width: 44px;
        height: 44px;
        border-radius: 22px;
        background-color: var(--button);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer
    }

    .featuredProduct .featuredProduct_button .featuredProduct_button_item i {
        color: var(--white)
    }

    .featuredProduct .featuredProduct_button .featuredProduct_button_item:hover {
        background-color: var(--buttonHover)
    }

    .featuredProduct:hover .featuredProduct_button {
        opacity: 1;
        width: 100%;
        left: 0
    }
}

@media screen and (max-width:767px) {
    .featuredProduct {
        margin: 0 auto 40px;
        width: calc(100vw - 30px)
    }

    .featuredProduct .featuredProduct-title {
        color: var(--titleFont);
        text-transform: uppercase;
        font-size: 24px;
        line-height: 24px;
        margin: 0 0 20px;
        text-align: center
    }

    .featuredProduct .featuredProduct-viewall {
        display: none
    }

    .featuredProduct .featuredProduct-item {
        display: flex;
        flex-flow: wrap;
        justify-content: space-between
    }

    .featuredProduct .featuredProduct-item .featured4 {
        flex: 0 0 50%;
        max-width: calc(50% - 7.5px);
        overflow: hidden;
        padding-bottom: 10px
    }

    .featuredProduct .featuredProduct-item .featured4 .featured-item {
        width: calc(50vw - 22.5px)
    }

    .featuredProduct .featuredProduct-item .featured4 .featured-item .featured-item-pic {
        font-size: 16px;
        position: relative;
        width: calc(50vw - 22.5px);
        height: calc(50vw - 22.5px);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px
    }

    .featuredProduct .featuredProduct-item .featured4 .featured-item .featured-item-pic img {
        max-width: calc(50vw - 22.5px);
        max-height: calc(50vw - 22.5px)
    }

    .featuredProduct .featuredProduct-item .featured4 .featured-item .price {
        color: var(--textFont);
        margin: 0;
        text-align: left
    }

    .featuredProduct .featuredProduct-item .featured4 .featured-item .featured-title {
        color: var(--button);
        line-height: 20px;
        height: 40px;
        font-size: 16px;
        font-weight: 400;
        margin: 0 0 10px;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2
    }

    .featuredProduct .featuredProduct_button {
        display: none
    }
}

@media screen and (min-width:1200px) {
    .left-prouduct {
        max-width: 256px;
        text-align: left;
        position: relative;
        margin-bottom: 40px
    }

    .left-prouduct .left-prouduct-title {
        padding-bottom: 16px;
        font-size: 20px;
        font-weight: 500;
        color: var(--titleFont);
        line-height: 24px;
        height: 29px;
        border-bottom: 1px solid var(--themeLine)
    }

    .left-prouduct .left-prouduct-row {
        height: 84px;
        overflow: hidden
    }

    .left-prouduct .left-prouduct-row .left-prouduct-row-item {
        height: 64px;
        margin-top: 20px;
        display: flex;
        flex-flow: wrap;
        justify-content: space-between;
        cursor: pointer
    }

    .left-prouduct .left-prouduct-row .left-prouduct-row-item .left-prouduct-row-item-pic {
        flex: 0 0 64px;
        width: 64px;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .left-prouduct .left-prouduct-row .left-prouduct-row-item .left-prouduct-row-item-pic img {
        max-width: 64px;
        max-height: 64px;
        height: auto;
        width: auto
    }

    .left-prouduct .left-prouduct-row .left-prouduct-row-item .left-prouduct-row-text {
        flex: 0 0 174px;
        width: 174px
    }

    .left-prouduct .left-prouduct-row .left-prouduct-row-item .left-prouduct-row-text .title {
        height: 20px;
        font-size: 14px;
        color: var(--titleFont);
        line-height: 20px;
        margin: 7px 0 10px;
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical
    }

    .left-prouduct .left-prouduct-row .left-prouduct-row-item .left-prouduct-row-text .title:hover {
        color: var(--button)
    }

    .left-prouduct .left-prouduct-row .left-prouduct-row-item .left-prouduct-row-text .price {
        height: 19px;
        font-size: 16px;
        font-weight: 500;
        color: var(--titleFont);
        line-height: 19px;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .left-prouduct {
        max-width: 170px;
        text-align: left;
        position: relative;
        margin-bottom: 40px
    }

    .left-prouduct .left-prouduct-title {
        padding-bottom: 10px;
        font-size: 20px;
        font-weight: 500;
        color: var(--titleFont);
        line-height: 24px;
        height: 24px;
        border-bottom: 1px solid var(--themeLine)
    }

    .left-prouduct .left-prouduct-row {
        height: 80px;
        overflow: hidden
    }

    .left-prouduct .left-prouduct-row .left-prouduct-row-item {
        height: 60px;
        margin-top: 20px;
        display: flex;
        flex-flow: wrap;
        justify-content: space-between;
        cursor: pointer
    }

    .left-prouduct .left-prouduct-row .left-prouduct-row-item .left-prouduct-row-item-pic {
        flex: 0 0 60px;
        width: 60px;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .left-prouduct .left-prouduct-row .left-prouduct-row-item .left-prouduct-row-item-pic img {
        max-width: 60px;
        max-height: 60px;
        height: auto;
        width: auto
    }

    .left-prouduct .left-prouduct-row .left-prouduct-row-item .left-prouduct-row-text {
        flex: 0 0 100px;
        width: 100px
    }

    .left-prouduct .left-prouduct-row .left-prouduct-row-item .left-prouduct-row-text .title {
        height: 20px;
        font-size: 14px;
        color: var(--titleFont);
        line-height: 20px;
        margin: 7px 0 10px;
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical
    }

    .left-prouduct .left-prouduct-row .left-prouduct-row-item .left-prouduct-row-text .title:hover {
        color: var(--button)
    }

    .left-prouduct .left-prouduct-row .left-prouduct-row-item .left-prouduct-row-text .price {
        height: 19px;
        font-size: 14px;
        font-weight: 500;
        color: var(--titleFont);
        line-height: 19px;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }
}

@media screen and (max-width:767px) {
    .left-prouduct {
        display: none
    }
}

@media screen and (min-width:1200px) {
    .FilterProduct {
        flex: 0 0 280px;
        width: 280px
    }

    .FilterProduct .FilterProductList {
        width: 280px;
        margin-bottom: 40px
    }

    .FilterProduct .FilterProduct-title {
        padding-bottom: 20px;
        font-size: 24px;
        font-weight: 700;
        color: var(--titleFont);
        line-height: 29px;
        height: 29px
    }

    .FilterProduct .FilterProduct-title2 {
        text-transform: uppercase;
        font-size: 16px;
        color: var(--titleFont);
        height: 41px;
        line-height: 41px;
        margin-right: 20px
    }

    .FilterProduct .FilterProduct-title2 .font-orange,
    .FilterProduct .FilterProduct-title2 a:hover {
        color: var(--button)
    }

    .FilterProduct .FilterProduct-title2 .font-black {
        color: var(--titleFont)
    }

    .FilterProduct .xs-filterList {
        color: var(--titleFont);
        list-style: none;
        padding-left: 20px;
        margin: 0;
        padding-inline-start: 0;
        padding-right: 20px
    }

    .FilterProduct .filterList-unit-left {
        list-style: none;
        padding: 16px 0;
        font-size: 18px
    }

    .FilterProduct .filterList-unit-left a span:hover {
        color: var(--button)
    }

    .FilterProduct .filterList-unit-left a .font-orange {
        color: var(--button);
        cursor: pointer
    }

    .FilterProduct .filterList-unit-left a .font-black {
        color: var(--titleFont);
        cursor: pointer
    }

    .FilterProduct .filterList-unit-left i {
        float: right;
        font-size: 18px;
        line-height: 24px;
        color: var(--titleFont);
        cursor: pointer
    }

    .FilterProduct #side-second-filterList {
        color: var(--textFont);
        list-style: none;
        padding-inline-start: 0;
        padding-top: 10px;
        padding-left: 15px;
        font-size: 14px;
        position: relative
    }

    .FilterProduct #side-second-filterList li {
        padding: 10px 0
    }

    .FilterProduct a {
        text-decoration: none;
        color: var(--textFont)
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .FilterProduct {
        flex: 0 0 180px;
        width: 180px
    }

    .FilterProduct .FilterProductList {
        width: 180px;
        margin-bottom: 40px
    }

    .FilterProduct .FilterProduct-title {
        padding-bottom: 10px;
        font-size: 20px;
        font-weight: 500;
        color: var(--titleFont);
        line-height: 29px;
        height: 29px
    }

    .FilterProduct .FilterProduct-title2 {
        text-transform: uppercase;
        font-size: 16px;
        color: var(--black);
        line-height: 48px;
        margin-right: 10px
    }

    .FilterProduct .FilterProduct-title2 .font-orange,
    .FilterProduct .FilterProduct-title2 a:hover {
        color: var(--button)
    }

    .FilterProduct .FilterProduct-title2 .font-black {
        color: var(--titleFont)
    }

    .FilterProduct .xs-filterList {
        color: var(--titleFont);
        list-style: none;
        padding-left: 20px;
        margin: 0;
        padding-inline-start: 0;
        padding-right: 10px
    }

    .FilterProduct .filterList-unit-left {
        list-style: none;
        padding: 12px 0;
        font-size: 16px
    }

    .FilterProduct .filterList-unit-left a span:hover {
        color: var(--button)
    }

    .FilterProduct .filterList-unit-left a .font-orange {
        color: var(--button);
        cursor: pointer
    }

    .FilterProduct .filterList-unit-left a .font-black {
        color: var(--titleFont);
        cursor: pointer
    }

    .FilterProduct .filterList-unit-left i {
        float: right;
        font-size: 18px;
        line-height: 24px;
        color: var(--titleFont);
        cursor: pointer
    }

    .FilterProduct #side-second-filterList {
        list-style: none;
        padding-inline-start: 0;
        padding-top: 10px;
        padding-left: 15px;
        font-size: 14px;
        position: relative
    }

    .FilterProduct #side-second-filterList li {
        padding: 6px 0
    }

    .FilterProduct a {
        text-decoration: none;
        color: var(--textFont)
    }
}

@media screen and (max-width:767px) {
    .FilterProduct {
        display: none
    }
}

@media screen and (min-width:1200px) {
    .HotProduct {
        width: 100%;
        background-color: var(--hotBGC)
    }

    .HotProduct .HotProductBGC {
        max-width: 1180px;
        margin: 0 auto 60px;
        text-align: center;
        overflow: hidden
    }

    .HotProduct .HotProductBGC .HotProduct-title {
        text-align: center;
        text-transform: uppercase;
        font-size: 24px;
        padding-top: 40px;
        padding-bottom: 30px;
        margin: 0;
        color: var(--titleFont)
    }

    .HotProduct .HotProductBGC .HotProduct-item {
        min-width: 1180px;
        height: 350px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-between;
        transition: all .3s ease-out .1s;
        margin-bottom: 30px
    }

    .HotProduct .HotProductBGC .HotProduct-item .hot4 {
        flex: 0 0 160px;
        width: 388px;
        height: 160px;
        overflow: hidden;
        display: flex;
        margin-right: 8px
    }

    .HotProduct .HotProductBGC .HotProduct-item .hot-item {
        width: 100%;
        display: flex
    }

    .HotProduct .HotProductBGC .HotProduct-item .hot-item .hot-item-pic {
        flex: 0 0 160px;
        font-size: 16px;
        position: relative;
        height: 160px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden
    }

    .HotProduct .HotProductBGC .HotProduct-item .hot-item .hot-item-pic img {
        max-width: 160px;
        max-height: 160px
    }

    .HotProduct .HotProductBGC .HotProduct-item .hot-item .productText {
        flex: 0 0 216px;
        padding-left: 12px;
        padding-top: 20px;
        position: relative
    }

    .HotProduct .HotProductBGC .HotProduct-item .hot-item .productText .productText-item {
        position: absolute;
        top: 50%;
        transform: translateY(-50%)
    }

    .HotProduct .HotProductBGC .HotProduct-item .hot-item .productText .productText-item .hot-icon {
        width: 52px;
        height: 24px;
        background-color: var(--hot);
        text-align: center;
        line-height: 24px;
        font-size: 14px;
        font-weight: 600;
        color: var(--white);
        margin-bottom: 10px
    }

    .HotProduct .HotProductBGC .HotProduct-item .hot-item .productText .productText-item .productTitle {
        text-align: left;
        margin-bottom: 20px;
        -webkit-line-clamp: 2;
        color: var(--titleFont)
    }

    .HotProduct .HotProductBGC .HotProduct-item .hot-item .productText .productText-item .productTitle:hover {
        color: var(--button)
    }

    .HotProduct .HotProductBGC .HotProduct-item .hot-item .productText .productText-item .productPrice {
        text-align: left
    }

    .HotProduct .HotProductBGC .changePage {
        display: flex;
        justify-content: center;
        padding-bottom: 40px
    }

    .HotProduct .HotProductBGC .changePage .changePageItem {
        cursor: pointer
    }

    .HotProduct .HotProductBGC .changePage .changePageItem i {
        color: #ccc
    }

    .HotProduct .HotProductBGC .changePage .changePageItem .active {
        color: #777
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .HotProduct {
        width: 100%;
        background-color: var(--hotBGC)
    }

    .HotProduct .HotProductBGC {
        max-width: 750px;
        margin: 0 auto 40px;
        text-align: center;
        overflow: hidden
    }

    .HotProduct .HotProductBGC .HotProduct-title {
        text-align: center;
        text-transform: uppercase;
        font-size: 24px;
        padding-top: 30px;
        padding-bottom: 20px;
        margin: 0;
        color: var(--titleFont)
    }

    .HotProduct .HotProductBGC .HotProduct-item {
        min-width: 750px;
        height: 350px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-between;
        transition: all .3s ease-out .1s;
        margin-bottom: 30px
    }

    .HotProduct .HotProductBGC .HotProduct-item .hot4 {
        flex: 0 0 160px;
        width: 371px;
        height: 160px;
        overflow: hidden;
        display: flex;
        margin-right: 8px
    }

    .HotProduct .HotProductBGC .HotProduct-item .hot-item {
        width: 100%;
        display: flex
    }

    .HotProduct .HotProductBGC .HotProduct-item .hot-item .hot-item-pic {
        flex: 0 0 160px;
        font-size: 16px;
        position: relative;
        height: 160px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden
    }

    .HotProduct .HotProductBGC .HotProduct-item .hot-item .hot-item-pic img {
        max-width: 160px;
        max-height: 160px
    }

    .HotProduct .HotProductBGC .HotProduct-item .hot-item .productText {
        flex: 0 0 199px;
        padding-left: 12px;
        padding-top: 20px;
        position: relative
    }

    .HotProduct .HotProductBGC .HotProduct-item .hot-item .productText .productText-item {
        position: absolute;
        top: 50%;
        transform: translateY(-50%)
    }

    .HotProduct .HotProductBGC .HotProduct-item .hot-item .productText .productText-item .hot-icon {
        width: 52px;
        height: 24px;
        background-color: var(--hot);
        text-align: center;
        line-height: 24px;
        font-size: 14px;
        font-weight: 600;
        color: var(--white);
        margin-bottom: 10px
    }

    .HotProduct .HotProductBGC .HotProduct-item .hot-item .productText .productText-item .productTitle {
        text-align: left;
        margin-bottom: 20px;
        -webkit-line-clamp: 2;
        color: var(--titleFont)
    }

    .HotProduct .HotProductBGC .HotProduct-item .hot-item .productText .productText-item .productTitle:hover {
        color: var(--button)
    }

    .HotProduct .HotProductBGC .HotProduct-item .hot-item .productText .productText-item .productPrice {
        text-align: left
    }

    .HotProduct .HotProductBGC .changePage {
        display: flex;
        justify-content: center;
        padding-bottom: 30px
    }

    .HotProduct .HotProductBGC .changePage .changePageItem {
        cursor: pointer
    }

    .HotProduct .HotProductBGC .changePage .changePageItem i {
        color: #ccc
    }

    .HotProduct .HotProductBGC .changePage .changePageItem .active {
        color: #777
    }
}

@media screen and (max-width:767px) {
    .HotProduct {
        width: 100%;
        background-color: var(--hotBGC)
    }

    .HotProduct .HotProductBGC {
        text-align: center;
        overflow: hidden;
        margin: 0 auto 40px;
        width: calc(100vw - 30px)
    }

    .HotProduct .HotProductBGC .HotProduct-title {
        text-align: center;
        text-transform: uppercase;
        font-size: 24px;
        padding-top: 30px;
        padding-bottom: 20px;
        margin: 0;
        color: var(--titleFont)
    }

    .HotProduct .HotProductBGC .HotProduct-item {
        min-width: 100vw;
        height: calc(100vw + 100px);
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-between;
        transition: all .3s ease-out .1s;
        margin-bottom: 20px
    }

    .HotProduct .HotProductBGC .HotProduct-item .hot4 {
        flex: 0 0 calc(50vw + 40px);
        max-width: calc(50% - 7.5px);
        overflow: hidden;
        padding-bottom: 10px
    }

    .HotProduct .HotProductBGC .HotProduct-item .hot4 .hot-item .hot-item-pic {
        font-size: 16px;
        position: relative;
        width: calc(50vw - 22.5px);
        height: calc(50vw - 22.5px);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px
    }

    .HotProduct .HotProductBGC .HotProduct-item .hot4 .hot-item .hot-item-pic img {
        max-width: calc(50vw - 22.5px);
        max-height: calc(50vw - 22.5px)
    }

    .HotProduct .HotProductBGC .HotProduct-item .hot4 .hot-item .productText {
        width: calc(50vw - 7.5px);
        position: relative
    }

    .HotProduct .HotProductBGC .HotProduct-item .hot4 .hot-item .productText .hot-icon {
        position: absolute;
        top: calc(-50vw + 17.5px);
        right: 20px;
        width: 52px;
        height: 24px;
        background-color: var(--hot);
        text-align: center;
        line-height: 24px;
        font-size: 12px;
        font-weight: 600;
        color: var(--white)
    }

    .HotProduct .HotProductBGC .HotProduct-item .hot4 .hot-item .productText .productTitle {
        width: 90%
    }

    .HotProduct .HotProductBGC .changePage {
        display: flex;
        justify-content: center;
        padding-bottom: 40px
    }

    .HotProduct .HotProductBGC .changePage .changePageItem {
        padding: 0 3px;
        cursor: pointer
    }

    .HotProduct .HotProductBGC .changePage .changePageItem i {
        color: #ccc
    }

    .HotProduct .HotProductBGC .changePage .changePageItem .active {
        color: #777
    }
}

@media screen and (min-width:1200px) {
    .customizeImageText {
        max-width: 100%;
        margin: 0 auto 60px;
        flex-flow: wrap;
        overflow: hidden;
        display: flex;
        justify-content: flex-start;
        position: relative
    }

    .customizeImageText img {
        width: 50%;
        object-fit: cover
    }

    .customizeImageText .imageText-module {
        width: 50%;
        z-index: 2;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        background-color: var(--type1)
    }

    .customizeImageText .imageText-module .imageText-module-box {
        width: 100%;
        z-index: 2;
        box-sizing: border-box;
        padding: 0 80px
    }

    .customizeImageText .imageText-module .imageText-module-box .imageText-title {
        text-transform: uppercase;
        font-size: 24px;
        height: 32px;
        font-weight: 400;
        line-height: 32px;
        margin-bottom: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--titleFont)
    }

    .customizeImageText .imageText-module .imageText-module-box .imageText-text {
        font-size: 14px;
        font-weight: 400;
        color: var(--textFont);
        line-height: 20px;
        word-wrap: break-word;
        word-break: normal;
        display: -webkit-box !important;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 7
    }

    .customizeImageText .imageText-module .imageText-module-box .button {
        margin-top: 30px
    }

    .imageText_left {
        flex-direction: row-reverse
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .customizeImageText {
        max-width: 100%;
        margin: 0 auto 40px;
        flex-flow: wrap;
        overflow: hidden;
        display: flex;
        justify-content: flex-start;
        position: relative
    }

    .customizeImageText img {
        width: 50%;
        object-fit: cover
    }

    .customizeImageText .imageText-module {
        width: 50%;
        z-index: 2;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        background-color: var(--type1)
    }

    .customizeImageText .imageText-module .imageText-module-box {
        width: 100%;
        z-index: 2;
        box-sizing: border-box;
        padding: 0 30px
    }

    .customizeImageText .imageText-module .imageText-module-box .imageText-title {
        text-transform: uppercase;
        font-size: 24px;
        height: 32px;
        font-weight: 400;
        line-height: 32px;
        margin-bottom: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--titleFont)
    }

    .customizeImageText .imageText-module .imageText-module-box .imageText-text {
        font-size: 14px;
        font-weight: 400;
        color: var(--textFont);
        line-height: 20px;
        word-wrap: break-word;
        word-break: normal !important;
        display: -webkit-box !important;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5
    }

    .customizeImageText .imageText-module .imageText-module-box .button {
        margin-top: 20px
    }

    .imageText_left {
        flex-direction: row-reverse
    }
}

@media screen and (max-width:767px) {
    .customizeImageText {
        width: calc(100vw - 30px);
        margin: 0 auto 40px
    }

    .customizeImageText img {
        height: auto !important;
        width: 100%
    }

    .customizeImageText .imageText-module {
        height: auto !important;
        box-sizing: border-box;
        padding: 30px 20px;
        background-color: var(--type1)
    }

    .customizeImageText .imageText-module .imageText-title {
        text-transform: uppercase;
        font-size: 24px;
        height: 32px;
        font-weight: 400;
        line-height: 32px;
        margin-bottom: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--titleFont)
    }

    .customizeImageText .imageText-module .imageText-text {
        font-size: 14px;
        font-weight: 400;
        color: var(--textFont);
        line-height: 20px;
        margin-bottom: 20px
    }
}

@media screen and (min-width:1200px) {
    .imageTextGroup {
        max-width: 1180px;
        margin: 0 auto 60px;
        display: flex;
        flex-flow: wrap;
        overflow: hidden
    }

    .imageTextGroup .series {
        position: relative;
        flex: 1
    }

    .imageTextGroup .series .series-item {
        background-color: var(--type1);
        position: relative;
        height: 100%
    }

    .imageTextGroup .series .series-item img {
        width: 100%
    }

    .imageTextGroup .series .series-item .series-item-text {
        margin: 0 50px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        max-width: calc(100% - 100px);
        width: 100%
    }

    .imageTextGroup .series .series-item .series-item-text .title {
        text-transform: uppercase;
        color: var(--titleFont);
        font-size: 24px;
        font-weight: 500;
        line-height: 32px;
        margin: 20px 0
    }

    .imageTextGroup .series .series-item .series-item-text .span {
        color: var(--textFont);
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 10;
        overflow: hidden;
        margin-bottom: 20px
    }

    .imageTextGroup .series .series-item .series-item-text .span p {
        margin: 0
    }

    .imageTextGroup .series3 {
        position: relative;
        flex: 1
    }

    .imageTextGroup .series3 .series-item {
        background-color: var(--type1);
        position: relative;
        height: 100%
    }

    .imageTextGroup .series3 .series-item img {
        width: 100%
    }

    .imageTextGroup .series3 .series-item .series-item-text {
        margin: 0 50px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        max-width: calc(100% - 100px);
        width: 100%
    }

    .imageTextGroup .series3 .series-item .series-item-text .title {
        text-transform: uppercase;
        color: var(--titleFont);
        font-size: 24px;
        font-weight: 500;
        line-height: 32px;
        margin: 20px 0
    }

    .imageTextGroup .series3 .series-item .series-item-text .span {
        color: var(--textFont);
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 10;
        overflow: hidden;
        margin-bottom: 20px
    }

    .imageTextGroup .series3 .series-item .series-item-text .span p {
        margin: 0
    }

    .imageTextGroup .series4 {
        position: relative;
        flex: 0 0 50%;
        max-width: 50%
    }

    .imageTextGroup .series4 .series-item {
        background-color: var(--type1);
        position: relative;
        height: 100%;
        display: flex;
        align-items: center
    }

    .imageTextGroup .series4 .series-item img {
        width: 590px
    }

    .imageTextGroup .series4 .series-item .series-item-text {
        margin: 0 50px;
        max-width: calc(100% - 100px);
        width: 100%
    }

    .imageTextGroup .series4 .series-item .series-item-text .title {
        text-transform: uppercase;
        color: var(--titleFont);
        font-size: 24px;
        font-weight: 500;
        line-height: 32px;
        margin: 20px 0
    }

    .imageTextGroup .series4 .series-item .series-item-text .span {
        color: var(--textFont);
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 18;
        overflow: hidden;
        margin-bottom: 20px
    }

    .imageTextGroup .series4 .series-item .series-item-text .span p {
        margin: 0
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .imageTextGroup {
        max-width: 750px;
        margin: 0 auto 40px;
        display: flex;
        flex-flow: wrap;
        overflow: hidden
    }

    .imageTextGroup .series {
        position: relative;
        flex: 1
    }

    .imageTextGroup .series .series-item {
        position: relative;
        height: 100%;
        background-color: var(--type1)
    }

    .imageTextGroup .series .series-item img {
        width: 100%
    }

    .imageTextGroup .series .series-item .series-item-text {
        margin: 0 20px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        max-width: calc(100% - 40px);
        width: 100%
    }

    .imageTextGroup .series .series-item .series-item-text .title {
        text-transform: uppercase;
        color: var(--titleFont);
        font-size: 24px;
        font-weight: 500;
        line-height: 32px;
        margin: 0
    }

    .imageTextGroup .series .series-item .series-item-text .span {
        color: var(--textFont);
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 8;
        overflow: hidden;
        margin: 10px auto 20px
    }

    .imageTextGroup .series .series-item .series-item-text .span p {
        margin: 0
    }

    .imageTextGroup .series3 {
        position: relative;
        flex: 1
    }

    .imageTextGroup .series3 .series-item {
        position: relative;
        height: 100%;
        background-color: var(--type1)
    }

    .imageTextGroup .series3 .series-item img {
        width: 100%
    }

    .imageTextGroup .series3 .series-item .series-item-text {
        margin: 0 20px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        max-width: calc(100% - 40px);
        width: 100%
    }

    .imageTextGroup .series3 .series-item .series-item-text .title {
        text-transform: uppercase;
        color: var(--titleFont);
        font-size: 24px;
        font-weight: 500;
        line-height: 32px;
        margin: 0
    }

    .imageTextGroup .series3 .series-item .series-item-text .span {
        color: var(--textFont);
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
        overflow: hidden;
        margin: 10px auto 20px
    }

    .imageTextGroup .series3 .series-item .series-item-text .span p {
        margin: 0
    }

    .imageTextGroup .series4 {
        position: relative;
        flex: 0 0 50%;
        max-width: 50%
    }

    .imageTextGroup .series4 .series-item {
        background-color: var(--type1);
        position: relative;
        height: 100%;
        display: flex;
        align-items: center
    }

    .imageTextGroup .series4 .series-item img {
        width: 375px
    }

    .imageTextGroup .series4 .series-item .series-item-text {
        margin: 0 50px;
        max-width: calc(100% - 60px);
        width: 100%
    }

    .imageTextGroup .series4 .series-item .series-item-text .title {
        text-transform: uppercase;
        color: var(--titleFont);
        font-size: 24px;
        font-weight: 500;
        line-height: 32px;
        margin: 20px 0
    }

    .imageTextGroup .series4 .series-item .series-item-text .span {
        color: var(--textFont);
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 18;
        overflow: hidden;
        margin-bottom: 20px
    }

    .imageTextGroup .series4 .series-item .series-item-text .span p {
        margin: 0
    }
}

@media screen and (max-width:767px) {
    .imageTextGroup {
        margin: 0 auto 40px
    }

    .imageTextGroup .series,
    .imageTextGroup .series4 {
        display: block;
        flex-flow: wrap;
        overflow: hidden
    }

    .imageTextGroup .series-item {
        flex: 1;
        background-color: var(--type1);
        position: relative;
        width: calc(100vw - 30px);
        margin: 0 auto
    }

    .imageTextGroup .series-item img {
        width: 100%;
        display: block
    }

    .imageTextGroup .series-item .series-item-text {
        margin: 0 10px;
        max-width: calc(100% - 20px);
        width: 100%
    }

    .imageTextGroup .series-item .series-item-text .title {
        text-transform: uppercase;
        color: var(--titleFont);
        font-size: 24px;
        font-weight: 500;
        line-height: 32px;
        padding: 30px 0 20px
    }

    .imageTextGroup .series-item .series-item-text .span {
        color: var(--textFont);
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        padding-bottom: 20px
    }

    .imageTextGroup .series-item .series-item-text .span p {
        margin: 0
    }

    .imageTextGroup .series-item .series-item-text .button {
        margin-bottom: 30px
    }
}

@media screen and (min-width:1200px) {
    .ImageTextSeries2 {
        width: 100%;
        height: 480px;
        background-size: cover;
        background-position: 50%;
        position: relative;
    }

    .ImageTextSeries2 .ImageTextSeries-rows {
        display: flex;
        width: 1180px;
        height: 140px;
        position: absolute;
        bottom: 30px;
        left: calc(50% - 590px)
    }

    .ImageTextSeries2 .ImageTextSeries-rows .ImageTextSeries-item {
        flex: 0 0 30%;
        background: var(--IMS);
        overflow: hidden;
        border-radius: 6px;
        height: 150px;
        transition-property: background, height;
        transition-duration: .5s;
        transition: all .5s;
        margin: 0 20px
    }

    .ImageTextSeries2 .ImageTextSeries-rows .ImageTextSeries-item .ImageTextSeries-words {
        margin: 20px
    }

    .ImageTextSeries2 .ImageTextSeries-rows .ImageTextSeries-item .ImageTextSeries-words .words-num {
        color: var(--titleFont);
        height: 20px;
        font-size: 18px;
        font-weight: 500;
        line-height: 20px;
        transition-property: color;
        transition-duration: .5s
    }

    .ImageTextSeries2 .ImageTextSeries-rows .ImageTextSeries-item .ImageTextSeries-words .words-title {
        color: var(--titleFont);
        height: 24px;
        font-size: 18px;
        font-weight: 500;
        line-height: 24px;
        margin: 10px auto 15px;
        text-transform: uppercase;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition-property: color;
        transition-duration: .5s
    }

    .ImageTextSeries2 .ImageTextSeries-rows .ImageTextSeries-item .ImageTextSeries-words .words-text {
        font-size: 16px;
        font-weight: 400;
        color: var(--titleFont);
        line-height: 20px;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        transition-property: color, -webkit-line-clamp;
        transition-duration: .5s
    }

    .ImageTextSeries2 .ImageTextSeries-rows .ImageTextSeries-item:hover {
        transform: translateY(-145px);
        background: var(--IMSHover);
        height: 300px
    }

    .ImageTextSeries2 .ImageTextSeries-rows .ImageTextSeries-item:hover .words-num,
    .ImageTextSeries2 .ImageTextSeries-rows .ImageTextSeries-item:hover .words-title {
        color: var(--white)
    }

    .ImageTextSeries2 .ImageTextSeries-rows .ImageTextSeries-item:hover .words-text {
        color: var(--white);
        -webkit-line-clamp: 10
    }

    .xs_ImageTextSeries2 {
        display: none
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .ImageTextSeries2 {
        width: 100%;
        height: 300px;
        background-size: cover;
        background-position: 50%;
        position: relative;
        margin: 0 auto 40px
    }

    .ImageTextSeries2 .ImageTextSeries-rows {
        display: flex;
        width: 750px;
        height: 130px;
        position: absolute;
        bottom: 20px;
        left: calc(50% - 375px)
    }

    .ImageTextSeries2 .ImageTextSeries-rows .ImageTextSeries-item {
        flex: 0 0 30%;
        background: var(--IMS);
        overflow: hidden;
        border-radius: 6px;
        height: 130px;
        transition-property: background, height;
        transition-duration: .5s;
        transition: all .5s;
        margin: 0 20px
    }

    .ImageTextSeries2 .ImageTextSeries-rows .ImageTextSeries-item .ImageTextSeries-words {
        margin: 15px
    }

    .ImageTextSeries2 .ImageTextSeries-rows .ImageTextSeries-item .ImageTextSeries-words .words-num,
    .ImageTextSeries2 .ImageTextSeries-rows .ImageTextSeries-item .ImageTextSeries-words .words-title {
        color: var(--titleFont);
        height: 20px;
        font-size: 16px;
        font-weight: 500;
        line-height: 20px;
        transition-property: color;
        transition-duration: .5s
    }

    .ImageTextSeries2 .ImageTextSeries-rows .ImageTextSeries-item .ImageTextSeries-words .words-title {
        margin: 10px auto;
        text-transform: uppercase;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .ImageTextSeries2 .ImageTextSeries-rows .ImageTextSeries-item .ImageTextSeries-words .words-text {
        font-size: 14px;
        font-weight: 400;
        color: var(--titleFont);
        line-height: 18px;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        transition-property: color, -webkit-line-clamp;
        transition-duration: .5s
    }

    .ImageTextSeries2 .ImageTextSeries-rows .ImageTextSeries-item:hover {
        transform: translateY(-80px);
        background: var(--IMSHover);
        height: 213px
    }

    .ImageTextSeries2 .ImageTextSeries-rows .ImageTextSeries-item:hover .words-num,
    .ImageTextSeries2 .ImageTextSeries-rows .ImageTextSeries-item:hover .words-title {
        color: var(--white)
    }

    .ImageTextSeries2 .ImageTextSeries-rows .ImageTextSeries-item:hover .words-text {
        color: var(--white);
        -webkit-line-clamp: 7
    }

    .xs_ImageTextSeries2 {
        display: none
    }
}

@media screen and (max-width:767px) {
    .ImageTextSeries2 {
        display: none
    }

    .xs_ImageTextSeries2 {
        width: calc(100vw - 30px);
        margin: 0 auto 40px
    }

    .xs_ImageTextSeries2 .xs_ImageTextSeries-title {
        margin-bottom: 30px;
        font-size: 24px;
        font-weight: 400;
        color: var(--titleFont);
        line-height: 32px;
        text-align: center;
        text-transform: uppercase
    }

    .xs_ImageTextSeries2 .xs_ImageTextSeries-rows {
        display: block
    }

    .xs_ImageTextSeries2 .xs_ImageTextSeries-rows .xs_ImageTextSeries-item {
        overflow: hidden
    }

    .xs_ImageTextSeries2 .xs_ImageTextSeries-rows .xs_ImageTextSeries-item .xs_ImageTextSeries-img,
    .xs_ImageTextSeries2 .xs_ImageTextSeries-rows .xs_ImageTextSeries-item .xs_ImageTextSeries-img img {
        width: 100%
    }

    .xs_ImageTextSeries2 .xs_ImageTextSeries-rows .xs_ImageTextSeries-item .xs_ImageTextSeries-words {
        margin: 15px 0
    }

    .xs_ImageTextSeries2 .xs_ImageTextSeries-rows .xs_ImageTextSeries-item .xs_ImageTextSeries-words .words-title {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        color: var(--titleFont);
        text-align: center;
        height: 24px;
        font-size: 20px;
        font-weight: 500;
        line-height: 24px;
        margin: 20px auto;
        text-transform: uppercase
    }

    .xs_ImageTextSeries2 .xs_ImageTextSeries-rows .xs_ImageTextSeries-item .xs_ImageTextSeries-words .words-text {
        font-size: 16px;
        font-weight: 400;
        color: var(--titleFont);
        line-height: 20px
    }
}

@media screen and (min-width:1200px) {
    .home_map {
        max-width: 1180px;
        background-color: var(--type1);
        margin: 0 auto 60px;
        position: relative
    }

    .home_map,
    .home_map .center {
        height: 310px
    }

    .home_map .left,
    .home_map .right {
        height: 310px;
        width: 590px
    }

    .home_map .right {
        position: absolute !important;
        right: 0
    }

    .home_map .address {
        position: absolute;
        z-index: 401;
        display: -webkit-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 400px;
        height: 240px;
        background: hsla(0, 0%, 100%, .9);
        border-radius: 2px;
        text-align: center;
        left: 95px;
        top: 35px
    }

    .home_map .address .address-title {
        font-size: 24px;
        font-weight: 600;
        line-height: 28px;
        padding: 0 20px;
        margin-bottom: 20px;
        color: var(--titleFont)
    }

    .home_map .address .address-text {
        width: 100%;
        font-size: 20px;
        box-sizing: border-box;
        padding: 0 20px;
        font-weight: 400;
        line-height: 24px;
        margin-bottom: 20px;
        color: var(--textFont)
    }

    .home_map .address-left {
        position: absolute;
        z-index: 401;
        display: -webkit-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 590px;
        height: 310px;
        border-radius: 2px;
        text-align: center;
        right: 0;
        top: 0
    }

    .home_map .address-left .address-title {
        font-size: 24px;
        font-weight: 600;
        line-height: 28px;
        padding: 0 20px;
        margin-bottom: 20px;
        color: var(--titleFont)
    }

    .home_map .address-left .address-text {
        width: 100%;
        font-size: 20px;
        box-sizing: border-box;
        padding: 0 20px;
        font-weight: 400;
        line-height: 24px;
        margin-bottom: 20px;
        color: var(--textFont)
    }

    .home_map .address-right {
        position: absolute;
        z-index: 401;
        display: -webkit-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 590px;
        height: 310px;
        border-radius: 2px;
        text-align: center;
        left: 0;
        top: 0
    }

    .home_map .address-right .address-title {
        font-size: 24px;
        font-weight: 600;
        line-height: 28px;
        padding: 0 20px;
        margin-bottom: 20px;
        color: var(--titleFont)
    }

    .home_map .address-right .address-text {
        width: 100%;
        font-size: 20px;
        box-sizing: border-box;
        padding: 0 20px;
        font-weight: 400;
        line-height: 24px;
        margin-bottom: 20px;
        color: var(--textFont)
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .home_map {
        max-width: 750px;
        background-color: var(--type1);
        margin: 0 auto 40px;
        position: relative
    }

    .home_map,
    .home_map .center {
        height: 310px
    }

    .home_map .left,
    .home_map .right {
        height: 310px;
        width: 375px
    }

    .home_map .right {
        position: absolute !important;
        right: 0
    }

    .home_map .address {
        position: absolute;
        z-index: 401;
        display: -webkit-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 300px;
        height: 240px;
        background: hsla(0, 0%, 100%, .9);
        border-radius: 2px;
        text-align: center;
        left: 25px;
        top: 35px
    }

    .home_map .address .address-title {
        font-size: 20px;
        font-weight: 600;
        line-height: 28px;
        margin-bottom: 20px;
        padding: 0 20px;
        color: var(--titleFont)
    }

    .home_map .address .address-text {
        width: 100%;
        font-size: 16px;
        box-sizing: border-box;
        padding: 0 20px;
        font-weight: 400;
        line-height: 24px;
        margin-bottom: 20px;
        color: var(--textFont)
    }

    .home_map .address-left {
        position: absolute;
        z-index: 401;
        display: -webkit-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 375px;
        height: 310px;
        border-radius: 2px;
        text-align: center;
        right: 0;
        top: 0
    }

    .home_map .address-left .address-title {
        font-size: 20px;
        font-weight: 600;
        line-height: 28px;
        margin-bottom: 20px;
        padding: 0 20px;
        color: var(--titleFont)
    }

    .home_map .address-left .address-text {
        width: 100%;
        font-size: 16px;
        box-sizing: border-box;
        padding: 0 20px;
        font-weight: 400;
        line-height: 24px;
        margin-bottom: 20px;
        color: var(--textFont)
    }

    .home_map .address-right {
        position: absolute;
        z-index: 401;
        display: -webkit-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 375px;
        height: 310px;
        border-radius: 2px;
        text-align: center;
        left: 0;
        top: 0
    }

    .home_map .address-right .address-title {
        font-size: 20px;
        font-weight: 600;
        line-height: 28px;
        margin-bottom: 20px;
        padding: 0 20px;
        color: var(--titleFont)
    }

    .home_map .address-right .address-text {
        width: 100%;
        font-size: 16px;
        box-sizing: border-box;
        padding: 0 20px;
        font-weight: 400;
        line-height: 24px;
        margin-bottom: 20px;
        color: var(--textFont)
    }
}

@media screen and (max-width:767px) {
    .home_map {
        width: calc(100vw - 30px);
        background-color: var(--type1);
        margin: 0 auto 40px;
        position: relative
    }

    .home_map .map {
        height: 310px
    }

    .home_map .xs-address {
        z-index: 401;
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 2px;
        text-align: center
    }

    .home_map .xs-address .address-title {
        font-size: 20px;
        font-weight: 600;
        line-height: 28px;
        margin: 20px 0;
        color: var(--titleFont)
    }

    .home_map .xs-address .address-text {
        width: 100%;
        font-size: 16px;
        box-sizing: border-box;
        padding: 0 20px;
        font-weight: 400;
        line-height: 24px;
        margin-bottom: 20px;
        color: var(--textFont)
    }

    .home_map .xs-address .button {
        margin-bottom: 20px
    }

    .leaflet-map-pane {
        width: 100%;
        height: 310px;
        z-index: 0;
        position: relative;
        outline: none
    }
}

@media screen and (min-width:1200px) {
    .MultipleLinks {
        display: flex;
        flex-flow: wrap;
        max-width: 100%;
        margin: 0 auto 60px;
        overflow: hidden;
        position: relative
    }

    .MultipleLinks .multiple {
        position: relative;
        flex: 1 !important
    }

    .MultipleLinks .multiple .multiple-item-pic {
        height: 400px;
        width: 100%;
        position: relative
    }

    .MultipleLinks .multiple .multiple-item-pic img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .MultipleLinks .multiple .multiple-item-pic .multiple-item-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: left;
        color: var(--titleFont);
        font-size: 20px;
        width: 100%;
        max-width: calc(100% - 80px)
    }

    .MultipleLinks .multiple .multiple-item-pic .multiple-item-text h4 {
        width: 50%;
        font-size: 24px;
        margin-bottom: 20px
    }
}

@media screen and (min-width:768px) and (max-width:1199px) {
    .MultipleLinks {
        display: flex;
        flex-flow: wrap;
        max-width: 100%;
        margin: 0 auto 60px;
        overflow: hidden;
        position: relative
    }

    .MultipleLinks .multiple {
        position: relative;
        flex: 0 0 33.33%
    }

    .MultipleLinks .multiple .multiple-item-pic {
        height: 300px;
        width: 100%;
        position: relative
    }

    .MultipleLinks .multiple .multiple-item-pic img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .MultipleLinks .multiple .multiple-item-pic .multiple-item-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: left;
        color: var(--titleFont);
        font-size: 20px;
        width: 100%;
        max-width: calc(100% - 40px)
    }

    .MultipleLinks .multiple .multiple-item-pic .multiple-item-text h4 {
        width: 50%;
        font-size: 24px;
        margin-bottom: 20px
    }
}

@media screen and (max-width:767px) {
    .MultipleLinks {
        width: 100vw;
        margin: 0 auto 40px;
        display: flex;
        flex-flow: wrap
    }

    .MultipleLinks .multiple {
        flex: 0 0 100% !important;
        display: block;
        flex-flow: wrap;
        overflow: hidden
    }

    .MultipleLinks .multiple .multiple-item-pic {
        position: relative;
        width: 100%;
        height: 100% !important
    }

    .MultipleLinks .multiple .multiple-item-pic img {
        width: 100%;
        display: block
    }

    .MultipleLinks .multiple .multiple-item-pic .multiple-item-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: left;
        color: var(--titleFont);
        font-size: 20px;
        width: 100%;
        max-width: calc(100% - 30px)
    }

    .MultipleLinks .multiple .multiple-item-pic .multiple-item-text h4 {
        width: 50%;
        margin: 0 0 20px
    }
}

@media screen and (min-width:1200px) {
    .ProductGroup {
        max-width: 1180px;
        margin: 0 auto 60px
    }

    .ProductGroup .ProductGroup-item {
        display: flex;
        flex-flow: wrap;
        justify-content: space-between
    }

    .ProductGroup .ProductGroup-item .row4 {
        flex: 0 0 285px;
        width: 285px;
        height: 210px;
        display: flex;
        position: relative
    }

    .ProductGroup .ProductGroup-item .row4 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 6px
    }

    .ProductGroup .ProductGroup-item .row3 {
        flex: 0 0 380px;
        width: 380px;
        height: 280px;
        display: flex;
        position: relative
    }

    .ProductGroup .ProductGroup-item .row3 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 6px
    }

    .ProductGroup .ProductGroup-item .row2 {
        flex: 0 0 580px;
        width: 580px;
        height: 430px;
        display: flex;
        position: relative
    }

    .ProductGroup .ProductGroup-item .row2 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 6px
    }

    .ProductGroup .ProductGroup-item .row-bgc {
        left: 0;
        transition-property: top
    }

    .ProductGroup .ProductGroup-item .row-bgc,
    .ProductGroup .ProductGroup-item .row-bgc .row-item-title {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        border-radius: 6px;
        margin: auto;
        transition-duration: .5s
    }

    .ProductGroup .ProductGroup-item .row-bgc .row-item-title {
        transition-property: background;
        background: rgba(32, 175, 179, .05)
    }

    .ProductGroup .ProductGroup-item .row-bgc .row-item-title .row-item-text {
        font-size: 20px;
        margin-bottom: 15px;
        color: var(--titleFont);
        position: absolute;
        bottom: 10px;
        left: 30px;
        width: calc(100% - 60px);
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        transition-property: bottom;
        transition-duration: .5s
    }

    .ProductGroup .ProductGroup-item .row-bgc .row-item-title .button {
        border: 2px solid var(--white);
        line-height: 36px;
        background-color: transparent;
        position: absolute;
        left: 30px;
        bottom: 0;
        opacity: 0;
        transition-property: bottom, opacity;
        transition-duration: .5s;
        cursor: pointer
    }

    .ProductGroup .ProductGroup-item .row2:hover .row-bgc,
    .ProductGroup .ProductGroup-item .row3:hover .row-bgc,
    .ProductGroup .ProductGroup-item .row4:hover .row-bgc {
        top: -10px
    }

    .ProductGroup .ProductGroup-item .row2:hover .row-bgc .row-item-title,
    .ProductGroup .ProductGroup-item .row3:hover .row-bgc .row-item-title,
    .ProductGroup .ProductGroup-item .row4:hover .row-bgc .row-item-title {
        background: rgba(32, 175, 179, .92)
    }

    .ProductGroup .ProductGroup-item .row2:hover .row-bgc .row-item-title .row-item-text,
    .ProductGroup .ProductGroup-item .row3:hover .row-bgc .row-item-title .row-item-text,
    .ProductGroup .ProductGroup-item .row4:hover .row-bgc .row-item-title .row-item-text {
        bottom: 80px;
        color: var(--white)
    }

    .ProductGroup .ProductGroup-item .row2:hover .row-bgc .row-item-title .button,
    .ProductGroup .ProductGroup-item .row3:hover .row-bgc .row-item-title .button,
    .ProductGroup .ProductGroup-item .row4:hover .row-bgc .row-item-title .button {
        bottom: 30px;
        opacity: 1
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .ProductGroup {
        max-width: 750px;
        margin: 0 auto 40px
    }

    .ProductGroup .ProductGroup-item {
        display: flex;
        flex-flow: wrap;
        justify-content: space-between
    }

    .ProductGroup .ProductGroup-item .row4 {
        flex: 0 0 180px;
        width: 180px;
        height: 130px;
        display: flex;
        position: relative
    }

    .ProductGroup .ProductGroup-item .row4 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 6px
    }

    .ProductGroup .ProductGroup-item .row3 {
        flex: 0 0 240px;
        width: 240px;
        height: 180px;
        display: flex;
        position: relative
    }

    .ProductGroup .ProductGroup-item .row3 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 6px
    }

    .ProductGroup .ProductGroup-item .row2 {
        flex: 0 0 365px;
        width: 365px;
        height: 270px;
        display: flex;
        position: relative
    }

    .ProductGroup .ProductGroup-item .row2 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 6px
    }

    .ProductGroup .ProductGroup-item .row-bgc {
        left: 0;
        transition-property: top
    }

    .ProductGroup .ProductGroup-item .row-bgc,
    .ProductGroup .ProductGroup-item .row-bgc .row-item-title {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        border-radius: 6px;
        margin: auto;
        transition-duration: .5s
    }

    .ProductGroup .ProductGroup-item .row-bgc .row-item-title {
        transition-property: background;
        background: rgba(32, 175, 179, .05)
    }

    .ProductGroup .ProductGroup-item .row-bgc .row-item-title .row-item-text {
        font-size: 18px;
        margin-bottom: 15px;
        color: var(--titleFont);
        position: absolute;
        bottom: 0;
        left: 20px;
        width: calc(100% - 40px);
        transition-property: bottom;
        transition-duration: .5s;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical
    }

    .ProductGroup .ProductGroup-item .row-bgc .row-item-title .button {
        border: 2px solid var(--white);
        background-color: transparent;
        position: absolute;
        left: 20px;
        bottom: 0;
        opacity: 0;
        transition-property: bottom, opacity;
        transition-duration: .5s;
        line-height: 32px;
        padding: 0 20px;
        cursor: pointer
    }

    .ProductGroup .ProductGroup-item .row2:hover .row-bgc,
    .ProductGroup .ProductGroup-item .row3:hover .row-bgc,
    .ProductGroup .ProductGroup-item .row4:hover .row-bgc {
        top: -10px
    }

    .ProductGroup .ProductGroup-item .row2:hover .row-bgc .row-item-title,
    .ProductGroup .ProductGroup-item .row3:hover .row-bgc .row-item-title,
    .ProductGroup .ProductGroup-item .row4:hover .row-bgc .row-item-title {
        background: rgba(32, 175, 179, .92)
    }

    .ProductGroup .ProductGroup-item .row2:hover .row-bgc .row-item-title .row-item-text,
    .ProductGroup .ProductGroup-item .row3:hover .row-bgc .row-item-title .row-item-text,
    .ProductGroup .ProductGroup-item .row4:hover .row-bgc .row-item-title .row-item-text {
        bottom: 60px;
        color: var(--white)
    }

    .ProductGroup .ProductGroup-item .row2:hover .row-bgc .row-item-title .button,
    .ProductGroup .ProductGroup-item .row3:hover .row-bgc .row-item-title .button,
    .ProductGroup .ProductGroup-item .row4:hover .row-bgc .row-item-title .button {
        bottom: 20px;
        opacity: 1
    }
}

@media screen and (max-width:767px) {
    .ProductGroup {
        max-width: 100%;
        margin: 0 auto 40px
    }

    .ProductGroup .ProductGroup-item {
        display: flex;
        flex-flow: wrap;
        justify-content: space-between;
        width: calc(100vw - 30px);
        margin: 0 auto
    }

    .ProductGroup .ProductGroup-item .row,
    .ProductGroup .ProductGroup-item .row2,
    .ProductGroup .ProductGroup-item .row3,
    .ProductGroup .ProductGroup-item .row4 {
        position: relative;
        flex: 0 0 100%;
        width: calc(100vw - 30px);
        height: calc(73.68vw - 22.1px);
        overflow: hidden;
        margin-bottom: 15px
    }

    .ProductGroup .ProductGroup-item .row2 img,
    .ProductGroup .ProductGroup-item .row3 img,
    .ProductGroup .ProductGroup-item .row4 img,
    .ProductGroup .ProductGroup-item .row img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 1;
        transition: all .5s
    }

    .ProductGroup .ProductGroup-item .row2 .row-item-text,
    .ProductGroup .ProductGroup-item .row3 .row-item-text,
    .ProductGroup .ProductGroup-item .row4 .row-item-text,
    .ProductGroup .ProductGroup-item .row .row-item-text {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        align-items: center;
        display: flex;
        justify-content: center;
        color: var(--black);
        font-size: 16px;
        font-weight: 600;
        opacity: 1;
        transition: all .5s;
        margin: 0;
        z-index: 2
    }

    .ProductGroup .ProductGroup-item .row2 .button,
    .ProductGroup .ProductGroup-item .row3 .button,
    .ProductGroup .ProductGroup-item .row4 .button,
    .ProductGroup .ProductGroup-item .row .button {
        display: none
    }
}

@media screen and (min-width:1200px) {
    .productGroupDetail {
        width: calc(100% - 20px);
        margin: 0 auto 20px
    }

    .productGroupDetail img {
        width: 316px;
        height: 316px;
        object-fit: cover;
        float: left;
        padding: 0 20px 20px 0
    }

    .productGroupDetail .productGroupDetailTitle {
        font-size: 20px;
        line-height: 24px;
        color: var(--titleFont);
        margin-bottom: 20px
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .productGroupDetail {
        width: calc(100% - 20px);
        margin: 0 auto 20px
    }

    .productGroupDetail img {
        width: 200px;
        height: 200px;
        object-fit: cover;
        float: left;
        padding: 0 15px 10px 0
    }

    .productGroupDetail .productGroupDetailTitle {
        font-size: 20px;
        line-height: 24px;
        color: var(--titleFont);
        margin-bottom: 10px
    }
}

@media screen and (max-width:767px) {
    .productGroupDetail {
        min-height: auto !important;
        width: calc(100vw - 30px);
        margin: 0 auto 20px
    }

    .productGroupDetail img {
        width: 100%;
        object-fit: cover;
        margin-bottom: 20px
    }

    .productGroupDetail .productGroupDetailTitle {
        font-size: 20px;
        line-height: 24px;
        color: var(--titleFont);
        margin-bottom: 20px
    }
}

@media screen and (min-width:1200px) {
    .ProductProduct {
        width: 900px;
        margin-bottom: 50px;
        text-align: left;
        position: relative
    }

    .ProductProduct .Product-item {
        width: 880px;
        margin: 0 auto;
        height: 50px;
        justify-content: space-between;
        position: relative;
        display: flex;
        align-items: start
    }

    .ProductProduct .Product-item .ProductProduct-title {
        font-size: 16px;
        line-height: 36px;
        color: var(--textFont)
    }

    .ProductProduct .ProductProduct-item {
        display: flex;
        flex-flow: wrap
    }

    .ProductProduct .ProductProduct-item .product_list4 {
        flex: 0 0 215px;
        max-width: 215px;
        padding: 5px;
        overflow: hidden
    }

    .ProductProduct .ProductProduct-item .product_list4 .row-item .row-item-pic {
        font-size: 16px;
        width: 215px;
        height: 215px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        overflow: hidden
    }

    .ProductProduct .ProductProduct-item .product_list4 .row-item .row-item-pic img {
        max-width: 215px;
        max-height: 215px;
        transition: all .5s
    }

    .ProductProduct .ProductProduct-item .product_list3 {
        flex: 0 0 284px;
        max-width: 284px;
        padding: 8px;
        overflow: hidden
    }

    .ProductProduct .ProductProduct-item .product_list3 .row-item .row-item-pic {
        font-size: 16px;
        width: 284px;
        height: 284px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        overflow: hidden
    }

    .ProductProduct .ProductProduct-item .product_list3 .row-item .row-item-pic img {
        max-width: 284px;
        max-height: 284px;
        transition: all .5s
    }

    .ProductProduct .ProductProduct-item .product_list2 {
        flex: 0 0 430px;
        max-width: 430px;
        padding: 10px;
        overflow: hidden
    }

    .ProductProduct .ProductProduct-item .product_list2 .row-item .row-item-pic {
        font-size: 16px;
        width: 430px;
        height: 430px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        overflow: hidden
    }

    .ProductProduct .ProductProduct-item .product_list2 .row-item .row-item-pic img {
        max-width: 430px;
        max-height: 430px;
        transition: all .5s
    }

    .ProductProduct .productTitle {
        color: var(--titleFont)
    }

    .ProductProduct .row-item:hover .productTitle {
        color: var(--button)
    }

    .ProductProduct .pagination {
        position: absolute;
        bottom: -40px;
        left: 50%;
        transform: translateX(-50%)
    }

    .ProductProduct .pagination .el-icon,
    .ProductProduct .pagination .el-pager li {
        font-size: 16px
    }

    .ProductProduct .pagination button:hover {
        color: var(--button)
    }

    .ProductProduct .pagination .el-pager li.active {
        color: var(--button);
        cursor: default
    }

    .ProductProduct .pagination .el-pager li:hover {
        color: var(--button)
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .ProductProduct {
        width: 570px;
        text-align: left;
        margin-bottom: 50px;
        position: relative
    }

    .ProductProduct .Product-item {
        width: 560px;
        margin: 0 auto;
        height: 50px;
        justify-content: space-between;
        position: relative;
        display: flex;
        align-items: start
    }

    .ProductProduct .Product-item .ProductProduct-title {
        font-size: 16px;
        line-height: 36px;
        color: var(--textFont)
    }

    .ProductProduct .ProductProduct-item {
        display: flex;
        flex-flow: wrap
    }

    .ProductProduct .ProductProduct-item .product_list4 {
        flex: 0 0 132.5px;
        max-width: 132.5px;
        padding: 5px;
        overflow: hidden
    }

    .ProductProduct .ProductProduct-item .product_list4 .row-item .row-item-pic {
        font-size: 16px;
        width: 132.5px;
        height: 132.5px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        overflow: hidden
    }

    .ProductProduct .ProductProduct-item .product_list4 .row-item .row-item-pic img {
        max-width: 132.5px;
        max-height: 132.5px;
        transition: all .5s
    }

    .ProductProduct .ProductProduct-item .product_list3 {
        flex: 0 0 180px;
        max-width: 180px;
        padding: 5px;
        overflow: hidden
    }

    .ProductProduct .ProductProduct-item .product_list3 .row-item .row-item-pic {
        font-size: 16px;
        width: 180px;
        height: 180px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        overflow: hidden
    }

    .ProductProduct .ProductProduct-item .product_list3 .row-item .row-item-pic img {
        max-width: 180px;
        max-height: 180px;
        transition: all .5s
    }

    .ProductProduct .ProductProduct-item .product_list2 {
        flex: 0 0 265px;
        max-width: 265px;
        padding: 10px;
        overflow: hidden
    }

    .ProductProduct .ProductProduct-item .product_list2 .row-item .row-item-pic {
        font-size: 16px;
        width: 265px;
        height: 265px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        overflow: hidden
    }

    .ProductProduct .ProductProduct-item .product_list2 .row-item .row-item-pic img {
        max-width: 265px;
        max-height: 265px;
        transition: all .5s
    }

    .ProductProduct .productTitle {
        color: var(--titleFont)
    }

    .ProductProduct .row-item:hover .productTitle {
        color: var(--button)
    }

    .ProductProduct .pagination {
        position: absolute;
        bottom: -40px;
        left: 50%;
        transform: translateX(-50%)
    }

    .ProductProduct .pagination .el-icon,
    .ProductProduct .pagination .el-pager li {
        font-size: 16px
    }

    .ProductProduct .pagination button:hover {
        color: var(--button)
    }

    .ProductProduct .pagination .el-pager li.active {
        color: var(--button);
        cursor: default
    }

    .ProductProduct .pagination .el-pager li:hover {
        color: var(--button)
    }
}

@media screen and (max-width:767px) {
    .ProductProduct {
        max-width: 750px;
        margin: 20px auto 50px;
        text-align: center;
        position: relative
    }

    .ProductProduct .Product-item {
        flex-flow: wrap;
        justify-content: space-between;
        position: relative;
        height: 90px
    }

    .ProductProduct .Product-item .ProductProduct-title {
        font-size: 14px;
        padding-bottom: 10px;
        margin: auto 0;
        text-align: left;
        padding-left: 15px;
        position: absolute;
        bottom: 0;
        color: var(--textFont)
    }

    .ProductProduct .Product-item .ProductProduct-title1 {
        position: absolute;
        top: 0;
        margin: 0;
        width: 100vw
    }

    .ProductProduct .Product-item .ProductProduct-title1 .el-select {
        width: calc(100vw - 30px)
    }

    .ProductProduct .ProductProduct-item {
        display: flex;
        flex-flow: wrap;
        justify-content: space-between;
        margin: 0 15px
    }

    .ProductProduct .ProductProduct-item .product_list {
        flex: 0 0 50%;
        max-width: calc(50% - 7.5px);
        overflow: hidden
    }

    .ProductProduct .ProductProduct-item .product_list .row-item a {
        text-decoration: none
    }

    .ProductProduct .ProductProduct-item .product_list .row-item .row-item-pic {
        font-size: 16px;
        width: calc(50vw - 22.5px);
        height: calc(50vw - 22.5px);
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px
    }

    .ProductProduct .ProductProduct-item .product_list .row-item .row-item-pic img {
        max-width: calc(50vw - 22.5px);
        max-height: calc(50vw - 22.5px)
    }

    .ProductProduct .ProductProduct-item .product_list .row-item .title {
        color: var(--button);
        line-height: 20px;
        height: 20px;
        font-size: 16px;
        font-weight: 400;
        margin: 0 0 10px;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1
    }

    .ProductProduct .ProductProduct-item .product_list .row-item .price {
        color: var(--textFont);
        line-height: 24px;
        font-size: 16px;
        font-weight: 400;
        margin: 0 0 10px;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2
    }

    .ProductProduct .productTitle {
        color: var(--titleFont)
    }

    .ProductProduct .pagination {
        position: absolute;
        bottom: -40px;
        left: 50%;
        transform: translateX(-50%)
    }

    .ProductProduct .pagination .el-icon,
    .ProductProduct .pagination .el-pager li {
        font-size: 16px
    }

    .ProductProduct .pagination button:hover {
        color: var(--button)
    }

    .ProductProduct .pagination .el-pager li.active {
        color: var(--button);
        cursor: default
    }

    .ProductProduct .pagination .el-pager li:hover {
        color: var(--button)
    }
}

@media screen and (min-width:768px) {
    .XsFilterProduct {
        display: none
    }
}

@media screen and (max-width:767px) {
    .XsFilterProduct {
        width: calc(100vw - 30px);
        margin: 20px auto;
        height: 24px;
        line-height: 24px;
        font-size: 20px
    }

    .XsFilterProduct .XsFilterProductList {
        width: calc(100vw - 20px);
        position: absolute
    }

    .XsFilterProduct .XsFilterProduct-title {
        padding-bottom: 10px;
        color: var(--titleFont)
    }

    .XsFilterProduct .XsFilterProduct-title i {
        padding-right: 10px;
        font-size: 20px
    }

    .XsFilterProduct .open-XsFilterProduct-enter,
    .XsFilterProduct .open-XsFilterProduct-leave-to {
        transform: translateX(-100vw)
    }

    .XsFilterProduct .open-XsFilterProduct-enter-active,
    .XsFilterProduct .open-XsFilterProduct-leave-active {
        transition: all .3s cubic-bezier(1, .5, .8, 1)
    }

    .XsFilterProduct .FilterList {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 80vw;
        z-index: 1;
        background-color: var(--themeBGC);
        z-index: 1002
    }

    .XsFilterProduct .FilterList .FilterList-title {
        margin: 16px;
        color: var(--titleFont);
        line-height: 32px;
        font-size: 20px
    }

    .XsFilterProduct .FilterList .iconic_shop_shutdown {
        position: absolute;
        right: 20px;
        top: 20px;
        font-size: 24px
    }

    .XsFilterProduct .FilterList .xs-menu {
        color: var(--titleFont);
        list-style: none;
        padding-left: 20px;
        margin: 0;
        padding-inline-start: 0;
        height: calc(100vh - 168px);
        overflow: auto
    }

    .XsFilterProduct .FilterList .xs-menu .menu-unit-left {
        list-style: none;
        padding: 8px 0;
        font-size: 16px;
        border-bottom: 1px solid
    }

    .XsFilterProduct .FilterList .xs-menu .menu-unit-left .font-orange {
        text-decoration: none;
        color: var(--button);
        padding: 0 15px
    }

    .XsFilterProduct .FilterList .xs-menu .menu-unit-left .font-black {
        text-decoration: none;
        color: var(--titleFont);
        padding: 0 15px
    }

    .XsFilterProduct .FilterList .xs-menu .menu-unit-left i {
        float: right;
        font-size: 24px;
        padding-right: 20px;
        color: var(--titleFont)
    }

    .XsFilterProduct .FilterList .xs-menu .menu-unit-left #side-second-menu {
        list-style: none;
        padding-inline-start: 20px;
        padding-top: 10px;
        font-size: 14px
    }

    .XsFilterProduct .FilterList .xs-menu .menu-unit-left #side-second-menu li {
        padding: 5px 0
    }

    .XsFilterProduct .FilterList .xs-menu .menu-unit-left #side-second-menu li a {
        text-decoration: none;
        color: var(--titleFont)
    }

    .XsFilterProduct .FilterList .menu-unit-left {
        list-style: none;
        padding: 8px 0;
        font-size: 16px;
        border-bottom: 1px solid
    }

    .XsFilterProduct .FilterList .menu-unit-left .font-black,
    .XsFilterProduct .FilterList .menu-unit-left .font-orange {
        text-decoration: none;
        color: var(--titleFont);
        padding: 0 15px
    }

    .XsFilterProduct .FilterList .menu-unit-left i {
        float: right;
        font-size: 24px;
        padding-right: 20px;
        color: var(--titleFont)
    }

    .XsFilterProduct .FilterList .menu-unit-left #side-second-menu {
        list-style: none;
        padding-inline-start: 20px;
        padding-top: 10px;
        font-size: 14px
    }

    .XsFilterProduct .FilterList .menu-unit-left #side-second-menu li {
        padding: 5px 0
    }

    .XsFilterProduct .FilterList .menu-unit-left #side-second-menu li a {
        text-decoration: none;
        color: var(--titleFont)
    }

    .XsFilterProduct .open-Xsshadow-enter,
    .XsFilterProduct .open-Xsshadow-leave-to {
        transform: translateX(100vw)
    }

    .XsFilterProduct .open-Xsshadow-enter-active,
    .XsFilterProduct .open-Xsshadow-leave-active {
        transition: all 0s cubic-bezier(1, .5, .8, 1)
    }

    .XsFilterProduct .FilterList-shadow {
        background-color: rgba(0, 0, 0, .4);
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 1001
    }
}

@media screen and (min-width:1200px) {
    .ProductsList {
        width: 100%;
        margin: 0 auto
    }

    .ProductsList .ProductsPic {
        height: 240px;
        font-size: 28px;
        font-weight: 400;
        text-align: center;
        position: relative
    }

    .ProductsList .ProductsPic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

    .ProductsList .ProductsPic .ProductsTitle {
        margin: 0 50px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        max-width: calc(100% - 100px);
        width: 100%
    }

    .ProductsList .ProductsPic .ProductsTitle .title-item1 {
        text-transform: uppercase;
        font-size: 32px;
        margin: 0;
        line-height: 32px
    }

    .ProductsList .ProductsPic .ProductsTitle .title-item2 {
        margin: 20px 0;
        font-size: 14px;
        font-weight: 400
    }

    .ProductsList .ProductsPic .ProductsTitle .title-item2 i {
        font-weight: 700
    }

    .ProductsList .ProductsPic .ProductsTitle .title-item2 a {
        font-weight: 400;
        color: var(--textFont)
    }

    .ProductsList .ProductsPic .ProductsTitle .title-item2 a:hover {
        color: var(--button) !important
    }

    .ProductsList .ProductsPic .ProductsTitle .title-item2 span {
        font-weight: 400;
        color: var(--textFont);
        max-width: 200px;
        line-height: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .ProductsList .ProductsPic .ProductsTitle .title-item2 .el-breadcrumb {
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .ProductsList .filterAndproduct {
        max-width: 1180px;
        margin: 30px auto 0;
        display: flex;
        flex-flow: wrap;
        position: relative;
        justify-content: space-between;
        background-color: var(--themeBGC);
        border-radius: 3px 3px 0 0
    }

    [class*=el-col-] {
        float: none
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .ProductsList {
        width: 100%;
        margin: 0 auto
    }

    .ProductsList .title-item2 {
        margin: 15px 0;
        color: var(--textFont);
        font-size: 14px;
        font-weight: 400
    }

    .ProductsList .title-item2 i {
        font-weight: 700
    }

    .ProductsList .title-item2 a {
        font-weight: 400;
        color: var(--textFont)
    }

    .ProductsList .title-item2 a:hover {
        color: var(--button) !important
    }

    .ProductsList .title-item2 span {
        font-weight: 400;
        color: var(--textFont);
        max-width: 200px;
        line-height: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .ProductsList .title-item2 .el-breadcrumb {
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .ProductsList .ProductsPic {
        height: 200px;
        font-size: 28px;
        font-weight: 400;
        text-align: center;
        position: relative
    }

    .ProductsList .ProductsPic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

    .ProductsList .ProductsPic .ProductsTitle {
        margin: 0 50px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        max-width: calc(100% - 100px);
        width: 100%
    }

    .ProductsList .ProductsPic .ProductsTitle .title-item1 {
        text-transform: uppercase;
        font-size: 32px;
        margin: 0;
        line-height: 32px
    }

    .ProductsList .filterAndproduct {
        max-width: 750px;
        margin: 20px auto 0;
        display: flex;
        flex-flow: wrap;
        position: relative;
        justify-content: space-between;
        background-color: var(--themeBGC);
        border-radius: 3px 3px 0 0
    }

    [class*=el-col-] {
        float: none
    }
}

@media screen and (max-width:767px) {
    .ProductsList .title-item2 {
        display: none
    }

    .ProductsList .ProductsPic {
        height: 100px;
        width: 100%;
        font-size: 28px;
        font-weight: 400;
        text-align: center;
        line-height: 100px;
        position: relative
    }

    .ProductsList .ProductsPic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

    .ProductsList .ProductsPic .ProductsTitle {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%
    }

    .ProductsList .ProductsPic .ProductsTitle .title-item1 {
        text-transform: uppercase;
        font-size: 32px;
        margin: 0;
        line-height: 32px
    }
}

@media screen and (min-width:1200px) {
    .slideShow {
        width: 100%;
        margin: 0 auto 60px
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .slideShow {
        width: 100%;
        margin: 0 auto 40px
    }
}

@media screen and (max-width:767px) {
    .slideShow {
        width: 100%;
        margin: 0 auto 40px
    }

    .slideShow .slideShow-cut .el-carousel__container {
        position: relative;
        height: 120vw !important
    }

    .slideShow .slideShow-cut .el-carousel__container .slideShow-pic {
        height: 100%;
        position: relative
    }

    .slideShow .slideShow-cut .el-carousel__container .slideShow-pic .bg {
        width: 100%;
        height: 120vw !important;
        object-fit: cover
    }

    .slideShow .slideShow-uncut .el-carousel__container {
        position: relative
    }

    .slideShow .slideShow-uncut .el-carousel__container .slideShow-pic {
        height: 100%;
        position: relative
    }

    .slideShow .slideShow-uncut .el-carousel__container .slideShow-pic .bg {
        width: 100%;
        object-fit: cover
    }
}

@media screen and (min-width:1200px) {
    .TextIntroduces3 {
        width: 100%;
        margin: 0 auto 60px
    }

    .TextIntroduces3 .TextIntroduces3-center {
        max-width: 1180px;
        margin: 0 auto
    }

    .TextIntroduces3 .TextIntroduces3-center .title {
        text-align: center;
        font-size: 24px;
        color: var(--titleFont);
        line-height: 28px;
        margin: 0;
        padding-top: 40px;
        text-transform: uppercase;
        font-weight: 500
    }

    .TextIntroduces3 .TextIntroduces3-center .text {
        font-size: 16px;
        color: var(--textFont);
        margin: 0;
        padding: 20px 0;
        text-align: center
    }

    .TextIntroduces3 .TextIntroduces3-left {
        max-width: 1180px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        padding: 20px 0
    }

    .TextIntroduces3 .TextIntroduces3-left .title {
        text-align: center;
        font-size: 24px;
        color: var(--titleFont);
        line-height: 28px;
        margin: 0;
        flex: 0 0 300px;
        padding-right: 20px;
        text-transform: uppercase;
        font-weight: 500
    }

    .TextIntroduces3 .TextIntroduces3-left .text {
        font-size: 16px;
        color: var(--textFont);
        margin: 0;
        text-indent: 2em
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .TextIntroduces3 {
        width: 100%;
        margin: 0 auto 40px
    }

    .TextIntroduces3 .TextIntroduces3-center {
        max-width: 750px;
        margin: 0 auto
    }

    .TextIntroduces3 .TextIntroduces3-center .title {
        text-align: center;
        font-size: 24px;
        color: var(--titleFont);
        line-height: 28px;
        margin: 0;
        padding-top: 30px;
        text-transform: uppercase;
        font-weight: 500
    }

    .TextIntroduces3 .TextIntroduces3-center .text {
        font-size: 16px;
        color: var(--textFont);
        margin: 0;
        padding: 20px 0;
        text-align: center
    }

    .TextIntroduces3 .TextIntroduces3-left {
        max-width: 750px;
        margin: 0 auto;
        display: flex;
        padding: 20px 0;
        align-items: center
    }

    .TextIntroduces3 .TextIntroduces3-left .title {
        text-align: center;
        font-size: 24px;
        color: var(--titleFont);
        line-height: 28px;
        margin: 0;
        flex: 0 0 200px;
        padding-right: 20px;
        text-transform: uppercase;
        font-weight: 500
    }

    .TextIntroduces3 .TextIntroduces3-left .text {
        font-size: 16px;
        color: var(--textFont);
        margin: 0;
        text-indent: 2em
    }
}

@media screen and (max-width:767px) {
    .TextIntroduces3 {
        width: 100%;
        margin: 0 auto 40px
    }

    .TextIntroduces3 .title {
        text-align: center;
        font-size: 24px;
        color: var(--titleFont);
        line-height: 28px;
        margin: 0;
        padding-top: 20px;
        text-transform: uppercase;
        font-weight: 500
    }

    .TextIntroduces3 .text {
        font-size: 16px;
        color: var(--textFont);
        margin: 0 auto;
        padding: 20px 10px;
        width: calc(100vw - 40px)
    }
}

@media screen and (min-width:1200px) {
    .TextIntroduces {
        width: 100%;
        margin: 0 auto 60px;
        height: 440px;
        background-attachment: fixed;
        background-size: cover;
        background-position: 50%
    }

    .TextIntroduces a {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .TextIntroduces a .TextIntroduces-center {
        max-width: 1180px;
        margin: 0 auto
    }

    .TextIntroduces a .TextIntroduces-center .title {
        text-align: center;
        font-size: 24px;
        line-height: 28px;
        margin-bottom: 40px
    }

    .TextIntroduces a .TextIntroduces-center .text {
        font-size: 16px;
        margin: 0;
        text-align: center
    }

    .TextIntroduces a .TextIntroduces-left {
        max-width: 1180px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        padding: 20px 0
    }

    .TextIntroduces a .TextIntroduces-left .title {
        text-align: center;
        font-size: 24px;
        line-height: 28px;
        margin: 0;
        flex: 0 0 300px;
        padding-right: 20px
    }

    .TextIntroduces a .TextIntroduces-left .text {
        font-size: 16px;
        margin: 0;
        text-indent: 2em
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .TextIntroduces {
        width: 100%;
        margin: 0 auto 40px;
        height: 300px;
        background-attachment: fixed;
        background-size: cover;
        background-position: 50%
    }

    .TextIntroduces a {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .TextIntroduces a .TextIntroduces-center {
        max-width: 750px;
        margin: 0 auto
    }

    .TextIntroduces a .TextIntroduces-center .title {
        text-align: center;
        font-size: 24px;
        line-height: 28px;
        margin-bottom: 30px
    }

    .TextIntroduces a .TextIntroduces-center .text {
        font-size: 16px;
        margin: 0;
        text-align: center
    }

    .TextIntroduces a .TextIntroduces-left {
        max-width: 750px;
        margin: 0 auto;
        display: flex;
        padding: 20px 0;
        align-items: center
    }

    .TextIntroduces a .TextIntroduces-left .title {
        text-align: center;
        font-size: 24px;
        line-height: 28px;
        margin: 0;
        flex: 0 0 200px;
        padding-right: 20px
    }

    .TextIntroduces a .TextIntroduces-left .text {
        font-size: 16px;
        margin: 0;
        text-indent: 2em
    }
}

@media screen and (max-width:767px) {
    .TextIntroduces {
        width: 100%;
        margin: 0 auto 40px;
        height: calc(100vh - 153px);
        background-attachment: fixed;
        background-size: cover;
        background-position: 50%
    }

    .TextIntroduces a {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .TextIntroduces a .title {
        width: calc(100vw - 30px);
        text-align: center;
        font-size: 24px;
        line-height: 28px;
        margin: 0 auto 40px
    }

    .TextIntroduces a .text {
        width: calc(100vw - 30px);
        font-size: 16px;
        margin: 0 auto;
        text-align: center
    }
}

@media screen and (min-width:1600px) {
    .videoSeries {
        max-width: 1180px;
        margin: 0 auto 60px;
        justify-content: center;
        overflow: hidden;
        position: relative
    }

    .videoSeries,
    .videoSeries .video-item3 {
        display: flex;
        flex-flow: wrap
    }

    .videoSeries .video-item3 .video-item {
        flex: 1
    }

    .videoSeries .video-item3 .video-item .video-row {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .videoSeries .video-item3 .video-item .video-row video {
        max-width: 1180px;
        max-height: 660px
    }

    .videoSeries .video-item3 .video-item .video-row .video-row-img {
        position: relative
    }

    .videoSeries .video-item3 .video-item .video-row .video-row-img i {
        position: absolute;
        left: calc(50% - 20px);
        top: calc(50% - 20px);
        font-size: 40px;
        color: var(--white);
        cursor: pointer
    }

    .videoSeries .video-item3 .video-item .video-row img {
        max-width: 1180px;
        max-height: 660px
    }

    .videoSeries .video-item3 .video-item .video-title {
        height: 30px;
        line-height: 30px;
        font-size: 20px;
        text-align: center;
        color: var(--onlyTheme2font)
    }

    .videoSeries .video-item-more {
        display: flex;
        min-width: 580px;
        overflow: hidden;
        position: relative
    }

    .videoSeries .video-item-more .video-more {
        margin-bottom: 30px;
        padding-right: 20px
    }

    .videoSeries .video-item-more .video-more,
    .videoSeries .video-item-more .video-more video {
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 580px;
        max-height: 580px
    }

    .videoSeries .video-item-more .video-more .video-row-img {
        position: relative
    }

    .videoSeries .video-item-more .video-more .video-row-img i {
        position: absolute;
        left: calc(50% - 20px);
        top: calc(50% - 20px);
        font-size: 40px;
        color: var(--white);
        cursor: pointer
    }

    .videoSeries .video-item-more .video-more img {
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 580px;
        max-height: 580px
    }

    .videoSeries .video-item-more .video-title {
        height: 30px;
        line-height: 30px;
        font-size: 20px;
        text-align: center;
        position: absolute;
        bottom: 0;
        width: 580px;
        color: var(--onlyTheme2font)
    }

    .videoSeries .video_button_prev {
        position: absolute;
        left: 0;
        top: 40%;
        transform: translateY(-40%);
        width: 48px;
        height: 48px;
        border-radius: 24px;
        background-color: rgba(0, 0, 0, .3);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .15);
        cursor: pointer;
        opacity: 0
    }

    .videoSeries .video_button_prev i {
        position: absolute;
        left: 12px;
        font-size: 20px;
        font-weight: 900;
        color: var(--white)
    }

    .videoSeries .video_button_next {
        position: absolute;
        right: 0;
        top: 40%;
        transform: translateY(-40%);
        width: 48px;
        height: 48px;
        border-radius: 24px;
        background-color: rgba(0, 0, 0, .3);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .15);
        cursor: pointer;
        opacity: 0
    }

    .videoSeries .video_button_next i {
        position: absolute;
        left: 15px;
        font-size: 20px;
        font-weight: 900;
        color: var(--white)
    }

    .videoSeries:hover .video_button_next,
    .videoSeries:hover .video_button_prev {
        opacity: 1
    }

    .teshe1600 {
        width: 1600px;
        max-width: 1600px
    }

    .teshe1600 video {
        width: 1600px !important;
        max-width: 1600px !important;
        max-height: none !important
    }
}

@media screen and (min-width:1200px) and (max-width:1600px) {
    .videoSeries {
        max-width: 1180px;
        margin: 0 auto 60px;
        justify-content: center;
        overflow: hidden;
        position: relative
    }

    .videoSeries,
    .videoSeries .video-item3 {
        display: flex;
        flex-flow: wrap
    }

    .videoSeries .video-item3 .video-item {
        flex: 1
    }

    .videoSeries .video-item3 .video-item .video-row {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .videoSeries .video-item3 .video-item .video-row video {
        max-width: 1180px;
        max-height: 660px
    }

    .videoSeries .video-item3 .video-item .video-row .video-row-img {
        position: relative
    }

    .videoSeries .video-item3 .video-item .video-row .video-row-img i {
        position: absolute;
        left: calc(50% - 20px);
        top: calc(50% - 20px);
        font-size: 40px;
        color: var(--white);
        cursor: pointer
    }

    .videoSeries .video-item3 .video-item .video-row img {
        max-width: 1180px;
        max-height: 660px
    }

    .videoSeries .video-item3 .video-item .video-title {
        height: 30px;
        line-height: 30px;
        font-size: 20px;
        text-align: center;
        color: var(--onlyTheme2font)
    }

    .videoSeries .video-item-more {
        display: flex;
        min-width: 580px;
        overflow: hidden;
        position: relative
    }

    .videoSeries .video-item-more .video-more {
        margin-bottom: 30px;
        padding-right: 20px
    }

    .videoSeries .video-item-more .video-more,
    .videoSeries .video-item-more .video-more video {
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 580px;
        max-height: 580px
    }

    .videoSeries .video-item-more .video-more .video-row-img {
        position: relative
    }

    .videoSeries .video-item-more .video-more .video-row-img i {
        position: absolute;
        left: calc(50% - 20px);
        top: calc(50% - 20px);
        font-size: 40px;
        color: var(--white);
        cursor: pointer
    }

    .videoSeries .video-item-more .video-more img {
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 580px;
        max-height: 580px
    }

    .videoSeries .video-item-more .video-title {
        height: 30px;
        line-height: 30px;
        font-size: 20px;
        text-align: center;
        position: absolute;
        bottom: 0;
        width: 580px;
        color: var(--onlyTheme2font)
    }

    .videoSeries .video_button_prev {
        position: absolute;
        left: 0;
        top: 40%;
        transform: translateY(-40%);
        width: 48px;
        height: 48px;
        border-radius: 24px;
        background-color: rgba(0, 0, 0, .3);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .15);
        cursor: pointer;
        opacity: 0
    }

    .videoSeries .video_button_prev i {
        position: absolute;
        left: 12px;
        font-size: 20px;
        font-weight: 900;
        color: var(--white)
    }

    .videoSeries .video_button_next {
        position: absolute;
        right: 0;
        top: 40%;
        transform: translateY(-40%);
        width: 48px;
        height: 48px;
        border-radius: 24px;
        background-color: rgba(0, 0, 0, .3);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .15);
        cursor: pointer;
        opacity: 0
    }

    .videoSeries .video_button_next i {
        position: absolute;
        left: 15px;
        font-size: 20px;
        font-weight: 900;
        color: var(--white)
    }

    .videoSeries:hover .video_button_next,
    .videoSeries:hover .video_button_prev {
        opacity: 1
    }
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .videoSeries {
        max-width: 750px;
        margin: 0 auto 40px;
        justify-content: center;
        overflow: hidden;
        position: relative
    }

    .videoSeries,
    .videoSeries .video-item3 {
        display: flex;
        flex-flow: wrap
    }

    .videoSeries .video-item3 .video-item {
        flex: 1
    }

    .videoSeries .video-item3 .video-item .video-row {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .videoSeries .video-item3 .video-item .video-row video {
        max-width: 750px;
        max-height: 420px
    }

    .videoSeries .video-item3 .video-item .video-row .video-row-img {
        position: relative
    }

    .videoSeries .video-item3 .video-item .video-row .video-row-img i {
        position: absolute;
        left: calc(50% - 20px);
        top: calc(50% - 20px);
        font-size: 40px;
        color: var(--white);
        cursor: pointer
    }

    .videoSeries .video-item3 .video-item .video-row img {
        max-width: 750px;
        max-height: 420px
    }

    .videoSeries .video-item3 .video-item .video-title {
        height: 30px;
        line-height: 30px;
        font-size: 20px;
        text-align: center;
        color: var(--onlyTheme2font)
    }

    .videoSeries .video-item-more {
        display: flex;
        min-width: 365px;
        overflow: hidden;
        position: relative
    }

    .videoSeries .video-item-more .video-more {
        margin-bottom: 30px;
        padding-right: 20px
    }

    .videoSeries .video-item-more .video-more,
    .videoSeries .video-item-more .video-more video {
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 365px;
        max-height: 365px
    }

    .videoSeries .video-item-more .video-more .video-row-img {
        position: relative
    }

    .videoSeries .video-item-more .video-more .video-row-img i {
        position: absolute;
        left: calc(50% - 20px);
        top: calc(50% - 20px);
        font-size: 40px;
        color: var(--white);
        cursor: pointer
    }

    .videoSeries .video-item-more .video-more img {
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 365px;
        max-height: 365px
    }

    .videoSeries .video-item-more .video-title {
        height: 30px;
        line-height: 20px;
        font-size: 20px;
        text-align: center;
        position: absolute;
        bottom: 0;
        width: 365px;
        color: var(--onlyTheme2font)
    }

    .videoSeries .video_button_prev {
        position: absolute;
        left: 0;
        top: 40%;
        transform: translateY(-40%);
        width: 48px;
        height: 48px;
        border-radius: 24px;
        background-color: rgba(0, 0, 0, .3);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .15);
        cursor: pointer;
        opacity: 0
    }

    .videoSeries .video_button_prev i {
        position: absolute;
        left: 12px;
        font-size: 20px;
        font-weight: 900;
        color: var(--white)
    }

    .videoSeries .video_button_next {
        position: absolute;
        right: 0;
        top: 40%;
        transform: translateY(-40%);
        width: 48px;
        height: 48px;
        border-radius: 24px;
        background-color: rgba(0, 0, 0, .3);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .15);
        cursor: pointer;
        opacity: 0
    }

    .videoSeries .video_button_next i {
        position: absolute;
        left: 15px;
        font-size: 20px;
        font-weight: 900;
        color: var(--white)
    }

    .videoSeries:hover .video_button_next,
    .videoSeries:hover .video_button_prev {
        opacity: 1
    }
}

@media screen and (max-width:767px) {
    .videoSeries {
        width: calc(100vw - 30px);
        margin: 0 auto 40px
    }

    .videoSeries .video-item {
        margin-bottom: 20px
    }

    .videoSeries .video-item .video-row,
    .videoSeries .video-item .video-row2,
    .videoSeries .video-item .video-row2 video,
    .videoSeries .video-item .video-row video {
        width: 100%
    }

    .videoSeries .video-item .video-row2 .video-row-img,
    .videoSeries .video-item .video-row .video-row-img {
        position: relative
    }

    .videoSeries .video-item .video-row2 .video-row-img i,
    .videoSeries .video-item .video-row .video-row-img i {
        position: absolute;
        left: calc(50% - 20px);
        top: calc(50% - 20px);
        font-size: 40px;
        color: var(--white);
        cursor: pointer
    }

    .videoSeries .video-item .video-row2 img,
    .videoSeries .video-item .video-row img {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%
    }

    .videoSeries .video-item .video-title {
        line-height: 24px;
        font-size: 16px;
        text-align: center;
        margin-bottom: 20px;
        color: var(--onlyTheme2font)
    }

    .videoSeries .video-item-more {
        margin-bottom: 20px
    }

    .videoSeries .video-item-more .video-more {
        width: 100%;
        margin-bottom: 20px
    }

    .videoSeries .video-item-more .video-more video {
        width: 100%
    }

    .videoSeries .video-item-more .video-more .video-row-img {
        position: relative
    }

    .videoSeries .video-item-more .video-more .video-row-img i {
        position: absolute;
        left: calc(50% - 20px);
        top: calc(50% - 20px);
        font-size: 40px;
        color: var(--white);
        cursor: pointer
    }

    .videoSeries .video-item-more .video-more img {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%
    }

    .videoSeries .video-item-more .video-title {
        line-height: 24px;
        font-size: 16px;
        text-align: center;
        margin-bottom: 20px;
        color: var(--onlyTheme2font)
    }

    .videoSeries .video_button_next,
    .videoSeries .video_button_prev {
        display: none
    }
}

:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: red;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --black: #000;
    --gray: #f9f9f9;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #eaecee;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --TextIntroducesBGC: #f7ece3;
    --hoverMenu: #ffdad2;
    --border: #bfbfbf;
    --contactsP: #8c8c8c;
    --Facebook: #3b77f1;
    --linkedin: #2e66c2;
    --ins: #f6154c;
    --youtube: #f61702;
    --whatsapp: #3bc34d;
    --twitter: #41a1f2;
    --Pinterest: #e61522;
    --hot: #e65449;
    --hotBGC: #fff;
    --star: #e05248;
    --b222: #222;
    --f567: #f5f6f7;
    --themeBGC: #f5f5f5;
    --themeLine: #e7e7e7;
    --button: #49b6b8;
    --buttonFont: #fff;
    --lightButton: #d6eff0;
    --buttonHover: #379799;
    --Menu: #fff;
    --MenuFont: #000;
    --MenuLine: hsla(0, 0%, 100%, 0.4);
    --footBGC: #e1e1e1;
    --footPhoneChoose: #49b6b8;
    --footPhoneUnChoose: #2b2c3c;
    --footPhone: #c7c7c7;
    --collectionBanner: #fff;
    --crumbs: #777;
    --type1: #fff;
    --type2: #f7f7f7;
    --titleFont: #121212;
    --textFont: #666;
    --footFont: #121212;
    --IMS: rgba(32, 175, 179, 0);
    --IMSHover: #20afb3
}

body {
    color: var(--textFont);
    margin: 0
}

.home {
    background-color: var(--themeBGC)
}

.button {
    appearance: none;
    display: inline-block;
    width: auto;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: normal;
    background-color: var(--button);
    margin: 0;
    font-size: 16px;
    line-height: 40px;
    border-radius: 20px;
    text-align: center;
    padding: 0 24px
}

.button,
.button:hover,
.button a {
    color: var(--white)
}

.button:hover {
    background-color: var(--buttonHover)
}

.button:hover a {
    color: var(--white)
}

.productTitle {
    color: var(--titleFont);
    line-height: 20px;
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    margin-bottom: 15px !important;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-align: center
}

.productTitle:hover {
    color: var(--button)
}

.productPrice {
    color: var(--titleFont);
    line-height: 20px;
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    margin-bottom: 15px !important;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-align: center
}

a {
    text-decoration: none;
    color: var(--black)
}

.el-breadcrumb__inner a:hover {
    color: var(--button)
}

.el-radio__input.is-checked .el-radio__inner {
    border-color: var(--button);
    background: var(--white)
}

.el-radio__inner:after {
    width: 6px;
    height: 6px;
    background-color: var(--button)
}

.el-select-dropdown__item.selected {
    color: var(--button);
    font-weight: 700
}

.el-carousel__button {
    display: block;
    opacity: .48;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    border: none;
    outline: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    -webkit-transition: .3s;
    transition: .3s
}

.el-pager,
.el-pager li,
.el-pagination .btn-next,
.el-pagination .btn-prev,
.el-pagination button:disabled {
    background-color: transparent
}

h1:not(.product-company-detail h1, .blogRichText h1),
h2:not(.product-company-detail h2, .blogRichText h2),
h3:not(.product-company-detail h3, .blogRichText h3),
h4:not(.product-company-detail h4, .blogRichText h4),
h5:not(.product-company-detail h5, .blogRichText h5),
h6:not(.product-company-detail h6, .blogRichText h6),
p:not(.product-company-detail p, .blogRichText p),
span:not(.product-company-detail span, .blogRichText span) {
    margin: 0;
    font-weight: 400
}

p {
    margin: 0
}

.el-dropdown-menu {
    max-height: 400px;
}

@media screen and (min-width:1200px) {
    main {
        min-height: calc(100vh - 439px)
    }

    .el-carousel__arrow {
        border: none;
        outline: 0;
        padding: 0;
        margin: 0;
        height: 100%;
        width: 80px;
        cursor: pointer;
        -webkit-transition: .3s;
        transition: .3s;
        border-radius: 0;
        background-color: rgba(31, 45, 61, 0);
        color: #fff;
        opacity: .8;
        position: absolute;
        top: 50%;
        z-index: 10;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        text-align: center;
        font-size: 40px;
        font-weight: 900
    }

    .el-carousel__arrow:hover {
        background-color: rgba(31, 45, 61, 0);
        opacity: 1
    }

    .el-carousel__arrow--right {
        right: 0
    }

    .el-carousel__arrow--left {
        left: 0
    }
}

@media screen and (min-width:768px) and (max-width:1199px) {
    main {
        min-height: calc(100vh - 389px)
    }

    .el-carousel__arrow {
        border: none;
        outline: 0;
        padding: 0;
        margin: 0;
        height: 100%;
        width: 80px;
        cursor: pointer;
        -webkit-transition: .3s;
        transition: .3s;
        border-radius: 0;
        background-color: rgba(31, 45, 61, 0);
        color: #fff;
        opacity: .8;
        position: absolute;
        top: 50%;
        z-index: 10;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        text-align: center;
        font-size: 40px;
        font-weight: 900
    }

    .el-carousel__arrow:hover {
        background-color: rgba(31, 45, 61, 0);
        opacity: 1
    }

    .el-carousel__arrow--right {
        right: 0
    }

    .el-carousel__arrow--left {
        left: 0
    }
}

@media screen and (max-width:767px) {
    main {
        min-height: calc(100vh - 567px)
    }

    .el-carousel__arrow {
        border: none;
        outline: 0;
        padding: 0;
        margin: 0;
        height: 100%;
        width: 60px;
        cursor: pointer;
        -webkit-transition: .3s;
        transition: .3s;
        border-radius: 0;
        background-color: rgba(31, 45, 61, 0);
        color: #fff;
        opacity: .8;
        position: absolute;
        top: 50%;
        z-index: 10;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        text-align: center;
        font-size: 28px;
        font-weight: 900
    }

    .el-carousel__arrow:hover {
        background-color: rgba(31, 45, 61, 0);
        opacity: 1
    }

    .el-carousel__arrow--right {
        right: 0
    }

    .el-carousel__arrow--left {
        left: 0
    }
}

@font-face {
    font-family: iconfont;
    src: url(../font/iconfont.9ac4c701.woff2) format("woff2"), url(../font/iconfont.ca697ff1.woff) format("woff"), url(../font/iconfont.72b12020.ttf) format("truetype")
}

.iconfont {
    font-family: iconfont !important;
    font-size: 18px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.iconxunpandan:before {
    content: "\e776"
}

.iconjia1:before {
    content: "\e624"
}

.iconjia:before {
    content: "\e641"
}

.iconTick:before {
    content: "\e6c4"
}

.iconpp_fc_hl:before {
    content: "\e739"
}

.iconLogistics:before {
    content: "\e737"
}

.iconDelivery:before {
    content: "\e738"
}

.iconprompt_filling:before {
    content: "\e703"
}

.iconSuccess:before {
    content: "\e734"
}

.iconicon-test:before {
    content: "\e604"
}

.iconfacebook1:before {
    content: "\e634"
}

.iconinstagram-fill:before {
    content: "\e768"
}

.icontwitter:before {
    content: "\ec5f"
}

.iconpinterest:before {
    content: "\e640"
}

.iconYoutube:before {
    content: "\e62d"
}

.iconwhatsapp-fill:before {
    content: "\eeb2"
}

.iconlinkedin1:before {
    content: "\e8d5"
}

.iconarrow-up_solid:before {
    content: "\e6c2"
}

.iconarrow-down_solid:before {
    content: "\e6c3"
}

.icons-delete:before {
    content: "\e6da"
}

.icons-drag:before {
    content: "\e6dc"
}

.iconRightarrow:before {
    content: "\e72e"
}

.iconLeftarrow:before {
    content: "\e72f"
}

.iconsousuo1:before {
    content: "\e609"
}

.iconyonghu:before {
    content: "\e685"
}

.icongouwudai:before {
    content: "\e725"
}

.iconFourgrid:before {
    content: "\e726"
}

.iconNinegrid:before {
    content: "\e727"
}

.iconSixteengrid:before {
    content: "\e728"
}

.iconyuandianzhong:before {
    content: "\e758"
}

.iconzan:before {
    content: "\e672"
}

.icon21file:before {
    content: "\e6c1"
}

.iconCome:before {
    content: "\e722"
}

.iconGo:before {
    content: "\e721"
}

.icongouxuan-youxiajiaogouxuan:before {
    content: "\e77c"
}

.iconcompany:before {
    content: "\e71f"
}

.iconhome:before {
    content: "\e720"
}

.iconarrow-down:before {
    content: "\e71b"
}

.iconNav:before {
    content: "\e71c"
}

.iconarrow-up:before {
    content: "\e71d"
}

.iconmessenger:before {
    content: "\e71e"
}

.iconphone:before {
    content: "\e718"
}

.iconEmail:before {
    content: "\e719"
}

.iconaddress:before {
    content: "\e71a"
}

.iconic_Slides:before {
    content: "\e6be"
}

.iconic_Multilink:before {
    content: "\e6bf"
}

.iconic_Graphicseries:before {
    content: "\e6c0"
}

.iconSelectionbox_solid:before {
    content: "\e6bd"
}

.iconSelectionbox:before {
    content: "\e6ce"
}

.iconic_shop_company:before {
    content: "\e6b4"
}

.iconic_shop_image:before {
    content: "\e6b5"
}

.iconic_shop_BasicInformation:before {
    content: "\e6b6"
}

.iconic_shop_ContactUs:before {
    content: "\e6b7"
}

.iconic_shop_Productgrouping:before {
    content: "\e6b8"
}

.iconic_shop_colour:before {
    content: "\e6b9"
}

.iconic_shop_Socialmedia:before {
    content: "\e6ba"
}

.iconic_shop_Websiteicon:before {
    content: "\e6bb"
}

.iconic_shop_Plate:before {
    content: "\e6bc"
}

.iconFacebook:before {
    content: "\e677"
}

.iconGoogle:before {
    content: "\e6ca"
}

.iconic_shop_return1:before {
    content: "\e6b3"
}

.iconic_shop_upload:before {
    content: "\e6b2"
}

.iconic_remind:before {
    content: "\e7a5"
}

.iconic_shop_shutdown:before {
    content: "\e6b1"
}

.iconic_Radio_Notselected:before {
    content: "\e6af"
}

.iconic_Radio_Selected:before {
    content: "\e6b0"
}

.iconic_shop_Collapse:before {
    content: "\e6ae"
}

.iconic_iphone_filter:before {
    content: "\e6ad"
}

.iconic_shop_Preview:before {
    content: "\e6aa"
}

.iconic_shop_Preview_ff:before {
    content: "\e6ac"
}

.iconic_shop_drag:before {
    content: "\e6ab"
}

.iconic_shop_right:before {
    content: "\e6a8"
}

.iconic_shop_left:before {
    content: "\e6a9"
}

.iconic_video:before {
    content: "\e695"
}

.iconic_shop_map:before {
    content: "\e696"
}

.iconic_shop_certificate:before {
    content: "\e697"
}

.iconic_shop_return:before {
    content: "\e698"
}

.iconic_shop_Nextstep:before {
    content: "\e699"
}

.iconic_shop_iPhone:before {
    content: "\e69a"
}

.iconic_shop_blog:before {
    content: "\e69b"
}

.iconic_shop_fullscreen:before {
    content: "\e69c"
}

.iconic_shop_Graphic:before {
    content: "\e69d"
}

.iconic_shop_download:before {
    content: "\e69e"
}

.iconic_shop_video:before {
    content: "\e69f"
}

.iconic_shop_Addto:before {
    content: "\e6a0"
}

.iconic_shop_mac:before {
    content: "\e6a1"
}

.iconic_shop_Carousel:before {
    content: "\e6a2"
}

.iconic_shop_Footer:before {
    content: "\e6a3"
}

.iconic_shop_ProductSeries:before {
    content: "\e6a4"
}

.iconic_shop_Header:before {
    content: "\e6a5"
}

.iconic_shop_text:before {
    content: "\e6a6"
}

.iconic_shop_Featuredproducts:before {
    content: "\e6a7"
}

.iconic_delete_file:before {
    content: "\e601"
}

.iconic_youtube:before {
    content: "\e741"
}

.iconic_whatsapp:before {
    content: "\e7ba"
}

.iconic_linkedin:before {
    content: "\e762"
}

.iconic_Pinterest:before {
    content: "\e766"
}

.iconic_Facebook:before {
    content: "\e808"
}

.iconic_twitter1:before {
    content: "\e809"
}

.iconic_ins:before {
    content: "\e80a"
}

.iconHome_Cart:before {
    content: "\e689"
}

.iconHome_MyElites:before {
    content: "\e68a"
}

.iconHome_Share:before {
    content: "\e68c"
}

.iconmoblie_more:before {
    content: "\e691"
}

.iconmoblie_search:before {
    content: "\e692"
}

.iconmobile_filter:before {
    content: "\e694"
}

.change {
    height: 100vh;
    overflow: hidden
}

.changs {
    overflow: none;
    height: none
}

@media screen and (min-width:768px) {
    .pd36 {
        padding-top: 36px
    }
}