:root {
    --blue-400: #12217c;
    --blue-300: #0b5bff;
    --blue-200: #0096ff;
    --blue-100: #47f0ff;
    --yellow-200: #ffc000;
    --yellow-100: #ffe400;
    --text-4xl: 7.2rem;
    --text-3xl: 5.2rem;
    --text-2xl: 4.1rem;
    --text-xl: 3rem;
    --text-lg: 2.2rem;
    --text-md: 1.8rem;
    --text-base: 1.6rem;
    --text-sm: 1.4rem;
    --font-basic: 'SUIT', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    --font-point: 'KblJump', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    --font-point-wide: 'KblJumpExtended', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    --font-point-narrow: 'KblJumpCondensed', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

html {
    font-size: 10px;
    min-width: 1280px;
}

body {
    min-width: 280px;
    margin: 0 auto;
    font-family: var(--font-basic);
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: normal;
    line-height: 1.2;
    word-break: keep-all;
}

/* ( 크롬, 사파리, 오페라, 엣지 ) 동작 */
.scroll::-webkit-scrollbar {
  display: none;
}

.scroll {
  -ms-overflow-style: none; /* 인터넷 익스플로러 */
  scrollbar-width: none; /* 파이어폭스 */
}

.wrap {
    overflow: hidden;
}

.col-main {
    color: var(--main-cr);
}


.img_wrap img{
display: inline-block;
border: 0;
}

.speech-bubble {
    display: inline-block; 
    min-width: 200px;       
    padding: 15px 40px 15px 27px; 
    background-image: 
        url('../images/bubble_left.png'),
        url('../images/bubble_right.png'),
        url('../images/bubble_middle.png');         
    background-repeat: 
        no-repeat, 
        no-repeat, 
        no-repeat;          
    background-position: 
        left center,  
        right center, 
        24px center;  
    background-size: 
        auto 100%,  
        auto 100%,  
        calc(100% - 56px) 100%;
    font-size: 24px;
    font-weight: 700;
    color: var(--blue-400);
    white-space: nowrap;
}

.speech-bubble-reverse {
    display: inline-block; 
    min-width: 200px;       
    padding: 15px 27px 15px 40px; 
    background-image: 
        url('../images/bubble_left_reverse.png'),
        url('../images/bubble_right_reverse.png'),
        url('../images/bubble_middle.png');         
    background-repeat: 
        no-repeat, 
        no-repeat, 
        no-repeat;          
    background-position: 
        left center,  
        right center, 
        32px center;  
    background-size: 
        auto 100%,  
        auto 100%,  
        calc(100% - 54px) 100%;
    font-size: 24px;
    font-weight: 700;
    color: var(--blue-400);
    white-space: nowrap;
}
.speech-bubble span,
.speech-bubble-reverse span{
    color: var(--blue-300);
} 

.dp_pc {}
.dp_mob { display:none !important; }
.dp_mob_flex { display:none !important;}
.pos_ab {position: absolute; top: 0; left: 0;}
.img90 { width:90%; }
.img95 { width:95%; }
.img100 { width:100%; }
.w1200 { width: 100%; max-width: 1200px; margin: auto;}
.w1600 { width: 100%; max-width: 1600px; margin: auto;}
.w1920 { width: 100%; max-width: 1920px; margin: auto;}

em {font-weight: 700;}

@media screen and (max-width: 800px) {
    :root {
        --text-4xl: 8.4vw;
        --text-3xl: 7.2vw;
        --text-2xl: 5.8vw;
        --text-xl: 4.6vw;
        --text-lg: 3.4vw;
        --text-md: 2.8vw;
        --text-base: 2.4vw;
        --text-sm: 2vw;
    }
    
    html {
      min-width: initial;
    }    

    .speech-bubble {
        min-width: 25vw;       
        padding: 1.25vw 3.75vw 1.25vw 2.5vw;  
        background-position: 
            left center,  
            right center, 
            2.5vw center;  
        background-size: 
            auto 100%,  
            auto 100%,  
            calc(100% - 5.8vw) 100%;
        font-size: 3vw;
    }
    
    .speech-bubble-reverse {
        min-width: 25vw;       
        padding: 1.25vw 2.5vw 1.25vw 3.75vw;            
        background-position: 
            left center,  
            right center, 
            3vw center;  
        background-size: 
            auto 100%,  
            auto 100%,  
            calc(100% - 5.2vw) 100%;
        font-size: 3vw;
    }
}

@media screen and (max-width: 800px) {
    .dp_pc {
        display: none !important;
    }

    .dp_mob {
        display: block !important;
    }

    .dp_pc_flex {
        display: none !important;
    }

    .dp_mob_flex {
        display: flex !important;
    }
}


/* modal */
/* modal 공통 */

.modal_wrap {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: transparent;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    top: 0px;
}

.modal_black {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
    top: 0px;
}

.modal_box {
    position: relative;
    width: fit-content;
    height: auto;
    z-index: 1000;
    background: #fff;
    max-width: 1200px;
    border-radius: 30px;
    text-align: center;
}

.modal_cont {
    display: none;
    overflow-y: auto;
    box-sizing: border-box;
}

.modal_close {
    cursor: pointer;
    position: absolute;
    top: 28px;
    right: 28px;
    cursor: pointer;
    z-index: 100;
}

.modal_close img {
        width: 24px;
        height: 28px;
    }

.event_notice_container {
    position: absolute;
    bottom: 0;
}

@media screen and (max-width: 800px) {
    .modal_box {
        width: 90% !important;
        border-radius: 4.5vw;
    }

    .modal_close {
        top: 3.75vw;
        right: 3.75vw;

    }

    .modal_close img {
        width: 3.25vw;
        height: 3.65vw;
    }
}