@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;

    /* Color (대략 abc순) */
    --black: #000;
    --color-accent: #d54156;
    --gray1: #a2a2a2;
    --gray2: #d9d9d9;
    --gray3: #f5f5f5;
    --gray4: #e4e7eb;
    --gray5: #eaebed;
    --white: #fff;

    --theme-blue1: #065cca;
    --theme-navy1: #002a3d;
    --theme-navy2: #005178;
    --theme-green1: #44987a;

    /* gaps */
    --gap-x-large: 300px;
    --gap-large: 240px;
    --gap-medium: 100px;
    --sec-inner-pad: 240px;

    @media (width <= 1280px){
        --gap-x-large: 220px;
        --gap-medium: 80px;
        --sec-inner-pad: 160px;
    }
    @media (width <= 860px){
        --gap-x-large: 160px;
        --sec-inner-pad: 100px;
    }
    @media (width <= 640px){
        --gap-x-large: 120px;
        --gap-medium: 40px;
        --sec-inner-pad: 80px;
    }
}


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


/* font-face - NotoSans-Italic */
@font-face {
    font-family: 'NotoSans-Italic';
    font-style: normal;
    font-weight: 100;
    src: url(../css/font/NotoSans-ThinItalic.woff2) format('woff2');
}
@font-face {
    font-family: 'NotoSans-Italic';
    font-style: normal;
    font-weight: 200;
    src: url(../css/font/NotoSans-ExtraLightItalic.woff2) format('woff2');
}
@font-face {
    font-family: 'NotoSans-Italic';
    font-style: normal;
    font-weight: 300;
    src: url(../css/font/NotoSans-LightItalic.woff2) format('woff2');
}
@font-face {
    font-family: 'NotoSans-Italic';
    font-style: normal;
    font-weight: 400;
    src: url(../css/font/NotoSans-Italic.woff2) format('woff2');
}
@font-face {
    font-family: 'NotoSans-Italic';
    font-style: normal;
    font-weight: 500;
    src: url(../css/font/NotoSans-MediumItalic.woff2) format('woff2');
}
@font-face {
    font-family: 'NotoSans-Italic';
    font-style: normal;
    font-weight: 600;
    src: url(../css/font/NotoSans-SemiBoldItalic.woff2) format('woff2');
}
@font-face {
    font-family: 'NotoSans-Italic';
    font-style: normal;
    font-weight: 700;
    src: url(../css/font/NotoSans-BoldItalic.woff2) format('woff2');
}
@font-face {
    font-family: 'NotoSans-Italic';
    font-style: normal;
    font-weight: 800;
    src: url(../css/font/NotoSans-ExtraBoldItalic.woff2) format('woff2');
}
@font-face {
    font-family: 'NotoSans-Italic';
    font-style: normal;
    font-weight: 900;
    src: url(../css/font/NotoSans-BlackItalic.woff2) format('woff2');
}


/* Reset : 이 부분은 초기화만 작성 */
*,
*:before,
*:after{box-sizing: border-box;}
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; line-height: 1.5; letter-spacing: 0; font-weight: 400; font-style: normal; font-family: 'Pretendard', sans-serif; color: #000;}

select{-webkit-appearance: none; -moz-appearance: none; appearance: none;}
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;}
}


/* 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;}


/* placeholder */
::placeholder{}


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


/* 스크롤바 */
::-webkit-scrollbar{}
::-webkit-scrollbar-thumb{}
::-webkit-scrollbar-track{}


/* for Only Desktop */
@media (max-width: 500px){
    .onlyDesktop{display: none;}
}


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


/* hideAt-w1024 */
.hideAt-w1024{}
@media (max-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;}
.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{}
.fc-red{color: var(--color-accent);}
.fc-blue{color: var(--theme-blue1);}
.fc-green{color: var(--theme-green1);}
.fc-accent{color: var(--color-accent);}



/* 텍스트 - 데코레이션, 소문자, 대문자 */
.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;}
}


/* 너비 */
.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;}