@charset "utf-8";


:root{
	--main-color: #30374E;
	--sub-color: #6A7082;
	--sub-02-color:#F9FAFB;
	--input-color:#9B9B9B;
}

.btn_st1{background:var(--main-color);color:#fff;}

/* 버튼 애니메이션 */
.btn-jittery {animation: jittery 4s infinite;}
.btn-pulse{box-shadow: 0 0 0 10px transparent;animation: pulse 2s;animation-iteration-count: infinite;}

@keyframes pulse {
	from {box-shadow: 0 0 0 0 var(--main-color);}
}
@keyframes jittery {
	5%, 50% {transform: scale(1);}
	10% {transform: scale(0.9);}
	15% {transform: scale(1.15);}
	20% {transform: scale(1.15) rotate(-5deg);}
	25% {transform: scale(1.15) rotate(5deg);}
	30% {transform: scale(1.15) rotate(-3deg);}
	35% {transform: scale(1.15) rotate(2deg);}
	40% {transform: scale(1.15) rotate(0);}
}

/* display layout *********************************************************************************************************/
.wFix {width: 1200px;margin:0 auto;position:relative;}
.webView{display:block !important;}
.mView{display:none !important;}
.link{cursor:pointer;}

/* 숨김 */
.none{display:none;}  /* 공간이 사라짐 */
.ov_hidden{overflow:hidden;} /* 영역을 제외한 나머지 숨김 */
.hidden{visibility:hidden;} /* 공간은 그대로 */
.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}

.clearfix::after{content: '';display: block;clear: both;} /*정렬값*/
.current{display: block !important;}

@media screen and (max-width: 740px) {
	.wFix{width:100%;}
	.webView{display:none !important;}
	.mView{display:block !important;}
}

/* img ********************************************************************************************************************/
.imgWrap{text-align:center;}
@media screen and (max-width: 740px) {
	.imgWrap img{width:100%;}
}

/* input style *********************************************************************************************************/
input::-ms-clear { display:none; }/* IE10 이상에서 input box 에 추가된 지우기 버튼 제거 */
input[type="tel"],input[type="submit"], input[type="reset"], input[type="button"], input[type="text"], input[type="password"]{-webkit-appearance: none;-moz-appearance: none;appearance: none;border-radius: 0px;} /* 모바일 라운드 제거 */
input[type='submit'] {background:none;border:0;font-size:inherit;}
input[type="text"] {border:1px solid #e0e0e0;/* border-radius:3px; */padding:8px 10px;}
input[type="email"] {border:1px solid #e0e0e0;border-radius:3px;padding:8px 10px;}
input[type="tel"] {border:1px solid #e0e0e0;border-radius:3px;padding:8px 10px;}
input[type="number"] {border:1px solid #e0e0e0;border-radius:3px;padding:8px 10px;}
input[type="password"] {border:1px solid #e0e0e0;/* border-radius:3px; */padding:8px 10px;}
input[type="date"] {border:1px solid #e0e0e0;border-radius:3px;padding:8px 10px; }
input[type="time"] {border:1px solid #e0e0e0;border-radius:3px;padding:8px 10px; }
input[type="button"]{width:auto;padding:0.2em 1em;border:0;box-sizing:content-box;}
input::-webkit-input-placeholder { color: #ccc;}
input::-moz-placeholder { color: #ccc;}
input::-ms-input-placeholder { color: #ccc;}
input::-moz-placeholder { color: #ccc;}

/* input size */
.ie8 input[type='text']{line-height:1.8em}
input[size="100"]{width:98%}
input[size="80"]{width:80%}
input[size="70"]{width:70%}
input[size="60"]{width:60%}
input[size="50"]{width:50%}
input[size="40"]{width:40%}
input[size="30"]{width:30%}
input[size="20"]{width:20%}
input[size="15"]{width:15em}
input[size="10"]{width:10em}
input[size="5"]{width:5em}
input[size="3"]{width:3em}
input[size="2"]{width:2em}
input[size="1"]{width:1em}
input[type="file"]{padding:0; border:1px solid #ddd; padding:5px;}

/* 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;}

/* focus style */
input[type=text],input[type=tel],input[type=password],input[type=number],input[type=email], textarea {-webkit-transition: all 0.30s ease-in-out;-moz-transition: all 0.30s ease-in-out;-ms-transition: all 0.30s ease-in-out;-o-transition: all 0.30s ease-in-out;outline: none;}
input[type=text]:focus,input[type=tel]:focus,input[type=password]:focus,input[type=number]:focus,input[type=email]:focus,  textarea:focus,select:focus {-webkit-box-shadow: 0 0 10px rgb(48 55 78 / 24%);-moz-box-shadow: 0 0 10px rgb(48 55 78 / 24%);box-shadow: 0 0 10px rgb(48 55 78 / 24%);border: 1px solid #30374e !important;}


/* input file type */
.fileBox {display: inline-block;}
.fileBox [type="file"] {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);border: 0 none;}
.file-label {cursor:pointer;font-weight:400;}
/* 접근성 탭 포커스 스타일 */
.file-focus {outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color; z-index:99;}


/* select style *********************************************************************************************************/
select {-webkit-appearance: none;-moz-appearance: none;appearance: none;border-radius:0;border:1px solid #e2e2e2;background:#fff url('../images/select_ic.png') 93% 50% no-repeat;background-size:10px;border:1px solid #e0e0e0;/* border-radius:3px; */padding:8px 20px 8px 10px;font-size:inherit;}
select::-ms-expand {display:none} /* IE 에서 Select box 화살표 제거 */
.ie8 select{height:1.8em;line-height:1.8em;}
.ie7 select{height:2.2em}

/* select size */
select[width="100"]{width:98%}
select[width="90"]{width:90%}
select[width="80"]{width:80%}
select[width="70"]{width:70%}
select[width="60"]{width:60%}
select[width="50"]{width:50%}
select[width="40"]{width:40%}
select[width="30"]{width:30%}
select[width="20"]{width:20%}
select[width="15"]{width:15em}
select[width="10"]{width:10em}
select[width="5"]{width:5em}
select[width="3"]{width:3em}
select[width="2"]{width:2em}
select[width="1"]{width:1em}
@media screen and (max-width: 740px) {
	select{width:100% !important;}
}

/* textarea style *********************************************************************************************************/
textarea{display:block;border:1px solid #e0e0e0;padding:0.4em;/* box-sizing:content-box */}
textarea[size="100"]{width:98%}
textarea[size="80"]{width:80%}
textarea[size="70"]{width:70%}
textarea[size="60"]{width:60%}
textarea[size="50"]{width:50%}
textarea[size="40"]{width:40%}
textarea[size="30"]{width:30%}
textarea[size="20"]{width:20%}
textarea[size="15"]{width:15em}
textarea[size="10"]{width:10em}
textarea[size="5"]{width:5em}
textarea[size="3"]{width:3em}
textarea[size="2"]{width:2em}
textarea[size="1"]{width:1em}
textarea::-webkit-input-placeholder { color: #ccc;}
textarea::placeholder { color: #ccc;}
textarea::-ms-input-placeholder { color: #ccc;}
textarea::-moz-placeholder { color: #ccc;}

/* 라디오박스 style *********************************************************************************************************/
.radi_box {overflow:hidden;position:relative;height:25px;}
.radi_box input[type="radio"] {position: absolute;width: 1px;height: 1px;margin-left: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);}
.radi_box input[type="radio"] + label { width:100%; cursor: pointer; float: left;position:relative;overflow:hidden;}
.radi_box input[type="radio"] + label:before {content:'';position:absolute;left:10px;width: 20px;height: 20px;border-radius:100%;background:#ececec;border:1px solid #ececec;}
.radi_box input[type="radio"] + label span {width:100%;display:inline-block;padding-left: 43px;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;line-height:1.3;font-weight: 500;}
.radi_box input[type="radio"]:checked + label {float: left}
.radi_box input[type="radio"]:checked + label:before {content:'';position:absolute;left:10px;width: 20px;height: 20px;border-radius:100%;background:#fff url('../images/input_radio_r.png') 50% 50% no-repeat;background-size:12px;border: 1px solid #f2443a;}
.radi_box input[type="radio"]:checked + label span {color: #f2443a;}
.radi_box2{display:inline-block;}
.chk_box2{display:inline-block;}

/* 체크박스 style *********************************************************************************************************/
.chk_box {overflow:hidden;position:relative;}
.chk_box input[type="checkbox"] {position: absolute;width: 1px;height: 1px;margin-left: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);}
.chk_box input[type="checkbox"].focus{}
.chk_box input[type="checkbox"] + label {cursor: pointer;float: left;position:relative;}
.chk_box input[type="checkbox"] + label:before {content:'';position:absolute;top: -2px;left: -29px;width: 25px;height: 25px;border-radius: 3px;background: #ececec url('../images/input_check.png') 50% 50% no-repeat;border:1px solid #ececec;}
.chk_box input[type="checkbox"]:checked + label {background:#fff;float: left;}
.chk_box input[type="checkbox"]:checked + label:before {FONT-VARIANT: JIS04;content:'';position:absolute;background: #30374e url(../images/input_check2.png) 50% 50% no-repeat;background-size:12px;}
.chk_box input[type="checkbox"]:checked + label span {color: #f2443a;font-weight: 500;}
.chk_box input[type="checkbox"] + label span {width:100%;display:inline-block;padding-left:43px;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;}
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 740px) {
	input[type="text"],input[type="tel"], input[type="email"], input[type="number"], input[type="password"], input[type="date"], input[type="time"] {width:100%;}
}


/* table style ****************************************************************************************************************************************/
/* table 정렬 : table class 추가해서 적용 */
.cell_center td, .cell_center th {text-align:center !important;}
.cell_left td, .cell_left th {text-align:left !important;}
.th_cell_center th {text-align:center !important;}

/* th bg_gray table */
.table_basic,.tbl_basic{border-collapse:collapse;border-spacing:0; min-width:100%; border-top:1px solid #4d4d4d; border-bottom:1px solid #959595;width:100% !important;}
.table_basic th,.table_basic td,.tbl_basic th,.tbl_basic td{word-break:break-all !important; line-height:30px; font-weight:600; border-left:1px solid #d9d9d9; border-right:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9;text-align:left;}
.table_basic th,.tbl_basic th{padding:5px 5px; color:#222; background:#fafafa;}
.table_basic thead th,.tbl_basic thead th{color:#222;text-align:center;}
.table_basic th.point,.tbl_basic th.point{background:#fafafa;}
.table_basic td,.tbl_basic td{padding:5px 5px; font-weight:normal; color:#444;background:#fff;}
.table_basic td.txt {text-align:left;}
.table_basic td.point,.tbl_basic td.point{background:#fafafa;}
.table_basic tr th:first-child,.table_basic tr td:first-child,.tbl_basic tr th:first-child,.tbl_basic tr td:first-child{border-left:none; border-right:1px solid #d9d9d9;}
.table_basic tr th:last-child,.table_basic tr td:last-child,.tbl_basic tr th:last-child,.tbl_basic tr td:last-child{border-right:none;}
.table_basic thead th,.tbl_basic thead th{border-bottom:1px solid #c1c1c1;}
.table_basic tbody th,.tbl_basic tbody th{color:#333;}
.table_basic img {max-width:100% !important;}
.table_basic .cell_dark {background:#f1f1f1;}

.table_st1{border-collapse:collapse;border-spacing:0; min-width:100%; border-bottom:1px solid #959595;width:100% !important;font-size:12px;line-height:30px;}
.table_st1 th,.table_st1 td{word-break:break-all !important; border-left:1px solid #e4e4e4; border-right:1px solid #e4e4e4; /*text-align:center;*/ border-bottom:1px solid #e4e4e4;text-align:left;}
.table_st1 th{padding:6px 2px; color:#222; background:#555;}
.table_st1 thead th{color:#fff;text-align:center;border-color:#7d7d7d !important;}
.table_st1 td{padding:6px 2px; font-weight:normal; color:#777;background:#fff;}
.table_st1 tr th:first-child,
.table_st1 tr td:first-child{border-left:none; border-right:1px solid #e4e4e4;}
.table_st1 tr th:last-child,
.table_st1 tr td:last-child{border-right:none;}
.table_st1 thead th{border-bottom:1px solid #c1c1c1;}
.table_st1 tbody th{color:#fff;border-color:#7d7d7d !important;}
.table_st1 img {max-width:100% !important;}

.table_st2 {width:100%; border-collapse:collapse; border-spacing:0; overflow:auto; max-height:800px;}
.table_st2 thead th{background: #eee; color: #333; font-weight:bold; border:1px solid #ddd;}
.table_st2 th, .table_st2 td {border:1px solid #ddd; padding:7px 10px; line-height:30px;}
.table_st2 thead th {background: #eef1fa;border-top:1px solid #8e9ba0;border-left:1px solid #c2d4de;border-right:1px solid #c2d4de;border-bottom:none;}
.table_st2 td {border:1px solid #dcdcdc;}
.table_st2 th {border:1px solid #c2d4de;;background:#eef1fa;}

/* table header fixed */
.fixed-table {width: 100%; height:410px; position: relative;padding-top: 40px;}
.fixed-table .header-bg {background: #fafafa; height:42px;position: absolute;top: 0;right: 0;left: 0;border-top:1px solid #4d4d4d;border-bottom:1px solid #ddd;}
.fixed-table .table-wrapper {overflow-x: hidden;overflow-y: auto;height: 100%;}
.fixed-table table {width:100%; border-collapse:collapse; border-spacing:0; overflow:auto; max-height:800px;}
.fixed-table table th{padding:0px;}
.fixed-table table td {border-bottom:1px solid #ddd; padding:5px 3px; line-height:30px;}
.fixed-table table td + td {border-left: 1px solid #ddd;}
.fixed-table table .th-text {position: absolute;top: 0;width: inherit;line-height:40px; border-left: 1px solid #ddd;color:#000;}
.fixed-table table th:first-child .th-text {border-left: none;}

/* table scroll */
.tbody_scroll {width:100%;min-width:500px;height:57vh;background:#fff;overflow-y:auto;overflow-x:hidden;}
.tbody_scroll_y {width:100%;height:57vh;background:#fff;overflow-y:auto;overflow-x:hidden;}
.table_scroll > .thead_scroll > table {width:1600px !important;}
.table_scroll > .tbody_scroll > table {width:1600px !important;}


.notice{color:#f2443a !important;}
.notice i{background:#ffefef;border-radius:50%; padding:5px;}
@media screen and (max-width: 740px) {

	/* 반응형 테이블 */
    table.responsive colgroup{display:none}
    table.responsive thead th{display:none;}
    table.responsive tbody th{background:#fff;border-bottom:none;}
    table.responsive tbody {border-top: 1px solid #151515;}
    table.responsive tbody tr{display:block;padding:10px 0;border-bottom:1px solid #d9d9d9;}
    table.responsive tbody tr:after{display:block; clear:both; content:"."; visibility:hidden; height:0;}
    table.responsive tbody tr{display: inline-block;}
    table.responsive tbody tr{display: block;position: relative;}
    table.responsive tbody td{width:100%;float:left;padding:5px 10px;border:none;text-align:left;box-sizing:border-box;}
	table.responsive tbody td.num{width:auto;min-width:50px;text-align: center;font-size: .7rem;border:1px solid #ddd;border-radius:25px;color:#999;float: left;margin-left:5px;}
	table.responsive tbody td.subject{width: 100%;color: #000;padding-top: 10px;}
	table.responsive tbody td.data{width: auto;color: #999;font-size: .8rem;}
	table.responsive tbody td.gubn{font-size: .76rem;color: #334899;float: left;display: inline-block;width: auto;}
	table.responsive tbody td.none{display:none;}
    table.responsive [data-cell-header]:before { content: attr(data-cell-header);  display: inline-block; }

	.table_scroll {width:100%;overflow:auto;}
	.table_scroll .fixed-table {min-width:500px;height:57vh;}


	.member table.responsive tbody th{background:transparent;border-bottom:none;}
	.member table.responsive tbody tr{border-bottom:none;}
	.member table.responsive{border-bottom:1px solid #ddd;}
}

/* board paging style *********************************************************************************************************/
/* .paging{}
.paging a{width: 30px;height: 30px;line-height: 30px;border: 1px solid #ccc;display: inline-block;color: #999;margin: 0 2px 2px;}
.paging a.active{background: #e21506;color: #fff;border-color: #e21506;}
.paging a.first{background:url('../images/chevrons-left.png') center center no-repeat;color:transparent;}
.paging a.prev{background:url('../images/chevron-left.png') center center no-repeat;color:transparent;}
.paging a.next{background:url('../images/chevron-right.png') center center no-repeat;color:transparent;}
.paging a.last{background:url('../images/chevrons-right.png') center center no-repeat;color:transparent;} */


/* layer pop 설정 **************************************************************************************************************/
/*.dim-layer {display:none;}
.dimBg {background:rgba(0,0,0,0.2);position:fixed;top:0;left:0;z-index:9991;width:100%;height:100%;}
.pop-layer {width:80%;min-height:200px;background:#fff;position:absolute;z-index:9992;border-radius:5px;padding:30px 20px 50px 20px;}
.pop-head {margin-bottom:20px;overflow:hidden;}
.pop-head .tit {font-weight:500;font-size:23px;}*/

/*.dim-layer {display:none;}
.dimBg {background:rgba(0,0,0,0.3);position:fixed;left:0;top:0;z-index:888;width:100%;height:100%;}
.pop-layer {padding:20px 0 50px;width:80%;min-height:200px;background:#fff;position:absolute;left:50%;z-index:999;border-radius:5px;text-align:center;}
.pop-head {padding:25px 20px 15px 20px;display:block;}
.pop-head .tit {font-weight:500;font-size:23px;}
.pop-conts {padding:0 20px;}
.btn-layerClose {padding:15px ;border-top:1px solid #ccc;cursor:pointer;font-size:17px;color:#b64f10;display:block;position:absolute;bottom:0;width:100%;box-sizing:border-box;}*/

/*접근성*/
.dim-layer{position: fixed;left: 0;top: 0;height: 100%;width: 100%;background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden;
	-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
	-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
	transition: opacity 0.3s 0s, visibility 0s 0.3s;
}
.is-visible{opacity: 1; visibility: visible; z-index:99999;
	-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
	-moz-transition: opacity 0.3s 0s, visibility 0s 0s;
	transition: opacity 0.3s 0s, visibility 0s 0s;
}
.pop-layer {left:50%; top:50%;position:relative;width: 1000px;height:80%;padding: 80px 10px 60px;border: 1px solid #d71a21;border-radius: 5px;background-color: #fff;overflow:hidden;color:#333;
	-webkit-transform: translateY(-40px);
	-moz-transform: translateY(-40px);
	-ms-transform: translateY(-40px);
	-o-transform: translateY(-40px);
	transform: translateY(-40px);
	/* Force Hardware Acceleration in WebKit */
	-webkit-backface-visibility: hidden;
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	transition-property: transform;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	transition-duration: 0.3s;
}
.pop-layer .pop-head {position: absolute;top: 0;width:100%;left:0;text-align:center;}
.pop-layer .pop-conts {padding: 0 10px;height: 100%;overflow-y: auto;}
.pop-layer .btWrap {position:absolute; bottom:0; left:0;}
.pop-layer .btWrap button{float:left}
.pop-layer .layerClose{position:absolute;right:0;top:0;width: 60px; height:60px; font-size: 1.2rem;color:#999;background:url('../images/close00.png') center center no-repeat;background-size:12px;}
.pop-layer .layerClose:hover{-ms-transform: rotate(360deg);-webkit-transform: rotate(360deg); transform: rotate(360deg);color:#000;transition: transform .2s, opacity .25s;}

.layer_s .pop-layer{width:300px; height:240px;padding:60px 0 30px;}
.layer_s .pop-head{height:60px;line-height:60px; font-weight:400;font-size:1.2rem;}
.layer_m .pop-layer{width:700px; height:500px;padding:60px 0 30px;}
.layer_m .pop-head{height:60px;line-height:60px; font-weight:400;font-size:1.2rem;}
.layer_l .pop-layer{width:1200px; height:800px;padding:60px 0 30px;}
.layer_l .pop-head{height:60px;line-height:60px; font-weight:400;font-size:1.2rem;}
.layer_full .pop-layer{width:100%; height:100%;padding:60px 0 30px;}
.layer_full .pop-head{height:60px;line-height:60px; font-weight:400;font-size:1.2rem;}

.is-visible .pop-layer{
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}

@media screen and (max-width: 1024px) {

}
@media screen and (max-width: 740px) {

	.layer_s .pop-head{font-size:1.2rem; padding:0;}
	.layer_s .pop-layer{border-radius:5px;}
	.layer_s .pop-conts{padding:5px;}
	.layer_m .pop-head{font-size:1.2rem; padding:0;}
	.layer_m .pop-layer{width:90%; height:80%;}
	.layer_m .pop-conts{padding:0;}

	.layer_l .pop-layer{width:100%; height:100%;border-radius:0px;}

}


/* 리스트 css ********************************************************************************************************************/
.list_st1{}
.list_st1 li{position:relative;padding-left: 9px;line-height: 24px;width:100% !important;font-size:.9rem;}
.list_st1 > li:before{content:'';background: #1f59a3;width: 4px;height: 4px;display:inline-block;position:absolute;left:0px;top: 10px;border-radius: 8px;}

/* box css **********************************************************************************************************************/
.box_st1{padding: 10px;background: #edf7ff;border: 1px dashed #b9d8f1;display:inline-block;width:100%;}


/* 웹접근성 skip ****************************************************************************************************************/
/* Skip to */
#skip-to ul li a{position: absolute;top:-99px;background: #333;color: #fff;width: 120px;display: inline-block;height: 30px;font-size: .8rem;line-height: 30px;text-align: center;z-index:9999;}
#skip-to ul li a:hover, #skip-to ul li a:focus, #skip-to ul li a:active {top:0;}



/* hover effect *****************************************************************************************************************/
/* line btn */
.line{position:relative;}
.line::after{width:0; height:2px; content:''; display:inline-block; position:absolute; bottom:0; left:50%; background:#43c6d8; -webkit-transform: translate(-50%, 0%); -moz-transform: translate(-50%, 0%);  transform: translate(-50%, 0%); transition: all 0.3s; border-radius:5px;}
.line:hover {color:#43c6d8 !important;}
.line:hover::after { width:100%; }

@keyframes fadein {
    from {opacity:0;}
    to {opacity:1;}
}
@-moz-keyframes fadein { /* Firefox */
    from {opacity:0;}
    to {opacity:1;}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {opacity:0;}
    to {opacity:1;}
}
@-o-keyframes fadein { /* Opera */
    from {opacity:1;}
    to {opacity: 0;}
}
@keyframes fadeOut {
    from {opacity:1;}
    to {opacity:0;}
}
@-moz-keyframes fadeOut { /* Firefox */
    from {opacity:1;}
    to {opacity:0;}
}
@-webkit-keyframes fadeOut { /* Safari and Chrome */
    from {opacity:1;}
    to {opacity:0;}
}
@-o-keyframes fadeOut { /* Opera */
    from {opacity:1;}
    to {opacity: 0;}
}