﻿@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 */

body * {
    font-family: NanumSquare, sans-serif;
    letter-spacing: -0.5px;
}

/* header */

#header {
    display: inline-block;
    height: 100px;
    padding: 0px 30px;
    position: absolute;
    top: 0px;
    right: 8%;
}

    #header a {
        color: #fff;
        text-decoration: none;
    }

    #header .header-box-left {
        float: left;
        font-size: 15px;
        padding: 20px 0px;
    }

    #header .header-box-right {
        float: right;
        font-size: 18px;
    }

    #header .header-box-left span {
        padding: 0px 15px;
        color: #adadad;
        font-weight: bold;
    }

    #header .header-box-right a {
        padding: 50px 20px;
        display: inline-block;
        font-weight: normal;
    }

        #header .header-box-right a:hover {
            font-weight: bold;
            transition: 0.3s all ease;
        }

        #header .header-box-right a.live-btn img {
            margin-right: 10px;
            position: relative;
            top: -1px;
        }

/* gnb */
#gnb-wrap {background-color:#3E2923;
position: relative;z-index: 1;
border-bottom: 1px solid #42241b;
box-shadow: 0 4px 4px -4px #3e2a21;
}

#gnb{float: left;text-align: center;position: relative;padding: 50px 10px;width: 70%; left: 15%;display: flex!important;
flex-direction: row;justify-content: space-around;align-items: flex-end;}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {background-color: transparent;text-align: center;position: relative;overflow: hidden;}
#gnb > li {float: left;position: relative;outline: none;}
#gnb>li>a{font-size: 18px;color: #fff;text-decoration: none;transition: all ease 0.2s; font-weight:bold;}
#gnb>li>a.active{font-weight:bold;}
.navbar .all-menu{display: inline-block;float: right;padding: 25px 0; float:right;}
.navbar .all-menu a img{margin-left: 5px;bottom: 3px;position: relative;}
#gnb > li > ul{display:none;}
.navbar>a{float:left;}

/*gnb2*/
.gnb2{background: #fff;width: 100%;position: absolute;left: 0px;z-index: 9999;top: 120px;height: 0px;overflow: hidden;
      box-shadow: 0 5px 4px -4px #3E2924;}
.subul{float: left;margin-top: 50px;width: 63%;margin-bottom: 35px;}
.subul > li{float: left;width: 190px;margin-right: 30px;margin-bottom: 35px;}
.subul li a{color: #000; text-decoration: none;}
.subul > li > a{font-size: 16px; font-weight: 600;}
.subul > li > ul{margin-top: 5px; display:none;}
.subul > li:hover > ul,.subul > li:focus > ul{display:block;}
.subul > li > ul > li{font-size: 13px;transition: all ease 0.3s;height: 29px;margin-top: 1px;}
.subul > li > ul > li > a{padding: 5px 7px;border-bottom: 1px solid #9ED9E7;display: inline-block;overflow: hidden;width: 100%;text-overflow: ellipsis;white-space: nowrap;}
.subul > li > a > i { float:right; position:relative; top:5px; }
.subtext-wrap{float: left;margin-top: 50px;display: none;width: 35%;}
.subtext{display:inline-block;}
.subtext p:first-child{font-size: 14px;margin-bottom: 0px;display: none;}
.subtext p:nth-child(2){font-size: 36px; font-family: NanumBarunGothic; text-align:center;}
.subtext p {color: #000;text-align: left;}
.subtext img {display: block;position: relative;float: none !important;margin: 0 auto;}

#subtop .subtop-bottom{background-color: rgba(62,41,35,1);height: 90px;position: relative;bottom: 0;width: 100%;}
#subtop .subtop-bottom .subtop-menu ul{text-align:center;}
#subtop .subtop-bottom .subtop-menu ul li{display:inline-block;}
#subtop .subtop-bottom .subtop-menu ul li a{display: inline-block;padding: 43px 22px 25px;font-size: 17px;text-decoration: none;color: #fff;position: relative; word-break:keep-all;}
#subtop .subtop-bottom .subtop-menu ul li a .btn-plus{position: absolute;top: 25%;left: 45%;background:#FA9B00;width: 10px;height: 10px;border-radius: 50%;
text-align: center;opacity: 0;transition: all .3s linear;}
#subtop .subtop-bottom .subtop-menu ul li a:hover .btn-plus,
#subtop .subtop-bottom .subtop-menu ul li.active a .btn-plus,
#subtop .subtop-bottom .subtop-menu ul li a:focus .btn-plus{opacity:1;}

/*logo*/
.logo-wrap {
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
}
/* footer */

#footer {
    background: #291110;
    padding: 25px 0px;
    position: relative;
}
#footer .foot-1{position:relative; text-align:center;}
#footer .foot-1 img {
    margin-bottom: 15px;
}

#footer .foot-2 ul li {
    color: #fff;
    font-size: 15px;
    line-height: 1.8;
}


/* mobile */
/* mobile */
.header-mobile-gnb .toggle {color:#fff!important;}
#my-menu{background-color: transparent;}
#mm-blocker{background-color: transparent!important;}
.mm-panels > #mm-1 {background-color:rgba(0,0,0,0.7)!important; }
.mm-panels > #mm-2,
.mm-panels > #mm-3,
.mm-panels > #mm-4,
.mm-panels > #mm-5,
.mm-panels > #mm-6,
.mm-panels > #mm-7,
.mm-panels > #mm-8,
.mm-panels > #mm-9,
.mm-panels > #mm-10,
.mm-panels > #mm-11,
.mm-panels > #mm-12,
.mm-panels > #mm-13,
.mm-panels > #mm-14,
.mm-panels > #mm-15,
.mm-panels > #mm-16,
.mm-panels > #mm-17,
.mm-panels > #mm-18,
.mm-panels > #mm-19,
.mm-panels > #mm-20,
.mm-panels > #mm-21,
.mm-panels > #mm-22,
.mm-panels > #mm-23,
.mm-panels > #mm-24,
.mm-panels > #mm-25,
.mm-panels > #mm-26,
.mm-panels > #mm-27,
.mm-panels > #mm-28,
.mm-panels > #mm-29,
.mm-panels > #mm-30,
.mm-panels > #mm-31 {background-color:rgba(0,0,0,0.7)!important; }
.mm-navbar { padding:20px 0px!important; height:inherit!important;}
.mm-navbar a { font-size:22px; color:#fff!important;}
.mm-listview>li>a, .mm-listview>li>span { padding:20px 25px!important; font-size:17px;}
.mm-panels>.mm-panel>.mm-listview { margin:20px 0px!important;}
.mm-btn {top:unset!important;}
.mm-navbar > .mm-title{display:none;}
.mm-navbar > .mm-logo{max-width: 200px; margin: 0 auto;}
.mm-menu .mm-btn:after, .mm-menu .mm-btn:before,
.mm-menu .mm-listview>li .mm-next:after{border-color: rgba(255,255,255,.8)!important;}

.mob-login { overflow:hidden; padding:15px 0; 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; }

.container-fluid {
    width: 1200px;
}
#my-menu{z-index:999999}
@media (min-width:1450px) {
    .container {width: 1450px;}
}
@media(min-width:1200px) and (max-width:1499px) {
    .logo-wrap{left: 2%;}
    #header{right:0%;}
    #gnb{width: 60%; left: 20%;}
}

@media (min-width:993px) and (max-width:1199px) {
    .container-fluid{width:inherit;}
    .logo-wrap{left: 2%;}
    .logo-wrap img{max-width:120px;}
    #header{right:0%;}
    #gnb{width: 65%; left: 13%;}
    #subtop .subtop-bottom{height:inherit;}
    #subtop .subtop-bottom .subtop-menu ul li{width:20%;}
}

@media (min-width:768px) and (max-width:992px) {
    #gnb-wrap{height:125px;}
    #gnb-wrap .header-mobile-gnb .toggle{font-size: 50px;color: #fff!important;float: right;padding: 25px 30px;}
    #header{right:15%;}
    .container-fluid{width:inherit;}
    #gnb{display:none!important;}
    .mm-navbar{padding:0!important;}
    .mm-logo{max-width:125px!important;}
    .mm-panels>.mm-panel>.mm-listview{margin-top:100px!important;}
    #subtop .subtop-bottom{height:inherit;}
    #subtop .subtop-bottom .subtop-menu ul li{width:24%;}
    #subtop .subtop-img .sub-desc p{font-size:34px!important;}
}

@media (max-width:767px) {
    .mm-panels>.mm-panel>.mm-listview{margin-top:100px!important;}
    .logo-wrap{max-width:140px!important;}
    #footer{padding: 20px 0px;}
    #footer .foot-2{padding:5px!important;}
    #footer .foot-2 ul li{font-size:15px;}
    #gnb-wrap{height:75px;}
    #gnb-wrap .header-mobile-gnb .toggle{font-size: 30px;color: #fff!important;float: right;padding: 15px 30px;}
    #header{right:15%;}
    .container-fluid{width:inherit;}
    #gnb{display:none!important;}
    #subtop .subtop-bottom{height:inherit;}
    #subtop .subtop-bottom .subtop-menu ul li{width:24%;}
    #subtop .subtop-bottom .subtop-menu ul li a{padding: 30px 5px 10px;font-size: 15px!important;}
    #subtop .subtop-bottom .subtop-menu ul li a .btn-plus{top: 15%;}
    #subtop .subtop-img .sub-desc p{font-size:20px!important;}
}


