@charset 'utf-8';
/* 폰트 */
/* font-family: Noto Sans KR 노토산스 */
/* Noto Sans KR (korean) http://www.google.com/fonts/earlyaccess */

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.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');
 }

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


@media all and (max-width:767px){
    nav {width: 95%}
    #video .video-area {width:95%}
    #container{width: 100%}
    #video .video-area ul li{width: 50%}
    
    #news .news-area article .news-img{width: 100%}
    #news .news-area article .news-text{width: 100%}
}

@media all and (min-width:768px) and (max-width:1279px){
    nav {width: 95%}
    #video .video-area {width:100%}
    #container{width: 100%}
    #video .video-area ul li{width: 50%}
    
    #news .news-area article{width: 98%}
    #news .news-area article .news-img{width: 100%}
    #news .news-area article .news-text{width: 100%}
}

@media all and (min-width:1280px){
    nav {width: 1280px}
    #video .video-area {width: 1280px}
    #container{width: 100%}
    #video .video-area ul li{width: 33.2%}
    
    #news .news-area article{overflow: hidden}
    #news .news-area article .news-img{float: left;width: 22%;max-height: 172px;}
    #news .news-area article .news-text{float: left;width: 75%}
}  


/* 리셋 */
*{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:'Noto Sans KR','NanumSquare', "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}
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;border-radius: 10px;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%}

#bline{width: 100%}
#wrap{width: 100%;height: 100%;overflow: hidden;position: relative}

.year2022{color: #83b1e3 !important}

/*float-video*/
#wrap #blind{display: none; width: 100%;height: 100%; background: rgba(0,0,0,0.7);position: fixed;z-index: 200}
.play-area{}
.play-box{width:820px;height:460px;position: absolute; left: 50%; transform: translateX(-50%);padding: 3px;border:2px solid #28bcfa;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;margin: 4px 0 0 0;}
.play-box p .play-title{
  font-size: 1.2em;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: #fff;  
  line-height: 50px;
  background: #28bcfa;
  padding: 10px 25px;
  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 ul li{float: left}
nav .nav-box ul li:after{content:"";border-right: 1px solid #fff;display: inline-block;width: 1px;height: 10px;margin: 15px 0 0 0}
nav .nav-box ul li:last-child:after{border-right: none}
nav .nav-box ul li span{color: #fff;font-weight: 800;font-size: 1.1em;padding: 10px 30px;display: inline-block}
nav .nav-box ul li span:after{}
nav .nav-box ul li span:hover{opacity: 0.7;transition: 0.8s}

/* 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}

#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 #28bcfa;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-weight: 700}
#video .video-area ul li .video-box .video-text .title{
  font-weight: 700;
  font-size: 20px;
  padding: 3px 0;
  letter-spacing: -0.4px;
}

/*news*/
#news .news-area article{margin: 3px auto 0 auto;border-bottom: 1px solid #555;padding: 10px 0}
#news .news-area article .news-img{margin: 0 auto;display: inline-block}
#news .news-area article .news-img img{margin: 0 auto;display: inline-block;width: 100%}
#news .news-area article .news-text{margin: 0 0 0 2%}
#news .news-area article .news-text h4{color: #fff;margin: 20px 0}
#news .news-area article .news-text time{margin: 20px 0 0 0;display: block}

/*aside banner*/
.float-banner{position: absolute;top:200px;right:30px;border:1px solid #ea7f27;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: #222;font-size: 1.1em;padding: 5px;margin: 0;padding: 7px 0 0 0;border-bottom: 1px solid #ccc;background: #fac396}
.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 div{text-align: center;font-size: 0.8em}
footer div span{display: block;margin: 0 0 5px 0}