* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*, ::before, ::after {
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
html {
    overflow:hidden;
    overflow-y:auto;
}
a, a:hover, a:active, a.active, a:focus {
    text-decoration: none;
    color: #212121;
}
body {
    font-size:13px;
    letter-spacing: 0;
    line-height: 1;
    text-transform: capitalize;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #212121;
    background-color: #fff;
    font-weight:400;
    margin:0;
    padding:0;
}
a, p, ol, ul li{
    letter-spacing: 0;
    line-height: 1;
    text-transform: capitalize;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
html body, body #wrapper {
    overflow-x: hidden;
}
ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
}
img {width:100%;height:100%;object-fit: cover;}
.section{padding: 88px 0;}.mt-spacing{margin-top: 42px;}.pt-spacing{padding-top: 42px;}
.container{padding: 0 15px;width:100%;max-width: 1200px;margin: 0 auto;}.container-none{ padding:0 15px;}
.container:after{content: none;}.container:before{content: none;}
.ai-none,.si-none,.ci-none,.mi-none,.ei-none{display: none !important;}.clear{clear: both;}
@media only screen and (max-width: 1199px) {
    .ci-none{ display: block !important;}.c-none {display: none!important;}
}
@media only screen and (max-width: 991px) {
    .container-none { padding: 0 15px;}
    .section{padding: 50px 0;}
    .si-none{display:block !important;}.s-none{display: none !important;}
}
@media only screen and (max-width: 767px) {
    .container{padding: 0 15px !important;}
    .section{padding: 50px 0;} .mt-spacing {margin-top: 40px;}
    .mi-none{display: block !important;}.m-none{display: none !important;}
}
@media only screen and (max-width: 576px) {
    .ei-none{display: block !important;}.e-none{display: none !important;}
}

.nobanner { padding-top: 120px; }
.head-share ul li .social-item:hover { background: none; color: var(--color); }
.head-info { height: 81px; }
.head-info .head-logo a img { max-height: 42px; }
.head-info .nav-ul>li a { font-size: 16px; }
@media (min-width: 1024px) {
    .head-info .nav-ul>li { position: revert; }
    .head-info .nav-ul>li .submenu { width: 100%; max-width: 1700px; padding: 35px 70px;  transform: scaleY(0) translateX(-50%); left: 50%; display: flex; flex-wrap: wrap; background: none }
    .head-info .nav-ul>li .submenu:before { content: ''; position: absolute; left: -110px; top: 0; width: calc(100% + 220px); height: 100%; background-color: #000000d9; }
    .head-info .nav-ul>li:hover .submenu {  transform: scaleY(1) translateX(-50%); }
    .head-info .nav-ul>li>.submenu em { right: 20px; }
    .head-info .nav-ul>li>.submenu .menu-item ul { left: auto; right: 0; z-index: 48; padding: 0; background: #000000e6; }
    .head-info .nav-ul>li>.submenu>li { width: 33.333%; }
    .head-info .nav-ul>li>.submenu>li a { padding: 12px 60px 12px 20px; }
    .head-info .nav-ul>li:hover .submenu li.LiLevel2:hover>a { background: none; color: #c99f72; }
}
@media (max-width: 1024px) {
    .nobanner { padding-top: 55px; }
    .head-link { margin-top: 10px; }
    .head-info { height: 55px; }
    .head-info .head-nav .nav-ul { height: 100%; padding: 10px 0 100px; }
    .head-info .head-nav .nav-ul>li a { font-size: 17px; padding: 12px 50px 12px 20px; }
    .head-info .head-nav .nav-ul>li>em { top: 0; }
    .head-info .head-nav .nav-ul>li .submenu ul a { font-size: 15px; color: #767676; }
}

.btn {
    display: inline-block;
    min-width: 148px;
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    background: #c99f72;
    border: 1px solid transparent;
    line-height: 1.5;
    letter-spacing: 0.03rem;
    border-radius: 5px;
    text-transform: capitalize;
    font-weight: 500;
    margin-top: 24px;
}
.btn:hover {  color: #fff; }

.head-link { margin-left: 0; }
.main-title { font-size: 36px; font-weight: 600; color: #333; text-align: center; text-transform: revert; margin: 0 0 24px; padding-bottom: 24px; position: relative; }
.main-title:before { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 78px; height: 4px; background: #153a6e;  }
.main-describe { text-align: center; max-width: 720px; margin: 0 auto 10px; font-size: 14px; color: #666; font-weight: 400; line-height: 1.6; }
@media only screen and (max-width: 991px) {
    .main-title { font-size: 32px; }
}
@media only screen and (max-width: 767px) {
    .main-title { font-size: 24px; }
}

.module-bottom { text-align: center; }
.module-bottom .main-describe { font-size: 18px; color: #c99f72; font-weight: 600; line-height: 1.6; }
.module-bottom .art-button { width: 280px; height: 54px; border-radius: 28px; background: #189d0e; padding: 0 24px 0 53px; display: inline-block; position: relative;  box-shadow: inset 0 0 3px rgba(166, 229, 162, 0.5); }
.module-bottom .art-button .btn-icon { display: inline-block; position: absolute; left: 3px; top: 3px; bottom: 3px; width: 48px; border-radius: 40px; background: #fff; padding: 4px; box-shadow: 3px 0 3px 0 rgba(0,0,0,.5);  }
.module-bottom .art-button .btn-span { display: inline-block; line-height: 52px; font-size: 18px; font-weight: 400; letter-spacing: 0.01rem;  }
.module-bottom .art-button:hover { color: #fff; }

.banner-animote { position: absolute; left: 50%; transform: translateX(-50%); top: 0; bottom: 0; width: 100%; max-width: 1400px; display: flex; justify-content: right; align-items: center;  }
.banner-animote .banner-content { padding: 24px 15px; max-width: 582px; }
.banner-animote .banner-content .title { font-size: 38px; color: #fff; font-weight: 600; margin-bottom: 24px; line-height: 1.2; }
.banner-animote .banner-content .describe { font-size: 24px; color: #fff; font-weight: 400; margin-bottom: 12px; line-height: 1.4; }
@media only screen and (max-width: 1200px) {
    .banner-animote .banner-content { max-width: 46%; }
    .banner-animote .banner-content .title { font-size: 32px;  }
    .banner-animote .banner-content .describe { font-size: 20px; }
}
@media only screen and (max-width: 767px) {
    .banner-animote { justify-content: center; align-items: revert; }
    .banner-animote .banner-content { max-width: 100%; text-align: center; padding-top: 68px; }
    .banner-animote .banner-content .title { font-size: 28px; margin-bottom: 12px; }
    .banner-animote .banner-content .describe { font-size: 18px; }
}
@media only screen and (max-width: 576px) {
    .banner-animote .banner-content { padding-top: 48px; }
    .banner-animote .banner-content .title { font-size: 24px; }
}


.home-procate .main-title { margin-bottom: 68px; }
.procate-list { display: flex; flex-wrap: wrap; }
.procate-list .procate-item { width: 25%; padding: 0 15px; margin-bottom: 32px; }
.procate-list .procate-item .procate-item_unit { height: 100%; border-radius: 5px; overflow: hidden; border: 1px solid #ddd; }
.procate-list .procate-item .procate-img { display: flex; justify-content: center; }
.procate-list .procate-item .procate-img img { max-width: 90%;  }
.procate-list .procate-item .procate-title { padding: 24px 12px 18px; }
.procate-list .procate-item .procate-title h3 { font-size: 17px; font-weight: 600; line-height: 1.2;   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 18px; }
.procate-list .procate-item .procate-title .tags {  padding: 2px 5px; color: #fff; background: #c99f72; font-size: 12px;  }
.procate-list .procate-item .procate-title .procate-btn { display: block; border-radius: 5px; background: rgba(201, 159, 114, 0.06); font-size: 15px; color: #c99f72; font-weight: 600;  transition: all .3s }
.procate-list .procate-item .procate-title .procate-btn:hover { background: #c99f72; color: #fff;  }
@media only screen and (max-width: 1024px) {
    .procate-list .procate-item { padding: 10px; }
}
@media only screen and (max-width: 991px) {
    .home-procate .main-title { margin-bottom: 48px; }
    .procate-list .procate-item { width: 33.3333%; }
}
@media only screen and (max-width: 767px) {
    .procate-list .procate-item { width: 50%;  padding: 8px; }
}

.home-about .main-title { text-align: left; }
.home-about .main-title:before { left: 0; width: 108px; height: 2px; transform: revert; }
.home-about .about-content { display: flex; flex-wrap: wrap;  justify-content: space-between; }
.home-about .about-content .about-img { width: 50%; border-radius: 8px; overflow: hidden;  }
.home-about .about-content .about-info { width: 50%; padding: 48px 60px 20px 20px; }
.home-about .about-content .about-info .about-title { font-size: 24px; font-weight: 600; color: #c99f72;  line-height: 1.4; margin-bottom: 24px; max-width: 540px; }
.home-about .about-content .about-info .about-text { font-size: 15px; color: #767676; line-height: 1.6; max-width: 580px; }
@media only screen and (max-width: 991px) {
    .home-about .about-content .about-info { width: 50%; padding: 20px; }
    .home-about .about-content .about-info .about-title { font-size: 20px; }
    .home-about .about-content .about-info .about-text { font-size: 15px; }
}
@media only screen and (max-width: 767px) {
    .home-about { margin-top: 0; }
    .home-about .about-content .about-img { width: 100%; }
    .home-about .about-content .about-info { width: 100%; padding: 20px; }
    .home-about .about-content .about-info .about-title { font-size: 18px; }
    .home-about .about-content .about-info .about-text { font-size: 14px; }
}

.home-guide { background: url("../images/home/channels4.jpg") no-repeat 50%; background-size: cover; position: relative; }
.home-guide:after { content: ''; position: absolute; inset: 0; background-color: rgba(0,0,0,.75); }
.home-guide .l-wrap { position: inherit; z-index: 1; }
.home-guide .module-title .main-title { font-size: 24px; color: #fff; padding-bottom: 0; }
.home-guide .module-title .main-title:before { content: none; }
.home-guide .guide-content { text-align: center; }
.home-guide .guide-content .describe { font-size: 18px; color: #fff; line-height: 1.4; max-width: 920px; margin: 0 auto; }

.home-projects .main-title { margin-bottom: 68px; }
.projects-list { display: flex; flex-wrap: wrap; }
.projects-list .projects-item { width: 25%; padding: 0 15px; margin-bottom: 32px; }
.projects-list .projects-item .projects-item_unit { height: 100%; border-radius: 5px; overflow: hidden; border: 1px solid #ddd; }
.projects-list .projects-item .projects-img { display: block; height: 248px; overflow: hidden; }
.projects-list .projects-item .projects-img img {  transition: all .5s; }
.projects-list .projects-item .projects-img:hover img {  transform: scale(1.04); }
.projects-list .projects-item .projects-title { padding: 24px 12px 18px; }
.projects-list .projects-item .projects-title h3 { font-size: 20px; font-weight: 600; line-height: 1.2;   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 18px; }
.projects-list .projects-item .projects-title .projects-btn { display: block; border-radius: 5px; background: rgba(201, 159, 114, 0.06); font-size: 15px; color: #c99f72; font-weight: 600;  transition: all .3s }
.projects-list .projects-item .projects-title .projects-btn:hover { background: #c99f72; color: #fff;  }
@media only screen and (max-width: 1024px) {
    .projects-list .projects-item { padding: 10px; }
}
@media only screen and (max-width: 991px) {
    .projects-list .projects-item { width: 33.3333%; }
}
@media only screen and (max-width: 767px) {
    .projects-list .projects-item { width: 50%;  padding: 8px; }
}

.bottom-advantage { padding-bottom: 90px; }
.bottom-advantage .content-parts { display: flex; flex-wrap: wrap; padding: 24px 0; }
.bottom-advantage .content-parts .content-item { width: 50%; border-radius: 8px; overflow: hidden; }
.bottom-advantage .content-parts .content-array { width: 50%; padding-left: 40px; }
.bottom-advantage .content-parts .main-title { text-align: left; }
.bottom-advantage .content-parts .main-title:before { left: 0; width: calc( 100% - 68px ); height: 3px; transform: revert; }
.bottom-advantage .content-array h3 { font-size: 20px; color: #565757; font-weight: 600; letter-spacing: -0.01rem; margin-bottom: 12px; }
.bottom-advantage .content-array p { font-size: 14px; color: #565757; line-height: 1.6; margin-bottom: 12px; }
.bottom-advantage .module-bottom { text-align: left; }
.bottom-advantage .module-bottom .main-describe { max-width: 100%; color: #c99f72; font-size: 17px; text-align: left; }
@media only screen and (max-width: 991px) {
    .bottom-advantage .content-parts .main-title:before { background: #fff; opacity: .45 }
    .bottom-advantage .content-parts .content-item { width: 100%;  display: none; }
    .bottom-advantage .content-parts .content-array { width: 100%; padding: 68px 48px; position: relative; border-radius: 8px; background: url("../images/home/banner1.jpg") no-repeat 50%; background-size: cover; }
    .bottom-advantage .content-parts .content-array:before { position: absolute; inset: 0; content: ''; background: rgba(0,0,0,.75);  border-radius: 8px;  }
    .bottom-advantage .content-parts .text-array,.bottom-advantage .content-parts .module-bottom{ position: inherit; }
    .bottom-advantage .content-parts .main-title,.bottom-advantage .content-array h3,.bottom-advantage .content-array p { color: #fff; }
}
@media only screen and (max-width: 767px) {
    .bottom-advantage .content-parts .content-array { padding: 48px 24px; }
}

footer .foot-share ul .social-item:hover{background:#3C3C3C;color:var(--color)}

.model-banner { position: relative; }
.model-banner:after { position: absolute; content: ''; bottom: 0; height: 208px; left: 0; width: 100%; background: linear-gradient(180deg, rgba(0,0,0,0.0) 11%, rgba(0,0,0,0.75) 100%); }
.model-banner .model-name { position: absolute; right: 68px; bottom: 68px; z-index: 1; }
.model-banner .model-name h2 { font-size:38px; color: #fff; font-weight: 600; }
.changan-karvaan .model-banner .model-name { left: 68px; right: auto; }
.changan-karvaan .procate-list .procate-item .procate-img img { max-width: 100%; }
@media only screen and (max-width: 991px){
    .model-banner .model-name { right: 48px; bottom: 48px; }
    .model-banner .model-name h2 { font-size:32px;}
    .changan-karvaan .model-banner .model-name { left: 48px; right: auto; }
}
@media only screen and (max-width: 767px){
    .model-banner:after { height: 100% }
    .model-banner .model-name { inset: 0;  display: flex; align-items: center; justify-content: center; }
    .model-banner .model-name h2 { font-size:24px;}
}

.model-desc { display: flex; flex-wrap: wrap; }
.model-desc .array-desc { width: 50%; padding: 24px 6.8% 24px 24px; }
.model-desc .array-images { width: 50%; height: auto; max-height: 468px; overflow: hidden; border-radius: 8px;  }
.model-desc .array-desc .title { font-size: 24px; color: #212121; margin: 12px 0 32px; letter-spacing: 0; }
.model-desc .array-desc p { font-size: 16px; margin-bottom: 12px; line-height: 1.7; }
@media only screen and (max-width: 767px) {
    .model-desc .array-desc { padding: 0 0 50px }
    .model-desc .array-desc,.model-desc .array-images { width: 100%; }
}
.model-procate .l-wrap { padding: 0; }

@media only screen and (max-width: 1024px) {
    footer { margin-bottom: 0; }
}