@charset "utf-8";

/* -------------------------------------------------------- */
/*                                                          */
/*                        ■ RESET ■                         */
/*                                                          */
/* -------------------------------------------------------- */

/* 기본정의 */
* { margin: 0; padding: 0; font: inherit; color: inherit; box-sizing: border-box; }
html, body { scroll-behavior: smooth; line-height: 1; -webkit-font-smoothing: antialiased; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
main { min-height: calc(100vh - 200px); }

/* 텍스트 & 이미지 */
a { text-decoration: none; }
ol, ul { list-style: none; }
img, video { width: 100%; }
strong, b { font-weight: bold; } 
address, em { font-style: normal; }
blockquote, q {	quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

/* 인풋 */
select, input, textarea, button { font-size: inherit; vertical-align: middle; border: 0; outline: none; border-radius: 0; }
input[readonly="readonly"] { background: #f1f1f1 !important; cursor: default; }
select { border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
button { background-color: transparent; border: 0; cursor: pointer; font: inherit; line-height: inherit; vertical-align: inherit; }
button:focus { outline: none; }
button:disabled { cursor: default; }
textarea { width: 100%; resize: none; }
fieldset, iframe { border: 0; }
pre { white-space: pre-wrap; }

/* 테이블 */
table {	border-collapse: collapse; border-spacing: 0; table-layout: fixed; }
caption, legend { overflow: hidden; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; clip: rect(0,0,0,0); white-space: nowrap; }



/* -------------------------------------------------------- */
/*                                                          */
/*                     ■ 커스터마이징 ■                     */
/*                                                          */
/* -------------------------------------------------------- */

/* 폰트 */
/* AppleSDGothicNeo s */
@font-face {
  font-family: 'AppleSDGothicNeo';
  font-style: normal;
  font-weight: 100;
  src: url('./font/AppleSDGothicNeo/AppleSDGothicNeoT.woff') format('woff'),
       url('./font/AppleSDGothicNeo/AppleSDGothicNeoT.ttf') format('truetype');
}
@font-face {
    font-family: 'AppleSDGothicNeo';
    font-style: normal;
    font-weight: 200;
    src: url('./font/AppleSDGothicNeo/AppleSDGothicNeoUL.woff') format('woff'),
         url('./font/AppleSDGothicNeo/AppleSDGothicNeoUL.ttf') format('truetype');
}
@font-face {
    font-family: 'AppleSDGothicNeo';
    font-style: normal;
    font-weight: 300;
    src: url('./font/AppleSDGothicNeo/AppleSDGothicNeoL.woff') format('woff'),
         url('./font/AppleSDGothicNeo/AppleSDGothicNeoL.ttf') format('truetype');
}
@font-face {
    font-family: 'AppleSDGothicNeo';
    font-style: normal;
    font-weight: 400;
    src: url('./font/AppleSDGothicNeo/AppleSDGothicNeoR.woff') format('woff'),
         url('./font/AppleSDGothicNeo/AppleSDGothicNeoR.ttf') format('truetype');
}
@font-face {
    font-family: 'AppleSDGothicNeo';
    font-style: normal;
    font-weight: 500;
    src: url('./font/AppleSDGothicNeo/AppleSDGothicNeoM.woff') format('woff'),
         url('./font/AppleSDGothicNeo/AppleSDGothicNeoM.ttf') format('truetype');
}
@font-face {
    font-family: 'AppleSDGothicNeo';
    font-style: normal;
    font-weight: 600;
    src: url('./font/AppleSDGothicNeo/AppleSDGothicNeoSB.woff') format('woff'),
         url('./font/AppleSDGothicNeo/AppleSDGothicNeoSB.ttf') format('truetype');
}
@font-face {
    font-family: 'AppleSDGothicNeo';
    font-style: normal;
    font-weight: 700;
    src: url('./font/AppleSDGothicNeo/AppleSDGothicNeoB.woff') format('woff'),
         url('./font/AppleSDGothicNeo/AppleSDGothicNeoB.ttf') format('truetype');
}
@font-face {
    font-family: 'AppleSDGothicNeo';
    font-style: normal;
    font-weight: 800;
    src: url('./font/AppleSDGothicNeo/AppleSDGothicNeoEB.woff') format('woff'),
         url('./font/AppleSDGothicNeo/AppleSDGothicNeoEB.ttf') format('truetype');
}
@font-face {
    font-family: 'AppleSDGothicNeo';
    font-style: normal;
    font-weight: 900;
    src: url('./font/AppleSDGothicNeo/AppleSDGothicNeoH.woff') format('woff'),
         url('./font/AppleSDGothicNeo/AppleSDGothicNeoH.ttf') format('truetype');
}
/* AppleSDGothicNeo e */

/* 루트 */
:root {
    /* primary-color */
    --default-txt: #0B0F1D;
    --sub-txt: #585F74;

    --key-color: #0066B2;
    --sub-key-color: #82A1EF;
    --point-color: #A6E6FF;
    --sub-point-color: #FFFF85;
    --deep-key-color: #002B97;

    /* sub-color */
    --gray-deep: #A5A6AA;
    --gray-mid: #C9CBD2; 
    --gray-lite: #ECEDF2;
    --bg-gray-color: #F8F9FA;
    --bg-blue-color: #F8FDFF;
    --bg-stroke-color: #CFF2FF;

    /* font-basic */
    --font-family: 'AppleSDGothicNeo', sans-serif;
    --font-size: 16px;
    --font-weight: 300;

    /* font-style */
    --h2: 700 2.5rem/1.2 var(--font-family);
    --h3: 700 2rem/1.2 var(--font-family);
    --h4: 700 1.6rem/1.2 var(--font-family);

    --cont-inner: 1320px;
}

/* 커스텀 적용 */
body { font-weight: var(--font-weight); font-family: var(--font-family); font-size: var(--font-size); color: var(--default-txt); }
body::-webkit-scrollbar { width: 6px; }
body::-webkit-scrollbar-thumb { background-color: var(--sub-key-color); /* 스크롤바 색상 */ border-radius: 10px; /* 스크롤바 둥근 테두리 */ }
body::-webkit-scrollbar-track { background-color: transparent;  /*스크롤바 뒷 배경 색상*/ }
a { color: var(--default-txt); }

h2 { font: var(--h2); }
h3 { font: var(--h3); }
h4 { font: var(--h4); }



/* -------------------------------------------------------- */
/*                                                          */
/*               ■ 지정 클래스 정의(기본) ■                 */
/*                                                          */
/* -------------------------------------------------------- */

/* 이너 정의 */
.inner { width: 96%; max-width: var(--cont-inner); margin: 0 auto; position: relative; }

/* 별도 컬러 정의 */
.t-black { color: var(--main-black); }
.t-key { color: var(--key-color); }
.t-sub { color: var(--sub-key-color); }
.t-point { color: var(--point-color); }

/* 스크롤 제거 */
.noneScroll { width: 100%; height: 100vh; overflow: hidden; }

/* 숨김 클래스 */
.hidden { display: none; width: 0; height: 0; text-indent: -9999px; overflow: hidden; }

/* float-클리어 */
.clear:after { display: block; content: ""; clear: both; height: 0; }



/* -------------------------------------------------------- */
/*                                                          */
/*               ■ 지정 클래스 정의(추가) ■                 */
/*                                                          */
/* -------------------------------------------------------- */

/* 폰트 굵기 */
.fw1 { font-weight: 100; }
.fw2 { font-weight: 200; }
.fw3 { font-weight: 300; }
.fw4 { font-weight: 400; }
.fw5 { font-weight: 500; }
.fw6 { font-weight: 600; }
.fw7 { font-weight: 700; }
.fw8 { font-weight: 800; }
.fw9 { font-weight: 900; }

/* 디스플레이 정의 */
.displayBlock { display: block; }
.displayInline { display: inline; }
.displayNone { display: none; }

/* 텍스트정렬 정의 */
.textAlignCt { text-align: center; }
.textAlignLf { text-align: left; }
.textAlignRg { text-align: right; }



/* -------------------------------------------------------- */
/*                                                          */
/*                 ■ 웹접근성 탭키 정의 ■                   */
/*                                                          */
/* -------------------------------------------------------- */

.tap-acc { display: flex; justify-content: center; align-items: center; width: 100%; height: 64px; border: 3px dashed #505553; color: #fff; text-align: center; font: 600 18px/100% sans-serif; position: fixed; top: -100%; left: 0; z-index: 999; }
.tap-acc::after { content: ''; display: block; width: calc(100% - 4px); height: calc(100% - 4px); background-color: #cc2634; position: absolute; left: 2px; top: 2px; z-index: -1; }
.tap-acc:focus { top: 0; outline: none; }



/* -------------------------------------------------------- */
/*                                                          */
/*                     ■ 미디어 쿼리 ■                      */
/*                                                          */
/* -------------------------------------------------------- */
@media screen and (max-width:768px){}