@charset "UTF-8";

article{font-size:14px; color:#666; line-height:20px; text-align:center;}
article:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
select{height:28px; border:1px solid #b8bdc8; background:#fff; color:#333; padding-left:5px;}
textarea{height:68px; border:1px solid #b8bdc8; padding:5px; margin:10px 0;}
.in_txt{height:24px; border:1px solid #b8bdc8; background:none; text-indent:5px;}

#contents{}

/* 서브페이지 컨텐츠 영역 */
.company, .advance, .curriculum, .course, .privacy, .refund, .edu_price, .curriculumPre, .itbankcyber{padding-top: 60px; padding-bottom: 80px;}
.consulting {padding-top: 60px;}

/* 서브 TOP IMG */
.subtopimg{overflow:hidden; padding: 112px 0px; /*background-attachment: fixed;*/ position: relative;}
.bbs_titlebg.subtopimg {padding: 0; position: relative;}
.bbs_titlebg.subtopimg .width {top: 70px;}
.subtopimg:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.subtopimg .width{position:relative; left:0;}
.subtopimg h1, .subtopimg h3 {position: relative; top: -10px;}
.subtopimg h1{color:#fff; font-size:40px; font-weight:600; letter-spacing:0; text-align: center;}
.subtopimg h3{color:#fff; font-size:14px; font-weight:300; letter-spacing:0; text-align: center; opacity: 0.6;}
.subtopimg.footer_titlebg h1 {padding-top: 74px;}

.compnay_titlebg{background:url('/img/sub/company_topimg.jpg') center center / cover no-repeat; background-attachment: fixed;}
.advance_titlebg{background:url('/img/sub/advance_topimg.jpg') center center / cover no-repeat; background-attachment: fixed;}
.consult_titlebg{background:url('/img/sub/coding_topimg.jpg') center center / cover no-repeat; background-attachment: fixed;}
.curriculum_titlebg{background:url('/img/sub/curriculum_topimg.jpg') center center / cover no-repeat; background-attachment: fixed;}
.course_titlebg{background:url('/img/sub/course_topimg.jpg') center center / cover no-repeat; background-attachment: fixed;}
.certificate_titlebg{background:url('/img/sub/certificate_topimg.jpg') center center / cover no-repeat; background-attachment: fixed;}
/*.bbs_titlebg{background:url('/img/sub/bbs_topimg.jpg') center center / cover no-repeat; height: 220px;}*/
.bbs_titlebg{background:url('/img/sub/community_topimg_parallx.jpg') center center / cover no-repeat; background-attachment: fixed; height: 220px;}
.footer_titlebg{background:url('/img/sub/footer_topimg.jpg') center center / cover no-repeat; background-attachment: fixed; height: 220px; padding: 0;}

.subtopimg .bbs_title_btm {width:100%; height: 60px; background-color: rgba(0, 0, 0, 0.1); position: absolute; bottom: 0; left: 0;}
.subtopimg .bbs_title_btm .width {position: static; height: 100%;}
.subtopimg .bbs_title_btm .width > * {float: left; font-size: 14px; color: #fff; padding-top: 18px; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; font-weight: bold; }
.subtopimg .bbs_title_btm .width > p {font-weight: normal;}
.subtopimg .bbs_title_btm p {width: 90px; height: 100%; text-align: center; border-right: 1px solid rgba(255, 255, 255, 0.2);}
.subtopimg .bbs_title_btm .boardLiWrap {padding-left: 25px; cursor: pointer;}
.subtopimg .bbs_title_btm .boardLiWrap span {margin-right: 20px; position: relative; display: inline-block; margin-left: 13px; width: 17px; height: 17px; background-color: #01e399; vertical-align: -3px;}
.subtopimg .bbs_title_btm .boardLiWrap span:after, .subtopimg .bbs_title_btm .boardLiWrap span:before {content: ''; position: absolute; display: block; width: 9px; height: 1px; background-color: #000; left: 4px; top: 8px;}
.subtopimg .bbs_title_btm .boardLiWrap span:after {-webkit-transform: rotate(90deg); transform: rotate(90deg);}


.boardLiWrap { transition: width 0.2s; margin-right: 20px; }
.boardLiWrap span {}
.boardLiWrap span:after {transition: all 0.2s;}
.bbs_title_btm .list {display: none; float: right;}
.bbs_title_btm .list li {display: inline-block; margin-right: 20px; font-weight: normal; height: 100%; }
.bbs_title_btm .list li:last-child {margin-right: 0;}
.bbs_title_btm .list li a { -webkit-transition: all 0.3s; transition: all 0.3s;}
.bbs_title_btm .list li:hover a {color: #01e399;}
.bbs_title_btm .list li.active a {color: #01e399;}

.boardLiWrap:hover span {animation: subUlArrowBox 0.4s both;}
.boardLiWrap:hover span:after {animation: subUlArrow 0.4s both;}

.subtopimg .bbs_title_btm .boardLiWrap .list  {animation: subUlBlock 1s both;}
.subtopimg .bbs_title_btm .boardLiWrap:hover .list {display: block;}
.subtopimg .bbs_title_btm .boardLiWrap[class*="expanded"] .list {display: block; height: 100%;}
.subtopimg .bbs_title_btm .boardLiWrap[class*="expanded"] .list a {display: block; width: 100%; height: 100%;}
.subtopimg .bbs_title_btm .boardLiWrap[class*="expanded"] span:after {-webkit-transform: rotate(0);transform: rotate(0);}
@keyframes subUlBlock {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes subUlArrowBox {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(180deg);
	}
}

@keyframes subUlArrow {
	0% {
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	100% {
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}
}


/* 서브 TTL */
.tracking-in-expand-fwd-bottom {
	-webkit-animation: tracking-in-expand-fwd-bottom 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand-fwd-bottom 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-8-5 15:55:53
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tracking-in-expand-fwd-bottom
 * ----------------------------------------
 */
@-webkit-keyframes tracking-in-expand-fwd-bottom {
  0% {
    letter-spacing: -0.5em;
    -webkit-transform: translateZ(-700px) translateY(500px);
            transform: translateZ(-700px) translateY(500px);
    opacity: 0;
  }
  40% {
    opacity: 0.1;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}
@keyframes tracking-in-expand-fwd-bottom {
  0% {
    letter-spacing: -0.5em;
    -webkit-transform: translateZ(-700px) translateY(500px);
            transform: translateZ(-700px) translateY(500px);
    opacity: 0;
  }
  40% {
    opacity: 0.1;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}

.ct_wrap{padding-bottom: 40px; position:relative; display: none;}
.ct_wrap .contens-title{font-size: 40px; color: #333; font-weight: 100; text-align: left; line-height: 40px; letter-spacing: -4px;}
.ct_wrap .contens-title:before{content:"/"; display: inline-block; color:#5960d4; font-size: 28px; font-weight: bold; position: relative; top: -7px; margin-right: 20px;}
.page-navi{color:#999999; font-size: 12px; position:relative; top: -34px; float: right;}
.page-navi ul li{float: left; letter-spacing:0;}
.page-navi ul li:last-child:after{display: none;}
.page-navi ul li:after{content:">"; display: inline-block;padding: 0px 10px; position: relative; top: -1px; color: #222; font-size: 22px;}
.page-navi:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

.mainttl {text-align: center; padding: 20px 0 25px; border-bottom: 1px solid #3b4360; font-size: 22px; color: #222; font-weight: 400;}
.subttl{font-size:22px; color:#222;font-weight:bold;margin:50px 0 20px;}
.subttl span{color:#222; font-size:15px; margin-left:10px; font-weight: 300;}
.subEx {font-size: 15px; color: #222; font-weight: 300; text-align: left;}
.subEx1 {font-size: 16px; color: #222; font-weight: 300; text-align: left;}
.privacy .subttl {position: relative;}
.privacy .subttl:before {content: ''; display: block; width: 18px; height: 1px; background-color: #29cf99; position: absolute; left: 0; top: -7px;}

/* 인사말 */
.companypage{}
.companypage .bg {position: absolute; z-index: -1;}
.companypage .section1 {-webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 15px;}
.companypage .section1 * {line-height: normal; text-align: left;}
.companypage span.pColor {color: #00cb89;}
.companypage .section1:hover .right img:not(.bg) {-webkit-transform: scale(1.05); transform: scale(1.05);}
.companypage .section1 > * {float: left;}
.companypage .section1 .left {width: 635px;}
.companypage .section1 .left h2 {color: #222; font-size: 50px; margin-bottom: 50px; line-height: 1; letter-spacing: -2px;}
.companypage .section1 .left p {color: #222; font-size: 18px; line-height: 1.3;}

.companypage .section1 .right {width: 450px; position: relative;}
.companypage .section1 .right .img {width: 413px; height: 413px; border-radius: 50%; overflow: hidden; float: right; position: relative;}
.companypage .section1 .right .img img:not(.bg) {transition: all 0.3s; -webkit-transition: all 1s ease-in-out;}

.companypage .section1 .right .bg1 {top: 76px; left: 30px;}
.companypage .section1 .right .bg2 {top: 230px; left: -15px;}
.companypage .section1 .right .bg3 {top: 415px; left: 150px;}
.companypage .section1 .right .bg4 {top: 465px; left: 215px;}
.companypage .section1 .right .bg5 {top: 390px; left: 370px;}

.companypage .section2 {margin-top: 83px;}
.companypage .section2 h3 {-webkit-box-sizing: border-box; box-sizing: border-box; background: url(/img/sub/bg_quickTitle.png) left 6px top no-repeat; font-size: 28px; color: #222; text-align: left; padding: 14px 0 0 15px; margin-bottom: 60px;}
.companypage .section2 .content {height: 375px; position: relative; width: 100%;}
.companypage .section2 .content .txt {position: absolute; width: 290px;}
.companypage .section2 .content .txt h4 { padding-left: 4px;font-size: 19px; color: #222;padding-bottom: 14px; position: relative; display: inline-block; }
.companypage .section2 .content .txt h4:after {content: ''; display: block; width: 100%; height: 16px; background-color: #fff45a; z-index: -1; position: absolute; top: 7px; left: 0; }
.companypage .section2 .content .txt p {font-size: 15px; color: #222; font-weight: 300; }
.companypage .section2 .content .txt span {font-size: 13px; color: #666; font-weight: 300; }
.companypage .section2 .content .txt1 h3, .companypage .section2 .content .txt3 h3 { float: right;}
.companypage .section2 .content .txt1, .companypage .section2 .content .txt3 { text-align: right; left: 32px;}
.companypage .section2 .content .txt2, .companypage .section2 .content .txt4 { text-align: left; right: 32px;}
.companypage .section2 .content .txt2 p, .companypage .section2 .content .txt4 p { padding-left: 4px;}
.companypage .section2 .content .txt1 {top: 0;}
.companypage .section2 .content .txt2 {top: 0;}
.companypage .section2 .content .txt3 {bottom: 0;}
.companypage .section2 .content .txt4 {bottom: 0;}

.companypage .section2 .circleWrap {width: 375px; height: 375px; margin: 0 auto; position: relative;}
.companypage .section2 .circleWrap > div {-webkit-box-sizing: border-box; box-sizing: border-box; position: absolute;}


.companypage .section2 .circleWrap .circleMain_1 {animation: companyCircle02 infinite 1.5s 0.5s ease-in-out; opacity: 0; width: 280px; height: 280px; border-radius: 100%; border: 1px solid #f0f0f0; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.companypage .section2 .circleWrap .circleMain_2 {animation: companyCircle01 infinite 1.5s ease-in-out; width: 334px; height: 334px; border-radius: 100%; background-color: #e0fff4; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.companypage .section2 .circleWrap .circleMain_3 {width: 220px; height: 220px; border-radius: 100%; background-color: #01e399; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.companypage .section2 .circleWrap .circleIcon {position: absolute; width: 64px; height: 64px; border-radius: 100%;}
.companypage .section2 .circleWrap .circleIcon1, .companypage .section2 .circleWrap .circleIcon4 {background-color: #01e399 !important;}
.companypage .section2 .circleWrap .circleIcon2, .companypage .section2 .circleWrap .circleIcon3 {background-color: #00ab73 !important;}
.companypage .section2 .circleWrap .circleIcon1 {top: 30px; left: 17px; background: url(/images/company/companypage_icon_worth1.png) no-repeat center center; }
.companypage .section2 .circleWrap .circleIcon2 {top: 30px; right: 17px; background: url(/images/company/companypage_icon_worth2.png) no-repeat center center; }
.companypage .section2 .circleWrap .circleIcon3 {bottom: 38px; left: 17px; background: url(/images/company/companypage_icon_worth3.png) no-repeat center center; }
.companypage .section2 .circleWrap .circleIcon4 {bottom: 38px; right: 17px; background: url(/images/company/companypage_icon_worth4.png) no-repeat center center; }
.companypage .section2 .circleWrap .circleMain_3 .txt {width: 100%; position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.companypage .section2 .circleWrap .circleMain_3 .txt p:first-child {font-family: 'Sunflower', sans-serif;font-weight: bold; font-size: 34px; color: #fff;line-height: 0.9; }
.companypage .section2 .circleWrap .circleMain_3 .txt p:nth-child(2) {font-family: 'Sunflower', sans-serif;font-weight: bold; font-size: 60px; color: #000;line-height: 0.9; }
.companypage .section2 .circleWrap .circleMain_3 .txt p:last-child {font-weight: 300; font-size: 15px; color: #000; line-height: 1.4; padding-top: 2px; }

@keyframes companyCircle01 {
	0% {
		opacity: 0;
		width: 210px;
		height: 210px;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		width: 334px;
		height: 334px;
	}
}

@keyframes companyCircle02 {
	0% {
		opacity: 0;
		width: 280px;
		height: 280px;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		width: 100%;
		height: 100%;
	}
}

.companypage .section3 {margin-top: 98px; padding: 50px 0 80px; background-color: #f4f5ff; }
.companypage .section3 h3 {position: relative; z-index: 1; -webkit-box-sizing: border-box; box-sizing: border-box;font-size: 28px; color: #222; text-align: left;  padding: 14px 0 0 15px; margin-bottom: 50px;}
.companypage .section3 h3:before {content: ''; display: block; position: absolute; top: 0; left: 6px; background-color: #acbeff; width: 23px; height: 23px; border-radius: 100%; z-index: -1;  }
.companypage .section3 .content { -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 60px; position: relative; z-index: 1;}
.companypage .section3 .content .box {width: 184px; height: 184px; border-radius: 100%; float: left; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative;}
.companypage .section3 .content .box:not(:nth-child(4)) {border: 1px solid #d8d8d8; background-color: #fff; margin-right: 72px; position: relative;}
.companypage .section3 .content .box:not(:nth-child(4)):after {content: ''; display: block; position: absolute;top: 85px; left: 168px; width: 80px; height: 15px; background-image: url(/images/company/companypage_icon_rightArw.png);}
.companypage .section3 .content .box:nth-child(4) {background-color: #303cc2;}
.companypage .section3 .content .box .line {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.companypage .section3 .content .box:first-child .line {background-image: url(/images/company/companypage_bg_boxLine1.png);}
.companypage .section3 .content .box:nth-child(2) .line {background-image: url(/images/company/companypage_bg_boxLine2.png);}
.companypage .section3 .content .box:nth-child(3) .line {background-image: url(/images/company/companypage_bg_boxLine3.png);}
.companypage .section3 .content .box p { line-height: 1.3;width: 100%; text-align: center; position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-weight: bold; font-size: 20px;}
.companypage .section3 .content .box:not(:nth-child(4)) p {color: #222;}
.companypage .section3 .content .box:nth-child(4) p {color: #fff;}
.companypage .section3 .box .bg6 {top: 135px; left: 0; z-index: 1;}
.companypage .section3 .content .bg7 {top: 19px; right: 50px;}
.companypage .section3 .content .bg8 {top: 149px; right: 60px;}

.companypage .section4  {background: url(/images/company/companypage_bg_section4.png) no-repeat center bottom 60px; padding: 45px 0 136px; }
.companypage .section4 .width {position: relative;}
.companypage .section4 .left {width: 348px; float: left; padding: 62px 0 0 15px;}
.companypage .section4 .left h3 {font-size: 36px; color: #222; margin-bottom: 36px; text-align: left; line-height: 1.1; }
.companypage .section4 .left p {font-size: 16px; color: #666; text-align: left; font-weight: 300; }
.companypage .section4 .left .more {transition: all 0.3s; cursor: pointer; color: #222; font-size: 14px; padding: 14px 20px; border: 1px solid #222; background-color: #fff; position: absolute; bottom: 0; left: 0;}
.companypage .section4 .left .more img {vertical-align: 3px;}
.companypage .section4 .left .more:hover {box-shadow: 2px 2px 10px rgba(0,0,0,0.5);}
.companypage .section4 .right {width: 652px; height: 400px; float: right; position: relative;}
.companypage .section4 .right .slideBox {position: absolute; left: 60px; bottom: 0; width: 458px; height: 330px; -webkit-box-sizing: border-box; box-sizing: border-box;  border: 5px solid #20f2ad; }
.companypage .section4 .lectureWrap {width:478px; height: 100%; position: relative; margin:0; }
.companypage .section4 .lectureWrap .lecture img {position: relative; top: -1px; left: -32px; display: block; padding-left: 22px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.companypage .section4 .swiper-container-fade .swiper-slide {opacity: 0 !important;}
.companypage .section4 .swiper-container-fade .swiper-slide.swiper-slide-active {opacity: 1 !important;}
.companypage .section4 .lectureExWrap {position: relative; width: 240px; height: 190px; background-color: #333b48; position: absolute; z-index: 100; bottom: -56px; right: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }
.companypage .section4 .lectureEx {position: absolute; top: 32px; left: 30px; transition: all 0.3s; width: 178px; height: 128px; }
.companypage .section4 .lectureExWrap h5 {margin-bottom: 36px; text-align: left; font-size: 20px; color: #fff; line-height: 1.4;}
.companypage .section4 .lectureExWrap p {text-align: left; font-size: 14px; color: #fff; line-height: 1.3;}
.companypage .section4 .right .btnArw  {position: absolute; bottom: 0; }
.companypage .section4 .right .btnArw.swiper-button-prev {left: 15px;}
.companypage .section4 .right .btnArw.swiper-button-next {left: 60px;}
.companypage .swiper-button-next, .companypage .swiper-button-prev {right: inherit; top: inherit; width: auto; height: auto; margin-top: 0; background: none;}
.companypage .swiper-pagination-bullet {width: auto; height: auto; display: block; border-radius: 0; background-color: transparent; opacity: 0 !important;}
.companypage .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1 !important;}
.companypage .section4 .right .bg9 {top: 226px; left: -120px;}
.companypage .section4 .right .bg10 {top: 154px; left: 266px;}
.companypage .section4 .right .bg11 {top: 15px; left: 370px; z-index: 10;}
.companypage .section4 .right .bg12 {top: 211px; left: 539px;}

.companypage .section5 {position: relative; background: url(/images/company/companypage_section5_bg.jpg) center center / cover no-repeat; background-attachment: fixed; height: 180px;}
.companypage .section5 h3 {width: 100%;font-size: 29px; color: #fff; line-height: 1.5; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-weight: normal;}
.companypage .section5 h3 strong {font-size: 29px; color: #20f2ad; text-align: left;}

.popBg {width: 100%; height: 100%; position: fixed; top: 0; left: 0; overflow: hidden; background-color: rgba(0,0,0,0.6); z-index: 1000;}


/* 비전/미션 */
.vision{ text-align:left;}
.vision .tab {width: 100%; height: 80px; position: relative;}
.vision .tab li {cursor: pointer;width: 50%; float: left; -webkit-box-sizing: border-box;  box-sizing: border-box; border: 1px solid #d7d7d7; border-top: 4px solid #d7d7d7; font-size: 20px; font-weight: bold; color: #222; text-align: center; height: 100%; padding-top: 18px; -webkit-transition: all 0.3s; transition: all 0.3s;  }
.vision .tab li span {font-size: 16px; font-weight: 400; display: inline-block; margin-top: 2px;}
.vision .tab li:first-child {border-right: 0;}
.vision .tab li.on {color: #6871d1; }
.vision .tab .actBox {position: absolute; top: 0; width: 50%; height: 100%; -webkit-box-sizing: border-box;  box-sizing: border-box; border: 1px solid #6871d1; border-top: 4px solid #6871d1; left: 0;  }

.vision .mainContent .contentWrap { margin-top: 58px;}
.vision .mainContent .contentWrap > div {float: left; width: 50%; -webkit-box-sizing: border-box;  box-sizing: border-box;}
.vision .mainContent .contentWrap > div h3 {font-size: 34px; color: #3b4360; line-height: normal;}
.vision .mainContent .contentWrap > div p {font-size: 14px; color: #666; margin-top: 14px;line-height: normal;}
.vision .mainContent .contentWrap .left {padding-right: 105px; text-align: right; }
.vision .mainContent .contentWrap .right {padding-left: 105px; }
.vision .mainContent .contentWrap .left > div, .vision .mainContent .contentWrap .right > div {position: relative;}
.vision .mainContent .contentWrap1 {background: url(/images/company/history_bg_line1.png) center top no-repeat; min-height: 1513px;}
.vision .mainContent .contentWrap1 .left1 {margin-top: 18px;}
.vision .mainContent .contentWrap1 .left2 {margin-top: 158px;}
.vision .mainContent .contentWrap1 .left3 {margin-top: 178px;}
.vision .mainContent .contentWrap1 .left4 {margin-top: 190px;}
.vision .mainContent .contentWrap1 .left5 {margin-top: 163px;}
.vision .mainContent .contentWrap1 .right1 {margin-top: 148px;}
.vision .mainContent .contentWrap1 .right2 {margin-top: 158px;}
.vision .mainContent .contentWrap1 .right3 {margin-top: 178px;}
.vision .mainContent .contentWrap1 .right4 {margin-top: 170px;}

.vision .mainContent .contentWrap2 {background: url(/images/company/history_bg_line2.png) center top no-repeat; min-height: 1416px;}
.vision .mainContent .contentWrap2 {display: none;}
.vision .mainContent .contentWrap2 .left1 {margin-top: 188px;}
.vision .mainContent .contentWrap2 .left2 {margin-top: 157px;}
.vision .mainContent .contentWrap2 .left3 {margin-top: 170px;}
.vision .mainContent .contentWrap2 .right1 {margin-top: 20px;}
.vision .mainContent .contentWrap2 .right2 {margin-top: 178px;}
.vision .mainContent .contentWrap2 .right3 {margin-top: 108px;}
.vision .mainContent .contentWrap2 .right4 {margin-top: 216px;}

.vision .mainContent .contentWrap .bg, .vision .mainContent .contentWrap .img {position: absolute; z-index: -10;}

.vision .mainContent .contentWrap1 .bg1 {top: 175px; left: 15px;}
.vision .mainContent .contentWrap1 .bg2 {top: -18px; right: 60px;}
.vision .mainContent .contentWrap1 .bg3 {top: -20px; left: 150px;}
.vision .mainContent .contentWrap1 .bg4 {top: -50px; left: 180px; z-index: -5;}
.vision .mainContent .contentWrap1 .bg5 {top: 80px; left: 90px;}
.vision .mainContent .contentWrap1 .bg6 {top: -100px; right: 200px; z-index: -5;}
.vision .mainContent .contentWrap1 .bg7 {top: 60px; left: 150px;}
.vision .mainContent .contentWrap2 .bg8 {top: 10px; left: 200px;}
.vision .mainContent .contentWrap2 .bg9 {top: -90px; right: 10px;}
.vision .mainContent .contentWrap2 .bg10 {top: -150px; left: 118px; z-index: -5;}
.vision .mainContent .contentWrap2 .bg11 {top: 450px; right: 50px; z-index: -5;}
.vision .mainContent .contentWrap2 .bg12 {top: 100px; right: 40px;}
.vision .mainContent .contentWrap2 .bg13 {top: -30px; left: 80px;}
.vision .mainContent .contentWrap2 .bg14 {top: -130px; right: 195px;}
.vision .mainContent .contentWrap2 .bg15 {top: -190px; right: 40px;}

.vision .mainContent .contentWrap1 .img1 {top: -10px; left: 0px;}
.vision .mainContent .contentWrap1 .img2 {top: -200px; left: 0px;}
.vision .mainContent .contentWrap1 .img3 {top: -120px; right: 50px;}
.vision .mainContent .contentWrap1 .img4 {top: 190px; left: 0px;}
.vision .mainContent .contentWrap2 .img5 {top: -190px; left: 15px;}
.vision .mainContent .contentWrap2 .img6 {top: -140px; left: 100px;}
.vision .mainContent .contentWrap2 .img7 {top: 300px; left: 150px;}
.vision .mainContent .contentWrap2 .img8 {top: -160px; right: 50px; z-index: -5;}


.business{background-color:#f7f8fa; padding-top:10px; margin:50px 0 70px;}
.business h1{text-align:left;}
.business ul{margin-left:-80px; margin-top:50px;}
.business ul:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.business ul li{width:510px; height:200px; float:left; margin-left:80px; margin-bottom:80px; position:relative;}
.business ul li p{text-align:left; background-color:#f7f8fa; font-size:16px; line-height:21px; color:#333; width:43%; position:absolute; right:0; bottom:0; padding:20px 0 10px 35px;}
.business ul li p span{font-size:13px; color:#666;}
.business ul li:before{content:""; display:block; background-color:#5960d4; width:20px; height:20px; position:absolute; right:0;}
.business ul li.bg1{background:url('/img/sub/vision_business_bg01.jpg') left top no-repeat;}
.business ul li.bg1:after{content:"01"; display:block; color:#5960d4; font-size:14px; font-weight:bold; padding:5px; background-color:#f7f8fa; width:23px; position:absolute; right:3px; top:3px;}
.business ul li.bg2{background:url('/img/sub/vision_business_bg02.jpg') left top no-repeat;}
.business ul li.bg2:after{content:"02"; display:block; color:#5960d4; font-size:14px; font-weight:bold; padding:5px; background-color:#f7f8fa; width:23px; position:absolute; right:3px; top:3px;}
.business ul li.bg3{background:url('/img/sub/vision_business_bg03.jpg') left top no-repeat;}
.business ul li.bg3:after{content:"03"; display:block; color:#5960d4; font-size:14px; font-weight:bold; padding:5px; background-color:#f7f8fa; width:23px; position:absolute; right:3px; top:3px;}
.business ul li.bg4{background:url('/img/sub/vision_business_bg04.jpg') left top no-repeat;}
.business ul li.bg4:after{content:"04"; display:block; color:#5960d4; font-size:14px; font-weight:bold; padding:5px; background-color:#f7f8fa; width:23px; position:absolute; right:3px; top:3px;}
.business ul li.bg5{background:url('/img/sub/vision_business_bg05.jpg') left top no-repeat;}
.business ul li.bg5:after{content:"05"; display:block; color:#5960d4; font-size:14px; font-weight:bold; padding:5px; background-color:#f7f8fa; width:23px; position:absolute; right:3px; top:3px;}
.business ul li.bg6{background:url('/img/sub/vision_business_bg06.jpg') left top no-repeat;}
.business ul li.bg6:after{content:"06"; display:block; color:#5960d4; font-size:14px; font-weight:bold; padding:5px; background-color:#f7f8fa; width:23px; position:absolute; right:3px; top:3px;}
.business ul li.bg7{background:url('/img/sub/vision_business_bg07.jpg') left top no-repeat;}
.business ul li.bg7:after{content:"07"; display:block; color:#5960d4; font-size:14px; font-weight:bold; padding:5px; background-color:#f7f8fa; width:23px; position:absolute; right:3px; top:3px;}
.business ul li.bg8{background:url('/img/sub/vision_business_bg08.jpg') left top no-repeat;}
.business ul li.bg8:after{content:"08"; display:block; color:#5960d4; font-size:14px; font-weight:bold; padding:5px; background-color:#f7f8fa; width:23px; position:absolute; right:3px; top:3px;}

/* 철학나눔 */
.csr:before{content:""; display:block; background:url('/img/sub/csr_bg.png') left top no-repeat; width:400px; height:540px; position:absolute; z-index:-1; left:0;}
.csr{background-color:#f2f2f9; height:540px;}
.csr:after{content:""; display:block; background-color:#f2f2f9; width:50%; height:540px; position:absolute; z-index:-1; right:0;}
.csr .swiper-container-csr{width:1400px; height:540px; position:absolute; margin-left:80px; overflow:hidden;}
.csr .swiper-slide .list{text-align:left;}
.csr .swiper-slide .list p{font-size:30px; color:#dfe0f8; font-weight:bold; position:absolute; top:145px; left:-60px; z-index:1; -ms-transform: rotate(270deg); /* IE 9 */-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */transform: rotate(270deg);}
.csr .swiper-slide .list p:after{content:""; display:block; background-color:#858df3; width:70px; height:1px; position:absolute; top:11px; left:157px;}
.csr .swiper-slide .list img{width:365px; height:245px; position:relative; top:80px; left:45px;}
.csr .swiper-slide .list .txt{background-color:#fff; width:270px; height:215px; font-size:13px; line-height:21px; position:relative; padding:30px 40px; margin-top:20px;}
.csr .swiper-slide .list .txt h1{font-size:18px; color:#333; line-height:22px; margin-bottom:10px;}
.csr .swiper-slide .list .txt .go{background:url('/img/sub/csr_arrow.png') 80px 12px no-repeat; color:#999; width:150px; height:34px; border:1px solid #d7d7d7; display:block; line-height:32px; text-indent:10px; margin-top:30px;}
.csr .arrows{}
.csr .swiper-button-prev{background:url('/img/sub/csr_prev.png') left top no-repeat; width:40px; height:40px; top:522px; left:939px;}
.csr .swiper-button-next{background:url('/img/sub/csr_next.png') right top no-repeat; width:40px; height:40px; top:522px; right:380px;}
.csr .swiper-slide .list > img{opacity:0.5;}
.csr .swiper-slide-active .list > img{opacity:1 !important;}
.csr .swiper-slide-next .list > img{opacity:1 !important;}
.csr .opacity{position:relative;}
.csr .opacity .opacitywidth{position:absolute; background-color:#fff; width:350px; height:270px; left:1066px; top:266px; z-index:2; opacity:0.5;}

/* 시설안내 */

.installation {margin-bottom: 50px;}
.installation .slideThumbWrap {width: 1100px; padding: 0 3px; margin: 0 auto 58px; overflow: hidden;}
.installation .slideThumbWrap .slideThumbBox {margin: 0 3px; width:132px; height: 94px; float: left; position: relative; cursor: pointer; }
.installation .slideThumbWrap .slideThumbBox .bg {-webkit-transition: all 0.3s; transition: all 0.3s;position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0, 0, 0, 0.6); }
.installation .slideThumbWrap .slideThumbBox.swiper-slide-thumb-active .bg {background-color: rgba(48, 60, 195, 0.9); }
.installation .slideThumbWrap .slideThumbBox .slideThumbName {width: 100%; position: absolute; left: 0; text-align: center; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 17px; color: #fff; }

.installation .slideMainWrap {position: relative; width: 100%; height: 570px;}
.installation .slideMainWrap:after {content: ''; display: block; width: 100%; height: 58%;background-color: #ebedfe;position: absolute; left: 0; bottom: -82px; z-index: -1;}
.installation .slideMainWrap .slideBg {z-index: 9; width: 840px; height: 100%; position: absolute; top: 0; left:50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
.installation .slideWrap {height: 100%;}
.installation .slideMainWrap .slideBg:before {content:''; width: 100%; height: 50%;position: absolute; top: 0; left: 0;-webkit-box-sizing: border-box; box-sizing: border-box; border-top: 20px solid #f3f3f3; border-left: 20px solid #f3f3f3;}
.installation .slideMainWrap .slideBg:after {content:''; width: 300px; height: 285px; -webkit-box-sizing: border-box; box-sizing: border-box; border-top: 20px solid #01e399;border-right: 20px solid #01e399;  position: absolute; top: 0; right: 0;}
.installation .slideMainWrap .slideBg .slideBg2 {position: absolute; left: 0; bottom: 0; width: 100%; height: 50%; border-left: 20px solid #fff; border-right: 20px solid #fff; border-bottom: 20px solid #fff; -webkit-box-sizing: border-box; box-sizing: border-box;}
.installation .slideMainWrap .slideBtnWrap {width: 840px; height: 100%; position: absolute; top: 0; left:50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 10; }
.installation .slideMainWrap .slideBtnWrap .slideBtn { width: 41px; height: 66px;position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer; }
.installation .slideMainWrap .slideBtnWrap .slideBtn.slidePrev {left: 40px; background-image: url(/images/company/installation_arwPrev.png); }
.installation .slideMainWrap .slideBtnWrap .slideBtn.slideNext {right: 40px; background-image: url(/images/company/installation_arwNext.png);}
.installation .slideWrap .slideMainBox { /* width: 840px !important; */ height: 420px; /* padding: 75px 20px 20px; */ padding: 75px 0 20px; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 1;}
.installation .slideWrap .slideMainBox .img {width: 100%; height: 100%;opacity: 0.5;}

/* .installation .slideWrap .swiper-wrapper {margin-left: -102px;} */

.installation .slideWrap .slideMainBox.swiper-slide-active { height: 100%; /* padding: 20px; */ padding-top: 20px; padding-bottom: 20px;}
.installation .slideWrap .slideMainBox.swiper-slide-active .img {width: 100%; height: 100%; opacity: 1;}

.installation .slideMainWrap .bg {position: absolute;}
.installation .slideMainWrap .bg1 {top: -18px; left: 200px;}
.installation .slideMainWrap .bg2 {top: -50px; right: 200px;}


/* 오시는길 */
.company .tab{display: flex; justify-content:center; gap: 10px; margin-bottom: 40px;}
.company .tab li{padding: 15px 40px; color: #999; font-size: 18px; background-color: #eaedf1; border-radius:25px; cursor: pointer;}
.company .tab li.act{color: #fff; background-color: #01e399;}
.company .map{width: 1200px; height: 630px; margin: 0 auto 100px;}
.company .map .info{position: relative; background-color: #303cc2; top: -60px; z-index: 1;}
.company .map .info ul {display: flex; padding: 52px 0 50px 30px;}
.company .map .info ul li {display: flex; width: 50%; padding-left: 50px; text-align: left;}
.company .map .info ul li > * {display: inline-block;}
.company .map .info ul li h1 {font-size: 18px; line-height: 1.2em; color: #fff; margin-right: 30px; text-indent: 0; position: relative;}
.company .map .info ul li h1:before {content: '';width: 8px; height: 2px; background-color: #fff; position: absolute; left: -8px; top: -4px; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.company .map .info ul li p {font-size: 16px; color: #fff; text-indent: 0; line-height: 1.4em;}
.root_daum_roughmap {padding: 0 !important; border: 0 !important; border-radius: 0 !important;}


/* 진출분야 */
.advance {}
.advance .section {position: relative;}
.advance .section1 {width: 100%; height: 805px;  }
.advance .section1:after {content: ''; width: 100%; height: 80%; background: url(/images/advance/interior_bg1.jpg) center center; background-size: cover; position: absolute; left: 0; bottom: 0; z-index: -1; }
.advance .section1 .content {position: relative;}
.advance .section1 .mark {position: absolute; top: 0; right: 0; background-color: #5d69ea; width: 67px; height: 150px; opacity: 0.9; z-index: 1;  }
.advance .section1 .mark p {color: rgba(255, 255, 255, 0.6); font-weight: 300; font-size: 12px; letter-spacing: 3px; white-space: nowrap; position: absolute; left: -15px; top: 65px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg);}
.advance .section1 .imgBox {width: 1062px; overflow: hidden; position: relative; }
.advance .section1 .imgBox .floatTitle {position: absolute; z-index:1; right: 32px; bottom: 44px; }
.advance .exWrap {padding: 0 0 0 48px; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; margin-top: 100px;}
.advance .exWrap > div {float: left;}
.advance .exWrap .title {padding-right: 32px; font-size: 38px; text-align: right; color: #000; font-weight: bold; line-height: 1.1; position: relative; z-index: 1;}
.advance .exWrap .title:before {content: ''; display: block; width: 29px; height: 29px; background-color: #9199e2; border-radius: 100%; top: -11px; left: 20px; position: absolute; z-index: -1;}
.advance .exWrap .txt {font-size: 15px; font-weight: 300; border-left: 1px solid #9798a3; text-align: left; color: #000; line-height: 1.3; padding: 4px 0 4px 32px;}

.advance .section2 {overflow-x: hidden; margin-top: -150px;}
.advance .section2 .content {width: 100%; position: relative; left: 50%; background-color: #ededed; margin-left: -550px; height: 500px; padding: 35px; -webkit-box-sizing: border-box; box-sizing: border-box; height: 495px; z-index: 1; }
.advance .section2 .content:before {content: ''; display: block; position: absolute; top: 0; left: 0; background-color: #01e399; width: 466px; height: 100%; z-index: -1;}
.advance .section2 .content .contentBox {float: left; width: 590px; height: 100%; overflow: hidden;}
.advance .section2 .content .contentBox img {position: relative; left: -600px; opacity: 0;}
.advance .section2 .content .contentBox img.on {animation: advanceImgLeft 1s forwards ease-in-out;}
.advance .section2 .content .contentExWrap {padding-left: 140px; width: auto; background: url(/images/advance/interior_titleLine.png) left top 6px no-repeat; position: absolute; top: 88px; left: 576px; opacity: 0; }
.advance .section2 .content .contentExWrap.on {animation: advanceImgExTop 0.5s 1s forwards ease;}
.advance .section2 .content .contentExWrap h3 {font-size: 28px; color: #000; text-align: left; margin-bottom: 20px; white-space: nowrap;}
.advance .section2 .content .contentExWrap p {font-size: 18px; font-weight: 300; color: #222; text-align: left; margin-bottom: 5px; white-space: nowrap;}
.advance .section2 .floatImg1 {width: 319px; height: 389px; overflow: hidden; position: absolute; right: 0; top: -100px; z-index: 100;}


@keyframes advanceImgLeft {
	0% {
		left: -600px;
		opacity: 0;
	}
	100%{
		left: 0;
		opacity: 1;
	}
}
@keyframes advanceImgExTop {
	0% {
		top: 120px;
		opacity: 0;
	}
	100%{
		top: 88px;
		opacity: 1;
	}
}

.advance .section2 .curriculumWrap {position: relative;}
.advance .section2 .curriculum {position: relative;}
.advance .section2 .curriculumWrap:before {content: ''; display: block; width: 50%; height: 3px; background-color: #18202c; position: absolute; left: 0; top: 259px; }
.advance .section2 .curriculumWrap h3 {font-size: 28px; font-weight: bold; color: #222; position: relative; z-index: 1; line-height: normal; text-align: left; padding-left: 7px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.advance .section2 .curriculumWrap h3:before {content: ''; display: block; width: 23px; height: 23px; border-radius: 100%; background-color: #d3d6f2; position: absolute; top: -5px; left: -5px; z-index: -1; }
.advance .section2 .curriculumWrap .curriculumLine {position: relative; z-index: 1; background: url(/images/advance/advance_line1.png) no-repeat left -60px top 154px #fff;}
.advance .section2 .curriculumWrap .curriculum .box {float: left; width: 110px; height: 110px;-webkit-box-sizing: border-box; box-sizing: border-box; cursor: default; }
.advance .section2 .curriculumWrap .curriculum .box .boxTxt {-webkit-transition: all 0.4s; transition: all 0.4s;}
.advance .section2 .curriculumWrap .curriculum .box:hover .boxTxt {-webkit-transform: rotateY(360deg); transform: rotateY(360deg); animation: curriculumWrapOpa 0.4s forwards; }
.advance .section2 .curriculumWrap .curriculum .box .title {margin-bottom: 3px; text-align: center; font-weight: bold; font-size: 19px; color: #303cc3;}
.advance .section2 .curriculumWrap .curriculum .box .term {text-align: center; font-size: 17px; color: #666;}
.advance .section2 .curriculumWrap .topLine {padding-top: 58px;}
.advance .section2 .curriculumWrap .topLine .box {background: url(/images/advance/interior_curriculumLine2_1.png) center bottom no-repeat;}
.advance .section2 .curriculumWrap .bottomLine {-webkit-box-sizing: border-box;box-sizing: border-box; padding: 150px 0 0 399px;}
.advance .section2 .curriculumWrap .bottomLine .box {background: url(/images/advance/interior_curriculumLine2_2.png) center top no-repeat;}
.advance .section2 .curriculumWrap .bottomLine .boxTxt {padding-top: 70px;}
.advance .section2 .curriculumWrap .finish { width: 145px; height: 145px; border-radius: 100%; position: relative; top: -60px; left: 55px; float: left;}
.advance .section2 .curriculumWrap .circle {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 100%; background-color: #303cc3;}
.advance .section2 .curriculumWrap .finish p {position: absolute; width: 100%; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);  font-size:22px; color: #fff; font-weight: bold; text-align: center; line-height: 1.3;}

.advance .bg {position: absolute;}
.advance .curriculumWrap .bg1 {top: -1px; left: 10px;}
.advance .curriculumWrap .bg2 {bottom: 16px; right: 110px;}
.advance .curriculumWrap .bg3 {bottom: 0; right: 0;}
.advance .curriculumWrap .bg4 {bottom: 40px; left: 16px; z-index:10;}

@keyframes curriculumWrapOpa {
	0%{
		opacity: 1;
	}
	50%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

.advance .curriculumWrap .curriculumEx {float: right; margin-top: 12px;}
.advance .curriculumWrap .curriculumEx p {font-size: 14px; color: #666; text-align: right; line-height: normal; margin-bottom: 1px;}

/* 진출분야 - vmd */
.advance.vmd .exWrap .title:before {top: -9px; left: 4px;}
.advance.vmd .section1:after {background: url(/images/advance/vmd_bg1.jpg) center center;}

/* 진출분야 - 무대/전시 */
.advance.stage .section1:after {background: url(/images/advance/stage_bg1.jpg) center center;}

/* 진출분야 - 가구 */
.advance.furniture .exWrap {margin-top: 70px;}
.advance.furniture .section1:after {background: url(/images/advance/furniture_bg1.jpg) center center;}

/* 진출분야 - 가구 */
.advance.construct .exWrap .title:before {top: -9px; left: 17px;}
.advance.construct .section1:after {background: url(/images/advance/construct_bg1.jpg) center center;}

/* 수강목적 */
.course .section .contentWrap h3 {font-size: 28px; text-align: left; font-weight: bold; color: #222; position: relative; z-index: 1;}
.course .section .contentWrap h3:before {content: ''; display: block; position: absolute; top: -15px; left: -10px;width: 23px; height: 23px; border-radius: 100%; z-index: -1;  }

.course .section1 {position: relative; padding-bottom: 90px; z-index: 1;}
.course .section1:after {z-index: -1; content: ''; display: block; width: 100%; height: 35%; background-image: url(/images/course/college_bg1.png); position: absolute; bottom: 0; left: 0;}
.course .section1 .contentWrap {position: relative; z-index: 10;background-color: #fff; padding-bottom: 90px; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 28px;}

.course .section1 .contentWrap h3 { background: url(/images/course/college_lineTitle1.png) right center no-repeat;}
.course .section1 .contentWrap h3:before { background-color: rgba(1, 227, 153, 0.3); }
.course .section1 .contentWrap .txtWrap {margin: 27px 0 65px;}
.course .section1 .contentWrap .txtWrap p {font-size: 15px; color: #222; font-weight: 300;}
.course .section1 .contentWrap .process {-webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 110px; height: 186px; position: relative;z-index:1;}
.course .section1 .contentWrap .process:before {content: ''; display: block; width: 815px; height: 1px; background-color: #01e399; position: absolute; left: 110px; top:93px;z-index: -1;}
.course .section1 .contentWrap .process .box {width: 186px; height: 186px; border-radius: 100%; overflow: hidden; float: left; position: relative; z-index: 1;}
.course .section1 .contentWrap .process .box:not(:nth-child(3)) {margin-right: 128px;}
.course .section1 .contentWrap .process .box p {width: 100%; left: 0; text-align: center; font-size: 24px; font-weight: bold; color: #fff; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.course .section1 .contentWrap:hover .box1 img {animation: courseSection1 1.5s forwards ease-in;}
.course .section1 .contentWrap:hover .box2 img {animation: courseSection1 1.5s 1.5s forwards ease-in;}
.course .section1 .contentWrap:hover .box3 img {animation: courseSection1 1.5s 3s forwards ease-in;}
.course .section1 .contentWrap:hover .box4 img {animation: courseSection1 1.5s 4.5s forwards ease-in;}
.course .section1 .contentWrap:hover .box5 img {animation: courseSection1 1.5s 6s forwards ease-in;}

@keyframes courseSection1 {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	50% {
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}
	100%{
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}
.course .section1 .bg {position: absolute;}
.course .section1 .bg1 {top: 0; left: 50px;}
.course .section1 .bg2 {top: -5px; left: 340px;}
.course .section1 .bg3 {bottom: -40px; right: 360px;}
.course .section1 .bg4 {top: -20px; right: 80px;}
.course .section1 .bg5 {bottom: 16px; left: 440px; z-index: 10;}

.course .curriculumWrap {position: relative; padding-top: 20px;}
.course .curriculum {position: relative;}
.course .curriculumWrap:before {content: ''; display: block; width: 50%; height: 3px; background-color: #18202c; position: absolute; left: 0; top: 279px; }
.course .curriculumWrap h3 {font-size: 28px; font-weight: bold; color: #222; position: relative; z-index: 1; line-height: normal; text-align: left; padding-left: 7px; -webkit-box-sizing: border-box; box-sizing: border-box; background: url(/images/course/college_lineTitle2.png) right center no-repeat;}
.course .curriculumWrap h3:before {content: ''; display: block; width: 23px; height: 23px; border-radius: 100%; background-color: #d3d6f2; position: absolute; top: -5px; left: -5px; z-index: -1; }
.course .curriculumWrap .curriculumLine {position: relative; z-index: 1; background: url(/images/course/course_line1.png) no-repeat left -60px top 154px #fff;}
.course .curriculumWrap .curriculum .box {float: left; width: 110px; height: 110px;-webkit-box-sizing: border-box; box-sizing: border-box; cursor: default; }
.course .curriculumWrap .curriculum .box .boxTxt {-webkit-transition: all 0.4s; transition: all 0.4s;}
.course .curriculumWrap .curriculum .box:hover .boxTxt {-webkit-transform: rotateY(360deg); transform: rotateY(360deg); animation: curriculumWrapOpa 0.4s forwards; }
.course .curriculumWrap .curriculum .box .title {margin-bottom: 3px; text-align: center; font-weight: bold; font-size: 19px; color: #303cc3;}
.course .curriculumWrap .curriculum .box .term {text-align: center; font-size: 17px; color: #666;}
.course .curriculumWrap .topLine {padding-top: 58px;}
.course .curriculumWrap .topLine .box {background: url(/images/advance/interior_curriculumLine2_1.png) center bottom no-repeat;}
.course .curriculumWrap .bottomLine {-webkit-box-sizing: border-box;box-sizing: border-box; padding: 150px 0 0 399px;}
.course .curriculumWrap .bottomLine .box {background: url(/images/advance/interior_curriculumLine2_2.png) center top no-repeat;}
.course .curriculumWrap .bottomLine .boxTxt {padding-top: 70px;}
.course .curriculumWrap .finish { width: 145px; height: 145px; border-radius: 100%; position: relative; top: -60px; left: 55px; float: left;}
.course .curriculumWrap .circle {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 100%; background-color: #303cc3;}
.course .curriculumWrap .finish p {position: absolute; width: 100%; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);  font-size:22px; color: #fff; font-weight: bold; text-align: center; line-height: 1.3;}

.course .bg {position: absolute;}
.course .curriculumWrap .bg6 {bottom: 0; right: 10px;}
.course .curriculumWrap .bg7 {bottom: 16px; right: 110px;}
.course .curriculumWrap .bg8 {right: 0; top: -5px;}
.course .curriculumWrap .bg4 {bottom: 40px; left: 16px; z-index:10;}

@keyframes curriculumWrapOpa {
	0%{
		opacity: 1;
	}
	50%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

.course .curriculumWrap .curriculumEx {float: right; margin-top: 12px;}
.course .curriculumWrap .curriculumEx p {font-size: 14px; color: #666; text-align: right; line-height: normal; margin-bottom: 1px;}

.course .section .title .btn-more {-webkit-transition: all 0.3s; transition: all 0.3s; float: right; display: block; padding: 6px 12px 7px; border: 1px solid #222; font-size: 14px; color: #222; }
.course .section .title .btn-more img {position: relative; top: 4px;}
.course .section .title .btn-more:hover {box-shadow: 2px 2px 10px rgba(0,0,0,0.5);}
.course	.section3 {background-color: #414246; height: 335px; position: relative;}
.course	.section3:after {content: ''; display: block; height: 100%; width: 38%; position: absolute; top: 0; left: 0; background: url(/images/course/college_img_tip.jpg) center center no-repeat;  }
.course	.section3 > .width > div {float: left;}
.course .section3 .left .content {z-index: 10; position: relative; top: -40px; width: 245px; height: 325px; background-color: #01df99; padding: 38px 26px; -webkit-box-sizing: border-box; box-sizing: border-box; }
.course .section3 .left .content > div {border-left: 1px solid #003b28; padding: 3px 0 6px;-webkit-box-sizing: border-box; box-sizing: border-box;}
.course .section3 .left .content p {font-size: 24px; font-weight: bold; color: #003b28; line-height: 1.2; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 14px;  }
.course .section3 .left .content .txtImg {position: absolute; bottom: 40px; right: 25px; animation: section3Opa 1.3s cubic-bezier(.5, 0, 1, 1) infinite alternate; }

@keyframes section3Opa {
	to { opacity: 0; }
}

.course .section3 .right .rightLine {margin: 42px 0 0 117px;}
.course .section3 .right .rightLine .box {float: left; width: 246px; min-height: 104px; }

.course .section3 .right .rightLine .box .icon {background-position: center center; background-repeat: no-repeat; transition: all 0.3s;}
.course .section3 .right .rightLine .box .icon {width: 48px; height: 48px; border-radius: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0 auto;}
.course .section3 .right .rightLine .box p {font-size: 17px; color: #fff; text-align: center; margin-top: 12px;}
.course .section3 .right .rightLineTop .box:nth-child(2n) .icon {background-color: #01df99; }
.course .section3 .right .rightLineTop .box:nth-child(2n-1) .icon {border: 2px solid #00c686; }
.course .section3 .right .rightLineBottom .box:nth-child(2n) .icon { border: 2px solid #00c686;}
.course .section3 .right .rightLineBottom .box:nth-child(2n-1) .icon {background-color: #01df99; }

.course .section3 .right .rightLine .box1 .icon {background-image: url(/images/course/college_icon_tip1.png);}
.course .section3 .right .rightLine .box2 .icon {background-image: url(/images/course/college_icon_tip2.png);}
.course .section3 .right .rightLine .box3 .icon {background-image: url(/images/course/college_icon_tip3.png);}
.course .section3 .right .rightLine .box4 .icon {background-image: url(/images/course/college_icon_tip4.png);}
.course .section3 .right .rightLine .box5 .icon {background-image: url(/images/course/college_icon_tip5.png);}
.course .section3 .right .rightLine .box6 .icon {background-image: url(/images/course/college_icon_tip6.png);}
.course .section3 .right .rightLine .box:hover .icon {-webkit-transform: rotateY(180deg); transform: rotateY(180deg);}

.course .section4, .course .section5 {padding-top: 80px;}
.course .section4 .title {background: url(/images/course/college_lineTitle3.png) center right 115px no-repeat; margin-bottom: 52px; }
.course .section4 h3 { line-height: normal;display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 12px; font-size: 28px; color: #222; font-weight: bold; text-align: left; position: relative; z-index: 1;}
.course .section4 h3:after {content: ''; display: block; position: absolute; width: 23px; height: 23px; background-color: #d3d6f2; left: 0; top: -4px; z-index: -1; border-radius: 100%; }

.course .section4 .content .box {float: left; width: 350px; height: 310px; position: relative;}
.course .section4 .content .box:not(:last-child) {margin-right: 25px;}
.course .section4 .content .box .imgBox {width: 100%; height: 250px; overflow: hidden;}
.course .section4 .content .box .imgBox img {-webkit-transition: all 0.3s; transition: all 0.3s;}
.course .section4 .content .box:hover .imgBox img {-webkit-transform: scale(1.05); transform: scale(1.05);}
.course .section4 .content .box .txtBox {width: 90%; background-color: #fff; position: relative; top: -40px;}
.course .section4 .content .box .txtBox .subject {padding: 12px 15px; font-size: 16px; color: #fff; position: relative; left :10px; top: -23px; display: inline-block;  }
.course .section4 .content .box:nth-child(2n) .txtBox .subject {background-color: #6871d1;}
.course .section4 .content .box:nth-child(2n-1) .txtBox .subject {background-color: #00cb89;}
.course .section4 .content .box .txtBox .subTitle, .course .section4 .content .box .txtBox .ex  { padding-left: 24px; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; top: -10px;}
.course .section4 .content .box .txtBox .subTitle {margin-bottom: 3px;}
.course .section4 .content .box .txtBox .subTitle span:first-child {font-size: 18px; color: #222; font-weight: bold; padding-right: 10px; position: relative; }
.course .section4 .content .box .txtBox .subTitle span:first-child:after {content: ''; display: block; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 0; width: 1px; height: 15px; background-color: #444;   }
.course .section4 .content .box .txtBox .subTitle span:last-child {font-size: 18px; color: #222; padding-left: 6px;}
.course .section4 .content .box .txtBox .ex {color: #222; font-weight: 300; font-size: 15px; }

.course .section5 {padding-bottom: 50px;}
.course .section5 .title {background: url(/images/course/college_lineTitle4.png) center right 115px no-repeat; margin-bottom: 52px; }
.course .section5 h3 {line-height: normal; display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 12px; font-size: 28px; color: #222; font-weight: bold; text-align: left; position: relative; z-index: 1;}
.course .section5 h3:after {content: ''; display: block; position: absolute; width: 23px; height: 23px; background-color: #b2f7e0; left: 0; top: -4px; z-index: -1; border-radius: 100%; }
.course .section5 .box {width: 362px; height: 160px;-webkit-box-sizing: border-box; box-sizing: border-box; background-color: #f6f5f5; border: 1px solid #dedede; padding: 24px 30px; position: relative; float: left; }
.course .section5 .box:not(:last-child) {margin-right: 7px;}
.course .section5 .box .subTitle {padding-bottom: 13px; border-bottom: 1px solid #dedede;}
.course .section5 .box .subTitle span {font-size: 16px; display: block; color: #00ac74;}
.course .section5 .box .subTitle p {font-size: 18px; font-weight: bold; margin-top: 1px; color: #000;}
.course .section5 .box  .txtBox {font-size: 15px; color: #222; font-weight: 300; padding-top: 13px;width:100%; height:2.6em; line-height:1.3; overflow:hidden;  text-overflow:ellipsis; text-align:left; word-wrap:break-word; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; }
.course .section5 .btn-detailView {position: absolute; right: 9px; bottom: -35px; width: 60px; height: 60px; z-index: 1;  }
.course .section5 .btn-detailView:after {-webkit-transition: all 0.3s; transition: all 0.3s; content: ''; display: block; position: absolute; top: 0; left: 0; background-color: #7d7d7d; width: 100%; height: 100%; z-index: -1; }
.course .section5 .btn-detailView a {display: block; width: 100%; height: 100%; font-size: 16px; color: #fff; line-height: 1; font-weight: 300; padding-top: 13px; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box;  }
.course .section5 .btn-detailView:hover:after {-webkit-transform: rotate(45deg); transform: rotate(45deg);}

/* 수강목적 - 취업 */
.course.employment .section1 .contentWrap .process {padding-left: 22px;}
.course.employment .section1 .contentWrap .process .box {width: 175px; height: 175px;}
.course.employment .section1 .contentWrap .process .box:not(:nth-child(3)) {margin-right: 0}
.course.employment .section1 .contentWrap .process .box:not(:nth-child(5)) {margin-right: 30px;}

.course.employment .section1 .bg1 {top: 0; left: -40px;}
.course.employment .section1 .bg2 {top: -30px; left: 210px;}
.course.employment .section1 .bg3 {right: 230px;}
.course.employment .section1 .bg4 {right: 30px; top: -40px;}
.course.employment .section1 .bg5 {bottom: 31px;}

.course.employment .section3 .right .rightLine .box1 .icon {background-image: url(/images/course/college_icon_tip7.png);}
.course.employment .section3 .right .rightLine .box4 .icon {background-image: url(/images/course/college_icon_tip8.png);}
.course.employment .section3 .right .rightLine .box5 .icon {background-image: url(/images/course/college_icon_tip9.png);}
.course.employment .section3 .right .rightLine .box6 .icon {background-image: url(/images/course/college_icon_tip10.png);}

.course.employment .section6 {position: relative;z-index: 1; margin: 60px 0 20px 0;}
.course.employment .section6:before, .course.employment .section6:after {content: ''; display: block; width: 50%; height: 6px; background-color: #e0e0e0; position: absolute; z-index: -1; }
.course.employment .section6 h3 {padding-left: 12px;}
.course.employment .section6 h3:before {background-color: #d3d6f2; top: -14px; left: -1px;}
.course.employment .section6:before {right: 0; top: 54px;}
.course.employment .section6:after {left: 0; bottom: 0;}
.course.employment .section6 .content {padding-top: 32px; background-color: #fff;}
.course.employment .section6 .content .line {padding: 46px 0;}
.course.employment .section6 .content .line > div {float: left; width: 50%;}
.course.employment .section6 .content .line .subWrap {padding-top: 15px;}
.course.employment .section6 .content .topLine {border-top: 6px solid #e0e0e0; border-bottom: 6px solid #e0e0e0; border-left: 6px solid #e0e0e0;}
.course.employment .section6 .content .bottomLine {border-bottom: 6px solid #e0e0e0; border-right: 6px solid #e0e0e0; }
.course.employment .section6 .content .mainTxt {-webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 30px 0 60px;  }
.course.employment .section6 .content .mainTxt h5 {font-size: 28px; color: #222; font-weight: bold; text-align: left; padding-bottom: 18px; border-bottom: 1px solid #dedede;}
.course.employment .section6 .content .mainTxt .titleEx {font-size: 15px; color: #222; font-weight: 300; text-align: left; padding-top: 20px;}
.course.employment .section6 .content .line .subWrap.right img {padding: 20px 0 0 10px; display: block;}
.course.employment .section6 .tbl {padding-left: 16px;width: 94%; margin: 0 auto; border-collapse: separate; border-spacing: 0 15px;}
.course.employment .section6 .tbl th {white-space: nowrap; padding: 0 10px 0 0; font-size: 14px; color: #666; font-weight: bold; text-align: right;border-right: 1px solid #dedede; }
.course.employment .section6 .tbl td {padding: 0 0 0 14px; font-size: 14px; font-weight: 300; color: #666; }

/* 수강목적 - 자격증 */
.course.certificate .section1 .contentWrap {padding-bottom: 140px;}
.course.certificate .section1 .contentWrap h3 {background: url(/images/course/certificate_lineTitle1.png) right center no-repeat;}
.course.certificate .section1 .contentWrap .process {width: 950px; padding-left: 0; margin: 0 auto; height: auto;}
.course.certificate .section1 .contentWrap .process:before {display: none;}
.course.certificate .section1 .contentWrap .process .box {-webkit-box-sizing: border-box; box-sizing: border-box; width: 280px; height: 280px; border-radius: 100%; background-color: #fff; overflow: visible;}
.course.certificate .section1 .contentWrap .process .box:nth-child(2n) {border: 8px solid #73f5cb; }
.course.certificate .section1 .contentWrap .process .box:nth-child(2n-1) {border: 8px solid #01e399; }
.course.certificate .section1 .contentWrap .process .box:not(:nth-child(3)) {margin-right: 55px;}
.course.certificate .section1 .bg1 {left: -50px; top: 40px;}
.course.certificate .section1 .bg2 {right: 20px; top: -20px; left: inherit;}

.course.certificate .section1 .contentWrap .process .box .boxTxtWrap {-webkit-box-sizing: border-box; box-sizing: border-box; padding: 55px 16px 0;}
.course.certificate .section1 .contentWrap .process .box .boxTxtWrap .title {margin-bottom: 15px;font-size: 24px; font-weight: bold; position: static; top: 0; -webkit-transform: translateY(0); transform: translateY(0);}
.course.certificate .section1 .contentWrap .process .box .boxTxtWrap .ex {line-height: 1.3;font-size: 15px; color: #222; font-weight: 300; position: static; top: 0; -webkit-transform: translateY(0); transform: translateY(0); word-break: keep-all;}
.course.certificate .section1 .contentWrap .process .box:nth-child(2n) .boxTxtWrap .title {color: #2de8aa;}
.course.certificate .section1 .contentWrap .process .box:nth-child(2n-1) .boxTxtWrap .title {color: #00c686;}

.course.certificate .section1 .contentWrap .process .box .btn-more {position: absolute; bottom: -80px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);-webkit-transition: all 0.3s;transition: all 0.3s;float: right; display: block; padding: 6px 12px 7px; border: 1px solid #222; font-size: 14px; color: #222;}
.course.certificate .section1 .contentWrap .process .box .btn-more img {position: relative; top: 4px;}
.course.certificate .section1 .contentWrap .process .box .btn-more:hover {box-shadow: 2px 2px 10px rgba(0,0,0,0.5);}

.course.certificate .section2 .curriculumWrap:before {display: none;}
.course.certificate .curriculumWrap .curriculumLine {background: url(/images/course/course_line2.png) no-repeat center top 154px #fff;}
.course.certificate .curriculumWrap .curriculumLine {width: 612px; margin: 0 auto;}
.course.certificate .curriculumWrap .curriculum .box {margin-left: 10px;}
.course.certificate .curriculumWrap .finish {position: absolute; right: 0; top: 80px; left: inherit;}
.course.certificate .curriculumWrap .curriculumEx {margin-top: 102px;}

/* 수강목적 - 공모전 */
.course.competition .section1 .contentWrap h3 span {position: relative; z-index: 1;}
.course.competition .section1 .contentWrap h3 span:after {content: ''; display: inline-block; width: 100px; height: 100%; background-color: #fff; position: absolute; top: 0;  right: -20px; z-index: -1;}
.course.competition .curriculumWrap .curriculumLine {background: url(/images/course/course_line3.png) no-repeat left -50px top 154px #fff;}

/* 코딩교육이란 */
.summary{text-align:left;}
.summary .top{background:url('/img/sub/summary_bg.jpg') center center / cover no-repeat; width:100%; height:312px;}
.summary .top h1{font-size:36px; color:#fff; height:55px; padding:140px 0 0 50px;}
.summary .top p{font-size:18px; color:#a5a5a5; line-height:28px; padding-left:50px;}
.summary .top p strong{color:#fff; font-weight:normal;}
.summary .con{}
.summary .con:before{content:""; display:block; width:1100px; height:230px; background-color:#f2f2fa; position:absolute; z-index:-1; margin-top:320px;}
.summary .con .txt{padding:50px; line-height:22px;}
.summary .con .txt strong{color:#5960d4; font-weight:normal;}
.summary .con .txt h2{font-size:16px; color:#333; font-weight:normal;}
.summary .con .txt .img{margin-top:50px;}
.summary .con .txt .img:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.summary .con .txt .img .left{float:left; width:42%;}
.summary .con .txt .img .right{float:right; width:58%; margin-top:45px;}

/* 코딩교육의 필요성 */
.necessity{text-align:left; border-top:1px solid #d0d4dd; line-height:22px;}
.necessity .con{border:1px solid #d0d4dd; margin-top:50px; height:618px; background:url('/img/sub/necessity_conbg.png') left top no-repeat; background-color:#f7f8fa; }
/*.necessity .con:before{content:""; display:block; width:1100px; height:290px; background-color:#f7f8fa; position:absolute; z-index:-1; margin-top:328px;}*/
.necessity .con h1{font-size:24px; color:#333; margin:50px; font-weight:normal;}
.necessity .star{padding-top:20px;}
.necessity .star:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.necessity .star li{font-size:16px; float:left; width:550px; height:210px; margin-bottom:50px;}
.necessity .star li p{display:table-cell; height:210px; vertical-align:middle; font-style:italic; line-height:24px;}
.necessity .star li p span{display:block; font-size:14px; color:#999; font-style:normal; font-weight:normal; margin-top:10px;}
.necessity .star li p span strong{color:#333; margin-right:10px;}
.necessity .star li.star1{background:url('/img/sub/necessity_star1.jpg') left top no-repeat;}
.necessity .star li.star1 p{padding-left:60px;}
.necessity .star li.star2{background:url('/img/sub/necessity_star2.jpg') right top no-repeat;}
.necessity .star li.star2 p{padding-left:100px;}
.necessity .star li.star3{background:url('/img/sub/necessity_star3.jpg') left top no-repeat;}
.necessity .star li.star3 p{padding-left:60px;}
.necessity .star li.star4{background:url('/img/sub/necessity_star4.jpg') right top no-repeat;}
.necessity .star li.star4 p{padding-left:100px;}

/* 해외 코딩 교육 현황 */
.overseas{text-align:left; border-top:1px solid #d0d4dd;}
.overseas ul{margin-top:50px; margin-left:-36px;}
.overseas ul li{border:1px solid #d0d4dd; width:530px; height:190px; font-size:13px; float:left; margin-left:36px; margin-bottom:40px;}
.overseas ul li:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.overseas ul li .left{float:left; width:16%; margin-top:30px; text-align:right;}
.overseas ul li .right{float:right; width:80%; margin-top:45px; line-height:21px;}
.overseas ul li .right h1{font-size:18px; color:#333; height:30px;}
.overseas ul li .right h1 strong{font-size:14px; color:#858df3; font-weight:normal; margin-left:10px;}

/* 국내 코딩 교육 현황 */
.domestic{text-align:left; border-top:1px solid #d0d4dd;}
.domestic ul{margin-top:50px;}
.domestic ul:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.domestic ul li{float:left; width:340px; margin-left:37px;}
.domestic ul li:before{content:""; display:block; width:340px; height:235px; background-color:#f7f8fa; position:absolute; z-index:-1; margin-top:165px;}
.domestic ul li:first-child{margin-left:0;}
.domestic ul li h1{height:50px; background-color:#aaaeba; color:#fff; text-align:center; font-size:18px; line-height:45px;}
.domestic ul li .listcon{padding:30px; border:1px solid #d0d4dd; border-top:0; font-size:13px; color:#999; line-height:21px; height:290px;}
.domestic ul li .listcon h2{font-weight:normal; color:#333; text-align:center; font-size:14px; height:30px;}
.domestic ul li .listcon img{display:block; margin:0 auto; padding:10px 0 15px;}
.domestic ul li .listcon strong{color:#5960d4; font-weight:normal;}

/* 코딩과정 커리큘럼 */
.codingcurriculum:before{content:""; display:block; background:url('/img/sub/codingcurriculum_bg.png') left top no-repeat; width:1305px; height:305px; position:absolute; z-index:-1; margin-top:330px;}
.codingcurriculum{text-align:left; border-top:1px solid #d0d4dd; height:600px;}
.codingcurriculum .step-curri{padding-top: 40px}
.codingcurriculum .step-curri li{float: left; margin-right: 44px; width: 22%; box-sizing: border-box; letter-spacing:0;}
.codingcurriculum .step-curri li:last-child{margin-right:0px}
.codingcurriculum .step-curri:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.codingcurriculum .curri_list{}
.codingcurriculum .curri_list > li{display: block; width: 100%; margin-top: 13px;}
.codingcurriculum .curri_list > li a{padding: 13px 0px; background-color: #eaeaea; text-align: left; color: #333; font-size: 16px; text-indent: 21px; display:block; position: relative;}
.codingcurriculum .curri_list > li a:hover{background-color: #858df3; color: #fff;}
.codingcurriculum .curri_list > li a:hover:after{background: url(/images/btn_line_02.png) no-repeat 0 0; width: 44px; height: 7px; position: absolute; content: ""; top: 18px; right: 15px;}
.codingcurriculum .training_list{clear:both; border:1px solid #d0d4dd; padding:20px 20px 0; height:155px; position:relative; top:15px;}
.codingcurriculum .training_list li{clear:both; width:100%; font-size:13px; letter-spacing:-1px;}
.codingcurriculum .training_list li:hover{color:#858df3;}
.codingcurriculum .training_list li h1{font-size:18px; color:#333; height:35px;}

/* 진학프로젝트 */
.project{}
.project .tab{margin-left:1px;}
.project .tab:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.project .tab li{color:#cdcdcd; font-size:14px; float:left; border-left:1px solid #d0d4dd; border-right:1px solid #d0d4dd; box-sizing:border-box; margin-left:-1px; height:100px;}
.project .tab li a{display:block; height:74px; padding-top:24px; line-height:21px; border-top:1px solid #d0d4dd; border-bottom:1px solid #d0d4dd;}
.project .tab li a.on{color:#5960d4; border-top:2px solid #858df3; border-bottom:none;}
.project .tab li a.on p{color:#333;}
.project .tab li a.arrow:before{content:"▶"; position:absolute; display:block; margin:12px 0 0 -3px; color:#d0d4dd;}
.project .tab li p{color:#999; font-size:19px;}
.project .cnt{border:1px solid #d0d4dd; border-top:0; overflow:hidden;}
.project .cnt li{font-size:14px; color:#666; line-height:22px; text-align:left;}
.project .cnt li h1{font-size:24px; color:#333; height:50px; font-weight:normal; padding:50px 50px 0;}
.project .cnt li h1 span{font-size:14px; color:#fff; background-color:#858df3; display:inline-block; width:26px; height:26px; border-radius:50%; margin-right:10px; text-align:center; vertical-align:text-bottom; line-height:24px;}
.project .cnt li p{padding:0 50px;}
.project .cnt .process{background-color:#f7f8fa; margin-top:90px; height:300px;}
.project .cnt .process ul{position:relative; top:-40px; text-align:center;}
.project .cnt .process ul:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.project .cnt .process ul li{border:1px solid #d0d4dd; width:200px; height:200px; border-radius:50%; text-align:center; font-size:14px; color:#999; display:inline-block; background-color:#fff; vertical-align:top; }
.project .cnt .process ul li.arrow{border:0; width:90px; height:6px; vertical-align:top; position:relative; top:90px; margin:0 10px; background-color:#f7f8fa;}
.project .cnt .process ul li .project_process_img{position:relative; bottom:50px;}
.project .cnt .process ul li p{display:table-cell; vertical-align:middle; width:200px; height:200px; padding:0;}
.project .cnt .process ul li strong{font-size:16px; color:#333; display:block; margin-bottom:5px; font-weight:normal;}
.project .cnt .process ul li.on{border-color:#5960d4;}
.project .cnt .process ul li.on strong{color:#5960d4; font-size:17px; font-weight:bold; position:relative;}
.project .cnt .process ul li.on strong:before{content:"/"; display:block; font-size:13px; position:absolute; left:100px; bottom:30px;}
.project .cnt .process ul li.on2{border-color:#5960d4;}
.project .cnt .process ul li.on2 strong{color:#5960d4; font-size:17px; font-weight:bold; position:relative;}
.project .cnt .process ul li.on2 strong:before{content:"/"; display:block; font-size:13px; position:absolute; left:100px; bottom:50px;}

.swiper-container-process1 .swiper-slide{background:#fff;}
.swiper-container-process2 .swiper-slide{background:#fff;}
.swiper-container-process3 .swiper-slide{background:#fff;}
.swiper-container-process4 .swiper-slide{background:#fff;}

/* 진학프로젝트 - 전략수립, 포트폴리오, 자기소개서, 면접 */
.projectprocess{text-align:left; line-height:22px;} 
.projectprocess .top{position:relative; padding-bottom:30px;}
.projectprocess .top:before{display:block; content:""; width:1100px; height:75px; background-color:#737482; position:absolute; z-index:-1;}
.projectprocess .top img{vertical-align:top; border-left:20px solid #5a61d5;}
.projectprocess .top .ttl{width:550px; background-color:#fff; position:absolute; top:30px; right:30px; padding:60px 50px 0; height:210px;}
.projectprocess .top .ttl h1{font-size:50px; color:#333; height:65px;}
.projectprocess .top .ttl h1:before{display:block; content:""; width:125px; height:1px; background-color:#5a61d5; position:absolute; left:-28px; top:100px;}
.projectprocess .top .ttl h1 strong{color:#5a61d5;}
.projectprocess .top .ttl h3{font-size:28px; color:#666; font-weight:normal; line-height:32px;}
.projectprocess .top .ttl h3 strong{color:#5a61d5; display:block;}
.projectprocess .top .ttl p{font-size:18px; color:#a5a5a5; line-height:24px; margin-top:25px;}
.projectprocess .btm{text-align:center; font-size:22px; line-height:34px; color:#333; margin-top:80px;}
.projectprocess .btm strong{color:#5960d4; font-weight:normal;}
.projectprocess .table3 em{letter-spacing:0;}
.projectprocess .numberlist{padding-top:20px;}
.projectprocess .numberlist:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.projectprocess .numberlist li{float:left; width:50%; height:160px;}
.projectprocess .numberlist li span{float:left;}
.projectprocess .numberlist li span.number{font-size:120px; color:#e2e5ec; width:18%; font-weight:bold; line-height:80px;}
.projectprocess .numberlist li span h1{font-size:18px; color:#5960d4; font-weight:normal;}
.projectprocess .numberlist li span p{font-size:13px; color:#666; line-height:21px; margin-top:10px;}
.projectprocess .numberlist li span p strong{font-weight:normal; color:#111;}
.projectprocess .process{margin:50px 0 60px; background-color:#fff;}
.projectprocess .process ul{text-align:center;}
.projectprocess .process ul:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.projectprocess .process ul li{background-color:#aaaeba; width:200px; height:200px; border-radius:50%; text-align:center; font-size:12px; color:#fff; display:inline-block; vertical-align:top;}
.projectprocess .process ul li.arrow{border:0; width:90px; height:6px; vertical-align:top; position:relative; top:90px; margin:0 10px; background-color:#fff;}
.projectprocess .process ul li .project_process_img{position:relative; bottom:50px;}
.projectprocess .process ul li p{width:200px; height:200px;}
.projectprocess .process ul li p img{margin:27px 0 13px;}
.projectprocess .process ul li strong{font-size:18px; display:block; margin-bottom:5px; font-weight:normal;}
.projectprocess .process ul li.on{background-color:#5960d4;}
.projectprocess .process ul li.on strong{color:#fff; position:relative;}
.projectprocess .process ul li.on p{color:#cbcce2;}

/* 코딩과정&교보재 리스트 */
.course_list{text-align:left;}

/* 교육과정 메인 */

.curriculumPre {position: relative; z-index: 1; margin-bottom: 60px; padding-bottom: 20px; background-color: #eaeaea;}
.curriculumPre:after {position: absolute; top: 0; left: 0; width: 100%; height: 200px; background: #fff; z-index: -1; content: ''; display: block; visibility: visible;}
.course_list > .width {-webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 22px;}
.curriculumPre .processContent {width: 230px; height: 300px;position: absolute;left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); transition: all 0.3s;}
.curriculumPre .processContent .processContentMain {position: relative; z-index: 3; padding: 35px 10px; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%;}
.curriculumPre .processContentMain h3 {display: inline-block; text-align: center; font-size: 20px; color: #fff; padding-bottom: 5px; border-bottom: 2px solid #fff; position: relative; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); font-weight: normal;}

.curriculumPre .processBox {position: relative; height: 330px; width: 230px; float: left; margin-bottom: 60px;}
.curriculumPre .processBox:not(:nth-child(4n)) {margin-right: 45.333px;}
.curriculumPre .processBox > .bg {display: none; position: absolute; bottom: -50px; left: -47px;}
.curriculumPre .processContent:after {content: '';background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);width: 100%;height: 40%;position: absolute;top: 0;left: 0;z-index: 2;}

/* hover시 */
.curriculumPre .processBox.on {position: relative;}
.curriculumPre .processBox.on > .bg {display: block;}
.curriculumPre .processBox.on .processContent {/*animation: height330 0.2s ease-out forwards; transform-origin: 50%;*/ height: 330px;}
.curriculumPre .processBox.on .processConten {animation: height330 0.3s ease-out forwards; transform-origin: 50%; }
.curriculumPre .processBox.on .processContent .processContentHov{animation: height330 0.3s ease-out forwards; transform-origin: 50%; }

@keyframes height330 {
	0% {
		height: 300px;
	}
	100% {
		height: 330px;
	}
}

.curriculumPre .processContentHov {z-index: 3; width: 100%; height: 100%; background-color: rgba(50, 63, 203, 0.7); position: relative; overflow: hidden; display: none; position: absolute; top: 0; left: 0; }
.curriculumPre .processContentHov .title {position: relative; z-index: 10;padding-top: 20px; font-weight: normal;}
.curriculumPre .processContentHov .title span {display: inline-block; text-align: center; font-size: 20px; color: #fff; padding-bottom: 5px; border-bottom: 2px solid #fff; padding-top: 22px; position: relative; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.curriculumPre .processContentHov .ex {font-size: 15px; color: #dcdef1; word-break: keep-all; line-height:1.2; margin-top: 23px; padding: 0 40px; box-sizing: border-box; -webkit-box-sizing: border-box; text-align: center; position: relative; z-index: 10;}
.curriculumPre .processContentHov .more {width:300px; height: 50px; bottom: -110px; left: 0; -webkit-transform: rotate(-15deg); transform: rotate(-15deg); background-color: #01e399; position: absolute; padding-top: 34px;}
.curriculumPre .processContentHov .more > div {position: relative; -webkit-transform: rotate(15deg); transform: rotate(15deg); left: -70px; bottom: 50px;}
.curriculumPre .processContentHov .more img {float: right; padding-right: 20px;}
.curriculumPre .processContentHov .more p {font-size: 14px; color: #012a1d;text-align: right; position: relative; top: -10px; padding-right: 20px;}


.curriculumPre .processBox.on .processContentHov .more {animation: processBoxAni 0.3s forwards 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);}
@keyframes processBoxAni {
	0% {
		bottom: -100px;
	}
	100%{
		bottom: -35px;
	}
}

/* 교육과정 상세 */
.courseDetail .padLeft {-webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 15px;}
.courseDetail .tbl {width: 98%;}
.courseDetail .bg {position: absolute; z-index: -1;}
.courseDetail .bg1 {top: 135px;left: 0;z-index: 1;}
.courseDetail .bg2 {top: 79px;right: 50px;}
.courseDetail .bg3 {top: 229px;right: 60px;}

.courseDetail .section3 .tbl {border: 1px solid #808080;border-collapse:inherit;}
.courseDetail .section3 .tbl th, td {padding: 12px 26px;font-size: 16px;}
.courseDetail .section3 .tbl th, td:not(.ex) {color: #222; vertical-align: middle;}
.courseDetail .section3 .tbl th {background-color: #f7f7fb;}
.courseDetail .section3 .tbl td.ex {color: #666; text-align: left; line-height: 1.5;}
.courseDetail .section3 .tbl .bordRightDot {border-right: 1px dashed #b6b6b6;}
.courseDetail .section3 .tbl .bordBtom {border-bottom: 1px solid #e6e6e6;}
.courseDetail .section3 .tbl .bordRight {border-right: 1px solid #808080;}

.courseDetail .section2 { padding-top: 70px; position: relative; opacity: 0; top: 80px; animation: courseDetailSec2 1.2s forwards;}
.courseDetail .section2 .content > div {float: left;}
.courseDetail .section2 .content .left {padding: 0 15px 15px 0; position: relative; z-index: 1;}
.courseDetail .section2 .content .left:after {content: ''; display: block; background-color: #f7f7fb; position: absolute; z-index: -1; right: 0; bottom: 0; animation: courseDetailSec2Pad 0.5s 0.7s forwards ease-in;}
.courseDetail .section2 .content .right {padding: 25px 0 0 130px; margin-left: -48px; background: url(/images/curriculum/curriculum_exLine.png) left top 28px no-repeat; position: relative; z-index: 1; width: 600px;}
.courseDetail .section2 .content .right h3 {font-size: 28px; font-weight: bold; color: #222; margin-bottom: 24px; text-align: left;}
.courseDetail .section2 .content .right p {font-size: 15px; font-weight: 300; color: #222; line-height: 1.5; text-align: left; word-break:keep-all;}
@keyframes courseDetailSec2 {
	0%{
		opacity: 0;
		top: 80px;
	}
	100%{
		opacity: 1;
		top: 0;
	}
}
@keyframes courseDetailSec2Pad {
	0%{
		width: 0;
		height: 0;
	}
	100%{
		width: 130px;
		height: 130px;
	}
}
.courseDetail .section3 .content {padding-top: 66px;}
.courseDetail .section3 .content .mainContent {width: 950px; float: right; font-size: 0; padding-top: 30px;}
.courseDetail .section3 .content h3 {line-height: normal; background : right center no-repeat;font-size: 28px; font-weight: bold; color: #222; text-align: left; text-indent: 8px; position: relative; z-index: 1;}
.courseDetail .section3 .content h3:after {content: ''; display: block; width: 23px; height: 23px; position: absolute; z-index: -1; border-radius: 100%; left: 0; top: -2px; }
.courseDetail .section3 .content:nth-child(2n) h3:after { background-color: #b2f7e0;}
.courseDetail .section3 .content:nth-child(2n-1) h3:after { background-color: #d5deff;}
.courseDetail .section3 .content .mainContent .courseDetailEx {width: 98%; margin-top: 20px;}
.courseDetail .section3 .content .mainContent .courseDetailEx p {text-align: right; font-size: 15px; font-weight: 300; color: #666; line-height: normal; margin-bottom: 1px;}

.courseDetail .section3 .content1 h3 {background-image : url(/images/curriculum/curriculum_titleLine1.png);}
.courseDetail .section3 .content2 h3 {background-image : url(/images/curriculum/curriculum_titleLine2.png);}
.courseDetail .section3 .content3 h3 {background-image : url(/images/curriculum/curriculum_titleLine3.png);}
.courseDetail .section3 .content4 .title {background: url(/images/curriculum/curriculum_titleLine4.png) center right 115px no-repeat;margin-bottom: 52px;}
.courseDetail .section3 .content5 h3 {background-image : url(/images/curriculum/curriculum_titleLine5.png);}

.courseDetail .section3 .content1 .mainContent .box {float: left; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 12px; font-size: 0; position: relative;}
.courseDetail .section3 .content1 .mainContent .box:not(:last-child):after {content: ''; display: block; height: 45px; border: 1px dotted #abadb2; position: absolute; right: -52px; top: 70px;}
.courseDetail .section3 .content1 .mainContent .box:first-child {margin-right: 50px;}
.courseDetail .section3 .content1 .mainContent .box:last-child {margin-left: 50px;}
.courseDetail .section3 .content1 .mainContent .box > div {float: left;}
.courseDetail .section3 .content1 .mainContent .box .imgBox {margin-right: 20px;}
.courseDetail .section3 .content1 .mainContent .box .txtBox {font-size: 15px; font-weight: 300; color: #222; line-height: 1.5; text-align: left; padding-top: 70px;}

.courseDetail .section3 .content3 {padding-bottom: 40px;}
.courseDetail .section3 .content3 .tbl th {font-weight: bold;}
.courseDetail .section3 .content3 .tbl td {text-align: left;}


.courseDetail .section3 .content4 {padding-bottom: 40px;}
.courseDetail .section3 .content4 .title h3 {float: left;-webkit-box-sizing: border-box;box-sizing: border-box;font-size: 28px;color: #222;font-weight: bold;text-align: left;position: relative;z-index: 1;}
.courseDetail .section3 .content4 .title .btn-more {-webkit-transition: all 0.3s;transition: all 0.3s;float: right;display: block;padding: 6px 12px 7px;border: 1px solid #222;font-size: 14px;color: #222;}
.courseDetail .section3 .content4 .title .btn-more:hover {box-shadow: 2px 2px 10px rgba(0,0,0,0.5);}
.courseDetail .section3 .content4 .title .btn-more img {position: relative;top: 4px;}
.courseDetail .section3 .content4 .mainContent {width: 100%; float: none;}
.courseDetail .section3 .content4 .mainContent .box {float: left;width: 350px;height: 310px;position: relative;}
.courseDetail .section3 .content4 .mainContent .box:not(:last-child) {margin-right: 25px;}
.courseDetail .section3 .content4 .mainContent .box:hover .imgBox img{-webkit-transform: scale(1.05); transform: scale(1.05);}
.courseDetail .section3 .content4 .mainContent .box .imgBox {width: 100%;height: 250px;overflow: hidden;}
.courseDetail .section3 .content4 .mainContent .box .imgBox img {-webkit-transition: all 0.3s;transition: all 0.3s;}
.courseDetail .section3 .content4 .mainContent .box .txtBox {width: 90%;background-color: #fff;position: relative;top: -40px; text-align: left;}
.courseDetail .section3 .content4 .mainContent .box .txtBox .subject {padding: 12px 15px; font-size: 16px; color: #fff; position: relative; left: 10px; top: -23px; display: inline-block;}
.courseDetail .section3 .content4 .mainContent .box:nth-child(2n) .txtBox .subject {background-color: #6871d1;}
.courseDetail .section3 .content4 .mainContent .box:nth-child(2n-1) .txtBox .subject {background-color: #00cb89;}
.courseDetail .section3 .content4 .mainContent .box .txtBox .subTitle, .courseDetail .section3 .content4 .mainContent .box .txtBox .ex {padding-left: 24px;-webkit-box-sizing: border-box; box-sizing: border-box;position: relative;top: -10px;}
.courseDetail .section3 .content4 .mainContent .box .txtBox .subTitle {margin-bottom: 3px;}
.courseDetail .section3 .content4 .mainContent .box .txtBox .subTitle span:first-child {font-size: 18px;color: #222;font-weight: bold;padding-right: 10px;position: relative;}
.courseDetail .section3 .content4 .mainContent .box .txtBox .subTitle span:first-child:after {content: '';display: block;position: absolute;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);right: 0;width: 1px;height: 15px;background-color: #444;}
.courseDetail .section3 .content4 .mainContent .box .txtBox .subTitle span:last-child {font-size: 18px;color: #222;padding-left: 6px;}
.courseDetail .section3 .content4 .mainContent .box .txtBox .ex {color: #222;font-weight: 300;font-size: 15px;}


.courseDetail .section3 .content5 .contentProcess {-webkit-box-sizing: border-box; box-sizing: border-box; padding: 60px 0 0 60px; position: relative; z-index: 1;}
.courseDetail .section3 .content5 .contentProcess .box {width: 184px;height: 184px; border-radius: 100%; float: left;-webkit-box-sizing: border-box;box-sizing: border-box;position: relative;}
.courseDetail .section3 .content5 .contentProcess .box:not(:nth-child(4)) {border: 1px solid #d8d8d8;background-color: #fff;margin-right: 72px;position: relative;}
.courseDetail .section3 .content5 .contentProcess .box:not(:nth-child(4)):after {content: '';display: block;position: absolute;top: 85px;left: 168px;width: 80px;height: 15px;background-image: url(/images/company/companypage_icon_rightArw.png);}
.courseDetail .section3 .content5 .contentProcess .box:nth-child(4) {background-color: #303cc2;}
.courseDetail .section3 .content5 .contentProcess .box:nth-child(4) p {color: #fff;}
.courseDetail .section3 .content5 .contentProcess .box p {line-height: 1.3;width: 100%;text-align: center;position: relative;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);font-weight: bold;font-size: 20px;}
.courseDetail .section3 .content5 .contentProcess .box:not(:nth-child(4)) p{color: #222;}
.courseDetail .section3 .content5 .contentProcess .box .line {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.courseDetail .section3 .content5 .contentProcess .box:first-child .line {background-image: url(/images/curriculum/curriculum_bg_boxLine1.png);}
.courseDetail .section3 .content5 .contentProcess .box:nth-child(2) .line {background-image: url(/images/curriculum/curriculum_bg_boxLine2.png);}
.courseDetail .section3 .content5 .contentProcess .box:nth-child(3) .line {background-image: url(/images/curriculum/curriculum_bg_boxLine3.png);}

.courseDetail .section4 {margin-top: 98px; position: relative; z-index: 1; padding-top: 30px; margin-bottom: 80px;}
.courseDetail .section4:after {content: ''; display: block; width: 100%; height: 72%; background-color: #e3f1ec; position: absolute; top: 0; left: 0; z-index: -1;}
.courseDetail .section4 .title {font-size: 28px; color: #222; float: left; text-align: left; line-height: 1.1; letter-spacing: -1px; padding-top: 20px;}
.courseDetail .section4 .title span {font-size: 42px; font-weight: bold; color: #00c686; position: relative; display: inline-block; top: -10px; }
.courseDetail .section4 .title span:before {content: ''; display: block; width: 100%; height: 2px; background-color: #00c686; position: absolute; left: 0; bottom: -6px; }
.courseDetail .section4 .slideBoxWrap {float: right; width: 780px; height: 231px; background-color: #fff; position: relative; }
.courseDetail .section4 .slideBox {width: 100%; height: 100%; }
.courseDetail .section4 .slideBox .box {width: 100%; height: 100%;}
.courseDetail .section4 .slideBox .box > div {float: left;}
.courseDetail .section4 .slideBox .imgBox {width: 334px; height: 100%; overflow: hidden;}
.courseDetail .section4 .slideBox .txtBox {float: left;-webkit-box-sizing: border-box; box-sizing: border-box; padding: 50px 10px 10px 56px; }
.courseDetail .section4 .slideBox .txtBox h5 {font-size: 22px; color: #222; font-weight: bold; text-align: left; margin-bottom: 24px;}
.courseDetail .section4 .slideBox .txtBox p {font-size: 15px; color: #666; font-weight: 300; text-align: left;}
.courseDetail .section4 .slideBox .txtBox span {font-size: 13px; color: #666; font-weight: 300; text-align: left; display: block; margin-top: 15px;}
.courseDetail .section4 .slideBoxWrap .btn {cursor: pointer;position: absolute; z-index: 10; bottom: 0; width: 45px; height: 45px; }
.courseDetail .section4 .slideBoxWrap .btn-prev {left: -45px; background-image: url(/images/curriculum/curriculum_slide_prev.jpg);}
.courseDetail .section4 .slideBoxWrap .btn-next {left: 0; background-image: url(/images/curriculum/curriculum_slide_next.jpg);}

/** 커리큘럼  **/
.portfolio_curri_list {padding:25px 0;}
.portfolio_curri_list li{position: relative; color:#333; font-size: 16px; text-align:left; padding-left:16px; line-height:1.5;}
.portfolio_curri_list li + li{margin-top:15px;}
.portfolio_curri_list li::before{position: absolute; top:10px; left:0; content:''; width:5px; height:5px; background:#00cb89; border-radius:50%;}
.portfolio_speech_bubble{background:url('/images/curriculum/speech_bubble.png') no-repeat center center; width:931px; height:149px; padding-top: 60px; text-align:center; font-size:19px; font-weight: 600; box-sizing:border-box; color:#333; line-height:1.3;}

.portfolio_num_months_wrap{position: relative; margin-top:50px; margin-bottom: 100px;}
.portfolio_num_months{position: relative; width:100%; height:208px; box-sizing:border-box; background: #00cb89; text-align:center; padding-top: 40px;}
.portfolio_num_months h2{color:#fff; font-size:22px; font-weight: 600; }
.portfolio_num_months p{color:#125640; font-size: 14px; margin-top: 15px;}

.portfolio_num_months_list{display: table; border-spacing: 10px;width:90%; position: absolute; bottom:-80px; left:50%; transform:translateX(-50%); }
.portfolio_num_months_list li{display: table-cell; vertical-align:middle; width:285px; margin-right: 10px; height:170px; border:1px solid #00cb89; background: #fff; text-align:center;}
.portfolio_num_months_list li p{font-size:17px; color:#333; margin-bottom: 30px;}
.portfolio_num_months_list li h4{font-size: 15px; color:#333;}
.portfolio_num_months_list li h4 span{font-size:35px; font-weight: 600;}
.portfolio_num_months_list li > span{font-size:14px; color:#999; margin-top: 10px; }

/* 코딩과정 상세페이지 */
.course{text-align:left; font-size:14px; color:#666; line-height:22px;}
.course .top{height:300px;}
.course .top:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.course .top h1{font-size:36px; color:#fff; position:relative; top:80px; left:50px;}
.course .top h1 span{font-size:14px; color:#fff; background-color:#5960d4; font-weight:normal; display:inline-block; width:94px; height:27px; line-height:25px; text-align:center; vertical-align:top; margin-left:20px;}
.course .top p{float:left; font-size:18px; color:#a5a5a5; line-height:28px; width:28%; position:relative; top:105px; left:50px;}
.course .top ul{float:right; background-color:#fff; width:52%; height:114px; position:relative; top:120px; padding:40px 40px 0;}
.course .top ul li{font-size:14px; color:#666; line-height:22px; margin-top:10px;}
.course .top ul li:first-child{margin-top:0;}
.course .top ul li:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.course .top ul li strong{float:left; width:15%; font-size:16px; color:#333;}
.course .top ul li span{float:left; width:85%;}
.course .top ul li span em{color:#999; margin:0 10px; vertical-align:middle;}
.course .goal{margin-top:50px;}
.course .goal:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.course .goal h1{float:left; width:165px; height:165px; font-size:16px; color:#fff; background:url('/img/sub/course_goal_icon.png') center 45px no-repeat; background-color:#858df3; text-align:center; line-height:220px; position:absolute; z-index:1;}
.course .goal ul{float:right; background-color:#f7f8fa; width:830px; padding:50px 70px 50px 180px; margin-top:20px;}
.course .goal ul li{background:url('/img/sub/course_goal_blt.png') left 7px no-repeat; padding-left:30px; margin-bottom:15px;}
.course .course_list{border-top:0; padding-top:0;}
.course .step{}
.course .step:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.course .step li{width:200px; height:140px; font-size:16px; color:#333; text-align:center; float:left; padding-top:60px; margin-left:100px;}
.course .step li:first-child{margin-left:0;}
.course .step li:after{content:""; display:block; background:url('/img/sub/course_step_arrow.png') center center no-repeat; width:60px; height:6px; position:relative; top:-35px; left:220px;}
.course .step li:last-child:after{display:none;}
.course .step li.step1{background:url('/img/sub/course_step01.png') left top no-repeat;}
.course .step li.step2{background:url('/img/sub/course_step02.png') left top no-repeat;}
.course .step li.step3{background:url('/img/sub/course_step03.png') left top no-repeat;}
.course .step li.step4{background:url('/img/sub/course_step04.png') left top no-repeat;}
.course .step li strong{display:block; font-weight:normal; font-size:14px; color:#5960d4; margin-bottom:5px;}
.recommend{background:url('/img/sub/course_recommend_bg.jpg') center center / cover no-repeat; height:234px; margin-top:80px;}
.recommend h1{font-weight:normal; font-size:18px; color:#a5a5a5; text-align:left; line-height:30px; padding-top:70px; float:left;;}
.recommend h1 strong{font-weight:normal; display:block; font-size:32px; color:#fff;}
.recommend .swiper-container-recommend{width:1300px; position:relative; left:200px; top:-51px; overflow:hidden;}
.recommend .swiper-slide div{background-color:#fff; font-size:13px; color:#666; text-align:left; padding:40px; height:75px;}
.recommend .swiper-slide div h2{font-size:18px; color:#333; margin-bottom:10px;}
.recommend .arrows{}
.recommend .swiper-button-prev{background:url('/img/sub/course_recommend_prev.png') left top no-repeat; width:40px; height:40px; top:137px; left:820px;}
.recommend .swiper-button-next{background:url('/img/sub/course_recommend_next.png') right top no-repeat; width:40px; height:40px; top:137px; right:399px;}
.recommend .opacity{position:relative;}
.recommend .opacity .opacitywidth{position:absolute; background-color:#475067; width:423px; height:155px; left:1076px; top:79px; z-index:2; opacity:0.5;}

/* 교보재 상세페이지 */
.training{text-align:left; font-size:14px; color:#666; line-height:22px;}
.training .top{height:340px;}
.training .top strong{font-size:16px; color:#858df3; position:relative; top:70px; left:50px; font-weight:normal;}
.training .top h1{font-size:36px; color:#fff; position:relative; top:85px; left:50px;}
.training .top p{font-size:18px; color:#a5a5a5; line-height:28px; width:38%; position:relative; top:120px; left:50px;}
.training .feature{border:1px solid #d0d4dd; padding:40px 0;}
.training .feature:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.training .feature li{width:285px; float:left; padding:0 40px; border-left:1px solid #d0d4dd; min-height:290px;}
.training .feature li:first-child{border-left:0;}
.training .feature li span{display:block; background-color:#858df3; font-size:16px; color:#fff; width:40px; height:40px; line-height:38px; text-align:center;}
.training .feature li img{display:block; width:285px; height:140px; position:relative; top:-25px; z-index:-1;}
.training .feature li h1{font-size:18px; color:#333;}
.training .feature li p{font-size:13px; line-height:20px; margin-top:10px;}
.training .tab{margin-left:1px; margin-top:40px; height:92px;}
.training .tab:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.training .tab li{font-size:19px; float:left; box-sizing:border-box; margin-left:-1px; text-align:center;}
.training .tab li a{display:block; height:90px; line-height:88px; border:1px solid #d0d4dd;}
.training .tab li a.on{background-color:#f2f2f9; color:#5960d4; border:0; border-top:2px solid #858df3; height:100px; position:relative; top:-10px; line-height:100px;}
.training .cnt{background-color:#f2f2f9; padding:80px 70px;}
.training .cnt li{}
.training .cnt li ul{}
.training .cnt li ul li{height:300px; margin-top:80px; position:relative;}
.training .cnt li ul li:first-child{margin-top:0;}
.training .cnt li ul li:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.training .cnt li ul li .left{float:left; width:50%; position:absolute; margin:0; top:50%; left:25%; transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%);}
.training .cnt li ul li .left .img{position:relative; z-index:1;}
.training .cnt li ul li .left .img:before{display:block; content:""; width:450px; height:251px; background-color:#e3e3f0; position:absolute; margin:30px 0 0 30px; z-index:-1;}
.training .cnt li ul li .right{float:right; width:50%; text-align:right; position:absolute; margin:0; top:50%; left:75%; transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%);}
.training .cnt li ul li .right .img{position:relative; z-index:1;}
.training .cnt li ul li .right .img:before{display:block; content:""; width:450px; height:251px; background-color:#e3e3f0; position:absolute; margin:30px 30px 0 0; z-index:-1;}
.training .cnt li ul li .right .txt{margin-left:50px;}
.training .cnt li ul li .txt{width:90%; text-align:left;}
.training .cnt li ul li .txt span{font-size:14px; color:#5960d4; font-weight:bold; display:block; margin-bottom:5px;}
.training .cnt li ul li .txt strong{color:#5960d4; font-weight:normal;}
.training .cnt li ul li .txt h1{font-size:18px; color:#333; font-weight:normal; line-height:30px; padding-bottom:20px;}
.training .cnt li ul li .txt h1 strong{font-size:24px; display:block; color:#333;}
.training .cnt li ul li .txt p{}
.training .cnt li ul li .txt p:before{display:block; content:''; width:15px; height:2px; background:#5960d4; margin-bottom:10px;}
.training .cnt li ul li .txt p .ttl{display:block; font-size:16px; margin-bottom:10px;}
.training .cnt li ul li .training_06_cnt02{background:url('/img/sub/training_06_cnt02.png') left top no-repeat; width:960px; height:171px;}
.training .cnt li ul li .training_06_cnt02 li{width:152px; height:33px; background-color:#95959a; font-size:13px; color:#fff; line-height:31px; text-align:center; display:inline-block; margin:0; margin-left:5px; position:relative; top:107px;}
.training .cnt li ul li .training_06_cnt02 li:first-child{margin-left:0;}

/* IT 특성화 고등학교 진학 */
.characterization{}
.characterization .con{text-align:left; border-top:1px solid #d0d4dd;}
.characterization .con:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.characterization .con .left{float:left; width:62%;}
.characterization .con .left p{line-height:22px;}
.characterization .con .left p strong{color:#5960d4; font-weight:normal;}
.characterization .con .right{float:right; width:38%; text-align:right;}
.characterization .con .right .img{position:relative;}
.characterization .con .right .img img{position:relative; top:100px; right:30px;}
.characterization .con .right .img:before{display:block; content:""; width:326px; height:305px; background-color:#e3e3f0; position:absolute; top:70px; right:0;}
.characterization .school{margin-top:80px; background:url('/img/sub/characterization_school_bg.jpg') center center / cover no-repeat; width:100%; height:234px;}
.characterization .school ul{text-align:left; padding-top:80px;}
.characterization .school ul li{display:inline-block; padding:40px; width:254px; background-color:#fff; vertical-align:top; font-size:13px; margin-left:45px; line-height:21px;}
.characterization .school ul li:first-child{margin-left:0;}
.characterization .school ul li h1{font-size:18px; color:#333; margin-bottom:10px;}
.characterization .btm{font-size:18px; line-height:30px; color:#333; margin-top:100px;}
.characterization .btm strong{color:#5960d4; font-weight:normal;}

/* 대입수시전형 */
.college{text-align:left; line-height:22px;}
.college .top{position:relative; padding-bottom:30px;}
.college .top:before{display:block; content:""; width:1100px; height:75px; background-color:#737482; position:absolute; z-index:-1;}
.college .top img{vertical-align:top; border-left:20px solid #5a61d5;}
.college .top .ttl{width:550px; background-color:#fff; position:absolute; top:30px; right:30px; padding:60px 50px 0; height:210px;}
.college .top .ttl h1{font-size:50px; color:#333; height:65px;}
.college .top .ttl h1:before{display:block; content:""; width:125px; height:1px; background-color:#5a61d5; position:absolute; left:-28px; top:100px;}
.college .top .ttl h1 strong{color:#5a61d5;}
.college .top .ttl h3{font-size:28px; color:#666; font-weight:normal; line-height:32px;}
.college .top .ttl h3 strong{color:#5a61d5; display:block;}
.college .top .ttl p{font-size:18px; color:#a5a5a5; line-height:24px; margin-top:25px;}
.college .list1{margin-top:50px;}
.college .list1:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.college .list1 li{float:left; margin-left:40px;}
.college .list1 li:first-child{margin-left:0;}
.college .list1 li h1{height:50px; background-color:#aaaeba; color:#fff; font-size:18px; line-height:45px; text-indent:27px;}
.college .list1 li h1 a{background-color:#888b96; float:right; font-size:12px; text-indent:0; width:66px; height:22px; border-radius:10px; text-align:center; line-height:20px; margin:13px 15px 0 0;}
.college .list1 li .listcon{padding:27px; border:1px solid #d0d4dd; border-top:0; border-bottom:0; font-size:13px; color:#666; line-height:21px;}
.college .list1 li .listcon span{color:#999; font-size:12px;}
.college .list1 li .addtxt{padding:27px; background-color:#f7f8fa; height:228px; border:1px solid #d0d4dd; border-top:0; position:relative;}
.college .list1 li .addtxt:before{display:block; content:""; width:100px; height:1px; background-color:#d0d4dd; position:absolute; top:0; left:0;}
.college .list1 li .addtxt li{margin:0; width:100%; color:#333; margin-bottom:10px;}
.college .list1 li .addtxt li .ttl{display:block; font-size:14px;}
.college .list1 li .addtxt li .txt{display:block; font-size:13px; color:#666; padding-left:7px;}
.college .list1 li .addtxt li .color{color:#5960d4;}
.college h2{font-size:18px; color:#333; margin:50px 0 20px;}
.college .btm{text-align:center; font-size:22px; line-height:34px; color:#333; margin-top:80px;}
.college .btm strong{color:#5960d4; font-weight:normal;}

/* 특기자 전형 대학 진학 */
.specialist{border-top:1px solid #d0d4dd; text-align:left; line-height:22px;}
.specialist strong{color:#5960d4; font-weight:normal;}
.specialist .map{margin-top:50px; background:url('/img/sub/specialist_map.jpg') left top no-repeat; height:570px; position:relative;}
.specialist .map .area{position:absolute;}
.specialist .map .area li{font-size:0;}
.specialist .map .area li a{display:block; position:absolute;}
.specialist .map .area li a.seoul{background:url('/img/sub/specialist_map_seoul.png') left top no-repeat; width:147px; height:124px; left:300px; top:70px; }
.specialist .map .area li.seoul .on{background:url('/img/sub/specialist_map_seoul_on.png') left top no-repeat;}
.specialist .map .area li a.gangwon{background:url('/img/sub/specialist_map_gangwon.png') left top no-repeat; width:164px; height:148px; left:396px; top:44px;}
.specialist .map .area li.gangwon .on{background:url('/img/sub/specialist_map_gangwon_on.png') left top no-repeat;}
.specialist .map .area li a.daejeon{background:url('/img/sub/specialist_map_daejeon.png') left top no-repeat; width:201px; height:116px; left:301px; top:164px;}
.specialist .map .area li.daejeon .on{background:url('/img/sub/specialist_map_daejeon_on.png') left top no-repeat;}
.specialist .map .area li a.daegu{background:url('/img/sub/specialist_map_daegu.png') left top no-repeat; width:166px; height:143px; left:436px; top:180px;}
.specialist .map .area li.daegu .on{background:url('/img/sub/specialist_map_daegu_on.png') left top no-repeat;}
.specialist .map .area li a.gwangju{background:url('/img/sub/specialist_map_gwangju.png') left top no-repeat; width:192px; height:201px; left:250px; top:260px;}
.specialist .map .area li.gwangju .on{background:url('/img/sub/specialist_map_gwangju_on.png') left top no-repeat;}
.specialist .map .area li a.busan{background:url('/img/sub/specialist_map_busan.png') left top no-repeat; width:169px; height:119px; left:412px; top:287px;}
.specialist .map .area li.busan .on{background:url('/img/sub/specialist_map_busan_on.png') left top no-repeat;}
.specialist .map .area li a.jeju{background:url('/img/sub/specialist_map_jeju.png') left top no-repeat; width:94px; height:69px; left:200px; top:440px;}
.specialist .map .area li.jeju .on{background:url('/img/sub/specialist_map_jeju_on.png') left top no-repeat;}
.specialist .map .maplist{background-color:#fff; width:235px; height:440px; position:absolute; right:50px; padding:40px 0;}
.specialist .map .maplist h1{font-size:18px; color:#333;}
.specialist .map .maplist h1:before{display:inline-block; content:""; width:30px; height:1px; background-color:#333; position:relative; top:-4px; margin-right:10px;}
.specialist .map .maplist ul{margin-left:40px;}
.specialist .map .maplist ul li{color:#333; text-indent:47px; height:21px;}
.specialist .map .maplist ul li.year{margin-top:20px; text-indent:0;}
.specialist .map .maplist ul li.year span{font-size:13px; color:#999; margin-right:10px;}
.specialist .table3{margin-top:50px;}
.specialist .table3 thead th:before{display:none;}
.specialist .table3 thead th{font-size:11px; border-right:1px solid #fff; border-bottom:1px solid #fff; line-height:15px; height:30px; vertical-align:middle;}
.specialist .table3 thead th:last-child{border-right:0;}
.specialist .table3 thead *[rowspan]{border-left:1px solid #fff;}
.specialist .table3 tbody td{font-size:11px; text-align:center; padding:5px;}
.specialist .table3 tbody td:first-child{border-left:0;}
.specialist .table3 tbody *[rowspan]{border-left:1px solid #d0d4dd;}

/* 2020 IT 대입 준비 */
.enterschoolfull{}
.enterschoolfull .top{background:url('/img/sub/enterschoolfull_topbg.jpg') center center / cover no-repeat; height:650px;}
.enterschoolfull .mdl{width:1100px; margin:0 auto;}
.enterschoolfull .btm{background:url('/img/sub/enterschoolfull_btmbg.jpg') center center / cover no-repeat; height:585px;}
.enterschoolfull .btm .aniline{padding:90px 0 50px;}
.enterschoolfull .btm .aniline span {position: relative; z-index: 1; font-size: 32px; line-height: 48px; color: #fff; transition: color 0.8s; transition-timing-function: cubic-bezier(0.2,1,0.3,1); letter-spacing:-3px;}
.enterschoolfull .btm .aniline span:before {content: ''; position: absolute; z-index: -1; bottom: -3px; left: 0; width: 100%; height: 13px; opacity: 1; box-sizing: border-box; transform: scale3d(0,1,1); transform-origin: 0% 50%; transition: transform 0.8s; transition-timing-function: cubic-bezier(0.2,1,0.3,1); background: #434a95;}
.enterschoolfull .btm .aniline.on span:before {transform: scale3d(1,1,1);}

/* 개인정보처리방침 */
.edu_price { padding-bottom: 160px;}
.privacy{text-align:left; line-height:22px;}
.privacy .day{font-size:15px; font-weight: 300; color:#222; text-align:right; padding:15px 25px 22px; border-bottom: 1px solid #3b4360;}
.privacy .day select{width:110px;}
.privacy table{margin:30px 0;}
.privacy table tbody td{text-align:center;}
.privacy .list{color:#222; font-size:15px; margin:5px 0; font-weight: 300;}
.privacy .list li{margin-left:15px;}
.privacy table.table3 td {border-bottom: 1px solid #e6e6e6;}
.privacy table.table3 td:first-child {border-left: 1px solid #808080;}
.privacy table.table3 th:first-child {border-left: 1px solid #808080;}

/* 환불규정 안내 */
.refund{text-align:left; line-height:22px;}
.refund .ct_wrap{border-bottom:1px solid #d0d4dd;}
.refund table tbody td{text-align:center;}
.refund table tfoot td{font-size:16px; color:#666; font-weight: 300; padding:15px 0 60px;}

/* 교습비 */
.edu_price{}
.edu_price .ct_wrap{border-bottom:1px solid #d0d4dd;}
.edu_price .subttl{text-align:left;}
.edu_price .subttl span{font-size:15px; color:#222; float:right; font-weight: 300;}
.edu_price .table3 th:first-child {border-left: 1px solid #808080; text-align: left; text-indent: 60px;}
.edu_price .table3 th:last-child {border-right: 1px solid #808080;}
.edu_price .table3 td:first-child {text-align: left;border-left: 1px solid #808080;}
.edu_price .table3 td{border-bottom: 1px solid #e6e6e6;}
.edu_price .table3 td:last-child {border-right: 1px solid #808080;}
.edu_price .table3.table3Ex th:first-child {text-indent: 0; text-align: center;}
.edu_price .table3.table3Ex td:first-child {text-align: center;}
.edu_price .table3.table3Ex td {border-bottom: 1px solid #808080;}

/* 빠른방문상담예약 */
.quickconsult{width:1100px; margin:0 auto; margin-bottom:120px;}
.quickconsult h5{text-align:left; font-size:28px; color:#222; font-weight:bold; padding-bottom: 16px; position: relative; background: url(/img/sub/bg_quickTitle.png) left 12px top no-repeat; text-indent: 18px }
.quickconsult h5:before{content:''; display: block; width: 272px; height: 4px; background-color:#3b4360; position: absolute; left: 0; bottom:0;}
.quickconsult .quickconsultwidth{padding:40px 0 0;}
.quickconsult .table4{border-top:1px solid #333b48;}
.quickconsult .table4 th {text-align:left; text-indent: 25px; font-weight: normal; color: #000; background-color: #f7f7fb; font-size: 16px; border-bottom: 1px solid #e6e6e6;}
.quickconsult .table4 .boardagree td {padding: 0;}
.quickconsult .table4 tbody td {padding:10px; border-bottom: 1px solid #e6e6e6 }
.quickconsult .table4 .boardagree .con {margin-top: 0; padding: 20px 0 20px 24px; background-color: #fff; height: 170px; border-top: 0; border-bottom: 1px solid #e6e6e6;}
.quickconsult .table4 .boardagree .con > div{overflow:auto; height:100%; color: #666}
.provision_txt{width:98%; margin:0 auto; overflow:scroll; border-top:0; border-bottom:1px solid #e6e6e6; background: #fff; padding:20px 0  20px 24px; margin-top:0; height:170px;	 margin:10px 0;}
.quickconsult .provision_txt th{background: #f7f7fb; color:#000; font-size:14px; text-align:center;}
.quickconsult .provision_txt td{font-size:14px; text-align:center; padding:0 10px;}

.quickconsult .table4 .checks input[type="checkbox"] + label {font-size:15px; color: #222}
.quickconsult .table4 .boardagree .callnumber_title {font-size: 16px; color: #222}
.quickconsult .table4 .boardagree .callnumber {font-size: 16px; color: #303cc3; margin-left: 0}
.quickconsult #appointment_time1 ~ a img {display:inline-block; padding: 0 25px 0 10px; vertical-align: middle }
.quickconsult .table4 input[type="text"], .quickconsult .table4 textarea, .quickconsult .table4 select {border: 1px solid #e6e6e6; box-sizing: border-box; background-color: #fafafa}
.quickconsult .table4 textarea {height: 130px; box-sizing: border-box; -webkit-box-sizing: border-box; padding: 10px; width: 100%; margin:0; font-family: 'Noto Sans KR', sans-serif !important; }
.quickconsult .table4 textarea::placeholder {font-family: 'Noto Sans KR', sans-serif !important;}
.quickconsult .table4 td .gender label {position:relative; cursor:pointer}
.quickconsult .table4 td .gender label:not(:first-child){margin-left: 18px;}
.quickconsult .table4 td .gender label input[type='radio'] {display:none; position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0 }
.quickconsult .table4 td .gender label .txt {font-size: 16px; color: #222; vertical-align: middle}
.quickconsult .table4 td .gender label .check {vertical-align:middle; position:relative; display: inline-block; width: 20px; height: 20px; border: 1px solid #868686; box-sizing: border-box; margin-right: 5px; background-color: #fafafa; border-radius: 50%}
.quickconsult .table4 td .gender label .check:after {width: 10px; height: 10px; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); background-color: #6871d1}
.quickconsult .table4 td .gender label input[type='radio']:checked ~ .check:after {content:'';}
.quickconsult .table4 .boardagree .btn_blue {width: 250px; height: 60px; background-color: #6871d1; color:#fff; box-sizing: border-box; -webkit-box-sizing: border-box; border: 1px solid #333b48 }


/* table */
.table1{width:100%; margin-bottom:50px; font-size:13px; text-align:center;}
.table1 thead th{font-weight:bold; vertical-align:middle; color:#111; height:50px; border-top:1px solid #111; border-bottom:1px solid #dcdcdc;}
.table1 thead td{font-weight:bold; line-height:45px; font-size:18px; color:#111; height:50px; border-top:1px solid #dcdcdc; background-color:#f7f7f7;}
.table1 thead td .now{font-weight:normal; font-size:12px; color:#999; float:right; margin-right:20px;}
.table1 tbody tr{border-bottom:1px solid #dcdcdc;}
.table1 tbody th{font-weight:bold; vertical-align:middle;}
.table1 tbody td{vertical-align:middle; padding:15px 0;}
.table1 .blue{font-weight:bold;}

.table2{width:100%; margin-bottom:50px; font-size:13px; text-align:center;}
.table2 thead th{font-weight:bold; vertical-align:middle; color:#111; height:50px; border-top:1px solid #111; border-bottom:1px solid #dcdcdc;}
.table2 thead td{font-weight:bold; line-height:45px; font-size:18px; color:#111; height:50px; border-top:1px solid #dcdcdc; background-color:#f7f7f7;}
.table2 thead td .now{font-weight:normal; font-size:12px; color:#999; float:right; margin-right:20px;}
.table2 tfoot td{padding:15px 0;}
.table2 tbody tr{border-bottom:1px solid #dcdcdc;}
.table2 tbody th{font-weight:bold; vertical-align:middle;}
.table2 tbody td{vertical-align:middle; padding:15px; border-right:1px solid #dcdcdc;}
.table2 tbody td:last-child{border-right:0;}

.table3{width:100%; border-collapse: separate;}
.table3 thead th{background-color:#f7f7fb; color:#222; padding:12px 30px; vertical-align:middle; text-align:center; font-weight: normal; font-size: 16px; border-top: 1px solid #808080; border-bottom: 1px solid #808080;  border-right:1px dotted #b6b6b6;}
.table3 thead th:before{display:block; content:''; width:1px; height:20px; background:#fff; position:absolute;}
.table3 thead th:first-child:before{display:none;}
.table3 tbody tr{border-bottom:1px solid #d0d4dd;}
.table3 tbody td{font-size:15px; font-weight: 300; padding:12px 30px; vertical-align:middle; border-right:1px dotted #b6b6b6;}
.table3 tbody td span {font-weight: 400;}
.table3 .brdTop {border-top: 1px solid #808080;}
.table3 .brdLeft {border-left: 1px solid #808080;}
.table3 .brdRight {border-right: 1px solid #808080;}
.table3 .brdBottom {border-bottom: 1px solid #808080 !important;}
.table3 .brdBottom2 {border-bottom: 1px solid #e6e6e6;}

.table4{width:100%; font-size:13px; border-top:1px solid #7175a2;}
.table4 tbody th{font-weight:normal; vertical-align:middle; text-align:center; background-color:#f8f9fb; color:#333; border-bottom:1px solid #d0d4dd;}
.table4 tbody td{vertical-align:middle; padding:15px; text-align:left; border-bottom:1px solid #d0d4dd;}
.table4 .label4{padding:0;}
.table4 .label4 label{width:25%; float:left; color:#666; font-size:13px; overflow:hidden; border-top:1px solid #d0d4dd; text-indent:10px; line-height:50px; letter-spacing:0;}
.table4 .label4 label:nth-child(1){border-top:0;}
.table4 .label4 label:nth-child(2){border-top:0;}
.table4 .label4 label:nth-child(3){border-top:0;}
.table4 .label4 label:nth-child(4){border-top:0;}

.table5{width:100%; margin-top:50px; font-size:13px;}
.table5 thead tr{border-bottom:1px solid #111; height:30px; font-size:12px;} 
.table5 tbody tr{border-bottom:1px solid #dcdcdc;}
.table5 tbody th{font-weight:normal; vertical-align:middle; text-align:center; background-color:#f7f7f7; border-right:1px solid #dcdcdc;}
.table5 tbody td{vertical-align:middle; padding:15px; border-right:1px solid #dcdcdc; text-align:left;}
.table5 tbody td:last-child{border-right:0;}
.table5 .boardagree .con{background-color:#fff;}

table .label5 img{vertical-align:middle;}
table .label6 img{vertical-align:middle;}
table .label5 label{width:175px; display:inline-block; color:#666; font-size:13px;}
table .label6 label{width:145px; display:inline-block; color:#666; font-size:13px;}
table .phone{width:90px;}
table .w95{width:95px;}
table .w118{width:118px;}
table .w182{width:182px;}

.table6 {width: 100%;}
.table6 th, .table6 td {padding: 24px 15px; text-align: left;}
.table6 th {font-size: 25px; color: #222; font-weight: bold; background: url(/img/sub/bg_quickTitle.png) left 7px top 23px no-repeat; position: relative; padding-top: 34px;}
.table6 th:after {content: ''; display: block; width: 100%; height: 4px; background-color: #3b4360; position: absolute; top: 3px; left: 0;}
.table6 td.content {background: url(/img/sub/table6_td_bg.png) no-repeat top left;background-size: 100% auto; padding-left: 0; padding-right: 0;}
.table6 td.content label {font-size: 0; display: inline-block; position: relative;}
.table6 td.content .select {display: inline-block; padding: 12px 34px 13px; background-color: #eaedf1; font-size: 16px; color:#222; border-radius: 22px; cursor: pointer; margin: 0 10px 10px 0; transition: background-color 0.3s; }
.table6 td.content input[type="checkbox"] {position: absolute; width: 0; height: 0; visibility:hidden; top: 0; left: 0; }
.table6 td.content input[type="checkbox"]:checked ~ .select {background-color: #01e399;}

.boardagree td{padding:10px 0;}
.boardagree .con{text-align:left; background-color:#f8f9fb; border-bottom:1px solid #d0d4dd; border-top:1px solid #d0d4dd; height: 53px; overflow:auto; margin-top:20px; font-size:13px; color:#999999; padding: 30px 50px; letter-spacing: -1px;}
.boardagree .con strong{color:#666666;}
.boardagree .btn_blue{font-size:16px; display:block; width:202px; height:55px; line-height:55px; font-weight:bold;}

.boardagree label{display:block;}
.checks {
  position: relative;
}

/* 자격증정보 */
.certificateinfo .width {margin-top: 60px;}
.certificateinfo table {width: 100%; margin-bottom: 30px;}
.certificateinfo table:nth-child(2) td:first-child {vertical-align: top; padding-top: 22px; font-weight: bold;}
.certificateinfo table th, .certificateinfo table td {text-align: left; color: #222; line-height: normal;}
.certificateinfo table th {font-size: 28px; font-weight:bold; }
.certificateinfo table td {font-size: 15px; font-weight: 300;}
.certificateinfo table th:first-child {box-sizing: border-box; padding-left: 24px;}
.certificateinfo table td:first-child {box-sizing: border-box; padding-left: 24px;}
.certificateinfo table .marginTop {padding-top: 28px;}
.certificateinfo .titleBg {background: url(/img/sub/bg_quickTitle.png) left 16px top no-repeat;}
.certificateinfo .titleBg01 h2 {background: url(/img/sub/certificate/certificateinfo_title01.png) no-repeat right center;}
.certificateinfo .titleBg02 h2 {background: url(/img/sub/certificate/certificateinfo_title02.png) no-repeat right center;}
.certificateinfo .titleBg03 h2 {background: url(/img/sub/certificate/certificateinfo_title03.png) no-repeat right center;}
.certificateinfo .titleBg04 h2 {background: url(/img/sub/certificate/certificateinfo_title04.png) no-repeat right center;}
.certificateinfo .titleBg05 h2 {background: url(/img/sub/certificate/certificateinfo_title05.png) no-repeat right center;}
.certificateinfo .hasBg {position: relative;}
.certificateinfo .hasBg .bg01 {position: absolute; top: 87px; left: 0; z-index: -1;}
.certificateinfo .hasBg .bg02 {position: absolute; top: 245px; right: 5px;}
.certificateinfo .mainImg {display: block; margin: 0 auto;}

.certificateinfo .subTitle {font-size: 17px; color: #02b97d;}
.certificateinfo .smryTbl th {font-size: 15px; padding: 14px 0; }
.certificateinfo .smryTbl td {font-size: 15px; padding: 14px 0; }
.certificateinfo .smryTbl .subTitleBrd {border-bottom: 1px solid #e6e6e6;}

.certificateinfo .calendarTbl {width: 940px; border: 1px solid #808080;}
.certificateinfo .calendarTbl .subTitleBrdRight {border-rIght: 1px solid #808080;}
.certificateinfo .calendarTbl .subTitleBrdBtm {border-bottom: 1px solid #808080;}
.certificateinfo .calendarTbl .subTitleBrdTop {border-top: 1px solid #808080;}
.certificateinfo .calendarTbl .subTitleBrdLeft {border-left: 1px solid #808080;}
.certificateinfo .calendarTbl .brdRightDot {border-right: 1px dashed #b6b6b6 !important;}
.certificateinfo .calendarTbl .brdTopDot {border-top: 1px solid #b6b6b6 !important;}
.certificateinfo .calendarTbl .title {font-size: 22px; color: #6871d1; background-color: #f7f7fb;}
.certificateinfo .calendarTbl th {padding: 6px 0 8px 24px;}
.certificateinfo .calendarTbl td {padding: 0 0 0 24px;}
.certificateinfo .calendarTbl td span {display: block;}
.certificateinfo .calendarTbl td span.dot { font-size: 16px; font-weight: normal;}
.certificateinfo .calendarTbl td span.dot:before {content: ''; display: inline-block; width:3px; height: 3px; background-color: #222; border-radius: 100%; margin-right: 8px; vertical-align: 4px; }
.certificateinfo .calendarTbl td span.dotEx { font-size: 16px; font-weight: 300;}


.certificateMainTbl {position: relative;}
.certificateinfo .certificateMainTbl .certificateBg01 {position: absolute; top: 65px; left: -40px; z-index: -1;}
.certificateinfo .certificateMainTbl .certificateBg02 {position: absolute; top: 34px; left: 234px; z-index: -1; }
.certificateinfo .certificateMainTbl .certificateBg03 {position: absolute; top: 258px; left: 370px; z-index: 1; }
.certificateinfo .certificateMainTbl .certificateBg04 {position: absolute; top: 298px; left: 700px; z-index: 1; }
.certificateinfo .certificateMainTbl .certificateBg05 {position: absolute; top: 14px; right: 16px; z-index: -1; }

.certificateinfo .certificateTbl {position: relative;}
.certificateinfo .certificateTbl td:first-child {padding-left: 0;}

.certificateinfo .certificateTbl .exBox {width: 280px; height: 280px; border-radius: 100%; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; transition: all 0.5s; opacity: 0;}
.certificateinfo .certificateTbl .exBox .txt {width: 100%; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.certificateinfo .certificateTbl .exBox .txt h4 {font-size: 24px; font-weight: bold; text-align: center; padding-bottom: 14px}
.certificateinfo .certificateTbl .exBox .txt p {font-size: 15px; font-weight: 300; text-align: center; word-break: keep-all; line-height: 1.3;}

.certificateinfo .certificateTbl .exBox.exBox01 { background-color: #fff; border: 8px solid #9bb5e7; transition: all 0.5s;}
.certificateinfo .certificateTbl .exBox.exBox01 h4 {color: #6871d1; transition: all 0.3s;}
.certificateinfo .certificateTbl .exBox.exBox01 p {color: #222; transition: all 0.3s;}


.certificateinfo .certificateTbl .exBox.exBox02 {background-color: #fff; border: 8px solid #b6bbeb; }
.certificateinfo .certificateTbl .exBox.exBox02 h4 {color: #6871d1;}
.certificateinfo .certificateTbl .exBox.exBox02 p {color: #222;}

.certificateinfo .certificateTbl .exBox.exBox03 {background-color: #fff; border: 8px solid #9bb5e7; }
.certificateinfo .certificateTbl .exBox.exBox03 h4 {color: #3764b9;}
.certificateinfo .certificateTbl .exBox.exBox03 p {color: #222;}

.certificateinfo .certificateTbl .certificateTd {position: relative;}
.certificateinfo .certificateTbl .certificateTd .bg_arw {position: absolute; left: 272px; top: 140px; opacity: 0;  }

/* 자격증정보 -> 관련과정 */
.certificate_process {position: relative; z-index: 1; padding-top: 30px; margin-bottom: 80px;}
.certificate_process:before {content: ''; display: block; width: 100%; height: 72%; background-color: #eaf0ee; position: absolute; top: 0; left: 0; z-index: -1;}
.certificate_process .title {width: calc(100% - 788px); float: left; padding-top: 15px;}
.certificate_process .title h2 {font-size: 28px; line-height: 1.2;}
.certificate_process .title h2 strong {font-weight: bold; font-size: 42px; color: #00c686; letter-spacing: -.05em;}
.certificate_process .title .btn_view {display: block; width: 192px; height: 50px; background-color: #01e399; text-align: center; font-size: 20px; color: #000; transition: all 0.3s; line-height: 48px; margin-top: 35px; letter-spacing: -.05em;}
.certificate_process .title .btn_view img {display: inline-block; vertical-align: 4px; padding-left: 9px;}
.certificate_process .title .btn_view:hover {box-shadow: 2px 2px 10px rgba(0,0,0,0.5);}
.certificate_process .title .btn_view:hover img {animation: certificate_process 0.5s cubic-bezier(.5, 0, 1, 1) infinite alternate;}
.certificate_process .right {float: right; width: 788px; height: 231px; background-color: #fff;}
.certificate_process .right > * {float: left;}
.certificate_process .txtBox {padding: 45px 10px 10px 83px;}
.certificate_process .txtBox h3 {letter-spacing: -.05em; font-size: 22px; color: #222; font-weight: bold; padding-bottom: 8px;}
.certificate_process .txtBox p {letter-spacing: -.05em; font-size: 16px; color: #222; line-height: 1.4;}

@keyframes certificate_process {
	100% {
		-webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px);
	}
}

/* 자격증정보 -> 커리큘럼 레이어 */
.layer_curriculum {position: fixed; width: 100%; height: 100%; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0,0,0,0.4); z-index: 1000; cursor: pointer; display: none;}
.layer_curriculum .container {width: 57.3%; height: 80%; background-color: #fff; position: absolute; top: 50%; left: 50%; cursor: default; display: none; -webkit-box-sizing: border-box; box-sizing: border-box;}
.layer_curriculum .container .container_box { width: 100%; height: 100%; overflow-y: auto;  -webkit-box-sizing: border-box; box-sizing: border-box; padding-bottom: 40px;}
.layer_curriculum .container .btn_close {position: absolute; top: 0; right: -40px;}
.layer_curriculum .container .content {width: 80%; margin: 0 auto; padding: 50px 0 25px;}
.layer_curriculum .container .content .title {background: right center no-repeat;}
.layer_curriculum .container .content .title h3 {display: inline-block; line-height: normal; background: #fff; font-size: 28px; font-weight: bold; color: #222; text-align: left; text-indent: 8px; position: relative; z-index: 1; padding-right: 30px; letter-spacing: -.06em;}
.layer_curriculum .container .content .title h3:before {content: ''; display: block; width: 23px; height: 23px; position: absolute; z-index: -1; border-radius: 50%; left: 0; top: -2px; background: #b2f7e0;}
.layer_curriculum .container .content .title.title_curriculum {background-image: url(/images/curriculum/curriculum_titleLine2.png);}
.layer_curriculum .container .content .title.title_time {background-image: url(/images/curriculum/curriculum_titleLine3.png);}
.layer_curriculum .container .tbl {border: 1px solid #808080;border-collapse:inherit; width: 100%; margin: 30px auto 0;}
.layer_curriculum .container .tbl th, td {padding: 12px 26px;font-size: 16px;}
.layer_curriculum .container .tbl th, td:not(.ex) {color: #222; vertical-align: middle;}
.layer_curriculum .container .tbl th {background-color: #f7f7fb;}
.layer_curriculum .container .tbl td.ex {color: #666; text-align: left; line-height: 1.5;}
.layer_curriculum .container .tbl .bordRightDot {border-right: 1px dashed #b6b6b6;}
.layer_curriculum .container .tbl .bordBtom {border-bottom: 1px solid #e6e6e6;}
.layer_curriculum .container .tbl .bordRight {border-right: 1px solid #808080;}
.layer_curriculum .container .courseDetailEx p {text-align: right; padding-top: 20px; color: #9b9b9b;}

/* 애니메이션 공통 */
.certificateinfo .certificateTbl .exBox.on {border: 8px solid #01e399; background-color: #01e399;}
.certificateinfo .certificateTbl .exBox.on h4 {color: #fff;}
.certificateinfo .certificateTbl .exBox.on p {color: #222;}
/* 애니메이션 1 */
.certificateinfo .certificateTd.on .exBox.exBox01 {animation: certificateinfoExBox 0.8s ease-out forwards;}
.certificateinfo .certificateTd:first-child.on .bg_arw { animation: certificateinfoExBox 1s 0.3s ease-out forwards;}
/* 애니메이션 2 */
.certificateinfo .certificateTd.on .exBox.exBox02 {animation: certificateinfoExBox 0.8s 0.5s ease-out forwards;}
.certificateinfo .certificateTd:nth-child(2).on .bg_arw { animation: certificateinfoExBox 1s 1s ease-out forwards;}
/* 애니메이션 3 */
.certificateinfo .certificateTd.on .exBox.exBox03 {animation: certificateinfoExBox 0.8s 1s ease-out forwards;}

@keyframes certificateinfoExBox {
	0% {
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}


/* 카카오톡 상담 */
#contents.kakaoWrap {background: url(/img/sub/kakao_bg.jpg) no-repeat center top;}
#contents.kakaoWrap .width {position: relative;}
.kakaoWrap .icon {position: absolute;}
.kakaoWrap .icon01 {top: 120px; left: 670px; animation: kakaoIcon01 0.5s alternate ease infinite;}
.kakaoWrap .icon02 {top: 415px; left: 300px; animation: kakaoIcon02 0.6s alternate ease 0.5s forwards; opacity: 0;}
.kakaoWrap .icon03 {top: 475px; left: 500px; animation: kakaoIcon03 0.6s alternate ease 0.9s forwards; opacity: 0;}
.kakaoWrap .btn_kakao{position: absolute; bottom: 144px; left: 50%; margin-left: -198px;}

@keyframes kakaoIcon01 {
	0% {
		top: 120px;
	}
	100% {
		top: 110px;
	}
}
@keyframes kakaoIcon02 {
	0% {
		opacity: 0;
		top: 424px;
	}
	100% {
		opacity: 1;
		top: 415px;
	}
}
@keyframes kakaoIcon03 {
	0% {
		opacity: 0;
		top: 484px;
	}
	100% {
		opacity: 1;
		top: 475px;
	}
}




.checks input[type="checkbox"] {
  /* 실제 체크박스는 화면에서 숨김 */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0
}

.checks input[type="checkbox"] + label {
  display: inline-block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  color:#333333;
}

.checks input[type="checkbox"] + label:before {
  /* 가짜 체크박스 */
  content: ' ';
  display: inline-block;
  width: 20px;
  /* 체크박스의 너비를 지정 */
  height: 20px;
  /* 체크박스의 높이를 지정 */
  line-height: 20px;
  /* 세로정렬을 위해 높이값과 일치 */
  margin: -3px 8px 0 0;
  text-align: center;
  vertical-align: middle;
  background:url('/img/common/icon_checkbox.png')no-repeat center center;
}

.checks input[type="checkbox"] + label:active:before,
.checks input[type="checkbox"]:checked + label:active:before {
}

.checks input[type="checkbox"]:checked + label:before {
  content: '';
  background:url('/img/common/icon_checkbox_on_v2.png')no-repeat center center;
}

.checks .info {display: inline-block; margin-left: 20px; font-size: 13px; color: #666;}
.checks img {display: inline-block; margin-right: 6px; vertical-align: 1px; }

.boardagree .callnumber_title{font-size:13px; color:#999;}
.boardagree .callnumber{font-size:18px; font-weight:bold; color:#858df3; margin-left:10px;}

input[type='radio']{display:none; margin:10px; }
input[type='radio'] + label{position: relative;
	border: 1px solid #d9dde6;
	color: #a7a7a7;
	font-size: 13px;
	text-align: center;
	width: 118px;
	height: 28px;
	line-height: 24px;
	display: inline-block;
	cursor: pointer;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
input[type='radio']:checked + label{
	border: 1px solid #858df3;
	background-color: #fff;
	color: #858df3;
}
input[type='radio']:checked + label:after{
}


.closeBtn{background-color:#111; width:42px; height:32px; padding-top:8px; display:block; margin-right:8px; text-align:center;}

.companypage .section1 .left{position: relative;}
.companypage .section1 .left .more {transition: all 0.3s; cursor: pointer; color: #222; font-size: 14px; padding: 14px 20px; border: 1px solid #222; background-color: #fff; position: absolute; bottom: -80px; left: 0;}
.companypage .section1 .left .more img {vertical-align: 3px;}
.companypage .section1 .left .more:hover {box-shadow: 2px 2px 10px rgba(0,0,0,0.5);}
/* 회사소개 유튜브영상 */ 
.youtubeWrap{position: relative;}
.layerYoutube .ly_body{padding-right:50px !important;}
.layerYoutube{display:none; position:fixed !important; z-index:99999; top:50% !important; left:0; margin-top:-228px !important;}
.layerYoutube .ly_body{padding:0 50px;}
.layerYoutube .close{position:absolute; top:0; right:0;}
.closeBtn {background-color: #111; width: 42px; height: 32px; padding-top: 8px; display: block; margin-right: 8px; text-align: center !important;}