/* common */
html {overflow-y:scroll;}
html, body {height:100%;}
body, input, button, select, textarea, sub {color:#333; font-size:15px; font-family:Roboto, 'Noto Sans KR', '돋움', dotum, sans-serif; line-height:1.4;}
input, select {font-size:14px;}
button {padding:0; border:none; background:transparent;}
strong, em {font-weight:bold;}
th, td {vertical-align:middle;}
img {max-width:100%;}
@media screen and (-webkit-min-device-pixel-ratio:1.5) {
body, input, button, select, textarea, sub, h1, h2, h3, h4 {font-family:arial, sans-serif;}
select {padding-right:20px; -webkit-appearance:none; border-radius:0;}
input[type="text"], input[type="password"], input[type="submit"], input[type="tel"], input[type="email"], textarea {-webkit-appearance:none; border-radius:0;}
input[type="radio"] {border:1px solid #b9b9b9;}
input[type="checkbox"] {border:1px solid #b9b9b9;}
input[type="file"] {width:100%;}
}
@media screen and (max-width:620px) {
body, input, button, select, textarea, sub {font-size:14px;}
}
/* 공통 */
#wrap {position:relative; margin:0 50px; min-width:320px}
#container {min-height:700px;}
.inner {position:relative; margin:0 auto; max-width:1200px;}
.inner_oth {position:relative; margin:0 auto; max-width:100%;}
/* header */
#header .head_util {position:absolute; top:0; left:0; right:0; height:92px;}
#header .head_util:after {content:''; display:block; clear:both;}
#header .head_util h1 {position:absolute; left:0; top:19px; z-index:11;}
#header .head_util h2 {position:relative; float:right; padding-top:27px; padding-right:20px; z-index:100;}
#header .head_util h2 > span {display:none;}
#header .nav_all {display:none; position:absolute; top:0; right:0;}
#header .nav_all button {width:65px; height:65px; text-align:center; line-height:65px; font-size:28px}
/* gnb */
#gnb {position:relative; z-index:10; height:93px; border-bottom:1px solid #ebebeb; }
#gnb > ul {text-align:center;}
#gnb > ul > li {display:inline-block;}
#gnb > ul > li > a {display:block; padding:33px 35px; font-size:18.5px; font-weight:500; font-family:SCore; letter-spacing:-1px; text-decoration:none;}
#gnb > ul > li > a:hover {color:#000;}
#gnb > ul > li.hover > ul {display:block; z-index:25;}
#gnb > ul > li.on > a {font-weight:bold}
#gnb > ul > li > ul {position:absolute; display:none; top:93px; left:0; width:100%; z-index:20; height:55px; border-bottom:1px solid #ebebeb; background:#fff;}
#gnb > ul > li > ul > li {display:inline-block;}
#gnb > ul > li > ul > li > a {display:inline-block; padding:0 20px; line-height:55px; font-size:17px; font-weight:300; color:#333; text-decoration:none; }
#gnb > ul > li > ul > li > a:hover {color:#7cbc1d; }
#gnb > ul > li > ul > li.on {position:relative;}
#gnb > ul > li > ul > li.on:before {position:absolute; right:7px; top:18px; display:block; width:5px; height:5px; border-radius:5px; content:''; background:#7cbc1d;}
#gnb > ul > li > ul > li.on > a {color:#7cbc1d; font-weight:bold;}
#gnb > ul > li > ul > li > ul {display:none;}
#gnb > ul > li.on > ul {display:block !important;}
#gnb.open .bg {display:block;}
@media screen and (max-width:1350px) {
#gnb > ul > li > a {padding-left:20px; padding-right:20px;}
#gnb > ul > li > ul > li > a {padding:0 10px; font-size:15px;}
#gnb > ul > li > ul > li.on:before {right:0;}
}
@media screen and (max-width:1200px) {
#wrap {margin:0;}
#gnb > ul > li > a {font-size:17px;}
}
@media screen and (max-width:1024px) {
/* header */
#header {position:relative; border-bottom:1px solid #ebebeb;}
#header .head_util {height:65px; position:static;}
#header .head_util h1 {position:fixed; top:0; right:-250px; background:#fff; left:auto; width:250px; height:65px;border-bottom:1px solid #ebebeb; z-index:111; transition:right 0.3s ease;}
#header .head_util h1 img {position:absolute; top:7px; left:0; height:60px;}
#header .head_util h2 > img, #header .head_util h2 > a > img {display:none;}
#header .head_util h2 {float:left; padding-top:10px; padding-left:15px;}
#header .head_util h2 > span {display:block;}
#header .head_util h2 > span img {height:40px;}
#header .nav_all {display:block;}
#header.open .mask {position: fixed; z-index:100; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.5;}
#header.open #gnb {right:0; overflow-y:auto;}
#header.open .head_util h1 {right:0;}
/* gnb */
#gnb {position:fixed; top:0; display:block; padding-top:65px;right:-250px; width:250px; height:100%; background:#fff; z-index:110; transition:right 0.3s ease;}
#gnb > ul {text-align:left;}
#gnb > ul > li {display:block; width:100%; border-bottom:1px solid #ddd}
#gnb > ul > li:after {display:none}
#gnb > ul > li > a {padding:0 20px 0 18px; height:60px; line-height:60px; font-size:16px; color:#000; text-decoration:none; background:url('/images/music/common/arr_menu.png') 92.4% 50% no-repeat; background-size:11px; transition:background 0.2s ease;}
#gnb > ul > li > a:hover {background-color:#f6f6f6;}
#gnb > ul > li > ul {position:static; padding:0; height:auto; max-height:0; min-height:auto; border:0; display:block !important; overflow:hidden; transition:max-height 0.8s; background:#f7f7f7; }
#gnb > ul > li > ul > li {display:block; position:relative;}
#gnb > ul > li > ul > li > a {display:block; padding:0 26px; height:46px; line-height:46px; border-bottom:1px solid #e5e5e5; color:#666; font-size:15px;}
#gnb > ul > li > ul > li:last-child > a {border-bottom:0 none}
#gnb > ul > li > ul > li > a:hover, #gnb > ul > li > ul > li.hover > a, #gnb > ul > li > ul > li.on > a {background:#f1f8e6; border-bottom:1px solid #d6d6d9}
#gnb > ul > li > ul > li.hover > a {font-weight:bold;}
#gnb > ul > li > ul > li.on:before {right:10px;}
#gnb > ul > li > ul > li > ul {background:#fff; display:block; max-height:0; overflow:hidden;}
#gnb > ul > li > ul > li.hover > ul {max-height:0; overflow:hidden;}
#gnb .depth-3 {padding:0 17px;}
#gnb .depth-3 > a {display:block; border-bottom:1px dashed #e5e5e5; line-height:36px; color:#666; font-size:13px;}
#gnb .depth-3:last-child {border-bottom:1px solid #e5e5e5;}
#gnb .depth-3:last-child > a {border-bottom:none;}
#gnb .depth-3 > a:before {display:inline-block; padding-right:4px; padding-left:13px; content:'- ';}
#gnb > ul > li.hover > ul, #gnb > ul > li > ul > li.hover > ul, #gnb > ul > li.on > ul, #gnb > ul > li > ul > li.on > ul {max-height:2000px;}
#gnb > ul > li.hover > a, #gnb > ul > li.on > a {background:#8dbf43 url('/images/music/common/arr_menu_on.png') 92.4% 50% no-repeat; background-size:11px; color:#fff}
#gnb > ul > li > a:after, #gnb.open .bg {display:none;}
}
/* SUB공통 */
.sub_top {position:relative; margin-top:55px;}
.sub_top .location {display:none;}
h3.loc_depth2 {position:absolute; top:148px; left:0; display:table; width:100%; height:400px; text-align:center; color:#fff; background:url('/images/music/common/bg_sub_ico.png') 50% 50% no-repeat;}
h3.loc_depth2 > div {display:table-cell; padding-bottom:10px; vertical-align:middle;}
h3.loc_depth2 em {position:relative; display:inline-block; font-size:44px; font-weight:500; font-family:SCore; letter-spacing:-1px; text-shadow:1px 1px 1px rgba(0, 0, 0, 0.2); }
h3.loc_depth2 span {font-weight:300; font-size:18px; color:rgba(255, 255, 255, 0.8); display:block;}
h3.loc_depth2 em:before {content:''; position:absolute; top:-15px; left:0; right:0; display:block;height:1px; background:rgba(255, 255, 255, 0.22);}
h3.loc_depth2 em:after {content:''; position:absolute; bottom:-45px; left:0; right:0; display:block;height:1px; background:rgba(255, 255, 255, 0.22);}
@media screen and (max-width:1300px) {
h3.loc_depth2 em {font-size:40px;}
h3.loc_depth2 span {font-size:16px;}
}
@media screen and (max-width:1024px) {
.sub_top {margin-top:0;}
h3.loc_depth2 {top:65px; background-size:800px auto;}
h3.loc_depth2 em {font-size:32px;}
h3.loc_depth2 span {display:none;}
h3.loc_depth2 em:before, h3.loc_depth2 em:after {display:none;}
h3.loc_depth2 > div {padding-bottom:25px;}
.sub_top .location {position:absolute; top:50%; right:0; left:0; text-align:center; display:block; margin-top:10px; text-align:center; color:rgba(255, 255, 255, 0.8)}
.sub_top .location .home {display:inline-block;}
.sub_top .location li {display:inline-block;}
.sub_top .location li:before {content:' > '; font-weight:300;}
.sub_top .location li:first-child:before {display:none;}
}
@media screen and (max-width:620px) {
h3.loc_depth2 {background-image:none;}
h3.loc_depth2 em {font-size:22px;}
h3.loc_depth2 > div {padding-bottom:17px;}
.sub_top img {filter: brightness(0.7);}
.sub_top .location {margin-top:5px; font-size:13px;}
}
@media screen and (max-width:480px) {
.sub_img {min-height:100px}
h3.loc_depth2 em {font-size:20px;}
}
/* footer */
#footer {padding-top:40px; padding-bottom:50px; border-top:1px solid #ebebeb;}
#footer .f_menu:after {content:''; display:block; clear:both;}
#footer .f_menu .link {float:left;}
#footer .f_menu .link li {position:relative; display:inline-block;}
#footer .f_menu .link li:after {position:absolute; right:10px; top:4px ;display:block; height:13px; width:1px; background:#ddd; content:'';}
#footer .f_menu .link li:last-child:after {display:none;}
#footer .f_menu .link li a {display:inline-block; font-size:17px; padding-right:24px; color:#555; letter-spacing:-0.5px;}
#footer .f_menu .sns_link {float:right; margin-right:14px;}
#footer .f_menu .sns_link li {display:inline-block; padding:0 3px;}
#footer .f_menu .sns_link li a {display:block; width:50px; height:50px; background:#f7f7f7; border-radius:25px; text-align:center; text-decoration:none; transition:background 0.2s ease;}
#footer .f_menu .sns_link li a i {color:#a7a7a7; font-size:24px; line-height:50px;}
#footer .f_menu .sns_link li a:hover {background:#666;}
#footer .f_menu .sns_link li a:hover i {color:#fff;}
#footer .f_menu .site_link {position:relative; float:right; width:170px;}
#footer .f_menu .site_link button.tit {position:relative; width:100%; padding:13px 15px; background:#fff; border:1px solid #e0e0e0; color:#888; text-align:left; }
#footer .f_menu .site_link button:after {display:block; position:absolute; top:50%; right:15px; width:12px; height:6px; margin-top:-3px; background:url('/images/music/common/btn_relation.png') -12px 0 no-repeat; background-size:24px; content:'';}
#footer .f_menu .site_link.on button:after {background-position:0 0;}
#footer .f_menu .site_link button.on:after {background-position:-12px 0px}
#footer .f_menu .site_link .cont {position:absolute; z-index:105; bottom:50px; width:100%; max-height:0; overflow:hidden; transition:max-height 0.5s ease;}
#footer .f_menu .site_link.on .cont {max-height:80px;}
#footer .f_menu .site_link .cont ul {color:#666; border:1px solid #d8d8d8; border-bottom:0 none;}
#footer .f_menu .site_link .cont ul li a {display:block; padding:9px 15px; background:#fff; border-bottom:1px solid #e9e9e9}
#footer .f_menu .site_link .cont ul li a:hover {background:#f7f9f4; text-decoration:none;}
#footer .f_info {padding-top:20px;}
#footer .f_info > span {display:inline-block; vertical-align:bottom; color:#999; font-size:16px; padding-right:10px; font-weight:300;}
#footer .f_info > span.log {padding-right:20px;}
/* 상단바로가기 */
.btn_top {z-index:100; position:absolute; right:0; bottom:35px; display:block; width:44px; height:44px; background:#fff; text-align:center; font-size:11.5px; color:#666; border:1px solid #ccc; transition:all 0.2s ease;}
.btn_top:hover {text-decoration:none; background:#7cbc1d; border:1px solid #7cbc1d; color:#fff}
.btn_top i {display:block; margin-bottom:5px; height:10px; text-align:center; color:#7cbc1d; font-size:20px}
.btn_top:hover i {color:#fff;}
@media screen and (max-width:1200px) {
/* footer */
#footer {padding:20px 15px 20px 15px;}
#footer .f_menu .link {padding-top:12px;}
#footer .f_menu .link li a {font-size:16px;}
#footer .f_info > span {font-size:15px;}
.btn_top {right:20px; bottom:20px;}
}
@media screen and (max-width:1024px) {
#footer .f_info > span.log {display:none;}
.btn_top {right:18px; bottom:10px;}
}
@media screen and (max-width:700px) {
#footer {position:relative; text-align:center; padding:0 0 80px 0;}
#footer .f_menu .link {float:none; padding-top:0; background:#f7f7f7;padding:10px 0;}
#footer .f_menu .link li a {font-size:14px;}
#footer .f_menu .sns_link {float:none; display:none; }
#footer .f_menu .site_link {float:none; width:calc(100% - 80px); position:absolute; left:15px; bottom:20px;}
#footer .f_info > span {font-size:14px;}
#footer .f_menu .site_link button.tit {padding:10px;}
#footer .f_menu .site_link .cont {bottom:41px; text-align:left;}
.btn_top {width:41px; height:41px; right:15px; bottom:20px;}
}