@charset "utf-8";

#top .global {width:auto;}
#top .global > li {width:150px;}
#top .global > li > a, #top .global > li.city a {background:#8b8b8b;}
#top .global > li.list > a.current:after {border-top:6px solid #44464a;}
#top .global > li.list > a.on:after{border-top:6px solid #fff;} 

#font_control {display:none;}
#font_control li {width:49px; height:41px; line-height:41px; margin:0; border-right:1px solid #d8d7d7; font-size:14px;}
#font_control li a {height:41px; line-height:41px; border:none;}
#font_control li.big a {background:url(/images/member/common/top_ico.png) no-repeat 14px 11px;}
#font_control li.small a {background:url(/images/member/common/top_ico.png) no-repeat 14px -28px;}
#font_control li.print a {background:url(/images/member/common/top_ico.png) no-repeat 14px -71px;}

.logo img {vertical-align:top; padding-right:5px;}

#header {height:110px;}
#header .inner {padding:0;}
#header .logo {top:30px;}
.logo a:hover{text-decoration:none;}
.logo * {display:inline-block; line-height:120%; text-align:left;}
.logo a > span {font-weight:200; font-size:14px;}
.logo strong{display:block; font-size:26px;}

.btn_menu  {display:none;}

#menuArea {top:41px;}
#menuArea:after {top:110px;}
#menuArea .inner:before {top:110px;}

#topmenu {padding: 0 0 0 25%;width: 75%;box-sizing:content-box;}
#topmenu > li {width:13.5%;}
#topmenu > li > a {line-height:110px;}
#topmenu li .menu {height:220px;}
#topmenu li:first-child .menu:before {left:-221px; width: 220px; height: 255px;}
#menuArea .bar {top:106px;}

#footer{padding:35px 0 40px; border-top: 1px solid #cdcdcd;}
#footer address {color:#c2c2c2; font-size:95%;}
#footer .copyright{color:#a1a1a1; font-size:87%; text-transform:uppercase;}

#subVisual {position:relative; overflow:hidden; height:350px; /*background:#e6e4dd;*/}
#subVisual .img{position:absolute; left:0; top:0; width:100%; text-align:center;}

#subVisual .img img{animation:ani_background 6s ease-in-out;}



.more{z-index:2; position:absolute; top:0; right:0; display:block; width:35px; height:28px; font-size:0; text-indent:-999px; border-radius:0 28px 28px 0; border:1px solid #ccc; transition:0.3s;}
.more:before,
.more:after{content:''; display:block; position:absolute; top:12px; left:11px; width:12px; height:2px; transition:0.3s ease; background:#444;}
.more:after{top:7px; left:16px; width:2px; height:12px;}
.more:hover,
.more:focus,
.more:active{border-color:#777;}

.control a{position:relative; float:left; width:35px; height:28px; margin:0 0 0 -1px; font-size:0; text-indent:-9999px; border:1px solid #ccc; border-radius:28px 0 0 28px; background:url(/images/kr/main/ico_ctrl2.png) no-repeat 16px -33px;}
.control a:first-child{margin:0;}
.control .btn_next{border-radius:0 28px 28px 0;  background-position:-17px -33px;}
.control .btn_stop{width:30px; border-radius:0; background-position:-46px -32px;}
.control .btn_play,
.control .btn_stop.on{background-position:-101px -32px;}
.control a:hover,
.control a:active,
.control a:focus{z-index:3; border-color:#777; background-color:#f9f9f9;}


@keyframes ani_background{
	0%{transform:scale(1.1);}
	50%{transform:scale(1);}
}
@media all and (max-width:1700px) {
	#subVisual{height:auto;}
	#subVisual .img{position:static; transform:translateX(0); margin:0 0 0 -5%;}
	#subVisual .img img{max-width:110%;}
}

#subVisual {overflow:hidden; position:relative; }
#subVisual .inner {position:absolute; top:0; left:50%; margin-left:-600px;}
#subVisual .inner .txt {position:absolute; top:105px; right:10px;}
#subVisual .inner .txt p.slogan {font-size:24px;}
#subVisual .inner .txt p.slogan span {font-weight:800; color:#39619f;}
#subVisual .inner .txt img {margin:10px 0 8px;}
#submenu .sm_tit {background-color:#0b8e8f; background-image:url(/images/member/sub/bg_subtit.gif); background-repeat:no-repeat; background-size:cover;}
#submenu .depth2 > li:before {background:url(/images/member/sub/ico_submenu.gif) no-repeat 0 5px;}
#submenu .depth2 > li:hover:before, #submenu .depth2 > li.current_on:before {background-position:0 -62px;}
#submenu .depth2 > li > a {border:1px solid #ddd; background:#fff;}
#submenu .depth2 > li:hover > a, #submenu .depth2 > li > a:hover, #submenu .depth2 > li > a:focus, #submenu .depth2 > li > a:active, #submenu .depth2 > li.current_on > a {border:none; box-shadow:none; background:#45adb7; color:#fff;}
#pageTitle h3{margin:0;}
#pageTitle h3:after {display:none;}

@media all and (max-width:1230px) {
	#font_control {padding:0;}
	#topmenu {padding: 0 0 0 17%;width: 83%;}
	#topmenu > li {width: 14.2%;}
	#topmenu > li > a {font-size: 19px;}
}

@media all and (max-width:1200px) {
	#top .global > li {width:120px;}
	#subVisual > img {margin-left:-1050px;}
}
@media all and (max-width:1024px) {
	#sub_default{padding:0;}

	#font_control {display:none;}
	#top .btn_global.on + .global {width:140px;}
	#top .global > li {width:100%;}
	#top .global > li > a, #top .global > li.city a {background:#fff;}

	#header {height:70px; border-bottom:1px solid #ddd;}
	#header .logo {top:15px;}
	.logo a > span {padding:7px 0 0 0; font-size:22px;}
	.logo strong{display:inline-block; vertical-align:bottom; font-size:23px;}
	.btn_menu {display:block; top:20px;}

	.m_menu .logo {top:30px;}
	.m_menu .logo a, .m_menu .logo span > span {color:#333;}
	.m_menu > ul > li{width:100%;}
	.m_menu > ul > li > div,
	.m_menu > ul > li.current_on div, .m_menu > ul > li .on + div,
	.m_menu > ul > li > a:before,
	.m_menu > ul > li.current_on > a:before, .m_menu > ul > li > .on:before{display:none;}

	#subVisual .inner {left:0; margin-left:0;}
	#subVisual .inner .txt {top:65px;}
	#subVisual .inner .txt p.slogan {font-size:20px;}
	#subVisual .inner .txt img {height:30px;}

	#footer{padding:30px 15px; text-align:center;}
}

@media all and (max-width:768px) {
	#top .global > li > a.current:after {margin-top:-1px;}
	#top .global > li.list > a.on:after {transform:rotate(-90deg);}
	
	.logo img {padding-right:0;}
	#header {height:55px;}
	#header .logo {top:12px;}
	.logo img {padding:0 3px 0 0;}
	.logo a > span{padding:4px 0 0 0; font-size:20px;}
	.logo strong{font-size:21px;}
	.m_menu .logo{top:24px;}

	.btn_menu {top:11px;}

	#subVisual .inner .txt {top:50px;}
	#subVisual .inner .txt p.slogan {font-size:17px;}
	#subVisual .inner .txt img {height:21px;}
	#subVisual .inner .txt p:last-child {font-size:13px;}

	#footer{padding:30px 10px;}
}
@media all and (max-width:568px) {
	.logo a > span{font-size:19px;}
	.logo strong{font-size:20px;}

	#subVisual .inner .txt {top:45px;}
	#subVisual .inner .txt p.slogan {font-size:16px;}
	#subVisual .inner .txt img {height:18px;}
	#subVisual .inner .txt p:last-child {display:none;}
}

@media all and (max-width:400px) {
	#top .btn_global.on + .global {width:125px;}
	
	.logo a > span{font-size:18px;}
	.logo strong{font-size:19px;}

	#subVisual .inner .txt {top:32px;}
	#subVisual .inner .txt p.slogan {font-size:14px;}
	#subVisual .inner .txt img {height:16px;}
}