@charset "utf-8";

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


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

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

/* 탭메뉴 */

  #hap {overflow: hidden; padding-top: 152px;}
  #hap .bar {width: 100%;background: #f2f2f2; z-index: 10;}
  #hap .bar p {font-size: 40px; text-align: center; font-family: 'Nanum Brush Script', cursive; padding: 30px 0;}
  .hap {width:100%; height:300px;}
  .hap .movie_title { float: left; width: 80%; height: 80px; margin-bottom: 60px; }
  .movie_title ul {overflow: hidden; width: 848px; margin: 0 auto; }
  .movie_title li {float: left; width: 50%; text-align: center;
    border-left: 1px solid #c4c4c4;
    border-bottom: 1px solid #c4c4c4;
    box-sizing: border-box;
}
.movie_title li:last-child {  border-right: 1px solid #c4c4c4;}
.movie_title li a {display: block; padding: 15px 0; font-size: 18px; color: #666; font-weight: 700;}
.movie_title li.active a {background: #f2f2f2; color: #222}
.movie_chart {overflow: hidden; padding-top: 60px;}
.movie_chart > div { float: left; width: 100%;}
.movie_chart {}
.movie_chart .chart_01 {text-align: center;}


/* 하위버튼 */
#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;}

.btn ul li:after {
content: '';
position: absolute; top:0; right: 0;
width:100%; height: 100%; background: rgba(0,0,0,0.2);
opacity: 0;
transition: all .5s ;
}
.btn ul li:hover:after {opacity: 1;}


  /* 푸터 */
  #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 ul li {width: 130px;}
  .mo_banner h2 {padding-top: 38px;}
  .hover_wrap figcaption {padding: 4px;}
}
@media (max-width: 960px){
    .header_top {display: none;}
    #header {height: 85px;}
    #banner { margin-top: 80px;}
    #mNav {display: block;}
    .header .nav {display: none;}

    .aside {display: none;}
    #mo_banner {height: 350px; margin-top: 85px;}

    .mo_banner .main_title_02{display: none;}
    .movie_title ul {width: auto;}
    .movie_chart .chart_01 .bansu_sam h2 {font-size: 30px;}
    .movie_chart .chart_01 .bansu_sam {margin-top: 50px;}
    .one {margin-top: 100px;}
    .movie_chart .chart_01 .one img {width: 650px;}
    .movie_chart .chart_01 .one02{padding-top: 0;}
    .movie_chart .chart_01 .one02 img {width: 650px;}
    .movie_chart .chart_01 .onebox02_1 img { width: 790px;}
    .movie_chart .chart_01 .onebox03_1 img { width: 790px;}
    .movie_chart .chart_01 .one03 img {width: 650px;}

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


    .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){

  #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: 24px;}
      .movie_chart .chart_01 .bansu_sam {margin-top: 0;}

      .movie_chart .chart_01 .one img {width: 550px;}
      .movie_chart .chart_01 .one02 img {width: 550px;}

      .movie_chart .chart_01 .onebox02_1 img {width: 700px;}
      .movie_chart .chart_01 .one03 img {width: 735px;}
      .movie_chart .chart_01 .onebox03_1 img {width: 660px;}

      .mo_banner h2 {  padding-top: 50px;}
      .mo_banner h2 img {width: 490px;}
      .hover_wrap figcaption h3 {font-size: 13px;}
      .movie_chart .chart_01 p {font-size: 14px;}
      .hover_wrap figcaption {padding: 6px;}
}

@media (max-width: 600px){
  .header_menu {padding-right: 12px;}
  .row {padding: 0 12px;}
  #mNav {right: 12px;}
  .hello_01 ul li a {font-size: 14px;}
  #mo_banner {height: 285px;}

  .mo_banner h2 {padding-top: 32px;}
  .mo_banner h2 img {width: 400px;}
  .movie_title ul { padding-top: 30px;}
  .movie_title li a {font-size: 16px; margin-right: 20px;}
  .movie_chart {padding-top: 0;}

  .movie_chart .chart_01 .one {margin-top:24px; padding: 28px 0;}
  .movie_chart .chart_01 .one img {width: 470px;}
  .movie_chart .chart_01 .one02 {padding-top: 20px;}
  .movie_chart .chart_01 .one02 img {width: 470px;}
  .movie_chart .chart_01 .whitebox {height: 740px;}
.movie_chart .chart_01 .onebox02_1 img {width: 540px;}
.movie_chart .chart_01 .onebox03_1 img {width: 540px;}
.movie_chart .chart_01 .one03 img {width: 500px;}
  #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;}

#article {padding-top:20px; padding-bottom: 40px;}
.movie_chart .chart_01 .bansu_sam h2 {font-size: 22px; font-weight: bold;}
.movie_chart .chart_01 .bansu_sam{margin-top: 50px;}
/*  .hover_wrap {flex-direction: column;}*/
  .hover_wrap figure img  {border: 1px solid #000; box-sizing: border-box;  background: linear-gradient(#ffff00 , #3becea,#343841);}
  .hover_wrap figure {width: 47%;}
  .hover_wrap {background:none;}
}

@media (max-width: 480px){
  .row {padding: 0 8px;}
  .header h1 em {padding: 14px 0px 0px 0;}
  .header h1 em img {width: 180px;}
  .mNav li i { font-size: 20px; line-height: 34px;}
  #mo_banner {height: 245px;}
  .mo_banner h2 img {width: 280px;}
  .mo_banner h2 {  padding-top: 50px;}
  #hap .bar {height: 12px;}
  .movie_title li a {font-size: 14px; margin-right: 11px;}
  .movie_chart .chart_01 .bansu_curi > div > div { padding: 6px;}
  .movie_chart .chart_01 .bansu_sam {margin-top: 20px;}
  .movie_chart .chart_01 .bansu_sam h2 {font-size: 16px; font-weight: bold;}
  .movie_chart .chart_01 .title img {width: 295px;}
  .movie_chart .chart_01 .hyun img  {width:280px;}
    .movie_chart .chart_01 .whitebox {height: 530px;}
    .movie_chart .chart_01 .one {margin-top: 24px; padding: 24px 0;}
    .movie_chart .chart_01 .one img {width: 310px;}
    .movie_chart .chart_01 .one02 {padding-top:0;}
    .movie_chart .chart_01 .one02 img {width: 310px;}
    .movie_chart .chart_01 .onebox02_1 img {width: 400px;}
    .movie_chart .chart_01 .one03 img {width: 400px;}
    .movie_chart .chart_01 .onebox03_1 img {width: 367px;}
    .movie_chart .chart_01 .colorbox {height: 24px;}
    .movie_chart .chart_01 p {font-size: 12px;}
    .movie_chart .chart_01 .greybox {height: 34px;}
    .movie_chart .chart_01 .greybox img { width:120px; }
   .btn ul li img {width: 65px;}
   #article {padding-bottom: 20px;}
}

@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; }
  .movie_chart .chart_01 .title img {width: 240px;}
    .movie_chart .chart_01 .hyun img  {width:230px;}
    .movie_chart .chart_01 .hyun {padding-top: 24px;}
    .movie_chart .chart_01 p {font-size: 11px;}
}