@charset "euc-kr";
html,body { font-family: 'Pretendard Variable',sans-serif; line-height: 1.2; overflow-x: hidden; }
body { overflow-y: hidden; word-break: keep-all; }

/* 스크롤 초기화 */
::-webkit-scrollbar { width: 5px; height: 6px; }
::-webkit-scrollbar-track { background-color: rgba(0,0,0,0.1); }
::-webkit-scrollbar-thumb { background-color: rgb(181 184 185); border-radius: 5px; }

/* 공통 */
.prev-wrap { display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; position: fixed; top:0; left:0; background-color: #111; transition: 0.6s; z-index: 99; }
.prev-wrap.hide { opacity: 0; visibility: hidden; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.flex_bw { display: flex; align-items: center; justify-content: space-between; }
.title { font-size: 42px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 40px; }
.sub_tit { text-align: center; margin-bottom: 40px; }
.sub_tit h1 { font-size: 52px; line-height: 1.4; color: #333; letter-spacing: -0.02em; font-weight: 700; }

.header { position: absolute; top:0; left:0; width: 100%; z-index: 1; }
.header .wrap { display: flex; align-items: center; justify-content: space-between; height: 80px; }
.header span { background-color: #0f6fab; border-radius: 50px; padding: 7px 15px; font-size: 14px; font-weight: 500; color: #fff; }

.footer { display: inline-block; width: 100%; padding: 40px 0; background-color: #fff; border-top: 1px solid #f3f3f3; }
.footer .wrap { display: flex; justify-content: space-between; }
.footer .wrap i { display: flex; flex-direction: column; gap: 10px; }
.footer .wrap i span { font-size: 14px; }
.footer .wrap i p:last-child { margin-top: 20px; }
.footer .wrap .bs_btn { display: inline-flex; }
.footer .wrap .bs_btn a { display: inline-block; width: 120px; font-size: 13px; height: 35px; line-height: 35px; border: 1px solid #ddd; text-align: center; color: #888; }

/* 메인 */
.banner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; width: 100%; height: 100vh; background: url(../images/bg.jpg) no-repeat 50% 50% #111; background-size: cover; color: #fff; text-align: center; background-attachment: fixed; position: relative; }
.banner h1 { font-size: 54px; font-weight: 700; line-height: 1.4; }
.banner h1 b { font-weight: 900; -webkit-text-stroke: 1px #fff; color: transparent; font-family: sans-serif; }
.banner span { font-size: 22px; line-height: 1.6; }
.banner .ring { border-radius: 100%; border: 10px solid rgba(255,255,255,0.3); position: absolute; width: 120px; height: 120px; animation-duration: 40s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate-reverse; }
.banner .ring:nth-child(3) { bottom: 120px; animation-name: ring-1; }
.banner .ring:nth-child(4) { top: 120px; animation-name: ring-2; }
@keyframes ring-1 { 0% { transform: translateX(-800%); } 100% { transform: translateX(800%); } }
@keyframes ring-2 { 0% { transform: translateX(800%); } 100% { transform: translateX(-800%); } }

.section { padding: 60px 0; }
.section .info { display: flex; justify-content: flex-end; gap: 40px; position: relative; }
.section .info .l_box { max-width: 640px; width: 100%; padding-bottom: 55px; }
.section .info .l_box h1 { font-size: 60px; font-weight: 500; }
.section .info .l_box span { display: flex; align-items: flex-end; gap: 5px; margin-top: 60px; font-size: 14px; color: #888; }
.section .info .l_box h2 { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; margin-top: 10px; line-height: 1.4; }
.section .info .l_box p { max-width: 440px; height: 240px; margin-top: 40px; border-radius: 20px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,0.3); }
.section .info .l_box p img { width: 100%; height: 100%; object-fit: cover; }
.section .info .l_box.move { position: fixed; top: 120px; max-width: 1200px; }
.section .info .l_box.bottom { position: absolute; bottom: 0; max-width: 1200px; }

.section .info .r_box { display: flex; flex-direction: column; align-items: flex-end; gap: 30px; }
.section .info .r_box .r_con { max-width: 520px; border-bottom: 1px solid #ddd; padding-bottom: 30px; }
.section .info .r_box .r_con:last-child { padding: 0; border: none; }
.section .info .r_box .r_con span { font-size: 14px; color: #888; }
.section .info .r_box .r_con h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin-top: 10px; }
.section .info .r_box .r_con .box { width: 100%; height: 320px; border-radius: 20px; box-shadow: 0 1px 6px rgba(0,0,0,0.3); overflow: hidden; margin: 20px 0; }
.section .info .r_box .r_con .box img { width: 100%; height: 100%; object-fit: cover; }
.section .info .r_box .r_con ul { display: flex; gap: 5px; }
.section .info .r_box .r_con ul li { border-radius: 50px; background-color: #f4f4f4; font-size: 14px; padding: 7px 15px; color: #777; }

.section .bs { height: 300px; }
.section .bs .flow_banner { overflow: hidden; display: flex; width: 100%; position: absolute; left: 0; }
.section .bs .flow_banner .list { display: flex; }
.section .bs .flow_banner .list li { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 240px; height: 240px; border-radius: 20px; font-size: 17px; font-weight: 500; background-color: #d7e3eb; margin-right: 20px; }
.section .bs .flow_banner .list li.c1 { background-color: #447ca1; color: #fff; }
.section .bs .flow_banner .list li.c2 { background-color: #0f6fab; color: #fff; }
@keyframes flowRolling { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

.inner { background: url(../images/inner.png) no-repeat 50% 50% #f3f3f3; margin-top: 60px; background-size: cover; }
.inner .wrap { display: flex; align-items: center; justify-content: space-between; height: 340px; }
.inner .wrap h1 { font-size: 38px; font-weight: 600; line-height: 1.3; }
.inner .wrap h1 b { font-size: 22px; font-weight: 500; }
.inner .wrap a { font-size: 17px; font-weight: 500; color: #fff; background-color: #0f6fab; padding: 15px 60px; border-radius: 50px; }

/* 이용문의 */
.contact { display: inline-block; width: 100%; padding-top: 160px; }
.contact .contact_top { display: flex; justify-content: space-between; gap: 30px; }
.contact .contact_top i { width: 100%; border-radius: 20px; overflow: hidden; }
.contact .contact_top i .contact_inner { height: 100%; padding: 60px; background-color: #0f6fab; color: #fff; }
.contact .contact_top i .contact_inner h1 { font-size: 15px; font-weight: 500; }
.contact .contact_top i .contact_inner h2 { font-size: 24px; font-weight: 700; margin: 20px 0; }
.contact .contact_top i .contact_inner h3 { line-height: 1.4; }
.contact .contact_top i .contact_inner span { display: flex; font-size: 18px; font-weight: 700; margin-top: 20px; }
.contact .contact_top i.contact_bg { background: url(../images/contact.png) no-repeat 50% 50% #d7e3eb; }
.contact .contact_con { display: flex; border-bottom: 1px solid #ebeced; padding: 60px; }
.contact .contact_con:last-child { border: none; }
.contact .contact_con .contact_tit { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; flex: 0 0 30%; }
.contact .contact_con .contact_tit b { position: relative; }
.contact .contact_con .contact_tit b:after { content: ''; position: absolute; left: 0; bottom: 5px; width: 100%; height: 6px; background-color: #0f6fab; z-index: -1; opacity: 0.3; }
.contact .contact_con ul { display: flex; flex-wrap: wrap; gap: 2rem; }
.contact .contact_con ul li { display: flex; flex-direction: column; flex: 1 1 45%; font-size: 15px; }
.contact .contact_con ul li b { display: flex; align-items: center; margin-bottom: 10px; font-weight: 500; }
.contact .contact_con ul li b img { margin-right: 5px; }
.contact .contact_con ul li p span { color: #005387; font-weight: 500; letter-spacing: -0.02em; line-height: 1.4; }

/* 해상도 */
@media screen and (max-width: 1280px) {
   .title { text-align: center; }
   .section .info { flex-direction: column; justify-content: flex-start; align-items: center; }
   .section .info .l_box { max-width: 520px; text-align: center; }
   .section .info .l_box span { justify-content: center; }
   .section .info .l_box h2 { text-align: center; }
   .section .info .l_box p { margin: 0 auto; margin-top: 40px; }
   .section .info .l_box.move { position: inherit; top: auto; max-width: 520px; }
   .section .info .l_box.bottom { position: inherit; bottom: auto; padding-bottom: 0; max-width: 520px; }
}

@media screen and (max-width: 900px) {
   .banner { background-attachment: inherit; }
   .banner h1 { font-size: 6vw; }
   .banner span { font-size: 3vw; }
   .banner .ring { width: 10vw; height: 10vw; }
   .inner .wrap { flex-direction: column; justify-content: center; height: auto; padding: 60px 0; }
   .inner .wrap h1 { text-align: center; font-size: 5vw; }
   .inner .wrap h1 b { font-size: 4vw; }
   .inner .wrap a { margin-top: 20px; }
   .footer .wrap { flex-direction: column; align-items: center; text-align: center; }
   .footer .wrap .bs_btn a { margin-top: 20px; }

   .sub_tit h1 { font-size: 6vw; }
   .contact .contact_top i .contact_inner { padding: 2rem; }
   .contact .contact_top i .contact_inner h2 { font-size: 4vw; }
   .contact .contact_top i .contact_inner h3 { font-size: 3vw; }
   .contact .contact_top { flex-direction: column; }
   .contact .contact_con { flex-direction: column; padding: 1rem; }
   .contact .contact_con .contact_tit { text-align: center; margin-bottom: 40px; font-size: 6vw; }
}

@media screen and (max-width: 600px) {
   .prev-wrap span img { width: 40vw; }
   .header a img { width: 40vw; }
   .title { font-size: 10vw; }
   .section .info .l_box h1 { font-size: 10vw; }
   .section .info .l_box h2 { font-size: 5vw; }
   .section .info .r_box .r_con h1 { font-size: 4vw; }
}