@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap');

/* common */
.hidden {position: absolute; top: -9999px; left: -9999px; font-size: 0px;}
/* bgcolor */
.bg_point {background: #81bc3b!important;}
/* fontcolor */
.wht_font {color: #fff!important;}
.point_font {color: #81bc3b!important;}
/* text align */
.align_c {text-align: center;}
.wrap {position: relative; overflow: hidden;}
.header {display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; margin: 50px auto 0; z-index: 10; text-transform: uppercase;}
.logo {width: 250px;}
.logo img {width: 100%;}
.links_wrap {display: flex; justify-content: center; width: 100%; margin-top: 40px; padding: 0 20px;}
.links_wrap a {display: inline-block; width: 220px; height: 40px; background: #666; text-align: center; line-height: 35px; transition: all .3s ease-in-out;}
.links_wrap a.home_link {background: rgba(0,0,0,.7);}
.links_wrap a.blog_link {background: rgba(117, 190, 27, 0.8);}
.links_wrap a + a {margin-left: 50px;}
.links_wrap a > span {font-size: 16px; font-weight:500; line-height: 40px; color: #fff;}
.tit_wrap h2.tit,
.tit_wrap h2.tit strong {font-size: 40px; font-weight: 300;}
.tit_wrap h2.tit strong {font-weight:700;}
.tit_wrap .exp {margin-top: 30px; font-size: 25px; color: #333; font-weight: 500;}
.tit_wrap .exp + .txt {margin-top: 10px;}
.tit_wrap .tit + .txt {margin-top: 20px;}
.tit_wrap .txt {font-size: 18px; font-weight: 400; color: #888;}
.inner_wrap {width: 100%; max-width: 1200px; margin: 0 auto;}
.section_wrap {padding-bottom: 160px;}
/* main */
.main_area {position:relative; width: 100%; height: 100vh;}
.main_swiper {position: relative;}
.main_swiper .swiper-slide {display: flex; align-items: center;}
.main_swiper .swiper-slide .tit_wrap {width: 100%; max-width: 1200px; margin: 0 auto; opacity: 0;}
.main_swiper .swiper-slide-active .tit_wrap {animation: fontAni 3s; opacity: 1; transform: translateY(0px);}
@keyframes fontAni {
    from{opacity:0; transform: translateY(30px);}
    to{opacity: 1; transform: translateY(0);}
}
.main_swiper .swiper-slide .tit_wrap .tit {font-size: 70px; font-weight: 300; line-height: 1.2;}
.main_swiper .swiper-slide .tit_wrap .tit > span {font-size: 80px; font-weight: 300;}
.main_swiper .swiper-slide .tit_wrap .txt {font-size: 23px; margin-top: 30px; color: #333;}
.main_swiper .swiper-slide.one {background: url('../image/bg_main00.jpg')no-repeat center; background-size: cover;}
.main_swiper .swiper-slide.two {background: url('../image/bg_main01.jpg')no-repeat center; background-size: cover;}
.main_swiper .swiper-slide.three {background: url('../image/bg_main02.jpg')no-repeat center; background-size: cover;}
.main_swiper .swiper-slide.four {background: url('../image/bg_main03.jpg')no-repeat center; background-size: cover;}
.main_swiper .swiper-slide.five {background: url('../image/bg_main04.jpg')no-repeat center; background-size: cover;}
.section_wrap section + section {margin-top: 200px;}
.info_area .inner_wrap {padding-bottom: 150px; border-bottom: 1px solid #ddd;}
.ico_info {display: block; text-align: center;}
.ico_info img {width: 100px;}
.ico_info + .tit_wrap {margin-top: 20px;}
.service .service_list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 30px;margin-top: 50px;}
.service .service_list li {text-align: center; border-radius: 10px; overflow: hidden; height: 100%;}
.service .service_list li .txt_area {padding: 30px; height: 100%; background: #f7f7f7;}
.service .service_list li h3 {font-size: 25px; font-weight: 300;}
.service .service_list li h3 strong {font-weight: 700;}
.service .service_list li .txt_area > p {margin-top: 10px;}
.main_swiper .swiper-button-next, .main_swiper .swiper-button-prev {width: 100px; height: 100px; background: rgba(0,0,0,.3); border-radius: 50%; color: #fff; transition: all .2s ease-in-out;}
.main_swiper .swiper-button-next:hover, .main_swiper .swiper-button-prev:hover {background: rgba(129, 188, 59,.7);}
.main_swiper .swiper-button-prev {left: 5%; right: auto;}
.main_swiper .swiper-button-next {right: 5%; left: auto;}
.main_swiper .swiper-pagination-bullets.swiper-pagination-horizontal {bottom: 5%;}
.main_swiper .swiper-pagination-bullet {width: 10px; height: 10px;}
.main_swiper .swiper-pagination-bullet-active {background: rgba(117, 190, 27, 0.7);}
.entrance .entrance_step {display: flex; gap: 8%; justify-content: space-between; margin-top: 60px;}
.entrance .entrance_step li {display: flex; flex-direction: column; justify-content: center; align-self: center; position: relative; width: 20%; height: 200px; padding: 20px; background: #f7f7f7; border-radius: 50px; border: 3px solid #eee; text-align: center; font-size: 20px; font-weight: 500;}
.entrance .entrance_step li + li:before {content: ''; display: inline-block; position: absolute; top: calc(50% - 13px); left: -30%; transform: translate(-50%); width: 2px; height: 20px; background: #ddd; transform: rotate(-45deg);}
.entrance .entrance_step li + li:after {content: ''; display: inline-block; position: absolute; top: calc(50%); left: -30%; transform: translate(-50%); width: 2px; height: 20px; background: #ddd; transform: rotate(45deg);}
.location .map_area {margin-top: 60px;}
.location .map_area .gmap_canvas {overflow:hidden; background:none!important; height:420px; width:100%;}
.location .mapouter {position:relative; text-align:right; height:420px; width:100%;}
.location .traffic_list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 100px; width: 100%; max-width: 1200px; margin: 90px auto 0; padding: 0 20px;}
.location .traffic_list li {display: flex; align-items: center;}
.location .traffic_list li .icon_area > p {margin-top:10px; font-weight: 700; text-align: center;}
.location .traffic_list li .traffic_info {margin-left: 50px;}
.location .traffic_list li .traffic_info > p {margin-bottom: 10px; font-size: 20px; font-weight: 700; color: #333;}
.location .traffic_list li .traffic_info > span {display: block; margin-top: 5px; font-size: 14px; color: #999;}
.location .traffic_list .icon_area:before {content: ''; display: block; width: 175px; height: 175px;} 
.location .traffic_list .subway .icon_area:before {background: url('../image/traffic_icon_01.png');}
.location .traffic_list .bus {justify-self: flex-end;}
.location .traffic_list .bus .icon_area:before {background: url('../image/traffic_icon_02.png');}
.location .traffic_list .car .icon_area:before {background: url('../image/traffic_icon_03.png');}
.footer {padding: 60px 20px; background: #f7f7f7;}
.footer .inner_wrap {display: flex; justify-content: space-between;}
.footer .footer_logo {width: 230px;}
.footer .footer_logo img {width: 100%;}
.footer .footer_list ul {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 60px;}
.footer .footer_list li {display: flex; justify-content: flex-start;}
.footer .footer_list li > p {font-weight: 500; height: 100%; color: #666;}
.footer .footer_list li span {display: block; margin-left: 30px; padding-left: 30px; border-left: 1px solid #ddd;}
.footer .copyright {margin-top: 40px; font-size: 14px;}
.top_btn {position: fixed; bottom: 60px; right: 50px;}
.top_btn button {width: 70px; height: 70px; border-radius: 50%; border: 0; background: rgba(0,0,0,.5); color: #fff; text-transform: uppercase; font-weight: 700; z-index: 100; cursor: pointer;}
/* media query */
@media (max-width: 1500px) {
    .main_swiper .swiper-slide .tit_wrap {width: 800px; padding: 0 20px;}
}
@media (max-width: 1200px) {
    .inner_wrap {padding: 0 20px; width: 100%;}
    .main_swiper .swiper-button-next, .main_swiper .swiper-button-prev {width: 50px; height: 50px;}
    .main_swiper .swiper-button-next::after,
    .main_swiper .swiper-button-prev::after {font-size: 30px;}
    .section_wrap section + section {margin-top: 100px;}
    .service .service_list img {width: 100%;}
    .location .traffic_list {max-width: 1000px;}
    .location .traffic_list .icon_area:before {width: 90px; height: 90px; background-size: 100%!important;}
    .footer {padding: 40px 20px;}
    .footer .inner_wrap {flex-direction: column;}
    .footer .footer_logo {width: 180px;}
    .footer_list {margin-top: 30px;}
}
@media (max-width: 830px) {
    .service .service_list {gap: 20px; grid-template-columns: repeat(2, 1fr);}
    .footer_list {margin-top: 0px;}
    .footer .footer_logo {display: none;}
    .footer .footer_list ul {display: flex; flex-direction: column;}
}
@media (max-width: 768px) {
    .main_swiper .swiper-slide .tit_wrap {width: 90%; text-align: center; padding: 30px 20px; background: rgba(255,255,255,.9);}
    .main_swiper .swiper-slide .tit_wrap .tit {font-size: 40px; line-height: 38px;}
    .main_swiper .swiper-slide .tit_wrap .tit > span {font-size: 40px; color: #81bc3b!important;}
    .main_swiper .swiper-slide .tit_wrap .txt {margin-top: 10px; font-size:16px;}
    .tit_wrap h2.tit, .tit_wrap h2.tit strong {font-size: 30px;}
    .info_area .inner_wrap {padding-bottom: 80px;}
    .ico_info img {width: 80px;}
    .links_wrap a {width: 100%;}
    .links_wrap a + a {margin-left: 30px;}
    .main_swiper .swiper-slide {background-position: 80%!important;}
    .service .service_list li .txt_area {padding: 20px;}
    .service .service_list li .txt_area > h3 {font-size: 18px;}
    .service .service_list li .txt_area > p {font-size: 16px;}
    .entrance .entrance_step {flex-direction: column; row-gap: 50px;}
    .entrance .entrance_step li {width: 80%; padding: 20px; font-size: 20px; height: 150px;}
    .entrance .entrance_step li + li:after,
    .entrance .entrance_step li + li:before {top: -25%; left: 50%; transform: translateX(-50%), rotate(-45deg);}
    .entrance .entrance_step li + li:before {left: calc(50% - 7px);}
    .entrance .entrance_step li + li:after {left: calc(50% + 7px); transform: translateX(-50%), rotate(-45deg);}
    .location .traffic_list {display: flex; flex-direction: column; align-items: center; padding: 0 10%; gap: 50px;}
    .location .traffic_list li .traffic_info {margin-left: 0;}
    .location .traffic_list li .icon_area > p {font-size: 16px;}
    .location .traffic_list li .traffic_info > p {font-size: 16px;}
    .location .traffic_list li {flex-direction: column; align-items: center; text-align: center;}
    .location .map_area {margin-top: 40px;}
    .tit_wrap .txt br {display: none;}
    .top_btn {position: fixed; bottom: 40px; right: 30px;}
    .top_btn button {width: 50px; height: 50px; border-radius: 50%; border: 0; background: rgba(0,0,0,.5); color: #fff; text-transform: uppercase; font-weight: 700; z-index: 100; cursor: pointer;}
}   
@media (max-width: 425px) {
    .tit_wrap .txt {font-size: 16px;}
    .service .service_list li .txt_area > h3 {font-size: 14px;}
    .service .service_list li .txt_area > p {font-size: 13px;}
    .footer {padding: 40px 0;}
    .footer .footer_list li {flex-direction: column;}
    .footer .footer_list li span {margin:0; padding: 0; border: 0; font-size: 13px;}
    .footer .copyright {font-size: 11px;}
}