/* #theader */
#theader { z-index: 995; position: relative; background-color: #fff; }

/* top 110 */
#theader .top { position: relative; height: 110px; }
#theader .top .contwrap { height: 100%; }
#theader .top .logo { z-index: 1; position: absolute; left: 50%; transform: translateX(-50%); height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; }
#theader .top .logo img { display: inline-block; width: 290px; }

/* top left */
#theader .top .left { position: relative; float: left; height: 100%; }
#theader .top .left .scrbox { position: relative; top: 50%; transform: translateY(-50%); text-align: left; }
#theader .top .left .scrbox .scr1 { font-weight: 300; font-size: 18px; color: #000; letter-spacing: -0.01em; line-height: 1.35; }
#theader .top .left .scrbox .scr2 { font-size: 30px; color: #000; letter-spacing: -0.025em; line-height: 1.35; }
#theader .top .left .scrbox .scr2 b { font-weight: 700; color: #05325b; }

/* top rkight */
#theader .top .right { float: right; }
#theader .top .right .log { display: flex; align-items: center; justify-content: right; height: 55px; }
#theader .top .right .log a { position: relative; display: inline-block; padding: 0 10px; font-size: 15px; color: #000; letter-spacing: -0.01em; line-height: 1; }
#theader .top .right .log a::after { display: block; content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 1px; height: 50%; background-color: #000; }
#theader .top .right .log a:last-of-type { padding-right: 0; }
#theader .top .right .log a:last-of-type::after { display: none; }
#theader .top .right .sns_flex { display: flex; flex-wrap: nowrap; align-items: center; height: calc(100% - 55px); }
#theader .top .right .sns_flex a { display: inline-block; margin-left: 14px; }
#theader .top .right .sns_flex a img { display: inline-block; width: 35px; }
#theader .top .right .sns_flex a:hover img { filter: brightness(1.1); }

/* bottom 55 */
#theader .bottom { height: 55px; background-color: #063972; border-bottom: 1px solid #063972; }
#theader .bottom .contwrap { height: 100%; }
#theader .bottom .bottom_flex { display: flex; flex-wrap: nowrap; height: 100%; }
#theader.mouseover .bottom { border-bottom: 1px solid #c2cfdd; }

/* bottom hamwrap */
#theader .bottom .hamwrap { position: relative; width: 55px; min-width: 55px; height: 100%; border-left: 1px solid #c2cfdd; border-right: 1px solid #c2cfdd; cursor: pointer; }

#theader .bottom .hamwrap .ham_btn { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 25px; height: 18px; }
#theader .bottom .hamwrap .ham_btn div { position: absolute; width: 100%; height: 2px; background-color: #fff; transform-origin: center; border-radius: 3px; }
#theader .bottom .hamwrap .ham_btn div:first-child { top: 0%; transform: translateY(-50%); animation: bar1 forwards linear 0s; }
#theader .bottom .hamwrap .ham_btn div:nth-child(2) { top: 40%; transform: translateY(-50%); animation: bar2 forwards linear 0s; }
#theader .bottom .hamwrap .ham_btn div:last-child { top: 80%; transform: translateY(-50%); animation: bar3 forwards linear 0s; }
@keyframes bar1 { 0% { top: 50%; transform: translateY(-50%) rotateZ(45deg); } 50% { top: 50%; transform: translateY(-50%) rotateZ(0deg); } 100% { top: 0%; transform: translateY(-50%); } }
@keyframes bar2 { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 1; } }
@keyframes bar3 { 0% { top: 50%; transform: translateY(-50%) rotateZ(-45deg); } 50% { top: 50%; transform: translateY(-50%) rotateZ(0deg); } 100% { top: 80%; transform: translateY(-50%); } }

#theader.mouseover .bottom .hamwrap .ham_btn div:first-child { top: 0%; transform: translateY(-50%); animation: bar1_on forwards linear 0s; }
#theader.mouseover .bottom .hamwrap .ham_btn div:nth-child(2) { top: 40%; transform: translateY(-50%); animation: bar2_on forwards linear 0s; }
#theader.mouseover .bottom .hamwrap .ham_btn div:last-child { top: 80%; transform: translateY(-50%); animation: bar3_on forwards linear 0s; }
@keyframes bar1_on { 0% { top: 0%; transform: translateY(-50%); } 50% { top: 50%; transform: translateY(-50%); } 100% { top: 50%; transform: translateY(-50%) rotateZ(45deg); } }
@keyframes bar2_on { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }
@keyframes bar3_on { 0% { top: 80%; transform: translateY(-50%); } 50% { top: 50%; transform: translateY(-50%); } 100% { top: 50%; transform: translateY(-50%) rotateZ(-45deg); } }

/* bottom tnav */
#theader .bottom #tnav { width: 100%; height: 100%; }
#theader .bottom #tnav .menu1 { display: flex; flex-wrap: nowrap; height: 100%; }
#theader .bottom #tnav .menu1 > li { position: relative; width: 100%; height: 100%; }
#theader .bottom #tnav .menu1 > li > a { display: block; height: 100%; text-align: center; transition: background-color 0.3s; }
#theader .bottom #tnav .menu1 > li > a > span { position: relative; top: 50%; transform: translateY(-50%); display: inline-block; font-weight: 600; font-size: 19px; color: #fff; line-height: 1; }
#theader .bottom #tnav .menu1 > li:hover > a { background-color: #05325b; }
#theader .bottom #tnav .menu1 > li .menu2 { position: relative; display: none; position: absolute; left: 0; width: 100%; }
#theader .bottom #tnav .menu1 > li.scrolly .menu2 { max-height: 249px; overflow-y: scroll; }
#theader .bottom #tnav .menu1 > li.scrolly .menu2 {
    -ms-overflow-style: none;     /* IE, Edge */
    scrollbar-width: none;        /* Firefox */
}
#theader .bottom #tnav .menu1 > li.scrolly .menu2::-webkit-scrollbar {
    display: none;                /* Chrome, Safari, Edge */
}
#theader .bottom #tnav .menu1 > li.scrolly .menu2 .scrolli { position: sticky; left: 0; bottom: 0; width: 100%; text-align: center; padding: 10px 5px; background-color: rgba(0, 0, 0, 0.7); background-color: #063972; color: #fff; font-size: 13px; }
#theader .bottom #tnav .menu1 > li.scrolly .menu2 .scrolli::after { display: block; content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 25%; height: 1px; background-color: rgba(255, 255, 255, 0.7); }
#theader .bottom #tnav .menu1 > li.scrolly .menu2 .scrolli span { display: inline-block; margin-right: 5px; }
#theader .bottom #tnav .menu1 > li.scrolly .menu2 .scrolli img { animation: scrolli infinite alternate linear 0.5s; display: inline-block; }
@keyframes scrolli {
    0% { margin-top: 3px; }
    100% { margin-top: -3px; }
}

#theader .bottom #tnav .menu1 > li .menu2 a { display: block; padding: 11px 5px; text-align: center; }
#theader .bottom #tnav .menu1 > li .menu2 a span { position: relative; display: inline-block; font-size: 15px; color: #fff; line-height: 1.3; }
#theader .bottom #tnav .menu1 > li .menu2 a span::after { display: block; content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: -4px; width: 0; height: 1px; background-color: #fff; transform-origin: center; transition: width 0.3s; }
#theader .bottom #tnav .menu1 > li .menu2 a:hover span::after { width: 100%; }

#theader .bottom #tnav .menu1 > li.ver2 > a { background-color: #5390c9; }

/* header_bg */
.header_bg { display: none; z-index: 994; position: absolute; top: 165px; width: 100%; height: 249px; height: 1162px; background-color: #063972; }

/* mo_hamwrap */
#theader .mo_hamwrap { display: none; }

/* mo_nav */
#mo_nav { display: none; }

@media (max-width: 1660px) {
    /* top 100 */
    #theader .top { height: 100px; }
    #theader .top .logo img { width: 263px; }

    /* top left */
    #theader .top .left .scrbox .scr2 b { font-weight: 600; }

    /* top rkight */
    #theader .top .right .log { height: 50px; }
    #theader .top .right .log a { padding: 0 9px; font-size: 14px; }
    #theader .top .right .sns_flex { height: calc(100% - 50px); }
    #theader .top .right .sns_flex a { margin-left: 13px; }
    #theader .top .right .sns_flex a img { width: 32px; }

    /* bottom 50 */
    #theader .bottom { height: 50px; }
    #theader .bottom .hamwrap { width: 50px; }

    /* bottom hamwrap */
    #theader .bottom .hamwrap .ham_btn { width: 23px; height: 16px; }
    #theader .bottom .hamwrap .ham_btn div { border-radius: 2px; }

    /* bottom tnav */
    #theader .bottom #tnav .menu1 > li > a > span { font-size: 18px; }
    #theader .bottom #tnav .menu1 > li .menu2 a { padding: 10px 4px; }
    #theader .bottom #tnav .menu1 > li .menu2 a span { font-size: 14px; }

    #theader .bottom #tnav .menu1 > li.scrolly .menu2 { max-height: 229.14px; }

    /* header_bg */
    .header_bg { top: 150px; height: 229.14px; height: 1069.32px; }
}
@media (max-width: 1440px) {
    /* top */
    #theader .top { height: 90px; }
    #theader .top .logo img { width: 237px; }
    
    /* top left */
    #theader .top .left .scrbox .scr2 b { font-weight: 500; }

    /* top rkight */
    #theader .top .right .log { height: 40px; }
    #theader .top .right .log a { padding: 0 8px; font-size: 13px; }
    #theader .top .right .sns_flex { height: calc(100% - 40px); }
    #theader .top .right .sns_flex a { margin-left: 11px; }
    #theader .top .right .sns_flex a img { width: 30px; }

    /* bottom 50 */
    #theader .bottom { height: 50px; }
    #theader .bottom .hamwrap { width: 50px; }

    /* bottom tnav */
    #theader .bottom #tnav .menu1 > li > a > span { font-weight: 500; font-size: 16px; }
    #theader .bottom #tnav .menu1 > li .menu2 a { padding: 9px 3px; }
    #theader .bottom #tnav .menu1 > li .menu2 a span { font-size: 13px; }

    #theader .bottom #tnav .menu1 > li.scrolly .menu2 { max-height: 220px; }

    /* header_bg */
    .header_bg { top: 140px; height: 220px; height: 1004.92px; }
}
@media (max-width: 1279px) {
    /* top 80 */
    #theader .top { height: 80px; }
    #theader .top .logo { left: 0; transform: translateX(0); justify-content: initial; text-align: left; }
    #theader .top .logo img { width: 210px; }

    /* top left */
    #theader .top .left { display: none; }

    /* top rkight */
    #theader .top .right { display: none; }

    /* bottom */
    #theader .bottom { display: none; }

    /* header_bg */
    .header_bg { display: none !important; opacity: 0; z-index: -99; }

    /* mo_hamwrap */
    #theader .mo_hamwrap { position: absolute; top: 40%; transform: translateY(-50%); right: 70px; display: block; }
    #theader .mo_hamwrap .ham_btn { display: block; position: absolute; top: 0; right: 0; width: 25px; height: 18px; cursor: pointer; }
    #theader .mo_hamwrap .ham_btn div { position: absolute; width: 100%; height: 3px; background-color: #05325b; transform-origin: center; border-radius: 3px; }
    #theader .mo_hamwrap .ham_btn div:first-child { top: 0%; transform: translateY(-50%); animation: mo_bar1 forwards linear 0.4s; }
    #theader .mo_hamwrap .ham_btn div:nth-child(2) { top: 40%; transform: translateY(-50%); animation: mo_bar2 forwards linear 0.4s; }
    #theader .mo_hamwrap .ham_btn div:last-child { top: 80%; transform: translateY(-50%); animation: mo_bar3 forwards linear 0.4s; }
    @keyframes mo_bar1 { 0% { top: 50%; transform: translateY(-50%) rotateZ(45deg); } 50% { top: 50%; transform: translateY(-50%) rotateZ(0deg); } 100% { top: 0%; transform: translateY(-50%); } }
    @keyframes mo_bar2 { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 1; } }
    @keyframes mo_bar3 { 0% { top: 50%; transform: translateY(-50%) rotateZ(-45deg); } 50% { top: 50%; transform: translateY(-50%) rotateZ(0deg); } 100% { top: 80%; transform: translateY(-50%); } }
    
    #theader.active .mo_hamwrap .ham_btn div:first-child { top: 0%; transform: translateY(-50%); animation: mo_bar1_on forwards linear 0.4s; }
    #theader.active .mo_hamwrap .ham_btn div:nth-child(2) { top: 40%; transform: translateY(-50%); animation: mo_bar2_on forwards linear 0.4s; }
    #theader.active .mo_hamwrap .ham_btn div:last-child { top: 80%; transform: translateY(-50%); animation: mo_bar3_on forwards linear 0.4s; }
    @keyframes mo_bar1_on { 0% { top: 0%; transform: translateY(-50%); } 50% { top: 50%; transform: translateY(-50%); } 100% { top: 50%; transform: translateY(-50%) rotateZ(45deg); } }
    @keyframes mo_bar2_on { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }
    @keyframes mo_bar3_on { 0% { top: 80%; transform: translateY(-50%); } 50% { top: 50%; transform: translateY(-50%); } 100% { top: 50%; transform: translateY(-50%) rotateZ(-45deg); } }

    /* mo_nav */
    #mo_nav { z-index: 994; position: absolute; top: 80px; left: 0; width: 100%; display: none; background-color: rgba(255, 255, 255, 0.9); border-top: 1px solid #ddd; }
    #mo_nav.active { display: block; }

    #mo_nav { max-height: calc(100vh - 80px); overflow-y: scroll; }
    #mo_nav { -ms-overflow-style: none; scrollbar-width: none; }
    #mo_nav::-webkit-scrollbar { display: none; }

    #mo_nav .mo_info { padding: 8px 0; border-bottom: 1px solid #ddd; text-align: center; }
    #mo_nav .mo_info .scrbox { display: inline-block; text-align: left; }
    #mo_nav .mo_info .scrbox .scr1 { font-size: 13px; color: #000; line-height: 1.44; }
    #mo_nav .mo_info .scrbox .scr2 { font-size: 15px; color: #000; line-height: 1.44; }
    #mo_nav .mo_info .scrbox .scr2 b { font-weight: 600; color: #05325b; }

    #mo_nav .mo_log { display: flex; flex-wrap: nowrap; justify-content: center; padding: 10px 0; border-bottom: 1px solid #ddd; }
    #mo_nav .mo_log a { position: relative; display: block; padding: 0 10px; font-size: 14px; color: #333; line-height: 1; text-align: center; }
    #mo_nav .mo_log a::after { display: block; content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 60%; background-color: #333; }
    #mo_nav .mo_log a:first-of-type:after { display: none; }

    #mo_nav .mo_sns_flex { padding: 8px 0; display: flex; justify-content: center; text-align: center; align-items: center; border-bottom: 1px solid #ddd; }
    #mo_nav .mo_sns_flex a { display: inline-block; margin: 0 8px; }
    #mo_nav .mo_sns_flex a img { display: inline-block; width: 28px; }

    #mo_nav .mo_menu { position: relative; text-align: center; }
    #mo_nav .mo_menu li > a { display: block; padding: 10px 5px; }
    #mo_nav .mo_menu li > a.no_link { pointer-events: none; }
    #mo_nav .mo_menu li:hover > a { background-color: #eee; }
    #mo_nav .mo_menu li > a > span { display: inline-block; font-size: 15px; color: #333; line-height: 1.25; }
    #mo_nav .mo_menu li .menu2 { display: none; background-color: #ddd; }
    #mo_nav .mo_menu li .menu2 a { display: block; padding: 10px 5px; }
    #mo_nav .mo_menu li .menu2 a span { font-size: 14px; color: #333; }
    #mo_nav .mo_menu li .menu2 a:hover { background-color: #ccc; }

}
@media (max-width: 1023px) {
    /* top */
    #theader .top { height: 70px; }
    #theader .top .logo img { width: 184px; }

    
    /* mo_hamwrap */
    #theader .mo_hamwrap { right: 50px; }

    /* mo_nav */
    #mo_nav { top: 70px; }
    #mo_nav { max-height: calc(100vh - 70px); }
}
@media (max-width: 767px) {
    /* mo_hamwrap */
    #theader .mo_hamwrap { right: 30px; }
}
@media (max-width: 460px) {
    /* mo_hamwrap */
    #theader .mo_hamwrap { right: 20px; }
}