*{margin:0;padding:0}
li{list-style:none}
a{text-decoration:none}
img{border:none;display:block}
body,html{height:100%;font-family:"nanumsquare";overflow:hidden}
@font-face{font-family:"nanumsquare";font-style:normal;font-weight:300;src:local(※),url(../font/NanumSquareL.woff)}
@font-face{font-family:"nanumsquare";font-style:normal;font-weight:400;src:local(※),url(../font/NanumSquareR.woff)}
@font-face{font-family:"nanumsquare";font-style:normal;font-weight:700;src:local(※),url(../font/NanumSquareB.woff)}
@font-face{font-family:"nanumsquare";font-style:normal;font-weight:900;src:local(※),url(../font/NanumSquareEB.woff)}
.mainBg{position:relative; background:url(../images/bg.png);width:1920px;height:1200px;overflow:hidden}
.mainBg img {}
.mainBg .imgCloudRt{top:50px;margin-left:750px;background:url(../images/main_cloud_01.png) no-repeat center;background-size:100%;width:82px;height:33px}
.mainBg .imgLadybug{top:200px;margin-left:490px;background:url(../images/main_animal_01.png) no-repeat center;background-size:100%;width:61px;height:54px}
.mainBg .imgLion{top:225px;margin-left:635px;background:url(../images/main_animal_02.png) no-repeat center;background-size:100%;width:242px;height:312px}
.mainBg .imgMelody1{top:260px;margin-left:855px;background:url(../images/main_mel_01.png) no-repeat center;background-size:100%;width:125px;height:156px}
.mainBg .imgHorse{top:545px;margin-left:575px;background:url(../images/main_animal_04.png) no-repeat center;background-size:100%;width:262px;height:344px}
.mainBg .imgRabbit{top:750px;margin-left:615px;background:url(../images/main_animal_05.png) no-repeat center;background-size:100%;width:98px;height:160px}
.mainBg .imgGull{top:180px;margin-left:-570px;background:url(../images/main_animal_03.png) no-repeat center;background-size:100%;width:160px;height:64px}
.mainBg .imgMelody2{top:180px;margin-left:-760px;background:url(../images/main_mel_01.png) no-repeat center;background-size:100%;width:125px;height:156px}
.mainBg .imgCloudLt{top:360px;margin-left:-900px;background:url(../images/main_cloud_02.png) no-repeat center;background-size:100%;width:82px;height:33px}
.mainBg .imgClef{top:350px;margin-left:-845px;background:url(../images/main_mel_02.png) no-repeat center;background-size:100%;width:214px;height:552px}
.mainBg .imgChic{top:440px;margin-left:-855px;background:url(../images/main_animal_06.png) no-repeat center;background-size:100%;width:214px;height:180px}
.mainBg .imgDog{top:760px;margin-left:-910px;background:url(../images/main_animal_07.png) no-repeat center;background-size:100%;width:173px;height:181px}
.mainBg .imgCat{top:700px;margin-left:-665px;background:url(../images/main_animal_08.png) no-repeat center;background-size:100%;width:150px;height:194px}
.mainBg .mainTitle{width:1240px;margin:0 auto;text-align:center;padding-top:77px}
.mainBg .mainTitle h1 img{margin:0 auto;margin-bottom:20px}
.mainBg .mainTitle h2{font-size:80px;font-weight:900;color:#4b4b65;}
.mainBg .mainCont{width:1315px;height:674px;margin:50px auto 0}
.mainBg .mainCont .rainBow{position:absolute;top:695px;left:50%;margin-left:-960px;background:url(../images/main_rainbow.png) no-repeat center;background-size:100%;width:1920px;height:323px}
.mainBg .navWrap{position:absolute;top:310px;left:375px;}
.mainBg .navWrap:after{content:"";clear:both;display:block;height:0;visibility:hidden}
.mainBg .navWrap > nav{float:left;height:510px;overflow:hidden}
.mainBg .navWrap .nav1{width:415px;margin-top:45px; padding:0px 12px;border-right:4px solid #efefef;box-sizing:border-box}
.mainBg .navWrap .nav1 > ul > li{height:80px;line-height:80px; margin-left:30px; vertical-align:middle; text-indent:18px;font-size:36px;font-weight:900;color:#333;transition:all .3s;cursor:pointer;}
.mainBg .navWrap .nav1 > ul > li.none{color:#d0d0d0; cursor:default;}
/* .mainBg .navWrap .nav1 > ul > li:hover{color:#f97c19;display:block;border-radius:350px;background:#efefef} */
.mainBg .navWrap .nav1 > ul > li.select1{color:#e68200;display:block;border-radius:20px;background:#ffebcd}
.sample{vertical-align:middle; margin-left:5px; padding:3px 10px; font-size:20px; font-weight:900; background-color:#ffc015; border-radius:7px;}
.mainBg .navWrap .nav2{width:390px;box-sizing:border-box;margin-top:45px;padding:0 0 0 15px;border-right:4px solid #efefef;}
.mainBg .navWrap .nav2 h2{font-size:24px; text-indent:0; padding:25px 0 15px 0px; font-weight:900;}
.mainBg .navWrap .nav2 .none{color:#d0d0d0; cursor:default;}
.mainBg .navWrap .nav2 ul > li{position:relative; width:240px; height:auto; line-height:32px; font-size:22px; font-weight:700; padding:0px 0 5px 75px; color:#283250;transition:all .3s; cursor:pointer; word-break: keep-all;}
.mainBg .navWrap .nav2 ul > li .pageNum{position:absolute; display:inline-block; font-size:20px; font-weight:700; margin-left:-60px; width:50px; text-align:right;}

.mainBg .navWrap .nav2 h2.on,
.mainBg .navWrap .nav2 .section.on,
.mainBg .navWrap .nav2 .section:hover{color:#f97c19;}

.mainBg .navWrap .mainScroll{float:left;width:8px;height:480px;background:#efefef;position:relative}
.mainBg .navWrap .mainScroll .mainScbar{background:url(../images/main_scrbar.png) no-repeat center;background-size:100%;width:20px;height:51px;position:absolute;top:0;left:50%;margin-left:-10px;cursor:pointer}
.mainBg .navWrap .nav3{margin-top:42px; margin-left:20px;width:280px;}
.mainBg .navWrap .nav3 ul li{height:255px; text-align:center;font-size:40px;font-weight:900;color:#222;cursor:pointer;box-sizing:border-box;transition:all .3s}
.mainBg .navWrap .nav3 ul li:first-child{padding-top:30px;border-bottom:4px dashed #efefef;}
.mainBg .navWrap .nav3 ul li:last-child{/*line-height:28px;*/ padding-top:40px;}
.mainBg .navWrap .nav3 ul li:hover{color:#e68200}
.mainBg .navWrap .nav3 ul li > div{margin:10px auto 0}
.mainBg .navWrap .nav3 ul li .iconBook{position:relative; background:url(../images/btn_icon_01.png) no-repeat center;background-size:100%;width:111px;height:111px;}
.mainBg .navWrap .nav3 ul li .iconBook .iconOver{opacity:0;}
.mainBg .navWrap .nav3 ul li .iconBook .iconOver.icB{ background:url(../images/btn_icon_01_over.png) no-repeat center;background-size:100%;width:111px; height:111px;}
.mainBg .navWrap .nav3 ul li .iconTeach{position:relative; background:url(../images/btn_icon_02.png) no-repeat center;background-size:100%;width:111px;height:111px}
.mainBg .navWrap .nav3 ul li .iconTeach .iconOver.icT{ background:url(../images/btn_icon_02_over.png) no-repeat center;background-size:100%;width:111px;height:111px;opacity:0;}
.mainBg .navWrap .nav3 ul li .topTt{display:block;font-size:24px;text-align:left;margin-left:64px}
.mainBg .mainBottom{position:relative}
.mainBg .mainBottom ul{position:absolute;top:20px;left:50%;margin-left:-560px}
.mainBg .mainBottom ul:after{content:"";clear:both;display:block;height:0;visibility:hidden}
.mainBg .mainBottom ul li{float:left;margin-right:25px;color:#222;font-weight:900;background:#fff; width:198px;height:55px; border:4px solid #5d9d3d; border-radius:40px;line-height:55px;text-align:center;font-size:24px;cursor:pointer;transition:all .3s;
box-shadow:0px 2px 15px #91949b;}
.mainBg .mainBottom ul li:last-child{margin-right:0}
.mainBg .mainBottom ul li:hover{color:#f97c19}
.mainBg .mainBottom ul li > div{display:inline-block;position:relative;margin-right:5px}
.mainBg .mainBottom ul li:nth-child(1) > div{top:8px;background:url(../images/nav_icon_01.png) no-repeat center;background-size:100%;width:20px;height:30px}
.mainBg .mainBottom ul li:nth-child(1) > div > .icB1{background:url(../images/nav_icon_01_over.png) no-repeat center;background-size:100%;width:20px;height:30px;opacity:0;}
.mainBg .mainBottom ul li:nth-child(2) > div{top:8px;background:url(../images/nav_icon_02.png) no-repeat center;background-size:100%;width:18px;height:30px}
.mainBg .mainBottom ul li:nth-child(2) > div > .icB2{background:url(../images/nav_icon_02_over.png) no-repeat center;background-size:100%;width:18px;height:30px;opacity:0;}
.mainBg .mainBottom ul li:nth-child(3) > div{top:4px;background:url(../images/nav_icon_03.png) no-repeat center;background-size:100%;width:24px;height:24px}
.mainBg .mainBottom ul li:nth-child(3) > div > .icB3{background:url(../images/nav_icon_03_over.png) no-repeat center;background-size:100%;width:24px;height:24px;opacity:0;}
.mainBg .mainBottom ul li:nth-child(4) > div{top:4px;background:url(../images/nav_icon_04.png) no-repeat center;background-size:100%;width:18px;height:26px}
.mainBg .mainBottom ul li:nth-child(4) > div > .icB4{background:url(../images/nav_icon_04_over.png) no-repeat center;background-size:100%;width:18px;height:26px;opacity:0;}
.mainBg .mainBottom ul li:nth-child(5) > div{top:4px;background:url(../images/nav_icon_05.png) no-repeat center;background-size:100%;width:24px;height:26px}
.mainBg .mainBottom ul li:nth-child(5) > div > .icB5{background:url(../images/nav_icon_05_over.png) no-repeat center;background-size:100%;width:24px;height:26px;opacity:0;}
.mainBg .mainBottom > div{position:absolute;left:50%}

footer{position:absolute; bottom:20px; width:100%; font-size:20px;font-weight:900;text-align:center}
/* @media (min-width:1441px) and (max-width:1600px){.mainBg{width:1600px}
.mainBg .mainTitle{padding-top:30px}
.mainBg .imgCloudRt{display:none}
.mainBg .imgLadybug{top:150px}
.mainBg .imgLion{display:none}
.mainBg .imgMelody1{display:none}
.mainBg .imgHorse{margin-left:540px;top:520px}
.mainBg .imgRabbit{top:720px}
.mainBg .imgGull{top:135px}
.mainBg .imgClef{display:none}
.mainBg .imgChic{display:none}
.mainBg .imgDog{display:none}
.mainBg .imgCat{top:670px}
.mainBg .mainCont .rainBow{top:645px}
.mainBg .navWrap{top:260px}
footer{margin:220px auto 0}
}
@media (min-width:1200px) and (max-width:1440px){.mainBg{width:1440px}
.mainBg .mainTitle{padding-top:30px}
.mainBg .imgCloudRt{display:none}
.mainBg .imgLadybug{top:150px}
.mainBg .imgLion{display:none}
.mainBg .imgMelody1{display:none}
.mainBg .imgHorse{display:none}
.mainBg .imgRabbit{top:720px}
.mainBg .imgGull{top:135px}
.mainBg .imgMelody2{display:none}
.mainBg .imgCloudLt{display:none}
.mainBg .imgClef{display:none}
.mainBg .imgChic{display:none}
.mainBg .imgDog{display:none}
.mainBg .imgCat{top:670px}
.mainBg .mainCont .rainBow{top:695px; width:1440px; left:0px; margin-left:0px;}
.mainBg .navWrap{top:260px}
footer{margin:220px auto 0}
}
@media (min-width:300px) and (max-width:1199px){.mainBg{width:1250px}
.mainBg .mainTitle{padding-top:30px}
.mainBg .imgCloudRt{display:none}
.mainBg .imgLadybug{top:150px}
.mainBg .imgLion{display:none}
.mainBg .imgMelody1{display:none}
.mainBg .imgHorse{display:none}
.mainBg .imgRabbit{display:none}
.mainBg .imgGull{top:135px}
.mainBg .imgMelody2{display:none}
.mainBg .imgCloudLt{display:none}
.mainBg .imgClef{display:none}
.mainBg .imgChic{display:none}
.mainBg .imgDog{display:none}
.mainBg .imgCat{display:none}
.mainBg .mainCont .rainBow{display:none;}
.mainBg .navWrap{top:260px}
footer{margin:220px auto 0}
} */


.contentsScroll{width:100%;max-height:510px}
.contentsScroll .scrollDetail{position:relative;display:inline-block;height:100%;}
.scroll-wrapper{overflow:hidden!important;padding:0!important}
.scroll-wrapper > .scroll-content{border:none!important;box-sizing:content-box!important;height:auto;left:0;margin:0;max-height:none;max-width:none!important;overflow:scroll!important;padding:0;position:relative!important;top:0;width:auto!important}
.scroll-wrapper > .scroll-content::-webkit-scrollbar{height:0;width:0}
.scroll-element{display:none}
.scroll-element,.scroll-element div{box-sizing:content-box}
.scroll-element.scroll-x.scroll-scrollx_visible,.scroll-element.scroll-y.scroll-scrolly_visible{display:block}
.scroll-element .scroll-bar,.scroll-element .scroll-arrow{cursor:default}
.scroll-textarea > .scroll-content{overflow:hidden!important}
.scroll-textarea > .scroll-content > textarea{border:none!important;box-sizing:border-box;height:100%!important;margin:0;max-height:none!important;max-width:none!important;overflow:scroll!important;outline:none;padding:2px;position:relative!important;top:0;width:100%!important}
.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar{height:0;width:0}
.contentsScroll > .scroll-element,.contentsScroll > .scroll-element div{border:none;margin:0;padding:0;position:absolute;z-index:10}
.contentsScroll > .scroll-element div{display:block;height:100%;left:0;top:0;width:100%}
.contentsScroll > .scroll-element.scroll-x{bottom:2px;height:8px;left:0;width:100%}
.contentsScroll > .scroll-element.scroll-y{position:absolute;top:0;right:5px;width:24px;height:100%}
.contentsScroll > .scroll-element .scroll-element_outer{overflow:hidden}
.contentsScroll > .scroll-element .scroll-element_track{position:absolute;top:0;right:0;margin-left:11px;width:8px;height:100%;background:#ebebeb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}
.contentsScroll > .scroll-element .scroll-bar{position:absolute;display:inline-block;top:0;left:4px;width:21px;height:71px!important;background:url(../../contents/common/images/scrollbtn.png) no-repeat; background-size:100%; cursor:pointer}

*{font-size:100%; -webkit-text-size-adjust:100%; font-variant-ligatures:none; -webkit-font-variant-ligatures:none; text-rendering:optimizeLegibility; -moz-osx-font-smoothing:grayscale; font-smoothing:antialiased; -webkit-font-smoothing:antialiased; text-shadow:rgba(0,0,0,.01) 0 0 1px;}

/* 실습 동영상 팝업 */
button {border:0; outline: 0; cursor:pointer;}
.popContainer {display:none; position:absolute; top:500px; right:300px; z-index: 10; width:550px; height:430px; padding:5px; background:#f97f1e; border-radius: 15px; cursor:default; box-shadow: 3px 5px 10px 0px #888;}	
.popTitle {width:100%; height:65px;}
.popTitle h4 {color:#fff; font-size:24px; line-height: 65px; font-weight: 900; text-align: center;}
.popContent {width:100%; height:364px; background:#fff; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}
.contentList li  {position:relative; font-size:24px; line-height:62px; font-weight: 900;}
.contentList li {height:60px; padding-left:27px; border-bottom: 1px solid #ddd;}
.contentList li:nth-child(6) {border-bottom: 0;}
.btnDown {float:right; margin:13px 15px 0 0; display:inline-block; width:76px; height:36px; background:url(../images/popup/icon_mp4.png) no-repeat;}
.btnDown.none {float:right; margin:13px 15px 0 0; display:inline-block; width:76px; height:36px; background:url(../images/popup/icon_mp4_n.png) no-repeat;}

.btnClose {position:absolute; display:inline-block; top:25px; right:30px; width:22px; height:22px; background:url(../images/popup/btnClose.png) no-repeat;}
.btnClose:hover {position:absolute; display:inline-block; top:25px; right:30px; width:22px; height:22px; background:url(../images/popup/btnClose_over.png) no-repeat;}