@charset "utf-8";

@import url('jquery.mCustomScrollbar.css');
#wrap{position:relative;}
#header .logo.main{}
#header .logo.main img{width:100%;}
#header .util{background-position:50% 0;width:50px;height:50px;}

#header .dday{position:absolute;top:20px;right:70px;font-size:25px;font-weight:bold;padding:5px 7px 7px 10px;border-radius:5px;color:rgba(255,255,255,0.9);background-color:#3060a7}
#header .dday:before{font-family:FontAwesomeS;content:'\f19d';font-size:90%;padding-right:5px;font-weight:normal;}
#header .dday i:before,#header .dday:after{font-size:65%;font-weight:normal;vertical-align:0.1em;font-style:normal}
#header .dday i:before{content:'수능 '}
#header .dday:after{content:'일'}

#header .sticky .util{ margin-top:-20px;}
#header .sticky .dday{background-color:rgba(0,0,0,0.6);right:50px;top:16px}

section{padding:50px 0;text-align:center;}
section h2 {display:block;font-size:3rem;font-family: 'Noto Bold';margin-bottom:7vh;text-transform:uppercase}
section h2 > p {margin-top:10px;font-size:35%;font-family: 'Noto Regular';opacity:.7;filter:alpha(opacity=70);line-height:normal}

#mainSlider{position:relative; overflow:hidden}
/*메인비주얼*/
.banner .bx-pager{position:absolute;left:3%;bottom:3%}
.banner .bx-pager .bx-pager-item{display:inline-block;margin:0 25px 0 0;vertical-align:top}
.banner .bx-pager a{font-size:0;background:#fff;border-radius:50%;margin:6px 0;width:12px;height:12px;display:block;}
.banner .bx-pager a.active{background:url(../image/main/pager.png) no-repeat 50%;width:24px;height:24px;margin:0}
.banner .bx-viewport{ height:auto !important}

#container{overflow:hidden}

#Right{position:absolute;top:0;left:83.3333%;width:50%;z-index:5;background:#fff;bottom:0; height:100%}

.community{position:relative;width:100%;height:100%; overflow:hidden}
.community h2{margin-left:5%;text-align:left;}

.dim{display:none;position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:rgba(255,255,255,0.8);z-index:999;}
.is-active .dim{display:block}

.movie{padding:0 5%;overflow:hidden;position:relative}
.movie ul{width:100%;overflow:hidden;position:relative}
.movie li{overflow:hidden;text-align:left;width:47.5%; margin-bottom:3%}
.movie li:nth-child(2){position:absolute;right:0%;top:25%;margin:0}
.movie .thumb,.movie .thumb img{width:100%;}
.movie .thumb{margin-bottom:10px;}
.movie strong{margin-bottom:10%;font-size:1.5em;font-weight:bold;color:#222;display:block;word-spacing:-0.05em}

#recentMR2{padding:0 5%;position:relative;text-align:left;}
#recentMR2 .recentHeader,#recentMR2 .recentBody{margin-left:53.5%}
#recentMR2:before {content:'';position:absolute;width:42.5%;background:url(../image/main/bbs.png) no-repeat 50% 0;background-size:100% auto;height:100%;}
#recentMR2 h3{display:block;font-weight:bold;font-size:1.4em;margin-bottom:1em;line-height:0.9em;letter-spacing:-0.05em;color:#3060a7 }
#recentMR2 .docTitle{margin-bottom:10px !important}
#recentMR2 .docTitle a{display:inline-block;min-height:25px;max-height:25px;font-size:1.2em;font-weight:400;word-break:break-all}
#recentMR2 .date{display:block;position:inherit}
#recentMR2 .icon{display:none;}
#recentMR2 .more{position:absolute;right:5%;bottom:5%;width:43px;height:43px;background:#b7b7b8;border-radius:50%;font-family:"FontAwesomeS";color:#fff;font-size:1.3em;text-align:center;font-size:0;cursor:pointer; z-index:2}
#recentMR2 .more:hover{background:#3060a7;}
#recentMR2 .more:before{content:'\f054';position:relative;top:10px;font-size:14px;}
#recentMR2 .link{position:absolute;left:0;right:0;top:0;bottom:0; z-index:1}

.conts01{background:url(../image/main/bg.jpg) no-repeat 50%;background-size:cover;}
.conts01 ul:after,.conts01 ul:before{display:table;content:'';clear:both}
.conts01 ul li{width:33.33%;float:left;margin-bottom:3%}
.conts01 ul li a{display:table;background-position:50%;background-repeat:no-repeat;transition:all 0.4s ease 0s;width:70%;background-size:100% auto;margin:0 auto;overflow:hidden}
.conts01 ul li a:hover{transform:scale(1.1); }
.conts01 ul li a:hover figcaption {transform:translate(0px, -3%);}
.conts01 ul li figcaption {display:table-cell;color:#fff;font-size:1.6em;text-align:center;vertical-align:middle;height:100%;font-weight:600; text-shadow:0 0 5px rgba(0,0,0,0.3);line-height: inherit}
.conts01 ul li figcaption em {display:block;margin:-15% 0 5%;font-size:0.8em; }

.conts01 ul li:nth-child(1) a{background-image:url(../image/main/who_01.png)}
.conts01 ul li:nth-child(2) a{background-image:url(../image/main/who_02.png)}
.conts01 ul li:nth-child(3) a{background-image:url(../image/main/who_03.png)}
.conts01 ul li:nth-child(4) a{background-image:url(../image/main/who_04.png);}
.conts01 ul li:nth-child(5) a{background-image:url(../image/main/who_05.png);}

.conts02{background:url(../image/main/bg2.jpg) no-repeat 50%;background-size:cover;}
.conts02 *{color:#fff}
.conts02 .teacher{overflow:hidden;position:relative; margin-bottom:2%}
.conts02 .teacher .tbox{float:left;padding-left:15px;padding-right:15px;width:25%}
.conts02 .thumb{margin:0 auto;}
.conts02 .thumb img{width:100%;height:auto;max-width:100%;}
.conts02 .teacher a{position:relative;display:table;margin:0 auto 30px; width:100%; height:100%;}
.conts02 .mask{opacity:0;background:url(../image/main/pt.png) repeat rgba(0,0,0,0.3);position:absolute;left:0px;right:0px;top:0px;bottom:-1px;color:#fff;text-align:left;}
.conts02 .teacher a:hover .mask{animation:fadeInUp;animation-duration:.5s; animation-fill-mode: both;}
@keyframes fadeInUp {from {opacity: 0;transform: translate3d(0, 100%, 0);}to {opacity: 1;transform: none;}}
.conts02 .mask figure {font-size:1.2em;position:absolute;left:8%;bottom:8%}
.conts02 .mask figure strong{font-size:1.5em; margin-bottom:5px;display:block}
.conts02 .mask figure strong:after{content:'선생님';font-size:0.7em;padding-left:3px;}
.conts02 .more{display:inline-block;position:relative;border:2px solid #fff;color:#fff;padding:0.7em 1em 0.7em 0;font-weight:600;font-size:120%;width:160px;}
.conts02 .more:after{position:absolute; border:1px solid #fff; content:'+';font-size:0.7em; line-height:12px; color:#fff;padding:0.2em; width:20px; height:20px; right:30px; top:32%; border-radius:50%;}

.conts03{background:url(../image/main/bg3.jpg) no-repeat 100% 100% #478FE4;background-size:auto 100%; text-align:left;line-height:normal}
.conts03 *{color:#fff; line-height:inherit}
.conts03 h2{font-weight:normal;}
.conts03 h2 span{color:rgba(0,0,0,0.8);font-size:100%;display:inline-block;white-space:nowrap}
.conts03 h2 p{color:rgba(0,0,0,0.7);letter-spacing:0.5em;font-size:30%;font-family:'Montserrat'; }
.conts03 dl {float:right; text-align:right; margin-top:30px}
.conts03 dl dt{font-size:1.1em;line-height:normal; vertical-align:middle; background:#333; padding:0.2em 0.4em; display:inline-block;}
.conts03 dl dd{font-size:1.1em;line-height:normal; vertical-align:middle; font-family:'Montserrat';font-size:2.4em;margin-left:10px;font-weight:600;letter-spacing:0;}
.conts03 dl dd span{font-size:80%}

@media only screen and (max-width:767px) {
	#header .logo{width:55%}
	#header .util{width:40px;height:40px;background-position:50% 100%;opacity:.7;filter:alpha(opacity=70)}
	#header .dday{top:15px;background-color:rgba(0,0,0,0.6);}
	
	.banner .bx-pager{left:0; width:100%;text-align:center; z-index:52}
	.banner li{overflow:hidden;}
	.banner img{width:135% !important;max-width:none;}
		
	.conts01 ul li a{width:88%;}
	.conts01 ul li span{display:block;}
	.conts01 ul li figcaption{font-size:1.33em}
		
	.conts02 .teacher .tbox{width:50%}
	.conts02 .mask{opacity:1;font-size:90%;background:rgba(0,0,0,0.2);bottom:0}
	.conts02 .mask:before{content:'';position:absolute;left:2%;right:2%;top:2%;bottom:2%;border:1px solid rgba(255,255,255,0.8)}
	.conts02 .mask figure{}
		
	.conts03 h2 p{margin-bottom:5px}
	
	#Right{position:static !important;width:100%;}
	.is-active .dim{display:none;}
	#Right .community{padding:50px 0}
	#Right .community h2{text-align:inherit}
	
	.movie strong{font-size:1.1em;}
	#recentMR2 h3{font-size:1.15em}

section h2 {font-size:2em;}
section h2 > p {font-size:45%;}
.conts03 dl dd strong{font-size:2em;}
.conts03 dl dd{font-size:0.9em;}

}