@charset "utf-8";
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght@400;700&display=swap);
:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-red:   #ff0000;
  --color-orange:         #ffa500;
  --color-yellow:         #ffff00;
  --color-yellowgreen:    #9acd32;
  --color-green:          #008000;
  --color-cornflowerblue: #6495ed;
  --color-cornflowerblue_:#1d69f7;
  --color-silver:         #c0c0c0;
  --color-gray:           #808080;
  --color-dark_gray:      #484848;/* 진회색 */
  --color-blue:           #0000ff;
  --color-navy:           #000080;
  --color-purple:         #800080;
  --color-main-root:      #405862;
  --color-iksu_text:  #DFF299;
  --color-dark_gray:  #484848;/* 진회색 */
  --color-blue:       #0000ff;
  --color-main-root:  #405862;
  --color-login:      #3a8afd;
  --color-mainr:      #fd0404;
  --color-main:       #405862; /*  #405862 */
  --color-main_sub:   #3a4f55;
  --color-main_1:     #3a8afd;
  --color-vlog:       #405862;
  --color-vlog-iksu:  #4988d4; /* #180b01 */
  --color-vlog_1-iksu:#558ed3;
  --color-vlog_1:     #406872;
  --color-gate:       #405862;
  --color-gfavor:     #4d2504;
  --color-gfavor_1:   #472104;
  --color-camwok: #342a20;
  --color-sub:  #00A200;
  --color-blk:  #00A200;
  --color-dark: #2F4858;
  --color-emph: #F10F5F;
  --color-text: #281812;
  --color-lighter:   #DC9C86;
  --color-light-bd:  #FFE6D6;
  --color-light-bg:  #FEFEFE; /* #FFF5ED */
  --color-light-bg1: #FCFCFC;
  --color-light-bg2: #FAFAFA;
  --color-light-bg3: #F8F8F8;
  --color-white-bg:  #FFFFFF;
}


/* 오버레이 메시지 공통 스타일 glitter 메시지 style start */
.dev-message-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.9);
  font-family: 'Noto Sans KR', sans-serif;
  z-index: 1000;
}

.message-container {
  text-align: center;
}

.message-text {
  font-size: 46px;
  font-weight: bold;
}

.message-subtext {
  font-size: 34px;
  color: #555;
}

.check-button {
  display: inline-block;
  margin-top: 20px;
  padding: 18px 36px;
  font-size: 24px;
  color: #ffffff;
  background-color: #28a745;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.check-button:hover {
  background-color: #218838;
}

/* @media 쿼리 추가: 화면 너비가 768px 이상일 때 폰트 크기를 70%로 조정 */
@media (max-width: 768px) {
  .message-text {
      font-size: calc(24px * 0.7); /* 약 70% 크기 */
  }
  .message-subtext {
      font-size: calc(20px * 0.5); /* 약 70% 크기 */
  }
  .check-button {
      font-size: calc(24px * 0.7); /* 약 70% 크기 */
  }
}
/* 오버레이 메시지 공통 스타일 glitter 메시지 style end */


/* ========================= bliking =========== */
@keyframes blink {
  from { opacity: 0; }
  to { opacity: 1; }
}
.blink_200 {
  animation-name: blink;
  animation-duration: 200ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_250 {
  animation-name: blink;
  animation-duration: 250ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_300 {
  animation-name: blink;
  animation-duration: 300ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_350  {
 /* color: var(--color-sub); */
  animation-name: blink;
  animation-duration: 350ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_400 {
  animation-name: blink;
  animation-duration: 400ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_450 {
  animation-name: blink;
  animation-duration: 450ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_500 {
  animation-name: blink;
  animation-duration: 500ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_550 {
  animation-name: blink;
  animation-duration: 550ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_600 {
  animation-name: blink;
  animation-duration: 600ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_650 {
  animation-name: blink;
  animation-duration: 650ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_700 {
  animation-name: blink;
  animation-duration: 700ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_750 {
  animation-name: blink;
  animation-duration: 750ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_800 {
  animation-name: blink;
  animation-duration: 800ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_850 {
  animation-name: blink;
  animation-duration: 850ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_900 {
  animation-name: blink;
  animation-duration: 900ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_950 {
  animation-name: blink;
  animation-duration: 950ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_1500 {
  animation-name: blink ;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_c200  {
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 200ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_c250  {
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 250ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_c300  {
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 300ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_c350  {
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 350ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_c400  {
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 400ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_c450  {
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 450ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_c500  {
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 500ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_c550  {
 /* font-size: 1.2em; */
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 550ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_c600  {
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 600ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_c650 {
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 650ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_c700  {
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 700ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_c750 {
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 750ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_c800  {
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 800ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_c850 {
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 850ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_c900  {
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 900ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_c950 {
  color:  var(--color-blk);
  animation-name: blink;
  animation-duration: 950ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_y850 {
  color: var(--color-yellow);
  animation-name: blink;
  animation-duration: 850ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.blink_y950 {
  color:  var(--color-yellow);
  animation-name: blink;
  animation-duration: 950ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
/* ================================= blinking end ====== */
.hover-go:hover {
  color: blue; /* 텍스트 색상을 청색으로 */
  /* background-color: yellow; * 배경색을 노란색으로 */
}
/* ================================ 둥둥 시작 == */
.html-css__thumb {
  position: relative;
}
/* 로고 아래 그림자 */
.html-css__thumb::after {
  content: '';
  position: absolute;
  left: 0;
  height: 10%;
  background-color: black;
  border-radius: 50%;
}
/* 초록색 체크표시 */
.html-css__spec dd::before {
  content: '';
  display: inline-block;
  margin-right: 0.4em;
  width: 12px;
  height: 6px;
  border-left: 4px solid var(--color-sub);
  border-bottom: 4px solid var(--color-sub);
  vertical-align: 0.2em;
  transform: rotate(-45deg);
}
/* 둥둥 오르내리는 효과 */
@keyframes logo-hover {
  from { transform: translateY(0); }
  to { transform: translateY(10px); }
}
.html-css__logo {
  animation-name: logo-hover;
  animation-duration: 800ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
/* 짙고 옅어지는 애니메이션 */
@keyframes logo-shadow {
  from { opacity: 0.08; }
  to { opacity: 0.24; }
}
.html-css__thumb::after {
  animation-name: logo-shadow;
  animation-duration: 800ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
/* ================ 둥둥 에니 끝 ==-====== */
#top_btn i {font-size:1.4em}