/* Skip nav */
.skip_nav{position: relative; z-index: 1000;}
.skip_nav a{position: absolute; top: -50px; left: 0; width: 100%; background-color: #000; text-align: center; padding: 7px 0; font-size: 16px; color: #fff;}
.skip_nav a:focus{top: 0; z-index: 999;}

/* 헤더 */
#header{position: fixed; left: 0; top: 0; width: 100%; z-index: 2;}
#header.s_header{position: relative;}
#header .h_inner{height: 90px; display: flex; align-items: center; justify-content: space-between; padding: 0 50px; background-color: rgba(255, 255, 255, 0.6); backdrop-filter: blur(5px); transition: .2s;}
#header .h_inner .h_logo a{display: block;}
#header .h_inner #gnb{position: relative;}
#header .h_inner #gnb ul{display: flex; align-items: center;}
#header .h_inner #gnb ul .depth01 > a{display: block; width: 200px; text-align: center; font-size: 20px; padding: 37px 0;}
#header .h_inner #gnb ul .depth01 .depth02{display: none; width: 200px; position: absolute; top: 90px; background-color: #fff; border-top: 2px solid #0057C9; border-radius: 10px; box-shadow: 0 5px 10px rgba(0, 0, 0, .1);}
#header .h_inner #gnb ul .depth01 .depth02 a{display: block; padding: 25px 10px; font-size: 18px; text-align: center;}
#header .h_inner #gnb ul .depth01 .depth02{display:none;}
#header .h_inner #gnb .depth01:hover .depth02{display: block;}
#header .h_inner #gnb ul .depth01 .depth02 li a:hover{background-color: #f9f9f9; border-radius: 10px;}
#header .h_inner #gnb ul .depth01 .depth02_btn{display: none;}
#header .h_inner #gnb ul .depth01 a:hover,
#header .h_inner #gnb ul .depth01:focus-within > a,
#header .h_inner #gnb ul .depth01 .depth02 li a:hover{font-weight: 600; color: #0B318F; transition: .2s;}

/* 메뉴 유틸 */
#header .h_inner .utill{display: flex; align-items: center; gap: 10px;}
#header .h_inner .utill .h_btn{background-color: #fff; border-radius: 50px; padding: 10px 15px;}
#header.s_header .h_inner .utill .h_btn{background: #f6f6f6;}
#header .h_inner .utill .h_btn:hover{font-weight: 600; transition: .2s;}
#header .h_inner .utill .btn_login{position: relative;}
#header .h_inner .utill .btn_login::before{display: none; content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: 0; background: url(../image/login.svg) no-repeat; width: 22px; height: 22px; vertical-align: middle;}
#header .h_inner .utill .btn_menu{position: relative; display: none;}
#header .h_inner .utill .btn_menu i{position:absolute; text-indent: -9999em; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); border: 0; visibility:hidden; overflow:hidden}
#header .h_inner .utill .btn_menuOpen::before{content: ''; display: block; background: url(../image/btn_menu_open.svg) no-repeat; width: 30px; height: 30px;}

/* 모바일 메뉴 */
#header #m_gnb .m_gnb_inner{position:relative; z-index:1; background-color: #fff; height: 100vh; box-shadow: 0 5px 10px rgba(0, 0, 0, .1);}
#header #m_gnb::after{content:''; display:block; width:100%; height:100%; background:rgba(0,0,0,0.7); position:fixed; left:0; top:0;}
#header #m_gnb{display: none; width: 320px; position: fixed; top: 0; right: 0; overflow-y: auto;}
#header #m_gnb.active{display: block;}
#header #m_gnb .mgnb_head{display: flex; align-items: center; justify-content: space-between; height: 70px; padding: 0 20px; border-bottom: 1px solid #ECECEC;}
#header #m_gnb .mgnb_head .m_util{display: flex; align-items: center; gap: 12px;}
#header #m_gnb .mgnb_head .m_util .mbtn_login{content: ''; background: url../image/login.svg) no-repeat; width: 22px; height: 22px; vertical-align: middle;}
#header #m_gnb .mgnb_head .m_util .btn_menuClose::before{content: ''; display: block; background: url(../image/btn_menu_close.svg) no-repeat; width: 30px; height: 30px;}
#header #m_gnb ul .m_depth01{background-color: #fff;}
#header #m_gnb ul .m_depth01 > a,
#header #m_gnb ul .m_depth01 > button{display: block; padding: 25px 20px; width: 100%; text-align: left;}
#header #m_gnb ul .m_depth01.active > button,
#header #m_gnb ul .m_depth01:hover > a,
#header #m_gnb ul .m_depth01:hover > button{background-color: #0B318F; color: #fff; font-weight: 600;}

/* 모바일 서브메뉴 */
#header #m_gnb ul .m_depth01 .m_depth02{display: none; background-color: #f9f9f9; padding: 20px;}
#header #m_gnb ul .m_depth01 > button.active .m_depth02{display: block;}
#header #m_gnb ul .m_depth01 .m_depth02 li a{display: block; padding: 8px 0;}
#header #m_gnb ul .m_depth01 .m_depth02 li a:hover,
#header #m_gnb ul .m_depth01 .m_depth02 li a:focus{color: #0B318F; font-weight: 700;}
#header #m_gnb ul .m_depth01 .depth02_btn{position: relative;}

/* 모바일 서브메뉴 버튼 */
#header #m_gnb ul .m_depth01 .depth02_btn::before{content: ''; position: absolute; width: 30px; height: 30px; top: 50%; right: 20px; transform: translateY(-50%);transition:.3s;transform-origin: 50% 50%;background-repeat:no-repeat;background-position:50%;background-size:80%;
/* background-image: url(../image/open_btn.svg); */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath stroke='%235C5C5C' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m15 7-5 5-5-5'/%3E%3C/svg%3E");
}
#header #m_gnb ul .m_depth01 .depth02_btn:hover::before{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m15 7-5 5-5-5'/%3E%3C/svg%3E");
}
#header #m_gnb ul .m_depth01.active .depth02_btn::before,
#header #m_gnb ul .m_depth01.active .depth02_btn:hover::before{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m15 7-5 5-5-5'/%3E%3C/svg%3E");
    transform: translateY(-50%) rotate(180deg);
}
#header #m_gnb ul .m_depth01 + .m_depth01{border-top: 1px solid #ECECEC;}
#header #m_gnb ul .m_depth01:last-child{border-bottom: 1px solid #ECECEC;}

/* 모바일 메뉴 열기 버튼 */
#header .h_inner .utill .btn_menuOpen.active #m_gnb{display: block;}

@media (max-width: 1324px){
    #header .h_inner #gnb{display: none;}
    #header .h_inner{height: 70px; padding: 0 20px;}
    #header .h_inner .h_logo a img{width: 180px;}
    #header .h_inner .utill{gap: 12px;}
    #header .h_inner .utill .btn_menu{display: block;}
    #header .h_inner .utill .h_btn{background-color: inherit; text-indent: -9999em; overflow: hidden; padding: 11px; }
    #header.s_header .h_inner .utill .h_btn{background-color: inherit;}
    #header .h_inner .utill .btn_login::before{display: block;}
    #header .h_inner .utill .h_btn.btn_join{display: none;}
}

/* footer */
#footer{width: 100%; padding: 30px 0; background-color: #F9F9F9; border-top: 1px solid #f3f3f3;}
#footer.s_footer{margin-top: 100px;}
#footer .f_inner{padding: 0 50px; display: flex; align-items: center; justify-content: space-between;}
#footer .f_inner .f_left{display: flex; align-items: center; gap: 50px;}
#footer .f_inner .f_left .f_tx{display: flex; flex-direction: column; gap: 20px;}
#footer .f_inner .f_left .f_tx .f_link a:first-child{margin-right: 20px;}
#footer .f_inner .f_left .f_tx .f_link .t_blue{color: #0B318F; font-weight: 600;}
#footer .f_inner .f_left .f_tx .addr{font-size: 15px; color: #555;}
#footer .f_inner .f_left .f_tx .addr ul{display: flex; gap: 30px;}
#footer .f_inner .f_left .f_tx .addr ul li{position: relative;}
#footer .f_inner .f_left .f_tx .addr ul li:not(:last-child)::after{position: absolute; content: ''; width: 1px; height: 14px; background-color: #999; right: -15px; vertical-align: middle;}
#footer .f_inner .f_left .f_tx .addr .notice_tx{margin-top: 10px;}
#footer .f_inner .f_right .copy{font-size: 15px; font-weight: 300; color: #999;}

@media (max-width: 1442px){
    #footer .f_inner{flex-direction: column; align-items: flex-start;}
    #footer .f_inner .f_right .copy{padding-left: 110px; margin-top: 15px;}
}
@media (max-width: 1280px){
    #footer .f_inner{padding: 0 20px;}
    #footer .f_inner .f_left .f_tx .addr .notice_tx{display: none;}
    #footer .f_inner .f_right .copy{margin: 0;}
}
@media (max-width: 768px){
    #footer .f_inner .f_left{gap: 25px;}
    #footer .f_inner .f_left .f_tx .addr ul{flex-direction: column; gap: 5px;}
    #footer .f_inner .f_left .f_tx .addr ul li:not(:last-child)::after{display: none;}
    #footer .f_inner .f_left .f_tx .f_link a:first-child{margin-right: 10px;}
    #footer .f_inner .f_right .copy{padding-left: 85px; margin-top: 5px;}
}
@media (max-width: 480px){
    #footer .f_inner .f_left{flex-direction: column; align-items: flex-start; gap: 15px;}
    #footer .f_inner .f_left .f_tx{gap: 15px;}
    #footer .f_inner .f_right .copy{padding-left: 0;}
}