@charset "utf-8";

*{box-sizing: border-box;}
.page-section{box-sizing: border-box; margin-bottom: 4rem; overflow: hidden;}
.page-section.title{overflow: visible;}
.border-b{border-bottom: 1px solid #ddd; padding-bottom: 4rem;}
.mb-0{margin-bottom: 0 !important;}
.pb-0{padding-bottom: 0 !important;}
.page-con{width: 100%; padding: 0 2rem;}
.pg-con{width: 100%; max-width: 1440px; margin: 0 auto;}

.ver-line{width: 1px; height: 100px; background-color: #000; margin: 0 auto;}

.trans{color: transparent !important;}

.section-fullpage.fp-bg {
  width: 100%;
  background-color: #333;
  background-size: cover;
  background-position: center center;
  transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: -1;
}

.page-tit{text-align: center; color: #fff;}
.page-tit > h2{font-size: 30px; position: relative; padding-bottom: 1rem; margin-bottom: 1rem;}
.page-tit > h2::after{content: ""; width: 150px; height: 1px; background-color: #fff; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
.page-tit > p{font-size: 20px; font-weight: 400; line-height: 1.5;}

/* mouse-s */
.mouse-s{width: 100%; text-align: center; z-index: 8; color: #fff; position: absolute; left: 0; bottom: 3rem;}
.mouse-s > span{display: block; font-size: 18px; transition: all 1s ease-in-out; animation: mousey 1.5s infinite;}

.mouse-line{width: 1px; height: 80px; background-color: rgba(255, 255, 255, 0.6); margin: 1rem auto;}

.mouse{position: relative; border: 2px solid rgba(255, 255, 255, 0.8); width: 30px; height: 50px; border-radius: 30px; margin: 0 auto;}
.mouse .wheel{position: absolute; left: 50%; margin-left: -2px; width: 4px; height: 10px; background-color: rgba(255, 255, 255, 0.9); border-radius: 3px; animation: wheel 1.5s ease infinite;}

@keyframes mousey{
	0%{opacity: 0; transform: translateY(0);}
	100%{opacity: 1; transform: translateY(10px);}
}
@keyframes wheel{
	0%{opacity: 0; top: 5px;}
	100%{opacity: 1; top: 1rem;}
}

.page-cont{padding-top: 1.5rem;}

.about-cont{width: 100%; max-width: 1024px; margin: 0 auto;}
.about-map{margin-bottom: 1rem;}
.about-cont > ul > li{display: inline-block; margin-right: 1rem; padding-right: 1rem; position: relative; color: #fff; font-size: 14px; font-weight: 400;}
.about-cont > ul > li > span{font-weight: 700;}
.about-cont > ul > li::before{content: ""; width: 1px; height: 12px; background-color: #ddd; position: absolute; top: 5px; right: -2px;}
.about-cont > ul > li:last-child::before{display: none;}

.about-map .root_daum_roughmap{width: 100%;}
.about-map .root_daum_roughmap .wrap_controllers{display: none;}

.oc-wrap{width: 100%; display: flex; justify-content: space-between;}
.oc-box{width: 24%; border-radius: 10px; overflow: hidden;}
.oc-box img{width: 100%; transform: translateY(3px); border-radius: 10px 10px 0 0;}
.oc-tit{padding: 2rem 15px; text-align: center; background-color: #fff;}
.oc-tit > h3{font-size: 22px; margin-bottom: 1rem; color: #000;}
.oc-tit > p{font-size: 16px; color: #666;}

.f-page-tit{text-align: center; color: #fff;}
.f-page-tit > h5{font-size: 18px; font-weight: 400;}
.f-page-tit > h2{font-size: 34px; margin-bottom: 1rem;}

.f-page-tit.busi > h2.ani{transform: translateY(100px); opacity: 0; transition: 1s;}
.f-page-tit.busi > h2.act{transform: translateY(0); opacity: 1;}
.f-page-tit.busi > h5.ani{transform: translateY(100px); opacity: 0; transition: 1s;}
.f-page-tit.busi > h5.act{transform: translateY(0); opacity: 1;}

.busi-main{width: 100%; height: 100vh; background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; background-color: #000;}
.f-page-tit.busi{width: 100%; padding: 0 15px; position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; left: 0;}

.fc-wrap{padding: 80px 0;}
.fc-flex{display: flex; width: 100%; align-items: center;}
.fc-img{width: 63%;}
.fc-txt{width: 37%;}
.fc-txt > h5{color: #1c747d; font-size: 16px; margin-bottom: 12px; font-weight: 400; transform: translateY(50px); opacity: 0; transition: .5s;}
.fc-txt > h2{font-size: 48px; margin-bottom: 18px; transform: translateY(50px); opacity: 0; transition: .7s;}
.fc-txt > h3{font-size: 20px; margin-bottom: 2px; font-weight: 500; transform: translateY(50px); opacity: 0; transition: .9s;}
.fc-txt > p{font-size: 16px; color: #666; transform: translateY(50px); opacity: 0; transition: 1s;}
.fc-wrap.lt{padding-right: 2rem;}
.fc-flex.lt .fc-txt{padding-left: 9%;}
.fc-wrap.rt{padding-left: 2rem;}
.fc-flex.rt .fc-txt{padding-left: 5%; padding-right: 5%;}
.fc-txt > h5.ani.act{transform: translateY(0); opacity: 1;}
.fc-txt > h2.ani.act{transform: translateY(0); opacity: 1;}
.fc-txt > h3.ani.act{transform: translateY(0); opacity: 1;}
.fc-txt > p.ani.act{transform: translateY(0); opacity: 1;}

.event-wrap{padding: 80px 0;}
.es-wrap{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap;}
.es-box{width: 32.3333%; margin-bottom: 1.5rem; border: 1px solid #ddd; border-radius: 10px; padding: 2rem; text-align: center;}
.es-icon{margin-bottom: 1rem;}
.es-icon img{width: 100%; max-width: 120px;}
.es-box > h3{font-size: 24px; color: #000;}
.es-box > ul{margin-top: 1rem;}
.es-box > ul > li{font-size: 16px; color: #666; margin-bottom: 10px; line-height: 1;}
.es-box > ul > li:last-child{margin-bottom: 0;}

.es-box.ani{transform: translateY(100px); opacity: 0; transition: 1s;}
.es-box.ani.act{transform: translateY(0); opacity: 1;}

/* media-query */

@media(min-width:992px){
  .pt-3{padding-top: 3rem;}
  .pt-5{padding-top: 5rem;}
  .d-lg-block{display: block;}
  .d-lg-none{display: none;}

  .about-cont > ul > li > span > i{margin-right: 5px;}

}
@media(max-width:1700px){
  .fc-flex.lt .fc-txt{padding-left: 7%;}
  .fc-txt > h2{font-size: 40px;}
  .fc-txt > h3{font-size: 18px;}
}
@media(max-width:991px){
  .d-block{display: block;}
  .d-none{display: none;}
  .page-section{margin-bottom: 2rem;}
  .ver-line{height: 50px;}
  .page-con{padding: 0 15px;}
  .pg-con{padding: 0 15px;}

  .mouse-s{display: none;}

  .section-fullpage.m-auto{height: auto !important;}
  .m-auto > .fp-tableCell{height: auto !important;  padding: 50px 0;}

  .page-tit > h2{font-size: 24px;}
  .page-tit > h2::after{width: 100px;}
  .page-tit > p{font-size: 16px;}

  .about-map .root_daum_roughmap .wrap_map{height: 300px !important;}
  .about-cont > ul > li{display: block; padding-right: 0; margin-right: 0;}
  .about-cont > ul > li::before{display: none;}

  .oc-wrap{flex-direction: column;}
  .oc-box{width: 100%; margin-bottom: 1rem;}
  .oc-box:last-child{margin-bottom: 0;}

  .fc-flex{flex-direction: column;}
  .fc-wrap.lt{padding-right: 15px;}
  .fc-wrap.rt{padding-left: 15px;}
  .fc-flex.rt{flex-direction: column-reverse;}
  .fc-img{width: 100%;}
  .fc-txt{width: 100%;}
  .fc-wrap{padding: 40px 0;}
  .fc-wrap:first-child{padding-top: 0;}
  .fc-flex.lt .fc-txt{padding: 1.5rem 15px 0;}
  .fc-flex.rt .fc-txt{padding: 1.5rem 15px 0;}
  .fc-txt > h5{font-size: 15px; margin-bottom: 8px;}
  .fc-txt > h2{font-size: 24px; margin-bottom: 10px;}
  .fc-txt > h3{font-size: 16px;}
  .fc-txt > p{font-size: 14px;}

  .es-wrap{flex-direction: column;}
  .es-box{width: 100%; margin-bottom: 1rem;}

  .es-box > h3{font-size: 18px;}
  .es-box > ul > li{font-size: 14px;}

  .oc-box img{transform: translateY(5px);}
  .oc-tit{padding: 1.5rem 15px;}
  .oc-tit > h3{font-size: 20px; margin-bottom: 10px;}
  .oc-tit > p{font-size: 14px;}
  
  
}
@media(max-width:600px){
  
}

.ulani{ position:relative; z-index:-1; }
.ulani:before{ content:''; position:absolute; z-index:-1; bottom:0; left:0; height:45%; width:100%; background-color:#87741a; transform:scaleX(0); transform-origin:left; transition:1s transform 1s linear; }
.ulani.del-1:before{ transition-delay:2s; }
.ulani.del-2:before{ transition-delay:3s; }
.ulani.del-3:before{ transition-delay:4s; }
.ulani.del-4:before{ transition-delay:5s; }
.ulani.del-5:before{ transition-delay:6s; }
.ulani.act:before{ transform:scaleX(1); }
.section-fullpage.active .ulani:before{ transform:scaleX(1); }

@media(max-width:991px){
  .ulani:before{ transition:1s transform 0s linear; }
  .ulani.del-1:before{ transition-delay:1s; }
  .ulani.del-2:before{ transition-delay:2s; }
  .ulani.del-3:before{ transition-delay:3s; }
  .ulani.del-4:before{ transition-delay:4s; }
  .ulani.del-5:before{ transition-delay:5s; }
}