/*@import url("reset.css"); @import url("common.css"); @import url("global.css"); */ /************************************************************** *************************************************************** ***************************** headline ************************ *************************************************************** **************************************************************/ #header .logo { height: 64px; } /************************************************************** *************************************************************** ***************************** 01 ****************************** *************************************************************** **************************************************************/ /* 메인홈 */ #main { overflow-x: hidden; } #main #header { position: absolute; top: 0; left: 0; } #main .section1 { margin-bottom: 60px; } #main .section1::after { content: ''; display: block; width: 100%; height: 32px; border-radius: 32px 32px 0 0; background-color: var(--base10); position: absolute; bottom:0; left: 0; } #main .section1 .row-64 { height: 660px; max-width: 952px; justify-content: center; } #main .section1 .row-64 .column-20 { padding: 8px 8px 8px 26px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(5px); } #main .section1 .row-64 .column-20 .t18::placeholder { color: var(--base10); } #main .section1 .row-64 .column-20 .btn { padding: 12px 30px; } #main .section1 .row-64 .column-12 .rounded-pill { border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); padding: 7px 15px; white-space: nowrap; } #main .section2 { padding-bottom: 120px; } #main .section2 br { display: none; } #main .section2 .column-32 .row-12 { min-height: 200px; padding: 40px 30px; overflow: hidden; } #main .section2 .column-32 .row-12:not(.text-left) { background: #F8EDF1 url("../img/main_section2_bg_1.png") no-repeat right bottom; background-size: 55.2%; } #main .section2 .column-32 .row-12:not(.text-left) .absolute { max-width: 28.8%; right: -28.8%; bottom: 10%; transition: .5s ease-in-out; } #main .section2 .column-32 .row-12:not(.text-left) .absolute.targetOn { right: 1.28%; } #main .section2 .column-32 .text-left { background: rgba(0, 25, 148, 0.1) url("../img/main_section2_bg_2.png") no-repeat right bottom; background-size: 49.76%; } #main .section2 .column-32 .text-left .absolute { max-width:27.2%; left: 38%; bottom: 0; transition: .5s ease-in-out; } #main .section2 .column-32 .text-left .absolute.targetOn { left: 44.16%; } #main .section2 .swiper-slide { height: 540px; } #main .section2 .swiper-slide .object-cover { transition: 0.5s ease-in-out; } #main .section2 .swiper-slide .absolute-top-left { transition: 0.5s ease-in-out; padding: 56px 30px; word-break: keep-all; } #main .section2 .swiper-slide .t14 { opacity: 0; height: 0; transition: .5s; } #main .section2 .swiper-slide:hover .object-cover { transform: scale(1.1); } #main .section2 .swiper-slide:hover .absolute-top-left { background-color: rgba(0, 0, 0, 0.3); } #main .section2 .swiper-slide:hover .t14 { opacity: 1; height: 60px; } #main .section3 { padding-bottom: 120px; } #main .section3 .column-32 > div { width: 50%; } #main .section3 .row-72 { max-width: 620px; } #main .section3 .mySwiper { overflow: unset; } #main .section3 .mySwiper .swiper-slide { height: 112px !important; padding: 28px 30px; border-radius: 10px; } #main .section3 .swiper-slide-thumb-active { box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1); } #main .section3 .swiper-slide-thumb-active::before { display: none; } #main .section3 .mySwiper .swiper-slide br { display: none; } #main .section4 { padding-bottom: 120px; } #main .section4 .m-0 { position: unset; } #main .section4 .flex-center { width: 40px; height: 40px; } #main .section4 .swiper-wrapper { padding-left: calc(50% - 640px); } #main .section4 .swiper-slide { display: flex; border-radius: 12px; background-color: #f5f6f8; padding: 40px; } #main .section4 .swiper-slide .text-base2.t16 { width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; } #main .section5 { padding-bottom: 136px; } #main .section5 .container { max-width: 1480px; margin: unset; left: 50%; position: relative; transform: translateX(-660px); } #main .section5 .container .row-60 { max-width: 562px; padding-top: 128px; } #main .section5 .container .row-60 .rounded-pill { padding: 12px; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12); } #main .section5 .relative .korea { top: 39%; right: 23%; } #main .section5 .relative .taiwan { top: 50%; right: 29%; } #main .section5 .relative .china { top: 48.5%; right: 38.5%; } #main .section5 .relative .flex-center { border-radius: 50%; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15); } #main .section5 .relative .modal { position: absolute; top: 11% !important; right: 31% !important; left: unset; height: unset; width: unset; overflow: unset; } #main .section5 .relative .modal-dialog { border-radius: 20px; padding: 0; box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.15); } #main .section5 .relative .modal-content { width: 245px; padding: 26px; } #main .section5 .relative .modal .modal-close { display: none; } #main .section5 .relative .modal .wrap { margin-top: 16px; gap: 12px; grid-template-columns: repeat(3,minmax(0,1fr)); } #main .section5 .relative .modal .wrap .rounded-pill { padding: 6px 15px; background: var(--base9); backdrop-filter: blur(5px); transition: .15s; } #main .section5 .relative .modal .wrap .rounded-pill:hover { color: var(--base10); background: var(--primary); } #main .section5 .swiper-container { margin-top: -160px; } #main .section5 .swiper-wrapper { align-items: center; padding: 0 450px; } #main .section5 .swiper-slide { display: flex; flex-direction: column; row-gap: 16px; padding: 12px 12px 20px 12px; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); } #main .section5 .swiper-slide .overflow-hidden { height: 140px; } #main .section5 .swiper-slide .t15:not(.text-base2) { display: none; } #main .section5 .swiper-slide-active { row-gap: 12px; } #main .section5 .swiper-slide-active .t15:not(.text-base2) { display: block; } #main .section6 { background-color: #f8f8f8; } #main .section6 .swiper-wrapper { height: 140px; } #main .section6 .btn { width: 240px; } #main .section7 { background: url('https://d1m2y4le6zw0dj.cloudfront.net/image/main_section7_img.jpg')no-repeat center; background-size: cover; padding: 180px 20px; } @media (max-width: 1480px) {#main .section5 .container { max-width: 1320px; margin: 0 auto; transform:unset; left: unset; } #main .section5 .container .row-60 { padding-top: 0; max-width: 40%; } #main .section5 .swiper-wrapper { padding: 0 20px; } } @media (max-width: 1023px) {#main .section1 { margin-bottom: 32px; } #main .section1::after { height: 16px; border-radius: 16px 16px 0 0; } #main .section1 .row-64 { height: 476px; padding: 0 50px; row-gap: 40px; } #main .section1 .row-64 .row-16 { row-gap: 8px; } #main .section1 .row-64 .row-16 .t18 { font-size: 16px; line-height: 24px; } #main .section1 .row-64 .row-16 .t36 { font-size: 24px; line-height: 32px; } #main .section1 .row-64 .column-20 { height: 48px; padding: 6px 14px; } #main .section1 .row-64 .column-20 img { max-width: 24px; } #main .section1 .row-64 .column-20 input { font-size: 14px; line-height: 20px; } #main .section1 .row-64 .column-20 .btn { display: none; } #main .section1 .row-64 .row-40 { row-gap: 24px; } #main .section1 .row-64 .row-40 .row-20 { row-gap: 8px; font-size: 12px; line-height: 16px; } #main .section1 .row-64 .row-40 .column-12 { flex-wrap: wrap; gap: 8px; } #main .section2 { row-gap: 60px; padding-bottom: 68px; } #main .section2 .swiper-slide { height: 425px; } #main .section2 .swiper-slide .column-20 { flex-direction: column; height: 100%; justify-content: space-between; align-items: flex-start; } #main .section2 .swiper-slide .column-20 img { max-width: 48px; } #main .section2 .swiper-slide .absolute-top-left { padding: 28px 20px; } #main .section2 .swiper-slide .row-12 { font-size: 18px; line-height: 26px; } #main .section2 .swiper-slide .row-12 .t14 { height: auto; opacity: 1; } #main .section3 .column-32 { flex-direction: column; row-gap: 16px; padding-bottom: 55px; } #main .section3 .column-32 > div { width: 100%; max-width: unset; row-gap: 16px; } #main .section3 .column-32 .row-20 { row-gap: 16px; } #main .section3 .mySwiper .swiper-slide { box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.10); } #main .section3 .mySwiper .swiper-slide-active::after { content: ''; display: block; width: 100%; height: 100%; background-color: #fff; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.10); position: absolute; top: 0; border-radius: 10px; left: calc(100% + 12px); } #main .section5 .container { flex-direction: column; row-gap: 36px; } #main .section5 .container .row-60 { max-width: unset; } #main .section5 .swiper-container { margin-top: unset; } #main .section5 .swiper-wrapper { padding: 0; } #main .section7 { padding: 100px 20px; } #main #footer { display: block; } #main #footer .column-20 { column-gap: 12px; } } @media (max-width: 767px) {#main #header { display: flex; position: fixed; top: 0; left: 0; transition: .25s; height: 48px; padding: 0 20px; } #main #header .mo { display: flex; } #main #header .dropdown .dropdown-menu { left: unset !important; right: 0 !important; top: 48px !important; } #main #header .flex-center:not(.mo), #main #header .column-40, #main #header .bg-base8, #main #header .rounded-pill { display: none; } #main #header #langSet { text-indent: -9999px; width: 24px; height: 24px; background: url('../img/ic_language_24_base10.svg')no-repeat center; background-size: contain; } #main #header #langSet img { display: none; } #main #header:hover #langSet, #main #header.bg-white #langSet { background: url('../img/ic_language_24_base0.svg')no-repeat center; background-size: contain; } #main .section2 br { display: block; } #main .section2 .column-32 { column-gap: 20px; } #main .section2 .column-32 .row-12 { padding: 20px; height: 220px; row-gap: 4px; } #main .section2 .column-32 .row-12:not(.text-left) { background: #F8EDF1 url("../img/main_section2_bg_1_mo.png") no-repeat center bottom 12px; } #main .section2 .column-32 .text-left { background: rgba(0, 25, 148, 0.1) url("../img/main_section2_bg_2__mo.png") no-repeat center bottom; } #main .section2 .column-32 .row-12:not(.text-left) .absolute { max-width: 46%; right: -50%; bottom: 16px; } #main .section2 .column-32 .row-12:not(.text-left) .absolute.targetOn { right: 5%; } #main .section2 .column-32 .text-left .absolute { max-width:40.8%; left: -50%; bottom: 10px; } #main .section2 .column-32 .text-left .absolute.targetOn { left: 20px; } #main .section2 .column-32 .row-12 .t24 { font-size: 16px; line-height: 24px; } #main .section2 .column-32 .row-12 .t15 { font-size: 13px; line-height: 18px; } #main .section2 .row-32 { row-gap: 16px; } #main .section2 .row-32 .t36 { font-size: 20px; line-height: 28px; } #main .section2 .swiper { display: flex; flex-direction: column; row-gap: 12px; } #main .section3 { padding-bottom: 0; } #main .section3 .column-32 .row-20 .t44 { font-size: 20px; line-height: 28px; } #main .section3 .mySwiper .swiper-slide { padding: 16px 20px; height: unset !important; column-gap: 12px; align-items: flex-start; } #main .section3 .mySwiper .swiper-slide img { max-width: 32px; } #main .section3 .mySwiper .swiper-slide .t18 { font-size: 16px; line-height: 24px; } #main .section3 .mySwiper .swiper-slide .t16 { font-size: 14px; line-height: 20px; } #main .section3 .mySwiper .swiper-slide br { display: block; } #main .section4 { row-gap: 16px; padding-bottom: 40px; } #main .section4 .start-between .column-12 { display: none; } #main .section4 .start-between .row-20 { row-gap: 12px; } #main .section4 .start-between .row-20 .t44 { font-size: 20px; line-height: 28px; } #main .section4 .start-between .row-20 .t15 br { display: none; } #main .section4 .swiper-container { display: flex; flex-direction: column; row-gap: 12px; padding: 0 20px; } #main .section4 .swiper-slide { padding: 12px 16px; } #main .section4 .swiper-slide .t20 { font-size: 15px; line-height: 22px; } #main .section4 .swiper-slide .row-16 .t16 { font-size: 14px; line-height: 20px; } #main .section4 .swiper-slide .column-4 { column-gap: 2px; } #main .section4 .swiper-slide .column-4 img { max-width: 16px; } #main .section4 .swiper-slide .t18 { font-size: 14px; line-height: 20px; } #main .section4 .swiper-slide .mt-1 { margin-top: 0 !important; font-size: 13px; line-height: 18px; } #main .section5 .container .row-60 { row-gap: 16px; } #main .section5 .container .row-60 .t44 { font-size: 20px; line-height: 28px; } #main .section5 .container .row-60 .rounded-pill { padding: 8px 12px; } #main .section5 .container .row-60 .rounded-pill img { max-width: 24px; } #main .section5 .container .row-60 .rounded-pill input { font-size: 14px; line-height: 20px; } #main .section5 .relative .flex-center img { max-width: 32px; } #main .section5 .relative .korea { top: 50%; right: 21%; } #main .section5 .relative .taiwan { top: 61%; right: 29%; } #main .section5 .relative .china { top: 60%; right: 40%; } #main .section5 .relative .modal { position: fixed; top: 50% !important; left: 20px; right: unset !important; transform: translateY(-50%); width: calc(100% - 40px); } #main .section5 .relative .modal .wrap { margin-top: 0; } #main .section5 .relative .modal-dialog { max-width: unset; } #main .section5 .relative .modal-content { width: 100%; max-height: calc(100vh - 220px); } #main .section5 .relative .modal-content .grid { overflow-y: auto; } #main .section5 .swiper-container { padding-top: 20px; display: flex; flex-direction: column; row-gap: 12px; } #main .section5 .swiper-container .text-weight-medium { font-size: 18px; line-height: 26px; } #main .section5 .swiper-container .t15 { font-size: 14px; line-height: 20px; } #main .section6 img { width: 100%; } #main .section7 { background: url('https://d1m2y4le6zw0dj.cloudfront.net/image/main_section7_img_mo.jpg')no-repeat center; background-size: cover; padding: 60px 20px; align-items: flex-start; text-align: left; row-gap: 24px; } #main .section7 .row-20 { align-items: flex-start; text-align: left; row-gap: 12px; } #main .section7 .row-20 .t36 { font-size: 18px; line-height: 26px; } #main .section7 .row-20 .t48 { font-size: 20px; line-height: 28px; } } /************************************************************** *************************************************************** ***************************** 02 ****************************** *************************************************************** **************************************************************/ /* 회원가입 */ #join .mx-auto { max-width: 480px; padding: 60px 20px; } #join .mx-auto .progress { width: 100%; height: 4px; position: relative; } #join .mx-auto .progress .bg-primary { position: absolute; width: 0%; height: 100%; } #join .mx-auto .progress .bg-primary.step1 { animation: step1 2s ease-out forwards; } #join .mx-auto .progress .bg-primary.step2 { animation: step2 2s ease-out forwards; } #join .mx-auto .progress .bg-primary.step3 { animation: step3 2s ease-out forwards; } #join .mx-auto .progress .bg-primary.step4 { animation: step4 2s ease-out forwards; } #join .mx-auto .row-12 .bg-base8 { height: 1px; } #join .mx-auto .form-check { padding: 12px 0; } #join .mx-auto .row-8 .form-text .block { max-width: 24px; } #join .mx-auto .row-8 .form-text .bg-base9 { padding: 4px 12px; } #join .mt-auto { padding: 60px 0px 48px 0px; border-top: 1px solid var(--base8); } #join .full-width.block { max-width: 289px; margin: 0 auto; } @keyframes step1 {0% { width: 0%; } 100% { width: 25%; } } @keyframes step2 {0% { width: 25%; } 100% { width: 50%; } } @keyframes step3 {0% { width: 50%; } 100% { width: 75%; } } @keyframes step4 {0% { width: 75%; } 100% { width: 100%; } } @media (max-width: 767px) {#join .mx-auto { max-width: unset; padding: 12px 20px 20px; flex-grow: 1; row-gap: 12px; } #join .t28 { font-size: 24px; line-height: 32px; padding: 16px 0; } #join .full-width.block { margin-top: 32px; } #join .text-center.t14, #join .t14.text-base3 { margin-top: 4px; } #join .btn { margin-top: auto; } #join .mt-auto { display: none; } } /************************************************************** *************************************************************** ***************************** 03 ****************************** *************************************************************** **************************************************************/ /* 도시홈 */ #cityHome .section1 {background-color: rgba(0,0,0,0.3)} #cityHome .section1 .container { padding-top: 300px; padding-bottom: 260px;} #cityHome .section1 .absolute-top-left { z-index: -1; } #cityHome .section1 .rounded-pill.bg-base10 { padding: 8px; padding-left: 36px; } #cityHome .section1 .rounded-pill.bg-base10 .bg-base8 { display: block; min-width: 1px; height: 48px; } #cityHome .section1 .rounded-pill.bg-base10 .column-8.t16 { width: 240px; } #cityHome .section1 .rounded-pill.bg-base10 .center-between.t16 { width:134px; } #cityHome .section1 #offcanvasCitySm { top: 112px; } #cityHome .section1 #offcanvasCalendar { top: 76px; left: 0; } #cityHome .section1 #offcanvasPersonnel { top: 76px; left: 300px; } #cityHome .section2 { background: #F8F8F8; padding: 60px 0 30px; } #cityHome .section2 .swiper1 .overflow-hidden { height: 326px; } #cityHome .section2 .swiper1 .swiper-prev, #cityHome .section2 .swiper1 .swiper-next { transform: translateY(-50px); } #cityHome .section2 .swiper2 .row-16 { margin-bottom: auto; } #cityHome .section2 .swiper2 .overflow-hidden { height: 326px; } #cityHome .section2 .swiper2 .relative { max-width: calc(66.666% - 10px); min-width: calc(66.666% - 10px); } #cityHome .section2 .swiper2 .absolute-bottom-left { background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 32.5%, rgba(0, 0, 0, 0.80) 100%); padding: 28px 24px; } #cityHome .section3 { padding: 60px 0 30px; } #cityHome .section3 .grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; } #cityHome .section3 .grid .relative { height: 326px; } #cityHome .section3 .grid .absolute-bottom-left { background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 32.5%, rgba(0, 0, 0, 0.80) 100%); padding: 28px 24px; } #cityHome .section3 .btn { margin: 0 auto; } #cityHome .section3 #content-list .absolute { right: 16px; top: 12px; z-index: 1; min-width: 24px; height: 24px; background: url("../img/ic_check_24_outline.svg") no-repeat center; } #cityHome .section3 #content-list input:checked + .absolute { background: url("../img/ic_heart_filled_24.svg")no-repeat center; } #cityHome .section4 { display: none; } #cityHome #scroll-container { max-height: 700px; overflow: auto } @media (max-width: 1023px) {#cityHome .section1 .container { flex-direction: column; row-gap: 60px; align-items: flex-start; padding-top: 160px; padding-bottom: 80px; } #cityHome .section1 .rounded-pill.bg-base10 { width: 100%; } #cityHome .section1 .rounded-pill.bg-base10 .bg-base8:last-of-type { display: none; } #cityHome .section1 .rounded-pill.bg-base10 .btn { margin-left: auto; } } @media (max-width: 767px) {#cityHome .section1 .container { padding-top: 88px; padding-bottom: 60px; position: relative; } #cityHome .section1 .container .row-12.relative { row-gap: 4px; position: unset; } #cityHome .section1 .container .row-12.relative #selectedCountry { font-size: 14px; line-height: 20px; } #cityHome .section1 .container .row-12.relative .column-12 { column-gap: 8px; } #cityHome .section1 .container .row-12.relative .t48 { font-size: 28px; line-height: 36px; } #cityHome .section1 .container .row-12.relative .column-12 img { max-width: 20px; } #cityHome .section1 .rounded-pill.bg-base10 { display: none; } #cityHome .section2 { padding: 60px 0 20px; } #cityHome .section2 .container { padding: 0; row-gap: 16px; } #cityHome .section2 .end-between { padding: 0 20px; align-items: center; } #cityHome .section2 .t36 { font-size: 20px; line-height: 28px; } #cityHome .section2 .t18 { font-size: 16px; line-height: 24px; } #cityHome .section2 .t15 { font-size: 14px; line-height: 20px; } #cityHome .section2 .swiper1 { padding: 0 20px; display: flex; flex-direction: column; row-gap: 20px; } #cityHome .section2 .swiper1 .swiper-slide { row-gap: 12px; } #cityHome .section2 .swiper1 .swiper-slide .row-8 { row-gap: 4px; } #cityHome .section2 .swiper-prev, #cityHome .section2 .swiper-next, #cityHome .section2 .swiper2 { display: none; } #cityHome .section3 { padding: 60px 0 45px; } #cityHome .section3 .container { padding: 0; } #cityHome .section3 .row-32 { row-gap: 16px; } /*#cityHome .section3 .row-32:last-of-type { padding: 0 20px; } */ #cityHome .section3 .end-between { padding: 0 20px; align-items: center; } #cityHome .section3 .t36 { font-size: 20px; line-height: 28px; } #cityHome .section3 .t18 { font-size: 16px; line-height: 24px; } #cityHome .section3 .t15 { font-size: 14px; line-height: 20px; } #cityHome .section3 .swiper3 { padding: 0 20px; display: flex; flex-direction: column; row-gap: 20px; } #cityHome .section3 .swiper3 .swiper-slide { row-gap: 12px; } #cityHome .section3 .swiper3 .swiper-slide .row-8 { row-gap: 4px; } #cityHome .section3 .swiper-prev, #cityHome .section3 .swiper-next, #cityHome .section3 .swiper2 { display: none; } #cityHome .section3 .grid { grid-template-columns: repeat(1,minmax(0,1fr)); gap: 8px; font-size: 15px; line-height: 18px; margin-bottom: 8px; } #cityHome .section3 .grid .relative { height: 208px; } #cityHome .section3 .grid .relative:nth-last-child(-n+2) { } #cityHome .section3 .grid .absolute-bottom-left { padding: 8px; } #cityHome .section4 { display: block; left: 0; bottom: 80px; z-index: 3; } #cityHome .section4 .p-3 { border-radius: 12px; background: rgba(214, 19, 76, 0.85); } #cityHome .section4 .ms-auto { white-space: nowrap; padding: 5px 9px; } } /************************************************************** *************************************************************** ***************************** 04 ****************************** *************************************************************** **************************************************************/ /* 매거진 리스트 */ #magazineList .row-32 { padding: 60px 20px 80px; } #magazineList .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 60px; } #magazineList .grid .bg-base0 { height: 2px; } #magazineList .grid .row-16 .overflow-hidden { height: 326px; } #magazineList .grid .row-16 .fit { transition: .35s; } #magazineList .grid .row-16:hover .fit { transform: scale(1.1); } #magazineList #offcanvasCitySm { right: 0; top: 36px; left: unset; } #magazineList #offcanvasFilter { top: 36px; max-height: unset; left: unset; right: 0; transition:unset; transform: unset; position: absolute; height: unset; bottom: unset; overflow: hidden; box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.15); border-radius: 20px; max-width: unset; } #magazineList #offcanvasFilter .t16 { padding: 16px 28px; width: 100%; text-align: left; } @media (max-width: 1023px) {#magazineList .row-32 .t36 { display: none; } #magazineList .row-32 .end-between { justify-content: flex-end; } } @media (max-width: 767px) {#magazineList .row-32 { padding: 16px 20px 60px; row-gap: 16px; } #magazineList .row-32 .t15 { font-size: 14px; line-height: 20px; } #magazineList .row-32 .end-between .column-4 img { max-width: 16px; } #magazineList .row-32 .end-between .column-24 { position: relative; width: 100%; justify-content: flex-end; } #magazineList .row-32 .end-between .column-24 .relative { position: unset; } #magazineList .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; } #magazineList .grid .row-16 { row-gap: 12px; } #magazineList .grid .row-16 .overflow-hidden { height: 120px; } #magazineList .grid .row-8 { row-gap: 4px; } #magazineList .grid .row-8 .t20 { font-size: 16px; line-height: 24px; } #magazineList #offcanvasFilter { transition: transform .3s ease-in-out; width: 100%; position: fixed; max-width: 100%; height: unset; transform: translateY(100%); visibility: hidden; padding: 20px; background: transparent; top: unset; bottom: 0; box-shadow: unset; border-radius: 0; } #magazineList #offcanvasFilter .bg-base10 { border-radius: 10px; overflow: hidden; } #magazineList #offcanvasFilter .t16 { display: flex; align-items: center; justify-content: center; height: 56px; border-bottom: 1px solid var(--base9); } #magazineList #offcanvasFilter .t16:last-of-type { border-bottom: 0; } #magazineList #offcanvasFilter .offcanvas-close { display: none; } } /* 매거진 상세 */ #magazineDetail { padding: 60px 0 80px; } #magazineDetail .container:not(.row-12) { max-width: 1640px; } #magazineDetail .container:not(.row-12)::after { content: ''; display: block; visibility: hidden; clear: both; } #magazineDetail .section1 { top: 40px; left: 0; min-width: 130px; } #magazineDetail .section1 .block { transition: .25s; } #magazineDetail .section1 .block.active { transform: rotate(180deg); } #magazineDetail .section1 .column { padding-left: 24px; border-left: 1px solid var(--base5); } #magazineDetail .section1 .column .t13 { text-align: left; white-space: nowrap; line-height: 28px; color: var(--base5); } #magazineDetail .section1 .column .t13.active { color: var(--base0); } #magazineDetail .section2 { max-width: 56%; padding: 0 40px; } #magazineDetail .section2 .swiper .overflow-hidden { max-height: 480px; } #magazineDetail .section2 .swiper .swiper-slide img {min-height: 300px; max-height:300px; object-fit: cover;} #magazineDetail .reference-wrap { position: absolute;top: 90%;left: 0%;z-index: 2;width: 100%;line-height: 34px;} #magazineDetail .reference {width: 30%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(255, 255, 255, 0.6); text-align: center;} #magazineDetail .reference-end {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(255, 255, 255, 0.6); text-align: center; flex-grow: 0.07; border-top-right-radius: 100%;} #magazineDetail .reference a {color: black;} #magazineDetail .section2 .swiper-pagination::after { content: '+'; color: rgba(255, 255, 255, 0.70); font-size: 15px; font-weight: 500; line-height: 20px; } #magazineDetail .section2 .accordion-title { padding: 20px 20px 16px; } #magazineDetail .section2 .accordion-body { padding: 0 20px 20px; } #magazineDetail .section2 .accordion-body .border { border-radius: 6px; border-color: #E2E7ED !important; } #magazineDetail .section2 .accordion-body .border.column-10 { padding: 0 10px; height: 48px; } #magazineDetail .section2 .prolog-chart {padding: 20px 20% 20px 20%} #magazineDetail .section2 .prolog-chart .header {background-color: #333;color: white;text-align: center;padding: 20px 10px 10px;} #magazineDetail .section2 .prolog-chart .header h1 {font-size: 32px; margin: 10px 0 0;color: white;} #magazineDetail .section2 .prolog-chart .header .subtitle {font-size: 14px;color: #ccc;} #magazineDetail .section2 .prolog-chart .main {border-left: 10px solid #e50051;border-right: 10px solid #e50051;padding: 20px;} #magazineDetail .section2 .prolog-chart .main h2 {color: #e50051;font-size: 22px;text-align: center;margin-bottom: 30px;} #magazineDetail .section2 .prolog-chart .place {display: flex;align-items: center;margin-bottom: 15px;font-size: 20px;} #magazineDetail .section2 .prolog-chart .number-box {background-color: #e50051;color: white;width: 28px;height: 28px;display: flex;justify-content: center;align-items: center;font-weight: bold;margin-right: 15px;border-radius: 3px;} #magazineDetail .section2 .prolog-chart .footer {background-color: #e50051;color: white;padding: 16px;font-size: 14px;line-height: 1.6;display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;} #magazineDetail .section2 .prolog-chart .footer .text {max-width: 80%; color: white} #magazineDetail .section2 .prolog-chart .logo {width: 60px;height: auto;} #magazineDetail .section2 .epilogue {} #magazineDetail .section2 .epilogue .header {font-size: 2rem;font-weight: 600;display: flex;align-items: center;margin-bottom: 30px;} #magazineDetail .section2 .epilogue .bar {display: inline-block;width: 6px;height: 32px;background-color: #444;margin-right: 12px;border-radius: 2px;} #magazineDetail .section2 .epilogue p {font-size: 1.05rem;line-height: 1.9;word-break: keep-all;} #magazineDetail .section2 .epilogue .image-wrapper {text-align: center;margin-bottom: 20px;} #magazineDetail .section2 .epilogue img {max-width: 100%;height: auto;border-radius: 12px;box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);} #magazineDetail .section2 p {font-size: 0.8rem;line-height: 1.9;word-break: keep-all;} #magazineDetail .section2 .gallery {display: flex;flex-wrap: wrap;gap: 16px;justify-content: center;} #magazineDetail .section2 .gallery-item {flex: 1 1 calc(33.333% - 16px);max-width: calc(33.333% - 16px);box-sizing: border-box;} #magazineDetail .section2 .gallery-item img {width: 100%;height: 200px;object-fit: cover;border-radius: 8px;box-shadow: 0 2px 6px rgba(0,0,0,0.15);} #magazineDetail .section2 .gallery-item2 {flex: 1 1 calc(33.333% - 16px);max-width: calc(33.333% - 16px);box-sizing: border-box;} #magazineDetail .section2 .gallery-item2 img {width: 100%;height: 600px;object-fit: cover;border-radius: 8px;box-shadow: 0 2px 6px rgba(0,0,0,0.15);} #magazineDetail .section3 { max-width: 25%; } #magazineDetail .section3 >.column { row-gap: 16px; } #magazineDetail .section3 >.column .flex-center { display: none; } #magazineDetail .section3 >.column #accordion-content { display: flex; flex-direction: column; row-gap: 16px; } #magazineDetail .section3 .border { padding-right: 12px; padding-left: 14px; height: 48px; } #magazineDetail .section3 #offcanvasCitySm { top: 60px; left: unset; right: 0; } #magazineDetail .section3 #offcanvasCalendar { top: 60px; left: unset; right: 0; } #magazineDetail .section3 #offcanvasPersonnel { top: 60px; } #magazineDetail .section3 .wrap { gap: 16px 8px; } #magazineDetail .section3 .btn.bg-base10 { border: 1px solid var(--primary); } #magazineDetail .section3 .column-12 .rounded-xs { min-width: 100px; max-width: 100px; height: 72px; } #magazineDetail .section3 .mo { display: none } #magazineDetail .section3 .row-32 .row-12 { min-height: 200px; padding: 40px 30px; overflow: hidden; } #magazineDetail .section3 .row-32 .row-12:not(.text-left) { background: #F8EDF1 url("../img/main_section2_bg_1.png") no-repeat right bottom; background-size: 55.2%; } #magazineDetail .section3 .row-32 .row-12:not(.text-left) .absolute { max-width: 28.8%; right: -28.8%; bottom: 10%; transition: .5s ease-in-out; } #magazineDetail .section3 .row-32 .row-12:not(.text-left) .absolute.targetOn { right: 1.28%; } #magazineDetail .section3 .row-32 .text-left { background: rgba(0, 25, 148, 0.1) url("../img/main_section2_bg_2.png") no-repeat right bottom; background-size: 49.76%; } #magazineDetail .section3 .row-32 .text-left .absolute { max-width:27.2%; left: 38%; bottom: 0; transition: .5s ease-in-out; } #magazineDetail .section3 .row-32 .text-left .absolute.targetOn { left: 44.16%; } @media (max-width: 1023px) {#magazineDetail { row-gap: 60px; } #magazineDetail .section1 { min-width: 100%; margin-bottom: 50px; top: 0; padding: 13px 0; background-color: #fff; z-index: 2; } #magazineDetail .section2 { max-width: 65%; padding-left: 0; } #magazineDetail .section3 { max-width: 35%; } } @media (max-width: 767px) {#magazineDetail { padding: 20px 0 160px; row-gap: 16px; } #magazineDetail .container.row-12 { row-gap: 4px; } #magazineDetail .container.row-12 .row-8 { row-gap: 4px; } #magazineDetail .container.row-12 .column-4 { font-size:12px; line-height: 16px; } #magazineDetail .container.row-12 .column-4 img { max-width: 12px; } #magazineDetail .container.row-12 .t48 { font-size: 28px; line-height: 36px; } #magazineDetail .container.row-12 .t24 { font-size: 14px; line-height: 20px; } #magazineDetail .section1 .t14 { font-size: 13px; line-height: 18px; } #magazineDetail .section1 .column { max-height: 130px; overflow-y: auto; } #magazineDetail .section1 .column .t13 { font-size: 12px; line-height: 26px; } #magazineDetail .section2 { max-width:unset; padding: 0; } #magazineDetail .section2 .content { row-gap: 0; } #magazineDetail .section2 .t24 { font-size: 18px; line-height: 26px; } #magazineDetail .section2 .t15 { font-size: 16px; line-height: 20px; } #magazineDetail .section2 .row-32 { row-gap: 24px; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--base8); } #magazineDetail .section2 .row-32:last-of-type { border-bottom: 0; margin-bottom: 0; } #magazineDetail .section2 .accordion-title { padding: 12px; font-size: 16px; line-height: 24px; } #magazineDetail .section2 .accordion-body { padding: 4px 12px 12px; } #magazineDetail .section2 .accordion-body .t16 { font-size: 14px; line-height: 20px; } #magazineDetail .section2 .prolog-chart {padding: 20px 5% 20px 5%} #magazineDetail .section2 .row-32 .row-12 { padding: 20px; height: 220px; row-gap: 4px; } #magazineDetail .section2 .row-32 .row-12:not(.text-left) { background: #F8EDF1 url("../img/main_section2_bg_1_mo.png") no-repeat center bottom 12px; } #magazineDetail .section2 .row-32 .text-left { background: rgba(0, 25, 148, 0.1) url("../img/main_section2_bg_2__mo.png") no-repeat center bottom; } #magazineDetail .section2 .row-32 .row-12:not(.text-left) .absolute { max-width: 46%; right: -50%; bottom: 16px; } #magazineDetail .section2 .row-32 .row-12:not(.text-left) .absolute.targetOn { right: 5%; } #magazineDetail .section2 .row-32 .text-left .absolute { max-width:40.8%; left: -50%; bottom: 10px; } #magazineDetail .section2 .row-32 .text-left .absolute.targetOn { left: 20px; } #magazineDetail .section2 .gallery-item {flex: 1 1 calc(33.333% - 16px);max-width: calc(33.333% - 16px);box-sizing: border-box;} #magazineDetail .section3 { max-width:unset; } #magazineDetail .section3 .inner1 { box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.20); padding: 0 20px 16px; border-radius: 12px 12px 0 0; row-gap: 16px; background-color: var(--base10); position: fixed; top: unset; bottom: 0; left: 0; width: 100%; z-index: 4; max-width: unset; max-height: 100%; } #magazineDetail .section3 .inner1 > .t24 { display: none; } #magazineDetail .section3 .inner1 .hidden { display: block; } #magazineDetail .section3 .inner1 #accordion-content { display: none; row-gap: 12px; } #magazineDetail .section3 .inner1 .wrap { flex-wrap: nowrap; } #magazineDetail .section3 .inner1 .wrap .btn { height: 40px; } #magazineDetail .section3 .inner1 .wrap .btn .t16 { font-size: 14px; line-height: 20px; } #magazineDetail .section3 .btn.bg-base10 { margin-top: 0; } #magazineDetail .section3 .inner2 .t26 { font-size: 24px; line-height: 32px; } #magazineDetail .section3 .inner2 .row-20 { display: grid; gap: 24px 16px; grid-template-columns: repeat(2,minmax(0,1fr));; } #magazineDetail .section3 .inner2 .row-20 .column-12 { flex-direction: column; row-gap: 12px; } #magazineDetail .section3 .column-12 .rounded-xs { width: 100%; max-width: unset; height: 110px; } #magazineDetail .section3 .row-32 {display: none} #magazineDetail .section3 .mo {display: flex} } /* POI 상세 */ #placeDetail { padding: 60px 0 80px; } #placeDetail .container:not(.row-12) { max-width: 1640px; } #placeDetail .container:not(.row-12)::after { content: ''; display: block; visibility: hidden; clear: both; } #placeDetail .section1 { top: 40px; left: 0; min-width: 130px; } #placeDetail .section1 .block { transition: .25s; } #placeDetail .section1 .block.active { transform: rotate(180deg); } #placeDetail .section1 .column { padding-left: 24px; border-left: 1px solid var(--base5); } #placeDetail .section1 .column .t13 { text-align: left; white-space: nowrap; line-height: 28px; color: var(--base5); } #placeDetail .section1 .column .t13.active { color: var(--base0); } #placeDetail .section2 { max-width: 56%; padding: 0 40px; } #placeDetail .section2 .swiper .overflow-hidden { max-height: 480px; } #placeDetail .section2 .swiper .swiper-slide img {min-height: 300px; max-height:300px; object-fit: cover;} #placeDetail .reference-wrap { position: absolute;top: 90%;left: 0%;z-index: 2;width: 100%;line-height: 34px;} #placeDetail .reference {width: 30%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(255, 255, 255, 0.6); text-align: center;} #placeDetail .reference-end {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(255, 255, 255, 0.6); text-align: center; flex-grow: 0.07; border-top-right-radius: 100%;} #placeDetail .reference a {color: black;} #placeDetail .section2 .swiper-pagination::after { content: '+'; color: rgba(255, 255, 255, 0.70); font-size: 15px; font-weight: 500; line-height: 20px; } #placeDetail .section2 .accordion-title { padding: 20px 20px 16px; } #placeDetail .section2 .poi-body .border { border-radius: 6px; border-color: #E2E7ED !important; } #placeDetail .section2 .poi-body .border.column-10 { padding: 0 10px; height: 48px; } #placeDetail #recommend .absolute { right: 16px; top: 12px; z-index: 1; min-width: 24px; height: 24px; background: url("../img/ic_check_24_outline.svg") no-repeat center; } #placeDetail #recommend input:checked + .absolute { background: url("../img/ic_heart_filled_24.svg")no-repeat center; } #placeDetail #recommend .swiper-wrapper { align-items: center; } #placeDetail #recommend .swiper-slide { display: flex; flex-direction: column; row-gap: 16px; padding: 12px 12px 20px 12px; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); } #placeDetail #recommend .swiper-slide .overflow-hidden { height: 240px; } #placeDetail #recommend .swiper-slide .t15:not(.text-base2) { display: none; } #placeDetail #recommend .swiper-slide-active { row-gap: 12px; } #placeDetail #recommend .swiper-slide-active .t15:not(.text-base2) { display: block; } #placeDetail .section2 .prolog-chart {padding: 20px 20% 20px 20%} #placeDetail .section2 .prolog-chart .header {background-color: #333;color: white;text-align: center;padding: 20px 10px 10px;} #placeDetail .section2 .prolog-chart .header h1 {font-size: 32px; margin: 10px 0 0;color: white;} #placeDetail .section2 .prolog-chart .header .subtitle {font-size: 14px;color: #ccc;} #placeDetail .section2 .prolog-chart .main {border-left: 10px solid #e50051;border-right: 10px solid #e50051;padding: 20px;} #placeDetail .section2 .prolog-chart .main h2 {color: #e50051;font-size: 22px;text-align: center;margin-bottom: 30px;} #placeDetail .section2 .prolog-chart .place {display: flex;align-items: center;margin-bottom: 15px;font-size: 20px;} #placeDetail .section2 .prolog-chart .number-box {background-color: #e50051;color: white;width: 28px;height: 28px;display: flex;justify-content: center;align-items: center;font-weight: bold;margin-right: 15px;border-radius: 3px;} #placeDetail .section2 .prolog-chart .footer {background-color: #e50051;color: white;padding: 16px;font-size: 14px;line-height: 1.6;display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;} #placeDetail .section2 .prolog-chart .footer .text {max-width: 80%; color: white} #placeDetail .section2 .prolog-chart .logo {width: 60px;height: auto;} #placeDetail .section2 .epilogue {} #placeDetail .section2 .epilogue .header {font-size: 2rem;font-weight: 600;display: flex;align-items: center;margin-bottom: 30px;} #placeDetail .section2 .epilogue .bar {display: inline-block;width: 6px;height: 32px;background-color: #444;margin-right: 12px;border-radius: 2px;} #placeDetail .section2 .epilogue p {font-size: 1.05rem;line-height: 1.9;word-break: keep-all;} #placeDetail .section2 .epilogue .image-wrapper {text-align: center;margin-bottom: 20px;} #placeDetail .section2 .epilogue img {max-width: 100%;height: auto;border-radius: 12px;box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);} #placeDetail .section2 p {font-size: 0.8rem;line-height: 1.9;word-break: keep-all;} #placeDetail .section2 .gallery {display: flex;flex-wrap: wrap;gap: 16px;justify-content: center;} #placeDetail .section2 .gallery-item {flex: 1 1 calc(33.333% - 16px);max-width: calc(33.333% - 16px);box-sizing: border-box;} #placeDetail .section2 .gallery-item img {width: 100%;height: 200px;object-fit: cover;border-radius: 8px;box-shadow: 0 2px 6px rgba(0,0,0,0.15);} #placeDetail .section2 .gallery-item2 {flex: 1 1 calc(33.333% - 16px);max-width: calc(33.333% - 16px);box-sizing: border-box;} #placeDetail .section2 .gallery-item2 img {width: 100%;height: 600px;object-fit: cover;border-radius: 8px;box-shadow: 0 2px 6px rgba(0,0,0,0.15);} #placeDetail .section3 { max-width: 25%; } #placeDetail .section3 >.column { row-gap: 16px; } #placeDetail .section3 >.column .flex-center { display: none; } #placeDetail .section3 >.column #accordion-content { display: flex; flex-direction: column; row-gap: 16px; } #placeDetail .section3 .border { padding-right: 12px; padding-left: 14px; height: 48px; } #placeDetail .section3 #offcanvasCitySm { top: 60px; left: unset; right: 0; } #placeDetail .section3 #offcanvasCalendar { top: 60px; left: unset; right: 0; } #placeDetail .section3 #offcanvasPersonnel { top: 60px; } #placeDetail .section3 .wrap { gap: 16px 8px; } #placeDetail .section3 .btn.bg-base10 { border: 1px solid var(--primary); } #placeDetail .section3 .column-12 .rounded-xs { min-width: 100px; max-width: 100px; height: 72px; } #placeDetail .section3 .mo { display: none } #placeDetail .section3 .row-32 .row-12 { min-height: 200px; padding: 40px 30px; overflow: hidden; } #placeDetail .section3 .row-32 .row-12:not(.text-left) { background: #F8EDF1 url("../img/main_section2_bg_1.png") no-repeat right bottom; background-size: 55.2%; } #placeDetail .section3 .row-32 .row-12:not(.text-left) .absolute { max-width: 28.8%; right: -28.8%; bottom: 10%; transition: .5s ease-in-out; } #placeDetail .section3 .row-32 .row-12:not(.text-left) .absolute.targetOn { right: 1.28%; } #placeDetail .section3 .row-32 .text-left { background: rgba(0, 25, 148, 0.1) url("../img/main_section2_bg_2.png") no-repeat right bottom; background-size: 49.76%; } #placeDetail .section3 .row-32 .text-left .absolute { max-width:27.2%; left: 38%; bottom: 0; transition: .5s ease-in-out; } #placeDetail .section3 .row-32 .text-left .absolute.targetOn { left: 44.16%; } @media (max-width: 1023px) {#placeDetail { row-gap: 60px; } #placeDetail .section1 { min-width: 100%; margin-bottom: 50px; top: 0; padding: 13px 0; background-color: #fff; z-index: 2; } #placeDetail .section2 { max-width: 65%; padding-left: 0; } #placeDetail .section3 { max-width: 35%; } } @media (max-width: 767px) {#placeDetail { padding: 20px 0 160px; row-gap: 16px; } #placeDetail .container.row-12 { row-gap: 4px; } #placeDetail .container.row-12 .row-8 { row-gap: 4px; } #placeDetail .container.row-12 .column-4 { font-size:12px; line-height: 16px; } #placeDetail .container.row-12 .column-4 img { max-width: 12px; } #placeDetail .container.row-12 .t48 { font-size: 28px; line-height: 36px; } #placeDetail .container.row-12 .t24 { font-size: 14px; line-height: 20px; } #placeDetail .section1 .t14 { font-size: 13px; line-height: 18px; } #placeDetail .section1 .column { max-height: 130px; overflow-y: auto; } #placeDetail .section1 .column .t13 { font-size: 12px; line-height: 26px; } #placeDetail .section2 { max-width:unset; padding: 0; } #placeDetail .section2 .content { row-gap: 0; } #placeDetail .section2 .t24 { font-size: 18px; line-height: 26px; } #placeDetail .section2 .t15 { font-size: 16px; line-height: 20px; } #placeDetail .section2 .row-32 { row-gap: 24px; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--base8); } #placeDetail .section2 .row-32:last-of-type { border-bottom: 0; margin-bottom: 0; } #placeDetail .section2 .accordion-title { padding: 12px; font-size: 16px; line-height: 24px; } #placeDetail .section2 .poi-body .t16 { font-size: 14px; line-height: 20px; } #placeDetail #recommend { padding-left: 20px; row-gap: 16px; } #placeDetail #recommend .t28 { font-size: 20px; line-height: 28px; } #placeDetail #recommend .column-20 { overflow-x: auto; padding-right: 20px; } #placeDetail #recommend .row-12 { min-width: 136px; } #placeDetail #recommend .overflow-hidden { height: 92px; } #placeDetail #recommend .absolute { display: none; } #placeDetail #recommend .row-8 { row-gap: 4px; } #placeDetail #recommend .column-6 { column-gap: 4px; font-size: 13px; line-height: 18px; } #placeDetail #recommend .column-6 img { max-width: 16px; } #placeDetail #recommend .t18 { font-size: 15px; line-height: 20px; } #placeDetail #recommend .t20 { font-size: 15px; line-height: 20px; } #placeDetail #recommend .text-base3 { font-size: 13px; line-height: 18px; display: block; } #placeDetail #recommend .swiper-container { padding-top: 20px; display: flex; flex-direction: column; row-gap: 12px; } #placeDetail #recommend .swiper-container .text-weight-medium { font-size: 18px; line-height: 26px; } #placeDetail #recommend .swiper-container .t15 { font-size: 14px; line-height: 20px; } #placeDetail .section2 .prolog-chart {padding: 20px 5% 20px 5%} #placeDetail .section2 .row-32 .row-12 { padding: 20px; height: 220px; row-gap: 4px; } #placeDetail .section2 .row-32 .row-12:not(.text-left) { background: #F8EDF1 url("../img/main_section2_bg_1_mo.png") no-repeat center bottom 12px; } #placeDetail .section2 .row-32 .text-left { background: rgba(0, 25, 148, 0.1) url("../img/main_section2_bg_2__mo.png") no-repeat center bottom; } #placeDetail .section2 .row-32 .row-12:not(.text-left) .absolute { max-width: 46%; right: -50%; bottom: 16px; } #placeDetail .section2 .row-32 .row-12:not(.text-left) .absolute.targetOn { right: 5%; } #placeDetail .section2 .row-32 .text-left .absolute { max-width:40.8%; left: -50%; bottom: 10px; } #placeDetail .section2 .row-32 .text-left .absolute.targetOn { left: 20px; } #placeDetail .section2 .gallery-item {flex: 1 1 calc(33.333% - 16px);max-width: calc(33.333% - 16px);box-sizing: border-box;} #placeDetail .section3 { max-width:unset; } #placeDetail .section3 .inner1 { box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.20); padding: 0 20px 16px; border-radius: 12px 12px 0 0; row-gap: 16px; background-color: var(--base10); position: fixed; top: unset; bottom: 0; left: 0; width: 100%; z-index: 4; max-width: unset; max-height: 100%; } #placeDetail .section3 .inner1 > .t24 { display: none; } #placeDetail .section3 .inner1 .hidden { display: block; } #placeDetail .section3 .inner1 #accordion-content { display: none; row-gap: 12px; } #placeDetail .section3 .inner1 .wrap { flex-wrap: nowrap; } #placeDetail .section3 .inner1 .wrap .btn { height: 40px; } #placeDetail .section3 .inner1 .wrap .btn .t16 { font-size: 14px; line-height: 20px; } #placeDetail .section3 .btn.bg-base10 { margin-top: 0; } #placeDetail .section3 .inner2 .t26 { font-size: 24px; line-height: 32px; } #placeDetail .section3 .inner2 .row-20 { display: grid; gap: 24px 16px; grid-template-columns: repeat(2,minmax(0,1fr));; } #placeDetail .section3 .inner2 .row-20 .column-12 { flex-direction: column; row-gap: 12px; } #placeDetail .section3 .column-12 .rounded-xs { width: 100%; max-width: unset; height: 110px; } #placeDetail .section3 .row-32 {display: none} #placeDetail .section3 .mo {display: flex} } /* 여행지 상세 */ #tourDetail { padding: 60px 0 120px; } #tourDetail .section1 input:checked + label svg path { fill:#D6134C; stroke:#D6134C; } #tourDetail #information .wrap { gap: 6px; } #tourDetail #information .wrap .rounded-pill { background: #EAEDF2; padding: 4px 12px; } #tourDetail #information .accordion-title { padding: 20px 20px 16px; } #tourDetail #information .accordion-body { padding: 0 20px 20px; } #tourDetail #information .accordion-body .column-28 > .t15 { min-width: 45px; } #tourDetail #information .accordion-body .column-28 .t15:last-of-type { min-width: 100px; } #tourDetail #review .column-32 { padding: 22px; background: #F6F7FB; } #tourDetail #review .column-10 { max-width: 172px; } #tourDetail #review .rounded-circle { width: 52px; height: 52px; } #tourDetail #review .column-8 .overflow-hidden { width: 120px; height: 120px; } #tourDetail #around .grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; } #tourDetail #around .grid .relative { height: 326px; } #tourDetail #around .grid .absolute-bottom-left { background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 32.5%, rgba(0, 0, 0, 0.80) 100%); padding: 28px 24px; } #tourDetail #around .btn { margin: 0 auto; } @media (max-width: 1023px) {#tourDetail #around .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } #tourDetail #around .grid .relative { height: 240px; } #tourDetail #around .grid .relative:nth-last-child(-n+2) { display: none; } } @media (max-width: 767px) {#tourDetail { padding: 0 0 20px; } #tourDetail .container { padding: 0; row-gap: 12px; } #tourDetail .section1 { row-gap: 0; } #tourDetail .section1 .column-8 { height: 48px; padding: 0 20px; } #tourDetail .section1 .hidden:not(input) { display: flex; align-items: center; justify-content: center; } #tourDetail .section1 .t48 { font-size: 18px; font-weight: 500; line-height: 26px; } #tourDetail #information { padding: 0 20px; row-gap: 20px; } #tourDetail #information .t24 { font-size: 18px; font-weight: 700; line-height: 26px; } #tourDetail #information .t15 { font-size: 14px; line-height: 20px; } #tourDetail #information .wrap .rounded-pill { font-size: 13px; line-height: 18px; } #tourDetail #information .accordion { row-gap: 20px; } #tourDetail #information .accordion-title { padding: 12px; font-size: 16px; line-height: 24px; } #tourDetail #information .accordion-body { padding: 0 12px 12px; row-gap: 12px; } #tourDetail #information .accordion-body iframe { max-height: 184px; } #tourDetail #information .accordion-body .t16 { font-size: 14px; line-height: 20px; } #tourDetail #information .accordion-body .column-28 { column-gap: 12px; } #tourDetail #information .accordion-body .column-28 > .t15 { min-width: 40px; } #tourDetail #information .accordion-body .column-28 .t15:last-of-type { min-width: 90px; } #tourDetail #review { padding: 0 20px; row-gap: 16px; } #tourDetail #review .t24 { font-size: 20px; line-height: 28px; } #tourDetail #review .column-32 { flex-direction: column; padding: 16px; row-gap: 12px; } #tourDetail #review .column-10 { max-width: unset; } #tourDetail #review .row-12 { row-gap: 4px; } #tourDetail #review .row-12 .text-base6 { column-gap: 4px; font-size: 12px; font-weight: 500; line-height: 16px; } #tourDetail #review .row-12 .column-4 { column-gap: 2px; } #tourDetail #review .row-12 .column-4 img { max-width: 16px; } #tourDetail #review .row-12 .t15:not(.text-weight-medium) { font-size: 14px; line-height: 20px; } #tourDetail #review .row-12 .column-8:not(.t14) { overflow-x: scroll; margin-top: 8px; } #tourDetail #review .row-12 .column-8 .overflow-hidden { min-width: 80px; width: 80px; height: 80px; } #tourDetail #around { padding: 0 20px; row-gap: 16px; } #tourDetail #around .t24 { font-size: 20px; line-height: 28px; } #tourDetail #around .grid { gap: 8px; font-size: 13px; line-height: 18px; } #tourDetail #around .grid .relative { height: 108px; } #tourDetail #around .grid .absolute-bottom-left { padding: 8px; } #tourDetail #around .btn { margin-top: 8px; } } /************************************************************** *************************************************************** ***************************** 05 ****************************** *************************************************************** **************************************************************/ /* 데이 투어리 스트 */ #dayTourList { padding-bottom: 120px; } #dayTourList .section1 { position: relative; background: url('https://d1m2y4le6zw0dj.cloudfront.net/image/Visual-01.jpg')no-repeat center; background-size: cover; } #dayTourList .section1 .row-16 { height: 320px; position: relative; justify-content: flex-end; padding-bottom: 88px; } #dayTourList .section2 { position: unset; max-width: 285px; transform: unset; right: unset; visibility: visible !important; height: unset; } #dayTourList .section2 .sticky { top: 60px; left: 0; } #dayTourList .section2 .btn { display: none; } #dayTourList .section2 .bg-base8 { height: 1px; } #dayTourList .section2 .wrap { row-gap: 4px; } #dayTourList .section2 .wrap .t12 { padding: 8px; color: var(--base2); } #dayTourList .section2 .wrap .t12.text-primary { border-color: var(--primary) !important; } #dayTourList .section3 #offcanvasCitySm { top: 52px; } #dayTourList .section3 .accordion { border-bottom: 1px solid var(--base8); } #dayTourList .section3 .accordion-item { border: 0; border-radius: 0; } #dayTourList .section3 .accordion .bg-base7 { height: 12px; min-width: 1px; } #dayTourList .section3 .accordion .end-between { padding: 20px 0; border-top: 1px solid var(--base8); } #dayTourList .section3 .accordion .overflow-hidden { min-width: 200px; max-width: 200px; height: 134px; } #dayTourList .section3 .accordion .t13 { padding: 4px 8px; background: #F8EDF1; } #dayTourList .section3 .accordion .text-right .rounded-pill { padding: 12px 22px 12px 30px; border:1px solid var(--primary) } #dayTourList .section3 .accordion .text-right .rounded-pill .block { transition: .25s; } #dayTourList .section3 .accordion .text-right .rounded-pill:not(.collapsed) .block { transform: rotate(-180deg); } #dayTourList .section3 .accordion-body { background: #F6F7FB; padding: 32px 20px; } #dayTourList .section3 .accordion-body .bg-base10 { padding: 32px 20px; } #dayTourList .section3 .accordion-body .bg-base10 .wrap .t14 { padding: 4px 12px; background: #EAEDF2; } #dayTourList .section3 .accordion-body .flex-center .block { transform: rotate(-180deg); } #dayTourList #offcanvasSort { position: unset; transform: unset; right: unset; height: unset; visibility: visible; } #dayTourList #offcanvasSort .sort .t14:not(.text-primary) { color: #404040; } @media (max-width: 1200px) {#dayTourList .section2 { max-width: 240px; } #dayTourList .section3 .accordion .end-between { flex-wrap: wrap; row-gap: 12px; align-items: flex-start; } #dayTourList .section3 .accordion .text-right { width: 100%; flex-direction: row; justify-content: space-between; margin-top: 10px} } @media (max-width: 1023px) {#dayTourList .section3 .accordion .end-between .center-start { width:100%; flex-direction: column; column-gap: 12px; row-gap: 12px; align-items: flex-start; } /*#dayTourList .section3 .accordion .text-right { width: 100%; flex-direction: row-reverse; justify-content: space-between; } */ #dayTourList .section3 .accordion .text-right { width: 100%; flex-direction: row; justify-content: space-between; margin-top: 10px} } @media (max-width: 767px) {#dayTourList .section1 { display: none; } #dayTourList .section2 { position: fixed; max-width: 100%; height: unset; border-top: 0; transform: translateY(100%); visibility: hidden; border-radius: 16px 16px 0 0; padding: 40px 20px 20px; } #dayTourList .section2 .absolute { right: 8px; top: 8px; } #dayTourList .section2 .hidden { display: block; } #dayTourList .section2 .btn { display: flex; margin-top: 12px; } #dayTourList .section2 .sticky { position: unset; row-gap: 20px; } #dayTourList .section2 .wrap .t12 { font-size: 13px; line-height: 18px; } #dayTourList .section3 { row-gap: 20px; } #dayTourList .section3 > .row-16 { row-gap: 4px; } #dayTourList .section3 .column-8.relative { height: 48px; } #dayTourList .section3 .column-8.relative .column-10 { column-gap: 4px; } #dayTourList .section3 .column-8.relative .t40 { font-weight: 500; font-size: 18px; line-height: 26px; } #dayTourList .section3 .column-8.relative img { max-width: 20px; } #dayTourList .section3 .column-8.relative .hidden { display: flex; align-items: center; justify-content: center; } #dayTourList .section3 > .row-16 .t18 { color: var(--base2); font-size: 13px; font-weight: 400; line-height: 18px; } #dayTourList .section3 .row-32 { row-gap: 20px; } #dayTourList .section3 .center-between { flex-wrap: wrap; row-gap: 12px; } #dayTourList .section3 .center-between .t22 { font-size: 16px; line-height: 24px; font-weight: 700; } #dayTourList .section3 .center-between .hidden { display: flex; min-width: 100%; justify-content: space-between; } #dayTourList .section3 .center-between .border { padding: 8px; height: 32px; } #dayTourList .section3 .center-between .border img { max-width: 16px; } #dayTourList .section3 .accordion .end-between { row-gap: 8px; } /*#dayTourList .section3 .accordion .overflow-hidden { min-width: 80px; max-width: 80px; height: 60px; } */ #dayTourList .section3 .accordion .overflow-hidden { min-width: 100%;height: 195px;object-fit: cover;aspect-ratio: 1; } /*#dayTourList .section3 .accordion .row-8 { row-gap: 4px; }*/ /*#dayTourList .section3 .accordion .row-8 .t18 { font-size: 15px; line-height: 18px; } */ #dayTourList .section3 .accordion .row-8 .wrap { gap: 4px; } #dayTourList .section3 .accordion .row-8 .t14 { flex-direction: column; align-items: flex-start; } #dayTourList .section3 .accordion .row-8 .bg-base7 { height: 0; } #dayTourList .section3 .accordion .row-16 { row-gap: 8px; } #dayTourList .section3 .accordion .row-2 { flex-direction: row-reverse; align-items: center; column-gap: 4px; } #dayTourList .section3 .accordion .row-2 .t18 { font-size: 14px; line-height: 20px; } #dayTourList .section3 .accordion .row-2 .t24 { font-size: 15px; font-weight: 500; line-height: 22px; } #dayTourList .section3 .accordion .row-2 .t14 { font-size: 13px; line-height: 18px; } /*#dayTourList .section3 .accordion .text-right .rounded-pill { display: none; } */ #dayTourList #offcanvasSort { width: 100%; position: fixed; max-width: 100%; height: unset; transform: translateY(100%); visibility: hidden; padding: 20px; background: transparent; } #dayTourList #offcanvasSort .bg-base10 { border-radius: 10px; } #dayTourList #offcanvasSort .column-20 { flex-direction: column; } #dayTourList #offcanvasSort .column-20 .t14 { font-size: 16px; font-weight: 500; line-height: 24px; display: flex; align-items: center; justify-content: center; height: 56px; border-bottom: 1px solid var(--base9); } #dayTourList #offcanvasSort .column-20 .t14:last-of-type { border-bottom: 0; } } /* 데이 투어 상세 */ #dayTourDetail { padding: 60px 20px; } #dayTourDetail .bg-base0.full-width { height: 1px; } #dayTourDetail .bg-base8:not(.sticky) { height: 1px; } #dayTourDetail .section1 .column-4 .block { cursor: pointer; width: 24px; height: 24px; background: url("../img/ic_heart_outline_24.svg")no-repeat center; background-size: contain; } #dayTourDetail .section1 .column-4 input:checked + .block { background: url("../img/ic_heart_filled_24.svg")no-repeat center; } #dayTourDetail .section1 .wrap .t14 { padding: 4px 12px; background: #EAEDF2; } #dayTourDetail #inclusions .t16 { min-width: 140px; } #dayTourDetail #course .sticky-tabs { top: 44px; left: 0; z-index: 2; } #dayTourDetail #course .sticky-tabs .t16 { padding: 20px; } #dayTourDetail #course .sticky-tabs .t18 { min-width: 60px; } #dayTourDetail #course .sticky-tabs .indicator { z-index: -1; height: 100%; background: var(--base2); } #dayTourDetail #course .border { padding: 20px 0 20px 16px; } #dayTourDetail #course .border.relative::before { content: ''; display: block; width: 1px; height: calc(100% - 84px); position: absolute; top: 48px; left: 31px; background: #D9D9D9; z-index: -1; } #dayTourDetail #course .column-12 { padding-right: 16px; } #dayTourDetail #course .bg-primary { min-width: 30px; width: 30px; height: 30px; border: 1px solid var(--base10); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.20); } #dayTourDetail #course .column-12:not(.items-center) { margin-left: 42px; overflow-x: auto; } #dayTourDetail #course .column-12 .rounded-xs { width: 156px; min-width: 156px; height: 104px; } #dayTourDetail #map { height: 510px; } #dayTourDetail .section2 { max-width: calc(100% - (285px + 40px)); } #dayTourDetail .section3 { top: 84px; right: 0; width: 285px; z-index: 101; } #dayTourDetail .section3 .center-between { padding: 10px 12px 10px 14px; height: 48px; } #dayTourDetail .section3 .text-base2 { padding: 14px 12px; } #dayTourDetail .section3 .text-base2 .block { min-width: 24px; height: 24px; background: url("../img/ic_radio_off_24.svg") no-repeat center; } #dayTourDetail .section3 input:checked + .text-base2 .block { background: url("../img/ic_radio_on_24.svg") no-repeat center; } #dayTourDetail .section3 .pickup { top: 220px; left: -410px; right: 0; } #dayTourDetail .section3 .drop { top: 305px; left: -410px; right: 0; } #dayTourDetail .section3 #pickupTime { cursor:pointer; height:45px; } #dayTourDetail .section3 .pickupTime-label { position: absolute; right: 13px; cursor:pointer } /*#dayTourDetail .section3 .selectedTime span { display: block;position: absolute;width: 30%; }*/ /*#dayTourDetail .section3 .pickupTime img { float:left }*/ .ui-timepicker-container {z-index: 101 !important;} /*#dayTourDetail #recommend .overflow-hidden { height: 203px; }*/ #dayTourDetail #recommend .absolute { right: 16px; top: 12px; z-index: 1; min-width: 24px; height: 24px; background: url("../img/ic_check_24_outline.svg") no-repeat center; } #dayTourDetail #recommend input:checked + .absolute { background: url("../img/ic_heart_filled_24.svg")no-repeat center; } /*#dayTourDetail #recommend .swiper-container { margin-top: -160px; }*/ #dayTourDetail #recommend .swiper-wrapper { align-items: center; } #dayTourDetail #recommend .swiper-slide { display: flex; flex-direction: column; row-gap: 16px; padding: 12px 12px 20px 12px; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); } #dayTourDetail #recommend .swiper-slide .overflow-hidden { height: 140px; } #dayTourDetail #recommend .swiper-slide .t15:not(.text-base2) { display: none; } #dayTourDetail #recommend .swiper-slide-active { row-gap: 12px; } #dayTourDetail #recommend .swiper-slide-active .t15:not(.text-base2) { display: block; } #dayTourDetail #review .rounded-sm { padding: 22px; background: #F6F7FB; } #dayTourDetail #review .rounded-circle { min-width: 52px; max-width: 52px; height: 52px; } #dayTourDetail #review .border { padding: 5px 16px; } #dayTourDetail #review input:checked + .border { border-color: var(--primary) !important; background-color: #F8EDF1 !important; } #dayTourDetail .swiper1 .swiper-slide img{min-height: 500px;max-height: 500px;} #dayTourDetail .reference-wrap { position: absolute;top: 90%;left: 0%;z-index: 2;width: 100%;line-height: 34px;} #dayTourDetail .reference {width: 30%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(255, 255, 255, 0.6); text-align: center; font-size: 0.8rem;line-height: 1.9;word-break: keep-all;} #dayTourDetail .reference-end {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(255, 255, 255, 0.6); text-align: center; flex-grow: 0.07; border-top-right-radius: 100%;} #dayTourDetail .reference a {color: black; } #dayTourDetail .pickup-search-wrap {max-height: 220px; display:none; overflow-y: auto; border: 1px solid var(--base8);border-radius: .25rem;} #dayTourDetail #pickup-search-results {position: relative; left: 0; right: 0; z-index: 1000;} #dayTourDetail #pickup-search-results .list-group-item {border: 0px; border-bottom: 1px solid rgba(0, 0, 0, .125); cursor: pointer;} #dayTourDetail #pickup-search-results .list-group-item:last-child {border: 0px;} #dayTourDetail #pickup-search-results .list-group-item:hover .fw-bold {color: var(--primary);} #dayTourDetail .paging .comments_page {color: var(--base2) !important; font-weight: 500;} #dayTourDetail .paging .comments_page.in-page {color: var(--primary) !important; font-weight: 700;} #dayTourDetail #payWrap del {font-size: 12px; margin-right: 2px} #dayTourDetail .vehicle-option del {font-size: 12px; margin-right: 2px} @media (min-width: 768px) {#dayTourDetail .section3 #accordion-content { display: block !important; } } @media (max-width: 1023px) {#dayTourDetail .section2 { max-width: calc(100% - 325px); } #dayTourDetail #course .sticky-tabs .t16 { padding: 10px; column-gap: 4px; justify-content: center; } #dayTourDetail #course .sticky-tabs .t18 { min-width: unset; font-size: 16px; } #dayTourDetail .section3 { min-width: 285px; } } @media (max-width: 767px) {#dayTourDetail { padding: 20px 0 160px; row-gap: 32px; } #dayTourDetail .bg-base8:not(.sticky) { display: none; } #dayTourDetail .section1 { row-gap: 20px; } #dayTourDetail .section1 .bg-base0 { margin: 0 20px; width: unset; } #dayTourDetail .section1 .row-32 { row-gap: 20px; } #dayTourDetail .section1 .row-16 { row-gap: 8px; padding: 0 20px; position: relative; } #dayTourDetail .section1 .t48 { font-size: 18px; line-height: 26px; } #dayTourDetail .section1 .column-4 { position: absolute; right: 20px; top: 0; } #dayTourDetail .section1 .row-24 { row-gap: 20px; padding: 0 20px; } #dayTourDetail .section1 .hidden { display: block; padding: 0 20px 16px; } #dayTourDetail .row-40:not(.section1) > .bg-base0 { display: none; } #dayTourDetail .section2 { max-width: unset; } #dayTourDetail .section2 .t24 { font-size: 16px; line-height: 24px; } #dayTourDetail #info { padding: 0 20px; row-gap: 16px; } #dayTourDetail #info .row-16 { row-gap: 20px; } #dayTourDetail #info .t15 { font-size: 14px; line-height: 20px; } #dayTourDetail #inclusions { padding: 0 20px; row-gap: 16px; } #dayTourDetail #inclusions *:not(.t24) { font-size: 14px; line-height: 20px; } #dayTourDetail #inclusions .column-16 { flex-direction: column; row-gap: 16px; } #dayTourDetail #inclusions .column-16 img { max-width: 20px; } #dayTourDetail #course { row-gap: 16px; } #dayTourDetail #course .t24 { padding: 0 20px; } #dayTourDetail #course .sticky-tabs .t16 { font-size: 13px; line-height: 18px; } #dayTourDetail #course .sticky-tabs .t18 { line-height: 20px; } #dayTourDetail #course .row-20 { row-gap: 16px; } #dayTourDetail #course .row-20 .row-16:not(.border) { padding: 0 20px; } #dayTourDetail #course .border { padding: 16px; padding-right: 0; } #dayTourDetail #course .border .t18 { font-size: 14px; line-height: 20px; } #dayTourDetail #course .border .t18 img { max-width: 16px; } #dayTourDetail #course .column-12 { font-size: 13px; line-height: 18px; } #dayTourDetail #course .column-12:not(.items-center) { margin-top: -4px; } #dayTourDetail #map { height: 172px; margin: 0 20px; } #dayTourDetail #guide { padding: 0 20px; row-gap: 16px; } #dayTourDetail #guide .t15 { font-size: 14px; line-height: 20px; } #dayTourDetail #recommend { padding-left: 20px; row-gap: 16px; } #dayTourDetail #recommend .t28 { font-size: 20px; line-height: 28px; } #dayTourDetail #recommend .column-20 { overflow-x: auto; padding-right: 20px; } #dayTourDetail #recommend .row-12 { min-width: 136px; } #dayTourDetail #recommend .overflow-hidden { height: 92px; } #dayTourDetail #recommend .absolute { display: none; } #dayTourDetail #recommend .row-8 { row-gap: 4px; } #dayTourDetail #recommend .column-6 { column-gap: 4px; font-size: 13px; line-height: 18px; } #dayTourDetail #recommend .column-6 img { max-width: 16px; } #dayTourDetail #recommend .t18 { font-size: 15px; line-height: 20px; } #dayTourDetail #recommend .t20 { font-size: 15px; line-height: 20px; } #dayTourDetail #recommend .text-base3 { font-size: 13px; line-height: 18px; display: block; } #dayTourDetail #recommend .swiper-container { padding-top: 20px; display: flex; flex-direction: column; row-gap: 12px; } #dayTourDetail #recommend .swiper-container .text-weight-medium { font-size: 18px; line-height: 26px; } #dayTourDetail #recommend .swiper-container .t15 { font-size: 14px; line-height: 20px; } #dayTourDetail #review { padding: 0 20px; row-gap: 16px; } #dayTourDetail #review .t24 { font-size: 20px; line-height: 28px; } #dayTourDetail #review .t18 { font-size: 15px; line-height: 22px } #dayTourDetail #review .t15 { font-size: 14px; line-height: 20px } #dayTourDetail #review .t14.text-base3 { font-size: 12px; line-height: 16px } #dayTourDetail #review .rounded-sm { padding: 16px; row-gap: 8px; } #dayTourDetail #review .column-10 { column-gap: 6px; } #dayTourDetail #review .row-2 { row-gap: 0; } #dayTourDetail #review .row-12 { row-gap: 4px; } #dayTourDetail #review .rounded-circle { min-width: 32px; max-width: 32px; height: 32px; } #dayTourDetail #review .border { font-size: 12px; line-height: 16px } #dayTourDetail .section3 { box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.20); padding: 0 20px 16px; border-radius: 12px 12px 0 0; row-gap: 16px; background-color: var(--base10); position: fixed; top: unset; bottom: 0; left: 0; width: 100%; z-index: 101; max-width: unset; max-height: 100%; } #dayTourDetail .section3 #accordion-toggle { display: block; } #dayTourDetail .section3 #accordion-content { display: none; overflow-y: auto; } /*#dayTourDetail .section3 .t22,*/ #dayTourDetail .section3 .t24 { display: none; } #dayTourDetail .section3 .row-16 { row-gap: 12px; } #dayTourDetail .section3 .text-base2 br { display: none; } } /* 결제 */ #payment .container.row-60 { padding: 80px 20px 120px; } #payment .container.row-60 .bg-base0 { height: 1px; } #payment .wrapper::after { content: ''; display: block; visibility: hidden; clear: both; } #payment .section2 { float: left; padding-right: 40px; width: 74.6%; } #payment .section2 .row-24 { border-bottom: 1px solid var(--base8); padding-bottom: 24px; } #payment .section2 .accordion { border-radius: 0; border: 0; } #payment .section2 .accordion-item { border-radius: 0 !important; border:0; } #payment .section2 .accordion .center-between { padding: 20px 0; border-bottom: 1px solid var(--base0); } #payment .section2 .accordion .center-between .block { transition: .25s; } #payment .section2 .accordion .center-between:not(.collapsed) .block { transform: rotate(-180deg); } #payment .section2 .accordion-body { padding: 20px 0; border-bottom: 1px solid var(--base0); } #payment .section2 .row-20 .t16 { min-width: 140px; } #payment .section2 .row-20 .bg-base8 { min-height: 1px; } #payment .section3 { float: left; width: 25.4%; position: sticky; top: 40px; right: 0; } #payment .section3 .bg-base8 { min-height: 1px; } @media (max-width: 767px) {#payment .container.row-60 { padding: 0; row-gap: 32px; } #payment .container.row-60 .t24 { font-size: 16px; line-height: 24px; } #payment .container.row-60 .column-40 { flex-direction: column; } #payment .container.row-60 .bg-base0 { display: none; } #payment .container.row-60 .t48 { font-size: 18px; line-height: 26px; padding: 12px 20px 32px; } #payment .container.row-60 .t20 { font-size: 16px; line-height: 24px; font-weight: 500; } #payment .container.row-60 .t18 { font-size: 15px; line-height: 22px; } #payment .container.row-60 .t16 { font-size: 14px; line-height: 20px; } #payment .container.row-60 .t15 { font-size: 14px; line-height: 20px; } #payment .section1 { row-gap: 0; } #payment .section2 { float: none; width: 100%; row-gap: 32px; padding: 0 20px; border: 0; } #payment .section2 .row-24 { row-gap: 16px; padding-bottom: 32px; } #payment .section2 .row-24:last-of-type { border-bottom: 0; } #payment .section2 .row-4 { row-gap: 0; } #payment .section2 .accordion-body .column-20 { column-gap: 12px; } #payment .section2 .row-12:not(.accordion-body) { row-gap: 8px; } #payment .section2 .row-20 .column-16 { flex-direction: column; row-gap: 16px; } #payment .section2 .row-20 .column-16 img { max-width: 20px; } #payment .section2 .row-20 .bg-base8 { display: none; } #payment .section3 { float: none; row-gap: 20px; width: 100%; top: unset; bottom: 0; left: 0; z-index: 4; border-radius: 12px 12px 0px 0px; background: #FFF; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10); padding: 20px; padding-bottom: 16px; } #payment .section3 > .row-16 { row-gap: 8px; } #payment .section3 .bg-base8 { margin-top: 12px; } #payment .section3 .center-between:not(.t14) { display: none; } #payment .section3 .row-8 .t15 { display: none; } #payment .section3 .row-32 { flex-direction: row; align-items: center; justify-content: space-between; } #payment .section3 .row-32 .row-16 { row-gap: 0; } #payment .section3 .row-32 .row-16 .t16 { font-size: 12px; line-height: 16px; color: var(--base4); } #payment .section3 .row-32 .row-16 .text-primary { color: var(--base0) !important; font-size: 16px; line-height: 24px; } #payment .section3 .btn { height: 40px; } } /************************************************************** *************************************************************** ***************************** 06 ****************************** *************************************************************** **************************************************************/ /* 회사소개 */ #about .section1 { height: 1000px; padding-bottom: 120px; } #about .section1 .container .t44 { padding-top: 8px; } #about .section1 .container .t18 { max-width: 650px; } #about .section2 { padding: 120px 0; } #about .section2 .bg-base9 { display: block; width: 1px; top: 16px; left: 50%; transform: translateX(-50%); height: 100%; } #about .section2 .line { width: 1px; height: 0; background-color: var(--primary); transition: .5s linear; top: 16px; left: 50%; transform: translateX(-50%); } #about .section2 .active .line { height: 100%; } #about .section2 .rounded-circle { width: 16px; height: 16px; background-color: var(--base9); transition: .35s ease; position: relative; z-index: 1; } #about .section2 .active .rounded-circle { background-color: var(--primary); } #about .section2 .column-40 .relative { margin-top: 16px; } #about .section2 .w-50 { padding-bottom: 100px; } #about .section2 .text-right .row-16 { align-items: flex-end; } #about .section3 { column-gap: 140px; padding-bottom: 120px; } #about .section3 .overflow-hidden { border-radius: 30px; } #about .section3 .row-80 { padding: 60px 0 126px; max-width: 540px; } #about .section3 .row-80 .overflow-hidden { height: 340px; } #about .section4 { background: url('https://d1m2y4le6zw0dj.cloudfront.net/image/sub_10_bg_02.jpg')no-repeat center; background-size: cover; height: 780px; padding-top: 120px; margin-bottom: 120px; } #about .section5 { padding-bottom: 145px; } #about .section5 .grid { grid-template-columns: 1fr 1fr; column-gap: 80px; grid-template-rows: auto auto; } #about .section5 .row-32:nth-child(2) { padding: 160px 0 86px; } #about .section5 .relative { top: -136px; } #about .section5 .overflow-hidden { border-radius: 30px; height: 320px; } #about .section5 .row-6 { padding: 0 20px; } #about .section6 { padding-bottom: 120px; } #about .section6 .column-100 > .full-width { min-width: 0; } #about .section6 .column-100 > .full-width:first-of-type { max-width: 580px; } #about .section6 .mySwiper { overflow: unset; } #about .section6 .mySwiper .swiper-slide { height: 150px !important; padding: 28px 30px; border-radius: 10px; } #about .section6 .swiper-slide-thumb-active { box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1); } #about .section6 .swiper-slide-thumb-active::before { display: none; } #about .section6 .mySwiper .swiper-slide br { display: none; } @media (max-width: 1023px) {#about .section1 .container { flex-direction: column; row-gap: 8px; } #about .section1 .t44 br { display: none; } #about .section1 .t18 { max-width: unset; } #about .section2 .w-50 { padding-bottom: 60px; } #about .section2 .w-50:not(.row-32) { display: none; } #about .section2 .text-right { flex-direction: row-reverse; text-align: left; justify-content: flex-end; } #about .section2 .text-right .row-16 { align-items: flex-start; } #about .section2 .bg-base9 { transform: unset; left: 27px; } #about .section3 { column-gap: 60px; } #about .section3 .row-80 { max-width: 50%; } #about .section6 .column-100 { flex-direction: column-reverse; row-gap: 16px; } #about .section6 .column-32 { flex-direction: column; row-gap: 16px; padding-bottom: 55px; } #about .section6 .column-32 > div { width: 100%; max-width: unset; row-gap: 16px; } #about .section6 .column-32 .row-20 { row-gap: 16px; } #about .section6 .mySwiper .swiper-slide { box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.10); } #about .section6 .mySwiper .swiper-slide-active::after { content: ''; display: block; width: 100%; height: 100%; background-color: #fff; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.10); position: absolute; top: 0; border-radius: 10px; left: calc(100% + 12px); } #about #footer { display: block; } #about #footer .column-20 { column-gap: 12px; } } @media (max-width: 767px) {#about .section1 { padding-bottom: 0; height: 630px; } #about .section1 .fit { display: none; } #about .section1 .hidden { display: block; } #about .section1 .container { padding-bottom: 60px; } #about .section1 .container .t44 { font-size: 20px; line-height: 28px; } #about .section1 .container .t18 { font-size: 14px; line-height: 20px; } #about .section2 { padding: 60px 0; } #about .section2 .column-40 { column-gap: 12px; } #about .section2 .column-40 .relative { padding-bottom: 0; margin-top: 9px; } #about .section2 .w-50 { padding-bottom: 40px; row-gap: 16px; width: 100% !important; } #about .section2 .w-50 .t32 { font-size: 18px; line-height: 26px; } #about .section2 .w-50 .row-16 { row-gap: 12px; } #about .section2 .w-50 .column-16 { column-gap: 8px; font-size: 15px; line-height: 22px; } #about .section2 .rounded-circle { width: 9px; height: 9px; } #about .section2 .line { top: 9px; } #about .section2 .bg-base9 { left: 24px; } #about .section3 { row-gap: 16px; flex-direction: column-reverse; padding-bottom: 60px; } #about .section3 .overflow-hidden { border-radius: 16px; height: 444px; } #about .section3 .row-80 .overflow-hidden { height: 200px; } #about .section3 .row-80 { max-width: unset; padding: 0; row-gap: 16px; } #about .section3 .row-80 .row-20 { row-gap: 12px; } #about .section3 .row-80 .row-20 .t44 { font-size: 20px; line-height: 28px; } #about .section3 .row-80 .row-20 .t44 br { display: none; } #about .section3 .row-80 .row-20 .t16 { font-size: 15px; line-height: 22px; } #about .section4 { background: url('https://d1m2y4le6zw0dj.cloudfront.net/image/sub_10_bg_02_mo.jpg') no-repeat center; background-size: cover; height: 288px; padding-top: 40px; margin-bottom: 60px; } #about .section4 .row-20 { row-gap: 10px; } #about .section4 .t44 { font-size: 20px; line-height: 28px; } #about .section4 .t20 { font-size: 15px; line-height: 22px; } #about .section5 { padding-bottom: 60px; row-gap: 16px; } #about .section5 .t44 { font-size: 20px; line-height: 28px; } #about .section5 .t44 br { display: none; } #about .section5 .grid { display: flex; flex-direction: column; row-gap: 32px; } #about .section5 .row-32 { row-gap: 16px; top: 0; } #about .section5 .row-32:nth-child(2) { padding: 0; } #about .section5 .overflow-hidden { height: 170px; border-radius: 16px; } #about .section5 .row-6 { row-gap: 4px; padding: 0 12px; } #about .section5 .t18 { font-size: 16px; line-height: 24px; } #about .section5 .t16 { font-size: 14px; line-height: 20px; } #about .section6 { overflow: hidden; padding-bottom: 60px; row-gap: 16px; } #about .section6 .t44 { font-size: 20px; line-height: 28px; } #about .section6 .column-12 { display: none; } #about .section6 .mySwiper .swiper-slide { padding: 16px; height: unset !important; row-gap: 4px; } #about .section6 .mySwiper .swiper-slide .t18 { font-size: 16px; line-height: 24px; } #about .section6 .mySwiper .swiper-slide .t16 { font-size: 14px; line-height: 20px; } } /* B2B */ #b2b .bg-base1 { padding: 10px 16px; } #b2b .bg-base1::before { content: ''; width: 17px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='22' viewBox='0 0 18 22' fill='none'%3E%3Cpath d='M9.60611 0C9.60611 0 9.60611 7.10838 9.60611 11.0573C9.60611 15.0062 13.2228 21.8516 17.1075 21.8516C20.9923 21.8516 6.65928 23.4316 0.765625 16.2793' fill='%231D1D1D'/%3E%3C/svg%3E")no-repeat center; background-size: contain; position: absolute; bottom: 0; right: -8px; } #b2b .section1 { height: 940px; padding-top: 172px; } #b2b .section1 .container .t44 { padding-top: 8px; } #b2b .section1 .container .t18 { max-width: 650px; } #b2b .section2 { padding-top: 100px; } #b2b .section3 .overflow-hidden { border-radius: 32px; height: 540px; } #b2b .section3 .t28 { padding: 56px 30px; } #b2b .section4 .rounded-circle { width: 550px; height: 550px; background: #FFECEC; filter: blur(100px); z-index: -1; right: 0; bottom: 10px; } #b2b .section4 .row-20 { min-width: 562px; } #b2b .section4 .bg-base10 { padding: 28px 30px; border-radius: 10px; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.10); } #b2b .section4 .block { max-width: 740px; } #b2b .section5 .bg-base10 { padding: 56px 30px; border-radius: 30px; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.10); } #b2b .section5 .wrap { gap: 12px; } #b2b .section5 .wrap .rounded-pill { padding: 6px 15px; } #b2b .section6 { padding-bottom: 120px; } #b2b .section6 .flex { border: 1px solid var(--primary); background: #FFF2F2; } #b2b .section6 .flex .bg-primary { padding: 35px 40px; min-width: 214px; } #b2b .section6 .column-16 .text-weight-medium { min-width: 96px; } @media (max-width: 1023px) {#b2b .section3 .column-40 { column-gap: 20px; } #b2b .section3 .t28 { padding: 28px 20px; } #b2b .section4 .row-20 { min-width: unset; } #b2b .section4 .block { max-width: 50%; } #b2b .section6 .flex { flex-direction: column; } #b2b .section6 .flex .bg-primary { width: 100%; text-align: center; padding: 12px 20px; } #b2b .section6 .flex .column-20 { padding: 16px; } #b2b #footer { display: block; } } @media (max-width: 767px) {#b2b .t44 { font-size: 20px; line-height: 28px; } #b2b .row-120 { row-gap: 60px; } #b2b .row-20 { row-gap: 12px; } #b2b .row-20.t15 { font-size: 14px; line-height: 20px; } #b2b .bg-base1 { font-size: 13px; line-height: 18px; } #b2b .column-40 { flex-direction: column; row-gap: 20px; } #b2b .section1 { height: unset; padding: 0; } #b2b .section1 .fit { display: none; } #b2b .section1 .hidden { display: block; } #b2b .section1 .container { position: absolute; right: 20px; top: 64px; } #b2b .section2 { padding-top: 60px; row-gap: 32px; } #b2b .section2 .row-32 { row-gap: 8px; } #b2b .section2 .row-10 { row-gap: 6px; font-size: 15px; line-height: 22px; } #b2b .section2 .text-primary { font-size: 18px; line-height: 26px; } #b2b .section2 .text-primary .t60 { font-size: 28px; line-height: 36px; } #b2b .section3 { row-gap: 16px; } #b2b .section3 .overflow-hidden { height: 432px; } #b2b .section3 .t28 { font-size: 18px; line-height: 26px; } #b2b .section4 { row-gap: 46px; } #b2b .section4 .rounded-circle { right: unset; top: 122px; width: 236px; height: 550px; left: 50%; transform: translateX(-50%); } #b2b .section4 .column-68 { flex-direction: column-reverse; row-gap: 16px; } #b2b .section4 .block { max-width: unset; } #b2b .section4 .bg-base10 { padding: 16px; } #b2b .section4 .bg-base10 .t18 { font-size: 16px; line-height: 24px; } #b2b .section4 .bg-base10 .t16 { font-size: 14px; line-height: 20px; } #b2b .section5 { row-gap: 16px; } #b2b .section5 .bg-base10 { padding: 20px; row-gap: 12px; } #b2b .section5 .bg-base10:first-of-type .mx-auto { width: 100px; margin-bottom: 8px; } #b2b .section5 .bg-base10:nth-of-type(2) .mx-auto { width: 120px; margin-bottom: 8px; } #b2b .section5 .bg-base10:last-of-type .mx-auto { width: 89px; margin-bottom: 8px; } #b2b .section5 .bg-base10 .t40 { font-size: 20px; line-height: 28px; } #b2b .section5 .bg-base10 .text-primary { font-size: 15px; line-height: 22px; } #b2b .section5 .bg-base10 .flex-start { font-size: 14px; line-height: 20px; } #b2b .section5 .wrap { gap: 4px; } #b2b .section5 .wrap .rounded-pill { font-size: 13px; padding: 4px 12px; line-height: 18px; } #b2b .section6 { row-gap: 16px; padding-bottom: 60px; } #b2b .section6 .flex .column-20 { align-items: flex-start; } #b2b .section6 .flex .bg-primary { font-size: 16px; line-height: 24px; } #b2b .section6 .flex .t16 { font-size: 14px; line-height: 20px; row-gap: 4px; } #b2b .section6 .flex .t16 .text-weight-medium { font-size: 16px; line-height: 24px; } #b2b .section6 .column-16 { column-gap: 12px; margin-bottom: 4px; font-size: 14px; line-height: 20px; } #b2b .section6 .column-16 .text-weight-medium { min-width: 56px; } } /************************************************************** *************************************************************** ***************************** 07 ****************************** *************************************************************** **************************************************************/ /* 마이페이지 */ #mypage .row-60 { padding: 60px 20px 180px; } #mypage .row-60 .column { box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05); } #mypage .row-60 .column .btn { padding: 8px 12px; height: 30px; background: #F8EDF1; } #mypage .row-60 .column .btn.bg-white { border: 1px solid var(--primary); } #mypage .row-60 .column .bg-base9 { min-height: 1px; } #mypage .row-60 .column .column-16 { padding: 20px; } #mypage .row-60 .column .rounded-circle { max-width: 52px; min-width: 52px; min-height: 52px; max-height: 52px; } #mypage .row-60 .column .column-20 { padding: 20px; } #mypage .row-60 .column .bg-base8 { min-width: 1px; height: 36px; } #mypage .row-60 .grid { gap: 12px; grid-template-columns: repeat(3,minmax(0,1fr)); } #mypage .row-60 .grid .bg-base9 { padding: 16px 20px; } #mypage .row-60 .row-24 .center-between:not(.t14) { padding: 0 100px; } #mypage .row-60 .row-24 .center-between:not(.t14) .qna { display: none; } #mypage .row-60 .row-24 .row-2 { width: 120px; } @media (max-width: 767px) {#mypage .row-60 { padding: 16px 20px; row-gap: 32px; } #mypage .row-60 .t36, #mypage .row-60 .t24, #mypage .row-60 .nowrap, #mypage .row-60 .column .bg-base9 { display: none; } #mypage .row-60 .column { box-shadow: unset; row-gap: 48px; } #mypage .row-60 .column .btn { height: 40px; width: 100%; } #mypage .row-60 .column .column-16 { padding: 0; flex-direction: column; row-gap: 10px; width: 100%; align-items: unset; } #mypage .row-60 .column .column-16 .row-4 { flex-direction: row; justify-content: space-between; width: 100%; } #mypage .row-60 .column .rounded-circle { max-width: 44px; min-width: 44px; min-height: 44px; max-height: 44px; } #mypage .row-60 .column .column-16 .row-4 .text-base0 span { text-decoration: underline; } #mypage .row-60 .column .column-12 .row-4 .column-4 { white-space: nowrap; column-gap: 2px; font-size: 14px; line-height: 20px; } #mypage .row-60 .column .column-12 .row-4 .column-4 img { max-width: 16px; } #mypage .row-60 .column .column-16 .column-4:not(.t15) { flex-direction: column; row-gap: 10px; } #mypage .row-60 .column .column-20 { padding: 16px; flex-direction: column; row-gap: 12px; border-radius: 8px; background: #FFF; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10); } #mypage .row-60 .column .bg-base8 { width: 100%; height: 1px; } #mypage .row-60 .full-width.center-between .column-12 img { display: none; } #mypage .row-60 .row-24 .center-between:not(.t14) { padding: 0 46px; justify-content: center; column-gap: 28px; } #mypage .row-60 .row-24 .center-between:not(.t14) .alarm { display: none; } #mypage .row-60 .row-24 .center-between:not(.t14) .qna { display: flex; } #mypage .row-60 .row-24 .row-2 { width: unset; } } /* 프로필수정 */ #profile .row-60 { padding: 60px 20px 120px; } #profile .row-60 .column-12 .rounded-circle { max-width: 80px; min-width: 80px; min-height: 80px; max-height: 80px; } #profile .row-60 .column-12 .btn { height: 36px; padding: 8px 12px; } #profile .row-60 .bg-base9 { padding: 20px; } #profile .row-60 .bg-base9 .text-base2 { min-width: 52px; } #profile .row-60 .bg-base9 .btn { height: 28px; padding: 5px 12px; } #profile .row-60 .grid { gap: 12px; grid-template-columns: repeat(2,minmax(0,1fr)); } @media (max-width: 767px) {#profile { display: flex; flex-direction: column; flex-grow: 1; } #profile .row-60 { padding: 24px 20px 20px; row-gap: 40px; flex-grow: 1; height: 100%; } #profile .row-60 .t36 { display: none; } #profile .row-60 .row-24 { row-gap: 32px; } #profile .row-60 .column-12 { column-gap: 24px; } #profile .row-60 .column-12 .rounded-circle { max-width: 52px; min-width: 52px; min-height: 52px; max-height: 52px; } #profile .row-60 .column-12 .absolute-bottom-right { right: -12px; } #profile .row-60 .bg-base9 { padding: 16px; } #profile .row-60 .t20 { font-size: 16px; line-height: 24px; } #profile .row-60 .bg-base9 .t15 { font-size: 14px; line-height: 20px; } #profile .row-60 .grid { display: flex; flex-direction: column; row-gap: 20px; } #profile .row-60 .row-52 { flex-grow: 1; } #profile .row-60 .btn.bg-primary { margin-top: auto; width: 100%; } } /* 설정 */ #setting .row-32 { padding: 60px 20px 120px; } #setting .row-32 .bg-base9 { padding: 16px 20px; } @media (max-width: 767px) {#setting .row-32 { padding: 16px 20px; } #setting .row-32 .t36 { display: none; } #setting .row-32 .column-12 { flex-direction: column; row-gap: 12px; } } /* 나의쿠폰 */ #myCoupon .row-32 { padding: 60px 20px 120px; } #myCoupon .row-32 .grid { gap: 30px; grid-template-columns: repeat(3,minmax(0,1fr)); } #myCoupon .row-32 .grid .row-8 { padding: 20px 20px 16px 20px; } #myCoupon .row-32 .grid .text-primary { background: #F8EDF1; padding: 4px 8px;; } #myCoupon .row-32 .grid .bg-base9 { padding: 16px 20px; } @media (max-width: 767px) {#myCoupon .row-32 { padding: 16px 20px 20px; row-gap: 16px; } #myCoupon .row-32 .t36 { font-size: 24px; line-height: 32px; font-weight: 700; } #myCoupon .row-32 .grid { display: flex; flex-direction: column; row-gap: 12px; } #myCoupon .row-32 .grid .row-8 { padding: 16px; } #myCoupon .row-32 .grid .row-8 .t18 { font-size: 16px; line-height: 24px; } #myCoupon .row-32 .grid .bg-base9 { padding: 8px 16px; font-size: 13px; line-height: 18px; } } /* 자주묻는 질문 */ #qna .row-32 { padding: 60px 20px 120px; } #qna .row-32 .accordion { border-radius: 0; border: 0; border-top: 1px solid var(--base0); } #qna .row-32 .accordion-item { border-radius: 0 !important; border:0; border-bottom: 1px solid var(--base8); padding: 36px 20px; } #qna .row-32 .t20:not(.collapsed) { color: var(--primary); } #qna .row-32 .t20 .block { transition: .25s; } #qna .row-32 .t20:not(.collapsed) .block { transform: rotate(-180deg); } #qna .row-32 .t15 { padding-top: 24px; } @media (max-width: 767px) {#qna .row-32 { padding: 0 20px 20px; } #qna .row-32 .t36 { display: none; } #qna .row-32 .accordion { border: 0; } #qna .row-32 .accordion-item { padding: 16px 0; } #qna .row-32 .t20 { font-size: 16px; line-height: 24px; } #qna .row-32 .t15 { font-size: 14px; line-height: 20px; padding-top: 16px; } } /* 공지사항 리스트 */ #noticeList .row-32 { padding: 60px 20px 120px; } #noticeList .row-32 table { border-top: 1px solid var(--base0); } #noticeList .row-32 th { height: 62px; } #noticeList .row-32 td { padding: 36px 20px; border-bottom: 1px solid var(--base8); } #noticeList .row-32 td .bg-red { width: 8px; height: 8px; display: inline-block; vertical-align: text-top; } @media (max-width: 767px) {#noticeList .row-32 { padding: 0 20px 20px; } #noticeList .row-32 .t36, #noticeList .row-32 thead { display: none; } #noticeList .row-32 table { border-top: 0; } #noticeList .row-32 table tr { position: relative; display: flex; flex-direction: column; row-gap: 8px; border-bottom: 1px solid var(--base8); padding: 16px 0; align-items: flex-start; } #noticeList .row-32 table tr:last-of-type { border-bottom: 0; } #noticeList .row-32 table td { padding: 0; border: 0; } #noticeList .row-32 table td .t20 { font-size: 16px; font-weight: 500; line-height: 24px; } #noticeList .row-32 table .t15 { font-size: 14px; line-height: 20px; } #noticeList .row-32 table .bg-red { position: absolute; right: -2px; top: 20px; width: 6px; height: 6px; } } /* 공지사항 상세 */ #noticeView .row-32 { padding: 60px 20px 120px; } #noticeView .row-32 .column { row-gap: 36px; } #noticeView .row-32 .bg-base8 { min-height: 1px; } #noticeView .row-32 .text-base0 { padding: 40px 0; } #noticeView .row-32 .mx-auto { min-width: 128px; } @media (max-width: 767px) {#noticeView .row-32 { padding: 16px 20px 20px; row-gap: 16px; } #noticeView .row-32 .t36, #noticeView .row-32 .mx-auto { display: none; } #noticeView .row-32 .column { row-gap: 0; } #noticeView .row-32 .row-16 { row-gap: 12px; padding-bottom: 16px; } #noticeView .row-32 .row-16 .t24 { font-weight: 700; } #noticeView .row-32 .row-16 .t15 { font-size: 14px; line-height: 20px; } #noticeView .row-32 .text-base0 { padding: 16px 0; display: flex; flex-direction: column; row-gap: 16px; color: var(--base3) !important; } } /* 알림 */ #alarm .row-32 { padding: 60px 20px 120px; } #alarm .row-32 .column { border-top: 1px solid var(--base0); } #alarm .row-32 .row-4 { padding: 36px 20px; border-bottom: 1px solid var(--base8); } #alarm .row-32 .text-base4 { margin-left: 56px; } @media (max-width: 767px) {#alarm .row-32 { padding: 16px 20px 20px; row-gap: 16px; } #alarm .row-32 .t36 { font-size: 24px; line-height: 32px; font-weight: 700; } #alarm .row-32 .column { border-top: 0; } #alarm .row-32 .column-12 { column-gap: 8px; font-size: 16px; line-height: 24px; font-weight: 500; } #alarm .row-32 .column-12 img { max-width: 36px; } #alarm .row-32 .row-4 { padding: 16px 0; row-gap: 8px; } #alarm .row-32 .row-4:last-of-type { border-bottom: 0; } #alarm .row-32 .text-base4 { margin-left: 44px; font-size: 14px; line-height: 20px; } } /* 내일정 */ #mySchedule .row-32 { padding: 60px 20px 120px; } #mySchedule .row-32 .column-8 .rounded-sm { width: 100%; padding:11px 15px; color: var(--base3); border: 1px solid var(--base8); background: var(--base9); } #mySchedule .row-32 .column-8 .rounded-sm.text-base10 { border-color: var(--base1); } #mySchedule .row-32 .row-12 .rounded-circle { min-width: 8px; height: 8px; background-color: #d9d9d9; } #mySchedule .row-32 .row-12 .border { padding: 20px; } #mySchedule .row-32 .row-12 .border .column-4.text-primary { padding: 6px 12px; background: #F8EDF1; } #mySchedule .row-32 .row-12 .border .btn { height: 44px; width: 152px; } #mySchedule .row-32 .row-12 .border .btn:not(.bg-base9) { border: 1px solid var(--primary); } #mySchedule .message { display: none; width: 100%; max-width: 320px; } #mySchedule #cancelToast { bottom: 20px; left: 50%; transform: translateX(-50%); } #mySchedule #reviewToast { bottom: 20px; left: 50%; transform: translateX(-50%); } #mySchedule .message { margin-top: auto; bottom: 20px; left: 0; } #mySchedule .message .p-3 { border-radius: 12px; background: rgba(214, 19, 76, 0.85); } #mySchedule .message .ms-auto { white-space: nowrap; padding: 5px 9px; } #mySchedule .message .column-10 { padding: 16px; background: rgba(0, 0, 0, 0.70); } @media (max-width: 1023px) {#mySchedule .row-32 .row-12 .border { flex-direction: column; row-gap: 16px; align-items: flex-start; } #mySchedule .row-32 .row-12 .border .column-12:not(.items-center) { width: 100%; } #mySchedule .row-32 .row-12 .border .btn { width: 100%; } } @media (max-width: 767px) {#mySchedule .row-32 { padding: 16px 20px 20px; row-gap: 16px; } #mySchedule .row-32 .t36 { display: none; } #mySchedule .row-32 .row-40 { row-gap: 24px; } #mySchedule .row-32 .tab-content { row-gap: 20px; } #mySchedule .row-32 .column-8 { flex-wrap: wrap; row-gap: 8px; } #mySchedule .row-32 .column-8 .rounded-sm { width: unset; padding: 7px 15px; } #mySchedule .row-32 .row-12 .text-base2 { font-size: 14px; line-height: 20px; } #mySchedule .row-32 .row-12 .border .column-12.items-center { flex-direction: column; row-gap: 4px; align-items: flex-start; width: 100%; } #mySchedule .row-32 .row-12 .border .column-4.text-primary { margin-bottom: 8px; } #mySchedule .row-32 .row-12 .border .column-12.items-center .t18 { font-size: 15px; line-height: 22px; } #mySchedule .row-32 .row-12 .border .column-12.items-center .t14:not(.text-primary) { font-weight: 500; } #mySchedule .row-32 .row-12 .border .btn { height: 40px; } #mySchedule .row-32 .row-12 .border .btn:not(.bg-base9) { display: none; } #mySchedule .message { max-width: unset; } #mySchedule .message.sticky { display: flex; } #mySchedule .message.absolute { position: fixed; padding: 0 20px; } } /* 내일정상세 */ #scheduleView .container.row-60 { padding: 80px 20px 120px; } #scheduleView .section1 .column-12 .t15 { padding: 6px 12px; background: #F8EDF1; } #scheduleView .section2 .column-40 { border-top: 1px solid var(--base0); padding: 40px 0; } #scheduleView .section2 .row-24 { border-bottom: 1px solid var(--base8); padding-bottom: 24px; } #scheduleView .section2 .accordion { border-radius: 0; border: 0; } #scheduleView .section2 .accordion-item { border-radius: 0 !important; border:0; } #scheduleView .section2 .accordion .center-between { padding: 20px 0; border-bottom: 1px solid var(--base0); } #scheduleView .section2 #vehicleOptionsAccordion .center-between { border-bottom: unset !important; } #scheduleView .section2 #routeAccordion .center-between { border-bottom: unset !important; } #scheduleView .section2 #scheduleInfoAccordion .center-between { border-bottom: unset !important; } #scheduleView .section2 .accordion .center-between .block { transition: .25s; } #scheduleView .section2 .accordion .center-between:not(.collapsed) .block { transform: rotate(-180deg); } #scheduleView .section2 .accordion-body { padding: 20px 0; border-bottom: 1px solid var(--base0); } #scheduleView .section2 #vehicleOptionsAccordion .accordion-body { border-bottom:unset !important; } #scheduleView .section2 #routeAccordion .accordion-body { border-bottom:unset !important; } #scheduleView .section2 #scheduleInfoAccordion .accordion-body { border-bottom:unset !important; } #scheduleView .section2 #scheduleInfoAccordion .summary-info {display: flex;justify-content: space-between;background: #f9fafb;padding: 16px;border-radius: 12px;border: 1px solid #e5e7eb;gap: 16px;flex-wrap: wrap;} #scheduleView .section2 #scheduleInfoAccordion .summary-item {flex: 1;min-width: 120px;text-align: center;} #scheduleView .section2 #scheduleInfoAccordion .icon {font-size: 24px;margin-bottom: 8px;} #scheduleView .section2 #scheduleInfoAccordion .label {font-size: 14px;color: #6b7280;} #scheduleView .section2 #scheduleInfoAccordion .value {font-size: 16px;font-weight: 500;color: #111827;} #scheduleView .section2 #scheduleInfoAccordion .value del {font-size: 14px;color: #9ca3af;} #scheduleView .section2 #scheduleInfoAccordion .discounted {font-size: 18px;color: #ef4444;} #scheduleView .section2 #scheduleInfoAccordion .badge {background: #fcd34d;color: #92400e;padding: 2px 6px;font-size: 12px;border-radius: 8px;display: inline-block;margin-top: 4px;} #scheduleView .section2 .row-12 .text-base2 img{ width: 20px; height: 20px } #scheduleView .section2 .row-12 .text-base2 { min-width: 100px; } #scheduleView .section2 .row-12 .item-name { min-width: 200px; } #scheduleView .section2 .row-12 .p-d-time { min-width: 100px; } #scheduleView .section2 .row-20 .t16 { min-width: 140px; } #scheduleView .section2 .row-20 .bg-base8 { min-height: 1px; } #scheduleView .section2 #map { height: 510px; } #scheduleView .section3 { max-width: 285px; } #scheduleView .section3 .bg-base8 { min-height: 1px; } #scheduleView .swiper-slide img{min-height: 500px;max-height: 500px;} #scheduleView .reference-wrap { position: absolute;top: 90%;left: 0%;z-index: 2;width: 100%;line-height: 34px;} #scheduleView .reference {width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(255, 255, 255, 0.6); text-align: center;} #scheduleView .reference-end {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(255, 255, 255, 0.6); text-align: center; flex-grow: 0.07; border-top-right-radius: 100%;} #scheduleView .reference a {color: black;} #scheduleView .convenience button { width: 250px; padding: 10px 12px 10px 14px !important; height: 48px; } @media (max-width: 767px) {#scheduleView .container.row-60 { padding: 0; row-gap: 32px; } #scheduleView .container.row-60 .t24 { font-size: 16px; line-height: 24px; } #scheduleView .container.row-60 .column-40 { flex-direction: column; padding: 0 20px 20px; row-gap: 60px; } #scheduleView .container.row-60 .t48 { font-size: 18px; line-height: 26px; } #scheduleView .container.row-60 .t20 { font-size: 16px; line-height: 24px; font-weight: 500; } #scheduleView .container.row-60 .t18 { font-size: 15px; line-height: 22px; } #scheduleView .container.row-60 .t16 { font-size: 14px; line-height: 20px; } #scheduleView .container.row-60 .t15 { font-size: 14px; line-height: 20px; } #scheduleView .section1 { row-gap: 0; } #scheduleView .section1 .column-12 { padding: 12px 20px 20px; flex-direction: column-reverse; row-gap: 8px; align-items: flex-start; } #scheduleView .section1 .column-10 { flex-wrap: wrap; gap: 8px; } #scheduleView .section2 .row-24 { row-gap: 16px; border-bottom: 0; padding-bottom: 0; } #scheduleView .section2 .row-24.border-0 { row-gap: 32px; } #scheduleView .section2 .row-4 { row-gap: 0; } #scheduleView .section2 .accordion-body .column-20 { column-gap: 12px; } #scheduleView .section2 #map { height: 172px; } #scheduleView .section2 .row-12:not(.accordion-body) { row-gap: 8px; } #scheduleView .section2 .row-20 .column-16 { flex-direction: column; row-gap: 16px; } #scheduleView .section2 .row-20 .column-16 img { max-width: 20px; } #scheduleView .section2 .row-20 .bg-base8 { display: none; } #scheduleView .section3 { max-width: unset; row-gap: 16px; } #scheduleView .section3 .row-16:last-of-type { flex-direction: row; width: 100%; padding-bottom: 16px; align-items: center; justify-content: space-between; } } /* 내일정상세 */ #settleView .container.row-60 { padding: 80px 20px 120px; } #settleView .section1 .column-12 .t15 { padding: 6px 12px; background: #F8EDF1; } #settleView .section2 .column-40 { border-top: 1px solid var(--base0); padding: 40px 0; } #settleView .section2 .row-24 { border-bottom: 1px solid var(--base8); padding-bottom: 24px; } #settleView .section2 .accordion { border-radius: 0; border: 0; } #settleView .section2 .accordion-item { border-radius: 0 !important; border:0; } #settleView .section2 .accordion .center-between { padding: 20px 0; border-bottom: 1px solid var(--base0); } #settleView .section2 #vehicleOptionsAccordion .center-between { border-bottom: unset !important; } #settleView .section2 #routeAccordion .center-between { border-bottom: unset !important; } #settleView .section2 #scheduleInfoAccordion .center-between { border-bottom: unset !important; } #settleView .section2 .accordion .center-between .block { transition: .25s; } #settleView .section2 .accordion .center-between:not(.collapsed) .block { transform: rotate(-180deg); } #settleView .section2 .accordion-body { padding: 20px 0; border-bottom: 1px solid var(--base0); } #settleView .section2 #vehicleOptionsAccordion .accordion-body { border-bottom:unset !important; } #settleView .section2 #routeAccordion .accordion-body { border-bottom:unset !important; } #settleView .section2 #scheduleInfoAccordion .accordion-body { border-bottom:unset !important; } #settleView .section2 #scheduleInfoAccordion .summary-info {display: flex;justify-content: space-between;background: #f9fafb;padding: 16px;border-radius: 12px;border: 1px solid #e5e7eb;gap: 16px;flex-wrap: wrap;} #settleView .section2 #scheduleInfoAccordion .summary-item {flex: 1;min-width: 120px;text-align: center;} #settleView .section2 #scheduleInfoAccordion .icon {font-size: 24px;margin-bottom: 8px;} #settleView .section2 #scheduleInfoAccordion .label {font-size: 14px;color: #6b7280;} #settleView .section2 #scheduleInfoAccordion .value {font-size: 16px;font-weight: 500;color: #111827;} #settleView .section2 #scheduleInfoAccordion .value del {font-size: 14px;color: #9ca3af;} #settleView .section2 #scheduleInfoAccordion .discounted {font-size: 18px;color: #ef4444;} #settleView .section2 #scheduleInfoAccordion .badge {background: #fcd34d;color: #92400e;padding: 2px 6px;font-size: 12px;border-radius: 8px;display: inline-block;margin-top: 4px;} #settleView .section2 .row-12 .text-base2 img{ width: 20px; height: 20px } #settleView .section2 .row-12 .text-base2 { min-width: 100px; } #settleView .section2 .row-12 .item-name { min-width: 200px; } #settleView .section2 .row-12 .p-d-time { min-width: 100px; } #settleView .section2 .row-20 .t16 { min-width: 140px; } #settleView .section2 .row-20 .bg-base8 { min-height: 1px; } #settleView .section2 #map { height: 510px; } #settleView .section3 { max-width: 285px; } #settleView .section3 .bg-base8 { min-height: 1px; } #settleView .swiper-slide img{min-height: 500px;max-height: 500px;} #settleView .reference-wrap { position: absolute;top: 90%;left: 0%;z-index: 2;width: 100%;line-height: 34px;} #settleView .reference {width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(255, 255, 255, 0.6); text-align: center;} #settleView .reference-end {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(255, 255, 255, 0.6); text-align: center; flex-grow: 0.07; border-top-right-radius: 100%;} #settleView .reference a {color: black;} #settleView .convenience button { width: 250px; padding: 10px 12px 10px 14px !important; height: 48px; } @media (max-width: 767px) {#settleView .container.row-60 { padding: 0; row-gap: 32px; } #settleView .container.row-60 .t24 { font-size: 16px; line-height: 24px; } #settleView .container.row-60 .column-40 { flex-direction: column; padding: 0 20px 20px; row-gap: 60px; } #settleView .container.row-60 .t48 { font-size: 18px; line-height: 26px; } #settleView .container.row-60 .t20 { font-size: 16px; line-height: 24px; font-weight: 500; } #settleView .container.row-60 .t18 { font-size: 15px; line-height: 22px; } #settleView .container.row-60 .t16 { font-size: 14px; line-height: 20px; } #settleView .container.row-60 .t15 { font-size: 14px; line-height: 20px; } #settleView .section1 { row-gap: 0; } #settleView .section1 .column-12 { padding: 12px 20px 20px; flex-direction: column-reverse; row-gap: 8px; align-items: flex-start; } #settleView .section1 .column-10 { flex-wrap: wrap; gap: 8px; } #settleView .section2 .row-24 { row-gap: 16px; border-bottom: 0; padding-bottom: 0; } #settleView .section2 .row-24.border-0 { row-gap: 32px; } #settleView .section2 .row-4 { row-gap: 0; } #settleView .section2 .accordion-body .column-20 { column-gap: 12px; } #settleView .section2 #map { height: 172px; } #settleView .section2 .row-12:not(.accordion-body) { row-gap: 8px; } #settleView .section2 .row-20 .column-16 { flex-direction: column; row-gap: 16px; } #settleView .section2 .row-20 .column-16 img { max-width: 20px; } #settleView .section2 .row-20 .bg-base8 { display: none; } #settleView .section3 { max-width: unset; row-gap: 16px; } #settleView .section3 .row-16:last-of-type { flex-direction: row; width: 100%; padding-bottom: 16px; align-items: center; justify-content: space-between; } } /* 스케쥴 뷰어 */ #scheduleViewer .container.row-60 { padding: 80px 20px 120px; } #scheduleViewer .section1 .column-12 .t15 { padding: 6px 12px; background: #F8EDF1; } #scheduleViewer .section2 .column-40 { border-top: 1px solid var(--base0); padding: 40px 0; } #scheduleViewer .section2 .row-24 { border-bottom: 1px solid var(--base8); padding-bottom: 24px; } #scheduleViewer .section2 .accordion { border-radius: 0; border: 0; } #scheduleViewer .section2 .accordion-item { border-radius: 0 !important; border:0; } #scheduleViewer .section2 .accordion .center-between { padding: 20px 0; border-bottom: 1px solid var(--base0); } #scheduleViewer .section2 #vehicleOptionsAccordion .center-between { border-bottom: unset !important; } #scheduleViewer .section2 #routeAccordion .center-between { border-bottom: unset !important; } #scheduleViewer .section2 #scheduleInfoAccordion .center-between { border-bottom: unset !important; } #scheduleViewer .section2 .accordion .center-between .block { transition: .25s; } #scheduleViewer .section2 .accordion .center-between:not(.collapsed) .block { transform: rotate(-180deg); } #scheduleViewer .section2 .accordion-body { padding: 20px 0; border-bottom: 1px solid var(--base0); } #scheduleViewer .section2 #vehicleOptionsAccordion .accordion-body { border-bottom:unset !important; } #scheduleViewer .section2 #routeAccordion .accordion-body { border-bottom:unset !important; } #scheduleViewer .section2 #scheduleInfoAccordion .accordion-body { border-bottom:unset !important; } #scheduleViewer .section2 #scheduleInfoAccordion .summary-info {display: flex;justify-content: space-between;background: #f9fafb;padding: 16px;border-radius: 12px;border: 1px solid #e5e7eb;gap: 16px;flex-wrap: wrap;} #scheduleViewer .section2 #scheduleInfoAccordion .summary-item {flex: 1;min-width: 120px;text-align: center;} #scheduleViewer .section2 #scheduleInfoAccordion .icon {font-size: 24px;margin-bottom: 8px;} #scheduleViewer .section2 #scheduleInfoAccordion .label {font-size: 14px;color: #6b7280;} #scheduleViewer .section2 #scheduleInfoAccordion .value {font-size: 16px;font-weight: 500;color: #111827;} #scheduleViewer .section2 #scheduleInfoAccordion .value del {font-size: 14px;color: #9ca3af;} #scheduleViewer .section2 #scheduleInfoAccordion .discounted {font-size: 18px;color: #ef4444;} #scheduleViewer .section2 #scheduleInfoAccordion .badge {background: #fcd34d;color: #92400e;padding: 2px 6px;font-size: 12px;border-radius: 8px;display: inline-block;margin-top: 4px;} #scheduleViewer .section2 .row-12 .text-base2 img{ width: 20px; height: 20px } #scheduleViewer .section2 .row-12 .text-base2 { min-width: 100px; } #scheduleViewer .section2 .row-12 .item-name { min-width: 200px; } #scheduleViewer .section2 .row-12 .p-d-time { min-width: 100px; } #scheduleViewer .section2 .row-20 .t16 { min-width: 140px; } #scheduleViewer .section2 .row-20 .bg-base8 { min-height: 1px; } #scheduleViewer .section2 .route-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } #scheduleViewer .section2 #map { height: 510px; } #scheduleViewer .section3 { max-width: 285px; } #scheduleViewer .section3 .bg-base8 { min-height: 1px; } #scheduleViewer .swiper-slide img{min-height: 500px;max-height: 500px;} #scheduleViewer .reference-wrap { position: absolute;top: 90%;left: 0%;z-index: 2;width: 100%;line-height: 34px;} #scheduleViewer .reference {width: 30%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(255, 255, 255, 0.6); text-align: center; font-size: 0.8rem;line-height: 1.9;word-break: keep-all;} #scheduleViewer .reference-end {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(255, 255, 255, 0.6); text-align: center; flex-grow: 0.07; border-top-right-radius: 100%;} #scheduleViewer .reference a {color: black;} #scheduleViewer .convenience button { width: 250px; padding: 10px 12px 10px 14px !important; height: 48px; } @media (min-width: 640px) { #scheduleViewer .section2 .route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { #scheduleViewer .container.row-60 { padding: 0; row-gap: 32px; } #scheduleViewer .container.row-60 .t24 { font-size: 16px; line-height: 24px; } #scheduleViewer .container.row-60 .column-40 { flex-direction: column; padding: 0 20px 20px; row-gap: 60px; } #scheduleViewer .container.row-60 .t48 { font-size: 18px; line-height: 26px; } #scheduleViewer .container.row-60 .t20 { font-size: 16px; line-height: 24px; font-weight: 500; } #scheduleViewer .container.row-60 .t18 { font-size: 15px; line-height: 22px; } #scheduleViewer .container.row-60 .t16 { font-size: 14px; line-height: 20px; } #scheduleViewer .container.row-60 .t15 { font-size: 14px; line-height: 20px; } #scheduleViewer .section1 { row-gap: 0; } #scheduleViewer .section1 .column-12 { padding: 12px 20px 20px; flex-direction: column-reverse; row-gap: 8px; align-items: flex-start; } #scheduleViewer .section1 .column-10 { flex-wrap: wrap; gap: 8px; } #scheduleViewer .section2 .row-24 { row-gap: 16px; border-bottom: 0; padding-bottom: 0; } #scheduleViewer .section2 .row-24.border-0 { row-gap: 32px; } #scheduleViewer .section2 .row-4 { row-gap: 0; } #scheduleViewer .section2 .accordion-body .column-20 { column-gap: 12px; } #scheduleViewer .section2 .route-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); } #scheduleViewer .section2 #map { height: 172px; } #scheduleViewer .section2 .row-12:not(.accordion-body) { row-gap: 8px; } #scheduleViewer .section2 .row-20 .column-16 { flex-direction: column; row-gap: 16px; } #scheduleViewer .section2 .row-20 .column-16 img { max-width: 20px; } #scheduleViewer .section2 .row-20 .bg-base8 { display: none; } #scheduleViewer .section3 { max-width: unset; row-gap: 16px; } #scheduleViewer .section3 .row-16:last-of-type { flex-direction: row; width: 100%; padding-bottom: 16px; align-items: center; justify-content: space-between; } #scheduleViewer .swiper-slide img{min-height: 300px;max-height: 300px; object-fit: cover} } /* 관심여행지 */ #myWish .row-32 { padding: 60px 20px 120px; } #myWish .row-32 .column-8 .rounded-sm { width: 100%; padding:11px 15px; color: var(--base3); border: 1px solid var(--base8); background: var(--base9); } #myWish .row-32 .column-8 .rounded-sm.text-base10 { border-color: var(--base1); } #myWish .row-32 .grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; } #myWish .row-32 .row-12 .rounded-circle { min-width: 8px; height: 8px; background-color: #d9d9d9; } #myWish .row-32 .row-12 .border .column-16 { padding: 20px; } #myWish .row-32 .row-12 .border .overflow-hidden { min-width: 80px; max-width: 80px; height: 80px; } #myWish .row-32 .row-12 .border input:checked + label svg path { fill:#D6134C; stroke:#D6134C; } #myWish .row-32 .row-12 .border .bg-base9 { padding: 16px 20px; } #myWish .row-32 .row-12 .border .column-12 { padding: 0 20px; } #myWish .row-32 .row-12 .border .btn { height: 44px; width: 152px; } @media (max-width: 1023px) {#myWish .row-32 .grid { grid-template-columns: repeat(1,minmax(0,1fr)); } #myWish .row-32 .center-between { flex-direction: column; align-items: flex-start; } #myWish .row-32 .row-12 .border .column-12 { width: 100%; padding-bottom: 20px; } #myWish .row-32 .row-12 .border .column-12 .btn { width: 100%; } } @media (max-width: 767px) {#myWish .row-32 { padding: 16px 20px 20px; } #myWish .row-32 .row-40 { row-gap: 24px; } #myWish .row-32 .t36 { display: none; } #myWish .row-32 .column-8 .rounded-sm { width: unset; padding: 7px 15px; } #myWish .row-32 .row-12 .text-base2 { font-size: 14px; line-height: 20px; } #myWish .row-32 .row-12 .border .column-12 { padding: 0 16px 16px; } #myWish .row-32 .row-12 .border .column-16 { padding: 16px; column-gap: 8px; width: 100%; } #myWish .row-32 .row-12 .border .overflow-hidden { min-width: 60px; max-width: 60px; height: 60px; } #myWish .row-32 .row-12 .border .start-between { align-items: center; column-gap: 12px; } #myWish .row-32 .row-12 .border .start-between .text-base1 { font-size: 13px; line-height: 18px; } #myWish .row-32 .row-12 .border label { text-indent: -9999px; gap: 0; } #myWish .row-32 .row-12 .border .t18 { font-size: 15px; line-height: 22px; } #myWish .row-32 .row-12 .border .bg-base9 { padding: 12px 16px; font-size: 13px; line-height: 18px; } #myWish .row-32 .row-12 .border .row-8 { row-gap: 0; width: 100%; } #myWish .row-32 .row-12 .border .t20 { font-size: 16px; line-height: 24px; text-align: right; } #myWish .row-32 .row-12 .border .t24 { font-size: 16px; line-height: 24px; } #myWish .row-32 .row-12 .border .btn { height: 40px; } } /* 나의댓글 */ #myComment .row-32 { padding: 60px 20px 120px; } #myComment .row-32 .column-16 { padding: 22px; background: #F6F7FB; } #myComment .row-32 .column-16 .overflow-hidden { min-width: 80px; max-width: 80px; height: 80px; } @media (max-width: 767px) {#myComment .row-32 { padding: 16px 20px 20px; } #myComment .row-32 .t36 { display: none; } #myComment .row-32 .row-16 { row-gap: 12px; } #myComment .row-32 .column-16 { position: relative; padding: 16px; } #myComment .row-32 .column-16 .overflow-hidden { position: absolute; top: 16px; left: 16px; min-width: 60px; max-width: 60px; height: 60px; } #myComment .row-32 .column-16 .row-4 .center-between { padding-left: 68px; } #myComment .row-32 .column-16 .t14 { font-size: 12px; line-height: 16px; } #myComment .row-32 .column-16 .t18 { font-size: 15px; line-height: 22px; min-height: 44px; padding-left: 68px; margin-bottom: 4px; } #myComment .row-32 .column-16 .t15 { font-size: 14px; line-height: 20px; } } /* 결제 성공 */ #settleResult {display: flex;flex-direction: column;justify-content: center;align-items: center;min-height: 100vh;margin: 0;background: #f9fafb;text-align: center;padding: 60px 20px 180px;} /*#settleResult img { object-fit: cover;}*/ #settleResult .title {font-size: 2rem;font-weight: 700;color: #111827;margin-bottom: 12px;} #settleResult .subtitle {font-size: 1rem;color: #4b5563;margin-bottom: 4px;} #settleResult .highlight {font-size: 1.1rem;color: #2563eb;font-weight: 500;margin-bottom: 24px;} #settleResult .home-button {display: inline-block;padding: 12px 24px;background-color: #2563eb;color: white;text-decoration: none;border-radius: 8px;font-weight: 600;transition: background 0.2s;} #settleResult .home-button:hover {background-color: #1e40af;} /* Error 401, 404*/ #Opps {display: flex;flex-direction: column;justify-content: center;align-items: center;min-height: 100vh;margin: 0;background: #f9fafb;text-align: center;padding: 60px 20px 180px;} #Opps .title {font-size: 2rem;font-weight: 700;color: #111827;margin-bottom: 12px;} #Opps .title-sm {font-size: 1.5rem;font-weight: 700;color: #111827;margin-bottom: 12px;} #Opps .home-button {display: inline-block;padding: 12px 24px;background-color: #2563eb;color: white;text-decoration: none;border-radius: 8px;font-weight: 600;transition: background 0.2s;} #Opps .home-button:hover {background-color: #1e40af;} /* 모바일랜딩 */ #landing { background: url('../img/mobile_landing.jpg')no-repeat center bottom; background-size: cover; } #landing .container { padding: 40px 20px 60px; } /************************************************************** *************************************************************** ***************************** 08 ****************************** *************************************************************** **************************************************************/ /* 자유여행 */ #intro { height: 100vh; overflow-x: scroll; /*min-width: 1920px;*/ width: 100%} #intro .absolute { top: 220px; left: 50%; transform: translateX(-50%); } #intro .full-height { max-width: 710px; background-color: #f8f8f8; padding: 40px 60px; } #intro .progress { width: 100%; height: 4px; position: relative; } #intro .progress .bg-primary { position: absolute; width: 0%; height: 100%; } #intro .progress .bg-primary.step1 { animation: step1 2s ease-out forwards; } #intro .progress .bg-primary.step2 { animation: step2 2s ease-out forwards; } #intro .progress .bg-primary.step3 { animation: step3 2s ease-out forwards; } #intro .offcanvas { visibility: visible; position: relative; top: unset; left: unset; right: unset; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10); } @keyframes step1 {0% { width: 0%; } 100% { width: 50%; } } @keyframes step2 {0% { width: 50%; } 100% { width: 100%; } } /*@keyframes step3 {0% { width: 66.666%; } 100% { width: 100%; } */ /* }*/ /* 자유여행 검색결과 */ #result { min-width: 1200px; } #result .section1 { width: 360px; height: 100vh; border-right: 1px solid var(--base8); z-index: 2; } #result .section1 .bg-primary { padding: 24px 20px; } #result .section1 .offcanvas { top: 36px; left: 0; } #result .section1 .wrap { gap: 6px; } #result .section1 .wrap .rounded-xs { padding: 4px 8px 4px 12px; background: rgba(255, 255, 255, 0.15); } #result .section1 .tab-buttons { overflow-x: auto; overflow-y: hidden; } /* overflow-x 스크롤 안보이게 처리 */ #result .section1 .tab-buttons {-ms-overflow-style:none /* IE and Edge */;scrollbar-width:none /* Firefox */} #result .section1 .tab-buttons ::-webkit-scrollbar {display:none /* Chrome , Safari , Opera */} /* overflow-x 스크롤 안보이게 처리 끝 */ #result .section1 .tab-buttons .tab-button { max-width: 120px; color: #94979E; padding: 10px; height: 44px; white-space: nowrap; transition: .15s; } #result .section1 .tab-buttons .tab-button::before { content: ''; display: block; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; z-index: 0; background-color: var(--base8); } #result .section1 .tab-buttons .tab-button.active { color: #45464B; font-weight: 700; } #result .section1 .tab-buttons .tab-button.active::before { height: 2px; background-color: var(--base0); } #result .section1 .row-12 { padding: 24px 20px; } #result .section1 .row-12 .text-base2 { line-height: 32px; } #result .section1 .row-12 .dropdown .center-between { height: 32px; padding: 0 14px; } #result .section1 .row-12 .dropdown-menu { width: 100%; transform: unset !important; min-width: unset; top: 36px !important; max-height: 130px; overflow-y: auto; } #result .section1 .row-12 .dropdown-menu .t14 { text-align: left; display: block; padding: 4px 16px; width: 100%; } #result .section1 .row-12 .dropdown-menu .t14:hover { background-color: var(--primary); color: var(--base10); } #result .section1 .row-12 .toggle1 { flex-wrap: wrap; gap: 6px; } #result .section1 .row-12 .toggle1 .toggle { font-size: 14px; line-height: 20px; border-radius: 4px; width: 100%; max-width: calc(33.333% - 4px); padding: 5px 12px; color: var(--base2); background-color: var(--base9); border: 1px solid var(--base9); transition: .15s; } #result .section1 .row-12 .toggle1 .toggle.active { font-weight: 500; border-color: var(--primary); color: var(--primary); background: rgba(214, 19, 76, 0.10); } #result .section1 .tab-content { background: #F0F5F9; overflow-y: auto; } #result .section1 .tab-panel { padding: 20px 10px; } #result .section1 .tab-panel .column-10::before { content: ''; display: block; width: 2px; height: calc(100% + 8px); background: url('../img/line.png')no-repeat top left; position: absolute; top: 36px; left: 12px; } #result .section1 .tab-panel .column-10:last-of-type::before { display: none; } #result .section1 .tab-panel .column-10 .t13.flex-center { margin-top: 12px; background: #D8E1EA; height: 24px; min-width: 24px; } #result .section1 .tab-panel .column-10 .center-between { padding: 10px 12px; border-bottom: 1px solid #E1E4EB; } #result .section1 .tab-panel .column-10 .column-6 { padding: 10px 12px; } #result .section1 .tab-panel .column-10 .overflow-hidden { max-width: 56px; min-width: 56px; height: 56px; } #result .section1 .mt-auto { padding: 16px 20px; } #result .section1 .mt-auto .btn:not(.border) { background-color: #E2E6EC; } #result .section1 .center-between {padding: 10px 12px 10px 14px;height: 48px;} #result .section1 .pointer {width:100%} #result .section2 { width: 360px; height: 100vh; z-index: 1; } #result .section2 .shrink-0 { padding: 24px 20px 10px; } #result .section2 .shrink-0 .column-10 .flex { height: 44px; padding: 8px 12px 8px 16px; border-radius: 6px; background: #F6F7FB; backdrop-filter: blur(5px); } #result .section2 .shrink-0 .column-10 .column-4 { width: 80px; height: 44px; padding: 8px 12px 8px 16px; backdrop-filter: blur(5px); border-radius: 6px; } #result .section2 .shrink-0 .grid { grid-template-columns: repeat(6,minmax(0,1fr)); row-gap: 12px; } #result .section2 .shrink-0 .grid .toggle { display: flex; flex-direction: column; row-gap: 4px; text-align: center; align-items: center; white-space: nowrap; } #result .section2 .shrink-0 .grid .toggle .border { width: 42px; height: 34px; } #result .section2 .shrink-0 .grid .toggle.active .border { border-color: var(--primary) !important; background-color: var(--primary); } #result .section2 .shrink-0 .grid .toggle.active .block { display: none; } #result .section2 .shrink-0 .grid .toggle.active .hidden { display: block; } #result .section2 .shrink-0 .wrap { gap: 6px; } #result .section2 .shrink-0 .wrap .toggle { border-radius: 6px; white-space: nowrap; padding: 7px 11px; border:1px solid var(--base9); border-radius: 6px; background: var(--base9); color: var(--base2); } #result .section2 .shrink-0 .wrap .toggle.active { color: var(--primary); border-color: var(--primary); background: rgba(214, 19, 76, 0.10); } #result .section2 .shrink-0 .end-between .toggle { color: #5A5E67; font-weight: 500; } #result .section2 .shrink-0 .end-between .toggle.active { color: var(--primary); font-weight: 700; } #result .section2 .grow-1 { overflow-y: auto; } #result .section2 .grow-1 .column-20 { padding: 16px; border-bottom: 1px solid #EBEEF3; } #result .section2 .grow-1 .column-20:last-of-type { border-bottom: 0; } #result .section2 .grow-1 .column-20 .overflow-hidden { max-width: 64px; min-width: 64px; height: 64px; } #result .section2 .grow-1 .column-20 .border { max-width: 28px; min-width: 28px; height: 28px; } #result .section2 .grow-1 .row-6 { text-align: left; padding: 12px 16px; border-bottom: 1px solid #EBEEF3; } #result .section2 .grow-1 .row-6:last-of-type { border-bottom: 0; } /* 지역명소 더보기 */ .offcanvasSpot { left: 360px; width: 360px; z-index: 1; overflow:scroll} .offcanvasSpot .relative .absolute { top: 10px; left: 10px; background: rgba(0, 0, 0, 0.30); max-width: 30px; min-width: 30px; height: 30px; } .offcanvasSpot .grow-1 { padding: 24px 20px 16px; } .offcanvasSpot .grow-1 .wrap { gap: 6px; } .offcanvasSpot .grow-1 .wrap .t14 { padding: 6px 8px; border-radius: 6px; border: 1px solid rgba(214, 19, 76, 0.10); opacity: 0.9; background: rgba(214, 19, 76, 0.10); } .offcanvasSpot .grow-1 .border { border-radius: 6px; border-color: #E2E7ED !important; } .offcanvasSpot .grow-1 .border.column-10 { padding: 0 10px; height: 48px; } .offcanvasSpot .grow-1 .border.center-between { padding: 0 10px; height: 48px; } .offcanvasSpot .grow-1 .dropdown-menu { width: 100%; transform: unset !important; min-width: unset; top: 52px !important; max-height: 130px; overflow-y: auto; } .offcanvasSpot .grow-1 .dropdown-menu .t14 { text-align: left; display: block; padding: 4px 16px; width: 100%; } .offcanvasSpot .grow-1 .dropdown-menu .t14:hover { background-color: var(--primary); color: var(--base10); } .subCategory {display:none; width:100%} /* 여행코스 더보기 */ #offcanvasCourse { left: 360px; width: 360px; z-index: 1; } #offcanvasCourse .relative .absolute { top: 10px; left: 10px; background: rgba(0, 0, 0, 0.30); max-width: 30px; min-width: 30px; height: 30px; } #offcanvasCourse .row-24 { padding: 24px 20px 20px; } #offcanvasCourse .row-8 { background: #F0F5F9; overflow-y: auto; padding: 20px 10px; } #offcanvasCourse .row-8 .column-10::before { content: ''; display: block; width: 2px; height: calc(100% + 8px); background: url('../img/line.png')no-repeat top left; position: absolute; top: 36px; left: 12px; } #offcanvasCourse .row-8 .column-10:last-of-type::before { display: none; } #offcanvasCourse .row-8 .column-10 .t13.flex-center { margin-top: 12px; background: #D8E1EA; height: 24px; min-width: 24px; } #offcanvasCourse .row-8 .column-10 .center-between { padding: 10px 12px; border-bottom: 1px solid #E1E4EB; } #offcanvasCourse .row-8 .column-10 .column-6 { padding: 10px 12px; } #offcanvasCourse .row-8 .column-10 .overflow-hidden { max-width: 56px; min-width: 56px; height: 56px; } #offcanvasCourse .mt-auto { padding: 16px 20px; } .opening-hour, .price { border-radius: 6px; padding: 10px; border: 1px solid var(--base8) !important; } .opening-hour span, .price span { margin-bottom:5px; } .cover-image-wrapper { position: relative; height: 240px; overflow: hidden; } .cover-image { width: 100%; height: 100%; object-fit: cover; display: block; } .back-btn { position: absolute; top: 16px; left: 16px; z-index: 2; background: white; padding: 4px; } /************************************************************** *************************************************************** ***************************** 09 ****************************** *************************************************************** **************************************************************/ .error_404 { color: var(--primary); font-size: 200px; font-weight: 800; line-height: 1; } @media (max-width: 991px) { .error_404 { font-size: 55px; } } @media (min-width: 768px) { #empty .btn { display: none !important; } } /************************************************************** *************************************************************** *************************** MODAL ***************************** *************************************************************** **************************************************************/ /* 로그인 모달*/ #loginModal .flag img {width: 24px; height: 24px} #certifyModal .flag img {width: 24px; height: 24px} /* 국가선택 */ #nationalModal .modal-content { max-height: calc(100vh - 40px); } /*#nationalModal .modal-body .row-24 { overflow-y: auto; }*/ #nationalModal .modal-body { overflow-y:auto; display: flex;flex-direction: column;row-gap: 15px} #nationalModal .modal-body .national_img {width: 16px; height: 16px} #nationalModal .modal-body .country {display: flex;align-items: center;justify-content: flex-start;border-bottom: solid 1px var(--black-200);gap: 5px;} /* 상품리뷰작성 */ #reviewModal .rounded-sm { min-width: 60px; max-width: 60px; height: 60px; } #reviewModal .text-center { padding: 32px 0; border-top: 1px solid var(--base8); border-bottom: 1px solid var(--base8); } #reviewModal .text-center .column-8 { flex-direction: row-reverse; } #reviewModal .text-center .column-8 label { transition: .15s; width: 32px; height: 32px; background: url('../img/ic_rating_off_32.svg')no-repeat center; background-size: contain; } #reviewModal .text-center .column-8 input:checked ~ label { background: url('../img/ic_rating_on_32.svg')no-repeat center; background-size: contain; } #reviewModal textarea { height: 140px; padding: 12px 14px; border-radius: 4px; border: 1px solid var(--Colors-Grey-Color-Light-Base8, #E0E0E0); background: var(--Colors-Bg-Color-Light-Main_bg, #FFF); } #reviewModal .text-base4 { height: 52px; } /* 기사리뷰작성 */ #driverModal .rounded-sm { min-width: 60px; max-width: 60px; height: 60px; } #driverModal .row-20 { padding: 32px 0; border-top: 1px solid var(--base8); border-bottom: 1px solid var(--base8); } #driverModal .row-20 .column-8 { flex-direction: row-reverse; } #driverModal .row-20 .column-8 label { transition: .15s; width: 32px; height: 32px; background: url('../img/ic_rating_off_32.svg')no-repeat center; background-size: contain; } #driverModal .row-20 .column-8 input:checked ~ label { background: url('../img/ic_rating_on_32.svg')no-repeat center; background-size: contain; } #driverModal .grid { gap: 8px; grid-template-columns: repeat(2,minmax(0,1fr)); } #driverModal .grid .t15 { cursor: pointer; transition: .15s; padding: 10px 20px; border-radius: 8px; border: 1px solid var(--base8); } #driverModal .grid input:checked + .t15 { color: var(--primary); border-color: var(--primary); font-weight: 500; background: rgba(214, 19, 76, 0.05); } #driverModal textarea { height: 140px; padding: 12px 14px; border-radius: 4px; border: 1px solid var(--Colors-Grey-Color-Light-Base8, #E0E0E0); background: var(--Colors-Bg-Color-Light-Main_bg, #FFF); } /* 개인정보수집이용약관 */ #privacyModal .modal-dialog { max-width: 560px; } #privacyModal .modal-content { padding: 40px 0; } #privacyModal .t28 { padding: 16px 24px; } #privacyModal .modal-body { padding: 0 24px; } /* 이용약관 */ #termsModal .modal-dialog { max-width: 560px; } #termsModal .modal-content { padding: 40px 0; } #termsModal .t28 { padding: 16px 24px; } #termsModal .modal-body { padding: 0 24px; } /* 확대보기 */ #moreViewModal .modal-dialog { max-width: 1208px; } #moreViewModal .modal-content { padding: 32px 24px; } /* 자유여행 필터 */ #filterModal .modal-dialog { max-width: 864px; } #filterModal .column-8 label { padding: 7px; color: #4E5056; font-size: 15px; line-height: 20px; border-radius: 6px; border: 1px solid #E6E7E9; transition: .15s; cursor: pointer; } #filterModal .column-8 input:checked + label { color: #FFF; font-weight: 700; border-color: var(--primary); background: var(--primary); } #filterModal .column-30 .column-4 { color: #1D1E20; font-weight: 500; align-items: center; cursor: pointer; } #filterModal .column-30 .column-4::before { content: ''; display: block; transition: .15s; width: 24px; height: 24px; background: url('../img/ic_check_24_fill_off.svg'); background-size: contain; } #filterModal .column-30 input:checked + label::before { background: url('../img/ic_check_24_fill_on.svg'); background-size: contain; } #filterModal .slider-container { text-align: center; width: 100%; position: relative; } #filterModal .slider-container::before { content: ''; display: block; left: 0; height: 6px; background-color: #ccc; width: 100%; position: absolute; left: 0; top: 9px; border-radius: 6px; } #filterModal .slider-container .slider-wrapper { position: relative; height: 50px; margin-right: 24px; } #filterModal .slider-container .range { position: absolute; margin-left: 12px; top: 9px; height: 6px; border-radius: 22px; background: var(--Primary-Normal, #D6134C); border-radius: 5px; z-index: 1; } #filterModal .slider-container .row-8 { position: absolute; top: 0; } #filterModal .slider-container .point { width: 24px; height: 24px; border: 1px solid var(--Border-2, #DCE1E5); background: var(--White, #FFF); box-shadow: 0px 3px 5px 0px rgba(38, 40, 43, 0.04); border-radius: 50%; cursor: pointer; z-index: 2; } #filterModal .slider-container input[type="range"] { display: none; } #filterModal .btn { width: 76px; margin-left: auto; } /* 예약취소 */ #cancelModal .row-4 { border-top: 1px solid var(--base4); border-bottom: 1px solid var(--base4); padding: 20px 16px; } /* 도시선택*/ #CityLgModal { box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.15); } #CityLgModal .modal-dialog { max-width: 912px;} #CityLgModal .modal-content { border-radius: 20px; padding: 0; overflow: hidden; } #CityLgModal .modal-header { display: none; } #CityLgModal .tab-wrap { max-height: 408px; text-align: left; display: flex; flex-grow: 1; overflow: hidden; } #CityLgModal .tab-btns { display: flex; flex-direction: column; background-color: var(--base9); padding: 8px 0; width: 160px; overflow-y: auto; } #CityLgModal .tab-btns .tab-btn { font-size: 16px; line-height: 24px; padding: 16px 28px; } #CityLgModal .tab-btns .tab-btn.active { background-color: var(--base10); color: var(--primary); font-weight: 500; } #CityLgModal .tab-contents { width: 100%; padding: 26px 28px; overflow-y: auto; } #CityLgModal .tab-contents { display: flex; flex-direction: column; row-gap: 32px; } #CityLgModal .tab-contents .box { display: flex; flex-direction: column; row-gap: 16px; } #CityLgModal .tab-contents .box .country { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--base0); } /*#CityLgModal .tab-contents .box .city { display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; gap: 12px 16px; }*/ /*#CityLgModal .tab-contents .box .city .name { display: flex; column-gap: 14px; align-items: center; font-size: 16px; line-height: 24px; font-weight: 500; }*/ /*#CityLgModal .tab-contents .box .city .name.active { color: var(--primary); }*/ /*#CityLgModal .tab-contents .box .city .name .flag { border-radius: 50%; overflow: hidden; width: 40px; height: 40px; }*/ /*#CityLgModal .tab-contents .box .city .name .flag img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }*/ #CityLgModal .tab-contents .box .city { display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; gap: 12px 16px; } #CityLgModal .tab-contents .box .city .name { display: flex; column-gap: 14px; align-items: center; font-size: 16px; line-height: 24px; font-weight: 500;flex: 0 0 calc(32% - 10px); /* 한 줄에 3개 */} #CityLgModal .tab-contents .box .city .name.active { color: var(--primary); } #CityLgModal .tab-contents .box .city .name .flag { border-radius: 50%; overflow: hidden; width: 40px; min-width: 40px;height: 40px} #CityLgModal .tab-contents .box .city .name .flag img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; } #CityLgModal .tab-contents .box .city .name .cityName { width: 50% } #CityLgModal .tab-contents .box .city .name.active .cityName { color: var(--primary); } #CityLgModal .tab-contents .name:hover { color: var(--primary) !important;} #CityLgModal .tab-contents .tabInner:not(#tab0) { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px; } #CityLgModal .tab-contents .tabInner:not(#tab0) .name { font-size: 14px; line-height: 20px; border-radius: 50px; padding: 5px 15px; background: var(--base9); border: 1px solid var(--base9); backdrop-filter: blur(5px); } #CityLgModal .tab-contents .tabInner:not(#tab0) .name.active { border-color: var(--primary); color: var(--primary); background: rgba(214, 19, 76, 0.10); } #CityLgModal .tab-btns::-webkit-scrollbar, #CityLgModal .tab-contents::-webkit-scrollbar { width: 4px; } #CityLgModal .tab-btns::-webkit-scrollbar-track, #CityLgModal .tab-contents::-webkit-scrollbar-track { background: var(--base8); } #CityLgModal .tab-btns::-webkit-scrollbar-thumb, #CityLgModal .tab-contents::-webkit-scrollbar-thumb { background: var(--base7); border-radius: 4px; } #CityLgModal .tab-btns::-webkit-scrollbar-corner, #CityLgModal .tab-contents::-webkit-scrollbar-corner { background: #f0f0f0; } @media (max-width: 767px) { /* 개인정보수집이용약관 */ #privacyModal .t28 { font-size: 24px; line-height: 32px; padding: 0 24px; } #privacyModal .t15 { font-size: 14px; line-height: 20px; } #privacyModal .t14 { font-size: 13px; line-height: 18px; } #privacyModal .row-32 { padding: 0 20px; } /* 이용약관 */ #termsModal .t28 { font-size: 24px; line-height: 32px; padding: 0 24px; } #termsModal .t15 { font-size: 14px; line-height: 20px; } #termsModal .t14 { font-size: 13px; line-height: 18px; } #termsModal .row-32 { padding: 0 20px; } /* 확대보기 */ #moreViewModal .modal-content { padding: 40px 20px 20px; row-gap: 16px; } #moreViewModal .modal-content .t28 { font-size: 24px; line-height: 32px; } } /************************************************************** *************************************************************** ************************ OFFCANVAS **************************** *************************************************************** **************************************************************/ /* 모바일 햄버거 */ #offcanvasMenu { border: 0; min-width: unset !important; width: 280px; } #offcanvasMenu > .row-32 { overflow-y: auto; padding-bottom: 40px; } #offcanvasMenu .offcanvas-header { padding: 12px 20px; } #offcanvasMenu .row-8 { padding: 16px; } #offcanvasMenu .column-8 { padding: 14px 12px 14px 16px; } #offcanvasMenu .bg-base8 { min-height: 1px; } #offcanvasMenu .row-2 { min-width: 52px; } /* 도시선택(전세계 포함) - 메인 section1 */ #offcanvasCityLg { width: 100%; top: 78px; transition:unset; transform: unset; position: absolute; height: unset; bottom: unset; overflow: hidden; box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.15); border-radius: 20px; } #offcanvasCityLg .offcanvas-wrap { display: flex; flex-direction: column; } #offcanvasCityLg .offcanvas-header { display: none; } #offcanvasCityLg .tab-wrap { max-height: 408px; text-align: left; display: flex; flex-grow: 1; overflow: hidden; } #offcanvasCityLg .tab-btns { display: flex; flex-direction: column; background-color: var(--base9); width: 160px; overflow-y: auto; } #offcanvasCityLg .tab-btns .tab-btn { font-size: 16px; line-height: 24px; padding: 16px 28px; } #offcanvasCityLg .tab-btns .tab-btn.active { background-color: var(--base10); color: var(--primary); font-weight: 500; } #offcanvasCityLg .tab-contents { width: 100%; padding: 26px 28px; overflow-y: auto; } #offcanvasCityLg .tab-contents { display: flex; flex-direction: column; row-gap: 32px; } #offcanvasCityLg .tab-contents .box { display: flex; flex-direction: column; row-gap: 10px; margin-bottom:25px } #offcanvasCityLg .tab-contents .box .country { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--base0); } #offcanvasCityLg .tab-contents .box .city { display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; gap: 12px 16px; } #offcanvasCityLg .tab-contents .box .city .name { display: flex; column-gap: 14px; align-items: center; font-size: 16px; line-height: 24px; font-weight: 500;flex: 0 0 calc(32% - 10px); /* 한 줄에 3개 */} #offcanvasCityLg .tab-contents .box .city .name.active { color: var(--primary); } #offcanvasCityLg .tab-contents .box .city .name .flag { border-radius: 50%; overflow: hidden; width: 40px; height: 40px } #offcanvasCityLg .tab-contents .box .city .name .flag img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; } #offcanvasCityLg .tab-contents .box .city .name .cityName { width: 50% } #offcanvasCityLg .tab-contents .box .city .name.active .cityName { color: var(--primary); } #offcanvasCityLg .tab-contents .tabInner:not(#tab0) { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px; } #offcanvasCityLg .tab-contents .tabInner:not(#tab0) .name { font-size: 14px; line-height: 20px; border-radius: 50px; padding: 5px 15px; background: var(--base9); border: 1px solid var(--base9); backdrop-filter: blur(5px); } #offcanvasCityLg .tab-contents .tabInner:not(#tab0) .name.active { border-color: var(--primary); color: var(--primary); background: rgba(214, 19, 76, 0.10); } #offcanvasCityLg .tab-btns::-webkit-scrollbar, #offcanvasCityLg .tab-contents::-webkit-scrollbar { width: 4px; } #offcanvasCityLg .tab-btns::-webkit-scrollbar-track, #offcanvasCityLg .tab-contents::-webkit-scrollbar-track { background: var(--base8); } #offcanvasCityLg .tab-btns::-webkit-scrollbar-thumb, #offcanvasCityLg .tab-contents::-webkit-scrollbar-thumb { background: var(--base7); border-radius: 4px; } #offcanvasCityLg .tab-btns::-webkit-scrollbar-corner, #offcanvasCityLg .tab-contents::-webkit-scrollbar-corner { background: #f0f0f0; } /* 도시선택(전세계 미포함) */ #offcanvasCitySm { transition:unset; transform: unset; position: absolute; height: unset; bottom: unset; overflow: hidden; box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.15); border-radius: 20px; max-width: unset; width: 480px; } #offcanvasCitySm .offcanvas-wrap { display: flex; flex-direction: column; } #offcanvasCitySm .offcanvas-header { display: none; } #offcanvasCitySm .tab-wrap { display: flex; width:100%; max-width: 480px; max-height: 456px; } #offcanvasCitySm .tab-btns { display: flex; flex-direction: column; background-color: var(--base9); padding: 8px 0; width: 160px; overflow-y: auto; } #offcanvasCitySm .tab-btns .tab-btn { font-size: 16px; line-height: 24px; padding: 16px 28px; } #offcanvasCitySm .tab-btns .tab-btn.active { background-color: var(--base10); color: var(--primary); font-weight: 500; } #offcanvasCitySm .tab-contents { width: 100%; padding: 26px 28px; overflow-y: auto; } #offcanvasCitySm .tab-contents .tabInner { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; } #offcanvasCitySm .tab-contents .tabInner .name { font-size: 14px; line-height: 20px; text-align: left; } #offcanvasCitySm .tab-contents .tabInner .name.active { color: var(--primary); } #offcanvasCitySm .tab-btns::-webkit-scrollbar, #offcanvasCitySm .tab-contents::-webkit-scrollbar { width: 4px; } #offcanvasCitySm .tab-btns::-webkit-scrollbar-track, #offcanvasCitySm .tab-contents::-webkit-scrollbar-track { background: var(--base8); } #offcanvasCitySm .tab-btns::-webkit-scrollbar-thumb, #offcanvasCitySm .tab-contents::-webkit-scrollbar-thumb { background: var(--base7); border-radius: 4px; } #offcanvasCitySm .tab-btns::-webkit-scrollbar-corner, #offcanvasCitySm .tab-contents::-webkit-scrollbar-corner { background: #f0f0f0; } /* 이용날짜 / 기간선택 */ #offcanvasCalendar { transition:unset; transform: unset; position: absolute; height: unset; bottom: unset; overflow: hidden; box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.15); border-radius: 20px; max-width: unset; width: 590px; padding: 20px; left:-600px;} #offcanvasCalendar .offcanvas-wrap { display: flex; flex-direction: column; row-gap: 16px; } #offcanvasCalendar .offcanvas-header { display: none; } #offcanvasCalendar .offcanvas-header .txt1 { margin-bottom: 12px; } #offcanvasCalendar #prev-month { position: absolute; cursor: pointer; top: 20px; left: 20px; } #offcanvasCalendar #next-month { position: absolute; cursor: pointer; top: 20px; right: 20px; } #offcanvasCalendar .selectedBox { display: flex; align-items: center; justify-content: space-between; } #offcanvasCalendar .selectedBox .dateWrap { display: flex; align-items: center; column-gap: 12px; width: 260px; } #offcanvasCalendar .selectedBox .dateIn { width: 100%; color: var(--base2); display: flex; flex-direction: column; font-size: 12px; line-height: 16px; } #offcanvasCalendar .selectedBox #endDate, #offcanvasCalendar .selectedBox #startDate { min-height: 22px; font-size: 15px; line-height: 22px; color: var(--base0); } #offcanvasCalendar .selectedBox .line { height: 32px; min-width: 1px; background-color: var(--base8); } #offcanvasCalendar .calendar-wrap { display: flex; column-gap: 32px; } #offcanvasCalendar .calendar { display: flex; flex-direction: column; row-gap: 16px; } #offcanvasCalendar .calendar .inner { display: flex; flex-direction: column; row-gap: 20px; } #offcanvasCalendar .calendar .calendar-header { font-size: 16px; line-height: 24px; font-weight: 700; text-align: center; } #offcanvasCalendar .calendar .week { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); } #offcanvasCalendar .calendar .week .day { color: #7E8084; text-align: center; font-size: 14px; font-weight: 500; line-height: 20px; } #offcanvasCalendar .calendar .days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); column-gap: 8px; row-gap: 10px; } #offcanvasCalendar .calendar .days .day { display: flex; align-items: center; justify-content: center; } #offcanvasCalendar .calendar .day span { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; cursor: pointer; font-size: 15px; font-weight: 700; } #offcanvasCalendar .calendar .days .day:not(.before) span { border-radius: 4px; background-color: var(--base9); } #offcanvasCalendar .calendar .before { pointer-events:none; } #offcanvasCalendar .calendar .before span { color: var(--base6); } #offcanvasCalendar .calendar .start-date span { background-color: var(--primary) !important; color:var(--base10); } #offcanvasCalendar .calendar .end-date span { background-color: var(--primary) !important; color:var(--base10); } #offcanvasCalendar .calendar .range span { color: var(--primary); background: #FED5DD !important; } /* 탑승인원선택 */ #offcanvasPersonnel { transition:unset; transform: unset; position: absolute; height: unset; bottom: unset; overflow: hidden; box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.15); border-radius: 20px; min-width: 340px; /*max-width: unset;*/ max-height: unset; left:-350px; top: -20px} #offcanvasPersonnel .offcanvas-wrap { display: flex; flex-direction: column; row-gap: 20px; padding: 20px; } #offcanvasPersonnel .offcanvas-header { display: none; } #offcanvasPersonnel .board { display: flex; flex-direction: column; row-gap: 12px; width: 100%; } #offcanvasPersonnel .board .item-wrap { display: flex; align-items: center; justify-content: space-between; } #offcanvasPersonnel .board .item-wrap .item { display: flex; align-items: flex-end; column-gap: 6px; font-size: 18px; line-height: 26px; font-weight: 700; } #offcanvasPersonnel .board .item-wrap .item .tip { font-size: 14px; line-height: 20px; color: var(--base5); font-weight: 500; } #offcanvasPersonnel .board .item-wrap .pick { display: flex; align-items: center; column-gap: 12px; width: 104px; } #offcanvasPersonnel .board .item-wrap .pick input { font-size: 18px; line-height: 26px; font-weight: 700; text-align: center; } #offcanvasPersonnel .board .item { display: flex; align-items: flex-end; column-gap: 6px; font-size: 18px; line-height: 26px; font-weight: 700; } #offcanvasPersonnel .offcanvas-button { height: 40px; max-width: 76px; margin-left: auto; } #offcanvasPersonnel .vehicle-option { display: flex;justify-content: space-between;align-items: center;background: #fff;padding: 12px;margin-bottom: 10px;border-radius: 6px;border: 1px solid #ddd; } #offcanvasPersonnel .vehicle-info { display: flex;flex-direction: column; } #offcanvasPersonnel .vehicle-name {font-weight: bold;color: #333;} #offcanvasPersonnel .vehicle-capacity {font-size: 13px;color: #666;} #offcanvasPersonnel .vehicle-usage {text-align: right;} #offcanvasPersonnel .vehicle-count {display: block;font-size: 14px;font-weight: bold;color: var(--primary);} #offcanvasPersonnel .vehicle-price {font-size: 13px;color: #444;} #offcanvasPersonnel input[type="radio"]:checked + label.vehicle-option { background-color: var(--primary-disabled); border-color: var(--primary); } /* 차량 선택 */ #offcanvasCarType .vehicle-option { display: flex;justify-content: space-between;align-items: center;background: #fff;padding: 12px;margin-bottom: 10px;border-radius: 6px;border: 1px solid #ddd; } #offcanvasCarType .vehicle-info { display: flex;flex-direction: column; } #offcanvasCarType .vehicle-name {font-weight: bold;color: #333;} #offcanvasCarType .vehicle-capacity {font-size: 13px;color: #666;} #offcanvasCarType .vehicle-usage {text-align: right;} #offcanvasCarType .vehicle-count {display: block;font-size: 14px;font-weight: bold;color: var(--primary);} #offcanvasCarType .vehicle-price {font-size: 13px;color: #444;} #offcanvasCarType input[type="radio"]:checked + label.vehicle-option { background-color: var(--primary-disabled); border-color: var(--primary); } /* 차량 아이템 선택 */ .car-item-wrap { display: flex; align-items: center; justify-content: space-between; } .car-item-wrap .item { display: flex; align-items: flex-end; column-gap: 6px; line-height: 26px; min-width:90px} .car-item-wrap .item .tip { font-size: 14px; line-height: 20px; color: var(--base5); font-weight: 500; } .car-item-wrap .pick { display: flex; align-items: center; column-gap: 12px; width: 104px; } .car-item-wrap .pick input { font-size: 18px; line-height: 26px; font-weight: 700; text-align: center; } /* 탑승위치 */ #offcanvasMap { transition:unset; transform: unset; position: absolute; height: unset; bottom: unset; overflow: hidden; box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.15); border-radius: 20px; max-width: unset; width: 400px; padding: 20px; } #offcanvasMap .offcanvas-wrap { display: flex; flex-direction: column; row-gap: 24px; } #offcanvasMap .offcanvas-header { display: flex; align-items: center; justify-content: space-between; } #offcanvasMap .search { display: flex; column-gap: 8px; } #offcanvasMap .input-box { display: flex; align-items: center; justify-content: space-between; border-radius: 6px; border: 1px solid var(--base8); width: 100%; padding: 0 12px; } #offcanvasMap .input-box input { border: 0; width: 100%; } #offcanvasMap .offcanvas-button { border-radius: 6px; background: var(--base0); } #offcanvasMap .map { height: 400px; } /*!* 하차위치 *!*/ /*#offcanvasMapOff { transition:unset; transform: unset; position: absolute; height: unset; bottom: unset; overflow: hidden; box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.15); border-radius: 20px; max-width: unset; width: 400px; padding: 20px; } */ /*#offcanvasMapOff .offcanvas-wrap { display: flex; flex-direction: column; row-gap: 20px; } */ /*#offcanvasMapOff .offcanvas-header { display: flex; align-items: center; justify-content: space-between; } */ /*#offcanvasMapOff .search { display: flex; column-gap: 8px; } */ /*#offcanvasMapOff .input-box { display: flex; align-items: center; justify-content: space-between; border-radius: 6px; border: 1px solid var(--base8); width: 100%; padding: 0 12px; } */ /*#offcanvasMapOff .input-box input { border: 0; width: 100%; } */ /*#offcanvasMapOff .offcanvas-button { border-radius: 6px; background: var(--base0); } */ /*#offcanvasMapOff .map { height: 400px; } */ /* 반려동물 선택 */ .offcanvasDriverItem { transition:unset; transform: unset; position: absolute; height: unset; bottom: unset; overflow: hidden; box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.15); border-radius: 20px; min-width: 340px; /*max-width: unset;*/ max-height: unset; left:-350px; top: -20px} .offcanvasDriverItem .offcanvas-wrap { display: flex; flex-direction: column; row-gap: 20px; padding: 20px; } .offcanvasDriverItem .offcanvas-header { display: none; } .offcanvasDriverItem .board { display: flex; flex-direction: column; row-gap: 12px; width: 100%; } .offcanvasDriverItem .board .item-wrap { display: flex; align-items: center; justify-content: space-between; } .offcanvasDriverItem .board .item-wrap .item { font-size: 18px; line-height: 26px; font-weight: 700; } .offcanvasDriverItem .board .item-wrap .pick { display: flex; align-items: center; column-gap: 12px; width: 104px; } .offcanvasDriverItem .board .item-wrap .pick input { font-size: 18px; line-height: 26px; font-weight: 700; text-align: center; } .offcanvasDriverItem .board .item-desc { display: flex; flex-direction: column; row-gap: 12px; align-items: center; justify-content: start; } .offcanvasDriverItem .offcanvas-button { height: 40px; max-width: 76px; margin-left: auto; } /* 반려동물 선택 */ #offcanvasPets { transition:unset; transform: unset; position: absolute; height: unset; bottom: unset; overflow: hidden; box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.15); border-radius: 20px; min-width: 340px; max-width: unset; max-height: unset; } #offcanvasPets .offcanvas-wrap { display: flex; flex-direction: column; row-gap: 20px; padding: 20px; } #offcanvasPets .offcanvas-header { display: none; } #offcanvasPets .board { display: flex; flex-direction: column; row-gap: 12px; width: 100%; } #offcanvasPets .board .item-wrap { display: flex; align-items: center; justify-content: space-between; } #offcanvasPets .board .item-wrap .item { font-size: 18px; line-height: 26px; font-weight: 700; } #offcanvasPets .board .item-wrap .pick { display: flex; align-items: center; column-gap: 12px; width: 104px; } #offcanvasPets .board .item-wrap .pick input { font-size: 18px; line-height: 26px; font-weight: 700; text-align: center; } #offcanvasPets .offcanvas-button { height: 40px; max-width: 76px; margin-left: auto; } /* 카시트 선택 */ #offcanvasCarSheet { transition:unset; transform: unset; position: absolute; height: unset; bottom: unset; overflow: hidden; box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.15); border-radius: 20px; min-width: 340px; max-width: unset; max-height: unset; } #offcanvasCarSheet .offcanvas-wrap { display: flex; flex-direction: column; row-gap: 20px; padding: 20px; } #offcanvasCarSheet .offcanvas-header { display: none; } #offcanvasCarSheet .item-wrap { display: flex; align-items: center; justify-content: space-between; } #offcanvasCarSheet .item-wrap .item { font-size: 18px; line-height: 26px; font-weight: 700; } #offcanvasCarSheet .item-wrap .pick { display: flex; align-items: center; column-gap: 12px; width: 104px; } #offcanvasCarSheet .item-wrap .pick input { font-size: 18px; line-height: 26px; font-weight: 700; text-align: center; } #offcanvasCarSheet .offcanvas-button { height: 40px; max-width: 76px; margin-left: auto; } @media (max-width: 767px) { /* 도시선택(전세계 포함) - 메인 */ #offcanvasCityLg { transition: transform .3s ease-in-out; position: fixed; width: 100%; bottom: 0; top: 0 !important; transform: translateX(-100%); border-radius: 0; } #offcanvasCityLg .offcanvas-wrap { height: 100%; } #offcanvasCityLg .offcanvas-header { display: block; } #offcanvasCityLg .offcanvas-header .txt1 { text-align: left; display: block; padding: 16px 20px; } #offcanvasCityLg .offcanvas-x { display: flex; align-items: center; justify-content: center; height: 44px; margin-left: auto; margin-right: 20px; } #offcanvasCityLg .tab-wrap { max-height: unset; } #offcanvasCityLg .tab-btns { min-width: 120px; } #offcanvasCityLg .tab-btns .tab-btn { font-size: 14px; line-height: 20px; padding: 16px 20px; } #offcanvasCityLg .tab-contents { padding: 24px 20px; } #offcanvasCityLg .tab-contents #tab0 { row-gap: 24px; } #offcanvasCityLg .tab-contents #tab0 .box { row-gap: 8px; } #offcanvasCityLg .tab-contents #tab0 .box .city { gap: 12px; } #offcanvasCityLg .tab-contents #tab0 .box .city .name { font-size: 14px; line-height: 20px; column-gap: 8px; } #offcanvasCityLg .tab-contents #tab0 .box .city .name .flag { width: 32px; height: 32px; } #offcanvasCityLg .tab-contents .tabInner:not(#tab0) { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } #offcanvasCityLg .tab-contents .tabInner:not(#tab0) .name { padding: 0; border: 0; background-color: unset; backdrop-filter: unset; text-align: left; } /* 도시선택(전세계 미포함) */ #offcanvasCitySm { transition: transform .3s ease-in-out; position: fixed; width: 100%; bottom: 0; top: 0 !important; transform: translateX(-100%); border-radius: 0; } #offcanvasCitySm .offcanvas-wrap { height: 100%; } #offcanvasCitySm .offcanvas-header { display: block; } #offcanvasCitySm .offcanvas-header .txt1 { text-align: left; display: block; padding: 16px 20px; } #offcanvasCitySm .offcanvas-x { display: flex; align-items: center; justify-content: center; height: 44px; width: 44px; margin-left: auto; } #offcanvasCitySm .tab-wrap { max-width: unset; flex-grow: 1; max-height: unset; } #offcanvasCitySm .tab-btns { min-width: 120px; } #offcanvasCitySm .tab-btns .tab-btn { font-size: 14px; line-height: 20px; padding: 16px 20px; } #offcanvasCitySm .tab-contents { padding: 24px 20px; } #offcanvasCitySm .tab-contents .tabInner { grid-template-columns: repeat(2,minmax(0,1fr)); } /* 이용날짜 / 기간선택 */ #offcanvasCalendar { transition: transform .3s ease-in-out; position: fixed; width: 100%; left:unset; right:0 !important;bottom: 0; top: 0 !important; transform: translateX(-100%); border-radius: 0; padding: 0; } #offcanvasCalendar .offcanvas-wrap { height: 100%; } #offcanvasCalendar .offcanvas-header { display: block; padding: 0 20px; } #offcanvasCalendar .offcanvas-x { display: flex; align-items: center; justify-content: center; height: 44px; margin-left: auto; } #offcanvasCalendar .calendar-wrap { padding: 12px 20px; flex-direction: column; overflow-y: auto; row-gap: 24px; } #offcanvasCalendar #prev-month { display: none; } #offcanvasCalendar #next-month { display: none; } #offcanvasCalendar .selectedBox .dateWrap { width: 100%; } #offcanvasCalendar .selectedBox { flex-direction: column; row-gap: 18px; border-radius: 16px 16px 0 0; padding: 20px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10); margin-top: auto; } #offcanvasCalendar .offcanvas-button { width: 100%; } /* 탑승인원선택 */ #offcanvasPersonnel { width: 100%; position: fixed; bottom: 0; transition: transform .3s ease-in-out; top: unset !important; left: unset !important; max-width: 100%; border-radius: 16px 16px 0 0; height: unset; transform: translateY(100%); visibility: hidden; } #offcanvasPersonnel .offcanvas-wrap { padding-top: 40px; row-gap: 16px; position: relative; } #offcanvasPersonnel .offcanvas-header { display: block; } #offcanvasPersonnel .offcanvas-x { position: absolute; right: 8px; top: 8px; display: block; } #offcanvasPersonnel .offcanvas-button { max-width: unset; margin-top: 16px; margin-left: unset; } /* 탑승위치 */ #offcanvasMap { transition: transform .3s ease-in-out; position: fixed; width: 100%; height: 100vh;bottom: 0; top: 0 !important; left:0 !important; transform: translateX(-100%); border-radius: 0; padding: 0; } #offcanvasMap .offcanvas-wrap { row-gap: 16px; } #offcanvasMap .offcanvas-header { flex-direction: column-reverse; align-items: flex-start; padding: 0 20px; } #offcanvasMap .offcanvas-x { display: flex; align-items: center; justify-content: center; height: 44px; margin-left: auto; } #offcanvasMap .search { padding: 0 20px; } #offcanvasMap .map { height: calc(100vh - 156px); } /* 하차위치 */ /*#offcanvasMapOff { transition: transform .3s ease-in-out; position: fixed; width: 100%; bottom: 0; top: 0 !important; transform: translateX(-100%); border-radius: 0; padding: 0; } */ /*#offcanvasMapOff .offcanvas-wrap { row-gap: 16px; } */ /*#offcanvasMapOff .offcanvas-header { flex-direction: column-reverse; align-items: flex-start; padding: 0 20px; } */ /*#offcanvasMapOff .offcanvas-x { display: flex; align-items: center; justify-content: center; height: 44px; margin-left: auto; } */ /*#offcanvasMapOff .search { padding: 0 20px; } */ /*#offcanvasMapOff .map { height: calc(100vh - 156px); } */ /* 아이템 선택 */ .offcanvasDriverItem { width: 100%; position: fixed; bottom: 0; transition: transform .3s ease-in-out; top: unset !important; max-width: 100%; border-radius: 16px 16px 0 0; height: unset; transform: translateY(100%); visibility: hidden; } .offcanvasDriverItem .offcanvas-wrap { padding-top: 40px; row-gap: 16px; position: relative; } .offcanvasDriverItem .offcanvas-header { display: block; } .offcanvasDriverItem .offcanvas-x { position: absolute; right: 8px; top: 8px; display: block; } .offcanvasDriverItem .offcanvas-button { max-width: unset; margin-top: 16px; margin-left: unset; } /* 반려동물 선택 */ #offcanvasPets { width: 100%; position: fixed; bottom: 0; transition: transform .3s ease-in-out; top: unset !important; max-width: 100%; border-radius: 16px 16px 0 0; height: unset; transform: translateY(100%); visibility: hidden; } #offcanvasPets .offcanvas-wrap { padding-top: 40px; row-gap: 16px; position: relative; } #offcanvasPets .offcanvas-header { display: block; } #offcanvasPets .offcanvas-x { position: absolute; right: 8px; top: 8px; display: block; } #offcanvasPets .offcanvas-button { max-width: unset; margin-top: 16px; margin-left: unset; } /* 반려동물 선택 */ #offcanvasPets { transition:unset; transform: unset; position: absolute; height: unset; bottom: unset; overflow: hidden; box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.15); border-radius: 20px; min-width: 340px; max-width: unset; max-height: unset; } #offcanvasPets .offcanvas-wrap { display: flex; flex-direction: column; row-gap: 20px; padding: 20px; } #offcanvasPets .offcanvas-header { display: none; } #offcanvasPets .board { display: flex; flex-direction: column; row-gap: 12px; width: 100%; } #offcanvasPets .board .item-wrap { display: flex; align-items: center; justify-content: space-between; } #offcanvasPets .board .item-wrap .item { font-size: 18px; line-height: 26px; font-weight: 700; } #offcanvasPets .board .item-wrap .pick { display: flex; align-items: center; column-gap: 12px; width: 104px; } #offcanvasPets .board .item-wrap .pick input { font-size: 18px; line-height: 26px; font-weight: 700; text-align: center; } #offcanvasPets .offcanvas-button { height: 40px; max-width: 76px; margin-left: auto; } /* 카시트 선택 */ #offcanvasCarSheet { width: 100%; position: fixed; bottom: 0; transition: transform .3s ease-in-out; top: unset !important; max-width: 100%; border-radius: 16px 16px 0 0; height: unset; transform: translateY(100%); visibility: hidden; } #offcanvasCarSheet .offcanvas-wrap { padding-top: 40px; row-gap: 16px; position: relative; } #offcanvasCarSheet .offcanvas-header { display: block; } #offcanvasCarSheet .offcanvas-x { position: absolute; right: 8px; top: 8px; display: block; } #offcanvasCarSheet .offcanvas-button { max-width: unset; margin-top: 16px; margin-left: unset; } } .spinner-container { align-items: center; background: rgba(0, 0, 0, 0.4); display: flex; justify-content: center; position: fixed; /* 바뀐 부분 */ top: 0; left: 0; width: 100%; height: 100%; text-align: center; z-index: 1090; } .spinner { border: 6px solid #f3f3f3; border-top: 6px solid var(--primary); border-radius: 50%; width: 60px; height: 60px; animation: spin 2s linear infinite; margin: 0 auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 차량타입 선택 */ #offcanvasCarType { transition:unset; transform: unset; position: absolute; height: unset; bottom: unset; overflow: hidden; box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.15); border-radius: 20px; min-width: 340px; max-width: unset; max-height: unset; } #offcanvasCarType .offcanvas-wrap { display: flex; flex-direction: column; row-gap: 20px; padding: 20px; } #offcanvasCarType .offcanvas-header { display: none; } #offcanvasCarType .board { display: flex; flex-direction: column; row-gap: 12px; width: 100%; } #offcanvasCarType .board .item-wrap { display: flex; align-items: center; justify-content: space-between; } #offcanvasCarType .board .item-wrap .item { font-size: 18px; line-height: 26px; font-weight: 700; } #offcanvasCarType .board .item-wrap .pick { display: flex; align-items: center; column-gap: 12px; width: 104px; } #offcanvasCarType .board .item-wrap .pick input { font-size: 18px; line-height: 26px; font-weight: 700; text-align: center; } #offcanvasCarType .offcanvas-button { height: 40px; max-width: 76px; margin-left: auto; } @media (max-width: 767px) { /* 도시선택(전세계 포함) - 메인 */ #offcanvasCityLg { transition: transform .3s ease-in-out; position: fixed; width: 100%; bottom: 0; top: 0 !important; transform: translateX(-100%); border-radius: 0; } #offcanvasCityLg .offcanvas-wrap { height: 100%; } #offcanvasCityLg .offcanvas-header { display: block; } #offcanvasCityLg .offcanvas-header .txt1 { text-align: left; display: block; padding: 16px 20px; } #offcanvasCityLg .offcanvas-x { display: flex; align-items: center; justify-content: center; height: 44px; margin-left: auto; margin-right: 20px; } #offcanvasCityLg .tab-wrap { max-height: unset; } #offcanvasCityLg .tab-btns { min-width: 120px; } #offcanvasCityLg .tab-btns .tab-btn { font-size: 14px; line-height: 20px; padding: 16px 20px; } #offcanvasCityLg .tab-contents { padding: 24px 20px; } #offcanvasCityLg .tab-contents { row-gap: 24px; } #offcanvasCityLg .tab-contents .box { row-gap: 8px; } #offcanvasCityLg .tab-contents .box .city { gap: 12px; } #offcanvasCityLg .tab-contents .box .city .name { font-size: 14px; line-height: 20px; column-gap: 8px; } #offcanvasCityLg .tab-contents .box .city .name .flag { width: 32px; height: 32px; } #offcanvasCityLg .tab-contents .tabInner:not(#tab0) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } #offcanvasCityLg .tab-contents .tabInner:not(#tab0) .name { padding: 0; border: 0; background-color: unset; backdrop-filter: unset; text-align: left; } /* 도시선택(전세계 미포함) */ #offcanvasCitySm { transition: transform .3s ease-in-out; position: fixed; width: 100%; bottom: 0; top: 0 !important; transform: translateX(-100%); border-radius: 0; } #offcanvasCitySm .offcanvas-wrap { height: 100%; } #offcanvasCitySm .offcanvas-header { display: block; } #offcanvasCitySm .offcanvas-header .txt1 { text-align: left; display: block; padding: 16px 20px; } #offcanvasCitySm .offcanvas-x { display: flex; align-items: center; justify-content: center; height: 44px; width: 44px; margin-left: auto; } #offcanvasCitySm .tab-wrap { max-width: unset; flex-grow: 1; max-height: unset; } #offcanvasCitySm .tab-btns { min-width: 120px; } #offcanvasCitySm .tab-btns .tab-btn { font-size: 14px; line-height: 20px; padding: 16px 20px; } #offcanvasCitySm .tab-contents { padding: 24px 20px; } #offcanvasCitySm .tab-contents .tabInner { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 이용날짜 / 기간선택 */ #offcanvasCalendar { transition: transform .3s ease-in-out; position: fixed; width: 100%; bottom: 0; top: 0 !important; transform: translateX(-100%); border-radius: 0; padding: 0; } #offcanvasCalendar .offcanvas-wrap { height: 100%; } #offcanvasCalendar .offcanvas-header { display: block; padding: 0 20px; } #offcanvasCalendar .offcanvas-x { display: flex; align-items: center; justify-content: center; height: 44px; margin-left: auto; } #offcanvasCalendar .calendar-wrap { padding: 12px 20px; flex-direction: column; overflow-y: auto; row-gap: 24px; } #offcanvasCalendar #prev-month { display: none; } #offcanvasCalendar #next-month { display: none; } #offcanvasCalendar .selectedBox .dateWrap { width: 100%; } #offcanvasCalendar .selectedBox { flex-direction: column; row-gap: 18px; border-radius: 16px 16px 0 0; padding: 20px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10); margin-top: auto; } #offcanvasCalendar .offcanvas-button { width: 100%; } /* 탑승인원선택 */ #offcanvasPersonnel { width: 100%; position: fixed; bottom: 0; transition: transform .3s ease-in-out; top: unset !important; max-width: 100%; border-radius: 16px 16px 0 0; height: unset; transform: translateY(100%); visibility: hidden; } #offcanvasPersonnel .offcanvas-wrap { padding-top: 40px; row-gap: 16px; position: relative; } #offcanvasPersonnel .offcanvas-header { display: block; } #offcanvasPersonnel .offcanvas-x { position: absolute; right: 8px; top: 8px; display: block; } #offcanvasPersonnel .offcanvas-button { max-width: unset; margin-top: 16px; margin-left: unset; } } .car-opt-wrap .convenience_wrap .car-item-wrap .price { } #btn-filter { transition: all 0.4s ease; white-space: nowrap; width:102px }