/*a:focus {outline: dashed 3px #0088ff;}*/
html,body {height: 100%;}
.img-responsive {display: block;max-width: 100%;}
.img-center {margin: 0 auto;}

::-webkit-scrollbar {width: 9px;}
::-webkit-scrollbar-thumb {background-color: #c3c6cd;border-radius: 15px;background-clip: padding-box;border: 2px solid transparent;}
::-webkit-scrollbar-track {background-color: #fff;border-radius: 15px;box-shadow: inset 0px 0px 5px white;}

.wrap {padding-top: 100px;}
/* header */
.header {background:#fff;border-bottom:1px solid #ddd;position: fixed;top: 0;left: 0;right: 0;z-index: 200;width: 100%;}
.header .inner {height:100px;display:flex;align-items:center;justify-content:space-between;}
.logo {margin:0;}
.logo a {display:flex;align-items:center;}
.logo img {display:block;}
.gnb {flex:1;display:flex;justify-content:center;}
.gnb ul {display:flex;gap:120px;}
.gnb a {font-size:20px;color:#111;font-weight:700;height: 100%;display: flex;align-items: center;justify-content: center;}
.util {display:flex;align-items:center;gap:10px;}
.util .my {display:flex;align-items:center;gap:6px;color:#111;font-size:12px;}
.util .my span {display: none;}
.util .my img {display:block;}
.btn-menu {display:none;width:28px;height:19px;background:transparent;border:0;padding:0;cursor: pointer;z-index:130;position: relative;}
.btn-menu span,.btn-menu:before,.btn-menu:after {content:"";display:block;position:absolute;left:0;right:0;height:3px;background:#111;border-radius:1px;transition:transform .2s ease,opacity .2s ease,top .2s ease,bottom .2s ease;}
.btn-menu span {top:8px;}
.btn-menu:before {top:0;}
.btn-menu:after {bottom:0;}

/* menu open (hamburger -> X) */
body.menu-open .btn-menu span {opacity:0;}
body.menu-open .btn-menu:before {top:8px;transform:rotate(45deg);}
body.menu-open .btn-menu:after {bottom:auto;top:8px;transform:rotate(-45deg);}

/* lock scroll when menu open */
body.menu-open {overflow: hidden;}

/* gnb dropdown */
.gnb {position:relative;height: 100%;}
.gnb .menu {display:flex;gap:120px;}
.gnb .menu>li {position:relative;}
.gnb .depth2 {display:none;position:absolute;top:100px;left:50%;transform:translateX(-50%);padding-top:18px;}
.gnb .depth2 li a {display:block;font-size:16px;font-weight:500;color:#222;padding:10px 16px;white-space:nowrap;text-align: center;}
.gnb .drop-bg {position:fixed;left:0;right:0;top:100px;height:0;background:#fff;border-bottom:1px solid #eee;box-shadow:0 6px 10px rgba(0,0,0,.05);z-index:5;}
.gnb .menu>li .depth2 {z-index:10;}
.gnb .menu>li>a:hover,.gnb .menu>li:hover>a,.gnb .menu>li:focus-within>a {color:#1a4399;}
.gnb .depth2 li>a:hover,.gnb .depth2 li:hover>a,.gnb .depth2 li>a:focus {color:#1a4399;}
.gnb .menu>li>a {position:relative;padding:0 6px;}
.gnb .menu>li>a:after {content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#1a4399;opacity:0;transition:transform .18s ease,opacity .18s ease;width: 100%;}
.gnb .menu>li:hover>a:after,.gnb .menu>li>a:hover:after,.gnb .menu>li:focus-within>a:after {transform:scaleX(1);opacity:1;}

footer {background-color: #23293c;padding: 50px 0;}
.footer {display: flex;justify-content: center;}
.footer h2 {flex-shrink: 0;width: 320px;}
.footer .info p {font-size: 16px;color: #fff;font-weight: 400;line-height: 1.6;}

.top {position: fixed;bottom: 40px;right: 40px;width: 60px;height: 60px;background:#23293c url('/img/user/common/ico_top.png') no-repeat center center;cursor: pointer;z-index: 10;border: 1px solid #ddd;border-radius: 50%;}

/* Mobile side menu */
.mnav {position: fixed;z-index: 120;pointer-events: none;width: 100%;height: 100%;display: none;}
.mnav-dim {position:absolute;inset:0;background: rgba(0,0,0,.45);opacity:0;transition: opacity .25s ease;}
.mnav-panel {position:absolute;top:0;left:0;bottom:0;width: 84vw;max-width: 360px;background:#fff;box-shadow: 8px 0 24px rgba(0,0,0,.12);transform: translateX(-100%);transition: transform .28s cubic-bezier(.2,.65,.25,1);display:flex;flex-direction:column;}
.mnav-scroller {overflow-y:auto;-webkit-overflow-scrolling: touch;height:100%;}
.mnav .menu {display:block;padding: 0 0 16px 0;}
.mnav .menu>li {border-bottom:1px solid #eee;}
.mnav .menu>li>a {display:block;padding: 16px 22px;font-size:18px;color:#111;font-weight:700;}
.mnav .menu>li.has-sub > a {position: relative; padding-right: 42px;}
.mnav .menu>li.has-sub > a:after {content:""; position:absolute; top:50%; right:18px; width:10px; height:10px; border-right:2px solid #999; border-bottom:2px solid #999; transform: translateY(-50%) rotate(45deg); transition: transform .2s ease;}
.mnav .menu>li.open > a:after {transform: translateY(-50%) rotate(-135deg);} 
.mnav .depth2 {display:none;padding: 4px 0 12px 0;}
.mnav .depth2 li a {display:block;padding: 10px 26px;font-size:16px;color:#222;font-weight:500;}
.mnav .menu>li.open>.depth2 {display:block;}

/* show when open */
body.menu-open .mnav {pointer-events:auto;}
body.menu-open .mnav-dim {opacity:1;}
body.menu-open .mnav-panel {transform: translateX(0);}

.mb100 {margin-bottom: 100px;}
.mb90 {margin-bottom: 90px;}
.mb80 {margin-bottom: 80px;}
.mb70 {margin-bottom: 70px;}
.mb60 {margin-bottom: 60px;}
.mb50 {margin-bottom: 50px;}
.mb40 {margin-bottom: 40px;}
.mb30 {margin-bottom: 30px;}
.mb20 {margin-bottom: 20px;}
.mb10 {margin-bottom: 10px;}

@media (max-width: 1649px) {
}

@media (max-width: 1399px) {
    .logo a img {width: 200px;}
    .gnb .menu {gap: 80px;}
    .gnb a {font-size: 18px;}
    .gnb .depth2 li a {font-size: 16px;}
}

@media (max-width: 1199px) {
    .footer h2 img {width: 200px;}
    .footer h2 {width: 230px;}
    .top {bottom: 10px;right: 10px;width: 40px;height: 40px;background-size: 10px auto;}
}

@media (max-width: 991px) {
    .gnb {display: none;}
    .wrap {padding-top: 70px;}
    .header .inner {height: 70px;}
    .btn-menu {display:inline-block;}
    /*.util {margin-right: 50px;}*/
    .mnav {display:block;}
    .footer {display: block;}
    footer {padding: 30px 0;}
    .footer h2 {width: auto;margin-bottom: 20px;}
    .footer .info p {font-size: 14px;}
}

@media (max-width: 767px) {
    .util .my img {width: 25px;}
    .mb20 {margin-bottom: 10px;}
    .mb50 {margin-bottom: 30px;}
}

@media (max-width: 575px) {
    .wrap {padding-top: 60px;}
    .header .inner {height: 60px;}
}