/* Header */
#header { position: fixed; width: 100%; background-color: #fff; z-index: 60; }
#header.shadow { box-shadow: 0 .15rem .3rem rgba(0, 0, 0, .15); }

#header .logo img { min-width: 220px; height: auto; }
#header nav.pc-nav .depth1 { position: relative; padding: 0 2.5rem; }
#header nav.pc-nav .depth1.social { padding: 0; }
#header nav.pc-nav .depth2 { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 100%; max-width: 150%; background-color: var(--pointcolor); padding: .75rem; }
#header nav.pc-nav .depth2 li { padding: .5rem .75rem; text-align: center; white-space: nowrap; }

@media (max-width:990px){
    #header .logo img { min-width: 180px; } 
    .nav-burger { position: relative; transform-origin: center; }
    .nav-burger span { position: relative; display: block; width: 3rem; height: 3px; background-color: var(--pointcolor); }
    .nav-burger span:nth-child(1),.nav-burger span:nth-child(3) { transition: transform .25s, top .2s; }
    .nav-burger span:nth-child(2) { margin: .5rem 0; transition: transform .2s, margin .2s, opacity .2s; }
    .nav-burger.visible span:nth-child(1) { transform: rotate(45deg); top: .25rem; }
    .nav-burger.visible span:nth-child(2) { transform: scaleX(0); margin: 0; opacity: 0; }
    .nav-burger.visible span:nth-child(3) { transform: rotate(-45deg); top: -.25rem; }

    .mobile-menu { display: none; position: fixed; min-height: calc(100vh - 70px); max-width: calc(100vh - 70px); overflow-y: auto; top: 70px; left: 0; right: 0; padding: 1.5rem 0; background-color: #fff; border-top: 1px solid var(--light-gray); z-index: 65; }
    .mobile-menu::-webkit-scrollbar { width: 2px; }
    .mobile-menu .depth1 { padding: 1rem 1.5rem; border-bottom: 1px solid var(--light-gray); cursor: pointer; }
    .mobile-menu .depth1[has-child='true']{ position: relative; }
    .mobile-menu .depth1[has-child='true']::after { position: absolute; content: url(/img/common/ico_down.svg); top: 25%; right: 2rem; width: 1.5rem; transform: translateY(-25%); transform-origin: center; transition: transform .25s; }
    .mobile-menu .depth1[is-opened='true']::after { transform: translateY(-25%); content: url(/img/common/ico_up.svg); }
    .mobile-menu .depth1 > a { display: block; }
    .mobile-menu .depth1[has-child='true'] ~ .depth2 { display: none; }
    .mobile-menu .depth1[has-child='true'] ~ .depth2 li { padding: 1rem 3rem; border-bottom: 1px solid var(--light-gray); }
}
@media (max-width:768px){
    .mobile-menu { min-height: calc(100vh - 55px); max-height: calc(100vh - 55px); top: 55px; }
}

/* Footer */
footer { position: relative; z-index: 10; }
footer .footerNav { border-bottom: 1px solid #2b5a93; }
footer .footerNav li { position: relative; padding: 0 .75rem; }
footer .footerNav li::after { position: absolute; content: ''; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 50%; background-color: var(--sub2color); }
footer .footerNav li:last-child:after { display: none; }

@media (max-width:768px){
    footer { font-size: 1.25rem; }
    footer .container_mini { flex-wrap: wrap; }
    footer .footer_info, footer .footer_logo { width: 100%; }
    footer .footer_logo { margin-top: 4rem; }
    footer .footer_logo img { width: 50%; }
}

/* Quick */
#quick { position: fixed; right: 5rem; bottom: 7.5rem; z-index: 50; }
#quick li { position: absolute; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; box-shadow: .15rem .15rem .3rem rgba(0, 0, 0, .15); }
#quick li:nth-last-child(2) { bottom: 10px; }
#quick li.flexQuick p { position: relative; width: 100%; height: 100%; }
#quick li.flexQuick p span { position: absolute; background-color: #fff; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: .2s; }
#quick li.flexQuick p span:nth-child(1) { width: 30%; height: 2px; opacity: 1; }
#quick li.flexQuick.show p span:nth-child(1) { opacity: 0; }
#quick li.flexQuick p span:nth-child(2) { width: 2px; height: 30%; }
#quick li.flexQuick.show p span:nth-child(2) { width: 2px; height: 30%; transform: translate(-50%,-50%) rotate(-90deg); }
#quick li.target { bottom: 10px; opacity: 0; z-index: -1; transition: .25s; }
#quick li.target.show { opacity: 1; z-index: 50; }
#quick li.target.show:nth-last-child(3) { bottom: 70px; }
#quick li.target.show:nth-last-child(4) { bottom: 130px; }
#quick li.target.show:hover::before { position: absolute; content: attr(data-label); right: 130%; background-color: #fff; padding: .15rem .5rem; border-radius: .25rem; box-shadow: 0 0 .25rem rgba(0, 0, 0, .15); font-weight: 800; }
#quick li.target.show:hover::after { position: absolute; content: ''; right: 105%; width: 0; height: 0; border-bottom: 5px solid transparent; border-top: 5px solid transparent; border-left: 7.5px solid #fff; border-right: 7.5px solid transparent; }
@media (max-width:990px){
    #quick { right: 7.5rem; }
}

/* subTop */
.subTop { position: relative; width: 100%; height: auto; }
.subTop .subTopInner { aspect-ratio: 24/5; background-repeat: no-repeat; background-size: cover; background-color: #000; }
@media (max-width:990px){
    .subTop .subTopInner { aspect-ratio: 5/3; }
    .subTop .subTopInner.visible-sm { position: relative; }
    .subTop .subTopInner.visible-sm .subTit { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

}