@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_13.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: 50%; text-align: center; box-sizing: border-box;}
.movie_title li:first-child {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; padding-top: 60px;}
.movie_chart > div { float: left; width: 100%;}
.movie_chart .chart_01 {text-align: center;}
.movie_chart .chart_01 p { font-size: 18px;}
.movie_chart .chart_01 .title {width:50%; margin:0 auto;}
.movie_chart .chart_01 .hyun { padding-top: 50px; box-sizing: border-box;}
.movie_chart .chart_01 .one { width: 100%;  background: #333333; padding: 50px 0; margin-top: 50px; box-sizing: border-box;}
.movie_chart .chart_01 .one img { width: 900px;}

.movie_chart .chart_01 .one02 { width: 100%;  background: #333333;  box-sizing: border-box;}
.movie_chart .chart_01 .one02 img { width: 900px;}

.movie_chart .chart_01 .onebox02_1 { width: 100%; box-sizing: border-box;}
.movie_chart .chart_01 .onebox02_1 img { width: 900px;}

.movie_chart .chart_01 .colorbox { width: 100%; height: 50px; background: #5ee5e9;}
.movie_chart .chart_01 .one03 { width: 100%; background: #2b2e33; }
.movie_chart .chart_01 .one03 img {width: 900px;}

.movie_chart .chart_01 .onebox03_1 { padding-top: 24px;}
.movie_chart .chart_01 .onebox03_1 img {width: 900px;}

  /* 라이트 박스 */
  #article {background: #f4f4f4; padding: 40px 0; margin-top: 50px;}
  .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:hover img {filter: grayscale(100%);}
  .movie_chart .chart_01 .bansu_sam { width: 100%; margin: 0 auto; margin-top: 100px; }
  .movie_chart .chart_01 .bansu_sam  h2 {font-size: 40px; padding: 24px 0;}
  .hover_wrap {
    margin: 0 auto;
  	position: relative;
     background: linear-gradient(#ffff00, #3becea);
     height: 100px;
  }
  .hover_wrap figure {
  	position: relative; width: 14%; margin:1%;
  	cursor: pointer;
  	overflow: hidden;
    float: left;
    box-sizing: border-box;
  }

  .hover_wrap figure img {
  	width: 100%; display: block; border-bottom: 2px solid #000;
  }
  .hover_wrap figcaption {
  	position: absolute; left: 0; bottom: 0;
  	background: rgba(0,0,0,0.44);
  	color: #fff;
  	width: 100%; padding: 10px ;
  	box-sizing: border-box;
  }
  .hover_wrap figcaption h3 {
  	font-size: 15px; padding-bottom: 5px;
  }
  .hover_wrap figcaption p {
  	font-size: 13px;
  }
  /* hover effect1 */
  .hover_wrap figure.ho1 figcaption {opacity: 0; bottom: -60px;
     transition: opacity 0.33s ease-in-out,
  		bottom 0.33s ease;
    }
  .hover_wrap figure.ho1:hover figcaption {opacity: 1; bottom: 0;}
  /* hover effect2 */
  .hover_wrap figure.ho2 figcaption {opacity: 0; bottom: -60px;
     transition: opacity 0.33s ease-in-out,
  		bottom 0.33s ease;
    }
  .hover_wrap figure.ho2:hover figcaption {opacity: 1; bottom: 0;}
  /* hover effect3 */
  .hover_wrap figure.ho3 figcaption {opacity: 0; bottom: -60px;
     transition: opacity 0.33s ease-in-out,
  		bottom 0.33s ease;
    }
  .hover_wrap figure.ho3:hover figcaption {opacity: 1; bottom: 0;}
  /* hover effect4 */
  .hover_wrap figure.ho4 figcaption {opacity: 0; bottom: -60px;
     transition: opacity 0.33s ease-in-out,
  		bottom 0.33s ease;
    }
  .hover_wrap figure.ho4:hover figcaption {opacity: 1; bottom: 0;}
  /* hover effect5 */
  .hover_wrap figure.ho5 figcaption {opacity: 0; bottom: -60px;
     transition: opacity 0.33s ease-in-out,
  		bottom 0.33s ease;
    }
  .hover_wrap figure.ho5:hover figcaption {opacity: 1; bottom: 0;}
  /* hover effect6 */
  .hover_wrap figure.ho6 figcaption {opacity: 0; bottom: -60px;
     transition: opacity 0.33s ease-in-out,
  		bottom 0.33s ease;
    }
  .hover_wrap figure.ho6:hover figcaption {opacity: 1; bottom: 0;}

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

/* 모집안내*/
.movie_chart .chart_02 h3 {font-size: 22px; font-weight: bold; padding-bottom: 24px; text-align: center;}
.movie_chart .chart_02 h4 {font-size: 22px; font-weight: bold; padding: 111px 0 24px; text-align: center;}
.movie_chart .chart_02 h5 {font-size: 18px; padding: 55px 0 16px; color:#222;}
table {width: 100%; border-collapse: collapse; padding: 12px;}
th,td {border:1px solid #000; padding: 12px;}
table .c1 { text-align: center;}
table .point_color {color:blue;}

/* 하위버튼 */
#btn {padding: 50px 0 30px;}
.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;}
  .movie_chart .chart_02 h4 {padding: 80px 0 12px;}
  .movie_chart .chart_02 h5 {padding: 46px 0 16px;}
}
@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;}
  .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:first-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: 0px;}
  .movie_chart .chart_01 .title {width: 70%;}
  .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 { border-bottom: 24px solid #222; }
  .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;}
  #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 .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: 86px;}
  .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 .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){
  #mo_banner {height: 200px;}
  .mo_banner h2 img {width: 260px;}
  .movie_title li a {font-size: 13px; }
  .movie_chart .chart_01 .one img {width: 279px;}
  .movie_chart .chart_01 .one02 img {width: 290px;}
  .movie_chart .chart_01 .onebox02_1 img {width: 297px;}
  .movie_chart .chart_01 .one03 img {width: 296px;}
  .movie_chart .chart_01 .onebox03_1 img {width: 279px;}
  .movie_chart .chart_01 .borabox {height: 17px;}
  .movie_chart .chart_01 .bansu_sam {margin-top: 0;}
  .movie_chart .chart_01 .bansu_sam h2 {font-size: 13px;}
  .movie_chart .chart_01 .hyun {padding-top: 24px;}
  .movie_chart .chart_01 p {font-size: 11px;}
}