/* 폰트 */ @font-face { font-family: 'OneStoreMobileGothicTitleFont'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-Title.woff') format('woff'); font-weight: normal; font-display: swap; } .f1 { font-family: 'OneStoreMobileGothicTitleFont', sans-serif; } .img-wrap-pd { position: relative; border-radius: 8px; overflow: hidden; } .img-wrap-pd::before { content: ''; width: 100%; display: block; padding-top: 100%; } .img-wrap-pd img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } /* 해드 */ #header { position: fixed; top: 0; left: 0; width: 100%; z-index: 99; } #header .hd-le { height: 100%; flex-shrink: 0; padding: 0; margin: 0; } #header .logo { height: 100%; display: flex; justify-content: flex-start; align-items: center; padding: 0; margin: 0; } #header .logo img { height: 50%; max-width: 180px; object-fit: contain; display: block; margin: 0; padding: 0; } #header .header { max-width: 2560px; width: 100%; height: 90px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; background-color: #fff; box-sizing: border-box; } #header .header .hd-nav { margin-left: 48px; } #header .header .hd-ri { margin-left: auto; } #header .header .hd-nav { gap: 48px; display: flex; align-items: center; flex-wrap: nowrap; } #header .header .hd-nav a { font-weight: 600; font-size: 20px; position: relative; white-space: nowrap; word-break: keep-all; } #header .header .hd-nav a.active::before { width: 100%; height: 2.5px; background-color: #6A1B9A; position: absolute; top: calc(100% + 31px); content: ''; } #header .header .hd-nav .dropdown-item > a.active::before { top: auto; bottom: 4px; left: 12px; right: 12px; width: auto; } #header .header .hd-nav .submenu a.active::before { top: auto; bottom: 3px; left: 10px; right: 10px; width: auto; } #header .header .hd-nav .nav-item { position: relative; flex-shrink: 0; } #header .header .hd-nav .nav-item > a { font-weight: 600; font-size: 20px; display: block; white-space: nowrap; word-break: keep-all; } #header .header .hd-nav .nav-item .dropdown-menu { position: absolute; left: 0; top: 100%; margin-top: 20px; background-color: #fff; border: 1px solid #E0E0E0; border-radius: 8px; padding: 16px; min-width: 200px; opacity: 0; visibility: hidden; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } #header .header .hd-nav .nav-item:hover .dropdown-menu { opacity: 1; visibility: visible; margin-top: 10px; } #header .header .hd-nav .nav-item .dropdown-item { position: relative; margin-bottom: 8px; } #header .header .hd-nav .nav-item .dropdown-item:last-child { margin-bottom: 0; } #header .header .hd-nav .nav-item .dropdown-item > a { font-size: 16px; font-weight: 500; color: #000; padding: 8px 12px; display: block; border-radius: 4px; transition: background-color 0.2s; } #header .header .hd-nav .nav-item .dropdown-item > a:hover { background-color: #F5F5F5; } #header .header .hd-nav .nav-item .dropdown-item.has-submenu .submenu { position: absolute; left: 100%; top: 0; margin-left: 8px; background-color: #fff; border: 1px solid #E0E0E0; border-radius: 8px; padding: 16px; min-width: 180px; opacity: 0; visibility: hidden; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.1); display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } #header .header .hd-nav .nav-item .dropdown-item.has-submenu:hover .submenu { opacity: 1; visibility: visible; } #header .header .hd-nav .nav-item .dropdown-item.has-submenu .submenu a { font-size: 14px; font-weight: 400; color: #303030; padding: 6px 10px; display: block; border-radius: 4px; transition: all 0.2s; white-space: nowrap; } #header .header .hd-nav .nav-item .dropdown-item.has-submenu .submenu a:hover { background-color: #F3E5F5; color: #6A1B9A; } #header .header .hd-ri { display: flex; gap: 24px; align-items: center; } #header .header .hd-ri .MY-btn { font-weight: 400; } #header .header .hd-ri .language-select-wrap { position: relative; width: auto; } #header .header .hd-ri .language-select-wrap .language-select { width: 100%; height: 24px; padding: 0 12px; padding-right: 24px; border-radius: 4px; background-color: #00000014; background-image: none; font-size: 14px; font-weight: bold; color: #303030; cursor: pointer; } #header .header .hd-ri .language-select-wrap .language-select:focus { border-color: #ff8900; } #header .header .hd-ri .language-select-wrap i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #303030; pointer-events: none; } @media screen and (max-width: 1400px) { #header .header .hd-nav { gap: 24px; } #header .header .hd-nav a { font-size: 16px; } #header .header .hd-nav .nav-item > a { font-size: 16px; } #header .header .hd-nav a.active::before { display: none; } } /* 모바일 메뉴 버튼 */ .mobile-menu-btn { display: none; width: unset; height: unset; border: none; background: none; cursor: pointer; align-items: center; justify-content: center; } .mobile-menu-btn i { font-size: 24px; color: #303030; } /* 모바일 메뉴 로고 */ #header .header .hd-nav .mobile-nav-logo { display: none; } @media screen and (max-width: 1280px) { #header .header { height: 50px; background-color: #fff !important; position: relative; } #header .header .logo img { height: 25px; filter: none !important; } #header .header::before { content: ''; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 998; opacity: 0; visibility: hidden; transition: all 0.3s ease; pointer-events: none; } #header .header.mobile-menu-open::before { opacity: 1; visibility: visible; pointer-events: auto; } #header .header .hd-nav { display: none; position: fixed; right: -100%; top: 0; width: 300px; height: 100%; background-color: #fff; z-index: 999; flex-direction: column; align-items: flex-start; padding: 20px; transition: right 0.3s ease; box-shadow: -2px 0 8px rgba(0,0,0,0.1); gap: 0; overflow-y: auto; } #header .header.mobile-menu-open .hd-nav { display: flex; right: 0; } #header .header .hd-nav .mobile-nav-logo { display: flex; justify-content: space-between; align-items: center; width: 100%; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #F5F5F5; } #header .header .hd-nav .mobile-nav-logo img { height: 29px; width: auto; } #header .header .hd-nav .mobile-nav-close { background: none; border: none; font-size: 24px; color: #303030; cursor: pointer; padding: 0; line-height: 1; } #header .header .hd-nav > a, #header .header .hd-nav > .nav-item { width: 100%; border-bottom: 1px solid #F5F5F5; } #header .header .hd-nav > a { color: #303030 !important; padding: 16px 0; font-size: 16px; font-weight: 500; } #header .header .hd-nav .nav-item > a { color: #303030 !important; padding: 16px 0; display: flex; justify-content: space-between; align-items: center; font-size: 16px; font-weight: 500; } #header .header .hd-nav .nav-item > a .mobile-arrow { font-size: 14px; color: #999; transition: transform 0.3s ease; } #header .header .hd-nav .nav-item.expanded > a .mobile-arrow { transform: rotate(180deg); } #header .header .hd-nav .nav-item .dropdown-menu { position: static !important; margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; background: transparent !important; opacity: 1 !important; visibility: visible !important; display: none !important; overflow: hidden; } #header .header .hd-nav .nav-item.expanded .dropdown-menu { display: block !important; padding: 10px 0 10px 20px !important; } #header .header .hd-nav .dropdown-item { margin-bottom: 0; } #header .header .hd-nav .dropdown-item > a { padding: 12px 0; font-size: 14px; color: #666 !important; display: flex !important; justify-content: space-between; align-items: center; border-bottom: 1px solid #F5F5F5; } #header .header .hd-nav .dropdown-item:last-child > a { border-bottom: none; } #header .header .hd-nav .dropdown-item > a .mobile-arrow { font-size: 12px; color: #999; transition: transform 0.3s ease; } #header .header .hd-nav .dropdown-item.expanded > a .mobile-arrow { transform: rotate(180deg); } #header .header .hd-nav .dropdown-item.has-submenu .submenu { position: static !important; margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; display: none !important; flex-direction: column; gap: 0; overflow: hidden; } #header .header .hd-nav .dropdown-item.has-submenu.expanded .submenu { display: flex !important; padding: 8px 0 8px 15px !important; } #header .header .hd-nav .dropdown-item.has-submenu .submenu a { padding: 10px 0; font-size: 13px; color: #999 !important; border-bottom: 1px dashed #F0F0F0; } #header .header .hd-nav .dropdown-item.has-submenu .submenu a:last-child { border-bottom: none; } #header .header .hd-ri { gap: 8px; } #header .header .hd-ri .MY-btn { color: #303030 !important; } #header .header .hd-ri .language-select-wrap .language-select { background-color: #00000014 !important; color: #303030 !important; } #header .header .hd-ri .language-select-wrap i { color: #303030 !important; } .mobile-menu-btn { display: flex; } } #header .header .hd-nav .nav-item > a .mobile-arrow { display: none; } #header .header .hd-nav .dropdown-item > a .mobile-arrow { display: none; } @media screen and (max-width: 1280px) { #header .header .hd-nav .nav-item.has-dropdown > a .mobile-arrow { display: block; } #header .header .hd-nav .dropdown-item.has-submenu > a .mobile-arrow { display: block; } } /* 메인에서 해드 */ #header .header.transparent { background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); transition: background 0.3s ease; } #header .header.transparent .logo img { filter: brightness(0) invert(1); } #header .header.transparent .hd-nav a { color: #fff; } #header .header.transparent .hd-ri .MY-btn { color: #fff; } #header .header.transparent .hd-ri .language-select-wrap .language-select { background-color: #00000066; color: #fff; } #header .header.transparent .hd-ri .language-select-wrap i { color: #fff; } #header .header.main:not(.transparent) { background-color: #fff; transition: background 0.3s ease; } /* 모바일에서는 transparent 그라데이션 효과 끄기 (그림자처럼 보이는 문제 해결) */ @media screen and (max-width: 768px) { #header .header.transparent { background: #fff !important; background-image: none !important; } } /* 헤더 지역 검색 */ .hd-location-search { position: relative; } .hd-location-search-btn { background: transparent; border: none; cursor: pointer; padding: 6px; display: flex; align-items: center; justify-content: center; color: #303030; } .hd-location-search-btn i { font-size: 22px; } #header .header.transparent .hd-location-search-btn { color: #fff; } .hd-location-search-dropdown { position: absolute; top: calc(100% + 12px); right: 0; width: 320px; max-height: 420px; background: #fff; border: 1px solid #E0E0E0; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); z-index: 100; display: flex; flex-direction: column; overflow: hidden; } .hd-location-search-input { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid #f0f0f0; } .hd-location-search-input i { color: #999; font-size: 16px; } .hd-location-search-input input { flex: 1; border: none; outline: none; font-size: 14px; background: transparent; } .hd-location-search-list { overflow-y: auto; flex: 1; } .hd-location-search-item { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; border: none; padding: 10px 14px; cursor: pointer; text-align: left; font-size: 14px; color: #303030; } .hd-location-search-item:hover { background-color: #F5F5F5; } .hd-location-search-item .parent { color: #999; font-size: 12px; } .hd-location-search-item .title { font-weight: 500; } .hd-location-search-empty { padding: 30px 14px; text-align: center; color: #999; font-size: 13px; } @media screen and (max-width: 768px) { .hd-location-search-dropdown { width: calc(100vw - 24px); right: -8px; max-height: 70vh; } .hd-location-search-btn i { font-size: 20px; } } /* 푸터 */ #footer .footer { display: flex; padding: 54px 0 120px; border-top: 1px solid #00000033; } #footer .footer .ft-logo-wrap { display: flex; gap: 25px; margin-bottom: 19px; } #footer .footer .ft-logo-wrap img { width:auto; height:54px; } #footer .footer .ft-nav { display: flex; gap: 20px 40px; margin-bottom: 30px; } #footer .footer .ft-nav a { font-weight: bold; } #footer .footer .ft-info { opacity: 0.6; line-height: 1.6; } #footer .footer .ft-info p { margin-bottom: 8px; } #footer .footer .ft-info p:last-child { margin-bottom: 0; } @media screen and (max-width: 1280px) { #footer .footer { padding: 40px 0 80px; } #footer .footer .ft-logo-wrap { flex-wrap: wrap; gap: 8px 16px; } #footer .footer .ft-logo-wrap a { max-width: 100%; } #footer .footer .ft-logo-wrap a img { max-width: 100%; height: 25px; } #footer .footer .ft-nav { flex-wrap: wrap; gap: 20px; } #footer .footer .ft-nav a { font-size: 12px; } #footer .footer .ft-info { font-size: 12px; word-break: keep-all; } } /* 전체 사이트 공통 스크롤 디자인 */ html { scrollbar-width: thin; scrollbar-color: #6A1B9A transparent; } /* Chrome, Edge, Safari */ ::-webkit-scrollbar { height: 8px; width: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: rgba(106, 27, 154, 0.5); border-radius: 4px; transition: background-color 0.3s ease; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(106, 27, 154, 0.8); } ::-webkit-scrollbar-thumb:active { background-color: #6A1B9A; } ::-webkit-scrollbar-corner { background: transparent; } /* 스크롤 가능한 영역 공통 */ .overflow-auto-box { display: block; overflow: auto; } .overflow-auto-box > div { min-width: fit-content; } /* ✅ 모바일 (1280px 이하)에서는 스크롤바 완전 숨김 */ @media screen and (max-width: 1280px) { /* ✅ 웹킷(Chrome, Safari, Edge) 완전 숨김 */ ::-webkit-scrollbar, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; } /* ✅ Firefox / IE 완전 숨김 */ html, body, * { scrollbar-width: none !important; /* Firefox */ -ms-overflow-style: none !important; /* IE, Edge 구버전 */ } } .body { min-height: calc(100vh - 90px); margin-top: 90px; padding-bottom: 80px; } .body.main { margin-top: unset; } .swiper { overflow: hidden; } @media screen and (max-width: 1280px) { .body { margin-top: 50px; } } .overflow-auto-box { display: block; overflow: auto; } .overflow-auto-box::-webkit-scrollbar { display: none; } .overflow-auto-box { -ms-overflow-style: none; scrollbar-width: none; } .overflow-auto-box > div { min-width: fit-content; } /* 버튼 */ .btn { display: inline-flex; justify-content: center; align-items: center; border: 1px solid #000000; border-radius: 4px; height: 24px; padding: 0 8px; gap: 5px; } .btn.bg { font-family: 'OneStoreMobileGothicTitleFont', sans-serif; height: 56px; font-size: 20px; border: 2px solid #000000; border-radius: 8px; padding: 0 16px; } .btn.black { background-color: #000; color: #fff; } .btn.bd-purple { border-color: #6A1B9A; color: #6A1B9A; } .btn.purple { border-color: #6A1B9A; background-color: #6A1B9A; color: #fff; } .btn.disabled { background-color: #0000001F; border: unset !important; color: #00000033; cursor: unset; pointer-events: none; } @media screen and (max-width: 1280px) { .btn.bg { font-size: 16px; height: 48px; } } /* sns 버튼 */ .sns-btn { width: 40px; height: 40px; font-size: 0; } .sns-btn.snsKakao { background-image: url("/images/snsKakao.png"); } .sns-btn.snsNaver { background-image: url("/images/snsNaver.png"); } .sns-btn.snsGoogle { background-image: url("/images/snsGoogle.png"); } .sns-btn.snsFacebook { background-color: #1877F2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' rx='6' fill='%231877F2'/%3E%3Cpath d='M27 20.1h-4.2v-3c0-1 .7-1.2 1.1-1.2h3V12l-4.1-.01c-4.6 0-5.6 3.4-5.6 5.6v2.5H14v4h3.2V36h5.6V24.1H26l.5-4h.5z' fill='white'/%3E%3C/svg%3E"); border-radius: 6px; } /* 라디오박스/체크박스 타입1 */ .radio-type1-wrap { display: flex; overflow: auto; width: 100%; } .radio-type1 { width: 100%; min-width: fit-content; display: flex; gap: 12px; padding: 0 20px; justify-content: center; } .radio-type1 label { min-width: max-content; display: flex; justify-content: center; align-items: center; height: 36px; padding: 0 24px; font-size: 14px; font-weight: 500; border: 1px solid #e1e1e1; border-radius: 50px; background-color: #ECECEC; color: #00000099;; transition: all 0.3s; cursor: pointer; font-size: 16px; font-weight: bold; } .radio-type1 input[type="radio"]:checked + label, .radio-type1 input[type="checkbox"]:checked + label { background-color: #fff; color: #303030; border-color: #000000; } .radio-type1 label:hover { border-color: #000000; color: #303030; } @media screen and (max-width: 1280px) { .radio-type1-wrap { margin-bottom: 25px; } .radio-type1 label { font-size: 14px; height: 34px; padding: 0 16px; } } /* 라디오박스/체크박스 타입2 */ .radio-type2 { min-width: fit-content; display: flex; gap: 12px; } .radio-type2 label { min-width: max-content; display: flex; justify-content: center; align-items: center; height: 30px; padding: 0 16px; font-size: 14px; font-weight: 500; border: 1px solid #e1e1e1; border-radius: 8px; background-color: #ECECEC; color: #00000099;; transition: all 0.3s; cursor: pointer; font-size: 16px; font-weight: bold; } .radio-type2 input[type="radio"]:checked + label, .radio-type2 input[type="checkbox"]:checked + label { background-color: #fff; color: #6A1B9A; border-color: #6A1B9A; } .radio-type2 label:hover { border-color: #000000; color: #303030; } @media screen and (max-width: 1280px) { .radio-type2 label { font-size: 14px; height: 34px; padding: 0 16px; } } /* 메인 */ .main > section { overflow: hidden; } .main-section-title { margin-bottom: 40px; display: flex; justify-content: center; gap: 24px; } .main-section-title > img { width: 48px; max-height: 48px; } .main-section-title p { font-size: 48px; } @media screen and (max-width: 1280px) { .main-section-title { margin-bottom: 20px; gap: 10px; } .main-section-title > img { width: 24px; max-height: 24px; } .main-section-title p { font-size: 25px; } } .section1 { display: flex; } .section1 .swiper-wrap { position: relative; height: 880px; width: 100%; display: flex; align-items: center; justify-content: center; } .section1 .section1-swiper1 { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; } .section1 .section1-swiper1 .swiper-slide img { width: 100%; height: 100%; } .section1 .swiper-txt-wrap { max-width: calc(100% - 40px); display: flex; align-items: center; gap: 34px; z-index: 2; } .section1 .swiper-txt-wrap .swiper-txt { color: #fff; font-size: 48px; font-weight: 400; } .section1 .swiper-txt-wrap .section1-swiper2-wrap { display: flex; gap: 24px; height: 73px; } .section1 .swiper-txt-wrap .section1-swiper2 { width: 400px; height: 100%; border-bottom: 2px solid #fff; } .section1 .swiper-txt-wrap .section1-swiper2 .swiper-slide { display: flex; justify-content: center; align-items: center; } .section1 .swiper-txt-wrap .section1-swiper2 .swiper-slide .country { font-size: 48px; font-weight: 400; color: #fff; } .section1 .swiper-txt-wrap .swiper-button-wrap { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .section1 .swiper-txt-wrap .swiper-button-wrap > div { position: relative; right: unset; left: unset; top: unset; width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; margin: unset; background-color: #00000066; } .section1 .swiper-txt-wrap .swiper-button-wrap > div::after { content: ''; display: none; } .section1 .swiper-txt-wrap .swiper-button-wrap > div i { color: #fff; font-size: 20px; } .section1 .section1-search-bar { position: absolute; left: 50%; transform: translateX(-50%); bottom: 28px; display: flex; gap: 72px; z-index: 2; } .section1 .section1-search-bar .search-iten { display: block; } .section1 .section1-search-bar .search-iten .label { display: flex; gap: 8px; color: #fff; font-size: 14px; font-weight: 500; margin-bottom: 11px; } .section1 .section1-search-bar .search-iten .label img { width: 16px; height: 16px; } .section1 .section1-search-bar .search-iten select { color: #fff; font-weight: 400; } .section1 .section1-search-bar .searchb-btn i { font-size: 32px; color: #fff; } @media screen and (max-width: 1280px) { .section1 { padding-top: 50px; } .section1 .swiper-wrap { height: 360px; } .section1 .swiper-txt-wrap { gap: 20px; } .section1 .swiper-txt-wrap .swiper-txt { font-size: 24px; } .section1 .swiper-txt-wrap .section1-swiper2-wrap { height: 40px; } .section1 .swiper-txt-wrap .section1-swiper2 { width: 180px; } .section1 .swiper-txt-wrap .section1-swiper2 .swiper-slide .country { font-size: 24px; } .section1 .swiper-txt-wrap .swiper-button-wrap { display: none; } .section1 .section1-search-bar { display: none; } } @media screen and (max-width: 768px) { .section1 .swiper-wrap { height: 280px; } .section1 .swiper-txt-wrap { gap: 12px; } .section1 .swiper-txt-wrap .swiper-txt { font-size: 16px; } .section1 .swiper-txt-wrap .section1-swiper2-wrap { height: 32px; } .section1 .swiper-txt-wrap .section1-swiper2 { width: 120px; } .section1 .swiper-txt-wrap .section1-swiper2 .swiper-slide .country { font-size: 16px; } } .section2 { padding: 80px 0; border-bottom: 1px solid #D9D9D9; } .section2 .main-category-nav { display: flex; gap: 32px; justify-content: center;} .section2 .main-category-nav a { display: flex; flex-direction: column; align-items: center; gap: 12px; } .section2 .main-category-nav a p { font-weight: 500; } .section2 .main-category-nav a img { width: 120px; height: 120px; border-radius: 16px; background-color: #E0C7A8;} .section2 .main-category-nav a .img-wrap { width: 120px; } .section2 .search-btn { display: none; border: 1px solid #001A451A; border-radius: 22px; height: 44px; justify-content: center; align-items: center; gap: 10px; padding: 0 48px; font-size: 14px; margin: 0 auto 30px; box-shadow: 0px 4px 10px 0px #001A4514; } .section2 .search-btn i { font-size: 14px; } @media screen and (max-width: 1280px) { .section2 { padding: 16px 0 16px; } .section2 .search-btn { display: flex; } .section2 .main-category-nav { gap: 10px; } .section2 .main-category-nav a { gap: 10px; } .section2 .main-category-nav p { font-size: 12px; } .section2 .main-category-nav a img { width: 48px; height: 48px; } } .section3 { padding: 80px 0 104px; } .section3 .radio-type1-wrap { margin-bottom: 40px; } .section3 .swiper-wrap { display: flex; width: 1920px; max-width: 100%; overflow: hidden; margin: 0 auto; } .section3 .swiper-wrap .swiper { width: 100%; height: 720px; } .section3 .swiper-wrap .swiper-wrapper { align-items: flex-end; } .section3 .swiper-wrap .swiper-slide { width: 552px; height: 640px; background-color: #000000; border-radius: 24px; overflow: hidden; position: relative; margin: 0 12px; opacity: 0.2; transition: all 0.3s; } .section3 .swiper-wrap .swiper-slide.swiper-slide-active { width: 552px; height: 720px; opacity: 1; } .section3 .swiper-wrap .swiper-slide > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .section3 .swiper-wrap .swiper-slide .txt-wrap { position: absolute; bottom: 0; left: 0; width: 100%; padding: 48px 40px; } .section3 .swiper-wrap .swiper-slide .txt-wrap p { color: #fff; } .section3 .swiper-wrap .swiper-slide .txt-wrap .txt-top { font-size: 24px; line-height: 1.4; margin-bottom: 16px; word-break: keep-all; } .section3 .swiper-wrap .swiper-slide .txt-wrap .txt-bt { font-weight: 500; word-break: keep-all; } .section3 .swiper-wrap .swiper-slide .add-btn { z-index: 4; position: absolute; right: 24px; top: 24px; } .section3 .section3-thumb-list { display: flex; gap: 12px; justify-content: center; width: 552px; margin: 30px auto 0; } .section3 .section3-thumb-list li { list-style: none; } .section3 .section3-thumb-list button { width: 80px; height: 80px; border-radius: 12px; overflow: hidden; opacity: 0.5; transition: all 0.3s; cursor: pointer; padding: 0; } .section3 .section3-thumb-list button img { width: 100%; height: 100%; object-fit: cover; } .section3 .section3-thumb-list button:hover { opacity: 0.8; } .section3 .section3-thumb-list button.active { opacity: 1; border-color: #fff; } @media screen and (max-width: 1280px) { .section3 { padding: 50px 0 40px; border-bottom: 4px solid #F5F5F5; } .section3 .radio-type1-wrap { margin-bottom: 25px; } .section3 .swiper-wrap .swiper { height: 408px; } .section3 .swiper-wrap .swiper-slide { width: 313px; height: 366px; padding: 0 4px; } .section3 .swiper-wrap .swiper-slide.swiper-slide-active { width: 313px; height: 408px; border-radius: 10px; } .section3 .swiper-wrap .swiper-slide .txt-wrap { padding: 25px 16px; } .section3 .swiper-wrap .swiper-slide .txt-wrap .txt-top { font-size: 20px; margin-bottom: 10px; } .section3 .swiper-wrap .swiper-slide .txt-wrap .txt-bt { font-size: 12px; } .section3 .swiper-wrap .swiper-slide .add-btn { width: 21px; top: 12px; right: 12px; } .section3 .section3-thumb-list { margin: 20px auto 0px; width: 100%; padding: 0 20px; gap: 10px; } .section3 .section3-thumb-list li { width: 100%; max-width: 80px; } .section3 .section3-thumb-list button { width: 100%; height: auto; border-radius: 4px; position: relative; } .section3 .section3-thumb-list button::before { content: ''; padding-top: 100%; display: block; } .section3 .section3-thumb-list button img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } } .section4 { } .section4 .flex-wrap { display: flex; gap: 24px; } .section4 .flex-wrap .flex-le { min-width: 342px; width: 342px; } .section4 .flex-wrap .flex-le .title-wrap { margin-bottom: 48px; } .section4 .flex-wrap .flex-le .title-wrap p { font-size: 48px; } .section4 .flex-wrap .flex-le .md-list { display: flex; width: 100%; } .section4 .flex-wrap .flex-le .md-list ul { display: flex; gap: 12px; width: 100%; flex-direction: column; } .section4 .flex-wrap .flex-le .md-list ul li { width: 100%; display: flex; padding: 12px; border-radius: 16px; border: 1.5px solid #F8C120; position: relative; cursor: pointer; } .section4 .flex-wrap .flex-le .md-list ul li .num { position: absolute; left: 0; top: 0; width: 32px; height: 32px; background-color: #F8C120; border-radius: 16px 0 16px 0; display: flex; justify-content: center; align-items: center; color: #fff; } .section4 .flex-wrap .flex-le .md-list ul li img { width: 100px; min-width: 100px; height: 100px; border-radius: 6px; object-fit: cover; } .section4 .flex-wrap .flex-le .md-list ul li .info-wrap { display: flex; width: 100%; align-items: center; } .section4 .flex-wrap .flex-le .md-list ul li .txt-wrap { padding-left: 16px; width: calc(100% - 100px); display: flex; flex-direction: column; justify-content: center; } .section4 .flex-wrap .flex-le .md-list ul li .txt-wrap .title { margin-bottom: 8px; font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .section4 .flex-wrap .flex-le .md-list ul li .txt-wrap .price { font-weight: 400; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .section4 .flex-wrap .flex-le .md-list ul li:nth-child(1) .txt-wrap .price { color: #777; } .section4 .flex-wrap .flex-le .md-list ul li:nth-child(3) { opacity: 0.6; } .section4 .flex-wrap .flex-le .md-list ul li:nth-child(3) { border-color: #6A1B9A; } .section4 .flex-wrap .flex-le .md-list ul li:nth-child(3) .num { background-color: #6A1B9A; } .section4 .flex-wrap .flex-le .md-list ul li:nth-child(3) .txt-wrap .price { color: #6A1B9A; } .section4 .flex-wrap .flex-le .md-list ul li:nth-child(5) { opacity: 0.6; } .section4 .flex-wrap .flex-le .md-list ul li:nth-child(5) { border-color: #A084CA; } .section4 .flex-wrap .flex-le .md-list ul li:nth-child(5) .num { background-color: #A084CA; } .section4 .flex-wrap .flex-le .md-list ul li:nth-child(5) .txt-wrap .price { color: #A084CA; } .section4 .flex-wrap .flex-le .md-list ul li:nth-child(7) { opacity: 0.6; } .section4 .flex-wrap .flex-le .md-list ul li:nth-child(7) { border-color: #B1B0B0; } .section4 .flex-wrap .flex-le .md-list ul li:nth-child(7) .num { background-color: #B1B0B0; } .section4 .flex-wrap .flex-le .md-list ul li:nth-child(7) .txt-wrap .price { color: #A084CA; } .section4 .flex-wrap .flex-le .md-list ul li:nth-child(9) { opacity: 0.6; } .section4 .flex-wrap .flex-le .md-list ul li:nth-child(9) { border-color: #B1B0B0; } .section4 .flex-wrap .flex-le .md-list ul li:nth-child(9) .num { background-color: #B1B0B0; } .section4 .flex-wrap .flex-le .md-list ul li:nth-child(9) .txt-wrap .price { color: #A084CA; } .section4 .flex-wrap .flex-le .md-list ul > .flex-ri { display: none; } .section4 .flex-ri { width: calc(100% - 342px - 24px); min-height: 559px; } @media screen and (max-width: 1280px) { .section4 { padding-top: 80px; } .section4 .flex-wrap .flex-le .title-wrap p { font-size: 25px; } .section4 .flex-wrap { flex-direction: column; } .section4 .flex-wrap .flex-le { width: 100%; } .section4 .flex-ri { width: 100%; height: 400px; } .section4 .flex-wrap .flex-le .md-list ul > .flex-ri.active { display: block; } .flex-ri-pc { display: none; } } .swiper-button-wrap-type1 { position: absolute; left: 32px; bottom: 40px; display: flex; gap: 5px; z-index: 2; } .swiper-button-wrap-type1 > div, .swiper-button-wrap-type1 > button { display: flex; justify-content: center; align-items: center; background-color: #000000CC; position: static; margin: unset; } .swiper-button-wrap-type1 > div::after { display: none; } .swiper-button-wrap-type1 .swiper-button { min-width: 24px; height: 24px; border-radius: 4px; } .swiper-button-wrap-type1 .swiper-button i { color: #FFFFFF99; font-size: 12px; } .swiper-button-wrap-type1 .swiper-pagination { color: #fff; padding: 0 10px; border-radius: 4px; } .swiper-button-wrap-type1 .swiper-pagination span { color: #FFFFFF99; font-size: 14px; } .swiper-button-wrap-type1 .swiper-pagination span.swiper-pagination-current { color: #fff; } .swiper-button-wrap-type1 .swiper-autoplay-button { min-width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; border-radius: 4px; } .swiper-button-wrap-type1 .swiper-autoplay-button img { width: 10px; } @media screen and (max-width: 1280px) { .swiper-button-wrap-type1 { left: 16px; bottom: 20px; } } .swiper-button-wrap-type2 { position: absolute; left: 32px; bottom: 40px; display: flex; gap: 5px; z-index: 2; } .swiper-button-wrap-type2 > div, .swiper-button-wrap-type1 > button { display: flex; justify-content: center; align-items: center; background-color: #000000CC; position: static; margin: unset; } .swiper-button-wrap-type2 > div::after { display: none; } .swiper-button-wrap-type2 .swiper-button { min-width: 24px; height: 24px; border-radius: 4px; } .swiper-button-wrap-type2 .swiper-button i { color: #FFFFFF99; font-size: 12px; } .swiper-button-wrap-type2 .swiper-pagination { color: #fff; padding: 0 10px; border-radius: 4px; } .swiper-button-wrap-type2 .swiper-pagination span { color: #FFFFFF99; font-size: 14px; } .swiper-button-wrap-type2 .swiper-pagination span.swiper-pagination-current { color: #fff; } .swiper-button-wrap-type2 .swiper-autoplay-button { min-width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; border-radius: 4px; } .swiper-button-wrap-type2 .swiper-autoplay-button img { width: 10px; } @media screen and (max-width: 1280px) { .swiper-button-wrap-type2 { left: 16px; bottom: 20px; } } /* md 기획전 */ .md-item-type1 { height: 100%; position: relative; overflow: hidden; border-radius: 16px; } .md-item-type1 .md-swiper { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .md-item-type1 .md-swiper .swiper-slide { display: block; position: relative; } .md-item-type1 .md-swiper .bg-img { width: 100%; height: 100%; } .md-item-type1 .md-swiper .bg-img img { width: 100%; height: 100%; } .md-item-type1 .md-item { position: relative; width: 100%; height: 100%; border-radius: 16px; overflow: hidden; position: relative; z-index: 1; } .md-item-type1 .md-item .ranking { position: absolute; left: 32px; top: 0; } .md-item-type1 .md-item .label-list { width: 110px; position: absolute; right: 32px; top: 32px; display: flex; flex-direction: column; gap: 20px; } .md-item-type1 .md-item .txt-wrap { position: absolute; bottom: 0; left: 0; width: 100%; padding: 40px 32px; display: flex; flex-direction: column; align-items: flex-start; } .md-item-type1 .md-item .txt-wrap .d-day-wrap { display: inline-flex; gap: 5px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.32) 100%); } .md-item-type1 .md-item .txt-wrap .d-day-wrap.imminent { background: linear-gradient(90deg, rgba(255, 0, 0, 0.8) 0%, rgba(253, 24, 24, 0.32) 100%); border: 1px solid; border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 100%); } .md-item-type1 .md-item .txt-wrap .d-day-wrap { height: 26px; padding: 0 10px; align-items: center; border-radius: 4px; margin-bottom: 16px; } .md-item-type1 .md-item .txt-wrap .d-day-wrap::after, .section4 .flex-wrap .flex-ri .md-item .txt-wrap .d-day-wrap::before { width: 2px; height: 2px; border-radius: 100%; background-color: #fff; content: ""; } .md-item-type1 .md-item .txt-wrap .d-day-wrap p { color: #fff; } .md-item-type1 .md-item .txt-wrap .d-day-wrap .gap-bar { width: 8px; height: 2px; background: #FFFFFF66; } .md-item-type1 .md-item .txt-wrap .txt-top { font-size: 24px; font-weight: 400; color: #fff; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .md-item-type1 .md-item .txt-wrap .txt-bt { font-size: 18px; font-weight: 400; color: #fff; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } .md-item-type1 .md-item .swiper-button-wrap-type1 { position: static; margin-top: 24px; } @media screen and (max-width: 1280px) { .md-item-type1 .md-item { pointer-events: none; } .md-item-type1 .md-item .ranking { width: 50px; left: 16px; } .md-item-type1 .md-item .label-list { right: 15px; top: 15px; width: 50px; gap: 10px; } .md-item-type1 .md-item .txt-wrap { padding: 20px 15px ; } .md-item-type1 .md-item .txt-wrap .d-day-wrap { margin-bottom: 10px; } .md-item-type1 .md-item .txt-wrap .txt-top { font-size: 16px; margin-bottom: 5px; line-height: 1.4; } .md-item-type1 .md-item .txt-wrap .txt-bt { font-size: 13px; } .md-item-type1 .md-item .swiper-button-wrap-type1 .swiper-button { display: none; } } .md-item-type2 { width: 100%; height: 360px; position: relative; overflow: hidden; border-radius: 16px; } .md-item-type2 .md-swiper { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .md-item-type2 .md-swiper .swiper-slide { display: block; position: relative; } .md-item-type2 .md-swiper .bg-img { width: 100%; height: 100%; } .md-item-type2 .md-swiper .bg-img img { width: 100%; height: 100%; } .md-item-type2 .md-item { position: relative; width: 100%; height: 100%; border-radius: 16px; overflow: hidden; position: relative; z-index: 1; } .md-item-type2 .md-item .ranking { position: absolute; left: 32px; top: 0; width: 76px; } .md-item-type2 .md-item .label-list { width: 64px; position: absolute; right: 24px; top: 24px; display: flex; flex-direction: column; gap: 12px; } .md-item-type2 .md-item .txt-wrap { position: absolute; bottom: 0; left: 0; width: 100%; padding: 40px 32px; display: flex; flex-direction: column; align-items: flex-start; } .md-item-type2 .md-item .txt-wrap .d-day-wrap { display: inline-flex; gap: 5px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.32) 100%); } .md-item-type2 .md-item .txt-wrap .d-day-wrap.imminent { background: linear-gradient(90deg, rgba(255, 0, 0, 0.8) 0%, rgba(253, 24, 24, 0.32) 100%); border: 1px solid; border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 100%); } .md-item-type2 .md-item .txt-wrap .d-day-wrap { height: 26px; padding: 0 10px; align-items: center; border-radius: 4px; margin-bottom: 8px; } .md-item-type2 .md-item .txt-wrap .d-day-wrap::after, .section4 .flex-wrap .flex-ri .md-item .txt-wrap .d-day-wrap::before { width: 2px; height: 2px; border-radius: 100%; background-color: #fff; content: ""; } .md-item-type2 .md-item .txt-wrap .d-day-wrap p { color: #fff; font-size: 14px; } .md-item-type2 .md-item .txt-wrap .d-day-wrap .gap-bar { width: 8px; height: 2px; background: #FFFFFF66; } .md-item-type2 .md-item .txt-wrap .txt-top { line-height: 1.4; font-size: 20px; font-weight: 400; color: #fff; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .md-item-type2 .md-item .txt-wrap .txt-bt-wrap { display: flex; gap: 24px; width: 100%; } .md-item-type2 .md-item .txt-wrap .txt-bt { font-size: 18px; font-weight: 400; color: #fff; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } .md-item-type2 .md-item .swiper-button-wrap-type1 { position: static; } @media screen and (max-width: 1280px) { .md-item-type2 { border-radius: 8px; } .md-item-type2 .md-item { pointer-events: none; } .md-item-type2 .md-item .ranking { width: 50px; left: 16px; } .md-item-type2 .md-item .label-list { right: 15px; top: 15px; width: 50px; gap: 10px; } .md-item-type2 .md-item .txt-wrap { padding: 20px 15px ; } .md-item-type2 .md-item .txt-wrap .d-day-wrap { margin-bottom: 10px; } .md-item-type2 .md-item .txt-wrap .txt-top { font-size: 16px; margin-bottom: 5px; line-height: 1.4; } .md-item-type2 .md-item .txt-wrap .txt-bt { font-size: 13px; } .md-item-type2 .md-item .swiper-button-wrap-type1 .swiper-button { display: none; } } .section5 { padding: 120px 0; } .section5 .section5-swiper { position: relative; overflow: hidden; } .section5 .main-banner { width: 100%; height: 320px; position: relative; } .section5 .main-banner .bg-img { position: relative; width: 100%; height: 100%; border-radius: 16px; overflow: hidden; } .section5 .main-banner .bg-img img { width: 100%; height: 100%; } .section5 .main-banner .txt-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; padding: 0 104px; flex-direction: column; align-items: flex-start; justify-content: center; } .section5 .main-banner .txt-wrap p { margin-bottom: 24px; font-size: 40px; line-height: 1.4; color: #fff; font-weight: 400; } .section5 .main-banner .txt-wrap button { height: 40px; padding: 0 24px; background-color: #000000CC; color: #fff; display: flex; align-items: center; gap: 16px; border-radius: 8px; font-size: 20px; } .section5 .section5-swiper .swiper-button-wrap-type1 { right: 24px; bottom: 24px; left: unset; } @media screen and (max-width: 1280px) { .section5 { padding: 50px 0; } .section5 .main-banner { height: 160px; } .section5 .main-banner .txt-wrap { padding: 0 32px; } .section5 .main-banner .txt-wrap p { font-size: 18px; margin-bottom: 15px; } .section5 .main-banner .txt-wrap button { padding: 0 15px; font-size: 14px; gap: 10px; height: 24px; } .section5 .section5-swiper .swiper-button-wrap-type1 { right: 10px; bottom: 10px; } .section5 .section5-swiper .swiper-button-wrap-type1 .swiper-autoplay-button { display: none !important; } } .section6 { padding-bottom: 120px; } .section6 .radio-type1-wrap { padding: unset; margin-bottom: 40px; } @media screen and (max-width: 1280px) { .section6 { padding-bottom: 80px; } .section6 .radio-type1-wrap { margin-bottom: 25px; } } .state-list-type1 { display: flex; gap: 4px; flex-wrap: wrap; } .state-item { display: flex; padding: 0 8px; height: 24px; background-color: #fff; font-weight: 500; font-size: 14px; border-radius: 4px; align-items: center; gap: 5px; position: relative; z-index: 11; } .state-item::after { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; border: 1px solid #00000033; } .state-item::before { position: relative; z-index: 10; } /* 인기 */ .state-item.popular::after { color: #5135DE; border: 1px solid transparent; background: linear-gradient(90deg, rgba(73, 6, 255, 0.08) 0%, rgba(6, 43, 255, 0.04) 100%) padding-box, linear-gradient(90deg, rgba(73, 6, 255, 0.4) 0%, rgba(6, 43, 255, 0.2) 100%) border-box; border-radius: 4px; } .state-item.popular::before { content: ''; display: block; background-image: url(../../images/popular.png); width: 15px; height: 16px; } /* 마감임박 */ .state-item.closingSoon::after { color: #00C9B7; border: 1px solid transparent; background: linear-gradient(90deg, rgba(0, 219, 201, 0.08) 0%, rgba(0, 210, 108, 0.04) 100%) padding-box, linear-gradient(90deg, rgba(0, 219, 201, 0.4) 0%, rgba(0, 210, 108, 0.2) 100%) border-box; border-radius: 4px; } .state-item.closingSoon::before { content: ''; display: block; background-image: url(../../images/closingSoon.png); width: 18px; height: 16px; } /* 특가 */ .state-item.specialOffer::after { color: #FD1818; border: 1px solid transparent; background: linear-gradient(90deg, rgba(253, 24, 24, 0.12) 0%, rgba(253, 24, 24, 0.06) 100%) padding-box, linear-gradient(90deg, rgba(253, 24, 24, 0.5) 0%, rgba(253, 24, 24, 0.25) 100%) border-box; border-radius: 4px; } .state-item.specialOffer::before { content: ''; display: block; background-image: url(../../images/specialOffer.png); width: 20px; height: 16px; } /* 추천 */ .state-item.recommended::after { color: #FD7F18; border: 1px solid transparent; background: linear-gradient(90deg, rgba(253, 127, 24, 0.12) 0%, rgba(253, 169, 24, 0.06) 100%) padding-box, linear-gradient(90deg, rgba(253, 127, 24, 0.5) 0%, rgba(253, 169, 24, 0.25) 100%) border-box; border-radius: 4px; } .state-item.recommended::before { content: ''; display: block; background-image: url(../../images/recommended.png); width: 18px; height: 16px; } @media screen and (max-width: 1280px) { .state-item { font-size: 11px; padding: 0 5px; height: 20px; } } .section7 { padding-bottom: 120px; } .section7-swiper .swiper-slide { position: relative; } .section7-swiper .swiper-slide::before { content: ''; display: block; padding-top: 177.78%; } .section7-swiper .swiper-slide img { width: 100%; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 24px; } @media screen and (max-width: 1280px) { .section7 { padding-bottom: 40px; } } .helpSection { margin-bottom: 40px; padding-top: 80px; } .helpSection .flex-wrap { display: flex; gap: 24px; } .helpSection .flex-wrap > div { border: 1px solid #0000001A; padding: 48px 56px 56px; width: 100%; border-radius: 24px; width: calc((100% - 24px) / 2); } .helpSection .flex-wrap > div h2 { font-size: 48px; font-weight: 400; } .helpSection .tell-box .radio-wrap { display: flex; align-items: center; margin-top: 40px; margin-bottom: 28px; } .helpSection .tell-box .radio-wrap .radio-type1 { padding: unset; justify-content: flex-start; display: inline-flex; min-width: unset; } .helpSection .tell-box .radio-wrap > a { font-weight: 500; text-decoration: underline; min-width: fit-content; } .helpSection .tell-list { display: flex; gap: 24px; flex-direction: column; } .helpSection .tell-list a { display: flex; justify-content: space-between; border-bottom: 24px; border-bottom: 1px dashed #00000033; padding-bottom: 24px; } .helpSection .tell-list a:last-child { padding-bottom: unset; border: unset; } .helpSection .tell-list a p { font-size: 18px; font-weight: 400; padding-right: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .helpSection .tell-list a span { opacity: 0.4; } .helpSection .assist-box { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; } .helpSection .assist-box .btn-wrap { position: absolute; right: 56px; top: 49px; display: flex; flex-direction: column; gap: 13px; } .helpSection .assist-box .btn-wrap button { width: 160px; height: 46px; background-color: #000; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; color: #fff; padding: 0 16px; font-size: 26px; font-family: 'OneStoreMobileGothicTitleFont', sans-serif; } .helpSection .assist-box .phoneNumber-wrap { margin-top: 56px; margin-bottom: 24px; } .helpSection .assist-box .phoneNumber-wrap .label { margin-bottom: 28px; font-size: 20px; font-weight: 500; } .helpSection .assist-box .phoneNumber-wrap .number { font-weight: 400; font-size: 40px; } .helpSection .assist-box .time-wrpa { gap: 16px; display: flex; align-items: center; } .helpSection .assist-box .time-wrpa .label { height: 24px; padding: 0px 10px; border: 1px solid #00000033; border-radius: 12px; display: flex; justify-content: center; align-items: center; font-size: 14px; font-weight: bold; } .helpSection .assist-box .time-wrpa .day { font-weight: bold; font-size: 14px; color: #00000099; } .helpSection .assist-box .time-wrpa .tiem { font-weight: bold; font-size: 14px; } .helpSection .assist-box .sns-list { display: flex; gap: 16px; flex-wrap: wrap; } .helpSection .assist-box .sns-list a { width: 56px; display: flex; } @media screen and (max-width: 1280px) { .helpSection .flex-wrap { flex-direction: column; gap: 40px; } .helpSection .flex-wrap > div { padding: unset; border: unset; border-radius: unset; width: 100%; } .helpSection .flex-wrap > div h2 { font-size: 25px; } .helpSection .tell-box { padding-bottom: 40px !important; border-bottom: 1px solid #000 !important; } .helpSection .tell-box .radio-wrap { margin-top: 20px; margin-bottom: 25px; } .helpSection .tell-list { gap: 20px; } .helpSection .tell-list a { flex-direction: column; gap: 10px; padding-bottom: 20px; } .helpSection .tell-box .radio-wrap > a { display: none; } .helpSection .assist-box .btn-wrap { top: 0px; right: 16px; } .helpSection .assist-box .btn-wrap button { height: 30px; padding: 0 10px; gap: 10px; width: unset; font-size: 14px; } .helpSection .assist-box .btn-wrap button:nth-child(2) { display: none; } .helpSection .assist-box .phoneNumber-wrap { margin-top: 20px; } .helpSection .assist-box .phoneNumber-wrap .label { font-size: 14px; margin-bottom: 15px; } } .products-list-type1 { display: block; } .products-list-type1 ul { display: flex; gap: 80px 24px; flex-wrap: wrap; } .products-list-type1 ul li { width: calc((100% - 72px) / 4); } @media screen and (max-width: 1280px) { .products-list-type1 ul { gap: 40px 5px; } .products-list-type1 ul li { width: calc((100% - 5px) / 2); } } .products-list-type2 { display: block; } .products-list-type2 ul { display: flex; gap: 54px 24px; flex-wrap: wrap; } .products-list-type2 ul li { width: calc((100% - 48px) / 3); } @media screen and (max-width: 1280px) { .products-list-type2 ul { gap: 40px 5px; } .products-list-type2 ul li { width: calc((100% - 5px) / 2); } } .products-list-type3 { display: block; } .products-list-type3 ul { display: flex; gap: 40px; flex-wrap: wrap; } .products-list-type3 ul li { width: calc((100% - 40px) / 2); } @media screen and (max-width: 1280px) { .products-list-type3 ul li { width: 100%; } } /* hashtag */ .hashtag-list { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 20px; } .hashtag-list .hashtag-item { background-color: #490A6F0D; border-radius: 4px; height: 16px; font-size: 12px; display: flex; padding: 0 5px; align-items: center; } .hashtag-list .hashtag-item::before { content: '#'; color: #A084CA; } .hashtag-list-type2 { display: flex; gap: 8px; flex-wrap: wrap; } .hashtag-list-type2 .hashtag-item { background-color: #490A6F0D; border-radius: 4px; height: 30px; font-size: 14px; display: flex; padding: 0 10px; align-items: center; } .hashtag-list-type2 .hashtag-item::before { content: '#'; color: #A084CA; } .products-type1 { display: block; position: relative; } .products-type1 .img-wrap { width: 100%; position: relative; border-radius: 16px; overflow: hidden; margin-bottom: 12px; } .products-type1 .img-wrap::before { content: ""; display: block; padding-top: 100%; } .products-type1 .img-wrap img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .products-type1 .img-wrap .location-badge { position: absolute; bottom: 12px; right: 12px; background: rgba(0, 0, 0, 0.7); color: #fff; border: 1px solid #fff; padding: 4px 10px; font-size: 12px; border-radius: 4px; z-index: 1; font-weight: bold; } .products-type1 .state-list-type1 { margin-bottom: 12px; } .products-type1 .state-list-type1.state-list-type1.position { position: absolute; right: 16px; top: 16px; display: flex; flex-direction: column; gap: 8px; margin-bottom: unset; } .products-type1 .title-wrap { margin-bottom: 8px; } .products-type1 .title-wrap p { font-weight: 500; line-height: 1.4; min-height: 1.4em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .products-type1 .sub-title-wrap { display: block; width: 100%; } .products-type1 .sub-title-wrap p { font-size: 13px; opacity: 0.6; line-height: 1.4; min-height: 1.4em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .products-type1 .hashtag-list { min-height: 37px; max-height: 37px; overflow: hidden; align-content: flex-start; } .products-type1 .price-wrap { margin-top: 20px; } .products-type1 .price-wrap p { font-family: 'OneStoreMobileGothicTitleFont', sans-serif; font-size: 20px; } @media screen and (max-width: 1280px) { .products-type1 .state-list-type1.state-list-type1.position { top: 8px; right: 8px; } .products-type1 .img-wrap { border-radius: 8px; } .products-type1 .img-wrap .location-badge { bottom: 8px; right: 8px; padding: 3px 8px; font-size: 11px; } .products-type1 .title-wrap { margin-bottom: 5px; } .products-type1 .title-wrap p { font-size: 14px; } .products-type1 .sub-title-wrap p { font-size: 12px; } .products-type1 .hashtag-list { margin-top: 5px; gap: 4px; } .products-type1 .hashtag-list .hashtag-item { font-size: 10px; } } .products-type2 { display: flex; width: 100%; } .products-type2 .img-wrap { min-width: 200px; position: relative; border-radius: 16px; overflow: hidden; margin-bottom: 12px; } .products-type2 .img-wrap::before { content: ""; display: block; padding-top: 100%; } .products-type2 .img-wrap img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .products-type2 .txt-wrap { width: calc(100% - 200px); padding-left: 20px; } .products-type2 .state-list-type1 { margin-bottom: 12px; } .products-type2 .title-wrap { margin-bottom: 8px; } .products-type2 .title-wrap p { font-weight: 500; line-height: 1.4; } .products-type2 .sub-title-wrap { display: block; width: 100%; } .products-type2 .sub-title-wrap p { font-size: 13px; opacity: 0.6; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .products-type2 .price-wrap { margin-top: 20px; } .products-type2 .price-wrap p { font-family: 'OneStoreMobileGothicTitleFont', sans-serif; font-size: 20px; } @media screen and (max-width: 1280px) { .products-type2 .img-wrap { border-radius: 8px; } .products-type2 .title-wrap { margin-bottom: 5px; } .products-type2 .title-wrap p { font-size: 14px; } .products-type2 .sub-title-wrap p { font-size: 12px; } .products-type2 .hashtag-list { margin-top: 5px; gap: 4px; } .products-type2 .hashtag-list .hashtag-item { font-size: 10px; } } @media screen and (max-width: 640px) { .products-type2 { flex-direction: column; } .products-type2 .txt-wrap { width: 100%; padding: unset; } } /* 상품 리스트 페이지 */ .products-page { padding-top: 70px; } .products-page .detail-post-info { margin-bottom: 24px; } .products-page .detail-post-info a, .products-page .detail-post-info p { font-family: 'OneStoreMobileGothicTitleFont', sans-serif; opacity: 0.6; } .products-page .detail-post-info a.active, .products-page .detail-post-info p.active { color: #000000; } /* .mobile-category-filter { display: none; } */ .mobile-category-filter .category-tabs-wrapper { padding: 16px 0; margin-bottom: 16px; } .mobile-category-filter .category-tabs { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 16px; } .mobile-category-filter .category-tabs:last-child { margin-bottom: 0; } .mobile-category-filter .category-tabs::-webkit-scrollbar { display: none; } .mobile-category-filter .category-tabs { -ms-overflow-style: none; scrollbar-width: none; } .mobile-category-filter .category-tabs button { flex-shrink: 0; padding: 8px 16px; border: 1px solid #E0E0E0; border-radius: 20px; background-color: #fff; color: #666; font-size: 14px; font-weight: 500; white-space: nowrap; transition: all 0.2s; } .mobile-category-filter .category-tabs button.active { background-color: #6A1B9A; color: #fff; border-color: #6A1B9A; } .mobile-category-filter .category-tabs button:hover { border-color: #6A1B9A; } .products-search-wrap { display: flex; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 16px; } .search-type1 { display: flex; align-items: center; height: 68px; } .search-type1 i { font-size: 24px; cursor: pointer; } .search-type1 input { padding-left: 24px; font-size: 26px; font-weight: bold; max-width: calc(100% - 24px); } .search-type1 input::placeholder { font-weight: bold; color: #0000006e; font-size: 20px; } @media screen and (max-width: 1280px) { .products-page { padding-top: 40px; } .mobile-category-filter { display: block; } .search-type1 { width: 100%; } .products-search-wrap { } .search-type1 i { font-size: 20px; } .search-type1 input { font-size: 16px; padding-left: 16px; } } /* 추천상품 */ .recommended-products-wrap { padding-bottom: 74px; border-bottom: 5px solid #F5F5F5; margin-bottom: 40px; } .recommended-products-swiper { overflow: hidden; } .recommended-products-label-wrap { display: flex; justify-content: space-between; margin-bottom: 24px; align-items: center; } .recommended-products-label-wrap .recommended-products-label { font-weight: bold; font-size: 32px; } .recommended-products-label-wrap .swiper-button-wrap-type1 { position: static; } .recommended-products-label-wrap .swiper-button-wrap-type1 .swiper-button { background-color: #fff; border: 1px solid #0000001A } .recommended-products-label-wrap .swiper-button-wrap-type1 .swiper-button i { color: #00000099; } .recommended-products-label-wrap .swiper-button-wrap-type1 .swiper-pagination { color: #000; background-color: #F5F5F5; } .recommended-products-label-wrap .swiper-button-wrap-type1 .swiper-pagination span.swiper-pagination-current { color: #000; } .recommended-products-label-wrap .swiper-button-wrap-type1 .swiper-pagination span { color: #00000066; } @media screen and (max-width: 1280px) { .recommended-products-swiper { min-height: unset !important; } .recommended-products-wrap { margin-bottom: 24px; } .recommended-products-label-wrap .recommended-products-label { font-size: 25px; } .products-page .detail-post-info { margin-bottom: 24px; } } /* 출발일, 도착일 타입1 */ .date-wrap-type1 { display: flex; padding: 16px; border: 1px solid #0000001A; border-radius: 8px; } .date-wrap-type1 .date-box { display: block; width: 100%; } .date-wrap-type1 .date-box .label { font-weight: 600; font-size: 14px; opacity: 0.4; margin-bottom: 7px; } .date-wrap-type1 .date-box .date { font-weight: 400; } .stay-duration { height: 24px; padding: 0 8px; display: flex; justify-content: center; align-items: center; color: #6A1B9A; background-color: #6A1B9A1A; border-radius: 4px; min-width: fit-content; } /* label-content 타입1 */ .label-content-wrap-type1 { display: flex; flex-direction: column; } .label-content-wrap-type1 > ul { display: flex; flex-direction: column; gap: 16px; } .label-content-wrap-type1 > ul > li { display: block; } .label-content-item-type1 { display: block; } .label-content-item-type1 > .label-wrap { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .label-content-item-type1 > .label-wrap .label { font-weight: bold; } .label-content-item-type1 > .label-wrap .label.big { font-size: 20px; } .label-content-item-type1 .content-wrap { display: flex; flex-direction: column; gap: 10px; } .label-content-item-type1 .link-wrap { display: flex; justify-content: flex-end; } .label-content-item-type1 .link-wrap a { text-decoration: underline; opacity: 0.6; } .label-content-item-type1 .txt { font-size: 12px; line-height: 1.3; opacity: 0.6; } .label-content-item-type1 .radio-btn-type1 { padding: 0 16px; } /* label-content 타입2 */ .label-content-wrap-type2 { display: flex; flex-direction: column; } .label-content-wrap-type2.bd { border-top: 1px solid #000; } .label-content-wrap-type2 > ul { display: flex; flex-direction: column; padding: 24px 0; gap: 24px; } .label-content-wrap-type2 > ul > li { display: flex; flex-direction: column; gap: 8px; } .label-content-wrap-type2 > ul > li.gap { border-top: 1px dashed #00000033; position: relative; } .label-content-wrap-type2 > ul > li.gap .li-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #F5F5F5; padding: 5px 16px; font-weight: bold; color: #00000066; } .label-content-item-type2 { display: flex; } .label-content-item-type2 .label-wrap { display: flex; justify-content: space-between; width: 130px; min-width: 130px; padding-top: 12px; } .label-content-item-type2 .label-wrap .label { font-weight: 500; } .label-content-item-type2 .label-wrap .label span { color: #6A1B9A; } .label-content-item-type2 .content-wrap { width: 100%; display: flex; align-items: flex-end; } .label-content-item-type2 .content-wrap .txt { font-size: 12px; font-weight: 400; opacity: 0.6; } .label-content-item-type2 .content-wrap .txt.pp { color: #6A1B9A; opacity: 1; } .label-content-item-type2 .content-wrap .quill { width: 100%; } .label-content-item-type2 .content-wrap .quill .ql-editor { min-height: 360px; } /* label-content 타입3 */ .label-content-wrap-type3 { display: flex; flex-direction: column; } .label-content-wrap-type3 > ul { display: flex; flex-direction: column; } .label-content-wrap-type3 > ul > li { display: flex; padding: 32px 0; } .label-content-wrap-type3 > ul > li:last-child { border-bottom: 1px solid #00000033; } .label-content-item-type3 { display: flex; width: 100%; flex-direction: column; gap: 24px; } .label-content-item-type3 .label-wrap { min-width: 240px; } .label-content-item-type3 .label-wrap .label { font-family: 'OneStoreMobileGothicTitleFont', sans-serif; } .label-content-item-type3 .content-wrap { width: 100%; padding: 24px; border: 1px solid #0000001A; border-radius: 8px; } @media screen and (max-width: 1280px) { .label-content-item-type3 { flex-direction: column; gap: 20px; } .label-content-wrap-type3 > ul > li { padding: 20px 0; } .label-content-item-type3 .label-wrap { min-width: none; } .label-content-item-type3 .content-wrap { padding: 16px; } } /* label-content 타입4 */ .label-content-wrap-type4 { display: flex; flex-direction: column; gap: 16px; } .label-content-item-type4 { display: flex; width: 100%; } .label-content-item-type4 .label-wrap { min-width: 120px; } .label-content-item-type4 .label-wrap .label { font-weight: bold; font-size: 14px; line-height: 1.6; } .label-content-item-type4 .content-wrap { width: 100%; } .label-content-item-type4 .content-wrap .content { font-size: 14px; line-height: 1.6; word-break: keep-all; overflow-wrap: break-word; } @media screen and (max-width: 1280px) { .label-content-item-type4 { flex-direction: column; gap: 10px; } } /* label-content 타입5 */ .label-content-wrap-type5 { display: flex; flex-direction: column; gap: 24px; } .label-content-item-type5 { display: flex; gap: 24px; padding-bottom: 24px; border-bottom: 1px dashed #00000033; } .label-content-item-type5:last-child { border-bottom: unset; } .label-content-item-type5 .label-content-item-big-title-wrap { width: 100%; } .label-content-item-type5 .label-content-item-big-title-wrap .title { font-weight: bold; margin-bottom: 16px; } .label-content-item-type5 .content-wrap { width: 100%; } @media screen and (max-width: 560px) { .label-content-item-type5 { flex-direction: column; } } /* label-content 타입6 */ .label-content-wrap-type6 { display: flex; flex-direction: column; border-top: 1px solid #000; border-bottom: 1px solid #000; } .label-content-item-type6 { display: flex; border-bottom: 1px solid #00000033; } .label-content-item-type6:last-child { border-bottom: unset; } .label-content-item-type6 .label-wrap { width: 240px; min-width: 240px; padding: 20px 0; } .label-content-item-type6 .label-wrap .label { font-weight: bold; font-size: 20px; color: #000; opacity: 0.4; } .label-content-item-type6 .content-wrap { width: 100%; display: flex; align-items: center; gap: 24px; font-size: 20px; flex-wrap: wrap; padding: 20px 0; word-break: keep-all; line-height: 1.5; } .label-content-item-type6 .content-wrap .reservation-number { display: flex; gap: 16px; background-color: #EBEBEB; height: 34px; padding: 0 10px; align-items: center; } .label-content-item-type6 .content-wrap .reservation-number .label { opacity: 0.4; font-weight: bold; } .label-content-item-type6 .content-wrap > ul { } .label-content-item-type6 .content-wrap > ul > li { line-height: 1.4; list-style: inside; } @media screen and (max-width: 1280px) { .label-content-item-type6 { flex-direction: column; } .label-content-item-type6 .label-wrap { padding: 8px 0; } .label-content-item-type6 .content-wrap { padding: 8px 0; } } .sub-label-content-wrap { display: flex; gap: 24px; flex-direction: column; } .sub-label-content-wrap .sub-label-content-item { display: block;} .sub-label-content-wrap .sub-label-content-item .sub-label { margin-bottom: 12px; font-weight: 600; } .sub-label-content-wrap .sub-label-content-item .sub-content { font-size: 16px; font-weight: 500; opacity: 0.6; line-height: 1.6; white-space: pre-line; } @media screen and (max-width: 1280px) { .sub-label-content-wrap .sub-label-content-item .sub-label { font-size: 14px; } .sub-label-content-wrap .sub-label-content-item .sub-content { font-size: 13px; } } /* 쿠폰 리스트 */ .coupon-list-type1 { width: 100%; display: flex; gap: 10px; flex-wrap: wrap; padding: 16px 20px; background-color: #F5F5F5; border-radius: 8px; } .coupon-list-type1 .coupon-item-type1 { width: calc((100% - 10px) / 2); } .coupon-item-type1 { padding: 15px; background-color: #fff; cursor: pointer; border-radius: 4px; } .coupon-item-type1 .issue { display: flex; gap: 8px; font-size: 12px; margin-bottom: 8px; color: #999999; } .coupon-item-type1 .coupon-title { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 8px; } .coupon-item-type1 .coupon-title i { font-size: 16px; display: none; } .coupon-item-type1 .discount-info { font-weight: bold; font-size: 20px; margin-bottom: 8px; } .coupon-item-type1 .period { font-size: 12px; font-weight: 400; opacity: 0.4; } .coupon-item-type1.active { border: 2px solid #6A1B9ACC; } .coupon-item-type1.active .coupon-title { color: #6A1B9A; } .coupon-item-type1.active .coupon-title i { display: unset; } .coupon-item-type1.active .discount-info { color: #6A1B9A; } .coupon-item-type1.active .period { color: #6A1B9A; opacity: 1; } @media screen and (max-width: 1280px) { .coupon-list-type1 { padding: 10px; } .coupon-list-type1 .coupon-item-type1 { width: 100%; padding: 8px; } .coupon-item-type1 .discount-info { font-size: 16px; } } /* 쿠폰리스트 쿠폰 없을때 */ .coupon-list-type1.no-coupon { background-color: #F5F5F566; border: 1px dashed #00000033; height: 80px; display: flex; justify-content: center; align-items: center; } .coupon-list-type1.no-coupon > p { font-weight: 600; opacity: 0.6; } @media screen and (max-width: 1280px) { .label-content-item-type2 { flex-direction: column; gap: 8px; } .label-content-item-type2 .label-wrap { width: 100%; min-width: unset; padding: unset; } } /* input text */ .input-wrap-type1 { width: 100%; position: relative; display: flex; gap: 10px; } .input-wrap-type1 input { width: 100%; height: 40px; border: 1px solid #0000001A; border-radius: 8px; padding: 0 20px; } .input-wrap-type1 input:disabled { background-color: #F5F5F5; } .input-wrap-type1 input[type="date"] { cursor: pointer; } .input-wrap-type1 input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .input-wrap-type1 .btn { min-width: 96px; height: 40px; border: 2px solid; font-weight: bold; } .input-wrap-type1 .unit { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); } @media screen and (max-width: 1280px) { .input-wrap-type1 { flex-direction: column; } .input-wrap-type1 input { height: 32px; padding: 0 16px; font-size: 14px; border-radius: 4px; } .input-wrap-type1 .btn { height: 32px; font-size: 14px; min-width: 80px; } } /* textarea */ .textarea-wrap-type1 { width: 100%; position: relative; } .textarea-wrap-type1 textarea { width: 100%; border: 1px solid #0000001A; border-radius: 8px; padding: 12px 20px; } /* 라디오 박스 */ .radio-wrap-type1 { width: 100%; display: flex; gap: 10px; flex-wrap: wrap; } .radio-btn-type1 { display: flex; align-items: center; justify-content: center; height: 40px; padding: 0 24px; border: 2px solid #E0E0E0; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; background-color: #fff; } .radio-btn-type1 input[type="radio"] { display: none; } .radio-btn-type1 p { font-size: 16px; font-weight: 600; color: #C0C0C0; margin: 0; transition: color 0.3s ease; } .radio-btn-type1:has(input[type="radio"]:checked) { border-color: #6A1B9A; background-color: #fff; } .radio-btn-type1:has(input[type="radio"]:checked) p { color: #6A1B9A; font-weight: 700; } .radio-btn-type1:hover { border-color: #6A1B9A; } @media screen and (max-width: 1280px) { .radio-btn-type1 { height: 32px; } .radio-btn-type1 p { font-size: 14px; } } /* 약관 동의 리스트 */ .agreement-list-type1 { width: 100%; display: flex; flex-direction: column; gap: 16px; } .agreement-list-type1 .agreement-all { display: flex; align-items: center; gap: 12px; cursor: pointer; } .agreement-list-type1 .agreement-all input[type="checkbox"] { display: none; } .agreement-list-type1 .agreement-all .checkbox-custom { width: 16px; height: 16px; min-width: 16px; border: 1px solid #D9D9D9; border-radius: 2px; display: flex; align-items: center; justify-content: center; background-color: #fff; } .agreement-list-type1 .agreement-all .checkbox-custom::after { content: '✓'; font-size: 14px; font-weight: bold; color: #fff; opacity: 0; } .agreement-list-type1 .agreement-all input[type="checkbox"]:checked + .checkbox-custom { background-color: #6A1B9A; border-color: #6A1B9A; } .agreement-list-type1 .agreement-all input[type="checkbox"]:checked + .checkbox-custom::after { opacity: 1; } .agreement-list-type1 .agreement-all .text { font-size: 16px; font-weight: 600; color: #303030; margin: 0; } .agreement-list-type1 .divider { width: 100%; height: 1px; background: repeating-linear-gradient(to right, #D9D9D9 0, #D9D9D9 4px, transparent 4px, transparent 8px); } .agreement-list-type1 .agreement-item { display: flex; align-items: center; justify-content: space-between; cursor: pointer; } .agreement-list-type1 .agreement-item .left { display: flex; align-items: center; gap: 12px; } .agreement-list-type1 .agreement-item input[type="checkbox"] { display: none; } .agreement-list-type1 .agreement-item .checkbox-custom { width: 16px; height: 16px; min-width: 16px; border: 1px solid #D9D9D9; border-radius: 2px; display: flex; align-items: center; justify-content: center; background-color: #fff; } .agreement-list-type1 .agreement-item .checkbox-custom::after { content: '✓'; font-size: 14px; font-weight: bold; color: #fff; opacity: 0; } .agreement-list-type1 .agreement-item input[type="checkbox"]:checked + .checkbox-custom { background-color: #6A1B9A; border-color: #6A1B9A; } .agreement-list-type1 .agreement-item input[type="checkbox"]:checked + .checkbox-custom::after { opacity: 1; } .agreement-list-type1 .agreement-item .text { font-size: 16px; font-weight: 500; color: #303030; margin: 0; } .agreement-list-type1 .agreement-item .view-link { font-size: 14px; font-weight: 500; color: #999; text-decoration: underline; } @media screen and (max-width: 1280px) { .agreement-list-type1 .agreement-all .checkbox-custom { width: 20px; height: 20px; min-width: 20px; } .agreement-list-type1 .agreement-all .text { font-size: 14px; } .agreement-list-type1 .agreement-item .checkbox-custom { width: 20px; height: 20px; min-width: 20px; } .agreement-list-type1 .agreement-item .text { font-size: 14px; } .agreement-list-type1 .agreement-item .view-link { font-size: 12px; } } /* 금액 상세 */ .price-detail-type1 { width: 100%; display: flex; flex-direction: column; gap: 12px; } .price-detail-type1 .price-row { display: flex; justify-content: space-between; align-items: center; } .price-detail-type1 .price-row .label { font-size: 14px; font-weight: 400; color: #303030; margin: 0; } .price-detail-type1 .price-row .value { font-size: 14px; font-weight: 400; color: #303030; margin: 0; } .price-detail-type1 .price-row.discount .label { color: #6A1B9A; } .price-detail-type1 .price-row.discount .value { color: #6A1B9A; } .price-detail-type1 .price-total { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 16px; border-top: 1px solid #E0E0E0; } .price-detail-type1 .price-total .total-left { display: flex; flex-direction: column; gap: 4px; } .price-detail-type1 .price-total .total-left .label { font-size: 16px; font-weight: 700; color: #303030; margin: 0; } .price-detail-type1 .price-total .total-left .sub { font-size: 14px; font-weight: 400; color: #999; margin: 0; } .price-detail-type1 .price-total .total-ri { text-align: right; } .price-detail-type1 .price-total .amount { font-size: 20px; margin: 0; margin-bottom: 10px; font-family: 'OneStoreMobileGothicTitleFont', sans-serif; } .price-detail-type1 .price-total .sub { font-size: 12px; font-weight: 400; } @media screen and (max-width: 1280px) { .price-detail-type1 .price-row .label { font-size: 13px; } .price-detail-type1 .price-row .value { font-size: 13px; } .price-detail-type1 .price-total .total-left .label { font-size: 14px; } .price-detail-type1 .price-total .total-left .sub { font-size: 12px; } .price-detail-type1 .price-total .amount { font-size: 18px; } } /* quantity-control 수량 */ .quantity-control { display: flex; align-items: center; gap: 5px; } .quantity-control button { width: 30px; height: 30px; border: 1px solid #E0E0E0; border-radius: 4px; background-color: #fff; display: flex; justify-content: center; align-items: center; font-size: 20px; cursor: pointer; color: #999; transition: all 0.2s; } .quantity-control button:hover { background-color: #f5f5f5; border-color: #ccc; } .quantity-control input { width: 40px; height: 30px; text-align: center; border: none; font-size: 20px; font-weight: 400; background-color: transparent; } /* 옵션 선택 타입1 */ .option-list-type1 { display: flex; flex-direction: column; gap: 16px; } .option-item-type1 { display: flex; flex-direction: column; gap: 12px; border-bottom: 1px dashed #D9D9D9; padding-bottom: 16px; } .option-item-type1:last-child { border-bottom: none; padding-bottom: unset; } .option-item-type1 .option-info { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; } .option-item-type1 .option-info .option-name { font-weight: 400; font-size: 14px; color: #303030; } .option-item-type1 .option-info .option-price { font-weight: 500; font-size: 14px; color: #303030; } .option-item-type1 .option-info .option-description { width: 100%; font-weight: 400; font-size: 13px; color: #767676; } .option-item-type1 .option-info.big .option-name { font-size: 16px; } .option-item-type1 .option-info.big .option-price { font-size: 16px; } .option-item-type1 .option-controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .option-item-type1 .option-total { display: flex; align-items: center; gap: 5px; } .option-item-type1 .option-total .total-price { font-weight: 700; font-size: 16px; color: #303030; } .option-item-type1 .option-total .btn-remove { width: 24px; height: 24px; border: none; background: none; font-size: 28px; color: #999; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: all 0.2s; line-height: 1; } .option-item-type1 .option-total .btn-remove:hover { color: #333; } .option-item-type2 { display: flex; flex-direction: column; gap: 12px; border-bottom: 1px dashed #D9D9D9; padding-bottom: 16px; } .option-item-type2:last-child { border-bottom: none; padding-bottom: unset; } .option-item-type2 .option-info { display: flex; gap: 5px; align-items: center; } .option-item-type2 .option-info .option-name { font-weight: 400; font-size: 16px; color: #303030; font-family: 'OneStoreMobileGothicTitleFont', sans-serif; } .option-item-type2 .option-info .option-price { font-weight: 500; font-size: 14px; color: #303030; } .option-item-type2 .option-controls { display: flex; justify-content: space-between; align-items: center; } .option-item-type2 .option-sub-title { display: flex; gap: 4px; } .option-item-type2 .option-sub-title p { font-weight: 500; font-size: 14px; } .option-item-type2 .option-sub-title span { display: none; } .option-item-type2 .option-total { display: flex; align-items: center; gap: 5px; } .option-item-type2 .option-total .total-price { font-weight: 700; font-size: 16px; color: #303030; } .option-item-type2 .option-total .btn-remove { width: 24px; height: 24px; border: none; background: none; font-size: 28px; color: #999; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: all 0.2s; line-height: 1; } .option-item-type2 .option-total .btn-remove:hover { color: #333; } .option-view-type1 { display: flex; justify-content: space-between; } .option-view-type1 .option-label-wrap { display: flex; gap: 5px; } .option-view-type1 .option-label-wrap .label { font-weight: 400; } .option-view-type1 .option-label-wrap .label-price { font-weight: 500; } .option-view-type1 .option-label-wrap .person-count { font-weight: 500; } .option-view-type1 .price { font-weight: bold; } .option-list-type1 .option-view-type1 { padding-bottom: 16px; border-bottom: 1px dashed #00000033; } .option-list-type1 .option-view-type1:last-child { border-bottom: 1px solid #000; } .option-list-type2 { padding: 16px; border: 1px solid #0000001A; border-radius: 8px; } .option-list-type2 .option-list-wrap { display: flex; gap: 8px 16px; flex-wrap: wrap; } .option-list-type2 .option-list-wrap .option-list { display: flex; gap: 16px; margin-bottom: 16px; } .option-list-type2 .option-list-wrap .option-list p { font-size: 14px; font-weight: 400; display: flex; gap: 16px; align-items: center; } .option-list-type2 .option-list-wrap .option-list p::after { content: ''; width: 4px; height: 4px; background-color: #D9D9D9; display: block; } .option-list-type2 .option-list-wrap .option-list p:last-child { padding: unset; } .option-list-type2 .option-list-wrap .option-list p:last-child::after { display: none; } .option-list-type2 .option-list-wrap .stayDuration { opacity: 0.4; font-weight: 400; font-size: 14px; } .option-list-type2 .add-option { display: flex; gap: 8px 16px; flex-wrap: wrap; } .option-list-type2 .add-option p { font-size: 14px; font-weight: 400; } .option-list-type3 { display: inline-flex; padding: 5px 12px; background-color: #F5F5F5; gap: 8px; align-items: center; flex-wrap: wrap; } .option-list-type3 p { color: #000000; font-size: 14px; word-break: keep-all; } .option-list-type3 .gap { width: 4px; height: 4px; border-radius: 1px; background-color: #00000033; } /* 셀렉트 박스 타입1 */ .select-type1 { position: relative; width: 100%; } .select-type1 select { width: 100%; height: 44px; padding: 0 40px 0 16px; border: 1px solid #E0E0E0; border-radius: 8px; font-size: 14px; color: #303030; background-color: #fff; appearance: none; cursor: pointer; } .select-type1 select:focus { outline: none; border-color: #6A1B9A; } .select-type1 select option[disabled] { color: #999; } .select-type1 i { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; color: #999; pointer-events: none; } .option-select-type1 { position: relative; width: 100%; } .option-select-type1 .trigger { width: 100%; height: 44px; padding: 0 40px 0 16px; border: 1px solid #E0E0E0; border-radius: 8px; font-size: 14px; color: #999; background-color: #fff; cursor: pointer; display: flex; align-items: center; text-align: left; } .option-select-type1.open .trigger { border-color: #6A1B9A; } .option-select-type1 > i { position: absolute; right: 16px; top: 22px; transform: translateY(-50%); font-size: 20px; color: #999; pointer-events: none; } .option-select-type1 .list { position: absolute; top: 48px; left: 0; right: 0; z-index: 20; max-height: 260px; overflow-y: auto; background-color: #fff; border: 1px solid #E0E0E0; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .option-select-type1 .list li + li { border-top: 1px solid #F0F0F0; } .option-select-type1 .list button { width: 100%; padding: 12px 16px; background: none; border: none; text-align: left; cursor: pointer; display: block; } .option-select-type1 .list button:hover { background-color: #F7F3FA; } .option-select-type1 .list .name { display: block; font-size: 14px; color: #303030; line-height: 1.4; } .option-select-type1 .list .desc { display: block; margin-top: 4px; font-size: 13px; color: #666666; line-height: 1.4; } .option-item-type1 .option-controls .option-person { font-size: 14px; color: #303030; } .totalPayment-wrap { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 8px; } .totalPayment-wrap .label { font-weight: bold; } .totalPayment-wrap .totalPayment { display: block; min-width: 0; flex: 1 1 auto; text-align: right; } .totalPayment-wrap .totalPayment .price { font-size: 20px; font-weight: 400; font-family: 'OneStoreMobileGothicTitleFont', sans-serif; word-break: break-word; white-space: normal; } .totalPayment-wrap .totalPayment .price del { display: inline-block; } .totalPayment-wrap .totalPayment .price span { display: inline-block; word-break: break-word; } .totalPayment-wrap .totalPayment .note { margin-top: 10px; font-size: 12px; font-weight: 400; opacity: 0.6; } /* 상품 상세 페이지 */ .product-flex-wrap { display: flex; padding-top: 45px; } .product-flex-wrap .container { display: flex; align-items: flex-start; max-width: 1320px; } .product-flex-wrap .product-le { width: calc(100% - 440px); } @media screen and (max-width: 1280px) { .product-flex-wrap { padding: unset; } .product-flex-wrap .container { padding: unset; } .product-flex-wrap .product-le { width: 100%; max-width: unset; } } /* 상품상세 슬라이드 */ .product-img-slide-section { display: block; max-width: 100%; padding-bottom: 24px; border-bottom: 1px solid #00000033; } .product-img-slide-section .product-img-swiper { display: block; position: relative; overflow: hidden; } .product-img-swiper-wrap { position: relative; } .product-img-swiper-wrap .label-list { position: absolute; display: flex; right: 24px; top: 24px; gap: 16px; flex-direction: column; z-index: 10; } .product-img-swiper .swiper-slide { position: relative; padding-top: 66.67%; } .product-img-swiper .swiper-slide .product-img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .product-img-swiper .swiper-slide .product-img .bg-img { width: 100%; height: 100%; border-radius: 16px; overflow: hidden; } .product-img-swiper .swiper-slide .product-img .bg-img img { width: 100%; height: 100%; object-fit: cover; } .product-img-swiper .swiper-button-wrap-type1 { right: 24px; left: unset; bottom: 24px; } .product-img-slide-section .mb-product { display: none; } .product-img-slide-section .hashtag-list-type2 { margin-top: 24px; } @media screen and (max-width: 1280px) { .product-img-swiper .swiper-slide .product-img .bg-img { border-radius: unset; } .product-img-swiper-wrap .label-list { width: 50px; gap: 10px; } .product-img-slide-section .mb-product { display: flex; padding: 20px; flex-direction: column; gap: 20px; border-bottom: 1px solid #00000033 ; } .product-img-slide-section .mb-product .products-type1 .title-wrap p { font-family: 'OneStoreMobileGothicTitleFont', sans-serif; font-size: 20px; white-space: normal; overflow: visible; text-overflow: clip; } .product-img-slide-section .hashtag-list-type2 { padding: 0 20px; } .product-img-slide-section.no-hashtag { border-bottom: none; } } .product-info-wrap { position: relative; width: 100%; padding-top: 24px; } .product-info-wrap .product-info-tab-menu-wrap { position: sticky; width: 100%; top: 90px; display: flex; align-items: center; background-color: #fff; z-index: 3; padding-bottom: 4px; } .product-info-wrap .product-info-tab-menu-wrap .tab-scroll-container { flex: 1; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .product-info-wrap .product-info-tab-menu-wrap .tab-scroll-container::-webkit-scrollbar { display: none; } .product-info-wrap .product-info-tab-menu-wrap .tab-arrow { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; cursor: pointer; flex-shrink: 0; color: #666; font-size: 14px; } .product-info-wrap .product-info-tab-menu-wrap .tab-arrow i { font-size: 16px; } .product-info-wrap .product-info-tab-menu-wrap .tab-arrow:hover { background: #f5f5f5; } .product-info-wrap .product-info-tab-menu-wrap .tab-arrow-left { margin-right: 10px; } .product-info-wrap .product-info-tab-menu-wrap .tab-arrow-right { margin-left: 10px; } .product-info-wrap .product-info-tab-menu-wrap .tab { min-width: fit-content; display: flex; align-items: center; gap: 8px; padding: 0 20px; height: 44px; background-color: #F5F5F5; color: #00000099; font-weight: 500; border-radius: 8px; white-space: nowrap; } .product-info-wrap .product-info-tab-menu-wrap .tab img { max-width: 16px; filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%) opacity(0.6);} .product-info-wrap .product-info-tab-menu-wrap .tab.active { background-color: #fff; border: 2px solid #2A009C; color: #2A009C; justify-content: center; } .product-info-wrap .product-info-tab-menu-wrap .tab.active img { filter: unset; } @media screen and (max-width: 1280px) { .product-info-wrap { padding: 24px 0px; } .product-info-wrap .product-info-tab-menu-wrap { top: 50px; padding: 0 10px; } .product-info-wrap .product-info-tab-menu-wrap .tab-scroll-container { gap: 5px; padding: 0 10px; } .product-info-wrap .product-info-tab-menu-wrap .tab-arrow { width: 28px; height: 28px; font-size: 12px; } .product-info-wrap .product-info-tab-menu-wrap .tab-arrow-left { margin-right: 5px; } .product-info-wrap .product-info-tab-menu-wrap .tab-arrow-right { margin-left: 5px; } .product-info-wrap .product-info-tab-menu-wrap .tab { height: 35px; padding: 0 14px; font-size: 14px; } } /* 상품 상세 정보 */ .product-detail-info-section { padding: 32px 0; border-bottom: 1px solid #00000033; } .product-detail-info-section .product-detail-info { width: 100%; display: block; padding-bottom: 32px; } .product-detail-info-section .add-product-detail-btn { display: flex; justify-content: center; align-items: center; width: 100%; height: 46px; border-radius: 10px; border: 1px solid #0000001A; color: #00000099; font-weight: 500; } @media screen and (max-width: 1280px) { .product-detail-info-section { padding: 24px 20px; border-bottom: 4px solid #00000033; } .product-detail-info-section .add-product-detail-btn { height: 34px; font-size: 14px; } } /* 상품 기본 정보 */ .product-basic-info-section { padding: 32px 0; } @media screen and (max-width: 1280px) { .product-basic-info-section { padding: 24px 20px; } } /* 상품 여행 일정 */ .itinerary-section { padding: 32px 0; border-bottom: 1px solid #00000033; display: flex; } .itinerary-section .itinerary-day-tab { display: flex; flex-direction: column; width: 240px; min-width: 240px; padding: 8px 0; } .itinerary-section .itinerary-day-tab .day-tab { display: flex; height: 40px; width: 100%; align-items: center; padding: 0 16px; font-family: 'OneStoreMobileGothicTitleFont', sans-serif; border-radius: 8px 0 0 8px; color: #00000066; } .itinerary-section .itinerary-day-tab .day-tab.active { background: linear-gradient(90deg, rgba(42, 0, 156, 0.1) 0%, rgba(42, 0, 156, 0) 100%); color: #2A009C; border: 1px solid #6A1B9A; border-right: unset; position: relative; } .itinerary-section .itinerary-day-tab .day-tab.active::after { content: ''; width: 2px; height: calc(100%); display: block; background-color: #fff; right: -2px; position: absolute; } .itinerary-section .itinerary-day-tab .day-tab.active::before { content: ''; width: 2px; height: calc(100% + 4px); display: block; background-color: #6A1B9A; right: -2px; position: absolute; } .itinerary-section .itinerary-content-wrap { width: calc(100% - 240px); padding: 16px; border-radius: 8px; border: 1px solid #6A1B9A; } .itinerary-section .itinerary-content-wrap .itinerary-content { margin-bottom: 20px; } .itinerary-section .itinerary-content-wrap .itinerary-content:last-child { margin-bottom: unset; } .itinerary-content .itinerary-content-title { font-size: 20px; font-weight: bold; margin-bottom: 8px; } .itinerary-content .itinerary-img-list-wrap { width: 100%; position: relative; } .itinerary-content .itinerary-img-list-wrap .itinerary-img-list { display: flex; gap: 16px; overflow: auto; padding-bottom: 8px; position: relative; padding-right: 15%; margin-bottom: 8px; } .itinerary-content .itinerary-img-list-wrap .itinerary-img-list .itinerary-img { min-width: 192px; width: 100%; position: relative; } .itinerary-content .itinerary-img-list-wrap .itinerary-img-list .itinerary-img::before { display: block; width: 100%; padding-top: 83.33%; content: ''; } .itinerary-content .itinerary-img-list-wrap .itinerary-img-list .itinerary-img img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; } .itinerary-content .meal-box { width: 100%; padding: 10px 15px; display: flex; align-items: center; background-color: #6A1B9A0D; margin-top: 16px; border-radius: 4px; } .itinerary-content .meal-box img { width: 14px; } .itinerary-content .meal-box p { padding-left: 10px; color: #6A1B9A; font-size: 14px; font-weight: 500; } .itinerary-region-group { margin-bottom: 20px; } .itinerary-region-group:last-child { margin-bottom: 0; } .itinerary-region { display: flex; align-items: center; gap: 6px; color: #6A1B9A; font-size: 15px; font-weight: 600; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px dashed #6A1B9A33; } .itinerary-region svg { color: #6A1B9A; flex-shrink: 0; } .itinerary-content-with-marker { display: flex; gap: 10px; } .itinerary-content-with-marker .itinerary-marker { padding-top: 5px; flex-shrink: 0; color: #6A1B9A; } .itinerary-content-with-marker .itinerary-content-body { flex: 1; min-width: 0; } /* 타임라인 스타일 */ .itinerary-timeline { position: relative; padding-left: 0; } .itinerary-timeline-item { display: flex; position: relative; min-height: 60px; } .itinerary-timeline-marker { display: flex; flex-direction: column; align-items: center; width: 50px; flex-shrink: 0; position: relative; } .itinerary-timeline-marker .itinerary-dot { width: 14px; height: 14px; background: #4492e0; border: 3px solid #A8D8F0; border-radius: 50%; z-index: 2; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(168, 216, 240, 0.3); } .itinerary-timeline-marker .itinerary-line { width: 4px; background: #ececec; flex: 1; min-height: 20px; } .itinerary-timeline-region .itinerary-timeline-marker .itinerary-line { margin-top: 0; } .itinerary-region-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; z-index: 2; color: #4492e0; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .itinerary-region-icon i { font-size: 24px; } .itinerary-region-text { font-size: 20px; font-weight: 600; color: #6A1B9A; min-height: 44px; font-weight: bold; display: flex; align-items: center; } .itinerary-timeline-content { width: calc(100% - 50px); padding-bottom: 20px; padding-left: 12px; } .itinerary-timeline-content .itinerary-content-title { font-size: 18px; font-weight: bold; margin-bottom: 8px; color: #333; padding-top: 0; } .itinerary-timeline-content .itinerary-img-list-wrap { margin-bottom: 12px; } .itinerary-timeline-content .itinerary-img-list { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; flex-wrap: wrap; } .itinerary-timeline-content .itinerary-img { min-width: 160px; max-width: 200px; aspect-ratio: 1/1; border-radius: 8px; overflow: hidden; } .itinerary-timeline-content .itinerary-img img { width: 100%; height: 100%; object-fit: cover; } .itinerary-timeline-content .meal-box { width: 100%; padding: 10px 15px; display: flex; align-items: center; background-color: #6A1B9A0D; margin-top: 12px; border-radius: 4px; } .itinerary-timeline-content .meal-box img { width: 14px; } .itinerary-timeline-content .meal-box p { padding-left: 10px; color: #6A1B9A; font-size: 14px; font-weight: 500; } @media screen and (max-width: 1280px) { .itinerary-section { padding: 24px 0; flex-direction: column; border-bottom: 4px solid #00000033; } .itinerary-section .itinerary-day-tab { padding: 0 20px; width: 100%; min-width: unset; margin-bottom: 20px; flex-direction: unset; gap: 20px; border-bottom: 1px solid #0000001A; overflow: auto; } .itinerary-section .itinerary-day-tab .day-tab { padding: unset; width: unset; font-size:12px; border-radius: unset; min-width: fit-content; } .itinerary-section .itinerary-day-tab .day-tab.active { background: unset; color: #2A009C; border: unset; border-bottom: 2px solid #2A009C; } .itinerary-section .itinerary-day-tab .day-tab.active::before { display: none; } .itinerary-section .itinerary-content-wrap { padding: 0 20px; border: unset; width: 100%; } } /* 상품 호텔 */ .hotel-section { padding: 24px 0; border-bottom: 1px solid #00000033; } @media screen and (max-width: 1280px) { .hotel-section { padding: 24px 20px; border-bottom: 4px solid #00000033; } } .hotel-section h2 { font-family: 'OneStoreMobileGothicTitleFont', sans-serif; font-size: 20px; margin-bottom: 16px; } .hotel-section .hotel-wrap { padding: 24px 0; border-bottom: 1px dashed #00000033; } .hotel-section .hotel-wrap .tab-menu-type2 { padding-bottom: 24px; border-bottom: 1px solid #0000001A; } @media screen and (max-width: 1280px) { /* .hotel-section .hotel-wrap { padding-top: unset; } */ } .hotel-content-wrap { display: flex; padding-top: 24px; } .hotel-content-imgs { width: 240px; } .hotel-content-imgs .hotel-content-swiper { position: relative; overflow: hidden; } .hotel-content-imgs .swiper-slide { position: relative; } .hotel-content-imgs .swiper-slide::before { content: ''; width: 100%; padding-top: 100%; display: block; } .hotel-content-imgs .swiper-slide .hotel-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 8px; overflow: hidden; } .hotel-content-imgs .swiper-slide .hotel-img img { width: 100%; height: 100%; object-fit: cover; } .zoom-btn { position: absolute; right: 10px; top: 10px; width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; z-index: 2; background-color: #00000099; border-radius: 4px; } .zoom-btn i { color: #fff; } .hotel-content-imgs .swiper-button-wrap-type1 { left: unset; right: 10px; bottom: 10px; } .hotel-content-box { padding-left: 32px; width: calc(100% - 240px); } .hotel-content-box .hotel-title { font-weight: 700; font-size: 20px; margin-bottom: 20px; } .hotel-content-box .hotel-content { font-size: 14px; opacity: 0.6; line-height: 1.6; margin-bottom: 32px; } @media screen and (max-width: 1280px) { .hotel-content-wrap { flex-direction: column; } .hotel-content-imgs { width: 100%; max-width: 400px; margin-bottom: 20px; } .hotel-content-box { padding: unset; width: 100%; } } .hotel-section .room-info-wrap { padding: 24px 0; border-bottom: 1px dashed #00000033; } .hotel-section .room-info-wrap .tab-menu-type2 { margin-bottom: 32px; } .room-info-wrap .room-info-content-box { display: block; } .room-info-wrap .room-info-content-swiper { overflow: hidden; position: relative; } .room-info-wrap .room-info-content-swiper .swiper-slide { position: relative; } .room-info-wrap .room-info-content-swiper .swiper-slide::before { content: ''; width: 100%; display: block; padding-top: 47.62%; } .room-info-wrap .room-info-content-swiper .swiper-slide .room-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; border-radius: 8px; } .room-info-wrap .room-info-content-swiper .swiper-button-wrap-type1 { right: 16px; left: unset; bottom: 10px; } .room-info-wrap .room-info-content { padding-top: 32px; width: 100%; } .room-info-wrap .room-info-content .room-title { font-weight: bold; font-size: 24px; line-height: 1.2; margin-bottom: 16px; word-break: keep-all; } .room-info-wrap .room-info-content .room-info { font-size: 14px; line-height: 1.4; font-weight: 400; } .room-info-wrap .room-info-flex { display: flex; gap: 40px; } .room-add-btn-wrap { padding-top: 32px; width: 190px; min-width: 190px; } .room-add-btn-wrap .room-add-options { display: flex; gap: 12px; flex-direction: column; margin-bottom: 24px; } .room-add-btn-wrap .room-add-options .room-add-option { display: flex; justify-content: space-between; align-items: center; } .room-add-btn-wrap .btn { width: 100%; height: 40px; border-radius: 8px; } @media screen and (max-width: 1280px) { .room-info-wrap .room-info-content { padding-top: 20px; } .room-info-wrap .room-info-content .room-title { font-size: 20px; } .room-info-wrap .room-info-flex { flex-direction: column; gap: 0; } .room-add-btn-wrap { width: 100%; } } .hotel-section .facilities-wrap { padding-top: 24px; padding-bottom: 24px; } .facilities-list-wrap { width: 100%; position: relative; } .facilities-list-wrap::after { content: ''; position: absolute; top: 0; right: 0; width: 15%; height: 100%; background: linear-gradient(270deg,rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%); pointer-events: none; } .facilities-list { display: flex; gap: 16px; overflow: auto; padding-bottom: 20px; position: relative; padding-right: 15%; } .facility-item { display: block; min-width: 160px; width: 160px; } .facility-item .facility-img { width: 100%; position: relative; margin-bottom: 20px; } .facility-item .facility-img::before { content: ''; padding-top: 100%; width: 100%; display: block; border-radius: 8px; overflow: hidden; } .facility-item .facility-img img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .facility-item .facility-title { font-weight: 700; margin-bottom: 12px; } .facility-item ul { display: block; } .facility-item ul li { font-size: 14px; line-height: 1.6; } .golf-info-section { padding: 0 20px; } .hotel-section .amenities-wrap { padding: 24px 0; border-top: 1px dashed #00000033; } .amenities-list { display: flex; gap: 10px; flex-wrap: wrap; } .amenities-list .amenity-item { width: calc((100% - 30px) / 4); display: flex; align-items: center; padding: 10px 16px; border-radius: 8px; border: 1px solid #0000001A; gap: 8px; } .amenities-list .amenity-item img { width: 24px; } @media screen and (max-width: 1280px) { .amenities-list { gap: 5px; } .amenities-list .amenity-item { width: calc((100% - 5px) / 2); padding: 5px 12px; } .amenities-list .amenity-item p { font-size: 13px; line-height: 1.6; } .amenities-list .amenity-item img { width: 16px; } } .attraction-section { padding: 24px 0; } .attraction-section .attraction-list { display: flex; flex-direction: column; } .attraction-section .attraction-list .hotel-content-wrap { padding-bottom: 24px; border-bottom: 1px solid #00000033; } .attraction-list .hotel-content-imgs .swiper-slide::before { padding-top: 100%; } @media screen and (max-width: 1280px) { .attraction-section { padding: 24px 20px; } } .note-section { padding: 24px 0; border-bottom: 1px solid #00000033; } .note-list { display: flex; gap: 24px; flex-direction: column; } .note-list .note-item { display: block; } .note-list .note-item .note-title { font-weight: 600; margin-bottom: 12px; } .note-list .note-item ul { display: block; } .note-list .note-item ul li { list-style: inside; font-size: 14px; line-height: 1.4; font-weight: 500; opacity: 0.6; } .note-list .note-item .note-content { font-size: 14px; line-height: 1.4; font-weight: 500; opacity: 0.6; } @media screen and (max-width: 1280px) { .note-section { padding: 24px 20px; border-bottom: 4px solid #00000033; } .note-list { gap: 20px; } .note-list .note-item .note-title { font-size: 14px; } .note-list .note-item ul li { font-size: 13px; } .note-list .note-item .note-content { font-size: 13px; } } .scorecard-section { padding: 24px 0; } .review-section { padding: 24px 0; /* border-bottom: 1px solid #00000033; */ } .review-list-type1 { display: flex; flex-direction: column; border-bottom: 1px solid #00000033; } .review-item-type1 { display: block; padding: 24px 0; border-bottom: 1px dashed #00000033; } .review-item-type1:last-child { border: unset; } .review-item-type1 .user-info { display: flex; opacity: 0.6; gap: 8px; align-items: center; margin-bottom: 12px; } .review-item-type1 .user-info p { font-weight: 400; font-size: 14px; } .review-item-type1 .user-info .gap { width: 2px; height: 2px; border-radius: 100%; background-color: #000; } .review-item-type1 .review-rating-wrap { display: flex; align-items: center; gap: 5px; margin-bottom: 24px; } .review-item-type1 .review-rating-wrap .review-rating { position: relative; width: 105px; background-image: url("/images/rating.png"); } .review-item-type1 .review-rating-wrap .review-rating::before { content: ''; width: 100%; display: block; padding-top: 15.24%; } .review-item-type1 .review-rating-wrap .review-rating .review-rating-star { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url("/images/rating-on.png"); } .review-item-type1 .review-rating-wrap .score { color: #6A1B9A; font-weight: 500; font-size: 14px; } .review-item-type1 .review-txt { margin-bottom: 24px; } .review-item-type1 .review-txt .review-title { font-weight: 600; margin-bottom: 12px; } .review-item-type1 .review-txt .review-content { font-size: 14px; font-weight: 500; line-height: 1.6; white-space: pre-line; } .review-description-wrap { width: 100%; } .review-toggle-btn { margin-top: 8px; padding: 0; background: none; border: none; color: #6A1B9A; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; } .review-toggle-btn:hover { text-decoration: underline; } /* 리뷰 페이지 연결 배너 */ .review-banner-section { padding: 32px 0; margin-bottom: 80px; } .review-banner-section .container { display: flex; flex-direction: column; gap: 16px; } .review-banner-link { display: block; position: relative; border-radius: 12px; overflow: hidden; transition: transform .15s; } .review-banner-link:hover { transform: translateY(-2px); } .review-banner-img { width: 100%; aspect-ratio: 1200 / 240; overflow: hidden; background: #f5f5f5; } .review-banner-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .review-banner-title { position: absolute; left: 32px; bottom: 24px; color: #fff; font-size: 22px; font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,0.4); margin: 0; } @media screen and (max-width: 768px) { .review-banner-section { padding: 20px 0; margin-bottom: 40px; } .review-banner-img { aspect-ratio: unset; height: 160px; } .review-banner-title { left: 16px; bottom: 12px; font-size: 16px; } } .review-item-type1 .review-imgs-wrap { position: relative; display: block; width: 100%; } .review-item-type1 .review-imgs-wrap::after { content: ''; position: absolute; top: 0; right: 0; width: 15%; height: 100%; background: linear-gradient(270deg,rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%); pointer-events: none; } .review-item-type1 .review-imgs-wrap .review-imgs { overflow: auto; width: 100%; display: flex; gap: 12px; padding-right: 15%; } .review-item-type1 .review-imgs-wrap .review-imgs .review-img { width: 120px; min-width: 120px; height: 120px; display: block; border-radius: 8px; overflow: hidden; } .review-item-type1 .review-imgs-wrap .review-imgs .review-img img { width: 100%; height: 100%; object-fit: cover; } @media screen and (max-width: 1280px) { .review-section { padding: 24px 20px; } } .similar-products-section { padding: 24px 0; padding-bottom: 80px; } .similar-products-section-title { margin-bottom: 16px; font-size: 20px; font-weight: bold; } @media screen and (max-width: 1280px) { .similar-products-section { padding: 24px 20px; } } /* 상품 */ .product-code { margin-bottom: 16px; opacity: 0.4; font-weight: 400; font-size: 12px; } .product-flex-wrap .booking-summary { width: 440px; padding-left: 40px; position: sticky; top: 100px; overflow: auto; max-height: calc(100vh - 135px); } .product-flex-wrap .booking-summary .booking-summary-open-btn-wrap { display: none; } .booking-summary .products-type1 { padding-bottom: 24px; border-bottom: 1px solid #00000033; } .booking-summary .products-type1 .title-wrap { margin-bottom: 16px; } .booking-summary .products-type1 .title-wrap p { font-size: 24px; font-family: 'OneStoreMobileGothicTitleFont', sans-serif; word-break: keep-all; white-space: normal; overflow: visible; text-overflow: clip; } .booking-summary .products-type1 .sub-title-wrap p { white-space: unset; overflow: unset; text-overflow: unset; } .booking-summary .totalPayment-wrap { } .booking-summary .btn-wrap { display: flex; gap: 8px; } .booking-summary .btn-wrap .btn { width: 100%; } .booking-summary .btn-wrap .schedule-open-btn { display: none; } @media screen and (max-width: 1280px) { .product-flex-wrap .booking-summary { display: flex; flex-direction: column; position: fixed; top: unset; left: 0; bottom: 0; background-color: #fff; z-index: 999; width: 100vw; padding: unset; border-radius: 20px 20px 0 0; max-height: 100vh; max-height: 100dvh; box-shadow: 0px -4px 16px 0px #00000029; } .product-flex-wrap .booking-summary .booking-summary-open-btn-wrap { display: flex; justify-content: center; align-items: center; width: 100%; height: 36px; flex-shrink: 0; } .product-flex-wrap .booking-summary .booking-summary-open-btn-wrap .booking-summary-open-btn { width: 80px; height: 4px; background-color: #00000066; border-radius: 2px; } .product-flex-wrap .booking-summary .booking-summary-box { padding: 0; height: 0; flex: 0 0 auto; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; min-height: 0; } .booking-summary .btn-wrap { position: relative; left: auto; right: auto; bottom: auto; background-color: #fff; height: 64px; gap: unset; flex-shrink: 0; } .booking-summary .btn-wrap .btn { width: 100%; height: 100%; border-radius: unset; } .booking-summary .btn-wrap .schedule-open-btn { display: inline-flex; border-right: none; } .product-flex-wrap .booking-summary.open .booking-summary-box { height: auto; flex: 1 1 auto; padding: 20px 20px 24px; } } .product-page-mb-btns { display: none; position: fixed; bottom: 0; left: 0; background-color: #fff; width: 100%; z-index: 9; padding: 20px; } .product-page-mb-btns .btn-wrap { display: flex; gap: 9px; } .product-page-mb-btns .btn { width: 100%; height: 48px; font-size: 16px; } @media screen and (max-width: 1280px) { .product-page-mb-btns { display: block; } } /* 호텔상품상세 */ .hotel-product-page .hotel-section { padding: unset; } .hotel-product-page .hotel-content-wrap { padding: unset; } .hotel-product-page .hotel-content-box { padding: unset; } @media screen and (max-width: 1280px) { .hotel-product-page .hotel-section { padding: 24px 20px; } } /* 골프상품상세 */ .golf-reservation-info-section { padding: 24px 0; border-bottom: 1px solid #00000033; } .golf-reservation-info-box { display: flex; gap: 40px; border: 1px solid #00000033; padding: 24px; border-radius: 8px; } .golf-reservation-info-box .calendar-wrap { width: 336px; min-width: 336px; } .golf-reservation-info-box .golf-reservation-option-box { width: 100%; padding-top: 16px; border-top: 1px solid #000; } /* .golf-reservation-info-box .option-box { display: none; } */ .golf-reservation-info-box .option-box .btn { width: 100%; height: 40px; } .golf-reservation-info-box .tee-time-box { display: block; } .golf-reservation-info-box .tee-time-box > .btn { width: 100%; margin-top: 4px; } .golf-reservation-info-box .tee-time-box .tee-time-box-title-wrap { display: flex; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px dashed #00000033; } .golf-reservation-info-box .tee-time-box .tee-time-box-title { display: flex; gap: 10px; align-items: center; } .golf-reservation-info-box .tee-time-box .tee-time-box-title p { font-weight: bold; } .golf-reservation-info-box .tee-time-box .tee-time-box-title span { display: block; width: 4px; height: 4px; border-radius: 1px; background-color: #D9D9D9; } .golf-reservation-info-box .tee-time-box .tee-time-box-btn { display: flex; gap: 8px; font-weight: 500; } .golf-reservation-info-box .tee-time-box .day-part { padding: 16px 0; } @media screen and (max-width: 880px) { .golf-reservation-info-box { flex-direction: column; gap: 24px; } .golf-reservation-info-box .calendar-wrap { width: 100%; min-width: unset; } } .tee-time-list-type1 { display: flex; gap: 8px; flex-direction: column; overflow: auto; max-height: 320px; position: relative; } .tee-time-item-type1 { display: flex; justify-content: space-between; border: 2px solid #0000001A; border-radius: 8px; align-items: center; padding: 10px 16px; cursor: pointer; } .tee-time-item-type1.active { border: 2px solid #6A1B9A; } .tee-time-item-type1 .tee-time-title { display: flex; gap: 8px; } .tee-time-item-type1 .tee-time-title .time { font-weight: bold; font-size: 14px; } .tee-time-item-type1 .tee-time-title .sub-title { font-size: 14px; opacity: 0.6; } .tee-time-item-type1 .price { font-weight: bold; } .tee-time-item-type1.active .tee-time-title .time { color: #6A1B9A; } .tee-time-item-type1.active .tee-time-title .sub-title { color: #6A1B9A; opacity: 1; } .tee-time-item-type1.active .price { color: #6A1B9A; } .tee-time-item-type1:hover { border: 2px solid #6A1B9A; } .tee-time-item-type1:hover .tee-time-title .time { color: #6A1B9A; } .tee-time-item-type1:hover .tee-time-title .sub-title { color: #6A1B9A; opacity: 1; } .tee-time-item-type1:hover .price { color: #6A1B9A; } /* 예약페이지 */ .booking-page { padding-top: 70px; padding-bottom: 40px; } .booking-page .booking-flex-wrap { display: flex; gap: 80px; } .booking-page .booking-flex-wrap .booking-summary { width: 400px; min-width: 400px; } .booking-page .booking-flex-wrap .booking-form-wrap { width: 100%; } .booking-summary .products-type1 .img-wrap { margin-top: 32px; margin-bottom: unset; } .booking-summary .products-type1 .img-wrap::before { padding-top: 66.75%; } .booking-form-wrap .booking-form-title { font-weight: bold; font-size: 32px; margin-bottom: 40px; display: flex; justify-content: space-between; align-items: center; } .booking-form-wrap .booking-form-title .btn { height: 36px; padding: 0 16px; border-radius: 8px; } .booking-form-box { padding-bottom: 40px; border-bottom: 1px solid #00000033; } .booking-form-box.flex { display: flex; flex-wrap: unset; justify-content: space-between; align-items: flex-start; } .booking-form-box .label-content-wrap-type2 > ul { padding: unset; gap: 16px; } .booking-form-box .price-detail-type1 { width: 400px; } @media screen and (max-width: 1280px) { .booking-page { padding-top: 24px; } .booking-page .booking-flex-wrap { flex-direction: column; gap: 40px; } .booking-page .booking-flex-wrap .booking-summary { width: 100%; min-width: unset; } .booking-form-wrap .booking-form-title { font-size: 24px; margin-bottom: 24px; } .booking-form-box.flex { flex-direction: column; } .booking-form-box .price-detail-type1 { width: 100%; } } /* 여행자 */ .traveler-box { display: block; margin-bottom: 40px; } .traveler-box:last-child { margin-bottom: unset; } .traveler-box .traveler-box-top { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; } .traveler-box .traveler-box-top .traveler-num { height: 26px; padding: 0 16px; background-color: #6A1B9A14; color: #6A1B9A; display: flex; justify-content: center; align-items: center; border-radius: 8px; font-weight: bold; white-space: nowrap; } .traveler-box .traveler-box-top .traveler-represent { height: 26px; padding: 0 12px; display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, #7B24AB, #6A1B9A); color: #fff; border-radius: 8px; font-size: 12px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; box-shadow: 0 2px 6px #6A1B9A33; } .traveler-box .traveler-box-top .traveler-represent::before { content: '\2605'; font-size: 11px; line-height: 1; } .traveler-box .traveler-box-top::after { content: ''; flex: 1; height: 0; border-bottom: 1px dashed #6A1B9A80; } /* 예약 결과 페이지 */ .booking-page .booking-flex-wrap .booking-result-box { width: 100%; } .booking-result-box-wrap { width: 100%; display: flex; flex-direction: column; gap: 40px; } .booking-result-box .booking-result-icon { width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; background-color: #6A1B9A1F; border-radius: 100%; font-size: 40px; } .booking-result-box .booking-result-icon i { font-size: 40px; color: #6A1B9A; } .booking-result-box .booking-result-icon.fail { background-color: #EA000042; color: #fff; } .booking-result-box .booking-result-title { margin-top: 40px; font-weight: bold; font-size: 40px; line-height: 1.4; } .booking-result-box .booking-result-title.fail { color: #EA0000; } .booking-result-box .booking-result-title span { font-weight: unset; color: #6A1B9A; } .booking-result-box .booking-result-sub { font-weight: 500; font-size: 18px; line-height: 1.6; color: #00000099; margin-top: 24px; } .booking-result-box .booking-result-txt-wrap { display: block; margin-top: 16px; } .booking-result-box .booking-result-txt-wrap img { width: 15px; margin-bottom: 16px; } .booking-result-box .booking-result-txt-wrap .txt { font-size: 14px; font-weight: 400; color: #6A1B9A; } .booking-result-box .btn-wrap { margin-top: 40px; gap: 24px; display: flex; } .booking-result-box .btn-wrap .btn { width: 240px; } .booking-result-box .bankAccountInfo-type1 { margin-top: 24px; } @media screen and (max-width: 1280px) { .booking-result-box-wrap { order: 1; } .booking-result-box .booking-result-icon { width: 40px; height: 40px; } .booking-result-box .booking-result-icon i { font-size: 20px; } .booking-result-box .booking-result-title { margin-top: 24px; font-size: 24px; margin-top: 16px; } .booking-result-box .booking-result-sub { font-size: 14px; margin-top: 8px; } .booking-result-box .booking-result-txt-wrap .txt { font-size: 12px; } .booking-result-box .btn-wrap { gap: 8px; max-width: 100%; } .booking-result-box .btn-wrap .btn { width: 140px; font-size: 12px; max-width: 100%; height: 40px; } .booking-result-box .bankAccountInfo-type1 { margin-top: 8px; } } /* 입금계좌 정보 */ .bankAccountInfo-type1 { width: 400px; padding: 16px 32px; background-color: #F5F5F5; border-radius: 8px; } .bankAccountInfo-type1 .label { color: #00000099; font-weight: 700; margin-bottom: 5px; } .bankAccountInfo-type1 .bankAccountInfo { font-weight: 500; font-size: 18px; line-height: 1.6; } @media screen and (max-width: 1280px) { .booking-result-box .bankAccountInfo-type1 { padding: 16px; } .bankAccountInfo-type1 .bankAccountInfo { font-size: 12px; } } /* 로그인 */ .login-page { margin-top: unset; } .login-page .login-wrap { min-height: 870px; background-image: url("/images/login-bg.png"); background-position: center; background-size: cover; padding-top: calc(90px + 56px); padding-bottom: 56px; position: relative; } .login-page .login-wrap .container { position: relative; z-index: 2; } .login-page .login-wrap::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 120px; background-image: url("/images/login-bg-bg.png"); z-index: 1; } .login-page .login-flex { display: flex; align-items: center; } .login-page .login-flex .login-flex-txt { padding-left: 80px; } .login-page .login-flex .login-flex-txt p { font-family: 'OneStoreMobileGothicTitleFont', sans-serif; color: #fff; line-height: 1.6; font-size: 56px; word-break: keep-all; } @media screen and (max-width: 1080px) { .login-page .login-wrap { padding-top: 74px; min-height: unset; } .login-page .login-flex .login-flex-txt { display: none; } .login-page .login-flex { justify-content: center; } } .login-box { background-color: #fff; box-shadow: 0px 4px 24px 0px #0000001F; padding: 64px 56px; border-radius: 24px; width: 432px; } .login-box .login-logo { display: flex; margin-bottom: 40px; justify-content: center; } .login-box .login-logo img { width: 216px; } .login-box .login-btn-wrap { width: 100%; margin-top: 40px; } .login-box .login-btn-wrap .login-btn { width: 100%; } .login-box .signUp-link { margin-top: 24px; display: flex; gap: 8px; justify-content: center; font-weight: 600; } .login-box .signUp-link a { font-weight: 600; color: #6A1B9A; text-decoration: underline; } .login-box .sns-btns-wrap { display: flex; flex-direction: column; align-items: center; margin-top: 40px; position: relative; } .login-box .sns-btns-wrap .sns-btns-title { display: flex; justify-content: center; margin-bottom: 24px; width: 100%; position: relative; } .login-box .sns-btns-wrap .sns-btns-title p { font-size: 14px; background-color: #fff; position: relative; z-index: 1; padding: 0 10px; color: #00000033; } .login-box .sns-btns-wrap .sns-btns-title::after { content: ''; left: 0; top: 50%; width: 100%; display: block; border-top: 1px dashed #00000033; position: absolute; z-index: 0; } .login-box .sns-btns-wrap .sns-btns { display: flex; gap: 16px; } @media screen and (max-width: 1080px) { .login-box { padding: 40px 20px; border-radius: 8px; } .login-box .signUp-link { font-size: 14px; } } /* 비밀번호 찾기 */ .findPassword-page { margin-top: unset; } .findPassword-page .findPassword-wrap { display: flex; height: 100%; min-height: 870px; background-image: url("/images/login-bg.png"); background-position: center; background-size: cover; padding-top: 90px; padding-bottom: 56px; position: relative; } .findPassword-page .findPassword-wrap .container { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; } .findPassword-page .findPassword-wrap::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 120px; background-image: url("/images/login-bg-bg.png"); z-index: 1; } @media screen and (max-width: 1080px) { .findPassword-page .findPassword-wrap { padding-top: 74px; min-height: unset; } .findPassword-page .findPassword-wrap .popup-box-type1 { border-radius: 8px; } } /* 서브페이지 */ .sub-page-title-wrap { display: flex; padding: 70px 0 80px; } .sub-page-title-wrap p { font-size: 48px; font-family: 'OneStoreMobileGothicTitleFont', sans-serif; } @media screen and (max-width: 1000px) { .sub-page-title-wrap { padding: 40px 0 20px; } .sub-page-title-wrap p { font-size: 24px; } } .sub-page-title-wrap-type2 { display: flex; margin-bottom: 80px; justify-content: center; padding-top: 110px; } .sub-page-title-wrap-type2 .title { font-size: 48px; font-family: 'OneStoreMobileGothicTitleFont', sans-serif; } @media screen and (max-width: 1280px) { .sub-page-title-wrap-type2 { margin-bottom: 40px; padding-top: 40px; } .sub-page-title-wrap-type2 .title { font-size: 24px; } } .list-top-wrap { display: flex; justify-content: space-between; align-items: center; } .list-top-wrap .btn-register { height: 36px; border-radius: 8px; } .tab-menu-type1 { display: flex; gap: 40px; } .tab-menu-type1 .tab { height: 68px; font-size: 20px; font-family: 'OneStoreMobileGothicTitleFont', sans-serif; opacity: 0.2; display: inline-flex; justify-content: center; align-items: center; } .tab-menu-type1 .tab.active { color: #6A1B9A; opacity: 1; border-bottom: 2px solid #6A1B9A; } .tab-menu-type1.mypage-type { padding: 70px 0 80px; flex-wrap: wrap; } .list-top-wrap .tab-menu-type1 { min-width: fit-content; flex-wrap: wrap; } @media screen and (max-width: 1000px) { .list-top-wrap { flex-direction: column; align-items: flex-start; flex-wrap: wrap; gap: 10px; } .list-top-wrap .btn-register { font-size: 12px; height: 24px; } .tab-menu-type1 { gap: 0 20px; } .tab-menu-type1 .tab { height: 36px; font-size: 14px; } } @media screen and (max-width: 1280px) { .tab-menu-type1.mypage-type { padding: 40px 0 24px; } } .tab-menu-type2 { display: flex; gap: 16px; flex-wrap: wrap; } .tab-menu-type2 .tab { display: inline-flex; justify-content: space-between; padding: 10px 16px; width: calc((100% - 32px) / 3); text-align: left; border-radius: 8px; border: 2px solid #0000001A; flex-direction: column; } .tab-menu-type2 .tab .title { font-weight: bold; font-size: 16px; } .tab-menu-type2 .tab .sub-title { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; } .tab-menu-type2 .tab .sub-title p { font-weight: 400; font-size: 14px; opacity: 0.6; word-break: keep-all;} .tab-menu-type2 .tab .sub-title i { display: none; } .tab-menu-type2 .tab.active { border: 2px solid #6A1B9A; } .tab-menu-type2 .tab.active .title { color: #6A1B9A; } .tab-menu-type2 .tab.active .sub-title p { opacity: 1; color: #6A1B9A; } .tab-menu-type2 .tab.active .sub-title i { display: block; color: #6A1B9A; font-size: 20px; } @media screen and (max-width: 1280px) { .tab-menu-type2 { gap: 10px 8px; } .tab-menu-type2 .tab { width: calc((100% - 8px) / 2); } .tab-menu-type2 .tab .title { font-size: 16px; } } .state-type1 { color: #00000099; font-weight: bold; } .state-type1.purple { color: #6A1B9A; } .state-type2 { display: flex; gap: 16px; flex-direction: column; align-items: center; } .state-type2 .state-txt { font-size: 24px; font-weight: bold; } .state-type2.waiting .state-txt { color: #00000066; } .state-type2.confirmed .state-txt { color: #6A1B9A; } .state-type2 .btn { font-size: 14px; border: 1px solid #00000033; padding: 0 16px; } .table-wrap-type1 { display: block; } .table-wrap-type1 table { border-bottom: 1px solid #000; border-top: 1px solid #000; } .table-wrap-type1 table .le { text-align: left; } .table-wrap-type1 table th { height: 60px; border-bottom: 1px solid #00000033; padding: 8px 16px; font-size: 18px; font-family: 'OneStoreMobileGothicTitleFont', sans-serif; } .table-wrap-type1 table td { height: 60px; border-bottom: 1px dashed #00000033; padding: 8px 16px; } .table-wrap-type1 table tr:last-child td { border-bottom: unset; } .table-wrap-type1 table td.date { opacity: 0.4; } .table-wrap-type1 table td .num { padding-right: 10px; color: #6A1B9A; font-weight: bold; } .table-wrap-type1 table td.bold { font-weight: bold; } @media screen and (max-width: 1000px) { .table-wrap-type1 table colgroup { display: none; } .table-wrap-type1 table thead { display: none; } .table-wrap-type1 table tbody { display: flex; flex-direction: column; } .table-wrap-type1 table tr { display: flex; width: 100%; border-bottom: 1px dashed #00000033; padding: 16px 8px; flex-direction: column; align-items: flex-start; gap: 4px; } .table-wrap-type1 table td { height: auto; border: unset; padding: unset; } .table-wrap-type1 table td.date { font-size: 14px; } .table-wrap-type1 table td .state-type1 { font-size: 12px; } } .table-wrap-type2 { display: block; overflow: auto; } .table-wrap-type2 table { border-bottom: 1px solid #000; border-top: 1px solid #000; } .table-wrap-type2 table .le { text-align: left; } .table-wrap-type2 table th { height: 60px; border-bottom: 1px solid #00000033; padding: 8px 16px; font-size: 18px; font-family: 'OneStoreMobileGothicTitleFont', sans-serif; } .table-wrap-type2 table td { height: 60px; border-bottom: 1px dashed #00000033; padding: 8px 16px; } .table-wrap-type2 table tr:last-child td { border-bottom: unset; } .table-wrap-type2 table td.date { opacity: 0.4; } .table-wrap-type2 table td .num { padding-right: 10px; color: #6A1B9A; font-weight: bold; } .table-wrap-type2 table td.bold { font-weight: bold; } .table-wrap-type2 table td .link { text-decoration: underline; } @media screen and (max-width: 1280px) { .table-wrap-type2 { overflow: visible; } .table-wrap-type2 table { border: none; display: flex; flex-direction: column; gap: 16px; } .table-wrap-type2 table thead { display: none; } .table-wrap-type2 table tbody { display: flex; flex-direction: column; gap: 16px; } .table-wrap-type2 table tr { display: flex; flex-direction: column; border: 1px solid #E0E0E0; border-radius: 4px; padding: 16px; gap: 12px; background-color: #fff; } .table-wrap-type2 table td { height: auto; border: none; padding: 0; display: flex; flex-direction: column; gap: 4px; text-align: left; } .table-wrap-type2 table td::before { content: attr(data-label); font-weight: bold; font-size: 16px; color: #000; } .table-wrap-type2 table td.bold { font-size: 18px; color: #6A1B9A; } .table-wrap-type2 table td .reservation-box .reservation-flex { gap: 12px; flex-direction: column; } .table-wrap-type2 table td .reservation-box .reservation-flex .img-box { width: 160px; height: 160px; max-width: 100%; } .table-wrap-type2 table td .reservation-box .reservation-flex .txt-box { padding: unset; gap: 8px; } .table-wrap-type2 table td .reservation-box .reservation-flex .txt-box .reservation-title { font-size: 14px; line-height: 1.5; } .table-wrap-type2 table td .state-type2 { flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; } .table-wrap-type2 table td .state-type2 .state-txt { font-size: 16px; } .table-wrap-type2 table td .state-type2 .btn { padding: 8px 16px; height: auto; } } .estimateInquiry-info-list-wrap { display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; } .estimateInquiry-info-list { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .estimateInquiry-info-list .lock-state { font-size: 20px; } .estimateInquiry-info-list .lock-state.xi-unlock-o { opacity: 0.2; } .color-txt-box { height: 24px; display: flex; align-items: center; font-size: 14px; padding: 0 8px; border-radius: 4px; font-weight: 700; border: 1px solid #00000033; background-color: #fff; color: #303030; } .color-txt-box[style*="--color"] { border: 1px solid color-mix(in srgb, var(--color) 8%, transparent); background-color: color-mix(in srgb, var(--color) 8%, transparent); color: var(--color); } .departure-date-wrap { display: flex; gap: 10px; align-items: center; } .departure-date-wrap .departure-date { } /* 상세글 */ .detail-post-wrap-type1 { padding: 70px 0; } .detail-post-wrap-type1 .thumbnail { position: relative; width: 100%; margin-bottom: 32px; } .detail-post-wrap-type1 .thumbnail::before { content: ''; display: block; padding-top: 41.39%; } .detail-post-wrap-type1 .thumbnail img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .detail-post-title-wrap { padding-bottom: 24px; border-bottom: 1px solid #000000; } .detail-post-title-wrap .detail-post-title { font-family: 'OneStoreMobileGothicTitleFont', sans-serif; font-size: 24px; line-height: 1; margin-bottom: 16px; } .detail-post-title-wrap .detail-post-title .num { font-family: unset; color: #6A1B9A; padding-right: 12px; line-height: unset; } .detail-post-info-wrap { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .detail-post-info { display: flex; gap: 16px; align-items: center; } .detail-post-info a , .detail-post-info p { opacity: 0.4; } .detail-post-info a i , .detail-post-info p i { font-size: 20px; } .detail-post-info .gap { width: 3px; height: 3px; border-radius: 100%; background-color: #D9D9D9; } .detail-post-info a.active , .detail-post-info p.active { color: #6A1B9A; opacity: 1; font-weight: bold; } .detail-post-wrap-type1 .detail-post { padding: 24px 0; border-bottom: 1px dashed #00000033 } /* .attachment-view-wrap { padding-top: 32px; } */ .attachment-view-wrap .attachment-title { font-family: 'OneStoreMobileGothicTitleFont', sans-serif; margin-bottom: 16px; } .attachment-lost { display: flex; gap: 12px; flex-wrap: wrap; } .attachment-lost .file-item { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; border-radius: 15px; background-color: #6A1B9A0D; color: #6A1B9AB2; padding: 8px 16px; text-align: center; } @media screen and (max-width: 1000px) { .detail-post-wrap-type1 { padding: 40px 0; } .detail-post-wrap-type1 .thumbnail { margin-bottom: 16px; } .detail-post-title-wrap .detail-post-title { font-size: 16px; line-height: 1.5; } .detail-post-title-wrap .detail-post-title .num { padding-right: 4px; } .detail-post-info { gap: 8px; } .detail-post-info a , .detail-post-info p { font-size: 14px; } .attachment-view-wrap .attachment-lost .file-item { font-size: 12px; } } .attachment-wrap { display: flex; } .attachment-wrap .attachment-btn { width: 130px; min-width: 130px; } .attachment-wrap .attachment-btn button { width: 120px; height: 40px; } .attachment-wrap .attachment-list { width: 100%; display: flex; flex-wrap: wrap; gap: 10px; padding: 9px 20px; background-color: #F5F5F5; border-radius: 8px; } .attachment-wrap .attachment-list .attachment-item { height: 22px; display: flex; justify-content: center; align-items: center; gap: 10px; border: 1px solid #00000033; background-color: #fff; font-size: 14px; padding: 0 8px; border-radius: 4px; } .attachment-wrap .attachment-list .attachment-item i { cursor: pointer; } @media screen and (max-width: 1280px) { .attachment-wrap { flex-direction: column; gap: 8px; } .attachment-wrap .attachment-list { padding: 16px 8px; gap: 8px 4px; } } /* 1:1문의 작성 */ .qna-create-wrap { display: block; padding-top: 70px; padding-bottom: 40px; } .qna-create-wrap .qna-create-title { padding-bottom: 24px; border-bottom: 1px solid #000; } .qna-create-wrap .qna-create-title .title { font-size: 24px; font-family: 'OneStoreMobileGothicTitleFont', sans-serif; display: flex; justify-content: space-between; align-items: flex-end; } .qna-create-wrap .qna-create-title .title .date { font-weight: 400; font-size: 16px; } .qna-create-wrap .qna-create-title .sub-title { font-size: 14px; line-height: 1.4; opacity: 0.6; margin-top: 24px; } .qna-create-wrap .label-content-wrap-type1 { border-bottom: 1px solid #000; } .qna-create-wrap .qna-create-btn-wrap { display: flex; justify-content: flex-end; padding-top: 24px; } .qna-create-wrap .qna-create-btn-wrap .btn { width: 240px; } @media screen and (max-width: 800px) { .qna-create-wrap { padding-top: 40px; } .qna-create-wrap .qna-create-title .title { } .qna-create-wrap .qna-create-title .sub-title { font-size: 12px; } .qna-create-wrap .qna-create-btn-wrap { justify-content: center; } } /* 이벤트 */ .event-list-type1 { display: block; border-top: 1px solid #000; padding: 40px 0; } .event-list-type1 > ul { display: flex; gap: 40px; flex-wrap: wrap; } .event-list-type1 > ul > li { width: calc((100% - 40px) /2); } .event-item-type1 { width: 100%; display: block; } .event-item-type1 .img-wrap { position: relative; width: 100%; border-radius: 16px; overflow: hidden; } .event-item-type1 .img-wrap::before { content: ''; display: block; padding-top: 41.38%; } .event-item-type1 .img-wrap img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .event-item-type1 .title-wrap { padding-top: 16px; } .event-item-type1 .title-wrap .title { margin-bottom: 12px; font-family: 'OneStoreMobileGothicTitleFont', sans-serif; font-size: 18px; word-break: keep-all; } @media screen and (max-width: 1280px) { .event-list-type1 > ul { gap: 40px 10px; } .event-list-type1 > ul > li { width: calc((100% - 10px) /2); } .event-item-type1 .img-wrap { border-radius: 4px; } .event-item-type1 .title-wrap .title { font-size: 14px; } .event-item-type1 .title-wrap .date { font-size: 12px; } } .flex-wrap-type1 { display: flex; position: relative; } .flex-wrap-type1 > .div-le { width: 480px; min-width: 480px; padding-right: 80px; } .flex-wrap-type1 > .div-ri { width: 100%; position: relative; } .flex-wrap-type1 > .div-le .sub-page-title-wrap { padding: unset; } .flex-wrap-type1 > .div-le .uuid-wrap { display: block; margin-top: 40px; margin-bottom: 20px; } .uuid-wrap { display: block; } .uuid-wrap .uuid-wrap-label { margin-bottom: 16px; font-weight: bold; opacity: 0.6; } .uuid-wrap button { padding: 0 24px; height: 40px; display: flex; justify-content: center; align-items: center; background-color: #F5F5F5; gap: 10px; border-radius: 4px; font-family: 'OneStoreMobileGothicTitleFont', sans-serif; font-size: 20px; } .uuid-wrap button img { opacity: 0.4; } @media screen and (max-width: 1280px) { .flex-wrap-type1 { flex-direction: column; gap: 24px; } .flex-wrap-type1 > .div-le { width: 100%; padding-right: unset; min-width: unset; } } /* 내정보 수정 */ .useredit-page { padding-bottom: 80px; } .useredit-page .label-content-wrap-type2 > ul { padding-bottom: 40px; border-bottom: 1px solid #00000033; } .useredit-page .btn-wrap { padding-top: 40px; display: flex; justify-content: center; } .useredit-page .btn-wrap .btn { width: 400px; max-width: 100%; } .useredit-page .btn-withdraw-wrap { position: absolute; right: 0; bottom: calc(100% + 16px); display: flex; gap: 8px; } .useredit-page .btn-withdraw { font-weight: bold; font-size: 14px; opacity: 0.4; text-decoration: underline; } @media screen and (max-width: 1280px) { } /* 작성페이지(회원가입) */ .create-page-wrap { padding-top: 70px; } .create-page-title-wrap { padding-bottom: 40px; } .create-page-title-wrap .title { font-weight: bold; font-size: 32px; } .create-page-wrap .label-content-wrap-type2 > ul { padding: unset; } .create-page-wrap .create-page-btn-wrap { display: flex; gap: 40px; justify-content: center; margin-top: 40px; } .create-page-wrap .create-page-btn-wrap .btn { width: 100%; max-width: 400px; } /* 결과페이지(회원가입) */ .result-page { min-height: unset; } .result-wrap-type1 { display: flex; padding: 52px 0 120px; flex-direction: column; align-items: center; } .result-wrap-type1 .result-img { margin-bottom: 15px; } .result-wrap-type1 .result-title { text-align: center; font-weight: bold; line-height: 1.4; font-size: 40px; word-break: keep-all; } .result-wrap-type1 .result-sub { text-align: center; font-size: 18px; font-weight: 500; color: #00000099; margin-top: 24px; word-break: keep-all; line-height: 1.6; } .result-wrap-type1 .btn-wrap { margin-top: 80px; display: flex; gap: 24px; width: 100%; justify-content: center; } .result-wrap-type1 .btn-wrap .btn { width: 100%; max-width: 240px; } @media screen and (max-width: 800px) { .result-wrap-type1 .result-title { font-size: 18px; } .result-wrap-type1 .result-sub { font-size: 14px; } .result-wrap-type1 .btn-wrap { gap: 8px; } } /* MD 기획전 */ .MDPromotion-list { display: block; } .MDPromotion-list > ul { display: flex; gap: 24px; flex-wrap: wrap; } .MDPromotion-list > ul > li { width: calc((100% - 24px) / 2); } @media screen and (max-width: 880px) { .MDPromotion-list > ul > li { width: 100%; } } /* MD 기획전 상세 */ .MDPromotionDetail-box { background-position: center; background-size: cover; position: relative; } .MDPromotionDetail-box::before { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); } .MDPromotionDetail-box .container { min-height: 973px; display: flex; z-index: 1; position: relative; justify-content: flex-start; align-items: center; padding-top: 24px; padding-bottom: 24px; } .MDPromotionDetail-box .container .scroll-word { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; color: #fff; font-family: 'OneStoreMobileGothicTitleFont', sans-serif; display: flex; gap: 20px; flex-direction: column; align-items: center; } .MDPromotionDetail-box .container .scroll-word .bar { width: 1px; height: 100px; background-color: #fff; } @media screen and (max-width: 1280px) { .MDPromotionDetail-box .container { justify-content: center; min-height: auto; padding: 48px 8px; } .MDPromotionDetail-box .container .scroll-word { display: none; } } .md-item-type3 { width: 400px; max-width: 100%; height: auto; position: relative; border-radius: 16px; background: #000000CC; } .md-item-type3 .md-item { position: relative; width: 100%; height: 100%; border-radius: 16px; position: relative; z-index: 1; display: flex; align-items: flex-end; } .md-item-type3 .md-item .label-list { width: auto; position: absolute; left: 32px; top: -24px; display: flex; gap: 12px; } .md-item-type3 .md-item .label-list img { width: 64px; } .md-item-type3 .md-item .txt-wrap { width: 100%; padding: 64px 32px; display: flex; flex-direction: column; align-items: flex-start; } .md-item-type3 .md-item .txt-wrap .d-day-wrap { display: inline-flex; gap: 5px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.32) 100%); } .md-item-type3 .md-item .txt-wrap .d-day-wrap.imminent { background: linear-gradient(90deg, rgba(255, 0, 0, 0.8) 0%, rgba(253, 24, 24, 0.32) 100%); border: 1px solid; border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 100%); } .md-item-type3 .md-item .txt-wrap .d-day-wrap { height: 26px; padding: 0 10px; align-items: center; border-radius: 4px; margin-bottom: 16px; } .md-item-type3 .md-item .txt-wrap .d-day-wrap::after, .section4 .flex-wrap .flex-ri .md-item .txt-wrap .d-day-wrap::before { width: 2px; height: 2px; border-radius: 100%; background-color: #fff; content: ""; } .md-item-type3 .md-item .txt-wrap .d-day-wrap p { color: #fff; font-size: 14px; } .md-item-type3 .md-item .txt-wrap .d-day-wrap .gap-bar { width: 8px; height: 2px; background: #FFFFFF66; } .md-item-type3 .md-item .txt-wrap .txt-top { line-height: 1.4; font-size: 24px; font-weight: 400; color: #fff; margin-bottom: 16px; } .md-item-type3 .md-item .txt-wrap .txt-bt-wrap { display: flex; gap: 24px; width: 100%; margin-bottom: 16px; } .md-item-type3 .md-item .txt-wrap .txt-bt { font-size: 18px; font-weight: 400; color: #fff; opacity: 0.8; width: 100%; line-height: 1.4; } .md-item-type3 .md-item .txt-wrap .txt-bt * { font-size: 18px; font-weight: 400; color: #fff; opacity: 0.8; width: 100%; line-height: 1.4; } .md-item-type3 .md-item .txt-wrap .views-wrap { display: flex; gap: 8px; color: #fff; } .md-item-type3 .md-item .txt-wrap .views-wrap .label { color: #fff; opacity: 0.7; } .md-item-type3 .md-item .md-swiper { width: 100%; overflow: hidden; margin-top: 31px; } .md-item-type3 .md-item .md-swiper .swiper-slide { display: block; position: relative; cursor: pointer; } .md-item-type3 .md-item .md-swiper .swiper-slide.active { border: 2px solid #A084CA } .md-item-type3 .md-item .md-swiper .bg-img { width: 100%; height: 100%; } .md-item-type3 .md-item .md-swiper .bg-img img { width: 100%; height: 100%; } .md-item-type3 .md-item .swiper-button-wrap-type1 { position: static; margin-top: 24px; } @media screen and (max-width: 1280px) { .md-item-type3 { width: 640px; } .md-item-type3 .md-item .txt-wrap { padding: 64px 20px; } .md-item-type3 .md-item .txt-wrap .txt-top { font-size: 18px; } .md-item-type3 .md-item .txt-wrap .txt-bt { font-size: 14px; } .md-item-type3 .md-item .txt-wrap .txt-bt * { font-size: 14px; } } .MDPromotionDetail-editor-wrap { padding: 72px 0 0; display: flex; flex-direction: column; position: relative; transition: max-height 0.3s ease; } .MDPromotionDetail-editor-wrap.collapsed { max-height: 800px; overflow: hidden; } .MDPromotionDetail-editor-wrap.collapsed::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 100px; background: linear-gradient(to bottom, transparent, white); pointer-events: none; } .add-view { width: 100%; position: relative; margin-top: 24px; padding-bottom: 120px; } .add-view button { width: 100%; height: 46px; background-color: #fff; border: 1px solid #0000001A; cursor: pointer; font-size: 16px; font-weight: 500; transition: all 0.2s; } .add-view button:hover { border-color: #6A1B9A; color: #6A1B9A; } @media screen and (max-width: 1280px) { .MDPromotionDetail-editor-wrap { padding: 40px 0 0; } .MDPromotionDetail-editor-wrap.collapsed { max-height: 300px; } .add-view { padding-bottom: 40px; } } .promotion-product-label { display: flex; align-items: center; gap: 24px; margin-bottom: 40px; } .promotion-product-label .label { font-family: 'OneStoreMobileGothicTitleFont', sans-serif; font-size: 40px; } .promotion-product-label .time-remaining { background-color: #6A1B9A14; padding: 0 16px; height: 40px; border-radius: 20px; display: flex; align-items: center; gap: 12px; } .promotion-product-label .time-remaining p { color: #6A1B9A; font-weight: 500; } .promotion-product-label .time-remaining span { font-weight: bold; color: unset; } .promotion-product-label .time-remaining i { color: #6A1B9A; font-size: 30px; } @media screen and (max-width: 1280px) { .promotion-product-label { margin-bottom: 24px; } .promotion-product-label .label { font-size: 24px; } .promotion-product-label .time-remaining { padding: 0 8px; height: 32px; gap: 4px; } .promotion-product-label .time-remaining i { font-size: 20px; } .promotion-product-label .time-remaining p { font-size: 12px; } } .reservation-box { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 8px; } .reservation-box .reservation-code { display: inline-flex; gap: 8px; border: 1px solid #00000033; padding: 5px 10px; margin-bottom: 8px; } .reservation-box .reservation-code p { font-size: 14px; } .reservation-box .reservation-code .label { opacity: 0.4; } .reservation-box .reservation-flex { display: flex; } .reservation-box .reservation-flex .img-box { min-width: 80px; width: 80px; height: 80px; border-radius: 8px; overflow: hidden; } .reservation-box .reservation-flex .img-box img { width: 100%; height: 100%; } .reservation-box .reservation-flex .txt-box { padding-left: 16px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 4px; } /* 팝업 */ .popup-wrap-type1 { display: none; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 999; background-color: #00000099; } .popup-wrap-type1.open { display: flex; } .popup-box-type1 { position: relative; width: 432px; max-width: 100%; max-height: 100%; background-color: #fff; border-radius: 24px; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; } .popup-close-btn { width: 64px; height: 64px; border-radius: 100%; background-color: #000; display: flex; justify-content: center; align-items: center; position: absolute; top: calc(100% + 24px); left: 50%; transform: translateX(-50%); } .popup-close-btn i { color: #fff; font-size: 32px; } .popup-box-type1 .popup-content { display: block; height: 100%; overflow: auto; } .popup-box-type1 .popup-bt-btn-wrap { display: flex; gap: 16px; margin-top: 24px; } .popup-box-type1 .popup-bt-btn-wrap > button { width: 100%; } .popup-box-type1 .popup-bt-btn-wrap > button.black { background-color: #333; border: unset; } .popup-box-type1 .notification-box { height: 100%; padding: 24px; text-align: center; } .popup-box-type1 .notification-box .top-txt { line-height: 1.6; font-size: 20px; font-family: 'OneStoreMobileGothicTitleFont', sans-serif; margin-bottom: 24px} .popup-box-type1 .notification-box .bt-txt { line-height: 1.6; opacity: 0.6; } .popup-box-type1 .popup-title-wrap { margin-bottom: 24px; } .popup-box-type1 .popup-title-wrap .title { font-size: 20px; font-family: 'OneStoreMobileGothicTitleFont', sans-serif; } .popup-box-type1 .popup-title-wrap .sub-title { font-size: 14px; opacity: 0.6; line-height: 1.4; margin-top: 24px; } @media screen and (max-width: 880px) { .popup-box-type1 { width: 100%; height: 100%; border-radius: unset; padding: 24px; } .popup-box-type1 .notification-box { text-align: left; padding: 40px 0; } .popup-close-btn { left: unset; right: 20px; top: 20px; transform: unset; width: unset; height: unset; background-color: transparent; } .popup-close-btn i { color: #000; font-size: 24px; } .popup-box-type1 .popup-bt-btn-wrap > button { height: 48px; font-size: 16px; } } .popup-box-type2 { position: relative; width: 912px; max-width: 100%; height: auto; max-height: 100%; background-color: #fff; border-radius: 24px; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; } .popup-box-type2 .popup-close-btn { width: 64px; height: 64px; border-radius: 100%; background-color: #000; display: flex; justify-content: center; align-items: center; position: absolute; top: calc(100% + 24px); left: 50%; transform: translateX(-50%); } .popup-box-type2 .popup-close-btn i { color: #fff; font-size: 32px; } .popup-box-type2 .popup-content { display: block; height: 100%; overflow: auto; } .popup-box-type2 .popup-bt-btn-wrap { display: flex; gap: 16px; margin-top: 24px; justify-content: flex-end; } .popup-box-type2 .popup-bt-btn-wrap > button { width: 240px; max-width: 100%; } .popup-box-type2 .popup-bt-btn-wrap > button.black { background-color: #333; border: unset; } .popup-box-type2 .notification-box { height: 100%; padding: 24px; text-align: center; } .popup-box-type2 .notification-box .top-txt { line-height: 1.6; font-size: 20px; font-family: 'OneStoreMobileGothicTitleFont', sans-serif; margin-bottom: 24px} .popup-box-type2 .notification-box .bt-txt { line-height: 1.6; opacity: 0.6; } .popup-box-type2 .popup-title-wrap { margin-bottom: 24px; } .popup-box-type2 .popup-title-wrap .title { font-size: 20px; font-family: 'OneStoreMobileGothicTitleFont', sans-serif; } .popup-box-type2 .popup-title-wrap .sub-title { font-size: 14px; opacity: 0.6; line-height: 1.4; margin-top: 24px; } .popup-box-type2 .label-content-wrap-type2 > ul { border-top: 1px solid #000; border-bottom: 1px solid #000; } @media screen and (max-width: 880px) { .popup-box-type2 { width: 100%; height: 100%; border-radius: unset; padding: 24px; } .popup-box-type2 .notification-box { text-align: left; padding: 40px 0; } .popup-box-type2 .popup-close-btn { left: unset; right: 20px; top: 20px; transform: unset; width: unset; height: unset; background-color: transparent; } .popup-box-type2 .popup-close-btn i { color: #000; font-size: 24px; } .popup-box-type2 .popup-bt-btn-wrap > button { height: 48px; font-size: 16px; } } .star-rating { display: flex; gap: 8px; } .star-rating button { width: 32px; height: 32px; border: none; background: url('/images/star-off.png') no-repeat center; background-size: contain; cursor: pointer; transition: all 0.2s; } .star-rating button.active { background-image: url('/images/star-on.png'); } @media screen and (max-width: 1280px) { .star-rating { gap: 6px; } .star-rating button { width: 28px; height: 28px; } } /* 달력 */ .calendar-type1 { display: block; } .calendar-type1 .calendar-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .calendar-type1 .calendar-top button { border-radius: 4px; display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; border: 4px; border: 1px solid #00000033; background-color: #fff; } .calendar-type1 .calendar-top button i { font-size: 14px; } .calendar-type1 .calendar-top button.disabled { background-color: #F5F5F5; opacity: 0.4px; cursor: unset; border: unset; } .calendar-type1 .calendar-top button.disabled i { color: #00000099; } .calendar-type1 .calendar-top .date { font-family: 'OneStoreMobileGothicTitleFont', sans-serif; } .calendar-type1 .calendar { display: block; } .calendar-type1 .calendar .calendar-weekdays { display: flex; height: 30px; margin-bottom: 16px; } .calendar-type1 .calendar .calendar-weekdays p { display: flex; justify-content: center; align-items: center; width: 100%; font-family: 'OneStoreMobileGothicTitleFont', sans-serif; opacity: 0.4; } .calendar-type1 .calendar .calendar-days { display: flex; flex-wrap: wrap; gap: 8px 0; } .calendar-type1 .calendar .calendar-days p { cursor: pointer; width: calc(100% / 7); height: 48px; display: flex; justify-content: center; align-items: center; font-family: 'OneStoreMobileGothicTitleFont', sans-serif; } .calendar-type1 .calendar .calendar-days p.active { background-color: #6A1B9A; color: #fff; } .calendar-type1 .calendar .calendar-days p.disabled { background-color: #F5F5F5; color: #00000033; cursor: unset; } .calendar-type1 .calendar .calendar-days p.in-range { background-color: #6A1B9A14; } .calendar-type1 .calendar .calendar-days p.has-price { flex-direction: column; height: auto; min-height: 48px; gap: 2px; padding: 4px 2px; box-sizing: border-box; line-height: 1.1; } .calendar-type1 .calendar .calendar-days p.has-price .day-num { font-size: 15px; line-height: 1.2; } .calendar-type1 .calendar .calendar-days p.has-price .day-price { font-size: 10px; font-weight: 500; color: #555; white-space: nowrap; line-height: 1.2; } .calendar-type1 .calendar .calendar-days p.has-price.active .day-num, .calendar-type1 .calendar .calendar-days p.has-price.active .day-price { color: #fff; } .calendar-type1 .calendar .calendar-days p.has-price.disabled .day-num, .calendar-type1 .calendar .calendar-days p.has-price.disabled .day-price { color: #00000033; } /* 일정변경 자유선택형 */ .popup-flexible { width: 760px; max-width: 100%; max-height: 100vh; position: relative; } .popup-flexible .calendar-wrap { padding: 24px; background-color: #fff; border-radius: 8px; display: flex; gap: 40px; margin-bottom: 16px; } .popup-flexible .date-wrap { padding: 12px 16px; background-color: #fff; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; } .popup-flexible .date-wrap .date-box { display: flex; } .popup-flexible .date-wrap .date-box .date-item { display: block; width: 180px; } .popup-flexible .date-wrap .date-box .date-item .label { margin-bottom: 7px; opacity: 0.4; font-weight: 600; font-size: 14px; } .popup-flexible .date-wrap .date-box .date-item .date { font-weight: 400; } .popup-flexible .date-wrap .btn { width: 180px; } @media screen and (max-width: 760px) { .popup-flexible { width: 100%; height: 100%; background-color: #fff; padding-top: 40px; padding-bottom: 24px; overflow: auto; } .popup-flexible .calendar-wrap { flex-direction: column; gap: 20px; margin: unset; } .popup-flexible .date-wrap { flex-direction: column; gap: 24px; } .popup-flexible .date-wrap .date-box { width: 100%; } .popup-flexible .date-wrap .date-box .date-item { width: 100%; } } /* 일정변경 고정형 */ .schedule-list-type1 { display: block; width: 100%; } .schedule-list-wrap { flex: 1; min-width: 0; } .schedule-section-title { font-size: 16px; font-weight: bold; margin-bottom: 12px; } .schedule-item-type1 { padding: 16px 0; display: flex; } .schedule-item-type1 .txt-wrap { display: block; width: 100%; padding-right: 20px; } .schedule-item-type1 .txt-wrap .title { font-weight: bold; line-height: 1.4; } .schedule-item-type1 .txt-wrap .date-box { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; margin-bottom: 12px; } .schedule-item-type1 .txt-wrap .date-box .date-item { width: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .schedule-item-type1 .txt-wrap .date-box .date-item .label { margin-bottom: 0; opacity: 0.4; font-size: 14px; font-weight: 600; } .schedule-item-type1 .txt-wrap .date-box .date-item .date { font-weight: 14px; } .schedule-item-type1 .txt-wrap .date-box .date-item .count-controls { margin-top: 0; margin-left: auto; } .schedule-item-type1 .txt-wrap .price { font-weight: bold; font-size: 14px; } .schedule-item-type1 .btn { width: 80px; min-width: 80px; height: auto; min-height: 80px; align-self: stretch; border: 2px solid; font-size: 18px; font-weight: 600; } .popup-fixed { width: 872px; max-width: 100%; max-height: 100vh; position: relative; background-color: #fff; padding: 24px; border-radius: 8px; } .popup-fixed .flex-wrap { display: flex; gap: 40px; } .popup-fixed .flex-wrap .calendar-wrap { width: 336px; min-width: 336px; } .popup-fixed .schedule-list-type1 { overflow: auto; border-top: 2px solid #000; max-height: 400px; } .popup-fixed .schedule-list-type1 .schedule-item-type1 { border-bottom: 1px dashed #00000033; } @media screen and (max-width: 880px) { .popup-fixed { width: 100%; height: 100%; padding-top: 56px; overflow: auto; } .popup-fixed .flex-wrap { flex-direction: column; gap: 24px; height: 100%; overflow: auto; } .popup-fixed .flex-wrap .calendar-wrap { width: 100%; min-width: unset; } .schedule-item-type1 .txt-wrap .date-box { gap: 14px; } .schedule-item-type1 .txt-wrap .date-box .date-item { row-gap: 6px; } .schedule-item-type1 .txt-wrap .date-box .date-item .label { flex: 1 1 auto; font-size: 13px; } .schedule-item-type1 .txt-wrap .date-box .date-item .date { margin-left: auto; font-size: 14px; } .schedule-item-type1 .txt-wrap .date-box .date-item .count-controls { width: 100%; justify-content: flex-end; margin-left: 0; } } /* 골프 견적서 */ .golf-estimate-page > div { overflow: auto; } .golf-estimate-top { padding-top: 64px; padding-bottom: 80px; } .golf-estimate-top-flex { display: flex; gap: 64px; align-items: flex-start; border-bottom: 1px solid #000000; } .manager-card { width: 360px; min-width: 360px; padding: 40px; border-radius: 8px; background-color: #6A1B9A; } .manager-card .logo-wrap { width: 176px; margin-bottom: 40px; } .manager-card .logo-wrap img { filter: brightness(0) invert(1); } .manager-card .manager-info-wrap { display: block; } .manager-card .manager-info-wrap .manager-info-title { color: #FFFFFF; font-weight: 700; font-size: 20px; margin-bottom: 20px; } .manager-card .manager-info-wrap ul { display: flex; gap: 16px; flex-direction: column; } .manager-card .manager-info-wrap ul li { display: block; } .manager-card .manager-info-wrap ul li .label { font-weight: bold; color: #FFFFFF80; margin-bottom: 8px; } .manager-card .manager-info-wrap ul li .content { font-size: 18px; font-weight: 400; color: #fff; line-height: 1.5; word-break: keep-all; } .golf-estimate-info-list-wrap { margin-bottom: 56px; } .golf-estimate-info-wrap { width: 100%; } .golf-estimate-info-wrap .btn-wrap { display: flex; gap: 32px; margin-bottom: 40px; } .golf-estimate-btn { display: flex; gap: 10px; border-bottom: 2px solid #6A1B9A; padding-bottom: 8px; font-family: 'OneStoreMobileGothicTitleFont', sans-serif; font-size: 20px; color: #6A1B9A; } .golf-estimate-btn img { width: 20px; } .golf-estimate-info-title { margin-bottom: 24px; } .golf-estimate-info-title p { font-weight: 700; font-weight: bold; font-size: 32px; } .label-content-wrap-flex { display: flex; gap: 40px; } .label-content-wrap-flex .label-content-wrap-type6 { width: 100%; } .usage-guide-flex { display: flex; padding-top: 40px; } .usage-guide-box { width: calc(100%); } .usage-guide-box .usage-guide-title { font-weight: bold; margin-bottom: 16px; } .usage-guide-box .red-guide { display: flex; gap: 12px; color: #FD1818; margin-bottom: 12px; flex-wrap: wrap; } .usage-guide-box .red-guide p { color: #FD1818; } .usage-guide-box .red-guide p.bold { font-weight: bold; } .usage-guide-box .guide-txt { font-weight: 400; line-height: 1.6; } .usage-guide-box .guide-txt span { font-weight: bold; line-height: unset; font-size: unset; } .amount-details-box { width: 640px; min-width: 640px; } .amount-details-box .label-content-wrap-type6 { gap: 12px; border: unset; border-top: 1px solid #00000033; padding-top: 20px; } .amount-details-box .label-content-item-type6 { padding: unset; border: unset; } .amount-details-box .label-content-item-type6 .label-wrap { padding: unset; } .amount-details-box .label-content-item-type6 .label-wrap .label { font-size: 20px; } .amount-details-box .label-content-item-type6 .content-wrap { padding: unset; } .amount-details-box .label-content-item-type6:last-child { padding: 20px 0; border-top: 1px solid #000; border-bottom: 1px solid #000; } .amount-details-box .label-content-item-type6:last-child .label-wrap .label { font-weight: bold; opacity: 1; } .amount-details-box .label-content-item-type6:last-child .content-wrap { font-weight: bold; } .golf-estimate-bt { background-color: #F5F5F5; padding-top: 56px; padding-bottom: 136px; } .golf-estimate-bt .precautions { display: flex; gap: 8px; flex-direction: column; padding-bottom: 24px; border-bottom: 1px dashed #00000033; } .golf-estimate-bt .precautions li { line-height: 1.4; } .golf-estimate-bt .precautions li span { font-weight: bold; } .precautions-list-wrap-flex { display: flex; gap: 140px; padding-top: 32px; padding-bottom: 80px; } .precautions-list-wrap-flex > div { width: calc((100% - 20px) / 2); } .precautions-list-wrap-type1 { display: block; } .precautions-list-item .precautions-label { margin-bottom: 10px; } .precautions-list-item .precautions-label p { font-weight: bold; font-size: 20px; } .precautions-list-item .precautions-content { line-height: 1.6; } .precautions-list-item .bank-info-box { margin-top: 20px; flex-wrap: wrap; } .precautions-list-item .bank-info-box .bank-name { font-weight: bold; } .precautions-list-wrap-type1 .precautions-list-item { margin-bottom: 29px; } .precautions-list-wrap-type1 .precautions-list-item:last-child { margin-bottom: unset; } .precautions-list-wrap-type2 { display: flex; gap: 72px 20px; width: 100%; flex-wrap: wrap; } .precautions-list-wrap-type2 .precautions-list-item { width: calc((100% - 20px) / 2); } .bank-info-box { display: flex; gap: 16px; background-color: #fff; padding: 10px 16px; } .payment-notes-box-wrap { background-color: #0000000D; padding: 32px 40px; border-radius: 8px; display: flex; gap: 20px; } .payment-notes-box-wrap .payment-notes-box { width: 100%; } .payment-notes-box-wrap .payment-notes-box .payment-notes-box-title { font-weight: bold; margin-bottom: 16px; } .payment-notes-box-wrap .payment-notes-box .payment-notes-box-list > ul { } .payment-notes-box-wrap .payment-notes-box .payment-notes-box-list > ul li { line-height: 1.6; list-style: decimal; list-style-position: inside; padding-left: 0; } .payment-notes-box-wrap .payment-notes-box .payment-notes-box-list > ul li span { font-weight: bold; } @media screen and (max-width: 1680px) { .golf-estimate-top-flex { flex-direction: column; } .manager-card { width: 100%; } .label-content-wrap-flex { flex-direction: column; } .usage-guide-flex { flex-direction: column; gap: 40px; } .amount-details-box { width: 100%; min-width: unset; } .precautions-list-wrap-flex { flex-direction: column; gap: 40px; } .precautions-list-wrap-flex > div { width: 100%; gap: 40px; } .precautions-list-wrap-type2 .precautions-list-item { width: 100%; } .payment-notes-box-wrap { flex-direction: column; } } @font-face { font-family: 'SoyoDanpung'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2310@1.0/SOYOMapleRegularTTF.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'SoyoDanpung'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2310@1.0/SOYOMapleBoldTTF.woff2') format('woff2'); font-weight: 700; font-display: swap; } /* 버튼 disabled 스타일 */ .quantity-control button:disabled, .quantity-control button.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .estimate-page { margin-top: unset; } .package-estimate-page { padding-bottom: 64px; } .estimate-wrap { width: 500px; margin: 0 auto; max-width: 100%; position: relative; } .estimate-top-box { width: 100%; position: relative; padding: 80px 40px 40px; } .estimate-top-box .created { position: absolute; left: 16px; top: 20px; font-weight: bold; } .estimate-top-box .logo-wrap { position: absolute; width: 48px; top: 20px; right: 16px; } .estimate-top-box .estimate-top-box-bg { position: absolute; left: 0; top: 0; bottom: 0; right: 0; } .estimate-top-box .estimate-top-box-bg::after { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; } .estimate-top-box .estimate-top-box-bg img { width: 100%; height: 100%; object-fit: cover; } .estimate-top-box .txt-wrap { position: relative; z-index: 1; text-align: center; padding: 40px 0; background-color: #fff; border-radius: 0 40px 0 40px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); } .estimate-top-box .txp-top { padding: 0 24px; overflow-wrap: anywhere; } .estimate-top-box .title { font-family: "SoyoDanpung"; font-weight: bold; font-size: 28px; line-height: 1.5; padding-bottom: 16px; margin-bottom: 16px; word-break: keep-all; overflow-wrap: anywhere; position: relative; } .estimate-top-box .line { position: relative; } .estimate-top-box .line::after { content: ''; display: block; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 336px; max-width: calc(100% - 48px); height: 1.5px; background-color: #613E00 ; } .estimate-top-box .txt-ct { padding: 0 24px; } .estimate-top-box .txt-ct p { font-size: 18px; line-height: 1.6; padding-bottom: 16px; margin-bottom: 16px; word-break: keep-all; overflow-wrap: anywhere; } .estimate-top-box .txt-bt { padding-top: 8px; padding: 0 24px; display: flex; justify-content: center; gap: 8px 40px; flex-wrap: wrap; } .estimate-top-box .txt-bt .name { font-weight: bold; } .estimate-top-box .txt-bt ul { } .estimate-top-box .txt-bt ul li { display: flex; justify-content: center; gap: 20px; margin-bottom: 8px; } .estimate-top-box .txt-bt ul li:last-child { margin: unset; } .estimate-top-box .txt-bt ul li p { font-size: 14px; } @media screen and (max-width: 768px) { .estimate-top-box { padding: 80px 20px 40px; } .estimate-top-box .txt-bt { flex-wrap: wrap; } } @media screen and (max-width: 480px) { } .estimate-product-box { padding: 50px 20px 80px; } .estimate-product-box .estimate-product { padding-bottom: 40px; border-bottom: 1px solid #00000033 } .estimate-product-box .estimate-product .estimate-tabs { margin-bottom: 32px; margin-left: -20px; margin-right: -20px; flex-wrap: wrap; border-bottom: unset; background: transparent; gap: 8px 4px; overflow: visible; } .estimate-product-box .estimate-product .estimate-tabs::before { display: none; } .estimate-product-box .estimate-product .estimate-tabs .tab { min-width: fit-content; border-radius: 8px; margin-bottom: 0; } .estimate-product-box .estimate-product .estimate-tabs .tab.active { border-bottom: 2px solid #6A1B9A; } .estimate-product-box .estimate-product .estimate-product-title { font-family: 'OneStoreMobileGothicTitleFont', sans-serif; font-size: 25px; font-weight: 400; margin-bottom: 20px; } .estimate-product-box .estimate-product .estimate-product-img { display: block; width: 100%; } .estimate-product-box .estimate-product .estimate-product-img .img-wrap-pd::before { padding-top: 44.32%; } .estimate-product-box .label-content-wrap-type3 > ul { padding-top: 20px; gap: 16px; } .estimate-product-box .label-content-wrap-type3 > ul > li { padding: unset; border: unset; } .estimate-product-box .label-content-item-type3 { } .estimate-product-box .label-content-item-type3 .label-wrap { min-width: 100px; width: 100px; } .estimate-product-box .label-content-item-type3 .label-wrap .label { font-size: 14px; line-height: 1.4; } .estimate-product-box .label-content-item-type3 .content-wrap { font-size: 14px; line-height: 1.4; } .flight-schedule-box { display: flex; flex-direction: column; gap: 16px; padding: 40px 0; border-bottom: 1px solid #00000033; } .flight-schedule-item { background: #fff; border: 1px solid #e5e5e5; border-radius: 12px; padding: 20px; } .flight-schedule-header { display: flex; align-items: center; margin-bottom: 10px; gap: 10px; } .flight-schedule-header .flight-label { display: flex; gap: 8px; } .flight-schedule-header .flight-label span { font-size: 12px; font-weight: bold; } .flight-schedule-header .flight-label p { font-size: 12px; font-weight: bold; display: flex; gap: 4px; } .flight-schedule-header .flight-label p span { color: #6A1B9A; } .flight-schedule-header .flight-duration { font-size: 14px; color: #666; } .flight-schedule-content { display: flex; align-items: center; justify-content: space-between; gap: 32px; } .flight-info { flex: 1; width: 100%; } .flight-info.departure { text-align: left; } .flight-info.arrival { text-align: left; } .flight-info .flight-location { font-size: 14px; font-weight: bold; color: #000; margin-bottom: 8px; } .flight-info .flight-datetime { font-size: 16px; font-weight: 400; color: #000; } .flight-icon { display: flex; align-items: center; justify-content: center; color: #6c5ce7; flex-shrink: 0; } .flight-schedule-notice { display: flex; align-items: flex-start; gap: 5px; font-size: 14px; } .flight-schedule-notice i { font-size: 16px; } .flight-schedule-notice span { word-break: keep-all; } @media screen and (max-width: 480px) { .flight-schedule-content { gap: 8px; } .flight-info .flight-location { font-size: 12px; } .flight-info .flight-datetime { font-size: 14px; } .flight-icon svg { width: 16px; height: 16px; } } .contract-notice { padding-top: 40px; } .contract-notice .contract-notice-title { font-family: 'OneStoreMobileGothicTitleFont', sans-serif; margin-bottom: 20px; } .terms-list-box { display: flex; flex-direction: column; gap: 24px; } .terms-list-item { display: flex; } .terms-list-title { font-size: 14px; font-weight: 600; color: #000; width: 120px; } .terms-list-content { padding-left: 0; margin: 0; list-style: none; width: calc(100% - 120px); padding-left: 10px; } .terms-list-content li { position: relative; padding-left: 12px; font-size: 13px; color: #000; line-height: 1.8; margin-bottom: 4px; word-break: keep-all; } .terms-list-content li:before { content: '•'; position: absolute; left: 0; color: #000; font-weight: 700; } @media screen and (max-width: 480px) { .terms-list-title { width: 80px; } .terms-list-content { width: calc(100% - 80px); } } .estimate-tabs { padding: 0 20px; background: #fff; position: relative; display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; scrollbar-width: none; -ms-overflow-style: none; touch-action: pan-x; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; overscroll-behavior-y: none; } .estimate-tabs::-webkit-scrollbar { display: none; } .estimate-tabs::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background-color: #6A1B9A; z-index: 0; pointer-events: none; } .estimate-tabs.is-sticky { width: 100%; max-width: 500px; position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 100; background: #fff; padding: 0 20px; } .estimate-tabs .tab { flex-shrink: 0; border-radius: 8px 8px 0 0; display: flex; justify-content: center; align-items: center; min-width: 80px; padding: 0 8px; height: 36px; background-color: #0000001F; color: #fff; z-index: 1; position: relative; font-family: 'OneStoreMobileGothicTitleFont', sans-serif; } .estimate-tabs .tab.active { background-color: #fff; color: #6A1B9A; border: 2px solid #6A1B9A; border-bottom-color: #fff; z-index: 2; } .estimate-section { padding: 40px 0 60px; display: flex; gap: 40px; flex-direction: column; } .estimate-section-info { display: block; } .estimate-section-info h4 { font-family: 'OneStoreMobileGothicTitleFont', sans-serif; padding: 0 20px; margin-bottom: 10px; } .estimate-section-info .estimate-section-info-content { padding: 0 20px; line-height: 1.5; font-size: 15px; } .estimate-section-product { padding-left: 18px; } .estimate-section-product-bg { display: flex; background-color: #0000000D; border-radius: 20px 0 0 20px; padding: 12px; } .estimate-section-product-bg img { width: 100px; height: 100px; border-radius: 10px; } .estimate-section-product-bg .product-box { width: calc(100% - 100px); padding-left: 20px; display: flex; flex-direction: column; justify-content: space-between; } .estimate-section-product-bg .product-box .product-box-title { font-family: 'OneStoreMobileGothicTitleFont', sans-serif; line-height: 1.6; font-size: 18px; word-break: keep-all; } .estimate-section-product-bg .product-box .date { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .estimate-section-product-bg .product-box .date p { font-size: 14px; } .estimate-section-product-bg .product-box .date i { font-size: 14px; } .estimate-section-info-ul { display: block; padding: 0 20px; } .estimate-section-info-ul li { line-height: 1.4; font-size: 13px; position: relative; padding-left: 12px; } .estimate-section-info-ul li::before { content: '•'; position: absolute; left: 0; color: #000; } .recommended-products-list { display: flex; gap: 30px; padding: 0 20px; flex-direction: column; } .recommended-product { display: block; } .recommended-product .recommended-product-img { margin-bottom: 20px; position: relative; border-radius: 8px; overflow: hidden; } .recommended-product .recommended-product-img::before { content: ''; display: block; padding-top: 45.45%; } .recommended-product .recommended-product-img .recommended-product-swiper { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .recommended-product .recommended-product-img img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; } .recommended-product .recommended-product-swiper .swiper-button-wrap-type1 { left: unset; right: 10px; bottom: 10px; } .recommended-product .recommended-product-txt { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .recommended-product .recommended-product-title { max-width: 100%; } .recommended-product .recommended-product-title .title { padding-right:16px; font-family: 'OneStoreMobileGothicTitleFont', sans-serif; font-size: 18px; margin-bottom: 0; line-height: 1.4; } .recommended-product .recommended-product-title .sub-title { font-size: 13px; opacity: 0.6;} .recommended-product .price-wrap { display: flex; gap: 9px; align-items: center; width: 100%; flex-wrap: wrap; justify-content: flex-start; } .recommended-product .price-wrap p { font-family: 'OneStoreMobileGothicTitleFont', sans-serif; font-size: 26px; color: #6A1B9A; word-break: break-word; white-space: normal; } .recommended-product .price-wrap span { font-family: 'OneStoreMobileGothicTitleFont', sans-serif; font-size: 20px; } /* 견적용 가격 여러개일 때: 세로로 구분해서 표시 */ .recommended-product .price-wrap.is-multi { flex-direction: column; align-items: stretch; gap: 0; } .recommended-product .price-wrap.is-multi p { font-size: 21px; line-height: 1.4; padding: 9px 0; display: flex; align-items: center; } .recommended-product .price-wrap.is-multi p::before { content: ''; flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: #6A1B9A; margin-right: 9px; } .recommended-product .price-wrap.is-multi p + p { border-top: 1px solid rgba(106, 27, 154, 0.15); } .estimate-wrap-big-btn { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; width: 500px; max-width: 100%; height: 64px; z-index: 9; } .estimate-scroll-top-btn { position: fixed; right: 20px; bottom: 84px; width: 48px; height: 48px; border-radius: 50%; background: #333; color: #fff; border: none; cursor: pointer; z-index: 1000; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: center; transition: opacity 0.2s, transform 0.2s; } .estimate-scroll-top-btn:hover { background: #000; transform: translateY(-2px); } .estimate-scroll-top-btn i { font-size: 22px; line-height: 1; } @media screen and (max-width: 1280px) { .estimate-scroll-top-btn { right: 16px; bottom: 80px; width: 44px; height: 44px; } .estimate-scroll-top-btn i { font-size: 20px; } } .estimate-wrap-big-btn button { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 20px; font-family: 'OneStoreMobileGothicTitleFont', sans-serif; } .estimate-wrap-big-btn button.kakaotalk { background-color: #F8E049; color: #371C1D; } .estimate-wrap-big-btn button.phone { background-color: #6A1B9A; color: #fff; } .packageEstimate-page .tab-menu-type2 { gap: 10px 8px; } .packageEstimate-page .tab-menu-type2 .tab { width: calc((100% - 8px) / 2); } .packageEstimate-page .tab-menu-type2 .tab .title { font-size: 16px; } .packageEstimate-page .hotel-content-wrap { flex-direction: column; max-width: 100%; } .packageEstimate-page .hotel-content-wrap .swiper { max-width: 100%; } .packageEstimate-page .hotel-content-imgs { width: 100%; max-width: unset; margin-bottom: 20px; } .packageEstimate-page .hotel-content-box { padding: unset; width: 100%; } .packageEstimate-page .hotel-section { padding: 0 20px; } .packageEstimate-page .amenities-list { gap: 5px; } .packageEstimate-page .amenities-list .amenity-item { width: calc((100% - 5px) / 2); padding: 5px 12px; } .packageEstimate-page .amenities-list .amenity-item p { font-size: 13px; line-height: 1.6; } .packageEstimate-page .amenities-list .amenity-item img { width: 16px; } .packageEstimate-page .golf-section { padding: 24px 20px; } .estimate-schedule { padding: 25px 0 80px; } .estimate-schedule .option-tabs { display: flex; gap: 10px; padding: 5px 20px; background-color: #F2F2F2; } .estimate-schedule .option-tabs button { width: 42px; height: 30px; display: flex; justify-content: center; align-items: center; color: #2A009C33; font-family: 'OneStoreMobileGothicTitleFont', sans-serif; } .estimate-schedule .option-tabs button.active { color: #2A009C; } .estimate-schedule-list-wrap { padding-left: 20px; } .estimate-schedule-list-wrap > ul { display: flex; gap: 20px; border-left: 2px solid #2A009C; padding-top: 30px; flex-direction: column; } .estimate-schedule-list { padding: 0 20px; } .estimate-schedule-list .schedule-num-box { position: relative; display: inline-flex; justify-content: center; align-items: center; padding: 0 10px; height: 24px; background-color: #2A009C; border-radius: 4px; color: #fff; font-family: 'OneStoreMobileGothicTitleFont', sans-serif; font-size: 14px; gap: 8px; } .estimate-schedule-list .schedule-num-box span { width: 16px; height: 16px; border-radius: 100%; border: 1px solid #2A009C; position: absolute; background-color: #fff; right: calc(100% + 13px); display: flex; justify-content: center; align-items: center; } .estimate-schedule-list .schedule-num-box span::before { width: 10px; height: 10px; background-color: #2A009C; display: block; border-radius: 100%; content: ''; } .estimate-schedule-list .title-wrap { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; margin-top: 20px; } .estimate-schedule-list .title { font-weight: bold; font-size: 20px; } .estimate-schedule-list .title-wrap button { background-color: #c2e3fa; padding: 0 8px; height: 16px; font-size: 12px; border-radius: 4px; } .estimate-schedule-dt-list { display: block; margin-top: 20px; } .estimate-schedule-list .meal-box { width: 100%; padding: 10px 15px; display: flex; background-color: #6A1B9A0D; margin-top: 16px; } .estimate-schedule-list .meal-box img { width: 14px; } .estimate-schedule-list .meal-box p { padding-left: 10px; color: #6A1B9A; font-size: 14px; font-weight: 500; } .estimate-schedule-list .meal-box p { color: #6A1B9A; } /* 일정 상세 - 투어 카드 */ .detail-tours { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; } .detail-tour-item { display: flex; gap: 16px; align-items: center; padding: 12px; background: #fafafa; border-radius: 10px; } .detail-tour-img { flex: 0 0 120px; width: 120px; height: 120px; overflow: hidden; border-radius: 8px; background: #eee; } .detail-tour-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .detail-tour-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .detail-tour-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .detail-tour-title { font-weight: 600; font-size: 16px; line-height: 1.4; flex: 1 1 auto; min-width: 0; } .detail-tour-go-btn { flex-shrink: 0; font-size: 13px; padding: 6px 12px; border: 1px solid #333; background: #fff; border-radius: 4px; cursor: pointer; } .detail-tour-go-btn:hover { background: #f5f5f5; } .detail-tour-desc { font-size: 13px; color: #666; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } @media screen and (max-width: 768px) { .detail-tour-item { gap: 12px; padding: 10px; } .detail-tour-img { flex: 0 0 100px; width: 100px; height: 100px; } .detail-tour-title { font-size: 14px; } .detail-tour-desc { font-size: 12px; } } .packageEstimate-page .label-content-item-type4 { flex-direction: column; gap: 10px; } .solution-detail .ql-editor { padding: 0; line-height: 1.42; } .solution-detail .ql-editor strong, .solution-detail .ql-editor b { font-weight: bold; } .solution-detail .ql-editor em, .solution-detail .ql-editor i { font-style: italic; } .solution-detail .ql-editor u { text-decoration: underline; } .solution-detail .ql-editor s, .solution-detail .ql-editor strike { text-decoration: line-through; } /* 견적서 본문 에디터 콘텐츠 내 링크 스타일 */ .estimate-page .ql-editor a, .estimate-section-info-content a, .precautions-custom a { color: #06c; text-decoration: underline; cursor: pointer; } .estimate-page .ql-editor a:hover, .estimate-section-info-content a:hover, .precautions-custom a:hover { color: #0044aa; text-decoration: underline; } @media screen and (max-width: 1280px) { .solution-detail .ql-editor, .solution-detail .ql-editor *, .solution-detail .ql-editor p, .solution-detail .ql-editor span, .solution-detail .ql-editor div { font-size: 14px !important; line-height: 1.42 !important; } .solution-detail .ql-editor p span, .solution-detail .ql-editor div span { font-size: 14px !important; } .solution-detail .ql-editor h1, .solution-detail .ql-editor h1 * { font-size: 22px !important; line-height: 1.4 !important; } .solution-detail .ql-editor h2, .solution-detail .ql-editor h2 * { font-size: 20px !important; line-height: 1.4 !important; } .solution-detail .ql-editor h3, .solution-detail .ql-editor h3 * { font-size: 18px !important; line-height: 1.4 !important; } .solution-detail .ql-editor h4, .solution-detail .ql-editor h4 * { font-size: 16px !important; line-height: 1.4 !important; } .solution-detail .ql-editor h5, .solution-detail .ql-editor h5 *, .solution-detail .ql-editor h6, .solution-detail .ql-editor h6 * { font-size: 15px !important; line-height: 1.4 !important; } .solution-detail .ql-editor img { max-width: 100% !important; height: auto !important; } } /* 프린트 스타일 */ @media print { @page { size: A4; margin: 15mm; } * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; } html, body { width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; font-size: 12px !important; } #header, #footer, .golf-estimate-btn, .btn-wrap, .estimate-wrap-big-btn { display: none !important; } .golf-estimate-page { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } .golf-estimate-page .container { width: 100% !important; max-width: 100% !important; padding: 20px !important; } .golf-estimate-top { padding: 0 !important; } .golf-estimate-top-flex { flex-direction: column !important; gap: 20px !important; } .manager-card { width: 100% !important; max-width: 100% !important; padding: 20px !important; margin-bottom: 20px !important; } .manager-card .logo-wrap { margin-bottom: 15px !important; } .manager-card .logo-wrap img { max-width: 150px !important; } .manager-info-wrap { padding: 15px !important; } .manager-info-wrap ul li { padding: 8px 0 !important; border-bottom: 1px solid #eee !important; } .manager-info-wrap ul li:last-child { border-bottom: none !important; } .manager-info-wrap .label { font-size: 11px !important; margin-bottom: 4px !important; } .manager-info-wrap .content { font-size: 13px !important; word-break: keep-all !important; overflow-wrap: anywhere !important; } .golf-estimate-info-wrap { width: 100% !important; max-width: 100% !important; padding: 0 20px !important; } .golf-estimate-info-list-wrap { margin-bottom: 20px !important; padding: 15px !important; border: 1px solid #eee !important; border-radius: 8px !important; } .golf-estimate-info-title { padding: 10px 0 !important; margin-bottom: 10px !important; border-bottom: 2px solid #6A1B9A !important; } .golf-estimate-info-title p { font-size: 14px !important; font-weight: bold !important; } .label-content-wrap-type6 { width: 100% !important; } .label-content-item-type6 { padding: 10px 0 !important; border-bottom: 1px solid #f0f0f0 !important; flex-direction: row !important; gap: 10px !important; } .label-content-item-type6 .label-wrap { min-width: 100px !important; width: 100px !important; } .label-content-item-type6 .label-wrap .label { font-size: 11px !important; color: #666 !important; } .label-content-item-type6 .content-wrap { flex: 1 !important; font-size: 13px !important; word-break: keep-all !important; overflow-wrap: anywhere !important; } .label-content-wrap-flex { flex-direction: column !important; gap: 0 !important; } .usage-guide-flex { flex-direction: column !important; gap: 20px !important; padding: 20px !important; } .usage-guide-box { width: 100% !important; padding: 15px !important; border: 1px solid #eee !important; border-radius: 8px !important; } .usage-guide-title { font-size: 14px !important; margin-bottom: 15px !important; } .red-guide { padding: 10px !important; margin-bottom: 15px !important; font-size: 12px !important; } .guide-txt { font-size: 11px !important; line-height: 1.6 !important; } .amount-details-box { width: 100% !important; } .golf-estimate-bt { padding: 20px !important; } .golf-estimate-bt .container { padding: 0 !important; } .precautions { padding: 15px !important; margin-bottom: 20px !important; } .precautions li { font-size: 12px !important; line-height: 1.6 !important; margin-bottom: 10px !important; } .precautions-list-wrap-flex { flex-direction: column !important; gap: 20px !important; } .precautions-list-wrap-type1, .precautions-list-wrap-type2 { width: 100% !important; } .precautions-list-item { padding: 15px !important; margin-bottom: 15px !important; border: 1px solid #eee !important; border-radius: 8px !important; } .precautions-label { margin-bottom: 10px !important; } .precautions-label p { font-size: 13px !important; } .precautions-content { font-size: 11px !important; line-height: 1.6 !important; } .bank-info-box { margin-top: 10px !important; padding: 10px !important; font-size: 12px !important; } .payment-notes-box-wrap { flex-direction: column !important; gap: 20px !important; } .payment-notes-box { width: 100% !important; padding: 15px !important; border: 1px solid #eee !important; border-radius: 8px !important; } .payment-notes-box-title { font-size: 13px !important; margin-bottom: 10px !important; } .payment-notes-box-list ul li { font-size: 11px !important; line-height: 1.6 !important; margin-bottom: 8px !important; } img { max-width: 100% !important; height: auto !important; } .reservation-number { margin-top: 5px !important; } .reservation-number .label, .reservation-number .number { font-size: 11px !important; } /* 페이지 나눔 */ .golf-estimate-info-list-wrap, .usage-guide-box, .amount-details-box, .precautions-list-item, .payment-notes-box { page-break-inside: avoid; } } /* 여행후기 전체 목록 페이지 */ .reviews-page { padding-bottom: 120px; } .reviews-page .sub-page-title-wrap { margin-bottom: 24px; } .reviews-page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 2px solid #000; } .reviews-page-header .reviews-total { font-size: 14px; color: #666; } .reviews-page-header .reviews-total span { font-weight: 600; color: #6A1B9A; } .reviews-page .review-product-link { margin-top: 16px; padding-top: 16px; border-top: 1px dashed #E0E0E0; } .reviews-page .review-product-link a { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #6A1B9A; } .reviews-page .review-product-link a:hover { text-decoration: underline; } .reviews-page .review-product-link .product-name { max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media screen and (max-width: 768px) { .reviews-page .review-product-link .product-name { max-width: 200px; } } /* 항공편 정보 */ .journey-box { margin: 15px 0; margin-left: -22px; margin-right: -20px; padding: 15px 15px 15px 20px; border-left: 2px solid #cccccc; position: relative; } .journey-box .airplane-icon { position: absolute; left: -9.5px; top: 16px; transform: rotate(0.5turn); color: #e91e63; } .journey-row { display: flex; align-items: center; gap: 8px; } .journey-dot { width: 8px; height: 8px; background-color: #e91e63; border-radius: 50%; flex-shrink: 0; } .journey-date { font-size: 14px; color: #666; flex-shrink: 0; white-space: nowrap; } .journey-detail { padding-left: 16px; margin-bottom: 10px; position: relative; } .journey-detail:last-child { margin-bottom: unset; } .journey-detail.add-dashed::before { content: ''; width: 1px; height: 100%; display: block; border-left: 2.5px dashed #020202; position: absolute; left: 3px; top: 5px; } .journey-time-place { display: flex; align-items: center; gap: 8px; margin: 0; flex-wrap: wrap; } .journey-time { font-size: 16px; font-weight: bold; color: #333; flex-shrink: 0; white-space: nowrap; } .journey-place { font-size: 14px; color: #333; flex-shrink: 0; white-space: nowrap; } .journey-flight-info { display: flex; align-items: center; gap: 6px; margin: 8px 0 0 0; padding-left: 16px; } .journey-airline { font-size: 14px; color: #000; font-weight: bold; } .journey-flight-number { font-size: 14px; color: #e91e63; font-weight: bold; } .journey-flight-info .xi-airplane { font-size: 12px; color: #666; transform: rotate(0.25turn); } .journey-duration { font-size: 14px; color: #666; font-weight: bold; } /* 지역정보 섹션 */ .region-info-section { padding: 32px 0; border-bottom: 1px solid #00000033; } .region-info-wrap {} .region-tab-list { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .region-tab-item { background: none; border: none; padding: 12px 20px; font-size: 15px; font-weight: 600; color: #888; cursor: pointer; border-bottom: 3px solid transparent; transition: color .15s, border-color .15s; } .region-tab-item:hover { color: #6A1B9A; } .region-tab-item.active { color: #6A1B9A; border-bottom-color: #6A1B9A; } .region-swiper { position: relative; border-radius: 8px; overflow: hidden; } .region-swiper .room-img { width: 100%; } .region-swiper .room-img img { width: 100%; height: auto; display: block; } .region-description { text-align: center; line-height: 1.8; color: #333; font-size: 15px; padding: 24px 20px; } .region-weather-wrap { display: flex; gap: 20px; margin-top: 20px; padding: 24px; background: linear-gradient(135deg, #f8f4ff 0%, #f0f4ff 100%); border-radius: 12px; border: 1px solid #e8e0f0; } .region-weather-forecasts { flex: 1; } .region-weather-title { font-size: 16px; font-weight: bold; color: #6A1B9A; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid #6A1B9A; display: inline-block; } .region-weather-list { display: flex; gap: 12px; } .region-weather-item { flex: 1; text-align: center; padding: 16px 12px; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .weather-date { font-size: 13px; font-weight: 600; color: #6A1B9A; margin-bottom: 4px; } .weather-location { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 8px; } .weather-icon { width: 56px; height: 56px; margin: 4px auto; display: block; } .weather-condition { font-size: 14px; color: #555; margin-bottom: 4px; } .weather-temp { font-size: 18px; font-weight: bold; color: #333; } .region-localtime { flex: 0 0 260px; text-align: center; display: flex; flex-direction: column; justify-content: center; padding: 16px; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .timezone-label { font-size: 13px; color: #6A1B9A; line-height: 1.6; margin-bottom: 8px; } .current-time { font-size: 32px; font-weight: bold; color: #2A009C; letter-spacing: 1px; } .region-exchange-wrap { margin-top: 16px; padding: 20px 24px; background: #fff; border-radius: 12px; border: 1px solid #e8e0f0; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .region-exchange-wrap .region-weather-title { margin-bottom: 8px; } .region-exchange-wrap .exchange-rate { font-size: 22px; font-weight: bold; color: #2A009C; margin-bottom: 6px; } .region-exchange-wrap .exchange-base { font-size: 12px; color: #888; } @media screen and (max-width: 1280px) { .region-info-section { padding: 24px 20px; border-bottom: 4px solid #00000033; } .region-tab-item { padding: 10px 14px; font-size: 14px; } .region-weather-wrap { flex-direction: column; padding: 16px; gap: 12px; } .region-localtime { flex: unset; } .current-time { font-size: 26px; } .region-weather-list { gap: 8px; } .region-weather-item { padding: 12px 8px; } .region-exchange-wrap { padding: 16px 18px; } .region-exchange-wrap .exchange-rate { font-size: 18px; } } /* ===== Section1 메인 배너 추천 상품 + 카페24 아네모네 폰트 ===== */ @font-face { font-family: 'Cafe24Anemone'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/Cafe24Ohsquare.woff') format('woff'); font-weight: normal; font-display: swap; } .anemone-font { font-family: 'Cafe24Anemone', sans-serif !important; } .outlined-txt { -webkit-text-stroke: 0.5px rgba(150, 150, 150, 0.6); paint-order: stroke fill; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .section1 .swiper-wrap { height: 980px !important; } .section1 .swiper-txt-wrap { transform: translateY(-180px); } .section1-recommend-wrap { position: absolute; left: 50%; bottom: 80px; transform: translateX(-50%); width: 100%; max-width: 1100px; padding: 0 20px; z-index: 5; pointer-events: none; } .section1-recommend-swiper { overflow-x: hidden; overflow-y: visible; pointer-events: auto; padding: 24px 0; margin: -24px 0; } .section1-recommend-cards { display: flex; justify-content: center; gap: 18px; } .section1-recommend-cards > .section1-recommend-card { flex: 0 0 calc((100% - 54px) / 4); } .section1-recommend-card { display: block; background: #fff; border-radius: 14px; overflow: hidden; /* box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.28); */ transform: translateY(0); transition: transform 0.25s ease, box-shadow 0.25s ease; text-decoration: none; color: inherit; aspect-ratio: 4 / 5; position: relative; } .section1-recommend-card:hover { transform: translateY(-6px); box-shadow: 0 18px 32px -8px rgba(0, 0, 0, 0.32); } .section1-recommend-card-img { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: #eee; } .section1-recommend-card-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 12px; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } @media screen and (max-width: 1280px) { .section1 .swiper-wrap { height: 560px !important; } .section1 .swiper-txt-wrap { transform: translateY(-100px); } .section1-recommend-wrap { bottom: 40px; padding: 0 16px; max-width: 720px; } .section1-recommend-cards { gap: 12px; } .section1-recommend-cards > .section1-recommend-card { flex: 0 0 calc((100% - 36px) / 4); } .section1-recommend-card { border-radius: 12px; } .section1-recommend-card-title { font-size: 12px; padding: 10px 8px; } } @media screen and (max-width: 768px) { .section1 .swiper-wrap { height: 500px !important; } .section1 .swiper-txt-wrap { flex-direction: column !important; align-items: center !important; gap: 24px !important; transform: translateY(-90px); text-align: center; } .section1 .swiper-txt-wrap .swiper-txt { font-size: 26px !important; } .section1 .swiper-txt-wrap .section1-swiper2-wrap { height: 44px !important; } .section1 .swiper-txt-wrap .section1-swiper2 { width: 220px !important; height: 100% !important; } .section1 .swiper-txt-wrap .section1-swiper2 .swiper-slide .country { font-size: 28px !important; } .section1-recommend-wrap { bottom: 24px; padding: 0 12px; max-width: 100%; } .section1-recommend-cards { gap: 8px; } .section1-recommend-cards > .section1-recommend-card { flex: 0 0 calc((100% - 24px) / 4); } .section1-recommend-card { border-radius: 10px; } .section1-recommend-card-title { font-size: 10px; padding: 8px 6px; } } /* 종료된 MD 카드 */ .md-item-type2.is-ended .md-swiper .bg-img img { filter: grayscale(60%) brightness(0.7); } .md-ended-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); z-index: 2; pointer-events: none; } .md-ended-overlay span { color: #fff; font-size: 22px; font-weight: 700; letter-spacing: 4px; padding: 8px 24px; border: 2px solid #fff; border-radius: 4px; } .md-item-type2.is-ended .md-item { z-index: 3; } .md-item-type2.is-ended .md-item .txt-wrap, .md-item-type2.is-ended .md-item .ranking, .md-item-type2.is-ended .md-item .label-list { z-index: 4; } @media screen and (max-width: 768px) { .md-ended-overlay span { font-size: 16px; padding: 6px 18px; } } /* 판매종료 상품 카드 (products-type1, products-type2 공통) */ .products-type1.is-sold-out .img-wrap, .products-type2.is-sold-out .img-wrap { position: relative; } .products-type1.is-sold-out .img-wrap img, .products-type2.is-sold-out .img-wrap img { filter: grayscale(70%) brightness(0.6); } .products-type1.is-sold-out .title-wrap, .products-type1.is-sold-out .sub-title-wrap, .products-type1.is-sold-out .hashtag-list, .products-type2.is-sold-out .txt-wrap { opacity: 0.7; } .sold-out-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.4); z-index: 5; } .sold-out-overlay span { color: #fff; font-size: 16px; font-weight: 700; padding: 6px 16px; border: 2px solid #fff; border-radius: 4px; letter-spacing: 2px; } .price-wrap.sold-out-cta { background: #e0e0e0; color: #757575; text-align: center; padding: 8px 12px; border-radius: 4px; cursor: not-allowed; } .price-wrap.sold-out-cta p { color: #757575 !important; font-weight: 600; }