@charset 'utf-8';

.section{position:relative}

/* 상단 */
#mVisual {width:100%;height:580px;background-color:#FFFFFF;background-repeat:no-repeat;background-position:center top;background-size:cover;overflow:hidden}

#mVisual .title {position:absolute;left:70%;top:50%;transform:translate(-50%, -50%);width:40%}
#mVisual .title .img {width:100%;text-align:center}
#mVisual .title .img img {width:100%;filter:drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3))}
#mVisual .title .text {width:60%;color:#FFFFFF;text-align:center;font-size:1.6rem;font-weight:bold;text-shadow:2px 2px 2px rgba(0, 0, 0, 0.3);border:solid #FFFFFF;border-width:1px 0;margin:2rem 20% 0;padding:0.5rem 0}

#mVisual .title.left {left:25%}

@media only screen and (max-width:768px) {
	#mVisual {height:55vh}
	#mVisual .title {position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:80%}
	#mVisual .title.left {left:50%}
}

/* slider */
.slider {float:left}

.slider .jquery-reslider .slider-block {
width:100%;
height:100%;
position:absolute;
z-index:97;
background-position:50% 50%;
background-size:cover;
opacity:0;
}

.slider .jquery-reslider .slider-dots {
position:absolute;
width:100%;
text-align:center;
top:94%;
}

.slider .jquery-reslider .slider-dots li {
width:16px;
height:16px;
display:inline-block;
*zoom:1;*display:block;
margin:7px;
cursor:pointer;
border-radius:16px;
opacity:0.5;
background-color:#fff;
}

.slider .jquery-reslider .slider-dots li.active {opacity:1}

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

.slider .jquery-reslider .slider-dots li {width:10px;height:10px;margin:4px}

}

#mSection1 ul { overflow:hidden}
#mSection1 ul > li {padding-left:15px;position:relative}
#mSection1 ul > li:before {content:'';width:3px;height:3px;background-color:#4084c5;position:absolute;top:50%;left:0;margin-top:-0.5px}

#mcontWrap {overflow:hidden;padding:40px 0 50px}
#mSection1 {overflow:hidden}
#mSection1 .mbox {position:relative;float:left;width:calc(33.33% - 16px);min-height:300px;margin-left:24px;box-sizing:border-box;padding:30px 0 0 38px;color:rgba(255,255,255,0.8);background-size:100% auto !important}
#mSection1 .mbox h3 {font-size:1.5em;margin-bottom:15px;color:#fff}
#mSection1 .mbox h3 img {max-width:100%}
#mSection1 .mbox ul {margin-top:20px}

#mSection1 .mbox1 {margin-left:0 !important;background:#014b92 url('/img/main/001.png') 95% 95% / 35% no-repeat !important}
#mSection1 .mbox2 {background:#1582c5 url('/img/main/002.png') 95% 95% / 40% no-repeat !important}
#mSection1 .mbox3 {background:#44aa00 url('/img/main/003.png') 95% 95% / 40% no-repeat !important}
#mSection1 .mbox2 ul > li:before {background-color:#014b92}
#mSection1 .mbox3 ul > li:before {background-color:#358500}
#mSection1 .mbox .more {position:absolute;left:0;bottom:0}

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

#mcontWrap {padding:4% 0 5%}
#mSection1 .mbox {width:calc(33.33% - 9px);min-height:280px;margin-left:12px}

}

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

#mSection1 .mbox h3 {margin-bottom:8px}
#mSection1 .mbox ul {margin-top:15px}
#mSection1 .mbox p br {display:none}

}

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

#mSection1 .mbox {width:100%;margin-left:0;margin-bottom:5px;padding:7% 5%;background-size:auto 80% !important;min-height:0}
#mSection1 .mbox h3 {margin-bottom:0}
#mSection1 .mbox h3 img {max-width:60%}
#mSection1 .mbox ul {margin-top:10px}
#mSection1 .mbox ul > li {float:left;margin-right:20px}
#mSection1 .mbox3 {margin-bottom:0}
#mSection1 .mbox .more img {width:40px}

}

@media screen and (max-width:568px) {
#mSection1 .mbox {padding:6% 5% 10% 6%}
#mSection1 .mbox ul {margin-top:5px}
#mSection1 .mbox ul > li {margin-right:10px;padding-left:8px}
#mSection1 ul > li:before {margin-top:-1.5px}
}

#mSection2 {position:relative;overflow:hidden;margin-top:24px;width:100%}
#mSection2 > div {position:relative;border:1px solid #d7d7d7;height:300px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}

#bdBox {float:left;width:calc(33.33% - 16px);overflow:hidden;padding:30px 20px;margin-right:24px}
#bdBox .bt-more {position:absolute;top:0;right:0;width:55px;height:55px;background-color:#d5d5d5}
#bdBox .bt-more:hover {background-color:#001654}
#bdBox .bt-more img {width:100%}

#bdBox #tab_container ul.tabs {overflow:hidden}
#bdBox #tab_container ul.tabs li {float:left;margin-right:20px;padding-right:20px;position:relative;line-height:20px}
#bdBox #tab_container ul.tabs li:after {content:'';width:1px;height:20px;background-color:#d7d7d7;position:absolute;right:0}
#bdBox #tab_container ul.tabs li:last-child:after {display:none}
#bdBox #tab_container ul.tabs li a {color:#212121;font-size:1.25em;font-weight:700}
#bdBox #tab_container ul.tabs li a span {color:#d0d0d0 !important;font-size:0.7em}
#bdBox #tab_container ul.tabs li.active a {color:#014b92}

#bdBox .bdList {margin-top:35px}
#bdBox .bdList li {margin-top:15px;padding-left:20px;position:relative}
#bdBox .bdList li:first-child {margin-top:0}
#bdBox .bdList li:before {content:'';width:5px;height:5px;background-color:#4084c5;position:absolute;left:0;top:50%;margin-top:-2.5px}
#bdBox .bdList li a {color:#484848}
#bdBox .bdList li a span.date {float:right;color:#adadad}

#csBox {float:left;width:calc(33.33% - 16px);margin-right:24px;padding-right:15px}
#csBox ul li {height:150px}
#csBox ul li.i-apply {background:url('/img/main/ico_apply.png') no-repeat right center;border-bottom:1px solid #e5e5e5}
#csBox ul li.i-cs {background:url('/img/main/ico_cs.png') no-repeat right center}
#csBox ul li > a {display:block;padding:15px}
#csBox ul li > a h3 {color:#212121;font-size:1.25em;padding:3px 0 10px}
#csBox ul li > a p {color:#888}

#csBox ul li.i-cs div {display:block;padding:15px}
#csBox ul li.i-cs div h3 {color:#212121;font-size:1.25em;padding:3px 0 10px}
#csBox ul li.i-cs div p {color:#888}
#csBox ul li.i-cs div dl {display:flex;align-items:center;color:#888}
#csBox ul li.i-cs div dl dt {float:left;margin-right:15px;line-height:1.2em}
#csBox ul li.i-cs div dl dd {float:left}

/*#csBox2 {float:left;width:calc(33.33% - 16px);background:url('/img/main/youtube_bg.png') no-repeat center top;background-size:cover;padding:0}*/
/*#csBox2 .scroll_wrap {width:calc(100% - 20px);height:60px;margin:0 auto}*/
/*#csBox2 .scroll-text {display:inline-block;width:100%;height:50px;color:#323232;font-size:2.2em;font-weight:bold}*/

#csBox2 {float:left;width:calc(33.33% - 16px);background:none;padding:0}
#csBox2 .bn_top {width:100%;height:auto;background:none;text-align:center;padding:25px 0 0 0}
#csBox2 .scroll_wrap {width:100%;height:60px;background:#f5f5f5;margin:15px 0 25px}
#csBox2 .scroll-text {display:inline-block;width:100%;height:60px;color:#323232;font-size:1.6em;font-weight:bold;padding:12px 0 0 0}
#csBox2 .bn_main li {float:left;width:50%;height:auto;text-align:center}
#csBox2 .bn_main img {width:180px;cursor:pointer;filter:drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.1));padding-left:5px}

.popup_layer_close {display:block;position:absolute;bottom:-40px;left:calc(50vw - 29px);width:40px;height:40px;background:#969696;border:0;border-radius:5px;padding:0;cursor:pointer}
.popup_layer_close:hover {background:#e6e6e6;transition:all 0.2s linear}
.popup_layer_close:before {content:'';display:block;position:absolute;width:3px;height:20px;transform:rotate(-45deg);background:#fff;margin:-10px 0px 0px 18px}
.popup_layer_close:after {content:'';display:block;position:absolute;width:3px;height:20px;transform:rotate(45deg);background:#fff;margin:-10px 0px 0px 18px}
.popup_layer_close:hover:before {background:#969696;transition:all 0.2s linear}
.popup_layer_close:hover:after {background:#969696;transition:all 0.2s linear}

.popup_layer_bg {width:100%;height:100%;background:rgba(0,0,0,0.7)}

@keyframes fadeinzoomin {
	0% {transform:scale(1.2);opacity:0;background:;#000}
	100% {transform:scale(1);opacity:1;background:;#000}
}

/*.popup_layer_link1_wrap {display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:99999}*/
/*.popup_layer_link1_wrap img {cursor:pointer}*/

/*.popup_layer_link1 {position:absolute;top:25vh;width:100%;animation-fill-mode:both;animation-duration:1.0s;animation-name:fadeinzoomin;text-align:center}*/
/*.popup_layer_link1:after {content:'';display:block;visibility:hidden;clear:both}*/

/*.popup_layer_link1 ul {width:365px;height:340px;text-align:left;background:url('/img/main/bn/link1_bg.png') no-repeat;background-size:contain;margin:0 auto}*/
/*.popup_layer_link1 li {display:block;overflow:hidden}*/
/*.popup_layer_link1 li img {height:30px}*/

/*.popup_layer_link2_wrap {display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:99999}*/
/*.popup_layer_link2_wrap img {cursor:pointer}*/

/*.popup_layer_link2 {position:absolute;top:8vh;width:100%;animation-fill-mode:both;animation-duration:1.0s;animation-name:fadeinzoomin;text-align:center}*/
/*.popup_layer_link2:after {content:'';display:block;visibility:hidden;clear:both}*/

/*.popup_layer_link2 ul {width:365px;height:697px;text-align:left;background:url('/img/main/bn/link2_bg.png') no-repeat;background-size:contain;margin:0 auto}*/
/*.popup_layer_link2 li {display:block;width:80vw;overflow:hidden}*/
/*.popup_layer_link2 li img {height:30px}*/

.popup_layer_link1_wrap {display:none;position:fixed;top:15%;left:0;width:100%;height:100%;z-index:99999}

.popup_layer_link2_wrap {display:none;position:absolute;top:0;left:0;width:100%;height:100%;z-index:99999}

.popup_layer_bg {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7)}

.popup_layer_close {display:block;position:absolute;top:0;left:102%;width:40px;height:40px;background:#FFFFFF;border:0;border-radius:5px;padding:0;cursor:pointer}
.popup_layer_close:hover {background:#969696;transition:all 0.2s linear}
.popup_layer_close:before {content:'';display:block;position:absolute;width:3px;height:20px;transform:rotate(-45deg);background:#969696;margin:-10px 0px 0px 18px}
.popup_layer_close:after {content:'';display:block;position:absolute;width:3px;height:20px;transform:rotate(45deg);background:#969696;margin:-10px 0px 0px 18px}
.popup_layer_close:hover:before {background:#FFFFFF;transition:all 0.2s linear}
.popup_layer_close:hover:after {background:#FFFFFF;transition:all 0.2s linear}

/** s:con1 **/
#con1 {position:relative;width:40%;background:#FFFFFF;font-family:'NanumSquare';border-radius:0.5vw;animation:fadeinzoomin 0.3s cubic-bezier(0, 0.55, 0.45, 1);margin:5vw auto;padding:3% 1% 3% 0;z-index:2}
#con1:after {content:'';display:block;visibility:hidden;clear:both}

#con1 .con1Title {width:98%;height:4vw;background:#FF9696;border-radius:0.5vw;box-shadow:0.2vw 0.2vw 0.2vw rgba(0, 0, 0, 0.1);margin:0 0 0 2%}
#con1 .con1Title .title {float:left;height:2vw;margin:1vw 0 0 1vw}
#con1 .con1Title .image {float:right;height:5vw;margin:-1.5vw 1vw 0 0}

#con1 .class {float:left;position:relative;width:98%;text-align:center;font-size:2vw;font-weight:700;border-bottom:1px solid #C8C8C8;margin:2% 0 2% 2%}
#con1 .class img {width:2.4vw;margin:0.1vw 0.3vw 0 0}
#con1 .class1 {color:#285AC8}
#con1 .class2 {color:#32B464}
#con1 .class3 {color:#F05050}

#con1 .con {float:left;width:48%;height:6vw;border:1px solid #D2D2D2;border-radius:0.5vw;box-shadow:0.5vw 0.5vw 1vw rgba(0, 0, 0, 0.1);padding:0.5vw 0 0 0.5vw;margin-left:2%}
#con1 .con1 {background:url('../app/img/con2BG1.png') 0 0 / 105% 160% no-repeat, linear-gradient(130deg, #C8E6FF 30%, #82B4FF)}
#con1 .con2 {background:url('../app/img/con2BG1.png') 0 0 / 105% 160% no-repeat, linear-gradient(130deg, #B4E6DC 30%, #82D2B4)}
#con1 .con3 {background:url('../app/img/con2BG1.png') 0 0 / 105% 160% no-repeat, linear-gradient(130deg, #FFC8C8 30%, #FF9696)}
#con1 .con .logo {height:2vw;filter:drop-shadow(0.2vw 0.2vw 0.1vw rgba(0, 0, 0, 0.1))}
#con1 .con h1 {font-size:1.6vw;color:#646464;font-weight:700;letter-spacing:0.2vw}
#con1 .con h2 {font-size:1.2vw;color:#646464;font-weight:700;letter-spacing:-0.2vw;margin:0.5vw 0 0 0.3vw;cursor:pointer}

#con1 .con .iconMovie {position:relative;height:1.2vw;filter:drop-shadow(0.2vw 0.2vw 0.1vw rgba(0, 0, 0, 0.2));margin:0.25vw 0 0 0.5vw}
#con1 .con .iconElearning {position:relative;height:1.2vw;filter:drop-shadow(0.2vw 0.2vw 0.1vw rgba(0, 0, 0, 0.2));margin:0.25vw 0 0 0.5vw}

#con1 .con_close {height:15vw;background:#E6E6E6;box-shadow:none}
#con1 .con_close h1 {font-size:4.6vw}
#con1 .back {position:relative;border:solid #646464;border-width:0 0.5vw 0.5vw 0;display:inline-block;padding:1vw;transform:rotate(135deg);-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);-o-transform:rotate(135deg)}
/** e:con1 **/

/** s:con2 **/
#con2 {position:relative;width:40%;background:#FFFFFF;font-family:'NanumSquare';border-radius:0.5vw;animation:fadeinzoomin 0.3s cubic-bezier(0, 0.55, 0.45, 1);margin:5vw auto;padding:3% 0 3% 0;z-index:2}
#con2:after {content:'';display:block;visibility:hidden;clear:both}

#con2 .con2Title {width:96%;height:4vw;background:#FF9696;border-radius:0.5vw;box-shadow:0.2vw 0.2vw 0.2vw rgba(0, 0, 0, 0.1);margin:0 auto}
#con2 .con2Title .title {float:left;height:2vw;margin:1vw 0 0 1vw}
#con2 .con2Title .image {float:right;height:5vw;margin:-1.5vw 1vw 0 0}

#con2 .logo {width:60%;margin:5% 20% 0}

#con2 ul {width:100%;margin:0 auto}
#con2 li {float:left;width:50%;height:10vw}
#con2 li:nth-child(odd) {padding:1% 1% 0 2%}
#con2 li:nth-child(even) {padding:1% 2% 0 1%}
#con2 .con {position:relative;width:100%;height:96%;border:1px solid #D2D2D2;border-radius:0.5vw;box-shadow:0.2vw 0.2vw 0.5vw rgba(0, 0, 0, 0.1);cursor:pointer}
#con2 .con1 {background:url('../app/img/con2BG1.png') 0 50% / cover no-repeat, linear-gradient(130deg, #C8E6FF 30%, #82B4FF)}
#con2 .con2 {background:url('../app/img/con2BG1.png') 0 50% / cover no-repeat, linear-gradient(130deg, #B4E6DC 30%, #82D2B4)}
#con2 .blank {position:relative;width:100%;height:96%}

#con2 .con h1 {font-size:1.6vw;color:#646464;font-weight:700;letter-spacing:-0.1vw;margin:0.5vw 0 0 0.5vw}
#con2 .con .movie {position:relative;width:2vw;margin:0.4vw 0 0 0.3vw;filter:drop-shadow(0.2vw 0.2vw 0.1vw rgba(0, 0, 0, 0.1))}
#con2 .con .image {position:absolute;bottom:0vw;left:0.5vw;width:5vw;filter:drop-shadow(0.2vw 0.2vw 0.1vw rgba(0, 0, 0, 0.2))}
#con2 .con .arrow {position:absolute;bottom:1vw;right:2.5vw;width:4vw;filter:drop-shadow(0.2vw 0.2vw 0.1vw rgba(0, 0, 0, 0.1))}

#con2 .con_close {background:#E6E6E6}
#con2 .back {position:relative;border:solid #646464;border-width:0 0.2vw 0.2vw 0;display:inline-block;padding:0.5vw;transform:rotate(135deg);-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);-o-transform:rotate(135deg)}
/** e:con2 **/

@media screen and (max-width:1199px) {
/*	#csBox {padding:0 3%}*/
/*	#csBox ul li {background-size:25% auto !important}*/
/*	#csBox ul li.i-apply p {max-width:75%}*/
/*	#csBox ul li.i-apply br {display:none}*/
}

@media screen and (max-width:976px) {
/*	#bdBox {width:calc(56% - 15px)}*/
/*	#csBox {width:44%}*/
}

@media screen and (max-width:767px) {
	#mSection2 > div {height:auto}
	#bdBox {width:100%;padding:4%}
	#bdBox .bt-more {width:30px;height:30px}
	#bdBox .bdList li {margin-top:10px;padding-left:15px}

	#csBox {width:100%;margin-top:20px;padding:0}
	#csBox ul li {float:left;width:50%;height:auto;background-size:60px auto !important;overflow:hidden;box-sizing:border-box;background-position:95% center !important}
	#csBox ul li.i-apply {width:50%;border:0;background:none}
	#csBox ul li.i-cs {width:50%;border-left:1px solid #e5e5e5;background:none}
	#csBox ul li a { padding:7% 5% !important}
	#csBox ul li.i-cs div p a {display:inline-block;padding:0 !important}

	#csBox2 {width:100%;margin-top:20px}
	#csBox2 .scroll-text {font-size:1.5em}
}

@media screen and (max-width:480px) {
/*	#csBox {padding:0 5%}*/
/*	#csBox ul li {width:100%;background-position:right center !important}*/
/*	#csBox ul li.i-apply {border:0;border-bottom:1px solid #e5e5e5}*/
/*	#csBox ul li.i-cs {border:0}*/
/*	#csBox ul li a { padding:6% 0 !important}*/
}

#review {overflow:hidden;padding:60px 0;background:url('/img/main/reviewBG.png') no-repeat center;background-size:cover;border-top:2px solid #dad9de}
#review > .s-inner > h3 {color:#48474c;font-size:2em}
#review > .s-inner > p {color:#888}
#review ul {margin-top:40px}
#review ul li {float:left;width:calc(25% - 18px);margin-left:24px;background-color:#fff}
#review ul li:first-child {margin-left:0}
#review ul li img {width:100%}
#review ul li p {color:#3b3b3b;padding:20px;line-height:1.3em}
#review ul li p span {color:#adadad;font-size:0.875em;display:block;margin-top:15px}

@media screen and (max-width:976px) {
	#mcontWrap {padding:5% 0 6%}

	#review {padding:6% 0}
	#review ul {margin-top:5%}
	#review ul li {width:calc(25% - 9px);margin-left:12px}
	#review ul li p {padding:15px 10px}
}

@media screen and (max-width:767px) {
	#review ul li {width:calc(50% - 6px);margin-left:12px;margin-bottom:12px}
	#review ul li:nth-child(odd) {margin-left:0;clear:both}
	#review ul li p span {margin-top:10px}
}