html,body{height:100%;}
body.action,
body.act-mobile,
body.act-sitemap {overflow:hidden;height: 100%;}
*{line-height: 1.3;}
#wrap{overflow:hidden;position:relative;min-height:100%;}


.con-area{max-width: 1400px; width:100%; margin:0 auto;}
.con-area:after{content:"";display:block;clear:both;}
@media screen and (max-width: 1400px) {
    .con-area {padding: 0 20px;}
}
@media screen and (max-width: 1024px) {
    .con-area {padding: 0 15px;}
}


.ft-jal {font-family: 'yg-jalnan', 'Pretendard','Noto Sans KR', sans-serif;}


#header {position: relative; z-index: 70; width: 100%;}

#header .util-wrap {display: flex; overflow: hidden; height: 50px; background-color: #F8F9FB;}
#header .util-wrap .util-menu {display: flex; position: relative; margin-left: auto; margin-right: -12.5px;}
#header .util-wrap .util-menu > li {display: block;}
#header .util-wrap .util-menu > li:nth-child(1) {z-index: 1;}
#header .util-wrap .util-menu > li:nth-child(2) {z-index: 2;}
#header .util-wrap .util-menu > li:nth-child(3) {z-index: 3;}
#header .util-wrap .util-menu > li:nth-child(4) {z-index: 4;}
#header .util-wrap .util-menu > li .menu {display: flex; position: relative; min-width:225px; padding: 0 15px; height:100%; align-items: center;}
#header .util-wrap .util-menu > li .menu > span {display: block; position: relative; margin: 0 auto; font-weight: 600; font-size: 14px; color: #494E61;}
#header .util-wrap .util-menu > li .menu::before {content:""; position: absolute; top:0; left: 0; width: 100%; height: 100%; box-shadow: -8px 0 8px 0 rgba(0,0,0,0.3); background: linear-gradient(180deg, #FFFFFF 0%, #EAEAEA 100%); transform: skewX(-26.565deg);}

/* interaction */
#header .util-wrap .util-menu > li .menu > span {transition: color 0.3s;}
#header .util-wrap .util-menu > li .menu:focus > span,
#header .util-wrap .util-menu > li .menu:hover > span {color: #00ABFB;}
#header .util-wrap .util-menu > li .menu.on > span {color: #fff;}
#header .util-wrap .util-menu > li .menu.on::before {background: linear-gradient(180deg, #00ABFB 0%, #4683C3 100%);}

@media screen and (max-width: 1200px) {
    #header .util-wrap .util-menu > li .menu {min-width: 180px;}
}
@media screen and (max-width: 1024px) {
    #header .util-wrap {display: none;}
}




#header .header-wrap {display: flex; position: relative; z-index: 1; height: 100px; margin: 0 auto; padding: 0 150px; background-color: #fff; align-items: center; justify-content: space-between;}
#header .header-wrap #logo {display: block; height: 40px;}
#header .header-wrap #logo > a {display: block; height:100%;}
#header .header-wrap #logo > a > img {display:block; max-width: unset; width: auto; height: 100%;}

#header .header-wrap .gnb {display:block; height:100%;}
#header .header-wrap .gnb .gnb-menu {display: flex; height:100%;}
#header .header-wrap .gnb .gnb-menu > li {position: relative; padding: 0 40px;}
#header .header-wrap .gnb .gnb-menu > li .menu-01 {display:flex; height: 100%; font-weight: 700; font-size: 1.125rem; color: #000; align-items: center;}
#header .header-wrap .gnb .gnb-menu > li .menu-02 {overflow: hidden; position: absolute; top: 100%; left: 50%; width: 250px; padding: 30px 20px; border-radius: 0 0 25px 25px; transform: translateX(-50%); background-color: #fff;}
#header .header-wrap .gnb .gnb-menu > li .menu-02 > li {}
#header .header-wrap .gnb .gnb-menu > li .menu-02 > li > a {display: block; padding: 10px 5px; font-weight: 500; font-size: 1.0625rem;}
#header .header-wrap .gnb .gnb-menu > li .menu-02 > li .menu-03 {display: block;}
#header .header-wrap .gnb .gnb-menu > li .menu-02 > li .menu-03 > li {}
#header .header-wrap .gnb .gnb-menu > li .menu-02 > li .menu-03 > li > a {display:block; padding: 7px 10px;}
#header .header-wrap .gnb .gnb-menu > li .menu-02 > li .menu-03 > li > a > span {display: block; position: relative; padding-left: 10px;}
#header .header-wrap .gnb .gnb-menu > li .menu-02 > li .menu-03 > li > a > span::before {content:""; position: absolute; top: calc(50% - 4px); left: 0; border-left: 4px solid #000; border-top: 3px solid transparent; border-bottom: 3px solid transparent;}
/* interaction */
/* 1차 메뉴 */
#header .header-wrap .gnb .gnb-menu > li .menu-01 {transition: color 0.3s;}
#header:hover .header-wrap .gnb .gnb-menu > li .menu-01,
#header.focus .header-wrap .gnb .gnb-menu > li .menu-01,
#header.active .header-wrap .gnb .gnb-menu > li .menu-01 {color: #000;}
#header .header-wrap .gnb .gnb-menu > li .menu-01:focus,
#header .header-wrap .gnb .gnb-menu > li:hover .menu-01 {color: #2B52A8;}

/* 2차메뉴 */
#header .header-wrap .gnb .gnb-menu > li .menu-02 {visibility: hidden; opacity: 0; transition: visibility 0s 0.4s, opacity 0.4s;}
#header .header-wrap .gnb .gnb-menu > li .menu-01.focus + .menu-02,
#header .header-wrap .gnb .gnb-menu > li:hover .menu-02 {visibility: visible; opacity: 1; transition: visibility 0s 0s, opacity 0.4s;}
#header .header-wrap .gnb .gnb-menu > li .menu-02 > li > a {transition: color 0.3s;}
#header .header-wrap .gnb .gnb-menu > li .menu-02 > li:focus > a,
#header .header-wrap .gnb .gnb-menu > li .menu-02 > li:hover > a {color: #2B52A8;}


#header .header-wrap .info-menu {display: flex;}
#header .header-wrap .info-menu > li {display: block;}
#header .header-wrap .info-menu > li .btn-login {display: block; position: relative; padding-left: 40px; height: 30px; line-height: 30px; font-weight: 700; color: #000;}
#header .header-wrap .info-menu > li .btn-login .icon {position: absolute; top: 50%; left: 0; width: 30px; height: 30px; border-radius: 50%; background:#2B52A8 url(../images/common/i_login.svg) no-repeat center; transform: translateY(-50%);}
#header .header-wrap .info-menu > li.lang {position: absolute; top: 0; left: 0; width: 100px; height: 100%;}
#header .header-wrap .info-menu > li.lang .btn-lang {display: flex; width: 100%; height: 100%; align-items: center; background-color: #2B52A8;}
#header .header-wrap .info-menu > li.lang .btn-lang .b-con {display: block; position: relative; margin: 0 auto; padding-left: 25px; font-weight: 700; color: #fff;}
#header .header-wrap .info-menu > li.lang .btn-lang .b-con .icon {display:block; position: absolute; top: calc(50% - 10px); left: 0; width: 20px; height: 20px; background: url(../images/common/i_global.svg) no-repeat; background-position: center;}
/* interaction */
#header .header-wrap .info-menu > li .btn-login {transition: color 0.3s;}
#header .header-wrap .info-menu > li .btn-login:focus,
#header .header-wrap .info-menu > li .btn-login:hover {color: #2B52A8;}
#header .header-wrap .info-menu > li.lang .btn-lang {transition: background 0.3s;}
#header .header-wrap .info-menu > li.lang .btn-lang:focus,
#header .header-wrap .info-menu > li.lang .btn-lang:hover {background-color: #00ABFB}


#header .header-wrap .side-menu {position: absolute; top: 0; right: 0; width: 100px; height: 100%;}
#header .header-wrap .side-menu .btn-menu {display: flex; width: 100%; height: 100%; border: 0; background-color: #1F2D6C; cursor: pointer; align-items: center;}
#header .header-wrap .side-menu .btn-menu.btn-mobile {display: none;}
#header .header-wrap .side-menu .btn-menu .icon {display:block; position: relative; width: 30px; height: 22px; margin: 0 auto;}
#header .header-wrap .side-menu .btn-menu .icon .ln {position: absolute; left: 0; width: 100%; height: 2px; background-color: #fff;}
#header .header-wrap .side-menu .btn-menu .icon .ln.l1{top: 0;}
#header .header-wrap .side-menu .btn-menu .icon .ln.l2{top: calc(50% - 1px);}
#header .header-wrap .side-menu .btn-menu .icon .ln.l3{bottom: 0; width: 60%;}
/* interaction */
#header .header-wrap .side-menu .btn-menu {transition: background 0.3s;}
#header .header-wrap .side-menu .btn-menu:focus,
#header .header-wrap .side-menu .btn-menu:hover {background-color: #2B52A8;}
#header .header-wrap .side-menu .btn-menu .icon .ln.l3 {transition: width 0.3s;}
#header .header-wrap .side-menu .btn-menu:focus .icon .ln.l3,
#header .header-wrap .side-menu .btn-menu:hover .icon .ln.l3 {width: 100%;}

@media screen and (max-width: 1700px) {
    #header .header-wrap {padding-left: 20px; padding-right: 120px;}

    #header .header-wrap .info-menu > li {display: block; margin-right: 20px;}
    #header .header-wrap .info-menu > li:last-child {margin-right:0;}
    #header .header-wrap .info-menu > li.lang {position: static; top: auto; left: auto; width: auto; height: auto;}
    #header .header-wrap .info-menu > li.lang .btn-lang {background-color: transparent;}
    #header .header-wrap .info-menu > li.lang .btn-lang .b-con {height: 30px; padding-left: 35px; line-height: 30px; color: #000;}
    #header .header-wrap .info-menu > li.lang .btn-lang .b-con .icon {top: calc(50% - 15px); width: 30px; height: 30px; border-radius: 50%; background-color: #2B52A8; }
}
@media screen and (max-width: 1400px) {
    #header .header-wrap .gnb .gnb-menu > li {padding: 0 20px;}
    #header .header-wrap .gnb .gnb-menu > li .menu-01 {font-size: 1.0625rem;}
}
@media screen and (max-width: 1200px) {
    #header .header-wrap .gnb {display: none;}
}
@media screen and (max-width: 1024px) {
    #header .header-wrap {padding-left: 15px; padding-right: 115px;}

    #header .header-wrap .side-menu .btn-menu.btn-sitemap {display: none;}
    #header .header-wrap .side-menu .btn-menu.btn-mobile {display: block;}
}
@media screen and (max-width: 800px) {
    #header .header-wrap {height: 80px; padding-right: 100px;}
    #header .header-wrap .side-menu {width: 80px;}
}
@media screen and (max-width: 600px) {
    #header .header-wrap #logo {height: 35px;}
    
    
    #header .header-wrap .info-menu > li .btn-login {width:30px; font-size: 0; padding-left: 0;}
    #header .header-wrap .info-menu > li.lang .btn-lang .b-con {width:30px; font-size: 0; padding-left: 0;}
}
@media screen and (max-width: 375px) {
    #header .header-wrap {height: 60px; padding-right: 60px;}
    #header .header-wrap #logo {height: 30px;}

    #header .header-wrap .info-menu {display: none;}

    #header .header-wrap .side-menu {width: 60px;}
}




/* sitemap & mobile menu */
#menu-modal {visibility: hidden; position: fixed; top: 0; left: 0; z-index: 200; width: 100%; height: 100%; transition: visibility 0s 0.3s;}
#menu-modal.active {visibility: visible; transition: visibility 0s 0s;}
#menu-modal .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0); transition: background 0.3s;}
#menu-modal.active .bg {background-color: rgba(0,0,0,0.7);}

/* 닫기 버튼 */
#menu-modal .btn-close {display: flex; border: 0; font-size: 0; background-color: transparent; flex-wrap: nowrap; cursor: pointer;}
#menu-modal .btn-close .icon {display: block; position: relative; width: 30px; height: 30px;}
#menu-modal .btn-close .icon::before,
#menu-modal .btn-close .icon::after {content:""; position: absolute; top: 50%; left: 50%; width: 100%; height: 3px; border-radius: 1.5px; background-color: #343434;}
#menu-modal .btn-close .icon::before {transform: translate(-50%, -50%) rotate(45deg);}
#menu-modal .btn-close .icon::after {transform: translate(-50%, -50%) rotate(-45deg);}
/* interaction */
#menu-modal .btn-close .icon::before,
#menu-modal .btn-close .icon::after {transition: transform 0.3s;}
#menu-modal .btn-close:hover .icon::before {transform: translate(-50%, -50%) rotate(30deg)}
#menu-modal .btn-close:hover .icon::after {transform: translate(-50%, -50%) rotate(-30deg)}


/* sitemap */
#sitemap{overflow-y:auto;overflow-x:hidden;display: block;position: absolute;top:0;left:0;width:100%;height:100%;background-color:#fff;opacity: 0;visibility: hidden;transition: opacity 0.6s, visibility 0s 0.6s;}
#sitemap.active{opacity: 1; visibility:visible; transition: opacity 0.6s, visibility 0s 0s;}
#sitemap .con-head {display: block;}
#sitemap .con-head .h-wrap {display: flex; height: 60px; padding: 0 20px; align-items: center;}
#sitemap .con-head .h-wrap .logo {display: block;}
#sitemap .con-head .h-wrap .logo > a {display:block; height: 40px; }
#sitemap .con-head .h-wrap .logo > a > img {display:block; max-width: unset; width: auto; height:100%;}
#sitemap .con-head .h-wrap .btn-close {margin-left: auto;}
#sitemap .con-head .h-wrap .btn-close .icon {width: 40px; height: 40px;}
#sitemap .con-head .h-wrap .btn-close .icon::before,
#sitemap .con-head .h-wrap .btn-close .icon::after {height: 5px; border-radius: 2.5px;}
#sitemap .con-head .site-list {display: flex;}
#sitemap .con-head .site-list > li {display:block; flex-grow: 1; flex-basis: 0; border-right: 1px solid #00265b;}
#sitemap .con-head .site-list > li:last-child {border-right: 0;}
#sitemap .con-head .site-list > li .btn-site {display: block; height: 45px; line-height: 45px; font-weight: 500; font-size: 1.125rem; text-align: center; color: #fff; background-color: #1F2D6C;}

#sitemap .con-body {display: block; position: relative; overflow-x: hidden; overflow-y: auto; height: calc(100% - 105px); box-shadow: -3px 0 8px 0 rgba(0,0,0,0.2);}
#sitemap .con-body .sitemap-menu {display: flex; width: 100%; min-height: 100%;}
#sitemap .con-body .sitemap-menu > li {position:relative; flex-grow: 1; flex-basis: 0;}
#sitemap .con-body .sitemap-menu > li::before {content:""; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background-color: #e9e9e9;}
#sitemap .con-body .sitemap-menu > li:last-child::before {display: none;}
#sitemap .con-body .sitemap-menu > li .menu-01 {display:block; position:relative; height: 200px; padding: 40px 20px 20px 40px; background-color: #2B52A8;}
#sitemap .con-body .sitemap-menu > li .menu-01::before {content:""; position:absolute; top: 0; right: 0; width: 1px; height: 100%; background-color: #1F2D6C;}
#sitemap .con-body .sitemap-menu > li .menu-01::after {content:""; display: block; clear: both;}
#sitemap .con-body .sitemap-menu > li .menu-01 .num {float: left; line-height: 1; font-weight: 800; font-size: 50px; color: #1F2D6C;}
#sitemap .con-body .sitemap-menu > li .menu-01 .tit {float: left; margin-top: 55px; font-weight: 700; font-size: 1.6875rem; color: #fff;}
#sitemap .con-body .sitemap-menu > li .menu-02 {position:relative; padding: 30px 20px 20px 40px;}
#sitemap .con-body .sitemap-menu > li .menu-02 > li {margin-bottom: 10px;}
#sitemap .con-body .sitemap-menu > li .menu-02 > li:last-child {margin-bottom: 0;}
#sitemap .con-body .sitemap-menu > li .menu-02 > li > a {display: block; padding: 12px 0 12px; font-weight: 600; font-size: 1.125rem;}
#sitemap .con-body .sitemap-menu > li .menu-02 > li > a > span {display:block; position:relative; padding-left: 15px;}
#sitemap .con-body .sitemap-menu > li .menu-02 > li > a > span::before {content:""; position: absolute; top: calc(0.7rem - 2px); left: 0; width: 4px; height: 4px; border-radius: 50%; background-color: #00265b;}
#sitemap .con-body .sitemap-menu > li .menu-02 > li .menu-03 {padding-left: 15px;}
#sitemap .con-body .sitemap-menu > li .menu-02 > li .menu-03 > li {}
#sitemap .con-body .sitemap-menu > li .menu-02 > li .menu-03 > li > a {display: block; padding: 5px 0; color: #4e5b6f;}
#sitemap .con-body .sitemap-menu > li .menu-02 > li .menu-03 > li > a > span {display: block; position:relative; padding-left: 12px;}
#sitemap .con-body .sitemap-menu > li .menu-02 > li .menu-03 > li > a > span::before {content:""; position: absolute; top: 50%; left: 0; width: 5px; height: 1px; background-color: #4e5b6f;}


/* interaction */
#sitemap .con-head .site-list > li .btn-site {transition: background 0.3s;}
#sitemap .con-head .site-list > li .btn-site:focus,
#sitemap .con-head .site-list > li .btn-site:hover {background-color: #00265b;}

#sitemap .con-head {transform: translateY(-50px); transition: transform 0.6s;}
#sitemap.active .con-head {transform: translateY(0); transition: transform 0.4s;}
#sitemap .con-body .sitemap-menu > li {opacity: 0; transform: translateX(-50px); transition: opacity 0.3s, transform 0.3s;}
#sitemap.active .con-body .sitemap-menu > li {opacity: 1; transform: translateX(0);}
#sitemap.action .con-body .sitemap-menu > li {transition-delay: 0s !important;}

#sitemap .con-body .sitemap-menu > li .menu-02 > li > a {transition: color 0.3s;}
#sitemap .con-body .sitemap-menu > li .menu-02 > li > a:focus,
#sitemap .con-body .sitemap-menu > li .menu-02 > li > a:hover {color: #2B52A8;}
#sitemap .con-body .sitemap-menu > li .menu-02 > li > a > span::before {transition: background 0.3s;}
#sitemap .con-body .sitemap-menu > li .menu-02 > li > a:focus > span::before,
#sitemap .con-body .sitemap-menu > li .menu-02 > li > a:hover > span::before {background-color: #2B52A8;}
#sitemap .con-body .sitemap-menu > li .menu-02 > li .menu-03 > li > a {transition: color 0.3s;}
#sitemap .con-body .sitemap-menu > li .menu-02 > li .menu-03 > li > a:focus,
#sitemap .con-body .sitemap-menu > li .menu-02 > li .menu-03 > li > a:hover {color: #2B52A8;}
#sitemap .con-body .sitemap-menu > li .menu-02 > li .menu-03 > li > a > span::before {transition: background 0.3s;}
#sitemap .con-body .sitemap-menu > li .menu-02 > li .menu-03 > li > a:focus > span::before,
#sitemap .con-body .sitemap-menu > li .menu-02 > li .menu-03 > li > a:hover > span::before {background-color: #2B52A8;}


@media screen and (max-width:1500px){
    #sitemap .con-body .sitemap-menu > li .menu-01 {height: 160px; padding: 35px 20px 20px;}
    #sitemap .con-body .sitemap-menu > li .menu-01 .num {font-size: 35px;}
    #sitemap .con-body .sitemap-menu > li .menu-01 .tit {margin-top: 35px; font-size: 1.375rem;}
    #sitemap .con-body .sitemap-menu > li .menu-02 {padding: 20px;}
}
@media screen and (max-width:1200px){
    #sitemap .con-head .site-list > li .btn-site {font-size: 1.0625rem;}
    
    #sitemap .con-body .sitemap-menu > li .menu-01 {height: 140px; padding: 25px 15px;}
    #sitemap .con-body .sitemap-menu > li .menu-01 .num {font-size: 25px;}
    #sitemap .con-body .sitemap-menu > li .menu-01 .tit {margin-top: 28px; font-size: 1.25rem;}
    #sitemap .con-body .sitemap-menu > li .menu-02 {padding: 15px;}
    #sitemap .con-body .sitemap-menu > li .menu-02 > li {margin-bottom: 5px;}
    #sitemap .con-body .sitemap-menu > li .menu-02 > li > a {padding: 10px 0; font-size: 1.0625rem;}
    #sitemap .con-body .sitemap-menu > li .menu-02 > li > a > span {padding-left: 10px;}
    #sitemap .con-body .sitemap-menu > li .menu-02 > li .menu-03 {padding-left: 10px;}
}





#mobile{display: block;position: absolute;top:0;right:0;width:60%;height:100%;background-color:#fff;opacity: 0;visibility: hidden;transform: translateX(100%);transition: opacity 0.6s, visibility 0s 0.6s, transform 0.6s;}
#mobile.active{opacity: 1; visibility:visible; transform: translateX(0); transition: opacity 0.6s, visibility 0s 0s, transform 0.6s;}

#mobile .con-head {display: block;}
#mobile .con-head .h-box{display: flex; height: 50px; padding: 0 20px; background-color:#2B52A8; align-items: center;}
#mobile .con-head .h-box .logo {display:block;}
#mobile .con-head .h-box .logo > a {display: block; height: 30px;}
#mobile .con-head .h-box .logo > a > img{display:block; max-width: unset; width: auto; height: 100%;}
#mobile .con-head .info-btns {display: flex; margin-left: auto;}
#mobile .con-head .info-btns > li {margin-right: 10px;}
#mobile .con-head .info-btns > li:last-child {margin-right: 0;}
#mobile .con-head .info-btns > li .btn-info {display: block; position: relative; padding-left: 35px; line-height: 30px; font-weight:600; font-size: 1rem; color: #fff;}
#mobile .con-head .info-btns > li .btn-info.no {font-size: 0; padding-left: 30px;}
#mobile .con-head .info-btns > li .btn-info .icon {position: absolute; top: 0; left: 0; width: 30px; height: 30px; border: 2px solid #fff; border-radius: 50%; background-repeat: no-repeat; background-position: center;}
#mobile .con-head .info-btns > li .btn-info.login .icon {background-image: url(../images/common/i_login.svg);}
#mobile .con-head .h-box .btn-close {margin-left: 20px;}
#mobile .con-head .h-box .btn-close .icon::before,
#mobile .con-head .h-box .btn-close .icon::after {background-color: #fff;}

#mobile .con-head .lang-list {display:flex;padding:15px;border-bottom:1px solid #2B52A8;background-color:#fff;}
#mobile .con-head .lang-list > li{width:50%;}
#mobile .con-head .lang-list > li > a {display:block;height:35px;line-height:33px;padding: 0 10px;border:1px solid #cecece;font-weight:700;font-size:15px;color:#888;text-align: center;background-color: #fff;}
#mobile .con-head .lang-list > li > a.active{border:1px solid #00ABFB;color:#00ABFB;}

#mobile .con-body {display: block; position: relative; overflow-x: hidden; overflow-y: auto; height: calc(100% - 115px);}
#mobile .con-body::before {content:""; position: absolute; top: 0; left: 0; width: 180px; height: 100%; background-color: #efefef;}
#mobile .con-body .side-mobile{display:block;position:relative;}
#mobile .con-body .side-mobile > li {}
#mobile .con-body .side-mobile > li > .menu-01 {display:block; position:relative; z-index:9; width:180px; padding:20px 10px; border-bottom:1px solid #2B52A8; font-weight:600; font-size:1.125rem; color:#fff; text-align:center; word-break: break-all; background-color:#2B52A8;}
#mobile .con-body .side-mobile > li:last-child .menu-01 {border-bottom: 0;}
#mobile .con-body .side-mobile > li .menu-wrap{position:absolute;top:0;left:0;width:100%;padding-left:200px;padding-right:20px;opacity: 0;visibility: hidden;}
#mobile .con-body .side-mobile > li .menu-wrap .tit{display:block;}
#mobile .con-body .side-mobile > li .menu-wrap .tit span{display:inline-block;position:relative;padding:15px 0 20px 5px;font-size:20px;color:#262626;}
#mobile .con-body .side-mobile > li .menu-wrap .tit span:after{content:"";position: absolute;left:5px;bottom:15px;width:110%;height:2px;background-color:#262626;}

#mobile .con-body .side-mobile > li .menu-wrap .menu-02{display:block;}
#mobile .con-body .side-mobile > li .menu-wrap .menu-02 > li {border-bottom:1px solid #e9e9e9;transform: translateX(50%);opacity: 0;transition: all .5s;}
#mobile .con-body .side-mobile > li .menu-wrap .menu-02 > li > a {display:block; position:relative; padding:20px 50px 20px 15px; font-weight:600; font-size:16px; color:#292929; background-repeat: no-repeat;background-position:center right 20px;}
#mobile .con-body .side-mobile > li .menu-wrap .menu-02 > li > .menu-03 {display:none; padding:10px; border-top:1px solid #2B52A8; background-color:#f9fdff;}
#mobile .con-body .side-mobile > li .menu-wrap .menu-02 > li > .menu-03 > li{}
#mobile .con-body .side-mobile > li .menu-wrap .menu-02 > li > .menu-03 > li > a {display:block;position:relative; padding:10px; font-weight:500; font-size:15px; color:#292929;}
#mobile .con-body .side-mobile > li .menu-wrap .menu-02 > li > .menu-03 > li > a > span {display:block;position:relative; padding-left: 10px;}
#mobile .con-body .side-mobile > li .menu-wrap .menu-02 > li > .menu-03 > li > a > span::before {content:""; position:absolute; top: 8.25px; left:0; width:3px; height:3px; border-radius: 3px; background-color:#898da4;}

/* interaction */
#mobile .con-body .side-mobile > li .menu-01 {transition: color 0.3s, background 0.3s;}
#mobile .con-body .side-mobile > li.active .menu-01 {color:#2B52A8;background-color:#fff;}
#mobile .con-body .side-mobile > li.active .menu-wrap{opacity: 1;visibility: visible;}
#mobile .con-body .side-mobile > li.active .menu-wrap .menu-02 > li {transform: translateX(0); opacity: 1;}
#mobile .con-body .side-mobile > li.action .menu-wrap .menu-02 > li {transition-duration: 0s !important; transition-delay: 0s !important;}
#mobile .con-body .side-mobile > li .menu-wrap .menu-02 > li > a {transition: color 0.3s;}
#mobile .con-body .side-mobile > li .menu-wrap .menu-02 > li > a:focus,
#mobile .con-body .side-mobile > li .menu-wrap .menu-02 > li > a:hover {color: #2B52A8;}
#mobile .con-body .side-mobile > li .menu-wrap .menu-02 > li.find > a {background-image: url(../images/common/mo_menu_plus.png);}
#mobile .con-body .side-mobile > li .menu-wrap .menu-02 > li.open > a {color:#2B52A8;}
#mobile .con-body .side-mobile > li .menu-wrap .menu-02 > li.find.open > a {background-image: url(../images/common/mo_menu_minus.png);}

#mobile .con-body .side-mobile > li .menu-wrap .menu-02 > li > .menu-03 > li > a {transition: color 0.3s;}
#mobile .con-body .side-mobile > li .menu-wrap .menu-02 > li > .menu-03 > li > a:focus,
#mobile .con-body .side-mobile > li .menu-wrap .menu-02 > li > .menu-03 > li > a:hover {color:#2B52A8;}
#mobile .con-body .side-mobile > li .menu-wrap .menu-02 > li > .menu-03 > li > a > span::before {transition: background 0.3s;}
#mobile .con-body .side-mobile > li .menu-wrap .menu-02 > li > .menu-03 > li > a:focus > span::before,
#mobile .con-body .side-mobile > li .menu-wrap .menu-02 > li > .menu-03 > li > a:hover > span::before {background-color:#2B52A8;}
@media screen and (max-width:800px){
    #mobile{width:80%;}
}
@media screen and (max-width:600px){
    #mobile{width:100%;}
    #mobile .con-head .h-box {padding: 0 15px;}
    #mobile .con-body::before {width: 130px;}
    #mobile .con-body .side-mobile > li > .menu-01{width:130px; font-size: 14px;}
    #mobile .con-body .side-mobile > li .menu-wrap .menu-02 > li > a {padding: 20px 35px 20px 10px; font-size: 14px; background-position:center right 10px;}
    #mobile .con-body .side-mobile > li .menu-wrap .menu-02 > li > .menu-03 > li > a {padding: 8px 0; font-size: 14px;}
    #mobile .con-body .side-mobile > li .menu-wrap {padding-left:140px; padding-right:10px;}
}
@media screen and (max-width:425px){
    #mobile .con-head .h-box .btn-close {margin-left: 10px;}
    #mobile .con-head .info-btns > li .btn-info {font-size: 0; padding-left: 30px;}
}
@media screen and (max-width:320px){
    #mobile .con-body::before {width: 110px;}
    #mobile .con-body .side-mobile > li > .menu-01{width:110px;}
    #mobile .con-body .side-mobile > li .menu-wrap {padding-left:120px;}
}



#top {position: fixed; bottom: 50px; right: 50px; z-index: 10; border: 0; width: 50px; border-radius: 50px; background-color: #00ABFB;}
#top .icon {display: block; overflow: hidden; position: relative; height: 0;}
#top .icon::before {content:""; position: absolute; top: 20px; left: 19px; width: 10px; height: 10px; border-left: 2px solid #fff; border-top: 2px solid #fff; transform: rotate(45deg);}
#top .icon::after {content:""; position: absolute; top: 18px; left: 24px; width: 2px; height: 30px; background-color: #fff;}
#top .txt {display: block; height: 50px; margin: 0 auto; line-height:50px; font-weight: 700; font-size: 12px; color: #fff;}

#top .icon {opacity: 0; transition: height 0.4s, opacity 0.4s;}
#top:focus .icon,
#top:hover .icon {height: 50px; opacity: 1;}





/*footer*/
#footer{display: block; padding: 35px 0; background-color:#F4F7F9;}
#footer .footer-wrap{display: flex; padding: 0 100px;}
#footer .footer-wrap .foot-logo {display: block; padding-right: 150px;}
#footer .footer-wrap .foot-logo  a img {width:180px;}
#footer .footer-wrap .footer-con{display:flex; flex-grow: 1;}
#footer .footer-wrap .footer-con .con-wrap {display: block; padding-right: 30px;}
#footer .footer-wrap .footer-con .con-wrap .fnb {}
#footer .footer-wrap .footer-con .con-wrap .fnb .foot-menu{display: flex; margin:0 -15px; flex-wrap: wrap;}
#footer .footer-wrap .footer-con .con-wrap .fnb .foot-menu > li {margin-bottom: 20px; padding: 0 15px;}
#footer .footer-wrap .footer-con .con-wrap .fnb .foot-menu > li > a {display: block; font-size: 1rem; font-weight: 600; color: #000;}
#footer .footer-wrap .footer-con .con-wrap .fnb .foot-menu > li > a.em{color:#00ABFB;}
#footer .footer-wrap .footer-con .con-wrap .contact {display: flex; flex-wrap: wrap;}
#footer .footer-wrap .footer-con .con-wrap .contact .txt {margin-bottom: 10px; padding-right: 20px; font-weight: 600; font-size: 15px; color: #888888;}
#footer .footer-wrap .footer-con .con-wrap .contact .txt:last-child {padding-right: 0;}
#footer .footer-wrap .footer-con .con-wrap .copyright {font-weight: 600; font-size: 15px; color: #888888;}


#footer .footer-wrap .footer-con .site-wrap{display: flex; margin-left: auto;}
#footer .footer-wrap .footer-con .site-wrap .site-con {position: relative; width: 220px; height: 45px; margin-right: 10px;}
#footer .footer-wrap .footer-con .site-wrap .site-con:last-child {margin-right: 0;}
#footer .footer-wrap .footer-con .site-wrap .site-con .btn-site {display:block; position: relative; width:100%; height: 45px; padding: 0 45px 0 20px; border:0; line-height: 45px; text-align: left; color:#888888; background-color: #EAF0F3; cursor: pointer;}
#footer .footer-wrap .footer-con .site-wrap .site-con .btn-site::before {content:""; position: absolute; top: calc(50% - 7.5px); right: 15px; width: 15px; height: 15px; background: url(../images/common/i_up.svg) no-repeat center;}
#footer .footer-wrap .footer-con .site-wrap .site-con .btn-site > span {display: block; font-weight: 600; font-size: 15px; line-height:1;}

#footer .footer-wrap .footer-con .site-wrap .site-con .site-list {display:none; overflow-y: auto; position: absolute; bottom: 100%; left: 0; z-index: 50; width: 100%; max-height: 300px; border: 1px solid #e9e9e9; border-bottom: 0;}
#footer .footer-wrap .footer-con .site-wrap .site-con .site-list > li {display:block; border-bottom: 1px solid #ccc;}
#footer .footer-wrap .footer-con .site-wrap .site-con .site-list > li:last-child {border-bottom: 0;}
#footer .footer-wrap .footer-con .site-wrap .site-con .site-list > li > a {display:flex; min-height: 45px; padding: 5px 15px; color: #000; background-color: #fff; align-items: center;}
#footer .footer-wrap .footer-con .site-wrap .site-con .site-list > li > a > span {display: block; font-weight:500; font-size: 0.9375rem; line-height: 1; word-break: break-all;}

/* interaction */
#footer .footer-wrap .footer-con .site-wrap .site-con .btn-site {transition: color 0.3s, background 0.3s;}
#footer .footer-wrap .footer-con .site-wrap .site-con .btn-site.on {color: #1F2D6C; background-color: #00ABFB;}
#footer .footer-wrap .footer-con .site-wrap .site-con .btn-site.on::before {background-image: url(../images/common/i_up_on.svg); transform: scale(-1);}
#footer .footer-wrap .footer-con .site-wrap .site-con .site-list > li > a {transition: background 0.3s;}
#footer .footer-wrap .footer-con .site-wrap .site-con .site-list > li > a:focus,
#footer .footer-wrap .footer-con .site-wrap .site-con .site-list > li > a:hover {background-color: #ecf9ff;}


@media screen and (max-width:1700px) {
    #footer .footer-wrap {padding: 0 20px;}
    #footer .footer-wrap .foot-logo {padding-right: 50px;}
    
    #footer .footer-wrap .footer-con .con-wrap .fnb .foot-menu {margin: 0 -10px;}
    #footer .footer-wrap .footer-con .con-wrap .fnb .foot-menu > li {padding: 0 10px;}
}
@media screen and (max-width:1400px) {
    #footer {padding: 25px 0;}
    #footer .footer-wrap .footer-con {display: block;}
    #footer .footer-wrap .footer-con .site-wrap {margin-top: 20px;}
}
@media screen and (max-width:1024px) {
    #footer .footer-wrap {display: block; padding: 0 15px;}
    #footer .footer-wrap .foot-logo {margin-bottom: 15px; padding-right: 0;}
    
    #footer .footer-wrap .footer-con .con-wrap .fnb .foot-menu > li {margin-bottom: 10px;}
    
    #footer .footer-wrap .footer-con .site-wrap {margin-top: 15px;}
}
@media screen and (max-width:600px) {
    #footer .footer-wrap .footer-con .con-wrap .fnb .foot-menu {margin: 0 -5px;}
    #footer .footer-wrap .footer-con .con-wrap .fnb .foot-menu > li {padding: 0 5px;}

    #footer .footer-wrap .footer-con .site-wrap {display: block;}
    #footer .footer-wrap .footer-con .site-wrap .site-con {width: 100%; margin-right: 0; margin-bottom: 10px;}
    #footer .footer-wrap .footer-con .site-wrap .site-con:last-child {margin-bottom: 0;}
}