@charset "utf-8";
@import url('webfonts.css');
/*==============================================================
* Generated by somangLee on 2021-07-01
==============================================================*/

/* accessibility */
#accessibility{position: relative; left:0; top:0; width:100%; z-index:9999;}
#accessibility li{position:absolute; left:0; top:0; width:100%; z-index:9999;}
#accessibility a{overflow:hidden; display:block; width:1px; height:1px; margin-bottom:-1px; color:#444; font-size:0; text-decoration:none;}
#accessibility a:active, #accessibility a:focus{width: 100%; height: auto; padding: 5px 0; background: #303030; font-size: 14px; text-align: center; color: #fff;}
#accessibility,#accessibility a{-webkit-transition: none; -moz-transition: none;  -ms-transition: none; -o-transition: none;  transition: none;}

/* reset */
html, body {font-size: 16px; -webkit-box-sizing: border-box;box-sizing: border-box;}
html {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;margin: 0;padding: 0;}
* {-webkit-text-size-adjust:none; }
*,*:before,*:after { box-sizing: border-box;}
body {width: 100%; min-height: 100vh; margin: 0;padding: 0; line-height: 1.25; color: #fff; word-break: keep-all; font-family: 'Pretendard','Play',sans-serif; max-width: 100%; min-width: 100%;overflow-x: hidden;}
ul,ol,li,dl,dt,dd {margin: 0;padding: 0;list-style: none;}
p,h1,h2,h3,h4,h5,h6 { margin: 0; padding: 0; letter-spacing: normal;}
a { color: inherit; text-decoration: none;}
a[href^="tel"] { font-style: normal;}
img { max-width: 100%;height: auto; border: 0; vertical-align: middle;}
table { border-collapse: collapse;width: 100%;border-spacing: 0;}
caption, legend { position: absolute;width: 1px; height: 1px; padding: 0;  margin: -1px;  overflow: hidden; clip: rect(0, 0, 0, 0);  border: 0;}
select, input, textarea { color: inherit;letter-spacing: inherit; font-size: inherit;color: inherit; }
textarea { resize: none; -webkit-appearance: none;overflow: auto;vertical-align: top;  outline: none;}
address,caption,em,i,var,cite,code,dfn,em { font-style: normal; font-weight: normal;}
button { border: 0;  background: none;cursor: pointer;outline: 0;margin: 0;padding: 0;}
hr { margin: 0; border: none; padding: 0; display: block;}
form, figure, figcaption { padding: 0; margin: 0; -webkit-appearance: none;}
fieldset { border: none; padding: 0; margin: 0; border: 0;}
header, footer, article, section, aside, nav, main, details, menu, figcaption, figure {display: block;}
button, input, optgroup, select, textarea { font-family: inherit; font-size: inherit; font-weight: inherit; margin: 0;-webkit-appearance: none;  -moz-appearance: none;appearance: none;border: 0;}
legend, caption { display: none;}
br { letter-spacing: normal;}
img::selection {background: none;}
::selection { background: rgba(90, 159, 255, 0.5);} /*드래그컬러효과*/
pre, code {vertical-align: baseline; outline: 0; padding: 0; margin: 0; border: 0;font-family: 'Pretendard','Play',sans-serif;}

body, textarea:focus, input:focus,a:focus {-webkit-tap-highlight-color: #000;} /*모바일 클릭,터치효과*/
a:focus, button:focus{outline: thin dotted;} /*접근성 포커싱 효과*/

/* ================================================ */

/* common sitemap */
.sitemap-panel * {color: #fff; }
html.over-hidden {overflow: hidden;} /*add*/

/* sitemap 반응형 */
@media screen and (min-width:950px) {

  .sitemap-panel { display:block; position: fixed; z-index: 1000; top: 0; left: 100%; width: 100%; height: 100%; -webkit-transition: left 380ms cubic-bezier(0.455, 0.03, 0.515, 0.955); -o-transition: left 380ms cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: left 380ms cubic-bezier(0.455, 0.03, 0.515, 0.955);}
  .sitemap-panel::after {content: ""; background-color: rgb(0 0 0 / 80%); width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
  html.open .sitemap-panel {left: 0; -webkit-transition: left 480ms 120ms cubic-bezier(0.45, 0, 0.25, 1); -o-transition: left 480ms 120ms cubic-bezier(0.45, 0, 0.25, 1); transition: left 480ms 120ms cubic-bezier(0.45, 0, 0.25, 1); }
  .sitemap-panel .container {position: absolute; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
  .sitemap-panel .close-wrap {width: 247px; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
  .sitemap-close { width: 72px; height: 72px; border-radius: 50%; border: 1px solid #fff; display: block; text-align: center; line-height: 72px;  -webkit-transition: background .3s ease;  -o-transition: background .3s ease;  transition: background .3s ease;}
  .sitemap-close i {font-size: 1.4rem; display: inline-block; vertical-align: middle;}
  .sitemap-close:hover {background: #fff;}
  .sitemap-close:hover i {color: #14161a;}
  .sitemap-panel .left {-webkit-box-ordinal-group: 3;-ms-flex-order: 2;order: 2; -webkit-box-flex: 1.5; -ms-flex: 1.5; flex: 1.5;}
  .sitemap-panel .left .menu li:not(:last-child) {margin-bottom: 2.5rem;}
  .sitemap-panel .left .menu a {display: inline-block; font-size: 2.4rem; font-weight: 700; line-height: 1; position: relative;}
  .sitemap-panel .left .menu a::after {content: ""; display: block; width: 0; border-top: 1px solid #fff; -webkit-transition: width 200ms cubic-bezier(0.45, 0.005, 0.42, 0.995); -o-transition: width 200ms cubic-bezier(0.45, 0.005, 0.42, 0.995); transition: width 200ms cubic-bezier(0.45, 0.005, 0.42, 0.995); margin-top: 5px;}
  .sitemap-panel .left .menu a:hover::after {width: 100%;}
  .sitemap-panel .right {-webkit-box-ordinal-group: 4;-ms-flex-order: 3;order: 3; -webkit-box-flex: 2; -ms-flex: 2; flex: 2; border-left: 1px solid rgba(255, 255, 255, .1); height: 100vh; -webkit-box-sizing: content-box; box-sizing: content-box; padding: 0 0 0 98px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
  .sitemap-panel .right .address li {margin-bottom: 3rem;}
  .sitemap-panel .right .address em, .sitemap-panel .right .address span {font-weight: 300;}
  .sitemap-panel .right .address em {font-size: 16px; padding-bottom: 14px; display: block; font-weight: 500;}
  .sitemap-panel .right .address span {font-size: 18px;}
  .hidden-lang {display: none;}
}

@media (min-width:950px) and (max-width:1110px) {
  .sitemap-panel .spread-btn {display: block; }
  .sitemap-panel .spread-btn + .spread-btn { margin: 10px 0 0 0;}
}

/* sitemap (tablet) */
@media screen and (max-width:950px) {
 .sitemap-panel { display:block; position: fixed; z-index: 1000; top: 0; left: 100%; width: 100%; height: 100%; -webkit-transition: left 380ms cubic-bezier(0.455, 0.03, 0.515, 0.955); -o-transition: left 380ms cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: left 380ms cubic-bezier(0.455, 0.03, 0.515, 0.955);}
  .sitemap-panel::after {content: ""; background-color: rgb(0 0 0 / 90%); width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
  html.open .sitemap-panel {left: 0; -webkit-transition: left 480ms 120ms cubic-bezier(0.45, 0, 0.25, 1); -o-transition: left 480ms 120ms cubic-bezier(0.45, 0, 0.25, 1); transition: left 480ms 120ms cubic-bezier(0.45, 0, 0.25, 1); }
  .sitemap-panel .container {position: absolute; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
  .sitemap-panel .close-wrap {width: auto; height: 287px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-top: 64px;}
  .sitemap-close { width: 70px; height: 70px; line-height: 70px; border-radius: 50%; border: 1px solid #fff;  text-align: center;  -webkit-transition: background .3s ease;  -o-transition: background .3s ease;  transition: background .3s ease;}
  .sitemap-close i {font-size: 1.4rem; display: inline-block; vertical-align: middle;}
  .sitemap-close:hover {background: #fff;}
  .sitemap-close:hover i {color: #14161a;}

  .sitemap-panel .left {-webkit-box-ordinal-group: 4;-ms-flex-order: 3;order: 3; -webkit-box-flex: 2; -ms-flex: 2; flex: 2; text-align: center;}
  .sitemap-panel .left .menu li:not(:last-child) {margin-bottom: 2.8rem;}
  .sitemap-panel .left .menu a {display: inline-block; font-size: 2rem; font-weight: 700; line-height: 1;}
  .sitemap-panel .right {display: none;}

  .hidden-lang {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; height: 104px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;}
  .hidden-lang a {display: inline-block; margin: 0 10px; font-size: 1.1rem; color: #a7acbf;}
  .hidden-lang a.active {color: #fff;}
}

/* sitemap (mobile) */
@media screen and (max-width:480px) {
  .sitemap-panel .close-wrap {height: 170px; padding-top: 10px;}
  .hidden-lang {height: 70px;}
  .sitemap-panel .left .menu li:not(:last-child) {margin-bottom: 2.4rem;}
  .sitemap-panel .left .menu a {font-size: 7vw;}
}

/* spread-btn custom */
.spread-btn { display: inline-block; width: 195px; height: 61px; line-height: 61px; border: 1px solid rgba(255, 255, 255, .4);overflow: hidden; position: relative; -webkit-box-sizing: content-box; box-sizing: content-box;}  
.spread-btn + .spread-btn {margin-left: 15px;}
.circle { border-radius: 1000px; position: absolute; top: 0;left: 0; width: 0;height: 0;margin-left: 0; margin-top: 0; pointer-events: none;}
.btn-inner {display: block; background: transparent; font-size: 1rem; -webkit-transition: 400ms; -o-transition: 400ms; transition: 400ms; text-decoration: none; z-index: 100000; padding: 0 22px;}
.btn-inner.down::after {content: "\eb7c"; font-family: 'xeicon'; font-size: 1rem; color: #fff; display: inline-block; vertical-align: middle; margin-left: 13px;}
.btn-inner .txt {position: relative; z-index: 100000;}
.explode-circle { -webkit-animation: explode 0.5s forwards; animation: explode 0.5s forwards;}
.desplode-circle{ -webkit-animation: desplode 0.5s forwards; animation: desplode 0.5s forwards;}

@keyframes explode {
  0% { width: 0; height: 0; margin-left: 0; margin-top: 0;  background-color: rgba(42, 53, 80,0.2);}
  100% { width: 400px; height: 400px; margin-left: -200px; margin-top: -200px;  background-color: rgba(253, 216, 53, 0.8);}
  }
  @keyframes desplode {
  0% { width: 400px; height: 400px; margin-left: -200px; margin-top: -200px;  background-color: rgba(253, 216, 53, 0.8);
  }
  100% { width: 0px; height: 0px; margin-left: 0px; margin-top: 0px;  background-color: rgba(129, 80, 108,0.6);}
}

@-webkit-keyframes explode {
  0% { width: 0; height: 0; margin-left: 0; margin-top: 0;  background-color: rgba(42, 53, 80,0.2);}
  100% { width: 400px; height: 400px; margin-left: -200px; margin-top: -200px;  background-color: rgba(253, 216, 53, 0.8);}
}

@keyframes explode {
  0% { width: 0; height: 0; margin-left: 0; margin-top: 0;  background-color: rgba(42, 53, 80,0.2);}
  100% { width: 400px; height: 400px; margin-left: -200px; margin-top: -200px;  background-color: rgba(253, 216, 53, 0.8);}
}

@-webkit-keyframes desplode {
  0% { width: 400px; height: 400px; margin-left: -200px; margin-top: -200px;  background-color: rgba(253, 216, 53, 0.8);
  }
  100% { width: 0px; height: 0px; margin-left: 0px; margin-top: 0px;  background-color: rgba(129, 80, 108,0.6);}
}
@keyframes desplode {
  0% { width: 400px; height: 400px; margin-left: -200px; margin-top: -200px;  background-color: rgba(253, 216, 53, 0.8);
  }
  100% { width: 0px; height: 0px; margin-left: 0px; margin-top: 0px;  background-color: rgba(129, 80, 108,0.6);}
}

/* ================================================ */

/* 정렬 */
.flexbox {display: flex; align-items: center;} 
.m-top55 { margin-top: 55px !important;}
.m-left10 { margin-left: 10px !important;}
.p-top55 { padding-top: 55px !important;}

.pdt10 { padding-top: 10px;}
.pdt20 { padding-top: 20px;}
.pdt30 { padding-top: 30px;}
.pdt40 { padding-top: 20px;}
.pdt50 { padding-top: 30px;}
.pdb10 { padding-bottom: 10px;}
.pdb20 { padding-bottom: 20px;}
.pdb30 {padding-bottom: 30px;}
.pdb40 { padding-bottom: 40px;}
.pdb50 { padding-bottom: 50px;}

.mgvertical10 {margin: 10px 0 !important;}
.mgt10 {margin-top: 10px;}
.mgt20 {margin-top: 20px;}
.mgt30 {margin-top: 30px;}
.mgt40 {margin-top: 40px;}
.mgt50 {margin-top: 50px;}
.mgb10 {margin-bottom: 10px;}
.mgb20 {margin-bottom: 20px;}
.mgb30 {margin-bottom: 30px;}
.mgb40 {margin-bottom: 40px;}
.mgb50 {margin-bottom: 50px;}


/* 텍스트 정렬 및 위치 */
.clearfix:after {content: "";display: block;clear: both;}
.txt-left {text-align: left !important;}
.txt-center {text-align: center !important;}
.txt-right {text-align: right !important;}
.txt-justify {text-align: justify !important;}
.v-top {vertical-align: top !important;}
.v-mid {vertical-align: middle !important;}
.v-bot {vertical-align: bottom !important;}
.f-left {float: left !important;}
.f-right {float: right !important;}

/* 퍼센트(%) */
.w5p { width: 5% !important;}
.w10p { width: 10% !important;}
.w15p { width: 15% !important;}
.w20p { width: 20% !important;}
.w25p { width: 25% !important;}
.w30p { width: 30% !important;}
.w35p { width: 35% !important;}
.w40p { width: 40% !important;}
.w45p { width: 45% !important;}
.w50p { width: 50% !important;}
.w55p { width: 55% !important;}
.w60p { width: 60% !important;}
.w65p { width: 65% !important;}
.w70p { width: 70% !important;}
.w75p { width: 75% !important;}
.w80p { width: 80% !important;}
.w85p { width: 85% !important;}
.w90p { width: 90% !important;}
.w95p { width: 95% !important;}
.w100p { width: 100% !important;}


/* checkbox- custom (공통) */
.checkbox_radio_custom { display: inline-block; vertical-align: middle; cursor: pointer;}
.checkbox_radio_custom label, .checkbox_radio_custom input {cursor: pointer !important;}
.checkbox_radio_custom label, .checkbox_radio_custom input + label {padding-left: 5px;}
.checkbox_radio_custom input[type=checkbox] {width: 15px; height: 15px; border: 2px solid #000; background: #fff; position: relative; }
.checkbox_radio_custom input[type=checkbox]::after { content: ""; width: 5px; height: 10px; position: absolute; left: 0; top: 6px; border-right: 2px solid #fff; border-top: 2px solid #fff; -webkit-transform-origin: left top; transform-origin: left top;  -webkit-transform: scaleX(-1) rotate(135deg); transform: scaleX(-1) rotate(135deg);}
.checkbox_radio_custom input[type=checkbox]:checked {background: #000;}
.checkbox_radio_custom input[type=checkbox]:checked:after {border-color: #fff; animation: check .5s;}
.checkbox_radio_custom input[type=radio] {width: 15px; height: 15px; border-radius: 50%; border: 1px solid #000; position: relative;}
.checkbox_radio_custom input[type=radio]:checked {background: #fff; border: 2px solid #000;}
.checkbox_radio_custom input[type=radio]:checked:after {content: ""; width: 5px; height: 5px; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #000;}
.checkbox_radio_custom input[type=radio] + label {display: inline-block; vertical-align: middle;}
.checkbox_radio_custom +.checkbox_radio_custom {margin-left: 13px;}

@keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 5px;
  }
  50% {
    height: 10px;
    width: 5px;
  }
}

@keyframes appear {
0%{
  opacity: 0;
  transform: translateY(-20px);
}
}

/* ================================================ */

/* input , select , textarea 기본 스타일 초기화 (호환성 코드 추가)*/
input:focus {outline: none;}
input {-webkit-appearance: none;-moz-appearance: none;appearance: none;outline: none !important; margin: 0; vertical-align: middle;}
input[type="submit"] {-webkit-appearance: none;-moz-appearance: none;appearance: none;}
input[type="text"],
input[type="password"] { -webkit-appearance: none; outline: none;}
input[type="checkbox"] { -webkit-appearance: none; outline: none;}
input:checked[type="checkbox"] {-webkit-appearance: none;}
input[type="radio"] {border: none;-webkit-appearance: none;}
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"] {-webkit-appearance:none;border-radius: 0;}

input[type=search] {-webkit-appearance: none;appearance: none;-webkit-box-sizing: content-box;box-sizing: content-box;font-family: inherit;  font-size: 100%;}
input::-webkit-search-decoration, input::-webkit-search-cancel-button {display: none;}
input::-ms-clear {display: none;} /* IE10 이상 : input box 에 추가된 지우기 버튼 제거 */

/* 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;margin: 0;}
select { -webkit-appearance: none; -moz-appearance: none; appearance: none;} /* Select box 스타일 초기화 */

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

/* Web Accessibility 웹 접근성 code */
/* Skip Navigation */
.skip-to { position: absolute;  overflow: hidden;  width: 100%;  margin: 0 auto;  z-index: 100;  display: block;  height: 0;  margin-top: -2px;  overflow: hidden; text-align: center; font-size: 0; line-height: 0;  background: #3e8fee;}

.skip-to:hover, .skip-to:active, .skip-to:focus {height: auto;  padding: 7px 0;  font-weight: bold;  font-size: 1em;  line-height: 1em;  color: #fff;  z-index: 10000;}
.sr-only { overflow: hidden;  position: absolute; border: 0;  width: 1px;  height: 1px; clip: rect(1px, 1px, 1px, 1px); }
.blind { overflow: hidden; position: absolute; clip: rect(0 0 0 0);  width: 1px;  height: 1px;  margin: -1px;}

/* print */
@media print {
  header,  aside,  #spot,  .cont-bot, footer {display: none; } /*change*/
  body {width: 210mm; height: 297mm; margin: 0; -webkit-print-color-adjust: exact !important; page-break-inside: avoid; }
  * { box-sizing: border-box; -webkit-print-color-adjust: exact !important; color-adjust: exact !important; }
  .pdf-output-wrap {width: 21cm; height: 29.7cm; padding: 0; margin: auto; background: #fff; page-break-after: always !important;page-break-inside: avoid !important; }
  .contents { width: 100% !important } /*change*/
  table, figure, .sector {width: 100%; page-break-inside: avoid; }
  table {page-break-inside: auto; width: 90%;}
  tr { page-break-inside: avoid; page-break-after: auto;}
  thead {display: table-header-group;}
  tfoot { display: table-footer-group; }
}
@page {
	margin: 0; /*머리글,바닥글 제거*/
    size: auto;
    size: portrait;
    size: landscape;
    size: 6in; 
    size: 4in 6in;
    size: A4;
    size: B5;
    size: letter;
    size: A4 portrait;
}