@charset "UTF-8";

/* 퍼블 가이드 배경 - 작업 후 삭제 */
/* .mainGuide{height: 4790px; background:url('/images/00_Main_1.jpg') no-repeat center 136px; } */

.mainGuide > section{width: 100%; }
.mainGuide > section:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.mainGuide .contens-area{width: 1100px; margin: 0 auto; position: relative; padding: 100px 0px; overflow: hidden; text-align: center;}



/* 이미지 베너 영역 */
.section_01{}
.sw-visual{text-align:center;}
.sw-visual-point{top : 192px !important;text-align: right; bottom: unset !important; width: 1100px !important; left: 50% !important; margin: 0 auto !important; margin-left: -550px !important;}
.sw-visual-point > .swiper-pagination-bullet{width: 2px; height: 20px; display: inline-block; background: #979394;opacity: 1; border-radius: 0%; margin: 0 17px !important;}
.sw-visual-point > .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bulle{margin: 0 17px}
.sw-visual-point > .swiper-pagination-bullet-active{background: #5960d4; transform: rotate( 25deg ); transform-origin: 50% 50%; width: 3px;}


/* 게시물 추출/개강안내/상담신청 */
.section_02{margin-top: -104px !important; z-index:99; position:absolute;}
.section_02:before{display:block; content:''; background-color:#fff; width:50%; height:210px; position:absolute; left:0; z-index:-99;}
.latest-area, .starting-date-area, .consulting-area{float: left; height: 210px;}
.latest-area{background: #ffffff; width: 625px;}
.latest-area .notice{text-align: left; padding-top: 37px; position: relative;}
.latest-area .notice h3{color: #222222; font-size: 36px; padding-bottom: 24px;}
.latest-area .notice ul li{font-size:16px; color:#666666; line-height: 28px;}
.latest-area .notice ul li .notice-data{font-size: 12px; color: #999999; float: right; padding-right: 52px; letter-spacing: 0px}
.latest-area .notice .notice_more {position: absolute; top: 54px; right: 60px;}
.latest-area .notice .notice_more a{border-right: 1px solid #000; width:22px; height: 22px; display: block;}
.latest-area .notice .notice_more a:after{content:"" ;border-right: 1px solid #000; height: 22px; display: block; position: relative; transform: rotate( 90deg ); transform-origin: 50% 50%; top: -11px; left: 11px;}

.starting-date-area{background: #858df3; width: 305px; text-align: left;}
.starting-date{padding-top: 42px; padding-left: 49px;}
.starting-date h3{font-size:36px; font-weight: bold; color:#ffffff; padding-bottom: 13px; }
.starting-date dl{clear:both; font-size: 18px; color: #fff; line-height: 30px;}
.starting-date dl:before{content:"/"; display: inline-block; color:#dcdffb; font-size: 18px; position: relative; transform: rotate( 10deg ); transform-origin: 0% 100%;}
.starting-date dl > dt{vertical-align: top;display: inline-block; color: #dcdffb;padding: 0px 7px;}
.starting-date dl > dt + dd{display:inline-block; font-weight: bold;}


.consulting-area{background: #e7e8fd; width: 170px;}
.consulting-area > a{font-size: 28px; color: #5960d4; display: block; font-weight: 100; padding: 45px 0px 88px; line-height: 35px;}
.consulting-area > a:after{background: url(/images/btn_line_03.png) no-repeat 0 0; width: 54px; height: 6px; content: ""; display: block; margin: 0px auto; position: relative; top: 37px}

/* 학원소개 */
.section_03{background:url('/images/section_03.jpg') no-repeat center}
.section_03 > .contens-area > .title-area{float:right; width: 35%; text-align: left; padding-top: 105px}
.section_03 > .contens-area > .title-area:before{content:"/"; display: block; color:#5960d4; font-size: 28px; position: relative; line-height: 14px; transform: rotate( 10deg ); transform-origin: 0% 100%;}
.section_03 > .contens-area > .title-area > .c-title > .en{letter-spacing: -0.3px;}
.section_03 .c-title{font-size: 38px; color: #333333; letter-spacing: -3.2px; font-weight: bold; padding-top: 21px; line-height: 42px;}
.section_03 .c-title .sttile{font-weight: 100; letter-spacing: 0px;}
.section_03 .s-title{font-size: 16px; color: #666666; padding-top: 22px; letter-spacing:-1.2px;}
.section_03 .ss-title{font-size: 13px; color: #9999; padding-top: 27px; letter-spacing:-1px; line-height: 155%;}
/* 학원소개 스와이프 */
.sw-company-area{float: left; width: 620px; padding-top: 90px;}
.sw-company > .swiper-wrapper{text-align:left;}
.sw-company > .swiper-slide{width: 620px !important}
.sw-company > .swiper-container{height: 348px}
.sw-company > .swiper-pagination > .swiper-pagination-bullet{width: 10px; height: 10px; display: inline-block; border-radius: 100%; background: #6b6e7d; opacity: 1; vertical-align: middle;}
.sw-company > .swiper-pagination > .swiper-pagination-bullet-active{background: none; border: 2px solid #6460d9; }
.sw-company-sp-position{top : 25px !important;text-align: right; width: 97% !important;}

/* 커리큘럼 */
.section_04{background:url('/images/section_04.jpg') no-repeat center}
.section_04:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.section_04 > .contens-area > .title-area{text-align: center;}
.section_04 > .contens-area > .title-area:before{content:"/"; display: block; color:#5960d4; font-size: 28px; position: relative; line-height: 14px;}
.section_04 > .contens-area > .title-area > .c-title > .en{letter-spacing: -0.3px;}
.section_04 .c-title{font-size: 38px; color: #333333; letter-spacing: -3.2px; font-weight: bold; padding-top: 22px; line-height: 42px;}
.section_04 .c-title .sttile{font-weight: 100}
.section_04 .s-title{font-size: 16px; color: #666666; padding-top: 19px; letter-spacing:-1.2px;}
.section_04 .s-title > .en{letter-spacing: 0px;}
.step-curri{padding-top: 40px}
.step-curri li{float: left; margin-right: 44px; width: 30%; box-sizing: border-box;}
.step-curri li p{text-align: left; position: relative;}
.step-curri li p span{position: absolute; font-size: 16px; font-weight: bold; right: 0px; top: 64%; transform: translateY(-50%); background: #fff; padding: 15px;}
.step-curri li:last-child{margin-right:0px}
.step-curri:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.curri_list{}
.curri_list > li{display: block; width: 100%; margin-top: 13px; letter-spacing:0;}
.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;}
.curri_list > li a:hover{background-color: #858df3; color: #fff;}
.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;}

/* 커리큘럼 스와이프 */
.sw-curri_list{height: 158px; padding-top: 75px;}
.sp-position{bottom: 175px !important; text-align: right;}
.sp-position > .swiper-pagination-bullet{
width: 10px;
height: 10px;
vertical-align: middle;
}
.sp-position > .swiper-pagination-bullet-active{
background: #fff;
border: 2px solid #5e64d5;
}
.sp-position > .swiper-slide > p{color: #fff; font-size: 18px; font-weight: bold;}


.snip1361 {
letter-spacing:0;
position: relative;
overflow: hidden;
min-width: 243px;
max-width: 158px;
width: 100%;
color: #141414;
text-align: left;
font-size: 16px;
}
.snip1361 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.snip1361 img {
max-width: 100%;
vertical-align: top;
}
.snip1361 figcaption {
position: absolute;
top: calc(50%);
width: 100%;
padding: 40px 20px;
}

.snip1361 h3,
.snip1361 p {
margin: 0 0 15px;
}
.snip1361 h3 {
font-weight: bold;
font-size: 18px;
line-height: 1.2em;
color:#fff;
}
.snip1361 p {
font-size: 13px;
letter-spacing: -1px;
color:#d5d5d5;
position: relative;
}
.snip1361 p:after{
background: url(/images/btn_line_02.png) no-repeat 0 0;
width: 44px;
height: 7px;
display: inline-block;
content: "";
position: absolute;
bottom: 0px;
right: 0px;
}

.snip1361 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
}
.snip1361:hover figcaption,
.snip1361.hover figcaption {
top: 0px;
background-color: rgba(13, 15, 41, 0.8);
}

/* 교육환경 */
.section_05{background-color:#f8f8f8; position: relative;}
.section_05:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.section_05 .title-area{text-align: left; position: absolute; top: 100px; left: 50%; margin-left: -552px; width: 20%;}
.section_05 .title-area:before{content:"/"; display: block; color:#5960d4; font-size: 28px; position: relative; line-height: 14px; transform: rotate( 10deg ); transform-origin: 0% 100%;}
.section_05 .title-area > .c-title > .en{letter-spacing: -0.3px;}
.section_05 .c-title{font-size: 38px; color: #333333; letter-spacing: -3.2px; font-weight: bold; padding-top: 22px; line-height: 42px;}
.section_05 .c-title .sttile{font-weight: 100}
.section_05 .s-title{font-size: 16px; color: #666666; padding-top: 28px; letter-spacing:-1.2px;}
.section_05 .s-title > .en{letter-spacing: 0px;}

.section_05 .swiper-pagination_sw-facility {
position: absolute;
top: 283px;
left: -377px;
width: 370px;
z-index: 9;
}
.section_05 .swiper-pagination_sw-facility .swiper-pagination-bullet {
border-radius: 0;
width: 100px;
height: 34px;
text-align: center;
line-height: 34px;
font-size: 13px;
color:#999999;
background: #f8f8f8;
border: 1px solid #dcdcdc;
opacity: 1;
margin: 3px;
}
.section_05 .sw-facility .swiper-slide {width: 450px }
.section_05 .sw-facility .swiper-slide-active > img{opacity:1 !important} 
.section_05 .sw-facility .swiper-slide > img{opacity:0.4}
.section_05 .swiper-pagination_sw-facility .swiper-pagination-bullet-active {color:#5960d4; background: #f8f8f8; border: 1px solid #858df3; font-weight: bold;}

.section_05 .facility-area{width: 59.4%; position:relative; top: 100px; float:right;}
.section_05 .facility-info{width: 65%; background:#f8f8f8; position: relative; top: -67px; padding: 25px 0px; display: none;}
.section_05 .facility-info > h4{font-size: 18px; color: #333; padding-bottom: 10px}
.section_05 .facility-info > p{font-size: 13px; color: #666; line-height: 20px;}
.section_05 .facility-info > .swiper-wrapper > .swiper-slide-active > .facility-info{display: block !important;}


.section_05 .sw-facility-thumbs-area{width: 500px;}
.section_05 .sw-facility-thumbs {height: 20%; box-sizing: border-box; padding: 10px 0;}
.section_05 .sw-facility-thumbs .swiper-slide {height: 100%; color:#999999;}
.section_05 .sw-facility-thumbs .swiper-slide-thumb-active {opacity: 1; color:#5960d4;}

.section_05 .sw-facility{height: 380px}
.section_05 .sw-facility > .swiper-button-next{background-image:url(/images/button-next.png); width: 60px; height: 60px; background-size: 100%; top: 320px; left: 390px;}
.section_05 .sw-facility > .swiper-button-prev{background-image:url(/images/button-prev.png); width: 60px; height: 60px; background-size: 100%; top: 320px; left: 328px;}
.section_05  .facility-area:after{content:".";display:block;height:0;clear:both;visibility:hidden;}


/* 맞춤형 코딩교육 */
.section_06{background-color:#475067;}
.section_06 > .contens-area > .title-area{float:right; width: 26%; text-align: left;}
.section_06 > .contens-area > .title-area:before{content:"/"; display: block; color:#fff; font-size: 26px; position: relative; padding-top: 67px}
.section_06 > .contens-area > .title-area > .c-title > .sttile{font-weight: 100; letter-spacing: -2px; line-height: 51px;}
.section_06 .c-title{font-size: 38px; color: #fff; letter-spacing: -2.6px; font-weight: bold; padding-top: 6px; line-height: 42px;}
.section_06 .c-title .cc-title{font-size: 26px; color: #fff; font-weight: normal; display:block; letter-spacing: -2px;}
.section_06 .s-title{font-size: 16px; color: #a5a5a5; padding-top: 20px; padding-bottom: 50px; letter-spacing:-1.2px;}

.section_06 > .contens-area > .title-area .btn_more{border: 1px solid #babcc1; width: 123px; display: block; color: #ffffff; padding: 8px 12px; font-size:13px; letter-spacing: -1.3px; }
.section_06 > .contens-area > .title-area .btn_more:after{background:url('/images/btn_line_01.png') no-repeat 0 0; width: 57px; height: 5px; display: inline-block; content:""; margin-left: 7px; vertical-align:4px}

.section_06 > .contens-area > .curriculum-area{position: relative; float:left;}
.section_06 > .contens-area > .curriculum-area > .curri{position: absolute; width: 430px; height: 365px; display:block;}
.section_06 > .contens-area > .curriculum-area > .menu_01{top: 0px; left: 0px; z-index: 99}
.section_06 > .contens-area > .curriculum-area > .menu_02{top: 68px; left: 298px; z-index: 9}
#box1{width:430px; height:365px; position:absolute; top:1px; left:50px; z-index:5; background:url('/images/curriculum_01_on.jpg')no-repeat}
#box2{width:430px; height:365px; position:absolute; top:70px; left:250px; z-index:3;}
.boxWrap > span{width:100px; height:200px; border:1px solid red; box-sizing:border-box; z-index:9; position:absolute; top:150px; left:250px;}

#box1 > a, #box2 > a{display: block; height: 365px;}

.layerMove1_up{animation:layerMove1_up 0.7s alternate ease-in-out; animation-fill-mode:both; z-index:5; z-index:2; background:url('/images/curriculum_01_off.jpg')no-repeat !important}
.layerMove1_down{animation:layerMove1_down 0.7s alternate ease-in-out; animation-fill-mode:both; z-index:2; z-index:5; }

.layerMove2_up{animation:layerMove2_up 0.7s alternate ease-in-out; animation-fill-mode:both; z-index:3; z-index:6; background:url('/images/curriculum_02_off.jpg')no-repeat}
.layerMove2_down{animation:layerMove2_down 0.7s alternate ease-in-out; animation-fill-mode:both; z-index:6; z-index:3; background:url('/images/curriculum_02_on.jpg')no-repeat}

@keyframes layerMove1_up{0%{left:30px; z-index:5;} 50%{left:0px; opacity:0.9;} 100%{left:30px; z-index:2;}}
@keyframes layerMove1_down{0%{left:30px; z-index:2;} 50%{left:0px; opacity:0.9;} 100%{left:30px; z-index:5;}}
@keyframes layerMove2_up{0%{left:290px; z-index:6;} 50%{left:310px; opacity:0.9;} 100%{left:290px; z-index:3;}}
@keyframes layerMove2_down{0%{left:290px; z-index:3;} 50%{left:310px; opacity:0.9;} 100%{left:290px; z-index:6;}}


/* 프로젝트 */
.section_07{background:url('/images/section_07.jpg') no-repeat center}
.section_07 > .contens-area > .title-area{float:left; width: 20%; text-align: left;}
.section_07 > .contens-area > .title-area:before{content:"/"; display: block; color:#5960d4; font-size: 28px; position: relative; line-height: 14px; transform: rotate( 10deg ); transform-origin: 0% 100%;}
.section_07 > .contens-area > .title-area > .c-title > .en{letter-spacing: 0px; margin-bottom: 5px; display: block;}
.section_07 .c-title{font-size: 40px; color: #333333; letter-spacing: -3.2px; font-weight: bold; padding-top: 6px; line-height: 42px;}
.section_07 .c-title .cc-title{font-size: 28px; color: #333333; font-weight: 100; padding-top: 10px; display:block;}
.section_07 .s-title{font-size: 16px; color: #666666; padding-top: 28px; letter-spacing:-1.2px;}
.kitset-area{float: right; width:730px; overflow:hidden;}
.kitset-area ul li{}
.kitset-area ul li figure{text-align:left;}
.kitset-area ul li figcaption{text-align: left;}
.kitset-area ul li figcaption dl {height:auto; overflow:hidden; padding: 24px 0 28px 0px;}
.kitset-area ul li figcaption dl dt {clear:both; font-size: 18px; color:#222222; font-weight: bold; letter-spacing: -1.3px;}
.kitset-area ul li figcaption dl dd {display:block; overflow:hidden; font-size: 13px; color:#666666; padding-top: 11px; line-height: 19px; letter-spacing: -1.7px;}
.kitset-area ul li figcaption .btn_more{border: 1px solid #d7d7d7; width: 123px; display: block; color: #999999; padding: 8px 12px; font-size:13px; letter-spacing: -1.3px; }
.kitset-area ul li figcaption .btn_more:after{background:url('/images/btn_line_01.png') no-repeat 0 0; width: 57px; height: 5px; display: inline-block; content:""; margin-left: 7px; vertical-align:4px}
.kitset-area:after{content:".";display:block;height:0;clear:both;visibility:hidden;}


/* 시작하세요 */
.section_08{background:url('/images/section_08.jpg') no-repeat center}
.section_08:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.section_08 .s-title{font-size: 16px; color: #999;}
.section_08 .c-title{font-size: 40px; color: #ffffff;}
.section_08 > .en{font-weight:bold; letter-spacing: -0.3px;}
.section_08  ul{padding-top: 113px;}
.section_08  ul li{position: relative; float:left; width: 25%; box-sizing: border-box;}
.section_08  ul li .card-item{width: 100%; height:300px}
.section_08  ul li .card-item > p:before{content:"/"; display: block; color:#fff; font-size: 18px; position: relative; margin: 25px 0 20px 0;}
.section_08  ul li .card-item > p{font-size: 16px; color: #fff; width: 100%; position: absolute; top: 0px;}
.section_08  ul li .card-item > p > .en{letter-spacing: 0px}
.section_08  ul li:nth-of-type(2){margin-top: -29px}
.section_08  ul li:nth-of-type(4){margin-top: -60px}