#header_ct{z-index: 10000;} /* 语言等全屏弹窗挂载在 body，须高于站顶 */ body > .popup{z-index:10050;} #ly_web_header_0001_0{top: 0;left: 0;width: 100%;z-index:10; background-color: #fff; transition: all 0.5s ease;} /* 顶部广告语 */ /*#ly_web_header_0001_0 .top_slogan{min-height: 38px; background-color: #000; gap: 0 16px;}*/ /*#ly_web_header_0001_0 .top_slogan ,*/ /*#ly_web_header_0001_0 .top_slogan .title{font-family: "Figtree"; font-size: 14px; line-height: 100%; color: #FBFBFD;}*/ /*#ly_web_header_0001_0 .top_slogan a{text-decoration: underline;}*/ #ly_web_header_0001_0 .top_slogan{min-height: 38px; background-color: #000; gap: 0 8px;} #ly_web_header_0001_0 .top_slogan , #ly_web_header_0001_0 .top_slogan .title{font-family: "Figtree"; font-size: 14px; line-height: 100%; color: #FBFBFD;} #ly_web_header_0001_0 .top_slogan a{text-decoration: underline;} #ly_web_header_0001_0 .top_slogan .countdown-grid, #ly_web_header_0001_0 .top_slogan .countdown-item{gap: 0 5px;} #ly_web_header_0001_0 .top_slogan .countdown-value{padding: 5px; border-radius: 5px; background-color: #fff; color: var(--color-text-primary); min-width: 26.5px;} /* 头部 */ #ly_web_header_0001_0{ --header-u: 1px; /* 下拉顶距 = slogan(38) + header-box(64)；无 slogan 时由 .no-top-slogan 覆盖 */ --header-drop-top: calc(102 * var(--header-u)); } @media (min-width:768px) and (max-width:1311px){ #ly_web_header_0001_0{ --header-u: calc(100vw / 1312); } } #ly_web_header_0001_0.no-top-slogan{ --header-drop-top: calc(64 * var(--header-u)); } #ly_web_header_0001_0 .header-box{ height:calc(64 * var(--header-u)); padding:0 calc(64 * var(--header-u)); max-width:calc(1720 * var(--header-u)); margin:0 auto; box-sizing:border-box; align-items:center; } #ly_web_header_0001_0 .header-left{ display:flex; align-items:center; gap:calc(64 * var(--header-u)); min-width:0; flex:0 1 auto; } #ly_web_header_0001_0 .header-right{ display:flex; align-items:center; gap:calc(32 * var(--header-u)); flex:0 0 auto; margin-left:auto; } #ly_web_header_0001_0 .logo{ flex:0 0 auto; width:calc(91 * var(--header-u)); height:auto; } #ly_web_header_0001_0 .logo img:nth-child(2){opacity: 0;} #ly_web_header_0001_0 .hnav-left, #ly_web_header_0001_0 .hnav-right{ display:flex; align-items:center; max-width:100%; } #ly_web_header_0001_0 .hnav-left .one-nav, #ly_web_header_0001_0 .hnav-right .one-nav{ height:100%; margin-right:calc(32 * var(--header-u)); flex-shrink:0; } #ly_web_header_0001_0 .hnav-left .one-nav:last-child, #ly_web_header_0001_0 .hnav-right .one-nav:last-child{ margin-right:0; } #ly_web_header_0001_0 .hnav .one-nav .nav-a{ font-family:"Figtree-Bold"; font-size:calc(16 * var(--header-u)); line-height:calc(64 * var(--header-u)); color:var(--color-text-primary); white-space:nowrap; transition:color .2s; } #ly_web_header_0001_0 .hnav .one-nav:hover .nav-a, #ly_web_header_0001_0 .hnav .one-nav.cur .nav-a{ color:var(--color-primary); } #ly_web_header_0001_0 .hright-tools{ display:flex; align-items:center; gap:calc(32 * var(--header-u)); flex-shrink:0; } #ly_web_header_0001_0 .hright-tools-icons{ display:flex; align-items:center; gap:calc(6 * var(--header-u)); flex-shrink:0; } #ly_web_header_0001_0 .hright-tool{ width:calc(24 * var(--header-u)); height:calc(24 * var(--header-u)); padding:0; border:0; background:none; flex-shrink:0; } #ly_web_header_0001_0 .hright-tool .svg{ width:100%; height:100%; fill:#1a1a1a; } #ly_web_header_0001_0 .hright-tool.lang .svg path{ fill:inherit; } #ly_web_header_0001_0 .hright-tool.chat .svg path{ fill:inherit; } #ly_web_header_0001_0 .hright-divider{ width:calc(1 * var(--header-u)); height:calc(16 * var(--header-u)); background:#d9d9d9; flex-shrink:0; transition:background-color .2s; } #ly_web_header_0001_0 .hright-store{ display:inline-flex; align-items:center; gap:calc(8 * var(--header-u)); height:calc(36 * var(--header-u)); padding:0 calc(20 * var(--header-u)); border-radius:calc(999 * var(--header-u)); background:var(--color-primary); color:#fff; text-decoration:none; font-family:"Figtree-SemiBold"; font-size:calc(14 * var(--header-u)); line-height:1; white-space:nowrap; transition:opacity .2s; } #ly_web_header_0001_0 .hright-store:hover{opacity:.9;} #ly_web_header_0001_0 .hright-store--text{gap:0;} #ly_web_header_0001_0 .hright-store__icon{ width:calc(18 * var(--header-u)); height:calc(18 * var(--header-u)); filter:brightness(0) invert(1); } #ly_web_header_0001_0 .hnav .two-nav{height: 0; overflow: hidden; top: 100%; left: 0; z-index:3; background-color: rgba(255, 255, 255, .95); backdrop-filter: blur(48px)} #ly_web_header_0001_0 .hnav .two-nav .hnavbg{height: auto;} /* 产品下拉 */ #ly_web_header_0001_0 .hnav .pro-nav{width:100%; top:var(--header-drop-top);} #ly_web_header_0001_0 .hnav .pro-nav .box{width: 100%; padding: 64px 10.9375%;} #ly_web_header_0001_0 .hnav .pro-nav .box>div{margin-top: 32px; } #ly_web_header_0001_0 .hnav .pro-nav .box div:first-child{margin-top: 0; } #ly_web_header_0001_0 .hnav .pro-nav .box .tnav-a{font-family: "Figtree-Medium"; font-size: 20px; line-height: 100%; color: var(--color-text-secondary);} #ly_web_header_0001_0 .hnav .pro-nav .box .tnav-a:hover{text-decoration: underline; color: var(--color-text-primary);} /* 其他下拉 */ #ly_web_header_0001_0 .hnav .other-nav {min-width: 127px; left: 50%; transform: translateX(-50%);} #ly_web_header_0001_0 .hnav .other-nav .box{padding: 16px;} #ly_web_header_0001_0 .hnav .other-nav .box .tnav-a{font-family: "Figtree-SemiBold"; font-size: 16px; line-height: 40px; text-align: center; white-space: nowrap;} /* iGarden Mega 下拉 */ #ly_web_header_0001_0 .hnav .mega-nav{ --pc-u: 1px; --mobile-u: 1px; width:100%; top:var(--header-drop-top); left:0; background-color:#f7f7f7; } @media (min-width:768px) and (max-width:1311px){ #ly_web_header_0001_0 .hnav .mega-nav{ --pc-u: calc(100vw / 1312); } } @media (max-width:767px){ #ly_web_header_0001_0 .hnav .mega-nav{ --mobile-u: 1px; } } #ly_web_header_0001_0 .hnav .mega-inner{ margin:0 auto; width:100%; max-width:calc(1750 * var(--pc-u)); padding:calc(32 * var(--pc-u)) calc(64 * var(--pc-u)); box-sizing:border-box; } #ly_web_header_0001_0 .hnav .mega-card{ display:flex; flex-direction:column; flex:1; min-width:0; text-decoration:none; color:inherit; background:#fff; border-radius:calc(4 * var(--pc-u)); overflow:hidden; transition:box-shadow .3s, transform .3s; } #ly_web_header_0001_0 .hnav .mega-nav--igarden_cards{ --mega-cards-gap: calc(16 * var(--pc-u)); --mega-cards-col-max: calc(360 * var(--pc-u)); --mega-cards-img-max: calc(170 * var(--pc-u)); --mega-cards-more-w: calc(140 * var(--pc-u)); } #ly_web_header_0001_0 .hnav .mega-nav--igarden_cards .mega-inner{ container-type:inline-size; container-name:mega-cards-inner; } #ly_web_header_0001_0 .hnav .mega-nav--igarden_cards .mega-cards__grid{ display:flex; flex-wrap:wrap; gap:var(--mega-cards-gap); align-items:stretch; justify-content:flex-start; } #ly_web_header_0001_0 .hnav .mega-nav--igarden_cards .mega-cards__grid .mega-card{ /* 始终按「4 卡 + View More」占位算宽，有无按钮尺寸一致 */ flex:0 0 calc((100% - var(--mega-cards-more-w) - 4 * var(--mega-cards-gap)) / 4); width:calc((100% - var(--mega-cards-more-w) - 4 * var(--mega-cards-gap)) / 4); max-width:var(--mega-cards-col-max); min-width:0; height:auto; aspect-ratio:360 / 246; } #ly_web_header_0001_0 .hnav .mega-nav--igarden_cards .mega-cards__view-more, #ly_web_header_0001_0 .hnav .mega-nav--igarden_cards_side .mega-cards__view-more{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(16 * var(--pc-u)); box-sizing:border-box; text-decoration:none; color:#1a1a1a; border-radius:calc(4 * var(--pc-u)); transition:background-color .2s, color .2s; align-self:stretch; } #ly_web_header_0001_0 .hnav .mega-nav--igarden_cards .mega-cards__view-more{ flex:0 0 var(--mega-cards-more-w); width:var(--mega-cards-more-w); } #ly_web_header_0001_0 .hnav .mega-nav--igarden_cards_side .mega-cards__view-more{ flex:0 0 var(--mega-cards-side-more-w); width:var(--mega-cards-side-more-w); } #ly_web_header_0001_0 .hnav .mega-cards__view-more-icon{ display:flex; align-items:center; justify-content:center; width:calc(40 * var(--pc-u)); height:calc(40 * var(--pc-u)); border:calc(1.5 * var(--pc-u)) solid currentColor; border-radius:50%; box-sizing:border-box; } #ly_web_header_0001_0 .hnav .mega-cards__view-more-icon::after{ content:''; display:block; width:calc(8 * var(--pc-u)); height:calc(8 * var(--pc-u)); border-top:calc(1.5 * var(--pc-u)) solid currentColor; border-right:calc(1.5 * var(--pc-u)) solid currentColor; transform:rotate(45deg); margin-left:calc(-2 * var(--pc-u)); } #ly_web_header_0001_0 .hnav .mega-cards__view-more-text{ font-family:"Figtree-Medium"; font-size:calc(16 * var(--pc-u)); line-height:1.3; text-align:center; } #ly_web_header_0001_0 .hnav .mega-nav--igarden_cards .mega-card__visual{ flex:1 1 0; min-height:0; padding:calc(16 * var(--pc-u)) calc(16 * var(--pc-u)) 0; } #ly_web_header_0001_0 .hnav .mega-nav--igarden_cards .mega-card__visual img{ width:min(var(--mega-cards-img-max), calc(100% * 200 / 360)); aspect-ratio:1; height:auto; max-width:100%; max-height:none; object-fit:contain; } #ly_web_header_0001_0 .hnav .mega-nav--igarden_cards .mega-card__body{ flex:0 0 auto; padding:calc(12 * var(--pc-u)) calc(16 * var(--pc-u)) calc(16 * var(--pc-u)); } #ly_web_header_0001_0 .hnav .mega-card:hover{ box-shadow:0 calc(8 * var(--pc-u)) calc(24 * var(--pc-u)) rgba(0,0,0,.08); } #ly_web_header_0001_0 .hnav .mega-card__visual{ display:flex; align-items:center; justify-content:center; min-height:calc(200 * var(--pc-u)); padding:calc(24 * var(--pc-u)) calc(16 * var(--pc-u)); /* background:#f0f0f0; */ box-sizing:border-box; } #ly_web_header_0001_0 .hnav .mega-card__visual img{ display:block; max-width:100%; max-height:calc(160 * var(--pc-u)); width:auto; height:auto; object-fit:contain; } #ly_web_header_0001_0 .hnav .mega-card__body{ padding:calc(20 * var(--pc-u)) calc(16 * var(--pc-u)) calc(24 * var(--pc-u)); text-align:center; } #ly_web_header_0001_0 .hnav .mega-card__title{ display:flex; flex-direction:column; gap:calc(4 * var(--pc-u)); margin-bottom:calc(12 * var(--pc-u)); } #ly_web_header_0001_0 .hnav .mega-card__line1, #ly_web_header_0001_0 .hnav .mega-card__line2{ display:block; font-family:"Figtree-Medium"; font-size:calc(16 * var(--pc-u)); line-height:calc(22 * var(--pc-u)); color:#1a1a1a; } #ly_web_header_0001_0 .hnav .mega-card__line2{ font-family:"Figtree"; color:#333; } #ly_web_header_0001_0 .hnav .mega-card__more{ display:inline-flex; align-items:center; justify-content:center; gap:calc(4 * var(--pc-u)); font-family:"Figtree"; font-size:calc(14 * var(--pc-u)); line-height:1; color:#999; } #ly_web_header_0001_0 .hnav .mega-card__chevron{ display:inline-block; width:calc(6 * var(--pc-u)); height:calc(6 * var(--pc-u)); border-top:calc(1.5 * var(--pc-u)) solid #999; border-right:calc(1.5 * var(--pc-u)) solid #999; transform:rotate(45deg) translateY(calc(-1 * var(--pc-u))); } #ly_web_header_0001_0 .hnav .mega-featured{ position:relative; display:block; width:100%; height:100%; min-height:calc(220 * var(--pc-u)); border-radius:calc(4 * var(--pc-u)); overflow:hidden; text-decoration:none; color:inherit; } #ly_web_header_0001_0 .hnav .mega-featured__img{ display:block; width:100%; height:100%; min-height:calc(220 * var(--pc-u)); object-fit:cover; } #ly_web_header_0001_0 .hnav .mega-featured__label{ position:absolute; left:calc(24 * var(--pc-u)); bottom:calc(24 * var(--pc-u)); font-family:"Figtree-Medium"; font-size:calc(18 * var(--pc-u)); line-height:1.3; z-index:2; } #ly_web_header_0001_0 .hnav .mega-featured--triple .mega-featured__label{ color:#fff; text-shadow:0 calc(2 * var(--pc-u)) calc(8 * var(--pc-u)) rgba(0,0,0,.35); } #ly_web_header_0001_0 .hnav .mega-featured--triple::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:40%; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 100%); pointer-events:none; } #ly_web_header_0001_0 .hnav .mega-featured--quad .mega-featured__label{ display:inline-flex; align-items:center; gap:calc(6 * var(--pc-u)); color:#1a1a1a; } #ly_web_header_0001_0 .hnav .mega-featured__chevron{ display:inline-block; width:calc(6 * var(--pc-u)); height:calc(6 * var(--pc-u)); border-top:calc(1.5 * var(--pc-u)) solid #1a1a1a; border-right:calc(1.5 * var(--pc-u)) solid #1a1a1a; transform:rotate(45deg) translateY(calc(-1 * var(--pc-u))); } #ly_web_header_0001_0 .hnav .mega-cards-side{ display:flex; align-items:stretch; gap:0; min-height:calc(240 * var(--pc-u)); } #ly_web_header_0001_0 .hnav .mega-cards-side__aside{ flex:0 0 calc(220 * var(--pc-u)); padding-right:calc(32 * var(--pc-u)); border-right:calc(1 * var(--pc-u)) solid #e0e0e0; display:flex; flex-direction:column; gap:calc(36 * var(--pc-u)); padding-top:calc(8 * var(--pc-u)); } #ly_web_header_0001_0 .hnav .mega-side-tab{ display:block; width:100%; padding:0; border:0; background:none; text-align:left; cursor:pointer; font-family:"Figtree"; font-size:calc(16 * var(--pc-u)); line-height:calc(24 * var(--pc-u)); color:#999; transition:color .2s; } #ly_web_header_0001_0 .hnav .mega-side-tab.is-active, #ly_web_header_0001_0 .hnav .mega-side-tab:hover{ font-family:"Figtree-Bold"; color:#1a1a1a; } #ly_web_header_0001_0 .hnav .mega-cards-side__main{ flex:1; min-width:0; padding-left:calc(40 * var(--pc-u)); position:relative; container-type:inline-size; container-name:mega-cards-side-main; } #ly_web_header_0001_0 .hnav .mega-cards-side__panel{ display:none; width:100%; } #ly_web_header_0001_0 .hnav .mega-cards-side__panel.is-active{ display:block; } #ly_web_header_0001_0 .hnav .mega-cards-side__cards{ display:flex; gap:calc(16 * var(--pc-u)); align-items:stretch; } #ly_web_header_0001_0 .hnav .mega-nav--igarden_cards_side{ --mega-cards-side-gap: calc(16 * var(--pc-u)); --mega-cards-side-col-max: calc(360 * var(--pc-u)); --mega-cards-side-img-max: calc(200 * var(--pc-u)); --mega-cards-side-more-w: calc(120 * var(--pc-u)); } #ly_web_header_0001_0 .hnav .mega-nav--igarden_cards_side .mega-cards-side__cards{ flex-wrap:wrap; gap:var(--mega-cards-side-gap); justify-content:flex-start; } /* 始终按「3 卡 + View More」占位算宽，有无按钮尺寸一致 */ #ly_web_header_0001_0 .hnav .mega-nav--igarden_cards_side .mega-cards-side__cards .mega-card{ flex:0 0 calc((100% - var(--mega-cards-side-more-w) - 3 * var(--mega-cards-side-gap)) / 3); width:calc((100% - var(--mega-cards-side-more-w) - 3 * var(--mega-cards-side-gap)) / 3); max-width:var(--mega-cards-side-col-max); min-width:0; height:auto; aspect-ratio:360 / 220; } #ly_web_header_0001_0 .hnav .mega-nav--igarden_cards_side .mega-card__visual{ flex:1 1 0; min-height:0; padding:calc(12 * var(--pc-u)) calc(16 * var(--pc-u)) 0; } #ly_web_header_0001_0 .hnav .mega-nav--igarden_cards_side .mega-card__visual img{ width:min(var(--mega-cards-side-img-max), calc(100% * 200 / 360)); aspect-ratio:1; height:auto; max-width:100%; max-height:none; object-fit:contain; } #ly_web_header_0001_0 .hnav .mega-nav--igarden_cards_side .mega-card__body{ flex:0 0 auto; padding:calc(10 * var(--pc-u)) calc(16 * var(--pc-u)) calc(12 * var(--pc-u)); } #ly_web_header_0001_0 .hnav .mega-triple{ display:flex; align-items:flex-start; gap:calc(128 * var(--pc-u)); } #ly_web_header_0001_0 .hnav .mega-triple__featured{ flex:0 0 calc(400 * var(--pc-u)); max-width:calc(400 * var(--pc-u)); } #ly_web_header_0001_0 .hnav .mega-triple__cols{ flex:1; display:flex; gap:calc(12 * var(--pc-u)); min-width:0; } #ly_web_header_0001_0 .hnav .mega-col{ min-width:0; } #ly_web_header_0001_0 .hnav .mega-triple__cols .mega-col{ flex:1 1 0; } #ly_web_header_0001_0 .hnav .mega-triple__cols .mega-col:first-child{ flex:0 1 calc(180 * var(--pc-u)); max-width:calc(200 * var(--pc-u)); } #ly_web_header_0001_0 .hnav .mega-col__head{ font-family:"Figtree-Bold"; font-size:calc(18 * var(--pc-u)); line-height:calc(24 * var(--pc-u)); color:#1a1a1a; margin-bottom:calc(24 * var(--pc-u)); } #ly_web_header_0001_0 .hnav .mega-col__links{ display:flex; flex-direction:column; gap:calc(20 * var(--pc-u)); } #ly_web_header_0001_0 .hnav .mega-col__link{ display:block; font-family:"Figtree"; font-size:calc(16 * var(--pc-u)); line-height:calc(22 * var(--pc-u)); color:#333; text-decoration:none; transition:color .2s; font-weight: 600; } #ly_web_header_0001_0 .hnav .mega-col__link:hover{ color:#1a1a1a; text-decoration:underline; } #ly_web_header_0001_0 .hnav .mega-quad{ display:flex; align-items:stretch; gap:calc(128 * var(--pc-u)); } #ly_web_header_0001_0 .hnav .mega-quad__featured{ flex:0 0 calc(400 * var(--pc-u)); max-width:calc(400 * var(--pc-u)); } #ly_web_header_0001_0 .hnav .mega-quad__grid{ flex:1; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:calc(48 * var(--pc-u)); row-gap:calc(32 * var(--pc-u)); align-content:center; min-width:0; } #ly_web_header_0001_0 .hnav .mega-quad-link{ display:flex; align-items:center; gap:calc(12 * var(--pc-u)); text-decoration:none; color:#1a1a1a; transition:opacity .2s; } #ly_web_header_0001_0 .hnav .mega-quad-link:hover{ opacity:.75; } #ly_web_header_0001_0 .hnav .mega-quad-link__icon{ flex:0 0 calc(24 * var(--pc-u)); width:calc(24 * var(--pc-u)); height:calc(24 * var(--pc-u)); display:flex; align-items:center; justify-content:center; } #ly_web_header_0001_0 .hnav .mega-quad-link__icon img{ display:block; max-width:100%; max-height:100%; object-fit:contain; } #ly_web_header_0001_0 .hnav .mega-quad-link__text{ flex:1; font-family:"Figtree-Bold"; font-size:calc(16 * var(--pc-u)); line-height:calc(24 * var(--pc-u)); } #ly_web_header_0001_0 .hnav .mega-quad-link__chevron{ flex:0 0 calc(8 * var(--pc-u)); width:calc(6 * var(--pc-u)); height:calc(6 * var(--pc-u)); border-top:calc(1.5 * var(--pc-u)) solid #1a1a1a; border-right:calc(1.5 * var(--pc-u)) solid #1a1a1a; transform:rotate(45deg); } @media screen and (max-width:1024px){ #ly_web_header_0001_0 .hnav .mega-cards-side__cards{ flex-wrap:wrap; } #ly_web_header_0001_0 .hnav .mega-nav--igarden_cards_side .mega-cards-side__cards .mega-card{ flex:1 1 calc(50% - 8 * var(--pc-u)); width:auto; max-width:none; } #ly_web_header_0001_0 .hnav .mega-triple, #ly_web_header_0001_0 .hnav .mega-quad, #ly_web_header_0001_0 .hnav .mega-cards-side{ flex-wrap:wrap; } #ly_web_header_0001_0 .hnav .mega-triple__featured, #ly_web_header_0001_0 .hnav .mega-quad__featured{ flex:1 1 100%; max-width:100%; } #ly_web_header_0001_0 .hnav .mega-cards-side__aside{ flex:1 1 100%; border-right:0; border-bottom:calc(1 * var(--pc-u)) solid #e0e0e0; padding-bottom:calc(16 * var(--pc-u)); flex-direction:row; flex-wrap:wrap; gap:calc(16 * var(--pc-u)); } #ly_web_header_0001_0 .hnav .mega-cards-side__main{ flex:1 1 100%; padding-left:0; padding-top:calc(16 * var(--pc-u)); } } /* 右侧 */ #ly_web_header_0001_0 .hright-tools-mobile{ display:none; align-items:center; flex-shrink:0; } #ly_web_header_0001_0 .hright-tool-mobile{ display:block; width:calc(24 * var(--header-u)); height:calc(24 * var(--header-u)); padding:0; border:0; background:none; flex-shrink:0; line-height:0; } #ly_web_header_0001_0 .hright-tool-mobile .svg{ width:100%; height:100%; display:block; } #ly_web_header_0001_0 .hright-tool-mobile.lang .svg{fill:#1a1a1a;} #ly_web_header_0001_0 .hright-tool-mobile.lang .svg path{fill:inherit;} #ly_web_header_0001_0 .header-right .menu{display:none;width: calc(24 * var(--header-u));height: calc(24 * var(--header-u));} /* 头部滚动时样式和鼠标移入时样式 */ @media screen and (min-width:751px) { /* #ly_web_header_0001_0.none{transform: translate3d(0px,-100%,0);} */ /* #ly_web_header_0001_0.none{transform: translate3d(0px,-124px,0);} */ header.pro_none {transform: translate3d(0px,-86px,0);} #ly_web_header_0001_0.cur .header-right .menu, #ly_web_header_0001_0:hover .header-right .menu{background-image:url(/module/ly-web/header/0001/images/menu-icon.png);} #ly_web_header_0001_0.cur .header-right .menu.cur, #ly_web_header_0001_0:hover .header-right .menu.cur{background-image:url(/module/ly-web/header/0001/images/m_close.png);} #ly_web_header_0001_0 .header-right .menu.cur{background-image:url(/module/ly-web/header/0001/images/m_close2.png);} /* 透明底 样式 */ #ly_web_header_0001_0.white{background: transparent;} #ly_web_header_0001_0.white .hnav .one-nav .nav-a{color: #fff;} #ly_web_header_0001_0.white .hright-tool .svg{fill: #fff;} #ly_web_header_0001_0.white .hright-divider{background:rgba(255,255,255,.35);} #ly_web_header_0001_0.white .logo img:nth-child(1){opacity: 0;} #ly_web_header_0001_0.white .logo img:nth-child(2){opacity: 1;} #ly_web_header_0001_0.cur, #ly_web_header_0001_0:hover{background:#fff;} #ly_web_header_0001_0.white.cur .logo img:nth-child(1), #ly_web_header_0001_0.white:hover .logo img:nth-child(1){opacity: 1;} #ly_web_header_0001_0.white.cur .logo img:nth-child(2), #ly_web_header_0001_0.white:hover .logo img:nth-child(2){opacity: 0;} #ly_web_header_0001_0.white.cur .hnav .one-nav .nav-a, #ly_web_header_0001_0.white:hover .hnav .one-nav .nav-a{color: #000;} #ly_web_header_0001_0.white.cur .hnav .one-nav:hover .nav-a, #ly_web_header_0001_0.white:hover .hnav .one-nav:hover .nav-a, #ly_web_header_0001_0.white.cur .hnav .one-nav.cur .nav-a, #ly_web_header_0001_0.white:hover .hnav .one-nav.cur .nav-a{color: var(--color-primary);} #ly_web_header_0001_0.white.cur .hright-tool .svg, #ly_web_header_0001_0.white:hover .hright-tool .svg{fill: #000;} #ly_web_header_0001_0.white.cur .hright-divider, #ly_web_header_0001_0.white:hover .hright-divider{background:#000000;} } @media screen and (max-width: 1440px) { #ly_web_header_0001_0 .top_slogan{font-size: 12px;} #ly_web_header_0001_0 .logo{width: calc(73 * var(--header-u));} #ly_web_header_0001_0 .hnav .one-nav .nav-a{font-size: calc(14 * var(--header-u));} } @media (max-width: 1034px) { #ly_web_header_0001_0 .header-box{padding: 0 calc(40 * var(--header-u)); } } /* 头部移动端 */ #ly_web_header_0001_0_m-nav,#ly_web_header_0001_0_m-header-blank{display: none;} @media screen and (max-width: 1024px) { #ly_web_header_0001_0{background:#fff !important;} #ly_web_header_0001_0 .header-left .hnav-left, #ly_web_header_0001_0 .header-right .hnav-right, #ly_web_header_0001_0 .hright-tools{display:none;} #ly_web_header_0001_0 .hright-tools-mobile{ display:flex; gap:16px; } #ly_web_header_0001_0 .hright-tool-mobile, #ly_web_header_0001_0 .header-right .menu{ width:24px; height:24px; margin-left:0; } #ly_web_header_0001_0 .header-box{padding: 0 2.25%; height: 56px;} #ly_web_header_0001_0 .header-right{height: 56px;} #ly_web_header_0001_0 .logo img:nth-child(1){opacity: 1 !important;} #ly_web_header_0001_0 .logo img:nth-child(2){opacity: 0 !important;} #ly_web_header_0001_0 .hright-tool-mobile.lang .svg{fill: #000 !important;} #ly_web_header_0001_0 .hright-tools-mobile .menu{display:block;} #ly_web_header_0001_0_m-nav{display: block;width: 36.62%;height: 0;z-index:50;right: 0;right: 0;top: 94px; background: #fff;overflow-y: auto;} #ly_web_header_0001_0_m-nav.cur{height: calc(100vh - 94px);} #ly_web_header_0001_0.no-top-slogan ~ #ly_web_header_0001_0_m-nav{top: 56px;} #ly_web_header_0001_0.no-top-slogan ~ #ly_web_header_0001_0_m-nav.cur{height: calc(100vh - 56px);} #ly_web_header_0001_0_m-nav .top{margin-bottom: 8px; width: 100%; height: max-content; } #ly_web_header_0001_0_m-nav .top .icon{width: 50px; height: 50px;} #ly_web_header_0001_0_m-nav .nav .one-nav{line-height: 54px; margin: 0 15px;border-bottom: 1px solid rgba(0,0,0,0.2);} #ly_web_header_0001_0_m-nav .nav .one-nav .one{cursor:pointer; background: url(/module/ly-web/header/0001/images/head-jt.svg) no-repeat right;} #ly_web_header_0001_0_m-nav .nav .one-nav.nobg .one{background: none;} #ly_web_header_0001_0_m-nav .nav .one-nav.cur .one{background-image:url(/module/ly-web/header/0001/images/head-jt2.svg);} #ly_web_header_0001_0_m-nav .nav .one-nav.cur.nobg .one{background: none;} #ly_web_header_0001_0_m-nav .nav .one-nav .one-a{font-family: "Figtree-Bold"; font-size: 14px; text-transform: capitalize; color:#333;} #ly_web_header_0001_0_m-nav .nav .one-nav.cur .one, #ly_web_header_0001_0_m-nav .nav .one-nav.cur .one-a{color:#0071E3;} #ly_web_header_0001_0_m-nav .nav .one-nav .two-nav{width: 100%; padding: 0 5px; box-sizing: border-box;} #ly_web_header_0001_0_m-nav .nav .mnav-featured{ margin:0 0 12px; padding:0; } #ly_web_header_0001_0_m-nav .nav .mnav-featured .mega-featured{ position:relative; display:block; width:100%; min-height:200px; border-radius:4px; overflow:hidden; text-decoration:none; color:inherit; } #ly_web_header_0001_0_m-nav .nav .mnav-featured .mega-featured__img{ display:block; width:100%; min-height:200px; object-fit:cover; } #ly_web_header_0001_0_m-nav .nav .mnav-featured .mega-featured__label{ position:absolute; left:16px; bottom:16px; font-family:"Figtree-Medium"; font-size:16px; line-height:1.3; z-index:2; } #ly_web_header_0001_0_m-nav .nav .mnav-featured .mega-featured--triple .mega-featured__label{ color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.35); } #ly_web_header_0001_0_m-nav .nav .mnav-featured .mega-featured--triple::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:40%; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 100%); pointer-events:none; } #ly_web_header_0001_0_m-nav .nav .mnav-featured .mega-featured--quad .mega-featured__label{ display:inline-flex; align-items:center; gap:6px; color:#1a1a1a; } #ly_web_header_0001_0_m-nav .nav .mnav-featured .mega-featured__chevron{ display:inline-block; width:6px; height:6px; border-top:1.5px solid #1a1a1a; border-right:1.5px solid #1a1a1a; transform:rotate(45deg) translateY(-1px); } #ly_web_header_0001_0_m-nav .nav .mnav-quad-links{ display:flex; flex-direction:column; gap:0; padding:0 0 8px; } #ly_web_header_0001_0_m-nav .nav .mnav-quad-links .mega-quad-link{ display:flex; align-items:center; gap:8px; padding:10px 0; text-decoration:none; color:#333; } #ly_web_header_0001_0_m-nav .nav .mnav-quad-links .mega-quad-link__icon{ flex:0 0 24px; width:24px; height:24px; display:flex; align-items:center; justify-content:center; } #ly_web_header_0001_0_m-nav .nav .mnav-quad-links .mega-quad-link__icon img{ display:block; width:24px; height:24px; max-width:100%; max-height:100%; object-fit:contain; } #ly_web_header_0001_0_m-nav .nav .mnav-quad-links .mega-quad-link__text{ flex:1; font-family:"Figtree-SemiBold"; font-size:14px; line-height:1.3; color:#333; } #ly_web_header_0001_0_m-nav .nav .mnav-quad-links .mega-quad-link__chevron{ flex:0 0 6px; width:6px; height:6px; border-top:1.5px solid #1a1a1a; border-right:1.5px solid #1a1a1a; transform:rotate(45deg); } #ly_web_header_0001_0_m-nav .nav .mnav-view-more{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 0; text-decoration:none; color:#0071E3; font-family:"Figtree-SemiBold"; font-size:14px; line-height:40px; } #ly_web_header_0001_0_m-nav .nav .three-nav .mnav-view-more{ padding:6px 0; line-height:36px; font-size:14px; } #ly_web_header_0001_0_m-nav .nav .mnav-view-more__text{ flex:1; } #ly_web_header_0001_0_m-nav .nav .mnav-view-more__chevron{ flex:0 0 6px; width:6px; height:6px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:rotate(45deg); } #ly_web_header_0001_0_m-nav .nav .one-nav .two-nav .two-a{font-family: "Figtree-Bold"; font-size: 14px; line-height: 40px; vertical-align: middle; } #ly_web_header_0001_0_m-nav .nav .mnav-l2-group .three-nav{padding: 0 0 8px 10px;} #ly_web_header_0001_0_m-nav .nav .three-a{font-family: "Figtree-semiBold"; font-size: 14px; line-height: 36px; color: #333;} } /* @media screen and (max-width: 992px) { #ly_web_header_0001_0 .hright .btn, #ly_web_header_0001_0 .hright .menu{margin-left: .1818rem; width: .1818rem; height: .1818rem; } #ly_web_header_0001_0 .top_slogan .title, #ly_web_header_0001_0_m-nav .nav .one-nav .one-a{font-size: .1061rem;} #ly_web_header_0001_0_m-nav .nav .one-nav{line-height: .4091rem;} #ly_web_header_0001_0_m-nav .nav .one-nav .two-nav .two-a{font-size: .0909rem; line-height: .303rem;} #ly_web_header_0001_0_m-nav .top .icon{width: .3788rem; height: .3788rem;} } */ @media screen and (max-width: 768px) { header.pro_none {transform: translate3d(0px,-72px,0);} /*#ly_web_header_0001_0 .top_slogan{min-height: 24px; font-size: 12px; gap: 0 16px;}*/ /*#ly_web_header_0001_0 .top_slogan .title{font-size: 12px;}*/ #ly_web_header_0001_0 .top_slogan{min-height: 24px; font-size: 12px; gap: 0 4px;} #ly_web_header_0001_0 .top_slogan .title{font-size: 12px;} #ly_web_header_0001_0 .top_slogan .countdown-value{padding: 3px; min-width: max-content;} #ly_web_header_0001_0 .top_slogan .countdown-grid, #ly_web_header_0001_0 .top_slogan .countdown-item{gap: 0 3px;} #ly_web_header_0001_0 .header-box, #ly_web_header_0001_0 .header-right{height: 48px;} #ly_web_header_0001_0 .header-box{padding: 0 16px; box-shadow: 0px 2px 4px 0px #0000001A;} #ly_web_header_0001_0 .hright-tools-mobile{gap:12px;} #ly_web_header_0001_0 .hright-tool-mobile, #ly_web_header_0001_0 .header-right .menu{width:24px;height:24px;} #ly_web_header_0001_0_m-nav{top: calc(24px + 48px); width: 100%;} #ly_web_header_0001_0_m-nav.cur{height: calc(100vh - 72px);} #ly_web_header_0001_0.no-top-slogan ~ #ly_web_header_0001_0_m-nav{top: 48px;} #ly_web_header_0001_0.no-top-slogan ~ #ly_web_header_0001_0_m-nav.cur{height: calc(100vh - 48px);} #ly_web_header_0001_0_m-nav .top{padding: 16px 4.5% 0; margin-top: 0;} #ly_web_header_0001_0_m-nav .top .icon{width: 40px; height: 40px;} #ly_web_header_0001_0_m-nav .nav .one-nav{line-height: 54px; margin: 0 4.5%;} #ly_web_header_0001_0_m-nav .nav .one-nav .one{} #ly_web_header_0001_0_m-nav .nav .one-nav .one-a{font-size: 16px;} #ly_web_header_0001_0_m-nav .nav .mnav-featured .mega-featured, #ly_web_header_0001_0_m-nav .nav .mnav-featured .mega-featured__img{ min-height:180px; border-radius: 8px; } #ly_web_header_0001_0_m-nav .nav .one-nav .two-nav .two-a{font-size: 14px; line-height: 40px;} } .ly_web_footer_0001_0Wrap { --pc-u: min(1px, calc((100vw - 80px) / 980)); background: #272727; color: var(--color-text-white); } .ly_web_footer_0001_0Wrap, .ly_web_footer_0001_0Wrap * { box-sizing: border-box; } .ly_web_footer_0001_0Wrap .cw980 { width: calc(980 * var(--pc-u)); } .ly_web_footer_0001_0Wrap .ly_web_footer_0001_0Inner { position: relative; height: calc(542 * var(--pc-u)); min-height: calc(542 * var(--pc-u)); } .ly_web_footer_0001_0Wrap .ly_web_footer_0001_0Main { display: grid; grid-template-columns: calc(243 * var(--pc-u)) minmax(0, 1fr); column-gap: calc(108 * var(--pc-u)); padding-top: calc(82 * var(--pc-u)); } #ly_web_footer_0001_0FooterIntro .logo { width: calc(160 * var(--pc-u)); height: calc(48 * var(--pc-u)); transform: translate(calc(-12 * var(--pc-u)), calc(-8 * var(--pc-u))); } #ly_web_footer_0001_0Newsletter { margin-top: calc(30 * var(--pc-u)); } #ly_web_footer_0001_0Newsletter .text { font-family: "Figtree-Medium", Figtree, sans-serif; font-size: calc(16 * var(--pc-u)); line-height: 100%; color: var(--color-text-white); white-space: nowrap; transform: translateY(calc(1 * var(--pc-u))); } #ly_web_footer_0001_0Newsletter .formBox { width: calc(234 * var(--pc-u)); margin-top: calc(13 * var(--pc-u)); } #ly_web_footer_0001_0Newsletter .form { display: flex; align-items: center; width: 100%; height: calc(28 * var(--pc-u)); padding: calc(2 * var(--pc-u)) calc(2 * var(--pc-u)) calc(2 * var(--pc-u)) calc(8 * var(--pc-u)); gap: calc(8 * var(--pc-u)); border: calc(1 * var(--pc-u)) solid #d9d9d9; border-radius: calc(100 * var(--pc-u)); background: transparent; } #ly_web_footer_0001_0Newsletter .form label { flex: 1 1 auto; width: auto; min-width: 0; height: 100%; } #ly_web_footer_0001_0Newsletter .input { width: 100%; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; font-family: "Figtree-Medium", Figtree, sans-serif; font-size: calc(12 * var(--pc-u)); line-height: 100%; color: #fff; } #ly_web_footer_0001_0Newsletter .input::placeholder { color: #999; opacity: 1; } #ly_web_footer_0001_0Newsletter .button { flex: 0 0 auto; width: calc(64 * var(--pc-u)); margin-left: auto; height: calc(22 * var(--pc-u)); padding: 0; border: 0; border-radius: calc(100 * var(--pc-u)); background: #0071e3; font-family: "Figtree-Medium", Figtree, sans-serif; font-size: calc(8 * var(--pc-u)); line-height: 100%; color: var(--color-text-white); white-space: nowrap; cursor: pointer; } #ly_web_footer_0001_0Newsletter .form-tip { top: calc(100% + 8 * var(--pc-u)); left: calc(8 * var(--pc-u)); z-index: 2; width: calc(280 * var(--pc-u)); font-family: Poppins, sans-serif; font-size: calc(12 * var(--pc-u)); line-height: 130%; } #ly_web_footer_0001_0Newsletter .form-error { color: #f94073; } #ly_web_footer_0001_0Newsletter .form-success { color: #20b759; } #ly_web_footer_0001_0Contact { gap: calc(23.714 * var(--pc-u)) 0; margin-top: calc(48 * var(--pc-u)); } #ly_web_footer_0001_0Contact .li { min-height: calc(23.714 * var(--pc-u)); gap: 0 calc(5.929 * var(--pc-u)); } #ly_web_footer_0001_0Contact .icon { flex: 0 0 calc(23.714 * var(--pc-u)); width: calc(23.714 * var(--pc-u)); height: calc(23.714 * var(--pc-u)); } #ly_web_footer_0001_0Contact .icon img { width: 100%; height: 100%; object-fit: contain; } #ly_web_footer_0001_0Contact .text { position: relative; top: calc(-0.893 * var(--pc-u)); width: calc(100% - 29.643 * var(--pc-u)); font-family: "Figtree-Medium", Figtree, sans-serif; font-size: calc(16 * var(--pc-u)); line-height: 100%; letter-spacing: calc(-0.32 * var(--pc-u)); color: #c1c1c1; white-space: nowrap; } #ly_web_footer_0001_0Contact .text .dot { display: none; } #ly_web_footer_0001_0FooterNav { display: grid; grid-template-columns: calc(257 * var(--pc-u)) calc(168 * var(--pc-u)) calc(168 * var(--pc-u)); align-items: flex-start; column-gap: calc(27 * var(--pc-u)); } #ly_web_footer_0001_0FooterNav .item { width: 100%; max-width: none; min-width: 0; } #ly_web_footer_0001_0FooterNav .title { font-family: "Figtree-SemiBold", Figtree, sans-serif; font-size: calc(16 * var(--pc-u)); line-height: 100%; letter-spacing: calc(-0.32 * var(--pc-u)); color: var(--color-text-white); } #ly_web_footer_0001_0FooterNav .two { padding-top: calc(26 * var(--pc-u)); } #ly_web_footer_0001_0FooterNav .item:nth-child(1) .two { width: calc(239 * var(--pc-u)); } #ly_web_footer_0001_0FooterNav .two_li { font-family: "Figtree-Regular", Figtree, sans-serif; font-size: calc(12 * var(--pc-u)); font-weight: 400; line-height: 160%; letter-spacing: calc(-0.24 * var(--pc-u)); color: #c1c1c1; } #ly_web_footer_0001_0FooterNav .two_li + .two_li { margin-top: 0; } #ly_web_footer_0001_0FooterShare { position: absolute; right: calc(-18 * var(--pc-u)); bottom: calc(17.5 * var(--pc-u)); justify-content: flex-end; gap: 0 calc(15 * var(--pc-u)); margin-top: 0; } #ly_web_footer_0001_0FooterShare .item, #ly_web_footer_0001_0FooterShare .item .svg { width: calc(30 * var(--pc-u)); height: calc(30 * var(--pc-u)); } #ly_web_footer_0001_0FooterShare .item .svg { display: block; fill: #fff; } #ly_web_footer_0001_0FooterShare .item .svg path { fill: inherit; } #ly_web_footer_0001_0Legal { position: absolute; bottom: calc(22 * var(--pc-u)); left: 0; gap: calc(10 * var(--pc-u)) calc(24 * var(--pc-u)); margin-top: 0; padding-bottom: 0; max-width: 100%; flex-wrap: wrap; } #ly_web_footer_0001_0Legal .ly_web_footer_0001_0LegalLinks { display: flex; align-items: center; } #ly_web_footer_0001_0Legal .ly_web_footer_0001_0LegalLinksInner { gap: calc(10 * var(--pc-u)) calc(24 * var(--pc-u)); flex-wrap: wrap; } #ly_web_footer_0001_0Legal .nav { font-family: "Figtree-Medium", Figtree, sans-serif; font-size: calc(12 * var(--pc-u)); line-height: 100%; letter-spacing: calc(-0.24 * var(--pc-u)); color: #c1c1c1; white-space: nowrap; } #ly_web_footer_0001_0Legal .ly_web_footer_0001_0Worldwide { flex: 0 0 auto; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; cursor: pointer; } #ly_web_footer_0001_0Legal .ly_web_footer_0001_0WorldwideInner { gap: calc(4 * var(--pc-u)); } #ly_web_footer_0001_0Legal .ly_web_footer_0001_0Worldwide img { flex: 0 0 calc(12 * var(--pc-u)); width: calc(12 * var(--pc-u)); height: calc(12 * var(--pc-u)); } #ly_web_footer_0001_0_bottom { display: flex; align-items: center; justify-content: center; width: 100%; height: calc(30 * var(--pc-u)); min-height: calc(30 * var(--pc-u)); margin: 0; padding: 0; overflow: hidden; background: rgba(0, 0, 0, 0.5); } #ly_web_footer_0001_0_bottom .box { display: flex; align-items: center; justify-content: center; width: 100%; max-width: none; height: calc(30 * var(--pc-u)); min-height: calc(30 * var(--pc-u)); margin: 0; padding: 0; position: relative; left: calc(90.5 * var(--pc-u)); overflow: hidden; white-space: nowrap; } #ly_web_footer_0001_0_bottom .box, #ly_web_footer_0001_0_bottom .box *, #ly_web_footer_0001_0_bottom *, #ly_web_footer_0001_0_bottom a { font-family: "Figtree-Medium", Figtree, sans-serif; font-size: calc(12 * var(--pc-u)); line-height: calc(30 * var(--pc-u)); text-align: center; color: rgba(193, 193, 193, 0.3); } @media (max-width: 768px) { .ly_web_footer_0001_0Wrap .cw980 { width: 76.2%; } .ly_web_footer_0001_0Wrap .ly_web_footer_0001_0Inner { height: auto; min-height: 0; padding-top: 61px; } .ly_web_footer_0001_0Wrap .ly_web_footer_0001_0Main { display: flex; flex-direction: column; padding-top: 0; } .ly_web_footer_0001_0Wrap .ly_web_footer_0001_0Primary, .ly_web_footer_0001_0Wrap .ly_web_footer_0001_0Secondary { display: contents; } #ly_web_footer_0001_0FooterIntro { order: 1; } #ly_web_footer_0001_0FooterIntro .logo { width: 139px; height: 42px; margin: 0 auto; transform: none; } #ly_web_footer_0001_0FooterShare { position: static; right: auto; bottom: auto; order: 3; justify-content: center; width: max-content; max-width: 100%; gap: 0 30px; margin: 30px auto 0; flex-wrap: nowrap; } #ly_web_footer_0001_0FooterShare .item, #ly_web_footer_0001_0FooterShare .item .svg { width: 28px; height: 28px; } #ly_web_footer_0001_0FooterShare .item { flex: 0 0 28px; } #ly_web_footer_0001_0Newsletter { order: 2; width: 100%; margin-top: 16px; } #ly_web_footer_0001_0Newsletter .text { width: 100%; font-family: "Figtree-SemiBold", Figtree, sans-serif; font-size: 14px; text-align: center; transform: none; } #ly_web_footer_0001_0Newsletter .formBox { width: 100%; margin-top: 11px; } #ly_web_footer_0001_0Newsletter .form { height: 39px; padding: 3px; padding-left: 12px; gap: 8px; border: 1px solid #fff; background: transparent; } #ly_web_footer_0001_0Newsletter .input { font-size: 14px; line-height: 150%; color: #fff; } #ly_web_footer_0001_0Newsletter .button { width: 77px; height: 33px; padding: 0 10px; background: #0071e3; font-size: 12px; line-height: 160%; } #ly_web_footer_0001_0Newsletter .form-tip { left: 12px; width: calc(100% - 24px); font-size: 12px; } #ly_web_footer_0001_0FooterNav { order: 4; display: flex; flex-direction: column; gap: 20px 0; margin-top: 82px; } #ly_web_footer_0001_0FooterNav .item { width: 100%; max-width: none; border-bottom: 1px solid rgba(255, 255, 255, 0.25); } #ly_web_footer_0001_0FooterNav .title { display: flex; align-items: flex-start; justify-content: space-between; min-height: 35px; padding: 0; font-size: 14px; line-height: 100%; letter-spacing: 0.01em; } #ly_web_footer_0001_0FooterNav .one-icon { display: block; position: relative; flex: 0 0 12px; width: 12px; height: 12px; } #ly_web_footer_0001_0FooterNav .one-icon i { position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); border-radius: 5px; background: #fff; } #ly_web_footer_0001_0FooterNav .one-icon i:first-child { width: 100%; height: 2px; transition: opacity 0.5s ease; } #ly_web_footer_0001_0FooterNav .one-icon i:last-child { width: 2px; height: 100%; } #ly_web_footer_0001_0FooterNav .list_item.cur .one-icon { transform: rotate(90deg); } #ly_web_footer_0001_0FooterNav .list_item.cur .one-icon i:first-child { opacity: 0; } #ly_web_footer_0001_0FooterNav .two_list { height: 0; overflow: hidden; transition: height 0.5s ease-in-out; } #ly_web_footer_0001_0FooterNav .two { width: 100%; padding: 0 0 20px; } #ly_web_footer_0001_0FooterNav .item:nth-child(1) .two { width: 100%; } #ly_web_footer_0001_0FooterNav .two_li { font-family: "Figtree-Medium", Figtree, sans-serif; font-size: 14px; font-weight: 500; line-height: 130%; } #ly_web_footer_0001_0FooterNav .two_li + .two_li { margin-top: 12px; } #ly_web_footer_0001_0Contact { order: 5; gap: 16px 0; margin-top: 77px; } #ly_web_footer_0001_0Contact .li { min-height: 19px; gap: 0 11px; } #ly_web_footer_0001_0Contact .icon { flex-basis: 19px; width: 19px; height: 19px; } #ly_web_footer_0001_0Contact .text { position: static; width: calc(100% - 30px); font-family: "Poppins-Medium", Poppins, "Figtree-Medium", Figtree, sans-serif; font-size: 15px; line-height: 100%; letter-spacing: 0.01em; color: #bbb9ba; } #ly_web_footer_0001_0Legal { display: flex; position: static; align-items: center; justify-content: space-between; flex-direction: row; bottom: auto; left: auto; width: 100%; max-width: 100%; gap: 12px 24px; margin-top: 43px; padding: 0 0 30px; overflow: visible; flex-wrap: wrap; transform: none; } #ly_web_footer_0001_0Legal .ly_web_footer_0001_0LegalLinks { order: 2; justify-content: flex-end; flex: 0 0 auto; width: max-content; max-width: 100%; min-width: 0; margin-left: auto; } #ly_web_footer_0001_0Legal .ly_web_footer_0001_0LegalLinksInner { justify-content: flex-end; width: 100%; max-width: 100%; gap: 6px 12px; flex-wrap: wrap; } #ly_web_footer_0001_0Legal.is-wrapped .ly_web_footer_0001_0LegalLinks { justify-content: flex-start; margin-left: 0; } #ly_web_footer_0001_0Legal.is-wrapped .ly_web_footer_0001_0LegalLinksInner { justify-content: flex-start; } #ly_web_footer_0001_0Legal .nav { font-size: 12px; line-height: 160%; } #ly_web_footer_0001_0Legal .ly_web_footer_0001_0Worldwide { order: 1; justify-content: flex-start; width: auto; min-width: 0; font-family: "Figtree-Medium", Figtree, sans-serif; font-size: 15px; line-height: 160%; letter-spacing: 0; } #ly_web_footer_0001_0Legal .ly_web_footer_0001_0WorldwideInner { width: max-content; gap: 6px; white-space: nowrap; } #ly_web_footer_0001_0Legal .ly_web_footer_0001_0Worldwide img { flex-basis: 16px; width: 16px; height: 16px; } #ly_web_footer_0001_0_bottom { height: 30px; min-height: 30px; background: #000; } #ly_web_footer_0001_0_bottom .box { justify-content: flex-start; width: 76.2%; height: 30px; min-height: 30px; max-width: none; margin: 0 auto; left: auto; } #ly_web_footer_0001_0_bottom .box, #ly_web_footer_0001_0_bottom .box *, #ly_web_footer_0001_0_bottom *, #ly_web_footer_0001_0_bottom a { font-family: Figtree, sans-serif; font-size: 12px; line-height: 30px; letter-spacing: 0.02em; text-align: left; color: rgba(141, 139, 139, 0.7); } } #ly_web_sidebar_0001_1{ bottom: 14.96%; right: 48px; width: 64px; z-index: 100; gap: 40px;} #ly_web_sidebar_0001_1 .btn{ width: 100%; height: 64px; background: rgba(0, 0, 0, .5); border-radius: 50%; transition: all 0.5s ease;} #ly_web_sidebar_0001_1 .btn:hover{background: var(--color-primary);} #ly_web_sidebar_0001_1 .whatsapp-link img{display:block;width:40px;height:40px;} #ly_web_sidebar_0001_1 .whatsapp-link:hover{background:var(--color-primary);} #ly_web_sidebar_0001_1 .whatsapp-link--pending{cursor:not-allowed;opacity:.55;} #launcher, .zendesk-messenger-launcher, iframe[src*="zendesk"][title*="launcher"] {display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important;} iframe[title*="Messaging window"]{z-index: 10000 !important; max-height: 65vh !important; bottom: calc( 14.96% + 104px) !important; right: 120px !important;} @media (max-width: 1920px) { #ly_web_sidebar_0001_1{gap: 30px;} } @media (max-width: 1024px) { #ly_web_sidebar_0001_1{width: 40px; gap: 20px; bottom: 8%; right: 40px;} #ly_web_sidebar_0001_1 .btn{height: 40px;} #ly_web_sidebar_0001_1 .btn img{transform: scale(.7);} #ly_web_sidebar_0001_1 .btn.whatsapp-link img{width:25px;height:25px;transform:none;} iframe[title*="Messaging window"]{bottom: calc( 8% + 80px) !important; right: 80px !important;} } @media (max-width: 992px) { #ly_web_sidebar_0001_1{width: .303rem; gap: .1515rem; bottom: 8%; right: .303rem;} #ly_web_sidebar_0001_1 .btn{height: .303rem;} } @media (max-width: 768px) { #ly_web_sidebar_0001_1{width: .6rem; gap: .2rem; bottom: 5%; right: .32rem;} #ly_web_sidebar_0001_1 .btn{height: .6rem;} #ly_web_sidebar_0001_1 .btn.whatsapp-link img{width:min(66%, 28px);height:min(66%, 28px);transform:none;} iframe[title*="Messaging window"]{bottom: 0 !important; right: 0 !important; top: inherit !important;} } /* ATW AI Heat Pump X7 — Figma 1745:1202 / 1754:1669 */ .atw-page { --pc-u: min(1px, calc(100vw / 1920)); --mobile-u: 1px; --atw-u: var(--pc-u); --atw-canvas-width: calc(1920 * var(--atw-u)); --atw-canvas-left: calc(50% - (960 * var(--atw-u))); --atw-header-height: 64px; --atw-hero-offset: 102px; --atw-blue: #0071e3; width: 100%; max-width: none; margin: 0; padding: var(--atw-hero-offset) 0 0; overflow-x: clip; background: #fff; color: #000; font-family: Figtree, Arial, Helvetica, sans-serif; font-size: calc(16 * var(--atw-u)); line-height: 1.2; box-sizing: border-box; } .atw-subnav-holder { position: relative; z-index: 50; width: 100%; height: 0; visibility: hidden; pointer-events: none; background: #fff; } .atw-subnav-holder.is-revealed { visibility: visible; pointer-events: auto; } .atw-subnav { position: absolute; top: 0; right: 0; left: 0; z-index: 50; width: 100%; min-width: 320px; height: 64px; padding: 0 max(24px, calc((100vw - 1312px) / 2)); background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .atw-subnav.is-fixed { position: fixed; z-index: 100; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); } section[id^="ly_web_header_"].atw-subnav-site-header-hidden { opacity: 0 !important; visibility: hidden !important; pointer-events: none; transition: none !important; } .atw-subnav__inner { display: flex; align-items: center; gap: 32px; width: 100%; max-width: 1312px; height: 64px; margin: 0 auto; } .atw-subnav__brand { flex: 0 0 auto; color: #333; font-size: 24px; font-weight: 600; line-height: 1; letter-spacing: -0.04em; white-space: nowrap; } .atw-subnav__links-scroll { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .atw-subnav__links-scroll::-webkit-scrollbar { display: none; } .atw-subnav__links { display: flex; align-items: center; gap: 24px; width: max-content; padding: 0; list-style: none; } .atw-page .atw-subnav__link { position: relative; display: block; padding: 24px 0; color: #999; font-size: 16px; font-weight: 500; line-height: 16px; text-decoration: none; white-space: nowrap; transition: color 160ms ease; } .atw-page .atw-subnav__link:hover, .atw-page .atw-subnav__link.is-active { color: #333; } .atw-page .atw-subnav__link.is-active::after { content: ""; position: absolute; right: 0; bottom: 15px; left: 0; height: 2px; border-radius: 2px; background: var(--atw-blue); } .atw-page .atw-subnav__link:focus-visible, .atw-page .atw-subnav__cta:focus-visible { outline: 2px solid var(--atw-blue); outline-offset: 3px; } .atw-page .atw-subnav__cta { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 132px; height: 46px; padding: 0 26px; border-radius: 100px; background: var(--atw-blue); color: #fff; font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; transition: opacity 180ms ease, transform 180ms ease; } .atw-page .atw-subnav__cta:hover { opacity: 0.88; } .atw-page .atw-subnav__cta:active { transform: translateY(1px); } #atw-edge, #atw-cop, #atw-indoor, #atw-quote { scroll-margin-top: 64px; } /* Project-homepage copy reveal: independent from the T800 scroll-linked effect. */ .atw-copy-motion-ready .atw-page [data-atw-copy-motion] { opacity: 0; translate: 0 clamp(42px, 3.4vw, 64px); transition: opacity 1.3s cubic-bezier(0, 0.18, 0.07, 1) var(--atw-copy-motion-delay, 0ms), translate 1.3s cubic-bezier(0, 0.18, 0.07, 1) var(--atw-copy-motion-delay, 0ms); will-change: opacity, translate; } .atw-copy-motion-ready .atw-page [data-atw-copy-motion].is-atw-copy-visible { opacity: 1; translate: 0 0; will-change: auto; } @media (max-width: 767px) { .atw-copy-motion-ready .atw-page [data-atw-copy-motion] { translate: 0 32px; transition-duration: 1.12s; } .atw-copy-motion-ready .atw-page [data-atw-copy-motion].is-atw-copy-visible { translate: 0 0; } } .atw-page *, .atw-page *::before, .atw-page *::after { box-sizing: border-box; } /* .atw-page > :not(.m30-quote) h1, .atw-page > :not(.m30-quote) h2, .atw-page > :not(.m30-quote) h3, .atw-page > :not(.m30-quote) p, .atw-page > :not(.m30-quote) ul, .atw-page > :not(.m30-quote) ol { margin: 0; } */ .atw-page > :not(.m30-quote) button, .atw-page > :not(.m30-quote) a { font: inherit; } .atw-media-slot, .atw-media-slot picture, .atw-media-slot img { display: block; width: 100%; height: 100%; } .atw-media-slot { position: absolute; inset: 0; overflow: hidden; } .atw-media-slot img { object-fit: cover; object-position: center; } .atw-hero > .atw-media-slot, .atw-inverter > .atw-media-slot, .atw-feature > .atw-media-slot { left: 50%; inset-block: 0; width: var(--atw-canvas-width); transform: translateX(-50%); } .atw-hero, .atw-inverter, .atw-edge, .atw-feature, .atw-more, .atw-indoor, .atw-remarks { position: relative; width: 100%; overflow: hidden; } .atw-page .m30-quote__grid:has(.m30-quote__product-dropdown.is-open), .atw-page .m30-quote__grid:has(.m30-quote__picker.is-open) { position: relative; z-index: 30; } /* Module 02 — Hero */ .atw-hero { height: calc(100vh - var(--atw-header-height)); } @supports (height: 100dvh) { .atw-hero { height: calc(100dvh - var(--atw-header-height)); } } .atw-hero__copy { position: relative; z-index: 1; display: flex; align-items: center; flex-direction: column; padding-top: calc(128 * var(--atw-u)); } .atw-hero__title { /* width: calc(730 * var(--atw-u)); */ font-family: "Figtree-SemiBold", Figtree, Arial, sans-serif; font-size: calc(54 * var(--atw-u)); font-weight: 600; line-height: 1; letter-spacing: calc(-1.08 * var(--atw-u)); text-align: center; } /* .atw-page:not([data-atw-lang="en"]) .atw-hero__title { width: calc(1100 * var(--atw-u)); font-size: calc(48 * var(--atw-u)); } */ .atw-page .atw-pill-button { display: inline-flex; align-items: center; justify-content: center; gap: calc(5 * var(--atw-u)); width: auto; height: calc(48 * var(--atw-u)); margin-top: calc(32 * var(--atw-u)); padding: calc(10 * var(--atw-u)) calc(18 * var(--atw-u)); border: 1px solid #000; border-radius: calc(999 * var(--atw-u)); background: transparent; color: #000; font-family: "Figtree-SemiBold", Figtree, Arial, sans-serif; font-size: calc(16 * var(--atw-u)); font-weight: 600; line-height: calc(17.424 * var(--atw-u)); letter-spacing: calc(-0.32 * var(--atw-u)); text-decoration: none; white-space: nowrap; transition: background-color .24s cubic-bezier(.22, .61, .36, 1), color .24s cubic-bezier(.22, .61, .36, 1); } .atw-pill-button__arrow { display: block; flex: 0 0 auto; width: calc(10 * var(--atw-u)); height: calc(10 * var(--atw-u)); transform: rotate(-90deg) scaleY(-1); transition: filter .24s cubic-bezier(.22, .61, .36, 1); } .atw-page .atw-pill-button:hover, .atw-page .atw-pill-button:focus-visible { background: #000; color: #fff; } .atw-page .atw-pill-button:hover .atw-pill-button__arrow, .atw-page .atw-pill-button:focus-visible .atw-pill-button__arrow { filter: brightness(0) invert(1); } /* Module 03 — AI Inverter */ .atw-inverter { height: calc(1080 * var(--atw-u)); background: #f9fcff; } .atw-inverter__copy { position: absolute; z-index: 1; left: var(--atw-canvas-left); top: 0; width: var(--atw-canvas-width); height: 100%; text-align: center; } .atw-inverter__script { position: absolute; left: calc(1243 * var(--atw-u)); top: calc(50% - (107 * var(--atw-u))); width: calc(360 * var(--atw-u)); height: calc(64 * var(--atw-u)); margin: 0; overflow: hidden; } .atw-inverter__script img { display: block; width: 100%; height: 100%; object-fit: cover; } .atw-inverter__script > span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-family: "Segoe Script", "Brush Script MT", cursive; font-size: calc(26 * var(--atw-u)); font-style: italic; font-weight: 600; line-height: 1.1; text-align: center; } .atw-inverter h2 { position: absolute; left: calc(1423 * var(--atw-u)); top: calc(50% - (19 * var(--atw-u))); width: calc(538 * var(--atw-u)); transform: translateX(-50%); color: #333; font-size: calc(64 * var(--atw-u)); font-weight: 700; line-height: 1.1; letter-spacing: calc(-1.28 * var(--atw-u)); text-align: center; white-space: nowrap; } .atw-page:not([data-atw-lang="en"]) .atw-inverter h2 { width: calc(760 * var(--atw-u)); } .atw-inverter ul { position: absolute; left: calc(1423 * var(--atw-u)); top: calc(50% + (83 * var(--atw-u))); display: flex; justify-content: flex-start; width: max-content; transform: translateX(-50%); gap: calc(40 * var(--atw-u)); margin: 0; padding: 0; font-size: calc(20 * var(--atw-u)); font-weight: 500; letter-spacing: calc(-0.2 * var(--atw-u)); list-style: none; white-space: nowrap; } .atw-inverter li::before { content: "· "; } /* Module 04 — Edge AI */ .atw-edge { left: 50%; width: 100vw; transform: translateX(-50%); min-height: calc(1080 * var(--atw-u)); padding-top: calc(20 * var(--atw-u)); padding-bottom: calc(98.77 * var(--atw-u)); background: #fff; } .atw-edge__media { position: relative; width: auto; height: auto; margin-right: calc(18 * var(--atw-u)); margin-left: calc(20 * var(--atw-u)); overflow: hidden; } .atw-edge__media > .atw-media-slot, .atw-edge__media > .atw-media-slot picture, .atw-edge__media > .atw-media-slot img { position: relative; inset: auto; display: block; width: 100%; height: auto; } .atw-edge__bar { position: absolute; z-index: 1; left: 0; bottom: 0; display: block; width: 100%; height: calc(45 * var(--atw-u)); padding: 0; background: #000; color: #fff; font-size: calc(20 * var(--atw-u)); font-weight: 400; letter-spacing: calc(-0.4 * var(--atw-u)); list-style: none; } .atw-edge__bar li { position: absolute; top: 0; display: flex; align-items: center; justify-content: center; height: 100%; white-space: nowrap; } .atw-edge__bar li:nth-child(1) { left: calc(50% - (513 * var(--atw-u))); width: calc(247 * var(--atw-u)); } .atw-edge__bar li:nth-child(2) { left: calc(50% - (206 * var(--atw-u))); width: calc(410 * var(--atw-u)); } .atw-edge__bar li:nth-child(3) { left: calc(50% + (264 * var(--atw-u))); width: calc(139 * var(--atw-u)); } .atw-edge__bar li:nth-child(2)::before, .atw-edge__bar li:nth-child(3)::before { content: ""; position: absolute; top: calc(8 * var(--atw-u)); width: calc(1 * var(--atw-u)); height: calc(29 * var(--atw-u)); background: rgba(255, 255, 255, 0.62); } .atw-edge__bar li:nth-child(2)::before { left: calc(-12 * var(--atw-u)); } .atw-edge__bar li:nth-child(3)::before { left: calc(-48 * var(--atw-u)); } .atw-edge__copy { position: relative; display: flex; flex-direction: column; align-items: center; width: calc(1400 * var(--atw-u)); height: auto; margin: calc(64 * var(--atw-u)) auto 0; text-align: center; } .atw-edge h2 { position: static; width: calc(465.064 * var(--atw-u)); font-family: "Figtree-Bold", Figtree, Arial, sans-serif; font-size: calc(64 * var(--atw-u)); font-weight: 700; line-height: 1.1; letter-spacing: calc(-1.28 * var(--atw-u)); } .atw-edge .atw-edge__tagline { position: static; width: calc(465.064 * var(--atw-u)); margin: calc(16 * var(--atw-u)) 0 0; font-family: "Figtree-Medium", Figtree, Arial, sans-serif; font-size: calc(22 * var(--atw-u)); font-weight: 500; line-height: 1.2; letter-spacing: calc(-0.44 * var(--atw-u)); } .atw-edge .atw-edge__body { position: static; width: 100%; margin: calc(24 * var(--atw-u)) 0 0; font-family: "Figtree-Medium", Figtree, Arial, sans-serif; font-size: calc(20 * var(--atw-u)); font-weight: 500; line-height: 1.2; letter-spacing: calc(-0.4 * var(--atw-u)); white-space: normal; overflow-wrap: anywhere; } @media (min-width: 768px) { .atw-edge__bar { font-family: "Figtree-Regular", Figtree, Arial, sans-serif; line-height: normal; } .atw-edge .atw-edge__tagline { width: calc(676 * var(--atw-u)); font-family: "Figtree-SemiBold", Figtree, Arial, sans-serif; font-size: calc(32 * var(--atw-u)); font-weight: 600; line-height: normal; letter-spacing: calc(-0.64 * var(--atw-u)); white-space: nowrap; } .atw-page:not([data-atw-lang="en"]) .atw-edge h2 { width: calc(1081.057 * var(--atw-u)); } .atw-page:not([data-atw-lang="en"]) .atw-edge__tagline { width: calc(800 * var(--atw-u)); } } /* Modules 05–08 — Feature panels */ .atw-feature { height: calc(1080 * var(--atw-u)); background: #66757b; color: #fff; } .atw-feature__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, transparent 72.356%, rgba(0, 0, 0, 0.48)); } .atw-feature__copy { position: absolute; z-index: 3; left: calc(var(--atw-canvas-left) + (1243 * var(--atw-u))); top: calc(736 * var(--atw-u)); right: calc(96 * var(--atw-u)); width: auto; max-width: calc(581 * var(--atw-u)); box-sizing: border-box; } .atw-feature h2 { width: 100%; max-width: 100%; font-size: calc(64 * var(--atw-u)); font-weight: 700; line-height: 1.1; letter-spacing: calc(-1.28 * var(--atw-u)); } .atw-feature__eyebrow { position: absolute; left: 0; top: calc(94 * var(--atw-u)); font-size: calc(32 * var(--atw-u)); font-weight: 500; line-height: 1.2; letter-spacing: calc(-0.64 * var(--atw-u)); } .atw-feature__lead { position: absolute; left: 0; top: calc(156 * var(--atw-u)); font-size: calc(20 * var(--atw-u)); font-weight: 500; line-height: 1.2; letter-spacing: calc(-0.4 * var(--atw-u)); } .atw-feature__body { position: absolute; left: 0; top: calc(200 * var(--atw-u)); width: 100%; font-size: calc(20 * var(--atw-u)); font-weight: 500; line-height: 1.2; letter-spacing: calc(-0.4 * var(--atw-u)); } .atw-feature--capacity .atw-feature__copy { top: calc(744 * var(--atw-u)); } .atw-feature--capacity h2 { width: 100%; } .atw-feature--capacity h2 span { white-space: nowrap; } .atw-feature--capacity .atw-feature__title-mobile { display: none; } .atw-feature--capacity .atw-feature__body { top: calc(164 * var(--atw-u)); font-size: calc(20 * var(--atw-u)); } .atw-feature--capacity .atw-feature__note { position: absolute; left: 0; top: calc(202 * var(--atw-u)); width: 100%; margin: 0; color: rgba(255, 255, 255, 0.6); font-family: "Figtree-Medium", Figtree, Arial, sans-serif; font-size: calc(16 * var(--atw-u)); font-weight: 500; line-height: 1.2; letter-spacing: calc(-0.32 * var(--atw-u)); } .atw-feature--free-power .atw-feature__copy { top: calc(738 * var(--atw-u)); } .atw-feature--free-power .atw-feature__body { top: calc(94 * var(--atw-u)); font-size: calc(20 * var(--atw-u)); } /* Ecosystem panorama — shared desktop/mobile replacement. */ .atw-ecosystem-panorama { position: relative; display: block; width: 100vw; max-width: none; height: calc(1080 * var(--atw-u)); overflow: hidden; isolation: isolate; background: #66757b; color: #fff; } .atw-ecosystem-panorama__viewport, .atw-ecosystem-panorama__swipe { display: none; } .atw-ecosystem-panorama__desktop-media { position: absolute; inset: 0; width: 100%; height: 100%; transform: translate3d(0, -30%, 0); backface-visibility: hidden; will-change: transform; } .atw-ecosystem-panorama__desktop-media img { display: block; width: 100%; height: 100%; min-height: 100%; object-fit: cover; backface-visibility: hidden; } .atw-ecosystem-panorama__desktop-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(138.366deg, transparent 82.979%, rgba(0, 0, 0, 0.32) 100%), linear-gradient(to bottom, transparent 66.427%, rgba(0, 0, 0, 0.32) 100%); } .atw-ecosystem-panorama__copy { position: absolute; z-index: 3; left: calc(var(--atw-canvas-left) + (1243 * var(--atw-u))); top: calc(864 * var(--atw-u)); right: calc(96 * var(--atw-u)); width: auto; max-width: calc(581 * var(--atw-u)); box-sizing: border-box; } .atw-ecosystem-panorama__copy h2, .atw-ecosystem-panorama__copy p { margin: 0; word-break: normal; overflow-wrap: break-word; } .atw-ecosystem-panorama__copy h2 { width: 100%; max-width: 100%; font-family: "Figtree-Bold", Figtree, Arial, sans-serif; font-size: calc(64 * var(--atw-u)); font-weight: 700; line-height: 1.1; letter-spacing: calc(-1.28 * var(--atw-u)); } .atw-ecosystem-panorama__body { position: absolute; left: 0; top: calc(94 * var(--atw-u)); width: 100%; font-family: "Figtree-Medium", Figtree, Arial, sans-serif; font-size: calc(20 * var(--atw-u)); font-weight: 500; line-height: 1.2; letter-spacing: calc(-0.4 * var(--atw-u)); } .atw-ecosystem-panorama__title-mobile, .atw-ecosystem-panorama__body-mobile { display: none; } @keyframes atw-ecosystem-swipe-nudge { 0%, 100% { transform: translate3d(calc(-5 * var(--mobile-u)), 0, 0); } 50% { transform: translate3d(calc(5 * var(--mobile-u)), 0, 0); } } /* Module 09 — Carousel */ .atw-more { width: 100vw; max-width: none; height: calc(1080 * var(--atw-u)); background: #f5f5f5; } .atw-more > h2 { padding-top: calc(96 * var(--atw-u)); font-size: calc(48 * var(--atw-u)); font-weight: 700; line-height: calc(58 * var(--atw-u)); letter-spacing: calc(-0.96 * var(--atw-u)); text-align: center; } .atw-more__title-mobile { display: none; } .atw-more__viewport { position: absolute; left: 0; top: calc(218 * var(--atw-u)); width: 100%; height: calc(640 * var(--atw-u)); overflow: visible; cursor: grab; touch-action: pan-y; user-select: none; } .atw-more__track { --atw-carousel-position: 0; --atw-carousel-drag: 0px; position: absolute; left: 50%; top: 0; display: flex; gap: calc(20 * var(--atw-u)); transform: translate3d(calc(((-440 - (var(--atw-carousel-position) * 900)) * var(--atw-u)) + var(--atw-carousel-drag)), 0, 0); transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .atw-more__track.is-instant, .atw-more__viewport.is-dragging .atw-more__track { transition: none; } .atw-more__viewport.is-dragging { cursor: grabbing; } .atw-more-card { position: relative; flex: 0 0 calc(880 * var(--atw-u)); height: calc(640 * var(--atw-u)); overflow: hidden; border-radius: calc(20 * var(--atw-u)); background: #fff; text-align: center; } .atw-more-card__media { position: relative; width: 100%; height: calc(420 * var(--atw-u)); overflow: hidden; } .atw-more-card h3 { position: absolute; left: 0; top: calc(468 * var(--atw-u)); width: 100%; font-size: calc(28 * var(--atw-u)); font-weight: 600; line-height: calc(34 * var(--atw-u)); letter-spacing: calc(-0.56 * var(--atw-u)); } .atw-more-card p { position: absolute; left: 50%; top: calc(526 * var(--atw-u)); width: calc(750 * var(--atw-u)); transform: translateX(-50%); color: #666; font-size: calc(20 * var(--atw-u)); font-weight: 500; line-height: calc(24 * var(--atw-u)); letter-spacing: calc(-0.4 * var(--atw-u)); } .atw-more-card p br { display: none; } .atw-more-card--controller p { top: calc(526 * var(--atw-u)); color: #666; font-size: calc(20 * var(--atw-u)); font-weight: 500; line-height: calc(24 * var(--atw-u)); letter-spacing: calc(-0.4 * var(--atw-u)); } .atw-more__controls { position: absolute; left: 50%; top: calc(922 * var(--atw-u)); display: flex; align-items: center; transform: translateX(-50%); } .atw-more__dots { display: flex; align-items: center; gap: calc(24 * var(--atw-u)); } .atw-more__dots button { width: calc(13.013 * var(--atw-u)); height: calc(13.013 * var(--atw-u)); padding: 0; border: 0; border-radius: 50%; background: #ddd; cursor: pointer; } .atw-more__dots button.is-active { width: calc(20.037 * var(--atw-u)); height: calc(20.037 * var(--atw-u)); border: calc(3 * var(--atw-u)) solid #1685f8; background: #f5f5f5; } .atw-more__dots button:focus-visible, .atw-more__viewport:focus-visible { outline: calc(2 * var(--atw-u)) solid #1685f8; outline-offset: calc(4 * var(--atw-u)); } /* Module 10 — Indoor unit */ .atw-indoor { width: 100vw; max-width: none; height: auto; aspect-ratio: 16 / 9; background: #fff; } .atw-indoor__heading { position: absolute; z-index: 3; left: 0; top: 0; width: 100%; padding-top: calc(98 * var(--atw-u)); text-align: center; } .atw-indoor h2 { font-family: "Figtree-Bold", Figtree, Arial, Helvetica, sans-serif; font-size: calc(48 * var(--atw-u)); font-weight: 400; line-height: normal; letter-spacing: calc(-0.96 * var(--atw-u)); } .atw-indoor__heading p { margin-top: calc(10 * var(--atw-u)); font-family: "Figtree-Medium", Figtree, Arial, Helvetica, sans-serif; font-size: calc(32 * var(--atw-u)); font-weight: 400; line-height: normal; letter-spacing: calc(-0.64 * var(--atw-u)); } .atw-indoor__media { position: relative; width: 100%; height: auto; } .atw-indoor__media > .atw-media-slot, .atw-indoor__media > .atw-media-slot picture, .atw-indoor__media > .atw-media-slot img { position: relative; inset: auto; display: block; width: 100%; height: auto; min-height: 0; } .atw-indoor__types { position: absolute; z-index: 2; inset: 0; pointer-events: none; } .atw-indoor-type { position: absolute; display: flex; align-items: flex-start; flex-direction: column; gap: calc(16 * var(--atw-u)); width: max-content; padding: calc(16 * var(--atw-u)) calc(48 * var(--atw-u)); border-radius: calc(20 * var(--atw-u)); background: rgba(0, 0, 0, 0.2); color: #fff; font-family: "Figtree-SemiBold", Figtree, Arial, Helvetica, sans-serif; font-size: calc(16 * var(--atw-u)); font-weight: 600; line-height: 1.2; letter-spacing: calc(-0.32 * var(--atw-u)); overflow-wrap: anywhere; } .atw-indoor-type__details { display: flex; flex-direction: column; gap: calc(10 * var(--atw-u)); max-width: 100%; } .atw-indoor-type__details > span { position: relative; padding-left: calc(8 * var(--atw-u)); } .atw-indoor-type__details > span::before { position: absolute; left: 0; top: calc(8 * var(--atw-u)); width: calc(4 * var(--atw-u)); height: calc(4 * var(--atw-u)); background: url("/module/custom-web/products/ai_heat_pump_x7/images/atw-indoor-bullet.svg") center / contain no-repeat; content: ""; } .atw-indoor-type strong { font-family: "Figtree-Bold", Figtree, Arial, Helvetica, sans-serif; font-size: calc(24 * var(--atw-u)); font-weight: 700; line-height: 1.2; letter-spacing: calc(-0.48 * var(--atw-u)); } .atw-indoor-type--a { left: calc(302 / 1920 * 100vw); right: auto; top: calc(433 * var(--atw-u)); max-width: none; } .atw-indoor-type--a .atw-indoor-type__details > span { width: calc(226 * var(--atw-u)); } .atw-indoor-type--b { left: calc(1364 / 1920 * 100vw); top: calc(339 * var(--atw-u)); max-width: calc(460 * var(--atw-u)); } .atw-indoor-type--b .atw-indoor-type__details > span { width: calc(245 * var(--atw-u)); } .atw-indoor-type--c { left: calc(1355 / 1920 * 100vw); top: calc(710 * var(--atw-u)); max-width: calc(469 * var(--atw-u)); } .atw-indoor-type--c .atw-indoor-type__details > span:first-child { width: calc(242 * var(--atw-u)); } .atw-indoor-type--c .atw-indoor-type__details > span:last-child { white-space: nowrap; } .atw-indoor-connector { position: absolute; display: block; height: max(1px, calc(1 * var(--atw-u))); background: rgba(0, 0, 0, 0.2); } .atw-indoor-connector--a { left: calc(624 / 1920 * 100vw); top: calc(465 * var(--atw-u)); width: calc(80 * var(--atw-u)); } .atw-indoor-connector--b { left: calc(1284 / 1920 * 100vw); top: calc(371 * var(--atw-u)); width: calc(80 * var(--atw-u)); } .atw-indoor-connector--c { left: calc(1275 / 1920 * 100vw); top: calc(742 * var(--atw-u)); width: calc(80 * var(--atw-u)); } /* Module 11 — Shared Contact component: rendered directly by contact_us_form */ /* Module 12 — Remarks */ .atw-remarks { width: 100vw; max-width: none; height: calc(300 * var(--atw-u)); background: #f5f5f7; color: #9e9e9e; } .atw-remarks__inner { width: calc(1500 * var(--atw-u)); margin-left: calc(50% - (749 * var(--atw-u))); padding-top: calc(68 * var(--atw-u)); word-break: break-word; } .atw-remarks h2 { width: calc(82.175 * var(--atw-u)); font-size: calc(16 * var(--atw-u)); font-weight: 500; line-height: normal; white-space: nowrap; word-break: normal; } .atw-remarks ol { counter-reset: atw-remark; margin-top: calc(24 * var(--atw-u)); padding-left: 0; font-size: calc(16 * var(--atw-u)); font-weight: 400; line-height: normal; list-style: none; } .atw-remarks li { counter-increment: atw-remark; } .atw-remarks li::before { content: counter(atw-remark) "."; } .atw-remarks li + li { margin-top: calc(5 * var(--atw-u)); } @media (min-width: 768px) and (max-width: 1919px) { .atw-page { --pc-u: calc(100vw / 1920); } } @media (min-width: 1920px) { .atw-indoor__types { --atw-u: calc(100vw / 1920); } .atw-inverter { height: auto; aspect-ratio: 16 / 9; } .atw-hero > .atw-media-slot, .atw-inverter > .atw-media-slot, .atw-feature > .atw-media-slot { left: 0; width: 100%; transform: none; } .atw-hero > .atw-media-slot img, .atw-inverter > .atw-media-slot img, .atw-feature > .atw-media-slot img { width: 100%; height: auto; min-height: 100%; object-fit: cover; } .atw-hero > .atw-media-slot img { height: 100%; } .atw-inverter > .atw-media-slot img { min-height: 0; } } @media (min-width: 768px) { .atw-feature { width: 100vw; max-width: none; height: auto; aspect-ratio: 16 / 9; } .atw-feature > .atw-media-slot { left: 0; width: 100%; height: 100%; transform: none; } .atw-feature > .atw-media-slot picture, .atw-feature > .atw-media-slot img { width: 100%; height: auto; } .atw-feature > .atw-media-slot img { min-height: 0; aspect-ratio: 16 / 9; } .atw-feature__copy { top: auto; bottom: calc(344 * var(--atw-u)); height: 0; } .atw-feature--capacity .atw-feature__copy { top: auto; bottom: calc(336 * var(--atw-u)); } .atw-ecosystem-panorama__copy { top: auto; bottom: calc(98 * var(--atw-u)); height: auto; display: flex; flex-direction: column; } .atw-ecosystem-panorama .atw-ecosystem-panorama__body { position: static; margin-top: calc(24 * var(--atw-u)); } .atw-feature--free-power .atw-feature__copy { top: auto; bottom: calc(94 * var(--atw-u)); display: flex; flex-direction: column; height: auto; } .atw-feature--free-power .atw-feature__body { position: static; margin-top: calc(24 * var(--atw-u)); } } @media (max-width: 767px) { .atw-page { --mobile-u: min(1px, calc(100vw / 375)); --atw-u: var(--mobile-u); --atw-canvas-width: calc(375 * var(--mobile-u)); --atw-canvas-left: calc(50% - (187.5 * var(--mobile-u))); --atw-header-height: 48px; --atw-hero-offset: 86px; width: 100%; max-width: none; margin: 0; padding-top: var(--atw-hero-offset); font-size: calc(14 * var(--mobile-u)); } .atw-subnav { height: 84px; padding: 0 15px; } .atw-subnav__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 48px 36px; gap: 0; height: 84px; } .atw-subnav__brand { grid-column: 1; grid-row: 1; align-self: start; min-width: 0; max-width: 100%; padding-top: 16px; overflow: hidden; text-overflow: ellipsis; font-size: 16px; } .atw-page .atw-subnav__cta { grid-column: 2; grid-row: 1; align-self: start; justify-self: end; min-width: 0; height: 30px; margin-top: 9px; padding: 0 16px; font-size: 12px; } .atw-subnav__links-scroll { grid-column: 1 / -1; grid-row: 2; width: calc(100% + 15px); height: 36px; padding-top: 7px; -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 48px), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 48px), transparent 100%); } .atw-subnav__links { gap: 18px; padding-right: 30px; } .atw-page .atw-subnav__link { height: 28px; padding: 2px 0 12px; font-size: 14px; line-height: 14px; } .atw-page .atw-subnav__link.is-active::after { bottom: 5px; } #atw-edge, #atw-cop, #atw-indoor, #atw-quote { scroll-margin-top: 84px; } .atw-hero > .atw-media-slot, .atw-inverter > .atw-media-slot, .atw-feature > .atw-media-slot { left: 0; width: 100%; transform: none; } /* Full-bleed hero background; the 375px content canvas remains centered. */ .atw-hero { left: 0; width: 100%; height: calc(100vh - var(--atw-header-height)); transform: none; } @supports (height: 100dvh) { .atw-hero { height: calc(100dvh - var(--atw-header-height)); } } .atw-inverter { height: auto; min-height: 0; } .atw-inverter > .atw-media-slot, .atw-inverter > .atw-media-slot picture, .atw-inverter > .atw-media-slot img { position: relative; inset: auto; display: block; width: 100%; height: auto; min-height: 0; } .atw-inverter__copy { display: block; left: 50%; top: 0; width: calc(375 * var(--mobile-u)); height: 100%; transform: translateX(-50%); } .atw-inverter__script { left: 50%; top: calc(80 * var(--mobile-u)); width: calc(345 * var(--mobile-u)); height: calc(32 * var(--mobile-u)); transform: translateX(-50%); } .atw-inverter__script img { width: calc(180 * var(--mobile-u)); margin-inline: auto; } .atw-inverter__script > span { font-size: calc(13 * var(--mobile-u)); white-space: nowrap; } .atw-inverter h2 { left: 50%; top: calc(116 * var(--mobile-u)); width: calc(345 * var(--mobile-u)); transform: translateX(-50%); font-size: calc(28 * var(--mobile-u)); line-height: 1.1; letter-spacing: calc(-0.56 * var(--mobile-u)); white-space: normal; } .atw-inverter ul { left: 50%; top: calc(163 * var(--mobile-u)); width: calc(345 * var(--mobile-u)); transform: translateX(-50%); flex-wrap: wrap; justify-content: center; gap: calc(16 * var(--mobile-u)); font-size: calc(14 * var(--mobile-u)); line-height: 1.2; letter-spacing: calc(-0.14 * var(--mobile-u)); white-space: normal; } .atw-inverter li { white-space: nowrap; } .atw-hero > .atw-media-slot, .atw-hero > .atw-media-slot picture, .atw-hero > .atw-media-slot img { width: 100%; } .atw-hero__copy { position: absolute; left: 50%; top: calc(70 * var(--mobile-u)); /* width: calc(375 * var(--mobile-u)); */ width: calc(100% - (30 * var(--mobile-u))); padding-top: 0; transform: translateX(-50%); } .atw-hero__title { /* width: calc(279 * var(--mobile-u)); */ width: 100%; height: auto; min-height: calc(68 * var(--mobile-u)); font-family: "Figtree-Bold", Figtree, Arial, sans-serif; font-size: calc(28 * var(--mobile-u)); font-weight: 700; line-height: 1.2; letter-spacing: calc(-0.56 * var(--mobile-u)); } .atw-hero__title span { display: block; } /* .atw-page:not([data-atw-lang="en"]) .atw-hero__title { width: calc(279 * var(--mobile-u)); height: auto; min-height: calc(68 * var(--mobile-u)); font-size: calc(28 * var(--mobile-u)); } */ /* .atw-page:not([data-atw-lang="en"]) .atw-hero__title-model { font-size: inherit; line-height: inherit; } */ .atw-page .atw-pill-button { width: auto; height: calc(40 * var(--mobile-u)); gap: calc(8 * var(--mobile-u)); margin-top: calc(16 * var(--mobile-u)); padding: calc(12 * var(--mobile-u)) calc(20 * var(--mobile-u)); font-size: calc(16 * var(--mobile-u)); line-height: 1; letter-spacing: calc(-0.32 * var(--mobile-u)); } .atw-pill-button__arrow { width: calc(12 * var(--mobile-u)); height: calc(12 * var(--mobile-u)); } /* Edge AI uses the exact 375 × 252 Figma media export with live copy. */ .atw-edge { left: 0; display: grid; grid-template-rows: auto auto calc(24 * var(--mobile-u)) auto calc(24 * var(--mobile-u)) auto calc(80.6 * var(--mobile-u)); width: 100%; transform: none; height: auto; min-height: 0; padding: calc(80 * var(--mobile-u)) 0 0; } .atw-edge__media { position: relative; grid-row: 4; left: 0; top: auto; width: 100%; height: auto; margin: 0; } .atw-edge__media > .atw-media-slot, .atw-edge__media > .atw-media-slot picture, .atw-edge__media > .atw-media-slot img { position: relative; inset: auto; display: block; width: 100%; height: auto; } .atw-edge__copy { display: contents; position: static; left: auto; top: 0; width: auto; height: auto; transform: none; } .atw-edge h2 { position: static; grid-row: 1; justify-self: center; width: calc(100% - (72 * var(--mobile-u))); font-size: calc(28 * var(--mobile-u)); line-height: 1.2; letter-spacing: calc(-0.56 * var(--mobile-u)); text-align: center; } .atw-edge .atw-edge__tagline { position: static; grid-row: 2; justify-self: center; width: calc(100% - (72 * var(--mobile-u))); margin: calc(12 * var(--mobile-u)) 0 0; font-size: calc(16 * var(--mobile-u)); line-height: 1.2; letter-spacing: calc(-0.14 * var(--mobile-u)); text-align: center; } .atw-edge .atw-edge__body { position: relative; grid-row: 6; left: calc(15 * var(--mobile-u)); top: auto; width: calc(100% - (30 * var(--mobile-u))); margin: 0; font-size: calc(14 * var(--mobile-u)); line-height: 1.2; letter-spacing: calc(-0.14 * var(--mobile-u)); white-space: normal; text-align: center; } .atw-edge__bar { display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--mobile-u)); height: calc(18 * var(--mobile-u)); font-size: calc(8 * var(--mobile-u)); font-weight: 600; letter-spacing: calc(-0.16 * var(--mobile-u)); } .atw-edge__bar li, .atw-edge__bar li:nth-child(1), .atw-edge__bar li:nth-child(2), .atw-edge__bar li:nth-child(3) { position: relative; left: auto; top: auto; flex: 0 0 auto; } .atw-edge__bar li:nth-child(1) { width: calc(102 * var(--mobile-u)); } .atw-edge__bar li:nth-child(2) { width: calc(138 * var(--mobile-u)); } .atw-edge__bar li:nth-child(3) { width: calc(57 * var(--mobile-u)); } .atw-edge__bar li:nth-child(2)::before, .atw-edge__bar li:nth-child(3)::before { display: none; } .atw-feature { height: calc(625 * var(--mobile-u)); } .atw-feature__shade { background: linear-gradient(to bottom, transparent 72.356%, rgba(0, 0, 0, 0.64)); } .atw-feature__copy, .atw-feature--capacity .atw-feature__copy, .atw-feature--free-power .atw-feature__copy { left: 0; right: auto; top: 0; width: 100%; max-width: none; height: 100%; transform: none; } .atw-feature h2, .atw-feature--capacity h2 { position: absolute; left: calc(15 * var(--mobile-u)); top: calc(464 * var(--mobile-u)); width: calc(100% - (30 * var(--mobile-u))); font-size: calc(28 * var(--mobile-u)); line-height: 1.1; letter-spacing: calc(-0.56 * var(--mobile-u)); white-space: nowrap; } .atw-feature__eyebrow { left: calc(15 * var(--mobile-u)); top: calc(507 * var(--mobile-u)); width: calc(100% - (30 * var(--mobile-u))); font-size: calc(16 * var(--mobile-u)); letter-spacing: calc(-0.32 * var(--mobile-u)); } .atw-feature__lead { left: calc(15 * var(--mobile-u)); top: calc(542 * var(--mobile-u)); width: calc(100% - (30 * var(--mobile-u))); font-size: calc(14 * var(--mobile-u)); letter-spacing: calc(-0.28 * var(--mobile-u)); } .atw-feature__body, .atw-feature--capacity .atw-feature__body, .atw-feature--free-power .atw-feature__body { left: calc(15 * var(--mobile-u)); top: calc(567 * var(--mobile-u)); width: calc(100% - (30 * var(--mobile-u))); font-size: calc(14 * var(--mobile-u)); line-height: 1.2; letter-spacing: calc(-0.28 * var(--mobile-u)); } .atw-feature--capacity .atw-feature__copy { display: flex; flex-direction: column; justify-content: flex-end; box-sizing: border-box; padding: 0 calc(15 * var(--mobile-u)) calc(14 * var(--mobile-u)); } .atw-feature--capacity h2 { position: static; left: auto; top: auto; width: calc(300 * var(--mobile-u)); } .atw-feature--capacity .atw-feature__title-break { display: none; } .atw-feature--capacity .atw-feature__title-desktop { display: none; } .atw-feature--capacity .atw-feature__title-mobile { display: inline; white-space: normal; } .atw-feature--capacity .atw-feature__body { position: static; left: auto; top: auto; width: 100%; margin: calc(16 * var(--mobile-u)) 0 0; } .atw-feature--capacity .atw-feature__note { position: static; display: block; width: 100%; margin: calc(4 * var(--mobile-u)) 0 0; font-size: calc(9 * var(--mobile-u)); line-height: 1.2; letter-spacing: calc(-0.18 * var(--mobile-u)); } #atw-capacity-title { white-space: normal; } .atw-feature--free-power h2 { top: calc(503 * var(--mobile-u)); } .atw-feature--free-power .atw-feature__body { top: calc(550 * var(--mobile-u)); } .atw-ecosystem-panorama { position: relative; display: block; width: 100%; height: calc(625 * var(--mobile-u)); overflow: hidden; background: #fff; color: #fff; } .atw-ecosystem-panorama__desktop-media, .atw-ecosystem-panorama__desktop-shade { display: none; } .atw-ecosystem-panorama__viewport { position: absolute; display: block; inset: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; } .atw-ecosystem-panorama__viewport::-webkit-scrollbar { display: none; } .atw-ecosystem-panorama__viewport:focus-visible { outline: calc(2 * var(--mobile-u)) solid rgba(255, 255, 255, 0.9); outline-offset: calc(-2 * var(--mobile-u)); } .atw-ecosystem-panorama__canvas { position: relative; width: calc(938 * var(--mobile-u)); height: calc(625 * var(--mobile-u)); min-width: calc(938 * var(--mobile-u)); } .atw-ecosystem-panorama__image { display: block; width: 100%; height: auto; } .atw-ecosystem-panorama__shade { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 72.356%, rgba(0, 0, 0, 0.64)); pointer-events: none; } .atw-ecosystem-panorama__swipe, .atw-ecosystem-panorama__line { position: absolute; display: block; pointer-events: none; } .atw-ecosystem-panorama__swipe { z-index: 2; left: auto; right: calc(10 * var(--mobile-u)); top: calc(24 * var(--mobile-u)); width: calc(40 * var(--mobile-u)); height: calc(24 * var(--mobile-u)); animation: atw-ecosystem-swipe-nudge 1.8s ease-in-out infinite; will-change: transform; } .atw-ecosystem-panorama__line--sync { left: calc(645 * var(--mobile-u)); top: calc(318.5 * var(--mobile-u)); width: calc(36 * var(--mobile-u)); height: calc(78.634 * var(--mobile-u)); } .atw-ecosystem-panorama__line--heat-pump { left: calc(92 * var(--mobile-u)); top: calc(258 * var(--mobile-u)); width: calc(36 * var(--mobile-u)); height: calc(37 * var(--mobile-u)); } .atw-ecosystem-panorama__line--hydro, .atw-ecosystem-panorama__line--control { left: calc(461 * var(--mobile-u)); width: calc(30 * var(--mobile-u)); height: max(1px, calc(0.5 * var(--mobile-u))); } .atw-ecosystem-panorama__line--hydro { top: calc(288 * var(--mobile-u)); } .atw-ecosystem-panorama__line--all-in-one { left: calc(339 * var(--mobile-u)); top: calc(226 * var(--mobile-u)); width: calc(30 * var(--mobile-u)); height: calc(29 * var(--mobile-u)); } .atw-ecosystem-panorama__line--control { top: calc(365 * var(--mobile-u)); } .atw-ecosystem-panorama__tag { position: absolute; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: calc(8 * var(--mobile-u)); border-radius: calc(100 * var(--mobile-u)); background: rgba(0, 0, 0, 0.1); font-family: "Figtree-SemiBold", Figtree, Arial, Helvetica, sans-serif; font-size: calc(12 * var(--mobile-u)); font-weight: 600; line-height: 1.2; letter-spacing: calc(-0.24 * var(--mobile-u)); white-space: nowrap; } .atw-ecosystem-panorama__tag--sync { left: calc(681 * var(--mobile-u)); top: calc(380 * var(--mobile-u)); padding: calc(10 * var(--mobile-u)) calc(16 * var(--mobile-u)); } .atw-ecosystem-panorama__tag--heat-pump { left: calc(128 * var(--mobile-u)); top: calc(243 * var(--mobile-u)); } .atw-ecosystem-panorama__tag--control { left: calc(491 * var(--mobile-u)); top: calc(350 * var(--mobile-u)); } .atw-ecosystem-panorama__tag--hydro { left: calc(491 * var(--mobile-u)); top: calc(273 * var(--mobile-u)); } .atw-ecosystem-panorama__tag--all-in-one { left: calc(268 * var(--mobile-u)); top: calc(211 * var(--mobile-u)); } .atw-ecosystem-panorama__copy { position: absolute; z-index: 2; left: calc(15 * var(--mobile-u)); top: auto; right: auto; bottom: calc(24 * var(--mobile-u)); display: flex; flex-direction: column; gap: calc(16 * var(--mobile-u)); width: calc(100% - (30 * var(--mobile-u))); max-width: none; pointer-events: none; } .atw-ecosystem-panorama__copy h2, .atw-ecosystem-panorama__copy p { margin: 0; word-break: normal; overflow-wrap: break-word; } .atw-ecosystem-panorama__copy h2 { font-family: "Figtree-Bold", Figtree, Arial, Helvetica, sans-serif; font-size: calc(28 * var(--mobile-u)); font-weight: 700; line-height: 1.1; letter-spacing: calc(-0.56 * var(--mobile-u)); } .atw-ecosystem-panorama__copy p { position: static; width: 100%; font-family: "Figtree-Medium", Figtree, Arial, Helvetica, sans-serif; font-size: calc(14 * var(--mobile-u)); font-weight: 500; line-height: 1.2; letter-spacing: calc(-0.28 * var(--mobile-u)); } .atw-ecosystem-panorama__title-desktop, .atw-ecosystem-panorama__body-desktop { display: none; } .atw-ecosystem-panorama__title-mobile, .atw-ecosystem-panorama__body-mobile { display: inline; } .atw-more { height: calc(557 * var(--mobile-u)); } .atw-more > h2 { padding-top: calc(80 * var(--mobile-u)); font-size: calc(28 * var(--mobile-u)); line-height: calc(34 * var(--mobile-u)); letter-spacing: calc(-0.56 * var(--mobile-u)); } .atw-more__title-desktop { display: none; } .atw-more__title-mobile { display: inline; } .atw-more__viewport { top: calc(138 * var(--mobile-u)); height: calc(270 * var(--mobile-u)); } .atw-more__track { gap: calc(10 * var(--mobile-u)); transform: translate3d(calc(((-163.5 - (var(--atw-carousel-position) * 337)) * var(--mobile-u)) + var(--atw-carousel-drag)), 0, 0); } .atw-more-card { flex-basis: calc(327 * var(--mobile-u)); height: calc(270 * var(--mobile-u)); border-radius: calc(7.432 * var(--mobile-u)); } .atw-more-card__media { height: calc(160 * var(--mobile-u)); } .atw-more-card__media img { object-position: center top; } .atw-more-card h3 { top: calc(176 * var(--mobile-u)); font-size: calc(14 * var(--mobile-u)); font-weight: 600; line-height: calc(17 * var(--mobile-u)); letter-spacing: calc(-0.28 * var(--mobile-u)); } .atw-more-card p { top: calc(203 * var(--mobile-u)); width: calc(280 * var(--mobile-u)); font-size: calc(14 * var(--mobile-u)); line-height: calc(17 * var(--mobile-u)); letter-spacing: calc(-0.28 * var(--mobile-u)); } .atw-more-card p br { display: inline; } .atw-more-card--controller h3 { top: calc(193 * var(--mobile-u)); } .atw-more-card--controller p { top: calc(220 * var(--mobile-u)); color: #666; font-size: calc(14 * var(--mobile-u)); font-weight: 500; line-height: calc(17 * var(--mobile-u)); letter-spacing: calc(-0.28 * var(--mobile-u)); } .atw-more-card--defrosting h3 { top: calc(176 * var(--mobile-u)); } .atw-more-card--defrosting p { top: calc(203 * var(--mobile-u)); } .atw-more__controls { top: calc(456 * var(--mobile-u)); } .atw-more__dots { gap: calc(24 * var(--mobile-u)); } .atw-more__dots button { width: calc(13.013 * var(--mobile-u)); height: calc(13.013 * var(--mobile-u)); } .atw-more__dots button.is-active { width: calc(20.037 * var(--mobile-u)); height: calc(20.037 * var(--mobile-u)); border-width: calc(3 * var(--mobile-u)); } .atw-indoor { --atw-indoor-u: calc(100vw / 375); height: auto; aspect-ratio: auto; } .atw-indoor__heading { position: absolute; left: 0; top: 0; width: 100%; padding-top: calc(80 * var(--atw-indoor-u)); } .atw-indoor h2 { font-size: calc(28 * var(--atw-indoor-u)); font-weight: 700; line-height: 1; letter-spacing: calc(-0.56 * var(--atw-indoor-u)); } .atw-indoor__heading p { margin-top: calc(16 * var(--atw-indoor-u)); margin-right: auto; margin-left: auto; width: 100%; max-width: 100%; font-size: calc(14 * var(--atw-indoor-u)); font-weight: 500; line-height: 1.2; letter-spacing: calc(-0.28 * var(--atw-indoor-u)); white-space: nowrap; } .atw-indoor__media { position: relative; left: 0; top: auto; width: 100%; height: auto; margin: 0; transform: none; } .atw-indoor__media > .atw-media-slot, .atw-indoor__media > .atw-media-slot picture, .atw-indoor__media > .atw-media-slot img { position: relative; inset: auto; display: block; width: 100%; height: auto; min-height: 0; } .atw-indoor-type { gap: calc(4 * var(--atw-indoor-u)); width: auto; max-width: none; padding: calc(4 * var(--atw-indoor-u)) calc(12 * var(--atw-indoor-u)); border-radius: calc(8 * var(--atw-indoor-u)); font-family: "Figtree-Medium", Figtree, Arial, Helvetica, sans-serif; font-size: calc(10 * var(--atw-indoor-u)); font-weight: 500; line-height: 1.2; letter-spacing: calc(-0.2 * var(--atw-indoor-u)); } .atw-indoor-type strong { font-size: calc(14 * var(--atw-indoor-u)); font-weight: 700; line-height: 1.2; letter-spacing: calc(-0.28 * var(--atw-indoor-u)); } .atw-indoor-type__details { gap: calc(4 * var(--atw-indoor-u)); width: 100%; min-width: 0; } .atw-indoor-type__details > span { padding-left: calc(6 * var(--atw-indoor-u)); min-width: 0; white-space: normal; overflow-wrap: break-word; word-break: normal; } .atw-indoor-type__details > span::before { top: calc(5 * var(--atw-indoor-u)); width: calc(4 * var(--atw-indoor-u)); height: calc(4 * var(--atw-indoor-u)); } .atw-indoor-type--a .atw-indoor-type__details > span { width: auto; white-space: nowrap; } .atw-indoor-type--a { left: calc(15 * var(--atw-indoor-u)); right: auto; top: calc(519 * var(--atw-indoor-u)); width: max-content; max-width: calc(180 * var(--atw-indoor-u)); } .atw-indoor-type--b { left: calc(81 * var(--atw-indoor-u)); top: calc(169 * var(--atw-indoor-u)); bottom: auto; width: calc(254 * var(--atw-indoor-u)); } .atw-indoor-type--b .atw-indoor-type__details > span { width: calc(230 * var(--atw-indoor-u)); } .atw-indoor-type--c { left: calc(190 * var(--atw-indoor-u)); top: calc(444 * var(--atw-indoor-u)); width: max-content; } .atw-indoor-type--c .atw-indoor-type__details > span:first-child { width: calc(141 * var(--atw-indoor-u)); } .atw-indoor-connector { display: none; } .atw-indoor-type::before, .atw-indoor-type::after { position: absolute; z-index: -1; pointer-events: none; content: ""; } .atw-indoor-type--a::before { left: calc(144.5 * var(--atw-indoor-u)); top: calc(-31.833 * var(--atw-indoor-u)); width: max(1px, calc(1 * var(--atw-indoor-u))); height: calc(31.833 * var(--atw-indoor-u)); background: rgba(0, 0, 0, 0.2); transform: translateX(-50%); } .atw-indoor-type--a::after { left: calc(141.833 * var(--atw-indoor-u)); top: calc(-34.5 * var(--atw-indoor-u)); width: calc(5.333 * var(--atw-indoor-u)); height: calc(5.333 * var(--atw-indoor-u)); border-radius: 50%; background: rgba(0, 0, 0, 0.2); } .atw-indoor-type--b::before { left: calc(222 * var(--atw-indoor-u)); top: 100%; width: max(1px, calc(1 * var(--atw-indoor-u))); height: max(0px, calc((112 * var(--atw-indoor-u)) - 100%)); background: rgba(0, 0, 0, 0.2); transform: translateX(-50%); } .atw-indoor-type--b::after { left: calc(195 * var(--atw-indoor-u)); top: calc(109.333 * var(--atw-indoor-u)); width: calc(27 * var(--atw-indoor-u)); height: calc(5.333 * var(--atw-indoor-u)); background: radial-gradient(circle at calc(2.667 * var(--atw-indoor-u)) 50%, rgba(0, 0, 0, 0.2) 0 calc(2.667 * var(--atw-indoor-u)), transparent calc(2.75 * var(--atw-indoor-u))), linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)) 0 50% / 100% max(1px, calc(1 * var(--atw-indoor-u))) no-repeat; } .atw-indoor-type--c::before { left: calc(102 * var(--atw-indoor-u)); top: calc(-43.5 * var(--atw-indoor-u)); width: max(1px, calc(1 * var(--atw-indoor-u))); height: calc(43.5 * var(--atw-indoor-u)); background: rgba(0, 0, 0, 0.2); transform: translateX(-50%); } .atw-indoor-type--c::after { left: calc(82 * var(--atw-indoor-u)); top: calc(-46.167 * var(--atw-indoor-u)); width: calc(20 * var(--atw-indoor-u)); height: calc(5.333 * var(--atw-indoor-u)); background: radial-gradient(circle at calc(2.667 * var(--atw-indoor-u)) 50%, rgba(0, 0, 0, 0.2) 0 calc(2.667 * var(--atw-indoor-u)), transparent calc(2.75 * var(--atw-indoor-u))), linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)) 0 50% / 100% max(1px, calc(1 * var(--atw-indoor-u))) no-repeat; } .atw-remarks { height: calc(360 * var(--mobile-u)); } .atw-remarks__inner { width: calc(100% - (38 * var(--mobile-u))); margin-left: calc(21 * var(--mobile-u)); padding-top: calc(37 * var(--mobile-u)); } .atw-remarks h2 { width: calc(268 * var(--mobile-u)); font-size: calc(16 * var(--mobile-u)); line-height: calc(18 * var(--mobile-u)); } .atw-remarks ol { margin-top: calc(20 * var(--mobile-u)); font-size: calc(14 * var(--mobile-u)); line-height: calc(18 * var(--mobile-u)); } .atw-remarks li + li { margin-top: calc(5 * var(--mobile-u)); } } /* T800 scroll-linked full-screen parallax for the four feature panels. */ .atw-feature[data-atw-t800-parallax] { height: 100vh; aspect-ratio: auto; overflow: hidden; isolation: isolate; } @supports (height: 100dvh) { .atw-feature[data-atw-t800-parallax] { height: 100dvh; } } .atw-feature[data-atw-t800-parallax] > .atw-feature__t800-media { position: absolute; inset: 0; width: 100%; height: 100%; transform: translate3d(0, -30%, 0); backface-visibility: hidden; will-change: transform; } .atw-feature[data-atw-t800-parallax] > .atw-feature__t800-media picture, .atw-feature[data-atw-t800-parallax] > .atw-feature__t800-media img { display: block; width: 100%; height: 100%; min-height: 100%; aspect-ratio: auto; object-fit: cover; backface-visibility: hidden; } @media (min-width: 768px) { .atw-ecosystem-panorama[data-atw-t800-parallax] { height: 100vh; aspect-ratio: auto; } } @supports (height: 100dvh) { @media (min-width: 768px) { .atw-ecosystem-panorama[data-atw-t800-parallax] { height: 100dvh; } } } @media (max-width: 767px) { .atw-feature[data-atw-t800-parallax] { height: auto; min-height: 0; aspect-ratio: auto; } .atw-feature[data-atw-t800-parallax] > .atw-feature__t800-media { position: relative; inset: auto; left: auto; top: auto; width: 100%; height: auto; transform: none !important; backface-visibility: visible; will-change: auto; } .atw-feature[data-atw-t800-parallax] > .atw-feature__t800-media picture, .atw-feature[data-atw-t800-parallax] > .atw-feature__t800-media img { width: 100%; height: auto; min-height: 0; aspect-ratio: auto; object-fit: contain; backface-visibility: visible; } .atw-feature[data-atw-t800-parallax] .atw-feature__copy { top: auto; bottom: 0; height: calc(625 * var(--mobile-u)); gap: calc(16 * var(--mobile-u)); } .atw-feature.atw-feature--capacity[data-atw-t800-parallax] .atw-feature__copy { left: calc(15 * var(--mobile-u)); width: calc(100% - (30 * var(--mobile-u))); display: block; gap: 0; padding: 0; } .atw-feature.atw-feature--capacity[data-atw-t800-parallax] h2 { position: absolute; left: 0; top: calc(463 * var(--mobile-u)); width: 100%; margin: 0; } .atw-feature.atw-feature--capacity[data-atw-t800-parallax] .atw-feature__body { position: absolute; left: 0; top: calc(541 * var(--mobile-u)); width: 100%; margin: 0; } .atw-feature.atw-feature--capacity[data-atw-t800-parallax] .atw-feature__note { position: absolute; left: 0; top: calc(579 * var(--mobile-u)); width: 100%; margin: 0; } .atw-feature.atw-feature--free-power[data-atw-t800-parallax] .atw-feature__copy { left: calc(15 * var(--mobile-u)); bottom: calc(25 * var(--mobile-u)); width: calc(100% - (30 * var(--mobile-u))); height: auto; display: flex; flex-direction: column; } .atw-feature.atw-feature--free-power[data-atw-t800-parallax] h2, .atw-feature.atw-feature--free-power[data-atw-t800-parallax] .atw-feature__body { position: static; width: 100%; } }