﻿@import url('http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css');

@font-face {
    font-family: 'NanumBarunGothic';
    src: url(webfont/NanumBarunGothic/NanumBarunGothicWeb.eot);
    src: url(webfont/NanumBarunGothic/NanumBarunGothicWeb.eot?#iefix) format('embedded-opentype'), url(webfont/NanumBarunGothic/NanumBarunGothicWeb.woff) format('woff'), url(webfont/NanumBarunGothic/NanumBarunGothicWeb.ttf) format('truetype');
}

@font-face {
    font-family: 'NanumSquare';
    src: url(webfont/NanumSquare/NanumSquareR.eot);
    src: url(webfont/NanumSquare/NanumSquareR.eot?#iefix) format('embedded-opentype'), url(webfont/NanumSquare/NanumSquareR.woff) format('woff'), url(webfont/NanumSquare/NanumSquareR.ttf) format('truetype');
}


/* font select */
#my-menu {display: none;}
body * {
    font-family: NanumSquare, sans-serif;
    letter-spacing: -0.5px;
}

.black {background-color: rgba(0,0,0,1)!important;}

/* header */
.valign { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;}
.navbar-default .navbar-collapse, .navbar-default .navbar-form{text-align: center;position: relative;overflow: hidden;}

/* gnb */
#navbar .container { position: relative; }
#gnb {text-align: center; margin-top: 25px;display: inline-block;position: relative; left: -5%;}
.navbar-default {transition: all ease 0.8s;margin: 0;position: fixed;width: 100%;background: none; border: none;}
#gnb-wrap.positive {position: relative; background: #000;}
.navbar-default #all-menu{ float:right; margin:50px 0px 0px 55px;}
.navbar-default >.container >a:nth-child(1) > img { float:left; margin: 15px 0px;}
.navbar-default >.container > .top-href-btn{position: absolute;top: 45%;right: 14%;
transform: translateY(-50%);}
.navbar-default > #navbar > .top-href-btn .live-btn{text-decoration:none;}
#gnb > li { display:inline-block;font-size:20px; outline:none;position:relative;}
#gnb > li > a {font-size: 18px;color: #fff; text-decoration: none;transition: all ease 0.2s;display: inline-block;padding: 0px 25px 25px;}
#gnb > li > .dropdown-menu {margin: 0; padding: 0; border-radius: 0; width:160px; left:50%; margin-left:-80px; background:rgba(255,255,255,0.8); top:100%;}
#gnb > li > .dropdown-menu > li{position:relative;}
#gnb > li > .dropdown-menu > li > .dropdown-menu{margin: 0;padding: 0;border-radius: 0;width: 220px;left: 235px;
top: 0;margin-left: -80px;background: rgba(255,255,255,0.8);}
#gnb > li > ul > li > a {font-size: 17px; padding: 10px; color:#000;text-decoration: none; }
#gnb > li > ul > li.active > a,
#gnb > li > ul > li > a:hover {background:rgba(255,255,255,1)!important; font-weight:bold; }
#gnb > li > ul > li > ul > li > a {font-size: 15px; padding: 10px; color:#000;text-decoration: none; }
#gnb > li > ul > li > ul > li.active > a,
#gnb > li > ul > li > ul > li > a:hover {background:rgba(255,255,255,1)!important; font-weight:bold; }
#gnb > li:hover > ul {display: block; }
#gnb > li:hover > a{font-weight:bold;}
#gnb > li:hover > ul > li:hover > ul {display: block; }
#gnb-wrap2{background-color: rgba(0,0,0,0.5)!important;}
.container-fluid { width: 1200px;}
/* gnb2 */
.gnb2 {background: #0a3c8a; width:100%; height:0px; position:absolute;left:0px; z-index:9999;}
.gnb2 .container { padding:20px 0px 0px; text-align:right;}
.subtext-wrap { float:left;  padding:0px; display:none; width:220px; text-align:center; margin-right:30px;}
.subtext { display:inline-block; }
.subtext p { color:#333333;}
.subtext p:first-child { font-size:14px; margin-bottom:0px; display:none; }
.subtext p:nth-child(2) { font-size:30px; color:#fff; font-weight:bold;}
.subtext img { display:inherit; position:relative; float:none!important; margin:20px auto; }
.subul > li { display:inline-block; width:150px; text-align:center;margin:0px 20px 0px 0px;}
.subul > li:last-child { margin-right:0px; }
.subul > li > a { font-size:18px; font-weight:600;}
.subul > li > a > i { float:right; position:relative; top:3px; }
.subul > li > ul { margin-top:15px; }
.subul > li > ul > li { font-size:13px; transition:all ease 0.3s;height: 29px;margin-top:1px; }
.subul > li > ul > li:hover { background-color:#1f4346;}
.subul > li > ul > li > a { padding: 5px 7px;border-bottom: 1px solid #fff;display: inline-block;overflow: hidden; width: 100%;text-overflow: ellipsis; white-space: nowrap; }
.subul > li > ul > li > a > i { margin-right:5px; position:relative; }
.subul li a { color: #fff; text-decoration:none; }

/*logo*/
.logo-wrap{position: absolute; top: 50%; left: 0%; transform: translateY(-50%);}
.top-href-btn{position: absolute;top: 50%;right: 2%;transform: translateY(-50%);}
.top-right-btn{position: absolute;top: 50%;right: 10%;transform: translateY(-50%);}
.top-right-btn a{color:#fff; text-decoration:none;font-size: 17px;}
.top-right-btn span{margin: 0 10px;color: #fff;font-size: 17px;}

.subtop-bottom{background-color: rgba(145, 170, 146, 1);position: relative;bottom: 0;width: 100%;}
.subtop-bottom .subtop-menu ul{text-align:center;}
.subtop-bottom .subtop-menu ul li{display:inline-block;}
.subtop-bottom .subtop-menu ul li a{display: inline-block;padding: 22px 15px 13px;font-size: 17px;text-decoration: none;color: #fff;position: relative;}
.subtop-bottom .subtop-menu ul li a .btn-plus{position: absolute;top: 10%;left: 45%;background: #317d34;width: 10px;height: 10px;border-radius: 50%;
text-align: center;opacity: 0;transition: all .3s linear;}
.subtop-bottom .subtop-menu ul li a:hover .btn-plus,
.subtop-bottom .subtop-menu ul li.active a .btn-plus,
.subtop-bottom .subtop-menu ul li a:focus .btn-plus{opacity:1;}


/* footer */

#footer { padding: 35px 10px; position: relative;}
#footer .foot-1{position:relative;}
#footer .foot-1 .footer-login{position:absolute;right:20%;top:20%;}
#footer .foot-1 .footer-login a{padding: 5px;margin: 0 5px;font-size: 17px;
color: #fff;text-decoration: none;background-color: #555;}
#footer .foot-1 img {margin-bottom: 15px;}
#footer .sns {display: flex; justify-content: flex-end;}
#footer .sns .snsB {display:flex; grid-gap: 10px;}
#footer .foot-1 ul li {
        color: #7F7F7F;
        font-size: 18px;
        line-height: 1.8;

    }
.foot-1 .footM .footL a {
    color: #7F7F7F;
    text-decoration: none;
}
    .foot-1 .footM .footL a:hover,
    .foot-1 .footM .footL a:focus {
        text-decoration: none;
    }
    .foot-1 .footM .footR li {
        float: left;
        width: 20%;
    }

#footer .foot-2 .foot-2-1 {
    display: inline-block;
    float: left;
    border-right: 1px solid #ccc;
}

        #footer .foot-2 .foot-2-1 .footer-table {
            border: none;
        }

.foot-2 > .foot-2-1 > .footer-table > tbody > tr > td:nth-child(1) {
    color: #fff !important;
    font-weight: bold;
}

#footer .foot-2 .foot-2-1 .footer-table tbody tr {
}

    #footer .foot-2 .foot-2-1 .footer-table tbody tr td {
        color: #848484;
        padding: 5px 10px;
        font-size: 15px;
        letter-spacing: 1px;
    }

#footer .foot-2 .foot-2-2 {
    display: inline-block;
    float: right;
}

    #footer .foot-2 .foot-2-2 .footer-table {
        border: none;
    }

.foot-2 > .foot-2-2 > .footer-table > tbody > tr > td:nth-child(1) {
    color: #fff !important;
    font-weight: bold;
}

#footer .foot-2 .foot-2-2 .footer-table tbody tr {
}

    #footer .foot-2 .foot-2-2 .footer-table tbody tr td {
        color: #848484;
        padding: 5px 10px;
        font-size: 15px;
        letter-spacing: 1px;
    }

#81
#subtop .subtop-bottom {
    background-color: rgba(255,255,255,1);
    height: 78px;
    position: relative;
    bottom: 0;
    width: 100%;
    border-bottom: 1px solid #333;

}


#84
.subtop-bottom .subtop-menu ul li a {
    display: inline-block;
    padding: 35px 22px 25px;
    font-size: 17px;
    text-decoration: none;
    color: #333;
    position: relative;
}
.mm-listview > li, .mm-listview > li .mm-next, .mm-listview > li .mm-next:before, .mm-listview > li:after {
    color: #fff !important;
}
.subtop-bottom .subtop-menu ul li a .btn-plus {
    position: absolute;
    top: 25%;
    left: 45%;
    background: #326ca6;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    text-align: center;
    opacity: 0;
    transition: all .3s linear;
}

/* mobile */
.header-mobile-gnb .toggle{ color:#fff !important;}
#my-menu{ background-color:rgba(0,0,0,.3); max-width:240px; }
#mm-0:before { height:0!important; }
#mm-1 > ul > li:hover > a.mma1 { color: #34b4c7 !important; }
.mm-btn {top:unset!important;}
.mm-menu .mm-listview>li .mm-next:after { border-color:#fff !important; }
.mm-navbar { display:none!important; }
.mm-panels>.mm-panel>.mm-listview { margin:0px!important;}
.mm-panels>.mm-panel.mm-hasnavbar { padding-top:0!important; }
.mm-panels > .mm-panel { padding:0; }
.mm-panels, .mm-panels>.mm-panel { z-index:9999; }
.mm-listview { margin:0; }
.mm-listview > li > a, .mm-listview > li > span { padding: 10px 10px 10px 20px; margin: 0; }
.mm-listview .mm-vertical .mm-panel, .mm-vertical .mm-listview .mm-panel { padding:0 0 0 10px; }
.mm-listview>li>a, .mm-listview>li>span { padding:10px 20px!important; font-size:17px; }
.mob-login { overflow:hidden; padding:15px 0; border-bottom:1px solid #808080; margin-bottom:10px; }
.mob-login li { float:right; overflow:hidden; }
.mob-login a { display: inline-block !important; font-size: 17px !important; border: 0px !important; box-shadow: none !important; color: #aaa !important; padding: 0px 10px !important; }
.mob-login a .fa { font-size:20px!important; }
.mmenu-depth1 > a{ color:#fff!important; }
.mmenu-depth2 > a{ color:#E4E3B9!important; }
.mmenu-depth3 > a{ color:#B4EBF1!important; }
a.mm-next{width:100%!important;}
/* all-menu */

.gnb-all { display: none; position: fixed; z-index: 9999; background: rgba(0, 0, 0, 0.5); top: 0; left: 0; width: 100%; height: 100%; text-align:center;}
.gnb-all a {color:#fff; text-decoration:none;}
.gnb-all img {margin:80px 0px 50px; max-width:185px; }
.gnb-all .all-wrapper .all-close { color: #fff; cursor: pointer; font-weight: 600; font-size: 5em; float:right; }
.gnb-all .all-wrapper .container a { display: block; color: #fff; }
.gnb-all .all-wrapper .container > ul > li { display: inline-block; vertical-align: top; padding:0px 24px;}
.gnb-all .all-wrapper .container > ul > li > a { margin:0px 0px 18px; font-size: 25px; font-weight: 600; text-decoration:none;}
.gnb-all .all-wrapper .container > ul > li:first-child { display: none; }
.gnb-all .all-wrapper .container > ul > li > ul > li > a { color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:20px; padding:6px 0px;}
.gnb-all .all-wrapper .container > ul > li > ul > li > a:hover { font-weight:bold; transition:0.2s all ease;}
.gnb-all .all-wrapper .container > ul > li > ul > li > ul > li > a { color: #fff; display: block; margin-bottom: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:16px;}

#my-menu{z-index:999999}
.foot-1 hr{width:2%;display:block;float:left;}
.foot-1 .footM{width:100%; display:inline-block;}
.foot-1 .footM .footL{width:100%; float:left; text-align:center;}
.foot-1 .footM .footR{width:20%; float:left; text-align:left;}
.foot-1 .footM .footR li a{color:#fff; text-decoration:none;}
.footer_dark {
    background: #000;
    color: #fff;
    padding: 15px;
    font-size:16px;
}
.slider .slider-wrapper .slide p img {
    width: 100%;
}
 
@media (min-width:1410px){ .container{width:1340px;}}
@media(min-width:1200px) and (max-width:1499px) {
    .logo-wrap{left: 0%; max-width: 200px;}
    #gnb > li > a{padding: 0px 25px 33px;}
    .top-right-btn{right: 7%;}
}

.Search-Box { padding: 22px 0; right: 58px; width: 150px; margin-right: 0px; position: absolute; top: 50%; right: 15%; transform: translateY(-50%);}
.mobile_nav_bar {display: none;}
.Search-Box .input-group { border: 1px solid #ddd; width: auto;}
.input-group .input-group-addon {    border-radius: 0; background: #00A0A8; color: #fff; border: 0;}


@media (min-width:993px) and (max-width:1199px) {
.header-mobile-gnb {display: block !important; float: right; margin: 15px 25px; font-size: 40px;}
#navbar { height: 90px !important;}
#gnb {display: none;}
.mobile_nav_bar > a > span { font-size: 20px; letter-spacing: -0.025em; line-height: 1;}
.mobile_nav_bar a i:after {content: '';  display: inline-block; vertical-align: top; font-size: 1.8rem; color: #fff; font-style: normal;}
.mobile_nav_bar a.menu i:after { content: '\e92d';}
.mobile_nav_bar a i {display: block; margin-bottom: 0.7rem;}
/*.mobile_nav_bar.fixedup{bottom: 0; }*/
.mobile_nav_bar.fixeddown{bottom: -100px; }
.mobile_nav_bar { bottom: 0; position: fixed; display: flex; width: 100%; aspect-ratio: 762 / 100; background: #00A0A8; font-size: 0; z-index: 550; -webkit-transition: bottom 300ms; transition: bottom 300ms; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);}
.mobile_nav_bar a {position:relative; width: 20%;  height: 100%; text-align: center; color: #fff;  grid-gap: 10px;  display: flex; flex-direction: column; justify-content: center; align-items: center; }
.mobile_nav_bar a img {  width: 40px;}
.mobile_nav_bar a:hover {text-decoration: none;}
.mobile_nav_bar a:active {text-decoration: none;}
    .logo-wrap{left: 2%; max-width: 150px;}
    #gnb{margin-top: 40px;}
    #gnb > li > a{padding: 0px 10px 42px; font-size:17px;}
    .top-right-btn{ display: none;}
    .top-href-btn {display: none;}
    .gnb-all .all-wrapper .container > ul > li > a{font-size:20px;}
    .gnb-all .all-wrapper .container > ul > li > ul > li > a{font-size:17px;}
    #subtop .subtop-bottom{height:inherit;}
}

.mm-menu .mm-listview > li .mm-next:after {
    border-color: #fff !important;
} 

@media (min-width:768px) and (max-width:992px) {
.Search-Box { padding: 22px 0; right: 100px; width: 150px; margin-right: 0px;}
.mobile_nav_bar > a > span { font-size: 20px; letter-spacing: -0.025em; line-height: 1;}
.mobile_nav_bar a i:after {content: '';  display: inline-block; vertical-align: top; font-size: 1.8rem; color: #fff; font-style: normal;}
.mobile_nav_bar a.menu i:after { content: '\e92d';}
.mobile_nav_bar a i {display: block; margin-bottom: 0.7rem;}
/*.mobile_nav_bar.fixedup{bottom: 0; }*/
.mobile_nav_bar.fixeddown{bottom: -100px; }
.mobile_nav_bar {bottom: 0; position: fixed; display: flex; width: 100%; aspect-ratio: 762 / 100; background: #00A0A8; font-size: 0; z-index: 550; -webkit-transition: bottom 300ms; transition: bottom 300ms; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);}
.mobile_nav_bar a {position:relative; width: 20%;  height: 100%; text-align: center; color: #fff;  grid-gap: 10px;  display: flex; flex-direction: column; justify-content: center; align-items: center; }
.mobile_nav_bar a img {  width: 40px;}
.mobile_nav_bar a:hover {text-decoration: none;}
.mobile_nav_bar a:hover {text-decoration: none;}
.mobile_nav_bar a:active {text-decoration: none;}
    #main-8 {
        padding: 20px 0;
    }
    #main-9 {
        padding: 20px 0;
    }
    .logo-wrap {
        left: 2%;
        max-width: 180px;
    }
    #navbar{height:90px!important;}

    .top-right-btn{right: 7%;}
    .header-mobile-gnb{float: right;margin: 15px 25px;font-size: 40px; right:30px;}
    #subtop .subtop-bottom{height:inherit;}
}

@media (max-width:767px) {
.Search-Box { padding: 22px 0; right: 58px; width: 150px; margin-right: 0px;}
.mobile_nav_bar > a > span { font-size: 16px; letter-spacing: -0.025em; line-height: 1;}
.mobile_nav_bar a i:after {content: '';  display: inline-block; vertical-align: top; font-size: 1.8rem; color: #fff; font-style: normal;}
.mobile_nav_bar a.menu i:after { content: '\e92d';}
.mobile_nav_bar a i {display: block; margin-bottom: 0.7rem;}
/*.mobile_nav_bar.fixedup{bottom: 0; }*/
.mobile_nav_bar.fixeddown{bottom: -100px; }
.mobile_nav_bar {bottom: 0; position: fixed; display: flex; width: 100%; aspect-ratio: 762 / 100; background: #00A0A8; font-size: 0; z-index: 550; -webkit-transition: bottom 300ms; transition: bottom 300ms; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);}
.mobile_nav_bar a {position:relative; width: 20%;  height: 100%; text-align: center; color: #fff; grid-gap: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.mobile_nav_bar a img { width: 40px;}
.mobile_nav_bar a:hover {text-decoration: none;}
.mobile_nav_bar a:active {text-decoration: none;}
    .logo-wrap {top: 45%;}
    #footer {padding: 20px 10px;}

    #subtop img {
	aspect-ratio:1905/400;
    }
    #unit9981 > p {
        width: 60% !important;
        margin: 0 auto;
    }
    #unit2225 span {
        word-break: keep-all !important;
    }
    #unit2225 p {
        word-break: keep-all !important;
    }
    #footer .foot-1 ul li {
        word-break: keep-all;

    }

    #subtop .subtop-bottom {
        height: inherit;
    }
 .subtop-bottom .subtop-menu ul li a{padding: 15px 5px 5px;}
 .subtop-bottom .subtop-menu ul li a .btn-plus{top:15%;}
    .logo-wrap{left: 2%; max-width: 130px;}
    #navbar{height:59px!important; display: block;}
    .top-right-btn{right: 7%;}
    .header-mobile-gnb{float: right;margin: 12px 10px;font-size: 25px;}
    .foot-1 .footM .footL{width:100%; float:left; text-align:left;}
    .foot-1 .footM .footR{width:100%; float:left; text-align:left;}
}

@media (max-width:1199px) {

    #footer .foot-1 ul li {font-size: 16px;}
}
@media (max-width:500px) {
    .mobile_nav_bar {aspect-ratio: 548 / 100; }
    .mobile_nav_bar a img {width: 30px;}
}