@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/variable/pretendardvariable.css");
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');

* {box-sizing: border-box;}
html {font-size: 10px; letter-spacing: -0.02em; scroll-behavior: smooth;}
body {font-family: "Pretendard Variable", 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; scroll-behavior: smooth; color: #212121}
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;}

.ft-pp {font-family: 'Poppins', sans-serif;}
.ft-nn {font-family: 'NanumSquare', sans-serif;}

.ft-size-14 {font-size: 1.4rem}
.ft-size-16 {font-size: 1.6rem}
.ft-size-18 {font-size: 1.8rem}
.ft-size-20 {font-size: 2rem}
.ft-size-22 {font-size: 2.2rem}
.ft-size-23 {font-size: 2.3rem}
.ft-size-24 {font-size: 2.4rem}
.ft-size-25 {font-size: 2.5rem}
.ft-size-26 {font-size: 2.6rem}
.ft-size-28 {font-size: 2.8rem}
.ft-size-30 {font-size: 3rem}
.ft-size-34 {font-size: 3.4rem}
.ft-size-35 {font-size: 3.5rem}
.ft-size-36 {font-size: 3.6rem}
.ft-size-40 {font-size: 4rem}
.ft-size-42 {font-size: 4.2rem}
.ft-size-45 {font-size: 4.5rem}
.ft-size-48 {font-size: 4.8rem}
.ft-size-56 {font-size: 5.6rem}
.ft-size-60 {font-size: 6rem}
.ft-size-70 {font-size: 7rem}
.ft-size-80 {font-size: 8rem}


.ft-clr-1 {color: #fff}
.ft-clr-2 {color: #000}
.ft-clr-3 {color: #212121}
.ft-clr-4 {color: #545454}
.ft-clr-5 {color: #BBBBBB}
.ft-clr-6 {color: #005DA9}
.ft-clr-7 {color: #666666}
.ft-clr-8 {color: #aaaaaa}
.ft-clr-9 {color: #C8D1D9}
.ft-clr-10 {color: #888888}
.ft-clr-11 {color: #003560}
.ft-clr-12 {color: #363636}


.ft-wt-100 {font-weight: 100;}
.ft-wt-200 {font-weight: 200;}
.ft-wt-300 {font-weight: 300;}
.ft-wt-400 {font-weight: 400;}
.ft-wt-500 {font-weight: 500;}
.ft-wt-600 {font-weight: 600;}
.ft-wt-700 {font-weight: 700;}
.ft-wt-800 {font-weight: 800;}
.ft-wt-900 {font-weight: 900;}
.ft-wt-bold {font-weight: bold}


.back-clr-0 {background-color: #fff}


.border-rad {border-radius: 0 5px 5px 0;}
.border-rad-10 {border-radius: 10px;}
.border-rad-15 {border-radius: 15px;}
.border-rad-20 {border-radius: 20px;}


.width-100 {width: 100%;}
.height-100 {height: 100%;}
.comp-inner {max-width: 128rem}


.block {display: block}
.inblock {display: inline-block;}

.flex {display: flex;}
.in_flex {display: inline-flex;}
.row {flex-direction: row}
.column {flex-direction: column;}
.justy_btw {justify-content: space-between;}
.justy_cnt {justify-content: center;}
.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;}

.right-0 {right: 0}
.left-0 {left: 0}
.top-0 {top: 0}
.bottom-0 {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: 1320px){
    html {font-size: 9px;}
}

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

@media all and (max-width: 800px){
    html {font-size: 10px;}
    .pc-view {display: none;}
    .mo-view {display: block;}
    .pc-view-flex {display: none;}
    .mo-view-flex {display: flex;}

    .comp-inner {max-width: 87%}


}

@media all and (max-width: 420px){
    html {font-size: 5.5px;}
}