/*
* OLYM Cascading Style Sheets
* File Name : main.css
* Description : 메인 스타일시트
* Author : Web business Team / Kim min yi
* Email : odesign@olym.co.kr
* Date : 2024.11.15
* Update : 2024.11.15
* Copyright(c) 2024 OLYM Communications. All Rights Reserved.
*/

/* ========== common ========== */
h3.h_tit { margin-bottom: 30px;}
@media all and (max-width: 800px) {
  h3.h_tit { margin-bottom: 20px;}
}

@keyframes bg-animation { from { background-size: 110% auto; } to { background-size: 100% auto;} }
@media all and (max-width: 1900px) {
  @keyframes bg-animation { from { background-size: auto 110%; } to { background-size: auto 100%;} }
}
/* ========== // common ========== */


/* ========== main ========== */
#main { margin-bottom: 120px;}

#main .mySwiper1 { width: auto; height: 750px; border-radius: 30px; overflow: hidden; position: relative; }
#main .mySwiper1 .swiper-wrapper .swiper-slide.bg1 { background: url('/project/design/main/bg_main1.jpg') no-repeat center center; animation: bg-animation 3s ease-in-out;}
#main .mySwiper1 .swiper-wrapper .swiper-slide.bg2 { background: url('/project/design/main/bg_main2.jpg') no-repeat center center; animation: bg-animation 3s ease-in-out;}
#main .mySwiper1 .swiper-wrapper .swiper-slide.bg3 { background: url('/project/design/main/bg_main3.jpg') no-repeat center center; animation: bg-animation 3s ease-in-out;}

#main .mySwiper1 .swiper-wrapper .swiper-slide .desc_box { position: absolute; left: 10%; top: 26%; display: flex; flex-direction: column; gap: 20px; width: 1400px;}
#main .mySwiper1 .swiper-wrapper .swiper-slide .desc_box > h2.h_tit { color: #fff; }
#main .mySwiper1 .swiper-wrapper .swiper-slide .desc_box > h2.h_tit > span { color: #B2C9FF; }
#main .mySwiper1 .swiper-wrapper .swiper-slide .desc_box > p { line-height: 2.2rem; font-size: 19px; font-weight: 400; color: rgba(255, 255, 255, .65); }

#main .mySwiper1 .swiper-btn { position: absolute; left: 10%; top: 20%; width: 200px; height: auto; display: flex; flex-direction: row; }
#main .mySwiper1 .swiper-button-prev { background-image: url('/project/design/common/icon_main_prev.png'); background-size: 100%; left: 0; }
#main .mySwiper1 .swiper-button-next { background-image: url('/project/design/common/icon_main_next.png'); background-size: 100%; right: 0; }
#main .mySwiper1 .swiper-pagination { width: auto; height: 25px; display: flex; flex-direction: row; align-items: center; gap: 20px; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; font-family: 'Montserrat'; font-size: 19px; font-weight: 800;}
#main .mySwiper1 .swiper-pagination > .line { display: block; width: 1px; height: 12px; background: rgba(255, 255, 255, .7); }
#main .mySwiper1 .swiper-pagination-total { font-weight: 300; color: rgba(255, 255, 255, .7); }
#main .mySwiper1 #playPauseBtn { position: absolute; right: -30%; top: 50%; transform: translate(0, -50%); z-index: 10; display: flex; justify-content: center; align-items: center; width: 28px; height: 28px; border-radius: 50px; background: rgba(0, 0, 0, .2); font-size: 15px; color: #fff; font-weight: bold; }

@media all and (max-width: 1700px) {
  #main .mySwiper1 .swiper-wrapper .swiper-slide .desc_box { width: 70%; }
}
@media all and (max-width: 1024px) {
  #main .mySwiper1 { height: 600px; }
  #main .mySwiper1 .swiper-wrapper .swiper-slide .desc_box > p { font-size: 17px; line-height: 1.8rem;}
}
@media all and (max-width: 800px) {
  #main { margin-bottom: 40px;}
  #main .mySwiper1 { height: 500px; }
  #main .mySwiper1 .swiper-wrapper .swiper-slide.bg1 { background-position: 70%; background-size: cover; }
  #main .mySwiper1 .swiper-wrapper .swiper-slide.bg2 { background-position: 50%; background-size: cover; }
  #main .mySwiper1 .swiper-wrapper .swiper-slide.bg3 { background-position: 20%; background-size: cover; }
  #main .mySwiper1 .swiper-wrapper .swiper-slide .desc_box { width: 90%; top: 17%; padding-right: 40px;}
  #main .mySwiper1 .swiper-wrapper .swiper-slide .desc_box > p { font-size: 14px; line-height: 1.4rem; }

  #main .mySwiper1 .swiper-btn { width: 140px; top: 12%; }
  #main .mySwiper1 .swiper-button-prev { background-size: 80%; }
  #main .mySwiper1 .swiper-button-next { background-size: 80%; }
  #main .mySwiper1 .swiper-pagination { font-size: 14px; gap: 10px; }
  #main .mySwiper1 #playPauseBtn { width: 26px; height: 26px; font-size: 13px; }
}
/* ========== // main ========== */


/* ========== section1 ========== */
#section1 { margin-bottom: 120px; position: relative; }
#section1::before { margin-bottom: 120px; position: absolute; right: 0; bottom: -55%; content: ''; background: url('/project/design/main/bg_busi.png') no-repeat center center; width: 1080px; height: 770px; z-index: -999;}
#section1 .mySwiper2 { width: 100%; height: 100%; overflow: hidden; }
#section1 .swiper-wrapper .swiper-slide { width: 1055px ; flex-direction: column; align-items: center; }
#section1 .swiper-slide .img_box > img { width: 100%; border-radius: 15px; }

#section1 .swiper-slide .desc_box { opacity: 0; padding: 40px; width: 100%; height: 300px; display: flex; flex-direction: row; gap: 40px; justify-content: space-between; color: #000; }
#section1 .swiper-slide .desc_box.on { opacity: 1; }
#section1 .swiper-slide .desc_box .left { flex-direction: column; gap: 10px;}
#section1 .swiper-slide .desc_box .left > span { font-size: 18px; font-weight: 700;  }
#section1 .swiper-slide .desc_box .right { border-left: 1px solid #ddd; padding-left: 40px; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
#section1 .swiper-slide .desc_box .right > p { font-size: 17px; font-weight: 400; color: #333; line-height: 2rem;}

#section1 .mySwiper2 .swiper_btn2 { position: absolute; left: 21%; top: 90%; }
#section1 .mySwiper2 .swiper-button-prev,
#section1 .mySwiper2 .swiper-button-next { background-image: none; width: 54px; height: 54px; border-radius: 50%; background: #ECECEC; }
#section1 .mySwiper2 .swiper-button-prev { left: -30px; }
#section1 .mySwiper2 .swiper-button-next { left: 45px; }
#section1 .mySwiper2 .swiper-button-prev::after { content: ''; width: 50px; height: 50px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: url('/project/design/common/icon_main_prev.png') no-repeat center center; background-size: 50%;   filter: opacity(0.5) drop-shadow(0 0 0 #000000); }
#section1 .mySwiper2 .swiper-button-next::after { content: ''; width: 50px; height: 50px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: url('/project/design/common/icon_main_next.png') no-repeat center center; background-size: 50%; filter: opacity(0.5) drop-shadow(0 0 0 #000000);  }
#section1 .mySwiper2 .swiper-button-prev:hover,
#section1 .mySwiper2 .swiper-button-next:hover {  background: #00257E; }
#section1 .mySwiper2 .swiper-button-prev:hover::after,
#section1 .mySwiper2 .swiper-button-next:hover::after { filter: drop-shadow(0 0 0 #fff);}

@media all and (max-width: 1440px) { 
  #section1 .swiper-slide .img_box { width: 100%; }
  #section1 .swiper-slide .desc_box { width: 100%; padding: 40px 0; gap: 20px; }
}
@media all and (max-width: 1024px) { 
  #section1 .swiper-slide .img_box { width: 130%;}
  #section1 .swiper-slide .img_box > img { width: 100% !important; border-radius: 10px;}
  #section1 .swiper-slide .desc_box { width: 130%; padding: 30px 0; }
  #section1 .swiper-slide .desc_box .left > span { font-size: 16px; }
  #section1 .swiper-slide .desc_box .right { border-left: 1px solid #ddd; padding-left: 20px;  }
  #section1 .swiper-slide .desc_box .right > p { font-size: 15px; line-height: 1.6rem; letter-spacing: -.3px; }
  #section1 .mySwiper2 .swiper_btn2 { left: 15%; }
}
@media all and (max-width: 800px) { 
  #section1 { margin-bottom: 0; }
  #section1::before { background-size: 100%; width: 100%;  margin-bottom: 40px; position: absolute; right: 0; bottom: -70%; }

  #section1 .swiper-slide .img_box { width: 130%;}
  #section1 .swiper-slide .img_box > img { width: 100% !important; border-radius: 10px;}
  #section1 .swiper-slide .desc_box { width: 130%; padding: 20px 0; height: 300px; justify-content: normal; flex-direction: column; gap: 20px; }
  #section1 .swiper-slide .desc_box .left > span { font-size: 14px; }
  #section1 .swiper-slide .desc_box .right { border: none; padding-left: 0; flex-direction: column-reverse; gap: 20px; }
  #section1 .swiper-slide .desc_box .right > p { font-size: 14px; font-weight: 400; color: #333; line-height: 1.4rem; }

  #section1 .mySwiper2 .swiper_btn2 { left: 10%; top: 85%; }
  #section1 .mySwiper2 .swiper-button-prev, #section1 .mySwiper2 .swiper-button-next { width: 40px; height: 40px;  }
  #section1 .mySwiper2 .swiper-button-prev::after, #section1 .mySwiper2 .swiper-button-next::after { width: 40px; }
  #section1 .mySwiper2 .swiper-button-prev { left: 0px; }
  #section1 .mySwiper2 .swiper-button-next { left: 50px; }
}
/* ========== // section1 ========== */


/* ========== section2 ========== */
#section2 { margin-bottom: 100px; height: 920px; }
#section2 .bg_box > img { z-index: -1; border-radius: 0 80px 0 0; position: absolute; left: -10%;}

#section2 .sec2_box { padding-top: 110px; display: flex; flex-direction: row; align-items: flex-end; width: 100%; }
#section2 .left { width: 100%; height: 700px; display: flex; flex-direction: column; justify-content: space-between; }
#section2 .left > ul.tab_type1 { display: flex; flex-direction: column; gap: 20px;}
#section2 .left > ul.tab_type1 > li > a { width: 400px; height: 70px; display: flex; align-items: center; justify-content: flex-start;  padding: 20px 40px; border: 1px solid #ddd; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(5px); font-size: 18px; font-weight: 600; color: #999; text-align: left; border-radius: 35px; box-sizing: border-box; position: relative; }
#section2 .left > ul.tab_type1 > li > a::before {  content: ''; position: absolute; right: 10%; top: 50%; transform: translate(0, -50%); background: url('/project/design/common/icon_main_next.png') no-repeat center center; background-size: 100%; width: 20px; height:  20px; filter: opacity(0.5) drop-shadow(0 0 0 #000000); }
#section2 .left > ul.tab_type1 > li > a.on { background: linear-gradient(to right, #00257E, #00133F); border: 1px solid #00257E; color: #fff; }
#section2 .left > ul.tab_type1 > li > a.on::before { filter: opacity(1) drop-shadow(0 0 0 #fff); }
#section2 .right { margin-left: 13%; }
#section2 .right .tab_box { position: relative; }
#section2 .right .tab_box .img_box > img { border-radius: 80px 0 0 0; }
#section2 .right .tab_box .desc_box { width: 70%; position: absolute; bottom: 10%; left: 10%; color: #fff; font-size: 22px; font-weight: 300; line-height: 2.5rem;}
#section2 .right .tab_box .desc_box > b { font-size: 35px; font-weight: 800;}

@media all and (max-width: 1700px) { 
#section2 { margin-bottom: 80px; height: auto; }
#section2 .left > ul.tab_type1 > li > a { width: 350px; height: 60px; padding: 30px; font-size: 16px; }
#section2 .right { width: 100%; margin-left: 5%; }
#section2 .right .tab_box .desc_box { bottom: 8%; left: 10%; font-size: 18px; }
#section2 .right .tab_box .desc_box > b { font-size: 30px; }
}

@media all and (max-width: 1440px) {
  #section2 .right .tab_box .desc_box { width: 60%;}
}
@media all and (max-width: 1260px) {
  #section2 { height: auto; }
  #section2 .sec2_box { padding-top: 30px; flex-direction: column; gap: 30px;}
  #section2 h3.h_tit { margin-bottom: 0; }
  #section2 .bg_box > img { height: auto; left: -10%;}

  #section2 .left { height: auto; gap: 20px; }
  #section2 .left > ul.tab_type1 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;}
  #section2 .left > ul.tab_type1 > li > a { width: auto; height: auto; padding: 12px 20px; font-size: 14px; }
  #section2 .left > ul.tab_type1 > li > a::before { right: 5%; }
  #section2 .right .tab_box .desc_box { width: 90%; bottom: 8%; left: 8%; font-size: 16px; line-height: 1.8rem;}
  #section2 .right .tab_box .desc_box > b { font-size: 25px; }
}
@media all and (max-width: 1024px) {
  #section2 .right .tab_box .img_box > img { height: 600px; border-radius: 50px 0 0 0; }
}
@media all and (max-width: 800px) {
  #section2 { margin-bottom: 40px; }
  #section2 .right .tab_box .img_box > img { height: 450px; border-radius: 50px 0 0 0; }
  #section2 .right .tab_box .desc_box { font-size: 14px; line-height: 1.4rem; }
  #section2 .right .tab_box .desc_box > b { font-size: 20px; }
}
@media all and (max-width: 500px) {
  #section2 .bg_box > img { height: 500px; }
  #section2 .left > ul.tab_type1 { display: flex; flex-direction: column; gap: 10px;}
  #section2 .left > ul.tab_type1 > li > a { width: auto; height: auto; padding: 12px 20px; font-size: 14px; }
  #section2 .left > ul.tab_type1 > li > a::before { right: 5%; }
  #section2 .right .tab_box .img_box > img { height: 300px; }
}
/* ========== section2 ========== */


/* ========== section3 ========== */
#section3 .wrap_controllers.hide { display: none;}
#section3 .map_border { display: none;}
#section3 .root_daum_roughmap { width: 100%; height: 100%; position: relative; }
#section3 .root_daum_roughmap .wrap_map { height: 500px; }

#section3 .location_info { position: absolute; top: 50%; right: 160px; transform: translate(0 ,-50%); width: 23%; padding: 50px 60px; background-color: rgba(255, 255, 255, .85); backdrop-filter: blur(5px); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05); border-radius: 20px; z-index: 999; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 20px; }
#section3 .location_info .desc_box { display: flex; flex-direction: column; gap: 10px;}
#section3 .location_info .desc_box > p.desc1 { font-size: 22px; font-weight: 800; color: #000; }
#section3 .location_info .desc_box > p.desc2 { font-size: 17px; font-weight: 400; color: #666; line-height: 1.8rem;}
#section3 .location_info > a.btn_more { color: #fff; margin-top: 20px;}
#section3 .location_info > a.btn_more:hover { text-decoration: none; color: #00257E; }

@media all and (max-width: 1440px) {
  #section3 .location_info { right: 50px; width: 30%; padding: 30px 40px; }
}
@media all and (max-width: 1260px) {
  #section3 .location_info { right: 60px; }
}
@media all and (max-width: 1024px) {
  #section3 .root_daum_roughmap .wrap_map { height: 350px; }
  #section3 .location_info { right: 50px; width: 30%; padding: 20px 30px; }
  #section3 .location_info .desc_box > p.desc1 { font-size: 16px; }
  #section3 .location_info .desc_box > p.desc2 { font-size: 14px; line-height: 1.2rem;}
}
@media all and (max-width: 800px) {
  #section3 .root_daum_roughmap .wrap_map { height: 280px; }
  #section3 .location_info { position: initial; transform: translate(0, 0%); width: 90%; height: auto; margin: 0 auto; margin-bottom: 20px; padding: 20px; border: 1px solid #eee; border-radius: 10px; gap: 10px; }
  #section3 .location_info > img { height: 30px;}
  #section3 .location_info .desc_box { gap: 5px; }
  #section3 .location_info > a.btn_more { margin-top: 0; }
}
/* ========== // section3 ========== */