@charset "utf-8";
@import url("https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css");

* {
  color: #333;
  text-decoration: none;
  font-family: "NanumSquare", "notosanskr", sans-serif;
  font-weight: 400;
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;

  /* 공룡 */
  cursor:
    url("https://cur.cursors-4u.net/nature/nat-9/nat858.cur"), auto !important;

  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

ul,
li {
  list-style: none;
}

/* reset */

:root {
  --black: #333;
  --main: #40a540;
  --lightgray: rgb(232, 235, 238);
}

::-webkit-scrollbar {
  background-color: transparent;
  width: 0px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--black);
  border-radius: 3px;
}

/* 본문 */

html {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 100%;

  background-image: url(./img/blue.jpg);
  /* background-repeat: repeat; */
  /* background-size: cover; */

  /* background-color: #1e1e1e; */

  /* background: #dae2eb;
background: linear-gradient(135deg, rgba(218, 226, 235, 1) 0%, rgba(254, 254, 254, 1) 100%); */

  /* 방사형 그라데이션 */
  /* background: #cadbca;
    background: radial-gradient(at 80% 20%, #cadbca 0%, #fefefe 30%); */

  /* 체크무늬 / 변수 값만 변경하면 적용됨 */
  /* --background-color: #ddedff;
    --line-color: #ffffff60;
    --spacing: 80px;
    --line-thickness: 40px;
    --line-spacing: calc(var(--spacing) - var(--line-thickness));

    background:
        linear-gradient(to bottom, transparent var(--line-spacing), var(--line-color) var(--line-spacing)) 0 0 / 100vw var(--spacing) repeat-y,
        linear-gradient(to right, transparent var(--line-spacing), var(--line-color) var(--line-spacing)) 0 0 / var(--spacing) 100vh repeat-x var(--background-color); */
}

.a {
  border: 3px solid black;
  height: 1080px;
  width: 1920px;
}

#allWrap {
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#allWrap > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#Wrap {
  /* border: 1px solid var(--black); */
  border-radius: 12px;
  display: flex;
  min-width: 1100px;
  height: 700px;
  box-shadow: 0px 0px 30px #0c234612;
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
}

.todayPic {
  border-radius: 6px;
  position: relative;
  height: 180px;
  width: 320px;
  margin-bottom: 40px;
  overflow: hidden;
  transition: 0.3s;
}

.todayPic img {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.leftIn,
.rightIn {
  border-radius: 6px;
  height: 100%;
}

.left {
  padding: 20px;
  flex: 1;
  height: 100%;
  border-right: 1px dashed rgba(255, 255, 255, 0.5);
}

.leftIn {
  --background-color: #fefefe;
  --line-color: #c2cad960;
  --spacing: 30px;
  --line-thickness: 1px;
  --line-spacing: calc(var(--spacing) - var(--line-thickness));

  background:
    linear-gradient(
        to bottom,
        transparent var(--line-spacing),
        var(--line-color) var(--line-spacing)
      )
      0 0 / 100vw var(--spacing) repeat-y,
    linear-gradient(
        to right,
        transparent var(--line-spacing),
        var(--line-color) var(--line-spacing)
      )
      0 0 / var(--spacing) 100vh repeat-x var(--background-color);
}

.right {
  padding: 20px;
  flex: 2;
}

.rightIn {
  background-color: white;
}

.clock {
  text-align: center;
}

#today {
  border-radius: 30px;
  display: inline-block;
  padding: 0px 8px;
  background-color: white;
  font-size: 14px;
  color: lightslategray;
}

.clock {
  padding: 30px 0;
}

#clock {
  font-weight: 800;
  font-size: 48px;
}

.rotate {
  position: relative;
  width: 250px;
  height: 250px;
  margin: auto;
}

.rotate img {
  position: absolute;
  width: 100%;
  animation: rotateAni 30s linear infinite;
}

.rotate img:hover {
  animation-play-state: paused;
}

@keyframes rotateAni {
  100% {
    transform: rotate(360deg);
  }
}

.banner {
  margin-top: 30px;
  padding: 0px 12px;
}

#ddayList {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#ddayList li {
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  text-align: center;

  /* border: 1px solid black; */
  line-height: 18px;
  margin: 6px;
  padding: 10px 0px;
}

.dName {
  font-size: 14px;
}

.cp1 {
  background: linear-gradient(
    135deg,
    rgb(201, 204, 206) 0%,
    rgba(254, 254, 254, 1) 100%
  );
}

.cp2 {
  background: linear-gradient(
    135deg,
    rgb(226, 216, 211) 0%,
    rgba(254, 254, 254, 1) 100%
  );
}

.cp3 {
  background: linear-gradient(
    135deg,
    rgb(228, 220, 237) 0%,
    rgba(254, 254, 254, 1) 100%
  );
}

.cp4 {
  background: linear-gradient(
    135deg,
    rgb(219, 231, 220) 0%,
    rgba(254, 254, 254, 1) 100%
  );
}

.cp5 {
  grid-column: 1 / span 2;
  background: linear-gradient(
    135deg,
    rgb(212, 233, 255) 0%,
    rgba(254, 254, 254, 1) 100%
  );
}

.cp1,
.cp2,
.cp3,
.cp4,
.cp5 {
  border: 1px solid white;
  transition: 0.3s;
}

.cp1:hover,
.cp2:hover,
.cp3:hover,
.cp4:hover,
.cp5:hover {
  border: 1px solid var(--black);
}

footer {
  margin-left: 30px;
  position: absolute;
  right: -20%;
  top: 25%;
  width: 200px;
}

footer > div {
}

#bannerBtn {
  border-radius: 30px;
  padding: 12px;
  border: 1px solid white;
  transition: 0.3s;
}

#bannerBtn:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.bannerList {
  /* margin-top: 12px; */
}

.bannerList li:nth-child(1) {
  margin-top: 12px;
  margin-bottom: 40px;
}

.bannerList li {
  height: 40px;
  border: 1px solid black;
  margin-bottom: 12px;
  position: relative;
}

.bannerList li img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.rightIn {
  height: 100%;
  overflow: hidden;
}

nav {
  line-height: 42px;
  padding: 0px 20px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul {
  display: flex;
  height: 30px;
}

nav ul li {
  background-color: #efefef;
  padding: 0px 12px;
  border-radius: 30px;
  margin: 0px 4px;
  line-height: 30px;
}

nav ul li:nth-child(1) {
  margin-left: 0px;
}
nav ul li:nth-child(3) {
  margin-right: 0px;
}

.btn {
  color: white;
}

/*  */