@charset "utf-8";

/* 
 * common CSS Document
 * KOWEB kimhynho 
 */
 
/* 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],
textarea{height:33px; padding:7px 8px; border:1px solid #ddd; background:#fff; vertical-align:middle;}
select{height:33px; padding:0 8px; border:1px solid #ddd; background:#fff; 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%;}
table td{font-weight:300;}
table th{font-weight:400;}

.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;}

/* button */
.btn_area{padding:15px 0;text-align:center;}
.btn_area.right{text-align:right;}
.btn_area.left{text-align:left;}
.button{display:inline-block; position:relative; min-width:100px; height:33px; line-height:31px; box-sizing:border-box; padding:0 15px; background:#41464e; border:1px solid #25282d; color:#fff !important; text-align:center; vertical-align:top; transition:all 0.2s ease 0.1s;}
.button:before{content:''; display:block; position:absolute; top:0px; right:0px; bottom:0px; left:0px; z-index:1; width:100%; height:31px; background:#fff; transform-origin:50%; transform:scaleX(0); transition:transform 0.2s ease-out 0s;}
.button:hover:before,
.button:focus:before{background:#fff; transform:scaleX(1);}
.button:hover,
.button:focus{color:#222 !important; box-shadow:3px 3px 0 rgba(0,0,0,0.15);}
input.button:hover,
input.button:focus{opacity:0.8; color:#fff !important; box-shadow:3px 3px 0 rgba(0,0,0,0.15);}
.button span{position:relative; z-index:2;}
.button.red{background:#c40251; border:1px solid #c40251;}
.button.blue{background:#17a2e2; border:1px solid #1a87ba;}
.button.black{background:#4f4f4f; border:1px solid #4f4f4f;}
.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:40px; line-height:38px; font-size:16px; letter-spacing:-1px;}
.button.lg:before{height:38px;}
.button.sm{min-width:60px; height:23px; line-height:21px; padding:0 10px; font-size:12px;}
.button.sm:before{height:21px;}

/* table */
#content table.table{margin-top:15px; border-top:1px solid #868686}
#content table.table tbody th,
#content table.table tbody td{padding:20px 20px; border:1px solid #ededed;}
#content table.table thead th{padding:20px 20px; background:#f8f8f8; font-weight:400; border:1px solid #dcdcdc;}
#content table.table thead tr th:first-child{border-left-width:0px;}
#content table.table thead tr th:last-child{border-right-width:0px;}
#content table.table tbody tr td:first-child{border-left-width:0px;}
#content table.table tbody tr td:last-child{border-right-width:0px;}
#content table.table thead + tbody th{background-color:#f6fbff; font-weight:400;}
#content table.table thead + tbody tr th:first-child{border-left-width:0px;}
#content table.table colgroup + tbody th{background-color:#f8f8f8; font-size:18px; color:#333; font-weight:400; letter-spacing:-1px; word-break:keep-all; line-height:1.3em;}
#content table.table colgroup + tbody th em{display:block; font-family:'Open Sans', Sans-serif; font-size:16px; color:#0ab299; font-weight:500; letter-spacing:0px; line-height:1.2em;}
#content table.table colgroup + tbody td{font-weight:300; letter-spacing:-0.5px; word-break:keep-all; color:#666;}
#content table.table td{font-weight:300;}
#content table.table .taL{text-align:left !important;}
#content table.table .taR{text-align:right !important;}

/* tab all - cols */
.tabCol ul{display:table; width:100%; table-layout:fixed;}
.tabCol ul > li{display:table-cell; background:rgba(35,71,180,0.9); margin-left:-0.1px;}
.tabCol ul > li:first-child{margin-left:0px;}
.tabCol .col02 > li{width:calc(100% / 2); width:-webkit-calc(100% / 2); width:-moz-calc(100% / 2);}
.tabCol .col03 > li{width:calc(100% / 3); width:-webkit-calc(100% / 3); width:-moz-calc(100% / 3);}
.tabCol .col04 > li{width:calc(100% / 4); width:-webkit-calc(100% / 4); width:-moz-calc(100% / 4);}
.tabCol .col05 > li{width:calc(100% / 5); width:-webkit-calc(100% / 5); width:-moz-calc(100% / 5);}
.tabCol .col06 > li{width:calc(100% / 6); width:-webkit-calc(100% / 6); width:-moz-calc(100% / 6);}
.tabCol .col07 > li{width:calc(100% / 7); width:-webkit-calc(100% / 7); width:-moz-calc(100% / 7);}

@media all and (max-width:600px){
	#content .scrollTable{overflow:auto;}
	#content .scrollTable .table{width:650px;}
}