* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li,
ol,
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a,
a:hover,
a:link,
a:visited {
    text-decoration: none;

    color: inherit;
}

p {
    padding: 0;
    margin: 0;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

input,
textarea {
    border: none;
    resize: none;
    outline: none;
}

.img-box {
    position: relative;
    z-index: 1;
    display: block;
    overflow: hidden;
    height: 0;
    padding-bottom: 100%;
}

.img-box iframe,
.img-box video,
.img-box img {
    position: absolute;
    top: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 100%;
    transition: all .5s;
    object-fit: cover;
}

.fszero {
    font-size: 0;

    overflow: hidden;

    width: 0;
    height: 0;
}

.fszero h1 {
    margin: 0;
}

[lang=zh-CN] .share-cn {
    display: block;
}

[lang=zh-CN] .share-other {
    display: none;
}

.a2a_kit {
    display: inline-block;

    vertical-align: middle;
}

@-ms-viewport {
    width: auto !important;
}

li,
ol,
ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

a,
a:hover,
a:link,
a:visited {
    text-decoration: none;
    color: inherit;
}

input[type=number] {
    -moz-appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    margin: 0;

    -webkit-appearance: none;
}

select,
button,
input,
textarea {
    border: none;
    outline: none;
}

a[data-fancybox] {
    outline: none;
}

a[data-fancybox] img {
    outline: none !important;
}

.slick-slide {
    outline: none;
}

.slick-slide a {
    outline: none !important;
}

img[data-lazy] {
    background: url(../images/ajax-loader.gif) no-repeat center;
}

img.lazy {
    min-width: 1px;
    min-height: 1px;
    background: url(../images/ajax-loader.gif) no-repeat center;
}

.lazy {
    background-image: url(../images/ajax-loader.gif);
    background-repeat: no-repeat;
    background-position: center;
}

.loaded {
    background-size: cover;
}

@media (min-width: 1200px) {
    .wow {
        visibility: hidden;
    }
}

.lazy {
    background-image: url(../images/ajax-loader.gif);
    background-repeat: no-repeat;
    background-position: center;
}

.art-video-player .art-bottom {
    display: none !important;
}

.art-mask {
    display: none !important;
}


.breadcrumb {
    margin-bottom: 0;
}


.editor-content p {
    font-size: 16px;
    line-height: 1.875;

    margin: 0;
}

@media (max-width: 768px) {
    .editor-content p {
        font-size: 14px;
    }
}

.editor-content ul,
.editor-content ol {
    padding-left: 1em;
}

.editor-content ul li,
.editor-content ol li {
    list-style: inherit;
}

.editor-content .table-box {
    font-size: 16px;
    line-height: 1.875;

    overflow: auto;

    width: 100%;
    max-width: 100%;
}

@media (max-width: 991px) {
    .editor-content .table-box {
        font-size: 14px;
    }
}

.editor-content .table-box table {
    line-height: 1.2;

    width: 100%;
    max-width: 100%;

    border-spacing: 0;
    border-collapse: collapse;
}

.editor-content .table-box table tr,
.editor-content .table-box table td,
.editor-content .table-box table th {
    width: 25% !important;
    height: auto !important;
}


.editor-content .table-box table td,
.editor-content .table-box table th {
    font-weight: 400;

    padding: 15px 20px !important;

    border: 1px solid #e6e6e6;
}

@media (max-width: 480px) {

    .editor-content .table-box table td,
    .editor-content .table-box table th {
        padding: 8px !important;
    }
}

.editor-content .table-box table tr p,
.editor-content .table-box table tr span {
    margin: 0 !important;
    padding: 0 !important;

    background: none !important;
}

.editor-content .table-box table th {
    text-align: center;
}

.auto-adjust-img img {
    max-width: 100% !important;
    height: auto !important;
}

.auto-adjust-img.is-mobile img {
    max-width: 100% !important;
    height: auto !important;
    margin: 5px 0;
}

.auto-adjust-img p.contains-pictures {
    font-size: 0 !important;

    overflow-x: hidden;

    margin: 0 -5px !important;
    padding: 0;
}

@media (min-width: 768px) {
    .auto-adjust-img p.contains-pictures {
        white-space: nowrap;
    }
}

.auto-adjust-img p.contains-pictures>img {
    display: inline-block;

    margin: 5px;
}

.table-box {
    font-size: 16px;
    line-height: 1.4;
    color: #000;
    font-weight: 400;
    overflow: auto;
    width: 100%;
    max-width: 100%;
}


.table-box table {
    line-height: 1.2;
    width: 100%;
    max-width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

.table-box table tr,
.table-box table td,
.table-box table th {
    width: auto;
    height: auto;
}


.table-box table td,
.table-box table th {
    padding: 20px;
    border: 1px solid #e6e6e6;
}



.table-box table tr p,
.table-box table tr span {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}

.table-box table td,
.table-box table th {
    text-align: left;
}

.table-box table .firstRow td {
    background-color: var(--c);
    color: #fff;
}

// .table-box table tr td:first-child{
//     padding-left: 93px;
// }
// .table-box table tr:nth-child(2n) {
//     background-color: #FAFAFA;
// }

.table-box table.rowspan1 tr:first-child,
.table-box table.rowspan2 tr:nth-child(1),
.table-box table.rowspan2 tr:nth-child(2),
.table-box table.rowspan3 tr:nth-child(2),
.table-box table.rowspan3 tr:nth-child(3),
.table-box table.rowspan4 tr:nth-child(2),
.table-box table.rowspan4 tr:nth-child(3),
.table-box table.rowspan4 tr:nth-child(4),
.table-box table.rowspan5 tr:nth-child(2),
.table-box table.rowspan5 tr:nth-child(3),
.table-box table.rowspan5 tr:nth-child(4),
.table-box table.rowspan5 tr:nth-child(5) {
    background-color: var(--c);
    color: #fff;
    font-weight: bold;
}

@media (max-width: 991px) {
    .table-box {
        font-size: 14px;
    }
}

@media (max-width: 480px) {

    .table-box table td,
    .table-box table th {
        padding: 8px !important;
    }
}

label {
    width: 100%;
}

.box-follow .img-box>img {
    display: none !important;
    height: auto;
}

.box-follow iframe[src=''],
.box-follow iframe[data-src=''] {
    display: none;
    border: 1px solid #000;
}

.box-follow iframe[src='']+img,
.box-follow iframe[data-src='']+img {
    display: block !important;
}

body {
    font-family: 'Archivo', Arial, Helvetica, 'WenQuanYi Micro Hei', 'Heiti SC', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -ms-scroll-chaining: none;
    overscroll-behavior: none;
    width: 100%;
    line-height: 1.5;
    font-size: 16px;
    font-weight: 400;
    overflow-x: hidden;
    --bs-body-color: #121212;
    color: #121212;
}



@font-face {
    font-family: 'Archivo';
    font-weight: 400;
    font-style: normal;
    src: local('Archivo Regular'), local('Archivo-Regular'), url('../../app/fonts/Archivo-Regular.woff2') format('woff2'), url('../../app/fonts/Archivo-Regular.woff') format('woff'), url('../../app/fonts/Archivo-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Archivo';
    font-weight: 500;
    font-style: normal;
    src: local('Archivo Medium'), local('Archivo-Medium'), url('../../app/fonts/Archivo-Medium.woff2') format('woff2'), url('../../app/fonts/Archivo-Medium.woff') format('woff'), url('../../app/fonts/Archivo-Medium.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Archivo';
    font-weight: 600;
    font-style: normal;
    src: local('Archivo SemiBold'), local('Archivo-SemiBold'), url('../../app/fonts/Archivo-SemiBold.woff2') format('woff2'), url('../../app/fonts/Archivo-SemiBold.woff') format('woff'), url('../../app/fonts/Archivo-SemiBold.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Archivo';
    font-weight: 700;
    font-style: normal;
    src: local('Archivo ExtraBold'), local('Archivo-ExtraBold'), url('../../app/fonts/Archivo-ExtraBold.woff2') format('woff2'), url('../../app/fonts/Archivo-ExtraBold.woff') format('woff'), url('../../app/fonts/Archivo-ExtraBold.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Archivo';
    font-weight: 800;
    font-style: normal;
    src: local('Archivo ExtraBoldItalic'), local('Archivo-ExtraBoldItalic'), url('../../app/fonts/Archivo-ExtraBoldItalic.woff2') format('woff2'), url('../../app/fonts/Archivo-ExtraBoldItalic.woff') format('woff'), url('../../app/fonts/Archivo-ExtraBoldItalic.ttf') format('truetype');
    font-display: swap;
}







.row {
    --bs-gutter-x: 1.875rem;
}

:root {
    /* // scroll-behavior: unset; */
    --c: #188E42;
    --d164: 164px;
    --d160: 160px;
    --d150: 150px;
    --d140: 140px;
    --d135: 135px;
    --d130: 130px;
    --d128: 128px;
    --d120: 120px;
    --d115: 115px;
    --d110: 110px;
    --d105: 105px;
    --d100: 100px;
    --d96: 96px;
    --d93: 93px;
    --d90: 90px;
    --d88: 88px;
    --d84: 84px;
    --d80: 80px;
    --d70: 70px;
    --d68: 68px;
    --d60: 60px;
    --d58: 58px;
    --d56: 56px;
    --d55: 55px;
    --d50: 50px;
    --d48: 48px;
    --d46: 46px;
    --d44: 44px;
    --d40: 40px;
    --d37: 37px;
    --d35: 35px;
    --d34: 34px;
    --d32: 32px;
    --d30: 30px;
    --d26: 26px;
    --d25: 25px;
    --d24: 24px;
    --d22: 22px;
    --d20: 20px;
    --d18: 18px;
    --d16: 16px;
    --d15: 15px;
    --d14: 14px;
    --d12: 12px;
    --d10: 10px;
    --d8: 8px;
    --80: 80px;
    --70: 70px;
    --50: 50px;
    --48: 48px;
    --44: 44px;
    --40: 40px;
    --36: 36px;
    --32: 32px;
    --30: 30px;
    --26: 26px;
    --24: 24px;
    --22: 22px;
    --20: 20px;
    --18: 18px;
    --16: 16px;
    --15: 15px;
    --14: 14px;
    --13: 13px;
    --12: 12px;
}

.title {
    font-size: var(--50);
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
}

.title2 {
    font-size: var(--18);
    line-height: 1.11111;
    color: var(--c);
    text-transform: uppercase;
}

.title3 {
    font-size: var(--70);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}


.text {
    font-size: var(--18);
    line-height: 1.77778;
    color: #444444;
}

.text16 {
    font-size: var(--16);
    line-height: 1.875;
}

.header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10001;
    box-shadow: (0px 4px 10px rgba(0, 0, 0, 0.05));

    .header-box1 {
        background-color: var(--c);

        .header-content1 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--d12) 0;

            .header-text {
                font-size: var(--14);
                line-height: 1;
                color: #fff;
            }
        }
    }

    .header-box {
        background-color: #fff;

        .header-content {
            height: 90px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .header-left {
                display: flex;
                align-items: center;
                height: 100%;

                .header-nav1 {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 100%;

                    .header-nav2>a {
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }

                    .header-nav2 {
                        padding-right: var(--d60);
                        font-weight: 600;
                        font-size: var(--18);
                        line-height: 1.11111;
                        height: 100%;
                        transition: all .5s;

                        &:hover {
                            color: var(--c);

                            .tires-menu {
                                opacity: 1;
                                visibility: visible;
                                transition: all .5s;
                            }
                        }

                        &:last-child {
                            padding-right: 0;
                        }
                    }

                    .action {
                        color: var(--c);
                    }
                }
            }

            .logo {
                height: 40px;
                margin-right: var(--d120);

                a {
                    display: flex;
                    height: 100%;
                    justify-content: center;
                    align-items: center;

                    img {
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }

            .header-but {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 100%;

                .header-cart {
                    text-transform: capitalize;
                    font-weight: 500;
                    line-height: 1;
                    font-size: var(--18);
                    margin-right: var(--d30);
                    padding-right: var(--d30);
                    position: relative;

                    &::after {
                        width: 1px;
                        height: 12px;
                        background-color: #E0E0E0;
                        position: absolute;
                        top: 50%;
                        right: 0;
                        transform: translateY(-50%);
                        content: '';
                    }
                }

                .header-search {
                    height: 100%;
                    display: flex;
                    align-items: center;
                    position: relative;

                    .search-con {
                        cursor: pointer;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        position: relative;
                        font-size: var(--18);
                        font-weight: 500;
                        color: #666666;

                        .search-icon {
                            border-radius: 50%;
                            background-color: #fff;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            margin-right: 8px;
                        }

                        i {
                            font-size: 22px;
                            color: #121212;
                        }
                    }

                    .search {
                        position: absolute;
                        right: 0%;
                        bottom: 0;
                        transform: translate(0%, 100%) rotateX(-50deg);
                        transform-origin: top;
                        opacity: 0;
                        transition: all .5s;
                        background-color: #fff;
                        width: 20vw;
                        min-width: 200px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        padding: 10px;
                        box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px 1px;
                        visibility: hidden;

                        .search-box {
                            width: 100%;
                            border: 1px solid #008DC2;
                            padding: 10px;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            z-index: 100;

                            .input-text {
                                width: 80%;
                                font-size: 14px;
                                font-weight: 400;
                            }

                            .submit {
                                background-color: transparent;
                                border: none;
                                padding-right: 10px;
                            }
                        }
                    }

                    .open {
                        opacity: 1;
                        transform: translate(0%, 100%);
                        visibility: visible;
                    }

                }

                .header-language {
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .header-language-icon {
                        margin-right: var(--d12);

                        i {
                            font-size: var(--18);
                        }
                    }

                    .header-language-content {
                        font-size: var(--15);
                        line-height: 1;

                        a {
                            transition: all .5s;

                            &:hover {
                                color: var(--c);
                            }
                        }

                        .action {
                            color: var(--c);
                        }
                    }
                }
            }
        }
    }
}


@media (min-width: 1201px) {
    .s-list {
        display: none;
    }

    .header-nav {
        height: 100%;
        display: flex !important;
        align-items: flex-end;

        .header-list {
            display: flex;
            height: 100%;

            .header-list2 {
                font-size: var(--15);
                line-height: 1;
                font-weight: 500;
                color: #fff;
                position: relative;
                margin-right: 34px;
                transition: all .5s;

                &:hover {
                    &::after {
                        width: 100%;
                    }

                    .header-list3 {
                        a {
                            text-decoration: underline;
                        }
                    }
                }

                &::after {
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    transition: all .5s;
                    position: absolute;
                    width: 0%;
                    height: 2px;
                    background-color: #fff;
                    content: '';
                }

                .header-list3 {
                    height: 100%;
                }

                .more-button {
                    display: none;
                }

                a {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 100%;
                }

                &:hover {
                    text-decoration: unset;
                }

                &:last-child {
                    margin-right: 0;
                }

                &:hover {
                    .more {
                        opacity: 1;
                        transform: translate(-50%, 100%);
                        visibility: visible;

                        .more-1-list {
                            a {
                                &:hover {
                                    color: var(--c);
                                }
                            }
                        }
                    }

                }
            }

            .action {
                &::after {
                    width: 100%;
                }

                .header-list3 {
                    a {
                        text-decoration: underline;
                    }
                }
            }
        }
    }

    .more {
        visibility: hidden;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 100%) rotateX(-50deg);
        transform-origin: top;
        opacity: 0;
        transition: all .5s;
        background-color: #fff;
        box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.15);
        min-width: 100%;
        padding: 10px;
        z-index: 10;

        .more-title {
            white-space: nowrap;
            width: 100%;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #003366;
            font-weight: 500;
            font-size: 18px;
            color: #fff;
            padding: 0 15px;
            transition: all .5s;
            border-radius: 5px;

            &:hover {
                background-color: var(--c);
            }

            &:nth-child(3) {
                background-color: var(--c);

                &:hover {
                    background-color: #ff5900dd;
                }
            }
        }

        .more-1-list {
            display: flex;
            justify-content: stretch;
            flex-direction: column;

            .more-1-list2 {
                width: 100%;
                position: relative;
                font-size: 14px;
                font-weight: 500;
                color: #003366;

                .more2 {
                    max-width: 300px;
                    position: absolute;
                    right: 0;
                    top: 0;
                    transform: translate(100%, 0) rotateY(-50deg);
                    visibility: hidden;
                    transform-origin: left;
                    opacity: 0;
                    transition: all 0.5s;
                    background-color: #fff;
                    box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.15);
                }

                &:hover {
                    .more2 {
                        opacity: 1;
                        transform: translate(100%, 0) rotateY(0deg);
                        visibility: visible;
                    }
                }

                a {
                    padding: 10px 20px;
                    white-space: nowrap;
                    display: block;
                }
            }
        }
    }

    .tires-menu {
        position: fixed !important;
        top: 129px;
        left: 50%;
        transform: translate(-50%, 0%);
        background-color: #F5F5F5;
        transition: all .5s;
        opacity: 0;
        visibility: hidden;



        .tires-menu-list {
            --bs-gutter-x: 0.25rem;

            .tires-menu-list2 {
                position: relative;

                &::after {
                    transition: all .5s;
                    opacity: 0;
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    display: inline-block;
                    width: 0px;
                    height: 0px;
                    content: "";
                    transform: translate(-50%, 100%);
                    vertical-align: middle;
                    border-width: 10px 12px 0px 12px;
                    border-style: solid;
                    border-color: var(--c) transparent transparent transparent;
                    z-index: 10;
                }

                .tires-menu-list3 {
                    padding: var(--d20) 0;
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background-color: #fff;
                    cursor: pointer;
                    transition: all .5s;

                    .tires-menu-list-icon {
                        width: 40px;

                        img {
                            transition: all .5s;
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }

                    .tires-menu-list-text {
                        position: relative;
                        padding-left: var(--d24);
                        margin-left: var(--d24);

                        &::after {
                            width: 1px;
                            height: 50px;
                            background-image: url('../img/ling2.png');
                            background-size: cover;
                            background-repeat: no-repeat;
                            background-position: center center;
                            position: absolute;
                            left: 0;
                            top: 50%;
                            transform: translateY(-50%);
                            content: '';
                        }

                        .tires-menu-title {
                            transition: all .5s;
                            font-size: var(--20);
                            line-height: 1.1;
                            margin-bottom: var(--d10);
                            font-weight: 800;
                            color: #121212;
                        }

                        .tires-menu-text {
                            transition: all .5s;
                            font-size: var(--13);
                            line-height: 14px;
                            color: #121212;
                        }
                    }
                }
            }

            .action {
                &::after {
                    opacity: 1;
                }

                .tires-menu-list3 {
                    background-color: var(--c);

                    .tires-menu-list-icon {
                        img {
                            filter: brightness(0) invert(1);
                        }
                    }

                    .tires-menu-list-text {
                        &::after {
                            background-image: url('../img/ling.png') !important;
                        }

                        .tires-menu-title {
                            color: #fff;
                        }

                        .tires-menu-text {
                            color: #fff;
                        }
                    }
                }

            }
        }

        .tires-menu-content {
            .swiper-wrapper {
                align-items: stretch;

                .swiper-slide {
                    height: auto;

                    .tiresmenu-box {
                        height: 100%
                    }

                    .tiresmenu-box1 {
                        display: flex;
                        justify-content: space-between;

                        .tiresmenu-form {
                            width: calc(100% - 468px);
                            padding: var(--d60) var(--d100);

                            li {
                                margin-bottom: var(--d10);

                                &:last-child {
                                    margin-bottom: var(--d20);
                                }
                            }

                            label {
                                position: relative;

                                &::after {
                                    width: 12px;
                                    height: 12px;
                                    content: "\e87e";
                                    position: absolute;
                                    right: var(--d24);
                                    top: 50%;
                                    transform: translateY(-50%);
                                    font-family: 'iconfont' !important;
                                    font-size: 12px;
                                    pointer-events: none;
                                    color: #121212;
                                }

                            }

                            .input-box {
                                padding: var(--d18) var(--d24);
                                width: 100%;
                                font-size: var(--16);
                                background-color: #fff;
                            }

                            select {
                                appearance: none;
                                -moz-appearance: none;
                                -webkit-appearance: none;
                            }
                        }

                        .tiresmenu-img {
                            width: 468px;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }

                        .submit {
                            position: relative;
                            left: 50%;
                            transform: translateX(-50%);
                        }
                    }

                    .tiresmenu-box2 {
                        padding: 0 var(--d120);
                        padding-top: var(--d120);

                        .type-tiresbox {
                            .type-tiresbox2 {
                                padding: 150px var(--d24) var(--d18);
                            }

                            .type-title {
                                width: auto;
                                color: #121212;
                            }
                        }
                    }

                    .tiresmenu-box3 {
                        padding: var(--d40) var(--d90) var(--d50);

                        .img-box {
                            padding-bottom: 85.714286%;
                        }

                        .tiresmenu-list {
                            margin-bottom: calc(-1 * var(--d20));
                            padding-bottom: var(--d30);

                            .tiresmenu-list2 {
                                margin-bottom: var(--d20);

                                .tiresmenu-list3 {
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;

                                    &:hover {
                                        img {
                                            transform: scale(1.1);
                                        }

                                        .tiresmenu-title {
                                            h3 {
                                                color: var(--c);
                                            }
                                        }
                                    }

                                    .tiresmenu-img {
                                        width: 39.661682%;
                                    }

                                    .tiresmenu-textbox {
                                        width: 60.338318%;

                                        .tiresmenu-title {
                                            h3 {
                                                font-size: var(--24);
                                                line-height: 1.08333;
                                                margin-bottom: var(--d10);
                                                font-weight: 800;
                                                transition: all .5s;
                                            }

                                            color: #000;
                                        }

                                        .tiresmenu-text {
                                            font-size: 13px;
                                            line-height: 16px;
                                            color: #000;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 1550px) and (min-width: 1350px) {}

@media (max-width: 1350px) and (min-width: 1201px) {}



@media (max-width: 1200px) {
    .tires-menu {
        max-width: 100vw !important;
        position: fixed !important;
        top: 0 !important;
        left: 0;
        transform: translateX(101%);
        width: 100vw;
        height: 100vh;
        background-color: #F5F5F5;
        z-index: 11;
        padding: var(--d40) !important;
        transition: all .5s;

        .tires-menu-list {
            display: none;
        }

        .tires-menu-content {
            margin-top: 90px;
        }

        .tiresmenu-box {
            height: calc(100vh - 90px);
            padding-bottom: 40px;
            overflow-y: scroll;
        }

        .type-tiresbox .type-img {
            width: 130px;
        }


        .tiresmenu-box1 {
            display: flex;
            justify-content: space-between;
            flex-direction: column;

            .tiresmenu-form {
                width: 100%;

                label {
                    position: relative;

                    &::after {
                        width: 12px;
                        height: 12px;
                        content: "\e87e";
                        position: absolute;
                        right: var(--d24);
                        top: 50%;
                        transform: translateY(-50%);
                        font-family: 'iconfont' !important;
                        font-size: 12px;
                        pointer-events: none;
                        color: #121212;
                    }

                }

                .input-box {
                    padding: var(--d18) var(--d24);
                    width: 100%;
                    font-size: var(--16);
                    background-color: #fff;
                    margin-bottom: var(--d10);

                    &:last-child {
                        margin-bottom: var(--d20);
                    }
                }

                select {
                    appearance: none;
                    -moz-appearance: none;
                    -webkit-appearance: none;
                }
            }

            .tiresmenu-img {
                width: 468px;
                max-width: 100%;
                margin: 0 auto;
                margin-top: var(--d20);

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .submit {
                position: relative;
                left: 50%;
                transform: translateX(-50%);
            }
        }

        .type-list .type-list2 {
            margin-bottom: 80px;
        }

        .tiresmenu-box2 {
            padding-top: 120px;

            .type-tiresbox {
                filter: none;

                .type-tiresbox2 {
                    padding: 150px var(--d24) var(--d18);
                }

                .type-title {
                    width: auto;
                }
            }
        }

        .tiresmenu-box3 {
            .img-box {
                padding-bottom: 85.714286%;
            }

            .tiresmenu-list {
                margin-bottom: calc(-1 * var(--d20));
                padding-bottom: var(--d30);

                .tiresmenu-list2 {
                    margin-bottom: var(--d20);

                    .tiresmenu-list3 {
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        .tiresmenu-img {
                            width: 39.661682%;
                        }

                        .tiresmenu-textbox {
                            width: 60.338318%;

                            .tiresmenu-title {
                                h3 {
                                    font-size: var(--24);
                                    line-height: 1.08333;
                                    margin-bottom: var(--d10);
                                    font-weight: 800;
                                }

                                color: #000;
                            }

                            .tiresmenu-text {
                                font-size: 13px;
                                line-height: 16px;
                                color: #000;
                            }
                        }
                    }
                }
            }
        }
    }

    .tiresaction {
        transform: none;
    }

    .header .s-nav {
        display: flex;
        margin-left: var(--d20);
        z-index: 1000;
    }

    .header-nav {
        width: 100vw;
        height: 100vh;
        background-color: #fff;
        position: fixed;
        top: 0;
        left: 0;
        display: none;
        overflow-y: scroll;
        z-index: 10;

        .header-list {
            padding: 0 16px;
            padding-top: 90px;
            width: 100%;

            .header-list2 {
                width: 100%;
                position: relative;
                font-size: 16px;
                color: #666;
                font-weight: 400;

                &:first-child {
                    .header-list3 {
                        &::before {
                            position: absolute;
                            width: 100%;
                            height: 1px;
                            background-color: #f2f2f2;
                            content: '';
                            top: 0;
                            left: 0;
                            opacity: 0.5;
                        }
                    }
                }

                .header-list3 {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;

                    .more-button {
                        display: block;
                    }

                    &::after {
                        position: absolute;
                        width: 100%;
                        height: 1px;
                        background-color: #f2f2f2;
                        content: '';
                        bottom: 0;
                        left: 0;
                        opacity: 0.5;
                    }

                    a {
                        width: calc(100% - 45px);
                        height: 100%;
                        display: flex;
                        align-items: center;
                        position: relative;
                        padding: 13px 0;
                        padding-left: 26px;
                        padding-right: 45px;
                        font-size: 16px;
                        color: #666;
                        font-weight: 600;
                    }

                    .more-button {
                        width: 45px;
                        height: 45px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }

                .more {
                    display: none;

                    .more-1-list {
                        .more-1-list2 {

                            .more-1-list3 {
                                padding: 10px 0 10px 40px;
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                font-size: 14px;
                                color: #666;
                                font-weight: 400;

                                a {
                                    width: calc(100% - 45px);
                                }

                                .more-button2 {
                                    width: 45px;
                                    height: 30px;
                                    display: flex;
                                    justify-content: center;
                                    align-self: center;
                                }
                            }

                            .more2 {
                                display: none;

                                .more-2-list {
                                    .more-2-list2 {
                                        .more-2-list3 {
                                            padding: 10px 0 10px 60px;
                                            display: flex;
                                            justify-content: space-between;
                                            align-items: center;
                                            font-size: 14px;
                                            color: #666;
                                            font-weight: normal;

                                            a {
                                                width: 100%;
                                            }

                                        }
                                    }
                                }
                            }

                        }
                    }

                }

            }

            .action {
                .header-list3 {
                    a {
                        color: var(--c);
                        font-weight: 800;
                    }
                }
            }
        }
    }

}





.s-nav {
    width: 21px;
    height: 18px;
    justify-content: space-between;
    display: none;
    align-items: center;
    flex-direction: column;
    cursor: pointer;

    i {
        width: 21px;
        height: 2px;
        background-color: #003366;
        transition: all .5s;
    }
}

.s-nav-action {
    i {


        &:first-child {
            transform: translateY(8px) rotate(45deg);
        }

        &:nth-child(2) {
            opacity: 0;
        }

        &:last-child {
            transform: translateY(-8px) rotate(-45deg);
        }
    }
}



.xs-online {
    border-top: 1px solid #fff;

    width: 100%;
    position: fixed;
    z-index: 10000;
    bottom: 0;
    left: 0;
    background-color: var(--c);

    ul {
        display: flex;
        justify-content: space-between;
        align-items: center;

        li {
            width: 20%;
            padding: 10px 0px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            i {
                font-size: 14px;
                color: #fff;
            }

            &::after {
                position: absolute;
                right: 0;
                top: 0;
                height: 100%;
                width: 1px;
                background-color: #fff;
                content: '';
            }

            &:last-child {
                &::after {
                    display: none;
                }
            }

            a {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                color: #fff;
                font-size: 12px;
                text-transform: capitalize;
                font-family: 'iconfont' !important;

                .icon-you {
                    transform: rotate(-90deg);
                }
            }
        }
    }
}

.online-wrap {
    .online {
        transition: all .5s;
        position: fixed;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        z-index: 1100;
        background-color: rgba(0, 0, 0, 0.1);

        a {
            width: 50px;
            height: 40px;
            position: relative;
            transition: all .5s;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 4px;
            font-size: 25px;
            color: rgba(255, 255, 255, 1);
            transition: all .5s;
            border-radius: 50%;
            transition: all .5s;

            &:last-child {
                margin-bottom: 0;
            }

            i {
                font-size: 22px;
                line-height: 22px;
                position: relative;
                z-index: 10;
                display: inline-block;
                transition: all .5s;
            }

            &:hover {

                i {
                    color: var(--c);
                }
            }

            &:last-child {
                margin-bottom: 0;
            }

            .show-num {
                opacity: 0;
                position: absolute;
                top: 50%;
                right: 0;
                transform: translate(0%, -50%);
                color: #000;
                font-weight: 400;
                font-size: var(--16);
                visibility: hidden;
                white-space: nowrap;
                padding-right: 20px;

                .show-img {
                    width: 120px;
                    height: 120px;
                    background-color: #fff;
                }

                .show-img,
                span {
                    border-radius: 8px;
                    background-color: #fff;
                    padding: 10px;
                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #222;
                    box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 10px 0px;

                    &::after {
                        position: absolute;
                        top: 50%;
                        right: 2px;
                        display: inline-block;
                        width: 0px;
                        height: 0px;
                        content: "";
                        transform: translate(100%, -50%);
                        vertical-align: middle;
                        border-width: 10px 0px 10px 12px;
                        border-style: solid;
                        border-color: transparent transparent transparent #fff;
                    }
                }

                img {
                    width: 100px;
                    display: block;
                    object-fit: cover;
                }
            }

            &:hover {
                color: #fff !important;

                .show-num {
                    transition: all .5s;
                    opacity: 1;
                    right: calc(100%);
                    visibility: visible;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }

        }

    }

    .online-btn {
        display: none;
        position: fixed;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        bottom: 80px;
        right: 0;
        z-index: 1000;
        background-color: rgba(0, 23, 51, 0.1);

        &:before {
            content: '+';
            color: #fff;
            font-size: 25px;
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all .5s;
        }
    }

    .show {
        right: 0 !important;
    }

    .open {
        &:before {
            transform: rotate(45deg);
        }
    }

    .icon-gouwuchefill {
        position: relative;

        .gouwuchefill-num {
            position: absolute;
            top: 0;
            right: 0;
            transform: translate(-50%, -50%);
            width: 16px;
            height: 16px;
            font-size: 10px;
            color: #000;
        }

    }

    .online-show {
        background-color: rgba(107, 6, 43, 0.3);
    }
}



@media (max-width: 1400px) {
    .online-wrap .online {
        transform: translateY(-50%) scale(0.8);
        right: 10px;
    }
}

@media (max-width: 768px) {
    .online-wrap {
        .online-btn {
            display: block;
        }

        .online {
            transform-origin: right;
            top: unset;
            right: -101%;
            bottom: 120px;
            transform: scale(0.8);
        }
    }
}

.fooder {
    .fooder-top {
        padding-top: var(--d93);
        padding-bottom: var(--d100);
        background-color: #303030;

        .fooder-title {
            text-transform: uppercase;
            font-size: var(--30);
            line-height: 1;
            padding-bottom: var(--d30);
            margin-bottom: var(--d50);
            position: relative;
            font-weight: 700;
            color: #fff;

            &::after {
                position: absolute;
                width: 100%;
                height: 1px;
                content: "";
                left: 0;
                bottom: 0;
                border: 1px dashed #505050;
            }

        }

        .fooder-nav-content {
            font-size: var(--15);
            line-height: 1;
            color: #fff;

            a {
                display: block;
                margin-bottom: var(--d15);
                transition: all .5s;

                &:hover {
                    color: var(--c);
                }
            }
        }

        .fooder-box1 {
            display: flex;
            justify-content: space-between;
            margin-bottom: var(--d60);

            .fooder-left {
                width: 870px;

                .fooder-nav {
                    display: flex;
                    justify-content: space-between;

                    .fooder-nav2 {

                        .fooder-nav-title {
                            font-size: var(--18);
                            line-height: 1.111111;
                            color: #fff;
                            font-weight: 600;
                            margin-bottom: var(--d20);
                            width: 125px;
                            text-transform: uppercase;
                        }
                    }
                }
            }

            .fooder-right {
                width: 440px;
                display: flex;
                justify-content: space-between;
                flex-direction: column;

                .fooder-tire {
                    margin-bottom: var(--d30);
                }

                .fooder-subscribe {
                    width: 100%;

                    .fooder-form {
                        background-color: #444444;

                        .fooder-form-content {
                            display: flex;
                            justify-content: center;

                            .input-text {
                                width: calc(100% - 100px);
                                padding: var(--d16) var(--d20);
                                background-color: transparent;
                                color: #fff;

                                &::placeholder {
                                    color: #777777;
                                    transition: all .5s;
                                }

                                &:focus {
                                    &::placeholder {
                                        opacity: 0.3;
                                    }
                                }
                            }

                            .form-submit {
                                width: 100px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                text-transform: uppercase;
                                color: var(--c);
                                background-color: transparent;
                                font-size: var(--18);
                                margin-right: var(--d20);

                                i {
                                    transition: all .5s;
                                    margin-left: 4px;
                                    color: var(--c);
                                    font-size: 20px;
                                }

                                &:hover {
                                    i {
                                        transform: translateX(2px);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        .fooder-box2 {
            .fooder-mesbox {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .fooder-mes {
                    display: flex;
                    justify-content: flex-start;

                    .fooder-mes2 {
                        max-width: 494px;
                        margin-right: var(--d128);

                        &:last-child {
                            margin-right: 0;
                        }

                        .fooder-mes-title {
                            font-size: var(--16);
                            line-height: 1;
                            color: #666666;
                            margin-bottom: var(--d16);
                        }

                        .fooder-mes-text {
                            font-size: var(--20);
                            line-height: 1.2;
                            color: #fff;

                            a {
                                transition: all .5s;

                                &:hover {
                                    color: var(--c);
                                }
                            }
                        }
                    }

                }
            }
        }
    }

    .fooder-bom {
        background-color: #EC6A05;

        .fooder-bom2 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--d30) 0;
            font-size: var(--16);
            color: #fff;

            .fooder-copyright {
                margin-right: 4px;
            }

            .fooder-right2 {
                position: relative;

                a {
                    &:first-child {
                        position: relative;
                        padding-right: var(--d22);
                        margin-right: var(--d22);

                        &::after {
                            position: absolute;
                            content: "";
                            width: 1px;
                            height: 12px;
                            right: 0;
                            top: 50%;
                            transform: translateY(-50%);
                            background-color: #fff;
                        }
                    }
                }

            }
        }
    }
}

.index-banner {
    width: 100%;
    position: relative;

    .swiper-slide {
        width: 100%;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .slide-inner {
        padding-bottom: 37.5%;
        position: relative;

    }

    .banner-textbox {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        .banner-content {
            div {
                opacity: 0;
            }
        }

        .banner-title1 {
            font-size: var(--22);
            color: var(--c);
            margin-bottom: var(--d26);
            font-weight: 700;
        }

        .banner-title2 {
            font-size: var(--80);
            color: #fff;
            font-weight: 700;
            margin-bottom: var(--d24);
            text-transform: uppercase;
            line-height: 1;
            width: 609px;
            max-width: 100%;
        }

        .banner-text {
            font-size: var(--22);
            line-height: 1.363636;
            color: #fff;
            width: 523px;
            max-width: 100%;
            margin-bottom: var(--d60);
        }

        .more-but {
            margin: 0;
        }
    }

    .banner-video video {
        object-fit: cover;
    }


    .banner-video,
    img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .banner-pagination {
        position: absolute;
        bottom: var(--d30);
        z-index: 10;
        text-align: center;

        .swiper-pagination-bullet {
            opacity: 1;
            width: 34px;
            height: 34px;
            background-color: transparent;
            margin: 0;
            margin-right: 1.77083vw;
            transform: rotateX(180deg) rotateZ(180deg);
            display: inline-block;

            &:last-child {
                margin-right: 0;
            }
        }

        .swiper-pagination-bullet-active {
            circle {
                fill: #fff;
            }

            .path {
                animation: paginationan 5s linear forwards;
            }
        }
    }
}

@keyframes paginationan {
    0% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: 2828;
    }
}

.type-list {
    margin-bottom: calc(-1 * var(--d30));

    .type-list2 {
        margin-bottom: var(--d30);

        .img-box {
            overflow: inherit;
        }

        &:hover {
            img {
                transform: scale(1.05);
                transform-origin: bottom;
            }

            .type-title {
                h3 {
                    color: var(--c);
                }
            }

            i {
                transform: translateX(2px);
            }
        }
    }
}

.type-tiresbox {
    position: relative;
    filter: drop-shadow(0px 0px 40px rgba(0, 0, 0, 0.15));

    .type-img {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -80px);
        width: 74.84848%;
        z-index: 10;

        .img-box {
            padding-bottom: 111.42857%;
        }
    }

    .type-tiresbox2 {
        position: relative;
        background-color: #fff;
        -webkit-clip-path: polygon(10% 0%, 80% 0%, 100% 0, 100% 88%, 89% 100%, 20% 100%, 0 100%, 0% 11%);
        clip-path: polygon(10% 0%, 80% 0%, 100% 0, 100% 88%, 89% 100%, 20% 100%, 0 100%, 0% 11%);
        padding: 219px var(--d32) var(--d26);
    }

    .type-title {
        width: 206px;
        max-width: 100%;
        margin-bottom: var(--d20);

        h3 {
            font-weight: 800;
            font-size: var(--20);
            line-height: 1.2;
            text-transform: uppercase;
            transition: all .5s;
        }
    }

    .type-more {
        display: flex;
        align-items: center;
        font-size: var(--16);
        text-transform: uppercase;
        font-weight: 700;
        color: #121212;

        i {
            font-size: 14px;
            margin-left: var(--d10);
            transition: all .5s;
            
        }
    }
}

@keyframes videoplay {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.7;
    }

    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

.indexcontent {
    .i-tires {
        padding-top: var(--d120);

        .i-tires-title1 {
            margin-bottom: var(--d20);
        }

        .i-tires-title2 {
            margin-bottom: var(--d150);
            width: 945px;
            max-width: 100%;
        }
    }

    .i-about {
        margin-top: var(--d164);
        position: relative;

        .i-about-bg {
            pointer-events: none;
            position: absolute;
            left: 0;
            width: 100%;
            top: 9%;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .i-about-title {
            width: 575px;
            max-width: 100%;
            margin: 0 auto;
            margin-bottom: var(--d100);
            text-align: center;
        }

        .i-about-list {
            --bs-gutter-x: 3.75rem;
            margin-bottom: calc(-1 * var(--d30));

            .i-about-list2 {
                margin-bottom: var(--d30);

                .i-about-list3 {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;

                    &:hover {
                        .i-about-list-title {
                            color: var(--c);
                            text-decoration: underline;
                        }

                        .i-about-icon {
                            i {
                                transform: rotateY(180deg);
                                color: var(--c);
                            }
                        }
                    }

                    .i-about-icon {
                        line-height: 1;
                        margin-bottom: var(--d35);

                        i {
                            display: inline-block;
                            font-size: 34px;
                            transition: all .5s;
                        }
                    }

                    .i-about-list-title {
                        transition: all .5s;
                        text-align: center;
                        margin-bottom: var(--d20);

                        h3 {
                            font-size: var(--24);
                            line-height: 1.08333;
                            font-weight: 700;
                        }
                    }

                    .i-about-list-text {
                        text-align: center;
                        font-size: var(--18);
                        line-height: 1.3333333;
                    }
                }
            }
        }

    }

    .i-story {
        padding-bottom: var(--d110);

        .i-story-titlebox {
            margin-bottom: var(--d130);

            .i-story-title1 {
                text-align: center;
                margin-bottom: var(--d30);
            }

            .i-story-title2 {
                width: 665px;
                max-width: 100%;
                text-align: center;
                margin: 0 auto;
                margin-bottom: var(--d35);
                text-align: center;
            }

            .i-story-text {
                margin: 0 auto;
                margin-bottom: var(--d60);
                width: 930px;
                max-width: 100%;
                text-align: center;
            }
        }

        .i-story-list {
            .i-story-list2 {
                .i-story-list3 {
                    .img-box {
                        padding-bottom: 122%;
                    }

                    .i-story-list-title {
                        text-transform: uppercase;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-weight: 500;
                        font-size: var(--20);
                        line-height: 1.7;
                        margin-top: var(--d25);

                        i {
                            font-size: 26px;
                            margin-right: var(--d10);
                            line-height: 1;
                        }
                    }
                }
            }
        }
    }
}

.more-but {
    margin: 0 auto;
    width: 180px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--c);
    color: #fff;
    font-size: var(--16);
    font-weight: 500;
    position: relative;
    overflow: hidden;

    &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: all .5s;
    }

    &:hover::before {
        width: 150%;
        height: 150%;
    }

    i {
        font-size: 16px;
        line-height: 1;
        margin-left: 7px;
    }
}

.i-about-videobox {
    height: 42.1875vw;
    width: 100%;
    position: relative;
    z-index: 10;

    .i-about-video-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
        width: 94px;
        height: 94px;
        border-radius: 50%;
        background-color: #fff;

        i {
            font-size: 72px;
            color: var(--c);
            line-height: 1;
        }

        &::after {
            width: 100%;
            height: 100%;
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            border-radius: 50%;
            background-color: inherit;
            animation: videoplay 3s linear infinite normal;
            z-index: -1;
            transform: translate(-50%, -50%) scale(1);
            opacity: 0.7;
        }

        &::before {
            width: 100%;
            height: 100%;
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            border-radius: 50%;
            background-color: inherit;
            animation: videoplay 3s linear infinite normal;
            animation-delay: 1.5s;
            z-index: -1;
            transform: translate(-50%, -50%) scale(1);
            opacity: 0.7;
        }
    }
}

.aboutcontent {
    .a-about {
        margin-top: var(--d120);
        position: relative;

        .a-about-bg {
            pointer-events: none;
            position: absolute;
            left: 0;
            width: 100%;
            top: var(--d88);

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .a-about-textbox {
            .a-about-title {
                margin: 0 auto;
                margin-bottom: var(--d40);
                max-width: 100%;
                text-align: center;

                h2 {
                    color: #EC6A05;
                }
            }

            .a-about-text {
                margin: 0 auto;
                width: 1170px;
                max-width: 100%;
                text-align: center;
            }
        }
    }

    .a-certificate {
        .a-certificate-title {
            text-align: center;
            margin-bottom: var(--d20);
        }

        .a-certificate-text {
            width: 1150px;
            max-width: 100%;
            text-align: center;
            margin: 0 auto;
            margin-bottom: var(--d70);
        }

        .a-certificate-swbox {
            position: relative;
            border-radius: 3px;
            position: relative;

            .a-certificate-prev {
                position: absolute;
                top: 50%;
                left: -35px;
                transform: translate(-100%, -50%);
            }

            .a-certificate-next {
                position: absolute;
                top: 50%;
                right: -35px;
                transform: translate(100%, -50%);
            }

            .a-certificate-img {
                padding: var(--d35);
                border: 1px dashed #E5E5E5;
                cursor: pointer;
                position: relative;

                &::after {
                    transition: all .5s;
                    opacity: 0;
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    content: '';
                    background: linear-gradient(180deg, rgba(236, 106, 5, 0) 0%, #EC6A05 50%, rgba(236, 106, 5, 0) 100%);
                }

                &:hover {
                    img {
                        transform: scale(1.1);
                    }

                    &::after {
                        opacity: 1;
                    }
                }

                .img-box {
                    padding-bottom: 140.3846%;
                }
            }

            .a-certificate-sw-title {
                text-align: center;
                font-size: var(--16);
                margin-top: var(--d20);
            }
        }
    }

    .a-factory {
        padding-top: var(--d120);
        padding-bottom: var(--d100);

        .a-factory-title {
            text-align: center;
            margin-bottom: var(--d20);
        }

        .a-factory-text {
            text-align: center;
            width: 1150px;
            max-width: 100%;
            margin: 0 auto;
            margin-bottom: var(--d70);
        }

        .a-factory-list {
            margin-bottom: calc(-1 * var(--d30));

            .a-factory-list2 {
                margin-bottom: var(--d30);
                cursor: pointer;

                &:hover {
                    img {
                        transform: scale(1.1);
                    }
                }

                .img-box {
                    padding-bottom: 65.55556%;
                }
            }
        }
    }
}

.other-banner {
    width: 100%;
    line-height: 0;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.tirescontent {
    padding: var(--d100) 0;

    .tires-navbox {

        .tires-type-nav {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: var(--d80);

            .tires-type-nav2 {
                margin-right: var(--d14);

                &:last-child {
                    margin-right: 0;
                }

                a {
                    text-transform: uppercase;
                    display: inline-block;
                    font-size: var(--16);
                    line-height: 1;
                    font-weight: 800;
                    padding: var(--d14) var(--d34);
                    border: 1px dashed #000;
                    transition: all .5s;
                    position: relative;

                    &:hover {
                        border-color: transparent;
                        color: #fff;

                        &::after {
                            opacity: 1;
                        }
                    }

                    &::after {
                        transition: all .5s;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        width: 100%;
                        height: 100%;
                        content: '';
                        z-index: -1;
                        opacity: 0;
                        background-color: var(--c);
                        -webkit-clip-path: polygon(15px 0%, 80% 0%, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 20% 100%, 0 100%, 0% 15px);
                        clip-path: polygon(15px 0%, 80% 0%, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 20% 100%, 0 100%, 0% 15px);
                    }
                }
            }

            .action {
                a {
                    border-color: transparent;
                    color: #fff;

                    &::after {
                        opacity: 1;
                    }
                }
            }
        }
    }

    .tires-content {
        .img-box {
            padding-bottom: 83.83838%;
        }

        .tires-list {
            margin-bottom: calc(-1 * var(--d80));
            padding-bottom: var(--d80);

            .tires-list2 {
                margin-bottom: var(--d80);
            }
        }
    }
}


.tires-list3 {
    &:hover {
        .tires-imgbox {
            &::before {
                width: 100%;
            }
        }

        .tires-title {
            h2 {
                color: var(--c);
            }
        }
    }


    .tires-imgbox {
        padding-bottom: var(--d30);
        position: relative;
        margin-bottom: var(--d34);

        &::after {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            content: '';
            background-color: #F0F0F0;
        }

        &::before {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0%;
            height: 3px;
            content: '';
            background-color: var(--c);
            z-index: 1;
            transition: all .5s;
        }
    }

    .tires-type {
        width: 247px;
        max-width: 100%;
        font-size: var(--12);
        color: #444444;
        line-height: 1.416667;
        margin-bottom: var(--d8);
    }

    .tires-title {
        margin-bottom: var(--d15);

        h2 {
            font-weight: 800;
            font-size: var(--30);
            line-height: 1;
            text-transform: uppercase;
            transition: all .5s;
        }
    }

    .tires-text {
        font-size: var(--16);
        line-height: 1.25;
        font-weight: 400;
        margin-bottom: var(--d30);
    }

    .tires-more {
        text-transform: uppercase;
        display: flex;
        align-items: center;
        font-weight: 500;
        font-size: var(--16);

        i {
            font-size: 20px;
            margin-left: 8px;
            line-height: 1;
        }
    }
}

.tiresdetails {
    .details-box {
        position: relative;

        &::after {
            position: absolute;
            top: 0;
            right: 0;
            width: 49.21875vw;
            height: 100%;
            content: '';
            background-color: #F5F5F5;
            z-index: -1;
        }

        .details-content {
            padding-top: var(--d30);
            padding-bottom: var(--d140);

            .details-crumbs {
                display: inline-block;
                margin-bottom: var(--d50);

                .details-crumbs2 {
                    display: inline-block;
                    text-transform: uppercase;
                    font-weight: 800;
                    font-size: var(--16);
                    position: relative;
                    transition: all .5s;

                    &:hover {
                        color: var(--c);
                    }

                    &::after {
                        content: '/';
                    }

                    &:last-child {
                        &::after {
                            display: none;
                        }
                    }
                }

                .action {
                    color: var(--c);
                }
            }

            .details-content2 {
                display: flex;
                justify-content: space-between;
            }

            .details-left {
                width: 690px;

                .img-box {
                    padding-bottom: 83.83838%;
                }

                .details-imgbox {
                    width: 100%;

                    .details-swiper2 {
                        width: 100%;
                        margin-bottom: var(--d30);
                    }

                    .details-swiper1 {
                        width: 480px;
                        overflow: hidden;

                        .swiper-slide {
                            border: 1px solid #F5F5F5;
                        }

                        .swiper-slide-thumb-active {
                            border: 1px solid var(--c);
                        }

                        .swiper-video {
                            position: relative;

                            &::before {
                                font-family: 'iconfont' !important;
                                position: absolute;
                                left: 50%;
                                top: 50%;
                                transform: translate(-50%, -50%);
                                content: "\ea82";
                                font-size: 24px;
                                color: var(--c);
                                z-index: 10;
                            }
                        }
                    }

                    .details-swiperbox {
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        .details-swiperbut {
                            &:hover {
                                i {
                                    color: var(--c);
                                }
                            }

                        }

                        .details-prev {
                            margin-right: var(--d16);
                        }

                        .details-next {
                            margin-left: var(--d16);
                        }

                        i {
                            font-size: var(--20);
                            transition: all .5s;
                            line-height: 1;
                        }
                    }
                }
            }

            .details-right {
                width: 600px;

                .details-title {
                    margin-bottom: var(--d30);
                    padding-bottom: var(--d55);
                    position: relative;

                    &::after {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        height: 3px;
                        content: '';
                        background-color: #F0F0F0;
                    }

                    h2 {
                        font-size: var(--50);
                        line-height: 1;
                        font-weight: 800;
                    }
                }

                .details-text {
                    font-size: var(--16);
                    line-height: 1.75;
                    margin-bottom: var(--d100);
                }

                .details-share {
                    display: flex;
                    align-items: center;
                    margin-bottom: var(--d48);

                    p {
                        font-weight: 800;
                        color: var(--c);
                        font-size: var(--18);
                        margin-right: var(--d16);
                    }
                }

                .details-but {
                    width: 100%;

                    a {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 100%;
                        padding: var(--d14) 0;
                        background-color: var(--c);
                        color: #fff;
                        font-weight: 800;
                        text-transform: uppercase;
                        font-size: var(--18);
                        transition: all .5s;
                        border-radius: 2px;
                        position: relative;
                        overflow: hidden;

                        &::before {
                            content: "";
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            width: 0;
                            height: 0;
                            background-color: rgba(255, 255, 255, 0.2);
                            border-radius: 50%;
                            transform: translate(-50%, -50%);
                            transition: all .5s;
                        }

                        &:hover::before {
                            width: 150%;
                            height: 150%;
                        }

                    }


                }

                .details-but1 {
                    margin-bottom: var(--d10);
                }

                .details-but2 {
                    a {
                        background-color: #121212;
                    }
                }
            }
        }
    }

    .details-nav {
        width: 100%;
        position: sticky;
        top: 100px;
        background-color: #fff;
        z-index: 100;
        border-top: 1px solid #F0F0F0;

        .navbox {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .navbox2 {
                width: 20%;
                text-align: center;
                color: #4C4C4C;
                cursor: pointer;
                transition: all .5s;
                position: relative;
                font-size: var(--18);
                font-weight: 500;
                white-space: nowrap;

                a {
                    padding: var(--d20) 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 100%;
                    height: 100%;
                    color: var(--18);
                    text-transform: uppercase;
                    font-weight: 800;
                }

                &::after {
                    content: '';
                    top: 0;
                    right: 0;
                    background-color: #F0F0F0;
                    width: 1px;
                    height: 100%;
                    position: absolute;
                }

                &:last-child::after {
                    display: none;
                }

                @media (min-width: 1200px) {
                    &:hover {
                        background-color: var(--c);

                        span {
                            color: #fff;
                        }
                    }
                }

            }

            .action {
                background-color: var(--c);

                span {
                    color: #fff;
                }
            }
        }
    }

    .details {
        padding-bottom: var(--d100);

        .content-title {
            font-size: var(--36);
            font-weight: 800;
            line-height: 1;
            text-transform: uppercase;
        }

        .detproductbox {
            position: relative;
            background-color: #f5f5f5;
            padding: var(--d70) 0;

            .content-title {
                margin-bottom: var(--d20);
            }

            .detproduct-textbox {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: var(--d60);

                .detproduct-img {
                    min-width: 480px;
                    margin-left: var(--d90);

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                &:nth-child(2n) {
                    flex-direction: row-reverse;

                    .detproduct-img {
                        margin-right: var(--d90);
                        margin-left: 0;
                    }
                }

                &:last-child {
                    margin-bottom: 0;
                }

                .detproduct-text {
                    font-size: var(--16);
                    line-height: 1.5;

                    .detproduct-title {
                        font-size: var(--26);
                        line-height: 1;
                        margin-bottom: var(--d26);
                        font-weight: 800;
                    }
                }
            }
        }

        .specifications {
            position: relative;
            padding: var(--d100) 0;

            .content-title {
                margin-bottom: var(--d40);
            }
        }

        .inquiry {
            position: relative;

            .content-title {
                margin-bottom: var(--d40);
            }

            .inquiry-from {
                .product-input {
                    width: 100%;
                    background-color: var(--c);
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    margin-bottom: var(--d20);

                    .input-box {
                        background-color: transparent;
                        width: 100%;
                        padding: var(--d16) var(--d24);
                        margin-bottom: 0;
                        color: #fff;
                    }
                }

                ul {
                    --bs-gutter-x: 1.25rem;
                }

                .input-box {
                    padding: var(--d16) var(--d24);
                    font-size: var(--16);
                    background-color: #F0F0F0;
                    width: 100%;
                    margin-bottom: var(--d20);
                    font-size: var(--16);

                    &::placeholder {
                        color: #121212;
                        transition: all .5s;
                    }

                    &:focus {
                        &::placeholder {
                            opacity: 0.3;
                        }
                    }

                }

                .textarea-box {
                    height: 293px;
                }

                .submit {
                    position: relative;
                    left: 50%;
                    transform: translateX(-50%);

                    .more-but {
                        background-color: #121212;
                    }
                }
            }
        }

        .related {
            padding-top: var(--d100);
            position: relative;

            .content-title {
                margin-bottom: var(--d50);
            }
        }

        .reviews {
            position: relative;
            padding-top: var(--d100);

            .reviews-titlebox {
                display: flex;
                justify-content: space-between;
                margin-bottom: var(--d40);

                .write {
                    font-size: var(--18);
                    color: var(--c);
                    text-decoration: underline;
                    font-weight: 800;
                    cursor: pointer;
                }
            }

            .reviews-form {
                margin-bottom: var(--d60);

                .consult-list2 {
                    margin-bottom: var(--d20);
                }

                .input-box {
                    width: 100%;
                    color: #121212;
                    font-size: var(--16);
                    padding: var(--d16) var(--d24);
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    background-color: #F0F0F0;

                    &::placeholder {
                        color: #121212;
                        transition: all .5s;
                    }

                    &:focus {
                        &::placeholder {
                            opacity: 0.3;
                        }
                    }
                }

                .textarea-box {
                    height: 171px;
                    margin-bottom: var(--d20);
                }

                .submit {
                    position: relative;
                    left: 50%;
                    transform: translateX(-50%);

                    .more-but {
                        background-color: #121212;
                    }
                }
            }

            .reviews-list {
                .reviews-list2 {
                    margin-bottom: var(--d30);

                    &:last-child {
                        margin-bottom: 0;
                    }
                }

                .reviews-list-title {
                    font-size: var(--26);
                    line-height: 1;
                    font-weight: 800;
                    margin-bottom: var(--d14);
                }

                .reviews-rating {
                    font-size: var(--18);
                    display: flex;
                    align-items: center;
                    margin-bottom: var(--d22);
                }

                .reviews-list-text {
                    font-size: var(--16);
                    line-height: 1.5;
                }
            }
        }
    }
}

.rating {
    margin-left: 17px;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .rating2 {
        position: relative;
        height: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 8px;
        cursor: pointer;

        &:last-child {
            margin-right: 0;
        }

        i {
            font-size: 14px;
            height: 14px;
            line-height: 1;
            color: var(--c);
        }

        .icon-star-full {
            position: absolute;
            top: 0;
            left: 0;
            color: var(--c);
            opacity: 0;
        }
    }

    .ratingaction {
        .icon-star-full {
            opacity: 1;
        }
    }
}

.top {
    position: absolute;
    top: -200px;
    left: 0;
}

.shopcontent {
    padding: var(--d100) 0;

    .shop-top {
        margin-bottom: var(--d100);
    }

    .shop-title {
        margin-bottom: var(--d20);
    }

    .shop-text {
        margin-bottom: var(--d70);
        width: 1050px;
        max-width: 100%;
    }

    .shop-logo {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: var(--d100);
        border-bottom: 1px dashed #D9D9D9;

        .shop-logo2 {
            width: 258px;
            box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
            margin-right: var(--d30);
            margin-bottom: var(--d30);

            &:last-child {
                margin-right: 0;
            }

            .img-box {
                padding-bottom: 46%;
            }
        }
    }

    .shop-title2 {
        width: 810px;
        margin-bottom: var(--d20);
        max-width: 100%;
    }

    .shop-type {
        color: var(--c);
        font-size: var(--18);
        line-height: 1.44444;
        margin-bottom: var(--d70);
    }

    .shop-box {
        max-width: 100%;
        width: 700px;
        height: 54px;
        display: flex;
        justify-content: center;
        font-size: var(--18);

        .input-text {
            height: 100%;
            width: calc(100% - 160px);
            border-bottom: 1px solid #121212;
            font-size: var(--16);

            &::placeholder {
                color: #121212;
                transition: all .5s;
            }

            &:focus {
                &::placeholder {
                    opacity: 0.3;
                }
            }
        }

        .submit {
            width: 160px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--c);
            color: #fff;

            i {
                font-size: var(--22);
                margin-right: var(--d10);
            }
        }
    }
}

.sizecontent {
    padding: var(--d100) 0;

    .size-title {
        margin-bottom: var(--d30);
    }

    .size-text {
        font-size: var(--16);
        line-height: 1.875;
        color: #121212;
        margin-bottom: var(--d20);

        &:last-child {
            margin-bottom: 0;
        }
    }

    .size-r {
        color: var(--c);
    }

    .size-box {
        background-color: #F5F5F5;
        padding: var(--d46);
        margin-bottom: var(--d40);

        .size-box2 {
            display: flex;
            justify-content: flex-start;
            margin-bottom: var(--d30);

            &:last-child {
                margin-bottom: 0;
            }

            .size-img {
                width: 476px;
                margin-right: var(--d80);

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .size-box-title {
                font-size: var(--26);
                line-height: 1;
                color: #000;
                margin-bottom: var(--d20);
                font-weight: 700;
            }

            .size-box-text {
                margin-bottom: var(--d10);
                font-size: var(--16);
                line-height: 1.375;
                color: #000;

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }

    .size-text2 {
        font-size: var(--20);
        line-height: 1.5;
        color: #121212;
        margin-bottom: var(--d100);
    }

    .size-content {
        margin-bottom: var(--d100);

        &:last-child {
            margin-bottom: 0;
        }

    }

    .size-con-title {
        font-size: var(--36);
        line-height: 1;
        margin-bottom: var(--d20);
        font-weight: 700;
    }

    .size-con-text {
        font-size: var(--16);
        line-height: 1.875;
        margin-bottom: var(--d35);
    }

    .size-con-title2 {
        font-size: var(--20);
        line-height: 1.3;
        margin-bottom: var(--d20);
        font-weight: 500;
    }

    .size-con-text2 {
        font-size: var(--16);
        line-height: 1.875;

        span {
            color: var(--c);
        }
    }
}

.contactcontent {
    background-color: #F5F5F5;

    .contact-box {
        width: 1170px;
        max-width: 100%;
        margin: 0 auto;
        padding-bottom: var(--d15);
        transform: translateY(calc(-1 * var(--d105)));
        filter: drop-shadow(0px 0px 40px rgba(0, 0, 0, 0.15));

        .contact-box2 {
            padding: var(--d90);
            -webkit-clip-path: polygon(5% 0%, 80% 0%, 100% 0, 100% 93%, 95% 100%, 20% 100%, 0 100%, 0% 7%);
            clip-path: polygon(5% 0%, 80% 0%, 100% 0, 100% 93%, 95% 100%, 20% 100%, 0 100%, 0% 7%);
            background-color: #fff;
            display: flex;
            justify-content: space-between;

            .contact-left {
                width: 430px;

                .contact-title {
                    margin-bottom: var(--d60);
                }

                .contact-list {
                    .contact-list2 {
                        margin-bottom: var(--d30);

                        &:last-child {
                            margin-bottom: 0;
                        }

                        .contact-list-title {
                            font-size: var(--16);
                            color: var(--c);
                            line-height: 1;
                            text-transform: uppercase;
                            font-weight: 800;
                            margin-bottom: var(--d14);
                        }

                        .contact-list-text {
                            font-size: var(--20);
                            line-height: 1.2;

                            a {
                                margin-right: var(--d15);
                                transition: all .5s;

                                &:hover {
                                    color: var(--c);
                                }

                                &:last-child {
                                    margin-right: 0;
                                }

                                i {
                                    font-size: 20px;
                                }
                            }
                        }
                    }
                }
            }

            .contact-right {
                width: 480px;
            }
        }
    }
}

.contact-form {
    ul {
        li {
            margin-bottom: var(--d18);

            .form-inquiry {
                font-size: var(--16);
                color: var(--c);
                line-height: 1;
                text-transform: uppercase;
                font-weight: 800;
                margin-bottom: var(--d14);
            }
        }
    }

    .select-box {
        position: relative;

        &::after {
            width: 12px;
            height: 12px;
            content: "\e87e";
            position: absolute;
            right: var(--d24);
            top: 50%;
            transform: translateY(-50%);
            font-family: 'iconfont' !important;
            font-size: 12px;
            pointer-events: none;
        }
    }

    .input-select {
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
    }

    .input-box {
        width: 100%;
        background-color: #F0F0F0;
        padding: var(--d16) var(--d24);
        font-size: var(--16);

        &::placeholder {
            color: #888888;
            transition: all .5s;
        }

        &:focus {

            &::placeholder {
                opacity: 0.3;
            }
        }
    }

    .textarea-box {
        height: 237px;
        margin-bottom: var(--d22);

        &::placeholder {
            font-size: 13px;
            line-height: 1.3846;
        }
    }

    .submit {
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--c);
        font-weight: 500;
        color: #fff;
        font-size: var(--16);
        width: 165px;
        height: 46px;
        position: relative;
        overflow: hidden;

        &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: all .5s;
        }

        &:hover::before {
            width: 150%;
            height: 150%;
        }

        span {
            margin-right: 6px;
        }

        i {
            font-size: 14px;
        }
    }
}

.carecontent {

    .care-box {
        padding: var(--d100) 0;

        .care-list {
            --bs-gutter-x: 0rem;
            border-bottom: 1px solid #F0F0F0;
            position: relative;

            &::after {
                content: '';
                position: absolute;
                left: 50%;
                top: 0;
                transform: translateX(-50%);
                width: 1px;
                height: 100%;
                background-color: #F0F0F0;
                z-index: 10;
            }

            .care-list2 {
                border-top: 1px solid #F0F0F0;


                .care-list3 {
                    padding: var(--d50) var(--d55) var(--d115);

                    &:hover {
                        .care-list-title {
                            color: var(--c);
                        }

                        .img-box {
                            img {
                                transform: scale(1.1);
                            }
                        }

                        .care-list-img {
                            .care-list-icon {
                                background-color: var(--c);

                                i {
                                    color: #fff;
                                }
                            }
                        }
                    }

                    .care-list-title {
                        transition: all .5s;
                        font-size: var(--36);
                        line-height: 1;
                        font-weight: 800;
                        margin-bottom: var(--d15);
                        text-transform: uppercase;
                    }

                    .care-list-text {
                        margin-bottom: var(--d50);
                        font-size: var(--14);
                        line-height: 1.28571;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        text-overflow: ellipsis;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                    }

                    .care-list-img {
                        position: relative;

                        .img-box {
                            padding-bottom: 55.04202%;
                        }

                        .care-list-icon {
                            transition: all .5s;
                            position: absolute;
                            right: var(--d50);
                            bottom: 0;
                            transform: translateY(50%);
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            background-color: #F5F5F5;
                            width: 90px;
                            height: 90px;
                            border-radius: 50%;
                            z-index: 10;

                            i {
                                transition: all .5s;
                                font-size: 20px;
                            }
                        }
                    }
                }
            }
        }
    }

    .fficiency-box {
        padding-bottom: var(--d100);

        .fficiency-title {
            width: 734px;
            max-width: 100%;
            margin-bottom: var(--d30);
        }

        .fficiency-text {
            color: #121212;
            margin-bottom: var(--d90);
        }
    }

    .warranty-box {
        padding-bottom: var(--d100);

        .warranty-title {
            width: 960px;
            max-width: 100%;
            margin-bottom: var(--d50);
        }

        .warranty-list {
            .warranty-list2 {
                margin-bottom: var(--d70);

                &:last-child {
                    margin-bottom: 0;
                }

                .warranty-list-title {
                    font-weight: 700;
                    font-size: var(--36);
                    line-height: 1;
                    margin-bottom: var(--d20);
                }

                .warranty-list-text {
                    font-size: var(--16);
                    line-height: 1.875;
                    margin-bottom: var(--d40);

                    .table-box {
                        font-size: var(--20);
                    }

                    .table-box table td,
                    .table-box table th {
                        border: 1px solid #F5F5F5;
                    }

                    .table-box table.rowspan1 tr:first-child,
                    .table-box table.rowspan2 tr:nth-child(1),
                    .table-box table.rowspan2 tr:nth-child(2),
                    .table-box table.rowspan3 tr:nth-child(2),
                    .table-box table.rowspan3 tr:nth-child(3),
                    .table-box table.rowspan4 tr:nth-child(2),
                    .table-box table.rowspan4 tr:nth-child(3),
                    .table-box table.rowspan4 tr:nth-child(4),
                    .table-box table.rowspan5 tr:nth-child(2),
                    .table-box table.rowspan5 tr:nth-child(3),
                    .table-box table.rowspan5 tr:nth-child(4),
                    .table-box table.rowspan5 tr:nth-child(5) {
                        background-color: #fff;
                        color: #121212;
                        font-weight: 700;
                        font-size: var(--24);
                    }

                    .table-box table tr td:first-child {
                        background-color: #F5F5F5;
                        border-color: #fff;
                    }

                    &:last-child {
                        margin-bottom: 0;
                    }
                }
            }
        }
    }
}

.faq-list1 {
    position: relative;

    .faq-list2 {
        margin-bottom: 4px;
        position: relative;

        &:last-child {
            margin-bottom: 0;
        }

        .faq-titlebox {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            transition: all .5s;
            background-color: #F5F5F5;
            padding: var(--d30) var(--d37);

            &:hover {
                .faq-list-title {
                    color: var(--c);
                }
            }

            .faq-icon {
                i {
                    font-size: 30px;
                }
            }

            .faq-list-title {
                width: 88.87545%;
                transition: all .5s;
                font-size: var(--20);
                line-height: 1.1;
                font-weight: 800;
            }

            .faq-plue {
                line-height: 1;
                position: relative;

                i {
                    transition: opacity .5s;
                    display: inline-block;
                    font-size: 18px;
                    line-height: 1;
                }

                .icon-jian {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    opacity: 0;
                }
            }
        }

        .faq-list-text {
            display: none;
            padding: var(--d30) var(--d37);

            .faq-text-title {
                font-size: var(--18);
                font-weight: 500;
                margin-bottom: var(--d30);
            }
        }
    }

    .open {
        .faq-titlebox {
            .faq-list-title {
                color: var(--c);
            }

            .faq-plue {
                .icon-jian {
                    opacity: 1;
                }

                .icon-jia {
                    opacity: 0;
                }
            }
        }
    }
}

.crumbs {
    padding-top: var(--d30);
    padding-bottom: var(--d80);

    .crumbs-list {
        display: inline-block;

        .crumbs-list2 {
            display: inline-block;
            font-size: var(--16);
            line-height: 1;
            font-weight: 800;
            text-transform: uppercase;

            &:hover {
                color: var(--c);
            }

            &::after {
                content: '/';
            }

            &:last-child {
                &::after {
                    display: none;
                }
            }
        }

        .action {
            color: var(--c);
        }
    }
}

.blogcontent {
    padding: var(--d100) 0;

    .blog-list {
        padding-bottom: var(--d80);
        margin-bottom: calc(-1 * var(--d60));

        .blog-list2 {
            margin-bottom: var(--d60);

            .blog-list3 {
                &:hover {
                    .img-box {
                        img {
                            transform: scale(1.1);
                        }
                    }

                    .blog-title {
                        text-decoration: underline;
                    }
                }

                .img-box {
                    padding-bottom: 58.333333%;
                }

                .blog-img {
                    width: 100%;
                    height: 100%;
                    margin-bottom: var(--d30);
                }

                .blog-date {
                    display: flex;
                    align-items: center;
                    color: var(--c);
                    font-weight: 800;
                    font-size: var(--16);

                    i {
                        font-size: 20px;
                        margin-right: var(--d8);
                        color: var(--c);
                    }
                }

                .blog-title {
                    font-size: var(--22);
                    font-weight: 800;
                    line-height: 1.1818182;
                    margin-bottom: var(--d15);
                }

                .blog-text {
                    font-size: var(--14);
                    line-height: 1.42857;
                    color: #444444;
                }
            }
        }
    }
}

.pagination {
    display: flex;
    justify-content: center;

    li {
        a {
            width: 46px;
            height: 46px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 5px;
            border-radius: 50%;
            background-color: #F5F5F5;
            font-size: var(--18);
            transition: all .5s;

            &:hover {
                background-color: var(--c);
                color: #fff;
            }

        }
    }

    .active {
        a {
            background-color: var(--c);
            color: #fff;
        }
    }
}

.sw-butbox {
    .sw-but {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #F5F5F5;
        transition: all .5s;

        i {
            transition: all .5s;
            font-style: 14px;
        }

        &:hover {
            background-color: var(--c);

            i {
                color: #fff;
            }
        }
    }
}

.guide {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100vw;
    height: 100vh;
    position: relative;

    .guide-box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .guide-logo {
            width: 486px;
            margin-bottom: var(--d40);

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .guide-text {
            font-size: var(--26);
            color: #fff;
            text-align: center;
            font-weight: 800;
            line-height: 1.384615;
            margin-bottom: var(--d100);
        }

        .guide-butbox {
            display: flex;
            justify-content: center;
            align-items: center;

            .guide-but {
                margin-right: var(--d50);
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: var(--30);
                line-height: 1;
                font-weight: 800;
                width: 330px;
                height: 70px;
                background-color: #fff;
                -webkit-clip-path: polygon(10% 0%, 80% 0%, 100% 0, 100% 88%, 89% 100%, 20% 100%, 0 100%, 0% 11%);
                clip-path: polygon(8% 0%, 80% 0%, 100% 0, 100% 68%, 92% 100%, 20% 100%, 0 100%, 0% 32%);
                transition: all .5s;
                text-transform: uppercase;

                a {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 100%;
                    height: 100%;
                }

                &:hover {
                    color: #fff;
                    background-color: var(--c);
                }

                i {
                    margin-left: var(--d20);
                    font-size: 30px;
                }

                &:last-child {
                    margin-right: 0;
                }
            }
        }
    }
}

.newsdetcon {
    padding: var(--d120) 0;
    background-color: #fff;

    .news-formbox {
        .form-title {
            h2 {
                color: #003366;
            }
        }

        .more-but .more-box {
            background-color: #003366;
        }

        .input-box {
            color: #003366;
            background-color: #F7F8FA;

            &::placeholder {
                transition: all .5s;
                color: #496683;
            }
        }

    }

    .news-title {
        margin-bottom: var(--d30);
    }

    .index-news-date {
        font-size: var(--18);
        line-height: 1;
        margin-bottom: var(--d20);
    }

    .news-prve,
    .news-next,
    .share {
        margin-bottom: var(--d30);

        p {
            font-size: var(--18);
            line-height: 1.3;
            font-weight: 500;
            color: #222222;
            display: inline-block;
            margin-right: 10px;
        }
    }

    .news-text {
        margin-bottom: var(--d40);
    }

    .news-prve,
    .news-next {
        a {
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all .5s;

            &:hover {
                color: var(--c);
            }
        }

        span {
            display: inline-block;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .news-next {
        margin-bottom: var(--d50);
    }

    .contact-formbox {
        width: 100%;

        .getquote-form {
            padding: 0;
        }
    }
}

.cart {
    padding-top: var(--d100);
    background-color: #F9F9F9;

    .cartcontent {
        padding-bottom: var(--d100);
    }

    .cart-box {
        .img-box {
            padding-bottom: 83.83838%;
        }

        .title-inquiry-info {
            background-color: #fff;
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .item {
                font-size: 16px;
                font-weight: normal;
                color: #666;
                padding: 20px;
            }
        }

        .inquiry-list {
            background-color: #fff;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            position: relative;

            &::after {
                width: 100%;
                bottom: 0;
                left: 0;
                height: 1px;
                background-color: #f5f7fa;
                content: "";
                position: absolute;
            }

            .item {
                font-size: 16px;
                font-weight: normal;
                color: #666;
                padding: 20px;
            }

            .number-box {
                display: flex;
                justify-content: flex-start;
                align-items: center;

                span {
                    font-size: 20px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 34px;
                    height: 36px;
                    margin: 0;
                    margin-top: -2px;
                    padding: 0;
                    cursor: pointer;
                    -webkit-transition: all 0.2s;
                    transition: all 0.2s;
                    text-align: center;
                    vertical-align: middle;
                    border: 1px solid #e5e5e5;
                    background-color: #fff;

                    &:hover {
                        background-color: #254b9e;
                        color: #fff;
                    }
                }

                .ipt-num {
                    font-size: 16px;
                    line-height: 34px;
                    position: relative;
                    width: 60px;
                    height: 34px;
                    text-align: center;
                    vertical-align: top;
                    border: none;
                    outline: none;
                }
            }

            .iclose {
                position: relative;
                cursor: pointer;

                &:hover {
                    &::after {
                        color: #254b9e;
                    }
                }

                &::after {
                    font-family: "iconfont" !important;
                    font-size: 20px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    content: "\ec7b";
                    -webkit-transform: translate3d(-50%, -50%, 0);
                    transform: translate3d(-50%, -50%, 0);
                    color: #000;
                    z-index: 10;
                }
            }
        }

        .checkbox {
            width: 10%;
        }

        .pimg,
        .number {
            width: 20%;
        }

        .pname {
            width: 40%;
        }

        .pname2 {
            display: none;
        }

        .operation {
            width: 10%;
        }

        .det-tit {
            width: 100%;
            position: relative;
            color: #000;
            font-size: var(--20);
            font-weight: 500;
            padding-bottom: 16px;
            margin-bottom: 24px;

            &::after {
                position: absolute;
                width: 100%;
                height: 1px;
                background-color: #d9d9d9;
                content: "";
                bottom: 0;
                left: 0;
            }
        }

        .pimg-pname-num {
            display: none;

            p {
                margin-bottom: 20px;
            }
        }
    }

    .detailscontent {
        .requestbox {
            padding-top: var(--36);
            padding-bottom: var(--64);
        }
    }
}

@media (max-width: 1400px) {
    .cart .cart-box .title-inquiry-info .item {
        font-size: 14px;
        padding: 10px;
    }

    .cart .cart-box .inquiry-list .item {
        font-size: 14px;
        padding: 10px;
    }
}

@media (max-width: 768px) {

    .cart .cart-box .pimg,
    .cart .cart-box .pname,
    .cart .cart-box .number {
        display: none;
    }

    .cart .cart-box .pimg-pname-num {
        display: block;
        width: 80%;

        .cart-img {
            max-width: 300px;
        }
    }
}

@media (max-width: 540px) {

    .cart .cart-box .checkbox span,
    .cart .cart-box .operation span {
        display: none;
    }
}

.sitemapcontent {
    .sitemap-content {
        padding: var(--d100) 0;

        .sitemap-title {
            margin-bottom: var(--d60);
        }

        .list1 {
            .list2 {
                margin-bottom: var(--d30);

                &:last-child {
                    margin-bottom: 0;
                }

                .list3 {
                    max-width: 100%;
                    width: 400px;
                    height: 50px;
                    padding: 20px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border: 1px solid var(--c);
                    color: var(--c);
                    font-size: 20px;
                    font-weight: bold;
                    transition: all 0.2s;

                    &:hover {
                        background-color: var(--c);
                        color: #fff;
                    }
                }

                .list1-2 {
                    padding-top: 20px;

                    .list2-2 {
                        display: inline-block;
                        margin-right: 20px;
                        font-size: 18px;
                        font-weight: 500;
                        color: #000;
                    }
                }

                .list1-3 {
                    padding-top: 10px;

                    .list2-3 {
                        display: inline-block;
                        margin-right: 20px;
                        font-size: 16px;
                        font-weight: normal;
                        color: #000;
                    }
                }
            }
        }
    }
}

.privacycontent {
    padding: var(--d100) 0;

}

.header-container {
    max-width: 1710px;
    padding: 0;
    position: relative;
    margin: 0 auto;
}

.container {
    max-width: 1410px;
    padding: 0;
    position: relative;
    margin: 0 auto;
}

@media (max-width: 1800px) {
    :root {
        --80: 70px;
    }

    .indexcontent .i-about .i-about-bg {
        top: 15%;
    }

    .header-container {
        max-width: 1510px;
    }
}

@media (max-width: 1600px) {
    :root {
        --d164: 120px;
        --d130: 100px;
        --d128: 90px;
        --d120: 90px;
        --d115: 80px;
        --d110: 90px;
        --d100: 70px;
        --d90: 70px;
        --d80: 60px;
        --d60: 48px;
        --d55: 25px;
        --d50: 35px;
        --d35: 20px;
        --d30: 20px;
        --d26: 18px;
        --d20: 12px;
        --80: 55px;
        --70: 55px;
        --50: 45px;
        --30: 26px;
        --24: 20px;
        --22: 20px;
        --20: 18px;
        --18: 16px;
    }

    .guide .guide-box .guide-butbox .guide-but i {
        font-size: 26px;
    }

    .carecontent .care-box .care-list .care-list2 .care-list3 .care-list-img .care-list-icon {
        width: 80px;
        height: 80px;
    }

    .tiresdetails .details-box .details-content .details-left {
        width: 590px;
    }

    .tiresdetails .details-box .details-content .details-right {
        width: 540px;
    }

    .type-tiresbox .type-img {
        width: 65.84848%;
    }

    .tires-menu .tires-menu-content .swiper-wrapper .swiper-slide .tiresmenu-box2 .type-tiresbox .type-tiresbox2 {
        padding: 115px var(--d24) var(--d18);
    }

    .indexcontent .i-about .i-about-bg {
        top: 19%;
    }

    .fooder .fooder-top .fooder-box1 .fooder-right {
        width: 350px;
    }

    .fooder .fooder-top .fooder-box1 .fooder-left {
        width: 780px;
    }

    .fooder .fooder-top .fooder-box1 .fooder-left .fooder-nav {
        --bs-gutter-x: 1.875rem;
    }

    .type-tiresbox .type-tiresbox2 {
        padding: 178px var(--d32) var(--d26);
    }

    .container {
        max-width: 1210px;
    }

    .header-container {
        max-width: 1310px;
    }

    .guide .guide-box .guide-logo {
        width: 350px;
    }

    .guide .guide-box .guide-butbox .guide-but {
        width: 280px;
        height: 58px;
    }

    .guide .guide-box .guide-logo {
        width: 400px;
    }
}

@media (max-width: 1400px) {
    .header .header-box .header-content {
        height: 60px;
    }



    .carecontent .care-box .care-list .care-list2 .care-list3 .care-list-img .care-list-icon {
        width: 66px;
        height: 66px;
    }

    .tires-menu {
        top: 98px;
    }

    :root {
        --d164: 80px;
        --d128: 50px;
        --d130: 80px;
        --d120: 80px;
        --d115: 60px;
        --d100: 60px;
        --d90: 50px;
        --d80: 50px;
        --d70: 50px;
        --d60: 34px;
        --d50: 30px;
        --d46: 30px;
        --d40: 30px;
        --d34: 20px;
        --d32: 20px;
        --d30: 15px;
        --d25: 15px;
        --d24: 14px;
        --d22: 14px;
        --d20: 10px;
        --d16: 10px;
        --d15: 12px;
        --d14: 10px;
        --d10: 4px;
        --80: 40px;
        --70: 45px;
        --50: 38px;
        --36: 30px;
        --30: 24px;
        --24: 22px;
        --24: 18px;
        --22: 18px;
        --20: 16px;
        --16: 14px;
        --15: 12px;
    }

    .contact-form .textarea-box {
        height: 170px;
    }

    .contactcontent .contact-box .contact-box2 .contact-left {
        width: 370px;
    }

    .tiresdetails .details-box .details-content .details-left {
        width: 480px;
    }

    .tiresdetails .details-box .details-content .details-right {
        width: 450px;
    }

    .type-list .type-list2 {
        margin-top: var(--d60);
    }

    .tires-menu .tires-menu-content .swiper-wrapper .swiper-slide .tiresmenu-box2 .type-tiresbox .type-tiresbox2 {
        padding: 85px var(--d24) var(--d18);
    }

    .tires-menu .tires-menu-list .tires-menu-list2 .tires-menu-list3 .tires-menu-list-icon {
        width: 30px;
    }

    .header .header-box .header-content .logo {
        height: 30px;
    }

    .header .header-box .header-content .header-but .header-search .search-con i {
        font-size: 16px;
    }

    .indexcontent .i-about .i-about-list .i-about-list2 .i-about-list3 .i-about-icon i {
        font-size: 28px;
    }

    .sizecontent .size-box .size-box2 .size-img {
        width: 366px;
    }

    .more-but {
        width: 140px;
        height: 38px;
    }

    .index-banner .banner-pagination {
        transform: scale(0.8);
    }

    .fooder .fooder-top .fooder-box2 .fooder-mesbox .fooder-mes .fooder-mes2 {
        max-width: 400px;
    }

    .fooder .fooder-top .fooder-box1 .fooder-left {
        width: 680px;
    }

    .fooder .fooder-top .fooder-box1 .fooder-right {
        width: 280px;
    }

    .fooder .fooder-top .fooder-box1 .fooder-right .fooder-subscribe .fooder-form .fooder-form-content .form-submit {
        font-size: 14px;
    }

    .fooder .fooder-top .fooder-box1 .fooder-right .fooder-subscribe .fooder-form .fooder-form-content .form-submit i {
        margin-left: 2px;
        font-size: 16px;
    }

    .fooder .fooder-top .fooder-box1 .fooder-right .fooder-subscribe .fooder-form .fooder-form-content .input-text {
        width: calc(100% - 60px);
    }

    .fooder .fooder-top .fooder-box1 .fooder-right .fooder-subscribe .fooder-form .fooder-form-content .form-submit {
        width: 60px;
    }

    .i-about-videobox .i-about-video-icon {
        width: 70px;
        height: 70px;
    }

    .i-about-videobox .i-about-video-icon i {
        font-size: 54px;
    }

    .type-tiresbox .type-tiresbox2 {
        padding: 130px var(--d32) var(--d26);
    }

    .aboutcontent .a-certificate .a-certificate-swbox .a-certificate-prev {
        left: -10px;
    }

    .aboutcontent .a-certificate .a-certificate-swbox .a-certificate-next {
        right: -10px;
    }

    .container,
    .header-container {
        max-width: 1010px;
    }
}

@media (max-width: 1200px) {
    .row {
        --bs-gutter-x: 1rem;
    }

    :root {
        --d150: 90px;
        --d140: 60px;
        --d130: 60px;
        --d115: 50px;
        --d110: 60px;
        --d100: 40px;
        --d93: 50px;
        --d70: 40px;
        --d50: 20px;
        --d48: 30px;
        --d46: 25px;
        --d37: 20px;
        --d14: 10px;
        --50: 32px;
        --36: 28px;
        --20: 16px;
        --18: 14px;
    }

    .faq-list1 .faq-list2 .faq-titlebox .faq-plue i {
        font-size: 16px;
    }

    .contactcontent .contact-box .contact-box2 .contact-right {
        width: 388px;
    }

    .sizecontent .size-box .size-box2 .size-img {
        width: 300px;
    }

    .shopcontent .shop-logo .shop-logo2 {
        width: 200px;
    }

    .tiresdetails .details .detproductbox .detproduct-textbox .detproduct-img {
        min-width: 400px;
    }

    .details-right {
        position: relative;

        &::after {
            width: 100vw;
            height: 140%;
            content: '';
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translate(-50%, 0%);
            background-color: #f5f5f5;
            z-index: -1;
        }
    }

    .tiresdetails .details-box::after {
        display: none;

    }

    .tiresdetails .details-box .details-content .details-left .details-imgbox .details-swiper2 {
        width: 800px;
        max-width: 100%;
    }

    .tiresdetails .details-box .details-content .details-left {
        width: 100%;
        margin-bottom: var(--d40);
    }

    .tiresdetails .details-box .details-content .details-right {
        width: 100%;
    }

    .tiresdetails .details-box .details-content .details-content2 {
        flex-direction: column;
    }

    .tirescontent .tires-navbox .tires-type-nav .tires-type-nav2 a {
        font-size: 12px;
    }

    .aboutcontent .a-certificate .a-certificate-swbox .a-certificate-prev {
        left: 0;
        transform: translateY(-50%);
    }

    .aboutcontent .a-certificate .a-certificate-swbox .a-certificate-next {
        right: 0;
        transform: translateY(-50%);
    }

    .a-certificate-swbox {
        padding: 0 50px;
    }

    .aboutcontent .a-about .a-about-bg {
        top: 19%;
        height: 723px;
    }

    .indexcontent .i-story {
        padding-top: var(--d100);
    }

    .i-about-videobox {
        height: 400px;
    }

    .fooder .fooder-top .fooder-box2 .fooder-mesbox .fooder-mes .fooder-mes2 {
        max-width: 300px;
    }

    .indexcontent .i-about .i-about-bg {
        height: 608px;
    }

    .type-tiresbox .type-tiresbox2 {
        padding: 85px var(--d32) var(--d26);
    }

    .header .header-box .header-content .header-left .header-nav1 {
        width: 0;
        height: 0;
        overflow: hidden;
    }

    .fooder .fooder-bom .fooder-bom2 {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .fooder .fooder-bom .fooder-bom2 .fooder-right2 {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        margin-top: 5px;
    }

    .container,
    .header-container {
        max-width: 900px;
    }
}

@media (max-width: 980px) {
    :root {
        --80: 30px;
        --50: 30px;
        --36: 24px;
        --30: 20px;
        --26: 20px;
        --22: 16px;
        --15: 14px;
    }

    .carecontent .care-box .care-list .care-list2 .care-list3 .care-list-img .care-list-icon {
        width: 50px;
        height: 50px;
    }

    .guide .guide-box {
        width: 90%;
    }

    .guide .guide-box .guide-butbox .guide-but {
        width: 225px;
        height: 45px;
    }

    .guide .guide-box .guide-logo {
        width: 340px;
    }

    .carecontent .care-box .care-list .care-list2 .care-list3 .care-list-img .care-list-icon {
        right: 10px;
    }

    .contactcontent .contact-box .contact-box2 {
        flex-direction: column;
        -webkit-clip-path: polygon(10% 0%, 80% 0%, 100% 0, 100% 93%, 90% 100%, 20% 100%, 0 100%, 0% 7%);
        clip-path: polygon(10% 0%, 80% 0%, 100% 0, 100% 93%, 90% 100%, 20% 100%, 0 100%, 0% 7%);
    }

    .contactcontent .contact-box .contact-box2 .contact-left {
        width: 100%;
    }

    .contactcontent .contact-box .contact-box2 .contact-right {
        width: 100%;
        margin-top: var(--d100);
    }

    .sw-butbox .sw-but {
        width: 36px;
        height: 36px;
    }

    .sizecontent .size-box .size-box2 {
        flex-direction: column-reverse;
    }

    .sizecontent .size-box .size-box2 .size-img {
        width: 100%;
        margin-right: 0;
        margin-top: var(--d20);
    }

    .pagination li a {
        width: 32px;
        height: 32px;
    }

    .tirescontent .tires-navbox .tires-type-nav {
        flex-wrap: wrap;
        margin-bottom: calc(-1 * var(--d20));
        padding-bottom: var(--d80);
    }

    .tirescontent .tires-navbox .tires-type-nav .tires-type-nav2 {
        margin-bottom: var(--d20);
    }


    .type-list {
        margin-bottom: -80px;
    }

    .type-list .type-list2 {
        margin-bottom: 80px;
    }

    .tiresdetails .details-nav .navbox {
        overflow-x: scroll;
    }

    .tiresdetails .details-nav .navbox .navbox2 {
        width: auto;
        padding: 0 20px;

    }

    .tiresdetails .details .detproductbox .detproduct-textbox .detproduct-img {
        min-width: 260px;
    }

    .more-but {
        width: 120px;
        height: 30px;
    }

    .index-banner .banner-pagination {
        transform: scale(0.6);
    }

    .indexcontent .i-about .i-about-list {
        --bs-gutter-x: 1rem;
    }

    .fooder .fooder-top .fooder-box1 .fooder-left {
        display: none;
    }

    .fooder .fooder-top .fooder-box1 .fooder-right {
        width: 100%;
    }

    .fooder .fooder-top .fooder-box2 .fooder-mesbox .fooder-mes .fooder-mes2 {
        margin-right: 0;
        margin-bottom: var(--d20);
        width: 50%;

        &:last-child {
            width: 100%;
            max-width: 100%;
        }
    }

    .type-tiresbox .type-img {
        width: 48.84848%;
    }

    .type-tiresbox .type-title {
        width: 100%;
    }

    .type-tiresbox .type-tiresbox2 {
        padding: 115px var(--d32) var(--d26);
    }

    .fooder .fooder-top .fooder-box2 .fooder-mesbox .fooder-mes {
        flex-wrap: wrap;
    }

    .container,
    .header-container {
        max-width: 700px;
    }

}

@media (max-width: 768px) {
    :root {
        --d140: 50px;
        --d120: 50px;
        --d90: 25px;
        --d70: 20px;
        --d60: 20px;
        --d40: 20px;
        --d48: 20px;
        --d35: 15px;
        --d30: 10px;
        --d26: 10px;
        --d14: 6px;
        --70: 30px;
        --50: 24px;
        --30: 20px;
    }

    .carecontent .care-box .care-list::after {
        display: none;
    }

    .contactcontent .contact-box .contact-box2 {
        flex-direction: column;
        -webkit-clip-path: polygon(10% 0%, 80% 0%, 100% 0, 100% 97%, 90% 100%, 20% 100%, 0 100%, 0% 3%);
        clip-path: polygon(10% 0%, 80% 0%, 100% 0, 100% 97%, 90% 100%, 20% 100%, 0 100%, 0% 3%);
    }

    .other-banner {
        height: 150px;
    }

    .tiresdetails .details .inquiry .inquiry-from .textarea-box {
        height: 200px;
    }

    .tiresdetails .details .detproductbox .detproduct-textbox {
        flex-direction: column !important;
    }

    .tiresdetails .details .detproductbox .detproduct-textbox .detproduct-img {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: var(--d30);
        max-width: 100%;
    }

    .fooder-mes {
        margin-bottom: var(--d20);
    }

    .banner-swiper {
        height: 300px;

        .swiper-wrapper {
            height: 100%;

            .slide-inner {
                height: 100%;
            }
        }
    }

    .header .header-box .header-content .header-but .header-search .search-con {
        span {
            display: none;
        }
    }

    .header .header-box .header-content .logo {
        margin-right: 0;
    }

    .i-about-videobox .i-about-video-icon {
        width: 50px;
        height: 50px;
    }

    .i-about-videobox .i-about-video-icon i {
        font-size: 38px;
    }

    .fooder {
        padding-bottom: 59px;
    }

    .indexcontent .i-story .i-story-list .i-story-list2 .i-story-list3 .i-story-list-title i {
        font-size: 20px;
    }

    .indexcontent .i-story .i-story-list .i-story-list2 .i-story-list3 .i-story-list-title {
        line-height: 1;
    }

    .indexcontent .i-about .i-about-list .i-about-list2 .i-about-list3 .i-about-icon i {
        font-size: 25px;
    }

    .indexcontent .i-about .i-about-bg {
        top: 26%;
    }

    .i-about-videobox {
        height: 300px;
    }

    .type-tiresbox .type-img {
        width: 170px;
    }

    .container,
    .header-container {
        max-width: 90%;
    }
}

@media (max-width: 540px) {
    :root {
        --d100: 30px;
    }

    .guide .guide-box .guide-logo {
        width: 255px;
    }

    .guide .guide-box .guide-butbox {
        flex-direction: column;
    }

    .guide .guide-box .guide-butbox .guide-but {
        margin: 0;
        margin-bottom: var(--d20);

        &:last-child {
            margin-bottom: 0;
        }
    }

    .header .header-box .header-content {
        height: 45px;
    }

    .shopcontent .shop-box .input-text {
        height: 100%;
        width: calc(100% - 100px);
    }

    .shopcontent .shop-box {
        height: 40px;
    }

    .shopcontent .shop-box .submit i {
        font-size: 12px;
    }

    .shopcontent .shop-box .submit {
        width: 100px;
        height: 100%;
    }

    .aboutcontent .a-about .a-about-bg {
        top: 53%;
        height: 500px;
    }

    .tires-menu {
        top: 76px;
    }

    :root {
        --d140: 40px;
        --d120: 40px;
        --d80: 20px;
        --d55: 15px;
        --d50: 20px;
        --d40: 15px;
        --80: 24px;
        --50: 24px;
        --36: 22px;
    }

    .tiresdetails .details-box .details-content .details-left .details-imgbox .details-swiperbox .details-prev {
        margin-right: 0;
    }

    .tiresdetails .details-box .details-content .details-left .details-imgbox .details-swiperbox .details-next {
        margin-left: 0;
    }

    .index-banner .banner-textbox .banner-title1 {
        margin-bottom: 10px;
    }

    .index-banner .banner-textbox .banner-title2 {
        margin-bottom: 10px;
    }

    .index-banner .banner-textbox .banner-text {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .type-tiresbox .type-img {
        width: 135px;
    }

    .type-tiresbox .type-tiresbox2 {
        padding: 86px var(--d32) var(--d26);
    }

    .reviews-titlebox {
        flex-direction: column;
    }

    .tiresdetails .details .reviews .reviews-titlebox .write {
        text-align: right;
        margin-top: var(--d10);
    }

    .faq-list1 .faq-list2 .faq-titlebox .faq-list-title {
        font-size: 14px;
    }

    .i-story-list2 {
        margin-bottom: var(--d30);

        &:last-child {
            margin-bottom: 0;
        }
    }

    .fooder .fooder-top .fooder-box2 .fooder-mesbox {
        flex-direction: column;
        align-items: flex-end;
    }
}

@media (max-width: 540px) {
    .tires-menu .type-tiresbox .type-img {
        width: 85px;
    }

    .tires-menu .tires-menu-content .swiper-wrapper .swiper-slide .tiresmenu-box2 .type-tiresbox .type-tiresbox2 {
        padding: 35px var(--d24) var(--d18);
    }
}


.setSlow1 {
    animation: slowAm1 1s forwards;
}

.setSlow2 {
    animation: slowAm2 1s forwards;
}

.setSlow3 {
    animation: slowAm3 1s forwards;
}

@keyframes slowAm1 {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes slowAm2 {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes slowAm3 {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}