@charset "UTF-8";
@-webkit-keyframes marqee{0%{background-position:0 50%;}100%{background-position:-30.5em 50%;}}@keyframes marqee{0%{background-position:0 50%;}100%{background-position:-30.5em 50%;}}

#wrap {display:block; position:relative; overflow:hidden; z-index:0;}
.inner {position:relative; max-width:1700px; margin-left:auto; margin-right:auto;}
#m_conts {min-height:600px;}

.slogunBelt {display:block; position:relative; height:4em; margin:0 -1em 6em; background:url(../img/common/bak_logo_belt.png) no-repeat 50% 50%; background-size:100% 100%;}
.slogunBelt .txt {display:block; position:relative; height:4em; -webkit-animation:marqee 5s linear infinite both; animation:marqee 5s linear infinite both; background:url(../img/common/img_slide_logo.svg) repeat-x 0 50%; background-size:contain;}
@media all and (max-width:1024px) {
	.slogunBelt {margin-bottom:2em;}
}


/*****************************************
	Header 
*****************************************/

#headerWrap {display:block; position:fixed; top:0; left:0; right:0; z-index:2;}
#headerWrap:before {content:""; display:block; position:absolute; top:0; height:5em; left:50%; width:100vw; margin-left:-50vw; background:transparent; z-index:-1; transition:.3s height; -webkit-transition:.3s height;}
#headerWrap .inner {height:5em;}
#headerWrap .logo,
#headerWrap .otherContril {position:absolute; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); z-index:1;}
#headerWrap .logo {left:0;}
#headerWrap .otherContril {right:0;}

#headerWrap .logo a {display:block; position:relateive; width:5.8em; height:1.2em; text-indent:-999px; overflow:hidden; background:url(../img/common/logo_white.png) no-repeat 50% 50%; background-size:contain;}
#headerWrap .goto-home {display:block; position:relative; padding:0 1em; background:#fff; border-radius:9em; color:#000; line-height:2em; font-family:'Raleway'; font-weight:700;}
#headerWrap .goto-home:before {content:""; display:block; position:absolute; left:1em; top:50%; margin-top:-.5em; width:1em; height:1em; background:url(../img/common/spr_common.svg) no-repeat top -2.6em left 0; background-size:10em auto;}
#headerWrap .goto-home span {font-size:.85em; margin-left:1.76em;}

#headerWrap .control-menu {display:block; position:relative; font-size:1.052631em; text-indent:-999px; width:1.4em; height:1.4em; background:url(../img/common/spr_icon.svg) no-repeat -14.35em -1.1em; background-size:21.4em auto; overflow:hidden;}

@media all and (max-width:1024px) {
	#headerWrap .inner {height:4em;}
	#headerWrap:before {height:4em; border-bottom:0px solid #E0E6EC;}
	#headerWrap.header-scroll-down:before {border-bottom-width:1px;}
	#headerWrap.header-scroll-down .control-menu {background-position:-12.5em -1.1em;}
}


/*****************************************
	LNB 
*****************************************/

#lnbWrap {display:block; position:relative; text-align:center; z-index:0;}
#lnbWrap .lnb_sub {position:absolute; top:100%; left:0; right:0; visibility:hidden; z-index:2; opacity:0; transition:.3s opacity; -webkit-transition:.3s opacity;}
#lnbWrap li.on .lnb_sub {visibility:visible; opacity:1;}
#lnbWrap .lnb_sub .tit {display:none;}


#lnb {display:flex; flex-wrap:nowrap; justify-content:center; text-transform:uppercase;}
#lnb #lnb_04 {display:none;}
#lnb > li {padding:0 2em;}
#lnb > li > a {display:table; position:relative; height:5em;}
#lnb > li > a > * {display:table-cell; text-align:center; vertical-align:middle; font-size:.9em; color:#fff; font-weight:700; border-bottom:2px solid transparent;}
#lnb > li.on > a > *,
#lnb > li > a:hover > *,
#lnb > li > a:active > *,
#lnb > li > a.active > * {border-color:#0094FF;}

#lnb .depth02 {display:flex; flex-wrap:nowrap; justify-content:center; text-transform:uppercase;}
#lnb .depth02 > li {position:relative; padding:0 2em;}
#lnb .depth02 > li + li:before {content:""; display:block; position:absolute; width:3px; height:3px; background:#111; border-radius:100%; left:0; top:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%);}
#lnb .depth02 > li > a {display:block; padding:1.8em 0;}
#lnb .depth02 > li > a > * {font-size:.9em; color:#111; font-weight:600;}
#lnb .depth02 > li > a:hover > *,
#lnb .depth02 > li > a:focus > *,
#lnb .depth02 > li > a.active > * {font-weight:900;}

#lnb .depth03 {display:none !important;}


#headerWrap.open-lnb-pc .logo a,
#headerWrap.header-scroll-down .logo a {background-image:url(../img/common/logo.png);}
#headerWrap.open-lnb-pc .goto-home:before,
#headerWrap.header-scroll-down .goto-home:before {background-position:top -2.6em left -1em;}
#headerWrap.open-lnb-pc .goto-home span,
#headerWrap.header-scroll-down .goto-home span {color:#0094FF;}
#headerWrap.open-lnb-pc:before,
#headerWrap.header-scroll-down:before {background:#fff;}
#headerWrap.open-lnb-pc #lnb > li > a > *,
#headerWrap.header-scroll-down #lnb > li > a > * {color:#111;}
#headerWrap.open-lnb-pc #lnbWrap:before,
#headerWrap.header-scroll-down #lnbWrap:before {content:""; display:block; position:absolute; left:50%; top:5em; width:100vw; height:1px; margin-top:-1px; margin-left:-50vw; background:#E0E6EC; z-index:-1;}

#headerWrap.open-lnb-pc:before {height:9.4em;}



@media all and (max-width:1490px) {
	#lnb > li {padding:0 1em;}
}
@media all and (max-width:1370px) {
	#lnb {padding-left:12em; padding-right:7.5em;}
	#lnb > li {flex-grow:1;}
	#lnb > li > a {width:100%;}
}
@media all and (max-width:1024px) {
	#lnbWrap {display:none !important;}
}


/*****************************************
	SNB 
*****************************************/

#snbWrap h2 {display:none;}
#snbWrap li.active > ul {display:block !important;}

#snbWrap .snb a {font-family:'Raleway', sans-serif;} 
#snbWrap .snb > li + li {margin-top:1em;}
#snbWrap .snb > li > a {display:block; position:relative; color:#111; font-size:1.1em; font-weight:600;}
#snbWrap .snb > li > a.active {font-weight:900; color:#0094FF;}

#snbWrap .snb ul {padding:1em .5em .5em;}
#snbWrap .snb ul li + li {margin-top:.3em;}
#snbWrap .snb ul li a {color:#AEAEAE; font-size:.9em;}
#snbWrap .snb ul li a.active {color:#111; font-weight:600;}


/*****************************************
	Mobile Menu 
*****************************************/

#m_menu {display:block; position:fixed; top:0; right:0; bottom:0; visibility:hidden;}
@media all and (min-width:1025px) {
	#m_menu {display:none !important;}	
}
@media all and (max-width:1024px) {
	#m_menu {z-index:9999; visibility:visible;}
	#m_menu:before {content:""; display:block; position:absolute; top:0; bottom:0; right:0; width:100vw; background:rgba(0,0,0,.4); z-index:0;}
	#m_menu > div {display:block; position:absolute; top:0; bottom:0; right:0; width:640px; max-width:100vw; background:url(../img/common/bak_mo_lnb.png) no-repeat 100% 100% #101C3D; background-size:auto 9.474em; transition:.3s all; -webkit-transition:.3s all; z-index:1;}
	
	#m_menu .side_menu {display:block; position:relative; height:100%; padding-top:4em; padding-bottom:4.3em;}
	#m_menu .side_menu .top {display:block; position:absolute; top:0; left:0; right:0; height:4em; padding:0 1.3em; border-bottom:1px solid rgba(255,255,255,.1);}
	#m_menu .side_menu .top .logo {display:block; position:relative; height:4em; width:5.8em; text-indent:-999px; background:url(../img/common/logo_white.png) no-repeat 0 50%; background-size:contain; overflow:hidden;}
	#m_menu .side_menu .top .btnMenuClose {display:block; position:absolute; right:1.3em; top:50%; margin-top:-.925em; width:1.85em; height:1.85em; background:url(../img/common/ico_m_close.svg) no-repeat 50% 50%; background-size:contain; text-indent:-999px; overflow:hidden;}
	#m_menu .side_menu .bot {display:block; position:absolute; left:0; right:0; bottom:0; height:4.3em; padding:0 1em;}
	#m_menu .side_menu .bot .in {display:flex; height:100%; flex-wrap:nowrap; justify-content:space-around; align-items:center;}
	#m_menu .side_menu .bot a {display:block; position:relative; margin:0 .5em; font-size:1.333333334em; flex-grow:1; text-align:center; height:2em; line-height:2em; padding:0 1em 0 2.5em; color:#fff; z-index:0;}
	#m_menu .side_menu .bot a:before {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; border-radius:.5em; border:1px solid rgba(255,255,255,.3); z-index:-1;}
	#m_menu .side_menu .bot a:after {content:""; display:block; position:absolute; width:1em; height:1em; top:50%; left:1em; margin-top:-.5em; background:no-repeat 50% 50%; background-size:contain;}
	#m_menu .side_menu .bot a.home:after {background-image:url(../img/common/ico_home.svg);}
	#m_menu .side_menu .bot a.contact:after {background-image:url(../img/common/ico_contact.svg);}
	#m_menu .side_menu .bot a span {font-size:.85em; color:inherit;}
	
	#m_menu .side_menu .bot a:focus,
	#m_menu .side_menu .bot a:hover {color:#101C3D; font-weight:700;}
	#m_menu .side_menu .bot a:focus:before,
	#m_menu .side_menu .bot a:hover:before {background:#fff;}
	#m_menu .side_menu .bot a.home:focus:after,
	#m_menu .side_menu .bot a.home:hover:after {background-image:url(../img/common/ico_home_b.svg);}
	#m_menu .side_menu .bot a.contact:focus:after,
	#m_menu .side_menu .bot a.contact:hover:after {background-image:url(../img/common/ico_contact_b.svg);}

	#m_menu .side_menu .depth1 {display:block; position:relative; height:100%; overflow:auto; font-size:1.333333334em;}
	#m_menu .side_menu .depth1 > li > a {display:block; position:relative; padding:.95em 1em; border-bottom:1px solid rgba(255,255,255,.1);}
	#m_menu .side_menu .depth1 > li > a span {display:block; position:relative; font-size:.9em; color:#fff; font-weight:700; line-height:1.2em;}
	#m_menu .side_menu .depth1 > li > a:after {content:""; display:block; position:absolute; top:50%; right:1em; margin-top:-.6em; width:1.2em; height:1.2em; background:url(../img/common/ico_mobile_depth1.svg) no-repeat 50% 50%; background-size:contain; transition:.3s all; -webkit-transition:.3s all;}
	#m_menu .side_menu .depth1 > li.on > a:after {transform:rotate(90deg); -webkit-transform:rotate(90deg);}
	
	#m_menu .side_menu li:not(.on) > .depth2 {display:none !important;}
	#m_menu .side_menu .depth2 {display:block; position:relative; background:#fff; padding:1.5em;}
	#m_menu .side_menu .depth2 > li + li {margin-top:.75em;}
	#m_menu .side_menu .depth2 > li > a {display:block; position:relative; color:#444; padding-left:.7em;}
	#m_menu .side_menu .depth2 > li > a:before {content:""; display:block; position:absolute; width:4px; height:4px; background:#444; left:0; top:50%; margin-top:-2px;}
	#m_menu .side_menu .depth2 > li > a span {display:block; position:relative; font-size:.8em; line-height:1.4em; color:#333;}
	#m_menu .side_menu .depth2 > li.on > a:before {background:#0094FF;}
	#m_menu .side_menu .depth2 > li.on > a span {color:#0094FF; font-weight:800;}
	
	#m_menu .side_menu li:not(.on) > .depth3 {display:none !important;}
	#m_menu .side_menu .depth3 {display:flex; flex-wrap:wrap; position:relative; margin:1em 0; padding:.5em; background:#fafafa;}
	#m_menu .side_menu .depth3 > li {display:block; flex-grow:1; padding:.25em;}
	#m_menu .side_menu .depth3 > li > a {display:block; position:relative;}
	#m_menu .side_menu .depth3 > li > a span {color:#444; font-weight:400; font-size:.7em;}
	#m_menu .side_menu .depth3 > li.on > a span {font-weight:800; color:#000;} 
	
	
	#m_menu li[data-mid="0400000000"] {display:none !important;}
	
	body:not(.open-mo-lnb-active) #m_menu {visibility:hidden;}
	body:not(.open-mo-lnb-active) #m_menu > div {transform:translateX(100%); -webkit-transform:translateX(100%);}
}



/*****************************************
	Footer 
*****************************************/

#footerWrap {position:relative; padding-top:2.9em; padding-bottom:4.5em; margin-top:6em;}
#footerWrap:before {content:""; display:block; position:absolute; top:0; left:50%; width:1820px; height:1px; margin-left:-910px; background:rgba(0,0,0,.2);}
#footerWrap .inner {padding-right:22em;}
#footerWrap .logo {position:relative; width:5.8em; height:1.2em; margin-bottom:1.15em; text-indent:-999px; background:url(../img/common/logo.png) no-repeat 50% 50%; background-size:contain;}
#footerWrap .copyright {display:block; font-size:.75em; color:#888;}
#footerWrap .f-mnu {display:flex; position:absolute; top:0; right:0; width:20em;}
#footerWrap .f-mnu > * {flex-grow:1; width:50%;}
#footerWrap .f-mnu a {display:block; position:relative; padding:.8em 2.3em .8em 1em; border:1px solid #111; color:#111;}
#footerWrap .f-mnu a:after {content:""; display:block; position:absolute; width:1em; height:1em; right:.8em; top:50%; margin-top:-.5em; background:url(../img/common/ico_blank.svg) no-repeat 50% 50%; background-size:contain;}
#footerWrap .f-mnu li + li a {border-left-width:0px;}
#footerWrap .f-mnu a span {display:block; position:relative; font-size:.85em; color:inherit; font-weight:600;}

#footerWrap .f-mnu a:hover,
#footerWrap .f-mnu a:focus {background:#111; color:#fff;}
#footerWrap .f-mnu a:hover:after,
#footerWrap .f-mnu a:focus:after {background-image:url(../img/common/ico_blank_white.svg);}

@media all and (max-width:870px) {
	#footerWrap {padding-bottom:6em; margin-top:3em;}
	#footerWrap .logo {margin:0 auto 1.15em;}
	#footerWrap .inner {padding-right:0; text-align:center;}
	#footerWrap .f-mnu {position:relative; margin:2em auto 0; max-width:100%; text-align:left;}
}

.gotoTopBtn {display:block; position:absolute; bottom:1.8em; right:50%; margin-right:-850px;}
.gotoTopBtn a {display:block; position:relative; padding-right:2.2em;}
.gotoTopBtn a:after {content:""; display:block; position:absolute; top:50%; right:0; width:1.2em; height:1.2em; margin-top:-.6em; background:url(../img/common/btn_top.svg) no-repeat 50% 50% #111; border-radius:100%;}
.gotoTopBtn a span {display:block; position:relative; line-height:1.5em; font-family:'Raleway', sans-serif; font-size:.8em; color:#111; font-weight:700;}
@media all and (max-width:1700px) {
	.gotoTopBtn {right:1em; margin-right:0;}
}



/*****************************************
	Spot
*****************************************/

#container {min-height:60vh;}

.pageTitleWrap {display:block; position:relative; padding-top:5em; z-index:0; color:#fff; margin-bottom:6em;}
.pageTitleWrap * {font-family:'Raleway', sans-serif;}
.pageTitleWrap:before {content:""; display:block; position:absolute; top:0; bottom:0; left:50%; width:100vw; margin-left:-50vw; background:url(../img/common/bak_subvisual_logo.png) no-repeat 100% 100%, url(../img/common/bak_subvisual.png) no-repeat 0 0; background-size:auto 385px, 100% 100%; z-index:-1;}
.pageTitleWrap .top {display:flex; flex-wrap:nowrap; padding-top:2em; min-height:13em; align-items:center;}
.pageTitleWrap .top > * {word-break:keep-all;}
.pageTitleWrap .top h3 {width:21.85em;}
.pageTitleWrap .top h3 strong {font-size:2.5em; font-weight:900; line-height:1.2em;}
.pageTitleWrap .top .desc {font-size:.9em; line-height:1.6em;}

.spotWrap {display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:center;}
.spotWrap .spot_list {display:flex; height:4.9em; align-items:center; font-family:'Raleway', sans-serif;}
.spotWrap .spot_list a {color:#fff; font-size:.8em;}
.spotWrap .spot_list li {position:relative;}
.spotWrap .spot_list li + li {padding-left:1.7em;}
.spotWrap .spot_list li + li:before {content:""; display:block; position:absolute; left:.4em; top:50%; width:.9em; height:.9em; margin-top:-.45em; background:url(../img/common/ico_spot.svg) no-repeat 50% 50%; background-size:contain;}
.spotWrap .spot_list li:last-child a {font-weight:800;}

.spotWrap .sub_acc {display:block; position:relative;}
.spotWrap .sub_acc > li {display:inline-block; position:relative; vertical-align:middle;}
.spotWrap .sub_acc > li > a {display:block; position:relative; width:2.6em; height:2.6em; box-sizing:border-box; text-indent:-999px; overflow:hidden;}
.spotWrap .sub_acc > li > a:before {content:""; display:block; position:absolute; top:50%; left:50%; margin:-1.3em 0 0 -1.3em; width:2.6em; height:2.6em; background:url(../img/common/spr_common.svg) no-repeat 0 0; background-size:10em auto;}
.spotWrap .sub_acc > li > a.share:before {background-position: -2.6em 0;}
.spotWrap .sub_acc > li > a.print:before {background-position: 0 0;}

.spotWrap .share_list {display:block; position:absolute; top:50%; right:0; transform:translateY(-50%); -webkit-transform:translateY(-50%); transition:.3s all; -webkit-transition:.3s all;}
.spotWrap .share_list > div {display:block; position:relative; padding-right:2.8em;}
.spotWrap .share_list > div:after {content:""; display:block; clear:both;}
.spotWrap .share_list .close {display:block; position:absolute; right:0; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); width:2.2em; height:2.2em; background-position:-11.55em 0; background-color:#333; border-radius:.8em;}
.spotWrap .share_list ul {display:block; white-space:nowrap; padding:.45em .6em; border-radius:.7em; background:#fff; border:1px solid #C7CCDD; box-shadow:4px 4px 16px 0px rgba(0,0,0,.08); transition:.3s all; -webkit-transition:.3s all;}
.spotWrap .share_list li {display:inline-block; vertical-align:middle;}
.spotWrap .share_list button {display:block; position:relative; width:1.6em; height:1.6em; text-indent:-999px; overflow:hidden; background:url(../img/common/spr_spot.svg) no-repeat 0 -.3em; background-size:auto 4.4em;}
.spotWrap .share_list button.twitter {background:url(../img/common/ico_x.png) no-repeat 50% 50%; background-size:contain;}
.spotWrap .share_list button.facebook {background-position:-5.7em -.3em;}
.spotWrap .share_list button.blog {display:none; background-position:-3.7em -.3em;}
.spotWrap .share_list button.kakaostory {display:none; background-position:0 -.3em;}
.spotWrap .share_list button.kakaotalk {display:none; background-position:-1.9em -.3em;}
.spotWrap .share_list button.btn_qrcode {background:url(../img/common/ico_qrcode.png) no-repeat 50% 50%; background-size:contain;}
.spotWrap .share_list button.instagram {background-position:-7.54em -.3em;}
.spotWrap .share_list:not(.open) {visibility:hidden; opacity:0;}
.spotWrap .share_list:not(.open) ul {transform:translateX(10%); -webkit-transform:translateX(10%);}

#contentsQrcode {position:absolute; top:100%; right:0; width:10em; padding:.5em; background:#fff; border:1px solid #ddd; border-radius:1em; margin-top:10px; margin-right:2.7em; z-index:10;}
#contentsQrcode canvas {width:100%}

@media all and (max-width:1024px) {
	.pageTitleWrap {padding-top:4em; margin-bottom:3em;}
	.pageTitleWrap:before {background-size:auto 60%, 100% 100%;}
	.pageTitleWrap .top {padding-top:0;}
}
@media all and (max-width:640px) {
	.pageTitleWrap .top {text-align:center;}
	.pageTitleWrap .top h3 {width:auto; flex-grow:1;}
	.pageTitleWrap .top .desc {display:none;}
	
	.spotWrap > * {flex-grow:1;}
	.spotWrap .spot_list {justify-content:center;}
}
@media all and (max-width:510px) {
	.pageTitleWrap:before {background-size:55% auto, 100% 100%;}
}


/*****************************************
	Sub Content Layout
*****************************************/

#content {display:flex; flex-wrap:nowrap; justify-content:space-between;}

#snbWrap {padding-right:2em;}
#sub_content {width:1275px; max-width:80%;}

@media all and (max-width:1024px) {
	#content {display:block;}
	#snbWrap {display:none;}	
	#sub_content {width:auto; max-width:100%;}
}

.contentTitleWrap {display:block; position:relative; margin-bottom:5em;}
.contentTitleWrap strong {display:block; font-size:2.4em; color:#111; font-weight:800;}

@media all and (max-width:1024px) {
	.contentTitleWrap {margin-bottom:3em;}
}