@charset "utf-8";
@import url('../base.css');

/* 
 * common CSS Document
 */
 
/* ie update */
#update{position:fixed; top:0px; left:0px; z-index:99; width:100%; background:#1a1b1d; text-align:center; font-weight:300; color:#f9ed89;}
#update a{display:inline-block; margin-left:10px; color:#ff7f7f;}

/* skip navigation */
#skip_menu{position:relative; height:0px; z-index:9999; text-align:center;}
#skip_menu a{display:block; position:absolute; top:-35px; left:0px; z-index:9999; height:33px; line-height:31px; box-sizing:border-box; padding:0 10px; background:#fcfcfc; border:2px solid #262626; border-top-width:0px; color:#555; font-size:14px;}
#skip_menu a:hover,
#skip_menu a:focus,
#skip_menu a:active{top:0px;}
 
/* Form Control */
input,
select,
textarea,
label{display:inline-block; box-sizing:border-box; width:auto; vertical-align:middle; line-height:1.4;}
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="date"],
input[type="email"],
input[type="number"],
textarea{height:33px; padding:7px 8px; margin:2px 0px; border:1px solid #ddd; background:#fff; vertical-align:middle;}
textarea{resize:none;}
select{height:33px; padding:0 8px; margin:2px 0px; border:1px solid #ddd; background:#fff; vertical-align:middle;}
select::-ms-expand {background-color:transparent; border:0;}
input[type="text"],
input[type="password"],
input[type="submit"],
input[type="button"],
input[type="number"],
input[type="file"],
select,
textarea{-webkit-border-radius:1px; -webkit-appearance:none;}
select{padding-right:20px; background:#fff url(../../images/board/select_arrow.svg) no-repeat calc(100% - 7px) 50%; background-size:7px 7px;}
body.ie select{padding-right:10px;}
input[type="file"]{background:#eee; font-size:1.08em;}
input[readonly],
input[disabled]{background:#eee;}
input[type="checkbox"],
input[type="radio"]{width:13px; height:13px; margin:2px 3px 1px 0;}
input[type="checkbox"] + label,
input[type="radio"] + label{margin-right:20px;}
table{width:100%;}

.input50{width:50px !important;}
.input70{width:70px !important;}
.input100{width:100px !important;}
.input200{width:200px !important;}
.input300{width:300px !important;}
.input400{width:400px !important;}
.inputFull{width:100% !important;}

/* 필수입력 */
.marking{display:inline-block; position:relative; width:10px; height:14px; margin-bottom:-2px; vertical-align:middle; text-indent:100%; overflow:hidden; white-space:nowrap;} 
.marking:after{content:'*'; display:inline-block; position:absolute; top:0; left:0; line-height:17px; font-size:14px; font-weight:600; text-indent:0; color:#c51917;}

/* 정렬 */
.tac{text-align:center !important;}
.tal{text-align:left !important;}
.tar{text-align:right !important;}

/* margin */
.mt0{margin-top:0px !important;}
.mt10{margin-top:10px !important;}
.mt20{margin-top:20px !important;}
.mt30{margin-top:30px !important;}

/* padding */
.pt0{padding-top:0px !important;}
.pt10{padding-top:10px !important;}
.pt20{padding-top:20px !important;}
.pt30{padding-top:30px !important;}

/* button */
.btn_area{padding:30px 0; text-align:center;}
.btn_area.right{text-align:right;}
.btn_area.left{text-align:left;}
.button{overflow:hidden; display:inline-block; position:relative; box-sizing:border-box; padding:0 15px; margin:2px 0px; background:#191919; border:1px solid #191919; color:#fff !important; font-size:14px; text-align:center; vertical-align:middle; transition:all 0.4s ease-out 0.1s; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0);}
.button span{position:relative; z-index:2;}
.button.red{background:#e23343; border:1px solid #e23343;}
.button.blue{background:#1637a2; border:1px solid #1637a2;}
.button.green{background:#53a239; border:1px solid #53a239;}
.button.black{background:#000; border:1px solid #000;}
.button.gray{background:#92999e; border:1px solid #92999e;}
.button.white{background:#fff; border:1px solid #cdcdcd; color:#444 !important;}
	/* button-size */
.button{min-width:100px; height:45px; line-height:43px;}
.button.lg{min-width:140px; height:50px; line-height:48px; font-size:15px; letter-spacing:-1px;}
.button.sm{min-width:60px; height:23px; line-height:21px; padding:0 10px; font-size:12px;}
table .button{height:33px; line-height:31px;}
	/* button hover */
.button:before{content:''; display:block; position:absolute; top:0px; right:0px; bottom:0px; left:0px; z-index:1; width:120%; height:110%; background:#fff; transform:translateX(-120%) skew(0deg); transition:transform 0.7s cubic-bezier(0, 0, 0.21, 0.87) 0s;}
.button:hover:before,
.button:focus:before{transform:translateX(-10%) skew(-5deg) perspective(500px);}
.button:hover,
.button:focus{color:#222 !important; box-shadow:0px 10px 15px rgba(0,0,0,0.15);}
	/* input-button & label-button */
input.button:hover,
input.button:focus{opacity:0.8; color:#fff !important;}
label.button{margin-right:0px !important; cursor:pointer;}
.in label.button:before{transform:translateX(-10%) skew(-15deg) perspective(500px);}
.in label.button{color:#222 !important; box-shadow:0px 10px 15px rgba(0,0,0,0.15);}
	/* white-button */
.button.white:before{background:#000;}
.button.white:hover,
.button.white:focus{border-color:#000; color:#fff !important;}
input.button:before{display:none;}
input.button.white:hover,
input.button.white:focus{color:#222 !important;}

/* bg color */
.bg_red{background:#ffecf1 !important;}
table.table.gray thead th.bg_red{background:#f7cfd9 !important; border-bottom-color:#e4c2ca !important;}
tr.bg_red th{background:#f7cfd9 !important; border-right-color:#e4c2ca !important;}
tr.bg_red td{background:#ffecf1;}
.bg_green{background:#e7f9e5 !important; border-color:#a3d89c !important;}
table.table.gray thead th.bg_green{background:#d0f1cc !important; border-bottom-color:#a3d89c !important;}
tr.bg_green th{background:#d0f1cc !important; border-right-color:#a3d89c !important;}
tr.bg_green td{background:#e7f9e5;}
.bg_blue{background:#e5ebf9 !important;}
table.table.gray thead th.bg_blue{background:#d1dbf3 !important; border-bottom-color:#b5c3e2 !important;}
tr.bg_blue th{background:#d1dbf3 !important; border-right-color:#b5c3e2 !important;}
tr.bg_blue td{background:#e5ebf9;}
.bg_yellow{background:#f7f4e2 !important; border-color:#d6ca8b !important;}
table.table.gray thead th.bg_yellow{background:#f1e9bf !important; border-bottom-color:#d6ca8b !important;}
tr.bg_yellow th{background:#f1e9bf !important; border-right-color:#d6ca8b !important;}
tr.bg_yellow td{background:#f7f4e2;}
.bg_gray{background:#f5f5f5 !important;}
table.table.gray thead th.bg_gray{background:#e2e2e2 !important; border-bottom-color:#d2d2d2 !important;}
tr.bg_gray th{background:#e2e2e2 !important; border-right-color:#d2d2d2 !important;}
tr.bg_gray td{background:#f5f5f5;}
.bg_none{background:transparent !important;}

/* table */
table.table{margin-top:15px; border-top:1px solid #c3cae6;}
table.table thead th{background:#edf0fb; border-bottom:1px dashed #e2e7f9;}
table.table.line thead th{border:1px dashed #c3cae6;}
table.table thead tr:last-child th{border-bottom:1px solid #e2e7f9;}
table.table thead th[rowspan]{border-right:1px dashed #c3cae6;}
table.table tbody th{background:#f5f5f5; border:1px solid #e0e0e0; border-right-color:#f5f5f5;}
table.table thead + tbody th{background:transparent; border-right-color:#e0e0e0;}
table.table th,
table.table td{padding:9px 10px; letter-spacing:-0.5px; line-height:1.4; word-break:keep-all;}
table.table th{text-align:center; font-weight:500; color:#222;}
table.table thead + tbody tr td{text-align:center;}
table.table tbody td{border:1px solid #e0e0e0; text-align:left;}
table.table thead tr th:last-child,
table.table tbody tr td:last-child{border-right-width:0px;}
table.table thead tr th:first-child,
table.table tbody tr td:first-child,
table.table tbody tr th:first-child{border-left-width:0px;}
	/* table text align */
table.table.tal td,
table.table .tal{text-align:left !important;}
table.table.tar td,
table.table .tar{text-align:right !important;}
table.table .tac{text-align:center !important;}
table.table .list{margin-top:0px;}
table.table td input[type="text"],
table.table td select,
table.table td textarea{width:100%;}
	/* table button form */
table.table .button{min-width:60px;}
table.table.form td{padding:5px 10px; text-align:left;}
	/* table link hover */
table.table td a[class*="link_"]{color:#3653a9; transition:0.2s ease;}
table.table td a[class*="link_"]:hover{box-shadow:0 1px 0px #265096;}
table.table.hover tbody tr:hover th,
table.table.hover tbody tr:hover td{background:#2d313c !important; color:#fff !important;}
	/* table bgcolor */
table.table.blue tbody th{background:#edf0fb !important;}
table.table.gray{border-top-color:#d0d0d0;}
table.table.gray thead th{background:#f5f5f5 !important;}
table.table.gray.line thead th{border-color:#cecece}
table.table.gray thead th[rowspan]{border-right-color:#cecece;}
table.table.gray thead tr:last-child th{border-bottom-color:#e2e2e2;}
	/* table img */
table.table img{max-width:100%;}
table.table div.conts{min-height:300px; line-height:1.5;}
table.table div.conts img{max-width:100%;}
	/* table total */
table.table .total td,
table.table td.total{font-weight:600; color:#222;}
	/* table scroll mobile */
#content .mob_info{display:none; position:relative; margin-top:10px; padding:7px 7px 7px 55px; background:#f5f5f5; border:1px dashed #969696; font-size:13px;}
#content .mob_info:before{content:''; display:block; position:absolute; top:7px; left:7px; width:40px; height:20px; background:url(../../images/board/img_drag.png) no-repeat 50% 0; background-size:100%;}

/* tab all - cols */
.tabCol{margin-bottom:20px; border-bottom:1px solid #dedede;}
.tabCol > ul{display:table; table-layout:fixed; width:100%; margin-bottom:-1px;}
.tabCol > ul > li{display:table-cell; vertical-align:middle;}
.tabCol > ul > li:first-child > a{border-left-width:1px;}
.tabCol > ul > li > a{position:relative; display:flex; flex-flow:row wrap; justify-content:center; align-items:center; min-width:130px; height:45px; line-height:1.2; box-sizing:border-box; padding:5px 20px; background:#f5f5f5; border:1px solid #dedede; border-left-width:0px; text-align:center; font-size:15px; color:#666; transition:0.3s ease;}
.tabCol > ul > li > a:before{content:''; position:absolute; top:-1px; left:-1px; display:block; width:calc(100% + 2px); height:2px; background:#1637a2; transform:scaleX(0); transition:all 0.5s ease;}
.tabCol > ul > li > a.on,
.tabCol > ul > li > a.on:hover,
.tabCol > ul > li > a.on:focus{background:#fff; border-bottom-color:#fff; color:#111;}
.tabCol > ul > li > a.on:before{transform:scaleX(1);}
.tabCol > ul > li > a:hover,
.tabCol > ul > li > a:focus{color:#111;}
.tabCol > ul.mini{width:auto;}

/* sitemap */
.area_sitemap{box-sizing:border-box; margin:0 auto; padding:0 15px;}
.area_sitemap .gnb:after{content:''; display:block; clear:both;}
.area_sitemap .gnb > li{float:left; width:15%; margin-left:2%;}
.area_sitemap .gnb > li:first-child{margin-left:0px;}
.area_sitemap .gnb > li > a{display:block; position:relative; padding:40px 0px; background:#eff7f9; font-size:23px; font-weight:600; color:#1b1b1b; text-align:center; letter-spacing:-1px; transition:all 0.3s ease 0s;}
.area_sitemap .gnb > li > a span{position:relative; z-index:5;}
.area_sitemap .gnb > li > a:after{content:''; display:block; position:absolute; left:0px; top:0px; z-index:2; width:100%; height:100%; background:#54b9f3; background-image:linear-gradient(0deg, #54b9f3, #0ab19b); background-image:-ms-linear-gradient(0deg, #54b9f3, #0ab19b); background-image:-webkit-linear-gradient(0deg, #54b9f3, #0ab19b); background-image:-moz-linear-gradient(0deg, #54b9f3, #0ab19b); background-image:-o-linear-gradient(0deg, #54b9f3, #0ab19b); transform:scaleX(0); transform-origin:0 0; transition:all 0.4s ease-out 0s;}
.area_sitemap .gnb > li > a:hover,
.area_sitemap .gnb > li:hover > a{color:#fff;}
.area_sitemap .gnb > li > a:hover:after,
.area_sitemap .gnb > li:hover > a:after{transform:scaleX(1);}
.area_sitemap .gnb > li > ul{margin-top:30px;}
.area_sitemap .gnb > li > ul > li{margin-bottom:10px; padding-left:20px;}
.area_sitemap .gnb > li > ul > li > a{display:inline-block; position:relative;  padding-left:10px; font-size:18px; font-weight:300; color:#333; letter-spacing:-1px; transition:all 0.3s ease 0s;}
.area_sitemap .gnb > li > ul > li > a:before{content:''; display:block; position:absolute; left:0px; top:13px; width:4px; height:1px; background:#666; transition:all 0.3s ease 0s;}
.area_sitemap .gnb > li > ul > li > a:hover{color:#3c9ed6;}
.area_sitemap .gnb > li > ul > li > a:hover:before{background:#3c9ed6;}

/* layer popup - basic */
.layerPop{position:absolute; z-index:90;}
.layerPop a{display:block;}
.layerPop img{max-width:100%;}
.layerPop .btn{padding:3px 10px; background:#292b42; text-align:right;}
.layerPop .btn button{display:inline-block; margin-left:15px; background:none; color:#fff; font-size:12px;}

/* layer popup - btn control */
[data-pop-layer="layer"]{position:fixed; top:0px; left:0px; z-index:1000; width:100%; height:100%; background:rgba(0,0,0,0.2);}
[data-pop-layer="layer"] .popBox{position:absolute; top:50%; left:50%; min-width:400px; min-height:600px; box-sizing:border-box; background:#fff; box-shadow:3px 15px 20px rgba(0,0,0,0.15); transform:translate(-50%, -50%);}
[data-pop-layer="layer"] .popBox h2{height:67px; padding:0 20px !important; border-bottom:1px solid #eee; font-size:25px !important; font-weight:500; letter-spacing:-1px;}
[data-pop-layer="layer"] .popBox h2:after{content:''; display:inline-block; height:100%; vertical-align:middle;}
[data-pop-layer="layer"] .popBox h2 span{display:inline-block; width:99%; vertical-align:middle;}
[data-pop-layer="layer"] .popBox .btn_close{position:absolute; top:0px; right:-70px; width:70px; height:68px; line-height:68px; background:#34383e; box-shadow:3px 10px 15px rgba(0,0,0,0.15);}
[data-pop-layer="layer"] .popBox .btn_close span{display:inline-block; position:relative; width:18px; height:18px; margin:-4px auto 0; vertical-align:middle; background:url(../../images/module/btn_close.png) no-repeat 50% 0; background-size:18px 18px; text-indent:100%; overflow:hidden; white-space:nowrap;}
[data-pop-layer="layer"] .popBox .btn_close:focus{outline:none;}
[data-pop-layer="layer"] .popBox .popConts{overflow-y:auto; max-height:532px; box-sizing:border-box; padding:20px 20px 40px;}
body.ie [data-pop-layer="layer"] .popBox h2{height:68px; box-sizing:border-box;}

/* loading */
.area_loding{position:fixed; top:0px; left:0px; z-index:90; width:100%; height:100%; background:rgba(255,255,255,0.7);}
.area_loding .img{position:absolute; top:50%; left:50%; z-index:91; width:150px; height:150px; transform:translate(-50%, -50%);}

/* text color */
.txt_point01{color:#1637a2 !important;}
.txt_point02{color:#d04343 !important;}
.txt_point03{color:#429846 !important;}

/* tooltip */
[data-tooltip="explan"]{display:inline-block; position:relative; margin-top:-2px; font-size:0px; vertical-align:middle; line-height:1em; font-weight:400;}
[data-tooltip="explan"]:before{content:''; display:block; width:14px; height:14px; background:#1637a2 url(../../images/module/icon_tooltip.png) no-repeat 50% 50%; background-size:14px; border-radius:100%;}
[data-tooltip="explan"] .box{display:none; position:absolute; top:0px; left:16px; z-index:999; min-width:430px; box-sizing:border-box; padding:15px; background:#fff; border:1px solid #292929; box-shadow:5px 10px 20px rgba(0,0,0,0.10); line-height:1.4em; font-size:13px; font-weight:300; text-align:left; word-break:keep-all;}
[data-tooltip="explan"] .box.small{min-width:300px;}
[data-tooltip="explan"] .box.big{min-width:600px;}
[data-tooltip="explan"].right .box{left:auto; right:0px; top:16px;}
[data-tooltip="explan"] .box i{display:block; font-weight:500; color:#1637a2;}

/* info box */
.box_attention{margin-top:20px; padding:20px; background:#f9f6f0;}
.box_attention strong,
.text_risk strong{color:#3653a9;}
.text_risk{margin-top:20px;}
.icon_risk:before,
.text_risk:before{content:''; display:inline-block; width:14px; height:14px; margin-top:-3px; margin-right:4px; background:#bd2534 url(../../images/module/icon_tooltip.png) no-repeat 50% 50%; background-size:14px; border-radius:100%; vertical-align:middle;}

/* accordion */
[data-control="accordion"]{display:none; position:relative; padding:15px; background:#fff; border:1px solid #dddfe4; font-size:15px;}
[data-control="accordion"] em{display:inline-block; margin-left:3px; vertical-align:middle; font-size:17px; color:#511b96; font-weight:600;}
[data-control="accordion"]:before,
[data-control="accordion"]:after{content:''; display:block; position:absolute; top:50%; width:1px; height:16px; margin-top:-8px; background:#b3b5bb; transition:0.5s ease;}
[data-control="accordion"]:before{right:25px; transform:rotate(40deg);}
[data-control="accordion"]:after{right:35px; transform:rotate(-40deg);}
[data-control="accordion"].active,
[data-control="accordion"].show{background:#fff; border-color:#8d8d8d; border-bottom-color:#eee;}
[data-control="accordion"].active:before,
[data-control="accordion"].show:before{transform:rotate(-40deg);}
[data-control="accordion"].active:after,
[data-control="accordion"].show:after{transform:rotate(40deg);}
[data-control="accordion_conts"]{display:block;}
[data-control="accordion_conts"] + [data-control="accordion"]{margin-top:40px;}

@media screen and (min-width:769px){
	[data-tooltip="explan"]:hover .box,
	[data-tooltip="explan"]:focus .box{display:block;}
}

@media screen and (max-width:1024px){
	.button{height:42px; line-height:40px;}
	
	.area_sitemap .gnb > li{width:32%; margin-left:2%; margin-bottom:30px;}
	.area_sitemap .gnb > li:nth-child(3n+1){clear:both; margin-left:0px;}
	
	.tabCol{border-bottom-width:0px;}
	.tabCol.full{position:relative; overflow-x:auto; overflow-y:hidden; height:45px;}
	.tabCol.full > ul{position:absolute; top:0px; left:0px; margin:0px;}
	.tabCol.full > ul > li > a{border-left-width:1px; border-right-width:0px;}
	.tabCol.full > ul > li:last-child > a{border-right-width:1px;}
	.tabCol > ul{display:table; width:auto; padding-top:0px; margin:0 auto;}	
	.tabCol > ul > li > a{flex-flow:row nowrap; min-width:120px; padding:5px 10px; white-space:nowrap;}
	
	[data-tooltip="explan"]{margin-top:-1px;}
	[data-tooltip="explan"]:before{background-image:url(../../images/module/icon_tooltip@x3.png);}
	
	[data-pop-layer="layer"] .popBox{top:0px !important; left:0px !important; width:100% !important; height:100%  !important; min-width:inherit; min-height:inherit; transform:translate(0,0);}
	[data-pop-layer="layer"] .popBox h2{height:67px; box-sizing:border-box; padding-right:80px !important;}
	[data-pop-layer="layer"] .popBox .popConts{height:calc(100% - 67px); max-height:inherit;}
	[data-pop-layer="layer"] .popBox .btn_close{right:0px; box-shadow:none;}

	.layerPop{top:100px !important; left:50% !important; transform:translateX(-50%);}
	
	[data-control="accordion"]{display:block;}
	[data-control="accordion_conts"]{display:none; padding:15px; border:1px solid #8d8d8d; border-top-width:0px;}
	[data-control="accordion_conts"] > .table{margin-top:0px !important;}
	[data-control="accordion"].show + [data-control="accordion_conts"]{display:block;}
}

@media screen and (max-width:768px){
	#content .scrollTable{overflow:auto;}
	#content .scrollTable .table{width:768px;}
	#content .mob_info{display:block;}
	
	.tabCol > ul > li > a{min-width:110px; font-size:14px;}
	
	[data-tooltip="explan"]{position:static;}
	[data-tooltip="explan"] .box{top:19px; left:0px; width:90vmin; min-width:inherit;}
	[data-tooltip="explan"].right .box{right:auto; left:0px;}	
	[data-tooltip="explan"] .box.small,
	[data-tooltip="explan"] .box.big{min-width:inherit;}
	[data-tooltip="explan"].active:before{background-color:#b73333;}
	
	.table [data-tooltip="explan"] .box{position:fixed; left:50%; top:50%; transform:translate(-50%, -50%);}
	.table [data-tooltip="explan"]:after{content:''; opacity:0; visibility:hidden; display:block; position:fixed; left:0px; top:0px; z-index:998; width:100%; height:100%; background-color:rgba(0,0,0,0.3); transition:0.3s linear 0s;}
	.table [data-tooltip="explan"].active:after{opacity:1; visibility:visible;}
}

@media screen and (max-width:640px){
	.button{min-width:80px;}
	.button.lg{min-width:110px; height:45px; line-height:43px;}
	
	[data-control="accordion"]{padding:10px 15px; font-size:14px;}
	[data-control="accordion"] em{font-size:15px;}
	[data-control="accordion"]:before{right:20px;}
	[data-control="accordion"]:after{right:30px;}
}

@media screen and (max-width:600px){
	.tabCol.full{height:40px;}
	.tabCol > ul > li > a{min-width:100px; height:40px;}
	
	.area_sitemap .gnb > li{width:49%;}
	.area_sitemap .gnb > li:nth-child(3n+1){clear:none; margin-left:2%;}	
	.area_sitemap .gnb > li:nth-child(2n+1){clear:left; margin-left:0px;}
	.area_sitemap .gnb > li > a{font-size:20px;}

	.layerPop{width:90% !important; height:auto !important;}
	[data-pop-layer="layer"] .popBox .popConts img,
	.layerPop img{max-width:100%; width:100%;}
	[data-pop-layer="layer"] .popBox h2{font-size:20px !important;}
}

@media screen and (max-width:420px){
	.button{min-width:70px; font-size:13px;}
	.button.lg{min-width:100px; font-size:14px;}

	.tabCol > ul > li > a{min-width:inherit; padding:5px 12px; font-size:13px;}
	
	.area_sitemap .gnb > li > ul > li > a{font-size:16px;}
	
	[data-pop-layer="layer"] .popBox h2{font-size:17px !important;}
	[data-pop-layer="layer"] .popBox h2 span{line-height:1.3em;}
}

@media screen and (max-width:320px){
	.button{padding:0 10px;}
	.button.lg{min-width:80px;}
	
	#content .mob_info{padding-left:50px; font-size:12px;}
	#content .mob_info:before{width:35px; height:18px;}
	
	[data-tooltip="explan"] .box{padding:10px;}
}