.main_visual{
  width:100%;
  position: relative;
  z-index: 3;
  height: 100vh;
  background: #f2f4f5;
}

.main_visual .main_slider{
  height:100%;
  overflow: hidden;
  position: relative;
}

.main_visual .main_slider .slide_box{
  overflow: hidden;
  width:100%;
  height:100%;
  position: relative;
  background-color: #fff;
}

.main_visual .main_slider .slide_box > div{
  overflow: hidden;
  height:inherit;
  position: absolute;
  left:0;
  top:0;
  right:0;
  z-index: 3;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: table;
  opacity:0;
}

.main_visual .main_slider .slide_box > div{
  -moz-transition: all .7s ease-in-out;
  -webkit-transition: all .7s ease-in-out;
  -o-transition: all .7s ease-in-out;
  -ms-transition: all .7s ease-in-out;
  transition: all .7s ease-in-out;
}

.main_visual .main_slider .slide_box .main_img{
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  -moz-transition: all 8s ;
  -webkit-transition: all 8s;
  -o-transition: all 8s;
  -ms-transition: all 8s ;
  transition: all 8s ;
  transform: scale(1.2);
}

.main_visual .main_slider .slide_box .in_inner{
  position: relative;
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}

.main_visual .main_slider .slide_box .main_img img{
   display: block;
   min-width: 100%;
   max-width: auto;
   height: 100%
  }

.main_visual .main_slider .slide_box .bg_img{
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.3;
  top:0;
}

.main_visual .main_slider .slide_box  > div.on .main_img{
  transform: scale(1.0);
  transform:perspective(500px) rotate(.001deg);
}

.main_visual .main_slider .slide_box .box1{
  background:url('/img/main/main_visual01.jpg') center center no-repeat; background-size:cover;
}

.main_visual .main_slider .slide_box .in_obj{
  text-align: left;
  width: 1200px;
  margin: 0 auto;
}

.main_visual .main_slider .slide_box .in_obj .wrap_t{
  margin-bottom: 25px;
}

.main_visual .main_slider .slide_box .box strong{
  display: block;
  position: relative;
  left:30px;
  opacity:0.0001;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0.0001)";
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
}

.main_visual .main_slider .slide_box div div.wrap_tit{
  display: block;
  opacity:0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0.0001)";
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
  transition-delay: 2.6s;
}

.main_visual .main_slider .slide_box div.on div.wrap_tit{
    opacity: 1
}

.main_visual .main_slider .slide_box .box span{
  display: block;
  position: relative;
  opacity:0.0001;
  left:30px;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0.0001)";
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
}

.main_visual .main_slider .slide_box .box em{
  display: block;
  position: relative;
  opacity:0.0001;
  left:30px;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0.0001)";
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
}

.main_visual .main_slider .slide_box .box.on span{
  left: 0;
  transition-delay: 2.3s;
}

.main_visual .main_slider .slide_box .box p{
  margin-top: 20px;
  display: block;
  position: relative;
  opacity:0;
  left:30px;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	-moz-transition: all 1s;
	-webkit-transition: all 1s;
	-o-transition: all 1s;
	-ms-transition: all 1s;
	transition: all 1s;
	color: #fff;
	font-size: 18px;
	line-height: 36px;
	font-weight: 400;
  letter-spacing: -1px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
  transform: scale(1);
}

.main_visual .main_slider .slide_box .box p i{
  font-style: normal;
  color: #f5e5a4;
  font-weight: 700;
}

.main_visual .main_slider .slide_box .box.on p{
  position:relative;
  opacity:1;
	left:0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
	transition-delay: 3.2s;
}

.main_visual .main_slider .slide_box > .box.on strong{
  left:0;
  opacity:1;
  transition-delay: 2.6s;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.main_visual .main_slider .slide_box .box.on em{ transition-delay: 2.9s; }

.main_visual .main_slider .slide_box > .box.on{ z-index: 5; opacity:1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.main_visual .main_slider .slide_box > .box3.on{ z-index: 5; opacity:1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.main_visual .main_slider .slide_box > .box.on em,
.main_visual .main_slider .slide_box > .box.on span,
.main_visual .main_slider .slide_box > .box.on strong
{ left:0;opacity:1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.main_visual .main_slider .slide_box > .box strong{ display: block;color: #fff;font-size: 66px;line-height:66px; font-weight:700;letter-spacing: -1px; margin-bottom:25px; text-shadow: 2px 2px 4px rgba(0,0,0,0.2); }

.main_visual .main_slider .slide_box > .box em{ display: block; position: relative; color: #fff; font-size: 30px; font-weight: 300; letter-spacing: -1px; text-shadow: 2px 2px 4px rgba(0,0,0,0.2); font-style: normal; margin-bottom: 50px; }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 .main_visual .main_slider .slide_box > .box strong{ margin-bottom: 20px }
}

.main_visual .main_slider .slide_box > .box span { font-size:18px;letter-spacing: -1px;display: block; color: #fff; font-weight: 400; opacity: 0; margin-bottom: 50px; text-shadow: 2px 2px 4px rgba(0,0,0,0.2); }


.main_visual .white_box{ position: absolute; right: 0; top: 0; width: 100%; height: 100%; z-index: 101; background-color: #fff; transition: 2.0s; }
.main_visual .main_slider .slide_box > div.on .white_box{ width: 0; }

.main_visual .blue_box{ position: absolute; left: -2px; top: 0; width: 0px; max-width: 642px; height: 100vh; background: url('../images/slide_left.png') left center no-repeat; background-size: cover; transition: all 1.5s; }
.main_visual .main_slider .slide_box > div.on .blue_box{ left: -2px; top: 0; width: 642px;  transition-delay: 1.0s; }



/* 수정 css */
.thum_wrap{
  font-size: 0;
  line-height:0;
  position: absolute;
  left: 5%;
  bottom: 50px;
  z-index: 99;
  text-align:center;
  text-align: center;
}

.thum{
  display: inline-block;
}

.thum li{
  /* transition: all 0.0s ; */
  width:28px;
  height:28px;
  float: left;
  cursor:pointer;
  display: block;
  background: url('../images/slide_dot.png') center center no-repeat;
  /* margin-bottom: 15px;  */
  position: relative;
}

.thum li:first-child{
  margin-left:0;
  position: relative;
}

.thum li:last-child{
  display: none;
}

.thum li.on{
  transition: all 0.5s;
  width: 28px;
  height: 28px;
  background: url('../images/slide_dot02.png') center center no-repeat;
}

.scroll_box{
  position: absolute;
  display: flex;
  align-items: center;
  left: 12%;
  bottom: 53px;
  z-index: 100;
}

.scroll_box::before{
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

.scroll_box p{
  color: #fff;
  font-size: 14px;
  font-weight: lighter;
  margin-left: 8px;
  letter-spacing: 1px;
}

.main_visual .wrap_btn{
  z-index: 100;
  width: 100px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.4);
}

.main_visual .wrap_btn:before{
  content: "";
  width: 0;
  height: 1px;
  background-color: #fff;
  display: block;
  left: 0;
  top: 0;
  z-index: -1;
}

.main_visual .wrap_btn.on:before{
  width: 100%;
  /* transition: 9.5s linear; */
  transition: 5s linear;
}

.wrap_tit{
  display: flex !important;
  align-items: center !important;
  padding: 10px 0;
}

.bar{
  width: 70px;
  height: 1px;
  background-color: #fff;
  margin-right: 10px;
}

span.flex_text{
  display: flex !important;
  align-items: center;
  font-size: 22px !important;
  font-weight: 300 !important;
  margin-bottom: 15px !important;
  letter-spacing: 0.5px !important;
}

.wrap_tit strong{
  font-family: 'GmarketSansBold', sans-serif;
  margin-bottom: 0 !important;
  margin-right: 3px;
  letter-spacing: 3px !important;
}

.wrap_tit em{
  margin-bottom: 0 !important;
  font-family: 'GmarketSansMedium', sans-serif;
  font-size: 54px !important;
}

/* // 추가 css */























@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .main_visual .main_slider .slide_box .box3{ z-index: 1 !important; background-color: transparent; }
  .main_visual .main_slider .slide_box .box3:before{ content: ""; width: 100%; height: 100%; background-color: #1d2348; position: absolute; left: 0; top: 0; z-index: -3; }
}



@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .font_sel{ transform:skew(-0.001deg) !important; }
   .font_sel *{ transform:skew(-0.001deg) !important; }
}


@keyframes rotate1 {
    0% {
      transform: rotate(0);
    }

    100%{
      transform: rotate(360deg);
    }
}

@keyframes rotate2 {
    0% {
      transform: rotate(360deg);
    }

    100%{
      transform: rotate(0deg);
    }
}



@media (max-width: 1316px){
  #gnb #gnb_1dul{ padding-left: 70px; }
  .gnb_1dli.gnb_al_li_plus .gnb_1da{ padding: 0 20px; }
}

@keyframes anisc {
  0%{
    width: 0;
  }
  100%{
    width: 100%;
  }
}

@media (max-width: 1216px){
  #main .new_notice .inner{ width: 100%; padding: 0 30px; }
  .main_visual > .scroll{ display: none; }

  #gnb #gnb_1dul .gnb_al_li_plus{ display: none; }
  .main_visual .main_slider .slide_box .in_obj{ width: 100%; padding: 0 40px;  }
  .main_visual .main_slider .slide_box > div.on .blue_box{ width: 500px;  }
  .main_visual{ max-height: 700px; }
  #hd, #wrapper{ min-width: auto; }
  .main_visual .wrap_btn{ width: 180px; height: 80px; }
  .main_visual .wrap_btn .wrap > button.slick-next{ top: 31px; right: 20px; }
  .main_visual .wrap_btn .wrap > button.slick-prev{ top: 31px; left: 20px; }

  #main .in_kra .massage ul{ width: 100%; padding: 0 20px; }
  #main .in_kra .massage ul li .img_box:nth-child(2):after{ display: none; }
  #mabarin .program .inner{ width: 100%; padding: 0 20px; }
  #main .program .inner > div{ float: none; }
  #main .program .title{ width: 100%; text-align: center; }
  #main .title > strong br{ display: none; }
  #main .program .tab_n ul:after{ content: ""; display: table; clear: both; }
  #main .program .tab_n ul li{ float: left; width: 32.3333333333%; margin-right: 1.5%; }
  #main .program .tab_n ul li:last-child{ margin-right: 0; }
  #main .program .pro_con{ width: 100%; max-width: 894px; margin: 0 auto;  }
  #main .middle .inner{ width: 100%; padding: 0 20px; }
  #main .coach .inner{ width: 100%; padding: 0 20px; }
  #main .coach .inner .title{ padding-top: 40px; width: 100%; text-align: center; }
  #main .coach .inner > div{ float: none; }
  #main .coach .inner .title > p b br{ display: none; }
  #main .coach .inner .img_box{ width: 100%; }
  #main .campus .inner{ width: 100%; padding: 0 20px; padding-top: 50px; }
  #main .m_notice .inner{ width: 100%; padding: 0 20px; }
  #ft .inner{ width: 100%; padding: 0 20px; }
  #ft .inner .sns{ right: 20px; top: 15px; }
  #gnb #gnb_1dul{ width: 100%; }
  .main_visual{ height: 700px; }
  .main_visual .main_slider .slide_box .box3 .inner{ overflow: hidden; overflow-x: scroll; padding-left: 60px; padding-right: 60px; }

  #hd .site_map{ display: none; }
  #gnb .gnb_menu_btn{ display: block; }
  .main_visual .scroll{ transform: rotate(0); right: auto; left: 0px; bottom: 140px;width: 112px;}
  .main_visual .scroll:after{ width: 0; }
  .main_visual .main_slider .slide_box > .box3.on .scroll:after{ animation: anisc 3.0s infinite; }
  .main_visual .scroll:before{  content: '';
    width: 112px;
    height: 1px;
    display: block;
    background: rgba(255,255,255,0.3);
    vertical-align: middle;
    position: absolute; bottom: 0; left: 0;
   }

}



@media (max-width: 1100px){
  #main .in_kra .massage ul li .text_box p{ font-size: 13px; line-height: 25px; }
  #main .in_kra .m_title strong{ font-size: 20px; line-height: 40px; }
}


@media (max-width: 1100px){
  #main .middle .inner > ul > li .grade_01 .graph{ transform: scale(0.85); }
   #main .middle .inner > ul > li .grade_03 { min-height: auto; }
    #main .middle .inner > ul > li .grade_03 img{ max-width: 996px; width: 100%; }
    #main .new_notice ul li .text_box strong{ font-size: 15px; }
}

@media (max-width: 1050px){
  #main .middle .inner > ul > li .grade_01 .graph .wrap{ width: 100%; }
  #main .middle .inner > ul > li .grade_01 .graph .toefl{ position: absolute; left: 0; top: 0; }
  #main .middle .inner > ul > li .grade_01 .graph .test{ position: absolute; right: 0; top: 0; }
  #main .middle .inner > ul > li .grade_01 .graph .left_l dl{ margin: 0 !important; width: 19%; position: static !important; margin-right: 1.25% !important; }
  #main .middle .inner > ul > li .grade_01 .graph .left_l dl:last-child{ margin-right: 0 !important; }
  #main .middle .inner > ul > li .grade_01 .graph .left_l{ float: none; width: 100%;  }
  #main .middle .inner > ul > li .grade_01 .graph .left_l dl dt{ position: static !important; width: 100% !important; background: url('../img/main/middle01_bg01.png') center center no-repeat !important; }
  #main .middle .inner > ul > li .grade_01 .graph .left_l dl dd{ width: 100%; min-width: auto; border: 1px solid #ddd; background-color: #fff; margin: 0 auto; }
  #main .middle .inner > ul > li .grade_01 .graph .wrap:before{ width: 100%; }
  #main .middle .inner > ul > li .grade_01 .graph .left_l dl:nth-child(even){ padding: 0; }
  #main .middle .inner > ul > li .grade_01 .graph .left_l dl:nth-child(odd){ padding: 0;  }
  #main .middle .inner > ul > li .grade_01 .graph .toefl{ top: -100px; }
  #main .middle .inner > ul > li .grade_01 .graph .test{ top: -100px; }
  #main .middle .inner > ul > li .grade_01 .graph .wrap:before{ top: -49px; }
  #main .middle .inner > ul > li .grade_01 .graph{ padding-top: 150px; }
  #main .middle .inner > ul > li .grade_01 .graph .left_l{ padding-top: 30px; }
  #main .middle .inner > ul > li .grade_02 .grade02_ul li .circle{ width: 80px; height: 80px;  }
  #main .middle .inner > ul > li .grade_02 .grade02_ul li .circle span{ font-size: 14px; line-height: 24px; }
  #main .middle .inner > ul > li .grade_02 .depth p{ font-size: 15px; }
  .main_visual .main_slider .slide_box .box3 .inner{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding-left: 200px;  }
  .main_visual .main_slider .slide_box .box3 .inner .history{ transform: scale(0.8); }
  #main .high .map_wrap{ transform:  scale(0.8);  }
  #main .insta .inner{ width: 100%; padding-left: 30px; padding-right: 30px; }
}

@media (max-width: 1050px){
  #main .in_kra .massage ul li .img_box img{ width: 80%; }
  #main .in_kra .massage ul li:nth-child(1) .text_box{ padding-left: 50px;}
  #main .in_kra .massage ul li:nth-child(2){ padding-left: 50px; }

}

@media (max-width: 930px){
  #main .high .text_b li:nth-child(1) svg{ display: none; }
  #main .high .text_b li:nth-child(2) svg{ display: none; }
  #main .high .text_b li:nth-child(3):before{ display: none; }
  #main .high .text_b li:nth-child(4):before{ display: none; }
  #main .high .text_b{ position: relative; width: 100%; margin-top: 70px; }
  #main .high .text_b:after{ content: ""; display: table; clear: both;  }
  #main .high .map_wrap{ width: 100%; transform: scale(1); padding: 0 30px;  }
  #main .high .text_b li{ position: static; float: left; width: 48.5%; margin-right: 3%; min-height: 184px; margin-bottom: 20px; }
  #main .high .text_b li:nth-child(even){ margin-right: 0; }
  #main .high .text_b li dt{ text-align: left; }
  #main .high{ padding-bottom: 60px; }

}

@media (max-width: 1000px){
    #main .new_notice ul li{ width: 48%; margin-right: 4%; margin-bottom: 40px; }
    #main .new_notice ul li:nth-child(2n+0){ margin-right: 0; }

}

@media (max-width: 980px){
  #main .program .pro_con{ transform: scale(0.8);}
  #main .program .con01{ background-size: 100%; }
  #main .program .con01 > ul > li .sp{ right: 30px; }
  #main .program.on .con01 > ul > li .sp{ right: 0; }
  #main .program .con01 ul li .rc .settings{ width: 100px; height: 100px; background-size: 100%; }
  #main .program .con01 ul li .wr .settings{ width: 100px; height: 100px; background-size: 100%; }
  #main .program .con01 ul li .gr .settings{ width: 100px; height: 100px; background-size: 100%; }
  #main .program .con01 ul li .voca .settings{ width: 100px; height: 100px; background-size: 100%; }
  #main .program .con01 ul li .lc .settings{ width: 100px; height: 100px; background-size: 100%; }
  #main .program .con01 ul li .sp .settings{ width: 100px; height: 100px; background-size: 100%; }
  #main .program .con01 ul li .rc .settings:before{ background-size: 100% }
  #main .program .con01 ul li .wr .settings:before{ background-size: 100% }
  #main .program .con01 ul li .gr .settings:before{ background-size: 100% }
  #main .program .con01 ul li .voca .settings:before{ background-size: 100% }
  #main .program .con01 ul li .lc .settings:before{ background-size: 100% }
  #main .program .con01 ul li .sp .settings:before{ background-size: 100% }
  #main .program .con01 ul li .rc .settings:after{ width: 100%; height: 100%; padding-top: 40px; font-size: 20px;}
  #main .program .con01 ul li .wr .settings:after{ width: 100%; height: 100%; padding-top: 40px; font-size: 20px;}
  #main .program .con01 ul li .gr .settings:after{ width: 100%; height: 100%; padding-top: 40px; font-size: 20px;}
  #main .program .con01 ul li .voca .settings:after{ width: 100%; height: 100%; padding-top: 40px; font-size: 20px;}
  #main .program .con01 ul li .lc .settings:after{ width: 100%; height: 100%; padding-top: 40px; font-size: 20px;}
  #main .program .con01 ul li .sp .settings:after{ width: 100%; height: 100%; padding-top: 40px; font-size: 20px;}
  #main .program .con01 ul li .sp ul{ padding-top: 15px; }
  #main .program .tab_n ul li button{ height: 70px; letter-spacing: -15px; }
  #main .program .tab_n ul li strong{ font-size: 14px; line-height: 20px; }
  /* #main .program .con01 ul li .rc .settings:after{ width: 100px; height: 100px; } */

  #ft .inner .f_logo{ float: none; margin-right: 0; text-align: center; }
  #ft .inner .right_con{ float: none; text-align: center; padding-top: 15px; }
  #ft .inner .right_con nav ul li{ float: none; display: inline-block; }
  #ft .inner .sns{ position: static; }
  #ft .inner .sns ul li{ float: none; display: inline-block; margin-left: 0; margin: 0 5px; margin-top: 20px; }
  #ft{ padding: 30px 0;  }


  #main .insta .inner a .text_box{ float: none; width: 100%; padding: 0 50px; margin-bottom: 40px; }
  #main .insta .inner a .go_box{ float: none; width: 100%; padding: 0 50px; }
}

@media (max-width: 900px){
#main .campus .kwicks li .txt{ width: 400px; padding-right: 20px; }
#main .campus .kwicks li .txt p span{ display: block; }

}

@media (max-width: 880px){
  #main .in_kra .massage ul li{ float: none; width: 100%; }
  #main .in_kra .massage ul li .img_box:nth-child(1) img{ max-width: 486px; }
  #main .in_kra .massage:before{ height: 500px;}
  #main .in_kra .massage ul li:nth-child(2){ margin-top: 0px; position: relative;  }
  #main .in_kra.on .massage:before{ width: 90% }
  #main .in_kra .massage ul li .img_box:nth-child(2) img{ max-width: 384px; }
  #main .in_kra .massage ul li .img_box:nth-child(2){ float: left; width: 50%; }
  #main .in_kra.on .massage ul li:nth-child(2) .text_box{ float: right; width: 50%; }
  #main .in_kra .massage ul li:nth-child(2){ padding-left: 0; }
  #main .in_kra .massage ul li:nth-child(2) .text_box:after{ display: none; }
  #main .in_kra .massage ul li:nth-child(1) .text_box em:after{ display: none; }
  #main .in_kra .massage ul li:nth-child(1) .text_box{ padding-top: 10px; }
  #main .in_kra .massage ul li:nth-child(1) .img_box{ text-align: right; }
  #main .in_kra.on .massage ul li:nth-child(1) .text_box{ margin-top: -40px; }
  #main .in_kra{ padding-bottom: 50px; }
  #main .high .title > p{ font-size: 15px; line-height: 25px; }
  #main .middle .inner > ul > li .grade_02 .grade02_ul li:after{ display: none; }
  .main_visual .main_slider .slide_box .box3 .inner:before{ width: 200px; height: 46px; background-size: 100%; left: 18%; top: 35%; }
  .main_visual .main_slider .slide_box .box3 .inner:after{ left: auto; right: -70%;  width: 400px; height: 203px; }
	#main .in_kra .massage:before{top: 10%; height: 46%}
}

@media (max-width: 800px){
  #main .m_notice .inner > .notice_box{ float: none; width: 100%; margin-right: 0; margin-bottom: 30px; }
  .main_visual .main_slider .slide_box > div.on .blue_box{ width: 370px; }
  .main_visual .main_slider .slide_box > div .blue_box { height: 700px; }
  .main_visual .main_slider .slide_box > .box strong{ font-size: 52px; line-height: 52px; }
  .main_visual .main_slider .slide_box > .box span{ margin-bottom: 30px; }
  .main_visual .main_slider .slide_box > .box em{ font-size: 24px; }
  .main_visual .main_slider .slide_box .box p{ font-size: 15px; line-height: 27px; }
  #main .program.on .con01 > ul > li .lc{ right: auto; left: 520px;  top: 30px;}
  #main .program .con01 ul li .lc ul{ padding-top: 10px; }
  #main .program .pro_con{ max-width: auto; }
  #main .title > em{ font-size: 14px; margin-bottom: 10px;}
  #main .title > strong{ font-size: 22px; line-height: 32px; }
#main .program.on:before{ width: 200px; }
#main .middle{ padding-top: 50px; padding-bottom: 50px; }
#main .middle .inner > ul > li .grade_01 .graph .left_l dl{ width: 48.5%; margin-bottom: 20px !important; }
#main .middle .inner > ul > li .grade_01 .graph .left_l dl dd{ min-height: 160px; display: block; }
#main .middle .inner > ul > li .grade_01 .graph .test span{ font-size: 16px; }
#main .middle .inner > ul > li .grade_01 .graph .toefl span{ font-size: 16px; }
#main .middle .inner > ul > li .grade_01 .graph .toefl{ width: 65px; height: 65px; }
#main .middle .inner > ul > li .grade_01 .graph .test{ width: 65px; height: 65px; }
#main .middle .inner > ul > li .grade_01 .graph .wrap:before{ top: -70px; }
#main .middle .inner > ul > li .grade_01 .graph .left_l{ padding: 0; }
#main .middle .inner > ul > li .grade_01 .graph .left_l dl:last-child{ float: left; }
#main .middle .inner > ul > li .grade_01 .graph{ padding-bottom: 0;}
}


@media (max-width: 700px){
  #main .campus .pc{ display: none; }
  #main .campus .mobile{ display: block; }
  #main .in_kra .m_title i img{ width: 160px; }
  #main .in_kra .m_title strong{ font-size: 15px; line-height: 27px; }
  #main .program .con01 > ul > li{ width: 50%; min-height: 140px;  }
  #main .program.on .con01 > ul > li > div{ position: static !important; }
  #main .program .con01 ul li > div ul{ float: left !important; text-align: left !important;}
  #main .program .con01 ul li > div .settings{ float: left !important;  }

  #main .program.on .con01 > ul > li .voca ul{ float: right !important; width: 69%; }
  #main .program .con01{ min-height: auto;  }
  #main .program .pro_con{ transform: scale(1); padding-top: 20px; }
  #main .program .con01 ul li .rc .settings:after{ width: 70px; height: 70px; padding-top: 27px; font-size: 16px; }
  #main .program .con01 ul li .wr .settings:after{ width: 70px; height: 70px; padding-top: 27px; font-size: 16px; }
  #main .program .con01 ul li .gr .settings:after{ width: 70px; height: 70px; padding-top: 27px; font-size: 16px; }
  #main .program .con01 ul li .voca .settings:after{ width: 70px; height: 70px; padding-top: 27px; font-size: 16px; }
  #main .program .con01 ul li .lc .settings:after{ width: 70px; height: 70px; padding-top: 27px; font-size: 16px; }
  #main .program .con01 ul li .sp .settings:after{ width: 70px; height: 70px; padding-top: 27px; font-size: 16px; }
  #main .program .con01 ul li .rc .settings{ width: 70px; height: 70px; }
  #main .program .con01 ul li .wr .settings{ width: 70px; height: 70px; }
  #main .program .con01 ul li .gr .settings{ width: 70px; height: 70px; }
  #main .program .con01 ul li .voca .settings{ width: 70px; height: 70px; }
  #main .program .con01 ul li .lc .settings{ width: 70px; height: 70px; }
  #main .program .con01 ul li .sp .settings{ width: 70px; height: 70px; }
  #main .middle .inner > ul > li button{ font-size: 15px; height: 60px; }
  #main .middle .inner > ul > li button i{ right: 20px; top: 23px; width: 15px; height: 9px; background-size: auto 100% !important; }
  #ft .inner .right_con address{ font-size: 12px; word-break: keep-all; line-height: 24px; }

  #ft .inner .right_con nav ul li a{ font-size: 13px; }
  #main .high .map_img{ transform: scale(0.8);}
  #main .high .title > p{ margin-bottom: 0; }
}


@media (max-width: 600px){
  #main .in_kra .massage ul li .img_box:nth-child(2){ width: auto; position: absolute; right: 0; top: 0; text-align: right; }
  #main .in_kra .massage ul li .img_box:nth-child(2) img{ max-width: 260px; }
  #main .in_kra.on .massage ul li:nth-child(2) .text_box{ width: 100%; }
  #main .in_kra .massage ul li:nth-child(2) .text_box{ padding-bottom: 0; padding-top: 160px; }
  #main .program{ margin-top: 0; }

  #main .program .tab_n ul li button{ padding-left: 10px;}
  #main .program .tab_n ul li:nth-child(1) button i{ width: 20px; height: 21px; background-size: auto 100%; }
  #main .program .con01{ background-size: 80%; background-position: center center; }
  #main .program .tab_n ul li:nth-child(1) button i{ position: relative; top: -5px;  }
  #main .program .tab_n ul li:nth-child(2) button i{ position: relative; top: -5px; width: 20px; height: 22px; background-size: auto 100%; }
  #main .program .tab_n ul li:nth-child(3) button i{ position: relative; top: 2px; width: 20px; height: 20px; background-size: auto 100%; }
  #main .program{ padding: 40px 0; }
  #main .program .con03 ul li img{ width: 160px; }
  #main .program .con03 ul li:nth-child(4) img{ width: 200px; }
  #main .program .con03.on ul li:nth-child(2){ top: 50px; }
  #main .program .con03 ul li:nth-child(2){ top: 80px; }
  #main .program .con03 ul li:nth-child(4){ top: 50px; }
  #main .program .con03.on ul li:nth-child(4){ top: 20px; }
  #main .program .con03{ padding-bottom: 50px; }
  #main .program .con01 ul li .rc ul li{ font-size: 12px; line-height: 22px;}
  #main .program .con01 ul li .wr ul li{ font-size: 12px; line-height: 22px;}
  #main .program .con01 ul li .gr ul li{ font-size: 12px; line-height: 22px;}
  #main .program .con01 ul li .voca ul li{ font-size: 12px; line-height: 22px;}
  #main .program .con01 ul li .lc ul li{ font-size: 12px; line-height: 22px;}
  #main .program .con01 ul li .sp ul li{ font-size: 12px; line-height: 22px;}
  #main .middle .inner > ul > li .grade_02 .depth p i img{ width: 40px; }
  #main .middle .inner > ul > li .grade_02 .depth p span{ width: 50px; height: 27px; line-height: 27px; }
  #main .program .tab_n ul li button strong{ display: block; text-align: center; min-height: 40px; }
  #main .program .tab_n ul li button{ padding-left: 0; height: 100px; }
  #main .program .tab_n ul li:nth-child(3) strong{ top: 0;  }
  #main .program .tab_n ul li:nth-child(3) button i{ top: -5px;  }
  #main .program .tab_n ul li button{ text-align: center; }
  #main .program .tab_n ul li button i{ display: block !important; margin: 0 auto !important; }

  #hd_wrapper{ height: 50px;  }
  #logo{ top: 14px; left: 15px; }
  #logo a img{ height: 25px; }
  #gnb .gnb_menu_btn {width:50px; height: 50px;}
  #gnb .gnb_menu_btn img{ width: 25px; }
  #main{ margin-top: 50px; }
  .main_visual{ max-height: 500px; height: 500px; }
  .main_visual .main_slider .slide_box > div .blue_box{ height: 500px; }
  .main_visual .main_slider .slide_box > .box strong{ font-size: 38px; line-height: 38px; }
  .main_visual .main_slider .slide_box > .box em{ font-size: 18px; margin-bottom: 20px; }
  .main_visual .main_slider .slide_box .box p{ font-size: 13px; line-height: 23px; word-break: keep-all; }
  .main_visual .main_slider .slide_box > div.on .blue_box { width: 250px;  }
  #main .high{ padding: 40px 20px; }
  #main .high .title > p{ font-size: 12px; line-height: 20px; word-break: keep-all; }
  #main .in_kra .m_title strong{ font-size: 12px; line-height: 20px; word-break: keep-all; }

  .main_visual .main_slider .slide_box .box3 .inner .history{ transform: scale(0.75); top: -100px;  }
  .main_visual .main_slider .slide_box .box3 .history .year_box{ min-height: 500px; }
  .main_visual .main_slider .slide_box .box3 .history .year_w .box01 strong{ font-size: 30px; }
  .main_visual .main_slider .slide_box .box3 .history .y_2020 strong { font-size: 30px; }
  .main_visual .main_slider .slide_box .box3 .history .y_2007{ top: 8%; }
  .main_visual .main_slider .slide_box .box3 .history .y_2020{ top: 11%; }
  .main_visual .main_slider .slide_box .box3.on .history .y_2020{ top: 14%; }
  .main_visual .main_slider .slide_box .box3.on .history .y_2007{ top: 11%; }

  .main_visual .main_slider .slide_box .box3 .history .y_2017 strong{ font-size: 30px; }
  .main_visual .main_slider .slide_box .box3 .history .y_2017:before{ top: 35px;  }
  .main_visual .wrap_btn{ width: 110px; height: 50px;  }
  .main_visual .wrap_btn .pag{ display: none; }
  .main_visual .wrap_btn .wrap{ width: 100%; }
  .main_visual .wrap_btn .wrap > button.slick-prev{ top: 18px; }
  .main_visual .wrap_btn .wrap > button.slick-next{ top: 18px; }
  #top_btn{ bottom: 20px; right: 20px; transform: scale(0.8); z-index: 50; }
  #main .in_kra .massage ul li .img_box img{ box-shadow: 5px 5px 12px rgba(28,30,35,0.15); }
  #main .in_kra .massage ul li:nth-child(1) .text_box{ padding-top: 25px; }
  #main .coach .inner .title > p b{ font-size: 16px; line-height: 22px; }
  #main .coach .inner .title > p{ font-size: 13px; line-height: 25px; margin-top: 20px; }
  #main .program .tab_n{ margin-top: 20px; }
  #main .middle .inner{ margin-top: 20px; }
  #main .coach .inner .title{ padding-top: 0; }
  #main .campus{ padding-top: 40px;}
  #main .campus .inner{ padding-top: 20px; }
  #main .campus{ padding-bottom: 20px; }
  #main .m_notice .title{ margin-bottom: 20px; }
  #main .m_notice{ padding-bottom: 50px; }
  #main .program .tab_n ul li:nth-child(3) button strong{ line-height: 40px; }

  #main .high .map_wrap{ padding: 0; }
  #main .high .map_img{ transform: scale(0.9); margin-top: 20px; }
  #main .high .map_img > div.jamsil{ left: 77%; }
  #main .high .map_img > div.apgujeong{ left: 60%; }
  #main .high .map_img > div.seocho{ left: 53%; }
  #main .high .map_img > div.bundang{ top: 105%; left: 70%; }
  #main .high .map_img > img{ width: 100%; }
  #main .high .map_img > div.seongdong{ left: 60%;  }

  .thum_wrap{ display: none; }

  #main .new_notice ul li .tit_b strong{ font-size: 16px; }
  #main .new_notice ul li .text_box strong{ font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #main .new_notice ul li .text_box span{ font-size: 12px; }
  #main .new_notice ul li a{ line-height: 40px; }
  #main .insta .inner a .text_box strong{ font-size: 18px;}
  #main .insta .inner a .text_box p{ font-size: 12px; }
  #main .insta .inner a .text_box{ padding: 0 30px; }
  #main .insta .inner a .go_box{ padding: 0 30px; }
  #main .insta .inner a:hover .go_box button{ transform: translate(10px,0); }
}

@media (max-width: 540px){
#main .middle .inner > ul > li .grade_02 .grade02_ul li{ width: 32.3333333%; margin-bottom: 20px; }
#main .middle .inner > ul > li .grade_02{ padding: 30px 0; }
#main .program .con01 ul li .rc .settings{ display: block; float: none !important; margin: 0 auto !important; }
#main .program .con01 ul li .wr .settings{ display: block; float: none !important; margin: 0 auto !important; }
#main .program .con01 ul li .gr .settings{ display: block; float: none !important; margin: 0 auto !important; }
#main .program .con01 ul li .lc .settings{ display: block; float: none !important; margin: 0 auto !important; }
#main .program .con01 ul li .voca .settings{ display: block; float: none !important; margin: 0 auto !important; }
#main .program .con01 ul li .sp .settings{ display: block; float: none !important; margin: 0 auto !important; }
#main .program .con01 ul li .rc ul{ width: 100%; float: none !important; }
#main .program .con01 ul li .wr ul{ width: 100%; float: none !important; }
#main .program .con01 ul li .gr ul{ width: 100%; float: none !important; }
#main .program .con01 ul li .voca ul{ width: 100%; float: none !important; }
#main .program .con01 ul li .lc ul{ width: 100%; float: none !important; }
#main .program .con01 ul li .sp ul{ width: 100%; float: none !important; }
#main .program.on .con01 > ul > li .voca ul{ width: 100% !important; float: none !important;  }
#main .program .con01 ul li .rc ul li{ text-align: center; }
#main .program .con01 ul li .wr ul li{ text-align: center; }
#main .program .con01 ul li .gr ul li{ text-align: center; }
#main .program .con01 ul li .rc ul li{ text-align: center; }
#main .program .con01 ul li .rc ul li{ text-align: center; }
#main .program .con01 ul li .rc ul li{ text-align: center; }
.main_visual .main_slider .slide_box .box3 .inner{ padding-left: 60px; }
#ft .inner .f_logo img{ width: 120px;  }
#ft .inner .right_con nav ul li{ padding: 0 5px; }
#ft .inner .right_con nav ul li a{ font-size: 12px; }
#main .middle .inner > ul > li .grade_01 .graph{ padding-top: 70px; }
#main .middle .inner > ul > li .grade_01{ min-height: auto; }
#main .middle .inner > ul > li .grade_02 .grade02_ul{ padding: 20px; }
#main .middle .inner > ul > li .grade_02 .grade02_ul li:nth-child(4), #main .middle .inner > ul > li .grade_02 .grade02_ul li:nth-child(5), #main .middle .inner > ul > li .grade_02 .grade02_ul li:nth-child(6){ margin-bottom: 0; }
#main .program .con01 ul li .voca .settings{ position: absolute; left: 0; right: 0; margin: 0 auto; top: 0; }
#main .program.on .con01 > ul > li .voca{ position: relative !important;  left: auto !important; top: 0 !important; }
#main .program.on .con01 > ul > li .voca ul{ padding-top: 90px; text-align: center; }
#main .program .con01 ul li .voca ul li{ text-align: center; }
#main .program .con01 ul li .lc ul li{ text-align: center; }
#main .program .con01 ul li .lc ul{ padding-left: 0; }
#main .program .con01 ul li .sp ul li{ text-align: center; }
#main .program .con01 ul li .sp ul{ padding-left: 0; }
#main .program .con01 ul li .rc ul{ padding-left: 0; }
#main .program .con01 > ul > li{ margin-bottom: 20px; }
#main .program .con01 ul li .voca{ top: 0 !important; }
#main .program .con01 > ul > li:nth-child(5), #main .program .con01 > ul > li:nth-child(6){ margin-bottom: 0; }
#main .new_notice{ padding-bottom: 0; }
#main .insta .inner a .text_box p{ line-height: 24px; word-break: keep-all; }
#main .insta .inner a .go_box strong{ font-size: 13px; }
}

@media (max-width: 540px){
  #main .campus{ padding-bottom: 50px; }
    .mbskin{width: 100%;margin-top: 80px;}
}
@media (max-width: 540px){
  #main .campus .mobile li .txt{ width: auto; padding-right: 20px; left: 10px;  }
  #main .campus .mobile li .txt{ padding: 10px;background: linear-gradient( 128deg, #485d8a, #2a3c62 ); border-radius: 10px 10px 0 0; }
  #main .campus .mobile li .txt h2{ color: #fff; margin-bottom: 0;  font-size: 16px; }
  #main .campus .mobile li .txt p{ display: none; }
  #main .campus .mobile li .txt em{ display: none; }
  #main .m_notice .inner > .notice_box ul li a{ font-size: 13px; }
  m_notice .inner > .notice{ font-size: 12px; }
    #mb_login legend{font-size: 30px;}
    #mb_login #login_fs .btn_submit,#mb_login #login_fs .join{font-size: 14px !important;line-height: 40px; }
}

@media (max-width: 414px){
/*  #main .in_kra{ max-height: 1179px; }*/
  #main .in_kra .massage ul li:nth-child(1) .text_box{ padding-left: 20px; }
  #main .in_kra .massage ul li .text_box strong{ font-size: 22px; margin-bottom: 15px; }
  #main .in_kra .massage ul li .text_box em{ font-size: 15px; }
  #main .in_kra .massage ul li .text_box p{ font-size: 12px; line-height: 23px;}
/*  #main .in_kra .massage:before{ height: 400px;  }*/
  #main .in_kra .massage ul li .text_box span{ font-size: 12px; margin-top: 10px; }
  #main .in_kra .m_title{ margin-bottom: 20px; }
  #main .in_kra .massage ul li .img_box:nth-child(2) img{ max-width: 220px; }
  #main .program .tab_n ul li button strong{ font-size: 12px; }
  #main .campus .mobile li .txt h2{ font-size: 13px; }
  #main .m_notice .inner > .notice_box > strong{ font-size: 16px; padding: 15px; }
  #main .m_notice .inner > .notice_box ul li span{ font-size: 12px; top: 18px; }
  #main .high .text_b li dt{ font-size: 15px; }
  #main .high .text_b li dd{ font-size: 12px; line-height: 24px; }
  #main .high .text_b li{ min-height: 156px; }
  #main .high .map_img > div{ text-indent: -999em; }
  #main .high .map_img > div br{ display: none; }
  #main .high .map_img > div.seongdong{ left: 64%; top: 52%; }
  #main .high .map_img > div.jamsil{ left: 79%; }
  #main .high .map_img > div.apgujeong{ left: 64%; top: 67%; }
  #main .high .map_img > div.seocho{ left: 55%; top: 73%; }
  #main .high .map_img > div.bundang{ left: 85%;  }
  #main .high .text_b{  margin-top: 40px; }
  #main .high .text_b li{ padding: 20px; min-height: 141px; }
  #gnb_all{ width: 80%; right: -80%; z-index: 2020; }
  #logo{ z-index: 0; }
  #gnb_all .gnb_al_li li a{ font-size: 13px; line-height: 27px; }

}

@media (max-width: 375px){
  #ft .inner .right_con nav ul li a{ font-size: 10px; }
  #ft .inner .right_con address{ font-size: 11px; line-height: 20px;}
  .main_visual .main_slider .slide_box > .box strong{ font-size: 28px; line-height: 28px; }
  .main_visual .main_slider .slide_box > .box span{ font-size: 16px; margin-bottom: 20px; }
  .main_visual .main_slider .slide_box > .box em{ font-size: 16px; }
  .main_visual .main_slider .slide_box .box p{ font-size: 12px; line-height: 20px; }
  .main_visual .main_slider .slide_box > div.on .blue_box{ width: 170px; }
  .main_visual .main_slider .slide_box .box3 .inner{ padding-left: 0; }
  .main_visual .main_slider .slide_box .box3 .inner{ padding-right: 0; }


}


@media (max-width: 370px){
    #main .middle .inner > ul > li .grade_01 .graph .left_l dl dd{ font-size: 12px; }
    #main .middle .inner > ul > li button{ font-size: 13px; text-align: left; padding-left: 12px; }
    #main .program .con01 ul li .rc ul li{ font-size: 11px ;}
}

@media (max-width: 360px){
  #main{ min-width: 360px; }
}