@import url('https://fonts.googleapis.com/css2?family=Zen+Antique&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@200..900&display=swap');

/* Overall */
#main_index{
    overflow: hidden;
    padding-bottom: 0px !important;
    color: #34140d;
}
a:hover{
    text-decoration: unset;
}
:root{
    --pcolor: #35140d;
    --scolor: #de8d66;
    --tfont: "Zen Antique", serif;
    --spadding: 5rem;
}

html:lang(zh-Hans) {
    --tfont: "Noto Serif SC", serif;
}

/* title */
.title-style{    
    font-family: var(--tfont);
    font-weight: 400;
    font-size: clamp(1.65rem, 2vw, 2vw);
    margin: 0;    
}
.subtitle-style{
    font-family: var(--tfont);
    font-weight: 400;
    font-size: clamp(1.15rem, 1.35vw, 1.35vw);
}
.title-desc{    
    font-size: clamp(.9rem, .96vw, .96vw);
    font-weight: 400;    
    line-height: 1.65;
    margin: 0;
}

/* btn */
.main-btn{
    padding: 12px 18px;
    border: unset;
    font-size: clamp(.8rem, .85vw, .85vw) !important;
    transition: all .3s linear;
    
    &:hover{
        background: var(--scolor) !important;
        transform: scale(1.1) !important;
    }
}

@media(max-width:1200px){
    .main-btn{
        padding: 10px 15px;
    }
}

/* Nav */
.navbar_type8{
    height: 80px;
    background: var(--pcolor);
    padding: 0;
}
.navbar_type8 .logo{
    margin-left: 6rem;  
    flex: unset;
    min-width: 13%;    
}
.navbar_type8 .logo img{
    padding: 0px;
    width: 100%;
    object-position: left;
}

.navbar_type8 .nav_tab{
    flex: unset;
    width: 100%;
    padding-right: 6rem;
    gap: 3vw;  
}
.navbar_type8 .nav_tab .nav_item:before{
    border-color: var(--scolor);
    border-width: 2px;
    width: 0;
    transition: all .3s linear;
}
.navbar_type8 .nav_tab .nav_item a{
    color: #fff;
    padding: 0;
    font-size: clamp(.7rem, .87vw, .87rem);
    font-weight: 300;
    text-transform: capitalize;    
}
.navbar_type8 .nav_tab .nav_item a:hover{
    color: var(--scolor);
}
.navbar_type8 .nav_tab .nav_item:hover:before{
    display: none;
}
.navbar_type8 .nav_tab .nav_item:last-child a{
    border: 1px solid #fff;
    padding: 8px 16px;
    
    &:hover{
        color: #fff;
        border-color: var(--scolor);
        background: var(--scolor);        
    }
}

.dark_nav{
    background: rgba(53, 20, 13, 0.9) !important;
}

.navbar_mobile{
    background: var(--pcolor);
}
.navbar_mobile .btn-outline-light{
    color: #fde8e1;
    border-color: #fde8e1;
}

@media(max-width:1300px){
    .navbar_type8 .nav_tab{
        padding-right: 3rem;                
        gap: 2.25vw;
    }
    .navbar_type8 .logo{
        margin-left: 3rem;
    }    
    .navbar_type8 .nav_tab .nav_item:last-child a{
        padding: 5px 10px;
    }
}

/* Slider */
.hp_banner{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.title-box h2{
    color: var(--scolor);
    font-family: var(--tfont);
    font-weight: 400;
    font-size: clamp(1.7rem, 2.3vw, 2.3vw);
    margin: 0;
}
.title-box h3{
    color: #fff;
    font-size: clamp(.9rem, 1.1vw, 1.1vw);
    font-weight: 400;
    line-height: 1.7;
    margin: 1.5rem 0 2.5rem;
}

.video-wrapper{
    width: 50%;
    height: auto;
    margin: auto;
    margin-top: 4em;    
    margin-bottom: 0;
}
.video-box{
    width: 100%;
    position: relative;
    padding-top: 56.25%;
    height: 0;
    overflow: hidden;  
    
    video{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media(max-width:1200px){
    .title-box h3{
        margin: 1.85rem 0 2.25rem;
    }
}

@media(max-width:991px){
    .slider_banner .item > img{
        min-height: 70vw;
        object-fit: cover;
    }
    .video-wrapper{
        width: 55%;
    }
}

@media(max-width:768px){
    .slider_banner .item  > img{
        min-height: 100vw;
    }
    .title-wrapper{
        width: 85%;
        margin: 0 auto;
    }
    .video-wrapper{
         width: 85%;
    }
}

@media(max-width:576px){
    .slider_banner .item > img{
        min-height: 150vw;
    }
}

/* metric */
.hp_metric{
    background: url(https://cdn1.npcdn.net/images/B_Background_xj0i26_1777865408.jpg?md5id=efaf6bf0f5a9fc501c049e2fc85f8be4&new_width=3600&new_height=1465&type=4);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: var(--spadding) 19.5%;
}

.hp_metric .title-wrap{    
    margin: auto;
}

.metric-list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2rem;
    row-gap: 4rem;
}
.metric-main{
    display: flex;
    gap: 1rem;
    align-items: end;
}
.metric-main .metric-number{
    font-size: clamp(2.75rem, 3.35vw, 3.35vw);
    line-height: 1;
}
.metric-main h5{
    font-size: clamp(1rem, 1.45vw, 1.45vw);
    line-height: 1;
    margin-bottom: 0;
}
.metric-box p{
    margin-top: 1rem;
    margin-bottom: 0;
    font-weight: 500;
    font-size: clamp(.82rem, .92vw, .92vw);
    line-height: 1.25;
}

@media(max-width:991px){
    .metric-list{
        grid-template-columns: repeat(2, 1fr);
    }    
    .metric-main{
        align-items: baseline;
    }
}

@media(max-width:768px){
    .hp_metric{
        padding: var(--spadding) 20px;
    }
    .metric-main{
        flex-direction: column;
        gap: .5rem;
    }
    .metric-box p{
        font-weight: 300;
    }
}

/* Media */
.hp_media{
    padding: var(--spadding) 0;
    background: #fbf2e9;
}
.hp_media .title-wrap{
    padding: 0 19.5%;
}
.media-box{
    display: flex;  
    transform: scale(1.025);    
    animation: scrollLeft 40s linear infinite;    
    animation-composition: add;
}
.media-box.reverse{
    animation: scrollRight 40s linear infinite;
    margin-top: 2rem;
}
.media-list{
    display: flex;
    align-items: center;
    min-width: 100%;    
}

@keyframes scrollLeft{
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-100%);
    }
}

@keyframes scrollRight{
    0%{
        transform: translateX(-100%);
    }
    100%{
        transform: translateX(0%);
    }
}

@media(max-width:1200px){
    .hp_media{
        padding: var(--spadding) 0 calc(var(--spadding) * 1.1);
    }
    .media-box{        
        transform: scale(1.5);
    }
    .media-box.reverse{        
        margin-top: 4rem;
    }
}

@media(max-width:768px){
    .hp_media .title-wrap{
        padding: 0 20px;
    }
    .media-box{        
        transform: scale(2);
    }
}

@media(max-width:576px){
    .media-box{
        transform: scale(3.5);
    }
}    

/* Journey */
.hp_journey{
    background: url(https://cdn1.npcdn.net/images/D_Background_um37bl_1777877420.jpg?md5id=efaf6bf0f5a9fc501c049e2fc85f8be4&new_width=3600&new_height=2153&type=4);
    background-size: cover;
    background-position: center;
    padding: var(--spadding);
}

.j-outer{
    padding: 0 8px;
}
.j-frame{
    transition: all .3s linear;
}
.j-info h3{
    font-family: var(--tfont);
    font-size: clamp(1rem, 1.12vw, 1.12vw);
    font-weight: 500;
    margin: 1rem 0;
}
.j-info p{
    font-size: clamp(.85rem, .95vw, .95vw);
    font-weight: 400;
    margin: 0;
}

.j-box:hover .j-frame{
    transform: translateY(-20px);
}

@media(max-width:768px){
    .hp_journey{
        padding: var(--spadding) 20px;
    }
    .j-outer:not(:last-child){
        margin-bottom: 2.5rem;
    }
    .j-info h3{
        font-size: 140%;
        margin-top: 2rem;
    }
}

/* Question */
.ques-wrap{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: grid;
    place-content: center;
    width: 30%;
    margin: 0 calc((100% - 30%) / 2);
    text-align: center;
}

@media(max-width:991px){
    .ques-wrap{        
        width: 50%;
        margin: 0 25%;
    }
}

@media(max-width:768px){
    .ques-wrap{        
        width: 75%;
        margin: 0 calc((100% - 75%) / 2);
    }
}

@media(max-width:600px){    
    .ques-wrap{
        width: 100%;
        margin: 0;
        padding: 0 20px;
    }
    .ques-bg img{
        height: 600px;
        width: 100%;
        object-fit: cover;
    }
}

/* How */
.hp_how{
    background: url(https://cdn1.npcdn.net/images/F_Background_bpfq64_1777880020.jpg?md5id=efaf6bf0f5a9fc501c049e2fc85f8be4&new_width=3600&new_height=2766&type=4);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: calc(var(--spadding) * 1.35) 12%;    
}
.how-wrapper{
    grid-column-gap: 4em;
    grid-row-gap: 3em;
    flex-flow: column;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1.5fr;
    grid-auto-columns: 1fr;
    justify-content: flex-start;
    align-items: start;    
    display: grid;
}

@media(max-width:768px){
    .hp_how{
        padding: var(--spadding) 20px;
    }
    .how-wrapper{
        grid-template-columns: repeat(1, 1fr);
    }
}

/* Point */
.hp_point{
    background: url(https://cdn1.npcdn.net/images/G_Background_4ujr2t_1777881311.jpg?md5id=efaf6bf0f5a9fc501c049e2fc85f8be4&new_width=3600&new_height=2223&type=4);
    background-size: cover;
    background-position: center;
    padding: calc(var(--spadding) * 1.25) 0;
}

.hp_point .col-12{
    gap: 2rem;
}

.hp_point .title-wrap{
    text-align: center;
}

.point-list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 70%;    
    column-gap: 3rem;
    row-gap: 2rem;
}
.point-item{
    text-align: center;
}
.point-item:hover .point-icon{
    animation: swing .8s linear;
}
.point-icon{
    width: 25%;
    margin: auto;
}
.point-info h3{
    color: #fff;
    font-family: var(--tfont);
    font-weight: 300;
    font-size: clamp(1rem, 1.15vw, 1.15vw);
    margin: 1.5rem 0 1rem;
}
.point-info p{
    color: #fff;
    font-weight: 400;
    margin: 0;
}

.hp_point h4.title-desc{
    padding: 1rem 0;
}

@media(max-width:1200px){
    .hp_point .col-12{
        gap: 2.5rem;
    }
    .point-icon{
        width: 35%;
    }
}

@media(max-width:991px){
    .hp_point h4.title-desc{
        padding: 0 10%;
    }
    .point-icon{
        width: 45%;
    }
}

@media(max-width:768px){
    .point-list{
        grid-template-columns: repeat(2, 1fr);
    }
    .point-icon{
        width: 80px;
    }
}

@media(max-width:576px){
    .hp_point{
        padding: var(--spadding) 20px;
    }
    .point-list{
        width: 100%;
        gap: 2rem;
    }
    .hp_point h4.title-desc{
        padding: 0;
    }
}

/* Contact */
.hp_contact .title-wrap{
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 0 6rem 7.5rem;
}
.hp_contact .title-big{
    position: absolute;
    top: 12%;
    right: 13%;
    font-family: var(--tfont);
    font-size: clamp(1.65rem, 3vw, 3vw);
    font-weight: 500;
    
    span{
        margin-left: 13%;
        white-space: nowrap;
    }
}

.hp_contact .title-wrap .title-desc{
    font-weight: 300;
    margin: 2rem 0 3.6rem;
}
.hp_contact .title-wrap .title-style{
    font-size: clamp(1.35rem, 1.8vw, 1.8vw);
}

.btn-group{
    gap: 1rem;
}
.btn-group .main-btn{
    border: 1px solid var(--pcolor);
    padding: 8px 20px;
    
    &:hover{
        color: #fff;
        border:1px solid transparent;
    }
}
.main-btn.outline{
    background: transparent;    
    color: #000;
}

@media(max-width:1200px){
    .hp_contact .title-wrap{
        padding: 0 0 5% 6%
    }
    .hp_contact .title-wrap .title-desc{
        margin: 1.25rem 0;
    }
}

@media(max-width:991px){
    .contact-bg img{
        height: 450px;
        object-fit: cover;
        object-position: left;
    }    
    .hp_contact .title-wrap .title-style{
        font-size: 130%;
    }
    .hp_contact .title-wrap .title-desc{
        font-size: 105%;
    }
    .hp_contact .title-wrap,
    .hp_contact .title-big{
        position: unset;
    }
    
    .hp_contact .title-big{
        text-align: center;
        
            span{
            margin: 0;
            white-space: nowrap;
        }
}
    
    .con-main{
        display: flex;
        flex-direction: column-reverse;
        align-items: center;                
        justify-content: center;
        padding: 3rem;
        gap: 1.75rem;
        
        position:absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;        
    }
    
    .hp_contact .title-wrap{
        text-align: center;
        padding: 0;
    }
}

/* Footer */
.footer_type7{
    font-size: clamp(.8rem, .87vw, .87vw);
    font-weight: 300;
    background: var(--pcolor);
}
.footer_type7 .logo{
    min-height: 60px;
    
    img{
        max-height: 60px;
    }
}
.footer_type7 .title h5{
    font-size: clamp(1rem, 1.2vw, 1.2vw);
    text-transform: uppercase;
}

.footer_type7 .social_media{
    display: flex;
    justify-content: end;    
    gap: .5rem;
    margin-right: -8px;
}
.footer_type7 .social_media a{
    width: 20px;
    height: 20px;
    background: #fff;
    display: grid;
    place-content: center;
    border-radius: 50%;
    margin: 0;
    
    i{
        font-size: 100%;
        color: var(--pcolor);
    }    
}

.footer_type7 a:hover{
    color: var(--scolor);
}

@media(min-width:991px){
    .footer_type7 .company-des{
        width: 75%;
    }   
    .footer_type7 .location {
      width: 70%;
    }
}

@media(max-width:768px){
    .footer_type7 .border-none{
        border: unset !important;
    }
    .footer_type7 .social_media{
        justify-content: center;
        margin: 0;
    }
}

@media(max-width:576px){
    .footer_type7 .logo{
        min-height: 50px;

        img{
            max-height: 50px;
        }
    }
    .footer_type7 .social_media a{
        width: 30px;
        height: 30px;
        
        i{
            font-size: 120%;
        }
    }
}

/* translate */
.npfooter_languagebar .text-muted {
  color: #fff !important;
}

html:lang(zh-Hans){
    .title-big,
    .title-style{
        font-weight: 700;
    }
}