@charset "utf-8";

.btn_menu,
#search{display:none;}

.logo {font-family: 'Noto Sans KR'; font-weight: 800; letter-spacing: -0.05em;}
.logo span > span {font-size: 18px;font-weight: 800;letter-spacing: -0.05em;padding: 6px 0 0;}
.logo strong {padding: 3px 0 0;font-size: 32px;font-weight: 900;letter-spacing: -0.05em;}
.logo strong span {font-size: 25px;font-weight: 400;vertical-align: baseline;}

@media all and (max-width:1024px) {
	.btn_menu{display:block;}
	.logo span > span {padding: 0;font-size:16px;}
	.logo strong {padding: 2px 0 0;font-size: 25px;line-height: 1;}
	.logo strong span {font-size: 18px;}
}
@media all and (max-width:568px) {
    .logo span > span {font-size:14px;}
	.logo strong {padding: 2px 0 0;font-size: 22px;line-height: 1;}
	.logo strong span {font-size: 16px;}
}
@media all and (max-width:380px) {

}

/* 메인메뉴 */
#menuArea {overflow: visible;}
#menuArea.on{box-shadow:none;}
#menuArea:after{z-index:95;}
#menuArea:before,
#menuArea.on:before,
#menuArea.on:after,
#topmenu .menu:before{display: none;}
#topmenu > li {position:relative; width:16.66%;}

#topmenu .menu > ul > li:hover > a,
#topmenu .menu > ul > li.current_on > a,
#topmenu .menu > ul > li > a:hover{color:#fff;}

#topmenu li .menu{z-index:96; visibility:hidden; opacity:0; position:absolute; top:85px; left:50%; width:180px; min-height:0; padding:21px 0; box-shadow:3px 3px 18px rgba(0,0,0,0.1); transform:translateX(-50%); text-align:center; background:#2c9f9d; transition:0.22s ease-in-out; }
#topmenu li.active .menu{visibility:visible; opacity:1; top:100px;}

#topmenu .menu > ul > li{width:100%; padding:0; margin:0 0 7px;}
#topmenu .menu > ul > li > a{height:auto; line-height:110%; padding:10px 0; color:#fff; text-decoration:none;}
#topmenu .menu > ul > li > a,
#topmenu .menu > ul > li:hover > a, 
#topmenu .menu > ul > li.current_on > a, 
#topmenu .menu > ul > li > a:hover{background:transparent; border:none; box-shadow: none;}
#topmenu li li a{font-size:17px; font-weight:400;}
#topmenu li li a span{position:relative; display:inline-block; padding:0 18px;}
#topmenu li li a span:after{content:''; display:block; position: absolute; bottom:-8px; left:50%; width:0; height:2px; background:rgba(255,255,255,0.5);}
#topmenu li li a:hover span:after{left:0; width:100%; transition:0.18s ease-in-out;}

#footer {background: #242b34;}
#footer .info {padding: 0; text-align: center;}


@media all and (max-width:1280px) {
	#topmenu > li > a {font-size:18px;} 
}
@media all and (max-width:768px) {
    #footer {padding:35px 0;}
}

#subVisual {background-image: url(/images/member/sub/subvisual.jpg);}
#pageTitle h3 {color: #333;}
.snb{float:left; font-size:18px;}
.snb > li{position:relative; float:left; min-width:220px;}
.snb > li > a{display:block; position:relative; line-height:70px; padding:0 45px 0 33px; font-weight:500; color:#fff; border-right:1px solid rgba(255,255,255,0.2);}
.snb > li > a:after{content:''; display:block; position:absolute; top:50%; right:30px; width:13px; height:8px; margin:-4px 0 0 0; transition:0.3s ease; background:url(/images/member/sub/ico_arrow_w.png) no-repeat;}
.snb > li > a.on:after{transform:rotate(180deg); opacity:1;}
.snb > li > a.on,
.snb > li > a:hover{background:rgba(255,255,255,0.06);}
.snb ul{display:none; z-index:3; position:absolute; top:70px; left:-1px; width:calc(100% + 1px); border:1px solid #e6e6e6; border-top:none; background:#fff; box-sizing:border-box; box-shadow:2px 8px 10px rgba(0,0,0,0.1);}
.snb ul li{width:100%;}
.snb ul a{display:block; line-height:53px; padding:0 0 0 28px;}
.snb ul li + li a{border-top:1px solid #e6e6e6;}
.snb ul a.on,
.snb ul a:hover,
.snb ul a:focus,
.snb ul a:active{background:#f7f7f7;}
@media all and (max-width:1430px) {

}
@media all and (max-width:1024px) {
	.snb {font-size:16px;}
	.snb > li{min-width:180px;}
	.snb > li > a{height:54px; padding:0 35px 0 20px; line-height:54px;}
	.snb > li > a:after{right:17px;}
	.snb ul{top:54px;}
	.snb ul a{line-height:47px; padding:0 0 0 20px;}
}
@media all and (max-width:768px) {
	.snb{font-size:15px;}
	.snb > li {min-width:165px;}
	.snb > li > a{height:47px; line-height:48px;}
	.snb ul{top:47px;}
	.snb ul a{line-height:42px;}
}
@media all and (max-width:568px) {

	.snb{font-size:14px;}
	.snb > li {min-width:120px;}
	.snb > li > a{height:40px; padding:0 24px 0 15px; line-height:40px;}
	.snb > li > a:after{right:12px;}
	.snb ul{top:41px;}
	.snb ul a{padding:0 0 0 15px; line-height:36px;}
}
@media all and (max-width:380px) {
	.snb {font-size:13px;}
	.snb > li{min-width:100px;}
	.snb > li > a{height:38px; line-height:38px; padding:0 21px 0 12px;}
	.snb > li > a:after{right:9px;}
	.snb ul{top:38px;}
	.snb ul a{padding:0 0 0 12px; line-height:35px;}
}

