@font-face {
font-family: "Pretendard-Regular";
src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Pretendard-SemiBold";
src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff") format("woff");
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: "Pretendard-Bold";
src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff") format("woff");
font-weight: 700;
font-style: normal;
}

.event-benefit-template .cont-wrap  {padding-bottom: 0px !important;}

.tab_body    {position: relative; width:100%; margin:0 auto;} 
.tab_container   {position: sticky; top: 0; left: 0; display:flex; width:100%; height: 56px; justify-content:center;transition: all 0.2s; opacity: 1; z-index: 90; } 
.tab_container li  { width:100%; height: 100%;} 
.tab_container li a.active  {color:#00928D; border-color: #00928D; font-weight: 800;}
.tab_container li a   {
    font-family: 'Pretendard-Regular','Pretendard-SemiBold';
    display: flex;
    width:100%;
    height: 100%;
    background-color:white;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    color: #505050;
    border-bottom: 4px solid white;
    box-sizing: content-box;
} 

.tab_contents   {position: relative;}
.tab_container li a span   {
    pointer-events: none;
}

.item-position  {
    position: relative;
    margin: 0 14%;
}

#benefit    {
    background-color: #F1F3F5;
    max-width: 1380px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
#benefit h2 {
    padding: 100px 0 64px;
}
#benefit section    {padding-bottom: 80px;}

.sub-tit  {
    padding-bottom: 32px;
}
.benefit-cont01-item-wrap   {
    width: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 32px;
}
.benefit-cont01-item-wrap div   {position: relative;}
.gram-pro-ai-btn01    {
    position: absolute;
    width: 84%;
    height: 10.5%;
    top: 45%;
    left: 8%;
}

.benefit-cont02-item-wrap   {
    width: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding-bottom: 24px;
}
.benefit-cont02-item-wrap div   {
    position: relative;
    height: fit-content;
}
.gram-pro-ai-btn02  {
    position: absolute;
    width: 84%;
    height: 9.5%;
    top: 44%;
    left: 8%;
}
.gram-pro-ai-btn03  {
    position: absolute;
    width: 40.7%;
    height: 10.5%;
    top: 49.5%;
    left: 4%;
}

.benefit-cont03 div:nth-of-type(1) {padding-bottom: 48px;}

.product-cont2  {background: #F1F3F5; padding-bottom: 100px;}
.product-cont2 h3   {padding: 100px 0 64px;}
.product-cont2-item01   {position: relative; width: auto; margin: 0 14%;}
.product-cont2-item02   {position: relative; width: auto; margin: 0 26%;}

.product-cont2-btn  {
    position: relative;
    display: flex;
    width: 720px;
    height: 68px;
    margin: 0 auto 64px;
    background: white;
    border-radius: 64px;
    border: 1px solid #DBDCDF;
    align-items: center;
    justify-content: center;
}
.product-cont2-btn button   {
    font-family: 'Pretendard';
    width: 49%;
    height: 52px;
    border-radius: 60px;
    font-size: 18px;
    color: #505050;
    font-weight: 600;
}
.product-cont2-btn button.active    {
    background: #0F0F10;
    color: white;
}
.event_01_slide .swiper-slide,
.event_02_slide .swiper-slide  {background: no-repeat;} 

.product-cont2-item .swiper-pagination {bottom: 9%;}
.product-cont2-item .swiper-pagination .swiper-pagination-bullet {width:24px; height:24px; border-radius:24px;}
.product-cont2-item .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {width:64px; background:#838A90;}

.popup-wrap {width: fit-content; background: no-repeat;}
.popup-wrap .pop-conts  {padding: 0 !important;}
.popup-wrap .pop-conts.no-footer:after  {padding-bottom: 0px;}
.popup-wrap>.btn-close  {
    top: 16px;
    right: 30px;
    width: 40px;
    height: 40px;
}
.popup-wrap>.btn-close::before  {
    width: 40px;
    height: 40px;
    background-size: 40px;
    filter: invert(1);
}

.kakao_wrap .benefit    {height: 49% !important;}
.kakao_wrap .kakao  {height: 17% !important;}

@media screen and (max-width: 820px)    {
    .slide_wrap {
        width: 100%;
    }
}
@media screen and (max-width: 767px)    {
    body    {
        width: 100%;
    }
    .event-benefit-template    {
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .tab_container    {
        top: 45px;
        height: calc(100 / 720*100vw);
    }
    .tab_container li a {font-size: calc(28 / 720*100vw);}
    .tab_container li:nth-of-type(1) a  {line-height: 1.2;}
    .hellobar-wrap .tab_container {top: 88px;}
    .item-position  {margin: 0 calc(48 / 720 * 100vw);}
    .sub-tit    {padding-bottom:calc(48 / 720 * 100vw);}
    #benefit section    {padding-bottom: calc(96 / 720 * 100vw);}

    #benefit h2 {padding: calc(80 / 720 * 100vw) 0;}

    .benefit-cont01-item-wrap   {grid-template-columns: repeat(1, 1fr); gap: 20px; margin-top: calc(40 / 720 * 100vw);}
    .gram-pro-ai-btn01  {
        width: 88%;
        height: 11.5%;
        top: 42%;
        left: 6%;
    }
    .benefit-cont02-item-wrap   {grid-template-columns: repeat(1, 1fr); gap: 20px; padding-bottom: 20px;}
    .gram-pro-ai-btn02  {
        width: 88%;
        height: 13.5%;
        top: 46%;
        left: 6%;
    }
    .gram-pro-ai-btn03  {
        width: 87.7%;
        height: 8.5%;
        top: 67.5%;
        left: 6%;
    }

    .benefit-cont04 {padding-top:calc(96 / 720 * 100vw); background: white;}

    .product-cont2  {padding-bottom: 15%;}
    .product-cont2 h3   {padding: calc(80 / 720 * 100vw) 0;}

    .product-cont2-btn  {
        margin: 0 calc(48 / 720 * 100vw) calc(80 / 720 * 100vw);
        width: auto;
        height: calc(120 / 720 * 100vw);
    }
    .product-cont2-btn button   {
        font-size: calc(28 / 720 * 100vw);
        height: calc(104 / 720 * 100vw);
        line-height: 1.3;
    }

    .product-cont2-item01,
    .product-cont2-item02   {margin: 0 calc(48 / 720 * 100vw);}
    .product-cont2-item .swiper-container   {padding: 0 0 14%;}
    .product-cont2-item .swiper-pagination  {bottom: 0%;}
    .product-cont2-item .swiper-pagination .swiper-pagination-bullet {width:calc(24 / 720 * 100vw); height:calc(24 / 720 * 100vw); border-radius:calc(24 / 720 * 100vw);}
    .product-cont2-item .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {width:calc(64 / 720 * 100vw); background:black;}

    .popup-wrap .pop-conts.no-footer    {height: 100%; max-height: 100%;}
    .popup-wrap .pop-conts.no-footer img    {width: 100%;}

    .popup-wrap>.btn-close  {
        top: 13px;
        right: 13px;
    }

    .kakao_wrap .benefit    {top: 39% !important;}
    .kakao_wrap .kakao  {top: 71.7% !important;}
}