@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_16.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;}
.movie_chart > div { float: left; width: 100%;}
.movie_chart .chart_01 {text-align: center;}
.movie_chart .chart_01 .title {margin: 0 auto; border-bottom: 1px solid #222;background: url(../img/go_back.jpg) no-repeat center center; background-size: cover; width:100%;}
.movie_chart .chart_01 .title img {padding: 24px; width: 80%;}
.movie_chart .chart_01 .title a { font-size: 14px; color:#222; padding: 14px 48px; margin-bottom: 52px; background: #ededed; display: inline-block; box-shadow: 3px 3px 2px #222;}
.movie_chart .chart_02 {text-align: center;}
.movie_chart .chart_01 .go_main01 .name { margin: 130px 0 60px 0;}
.movie_chart .chart_01 .go_main01 .name img { width:150px;}
.movie_chart .chart_01 .go_main01 .name h4 {font-size: 24px; font-weight: bold; color:#222;}
.movie_chart .chart_01 .go_main01 .box { margin-top: 50px;}
.movie_chart .chart_01 .go_main01 .box01:nth-child(1) {border-bottom: 1px solid #ff9900;  border-right: 1px solid #ff9900;}
.movie_chart .chart_01 .go_main01 .box01:nth-child(2) {border-bottom: 1px solid #ff9900;}
.movie_chart .chart_01 .go_main01 .box01:nth-child(3) {border-right: 1px solid #ff9900;}

.movie_chart .chart_01 .go_main01 .box .box01 { width:49%; float: left; padding: 24px; box-sizing: border-box;}
.movie_chart .chart_01 .go_main01 .box h5 { font-size: 18px; font-weight: bold;  padding-bottom: 12px;}
.movie_chart .chart_01 .go_main01 .box p {font-size: 16px;}
.movie_chart .chart_01 .go_main01 .tatal {}
.movie_chart .chart_01 .go_main01 .tatal .tatal01 { float: left; height: 210px; width:25%; padding: 12px; box-sizing: border-box; border-right: 1px solid #ff9900;}
.movie_chart .chart_01 .go_main01 .tatal .tatal01 img { width:76px;}
.movie_chart .chart_01 .go_main01 .tatal .tatal01 em {font-size: 20px;  font-weight: 700;display: block; padding-bottom: 5px;}
.movie_chart .chart_01 .go_main01 .tatal .tatal01 span {font-size: 16px; display: block; color:#222;}
.movie_chart .chart_01 .go_main01 .nesin {}
.movie_chart .chart_01 .go_main01 .nesin img { float: left; width:49%; padding: 8px; box-sizing: border-box;}
  /* 라이트 박스 */
  #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 {}


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

    .movie_chart .chart_01 .go_main01 .name img {width: 120px;}
    .movie_chart .chart_01 .go_main01 .box h5 { font-size: 16px; padding-bottom: 12px;}
    .movie_chart .chart_01 .go_main01 .tatal .tatal01 em {font-size: 16px;}
    .movie_chart .chart_01 .go_main01 .box p {font-size: 14px;}

    .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: 62px;}
  .movie_title li:first-child {border-right: 0;}
  .movie_chart .chart_01 .go_main01 .tatal .tatal01 {height: 193px; width: 49%;}
  .movie_chart .chart_01 .go_main01 .tatal .tatal01:nth-child(1) {border-bottom: 1px solid #ff9900;}
  .movie_chart .chart_01 .go_main01 .tatal .tatal01:nth-child(2) {border-right: 0; border-bottom: 1px solid #ff9900; }
  .movie_chart .chart_01 .go_main01 .tatal .tatal01:nth-child(4) {border-right: 0;}
  .movie_chart .chart_01 .go_main01 .box .box01 {float: none; border: 0; width: 100%; margin-top: 12px;}

.movie_chart .chart_01 .go_main01 .box .box01:nth-child(1) {border: 3px solid #ff9900;}
.movie_chart .chart_01 .go_main01 .box .box01:nth-child(2) {border: 3px solid #fcb345;}
.movie_chart .chart_01 .go_main01 .box .box01:nth-child(3) {border: 3px solid #ff9900;}
.movie_chart .chart_01 .go_main01 .box .box01:nth-child(4) {border: 3px solid #fcb345;}
.movie_chart .chart_01 .go_main01 .box h5 {font-size: 20px;}
  .movie_chart .chart_01 .go_main01 .name {margin: 100px 0 37px 0;}
  .movie_chart .chart_01 .go_main01 .tatal .tatal01 span {font-size: 14px;}
.movie_chart .chart_01 .go_main01 .nesin img {float: none; width: 100%;}

  .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 {padding-top: 39px;}

  #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_chart {padding-top: 49px;}
  .movie_chart .chart_01 .title img {padding: 10px;}
  .movie_chart .chart_01 .title a {margin-bottom: 24px;}
  .movie_chart .chart_01 .go_main01 .name img { width: 181px;}
  .movie_chart .chart_01 .go_main01 .name {margin: 46px 0 23px 0;}
  .movie_chart .chart_01 .go_main01 .name h4 {font-size: 16px;}
  .movie_chart .chart_01 .go_main01 .box h5 {font-size: 16px;}
  .movie_chart .chart_01 .go_main01 .tatal .tatal01 {height: 155px;}
  .movie_chart .chart_01 .go_main01 .tatal .tatal01 span {font-size: 12px;}
  .movie_chart .chart_01 .go_main01 .tatal .tatal01 img {width: 51px;}
  .movie_chart .chart_01 .title a {padding: 6px 26px;}

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

   .btn ul li img {width: 65px;}

}

@media (max-width: 320px){

  #mo_banner {height: 200px;}

}