@charset "utf-8";

/* background fixed 사용시 버그 대응용 * 한 번 스크롤로 페이지 전체 넘김을 할 때는 html스타일에서 height속성 제거하기 */
/* html {overflow: hidden; height: 100%;} */
/* body {overflow: auto; height: 100%;} */

/* ******************** 공용 ******************** */

body {font-family:'NotoSansKR'; font-size:16px; font-weight:400; line-height:1.6; color:#666; word-break:keep-all; height:100vh; overflow:hidden;}
body * {box-sizing:border-box;}

a {color:#666; transition:all .3s;}
a:hover {color:#000;}

#gotop {visibility:hidden; position:fixed; right:30px; bottom:250px; padding:0; display:block; font-size:12px; font-weight:500; color:#5b6689; letter-spacing:-1px;  background:transparent; transition:all .3s;  cursor:pointer; }
#gotop:before {
	content:''; display:block; width:58px; height:58px; border-radius:50%;
	background:#5b6689 url(../images/common/i-top.png)center no-repeat;
	position:relative; top:0;
}
form *:focus {outline:0;}
button {background:transparent; cursor:pointer;}
select { 
	padding:0 10px;
	padding-right:40px;
    -webkit-appearance: none; /* 네이티브 외형 감추기 */ 
    -moz-appearance: none; border:1px solid #e5e5e5;
    appearance: none; cursor:pointer;
    background: url(../images/common/select_arrow.svg) no-repeat right 15px center; /* 화살표 모양의 이미지 */ 
} 
select::-ms-expand {display: none;} /* IE 10, 11의 네이티브 화살표 숨기기 */ 
select::focus {outline:none}

input[type='text'] {padding:7px 10px; -webkit-appearance: none; border:1px solid #e5e5e5;}
textarea {padding:7px 10px; resize:none; border:1px solid #e5e5e5; line-height:1.6;}



.c_green {color:#00b38d !important;}
.c_blue {color:#00a4e0 !important;}

header {position:absolute; left:0; top:0; width:100%; height:80px; z-index:999999; border-bottom:1px solid #e5e5e5; background:#f9f9f9;}
header .head-wrap {position:relative; width:100%; padding:0 30px;}
header .head-wrap .logo {position:relative; z-index:99; float:left; margin-top:15px;}
header .head-wrap .logo a {display:inline-block}
header .head-wrap .logo a img {}


.headerH {height:80px;}

.userInfo {position:absolute; right:30px; top:20px;}
.userInfo p {display:inline-block; vertical-align:middle;}
.userInfo p b {font-weight:500; color:#000;}
.userInfo p a {padding:6px 15px; display:block; margin-left:20px; border-radius:5px; background:#00b38d; color:#fff; font-size:14px;}

.gnb {float:left; width:270px; height:calc(100vh - 80px); overflow-y:auto;}
.gnb>ul {}
.gnb>ul>li {}
.gnb>ul>li>a {display:block; padding:0 20px 0 30px; line-height:50px; border-bottom:1px solid #e5e5e5; font-size:17px; color:#000;}
.gnb>ul>li>a:hover {background:#f9f9f9;}
.gnb>ul>li.on>a {background:#00b38d;color:#fff;border-color:transparent;}
.gnb>ul>li>ul {background:#f5f5f5;}
.gnb>ul>li>ul>li {}
.gnb>ul>li>ul>li>a {display:block; padding:0 20px 0 50px; line-height:42px; border-bottom:1px solid #e5e5e5; font-size:15px; position:relative;}
.gnb>ul>li>ul>li>a:before {content:''; display:block; width:3px; height:3px; background:#666; position:absolute; left:40px; top:20px;}
.gnb>ul>li>ul>li>a:hover {}
.gnb>ul>li>ul>li.on>a {color:#00b38d;}
.gnb>ul>li>ul>li.on>a:before {background:#00b38d;}


/* ***** contents ***** */
.contents {position:relative; max-width:100%; overflow:hidden;}
.contents-wrap {padding:30px; float:left; width:calc(100% - 270px); height:calc(100vh - 80px); overflow-y:auto; border-left:1px solid #e5e5e5;}
.sub-title {position:relative; padding:0 0 16px 0; margin:0 0 20px 0; border-bottom:1px solid #e5e5e5;}
.sub-title h2 {font-size:24px; font-weight:700; color:#000;}
.sub-title ul{position:absolute; right:0; top:0; overflow:hidden;}
.sub-title ul li{float:left; position:relative;}
.sub-title ul li+li {padding-left:40px; }
.sub-title ul li+li:before {content:">"; position:absolute; left:15px;}


/* ***** footer ***** */
footer {padding:50px 0; border-top:1px solid #e5e5e5; font-weight:300;}
footer .footer-wrap {width:1400px; margin:0 auto; max-width:100%; position:relative;}
footer .footer-logo {padding-bottom:30px;}
footer .footer-logo img {}
footer .footer-info {}
footer .footer-info address {}
footer .footer-info address p {line-height:2;}
footer .footer-info address p span {padding-right:20px;}
footer .footer-info address p.copy {}
footer .footer-btnWrap {position:absolute; right:0; top:0;}
footer .footer-btnWrap .btn {display:block; width:220px; padding:10px 0 10px 20px; border:1px solid #e5e5e5; color:#666; font-weight:300;}
footer .footer-btnWrap .btn {background:url(../images/common/i-plus.png)calc(100% - 15px) 50% no-repeat;}
footer .footer-btnWrap>.btn {margin-bottom:10px;}
footer .footer-btnWrap .family .btn {background-image:url(../images/common/i-arrow.png);}
footer .footer-btnWrap .btn:hover {background-color:#f6f6f6 !important;}
footer .footer-btnWrap .family {position:relative;}
footer .footer-btnWrap .family ul {display:none; position:absolute; bottom:45px; left:0; width:100%;}
footer .footer-btnWrap .family ul {border:1px solid #e5e5e5; box-shadow:0 0 5px rgba(0,0,0,0.2);}
footer .footer-btnWrap .family:hover ul {display:block;}
footer .footer-btnWrap .family ul li+li { border-top:1px solid #e5e5e5;}
footer .footer-btnWrap .family ul li a {padding:10px 20px; background:#fff; display:block;}
footer .footer-btnWrap .family ul li a:hover {background:#00b38d; color:#fff;}