@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;
}
.full-width {margin: 0 !important; width: 100%;}
.event-benefit-template .cont-wrap  {padding-bottom: 0px !important;}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after    {content: '';}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after    {content: '';}

.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:#1A1A1A; border-color: #1A1A1A; 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%;
    text-align: center;
}

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

.sub-tit  {
    padding-bottom: 28px;
}
.benefit-cont01 > div:nth-of-type(1)    {
    margin-bottom: 80px;
}
.coupon-pack    {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 26.5%;
}
.benefit-cont01-item-wrap   {
    width: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}
.benefit-cont01-item-wrap div   {position: relative;}
.gram-pro-ai-btn01    {
    position: absolute;
    width: 84%;
    height: 10.5%;
    top: 46%;
    left: 8%;
}

.benefit-cont02 > div:nth-of-type(3) {
    margin: 40px 14% 20px;
}
.benefit-cont02 > div:nth-of-type(4) .gram-pro-ai-btn03 {
    height: 23%;
}
.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: 41%;
    height: 13%;
    top: auto;
    bottom: 0;
    left: 29.5%;
}

.benefit-cont03 {background: #F8F7F5; padding-top: 80px;}
.benefit-cont03 div:nth-of-type(1) {padding-bottom: 40px;}
.benefit-cont03-tit {text-align: left;}

.benefit-cont04 {background: white; padding-top: 80px;}

.event_01_slide .swiper-slide,
.event_02_slide .swiper-slide  {background: no-repeat;} 

.product-cont01 {background: #F7F7F7; padding: 0 0 80px;}
.product-cont01 > h3    {padding: 80px 0 40px;}
.product-cont01 .item-position {
    text-align: center;
    padding-top: 80px;
}
.product-cont01 div.item-position:nth-of-type(1)   {padding-top: 0;}
.product-cont01 .item-position a    {position: absolute; width: 25.2%; height: 7%;}
.product-link01 {top: 88%; left: 37.5%;}
.product-link02 {top: 89.2%; left: 37.5%;}
.product-link03 {top: 89.3%; left: 37.5%;}

.product-cont02 {background: #EFEDED; padding: 80px 0 80px;}
.product-cont02 h3  {padding-bottom: 40px;}

.product-tab-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 0 auto 20px;
}
.product-tab-buttons button {
    font-family: 'Pretendard-Regular','Pretendard-SemiBold';
    padding: 12px 18px;
    border: none;
    border-radius: 30px; /* pill 모양 */
    background: no-repeat;
    color: #2E2E33;
    border:1px solid #CBC8C2;
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
}
.product-tab-buttons button.active {
    border: 1px solid #000;
    background: #000;
    color: #fff;
}
.product-tab-content {display: none;}
.product-tab-content.active {display: block;}

.gram-ai-cont01-tit {margin: 80px 0 40px;}
.gram-ai-cont01-video   {margin-bottom: 80px;}
.gram-ai-cont01-video video.pc  {position: relative; width: 58.7%;}
.gram-ai-cont02-item03  {margin: 80px 0 40px;}
.gram-ai-cont02-item04  {margin-top: 40px; padding-bottom: 1px;}
.gram-ai-cont02-item04-toggle   {margin: 20px 0 20px;}
.gram-ai-cont02-item05 .swiper-container    {
    position: relative;
    width: 66.3%;
    padding-bottom: 4%;
}
.gram-ai-cont02-item05 .swiper-button-prev, .gram-ai-cont02-item05 .swiper-container-rtl .swiper-button-next  {background-image : url("/kr/event/2025/08/25_back_to_school/images/btn-arr-14x23-lt.png"); width: 13px; height: 23px;}
.gram-ai-cont02-item05 .swiper-button-next, .gram-ai-cont02-item05 .swiper-container-rtl .swiper-button-prev  {background-image : url("/kr/event/2025/08/25_back_to_school/images/btn-arr-14x23-rt.png"); width: 13px; height: 23px;}
.gram-ai-cont02-item05-tit  {margin: 40px 0 20px;}
.gram-ai-cont02-item04-toggle-btn   {padding-bottom: 20PX;}
.gram-ai-cont02-item04-toggle-btn > div {cursor: pointer; width: fit-content; margin: 0 auto;}
.gram-ai-cont02-item04-toggle .on   {display: none;}
.gram-ai-cont02-item04-toggle .off  {display: block;}

.gram-ai-cont02-item04-toggle.on .on   {display: block;}
.gram-ai-cont02-item04-toggle.on .off  {display: none;}

.gram-ai-cont02-item04-toggle .gram-ai-cont02-item04-toggle-item {display: none;}
.gram-ai-cont02-item04-toggle.on .gram-ai-cont02-item04-toggle-item {display: block;}
.swiper-button-prev, .swiper-button-next,.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {top: 39%;}
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets   {
    bottom: 11%;
}

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {background: #999999; width: 10px; height: 10px; border-radius: 10px;}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet-active    {background: black; width: 24px;}

.popup-wrap {}
.popup-wrap .pop-conts  {}
.popup-wrap .pop-conts img  {max-width:100%;}
.popup-wrap .pop-conts.no-footer:after  {}
.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(0.5);
}

.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: 56px;
        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: 98px;}
    .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-cont01 > div:nth-of-type(1)    {margin-bottom: calc(80 / 720 * 100vw);}
    .coupon-pack    {height: 35%;}

    #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: 12.5%;
        top: 46%;
        left: 6%;
    }
    .gram-pro-ai-btn01.ver2 {top: 42%;}
    .benefit-cont02 > div:nth-of-type(3)    {margin: calc(64 / 720 * 100vw) calc(48 / 720 * 100vw) calc(40 / 720 * 100vw);}
    .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: 17.5%;
        top: 82.5%;
        left: 6%;
    }
    .benefit-cont02 > div:nth-of-type(4) .gram-pro-ai-btn03 {
        top: 74.7%;
        height: 26%;
    }

    .benefit-cont03 {padding-top: calc(80 / 720 * 100vw);}
    .benefit-cont03 div:nth-of-type(1)  {padding-bottom: calc(64 / 720 * 100vw);}
    

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

    .product-cont01 {padding: 0 0 calc(64 / 720 * 100vw);}
    .product-cont01 .item-position {
        padding-top: calc(64 / 720 * 100vw);
    }
    .product-cont01 .item-position a    {position: absolute; width: 40.3%; height: 8%;}
    .product-link01 {top: 88.5%; left: 30%;}
    .product-link02 {top: 89%; left: 30%;}
    .product-link03 {top: 89%; left: 30%;}

    
    .product-cont02 {padding: calc(64 / 720 * 100vw) 0 calc(64 / 720 * 100vw);}
    .product-cont02 h3  {padding-bottom: calc(64 / 720 * 100vw);}

    .product-cont02-item    {overflow: hidden;}
    .product-tab-buttons    {
        margin: 0 calc(48 / 720 * 100vw) calc(40 / 720 * 100vw);
        width: 100%;
        padding-right: 20%;
        overflow: scroll;
        flex-flow: nowrap;
    }
    .product-tab-buttons button {
        font-size: calc(28 / 720 * 100vw);
        padding: 8px 12px;
        min-width: fit-content;
    }

    .gram-ai-cont01-tit {padding: calc(80 / 720 * 100vw) calc(48 / 720 * 100vw) calc(64 / 720 * 100vw); margin: 0;}
    .gram-ai-cont01-video   {margin-bottom: calc(80 / 720 * 100vw);}
    .gram-ai-cont01-video video.mobile  {
        width: 100%;
        padding: 0 calc(48 / 720 * 100vw);
    }
    .gram-ai-cont02-item01  {margin-bottom: calc(40 / 720 * 100vw);}
    .gram-ai-cont02-item03  {margin: 0;}
    .gram-ai-cont02-item04  {margin-top: 0;}
    .gram-ai-cont02-item04-toggle   {margin-bottom: 0;}
    .gram-ai-cont02-item04-toggle-btn > div   {width: calc(276 / 720 * 100vw);}
    .gram-ai-cont02-item04-toggle-item  {margin: 0 16px calc(60 / 720 * 100vw);}
    .gram-ai-cont02-item05-tit  {margin-top: 0;}
    .gram-ai-cont02-item05 .swiper-container    {
        position: relative;
        width: auto;
        margin-left: 4.5%;
        padding-bottom: 18%;
    }
    .gram-ai-cont02-item05 .swiper-slide    {width: 80%;}
    
    .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;}
}