@charset "utf-8";
/* --------------------------------------------
style - common
-------------------------------------------- */
:root {
   /* color */
   /* base */
   --base-50: #fff;
   --base-100: #030712;
   /* neutral */
   --neutral-50: #f7f8f8;
   --neutral-100: #e6e7e7;
   --neutral-200: #d4d5d7;
   --neutral-300: #c0c2c4;
   --neutral-400: #aeb1b3;
   --neutral-base: #8e9194;
   --neutral-600: #686c71;
   --neutral-700: #42474d;
   --neutral-800: #353b41;
   /* primary */
   --primary-50: #e4f0fb;
   --primary-100: #c5def7;
   --primary-200: #8fc0ef;
   --primary-300: #559fe7;
   --primary-400: #1f7edb;
   --primary-base: #175ea4;
   /* secondary */
   --secondary-300: #55e7cb;
   --secondary-base: #17a388;
   --secondary-600: #12826c;
   /* tertiary */
   --tertiary-base: #1790a3;
   --tertiary-600: #127382;
   /* negative */
   --negative-100: #f9d7df;
   --negative-200: #f2abbc;
   --negative-300: #ec839c;
   --negative-400: #e65c7c;
   --negative-base: #df325b;
   /* warning */
   --warning-50: #fff9eb;
   --warning-100: #fef4d7;
   --warning-200: #fed8af;
   --warning-300: #fcdc83;
   --warning-400: #fbd15b;
   --warning-base: #fac532;

   /* font */
   /* title */
   --h1: 128px;
   --h2: 96px;
   --h3: 64px;
   --h4: 48px;
   --h5: 36px;
   --h6: 32px;
   /* body */
   --body-lg: 24px;
   --body-md: 24px;
   --body-sm: 20px;
   /* caption */
   --cation-lg: 16px;
   --cation-md: 16px;
}

/* 색상 */
p,
div,
th,
td,
select,
input,
a,
a:link,
a:visited {
   color: #101010;
}
p {
   font-size: var(--body-sm);
}
a:active,
a:hover {
   color: #000;
}

/* 공통 */
* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   -webkit-text-size-adjust: none; /* 아이폰 가로모드 폰트 커짐 방지 */
}
html {
   font-size: var(--cation-lg);
}
body {
   color: #292929;
   font-family: sans-serif;
   font-size: var(--cation-lg);
   line-height: 1.5;
   overflow-x: hidden;
}
ul,
ol {
   list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
   font-size: var(--cation-lg);
}

table {
   width: 100%;
   border-collapse: collapse;
}
img {
   max-width: 100%;
   height: auto;
   border: 0 none;
}

a,
a:link,
a:visited,
a:active,
a:hover {
   text-decoration: none;
}

button,
label {
   cursor: pointer;
}
hr,
.hidden {
   display: none;
}

/* only_sound */
caption,
.sr_only,
.blind {
   overflow: hidden;
   visibility: hidden;

   width: 0 !important;
   height: 0 !important;
   padding: 0 !important;
   margin: 0 !important;
   font-size: 0;
   line-height: 0;
   z-index: 0;
}

/* form - 폼 */
form {
   padding: 0;
   margin: 0;
}
a img,
input.type-image {
   border: 0 none;
}
input.type-text,
textarea {
   border: 1px solid #ddd;
   background: #fff;
   padding: 1px;
}

/* 사이즈 변경 방지 */
textarea {
   overflow-y: scroll;
   resize: none;
}

input,
select,
textarea {
   vertical-align: middle;
   font-size: var(--body-sm);
   color: #333;
}
select {
   /* 아이콘 추가 */
   padding-right: 28px;
   color: #333 !important;
   background: #fff url(../images/icon_select@2x.png) no-repeat 100% 50%; /* 네이티브 화살표 대체 */
   background-size: 20px 20px;
   border-radius: 4px;
   border-radius: 0px; /* ios 둥근모서리 제거 */
   -webkit-appearance: none; /* 네이티브 외형 감추기 */
   -moz-appearance: none;
   appearance: none;
}
span.button,
img.button,
a.button {
   cursor: pointer;
   vertical-align: middle;
}
pre {
   font-size: 0.8rem;
}

*:focus {
   outline: none;
}

/* 행 가운데 정렬 */
.v_align,
.v_align * {
   vertical-align: middle;
}

/* float */
.cf:after {
   content: '';
   display: block;
   clear: both;
}
.fl,
.fl li {
   float: left;
}
.fr {
   float: right;
}
.cl {
   clear: both;
}

/* align */
.ta_l {
   text-align: left;
}
.ta_c {
   text-align: center;
}
.ta_r {
   text-align: right;
}

/* 말줄임 */
.ellipsis {
   display: block;
   overflow: hidden;
   width: calc(100% - 0.25em);
   text-overflow: ellipsis;
   white-space: nowrap;
}
.ellipsis_multy_line {
   height: 2.4em;
   line-height: 1.2;
   text-align: left;
   white-space: normal;
   word-wrap: break-word;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}
/* test */
.t {
   border: 1px solid red;
}
.tbg {
   background: orange;
}

/* skip */
.skipnav {
   position: absolute;
   left: -5000px;
   z-index: 999;
}
.skipnav:focus {
   display: block;
   left: 0;
   width: 100%;
   height: 30px;
   line-height: 30px;
   color: #000;
   font-weight: bold;
   text-align: center;
   background: #e1e0d8;
}

/* 반응형 비디오 */
.video-container {
   margin: 0;
   padding-bottom: 57%;
   max-width: 100%;
   height: 0;
   position: relative;
   overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
}

/* dimmed */
.dimmed {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.2);
   z-index: 999 !important;
}

/* margin */
.mgT-30 {
   margin-top: 30px !important;
}

/*  */
.font-style-normal {
   font-style: normal;
}