@charset "UTF-8";
.flex_center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* font size */
/* 그라데이션 색상 */
/* 그립자 */
/* 내부 그림자, 내부 광선 */
/* 모달창 */
/* 버튼 */
/* 인풋챵 */
html, body {
  margin: 0;
  width: 100%;
  min-width: 192rem;
  height: 100%;
  font-style: normal;
  white-space: normal;
  font-size: 10px;
  color: #414141;
  background-color: black;
  overflow-x: hidden;
}

body * {
  box-sizing: border-box;
}

body {
  font-size: 1.6rem;
}

.wrapper, main, .page {
  height: 100%;
  width: 100%;
}

.wrap_img {
  display: flex;
  justify-content: center;
  align-items: center;
}

.page_main .wrap_map {
  width: 100%;
  height: 100%;
  position: relative;
}
.page_main .wrap_map .wrap_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.page_main .map {
  width: 100%;
  height: 100%;
  background-image: url("../img/main/bg.jpg");
  background-repeat: no-repeat;
  background-image: center center;
  background-size: cover;
  z-index: -1;
}
.page_main .dim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.page_main .dim .dim_each {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.page_main .dim .dim_top {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 84%, rgba(0, 0, 0, 0.6) 98%);
}
.page_main .dim .dim_right {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0.4) 100%);
}
.page_main .dim .dim_bottom {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.8) 100%);
}
.page_main .dim .dim_left {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.7) 100%);
}
.page_main .wrap_cloud .c_r_bt {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 560px;
  height: 336px;
  background-image: url("../img/main/cloud_right_bottom.png");
  background-repeat: no-repeat;
  background-image: center center;
  background-size: 100%;
  -webkit-animation: cloud_R_bt_small 1s ease-in-out forwards, cloud_R_bt 8s linear infinite;
  -moz-animation: cloud_R_bt_small 1s ease-in-out forwards, cloud_R_bt 8s linear infinite;
  -ms-animation: cloud_R_bt_small 1s ease-in-out forwards, cloud_R_bt 8s linear infinite;
  -o-animation: cloud_R_bt_small 1s ease-in-out forwards, cloud_R_bt 8s linear infinite;
  animation: cloud_R_bt_small 1s ease-in-out forwards, cloud_R_bt 8s linear infinite;
}
.page_main .wrap_cloud .c_l_tp {
  position: absolute;
  top: 0;
  left: 0;
  width: 1147px;
  height: 241px;
  background-image: url("../img/main/cloud_left_top.png");
  background-repeat: no-repeat;
  background-image: center center;
  background-size: 100%;
  -webkit-animation: cloud_L_top_small 1.2s ease-in-out forwards, cloud_L_top 8s linear infinite;
  -moz-animation: cloud_L_top_small 1.2s ease-in-out forwards, cloud_L_top 8s linear infinite;
  -ms-animation: cloud_L_top_small 1.2s ease-in-out forwards, cloud_L_top 8s linear infinite;
  -o-animation: cloud_L_top_small 1.2s ease-in-out forwards, cloud_L_top 8s linear infinite;
  animation: cloud_L_top_small 1.2s ease-in-out forwards, cloud_L_top 8s linear infinite;
}
.page_main .wrap_cloud .c_l_bt {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1014px;
  height: 500px;
  background-image: url("../img/main/cloud_left_bottom.png");
  background-repeat: no-repeat;
  background-image: center center;
  background-size: 100%;
  -webkit-animation: cloud_L_bt_small 1.2s ease-in-out forwards, cloud_L_bt 10s linear infinite;
  -moz-animation: cloud_L_bt_small 1.2s ease-in-out forwards, cloud_L_bt 10s linear infinite;
  -ms-animation: cloud_L_bt_small 1.2s ease-in-out forwards, cloud_L_bt 10s linear infinite;
  -o-animation: cloud_L_bt_small 1.2s ease-in-out forwards, cloud_L_bt 10s linear infinite;
  animation: cloud_L_bt_small 1.2s ease-in-out forwards, cloud_L_bt 10s linear infinite;
}
@-webkit-keyframes cloud_L_bt_small {
  from {
    width: 120%;
    height: 120%;
  }
  to {
    width: 1014px;
    height: 500px;
  }
}
@-moz-keyframes cloud_L_bt_small {
  from {
    width: 120%;
    height: 120%;
  }
  to {
    width: 1014px;
    height: 500px;
  }
}
@-ms-keyframes cloud_L_bt_small {
  from {
    width: 120%;
    height: 120%;
  }
  to {
    width: 1014px;
    height: 500px;
  }
}
@-o-keyframes cloud_L_bt_small {
  from {
    width: 120%;
    height: 120%;
  }
  to {
    width: 1014px;
    height: 500px;
  }
}
@keyframes cloud_L_bt_small {
  from {
    width: 120%;
    height: 120%;
  }
  to {
    width: 1014px;
    height: 500px;
  }
}
@-webkit-keyframes cloud_R_bt_small {
  from {
    width: 120%;
    height: 120%;
  }
  to {
    width: 560px;
    height: 336px;
  }
}
@-moz-keyframes cloud_R_bt_small {
  from {
    width: 120%;
    height: 120%;
  }
  to {
    width: 560px;
    height: 336px;
  }
}
@-ms-keyframes cloud_R_bt_small {
  from {
    width: 120%;
    height: 120%;
  }
  to {
    width: 560px;
    height: 336px;
  }
}
@-o-keyframes cloud_R_bt_small {
  from {
    width: 120%;
    height: 120%;
  }
  to {
    width: 560px;
    height: 336px;
  }
}
@keyframes cloud_R_bt_small {
  from {
    width: 120%;
    height: 120%;
  }
  to {
    width: 560px;
    height: 336px;
  }
}
@-webkit-keyframes cloud_L_top_small {
  from {
    width: 120%;
    height: 120%;
  }
  to {
    width: 1147px;
    height: 241px;
  }
}
@-moz-keyframes cloud_L_top_small {
  from {
    width: 120%;
    height: 120%;
  }
  to {
    width: 1147px;
    height: 241px;
  }
}
@-ms-keyframes cloud_L_top_small {
  from {
    width: 120%;
    height: 120%;
  }
  to {
    width: 1147px;
    height: 241px;
  }
}
@-o-keyframes cloud_L_top_small {
  from {
    width: 120%;
    height: 120%;
  }
  to {
    width: 1147px;
    height: 241px;
  }
}
@keyframes cloud_L_top_small {
  from {
    width: 120%;
    height: 120%;
  }
  to {
    width: 1147px;
    height: 241px;
  }
}
@-webkit-keyframes cloud_L_bt {
  0% {
    bottom: 0rem;
  }
  25% {
    bottom: -1rem;
  }
  35% {
    bottom: 0rem;
  }
  55% {
    bottom: -1rem;
  }
  65% {
    bottom: 0rem;
  }
  85% {
    bottom: -1rem;
  }
}
@-moz-keyframes cloud_L_bt {
  0% {
    bottom: 0rem;
  }
  25% {
    bottom: -1rem;
  }
  35% {
    bottom: 0rem;
  }
  55% {
    bottom: -1rem;
  }
  65% {
    bottom: 0rem;
  }
  85% {
    bottom: -1rem;
  }
}
@-ms-keyframes cloud_L_bt {
  0% {
    bottom: 0rem;
  }
  25% {
    bottom: -1rem;
  }
  35% {
    bottom: 0rem;
  }
  55% {
    bottom: -1rem;
  }
  65% {
    bottom: 0rem;
  }
  85% {
    bottom: -1rem;
  }
}
@-o-keyframes cloud_L_bt {
  0% {
    bottom: 0rem;
  }
  25% {
    bottom: -1rem;
  }
  35% {
    bottom: 0rem;
  }
  55% {
    bottom: -1rem;
  }
  65% {
    bottom: 0rem;
  }
  85% {
    bottom: -1rem;
  }
}
@keyframes cloud_L_bt {
  0% {
    bottom: 0rem;
  }
  25% {
    bottom: -1rem;
  }
  35% {
    bottom: 0rem;
  }
  55% {
    bottom: -1rem;
  }
  65% {
    bottom: 0rem;
  }
  85% {
    bottom: -1rem;
  }
}
@-webkit-keyframes cloud_R_bt {
  0% {
    bottom: 0rem;
  }
  20% {
    bottom: -1rem;
  }
  35% {
    bottom: 0rem;
  }
  55% {
    bottom: -1rem;
  }
  65% {
    bottom: 0rem;
  }
  90% {
    bottom: -2rem;
  }
}
@-moz-keyframes cloud_R_bt {
  0% {
    bottom: 0rem;
  }
  20% {
    bottom: -1rem;
  }
  35% {
    bottom: 0rem;
  }
  55% {
    bottom: -1rem;
  }
  65% {
    bottom: 0rem;
  }
  90% {
    bottom: -2rem;
  }
}
@-ms-keyframes cloud_R_bt {
  0% {
    bottom: 0rem;
  }
  20% {
    bottom: -1rem;
  }
  35% {
    bottom: 0rem;
  }
  55% {
    bottom: -1rem;
  }
  65% {
    bottom: 0rem;
  }
  90% {
    bottom: -2rem;
  }
}
@-o-keyframes cloud_R_bt {
  0% {
    bottom: 0rem;
  }
  20% {
    bottom: -1rem;
  }
  35% {
    bottom: 0rem;
  }
  55% {
    bottom: -1rem;
  }
  65% {
    bottom: 0rem;
  }
  90% {
    bottom: -2rem;
  }
}
@keyframes cloud_R_bt {
  0% {
    bottom: 0rem;
  }
  20% {
    bottom: -1rem;
  }
  35% {
    bottom: 0rem;
  }
  55% {
    bottom: -1rem;
  }
  65% {
    bottom: 0rem;
  }
  90% {
    bottom: -2rem;
  }
}
@-webkit-keyframes cloud_L_top {
  0% {
    top: 0rem;
  }
  30% {
    top: -1rem;
  }
  45% {
    top: 0rem;
  }
  55% {
    top: -1rem;
  }
  75% {
    top: 0rem;
  }
  90% {
    top: -1rem;
  }
}
@-moz-keyframes cloud_L_top {
  0% {
    top: 0rem;
  }
  30% {
    top: -1rem;
  }
  45% {
    top: 0rem;
  }
  55% {
    top: -1rem;
  }
  75% {
    top: 0rem;
  }
  90% {
    top: -1rem;
  }
}
@-ms-keyframes cloud_L_top {
  0% {
    top: 0rem;
  }
  30% {
    top: -1rem;
  }
  45% {
    top: 0rem;
  }
  55% {
    top: -1rem;
  }
  75% {
    top: 0rem;
  }
  90% {
    top: -1rem;
  }
}
@-o-keyframes cloud_L_top {
  0% {
    top: 0rem;
  }
  30% {
    top: -1rem;
  }
  45% {
    top: 0rem;
  }
  55% {
    top: -1rem;
  }
  75% {
    top: 0rem;
  }
  90% {
    top: -1rem;
  }
}
@keyframes cloud_L_top {
  0% {
    top: 0rem;
  }
  30% {
    top: -1rem;
  }
  45% {
    top: 0rem;
  }
  55% {
    top: -1rem;
  }
  75% {
    top: 0rem;
  }
  90% {
    top: -1rem;
  }
}
.page_main .wrap_area_highlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.page_main .wrap_area_highlight .wrap_area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.page_main .wrap_area_highlight .wrap_area .highlight {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-image: center;
  background-size: cover;
  z-index: 0;
}
.page_main .wrap_area_highlight .bubble {
  position: absolute;
  /*width: 24.2rem;*/
  padding: 0.8rem 2rem 0.8rem 0.8rem;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 1.8rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  z-index: 5;
  filter: drop-shadow(10px 14px 10px rgba(0, 0, 0, 0.5));
}
.page_main .wrap_area_highlight .bubble .wrap_img {
  width: 11rem;
  height: 6rem;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid #777777;
}
.page_main .wrap_area_highlight .bubble h3 {
  font-size: 1.6rem;
  font-family: "NotoSansMedium", "나눔바른고딕", "NanumBarunGothic", "Apple SD 산돌고딕 Neo", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.2;
}
.page_main .wrap_area_highlight .area_first .highlight {
  background-image: url("../img/main/area_first_46per.png");
  opacity: 46%;
  -webkit-animation: area_first 0.2s 1s linear backwards;
  -moz-animation: area_first 0.2s 1s linear backwards;
  -ms-animation: area_first 0.2s 1s linear backwards;
  -o-animation: area_first 0.2s 1s linear backwards;
  animation: area_first 0.2s 1s linear backwards;
}
@-webkit-keyframes area_first {
  from {
    opacity: 0%;
  }
  to {
    opacity: 46%;
  }
}
@-moz-keyframes area_first {
  from {
    opacity: 0%;
  }
  to {
    opacity: 46%;
  }
}
@-ms-keyframes area_first {
  from {
    opacity: 0%;
  }
  to {
    opacity: 46%;
  }
}
@-o-keyframes area_first {
  from {
    opacity: 0%;
  }
  to {
    opacity: 46%;
  }
}
@keyframes area_first {
  from {
    opacity: 0%;
  }
  to {
    opacity: 46%;
  }
}
.page_main .wrap_area_highlight .area_first .bubble {
  top: 7.8%;
  right: 38.4%;
  margin-right: 3.8rem;
  box-shadow: -1px 0px 1px 0px rgba(99, 99, 99, 0.5);
}
.page_main .wrap_area_highlight .area_first .bubble::after {
  content: "";
  position: absolute;
  top: 1rem;
  right: -3.6rem;
  width: 4rem;
  height: 3rem;
  background-image: url("../img/main/bubbleTail_right_top.png");
  opacity: 80%;
}
.page_main .wrap_area_highlight .area_foreign .highlight {
  background-image: url("../img/main/area_foreign_48per.png");
  opacity: 42%;
  -webkit-animation: area_foreign 0.2s 1.2s linear backwards;
  -moz-animation: area_foreign 0.2s 1.2s linear backwards;
  -ms-animation: area_foreign 0.2s 1.2s linear backwards;
  -o-animation: area_foreign 0.2s 1.2s linear backwards;
  animation: area_foreign 0.2s 1.2s linear backwards;
}
@-webkit-keyframes area_foreign {
  from {
    opacity: 0%;
  }
  to {
    opacity: 46%;
  }
}
@-moz-keyframes area_foreign {
  from {
    opacity: 0%;
  }
  to {
    opacity: 46%;
  }
}
@-ms-keyframes area_foreign {
  from {
    opacity: 0%;
  }
  to {
    opacity: 46%;
  }
}
@-o-keyframes area_foreign {
  from {
    opacity: 0%;
  }
  to {
    opacity: 46%;
  }
}
@keyframes area_foreign {
  from {
    opacity: 0%;
  }
  to {
    opacity: 46%;
  }
}
.page_main .wrap_area_highlight .area_foreign .bubble {
  top: 14%;
  left: 68.5%;
  margin-left: 3.6rem;
  box-shadow: 1px 0px 1px 0px rgba(99, 99, 99, 0.5);
}
.page_main .wrap_area_highlight .area_foreign .bubble::after {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: -3.6rem;
  width: 3.7rem;
  height: 3.6rem;
  background-image: url("../img/main/bubbleTail_left_top.png");
  opacity: 80%;
}
.page_main .wrap_area_highlight .area_second .highlight {
  background-image: url("../img/main/area_second_30per.png");
  opacity: 34%;
  -webkit-animation: area_second 0.2s 1.4s linear backwards;
  -moz-animation: area_second 0.2s 1.4s linear backwards;
  -ms-animation: area_second 0.2s 1.4s linear backwards;
  -o-animation: area_second 0.2s 1.4s linear backwards;
  animation: area_second 0.2s 1.4s linear backwards;
}
@-webkit-keyframes area_second {
  from {
    opacity: 0%;
  }
  to {
    opacity: 34%;
  }
}
@-moz-keyframes area_second {
  from {
    opacity: 0%;
  }
  to {
    opacity: 34%;
  }
}
@-ms-keyframes area_second {
  from {
    opacity: 0%;
  }
  to {
    opacity: 34%;
  }
}
@-o-keyframes area_second {
  from {
    opacity: 0%;
  }
  to {
    opacity: 34%;
  }
}
@keyframes area_second {
  from {
    opacity: 0%;
  }
  to {
    opacity: 34%;
  }
}
.page_main .wrap_area_highlight .area_second .bubble {
  top: 33%;
  left: 60%;
  margin-left: 3.6rem;
  box-shadow: 1px 0px 1px 0px rgba(99, 99, 99, 0.5);
}
.page_main .wrap_area_highlight .area_second .bubble::after {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: -3.6rem;
  width: 3.7rem;
  height: 3.6rem;
  background-image: url("../img/main/bubbleTail_left_top.png");
  opacity: 80%;
}
.page_main .wrap_area_highlight .area_national .highlight {
  background-image: url("../img/main/area_national_32per.png");
  opacity: 38%;
  -webkit-animation: area_national 0.2s 1.6s linear backwards;
  -moz-animation: area_national 0.2s 1.6s linear backwards;
  -ms-animation: area_national 0.2s 1.6s linear backwards;
  -o-animation: area_national 0.2s 1.6s linear backwards;
  animation: area_national 0.2s 1.6s linear backwards;
}
@-webkit-keyframes area_national {
  from {
    opacity: 0%;
  }
  to {
    opacity: 38%;
  }
}
@-moz-keyframes area_national {
  from {
    opacity: 0%;
  }
  to {
    opacity: 38%;
  }
}
@-ms-keyframes area_national {
  from {
    opacity: 0%;
  }
  to {
    opacity: 38%;
  }
}
@-o-keyframes area_national {
  from {
    opacity: 0%;
  }
  to {
    opacity: 38%;
  }
}
@keyframes area_national {
  from {
    opacity: 0%;
  }
  to {
    opacity: 38%;
  }
}
.page_main .wrap_area_highlight .area_national .bubble {
  top: 50.5%;
  left: 66.2%;
  margin-bottom: 3.8rem;
  box-shadow: 1px 0px 1px 0px rgba(99, 99, 99, 0.5);
}
.page_main .wrap_area_highlight .area_national .bubble::after {
  content: "";
  position: absolute;
  bottom: -3.6rem;
  left: 2rem;
  width: 3.6rem;
  height: 3.7rem;
  background-image: url("../img/main/bubbleTail_left_bottom.png");
  opacity: 80%;
}
.page_main .wrap_area_highlight .area_jp .highlight {
  background-image: url("../img/main/area_jp_45per.png");
  opacity: 45%;
  -webkit-animation: area_jp 0.2s 1.8s linear backwards;
  -moz-animation: area_jp 0.2s 1.8s linear backwards;
  -ms-animation: area_jp 0.2s 1.8s linear backwards;
  -o-animation: area_jp 0.2s 1.8s linear backwards;
  animation: area_jp 0.2s 1.8s linear backwards;
}
@-webkit-keyframes area_jp {
  from {
    opacity: 0%;
  }
  to {
    opacity: 45%;
  }
}
@-moz-keyframes area_jp {
  from {
    opacity: 0%;
  }
  to {
    opacity: 45%;
  }
}
@-ms-keyframes area_jp {
  from {
    opacity: 0%;
  }
  to {
    opacity: 45%;
  }
}
@-o-keyframes area_jp {
  from {
    opacity: 0%;
  }
  to {
    opacity: 45%;
  }
}
@keyframes area_jp {
  from {
    opacity: 0%;
  }
  to {
    opacity: 45%;
  }
}
.page_main .wrap_area_highlight .area_jp .bubble {
  top: 65%;
  right: 38%;
  margin-bottom: 3.8rem;
  box-shadow: 1px 0px 1px 0px rgba(99, 99, 99, 0.5);
}
.page_main .wrap_area_highlight .area_jp .bubble::after {
  content: "";
  position: absolute;
  bottom: -3.6rem;
  right: -0.5rem;
  width: 3.6rem;
  height: 3.7rem;
  background-image: url("../img/main/bubbleTail_right_bottom.png");
  opacity: 80%;
}
.page_main .main_text {
  position: absolute;
  top: 22.4%;
  left: 15.6%;
  color: #ffffff;
  z-index: 10;
}
.page_main .main_text h2 {
  font-size: 5.4rem;
  font-family: "NotoSansBold", "나눔바른고딕", "NanumBarunGothic", "Apple SD 산돌고딕 Neo", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.2;
  margin-bottom: 3.6rem;
  text-shadow: 14px 16px 14px rgba(0, 0, 0, 0.5);
}
.page_main .main_text h2 span {
  font-size: 3.6rem;
}
.page_main .main_text h3 {
  font-size: 2.2rem;
  font-family: "NotoSansMedium", "나눔바른고딕", "NanumBarunGothic", "Apple SD 산돌고딕 Neo", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.3;
  text-shadow: 8px 10px 8px rgba(0, 0, 0, 0.5);
}

@media screen and (min-height: 1000px) {
  .page_main .main_text {
    top: 30%;
  }
}
@media screen and (max-aspect-ratio: 16/9) {
  .page_main .wrap_area_highlight .wrap_area .bubble {
    display: none;
  }
}