@charset "utf-8";
/*-------------------------------------------------
General Style Sheet / Plani MX J
-------------------------------------------------*/
*, *:before, *:after {box-sizing: border-box;}
html {margin: 0; padding: 0; font-size: 10px; overflow-y: scroll; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none;box-sizing:border-box;}
body {margin: 0; padding: 0; color: #444;  line-height: 1.4; font-size: 1.6rem; font-family: Pretendard, "맑은 고딕", Malgun Gothic, "돋움", Dotum, "굴림", Gulim, Tahoma, Verdana, AppleGothic, UnDotum, sans-serif; font-weight: 400;}
header, footer, article, section, aside, nav, main{display:block;}
mark{background-color:#fff;}
a {color: inherit; text-decoration: none;}
a:hover {text-decoration: underline;}
a[href*=tel]{color: inherit;}
img{border:none;}
img[usemap] {max-width: 100%;width: auto; height: auto; }/* 반응형시 이미지 맵*/
h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, figure {margin:0;padding:0;list-style:none;}
h1, h2, h3, h4, h5, h6, strong {font-weight: 700;}
em, address, i {font-style: normal;}
hr{display: block; margin: 0; padding: 0; border: none;}
iframe {margin:0; padding:0; border:currentcolor; border-image-source:none;}
form{margin:0; padding:0;}
fieldset{margin:0; padding:0; border:none;}
legend{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0); border:0;}
select, input, textarea {min-height: 3.6rem; padding: .75rem 1.2rem; background-color: #fff; border: 1px solid #D0D5DD; border-radius: 0.5rem; color: #27303F; vertical-align: middle; font-size:  inherit; font-family: inherit; font-weight: inherit; appearance: none; -webkit-appearance: none; -moz-appearance: none; }
select {position: relative; padding-right: 3rem; background: #fff url(../../images/common/bbs/select_arrow.png) no-repeat right center;}
select[multiple="multiple"]	 {height: auto;}
select::-ms-expand { display: none;}
select:focus, input:focus, textarea:focus  { border-color: #4d90fe;}
input[type="date"] {padding-top: 0.7rem; padding-bottom: 0.7rem;}
input[type="radio"], input[type="checkbox"], input[type="image"]{width: 1.8rem; height: 1.8rem; min-height: inherit; margin: 0; padding: 0; border-color: transparent;}
input[type="submit"], input[type="button"] {min-height: inherit; cursor:pointer;}
select[disabled="disabled"], input[readonly="readonly"], input[readonly], input[disabled="disabled"], input[disabled], select[readonly], textarea[readonly]   {background-color: #F6F7FA; color: #667183;}
:-ms-input-placeholder {color: #999; font-size: 1.5rem;}
::-webkit-input-placeholder {color: #999; font-size: 1.5rem;}
:-moz-placeholder {color: #999; font-size: 1.5rem;}
::-moz-placeholder {color: #999; font-size: 1.5rem;}
* button{position:relative;display:inline-block;margin:0;padding:0;background:none;border:0;cursor:pointer;_cursor:hand;text-decoration:none; overflow: visible; font-size: inherit; font-family: inherit; font-weight: inherit; white-space: nowrap;}

/* skip navgation STYLE */
#accessibility{position:relative;width:100%;margin:0 auto;font-size: 15px;z-index:200;}
#accessibility dt{width:100%;height:0; font-size:0;line-height:0;}
#accessibility a{display:block;position:absolute;top:-10000px;left:0;width:100%;height:0;text-align:center;font-size:1em;z-index:200;}
#accessibility a:hover, #accessibility a:focus, #accessibility a:active{position:absolute;top:0;padding: 10px 0 25px;background:#1d60a7;color:#fff;z-index:200;}

/* 테이블 STYLE */	
caption {width: 100%; height: 1px; margin: -1px; color: transparent; clip:rect(0,0,0,0); overflow:hidden;}
table {width: calc(100% + 2px); margin: 0 -1px;  border-spacing: 0; border-collapse: collapse;}
table th {padding: 1.2rem 2rem; white-space: nowrap; text-align:center; font-weight: 700;}
table td {padding: 1.2rem 2rem; white-space: normal; }

.full-cont{display:inline-block;position:relative;width:100%;}
.full-cont::before{display:table-cell;position:absolute;top:0;left:50%;width:127%;height:100%;-webkit-transform:translateX(-50%);transform:translateX(-50%);content:"";z-index:-1;}

/* Float STYLE*/
[class*="float-wrap"] {clear: both; overflow: hidden;}
.float-wrap02 {margin-top: 2.5rem;}
.clear  {clear: both;}
.float-left {float: left;}
.float-right {float: right;}
.display-none {display: none;}
.display-block {display: block;}
.display-inline {display: inline-block;}
.display-flex {display: flex; flex-flow: row wrap; align-items: center;}
.vertical-top {vertical-align: top;}
.vertical-middle {vertical-align: middle;}
.vertical-img {display: inline-block; margin-right: 10px;vertical-align: middle;}	

/* 폰트정렬 STYLE*/
.txt-center {text-align: center;}
.txt-left {text-align: left;}
.txt-right {text-align: right;}
.txt-justify {text-align: justify;}
.input-nomal  {width: auto;}

/* point color STYLE */
[class*="point01"] {color: #D43333;}
[class*="point02"] , [class*="point02"] a {color:#0066C3;}
[class*="point03"]{color:#0098A3;}
[class*="black-"] {color: #000;}
[class*="-bold"],
[class$="-bold"]  {font-weight: 700;}
.txt-normal, .txt-normal a	 {font-weight: normal !important;}	

/* IR 기법 */
.hidden {width: 100%; height: 1px; margin: -1px; color: transparent; clip:rect(0,0,0,0); overflow:hidden;}
.sr-only {position:absolute; width:1px;height: 1px; margin: -1px; color: transparent; clip:rect(0,0,0,0); overflow:hidden;}
.responsive {max-width: 100%; height: auto;}

/* 반응형 아이프레임, 오브젝트, 엠베디드 */
.embed-container { position: relative; padding-bottom:40%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe,
.embed-container object,
.embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.error-txt {
    width: 100%;
    margin-top: 0.4rem;
    color: #E60020;
    text-align: left;
    font-size: 1.4rem;
	}
/* 라디오, 체크박스 */
span.checks {
	display: inline-block;	
    vertical-align: text-top;
	}
.checks {
	position: relative;
	color: #616161;
	}
.checks > li {
	padding-left: 0.5rem;
	}
.check-line {
	width: 2rem;
	height: 2rem;
    vertical-align: middle;
    overflow: hidden;
	}
.normal-checkbox input[type="checkbox"] {
	position: relative;
	border-color: #ddd;
	appearance: checkbox;
	-webkit-appearance: checkbox; 
	-moz-appearance: checkbox;
	}
.checks input[type="radio"] + label,
.checks input[type="checkbox"] + label {
	position: relative;
    display: inline-block;
	margin-left: -2.2rem;
	padding-left: 2.2rem;
    line-height: 1.25;
	cursor: pointer;
	}
.checks input[type="radio"],
.checks input[type="checkbox"],
.checks input[disabled="disabled"] {
	background-color: transparent;
    opacity: 0;
	}
.checks input[type="radio"] + label::before,
.checks input[type="radio"] + label::after,
.checks input[type="checkbox"] + label::before,
.checks input[type="checkbox"] + label::after {
	position: absolute;
	top: .1rem;
	left: 0;
	width: 1.8rem;
	height: 1.8rem;
	background-color: #fff;
	border: 1px solid #BDBDBD;
	border-radius: 100%;
	content: '';
	}
.checks input[type="checkbox"] + label::before,
.checks input[type="checkbox"] + label::after {
	border-radius: 0.3rem;
	}
.checks input[type="radio"]:disabled + label::before,
.checks input[type="checkbox"]:disabled + label::before  {
	background-color: #F6F7FA;
    z-index: 1;
	}
.checks input[type="radio"]:checked + label::before {
    border-color: #222;
    }
.checks input[type="radio"]:checked + label::after {
    top: 0.5rem;
    left: 0.4rem;
    width: 1rem;
    height: 1rem;
    background-color: #222;
    border: transparent;
	}
.checks input[type="checkbox"]:checked + label::before {
	background-color: #222;
	border-color: transparent;
	}
.checks input[type="checkbox"]:checked + label::after {
    color: #fff;
    background-color: transparent;
	border: none;
    font: 1.9rem/1 'remixicon';
 	content: "\eb7a";
	}
.checks label + input[type="text"] {
	margin: 0 5px 0 -5px;
	}

/* label 숨기고, checkbox  radio 단독으로 쓰일 경우 */
.check-line input[type="checkbox"],
.check-line input[type="checkbox"] + label,
.check-line input[type="radio"],
.check-line input[type="radio"] + label{
	position: absolute;
	top: 0;
	left: 0;
    margin: 0;
	}
.checks input:focus + label::after {
    border: 3px solid #000;
    }
/* input 숨기고 label만 있는 경우 STYLE */
/* 텍스트에 underline */
.selection-check .check {
    display: inline-block;
    position: relative;
    margin-right: 1.2rem;
    text-decoration: underline;
    }
.selection-check .check input[type="radio"],
.selection-check .check input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0;
    background-color: transparent;
    border-radius: 0;
    }
.selection-check .check input[type="radio"] + label ,
.selection-check .check input[type="checkbox"] + label {
    margin-left: 0;
    padding-left: 0;
    text-decoration: underline;
    cursor: pointer;
    }
.selection-check .check label::before,
.selection-check .check label::after {
    display: none;
    }
.selection-check .check input[type="radio"]:checked + label,
.selection-check .check input[type="checkbox"]:checked + label {
    color: #0066C3;
    }
/* box 스타일 */
.box-check {
    display: inline-block;
    position: relative;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    }
ul.box-check {
    display: flex; flex-flow: row wrap;
	margin: -.4rem;
	}
.box-check > li {
	margin: .4rem;
	}
.box-check.count3 > li {	
	width: calc(33.33% - .8rem);
	}
.box-check.count4 > li {	
	width: calc(25% - .8rem);
	}
.box-check.count5 > li {	
	width: calc(20% - .8rem);
	}
.box-check > label,
.box-check > li > label {
    display: block;
    padding: 0.65rem 1.2rem;
    background-color: #fff;
    border: 1px solid #D0D5DD;
    border-radius: 0.4rem;
    }
.box-check > input,
.box-check > li  > input {
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
    }
.box-check input[type="radio"]:checked + label ,
.box-check input[type="checkbox"]:checked + label {
    border-color: #0066C3;
    color: #0066C3;
    font-weight: 700;
    }

/*레이어팝업 */
html.active{overflow-y:hidden;}
.layerPop {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0, 0.6); z-index:100;}
.layerPop .layerPop-area {position:absolute; max-width: 100%; margin:auto; padding-top: 4rem; background-color:#fff; z-index: 100; overflow: hidden;}
.layerPop .layerPop-area img{max-width:100%;}
.layerPop-close {position:absolute; top:0; left: 0; width:100%; height: 4rem; padding: .5rem 1.5rem; color:#333; font-size: 0.95em; overflow:hidden;}
.layerPop-close .checks {float: left; margin-top: .5rem;}
.layerPop-close button{display:block;float:right;padding:3px 0;color:#333;vertical-align:middle;}
.layerPop-close button i {margin-top:-.2rem; vertical-align: middle; font-size: 2.2rem;}
.layerPop .layerPop-area p {line-height: 1;}
.layerPop .layerPop-area a {display: block;}	
	
/* 콘텐츠 레이어 팝업 */	
.layer-cont {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 52.4rem;
    max-width: 95%;
    max-height: 95%;
    margin: 0 auto;
    padding: 3.2rem;
    background-color: #fff;
    border-radius: 0.8rem;
    transform: translate(-50%,-50%);
    visibility: hidden;
	}
.layer-cont.container {	
    width: 156.4rem;
	}
.layerpop-active::before {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0, .5);
    content: '';
    z-index: 99;
	}
.layerpop-active .layer-cont.active {
    display: block;
    height: auto;
    overflow: auto;
    visibility: visible;
    z-index: 99;
	}	
.layer-cont > .subject {
    margin-bottom: 2.4rem;
    font-size: 2.4rem;
    font-weight: 700;
	}
.layer-cont .depth1-title {	
	font-size: 2rem;
	}
.layer-cont .btn-close {
	position: absolute;
	top: 3.2rem;
	right: 3.2rem;
	color: #27303F;
    line-height: 1;
	font-size: 2.5rem;
	}
.layerpop-body {
	margin: 0 4rem 3rem;
	}
	
/* 부트스트랩 반응형*/
.col-sm-12{width:100%;}
.col-sm-11{width:91.66666667%;}
.col-sm-10{width:83.33333333%;}
.col-sm-9{width:75%;}
.col-sm-8{width:66.66666667%;}
.col-sm-7{width:58.33333333%;}
.col-sm-6{width:50%;}
.col-sm-5{width:41.66666667%;}
.col-sm-4{width:33.33333333%;}
.col-sm-3{width:25%;}
.col-sm-2{width:16.66666667%;}
.col-sm-1{width:8.33333333%;}

@media (max-width: 1200px){
.col-lg-12{width:100%;}
.col-lg-11{width:91.66666667%;}
.col-lg-10{width:83.33333333%;}
.col-lg-9{width:75%;}
.col-lg-8{width:66.66666667%;}
.col-lg-7{width:58.33333333%;}
.col-lg-6{width:50%;}
.col-lg-5{width:41.66666667%;}
.col-lg-4{width:33.33333333%;}
.col-lg-3{width:25%;}
.col-lg-2{width:16.66666667%;}
.col-lg-1{width:8.33333333%;}
}
@media (max-width: 992px){
.col-md-12{width:100%;}
.col-md-11{width:91.66666667%;}
.col-md-10{width:83.33333333%;}
.col-md-9{width:75%;}
.col-md-8{width:66.66666667%;}
.col-md-7{width:58.33333333%;}
.col-md-6{width:50%;}
.col-md-5{width:41.66666667%;}
.col-md-4{width:33.33333333%;}
.col-md-3{width:25%;}
.col-md-2{width:16.66666667%;}
.col-md-1{width:8.33333333%;}
}
@media (max-width: 768px) {
.col-sm-12{width:100%;}
.col-sm-11{width:91.66666667%;}
.col-sm-10{width:83.33333333%;}
.col-sm-9{width:75%;}
.col-sm-8{width:66.66666667%;}
.col-sm-7{width:58.33333333%;}
.col-sm-6{width:50%;}
.col-sm-5{width:41.66666667%;}
.col-sm-4{width:33.33333333%;}
.col-sm-3{width:25%;}
.col-sm-2{width:16.66666667%;}
.col-sm-1{width:8.33333333%;}
}
@media (max-width: 595px) {
.checks.inline > li {display: block;}
}
@media (max-width: 1360px) {
.layerPop {	
	padding-top: 13.8rem;
	text-align: center;
	}
.layerPop .layerPop-area {
    position: relative;
	top: inherit !important;
	left: inherit !important;
    display: inline-block;
	height: auto !important;
	margin-bottom: 1rem;
    text-align: left;
    vertical-align: top;
	}
}
@media (max-width:1280px){
.embed-container {padding-bottom:56%;}
.table_wrap::-webkit-scrollbar, .popup-cont::-webkit-scrollbar { -webkit-appearance: none; } 
.table_wrap::-webkit-scrollbar:vertical, .popup-cont::-webkit-scrollbar:vertical { width: 1.2rem; } 
.table_wrap::-webkit-scrollbar:horizontal, .popup-cont::-webkit-scrollbar:horizontal { height: 1.2rem; } 
.table_wrap::-webkit-scrollbar-thumb, .popup-cont::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .5); border-radius: 1rem; border: 2px solid #fff; } 
.table_wrap::-webkit-scrollbar-track, .popup-cont::-webkit-scrollbar-track { border-radius: 1rem; background-color: #fff; }
}
@media (max-width:768px){
body{-webkit-text-size-adjust: 100%;}
}
@media (max-width: 595px) {
.checks.inline > li {display: block;}
}