/*--------------------------------------
	HTML Elements Default Properties
	- layout
---------------------------------------*/
/* layout
---------------------------------------*/
#wrap { min-width: 320px; overflow: hidden;}
#header { position: relative; -webkit-transition: top 0.3s; -moz-transition: top 0.3s; transition: top 0.3s; z-index:2;}
.overlay { height: 100%; width: 0; position: fixed; z-index: 3; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.9); overflow-y: auto; overflow-x: hidden; text-align: center; opacity:0; 
	-webkit-transition: opacity 0.5s; transition: opacity 0.5s; }
.sizeBox { max-width: 990px; margin: 0 4%;} /* 컨텐츠 990px 사이즈 */

#header.fixed { position: fixed; right: 0px; left: 0px; top:0px; z-index:2; background:#fff;  box-shadow: 0 1px 1px rgba(0,0,0,0.1);}
#location.fixed { position: fixed; top:51px; z-index:2; transition:all .3s; box-shadow: 0 1px 1px rgba(0,0,0,0.1);}

/* header  ----------------*/
h1 { font-size:0px; }/* z-index: 9999; */
h1 a { display:block; padding:15px; width:172px; height:24px; overflow: hidden; background:url('../../images/common/h1_logo_m.png') no-repeat center; background-size:172px 21px;}

.menuOpen { position: absolute; top:3px; right:0px; z-index:10; font-size:0px; border:0px; width: 45px; height: 45px; background:#fff url('../../images/common/btn_mMenu.png') center no-repeat;}	
.menuClose { position: absolute; top:0px; right:0px; z-index:99; font-size:0px; border:0px; display: block; width: 45px; height: 45px; background:#fff url('../../images/common/btn_mMenuClose.png') center no-repeat; transform: rotate(0); transition:transform .3s; background-size: 16px;}	
.menuClose:hover { transform: rotate(90deg); transition:transform .3s; }

.gnbBox { position: fixed; top:0px; right:-100%; z-index:10; bottom:0px; width:100%; background: #fff; transition: 0.5s;}
/*.gnbBox:after { content:''; position: absolute;display:block; padding:15px; width:172px; height:24px; overflow: hidden; background:url('../../images/common/h1_logo_m.png') no-repeat center; background-size:172px 21px;}*/
#gnb { position: absolute; left:0; right:0; bottom:12px; top:56px; overflow-y: auto;}
#gnb > ul > li { background:#75c043; border-bottom:1px solid #80cd49;} /*border-bottom:1px solid #ececec;  */
#gnb > ul > li h2 { font-size:15px; font-weight: 400;}
#gnb > ul > li > h2 > a { padding:15px; font-weight: 700;}
#gnb ul li a { color:#262626; display:block; padding:10px 0 11px;}

#gnb .subGnb { }
#gnb .subGnb li { background:#80cd49; }
#gnb .subGnb li a { font-size:13px; padding:8px 0 9px 30px; border-top:1px solid #75c043; color:#fff;}
#gnb ul li a.sub { background:url('../../images/common/blt_arrow01.png') no-repeat 97% center; background-size: 13px;}
#gnb ul li a.sub.active { background:url('../../images/common/blt_arrow02.png') no-repeat 97% center; background-size: 13px;}

.language { position: absolute; left:10px; top:17px;}
.language a { margin-left:5px; font-size: 12px; width:40px; line-height:18px; text-align: center; font-weight: 700;}
.language a.active { border:1px solid #75c043; color:#75c043;  }

/* LOCATION */
#location { background:#75c043; width:100%; display: table;}
.locationBox { max-width:990px; margin: auto; position: relative;}
.locationBox .home { display: none;}
.locationBox > ul > li { float:left; position:relative; width:50%;}
.locationBox > ul > li.locationList { }
.locationBox > ul > li > a { color:#262626; background:#80cd49; border-right:1px solid #75c043; text-align:left; display: block;}
.locationBox > ul > li > a > span {  display:block; padding:0 30px 0 0; background:url('../../images/common/icon_arrow05.png') no-repeat 95% center; margin-left:15px;}
.locationBox > ul > li > ul { position:absolute; width:99.5%; left:-1px; border:1px solid #f3f5f7; border-top:0px; z-index: 10; background:#fff; display:none;}
.locationBox > ul > li > ul li { border-top:1px solid #f3f5f7 }
.locationBox > ul > li > ul li a {  padding:11px 10px; color:#444; word-break: keep-all; word-wrap: break-word; display: block; line-height:normal}
.locationBox > ul > li > ul li a:hover { background:#f3f5f7; text-decoration: none;}
.locationBox > ul > li > a > em {  display:inline-block; padding:0 30px 0 0;margin-left:15px; }

#location,
.locationBox .home
.locationBox > ul > li > a  { line-height:40px; font-weight: 700;}
.locationBox .locationList.active {} /*  border:1px solid #666; border-bottom:0px; border-top:0px; */

/* content ----------------*/
#content { min-height:300px; position:relative;}
#contBox { margin-top:24px}
h3 { font-size:18px; font-weight: 700; text-align: center; margin-bottom:15px;}
.subText { text-align: center; margin:0 10px}

/* footer ----------------*/
#footerArea.main { margin-top:0px;}
#footerArea { margin-top:30px;}
#footerArea.main .footerUtill { background:#fff;}
.footerUtill { position: relative; background: #f3f5f7; padding:32px 0; text-align:center;  }
.footerMenu { text-align: center; display:inline-block;}
.footerMenu a { font-size:14px; padding:0 10px;  font-weight: 700;}
address { text-align:center; margin-top:10px; color:#666; font-size:12px; line-height:18px;}
address em { display: block; }


.family_site { 
border: 1px solid #e6e6e6;
height: 32px;
line-height: 32px;
color: #666; 
text-overflow: ellipsis;
white-space: nowrap;
border-radius: 0px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 190px;
display: inline-block;
position: relative;
text-align: left;
background:#fff;
}
.family_site .spf-action-plus { position: absolute; right: 0; top: 0; width: 32px; height: 32px; display: inline-block;background:url(../../images/common/icon_arrow05.png) no-repeat center;}
.family_site > a { display: block; padding: 0 30px 0 10px; text-decoration: none;}
.family_close { position: absolute; right: 7px; top:7px; width: 18px; height:18px; display:inline-block; transform: rotate(45deg); font-size:0; background:url('../../images/common/btn_more.png') no-repeat center;  }
.famliy_wrap { position: absolute; left:-1px; right:-1px; bottom:32px; background:#fff; color:#121212; padding: 12px 30px 12px 10px; border: 1px solid #e6e6e6; display: none;}
.famliy_wrap .inner ul li a:hover { font-weight: bold;}

.family_site.active { background:#e6e6e6;}
.family_site.active .famliy_wrap { display: block;}
.family_site.active .spf-action-plus { transform: rotate(180deg);}

/* Media Query CSS
--------------------------------------*/
@media (max-width: 387px) {
	.locationBox > ul > li > a > span.etc { line-height: 14px; padding: 7px 30px 5px 0; }
}

@media (min-width: 425px) {
	address em { display: inline-block; }
}

@media (min-width: 640px) {
	/* LOCATION */
	.locationBox .home { display: block; float:left; display:inline-block; text-indent: -9999px;  width:38px; background:#80cd49 url('../../images/common/icon_home.png') no-repeat center; border-right:1px solid #75c043;}
	.locationBox > ul > li { width:auto;}
	.locationBox > ul > li > a { padding:0 10px 0 0; min-width:150px;}
}
@media (min-width: 760px) {
	/* layout
	---------------------------------------*/
	h3 { font-size:24px; margin-bottom:30px; }
}

@media (max-width: 989px) {
	.footerMenu a {position: relative; margin-left:-4px;}
	.footerMenu a:after { content: ''; position: absolute; left: 0px; bottom:1px; width:2px; height:2px; background:#75c043;}
	.footerMenu a:first-child:after { display: none; margin-left:0px;}
}

@media (min-width: 990px) {
	/* layout
	---------------------------------------*/
	#wrap { overflow: visible; height: 100%; min-height:100%; margin:0 auto;}
	.sizeBox { margin: 0 auto;}
	.overlay  { display:none;}/*gnb 검은 배경 */
	#header { height:80px; max-width:990px; margin: auto;}
	#header.fixed {top:-10px; height:70px; left:0px; right:0px; max-width:100%;}
	#header.fixed .headerIn { max-width:990px; margin: auto; position:relative; }
	#location.fixed { position: fixed; top:60px; z-index:10; }
	#container { min-height:100%; margin:-80px 0 -120px;}
	* html #container {	height: 100%; }
	#content { padding: 80px 0 120px;}
	h3 { font-size:28px; margin-bottom:30px; }
	h4 { font-size:20px; text-align:center; margin-bottom:30px;}
	.subText { font-size:16px; text-align: center; font-weight: 700;}
	#contBox { margin:85px auto 0;}

	#footerArea { height:120px; max-width:990px; margin: auto; clear: both;}
	
	/* header  ----------------*/
	h1 { max-width: 272px; display:inline-block; width:100%;} 
	h1 a { margin:28px 0 20px; padding:0; max-width: 272px; width:100%; height:32px; background:url('../../images/common/h1_logo.png') no-repeat center; background-size:100%; }
	.menuOpen, .menuClose  { display: none;}
	h1.hidden { left: 30px; top: 41px;}
	
	.gnbBox { position: static;}
	#gnb { position: absolute; left:36%; bottom:auto; top:33px; padding-right:0; overflow-y: auto;}
	#gnb > ul { float: left;}
	#gnb > ul > li { float:left; border:0px; margin:0 10px 0; position:relative; background:none; border-bottom:0px;}
	#gnb > ul > li:first-child { margin:0px;}
	#gnb > ul > li > h2 > a { padding:4px 10px 9px;}
	#gnb ul li a { font-size:14px; font-weight:700; color:#272727; display:inline-block; padding:4px 10px 9px; min-width: 10.0%; text-align: center; text-decoration: none; -webkit-transition:all 0.3s ease; transition:all 0.3s ease;}
	#gnb ul li h2.active { color:#000000;}
	#gnb ul li h2.active:after { content:''; position:absolute; width:20px; height:4px; background:#73bb2b; bottom:0px; left: 50%; margin-left: -10px; }
	#gnb ul li a:hover { color:#000000;transition:all .3s ease; }
	#gnb ul li a:hover:after { content:''; position:absolute; width:20px; height:4px; background:#73bb2b; bottom:0px; left: 50%; margin-left: -10px; }
	#gnb ul li.last {display: none;}
	
	#gnb .subGnb { display: none !important;}
	#gnb ul li a.sub { background:none;}
	#gnb ul li a.sub.active { background:none;}
	
	.language { position: absolute; left: auto; right:0px; top:38px;}
	.language a { margin-left:-4px;font-size: 9px; width:33px; line-height:13px; text-align: center; font-weight: 700;}

	/* footer ----------------*/
	#footerArea { margin-top:0px;}
	.footerUtill { padding-top:32px; background: #fff;}	
	.footerMenu { float:left; text-align: left;} 
	.footerMenu:after { content: ''; position: absolute; left: 0px; top:0px; width:9px; height:1px; background:#000; display: block;}
	.footerMenu a { padding:0 10px 0 0; font-size:13px; color:#75c043; }
	address { float:right; color:#bcbcbc; font-size:12px; }
	
	.family_site { float: left; margin-left: 10px; margin-top: -8px;}
}