@font-face {
  font-family: "Pretendard";
  font-weight: 100;
  font-display: swap;
  src: url("../fonts/Pretendard-Thin.woff2") format("woff2"),
}
@font-face {
  font-family: "Pretendard";
  font-weight: 200;
  font-display: swap;
  src: url("../fonts/Pretendard-ExtraLight.woff2") format("woff2"),
}
@font-face {
  font-family: "Pretendard";
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/Pretendard-Light.woff2") format("woff2"),
}
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Pretendard-Regular.woff2") format("woff2"),
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Pretendard-Medium.woff2") format("woff2"),
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Pretendard-SemiBold.woff2") format("woff2"),
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Pretendard-Bold.woff2") format("woff2"),
}
@font-face {
  font-family: "Pretendard";
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/Pretendard-ExtraBold.woff2") format("woff2"),
}
@font-face {
  font-family: "Pretendard";
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/Pretendard-Black.woff2") format("woff2"),
}

@font-face {
  font-family: "One";
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/ONE Mobile OTF Light.otf") format("otf"),
}
@font-face {
  font-family: "One";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ONE Mobile OTF Regular.otf") format("otf"),
}
@font-face {
  font-family: "One";
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ONE Mobile OTF Bold.otf") format("otf"),
}

@font-face {
    font-family: 'ONE-Mobile-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SpoqaHanSansNeo';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');

* {box-sizing: border-box;}
html {font-size: 10px; scroll-behavior: smooth;}
body {font-family: "SpoqaHanSansNeo", sans-serif; scroll-behavior: smooth; color: #000}
body::-webkit-scrollbar {width: 8px;}
body::-webkit-scrollbar-thumb {background-color: #ccc; border-radius: 10px; background-clip: padding-box; border: 2px solid transparent;}
body::-webkit-scrollbar-track {background-color: #fff;}
.one {font-family: 'ONE-Mobile-Regular', sans-serif;}
.pr {font-family: "Pretendard", sans-serif;}

/* font size */
.fs11 {font-size: 1.1rem}
.fs12 {font-size: 1.2rem}
.fs13 {font-size: 1.3rem}
.fs14 {font-size: 1.4rem}
.fs15 {font-size: 1.5rem}
.fs16 {font-size: 1.6rem}
.fs17 {font-size: 1.7rem}
.fs18 {font-size: 1.8rem}
.fs19 {font-size: 1.9rem}
.fs20 {font-size: 2.0rem}
.fs21 {font-size: 2.1rem}
.fs22 {font-size: 2.2rem}
.fs23 {font-size: 2.3rem}
.fs24 {font-size: 2.4rem}
.fs25 {font-size: 2.5rem}
.fs26 {font-size: 2.6rem}
.fs27 {font-size: 2.7rem}
.fs28 {font-size: 2.8rem}
.fs29 {font-size: 2.9rem}
.fs30 {font-size: 3rem}
.fs31 {font-size: 3.1rem}
.fs32 {font-size: 3.2rem}
.fs33 {font-size: 3.3rem}
.fs34 {font-size: 3.4rem}
.fs35 {font-size: 3.5rem}
.fs36 {font-size: 3.6rem}
.fs37 {font-size: 3.7rem}
.fs38 {font-size: 3.8rem}
.fs39 {font-size: 3.9rem}
.fs40 {font-size: 4.0rem}
.fs45 {font-size: 4.5rem}
.fs47 {font-size: 4.7rem}
.fs48 {font-size: 4.8rem}
.fs50 {font-size: 5rem}
.fs54 {font-size: 5.4rem}
.fs55 {font-size: 5.5rem}
.fs56 {font-size: 5.6rem}
.fs60 {font-size: 6rem}
.fs64 {font-size: 6.4rem}
.fs65 {font-size: 6.5rem}
.fs68 {font-size: 6.8rem}
.fs69 {font-size: 6.9rem}
.fs70 {font-size: 7rem}
.fs80 {font-size: 8.0rem}
.fs88 {font-size: 8.8rem}
.fs96 {font-size: 9.6rem}
.fs109 {font-size: 10.9rem}
.fs120 {font-size: 12rem}
.fs140 {font-size: 14rem}

/* font color */
.fc0 {color: #fff}
.fc1 {color: #000}
.fc2 {color: #00B3CC}
.fc3 {color: #009FB5}
.fc4 {color: #002946}
.fc5 {color: #002946}
.fc6 {color: #A4AAB1}
.fc7 {color: #72787F}
.fc9 {color: #50F6B4}
.fc10 {color: #3BAC7F}

/* font weight */
.fwt100 {font-weight: 100;}
.fwt200 {font-weight: 200;}
.fwt300 {font-weight: 300;}
.fwt400 {font-weight: 400;}
.fwt500 {font-weight: 500;}
.fwt600 {font-weight: 600;}
.fwt700 {font-weight: 700;}
.fwt800 {font-weight: 800;}
.fwt900 {font-weight: 900;}
.fwtbold {font-weight: bold}

/* background color */
.bc0 {background-color: #fff}
.bc1 {background-color: #F5FAFA}
.bc2 {background-color: #FFFBF4}
.bc3 {background-color: #3BAC7F}
.bc4 {background-color: #222527}
.bc5 {background-color: #0D8484}
.bc6 {background-color: #D56A1C}
.bc7 {background-color: #F9AF2C}
.bc8 {background-color: #508E1E}
.bc9 {background-color: #1A6EB7}
.bc10 {background-color: #58218E}
.bc11 {background-color: #363636}
.bc12 {background-color: #3BAC7F}

.inner1364 {max-width: 136.4rem;}


/* border */
.bd1 {border: 1px solid #E3E5EB}
.bd2 {border: 1px solid #00A9A9}

/* border-radius */
.br10 {border-radius: 10px;}
.br15 {border-radius: 15px;}
.br20 {border-radius: 20px;}
.br28 {border-radius: 28px;}
.br33 {border-radius: 33px;}

/* box-shadow */
.boxsd1 {box-shadow: 5px 5px 20px rgba(0,0,0,0.13);}

/* css */
.block {display: block}
.inblock {display: inline-block;}

.flex {display: flex;}
.row {flex-direction: row}
.column {flex-direction: column;}
.justy_btw {justify-content: space-between;}
.justy_cnt {justify-content: center;}
.justy_ard {justify-content: space-around;;}
.alc {align-items: center;}
.alstart {align-items: flex-start;}
.alend {align-items: flex-end;}
.fxwrap {flex-wrap: wrap}

.abs {position: absolute;}
.fixed {position: fixed;}
.rel {position: relative;}
.x_center {left: 50%; transform: translateX(-50%);}
.y_center {top: 50%; transform: translateY(-50%);}
.w_center {left: 50%; top: 50%; transform: translate(-50%,-50%);}
.g_center {display: grid; place-items: center;}

.t_center {text-align: center}
.m_center {margin: 0 auto;}
.w100 {width: 100%;}
.h100 {height: 100%;}

.right0 {right: 0}
.left0 {left: 0}
.top0 {top: 0}
.bottom0 {bottom: 0}

.pointer {cursor: pointer;}

.img > img {width: 100%; display: block;}

.pc_view {display: block;}
.mo_view {display: none;}
.pc_view_flex {display: flex;}
.mo_view_flex {display: none;}


@media all and (max-width: 1780px){
    html {font-size: 9px}
}

@media all and (max-width: 1620px){
    html {font-size: 8px}
}

@media all and (max-width: 880px){
    .pc_view {display: none;}
    .mo_view {display: block;}
    .pc_view_flex {display: none;}
    .mo_view_flex {display: flex;}

    html {font-size: 2.4vw}
}

@media all and (max-width: 480px){

}



.trigger_top_off {bottom: -5rem; opacity: 0; transition: 1.4s}
.trigger_top_on {bottom: 0; opacity: 1; transition: 1.4s}

.trigger_left_off {right: -5rem; opacity: 0; transition: 1.4s;}
.trigger_left_on {right: 0; opacity: 1; transition: 1.4s;}

.trigger_right_off {left: -5rem; opacity: 0; transition: 1.4s;}
.trigger_right_on {left: 0; opacity: 1; transition: 1.4s;}

.trigger_bot_off {top: -5rem; opacity: 0; transition: 1.4s}
.trigger_bot_on {top: 0; opacity: 1; transition: 1.4s}

.trigger_opa_off {opacity: 0; transition: 1.4s}
.trigger_opa_on {opacity: 1; transition: 1.4s}

.trigger_fil_off {filter: blur(20px); opacity: 0; transition: 1.4s}
.trigger_fil_on {filter: blur(0); opacity: 1; transition: 1.4s}

.fillter_blur {filter: blur(20px); opacity: 0; transition: 1.4s}
.fillter_blur.fillter_off {filter: blur(0); opacity: 1; transition: 1.4s}

.fillter_left {right: -5rem; opacity: 0; transition: 1.4s;}
.fillter_left.fillter_off {right: 0; opacity: 1; transition: 1.4s;}

.fillter_top {bottom: -5rem; opacity: 0; transition: 1.4s;}
.fillter_top.fillter_off {bottom: 0; opacity: 1; transition: 1.4s;}