@charset 'utf-8';

@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url('https://webfontworld.github.io/TheJamsil/TheJamsil.css');

@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: 'TmonMonsori';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/TmonMonsori.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);

@media all and (max-width:479px){

    #wrap{min-width: 280px}

    nav {width: 95%}
    .previous-site li{display: none}

    .play-box {width: 90%;margin: 0 auto;height: 200px}
    .play-box p .play-title{font-size: 0.8em;padding: 8px 10px;line-height: 30px}
    
    #video .video-area{width: 98%;margin:0 auto}
    #video .video-area ul li{width: 100%}

    #news .news-area article {width: 95%;margin: 0 auto}
    #news .news-area article .news-img {width: 100%;;max-height: 250px;overflow: hidden}
    #news .news-area article .news-text {width: 90%}

    #news .news-area article .news-text em{
      display: -webkit-box;
        overflow: hidden;
        white-space: normal;
        word-break: break-all;
        text-overflow: ellipsis;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
    }
    #news .news-area article .news-text h4{
        margin: 0 auto 20px auto;
    }
    
    .gnb {display:none}
    .gnb-m {display:block}
}

@media all and (min-width:480px) and (max-width:767px){
     nav {width: 95%}
    .previous-site li{display: none}

    .play-box {width: 90%;margin: 0 auto;height: 200px}
    .play-box p .play-title{font-size: 0.8em;padding: 8px 10px;line-height: 30px}
    
    #video .video-area{width: 98%;margin:0 auto}
    #video .video-area ul li{width: 100%}

    #news .news-area article {width: 95%;margin: 0 auto}
    #news .news-area article .news-img {width: 100%;;height: 350px;overflow: hidden}
    #news .news-area article .news-text {width: 90%}
    #news .news-area article .news-text em{
      display: -webkit-box;
      overflow: hidden;
      white-space: normal;
      word-break: break-all;
      text-overflow: ellipsis;
      -webkit-line-clamp: 5;
      -webkit-box-orient: vertical;
    }
    #news .news-area article .news-text h4{
        margin: 0 auto 20px auto;
    }

    .gnb {display:none}
    .gnb-m {display:block}
}

@media all and (min-width:768px) and (max-width:1279px){
    nav {width: 95%}
    .previous-site li{display: none}
    .play-box {width: 820px;height: 460px}
    .play-box p .play-title{font-size: 1.1em;padding: 10px 25px;line-height: 50px}
    
    #video .video-area{width: 98%}
    #video .video-area ul li{width: 50%}

    #news .news-area article {overflow: hidden}
    #news .news-area article .news-img {float: left;width: 22%;height: 220px;overflow: hidden}
    #news .news-area article .news-text {float: left;width: 75%}
    #news .news-area article .news-text h4{
        margin: 20px auto;
    }

    .gnb {display: none}
    .gnb-m {display: block}
}

@media all and (min-width:1280px){
    nav {width: 1280px}
    
    .play-box {width: 820px;height: 460px}
    .play-box p .play-title{font-size: 1.2em;padding: 10px 25px;line-height: 50px}
    
    #video .video-area{width: 1280px}
    #video .video-area ul li{width: 33.2%}

    #news .news-area article {overflow: hidden}
    #news .news-area article .news-img {float: left;width: 22%;height: 220px;overflow: hidden}
    #news .news-area article .news-text {float: left;width: 75%}
    #news .news-area article .news-text h4{
        margin: 20px auto;
    }
    
    .gnb {display: block}
    .gnb-m {display: none}
}

/* 리셋 */
*{margin: 0;padding: 0;list-style:none;vertical-align:top;border-collapse: collapse}

body{background-color:transparent;overflow-y: scroll;overflow-x: hidden;color:#222;height: 100%;scroll-behavior: smooth}
body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,select,table,td,textarea,th,ul,textarea{margin:0;padding:0}
body,button,input,select,table,textarea{font-size:15px;font-family:'NanumSquare','Noto Sans KR', "Apple SD Gothic Neo",sans-serif}
fieldset,img,button{border:0}
ol,ul{list-style:none}
address,em{font-style:normal}
a,button{text-decoration:none}

/*a:visited{color:#222}*/
a:hover,button:hover{text-decoration:underline,border:0;cursor: pointer}
h1,h2,h3,h4,h5,h6{font-size: 15px;font-weight: normal}
h4{font-family:'Noto Sans KR';font-weight:400 }
caption{text-indent: -9999px;position: relative;top:-9999px;left:-9999px}

/*h1,h2,h3,.title{color:#404040}*/
.more{font-family:"NotoSansKR-Light";font-weight: 700;font-size: 0.9em}
.main_color{color:#1d212d}
.sub_color{color:#646c81}
.point_color{color:#b48e6a}
.hidden{display: none !important}

a:link { color: inherit; text-decoration: none}
a:visited { color: inherit; text-decoration: none}
a:hover { color: inherit; text-decoration: none}

button{width: 300px;margin: 20px auto 0 auto;display: block;padding: 15px 0;background: #28bcfa;color: #fff;font-weight: 800;font-size: 1.2em;letter-spacing: -1px}
button:hover{opacity: 0.8}
button a{display: inline-block;width: 100%;height: 100%}

/*common*/
#wrap{width:100%;height:100%;position: relative}
main {padding:0 0 70px 0}
.header-top ul li span {font-family: 'Noto Sans KR'}

/*float-video*/
#wrap #blind{display: none; width: 100%;height: 100%; background: rgba(0,0,0,0.7);position: fixed;z-index: 200}

.year2025{color: #a0c4ea !important}

/*play-box*/
.play-box {position: absolute;left: 50%;transform: translateX(-50%);padding: 3px;border: 2px solid #a2bee5;border-radius: 5px;background: #000;box-shadow: 1px 6px 12px 12px rgba(40,188,250,0.2)}
.play-box .close-btn{position: absolute;right: 0;top:-50px;width:30px;height: 30px}
.play-box .close-btn img{width: 100%;display: inline-block}
.play-box .close-btn:hover{cursor: pointer}
.play-box #iframe{width: 100%;height: 100%;display: inline-block}

.play-box p{text-align: center}
.play-box p .play-title{color: #fff;font-weight: 700;background: #a2bee5;border-radius: 0 0 10px 10px}
.video-btn:hover{cursor: pointer}

/*skip-nav*/
#skip-nav a{position: absolute;top:0;left: 0;top:-9999px;z-index: 9990}
#skip-nav a:hover, #skip-nav a:active, #skip-nav a:focus{top: 0;display: block;width: 100%;text-align: center;padding: 10px 0;color: #fff;background:#888}

/*nav*/
nav {margin: 0 auto}
nav h1{float: left}
nav .nav-box{overflow: hidden;padding: 10px 0}
nav .nav-box ul{overflow: hidden;float: right}
nav .nav-box .gnb ul li{float: left}
nav .nav-box .gnb ul li:hover{cursor: pointer;}
nav .nav-box .gnb ul li:after{content:"";border-right: 1px solid #fff;display: inline-block;width: 1px;height: 10px;margin: 15px 0 0 0}
nav .nav-box .gnb ul li:last-child:after{border-right: none}
nav .nav-box .gnb ul li span{padding: 10px 30px;font-family: 'Noto Sans KR'}

nav .nav-box ul li span{color: #fff;font-weight: 800;font-size: 1.1em;display: inline-block}
nav .nav-box ul li span:hover{color: #fff;transition: 0.8s}

/*gnb-m 모바일 nav*/
.gnb-m {float: right}

.gnb-menu-btn{position: relative;z-index: 1}
.gnb-m i:hover{cursor: pointer}
.gnb-m i {margin:5px 0 0 0;width: 30px;display: inline-block}
.gnb-m i img {width:100%}

/*gnb-m 메뉴*/
.gnb-m > ul {padding:90px 0 0 0;position:fixed;width:100%;height:fit-content;left:0;top:0;background:rgba(98,98,98,0.8);display:none}
.gnb-m ul li {background: #4e4e4e}
.gnb-m > ul > li {border-bottom: 1px solid #666}
.gnb-m ul li ul{width: 100%;margin: 10px 0}
.gnb-m ul li ul li{padding: 5px 0;background: #484848;border-bottom: 1px solid #393939}
.gnb-m ul li ul li:last-child{border-bottom: none}
.gnb-m ul li ul li a span{color: #ccc;padding: 10px 0}
.gnb-m ul li:last-child {border-bottom: none}
.gnb-m a {width:100%;height:100%;display:inline-block}

.gnb-m > ul .title > a:hover{opacity: 0.8}
.gnb-m > ul .title > a{width: 100%}
.gnb-m > ul .title > a > span {width: 100px;margin: 0 auto;color: #fff;padding: 10px 0}
.gnb-m > ul .title > span {width: 100%;color: #fff;display: inline-block;padding: 10px 0}
.gnb-m > ul .title > span:hover {cursor:pointer}
.gnb-m ul li {width: 100%;text-align: center;padding: 10px 0}

/*gnb-m 닫기*/
.gnb-close-btn {position:fixed;right:10px;top:25px;display:none;z-index: 10}

/*gnb-m 타이틀*/
.gnb-m-title{position: fixed;top:0;left: 0;height: 90px;background: #383838;width: 100%;z-index: 2;border-bottom: 2px solid #383838}
.gnb-m-title p{text-align: center;line-height: 25px;padding: 25px 0 0 0}
.gnb-m-title p span{display: block;color: #fff}
.gnb-m-title p span:first-child{font-weight: 600;font-size: 1.1em}
.gnb-m-title p span:last-child{color: #aacee4;font-weight: 800;font-size: 1.2em}

.gnb-toggle{display: none}

/* video */
#video {width: 100%}
#video .video-area {margin:0 auto}
#video .video-area h2{margin: 30px 0 0 0}

#video .video-area ul{overflow: hidden}
#video .video-area ul li{float: left;margin: 0 0 30px 0}
#video .video-area ul li .video-box:hover{cursor: pointer}
#video .video-area ul li .video-box p{width: 90%;margin: 0 auto;position: relative;text-align: center;}

#video .video-area ul li .video-box p span img{width: 100%;display: inline-block}
#video .video-area ul li .video-box p:first-child{border:1px solid #718bac;border-radius: 10px;overflow: hidden}

#video .video-area ul li .video-box p .video-btn{position: absolute;top:0;left: 0;background: rgba(0,0,0,0.3);width: 100%;text-align: center;height: 100%}
#video .video-area ul li .video-box p .video-btn:hover{background: rgba(0,0,0,0);transition: 0.6s}
#video .video-area ul li .video-box p .video-btn img{display: inline-block;width: 15%;margin: 120px auto}

#video .video-area ul li .video-box .video-text{padding: 10px 0}
#video .video-area ul li .video-box .video-text span{display: block;margin: 0 0 2px 0}
#video .video-area ul li .video-box .video-text .category{font-size: 16px;font-family: Noto Sans KR;}
#video .video-area ul li .video-box .video-text .title{
    color: #c0d1e9;
    font-weight: 700;
    font-size: 20px;
    padding: 5px 0;
    letter-spacing: -0.4px;
}

#video .video-area ul li .video-box .video-text .description{
    font-family: Noto Sans KR;
}

/*news*/
#news .news-area article{margin: 3px auto 0 auto;border-bottom: 1px solid #555;padding: 10px 0}
#news .news-area article:last-child{border-bottom: none}
#news .news-area article .news-img{overflow: hidden;display: inline-block}
#news .news-area article .news-img img{width: 100%;object-fit: cover;}
#news .news-area article .news-text{width: 75%;margin: 0 0 0 2%}
#news .news-area article .news-text h4{
    color: #fff;
}
#news .news-area article .news-text time{
    margin: 10px 0 10px 0;
    display: block;
    color: #f1f1f1;
    letter-spacing: -.065em;
}
#news .news-area article .news-text em{
    font-style: 17px;
    line-height: 22px;
    color: #f1f1f1;
    margin: 0 auto 20px auto;
}

/*aside banner*/
.float-banner{position: absolute;top:200px;right:30px;border:1px solid #999;border-radius: 20px;background: rgba(255,255,255,0.8);z-index: 100;width: 120px;box-shadow: 1px 5px 5px 5px rgba(0,0,0,0.1)}
.float-banner h3{color: #fff;font-size: 1.1em;padding: 5px;margin: 0;padding: 7px 0 0 0;border-bottom: 1px solid #ccc;background: #003668}
.float-banner h3:first-child{border-radius: 20px 20px 0 0}
.float-banner h3:after{border:none;padding: 0;margin: 0}
.float-banner p{padding: 10px 0 10px 0}
.float-banner p span{margin: 0 0 10px 0;display: inline-block}
.float-banner p span img{display: block;width: 80%;margin: 0 auto}

/* footer */
footer { padding: 20px 0 30px 0;border-top:1px solid #444}
footer .footer-area{
    text-align: center;width: 90%;margin: 0 auto;}
footer .footer-area span{
    display: block;
    margin: 0 auto 5px auto;
    line-height: 22px;
    font-style: 17px;
    letter-spacing: -.065em;
}