﻿@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'; letter-spacing : .3px;}
a, a:hover {text-decoration: none!important; cursor: pointer;}
.flex {display: flex; align-items: center;}
.document-readed_count,.document-ReadedCount,.document-readedcount{ display:none!important;}
#loginForm, #joinForm {margin: 3% auto 50px!important;}

/* header */

#header { display: inline-block; padding: 0px 30px; position: absolute; top: 0px; right: 0;}
#header a { color:#fff; text-decoration:none;}
.contents {max-width: 1480px; width: 100%; margin: 0 auto;}
.header-box-right { float: right; }
.header-box-right a { color: #fff; display:inline-block; font-size: 16px;}
.header-box-right a:hover { background:#6599CB; transition:0.3s all ease;}
.header-mobile-gnb a i {font-size: 1.7em;}

/* gnb */
#gnb-wrap {background:#1E3C62;}
#gnb-wrap > div > div.flex {display: flex; align-items: center; justify-content: space-between; padding: 0 15px;}
#gnb-wrap img { float:left; margin: 17px 0px;}
#gnb ul li {  height: inherit; box-sizing: border-box; display: inline-block; }
#gnb ul li a {padding:1.5vw; display: inline-block; font-size: 1.8rem; font-weight: bold; color: #fff; transition: all .2s ease-in-out; }
#gnb ul li a:hover {color:#A5B9E0;}
/* #gnb .depth1 {margin: 0 20px;} */
#gnb .depth2 {display: none;}
#gnb .depth2 li a {display: inline-block;}
#gnb ul.depth2 li > a {color: #252525; font-size: 1.6rem; font-weight: 500; line-height: 2; word-break: keep-all;}

/* 하위 menu gnb-all  */
.gnb-all { display: none; z-index: 999; position: fixed; top: 87px; left: 0; width: 100%; margin: 0 auto; text-align: center;}
.all-wrapper { background: #fff; box-sizing: border-box; border-bottom: 2px solid #1E3D60; border-top: 2px solid #1E3D60; }
.gnb-all a { text-decoration: none; }
.gnb-all .all-wrapper .container > div {overflow: hidden;}
.gnb-all .all-wrapper .container > a { display: block; color: #1E3D60;}
.gnb-all .all-wrapper .container > div { overflow: hidden;}
.gnb-all .all-wrapper .container > ul {display: flex; justify-content: center;}
.gnb-all .all-wrapper .container > ul > li { max-width: 20%; min-width: 10%; line-height: 1.6; text-align: left; padding: 30px 25px; border-right: 1px solid #ddd;}
.gnb-all .all-wrapper .container > ul > li:first-child {border-left: 1px solid #ddd;}
.gnb-all .all-wrapper .container > ul > li > a { /*margin: 0px 0px 15px;*/ color: #1E3D60; font-size: 1.8rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid #ddd; padding-bottom: 8px;}
.gnb-all .all-wrapper .container > ul > li > ul {margin-top: 15px;}
.gnb-all .all-wrapper .container > ul > li > ul > li > a {
    color: rgba(0,0,0, .5);
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
    font-size: 1.6rem;
    padding: 0px;
    margin: 5px 0;
    transform: skew(-0.05deg);
    font-weight: 600;
    line-height: 1.8;
}
.gnb-all .all-wrapper .container > ul > li > ul > li > a:hover {transition: all .25s ease-in-out; color: #1E3D60;}
.gnb-all .all-wrapper .container > ul > li > ul > li > ul > li > a { font-weight:normal; color: #9DA1A4; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;font-size: 1.5rem; line-height: 1.6; padding: 0 5px; transform: skew(-0.05deg);}

/* footer */

#footer { background:#232323; padding:50px 0px; position:relative;}
#footer > div  {position:relative;}
#footer img { margin-right: 15px; clear:both; display:inline-block; vertical-align:top;}
#footer ul { display:block; margin:5px 0 0 30px;}
#footer ul li { color:#9DA1A4; font-size:15px; padding:0px; margin:3px 0;}
#footer ul li:first-child { font-weight:bold;}
#footer h4 { font-weight:normal; margin:8px 0px 4px; color:#fff;}
#footer p { font-size:15px; color:#9DA1A4; margin:0px 0px 30px; font-weight: 600; margin-bottom:5px; }
#footer p span { font-size:15px; color:#9DA1A4; padding-left:15px; font-weight: 400; margin-bottom:5px; }

#footer .copy { position:absolute; /*right:37px;*/ font-size:15px; color:#9DA1A4;}

#footer .foot-1 table {border:none; margin-left:41px; width:95%;}
#footer .foot-1 tr {margin-bottom:5px;}
#footer .foot-1 td:first-child { font-weight:600;  width:25%;}
#footer .foot-1 td:nth-child(2) { width:25%;}
#footer .foot-1 td:nth-child(3) { width:25%;}
#footer .foot-1 td {color:#9DA1A4; font-size:15px; padding:2px 0;}


#footer .foot-2 table {border:none; width:95%; }
#footer .foot-2 td:nth-child(1) {width:25%}
#footer .foot-2 td:nth-child(2) { width:25%;}
#footer .foot-2 td:nth-child(3) { width:25%; text-align:right;}
#footer .foot-2 td {color:#9DA1A4; font-size:15px; padding:2px 0;}

.copy {padding-top:20px;}

/* mobile */
#my-menu {display: none;}
.header-mobile-gnb .toggle {color:#fff!important;}
.mm-panels > #mm-1 {background-color:#6599CB!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: #00649c !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;}

.subul {
        
        text-align:center;
}

/*실시간생방송*/
.latest-special {margin-bottom: 30px;margin-left: 18px;}
.latest-special .p4 {font-size:30px;padding-left: 15px;position: relative;color:#000000;top: 15px;}
.latest-special .white-bar {background: #7c8789;width: 1px;height: 22px;display: inline-block;margin: -20px 13px;}
.jubowrapper {display: inline-block; color: #948e8f;}

    #component4268 #unit6531 {margin-top:50px;}
    #component1034 #unit7812 {margin-top:50px;}
    #component8476 #unit3569 {margin-top:50px;}
    #component3780 #unit9773 {margin-top:50px;}
    #component1800 #unit5314 {margin-top:50px;}
    #component4809 #unit2915 {margin-top:50px;}
    #component9990 #unit7764 {margin-top:50px;}
    #component6919 #unit5511 {margin-top:50px;}

@media (max-width:1499px){
	
}



@media  (max-width:1199px) {

    /* 220324 */
    #gnb ul li a {font-size: 1.6rem;}
	.header-box-right a, .gnb-all .all-wrapper .container > ul > li > ul > li > a {font-size: 14px; line-height: 1.6;}
	.gnb-all .all-wrapper .container > ul > li > a {font-size: 1.6rem;}
	.gnb-all .all-wrapper .container > ul > li {padding: 20px 15px;}



    .subul li {
        margin: 0px !important;
    }

    .gnb2 .container {
        text-align: center !important;
    }

    .subul > li {
        width: 150px;
    }

    /* #footer img { */
        /* margin-bottom: 15px; */
    /* } */

    #gnb > li > a {
        font-size: 20px;
    }

    .point {
        bottom: -95px;
        left: 39%;
    }

    #footer div {
        text-align: inherit;
    }

    .latest-special .p4 {
        font-size: 22px;
        padding-left: 15px;
        position: relative;
        bottom: -18px;
        color: #000000;
    }

    #footer .foot-1 td:nth-child(1){width:20%;}
    #footer .foot-1 td:nth-child(2){width:30%;}
    #footer .foot-1 td:nth-child(3){width:15%;}

    #footer .foot-2 td:nth-child(1){width:20%;}
    #footer .foot-2 td:nth-child(2){width:30%;}
    #footer .foot-2 td:nth-child(3){width:23%;}

     #component4268 #unit6531 {margin-top:20px;}
     #component1034 #unit7812 {margin-top:20px;}
     #component8476 #unit3569 {margin-top:20px;}
     #component3780 #unit9773 {margin-top:20px;}
     #component1800 #unit5314 {margin-top:20px;}
     #component4809 #unit2915 {margin-top:20px;}
     #component9990 #unit7764 {margin-top:20px;}
     #component6919 #unit5511 {margin-top:20px;}
}

@media (max-width:991px) {
	
	
	#header {right:35px}
	#header .header-box-right a {padding:42px 5px;}

	.subul{display:none;}
    .gnb2{height:0px!important;}
    #footer img { float:none; margin-right:65px;}
    #footer { text-align: center; margin:0;}
    #footer ul li:first-child { top:0!important; left:48%!important;}
    #footer .copy { position:relative; margin:15px 0 0; right:0; bottom:0; padding:25px 0 0;}
		#footer { padding:30px 0; }
        #footer .foot-3 img{position:relative; }
        #footer .foot-3 h4{}
       .latest-special .p4 {
            font-size: 29px;
            padding-left: 15px;
            position: relative;
            bottom: -18px;
            color:#000000;
        }
     #footer img {margin:0;}




     #component4268 #unit6531 {margin-top:15px;}
     #component1034 #unit7812 {margin-top:15px;}
     #component8476 #unit3569 {margin-top:15px;}
     #component3780 #unit9773 {margin-top:15px;}
     #component1800 #unit5314 {margin-top:15px;}
     #component4809 #unit2915 {margin-top:15px;}
     #component9990 #unit7764 {margin-top:15px;}
     #component6919 #unit5511 {margin-top:15px;}

}

@media (max-width:767px) {
    #gnb-wrap > div > div.flex {padding: 10px;}

    .header-box-right a {font-size: 1.4rem; padding: 0 2px;}
    #footer { text-align:left; }
    #footer img { float:left; margin-top:5px;}
    #footer p { font-size:14px;}
    #gnb-wrap { padding:0px;}
    #gnb-wrap 
    #footer img { display:none; }
    #footer ul {margin:0;}
    #footer ul li:first-child { font-size:15px; padding-bottom:0px; position:relative!important; left:0!important; }
    #footer ul li:nth-child(2) { margin-top:15px;}
    #footer ul li {text-align:left;}
    #footer { padding:15px 0px;}
    #header { height:35px; padding:0px 15px; top:10px; right:30px;}
    #header .header-box-right { font-size:14px; padding:8px 0px;}
    #header .header-box-right span { display:none;}
    #gnb-wrap img { width:160px; margin: 0;}
    #footer .copy { position:relative; margin-top:15px; bottom:0; padding:0; text-align:left; right:0;}
	#footer .foot-1 table {margin-left:45px; width:100%;}
 
    #component4268{width:50%;float:left;}
    #component1034{width:50%;float:left;}
    #component8476{width:50%;float:left;}
    #component3780{width:50%;float:left;}
    #component1800{width:50%;float:left;}
    #component4809{width:50%;float:left;}
    #component9990{width:50%;float:left;}
    #component6919{width:50%;float:left;}
}

@media (max-width:480px) {
	#gnb-wrap img {max-width: 125px;}
    #footer ul li:first-child { font-size: 15px; }
    #footer img { display:none;}

}
