@charset 'utf-8';

@import url(https://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');
}
@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;
}
@font-face {
    font-family: 'TheJamsil5Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil5Bold.woff2') format('woff2');
    font-weight: 700;
    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:90%}
    #news .news-area article .news-text {width: 90%}
    
    .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:90%}
    #news .news-area article .news-text {width: 90%}
    
    .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%}
    #news .news-area article .news-text {float: left;width: 75%}
    
    .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%}
    #news .news-area article .news-text {float: left;width: 75%}
    
    .gnb {display: block}
    .gnb-m {display: none}

    .footer-area > div{ width: 1280px;margin: 0 auto; padding: 0 32px;}
}

/* 리셋 */
*{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}
input[type="password"]{color: #222;font-family: 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;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}

/*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:after{content:"";border-right: 1px solid #666;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}

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:100%;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{border:1px solid #b3b3b3;width: 95%;margin: 0 auto;border-radius: 10px;box-shadow: 1px 7px 5px 2px rgba(0,0,0,0.2);overflow:hidden}
#video .video-area ul li .video-box:hover{cursor: pointer}
#video .video-area ul li .video-box p{position: relative;text-align: center}

#video .video-area ul li .video-box p span{font-size: 1.1em}
#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{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}
#video .video-area ul li .video-box .video-text span:last-child{background: #b2b2b2;color: #fff;padding: 10px;font-size: 1em}
#video .video-area ul li .video-box .video-text .category{font-weight: 700;margin:5px 0 0 0}
#video .video-area ul li .video-box .video-text .title {height:60px;font-weight: 700;font-size: 1.2em;padding: 3px 0;width: 80%;margin: 0 auto 5px auto;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 .news-img{width: 22%;height: 200px;line-height: 200px}
#news .news-area article .news-img img{width: 100%;vertical-align:middle}
#news .news-area article .news-text{width: 75%;margin: 0 0 0 2%}
#news .news-area article .news-text h4{color: #171717;margin: 20px 0}
#news .news-area article .news-text time{margin: 20px 0 0 0;display: block}

/*aside banner*/
.float-banner{position: absolute;bottom:100px;right:30px;border-radius: 20px;background: rgba(255,255,255,0.8);z-index: 100;width: 120px;}
.float-banner p{text-align:center;color: #fff;font-size: 18px;padding: 8px 5px;margin: 0;border-bottom: 1px solid #ccc;background: #D24A43;border-radius: 20px;box-shadow: 1px 2px 2px 2px rgba(0,0,0,0.1)}

/* footer */
footer {padding: 20px 0 30px 0;text-align: left}
footer > div{text-align: center;font-size: 0.8em; margin: 0 auto}
/* footer div span{margin: 0 0 5px 0} */
footer div ul{overflow: hidden; display: flex; flex-wrap: wrap;}
footer div ul li{width: 150px;text-align: left}
footer div ul li span{display: inline-block}
footer div ul li span img{width: 100%}

footer .cp{display: flex; flex-direction:column; align-items: center;width: 100%; border-top: 1px solid #ccc; padding: 20px 0 0 0;margin: 10px 0 0 0; box-sizing: border-box;}
footer .cp span{display: block;font-size:14px; padding: 0 32px;}
footer .cp span.copyright{font-size: 0.938em; color:#929292}

.footer-area > div{display: flex; align-items: flex-start; box-sizing: border-box;}
.footer-area > div p{text-align: left; min-width: 135px;}
/* .footer-area > div{overflow: hidden;margin: 0 0 10px 0}
.footer-area > div p{float: left;width: 10%}*/
.footer-area > div p span{font-size: 22px;letter-spacing: -0.4px; padding:0 24px; box-sizing: border-box;}
.footer-area > div ul{width: fit-content}

.footer-area > div:nth-child(1) p span{line-height:47px}
.footer-area > div:nth-child(1) ul li span{margin: 5px 0 0 13px}
.footer-area > div:nth-child(2) p span{line-height:67px}


@media all and (max-width:479px){
    footer div ul li{ width: 120px;}
    .footer-area > div p{text-align: left; min-width: 106px;}
    .footer-area > div p span { font-size: 18px;padding: 0 0 0 24px; }
}

#support{border-top:1px solid #ccc}
#support h3{margin: 40px 0 0 0}

.apply-form .example-button{
    display: inline-block;
    border:1px solid #ccc;
    background: #fff;
    font-size: 10px;
    line-height: 20px;
    padding: 0 8px;
    margin: 4.5px 0 6px 4px;
    border-radius: 2px;
}
.apply-form .example-button:hover{
    opacity: 0.8;
    cursor: pointer;
}
.apply-form{
    width: 1000px;
    margin: 0 auto 80px auto;
}
.apply-form input[type='text'], .apply-form input[type='password']{
    width: 96%;
    border: 1px solid #ccc;
    height: 40px;
    line-height: 40px;
    color: #222;
    padding: 0 2%;
}
.apply-form input[type='file']{
    width: 945px;
    border: 1px solid #ccc;
    height: 40px;
    line-height: 40px;
    color: #222;
    padding: 0 10px;
    margin: 4px 0 0 0;
    background: #fff;
    letter-spacing: -.065em;
}
.apply-form input[type='file']:hover{
    cursor: pointer;
    background: #f1f1f1;
}
.apply-form .upload-50 input[type='file']{
    width: 452px;
}
.apply-form input[type='submit']{
    text-align: center;
    width: 120px;
    margin: 0 auto;
    display: block;
    background: #222;
    color: #fff;
    font-weight: 600;
    padding: 10px 20px;
}
.apply-form input[type='submit']:hover{
    cursor: pointer;
    opacity: 0.7;
}
.apply-form label{
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -.065em;
    font-weight: 500;
    margin: 3px 0 3px 0;
    display: inline-block;
    color: #222;
}
.apply-form .file-upload{overflow: hidden}
.apply-form .file-upload input[type='text']{
    width: 74.5%;
    margin: 0 1% 0 0;
    float: left;
    border: 1px solid #ccc;
    height: 40px;
    line-height: 40px;
    color: #222;
}
.apply-form .file-upload input[type='button']{
    width: 20%;
    float: right;
    background: #e9e9e9;
    border: 1px solid #ccc;
    height: 40px;
    line-height: 40px;
    color: #555;
    border-radius: 5px;
    letter-spacing: -.065em;
    font-weight: 600;
}
.apply-form .file-upload input[type='button']:hover{
    cursor: pointer;
    background: #fff;
}
.apply-form textarea{
    width: 97.8%;
    padding: 1%;
    resize: none;
    overflow-y: auto;
    height: 100px;
    border: 1px solid #ccc;
}
.apply-form h3{
    font-weight: 600;
    text-align: center;
    letter-spacing: -.065em;
    font-size: 28px;
}
.apply-form h4{
    font-weight: 600;
    letter-spacing: -.065em;
    font-size: 20px;
    line-height: 50px;
}
.apply-form h4 .headline-help{
    font-size: 14px;
    line-height: 50px;
    color: #666;

}
.apply-form h4 .headline-help em{
    color: #c50000;
}
.apply-form .help-text{
    font-size: 12px;
    letter-spacing: -.065em;
}
.apply-form .help-text span{
    display: block;
    line-height: 20px;
    margin: 0 0 5px 0;
    display: inline-block;
}
.apply-form .help-text em{
    color: #c50000;
}
.apply-form .example-area {
    display: none;
    padding: 10px;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    margin: 5px 0 10px 0;
}
.apply-form .example-area span{
    display: block;
    font-size: 12px;
    letter-spacing: -.065em;
}
.apply-form .example-area.show {
    display: block;
}
.apply-form .section-form{
    padding: 20px 15px;
    border: 1px solid #ccc;
    border-top: 2px solid #222;
    background: #f9f9f9;
    margin: 0 auto 30px auto;
}
.apply-form .section-form ul{
    
}
.apply-form .section-form ul li{
    margin: 0 0 10px 0;
}
.apply-form .section-form .sub-area{
    border-top: 2px solid #222;
    background: #e9e9e9;
    padding: 10px;
}
.apply-form .form-area{
    overflow: hidden
}
.apply-form .form-left{
    float: left;
    width: 49%;
}
.apply-form .form-right{
    float: right;
    margin: 0 2px 0 0;
    width: 49%;
}
.save-btn{
    position: fixed;
    width: 100px;
    border-radius: 40px;
    right: 20px;
    bottom: 20px;
    background: #0e4173;
    text-align: center;
    padding: 10px;
    color: #fff;
    letter-spacing: -0.4px;
    font-weight: 600;
}
.save-btn:hover{
    background: #4c7eae;
    cursor: pointer;
}

.privacypolicy{
    border:1px solid #ccc;
    margin: 3px 0 0 0;
    display: inline-block;
    width: 98%;
    padding: 10px 1% 15px 1%;
    background: #e9e9e9;
}
.privacy-checkbox input[type="checkbox"]{
    width: 20px;
    height: 20px;
    margin: 5px 5px 0 0;
}
.privacy-checkbox label:hover{cursor: pointer}
.privacy-checkbox {
    margin: 0 0 5px 0;
}
.privacypolicy ul li{
    height: 25px;
    line-height: 25px;
    margin: 0 !important;
}
.privacypolicy ul li span{
    letter-spacing: -.065em;
}

.apply-form button{
    background: #3E5879;
    font-size: 14px;
    letter-spacing: -.065em;
    padding: 5px 15px;
    border-radius: 4px;
    font-weight: 600;
    display: inline-block;
    color: #fff;
    margin: 10px 0 0 15px;
    width: 150px;
}
.apply-form button:hover{
    cursor: pointer;
    background: #81BFDA;
}
.apply-form .level{margin: 10px 0 0 0}
.apply-form .level > li p span{
    letter-spacing: -.065em;
    text-align: left;
}
.apply-form .level > li p span:first-child{
    font-weight: 600;
    margin: 0 0 10px 0;
}
.apply-form .level > li em{
    display: inline-block;
    text-align: center;
    background: #222;
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 12px;
    line-height: 20px;
}
.apply-form .level > li ul{
    margin: 10px 0 15px 0;
}
.apply-form .level > li ul li{
    margin: 0 0 0 15px !important;
    height: 25px;
    line-height: 25px;
}

label em{
    font-size: 12px;
    line-height: 23px;
    color: #c50000;
    margin: 0 0 0 5px;

}