@charset "utf-8"; 
/*
  Project _ CSS Init
  FileName _ layout.css - (공통레이아웃)
  Author _ 쮸양~★
  Date _ 2023. 07. 12
  Last _ 
*/


@media all and (min-width:1400px){
	.inner, .container {width:1400px; margin:0 auto; position:relative;}
}

@media all and (max-width:1399px) {
	.inner, .container {width:100%; margin:0 auto; position:relative;}
	header .top_menu .inner {width:100%}
}

.ico_blank, .blank {display:inline-block; width:20px; height:20px; vertical-align:middle; text-indent:-99999px; background:url('/groups/common/images/ico_blank.png') no-repeat}


/* header */
#header {position:relative; width:100%; height:180px; /*overflow:hidden;*/ display:inline-block; transition:all 0.2s; -moz-transition:all 0.2s; -webkit-transition:all 0.2s; -o-transition:all 0.2s; background:#fff; border-bottom:1px solid #eee; z-index:10;}
#header .inner {position:relative}
#header .logo {position:absolute; top:60px; left:0px; z-index:10;}
#header .logo a {display:block; width:295px; height:52px; text-indent:-99999px; background:url(../images/common/h_logo_n.png) no-repeat 0px 0px;}

#header .head_top {position:relative; display:inline-block; width:100%; height:50px; line-height:50px; font-size:1.15em;}
#header .head_top::after {display:block;clear:both; content:''}
#header .head_top .right {float:right;}
#header .head_top .right li {display:inline-block; position:relative}
#header .head_top .right li:nth-child(1)::after {display:none;}
#header .head_top .right li:last-child::after {display:none;}

#header .head_top .right li.mainHome {border:1px solid #d2d2d2; border-radius:30px;}
#header .head_top .right li.mainHome a {padding:0px 30px 2px 50px; color:#02346b;}
#header .head_top .right li.mainHome a i.top_icon { position:absolute; top:7px; left:20px; width:24px; height:22px; display:block; background:url(../images/common/top_icon.gif) no-repeat 0px 0px;}

#header .head_top .right li a {display:block; font-size:15px; padding:0 10px; line-height:35px; color:#535353;} 


/* 메인메뉴 */
.gnb_bg {display:none; position:absolute; bottom:0px; top:80px;/* top:0px;*/ left:0; z-index:11; width:100%; background:#fff; /*border-bottom:1px solid #eee;*/}


#gnb_area {position:relative; width:100%; margin:0px auto; background:#50824D; margin-top: 75px; height: 50px;}
#gnb_area nav {position:relative; max-width:1400px; width:100%; height:100%; margin:0px auto; z-index:20; background: url(../images/common/menu_bg.jpg)no-repeat right; background-size: contain;}
#gnb_area nav .gnb_menu {position:relative; display:inline-block; float:left;}
#gnb_area nav .gnb_menu > li.depth1 {display:inline-block; position:relative; height:100%; vertical-align:top; }
#gnb_area nav .gnb_menu > li.depth1:last-child {padding-right:0px;}

#gnb_area nav .gnb_menu > li.depth1::after {position:absolute; right:-3px; top:35px; width:4px; height:4px; content:''; border-radius:100%; background:#333; z-index:1; display: none;}
#gnb_area nav .gnb_menu > li.depth1:last-child::after {display:none;}

#gnb_area nav .gnb_menu > li.depth1 > a {position:relative; float:right; height:100%; padding:0px 25px 0px 25px; align-items:center; justify-content:center; font-size:1.35em; color:#fff; font-weight:500; text-decoration:none; line-height:50px; text-align:center;}


#gnb_area nav .gnb_menu > li.depth1:hover > a {color:#fff;}
#gnb_area nav .gnb_menu > li.depth1:hover::before {position:absolute; left:0px; bottom:0px; width:100%; height:4px; content:''; background:#026B42; z-index:1;}

#gnb_area nav .gnb_menu > li.depth1 > .depth2 {display:none; position:absolute; width:100%;  padding:20px 10px; top:50px; left:0; background:#f9f9f9; border:1px solid #eee; border-top:none; text-align:center; border-radius:0px 0px 30px 30px;}
#gnb_area nav .gnb_menu > li.depth1 > .depth2 > ul li a {display:block; padding:5px 5px; font-size:1.0em; color:#555555; letter-spacing:-1px; text-decoration:none;}
#gnb_area nav .gnb_menu > li.depth1 > .depth2 > ul li a:hover {color:#000; font-weight:500;  background:#fff; border-radius:50px; text-decoration:none;}
#gnb_area nav .gnb_menu > li.depth1 > .depth2 > ul li > .depth3 {display:none}

#gnb_area nav .gnb_menu > li.depth1 > .depth2.on {display:block;}


#gnb_area nav .gnb_menu .txtLeft {position:absolute; top:20px; left:-150px; display:block;}


/******************************************************************************************************************************************
	gnb_search_box CSS (검색 스타일 설정) - 쮸양~★
*******************************************************************************************************************************************/
#gnb_area nav .gnb_right .gnb_search_open {padding-right:20px; color:#004ea2}
#gnb_area nav .gnb_right .gnb_search_open::after {content:''; display:block; position:absolute; top:15px; right:0; width:1px; height:20px; background:#ddd}
#gnb_area nav .gnb_right .gnb_search_open i {background:url('../images/common/gnb_search.png') no-repeat 50%; background-size:22px}

.gnb_search_box {position:relative; width:500px; margin:0px auto; padding:0px 0; z-index:10; height:60px; float: right; margin-top: 10px;}

.gnb_search_box .top_search {position:relative; height:50px; background:#fff; width:500px; margin:0 auto; border:2px solid #50824D; border-radius:50px; color:#cdcdcd;}
.gnb_search_box .top_search input {color:#cdcdcd !important;}
.gnb_search_box .top_search input[type=text] {margin:0; padding:0; width:calc(100% - 0px); height:47px; line-height:46px; font-size:15px; color:#cdcdcd !important; text-indent:20px; border:1px solid #50824D; border-radius:50px;}
.gnb_search_box .top_search button {position:absolute; top:0; right:0px; width:50px; height:47px; text-indent:-9999px; background:#50824D url('../images/common/gnb_search.png') no-repeat 50%; background-size:30px; border-radius:0px 50px 50px 0px;}
.gnb_search_box .top_search .gnb_search_close {display:block; text-indent:-9999px; position:absolute; top:0; right:0; width:65px; height:65px; background:#004ea2 url('../images/common/qr_close.png') no-repeat 50%; background-size:23px}



@media (max-width:1399px){
	#gnb_area {width:100%;}
	#gnb_area nav {width:98%;}
	.gnb_search_box {margin: 20px 65px 0 0 ;}
}

@media all and (min-width:1271px) {
	#menu_icon,  .close_menu {display:none}
	#gnb_area nav .gnb_top {display:none}	
	#gnb_area nav .gnb_menu > li.depth1 > a {font-size:20px;}
	
	#menu_open, #menu_close, .mobile_search_open, .mobile_search_box {display:none;}
}


@media all and (max-width:1270px) {
	#header {height:90px; display: block;}
	#header .top_menu {right:50px;}
	#header .head_top { display:none;}
	.gnb_search_box {margin: 20px 0px 0 0 ;}
	.gnb_search_box .top_search {width: 380px;}
	
	/* 상단스타일변경 */
	#header .logo {top:20px;}
	#header .logo a {background-size:100%;}
	#menu_icon {display:block;position:absolute;top:20px;right:0;width:50px;height:50px;text-indent:-9999px;background:#50824D url(../images/common/btn_menu.png) no-repeat center center;cursor:pointer;border-radius:100%;z-index: 99;}
	
	#gnb_area {display:none; position:fixed; right:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.8); z-index:100}
	#gnb_area nav {position:fixed; right:0; height:100%; width:240px; z-index:30; background:#50824D; overflow-y:scroll!important; -ms-overflow-style:none}
	#gnb_area nav::-webkit-scrollbar {display:none!important}
	
	#gnb_area nav .gnb_top {background:#50824D; color:#fff; text-align:center;}
	#gnb_area nav .gnb_top h2 {padding:30px 0; font-size:1.7em; font-weight:normal; border-bottom:1px solid rgba(232, 232, 232, 0.3);}
	#gnb_area nav .gnb_top h2 a {background:url('../images/common/menu_close.png') no-repeat; text-indent:-9999px; display:block; width:20px; height:20px; position:absolute; right:20px; top:30px}
	
	#gnb_area nav .gnb_top ul {line-height:52px; height:50px}
	#gnb_area nav .gnb_top ul li {display:inline-block; padding:0 20px 0 35px; position:relative;}
	#gnb_area nav .gnb_top ul li:first-child:before {content:""; display:block; position:absolute; width:1px; height:14px; right:0; top:38%; background:rgba(232, 232, 232, 0.3);}
	#gnb_area nav .gnb_top ul li.login {background:url('../images/common/menu_login.png') no-repeat 20% 45%}
	#gnb_area nav .gnb_top ul li.sitemap {background:url('../images/common/menu_sitemap.png') no-repeat 16% 49%}
	#gnb_area nav .gnb_top ul li a {display:block; font-size:1.2em; color:#fff; font-weight:300}
	
	#gnb_area nav .gnb_menu {padding:0px 20px; width:100%; margin-top:0px;}	
	#gnb_area nav .gnb_menu::after {display:block; clear:both; content:''}
	#gnb_area nav .gnb_menu > li {}
	#gnb_area nav .gnb_menu > li.depth1 {display:inline-block; border-top:1px solid rgba(232, 232, 232, 0.3); width:100%;}
	#gnb_area nav .gnb_menu > li.depth1::after { display:none;}
		
	#gnb_area nav .gnb_menu > li.depth1:first-child {border:none}
	#gnb_area nav .gnb_menu > li.depth1 > a {position:relative; width:100%; display:block; padding:0 0px; font-size:1.2em; color:#fff; text-decoration:none; height:50px; line-height:50px; text-align:left;}
	#gnb_area nav .gnb_menu > li.depth1 > a::before{position:absolute; top:17px; right:10px; content:''; display:block; width:10px; height:10px; background:transparent; border-left:2px solid #fff; border-bottom:2px solid #fff; -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg); transition:all .3s ease-in-out}
	#gnb_area nav .gnb_menu > li.depth1 > a.on::before {position:absolute; top:24px; right:10px; content:''; display:block; width:10px; height:10px; background:transparent; border-left:2px solid #fff; border-bottom:2px solid #fff; -moz-transform:rotate(-225deg); -ms-transform:rotate(-225deg); -webkit-transform:rotate(-225deg); transform:rotate(-225deg)}
	#gnb_area nav .gnb_menu > li.depth1:last-child > .depth2::after {display:none;}
	#gnb_area nav .gnb_menu > li.depth1 > .depth2::before {display:none;}
	#gnb_area nav .gnb_menu > li.depth1 > .depth2 {display:none; background:#f2f2f2; /*position:static;*/ border-radius:0; padding:0; text-align:left; border-radius:0px 0px 10px 10px; position: initial;margin-top: 60px;}
	#gnb_area nav .gnb_menu > li.depth1:hover > a {color:#fff}
	#gnb_area nav .gnb_menu > li.depth1 > .depth2 ul li {position:relative; border-top:1px solid #bbb}	
	#gnb_area nav .gnb_menu > li.depth1 > .depth2 ul li:first-child {border:none}
	#gnb_area nav .gnb_menu > li.depth1 > .depth2 ul li.open::before {position:absolute; right:14px; top:22px; display:block; width:15px; height:2px; background:#777; content:""}
	#gnb_area nav .gnb_menu > li.depth1 > .depth2 ul li.open::after {position:absolute; right:20px; top:16px; z-index:1; display:block; height:15px; width:2px; background:#777; content:""}
	#gnb_area nav .gnb_menu > li.depth1 > .depth2 ul li.close::before {position:absolute; right:14px; top:22px; display:block; width:15px; height:2px; background:#777; content:""}
	#gnb_area nav .gnb_menu > li.depth1 > .depth2 ul li a {font-size:1.0em; color:#353535; padding:10px 15px; display:block}
	#gnb_area nav .gnb_menu > li.depth1 > .depth2 > ul li > .depth3 {display:none; background:#fff; border-top:1px solid #bbb}
	#gnb_area nav .gnb_menu > li.depth1 > .depth2 > ul li > .depth3 ul li {; border:none}
	#gnb_area nav .gnb_menu > li.depth1 > .depth2 > ul li > .depth3 ul li a {border:none; font-size:0.9em; padding:5px 15px}
	
	/* 검색
	.gnb_search_box {display:none}	
	.mobile_search_open {display:block; position:absolute; top:20px; right:60px; width:50px; height:50px; text-indent:-9999px; background:#50824D url('../images/common/gnb_search.png') no-repeat 50%; background-size:20px; border-radius:100%; cursor:pointer}
	.mobile_search_box {display:none; position:absolute; top:20px; right:98px;}
	.mobile_search_box .top_search {position:relative; width:240px; height:50px; background:#fff; border:2px solid #004ea2;}
	.mobile_search_box .top_search input[type=text] {margin:0; padding:0; width:calc(100% - 40px); height:36px; line-height:36px; font-size:1.2em; color:#555; text-indent:10px; border:0; border-radius:20px 0 0 20px}
	.mobile_search_box .top_search button[type=button] {position:absolute; top:-2px; right:-2px; width:50px; height:50px; text-indent:-9999px; background:url('../images/common/gnb_search_blue.png') no-repeat 50%; background-size:20px}
	.mobile_search_box .top_search .mobile_search_close {display:block; text-indent:-9999px; position:absolute; top:-2px; right:-40px; width:50px; height:50px; background:#004ea2 url('../images/common/qr_close.png') no-repeat 50%; border-radius:100%; background-size:18px}
	 */
}



@media all and (max-width:760px) {
	#header {height: 160px;}
	#header .logo {left: 20px;}
	#menu_icon {right: 16px;}
	.gnb_search_box {margin:93px 0 0 0;}
	.gnb_search_box {width:100%;}
	.gnb_search_box .top_search {width:100%;}
}

@media all and (max-width:400px) {
	#header {height:140px;}
	#header .logo a {background-size:70%;}
	#menu_icon {width:30px; height:30px; background-size:50%;}
	.gnb_search_box {margin: 83px 0 0 0; height: 53px;}
	.gnb_search_box .top_search {height: 40px; width: 98%;}
	.gnb_search_box .top_search input[type=text] {height: 36px; line-height: 36px;}
	.gnb_search_box .top_search button {background-size: 22px; height: 36px;}
}



/******************************************************************************************************************************************
	quickMenu CSS (퀵메뉴 스타일) - 쮸양~★
*******************************************************************************************************************************************/
#quickMenuBox {position:fixed; top:300px; right:30px; width:125px; box-sizing:border-box; z-index:12; padding-top:20px; display:none;}
#quickMenuBox::before {content:""; width:52px; height:150px; display:block; position:absolute; top:-120px; right:30px; background:url(../images/common/quick_top.png) no-repeat 0px 0px;}

.quickMenu {width:100%; box-sizing:border-box; border-radius:30px; background:#fcfcfc; box-shadow: 0 1px 3px 0 rgba(62,73,89,.13); z-index:9999;}
.quickMenu h2 {color:#fff; background:#026b42; font-size:1.1em; text-align:center; font-weight:500; border-radius:20px 20px 0px 0px; padding:10px 10px;}
.quickMenu ul {padding:10px 10px;}
.quickMenu ul li {width:100%; margin:10px auto; padding-bottom:10px; text-align:center; border-bottom:1px solid #eee;}
.quickMenu ul li:last-child {margin-bottom:0px; border-bottom:none;}

.quickMenu ul li a {display:inline-block; vertical-align:middle; padding-top:50px; color:#000; font-size:14px;}
.quickMenu ul li a.ic_01 {background:url(../images/common/quick_01.png) no-repeat center 0px;}
.quickMenu ul li a.ic_02 {background:url(../images/common/quick_02.png) no-repeat center 0px;}
.quickMenu ul li a.ic_03 {background:url(../images/common/quick_03.png) no-repeat center 0px;}
.quickMenu ul li a.ic_04 {background:url(../images/common/quick_04.png) no-repeat center 0px;}
.quickMenu ul li a.ic_05 {background:url(../images/common/quick_05.png) no-repeat center 0px;}

#quickMenuBox .top {padding-top:27px; background:url(../images/common/quick_l.gif) no-repeat center 0px; display:block; text-align:center;}
#quickMenuBox .top a {width:42px; height:42px; padding:10px 10px; border-radius:100%; background:#eeeeee; margin:0px auto; color:#000; font-size:13px;}

@media all and (min-width:1399px) {
	#quickMenuBox {display:block;}
}



/******************************************************************************************************************************************
	footer CSS (하단푸터 스타일) - 쮸양~★
*******************************************************************************************************************************************/
/* 카피라이터 */
footer {position:relative; overflow:hidden; padding:20px 0; background:#A19985;}
footer::before {content:""; position:absolute; top:60px; left:0px; width:100%; height:1px; background:#eeeeee; display:block;}
footer .foot_bottom {position:relative; max-width:1400px; margin:0px auto;}
footer .flogo { position:absolute; top:60px; left:0px; display:block; width:297px; height:55px; text-indent:-99999px; background:url('../images/common/f_logo_n.png') no-repeat}
footer .footer_nav {margin-bottom:30px; padding-left:500px; color: #fff;}
footer .footer_nav li {display:inline-block; position:relative; padding-left:18px;}
footer .footer_nav li::before {content:""; position:absolute; left:7px; top:11px; width:4px; height:4px; background:#fff; border-radius:100%;}
footer .footer_nav li a {display:block; font-size:1.0em; color: #fff;}
footer .footer_nav li a span {color:#00479d;}
footer .footer_nav li:first-child {padding-left:0}
footer .footer_nav li:first-child::before {display:none}

footer .footer_info {font-size:1.0em; color: #fff; padding-left:330px;}
footer .footer_info address {display:block; padding:2px 0; line-height:1.3}
footer .footer_info .title {color: #fff; width:200px; display:inline-block;}
footer .footer_info .call {margin-left:10px; color: #fff; letter-spacing:0em;}
footer .footer_info small {font-size:0.9em; margin-top:10px; display:inline-block; letter-spacing:0em;}
footer .footer_info small a {text-decoration:none;}
footer span.dark_gray {color:#676767;}

footer .footer_bn {position:absolute; right:0px; top:20px; display:inline-block;}
footer .footer_bn li {float:left; text-indent:-1000em; border-radius:50px; margin-left:5px;}
footer .footer_bn li a {width:30px; height:30px; display:block;}
footer .footer_bn li.home {background:#0d3896 url(../images/common/foot_01.gif) no-repeat center center;}
footer .footer_bn li.blog {background:#00c73c url(../images/common/foot_02.gif) no-repeat center center;}
footer .footer_bn li.face {background:#4676ed url(../images/common/foot_03.gif) no-repeat center center;}
footer .footer_bn li.kakao {background:#fae100 url(../images/common/foot_04.gif) no-repeat center center;}


@media all and (max-width:1170px) {
	footer {padding: 20px;}
	footer .flogo {display:none;}
	footer .footer_nav {padding-left:0px; text-align:center;}
	footer .footer_info {padding-left:0px;}
	
}
@media all and (max-width:870px) {
	footer .footer_info .title {width:100%; margin-left: 0px !important;}
	footer .footer_info small {width:100%; text-align:center;}
}
@media all and (max-width:380px) {
	footer::before {top:80px;}
	
}