:root { --max-width: 1300px; --frame-padding: 2rem; --frame-radius: 2rem; --basic-padding: 1.5rem; --basic-radius: 1rem; --item-padding: 1.5rem 1.8rem 1.7rem; --item-radius: 0.9rem; --item-left: 2rem; --dashboard-padding: 1.5rem 2rem 1.7rem; --small-radius: 0.8rem; --font-size-xs: 1.4rem; --font-size-s: 1.5rem; --font-size-m: 1.5rem; --font-size-l: 1.6rem; --font-size-xl: 1.7rem; --font-size-xxl: 2.4rem; --basic-shadow: 1px 2px 5px 0px rgba(0,0,0,0.08); } @media (min-width: 1200px){ :root { --basic-padding: 1.6rem; --item-padding: 1.7rem 2rem 1.9rem; --dashboard-padding: 1.7rem 2.2rem 1.9rem; --font-size-m: 1.6rem; --font-size-l: 1.7rem; --font-size-xxl: 2.6rem; } } @media (min-width: 1280px){ :root { --dashboard-padding: 1.7rem 2.5rem 1.9rem; } } .customOverlay { visibility: hidden; } .visibleSet { visibility: visible; } html { color: #333; } html, #wrap { background: linear-gradient(to bottom, #000000 0%,#45acae 57%,#2790b4 100%); } select { border-color: #E2E2E2; } article, .header-wrap .headerInner .headerNav-wrap { padding-left: 2rem; padding-right: 2rem; } @media (min-width: 768px){ article, .header-wrap .headerInner .headerNav-wrap { padding-left: 2.5rem; padding-right: 2.5rem; } } /* @media (min-width: 1024px){ article, .header-wrap .headerInner .headerNav-wrap { padding-left: 3rem; padding-right: 3rem; } } */ .header-wrap.customHeader .headerInner { position: static; background-color: rgba(255, 255, 255, 0); } .header-wrap.customHeader .headerInner .logo { height: 8rem; display: flex !important; align-items: center; justify-content: center; max-width: 100%; } .header-wrap.customHeader .headerInner .logo .logoImg { padding-top: 0.5rem; width: 20rem; max-width: 50%; margin: auto; } .header-wrap.customHeader .headerInner .logo .logoImg img { max-height: unset !important; display: block; width: 100%; } .header-wrap.customHeader .headerInner .headerNav-wrap { position: relative;} .header-wrap.customHeader .headerInner .headerNav-wrap > * { display: block; } .headerNav-login { position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); padding-top: 0.6rem; } .headerNav-login a, .headerNav-login a > * { display: block; text-align: center; color: rgba(255,255,255,0.8); } .headerNav-login a > i { font-size: 1.8rem; color: #3aa0b1; } .headerNav-login a > span { font-size: 1.2rem; margin-top: 0.2rem; } @media (min-width: 768px){ .headerNav-login { right: 2.5rem; padding-top: 0.8rem; } .headerNav-login a i { font-size: 2rem; } .headerNav-login a span { font-size: 1.3rem; } } .header-wrap.customHeader .burgerBtn-wrap { display: none; } #headerNav { display: block; } #headerNav ul { display: flex; background-color: #F5F8F8; padding: 1rem; border-radius: var(--basic-radius); } #headerNav ul li { flex: 1; } #headerNav .navItem a { display: block; position: relative; overflow: hidden; text-align: center; border-radius: var(--small-radius); padding: 1.2rem 0.5rem;} #headerNav .navItem a span { display: block; } #headerNav .navItem a span, #headerNav .navItem a span font { font-family: var(--special-font); color: #444; font-size: var(--font-size-xl); } #headerNav .navItem a:after { content: attr(data-eng); display: block; color: #45ABAE; font-size: 1.1rem; line-height: 1; } #headerNav .navItem a:before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #276263; opacity: 0; transition: opacity 0.2s cubic-bezier(0.4, 0, 0.6, 1); } #headerNav .navItem a:hover::before { opacity: 0.1; } #headerNav .navItem.current a:hover::before { opacity: 0.5; } #headerNav .navItem.current a { background: linear-gradient(to bottom, #3aa0b1 0%,#2089b5 100%); } #headerNav .navItem.current a span font, #headerNav .navItem.current a span { color: #fff; } #headerNav .navItem.current a:after { color: #fff; opacity: 0.5; } @media (max-width: 639.9px){ #headerNav .navItem.managerNav a { padding: 1.4rem 0.5rem 1.2rem; } #headerNav .navItem a span font, #headerNav .navItem.managerNav a:after { display: none; } #headerNav .navItem a span { font-size: var(--font-size-m); } } @media (max-width: 419.9px){ #headerNav .navItem a span { font-size: var(--font-size-s); } } @media (min-width: 1024px){ .header-wrap.customHeader .headerInner .logo { height: 9rem; } .header-wrap.customHeader .headerInner .logo .logoImg { width: 22rem; } #headerNav .navItem a { padding: 1.6rem 0.5rem; } } @media (min-width: 1200px){ .header-wrap.customHeader .headerInner .logo { height: 10rem; } .header-wrap.customHeader .headerInner .logo .logoImg { width: 24rem; } } #wrap footer { padding: 2rem 0; height: 12rem; } #wrap footer { background-color: rgba(0,0,0,0); position: static; } #wrap footer .footer-wrap { padding-left: 2rem; padding-right: 2rem; } #wrap footer .footer-text { margin-top: 2rem; } #wrap footer .footer-text .copyText { text-align: center; font-size: 1.2rem; color: rgba(255,255,255,0.8); } #wrap footer .footer-logo { display: flex; align-items: center; max-width: 60rem; margin: auto; } #wrap footer .footer-logo a { display: block; width: 33.3333333%; padding: 0 1rem; } #wrap footer .footer-logo a:nth-child(2) { width: 26%; } @media (min-width: 500px){ #wrap footer { padding-top: 2.5rem; height: 13.5rem; } } .page-content { background-color: #fff; padding: var(--frame-padding); border-radius: var(--frame-radius); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } .contentControl-wrap { padding: 1.2rem 0; } .contentControl { display: flex; flex-wrap: wrap; gap: 0.9rem; } .contentControl > * { width: 20rem; max-width: calc(50% - 0.45rem); } .contentControl > *.searchInsert-wrap { width: 22rem; } .contentControl > *.searchInsert-wrap .searchInsert { position: relative; } .contentControl > *.searchInsert-wrap .searchInsert button { position: absolute; right: 1.3rem; top: 54.5%; transform: translateY(-50%); font-size: 1.6rem; } .contentControl select, .contentControl input { padding: 1.2rem 3rem 1.1rem 1.3rem; background-position: calc(100% - 0.2rem) center; border-radius: var(--basic-radius); font-size: var(--font-size-m); width: 100%; line-height: 1.2; color: #555; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } @media (max-width: 931.9px){ .contentControl > * { width: calc(50% - 0.45rem); } .contentControl-3 > * { width: calc(33.333333333% - 0.6rem); } .contentControl > *.searchInsert-wrap { width: 100%; max-width: 100%; } } @media (min-width: 940px){ .contentControl > * { max-width: calc(20% - 0.72rem); } } .contentSection { border-radius: var(--basic-radius); overflow: hidden; background-color: #F5F8F8; } .contentItem-Title h3 { line-height: 1; } .titleText { display: block; font-family: var(--special-font); font-weight: normal; font-size: var(--font-size-s); line-height: 1.2; color: #344767; } .mapTitle { height: 5.5rem; padding: 0 var(--basic-padding); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } .mapTitle h3 { display: flex; align-items: center; gap: 0.75rem; padding: 0 0.2rem; } .mapTitle h3 i { color: #DCE9F1; background-color: #2E5171; width: 2.7rem; height: 2.7rem; line-height: 2.7rem; border-radius: 1.5rem; text-align: center; box-shadow: var(--basic-shadow); } .mapTitle h3 i:before { display: block; font-size: 1.5rem; transform:scale(1,0.9); text-shadow: 1px 1px rgba(0, 0, 0, 0.5); } .customOverlay { display: flex; position: relative; bottom: 50px; box-shadow: 0px 1px 2px #888; background-color: #fff; border-radius: 3px; } .customOverlay-title { font-size: var(--font-size-xs); padding: 0.5rem 1rem; } .customOverlay-close { display: flex; align-items: center; background-color: #2E5171; color: rgba(255,255,255,0.8); border-radius: 0 3px 3px 0; padding: 0 0.5rem; } .customOverlay:after { content:''; display: block; position: absolute; margin-left: -10px; left: 50%; bottom: -8px; width: 20px; height: 8px; background-image: url('/style_www/map_file/vertex_white.png'); background-size: contain; background-position: center top; background-repeat: no-repeat; } .map { height: 45rem; position: relative; } .map > * { position: absolute; top: 0; left: 0; border: 1px solid #ededed; border-radius: var(--basic-radius); } .mapCircle { background: rgba(28, 149, 151, 0.8); width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } @media (max-width: 779.9px){ .mapCircle { width: 32px !important; height: 32px !important; } } .mapCircle span { display: block; padding-top: 0.05em; font-size: 14px; color: #fff; font-weight: bold; } /* .mapCircle.mapCircle_5 { background: rgba(69, 172, 1747, 0.8); } */ .mapCircle.mapCircle_4 { background: rgba(85, 188, 190, 0.8); width: 45px; height: 45px; } .mapCircle.mapCircle_5 { background: rgba(7, 90, 93, 0.9); width: 55px; height: 55px;} .information-wrap { margin-top: 1.5rem; padding: var(--basic-padding); } .information-content > * + *, .contentItem-flex > * + * { margin-top: 1.2rem; } .information-content > * + *.contentItem-hero { margin-top: 3.1rem; } .contentItem-wrap { position: relative; background-color: #fff; border-radius: var(--item-radius); box-shadow: var(--basic-shadow); padding: var(--item-padding); } .dashboard-content .contentItem-wrap { padding: var(--dashboard-padding); } .contentItem-hero { margin-top: 2.2rem; padding-top: 2.2rem; } .contentItem-hero > .contentItem-Title { position: absolute; top: -2rem; left: var(--item-left); background: linear-gradient(to bottom, #2E5171 0%,#1F4164 100%); padding: 0 3rem; border-radius: 2rem; min-width: 14rem; text-align: center; } .contentItem-hero > .contentItem-Title h3 .titleText { display: block; color: #fff; line-height: 4rem; height: 3.8rem; } @media (min-width: 768px){ .contentSection-wrap { display: grid; gap: var(--frame-padding); grid-template-columns: repeat(2, calc(50% - (var(--frame-padding)/2))); } .information-wrap { margin-top: 0; } .map { padding-bottom: 0; height: calc(100% - 5.5rem); } } @media (min-width: 895px){ .contentSection-wrap { grid-template-columns: 38rem calc(100% - 38rem - var(--frame-padding)); } } @media (min-width: 1024px){ .contentSection-wrap { grid-template-columns: 42% calc(58% - var(--frame-padding)); } .contentItem-flex { display: flex; gap: 1.2rem; } } @media (min-width: 1200px){ .information-content > * + *, .contentItem-flex > * + * { margin-top: 1.6rem; } .information-content > * + *.contentItem-hero { margin-top: 3.5rem; } .contentItem-flex { gap: 1.6rem; } } .informationTab-wrap { margin-top: 1.5rem; } .informationTab-wrap .information-wrap { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; } .informationTab-wrap .contentItem-hero { margin-top: 2.5rem; } .informationTab { border-radius: var(--basic-radius) var(--basic-radius) 0 0; background: linear-gradient(to bottom, #2E5171 0%,#1F4164 100%); } .informationTab ul { display: flex; } .informationTab ul li button { display: block; padding: 0.625rem; min-width: 10rem; } .informationTab ul li button span { display: block; padding: 0.8rem 2rem 0.7rem; border-radius: 0.5rem; background-color: rgba(0,0,0,0.5); color: rgba(255,255,255,0.5); font-family: var(--special-font); font-size: var(--font-size-s); } .informationTab ul li button.active { background-color: #F5F8F8; } .informationTab ul li:first-child button.active { border-top-left-radius: calc(var(--basic-radius) - 0.15rem); } .informationTab ul li button.active span { background-color: rgba(0,0,0,0); color: #1D3D61; } @media (min-width: 768px){ .informationTab-wrap { margin-top: 0; } } .contentItem-count { margin-top: 1.5rem; } .contentItem-count .inner { display: inline-block; line-height: 1; } .contentItem-count .inner > * { font-family: var(--special-font); color: #1D3D61; display: inline-block; vertical-align: bottom; line-height: 1; } .contentItem-count .inner { font-size: var(--font-size-xxl); } .contentItem-count .inner em { font-size: 0.7em; font-weight: bold; padding-left: 0.3rem; } @media (min-width: 1200px){ .contentItem-count { margin-top: 2.5rem; } } .contentItem-main-all { background-image: url("/style_www/img/main/building.png"); background-repeat: no-repeat; background-size: contain; background-position: 90% bottom; } .contentItem-main-all .contentItem-count .inner { background: linear-gradient(to bottom, #5bb25f 0%,#4ba64e 71%,#48a44b 100%); border-radius: var(--small-radius); padding: 1rem 1.5rem 0.8rem; text-shadow: 1px 1px rgba(0, 0, 0, 0.2); } .contentItem-main-all .contentItem-count .inner > * { color: #fff; } #facility .contentItem-main-all .contentItem-count .inner { background: linear-gradient(to bottom, #427EF1 0%,#3E77E8 71%,#3D76E2 100%); } .contentItem-donut { margin-top: 1.2rem; } .contentItem-donut .donut { position: relative; margin: auto; width: 130px; height: 130px; border-radius: 50%; transition: 0.3s; background-color: #F0F3F5; box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.08); } .contentItem-donut .donut .donut-text { display: flex; align-items: center; width: 110px; height: 110px; border-radius: 50%; background: #F5F7F7; border: 6px solid #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.08); } .contentItem-donut .donut .donut-text > .inner { width: 100%; } .contentItem-donut .donut .donut-text > .inner i { display: block; width: 28%; margin: auto;} .contentItem-donut .donut .donut-text > .inner .contentItem-count { margin-top: 1rem; } .contentItem-flex > .contentItem-main-group > * + * { margin-top: 1.2rem; } .contentItem-main-cost { background-color: #EFFBF8; } .contentItem-main-save { background-color: #EAEAFF; } .contentItem-main-cost > i, .contentItem-main-save > i { display: block; width: 4rem; position: absolute; right: 1rem; bottom: 1rem; } .contentItem-main-cost > i, .contentItem-main-save > i { display: block; width: 4rem; position: absolute; right: 1rem; bottom: 1rem; } .contentItem-main-collection > i, .contentItem-main-tree > i { display: block; height: calc(100% - 3rem); position: absolute; right: 1rem; bottom: 0rem; } .contentItem-main-collection > i { height: calc(100% - 1.5rem); } .contentItem-main-collection > i > img, .contentItem-main-tree > i > img { height: 100%; } @media (min-width: 1024px){ .contentItem-flex > .contentItem-main-donut { width: 48%; display: flex; flex-flow: column; } .contentItem-flex > .contentItem-main-donut .contentItem-donut { flex: 1; display: flex; } .contentItem-flex > .contentItem-main-group { width: calc(52% - 1.2rem); margin-top: 0; } .contentItem-flex > .contentItem-main-group > * + * { margin-top: 1.2rem; } .contentItem-main-collection > i, .contentItem-main-tree > i { height: calc(100% + 1rem); right: 8%; } .contentItem-main-collection > i { right: 10%; } } @media (min-width: 1200px){ .contentItem-flex > .contentItem-main-group > * + * { margin-top: 1.6rem; } .contentItem-flex > .contentItem-main-group { width: calc(52% - 1.6rem); } .contentItem-donut { margin-top: 2rem; } .contentItem-donut .donut { width: 16rem; height: 16rem; } .contentItem-donut .donut .donut-text { width: 12.5rem; height: 12.5rem; } } /*---- chart ----*/ .customLegend ul { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; } .customLegend ul li { display: flex; align-items: center; gap: 0.7rem; } .customLegend ul li i { display: block; width: 1.3rem; height: 1.3rem; border-radius: 50%; } .customLegend ul li span { display: block; font-size: var(--font-size-s); } .unitLabel { font-size: var(--font-size-xs); color: #7B809A; } .chart-content { position: relative; margin-left: auto; margin-right: auto; } .chart-content canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } /*---- chart ----*/ /*---- byType ----*/ .byType-scale { display: flex; flex-wrap: wrap; } .byType-scale > div { text-align: center; margin-top: 1rem; padding: 0 1rem; width: 100%; } .byType-scale > div + div { border-top: 1px solid #EBEEEE; padding-top: 1.5rem; } .byType-scale > div.byType-scale-doughnut .customLegend ul { justify-content: center; } .byType-scale .contentItem-Title { margin-bottom: 1rem; } .byType-result .chart-wrap .customLegend { padding-top: 2rem; padding-bottom: 1.2rem; } .byType-result .chart-wrap .customLegend #businessResult_legend { margin-top: 0.8rem; } .byType-result .chart-wrap .customLegend ul { justify-content: center; } .byType-result .chart-wrap .byType-result-chart { margin-left: auto; margin-right: auto; max-width: 32rem; } @media (max-width: 767.9px){ .byType-wrap > .contentSection-top { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .byType-wrap > .contentSection-bottom { border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 0.5rem; margin-top: 0; } } @media (min-width: 600px) and (max-width: 767.9px){ .byType-scale > div + div { margin-top: 0; border-top: 0; } .byType-scale > div.byType-scale-doughnut { width: 50%; padding-bottom: 0.5rem; padding-top: 0 } .byType-scale > div.byType-scale-doughnut + div.byType-scale-doughnut { border-left: 1px solid #EBEEEE; } .byType-scale > div.byType-scale-bar { width: 100%; border-top: 1px solid #EBEEEE; margin-top: 0; padding-top: 1.5rem; } } @media (min-width: 768px) and (max-width: 979.9px){ .byType-wrap > .contentSection-bottom { grid-column: 1 / span 2; } } @media (min-width: 980px){ .byType-wrap { row-gap: 0; } .byType-wrap > .map-wrap { grid-row: 1 / span 2; } .byType-wrap > .contentSection-top { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .byType-wrap > .contentSection-bottom { border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 0.5rem; } .byType-scale > div.byType-scale-doughnut { width: 50%; padding-bottom: 0.5rem; padding-top: 0; border-top: 0;} .byType-scale > div.byType-scale-doughnut + div.byType-scale-doughnut { border-left: 1px solid #EBEEEE; } .byType-scale > div.byType-scale-bar { width: 100%; border-top: 1px solid #EBEEEE; margin-top: 0; padding-top: 1.5rem; } .byType-result .chart-wrap { display: flex; } .byType-result .chart-wrap .customLegend { width: 15rem; } .byType-result .chart-wrap .customLegend #businessResult_legend { margin-top: 1.5rem; } .byType-result .chart-wrap .customLegend ul { row-gap: 1.5rem; } .byType-result .chart-wrap .customLegend ul li { width: 100%; } .byType-result .chart-wrap .byType-result-chart { width: calc(100% - 15rem); margin-right: unset; } } @media (min-width: 1200px){ .byType-result { max-width: 58.5rem; margin-left: auto; margin-right: auto; } .byType-result .chart-wrap .customLegend { width: 20rem; } .byType-result .chart-wrap .byType-result-chart { width: calc(100% - 20rem); margin-right: unset; } } @media (min-width: 1280px){ .byType-scale-wrap { padding-left: 0; padding-right: 0; } .byType-scale > div { padding: 0.5rem 1rem 0.7rem; } .byType-scale > div + div { border-left: 1px solid #EBEEEE; border-top: 0} .byType-scale .contentItem-Title { margin-bottom: 1.3rem; } .byType-scale > div.byType-scale-doughnut { width: 32%; padding-bottom: 0; } .byType-scale > div.byType-scale-bar { width: 36%; border-top: 0; margin-top: 1rem; padding-top: 0; } .byType-scale > div.byType-scale-bar .chart-content { height: 170px !important; } } /*---- byType ----*/ /*---- byTarget ----*/ .byTarget-content { padding-left: 0; transition: padding 0.2s cubic-bezier(0.4, 0, 0.6, 1); } .byTarget-wrap { position: relative; } .byTarget-nav { position: absolute; left: calc(0px - var(--frame-padding)); top: 0; z-index: 20; width: 24rem; height: calc(100% + var(--frame-padding)); transform: translateX(-26rem); transition: transform 0.2s cubic-bezier(0.4, 0, 0.6, 1); } .byTarget-content.openNav .byTarget-nav { transform: translateX(0); } .byTarget-nav .byTarget-nav-toggle { transition: opacity 0.3s cubic-bezier(0.4, 0, 0.6, 1); opacity: 1; } .byTarget-nav .inner { position: relative; z-index: 2; width: 100%; height: 100%; border-radius: var(--frame-radius); background-color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } .byTarget-nav-toggle { position: absolute; top: 0; left: calc(100% - 2rem); z-index: 1; background-color: #2D96B3; border-radius: 0 0.8rem 0.8rem 0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); padding-left: 2rem; width: 5.5rem; } .byTarget-nav-toggle i { height: 5rem; color: #fff; font-size: 1.8rem; display: flex; align-items: center; justify-content: center; } .byTarget-nav-toggle i + i { display: none; } @media (min-width: 768px){ .byTarget-nav { transform: translateX(-26.5rem); } } @media (min-width: 1300px){ .byTarget-content { max-width: calc(var(--max-width) + 26.5rem); padding-left: 26.5rem !important; } .byTarget-nav { transform: translateX(-26.5rem) !important; } .byTarget-nav .byTarget-nav-toggle { visibility: hidden; opacity: 0; } } .byTarget-nav-list { padding: 2rem 1.8rem; } .byTarget-nav-list > li > a { display: block; padding: 1rem 0 1rem 3.3rem; position: relative; overflow: hidden; border-radius: var(--small-radius); } .byTarget-nav-list > li > a:before { content: ''; display: block; width: 2rem; height: 2rem; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); background-image: url("/style_www/img/target/icon.png"); background-size: 4rem auto; background-repeat: no-repeat; } .byTarget-nav-list > li > a:after { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #276263; opacity: 0; transition: opacity 0.2s cubic-bezier(0.4, 0, 0.6, 1); } .byTarget-nav-list > li > a:hover::after { opacity: 0.1; } .byTarget-nav-list > li.current > a:hover::after { opacity: 0.5; } .byTarget-nav-list > li:nth-child(1) > a:before { background-position: left top; } .byTarget-nav-list > li:nth-child(2) > a:before { background-position: left -2rem; } .byTarget-nav-list > li:nth-child(3) > a:before { background-position: left -4rem; } .byTarget-nav-list > li:nth-child(4) > a:before { background-position: left -6rem; } .byTarget-nav-list > li.current { background-color: #F5F8F8; border-radius: var(--small-radius); margin-bottom: 1rem; } .byTarget-nav-list > li.current > a { background: linear-gradient(to bottom, #3aa0b1 0%,#2089b5 100%); } .byTarget-nav-list > li.current:nth-child(1) > a:before { background-position: -2rem top; } .byTarget-nav-list > li.current:nth-child(2) > a:before { background-position: -2rem -2rem; } .byTarget-nav-list > li.current:nth-child(3) > a:before { background-position: -2rem -4rem; } .byTarget-nav-list > li.current:nth-child(4) > a:before { background-position: -2rem -6rem; } .byTarget-nav-list > li > a span { font-family: var(--special-font); color: #344767; font-size: 1.6rem; letter-spacing: -0.02em; } .byTarget-nav-list > li.current > a span { color: #fff; } .byTarget-nav-list > li > ul.byTarget-nav-sub { display: none; } .byTarget-nav-list > li.current > ul.byTarget-nav-sub { display: block; } .byTarget-nav-sub > li > ul { display: none; } .byTarget-nav-sub > li.current > ul { display: block; } .byTarget-nav-sub { padding: 1rem 0 1rem; color: #344767; font-size: 1.6rem; font-weight: 500; } .byTarget-nav-sub > li > span, .byTarget-nav-sub > li > a { display: block; position: relative; padding: 0.5rem 0 0.5rem 3.3rem; } .byTarget-nav-sub > li > span:before, .byTarget-nav-sub > li > a:before { content: ''; display: block; width: 0.5rem; height: 0.5rem; border-radius: 50%; position: absolute; left: 1.7rem; top: 50%; transform: translateY(-50%); background-color: #344767; margin-top: -0.02em; } .byTarget-nav-sub > li > a { color: #2D96B3; text-decoration: underline; } .byTarget-nav-sub > li > a:before { background-color: #2D96B3; } .byTarget-nav-sub > li > a:hover { color: #247B93; } .byTarget-nav-sub > li > a:before::hover { background-color: #247B93; } .byTarget-nav-sub > li > ul { font-size: 1.5rem; margin-top: 0.1rem; } .byTarget-nav-sub > li:first-child > ul { margin-bottom: 0.5rem; } .byTarget-nav-sub > li > ul > li > span { display: block; position: relative; padding: 0.3rem 0 0.3rem 4rem; } .byTarget-nav-sub > li > ul > li > span:before { content: ''; display: block; width: 0.5rem; height: 0.2rem; border-radius: 0.1rem; position: absolute; left: 2.4rem; top: 50%; transform: translateY(-50%); background-color: #344767; margin-top: -0.02em; } .noData-wrap, .noneDB-wrap { position: relative; } .noData, .noneDB { display: none; font-size: 1.5rem; color: #555; text-align: center; } .noData-has .noData, .noneDB-has .noneDB { display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,1); z-index: 10; } .noData span, .noneDB span { padding-bottom: 0.5rem; } .noData span:before, .noneDB span:before { content: '\ea2d'; font-family: xeicon !important; display: block; font-size: 2rem; width: 5rem; height: 5rem; line-height: 4.8rem; margin: 0 auto 1rem; color: #2E5171; background-color: #F5F8F8; border-radius: 50%; } .noneDB span:before { content: '\EB96'; color: var(--green-color); background-color: var(--green-color-white); } .nullData-wrap { position: relative; } .nullData { display: none; font-size: 1.5rem; color: #555; text-align: center; } .nullData-wrap .nullData { display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,1); z-index: 10; } .nullData span { padding-bottom: 0.5rem; } .nullData span:before { content: '\EB01'; font-family: xeicon !important; display: block; font-size: 2rem; width: 5rem; height: 5rem; line-height: 5rem; margin: 0 auto 1rem; color: var(--blue-color); background-color: var(--blue-color-white); border-radius: 50%; } .noData-has.nullData-wrap .nullData { opacity: 0; transition: opacity 0.3s cubic-bezier(0.4, 0, 0.6, 1); } .byTarget-table { border: 1px solid #EDF0F0; border-radius: var(--small-radius); overflow: hidden; margin-top: 1rem; } .byTarget-table table { table-layout: fixed; width: 100%; } .byTarget-table table tr + tr > * { border-top: 1px solid #EDF0F0; } .byTarget-table table tr > * { font-size: var(--font-size-m); } .byTarget-table table tr th { border-right: 1px solid #EDF0F0; background-color: #F5F8F8; text-align: left; font-weight: normal; padding: 0.5rem 0 0.5rem 1rem; line-height: 4rem; } .byTarget-table table tr td { text-align: right; padding: 0.5rem 1rem 0.5rem 0; } .yn_icon { display: block; margin-left: auto; height: 3rem; } .byTarget-table-info table colgroup col:first-child { width: 45%; } .byTarget-table-support table colgroup col:first-child { width: 45%; } .byTarget-class-wrap { padding-left: 0; padding-right: 0; padding-bottom: 0; } .byTarget-class-chart > * { position: relative; padding: 1.8rem 1.8rem 1.5rem; } .byTarget-class-chart .unitLabel { position: absolute; top: 1.5rem; left: 1.8rem; } .performanceChart { width: 25rem; max-width: 100%; margin-left: auto; margin-right: auto; background-repeat: no-repeat; background-size: 100%; background-position: center top; } .co2Chart-wrap { border-top: 1px solid #ededed; } .co2Chart { width: 32rem; max-width: 100%; position: relative; text-align: center; margin-left: auto; margin-right: auto; padding-bottom: 1.5rem; } .co2Chart-gauge { position: relative; } .co2Chart-gauge-bg .inner { display: block; width: 8rem; max-width: 25%; position:absolute; top: 100%; left: 50%; transform: translate(-50%, -47%); z-index: 10; } .co2Chart-gaugeNeedle-wrap { position: absolute; left: 50%; bottom: 0; z-index: 10; transform-origin: center bottom; transform: translateX(-50%) rotate(-90deg); width: 0.8rem; height: calc(100% - 5rem); transition: transform 0.5s ease-out; } .co2Chart-gaugeNeedle { height: 100%; background-color: #40596b; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } .co2Chart-gauge-value { margin-top: 2rem; } .co2Chart-gauge-value dl { padding: 0rem 0.5rem; text-align: center; } .co2Chart-gauge-value dl *, .breakEven-value dl * { font-family: var(--special-font); color: #344767; } .co2Chart-gauge-value dl dt, .breakEven-value dl dt { font-size: var(--font-size-xs); } .co2Chart-gauge-value dl dd *, .breakEven-value dl dd * { font-size: var(--font-size-m); } .co2Chart-gauge-value dl dd strong, .breakEven-value dl dd strong{ font-size: 2rem; color: #EB6379; padding-right: 0.5rem; } .byTarget-class-code { background-color: #dcf3ff; text-align: center; padding: 0.8rem 0; } .byTarget-class-code font { font-family: var(--special-font); color: #40596b; font-size: 1.5rem; } /* .byTarget-class-detail { display: flex; } .byTarget-class-detail > * { width: 33.3333333%; } */ .byTarget-class-detail dl { padding: 1.5rem 0 1.2rem; } .byTarget-class-detail dl dt span, .byTarget-class-detail dl dd span, .byTarget-class-detail dl dd strong, .byTarget-class-detail dl dd em{ font-family: var(--special-font); color: #40596b; } .byTarget-class-detail dl + dl { border-top: 1px solid #ededed; } .byTarget-class-detail dl dd { text-align: center; padding-top: 1.5rem; } .byTarget-class-detail dl dt { display: block; text-align: center; } .byTarget-class-detail dl dt span { display: inline-block; background-color: #cdd6e0; font-size: 1.5rem; padding: 0.4rem 1.5rem 0.3rem; border-radius: 2rem; } .byTarget-class-detail dl:first-child dd { display: flex; gap: 1rem; justify-content: center; } .byTarget-class-detail dl:first-child dd div:first-child { opacity: 0.6; } .byTarget-class-detail dl:first-child dd div > span { display: block; font-size: 1.2rem; } .byTarget-class-detail dl:first-child dd i { display: block; width: 1.3rem; padding-top: 1.2rem; } .byTarget-class-detail dl dd > span > * { display: inline-block; } .byTarget-class-detail dl dd strong { font-size: 2rem; line-height: 2rem; letter-spacing: -0.3px;} .byTarget-class-detail dl:first-child dd div:first-child strong { font-size: 1.8rem; } .byTarget-class-detail dl dd em { font-size: 1.2rem; margin-left: 0.3rem; letter-spacing: -0.1px;} .byTarget-class-detail dl + dl dd > span { display: block; } @media (min-width: 640px){ .byTarget-class-chart { display: flex; justify-content: center; } .byTarget-class-chart > * { padding-top: 2.8rem; } .byTarget-class-chart > .performanceChart-wrap { width: 48%; } .byTarget-class-chart > .co2Chart-wrap { width: 52%; display: flex; align-items: flex-end; } .byTarget-class-chart > .co2Chart-wrap { border-top: 0; } .byTarget-class-chart .unitLabel { top: 1rem; } .byTarget-class-code br { display: none; } .byTarget-class-detail { display: flex; } .byTarget-class-detail dl { width: 32%; padding-top: 2rem; } .byTarget-class-detail dl:nth-child(1) { width: 31%; } .byTarget-class-detail dl:nth-child(2) { width: 34%; } .byTarget-class-detail dl:nth-child(3) { width: 35%; } .byTarget-class-detail dl + dl { border-top: 0; border-left: 1px solid #ededed; } .byTarget-class-detail dl + dl dd > span { padding-top: 0.7rem; } } @media (min-width: 1024px) and (max-width: 1199.9px){ .byTarget-class-detail dl + dl dd { padding-top: 1.1rem; } .byTarget-class-detail dl + dl dd > span { padding-top: 0; } .byTarget-class-detail dl:nth-child(n + 2) dd em { display: block; margin-left: 0; } } @media (min-width: 1300px) and (max-width: 1399.9px){ .byTarget-class-detail dl + dl dd { padding-top: 1.1rem; } .byTarget-class-detail dl + dl dd > span { padding-top: 0; } .byTarget-class-detail dl:nth-child(n + 2) dd em { display: block; margin-left: 0; } } @media (min-width: 1024px) and (max-width: 1400px){ .byTarget-class-chart > .performanceChart-wrap { width: calc(100% - 28rem); } .byTarget-class-chart > .co2Chart-wrap { min-width: 28rem; } } @media (min-width: 1600px){ .byTarget-class-detail dl dd strong { font-size: 2.4rem; line-height: 2.4rem; } .byTarget-class-detail dl:first-child dd div:first-child > span strong { font-size: 2rem; } } @media (max-width: 767.9px){ .byTarget-basic > .contentSection-top { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .byTarget-basic > .contentSection-bottom { border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 0.5rem; margin-top: 0; } } @media (min-width: 768px) and (max-width: 1023.9px){ .byTarget-basic > .contentSection-bottom { grid-column: 1 / span 2; } } @media (min-width: 1024px){ .byTarget-basic { row-gap: 0; } .byTarget-basic > .map-wrap { grid-row: 1 / span 2; } .byTarget-basic > .contentSection-top { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .byTarget-basic > .contentSection-bottom { border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 0.5rem; } .byTarget-basic-top { display: flex; gap: 2rem; } .byTarget-basic-top > * { width: calc(50% - 1rem) } .byTarget-basic-top > .contentItem-hero { margin-top: 2.2rem; } .byTarget-table-info table colgroup col:first-child { width: 9.5rem; } .byTarget-table-support table colgroup col:first-child { width: 12rem; } } @media (min-width: 1400px){ .byTarget-table-info table colgroup col:first-child { width: 12rem; } .byTarget-table-support table colgroup col:first-child { width: 14rem; } } .search-error .searchInsert input { border-color: var(--red-color); transition: border 0.3s cubic-bezier(0.4, 0, 0.6, 1); } .search-error .searchInsert button i { color: var(--red-color); transition: color 0.3s cubic-bezier(0.4, 0, 0.6, 1); } .search-error .noData span:before { background-color: var(--red-color-white); color: var(--red-color); transition: background 0.3s cubic-bezier(0.4, 0, 0.6, 1), color 0.3s cubic-bezier(0.4, 0, 0.6, 1); } /*---- byTarget ----*/ /*---- Dumbbell Chart ----*/ .chartDumbbell { position: relative; padding-left: 9rem; } .chartDumbbell-legend { display: flex; align-items: center; height: 2.5rem; margin-bottom: 3rem; } .chartDumbbell-legend .customLegend { width: calc(100% - 9rem); } .chartDumbbell-legend .customLegend ul { justify-content: center; } .chartDumbbell-legend .unitLabel, .chartDumbbell-row .chartDumbbell-label { width: 9rem; font-size: var(--font-size-xs); color: #7B809A; } .chartDumbbell-row { position: relative; } .chartDumbbell-row .chartDumbbell-label { position: absolute; right: 100%; top: 50%; transform: translateY(-50%); } .baseline-wrap { position: absolute; top: 0; left: calc(9rem + 1rem); height: calc(100% - 3rem); width: calc(100% - 9rem - 2rem); } .baseline { position: absolute; height: 100%; width: 1px; border-left: 1px dashed #FFC002; transform: translateX(-50%); } .baseline span { position: absolute; left: 50%; bottom: 100%; font-size: var(--font-size-s); transform: translateX(-50%); color: #FFC002; white-space: nowrap; } .chartDumbbell-line, .chartDumbbell-scale { display: flex; justify-content: space-between; position: relative; } .chartDumbbell-line { height: 4rem; } .chartDumbbell-line span, .chartDumbbell-scale span { display: block; width: 2rem; text-align: center; font-size: var(--font-size-s); } .chartDumbbell-scale span { line-height: 2rem; height: 2rem; margin-top: 1rem; color: #7B809A; white-space: nowrap; } /* .chartDumbbell-scale span font { position: absolute; } */ .chartDumbbell-line span { font-size: 0; text-indent: -99999px; } .chartDumbbell-line span:before { content: ''; display: block; width: 1px; height: 100%; margin-left: auto; margin-right: auto; background-color: #dedede; } .chartDumbbell-line span:last-child::before { display: none; } .chartDumbbell-dot-area, .chartDumbbell-last:before { position: absolute; left: 1rem; width: calc(100% - 2rem); } .chartDumbbell-dot-area { height: 100%; top: 0 } .chartDumbbell-last:before { content: ''; display: block; bottom: 0; height: 1px; background-color: #dedede; } .chartDumbbell-dot { position: absolute; left: 0; top: 50%; z-index: 10; transform: translateY(-50%); height: 2px; background-color: #CFD0D1; } .chartDumbbell-dot i { display: block; position: relative; width: 1.2rem; height: 1.2rem; border-radius: 50%; position: absolute; top: 50%; } .chartDumbbell-dot .before-dot { background-color: rgba(255, 99, 132, 1); left: 0; transform: translate(-50%, -50%);} .chartDumbbell-dot .after-dot { background-color: rgba(54, 162, 235, 1); right: 0; transform: translate(50%, -50%) } .chartDumbbell-dot i:before, .chartDumbbell-dot i:after { visibility: hidden; opacity: 0; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.6, 1); } .chartDumbbell-dot i:before { background-color: rgba(0,0,0,0.8); color: #fff; text-align: center; padding: 3px 1rem; border-radius: 6px; position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 1; font-size: 1.3rem; z-index: 10; transform: translateX(-50%); } .chartDumbbell-dot i::after { content: " "; position: absolute; bottom: 100%; left: 50%; margin-left: -4px; border-width: 4px; border-style: solid; border-color: rgba(0,0,0,0.8) transparent transparent transparent; } .chartDumbbell-dot i:hover::before, .chartDumbbell-dot i:hover::after { visibility: visible; opacity: 1; } .chartDumbbell-dot .before-dot:before { content: attr(data-before); } .chartDumbbell-dot .after-dot:before { content: attr(data-after); } /*---- Dumbbell Chart ----*/ .targetSection { padding: var(--basic-padding); } .target-content { display: flex; gap: 2rem; flex-wrap: wrap; } .target-content > .contentItem-wrap { width: 100%; } .targetSection .contentItem-hero > .contentItem-Title ~ * { margin-top: 1.2rem; } .passiveDoughnut_legend { display: flex; flex-wrap: wrap; gap: 1rem; } .passiveDoughnut { margin-top: 1rem; } @media (min-width: 640px){ .passiveDoughnut { display: flex; justify-content: space-around; } } @media (min-width: 720px){ .passiveDoughnut_legend ul { flex: 1; justify-content: center;} .passiveDoughnut .chart-content { width: 170px !important; height: 170px !important; } } @media (min-width: 1024px) and (max-width: 1564.9px){ .passiveDoughnut-wrap { display: flex; align-items: center; } .passiveDoughnut_legend { display: block; width: 22rem; padding-left: 1rem; } .passiveDoughnut_legend ul { row-gap: 1.8rem; margin-top: 0.8rem; } .passiveDoughnut_legend ul li { width: 100%; } .passiveDoughnut { width: calc(100% - 22rem); } .condensationChart { padding-left: 0.5rem; } } .condensationCheck { margin-top: 2rem; } .condensationCheck .contentItem-Title { height: 2.5rem; margin-bottom: 1rem; text-align: center; } .condensationCheck .contentItem-Title h3 { line-height: 2.5rem; } .condensationCheck ul { background-color: #F5F8F8; border: 1px solid #EDF0F0; border-radius: var(--small-radius); } .condensationCheck ul li { display: flex; align-items: center; justify-content: space-between; height: 5rem; } .condensationCheck ul li span { font-size: var(--font-size-s); color: #7B809A; } .condensationCheck ul li > * { padding: 0 1.5rem; } .condensationCheck-table { background-color: #F5F8F8; border: 1px solid #EDF0F0; border-radius: var(--small-radius); } .condensationCheck-table table { table-layout: fixed; text-align: center; width: 100%; } .condensationCheck-table table th { font-size: var(--font-size-s); font-weight: 400; } .condensationCheck-table table thead tr th { padding: 0.4rem 0; border-right: 1px solid #ededed; } .condensationCheck-table table thead tr th:last-child { border-right: 0; } .condensationCheck-table table tbody tr > * { padding: 0.5rem 0; border-top: 1px solid #ededed; border-right: 1px solid #ededed; } .condensationCheck-table table tbody tr > *:last-child { border-right: 0; } .condensationCheck-table table tbody tr i { display: block; } .condensationCheck-table table .yn_icon { margin-right: auto; height: 2.8rem; } @media (min-width: 640px){ .condensation { display: flex; } .condensationChart { width: 75%; } .condensationCheck { margin-top: 0rem; width: 25%; padding-left: 2rem; } .condensationCheck .contentItem-Title { margin-bottom: 0rem; } .condensationCheck ul { padding: 1rem 0; margin-top: 2rem !important; } .condensationCheck ul li { justify-content: center; } .condensationCheck ul li span { display: none; } .condensationCheck-table table thead tr th:first-child, .condensationCheck-table table tbody tr th { display: none; } } @media (min-width: 1565px){ .targetSection-passive .target-content > .contentItem-wrap { width: calc(47% - 1rem); } .targetSection-passive .target-content > .contentItem-wrap:nth-child(2n) { width: calc(53% - 1rem); } .passiveDoughnut { margin-top: 2.2rem; } } .upgradeItem { display: flex; align-items: center; background-color: #F5F8F8; border: 1px solid #EDF0F0; border-radius: var(--small-radius); padding: 1.2rem var(--basic-padding); } .upgradeItem i { display: block; } .upgradeItem i img { display: block; height: 6rem; margin-left: auto; margin-right: auto; } .upgradeItem dl { padding: 0rem 1.5rem; } .upgradeItem dl * { font-family: var(--special-font); color: #344767; } .upgradeItem dl dt { font-size: var(--font-size-xs); } .upgradeItem dl dd * { font-size: var(--font-size-m); } .upgradeItem dl dd strong { color: #EB6379; padding-right: 0.5rem; } .insulationUpgrade .upgradeItem + .upgradeItem { margin-top: 1rem; } .insulationUpgrade .upgradeItem i { width: 6rem; } .insulationUpgrade .upgradeItem dl { width: calc(100% - 6rem); } .insulationChart, .airTightChart { margin-top: 2rem; } .airTightChart .chartDumbbell { padding-left: 6rem; } .airTightChart .baseline-wrap { left: calc(6rem + 1rem); width: calc(100% - 6rem - 2rem); } .airTightChart .chartDumbbell-row .chartDumbbell-label { width: 6rem; } .airTightChart .chartDumbbell-legend .unitLabel { width: 10rem; } .airTightChart .chartDumbbell .baseline_before span { padding-right: 3.5rem } .airTightChart .chartDumbbell .baseline_after span { padding-left: 3.5rem; } .airTight-grade { margin-top: 2rem; } .airTight-grade .contentItem-Title { height: 2.5rem; text-align: center; } @media (min-width: 640px){ .upgradeItem { display: block; } .upgradeItem > * { width: 100% !important; } .upgradeItem dl { padding-top: 1rem; text-align: center; } .insulationUpgrade { display: flex; gap: 1.5rem; } .insulationUpgrade .upgradeItem { width: calc(33.333333% - 1rem); } .insulationUpgrade .upgradeItem + .upgradeItem { margin-top: 0rem; } .insulationChart, .airTightChart { margin-top: 2.5rem; } } @media (min-width: 768px){ .airTight { display: flex; } .airTight .airTightPerformance { width: 45%; } .airTightChart .chartDumbbell-line { height: 12rem; } .airTight-grade { margin-top: 0; } .airTight .airTight-grade { width: 55%; padding-left: 2rem; } } /* align-items: center; justify-content: space-between; */ .coolingSystem-wrap { margin-top: 1.2rem; } .airConditioning .heatingSystem, .airConditioning .coolingSystem { display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; margin-top: 0.8rem; background-color: #F5F8F8; border: 1px solid #EDF0F0; border-radius: var(--small-radius); padding: 1.2rem 1rem 1rem; } .airConditioning .heatingSystem > * img, .airConditioning .coolingSystem > * img { display: block; width: 90%; margin-left: auto; margin-right: auto; } .airConditioning-before, .airConditioning-after { width: 14rem; max-width: 40%; } .airConditioning-before span, .airConditioning-after span { display: block; text-align: center; color: #7B809A; font-size: var(--font-size-xs); margin-top: 0.5rem; white-space: nowrap; word-spacing: -0.05em; } .airConditioning-arrow { display: block; width: 10rem; max-width: 20%; padding: 1.5rem 1.5rem; } .contentItem-xScroll { padding-left: 0; padding-right: 0; padding-bottom: 0; } .scroll-item { position: relative; } .contentItem-xScroll .scroll-item:before, .contentItem-xScroll .scroll-item:after { content: ''; display: block; width: 1.8rem; height: 100%; position: absolute; top: 0; z-index: 10; } .contentItem-xScroll .scroll-item:before { left: 0; background: linear-gradient(to left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); } .contentItem-xScroll .scroll-item:after { right: 0; background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); } .scroll-item > * { overflow-x: auto; } .illumination-wrap { border-radius: var(--item-radius); overflow: hidden; } .illumination-wrap .illuminationLegend-wrap { display: flex; justify-content: space-between; padding: 0rem 1.8rem 0 } .illumination { display: flex; flex-wrap: nowrap; justify-content: space-around; gap: 1rem; padding: 0rem 1.8rem 2.5rem; } .illumination-item { width: 16.5rem; flex: 0 0 auto; } .illumination-boxplot {padding: 0.5rem 1.8rem 2rem; } .actualCapacity-wrap { border-radius: var(--item-radius); overflow: hidden; } .actualCapacity-wrap .unitLabel { padding: 0rem 1.8rem 0 } .actualCapacity-wrap .unitLabel ul { display: flex; gap: 1rem; } .actualCapacity-select { position: relative; } .actualCapacity-select i { color: var(--basic-color); position: absolute; left: 0.1rem; top: 50%; transform: translateY(-50%); } .actualCapacity-select select { border: 0; border-radius: 0; padding-left: 2.2rem; padding-right: 4rem; border-bottom: 1px solid #E2E2E2; font-size: var(--font-size-m); } .actualCapacity { padding: 0rem 1.8rem 2.5rem; } .actualCapacity-item .chart-wrap { position: relative; } .actualCapacity-unitLabel { font-size: var(--font-size-xs); color: #7B809A; position: absolute; top: 0; left: 0; } @media (max-width: 499.9px){ .airConditioning { display: flex; gap: 1rem; } .airConditioning > * { width: calc(50% - 0.5rem); } .coolingSystem-wrap { margin-top: 0rem; } .airConditioning-before, .airConditioning-after { width: 100%; max-width: 100%; } .airConditioning-arrow { max-width: 50% !important; padding: 1.5rem 1rem; margin-left: auto; margin-right: auto; } .airConditioning-arrow img { rotate: 90deg; } } @media (max-width: 719.9px){ .actualCapacity-wrap .unitLabel ul { margin-top: 1.5rem; margin-bottom: 1.5rem; gap: 0; border: 1px solid #E2E2E2; border-radius: 0.5rem; } .actualCapacity-wrap .unitLabel ul li { text-align: center; flex: 1; padding: 0.6rem 0 0.3rem; } .actualCapacity-wrap .unitLabel ul li + li { border-left: 1px solid #E2E2E2; } .actualCapacity-wrap .unitLabel ul li i { display: none; } .actualCapacity-wrap .unitLabel ul li span { display: block; margin-top: 0.1rem; } } @media (min-width: 720px){ .actualCapacity-wrap .unitLabel { display: flex; align-items: flex-end; justify-content: space-between; } .actualCapacity { padding-top: 1rem } } @media (min-width: 980px) and (max-width: 1564.9px){ .airConditioning { display: flex; gap: 2rem; } .airConditioning > * { width: calc(50% - 1rem); } .coolingSystem-wrap { margin-top: 0; } } @media (min-width: 980px){ .actualCapacity { padding: 1rem 2.2rem 2.5rem; } .illumination-boxplot {padding: 0.5rem 2.2rem 2rem; } } @media (min-width: 1565px){ .targetSection-active .target-content > .contentItem-wrap:nth-child(1) { width: calc(40% - 1rem); } .targetSection-active .target-content > .contentItem-wrap:nth-child(2) { width: calc(60% - 1rem); } } .targetSection-effect .target-content { row-gap: 0; } .targetSection-effect .target-content > * { width: 100%; } .targetSection-effect-first .contentItem-wrap + .contentItem-wrap, .targetSection-effect-second .contentItem-wrap + .contentItem-wrap { margin-top: 4.3rem; } .energyAspect-division { display: block; width: 100%; border-top: 1px dashed #cdcdcd; margin: 0 0 0.8rem; } .energyAspect-table { border: 1px solid #EDF0F0; border-radius: var(--small-radius); overflow: hidden; } .energyAspect-table table { table-layout: fixed; width: 100%; } .energyAspect-table table tr + tr > * { border-top: 1px solid #EDF0F0; } .energyAspect-table table tr > * { font-size: var(--font-size-s); text-align: center; } .energyAspect-table table tr > * + * { border-left: 1px solid #EDF0F0; } .energyAspect-table table tr th { background-color: #F5F8F8; font-weight: normal; padding: 0.5rem 0 0.5rem 1.2rem; } .energyAspect-table table tr td { padding: 0.5rem 1.2rem 0.5rem 0; } .requireAmount { padding: 0 1.8rem 2rem; } .requireAmount .contentItem-Title { margin-bottom: 0.8rem; } .requireAmount-legend { display: flex; align-items: center; height: 2.5rem; margin-bottom: 0.5rem; } .requireAmount-legend .unitLabel { width: 11rem; } .requireAmount-legend .customLegend { width: calc(100% - 11rem); padding-right: 8rem; } .requireAmount-legend .customLegend ul { justify-content: center; } .requireAmount-wrap .energyAspect-table-wrap { padding-left: 3.5rem; padding-right: 0.3rem; margin-top: 0.5rem; } .requireAmount-wrap .energyAspect-table table th, .requireAmount-wrap .energyAspect-table table td { padding-left: 0.5rem; padding-right: 0.5rem; } .useAmount-wrap { display: flex; padding: 0 1.8rem 1.9rem; } .useAmount-wrap .contentItem-Title { margin-top: 1.5rem; } .useAmount-wrap .energyAspect-chart { width: calc(100% - 25rem); padding-right: 1.5rem; } .useAmount-wrap .energyAspect-table-wrap { width: 25rem; padding-top: 1rem; display: flex; align-items: flex-end; padding-bottom: 2.8rem; } .useAmount-wrap .energyAspect-table table colgroup col:first-child { width: 50%; } .useAmount-wrap .energyAspect-table table th { text-align: left; padding-top: 0.65rem; padding-bottom: 0.65rem; } .useAmount-wrap .energyAspect-table table td { text-align: right; } .environmentalAspect-wrap { width: 100%; } .environmentalAspect-legend { display: flex; flex-flow: column-reverse; } .environmentalAspect-legend .customLegend { padding-bottom: 0.8rem; } .environmentalAspect-wrap .upgradeItem-wrap { margin-top: 2rem; } .environmentalAspect-wrap .upgradeItem-wrap .contentItem-Title { margin-bottom: 1rem; } .environmentalAspect-wrap .upgradeItem-wrap .titleText font, .environmentalAspect-wrap .upgradeItem-wrap .titleText font b { font-family: var(--special-font); } .environmentalAspect-wrap .upgradeItem-wrap .titleText font b { font-size: 1.7rem; font-weight: normal; } .environmentalAspect-wrap .upgradeItem-wrap .upgradeItem i img { height: 8.2rem; } .environmentalAspect-wrap .upgradeItem-wrap .upgradeItem dl dd strong { color: #0F953E; font-size: 2rem; } .targetSection-effect-second { margin-top: 2rem; } .userAspect-gauge { background-color: #F5F8F8; border: 1px solid #EDF0F0; border-radius: var(--small-radius); padding: 1.2rem 3rem; } .gauge-wrap { flex: 1; max-width: 22rem; margin-left: auto; margin-right: auto; } .gauge { width: 100%; padding-bottom: 50%; position: relative; text-align: center; margin-left: auto; margin-right: auto; } .gauge-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .gauge-bg .inner { padding: 1.5rem; content: ''; display: block; width: 100%; height: 200%; position: absolute; top: 0; left: 0; border-radius: 50%; background: linear-gradient(90deg, #c5e7e4 0%, #2d7975 100%); } .gauge-bg .inner:before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 100%; border-radius: 50%; background-color: #F5F8F8; box-shadow: 0 0 4px rgba(0,0,0,0.2); } .gauge-numbers { position: absolute; width: 100%; height: 100%; z-index: 3; } .gauge-numbers span { padding-top: 2.5rem; position: absolute; width: 4rem; height: 100%; left: 50%; top: 0px; margin-left: -2rem; transform-origin: 50% bottom; text-align: center; font-size: var(--font-size-xs); } .gauge-numbers span:before { top: 1.5rem; content: ''; display: block; width: 1px; height: 1rem; background-color: #2d7975; position: absolute; left: 50%; transform: translateX(-50%); } .gauge-numbers span.gauge-number:before { width: 2px; } .gauge-numbers span:first-child::before { height: 2.5rem; top: 0; background-color: #c5e7e4; } .gauge-numbers span:last-child::before { height: 2.5rem; top: 0; } .gaugeNeedle-wrap { position: absolute; left: 50%; bottom: 0; z-index: 10; transform-origin: center bottom; transform: translateX(-50%) rotate(-90deg); width: 0.6rem; height: calc(100% - 5rem); transition: transform 0.5s ease-out; } .gaugeNeedle { height: 100%; background-color: #273F40; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } .gaugeNeedle-wrap:after { content: ''; display: block; width: 15px; height: 15px; background: #273F40; border-radius: 50%; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); box-shadow: 0 0 5px rgba(0,0,0,0.3); } .gauge-value { margin-top: 2rem; } .gauge-value dl { padding: 0rem 0.5rem; text-align: center; } .gauge-value dl *, .breakEven-value dl * { font-family: var(--special-font); color: #344767; } .gauge-value dl dt, .breakEven-value dl dt { font-size: var(--font-size-xs); } .gauge-value dl dd *, .breakEven-value dl dd * { font-size: var(--font-size-m); } .gauge-value dl dd strong, .breakEven-value dl dd strong{ font-size: 2rem; color: #EB6379; padding-right: 0.5rem; } .userAspect-chart { margin-top: 2.5rem; } .userAspect-chart .contentItem-Title { display: flex; align-items: center; margin-bottom: 1.5rem; } .userAspect-chart .contentItem-Title .titleText font { font-family: var(--special-font); } .userAspect-chart .chartDumbbell-legend { flex: 1; justify-content: flex-end; margin-bottom: 0; } .userAspect-chart .chartDumbbell-legend .customLegend { width: 100%; } .userAspect-chart .chartDumbbell-legend .customLegend ul { justify-content: flex-end; } .userAspect-chart .chartDumbbell { padding-left: 8rem; } .userAspect-chart .chartDumbbell-row .chartDumbbell-label { width: 8rem; } .userAspect-chart .chartDumbbell-line { height: 3.2rem; } .userAspect-chart .infoText { font-size: var(--font-size-xs); text-align: right; color: #888; margin-top: 1rem; } .breakEven-wrap .contentItem-Title { margin-bottom: 1.2rem; margin-top: 1rem; } .breakEven-legend { margin-bottom: 0.5rem; } .breakEven-wrap .customLegend ul { gap: 0.3rem 1.2rem; } .breakEven-value { margin-top: 1rem; background-color: #F5F8F8; border: 1px solid #EDF0F0; border-radius: var(--small-radius); padding: 1.2rem var(--basic-padding); } .breakEven-value dl { display: flex; align-items: center; gap: 1rem; justify-content: center; } @media (max-width: 719.9px){ .useAmount-wrap { display: block; } .useAmount-wrap > * { width: 100% !important; padding: 0 !important; } } @media (min-width: 720px){ .environmentalAspect-wrap { display: flex; align-items: flex-end; } .environmentalAspect-wrap .environmentalAspect-chart { width: calc(100% - 25rem); padding-right: 1.5rem; } .environmentalAspect-wrap .upgradeItem-wrap { width: 25rem; margin-top: 0; margin-bottom: 2.7rem; } .environmentalAspect-wrap .upgradeItem-wrap .titleText { text-align: center; } .environmentalAspect-wrap .upgradeItem-wrap .titleText font { display: block; padding-top: 0.2rem; } .userAspect { display: flex; } .userAspect-gauge { width: 37%; min-width: 15rem; max-width: 40rem; padding-left: 1rem; padding-right: 1rem; display: flex; align-items: center; } .gauge-bg .inner { padding: 1rem; } .gauge-numbers span { padding-top: 1.5rem; } .gauge-numbers span:before { top: 1rem; height: 0.5rem; } .gauge-numbers span:first-child::before { height: 1.5rem; } .gauge-numbers span:last-child::before { height: 1.5rem; } .gaugeNeedle-wrap { height: calc(100% - 4rem); } .gauge-value { margin-top: 3rem; } .userAspect-chart { flex: 1; margin-top: 0; padding-left: 2rem; } } @media (min-width: 940px) and (max-width: 1299.9px){ .environmentalAspect-wrap { margin-top: 0 !important; } .environmentalAspect-legend { flex-flow: nowrap; } .environmentalAspect-legend .unitLabel { width: 13rem; } .environmentalAspect-legend .customLegend { width: calc(100% - 13rem); padding-right: 2rem; } .environmentalAspect-legend .customLegend ul { justify-content: center; } } @media (min-width: 1565px){ .targetSection-effect-first { max-width: 68rem; } .targetSection-effect-second { max-width: calc(100% - 70rem); margin-top: 0; } } @media (min-width: 1565px) and (max-width: 1610px){ .userAspect-chart .contentItem-Title .titleText font { display: none; } } .boardContainer-section { margin-top: 1.2rem; background-color: #fff; } .boardContainer-section article { padding-left: 0; padding-right: 0; } .boardContainer-section .searchContainer > .inner { border-radius: var(--basic-radius); background-color: #fff; border: 1px solid #ededed; overflow: hidden; } .boardContainer-section .viewContainer { padding-top: 0; padding-bottom: 0; padding-left: 0.5rem; padding-right: 0.5rem; } .boardContainer-section .viewContainer > h3 { padding-top: 0.5rem; padding-bottom: 1rem; } .boardContainer-section .viewContainer .viewContainer-info { padding-bottom: 1.5rem; } .boardContainer-section .viewContainer .gallerySlier-item img { margin-bottom: 0; } @media (min-width: 800.1px){ .boardContainer-section .viewContainer > h3 { font-size: 2.5rem; padding-top: 1rem; } } .userJoin-step ul li, .userPage-full .userCompletion-content { background-color: #fff; } .loginForm-wrap { background-color: transparent !important; } .loginForm-wrap .insertForm-top { padding: 0 0.5rem; margin-bottom: 2rem; } .loginForm { background-color: #fff; padding: 3.5rem 2.5rem; border-radius: var(--small-radius); } .userAgree-group-wrap, .userJoin-wrap { background-color: #fff; padding: 3rem 2.5rem 3.5rem; border-radius: var(--small-radius); } .userJoin-wrap .contentTitle { margin-top: 0; } .asterisk-info { padding-top: 3.2rem !important; padding-right: 2.5rem; } /*--------*/ .userPage, .fullContent-wrap .loginForm-wrap { padding-top: 3rem !important; } .memberLogo { display: block; width: 24rem; margin: 0 auto 4rem; }