@charset "utf-8";

/* 
 * common CSS Document
 */

:root {
    --primary-color: #ad7c62;
}
 
/* 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:30px; background:url(../images/board/select_arrow.svg) no-repeat calc(100% - 10px) 50%; background-size:7px 7px;}
body[class*="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;}

/* text color */
.txt_point01{color: #895e3b;}
.txt_point02{color:#d1597f;}
.txt_point03{color:#74b777;}
.txt_point04{color:#989898;}
.txt_point05{color:#000;}
.txt_point06{color:#e69035;}

/* 필수입력 */
.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;}

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

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

/* button */
.btn_area{padding:30px 0; text-align:center;}
.btn_area.right{text-align:right;}
.btn_area.left{text-align:left;}
.button{display:inline-block; overflow:hidden; position:relative; min-width:100px; height:45px; line-height:43px; box-sizing:border-box; padding:0 15px; margin:2px 0px; background:#41464e; border:1px solid #25282d; color:#fff !important; 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:#c40251; border:1px solid #c40251;}
.button.blue{background:#2377d0; border:1px solid #1760ad;}
.button.black{background:#2d2b2b; border:1px solid #1f1f1f;}
.button.gray{background:#92999e; border:1px solid #92999e;}
.button.white{background:#fff; border:1px solid #cdcdcd; color:#444 !important;}
.button.lg{min-width:150px; height:50px; line-height:48px; font-size:16px; letter-spacing:-1px;}
.button.sm{min-width:60px; height:23px; line-height:21px; padding:0 10px; font-size:12px;}
.btn_area .button{height:45px; line-height:43px;}
.btn_area .button.sm{height:23px; line-height:21px;}
.btn_area .button.lg{height:50px; line-height:48px;}
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(-15deg); transition:transform 0.7s cubic-bezier(0, 0, 0.21, 0.87) 0s;}
.button:hover:before,
.button:focus:before{background:#fff; transform:translateX(-10%) skew(-15deg) perspective(500px);}
.button:hover,
.button:focus{color:#222 !important; box-shadow:0px 10px 15px rgba(0,0,0,0.15);}
input.button:hover,
input.button:focus{opacity:0.8; color:#fff !important;}
label.button.white:hover,
label.button.white:focus{color:#222 !important;}
label.button.white:before{display:none;}

/* table */
#content table.table{margin-top:15px; border-top:1px solid #868686;}
#content table.table thead th{background:#f5f5f5; border-bottom:1px dashed #cecece;}
#content table.table thead tr:last-child th{border-bottom:1px solid #868686;}
#content table.table thead th[rowspan]{border-bottom:1px solid #868686; border-right:1px dashed #cecece;}
#content table.table tbody th{background:#f5f5f5; border:1px solid #e0e0e0; border-right-color:#868686;}
#content table.table thead + tbody th{background:transparent; border-right-color:#e0e0e0;}
#content table.table th,
#content table.table td{padding:10px; letter-spacing:-0.5px; line-height:1.4em; word-break:keep-all;}
#content table.table th{text-align:center; font-weight:500;}
#content table.table tbody td{border:1px solid #e0e0e0; text-align:left;}
#content table.table tbody tr td:last-child{border-right-width:0px;}
#content table.table tbody tr td:first-child,
#content table.table tbody tr th:first-child{border-left-width:0px;}
#content table.table thead + tbody tr td{text-align:center;}
#content table.table .tal{text-align:left !important;}
#content table.table .tar{text-align:right !important;}
#content table.table .list{margin-top:0px;}
#content .mob_info{display:none;}

/* tab all - cols */
.tabCol ul{display:table; width:100%; table-layout:fixed;}
.tabCol ul > li{display:table-cell; margin-left:-0.1px; vertical-align:middle;}
.tabCol ul > li:first-child{margin-left:0px;}
.tabCol ul > li > a{display:block; text-align:center;}

/* 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[class*="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%);}

@media screen and (max-width:1024px){
	.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;}	
	
	[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{left:50% !important; transform:translateX(-50%);}
}

@media screen and (max-width:600px){
	#content .scrollTable{overflow:auto;}
	#content .scrollTable .table{width:650px;}
	#content .mob_info{display:block;}
	
	.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;position: fixed;}
	.layerPop img{max-width:100%; width:100%;}
	[data-pop-layer="layer"] .popBox h2{font-size:20px !important;}
}

@media screen and (max-width:420px){
	.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;}
}