#header {position: fixed; top: 3rem; left: 50%; transform: translateX(-50%); max-width: 1720px; width: 100%; background: #fff; z-index: 50; border-radius: 1.25rem; transition: 0.3s;}
#header.on {top: 0; max-width: 100%; border-radius: 0; border-bottom: 1px solid rgba(1,20,52,0.1); width: 100%;}
#header .wrap {display: flex; align-items: center; gap: 10%; padding: 0 10%; justify-content: space-between}
#header .logo img {width: 14rem;}
#header .gnb {display: flex; justify-content: space-between; width: calc(90% - 14rem);}
#header .gnb > li {position: relative;}
#header .gnb > li a.depth01 {padding: 2rem 0; display: inline-flex; gap: .625rem;}
#header .gnb > li a.depth01 span {transform: rotate(90deg); display: inline-block; color: #d1d1d1;}
#header .lnb {position: absolute; left: 50%; transform: translateX(-50%); top: 5.9rem; background: rgba(1,20,52,.85); width: 13rem; padding: 2rem 0; text-align: center; border-radius: 0 0 1.25rem 1.25rem; opacity: 0; visibility: hidden; transition: opacity .3s;}
#header .lnb:after {position: absolute; left: 50%; transform: translateX(-50%); top: 0; width: 0; height: 3px; background: var(--pointcolor2); content: ""; transition: width 0.8s;}
#header .lnb li a {color: #fff !important;}
#header .lnb li a:hover {color: var(--pointcolor2); font-weight: 700;}
#header .lnb li:nth-child(n+2) a {margin-top: 1.5rem; display: inline-block;}

#header .gnb > li:hover .lnb {opacity: 1; visibility: visible;}
#header .gnb > li:hover .lnb:after {width: 100%;}

#header .hamburger {width: 3.125rem; height: 2.8125rem; position: relative; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; display: none;}
#header .hamburger span {display: block; position: absolute; height: 4px; width: 100%; background: #000; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
#header .hamburger span:nth-child(1) {top: 0px;}
#header .hamburger span:nth-child(2),
#header .hamburger span:nth-child(3) {top: 1rem;}
#header .hamburger span:nth-child(4) {top: 2rem;}

#header .hamburger.open span:nth-child(1) {top: 1rem; width: 0%; left: 50%;}
#header .hamburger.open span:nth-child(2) {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
#header .hamburger.open span:nth-child(3) {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
#header .hamburger.open span:nth-child(4) {top: 1rem; width: 0%; left: 50%;}

@media(max-width:1880px) {
    #header {width: 95%;}
    #header .wrap {padding: 0 5%;}
}

@media(max-width:990px) {
    #header {max-width: 100%; top: 0; width: 100%; border-radius: 0; transition: none; padding: 2rem 0;border-bottom: 1px solid rgba(1,20,52,0.1); left: 0; transform: translateX(0);}
    #header.open {z-index: 102;}
    #header .gnb {position: absolute; left: 0; top: calc(7rem + 1px); width: 100%; flex-direction: column; background: #fff; padding: 5%; height: calc(100vh - 7rem); overflow-y: scroll; opacity: 0; visibility: hidden; transition: opacity 0.3s;}
    #header .gnb.on {opacity: 1; visibility: visible;}
    #header .gnb::-webkit-scrollbar {display: none;}
    #header .gnb > li a.depth01 {font-size: 3.125rem; width: 100%; justify-content: space-between;}
    #header .gnb > li a.depth01.active,
    #header .gnb > li a.depth01:hover {color: var(--pointcolor2); font-weight: 700;}
    #header .gnb > li a.depth01.active span {transform: rotate(270deg);}
    #header .lnb {opacity: 1; visibility: visible; position: initial; width: 100%; transform: translateX(0); left: 0; text-align: left; background: #fff; padding: 0 0 1.5rem 0; display: none;}
    #header .lnb li a {color: #022222 !important; font-size: 2.25rem; padding: 0 5%;}
    #header .gnb > li .lnb:after {display: none;}

    #header .hamburger {display: block;}
}

/* 푸터 */
#footer {padding: 50px 0; background-image: url("/img/main/footerBg.jpg"); background-repeat: no-repeat; background-position: right center; background-size: cover; color: #e5e5e5; letter-spacing: -0.025rem;}
#footer a {color: #e5e5e5;}
#footer .container {display: flex;}
#footer .logo {-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); width: 14rem;}
#footer .copy {opacity: .5; }
#footer span {padding: 0 1rem;}

@media(max-width:1240px) {
    #footer .container {flex-direction: column;}
    #footer .box {width: 100%;}
    #footer .left {display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 2rem; margin-bottom: 2rem;}
}

@media(max-width:768px) {
    #footer {padding: 50px 0; background-image: url("/img/main/footerBg_m.jpg"); background-position: right bottom;}
    #footer .font-14,
    #footer .font-18 {font-size: 1.375rem;}
    #footer .left .font-18 {font-size: 1.5rem;}
}

/* 퀵메뉴 */
#quick {position: fixed; right: 2.5%; bottom: 5%; z-index: 101; text-align: center;}
#quick img {margin: 0 auto; width: 1.875rem;}

#quick .quickList {width: 5.5rem; border-radius: 100px 100px 0 0; background: #00509e; transform: translateY(2.75rem); display: none; position: relative;}
#quick .quickList a {color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem 0; margin: 0 .625rem; border-bottom: 1px solid #218cde;}
#quick .quickList a:first-child {padding-top: 2.5rem;}
#quick .quickList a:last-child {padding-bottom: 4.25rem; border-bottom: none;}
#quick .quickList p {padding-top: .25rem;}

#quick .cir {width: 5.5rem; aspect-ratio: 1 / 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer;}
#quick .quickBtn {background: var(--pointcolor2); color: #fff; position: relative; z-index: 1;}
#quick .quickBtn p {letter-spacing: 0;}
#quick .goTop { background: #fff;  transform: rotate(-270deg); font-size: 1.5rem; font-weight: 700; line-height: 1; margin-top: 1rem; filter: drop-shadow(2px 0 10px rgba(157,157,157,.35));}

@media(max-width:768px) {
    #quick {font-size: 1.375rem;}
    #quick .quickList {width: 7rem; transform: translateY(3.5rem);}
    #quick .quickList a:last-child {padding-bottom: 5rem;}
    #quick .cir {width: 7rem;}
    #quick img {width: 2.5rem;}
    #quick .goTop {font-size: 2rem;}
}

/* 서브탑 */

#subTop {background-size: cover; background-position: center; background-repeat: no-repeat;}
#subTop.notice {background-image: url("/img/subTop/noticeBg.jpg");}
#subTop.nonbenefit {background-image: url("/img/subTop/nonbenefitBg.jpg");}
#subTop .tit {padding-top: 5rem;}
@media(max-width:990px) {
	#subTop {padding: 130px 0 !important;}
}

@media(max-width:768px) {
    #subTop.notice {background-image: url("/img/subTop/noticeBg_m.jpg");}
    #subTop.nonbenefit {background-image: url("/img/subTop/nonbenefitBg_m.jpg");}
}