/* BASIC css start */
#hdWrap, #headerBanner {transition: opacity 0.5s ease;opacity: 1;}
#hdWrap.hide, #headerBanner.hide {opacity: 0;pointer-events: none;}
#footer {display: none!important;}

body{font-size: 14px;}
#contentWrapper {padding-top: 0px;    min-width: 1400px;}
.flex {display: flex;}
.justify-content-start{justify-content: start;    align-items: baseline;gap: 30px;}
.space-between {justify-content: space-between;} 
.place-items-center{place-items: center;}
.place-items-flex-start{place-items: flex-start;}
#section6 {padding-bottom: 70px;}

.pt-50 {padding-top:50px;}
.pt-10 {padding-top:10px;}
.bg222 {background:#222;}


.intro {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; 
  min-width: 1400px;
} 
  

.opacity_on{position: absolute;   bottom: 0;padding: 0px 100px 50px 100px;width: 100%;box-sizing: border-box;z-index: 1;}
.intro_txt {font-family: 'Pretendard', "Apple SD Gothic Neo";color: #222;line-height: 1;    color: #222;}
.intro_txt.intro_txt1 {font-size: 60px;font-weight: normal;    color: #222; }
.intro_txt.intro_txt2 {font-size: 120px;font-weight: bold;     color: #222;} 
.intro_txt.intro_txt3 {font-size: 40px;font-weight: normal;    color: #222;}

/***/

.e_title {padding: 100px 0 70px;font-family: 'Pretendard', "Apple SD Gothic Neo";font-size: 16px;    text-align: center;}
.page-body .e_title {    padding: 70px 0 0px;text-align: left;}
.e_title .e_maintitle {font-size: 30px;font-weight: 600;margin-bottom: 10px;font-family: 'Pretendard', "Apple SD Gothic Neo";}

.pcwrap .benefit {border-bottom: 1px solid #222;padding: 20px 0;font-size: 16px;font-family: 'Pretendard', "Apple SD Gothic Neo";}
.section_title{font-size: 30px;font-weight: bold;text-align: center;margin: 0 auto;padding-bottom: 20px;font-family: 'Pretendard', "Apple SD Gothic Neo";} 
.pcwrap {width: 600px;color: #222;font-size: 20px;} 

#content .tit-page-2 h2 {    font-size: 16px;
    font-weight: bold;
    line-height: 1.7;}
.side_container {background: #f7f7f7;}
.side_container .side_wrapper .side_body {padding: 0!important;} 
.new_member_benefit {display: grid;    border-top: 0;}
.new_member_benefit table td:last-child {text-align: right;}
.new_member_benefit table span {display:block; color:#8B8B8B;}
.new_member_benefit a {background: #222;color: #fff;padding: 20px 0;width: 100%;text-align: center;margin: 25px 0 0;    font-size: 14px;} 
#contentWrapper.side {background: #fff!important;}
#contentWrapper.side #contentWrap {min-width: 1400px!important;} 
#contentWrapper.side .side_container ~ #content {background: #fff;color:#222;} 
.section1 {padding-top:30px;     height: 90vh;background: #fff;}
.section1title {padding:30px;}


.underlined {text-decoration: underline;} 
.opacity1{opacity: 1!important;} 
.align-end {align-items: end;}
.gap5 {gap: 5px;}
 
.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;}
 
#mypage {padding-bottom:120px;}

.information {font-weight: 300;}

 
/*************¿µ¿ª ³×ºñ****************/
#section_list{height:50px; position:relative;    background: #222222;}
#section_list ul{display: flex;justify-content: space-around;position:absolute;transition: background 0.2s ease-in-out; text-align:center; font-size:0;box-sizing:border-box; padding:0px; border-radius: 30px;    transform: translate(-50%, 0%);left: 50%;width: 100%;max-width: 1400px;gap: 50px;}
#section_list ul li{    font-weight: 500;font-family: 'Pretendard';color: #8b8b8b; display:inline-block; vertical-align:top; width:auto;padding: 0px 20px; cursor:pointer; position:relative; overflow:hidden;font-size: 16px;line-height: 48px;}
#section_list ul li:last-child{margin:0;}
#section_list ul li:after{content:''; display:block; width:100%; height:2px;  position:absolute; left:0; bottom:-2px; transition:all 0.3s;}
#section_list ul li h3{font-size:16px; color:#232323; letter-spacing:-0.3px; font-weight:normal; font-family:'Noto Sans KR', sans-serif; line-height:20px;font-weight: 500;}
#section_list ul li.on:after{bottom:0;}
#section_list ul .on {border-bottom: 2px solid;color: #fff;}
#section_list_ul {height: 50px;width: 100%;background: #222;min-width: 1400px;}
#section_list.fix #section_list_ul {position:fixed; z-index:1100;top: 0px;}
/**********************/


.swiper_tab_box {    margin: 0 auto 20px;display: flex;gap: 10px;width: 100%;    justify-content: center;}
.swiper_tab_box a {display: inline-block;padding: 10px 15px;line-height: 15px;color: #fff;font-weight: bold;font-size: 16px;background: #555;border-radius: 5px;font-family: 'Pretendard';}
.swiper_tab_box a.active {background: #a51d27;color: #fff;}


.wrap1400 {max-width: 1400px;margin: 0 auto;}

.paybenefit_wrap {padding-top: 40px;}
.paybenefit {background: #f0f5fa;padding:15px; border-radius: 5px;    color: #222;    width: 100%;}
.paybenefit img { width: 70px;    float: right;margin-top: -50px;}
.paybenefit_info {}
.paybenefit_info div:nth-child(2) {font-weight: 700;font-size: 16px;padding-bottom: 14px;}
.paybenefit_info div:nth-child(3) {display: inline;background: #353535;color: #fff;padding: 2px 7px;border-radius: 4px;}
.paybenefit_info div {font-size: 14px;font-family: 'Pretendard', "Apple SD Gothic Neo";color: #222;line-height: 1.5;}

details {padding:25px 0 0px;font-size: 13px;line-height: 1.5;font-family:'Pretendard'; color:#8b8b8b;} 
summary::-webkit-details-marker {display: none;}
summary {display: block;padding-bottom:20px;font-weight: 600;cursor: pointer;position: relative; color:#8b8b8b;}
details p {text-align: left; color:#8b8b8b;}
details[open] summary::after {display: none;}

/***/
.coupon {padding: 0px;width: 100%; color:#262626;position: relative; overflow: hidden;background: url(//sappun.img13.kr/site/event/20250319/cbg1.png);background-size: cover;}
.coupon.app1 {background: url(//sappun.img13.kr/site/event/20250319/appcp.png);background-size: cover;}
.coupon.app {background: url(//sappun.img13.kr/site/event/20250319/app5.jpg);background-size: cover;}
.coupon.app::before, .coupon.app::after {width: 0px;height: 0px;}
.coupon::before, .coupon::after {content: "";position: absolute;width: 20px;height: 20px;background: #fff;border-radius: 50%;top: 50%;transform: translateY(-50%);}
.coupon::before {left: -10px;}
.coupon::after {right: -10px;}
.left-circle::before {left: -10px;}
.right-circle::after {right: -10px;}
.con_cplist {display: flex;justify-content: space-between;padding-top:40px;}}
.coupon:last-child {margin-right: 0px;}
.coupon .cp1 {margin-bottom: 0px;font-size: 12px;display: flex;gap: 5px;}
.coupon .cp1 div {background: #353535;color: #fff;padding: 2px 7px;border-radius: 4px;}
.coupon .cp2 {text-align: right;font-size: 30px;font-family: 'Pretendard', "Apple SD Gothic Neo";font-weight: 700;line-height: 52px;  display: grid;place-items: center;}
.cp2 img {width: 40px;}
.coupon .cp3 {text-align: right;font-weight: 300;    padding: 15px 30px 15px;font-family: 'Pretendard', "Apple SD Gothic Neo";}
.con_cplist {display: flex;justify-content: space-between;padding-top:40px;}
.con_cp:last-child {margin-right: 0px;}
.cp_u {
    padding: 15px 30px 0px;
}
.cp_d {
    padding: 0 30px 0px;
    display: grid;
    justify-content: end;
}
/************ ÅÇ ³×ºñ ******************/
.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: space-around;}
.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: 100%;margin: 0 auto;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:50px;}






/*****/
html, body { 
    }
    canvas {    padding-top: 30px;
      position: absolute;
      top: 0;
      left: 0;
      filter: blur(15px);
      height: 90vh!important;
      z-index: 0;
    }
    .overlay {    padding-top: 30px;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 90vh;
      backdrop-filter: blur(50px);
      animation: pulseOpacity 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      z-index: 1;
    }
    @keyframes pulseOpacity {
      0%, 100% { opacity: 0.05; }
      50% { opacity: 0.15; }
    }
    .content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: end;
    height: 100%;
    color: white;
    padding-left: 50px;
    bottom: 50px;
    overflow: hidden;
    }
    .content h1 {
      font-size: 4rem;
      font-weight: 600;
      letter-spacing: -0.05em;
      line-height: 1.1;
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 0.8s forwards;
    }
    .content p {
      font-size: 1.5rem;
      color: rgba(255, 255, 255, 0.7);
      margin-top: 1rem;
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 0.8s forwards 0.3s;
    }
    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

   
/* BASIC css end */