@charset "utf-8";
/* CSS Document */

/* 공통 ------------------------------- */
.main_container {font-weight:300;}
.main_container h2 {font-size:54px; font-weight:400; line-height:1.2;}
.main_container h2 strong {font-weight:600; display:block;}
.main_container h2 + p {font-size:21px; color:#555; position:relative; margin-top:2%;}
.main_container h3 {font-size:27px; line-height:1.2;}
.main_container h3 strong {font-size:30px; font-weight:600;}
.main_container h4 {font-size:24px;}
img {max-width:100%;}
.main_container .btns, .btns.main_bt {height:84px; line-height:80px; font-size:24px; background:#d33d4f; color:#fff; border-radius:50px; padding:0 50px; margin-top:50px;}
/* more */
.more {display:inline-block; margin-top:2%;}
.more span {display:inline-block; position:relative; padding-right:20px; font-size:21px; color:#614695;}
.more span:after {content:''; display:block; position:absolute; top:50%; right:0; margin-top:-6px; width:0; height:0; border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:8px solid #614695;}

#main_visual h2 + p, .sec02 h2 + p {font-size:30px; padding-top:50px; margin-top:10px;}
#main_visual h2 + p:before, .sec02 h2 + p:before {content:''; position:absolute; top:0; left:50%; width:1px; height:50px;}
#main_visual .play_btn {display:inline-block; margin-top:3%;padding:0 5px; }
#main_visual .play_btn img {max-width:54px;}
.play_btn_w{width:100%;}

/* sec01 */
#main_visual {background:url(../DR0001IMG/main/main_visual.jpg?ver=20.12.04) 50% 100% no-repeat; background-size:cover; height:890px; text-align:center;}
#main_visual h2 {color:#d33d4f;}
#main_visual h2 + p {color:#333; font-weight:400;}
#main_visual h2 + p:before {background:#a12642;}
#main_visual .btns {background:#d33d4f;}
#main_visual:before {content:""; display:inline-block; height:100%; vertical-align:middle;}
#main_visual > div {vertical-align:middle; position:relative; padding:25px; width:95%; margin:-250px auto 0; display:inline-block;}
#main_visual.math_visual {background-image:url(../DR0001IMG/main/main_visual_math.jpg?ver=20.12.04);}
#main_visual.math_visual h2 strong {font-size:36px; font-weight:400; color:#555;}
#main_visual.math_visual h2 strong span {font-size:58px; font-weight:600; color:#d33d4f; position:relative;}
#main_visual.math_visual h2 strong span:before {content:''; background:#d33d4f; width:8px; height:8px; border-radius:50px; position:absolute; top:3px; left:50%; margin-left:-4px;}


.main_bar1{width:100%; overflow:hidden; background:url(../DR0001IMG/main/main_ban_bg.jpg) center no-repeat; text-align:center;padding:0 20px;}
.main_bar1 img{width:100%; max-width:740px; }


/* sec02 */
.sec02 {text-align:center;}
.sec02 h2 strong {color:#0083c3;}
.sec02 h2 + p {width:60%; margin:0 auto;}
.sec02 h2 + p:before {background:#0083c3;}
.sec02 .btns {background:#0083c3;}
.sec02 .btns.red_c {background: #bc1d2e; margin-left:10px;}
.main_review {margin-top:6%;}
.main_review > ul {overflow:hidden;}
.main_review > ul > li {float:left; width:33.33%; position:relative; padding-left:125px; padding-right:20px; min-height:110px; text-align:left;}
.main_review > ul > li a {display:block;}
.main_review > ul > li:first-child {width:33.34%;}
.main_review > ul > li .imgs {position:absolute; top:0; left:0;}
.main_review > ul > li .imgs img {max-width:110px;}
.main_review > ul > li h4 {margin:4% 0 3%;}
.main_review > ul > li h4:before {content:''; display:block; width:20px; height:2px; background:#111;}
.main_review .more span {font-size:14px; color:#777; padding-right:12px;}
.main_review .more span:after {margin-top:-4px; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:4px solid #999;}

/* sec03 */
.sec03 h2, .sec04 h2, .sec05 h2 {font-size:45px;}
.sec03 h2 strong, .sec04 h2 strong, .sec05 h2 strong {color:#614695;}
.sec03 {overflow:hidden;}
.sec03 .fl {text-align:right; width:50%;}
.sec03 .fr {width:40%;}

/* sec04 */
.sec04 {overflow:hidden;}
.sec04 .fl {width:40%;}
.sec04 .fr {width:50%; padding-top:4%;}

/* sec05 */
.sec05 {text-align:center;}
.sec05 .imgs {width:80%; margin:0 auto; margin-top:4%;}

/* 창의융합교육 */
.merit {background:#f5f5f5;}
.merit > div {background:url(../DR0001IMG/main/merit_bg.png) 0 0 no-repeat; padding:80px 137px;}
.merit h2 {padding-left:170px;}
.merit h2 strong {color:#614695; display:inline-block;}
.merit ul {margin-top:8%;}
.merit li {margin:25px 0; position:relative; min-height:140px; padding-left:400px;}
.merit li h3 {position:absolute; top:0; left:0; color:#555; padding-top:3%; padding-left:150px; width:380px; height:100%; border-right:1px solid #9b84d3;}
.merit li h3 strong {display:block; color:#7757c4; font-weight:500;}
.merit li h3:before {content:''; background:url(../DR0001IMG/common/icon_set.png) 0 -98px no-repeat; background-size:500px; width:140px; height:140px; position:absolute; top:0; left:0;}
.merit li h3 + p {padding-top:4%; font-size:24px; color:#666; font-weight:300;}
.merit li.numb02 h3:before {background-position:-150px -98px;}
.merit li.numb03 h3:before {background-position:0 -248px;}
.merit li.numb04 h3:before {background-position:-150px -248px;}
.merit li.numb05 h3:before {background-position:0 -398px;}

/* 사용후기 인터뷰 */
.interview {text-align:center;}
.interview h2 strong {color:#3ba7b7; display:inline-block;}
.interview > ul {margin-top:4%;}
.interview > ul > li {position:relative; border:1px solid #ddd; border-bottom-left-radius:20px; border-bottom-right-radius:20px; overflow:hidden;}
.interview > ul > li .thumb_wrap p {padding-top:80%;}
.interview > ul > li h4 {padding:20px; text-align:left; word-break:break-all;}
.interview > ul > li h4 strong {color:#3ba7b7; display:block;}
.interview > ul > li > a {position:absolute; top:0; left:0; width:100%; height:100%; transition:all .6s linear;}
.interview > ul > li .btn_plus {position:absolute; top:50%; left:50%; margin:-21px 0 0 -62px; width:124px; height:42px; line-height:39px; font-size:15px; color:#fff; text-align:center; display:inline-block; border:1px solid #fff; opacity:0; transform:scale(0.8); transition:all .3s linear;}
.interview > ul > li > a:hover {background:rgba(0,0,0,0.7);}
.interview > ul > li > a:hover .btn_plus {opacity:1; transform:scale(1);}
.interview .btns {background:#3ba7b7 !important; margin:0 5px;}
.interview .btns.bdr {background:#fff !important; border:1px solid #3ba7b7; color:#3ba7b7;}


.pa_btn{width:100%;overflow: hidden;text-align: right;}
.pa_btn a{padding: 10px 35px;background-color: #26a5ab;border-radius: 3px;color: #fff;display: inline-block;}
.t_left{text-align:left !important;}

.tb01{width:100%;}
.tb01 tr td{border: 1px solid #ddd;padding: 5px;}
.tb01 tr th{background-color:#f5f5f5;border: 1px solid #ddd;color: #333;}
.tb01 .in01{width:100%;border: 1px solid #eaeaea;padding:7px;}
.tb01 .te01{padding:7px;border: 1px solid #eaeaea; height:300px;}
.mt_1{margin-top:20px;}
.arr{width:100%; margin-top:6px; color:#555;}

.main_bar2{width:100%;max-width: 1200px;margin:0 auto;text-align:center;}
.main_bar2 p{text-align:center;display: inline-block;padding: 0 12px;}
.main_bar2 .pc_on img{width:100%; max-width:934px; display:block;}
.main_bar2 .m_on img{width:100%; max-width:762px; display:none;}




@media screen and (max-width:1220px) {
/* 공통 ------------------------------- */
.main_container h2, #main_visual.math_visual h2 strong span {font-size:40px;}
#main_visual.math_visual h2 strong {font-size:24px;}
/* sec02 */
.main_review > ul > li br {display:none;}
}

@media screen and (max-width:1080px) {
/* 공통 ------------------------------- */
.main_container h2, #main_visual.math_visual h2 strong span {font-size:30px;}
.main_container h2 + p {font-size:16px;}
.main_container h3 {font-size:21px;}
.main_container h3 strong {font-size:24px;}
.main_container h4 {font-size:18px;}
.main_container .btns, .btns.main_bt {height:60px; line-height:56px; font-size:18px; padding:0 20px;}
/* more */
.more span {font-size:14px; padding-right:15px;}
.more span:after {margin-top:-4px; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:6px solid #614695;}

/* sec01 */
#main_visual h2 + p, .sec02 h2 + p {font-size:18px;}
#main_visual.math_visual h2 strong {font-size:21px;}
#main_visual.math_visual h2 strong span:before {width:4px; height:4px; top:0; margin-left:-2px;}

/* sec02 */
.main_review {margin-top:8%;}
.main_review > ul > li {float:none; width:auto !important; margin-top:15px;}
.main_review > ul > li:first-child {margin-top:0;}

/* 창의융합교육 */
.merit > div {padding:5% 7.5%; background-size:180px;}
.merit li {min-height:70px; padding-left:300px;}
.merit li h3 {padding-top:0; padding-left:80px; width:280px;}
.merit li h3:before {width:70px; height:70px; position:absolute; top:0; left:0;}
.merit li h3 + p {font-size:16px;}
.merit li.numb01 h3:before {background-position:-345px -98px;}
.merit li.numb02 h3:before {background-position:-420px -98px;}
.merit li.numb03 h3:before {background-position:-345px -173px;}
.merit li.numb04 h3:before {background-position:-420px -173px;}
.merit li.numb05 h3:before {background-position:-345px -248px;}

}

@media screen and (max-width:980px) {
/* sec01 */
#main_visual {background-size:1200px; height:570px;}
#main_visual > div {margin:-80px auto 0;}
#main_visual h2 + p, .sec02 h2 + p {padding-top:25px;}
#main_visual h2 + p:before, .sec02 h2 + p:before {height:20px;}
}

@media screen and (max-width:768px) {
/* 공통 ------------------------------- */
.main_container h2, #main_visual.math_visual h2 strong span {font-size:20px;}
.main_container h2 + p, #main_visual.math_visual h2 strong {font-size:14px !important;}
.main_container h3 {font-size:18px;}
.main_container h3 strong {font-size:21px;}
.main_container h4 {font-size:16px;}
.main_container .btns, .btns.main_bt {height:36px; line-height:32px; font-size:14px; margin-top:4%;}

/* sec01 */
#main_visual {background-size:cover; height:420px;}
#main_visual > div {margin:-10px auto 0;}
#main_visual .play_btn img {max-width:40px;}

/* sec02 */
.sec02 h2 + p {width:70%;}
.main_review > ul > li {padding-left:95px;}
.main_review > ul > li .imgs img {max-width:80px;}
.main_review > ul > li h4 {padding-top:15px;}

/* sec03 */
.sec03 .fl, .sec03 .fr {float:none; width:auto; text-align:center;}
.sec03 .fl {margin-top:4%;}
.sec03 img {max-width:200px;}

/* sec04 */
.sec04 .fl, .sec04 .fr {float:none; width:auto; text-align:center;}
.sec04 img {max-width:200px;}

/* 창의융합교육 */
.merit {text-align:center;}
.merit > div {padding-top:8%; background-size:80px;}
.merit h2 {padding-left:0px;}
.merit li {padding-left:0;}
.merit li h3 {padding-top:80px; padding-left:0; width:auto; position:relative; border-right:0;}
.merit li h3:before {left:50%; margin-left:-35px;}
.merit li h3 strong {display:inline-block;}
.merit li h3 + p {font-size:14px; padding-top:5px;}
.merit li br {display:none;}

/* 사용후기 인터뷰 */
.interview > ul > li {border-bottom-left-radius:7px; border-bottom-right-radius:7px;}
.interview > ul > li h4 {padding:10px;}
.interview > ul > li > a {position:absolute; top:0; left:0; width:100%; height:100%; transition:all .6s linear;}
.interview > ul > li .btn_plus {margin:-18px 0 0 -45px; width:90px; height:36px; line-height:32px; font-size:13px;}

.pa_btn a{padding:8px 25px;}

.main_bar2 .pc_on img{display:none;}
.main_bar2 .m_on img{width: 94%;display:block;margin: 0 auto;}

}

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

}

@media screen and (max-width:480px) {
#main_visual {background-position:42% 100%;}
}






                                                                                                                                                                

/* 라이트박스 */
@media all {
	.lightbox { display: none; }
	.fl-page h1,
	.fl-page h3,
	.fl-page h4 {
		font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', 'Helvetica Neue', Arial, Helvetica, sans-serif;
		font-weight: 100;
		letter-spacing: 1px;
	}
	.fl-page h1 { font-size: 110px; margin-bottom: 0.5em; }
	.fl-page h1 i { font-style: normal; color: #ddd; }
	.fl-page h1 span { font-size: 30px; color: #333;}
	.fl-page h3 { text-align: right; }
	.fl-page h3 { font-size: 15px; }
	.fl-page h4 { font-size: 2em; }
	.fl-page .jumbotron { margin-top: 2em; }
	.fl-page .doc { margin: 2em 0;}
	.fl-page .btn-download { float: right; }
	.fl-page .btn-default { vertical-align: bottom; }

	.fl-page .btn-lg span { font-size: 0.7em; }
	.fl-page .footer { margin-top: 3em; color: #aaa; font-size: 0.9em;}
	.fl-page .footer a { color: #999; text-decoration: none; margin-right: 0.75em;}
	.fl-page .github { margin: 2em 0; }
	.fl-page .github a { vertical-align: top; }
	.fl-page .marketing a { color: #999; }

	/* override default feather style... */
	.fixwidth {
		background: rgba(256,256,256, 0.8);
	}
	.fixwidth .featherlight-content {
		width: 500px;
		padding: 25px;
		color: #fff;
		background: #111;
	}
	.fixwidth .featherlight-close {
		color: #fff;
		background: #333;
	}
	.featherlight .featherlight-inner h2{font-size: 22px;margin-bottom: 20px;text-align: center;}
	.featherlight .featherlight-inner .box1{width:100%;}
	.featherlight .featherlight-inner .ps_in{width:100%;/* border: 1px solid #ddd; */overflow: hidden;padding: 10px;background-color: #f5f5f5;border-radius: 5px;}
	.featherlight .featherlight-inner .ps_in label{width:30%;float:left;text-align:center;padding: 9px;font-size: 16px;background-color: #f5f5f5;}
	.featherlight .featherlight-inner .ps_in input{width:70%;float:left;border: 1px solid #ddd;padding: 10px;}
	.featherlight .featherlight-inner .btn1{width:100%;padding: 8px;border:none;background-color: #d33d4f;color: #fff;font-size: 16px;margin-top: 7px;border-radius: 5px; display:block;}
	.featherlight .featherlight-inner .libtn{width:100%;border:none;background-color: #d33d4f;color: #fff;font-size: 16px;margin-top: 7px;border-radius: 5px; display:block;}
	.featherlight .featherlight-inner .libtn a{text-align:center;}
	.libox1{width:400px;}
}

@media(max-width: 768px){
	.fl-page h1 span { display: block; }
	.fl-page .btn-download { float: none; margin-bottom: 1em; }
	.libox1{width:260px;}

	.featherlight .featherlight-inner h2{font-size:18px; margin-bottom:15px;}
}