@charset "utf-8";

/* =========================== HEADER =========================== */
.header{
    position:fixed;width:100%;
    z-index:1000;
    background-color:#fff;
    }

/* ---------- nav_header ---------- */
#nav_header{
    position:relative;;width:100%;height:60px;
    display:flex;align-items:center;    
    border-bottom:1px solid var(--border-gray);
    z-index:1;background:#fff;}
#nav_header .innerWrap{
    display:-webkit-box;display:-ms-flexbox;display:flex;    
    -webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;
    -webkit-box-align:center; -ms-flex-align:center; align-items:center;}
/* logo */
#logo{position:relative;padding:0;flex:1;}
#logo a {display:flex;align-items:center;flex-wrap:wrap;color:var(--font-black);gap:0.5rem;}
#logo img{height:20px;}
#logo span{
    display:inline-block;
    position:relative;
    font-family: 'GmarketSans';
    font-size:1.8rem;
    font-weight:400;
}

/* mem_header */
#mem_header{position:relative;display:flex;align-items:center;}
#mem_header li{
    position:relative;font-size:1.4rem;font-family: 'GmarketSans';color:var(--font-gray);}
#mem_header li + li:before{
    content:'';display:inline-block;
    width:1px;height:8px;
    margin:0 1.1em;
    transform:translateY(10%);
    background-color:#d2d2d2;}
#mem_header li a{color:var(--font-gray);font-family: 'GmarketSans';font-size:1.4rem;transition:all .3s;}
#mem_header li a:hover{color:var(--point-color);font-weight:400;}
#mem_header .user {margin-bottom:0.2rem;}
#mem_header .user strong {color:var(--font-black);font-weight:400;}

/* ---------- sect_gnb ---------- */
#sect_gnb{
    position:relative;;width:100%;
    border-bottom:1px solid #d2d2d2;
   	z-index:1;
   	background:#fff;
    }
#sect_gnb .innerWrap{
	display:flex;align-items:center;justify-content:center;
    height:8rem;
	}
/* gnb */
#gnb{
    display:-webkit-box;display:-ms-flexbox;display:flex;;
    -webkit-box-align:center;-ms-flex-align:center;align-items:center;
    position:relative;;
    z-index:1010;
}
.li_gnb{
    position:relative;
    font-size:1.5rem;
    margin-top:0.6rem;}
.li_gnb + .li_gnb {margin-left:7rem;}
.li_gnb > div{position:relative;;}
.li_gnb a{font-size:1.4rem;}
.li_gnb > div a {display:inline-block;font-size:2rem;font-weight:500;font-family: 'GmarketSans';position:relative;transition:all .3s;line-height:160%;}
.li_gnb > div > a:after {
	content:'';
	display:block;position:absolute;top:0;right:0;
	width:5px;height:5px;
	background-color:var(--point-color);border-radius:50%;
	transition:all .3s;opacity:0;}
.li_gnb.on > div > a, 
.li_gnb:hover > div > a,
.li_gnb:hover > div a:visited {color:var(--point-color);}
.li_gnb.on > div > a:after,
.li_gnb:hover > div > a:after{transform:translateY(-0.6rem);opacity:1;}
    
/* lnb */
.lnb{
    position:absolute;;
    width:100%;min-width:200px; min-height:300%;
    top:100%;
    padding:4.5rem 0 2.5rem 0;
    font-size:1.1rem;color:#444;}
.li_lnb{
    position:relative;;
    margin:1.5rem 0;}
.li_lnb a{display:block;color:#444;transition:all .3s;}
.li_lnb a.on, .li_lnb a:hover{color:#2948b0;}

.lnbArea{
    position:absolute;;z-index:1000;
    top:calc(100% + 1px);left:0;
    width:100%; height:26rem;
    background-color:#fff;
    border-bottom:1px solid #d2d2d2;
    box-shadow:0px 0.25rem 0.5rem rgba(0,0,0,0.1);}
    
.hd_sitemap {display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;margin-left:auto;width:24px;height:16px;}
.hd_sitemap .ico {display:block;background:var(--black-color);width:70%;height:2px;transition:all .3s;}
.hd_sitemap .ico:nth-child(2) {width:100%;}
	@media screen and (min-width:1200px)
	{
		.hd_sitemap:hover .ico,
		.hd_sitemap:focus .ico {width:100%;}
	}


.gnb-pc-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.07);
    display:none;
}

.mbMenu-open {display:none;margin-left:2rem;background:none;border:none;cursor:pointer;}
.mbMenu-open .icon {width:2.4rem;height:2.4rem;display:flex;flex-direction:column;justify-content:center;}
.mbMenu-open .icon i {display:block;width:100%;height:2px;background:var(--font-black);margin-left:auto;transition:all .3s;}
.mbMenu-open .icon i:nth-child(2) {width:80%;}
.mbMenu-open .icon i+i {margin-top:0.5rem;}

.gnb-mb {display:none;}

/* ---------- openGnb ---------- */
#openGnb{
    position:fixed;; z-index:1100;
    top:1rem;right:1rem;
    width:4rem;height:4rem;
    background-color:#fff; border:2px solid #d2d2d2;
    cursor:pointer;
    display:none;}
#openGnb span{
    position:absolute;;
    left:50%;transform:translateX(-50%);
    width:60%;height:5px;
    background-color:#999;}
    #openGnb span:nth-child(1){top:25%;}
    #openGnb span:nth-child(2){top:45%;}
    #openGnb span:nth-child(3){bottom:25%;}
header.on #openGnb span:nth-child(1){transform:rotate(45deg);left:20%;top:45%;}
header.on #openGnb span:nth-child(2){opacity:0;}
header.on #openGnb span:nth-child(3){transform:rotate(-45deg);left:20%;bottom:45%;}

/* 디스플레이 관련 */
.lnb, .lnbArea, #openGnb{display:none;}

/* ---------- 헤더스크롤 애니메이팅 추가 ---------- */
header,
header #sect_gnb .innerWrap {transition:all .5s;}
header.scroll {transform:translateY(-6rem);}
header.scroll #sect_gnb .innerWrap {height:6.5rem;}

/* =========================== FOOTER =========================== */
#footer {background:#2e3034;padding:8rem 0;}
#footer .innerWrap {display:flex;gap:2rem;flex-wrap:wrap;}
#footer .l {flex:1;}
#footer .r {margin-left:auto;}
.flink {display:flex;align-items:center;gap:2rem 3rem;flex-wrap:wrap;}
.flink a {color:#fff;font-weight:600;}
.flink .point a {color:var(--point2-color);}
.faddress {color:#999;margin-top:3rem;line-height:160%;}
.faddress span {line-height:160%;}
.copyright {color:#999;font-size:1.2rem;letter-spacing:0;margin-top:3rem;line-height:160%;}
.fslogan {width:13rem;height:7.6rem;background:url(../../images/img_gres/footer_slogan.svg) no-repeat center center /100% 100%;}


/* =========================== 반응형 =========================== */
.no_scroll {overflow:hidden;}

@media screen and (max-width:1200px)
{
	/* =========================== 메뉴 관련 =========================== */
	.mbMenu-open {display:block;}
	#mem_header {display:none;}
	#sect_gnb {display:none;}
	.gnb-mb {display:block;}
	
	#nav_header {height:7rem;}
	.gnb-mb {position:fixed;top:0;right:-30rem;bottom:0;width:30rem;background:#fff;display:flex;flex-wrap:wrap;flex-direction:column;z-index:2;}
	.gnb-mb-bg {display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0, 0, 0, 0.7);z-index:1;}
	
	.gnb-mb #mem_header {display:block;display:flex;flex-wrap:wrap;}
	.gnb-mb #mem_header li {background:#004097;color:#fff;width:100%;box-sizing:border-box;height:5rem;display:flex;align-items:center;}
	.gnb-mb #mem_header li:before {display:none;}
	.gnb-mb #mem_header li a {display:block;color:#fff;padding:0 3rem;}
	.gnb-mb #mem_header .user {background:#4769f8;width:100%;padding:0 3rem;height:7rem;display:flex;align-items:center;color:#fff;font-size:1.6rem;gap:0 0.5rem;margin-bottom:0;}
	.gnb-mb #mem_header .user * {color:#fff;line-height:100%;}
	.gnb-mb #sect_gnb {display:block;}
	.gnb-mb #gnb {display:block;width:100%;}
	.gnb-mb #sect_gnb .innerWrap {height:auto;max-width:none;padding:0;}
	.gnb-mb .li_gnb + .li_gnb {margin-left:0;}
	.gnb-mb .li_gnb > div a {display:block;padding: 2rem 6rem 2rem 3rem;font-size:1.8rem;}
	.gnb-mb .li_gnb + .li_gnb {margin-top:0;}
	.gnb-mb .li_gnb + .li_gnb a {border-top:1px solid #e1e4e8;}
	.gnb-mb .li_gnb > div > a:after {display:none;}
	
	/* 모바일 메뉴 애니메이션 */
	.gnb-mb {transition: all 0.6s;}
	.gnb-mb.open {transform:translateX(-30rem);}
	.li_gnb > div > a:hover:after  {display:none;}
	
	
	/* =========================== FOOTER =========================== */
	#footer {padding:6rem 1rem;}
	.flink {gap:0;align-items:stretch;}
	/* .flink li:nth-last-child(n+2){width:50%;} */
	.flink li:nth-last-child(n+1){width:50%;}
	.flink li:nth-child(odd):not(:last-child) a {border-right:none;}
	.flink li:nth-child(1) a,
	.flink li:nth-child(2) a {border-radius:0.4rem 0.4rem 0 0;}
	.flink li:nth-child(3) a,
	.flink li:nth-child(4) a {border-radius:0 0 0.4rem 0.4rem;}
	.flink a {width:100%;height:100%;min-height:6rem;margin-top:-1px;padding:1.5rem 1rem;display:flex;align-items:center;justify-content:center;border:1px solid #484a4f;word-wrap:break-word;word-break:break-all;text-align:center;line-height:160%;}
	.flink .call {width:100%;margin-top:1rem;}
	.flink .call a {border-radius:0.4rem;border:1px solid #484a4f;}
	
	.faddress {text-align:center;}
	.copyright {text-align:center;}
	#footer .r {display:none;}
}

@media screen and (max-width:480px)
{
	#logo img {height:14px;}
	#logo span {display:block;width:100%;}
	
}