@charset "utf-8";

/* *******************************************************
 * filename : default.css
 * description : 기본 CSS
 * date : 2022-05
******************************************************** */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
@import url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700&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: 'NOROOFrontierSerif';
    src: url('../fonts/NOROOFrontierSerif-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}



* {margin:0; padding:0; font-family:'Pretendard', 'NanumSquare', 'IBM Plex Sans KR', "Noto Sans KR",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; box-sizing:border-box; line-height: 1.5em;}
html,body{width:100%;height:100%;margin:0;padding:0;font-size:18px; color:#000;-webkit-text-size-adjust: 100% ; font-weight: 400; ;}
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,a:hover,a:active,a:focus {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: 'Pretendard', 'NanumSquare', 'IBM Plex Sans KR', "Noto Sans KR",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;}
input[type="text"], select, textarea, button {
   -webkit-appearance: none;
   -webkit-border-radius: 0;
}
select {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    transition: all 0.2s;
    }
select::-ms-expand { display:none;}
select:focus {border: 1px solid #222;}
.img-max {max-width: 100%;}
select option {color:#222;}

.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-noloo {font-family: 'NOROOFrontierSerif';}


/* 애니메이션 */
@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,100px,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 fadeUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

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