@charset "utf-8";

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

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

/* 학습관리*/
#hakss01 {width: 100%; height: 400px;margin-top: 164px; background: linear-gradient(#33cccc, #3567cc);}
.hakss01 {}
.aside { float: left; width: 20%;}
.aside ul {text-align: left; background:rgba(255,255,255,0.5); height: 400px;
border-right: 1px solid #ccc; border-left: 1px solid #ccc;
}
.aside ul li {position: relative; border-bottom: 1px dotted #ccc; }
.aside ul li:first-child {padding-top: 10px;}
.aside ul li h3 { padding:10px; text-align: center; color:#222; font-size: 17px;}
.aside ul li img {width: 70px;}
.aside ul li a {color: #222; font-size: 15px; display: block; padding:15px; transition: all .34s;}
.aside ul li a i {position:absolute; right: 10px; top: 15px; }
.aside ul li a:hover {background: #222; color:#fff;}
.teacher {float: left; width:80%; height: 400px; background: url(../img/sci_top.png) no-repeat center center; background-size: cover;}
.teacher .pos { margin: 12px; padding-left: 40px;}
.teacher .pos li { float: left; margin-right: 12px; }
.teacher .pos li a:hover {background: #222;}

.teacher .pos a {font-size: 16px; width: 90px; display: inline-block; text-align: center; padding: 3px; border:1px solid #fff; color:#fff; transition: all 0.4s ease; }
.teacher .pos a:hover { background: #222;}
.teacher .pos h3 {font-size: 16px; width: 90px; text-align: center; padding: 3px; margin: 22px 8px 0 0; display: inline-block; color:#fff;  border:1px solid #fff; }
.teacher .pos p { color:#fff; font-size: 15px;}
.teacher .pos p em { font-size:25px; font-weight: bold; }
.teacher .pos p span {
  display: inline-block;
   font-size: 15px; border:1px solid #fff;
   padding: 3px 5px;
   margin-top: 8px;
 }
.teacher .pos p strong { margin: 10px 0; display:inline-block;}
.teacher .pos .mun {font-family: 'Nanum Brush Script', cursive; font-size: 40px; padding-top: 15px; }
.teacher_bar { width:100%;  background: #a7d6e0;}
.teacher_bar p { font-size: 16px; padding: 10px 0; text-align: right; font-family: 'Abel', sans-serif;}

/* 탭메뉴 */
#tap {overflow: hidden;}
#tap .container {}
#tap .bar {width: 100%; height: 100px; background: #222; z-index: 10;}
.tap {width:100%; height:300px;}
.tap .conts { float: left; width: 80%; height: 80px; margin-bottom: 60px; }
.conts ul {overflow: hidden; width: 100%; margin: 0 auto; background: #fff;}
.conts li {float: left; width: 50%; text-align: center;
border-left: 1px solid #c4c4c4;
border-bottom: 1px solid #c4c4c4;
box-sizing: border-box;

}
.conts li:last-child {  border-right: 1px solid #c4c4c4;}
.conts li a {display: block; padding: 15px 0; font-size: 18px; color: #666; font-weight: 700;}
.conts li.active a {background: #222; color: #fff}
.box {overflow: hidden; padding-top: 0px;}
.box > div { float: left; width: 100%;}
.box > div img {width: 100%;}
.box .chart_01 {  border: 1px solid #c4c4c4; box-sizing: border-box; text-align: center; }
.box .chart_01 .title { padding-top: 50px;}
.box .chart_01 .title h3 {font-size: 30px;}

.box .chart_01 .main01 p {font-size: 40px; font-weight: bold; color:#000; padding: 15px 0;}
.box .chart_01 .main01 img { padding: 100px;  box-sizing: border-box;}
.box .chart_01 .main02 {background: #f2f2f2;}
.box .chart_01 .main02 img { padding: 100px;  box-sizing: border-box;}
.box .chart_01 .main02 p {font-size: 40px; font-weight: bold; color:#000; padding-top:50px;}
.box .chart_02 .mok { width: 100%; }
.box .chart_02 .mok h6 {text-align: center; font-size: 16px; font-weight: bold; padding: 8px 0;  background: #fff; border-bottom: 1px solid #c4c4c4;}
.box .chart_02 .mok p {text-align: right; font-size: 14px; padding:6px;}
.box .chart_02 .mok .mok_1 {float: left; width:32%; margin-right: 2%; border: 1px solid #c4c4c4; box-sizing: border-box;}
.box .chart_02 .mok .mok_2 {float: left; width:32%; margin-right: 2%; border: 1px solid #c4c4c4; box-sizing: border-box;}
.box .chart_02 .mok .mok_3 {float: left; width:32%;  border: 1px solid #c4c4c4; box-sizing: border-box; }

.box .chart_02 {padding: 100px 24px; border: 1px solid  #c4c4c4; box-sizing: border-box;}
.box .chart_02 h4 { text-align: center; font-size: 18px; font-weight: bold; padding-bottom: 24px; padding-top: 100px;}
.box .chart_02 .ttble { font-size: 16px; text-decoration: none; text-align: center; border-collapse: collapse;}
.box .chart_02 .ttble td {border:1px solid #c4c4c4;}
.box .chart_02 .ttble th {border:1px solid #c4c4c4; background: #fff; padding: 5px 0;}
.box .chart_02 .ttble span {}

.side3 {width:70%; margin: 0 auto; padding: 0px;}
.side3 {position: relative; overflow: hidden;}
.side3 figure img {padding: 50px;}
.side3 figcaption {
    position: absolute;
    top: 50%; left: 50%;
    color: #fff;
    text-align: center;
    opacity: 0;
    text-transform: uppercase;
    transition: all 0.3s ease;
    transform: translate(350%, -50%) rotate(180deg);
}
.side3 figcaption:after {
    content: '';
    width: 100px; height: 100px;
    background: #000;
    border-radius: 50%;
    position: absolute; left: 50%; top: 50%; z-index: -1;
    transform: translate(-50%, -50%);
}
.side3 figcaption h3 {font-size: 16px;}
.side3 figcaption em {display: block; font-weight: bold;}
.side3 img {display: block; transition: all 0.3s ease;}
.side3:hover img {opacity: 0.4;}
.side3:hover figcaption {transform: translate(-50%, -50%) rotate(0deg); opacity: 1;}


  /* 하위버튼 */
#btn {padding: 30px 0;}
.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){
.aside {display: none;}
.teacher {width: 100%; }
.box .chart_01 .main01 img {padding: 80px;}
.box .chart_01 .main02 img {padding: 80px;}
}
@media (max-width: 960px){
  #banner { margin-top: 80px;}
  #mo_banner {height: 350px; margin-top: 85px;}
  .mo_banner h2 {  padding-top: 100px;}
  .mo_banner .main_title_02{display: none;}

  .movie_title ul {width: auto;}
  .movie_title li {width: 25%; box-sizing: border-box; padding-right: 1px;}

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

  .teacher .pos .mun {font-size: 25px;}
  #hakss01 {height: 300px; margin-top: 86px;}
  .teacher { height: 300px; width:100%; }
  .teacher .pos {margin: 0; padding-left: 0;}
  .box .chart_01 .main01 img {padding: 40px;}
  .box .chart_01 .main02 img {padding: 40px;}
  .box .chart_02 .mok .mok_1 {width:100%; margin-bottom: 24px;}
  .box .chart_02 .mok .mok_2 {width:100%; margin-bottom: 24px;}
  .box .chart_02 .mok .mok_3 {width:100%; margin-bottom: 24px;}
}

@media (max-width: 768px){
  #hap .bar {height: 24px;}
  .movie_title {margin-bottom: 30px; }
  .movie_title ul {position: relative; padding-bottom: 10px;  padding-top: 50px;}
  .movie_title ul:before {content: ''; position: absolute; z-index: 1; left: 0; bottom: 0px; width: 100%; height: 2px; background: #e1e1e1;}
  .movie_title li {width: auto; border: 0;}
  .movie_title li a {position: relative; font-size: 18px; color: #666; font-weight: 400; padding: 0; margin-right: 35px;}
  .movie_title li:last-child {border-right: 0;}
  .movie_title li.active a:before {content: ''; position: absolute; z-index: 10000; left: 0; bottom: -10px; width: 100%; height: 2px; background: #666;}
  .movie_title li.active a {background: none; color: #666;}
  .movie_chart {padding-top: 30px;}

  .teacher .pos p em {font-size: 18px;}
  .box .chart_02 {padding: 50px 24px;}
  .box .chart_02 .ttble {font-size: 14px;}

}

@media (max-width: 600px){
  .row {padding: 0 12px;}
  .hello_01 ul li a {font-size: 14px;}
  #mo_banner {height: 285px;}
  .movie_title ul { padding-top: 30px;}
  .movie_title li a {font-size: 16px; margin-right: 20px;}
  .movie_chart {padding-top: 0;}

  #main_01 { border-bottom: 0; padding-bottom: 50px;}
  .btn ul {display: block;}
  .btn ul li {
    width: 100%;
    padding: 3px;
    border:1px solid #ccc;
    margin-bottom: 8px;
    box-sizing: border-box;}
    #hakss01 {height: 200px; margin-top: 86px;}
    .teacher { height:200px; width:100%;}
    .teacher .pos {margin-top: 10px;}
    .teacher .pos .mun {display: none;}
    .teacher .pos h3 { font-size: 15px; margin: 5px 8px 0 0;}
    .teacher .pos a {display: none;}
    .teacher .pos p em { font-size: 16px; margin-top: 4px; display: inline-block;}
    .teacher .pos p span {padding: 2px 4px;}
    .teacher .pos p strong {margin: 2px 0;}
    .teacher .pos p {font-size: 13px;}
    .teacher_bar p {display: none;}
    .conts li a {padding: 9px 0; font-size: 15px;}

    .box > div img {padding: 24px 0 0 0;}
    .box .chart_01 .main01 img {padding: 24px;}
    .box .chart_01 .main01 p {font-size: 26px; padding: 0px 0px;}
    .box .chart_01 .main02 img {padding: 24px;}
    .box .chart_01 .main02 p {font-size: 26px; padding-top: 24px; }
    .box .chart_01 .title h3 {font-size: 25px;}
    .box .chart_02 .ttble {font-size: 11px;}
    .box .chart_02 h4 {padding-bottom: 6px; font-size: 16px;}
    .box .chart_02 {padding: 50px 8px;}
}

@media (max-width: 480px){
  .row {padding: 0 8px;}
  #mo_banner {height: 245px;}
  .mo_banner h2 img {width: 340px;}
  .mo_banner h2 {  padding-top: 60px;}
  #hap .bar {height: 12px;}
  .movie_title li a {font-size: 14px; margin-right: 11px;}
  .btn ul li img {width: 65px;}
  .side3 {width:92%;}
  .box .chart_02 h4 {padding-top: 50px;}
  .box .chart_01 .title h3 {font-size: 18px;}
  .box .chart_01 .main01 p {font-size: 18px;}
  .box .chart_01 .main02 p {font-size: 18px;}
  }

@media (max-width: 320px){
  .hello_02 ul li:nth-child(3) {padding: 12px 0;}
  #mo_banner {height: 200px;}
  #main_01 .bar h2 {font-size: 26px;}
  .mo_banner h2 img {width: 260px;}
  .movie_title li a {font-size: 13px; }
  .teacher .pos h3 {display: none;}

}