/* ----------------------------------------------
 * 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);
  }
}

@font-face {
    font-family: 'Makgeolli';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/Makgeolli.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

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

    .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 {/* height: 100%; */ background:url('/common/img/wrap_bg2.png')fixed right  }
#wrap1 {/* height: 100%; */ background:url('/common/img/wrap_bg15.png')fixed right  }
#wrap2 {/* height: 100%; */ background:url('/common/img/wrap_bg14.png')fixed right  }
#wrap3 {/* height: 100%; */ background:url('/common/img/wrap_bg8.png')fixed right  }
#wrap4 {/* height: 100%; */ background:url('/common/img/wrap_bg2.png')fixed right  }
#wrap5 {/* height: 100%; */ background:url('/common/img/wrap_bg12.png')fixed right  }
@media (max-width: 900px){
#wrap{background:none}
#wrap1{background:none}
#wrap2{background:none}
#wrap3{background:none}
#wrap4{background:none}
#wrap5{background:none}

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

.swiper-wrapper .swiper-slide1 {background:url('/common/img/main1.png')no-repeat center center, rgba(0, 0, 0, 0.3); background-size:cover;  background-blend-mode:hue;}
.swiper-wrapper .swiper-slide2 {background:url('/common/img/main2.png')no-repeat center center; background-size:cover;  }
.swiper-wrapper .swiper-slide3 {background:url('../img/visual03.jpg')no-repeat; background-size:cover;}
.swiper-wrapper .swiper-slide4 {background:url('../img/visual04.jpg')no-repeat; background-size:cover;}

@keyframes visual {
	0%     {background-position: center 0; }
	50% {background-position: center 100%; }
	100% {background-position: center 0; }
}


 .swiper-container .vi_box_txt {position:absolute; width:80%; left:50%; top:50%; transform:translate(-50%, -50%); text-align:center; }
#wrap .swiper-container .vi_box_txt p {font-size:4rem; text-shadow:5px 5px 3px rgba(0,0,0,.3); font-family: 'OTWelcomeBA'; }
#wrap .swiper-container .vi_box_txt img {margin-top:20px; }
#wrap .swiper-container .vi_box_txt span {font-size:2.2rem !important; word-break:keep-all ; width:100%; display:inline-block; text-shadow:0 0 5px rgba(0,0,0,.5); font-family: 'Nanum Pen Script' !important;  }
#wrap .swiper-container .vi_box_txt a {display:inline-block; line-height:40px; text-align:center; background-color:#fff; border-radius:20px; color:#111; padding:0 30px; margin-top:30px; transition:.5s all; }
#wrap .swiper-container .vi_box_txt a:hover {background-color:#e60012; color:#fff; }

/* 240123 */
#wrap .swiper-container .vi_box_txt.f_box {max-width: 800px;}
#wrap .swiper-container .vi_box_txt.f_box > p:first-child {text-align: left;}
#wrap .swiper-container .vi_box_txt.f_box > p:last-child {text-align: right;}
@media screen and (max-width:480px){
	#wrap .swiper-container .vi_box_txt.f_box > p {text-align: center !important;}
}
/* e:240123 */

#wrap .swiper-button-next {opacity:.5; transition:.1s all; position:absolute; right:10%; top:calc(50% - 20px); background:url("../img/ico_next.png")no-repeat center center; width:40px; height:81px; }
#wrap .swiper-button-prev {opacity:.5; transition:.1s all; position:absolute; left:10%; top:calc(50% - 20px); background:url("../img/ico_prev.png")no-repeat center center; width:40px; height:81px; }
#wrap .swiper-button-next:hover, #wrap .swiper-button-prev:hover {opacity:1; }

.swiper-container .ico_scroll {text-align: center; position: absolute; bottom:28%; left: calc(50% - 16.5px); z-index:999; animation-delay:2.5s;}
.swiper-container .ico_scroll p {color:rgba(255,255,255,.5); font-size:5px; margin-top:20px;}
.swiper-container .ico_scroll img{animation:down_scroll 1s linear infinite;}
@keyframes down_scroll{
	0% {opacity: 1; transform: translateY(0);}
	100% {opacity: 0; transform: translateY(5px);}
}


#main { width:100%; min-width:320px; margin:0 auto; background:url("../img/logo_bg.png")no-repeat 108% -120px; }

#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:0 auto;  }

#main .section h2 {text-align:center; font-size:3rem; font-weight:600;  margin-bottom:20px; position:relative;  }
#main .section h2 span {display:block; font-weight:400; color:#999; margin-top:5px;  }

#main .section1 {width:100%; max-width:1500px; z-index:99999999999; padding-top:70px; }
.section1 .wrap {min-width:320px; margin:0 auto; width:100%;  }
.section1 .wrap ul {font-size:0; display:flex; flex-wrap:wrap; max-width:1300px;margin:0 auto}
.section1 .wrap ul li {display:inline-block; width:100%; height:500px; }
.section1 .wrap ul li:after {clear:both; content:''; display:block; }
.section1 .wrap ul li {display:block; height:100%; position:relative; font-size:0; }
.section1 .wrap ul li .img_wrap {box-shadow:3px 3px 20px rgba(0,0,0,.15); display:inline-block; width:50%; vertical-align:middle; overflow:hidden; }
.section1 .wrap ul li .img_wrap img {width:100%; transition:1s all; }
.section1 .wrap ul li .img_wrap:hover img {transform:scale(1.05); }
.section1 .wrap ul li h3 {display:inline-block; width:50%; vertical-align:middle; padding-left:100px; font-size:2.3rem; font-weight:600; position:relative; }
.section1 .wrap ul li h3:before {content:''; display:block; width:100px; height:3px; background-color:#1cb14b; position:absolute; left:-30px; top:25px; }
.section1 .wrap ul li h3 span {display:block; margin-bottom:20px; margin-top:5px;  font-size:1rem; color:#aaa; font-weight:400; position:relative;  }
.section1 .wrap ul li h3 a {display:inline-block; width:200px; line-height:50px; background-color:#1cb14b; border:1px solid #1cb14b; color:#fff; text-align:center; font-weight:400; transition:.5s all;  }
.section1 .wrap ul li h3 a:hover {background-color:#fff; color:#1cb14b; }
.section1 .wrap ul li:nth-child(2n) .img_wrap {float:right; }
.section1 .wrap ul li:nth-child(2n) h3 {text-align:right; padding-left:0; padding-right:100px; position:absolute; right:calc(50%); top:50%;  transform:translate(0,-50%); }
.section1 .wrap ul li:nth-child(2n) h3:before {left:auto; right:-30px; }
.main_ex{font-weight:500;font-size:1.4rem;text-align:center;margin-bottom:60px;word-break:keep-all;color:#363636}
.green{color:#1cb14b;font-size:1.4rem;font-weight:600;word-break:keep-all}
.textbox4{margin-bottom:30px;font-size:1.2rem;font-weight:500;word-break:keep-all;color:#363636}
.textbox4 br{display:block}
@media all and (max-width:1100px){
.textbox4{font-size:1.1rem;}
.textbox4 br{display:none}
}



#main .section2 {width:100%; padding:50px 0 18% 50px; position:relative;  background:url('../img/sec2_bg2.jpg')no-repeat center center; background-size:cover; }
.section2 .wrap {max-width:1500px; margin:0 auto; position:relative; height:100%;}
#main .section2 .wrap h2 { float:left; color:#fff; text-align:left; width:25%; position:absolute; left:0; top:50%; padding-right:30px; padding-top:20px;  }
#main .section2 .wrap h2 span {color:#fff; word-break:keep-all; }
#main .section2 .wrap .more {display:inline-block; margin-top:60px; position:relative; width:180px; line-height:45px; text-align:center; color:#fff; border:1px solid #fff; transition:.5s all; }
#main .section2 .wrap .more:hover {background:#fff; color:#1cb14b; }
#main .section2 .wrap .more img {width:60%; height:60%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);  }
.section2 .wrap:after {clear:both; content:''; display:block; }
.section2 .wrap ul {font-size:0; width:75%; box-shadow:2px 2px 20px rgba(0,0,0,.3); position:absolute; right:0; top:30px; z-index:99999;  }

.section2 .wrap ul li {display:inline-block; width:33.333%;  position:relative; border-right:1px solid #eee;}
.section2 .wrap ul li:last-child {margin-right:0; }
.section2 .wrap ul li:hover p {opacity:1; }
.section2 .wrap ul li .img_wrap { position:relative; overflow:hidden; padding-bottom:100%; background-color:#000;box-sizing:border-box;}
.section2 .wrap ul li .img_wrap img {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; max-width:100%; max-height:100%;    transition:.5s all;  }

.section2 .wrap ul li:hover .img_wrap img {opacity:.5; }
.section2 .wrap ul li p {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:2rem; color:#fff; text-align:center; opacity:0; transition:.5s all;  }



#main .section3 {width:100%; position:relative; margin:0 auto; padding:150px 0 100px 0; background-color:#f5f5f5; }
.section3 .wrap {  }
#main .section3 h2 {margin-bottom:30px; }
#main .section3 h2:before {display:none; }
.section3 .wrap .wrap2 {position:relative; }
.section3 .wrap .wrap2:before {content:''; display:block; width:100%; height:2px; background-color:#ddd; position:absolute; left:0; top:calc(50% - 20px); }
.section3 .wrap .wrap2 ul {font-size:0; max-width:1500px; margin:0 auto; position:relative; text-align:center;  }
.section3 .wrap .wrap2 ul li {display:inline-block; width:33.333%; text-align:center; }
.section3 .wrap .wrap2 ul li:nth-child(1) a {background-color:#5eb72d }
.section3 .wrap .wrap2 ul li:nth-child(2) a {background-color:#9FAFA1; }
.section3 .wrap .wrap2 ul li:nth-child(3) a {background-color:#005986; margin-right:0; }
.section3 .wrap .wrap2 ul li a {display:inline-block; width:45%; transition:.5s all;  padding-bottom:45%; height:0; overflow:hidden; border-radius:100%;  position:relative;  }
.section3 .wrap .wrap2 ul li a:hover {transform:translateY(-10px);}
.section3 .wrap .wrap2 ul li a img {width:70%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.section3 .wrap .wrap2 ul li p {margin-top:20px; font-size:1.2rem; }

.section3 .popup {width:300px; height:400px; box-shadow:0 0 30px rgba(0,0,0,.2); border-radius:25px; display:none; position:fixed; left:50%; top:50%; box-sizing:border-box; transform:translate(-50%,-50%); background-color:#fff;
								text-align:center; backdrop-filter:blur(2px); z-index:999999999999999; }
.section3 .popup .wrap {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; padding:30px; }
.section3 .popup .wrap img {margin-bottom:20px; width:150px;}
.section3 .popup .wrap p {word-break:keep-all; }
.section3 .popup .wrap a {margin-top:30px; display:inline-block; line-height:40px; padding:0 20px; background-color:#1cb14b; color:#fff; }
.section3 .popup .btn_close {display:block; width:40px; height:40px; line-height:40px; border-radius:100%; background-color:rgba(0,0,0,.3); color:#fff; position:absolute; right:5px; top:5px; }
.section3 .popup .btn_close:hover {background-color:rgba(0,0,0,.6);}
.section3 .popup .btn_close img {width:50%; margin-top:10px; }


@media all and (max-width:1500px){

#main .section2 {padding:50px 5% 20% 5%; }

#main .section2 .wrap h2 {padding-top:0; }

}


@media all and (max-width:1200px){

#main .section h2 {font-size:2.3rem; }


#main .section3 {padding:100px 5% 50px 5%; }

#main .section2 .wrap .more {margin-top:20px; }



}





@media all and (max-width:1150px){
.section1 .wrap ul li {display:block; height:100%; position:relative; font-size:0; margin-bottom:50px; }
.section1 .wrap ul li .img_wrap {box-shadow:5px 5px 10px rgba(0,0,0,.2); display:inline-block; width:100%; vertical-align:middle; overflow:hidden; }
.section1 .wrap ul li h3 {display:block; width:90%; padding:30px 7%; margin:0 auto; box-shadow:2px 2px 10px rgba(0,0,0,.2); margin-top:-30px; border-top:3px solid #1cb14b;
										background:#fff url("../img/logo_bg.png")no-repeat calc(100% + 50px) -30px; background-size:80%; }
.section1 .wrap ul li h3:before {display:none; }
.section1 .wrap ul li:nth-child(2n) { }
.section1 .wrap ul li:nth-child(2n) .img_wrap {float:left; }
.section1 .wrap ul li:nth-child(2n) h3 {left:5%; top:100%; transform:none; position:inherit; float:left; padding:30px 7%; background-position:-50px -20px;  }


}





@media all and (max-width:1000px){

#main {background:none; }

#wrap .swiper-button-next {display:none; }
#wrap .swiper-button-prev {display:none; }






#main .section2 {padding:50px 5% 20% 5%; height:auto; }
#main .section2 .wrap h2 { float:none; color:#fff; font-size:2rem; line-height:1.8rem; text-align:left; width:100%; position:relative; left:auto; top:auto; transform:translate(0,0);  }
#main .section2 .wrap h2 span {margin-top:15px; }
.section2 .wrap ul {font-size:0; float:none; width:100%; box-shadow:5px 5px 20px rgba(0,0,0,.3); top:120%;  }
#main .section2 .wrap .more {text-indent:-9999999999999px; width:40px; height:40px; border-radius:100%; position:absolute; right:0;  top:0; margin-top:0; }
#main .section2 .wrap .more:hover {background-color:rgba(0,0,0,0); }





}




@media all and (max-width:720px){

#wrap .swiper-container .vi_box_txt p {font-size:2.5rem; }

.swiper-container {height:400px; }

.section1 .wrap ul li h3 {font-size:1.8rem; }


#main .section h2 {margin-bottom:30px; }
.section2 .wrap ul li:hover .img_wrap img {opacity:1; }
.section2 .wrap ul li:hover p {opacity:0; }
.section1 .wrap ul li h3 a {line-height:40px; width:150px; font-size:.95rem; }

.section2 .wrap ul li p {font-size:1.2rem; }


#main .section3 {margin:0 auto; }
.section3 .wrap .wrap2:before {display:none; }
.section3 .wrap .wrap2 ul li {width:50%; margin-bottom:30px;}
.section3 .wrap .wrap2 ul li:nth-child(1) { }
.section3 .wrap .wrap2 ul li:nth-child(2) {}
.section3 .wrap .wrap2 ul li:nth-child(3) {margin-bottom:0; }
.section3 .wrap .wrap2 ul li p {font-size:1rem; margin-top:10px; }

.section3 .wrap .wrap2 ul li a {width:60%; padding-bottom:60%; }



}



@media all and (max-width:500px){

#wrap .swiper-container .vi_box_txt p {font-size:2.3rem; }

.section3 .wrap .wrap2 ul li {margin-bottom:20px; }
.section3 .wrap .wrap2 ul li a {width:80%; padding-bottom:80%; }





}