@charset "utf-8";
#intro-wrap {width:100%;min-height:100%;background:url(/resources/_Etc/_Intro/_Img/intro_bg.jpg) no-repeat 50% 0;background-size:cover;}

/* header */
#header {position:relative;max-width:1440px;margin:0 auto;box-sizing:border-box;padding:0 20px;}
#header {display:flex;justify-content: space-between;align-items: flex-start;}
#header .logo {position:static;padding-top:60px;}
#header .logo img {max-width:100%;}

#header .gnaviBox {display:flex;padding-top:40px;}
/* #header .gnaviBox a {display:inline-block;position:relative;width:320px;color:#000000;border-radius:15px;background:#ffdf0b;padding:20px 75px 8px 30px;box-sizing:border-box;transition:all .3s ease;} */
#header .gnaviBox a {display:flex;flex-direction:column;justify-content:center;position:relative;width:280px;color:#000000;border-radius:15px;background:#ffdf0b;margin-left:10px;padding:20px 75px 8px 30px;box-sizing:border-box;transition:all .3s ease;}
#header .gnaviBox a:before {display:block;content:'';position:absolute;top:0;bottom:0;right:20px;margin:auto 0;width:29px;height:25px;background:url(/resources/_Etc/_Intro/_Img/intro_spr.png) no-repeat 0 0;}
#header .gnaviBox a:after {display:block;content:'';position:absolute;top:0;bottom:0;right:69px;margin:auto 0;width:1px;height:50px;background:rgba(0,0,0,0.2);}
#header .gnaviBox a:first-child {margin-left:0}
#header .gnaviBox a .t1 {display:inline-block;font-size:1.176em;}
#header .gnaviBox a .t2 {display:block;font-size:0.824em;}
#header .gnaviBox a.btnApply {color:#fff;background:#755fff}
#header .gnaviBox a.btnApply:before {background-position:0 -30px}
#header .gnaviBox a.btnApply:after {background:rgba(255,255,255,0.2);}
#header .gnaviBox a.btnIpsi {color:#fff;background:#3446f0;}
#header .gnaviBox a.btnIpsi:before {width:30px;height:19px;background-position:-39px 0;}
#header .gnaviBox a.btnIpsi:after {background:rgba(255,255,255,0.2);}

#header .gnaviBox a:focus,
#header .gnaviBox a:hover {box-shadow:0 7px 0 rgba(0,0,0,0.3);}

@media all and (max-width:1199px) {
	/* 수강신청전용 */
	#header .gnaviBox a {width:200px}
}
@media all and (max-width:999px){
	#header {background:none !important;justify-content: center;align-items: center;flex-direction: column;box-shadow:none;border:0}
	#header .logo {padding-top:30px;}
	#header .logo img {max-width:200px;}
	#header .gnaviBox {width:100%;padding-top:20px;}
	#header .gnaviBox a {width: calc(50% - 3px);padding:20px 50px 8px 20px;word-break:keep-all;}
	#header .gnaviBox a:before {right:10px;transform:scale(0.7);}
	#header .gnaviBox a:after {right:45px;height:40px;}
}
/* 수강신청 버튼 추가시 : 499 / 없는경우 : 399*/ 
@media all and (max-width:499px){
	#header .gnaviBox {display:block;}
	#header .gnaviBox a {width:100%;margin-left:0;margin-top:10px;}
	#header .gnaviBox a:first-child {margin-top:0}
}


/* contents */
#contents #cont {max-width:1440px;margin:0 auto;word-break:keep-all;word-wrap:break-word;box-sizing:border-box;padding:10px 20px 0 20px;}


/* 섹션 */
.introInfo {width:100%;}
.introInfo .top {width:100%;}
.introInfo .bottom {display:flex; justify-content: space-between; padding-top: 10px;}
.introInfo .sideL {width:41.429%;}
.introInfo .sideR {width:57.143%;display:flex;flex-wrap:wrap;justify-content: space-between;}

@media all and (max-width:899px){
	.introInfo {display:block;}
	.introInfo .sideL {width:100%;}
	.introInfo .sideR {width:100%;margin-top:20px;}
}
@media all and (max-width:599px){
	.introInfo .sideR {display:block;}
}




/* 공통 */
.introInfo .topTit {position:absolute;top:0;left:50%;width:auto;min-width:140px;background:#3a88dd;border-radius:0 0 20px 20px;padding:8px 15px 4px 15px;color:#fff;font-size:1.059em;font-weight:500;letter-spacing:0;text-align:center;box-sizing:border-box;transform:translateX(-50%);}
.introInfo .ctit {font-weight:500;letter-spacing:0;line-height:1.235em;}
.introInfo .ctxt {font-size:0.824em;font-weight:500;letter-spacing:0;line-height:1.214em;padding-top:4px;padding-bottom:14px;}
.introInfo .ctxt .tp {color:#000;}


/**/
.introInfo .inSec0 {width:100%;background:#fff;border-radius:20px;border:2px solid #ff7f4d;padding:12px 80px; box-sizing:border-box; display: flex;justify-content: space-between; align-items:center; line-height:1.4;}
.introInfo .inSec0 .ctit1 {color:#1d1f3d;font-weight:700;text-align:left;}
.introInfo .inSec0 .ctit2 {color:#ff7f4d; line-height: 1;}
.introInfo .inSec0 .conList {display:flex;flex-direction:column;align-items:left;}
.introInfo .inSec0 .conList2 {display:flex;flex-direction:column;align-items:flex-end;}
.introInfo .inSec0 .list{display: flex;flex-direction:column;align-items:center;}
.introInfo .inSec0 .list li {display:flex;position:relative;font-weight:500;color:#43455b;letter-spacing:0;padding-left:16px;font-size:0.88em; margin-left: 10px;}
.introInfo .inSec0 .list li:first-child::before {display:none;}

.introInfo .inSec0 .list .ltit {display:inline-block;min-width:85px;flex-shrink:1;}
.introInfo .inSec0 .list .ltxt {display:inline-block;}
.introInfo .inSec0 .list .ltxt .txtP {display:block;color:#cc0496;font-size:0.778em;line-height:1.214em;padding-top:12px;}

@media all and (max-width:899px){
	.introInfo .inSec0 {padding-bottom:120px;}
	.introInfo .inSec0:after {background-size:200px auto;}
}
@media all and (max-width:499px){
	.introInfo .inSec0 {padding-top:70px;}
	.introInfo .inSec0 .ctit {font-size:2em;}
	.introInfo .inSec0 .list li {display:block;}
}


/**/
.introInfo .inSec1 {position:relative;width:100%;background:#fff;border-radius:20px;border:10px solid #3a88dd;padding:87px 25px 270px 25px;box-sizing:border-box;overflow:hidden;}
.introInfo .inSec1:before {display:block;content:'';position:absolute;top: calc(100% - 176px);left:50%;margin:0 auto;width:972px;height:482px;background:#E8F2FD;border-radius:50%;transform:translateX(-50%);}
.introInfo .inSec1:after {display:block;content:'';position:absolute;bottom:0;left:0;right:0;margin:0 auto;width:100%;height:254px;background:url(/resources/_Etc/_Intro/_Img/intro_per.png) no-repeat 50% 100%;}
.introInfo .inSec1 .topTit {min-width:210px;background:#3a88dd;border-radius:0 0 30px 30px;font-size:1.176em;font-weight:700;padding-top:10px;padding-bottom:14px;}
.introInfo .inSec1 .ctit {font-size:2.353em;color:#1d1f3d;font-weight:700;text-align:center;}
.introInfo .inSec1 .conList {display:flex;flex-direction:column;align-items:center;}
.introInfo .inSec1 .list{padding-top:20px;}
.introInfo .inSec1 .list li {display:flex;position:relative;font-weight:500;color:#43455b;letter-spacing:0;padding-left:16px;font-size:1.059em;}
.introInfo .inSec1 .list li:before {display:block;content:'';position:absolute;top:8px;left:0;width:4px;height:4px;background:#005fc7;border-radius:50%;}
.introInfo .inSec1 .list .ltit {display:inline-block;min-width:85px;flex-shrink:1;}
.introInfo .inSec1 .list .ltxt {display:inline-block;}
.introInfo .inSec1 .list .ltxt .txtP {display:block;color:#cc0496;font-size:0.778em;line-height:1.214em;padding-top:12px;}
.introInfo .inSec1 .list li:first-child .ltxt {font-weight:700;color:#005fc7;}

@media all and (max-width:899px){
	.introInfo .inSec1 {padding-bottom:120px;}
	.introInfo .inSec1:after {background-size:200px auto;}
}
@media all and (max-width:499px){
	.introInfo .inSec1 {padding-top:70px;}
	.introInfo .inSec1 .ctit {font-size:2em;}
}


/**/
.introInfo .inSec2 {position:relative;width:48.75%;background:#fff;border-radius:20px;border:2px solid #d931ac;padding:58px 25px 10px 25px;box-sizing:border-box;}
.introInfo .inSec2 .topTit {background:#d931ac;}
.introInfo .inSec2 .ctit {color:#d931ac;-align:center;}

@media all and (max-width:599px){
	.introInfo .inSec2 {width:100%;}
}


/**/
.introInfo .inSec3 {position:relative;width:100%;background:#fff;border-radius:25px;border:2px solid #755fff;padding:58px 25px 27px 25px;box-sizing:border-box;}
.introInfo .inSec3 .topTit {background:#755fff;}
.introInfo .inSec3 .ctit {color:#755fff;}
.introInfo .inSec3 .ctxt {font-size:18px;}
.introInfo .inSec3 .conList {text-align: left;width: fit-content;margin: 0 auto;}

@media all and (max-width:599px){
	.introInfo .inSec3 {width:100%;margin-top:20px;}
}


/**/
.introInfo .inSec4 {position:relative;width:100%;background:rgba(49,59,74,0.9);border-radius:20px;padding:10px 25px 10px;box-sizing:border-box;text-align:center;margin-top:10px;}
.introInfo .inSec4:before {display:block;content:'';position:absolute;bottom:0;right:12px;width:142px;height:100px;background:url(../_Img/intro_spr.png) no-repeat -79px 0;}
.introInfo .inSec4 .topTit2 {display:inline-block;position:relative;font-size:1.18em;color:#ffd44d;font-weight:500;letter-spacing:0;padding:0 24px;}
.introInfo .inSec4 .topTit2:before {display:block;content:'';position:absolute;top:7px;left:0;width:7px;height:7px;background:#ffd44d;border-radius:50%;}
.introInfo .inSec4 .topTit2:after {display:block;content:'';position:absolute;top:7px;right:0;width:7px;height:7px;background:#ffd44d;border-radius:50%;}
.introInfo .inSec4 .ctxt {display:block;position:relative;font-size:30px;color:#fff;font-weight:500;letter-spacing:0;line-height:1.412em;padding-top:8px;padding-bottom:0;}

@media all and (max-width:1399px){
	.introInfo .inSec4:before {display:none;}
}


/**/
.linkLst {position:relative;width:100%;background:#006ee9;border-radius:40px;padding:10px 10px 10px 10px;box-sizing:border-box;text-align:center;margin-top:10px;}
.linkLst > ul {display:flex;width:100%;flex-wrap:wrap;}
.linkLst > ul > li {width:12.5%;text-align:center;}
.linkLst a {display:block;position:relative;color:#fff;font-weight:500;padding:95px 5px 0px 5px;}
.linkLst a span {text-decoration:none;background-image: linear-gradient(rgba(255, 255, 255,0), rgba(255, 255, 255,0)),linear-gradient(#fff, #fff);background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%;background-repeat: no-repeat;transition: background-size .3s linear;}
.linkLst a:before {display:block;content:'';position:absolute;top:30px;left:0;right:0;margin:0 auto;width:51px;height:46px;background:url(../_Img/intro_spr.png) no-repeat 0 -110px;transition:all .3s ease;}
.linkLst .ico01 {background-color:#fff; border-radius:20%;}
.linkLst .ico01 span{color:#222;}
.linkLst .ico01 a span {text-decoration:none;background-image: linear-gradient(rgba(255, 255, 255,0), rgba(255, 255, 255,0)),linear-gradient(#222, #222);background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%;background-repeat: no-repeat;transition: background-size .3s linear;}
.linkLst .ico06 span {line-height:1.4;}
.linkLst .ico01 a:before {background-position:0 -110px;}
.linkLst .ico02 a:before {background-position:-61px -110px;}
.linkLst .ico03 a:before {background-position:-122px -110px;}
.linkLst .ico04 a:before {background-position:-183px -110px;}
.linkLst .ico05 a:before {background-position:-244px -110px;}
.linkLst .ico06 a:before {background-position:-305px -110px;}
.linkLst .ico07 a:before {background-position:-366px -110px;}
.linkLst .ico08 a:before {background-position:-427px -110px;}

.linkLst a:focus span,
.linkLst a:hover span {background-size: 0 1px, 100% 1px;}
.linkLst a:focus:before,
.linkLst a:hover:before {top:25px;}

@media all and (max-width:1199px){
	.linkLst > ul > li {width:20%;}
}
@media all and (max-width:898px){
	.introInfo .inSec0 {padding-bottom:0;}
	.introInfo .sideR {margin-top:10px;}
	 .introInfo .sideL {width:100%;}
	.introInfo .bottom{flex-direction:column;}

}

@media all and (max-width:599px){
	.introInfo .inSec0{padding: 8px 20px; flex-direction:column; align-items: center;}
	.introInfo .inSec0 .conList {align-items: center; margin-bottom:12px;}
	.introInfo .inSec0 .list{margin-bottom:12px;}
	.introInfo .inSec0:before {display:block;content:'';position:absolute;top:80px;left:50%;width:4px;height:4px;background:#d33a00;border-radius:50%;}
	.introInfo .inSec0 .conList2:before {display:block;content:'';position:absolute;top:148px;left:50%;width:4px;height:4px;background:#d33a00;border-radius:50%;}
	.introInfo .inSec0 .list li{padding-left:0px;margin-left:0px;}
	.introInfo .inSec0 .list li:first-child::before {display:block;}
	.introInfo .inSec0 .conList2 {align-item: center;}
	.linkLst > ul > li {width:33.33%;}
	.linkLst a {padding:50px 5px 10px 5px;}
	.linkLst a:before {top:0;transform:scale(0.7);}
}