@charset "utf-8";
html,body {
	font-family:'Pretendard' !important;
	font-size: 10px;
	font-weight: 500;
}
#header *,
#header *:before,
#header *:after {
  transition: all 0.3s ease;
}
/* 네비
#header {overflow: hidden;height: 150px;background: #fff;border-bottom: 1px solid #D6DFEB;}
#header .top {background: #EEF2F7;}
#header .top > .inner {display: flex;justify-content: space-between;align-items: center;height: 5rem;}
#header .top > .inner > div {display: flex;}
#header .top > .inner > div a {position: relative;display: block;font-size: 1.5rem;line-height: 1.5;}
#header .top > .inner > div a:last-child {margin-left: 1rem;padding-left: 1rem;}
#header .top > .inner > div a:last-child:before {content:'';position:absolute;top:50%;left:0;transform: translateY(-50%);width:1px;height:1.6rem;background-color: #c3cdd8;}
#header .top > .inner > div a.flag {
	padding-left: 3.5rem;
	background-image: url('/images/susang/common/icon_flag.svg');
	background-position: 0 center;
	background-repeat: no-repeat;
	background-size: 3rem auto;
	border-right: 0;
} */
#header {overflow:hidden;height:150px;background:#fff;border-bottom:1px solid #D6DFEB;}
#header .top {overflow:hidden; background:#fafafa;border-bottom:1px solid #ddd;}
#header .top .topL {float:left;}
#header .top .topL > a {float:left;color:#363636;line-height:40px;padding:0 15px 0 40px;border-right:1px solid #ddd; font-size:13px;}
#header .top .topL > a:first-child {padding-left:15px;border-left:1px solid #ddd;}
#header .top .topL > a.lnk00 {background:url('/images/common/util_link00.png') 10px 50% no-repeat;}
#header .top .topL > a.lnk01 {background:url('/images/common/util_link01.png') 10px 50% no-repeat;}
#header .top .topL > a.lnk02 {background:url('/images/common/util_link02.png') 10px 50% no-repeat;}
#header .top .topL > a.lnk03 {background:url('/images/common/util_link03.png') 10px 50% no-repeat;}
#header .top .topL > a.lnk04 {background:url('/images/common/util_link04.png') 10px 50% no-repeat;}
#header .top .topL > a.lnk05 {padding-left:55px;background:url('/images/common/util_link07.png') 10px 50% no-repeat;}
#header .top .topL > a.lnk06 {background:url('/images/common/util_link06.png') 10px 50% no-repeat;}
#header .top .topR {float:right;}
#header .top .topR a {float:left;padding:0;}


#header .gnbPC {overflow:hidden;}
	.gnbPC .gnbArea {width:100%;position:absolute;top:49px;}
	.gnbPC .gnbArea h1.logo {position: absolute;top: 50%;left:calc(50% - 650px);transform: translateY(-50%);width:200px;z-index:9999;}
	.gnbPC .gnbArea > ul {max-width: 1300px;margin: 0 auto;padding-left: 72rem;display: flex;justify-content: space-between;}
	.gnbPC .gnbArea > ul > li {padding:0;line-height:55px;text-align:center;}
	.gnbPC .gnbArea > ul > li.first{padding-left:0}
	.gnbPC .gnbArea > ul > li.last{padding-right:0;background:none;}
	.gnbPC .gnbArea > ul > li > a {display: block;font-size: 2rem;font-weight: 600;line-height: 100px;color: #111;}
	.gnbPC .gnbArea > ul > li > a:hover,
	.gnbPC .gnbArea > ul > li > a:active {color: #252b99;}
	.gnbPC .subGnb {display: none;position: absolute;top: 100px !important;left: 0;width: 100%;background-color: #fff;border-width: 1px 0;border-color: #D6DFEB;border-style: solid;text-align: left;z-index: 1001;}

	.gnbPC .subGnb .dept2 {display: flex;justify-content: center;align-items: center;gap: 3.2rem;height: 5rem;}
	/*.gnbPC .subGnb .dept2 > li {min-height: 4rem;}*/
	.gnbPC .subGnb .dept2 > li > a {display: block;font-size: 1.6rem;line-height: 1.5;color: #666;}
	.gnbPC .subGnb .dept2 > li > a:hover {font-weight: 700;color: #000;}

	.openM,
	.gnbhead,
	.gnbMobile,
	#header .topMobile, 
	#header .middleMobile {display:none;}
	a.blank {
		padding-right: 2rem;
		background-image: url('/images/skywalk/common/icon_blank.svg');
		background-position: right center;
		background-repeat: no-repeat;
		background-size: 1.6rem auto;
	}

@media all and (max-width:1300px){		
	#header .top,
	.gnbPC .gnbArea > ul {padding: 0 3%;}
	.gnbPC .gnbArea h1.logo {left: 3%;width:200px;}
}

@media screen and (max-width: 1299px) and (min-width:1024px) {
	.gnbPC .gnbArea > ul {padding-left: 550px}
}

@media all and (max-width:1023px){
	#header .top,
	.gnbArea h1.logo,
	.gnbArea, .gnbPC {display: none;}
	.gnbhead, .gnbMobile {display: block;}
	#header .topMobile, 
	#header .middleMobile {display: block;}
	
	/* mobile네비*/
	#header {height:110px;}	 
	#header .topMobile {overflow:hidden;background:#fafafa;border-bottom:1px solid #ddd;height:40px;line-height:40px;}
	#header .topMobile:after {display:block;clear:both;content:'';}
	#header .topMobile .topMobileL {float:left;}
	#header .topMobile .topMobileR {float:right;}
	#header .topMobile .topMobileL a,
	#header .topMobile .topMobileR a {display:inline-block;padding:0 10px;}
	#header .topMobile .topMobileL a {border-right:1px solid #ddd;}
	#header .topMobile .topMobileR a {border-left:1px solid #ddd;}
	#header .topMobile .topMobileL a::before {display:none;}
	#header .topMobile .topMobileL a img,
	#header .topMobile .topMobileR a img {vertical-align:middle;}
	#header .topMobile .fam {display:inline-block;min-width:150px;height:40px;}
	#header .topMobile .fam > a {display:block;padding:0 8px;font-size:13px;color:#5a5a5a;text-transform:uppercase;}
	#header .topMobile .fam > a.off span {display:block;background:url('/images/common/fam_arrow_open.gif') 98% center no-repeat;}
	#header .topMobile .fam > a.on span {display:block;background:url('/images/common/fam_arrow_close.gif') 98% center no-repeat;}
	#header .topMobile .fam ul {display: none;position: absolute;top: 40px;left: 5.8rem;padding: 8px;background:#545454;min-width:150px;z-index:9;border-radius:0 0 4px 4px;-webkit-border-radius:0 0 4px 4px;}
	#header .topMobile .fam ul li:last-child {border-bottom:0;}
	#header .topMobile .fam ul li a {display:block;color:#fff;padding: 0 0.4rem;font-size: 13px;line-height: 2;border-right:0;}
	
	#header .middleMobile {position: relative;padding: 1.6rem 3%;text-align: right;}
	#header .middleMobile .openM {display: inline-block;width: 36px;}
	#header .middleMobile .logoM {display: block;position: absolute;top: 50%;transform: translateY(-50%);}	
	#header .middleMobile .logoM img{width: 160px;}	
		
	.gnbhead > div {padding: 2rem 3%;background-color: #fff;overflow: hidden;vertical-align: middle;}
	.gnbhead > div a {float: left;display:inline-block;}
	.gnbhead > div a.closeM {float:right;width:24px;}
	.gnbhead > div a.sloganM img{width:160px;}
	.gnbhead ul {background: #555;overflow:hidden;}
	.gnbhead ul li {float:left; width:50%; border-left:1px solid #666;}
	.gnbhead ul li:first-child {border-left:0;}		
	.gnbhead ul li a {display:block; padding:10px 0;}
	.gnbMobile .dept1 > li > a {position: relative;display: block;padding: 2rem 2.4rem;font-size: 1.7rem;font-weight: 500;color: #fff;background: #293138;border-bottom: 1px solid rgba(0,0,0,0.2);}
	.gnbMobile .dept1 > li > a:hover,
	.gnbMobile .dept1 > li > a:active,
	.gnbMobile .dept1 > li > a:focus {border-bottom: transparent;background: linear-gradient(45deg,rgba(36, 78, 162, 1) 0%, rgba(208, 48, 60, 1) 100%);}
	.gnbMobile .dept1 > li > a::after {
	    content: '';
	    position: absolute;
	    right: 2.4rem;
	    top: 50%;
	    width: 8px;
	    height: 8px;
	    border-top: 2px solid #fff;
	    border-right: 2px solid #fff;
	    transform: translateY(-50%) rotate(135deg);
	    transition: transform 0.3s ease;
	}
	.gnbMobile .dept1 > li:has(.dept2[style*="display: block"]) > a::after {transform: translateY(-50%) rotate(-45deg);}
	.gnbMobile .dept1 > li > a:hover::after {border-color: #fff;}
	
	.gnbMobile .dept2 > li {border-top: 1px solid #D6E0EB;background:#fff;}
	.gnbMobile .dept2 > li > a {position: relative;display: block;padding: 1.6rem 2.4rem;font-size: 1.5rem;}
	.gnbMobile .dept2 > li > a img{padding-top: 5px;}
	.gnbMobile .dept2 > li > a:hover,
	.gnbMobile .dept2 > li > a:active,
	.gnbMobile .dept2 > li > a:focus {background-color: #EEF2F7;}
	.gnbMobile .dept2 > li > a.blank{background-position: right 3% center;}
	.gnbMobile .dept2 {display:none;}
	.gnbArea.open {display: block;position: fixed;width: 100%;height: 100%;top: 0;left: 0;background-color: rgba(0,0,0,.8);overflow-y: auto;z-index:300;}
}
@media all and (max-width:480px){
}
/* footer */
#footer {position: relative;background: #6e7276;overflow: hidden;}
#footer::after {position: absolute;top: 55px;left: 0;content: '';display:block;width: 100%;height: 1px;background-color: rgba(255, 255, 255, 0.1);}
.foot_wrap{position: relative;max-width: 1300px;margin: 0 auto;}

.foot_top .foot_utile {width:100%;display: flex;align-items: center;gap: 4rem;margin: 2rem 0;padding:0;}
.foot_top .foot_utile li{position: relative;}
.foot_top .foot_utile li:before{position: absolute;content: '';top: 50% ;left: -2rem;transform: translateY(-50%);width: 1px;height: 100%;background-color: rgba(255, 255, 255, 0.2);}
.foot_top .foot_utile li.first:before{display:none;}
.foot_top .foot_utile li a{display: block;padding: 0;font-size: 1.5rem;font-weight: 600;color: #f6f6f6;}
.foot_top .foot_utile li.first a{color: #FFB114;}

.foot_bottom {width:100%;padding: 4rem 0 4rem 16rem;color: #fff;}
.foot_bottom .footlogo{position: absolute;top: 80px;left: 0;display: block;width: 130px;height: 80px;background: url(/images/susang/common/logo_footer.svg) no-repeat 0 0;background-size: contain;font-size: 0;text-indent: -9999em;}
.foot_bottom p,
.foot_bottom address{width: 100%;font-size: 1.5rem;font-weight: 400;line-height: 1.5;color: #f9f9f9;text-align: left;word-break: keep-all;}
.foot_bottom address strong{display: block;margin-bottom: 10px;font-size: 1.8rem;}
.foot_bottom address span{display:inline-block;margin-left:10px;}
.foot_bottom .count{display: flex;align-items: center;margin-top: 20px;}
.foot_bottom .count span {min-width: 50px;margin: 0 15px 0 5px;padding: 0 1rem;background: #30373f;text-align: center;border-radius: 10rem;}

@media screen and (max-width: 1299px) and (min-width:1024px) {
	.foot_wrap{width:96%;margin:0 3%;}
}	
@media all and (max-width: 1023px){	
	.foot_top .foot_utile {width: 94%;margin: 2rem 3%;}
	.foot_top .foot_utile li a{font-size: 1.4rem;}
			
	.foot_bottom{width: 94%;margin: 0 3%;padding: 0 0 4rem;}
	.foot_bottom address span{display: block;margin-left: 0;font-size: 1.3rem;}
	.foot_bottom address strong{font-size: 1.5rem;}
	.foot_bottom p {font-size: 1.3rem;}
	
	#footer:after,
	.foot_bottom .footlogo {display:none;}
		
}