@charset "utf-8";


@media screen and (max-width: 940px){
	.gnb-bg {display:none;}
	.gnb-on {overflow:hidden;}
	
	.header {height: 70px !important;}
	.header .mobile-button a{display: block !important;z-index: 1;}
	.header .mobile-button a i{width:44px;display:inline-block;position:absolute;left:50%;margin-left:-22px;margin-top:-10px;top:50%;height:2px;background:#000;border-radius:5px;}
	.header .mobile-button a i:before{content:'';width:100%;top:13px;height:2px;background:#000;display:inline-block;position:absolute;border-radius:5px;}
	.header .mobile-button a i:after{content:'';width:100%;bottom:13px;height:2px;background:#000;display:inline-block;position:absolute;border-radius:5px;}
	.header .mobile-button a em{display:inline-block;width:100%;position:absolute;bottom:7px;text-align:center;font-style:normal;font-weight:bold;color:#000;}
	.header .btn-contact a {width:70px !important;height:70px !important;padding-top: 40px !important;background-position: center 23% !important;font-size: 11px !important;}

	.header .header-logo a {left: 50% !important;transform: translate(-50%, -50%);background-size: cover !important;}

	#gnb {position:fixed !important;width:100% !important;height:100% !important;left:-100% !important;}
	#gnb .gnb-wrap {padding-left: 0;position: relative;float: none;background: #ccc;bottom: 0;overflow: auto;height: 100%;width: 100%;transition: all 0.3s ease;padding-top:0;top: 38px;left: -100%;}
	.mgnb-on #gnb,
	.mgnb-on .gnb-wrap {left: 0 !important;transition: all 0.3s ease;}
	#gnb .gnb-depth1>li {float:inherit !important;position: relative !important;margin: 0 !important;width:100% !important;}
	#gnb .gnb-depth1>li>a {display:block !important;padding: 16px 22px !important;cursor: pointer !important;z-index: 2 !important;-webkit-transition: color .2s ease !important;-o-transition: color .2s ease !important;transition: color .2s ease;color: #fff;background: #3ab4a6;height: inherit;line-height: inherit;}
	#gnb .gnb-depth1>li.on .gnb-depth2 {background:none}
	#gnb .gnb-depth2 {height: auto !important;padding:0 !important;position:inherit !important;left:inherit !important;top:inherit !important;width:100% !important;}
	#gnb .gnb-depth2 li {}
	#gnb .gnb-depth2 li a {padding:15px !important; padding: 14px 22px !important;cursor: pointer !important; z-index: 2 !important;font-size: 14px !important;text-decoration: none !important;color: #dddddd;background: #49736e;-webkit-transition: color .2s ease !important;-o-transition: color .2s ease !important;transition: color .2s ease !important;}
	#gnb ul > li.has-sub > a:after {position: absolute;right: 26px;top: 19px;z-index: 5;display: block;height: 10px;width: 2px;background: #ffffff;content: "";-webkit-transition: all 0.1s ease-out;-moz-transition: all 0.1s ease-out;-ms-transition: all 0.1s ease-out;-o-transition: all 0.1s ease-out;transition: all 0.1s ease-out;}
	#gnb ul > li.has-sub > a:before {position: absolute;right: 22px;top: 23px;display: block;width: 10px;height: 2px;background: #ffffff;content: "";-webkit-transition: all 0.1s ease-out;-moz-transition: all 0.1s ease-out;-ms-transition: all 0.1s ease-out;-o-transition: all 0.1s ease-out;transition: all 0.1s ease-out;}
	#gnb ul > li.has-sub.open > a:after,
	#gnb ul > li.has-sub.open > a:before {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
	.gnb-on .gnb-bg {display:none;}
}
@media screen and (max-width: 940px){
	.footer {text-align: center;}
	.footer .site-area {padding: 14px 0 13px;}
	.footer .site-area+.inner {padding: 25px 5px 28px;}
	
}

/* wrap */
#wrap{position: relative;min-height:100%;}
	.inner{width:1300px;margin:auto;position:relative;box-sizing:border-box;}
.header {position: relative;z-index: 15;background: #fff;border-bottom:1px solid #ddd;width: 100%;left: 0;top: 0;height: 100px;}
.header .inner {position: relative;box-sizing: border-box;padding:0;}
.header .header-logo a {display:block;overflow:hidden;width:160px;height:70px;text-indent:-9999em;position:absolute;left:0;top:20px;background-image:url('../img/bass-logo.png');background-repeat:no-repeat;background-size:100%;z-index:10;}
	
.header .mobile-button a {position:absolute;display:none;width:70px;height:70px;font-size:15px;transition: all 0.5s ease;}
.header .btn-contact a {position:absolute;top:0;right:0;width:115px;height:99px;border-left:1px solid #ddd;border-right:1px solid #ddd;text-align:center;color:#195aa8;background:url('../img/img-contact_n.png') no-repeat center 38%;padding-top: 60px;box-sizing: border-box;font-family: 'Raleway';font-weight: 600;font-size: 13px;}

#gnb {position:absolute;top:31px;left:235px;transition:all .3s;text-align: center;}
/*#gnb .gnb-wrap {position: relative;padding-left: 362px;padding-top: 45px;width: 100%;}*/
#gnb .gnb-depth1 {}
#gnb .gnb-depth1>li {float:left;width: 140px;position:relative}
#gnb .gnb-depth1>li > a {    position: relative;display: block;width: 100%;height: 69px;line-height: 40px;text-align: center;color: #222;font-size:18px;}
#gnb .gnb-depth1:after {display:block;visibility:hidden;clear:both;content:""}
#gnb .gnb-depth1>li.on .gnb-depth2 {background-image: linear-gradient(to right top, #195aa8 , #23a5b0);color:#fff ;}
#gnb .gnb-depth1>li.on .gnb-depth2 li a {color:#fff ;}
#gnb .gnb-depth1>li.on .gnb-depth2 li.on a,
#gnb .gnb-depth1>li.on .gnb-depth2 a:hover {color:#a3f5ff;}

#gnb .gnb-depth2 {display: none;position: absolute;top: 69px;left: 0;width: 140px;height: 222px;padding-right: 1px;z-index: 100;padding-top: 20px;}
/*{position: absolute;left: 0;width: 100%;box-sizing: border-box;padding:19px 0px 0;z-index: 15;top: 55px;height: 198px;min-width: 112px;display:none;} */
#gnb .gnb-depth2 li {}
#gnb .gnb-depth2 li a {padding:8px 0 9px;display:block;font-size: 15px;font-family: 'Noto Sans KR';}

.gnb-bg{position:absolute;left:0;top:100px;width:100%;height:0;background:#fafafa;overflow:hidden;transition: all 0.1s ease;z-index:10;display:none;}
.gnb-on .gnb-bg {display:block;height:222px;transition: all 0.1s ease;}
.gnb-on .gnb-depth2 {display:block !important;height:222px !important;transition: all 0.1s ease;}

/* 애니메이션*/
.gnb-depth1 .hvr-underline-from-left:before{background:#000;height:4px;bottom:0px;z-index: 16;}
.gnb-depth2 .hvr-underline-from-left:before{background:#ffe368;height:4px;bottom:2px;z-index: -1;}

.footer {}
.footer .site-area {padding:38px 0 30px;border-top:1px solid #6b6b6b;border-bottom:1px solid #d5d5d5;color:#000;}
.footer .site-area a {margin-right:12px;color:#000;}
.footer .site-area+.inner {padding:35px 0 38px;}
.corp-area a {color:#808080;font-size:13px;line-height:21px;font-weight:200;margin-right:14px;font-family: 'Noto Sans KR';}
.copyright {color:#c1c1c1;font-size:12px;font-weight:500;margin-top:18px;display:block;font-family: 'Noto Sans KR';}


/* 공통 레이아웃 */ 

@media screen and (min-width:1200px){
	#subvisual {background-repeat:no-repeat; background-position:center;background-size:cover; padding-top:70px;}
	#subvisual h2 {color:#fff;font-size:60px;font-weight:900;padding:60px 0 30px 0;margin-bottom:30px; position:relative;}
	#subvisual h2::after {content:none;position:absolute;bottom:0;left:50%;width:30px;height:2px;background-color:rgba(255, 255, 255, 0.8); transform:translateX(-50%)}
	#subvisual p {font-size:15px;color:#fff;line-height:1.5;padding-bottom:170px;}
	#subvisual .sub-tabmenu {position:absolute; left:0; bottom:0; width:100%; background-color:rgba(0, 0, 0, 0.5);}
	#subvisual .sub-tabmenu li {float:left; width:20%; text-align:center;}
	#subvisual .sub-tabmenu li:not(:first-child) a::after {content:""; position:absolute; width:1px; height:29px; background-color:#909194; left:0; top:50%; transform:translateY(-50%)}
	#subvisual .sub-tabmenu li:hover a::after, #subvisual .sub-tabmenu li.on a::after, #subvisual .sub-tabmenu li:hover + li a::after, #subvisual .sub-tabmenu li.on + li a::after, #subvisual .sub-tabmenu li:first-child a::after {background-color:transparent}
	#subvisual .sub-tabmenu li:hover a, #subvisual .sub-tabmenu li.on a {background-image: linear-gradient(to right top, #195aa8 , #23a5b0); color:#fff; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}

	#subvisual .sub-tabmenu li a {display:block; font-size:20px; font-weight:500; line-height:70px; letter-spacing:-1px; color:#fff; position:relative;}
}
@media screen and (min-width:800px) and (max-width:1199px){

	#subvisual {background-repeat:no-repeat; background-position:center;background-size:cover; padding-top:70px;}
	#subvisual h2 {color:#fff;font-size:60px;font-weight:900;padding:60px 0 30px 0;margin-bottom:30px; position:relative;}
	#subvisual h2::after {content:none;position:absolute;bottom:0;left:50%;width:30px;height:2px;background-color:rgba(255, 255, 255, 0.8); transform:translateX(-50%)}
	#subvisual p {font-size:15px;color:#fff;line-height:1.5;padding-bottom:170px;}
	#subvisual .sub-tabmenu {position:absolute; left:0; bottom:0; width:100%; background-color:rgba(0, 0, 0, 0.5);}
	#subvisual .sub-tabmenu li {float:left; width:20%; text-align:center;}
	#subvisual .sub-tabmenu li:not(:first-child) a::after {content:""; position:absolute; width:1px; height:29px; background-color:#909194; left:0; top:50%; transform:translateY(-50%)}
	#subvisual .sub-tabmenu li:hover a::after, #subvisual .sub-tabmenu li.on a::after, #subvisual .sub-tabmenu li:hover + li a::after, #subvisual .sub-tabmenu li.on + li a::after, #subvisual .sub-tabmenu li:first-child a::after {background-color:transparent}
	#subvisual .sub-tabmenu li:hover a, #subvisual .sub-tabmenu li.on a {background-image: linear-gradient(to right top, #195aa8 , #23a5b0); color:#fff; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
	
	#subvisual .sub-tabmenu li a {display:block; font-size:20px; font-weight:500; line-height:70px; letter-spacing:-1px; color:#fff; position:relative;}
}
@media screen and (max-width:799px){
	#subvisual {background-repeat:no-repeat; background-position:center;background-size:cover; padding-top:35px;}
	#subvisual h2 {color:#fff;font-size:30px;font-weight:900;padding:30px 0 15px 0;margin-bottom:15px; position:relative;}
	#subvisual h2::after {content:none;position:absolute;bottom:0;left:50%;width:30px;height:2px;background-color:rgba(255, 255, 255, 0.8); transform:translateX(-50%)}
	#subvisual p {font-size:13px;color:#fff;line-height:1.5;padding-bottom:100px;}
	#subvisual .sub-tabmenu {position:absolute; left:0; bottom:0; width:100%; background-color:rgba(0, 0, 0, 0.5);}
	#subvisual .sub-tabmenu li {float:left; width:20%; text-align:center;}
	#subvisual .sub-tabmenu li:not(:first-child) a::after {content:""; position:absolute; width:1px; height:29px; background-color:#909194; left:0; top:50%; transform:translateY(-50%)}
	#subvisual .sub-tabmenu li:hover a::after, #subvisual .sub-tabmenu li.on a::after, #subvisual .sub-tabmenu li:hover + li a::after, #subvisual .sub-tabmenu li.on + li a::after, #subvisual .sub-tabmenu li:first-child a::after {background-color:transparent}
	#subvisual .sub-tabmenu li:hover a, #subvisual .sub-tabmenu li.on a {background-image: linear-gradient(to right top, #195aa8 , #23a5b0); color:#fff; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}

	#subvisual .sub-tabmenu li a {display:block; font-size:15px; line-height:50px; letter-spacing:-1px; color:#fff; position:relative;}
}

@media screen and (min-width:1200px){
.inner {position:relative;max-width:1200px !important;margin:0 auto;}
}
@media screen and (min-width:800px) and (max-width:1199px){
.inner {position:relative;max-width:90% !important;margin:0 auto;}
}
@media screen and (max-width:799px){
.inner {position:relative;max-width:90%!important;margin:0 auto;}
.header .header-logo a{width:120px;top:40px; background-size:100% !important;}
}

/* 서브 - 콘텐츠 */ 
#container {display:block;position:relative;background:#fff;}
#container .inner{padding:50px 0;}

@media screen and (min-width:1200px){
.sub_inner {position:relative;max-width:1200px !important;margin:0 auto; padding:80px 0px; font-size:17px; line-height:30px; color:#777; white-space:normal; word-break:keep-all; }
}
@media screen and (min-width:800px) and (max-width:1199px){
.sub_inner {position:relative;max-width:100% !important;margin:0 auto; padding:80px 50px; font-size:17px; line-height:30px; color:#777; white-space:normal; word-break:keep-all;}
}
@media screen and (max-width:799px){
.sub_inner {position:relative;max-width:100% !important;margin:0 auto; padding:40px 20px; font-size:14px; line-height:22px; color:#777; white-space:normal; word-break:keep-all;}
}

/* 서브페이지 - 타이틀 */ 
#container .sub-title {color:#111;font-size:32px;text-align:left;padding-bottom:50px;margin-top:0px;}

/* 서브페이지 - 이용약관, 개인정보취금방침, 이메일수집거부 */ 
#container .sub-privacy {}
#container .sub-privacy .subject {color:#1a1a1a;font-size:15px;margin-bottom:10px;font-weight:500;}
#container .sub-privacy .content {color:#9a9a9a;font-size:13px;margin-bottom:50px;line-height:150%;text-align:justify;}

/* 링크모듈 */
#quick-link {position:fixed;right:20px;bottom:70px;z-index:9999;}
#quick-link a {display:block;margin-top:10px;}
#quick-link img {width:40px;border-radius:100%;}

#scroll-link {display:none;position:fixed;right:20px;bottom:20px;width:40px;height:40px;line-height:20px;font-size:10px;color:#fff;text-align:center;background:#000;border-radius:100px;padding:10px;cursor:pointer;opacity:0.6;z-index:99999;}
#scroll-link:hover {filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}