@charset "utf-8";


:root {
    --mainIn: max(184rem, 1640px);

    --mainSectPd: 30rem;
    --mainContMt: 6rem;
}


.cont_sorting20_sect {margin-top: var(--pd2);}

.cont_sorting18_sect {margin-top: var(--pd2);}

.main .main_tit_box > *{opacity: 0; transform: translateY(5rem); transition:  opacity 0.6s ease-in-out, transform 0.6s ease-in-out ;}
.main .main_tit_box.txt_c{text-align: center;}
.main .main_tit_box.flex_box{display: flex; align-items: flex-end; justify-content: space-between;}
.main .main_tit_box .tit{font-size: var(--h4); font-weight: 700; ; transition:  opacity 0.6s ease-in-out, transform 0.6s ease-in-out ;}
.main .main_tit_box .txt{font-size:var(--p3 ); font-weight: 400; margin-top: 2.5rem ; transition:  opacity 0.6s ease-in-out 0.2s, transform 0.6s ease-in-out 0.2s;}
.main .main_tit_box .btn_box{opacity: 0; transform: translateY(5rem); transition:  opacity 0.6s ease-in-out 0.4s, transform 0.6s ease-in-out 0.4s;}
.main .main_tit_box.active > *{transform: unset; opacity:1;}

.main .cont_sorting21_sect  {padding-top: var(--pd2);}
.main .cont_banner11_sect {margin-top: var(--pd3); padding-bottom: var(--pd2);}

.main .cont_sorting20_sect .cont_box .cont .txt_box {color: #fff;}

.main .cont_banner11_sect .banner_img .txt_box {color: #000;}

.main .cont_banner11_sect .com_more_btn {background: rgba(0, 0, 0, 0.40);color: #fff;}
.main .cont_banner11_sect .com_more_btn .ico {background: url('data:image/svg+xml,<svg width="18" height="15" viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.7578 7.96875L10.7813 13.9844L10.1172 14.6484L8.78906 13.3203L9.45313 12.6562L13.8281 8.24219L0.9375 8.24219H0L0 6.36719H0.9375L13.8281 6.36719L9.45312 1.99219L8.78906 1.32812L10.1172 0L10.7812 0.664062L16.7578 6.64062L17.4219 7.30469L16.7578 7.96875Z" fill="white"/></svg>') no-repeat center / contain;}

.main .kv_basic08 .swiper-slide .fixed_video {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: var(--in2); z-index: 1; transition: 0.6s ease-in-out 4.4s; max-width: 80%;}
.main .kv_basic08 .swiper-slide .fixed_video video {width: 100%;}
.main .kv_basic08 .swiper-slide-active .fixed_video {opacity: 0;}
.main .kv_basic08 .swiper-slide .slide_move {}
.main .kv_basic08 .tit_box .tit {transition: 1s ease-in-out 4.5s;}

.site_nav {position: fixed; left: 10rem; top: 50%; transform: translateY(-50%); z-index: 10; display: flex; flex-direction: column; gap: 2rem; opacity: 0; pointer-events: none; transition: 0.3s ease-in-out;}
.site_nav .btn {position: relative; width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; border-radius: 50%; transition: 0.3s ease-in-out;}
.site_nav .btn .cir {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 7px; height: 7px; border-radius: 50%; background-color: #cbcbcb; transition: 0.3s ease-in-out;}
.site_nav .btn .txt {font-size: var(--p3); font-weight: 700; color: #199F44; position: absolute; right: -1em; top: 50%; transform: translate(100%,-50%); white-space: nowrap; opacity: 0; transition: 0.3s ease-in-out; pointer-events: none;}

.site_nav.on {opacity: 1; pointer-events: auto;}
.site_nav .btn.active {border-color: #199F44;}
.site_nav .btn.active .cir {background-color: #199F44;}
.site_nav .btn.active .txt {opacity: 1;}


@media screen and (max-width: 2000px) {
    .site_nav {left: var(--inPd);}
}

@media screen and (max-width: 1640px) {
    .site_nav .btn .txt {font-size: var(--p4);right: -0.5em;}
}


@media screen and (max-width: 1540px) {
    .site_nav {display: none;}
}



@media screen and (max-width: 768px) {
    .main .kv_basic08 .tit_box {
        transform: translate(-50%,-50%);
        top: 50%;
        bottom: auto;
    }

}