/************************************************************************
 * 파일명	: layout.css
 * 설명		: 공통 CSS
************************************************************************/

/***** Layout *****/
#wrap {position:relative;}
#wrap #container {width:100%; margin:0px;}
.inner {position:relative; max-width:1400px;  margin:0 auto; padding:0 30px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
#skip_nav {display:none;}

.mobile {display:none;}


/********** Header **********/
/* GNB */
#wrap #header {position:relative; z-index:1000; top:0px; width:100%; height:80px; margin:0; box-shadow:rgba(113, 113, 113, 0.2) 0px 2px 6px; background-color:#fff;}
#wrap #header nav {position:relative; width:100%;  margin:0 auto;}
#wrap #header nav  h1 {position:relative; width:300px; height:50px; top:15px;}
#wrap #header nav .sitemap {position:absolute; top:0px; right:0px; top:27px;}
#wrap #header nav .sitemap a {display:block; color:#fff; background-color:#1db2fc; border-radius:26px; padding:0 15px; line-height:26px; font-size:11px; letter-spacing:0.1em;}


/* Util - name 고정 */
#wrap #header nav .util_wrap {position:absolute; top:0px; left:50%; margin-left:-270px; width:540px;}
#wrap #header nav .util_wrap:after {content:""; display:block; clear:both}
#wrap #header nav .util_wrap ul li {float:left; text-align:center; width:33%; background:url('../img/common/icn_menu.png') no-repeat 0 40px;}
#wrap #header nav .util_wrap ul li:first-child {background:none}
#wrap #header nav .util_wrap ul li a {display:block; position:relative; color:#565656; font-size:16px;  text-align:center; line-height:80px;  transition: all 300ms ease-in-out; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out;}
#wrap #header nav .util_wrap ul li a:hover {color:#2994d1; text-decoration:underline; overflow:hidden;}
#wrap #header nav .util_wrap ul li:hover a:after {content:""; display:block; position:absolute; bottom:-10px; right:0; left:50%; margin-left:-8px; height:15px; width:15px; background-color:#103560; overflow:hidden; transform:rotate(-45deg);    -moz-transform:rotate(-45deg);    -webkit-transform:rotate(-45deg);    -o-transform:rotate(-45deg) ;	}
#wrap #header nav .util_wrap ul li ul {overflow:hidden; max-height:0;  background:#fff;   transition: all 400ms ease-in-out; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; background-color:#103560;}
#wrap #header nav .util_wrap ul li:hover ul { max-height:300px; padding:0 0px 15px 0px;}
#wrap #header nav .btn_nav	{display:none}

#wrap #header nav .util_wrap ul li ul li {float:left;  width:100%;}
#wrap #header nav .util_wrap ul li ul li:first-child {float:left;; width:100%; padding-top:10px;}
#wrap #header nav .util_wrap ul li ul li a {display:block; width:90%; padding-left:10%; color:#8d9db0; font-size:14px; line-height:34px;  font-family:"Nanum-bold";   text-align:left }
#wrap #header nav .util_wrap ul li ul li a:hover	{background:none; color:#fff; text-decoration:none; box-shadow:none !important;}
#wrap #header nav .util_wrap ul li ul li ul li a {display:block; width:90%; padding-left:20%; color:#6d86a3; font-size:13px; line-height:24px;  font-family:"Nanum-regular";   text-align:left; background:url('../img/common/icn_menu.png') no-repeat 13% 10px;}
#wrap #header nav .util_wrap ul li ul li ul li a:hover	{color:#fff; text-decoration:none; box-shadow:none !important;  background:url('../img/common/icn_menu.png') no-repeat 13% 10px;}




/* footer */
.footer { overflow: visible; width: 100%; background: #000; }
.footer .inner { position: relative; margin: 0 auto; max-width:1400px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
.foot_top .inner {border-bottom:1px solid #404040;}
.foot_top .foot_menu {width:100%; padding-top:0px;}
.foot_top .foot_menu li { position: relative; display:inline-block; width: auto; text-align: center; }
.foot_top .foot_menu li a { display: block; color: #fff; line-height: 69px; font-size: 14px; transition: all 300ms ease-in-out; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; padding:0 10px;}
.foot_top .foot_menu li a:hover { color: #51b1fd; } 
.foot_top .foot_menu li:before { display: block; content: ''; position: absolute; top: 50%; left: 0; margin-top: -8px; width: 1px; height: 15px; background: #a4a5a6; } 
.foot_top .foot_menu li:first-child:before { display: none; }

.foot_btm { padding: 32px 0 0 0px !important; min-height: 170px; }
.foot_btm address { color:#a2a2a2; line-height: 1.45em; font-size: 14px; font-style:normal;}
.foot_btm .copy { color: #707070; line-height: 1.45em;font-size: 14px;}


/* familySite */
.familySite {position: absolute; top:20px; right: 100px; overflow: hidden; margin: 0; width: 160px; background-color:#fff; border: 2px solid #c7cacf;  box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
.familySite > a { display: block; position: relative; overflow:hidden; padding-left: 15px; height: 0; color: #222; line-height: 38px; font-size: 13px; letter-spacing:1px; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out;}
.familySite > a:hover {color:#103560;}
.familySite > a.active { height: 38px; background: #fff;  }
.familySite > a.active:before { display: block; content: ''; position: absolute; top: 50%; left: 20px;}
.familySite > a span { position: absolute; top: 50%; right: 20px; margin-top: -12px; width: 20px; height: 20px; vertical-align: middle; }
.familySite > a span:before { display: block; overflow: hidden; content: ''; position: absolute; top: 50%; left: 2px; width: 10px; height: 2px; background: #222;  transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out;}
.familySite > a span:after { display: block; overflow: hidden; content: ''; position: absolute; top: 50%; right: 2px; width: 10px; height: 2px; background: #222; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; }
.familySite.on { border: 1px solid #c7cacf; background: #fff; background: rgba(0,0,0,0.4); }
.familySite.on .item { height: 48px;  background-color:#fff;}
.familySite.on .item:hover{ color: #000; background: #e7ebef; }
.familySite.on > a span:before { transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg);}
.familySite.on > a span:after { transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg);}
.familySite.on .item { height: 38px; }


/* Popup */
.Popup { position:relative; z-index:100;}
.Popup .Inner { padding:60px 15px 15px 15px;}
.Popup .Inner .PopSlider { position:relative; height:0; padding:0 0 100% 0; z-index:1;}
.Popup .Inner .PopSlider .innerFrame { width:100%; height:2500px;}
.Popup .Inner .PopSlider .innerFrame .slider { width:100%; height:100%;}
.Popup .Inner .PopSlider .innerFrame .slider .item { float:left; width:100%;}
.Popup .Inner .PopSlider .innerFrame .slider .item img { width:100%;}
.Popup .Inner .PopSliderIndicator { position:relative; width:100%; height:15px; margin:25px 0 0; padding:0 0 11px; z-index:10; text-align:center;}
.Popup .Inner .PopSliderIndicator button { display:inline-block; width:13px; height:13px; margin:0 2px; background:url("/images/index/rollingbtn_off.png") no-repeat left top; text-indent:-50px;}
.Popup .Inner .PopSliderIndicator button.active { background-image:url("/images/index/rollingbtn_on.png");}
.Popup .Inner .Desktop { display:none;}
.Popup .Closer { position:absolute; right:10px; top:10px; z-index:10; width:30px;}
.Popup .Closer img { width:100%;}
.Popup .StopShow { padding:15px 0 0 0; text-align:right; color:#fff;}
.Popup .StopShow input { margin-left:5px;}



@media all and (max-width:1199px){
	.inner {position:relative; width:94%;  margin:0 3%; padding:0px;}
}

@media all and (max-width:1023px){
	#wrap #header .inner {width:100%; left:0%;  margin:0%;}


	/* GNB */
	#wrap #header nav h1 {left:3%; top:9px;}
	#wrap #header nav h1 img  {width:120px;}

	#wrap #header { top:0px; width:100%; height:55px; margin:0; box-shadow:rgba(113, 113, 113, 0.2) 0px 2px 6px; background-color:none;}
	#wrap #header .inner nav {position:relative;}
	#wrap #header nav .sitemap {display:none;}

	#wrap #header nav .btn_nav	{display:block; }
	#wrap #header nav .btn_nav.open	{position:absolute; top:0px; right:0; width:62px; height:50px; background:url('../img/common/btn_nav_open.png') no-repeat 0 0}
	#wrap #header nav .btn_nav.closed {position:absolute; top:0; right:0; width:58px; height:51px; background:url('../img/common/btn_nav_closed.png') no-repeat 0 0}
	#wrap #header nav .util_wrap	{overflow-y:scroll; position:fixed; z-index:10000; top:0; right:-100%; bottom:0; left:auto; width:100%; background:#1f1f1f;}

	#wrap #header nav .util_wrap ul	{padding-top:11px; padding-top:60px;}
	#wrap #header nav .util_wrap ul li	{float:none; width:auto !important; margin:0 !important; background:none;  text-align:Center;}
	#wrap #header nav .util_wrap ul li:first-child	{border-top:0px solid #3d3d3d}
	#wrap #header nav .util_wrap ul li a	{color:#d6d6d6; padding:5px 0px 0 0px; font-size:22px;  line-height:60px}
	#wrap #header nav .util_wrap ul li a:hover {color:#fff; text-decoration:none;}

	#wrap #header nav .util_wrap ul li a:after		{content:""; display:block !important; position:absolute; top:20px; right:20px; width:17px; height:9px; background:none;}
	#wrap #header nav .util_wrap ul li:hover a:after		{content:""; display:block !important; position:absolute; top:20px; right:20px; left:auto; width:17px; height:9px; background:none;}
	#wrap #header nav .util_wrap ul li.on a:after	{top:19px; background-position:0 0}
	#wrap #header nav .util_wrap ul li.on:hover a:after	{top:19px; left:auto; background-position:0 0}

	#wrap #header nav .util_wrap ul li.on ul li a:after	{display:none !important;}	
	#wrap #header nav .util_wrap ul li.on:hover a:after ul li a:after	{display:none}
	#wrap #header nav .util_wrap ul li ul li a:after	{display:none !important}
	#wrap #header nav .util_wrap ul li:hover ul li a:after	{display:none !important}

	#wrap #header nav .util_wrap ul li ul	{position:static !important; display:block; margin:0 5% !important; padding:0 !important; border:0; background:#313131 !important; border:none !important; box-shadow:none; width:90%; }
	#wrap #header nav .util_wrap ul li ul li	{float:none !important; border:0; text-align:center;}
	#wrap #header nav .util_wrap ul li ul li a	{color:#9f9f9f !important; margin:0px !important; margin-bottom:0 !important; margin-left:0 !important; float:none !important; !important; padding:0px; font-size:16px !important; line-height:34px !important;  text-transform:none; text-align:Center; }
	#wrap #header nav .util_wrap ul li ul li a:hover	{color:#fff !important;  }

	#wrap #header nav .dim	{display:block; position:fixed; z-index:99; top:0; right:-100%; bottom:0; left:100%; background:#fff; opacity:0.0; -moz-transition: opacity 0.5s ease-out; -ms-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: all 0.3s ease-out;}
	#wrap #header nav .util_wrap		{-webkit-transition: all 0.5s cubic-bezier(0.770, 0.000, 0.175, 1.000); -moz-transition: all 0.5s cubic-bezier(0.770, 0.000, 0.175, 1.000); -ms-transition: all 0.5s cubic-bezier(0.770, 0.000, 0.175, 1.000); -o-transition: all 0.5s cubic-bezier(0.770, 0.000, 0.175, 1.000); transition: all 0.5s cubic-bezier(0.770, 0.000, 0.175, 1.000)}
	#wrap #header nav.on .util_wrap	{right:0}
	#wrap #header nav .util_wrap ul li ul	{overflow:hidden; max-height:0; padding:0 0 !important; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
	#wrap #header nav .util_wrap ul li.on ul	{max-height:1000px !important; padding:20px 0 !important; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition:all 0.5s ease;}
	#wrap #header nav .util_wrap ul li.on ul li ul	{padding:0 !important}
	#wrap #header nav .util_wrap ul li.on ul	{max-height:1000px !important}
	#wrap #header nav .util_wrap ul li:hover ul	{max-height:0; border-bottom:0}
	#wrap #header nav .util_wrap >ul > li		{-webkit-transform: translate3d(250px, 0, 0); -moz-transform: translate3d(250px, 0, 0); -o-transform: translate3d(250px, 0, 0); transform: translate3d(250px, 0, 0); -webkit-transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000);	}
	#wrap #header nav.on .util_wrap >ul > li	{-webkit-transform: translate3d(0px, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
	#wrap #header nav.on .dim	{display:block; right:0; left:-2000%; opacity:0.2; -moz-transition: opacity 0.3s ease-out; -ms-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out;}
	#wrap #header nav .util_wrap ul li span.arrow {display:none;}
	#wrap #header nav .util_wrap ul li.sub-menu ul li a {text-align:center; padding-left:0%; width:100%;}


	#wrap #header nav .util_wrap ul li ul li ul li a {background:none;}
	#wrap #header nav .util_wrap ul li ul li ul li a:hover	{background:none;}

	/* footer */
	.footer { overflow: visible; width: 100%; min-height: 250px; background: #000; padding-bottom:130px;}
	.foot_top .foot_menu {width:100%; padding-top:0px; text-align:Center;}
	
	.familySite {position: absolute; top:6px; right:60px; overflow: hidden; margin: 0; width: 160px; background-color:#fff; border: 2px solid #c7cacf;  box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
	

}

@media all and (min-width: 980px) {
	/* Popup */
	.Popup { }
	.Popup .Inner { position:relative; max-width:1280px; margin:0 auto; padding:0;}
	.Popup .Inner .PopSlider { height:0; padding:0 0 22.8%;}
	.Popup .Inner .PopSlider .innerFrame .slider .item img { width:100%;}
	.Popup .Inner .PopSliderIndicator { margin-top:-57px;}
	.Popup .Inner .Mobile { display:none;}
	.Popup .Inner .Desktop { display:block;}
	.Popup .Closer { right:15px; top:15px;}
	.Popup .StopShow { position:absolute; right:15px; bottom:15px; z-index:15; padding:0;}
}

@media all and (min-width: 1280px) {
	/* Popup */
	.Popup .Inner { height:250px;}
	.Popup .Inner .PopSliderIndicator { margin-top:-27px;}
	.Popup .Inner .PopSlider { height:250px; padding:0;}
}