.quick_menu{display:none; }
.imgArea img{width:100%;height: 100%;display:block; }
input{border:none;  -webkit-appearance:none; -webkit-border-radius:0; }
/* ## QUICK_MENU ## */
.s_qMenu{ width:100px; position:fixed; top:50%; right:5%; z-index:999; transform:translate(0,-115%); }
.s_qMenu p{width:100px; height:100px; display:table; margin-top:-10px;}
.s_qMenu p a{display:table-cell; width:100%; height:100%; color:#fff; font-weight:900; background-color:#ccc; text-align:center; border-radius:50%; vertical-align:middle; background-color:#FF5438; }
.s_qMenu p span{display:block; }
.s_btnArea{display:none;}
.q_btnArea{display:none;}
/* GRAMMAR MAIN */
.visual{ background-image:linear-gradient(to top, #172142, #0C1532); overflow:hidden; }
.visual .imgArea{height: 100%;}
.visual .imgArea img{width:80%; vertical-align:bottom; margin:0 auto; }
/* SECTION01 */
.section01{width:100%; margin:0 auto; padding-bottom:150px; background-color:#F2F2F2; }
.section01 h3{font-size:48px; padding:130px 0 50px; text-align:center; }
.section01 h3 span{ font-family:'NanumSquareB', sans-serif; }
.section01 .imgArea{max-width:1281px; margin:0 auto; }
/* SECTION02 */
.section02{ width:100%; padding:120px 0 100px; height: auto;}
.section02 h3{text-align:center; font-family:'NanumSquareB', sans-serif; font-size:40px; }
.section02 h3 span{color:#FF7D00; }
.section02 p{text-align:center; font-size:25px; margin-top:25px; padding-bottom:25px;  }
.videoWrap{ max-width:1000px; margin:0 auto; }
.videoArea{ width:100%; height:0; padding:0 0 56.25% 0; background-color:#ccc;position: relative;top: auto;left: auto;margin-left: 0;}
/* SECTION03 */
.section03{ padding:100px 0; background-color:#F2F2F2}
.section03 h3{ text-align:center; font-size:52px; padding-bottom:50px;  }
.section03 h3 span{ font-family:'NanumSquareB', sans-serif; color:#FF7D00; }
.section03 .imgArea{max-width:1000px; margin:0 auto; box-shadow:2px 2px 30px #ccc; }
/* SECTION04 */
.section04 h3{ text-align:center; font-size:52px; padding-bottom:50px;  }
.section04 h3 span{ font-family:'NanumSquareB', sans-serif; color:#FF7D00; }
.section04 .imgArea{max-width:1269px; margin:0 auto; }
/* SECTION05 */
.section05{max-width:1260px; width:100%; margin:0 auto; }
.section05 h3{font-size:48px; padding:130px 0 50px; text-align:center; }
.section05 h3 span{ font-family:'NanumSquareB', sans-serif; }
.section05 .imgArea{max-width:1342px; margin:0 auto; }
/* SECTION06 VIDEO LIST */
.section06{padding: 0;background: none;}
.section06 h3 img{width:100%;}
.section06 h3 .m_img{display:none;}
.searchArea{max-width:960px; margin:40px auto; background-color:#F3F3F3; text-align:center; padding:30px 0; border-radius:10px; }
.searchArea input[type="text"]{ width:70%; height:45px; border:2px solid #ddd; text-indent:20px; box-sizing:border-box; font-size:15px;}
.searchArea input[type="submit"]{ width:45px; height:45px; background:url(../../images/sleeping/search_btn.png)no-repeat; background-position:center; vertical-align:top; }

.listArea{ width:1150px; margin:0 auto; }
.textArea{color:#8C8C8C; font-size:17px; padding-bottom:20px; }
.videoList{border-top:3px solid #61829F; border-bottom:3px solid #61829F; }
.videoList li{width:100%; display:table; padding:1% 0; border-bottom:1px solid #DEDEDE; }
.videoList li:last-child{border-bottom:none; }
.videoList li:after{content:""; display:block; clear:both; }
.videoList li p{ /*float:left;*/ text-align:center; display:table-cell; vertical-align:middle; }
.videoList li p.videoNum{width:5%; font-weight:900; }
.videoList li p.videoTitle{width:45%; line-height:1.5; font-weight:900; }
.videoList li p.videoTitle span{display:block; text-align:left; }
.videoList li p.videoImg{width:10%;}
.videoList li p.videoImg img{width:100%; max-width:80px; }
.videoList li p.videoBtn{width:40%; }
.videoList li p.videoBtn a{display:inline-block; width:21%; margin-right:10px; background-color:#F3F3F3; border-radius:15px; color:#9A9A9A; padding:5% 0; position:relative; line-height:1.9; font-size:15px; transform:skewY(-0.03deg); cursor:pointer;}
.videoList li p.videoBtn a strong{display:block; color:#000; }
.videoList li:hover{ background-color:#F6F6F6;}
.videoList li:hover p.videoBtn a{background-color:#fff; }
.videoList li p.videoBtn a:hover{ background-color:#F6984D; color:#fff; }
.freeCon p.videoBtn a:nth-child(2):after{content:"FREE"; display:block; position:absolute; top:0; left:0; background-color:#F6984D; padding:0.7% 13%; color:#fff; font-weight:900; border-radius:15px 0; font-size:12px; }
/* ## PAGINATION ## */
.pagination{width:100%; padding-bottom:2.5%; text-align:center; margin-top:2%; }
.pagination ul{display:inline-block;}
.pagination ul li{display:inline-block;}
.pageNum_btn{vertical-align:top;}
.pagination ul li div{width:35px; height:35px; }
.pagination ul li div p{font-size:18px; color:#888; text-align:center; line-height:38px;}
.pagination ul li p a{color:#888; margin-top:10px;}
.pagination ul li > p{margin:10px 10px 0;}
.pagination ul li p a:link, .pagination ul li p a:visited{color:#888; }
/* PAGINATION EVENT */
.pagination ul li div.active{background-color:#233950; }
.pagination ul li div.active p{color:#fff; }
.section07 img{display:block; }

/* MOBILE */
.m_content{display:none; }
.m_content img{width:100%; display:block; }
.q_btnArea{overflow:hidden;}
.q_btnArea a{ display:block; width:100%; padding:6% 0; color:#fff; text-align:center; font-weight:900; font-size:17px; background-color:#FF5438;}

@media all and (min-width:1281px) and (max-width:1600px){
    .section04 h3 span{display:block;}
}

@media all and (min-width:781px) and (max-width:1280px){
    .section04 h3{font-size:45px;}
    .section04 h3 span, .section02 h3 span, .section03 h3 span{display:block;}
    .listArea li p.subButton a{margin-left:1px;}
}

@media all and (min-width:481px) and (max-width:780px){
    #container{margin:0 auto; }
    .s_qMenu{display:none;}
    .q_btnArea{display:block;}
    .w_content{display:none;}
    .m_content{display:block; }
    .visual{height:auto; }
    .visual .imgArea img{width:100%;}
    .classBtn img{ width:30px; vertical-align:middle; margin-right:10px; }
    .section01, .section02, .section03, .section04, .section05{padding:0; }
    .section06 h3 .m_img{display:block; width:100%; }
    .section06 h3 .w_img{display:none;}
    .searchArea{margin:0 auto; border-radius:0;}
    .textArea{font-size:15px; padding-top:20px; text-align:center; }
    .listArea{width:100%; }
    .videoList{border-top:2px solid #61829F; border-bottom:2px solid #61829F;}
    .videoList li{display:block; padding:0; }
    .videoList li p{display:block; float:left; }
    .videoList li p.videoNum{display:none; }
    .videoList li p.videoImg{width:25%; padding:3%; box-sizing:border-box; }
    .videoList li p.videoTitle{width:75%; line-height:1.8; padding-top:5.5%; background:url(../../images/common/arrow.png)no-repeat; background-position:top 50% right 10px;  }
    .videoList li p.videoTitle span{text-overflow:ellipsis; white-space:nowrap; width:85%; overflow:hidden; }
    .videoList li p.videoBtn{width:100%; padding:3% 0; background-color:#ECECEC; border-top:1px solid #dedede;}
    .videoList li p.videoBtn a{padding:4% 0; width:18%; border-radius:5px; background-color:#fff; }
    .freeCon p.videoBtn a:nth-child(2):after{border-radius:5px 0 15px; }

    .pagination{padding:5% 0 10%; }
}
@media all and (min-width:320px) and (max-width:480px){
    #container{margin:0 auto; }
    .s_qMenu{display:none;}
    .q_btnArea{display:block;}
    .w_content{display:none;}
    .m_content{display:block; }
    .visual{height:auto; }
    .visual .imgArea img{width:100%;}
    .classBtn img{ width:30px; vertical-align:middle; margin-right:10px; }
    .section01, .section02, .section03, .section04, .section05{padding:0; }
    .section06 h3 .m_img{display:block; width:100%; }
    .section06 h3 .w_img{display:none;}
    .searchArea{margin:0 auto; border-radius:0;}
    .textArea{font-size:15px; padding-top:20px; text-align:center; }
    .listArea{width:100%; }
    .videoList{border-top:2px solid #61829F; border-bottom:2px solid #61829F;}
    .videoList li{display:block; padding:0; }
    .videoList li p{display:block; float:left; }
    .videoList li p.videoNum{display:none; }
    .videoList li p.videoImg{width:25%; padding:3%; box-sizing:border-box; }
    .videoList li p.videoTitle{width:75%; line-height:1.8; padding-top:5.5%; background:url(../../images/common/arrow.png)no-repeat; background-position:top 50% right 10px;}
    .videoList li p.videoTitle span{text-overflow:ellipsis; white-space:nowrap; width:85%; overflow:hidden; }
    .videoList li p.videoBtn{width:100%; padding:3% 0; background-color:#ECECEC; border-top:1px solid #dedede;}
    .videoList li p.videoBtn a{padding:4% 0; width:18%; border-radius:5px; background-color:#fff; font-size:12px; }
    .freeCon p.videoBtn a:nth-child(2):after{border-radius:5px 0 13px; font-size:10px; padding:0.5% 13%;}
    .pagination{padding:5% 0 10%; }
}