@charset "utf-8";

/* 
 * 설명: 사이트 공통 GNB CSS
 * 제작일: 2023-04-05
 */
.gnb {position:fixed; width:100%; height:auto; z-index: 9999; top:0; left:0; right:0; background-color:#000; }
.gnb.mo {display:none;padding:20px 24px;}
.gnb.pc {padding:34px 40px; }
.gnb.pc .box {max-width: 1200px;margin: 0 auto;position: relative; background:transparent;}
.gnb.pc .left {position: absolute;left:0;top: 0;}
.gnb.pc .center {position:relative;margin:0 auto; padding:0 0 0 50px; width:70%; display:flex; flex-direction:row; flex-wrap: wrap; justify-content:flex-start;}
.gnb.pc .center .gnb_mn {min-width: 100px; position: relative;width:auto;font-size: 18px;color: #fff;font-weight: 400;font-family:'Lato' !important}
.gnb.pc .center .gnb_mn a {color:#fff;}
.gnb.pc .center .gnb_mn:nth-child(n+2){margin-left:52px;}
.gnb.pc .center .gnb_mn > a {padding-right:20px;background:url('../../resources/images/gnb/arrow_off.png') no-repeat;background-position:right center;}
.gnb.pc .center .gnb_mn > a.active {padding-right:20px;background:url('../../resources/images/gnb/arrow_on.png') no-repeat;background-position:right center;}
.gnb.pc .center .gnb_mn > a.active span { color: #e20707;font-weight: bold;}
.gnb.pc .center .gnb_mn span{font-weight: 600;line-height: 24px;}
.gnb.pc .center .gnb_mn ul {width: auto; margin-top:20px; display:none; transition: all ease 0.5s;}
.gnb.pc .center .gnb_mn li {line-height:25px; font-size:14px;font-family:'Lato' !important}
.gnb.pc .center .gnb_mn .inner_mn li{margin-top:25px;}
.gnb.pc .center .gnb_mn .inner_mn li a{font-style: normal; font-weight: 400; font-size: 18px; line-height: 25px; letter-spacing: -0.02em; color: #D9D9D9;}
.gnb.pc .center .gnb_mn .inner_mn li a:hover{color: #e20707;}

.gnb.pc .right {position: absolute;right: 0;top: 0;}
.gnb.pc .right .box {display:flex;justify-content: space-between;}
.gnb.pc .right .box .links{margin-right: 50px;display:flex;justify-content: space-between;align-items: center;}
.gnb.pc .right .box .links a:hover{color:#e20707;}
.gnb.pc .right .box .links .link_login{font-style: normal;font-weight: 600;font-size: 16px;line-height: 25px;color:#fff;}
.gnb.pc .right .box .links .link_join{font-style: normal;font-weight: 400;font-size: 16px;line-height: 25px; color:#fff;}
.gnb.pc .right .box .links .icon{margin: 1px 20px;width: 1px;height: 11px;background-color: #434343;}

.gnb.pc .right .box.member_box {height: 24px; align-items: center;}
.gnb.pc .right .member_info{padding:10px; color:#ffffff; border-radius: 8px;background-color: #222222; margin-right: 32px; max-width: 252px; word-break:break-word;}
.gnb.pc .right .member_info [onclick] {cursor:pointer;}
.gnb.pc .right .member_info img{width: 20px;height: 20px; border-radius: 30px;}
.gnb.pc .right .member_info a > img.logoutbtn{width: auto;height: auto; border-radius: 0;margin-left:5px;}
.gnb.pc .right .member_info strong{font-style: normal; font-weight: 900; font-size: 14px; line-height: 150%; letter-spacing: -0.01em;}
.gnb.pc .right .member_info span{color: #B0B0B0; font-style: normal; font-weight: 400; font-size: 14px; line-height: 165%; letter-spacing: -0.5px;}

.gnb.mo .box_mo{display: flex;justify-content: space-between;align-items: center;}
.gnb.mo .box_mo .left > a{width: 94px; display: block;}
.gnb.mo .box_mo .left > a img{width: 100%;}

.gnb.mo .box_mo .right{display: flex;justify-content: space-between;align-items: center;}
.gnb.mo .box_mo .right > div{width: 16px;cursor: pointer;}
.gnb.mo .box_mo .right > div img{width:100%;}
.gnb.mo .box_mo .right .hamburger{margin-left: 18px;}
/*모바일 햄버그 레이어*/
.hamburger_mn{margin-top:60px; position: fixed; width: 100%; z-index: 99; background-color: #fff; height: calc(100vh - 112px);overflow-y: auto; top:0;
    transition: all ease 0.5s;right: -100%;}
/* .hamburger_mn::-webkit-scrollbar { display: none; } */
.hamburger_mn.on{right: 0; display: none;}
.hamburger_mn ul li a span {font-weight: 800; line-height: 22px; font-size: 18px;color:#010101;}
.hamburger_mn ul li:last-child{margin-bottom: 0;}
.hamburger_mn ul li{padding: 18px 0;}
.hamburger_mn ul li:nth-child(n+2){border-top: 1px solid #d9d9d9;}
/* 햄버거 메뉴 로그인 필요시 */
.hamburger_mn .login_area{padding: 30px 24px 0 24px; margin-bottom: 14px;}
.hamburger_mn .login_area .hamburge_links{display: flex; justify-content: space-between;}
.hamburger_mn .login_area .hamburge_links > a{border-radius: 2px; width: calc(50% - 10px); font-family: 'Lato'; font-style: normal; font-weight: 700; font-size: 14px; line-height: 17px; display: flex; align-items: center; justify-content: center; padding: 15px 50px;border-radius: 2px;}
.hamburger_mn .login_area .hamburge_links .hamburge_login{background-color: #010100;color: #fff;}
.hamburger_mn .login_area .hamburge_links .hamburge_join{background-color: #E7E7E7;color: #010100;}
.hamburger_mn .login_area > p{word-break: keep-all; text-align: center; font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px;}
/* 햄버거 메뉴 로그인 상태 */
.hamburger_mn .member_area{padding: 30px 24px;display: flex; align-items: center; justify-content: flex-start; background-color: #F6F6F6;}
.hamburger_mn .member_area > img{margin-right: 12px; width: 50px; max-width: 100%; height: auto; border-radius: 100%; }
.hamburger_mn .member_area .profile_text{width: 100%; height: auto;}
.hamburger_mn .member_area .profile_text .profile_nickname{font-style: normal; font-weight: 900; font-size: 16px; line-height: 150%; letter-spacing: -0.5px; color: #010100;}
.hamburger_mn .member_area .profile_text p{width: 100%; height: auto; display: flex; align-items: center; justify-content: space-between;}
.hamburger_mn .member_area .profile_text p .profile_email{font-family: 'Lato'; font-style: normal; font-weight: 500; font-size: 13px; line-height: 165%; letter-spacing: -0.01em; color: #555555;}
.hamburger_mn .member_area .profile_text p > a{font-style: normal; font-weight: 500; font-size: 12px; line-height: 25px; letter-spacing: -0.225px; text-decoration-line: underline; color: #999999; }

.hamburger_mn .category{padding: 20px 24px;}
.hamburger_mn .category > li{font-family: 'Lato'; font-size: 18px;}
.hamburger_mn .category > li > a{position: relative; display: flex; align-items: center; width: 100%;}
.hamburger_mn .category > li > a span{font-weight: 800;line-height: 22px;}
.hamburger_mn .category > li > a span:last-child{position:absolute; right: 0;display: flex;margin-right: 15px;}
.hamburger_mn .category > li > a span:last-child > img{width:8px;}

.hamburger_mn .service{position: relative; padding: 6px 24px; background-color: #f6f6f6;}
.hamburger_mn .service > li > a{position: relative; display: flex; align-items: center; width: 100%;}
.hamburger_mn .service > li > a > span{font-weight: 800;line-height: 25px;}
.hamburger_mn .service > li > a span:last-child{position: absolute;right: 0;display: flex;margin-right: 15px;}
.hamburger_mn .service > li > a span:last-child > img{width:8px;}

.hamburger_mn .sns_list{padding: 6px 24px 6px 24px;}
.hamburger_mn .sns_list .sns_link > a{position: relative; display: flex; align-items: center; width: 100%;}
.hamburger_mn .sns_list .sns_link > a span:nth-child(2){margin-left: 10px;}
.hamburger_mn .sns_list .sns_link > a span > img{width:24px;}
.hamburger_mn .sns_list .sns_link > a strong {margin-left: 10px; font-family: 'Lato'; font-style: normal; font-weight: 800; font-size: 18px; line-height: 25px;color:#010100;}
/* .hamburger_mn .sns_list .sns_link > a:hover {color:#010100;} */

/*모바일 푸터 버튼*/
.footbtn_m{display: none;}
.footbtn_m{padding: 3px 30px; width: 100%; position: fixed; bottom: 0; background-color: #010101; z-index: 9999;}
.footbtn_m > ul{display: flex; justify-content: space-between; align-items: flex-end;}
.footbtn_m > ul li{text-align: center; width: calc(20% - 30px);}
.footbtn_m > ul li a{/*height: 53px; */padding: 3px 0; margin: 0 auto; display: block;border-radius: 4px;}
/* .footbtn_m > ul li a:active{background-color: #E20707;} */
.footbtn_m > ul li a img{width: 22px;}
.footbtn_m > ul li a img{background-image: url(../images/gnb/nav_1.png); background-position: center; background-size:cover;}
.footbtn_m > ul li a img:active{background-image: url(../images/gnb/nav_1_b.png); background-position: center; background-size:cover;}

.footbtn_m > ul li a > span{margin: 0 auto; display: block; height: 20px;width: 20px; background-position: center; background-size:cover;}
.footbtn_m > ul li a > span:active{background-position: center; background-size:cover;}
.footbtn_m > ul li a > span.nav_1{background-image: url(../images/gnb/nav_1.png);}
.footbtn_m > ul li a > span.nav_1:active{background-image: url(../images/gnb/nav_1_b.png);}
.footbtn_m > ul li a > span.nav_2{background-image: url(../images/gnb/nav_2.png);}
.footbtn_m > ul li a > span.nav_2:active{background-image: url(../images/gnb/nav_2_b.png);}
.footbtn_m > ul li a > span.nav_3{background-image: url(../images/gnb/nav_3.png);}
.footbtn_m > ul li a > span.nav_3:active{background-image: url(../images/gnb/nav_3_b.png);}
.footbtn_m > ul li a > span.nav_4{background-image: url(../images/gnb/nav_4.png);}
.footbtn_m > ul li a > span.nav_4:active{background-image: url(../images/gnb/nav_4_b.png);}
.footbtn_m > ul li a > span.nav_5{background-image: url(../images/gnb/nav_5.png);}
.footbtn_m > ul li a > span.nav_5:active{background-image: url(../images/gnb/nav_5_b.png);}

.footbtn_m > ul li > a p{margin-top:8px; font-style: normal; font-weight: 400; font-size: 11px; line-height: 11px; color: #F6F6F6; letter-spacing: -0.3px;}
/*
@media (max-width:1100px) {
    .gnb.pc .right .member_info{margin-right: 8px;}
    .gnb.pc .center .gnb_mn:nth-child(n+2){margin-left:20px;}
}

@media (max-width:1024px) {
    .gnb.pc .center{padding: 0 0 0 42px;}
    .gnb.pc .center .gnb_mn:nth-child(n+2){margin-left:32px;}
    .gnb.pc .right .box .links{margin-right: 20px;}
    .gnb.pc .right .box .links .icon{margin: 1px 12px;}
}
*/
@media (max-width:1200px) {
    /* 모바일 햄버거 메뉴 */
    .gnb.pc {display:none;}
    .gnb.mo {display:block !important;}
    .footbtn_m{display:block !important;}
    .hamburger_mn.on{display: block;}
    .gnb.pc .center .gnb_mn:nth-child(n+2){margin-left: 30px;}
}
@media (max-width:800px) {
    .footbtn_m > ul li{width: calc(25% - 30px);}
}

@media (max-width: 360px) {
    .footbtn_m > ul li{width: calc(25% - 30px);}
}