@charset "utf-8";

/* *******************************************************
 * filename : default.css
 * description : 기본 CSS
 * date : 2026-06
******************************************************** */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

@font-face {
    font-family: 'Gmarket';
    src: url('../fonts/GmarketSansTTFBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Gmarket';
    src: url('../fonts/GmarketSansTTFMedium.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Gmarket';
    src: url('../fonts/GmarketSansTTFLight.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'IBMPlexSans';
    src: url('../fonts/IBMPlexSans-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'IBMPlexSans';
    src: url('../fonts/IBMPlexSans-ExtraLight.woff') format('woff');
    font-weight:200;
    font-style: normal;
}
@font-face {
    font-family: 'IBMPlexSans';
    src: url('../fonts/IBMPlexSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'IBMPlexSans';
    src: url('../fonts/IBMPlexSans-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'IBMPlexSans';
    src: url('../fonts/IBMPlexSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'IBMPlexSans';
    src: url('../fonts/IBMPlexSans-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'IBMPlexSans';
    src: url('../fonts/IBMPlexSans-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Yeongwol';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2507-2@1.0/YeongwolTTF-Regular.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}



* {margin:0; padding:0; font-family:'Gmarket', 'Pretendard', "IBMPlexSans", "Noto Sans KR",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; box-sizing:border-box; line-height: 1.3;}
html,body{width:100%;height:100%;margin:0;padding:0;font-size:18px; color:#000;-webkit-text-size-adjust: 100% ; font-weight: 500; ;}
html,body,div,p,ul,li,ol,dl,dt,dd,input,textarea,select,p,hr,h1,h2,h3,h4,h5{margin:0;padding:0;letter-spacing: -0.02em;word-break: keep-all;}
ul,li,ol,dl,dd,dt{list-style:none;}
img,fieldset{border:0}
ul,ol{list-style:none}
em,address{font-style:normal}
a {text-decoration:none; color: #000;}
a, a::after, a::before {transition: all 0.2s; -webkit-transition: all 0.2s;}
legend, fieldset label {width:1px;height:1px;overflow:hidden;}
caption {
    position: absolute;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
table{margin:0px;border-collapse:collapse;-ms-word-break: keep-all;word-break: keep-all;}
/* td,th,p,span {letter-spacing: -0.05em;}-ms-word-break: keep-all;word-break: keep-all;*/
.hidden{position: absolute; left:-9999px;}
.overflow{overflow:hidden}
.blind{visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}
input, select, textarea {outline: none; font-size: 18px; font-family:'Gmarket', 'Pretendard', "IBMPlexSans", "Noto Sans KR",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;;}
input[type="text"], select, textarea, button { -webkit-appearance: none;}
select {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    transition: all 0.2s;
    background-image: url("../images/ico-arrow04.png");
    background-repeat: no-repeat;
    background-position:  right 12px center;
    }
select::-ms-expand { display:none;}
select:focus {border: 1px solid #222;}
.img-max {max-width: 100%;}
input[type="radio"],
input[type="radio"] + label {cursor: pointer;}
button {cursor: pointer;}

.go-container {position: fixed; top: -55px; left:0; right:0; z-index: 9999; text-align: center; padding: 15px 0; width: 100%; color:#000; background:#efefef; width:100%;}
.go-container:focus {top: 0; color:#000;}

.font-gmarket {font-family: 'Gmarket' !important;}
.font-pre {font-family: 'Pretendard' !important;}
.font-ibm {font-family: 'IBMPlexSans' !important;}
.font-yw {font-family: 'Yeongwol' !important;}
.font-14 {font-size: 14px;}
.font-16 {font-size: 16px;}

.underline {text-decoration: underline;}

.white {color: #fff;}
.gray {color: #8d8d8d;}
.red {color: #dd042b;}
.blue {color: #043edd;}
.orange {color: #dd6604;}

.wd-10 {width: 10%;}    .wd-15 {width: 15%;}
.wd-20 {width: 20%;}    .wd-25 {width: 25%;}
.wd-30 {width: 30%;}    .wd-35 {width: 35%;}
.wd-40 {width: 40%;}    .wd-45 {width: 45%;}
.wd-50 {width: 50%;}    .wd-55 {width: 55%;}
.wd-60 {width: 60%;}    .wd-65 {width: 65%;}
.wd-70 {width: 70%;}    .wd-75 {width: 75%;}
.wd-80 {width: 80%;}    .wd-85 {width: 85%;}
.wd-90 {width: 90%;}    .wd-95 {width: 95%;}
.wd-100 {width: 100%;}   

.mt-5 {margin-top: 5px;}    
.mt-10 {margin-top: 10px !important;}  .mt-15 {margin-top: 15px;}
.mt-20 {margin-top: 20px;}  .mt-25 {margin-top: 25px;}
.mt-30 {margin-top: 30px;}  .mt-35 {margin-top: 35px;}

.mb-5 {margin-bottom: 5px;}    
.mb-10 {margin-bottom: 10px;}  .mb-15 {margin-bottom: 15px;}
.mb-20 {margin-bottom: 20px;}  .mb-25 {margin-bottom: 25px;}
.mb-30 {margin-bottom: 30px;}  .mb-35 {margin-bottom: 35px;}

.align-l {text-align: left !important;}
.align-c {text-align: center;}
.align-r {text-align: right;}

.row {display: flex;}
.items-center {align-items: center;}
.items-end {align-items: flex-end;}
.justify-center {justify-content: center;}
.justify-between {justify-content: space-between;}

.gap-1 {gap: 1px;}
.gap-2 {gap: 2px;}
.gap-3 {gap: 3px;}
.gap-5 {gap: 5px;}
.gap-10 {gap: 10px;}
.gap-15 {gap: 15px;}
.gap-20 {gap: 20px;}
.gap-25 {gap: 25px;}
.gap-30 {gap: 30px;}
.gap-35 {gap: 35px;}
.gap-40 {gap: 40px;}
.gap-45 {gap: 45px;}
.gap-50 {gap: 50px;}

.bg-blue {background: #e7eefa;}



/* 애니메이션 */
@keyframes fadein {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes bgScale {
    0% {
        opacity: 0;
        transform: scale(1.2);
        transition-timing-function: ease;
    }
    100% {
        opacity: 1;
        transform: translateZ(0) scale(1);
    }
}

@keyframes proBar{
    0%{width:0;}
    100%{width:100%;}
}

@keyframes fadeUp {
    0%{
        opacity: 0;
        transform: translate3d(0,20px,0);
    }
    100% {
        opacity : 1;
        transform: translateZ(0);
    }
}

@keyframes fadeLeft {
    0%{
        opacity: 0;
        transform: translate3d(100px,0,0);
    }
    100% {
        opacity : 1;
        transform: translateZ(0)
    }
}
@keyframes fadeRight {
    0%{
        opacity: 0;
        transform: translate3d(-100px,0,0)
    }
    100% {
        opacity : 1;
        transform: translateZ(0)
    }
}
@keyframes zoomInOut {
    0% {
        background-size: 120% 120%; /* 시작 시 확대된 상태 */
    }
    100% {
        background-size: 100% 100%; /* 종료 시 원래 크기 */
    }
}

@keyframes zoomBackground {
    0% {
        background-size: calc(var(--zoom-level) * cover); 
    }
    100% {
        background-size: cover;
    }
}

@keyframes headerFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes headerItemFade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes timelineUp {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-50%);
    }
}
@keyframes timelineDown {
    from {
        transform: translateY(-50%);
    }

    to {
        transform: translateY(0);
    }
}
/* @keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
} */
.split-title {
    display: flex;
    justify-content: center;
}

.split-title .char-wrap {
    overflow: hidden;
    display: inline-block;
}

.split-title .char {
    display: block;
}
.fade-up,
.video-motion {
    opacity: 0;
}


/* @media(max-width: 1200px) {
    html,body{font-size: 2.5vw;}
} */