@charset "utf-8";

/* Css Variables */
:root{
    /* font-weight */
    --fwt : 100;
    --fwel: 200;
    --fwl : 300;
    --fwr : 400;
    --fwm : 500;
    --fwsb: 600;
    --fwb : 700;
    --fweb: 800;
    --fwbl: 900;

    /* font-family */
    --font-eng: "tablet-gothic", 'Noto Sans KR' !important;
    --font-batang: "KoPubWorld Batang" !important;

    /* Color (대략 abc순) */
    --black-pure: #000;
    --black: #000;
    --border-default: #ececec;

    --gray: #999;
    --gray2: #e4e4e4;
    --gray3: #777;
    --gray-light: #f7f7f7;
    --gray-dark: #333132;

    --main: #222;

    --theme-black: #0e1616;
    --theme-green: #00a651;
    --theme-green2: #00ad6d;
    --theme-green3: #009944;
    --theme-gray: #333132;
    --theme-yellow: #f5a927;
    --theme-light-red: #ff6262;
    --theme-blue: #0071c1;

    --white: #fff;
    
    /* wrap */
    --space: 30px;

    /* gaps */
    --gap: 24px;

    /* radius */
    --radius: 24px;

    /* main-sec-space */
    --main-sec-space: 150px;
    
    /* color change by filter  */
    --filter-black: brightness(0) saturate(100%);
    --filter-white: brightness(0) invert(1);
    --filter-gray: brightness(0) saturate(100%) invert(13%) sepia(6%) saturate(356%) hue-rotate(278deg) brightness(94%) contrast(81%);
    --filter-theme-black: brightness(0) saturate(100%) invert(5%) sepia(12%) saturate(1460%) hue-rotate(131deg) brightness(96%) contrast(94%);
    --filter-theme-green: brightness(0) saturate(100%) invert(37%) sepia(44%) saturate(3631%) hue-rotate(132deg) brightness(97%) contrast(104%);
    --filter-theme-green2: brightness(0) saturate(100%) invert(47%) sepia(79%) saturate(3415%) hue-rotate(133deg) brightness(95%) contrast(106%);
    --filter-theme-green3: brightness(0) saturate(100%) invert(48%) sepia(90%) saturate(5100%) hue-rotate(132deg) brightness(92%) contrast(101%);
    --filter-theme-yellow: brightness(0) saturate(100%) invert(63%) sepia(41%) saturate(817%) hue-rotate(356deg) brightness(104%) contrast(92%);
    --filter-theme-blue: brightness(0) saturate(100%) invert(28%) sepia(100%) saturate(1223%) hue-rotate(183deg) brightness(96%) contrast(101%);
    --filter-theme-light-red: brightness(0) saturate(100%) invert(54%) sepia(16%) saturate(4202%) hue-rotate(321deg) brightness(104%) contrast(128%);

    /* input inner space */
    --input-inner-space: 20px;
    --input-inner-space-sm: 15px;

    /* store forms */
    --store-ip-height: 58px;
    --store-ip-inner: 24px;
    --store-ip-fz: 20px;

    /* custom transition */
    --transition-01: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    @media (width <= 1500px){
        --between-sec-gap: 120px;
    }
    @media (width <= 1280px){
        --between-sec-gap: 100px;
        --space: 20px;
        --gap: 20px;
        --radius: 15px;
        --main-sec-space: 120px;
    }
    @media (width <= 860px){
        --main-sec-inner-pad: 60px;
        --between-sec-gap: 60px;
        --store-ip-height: 50px;
        --store-ip-fz: 18px;
        --store-ip-inner: 15px;
    }
    @media (width <= 640px){
        --main-sec-inner-pad: 40px;
        --between-sec-gap: 50px;
        --gap: 15px;
        --input-inner-space: 15px;
        --input-inner-space-sm: 10px;
        --main-sec-space: 90px;
        --store-ip-inner: 10px;
        --store-ip-height: 42px;
        --store-ip-fz: 15px;
    }
}


/* font-face - Noto Sans KR */
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 100;
    src: url(../css/font/NotoSansKR-Thin.woff2) format('woff2');
}
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 200;
    src: url(../css/font/NotoSansKR-ExtraLight.woff2) format('woff2');
}
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 300;
    src: url(../css/font/NotoSansKR-Light.woff2) format('woff2');
}
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    src: url(../css/font/NotoSansKR-Regular.woff2) format('woff2');
}
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
    src: url(../css/font/NotoSansKR-Medium.woff2) format('woff2');
}
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 600;
    src: url(../css/font/NotoSansKR-SemiBold.woff2) format('woff2');
}
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 700;
    src: url(../css/font/NotoSansKR-Bold.woff2) format('woff2');
}
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 800;
    src: url(../css/font/NotoSansKR-ExtraBold.woff2) format('woff2');
}
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 900;
    src: url(../css/font/NotoSansKR-Black.woff2) format('woff2');
}


/* font-face - KoPubWorld Batang */
@font-face {
    font-family: 'KoPubWorld Batang';
    font-style: normal;
    font-weight: 300;
    src: url(../css/font/KoPubWorld-Batang-Light.woff2) format('woff2');
}
@font-face {
    font-family: 'KoPubWorld Batang';
    font-style: normal;
    font-weight: 500;
    src: url(../css/font/KoPubWorld-Batang-Medium.woff2) format('woff2');
}
@font-face {
    font-family: 'KoPubWorld Batang';
    font-style: normal;
    font-weight: 700;
    src: url(../css/font/KoPubWorld-Batang-Bold.woff2) format('woff2');
}




/* Reset : 이 부분은 초기화만 작성 */
*,
*:before,
*:after{box-sizing: border-box; -webkit-touch-callout: none;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, input, textarea, select{margin: 0; padding: 0; -webkit-touch-callout: none;}

hr{display: none;}
ul, ol, li{list-style: none;}
img{border: none; vertical-align: middle;}
fieldset{border: none; vertical-align: top;}
table{border-collapse: collapse; border-spacing: 0;}
address, em, optgroup{font-style: normal;}
object{vertical-align: top;}
blockquote, q{quotes: none;}
blockquote:before,
blockquote:after,
q:before,
q:after{content: ""; content: none;}
input, button, select{vertical-align: middle;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display: block;}
audio, canvas, progress{display: inline-block;}
video{display: block;}
button{padding: 0; box-shadow: none; border: none; font-size: inherit; font-family: inherit; border-radius: 0;}
button:hover,
button:active,
button:focus{cursor: pointer;}
h1, h2, h3, h4, h5, h6{font-size: 100%; font-weight: normal; line-height: normal;}
img{max-width: 100%; border: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); -ms-interpolation-mode: bicubic;}
legend, caption{visibility: hidden; overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; margin: 0; padding: 0;}
caption{position: static;}
a{color: inherit; text-decoration: none;}
a:link, a:visited, a:hover, a:active{text-decoration: none;}
a[href^="tel"]{color: inherit; text-decoration: none;}
textarea{overflow-y: auto;}
label{cursor: pointer;}
input[type=text], input[type=password], textarea{-webkit-appearance: none;}
input[type=checkbox], input[type=radio]{vertical-align: middle;}
input[type=submit]{-webkit-border-radius: 0; -webkit-appearance: none;}
input[type=image]{height: auto; border: 0;}
input[type=file]{border: 0; background: none;}


/* html5 구 버전 적용 위한 소스 */
area, base, basefont, command, datalist, head, link, meta,
noframes, param, script, source, style, track, title, noembed,
[hidden], input[type=hidden], menu[type=context] {display: none;}
address, article, aside, blockquote, body, center, dd, dir, div, dl, dt, figure,
figcaption, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html,
legend, listing, menu, nav, ol, p, plaintext, pre, section, summary, ul, xmp{display: block;}
table{display: table;}
caption{display: table-caption;}
colgroup{display: table-column-group;}
col{display: table-column;}
thead{display: table-header-group;}
tbody{display: table-row-group;}
tfoot{display: table-footer-group;}
tr{display: table-row;}
td, th{ display: table-cell;}
li{ display: list-item;}
ruby{display: ruby;}
rt{display: ruby-text; display: inline;}


/* 기본 공통 스타일 */
html{overflow-y: auto; word-break: keep-all; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-font-size-adjust: none; text-rendering: optimizeLegibility; font-size: 16px;}
body{position: relative; width: 100%; min-width: 320px; overflow-x: hidden; overflow: clip; line-height: 1.5; letter-spacing: 0; font-weight: 400; font-style: normal; font-family: 'Noto Sans KR', tablet-gothic, sans-serif; color: var(--main);}

select{-webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: inherit; cursor: pointer; color: inherit;}
input{}
textarea{}
button{background: none; border: none; padding: 0; margin: 0; cursor: pointer; white-space: initial; color: inherit; box-shadow: none;}
@media (width <= 1280px){
    html{font-size: 15px;}
}


/* 모바일 터치 시 하이라이트 제거 */
a, button, input, label{-webkit-tap-highlight-color: transparent;}


/* Password */
input[type=password]{}
input[type=password]::placeholder{}


/* 자동완성 시 브라우저 스타일 없애기 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{}


/* 드래그 선택 */
::selection{}


/* Form 요소 */
input[type="text"],
input[type="password"],
input[type="checkbox"],
input[type="radio"],
input[type="submit"],
input[type="button"],
textarea {font-family: inherit; font-weight: inherit;}


/* 화살표 UI 제거 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}


/* placeholder */
::placeholder{}


/* 강조 */
strong{font-weight: 700;}


/* 스크롤바 */
::-webkit-scrollbar{}
::-webkit-scrollbar-thumb{}
::-webkit-scrollbar-track{}
body::-webkit-scrollbar{width: 8px;}
body::-webkit-scrollbar-thumb{border-radius: 0; background-color: #00a651;} 
body::-webkit-scrollbar-track{border-radius: 0; background-color: #333;}


/* for Only Desktop */
@media (width <= 640px){
    .onlyDesktop{display: none !important;}
}


/* for Only Mobile */
.onlyMobile{display: none;}
@media (width <= 640px){
    .onlyMobile{display: block;}
}


/* hideAt-w1024 */
.hideAt-w1024{}
@media (width <= 1024px){
    .hideAt-w1024{display: none;}
}


/* 페이지 스크롤 비활성화 */
.scr-disable{overflow: hidden !important; touch-action: none;}


/* skip - 마크업 유지하지만 화면에 표시 안되게 할 요소 */
.skip,
.skip *{
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
.skip *{display: none !important;}
.skip:before,
.skip:after{display: none !important;}


/* 모바일 주소창 제외한 높이 100% */
.h100vh{
    height: calc(var(--vh, 1vh) * 100) !important;
    @media (pointer: coarse) and (hover: none){
        /* 터치디스플레이인 경우에만 적용 */
        height: 100svh !important;
    }
}
.min-h100vh{min-height: calc(var(--vh, 1vh) * 100) !important;}


/* 한줄 말줄임 */
.ell1{text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}


/* 두줄 말줄임 */
.ell2{text-overflow: ellipsis; overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 22px; height: 44px;}


/* 텍스트 정렬 */
.tac{text-align: center;}
.tal{text-align: left;}
.tar{text-align: right;}


/* 텍스트 - 주요 색상 */
.fc-theme{color: var(--theme-green);}
.fc-red{color: red;}
.fc-blue{color: blue;}
.fc-white{color: #fff;}
.fc-accent{}


/* font-family */
.ff-eng{font-family: var(--font-eng);}



/* 텍스트 - 데코레이션, 소문자, 대문자 */
.tdu{text-decoration: underline;}
.ttu{text-transform: uppercase;}
.ttl{text-transform: lowercase;}


/* 텍스트 - 자간 조정 (text letter spacing) */
.tls-2to4{letter-spacing: 1.68em;}
.tls-3to4{letter-spacing: 0.42em;}


/* 폰트웨이트 */
.fwt{font-weight: var(--fwt) !important;}
.fwel{font-weight: var(--fwel) !important;}
.fwl{font-weight: var(--fwl) !important;}
.fwr{font-weight: var(--fwr) !important;}
.fwm{font-weight: var(--fwm) !important;}
.fwsb{font-weight: var(--fwsb) !important;}
.fwb{font-weight: var(--fwb) !important;}
.fweb{font-weight: var(--fweb) !important;}
.fwbl{font-weight: var(--fwbl) !important;}


/* 폰트스타일 */
.fs-italic{font-style: italic !important;}


/* 플롯 */
.fll{float: left;}
.flr{float: right;}
.clearfix:after{content: ""; display: block; clear: both;}


/* 임시 */
.dummy{display: flex; align-items: center; justify-content: center; padding: 6em; height: 100%; background-color: var(--thead_bg); color: var(--sub); font-weight: var(--fwb); border-radius: var(--radius_2);}


/* dim */
.dim{
    position: fixed; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); 
    transition: 0.2s; opacity: 0; visibility: hidden;

    &.on{z-index: 12; opacity: 1; visibility: visible;}
}


/* 보더 */
.bdn{border: none !important;}


/* 너비 */
.w100{width:100% !important;}
.w80{width:80% !important;}
.w75{width:75% !important;}
.w70{width:70% !important;}
.w65{width:65% !important;}
.w60{width:60% !important;}
.w55{width:55% !important;}
.w50{width:50% !important;}
.w45{width:45% !important;}
.w40{width:40% !important;}
.w35{width:35% !important;}
.w30{width:30% !important;}
.w25{width:25% !important;}
.w20{width:20% !important;}
.w15{width:15% !important;}
.w10{width:10% !important;}
.w0{width: 0% !important;}
.wa{width: auto !important;}


/* 높이 */
.ha{height: auto !important;}
.mha{min-height: auto !important;}


/* 마진 (px) */
.m0a{margin: 0 auto !important;}

.mta{margin-top: auto !important;}
.mt0{margin-top: 0 !important;}
.mt10{margin-top: 10px !important;}
.mt20{margin-top: 20px !important;}
.mt30{margin-top: 30px !important;}
.mt40{margin-top: 40px !important;}
.mt50{margin-top: 50px !important;}
.mt60{margin-top: 60px !important;}
.mt70{margin-top: 70px !important;}
.mt80{margin-top: 80px !important;}
.mt90{margin-top: 90px !important;}
.mt100{margin-top: 100px !important;}

.mba{margin-bottom: auto !important;}
.mb0{margin-bottom: 0 !important;}
.mb10{margin-bottom: 10px !important;}
.mb20{margin-bottom: 20px !important;}
.mb30{margin-bottom: 30px !important;}
.mb40{margin-bottom: 40px !important;}
.mb50{margin-bottom: 50px !important;}
.mb60{margin-bottom: 60px !important;}
.mb70{margin-bottom: 70px !important;}
.mb80{margin-bottom: 80px !important;}
.mb90{margin-bottom: 90px !important;}
.mb100{margin-bottom: 100px !important;}


/* 패딩 (px) */
.p0{padding: 0 !important;}

.pt0{padding-top: 0 !important;}
.pt10{padding-top: 10px !important;}
.pt20{padding-top: 20px !important;}
.pt30{padding-top: 30px !important;}
.pt40{padding-top: 40px !important;}
.pt50{padding-top: 50px !important;}
.pt60{padding-top: 60px !important;}
.pt70{padding-top: 70px !important;}
.pt80{padding-top: 80px !important;}
.pt90{padding-top: 90px !important;}
.pt100{padding-top: 100px !important;}

.pb0{padding-bottom: 0 !important;}
.pb10{padding-bottom: 10px !important;}
.pb20{padding-bottom: 20px !important;}
.pb30{padding-bottom: 30px !important;}
.pb40{padding-bottom: 40px !important;}
.pb50{padding-bottom: 50px !important;}
.pb60{padding-bottom: 60px !important;}
.pb70{padding-bottom: 70px !important;}
.pb80{padding-bottom: 80px !important;}
.pb90{padding-bottom: 90px !important;}
.pb100{padding-bottom: 100px !important;}



@media (pointer: coarse) and (hover: none){
    /* 터치디스플레이인 경우에만 적용 */
}

@media (pointer: fine) and (hover: hover) {
    /* 터치디스플레이가 아닌 경우에만 적용 */
}