@charset "UTF-8"; /*----------- Reset CSS -----------*/ html { font-size: 15px; } body { width: 100%; font-family: "Noto Serif TC", "Noto Sans", "Noto Sans TC", "Microsoft JhengHei", Helvetica, "Maven Pro", Verdana, Geneva, sans-serif; position: relative; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } a { text-decoration: none; color: inherit; } *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } input[type=checkbox] { -webkit-appearance: checkbox !important; -moz-appearance: checkbox !important; -o-appearance: checkbox !important; appearance: checkbox !important; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; -moz-user-select: auto; user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ pre { all: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } @media screen and (hover: hover) { /*-----------自訂Scrollbar樣式---------*/ /* 捲軸寬度及高度 */ ::-webkit-scrollbar { width: 15px; /*右側捲軸寬度*/ height: 15px; /*下方捲軸高度*/ } /* 軌道背景底色 */ ::-webkit-scrollbar-track { background: #1a1e27; } /* 滑桿顏色 */ ::-webkit-scrollbar-thumb { background: #b49f6e; } /* 捲軸兩側頂端的按鈕 */ ::-webkit-scrollbar-button { background-color: #b49f6e; } /* 滑桿滑鼠滑入時的顏色 */ ::-webkit-scrollbar-thumb:hover { background: #c6b285; } /* 捲軸兩側頂端的按鈕滑鼠滑入時的顏色 */ ::-webkit-scrollbar-button:hover { background-color: #c6b285; } } :root { --base-font-size: 38px; --s-font-size: 20px; --color-main: #e7d391; --color-lighter: #d3deec; --color-brightness: #fff; --decor-opacity: 0.8; --color-decor-line: #ddd2ad; --color-decor-star: #c9ac6f; --color-decor-list: #a79b79; --color-decor-border: #787057; --color-dark-blue: #1e2744; --color-price: #a05020; } @media (max-width: 1455px) { :root { --base-font-size: 2.59vw; --s-font-size: 2vw; } } @media (max-width: 767px) { :root { --base-font-size: 4vw; --s-font-size: 2.8vw; } } @media (max-width: 430px) { :root { --base-font-size: 4.5vw; --s-font-size: 3.3vw; } } .step1 .modal-dialog .modal-content .modal-body .content_list, .step1 .package_container main .attention_block .list { width: -moz-fit-content; width: fit-content; margin: 0 auto; } .step1 .modal-dialog .modal-content .modal-body .content_list ul, .step1 .package_container main .attention_block .list ul { width: -moz-fit-content; width: fit-content; } .step1 .modal-dialog .modal-content .modal-body .content_list ul li, .step1 .package_container main .attention_block .list ul li { width: 100%; padding-left: var(--s-font-size); font-family: "Noto Sans TC", sans-serif; font-weight: 400; font-size: var(--s-font-size); color: var(--color-lighter); position: relative; } .step1 .modal-dialog .modal-content .modal-body .content_list ul li + li, .step1 .package_container main .attention_block .list ul li + li { margin-top: var(--s-font-size); } .step1 .modal-dialog .modal-content .modal-body .content_list ul li::before, .step1 .package_container main .attention_block .list ul li::before { content: "⬩"; width: initial; height: initial; display: block; position: absolute; left: 0; top: 0; pointer-events: none; color: var(--color-decor-list); } .step1 .modal-dialog .modal-content .modal-header .modal-title .stitle, .step1 .package_container main .stitle { width: 100%; margin: calc(var(--base-font-size) * 1.5) auto calc(var(--base-font-size) * 0.75) auto; font-size: calc(var(--base-font-size) * 0.9); font-family: "Noto Serif TC", serif; font-weight: 600; color: var(--color-main); display: flex; justify-content: space-between; align-items: center; flex-direction: row; flex-wrap: nowrap; } .step1 .modal-dialog .modal-content .modal-header .modal-title .stitle .decor, .step1 .package_container main .stitle .decor { display: flex; justify-content: space-between; align-items: center; flex-direction: row; flex-wrap: nowrap; flex-grow: 0.5; flex-shrink: 0.5; opacity: 0.8; pointer-events: none; } .step1 .modal-dialog .modal-content .modal-header .modal-title .stitle .line, .step1 .package_container main .stitle .line { height: 2px; --decor-opacity: 0.8; background: linear-gradient(to right, rgba(160, 148, 118, 0) 0%, rgb(160, 148, 118) 4%); flex: 1 1 auto; } .step1 .modal-dialog .modal-content .modal-header .modal-title .stitle .middle, .step1 .package_container main .stitle .middle { width: -moz-fit-content; width: fit-content; margin: 0 calc(var(--base-font-size) * 0.22); text-align: center; transform: translateY(-1px); } .step1 .modal-dialog .modal-content .modal-header .modal-title .stitle .middle span + span::before, .step1 .package_container main .stitle .middle span + span::before { content: "－"; } @media screen and (max-width: 430px) { .step1 .modal-dialog .modal-content .modal-header .modal-title .stitle .middle span, .step1 .package_container main .stitle .middle span { display: block; } .step1 .modal-dialog .modal-content .modal-header .modal-title .stitle .middle span + span::before, .step1 .package_container main .stitle .middle span + span::before { content: initial; } } .step1 .decor_star { margin: 0 calc(var(--base-font-size) * 0.25); display: flex; justify-content: center; align-items: center; flex-direction: row; flex-wrap: nowrap; width: calc(var(--base-font-size) * 0.35); height: auto; mask-size: 100% 100%; mask-repeat: no-repeat; mask-position: center center; -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-image: url(../images/svg/decor_star.svg); mask-image: url(../images/svg/decor_star.svg); aspect-ratio: 1/1; background-color: var(--color-decor-star); } .step1 .rt { transform: scaleX(-1); } .step1 .package_container { width: 100%; min-height: 100vh; background-color: #e5eaf0; display: flex; justify-content: stretch; align-items: center; flex-direction: column; flex-wrap: nowrap; } .step1 .package_container header { width: 100%; position: sticky; top: 0; } .step1 .package_container header .header_block { width: 100%; overflow: hidden; padding-top: calc(var(--base-font-size) * 0.75); background-image: url("../images/cover_bg.jpg"); background-repeat: no-repeat; background-position: center top; background-size: auto 100%; background-image: url("../images/cover_bg.jpg"), url("../images/cover_bg_repeat.jpg"); background-repeat: no-repeat, repeat-x; display: flex; justify-content: flex-start; align-items: center; flex-direction: column; flex-wrap: nowrap; position: relative; } .step1 .package_container header .header_block::after { content: ""; width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; pointer-events: none; background: rgba(229, 234, 240, 0.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: 5; opacity: var(--header-overlay-opacity, 0); } .step1 .package_container header .header_block .logo { max-width: 320px; aspect-ratio: 510/130; width: 60%; height: auto; mask-size: 100% 100%; mask-repeat: no-repeat; mask-position: center center; -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-image: url(../images/svg/logo.svg); mask-image: url(../images/svg/logo.svg); background-color: #192d69; position: relative; z-index: 3; transition: all 0.3s ease; } .step1 .package_container header .header_block .logo a { width: 100%; height: 100%; display: block; } .step1 .package_container header .header_block .logo:hover { transform: translateY(-2px); } .step1 .package_container header .header_block .cover_title { width: 80%; max-width: 650px; aspect-ratio: 650/170; margin-top: calc(var(--base-font-size) * 0.2); background-image: url("../images/cover_title.png"); background-repeat: no-repeat; background-position: center top; background-size: 100% auto; position: relative; z-index: 2; } .step1 .package_container header .header_block .cover_title::after { content: ""; width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; pointer-events: none; background-image: url("../images/cover_title_light.png"); background-size: 100% auto; background-repeat: no-repeat; mix-blend-mode: lighten; z-index: 3; animation: identifier 0.1s ease-in-out infinite alternate; } @keyframes identifier { 0% { opacity: 0.95; } 100% { opacity: 1; } } .step1 .package_container header .header_block .cover_item { width: 100%; max-width: 1304px; height: auto; aspect-ratio: 1304/700; background-image: url("../images/cover_item.png"); background-repeat: no-repeat; background-position: center top; background-size: 100% auto; display: flex; justify-content: center; align-items: flex-end; flex-direction: row; flex-wrap: wrap; z-index: 0; } .step1 .package_container header .header_block .cover_item .cover_slogan { width: 100%; padding: calc(var(--base-font-size) * 0.5); font-size: calc(var(--s-font-size) * 1.5); font-family: "Noto Serif TC", serif; font-weight: 700; display: flex; justify-content: center; align-items: center; flex-direction: row; flex-wrap: nowrap; color: #a29065; letter-spacing: calc(var(--base-font-size) * 0.03); position: absolute; left: 50%; bottom: 0%; transform: translateX(-50%); z-index: 1; filter: drop-shadow(0 2px 0 rgba(255, 255, 255, 0.7)) drop-shadow(0 0 5px rgb(255, 255, 255)) drop-shadow(0 0 10px rgb(255, 255, 255)); } .step1 .package_container header .header_block .cover_item .cover_slogan .decor_star { width: -moz-fit-content; width: fit-content; margin: 0 calc(var(--base-font-size) * 0.25); display: flex; justify-content: center; align-items: center; flex-direction: row; flex-wrap: nowrap; width: calc(var(--base-font-size) * 0.3); height: auto; mask-size: 100% 100%; mask-repeat: no-repeat; mask-position: center center; -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-image: url(../images/svg/decor_star.svg); mask-image: url(../images/svg/decor_star.svg); aspect-ratio: 1/1.2; background-color: var(--color-decor-star); transform: translateY(2px); } .step1 .package_container header .header_block.use-vh { width: auto; height: 100vh; padding-top: 2.92vh; } .step1 .package_container header .header_block.use-vh .logo { width: auto; height: 8.33vh; } .step1 .package_container header .header_block.use-vh .cover_title { width: auto; height: 17.71vh; margin-top: 1.04vh; } .step1 .package_container header .header_block.use-vh .cover_item { width: auto; height: 70vh; } .step1 .package_container header .header_block #particles-js { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; mix-blend-mode: lighten; } .step1 .package_container .curve { width: 100%; height: auto; aspect-ratio: 1920/130; background: linear-gradient(to bottom, rgba(30, 41, 76, 0) 80%, #1e294c 100%); filter: drop-shadow(0 -5px 5px rgba(30, 41, 76, 0.3)); position: relative; z-index: 0; } .step1 .package_container .curve::after { width: 100%; height: 100%; mask-size: 100% 100%; mask-repeat: no-repeat; mask-position: center center; -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-image: url(../images/svg/curve.svg); mask-image: url(../images/svg/curve.svg); content: ""; width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; pointer-events: none; background: #1e294c url("../images/bg_texture.png") repeat; } .step1 .package_container main { width: 100%; padding-bottom: calc(var(--base-font-size) * 3); background: #1e294c url("../images/bg_texture.png") repeat; flex: 1 1 auto; position: relative; z-index: 2; } .step1 .package_container main nav { --border: 2px; --blur: calc(var(--base-font-size) * 0.25); --gap: calc(var(--border) + var(--blur)); width: 100%; padding-bottom: var(--gap); position: sticky; top: 0; z-index: 99; } @media screen and (min-width: 431px) { .step1 .package_container main nav { -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 3%, rgb(0, 0, 0) 97%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 3%, rgb(0, 0, 0) 97%, rgba(0, 0, 0, 0) 100%); } } .step1 .package_container main nav .menu_btn { width: 100%; position: relative; } .step1 .package_container main nav .menu_btn::before, .step1 .package_container main nav .menu_btn::after { content: ""; width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; pointer-events: none; background: #1e294c url("../images/bg_texture.png") repeat; z-index: -2; border-bottom: 0px solid; -o-border-image: linear-gradient(to right, rgba(160, 148, 118, 0) 1%, rgb(160, 148, 118) 8%, rgb(160, 148, 118) 92%, rgba(160, 148, 118, 0) 99%); border-image: linear-gradient(to right, rgba(160, 148, 118, 0) 1%, rgb(160, 148, 118) 8%, rgb(160, 148, 118) 92%, rgba(160, 148, 118, 0) 99%); border-image-slice: 1; transition: all 0.3s ease; } .step1 .package_container main nav .menu_btn::after { z-index: -1; border-bottom-width: var(--border); filter: drop-shadow(0 0px var(--blur) rgba(0, 0, 0, 0.5)); opacity: 0; } .step1 .package_container main nav .menu_btn.fixed::after { opacity: 1; } .step1 .package_container main nav .menu_btn ul { width: 90%; max-width: 1130px; margin: 0 auto; padding-top: var(--base-font-size); display: flex; justify-content: space-evenly; align-items: flex-start; flex-direction: row; flex-wrap: nowrap; } @media screen and (max-width: 767px) { .step1 .package_container main nav .menu_btn ul { width: 95%; } } .step1 .package_container main nav .menu_btn ul li { width: 30%; position: relative; aspect-ratio: 340/130; } .step1 .package_container main nav .menu_btn ul li::before { content: ""; width: 100%; height: auto; display: block; position: absolute; left: 0; top: 0; pointer-events: none; aspect-ratio: 340/140; background-image: url("../images/menu_light.png"); background-size: 100% auto; mix-blend-mode: screen; } .step1 .package_container main nav .menu_btn ul li a { width: 100%; height: auto; background-repeat: no-repeat; background-position: left top; background-size: 100% auto; background-image: url("../images/menu_01.png"); display: block; text-decoration: none; text-align: center; font-size: 0; line-height: 0; color: inherit; transition: all 0.4s ease; cursor: pointer; position: relative; aspect-ratio: 340/92; } .step1 .package_container main nav .menu_btn ul li a:hover { filter: contrast(1.1) brightness(1.1) hue-rotate(-10deg); } .step1 .package_container main nav .menu_btn ul li.btn2 a { background-image: url("../images/menu_02.png"); } .step1 .package_container main nav .menu_btn ul li.btn3 a { background-image: url("../images/menu_03.png"); } .step1 .package_container main section { max-width: 1400px; margin-left: auto; margin-right: auto; font-family: "Noto Serif TC", serif; font-weight: 700; } .step1 .package_container main section + section { margin-top: calc(var(--base-font-size) * 3); } @media screen and (max-width: 767px) { .step1 .package_container main section + section { margin-top: calc(var(--base-font-size) * 2.5); } } .step1 .package_container main .gradient-text { background: linear-gradient(to top, #dfd0af 0%, #cfb277 20%, #ffffcb 98%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgb(255, 255, 162)); } .step1 .package_container main .title { width: 100%; margin: 0 auto var(--base-font-size) auto; text-align: center; font-family: "Noto Serif TC", serif; font-weight: 600; font-size: calc(var(--base-font-size) * 1.1); color: var(--color-main); filter: drop-shadow(0px 0px 5px rgba(0, 15, 20, 0.9)); display: flex; justify-content: stretch; align-items: center; flex-direction: row; flex-wrap: nowrap; } .step1 .package_container main .title .gradient-text { width: -moz-fit-content; width: fit-content; margin: 0 calc(var(--base-font-size) * 0.22); } .step1 .package_container main .title .decor_line { --transY: 15%; height: 18px; border-top: 18px solid transparent; border-image-source: url("../images/decor_title_line.png"); border-image-slice: 0 85 0 30 fill; border-image-width: 0 85px 0 30px; border-image-repeat: stretch; flex: 0.5 0.5 auto; pointer-events: none; transform: translateY(var(--transY)); } .step1 .package_container main .title .decor_line.rt { transform: scaleX(-1) translateY(var(--transY)); } @media screen and (max-width: 500px) { .step1 .package_container main .title .decor_line { height: calc(var(--base-font-size) * 0.75); border-top: calc(var(--base-font-size) * 0.75) solid transparent; border-image-source: url("../images/decor_title_line.png"); border-image-slice: 0 85 0 30 fill; border-image-width: 0 85px 0 30px; border-image-repeat: stretch; border-image-width: 0 40px 0 15px; } } @media screen and (max-width: 767px) { .step1 .package_container main .title { margin-bottom: var(--base-font-size); } } .step1 .package_container main .item_content { padding: calc(var(--base-font-size) * 0.25); background-color: var(--color-brightness); background-image: url("../images/bg_texture.png"); background-size: 100% auto, 100% auto, 100% auto; border: clamp(2px, var(--base-font-size) * 0.2, 7px) solid var(--color-decor-border); flex: 0.5 0.5 auto; } .step1 .package_container main .item_content .wrapper { width: 100%; padding: calc(var(--base-font-size) * 0.5) calc(var(--base-font-size) * 0.75); background-image: url(../images/svg/decor_corner_lt.svg), url(../images/svg/decor_corner_rt.svg), url(../images/svg/decor_corner_lb.svg), url(../images/svg/decor_corner_rb.svg); background-repeat: no-repeat; background-position: left top, right top, left bottom, right bottom; background-size: 30% auto; color: #7d5f34; display: flex; justify-content: center; align-items: center; flex-direction: column; flex-wrap: wrap; } .step1 .package_container main .item_content .wrapper > div { width: 100%; } .step1 .package_container main .item_content .wrapper .sstitle { display: flex; justify-content: center; align-items: center; flex-direction: row; flex-wrap: nowrap; } .step1 .package_container main .item_content .wrapper .list { width: -moz-fit-content; width: fit-content; font-size: calc(var(--base-font-size) * 0.8); display: flex; justify-content: center; align-items: center; flex-direction: row; flex-wrap: nowrap; } .step1 .package_container main .item_content .wrapper .list ul { width: -moz-fit-content; width: fit-content; padding: 0; } .step1 .package_container main .item_content .wrapper .list ul li { width: -moz-fit-content; width: fit-content; display: flex; justify-content: flex-start; align-items: center; flex-direction: row; flex-wrap: wrap; position: relative; } .step1 .package_container main .item_content .wrapper .list ul li::before { content: "◆"; margin-right: calc(var(--base-font-size) * 0.25); color: var(--color-decor-list); font-size: calc(var(--base-font-size) * 0.25); } .step1 .package_container main .item_content .wrapper .list ul li + li { margin-top: calc(var(--base-font-size) * 0.5); } .step1 .package_container main .item_content .wrapper .list ul li span.memo { font-size: calc(var(--base-font-size) * 0.65); color: #ae946f; margin-left: calc(var(--base-font-size) * 0.25); } .step1 .package_container main .item_content .wrapper .item_price { margin-top: calc(var(--base-font-size) * 0.3); font-size: var(--base-font-size); text-align: center; color: var(--color-price); } .step1 .package_container main .sstitle { margin: 0 auto calc(var(--base-font-size) * 0.5) auto; font-size: calc(var(--base-font-size) * 0.9); } .step1 .package_container main .item_price span:nth-of-type(1) { font-size: calc(var(--base-font-size) * 0.8); } .step1 .package_container main .swiper-container { width: 100%; position: relative; } .step1 .package_container main .swiper-container .swiper { width: 100%; border-width: calc(var(--base-font-size) * 0.65); border-style: solid; -o-border-image: url("../images/frame.png") 25 stretch; border-image: url("../images/frame.png") 25 fill stretch; padding: calc(var(--base-font-size) * 0.25); } .step1 .package_container main .swiper-container .swiper .swiper-wrapper { width: 100%; } .step1 .package_container main .swiper-container .swiper .swiper-wrapper .swiper-slide { display: flex; justify-content: center; align-items: center; flex-direction: row; flex-wrap: nowrap; font-size: 0; line-height: 0; } .step1 .package_container main .swiper-pagination { width: 100%; --transY: 150%; top: initial; bottom: 0; transform: translateY(var(--transY)) scaleY(1.24); } .step1 .package_container main .swiper-pagination .swiper-pagination-bullet { --opacity: 0; width: clamp(6px, 2.2vw, 12px); height: auto; aspect-ratio: 1/1; margin: 0 calc(var(--base-font-size) * 0.25); border-radius: initial; transform: rotate(45deg); background-color: rgba(209, 190, 152, var(--opacity)); opacity: 1; border: 1px solid rgb(209, 190, 152); transition: all 0.3s ease; } .step1 .package_container main .swiper-pagination .swiper-pagination-bullet-active { --opacity: 1; } @media screen and (max-width: 430px) { .step1 .package_container main .swiper-pagination { --transY: 105%; } } .step1 .package_container main .swiper-button-next { transform: translate(var(--swiper-button-hover), 40%) scaleX(-1); } .step1 .package_container main .swiper-button-prev { transform: translate(calc(-1 * var(--swiper-button-hover)), 40%); } .step1 .package_container main .swiper-button-next, .step1 .package_container main .swiper-button-prev { --swiper-button-hover: 45%; width: calc(var(--base-font-size) * 1.2); height: auto; background-repeat: no-repeat; background-position: left top; background-size: 100% auto; background-image: url("../images/swiper_arrow.png"); display: block; text-decoration: none; text-align: center; font-size: 0; line-height: 0; color: inherit; transition: all 0.4s ease; cursor: pointer; max-width: 45px; top: initial; bottom: 50%; transition: all 0.3s ease; aspect-ratio: 41/47; } .step1 .package_container main .swiper-button-next:hover, .step1 .package_container main .swiper-button-prev:hover { filter: contrast(1.1) brightness(1.3) hue-rotate(-5deg); } .step1 .package_container main .swiper-button-next:hover, .step1 .package_container main .swiper-button-prev:hover { --swiper-button-hover: 50%; } .step1 .package_container main .swiper-button-next::after, .step1 .package_container main .swiper-button-prev::after { content: initial; } @media screen and (max-width: 767px) { .step1 .package_container main .swiper-button-next, .step1 .package_container main .swiper-button-prev { --swiper-button-hover: 80%; } .step1 .package_container main .swiper-button-next:hover, .step1 .package_container main .swiper-button-prev:hover { --swiper-button-hover: 85%; } } .step1 .package_container main .swiper-button-disabled { cursor: not-allowed; opacity: 0; } .step1 .package_container main .package_block { width: 90%; } .step1 .package_container main .package_block .bag_list { width: 100%; display: flex; justify-content: space-evenly; align-items: stretch; flex-direction: row; flex-wrap: wrap; position: relative; z-index: 8; } .step1 .package_container main .package_block .bag_list .item_box { border-width: calc(var(--base-font-size) * 0.65); border-style: solid; -o-border-image: url("../images/frame.png") 25 stretch; border-image: url("../images/frame.png") 25 fill stretch; padding: calc(var(--base-font-size) * 0.5) calc(var(--base-font-size) * 0.25); width: 30%; max-width: 500px; height: auto; aspect-ratio: 500/542; display: flex; justify-content: center; align-items: center; flex-direction: column; flex-wrap: nowrap; } @media screen and (max-width: 767px) { .step1 .package_container main .package_block .bag_list .item_box { width: 47%; } .step1 .package_container main .package_block .bag_list .item_box:last-of-type { margin-top: calc(var(--base-font-size) * 0.5); } } .step1 .package_container main .package_block .bag_list .item_box.poetics1 .tc { letter-spacing: calc(var(--base-font-size) * 0.1); } .step1 .package_container main .package_block .bag_list .item_box.poetics1 .en { letter-spacing: calc(var(--base-font-size) * 0.2); } .step1 .package_container main .package_block .bag_list .item_box.poetics2 .en { letter-spacing: calc(var(--base-font-size) * 0.05); } .step1 .package_container main .package_block .bag_list .item_box.poetics3 .tc { letter-spacing: calc(var(--base-font-size) * 0.2); } .step1 .package_container main .package_block .bag_list .item_box.poetics3 .en { letter-spacing: calc(var(--base-font-size) * 0.3); } .step1 .package_container main .package_block .bag_list .item_box .title_block { max-width: 100%; margin: 0 auto; } .step1 .package_container main .package_block .bag_list .item_box .title_block .tc, .step1 .package_container main .package_block .bag_list .item_box .title_block .en { width: -moz-fit-content; width: fit-content; margin: 0 auto; padding: 0 calc(var(--base-font-size) * 0.65); } @media screen and (max-width: 430px) { .step1 .package_container main .package_block .bag_list .item_box .title_block .tc, .step1 .package_container main .package_block .bag_list .item_box .title_block .en { padding: 0 calc(var(--base-font-size) * 0.4); } } .step1 .package_container main .package_block .bag_list .item_box .title_block .tc { font-family: "Noto Serif TC", serif; font-weight: 600; font-size: var(--base-font-size); } .step1 .package_container main .package_block .bag_list .item_box .title_block .decor_block { width: 100%; margin: calc(var(--base-font-size) * 0.15) 0; display: flex; justify-content: stretch; align-items: center; flex-direction: row; flex-wrap: nowrap; } .step1 .package_container main .package_block .bag_list .item_box .title_block .decor_block .decor_star { margin: 0 calc(var(--base-font-size) * 0.15); padding: 0; } .step1 .package_container main .package_block .bag_list .item_box .title_block .decor_block > .decor_star { transform: scale(1.2, 1.6); } .step1 .package_container main .package_block .bag_list .item_box .title_block .decor_block .decor { display: flex; justify-content: space-between; align-items: center; flex-direction: row; flex-wrap: nowrap; flex-grow: 0.5; flex-shrink: 0.5; opacity: 0.8; pointer-events: none; } .step1 .package_container main .package_block .bag_list .item_box .title_block .decor_block .decor .line { height: 2px; --decor-opacity: 0.8; background: linear-gradient(to right, rgba(160, 148, 118, 0) 0%, rgb(160, 148, 118) 4%); flex: 1 1 auto; } .step1 .package_container main .package_block .bag_list .item_box .title_block .en { font-family: "Noto Serif TC", serif; font-weight: 500; font-size: calc(var(--base-font-size) * 0.65); transform: scaleY(0.95); } .step1 .package_container main .package_block .inner_box { width: 100%; margin-top: calc(var(--base-font-size) * 2.5); display: flex; justify-content: space-evenly; align-items: stretch; flex-direction: row; flex-wrap: wrap; position: relative; z-index: 7; } .step1 .package_container main .package_block .inner_box .item_box { width: 30%; max-width: 500px; height: auto; aspect-ratio: 500/430; } @media screen and (max-width: 767px) { .step1 .package_container main .package_block .inner_box .item_box { width: 47%; } .step1 .package_container main .package_block .inner_box .item_box:last-of-type { margin-top: calc(var(--base-font-size) * 0.5); } } .step1 .package_container main .package_block .inner_box .item_box .inner_img { width: 100%; position: relative; } .step1 .package_container main .package_block .inner_box .item_box .inner_img::before { content: ""; width: 100%; height: auto; display: block; position: absolute; left: 0; top: -5%; pointer-events: none; z-index: -1; aspect-ratio: 1/1; background: linear-gradient(135deg, #39539c 0%, #1e2744 50%, #161e36 100%); border: 2px solid var(--color-decor-list); transform: rotate(45deg) scale(0.7); box-shadow: inset 0 0 15px rgba(0, 10, 50, 0.5); opacity: 0.8; } .step1 .package_container main .package_block .inner_box .item_box .inner_info { width: -moz-fit-content; width: fit-content; margin: 0 auto; padding: 0 calc(var(--base-font-size) * 0.5) calc(var(--base-font-size) * 0.1); font-family: "Noto Sans TC", sans-serif; font-weight: 400; font-size: calc(var(--s-font-size) * 1.1); color: var(--color-brightness); text-shadow: 0 2px 1px rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; flex-direction: row; flex-wrap: nowrap; filter: drop-shadow(0 2px 0px rgba(109, 175, 206, 0.8)) drop-shadow(0 2px 7px rgba(0, 0, 0, 0.3)); position: relative; } .step1 .package_container main .package_block .inner_box .item_box .inner_info::before { content: ""; width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; pointer-events: none; background-image: linear-gradient(-45deg, #123c7f 0%, #09478c 60%, #094a8c 61%, #0064a4 100%); clip-path: polygon(7% 0%, 93% 0%, 100% 50%, 93% 100%, 7% 100%, 0% 50%); box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.5); z-index: -1; } .step1 .package_container main .package_block .inner_box .item_box .inner_info .decor_star { background-color: var(--color-brightness); opacity: 0.7; transform: translateY(1px); } .step1 .package_container main .package_block .sns_2d_block { width: 95%; margin: 0 auto; padding-bottom: calc(var(--base-font-size) * 1.1); position: relative; position: relative; z-index: 6; } @media (max-width: 767px) { .step1 .package_container main .package_block .sns_2d_block { width: 100%; } } .step1 .package_container main .package_block .sticker_block { width: 95%; margin: 0 auto; padding-bottom: calc(var(--base-font-size) * 1.1); position: relative; position: relative; z-index: 5; } @media (max-width: 767px) { .step1 .package_container main .package_block .sticker_block { width: 100%; } } .step1 .package_container main .package_block .sticker_block .swiper-container { width: 100%; } .step1 .package_container main .package_block .sticker_block .swiper-container .swiper-wrapper { width: 100%; } .step1 .package_container main .package_block .sticker_block .swiper-container .swiper-wrapper .swiper-slide { width: -moz-fit-content; width: fit-content; height: auto; aspect-ratio: 1/1; } .step1 .package_container main .package_block .item_content { margin-top: calc(var(--base-font-size) * 1.5); position: relative; z-index: 4; } .step1 .package_container main .package_block .item_content .wrapper { background-image: url(../images/svg/decor_corner_lt.svg), url(../images/svg/decor_corner_rt.svg), url(../images/svg/decor_corner_lb.svg), url(../images/svg/decor_corner_rb.svg); background-repeat: no-repeat; background-position: left top, right top, left bottom, right bottom; background-size: 20% auto; } .step1 .package_container main .sns_card_block { width: 90%; display: flex; justify-content: center; align-items: center; flex-direction: row; flex-wrap: wrap; position: relative; z-index: 3; } .step1 .package_container main .sns_card_block .item_box { width: 50%; max-width: 472px; height: auto; aspect-ratio: 472/400; background-image: url("../images/box_sns_3d.png"); background-repeat: no-repeat; background-position: center top; background-size: 100% auto; transform: translateX(5%); } @media screen and (max-width: 767px) { .step1 .package_container main .sns_card_block .item_box { width: 65%; } } @media screen and (max-width: 767px) { .step1 .package_container main .sns_card_block .item_content { margin-top: var(--base-font-size); } } .step1 .package_container main .sns_card_block .sns_3d_block { width: 95%; margin: 0 auto; padding-bottom: calc(var(--base-font-size) * 1.1); position: relative; } @media (max-width: 767px) { .step1 .package_container main .sns_card_block .sns_3d_block { width: 100%; } } .step1 .package_container main .purchase_block { width: 90%; font-size: var(--base-font-size); position: relative; z-index: 2; } .step1 .package_container main .purchase_block .item_list { width: 100%; border-width: calc(var(--base-font-size) * 0.65); border-style: solid; -o-border-image: url("../images/frame.png") 25 stretch; border-image: url("../images/frame.png") 25 fill stretch; padding: calc(var(--base-font-size) * 0.25); } .step1 .package_container main .purchase_block .item_list ul { width: 100%; padding: 0 calc(var(--base-font-size) * 0.5); display: flex; justify-content: stretch; align-items: stretch; flex-direction: column; flex-wrap: nowrap; } .step1 .package_container main .purchase_block .item_list ul li { width: 100%; padding: calc(var(--base-font-size) * 0.4) 0; display: flex; justify-content: space-between; align-items: center; flex-direction: row; flex-wrap: nowrap; border-bottom: 1px solid var(--color-decor-list); } .step1 .package_container main .purchase_block .item_list ul li + li { margin-top: calc(var(--base-font-size) * 0.5); } .step1 .package_container main .purchase_block .item_list ul li .item_name { width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-direction: row; flex-wrap: wrap; font-weight: 600; } @media screen and (max-width: 767px) { .step1 .package_container main .purchase_block .item_list ul li .item_name { margin-bottom: calc(var(--base-font-size) * 0.5); } } .step1 .package_container main .purchase_block .item_list ul li .item_name span { pointer-events: none; } .step1 .package_container main .purchase_block .item_list ul li .item_name span + span { display: flex; justify-content: flex-start; align-items: center; flex-direction: row; flex-wrap: nowrap; } .step1 .package_container main .purchase_block .item_list ul li .item_name span + span::before { content: "◆"; margin: 0 calc(var(--base-font-size) * 0.25); font-size: calc(var(--base-font-size) * 0.25); } @media (min-width: 768px) { .step1 .package_container main .purchase_block .item_list ul li .item_name { width: auto; flex: 1 1 auto; } .step1 .package_container main .purchase_block .item_list ul li > div:not(:first-child) { width: -moz-fit-content; width: fit-content; flex: 0 0 auto; } .step1 .package_container main .purchase_block .item_list ul li > div + div { margin-left: var(--base-font-size); } } .step1 .package_container main .purchase_block .item_list ul li .item_price { color: var(--color-lighter); } .step1 .package_container main .purchase_block .item_list ul li .item_price span.include_shipping { font-size: calc(var(--base-font-size) * 0.8); } .step1 .package_container main .purchase_block .item_list ul li .item_checkbox { position: relative; } .step1 .package_container main .purchase_block .item_list ul li .item_checkbox input[type=checkbox] { display: none; } .step1 .package_container main .purchase_block .item_list ul li .item_checkbox .check--label { display: flex; justify-content: flex-end; align-items: center; flex-direction: row; flex-wrap: nowrap; } .step1 .package_container main .purchase_block .item_list ul li .item_checkbox span + span { margin-left: calc(var(--base-font-size) * 0.25); } @media screen and (max-width: 767px) { .step1 .package_container main .purchase_block .item_list ul li .item_checkbox span + span { margin-left: initial; margin-right: calc(var(--base-font-size) * 0.25); } } .step1 .package_container main .purchase_block .item_list ul li .item_checkbox .check--label-box { width: calc(var(--base-font-size) * 0.75); height: auto; aspect-ratio: 1/1; border: 2px solid var(--color-main); border-radius: 2px; transform: translateY(calc(var(--base-font-size) * 0.05)); position: relative; cursor: pointer; } @media screen and (max-width: 767px) { .step1 .package_container main .purchase_block .item_list ul li .item_checkbox .check--label-box { width: var(--base-font-size); order: 2; } } @media screen and (max-width: 430px) { .step1 .package_container main .purchase_block .item_list ul li .item_checkbox .check--label-box { width: calc(var(--base-font-size) * 1.1); } } .step1 .package_container main .purchase_block .item_list ul li .item_checkbox .check--label-box::before { content: ""; width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; pointer-events: none; background: linear-gradient(to bottom, rgb(255, 255, 192) 0%, rgb(195, 162, 98) 100%); opacity: 0; transition: all 0.3s ease; } .step1 .package_container main .purchase_block .item_list ul li .item_checkbox .check--label-box::after { --border-w: 3px; content: ""; width: calc(var(--base-font-size) * 0.25); height: auto; display: block; position: absolute; left: 15%; top: 45%; pointer-events: none; aspect-ratio: 1/2; border: solid var(--color-dark-blue); border-width: 0 var(--border-w) var(--border-w) 0; transform: rotate(45deg) translate(-50%, -50%); opacity: 0; transition: all 0.3s ease; } @media screen and (max-width: 767px) { .step1 .package_container main .purchase_block .item_list ul li .item_checkbox .check--label-box::after { width: calc(var(--base-font-size) * 0.35); } } @media screen and (max-width: 360px) { .step1 .package_container main .purchase_block .item_list ul li .item_checkbox .check--label-box::after { --border-w: 2px; left: 10%; } } .step1 .package_container main .purchase_block .item_list ul li .item_checkbox .check--label-text { font-size: calc(var(--base-font-size) * 0.8); color: var(--color-brightness); position: relative; transition: all 0.3s ease; } @media screen and (max-width: 767px) { .step1 .package_container main .purchase_block .item_list ul li .item_checkbox .check--label-text { font-size: calc(var(--base-font-size) * 0.9); order: 1; } } @media screen and (max-width: 430px) { .step1 .package_container main .purchase_block .item_list ul li .item_checkbox .check--label-text { font-size: calc(var(--base-font-size) * 0.95); } } .step1 .package_container main .purchase_block .item_list ul li .item_checkbox input[type=checkbox]:checked + .check--label .check--label-box::before { opacity: 1; } .step1 .package_container main .purchase_block .item_list ul li .item_checkbox input[type=checkbox]:checked + .check--label .check--label-box::after { opacity: 1; } .step1 .package_container main .purchase_block .item_list ul li .item_checkbox input[type=checkbox]:checked + .check--label .check--label-text { color: var(--color-main); } .step1 .package_container main .purchase_block .item_list ul li .item_checkbox input[type=checkbox]:disabled + .check--label .check--label-box { border-color: var(--color-lighter); background-color: var(--color-dark-blue); opacity: 0.5; cursor: not-allowed; } .step1 .package_container main .purchase_block .item_list ul li .item_checkbox input[type=checkbox]:disabled + .check--label .check--label-text { color: var(--color-lighter); opacity: 0.5; } @media (max-width: 767px) { .step1 .package_container main .purchase_block .item_list ul li { flex-wrap: wrap; } } .step1 .package_container main .purchase_block .item_list .btn_checkout { max-width: 320px; margin: var(--base-font-size) auto 0 auto; width: 30%; height: auto; background-repeat: no-repeat; background-position: left top; background-size: 100% auto; background-image: url("../images/btn_checkout.png"); display: block; text-decoration: none; text-align: center; font-size: 0; line-height: 0; color: inherit; transition: all 0.4s ease; cursor: pointer; aspect-ratio: 320/96; } .step1 .package_container main .purchase_block .item_list .btn_checkout:hover { filter: contrast(1.1) brightness(1.1) hue-rotate(-5deg); } .step1 .package_container main .purchase_block .item_list .btn_checkout:hover { transform: translateY(-2px); } @media screen and (max-width: 767px) { .step1 .package_container main .purchase_block .item_list .btn_checkout { width: 50%; } } .step1 .package_container main .attention_block { width: -moz-fit-content; width: fit-content; max-width: 90%; position: relative; z-index: 1; } .step1 .modal-dialog { transform: translate(0, 0) !important; } @media screen and (min-width: 768px) { .step1 .modal-dialog { width: 80%; max-width: 1280px; } } .step1 .modal-dialog .btn:focus, .step1 .modal-dialog .btn:active:focus, .step1 .modal-dialog .btn.active:focus, .step1 .modal-dialog .btn_primary:focus, .step1 .modal-dialog .btn_primary:active:focus, .step1 .modal-dialog .btn_primary.active:focus, .step1 .modal-dialog .close:focus, .step1 .modal-dialog .close:active:focus, .step1 .modal-dialog .close.active:focus { outline: 0 !important; box-shadow: 0 0 0 transparent !important; } .step1 .modal-dialog .modal-content { background-color: #222d4f; border: clamp(1px, 1vw, 2px) solid rgb(132, 121, 94); } .step1 .modal-dialog .modal-content .modal-header { border-bottom: none; padding: 0; position: relative; } .step1 .modal-dialog .modal-content .modal-header .modal-title { width: 100%; font-size: initial; } .step1 .modal-dialog .modal-content .modal-header .modal-title .stitle { width: 85%; margin-top: calc(var(--base-font-size) * 1); margin-bottom: 0; } .step1 .modal-dialog .modal-content .modal-header .close { transition: all 0.3s; color: var(--color-lighter); font-size: var(--base-font-size); text-shadow: none; border: 0; position: absolute; right: clamp(6px, 1vw, 1rem); top: clamp(6px, 1vw, 1rem); } .step1 .modal-dialog .modal-content .modal-header .close:hover { color: var(--color-main); transform: rotate(90deg); } .step1 .modal-dialog .modal-content .modal-body { width: 90%; margin: 0 auto; padding-bottom: 0; } .step1 .modal-dialog .modal-content .modal-footer { border-top: none; } .step1 .modal-dialog .modal-content .modal-footer .btn-primary { max-width: 260px; margin: 0 auto; font-size: var(--base-font-size); width: 30%; height: auto; background-repeat: no-repeat; background-position: left top; background-size: 100% auto; background-image: url("../images/btn_confirm.png"); display: block; text-decoration: none; text-align: center; font-size: 0; line-height: 0; color: inherit; transition: all 0.4s ease; cursor: pointer; aspect-ratio: 320/96; background-color: transparent; border: 0; } .step1 .modal-dialog .modal-content .modal-footer .btn-primary:hover { filter: contrast(1.1) brightness(1.1) hue-rotate(-5deg); } .step1 .modal-dialog .modal-content .modal-footer .btn-primary:hover { transform: translateY(-2px); } @media screen and (max-width: 767px) { .step1 .modal-dialog .modal-content .modal-footer .btn-primary { width: 50%; } } .step1 .modal-backdrop { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background-color: rgba(0, 0, 0, 0.5); } @media screen and (max-width: 767px) { .step1 .modal-backdrop { background-color: rgb(0, 0, 0); } } .step1 .modal-backdrop.show { opacity: 1; } /*# sourceMappingURL=main.css.map */