@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'Noto Sans Korean';
    font-style: normal;
    font-weight: 100;
    src: url(../fonts/NotoSansKR-Thin-Hestia.eot);
	src: url(../fonts/NotoSansKR-Thin-Hestia.eot?#iefix) format('embedded-opentype'),
      url(../fonts/NotoSansKR-Thin-Hestia.woff) format('woff'),
      url(../fonts/NotoSansKR-Thin-Hestia.ttf) format('truetype');
}
@font-face {
    font-family: 'Noto Sans Korean';
    font-style: normal;
    font-weight: 300;
    src: url(../fonts/NotoSansKR-Light-Hestia.eot);
   src: url(../fonts/NotoSansKR-Light-Hestia.otf) format('embedded-opentype'),
      url(../fonts/NotoSansKR-Light-Hestia.woff) format('woff'),
      url(../fonts/NotoSansKR-Light-Hestia.ttf) format('truetype');
}
@font-face {
    font-family: 'Noto Sans Korean';
    font-style: normal;
    font-weight: 350;
    src: url(../fonts/NotoSansKR-DemiLight-Hestia.eot);
   src: url(../fonts/NotoSansKR-DemiLight-Hestia.otf) format('embedded-opentype'),
      url(../fonts/NotoSansKR-DemiLight-Hestia.woff) format('woff'),
      url(../fonts/NotoSansKR-DemiLight-Hestia.ttf) format('truetype');
}
@font-face {
    font-family: 'Noto Sans Korean';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/NotoSansKR-Regular-Hestia.eot);
   src: url(../fonts/NotoSansKR-Regular-Hestia.otf) format('embedded-opentype'),
      url(../fonts/NotoSansKR-Regular-Hestia.woff) format('woff'),
      url(../fonts/NotoSansKR-Regular-Hestia.ttf) format('truetype');
}
@font-face {
    font-family: 'Noto Sans Korean';
    font-style: normal;
    font-weight: 500;
    src: url(../fonts/NotoSansKR-Medium-Hestia.eot);
   src: url(../fonts/NotoSansKR-Medium-Hestia.otf) format('embedded-opentype'),
      url(../fonts/NotoSansKR-Medium-Hestia.woff) format('woff'),
      url(../fonts/NotoSansKR-Medium-Hestia.ttf) format('truetype');
}
@font-face {
    font-family: 'Noto Sans Korean';
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/NotoSansKR-Bold-Hestia.eot);
   src: url(../fonts/NotoSansKR-Bold-Hestia.otf) format('embedded-opentype'),
      url(../fonts/NotoSansKR-Bold-Hestia.woff) format('woff'),
      url(../fonts/NotoSansKR-Bold-Hestia.ttf) format('truetype');
}
@font-face {
    font-family: 'Noto Sans Korean';
    font-style: normal;
    font-weight: 900;
    src: url(../fonts/NotoSansKR-Black-Hestia.eot);
   src: url(../fonts/NotoSansKR-Black-Hestia.eot?#iefix) format('embedded-opentype'),
      url(../fonts/NotoSansKR-Black-Hestia.woff) format('woff'),
      url(../fonts/NotoSansKR-Black-Hestia.ttf) format('truetype');
}
@font-face {
    font-family: 'InkLipquid';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/InkLipquid.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* css Reset */
html, body{height:100%;margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption{display:block;}
body{margin:0;padding:0;font-family: 'Noto Sans Korean' !important;font-size: 16px;font-weight:400;color:#444;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;letter-spacing: -0.040em;/* background: #e3e9e7; */}
p,div,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,button,code,label,em,span,strong{margin:0;padding:0;border:0;color:inherit;word-break:break-all;}
input,textarea,select{margin:0;padding:0;border: 1px solid #b7c2c6;font-size:inherit;color:inherit;/* letter-spacing:-.2px; */word-break:break-all;font-family: 'Noto Sans Korean';font-size: 15px;}
form{/* display: block; */margin:0;}
img,fieldset{border:0}
hr{display:none}
li{list-style:none}
em,address{font-style:normal}
label,input,textarea{vertical-align:middle;-webkit-appearance:none;/* letter-spacing: -0.04em; */}
legend{position:absolute;left:-5000px;font-size:0;overflow:hidden}
em, strong{font-weight:500;}
caption, .hide{/* position: absolute; */padding: 0 !important;height:0;line-height:0;text-indent:-5000px;/* overflow:hidden; */font-size: 0;}
.blind {position: absolute;overflow: hidden;clip: rect(0 0 0 0);margin: -1px;width: 1px;height: 1px;}
.hidden{display:block; height: 0; width: 0; font-size: 0; line-height: 0; margin: 0; padding: 0; overflow:hidden;}
a{text-decoration:none;color:inherit;}
a:hover{text-decoration:none;}
label, input, button, select, img {margin: 0;vertical-align:middle;}
select{min-width: 100px;height: 36px;padding: 7px 0 !important;border-radius: 6px;}
.ui-datepicker select{min-width:auto;}
table{width: 100%;border-collapse: collapse;border-spacing: 0;table-layout: fixed;text-align: center;}
.inkLipquid{font-family: 'InkLipquid';}
.msg-sound-only, .sound-only {display: inline-block !important;position: absolute;top: 0;left: 0;margin: 0 !important;padding: 0 !important;font-size: 0;line-height: 0;border: 0 !important;overflow: hidden !important;}
.monts{font-family: 'Montserrat', sans-serif;}
.uppe{text-transform:uppercase;}

button{border:0;cursor:pointer;outline:none;}
button.focus{outline:1px solid #3d5f96;}
img.no-image{width: calc(100% - 2px) !important;/* height: 298px !important; */border: 1px solid #d1d2d7;/* border-radius: 7px; */background:url(../images/common/bg-noimage.png) center center no-repeat;transition: none !important;}
ul li.no-data{width: 100% !important;}
ul li.no-data:after{display:none;}
ul li.no-bul{padding-left: 0 !important;}
ul li.no-bul:after{display:none !important;}

input[type="button"],input[type="text"],input[type="image"],input[type="submit"],input[type="password"],input[type="tel"],input[type="number"],input[type="email"], input[type="url"],textarea{display: inline-block;min-width: 100px;-webkit-appearance:none;-moz-appearance:none;border: 1px solid #c3c3ca;border-radius:0;box-sizing:border-box;outline:none;padding: 11px 6px;font-family: 'Noto Sans Korean';font-weight: 400;font-size: 15px;}
input[type="text"], input[type="password"]{/* min-width: 300px; */}
input[type="file"]{padding: 3px;}
input[type="checkbox"]{-webkit-appearance:checkbox;-moz-appearance:checkbox;}
input[type="radio"]{-webkit-appearance:radio;-moz-appearance:radio;}
input[readonly="readonly"]{background: #f1f1f1;}
textarea{resize:none;box-sizing:border-box;}
.input-block{width:100%;min-width: auto;}
input.input-sm{
    padding: 5px !important;
    border-radius: 4px !important;
}
input[type="file"].input-block{width: calc(100% - 7px);}

#captcha.captcha{position: relative;}
#captcha.captcha img{width: 113px;margin-right: 30px;border: 1px solid #c3c3ca;}
#captcha_mp3{position: absolute;top: 0;left: 114px;width: 23px;height: 22px;background:url(../images/sub/ico-write-sound.gif) 0 0 no-repeat;}
#captcha_reload{position: absolute;top: 22px;left: 114px;width: 23px;height: 22px;background:url(../images/sub/ico-write-reload.gif) 0 0 no-repeat;}

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

.block{display: block !important;float: none !important;}
.inline-block{display: inline-block !important;}
.none{display: none;}

.float-left{float:left !important;}
.float-right{float:right !important;}
.float-none{clear: both !important;float:none !important;}
.none-after:after{display:block;clear:both;content:"";}

.vm{vertical-align:middle !important;}
.vt{vertical-align:top !important;}

/* btn-group */
.btn-group {/* display: block !important; */position: relative;height: 38px;/* margin: 0; */margin-top: 30px;}
.btn-group.btn-sm-group{height: 36px;}
.btn-group .btn{float: left;margin: 0 2px !important;}
.btn-group.top{margin-top:0;}
.btn-group:after{display:block; clear:both; content:"";}
.btn-group .left{float: left;}
.btn-group .right{float: right;}
.btn-group .text-left a.btn{margin: 0 10px 0 0 !important;}
.btn-group .text-right a.btn{margin: 0 0 0 10px !important}
.btn-group.text-center .btn{float:none;}
.relative {position: relative;/* top: 0; *//* left: 0; *//* display: block; */}
.absolute {position: absolute; top: 0; left: auto; right: 0;}

.left {right: auto !important; left: 0 !important;}
.right {right: 0 !important; left: auto !important;}
.btn-group .left a, .btn-group .left input, .btn-group .left button {float:left; margin-right: 5px;}
.btn-group .right a, .btn-group .right input, .btn-group .right button {float:left;margin-left: 10px !important;}

.btn, a.btn, button.btn, input.btn {display: inline-block;min-width: auto;cursor: pointer;font-family: 'Noto Sans Korean';border-radius: 8px;padding: 6px 30px;border: 1px solid #dcdada;background: #e3e9e7;color: #334150;font-size: 16px;/* font-weight: 400; */letter-spacing: -0.040em;vertical-align: middle;}
.btn.btn-sm, a.btn.btn-sm, input.btn.btn-sm, button.btn.btn-sm {padding: 7px 15px;border-radius: 6px;font-size: 14px;}
.btn.btn-xs, a.btn.btn-xs, input.btn.btn-xs, button.btn.btn-xs {padding: 2px 8px;border-radius: 3px;font-size: 14px;}
.btn-block {display: block !important;width: 100%;}
.btn.btn-gray {border: 1px solid #6e7180;background: #6e7180;color: #fff;}
.btn.btn-light-gray {border: 1px solid #b0b0b0;background: #b0b0b0;color: #fff;}
.btn.btn-gray:hover, .btn.btn-gray:focus{background: #5d5f6c}
.btn.btn-dark-gray {border: 1px solid #4f5462;background: #404554;color: #fff;}
.btn.btn-black {border: 1px solid #4f5462;background: #313541;color: #fff;}
.btn.btn-blue-green {border: 1px solid #008b93;background: #008b93;color: #fff;}
.btn.btn-green-green {border: 1px solid #009583;background: #009583;color: #fff;}
.btn.btn-green {border: 1px solid #007f54;background: #007f54;color: #fff;}
.btn.btn-light-green {border: 1px solid #00b550;background: #00b550;color: #fff;}
.btn.btn-light-red {border: 1px solid #ee3d5a;background: #ee3d5a;color: #fff;}
.btn.btn-red {border: 1px solid #ee3d5a;background: #ee3d5a;color: #fff;}
.btn.btn-red:hover, .btn.btn-red:focus{background: #d1354e;}
.btn.btn-yellow {border: 1px solid #ffb400;background: #ffb400;color: #fff;}
.btn.btn-light-yellow {border: 1px solid #ffff00;background: #ffff00;color: #000000;}
.btn.btn-light-blue {border: 1px solid #4fc3f7;background: #4fc3f7;color: #fff;}
.btn.btn-orange {border: 1px solid #ffa500;background: #ffa500;color: #fff;}
.btn.btn-light-orange {border: 1px solid #fbceb1;background: #fbceb1;color: #fff;}
.btn-group .absolute .btn:last-child{margin-right: 0 !important;}
.btn-group .relative .btn:first-child{margin-left: 0 !important;}
.btn, a.btn-white, button.btn-white, input.btn-white{border: 1px solid #c3c3c3;background: #fff;color: #333;}
.m-btn{padding: 7px 0 !important;border-width: 2px !important;text-align: center;}

.btn.btn-orange-n {border: 1px solid #fb9d42;background: #fb9d42;color: #fff;}
.btn.btn-blue-n {border: 1px solid #6a86f4;background: #6a86f4;color: #fff;}
.btn.btn-green-n {border: 1px solid #509f5e;background: #509f5e;color: #fff;}
.btn.btn-gray-n {border: 1px solid #a8a8a8;background: #a8a8a8;color: #fff;}
.btn.btn-olive-n {border: 1px solid #9f9b40;background: #9f9b40;color: #fff;}

/* color */
.color-or{color:#333 !important;}
.color-white{color:#fff !important;}
.color-red{color: #ee4661 !important;}
.color-blue-green{color: #008b93 !important;}
.color-green{color: #2bac3d !important;}
.color-yellow{color: #eda800 !important;}
.color-lighr-gray{color: #6b747e;}

/* round-text */
.r-text{
	display: inline-block;
	position:relative;
	margin-right: 8px;
	font-size: 14px;
	z-index:0;
}
.r-text:after{
    display:block;
    content:"";
    position:absolute;
    top: 0px;
    left: -4px;
    width: 21px;
    height: 21px;
    border-radius: 25px;
    z-index:-1;
}
.round-gray{color: #fff;}
.round-gray:after{ background: #6e7180;}
.round-yellow{color: #313541;}
.round-yellow:after{background: #fdcc50;}

span.color-red.font20 {
    display: inline-block;
    line-height: 1;
    font-size: 20px !important;
    vertical-align: middle;
}

/* 사이즈 */
.wauto{width: auto !important;}
.w10{width:10% !important;}
.w15{width:15% !important;}
.w20{width:20% !important;}
.w25{width:25% !important;}
.w30{width:30% !important;}
.w40{width:40% !important;}
.w45{width:45% !important;}
.w50{width:50% !important;}
.w55{width:55% !important;}
.w60{width:60% !important;}
.w70{width:70% !important;}
.w80{width:80% !important;}
.w90{width:90% !important;}
.w100{width:100% !important;}
.w33{width: 33.33% !important;}

.w10px{width:10px !important;}
.w20px{width:20px !important;}
.w30px{width:30px !important;}
.w40px{width:40px !important;}
.w50px{width:50px !important;}
.w60px{width:60px !important;}
.w70px{width:70px !important;}
.w80px{width:80px !important;}
.w90px{width:90px !important;}
.w100px{width:100px !important;}
.w110px{width:110px !important;}
.w120px{width:120px !important;}
.w130px{width:130px !important;}
.w140px{width:140px !important;}
.w150px{width:150px !important;}
.w160px{width:160px !important;}
.w170px{width:170px !important;}
.w180px{width:180px !important;}
.w190px{width:190px !important;}
.w200px{width:200px !important;}
.w250px{width:250px !important;}
.w300px{width:300px !important;}
.w350px{width:350px !important;}
.w400px{width:400px !important;}
.w410px{width:410px !important;}
.w450px{width:450px !important;}

.w500px{width:500px !important;}
.w510px{width:510px !important;}
.w520px{width:520px !important;}
.w530px{width:530px !important;}
.w540px{width:540px !important;}
.w550px{width:550px !important;}
.w600px{width:600px !important;}
.w610px{width:610px !important;}
.w650px{width:650px !important;}
.w700px{width:700px !important;}
.w750px{width:750px !important;}
.w800px{width:800px !important;}
.w850px{width:850px !important;}
.w900px{width:900px !important;}
.w950px{width:950px !important;}
.w1000px{width:1000px !important;}

.mg0px{margin: 0 !important;}

.mgt0px{margin-top:0px !important;}
.mgt5px{margin-top:5px !important;}
.mgt10px{margin-top:10px !important;}
.mgt15px{margin-top:15px !important;}
.mgt18px{margin-top:18px !important;}
.mgt20px{margin-top:20px !important;}
.mgt30px{margin-top:30px !important;}
.mgt40px{margin-top:40px !important;}
.mgt50px{margin-top:50px !important;}
.mgt60px{margin-top:60px !important;}
.mgt70px{margin-top:70px !important;}
.mgt80px{margin-top:80px !important;}
.mgt90px{margin-top:90px !important;}
.mgt100px{margin-top:100px !important;}

.mgb0px{margin-bottom:0 !important;}
.mgb5px{margin-bottom:5px !important;}
.mgb10px{margin-bottom:10px !important;}
.mgb20px{margin-bottom:20px !important;}
.mgb30px{margin-bottom:30px !important;}
.mgb40px{margin-bottom:40px !important;}
.mgb50px{margin-bottom:50px !important;}
.mgb60px{margin-bottom:60px !important;}
.mgb70px{margin-bottom:70px !important;}
.mgb80px{margin-bottom:80px !important;}
.mgb90px{margin-bottom:90px !important;}
.mgb100px{margin-bottom:100px !important;}

.mgl0px{margin-left:0 !important;}
.mgl5px{margin-left:5px !important;}
.mgl10px{margin-left:10px !important;}
.mgl20px{margin-left:20px !important;}
.mgl30px{margin-left:30px !important;}
.mgl40px{margin-left:40px !important;}
.mgl50px{margin-left:50px !important;}
.mgl60px{margin-left:60px !important;}
.mgl70px{margin-left:70px !important;}
.mgl80px{margin-left:80px !important;}
.mgl90px{margin-left:90px !important;}
.mgl100px{margin-left:100px !important;}

.mgr0px{margin-right:0 !important;}
.mgr5px{margin-right:5px !important;}
.mgr10px{margin-right:10px !important;}
.mgr20px{margin-right:20px !important;}
.mgr30px{margin-right:30px !important;}
.mgr40px{margin-right:40px !important;}
.mgr50px{margin-right:50px !important;}
.mgr60px{margin-right:60px !important;}
.mgr70px{margin-right:70px !important;}
.mgr80px{margin-right:80px !important;}
.mgr90px{margin-right:90px !important;}
.mgr100px{margin-right:100px !important;}

.pdt0px{padding-top:0 !important;}
.pdt10px{padding-top:10px !important;}
.pdt15px{padding-top:15px !important;}
.pdt20px{padding-top:20px !important;}
.pdb0px{padding-bottom:0 !important;}

/* checkbox */
input[type="checkbox"],
input[type="radio"] {
  border: 0;
  /*   clip: rect(0 0 0 0); clip이 잡혀있어 체크칸이 보이지 않는 문제 발생해서 수정  */
  clip:auto;
  height: 1px;
  margin: 0 3px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.input-box input[type="checkbox"],
.input-box input[type="radio"]{
	/* height:auto; */
	margin:0;
	overflow:auto;
	position:relative;
	width:auto;
	border:1px solid #ddd;
	clip:auto;
	height:auto;
}
input[type="checkbox"]:hover + label:before,
input[type="radio"]:hover + label:before {
  border-color: #999;
}
input[type="checkbox"]:active + label:before,
input[type="radio"]:active + label:before {
  transition-duration: 0;
  filter: brightness(0.2);
}
input[type="checkbox"] + label,
input[type="radio"] + label {
  position: relative;
  padding-left: 16px;
  font-weight: normal;
  vertical-align: top;
}
input[type="checkbox"] + label:before, input[type="checkbox"] + label:after,
input[type="radio"] + label:before,
input[type="radio"] + label:after {
  box-sizing: content-box;
  position: absolute;
  content: '';
  display: block;
  left: 0;
}
input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -6px;
  border: 1px solid #ddd;
  border-radius: 2px;
  background: #fff;
  text-align: center;
}
input[type="checkbox"] + label:after,
input[type="radio"] + label:after {
  background-color: #008b93;
  top: 50%;
  left: 8px;
  width: 7px;
  height: 7px;
  margin-top: -3px;
  transform: scale(0);
  transform-origin: 50%;
  transition: transform 200ms ease-out;
}

input[type="radio"]:checked + label:before {
  -moz-animation: borderscale 300ms ease-in;
  -webkit-animation: borderscale 300ms ease-in;
  animation: borderscale 300ms ease-in;
  background-color: #fff;
}
input[type="radio"]:checked + label:after {
  transform: scale(1.5);
}
input[type="radio"] + label:before, input[type="radio"] + label:after {
 	border-radius: 50%;
}

input[type="checkbox"] + label:after {
	background-color: transparent;
	top: 50%;
	left: 3px;
	width: 7px;
	height: 4px;
	margin-top: -4px;
	border-style: solid;
	border-color: #ffffff;
	border-width: 0 0 3px 3px;
	-moz-transform: rotate(-45deg) scale(0);
	-ms-transform: rotate(-45deg) scale(0);
	-webkit-transform: rotate(-45deg) scale(0);
	transform: rotate(-45deg) scale(0);
	-moz-transition: none;
	-o-transition: none;
	-webkit-transition: none;
	transition: none;
}
input[type="checkbox"]:checked + label:before {
	-moz-animation: borderscale 200ms ease-in;
	-webkit-animation: borderscale 200ms ease-in;
	animation: borderscale 200ms ease-in;
	border: 1px solid #008b93;
	background: #008b93;
}
input[type="checkbox"]:checked + label:after {
	content: '';
	-moz-transform: rotate(-45deg) scale(1);
	-ms-transform: rotate(-45deg) scale(1);
	-webkit-transform: rotate(-45deg) scale(1);
	transform: rotate(-45deg) scale(1);
	-moz-transition: -moz-transform 200ms ease-out;
	-o-transition: -o-transform 200ms ease-out;
	-webkit-transition: -webkit-transform 200ms ease-out;
	transition: transform 200ms ease-out;
}