/* 怨듯넻 */
:root{
    --color-main : #1090e1;
    --color-orange : #ff9000;
    --color-green : #1cd4b5;
}
.mainColor {color: #1090e1}
.inner {max-width: 1400px; margin: 0 auto; position: relative}
.pc {display: block}
.mobile {display: none}

/* �ㅻ뱶 */
.header_bg {position: fixed; top: 0; left: 0; width: 100%; height: 90px; background: #fff; z-index: 98; transition: 0.3s}
.header_bg.scroll {box-shadow: 0px 4px 10px rgba(0,0,0,0.05);}
.header_bg.on {box-shadow: 0px 4px 10px rgba(0,0,0,0.05); height: 420px; transition: 0.3s}

.header {position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index: 100}
.header.on {border-bottom: 1px solid #e5e5e5}
.header .inner {height: 90px}
.logo {position: absolute; left: 0; top: 50%; transform: translateY(-50%)}
.logo a {width: 185px}
.logo a img {width: 100%}

.nav {position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex}
.nav.on > li > a {padding: 0 50px}
.nav.nanum {display: none}
.nav > li {position: relative}
.nav > li > a {line-height: 90px; font-size: 19px; font-weight: 700; word-break: keep-all; padding: 0 35px; position: relative; transition: 0.3s}
.nav > li > a::after {content: ""; background: var(--color-main); width: 6px; height: 6px; border-radius: 50%; position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); opacity: 0; transition: 0.3s}
.nav > li.on > a {color: var(--color-main);}
.nav > li.on > a::after {opacity: 1; bottom: 15px}
.nav > li.sub > a {color: var(--color-main)}
.nav > li.sub > a::after {opacity: 1; bottom: 15px}

.nav.on .gnb {opacity: 1; visibility: visible; transition: 0.3s}
.gnb {opacity: 0; visibility: hidden; position: absolute; top: 90px; left: 50%; transform: translateX(-50%); width: 100%; padding: 15px 5px; transition: 0s; border-left: 1px solid #e5e5e5; height: 330px}
.gnb.on {background: linear-gradient(to right, #1090e1, #1cd4b5)}
.gnb.on li a {color: #fff; width: 100%}
.gnb.borderR {border-right: 1px solid #e5e5e5}
.gnb li {text-align: center}
.gnb li a {font-size: 17px; color: #777; height: 50px; line-height: 50px}
.gnb li a:hover {background: #fff; color: var(--color-main); border-radius: 10px; font-weight: 600}

.online {position: absolute; top: 50%; right: 0; transform: translateY(-50%); background: var(--color-orange); font-size: 16px; color: #fff; height: 45px; line-height: 45px; border-radius: 30px; padding: 0 20px; font-weight: 600}
.online:hover {background: #ff8000}

.menu_btn {display: none; position: absolute; top: 50%; right: 0; transform: translateY(-50%)}
.menu_btn span {font-size: 0; width: 23px; height: 2px; background: #171717; margin: 6px 0; display: block; transition: 0.3s}
.menu_btn.on span:first-child {transform-origin: top right; transform: rotate(-45deg)}
.menu_btn.on span:last-child {transform-origin: bottom right; transform: rotate(45deg)}
.menu_btn.on span:nth-child(2) {opacity: 0}


/* 紐⑤컮�� 硫붾돱 */
.mobile_menu {position: fixed; top: 0; bottom: 0; right: -100%; width: 100%; height: 100%; z-index: 99; background: #fff; padding: 60px 0; transition: 0.3s; overflow-y: scroll}
.mobile_menu.on {right: 0;}
.mb_nav {padding: 20px 25px;}
.mb_nav > li > a {font-size: 24px; padding: 22px 0; font-weight: 700}
.mb_gnb {background: linear-gradient(to right, #1090e1, #1cd4b5); text-align: center; border-radius: 20px; padding: 15px 0; display: none}
.mb_gnb li a {color: #fff; font-size: 16px; padding: 10px 0; display: block; font-weight: 500}
.mb_online {position: fixed; bottom: 0; right: -100%; width: 100%; border-top: 1px solid #e5e5e5; padding: 5px 10px; transition: 0.3s; background: #fff}
.mb_online.on {right: 0}
.mb_online a {background: var(--color-orange); color: #fff; border-radius: 10px; height: 45px; line-height: 45px; width: 100%; text-align: center; font-weight: 600; font-size: 14px}

/* �섎떒 */
.footer {background: #171717; padding: 60px 0; color: #fff; font-size: 16px; margin-top: 100px}
.footer .kakao {background: url(/img/main/ft_kakao.svg) no-repeat center left/ contain; width: 50px; height: 50px; position: absolute; top: 0; right: 0}
.footer .kakao span {font-size: 0}
.footer .kakao:hover {background-image: url(/img/main/kakao.svg)}
.ft_link {}
.ft_link li {display: inline-block; position: relative}
.ft_link li .mainColor {font-weight: 500}
.ft_link li::after {content: ""; background: #fff; width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin: 0 30px; opacity: 0.5; position: relative; top: -3px}
.ft_link li:last-child {opacity: 0.5}
.ft_link li:last-child::after {display: none}
.ft_list {opacity: 0.6; margin: 45px 0 0 0}
.ft_list li {display: inline-block; line-height: 1.7; word-break: keep-all}
.copyright {font-size: 14px; opacity: 0.3; position: absolute; bottom: 0; right: 0; line-height: 1.7; word-break: keep-all}

.top_btn {position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; border-radius: 50%; background: url(/img/main/top_btn.svg) no-repeat center center / 50% #fff; box-shadow: 0px 0px 10px rgba(0,0,0,0.05); border: 1px solid #e5e5e5; display: none; z-index: 97}
.top_btn:hover {border: 1px solid #111}

@media screen and (max-width:1470px){
    /* 怨듯넻 */
    .inner {margin: 0 30px}
}

@media screen and (max-width:1300px){
    /* �ㅻ뱶 */
    .header_bg, .header .inner {height: 70px}
    .header_bg.on {height: 360px}
    .logo a {width: 150px}
    .nav > li > a {font-size: 17px; line-height: 70px; padding: 0 20px}
    .nav > li > a::after {width: 5px; height: 5px; bottom: 15px}
    .nav > li.on > a::after {bottom: 11px;}
    .nav.on > li > a {padding: 0 40px}
    .gnb {top: 70px; padding: 10px 5px; height: 290px}
    .gnb li a {font-size: 16px; height: 45px; line-height: 45px; padding: 0}
    .online {font-size: 14px}
    
    /* �명꽣 */
    .footer {font-size: 14px; margin-top: 80px}
    .copyright {position: relative; margin: 20px 0 0 0}
}

@media screen and (max-width:1100px){
    /* 怨듯넻 */
    .inner {margin: 0 20px}
    .pc {display: none}
    .mobile {display: block!important}
    
    /* �ㅻ뱶 */
    .header_bg, .header .inner {height: 60px}
    .nav {display: none}
    .online {display: none}
    .online.nanum {display: block; height: 35px; line-height: 35px; padding: 0 15px; font-size: 13px}
    .menu_btn {display: block}
    .menu_btn.nanum {display: none}
    
    /* �명꽣 */
    .footer {font-size: 13px; text-align: center; padding: 40px 0}
    .footer .kakao {position: relative; margin-top: 20px; height: 45px; width: auto; padding-left: 50px; line-height: 45px}
    .footer .kakao span {opacity: 0.7; font-size: 13px}
    .ft_link li {line-height: 1.7;}
    .ft_link li::after {width: 4px; height: 4px; margin: 0 15px}
    .ft_list {margin: 25px 0 0 0}
    .copyright {font-size: 12px}
    .top_btn {right: 20px; bottom: 20px; width: 45px; height: 45px}
    .top_btn.sub {bottom: 90px}
}

@media screen and (max-width:700px){
    /* �명꽣 */
    .footer {margin-top: 50px}
}