@font-face {
    font-display: swap;
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Pretendard-Regular.subset.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/Pretendard-Medium.subset.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/Pretendard-SemiBold.subset.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/Pretendard-Bold.subset.woff2') format('woff2');
}

* { margin: 0; padding: 0; scroll-behavior: smooth;font-family: "Pretendard" , sans-serif !important;letter-spacing: -1px;
    box-sizing: border-box;word-break: keep-all;}
html{font-size: 62.5%;}
img{max-width: 100%;}
a {
  color: #2C2C2C;
  text-decoration: none;
}
a:hover,
a:focus,
a:visited {
  text-decoration: none;
}
.flex{display: flex;}

.main_wrap { width: 100%; max-width: 980px; margin: 0 auto; background: #000000;}
.main_wrap .conatiner{padding:0 40px}
.sec01{background: url('../img/bg01.png') center 700px no-repeat;}
.sec02{background: url('../img/bg02.png') center top no-repeat;}
.sec03{background: url('../img/bg03.png') center top no-repeat;}
.sec04{background: url('../img/bg04.png') center top no-repeat;}
.sticky_menu{position: sticky;top:0;height: 98px;line-height: 98px;display: flex;background: #fff;gap:1px;z-index: 9;}
.sticky_menu a{flex:1;background: #979fbd;text-align: center;font-size:2.5rem;color:#fff}
.sticky_menu a.active{background: #6a8bff;}
.quick_menu{position: fixed;bottom:0;height: 80px;line-height: 80px;display: flex;z-index: 9;width:100%;max-width: 980px;}
.quick_menu>*{flex:1;background: #2A2A2A;text-align: center;font-size:3rem;color:#fff;font-weight: 600;cursor: pointer;}
.quick_menu a{background: #D69B72;}

.box_tit{background: #6a8bff;width:100%;line-height: 100px;font-size: 5rem;font-weight: 600;color:#fff;text-align: center;margin-top: 50px;}
.box{background: #fff;padding:50px 35px;margin-top: 30px;min-height: 300px;
    display: flex;flex-direction: column;justify-content: space-between;gap:60px}
.pt_60{padding-top: 60px;}
.mt_0{margin-top: 0;}
.mt_60{margin-top: 60px;}
.mt_100{margin-top: 100px;}
.box .chk_flex{align-items: flex-start;gap:24px}
.box input[type="checkbox"]{
  opacity: 0;
  width: 0;
  margin:0
}
.box input[type="checkbox"]+ label {position: relative;
    height: 42px;
    display: block;
    width: 42px;}
.box input[type="checkbox"]+ label::before{display:block;content: '';
    width: 40px;
height: 40px;
border-radius: 5px;
background-color: #ffffff;
border: 1px solid #63668b;}
.box input[type="checkbox"]:checked +label::before{background: #6a8bff;border: none;}
.box input[type="checkbox"]:checked +label::after{display:block;content: '';width:50px;height: 50px;position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%);    background-size: 50px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath d='M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z' fill='%23fff'/%3E %3C/svg%3E"); }
.box .tit{font-size:5rem;font-weight: 500;}
.box .tit span.sub_tit{font-size:3rem;font-weight: 500;color: #9b9b9b;display: block;margin-top: 10px;}
.box .tit span.best{color: #fa3e57;margin-right: 4px;}
.box .tit span.hot{color: #fa3e57;display: block;font-size: 3rem;font-weight: 600;margin-top: -30px;}
.box .tit span.only{color: #bf76ff;display: block;font-size: 3rem;font-weight: 600;margin-top: -30px;}
.box .tit span.mint{color: #4cc9a7;display: block;font-size: 3rem;font-weight: 600;margin-top: -30px;}
.box .tit span.mint span{color:#6a8bff}
.box .price_flex{justify-content: end;align-items: baseline;gap:10px}
.box .price_sub{font-size: 3rem;text-decoration: line-through;color: #9b9b9b;font-weight: 500;}
.box .price{font-size: 6rem;color: #6a8bff;font-weight: 700;line-height: 1;}
.box .price span.won{font-size:3rem;color:#211f1f;font-weight: 400;}
.sec04{padding-bottom: 60px;}
.sec04 >.conatiner:nth-of-type(1) .box_tit{background-color: #a6ec49;}
.sec04 >.conatiner:nth-of-type(1) .box_tit:nth-of-type(2){background-color: #2a906f;}
.sec04 >.conatiner:nth-of-type(1) .box_tit:nth-of-type(3){background-color: #1f7882;}
.sec04 >.conatiner:nth-of-type(2) .box_tit:nth-of-type(1){background-color: #6a8bff;}
.sec04 >.conatiner:nth-of-type(2) .box_tit:nth-of-type(2){background-color: #2a5a90;}
.footer{padding-bottom: 80px;}

.popup_wrap {
  display: none;
  overflow-x: hidden;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.7);
}
.popup_wrap>div {
  position: absolute;
  background: #fff;
  padding: 100px 40px 70px;
  border-radius:20px;
  z-index: 1000;
  width: 550px;
  transform: translate(-55%, -55%);
  left: 55%;
  top: 55%;
}
.popup_wrap .btn_close {
  background: url("../img/popup_close.svg") no-repeat center;
  width: 24px;
  height: 24px;
  position: absolute;
  right: 30px;
  top: 30px;
}
.popup_wrap .pop_cont{    max-width: 460px;
    margin: 0 auto;
    text-align: center;}
.popup_wrap .pop_cont .title{font-size: 3rem;font-weight: 700;color:#DDA478;margin-bottom: 24px;}
.popup_wrap .pop_cont .desc{font-size: 2rem;color:#333;margin-bottom: 30px;line-height: 30px;}
.popup_wrap .btn_flex .flex+ .flex{margin-top: 15px;}
.popup_wrap .btn_flex .flex{border: 1px solid #DDDDDD;height: 70px;padding: 20px 24px;border-radius: 12px;}
.popup_wrap .btn_flex a{align-items: center;justify-content: space-between;font-size: 2rem;font-weight: 500;color:#333333}
.popup_wrap .btn_flex a>div:first-child{display: inline-flex;align-items: center;font-size: 2rem;font-weight: 700;gap:10px}

@media (max-width: 769px){
html{font-size:6px;}
.main_wrap{max-width: 100%;}
.main_wrap .conatiner{padding: 0 15px;}
.sticky_menu {flex-wrap: wrap;height: 80px;line-height: 40px;}
.sticky_menu a{flex:auto;width:calc(50% - 1px);}
.sec01{background-position: center top;}
.box{padding: 20px 15px;min-height: auto;        gap: 20px;}
.box input[type="checkbox"]+ label::before{width:20px;height: 20px;}
.box input[type="checkbox"]+ label{width:20px;height: 20px;}
.box input[type="checkbox"]:checked +label::after{background-size: 20px;background-repeat: no-repeat;
    width: 20px;height: 20px;}
.box .tit{font-size: 20px;}
.box .tit span.sub_tit{font-size: 15px;margin-top: 5px;}
.box .price{font-size: 26px;}
.box_tit{height: 60px;line-height: 60px;font-size: 26px;}
.box:has(.only,.mint,.hot){padding-top: 40px;}
.box .tit span.mint,.box .tit span.only,.box .tit span.hot{font-size: 13px;}
.popup_wrap>div{max-width: 90vw;padding: 40px 20px;}
.popup_wrap .pop_cont .title{font-size: 20px;margin-bottom: 10px;}
.popup_wrap .pop_cont .desc{font-size: 15px;line-height: 1.4;}
.popup_wrap .btn_flex .flex{height: 45px;line-height: 45px;}
.popup_wrap .btn_flex .flex img{transform: scale(0.8);}
.popup_wrap .btn_close{transform: scale(0.6);top:15px;right:15px}
.quick_menu{height: 60px;line-height: 60px;}
}