/* BASIC css start */
.side_container {width: 30%;}
#contentWrapper.side .side_container ~ #content {width: 70%;}
#contentWrapper.side #contentWrap {    min-width: 1400px;}
.common_editorial {display:none; } 
.cateWrap {display:none!important; } 
.more {padding: 0 0 50px 0;text-decoration: underline;text-align: center;font-size: 16px;line-height: 21px;}
.flex {display: flex;}
.justify-content-start{justify-content: start;    align-items: baseline;gap: 10px;}
.space-between {justify-content: space-between;} 
.place-items-center{place-items: center;}
.place-items-flex-start{place-items: flex-start;}
    
    
/*** left side ***/
.scroll_wrapper {overflow-x: hidden;overflow-y: scroll;position: absolute;top: 0;right: 0;bottom: 0;left: 0;-ms-overflow-style: none;scrollbar-width: none;}
.scroll_wrapper::-webkit-scrollbar {display: none;}
.visual-animation {width: 100%;}
.visual-animation .item_container .item {width: 100%!important;}
.product-wrap {opacity: 0;transform: translateX(100%);transition: opacity 1s, transform 0.5s;}
.product-wrap.visible {opacity: 1;transform: translateX(0);}
.visual-animation .product-wrap .swiper-pagination-progressbar {position: initial;width: 70%;height: 2px;text-align: center;opacity: 1;background: #999;margin: 0 auto;margin-top: 30px;margin-bottom: 0px;}
.visual-animation .product-wrap .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#fff;}
.visual-animation .scroll {position: absolute;bottom: 40px; left: 50%; transform: translateX(-50%);z-index: 2; width: 208px; height: 80px; border-radius: 100px;}
.visual-animation .scroll span{display:block;width:1px;height:20px;background:#fff;margin:20px auto 0;animation: scrolldown infinite 1.5s;}
.visual-animation .scroll p{position: absolute;bottom: 0px;left: 50%;transform: translateX(-50%);z-index: 100;animation: scrolldown2 infinite 1.5s;font-size: 13px;color: #000;font-weight: 500;letter-spacing: 1px;padding: 5px;background: #fff;width: 120px;border-radius: 5px;text-align: center;font-family: 'Pretendard', "Apple SD Gothic Neo";}
@keyframes scrolldown {0% {margin-top:20px;}50% {margin-top:30px;}100% {margin-top:20px;}}
@keyframes scrolldown2 {0% {opacity: 1;}50% {opacity: 0;}100% {opacity: 1;}}

/*** right side ***/
/* head */
#section_list {position: relative;width: 100%;height: 80px;}
#section_list .nav_wrap {position: sticky;display: flex; width: 100%;box-sizing: border-box;overflow: hidden;background: #fff;z-index: 1001;top: 30px;padding: 15px 0 10px;}
#section_list .swiper-wrapper{transition: background 0.2s ease-in-out;align-items: end;}
#section_list .swiper-wrapper .swiper-slide{font-weight: 500;font-family: 'Pretendard';width:auto; position:relative; overflow:hidden;font-size: 14px;line-height: 30px; height: 30px;padding: 0 10px;color: #8b8b8b;}
#section_list .swiper-wrapper .swiper-slide:last-child{margin:0;}
#section_list .swiper-wrapper .swiper-slide:after{content:''; display:block; width:100%; height:2px;  position:absolute; left:0; bottom:-2px;}
#section_list .swiper-wrapper .swiper-slide.active{border-bottom: 2px solid;color: #000;} 
#section_list_swiper {height: 50px;background: #fff;}
#section_list.fix #section_list_swiper {width: auto;}
#section_list_swiper .swiper-slide {transition: all 0.1s ease;}
#section_list_swiper .swiper-slide.active {}
#section_list_swiper {transition: transform 0.5s ease;}
.cate_title {font-weight: 500;font-family: 'Pretendard';position: relative;font-size: 16px;line-height: 50px;height: 50px;padding-right: 30px;}

#section_list .swiper-wrapper .swiper-slide span {display:none;}

.cate_title .main_title {font-weight: 700;position: relative;line-height: 1.2;padding-bottom: 10px;font-size: 20px;}
.cate_title .sub_title {font-size: 14px;line-height: 1;}


/************ ÅÇ ³×ºñ ******************/
.swipertab.fixed {position: fixed;top: 0;left: 0;width: 100%;z-index: 100;}
.tab_content {display:none;}
.tab_content.active {display:block;}
.swipertab_list.swiper-wrapper.fix {top: 50px;z-index: 1001;position: fixed;width: 100%;height: 41px;background: #fff;font-size: 14px;    padding-top: 9px;}

.swipertab_list {display: flex;justify-content: start;}
.swipertab_list .swiper-slide {font-weight: 500;font-family: 'Pretendard';width: auto;position: relative;overflow: hidden;font-size: 14px;line-height: 30px;height: 30px;padding: 0px 10px;border: 1px solid #e7e7e7;border-radius: 5px;color: #8b8b8b;}
.swipertab.swiper-containerB {width: 550px;background: #fff;font-size: 14px;padding: 0px 0 70px;}
.swiper-slide.on {    background: #2c2c2c;color: #fff;}
.swipertab_ul {display: flex;justify-content: space-between;gap:20px;}

/* product */ 
.con_section {overflow-y: auto;height: calc(100vh - 180px);scrollbar-width: none;}
.e_title {padding: 100px 0 70px;font-family: 'Pretendard', "Apple SD Gothic Neo";font-size: 16px;    text-align: center; display:none;}
.page-body .e_title {    padding: 50px 0 50px;text-align: left;}
.page-body .e_title:nth-child(1) {    padding: 20px 0 50px;text-align: left;}
.e_title .e_maintitle {font-size: 30px;font-weight: 600;margin-bottom: 10px;font-family: 'Pretendard', "Apple SD Gothic Neo";}

.e_title1 {padding: 30px 0 0px;font-family: 'Pretendard', "Apple SD Gothic Neo";font-size: 16px;  color: #fff;}
.e_title1 .e_maintitle {font-size: 30px;font-weight: 600;margin-bottom: 10px;font-family: 'Pretendard', "Apple SD Gothic Neo";}

.allmore {text-align: center;padding-bottom:50px}   
.allmore a {margin: 0 auto;text-align: center;display: block;width: 450px;background: #26231d;color: #fff;padding: 10px;}

.section {
    padding: 20px 0 60px;
}

.va-item {margin-top: -427px;padding: 39px 0;position: relative;z-index: 1;    background: #222222b3;}
.va-item .item_container .item {margin-bottom: 0px;}
.va-item .item_container .item .item_txt {    color: #fff;}


.intro {padding:177.78% 0 0 0;position:relative;pointer-events: none; background:#000;}

.overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    width: 400px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    display: flex;
    color: transparent;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -webkit-background-clip: text;
    background-clip: text;
    padding: 40px 20px;    
    border: 1px solid #ffffff57;
    border-radius: 20px;
    opacity: 0;
    transition: opacity 2s ease;
}
.overlay-content.visible {opacity: 1;}

.intro_t3 {
    font-size: 16px;
    font-family: 'Pretendard', "Apple SD Gothic Neo";
    font-weight: bold;
    color: transparent;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -webkit-background-clip: text;
    background-clip: text;
    margin-bottom: 10px;
}

.intro_t2 {
    font-size: 20px;
    font-family: 'Pretendard', "Apple SD Gothic Neo";
    font-weight: bold;
    color: transparent;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -webkit-background-clip: text;
    background-clip: text;
}

.intro_t1 {
    font-size: 50px;
    font-weight: bold;
    color: transparent;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -webkit-background-clip: text;
    background-clip: text;
    margin-bottom: 40px;
}



.cp_wrap {display: flex;justify-content: space-between;}
.cp_down a {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer;}
.dashed {z-index: 1; height: 100%; border-left: 1px dashed rgb(0, 0, 0); opacity: 0.2; border-top-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0);}
.cp_down_w {display: flex;gap: 15px;    place-items: anchor-center;}

.paybenefit_wrap {padding-top: 30px;}
.paybenefit {background: #f0f5fa;padding:15px; border-radius: 5px;    color: #222; margin-bottom: 20px;}
.paybenefit img { width: 50px;    float: right;margin-top: -46px;}
.paybenefit_info {}
.paybenefit_info div:nth-child(2) {font-weight: 700;font-size: 16px;}
.paybenefit_info div .cunt {    background: #353535;color: #fff;padding: 2px 7px;border-radius: 4px;margin-left: 10px;font-size: 12px;vertical-align: text-bottom;}
.paybenefit_info div {font-size: 14px;font-family: 'Pretendard', "Apple SD Gothic Neo";color: #222;line-height: 1.5;}
.paybenefit_info1 {    width: 100%;}
.paybenefit_info1 .paybenefit_card {font-weight: 600;font-size: 16px;    font-family: 'Pretendard', "Apple SD Gothic Neo";color: #222;line-height: 1.5;padding: 10px 0;border-top: 1px solid #c0c0c0;    display: flex;justify-content: space-between;}
.paybenefit_info1 div:nth-child(1) {border-top: 0px;}
.paybenefit_card div:nth-child(1) {place-items: center;display: flex;font-weight: 600;font-size: 14px;}
.paybenefit_info1 div .cunt {    background: #353535;color: #fff;padding: 2px 7px;border-radius: 4px;margin-right: 10px;font-size: 12px;vertical-align: text-bottom;}
.paybenefit_card .cp_down_w {margin-right: 15px;}

.notice-button {cursor: pointer;color: #8b8b8b; border: none;background: none; }
dialog::backdrop {background: rgba(0, 0, 0, 0.4);}
dialog {border: none;border-radius: 10px;padding: 20px;max-width: 90%;width: 500px;line-height: 1.6;}
dialog p{font-size: 13px;line-height: 1.5;font-family:'Pretendard'; color:#8b8b8b;} 
dialog h1 {font-size: 15px;padding-bottom: 20px;}
.dialog-footer {text-align: right;margin-top: 20px;}
.dialog-footer button {padding: 6px 12px;border: none;background-color: #333;color: white;border-radius: 4px;cursor: pointer;  }
.information {padding-bottom: 30px;}

.visual_bnf {padding: 20px;background: #000;}











/* BASIC css end */