#header {}

#pcHeader {z-index: 999; position: fixed; width: 100%; top: 0;}
#pcHeader .headCont {transition: 0.2s;}
#pcHeader .headCont .inner {padding: 0 4rem; justify-content: space-between;}
#pcHeader .headCont .logo {width: 17.8rem;}
#pcHeader .headCont .logo a {display: block;}
#pcHeader .headCont .logo a img {display: block; width: 100%;}
#pcHeader .headCont .gnb {margin-right: 5rem;}
#pcHeader .headCont .gnb li {}
#pcHeader .headCont .gnb li a {font-size: 1.8rem; display: block; color: #fff; padding: 3.4rem 2rem;}
#pcHeader .headCont .gnb li a::before {content: ''; display: block; position: absolute; width: 0; height: 0.6rem; background: #7A74FF; top: 0; left: 50%; transform: translateX(-50%); transition: 0.4s;}
#pcHeader .headCont .gnb li.on a::before {width: 100%;}
#pcHeader .headCont .lang {}
#pcHeader .headCont .lang .tit {font-size: 1.8rem; color: #fff; gap: 1.7rem; padding: 3.4rem 2.8rem; cursor: pointer; transition: 0.2s;}
#pcHeader .headCont .lang .tit img {transition: 0.2s;}
#pcHeader .headCont .lang .tit.on {background: var(--pcr);}
#pcHeader .headCont .lang .tit.on img {transform: rotate(180deg);}
#pcHeader .headCont .lang .lst {position: absolute; width: 100%; display: none;}
#pcHeader .headCont .lang .lst li {background: rgba(0,0,0,0.9); color: rgba(255,255,255,0.6); font-size: 1.6rem; padding: 1rem 0; text-align: center; transition: 0.2s; cursor: pointer;}
#pcHeader .headCont .lang .lst li:hover {background: #000; color: #fff;}

#pcHeader.act .headCont {background: #000}

#pcHeader .headMenu {background: #fff url('@/assets/img/headMenu_bg.png') no-repeat center/contain; display: none; position: absolute; width: 100%; border-bottom: 1px solid #DDDDDD; box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.05);}
#pcHeader .menuCont {height: 48rem;}
#pcHeader .expArea {width: 75rem; border-right: 1px solid #ddd; padding: 5rem 0 0 17.5rem;}
#pcHeader .expArea .area {}
#pcHeader .expArea .area .img {max-width: 40rem;}
#pcHeader .expArea .area .txt {margin-top: 3rem;}
#pcHeader .expArea .area .txt .tit {font-size: 2.4rem; font-weight: bold;}
#pcHeader .expArea .area .txt .wrt {font-size: 1.6rem; line-height: 2.4rem; color: #999999; padding-top: 1.2rem;}
#pcHeader .lnbArea {padding: 5rem 0 0 8rem;}
#pcHeader .lnbArea .area {overflow: hidden;}
#pcHeader .lnbArea .area .tit {font-size: 2.4rem; font-weight: bold; color: var(--pcr); margin-bottom: 3rem;}
#pcHeader .lnbArea .area .lnb {}
#pcHeader .lnbArea .area .lnb li {left: -3rem; transition: 0.4s;}
#pcHeader .lnbArea .area .lnb li + li {margin-top: 1rem;}
#pcHeader .lnbArea .area .lnb li a {font-size: 1.8rem; color: #555; padding: 1rem 0; padding-left: 3rem; transition: 0.4s; display: inline-block;}
#pcHeader .lnbArea .area .lnb li a::before {content: ''; display: block; position: absolute; width: 2rem; height: 2.2rem; background: url('@/assets/img/ic_symbol.svg') center/contain; left: 0;}
#pcHeader .lnbArea .area .lnb li:hover {left: 0;}
#pcHeader .lnbArea .area .lnb li:hover a {color: var(--pcr);}

@media all and (max-width: 880px){
    #sub {overflow: hidden;}

    #moHeader {position: fixed; width: 100%; top: 0; z-index: 9999;}
    #moHeader .headCont {z-index: 1; background: #fff;}
    #moHeader .headCont .inner {padding: 3.2rem 4rem; display: flex; justify-content: space-between; align-items: center;}
    #moHeader .headCont .logo {max-width: 17.872rem;}
    #moHeader .headCont .menuBtn {width: 3rem; height: 2.6rem; background: url('@/assets/img/ic_menu.svg') center/contain no-repeat;}
    #moHeader .headCont .menuBtn.act {background: url('@/assets/img/ic_menu_cancel.svg') center/contain no-repeat;}

    #moHeader .headMenuWrap {position: absolute; width: 100%; top: -100vh; height: 100vh; background: #fff; overflow: hidden;}
    #moHeader .headMenu {height: 100%; background: #fff; overflow-y: auto;}

    #moHeader .headMenu .lang {background: #101010; padding: 2.3rem 4rem;}
    #moHeader .headMenu .lang li {color: #999999; font-size: 2.8rem;}
    #moHeader .headMenu .lang li + li {padding-left: 1.2rem; margin-left: 1.2rem;}
    #moHeader .headMenu .lang li + li::before {content: ''; display: block; position: absolute; width: 1px; height: 60%; background: #555; left: 0; top: 50%; transform: translateY(-50%);}
    #moHeader .headMenu .lang li.on {font-weight: bold; color: #fff;}

    #moHeader .headMenu .moGnb {}
    #moHeader .headMenu .gnbLst {}
    #moHeader .headMenu .gnbLst .tit {border-bottom: 1px solid #E5E5E5; font-size: 2.8rem; color: #17181A; padding: 2.3rem 4rem; display: block;}
    #moHeader .headMenu .gnbLst .tit.on {color: var(--pcr);}
    #moHeader .headMenu .moLnb {padding: 1rem 4rem; background: #F6F6F9; display: none;}
    #moHeader .headMenu .moLnb li {}
    #moHeader .headMenu .moLnb li a {display: block; padding: 1rem 0; font-size: 2.4rem; color: #83838D;}
}

#footer {background: #17181A;}
#footer .cont {padding: 4rem 0;}
#footer .cont .fLogo {}
#footer .cont .info {margin: 2rem 0 1rem;}
#footer .cont .info li {display: flex; gap: 0.8rem; color: #999999;}
#footer .cont .info li span {font-weight: 500; color: #fff;}
#footer .cont .info li + li {padding-left: 0.5rem; margin-left: 0.5rem;}
#footer .cont .info li + li::before {content: ''; display: block; position: absolute; width: 1px; height: 60%; background: #999; left: 0; top: 50%; transform: translateY(-50%);}
#footer .cont .copy {color: #555555;}
#footer .topBtn {width: 6rem; height: 6rem; background: #504AD1; transition: 0.4s; border-radius: 0.5rem; position: absolute; right: 12rem; top: 50%; transform: translateY(-50%);}
#footer .topBtn img {transition: 0.4s; top: 0;}
#footer .topBtn:hover {background: #3C37AC;}
#footer .topBtn:hover img {top: -0.5rem;}


@media all and (max-width: 880px){
    #footer {}
    #footer .cont {padding: 4rem 0 4.8rem;}
    #footer .cont .fLogo {width: 15rem;}
    #footer .cont .info {display: flex; flex-direction: column; align-items: center; gap: 1rem; margin: 7rem 0 3rem;}
    #footer .cont .info li {font-size: 2rem;}
    #footer .cont .info li + li {margin: 0; padding: 0}
    #footer .cont .info li + li::before {display: none;}
    #footer .cont .copy {font-size: 2rem;}
    #footer .topBtn {transform: none; top: 4rem; right: 4rem;}
}