:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.ClearNight01{
    background-image: url('../assects/svg/Solid/ClearNight01.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.ClearNight02{
    background-image: url('../assects/svg/Solid/ClearNight02.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.ClearNight03{
    background-image: url('../assects/svg/Solid/ClearNight03.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.Cloudy01{
    background-image: url('../assects/svg/Solid/Cloudy01.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.Cloudy02{
    background-image: url('../assects/svg/Solid/Cloudy02.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.Drizzle{
    background-image: url('../assects/svg/Solid/Drizzle.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.Fog{
    background-image: url('../assects/svg/Solid/Fog.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.Haze{
    background-image: url('../assects/svg/Solid/Haze.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.HeavyRain{
    background-image: url('../assects/svg/Solid/HeavyRain.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.PartlyCloudy{
    background-image: url('../assects/svg/Solid/PartlyCloudy.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.PartlyCloudyNight{
    background-image: url('../assects/svg/Solid/PartlyCloudyNight.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.Rain01{
    background-image: url('../assects/svg/Solid/Rain01.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.Rain02{
    background-image: url('../assects/svg/Solid/Rain02.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.SnowAndRain{
    background-image: url('../assects/svg/Solid/SnowAndRain.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.Snowfall01{
    background-image: url('../assects/svg/Solid/Snowfall01.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.Snowfall02{
    background-image: url('../assects/svg/Solid/Snowfall02.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.Sunny{
    background-image: url('../assects/svg/Solid/Sunny.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.Thunderstorm{
    background-image: url('../assects/svg/Solid/Thunderstorm.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.Thunderstorm02{
    background-image: url('../assects/svg/Solid/Thunderstorm02.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.Windy{
    background-image: url('../assects/svg/Solid/Windy.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.Thermometer{
    background-image: url('../assects/svg/Solid/Thermometer.svg');
}


.item .ico.temp{
    background-image: url('../assects/svg/Line/Thermometer.svg');
}
.item .ico.sunny{
    background-image: url('../assects/svg/Line/Sunny.svg');
}
.item .ico.wind{
    background-image: url('../assects/svg/Line/Windy.svg');
}
.item .ico.fog{
    background-image: url('../assects/svg/Line/Fog.svg');
}
.item .ico.eye{
    background-image: url('../assects/svg/Line/Eye.svg');
}
.item .ico.meter{
    background-image: url('../assects/svg/Line/Meter.svg');
}
.item .ico.rain{
    background-image: url('../assects/svg/Line/Rain02.svg');
}
.item .ico.warn{
    background-image: url('../assects/svg/Line/Warn.svg');
}
.item .ico.cloudy{
    background-image: url('../assects/svg/Line/Cloudy02.svg');
}
.forecast .ico.rain{
    background-image: url('../assects/svg/Solid/Rain01.svg');
}


section .wrapper.warn-dur{
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}
section .wrapper .label :is(.warn, .alarm) .rain{
    -webkit-mask: url('../assects/svg/warn/rainstrom.svg') no-repeat center;
    mask: url('../assects/svg/warn/rainstrom.svg') no-repeat center;
    mask-size: 1.2rem 1.2rem;
}
section .wrapper .label :is(.warn, .alarm) .air{
    -webkit-mask: url('../assects/svg/warn/air.svg') no-repeat center;
    mask: url('../assects/svg/warn/air.svg') no-repeat center;
    mask-size: 1.2rem 1.2rem;
}
section .wrapper .label :is(.warn, .alarm) .fire{
    -webkit-mask: url('../assects/svg/warn/fire.svg') no-repeat center;
    mask: url('../assects/svg/warn/fire.svg') no-repeat center;
    mask-size: 1.2rem 1.2rem;
}
section .wrapper .label :is(.warn, .alarm) .flood{
    -webkit-mask: url('../assects/svg/warn/flood.svg') no-repeat center;
    mask: url('../assects/svg/warn/flood.svg') no-repeat center;
    mask-size: 1.2rem 1.2rem;
}
section .wrapper .label :is(.warn, .alarm) .fog{
    -webkit-mask: url('../assects/svg/warn/fog.svg') no-repeat center;
    mask: url('../assects/svg/warn/fog.svg') no-repeat center;
    mask-size: 1.2rem 1.2rem;
}
section .wrapper .label :is(.warn, .alarm) .frost{
    -webkit-mask: url('../assects/svg/warn/forst.svg') no-repeat center;
    mask: url('../assects/svg/warn/forst.svg') no-repeat center;
    mask-size: 1.2rem 1.2rem;
}
section .wrapper .label :is(.warn, .alarm) .heat{
    -webkit-mask: url('../assects/svg/warn/heat.svg') no-repeat center;
    mask: url('../assects/svg/warn/heat.svg') no-repeat center;
    mask-size: 1.2rem 1.2rem;
}
section .wrapper .label :is(.warn, .alarm) .snow{
    -webkit-mask: url('../assects/svg/warn/snow.svg') no-repeat center;
    mask: url('../assects/svg/warn/snow.svg') no-repeat center;
    mask-size: 1.2rem 1.2rem;
}
section .wrapper .label :is(.warn, .alarm) .thunder{
    -webkit-mask: url('../assects/svg/warn/thunderstrom.svg') no-repeat center;
    mask: url('../assects/svg/warn/thunderstrom.svg') no-repeat center;
    mask-size: 1.2rem 1.2rem;
}
section .wrapper .label :is(.warn, .alarm) .warn{
    -webkit-mask: url('../assects/svg/warn/warn.svg') no-repeat center;
    mask: url('../assects/svg/warn/warn.svg') no-repeat center;
    mask-size: 1.2rem 1.2rem;
}
section .wrapper .label :is(.warn, .alarm) .wave{
    -webkit-mask: url('../assects/svg/warn/wave.svg') no-repeat center;
    mask: url('../assects/svg/warn/wave.svg') no-repeat center;
    mask-size: 1.2rem 1.2rem;
}
section .wrapper .label :is(.warn, .alarm) .wind{
    -webkit-mask: url('../assects/svg/warn/wind.svg') no-repeat center;
    mask: url('../assects/svg/warn/wind.svg') no-repeat center;
    mask-size: 1.2rem 1.2rem;
}
section .wrapper .label :is(.warn, .alarm) .landslide{
    -webkit-mask: url('../assects/svg/warn/landslide.svg') no-repeat center;
    mask: url('../assects/svg/warn/landslide.svg') no-repeat center;
    mask-size: 1.2rem 1.2rem;
}
section .wrapper .label :is(.warn, .alarm) .windTC{
    -webkit-mask: url('../assects/svg/warn/wind.svg') no-repeat center;
    mask: url('../assects/svg/warn/wind.svg') no-repeat center;
    mask-size: 1.2rem 1.2rem;
}


.item .wea.unknown{
    background-image: url('../assects/img/weather/unknown.png');
}
.item .wea.sun{
    background-image: url('../assects/img/weather/sun.png');
}
.item .wea.hot{
    background-image: url('../assects/img/weather/hot.png');
}
.item .wea.cloud{
    background-image: url('../assects/img/weather/cloud.png');
}
.item .wea.cloud-sun{
    background-image: url('../assects/img/weather/cloud-sun.png');
}
.item .wea.cloud-hot{
    background-image: url('../assects/img/weather/cloud-hot.png');
}
.item .wea.sun-cloud{
    background-image: url('../assects/img/weather/sun-cloud.png');
}
.item .wea.hot-cloud{
    background-image: url('../assects/img/weather/hot-cloud.png');
}
.item .wea.cloud-srain{
    background-image: url('../assects/img/weather/cloud-srain.png');
}
.item .wea.cloud-mrain{
    background-image: url('../assects/img/weather/cloud-mrain.png');
}
.item .wea.cloud-lrain{
    background-image: url('../assects/img/weather/cloud-lrain.png');
}
.item .wea.sun-srain{
    background-image: url('../assects/img/weather/sun-srain.png');
}
.item .wea.sun-mrain{
    background-image: url('../assects/img/weather/sun-mrain.png');
}
.item .wea.sun-lrain{
    background-image: url('../assects/img/weather/sun-lrain.png');
}
.item .wea.hot-srain{
    background-image: url('../assects/img/weather/hot-srain.png');
}
.item .wea.hot-mrain{
    background-image: url('../assects/img/weather/hot-mrain.png');
}
.item .wea.hot-lrain{
    background-image: url('../assects/img/weather/hot-lrain.png');
}
.item .wea.srain-cloud{
    background-image: url('../assects/img/weather/srain-cloud.png');
}
.item .wea.mrain-cloud{
    background-image: url('../assects/img/weather/mrain-cloud.png');
}
.item .wea.lrain-cloud{
    background-image: url('../assects/img/weather/lrain-cloud.png');
}
.item .wea.srain{
    background-image: url('../assects/img/weather/srain.png');
}
.item .wea.mrain{
    background-image: url('../assects/img/weather/mrain.png');
}
.item .wea.lrain{
    background-image: url('../assects/img/weather/lrain.png');
}
.item .wea.srain-sun{
    background-image: url('../assects/img/weather/srain-sun.png');
}
.item .wea.mrain-sun{
    background-image: url('../assects/img/weather/mrain-sun.png');
}
.item .wea.lrain-sun{
    background-image: url('../assects/img/weather/lrain-sun.png');
}
.item .wea.srain-hot{
    background-image: url('../assects/img/weather/srain-hot.png');
}
.item .wea.mrain-hot{
    background-image: url('../assects/img/weather/mrain-hot.png');
}
.item .wea.lrain-hot{
    background-image: url('../assects/img/weather/lrain-hot.png');
}

section .wrapper .label.lv1{
    background: #135e6c;
    color: #00d9ff;
}
section .wrapper .label.lv2{
    background: #5e5e16;
    color: #fae757;
}
section .wrapper .label.lv3{
    background: #751616;
    color: #f8a0a0;
}
section .wrapper .label.lv4{
    background: #491561;
    color: #d67fff;
}
section .wrapper .label.lv5{
    background: #000;
    border: solid .0625rem #FFF;
}

section .wrapper .label.lv0:has(.alarm){
    background: #135e6c;
    color: #00d9ff;
}
section .wrapper .label.lv1:has(.alarm){
    background: #5e5e16;
    color: #fae757;
}
section .wrapper .label.lv2:has(.alarm){
    background: #774a15;
    color: #ffc485;
}
section .wrapper .label.lv3:has(.alarm){
    background: #751616;
    color: #f8a0a0;
}

section .wrapper .label.lv1 .warn .bg{
    background: #00d9ff;
}
section .wrapper .label.lv2 .warn .bg{
    background: #f3e30a;
}
section .wrapper .label.lv3 .warn .bg{
    background: #fa2020;
}
section .wrapper .label.lv4 .warn .bg{
    background: #a207ea;
}
section .wrapper .label.lv5 .warn .bg{
    background: #FFF;
}

section .wrapper .label.lv0 .alarm .bg{
    background: #00d9ff;
}
section .wrapper .label.lv1 .alarm .bg{
    background: #f3e30a;
}
section .wrapper .label.lv2 .alarm .bg{
    background: #fa9420;
}
section .wrapper .label.lv3 .alarm .bg{
    background: #fa2020;
}

section .wrapper .label.lv1 .warn .ico-warn{
    background: #000;
}
section .wrapper .label.lv2 .warn .ico-warn{
    background: #000;
}
section .wrapper .label.lv3 .warn .ico-warn{
    background: #FFF;
}
section .wrapper .label.lv4 .warn .ico-warn{
    background: #FFF;
}
section .wrapper .label.lv5 .warn .ico-warn{
    background: #000;
}
section .wrapper .label.lv5{
    padding: .0625rem .1875rem;
}
section .wrapper .label.lv5 .warn{
    animation: dangerFlicker 2s linear infinite;
}

section .wrapper .label.lv0 .alarm .ico-alarm{
    background: #000;
}
section .wrapper .label.lv1 .alarm .ico-alarm{
    background: #000;
}
section .wrapper .label.lv2 .alarm .ico-alarm{
    background: #FFF;
}
section .wrapper .label.lv3 .alarm .ico-alarm{
    background: #FFF;
}

section .wrapper .label .ico-warn.upgrade{
    position: relative;
    margin-left: .25rem;
    width: 1.25rem;
    height: 1.25rem;
    text-align: center;
    animation: flicker 2s linear infinite;
}
section .wrapper .label .ico-warn.upgrade .bg{
    height: 1.2rem;
    -webkit-mask: url('../assects/svg/Solid/Upgrade.svg') no-repeat center;
    mask: url('../assects/svg/Solid/Upgrade.svg') no-repeat center;
    mask-size: 1.2rem 1.2rem;
}
section .wrapper .label .ico-warn.upgrade div{
    position: absolute;
    top: 0;
    left: 0;
    width: 1.2rem;
    height: 1.2rem;
}
section .wrapper .label .ico-warn.upgrade .upd-lev{
    color: #000;
    font-weight: 500;
    font-size: .8rem;
    top: .375rem;
}


section .wrapper .label .ico-warn.upgrade.lv2 .bg{
    background: #f3e30a;
}
section .wrapper .label .ico-warn.upgrade.lv3 .bg{
    background: #fa2020;
}
section .wrapper .label .ico-warn.upgrade.lv4 .bg{
    background: #a207ea;
}
section .wrapper .label .ico-warn.upgrade.lv5 .bg{
    background: #000;
}

section .wrapper .label .ico-warn.upgrade.lv2 .upd-lev{
    color: #000;
}
section .wrapper .label .ico-warn.upgrade.lv3 .upd-lev{
    color: #FFF;
}
section .wrapper .label .ico-warn.upgrade.lv4 .upd-lev{
    color: #FFF;
}
section .wrapper .label .ico-warn.upgrade.lv5 .upd-lev{
    color: #fff;
}

.no-warning{
    display: flex;
    justify-content: center;
    width: 100%;
}
.timedur, .timedur tr > *:not(.time, .title-time, .session-lv){
    border: solid 1px #fff;
}
.timedur thead tr:nth-child(3){
    border-bottom: double 5px #fff;
}
.timedur, .timedur tr > *{
    padding: .25rem 0;
}
.timedur .title{
    background: #fff1;
    text-align: left;
    padding-left: .25rem;
}
.timedur .title-date{
    background: #fff1;
    padding: .25rem;
}
.timedur .date{
    background: #fff1;
    text-align: center;
}
.timedur .date .sun{
    color: #ff6363;
}
.timedur .date .sat{
    color: #63aaff;
}
.timedur .date > span{
    display: inline-flex;
    width: 0;
    white-space: nowrap;
    justify-content: center;
    vertical-align: inherit;
    line-height: 0;
}
.timedur .date span .long-unit{
    font-size: .7rem;
    transform: none;
}
.en .timedur .date span .long-unit{
    font-size: .8rem;
}
.timedur .title-time{
    background: #fff1;
    padding: .25rem;
}
.timedur .time{
    background: #fff1;
    min-width: 1.5rem;
    text-align: center;
    border-bottom: solid 1px #fff;
}
.timedur .time span{
    display: flex;
    width: 0;
    height: 1rem;
    line-height: 1;
    justify-content: center;
}
.timedur .type-name{
    background: #fff1;
    padding: .25rem;
    min-width: 4rem;
    max-width: 6rem;
}
.timedur .type-name .subtype{
    display: inline-flex;
    margin-right: .4rem;
}
.timedur .type .session-lv:not(:first-child){
    border-left: solid 1px #fff6;
}
.timedur .type:not(:first-child) .session-lv{
    border-top: solid 1px #fffb;
}
.timedur .type .session-lv span{
    display: flex;
    height: .8rem;
    transition: .3s;
}
.timedur .type .lv1 span{
    background: #125966;
}
.timedur .type .lv2 span{
    background: #ffea28cc;
}
.timedur .type .lv3 span{
    background: #e33030dd;
}
.timedur .type .lv4 span{
    background: #931fc9dd;
}
.timedur .type .lv5 span{
    background: #000000;
    border-top: solid .0625rem #fff;
    border-bottom: solid .0625rem #fff;
    height: .675rem;
}
.timedur .type .lv1 span:hover{
    background: #04badb;
}
.timedur .type .lv2 span:hover{
    background: #ffe927;
}
.timedur .type .lv3 span:hover{
    background: #e33030;
}
.timedur .type .lv4 span:hover{
    background: #931fc9;
}
.timedur .type .lv5 span:hover{
    background: #8c8c8c;
}


.index .idx{
    display: inline-block;
    height: 1.75rem;
    width: 1.75rem;
    background-size: 1.75rem;
}
.index .idx.laundry{
    background-image: url('../assects/img/index/laundry.png');
}
.index .idx.umbrella{
    background-image: url('../assects/img/index/umbrella.png');
}
.index .idx.uv{
    background-image: url('../assects/img/index/uv.png');
}
.index .idx.clothes{
    background-image: url('../assects/img/index/clothes.png');
}
.index .idx.beer{
    background-image: url('../assects/img/index/beer.png');
}
.index .idx.flu{
    background-image: url('../assects/img/index/flu.png');
}
.index .idx.ice{
    background-image: url('../assects/img/index/ice.png');
}


.index .idx.laundry-none{
    background-image: url('../assects/img/index/laundryNone.png');
}
.index .idx.umbrella-none{
    background-image: url('../assects/img/index/umbrellaNone.png');
}
.index .idx.uv-none{
    background-image: url('../assects/img/index/uvNone.png');
}
.index .idx.clothes-none{
    background-image: url('../assects/img/index/clothesNone.png');
}
.index .idx.beer-none{
    background-image: url('../assects/img/index/beerNone.png');
}
.index .idx.flu-none{
    background-image: url('../assects/img/index/fluNone.png');
}
.index .idx.ice-none{
    background-image: url('../assects/img/index/iceNone.png');
}


.index .idx.laundry-half{
    background-image: url('../assects/img/index/laundryHalf.png');
}
.index .idx.umbrella-half{
    background-image: url('../assects/img/index/umbrellaHalf.png');
}
.index .idx.uv-half{
    background-image: url('../assects/img/index/uvHalf.png');
}
.index .idx.clothes-half{
    background-image: url('../assects/img/index/clothesHalf.png');
}
.index .idx.beer-half{
    background-image: url('../assects/img/index/beerHalf.png');
}
.index .idx.flu-half{
    background-image: url('../assects/img/index/fluHalf.png');
}
.index .idx.ice-half{
    background-image: url('../assects/img/index/iceHalf.png');
}

@keyframes flicker{
    0%{opacity: 1;}
    30%{opacity: 0;}
    60%{opacity: 1;}
    100%{opacity: 1;}
}
@keyframes dangerFlicker{
    0%{opacity: 1;}
    29%{opacity: 1;}
    30%{opacity: 0;}
    59%{opacity: 0;}
    60%{opacity: 1;}
    100%{opacity: 1;}
}