.section_area {padding: 4vw 0;} .section_area .area_title { position: relative; padding-bottom: .3em; letter-spacing: .1em; text-align: center; } .section_area .area_title:before { position: absolute; width: 3em; height: .1em; background: var(--primary); display: block; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); content: ""; } .section_area .sub_title {font-weight: 500;color: #a58b7c;letter-spacing: 2px;margin-bottom: 3vw;font-size: 13px;letter-spacing: 1.5px;} .section_area .list_box { margin-top: 2vmax; } .section_area .list_box .slick-dots { position: relative; margin: 1em 0; bottom: 0; } section .more_btn{padding: 8px 0;color: white;background: var(--third);border: 1px solid var(--third);border-radius: 50px;width: 150px;text-align: center;font-size: 13px;letter-spacing: 1px;font-weight: 500;} section .more_btn:hover{gap:60px;} section .more_btn span{position:relative;display:block;width: 25px;height:8px} section .more_btn span:before{display:block;content:"";width:100%;height:1px;background-color: var(--info);position:absolute;top:auto;left:0;bottom:0;right:auto} section .more_btn span:after{display:block;content:"";width:1px;height:100%;background-color: var(--info);position:absolute;top:auto;left:auto;bottom: 1px;right:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:bottom;transform-origin:bottom} section .title_box .deco-title {position: absolute;top: -90px;left: 0;font-size: 86px;font-weight: 900;color: rgb(149 149 149 / 15%);letter-spacing: 0px;pointer-events: none;width: 100%;} section .title_box .subtitle{font-size: 2.2rem;color: var(--primary);position: relative;line-height: 130%;margin-bottom: 50px;letter-spacing: 3px;text-align: center;font-weight: 700;} section .title_box .sub-text { font-size: 1.4rem; font-weight: 400; line-height: 32px; color: var(--info); text-align: center; } section .title_box .noteBox { line-height: 190%; letter-spacing: 0.5px; font-weight: 500; font-size: 20px; color: #181818; position: relative; margin-top: 35px; word-spacing: 100vw; } /* wrap */ #wrap { overflow: hidden; position: relative; } #wrap::before { position: absolute; width: 100%; height: 30%; background: linear-gradient(to top,rgb(0 0 0/0%) 0%,#f8f4ef 100%); top: 0; left: 0; z-index: 1; content: ""; } #wrap::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; right: 0; background: url(/images/01/img-Bg.jpg); background-size: cover; background-position: 50% 15%; background-repeat: no-repeat; display: block; backdrop-filter: blur(15px); z-index: 0; opacity: .5; } section { position: relative; z-index: 1; } /* earthValueIntro */ #earthValueIntro {position: relative;display: flex;justify-content: center;flex-direction: column;align-items: center;padding-top: 20px;} #earthValueIntro .earth-value-inner {margin: 0px auto 10px;width: min(100%,1280px);} #earthValueIntro .earth-value-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); overflow: hidden; } #earthValueIntro .earth-value-item { position: relative; display: flex; align-items: center; gap: 26px; padding: 26px 0; } #earthValueIntro .earth-value-item + .earth-value-item::before { content: ""; position: absolute; left: -50px; top: 50%; transform: translateY(-50%); width: 1px; height: 92px; background: rgba(63,86,63,0.14); } #earthValueIntro .earth-value-icon { position: relative; flex: 0 0 90px; width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; } #earthValueIntro .earth-value-icon img { width: 100%; height: 100%; display: block; object-fit: contain; } #earthValueIntro .earth-value-content { flex: 1; min-width: 0; } #earthValueIntro .earth-value-content .Txt {margin: 0 0 14px;font-size: 22px;line-height: 1.2;font-weight: 700;letter-spacing: 0.04em;color: var(--primary);} #earthValueIntro .earth-value-content p { margin: 0; font-family: var(--font-sans); font-size: 18px; line-height: 1.7; font-weight: 400; letter-spacing: 0.04em; color: color-mix(in srgb,var(--info) 72%,white); } /* SVG 樣式 */ #earthValueIntro .circle-line { fill: none; stroke: rgba(63,86,63,0.08); stroke-width: 1.4; } #earthValueIntro .leaf-fill { fill: var(--primary); } #earthValueIntro .leaf-fill-light { fill: var(--green); } #earthValueIntro .leaf-line,#earthValueIntro .wave-line,#earthValueIntro .plant-line { fill: none; stroke: var(--info); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } #earthValueIntro .dot-gold { fill: var(--third); } @media (max-width:1180px) { #earthValueIntro .earth-value-item { padding: 24px 24px; gap: 18px; } #earthValueIntro .earth-value-icon { flex: 0 0 96px; width: 96px; height: 96px; } #earthValueIntro .earth-value-content .Txt {font-size: 20px;margin: 0 0 5px;} #earthValueIntro .earth-value-content p { font-size: 18px; } } @media (max-width:900px) { #earthValueIntro .earth-value-list { grid-template-columns: 1fr; } #earthValueIntro .earth-value-item + .earth-value-item::before { left: 24px; right: 24px; top: 0; transform: none; width: auto; height: 1px; } } @media (max-width:767px) { #earthValueIntro .earth-value-item {padding: 22px 18px;gap: 16px;min-height: auto;} #earthValueIntro .earth-value-icon {flex: 0 0 60px;width: 60px;height: 60px;} #earthValueIntro .earth-value-content h3 { margin-bottom: 8px; font-size: 22px; } #earthValueIntro .earth-value-content p { font-size: 15px; line-height: 1.75; } #earthValueIntro .earth-value-content p br { display: none; } } /* earthCourseSplit */ #earthCourseSplit {padding: 4vw 0;} #earthCourseSplit .earth-course-shell * { transition: unset; -webkit-transition: unset; } #earthCourseSplit .earth-course-head { text-align: center; } #earthCourseSplit .earth-course-title { margin: 0; font-size: 54px; line-height: 1.3; font-weight: 700; letter-spacing: 0.08em; color: var(--info); } #earthCourseSplit .earth-course-butterfly { display: inline-flex; align-items: center; justify-content: center; margin-top: 10px; } #earthCourseSplit .earth-course-butterfly svg { width: 34px; height: 34px; display: block; fill: none; stroke: var(--third); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } #earthCourseSplit .earth-course-shell { position: relative; max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1px 1fr; border-radius: 42px; overflow: hidden; background: #ddd; box-shadow: 0 24px 60px rgba(31,41,36,0.12); opacity: 1; transform: translateY(0) scale(1); filter: blur(0); transition: opacity 0.9s ease,transform 0.9s cubic-bezier(0.22,1,0.36,1),filter 0.9s ease; } #earthCourseSplit.is-anim-ready .earth-course-shell { opacity: 0; transform: translateY(54px) scale(0.985); filter: blur(8px); } #earthCourseSplit.is-anim-ready .earth-course-shell.is-show { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } #earthCourseSplit .earth-course-panel { position: relative; min-height: 520px; overflow: hidden; --rx: 0deg; --ry: 0deg; --mx: 0px; --my: 0px; --cx: 0px; --cy: 0px; transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform 0.25s ease,box-shadow 0.35s ease; will-change: transform; } #earthCourseSplit .earth-course-panel.is-parallax { box-shadow: 0 34px 76px rgba(31,41,36,0.2); } #earthCourseSplit .earth-course-panel::after { content: ""; position: absolute; inset: 0; z-index: 2; background: radial-gradient(circle at var(--glow-x,50%) var(--glow-y,50%),rgba(255,255,255,0.22) 0%,rgba(255,255,255,0.08) 26%,rgba(255,255,255,0) 58%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } #earthCourseSplit .earth-course-panel.is-parallax::after { opacity: 1; } #earthCourseSplit .earth-course-bg { position: absolute; inset: 0; background-size: cover; background-position: center center; background-repeat: no-repeat; transform: translate3d(var(--mx),var(--my),0) scale(1.08); transition: transform 0.35s ease; will-change: transform; } #earthCourseSplit .earth-course-panel-left .earth-course-bg { background-position: left center; } #earthCourseSplit .earth-course-panel-right .earth-course-bg { background-position: center center; } #earthCourseSplit .earth-course-overlay { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(25,40,27,0.18) 0%,rgba(25,40,27,0.16) 32%,rgba(25,40,27,0.5) 100%),linear-gradient(90deg,rgba(25,40,27,0.42) 0%,rgba(25,40,27,0.1) 100%); } #earthCourseSplit .earth-course-panel-right .earth-course-overlay { background: linear-gradient(180deg,rgba(25,40,27,0.18) 0%,rgba(25,40,27,0.16) 32%,rgba(25,40,27,0.5) 100%),linear-gradient(270deg,rgba(25,40,27,0.42) 0%,rgba(25,40,27,0.1) 100%); } #earthCourseSplit .earth-course-content { position: relative; z-index: 3; height: 100%; padding: 66px 60px 42px; display: flex; flex-direction: column; justify-content: flex-start; color: var(--white); transform: translate3d(var(--cx),var(--cy),46px); transition: transform 0.35s ease; will-change: transform; } #earthCourseSplit .earth-course-content::after { position: absolute; width: 100%; height: 60%; background: linear-gradient(to bottom,rgb(0 0 0/0%) 40%,#0e1607 100%); bottom: 0; left: 0; z-index: -1; content: ""; opacity: .6; } #earthCourseSplit .earth-course-panel-right .earth-course-content * { text-align: right; } #earthCourseSplit .earth-course-panel-right .earth-course-content li { padding-left: 0; padding-right: 34px; } #earthCourseSplit .earth-course-panel-right .earth-course-content { display: flex; align-items: flex-end; } #earthCourseSplit .earth-course-panel-right .earth-course-content li::before { left: auto; right: 0; } #earthCourseSplit .earth-course-card-title { margin: 0; font-size: 38px; line-height: 1.1; font-weight: 700; letter-spacing: 0.08em; color: var(--white); text-shadow: 0 3px 10px rgba(0,0,0,0.22); } #earthCourseSplit .earth-course-subtitle { margin-top: 18px; font-size: 21px; line-height: 1.5; font-weight: 500; letter-spacing: 0.08em; color: rgba(255,255,255,0.96); } #earthCourseSplit .earth-course-content ul { margin: 34px 0 0; padding: 0; list-style: none; } #earthCourseSplit .earth-course-content li { position: relative; padding-left: 34px; font-family: var(--font-sans); font-size: 18px; line-height: 1.9; font-weight: 400; letter-spacing: 0.04em; color: rgba(255,255,255,0.96); } #earthCourseSplit .earth-course-content li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: #f3f0df; font-size: 22px; font-weight: 700; } #earthCourseSplit .earth-course-btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; margin-top: auto; width: fit-content; min-height: 74px; padding: 0 36px; border-radius: 999px; font-family: var(--font-sans); font-size: 24px; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; transition: all 0.35s ease; } #earthCourseSplit .earth-course-btn svg { width: 20px; fill: var(--black); transition: transform 0.35s ease; } #earthCourseSplit .earth-course-btn:hover svg { transform: translateX(6px); } #earthCourseSplit .earth-course-btn-green { background: var(--secondary); color: var(--white); box-shadow: 0 12px 24px rgba(31,41,36,0.18); } #earthCourseSplit .earth-course-btn-green:hover { background: #7f9461; transform: translateY(-2px); } #earthCourseSplit .earth-course-btn-green:hover span,#earthCourseSplit .earth-course-btn-white:hover span{ color: var(--light); } #earthCourseSplit .earth-course-btn-green:hover svg, #earthCourseSplit .earth-course-btn-white:hover svg{ fill: var(--light); } #earthCourseSplit .earth-course-btn-white { background: rgba(255,255,255,0.95); color: var(--info); box-shadow: 0 12px 24px rgba(31,41,36,0.16); } #earthCourseSplit .earth-course-btn-white:hover {background: var(--indigo);transform: translateY(-2px);} #earthCourseSplit .earth-course-divider { position: relative; z-index: 4; background: transparent; overflow: visible; } #earthCourseSplit .earth-course-line { position:absolute;left:50%;top:0;transform:translateX(-50%);width:10px;height:100%;opacity:0.72;background:linear-gradient( 180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.22) 14%,rgba(255,255,255,0.5) 32%,rgba(255,255,255,0.65) 50%,rgba(255,255,255,0.5) 68%,rgba(255,255,255,0.22) 86%,rgba(255,255,255,0) 100% );filter:blur(6px); } #earthCourseSplit .earth-course-divider::before { content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:140px;height:100%;background:linear-gradient( 90deg,rgba(248,244,236,0) 0%,rgba(248,244,236,0.12) 20%,rgba(255,255,255,0.42) 50%,rgba(248,244,236,0.12) 80%,rgba(248,244,236,0) 100% );filter:blur(22px);pointer-events:none; } #earthCourseSplit .earth-course-divider::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.12) 48%,rgba(255,255,255,0) 100%); filter: blur(10px); pointer-events: none; } #earthCourseSplit .earth-course-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 126px; height: 126px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.12); } #earthCourseSplit .earth-course-badge::before { content: ""; position: absolute; inset: -18px; border-radius: 50%; background: radial-gradient(circle,rgba(255,255,255,0.95) 0%,rgba(255,255,255,0.56) 34%,rgba(255,255,255,0.06) 70%,rgba(255,255,255,0) 100%); animation: earthCourseGlow 2.8s ease-in-out infinite; } #earthCourseSplit .earth-course-badge-core { position: relative; z-index: 2; width: 110px; height: 110px; border-radius: 50%; background: rgba(255,255,255,0.84); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 32px rgba(255,255,255,0.66); padding: 10px; } #earthCourseSplit .earth-course-badge-core svg { width: 74px; height: 74px; display: block; fill: none; stroke: var(--third); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } #earthCourseSplit .earth-course-badge-core svg circle { stroke-width: 2.8; } @keyframes earthCourseGlow { 0% { transform: scale(0.92); opacity: 0.6; } 50% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(0.92); opacity: 0.6; } } #earthCourseSplit .earth-course-shell { transition: grid-template-columns 0.6s cubic-bezier(0.22,1,0.36,1),opacity 0.9s ease,transform 0.9s cubic-bezier(0.22,1,0.36,1),filter 0.9s ease; } #earthCourseSplit .earth-course-shell.is-hover-left { grid-template-columns: 1.26fr 1px 0.74fr; } #earthCourseSplit .earth-course-shell.is-hover-right { grid-template-columns: 0.74fr 1px 1.26fr; } #earthCourseSplit .earth-course-shell { transition: grid-template-columns 0.8s cubic-bezier(0.22,1,0.36,1),opacity 0.9s ease,transform 0.9s cubic-bezier(0.22,1,0.36,1),filter 0.9s ease; } #earthCourseSplit .earth-course-panel { transition: opacity 0.65s ease,transform 0.65s cubic-bezier(0.22,1,0.36,1),filter 0.65s ease,box-shadow 0.65s ease; } #earthCourseSplit .earth-course-content,#earthCourseSplit .earth-course-bg,#earthCourseSplit .earth-course-overlay,#earthCourseSplit .earth-course-badge,#earthCourseSplit .earth-course-line { transition: opacity 0.65s ease,transform 0.65s cubic-bezier(0.22,1,0.36,1),filter 0.65s ease,background 0.65s ease,box-shadow 0.65s ease; } #earthCourseSplit .earth-course-shell.is-hover-left .earth-course-panel-left,#earthCourseSplit .earth-course-shell.is-hover-right .earth-course-panel-right { z-index: 6; transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.015); } #earthCourseSplit .earth-course-shell.is-hover-left .earth-course-panel-left .earth-course-bg,#earthCourseSplit .earth-course-shell.is-hover-right .earth-course-panel-right .earth-course-bg { filter: brightness(1.06) saturate(1.06); transform: translate3d(var(--mx),var(--my),0) scale(1.1); } #earthCourseSplit .earth-course-shell.is-hover-left .earth-course-panel-left .earth-course-content,#earthCourseSplit .earth-course-shell.is-hover-right .earth-course-panel-right .earth-course-content { opacity: 1; transform: translate3d(var(--cx),var(--cy),56px) scale(1.01); } #earthCourseSplit .earth-course-shell.is-hover-right .earth-course-panel-right .earth-course-content::before { position: absolute; width: 30%; height: 100%; background: linear-gradient(to left,rgb(0 0 0/0%) 10%,#23281c 100%); top: 0; left: 0; z-index: 1; content: ""; opacity: .9; filter: blur(26px); } #earthCourseSplit .earth-course-shell.is-hover-left .earth-course-panel-right,#earthCourseSplit .earth-course-shell.is-hover-right .earth-course-panel-left { filter: saturate(0.9); } #earthCourseSplit .earth-course-shell.is-hover-left .earth-course-panel-right .earth-course-bg,#earthCourseSplit .earth-course-shell.is-hover-right .earth-course-panel-left .earth-course-bg { filter: blur(1.5px) brightness(0.82) saturate(0.88); transform: translate3d(var(--mx),var(--my),0) scale(1.08); } #earthCourseSplit .earth-course-shell.is-hover-left .earth-course-panel-right .earth-course-overlay,#earthCourseSplit .earth-course-shell.is-hover-right .earth-course-panel-left .earth-course-overlay { background: linear-gradient(180deg,rgba(25,40,27,0.26) 0%,rgba(25,40,27,0.5) 100%),rgba(25,40,27,0.24); */ } #earthCourseSplit .earth-course-shell.is-hover-left .earth-course-panel-right .earth-course-content,#earthCourseSplit .earth-course-shell.is-hover-right .earth-course-panel-left .earth-course-content { opacity: 0.55; transform: translate3d(var(--cx),calc(var(--cy) + 6px),46px) scale(0.98); } #earthCourseSplit .earth-course-shell.is-hover-left .earth-course-panel-right .earth-course-content ul,#earthCourseSplit .earth-course-shell.is-hover-left .earth-course-panel-right .earth-course-btn,#earthCourseSplit .earth-course-shell.is-hover-right .earth-course-panel-left .earth-course-content ul,#earthCourseSplit .earth-course-shell.is-hover-right .earth-course-panel-left .earth-course-btn { opacity: 0; transform: translateY(10px); pointer-events: none; } #earthCourseSplit .earth-course-shell.is-hover-left .earth-course-badge,#earthCourseSplit .earth-course-shell.is-hover-right .earth-course-badge { opacity: 0.18; transform: translate(-50%,-50%) scale(0.9); pointer-events: none; } #earthCourseSplit .earth-course-shell.is-hover-left .earth-course-line,#earthCourseSplit .earth-course-shell.is-hover-right .earth-course-line { opacity: 0.18; filter: blur(10px); } #earthCourseSplit .earth-course-shell.is-hover-left .earth-course-divider::before,#earthCourseSplit .earth-course-shell.is-hover-right .earth-course-divider::before { opacity: 0.38; filter: blur(28px); } #earthCourseSplit .earth-course-shell.is-hover-left .earth-course-divider::after,#earthCourseSplit .earth-course-shell.is-hover-right .earth-course-divider::after { opacity: 0.22; transform: translate(-50%,-50%) scale(0.92); } #earthCourseSplit .earth-course-shell.is-hover-left .earth-course-panel-left { box-shadow: inset -60px 0 90px rgba(255,255,255,0.08); } #earthCourseSplit .earth-course-shell.is-hover-right .earth-course-panel-right { box-shadow: inset 60px 0 90px rgba(255,255,255,0.08); } #earthCourseSplit .earth-course-shell.is-hover-left .earth-course-panel-right { box-shadow: inset 80px 0 110px rgba(248,244,236,0.08); } #earthCourseSplit .earth-course-shell.is-hover-right .earth-course-panel-left { box-shadow: inset -80px 0 110px rgba(248,244,236,0.08); } #earthCourseSplit .earth-course-content ul,#earthCourseSplit .earth-course-btn { transition: opacity 0.5s ease,transform 0.5s ease,background 0.35s ease,color 0.35s ease; } #earthCourseSplit .earth-course-panel-left::before,#earthCourseSplit .earth-course-panel-right::before { content: ""; position: absolute; top: 0; bottom: 0; width: 110px; z-index: 2; pointer-events: none; opacity: 0.7; transition: opacity 0.6s ease,filter 0.6s ease; } #earthCourseSplit .earth-course-panel-left::before { right: 0; background: linear-gradient(to right,rgb(0 0 0/0%) 100%,#23281c 100%); filter: blur(12px); } #earthCourseSplit .earth-course-panel-right::before { left: 0; filter: blur(12px); } #earthCourseSplit .earth-course-shell.is-hover-left .earth-course-panel-left::before,#earthCourseSplit .earth-course-shell.is-hover-right .earth-course-panel-right::before { opacity: 0.9; filter: blur(16px); } #earthCourseSplit .earth-course-shell.is-hover-left .earth-course-panel-right::before,#earthCourseSplit .earth-course-shell.is-hover-right .earth-course-panel-left::before { opacity: 0.85; filter: blur(14px); } @media (max-width:1024px) { #earthCourseSplit .earth-course-shell.is-hover-left,#earthCourseSplit .earth-course-shell.is-hover-right { grid-template-columns: 1fr; } #earthCourseSplit .earth-course-shell.is-hover-left .earth-course-panel-left,#earthCourseSplit .earth-course-shell.is-hover-right .earth-course-panel-right { transform: none !important; } #earthCourseSplit .earth-course-shell.is-hover-left .earth-course-panel-right,#earthCourseSplit .earth-course-shell.is-hover-right .earth-course-panel-left { filter: none; box-shadow: none; } #earthCourseSplit .earth-course-shell.is-hover-left .earth-course-panel-right .earth-course-bg,#earthCourseSplit .earth-course-shell.is-hover-right .earth-course-panel-left .earth-course-bg { filter: none; transform: scale(1.04) !important; } #earthCourseSplit .earth-course-shell.is-hover-left .earth-course-panel-right .earth-course-content,#earthCourseSplit .earth-course-shell.is-hover-right .earth-course-panel-left .earth-course-content { opacity: 1; transform: none !important; } #earthCourseSplit .earth-course-shell.is-hover-left .earth-course-panel-right .earth-course-content ul,#earthCourseSplit .earth-course-shell.is-hover-left .earth-course-panel-right .earth-course-btn,#earthCourseSplit .earth-course-shell.is-hover-right .earth-course-panel-left .earth-course-content ul,#earthCourseSplit .earth-course-shell.is-hover-right .earth-course-panel-left .earth-course-btn { opacity: 1; transform: none; pointer-events: auto; } #earthCourseSplit .earth-course-shell.is-hover-left .earth-course-badge,#earthCourseSplit .earth-course-shell.is-hover-right .earth-course-badge { opacity: 1; transform: translate(-50%,-50%) scale(1); pointer-events: auto; } } @media (max-width:1360px) { #earthCourseSplit .earth-course-title { font-size: 46px; } #earthCourseSplit .earth-course-panel { min-height: 500px; } #earthCourseSplit .earth-course-content { padding: 38px 34px 34px; } #earthCourseSplit .earth-course-card-title { font-size: 28px; } #earthCourseSplit .earth-course-subtitle { font-size: 22px; } #earthCourseSplit .earth-course-content li { font-size: 20px; } #earthCourseSplit .earth-course-btn { min-height: 64px; font-size: 20px; padding: 0 28px; } } @media (max-width:1024px) { #earthCourseSplit { padding: 44px 16px 24px; } #earthCourseSplit .earth-course-title { font-size: 38px; } #earthCourseSplit .earth-course-shell { grid-template-columns: 1fr; border-radius: 30px; } #earthCourseSplit .earth-course-divider { height: 0; background: transparent; } #earthCourseSplit .earth-course-line { display: none; } #earthCourseSplit .earth-course-badge { top: auto; bottom: -62px; width: 110px; height: 110px; display: none; } #earthCourseSplit .earth-course-badge-core { width: 96px; height: 96px; } #earthCourseSplit .earth-course-badge-core svg { width: 64px; height: 64px; } #earthCourseSplit .earth-course-panel { min-height: 460px; transform: none !important; } #earthCourseSplit .earth-course-panel-left { border-bottom: 1px solid rgba(255,255,255,0.2); } #earthCourseSplit .earth-course-panel-right { } #earthCourseSplit .earth-course-bg { transform: scale(1.04) !important; } #earthCourseSplit .earth-course-content { transform: none !important; } #earthCourseSplit .earth-course-card-title {} #earthCourseSplit .earth-course-subtitle { font-size: 20px; } #earthCourseSplit .earth-course-content li { font-size: 18px; } } @media (max-width:767px) { #earthCourseSplit {padding: 20px 20px 22px;} #earthCourseSplit .earth-course-head { margin-bottom: 20px; } #earthCourseSplit .earth-course-title { font-size: 28px; line-height: 1.5; } #earthCourseSplit .earth-course-butterfly svg { width: 26px; height: 26px; } #earthCourseSplit .earth-course-shell { border-radius: 24px; } #earthCourseSplit .earth-course-panel { min-height: 390px; } #earthCourseSplit .earth-course-content {padding: 40px 30px 26px;} #earthCourseSplit .earth-course-card-title {} #earthCourseSplit .earth-course-subtitle { margin-top: 10px; font-size: 16px; } #earthCourseSplit .earth-course-content ul { margin-top: 18px; } #earthCourseSplit .earth-course-content li { padding-left: 26px; font-size: 15px; line-height: 1.8; } #earthCourseSplit .earth-course-content li::before { font-size: 16px; } #earthCourseSplit .earth-course-btn { min-height: 52px; padding: 0 20px; font-size: 15px; gap: 10px; } #earthCourseSplit .earth-course-btn i { font-size: 14px; } #earthCourseSplit .earth-course-badge { bottom: -54px; width: 96px; height: 96px; } #earthCourseSplit .earth-course-badge-core { width: 82px; height: 82px; } #earthCourseSplit .earth-course-badge-core svg { width: 54px; height: 54px; } } /* earthGrowthPath */ #earthGrowthPath {position: relative;overflow: hidden;} #earthGrowthPath::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: radial-gradient(circle at 18% 28%,rgba(185,154,99,0.1) 0%,rgba(185,154,99,0) 28%),radial-gradient(circle at 78% 38%,rgba(113,131,101,0.1) 0%,rgba(113,131,101,0) 30%); pointer-events: none; } #earthGrowthPath .earth-growth-wrap {position: relative;margin: 0 auto;display: grid;grid-template-columns: 510px 1fr 1.28fr;align-items: start;min-height: 430px;background: linear-gradient(90deg,#f2eee5 0%,#fbf8f1 44%,#f7f2e9 100%);border-radius: 0;overflow: hidden;box-shadow: 0 18px 50px rgba(31,41,36,0.08);} #earthGrowthPath .earth-growth-wrap::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(120deg,rgba(63,86,63,0.04) 0%,rgba(63,86,63,0) 36%),linear-gradient(270deg,rgba(185,154,99,0.06) 0%,rgba(185,154,99,0) 48%); pointer-events: none; } #earthGrowthPath .earth-growth-photo {position: relative;z-index: 2;min-height: 400px;overflow: hidden;} #earthGrowthPath .earth-growth-photo::after {content: "";position: absolute;right: -1px;top: 0;width: 42%;height: 100%;background: linear-gradient(90deg, rgba(248, 244, 236, 0) 0%, rgb(246 244 235) 100%);pointer-events: none;} #earthGrowthPath .earth-growth-photo img {width: 100%;height: 100%;object-fit: cover;object-position: center center;display: block;transition: transform 0.8s ease;} #earthGrowthPath .earth-growth-wrap:hover .earth-growth-photo img { transform: scale(1.035); } #earthGrowthPath .earth-growth-message { position: relative; z-index: 2; padding: 120px 40px 52px 60px; display: flex; flex-direction: column; justify-content: center; } #earthGrowthPath .earth-growth-label { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; } #earthGrowthPath .earth-growth-label span,#earthGrowthPath .earth-growth-road-title span { font-size: 19px; line-height: 1.4; font-weight: 600; letter-spacing: 0.2em; color: var(--primary); } #earthGrowthPath .earth-growth-label i,#earthGrowthPath .earth-growth-road-title i { display: inline-flex; width: 24px; height: 24px; color: var(--green); } #earthGrowthPath .earth-growth-label svg,#earthGrowthPath .earth-growth-road-title svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } #earthGrowthPath .earth-growth-title h1 { font-size: 28px; line-height: 1.45; font-weight: 700; letter-spacing: 0.08em; color: var(--info); } #earthGrowthPath .earth-growth-text { margin-top: 28px; } #earthGrowthPath .earth-growth-text p { margin: 0 0 10px; font-family: var(--font-sans); font-size: 17px; line-height: 1.5; font-weight: 500; letter-spacing: 0.04em; color: color-mix(in srgb,var(--info) 62%,white); } #earthGrowthPath .earth-growth-sign-row { display: flex; align-items: center; gap: 18px; margin-top: 32px; } #earthGrowthPath .earth-growth-sign-row span { font-size: 18px; font-weight: 700; letter-spacing: 0.08em; color: color-mix(in srgb,var(--info) 68%,white); } #earthGrowthPath .earth-growth-sign-row strong { font-size: 18px; line-height: 1; font-weight: 500; color: color-mix(in srgb,var(--g_charcoal) 78%,white); display: flex; align-items: baseline; } #earthGrowthPath .earth-growth-sign-row img { width: 120px; } #earthGrowthPath .earth-growth-road { position: relative; z-index: 2; padding: 120px 44px 48px 54px; display: flex; flex-direction: column; justify-content: center; } #earthGrowthPath .earth-growth-road::before { content: ""; position: absolute; left: 0; top: 54px; bottom: 54px; width: 1px; background: linear-gradient(180deg,rgba(63,86,63,0) 0%,rgba(63,86,63,0.14) 22%,rgba(63,86,63,0.14) 78%,rgba(63,86,63,0) 100%); } #earthGrowthPath .earth-growth-road-title {display: flex;align-items: center;justify-content: flex-start;gap: 12px;margin-bottom: 32px;} #earthGrowthPath .earth-growth-step-list { position: relative; display: flex; flex-direction: column; gap: 26px; } #earthGrowthPath .earth-growth-step-list::before { content: ""; position: absolute; left: 28px; top: 48px; bottom: 48px; width: 1px; border-left: 1px dashed rgba(63,86,63,0.18); } #earthGrowthPath .earth-growth-step { position: relative; display: grid; grid-template-columns: 58px 108px 1fr; align-items: center; column-gap: 24px; } #earthGrowthPath .earth-growth-num { position: relative; z-index: 2; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--primary); color: var(--white); font-family: var(--font-sans); font-size: 18px; line-height: 1; font-weight: 700; letter-spacing: 0.02em; box-shadow: 0 8px 18px rgba(63,86,63,0.18); } #earthGrowthPath .earth-growth-icon { width: 108px; height: 108px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.52); box-shadow: inset 0 0 0 1px rgba(185,154,99,0.16),0 10px 22px rgba(31,41,36,0.05); transition: transform 0.45s ease,background 0.45s ease,box-shadow 0.45s ease; } #earthGrowthPath .earth-growth-step:hover .earth-growth-icon { transform: translateY(-4px) scale(1.04); background: rgba(255,255,255,0.78); box-shadow: inset 0 0 0 1px rgba(185,154,99,0.28),0 16px 30px rgba(31,41,36,0.09); } #earthGrowthPath .earth-growth-icon svg { width: 82px; height: 82px; display: block; fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } #earthGrowthPath .earth-growth-icon svg circle:first-child { stroke: rgba(185,154,99,0.36); stroke-width: 1.6; } #earthGrowthPath .earth-growth-icon svg circle:not(:first-child) { fill: var(--third); stroke: none; } #earthGrowthPath .earth-growth-icon svg path:nth-child(3),#earthGrowthPath .earth-growth-icon svg path:nth-child(4),#earthGrowthPath .earth-growth-icon svg path:nth-child(5) { fill: rgba(113,131,101,0.18); } #earthGrowthPath .earth-growth-step-title {font-size: 26px;line-height: 1.35;font-weight: 700;letter-spacing: 0.12em;color: var(--info);} #earthGrowthPath .earth-growth-step-text {margin-top: 8px;font-family: var(--font-sans);font-size: 17px;line-height: 1.75;font-weight: 500;letter-spacing: 0.03em;color: color-mix(in srgb,var(--info) 62%,white);width: min(300px , 100%);} @media (max-width:1480px) { #earthGrowthPath .earth-growth-message,#earthGrowthPath .earth-growth-road { padding-top: 60px; } #earthGrowthPath .earth-growth-wrap { grid-template-columns: 400px 1fr 1.28fr; } } @media (max-width:1366px) { #earthGrowthPath .earth-growth-wrap { grid-template-columns: 320px 1fr 1.2fr; } #earthGrowthPath .earth-growth-message { padding: 46px 28px 42px 18px; } #earthGrowthPath .earth-growth-title { font-size: 32px; } #earthGrowthPath .earth-growth-text p { font-size: 16px; } #earthGrowthPath .earth-growth-road { padding: 42px 30px 42px 42px; } #earthGrowthPath .earth-growth-road-title { font-size: 30px; } #earthGrowthPath .earth-growth-step { grid-template-columns: 52px 92px 1fr; column-gap: 18px; } #earthGrowthPath .earth-growth-icon { width: 92px; height: 92px; } #earthGrowthPath .earth-growth-icon svg { width: 70px; height: 70px; } #earthGrowthPath .earth-growth-step-title { font-size: 24px; } #earthGrowthPath .earth-growth-step-text { font-size: 15px; } } @media (max-width:1180px) { #earthGrowthPath .earth-growth-wrap { grid-template-columns: 1fr 1fr; } #earthGrowthPath .earth-growth-photo { grid-row: span 2; min-height: 520px; } #earthGrowthPath .earth-growth-message { padding: 42px 30px 24px; } #earthGrowthPath .earth-growth-road { padding: 24px 30px 42px; } #earthGrowthPath .earth-growth-road::before { display: none; } #earthGrowthPath .earth-growth-road-title { justify-content: flex-start; margin-bottom: 24px; } } @media (max-width:820px) { #earthGrowthPath { padding: 34px 14px 28px; } #earthGrowthPath .earth-growth-wrap { grid-template-columns: 1fr; border-radius: 28px; } #earthGrowthPath .earth-growth-photo {grid-row: auto;min-height: 280px;} #earthGrowthPath .earth-growth-photo::after {right: 0;top: auto;bottom: -1px;width: 100%;height: 60%;background: linear-gradient(180deg,rgba(248,244,236,0) 0%,rgba(248,244,236,1) 100%);} #earthGrowthPath .earth-growth-message {padding: 40px 20px 20px;} #earthGrowthPath .earth-growth-label { margin-bottom: 16px; font-size: 14px; } #earthGrowthPath .earth-growth-title { font-size: 24px; line-height: 1.65; } #earthGrowthPath .earth-growth-text { margin-top: 18px; } #earthGrowthPath .earth-growth-text p { font-size: 14px; line-height: 1.8; } #earthGrowthPath .earth-growth-sign-row { margin-top: 22px; } #earthGrowthPath .earth-growth-sign-row span { font-size: 14px; } #earthGrowthPath .earth-growth-sign-row strong { font-size: 40px; } #earthGrowthPath .earth-growth-road {padding: 40px 20px 30px;} #earthGrowthPath .earth-growth-road-title { font-size: 24px; } #earthGrowthPath .earth-growth-step-list { gap: 20px; } #earthGrowthPath .earth-growth-step-list::before { left: 21px; top: 38px; bottom: 38px; } #earthGrowthPath .earth-growth-step { grid-template-columns: 44px 74px 1fr; column-gap: 14px; } #earthGrowthPath .earth-growth-num { width: 40px; height: 40px; font-size: 14px; } #earthGrowthPath .earth-growth-icon { width: 74px; height: 74px; } #earthGrowthPath .earth-growth-icon svg { width: 56px; height: 56px; } #earthGrowthPath .earth-growth-step-title { font-size: 20px; } #earthGrowthPath .earth-growth-step-text {font-size: 16px;line-height: 1.7;width: 100%;} } /* new_product_area */ #new_product_area{display:flex;align-items: center;justify-content: center;padding: 90px 0 45px;} #new_product_area .arrowBox { display: flex; gap: 10px; position: absolute; width: min(95%,1600px); justify-content: space-between; } #new_product_area .arrowBox button { display: flex; align-items: center; gap: 10px; color: var(--coffee); font-weight: 500; font-size: 0; position: absolute; background: none; border: 0; padding: 0; cursor: pointer; } #new_product_area .arrowBox button#new_product_next { right: 0; } #new_product_area .arrowBox button b {width: 60px;aspect-ratio: 1/1;display: flex !important;border-radius: 50px;align-items: center;justify-content: center;border: 1px solid #bfbfbf;} #new_product_area .arrowBox button:hover b { background: var(--primary); } #new_product_area .arrowBox button svg {fill: var(--primary);width: 16px;height: 16px;} #new_product_area .arrowBox button:hover svg { fill: var(--white); } #new_product_area .arrowBox button#new_product_prev svg { transform: scaleX(-1); } #new_product_list {width: min(85%,1420px);margin: 0;} #new_product_list li { display: grid; background: white; grid-template-columns: 38% 53%; border-radius: 35px; border: 1px solid var(--primary); overflow: hidden; justify-content: space-between; align-items: center; } #new_product_list li img { border-radius: 35px; aspect-ratio: 1/1 } #new_product_list li .item_row { width: 90%; display: grid; gap: 15px; } #new_product_list li .item_row .en::after { content: ""; position: absolute; left: 0; bottom: -20px; width: 42px; height: 2px; background: var(--gradient-gold); opacity: .9; } #new_product_list li .en {color: var(--third);font-size: 65px;font-weight: 600;letter-spacing: 2.5px;font-family: "Cormorant",serif;text-transform: uppercase;line-height: 1;word-spacing: 100vw;margin-bottom: 30px;position: relative;} #new_product_list li .h3 {letter-spacing: 1px;-webkit-line-clamp: 2;height: auto;color: var(--primary);font-size: 26px;line-height: 1.5;font-weight: 700;font-family: "Noto Serif TC",serif;position: relative;} #new_product_list li article {font-size: 17px;color: var(--coffee);height: 60px;letter-spacing: 1px;-webkit-line-clamp: 2;text-align: justify;font-family: 'Noto Sans TC';} #new_product_list li .n_price_box { } #new_product_list li .n_price_box * {text-decoration: unset;font-weight: 500;color: #4A3A31;font-size: 18px;font-family: var(--font-sans);} #new_product_list li .buybtn { display: flex; justify-content: flex-end; margin-top: 25px; gap: 10px; position: relative; z-index: 10; } #new_product_list li .buybtn button,#new_product_list li .buybtn a { color: #555; font-size: 15px; background: white; border: 1px solid var(--primary); padding: 7px 0; border-radius: 50px; width: 150px; display: inline-flex; align-items: center; justify-content: center; } #new_product_list li .buybtn button:hover { background: var(--coffee); color: white; border-color: var(--coffee); } #new_product_list li .buybtn button:hover svg { fill: white; } #new_product_list li .buybtn a { color: white; background: var(--primary); border-color: var(--primary); } #new_product_list li .buybtn a:hover { background: var(--third); border-color: var(--third); } #new_product_list li .buybtn svg,#about_area .more_btn svg { width: 30px; height: 30px; fill: #b3b3b2; } /* category_area */ #category_area{padding-top:0} #category_area h2, #category_area h1{text-align:center;color: var(--secondary);font-size: 13px;text-transform: uppercase;font-weight: 500;letter-spacing: 3px;margin-bottom: 45px;} #category_area h2{font-weight: 800;font-family: "Cormorant", serif;} #category_area h1{margin-bottom: 10px;} #category_area .categorylist{display:grid;grid-template-columns: repeat(4, 1fr);width: min(90%, 1700px);margin: 0 auto;gap: 20px;} #category_area .item{display:flex;flex-direction: column;align-items: center;background: #fffaf7;border-radius: 30px;position: relative;overflow: hidden;padding-bottom: 50px;} #category_area .item img{object-fit: cover;aspect-ratio: 1/1;} #category_area .item p{color: var(--secondary);letter-spacing: 2px;margin-top: 30px;font-size: 19px;font-weight: 500;font-family: "Noto Serif TC", serif;} #category_area .item .en{color: var(--secondary);font-size: 13px;font-weight: 800;text-transform: uppercase;letter-spacing: 2px;margin-top: 7px;text-align: center;font-family: "Cormorant", serif;} #category_area .item:hover .en{opacity:0;transform: translateY(25px);} #category_area .item .more_btn{position:absolute;bottom: -60px;opacity: 0;} #category_area .item:hover .more_btn{bottom: 30px;opacity: 1;} /* discount_area */ #discount_area .box{width: min(90%, 1420px);margin: 0 auto;} #discount_area .box img{border-radius:30px;} /* custom_area */ #custom_area{display:flex;justify-content: center;} #custom_area .arrivalBox{position:absolute;z-index: 2;background: #fff;} #custom_area .tt{display:flex;flex-direction: column;align-items: center;padding: 80px 0;} #custom_area .tt h1{font-family: "Noto Serif TC", serif;color: var(--info);font-weight: 400;font-size: 18px;letter-spacing: 3px;} #custom_area .tt h3{color:#30201b;font-size: 30px;font-family: "Cormorant", serif;font-weight: 500;letter-spacing: 3px;margin-bottom: 25px;text-transform: uppercase;} #custom_area ul{gap: 0 520px;width:100%;background: #f8f8f8;display: grid;justify-content: space-between;grid-template-columns: repeat(2, 1fr);padding: 60px 0;} #custom_area li{display:flex;flex-direction: column;align-items: center;padding: 70px 0;} #custom_area li img{aspect-ratio: 3/4;object-fit: contain;width: 180px;} #custom_area li h3{color:#30201b;font-size: 30px;font-family: "Cormorant", serif;font-weight: 500;letter-spacing: 3px;margin-top: 25px;text-transform: uppercase;} /* about_area */ #about_area {padding-top: 30px;} #about_area .workframe {width: min(85vw, 1220px);position: relative;} #about_area .info_box {display: flex;align-items: flex-start;flex-direction: column;} #about_area .info_box h2 {font-size: 33px;color: #30201b;word-spacing: 100vw;font-family: "Noto Serif TC", serif;letter-spacing: 2px;font-weight: 400;} #about_area .info_box .sub_title {margin-bottom: 10px;} #about_area .info_box article p{color: #604020;font-size: 28px;font-weight: 600;font-family: "Noto Serif TC", serif;} #about_area .more_btn{position: absolute;display: flex;align-items: center;justify-content: center;gap: 1px;width: 170px;bottom: 0;right: 20px;} #about_area .more_btn:hover{background: var(--secondary);border-color: var(--secondary);} #about_area .more_btn svg{fill:white;} #about_area .img_box { max-width: 50%; } #about_area .img_box img { width: 100%; height: 100%; } /* product_area */ #product_area{text-align:center;padding: 2vw 0 6vw;} #product_area::before{position:absolute;width:100%;height: 50%;background: linear-gradient(to bottom, rgb(0 0 0 / 0%) 0%, #f5efe3 100%);bottom: 0;left:0;z-index: 0;content:"";} #product_area .fixTxt{position:absolute;right: 5vw;top: -6vw;} #product_area .list_box{width: min(90%, 1420px);margin: 0 auto;} #product_area ul{display:grid;grid-template-columns: repeat(4, 1fr);gap: 25px;} /* photo_area */ #photo_area .item_row { padding: 4% 6%; border: 2px var(--g_100) solid; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } #photo_area .item_row .img_box img { width: 100px; aspect-ratio: 1/1; } #photo_area .item_row .info_box { margin-left: 6%; width: 1%; flex: 1 1 auto; } #photo_area .item_row .info_box h3 { margin-bottom: .5em; max-height: 3.2em; height: auto; -webkit-line-clamp: 2; } #photo_area .item_row .info_box font { padding: .5em 1em; background: var(--primary); border-radius: 2em; display: inline-block; line-height: 1; font-weight: 300; font-size: .9em; color: white; } /* news_list */ #news_list .img_box { aspect-ratio: 5/3; } #news_list .info_box { margin-top: .5em; } #news_list .info_box .time { font-size: .9em; color: var(--g_500); } #news_list .info_box h3 { margin: .2em 0 .5em; } #news_list .info_box article { margin-bottom: .5em; height: 3.2em; font-size: .9em; color: var(--g_600); -webkit-line-clamp: 2; } @media screen and (min-width: 1161px){ #photo_area .item_row:hover { border-color: var(--primary); } } @media screen and (max-width: 1440px){ #new_product_list li .en { font-size: 50px; margin-bottom: 10px; } #new_product_area .arrowBox a { font-size: 0 } section .title_box .subtitle {font-size: 1.6rem;margin-bottom: 40px;} } @media screen and (max-width: 1280px){ #new_product_list li .en{font-size: 20px;word-spacing: unset;margin: 0;} } @media screen and (max-width: 1024px){ #new_product_area .arrowBox button{position:relative;} #category_area .categorylist{grid-template-columns: repeat(2, 1fr);#category_area .item:first-child{grid-column: 1 / 3;};} #new_product_area{display: flex;flex-direction: column;align-items: center;gap: 30px;} #new_product_area .arrowBox{position:relative;display: flex;justify-content: center;gap: 50px;} #new_product_area .arrowBox a{font-size:15px;} #product_area ul{grid-template-columns: repeat(2, 1fr);} #custom_area .arrivalBox{width: 350px;} #custom_area ul{gap:0 350px;padding: 25px 0;} #custom_area li{padding:30px 0;} } @media screen and (max-width: 768px){ #about_area .more_btn { position: relative; margin-top: 21px; right: 0; } #category_area { padding-bottom: 7vw } #new_product_list li .item_row { margin: 30px auto; } #new_product_list li { grid-template-columns: 1fr } .section_area { padding: 10vw 0; } #custom_area ul { gap: 0; } #custom_area { display: block; } #custom_area img { width: 100%; } #custom_area .arrivalBox { position: relative; width: 100%; } #about_area .img_box { width: 100%; max-width: inherit; } } @media screen and (max-width: 640px) { #category_area h2,#category_area h1 { padding: 0 5%; word-break: keep-all; } #new_product_list li .h3 { font-size: 19px; } #new_product_list li .buybtn { justify-content: space-between; gap: 0; display: flex; align-items: stretch; } #new_product_list li .buybtn >p { display: flex; } #new_product_list li .buybtn button,#new_product_list li .buybtn a { width: auto; padding: 7px 18px; font-size: 14px; } #new_product_list li .item_row { display: flex; flex-direction: column; width: 85%; } #discount_area .box img { height: 160px; object-fit: cover; } #about_area .info_box article p { font-size: 23px; text-align: justify; } #category_area .categorylist { display: flex; flex-direction: column; } #product_area ul { gap: 10px; } #custom_area li h3 { font-size: 18px; letter-spacing: 2px; } #custom_area li img { width: 120px; } .section_area { padding: 14vw 0; } #product_area .fixTxt { width: 40vw; top: -12vw; right: 2.5vw; } #photo_area .item_row .img_box { width: 100%; } #photo_area .item_row .img_box img { width: 100%; aspect-ratio: 1/1; } #photo_area .item_row .info_box { margin: .5em 0 0; width: 100%; } }