@charset "utf-8";

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

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

/* 배너 */
#mo_banner {width: 100%; height: 400px; margin-top: 164px;
background: url(../img/bg_15.jpg) no-repeat center top; background-size: cover;
}
.mo_banner {position: relative;}
.mo_banner h2 { text-align: center; padding-top: 74px;}
.mo_banner h2 img {width: 600px;}

.mo_banner .main_title_02 ul li p {font-size: 15px; padding: 8px; border-bottom: 1px dotted #878787; font-weight: bold;}
.mo_banner .main_title_02 ul li em {font-size: 14px; color :#222; padding-top: 8px; display: inline-block;}
.aside {position: absolute; top:10px; left: 0;}
.aside ul {text-align: left; height: 400px; background: (255,255,255,0,4);
border-right: 1px solid #222;
}
.aside ul li {position: relative; border-bottom: 1px dotted #ccc; width: 230px;}
.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;}



/* 탭메뉴 */
#hap {overflow: hidden;}
#hap .bar {width: 100%; background: #222; z-index: 10;}
.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: 33.333%; text-align: center; box-sizing: border-box;}
.movie_title li:nth-child(1) {border-right: 1px solid #ccc;}
.movie_title li:nth-child(2) {border-right: 1px solid #ccc;}
.movie_title li a {display: block; padding: 15px 0; font-size: 18px; color: #fff; font-weight: 700;}
.movie_title li.active a {color: #01cba3;}
.movie_chart {overflow: hidden; margin-top: 60px;}
.movie_chart > div { float: left; width: 100%;}
.movie_chart {}
.movie_chart .chart_01 {text-align: center;}
.movie_chart .chart_01 p { font-size: 18px;}
.movie_chart .chart_01 h2 {}
.movie_chart .chart_01 .title img {width:400px; }
.movie_chart .chart_01 .lineup_intro img {display: block;}
.movie_chart .chart_01 .lineup02 { background: linear-gradient(#000, #33cc66); }

.movie_chart .chart_01 .lineup02 img { width:100%;}
.movie_chart .chart_01 .lineup03 {}
.movie_chart .chart_01 .lineup03 img { width:100%;}
.movie_chart .chart_01 .lineup04 {padding-top: 100px;}
.movie_chart .chart_01 .lineup04 img { width:100%;}
.movie_chart .chart_01 .lineup05{padding-top: 60px;}
.movie_chart .chart_01 .lineup05 img { width:100%; display: block;}

.movie_chart .chart_01 .greybox {width:100%; height: 50px; background: #333333; padding-top: 6px;}
.movie_chart .chart_01 .greybox img { width:200px; }

.movie_chart .chart_01 .blue {width:100%;  background: #216e9a;}
.movie_chart .chart_01 .blue img {  }

.movie_chart .chart_02 { display: inline-block;}
.movie_chart .chart_02 img {width: 70%; }

.movie_chart .chart_01 .engrey { width: 100%; background: #f2f2f2;}
.movie_chart .chart_01 .borabox {width:100%; height: 50px; background: #9966ff; padding-top: 6px; }
.movie_chart .chart_01 .borabox img {}


/* 하위버튼 */
#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){
  .aside ul li {width: 130px;}
  .mo_banner h2 {padding-top: 38px;}
  .hover_wrap figcaption {padding: 4px;}
}
@media (max-width: 960px){
  #banner { margin-top: 80px;}
  .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 {background: #fff;}
  #mo_banner { border-bottom: 24px solid #222;}
  .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:nth-child(1) {border-right: 0;}
  .movie_title li:nth-child(2) {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 { margin-top: 30px;}
  .movie_chart .chart_01 .lineup04 {padding-top: 50px;}
  .movie_chart .chart_01 .lineup05 {padding-top: 12px;}
  .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){
  .row {padding: 0 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 {}
  .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;}
  #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 { margin-top: 60px;}
  .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;}
}