@charset "utf-8";

/* 가운데 영역 */
.container {position: relative; width: 1200px; margin: 0 auto; }

/* 로우 영역 */
.row {padding: 0 24px;}

/* 모바일 메뉴 */
#mNav { }
.mNav .toggle { display: none;  position: absolute; top: 13px; right: 24px;}
.mNav .toggle i { font-size: 25px; color:#999; line-height: 30px;}
.m_menu {
  display: none;
  position: absolute; top:50px; right: 0;
  width:300px; background: #fff;
}
.m_menu .munu {}
.m_menu .munu p {font-size: 14px; padding: 2px 5px; box-sizing: border-box; background: #222; color:#fff;}
.m_menu .munu ul { }
.m_menu .munu ul li {width:50%; font-size: 12px; padding: 3px 18px; box-sizing: border-box;}
.m_menu:last-child { padding-bottom: 20px;}


/* 헤더 영역 */
#header {position: fixed; left: 0; top: 0; z-index: 9999; width: 100%;  border-bottom: 1px solid #222;}

/* 헤더 탑영역 */
.header_top { height: 40px; border-bottom: 1px solid #141212;background: #fff;}
.header_top .h_top {margin: 0 auto; width: 333px;}

.header_menu {text-align: right; padding-right: 24px; background: #fff; }
.header_menu a {color: #222; padding: 8px 0 6px 10px; display: inline-block; transition: color 0.3s ease; font-family: 'Abel', sans-serif;}
.header_menu a:hover {color: #ccc;}
.header { background: #fff; }
.header h1 {font-size: 0;} /* 헤더여백없애기 */
.header h1 em {padding: 9px 4px 5px 0; display: inline-block;}
.header h1 em img {width: 240px;}

.header .nav ul { display: flex; justify-content: center; align-items: center;}
.header .nav ul li{position: relative; text-align: center; float: left; width: 14%;}
.header .nav ul li a{transition: all 0.4s ease; display: block; padding: 4px 0px 7px 0px; font-size: 18px; font-weight: bold; font-family: nanum cursive; color: #000;}

.header .nav ul li ul.submenu{ border:1px solid #c6c6c6; box-sizing: border-box;
  border:0px; background: #fff; display: none; position: absolute; left:0; top:37px; margin-top: 0px; width: 100%; padding-left: 0%;}
.header .nav ul li ul.submenu li {width: 100%; border-bottom:1px dotted #222;}
.header .nav ul li ul.submenu li:last-child {border-bottom:0;}
.header .nav ul li ul.submenu li a {font-size: 14px;  padding: 12px 10px;}

/* 배너 */
#banner {position: relative; margin-top: 163px; }
.slider {width: 100%;}
.slider .swiper-slide .container {width:500px;}
.slider .ss1 {background: linear-gradient(90deg,#000033,#000000,#190019);}
.slider .ss2 {background: url(../img/main_bg02_bg.png) no-repeat center top; background-size: cover; }
.slider .ss3 {background: linear-gradient(90deg,#000033,#000000,#190019);}
.slider .ss4 {background: url(../img/main_bg02_bg.png) no-repeat center top; background-size: cover; }
.swiper-button-prev, .swiper-button-next {margin-top: -230px !important;}

/* 대학합격안내 */
#dae {position: relative; background: #f6f6f6; width:100%; border-bottom: 1px solid #d4d2d2; box-sizing: border-box; }
.dae .dae_left {width:50%;  float: left; border-right: 1px solid #d4d2d2; box-sizing: border-box;}
.dae .dae_left a {font-size: 0;}
.dae .dae_right {position: relative; width: 50%;float: right;}
.dae .dae_right a {font-size: 0;}
.dae .dae_right .motion {position: absolute; right: 20px; top:76px;}
.dae .dae_right .motion marquee h3 {display: inline; color:#216d7d; font-size: 20px; font-weight: 500;  padding-right: 30px;}
.dae .dae_right .motion marquee span {font-size: 16px; font-weight: 300; padding-right: 30px;}

/* help */
#help {padding-top: 100px;}
.help {overflow: hidden; width: 100%;}
.help article {float: left; width: 32%; margin-right: 2%;}
.help article h4 { font-size: 22px; padding-left: 6px;}
.help article.help_box3 {margin-right: 0;}

/*공지사항  help_box1*/
.help .help_box1 {position: relative;}
.help article.help_box1 .note01 { margin-top: 8px; padding: 8px; border: 1px solid #ccc; box-sizing: border-box;}

/*공지사항  help_box2*/
.help .help_box2 {position: relative;}
.help article.help_box2 .note02 { margin-top: 8px; padding: 8px; border: 1px solid #ccc; box-sizing: border-box;}

/*학원소식  help_box3*/
.help .help_box3 {position: relative;}
.help article.help_box3 .note03 { margin-top: 8px; padding: 8px; border: 1px solid #ccc; box-sizing: border-box;}

/*최신글 공통*/
.lat .lat_title {display: none;}
.lat .lt_more {display: none;}
.lat .basic_li {border-bottom: 1px dotted #ccc; padding: 5px 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis !important;}
.lat .basic_li:last-child {border-bottom:0;}
.lat .basic_li .new_icon {display: none;}
.lat .basic_li .lt_info {display: none;}
.lat .basic_li .sound_only {display: none;}

/* 포인트 커리큐럼 */
.point {display: none;}
.point img { width: 100%; display: block;}

/* 커리큐럼 */
#culri {margin-top: 100px; padding-bottom: 50px;}
.culri h4 { font-size: 24px; font-weight: 700; display:block; padding: 0 8px 24px;}
.culri ul {display: flex; justify-content: center;}
.culri ul li {width: 23%; margin-right: 1%; float: left; padding: 12px; box-sizing:border-box; transition: all .34s ease; border:1px solid #ccc;}
.culri ul li:nth-child(4) {margin-right: 0;}
.culri ul li a {font-size: 0;}
.culri ul li img {display: block;}
.culri ul li:hover {background: #222;}

/* list */
#list { width: 100%; overflow: hidden; padding-top: 50px; padding-bottom: 50px; background: #f0f5f5;}
#list h4 {font-size: 24px; font-weight: 700; display:block; padding: 0 8px 8px;}
.sam_list { float: left; width: 50%;  margin-right: 1%;}
.slick-prev {display: none !important;}
.slick-next {display: none !important;}

/* simple_list */
.simple_list {position: relative; float: left; width: 49%;  height: 100%;}
.simple_list .simple_box01 {
  background: linear-gradient(120deg,#11385f,#3782cb,#11385f);
  width:100%; margin-bottom: 20px;
}

.simple_list .simple_box01 ul {
  display: flex; justify-content: center; align-items: center;  height: 155px;
  text-align: center;
}
.simple_list .simple_box01 ul li {float: left; box-sizing: border-box; width: 16%;}
.simple_list .simple_box01 ul li img {
  width:78px; border-radius: 50%;
  box-shadow: 3px 3px 5px #222;
}
.simple_list .simple_box01 ul li span {color: #fff; font-size: 14px; padding-top: 8px; display: inline-block;}
.simple_list .simple_box02 {
  position: relative;
  background:url(/img/sic.jpg) no-repeat bottom center;
  background-size: cover;
  float: left; width: 48%; height: 140px;
}
.simple_list .simple_box02 h3 {
  color:#fff; font-size: 16px;  background: linear-gradient(120deg,#11385f,#3782cb,#11385f);
  border: 1px solid #fff;
  display: inline-block; padding: 5px 20px; transition: all .4s ease;
  position: absolute; top:50%; left: 50%;
  transform: translate(-50%,-50%);
}
.simple_list .simple_box02 h3 a {color: #fff;}
.simple_list .simple_box02 h3:hover { background: #fff; color: #000; border:1px solid #222;}
.simple_list .simple_box02 h3:hover a {color: #222;}

.simple_list .simple_box03 {
  position: relative;
  background:url(/img/mun.jpg) no-repeat bottom center;
  border: 1px solid #ccc; box-sizing:border-box;
  background-size: cover;
  float: right; width: 48%; height: 140px;
}
.simple_list .simple_box03 h3 {
  color:#fff; font-size: 16px; background: linear-gradient(120deg,#11385f,#3782cb,#11385f);
  border: 1px solid #fff;
  display: inline-block; padding: 5px 20px; transition: all .4s ease;
  position: absolute; top:50%; left: 50%;
  transform: translate(-50%,-50%);
}
.simple_list .simple_box03 h3 a {color: #fff;}

.simple_list .simple_box03 h3:hover { background: #fff; color: #000; border:1px solid #222;}
.simple_list .simple_box03 h3:hover a {color: #222;}

/* success*/
#success {padding-top: 100px;  z-index: 20px;}
#success h2 {font-size: 24px; font-weight: 700; display:block; padding: 0 8px 8px;}
#success .success_hap {
   padding: 20px 6px 20px 15px;
   box-sizing: border-box;
   width:100%; height: 100%;
   background:url(/img/sucess_bg.jpg);}
.name {position: relative; float: left; width:30%;}
.name ul li {width: 100%; position: relative; }
.name ul li p {color: #f3cb5e; font-size: 16px; }
.name ul li img { width:100px; position: absolute; right: 25px; top:0;}
.name ul li a {font-size: 14px; color:#ccc; margin-top: 20px; display: block;}

.success { float: left; width:70%; }
.success .success_logo {
  text-align: center;
  border: 4px double #f3cb5e; box-sizing: border-box;
  padding: 5px;
}
.success .success_logo ul li {
  display: inline-block; color:#fff; padding: 5px 0; width: 100%;
 font-size: 13px;
}
.success .success_logo ul li strong {font-size: 17px; color: #65a5e3;}
.success .success_logo ul li:first-child {margin-top: 10px; }
.success .success_logo h3 { color:#fff;}
.success img {width:90px; margin: 0 auto;}

/* 강의사진배너*/
#pic {padding-top: 100px;}
.pic01 {width: 100%; height: 300px;
  background: url(../img/ex01.jpg) no-repeat center top; background-size: cover;
}

.pic01 > div {
  display: flex; align-items: center; justify-content: center; height: 300px; }
.pic01 > div h2 {
  width: 300px;
  line-height: 2.4;
  background: linear-gradient(120deg,#11385f,#3782cb,#11385f);
  font-size: 16px; color: #fff;
  display: block;
  text-align: center;
  border: 1px solid #fff;
  padding: 14px;
  }

.pic02 {
  overflow: hidden;
  width: 100%; height: 300px;
  background: url(../img/ex02.jpg) no-repeat center top; background-size: cover;
}
.pic02 > div {display: flex; align-items: center; justify-content: center; height: 300px; }
.pic02 > div h2 {
  width: 300px;
  font-size: 18px; color: #000;
  display: block; background: #fff;
  text-align: center;
  border: 1px solid #39106a;
  padding: 14px;
  }


  /* 푸터 */
  #footer { background: #222; }
  .footer_sns {position: absolute; right: 17px; top: 33px; }
  .footer_sns ul { text-align: right; }
  .footer_sns li { display: inline-block; margin-right: 20px; }
  .footer_sns ul li a {color: #fff;}
  .footer_sns ul li a i {color: #fff; font-size:40px;}
  .footer_sns .tel {text-align: right; padding-top: 5px;}
  .footer_sns .tel a {color: #8f8f8f; font-size: 21px;}
  .footer_sns .tel a em {color: #fff;}

  .footer_infor {position: relative; padding: 50px 0; width: 80%;}
  .footer_infor h2 img {width:150px; opacity: .8;}
  .footer_infor ul {padding: 15px 0;}
  .footer_infor li {position: relative; display: inline; padding-right: 16px; white-space: nowrap;}
  .footer_infor li:after {content: ''; position: absolute; right: 5px; top: 5px; width: 1px; height: 11px; background: #8f8f8f;}
  .footer_infor li:last-child:after {width: 0; height: 0;}
  .footer_infor li a {color: #8f8f8f;}
  .footer_infor address p {color: #8f8f8f; padding-bottom: 15px;}


/* 미디어쿼리 */
@media (max-width: 1210px){
  .container {width: 100%;}
}
@media (max-width: 1024px){
 .motion {display: none;}
  #culri {padding-top: 70px;}
  #help {padding-top: 70px;}
  #pic {padding-top: 70px;}
  #list {padding-top: 70px;}
  #success {padding-top: 70px;}
  .simple_list .simple_box01 ul li img{width: 68px;}
  .simple_list .simple_box01 {margin-bottom: 4px;}
  .simple_list .simple_box02 { height: 100px;}
  .simple_list .simple_box03 { height: 100px;}
}

@media (max-width: 960px){

  .header_top {display: none;}
  #banner {margin-top: 86px;}
  /*모바일메뉴*/
  .mNav .toggle  {display: block;}
  .header .row {padding: 0 12px;}
  .header .nav ul {display: block;}
  .header .nav ul li {float: none; border-bottom: 1px solid #333; width: 100%;}
  .header .nav { background: #222; width: 100%; display: none;}
  .header .nav ul li a {font-size: 16px; font-weight: 100; text-align: left; color:#fff; padding: 20px 12px;}
  .header .nav ul li ul.submenu {position: relative; top:0;}
  .header .nav ul li ul.submenu li {float: left; width: 100%; }
  .header .nav ul li ul.submenu li a { color:#222;}
  .header .nav ul li ul.submenu li a:hover{background: #f2f2f2; }

  .culri ul li {padding: 12px;}

  .swiper-button-prev, .swiper-button-next {display: none !important;}
  .help article h4 {font-size: 16px;} /*최근게시글*/
  /*
  .dae .dae_left {float: none; width: 100%; border-right: 0; border-bottom:1px solid #ccc;}
  .dae .dae_right {float: none; width: 100%;}*/
  .help h4 {padding-bottom: 4px;}
  .simple_list .simple_box01 {margin-bottom: 12px;}
  .simple_list .simple_box02 {height: 85px;}
  .simple_list .simple_box03 {height: 85px;}
  .simple_list .simple_box02 h3 {font-size: 14px; padding: 5px 15px;}
  .simple_list .simple_box03 h3 {font-size: 14px; padding: 5px 15px}

  .footer_sns {position: static; text-align: center; background: #352c2c; padding: 15px 0;}
  .footer_sns .tel {display: none;}
  .footer_infor {width: 100%; text-align: center;}

}

@media (max-width: 768px){
  body {background: #d9d7e0;}
  .banner_menu { display: none;}
  .slider .swiper-slide .container {width: 420px;}
  #help {background: #fff; padding: 30px 0;}
  .help .help_box1 {padding: 0px;}
  .help h4 {font-size: 18px; }
  .help article.help_box1 .note01 { padding: 4px 0;}
  .help article.help_box1 .note01 .list li:last-child {border-bottom: 0px;}
  #culri {background: #fff;  padding: 30px 0; margin-top: 12px;}
  .culri h4 { font-size: 20px;}
  .culri ul { display: block;}
  .culri ul li {width:48%;}
  .culri ul li:nth-child(2) {margin-right: 0;}
  .culri ul li:nth-child(3) {margin-top: 12px;}
  .culri ul li:nth-child(4) {margin-top: 12px; margin-right: 0;}

  #pic {background: #fff;  padding: 30px 0; margin-top: 12px;}
  .pic01 > div h2 {width: 260px;}
  .pic02 > div h2 {width: 260px;}
  .pic01 strong {left: 130px;}
  .pic02 strong {left: 130px;}
  #list {background: #fff;  padding: 30px 0; margin-top: 12px;}
  #list h4 {font-size: 20px;}
  .sam_list {width: 100%;}
  .simple_list {width: 100%;}
  .simple_list .simple_box01 ul li  { width: 15%;}

  .simple_list .simple_box02 h3 {padding: 5px 30px;}
  .simple_list .simple_box03 h3 {padding: 5px 30px}
  #success {background: #fff;  padding: 30px 0; margin-top: 12px;}
  #success h2 {font-size: 20px;}
  .name ul li p {font-size: 14px;}
  .success .success_logo ul li {padding: 2px 0;}

}

@media (max-width: 600px){
  .row {padding: 0 12px;}
  .swiper-button-prev {display: none;}
  .swiper-button-next {display: none;}
  .banner_menu .bm {display: none;}
   .info h3 { font-size: 35px; letter-spacing: 1px;}
   .help article {float: none; width: 100%; margin-bottom: 30px;}
   .swiper-pagination-bullet {width: 13px !important; height: 13px !important;}
   .pic01 strong {left: 60px; font-weight: 100;}
   .pic02 strong {left: 60px; font-weight: 100;}
   .simple_list .simple_box01 ul li span {font-size: 14px;}

   #list h4 {font-size: 18px;}
   #success h2 {font-size: 18px;}

   .culri h4 {font-size: 18px;}
   .name ul li p {display: none;}
   .name ul li a {margin-top: 0px;}
   .name ul li img {width: 90px; right:14px; top:23px;}
}

@media (max-width: 480px){
  .slider .swiper-slide .container {width: 330px;}
  .header h1 em {padding: 14px 0px 0px 0;}
  .header h1 em img {width: 180px;  padding: 8px;}
  .header .nav ul li a {font-size: 14px;padding: 10px 12px;}
  .header .nav ul li ul.submenu li a {font-size: 12px;}
  #banner {margin-top: 91px;}
  .help article.help_box1 .note01 {margin-top: 0;}
  .help article.help_box2 .note02 {margin-top: 0;}
  .help article.help_box3 .note03 {margin-top: 0;}
  .dae .dae_right {width:100%; border-top: 1px solid #ccc;}
  .dae .dae_left {width:100%; border-right:0;}
  #help { padding: 20px 0;}
  .help h4 {font-size: 16px; padding-bottom: 3px;}
  .pic02 > div h2 {font-size: 14px;}
  .pic01 > div h2 {font-size: 14px;}
  .point img {margin-top: 12px;}
  #culri {padding: 20px 0; display: none;}
  #list { padding: 20px 0;}
  #list h4 {font-size: 20px;}
  #success {padding: 20px 0;}
  #success h2 {font-size: 20px;}
  .culri h4 {font-size: 20px;}
  .point {display: block;}
  .point img { display: block;}

  .simple_list .simple_box01 ul {display: block; height: 113px; padding-top: 10px;}
  .simple_list .simple_box01 ul li  { width:33.333%; vertical-align: middle; padding-top: 6px;}
  .simple_list .simple_box01 ul li span {padding-top: 2px; font-size: 12px; margin-left: 2px;}
  .simple_list .simple_box01 ul li img { width: 43px; vertical-align: middle;}
  .simple_list .simple_box02 {width:100%; margin-bottom: 12px; height: 60px;}
  .simple_list .simple_box03 {width:100%; height: 60px;}
  .simple_list .simple_box02 h3 { font-weight:100; padding: 5px 18px;}
  .simple_list .simple_box03 h3 { font-weight:100; padding: 5px 18px;}
  #pic {padding-top: 20px; padding-bottom: 0;}
}

@media (max-width: 320px){
.slider .swiper-slide .container {width: 284px;}
  #help {padding: 10px 0;}
  .help h4 {font-size: 14px;}
  .help article.help_box1 .note01 .list li a {font-size: 13px;}
  #culri {padding: 10px 0;}
  .pic01 > div h2 {width: 170px; font-size: 13px; padding: 5px;}
  .pic02 > div h2 {width: 170px; font-size: 13px; padding: 5px;}
  .pic01 { height: 245px;}
  .pic02 { height: 245px; margin-top: 12px;}
  .pic01 > div {height: 245px;}
  .pic02 > div {height: 245px;}
  .pic01 strong {font-size: 11px; left: 17px;}
  .pic02 strong {font-size: 11px; left: 17px;}
  #list { padding: 10px 0;}
  .simple_list .simple_box01 ul li img { width: 39px;}
  .simple_list .simple_box01 ul li span { font-size: 10px;}
  #success {padding: 10px 0;}
  .name ul li img {width: 85px; right:4px;}
  .success .success_logo ul li {font-size: 12px; }


}