@charset "utf-8";
/* 시스템 사이트의 경우 :  메인+서브에 공통 적용되는 common.css 파일 추가해 메인+서브 공통부분, 서브에 적용되는 css 기재 / 메인에만 적용되는 main.css 추가해 메인 css 기재 */
/* 일반 사이트의 경우 : 메인+서브에 공통 적용되는 common.css 파일 추가해 메인+서브 공통부분 css / 메인에만 적용되는 main.css 추가해 메인 css 기재 / 서브에만 적용되는 sub.css 추가해 서브 css 기재 */
/* 시스템, 일반 사이트 공통 : 멤버십, 에러 등이 필요한 경우 퍼블 가이드 UI 요소에서 원하는 부분만 복사해서 common.css에 기재 */
/* basic.css, board.css에서 수정해서 사용할 것들은 common.css에 수정 css 적기 (basic, board 수정 X) */

@import url('../fonts/gmarket/GmarketSans-gov-subset.css');

body {color: #222; letter-spacing: -.04rem; word-break: break-all;}


/** header **/
#header {position: relative; border-bottom: .1rem solid #DDDDDD;}
#header .wrap {display: flex; align-items: center; justify-content: space-between; width: 132rem; margin: 0 auto;}
#header .wrap .nav .gnb {display: flex; position: relative;}
#header .wrap .nav .gnb > li {position: relative; height: 8.8rem;}
#header .wrap .nav .gnb > li > a {font-size: 1.8rem; font-weight: 500; color: #222; display: block; padding: 0 3.2rem; line-height: 8.8rem; transition: all .1s ease-in;}
#header .wrap .nav .gnb > li .sub {display: none; text-align: center; position: absolute; top: 100%; left: 0; width: 100%; z-index: 999; margin-top: 1.2rem;}
#header .wrap .nav .gnb > li .sub li {font-size: 1.6rem; color: #222;}
#header .wrap .nav .gnb > li .sub li a {display: block; padding: .8rem 0; transition: all .1s ease-in;}
#header .hd_bg {width: 100%; background: #fff; display: none; position: absolute; top: 100%; left: 0; width: 100%; height: 18rem; z-index: 99; border-top: .1rem solid #ddd; border-bottom: .1rem solid #ddd;}
#header .btn_close {display: none;}

#header .wrap .nav .gnb > li:hover > a {font-weight: 700;}
#header .wrap .nav .gnb > li:hover > a::after {content: ''; display: block; width: 30%; height: .4rem; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}


/** footer **/
#footer {background: #3f3f3f;}
#footer .wrap {width: 132rem; margin: 0 auto; padding: 5rem 0 7rem;}

#footer .wrap .f_menu {color: #fff; display: flex; font-size: 1.6rem; font-weight: 700; gap: 45px;}
#footer .wrap .f_menu li {position: relative;}
#footer .wrap .f_menu li + li::before {content: ''; display: block; width: .2rem; height: 1.4rem; background: #fff; position: absolute; top: 50%; left: -2.25rem; transform: translateY(-50%);}

#footer .wrap .address,
#footer .wrap .copy {font-size: 1.5rem; color: rgba(255,255,255,.5); margin-top: 2rem;}
#footer .wrap .address .br {display: none;}



/** 반응형 **/

/* 반응형 스타일 */
@media (max-width: 1320px) {
    #header .wrap {width: 100%; padding: 0 1.6rem;}

    #footer .wrap {width: 100%; padding: 5rem 1.6rem;}

}

@media (max-width: 1280px) {
    html {font-size: 75%;} /* 1rem = 12px */

    #header .wrap {padding: 1.025rem 1.6rem;}
    #header .wrap h1 {font-size: inherit;}
    #header .wrap h1 a {display: block;}
    #header .wrap h1 a img {height: 3rem;}

    #header .btn_menu {display: block; width: 1.8rem; height: 1.6rem; background: url('../images/icon/i_menu.png') no-repeat center; background-size: contain; border: none; cursor: pointer;}
    #header .btn_close {background: none; border: none; color: #fff; cursor: pointer; display: inherit !important; font-size: 2rem; font-weight: bold;}
    #header .nav {position: fixed; top: 0; right: -100%; width: 80%; height: 100%; background: #fff; z-index: 9999; overflow-y: auto; transition: right 0.3s ease;}
    #header .nav.active {right: 0;}
    #header .nav .mo_sub_top {width: 100%; height: 4.8rem; display: flex; align-items: center; justify-content: flex-end; padding: 0 1.6rem;}
    #header .wrap .nav .gnb > li {height: 100%;}
    #header .wrap .nav .gnb > li > a {padding: 2.4rem 1.9rem; line-height: 1; font-size: 1.8rem; display: flex;}

    

    #header .wrap .nav .gnb > li:hover > a {color: inherit; font-weight: inherit;}
    #header .wrap .nav .gnb > li:hover > a::after {content: '\f078';  display: inherit; width: inherit; height: inherit; background: inherit; position: inherit; bottom: inherit; left: inherit; transform: inherit;}
    #header .wrap .nav .gnb > li .sub li a:hover {color: inherit !important;}
    
    #header .gnb {display: block !important;}
    #header .gnb > li > a {display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; font-size: 16px; font-weight: 500; color: #333; border-bottom: 1px solid #ddd; position: relative;}
    #header .gnb > li > a::after {content: '\f078'; font-family: 'Font Awesome 6 Free'; font-size: 14px; color: #999; font-weight: 900; transition: transform .3s; display: inline-block; }
    #header .gnb > li.active > a::after {transform: rotate(180deg) !important;}    
    #header .gnb > li.active .sub {display: block;}
    #header .sub li {list-style-type: disc; margin-left: 1rem;}
    #header .sub li a {display: block; font-size: 1.6rem; color: #555; text-align: left; padding: 0 !important;}
    #header .sub li + li a {margin-top: 2.4rem;}
    #header .gnb > li .sub {display: none; background: #fff; padding: 2.4rem 3.2rem;}
    #header .wrap .nav .gnb > li .sub {position: inherit; margin-top: 0; border-bottom: .1rem solid #DDDDDD;}
    

    #footer .wrap .f_menu {gap: 1.2rem;}
    #footer .wrap .f_menu li {font-size: 1.2rem;}
    #footer .wrap .f_menu li + li::before {left: -.6rem; height: .9rem;}
    #footer .wrap .address, 
    #footer .wrap .copy {font-size: 1.4rem;}
    #footer .wrap .address .br {display: block;}
}

@media screen and (max-width: 768px) { 
    /* 모바일 버전 스타일 (태블릿 대비 모바일에서 달라지는 스타일) */
    html {font-size: 68.75%;} /* 1rem = 11px */
}
@media screen and (max-width: 480px) { 
    /* 모바일 버전 스타일2 (모바일 작은 화면에서 달라지는 스타일) */
    html {font-size: 62.5%;} /* 1rem = 10px */
}