@charset "UTF-8"; 

:root {
    /* color */
    --primary: #202020; 
    --darkgray: #333333; 
    --dark: #222222; 
    --highlight: #2F83F7; 
    --border: #E0E0E0; 
    --placeholder: #AAAAAA; 
    --hover: #707070;
    --gray: #999999; 
    --dim: rgba(0, 0, 0, .77); 

    --gray50: #FAFAFA; 
    --gray100: #F5F5F5; 
    --gray200: #EEEEEE; 
    --gray300: #E0E0E0; 
    --gray400: #CCCCCC; 
    --gray500: #AAAAAA; 
    --gray600: #616161; 
    --gray700: #424242; 
    --gray800: #222222; 
    --gray900: #111111; 

    --orange50: #FFF4E9; 
    --orange100: #FFDFC0; 
    --orange200: #FFCD9D; 
    --orange300: #FFB46D; 
    --orange400: #FF9C3E; 
    --orange500: #FA8316; 
    --orange600: #FE6B00; 
    --orange700: #E85300; 
    --orange800: #BD4502; 
    --orange900: #9F3B03; 

    --green50: #F8FFF2; 
    --green100: #F0FEE5; 
    --green200: #D5F7BB; 
    --green300: #B7F486; 
    --green400: #99EF56; 
    --green500: #5ED700; 
    --green600: #4EB101; 
    --green700: #449602; 
    --green800: #387C01; 
    --green900: #2A5C02; 

    --yellow400: #FFE24D; 
    --yellow-orange: #FFB200;
    --red400: #FF5555; 
    --blue400: #557AFF; 
    --aqua600: #04B0B1; 
    --white: #FFFFFF; 
    --shadow-a10: rgba(0, 0, 0, 0.1); 
    --shadow-a12: rgba(0, 0, 0, 0.12); 

    --gradient-graphGray: "linear-gradient(180deg, #F2F2F2 0%, #D2D2D2 100%)",
    --gradient-linear: "linear-gradient(291.54deg, #B7F486 10.46%, #10BEBF 87.57%)",

    /* viewport */
    --header-height: 80px; 
    --header-height-minus: -80px; 
    --viewport-height: var(--vh, 100vh); 

    /* border */
    --border-solid: 1px solid var(--border); 
    --border-radius: 10px; 

    /* box-shadow */
    --box-shadow: 0px 4px 20px var(--shadow-a12); 

    /* placeholder*/
    --placeholder-color: #707070; 
    --placeholder-background: #fff; 

    /* inner */
    --inner-width: 1440px; 
    --inner-padding: 0px 15px; 
    --inner-padding-l: 15px; 
    --inner-padding-r: 15px; 

    /* score */
    --excellent: #5ED700;
    --good: #FFC700;
    --nice-try: #FF9C3E;
    --try-again: #FF5555;
}

html {scroll-behavior: smooth;}

body {width: 100%; overflow: hidden auto; font-family: Pretendard Variable;}

.no-drag{-ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select:none;}

.fw-t {font-weight: 100;}
.fw-el {font-weight: 200;}
.fw-l {font-weight: 300;}
.fw-r {font-weight: 400;}
.fw-m {font-weight: 500;}
.fw-sb {font-weight: 600;}
.fw-b {font-weight: 700;}
.fw-eb {font-weight: 800;}
.fw-bl {font-weight: 900;}

.sound_only {display: inline-block !important; position: absolute; top: 0; left: 0; margin: 0 !important; padding: 0 !important; font-size: 0; line-height: 0; border: 0 !important; overflow: hidden !important}

.wrap {position: relative; width: 100%; min-height: var(--vh); display:-webkit-flex; display: flex; flex-direction: column;}
.wrap::after {content: ''; display: block; clear: both;}

.inner {width: 100%; max-width: var(--inner-width); padding: var(--inner-padding); margin: 0 auto;}

.required {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5.414' height='5.564' viewBox='0 0 5.414 5.564'%3E%3Cpath d='M3.021-4.334H4.2L4.088-6.289l1.654,1.08.574-1.025-1.75-.875L6.316-8,5.742-9.023,4.088-7.943,4.2-9.9H3.021l.109,1.955L1.49-9.023.9-8l1.764.889L.9-6.234,1.49-5.209l1.641-1.08Z' transform='translate(-0.902 9.898)' fill='%23eb2c57'/%3E%3C/svg%3E"), linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)) !important; 
background-repeat: no-repeat !important; 
background-position: calc(100% - 20px) center, center !important; 
}

:target {scroll-margin: var(--header-height);}
:target::before {content: ''; display: block; height: var(--header-height); margin-top: var(--header-height-minus); visibility: hidden;}

::placeholder {font-size: 0.875rem; color: var(--placeholder);}

input, select {width: 100%; height: 40px; line-height: 40px;}
input:disabled {background: #f5f5f5; font-weight: 400; font-size: 0.875rem; color: var(--placeholder);}
input[type='text'],input[type='password'],input[type='search'],input[type='date'],input[type='email'],input[type='tel'], select {padding: 0 20px; border: var(--border-solid); border-radius: 6px; font-size: 1.125rem;}
textarea {padding: 30px 20px; border: var(--border-solid); border-radius: 6px; font-size: 1.125rem;}
button,input[type='button'],input[type='submit'],input[type='reset'],input[type='file'] {border-radius: 6px;}

select {
-moz-appearance: none; -webkit-appearance: none; appearance: none; 
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17.144' height='10' viewBox='0 0 17.144 10'%3E%3Cpath d='M8.576,170a1.423,1.423,0,0,1-1.01-.419L.424,162.439a1.428,1.428,0,1,1,2.02-2.02l6.133,6.135,6.134-6.134a1.428,1.428,0,1,1,2.02,2.02l-7.143,7.143A1.424,1.424,0,0,1,8.576,170Z' transform='translate(-0.005 -160)' fill='%23222'/%3E%3C/svg%3E"), linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)); 
background-repeat: no-repeat; 
background-position: calc(100% - 20px) center, center; 
background-size: auto; 
padding-right: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
}
select::-ms-expand {display: none;}/* for IE10, 11 */
select.empty, select:disabled {font-size: 0.875rem; color: var(--placeholder); opacity: 1;}
select option {font-size: 1.125rem; color: var(--primary);}
select option:disabled {font-size: 0.875rem; color: var(--placeholder);}
select option:hover, select option:focus, select option:active, select option:checked {
background: linear-gradient(#f0ffec, #f0ffec); 
background-color: #f0ffec; /* IE */
color: var(--highlight); 
}

input[type=checkbox] {display: none;}
input[type=checkbox] + label {cursor: pointer; font-size: 1rem; font-weight: 400; color: var(--primary); display: -webkit-flex; display: flex; justify-content: start; align-items: center; gap: 10px; line-height: 1;}
input[type=checkbox] + label::before {display: inline-block; content: '\f14a'; font-weight: 900; font-family: "Font Awesome 6 Free"; color: #BBBBBB; font-size: 1.25rem;}
input[type=checkbox]:checked + label::before {display: inline-block; content: '\f14a'; font-weight: 900; font-family: "Font Awesome 6 Free"; color: var(--highlight);}

.radio-area {position: relative; display: -webkit-flex; display: flex; justify-content: start; align-items: center;}
input[type=radio] {display: none;}
input[type=radio] + label {cursor: pointer; margin-left: 22px;}
input[type=radio] + label::before {position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: inline-block; content: ''; width: 12px; height: 12px; border: 1px solid var(--highlight); border-radius: 50%; text-align: center;}
input[type=radio] + label::after {position: absolute; top: 50%; left: 3px; transform: translateY(-50%) scale(0); display: inline-block; content: ''; width: 6px; height: 6px; border: 1px solid var(--highlight); border-radius: 50%; background: var(--highlight); transition: transform 0.3s ease;}
input[type=radio]:checked + label::after {transform: translateY(-50%) scale(1);}

.search-box {position: relative;}
#sfl {width: 150px;}
.search-bar {position: relative;}
.search-box1 input[type='search'].input-search {border-radius: 999px; padding-right: 40px;}
.btn-search {position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 40px; height: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19.998' height='20' viewBox='0 0 19.998 20'%3E%3Cpath id='search' d='M27.044,18.08a7.986,7.986,0,1,0,3.4,14.542l.517-.348,5.47,5.47a.925.925,0,0,0,1.308-1.31h0l-5.47-5.47.348-.517A7.98,7.98,0,0,0,27.044,18.08ZM25.958,32.13A6.134,6.134,0,1,1,32.092,26,6.141,6.141,0,0,1,25.958,32.13Z' transform='translate(-18.014 -18.014)' fill='%23222'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: left center; background-size: 50%;}

.input-label {display: inline-block; width: 110px; font-size: 0.938rem; flex-shrink: 0;}

progress[value] {display: block; width: 100%; height: 6px;}
progress[value]::-webkit-progress-bar {background-color: #A8A8A8; border-radius: 0;}
progress[value]::-webkit-progress-value {background-color: #EB2C57; border-radius: 0;}
progress + label {width: 100%; padding: 0 6px; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center;}

.close {position: absolute; top: 12px; right: 30px; width: 40px; height: 40px; font-size: 0;}
.close::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 1px; height: 30px; background: var(--highlight);}
.close::after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); width: 1px; height: 30px; background: var(--highlight);}

.popup {display: none; opacity: 0; width: auto; min-height: 800px; height: auto;}

.flex-item {-webkit-flex-shrink: 0; flex-shrink: 0;}

.scroll::-webkit-scrollbar {width: 19px; /* 세로 스크롤바 너비 */ height: 19px; /* 가로 스크롤바 높이 */ background-color: transparent;}
.scroll::-webkit-scrollbar-thumb {width: 19px; background-color: #CCCCCC; border-radius: 999px; background-clip: padding-box; border: 6px solid transparent;}/* 실제 스크롤바 막대 */
.scroll::-webkit-scrollbar-track {width: 19px; border-radius: 999px; background-color: transparent;}

.date {font-weight: 300; font-size: 1rem; color: var(--gray); text-align: right; white-space: pre-wrap;}

.ellipsis {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}


.ganpan-h1 {font-family: "Ganpan"; font-size: 36px; font-weight: 400; line-height: 1.4;}
.ganpan-subtitle1 {font-family: "Ganpan"; font-size: 32px; font-weight: 400; line-height: 1.4;}
.ganpan-subtitle2 {font-family: "Ganpan"; font-size: 30px; font-weight: 400; line-height: 1.4;}
.ganpan-subtitle3 {font-family: "Ganpan"; font-size: 18px; font-weight: 400; line-height: 1.4;}
.ganpan-body1 {font-family: "Ganpan"; font-size: 24px; font-weight: 400; line-height: 1.4;}
.ganpan-body2 {font-family: "Ganpan"; font-size: 18px; font-weight: 400; line-height: 1.4;}
.ganpan-body3 {font-family: "Ganpan"; font-size: 16px; font-weight: 400; line-height: 1.4;}
.ganpan-body4 {font-family: "Ganpan"; font-size: 14px; font-weight: 400; line-height: 1.4;}
.ganpan-button1 {font-family: "Ganpan"; font-size: 21px; font-weight: 400; line-height: 1.4;}

.pretendard-body1 {font-family: "Pretendard Variable"; font-size: 21px; font-weight: 500; line-height: 1.4;}
.pretendard-body2 {font-family: "Pretendard Variable"; font-size: 18px; font-weight: 400; line-height: 1.4;}
.pretendard-body3 {font-family: "Pretendard Variable"; font-size: 16px; font-weight: 500; line-height: 1.4;}
.pretendard-body4 {font-family: "Pretendard Variable"; font-size: 14px; font-weight: 600; line-height: 1.4;}
.pretendard-body5 {font-family: "Pretendard Variable"; font-size: 14px; font-weight: 400; line-height: 1.4;}
.pretendard-caption1 {font-family: "Pretendard Variable"; font-size: 10px; font-weight: 400; line-height: 1.4;}
.pretendard-button1 {font-family: "Pretendard Variable"; font-size: 21px; font-weight: 600; line-height: 1.4;}
.pretendard-button2 {font-family: "Pretendard Variable"; font-size: 18px; font-weight: 600; line-height: 1.4;}
.pretendard-button3 {font-family: "Pretendard Variable"; font-size: 16px; font-weight: 700; line-height: 1.4;} 
.pretendard-button4 {font-family: "Pretendard Variable"; font-size: 16px; font-weight: 500; line-height: 1.4;}
.pretendard-button5 {font-family: "Pretendard Variable"; font-size: 10px; font-weight: 500; line-height: 1.4;}
.pretendard-badge1 {font-family: "Pretendard Variable"; font-size: 18px; font-weight: 600; line-height: 1.4;}
.pretendard-badge2 {font-family: "Pretendard Variable"; font-size: 12px; font-weight: 600; line-height: 1.4;}


/* .title01, .title02, .title02-w, .title03, .title04, .text01, .text01-500, .text01-w-500, .text01-w{max-width: 100%; padding: 10px;}
.title01{font-size: 50px; font-weight: 700; line-height: 74px; display: flex; flex-direction: column;}
.title02{font-size: 42px; font-weight: 700; line-height: 57px; display: flex; flex-direction: column;}
.title02-w{font-size: 42px; font-weight: 700; line-height: 57px; display: flex; flex-direction: column; color: #fff;}
.title03{font-size: 28px; font-weight: 700; line-height: normal;}
.title04{font-size: 20px; font-weight: 600; line-height: normal; color: var(--highlight, #2F83F7);}
.text01{font-size: 20px; line-height: 30px; font-weight: 400; display: flex; flex-direction: column;}
.text01-500{font-size: 20px; line-height: 30px; font-weight: 500;}
.text01-w{font-size: 20px; line-height: normal; font-weight: 400; color: #fff;} */
.text01-w-500{font-size: 1.3rem; line-height: 30px; font-weight: 500; display: flex; flex-direction: column; color: #fff;}

.title01, .title02, .title02-w, .title03, .title04, .text01, .text01-500, .text01-w, .text01-w-500, .text {
    max-width: 100%;
    padding: 0.625rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* 다국어 지원을 위한 속성 추가 */
    word-break: break-all; /* 한중일 글자 단위 줄바꿈 */
    overflow-wrap: break-word; /* 장문의 영단어 줄바꿈 */
}

.title01 {
    font-size: 3.125rem; /* 50px -> 3.125rem */
    font-weight: 700;
    line-height: 1.48;
    display: flex;
    flex-direction: column;
}

.title02, .title02-w {
    font-size: 2.625rem; /* 42px -> 2.625rem */
    font-weight: 700;
    line-height: 1.36;
    display: flex;
    flex-direction: column;
}

.title02-w {
    color: #fff;
}

.title03 {
    font-size: 1.75rem; /* 28px -> 1.75rem */
    font-weight: 700;
    line-height: normal;
}

.title04 {
    font-size: 1.2rem; /* 20px -> 1.25rem */
    font-weight: 500;
    line-height: normal;
    color: var(--highlight, #2F83F7);
}

.text01, .text01-500 {
    font-size: 1.25rem; /* 20px -> 1.25rem */
    line-height: 1.5;
}

.text01 {
    font-weight: 400;
    display: flex;
    flex-direction: column;
}

.text01-500 {
    font-weight: 500;
}

.text01-w {
    font-size: 1.25rem; /* 20px -> 1.25rem */
    line-height: normal;
    font-weight: 400;
    color: #fff;
}

/* span, div 태그 내부 텍스트 오버플로우 방지 */
.title01 span, .title01 div,
.title02 span, .title02 div,
.title02-w span, .title02-w div,
.title03 span, .title03 div,
.title04 span, .title04 div,
.text01 span, .text01 div,
.text01-500 span, .text01-500 div,
.text01-w span, .text01-w div,
.text01-w-500 span, .text01-w-500 div,
.text span, .text div {
    max-width: 100%;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* 다국어 지원을 위한 속성 추가 */
    word-break: break-all; /* 한중일 글자 단위 줄바꿈 */
    overflow-wrap: break-word;
}

@media screen and (max-width: 1024px) {
    .title01 {
        font-size: 2.625rem; /* 42px -> 2.625rem */
        line-height: 1.33;
        align-items: center;
    }
    
    .title02 {
        font-size: 2rem; /* 32px -> 2rem */
        line-height: 1.31;
        align-items: center;
    }
    
    .title02-w {
        font-size: 2.125rem; /* 34px -> 2.125rem */
        line-height: 1.35;
        align-items: center;
    }
    
    .title03 {
        font-size: 1.5rem; /* 24px -> 1.5rem */
    }
    
    .text01, .text01-500 {
        font-size: 1.25rem;
        text-align: center;
    }
}

@media screen and (max-width: 480px) {
    .title01 {
        font-size: 2.125rem; /* 34px -> 2.125rem */
        line-height: 1.35;
    }
    
    .title02 {
        font-size: 1.625rem; /* 26px -> 1.625rem */
        line-height: 1.31;
    }
    
    .title03 {
        font-size: 1.125rem; /* 18px -> 1.125rem */
    }
    
    .text01 {
        font-size: 1rem; /* 16px -> 1rem */
        line-height: 1.5;
    }
    
    .text01-500 {
        font-size: 1.125rem; /* 18px -> 1.125rem */
        line-height: 1.44;
    }
    .text01-w-500{font-size: 1rem; line-height: 25px; font-weight: 500; display: flex; flex-direction: column; color: #fff;}
}

.rtl{direction: rtl;}
.ltr{direction: ltr;}
.flex-container{width: 100%; height: 100%; display: flex; align-items: center;}

/* ani */
/*  animation: 0.5s ease-in-out 0s 1 normal forwards running upper_transform; */
.ani-upper{opacity: 0; transform: translate3d(0px, 20%, 0px);}
.ani-right{opacity: 0; transform: translate3d(10px, 0px, 0px);}
.ani-left{opacity: 0; transform: translate3d(-10px, 0px, 0px);}
@keyframes upper_transform {
    0% {
        opacity: 0;
        transform: translate3d(0px, 50px, 0px);
    }
    100% {
        opacity: 1;
        transform: translate3d(0px, 0px, 0px);
    }
}
@keyframes right_transform {
    0% {
        opacity: 0;
        transform: translate3d(10px, 0px, 0px);
    }
    100% {
        opacity: 1;
        transform: translate3d(0px, 0px, 0px);
    }
}
@keyframes left_transform {
    0% {
        opacity: 0;
        transform: translate3d(-10px, 0px, 0px);
    }
    100% {
        opacity: 1;
        transform: translate3d(0px, 0px, 0px);
    }
}
/* ani */







/* Safari 14.1 이전 버전 */
@supports not (inset: 0) {
    input[type=checkbox] + label::before {margin-right: 10px;}
}



@media screen and (max-width:1200px) {
    :root {
        /* inner */
        --inner-padding: 0px 36px; 
        --inner-padding-l: 36px; 
        --inner-padding-r: 36px; 
    }
}

@media screen and (min-width:993px) {
    .popup {min-width: 600px;}


}

@media screen and (max-width:992px) {
    input, select {height: 35px; line-height: 35px;}

    .btn-search {width: 35px; height: 35px;}

    .popup {min-width: 500px;}





    /* Safari 14.1 이전 버전 */
    @supports not (inset: 0) {
    }
}

@media screen and (max-width:768px) {
    :root {
        /* inner */
        --inner-padding: 0px 32px; 
        --inner-padding-l: 32px; 
        --inner-padding-r: 32px; 
    }
}

@media screen and (max-width:480px) {
    :root {
        /* inner */
        --inner-padding: 0px 16px; 
        --inner-padding-l: 16px; 
        --inner-padding-r: 16px; 
    }

    input, select {height: 30px; line-height: 30px;}
    input[type='text'],input[type='password'],input[type='search'],input[type='date'],input[type='email'],input[type='tel'], select {padding: 0 10px;}
    textarea {padding: 20px 10px;}
    select {background-position: calc(100% - 10px) center, center; padding-right: 34px;}

    .btn-search {width: 30px; height: 30px;}

    .popup {min-width: calc(100% - 32px);}





    /* Safari 14.1 이전 버전 */
    @supports not (inset: 0) {
    }
}
/* @media screen and (orientation: landscape) {
    body {
      transform: rotate(90deg);
      transform-origin: left top;
      width: 100vh;
      height: 100vw;
      overflow-y: hidden;
      position: absolute;
      top: 100%;
      left: 0;
    }
} */
@media screen and (max-width : 1024px) {
    .title01{font-size: 42px; line-height: 56px; align-items: center;}
    .title02{font-size: 32px; line-height: 42px; align-items: center;}
    .title02-w{font-size: 34px; line-height: 46px; align-items: center;}
    .title03{font-size: 24px;}
    .title04{font-size: 20px; line-height: normal;}
    .text01{font-size: 20px; line-height: 24px; align-items: center; text-align: center;}
    .text01-500{font-size: 20px; line-height: 26px; font-weight: 500;  display: flex; flex-direction: column; align-items: center;}
    .text01-w-500{font-size: 20px; line-height: 26px; font-weight: 500; display: flex; flex-direction: column; color: #fff; text-align: center;}
    .text01-w{font-size: 14px;}
}
@media screen and (max-width:480px) {
    .title01{font-size: 34px; line-height: 46px; align-items: center;}
    .title02{font-size: 26px; line-height: 34px; align-items: center;}
    .title02-w{font-size: 34px; line-height: 46px; align-items: center;}
    .title03{font-size: 18px;}
    .title04{font-size: 24px; font-weight: 600; line-height: normal; color: var(--highlight, #2F83F7);}
    .text01{font-size: 16px; line-height: 24px; align-items: center; text-align: center;}
    .text01-500{font-size: 18px; line-height: 26px; font-weight: 500;  display: flex; flex-direction: column; align-items: center;}
    .text01-w-500{font-size: 20px; line-height: 30px; font-weight: 500; display: flex; flex-direction: column; color: #fff;}
    .text01-w{font-size: 14px;}
}