@charset "utf-8";

/* 
 * common CSS Document
 */
 
/* 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:47px; padding:7px 8px; margin:2px 0px; border:1px solid #dedede; background:#fff; vertical-align:middle;}
textarea{resize:none;}
select{height:47px; padding:0 20px 0 8px; margin:2px 0px; border:1px solid #dedede; background:#fff url(../images/common/select_arrow.svg) no-repeat calc(100% - 10px) 50%; background-size:10px 7px; vertical-align:middle;}
select::-ms-expand {background-color:transparent; border:0;}
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%;}
input[type="text"],
input[type="password"],
input[type="submit"],
input[type="button"],
input[type="number"],
select{-webkit-border-radius:1px; -webkit-appearance:none;}
.ie select{padding-right:10px;}

::selection{background:#ffd79a; color:#fff; text-shadow:none;}
::-moz-selection{background:#ffd79a; color:#fff; text-shadow:none;}
::-webkit-selection{background:#ffd79a; color:#fff; text-shadow:none;}

.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 padding */
.mt0{margin-top:0px !important;}
.mt20{margin-top:20px !important;}
.mt30{margin-top:30px !important;}
.mt50{margin-top:50px !important;}
.mb20{margin-bottom:20px !important;}
.mb40{margin-bottom:40px !important;}
.ml40{margin-left:40px !important;}
.ml45{margin-left:45px !important;}
.pt100{padding-top:100px !important;}
/* text color */
.txt_red{color:#de4444 !important;}
.txt_blue{color:#496dd8 !important;}
.txt_green{color:#52ab71 !important;}
.txt_orange{color:#ff7728 !important;}
.txt_b{font-weight:500;}

/* button */
.area_btn{padding:45px 0 15px;text-align:center;}
.area_btn.tar{text-align:right;}
.area_btn.tal{text-align:left;}
.area_btn .button.lg.arrow{margin-right:10px; margin-left:10px;}
.button{display:inline-block; overflow:hidden; position:relative; min-width:100px; height:47px; line-height:47px; box-sizing:border-box; padding:0 15px; margin:2px 0px; background:#213059; border:1px solid #213059; border-radius:100px; color:#fff !important; text-align:center; vertical-align:top; transition:all 0.2s ease 0.1s;}
.button:before{content:''; opacity:0; display:block; position:absolute; top:50%; left:50%; z-index:1; width:100px; height:100px; margin-left:-50px; margin-top:-50px; background:#fff; border-radius:50%; transform-origin:50% 50%; transform:scale(0,0); transition:transform 0.8s ease-out 0s, opacity 0.3s ease 0s;}
input.button:before{display:none;}
.button:hover:before,
.button:focus:before{opacity:1; background:#fff; transform:scale(5,5);}
.button:hover,
.button:focus{z-index:10; color:#222 !important; box-shadow:15px 20px 20px rgba(0,0,0,0.20);}
.button.sm:hover,
.button.sm:focus{box-shadow:10px 10px 20px rgba(0,0,0,0.20);}
input.button:hover,
input.button:focus{opacity:0.8; color:#fff !important; box-shadow:2px 5px 10px ergba(0,0,0,0.15);}
.button span{position:relative; z-index:2;}
.button.red{background:#ef528a; border:1px solid #d4346d;}
.button.blue{background:#5191f1; border:1px solid #407bd4;}
.button.green{background:#5c9376; border:1px solid #3c7557;}
.button.black{background:#4f4f4f; border:1px solid #4f4f4f;}
.button.gray{background:#a7b0c9; border:1px solid #a6aec1;}
.button.white{background:#fff; border:1px solid #213059; color:#444 !important;}
.button.white:before{background-color:#213059;}
.button.white:hover,
.button.white:focus{border-color:#213059; color:#fff !important;}
.button.lg{min-width:150px; height:65px; line-height:63px; padding:0 30px; font-size:17px; letter-spacing:-1px;}
.button.sm{min-width:60px; height:23px; line-height:21px; padding:0 10px; font-size:12px;}
.button.arrow{padding-right:45px;}
.button.arrow.lg{min-width:200px; padding-right:65px;}
.button.arrow:before{opacity:0.3; left:auto; right:15px; width:20px; height:20px; margin-top:-10px; transform:scale(1,1);}
.button.arrow.lg:before{width:30px; height:30px; margin-top:-15px;}
.button.arrow:after{content:''; display:block; position:absolute; right:17px; top:50%; z-index:2; width:15px; height:8px; margin-top:-4px; background:url(../images/common/btn_arrow.svg) no-repeat 50% 50%; background-size:80%; transition:all 0.3s ease 0s;}
.button.arrow.lg:after{right:22px; background-size:100%;}
.button.arrow:hover,
.button.arrow:focus{color:#fff !important;}
.button.arrow:hover:before,
.button.arrow:focus:before{opacity:0;}
.button.arrow:hover:after,
.button.arrow:focus:after{right:10px;}
.button.arrow.lg:hover:after,
.button.arrow.lg:focus:after{right:15px;}
.button.arrow.white:hover,
.button.arrow.white:focus{color:#222 !important;}
.button.arrow.white:hover:after,
.button.arrow.white:focus:after{background-image:url(../images/common/btn_arrow_b.svg);}

/* table */
#content table.table{margin-top:15px; border-top:1px solid #c3cae6;}
#content table.table thead th{background:#edf0fb; border-bottom:1px dashed #cecece;}
#content table.table thead th[rowspan]{border-right:1px dashed #cecece;}
#content table.table tbody th{background:#f5f5f5; border:1px solid #e0e0e0; border-right-color:#f5f5f5;}
#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; 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.line thead th{border-right:1px dashed #cecece;}
#content table.table.line thead tr th:last-child{border-right-width:0px;}
#content table.table .tal{text-align:left !important;}
#content table.table .tar{text-align:right !important;}
#content table.table .list{margin-top:0px;}
#content table input[type="text"],
#content table input[type="password"],
#content table input[type="number"],
#content table select{height:35px;}
.mob_info{display:none; margin-top:10px; font-size:13px; text-align:right;}

/* tab */
.area_tabLine{margin-bottom:30px; border-bottom:1px solid #dedede;}
.area_tabLine:after{content:''; display:block; clear:both;}
.area_tabLine ul > li{float:left; margin-bottom:-1px;}
.area_tabLine ul > li > a{display:inline-block; position:relative; min-width:145px; height:45px; line-height:43px; box-sizing:border-box; padding:0 25px; background:#f5f5f5; border:1px solid #dedede; border-left-width:0px; text-align:center;}
.area_tabLine ul > li > a:before{content:''; position:absolute; top:-1px; left:-1px; display:block; width:calc(100% + 2px); height:2px; background:#4668cf; transform:scaleX(0); transition:all 0.5s ease;}
.area_tabLine ul > li:first-child > a{border-left-width:1px;}
.area_tabLine ul > li > a.on{background:#fff; border-bottom-color:#fff; color:#111;}
.area_tabLine ul > li > a.on:before{transform:scaleX(1);}

/* design radio */
.designRadio{display:inline-block; vertical-align:middle;}
.designRadio input[type="radio"]{position:absolute; opacity:0;}
.designRadio input[type="radio"] + label{position:relative; min-height:22px; padding-left:27px; padding-bottom:2px; margin-right:10px; cursor:pointer; line-height:1.4em;}
.designRadio input[type="radio"] + label:before{content:''; position:absolute; top:0; left:0px; width:22px; height:22px; background:url(../images/content/sp_radio.png) no-repeat 0 0;}
.designRadio.white input[type="radio"] + label:before{background:url(../images/content/sp_radio_w.png) no-repeat 0 0;}
.designRadio input[type="radio"]:checked + label:before{background-position:0px -22px;}
.designRadio input[type="radio"]:disabled + label:before{background-position:0px -44px;}

/* design checkbox */
.designCheck{display:inline-block; vertical-align:middle;}
.designCheck input[type="checkbox"]{position:absolute; opacity:0;}
.designCheck input[type="checkbox"] + label{position:relative; min-height:22px; padding-left:27px; padding-bottom:2px; margin-right:10px; cursor:pointer; line-height:1.4em;}
.designCheck input[type="checkbox"] + label:before{content:''; display:block; position:absolute; top:0px; left:0px; width:22px; height:22px; background:url(../images/content/sp_check.png) no-repeat 0 0;}
.designCheck.white input[type="checkbox"] + label:before{background:url(../images/content/sp_check_w.png) no-repeat 0 0;}
.designCheck input[type="checkbox"]:checked + label:before{background-position:0px -22px;}
.designCheck input[type="checkbox"]:disabled + label:before{background-position:0px -44px;}

.designCheck.noText input[type="checkbox"] + label,
.designRadio.noText input[type="radio"] + label{padding-left:22px; margin-right:0px; font-size:0px; vertical-align:top;}
.designCheck.noText input[type="checkbox"] + label:before,
.designRadio.noText input[type="radio"] + label:before{top:0px;}

/* design input */
.designInput input[type="text"],
.designInput input[type="password"],
.designInput input[type="number"],
.designInput select{width:100%; height:54px; border-color:#c3c9d2; border-radius:5px; padding-left:25px; font-size:16px;}
.designInput input[type="text"],
.designInput input[type="password"],
.designInput input[type="number"]{padding-right:20px;}
.designInput select{padding-right:40px;}
.designInput textarea{width:100%; height:100px; border-color:#c3c9d2; border-radius:5px; padding-left:20px; padding-right:20px;}
.designInput > *{position:relative; margin-bottom:30px;}
.designInput > * em{display:block; padding-left:15px; margin-bottom:15px; font-size:15px; font-weight:300; color:#222;}
.designInput input[type="text"] + label,
.designInput input[type="password"] + label,
.designInput input[type="number"] + label,
.designInput textarea + label,
.designInput select + label{position:absolute; top:-8px; left:20px; padding:3px 7px; background:#fff; font-size:13px; font-weight:300; color:#4f447e; letter-spacing:-0.5px;}
.designInput input[readonly],
.designInput input[readonly]{padding-left:85px !important;}
.designInput input[readonly] + label,
.designInput input[readonly] + label{background:transparent; left:10px; top:18px;}
.ie .designInput select{padding-right:10px;}

/* layer */
.wrap_layer{position:fixed; top:0px; left:0px; z-index:1000; width:100%; height:100%; background:rgba(0,0,0,0.2);}
.wrap_layer .box_layer{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%);}
.wrap_layer .box_layer h2{padding:15px 20px; border-bottom:1px solid #eee; font-size:25px; font-weight:500; letter-spacing:-1px;}
.wrap_layer .box_layer .btn_close{position:absolute; top:0px; right:-70px; width:70px; height:68px; line-height:68px; background:#f7c67a; font-family:'Work Sans', Sans-serif; font-size:30px; color:#fff; font-weight:300; box-shadow:3px 10px 15px rgba(0,0,0,0.15);}
.wrap_layer .box_layer .btn_close span{display:inline-block; position:relative; width:18px; height:18px; margin:-4px auto 0; vertical-align:middle; background:url(../images/common/btn_close.png) no-repeat 50% 0; background-size:18px 18px; text-indent:100%; overflow:hidden; white-space:nowrap;}
.wrap_layer .box_layer .btn_close:focus{outline:none;}
.wrap_layer .box_layer .conts{/* overflow-y:auto; */ max-height:532px; box-sizing:border-box; padding:20px 20px 40px;}
.ie .wrap_layer .box_layer h2{height:68px; box-sizing:border-box;}

/* pagination */
.pagination{padding-top:30px; text-align:center;}
.pagination > *{display:inline-block; min-width:33px; height:33px; box-sizing:border-box; border:1px solid #fff; color:#777; text-align:center; vertical-align:top; line-height:31px;}
.pagination a[class^="btn_"]{width:33px; border-color:#d8d8d8; background-color:#fff; background-image:url(../images/common/btn_pagination.png); background-repeat:no-repeat; text-indent:100%; overflow:hidden; white-space:nowrap;}
.pagination a[class^="btn_"]:hover,
.pagination a[class^="btn_"]:focus{background-position-y:-33px;}
.pagination a.btn_prev{background-position-x:-33px;}
.pagination a.btn_next{background-position-x:-66px;}
.pagination a.btn_last{background-position-x:-99px;}
.pagination span{background:#425fcc; color:#fff; font-weight:600;}
.pagination a:not([class^="btn_"]):hover,
.pagination a:not([class^="btn_"]):focus{border-color:#d8d8d8;}

@media screen and (max-width:1024px){
	body{overflow:inherit; position:relative;}
	body.showPop{overflow:hidden; position:fixed; width:100%;}

	.area_btn{padding:20px 0 15px;}
	.wrap_layer .box_layer{top:0px; left:0px; width:100%; height:100%; min-width:inherit; min-height:inherit; transform:translate(0,0);}
	.wrap_layer .box_layer h2{padding-right:80px;}
	.wrap_layer .box_layer .btn_close{right:0px; box-shadow:none;}
	.wrap_layer .box_layer .conts{overflow-y:auto; -webkit-overflow-scrolling:touch; max-height:inherit;}
}

@media screen and (max-width:640px){
	.button{height:40px; line-height:38px;}
	.button.lg{height:50px; line-height:48px;}
	.area_btn .button.lg.arrow{margin-right:2px; margin-left:2px;}
	
	.mob_info{display:block;}
	.scrollTable{overflow-x:auto; -webkit-transform:translateZ(0);}
	.scrollTable .table{width:700px;}
}

@media screen and (max-width:500px){
	.button.arrow.lg{min-width:150px;}
}

@media screen and (max-width:400px){
	.button.arrow.lg{min-width:130px; padding-right:55px;}
	.wrap_layer .box_layer h2{font-size:20px;}
	.wrap_layer .box_layer .btn_close{width:60px; height:60px;}
	.wrap_layer .box_layer .btn_close span{margin-top:-13px;}
}

@media screen and (max-width:375px){
	.designInput input[type="text"],
	.designInput input[type="password"],
	.designInput input[type="number"],
	.designInput select{padding-left:15px; padding-right:15px;}
}