@charset "utf-8";
.blue {color:#33c1c2;vertical-align: top;}
.green {color:#67da7c;vertical-align: top;}
.table {display:table;width:100%;height:100%;}
.tableCell {display:table-cell;vertical-align:middle;text-align:center;}
#mainContents {position:relative;z-index:1;}

/* mainVisual */
#mainVisual {width:100%;position: relative;height:780px;margin-top:110px;}
#mainVisual .mask {overflow: hidden;}
#mainVisual .mask li {height:780px;overflow: hidden;position:relative;background-size:cover;background-position:50% 50%;}
#mainVisual .mask li > img {width: 100%;}
#mainVisual .mask li > span {display:block;width:100%;position:absolute;top:0;left:0;text-align: center;padding-top:75px;background-repeat:no-repeat;background-size:cover;background-position:50% 50%;}
#mainVisual .mask li.visual01 {background-image:url("../images/main/mainVisual01.jpg");}
#mainVisual .mask li.visual02 {background-image:url("../images/main/mainVisual02.jpg");}
#mainVisual .mask li.visual03 {background-image:url("../images/main/mainVisual03.jpg");}

#mainVisual .inner {position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;color:#fff;}
#mainVisual .txtBox {margin-top:-90px;}
#mainVisual p.txt01 {font-size:20px;}
#mainVisual p.txt02 {font-size:76px;font-weight:500;}
#mainVisual p.txt03 {font-size:18px;}
#mainVisual .pager {position:static;width: 100%;margin-top:30px;text-align: center;z-index: 2;}
#mainVisual .pager .swiper-pagination-bullet {margin: 0 3px;transition:all 0.25s;border-radius:0;width:6px;height:6px;background:#fff;opacity: 1;}
#mainVisual .pager .swiper-pagination-bullet-active {width:45px;background:url("../images/main/pager_on.png") no-repeat;}






#mainContents .conBox01 {background:#f4f4f4;}
#mainContents .conBox01 .quickMenu {background:#fff;overflow:hidden;position:relative;top:-100px;
-webkit-box-shadow: 1px 1px 25px 1px rgba(50, 50, 50, 0.2);
-moz-box-shadow:    1px 1px 25px 1px rgba(50, 50, 50, 0.2);
box-shadow:         1px 1px 25px 1px rgba(50, 50, 50, 0.2);
}
#mainContents .conBox01 .btn {float:left;width:300px;height:300px;}
#mainContents .conBox01 .btn a {display:block;height:100%;border-right:1px solid #d9d9d9;}
#mainContents .conBox01 .btn a .icon {display:block;height:100px;background-repeat:no-repeat;background-position:50% 50%;}
#mainContents .conBox01 .btn.loc a .icon {background-image:url("../images/main/main_loc_icon.png");}
#mainContents .conBox01 .btn.inq a .icon {background-image:url("../images/main/main_inq_icon.png");}
#mainContents .conBox01 .btn p {font-size:28px;color:#404040;font-weight:700;font-family:"Nanum Square";margin:10px 0;}
#mainContents .conBox01 .btn span {font-size:16px;color:#333;font-weight:300;}
#mainContents .conBox01 .board {padding:50px;float:left;width:600px;position:relative;}
#mainContents .conBox01 .board .title {font-size:26px;color:#333;font-family:"Nanum Square";font-weight:700;}
#mainContents .conBox01 .board ul {margin-top:13px;}
#mainContents .conBox01 .board ul li {margin-top:7px;overflow:hidden;}
#mainContents .conBox01 .board ul li:first-child {margin-top:0;}
#mainContents .conBox01 .board ul li a {display:block;float:left;padding-left:10px;position:relative;width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;color:#666;}
#mainContents .conBox01 .board ul li a:before {content:"";position:absolute;top:11px;left:0;width:3px;height:3px;background:#999;border-radius:50%;}
#mainContents .conBox01 .board ul li span {display:block;float:right;width:30%;text-align:right;font-size:16px;color:#666;}
#mainContents .conBox01 .board .btnMore {position:absolute;top:50px;right:50px;font-size:16px;color:#333;}
#mainContents .conBox01 .mainLecture {padding-bottom:150px;overflow:hidden;}
#mainContents .conBox01 .mainLecture .mask {overflow:hidden;}
#mainContents .conBox01 .mainLecture .maskWrap1 {float:left;width:700px;}
#mainContents .conBox01 .mainLecture .back_title {padding:7px 0 0 700px;text-align:right;font-size:24px;color:#333;opacity:0.1;letter-spacing:11px;text-align:center;}
#mainContents .conBox01 .mainLecture .maskWrap2 {width:600px;position:absolute;z-index:1;right:0;height:450px;bottom:90px;}
#mainContents .conBox01 .mainLecture .maskWrap2 .btns {position:absolute;bottom:60px;left:-122px;}
#mainContents .conBox01 .mainLecture .maskWrap2 .btns a {display:block;float:left;margin-left:1px;}
#mainContents .conBox01 .mainLecture .mask2 {background:#fff;-webkit-box-shadow: 1px 1px 25px 1px rgba(50, 50, 50, 0.2);
	-moz-box-shadow:    1px 1px 25px 1px rgba(50, 50, 50, 0.2);
	box-shadow:         1px 1px 25px 1px rgba(50, 50, 50, 0.2);}
#mainContents .conBox01 .mainLecture .mask2 li {padding:85px 30px;text-align:center;}
#mainContents .conBox01 .mainLecture .mask2 li dt p.title {font-size:48px;color:#333;font-weight:700;font-family:"Nanum Square";}
#mainContents .conBox01 .mainLecture .mask2 li dt p.sub {font-size:18px;color:#000;opacity:0.85;}
#mainContents .conBox01 .mainLecture .mask2 li dd {font-size:17px;color:#333;opacity:0.75;padding-top:20px;margin-top:20px;position:relative;}
#mainContents .conBox01 .mainLecture .mask2 li dd:before {content:"";position:absolute;top:0;left:50%;margin-left:-13px;width:26px;height:1px;background:#d9d9d9;}
#mainContents .conBox01 .mainLecture .mask2 li a {display:block;padding-right:30px;width:250px;height:45px;line-height:43px;text-align:center;border:1px solid #67da7c;font-size:16px;color:#67da7c;margin:40px auto 0 auto;transition:0.3s;
background: url("../../images/main/arrowOff.png") no-repeat 72%;}



#mainContents .conBox02 {background:url("../images/main/videoWrap_bg.jpg") no-repeat 50% 50%;padding:90px 0;}
#mainContents .conBox02 dt {font-size:46px;color:#fff;font-weight:700;font-family:"Nanum Square";position:relative;margin-bottom:20px;padding-bottom:10px;}
#mainContents .conBox02 dt:after {content:"";position:absolute;bottom:0;left:0;width:30px;height:1px;background:#fff;opacity:0.85;;}
#mainContents .conBox02 dt span {color:#ffe31e;}
#mainContents .conBox02 dd {font-size:17px;color:#fff;margin-top:10px;opacity:0.85;}
#mainContents .conBox02 .txtBox a {display:block;width:210px;height:45px;line-height:45px;text-align:center;background:#ffe31e;font-size:16px;color:#33c1c2;margin-top:30px;}
#mainContents .conBox02 .video {position:absolute;top:0;right:0;width:609px;height:326px;padding:17px 51px 18px 50px;background:url("../images/main/video_side.png") no-repeat;}
#mainContents .conBox02 .video .table {position:absolute;top:0;left:0;width:100%;height:100%;}
.video_pop {position:fixed;width: 1200px;height: 675px;top:50%;margin-top: -335px;left:50%;margin-left: -600px;z-index:1000;display:none;}
.video_pop iframe {width:100%;height:100%;}
.video_pop .btnClose {position:absolute;top:-30px;right:0;}


#mainContents .conBox03 {padding:80px 0 90px;position:relative;}
#mainContents .conBox03 .title {font-size:42px;color:#333;font-weight:700;font-family:"Nanum Square";text-align:center;}
#mainContents .conBox03 .mask {overflow:hidden;margin-top:30px;}
#mainContents .conBox03 .mask li {position:relative;overflow:hidden;}
#mainContents .conBox03 .mask li a > img {transition:0.3s;}
#mainContents .conBox03 .mask li .txtBox {position:absolute;bottom:0;left:0;width:100%;padding:10px 0;background:rgba(0,0,0,0.45);transition:1s all ease-out;}
#mainContents .conBox03 .mask li .txtBox span {display:block;text-align:center;color:#fff;}
#mainContents .conBox03 .mask li .txtBox span.position {font-size:14px;font-weight:100;}
#mainContents .conBox03 .mask li .txtBox span.name {font-size:28px;font-weight:500;}
#mainContents .conBox03 .auto > a {position:absolute;top:50%;}
#mainContents .conBox03 .auto > a.btnPrev {left:-80px;}
#mainContents .conBox03 .auto > a.btnNext {right:-80px;}




@media all and (max-width:1280px) {

	#mainContents .conBox01 .btn {width:25%;}
	#mainContents .conBox01 .board {width:50%;}
	#mainContents .conBox01 .mainLecture .back_title {font-size:20px;letter-spacing:5px;}

	#mainContents .conBox03 .auto {padding:0 22px;}
	#mainContents .conBox03 .auto > a {z-index:9;}
	#mainContents .conBox03 .auto > a.btnPrev {left:0;}
	#mainContents .conBox03 .auto > a.btnNext {right:0;}
	

}
@media all and (max-width:1024px) {

	#mainContents .conBox01 .mainLecture .maskWrap1 {float:none;width:100%;text-align:center;padding-right:15px;}
	#mainContents .conBox01 .mainLecture .maskWrap1 img {width:100%;}
	#mainContents .conBox01 .mainLecture .maskWrap2 {width:100%;position:relative;top:-50px;bottom:0;height:auto;padding-left:15px;}
	#mainContents .conBox01 .mainLecture .maskWrap2 .btns {bottom:auto;top:-60px;right:15px;overflow:hidden;left:auto;}
	#mainContents .conBox01 .mainLecture .mask2 li {padding:30px 10px;}
	#mainContents .conBox01 .mainLecture .mask2 li dt p.title {font-size:38px;}
	#mainContents .conBox01 .mainLecture .mask2 li dd {font-size:15px;}
	#mainContents .conBox01 .mainLecture .mask2 li a {margin-top:30px;}
	#mainContents .conBox01 .mainLecture .back_title {display:none;}

	#mainContents .conBox02 {background-size:cover;}
	#mainContents .conBox02 .txtBox {text-align:center;}
	#mainContents .conBox02 dt:after {left:50%;margin-left:-15px;}
	#mainContents .conBox02 .txtBox a {margin:20px auto;}
	#mainContents .conBox02 .video {position:relative;margin:0 auto;}
}
@media all and (max-width:980px) {
	#mainVisual {height:auto;padding-top:55%;}
	#mainVisual .mask {position:absolute;top:0;left:0;width:100%;height:100%;}
	#mainVisual .mask .swiper-slide {height:auto;}
	#mainVisual .auto .inner {display:block;text-align:center;padding-top:60px;}
	#mainVisual .auto .tableCell {padding-bottom:120px;}
	#mainVisual p.txt01 {font-size:18px;}
	#mainVisual p.txt02 {font-size:40px;}
	#mainVisual p.txt03 {font-size:14px;}


	#mainContents .conBox01 .btn {height:240px;}
	#mainContents .conBox01 .btn p {font-size:20px;}
	#mainContents .conBox01 .btn span {font-size:13px;}
	#mainContents .conBox01 .board {padding:30px;}
	#mainContents .conBox01 .board .title {font-size:22px;}
	#mainContents .conBox01 .board ul li a {font-size:14px;}
	#mainContents .conBox01 .board ul li span {font-size:13px;}
	#mainContents .conBox01 .board .btnMore {top:35px;right:30px;}
	#mainContents .conBox01 .mainLecture {padding-bottom:0;}

}


@media all and (max-width:840px) {
	#mainContents .conBox01 .mainLecture .mask2 li a {margin-top:20px;}

	#mainContents .conBox03 .mask li img {width:100%;}
	#mainContents .conBox03 .mask li .txtBox span.position {font-size:12px;}
	#mainContents .conBox03 .mask li .txtBox span.name {font-size:20px;}

}
@media all and (max-width:740px) {
	
}


@media all and (max-width:640px) {

	#mainVisual {margin-top:60px;padding-top:0;height:300px;}
	#mainVisual .auto .tableCell {padding-bottom:0;}
	#mainVisual .txtBox {margin-top:-25px;}
	#mainVisual p.txt01 {font-size:12px;}
	#mainVisual p.txt02 {font-size:30px;}
	#mainVisual p.txt03 {font-size:10px;}
	#mainVisual .pager {margin-top:10px;}


	#mainContents {margin-top:55px;}

	#mainContents .conBox01 .board {padding:20px;}
	#mainContents .conBox01 .board .btnMore {top:22px;right:20px;}
	/*#mainContents .conBox01 .mainLecture {padding-bottom:40px;}*/
	#mainContents .conBox01 .quickMenu {margin-bottom:-60px;}

	#mainContents .conBox03 {padding:30px 0;}
	#mainContents .conBox03 .title {font-size:35px;}






	#mainContents .conBox01 .btn {width:50%;border-bottom:1px solid #d9d9d9;height:auto;}
	#mainContents .conBox01 .btn a {padding:10px;text-align:center;}
	#mainContents .conBox01 .btn a .icon {width:50px;height:50px;background-size:100%;float:left;}
	#mainContents .conBox01 .btn a .txtBox {padding:5px 0 5px 65px;text-align:left;}
	#mainContents .conBox01 .btn span {font-size:10px;}
	#mainContents .conBox01 .btn.inq a {border-right:none;}
	#mainContents .conBox01 .board {width:100%;}
	#mainContents .conBox01 .board ul li a {width:100%;}
	#mainContents .conBox01 .board ul li span {display:none;}
	#mainContents .conBox01 .mainLecture .mask2 li dt p.title {font-size:28px;}
	#mainContents .conBox01 .mainLecture .mask2 li dt p.sub {font-size:15px;}
	#mainContents .conBox01 .mainLecture .mask2 li dd {font-size:13px;padding-top:15px;margin-top:15px;}
	#mainContents .conBox01 .mainLecture .mask2 li dd br {content:"";}


	#mainContents .conBox02 {padding:30px 0;}
	#mainContents .conBox02 dt {font-size:30px;}
	#mainContents .conBox02 dd {font-size:14px;}
	#mainContents .conBox02 .video {width:100%;background-size:100%;padding:2.7% 8.5% 5% 8.2%;height:auto;}
	#mainContents .conBox02 .video > img {width:100%;}
	#mainContents .conBox02 .video .table,
	#mainContents .conBox02 .video .tableCell {display:block;}
	#mainContents .conBox02 .video .btnPlay {position:absolute;top:50%;transform:translate(-50%,-50%);}
	#mainContents .conBox02 dd br {content:"";}
	.video_pop {width:100%;left:0;margin-left:0;padding:0 10px;}
	.video_pop .btnClose {right:10px;}
}
@media all and (max-width:480px) {

	#mainVisual .auto .inner {padding-top:30px;}
	#mainVisual p.main {font-size:2rem;line-height:40px;padding-bottom:25px;margin:0 auto 25px auto; }
	#mainVisual p.main:before {width:40px;margin-left:-20px;}
	#mainVisual p.sub {font-size:0.9rem;}
	#mainVisual .btnPrev,
	#mainVisual .btnNext {width:40px;}

	#mainContents .conBox01 .board ul li {margin-top:5px;}
	#mainContents .conBox01 .board ul li a:before {top:8px;}

	
	#mainContents .conBox01 .btn a img {width:30%;}
	#mainContents .conBox01 .btn p {font-size:13px;margin:5px 0 -7px;}
	#mainContents .conBox01 .mainLecture .mask2 li {padding:20px 10px 30px;}
	#mainContents .conBox01 .mainLecture .mask2 li a {padding-right:25px;width:210px;height:40px;line-height:38px;font-size:14px;}
	#mainContents .conBox01 .mainLecture .maskWrap2 {top:-40px;}

	#mainContents .conBox02 .txtBox a {height:40px;line-height:38px;font-size:14px;}
	#mainContents .conBox02 dd.mblind {display:none;}

	#mainContents .conBox03 .auto > a {width:40px;top:55%;}
	#mainContents .conBox03 .mask {margin-top:10px;}

}



@media all and (min-width:1200px){

	#mainContents .conBox01 .btn a:hover {background: linear-gradient(135deg, #33c2c2, #67da7c);}
	#mainContents .conBox01 .btn.loc a:hover .icon {background-image:url("../images/main/main_loc_icon_on.png");}
	#mainContents .conBox01 .btn a:hover p,
	#mainContents .conBox01 .btn a:hover span {color:#fff;}

	#mainContents .conBox01 .board ul li:hover a {color:#33c1c2;text-decoration:underline;}
	#mainContents .conBox01 .board ul li:hover span {color:#33c1c2;}
	#mainContents .conBox01 .mainLecture .mask2 li a:hover {color:#fff;background:#67da7c url("../../images/main/arrowOn.png") no-repeat 75%;}


	#mainContents .conBox03 .mask li a:hover > img {transform:scale(1.1);}
	#mainContents .conBox03 .mask li a:hover .txtBox {background: linear-gradient(135deg, #33c2c2, #67da7c);}
	
}