/* ----------------------------------------------
 * Generated by Animista on 2021-5-27 14:43:9
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation flip-vertical-right
 * ----------------------------------------
 */
@-webkit-keyframes flip-vertical-right {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  30% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
    100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@keyframes flip-vertical-right {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  30% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
    100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}

/*Demo styles*/
    .swiper-container {position:relative; 
      width: 100%;
      height:270px; 
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

@keyframes txt_ani01{
    0%{opacity:0}
    100%{opacity:1}
}
@keyframes txt_ani02{
    0%{opacity:0}
	50%{opacity:0}
    100%{opacity:1}
}

#wrap {}
#wrap_sub {padding-top:95px; }
#wrap:after {content:''; display:block; clear:both;}

.swiper-wrapper .swiper-slide1 {background-size:cover;  }
.swiper-wrapper .swiper-slide1 .vi_box_txt {text-align:right;}
.swiper-wrapper .swiper-slide2 {background-size:cover; text-align:left; }
.swiper-wrapper .swiper-slide2 .vi_box_txt {text-align:left;}
.swiper-wrapper .swiper-slide3 {background-size:cover;}
.swiper-wrapper .swiper-slide4 {background-size:cover;}


.swiper-container .vi_box_txt {position:absolute; width:90%; margin-left:5%;  left:0;  top:50%; transform:translate(0, -50%); text-align:left; }
.swiper-container .vi_box_txt p {font-size:3rem; line-height:2.5rem;  font-weight:600; margin-bottom:10px; font-family: 'KoPub Batang', serif; text-shadow:0 0 5px rgba(0,0,0,.5);  }
.swiper-container .vi_box_txt span {font-size:1.5rem !important; line-height:1.7rem; word-break:keep-all ; width:90%; display:inline-block;  font-family: 'Nanum Pen Script' !important;  text-shadow:0 0 10px rgba(0,0,0,.5);   }
#wrap .swiper-container .vi_box_txt a {display:inline-block; line-height:30px; text-align:center; background-color:#fff; border-radius:25px; color:#111; padding:0 20px; margin-top:20px; transition:.2s all; font-size:.9rem; }
#wrap .swiper-container .vi_box_txt a:hover {background-color:#e60012; color:#fff; }


#main { width:100%; min-width:320px; margin:0 auto 50px auto; margin-top:50px}

#main h3 {display:block; text-align:left; font-size:1.5rem; color:#111; font-weight:600; word-break:keep-all;  font-family: 'KoPubDotumMedium';}

#main .main_menu .wrap li:hover img {-webkit-animation: flip-vertical-right 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite; animation: flip-vertical-right 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite;}

#main .section {margin:30px auto; max-width:1500px; }

#main .section1 {width:100%; max-width:100%; position:relative; overflow:hidden;  }
.section1 h3 {padding:0 5% 30px 5%; }
.sec1_bg {width:100%; height:80%; background-color:#eee; position:absolute; left:0; bottom:-20px;  }
.section1 .wrap {max-width:1500px; margin:0 auto; width:100%;  }
.section1 .wrap ul {font-size:0; margin:0 auto; width:90%; }
.section1 .wrap ul li {width:100%; display:inline-block; transition:.5s all; margin-bottom:20px; border-radius:10px; overflow:hidden; }
.section1 .wrap ul li:last-child {margin-right:0; }
.section1 .wrap ul li a {display:inline-block; width:100%; }
.section1 .wrap ul li a .img_wrap {/* height:200px;   */position:relative;  }
.section1 .wrap ul li a .img_wrap img {width:100%}
.section1 .wrap ul li a .txt {padding:10px; position:relative; background-color:#fff;  }
.section1 .wrap ul li a .txt p {font-weight:600; font-size:1.2rem; margin-bottom:5px; color:#e60012; }
.section1 .wrap ul li a .tx span {color:#555; }



.section2 {padding:30px 5% 0 5%; }
.section2 > ul {width:100%; display:inline-block; margin-right:5%; font-size:0; }
.section2 > ul > li {display:inline-block; width:100%;  transition:.5s all; margin-bottom:30px; }
.section2 > ul > li:last-child {margin-right:0; margin-bottom:0; }
.section2 > ul > li h3 {border-bottom:1px solid #333; padding-bottom:10px;}
.section2 > ul > li h3 span {}
.section2 > ul > li h3 a {float:right; width:25px; margin-top:3px; }
.section2 > ul > li h3 a img {opacity:.2; transition:.2s all; width:100%; }
.section2 > ul > li h3 a:hover img {opacity:1; transform:rotate(90deg); }
.section2 > ul > li > ul {}
.section2 > ul > li > ul > li {}
.section2 > ul > li > ul > li:hover a p {text-decoration:underline; }
.section2 > ul > li > ul > li a {font-size:0; line-height:25px; padding:10px 0; display:block;  }
.section2 > ul > li > ul > li a p {display:inline-block; vertical-align:middle; width:100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section2 > ul > li > ul > li a span {display:inline-block; vertical-align:middle; width:100%; color:#999; }