/********************************* _ __ _ __ _ __ | |/,' | |/,' | |/,' | ,' | ,' | ,' /_/ /_/ /_/ 2023.10. *********************************/ /****************************************************************************************** YYY.FILE *******************************************************************************************/ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'); @import url('_reboot.css'); @import url('_utillities.css'); /****************************************************************************************** YYY.RESET *******************************************************************************************/ html {font-size: clamp(1rem, 0.95rem + 0.25vw, 1rem);} html, body {height:100%} body {min-width:320px;} body.notscroll {overflow:hidden;width:100%;height:100vh;touch-action:none;} body.notscroll .swcluster {overflow:hidden;width:100%;height:100vh;touch-action:none;} .preload * {-webkit-transition:none !important;-moz-transition:none !important;-ms-transition:none !important;-o-transition:none !important;transition:none !important;} input::file-selector-button {display: none;} ol,ul {padding-left:0;list-style:none;} [class^="icon"] {display:inline-block;text-indent:-9999em;background-position:0 0;background-repeat:no-repeat} [class$="-component"] {position:relative;max-width:1160px;margin:0 auto;padding:0 20px} .sr-only {position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap; clip-path:inset(50%); border:0;} .text-ellipsis {display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .ad-padding {padding:var(--yyy-spacer-y) var(--yyy-spacer-x)} .ad-padding-x {padding:0 var(--yyy-spacer-x)} .ad-margin-x {margin:0 var(--yyy-spacer-x)} /****************************************************************************************** YYY.COMMON *******************************************************************************************/ :root { --yyy-font-pretendard: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; --font-family-base:var(--yyy-font-pretendard); } .yyy {position:relative;display:flex;min-height:100%;} .yyy-main {display:flex;flex-direction:column;width:100%} .yyy-body {flex:1 1 auto;} .main-padding-top {padding-top:3.75vw;} /* [23-11-29: Fixes] .main-padding-top {padding-top:3.75vw;transition:padding-top .25s ease-in-out;} */ /****************************************************************************************** YYY.COMMON.HEADER *******************************************************************************************/ .yyy-header { --header-width:1920px; --header-height:clamp(47px,3.541vw,68px); --header-nav-padding-top:clamp(18px,1.45vw,28px); --header-nav-padding-bottom:0; --header-nav-link-font-size:clamp(16px,1.04vw,20px); --header-nav-link-line-height:1.2; --header-nav-link-gap-x:clamp(32px,2.5vw,48px); --header-nav-link-hover-color:#FC07F2; --header-row-width:1920px; --header-row-padding-x:clamp(24px,4.16vw,80px); --header-actions-pos-x:var(--header-row-padding-x); --header-actions-pos-t:clamp(16px,2.08vw,40px); --header-actions-yyy-pos-t:var(--header-nav-padding-top); --header-actions-back-icon-url:url(/assets/images/common/ic_back.svg); --header-actions-back-icon-url-inverted:url(/assets/images/common/ic_back_inverted.svg); --header-actions-back-icon-width:clamp(24px,1.66vw,32px); --header-actions-back-icon-height:var(--header-actions-back-icon-width); --header-mobile-transition:background-color .4s ease-in-out, transform .4s ease-in-out, opacity .4s ease-in-out; /* --header-mobile-top-margin:8px; */ --header-mobile-top-margin:min(6.66vw,24px); /* --header-mobile-nav-width:48px; */ --header-mobile-nav-width:auto; --header-mobile-nav-height:37px; /* --header-mobile-nav-margin-b:64px; */ --header-mobile-nav-margin-b:min(17.06vw,64px); --header-mobile-nav-padding-x:min(4.44vw,16px); --header-mobile-nav-border-radius:19px; --header-mobile-nav-bg:rgba(255,255,255,.6); /* --header-mobile-nav-font-size:64px; */ --header-mobile-nav-font-size:min(17.06vw,64px); /* --header-mobile-nav-line-height:64px; */ --header-mobile-nav-font-weight:400; /* --header-mobile-item-font-size:32px; */ --header-mobile-item-font-size:min(8.53vw,32px); --header-mobile-item-line-height:1.187; --header-mobile-item-font-weight:600; --header-mobile-item-font:var(--header-mobile-item-font-weight) var(--header-mobile-item-font-size)/var(--header-mobile-item-line-height) var(--font-family-base); --header-mobile-nav-display:flex; --header-mobile-nav-border:.5px solid var(--border-color); } .yyy-header {position:fixed;left:0;top:0;width:100%;height:var(--header-height);z-index:9999;background-color:transparent;transition:background-color .4s;} .yyy-header .header-row {position:relative;max-width:var(--header-row-width);width:100%;margin:auto} .yyy-header .header-nav {display:flex;justify-content:center;padding:var(--header-nav-padding-top) 0 var(--header-nav-padding-bottom);transition:padding .4s;} .yyy-header .header-nav-link {display:block;font:400 var(--header-nav-link-font-size)/var(--header-nav-link-line-height) var(--font-family-base);text-decoration:none;color:initial} .yyy-header .header-nav-link:not(:first-child) {margin-left:var(--header-nav-link-gap-x)} .yyy-header .header-nav-link:hover {color:var(--header-nav-link-hover-color) !important;} .yyy-header .header-mobile-gnb {position:relative;display:flex;justify-content:center;} .yyy-header .header-mobile-nav {display:var(--header-mobile-nav-display);align-items:center;justify-content:center;height:var(--header-mobile-nav-height);margin-top:var(--header-mobile-top-margin);padding:0 var(--header-mobile-nav-padding-x);border-radius:var(--header-mobile-nav-border-radius);background-color:var(--header-mobile-nav-bg);color:var(--black) !important;border:var(--header-mobile-nav-border);backdrop-filter:blur(20px);-webkit-backdrop-filter: blur(20px)} .yyy-header .header-mobile-nav-overlay {opacity:0;top:0;transform:translateY(-100%);pointer-events:none;position:absolute;left:0;width:100%;padding-top:var(--header-mobile-top-margin);padding-bottom:120px;display:flex;flex-direction:column;align-items:center; background-color:rgba(255, 255, 255, 0.9);backdrop-filter:blur(20px);transition:var(--header-mobile-transition);-webkit-backdrop-filter: blur(20px);} .yyy-header .header-mobile-nav-overlay.is-active {opacity:1;transform:translateY(0);pointer-events:auto;} .yyy-header .header-mobile-nav-overlay * {color:initial} .yyy-header .header-mobile-nav-actions {margin-bottom:var(--header-mobile-nav-margin-b);width:var(--header-mobile-nav-width);height:var(--header-mobile-nav-height);display:flex;align-items:center;justify-content:center;padding:0 var(--header-mobile-nav-padding-x);border-radius:var(--header-mobile-nav-border-radius);color:var(--black) !important} .yyy-header .header-mobile-nav-list {display:flex;flex-direction:column;align-items:center;justify-content:center;} .yyy-header .header-mobile-nav-item {font:var(--header-mobile-item-font);text-decoration:none;} .yyy-header .header-mobile-nav-item:not(:first-child) {margin-top:40px;} .yyy-header .header-actions-item {position:absolute;left:var(--header-actions-pos-x);top:var(--header-actions-pos-t);} .yyy-header .header-actions-item .icon-back {width:var(--header-actions-back-icon-width);height:var(--header-actions-back-icon-height);background-image:var(--header-actions-back-icon-url);background-size:100% auto; transition: transform 0.3s ease-in-out;} .yyy-header .header-actions-yyy {top:var(--header-actions-yyy-pos-t);line-height:1;} .yyy-header .header-actions-text{font:400 var(--header-nav-link-font-size)/var(--header-nav-link-line-height) var(--font-family-base)} .yyy-header-inverted:not(.yyy-header-sticky) .header-actions-item .icon-back {background-image:var(--header-actions-back-icon-url-inverted);} .yyy-header-inverted:not(.yyy-header-sticky) *:not(.header-mobile-nav-overlay *) {color:#fff} .yyy-header-sticky {background-color:rgba(255, 255, 255, 0.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)} .yyy-header-sticky.yyy-header-transition {background:none !important;backdrop-filter:initial;} .scroll-disabled {overflow-y:hidden;} /****************************************************************************************** YYY.COMMON.FOOTER *******************************************************************************************/ .yyy-footer { --footer-padding-top:clamp(80px,8.33vw,200px); --footer-padding-bottom:clamp(24px,2.08vw,40px); --footer-transition:padding .25s ease-in-out; --footer-language-font-size:clamp(14px,1.04vw,20px); --footer-language-item-gap:clamp(24px,2.08vw,40px); --footer-language-active-font-weight:700; --footer-copyright-margin-top:clamp(40px,4.16vw,80px); --footer-copyright-font-size:14px; --footer-copyright-margin-y:8px; } .yyy-footer {position:relative;padding:var(--footer-padding-top) 0 var(--footer-padding-bottom)} .yyy-footer .footer-row {} .yyy-footer .footer-language {display:flex;justify-content:center;} .yyy-footer .language-item {position:relative;font:400 var(--footer-language-font-size)/1.2 var(--font-family-base);text-decoration:none;color:initial;} .yyy-footer .language-item:after {content:'';position:absolute;left:0;bottom:-1px;width:100%;height:0px;background-color:#000;} .yyy-footer .language-item:not(:first-child) {margin-left:var(--footer-language-item-gap);} .yyy-footer .language-item-active {position:relative;font-weight:var(--footer-language-active-font-weight);} .yyy-footer .language-item-active:after {height:2px;} .yyy-footer .footer-copyright {margin-top:var(--footer-copyright-margin-top);text-align:center;} .yyy-footer .copyright-text {font:400 var(--footer-copyright-font-size)/1.21 var(--font-family-base);} .yyy-footer .copyright-text:not(:first-child) {margin-top:var(--footer-copyright-margin-y);} /****************************************************************************************** YYY.PAGE.MAIN *******************************************************************************************/ :root { --component-x:0; --white:#fff; --black:#000; --section-link-border:clamp(1.5px,0.10vw,2px) solid #000; --section-link-padding:clamp(12px,0.83vw,16px) clamp(16px,1.35vw,26px); --section-link-border-radius:clamp(24px,2.08vw,40px); --section-link-margin-top:clamp(24px,2.08vw,40px); --section-link-font-size:clamp(12px,0.83vw,18px); --section-link-bg:transparent; --section-link-bg-over:rgba(0,0,0,1); --section-link-color:inherit; } #yyy-main { --section-content-padding-t:clamp(48px,6.25vw,120px); --story-section-title-font-size:clamp(32px,3.33vw,64px); --section-title-font:800 var(--story-section-title-font-size)/1.1875 var(--font-family-base); --section-desc-font-size:clamp(14px,1.25vw,24px); --section-desc-font:400 var(--section-desc-font-size)/1.5 var(--font-family-base); } #yyy-main {overflow:hidden;} #yyy-main .main-section {position:relative} #yyy-main .section-title {font:var(--section-title-font);-webkit-font-smoothing: antialiased;} #yyy-main .section-desc {font:var(--section-desc-font)} #yyy-main .section-link {display:inline-block;border:var(--section-link-border);border-radius:var(--section-link-border-radius);padding:var(--section-link-padding);margin-top:var(--section-link-margin-top);text-decoration:none;font-size:var(--section-link-font-size);font-weight:600;line-height:1;} #yyy-main .main-section-intro { --intro-content-pos-b:4.1vw; --intro-content-logo-width:clamp(106px, 9.166vw,176px); --intro-content-logo-height:clamp(58px, 5vw, 95px); --intro-content-logo-margin-bottom:clamp(20px,1.875vw,36px); --intro-content-logo-url:url(/assets/images/main/main_intro_yyy.svg); --intro-content-logo-bg-size:100% auto; --intro-title-font-size:clamp(32px,3.33vw,64px); --intro-title-line-height:1.2; --intro-title-font:900 var(--intro-title-font-size)/var(--intro-title-line-height) var(--font-family-base); --intro-bg-url:url(/assets/images/main/main_intro_bg.png); /* --intro-bg-color:; */ --intro-bg-ratio:42.7%; --intro-bg-padding-top:min(45.3125vw, 42.7%); --intro-height:clamp(336px,42.70vw,820px); } #yyy-main .main-section-intro {} #yyy-main .main-section-intro .intro-content {position:absolute;left:0;bottom:var(--intro-content-pos-b);width:100%;text-align:center;z-index:1;} #yyy-main .main-section-intro .intro-logo {width:var(--intro-content-logo-width);height:var(--intro-content-logo-height);margin:0 auto var(--intro-content-logo-margin-bottom);background:var(--intro-content-logo-url) no-repeat 50% 50%;background-size:var(--intro-content-logo-bg-size);overflow:hidden;text-indent:-9999em;} #yyy-main .main-section-intro .intro-title {color:#fff;font:var(--intro-title-font);-webkit-font-smoothing: antialiased;} #yyy-main .main-section-intro .intro-bg {position:relative;pointer-events:none;/*background-image:var(--intro-bg-url);background-size:cover;*/height:var(--intro-height);/*background-position:50% 100%;*/background-color:#f3f3f4;} #yyy-main .main-section-intro .intro-bg > * {width:100%; height:100%; object-fit:cover; object-position:bottom;} #yyy-main .main-section-slogan { --slogan-padding-y:0; --slogan-background-color:#fff; --slogan-height:clamp(224px,29.166vw,560px); --slogan-font-size:clamp(24px, 2.5vw, 48px); --slogan-line-height:1.33; --slogan-font:800 var(--slogan-font-size)/var(--slogan-line-height) var(--font-family-base); } #yyy-main .main-section-slogan {display:flex;align-items:center;justify-content:center;height:var(--slogan-height);padding:var(--slogan-padding-y) var(--component-x);background-color:var(--slogan-background-color);} #yyy-main .main-section-slogan .slogan-content {text-align:center;} #yyy-main .main-section-slogan .slogan-text {font:var(--slogan-font);-webkit-font-smoothing: antialiased;} #yyy-main .main-section-slogan .slogan-text br {display:none} #yyy-main .main-section-project { --project-height:clamp(400px, 45.83vw, 880px); --project-padding:3.4375vw clamp(120px,6.25vw,478px); --project-max-width:51.5625vw; --project-width:clamp(528px,65vw,1072px); --project-bg:rgba(243, 243, 244, 1); --project-body-height:100%; --project-screen-height:100%; --project-screen-composite-wrapper-height:100%; --project-screen-composite-z-index:3; --project-screen-composite-border:1px solid rgba(0, 0, 0, 0.15); --project-screen-composite-box-shadow:0px 85px 68px rgba(38, 30, 30, 0.03), 0px 30.7469px 25px rgba(0, 0, 0, 0.0206994), 0px 15px 12px rgba(0, 0, 0, 0.0166887), 0px 7.31751px 5.85401px rgba(0, 0, 0, 0.0133113), 0px 2.89336px 2.31468px rgba(0, 0, 0, 0.00930055); --project-screen-composite-border-radius:clamp(28px,3.177vw,62px); --project-screen-composite-width:clamp(168px,18.85vw,362px); --project-screen-composite-height:clamp(347px,38.958vw,748px); --project-screen-composite-bg:#fff; --project-screen-contents-pos-s:clamp(7px,0.78125vw,15px); --project-screen-contents-pos-t:clamp(7px,0.78125vw,15px); --project-screen-innter-content-width:calc(calc(var(--project-screen-composite-width) - 2px) - calc(var(--project-screen-contents-pos-s) * 2)); --project-screen-innter-content-height:calc(calc(var(--project-screen-composite-height) - 2px) - calc(var(--project-screen-contents-pos-t) * 2)); --project-screen-innter-content-border:1px solid rgba(0, 0, 0, 0.15); --project-screen-innter-content-border-radius:clamp(22px,2.393vw,46px); --project-parallax:100px; --project-parallax-pos-y:calc(var(--project-parallax) * -1); --project-parallax-height:calc(100% + calc(var(--project-parallax) * 2)); } #yyy-main .main-section-project {} #yyy-main .main-section-project .project {position:relative;height:var(--project-height);display:flex;align-items:center;} #yyy-main .main-section-project .project-body {position:relative;width:var(--project-width);height:var(--project-body-height);display:flex;justify-content:flex-end;align-items:center;margin:auto;z-index:10;} #yyy-main .main-section-project .project-screen {position:absolute;left:0;top:0;width:100%;height:var(--project-body-height);z-index:1;} #yyy-main .main-section-project .project-screen-composite {z-index:var(--project-screen-composite-z-index);position:relative;width:var(--project-width);height:var(--project-screen-composite-wrapper-height);padding:0;display:flex;justify-content:flex-start;align-items:center;margin:0 auto} #yyy-main .main-section-project .project-screen-composite-container {position:relative;border:var(--project-screen-composite-border); box-shadow:var(--project-screen-composite-box-shadow); border-radius:var( --project-screen-composite-border-radius);width:var(--project-screen-composite-width);height:var(--project-screen-composite-height);background-color:var(--project-screen-composite-bg);} #yyy-main .main-section-project .project-screen-contents {position:absolute;left:var(--project-screen-contents-pos-s);top:var(--project-screen-contents-pos-t);} #yyy-main .main-section-project .project-screen-inner-content {overflow:hidden;width:var( --project-screen-innter-content-width);height:var( --project-screen-innter-content-height);border-radius:var( --project-screen-innter-content-border-radius);border:var(--project-screen-innter-content-border);} #yyy-main .main-section-project .project-screen-inline-component {width:100%;height:100%;padding:0} #yyy-main .main-section-project .project-screen-inline-component video {position:absolute;pointer-events:none;display:block;width:100%;height:100%;z-index:3;object-fit:cover;} #yyy-main .main-section-project .project-screen-inline-component picture {position:absolute;pointer-events:none;display:block;width:100%;height:100%;object-fit:cover;} #yyy-main .main-section-project .project-screen-inline-component img {width:100%;height:100%;} #yyy-main .main-section-project .project-screen-bg {position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;} #yyy-main .main-section-project .project-screen-bg canvas {width:100%;height:100%} #yyy-main .main-section-project .project-screen-bg-content {width:100%;height:100%;} #yyy-main .main-section-project .project-screen-bg-content img {width:100%;height:100%;object-fit:cover;} #yyy-main .main-section-project { --project-content-pos-t:0; --project-content-pos-t-min:-5.729vw; --project-content-height:36.45vw; --project-content-height-min:28.90vw; --project-content-justify-content:center; --project-icon-width:clamp(36px,3.22vw,60px); --project-icon-height:var(--project-icon-width); --project-icon-margin-b:clamp(24px,2.08vw,40px); --project-icon-box-shadow:0px 16.666px 33.333px 0px rgba(0, 0, 0, 0.05); --project-icon-border-radius:clamp(8px,0.625vw,12px); --project-desc-margin-t:1.66vw; --project-desc-font-size:clamp(14px,1.04vw,20px); --project-desc-ling-height:1.4; --project-desc-color:rgba(34, 34, 34, 1); --project-link-border:var(--section-link-border); --project-link-padding:var(--section-link-padding); --project-link-border-radius:var(--section-link-border-radius); --project-link-margin-top:var(--section-link-margin-top); --project-link-font-size:var(--section-link-font-size); --project-link-bg:var(--section-link-bg); --project-link-color:var(--section-link-color); --project-link-bg-over:var(--section-link-bg-over); --project-awards-logo:unset; --project-awards-logo-width:clamp(14px,1.04vw,20px); --project-awards-logo-height:clamp(17px,1.302vw,25px); --project-awards-logo-margin-e:clamp(8px,0.625vw,12px); --project-awards-logo-url:url(/assets/images/main/ic_project_apple.svg); --project-awards-logo-wht-url:url(/assets/images/main/ic_project_apple_wht.svg); --project-awards-logo-background-size:var(--project-awards-logo-width) auto; --project-awards-font-size:clamp(14px,1.04vw,20px); --project-awards-pos-b:clamp(48px,4.16vw,80px); --project-awards-pos-t:inherit; --project-awards-color:inherit; --project-text-color:inherit; --project-text-color-inverted:#fff; } #yyy-main .main-section-project .project-contents {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:var(--project-content-justify-content);height:100%;transform:translateY(var(--project-content-pos-t));} #yyy-main .main-section-project .project-icon {flex:0 0 var(--project-icon-width);width:var(--project-icon-width);height:var(--project-icon-width);margin-bottom:var(--project-icon-margin-b);background-size:var(--project-icon-width) auto;box-shadow:var(--project-icon-box-shadow);border-radius:var(--project-icon-border-radius);overflow:hidden;} #yyy-main .main-section-project .project-logo {background-repeat:no-repeat;background-position:50% 50%} #yyy-main .main-section-project .project-title {text-align:center;font:600 18px/22px var(--font-family-base)} #yyy-main .main-section-project .project-desc {margin-top:var(--project-desc-margin-t);text-align:center;font-size:var(--project-desc-font-size);line-height:var(--project-desc-ling-height);color:var( --project-desc-color)} #yyy-main .main-section-project .project-link {display:inline-block;border:var(--project-link-border);border-radius:var(--project-link-border-radius);padding:var(--project-link-padding);margin-top:var(--project-link-margin-top);text-decoration:none;font-size:var(--project-link-font-size);font-weight:600;line-height:1;background-color:var(--project-link-bg);color:var(--project-link-color);} #yyy-main .main-section-project .project-awards {position:absolute;bottom:var(--project-awards-pos-b);display:flex;align-items:center;top:var(--project-awards-pos-t);} #yyy-main .main-section-project .project-awards .awards-logo-apple {width:var(--project-awards-logo-width);height:var(--project-awards-logo-height);margin-right:var(--project-awards-logo-margin-e);background:var(--project-awards-logo-url) no-repeat 50% 50%;background-size:var(--project-awards-logo-background-size)} #yyy-main .main-section-project .project-awards .awards-logo-apple-wht {width:var(--project-awards-logo-width);height:var(--project-awards-logo-height);margin-right:var(--project-awards-logo-margin-e);background:var(--project-awards-logo-wht-url) no-repeat 50% 50%;background-size:var(--project-awards-logo-background-size)} #yyy-main .main-section-project .project-awards .awards-text {font:600 var(--project-awards-font-size)/1 var(--font-family-base);white-space:nowrap;color:var(--project-awards-color);} #yyy-main .main-section-project .project:nth-of-type(even) .project-screen-composite {flex-direction:row-reverse;} #yyy-main .main-section-project .project:nth-of-type(even) .project-body {flex-direction:row-reverse;} #yyy-main .main-section-project .project[data-project="kant"] { --kant-icon-url:url(/assets/images/main/project_kant_icon.svg); --kant-logo-width:clamp(100px,9.79vw,187px); --kant-logo-height:clamp(34px,3.33vw,64px); --kant-logo-url:url(/assets/images/main/project_kant_logo.svg); --kant-logo-background-size:var(--kant-logo-width) auto; --kant-bg-url:url(/assets/images/main/project_kant_bg.jpg); --kant-bg-pos:center; --kant-bg-size:cover; --kant-bg-translateX:-4.5%; } #yyy-main .main-section-project .project[data-project="kant"] .project-screen-bg {overflow:hidden;} #yyy-main .main-section-project .project[data-project="kant"] .project-icon {background-image:var(--kant-icon-url);} #yyy-main .main-section-project .project[data-project="kant"] .project-logo {flex:0 0 var(--kant-logo-height);width:var(--kant-logo-width);height:var(--kant-logo-height);background-image:var(--kant-logo-url);background-size:var(--kant-logo-background-size);} #yyy-main .main-section-project .project[data-project="kant"] .project-screen-bg {background-color:rgba(243, 243, 244, 1)} #yyy-main .main-section-project .project[data-project="kant"] .project-screen-bg-content {background:var(--kant-bg-url) no-repeat var(--kant-bg-pos); background-size:var(--kant-bg-size);transform:translate(var(--kant-bg-translateX), var(--kant-bg-translateY));height:var(--project-parallax-height);} #yyy-main .main-section-project .project[data-project="vinyl"] { --vinyl-icon-url:url(/assets/images/main/project_vinyle_icon.svg); --vinyl-logo-width:clamp(86px,10vw,191px); --vinyl-logo-height:clamp(36px,4.27vw,80px); --vinyl-logo-url:url(/assets/images/main/project_vinyl_logo.svg); --vinyl-logo-background-size:var(--vinyl-logo-width) auto; /* --vinyl-bg-color:rgba(243, 243, 244, 1); */ --vinyl-bg-color:linear-gradient(112.79deg, #FFFFFF 0%, #F9F9F9 64.79%); ; } #yyy-main .main-section-project .project[data-project="vinyl"] .project-icon {background-image:var(--vinyl-icon-url);} #yyy-main .main-section-project .project[data-project="vinyl"] .project-logo {flex:0 0 var(--vinyl-logo-height);width:var(--vinyl-logo-width);height:var(--vinyl-logo-height);background-image:var(--vinyl-logo-url);background-size:var(--vinyl-logo-background-size);} #yyy-main .main-section-project .project[data-project="vinyl"] .project-screen-bg {background-color:var(--vinyl-bg-color)} #yyy-main .main-section-project .project[data-project="duologue"] { --duologue-icon-url:url(/assets/images/main/project_duologue_icon.svg); --duologue-logo-width:clamp(167px,18.33vw,353px); --duologue-logo-height:clamp(36px,3.90vw,76px); --duologue-logo-url:url(/assets/images/main/project_duologue_logo.svg); --duologue-logo-background-size:var(--duologue-logo-width) auto; --duologue-text-color:var(--project-text-color-inverted); --duologue-bg-url:url(/assets/images/main/project_duologue_bg.jpg); --duologue-bg-pos:top; --duologue-bg-size:cover; --duologue-bg-translateX:-4.5%; --duologue-awards-color:var(--duologue-text-color); --duologue-bg-translateY:0; } #yyy-main .main-section-project .project[data-project="duologue"] .project-screen-bg {overflow:hidden;} #yyy-main .main-section-project .project[data-project="duologue"] .project-desc {color:var(--duologue-text-color)} #yyy-main .main-section-project .project[data-project="duologue"] .project-awards .awards-text {color:var(--duologue-awards-color)} #yyy-main .main-section-project .project[data-project="duologue"] .project-icon {background-image:var(--duologue-icon-url);} #yyy-main .main-section-project .project[data-project="duologue"] .project-logo {width:var(--duologue-logo-width);height:var(--duologue-logo-height);background-image:var(--duologue-logo-url);background-size:var(--duologue-logo-background-size)} #yyy-main .main-section-project .project[data-project="duologue"] .project-screen-bg-content {background:var(--duologue-bg-url) no-repeat var(--duologue-bg-pos); background-size:var(--duologue-bg-size);transform:translate(0, var(--duologue-bg-translateY));height:var(--project-parallax-height);} #yyy-main .main-section-project .project[data-project="tmu"] { --tmu-icon-url:url(/assets/images/main/project_tmu_icon.svg); --sketchplus-logo-width:clamp(253px,26.35vw,506px); --sketchplus-logo-height:clamp(38px,4.06vw,77px); --tmu-logo-width:clamp(253px,26.35vw,506px); --tmu-logo-height:clamp(38px,4.06vw,77px); --tmu-logo-url:url(/assets/images/main/project_tmu_logo.svg); --tmu-logo-background-size:var(--tmu-logo-width) auto; --tmu-text-color:var(--project-text-color-inverted); --tmu-awards-color:var(--tmu-text-color); --tmu-bg-translateY:0; } #yyy-main .main-section-project .project[data-project="tmu"] .project-screen-bg {overflow:hidden;} #yyy-main .main-section-project .project[data-project="tmu"] .project-desc {color:var(--tmu-text-color);} #yyy-main .main-section-project .project[data-project="tmu"] .project-awards .awards-text {color:var(--tmu-awards-color);} #yyy-main .main-section-project .project[data-project="tmu"] .project-icon {background-image:var(--tmu-icon-url);} #yyy-main .main-section-project .project[data-project="tmu"] .project-logo {width:var(--tmu-logo-width);height:var(--tmu-logo-height);background-image:var(--tmu-logo-url);background-size:var(--tmu-logo-background-size);} #yyy-main .main-section-project .project[data-project="tmu"] .project-screen-bg-content {transform:translate(0, var(--tmu-bg-translateY));height:var(--project-parallax-height);} #yyy-main .main-section-project .project[data-project="sketchplus"] { --sketchplus-icon-url:url(/assets/images/main/project_sketchplus_icon.svg); --sketchplus-logo-width:clamp(119px,12.39vw,237px); --sketchplus-logo-height:clamp(37px,3.95vw,75px); --sketchplus-logo-url:url(/assets/images/main/project_sketchplus_logo.svg); --sketchplus-logo-background-size:var(--sketchplus-logo-width) auto; --sketchplus-bg-pos-b:-4.479vw; --sketchplus-bg-pos-e:-1.55vw; --sketchplus-bg-width:37.291vw; --sketchplus-bg-height:23.69vw; --sketchplus-bg:rgba(243, 243, 244, 1); } #yyy-main .main-section-project .project[data-project="sketchplus"] .project-contents {transform:translateY(var(--project-content-pos-t-min));} #yyy-main .main-section-project .project[data-project="sketchplus"] .project-icon {background-image:var(--sketchplus-icon-url);} #yyy-main .main-section-project .project[data-project="sketchplus"] .project-logo {width:var(--sketchplus-logo-width);height:var(--sketchplus-logo-height);background-image:var(--sketchplus-logo-url);background-size:var(--sketchplus-logo-background-size)} #yyy-main .main-section-project .project[data-project="sketchplus"] .project-screen-bg {background:var(--sketchplus-bg)} #yyy-main .main-section-project .project[data-project="sketchplus"] .project-screen-bg-content {position:absolute;bottom:var(--sketchplus-bg-pos-b);right:var(--sketchplus-bg-pos-e);width:var(--sketchplus-bg-width);height:var(--sketchplus-bg-height)} #yyy-main .main-section-project .project[data-project="sketchplus"] .project-screen-bg-content img {object-fit:contain;} #yyy-main .main-section-team { --team-fence-height:5.479vw; --team-fence-width:10vw; --team-fence-bg-color:#fff; --team-bg-height:33.33vw; --team-bg-margin-t:-5.20vw; --team-desc-margin-t:clamp(8px,1.25vw,24px); --team-content-padding-t:var(--section-content-padding-t); } #yyy-main .main-section-team {position:relative;} #yyy-main .main-section-team:before {content:'';position:absolute;top:0;right:0;z-index:5;width:var(--team-fence-width);height:var(--team-fence-height);background-color:var(--team-fence-bg-color);} #yyy-main .main-section-team .section-content {position:relative;z-index:2;text-align:center;padding:var(--team-content-padding-t) var(--component-x) 0;transition:padding-top .3s ease;} #yyy-main .main-section-team .section-bg {position:relative;height:var(--team-bg-height);margin-top:var(--team-bg-margin-t);} #yyy-main .main-section-team .section-bg:before {content:'';position:absolute;left:0;top:0;z-index:1;height:1px;width:100%;background-color:#fff} #yyy-main .main-section-team .section-bg img, #yyy-main .main-section-team .section-bg video {width:100%;height:100%;object-fit:cover;object-position:50% 0;} #yyy-main .main-section-team .section-desc {margin-top:var(--team-desc-margin-t)} #yyy-main .main-section-story { --story-content-padding-t:var(--section-content-padding-t); --story-title-margin-b:clamp(24px,3.33vw,64px); } #yyy-main .main-section-story {position:relative;} #yyy-main .main-section-story .section-content {text-align:center;padding-top:var(--story-content-padding-t)} #yyy-main .main-section-story .section-title {text-align:center;margin-bottom:var(--story-title-margin-b)} /****************************************************************************************** YYY.PAGE.ABOUT *******************************************************************************************/ #yyy-about { --about-intro-yyy-width:clamp(509px,51.04vw,980px); --about-intro-el-height:clamp(400px,42.60vw,818px); --about-intro-body-height:clamp(256px,23.958vw,460px); --about-intro-body-padding-t:clamp(80px,6.25vw,120px); --about-intro-title-font-size:clamp(32px,3.33vw,64px); --about-section-title-font-size:clamp(32px,2.5vw,48px); --about-section-desc-font-size:clamp(16px,1.04vw,20px); --about-section-desc-margin-t:clamp(16px,1.25vw,24px); --about-section-image-height:clamp(336px,31.25vw,600px); --about-section-padding-x:clamp(80px,12.5vw,280px); --about-section-body-padding-t:clamp(32px,2.5vw,48px); --about-section-body-padding-b:clamp(72px,6.25vw,120px); } #yyy-about .about-intro {max-width:1920px;margin:0 auto} #yyy-about .about-intro .intro-logo {position:relative;margin:0 auto} #yyy-about .about-intro .intro-logo-yyy {position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:var(--about-intro-yyy-width);text-align:center;} #yyy-about .about-intro .intro-logo-yyy img {width:100%;height:auto} #yyy-about .about-intro .intro-logo-el {position:relative;z-index:1;height:var(--about-intro-el-height);width:100%;} #yyy-about .about-intro .intro-logo-el img {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);;width:auto;height:100%} #yyy-about .about-intro .intro-body {height:var(--about-intro-body-height);padding-top:var(--about-intro-body-padding-t);text-align:center;} #yyy-about .about-intro .intro-title {font:900 var(--about-intro-title-font-size)/1.34 var(--font-family-base);-webkit-font-smoothing: antialiased;} #yyy-about .about-section {position:relative;text-align:center;padding:0 var(--about-section-padding-x);max-width:1920px;margin:0 auto} #yyy-about .about-section .section-title {font:800 var(--about-section-title-font-size)/1.33 var(--font-family-base);-webkit-font-smoothing: antialiased;} #yyy-about .about-section .section-desc {margin-top:var(--about-section-desc-margin-t);font:400 var(--about-section-desc-font-size)/1.4 var(--font-family-base);} #yyy-about .about-section .section-image {position:relative;height:var(--about-section-image-height)} #yyy-about .about-section .section-image .image-inner {position:absolute;left:0;top:0;width:100%;height:100%;overflow: hidden;} #yyy-about .about-section .section-image .image-inner > * {width:100%;height:100%;object-fit:cover;} #yyy-about .about-section .section-body {padding:var(--about-section-body-padding-t) 0 var(--about-section-body-padding-b);} #yyy-about .about-section:last-child .section-body {padding-bottom:0} /****************************************************************************************** YYY.PAGE.STORY *******************************************************************************************/ #yyy-story { --section-header-padding-top-list:clamp(48px,6.25vw,120px); --section-header-padding-bottom:clamp(24px,3.33vw,64px); --section-header-title-font-size:clamp(32px,3.33vw,64px); --section-header-transition:padding .4s ease-in-out; --section-header-title-transition:font-size .4s ease-in-out; } :root { --story-padding-x:clamp(104px,14.58vw,280px); --story-list-display:grid; --story-list-gap-x:clamp(20px,2.08vw,40px); --story-list-gap-y:clamp(24px,6.66vw,64px); --story-item-content-padding-top:clamp(12px,0.83vw,16px); --story-item-title-font-size:clamp(14px,1.25vw,24px); --story-item-meta-margin-top:clamp(4px,0.416vw,8px); --story-item-meta-font-size:clamp(10px,0.9375vw,18px); --story-item-meta-gap:2px; --story-item-link-transition-property:color, background-color, text-decoration-color, border-color; --story-item-link-transition-duration:.4s; --story-item-link-hover-color:#FC07F2; } #yyy-story{ --story-section-padding-t:clamp(120px,9.58vw,184px); --story-section-padding-b:clamp(80px,8.33vw,160px); --story-section-bg-color:rgba(255, 255, 255, 1); --story-section-gap:clamp(64px,6.25vw,120px); --story-section-header-margin-b:clamp(64px,1.04vw,80px); --story-section-title-font-size:clamp(32px,2.91vw,56px); /* --story-section-body-padding-x:clamp(80px,12.58vw,280px); */ --story-section-body-padding-x:0; --story-section-body-text-font-size:clamp(16px,1.04vw,20px); --story-section-body-meta-margin-t:24px; --story-section-body-img-margin-b:56px; --story-section-body-img-height:clamp(226px,17.5vw, 335px); --editor-padding-x:60px; --editor-width:920px; --editor-padding-y:clamp(28px,2.5vw,48px); } .story-list-section .section-header {padding:var(--section-header-padding-top-list) 0 var(--section-header-padding-bottom);} .story-list-section .section-title {text-align:center;font:800 var(--section-header-title-font-size)/1.218 var(--font-family-base);-webkit-font-smoothing: antialiased;} .story-list-container {display:flex;justify-content:center; padding:0 var(--story-padding-x);} .story-list-container .story-list {display:var(--story-list-display);grid-template-columns:repeat(3, 33.3%);max-width:1360px;width:100%;margin:0 calc(var(--story-list-gap-x) * -1) calc(var(--story-list-gap-y) * -1);flex:1 1 100%} .story-list-container .story-item {position:relative;flex:1;margin:0 var(--story-list-gap-x) 0;margin-bottom:var(--story-list-gap-y);} .story-list-container .story-rounded {} .story-list-container .story-rounded .item-thumbnail {border-radius:50%;overflow:hidden;} .story-list-container .item-link {position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;} .story-list-container .item-thumbnail {overflow:hidden;position:relative;padding-top:100%;} .story-list-container .item-thumbnail > * {position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;} .story-list-container .item-thumbnail > img {transition: transform .3s ease-in;} .story-list-container .item-contents {padding-top:var(--story-item-content-padding-top);text-align:center;} .story-list-container .item-title {font:400 var(--story-item-title-font-size)/1.5 var(--font-family-base);} .story-list-container .item-meta {margin-top:var(--story-item-meta-margin-top);display:flex;justify-content:center;} .story-list-container .item-title, .story-list-container .item-meta {transition-property:var(--story-item-link-transition-property);transition-duration:var(--story-item-link-transition-duration);} .story-list-container .item-link:hover ~ .item-contents .item-title, .story-list-container .item-link:hover ~ .item-contents .item-meta {color:var(--story-item-link-hover-color)} .story-list-container .item-meta-text {font:400 var(--story-item-meta-font-size)/1.222 var(--font-family-base);} .story-list-container .item-meta-text:not(:first-child) {margin-left:var(--story-item-meta-gap)} .story-detail-section {position:relative;z-index:1;} .story-detail-section {padding:var(--story-section-padding-t) 0 var(--story-section-padding-b);background-color:var(--story-section-bg-color);} .story-detail-section * {color:var(--black);} .story-detail-section .section-component {max-width:1920px;margin:0 auto;padding:0;padding:0 var(--story-section-body-padding-x);} .story-detail-section .section-header {text-align:center;margin-bottom:var(--story-section-header-margin-b);} .story-detail-section .section-title {color:var(--black);font-size:var(--story-section-title-font-size);line-height:1.214;-webkit-font-smoothing: antialiased;} .story-detail-section .section-body {max-width:calc(1360px - var(--story-list-gap-x));margin:auto;width:100%;padding:0 var(--story-section-body-padding-x);transition:padding .4s} .story-detail-section .section-body .body-image {margin-bottom:var(--story-section-body-img-margin-b)} .story-detail-section .section-body .body-image-box {height:var(--story-section-body-img-height)} .story-detail-section .section-body .body-image-box img {width:100%;height:100%;object-fit:contain;} .story-detail-section .body-content-text {font:normal var(--story-section-body-text-font-size)/1.4 var(--font-family-base);} .story-detail-section .body-meta {margin-top:var(--story-section-body-meta-margin-t)} .story-detail-section .body-meta-text {font:normal var(--story-section-body-text-font-size)/1.4 var(--font-family-base);} .story-detail-section .body-actions {} .story-detail-section .body-actions .action-item {display:inline-block;border:var(--section-link-border);border-radius:var(--section-link-border-radius);padding:var(--section-link-padding);margin-top:var(--section-link-margin-top);text-decoration:none;font-size:var(--section-link-font-size);font-weight:600;line-height:1;} /* .story-detail-section ~ .story-list-section {padding-top:var(--story-section-gap)} */ .story-detail-section ~ .story-list-section {position:fixed;left:0;bottom:0;width:100%;padding:var(--story-section-gap) 0;background-color:var(--black)} .story-detail-section ~ .story-list-section .item-title {color:#F9F9F9 !important} .story-detail-section ~ .story-list-section .item-meta-text {color:#F9F9F9 !important} /* 231128:Add */ .story-detail-section .body-contents > p:first-child > img {margin-top:0} .story-detail-section p img {width:calc(100% + calc(var(--editor-padding-x) * 2));height:auto;display:block !important;margin:var(--editor-padding-y) 0;margin-left:calc(var(--editor-padding-x) * -1);} .story-detail-section p {font:normal var(--story-section-body-text-font-size)/1.4 var(--font-family-base);padding:0 var(--editor-padding-x)} .story-detail-section p a {font:inherit;color:#0057FB;text-decoration:none;display:inline-block;margin-bottom:8px} .story-detail-section p strong {display:block;margin-bottom:16px} .story-detail-section .section-title {font-weight:800} .story-detail-section .section-component {max-width:var(--editor-width);padding:0} .story-detail-section .ql-size-small {display:block;margin-top:calc(calc(var(--editor-padding-y) - 16px) * -1);margin-bottom:var(--editor-padding-y);font:400 14px/17px var(--font-family-base)} .story-detail-section .body-meta {padding:0 var(--editor-padding-x)} /****************************************************************************************** YYY.PAGE.SAYHI *******************************************************************************************/ #yyy-sayHi { --sayHi-padding-t:8.33vw; --sayHi-padding-x:12.5%; --sayHi-fields-max-width:50rem; --sayHi-floating-margin-t:.25rem; --sayHi-floating-input-padding-x:clamp(24px, 1.25vw, 24px) ; --sayHi-floating-input-padding-y:clamp(16px, 1.04vw, 24px); --sayHi-floating-input-padding-t:clamp(32px, 2.135vw, 41px); --sayHi-floating-input-height:calc(calc(var(--sayHi-floating-input-padding-y) * 2) + var(--sayHi-floating-input-line-height)); --sayHi-floating-input-bg:rgba(138, 138, 141, 0.1); --sayHi-floating-input-transition:padding .125s ease-in, background-color .4s; --sayHi-floating-input-border-radius:max(0.41vw,8px); --sayHi-floating-input-font-size:clamp(14px, 0.9375vw, 18px); --sayHi-floating-input-line-height:1.166; --sayHi-floating-input-font:400 var(--sayHi-floating-input-font-size)/var(--sayHi-floating-input-line-height) var(--font-family-base); --sayHi-floating-input-color:rgba(0, 0, 0, 1); --sayHi-floating-input-color-placeholder:rgba(0, 0, 0, 1); /* --sayHi-floating-label:; */ --sayHi-floating-label-pos-x:var(--sayHi-floating-input-padding-x); --sayHi-floating-label-pos-y:var(--sayHi-floating-input-padding-y); --sayHi-floating-label-font:var(--sayHi-floating-input-font); --sayHi-floating-label-font-size-sm:clamp(10px,0.729vw,14px); --sayHi-floating-label-line-height-sm:1.214; --sayHi-floating-label-color:rgba(0, 0, 0, .4); --sayHi-floating-label-transition:font-size .125s ease-in; --sayHi-form-btn-bg:rgba(0, 0, 0, 1); --sayHi-form-btn-color:rgba(0, 0, 0, .4); --sayHi-form-btn-color-active:rgba(255, 255, 255, 1); --sayHi-form-btn-transition:background-color .4s ease-in, font-color .4s ease-in; } .form-floating {position:relative} .form-floating .form-label {position:absolute;pointer-events:none;left:var(--sayHi-floating-label-pos-x);top:var(--sayHi-floating-label-pos-y);font:var(--sayHi-floating-label-font);color:var(--sayHi-floating-label-color);transition:var(--sayHi-floating-label-transition)} .form-floating .form-control {-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;background-color:var(--sayHi-floating-input-bg);padding:var(--sayHi-floating-input-padding-y) var(--sayHi-floating-input-padding-x);transition:var(--sayHi-floating-input-transition);border-radius:var(--sayHi-floating-input-border-radius);border:none;font:var(--sayHi-floating-input-font);height:var(--sayHi-floating-input-height);resize:none;color:var(--sayHi-floating-input-color)} .form-floating .form-control::placeholder {color:transparent} .form-floating-active .form-control {padding-top:var(--sayHi-floating-input-padding-t);height:auto;} .form-floating-active .form-control ~ label {font-size:var(--sayHi-floating-label-font-size-sm);line-height:var(--sayHi-floating-label-line-height-sm)} /* .form-fields-active .form-control {color:var(--sayHi-form-btn-color-active) !important} */ .form-floating ~ .form-floating {margin-top:var(--sayHi-floating-margin-t);} #yyy-sayHi { --sayHi-body-width:75vw; --sayHi-body-padding-t:4.16vw; --sayHi-body-padding-b:4.16vw; --sayHi-body-padding-x:clamp(40px, 2.08vw, 80px); --sayHi-body-bg:#fff; --sayHi-body-transition:background-color .4s, padding .4s,max-width .4s; /*--sayHi-body-transition:background-color .4s, padding .4s,max-width .4s, transform .7s ease-in-out;*/ --sayHi-color:rgba(0, 0, 0, 1); --sayHi-section-header-margin-b:clamp(48px, 6.25vw, 120px); --sayHi-section-title-font-size:clamp(40px, 4.166vw, 80px); --sayHi-section-title-line-height:1.1875; --sayHi-section-title-font-weight:800; --sayHi-section-title-font:var(--sayHi-section-title-font-weight) var(--sayHi-section-title-font-size)/var(--sayHi-section-title-line-height) var(--font-family-base); --sayHi-bottom-margin-t:100px; --sayHi-bottom-font-size:clamp(14px,0.9375vw,18px); --sayHi-bottom-line-height:1.3125rem; --sayHi-bottom-font:400 var(--sayHi-bottom-font-size)/var(--sayHi-bottom-line-height) var(--font-family-base); --sayHi-bottom-color:rgba(0, 0, 0, 1); --sayHi-floating-actions-margin-top:clamp(16px,1.25vw,24px); --sayHi-floating-btn-padding-x:clamp(24px,1.666vw,32px); --sayHi-floating-btn-padding-y:clamp(14px,1.04vw,20px); --sayHi-floating-btn-border-radius:100px; } #yyy-sayHi {background-color:#eee;padding:var(--sayHi-padding-t) 0 0;} #yyy-sayHi .yyy-body {display:flex;flex-direction:column;width:100%;max-width:var(--sayHi-body-width);padding:var(--sayHi-body-padding-t) var(--sayHi-body-padding-x) var(--sayHi-body-padding-b);margin:0 auto;background-color:var(--sayHi-body-bg);transition:var(--sayHi-body-transition);} /*#yyy-sayHi {}*/ /*#yyy-sayHi.sayHi-container {position:fixed;left:0;top:0;width:100%;height:100%;padding:var(--sayHi-padding-t) 0 0;display:flex;flex-direction:column;min-height:100%;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:999;opacity:0;visibility:hidden;pointer-events:none;z-index:-1;transition:opacity .4s;}*/ /*#yyy-sayHi .sayHi-wrapper {display:flex;flex-direction:column;width:100%;max-width:var(--sayHi-body-width);padding:var(--sayHi-body-padding-t) var(--sayHi-body-padding-x) var(--sayHi-body-padding-b);margin:0 auto;background-color:var(--sayHi-body-bg);transform:translateY(30%);transition:var(--sayHi-body-transition);flex:1}*/ /*#yyy-sayHi.sayHi-container.is-visible {z-index:999;opacity:1;visibility:visible;pointer-events:auto;}*/ /*#yyy-sayHi.sayHi-container.is-visible .sayHi-wrapper {transform:translateY(0%);}*/ #yyy-sayHi .sayHi-section {flex:1 1 auto} #yyy-sayHi .sayHi-section .section-header {text-align:center;margin-bottom:var(--sayHi-section-header-margin-b)} #yyy-sayHi .sayHi-section .section-title {font:var(--sayHi-section-title-font);color:var(--sayHi-color);-webkit-font-smoothing: antialiased;} #yyy-sayHi .sayHi-section .form-fields {width:100%;max-width:var(--sayHi-fields-max-width);margin:0 auto;} /*#yyy-sayHi .sayHi-section .form-actions {width:100%;max-width:var(--sayHi-fields-max-width);margin:var(--sayHi-floating-margin-t) auto 0;}*/ /*#yyy-sayHi .sayHi-section .form-actions .form-btn {width:100%;font:var(--sayHi-floating-input-font);padding:var(--sayHi-floating-input-padding-y) var(--sayHi-floating-input-padding-x);height:var(--sayHi-floating-input-height);border-radius:var(--sayHi-floating-input-border-radius);transition:var(--sayHi-form-btn-transition);color:var(--sayHi-form-btn-color)}*/ #yyy-sayHi .sayHi-section .form-actions {width:100%;max-width:var(--sayHi-fields-max-width);margin:var(--sayHi-floating-actions-margin-top) auto 0;display:flex;justify-content:center;} #yyy-sayHi .sayHi-section .form-actions .form-btn {font:var(--sayHi-floating-input-font);padding:var(--sayHi-floating-btn-padding-y) var(--sayHi-floating-btn-padding-x);height:var(--sayHi-floating-input-height);border-radius:var(--sayHi-floating-btn-border-radius);transition:var(--sayHi-form-btn-transition);color:var(--sayHi-form-btn-color)} #yyy-sayHi .sayHi-bottom {text-align:center;margin-top:var(--sayHi-bottom-margin-t)} #yyy-sayHi .sayHi-bottom .bottom-text {font:var(--sayHi-bottom-font);color:var(--sayHi-bottom-color)} #yyy-sayHi .form-actions .form-btn.is-active {background-color:var(--sayHi-form-btn-bg);color:var(--sayHi-form-btn-color-active);} /* // Web Only */ @media (min-width:767.99px) { #yyy-main .main-section-project .project-link:hover {background-color:var(--project-link-bg-over);color:white} #yyy-main .section-link:hover {background-color:black;color:white} .yyy-header .header-actions-item:hover .icon-back {transform: translateX(-3px);} .yyy-footer .language-item:hover:after {height: 2px;} .story-list-container .item-link:hover + .item-thumbnail > img {transform: scale(1.07);transition: transform 3s ease-out} } .d-sm-block {display:none !important;} .d-sm-flex {display:none !important;} @media (max-width: 1279.98px) { .yyy-header { --header-height:clamp(38px,3.67vw,47px); --header-nav-padding-top:clamp(12px,1.406vw,18px); --header-nav-padding-bottom:0; --header-nav-link-font-size:clamp(13px,1.25vw,16px); --header-nav-link-gap-x:clamp(24px,2.5vw,32px); } } /* // Small devices (landscape phones, less than 768px) */ @media (max-width: 767.98px) { .d-sm-none {display:none !important} .d-sm-block {display:block !important} .d-sm-flex {display:flex !important} /* html, body * {font-size:4vw;} */ :root { --component-x:min(6.4vw,24px); --story-list-display:block; --story-list-gap-x:0; --story-list-gap-y:min(10.66vw,40px); --story-item-title-font-size:min(4.8vw,18px); --story-item-meta-margin-top:min(0.53vw,2px); --story-item-meta-font-size:min(3.73vw,14px); --story-padding-x:min(12.8vw,48px); --section-desc-font:400 min(4.26vw,16px)/1.3125 var(--font-family-base);--story-item-link-hover-color:inherit; --section-link-padding: min(2.13vw,8px) min(3.73vw,14px); --section-link-border-radius: min(10.66vw,40px); --section-link-margin-top:min(4.26vw,16px); --section-link-font-size: min(3.733vw,14px); --section-link-bg:rgba(0, 0, 0, 1); --section-link-color:#fff; } .yyy-header { --header-height:clamp(38px,3.67vw,47px); --header-nav-padding-top:clamp(12px,1.406vw,18px); --header-nav-padding-bottom:0; --header-nav-link-font-size:clamp(13px,1.25vw,16px); --header-nav-link-gap-x:24px; --header-row-padding-x:min(6.4vw,24px); --header-actions-pos-t:min(4.26vw,16px); --header-actions-back-icon-width:min(6.4vw,24px); --header-nav-link-hover-color:inherit; } .yyy-footer { --footer-padding-top:min(21.33vw,80px); --footer-padding-bottom:min(6.4vw,24px); --footer-language-font-size:min(4.26vw,16px); --footer-language-item-gap:min(10.66vw,40px); --footer-copyright-margin-top:min(10.66vw,40px); --footer-copyright-font-size:min(3.73vw,14px); --footer-copyright-margin-y:min(2.13vw,8px); } #yyy-main { --story-title-margin-b:min(6.4vw,24px); --section-content-padding-t:min(21.33vw,80px); --story-section-title-font-size:min(10.66vw,40px); --section-desc-font-size:min(4.26vw,16px); } #yyy-main .main-section-intro { --intro-height:min(149.06vw,559px); --intro-content-logo-width: min(32vw,120px); --intro-content-logo-height: min(14.4vw,65px); --intro-content-logo-margin-bottom:min(6.4vw,24px); --intro-title-font-size:min(8.53vw,32px); --intro-content-pos-b:min(10.66vw,40px); } #yyy-main .main-section-team { --team-bg-height:0; --team-content-padding-t:min(32vw,120px); } #yyy-main .main-section-team .section-bg {padding-top:85.3%} #yyy-main .main-section-team .section-bg * {position:absolute;left:0;top:0;width:100%;height:100%} #yyy-main .main-section-slogan { --slogan-font-size:min(5.866vw,22px); --slogan-line-height:1.5; --slogan-padding-y:min(14.93vw,56px); --slogan-height:auto; } #yyy-main .main-section-story {} #yyy-main .main-section-slogan .slogan-text br {display:block} #yyy-main .main-section-project { --project-height:auto; --project-width:100%; --project-body-height:min(66.66vw,250px); --project-content-padding-t:0; --project-content-pos-t:min(4.26vw,-16px); --project-content-pos-t-min:var(--project-content-pos-t); --project-content-justify-content:flex-start; --project-desc-margin-t:min(2.13vw, 8px); --project-desc-font-size:min(4vw, 15px); --project-desc-color:rgba(136, 136, 136, 1); --project-title-font-size:min(4.8vw, 18px); --project-title-line-height:1.22; --project-title-font-weight:600; --project-title-font:var(--project-title-font-weight) var(--project-title-font-size)/var(--project-title-line-height) var(--font-family-base); --project-awards-pos-t:calc(calc(var(--project-screen-height) + calc(var(--project-content-pos-t) - min(6.4vw,24px))) * -1); --project-awards-pos-b:inherit; --project-icon-width: min(17.06vw,64px); --project-icon-margin-b: min(4.26vw,16px); --project-icon-border-radius:min(3.466vw,13px); --project-screen-height:min(129.06vw,484px); --project-screen-composite-wrapper-height:auto; --project-screen-composite-border-radius: min(10.93vw,41px); --project-screen-composite-width: min(64vw,240px); --project-screen-composite-height: min(132.26vw,496px); --project-screen-contents-pos-s: min(2.66vw,10px); --project-screen-contents-pos-t: min(2.66vw,10px); --project-screen-innter-content-border-radius:min(8.26vw,31px); } #yyy-main .main-section-project .project {display:block} #yyy-main .main-section-project .project-screen {overflow:hidden;position:relative;height:var(--project-screen-height)} #yyy-main .main-section-project .project-screen-composite {justify-content:center;transform:translateY(min(17.06vw,64px));} #yyy-main .main-section-project .project-body {justify-content:center;} #yyy-main .main-section-project .project[data-project="kant"] { --kant-bg-url:url(/assets/images/main/project_kant_bg_s.png); --kant-bg-pos:left -200px center; --kant-bg-size:cover; --kant-bg-translateX:0; } #yyy-main .main-section-project .project[data-project="kant"] .project-screen-bg-content {} #yyy-main .main-section-project .project[data-project="vinyl"] { --vinyl-bg-color:rgba(243, 243, 244, 1); } #yyy-main .main-section-project .project[data-project="duologue"] { --duologue-text-color:var(--project-desc-color); --duologue-awards-color:var(--project-text-color-inverted); } #yyy-main .main-section-project .project[data-project="tmu"] { --tmu-text-color:var(--project-desc-color); } #yyy-about { --about-intro-el-height:min(128vw,480px); --about-intro-body-height:min(65.06vw,244px); --about-intro-body-padding-t:min(21.33vw,80px); --about-intro-title-font-size:min(8.53vw,32px); --about-section-padding-x:0; --about-section-image-height:min(106.66vw,400px); --about-section-body-padding-t:min(8.53vw,32px); --about-section-desc-margin-t:min(3.2vw,12px); --about-section-title-font-size:min(7.46vw,28px); --about-section-desc-font-size:min(4vw,15px); overflow-x:hidden; } #yyy-story { --story-section-padding-t:min(21.33vw,80px); --story-section-padding-b:min(10.66vw,40px); --story-section-body-padding-x:min(6.4vw,24px); --story-section-body-text-font-size:min(4.26vw,16px); --story-section-title-font-size:min(8.53vw,32px); --story-section-header-margin-b:min(17.06vw,64px); --story-list-gap-x:24px; --editor-padding-x:0px; --editor-width:100%; --editor-padding-y:clamp(28px,2.5vw,48px); } /* 231128:Add */ .story-detail-section p img {margin:var(--editor-padding-y) calc(var(--story-section-body-padding-x) * -1);width:calc(100% + calc(var(--story-section-body-padding-x) * 2));} .story-detail-section .ql-size-small {display:block;margin-top:calc(calc(var(--editor-padding-y) - 16px) * -1);margin-bottom:var(--editor-padding-y);font-size:min(3.88vw,14px);line-height:1.21;} .story-detail-section .body-meta {padding:0} #yyy-sayHi { --sayHi-body-width:100%; --sayHi-padding-t:0; --sayHi-body-bg:rgba(28, 28, 30, 1); --sayHi-color:rgba(221, 221, 221, 1); --sayHi-floating-input-bg:rgba(255, 255, 255, 0.1); --sayHi-body-padding-t:160px; --sayHi-body-padding-b:80px; --sayHi-body-padding-x:24px; --sayHi-bottom-color:rgba(115, 115, 115, .9); --sayHi-form-btn-color:rgba(255, 255, 255, .4); --sayHi-form-btn-color-active:rgba(28, 28, 30, 1); --sayHi-form-btn-bg:rgba(249, 249, 249, 1); --sayHi-floating-input-color:rgba(221, 221, 221, 1); --sayHi-floating-label-color:rgba(255, 255, 255, .4); --sayHi-floating-input-font-size:16px; --sayHi-floating-actions-margin-top:min(6.4vw,24px); } #yyy-sayHi .yyy-header { --header-actions-back-icon-url:var(--header-actions-back-icon-url-inverted); --header-mobile-nav-display:none; } .story-detail-section ~ .story-list-section {display:none} } /* // X-Small devices (portrait phones, less than 576px) */ @media (max-width: 374.98px) { #yyy-main .main-section-team .section-desc br {display:none} }