@charset "utf-8";


/* Default */
* {margin: 0; padding: 0;}
body {font-family: 'NotoSansKR', sans-serif; letter-spacing: -0.01em;}
header, footer, main, section, article, aside, nav, figure, figcaption {display: block;}
ul, ol, li, dl, dt, dd {list-style: none;}
address, em, i {font-style: normal;}
fieldset, hr {display: block; margin: 0; padding: 0; border: 0 none;}
img {max-width: 100%; font-size: 0; border: 0; vertical-align: middle;}

table {width: 100%; border-spacing: 0; table-layout: fixed; word-break: break-all; border-collapse: collapse;}

input, select {max-width: 100%; vertical-align: middle;}
input, select, button, textarea, optgroup { margin: 0; font-family: inherit; font-size: inherit; color: inherit;}
select {-webkit-appearance: none; -moz-appearance: none; appearance: none;}
select::-ms-expand {display: none;}

a {color: inherit; text-decoration: none;}
input[type='submit'] { -webkit-appearance: none; -moz-appearance: none; appearance: none;}
button {text-decoration: none; background: none; border: 0; outline: 0; white-space: nowrap; cursor: pointer;}

.hidden {display: none !important;}
.blind {position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden;}


/* */
.container {position: relative; margin: 0 auto; padding: 30px 60px; width: 1080px; height: 1920px; line-height: 1.2; color: #fff; background-color: #4a6ec9; box-sizing: border-box; overflow: hidden;}

.today {text-align: center;}
.today .time {line-height: 1; font-size: 180px;}
.today .date {font-size: 60px;}

.weather {position: relative; margin-top: 50px; padding: 75px 30px; height: 400px; border: 2px solid #fff; border-radius: 60px; box-sizing: border-box;}
.weather:after {display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/mask-weather.png) center center no-repeat;}
.weather .graphic {height: 284px;}
.weather .graphic i {display: block; width: 100%; height: 100%; background-position: center 0; background-repeat: no-repeat;}
.weather .graphic .wt-1 {background-image: url(../images/icon-weather-01.png);}
.weather .graphic .wt-2 {background-image: url(../images/icon-weather-02.png);}
.weather .graphic .wt-3 {background-image: url(../images/icon-weather-03.png);}
.weather .graphic .wt-4 {background-image: url(../images/icon-weather-04.png);}
.weather .temperature {display: flex; gap: 60px; justify-content: center; margin-top: 30px; font-size: 60px;}
.weather .lowest {}
.weather .highest {}

/* .news {margin-top: 100px;} */
.news li {position: relative; font-size: 42px; border-bottom: 1px solid #839ee4; overflow: hidden;}
.news li:first-child {font-size: 80px; border-top: 1px solid #839ee4;}
.news li a {display: flex; padding: 30px 0; white-space: nowrap; overflow: hidden;}
.news li:first-child a {padding: 80px 0;}
.news li span {display: block;}

.news li.loop a {flex: 0 0 auto; gap: 30px;}
.news li.loop span {animation: textLoop 10s linear infinite;}
@keyframes textLoop {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.turn {display: flex; gap: 35px; position: relative; margin-top: 80px; padding: 25px 0 0 290px; line-height: 1;}
.turn:before {display: block; content: ''; position: absolute; top: 0; left: 0; width: 245px; height: 219px; background: url(../images/icon-turn.png) 0 center no-repeat;}
.turn span {font-size: 100px;}
.turn em {font-size: 120px;}

.layer {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}