/* ======================================================== #articleCommercialDesign ======================================================== */ #articleCommercialDesign { --commercial-black: #171716; --commercial-dark: #292826; --commercial-text: #69645d; --commercial-gray: #938d84; --commercial-gold: #b49356; --commercial-gold-light: #d7c29a; --commercial-paper: #f4f1ea; --commercial-paper-dark: #ebe6dc; --commercial-white: #ffffff; --commercial-line: rgba(180,147,86,0.22); position: relative; color: var(--commercial-text); background: var(--commercial-white); font-family: "Noto Sans TC","Microsoft JhengHei",sans-serif; overflow: hidden; } #articleCommercialDesign *,#articleCommercialDesign *::before,#articleCommercialDesign *::after { box-sizing: border-box; } #articleCommercialDesign *{color: var(--commercial-black);} #articleCommercialDesign img { display: block; max-width: 100%; } #articleCommercialDesign a { color: inherit; text-decoration: none; } #articleCommercialDesign p {margin: 0;font-size: 15px;font-weight: 400;line-height: 2;letter-spacing: 0.7px;} #articleCommercialDesign .commercial-container { position: relative; z-index: 2; width: min(calc(100% - 80px),1480px); margin: 0 auto; } #articleCommercialDesign .section-label { margin-bottom: 22px; color: var(--commercial-gold); font-family: Arial,sans-serif; font-size: 9px; font-weight: 400; line-height: 1.4; letter-spacing: 4px; } #articleCommercialDesign .section-title {color: var(--commercial-black);font-family: "Noto Serif TC","Times New Roman",serif;font-size: clamp(36px,3.8vw,52px);font-weight: 400;line-height: 1.4;letter-spacing: 2px;} #articleCommercialDesign .section-title span { display: block; color: var(--commercial-gold); } /* ======================================================== #articleCommercialDesign .commercial-hero ======================================================== */ #articleCommercialDesign .commercial-hero { position: relative; padding: 125px 0 155px; background: var(--commercial-white); overflow: hidden; } #articleCommercialDesign .commercial-watermark {position: absolute;top: 100px;right: 0;width: 100%;color: rgba(180,147,86,0.065);text-align: center;font-family: "Times New Roman",serif;font-size: clamp(85px,11vw,180px);line-height: 1;letter-spacing: 9px;pointer-events: none;} #articleCommercialDesign .hero-heading {max-width: 100%;margin: 0 auto 60px;text-align: center;display: flex;flex-direction: column;align-items: center;} #articleCommercialDesign .hero-heading::after { content: ""; display: block; width: 1px; height: 65px; margin: 42px auto 0; background: var(--commercial-gold); } #articleCommercialDesign .hero-title , #articleCommercialDesign .hero-title span {color: var(--commercial-black);font-family: "Noto Serif TC","Times New Roman",serif;font-size: clamp(30px,5vw,53px);font-weight: 400;line-height: 1.35;letter-spacing: 4px;display: flex;} #articleCommercialDesign .hero-title span { color: var(--commercial-gold); } #articleCommercialDesign .hero-subtitle {margin-top: 22px;color: var(--commercial-gray);font-size: 14px;font-weight: 400;line-height: 1.6;letter-spacing: 6px;} #articleCommercialDesign .hero-layout { display: grid; grid-template-columns: minmax(0,64%) minmax(0,36%); align-items: center; } #articleCommercialDesign .hero-visual { position: relative; padding: 35px 0 35px 35px; } #articleCommercialDesign .hero-visual::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 58%; background: var(--commercial-paper); } #articleCommercialDesign .hero-visual::after { content: ""; position: absolute; top: 15px; left: 15px; z-index: 1; width: 120px; height: 120px; border-top: 1px solid var(--commercial-gold); border-left: 1px solid var(--commercial-gold); pointer-events: none; } #articleCommercialDesign .hero-image { position: relative; z-index: 2; overflow: hidden; } #articleCommercialDesign .hero-image img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: center; filter: saturate(0.82) contrast(1.03); transition: filter 0.7s ease,transform 1.2s cubic-bezier(0.2,0.7,0.2,1); } #articleCommercialDesign .hero-visual:hover .hero-image img { filter: saturate(1) contrast(1); transform: scale(1.025); } #articleCommercialDesign .image-label { position: absolute; bottom: 58px; left: 55px; z-index: 3; display: flex; align-items: center; gap: 20px; padding: 17px 22px; color: var(--commercial-white); background: rgba(23,23,22,0.9); backdrop-filter: blur(8px); } #articleCommercialDesign .image-label span,#articleCommercialDesign .image-label small { font-family: Arial,sans-serif; font-size: 8px; font-weight: 400; line-height: 1; letter-spacing: 3px; } #articleCommercialDesign .image-label small { padding-left: 20px; border-left: 1px solid rgba(255,255,255,0.25); color: var(--commercial-gold-light); } #articleCommercialDesign .hero-content { position: relative; z-index: 3; margin-left: -75px; padding: 75px 0 75px 85px; background: var(--commercial-white); } #articleCommercialDesign .content-number { position: absolute; top: 22px; right: 0; color: rgba(180,147,86,0.14); font-family: "Times New Roman",serif; font-size: 78px; font-style: italic; line-height: 1; } #articleCommercialDesign .content-en { margin-bottom: 22px; color: var(--commercial-gold); font-family: Arial,sans-serif; font-size: 9px; line-height: 1.4; letter-spacing: 3.5px; } #articleCommercialDesign .content-title {padding-right: 20px;color: var(--commercial-black);font-family: "Noto Serif TC","Times New Roman",serif;font-size: clamp(29px,2.8vw,40px);font-weight: 400;line-height: 1.5;letter-spacing: 2px;} #articleCommercialDesign .content-title span { display: block; color: var(--commercial-gold); } #articleCommercialDesign .content-line { width: 65px; height: 1px; margin: 31px 0; background: var(--commercial-gold); } #articleCommercialDesign .hero-content p { max-width: 470px; margin-bottom: 18px; } #articleCommercialDesign .hero-content p:last-child { margin-bottom: 0; } /* ======================================================== #articleCommercialDesign .commercial-points ======================================================== */ #articleCommercialDesign .commercial-points {position: relative;padding: 100px 0 160px;background: var(--commercial-paper);} #articleCommercialDesign .commercial-points::before {content: "SPACE";position: absolute;right: -30px;bottom: 0;color: rgba(180,147,86,0.065);font-family: "Times New Roman",serif;font-size: clamp(100px,14vw,150px);line-height: 1;letter-spacing: 12px;pointer-events: none;} #articleCommercialDesign .section-heading { display: grid; grid-template-columns: minmax(0,55%) minmax(0,45%); gap: 80px; align-items: end; margin-bottom: 85px; } #articleCommercialDesign .heading-description {max-width: 520px;margin-left: auto;padding-left: 35px;border-left: 1px solid var(--commercial-gold);} #articleCommercialDesign .commercial-point-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--commercial-line); border-left: 1px solid var(--commercial-line); } #articleCommercialDesign .commercial-point-item { position: relative; min-height: 590px; padding: 48px 42px; border-right: 1px solid var(--commercial-line); border-bottom: 1px solid var(--commercial-line); background: rgba(255,255,255,0.35); overflow: hidden; transition: background 0.45s ease,transform 0.45s ease,box-shadow 0.45s ease; } #articleCommercialDesign .commercial-point-item::before { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: var(--commercial-gold); transform: scaleX(0); transform-origin: right center; transition: transform 0.45s ease; } #articleCommercialDesign .commercial-point-item:hover { z-index: 2; background: var(--commercial-white); box-shadow: 0 28px 70px rgba(28,26,21,0.09); transform: translateY(-10px); } #articleCommercialDesign .commercial-point-item:hover .point-title{ color: var(--header-gold); } #articleCommercialDesign .commercial-point-item:hover::before { transform: scaleX(1); transform-origin: left center; } #articleCommercialDesign .point-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; margin-bottom: 45px; } #articleCommercialDesign .point-number { color: var(--commercial-gold); font-family: "Times New Roman",serif; font-size: 30px; font-style: italic; line-height: 1; } #articleCommercialDesign .point-en { color: var(--commercial-gray); font-family: Arial,sans-serif; font-size: 8px; line-height: 1; letter-spacing: 2.5px; } #articleCommercialDesign .point-symbol { position: relative; z-index: 2; width: 68px; height: 68px; margin-bottom: 35px; border: 1px solid var(--commercial-gold); border-radius: 50%; transition: background 0.4s ease,transform 0.4s ease; } #articleCommercialDesign .commercial-point-item:hover .point-symbol {transform: rotate(45deg);} #articleCommercialDesign .point-symbol::before,#articleCommercialDesign .point-symbol::after,#articleCommercialDesign .point-symbol span::before,#articleCommercialDesign .point-symbol span::after { content: ""; position: absolute; background: var(--commercial-gold); transition: background 0.4s ease; } #articleCommercialDesign .commercial-point-item:hover .point-symbol::before,#articleCommercialDesign .commercial-point-item:hover .point-symbol::after,#articleCommercialDesign .commercial-point-item:hover .point-symbol span::before,#articleCommercialDesign .commercial-point-item:hover .point-symbol span::after {} #articleCommercialDesign .symbol-brand::before { top: 20px; left: 20px; width: 26px; height: 26px; border: 1px solid var(--commercial-gold); background: transparent; transform: rotate(45deg); } #articleCommercialDesign .symbol-brand::after { top: 32px; left: 13px; width: 40px; height: 1px; } #articleCommercialDesign .symbol-flow::before { top: 32px; left: 15px; width: 36px; height: 1px; } #articleCommercialDesign .symbol-flow::after { top: 23px; right: 16px; width: 18px; height: 18px; border-top: 1px solid var(--commercial-gold); border-right: 1px solid var(--commercial-gold); background: transparent; transform: rotate(45deg); } #articleCommercialDesign .symbol-layout::before { top: 17px; left: 17px; width: 14px; height: 14px; border: 1px solid var(--commercial-gold); background: transparent; } #articleCommercialDesign .symbol-layout::after { right: 17px; bottom: 17px; width: 14px; height: 14px; border: 1px solid var(--commercial-gold); background: transparent; } #articleCommercialDesign .symbol-layout span::before { top: 17px; right: 17px; width: 14px; height: 14px; border: 1px solid var(--commercial-gold); background: transparent; } #articleCommercialDesign .symbol-layout span::after { bottom: 17px; left: 17px; width: 14px; height: 14px; border: 1px solid var(--commercial-gold); background: transparent; } #articleCommercialDesign .point-title { position: relative; z-index: 2; margin-bottom: 24px; color: var(--commercial-black); font-family: "Noto Serif TC","Times New Roman",serif; font-size: 26px; font-weight: 500; line-height: 1.5; letter-spacing: 1.5px; } #articleCommercialDesign .commercial-point-item p { position: relative; z-index: 2; margin-bottom: 15px; font-size: 14px; line-height: 1.95; } #articleCommercialDesign .commercial-point-item p:last-of-type { margin-bottom: 0; } #articleCommercialDesign .point-keyword { position: absolute; right: -8px; bottom: 20px; color: rgba(180,147,86,0.075); font-family: "Times New Roman",serif; font-size: 55px; line-height: 1; letter-spacing: 4px; pointer-events: none; transition: right 0.45s ease,color 0.45s ease; } #articleCommercialDesign .commercial-point-item:hover .point-keyword { right: 18px; color: rgba(180,147,86,0.12); } /* ======================================================== #articleCommercialDesign .exhibition-section ======================================================== */ #articleCommercialDesign .exhibition-section { position: relative; padding: 150px 0 160px; color: rgba(255,255,255,0.62); background: var(--commercial-black); overflow: hidden; } #articleCommercialDesign .exhibition-watermark {position: absolute;top: 30px;left: -4px;color: rgba(180,147,86,0.07);font-family: "Times New Roman",serif;font-size: clamp(90px,12vw,190px);line-height: 1;letter-spacing: 10px;pointer-events: none;} #articleCommercialDesign .exhibition-heading {display: grid;grid-template-columns: 90px minmax(0,1fr) minmax(300px,0.7fr);gap: 50px;align-items: end;margin-bottom: 90px;} #articleCommercialDesign .exhibition-index { color: rgba(180,147,86,0.4); font-family: "Times New Roman",serif; font-size: 64px; font-style: italic; line-height: 1; } #articleCommercialDesign .exhibition-section .section-title { color: var(--commercial-white); } #articleCommercialDesign .exhibition-section .heading-description { color: rgba(255,255,255,0.58); border-left-color: rgba(180,147,86,0.45); } #articleCommercialDesign .exhibition-section .heading-description p{ color: var(--commercial-white); } #articleCommercialDesign .exhibition-feature { display: grid; grid-template-columns: minmax(0,57%) minmax(0,43%); align-items: stretch; margin-bottom: 35px; border: 1px solid rgba(180,147,86,0.22); } #articleCommercialDesign .exhibition-image { position: relative; min-height: 680px; overflow: hidden; } #articleCommercialDesign .exhibition-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top,rgba(23,23,22,0.72),transparent 55%); pointer-events: none; } #articleCommercialDesign .exhibition-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7) contrast(1.06); transition: filter 0.7s ease,transform 1.2s cubic-bezier(0.2,0.7,0.2,1); } #articleCommercialDesign .exhibition-feature:hover .exhibition-image img { filter: saturate(0.95) contrast(1); transform: scale(1.025); } #articleCommercialDesign .image-caption { position: absolute; right: 45px; bottom: 42px; left: 45px; z-index: 2; display: grid; grid-template-columns: 50px 1fr; gap: 8px 20px; align-items: center; } #articleCommercialDesign .image-caption span { grid-row: 1/3; color: var(--commercial-gold-light); font-family: "Times New Roman",serif; font-size: 38px; font-style: italic; line-height: 1; } #articleCommercialDesign .image-caption strong { color: var(--commercial-white); font-family: "Noto Serif TC","Times New Roman",serif; font-size: 25px; font-weight: 400; line-height: 1.4; letter-spacing: 2px; } #articleCommercialDesign .image-caption small { color: rgba(255,255,255,0.58); font-family: Arial,sans-serif; font-size: 8px; line-height: 1; letter-spacing: 3px; } #articleCommercialDesign .exhibition-content { padding: 75px 65px; background: #20201f; } #articleCommercialDesign .exhibition-content .content-title {margin-bottom: 27px;padding: 0;color: var(--commercial-white);font-size: clamp(24px,2.7vw,40px);} #articleCommercialDesign .exhibition-content > p { margin-bottom: 38px; color: rgba(255,255,255,0.58); } #articleCommercialDesign .memory-list { border-top: 1px solid rgba(180,147,86,0.25); } #articleCommercialDesign .memory-item { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 20px; padding: 25px 0; border-bottom: 1px solid rgba(180,147,86,0.18); } #articleCommercialDesign .memory-item > span { color: var(--commercial-gold); font-family: "Times New Roman",serif; font-size: 20px; font-style: italic; line-height: 1.5; } #articleCommercialDesign .memory-item strong { display: block; margin-bottom: 8px; color: var(--commercial-white); font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: 1px; } #articleCommercialDesign .memory-item p { color: rgba(255,255,255,0.5); font-size: 13px; line-height: 1.85; } #articleCommercialDesign .exhibition-point-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 35px; } #articleCommercialDesign .exhibition-point-item { position: relative; display: grid; grid-template-columns: 75px minmax(0,1fr); gap: 30px; padding: 55px; border: 1px solid rgba(180,147,86,0.22); background: rgba(255,255,255,0.025); overflow: hidden; transition: border-color 0.4s ease,background 0.4s ease,transform 0.4s ease; } #articleCommercialDesign .exhibition-point-item::before { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--commercial-gold); transform: scaleX(0); transform-origin: right center; transition: transform 0.4s ease; } #articleCommercialDesign .exhibition-point-item:hover { border-color: rgba(180,147,86,0.6); background: rgba(255,255,255,0.045); transform: translateY(-6px); } #articleCommercialDesign .exhibition-point-item:hover::before { transform: scaleX(1); transform-origin: left center; } #articleCommercialDesign .exhibition-point-item .point-number { font-size: 38px; } #articleCommercialDesign .exhibition-point-item .point-en { margin-bottom: 13px; color: var(--commercial-gold); } #articleCommercialDesign .exhibition-point-item .point-title {margin-bottom: 20px;color: var(--commercial-white);font-size: 22px;} #articleCommercialDesign .exhibition-point-item p { margin-bottom: 13px; color: rgba(255,255,255,0.55); font-size: 14px; line-height: 1.95; } #articleCommercialDesign .exhibition-point-item p:last-child { margin-bottom: 0; } /* ======================================================== #articleCommercialDesign .design-recommendation ======================================================== */ #articleCommercialDesign .design-recommendation {position: relative;padding: 40px 0;background: var(--commercial-paper);} #articleCommercialDesign .design-recommendation::before { content: "ULTRA"; position: absolute; right: -20px; bottom: 10px; color: rgba(180,147,86,0.065); font-family: "Times New Roman",serif; font-size: clamp(100px,14vw,215px); line-height: 1; letter-spacing: 12px; pointer-events: none; } #articleCommercialDesign .recommendation-layout {display: grid;grid-template-columns: minmax(0,50%) minmax(0,50%);align-items: center;} #articleCommercialDesign .recommendation-image { position; } #articleCommercialDesign .recommendation-image { :relative;padding: 35px;} #articleCommercialDesign .recommendation-image::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%; background: var(--commercial-paper-dark); } #articleCommercialDesign .recommendation-image::after { content: ""; position: absolute; top: 15px; left: 15px; z-index: 1; width: 110px; height: 110px; border-top: 1px solid var(--commercial-gold); border-left: 1px solid var(--commercial-gold); } #articleCommercialDesign .recommendation-image img {position: relative;z-index: 2;width: 100%;aspect-ratio: 4/3;object-fit: cover;filter: saturate(0.82) contrast(1.03);object-position: 50% 50%;} #articleCommercialDesign .image-number { position: absolute; right: 25px; bottom: 12px; z-index: 3; color: var(--commercial-white); font-family: "Times New Roman",serif; font-size: 76px; font-style: italic; line-height: 1; text-shadow: 0 4px 20px rgba(0,0,0,0.25); } #articleCommercialDesign .recommendation-content {position: relative;z-index: 3;margin-left: 0;padding: 75px 0 75px 60px;background: var(--commercial-paper);} #articleCommercialDesign .recommendation-line { width: 65px; height: 1px; margin: 32px 0; background: var(--commercial-gold); } #articleCommercialDesign .recommendation-content > p { max-width: 520px; margin-bottom: 16px; } #articleCommercialDesign .contact-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 45px; border-top: 1px solid var(--commercial-line); border-left: 1px solid var(--commercial-line); } #articleCommercialDesign .contact-item { position: relative; display: block; min-height: 100px; padding: 23px 25px; border-right: 1px solid var(--commercial-line); border-bottom: 1px solid var(--commercial-line); background: rgba(255,255,255,0.3); overflow: hidden; transition: color 0.35s ease,background 0.35s ease; } #articleCommercialDesign a.contact-item::before { content: ""; position: absolute; inset: 0; background: var(--commercial-black); transform: scaleY(0); transform-origin: bottom center; transition: transform 0.4s cubic-bezier(0.7,0,0.3,1); } #articleCommercialDesign a.contact-item:hover { color: var(--commercial-white); } #articleCommercialDesign a.contact-item:hover::before { transform: scaleY(1); transform-origin: top center; } #articleCommercialDesign .contact-name {position: relative;z-index: 2;display: block;margin-bottom: 10px;color: var(--commercial-gold);font-family: Arial,sans-serif;font-size: 10px;line-height: 1;letter-spacing: 2.5px;} #articleCommercialDesign .contact-item strong {position: relative;z-index: 2;display: block;color: var(--commercial-dark);font-size: 14px;font-weight: 500;line-height: 1.75;letter-spacing: 0.3px;word-break: break-word;transition: color 0.35s ease;} #articleCommercialDesign a.contact-item:hover strong { color: var(--commercial-white); } /* ======================================================== #articleCommercialDesign .commercial-ending ======================================================== */ #articleCommercialDesign .commercial-ending { position: relative; display: grid; grid-template-columns: minmax(100px,1fr) auto minmax(100px,1fr); gap: 55px; align-items: center; padding: 105px 40px; color: var(--commercial-white); background: var(--commercial-black); overflow: hidden; } #articleCommercialDesign .ending-decoration { color: rgba(180,147,86,0.18); font-family: "Times New Roman",serif; font-size: 80px; font-style: italic; line-height: 1; } #articleCommercialDesign .ending-decoration::after { content: ""; display: inline-block; width: calc(100% - 110px); height: 1px; margin-left: 30px; vertical-align: middle; background: rgba(180,147,86,0.4); } #articleCommercialDesign .ending-content { text-align: center; } #articleCommercialDesign .ending-en { margin-bottom: 18px; color: var(--commercial-gold-light); font-family: Arial,sans-serif; font-size: 9px; line-height: 1; letter-spacing: 4px; } #articleCommercialDesign .ending-title {margin-bottom: 13px;font-family: "Noto Serif TC","Times New Roman",serif;font-size: clamp(29px,3vw,44px);font-weight: 400;line-height: 1.45;letter-spacing: 3px;color: var(--commercial-white);} #articleCommercialDesign .ending-content p { color: rgba(255,255,255,0.58); font-size: 13px; letter-spacing: 1.3px; } #articleCommercialDesign .ending-index { color: rgba(180,147,86,0.55); font-family: "Times New Roman",serif; font-size: 64px; font-style: italic; line-height: 1; text-align: right; } /* ======================================================== #articleCommercialDesign .wow ======================================================== */ #articleCommercialDesign .wow { visibility: visible; } /* ======================================================== RWD ======================================================== */ @media screen and (max-width:1470px){ #articleCommercialDesign .hero-content{margin-left: -100px;} #articleCommercialDesign .hero-title, #articleCommercialDesign .hero-title span{font-size: clamp(30px, 4vw, 55px);} #articleCommercialDesign .exhibition-content{ padding: 50px 40px; } #articleCommercialDesign .commercial-container{ width: min(calc(100% - 60px), 1480px); } } @media screen and (max-width:1200px) { #articleCommercialDesign .commercial-container { width: calc(100% - 60px); } #articleCommercialDesign .hero-layout { grid-template-columns: minmax(0,59%) minmax(0,41%); } #articleCommercialDesign .hero-content { margin-left: -55px; padding-left: 60px; } #articleCommercialDesign .commercial-point-item { padding-right: 30px; padding-left: 30px; } #articleCommercialDesign .exhibition-content { padding-right: 45px; padding-left: 45px; } #articleCommercialDesign .exhibition-point-item { padding: 45px 38px; } #articleCommercialDesign .recommendation-content { margin-left: -50px; padding-left: 60px; } } @media screen and (max-width:960px) { #articleCommercialDesign .commercial-hero { padding-top: 105px; } #articleCommercialDesign .hero-layout { display: block; } #articleCommercialDesign .hero-visual { width: 92%; } #articleCommercialDesign .hero-content { width: 88%; margin: -30px 0 0 auto; padding: 60px; box-shadow: 0 22px 60px rgba(28,26,21,0.1); } #articleCommercialDesign .section-heading { grid-template-columns: 1fr; gap: 35px; } #articleCommercialDesign .heading-description { max-width: 680px; margin-left: 0; } #articleCommercialDesign .commercial-point-list { grid-template-columns: 1fr; } #articleCommercialDesign .commercial-point-item { min-height: 0; padding: 45px; } #articleCommercialDesign .exhibition-heading { grid-template-columns: 70px minmax(0,1fr); } #articleCommercialDesign .exhibition-heading .heading-description { grid-column: 2/3; } #articleCommercialDesign .exhibition-feature { grid-template-columns: 1fr; } #articleCommercialDesign .exhibition-image { min-height: 540px; } #articleCommercialDesign .exhibition-point-list { grid-template-columns: 1fr; } #articleCommercialDesign .recommendation-layout { display: block; } #articleCommercialDesign .recommendation-image { width: 92%; } #articleCommercialDesign .recommendation-content {width: 90%;margin: -30px 0 0 auto;padding: 60px;background: var(--commercial-white);box-shadow: 0 22px 60px rgba(28,26,21,0.08);} #articleCommercialDesign .commercial-ending { grid-template-columns: 1fr auto; } #articleCommercialDesign .ending-decoration { display: none; } #articleCommercialDesign .ending-content { text-align: left; } } @media screen and (max-width:767px) { #articleCommercialDesign p { font-size: 14px; line-height: 1.9; } #articleCommercialDesign .commercial-container { width: calc(100% - 40px); } #articleCommercialDesign .commercial-hero {padding: 50px 0 50px;} #articleCommercialDesign .commercial-watermark { top: 25px; font-size: 55px; letter-spacing: 3px; } #articleCommercialDesign .hero-heading { margin-bottom: 55px; } #articleCommercialDesign .hero-heading::after { height: 45px; margin-top: 30px; } #articleCommercialDesign .hero-title, #articleCommercialDesign .hero-title span {font-size: 36px;letter-spacing: 2px;display: flex;flex-direction: column;align-items: center;} #articleCommercialDesign .hero-title span {display: block;} #articleCommercialDesign .hero-subtitle { font-size: 10px; letter-spacing: 3px; } #articleCommercialDesign .hero-visual { width: 100%; padding: 20px 0 20px 20px; } #articleCommercialDesign .hero-visual::after { top: 8px; left: 8px; width: 75px; height: 75px; } #articleCommercialDesign .hero-image img { aspect-ratio: 4/3; } #articleCommercialDesign .image-label { bottom: 38px; left: 38px; } #articleCommercialDesign .hero-content { width: calc(100% - 15px); margin-top: -15px; padding: 45px 30px; } #articleCommercialDesign .content-number { top: 18px; right: 22px; font-size: 55px; } #articleCommercialDesign .content-title { font-size: 29px; } #articleCommercialDesign .commercial-points {padding: 50px 15px 50px;} #articleCommercialDesign .commercial-points::before { display: none; } #articleCommercialDesign .section-heading { margin-bottom: 55px; } #articleCommercialDesign .section-title { font-size: 34px; } #articleCommercialDesign .heading-description { padding-left: 22px; } #articleCommercialDesign .commercial-point-item { padding: 38px 30px; } #articleCommercialDesign .commercial-point-item:hover { transform: none; } #articleCommercialDesign .point-top { margin-bottom: 30px; } #articleCommercialDesign .point-symbol { width: 60px; height: 60px; margin-bottom: 28px; } #articleCommercialDesign .point-title { font-size: 23px; } #articleCommercialDesign .point-keyword { display: none; } #articleCommercialDesign .exhibition-section {padding: 50px 15px 50px;} #articleCommercialDesign .exhibition-watermark { display: none; } #articleCommercialDesign .exhibition-heading { grid-template-columns: 45px minmax(0,1fr); gap: 25px; margin-bottom: 55px; } #articleCommercialDesign .exhibition-index { font-size: 42px; } #articleCommercialDesign .exhibition-heading .heading-description { grid-column: 1/3; } #articleCommercialDesign .exhibition-image { min-height: 390px; } #articleCommercialDesign .image-caption { right: 25px; bottom: 25px; left: 25px; } #articleCommercialDesign .image-caption strong { font-size: 21px; } #articleCommercialDesign .exhibition-content { padding: 45px 30px; } #articleCommercialDesign .exhibition-point-item { grid-template-columns: 50px minmax(0,1fr); gap: 20px; padding: 38px 28px; } #articleCommercialDesign .exhibition-point-item .point-number { font-size: 31px; } #articleCommercialDesign .design-recommendation {padding: 50px 0px;} #articleCommercialDesign .design-recommendation::before { display: none; } #articleCommercialDesign .recommendation-image {width: 100%;padding: 0;} #articleCommercialDesign .recommendation-image::after { top: 8px; left: 8px; width: 75px; height: 75px; } #articleCommercialDesign .image-number { font-size: 55px; } #articleCommercialDesign .recommendation-content {width: calc(100% - 0px);margin-top: -15px;padding: 45px 30px;} #articleCommercialDesign .contact-list { grid-template-columns: 1fr; } #articleCommercialDesign .contact-item { min-height: 0; } #articleCommercialDesign .commercial-ending { gap: 25px; padding: 75px 20px; } #articleCommercialDesign .ending-title { font-size: 29px; } #articleCommercialDesign .ending-index { font-size: 48px; } } @media screen and (max-width:480px) { #articleCommercialDesign .commercial-container {width: calc(100% - 0px);padding: 0;} #articleCommercialDesign .hero-title, #articleCommercialDesign .hero-title span { font-size: 31px; display: flex; flex-direction: column; align-items: center; } #articleCommercialDesign .hero-subtitle { line-height: 1.8; } #articleCommercialDesign .image-label { display: none; } #articleCommercialDesign .hero-content {width: calc(100% - 0px);padding: 38px 15px;} #articleCommercialDesign .content-title { font-size: 26px; } #articleCommercialDesign .section-title { font-size: 29px; } #articleCommercialDesign .commercial-point-item { padding: 34px 22px; } #articleCommercialDesign .point-top { display: block; } #articleCommercialDesign .point-top .point-en { display: block; margin-top: 12px; } #articleCommercialDesign .exhibition-heading { display: block; } #articleCommercialDesign .exhibition-index { margin-bottom: 25px; } #articleCommercialDesign .exhibition-heading .heading-description { margin-top: 30px; } #articleCommercialDesign .exhibition-image { min-height: 310px; } #articleCommercialDesign .image-caption { display: block; } #articleCommercialDesign .image-caption span { display: block; margin-bottom: 10px; font-size: 30px; } #articleCommercialDesign .image-caption strong { display: block; margin-bottom: 8px; } #articleCommercialDesign .exhibition-content { padding: 38px 10px; } #articleCommercialDesign .memory-item { grid-template-columns: 34px minmax(0,1fr); gap: 12px; } #articleCommercialDesign .exhibition-point-item { display: block; padding: 34px 22px; } #articleCommercialDesign .exhibition-point-item .point-number { margin-bottom: 25px; } #articleCommercialDesign .recommendation-content { width: calc(100% - 0px); padding: 38px 22px; } #articleCommercialDesign .contact-item { padding: 20px; } #articleCommercialDesign .commercial-ending { display: block; padding: 65px 20px; text-align: center; } #articleCommercialDesign .ending-content { text-align: center; } #articleCommercialDesign .ending-title { font-size: 26px; } #articleCommercialDesign .ending-index { margin-top: 35px; text-align: center; } #articleCommercialDesign .symbol-brand::before { left: 14px; top: 17px; } #articleCommercialDesign .symbol-brand::after { top: 29px; left: 11px; width: 32px; } #articleCommercialDesign .symbol-flow::before { width: 29px; } #articleCommercialDesign .design-recommendation { padding: 0; } }