@charset "UTF-8";

.main { position:relative; display:flex; justify-content:space-between; padding:60rem 0; }
.main::before {content:''; position:absolute; right:560rem; top:0; width:1px; height:100%; background:#ddd; }
@media all and (max-width:1400px){
    .main {flex-wrap:wrap; padding:40rem 0;}
    .main::before {display:none;}
}

.content { width:calc(100% - 600rem); overflow:hidden; }
@media all and (max-width:1400px){
    .content {width:100%;}
}
.hero-row { display:flex; }
.video-card { position: relative; width:calc(100% - 285rem); height:450rem; margin-right:20rem; background:#000; border-radius:var(--radius); overflow:hidden; }
.video-card video { width: 100%; height: 100%; object-fit: cover; opacity:0.6; }
.video-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.22)); }
.video-card__copy { position: absolute; width:100%; left: 0; top:50%; transform: translateY(-60%); text-align: center; z-index:1; }
.rainbow { width: 232rem; margin: 0 auto -22rem; }
.video-card__copy p { color:#fff; font-size:30rem; font-weight:700; line-height:1.4; margin-top:-30rem; }
.video-card__copy p span {color:#91DAFF;}
.off_play,
.on_play { position: absolute; right: 20rem; bottom: 20rem; z-index: 2; width: 50rem; height: 50rem; background:rgba(0,0,0,0.3) url('../img/main/off_play.png') no-repeat center; border-radius:50%; }
.on_play {background-image:url('../img/main/on_play.png'); }
@media all and (max-width:768px){
    .hero-row {flex-wrap:wrap; }
    .video-card {width:100%; height:auto; margin-right:0; margin-bottom:20rem; }
}
@media all and (max-width:480px){
    .video-card__copy p {font-size:25rem;}
    .off_play, 
    .on_play {width:40rem; height:40rem; }
}

.notice-banner { position:relative; width:265rem; border-radius:var(--radius); }
.notice-banner .swiper {overflow:hidden;}
.notice-banner .swiper img { border-radius:var(--radius);}
.notice-banner .paging { display: flex; align-items: center; }
.notice-banner .timer-bar { position: relative; display: block; width: 100rem; height: 2px; background: rgba(255,255,255,0.2); overflow: hidden; margin:0 12rem; }
.notice-banner .timer-fill { position: absolute; left: 0; top: 0; width: 0%; height: 100%; background:#fff; }
.notice-banner .timer-fill.is-animate { animation: timerBar 5s linear forwards; }
@keyframes timerBar {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
.notice-banner .control { display:flex; align-items:center; position:absolute; left:50%; bottom:25rem; transform:translateX(-50%); z-index:3; }
.notice-banner .control a {display:flex; align-items:center; justify-content:center; width:20rem; height:20rem; }
.notice-banner .control a::before {content:''; display:block; width:8px; height:8px; border-top:2px solid #fff; border-left:2px solid #fff; transform:rotate(-45deg); }
.notice-banner .control a.play { display:none; }
.notice-banner .control a.next {transform:scaleX(-1); }
@media all and (max-width:768px){
    .notice-banner {width:100%; padding-bottom:40rem; }
    .notice-banner .control { bottom:0; }
    .notice-banner .timer-bar { background: rgba(0,0,0,0.2); }
    .notice-banner .timer-fill { background:#444; }
    .notice-banner .control a::before {border-color:#222;}
}

.section { margin-top: 60rem; }
.section-head { display: flex; align-items: end; justify-content: space-between;margin-bottom: 40rem; }
.eyebrow { color: var(--p_color); font-size: 18rem; font-weight: 600; margin-bottom:5rem; }
.section-head h2 { font-size: 27rem; font-weight: 600; line-height:1.3; }
@media all and (max-width:1400px){
    .section { margin-top:40rem;}
}
@media all and (max-width:768px){
    .section-head {flex-wrap:wrap; margin-bottom:30rem;}
    .section-head h2 {font-size:25rem; }
}

.news-section {position:relative;}
.section-actions { display: flex; align-items: center;  }
.tabs { display: flex; align-items: center; font-size: 20rem; margin-right:77rem;}
.tabs::after { content:''; display:block; width:6px; height:6px; border-radius:50%; background:var(--p_color); margin:0 30rem; }
.tabs a { display:flex; align-items:center; color: #999; font-weight:500; }
.tabs a:not(:first-of-type)::before { content:''; display:block; width:1px; height:15px; background:#ccc; margin:0 15rem; }
.tabs .is-active { color:#444; font-weight:600; }
.more-link { position:absolute; right:0; bottom:269rem; display: inline-flex; align-items: center; font-size: 14rem; font-weight: 500; }
.more-link span { position: relative; width: 30rem; height: 30rem; border-radius:10rem; background:#E0EEFF; margin-left:10rem; }
.more-link span::before,
.more-link span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10rem; height: 2rem; border-radius: 99rem; background:var(--p_color); transform: translate(-50%, -50%); }
.more-link span::after { transform: translate(-50%, -50%) rotate(90deg); }
@media all and (max-width:768px){
    .section-actions {width:100%; margin-top:20rem;  }
    .tabs::after {display:none;}
    .more-link {bottom:505rem;}
}


.news-list { display:none; }
.news-list.is-active {display:flex;}
.news-card { position: relative; width:calc((100% - 60rem)/4); margin-left:20rem; padding:30rem 20rem; border-radius:var(--radius); background:#F4F4F4; font-family:var(--pret); }
.news-card:first-of-type {margin-left:0;}
.news-card h3 { display: -webkit-box; min-height: 60rem; margin: 0; overflow: hidden; font-size: 19rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.news-card p { display: -webkit-box; overflow: hidden; font-size: 16rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color:#555; margin:10rem 0 20rem; }
.news-card time { font-size: 15rem; font-weight:300; }
.detail-button { position:absolute; display: inline-flex; align-items: center; height:30rem; border-radius:var(--radius); background: var(--p_color); color:#fff; font-size: 12rem; padding:0 15rem; }
.detail-button::after { content: ""; width: 5rem; height: 5rem; border-top: 2rem solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); margin-left:10rem; }
.news-card .detail-button { position: absolute; right: 20rem; bottom: -25rem; opacity:0; transition:0.3s; }
.news-card:hover .detail-button { bottom:-15rem; opacity:1; }
@media all and (max-width:768px){
    .news-list {flex-wrap:wrap;}
    .news-card {width:calc((100% - 20rem)/2); }
    .news-card:nth-of-type(3),
    .news-card:nth-of-type(4) {margin-top:20rem;}
    .news-card:nth-of-type(3) {margin-left:0;}
}

.safety-list { display:flex; justify-content:space-between;}
.safety-card { position: relative; padding:40rem 50rem 0 30rem; width:calc((100% - 60rem)/3); height:300rem; border-radius:var(--radius); color:#fff; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.safety-card:hover { box-shadow: var(--shadow); }
.safety-card h3 { font-size: 20rem; font-weight: 600; margin-bottom:15rem; }
.safety-card p { font-size:16rem; font-family:var(--pret);}
.safety-card-1 {background:#3581E5;}
.safety-card-2 {background:#2E4CC7;}
.safety-card-3 {background:#1E3592;}
.safety-label { position: absolute; display:flex; align-items:center; justify-content:flex-end; right: 0; top: 0; width: 130rem; height: 40rem; background:#fff; font-size: 12rem; font-weight: 600; text-transform:uppercase; border-radius:0 0 0 10rem; z-index:1; }
.safety-label div { position:absolute; width:10rem; height:10rem; }
.safety-label div {background:#fff;}
.safety-label div::before {content:''; position:absolute; left:0; top:0; width:100%; height:100%; border-radius:0 10rem 0 0;}
.safety-label div.mask1 { left:-10rem; top:0;}
.safety-label div.mask2 {right:0; bottom:-10rem;}
.safety-label-1::before { left:-10rem; top:0; background:#3581E5;}
.safety-label-1 {color:#3581E5;}
.safety-label-2 {color:#2E4CC7;}
.safety-label-3 {color:#1E3592;}
.safety-label-1 div::before {background:#3581E5;}
.safety-label-2 div::before {background:#2E4CC7;}
.safety-label-3 div::before {background:#1E3592;}
.safety-icon { position: absolute; right: 20rem; bottom: 20rem; width: 100rem; height: 100rem; }
.round-arrow { position: absolute; left: 30rem; bottom: 20rem; width: 40rem; height: 40rem; background:#5172F5 url('../img/main/arrow.png') no-repeat center; border-radius:50%; transition:ease-in-out 0.3s; }
.round-arrow-1 { background-color:#1755A7; }
.safety-card:hover .round-arrow { background-color:rgba(0,0,0,0.3); }
@media all and (max-width:768px){
    .safety-list {flex-wrap:wrap; }
    .safety-card { width:100%; margin-top:20rem; padding:40rem 140rem 80rem 30rem; height:auto;}
    .safety-card:first-of-type {margin-top:0;}
}


.quick { position:relative; width:520rem; }
.quick > .sticky { position:sticky; top:30rem; overflow:hidden;  }
.quick h2 { margin-bottom:25rem; font-size: 28rem; font-weight: 600; }
.plant-card { font-family:var(--pret); margin-bottom:30rem; display: flex; justify-content:space-between; align-items: center; }
.plant-card h3 { font-size:23rem; line-height:1.3; }
.plant-card h3 span {color:var(--p_color);}
.plant-card p {   margin:5rem 0 15rem; }
.plant-card .detail-button { position:relative; }
.plant-card img { flex-shrink:0; width: 210rem; height: 150rem; border-radius: 0 0 34rem 0; object-fit: contain; object-position: center; filter: saturate(1.03); }
@media all and (max-width:1400px){
    .quick { width:100%; margin-top:40rem; }
    .quick .sticky {display:flex; flex-wrap:wrap; justify-content:space-between; }
    .quick .sticky > *:not(h2) {width:calc((100% - 80rem)/3); }
    .quick h2 { width:100% !important; }
}
@media (max-width:1400px) and (min-width:769px){
    .quick .sticky > *:not(h2) {margin-bottom:0; }
    .plant-card { position:relative; align-items:stretch; padding:30rem 0; }
    .plant-card img { position:absolute; right:0; bottom:30rem; z-index:-1; }
}
@media all and (max-width:768px){
    .quick .sticky > *:not(h2) {width:100%; }
}

.status-card,
.weather-card { position:relative; margin-bottom:30rem; padding:30rem; border-radius:var(--radius);  background:#E0EEFF; }
.status-card h3,
.weather-card h3 { font-size: 18rem; font-weight:500; margin-bottom:20rem; }
.status-card .control a { position:absolute; left:30rem; top:50%; display:flex; align-items:center; justify-content:center; width:30rem; height:30rem; border-radius:50%; background:#C3DCFA; border-radius:50%; transform:translateY(-50%); z-index:3; }
.status-card .control a.next {left:auto; right:30rem; transform:translateY(-50%) scaleX(-1); }
.status-card .control a::before {content:''; display:block; width:6rem; height:6rem; border-top:2px solid #666; border-left:2px solid #666; transform:rotate(-45deg); margin-left:3rem; border-radius:2rem; }
.status-card .swiper {overflow:hidden;}
.gauge { position:relative; }
.gauge_graph { position:relative; margin:0 auto; width:270rem; height:135rem; border-radius:135rem 135rem 0 0; background:conic-gradient(
    from 270deg at 50% 100%, #355CFA 0deg 45deg, #2AD772 45deg 90deg, #FAB32F 90deg 135deg, #F44949 135deg 180deg, transparent 180deg 360deg); }
.gauge_graph::before {content:''; position:absolute; left:50%; bottom:0; width:120rem; height:60rem; border-radius:60rem 60rem 0 0; background:#E0EEFF; transform:translateX(-50%); }
.gauge__label { position: absolute; left:50%; z-index: 1; color:#fff; font-size: 18rem; }
.gauge__label--normal { margin-left:-105rem; bottom:22rem; }
.gauge__label--watch { margin-left:-55rem; top:30rem; }
.gauge__label--warn { margin-left:25rem; top:30rem; }
.gauge__label--danger { margin-left:75rem; bottom:22rem; }
.gauge::before {content:''; position:absolute; left:50%; bottom:0; width:100px; height:50px; background:url('/design2026/gersi/img/main/state1.png') no-repeat center/cover; transform:translateX(-50%); z-index:2; }
.gauge2::before {background-image:url('/design2026/gersi/img/main/state2.png');}
.gauge3::before {background-image:url('/design2026/gersi/img/main/state3.png');}
.gauge4::before {background-image:url('/design2026/gersi/img/main/state4.png');}
.status-note { font-family:var(--pret); font-size:18rem; text-align:center; line-height:1.4; margin-top:20rem; }
.status-note span { background:var(--p_color); font-size:20rem; padding:3rem 10rem; color:#fff; border-radius:5rem;  }
@media (max-width:1400px) and (min-width:769px){
    .status-card .control a {left:10rem;}
    .status-card .control a.next {right:10rem;}
    .gauge::before {width:70px; height:30px; }
    .gauge_graph { width:168px; height:84px; border-radius:84px 84px 0 0;}
    .gauge_graph::before {width:60px; height:30px; border-radius:30px 30px 0 0;}
    .gauge__label {font-size:16px; }
    .gauge__label--normal {margin-left: -75rem;bottom: 8rem;}
    .gauge__label--watch {margin-left: -39rem;top:20rem;}
    .gauge__label--warn { margin-left:10rem; top:20rem; }
    .gauge__label--danger {margin-left: 41rem;bottom: 8rem;}
}
@media all and (max-width:480px){
    .status-card,
    .weather-card { padding:20rem; }
    .status-card .control a {left:20rem;}
    .status-card .control a.next {right:20rem;}
}


.weather-card { background:#F4F4F4; margin-bottom:0; }
.weather-card__head { display: flex; flex-wrap:wrap; justify-content: space-between; margin-bottom:20rem;}
.weather-card h3 { margin-bottom:0; }
.weather-card__head p { font-weight:300; font-size: 13rem; white-space: nowrap; margin-top:5rem; }

.weather-list { display:flex; justify-content:space-between; }
.weather-list li { position:relative; width:calc((100% - 60rem)/4); padding:20rem 0; }
.weather-list li:not(:first-of-type)::before { content:''; position:absolute; left:-20rem; top:0; width:1px; height:100%; background:#000; opacity:0.1; }
.weather-list span { margin-left:5rem; font-size: 15rem; }
.weather-list strong { display: block; font-size: 23rem; font-weight: 700; margin-top:15rem; }
@media all and (max-width:1400px){
    .weather-list { flex-wrap:wrap; }
    .weather-list strong {margin-top:5rem; }
}
@media (max-width:1400px) and (min-width:769px){
    .weather-list {height:calc(100% - 50rem); }
    .weather-list li { width:50%; padding:0; align-content:center; }
    .weather-list li::before {display:none;}
    .weather-list strong {margin-top:5rem; }
}
@media all and (max-width:480px){
    .weather-list li { width:50%; padding:10rem 0; }
    .weather-list li:nth-of-type(3)::before {display:none;}
}