@charset 'utf-8';

/* 박스 스타일 */
.box-white-survey {background:#fff;border:1px solid dimgray;overflow:hidden;position:relative; padding:10px; margin-bottom:20px;border-radius:5px;line-height:150%;font-size:11pt;}
.box-white {background:#fff;border:1px solid dimgray;overflow:hidden;position:relative; padding:10px; margin-bottom:20px;border-radius:5px;line-height:150%;font-size:14pt;font-weight:700;}
.box-primary {background:#fff;border:1px solid #ccc;overflow:hidden;position:relative;padding:10px ;margin-bottom:20px;border-radius:5px;line-height:150%;font-size:14pt;font-weight:700;}
.box-secondary {background:#fff;border:1px solid #f16664;overflow:hidden;position:relative;padding:10px ;margin-bottom:20px;border-radius:5px;line-height:150%;font-size:14pt;font-weight:700;}
.box-dark {background:#f8f8f8;border:1px solid dimgray;overflow:hidden;position:relative;padding:10px ;margin-bottom:20px;border-radius:5px;line-height:150%;font-size:14pt;font-weight:700;}

.no-border{border:1px solid #fff;}

.btn-area {position:relative; width:100%;margin-top:10px;}

.btn-area-fl {float:left; width:35%;margin-bottom:20px;}
.btn-area-fr {float:right; width:60%;text-align:right;margin-bottom:20px;}



.btn {	 
    background: #f5f5f5;
    color: #464646;
    border: 1px solid;
    border-color: #ababab;
    border-radius: 3px;
    transition: background-color 0.2s ease-in-out;
    transition-property: background-color;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
    display: inline-block;
    position: relative;
    padding: 8px 14px;
    margin-bottom: 0;
    font-family:'NanumBarunGothic';
    font-size: 13pt;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    text-decoration: none;
    overflow: hidden;
    text-shadow: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.btn:hover {background-color: #e8e8e8;font-family:'NanumBarunGothic';font-weight: 700;}

.btn-primary { color: #fff; background-color: #0087d7; border-color: #1a7496;}
.btn-primary:hover { color: #fff; background-color: #0065ca; border-color: #1a7496; }
.btn-primary:link, .btn-secondary:link,.btn-dark:link  { color: #fff;}

.btn-secondary { color: #fff; background-color: #f89d32; border-color: #f16664;}
.btn-secondary:hover { color: #fff; background-color: #f7931e; border-color: #f16664; }


.btn-dark { color: #fff; background-color: dimgray; border-color: #2b3942;}
.btn-dark:hover { color: #fff; background-color: #232323; border-color: #2b3942; }


.btn-white { color: #464646; background-color: #fff; border-color: #ababab;}
.btn-white:hover { color: #464646; background-color: #ededed; border-color: #ababab; }


.btn-fwb { font-weight:bold;}
.btn-small { font-family:'NanumBarunGothic'; font-size: 10pt; line-height: 12px; padding: 6px 8px 6px;}
.btn-large { font-family:'NanumBarunGothic'; font-size: 16pt; line-height: 24px; padding: 10px 16px;}


.btn-dot-h {background-image: url(../images/common/ico-dot-h.svg);
	background-position: center;
    background-repeat: no-repeat;
    content: '';
    height: 20px;
    width: 20px;
    }
.btn-dot-v {background-image: url(../images/common/ico-dot-v.svg);
	background-position: center;
    background-repeat: no-repeat;
    content: '';
    height: 20px;
    width: 20px;
    }
    
    
.btn-circle { width: 36px; height: 36px; border-radius: 50%;}

.btn-doc::before { 
	background-image: url(../images/common/ico-doc.svg);
	background-position: center;
    background-repeat: no-repeat;
    content: '';
    display: inline-block;
    height: 20px; width: 20px;
    position: absolute;
    left: 12px; top: 7px;
}
.btn-doc { padding-left: 40px;}

.btn-gear::before { 
	background-image: url(../images/icons-png/gear-black.png);
	background-position: center;
    background-repeat: no-repeat;
    content: '';
    display: inline-block;
    height: 20px; width: 20px;
    position: absolute;
    left: 10px; top: 8px;
}
.btn-gear { padding-left: 35px;}

.btn-check::before { 
	background-image: url(../images/icons-png/check-black.png);
	background-position: center;
    background-repeat: no-repeat;
    content: '';
    display: inline-block;
    height: 20px; width: 20px;
    position: absolute;
    left: 10px; top: 8px;
}
.btn-check { padding-left: 35px;}

.btn-check-w::before { 
	background-image: url(../images/icons-png/check-white.png);
	background-position: center;
    background-repeat: no-repeat;
    content: '';
    display: inline-block;
    height: 20px; width: 20px;
    position: absolute;
    left: 2px; top: 2px;
}
.btn-check-w { padding-left: 35px;}

.btn-forbidden::before { 
	background-image: url(../images/icons-png/forbidden-black.png);
	background-position: center;
    background-repeat: no-repeat;
    content: '';
    display: inline-block;
    height: 20px; width: 20px;
    position: absolute;
    left: 2px; top: 2px;
}
.btn-forbidden { padding-left: 35px;}


.btn-forbidden-w::before { 
	background-image: url(../images/icons-png/forbidden-white.png);
	background-position: center;
    background-repeat: no-repeat;
    content: '';
    display: inline-block;
    height: 20px; width: 20px;
    position: absolute;
    left: 2px; top: 2px;
}
.btn-forbidden-w { padding-left: 35px;}


.btn-gear-w::before { 
	background-image: url(../images/icons-png/gear-white.png);
	background-position: center;
    background-repeat: no-repeat;
    content: '';
    display: inline-block;
    height: 20px; width: 20px;
    position: absolute;
    left: 2px; top: 2px;
}
.btn-gear-w { padding-left: 35px;}


.btn-plus::before { 
	background-image: url(../images/icons-png/plus-black.png);
	background-position: center;
    background-repeat: no-repeat;
    content: '';
    display: inline-block;
    height: 20px; width: 20px;
    position: absolute;
 	left: 10px; top: 8px;
}
.btn-plus { padding-left: 35px;}

.btn-minus::before { 
	background-image: url(../images/icons-png/minus-black.png);
	background-position: center;
    background-repeat: no-repeat;
    content: '';
    display: inline-block;
    height: 20px; width: 20px;
    position: absolute;
    left: 10px; top: 8px;
}
.btn-minus { padding-left: 35px;}

.btn-del::before { 
	background-image: url(../images/icons-png/delete-black.png);
	background-position: center;
    background-repeat: no-repeat;
    content: '';
    display: inline-block;
    height: 20px; width: 20px;
    position: absolute;
    left: 10px; top: 8px;
}
.btn-del { padding-left: 35px;}

.btn-search::before { 
	background-image: url(../images/icons-png/search-black.png);
	background-position: center;
    background-repeat: no-repeat;
    content: '';
    display: inline-block;
    height: 20px; width: 20px;
    position: absolute;
    left: 10px; top: 8px;
}
.btn-search { padding-left: 35px;}

.no-word12 {padding-left: 12px;}
.no-word {padding-left: 20px;}
.btn-group { position: relative; display: inline-block; font-size: 0; vertical-align: middle; white-space: nowrap; }
.btn.active { box-shadow: none;z-index: 2; background: dimgray; border-color: #4f4f4f; color: #fff;}
.btn-group>.btn:first-child { margin-left: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.btn-group>.btn:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.btn-group>.btn+.btn { margin-left: -1px; }
.btn-group>.btn { position: relative; border-radius: 0;
}


input[type='text'], input[type='password'] {
    height: 20px;
    padding: 8px 14px;
    line-height: 20px;
    border: 1px solid #ababab;
    border-radius: 3px;
    outline: none;
    vertical-align: middle;
    font-family:'NanumBarunGothic';
    font-size:14px;
}
input[type='text']:focus,input[type='password']:focus{font-family:'NanumBarunGothic';padding: 8px 14px;border:1px solid #2b3942}
.import input[type='text']:focus, .import input[type='password']:focus, .import textarea:focus { 
	/*display:inline;padding:8px 14px; border:2px solid #f16664;*/
	/* BUTTON 정의 CSS  ----------------------------------------------------------------------*/
	padding: 8px 14px;border:1px solid #2b3942;
	}
 
input[type='file']{height:20px;padding:8px 14px;line-height:20px;border:1px solid #ababab;border-radius:3px;outline:none;vertical-align:middle;background-color: #fff;}
input[type='file']:focus{padding:8px 14px;border:1px solid #2b3942}


textarea{font-family:'NanumBarunGothic'; font-size:14px;width:99%;padding:8px 14px;line-height:20px;border:1px solid #ababab;border-radius:3px;outline:none;vertical-align:middle}
textarea:focus{padding:8px 14px;border:1px solid #2b3942}

.frmChk, .frmRad{position:relative;display:inline-block;line-height:20px;z-index:0}
.frmChk{width:20px;min-height:20px}
.frmChk input[type=checkbox], .frmRad input[type=radio]{position:absolute;top:1px;left:1px;width:19px;height:19px;margin:0;padding:0;z-index:1}

.frmChk label, .frmRad label{display:block;cursor:pointer;}
.frmChk label:before, .frmRad label:before{
		position:absolute;top:0;left:0;display:inline-block;
		content:'';width:20px;height:20px;background:url(../images/common/bg-frm-red.png) no-repeat 0 -23px;background:none\9;z-index:2}

.frmChk input[type=checkbox]:checked + label:before, .frmChk input[type=checkbox]:checked + span:before{background-position:-23px -23px}
.frmChk input[type=checkbox]:disabled + label, .frmRad input[type=radio]:disabled + label{cursor:default}
.frmChk input[type=checkbox]:disabled + label:before{background-position:-46px -23px}
.frmChk input[type=checkbox]:disabled:checked + label:before{background-position:-69px -23px}
.frmChk.chkTxt{width:auto}

.frmChk.chkBack label{padding:0 10px 0 25px;}
.frmChk.chkBack label:before{position:absolute;top:50%;left:0;right:auto;margin-top:-10px;padding:0}
.frmChk.chkBack input[type=checkbox]{left:1px;right:auto;}


.frmRad{width:19px;min-height:19px;line-height:19px}
.frmRad.radTxt{width:auto}
.frmRad label{padding:0 10px 0 25px;}
.frmRad input[type=radio]{top:0;left:0;width:19px;height:19px}
.frmRad label:before{width:19px;height:19px;background-position:0 0}
.frmRad input[type=radio]:checked + label:before{background-position:-23px 0}
.frmRad input:disabled{background:none}
.frmRad input[type=radio]:disabled + label:before{background-position:-46px 0}
.frmRad input[type=radio]:disabled:checked + label:before{background-position:-69px 0}

.frmSel{
		position:relative;display:inline-block;height:38px;text-align:left;z-index:99;vertical-align:middle;
		font-family:'NanumBarunGothic';
    	font-size:14px;
}
.frmSel select{
		height:38px;padding-left:10px;border:1px solid #ababab;border-radius:3px;background:#fff;
		font-family:'NanumBarunGothic';
    	font-size:14px;
}
select:focus{border:1px solid #2b3942}

.calendar {height:38px;width:135px;border:1px solid #ababab;border-radius:3px;background:#fff;display:inline-block;}
.calendar input[type=text]{height:34px;width:85px;padding:2px 10px;border:0;background:#fff}



/* 탭 */
.tab-main-fix {position:relative;overflow:hidden;margin-bottom:25px;}
.tab-main-fix li {float:left; }
.tab-main-fix li a {display:block;text-align:center;padding:18px 0 12px 0;transform:all .5s ease;transition:background .3s, border-color .3s;border-right:1px solid #ccc;background:#f6f7f9;border-bottom:1px solid #ccc;}
.tab-main-fix li.first-row.active a, .tab-main-fix li.active a {margin-top:0;background:#fff;border-bottom:1px solid #fff;}
.tab-main-fix li:last-child a {border-right:1px solid #fff;}
.tab-main-fix li a span {display:inline-block;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:85%;margin:0 auto;}
.tab-main-fix li.active a span {color:#222222;font-weight:700;/*text-decoration:underline;*/}
.tab-main-fix li.active.first-row:last-child a {border-right:1px solid #fff;}
.tab-main-fix ul li.active a span:after {width:11px;margin-left:-5px;}



.tab-box-fix {position:relative;overflow:hidden;margin-bottom:30px; border-left:1px solid #cfd7d7;font-family:'NanumBarunGothic'; background:#f8f8f8;border-top:1px solid #cfd7d7;}
.tab-box-fix .this-wrap {/*background:url(/_Img/Content/ctab01_bg.png) no-repeat right bottom;*/}
.tab-box-fix li {float:left; }
.tab-box-fix li a {display:block;text-align:center;padding:18px 0 15px 0;transform:all .5s ease;transition:background .3s, border-color .3s;border-right:1px solid #cfd7d7;background:#fff;border-bottom:1px solid #ccc;}
.tab-box-fix li.first-row a {border-top:1px solid #cfd7d7;padding-top:13px;}
/* .tab-box-fix li.first-row.active a, .tab-box-fix li.active a, .tab-box-fix li.active:hover a  {margin-top:0;background:#f16664;border-color:#f16664} */
.tab-box-fix li.first-row.active a, .tab-box-fix li.active a, .tab-box-fix li.active:hover a  {margin-top:0;background:#4b4b4b;border-color:#d2d2d2;}

.tab-box-fix li:hover a {background:#eee;}
.tab-box-fix li:hover a span {text-decoration:none;}
.tab-box-fix li a span {display:inline-block;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:86%;margin:0 auto;}
.tab-box-fix li.active a span {color:#fff;font-weight:700;/*text-decoration:underline;*/}
.tab-box-fix li.active.first-row:last-child a {border-right:1px solid #028f95;}
.tab-box-fix ul li.active a span:after {width:11px;margin-left:-5px;}

.tab-box-down {position:relative;overflow:hidden;margin-bottom:30px;font-family:'NanumBarunGothic';border-top:1px solid #cfd7d7;border-left:1px solid #cfd7d7;background:#f8f8f8;}
.tab-box-down li {float:left;width:20%;}
.tab-box-down li a {display:block;text-align:center;padding:14px 0 15px 0;height:20px;transform:all .5s ease;transition:background .3s, border-color .3s;border-right:1px solid #cfd7d7;background:#fff;border-bottom:1px solid #ccc; font-size:11px}
.tab-box-down li.first-row a {border-top:1px solid #cfd7d7;padding-top:13px;}
.tab-box-down li.first-row.active a, .tab-box-down li.active a, .tab-box-down li.active:hover a  {margin-top:0;background:#f16664;border-color:#f16664}
.tab-box-down li:hover a {background:#eee;}
.tab-box-down li:hover a span {text-decoration:none;}
.tab-box-down li a span {display:inline-block;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:86%;margin:0 auto;}
.tab-box-down li.active a span {color:#fff;font-weight:600;/*text-decoration:underline;*/}
.tab-box-down li.active.first-row:last-child a {border-right:1px solid #028f95;}
.tab-box-down ul li.active a span:after {width:11px;margin-left:-5px;}

.tab-line-fix {position:relative;margin-bottom:1rem;}
.tab-line-fix:after {content:'';display:block;clear:both;}
.tab-line-fix ul li {position:relative;float:left;margin:0 25px;font-weight:700;}
.tab-line-fix ul li:before {position:absolute;top:50%;left:-25px;margin-top:-8px;content:'';display:block;width:1px;height:15px;background:#ddd;}
.tab-line-fix ul li:first-child {margin-left:0;}
.tab-line-fix ul li:first-child:before {display:none;}
.tab-line-fix ul li a {display:block;line-height:1;}
.tab-line-fix ul li a span {position:relative;font-size:1.2rem;display:block;color:#333;padding-top:15px;padding-bottom:15px;}
.tab-line-fix ul li a span:after {position:absolute;bottom:0;left:50%;content:'';display:block;width:0;height:1px;background:#ccc;transition:all .3s ease;}
.tab-line-fix ul li a:hover span {}
.tab-line-fix ul li a:hover span:after {width:100%;left:0;}
.tab-line-fix ul li.active a span {color:#f16664;}
.tab-line-fix ul li.active a span:before {content:'';display:inline-block;vertical-align:middle;width:8px;height:3px;background:#f16664;margin-right:11px;margin-top:-2px;}
.tab-line-fix ul li.active a span:after {width:100%;left:0;height:2px;background-color:#f16664;}



/* Tablet & Desktop – 768px 이상 해상도에서 해석하는 코드 */
@media (min-width:1024px){
	.tab-box-down li { width:20%; }
}
 
 /* Tablet – 768px~1024px 해상도에서 해석하는 코드 */
@media (min-width:768px) and (max-width:1024px){
	.tab-box-down li { width:25%; }
	.tab-line-fix ul li a span {font-size:1rem;}
}

/* Tablet – 480px~768px 해상도에서 해석하는 코드 */
@media (min-width:480px) and (max-width:767px){
	.tab-box-down li { width:33.3%; }
	.tab-line-fix ul li a span {font-size:13px;}
	.box-white  {font-size:13px;}
	.box-primary  {font-size:13px;}
	.box-secondary  {font-size:13px;}
	.box-dark  {font-size:13px;}
}

/* Mobile – 480px 이하 해상도에서 해석하는 코드 */
@media (max-width:479px){
	.tab-box-down li { width:50%; }	
	.tab-line-fix ul li a span {font-size:11px;}
	.box-white  {font-size:11px;}
	.box-primary  {font-size:11px;}
	.box-secondary  {font-size:11px;}
	.box-dark  {font-size:11px;}
}