@charset "UTF-8";
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 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: inherit;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
  display: block;
}
ol, ul {list-style: none;}
br{opacity: 0;}
/*******************************************************************
default
********************************************************************/
html, body {
  /* height: 100%; */
  position: relative;
}

input[type=button], input[type=text], input[type=image], input[type=submit], textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;

  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
}

textarea {
  overflow: hidden;
}
textarea.content{
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box;
        box-sizing: border-box;
}
/* IE6 */
:first-child + html .clearFix {
  zoom: 1;
}

/* IE7 */
.hide, .hidden, .blind, caption, legend {
  opacity: 0;
  text-indent: -999em;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
}

.clearFix:after {
  display: block;
  clear: both;
  content: '';
}

* html .clearFix {
  zoom: 1;
}

/* 뷰표트 변환시 폰트크기 자동확대 방지 */
body {
  -webkit-text-size-adjust: none;
}

input[type='text'], input[type='password'], input[type='submit'], input[type='search'] {
  -webkit-appearance: none;
  border-radius: 0;
}

input[type='date'] {
  background-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

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

address, caption, cite, code, dfn, em, var {
  font-style: normal;
  font-weight: normal;
}

input, select, textarea, button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}

select::-ms-expand {
  display: none;
}

input[type=radio] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
  appearance: radio;
}

input[type=submit], input[type=button], button {
  cursor: pointer;
}

input[type=checkbox], input[type=checkbox] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: checkbox;
}

input[type=checkbox] {
  /* position: static !important; */
  vertical-align: middle;
}

input[type=checkbox] + label:before {
  display: none;
}

/* input 기본 스타일 초기화 */
input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* IE10 이상에서 input box 에 추가된 지우기 버튼 제거 */
input::-ms-clear {
  display: none;
}

/* input type number 에서 화살표 제거 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Select box 스타일 초기화 */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* IE 에서 Select box 화살표 제거 */
select::-ms-expand {
  display: none;
}

table {
  width: 100%;
  border-collapse: collapse;
}


@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 300;
  src: url(../resources/fonts/NotoSansKR-Black.woff) format("woff2"),
       url(../resources/fonts/NotoSansKR-Light.woff) format("woff"),
       url(../resources/fonts/NotoSansKR-Light.otf) format("opentype");
}

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 400;
  src: url(../resources/fonts/NotoSansKR-Regular.woff2) format("woff2"),
       url(../resources/fonts/NotoSansKR-Regular.woff) format("woff"),
       url(../resources/fonts/NotoSansKR-Regular.otf) format("opentype");
}

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 500;
  src: url(../resources/fonts/NotoSansKR-Medium.woff2) format("woff2"),
       url(../resources/fonts/NotoSansKR-Medium.woff) format("woff"),
       url(../resources/fonts/NotoSansKR-Medium.otf) format("opentype");
}

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 700;
  src: url(../resources/fonts/NotoSansKR-Bold.woff2) format("woff2"),
       url(../resources/fonts/NotoSansKR-Bold.woff) format("woff"),
       url(../resources/fonts/NotoSansKR-Bold.otf) format("opentype");
}

@font-face {
  font-family: 'Arita';
  font-style: normal;
  font-weight: 700;
  src: url(../resources/fonts/Arita-Bold.woff2) format("woff2"),
       url(../resources/fonts/Arita-Bold.woff) format("woff"),
       url(../resources/fonts/Arita-Bold.otf) format("opentype");
}
@font-face {
  font-family: 'Arita';
  font-style: normal;
  font-weight: 600;
  src: url(../resources/fonts/Arita-SemiBold.woff2) format("woff2"),
       url(../resources/fonts/Arita-SemiBold.woff) format("woff"),
       url(../resources/fonts/Arita-SemiBold.otf) format("opentype");
}
@font-face {
  font-family: 'Arita';
  font-style: normal;
  font-weight: 500;
  src: url(../resources/fonts/Arita-Medium.woff2) format("woff2"),
       url(../resources/fonts/Arita-Medium.woff) format("woff"),
       url(../resources/fonts/Arita-Medium.otf) format("opentype");
}







html {
  font-family: 'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', Dotum, Arial, sans-serif;
}

html, body, h1, h2, h3, h4, h5, h6, strong, table th, input, textarea, select, button {
  font-weight: 400;
  font-size: inherit;
  color: #000;
  letter-spacing: -0.5px;
  margin: 0;
  padding: 0;
}

/*  
*   COMMON STYLE
*/
html {
  font-size: 10px;
  line-height: 1.5;
}
::placeholder {color: #ddd !important}

/* Width */
.w20{width:20px!important}
.w30{width:30px!important}
.w40{width:40px!important}
.w50{width:50px!important}
.w60{width:60px!important}
.w70{width:70px!important}
.w80{width:80px!important}
.w90{width:90px!important}
.w100{width:100px!important}
.w110{width:110px!important}
.w120{width:120px!important}
.w130{width:130px!important}
.w200{width:200px!important}
.fs0{font-size:0!important}
.fs11{font-size:11px!important}
.fs12{font-size:12px!important}
.fs13{font-size:13px!important}
.fs14{font-size:14px!important}
.fs15{font-size:15px!important}
.fs16{font-size:16px!important}
.fs17{font-size:17px!important}
.fs18{font-size:18px!important}
.fs19{font-size:19px!important}
.fs20{font-size:20px!important}
.mb0{margin-bottom:0!important}
.mb5{margin-bottom:5px!important}
.mb10{margin-bottom:10px!important}
.mb15{margin-bottom:15px!important}
.mb20{margin-bottom:20px!important}
.mb25{margin-bottom:25px!important}
.mb30{margin-bottom:30px!important}
.mb35{margin-bottom:35px!important}
.mb40{margin-bottom:40px!important}
.mb45{margin-bottom:45px!important}
.mb50{margin-bottom:50px!important}
.mb100{margin-bottom:100px!important}
.mr0{margin-right:0!important}
.mr5{margin-right:5px!important}
.mr10{margin-right:10px!important}
.mr15{margin-right:15px!important}
.mr20{margin-right:20px!important}
.mr25{margin-right:25px!important}
.mr30{margin-right:30px!important}
.mr35{margin-right:35px!important}
.mr40{margin-right:40px!important}
.mr45{margin-right:45px!important}
.mr50{margin-right:50px!important}
.ml0{margin-left:0!important}
.ml5{margin-left:5px!important}
.ml10{margin-left:10px!important}
.ml15{margin-left:15px!important}
.ml20{margin-left:20px!important}
.ml25{margin-left:25px!important}
.ml30{margin-left:30px!important}
.ml35{margin-left:35px!important}
.ml40{margin-left:40px!important}
.ml45{margin-left:45px!important}
.ml50{margin-left:50px!important}
.mt0{margin-top:0!important}
.mt5{margin-top:5px!important}
.mt10{margin-top:10px!important}
.mt15{margin-top:15px!important}
.mt20{margin-top:20px!important}
.mt25{margin-top:25px!important}
.mt30{margin-top:30px!important}
.mt35{margin-top:35px!important}
.mt40{margin-top:40px!important}
.mt45{margin-top:45px!important}
.mt50{margin-top:50px!important}
.p0{padding:0!important}
.p5{padding:5px!important}
.p10{padding:10px!important}
.p20{padding:20px!important}
.p30{padding:30px!important}
.pt5{padding-top:5px!important}
.pt10{padding-top:10px!important}
.pt15{padding-top:15px!important}
.pt20{padding-top:20px!important}
.pl5{padding-left:5px!important}
.pl10{padding-left:10px!important}
.pl15{padding-left:15px!important}
.pl20{padding-left:20px!important}
.pr5{padding-right:5px!important}
.pr10{padding-right:10px!important}
.pr15{padding-right:15px!important}
.pr20{padding-right:20px!important}
.pb5{padding-bottom:5px!important}
.pb10{padding-bottom:10px!important}
.pb15{padding-bottom:15px!important}
.pb20{padding-bottom:20px!important}
.wrap{width:100%;overflow-x:hidden}
.no_scroll{overflow:hidden}
.text_indent{text-indent:-9999px}
.text_hide{position:absolute;left:-999em}
.clearfix{*zoom:1}
.clearfix:after{display:block;content:'';clear:both}
.ly_mt_sm{display:block;margin-top:1em}
.ly_mt_md{display:block;margin-top:2em}
.ly_mt_lg{display:block;margin-top:3em}
.br_m{display:none}
.br_pc{display:block}

@media screen and (max-width: 640px) {
    .br_m{display:block!important}
    .br_pc{display:none!important}
    .text_hide_m{display:none!important}
}

.wrap {
  z-index: 1;
  position: relative;
  background-color: #fafafa;
}

.inner {
  position: relative;
}

.ani_elem {
  opacity: 0;
}

.item_link {
  cursor: default;
}

.clear::after {
  content: "";
  display: block;
  clear: both;
}

@media screen and (min-width: 801px) {
  .m_br {display: none;}
}

input[type="checkbox"] {
    display: inline-block;
    width: 16px !important;
    height: 16px !important;
}


















.input, .textarea, .select select {background-color: white; border-color: transparent; font-size: 16px; font-weight: 500;}
.textarea{border: 1px solid #b9b9b9; width: 100%; resize: vertical; padding: 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.input::placeholder, .textarea::placeholder, .select select::placeholder{color: rgba(54, 54, 54, 0.3);font-size: 17px; font-weight: 300;}
.input::-moz-placeholder, .textarea::-moz-placeholder, .select select::-moz-placeholder { color: rgba(54, 54, 54, 0.3); font-size: 17px; font-weight: 300;}
.input::-webkit-input-placeholder, .textarea::-webkit-input-placeholder, .select select::-webkit-input-placeholder { color: rgba(54, 54, 54, 0.3); font-size: 17px; font-weight: 300;}
.input:-moz-placeholder, .textarea:-moz-placeholder, .select select:-moz-placeholder { color: rgba(54, 54, 54, 0.3); font-size: 17px; font-weight: 300;}
.input:-ms-input-placeholder, .textarea:-ms-input-placeholder, .select select:-ms-input-placeholder { color: rgba(54, 54, 54, 0.3); font-size: 17px; font-weight: 300;}



.hidden-pc{display: none;}
/* .hidden-mb{display: block;} */
.text-ellipsis{
    display: block;
    word-wrap: normal;
    word-break: break-all;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.text-ellipsis2{
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 여러 줄 자르기 추가 스타일 */
    white-space: normal;
    text-align: left; word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* < > */
.hcode{font-family: Dotum; font-weight: 700;}

.txt-16{font-size: 16px;}
.txt-18{font-size: 18px;}
.txt-20{font-size: 20px;}
.txt-22{font-size: 22px;}
.has-weight-medium {font-weight: 500;}
.has-weight-bold {font-weight: 700;}

.cl1{color: #2e9ae5;}
.cl2{color: #006db9;}
.cl3{color: #013061;}
.bgc3{background-color: #013061;}




/* pc : block -> mobile : none */
br.p_m{display: block !important;}
/* pc : none -> mobile : block */
br.m_p{display: none !important;}

.checks {display: inline-block; position: relative; }
.checks input[type=checkbox] {opacity: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: absolute; top: 1px; left: 1px; width: 20px; height: 20px; padding: 0; }
.checks input[type=checkbox] + label {display: inline-block; padding-left: 30px; font-size: 17px; line-height: 22px; cursor: pointer; }
.checks input[type=checkbox] + label:before {display: inline-block; content: ''; width: 22px; height: 22px; vertical-align: middle; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #666; border-radius: 3px; background-color: #fff; position: absolute; top: 1px; left: 0; }
.checks input[type=checkbox]:focus + label:before,
.checks input[type=checkbox]:active + label:before{outline: 1px solid #000; }
.checks input[type=checkbox]:checked + label:after {display: inline-block; content: ''; position: absolute; top: 3px; left: 2px; width: 18px; height: 18px; background: url(../img/common.png) no-repeat; background-position: -8px -7px;}

@media screen and (max-width: 1280px) {
    .txt-16{font-size: 15px;}
    .txt-18{font-size: 16px;}
    .txt-20{font-size: 18px;}
    .txt-22{font-size: 20px;}
    .input, .textarea, .select select{font-size: 15px;}
    .input::placeholder, .textarea::placeholder, .select select::placeholder{font-size: 15px;}
    .input::-moz-placeholder, .textarea::-moz-placeholder, .select select::-moz-placeholder {font-size: 15px;}
    .input::-webkit-input-placeholder, .textarea::-webkit-input-placeholder, .select select::-webkit-input-placeholder {font-size: 15px;}
    .input:-moz-placeholder, .textarea:-moz-placeholder, .select select:-moz-placeholder {font-size: 15px;}
    .input:-ms-input-placeholder, .textarea:-ms-input-placeholder, .select select:-ms-input-placeholder {font-size: 15px;}
    .button{font-size: 15px;}
    .checks input[type=checkbox] + label{font-size: 15px;}
    .textarea{padding: 10px;}
    br.m_p{display: block !important;}
    br.p_m{display: none !important;}
    .modal_card{width: 90%; font-size: 15px;}
    .modal_card_head{padding: 15px;}
    .modal_close{right: 5px; width: 50px; height: 50px;}
    .modal_close .line{width: 25px;}
    .modal_snscheck_img img{width: 280px;}
    .modal_snscheck p{margin: 30px 0;}
}

@media screen and (max-width: 800px) {
    .hidden-pc{display: block;}
    .hidden-mb{display: none;}
    .txt-16{font-size: 15px;}
    .txt-18{font-size: 15px;}
    .txt-20{font-size: 16px;}
    .txt-22{font-size: 18px;}
    .modal_hack_wrap .bx-viewport{height: 400px !important; overflow-y: scroll !important;}

}

.text-center{text-align: center !important;}
.text-left{text-align: left !important;}
.text-right{text-align: right !important;}