*{box-sizing: border-box}

body{font-size: .8em;color: #666;font-family: 'Nanum Gothic Coding', monospace;;background: #303030;overflow: hidden;}
a{display: block;color: inherit}
.wrap{max-width: 1170px;margin: auto}


/*히든 헤드*/
.hiddenhead{}
.hiddenhead.on{display: none}
.tophead{background: #0c82e9;height: 48px;color: #fff;font-size: 1.1em;}
.tophead .hidlogo{display: block;width: 105px;height: 27px;background: url(../01_29/img/icon_set_common.png)no-repeat -122px -165px;float: left;margin-top: 8px;}
.tophead .notice{float: left;margin-left: 7%}
.tophead .notice ul{padding-top: 5%}
.tophead .notice i{display: inline-block;width: 17px;height: 11px;padding-left: 20px;background: url(../01_29/img/ico-sprite-common-gnb.png)no-repeat -17px -45px;margin-top: 5px;margin-right: 5px}
.tophead .notice li{display: inline-block;}
.tophead .noticenav{float: right;width: 30%;}
.tophead .noticenav ul{padding-top: 4%}
.tophead .noticenav li{display: inline-block;padding: 1% 2%;margin: 0 1%}

.bottomhead{background: #303030;height: 48px;color: #fff;}
.bottomhead .wrap{border-bottom: 1px solid #4f4f4f;height: 48px;}
.ifmbtn{float: left;}
.ifmbtn ul{padding-top: 5%}
.ifmbtn li{display: inline-block;width: 110px;text-align: center}
.ifmbtn li a{padding: 8px 5px;border: .5px solid #878787;border-radius: 50px;}
.login{float: right;width: 25%;}
.login ul{padding-top: 6%;text-align: right}
.login li{display: inline-block;margin: 0 3%}
.login li:nth-child(3){color: #f49e00;}
.login li:last-child a{padding-right: 15px;background: url(../01_29/img/ico_lang.png)no-repeat center right;border-bottom: 1px solid #fff}
/*히든 헤드*/

/*헤드*/
header{position: relative;background: #303030;height: 64px;padding-top: 1%;color: #fff;font-size: 1.3em}
header.on{position: fixed;left: 0;top: 0;width: 100%;z-index: 100;}
header .logo{width: 182px;height: 29px;float: left;}
header .hednav{float: right;}
header .hednav ul{padding-top: 1%;width: 100%;}
header .hednav li{float: left;margin: 0 30px;cursor: pointer;}
header .hednav li.on{color: #f49e00}
header .sitemap{float: right;margin-top: 6px;margin-right: 2%;width: 20px;height: 14px;background: url(../01_29/img/btn_allmenu.png)no-repeat center center;cursor: pointer;}
header .scarch{float: right;margin-top: 3px;width: 21px;height: 20px;background: url(../01_29/img/btn_search.png)no-repeat center center;cursor: pointer;}
/*헤드*/

/*헤드 네비*/
.navlist{position: absolute;overflow: hidden;left: 0;top: 100%;width: 100%;height: 0;background: #fff;z-index: 100;color: #333;font-size: .8em;line-height: 1.6;transition: all .5s ease}
.navmenu .navlist.on{height: 240px;}
.navlist::before{content: '';background: #f5f5f5;position: absolute;width: 30%;height: 240px;left: 0;top: 0;z-index: -1;}
.leftarea{width: 30%;float: left;height: 240px;border-right: 1px solid #ccc;padding-top: 4%}
.navlist:nth-child(1) .leftarea{background: #f5f5f5 url(../01_29/img/ico_gnb_dep1_1.png)no-repeat 80% 80%}
.navlist:nth-child(2) .leftarea{background: #f5f5f5 url(../01_29/img/ico_gnb_dep1_2.png)no-repeat 80% 80%}
.leftarea h3{color: #000;font-size: 1.6em}
.leftarea hr{display: block;background: #000;width: 30px;margin: 15px 0;height: 1px;border: none}
.leftarea p{color: #666;}
.leftarea button{border-radius: 50px;border: none;background: #999;margin-top: 16px}
.leftarea button a{color:#fff;padding: 10px 20px;font-weight: bold;}
.rightarea{position: relative;width: 70%;background: #fff;float: left;height: 240px;padding-left: 40px;padding-top: 24px;line-height: 2}
.topli{color: #333;background: url(../01_29/img/ico_gnb_arrow2.png)no-repeat left center;padding-left: 24px;cursor: pointer;}
.topli:hover{color: #ef3935;;background: url(../01_29/img/ico_gnb_arrow2_ov.png)no-repeat left center}
.level2{display: none;color:#666;position: absolute;left: 240px;top: 0;border-left: 1px solid #666;width: 70%;height: 240px;padding-top: 24px;line-height: 2}
.level2 li{width: 40%;float: left;padding-left: 5%}
.topli:hover .level2{display: block}
/*헤드 네비*/

/*스크롤 네비*/
.scrollnav{position: fixed;display: block;right: 4%;top: 25%;z-index: 50;background: url(../01_29/img/ico_mouse.png)no-repeat center bottom;
width: 25px;padding-bottom: 40px;color: #000}
.scrollnav li a{position: relative;margin: auto;width: 14px;height: 14px;border-radius: 50%;border: 2px solid #332408;cursor: pointer;}
.scrollnav li:nth-child(1n+2) a{margin-top: 20px}
.scrollnav li:nth-child(1n+2) a::before{content: "";position: absolute;width: 2px;height: 14px;top: -19px;left: 0;right: 0;margin: 0 auto;background: url(../01_29/img/ico_line.png) no-repeat 50% 0;}
.scrollnav li a.on{background: #000}
.scrollnav li span{display: none;position: absolute;top: -4px;left: -75px;text-align: right;width: 65px;font-size: 15px;font-weight: bold}
.scrollnav li a.on span{display: block}
.scrollnav li:nth-child(2) a{border-color: #1f2771}
.scrollnav li:nth-child(2) a.on{background: #1f2771;color: #1f2771}
.scrollnav li:nth-child(3) a{border-color: #23d4bd}
.scrollnav li:nth-child(3) a.on{background: #23d4bd;color: #23d4bd}
.scrollnav li:nth-child(4) a{border-color: #fff}
.scrollnav li:nth-child(4) a.on{background: #fff;color: #fff}

.scrollnav.on li:nth-child(2) a{border-color: #fff}
.scrollnav.on li:nth-child(3) a{border-color: #fff}
.scrollnav.on li:nth-child(1n+2) a::before{content: "";background: url(../01_29/img/ico_line2.png) no-repeat 50% 0;}
.scrollnav.on{background: url(../01_29/img/ico_mouse2.png)no-repeat center bottom;}
.scrollnav.on a{border-color: #fff;color: #fff;background: #fff}
/*스크롤 네비*/

section{position: relative;height: 100vh}
section.on{animation: sectionon .8s ease }
section.off{animation: sectionoff 1s ease }

.topanibox{position: absolute;z-index: 1000;width: 100%;}

@keyframes sectionon{
    from{opacity: .5;left: -100%}
    to{opacity: 1;left: 0}
}
@keyframes sectionoff{
    from{opacity: .5;left: 0}
    to{opacity: 1;left: -100%}
}

.insect{overflow: hidden;position: absolute;left: 47%;top: 50%;opacity: 0;width: 1170px;height: 0;background: #fff;transform: translate(-50%,-50%);transition: all 1s linear}
.insect.on{height:400px;opacity: 1}

#sect1{background: url(../01_29/img/bg_facTv.jpg)no-repeat center bottom;background-size: cover;}
#sect1 .insect{background: url(../01_29/img/obj_facTv01.png)no-repeat center bottom}
#sect1 .insect h2{position: absolute;width: 700px;z-index: 10;left: 50%;background: url(../01_29/img/txt_facTv01.png)no-repeat center left;padding-left: 235px;font-size: 2.8em;font-weight: 100;color: #fff;font-family: 'Jua', sans-serif;text-align: left;transform: translateX(-50%)}
#sect1 .insect .inTv{position: absolute;overflow: hidden;left: 256px;bottom: 56px;width: 641px;height: 416px;font-size: 0;border-radius: 28px;background: #19283d;z-index: 1000;}
#sect1 .insect .inTv .inTvUi{width: 100%;height: 360px;}
#sect1 .insect .inTv .tvMenu{position: absolute;left: 0;bottom: 0;width: 100%;height: 56px;border-radius: 0 0 28px 28px;background: #fff;border-top: 1px solid #ccc;}
.tvMenu .tit a{float: left;text-indent: -9999px;background: url(../01_29/img/youtube_btn.png)no-repeat left top;width: 126px;height: 56px}
.tvMenu ul{float: left;width: 515px;height: 56px;text-align: center}
.tvMenu li{width: 20%;height: 56px;float: left;}
.tvMenu li:nth-child(1n+2){border-left: 1px solid #666}
.tvMenu li a{padding-top: 4px}
.tvMenu li p{line-height: 25px;letter-spacing: -1px;color: #999;font-size: 12px;}
.tvMenu li span{line-height: 25px;color: #333;font-size: 14px;}
.tvMenu li.on{background: #d72525}
.tvMenu li.on p{color: #fff}
.tvMenu li.on span{color: #fff}
#sect1 .insect.on{height:650px;top: 60%;}
#sect1::before{content: '';position: absolute;width: 100%;height: 100%;left: 0;top: 0;background: url(../01_29/img/obj_facTv02.png)no-repeat center center}

#sect2{background: url(../01_29/img/bg_recomEvent.jpg)no-repeat left top;background-size: cover;}
#sect2 .insect{}
#sect2 a{display: block;position: absolute;top: 45%;z-index: 50;}
.slideContainer{position: relative;width: 700px;height: 400px;margin: 50px auto;border: 1px solid rgb(247, 4, 4)}
.slideWrap{width: 125%;position: relative;margin: auto;display: flex;margin-left: -25%;margin-top: 40px}
.slide{border: 1px solid #000;width: 20%}
.slide img{width: 100%;}
a.prev{left: 0}
a.next{right: 0}
.pointer{position: absolute;left: 50%;bottom: 5%;display: flex;justify-content: center;z-index: 100;transform: translateX(-50%);}
.pointer li{width: 30px;height: 30px;border-radius: 30px;background: #eee;text-align: center;line-height: 30px;margin: 10px;
    cursor: pointer;transition: all .5s ease}
.pointer li.on{background: #000;color: #fff;width: 60px}

#sect3{background: url(../01_29/img/bg_webzin.jpg)no-repeat left top;background-size: cover;}
#sect4{background: url(../01_29/img/bg_news.jpg)no-repeat left top;background-size: cover;}


@media only screen and (min-width: 901px) {

}
@media only screen and (max-width: 900px) {

}