@charset "utf-8";
/*
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(http://cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/nanumbarungothic.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(http://cdn.jsdelivr.net/nanumsquare/1.0/nanumsquare.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('./pretendard.css');

@font-face {
    font-family: 'MaruBuri';
    font-weight: 100; 
    font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/naver/MaruBuri-ExtraLight.woff2) format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'MaruBuri';
    font-weight: 300; 
    font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/naver/MaruBuri-Light.woff2) format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'MaruBuri';
    font-weight: 400; 
    font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/naver/MaruBuri-Regular.woff2) format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'MaruBuri';
    font-weight: 500; 
    font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/naver/MaruBuri-SemiBold.woff2) format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'MaruBuri';
    font-weight: 700; 
    font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/naver/MaruBuri-Bold.woff2) format('woff2');
    font-display: swap;
}

body		{ font-family: 나눔스퀘어, 'NanumSquare', sans-serif; font-family: 'NanumSquareRound', sans-serif; font-family: 'MaruBuri'; }
.normal		{ font-weight: 400 }
.bold		{ font-weight: 700 }
.bolder		{ font-weight: 800 }
.light		{ font-weight: 300 }




@import url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css');
@import url('https://cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.min.css');
@import url('https://webfontworld.github.io/naver/MaruBuri.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

*/

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('./pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@font-face {
    font-family: 'GowunDodum-Regular';
    src: url('https://cdn.jsdelivr.net/gh/fontbee/font@main/Ryuyanghee/GowunDodum-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* { font-family: 'Pretendard','Jost', sans-serif; }

/* Reset */
html,body{height:100%;/*line-height:18px;*/}
*,body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select,a {margin:0;padding:0;box-sizing:border-box;}

body, th, td, div, p, li, dt, dd, input, textarea, select, button, a {
  color:#000; font-size:1rem; line-height:1; 
 font-family: 'Pretendard','Jost', sans-serif;

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

fieldset, img, area {border:0 none;vertical-align:top;}
ul, ol {list-style:none;}
h1,h2,h3,h4,h5,h6 {font-size:14px;font-weight:normal;text-align:left;}
hr {display:none;}
a:link, a:visited, a:active {color:#111;text-decoration:none;box-sizing:border-box;}
a:hover {color:#111;text-decoration:none;}

caption, th {text-align:left;font-weight:normal;}
legend, caption {overflow:hidden;left:0;top:-5000px;width:0;height:0;font-size:0;line-height:0;display:none;}

button,label{cursor:pointer;}
button {display:inline-block;border:0;vertical-align:top;}
button img{left:-3px;*left:auto}
button * {position:relative;}
button span {z-index:-1;}
textarea{*margin:-1px 0;resize:none;}
em,address{font-style:normal}

table {width:100%;}
table, table th, table td {border-collapse:collapse;border-spacing:0;}
table td a {text-decoration:underline;}

/*
a:active {outline:none;}
a {outline:none;}
a {selector-dummy: expression(this.hideFocus=true);}
*/
/* Common */
.cfx:after{display:block;clear:both;content:"";}
.cfx{zoom:1;overflow:hidden;}

.overh {overflow:hidden;clear:both;}
.clear{display:block; float:none; clear:both; height:0; width:100%; font-size:0 !important; line-height:0 !important; overflow:hidden; margin:0 !important; padding:0 !important;}
.blind {position:absolute;left:0;top:0;width:0;height:0;overflow:hidden;font-size:0;line-height:0;visibility:hidden;}

.vt {vertical-align:top;}
.vm {vertical-align:middle;}
.fl {float:left;}
.fr {float:right;}
.tl {text-align:left !important;}
.tr {text-align:right;}
.tc {text-align:center !important;}
.spacing {letter-spacing:normal !important;}

.bgn {background:0 !important;}

.hide {display:none;}
.show {display:block;}

/* placeholder */
input::placeholder {
  color: #b6b6b6;
}

input[type="text"], button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
		  outline: 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; }
 */

/* 
 .scroll {
   -ms-overflow-style: none;
 }
 .scroll::-webkit-scrollbar {
   display: none;
 } */

.select{
    border: 1px solid #C4C4C4;
    box-sizing: border-box;
    border-radius: 10px;
    padding: 5px 6px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
}

.select:focus{
    border: 1px solid #eee;
    box-sizing: border-box;
    border-radius: 10px;
    outline: 2px solid #bdbdbd;
}


.w10p { width:10%;}
.w20p { width:20%;}
.w30p { width:30%;}
.w40p { width:40%;}
.w50p { width:50%;}
.w60p { width:60%;}
.w70p { width:70%;}
.w80p { width:80%;}
.w90p { width:90%;}
.w95p { width:95%;}
.w100p { width:100%;}

.w10 { width:10px;}
.w20 { width:20px;}
.w30 { width:30px;}
.w40 { width:40px;}
.w50 { width:50px;}
.w80 { width:80px;}
.w90 { width:90px;}
.w100 { width:100px;}
.w120 { width:120px;}
.w140 { width:140px;}
.w150 { width:150px;}
.w160 { width:160px;}
.w170 { width:170px;}
.w180 { width:180px;}
.w200 { width:200px;}
.w210 { width:210px;}
.w220 { width:220px;}
.w240 { width:240px;}
.w250 { width:250px;}
.w260 { width:260px;}
.w270 { width:270px;}
.w280 { width:280px;}
.w300 { width:300px;}
.w400 { width:400px;}


.video {
  width: 100%;
  max-width: 1050px;
  margin: 30px auto;
  border-radius: 30px;
  padding: 30px 0px;
  /*
  background-color: #f0f0f0;
  box-sizing: border-box;
  box-shadow: 0px 8px 33px #999;
  */
}

.video-container {
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 50%;
}


.video-container iframe {
  z-index: 1;
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}


/* layer popup */
.popup-layer {display:none;width:50%;background-color:#fff;padding-top:5px;padding-bottom:40px;}
.popup-layer .popup-layer-top {padding:20px;margin-bottom:10px;}
.popup-layer p.data-title {float:left;padding-left:5px;font-size:18px;}
.popup-layer p b {font-weight:800;}
.popup-layer span {float:right;padding-right:5px;cursor:pointer;}
.data-content {width:100%;background-color:#fff;padding:20px;text-align:center;}
.popup-layer table {border-top:solid 2px #505050;}
.popup-layer table tr {border-bottom:solid 1px #eee;}
.popup-layer table tr th {padding:5px; text-align:center; font-weight:700;font-size:14px;}
.popup-layer table tr td {padding:10px; text-align:center; font-size:14px;}

@media all and (max-width:800px) {
	.popup-layer {display:none;width:100%;background-color:#fff;padding-top:5px;padding-bottom:40px;}
	.popup-layer .popup-layer-top {padding:20px;margin-bottom:10px;}
	.popup-layer p.data-title {float:left;padding-left:5px;font-size:18px;}
	.popup-layer p b {font-weight:800;}
	.popup-layer span {float:right;padding-right:5px;cursor:pointer;}
	.data-content {width:100%;background-color:#fff;padding:20px;text-align:center;}
	.data-content img {width:100%;}
	.popup-layer table {border-top:solid 2px #505050;}
	.popup-layer table tr {border-bottom:solid 1px #eee;}
	.popup-layer table tr th {padding:5px; text-align:center; font-weight:700;font-size:14px;}
	.popup-layer table tr td {padding:10px; text-align:center; font-size:14px;}
}




/* 툴팁 기본 */
.tooltip {
  position: relative;
  display: block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  background-color: black;
  color: #fff;
  font-size:14px;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0 8px;

  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

/* 툴팁 화살표 기본 스타일 설정  */
.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  border-style: solid;
  border-width: 5px;
}

/* 왼쪽 툴팁 */
.tooltip .tooltip-left {
  width: 120px;
  top: 0px;
  right: 105%;
}

.tooltip .tooltip-left::after {
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-color: transparent transparent transparent black;
}

/* 오른쪽 툴팁 */

.tooltip .tooltip-right {
  top: -5px;
  left: 105%;
}

.tooltip .tooltip-right::after {
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-color: transparent black transparent transparent;
}

/* 위쪽 툴팁 */
.tooltip .tooltip-top {
  width: 120px;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltip-top::after {
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-color: black transparent transparent transparent;
}

/* 아래쪽 툴팁 */
.tooltip .tooltip-bottom {
  width: 120px;
  top: 150%;
  left: 50%;
  margin-left: -60px;
}


.tooltip .tooltip-bottom::after {
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-color: transparent transparent black transparent;
}


.qm { position:fixed; right:20px; bottom:30px; z-index:9999; transition: all 0.5s ease-out;}
.qm a { display:block; margin-bottom:14px; width:60px; height:60px; }
.qm a img { width:100%; }



.infoBox h3 { font-size:50px; font-weight:600; color:#000; padding:100px 0 70px;  border-bottom:2px solid #000;}
.infoBox article:nth-of-type(1) { border-top:none; }
.infoCon { padding:70px 0; border-top:1px solid #d9d9d9; display:flex; }
.infoCon h4 { font-weight:600; color:#000; font-size:30px; flex:0 0 220px; }
.infoCon ul { flex:1; }
.infoCon ul li { margin-top:35px; display:flex; line-height:1.3;}
.infoCon ul li:nth-child(1) { margin-top:0; }
.infoCon ul li strong { font-weight:500; font-size:17px; flex:0 0 265px; line-height:1.3;}
.infoCon ul li span { font-weight:400; font-size:17px; flex:1;  }
.infoCon ul li span p { line-height:1.3;}

.infoCon ul li span.tip { color:#999; }


@media(max-width:1200px){
	.infoBox h3 { font-size:40px; padding:80px 0 50px;}
	.infoCon { padding:60px 0; }
	.infoCon h4 {  flex:0 0 240px; }
}

@media(max-width:978px){
	.infoBox h3 { font-size:35px; padding:80px 0 50px;}
	.infoCon { padding:50px 0; flex-wrap:wrap; }
	.infoCon h4 { font-weight:600; flex:0 0 100%; padding-bottom:40px; }
	.infoCon ul li { margin-top:20px; }
	.infoCon ul li strong { flex:0 0 170px;}
}

@media(max-width:640px){
	.infoBox h3 { font-size:32px; padding:70px 0 40px;}
	.infoCon h4 { font-size:26px; }
	.infoCon ul li { margin-top:20px; display:flex; line-height:1.3;}
	.infoCon ul li:nth-child(1) { margin-top:0; }
	.infoCon ul li strong { font-size:15px; flex:0 0 160px;}
	.infoCon ul li span { font-size:15px; }
}



.code {font-size:11px;color:#969696;}
.blod {font-weight:700;}

.state_name {font-size:12px;padding:4px 6px;margin-right:2px;border-radius:7px;}
.icon_name {font-size:11px;padding:4px 4px;margin-right:2px;border-radius:5px;}
.tag_name {background:#ddd; font-size:11px;padding:4px 4px;margin-right:2px;border-radius:5px;}
.border_name {border:solid 1px #0099cc;font-size:11px;padding:3px 3px;margin-right:2px;border-radius:5px;}
.item_name {background:#ddd; font-size:14px;padding:8px 8px;margin-right:2px;border-radius:10px;}
.state_tag {background:#ddd;font-size:11px;padding:4px 6px;margin-right:2px;border-radius:7px;white-space:nowrap;}

.s-red {background:#ff0000; color:#fff;}
.s-gray {background:#ddd; color:#000;}
.s-black {background:#000; color:#fff;}
.s-blue {background:#0066cc; color:#fff;}
.s-green {background:#009900; color:#fff;}
.s-orange {background:#ff9900; color:#000;}
.s-yellow {background:#ffe100; color:#000;}
.s-brown {background:#990066; color:#fff;}
.s-purple {background:#9900ff; color:#fff;}
.s-pink {background:#ff00ff; color:#000;}
.s-white {background:#fff; color:#000; border:solid 1px #ddd;}

.f-red {color:#ff0000;}
.f-gray {color:#ddd;}
.f-black {color:#000;}
.f-blue {color:#0066cc; }
.f-green {color:#009900;}
.f-orange {color:#ff9900;}
.f-brown {color:#990066;}
.f-purple {color:#9900ff;}
.f-pink {color:#ff00ff;}
.pointer {cursor:pointer;}

a.btn-small {border:solid 1px #c0c0c0;padding:5px 5px;border-radius:5px;}
a.btn-small:hover {border:solid 1px #ff6600;color:#ff6600;}