/* ===========================
   Import
=========================== */
@import url("/assets/css/sub.css");

/* ==========================================================================
    Common
========================================================================== */


#sub_v {background-size:cover;background-position:center;height:580px;color:var(--white);position:relative;display: flex;align-items: center;justify-content: center;}
#sub_v .visual_box{display: flex;align-items: center;flex-direction: column;gap: var(--space-28);text-align: center;}
#sub_con .tit_box h3{margin-top:var(--space-10);}
#sub_con .sub_common_con5 .tit_box h3{margin-top:0;}

.gsap_highlight {background-image: linear-gradient(transparent 40%, #C4AA78 40%, #C4AA78 85%, transparent 85%);background-size: 0% 100%; background-repeat: no-repeat; display: inline; }

.tit_box{white-space: nowrap;}


.sub_common_con1 .row_con{display: flex;justify-content: space-between;}
.sub_common_con1 .tit_box{display: flex;flex-direction: column;gap: var(--space-28);}

.sub_common_con2{background-image:url('/assets/images/sub/common_con2_bg.png?v=2');background-size:cover;background-position:center;}
.sub_common_con2 .tit_box{display: flex;flex-direction: column;align-items: center;gap: var(--space-28);text-align: center;}

.sub_common_con3 .step_area .step_tab {display: flex; justify-content: safe center;width: auto;  white-space: nowrap; 
touch-action: pan-x; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; transition: opacity 1s; transition-delay: 0.5s;gap: var(--space-50);align-items:center;padding: 0 var(--space-30);}
.sub_common_con3 .step_area .step_tab::-webkit-scrollbar {display: none;}
.sub_common_con3 .step_area.active .step_tab {opacity: 1;}
.sub_common_con3 .step_area .step_tab .tab {position: relative; width:auto; white-space: nowrap; text-align: center; transition: color 0.5s; display: inline-block; cursor: pointer; color:#888;font-size: var(--font-24);}
.sub_common_con3 .step_area .step_tab .tab span{display: block;position: relative;transition: 0.5s;transform: translateY(2px);}
.sub_common_con3 .step_area .step_tab .tab:before {content: ''; position: absolute; left: 50%; bottom: -1px; width: 0; border-bottom: 2px solid transparent; transform: translateX(-50%); transition: width 0.5s;}
.sub_common_con3 .step_area .step_tab .tab.active {font-weight:var(--weight-sb);color:var(--black1);}
.sub_common_con3 .step_area .step_tab .tab.active span{transform: translateY(-15px);}
.sub_common_con3 .step_area .step_tab .tab.active:before {width: 53%; border-color: #AE9D7B;}
.sub_common_con3 .step_area .sub_slide1 {margin-left: max((100% - 1600px) / 2, 2.5%);overflow: hidden;}
.sub_common_con3 .step_area.active .sub_slide1 {opacity: 1; transform: unset;}
.sub_common_con3 .step_area .sub_slide1 .swiper-container {overflow: visible;}
.sub_common_con3 .step_area .sub_slide1 .item {display: flex; align-items: center; transition: opacity 0.5s ease, visibility 0.5s ease;}
.sub_common_con3 .step_area .sub_slide1 .item .img_box {position: relative; flex-shrink: 0;}
.sub_common_con3 .step_area .sub_slide1 .item.swiper-slide-prev {opacity: 0 !important; visibility: hidden;}
.sub_common_con3 .item .txt_box{margin-left:var(--space-80);white-space: nowrap;}
.sub_common_con3 .item .txt_box h3{margin: var(--space-15) 0 var(--space-20);}

.sub_common_con4{background:#FBFBFB;}
.sub_common_con4 .tit_box{text-align:center;}
.sub_common_con4 .tit_box > span {display:block;}
.sub_common_con4 .common4_list{display:flex;gap: 23px; flex-wrap:wrap;}
.sub_common_con4 .common4_item{position: relative;}
.sub_common_con4 .common4_item img{width: 100%;height: 100%;object-fit: cover;}
.sub_common_con4 .common4_item .item_box{position: absolute;left: var(--space-40);bottom: var(--space-40);}


.sub_common_con5{position:relative;}
.sub_common_con5 .tit_box h4{margin-top:var(--space-10);}
.sub_common_con5 .sub_common_con5_wrap{display: flex;}
.sub_common_con5 .left_area {margin-left: max((100% - 1600px) / 2, 2.5%);white-space: nowrap;margin-right: var(--space-130);}
.sub_common_con5 .sub_slide2 {width: 1294px;overflow: hidden;}
.sub_common_con5 .sub_slide2 .swiper-slide {width:626px;}
.sub_common_con5 .controller_wrap .progress_bar {display: block;position: relative;background-color: var(--gray4);}
.sub_common_con5 .controller_wrap .progress_bar .progress_fill { display: block; position: absolute; left: 0; top: 0; height: 100%; background-color: var(--brown1); border-radius: 50px; transition: width 0.3s ease; width: 0%; }


.sub_common_con6{background:#F7F7F7;}
.sub_common_con6 .tit_box{text-align:center;}
.sub_common_con6 .comparison_table{width: 100%; border-collapse: collapse; table-layout: fixed; text-align: center;}
.sub_common_con6 .col_normal{width: 40%;}
.sub_common_con6 .col_vs{width: 20%;}
.sub_common_con6 .col_immune{width: 40%;}
.sub_common_con6 thead{height:var(--space-130);}
.sub_common_con6 tbody tr{height:var(--space-100);}
.sub_common_con6 .comparison_table td{vertical-align: middle; word-break: keep-all; border-left: none; border-right: none; border-top: none;}
.sub_common_con6 .comparison_table th{vertical-align: middle; word-break: keep-all; border-left: none; border-right: none; border-top: none;height: var(--space-130);}
.sub_common_con6 .comparison_table th:nth-child(1), .sub_common_con6 .comparison_table td:nth-child(1){background-color: var(--white);}
.sub_common_con6 .comparison_table thead th:nth-child(2){background-color: var(--gray4); color: var(--black2);}
.sub_common_con6 .comparison_table tbody td:nth-child(2){background-color: #EAEAEA; color: var(--black2);}
.sub_common_con6 .comparison_table th:nth-child(3), .sub_common_con6 .comparison_table td:nth-child(3){background-color: #C4AA78;}
.sub_common_con6 .comparison_table th.rounded_tr{border-top-right-radius: 25px;}
.sub_common_con6 .comparison_table thead th:nth-child(1), .sub_common_con6 .comparison_table thead th:nth-child(2){border-bottom: 1.4px solid #E0E0E0;}
.sub_common_con6 .comparison_table tbody tr:not(:last-child) td:nth-child(1), .sub_common_con6 .comparison_table tbody tr:not(:last-child) td:nth-child(2){border-bottom: 1.4px solid #808080;}
.sub_common_con6 .comparison_table thead th:nth-child(3), .sub_common_con6 .comparison_table tbody tr:not(:last-child) td:nth-child(3){border-bottom: 1.4px solid var(--white);}


.sub_common_con7{background-image:url('/assets/images/sub/common_con7_bg.png?v=2');background-size:cover;background-position:center;}
.sub_common_con7 .tit_box{text-align:center;}

.sub_common_con8 .tit_box {text-align: center;}
.sub_common_con8 .img_box img {margin: 0 auto;}

.sub_common_con9{background-image:url('/assets/images/sub/common_con9_bg.png?v=2');background-size:cover;background-position:center;position: relative;}
.sub_common_con9 .common9_list{display: flex;flex-wrap: wrap;width: 928px;gap: 35px;margin-left: auto;}
.sub_common_con9 .common9_item .item_box{width: 446px;height: 387px;border-radius: var(--space-20);border: 2px solid rgba(255, 255, 255, 0.80);background: var(--white);display: flex;flex-direction: column;justify-content: flex-end;padding: 0 34px 50px;}
.sub_common_con9 .common9_item .desc{display: block;border-top: 2px solid rgba(174, 157, 123, 0.4);margin-top:var(--space-20); padding-top:var(--space-20);}
.sub_common_con9 .marquee_wrapper {display:none;position: absolute;bottom: -48px;left: 50%;transform:translateX(-50%);width:100%;overflow: hidden;white-space: nowrap;}
.sub_common_con9 .marquee_track {width:max-content;display: flex;animation: flowText 50s linear infinite;}
.sub_common_con9 .marquee_track .txt {font-size: 153px;opacity: 0.8;}
@keyframes flowText {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.sub_common_con10{position: relative;}
.sub_common_con10 .common10_list{position: relative;display: flex;justify-content: space-between;flex-wrap:wrap;width: 1440px;margin-left: auto;margin-right: auto;}
.sub_common_con10 .common10_list:after{content:''; display:block;position: absolute;width: 1135px;top: 370px;left: 50%; transform: translateX(-50%); height:2px;background: var(--brown1);}
.sub_common_con10 .txt_box{text-align: center;width: 303px;position: relative;}
.sub_common_con10 .txt_box:before{content:''; display:block; width:14px; height:14px;background: var(--brown1);margin: var(--space-26) auto;border: 7px solid rgba(174, 157, 123, 0.2);border-radius: 50%;box-sizing: content-box;background-clip: padding-box;}
.sub_common_con10 .txt_box .step{width: var(--space-100);height: var(--space-30);display: flex; justify-content: center; align-items: center; margin: 0 auto;margin: 0 auto;background: var(--brown1);}
.sub_common_con10 .txt_box .tit{margin: var(--space-15) auto var(--space-20);white-space: nowrap;}
.sub_common_con10 .txt_box .desc{display: block; width: max-content; white-space: nowrap;  margin-left: 50%;transform: translateX(-50%);}
.sub_common_con10 .txt_box .tit .b{font-weight:600;}

.sub_common_con11{background:#F6F6F6;}
.sub_common_con11 .row_con{display:flex;justify-content: space-between;}
.sub_common_con11 .common11_list{width: 986px;}
.sub_common_con11 .common11_item{width: 100%;height: 88px;display: flex;align-items: center;border-radius: 50px;padding: 0 var(--space-40); word-break: keep-all;background-color: var(--white);}
.sub_common_con11 .common11_item:not(:first-child){margin-top:var(--space-28);}
.sub_common_con11 .common11_item .img_box{flex: 0 0 auto; margin-right: var(--space-20);}


.bottom_common_con1 .bottom_common_area1 { display: flex; align-items: center; justify-content: center; height: 100vh;height: 100dvh; overflow: hidden; background-color: var(--white); }
.bottom_common_con1 .bottom_common_area1 .cont { position: relative; width: 100%; height: 100%; }
.bottom_common_con1 .bottom_common_area1 .cont .first_cont { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background-color: var(--white); }
.bottom_common_con1 .bottom_common_area1 .cont .tit { font-family: 'MaruBuri'; }
.bottom_common_con1 .bottom_common_area1 .cont .tit_cont { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; }
.bottom_common_con1 .bottom_common_area1 .cont .tit_cont .img_box { position: relative; width: 0; height: 0; padding-top: 0; border-top: 1px solid var(--black1); margin: 0 auto; border-radius: 2rem; overflow: hidden; }
.bottom_common_con1 .bottom_common_area1 .cont .second_cont { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.bottom_common_con1 .bottom_common_area1 .cont .second_cont .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.bottom_common_con1 .bottom_common_area1 .cont .second_cont .bg_bk { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background-color: rgba(0,0,0,0.55); opacity: 0; z-index: 5; }
.bottom_common_con1 .bottom_common_area1 .cont .cont_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-clip-path: url(#introMask); clip-path: url(#introMask); }
.bottom_common_con1 .bottom_common_area1 .cont .cont_bg img { width: 100%; height: 100%; object-fit: cover; }
.bottom_common_con1 .bottom_common_area1 .cont .third_cont { position: absolute; left: 50%; top: 50%; width: 100%; max-width: 90%; transform: translate(-50%, -50%); text-align: center; z-index: 10; }
.bottom_common_con1 .bottom_common_area1 .cont .third_cont .slogan { opacity: 0; color: #FAF1E0; }
.bottom_common_con1 .bottom_common_area1 .cont .third_cont .txt_box { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 20rem; opacity: 0; }
.bottom_common_con1 .bottom_common_area1 .cont .third_cont .txt_box .txt { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; margin-bottom: 0.5rem; }
.bottom_common_con1 .bottom_common_area1 .cont .third_cont .txt_box .txt .copy { position: absolute; left: 0; top: 0; width: 0; color: var(--white); overflow: hidden; }
.bottom_common_con1 .cont_bg { overflow: hidden; }
.bottom_common_con1 .intro_mask { overflow: hidden; }

.bottom_common_con2 .bottom_common_area2 .cont { display: flex; align-items: flex-start; justify-content: space-between; }
.bottom_common_con2 .bottom_common_area2 .cont .sticky_box { position: sticky; left: 0; top: 100px; width: 50%; }
.bottom_common_con2 .bottom_common_area2 .cont .left_img { position: relative; width: 100%; padding-top: 50%; }
.bottom_common_con2 .bottom_common_area2 .cont .left_img .img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s; }
.bottom_common_con2 .bottom_common_area2 .cont .left_img .img.active { opacity: 1; z-index: 1; }
.bottom_common_con2 .bottom_common_area2 .cont .right_txt { position: relative; margin-top: var(--space-400); margin-bottom: var(--space-67); }
.bottom_common_con2 .bottom_common_area2 .cont .right_txt .txt_box { margin-bottom: var(--space-400); width: 500px; }
.bottom_common_con2 .bottom_common_area2 .cont .right_txt .txt_box:last-child { margin-bottom: 0; }
.bottom_common_con2 .bottom_common_area2 .cont .right_txt .txt_box {position: relative;}
.bottom_common_con2 .bottom_common_area2 .cont .right_txt .txt_box:not(:last-child)::before {content: '';position: absolute;display: block;background: #544936;width: 1px;left: -57px;top: 16px;height: calc(100% + var(--space-400)); }
.bottom_common_con2 .cont { display: flex; }
.bottom_common_con2 .num_box { position: relative; }
.bottom_common_con2 .dots { position: absolute; left: -70px; width: 14px; height: 14px; display: block; background: #544936; border-radius: 50%; border: 7px solid rgba(84, 73, 54, 0); box-sizing: content-box; background-clip: padding-box; }
.bottom_common_con2 .num { width: var(--space-90); height: var(--space-30); display: flex; align-items: center; justify-content: center; text-align: center; line-height: 31px; background: #C2C1C0; }
.bottom_common_con2 .tit { color: #A19F9E; }
.bottom_common_con2 .txt_box.active .dots { border: 7px solid rgba(84, 73, 54, 0.20); }
.bottom_common_con2 .txt_box.active .num { background: var(--brown1); }
.bottom_common_con2 .txt_box.active .tit { color: var(--black1); }
.bottom_common_area2 .cont { display: flex; justify-content: space-between; align-items: flex-start; }
.bottom_common_area2 .sticky_box { position: sticky; top: 12rem; width: 48%; flex-shrink: 0; }
.bottom_common_area2 .left_img { position: relative; width: 100%; padding-top: 125%; overflow: hidden; border-radius: 2rem; }
.bottom_common_area2 .left_img .img { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; }
.bottom_common_area2 .left_img .img.active { opacity: 1; }
.bottom_common_area2 .left_img img { width: 100%; height: 100%; object-fit: cover; }
.bottom_common_area2 .right_txt .txt_box { margin-bottom: 18rem; }
.bottom_common_area2 .right_txt .txt_box:last-child { margin-bottom: 0; }
.bottom_common_area2 .right_txt .txt_box .img { display: none; }

.bottom_common_con3 { background-image: url('/assets/images/sub/commom_con13_bg.png?v=2'); background-size: cover; background-position: center; }
.bottom_common_con3 .txt_box a { display: inline-block; width: 204px; height: 50px; background-color: var(--brown1); text-align: center; line-height: 50px; border-radius: 50px; transition: 0.5s; }
.bottom_common_con3 .txt_box a:hover { opacity: .65; }







@media all and (max-width:1600px){

.sub_common_con4 .common4_list {justify-content: center;}

.sub_common_con5 .sub_slide2 .swiper-slide {width: 40vw;}

.sub_common_con10 .common10_list {justify-content: center;flex-wrap: wrap;width: 70%;gap: 35px;}
.sub_common_con10 .common10_list:after{display:none;}

.bottom_common_con2 .bottom_common_area2 .cont .right_txt .txt_box {width: auto;}

}



@media all and (max-width:1440px){


.sub_common_con1 .row_con {justify-content: center;flex-direction: column;text-align: center;}
.sub_common_con1 .img_box{margin:0 auto;}

.sub_common_con3 .step_area .sub_slide1 .item .img_box {width: 50%;}

.sub_common_con5 .left_area {margin-right: var(--space-30);}

.sub_common_con11 .row_con {flex-direction: column;}
.sub_common_con11 .common11_list {width: auto;margin-top: var(--space-80);}


}


@media all and (max-width:1200px){



}

@media all and (max-width:1024px){

.sub_common_con3 .step_area .sub_slide1 {margin-left: 0;}
.sub_common_con3 .step_area .sub_slide1 .item {flex-direction: column;}
.sub_common_con3 .step_area .sub_slide1 .item .img_box {width: 90%;text-align: center;}
.sub_common_con3 .step_area .sub_slide1 .item .img_box img{display:block;margin: 0 auto;}
.sub_common_con3 .item .txt_box {margin-left:0;margin-top:var(--space-30);text-align: center;}
.sub_common_con3 .step_area .step_tab {overflow-x: auto;overflow-y: hidden;}
.sub_common_con3 .step_area .step_tab .tab {flex:0 0 auto;}
.sub_common_con3 .step_area .step_tab .tab.active span {transform: translateY(-4px);}

.sub_common_con4 .common4_item {width:60%;}

.sub_common_con5 .sub_common_con5_wrap {flex-direction: column;text-align: center;}
.sub_common_con5 .controller_wrap {margin-bottom: var(--space-60);}
.sub_common_con5 .left_area {margin:0;}
.sub_common_con5 .sub_slide2 {width: 95%;margin-left: auto;}
.sub_common_con5 .sub_slide2 .swiper-slide {width: 65%;}

.sub_common_con9 .tit_box {text-align: center;}
.sub_common_con9 .common9_list {width: auto;justify-content: center;margin-right: auto; margin-top: var(--space-50);gap: var(--space-30);}
.sub_common_con9 .common9_item {width: 45%;}
.sub_common_con9 .common9_item .item_box {width: 100%; height: 40vw;padding: 0 var(--space-30) var(--space-50);}
.sub_common_con9 .marquee_track .txt {font-size: var(--font-140);opacity: 0.8;}
.sub_common_con9 .marquee_wrapper {bottom: -7px;}

.sub_common_con10 .tit_box {text-align: center;}
.sub_common_con10 .common10_list {width: 100%;gap: var(--space-30);}

.bottom_common_con2 .bottom_common_area2 .cont { flex-direction: column; align-items: center; }
.bottom_common_con2 .tit_box { text-align: center; }
.bottom_common_con2 .bottom_common_area2 .cont .sticky_box { position: static; width: 100%; }
.bottom_common_con2 .bottom_common_area2 .cont .left_img { display: none; }
.bottom_common_con2 .bottom_common_area2 .cont .right_txt { display: flex; gap: var(--space-28); margin-top: var(--space-40); margin-bottom: 0; overflow-x: auto; overflow-y: hidden; margin-left: 0;width: 100%;}
.bottom_common_con2 .bottom_common_area2 .cont .right_txt .txt_box { flex: 0 0 60%; margin-bottom: var(--space-40); }
.bottom_common_con2 .bottom_common_area2 .cont .right_txt .txt_box .img { display: block; }
.bottom_common_con2 .bottom_common_area2 .cont .right_txt .txt_box .img img { width: 100%; display: block; }
.bottom_common_con2 .num_box { margin-top: var(--space-50); }
.bottom_common_con2 .bottom_common_area2 .cont .right_txt .txt_box:not(:last-child)::before { display: none; }
.bottom_common_con2 .dots { display: none; }

.bottom_common_con3 { text-align: center; }


}


/* =================================================== 640px 이하 ================================================== */

@media all and (max-width:640px){

#sub_v {height: 55vh;}

.sub_common_con4 .common4_item {width:85%;}

.sub_common_con5 .sub_slide2 {margin-right: auto;}.sub_common_con5 .sub_slide2 .swiper-slide {width: 100%;}
.sub_common_con6 .mobile_scroll_wrap{width: 100%;overflow-x: scroll;}
.sub_common_con6 .mobile_scroll_wrap .comparison_table {min-width: 640px;}

.sub_common_con9 .common9_item {width: 80%;}
.sub_common_con9 .common9_item .item_box {height: 65vw;}
.sub_common_con9 .marquee_wrapper {bottom: -3px;}

.sub_common_con10 .common10_list {width: 80%;}
.sub_common_con10 .common10_item:not(:first-child){margin-top:var(--space-30);}
.sub_common_con10 .txt_box {width: auto;}
.sub_common_con10 .txt_box:before {width: 2vw; height: 2vw;}

.sub_common_con11 .tit_box{text-align:center;}
.sub_common_con11 .common11_item {height: 21vw;}
.sub_common_con11 .common11_item .img_box {width: 6vw;}

.bottom_common_con1 .bottom_common_area1 .cont .tit.mobile_txt { height: 17vw; display: flex; flex-direction: column; justify-content: center; }
.bottom_common_con1 .bottom_common_area1 .cont .tit.mobile_txt:last-child {height: 11vw;}
.bottom_common_con1 .bottom_common_area1 .cont .tit.mobile_txt h3 { font-size: var(--font-50); }
.bottom_common_con1 .bottom_common_area1 .cont .third_cont .txt_box .txt {font-size: var(--font-18);}

.bottom_common_con2 .bottom_common_area2 .cont .right_txt .txt_box { flex: 0 0 80%; }

.bottom_common_con3 .txt_box a {height: 12vw;line-height: 12vw; }

}