@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 모바일 메인 css
 * date : 2018-02-27
******************************************************** */


/* ******************  메인 비주얼 ********************** */
/* Main Layout :: VISUAL */
#mainVisual{width:100%; overflow:hidden;}
#mainVisual .slick-track,
#mainVisual .slick-list {
	-webkit-perspective: 2000;
	-webkit-backface-visibility: hidden;
}
.visual-img{width:100%;}
.visual-img li img{width:100%;}

/* 메인 비주얼 :: 버튼 */
#mainVisual .slick-dots{position:absolute;text-align:center; left:20px; top:50%; transform:translateY(-50%); margin-top:-8%}
#mainVisual .slick-dots li{position:relative; height:8px; padding:16px 0; }
#mainVisual .slick-dots li:before,
#mainVisual .slick-dots li:after{position:absolute; left:50%; top:0px;width:2px; height:16px; margin-left:-1px; background-color:#fff; opacity:0.5;filter:Alpha(opacity=50); content:"";}
#mainVisual .slick-dots li:after{bottom:0; top:auto;}
#mainVisual .slick-dots li:first-child:before,
#mainVisual .slick-dots li:last-child:after{display:none;}
#mainVisual .slick-dots li button{
	cursor:pointer; margin:0px; padding:0px; background:none; font-size:0; width:8px; height:8px; border:2px solid #fff; vertical-align:top;
	-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;
}
#mainVisual .slick-dots li.slick-active button{background-color:#dadf00; border-color:#dadf00}		/* 버튼 active */

/* 메인 비주얼 :: 로딩circle */
.circle-line{position:absolute; top:8px; left:-8px; width:24px; height:24px; z-index:999; transition:opacity 0.2s; opacity:0;filter:Alpha(opacity=0);}
.circle-line:before{position:absolute; top:0px; left:0px; width:100%; height:100%; box-sizing:border-box; border:3px solid #fff; content:""; opacity:0.25;filter:Alpha(opacity=25);
	-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;
}
.halfclip {overflow:hidden; width:50%; height:100%; position:absolute; right:0px; transform-origin: left center; }
.slick-active .circle-line .halfclip {
	animation: cliprotate 4s 1;
	-webkit-animation: cliprotate 4s 1;
	-ms-transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg);
} 
@keyframes cliprotate {
	0% {-ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg);}
	50% {-ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg);}
	50.01% {-ms-transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg);}
	100% {-ms-transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg);}
}
@-webkit-keyframes cliprotate {
	0% {-ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg);}
	50% {-ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg);}
	50.01% {-ms-transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg);}
	100% {-ms-transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg);}
}
.halfcircle {
	box-sizing: border-box; height:100%; position:absolute; right:0; visibility:hidden;
	border: solid 3px transparent; border-top-color: #fff; border-left-color: #fff;
	border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; -o-border-radius:50%;
	transition: visibility 0.2s cubic-bezier(0.65, 0.02, 0.23, 1) ;
}
.clipped {width:200%; transform: rotate(135deg); }
.slick-active .circle-line{opacity:1.0;filter:Alpha(opacity=100);}
.slick-active .halfcircle{visibility:visible;}
.slick-active .clipped{animation: rotate 2s linear 2;}
.slick-active .circle-fixed{animation: showfixed 4s 1;}
@keyframes rotate {
	0% {transform: rotate(-45deg);}
	100% {transform: rotate(135deg);}
}
.circle-fixed {
	width:24px;
	transform: rotate(135deg);  
	opacity: 1;
}
@keyframes showfixed {
  0% {opacity: 0;}
  49.99% {opacity: 0;}
  50% {opacity: 1;}
 100% {opacity: 1;}
}
/* ******************  메인 컨텐츠 ********************** */

/* -------- 메인  :: 공통 -------- */
.main-tit-box{margin-bottom:18px;}
.main-tit-box h3{float:left; color:#222; font-size:21px; letter-spacing:-0.5px; font-weight:500}
.main-tit-box .main-bbs-more-btn{float:right; color:#333; font-size:20px; letter-spacing:-0.25px; margin-top:3px;}

/* -------- 메인  :: 광고영역 -------- */
#mainLinkListCon{margin-top:-16.5%; margin-bottom:50px;}
.promotion-rolling-list-wrapper{padding-left:15px; }
.main-promotion-list-container .promotion-list-item{width:72%; }
.main-promotion-list-container .promotion-list-item a{display:block;}
.main-promotion-list-container .promotion-list-item:nth-child(3n-2) a{border-top:3px solid #1eb3ea;}
.main-promotion-list-container .promotion-list-item:nth-child(3n-1) a{border-top:3px solid #ffe000;}
.main-promotion-list-container .promotion-list-item:nth-child(3n-0) a{border-top:3px solid #eb6e9a;}
.main-promotion-list-container .promotion-list-item .main-promotion-thumb{position:relative; height:0; padding-top:69.57%;}
.main-promotion-list-container .promotion-list-item .main-promotion-thumb img{position:absolute; top:0px; left:0px; width:100%; height:100%;}
.main-promotion-list-container .promotion-list-item .main-promotion-info-box{height:100px; padding:22px 20px; background-color:#fff; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
 box-sizing: border-box; }
.main-promotion-list-container .promotion-list-item .main-promotion-tit{display:block; color:#222; font-size:18px; letter-spacing:-0.35px; margin-bottom:8px }
.main-promotion-list-container .promotion-list-item .main-promotion-txt{height:34px; overflow:hidden; font-size:13px; color:#888; line-height:17px;}
.main-promotion-list-container .promotion-list-item .main-promotion-more-btn{color:#ddd; font-size:24px;}
.main-promotion-list-container .promotion-list-item a:hover .main-promotion-more-btn{color:#023793;}
.main-promotion-list-container .promotion-button-box{position:absolute; top:50%; left:72%; width:55px;margin-left:15px; text-align:center;}
.main-promotion-list-container .promotion-next-btn{display:inline-block; width:25px; height:25px; line-height:25px; text-align:center;  margin-top:-12px; cursor:pointer; border:1px solid #9a9a9a; cursor:pointer; z-index:8; color:#888; background-color:#f6f6f6; border-radius:50%; margin-left:0px;}
.main-promotion-list-container .promotion-next-btn i{font-size:18px; line-height:25px;}

/* -------- 메인 :: Noitice -------- */
#mainNoticeCon{padding-bottom:24px}
#noticeHeadline{margin-bottom:19px}
.headline-list-con{margin:0 -2%;}
.headline-list-con li{float:left; position:relative; width:46%; margin:0 2%;}
.headline-list-con li .notice-thumb{display:block; height:0; position:relative; padding-top:76.11%}
.headline-list-con li .notice-thumb img{position:absolute; top:0px; left:0px;width:100%; height:100%;}
.headline-list-con li .notice-list-tit{position:absolute; bottom:0px; left:0px; width:100%; height:30px; line-height:30px; padding:0 10px; background-color:rgba(0,0,0,0.55);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	 box-sizing: border-box; 
	color:#fff;
	font-size:12px;
	letter-spacing:-0.5px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
} 
#mainNoticeList{border:1px solid #e5e5e5; padding:0 17px; background-color:#fff;}
#mainNoticeList .cm-bbs-list-tbl .cm-bbs-item:first-child{border-top:0;}
#mainNoticeList .cm-bbs-list-tbl .cm-bbs-item:last-child{border-bottom:0;}
/* -------- 메인 :: 학생인터뷰 -------- */
#mainStudentInterviewCon{background-color:#fff; padding:50px  15px 45px}
.main-student-list-con{margin:0}
.student-rolling-list-container{padding:0 15px;}
.student-rolling-list-container .student-list-item{width:93%}
.student-rolling-list-container .student-list-item a{display:block; height:250px; border:1px solid #ddd; padding:15px; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
 box-sizing: border-box; }
.student-rolling-list-container .student-list-item .student-info-box{display:inline-block; width:120px; margin-right:25px; vertical-align:middle; }
.student-rolling-list-container .student-list-item .student-info-box .student-thumb{display:block; width:100%;}
.student-rolling-list-container .student-list-item .student-info-box .student-thumb img{width:100%;}
.student-rolling-list-container .student-list-item .student-name{font-size:20px; letter-spacing:-0.25px; font-weight:500; text-align:center; padding-top:18px; }
.student-rolling-list-container .student-list-item .student-name dt{font-size:20px; color:#222; font-size:500;}
.student-rolling-list-container .student-list-item .student-name dd{color:#999; font-weight:400; font-size:13px; margin-top:7px; margin-bottom: 7px;}
.student-rolling-list-container .student-list-item .student-txt-box {display:inline-block; vertical-align:middle; width:calc(100% - 150px);font-size:18px;line-height:24px;color:#222;font-style:italic;}
.student-rolling-list-container .student-list-item .student-txt-box em {display:block;font-family:'CHONBUKL';font-size:45px;line-height:1px;color:#ccc;margin:0 auto 5px;}
.student-rolling-list-container .student-list-item .student-txt-box em.last {margin:-5px auto 0;-webkit-transform: rotate(90deg);-moz-transform: rotate(180deg);-ms-transform: rotate(180deg);-o-transform: rotate(180deg);transform: rotate(180deg);}

.student-btn-controls{margin-top:24px; }
.student-btn-controls ul{margin:0 -1%;}
.student-btn-controls ul li{float:left; width:48%; margin:0 1%;}
.student-btn-controls ul li a{display:block; height:40px; line-height:40px; color:#fff; font-size:13px; text-align:center; background-color:#222;}

/* -------- 메인 :: 하단배너 -------- */
#mainBannerCon{}
.main-bottom-banner img{width:100%;}