@charset "utf-8";

*{box-sizing: border-box;}
.page-section{box-sizing: border-box; margin-bottom: 4rem; }
.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%; margin: 0 auto; max-width: 1440px;}

.ver-line{width: 1px; height: 100px; background-color: #000; margin: 0 auto;}
.ver-line.ani{transform: translateY(100px); opacity: 0; transition: 1s;}
.ver-line.ani.act{transform: translateY(0); opacity: 1;}

.page-tit{margin-bottom: 3rem; text-align: center;}
.page-tit > h2{font-size: 35px; margin-bottom: 1rem; transform: translateY(100px); opacity: 0; transition: 1s; line-height: 1;}
.page-tit > h5{font-size: 20px; font-weight: 400; transform: translateY(100px); opacity: 0; transition: 1s;}
.page-tit > h2.ani.act{transform: translateY(0); opacity: 1;}
.page-tit > h5.ani.act{transform: translateY(0); opacity: 1;}

.about-wrap{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap;}
.about-box{width: 32%; margin-bottom: 1.5rem; transform: translateY(100px); opacity: 0; transition: 1s;}
.about-img{margin-bottom: 10px;}
.about-img img{width: 100%;}
.about-img-tit > p{font-size: 14px;}

.about-box.ani.act{transform: translateY(0); opacity: 1;}

.page-section.grey{padding: 4rem 0; background-color: #F8F8F8;}

.about-table{width: 100%; display: flex; justify-content: space-between; margin-bottom: 8px; transform: translateY(100px); opacity: 0; transition: 1s;}
.about-table:last-child{margin-bottom: 0;}
.at-tit{width: 19.5%; padding: 1.5rem 15px; background-color: #0056A5; text-align: center;}
.at-tit > h5{font-size: 14px; color: #fff;}
.at-cont{width: 80%; padding: 1.5rem 15px; text-align: center; background-color: #fff;}
.at-cont > p{color: #000; font-size: 14px; font-weight: 400;}
.at-cont > p > span{color: #666; font-weight: 300;}
.about-table.ani.act{transform: translateY(0); opacity: 1;}

.history-wrap{width: 100%; display: flex; justify-content: space-between; padding-top: 1rem;}
.history-box{width: 49%;}
.history-cont{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 2rem; position: relative;}
.history-cont::before{content: ""; width: 1px; height: calc(100% - 2rem); background-color: #ddd; position: absolute; top: 7px; left: 12.5%;}
.hc-year{width: 10%; margin-bottom: 1rem;}
.hc-cont{width: 85%; margin-bottom: 1rem;}
.hc-year > h3{font-size: 20px; color: #888; line-height: 1;}
.hc-cont > p{color: #000; font-size: 14px;}
.history-cont.ani{transform: translateY(100px); opacity: 0; transition: 1s;}
.history-cont.ani.act{transform: translateY(0); opacity: 1;}

.greet-wrap{width: 100%; display: flex; justify-content: space-between; }
.greet-img{width: 40%; text-align: center; transform: translateY(100px); opacity: 0; transition: 1s;}
.greet-img.ani.act{transform: translateY(0); opacity: 1;}
.greet-caption{width: 55%;}
.greet-caption > h3{font-size: 30px; margin-bottom: 3rem; transform: translateX(100px); opacity: 0; transition: 1s;}
.greet-caption > p{font-size: 16px; margin-bottom: 3rem; font-weight: 400; color: #666; transform: translateX(100px); opacity: 0; transition: 1s;}
.greet-caption > h5{font-size: 16px; font-family: 'Gowun Batang'; text-align: right; transform: translateX(-100px); opacity: 0; transition: 1s;}
.greet-caption > h5 > span{color: #666; font-weight: 400; margin-left: 10px;}

.greet-caption > h3.ani.act{transform: translateY(0); opacity: 1;}
.greet-caption > p.ani.act{transform: translateY(0); opacity: 1;}
.greet-caption > h5.ani.act{transform: translateY(0); opacity: 1;}

.og-img.ani{transform: translateY(100px); opacity: 0; transition: 1s;}
.og-img.ani.act{transform: translateY(0); opacity: 1;}
.og-img img{width: 100%;}
.page-tit.og > h2{line-height: 1.5;}

.page-caption{padding: 3rem; background-color: #0D2237; color: #fff; border-radius: 50px 0 50px 0; transform: translateY(100px); opacity: 0; transition: 1s;}
.page-caption.ani.act{transform: translateY(0); opacity: 1;}
.page-caption > h4{font-size: 16px; font-weight: 500; line-height: 1.8;}
.page-caption > h4.txt-center{text-align: center;}
.page-caption > h5{font-size: 16px; font-weight: 500; padding-bottom: 1rem; margin-bottom: 1rem; position: relative; text-align: center;}
.page-caption > h5::after{content: ""; width: 60px; height: 1px; background-color: #ddd; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
.page-caption > p{font-size: 16px; font-weight: 300; text-align: center;}

.support-wrap{width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; transform: translateY(100px); opacity: 0; transition: 1s;}
.support-wrap:last-child{margin-bottom: 0;}
.support-wrap:nth-child(even){flex-direction: row-reverse;}
.support-box{width: 48%;}
.support-box img{width: 100%;}
.support-box > h3{font-size: 24px; padding-bottom: 1.5rem; margin-bottom: 1.5rem; position: relative;}
.support-box > h3::after{content: ""; width: 50px; height: 1px; background-color: #ddd; position: absolute; bottom: 0; left: 0;}
.support-box > p{font-size: 16px; color: #666; font-weight: 400;}
.support-wrap.ani.act{transform: translateY(0); opacity: 1;}

.sp-wrap{width: 100%; display: flex; flex-wrap: wrap; border-top: 2px solid #0D2237; transform: translateY(100px); opacity: 0; transition: 1s;}
.sp-wrap .sp-box{border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 2rem 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.sp-wrap .sp-box:last-child{border-right: 0;}
.sp-wrap.sw4 .sp-box{width: 25%;}
.sp-wrap.sw4 .sp-box:nth-child(4){border-right: 0;}
.sp-wrap.sw3 .sp-box{width: calc(100% / 3);}
.sp-wrap.sw2 .sp-box{width: 50%;}
.sp-tit > h5{font-size: 16px; color: #333; font-weight: 500; text-align: center;}
.sp-wrap.ani.act{transform: translateY(0); opacity: 1;}
.swlist .sp-tit > h5{margin-bottom: 10px;}
.swlist .sp-tit > p{font-size: 14px; color: #666; text-align: center;}
.sp-icon{text-align: center; margin-bottom: 1rem;}
.sp-icon img{width: 100%; max-width: 100px;}

.swlist{width: 100%; display: flex; justify-content: space-between; align-items: center; transform: translateY(100px); opacity: 0; transition: 1s;}
.swlist .sl-box{width: 30%; padding: 2rem 15px; background-color: #f5f5f5; border-radius: 15px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative;}
.sl-arrow{width: 50px; height: 50px; text-align: center; position: absolute; top: 50%; right: -60px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center;}
.sl-arrow > p{color: #ddd; line-height: 1; font-size: 40px;}
.sl-num{width: 40px; height: 40px; border-radius: 50%; background-color: #fff; text-align: center; color: #333; position: absolute; top: 1rem; left: 1rem; line-height: 40px;}
.sl-num > h3{font-size: 18px;}
.swlist.ani.act{transform: translateY(0); opacity: 1;}

.page-section.grey-box{padding: 4rem; background-color: #f5f5f5; border-radius: 100px 0 100px 0;}

.busi-tit{margin-bottom: 3rem; transform: translateY(100px); opacity: 0; transition: 1s;}
.busi-tit > h2{font-size: 30px; line-height: 1; display: inline-block; position: relative;}
.busi-tit > h2::after{content: ""; width: 8px; height: 8px; background-color: #000; border-radius: 50%; position: absolute; right: -15px; bottom: 2px;}
.busi-cont > h5{font-size: 18px; margin-bottom: 1.5rem; line-height: 1;}
.busi-cont > ul{padding-left: 1rem; margin-left: 1rem;}
.busi-cont > ul > li{list-style: circle; font-size: 16px; margin-bottom: 10px; color: #666;}
.busi-cont > ul > li:last-child{margin-bottom: 0;}
.busi-cont > ol{padding-left: 1rem; margin-left: 1rem;}
.busi-cont > ol > li{list-style: decimal; font-size: 16px; margin-bottom: 10px; color: #666;}
.busi-cont > ol > li:last-child{margin-bottom: 0;}
.busi-wrap{transform: translateY(100px); opacity: 0; transition: 1s; margin-bottom: 3rem;}
.busi-wrap:last-child{margin-bottom: 0;}
.busi-wrap.ani.act{transform: translateY(0); opacity: 1;}
.busi-tit.ani.act{transform: translateY(0); opacity: 1;}

.map-wrap{width: 100%; display: flex; justify-content: space-between; align-items: center; transform: translateY(100px); opacity: 0; transition: 1s;}
.map-box{width: 50%;}
.map-box .root_daum_roughmap{width: 100%;}
.map-box .root_daum_roughmap .wrap_controllers{display: none;}
.map-box:last-child{padding-left: 4rem;}
.map-box > h2{font-size: 30px; margin-bottom: 1.5rem; padding-bottom: 1.5rem; position: relative;}
.map-box > h2::after{content: ""; width: 50px; height: 1px; background-color: #ddd; position: absolute; bottom: 0; left: 0;}
.map-box > ul > li{font-size: 18px; color: #666; margin-bottom: 1rem;}
.map-box > ul > li:last-child{margin-bottom: 0;}
.map-box > ul > li > span{display: inline-block; width: 20px; text-align: center; margin-right: 10px; color: #0056A5;}
.map-wrap.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;}
}

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

  .page-tit{margin-bottom: 1.5rem;}
  .page-tit > h2{font-size: 22px; margin-bottom: 10px;}
  .page-tit > h5{font-size: 16px;}

  .about-box{width: 100%;}
  .about-table{flex-direction: column;}
  .at-tit{padding: 1rem 15px; width: 100%;}
  .at-cont{padding: 1rem 15px; width: 100%;}

  .history-wrap{flex-direction: column;}
  .history-box{width: 100%;}
  .history-cont{flex-direction: column; padding-left: 1rem;}
  .history-cont::before{left: 0;}
  .hc-year{width: 100%;}
  .hc-cont{width: 100%;}

  .greet-wrap{flex-direction: column;}
  .greet-img{width: 100%; margin-bottom: 1.5rem;}
  .greet-caption{width: 100%;}
  .greet-caption > h3{font-size: 18px; line-height: 1.4;}
  .greet-caption > p{font-size: 14px;}
  .greet-caption > h5{font-size: 14px;}

  .page-caption{padding: 2rem 15px; border-radius: 30px 0 30px 0;}
  .page-caption > h4{font-size: 14px; line-height: 1.5;}
  .support-wrap{flex-direction: column; margin-bottom: 2rem;}
  .support-wrap:nth-child(even){flex-direction: column;}
  .support-box{width: 100%; margin-bottom: 1.5rem;}
  .support-box > h3{font-size: 20px; padding-bottom: 1rem; margin-bottom: 1rem;}
  .support-box > p{font-size: 14px;}

  .swlist{flex-direction: column;}
  .swlist .sl-box{width: 100%; margin-bottom: 1rem;}
  .sl-arrow{display: none;}

  .sp-wrap{flex-direction: column;}
  .sp-wrap .sp-box{width: 100%;}
  .sp-wrap.sw4 .sp-box{width: 100%; border-right: 0;}
  .sp-wrap.sw3 .sp-box{width: 100%;}
  .sp-wrap.sw2 .sp-box{width: 100%;}

  .page-section.grey-box{padding: 3rem 0; border-radius: 50px 0 50px 0;}
  .busi-tit{margin-bottom: 2rem;}
  .busi-tit > h2{font-size: 24px;}
  .busi-cont > h5{font-size: 16px; margin-bottom: 1rem;}
  .busi-cont > ul{padding-left: 10px; margin-left: 10px;}
  .busi-cont > ol{padding-left: 10px; margin-left: 10px;}
  .busi-cont > ul > li{font-size: 14px; margin-bottom: 7px;}
  .busi-cont > ol > li{font-size: 14px; margin-bottom: 7px;}
  .busi-wrap{margin-bottom: 1.5rem;}

  .map-wrap{flex-direction: column;}
  .map-box{width: 100%;}
  .map-box:last-child{padding-left: 0; padding-top: 1.5rem;}
  .map-box .root_daum_roughmap .wrap_map{height: 300px !important;}
  .map-box > h2{font-size: 22px; margin-bottom: 1rem; padding-bottom: 1rem;}
  .map-box > ul > li{font-size: 16px; margin-bottom: 10px;}
  .map-box > ul > li > span{margin-right: 5px;}
  
}
@media(max-width:600px){
  
}