/* ===== review proof section ===== */
.review-proof-section{
    background: transparent;
    padding: 90px 0;
}

.review-proof-inner{
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.review-proof-head{
    text-align: center;
    margin-bottom: 56px;
    padding: 0 40px;
}

.review-proof-head h2{
    color: #364153;
    font-size: 42px;
    font-weight: 700;
    line-height: 56px;
    letter-spacing: -0.5px;
}

.review-proof-head p{
    margin-top: 16px;
    color: #626D7E;
    font-size: 24px;
    font-weight: 500;
    line-height: 36px;
    letter-spacing: -0.5px;
}

.review-proof-slider-wrap{
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 0;
}

.review-proof-slider-wrap .kmong_review_swiper{
    width: 100%;
    overflow: hidden;
}

.review-proof-slider-wrap .kmong_review_swiper .swiper-wrapper{
    transition-timing-function: linear;
}

.review-proof-slider-wrap .kmong_review_swiper .swiper-slide{
    width: 415px;
}

.review-proof-slider-wrap .swiper-slide{
    height: auto;
}

.review-proof-card{
    height: 100%;
    background: #FFF;
    border: 1px solid #DDEEFF;
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.review-proof-card-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.review-proof-stars{
    line-height: 1;
    letter-spacing: 2px;
}
.review-proof-stars img{
    max-width: 21px;
}

.review-proof-chip{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    background: #F6FEFF;
    border: 1px solid #C4F9FF;
    border-radius: 8px;
    color: #3CCBDB;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    padding: 8px 12px;
}

.review-proof-chip-icon{
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.review-proof-chip-text{
    line-height: 1.2;
    font-weight: 500;
}

.review-proof-card h3{
    color: #364153;
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: -0.4px;
    word-break: keep-all;
}

.review-proof-desc{
    border-top: 1px solid #DCECEF;
    padding-top: 14px;
    color: #626D7E;
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: -0.1px;
    word-break: keep-all;
}

.review-proof-desc .review-proof-em{
    font-weight: 700;
    color: #515D6E;
}

.review-proof-author{
    margin-top: auto;
    color: #626D7E;
    opacity: 0.8;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.review-proof-author img{
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

.review-proof-footnote{
    background: #F3F8FF;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    margin-top: 56px;
}

.review-proof-footnote-logo{
    width: 79px;
    height: 22px;
}

.review-proof-footnote-logo svg{
    width: 100%;
    height: 100%;
}

.review-proof-footnote-text{
    color: #364153;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: -0.5px;
    text-align: center;
}

.review-proof-footnote-text span{
    color: #2384F0;
}

.review-proof-nav{
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid #DAEBF8;
    background: #FFF;
    box-shadow: 0 2px 12px rgba(218, 230, 242, 0.2);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    z-index: 3;
}

.review-proof-nav::before{
    content: "";
    width: 14px;
    height: 14px;
    border-top: 2px solid #3CCBDB;
    border-right: 2px solid #3CCBDB;
    position: absolute;
    top: 50%;
    left: 50%;
}

.review-proof-prev::before{
    transform: translate(-40%, -50%) rotate(-135deg);
}

.review-proof-next::before{
    transform: translate(-60%, -50%) rotate(45deg);
}

@media (min-width: 1024px){
    .review-proof-slider-wrap{
        padding: 0;
        overflow: hidden;
    }
    .review-proof-slider-wrap .kmong_review_swiper{
        position: relative;
        z-index: 1;
    }
    .review-proof-slider-wrap::before,
    .review-proof-slider-wrap::after{
        content: "";
        position: absolute;
        top: 0;
        width: 143px;
        height: 100%;
        z-index: 2;
        pointer-events: none;
    }
    .review-proof-slider-wrap::before{
        left: 0;
        background: linear-gradient(to right, #fff 0%, rgba(255,255,255,0) 100%);
    }
    .review-proof-slider-wrap::after{
        right: 0;
        background: linear-gradient(to left, #fff 0%, rgba(255,255,255,0) 100%);
    }
    .review-proof-prev{
        position: absolute;
        left: 43px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 4;
    }
    .review-proof-next{
        position: absolute;
        right: 43px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 4;
    }
}

@media (max-width: 1439px){
    .review-proof-head h2{
        font-size: 36px;
        line-height: 48px;
    }
    .review-proof-head p{
        font-size: 22px;
        line-height: 34px;
    }
    .review-proof-card h3{
        font-size: 20px;
        line-height: 30px;
    }
    .review-proof-desc{
        font-size: 16px;
        line-height: 28px;
    }
    .review-proof-nav{
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 1024px){
    .review-proof-section{
        padding: 60px 0;
    }
    .review-proof-head{
        margin-bottom: 32px;
        padding: 0 20px;
    }
    .review-proof-slider-wrap{
        /* padding: 0 20px; */
    }
    .review-proof-slider-wrap .kmong_review_swiper .swiper-slide{
        width: 415px;
    }
    .review-proof-head h2{
        font-size: 28px;
        line-height: 1.2;
    }
    .review-proof-head p{
        margin-top: 4px;
        font-size: 16px;
        line-height: 24px;
    }
    .review-proof-card{
        padding: 24px;
        gap: 16px;
    }
    .review-proof-stars{
        font-size: 20px;
    }
    .review-proof-chip{
        font-size: 14px;
        padding: 7px 10px;
    }
    .review-proof-card h3{
        font-size: 18px;
        line-height: 28px;
    }
    .review-proof-desc{
        font-size: 16px;
        line-height: 28px;
        padding-top: 10px;
    }
    .review-proof-author{
        font-size: 15px;
    }
    .review-proof-footnote{
        margin-top: 32px;
        padding: 24px 16px;
        gap: 12px;
    }
    .review-proof-footnote-text{
        font-size: 18px;
        line-height: 30px;
    }
}

@media (max-width: 768px){
    .review-proof-nav{
        display: none;
    }
}

@media (max-width: 768px){
    .review-proof-slider-wrap{
        gap: 0;
        /* padding: 0 16px; */
    }
    .review-proof-slider-wrap .kmong_review_swiper .swiper-slide{
        width: calc(100vw - 48px);
    }
    .review-proof-card{
        min-height: 229px;
        padding: 16px;
        gap: 8px;
    }
    .review-proof-card-top{
        align-items: center;
        padding-bottom: 4px;
    }
    .review-proof-stars{
        font-size: 18px;
        letter-spacing: 1px;
    }
    .review-proof-chip{
        font-size: 16px;
        padding: 0px 8px;
    }
    .review-proof-card h3{
        font-size: 16px;
        line-height: 28px;
    }
    .review-proof-chip-text{
        font-size: 16px;
        line-height: 36px;
    }
    .review-proof-desc{
        font-size: 14px;
        line-height: 24px;
        padding-top: 8px;
    }
    
    .review-proof-author{
        font-size: 14px;
        line-height: 22px;
    }
    .review-proof-footnote{
        flex-direction: column;
        margin-top: 60px;
    }
    .review-proof-footnote-text{
        font-size: 14px;
        line-height: 22px;
    }
}
html{
    scroll-behavior: smooth;
}
html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
i,
b,
img
{
  /* font-size: 0.0521vw; */
}

img {
  max-width: 100%;
}

img.pc{
    display: block;
}   
img.mo{
    display: none;
}   

main {
  overflow: hidden;
}

/* common CSS */

.inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}

.text-primary{
    color: var(--primary-color);
}


.contents{
    padding: 0 20px;
}

.spinner{
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 80px);
}


.spinner img{
    width: 100px;
}


/* // common CSS */

/*
.section {
  padding: 150px 0;
}
*/

.section .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}

/*
.section .contents {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-basis: 65%;
}
*/

.section .imgBox {
  flex-basis: 35%;
}

div.banner[data-sectionItem] .contents {
  flex-basis: auto;
}

.section .contents h2 {
  font-size: var(--headline-font-size);
}
.section h2{
    font-size: var(--headline-font-size);
}

.section .contents h3 {
  color: var(--primary-color);
  font-size: var(--step-font-size);
}



.startFixButton {
  position: fixed;
  display: none;
  border-radius: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 99;
}

.startFixButton a {
  border-radius: 0;
  font-weight: 700;
  font-size: 20px;
  padding: 20px 0;
}

main .contents{
    max-width: 1150px;
    margin: 0 auto;
}

div[data-sectionItem] h2{
    font-size: 30px;
    font-weight: 700;
/*    text-align: center;*/
}
div[data-sectionItem] h2:not(p){
    padding-bottom: 70px;
}
div[data-sectionItem] h2:has(+ p){
    padding-bottom: 4px;
}
div[data-sectionItem] h2 + p{
    font-size: 16px;
    font-weight: 500;
    color: #888;
    text-align: center;
}

/* =============================================
   히어로 섹션 (Hero Section)
   Breakpoints: 1920, 1440, 1024, 768, 375
   ============================================= */

/* -- 히어로 섹션 기본 -- */
.hero-section {
    padding: 0 !important;
    background: #fff !important;
    text-align: left;
    overflow: visible;
    height: calc(100dvh - 77px - 88px);
    min-height: 700px;
}

.hero-section * {
    box-sizing: border-box;
}

/* -- PC 레이아웃 (1025px+) -- */
.hero-inner {
    position: relative;
    max-width: 1272px;
    margin: 0 auto;
    height: 100%;
}

/* -- 히어로 타이틀 -- */
.hero-title {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-weight: 700;
    letter-spacing: -0.35px;
    padding: 0 !important;
    margin: 0;
}
.hero-title-line1,
.hero-title-line2{
    font-weight: 700;
}

.hero-title-line1 {
    font-size: 48px;
    line-height: 60px;
    color: #404040;
    display: block;
}

.hero-title-line2 {
    font-size: 48px;
    line-height: 60px;
    color: #404040;
    display: block;
}

.gradient-text {
    background: linear-gradient(-90deg, #155DFC -98.42%, #3CCBDB 78.77%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: inherit;
    font-weight: inherit;
}

/* -- 히어로 설명 영역 -- */
.hero-desc {
    font-size: 22px;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: -0.5px;
    color: #4A5565;
    padding: 0 !important;
    margin: 0;
}
.hero-desc span{
    font-size: inherit;
    font-weight: inherit;
}

.hero-desc-pc { display: inline; }
.hero-desc-mo { display: none; }

.text-highlight {
    color: #32AFE3;
    font-weight: 600;
}

/* -- 기능 리스트 -- */
.hero-features {
    padding: 0;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 20px;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: -0.5px;
    color: #2F3946;
}
.feature-list li span{
    font-size: inherit;
}   

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: #E2F7FA;
    border-radius: 999px;
    padding: 6px;
    flex-shrink: 0;
    margin-top: 2px;
}

.feature-icon svg {
    width: 19px;
    height: 19px;
}

/* -- CTA 버튼 -- */
.hero-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    width: 388px;
    background: linear-gradient(-90deg, #155DFC -98.42%, #3CCBDB 78.77%);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
}

/* -- 히어로 목업 이미지 -- */
.hero-mockup {
    overflow: hidden;
    position: relative;
    box-shadow: 0px 21px 102px -15px rgba(193, 239, 243, 0.3);
}

.hero-mockup img {
    width: 100%;
    height: auto;
    display: block;
}

/* 이미지 위 반투명 오버레이 (피그마 투명도 효과) */
.hero-mockup::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.08);
    z-index: 1;
    pointer-events: none;
}

.hero-mockup-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 207px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #f6fdfd 100%);
    pointer-events: none;
    z-index: 2;
}

.clone-card{
    display: none;
}


/* =============================================
   히어로 - 1920px PC 레이아웃 (이미지가 배경처럼 깔림)
   ============================================= */
@media (min-width: 1441px) {
    .hero-inner {
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        
    }

    /* 이미지: 우측 배경처럼 배치, 텍스트와 살짝 겹침 */
    .hero-image-area {
        position: absolute;
        top: 50%;
        right: 40px;
        width: 58%;
        z-index: 0;
        transform: translateY(-50%);
    }

    .hero-mockup {
        width: 100%;
        max-width: 904px;
    }

    .hero-mockup-fade {
        height: 100%;
        background: linear-gradient(to left, rgba(255, 255, 255, 0) 60%, #ffffff 150%);
        width: 100%;
    }

    /* 텍스트 콘텐츠: 좌측, 이미지 위에 표시 */
    .hero-title {
        position: relative;
        z-index: 2;
        max-width: 602px;
    }

    .hero-title-line1,
    .hero-title-line2 {
        font-size: 48px;
        line-height: 60px;
    }
    

    .hero-desc-area {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: 25px;
        max-width: 602px;
        padding-top: 10px;
    }

    .hero-desc {
        font-size: 22px;
        line-height: 36px;
    }
    .hero-features{
        padding-top: 30px;
    }

    .feature-list li {
        font-size: 20px;
        line-height: 36px;
    }
}


/* =============================================
   히어로 - 1440px PC 레이아웃
   ============================================= */
@media (min-width: 1025px) and (max-width: 1440px) {
    .hero-inner {
        position: relative;
        overflow: hidden;
        max-width: 960px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: calc(100dvh - 77px - 80px);
        min-height: initial;
    }

    /* 이미지: 우측 배경 */
    .hero-image-area {
        position: absolute;
        right: 0px;
        width: 58%;
        z-index: 0;
    }

    .hero-mockup {
        width: 100%;
        max-width: 760px;
    }

    .hero-mockup-fade {
        height: 100%;
        background: linear-gradient(to left, rgba(255, 255, 255, 0) 90%, #ffffff 100%);
        width: 100%;
    }
    

    /* 텍스트 */
    .hero-title {
        position: relative;
        z-index: 2;
        max-width: 602px;
        padding-bottom: 8px !important;
        gap:0;
    }

    .hero-title-line1,
    .hero-title-line2 {
        font-size: 38px;
        line-height: 56px;
    }

    .hero-desc-area {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: 25px;
        max-width: 602px;
    }

    .hero-desc {
        font-size: 20px;
        line-height: 36px;
    }
    .hero-features{
        padding-top: 8px;
    }
    .hero-cta-btn{
        height: 56px;
    }

    .feature-list li {
        font-size: 18px;
        line-height: 36px;
    }
}

/* =============================================
   히어로 - 768px ~ 1024px PC 레이아웃
   ============================================= */
   @media (min-width: 769px) and (max-width: 1024px) {
    .hero-desc-mo br:first-child{
        /* display: none; */
    }
}

/* =============================================
   히어로 - 1024px 태블릿 레이아웃
   ============================================= */
@media (max-width: 1024px) {
    .hero-section {
        text-align: center;
        height: auto;
        min-height: auto;
    }

    .hero-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 40px 40px 0;
        min-height: auto;
    }

    .hero-title {
        align-items: center;
        text-align: center;
        gap: 0;
        margin-bottom: 24px;
    }

    .hero-title-line1 {
        font-size: 28px;
        line-height: 40px;
    }

    .hero-title-line2 {
        font-size: 28px;
        line-height: 40px;
    }

    /* 목업 이미지 - 작은 크기 + 반투명 */
    .hero-image-area {
        width: 100%;
        max-width: 556px;
        margin-bottom: -150px;
        position: relative;
        z-index: 0;
    }

    .hero-mockup {
        opacity: 0.6;
        border-radius: 12px;
        box-shadow: 0px 12px 60px -9px rgba(193, 239, 243, 0.3);
    }

    .hero-mockup-fade {
        height: 100%;
        width: 100%;
        background: none;
    }

    /* 설명 영역 - 이미지 위에 오버레이 */
    .hero-desc-area {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        width: 100%;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.9) 30%, rgba(255, 255, 255, 0) 100%);
        margin-top: -200px;
        padding-bottom: 100px;
        padding-top: 80px;
    }

    

    .hero-desc-pc { display: none; }
    .hero-desc-mo { display: inline; }
    
    span.hero-desc-mo{
        font-weight: 600;
    }

    .hero-desc {
        font-size: 22px;
        font-weight: 500;
        line-height: 34px;
        color: #404040;
        text-align: center;
    }

    .hero-features {
        max-width: 402px;
        width: 100%;
    }

    .feature-list {
        gap: 8px;
        padding-top: 8px;
    }

    .feature-list li {
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        color: #5A636F;
        gap: 8px;
        text-align: left;
    }

    .hero-cta-btn {
        max-width: 402px;
        width: 100%;
        height: 48px;
        font-size: 16px;
        max-width: 402px;
        width: 100%;
        
    }
    .feature-icon{
        background:transparent;
        padding: 0;
        width: 16px;
        height: 16px;

    }
    .feature-icon svg{
        width: 16px;
        height: 16px;
    }
    .coupon-card .card-deco{
        display: none;
    }
    .clone-card{
        display: block;
    }
}


/* =============================================
   히어로 - 768px 태블릿 소형
   ============================================= */
@media (max-width: 768px) {
    .hero-inner {
        padding: 40px 16px 0;
    }

    .hero-title-line1 {
        font-size: 28px;
        line-height: 32px;
    }

    .hero-title-line2 {
        font-size: 28px;
        line-height: 40px;
    }

    .hero-image-area {
        max-width: 464px;
        min-width: 343px;
    }

    .hero-desc {
        font-size: 17px;
        line-height: 24px;
    }

    .hero-cta-btn {
        width: 100%;
        max-width: 343px;
    }
    .hero-mockup-fade{
        /* background: linear-gradient(to bottom, rgba(255,255,255,0) 40%, #f6fdfd 80%) */
    }
    .hero-features{
        max-width: 343px;
    }
    .hero-desc-area{
        margin-top: -80px;
        padding: 50px 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0) 100%);
    }

    .dot{
        display: none;
    }
    
}

/* =============================================
   히어로 - 375px 모바일
   ============================================= */
@media (max-width: 480px) {
    .hero-inner {
        padding: 40px 16px 0;
    }

    .hero-image-area {
        max-width: 343px;
        margin-bottom: -120px;
    }

    .hero-desc-area {
        padding-top: 30px;
        margin-top: -50px;
    }
}


/* =============================================
   쿠폰 시작 섹션
   ============================================= */
.coupon-section {
    padding: 56px 0 96px !important;
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 57.69%, #fff 100%),
                linear-gradient(90deg, rgba(174,247,255,0.3) 0%, rgba(174,247,255,0.3) 100%) !important;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* 장식 이미지 (양쪽 끝) */
.coupon-deco-left {
    position: absolute;
    left: 85px;
    bottom: 20px;
    width: 370px;
    height: auto;
    z-index: 0;
    pointer-events: none;
}

.coupon-deco-right {
    position: absolute;
    right: 85px;
    top: -50px;
    width: 280px;
    height: auto;
    z-index: 0;
    pointer-events: none;
}

.coupon-inner {
    max-width: 1200px;
    margin: 0 auto;
    /* padding: 0 20px; */
    position: relative;
    z-index: 1;
}

.coupon-title {
    font-size: 28px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: -0.5px;
    color: #364153;
    text-align: center;
    margin-bottom: 51px;
    padding: 0 !important;
}

.coupon-title .text-highlight {
    color: #32ADE4;
}

/* 카드 래퍼 */
.coupon-cards-wrapper {
    width: 100%;
}
.coupon-cards-wrapper .swiper{
    overflow:initial;
}

.coupon-card {
    flex: 1;
    min-width: 0;
    background: #fff;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0px 17px 50px 0px rgba(137, 182, 253, 0.1);
    text-align: left;
    position: relative;
}
.coupon-cards .swiper-wrapper{
    display: flex;
    gap: 24px;
}
.coupon-card .card-deco{
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 36px;
}


.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 17px;
    min-height: 20px;
}

.card-label {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.07px;
    color: #7F8691;
}

.card-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: #38C1DE;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: -0.07px;
    color: #fff;
}

.card-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 17px;
}

.card-body .card-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: -0.12px;
    color: #364153;
    padding: 0 !important;
    margin: 0;
}

.card-body .card-desc {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.09px;
    color: #626D7E;
    padding: 0 !important;
    margin: 0;
}

.card-divider {
    width: 100%;
    height: 1px;
    background: #F3F3F3;
    margin-bottom: 17px;
}

.card-price {
    display: flex;
    align-items: center;
    line-height: 20px;
}

.price-calc {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.08px;
    color: #364153;
}

.price-total {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.1px;
    color: #2384F0;
    margin-left: 4px;
}

/* 쿠폰 페이지네이션 (PC 숨김) */
.coupon-pagination {
    display: none;
    justify-content: center;
    gap: 8px;
    padding: 24px 0 24px;
}

.pagination-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #C6E5F8;
    cursor: pointer;
}

.pagination-dot.active {
    background: #38C1DE;
}


/* -- 쿠폰 1440px -- */
@media (min-width: 1025px) and (max-width: 1440px) {
    .coupon-deco-left {
        max-width: 289px;
        left: 33px;
    }
    .coupon-deco-right {
        max-width: 195px;
        top: 10px;
        right: 100px;
    }
    .coupon-inner {
        max-width: 1040px;
    }
    .coupon-title {
        font-size: 22px;
    }
    .card-body .card-title {
        font-size: 20px;
        letter-spacing: -0.1px;
    }
    .card-body .card-desc {
        font-size: 16px;
        letter-spacing: -0.08px;
    }
    .card-body {
        gap: 4px;
    }
    .card-header {
        margin-bottom: 12px;
    }
    .card-divider {
        margin-bottom: 12px;
    }
}

/* -- 쿠폰 태블릿/모바일 -- */
@media (max-width: 1024px) {
    .coupon-deco-left {
        width: 120px;
        left: -20px;
        bottom: 10px;
        opacity: 0.3;
    }
    .coupon-deco-right {
        width: 160px;
        right: -20px;
        top: 10px;
        opacity: 0.5;
    }

    .coupon-section {
        padding: 60px 0 24px !important;
    }

    .coupon-inner {
        padding: 0;
    }

    .coupon-title {
        font-size: 18px;
        margin-bottom: 24px;
        padding: 0 16px !important;
    }

    /* 카드 슬라이드 모드 */
    .coupon-cards-wrapper {
        overflow: visible;
    }

    .coupon-cards {
        font-size: 0.2vw; /* 100 / 500 (모바일 500px 기준) */
        gap: 16em;
        padding: 0 16em;
    }
    .coupon-cards .swiper-wrapper{
        gap: 0em;  
    }

    .coupon-card {
        min-width: 343em;
        max-width: 343em;
        padding: 16em;
        border-radius: 24em;
        flex: 0 0 auto;
    }

    .card-label {
        font-size: clamp(12px, 12em, 12px);
    }

    .card-badge {
        font-size: clamp(12px, 14em, 14px);
        padding: 0.2857em 0.8571em; /* 4÷14, 12÷14 */
        border-radius: 0.6429em; /* 9÷14 */
        line-height: 1.1429em; /* 16÷14 */
    }

    .card-body .card-title {
        font-size: clamp(16px, 18em, 18px);
        font-weight: 600;
    }

    .card-body .card-desc {
        font-size: clamp(12px, 14em, 14px);
    }

    .card-body {
        gap: 4em;
    }

    .card-header {
        margin-bottom: 12em;
    }

    .card-divider {
        margin-bottom: 12em;
    }

    .price-calc {
        font-size: clamp(12px, 14em, 14px);
    }

    .price-total {
        font-size: clamp(16px, 18em, 18px);
    }

    /* 페이지네이션 표시 */
    .coupon-pagination {
        display: flex;
    }
}

.coupon-loop-mode .swiper-slide {
    opacity: 0.3;
    transition: opacity 0.3s ease;
}
.coupon-loop-mode .swiper-slide-active {
    opacity: 1;
}

/* // 히어로 & 쿠폰 섹션 */


/* =============================================
   걱정 없이 시작 섹션 (Worry Free Section)
   ============================================= */
.worry-free-section {
    padding: 90px 80px ;
    text-align: center;
    background: #fff ;
}

.worry-free-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
}

.worry-free-title {
    font-size: 42px;
    font-weight: 700;
    line-height: 56px;
    letter-spacing: -0.5px;
    color: #364153;
    text-align: center;
    padding: 0 !important;
    margin: 0;
}

.worry-free-cards-wrapper {
    width: 100%;
}

.worry-free-cards .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.worry-free-cards {
    overflow: initial;
}
.worry-free-card.clone-card {
    display: none;
}
.worry-free-section .mobile-br {
    display: none;
}
.worry-free-section .desktop-br {
    display: inline;
}
.worry-free-card {
    min-width: 0;
    padding: 24px 24px 32px;
    box-shadow: 0px 17px 50px 0px rgba(137, 182, 253, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(165.77deg, #F6F8FC -8.87%, #3CCBDB 159.88%) border-box;
}

.worry-free-card-img {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.worry-free-card-img img {
    max-width: 160px;
    width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.worry-free-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    width: 100%;
}

.worry-free-card-title {
    font-size: 24px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: -0.12px;
    color: #364153;
    padding: 0 !important;
    margin: 0;
}

.worry-free-card-desc {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.09px;
    color: #626D7E;
}

.worry-free-card-desc p {
    margin: 0;
    padding: 0;
}

.worry-free-pagination {
    display: none;
    justify-content: center;
    gap: 8px;
    padding: 24px 0 0;
}

/* -- 걱정없이 시작 1440px -- */
@media (min-width: 1025px) and (max-width: 1440px) {
    .worry-free-section {
        padding: 70px 40px !important;
    }
    .worry-free-inner {
        gap: 48px;
    }
    .worry-free-title {
        font-size: 34px;
        line-height: 46px;
    }
    .worry-free-card-title {
        font-size: 20px;
        line-height: 26px;
    }
    .worry-free-card-desc {
        font-size: 16px;
        line-height: 22px;
    }
}


@media (max-width: 1024px) {
    .worry-free-inner{
        gap: 32px;
    }
    .worry-free-title{
        font-size: 28px;
    }
    .worry-free-section{
        padding: 60px 40px;
    }
    .worry-free-card-title{
        font-size: 18px;
    }
    .worry-free-card-desc p{
        font-size: 14px;
    }
}

/* -- 걱정없이 시작 모바일 -- */
@media (max-width: 500px) {
    .worry-free-section {
        padding: 60px 16px !important;
    }
    .worry-free-inner {
        gap: 32px;
    }
    .worry-free-title {
        font-size: 22px;
        line-height: 26px;
    }
    .worry-free-cards-wrapper {
        overflow: visible;
    }
    .worry-free-cards {
        font-size: 0.2vw; /* 100 / 500 */
        overflow: visible;
    }
    .worry-free-cards .swiper-wrapper {
        display: flex;
        grid-template-columns: none;
        gap: 0em;
        align-items:stretch;
    }
    .worry-free-card.clone-card {
        display: flex;
    }
    .worry-free-section .mobile-br {
        display: inline;
    }
    .worry-free-section .desktop-br {
        display: none;
    }
    .worry-free-card {
        padding: 8em 14em 16em;
        gap: 8em;
        height: auto;
    }
    .worry-free-card-content {
        gap: 4em;
        flex: 1;
    }
    .worry-free-card-title {
        font-size: clamp(14px, 18em, 18px);
        line-height: 1.5556em; /* 28÷18 */
        letter-spacing: -0.005em; /* -0.09÷18 */
    }
    .worry-free-card-desc {
        font-size: clamp(12px, 14em, 14px);
        line-height: 1.5714em; /* 22÷14 */
        letter-spacing: -0.005em; /* -0.07÷14 */
    }
    .worry-free-pagination {
        display: flex;
    }
    .worry-free-card-desc p{
        font-size: clamp(10px, 12em, 12px);
    }
}

/* // 걱정 없이 시작 섹션 */


/* =============================================
   리뷰 1개~500개 가격 섹션 (Pricing Section)
   ============================================= */
.pricing-section {
    padding: 90px 80px;
    text-align: center;
    background: #fff;
}

.pricing-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
}

.pricing-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.pricing-title {
    font-size: 42px;
    font-weight: 700;
    line-height: 56px;
    letter-spacing: -0.5px;
    color: #364153;
    text-align: center;
    padding: 0 !important;
    margin: 0;
}

.pricing-subtitle {
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    color: #626D7E;
    margin: 0;
}

.pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
}

.pricing-card {
    position: relative;
    padding: 40px 24px 24px;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(165.77deg, #F6F8FC -8.87%, #3CCBDB 159.88%) border-box;
    border-radius: 24px;
    box-shadow: 0px 17px 50px 0px rgba(137, 182, 253, 0.1);
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.pricing-card-popular {
    border: 1px solid transparent;
    background:
        radial-gradient(140% 70% at 0% 100%, rgba(255, 178, 154, 0.05) 0%, rgba(255, 178, 154, 0) 55%) padding-box,
        radial-gradient(120% 70% at 100% 0%, rgba(255, 107, 168, 0.15) 0%, rgba(255, 107, 168, 0) 60%) padding-box,
        radial-gradient(90% 65% at 0% 100%, rgba(60, 203, 219, 0.15) 0%, rgba(60, 203, 219, 0) 65%) padding-box,
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(165.77deg, #F6F8FC -8.87%, #3CCBDB 159.88%) border-box;
    box-shadow: 0px 17px 50px 0px rgba(60, 203, 219, 0.15);
}

.pricing-card-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.32px;
}

.pricing-card-badge.discount {
    background: #ECEDF0;
    color: #444C67;
    font-size: 16px;
    line-height: 16px;
    min-height: 33px;
    display: inline-flex;
    align-items: center;
    border: none;
    border-radius: 999px;
    padding: 0 16px;
}

.pricing-card-badge.popular {
    background: #FBE9F1;
    color: var(--pink-100-color, #DA2872);
}

.pricing-card-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: #364153;
    margin: 0 0 8px;
}

.pricing-card-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin: 0;
    letter-spacing: -0.5px;
}

.pricing-card-price-main {
    font-size: 36px;
    font-weight: 700;
    line-height: 40px;
}

.pricing-card-price-unit {
    font-size: 24px;
    font-weight: 700;
    line-height: 40px;
}

.pricing-card-features {
    list-style: none;
    padding: 0;
    margin: 24px 0 32px;
    padding-top: 24px;
    border-top: 1px solid #DCECEF;
    text-align: left;
    flex: 1;
    width: 100%;
}

.pricing-card-features li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 24px;
    color: #364153;
    letter-spacing: -0.5px;
}

.pricing-card-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #CCF6FF;
    box-shadow: inset 0 0 0 1px rgba(51, 176, 227, 0.08);
}

.pricing-card-features li::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 7px;
    width: 10px;
    height: 6px;
    border-left: 2px solid #33B0E3;
    border-bottom: 2px solid #33B0E3;
    transform: rotate(-45deg);
}

.pricing-card:nth-child(2) .pricing-card-features li:last-child::before,
.pricing-card:nth-child(3) .pricing-card-features li:last-child::before {
    background: #33B0E3;
}

.pricing-card:nth-child(2) .pricing-card-features li:last-child::after,
.pricing-card:nth-child(3) .pricing-card-features li:last-child::after {
    border-color: #fff;
}

.pricing-card-btn {
    display: block;
    width: 100%;
    padding: 12px 24px;
    background: #48C5F8;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    line-height: 32px;
    text-align: center;
    border-radius: 8px;
    text-decoration: none;
    transition: opacity 0.2s;
}

.pricing-card-btn:hover {
    opacity: 0.9;
}

.pricing-card-popular .pricing-card-btn {
    background: linear-gradient(-90deg, #155DFC -98.42%, #3CCBDB 78.77%)
}

/* 가격 섹션 반응형 */
@media (min-width: 1025px) and (max-width: 1440px) {
    .pricing-section {
        padding: 70px 40px !important;
    }
    .pricing-inner {
        gap: 48px;
    }
    .pricing-head {
        gap: 10px;
    }
    .pricing-title {
        font-size: 34px;
        line-height: 46px;
    }
    .pricing-subtitle {
        font-size: 18px;
    }
}

@media (max-width: 1024px) {
    .pricing-section {
        padding: 60px 24px !important;
    }
    .pricing-inner {
        gap: 40px;
    }
    .pricing-head {
        gap: 8px;
    }
    .pricing-cards {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }
    .pricing-card-price-main {
        font-size: 32px;
        line-height: 36px;
    }
    .pricing-card-price-unit {
        font-size: 20px;
        line-height: 36px;
    }
}

@media (max-width: 500px) {
    .pricing-section {
        padding: 60px 16px !important;
    }
    .pricing-inner {
        gap: 32px;
    }
    .pricing-head {
        gap: 6px;
    }
    .pricing-title {
        font-size: 22px;
        line-height: 30px;
    }
    .pricing-subtitle {
        font-size: 14px;
        line-height: 22px;
    }
    .pricing-card-title {
        font-size: 20px;
        line-height: 28px;
    }
    .pricing-card {
        padding: 32px 16px 16px;
    }
    .pricing-card-price-main {
        font-size: 24px;
        line-height: 32px;
    }
    .pricing-card-price-unit {
        font-size: 16px;
        line-height: 32px;
    }
    .pricing-card-features {
        margin-top: 16px;
        padding-top: 16px;
    }
    .pricing-card-features li {
        font-size: 14px;
        line-height: 24px;
        padding-left: 26px;
    }
    .pricing-card-features li::before {
        width: 16px;
        height: 16px;
    }
    .pricing-card-features li::after {
        left: 4px;
        top: 6px;
        width: 8px;
        height: 5px;
    }
    .pricing-card-btn {
        font-size: 16px;
        line-height: 32px;
        padding: 10px 16px;
    }
    .pricing-card-badge {
        top: -13px;
        padding: 7px 14px;
        font-size: 14px;
    }
    .pricing-card-badge.discount {
        font-size: 14px;
        min-height: 30px;
    }
}


/* =============================================
   사장님 할일 5가지 섹션 (Owner Work Section)
   ============================================= */
.owner-work-section {
    padding: 90px 80px;
    background: #fff;
}

.owner-work-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.owner-work-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.owner-work-title {
    font-size: 42px;
    font-weight: 700;
    line-height: 56px;
    letter-spacing: -0.5px;
    color: #364153;
    text-align: center;
    padding: 0 !important;
    margin: 0;
}

.owner-work-subtitle {
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    color: #626D7E;
    text-align: center;
    margin: 0;
}

.owner-work-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.owner-work-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 413px);
    gap: 24px;
    align-items: center;
    background: #F9FBFF;
    border-radius: 24px;
    padding: 32px;
}

.owner-work-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.owner-work-text-mo {
    display: none;
}

.owner-work-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #32ADE4;
    color: #fff;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: -0.5px;
}
.owner-work-text-pc{
    display: flex;
    flex-direction: column;
    gap:4px;
}

.owner-work-item-title {
    font-size: 28px;
    font-weight: 600;
    line-height: 36px;
    color: #364153;
    margin: 0;
    letter-spacing: -0.5px;
}

.owner-work-point {
    color: #32ADE4;
}

.owner-work-item-desc {
    font-size: 18px;
    line-height: 28px;
    color: #626D7E;
    margin: 0;
    letter-spacing: -0.5px;
}

.owner-work-img {
    overflow: hidden;
    justify-self: end;
    width: 100%;
    max-width: 413px;
    max-height: 160px;
}

.owner-work-item:nth-child(5) .owner-work-img {
    aspect-ratio: 728 / 349;
    max-height: 174.5px;
}

.owner-work-img picture,
.owner-work-img img {
    width: 100%;
    height: 100%;
    display: block;
}

.owner-work-img img {
    object-fit: cover;
}

.owner-work-img-dual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* 사장님 할일 섹션 반응형 */
@media (min-width: 1025px) and (max-width: 1440px) {
    .owner-work-section {
        padding: 70px 40px !important;
    }
    .owner-work-inner {
        gap: 28px;
    }
    .owner-work-head {
        gap: 8px;
    }
    .owner-work-title {
        font-size: 34px;
        line-height: 46px;
    }
    
}

@media (min-width: 501px) and (max-width: 768px) {
    .owner-work-section {
        padding: 60px 24px !important;
    }
    .owner-work-inner {
        gap: 32px;
    }
    .owner-work-head {
        gap: 4px;
    }
    .owner-work-list {
        gap: 16px;
    }
    .owner-work-title {
        font-size: 22px;
        line-height: 26px;
    }
    .owner-work-subtitle {
        font-size: 14px;
        line-height: 22px;
    }
    .owner-work-item {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 16px;
        align-items: center;
        padding: 16px 24px;
        border-radius: 24px;
        background: #F9FBFF;
    }
    .owner-work-content {
        order: 1;
        max-width: none;
        gap: 12px;
        text-align: left;
    }
    .owner-work-num {
        display: inline-flex;
        width: 24px;
        height: 24px;
        border-radius: 8px;
        font-size: 16px;
        line-height: 18px;
    }
    .owner-work-text-pc {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .owner-work-text-mo {
        display: none;
    }
    .owner-work-img {
        order: 2;
        justify-self: end;
        width: 100%;
        max-width: 100%;
        height: auto;
        border: 1px solid #CFE6FD;
        border-radius: 16px;
        overflow: hidden;
        aspect-ratio: 728 / 320;
    }
    .owner-work-item:nth-child(5) .owner-work-img {
        aspect-ratio: 728 / 349;
    }
    .owner-work-item-title {
        font-size: 18px;
        line-height: 24px;
    }
    .owner-work-item-desc {
        font-size: 14px;
        line-height: 22px;
    }
}



@media (max-width: 500px) {
    .owner-work-section {
        padding: 60px 16px !important;
    }
    .owner-work-inner {
        gap: 32px;
    }
    .owner-work-head {
        gap: 4px;
    }
    .owner-work-list {
        gap: 12px;
    }
    .owner-work-title {
        font-size: 22px;
        line-height: 26px;
    }
    .owner-work-subtitle {
        font-size: 14px;
        line-height: 22px;
    }
    .owner-work-num {
        display: none;
    }
    .owner-work-item {
        grid-template-columns: 1fr;
        padding: 0;
        border-radius: 16px;
        border: 1px solid #8FEAFF;
        background: #fff;
        overflow: hidden;
        gap:0;
    }
    .owner-work-img {
        order: 1;
        width: 100%;
        border: 0;
        border-radius: 0;
        max-width: none;
        max-height: none;
        aspect-ratio: auto;
    }
    .owner-work-content {
        order: 2;
        padding: 16px;
        gap: 8px;
        text-align: center;
    }
    .owner-work-text-pc {
        display: none;
    }
    .owner-work-text-mo {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .owner-work-item-title {
        font-size: 18px;
        line-height: 24px;
    }
    .owner-work-item-desc {
        font-size: 14px;
        line-height: 22px;
    }
}

/* // 사장님 할일 섹션 */


/* =============================================
   광고주 회원가입 플로우 섹션
   ============================================= */
.signup-flow-section {
    padding: 90px 40px;
    background: #F3F9FB;
}

.signup-flow-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
}

.signup-flow-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.signup-flow-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    color: #364153;
    font-size: 42px;
    font-weight: 700;
    line-height: 56px;
    letter-spacing: -0.5px;
    text-align: center;
}

.signup-flow-subtitle {
    margin: 0;
    color: #626D7E;
    font-size: 24px;
    font-weight: 500;
    line-height: 36px;
    letter-spacing: -0.5px;
    text-align: center;
}

.signup-flow-body {
    width: 100%;
}

.signup-flow-body picture,
.signup-flow-body img {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 1025px) and (max-width: 1440px) {
    .signup-flow-section {
        padding: 90px 40px;
    }

    .signup-flow-inner {
        gap: 64px;
    }

    .signup-flow-title {
        font-size: 36px;
        line-height: 40px;
    }

    .signup-flow-subtitle {
        font-size: 24px;
        line-height: 36px;
    }
}

@media (max-width: 1024px) {
    .signup-flow-section {
        padding: 60px 40px;
    }

    .signup-flow-inner {
        gap: 32px;
    }

    .signup-flow-head {
        gap: 8px;
    }

    .signup-flow-title {
        font-size: 28px;
        line-height: 36px;
    }

    .signup-flow-subtitle {
        font-size: 16px;
        line-height: 24px;
    }
}

@media (max-width: 768px) {
    .signup-flow-section {
        padding: 60px 16px;
    }

    .signup-flow-title {
        font-size: 22px;
        line-height: 26px;
    }

    .signup-flow-subtitle {
        font-size: 14px;
        line-height: 22px;
    }
}

/* section 2 */
div[data-sectionItem="2"]{
    padding: 110px 0;
    background: var(--primary-color);
    text-align: center;
     color: #fff;   
}

div[data-sectionItem="2"] div{
    font-size: 30px;
    font-weight: 700;
    line-height: 50px;
}

div[data-sectionItem="2"] div:nth-child(2){
    padding-top: 32px;
}

div[data-sectionItem="2"] div:nth-child(2) span{
    font-size: inherit;
    font-weight: 700;
    line-height: 34px;
    color: #222;
}

/* // section 2 */

/*  section 3 */
div[data-sectionItem="3"]{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100px 0 180px;
}
div[data-sectionItem="3"] h2{
    font-size: 30px;
    padding-bottom: 70px;
}

div[data-sectionItem="3"] .item{
    display:flex;
    align-items: center;
    gap:90px;
    padding-bottom: 150px;
}
div[data-sectionItem="3"] .item:last-child{
    padding-bottom: 0;
}
div[data-sectionItem="3"] .item .text{
    flex: .6;
}
div[data-sectionItem="3"] .item .img{
    flex: 1.4;
    max-width: 600px;
}
div[data-sectionItem="3"] .item .point_label{
    display: inline-block;
    color: var(--color-orange);
    background: rgba(247,233,72,0.5);
    font-size: 18px;
    font-weight: 700;
    padding: 5px 15px;
    border-radius: var(--border-round-S);
    margin-bottom: 10px;
}

div[data-sectionItem="3"] .item:nth-child(2n) div:first-child{
    order: 2;
}

div[data-sectionItem="3"] .item h2{
    font-size: 40px;
    font-weight: 700;
    line-height: 55px;
    color: #222;
    padding-bottom: 20px;
}
div[data-sectionItem="3"] .item h2 br{
/*    display: none;*/
}

div[data-sectionItem="3"] .item .body{
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    color: #444;
    padding-bottom: 40px;
}

div[data-sectionItem="3"] .item .desc{
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    color: #888;
}

/* // section 3 */


/*  section 4 */
div[data-sectionItem="4"]{
    background: #182B2D;
    color: #fff;
    text-align: center;
    padding-top: 110px;
    padding-bottom: 130px;
}

div[data-sectionItem="4"] h3{
    font-size: 45px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    padding-bottom: 25px;
    position: relative;
    display: inline-block;
}
div[data-sectionItem="4"] h3::before{
    content: "";
    display: block;
    position: absolute;
    top: calc(-25px / 2);
    left: -137px;
    width: 25px;
    height: 25px;
    background: url(../asset/img/partners_left.png);
    background-size: cover;
}

div[data-sectionItem="4"] h3::after{
    content: "";
    display: block;
    position: absolute;
    bottom: calc(-25px / 2);
    right: -189px;
    width: 77px;
    height: 55px;
    background: url(../asset/img/partners_right.png);
    background-size: cover;
}

div[data-sectionItem="4"] .desc{
    color: #A3AAAB;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-bottom: 60px;
}
div[data-sectionItem="4"] .item_box{
    display: flex;    
    max-width: 1110px;
    margin: 0 auto;
    gap:30px;
}
div[data-sectionItem="4"] .card{
    display: flex;
    flex-direction: column;
    width:33.3333%;
    border-radius: 40px;
    background: #294447;
    padding: 50px 30px; 
    gap:30px;
    text-align: left;
    height: auto;
}

div[data-sectionItem="4"] .card .info{
    font-size: 14px;
    font-weight: 400;
    line-height: 28px; /* 175% */
}


div[data-sectionItem="4"] .corp{
    display: flex;
    gap:30px;
    align-items: center;
}

div[data-sectionItem="4"] .corp_info{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

div[data-sectionItem="4"] .corp_info span:first-child{
    font-size: 22px;
    font-weight: 700;
}
div[data-sectionItem="4"] .corp_info span:last-child{
    font-size: 18px;
    font-weight: 500;
}

div[data-sectionItem="4"] .button_wrap{
    padding-top: 60px;
    max-width: 256px;
    margin: 0 auto;
}

div[data-sectionItem="4"] .button_wrap a{
    font-size: 20px;
    font-weight: 500;
    
}

/* // section 4 */

/*  section 5 */
div[data-sectionItem="5"]{
    background: #fff;
    padding: 0px 80px 128px;
}

div[data-sectionItem="5"] .contents{
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 1272px;
    margin: 0 auto;
    align-items: center;
    gap: 64px;
}

div[data-sectionItem="5"] .title{
    color: #364153;
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: 56px;
    letter-spacing: -0.5px;
    padding-bottom: 0;
}

div[data-sectionItem="5"] .question_list{
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}
div[data-sectionItem="5"] .question_list .item{
    padding: 16px;
    background: #F9FBFF;
    border: 1px solid #DFEDF0;
    border-radius: 12px;
    transition: background-color .2s ease;
}
div[data-sectionItem="5"] .question_list .item.active{
    background: #fff;
}
div[data-sectionItem="5"] .question_list .item .Q{
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding-right: 56px;
    cursor: pointer;
    color: #364153;
}
div[data-sectionItem="5"] .question_list .item .Q .q-label{
    color: #2384F0;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: -0.12px;
}
div[data-sectionItem="5"] .question_list .item .Q .q-text{
    color: #364153;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: -0.1px;
}
div[data-sectionItem="5"] .question_list .item .Q::before{
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #364153;
    font-size: 34px;
    font-weight: 300;
    line-height: 1;
    transition: color .2s ease;
}
div[data-sectionItem="5"] .question_list .item.active .Q::before{
    content: "-";
    color: #2384F0;
}
div[data-sectionItem="5"] .question_list .item .A{
    display: none;
    color: #626D7E;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: -0.09px;
    margin-top: 0;
    padding-top: 0;
    border-top: 0 solid #DFEDF0;
    overflow: hidden;
}

div[data-sectionItem="5"] .question_list .item.active .A{
    margin-top: 8px;
    padding-top: 16px;
    border-top-width: 1px;
    border-top-style: dashed;
}
div[data-sectionItem="5"] .question_list .item.active .Q .q-text{
    color: #2384F0;
    font-weight: 600;
}

@media (min-width: 1025px) and (max-width: 1440px) {
    div[data-sectionItem="5"]{
        padding: 80px 80px 60px;
    }
    div[data-sectionItem="5"] .contents{
        max-width: 1120px;
    }
    div[data-sectionItem="5"] .title{
        font-size: 36px;
        line-height: 40px;
    }
}

@media (max-width: 1024px) {
    div[data-sectionItem="5"]{
        padding: 60px 40px;
    }
    div[data-sectionItem="5"] .contents{
        gap: 64px;
    }
    div[data-sectionItem="5"] .title{
        font-size: 28px;
        line-height: 36px;
    }
    div[data-sectionItem="5"] .question_list .item .Q .q-text{
        font-size: 18px;
    }
    div[data-sectionItem="5"] .question_list .item .A{
        font-size: 16px;
        letter-spacing: -0.08px;
    }
}

@media (max-width: 768px) {
    div[data-sectionItem="5"]{
        padding: 0 16px 60px;
    }
    div[data-sectionItem="5"] .contents{
        gap: 32px;
        padding: 0;
    }
    div[data-sectionItem="5"] .title{
        font-size: 22px;
        line-height: 26px;
    }
    div[data-sectionItem="5"] .question_list{
        gap: 12px;
    }
    div[data-sectionItem="5"] .question_list .item{
        padding: 8px 12px;
    }
    div[data-sectionItem="5"] .question_list .item .Q{
        min-height: 40px;
        padding-right: 44px;
    }
    div[data-sectionItem="5"] .question_list .item .Q .q-label{
        font-size: 14px;
        line-height: 22px;
        letter-spacing: -0.07px;
    }
    div[data-sectionItem="5"] .question_list .item .Q .q-text{
        font-size: 14px;
        line-height: 22px;
        letter-spacing: -0.07px;
    }
    div[data-sectionItem="5"] .question_list .item .Q::before{
        width: 24px;
        height: 24px;
        font-size: 24px;
    }
    div[data-sectionItem="5"] .question_list .item .A{
        font-size: 14px;
        line-height: 22px;
        letter-spacing: -0.07px;
    }
    div[data-sectionItem="5"] .question_list .item.active .A{
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .pricing-card-btn{
        font-size: 16px;
        line-height: 24px;
    }
    .pricing-cards{
        gap:32px;
    }
}





/* // section 5 */

/*  section 6 */
div[data-sectionItem="6"]{
    position: relative;
    overflow: hidden;
    color: #fff;
}
/* div[data-sectionItem="6"]::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(46.05% 87.56% at 62.08% 23.33%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%);
} */
div[data-sectionItem="6"] .section_bg_img{
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
}
div[data-sectionItem="6"] .section_bg_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

div[data-sectionItem="6"] .contents{
    position: relative;
    z-index: 2;
    max-width: 100%;
    display: flex;
    justify-content: flex-end;
    margin: 0 auto;
    min-height: 448px;
    padding: 48px min(15.8vw, 303px) 48px 20px;
    align-items: center;
}
div[data-sectionItem="6"] .right_box{
    width: 100%;
    max-width: 413px;
}

div[data-sectionItem="6"] .right_box a{
    display: block;
    text-align: center;
    max-width: none;
    padding: 12px 32px;
    line-height: 32px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
    border-radius: 8px;
    color: #645542;
}

div[data-sectionItem="6"] .right_box .message_box{
    padding-bottom: 24px;
}
div[data-sectionItem="6"] .right_box .message_box p{
    color: #f5feff;
    font-size: 20px;
    font-weight: 600;
    line-height: 34px;
    letter-spacing: -0.5px;
    text-align: right;
    padding-bottom: 10px;
}
div[data-sectionItem="6"] .right_box .message_box p:last-child{
    padding-bottom: 0;
}
div[data-sectionItem="6"] .right_box .message_box p.point_text{
    color: #00e4ff;
    font-weight: 800;
}

/* // section 6 */


/*  section 7 */
div[data-sectionItem="7"]{
    margin: 0 auto;
    padding: 110px 0;
    background: var(--bg-gray);
}

div[data-sectionItem="7"] h2{
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    padding-bottom: 50px;

}
div[data-sectionItem="7"] p{
    color: #888;
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    padding-bottom: 50px;
}

div[data-sectionItem="7"] p b{
    font-weight: 700;
    font-size: 30px;
    color: #222;
}

div[data-sectionItem="7"] .contaniner{
    position: relative;
    max-width: 1350px;
    margin: 0 auto;
}
div[data-sectionItem="7"] .kmong_review_swiper{
    max-width: 1110px;
}

div[data-sectionItem="7"] .card{
    border-radius: 15px;
    border: 1px solid #E4E8EE;
    background: #FFF;
    padding: 40px 30px 0;
    min-height: 473px;
}

div[data-sectionItem="7"] .card .profile{
    display: flex;
    gap:20px;
    align-items: center;
    padding-bottom: 20px;
}

div[data-sectionItem="7"] .card .profile div:first-child img{
    border-radius: 9999px;
    object-fit: cover;
    max-width: 70px;
}

div[data-sectionItem="7"] .card .profile div:last-child img{
    max-width: 120px;
}
div[data-sectionItem="7"] .card .profile .name{
    font-size: 16px;
    font-weight: 500;    
}
div[data-sectionItem="7"] .card .tag{
    background-color: var(--primary-color);
    color: #fff;
    padding: 5px 10px;
    border-radius: 50px;
    font-size: 14px;
    width: fit-content;
    margin-bottom: 20px;
    font-weight: 700;
}

div[data-sectionItem="7"] .card .profile div:last-child{
    display: flex;
    flex-direction: column;
    gap:10px;
}

div[data-sectionItem="7"] .card .desc{
    color: #666;
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    word-break: keep-all;
}
div[data-sectionItem="7"] .card .desc span{
    font-size: inherit;
    color: #222;
    font-weight: 700;
}

div[data-sectionItem="7"] .swiper-button-prev, div[data-sectionItem="7"] .swiper-button-next{
    width: 70px;
    height: 70px;
}

div[data-sectionItem="7"] .swiper-button-prev:after{
    content: "";
    background: url(../asset/img/prev_btn.png);
    width: 100%;
    height: 100%;
}

div[data-sectionItem="7"] .swiper-button-next:after{
    content: "";
    background: url(../asset/img/next_btn.png);
    width: 100%;
    height: 100%;
}
div[data-sectionItem="7"] .kmong_text{
    padding-top: 60px;
    font-size: 30px;
    text-align: center;
    color: #454D56;
}
div[data-sectionItem="7"] .kmong_info{
    display: flex;
    align-items: center;
    font-size: 24px;
    justify-content: center;
    gap:30px;
}
div[data-sectionItem="7"] .kmong_text .kmong_info span{
    color: #222;
    border-bottom: none;
    font-size: 30px;
    line-height: 1;
    display: flex;
    align-items: center;
}
div[data-sectionItem="7"] .kmong_text .kmong_info .grade{
    background-color: rgba(17,106,212,0.2 );
    padding: 11px 14px;
    border-radius: 3px;
    line-height: 1;
    font-size: 1px;
}
div[data-sectionItem="7"] .kmong_text .kmong_info .rating b{
    font-weight: 700;
    font-size: 45px;
    line-height: 1;
    height: 50px;
    display: inline-block;
}

div[data-sectionItem="7"] .kmong_text span{
    font-size: inherit;
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    font-weight: 700;
}
div[data-sectionItem="7"] .kmong_text .desc{
    font-size: 24px;
    color: #888;
    padding-bottom: 25px;
}
div[data-sectionItem="7"] .kmong_text .desc b{
    font-size: 24px;
}

div[data-sectionItem="8"]{
    position: relative;
    padding: 134px 20px 100px;
}

div[data-sectionItem="8"] .left_pattern{
    position: absolute;
    left: 0;
    z-index: -1;
    
}
div[data-sectionItem="8"] .right_pattern{
    position: absolute;
    right: 0;
    z-index: -1;
}

div[data-sectionItem="8"] .contents{
    max-width: 1110px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap:90px;
    
}
div[data-sectionItem="8"] .left_box{
    flex: 1;
}

div[data-sectionItem="8"] .left_box h2{
    font-size: 45px;
    font-weight: 700;
    color: #222;
    padding-bottom: 23px;
}

div[data-sectionItem="8"] .left_box p{
    padding-bottom: 50px;
    font-size: 22px;
    font-weight: 400;
}

div[data-sectionItem="8"] .right_box{
    flex: 2;
}

div[data-sectionItem="8"] .right_box > div{
    display: flex;
    font-size: 18px;
    font-weight: 400;
    color: #444;
    gap:30px;
    padding-bottom: 10px;
    align-items: center;
}

div[data-sectionItem="8"] .right_box > div .essential{
    display: inline-block;
    font-size: 18px;
    font-weight: 400;
    color: #EF5D19;
    
}

div[data-sectionItem="8"] .right_box > div:last-child p{
    display: block;
    
}

div[data-sectionItem="8"] .right_box > div > div:first-child{
    max-width: 200px;
    font-size: inherit;
    font-weight: inherit;
    width: 100%;
    flex: 1;
}

div[data-sectionItem="8"] .right_box > div > div.agree_cont{
 flex:2;
}

div[data-sectionItem="8"] .right_box > div > div.agree_cont .term{
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
}
div[data-sectionItem="8"] .right_box > div > div.agree_cont .term .checkbox_{
    display: flex;
}

div[data-sectionItem="8"] .right_box > div > div.agree_cont .term .checkbox_ label{
    font-size: 16px;
    font-weight: 400;
    color: #666;
}
div[data-sectionItem="8"] .right_box > div > div.agree_cont .drop_wrap{}

div[data-sectionItem="8"] .right_box > div > div.term{
    max-width: none;
   
}

div[data-sectionItem="8"] .right_box > div select{
    margin: 0;
    padding: 0;
    background-image: url(../asset/img/select_arrow_ico.svg);
}

div[data-sectionItem="8"] .right_box > div.descBox div{
    align-self: flex-start;
    padding-top: 10px;
}
div[data-sectionItem="8"] .right_box > div > textarea.csDesc{
    min-height: 126px;
    padding: 20px;
}
div[data-sectionItem="8"] .right_box > div > input::placeholder,div[data-sectionItem="8"] .right_box > div > textarea::placeholder{
    color: #666;
    font-weight: 400;
}

div[data-sectionItem="8"] .right_box > div > input, div[data-sectionItem="8"] .right_box > div > select, div[data-sectionItem="8"] .right_box > div > textarea{
    min-height: 53px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #E4E8EE;
    flex: 2;
    padding: 15px;
    font-size: 14px;
    color: #666;
    outline:none;
    background-color: #fff;
}

div[data-sectionItem="8"] .drop_btn {
        cursor: pointer;
        font-size: 16px;
        font-weight: 400;
        width: 90px;
        padding: 2px 5px;
        border-radius: 5px;
        background-image: url(../asset/img/drop_arrow_ico.svg);
        background-repeat: no-repeat;
        background-position: right 8px center;
        color: #666;
}

div[data-sectionItem="8"] .drop_btn.active {
        background-image: url(../asset/img/drop_arrow_down_ico.svg);
}
.checkbox_ {
        position: relative;
        height: 100%;
}
.checkbox_ input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    cursor: pointer;
}
.checkbox_ input + label {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.checkbox_ input + label:before {
    content: "";
    width: 24px;
    height: 24px;
    border-radius: 5px;
    margin-right: 10px;
    background-image: url(../skin/demo/img/icon/tool/check.svg);
    background-repeat: no-repeat;
    background-size: cover;
}
.checkbox_ input:checked + label:before {
    background-image: url(../skin/demo/img/icon/tool/checked.svg);
    box-shadow: 0px 3px 6px #3CCBDB;
    -webkit-box-shadow: 0px 2px 3px #3CCBDB;
}

div[data-sectionItem="8"] .drop_wrap .text {
        background-color: var(--bg-gray);
        border-radius: 5px;
        padding: 20px;
        white-space: pre-line;
        font-size: 16px;
        line-height: 1.5em;
        color: #666;
        font-weight: 400;
        
}
div[data-sectionItem="8"] .right_box .btn_cont{
    padding-bottom: 26px;
}
div[data-sectionItem="8"] .button{
    justify-content: flex-end;
}
div[data-sectionItem="8"] .cs_req_btn{
    display: block;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
    border-radius: var(--border-round-L);
    background: var(--primary-color, #3CCBDB);
    box-shadow: 0px 10px 15px 0px rgba(13, 186, 205, 0.20); 
    padding: 15px;
    max-width: 180px;
    width: 100%;
    cursor: pointer;
}


/*  // section 7 */


div[data-sectionItem="9"]{
    padding: 90px 120px;
    text-align: center;
}

div[data-sectionItem="9"] h4{
    font-size: 42px;
    padding-bottom: 5px;
}
div[data-sectionItem="9"] h4 br{
    /* display: none; */
}
div[data-sectionItem="9"] h4 span{
    font-size: inherit;
    font-weight: 700;
}

div[data-sectionItem="9"] p{
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    color: #888;
}

div[data-sectionItem="9"] .img_box{
    padding-top: 40px;
}
div[data-sectionItem="9"] .img_box div{
    font-size: 20px;
}

div[data-sectionItem="9"] .img_box .swiper{
    padding-bottom: 40px;
}
div[data-sectionItem="9"] .img_box .swiper:last-child{
    padding-bottom: 0;
}

div[data-sectionItem="10"]{
    background: var(--bg-gray);
    padding: 50px 0;
    text-align: center;
}
div[data-sectionItem="10"] h4{
    font-size: 30px;
    font-weight: 700;
    padding-bottom: 10px;
    line-height: 60px;
}

div[data-sectionItem="10"] br{
    display: none;
}
div[data-sectionItem="10"] p{
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    color: #888;
}

div[data-sectionItem="10"] .contents > div{
    display: flex;
    justify-content: space-between;
    padding-top: 25px;
}
div[data-sectionItem="10"] .contents > div .item{
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;    
}
div[data-sectionItem="10"] .contents > div .item .text-bold{
    font-size: 45px;
    padding-top: 26px;
    padding-bottom: 20px;
}
div[data-sectionItem="10"] .contents > div .item .text-bold .small_text{
    font-size: 30px;
    font-weight: inherit;
}

div[data-sectionItem="10"] .contents > div .item .desc{
    
}

div[data-sectionItem="10"] .contents > div .item .desc p{
    font-size: 24px; 
    font-weight: 500;
    line-height: 34px;
    padding-bottom: 5px;
}

div[data-sectionItem="10"] .contents > div .item .desc span{
    font-size: 14px;
    font-weight: 500;
    color: #888;
}

div[data-sectionItem="10"] .contents > div .item img{
    max-width: 260px;
}
div[data-sectionItem="10"] .contents > div .item img.info2_pc{
    display: block;
    padding-bottom: 27px;
}

div[data-sectionItem="10"] .contents > div .item img.info2_mo{
    display: none;
}

div[data-sectionItem="11"]{
    padding: 96px 120px;
    text-align: center;
    background : url(../asset/img/bg_img2.png);
    background-size: cover;
}

div[data-sectionItem="11"] .contents .label_cont{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:5px;
    
}
div[data-sectionItem="11"] .contents .label_cont p{
    border-radius: 50px;
    padding: 9px 16px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
}
div[data-sectionItem="11"] .contents .label_cont p:nth-of-type(1){
    background: rgba(144, 74, 172, 0.20);
    color: #904AAC;
}
div[data-sectionItem="11"] .contents .label_cont p:nth-of-type(2){
    background: rgba(64, 164, 54, 0.20);
    color: #40A436;
}
div[data-sectionItem="11"] .contents .label_cont p:nth-of-type(3){
    background: rgba(255, 98, 98, 0.20);
    color: #FF6262;
}
div[data-sectionItem="11"] .contents .label_cont span{
    color: #454D56;    
    font-size: 14px;
}

div[data-sectionItem="11"] h1{
    font-size: 45px;
    font-weight: 700;
    padding: 10px 0 15px;
}
div[data-sectionItem="11"] h1 br{
    display: none;
}

div[data-sectionItem="11"] h1 span{
    font-size: inherit;
    color: var(--primary-color);
}

div[data-sectionItem="11"] .contents > p{
    font-size: 20px;
    font-weight: 500;
    color: #888;
}

div[data-sectionItem="11"] .contents .img_cont{
    padding-top: 40px;
}




div[data-sectionItem="12"]{
    padding: 90px 0 ;   
}

div[data-sectionItem="12"] .item_box{
    display: flex;
    gap:70px;
}

div[data-sectionItem="12"] .item_box .card{
    flex: 1;
}
div[data-sectionItem="12"] .item_box .card .thumbnail{
    aspect-ratio: 16 / 9;
    margin-bottom: 30px;
}

div[data-sectionItem="12"] .item_box .card .thumbnail img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}
div[data-sectionItem="12"] .item_box .card h2{
    font-size: 24px;
    padding-bottom: 15px;
}

div[data-sectionItem="12"] .item_box .card .desc{
    color: #666;
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 29px;
    line-height: 1.6;
}
div[data-sectionItem="12"] .item_box .card .btn_cont{
    display: inline-block;
}

div[data-sectionItem="12"] .item_box .card .btn_cont a{
    color: #666;
    font-size: 14px;
    font-weight: 400;
    background: transparent;
    display: flex;
    align-items: center;
    column-gap: 20px;
    border: none;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}



/* section 20 */
div[data-sectionItem="20"] {
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 50px;
  padding: 150px 0 150px;
    background: #F6F7FC;
}

div[data-sectionItem="20"] .containner {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 0 ;
    max-width: 1680px;
    width: 100%;
}

div[data-sectionItem="20"] .containner .item{
    padding: 35px 30px;
    border: 1px solid;
    border-radius: 30px;
    flex: 1;
    background: #fff;
}

div[data-sectionItem="20"] .containner .item h1{
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    padding-bottom: 10px;
    position: relative;
    z-index: 2;
}

div[data-sectionItem="20"] .containner .item div{
    min-height: 165px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
div[data-sectionItem="20"] .containner .item div > p{
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    line-height: 1.7;
}

.discount{
    color: #FF8B8B;
    border: 1px solid #FF8B8B;
    padding: 0 7.5px;
    border-radius: 5px;
    font-size: 16px
}

div[data-sectionItem="20"] .containner .item div.price_info{
    align-items: flex-start;
}

div[data-sectionItem="20"] .containner .item div.price_cont .discount{
    color: #FF8B8B;
    border: 1px solid #FF8B8B;
    padding: 0 7.5px;
    border-radius: 5px;
    font-size: 16px;
    min-width: auto;
    align-self: flex-start;
}
div[data-sectionItem="20"] .containner .item div.price_cont > span{
    min-width: 101px;
}
div[data-sectionItem="20"] .containner .item div.price_cont{
    display: flex;
    align-items: center;
    height: auto;
    min-height: auto;
    flex-direction: row;
    gap: 10px;
    padding-bottom: 12px;
}
div[data-sectionItem="20"] .containner .item div.price_cont > div{
    font-size: 16px;
    flex-direction: row;
    min-height: auto;
    align-items: flex-end;
    line-height: 1;
    gap:3px;
}
div[data-sectionItem="20"] .containner .item div.price_cont > div .month{
    font-size: 20px;
}
div[data-sectionItem="20"] .containner .item div.price_cont > div .price{
    font-size: 24px;
    line-height: .9;
}

div[data-sectionItem="20"] .containner .item:last-child div > p{
    display: flex;
    justify-content: space-between;
    padding: 0 40px;
}
div[data-sectionItem="20"] .containner .price_info p{
    align-items: flex-end;
}

div[data-sectionItem="20"] .containner .item div > p small{
    font-size: 14px;
}
div[data-sectionItem="20"] .containner .item:last-child div.price_info > p span{
    min-width: 160px;
    text-align: left;
    font-size: 24px;
}
div[data-sectionItem="20"] .containner .item:last-child div.price_info > p span.discount{
    color: #FF8B8B;
    border: 1px solid #FF8B8B;
    padding: 0 7.5px;
    border-radius: 5px;
    font-size: 16px;
    min-width: auto;
    align-self: center;
}
div[data-sectionItem="20"] .containner .item strike{
    color: #FF5151;
}

div[data-sectionItem="20"] .containner .item .info{
    padding: 11px 0;
    width: 100%;
    background: #F6F7FC;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    min-height: 182px;
}
div[data-sectionItem="20"] .containner .item .info .align_box{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
div[data-sectionItem="20"] .containner .item .info p{
    line-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    gap:10px;
    color: #666;
}

div[data-sectionItem="20"] .containner .item .info p span{
    font-size: inherit;
    color: inherit;
}

div[data-sectionItem="20"] .containner .item[data-item='1']{
    border-color: var(--accent-color);
}
div[data-sectionItem="20"] .containner .item[data-item='2']{
    position: relative;
    border-color: var(--primary-color);
}

.refund_policy{
    font-size: 20px;
    max-width: 1680px;
    width: 100%;
}
.refund_policy h3,.refund_policy span,.refund_policy div,.refund_policy p{
    font-size: 20px;
    color: #666;
    font-weight: 400;
    line-height: 2;
}
.refund_policy h3{
    font-weight: bold;
    color: #222;
}
.refund_policy p.title{
    padding-top: 15px;
    font-weight: 500;
}
.refund_policy p:not(.title){
    display: flex;
    gap:15px;
    align-items: center;
}
/*
// HOT 마크
div[data-sectionItem="20"] .containner .item[data-item='2']::before{
    content: "HOT";
    position: absolute;
    right: 20px;
    top: 27px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #F55F71;
    width: 80px;
    height: 80px;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    z-index: 1;
}
*/
div[data-sectionItem="20"] .scrollEffectCont .item {
  max-width: 340px;
}

div[data-sectionItem="20"] .itemBox .swiper-slide {
  flex-shrink: initial;
}

div[data-sectionItem="20"] .startButton {
  width: 100%;
  text-align: center;
}

div[data-sectionItem="20"] .startButton a {
    max-width: 200px;
    width: 100%;
    display: inline-block;
    padding: 16px 20px;
    font-size: 20px;
}
div[data-sectionItem="20"] .startButton a:first-child{
    margin-right: 30px;
}

div[data-sectionItem="99"]{
    padding: 90px 0 120px;
    background: url(../asset/img/bg_img3.png);
    background-size: cover;
}
div[data-sectionItem="99"] h1{
    font-size: 45px;
    font-weight: 700;
    padding-bottom:100px;
    text-align: center;
}
div[data-sectionItem="99"] span{
    font-size: inherit;
    font-weight: inherit;
    color: var(--primary-color);
}

div[data-sectionItem="12"] .iframe_cont{
    position: relative;
    padding-top: 56.2%;
    width: 100%;
    height: 0;
    border-radius: 20px;
    overflow: hidden;
}
div[data-sectionItem="12"] .iframe_cont iframe{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 20px;
    overflow: hidden;
}

div[data-sectionItem="13"]{
    text-align: center;
    padding: 90px 80px 180px;
}
div[data-sectionItem="13"] .contents.channel-intro{
    max-width: 1120px;
    padding: 0;
    margin: 0 auto;
}
div[data-sectionItem="13"] .channel-intro-head h2{
    color: #364153;
    font-size: 42px;
    font-weight: 700;
    line-height: 56px;
    letter-spacing: -0.5px;
}
div[data-sectionItem="13"] .channel-intro-head p{
    margin-top: 12px;
    color: #626D7E;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.5px;
}
div[data-sectionItem="13"] .channel-tabs{
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
    justify-content: center;
    flex-wrap: wrap;
}
div[data-sectionItem="13"] .channel-tabs .item{
    flex: 1 1 0;
    min-width: 190px;
    max-width: 216px;
}
div[data-sectionItem="13"] .channel-tabs .item button{
    width: 100%;
    border-radius: 999px;
    border: 1px solid #BEE8ED;
    background: #EAF9FB;
    color: #10A6B7;
    font-size: 20px;
    font-weight: 500;
    line-height: 36px;
    letter-spacing: -0.5px;
    padding: 10px 24px;
    transition: all 0.2s ease;
}
div[data-sectionItem="13"] .channel-tabs .item.active button{
    background: #3CCBDB;
    border-color: #3CCBDB;
    color: #fff;
    box-shadow: 0 17px 50px rgba(60, 203, 219, 0.2);
}
div[data-sectionItem="13"] .channel-panels{
    margin-top: 32px;
}
div[data-sectionItem="13"] .channel-panel{
    display: none;
    align-items: stretch;
    text-align: left;
}
div[data-sectionItem="13"] .channel-panel.active{
    display: flex;
}
div[data-sectionItem="13"] .channel-media{
    width: 438px;
    flex-shrink: 0;
    border-radius: 24px 0 0 24px;
    overflow: hidden;
    background: #D6EBF0;
}
div[data-sectionItem="13"] .channel-media picture,
div[data-sectionItem="13"] .channel-media img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
div[data-sectionItem="13"] .channel-body{
    flex: 1;
    border: 1px solid #DDEEFF;
    border-left: none;
    border-radius: 0 24px 24px 0;
    padding: 32px;
    background:
        radial-gradient(120% 90% at 100% 100%, rgba(239,253,255,0.9) 0%, rgba(249,254,255,0) 70%),
        #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
}
div[data-sectionItem="13"] .channel-title{
    width: 100%;
}
div[data-sectionItem="13"] .channel-title p{
    color: #10A6B7;
    font-size: 24px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: -0.5px;
}
div[data-sectionItem="13"] .channel-title h3{
    margin-top: 8px;
    color: #364153;
    font-size: 36px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: -0.5px;
}
div[data-sectionItem="13"] .why-label{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 10px;
    border-radius: 4px;
    background: #3CCBDB;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.5px;
}
div[data-sectionItem="13"] .channel-why p{
    margin-top: 8px;
    color: #364153;
    font-size: 22px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: -0.5px;
}
div[data-sectionItem="13"] .channel-why{
    margin-top: auto;
}
div[data-sectionItem="13"] .channel-points{
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
div[data-sectionItem="13"] .channel-points li{
    color: #626D7E;
    font-size: 20px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: -0.5px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
div[data-sectionItem="13"] .channel-points li::before{
    content: "✓";
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #CCF6FF;
    color: #10A6B7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 4px;
}
div[data-sectionItem="13"] .channel-panel[data-panel="shopping"] .channel-title{max-width: 314px;}
div[data-sectionItem="13"] .channel-panel[data-panel="blog"] .channel-title{max-width: 489px;}
div[data-sectionItem="13"] .channel-panel[data-panel="insta"] .channel-title{max-width: 409px;}
div[data-sectionItem="13"] .channel-panel[data-panel="clip"] .channel-title{max-width: 403px;}
div[data-sectionItem="13"] .channel-panel[data-panel="threads"] .channel-title{max-width: 428px;}
div[data-sectionItem="13"] .channel-panel[data-panel="shopping"] .channel-points{max-width: 408px;}
div[data-sectionItem="13"] .channel-panel[data-panel="blog"] .channel-points{max-width: 382px;}
div[data-sectionItem="13"] .channel-panel[data-panel="insta"] .channel-points{max-width: 310px;}
div[data-sectionItem="13"] .channel-panel[data-panel="clip"] .channel-points{max-width: 434px;}
div[data-sectionItem="13"] .channel-panel[data-panel="threads"] .channel-points{max-width: 277px;}




footer{
    padding: 65px 0 135px;
    border-top: 1px solid #E4E8EE;
}
footer > div{
    display: flex;
    max-width: 1110px;
    margin: 0 auto;
    gap:33px;
    
}

footer .logo{
    padding-top: 8px;
}

footer .logo img{
    max-width: 86px;
}

footer .corp_info{
    color: #888;
    font-family: 'Noto Sans KR', sans-serif;
    display: flex;
    flex-direction: column;
    gap:20px;
}

footer .corp_info span{
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px; /* 187.5% */
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
}

footer .corp_info span::before{
    content: "";
    display: block;
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background: #ddd;
}
footer .corp_info span:last-child::before{
    display: none;
}

footer .corp_info .copyright{
    font-size: 16px;
    font-weight: 400;
    line-height: 30px; /* 187.5% */
}

footer .corp_info div{
    
}


.auto_slide_banner_01 .swiper-wrapper,.auto_slide_banner_02 .swiper-wrapper,.auto_slide_banner_03 .swiper-wrapper,.auto_slide_banner_04 .swiper-wrapper{
    transition-timing-function: linear !important;  /* 추가하기 */
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}



/* 모바일 CSS */

@media (max-width: 1024px) {

    /* 기존 section 1 스타일 제거됨 - 새 .hero-section 스타일로 대체 */
    
    div.banner[data-sectionItem] .contents{
        width: 100%;
    }
    
    div[data-sectionItem="2"]{
        padding: 100px 20px;
    }
    
    div[data-sectionItem="2"] div{
        font-size: 22px;
        font-weight: 500;
        line-height: 34px; /* 154.545% */
    }
    
    div[data-sectionItem="3"]{
        padding: 50px 0;
/*        gap:90px;*/
    }
    div[data-sectionItem="3"] .item{
        flex-direction: column;
        align-self: stretch;
        gap:30px;
        padding-bottom: 90px
    }
    div[data-sectionItem="3"] .item .point_label{
        font-size: 13px;
        padding: 3px 14px;
    }
    
    
    div[data-sectionItem="3"] .item div:first-child{
        align-self: stretch;
    }
    
    div[data-sectionItem="3"] .item h2{
        font-size: 26px;
        font-weight: 700;
        line-height: 38px;
        padding-bottom: 15px;
        text-align: left;
    }
    div[data-sectionItem="3"] .item h2 br{
        display: block;
    }
    
    div[data-sectionItem="3"] .item .body{
        padding-bottom: 30px;
    }
    
    div[data-sectionItem="3"] .item:nth-child(2n) div:first-child{
        order: 0;
    }
    div[data-sectionItem="3"] .item .desc{
        font-size: 14px;
    }
    div[data-sectionItem="3"] .item .text{
        text-align: left;
    }
    
    div[data-sectionItem="4"]{
        padding-top: 90px;
        padding-bottom: 90px;
    }
    
    div[data-sectionItem="4"] h3{
        font-size: 26px;
        font-weight: 700;
        line-height: 50px;
        padding-bottom: 10px;
    }
    
    div[data-sectionItem="4"] h3::before{
        width: 12px;
        height: 12px;
        left: -300rem;
    }
    
    div[data-sectionItem="4"] h3::after{
        top: calc(-25px / 2);
        bottom: auto;
        right: -310rem;
        width: 49px;
        height: 35px;
    }
    
    div[data-sectionItem="4"] .desc{
        font-size: 14px;
        font-weight: 400;
        padding-bottom: 40px;
    }
    
    div[data-sectionItem="4"] .item_box{
        gap:0;
    }
    
    div[data-sectionItem="4"] .button_wrap{
        padding-top: 40px;
        max-width: 310px;
    }
    
    div[data-sectionItem="4"] .button_wrap a{
        font-size: 16px;
        font-weight: 500;
        padding: 10px 20px;
        max-width:none;
    }
    div[data-sectionItem="4"] .corp_info span:first-child{
        font-size: 18px;
    }
    div[data-sectionItem="4"] .corp_info span:last-child{
        font-size: 14px;
    }
    


    div[data-sectionItem="6"] .contents{
        justify-content: center;
        /* min-height: 500px; */
        padding: 60px 20px;
    }
    div[data-sectionItem="5"] .swiper-slide .left_box{
        width: 100%;
        padding-bottom: 18px;
    }
    
    div[data-sectionItem="5"] .subject{
        font-size: 24px;
        padding-bottom: 20px;
    }
    div[data-sectionItem="5"] .sub_title{
        padding-bottom: 0;
    }
    div[data-sectionItem="6"] .right_box{
        max-width: 360px;
    }
    div[data-sectionItem="6"] .right_box .message_box{
        padding-bottom: 20px;
    }
    div[data-sectionItem="6"] .right_box .message_box p{
        font-size: 16px;
        line-height: 30px;
        text-align: center;
        padding-bottom: 12px;
    }
    div[data-sectionItem="6"] .right_box a{
        padding: 12px 24px;
        font-size: 16px;
        line-height: 1.5;
    }

    div[data-sectionItem="7"] .swiper-button-prev, div[data-sectionItem="7"] .swiper-button-next{
        display: none;
    }

    div[data-sectionItem="7"]{
        padding: 50px 0 50px;
    }
    
    div[data-sectionItem="7"] h2{
        font-size: 26px;
    }
    
    div[data-sectionItem="7"] p{
        font-size: 14px;
        padding-bottom: 40px;
    }
    div[data-sectionItem="7"] p b{
        font-size: 18px;
    }
    
    div[data-sectionItem="7"] .kmong_text{
        font-size: 14px;
        padding-top: 20px;
    }
    div[data-sectionItem] h2:not(p){
        font-size: 22px;
        /* padding-bottom: 50px; */
    }
    div[data-sectionItem] h2 + p{
        font-size: 12px;
    }
    div[data-sectionItem="7"] .kmong_text .desc{
        font-size: 16px;
    }
    div[data-sectionItem="7"] .kmong_text .desc b{
        font-size: inherit;
    }
    div[data-sectionItem="7"] .kmong_info{
        gap:10px;
    }
    div[data-sectionItem="7"] .kmong_text .kmong_info .grade{
        width: 80px;
        padding: 7px 10px;
    }
    
    div[data-sectionItem="7"] .kmong_text .kmong_info span{
        font-size: 18px;
    }
    div[data-sectionItem="7"] .kmong_text .kmong_info .rating b{
        font-size: 22px;
        height: 26px;
    }
    div[data-sectionItem="7"] .kmong_info svg{
        width: 70px;
    }
    
    div[data-sectionItem="8"]{
        padding-top: 40px;
        padding-bottom: 70px;
    }
    div[data-sectionItem="8"] .contents{
        flex-direction: column;
        padding: 0;
        gap:10px;
    }
    
    div[data-sectionItem="8"] .left_pattern{
        display: none;
    }
    div[data-sectionItem="8"] .right_pattern{
        right: -0px;
    }
    
    div[data-sectionItem="8"] .left_box{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    
    div[data-sectionItem="8"] .left_box h2{
        color: #222;
        font-size: 26px;
        font-style: normal;
        font-weight: 700;
        line-height: 45px; /* 160.714% */
        padding-bottom: 5px;
    }
    div[data-sectionItem="8"] .left_box p{
        padding-bottom: 0;
        font-size: 14px;
    }
    
    div[data-sectionItem="8"] .left_box div{
        flex: 1;
    }
    div[data-sectionItem="8"] .left_box div.img_box{
        max-width: 140px;
    }
    
    div[data-sectionItem="8"] .right_box > div > div:first-child{
        font-size: 16px;
        
    }
    
    div[data-sectionItem="8"] .right_box > div{
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
    div[data-sectionItem="8"] .right_box > div > div.agree_cont{
        width: 100%;
    }
    div[data-sectionItem="8"] .right_box > div.button{
        align-items: center;
    }
    div[data-sectionItem="8"] .right_box > div > div.agree_cont .term .checkbox_ label{
        font-size: 14px;
    }
    div[data-sectionItem="8"] .drop_btn{
        font-size: 14px;
    }
    div[data-sectionItem="8"] .drop_wrap .text{
        font-size: 14px;
    }
    
    div[data-sectionItem="8"] .right_box > div > div.cs_req_btn{
        max-width: 150px;
        padding: 10px 20px;
        font-weight: 500;
    }
    
    div[data-sectionItem="9"]{
        padding: 70px 0;
    }
    
    div[data-sectionItem="9"] h2{
        font-size: 22px;
    }
    div[data-sectionItem="9"] h2 br{
/*        display: block;*/
    }
    
    div[data-sectionItem="9"] p{
        font-size: 12px;
    }
    div[data-sectionItem="9"] .img_box .swiper{
        padding-bottom: 20px;
    }
    
    div[data-sectionItem="10"]{
        padding: 70px 0 ;
    }
    div[data-sectionItem="10"] h4{
        font-size: 24px;
        line-height: 1.4;
    }
    div[data-sectionItem="10"] br{
        display: block;
    }
    div[data-sectionItem="10"] p{
        font-size: 12px;
    }
    
    div[data-sectionItem="10"] .contents > div{
        flex-direction: column;
    }
    
    div[data-sectionItem="10"] .contents > div .item{
        flex-direction: row;
        gap: 40px;
        padding-bottom: 40px;
    }
    div[data-sectionItem="10"] .contents > div .item:last-of-type{
        padding-bottom: 0;
    }
    
    div[data-sectionItem="10"] .contents > div .desc_cont{
        text-align: left;
    }
    
    div[data-sectionItem="10"] .contents > div .item .text-bold{
        padding: 0;
        font-size: 24px;
    }
    
    div[data-sectionItem="10"] .contents > div .item .desc p{
        font-size: 17px;
    }
    div[data-sectionItem="10"] .contents > div .item .desc p br{
        display: none;
    }
    
    div[data-sectionItem="10"] .contents > div .item img{
        max-width: 80px;
    }
    div[data-sectionItem="10"] .contents > div .item img.info2_pc{
/*        display: none;*/
        padding-bottom: 10px;
    }

    div[data-sectionItem="10"] .contents > div .item img.info2_mo{
        display: block;
    }
    
    div[data-sectionItem="10"] .contents > div .item .text-bold .small_text{
        font-size: 20px;
        font-weight: inherit;
    }
    
    div[data-sectionItem="11"]{
        padding: 70px 0 ;
    }
    
    div[data-sectionItem="11"] h1{
        font-size: 26px;
        padding: 20px 0;
    }
    div[data-sectionItem="11"] h1 br{
        display: block;
    }
    div[data-sectionItem="11"] .contents > p{
        font-size: 14px;
    }
    div[data-sectionItem="11"] .contents .label_cont p{
        padding: 7px 12px;
        font-size: 14px;
    }
    
    div[data-sectionItem="12"]{
        padding: 70px 0px;
    }
    div[data-sectionItem="12"] .contents{
        padding:0;
    }
    
    div[data-sectionItem="12"] .item_box{
        gap:0;
    }
    div[data-sectionItem="12"] .item_box .card{
        flex:none;
    }
    
    div[data-sectionItem="12"] .item_box .card h2{
        font-size: 20px;
        padding-bottom: 20px;
    }
    div[data-sectionItem="12"] .item_box .card .desc{
        padding-bottom: 20px;
    }
    
    
       div[data-sectionItem="20"] .containner .item {
      flex-shrink: 0;
      width: 100%;
  }


  div[data-sectionItem="20"] .itemBox {
    display: block;
  }
    
    div[data-sectionItem="20"] .containner{
        flex-direction: column;
        flex: 1;
    }
    
    div[data-sectionItem="20"] .startButton{
        max-width: calc(100% - 40px);
    }
    div[data-sectionItem="20"] .containner{
        padding: 0 20px;
    }
    
    div[data-sectionItem="20"] .containner .item[data-item='2']::before{
        width: 60px;
        height: 60px;
        font-size: 18px;
        right: 10px;
        top: 10px;
    }
    div[data-sectionItem="20"] .containner .item h1{
        font-size: 26px;
    }
    div[data-sectionItem="20"] .containner .item .info{
        min-height: 110px;
    }
    div[data-sectionItem="20"] .containner .item .info p span{
        font-size: 16px;
        line-height: 1.7;
    }
    div[data-sectionItem="20"] .containner .item > div{
        min-height: 60px;
    }
    div[data-sectionItem="20"] .startButton a:first-child{
        margin-right: 0;
    }
    
    div[data-sectionItem="20"] .startButton{
        display: flex;
        flex-direction: column;
        gap:20px;
    }
    div[data-sectionItem="20"] .startButton a{
        max-width: none;
        font-size: 16px;
        padding: 14px 20px;
    }
    
    div[data-sectionItem="20"] .containner .item div > p {
        font-size: 14px;
    }
    
    div[data-sectionItem="20"] .containner .item:last-child div > p{
        padding: 0 20px;
    }
    div[data-sectionItem="20"] .containner .item div > p small{
        font-size: 12px
    }
    div[data-sectionItem="20"] .containner .item:last-child div.price_info > p span{
        min-width: 100px;
        font-size: 14px;
    }
    
    div[data-sectionItem="99"]{
        padding: 70px 0;
    }
    div[data-sectionItem="99"] h1{
        font-size: 22px;
        padding-bottom: 30px;
    }
    

    
    
    footer{
        padding-top: 20px;
        padding-bottom: 115px;
        
    }
    footer > div{
        flex-direction: column;
        padding: 20px;
        gap:15px;
    }
    
    footer .corp_info span{
        font-size: 11px;
    }
    footer .corp_info div{
        margin-left: -10px;
    }
    footer .corp_info .copyright{
        font-size: 11px;
        margin-left: 0px;
    }
    
    img.pc{
        display: none;
    }   
    img.mo{
        display: inline-block;
    }   
    
    
    div[data-sectionItem="20"] .containner .item div.price_info{
        width: fit-content;
        margin: 0 auto;
    }
    div[data-sectionItem="20"] .containner .item div.price_cont > div{
        font-size: 13px;
    }
    
    div[data-sectionItem="20"] .containner .item div.price_cont > div .month{
        font-size: 15px;
    }
    div[data-sectionItem="20"] .containner .item div.price_cont > div .price{
        font-size: 17px;
    }
    
    div[data-sectionItem="20"] .containner .item div.price_cont .discount{
        font-size: 13px;
    }
    div[data-sectionItem="20"] .containner .item div.price_cont > span{
        min-width: 90px;
    }
    
    div[data-sectionItem="20"] .containner .item div.price_cont{
        flex-direction: column;
        gap:5px;
    }
    div[data-sectionItem="20"] .containner .item div.price_info{
        gap:10px;
    }
    .refund_policy{
        padding: 0 20px;
    }
    .refund_policy h3{
        font-size: 18px;
        padding-bottom: 0;
    }
    .refund_policy h3, .refund_policy span, .refund_policy div, .refund_policy p{
        font-size: 14px;
    }
    .refund_policy p.title{
        padding-top: 15px;
    }
    .refund_policy p:not(.title){
        align-items: flex-start;
    }
    .refund_policy p:not(.title) svg{
        width: 14px;
        margin-top: 7px;
    }
    .refund_policy p:not(.title) span{
        flex: 1;
    }

    div[data-sectionItem="13"]{
        padding: 60px 40px 120px;
    }
    div[data-sectionItem="13"] .contents.channel-intro{
        max-width: 944px;
    }
    div[data-sectionItem="13"] .channel-intro-head h2{
        font-size: 28px;
        line-height: 36px;
    }
    div[data-sectionItem="13"] .channel-intro-head p{
        font-size: 16px;
        line-height: 24px;
    }
    div[data-sectionItem="13"] .channel-tabs{
        margin-top: 24px;
        gap: 16px;
    }
    div[data-sectionItem="13"] .channel-tabs .item{
        min-width: 0;
        flex: 0 0 auto;
        max-width: none;
    }
    div[data-sectionItem="13"] .channel-tabs .item button{
        font-size: 18px;
        padding: 6px 16px;
        line-height: 2;
    }
    div[data-sectionItem="13"] .channel-panels{
        margin-top: 24px;
    }
    div[data-sectionItem="13"] .channel-media{
        width: 338px;
        min-height: 360px;
    }
    div[data-sectionItem="13"] .channel-body{
        min-height: 360px;
        padding: 24px;
    }
    div[data-sectionItem="13"] .channel-title p{
        font-size: 18px;
        line-height: 26px;
    }
    div[data-sectionItem="13"] .channel-title h3{
        font-size: 28px;
        margin-top: 4px;
        line-height: 40px;
    }
    div[data-sectionItem="13"] .why-label{
        height: 28px;
        font-size: 14px;
        padding: 0 8px;
    }
    div[data-sectionItem="13"] .channel-why p{
        font-size: 20px;
        line-height: 30px;
    }
    div[data-sectionItem="13"] .channel-points li{
        font-size: 16px;
        line-height: 32px;
    }
    div[data-sectionItem="13"] .channel-points li::before{
        margin-top: 3px;
    }
    div[data-sectionItem="13"] .channel-panel[data-panel="shopping"] .channel-title{max-width: 314px;}
    div[data-sectionItem="13"] .channel-panel[data-panel="blog"] .channel-title{max-width: 360px;}
    div[data-sectionItem="13"] .channel-panel[data-panel="insta"] .channel-title{max-width: 360px;}
    div[data-sectionItem="13"] .channel-panel[data-panel="clip"] .channel-title{max-width: 360px;}
    div[data-sectionItem="13"] .channel-panel[data-panel="threads"] .channel-title{max-width: 360px;}
    div[data-sectionItem="13"] .channel-panel[data-panel="shopping"] .channel-points{max-width: 420px;}
    div[data-sectionItem="13"] .channel-panel[data-panel="blog"] .channel-points{max-width: 420px;}
    div[data-sectionItem="13"] .channel-panel[data-panel="insta"] .channel-points{max-width: 360px;}
    div[data-sectionItem="13"] .channel-panel[data-panel="clip"] .channel-points{max-width: 434px;}
    div[data-sectionItem="13"] .channel-panel[data-panel="threads"] .channel-points{max-width: 320px;}
    

 
}

/* // 모바일 CSS */


@media (max-width: 768px) {
    div[data-sectionItem="13"]{
        padding: 60px 16px 120px;
    }
    div[data-sectionItem="13"] .channel-intro-head h2{
        font-size: 22px;
        line-height: 26px;
    }
    div[data-sectionItem="13"] .channel-intro-head p{
        margin-top: 4px;
        font-size: 14px;
        line-height: 22px;
    }
    div[data-sectionItem="13"] .channel-tabs{
        gap: 8px;
        margin-top: 24px;
    }
    div[data-sectionItem="13"] .channel-panels{
        margin-top: 16px;
    }
    div[data-sectionItem="13"] .channel-tabs .item button{
        font-size: 14px;
        line-height: 28px;
        padding: 4px 12px;
    }
    div[data-sectionItem="13"] .channel-panel.active{
        display: block;
    }
    div[data-sectionItem="13"] .channel-media{
        width: 100%;
        min-height: 0;
        border-radius: 16px 16px 0 0;
    }
    div[data-sectionItem="13"] .channel-body{
        border-left: 1px solid #DDEEFF;
        border-top: none;
        border-radius: 0 0 16px 16px;
        padding: 16px;
        min-height: 0;
        gap: 0;
    }
    div[data-sectionItem="13"] .channel-title p{
        font-size: 14px;
        line-height: 22px;
    }
    div[data-sectionItem="13"] .channel-title h3{
        margin-top: 4px;
        font-size: 20px;
        line-height: 30px;
    }
    div[data-sectionItem="13"] .why-label{
        height: 20px;
        font-size: 12px;
        padding: 0 4px;
    }
    div[data-sectionItem="13"] .channel-why p{
        font-size: 16px;
        line-height: 24px;
    }
    div[data-sectionItem="13"] .channel-points li{
        font-size: 14px;
        line-height: 22px;
        gap: 8px;
    }
    div[data-sectionItem="13"] .channel-points li::before{
        width: 16px;
        height: 16px;
        font-size: 10px;
        margin-top: 3px;
    }
    div[data-sectionItem="13"] .channel-why{
        margin-top: 16px;
    }
    div[data-sectionItem="13"] .channel-points{
        margin-top: 8px;
    }
    div[data-sectionItem="13"] .channel-panel .channel-title,
    div[data-sectionItem="13"] .channel-panel .channel-points{
        max-width: none;
    }
}