body{padding: 0; margin: 0; background-color: #ffffff;}
.layout-all-box{width:100vw; height: 100vh; display: flex; align-items: center; overflow-x: hidden;}
.layout-all{width: 100%; height: 520px; text-align:center; margin: 0 auto; display: flex;}
/* .layout-all{width: 100%; height: 550px; overflow: hidden;} */
.main-img-wrap{height: 100%; position: relative; padding-left: .4rem;}
.main-img-wrap a{position: absolute; left: 1.2rem; top: .9rem; background: url(./../images/gnb_logo.png) no-repeat; background-size: 70%; width: 250px; height: 2.7rem;}
.main-img-wrap img{height: 100%; 
  /* width: 100%; height: 100%; object-fit: contain; */
}
.main-alarm-wrap{display: flex; flex-wrap: wrap; gap: .4rem; }
.alarm-box{display: flex; align-items: center; flex-direction: column; justify-content: flex-end; border: .1rem solid #dce2ec; color: #222222; word-break: break-all; word-break: keep-all; font-size: 1.4rem; text-align: center; border-radius: .4rem;}
.main-alarm-wrap .alarm-box{width: calc(100% / 19 - .29rem); }


.alarm-box{height: calc(100% / 3 - .5rem); }
.main-alarm-wrap .alarm-box.on{background-color: #ff4c51; border: .1rem solid #ee3e44; color: #fff;}
.main-alarm-wrap .alarm-box.on{animation: blink-effect 1s infinite;}
@keyframes blink-effect {
  50% {
    opacity: .85;
  }
}
.main-alarm-wrap .alarm-box{background-image:linear-gradient(#dfe8f7, #d4e0f5)}
.main-alarm-wrap .alarm-box.on{background-image:linear-gradient(#ff4c51, #e41e24)}
.main-alarm-wrap .alarm-box .icon, .main-alarm-wrap .alarm-box .date, .main-alarm-wrap .alarm-box.on .count-box, .alarm-box.on .count-line{display: none; }
.main-alarm-wrap .alarm-box.on .icon, .main-alarm-wrap .alarm-box.on .date{display: inline-block; }
.main-alarm-wrap .alarm-box.on .count{display: none; }
.main-alarm-wrap .alarm-box.on{position: relative;}
.main-alarm-wrap .alarm-box.on .icon{display: inline-block; position: absolute; right: 3px; top: 3px; margin: 0 0 .3rem 0; background: url(./../images/icon_alarm.svg) no-repeat; width: 1.3rem; height: 1.3rem; text-align: center;}
.alarm-box.on .date{margin-bottom: .6rem; margin-top: .3rem; font-size: 67%;}
.alarm-box .count{margin-top: .4rem; color: #50535e;}
.alarm-box .text{display: table;  width: 100%; text-align: center; font-weight: bold; font-size: 70%; line-height: 1.1;
min-height: 37%; min-height: 85px;
}
.alarm-box .text span{display: table-cell; vertical-align: middle; text-align: center;}
.count-box{margin-bottom: .5rem; }
.count-box div{padding: .2rem .5rem; display: flex; justify-content: space-between; background: #d2daf3; border-radius: .4rem;}
.count-box .month{margin-bottom: .4rem;}
.count-box{width: calc(100% - 1.5rem); text-align: center; margin: 0 .7rem;}
.count-box span{color: #50535e; text-align: center;}
.count-box span.number{color: #1e4de7; font-weight: bold;}
.alarm-box-inline{width: 100%; height: 100%; text-align: center; display: flex; flex-direction: column; justify-content: flex-end; justify-content: space-between;}
.alarm-box.on .alarm-box-inline{justify-content: flex-end}
.count-line{margin: .4rem 0; display: flex; flex-wrap: nowrap; justify-content: center; gap: .2rem;}
.count-line div{display: inline-block; padding: .2rem 0rem; min-width: 1.6rem; border-radius: .4rem; background: #fff;}
.count-line span{display: block; }
.count-line .day-text{font-size: 55%; line-height: 1; color: #858a9f;}
.count-line .number{font-size: 80%; font-weight: bold;}

.count-line .month .number{color: #066afc;}
.count-line .day .number{color: #8243f0}

.main-set-wrap{width: 18rem; display: flex; flex-direction: column; gap: .4rem; }
.main-set-wrap .alarm-box{color: #fff; border-color: transparent;  }
.main-set-wrap .alarm-box-1{background: #f08153;}
.main-set-wrap .alarm-box-2{background: #3f9cdf;}
.main-set-wrap .alarm-box-3{background: #8d5cd6;}
.alarm-box-1 .count-line .month .number{color: #f08153}
.alarm-box-1 .count-line .day .number{color: #f89c12}
.alarm-box-2 .count-line .month .number{color: #3f9cdf}
.alarm-box-2 .count-line .day .number{color: #15afec}
.alarm-box-3 .count-line .month .number{color: #8d5cd6}
.alarm-box-3 .count-line .day .number{color: #7e72f0}

.main-img-wrap{width: 35%;}
.main-img-wrap img{width: 100%;}
.main-textbox-wrap{width: calc(100% - 35%); display: flex; padding-left: .4rem; height: 100%;}
.main-alarm-wrap{padding-left: .4rem; height: 100%;}
.main-alarm-wrap{width: calc(100% - 7rem); }
.main-set-wrap{width: 7rem;}

.alarm-box-inline .text{height: calc(100% - 3rem);}
.alarm-box-inline{overflow: hidden;}

@media screen and (max-width: 1900px) {
.main-alarm-wrap .alarm-box{width: calc(100% / 19 - .27rem); }
}
@media screen and (max-width: 1760px) {
  .main-alarm-wrap .alarm-box{width: calc(100% / 14 - .6rem); }
  .alarm-box .text, .count-line .day-text, .count-line .number{font-size: .7rem;}
  .alarm-box{height: calc(100% / 4 - .5rem);}
  
}