z`@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 100;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 300;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 700;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 900;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');
}

@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');
}
#dimodeBoard{
	margin-bottom:100px;
}
#dimodeBoard.board-detail .files-in-detail {
    display: none !important;
}
.board-theme .theme-detail .detail-content img{
	max-width:100%!important;
}
.comments-in-detail {
    display: none !important;
}

.top-btn {
    position: fixed;
    right: 5%;
    bottom: 2%;
    z-index: 999;
    display: none;
    cursor: pointer;
}

/*gnb-all*/

.gnb-all {
    display: none;
    position: absolute;
    z-index: 9999;
    top: 120px;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}

    .gnb-all a {
        color: #fff;
        text-decoration: none;
    }

.wrap-depth {
    position: absolute;
    background: #fff;
    width: 100%;
    height: 0;
    overflow: hidden;
    left: 0;
    top: 120px;
    z-index: 99;
    border-bottom: 3px solid #0080C7;
}

    .wrap-depth > .wrap-container {
        width: 1170px;
        margin: 0 auto;
    }

    .wrap-depth .wrap-container > ul {
        margin-left: 100px;
        display: flex;
        justify-content: flex-end;
    }

        .wrap-depth .wrap-container > ul > li {
            vertical-align: top;
        }

        .wrap-depth .wrap-container > ul > li {
            height: 380px;
            line-height: 1.42857143;
            margin: 0 -2px;
            width: 20%;
        }

.depth2 {
    padding-bottom: 10px;
    vertical-align: top;
    padding: 15px 20px;
    border-top: 3px solid transparent;
    cursor: pointer;
}

.wrap-depth .wrap-container > ul > li > ul > li > a {
    color: #000;
    font-weight: bold;
}

.depth2 > li a.depth2-normal:hover {
    color: #0080C7;
    transition: .2s all;
    font-weight: bold;
}

.depth3 > li a:hover, .depth2 > li a:hover {
    color: #fff;
    transition: .2s all;
    font-weight: bold;
}

.depth3 > li a {
    text-decoration: none;
    display: inline-block;
    width: 100%;
    padding: 5px 0;
    font-size: 16px;
    font-weight: normal;
}



.depth2 li a {
    text-decoration: none;
    display: inline-block;
    width: 100%;
    padding: 5px 0;
    font-size: 17px;
}



.depth3 > li > a {
    font-size: 16px;
}



/* body * { font-family: 'Noto Sans KR',sans-serif; } */
body {
    font-family: NanumSquare, sans-serif;
}

.lato {
    font-family: 'Lato', sans-serif;
}

.header-left {
    margin-left: 60px;
}
.header-left img { max-width:200px;}
.navbar-brand>img { max-width:150px;}
.header-login {
    margin-right: 45px;
}

    .header-login a {
        color: #000;
        font-size: 14px;
        text-decoration: none;
    }

    .header-login > span {
        padding: 0 10px;
        display: inline-block;
    }

.header-gnb {
    height: inherit;
}

#gnb {
    display: inline-flex;
    height: inherit;
}

    #gnb > li {
        width: 160px;
        position: relative;
        text-align: center;
        outline:none;
    }

        #gnb > li > ul.depth2 {
            opacity: 0;
            display: none;
        }

            #gnb > li > ul.depth2.active {
                display: block;
                position: relative;
                top: 10px;
                left: 50%;
                transform: translateX(-50%);
                background: #1687c9f0;
                padding: 10px 15px;
                width: 180px;
                line-height: normal;
                z-index: 9;
                overflow: visible;
                height: auto;
                opacity: 1;
                transition-property: opacity;
                transition-duration: .5s;
            }

                #gnb > li > ul.depth2.active:before {
                    content: '';
                    position: absolute;
                    left: 50%;
                    top: -10px;
                    border-left: 10px solid transparent;
                    border-right: 10px solid transparent;
                    border-bottom: 10px solid #1687c9f0;
                    -webkit-transform: translateX(-50%);
                    -ms-transform: translateX(-50%);
                    transform: translateX(-50%);
                }

            #gnb > li > ul.depth2 li {
                display: inline-block;
                width: 100%;
                text-align: left;
            }

        #gnb > li > a {
            font-size: 20px;
            color: #000;
            text-decoration: none;
            transition: all ease 0.3s;
            display: inline-block;
            width: 100%;
            z-index: 99;
            font-weight: bold;
            -webkit-appearance: none;
        }
        #gnb > li > a:focus,#gnb > li > a:active {
        	outline:none;
        	-webkit-tap-highlight-color : transparent;
        	-webkit-appearance: none;
        	} 



        #gnb > li.active > a {
            color: #000;
            font-weight: bold;
            position: relative;
        }


.depth3 > li a {
    text-decoration: none;
    display: inline-block;
    width: 100%;
    padding: 5px 0;
    font-size: 17px;
}

.depth2 > li > a {
    text-decoration: none;
    display: inline-block;
    width: 100%;
    padding: 5px 0;
    font-size: 18px;
    color: #fff;
}

    .depth2 > li > a.nodepth3 {
        color: #fff;
        padding: 5px 0;
    }




.depth3 {
    padding-left: 10px;
}

    .depth3 > li {
        text-align: left;
    }

        .depth3 > li > a {
            font-size: 16px;
            width: 100%;
            color: #fff;
        }

#navbar {
    position: relative;
    height: inherit;
}

    #navbar > a:hover .live-on {
        text-shadow: 2px 2px 2px #cecece;
        transition: all ease-in-out .35s;
    }

.live-on {
    position: absolute;
    right: 0;
    top: 0;
    width: 125px;
    height: 80px;
    background: #0D1263;
    color: #fff;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

.navbar-nav > li {
    font-size: 20px;
    color: #000;
    text-decoration: none;
    transition: all ease 0.3s;
    height: 92px;
    padding: 25px 0;
    font-weight: 400;
    width: 180px;
    display: inline-block;
}

    .navbar-nav > li:hover {
        border-bottom: 4px solid #158CCA;
        color: #158CCA;
        transition: .3s all;
    }

    .navbar-nav > li.active {
        border-bottom: 4px solid #158CCA;
    }

        .navbar-nav > li.active a {
            color: #158CCA !important;
            transition: .3s all;
        }

    .navbar-nav > li:nth-child(1) {
        display: none;
    }



.navbar-default .navbar-nav > li > a {
    display: inline-block;
    font-weight: 400;
}

.navbar-nav > li > a {
    padding: 8px 15px;
}

#header {
    line-height: 80px;
    display: flex;
    justify-content: space-between;
    height: initial;
}


.navbar-nav {
    float: none;
    text-align: center;
    display: inline-block;
    position: relative;
    margin: 0 auto;
    top: 5px;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
    color: #000;
}

.navbar-nav > li > .dropdown-menu {
    padding-bottom: 30px;
    border-radius: 15px;
    border-bottom: 6px solid #4476A9;
}

.dropdown-menu > li:last-child {
    border-bottom: none;
    overflow: hidden;
}

.navbar-default .navbar-nav > .open > a {
    background-color: transparent !important;
    color: #000;
}

.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
    color: #000 !important;
}

.navbar-default .navbar-nav > li > a {
    display: inline-block;
}

.navbar-nav > li span {
    font-size: 30px;
    margin: 0 10px;
    color: #fff;
    display: inline-block;
    position: relative;
    top: 4px;
}

.navbar-nav > li > .dropdown-menu {
    font-size: 17px;
    padding: 0;
    transition: 0.3s all;
    overflow: hidden;
}

    .navbar-nav > li > .dropdown-menu > li a {
        padding: 20px 15px;
    }

.navbar-nav > li:last-child span {
    display: none;
}

.navbar-default {
	
    background: #fff;
    border: none;
    width: 100%;
    margin: 0;
    height: 100px;
    padding: 10px 0;
    position: fixed;
	top: 0;
	box-shadow: 0px 2px 5px #d7d7d7;
}
#dimodePage {
	padding-top:100px;
}
 
    .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
        background-color: transparent !important;
    }

    .navbar-default .navbar-nav > li > a {
        font-size: 20px;
        color: #000;
        font-weight: bold;
    }

.dept3 {
    padding: 0 20px;
    margin-top: 10px;
    display: none;
}

    .dept3 li {
        padding: 5px 0;
        color: #333;
    }

        .dept3 li a {
            color: #333;
        }

.dept3 {
    display: none;
}

.open > .dropdown-toggle.btn-default {
    border-left: 1px solid #eee;
    border-top: none;
    border-bottom: none;
    border-right: none;
    background: #fff;
    border-color: #eee;
}

.open:last-child > .dropdown-toggle.btn-default {
    border-right: 1px solid #eee;
}


#subgnb {
    border: 1px solid #DDDDDD;
}

    #subgnb .dropdown {
        display: inline-block;
        float: left;
    }


.header-mobile-gnb {
    float: right;
    margin: 15px 15px 15px 0;
    font-size: 30px;
}

    .header-mobile-gnb .toggle {
        color: #000;
    }


#subtop img {
width:100%;
}
#subtop .subtop-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #fff;
    height: 60px;
    border-bottom: 1px solid #b2b2b2;
}

#subtop .subtop-menu {
    position: absolute;
    bottom: 0;
    z-index: 3;
    width: 100%;
}

    #subtop .subtop-menu ul {
        text-align: center;
        width: 100%;
        line-height: 60px;
    }

        #subtop .subtop-menu ul li a {
            color: #000;
            text-decoration: none;
            font-size: 18px;
            margin: 0 25px;
        }

        #subtop .subtop-menu ul li {
            display: inline-block;
            position: relative;
            cursor: pointer;
        }

            #subtop .subtop-menu ul li.active a {
                font-weight: bold;
                border-bottom: 2px solid #000;
                padding-bottom: 20px;
            }

.subgnb-home {
    position: absolute;
    top: 20px;
    width: 100%;
    text-align: right;
}

    .subgnb-home span {
        color: #fff;
    }

    .subgnb-home a {
        color: #fff;
        text-decoration: none;
        font-size: 16px;
    }

        .subgnb-home a.active {
            font-weight: bold;
            color: #fff;
        }

.subTitle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

#sub_title {
    text-align: center;
    color: #fff;
    font-size: 56px;
    text-shadow: 2px 2px 15px #282828;
    font-weight: bold;
    margin: 0;
    letter-spacing: 5px;
}

.sub-content-menu ul li a {
    color: #000;
    text-decoration: none;
    font-size: 20px;
}

.sub-content-menu ul li.active, .sub-content-menu ul li:hover {
    border-bottom: 3px solid #223154;
    transition: 200ms;
}

.sub-content-menu ul li {
    border-bottom: 3px solid #a7a7a7;
    float: left;
    padding: 0 0 30px;
    cursor: pointer;
}

.sub-content-menu ul {
    text-align: center;
    margin: 10px 0;
}

.sub-content-menu {
    margin-bottom: 20px;
    height: 100px;
}






.mm-panels > #mm-1 {
    background-color: #158CCA !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,
.mm-panels > #mm-32,
.mm-panels > #mm-33,
.mm-panels > #mm-34,
.mm-panels > #mm-35,
.mm-panels > #mm-36,
.mm-panels > #mm-37,
.mm-panels > #mm-38,
.mm-panels > #mm-39,
.mm-panels > #mm-40,
.mm-panels > #mm-41,
.mm-panels > #mm-42,
.mm-panels > #mm-43 {
    background-color: #378ad8 !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: 10px 25px !important;
    font-size: 17px;
}

.mm-listview > li.mmenu-depth2 .mm-panel {
    background:unset!important;
}
.mm-listview > li.mmenu-depth2 > a {
    font-size: 15px !important;
}
.mm-listview > li.mmenu-depth3 > a {
    padding: 5px 0 5px 35px!important;
    font-size: 15px !important;
}

.mm-panels > .mm-panel > .mm-listview {
    margin: 20px 0px !important;
}

.mm-btn {
    top: unset !important;
}

footer {
    background: url(../Images/7.footer_bg.png);
    padding: 30px 0;
}

    footer hr {
        width: 30px;
        border-top: 3px solid #fff;
        margin-left: 0;
    }

    footer p {
        font-size: 16px;
        color: #fff;
    }

        footer p.p4 a {
            color: #9dd0ff;
            text-shadow: 1px 1px 2px #fff;
        }

    footer .container {
        position: relative;
    }

    footer ul {
        position: absolute;
        display: flex;
        bottom: 70px;
        right: 50px;
    }

        footer ul li {
            margin: 0 20px;
        }

            footer ul li:hover {
                transform: translateY(-5px);
                transition: all ease-in-out .25s;
            }

#subtop {
    position: relative;
    height: 300px;
    overflow: hidden;
	margin-top:100px;
}

@media (min-width:1400px) {
    #header.container {
        display: flex;
        justify-content: space-between;
    }
    .container {
        width:1400px;
    }
}

@media (max-width:1399px) {
    .container {
        width: 100%;
    }

    #subtop {
        height: auto;
    }
    .header-login {
    margin-right:20px;
    }
}

@media (min-width:993px) and (max-width:1199px) {
    #gnb > li > ul.depth2.active {
        position: absolute;
        top: 65px;
    }
    #gnb > li {
	    width:130px;
	    padding:20px 0;
    }
    #header {
        height: unset;
        line-height: unset;
    }
    .header-left {
	    margin-left:20px;
	    width:20%;
    }
    .header-gnb {
        height: unset;
        display: inline-flex;
        align-items: center;
    }
    .header-login {
        margin-right: 20px;
        display: inline-flex;
        align-items: center;
    }
        .header-login > span {
        }
    .navbar-default {
  	  height:80px;
    }
	#dimodePage {
		padding-top:0;
	}
}

@media (min-width: 768px) and (max-width:992px) {
   
    .mm-listview > li > a, .mm-listview > li > span {
        font-size: 25px;
    }

    .mm-next:after, .mm-prev:before {
        width: 14px!important;
        height: 14px!important;
    }

    .header-mobile-gnb {
        margin: 10px 40px 0 0;
        font-size: 42px;
    }

    #sub_title {
        font-size: 32px;
    }

    .navbar-header {
        float: unset;
        padding-top: 15px;
    }

    .header-login {
        position: absolute;
        top: 0;
        right: 0;
        line-height: normal;
        margin-right: 0;
        background: #000;
        width: 100%;
        text-align: right;
        padding: 8px;
    }

        .header-login a {
            color: #fff;
        }
}

@media (max-width: 992px) {
    footer .container {
        width: 100%;
    }
	#dimodePage {
		padding-top:0;
	}
}

@media (max-width: 767px) {
    .navbar:before,
    .navbar-header:after {
        content: unset;
    }

    .navbar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
		 box-shadow: 1px 1px 2px #777777;
    }

    .navbar-brand {
        float: unset;
        height: auto;
        padding: 10px 10px;
    }

        .navbar-brand > img {
            height: 45px;
        }

    footer p {
        padding: 0;
        word-break: keep-all;
        margin: 0;
		font-size:14px;
    }

    footer {
        padding: 10px 0;
        margin-top: 0;
    }

        footer .container {
            width: 100%;
        }

        footer ul {
            top: 0;
            right: 10px;
            bottom: unset;
        }

    .top-btn {
        right: 4%;
        width: 45px;
    }

    footer ul {
        align-items: center;
    }

        footer ul li {
            margin: 0 10px;
        }

    .navbar-header:before {
        content: unset;
    }

    .header-mobile-gnb {
        margin: 15px;
    }


    .navbar-default {
        background: #fff;
        padding: 0;
        height: auto;
        top: 0;
    }    

    .header-login {
        display:none;
    }

        .header-login a {
            color: #fff;
        }

    #allMenu {
        display: none;
    }

    .header-login > span:nth-of-type(2) {
        padding: 0;
    }
    .mmenu-login{
        position: absolute!important;
	    top: 3%;
	    right: 0;
	    color: #fff;
    }
    .mmenu-login:after{
    	content:unset!important;
    	font-size:13px!important;
    	}
    #dimodePage .page-content{
    	}

    .mm-menu .mm-listview > li.mm-opened.mm-vertical > a.mm-next {
    display:none;
    }
    .mm-listview .mm-vertical .mm-panel, .mm-vertical .mm-listview .mm-panel {
    padding:0!important;
    padding-left:10px!important;
    }

}