@charset "utf-8";

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

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

/* 학원소개 메인상단*/
#hello_top { width: 100%; height: 400px; background: url(../img/bg_02.jpg) no-repeat center top; background-size: cover; margin-top: 163px; }
.hello_01 {
  float: left;
  width:20%; height: 400px;
  background: rgba(0, 0, 0, 0.4);
}
.hello_01 ul { text-align: right; margin-top: 57px; }
.hello_01 ul li { padding: 14px 20px; border-bottom: 1px dotted #c6c6c6;}
.hello_01 ul li a { position: relative; font-size: 15px; font-weight: 300; display: inline-block; padding-right: 5px; color:#fff;}
.hello_01 ul li a:after {
  content: '';
  position: absolute; top:20%; right: -10px;
  width:1px; height: 20px; background: #fff;
}
.hello_02 {float: right; width: 60%; margin-top: 100px;}

  /* 슬릭 배너 */
  .ban {position: relative; padding: 24px 0 60px;}
  .ban .slick-prev {position: absolute; left: -70px; top: 80px; width: 43px; height: 43px; background: url(img/icon.png) -150px 0; text-indent: -9999px;}
  .ban .slick-next {position: absolute; right: -70px; top: 80px; width: 43px; height: 43px; background: url(img/icon.png) -150px -43px; text-indent: -9999px;}
  .ban .slick-prev:hover {background-position: -193px 0;}
  .ban .slick-next:hover {background-position: -193px -43px;}
  .ban img {border: 4px solid #dcdcdc; width: 100%; box-sizing: border-box;}
  .ban img:hover {border-color: #98bcdc;}
  .slick-slide {margin: 10px;}
  .slick-dots{position: absolute; bottom: 15px; display: block; width: 100%; text-align: center;}
  .slick-dots li{position: relative; display: inline-block; width: 15px; height: 15px; margin: 5px;}
  .slick-dots li button {font-size: 0; line-height: 0; display: block; width: 15px; height: 15px; cursor: pointer; background: #5dbfeb; border-radius: 50%;}
  .slick-dots li.slick-active button {background: #2B91C8;}



  /* 메인01*/
#main_01 {background: #f4f4f4; padding: 60px 0; }
#main_01 h2 { text-align: center; font-size: 24px; padding-top:30px; font-weight: bold;}
.textbox_01 {padding: 40px 0;}
.textbox_01 p {font-size: 16px;}
.textbox_01 p strong{font-size: 17px; color: #263d4d;}
.main_01 {}
.main_01 .imgs {}
.main_01 .imgs ul {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main_01 .imgs ul li { width:30%;  float: left; margin-right: 2%;}
.main_01 .imgs ul li:last-child{ margin-right: 0px;}
.main_01 .imgs ul li img {
  border: 3px solid #fff;
  box-sizing: border-box;
  box-shadow: 3px 3px 7px #ccc;
  width:100%;
}

/* 라이트 박스 */
#article {background: #f4f4f4; padding: 40px 0;  }
.square a {float: left; width: 19%; margin: 0.5%; position: relative; overflow: hidden;  }
.square a img {width: 100%; display: block;}
.square a em {
  background: rgba(0,0,0,0.77); color: #fff; width: 100%; text-align: center;
  position: absolute; left:0; bottom: -30px; opacity: 1; transition: all .3s ease;}
.square a:hover em {bottom: 0; background: rgba(0,0,0,0.57); }
.square a:nth-child(1):hover img {filter: grayscale(100%);}
.square a:nth-child(2):hover img {filter: grayscale(100%);}
.square a:nth-child(3):hover img {filter: grayscale(100%);}
.square a:nth-child(4):hover img {filter: grayscale(100%);}
.square a:nth-child(5):hover img {filter: grayscale(100%);;}
.square a:nth-child(6):hover img {filter: grayscale(100%);}
.square a:nth-child(7):hover img {filter: grayscale(100%);}
.square a:nth-child(8):hover img {filter: grayscale(100%);}
.square a:nth-child(9):hover img {filter: grayscale(100%);}
.square a:nth-child(10):hover img {filter: grayscale(100%);}


  /* 하위버튼 */
#btn {padding: 30px 0;}
.btn {}
.btn ul {overflow: hidden; display: flex; justify-content: center; align-items: center; width:100%;}
.btn ul li { position: relative; float: left; width: 15%;  text-align: center;}
.btn ul li img { width:80px;}

  /* 푸터 */
  #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){

.square a {width: 24%;}
.square a:nth-child(5n) {display: none;}

@media (max-width: 960px){
#hello_top { margin-top: 80px; height: 320px;}
.hello_01 {display: none;}

.square a {width: 32.33333%;}
.square a:nth-child(5) {display: block;}

.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){
#hello_top {height: 230px;}
#main_01 {padding: 0;}
.hello_02 {margin-top: 73px;}
.btn ul li img { width: 70px;}
}

@media (max-width: 600px){
  .row {padding: 0 12px;}
  .hello_01 ul li a {font-size: 14px;}
  #banner {display: none;}
  .textbox_01 p {font-size: 13px;}
  #main_01 { border-bottom: 0; }
  .btn {padding: 20px 0;}
  #article {padding-top:20px; padding-bottom: 40px;}
  .square a {width: 49%}
  .square a:nth-child(5) {display: none;}
  .btn ul {display: block;}
  .btn ul li {
    width: 100%;
    padding: 3px;
    border:1px solid #ccc;
    margin-bottom: 8px;
    box-sizing: border-box;}
    #main_01 h2 {font-size: 20px;}
  .textbox_01 {padding: 30px 0;}
  .textbox_01 p strong {font-size: 15px;}

}
@media (max-width: 480px){
  .row {padding: 0 8px;}
   #hello_top {height: 200px;}
  .hello_02 {width: 70%;}
  #main_01 .bar h2 {font-size: 33px;}
  .btn ul li img {width: 65px;}
  .lg-toolbar .lg-icon {padding: 74px 0;} /*라이트박스클로징버튼위치*/
}

@media (max-width: 320px){
  #main_01 .bar h2 {font-size: 26px;}
  .square a {width: 100%; margin-left:0; margin-right: 0;}


}