@charset "utf-8";

:root {
  --color-blue: #3617ce;
}

/* Common */
body {
  background: var(--color-blue);
  font-family: "TSansBeta", sans-serif;
  color: #1a1a1a;
  line-height: 1.2;
  letter-spacing: -1px;
}
.blind {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px;
  width: 1px;
  height: 1px;
}
.inner {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 30px;
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
}
.modal__overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 30px;
  background: rgba(0, 0, 0, 0.8);
}
.modal__content {
  position: relative;
  overflow: hidden;
  max-width: 960px;
  width: 100%;
  background: #fff;
  border-radius: 40px;
}
.modal__header {
  position: relative;
  height: 120px;
  padding: 52px 40px 0;
  background: #d7d1f5;
}
.modal__header h2 {
  font-size: 48px;
  font-weight: bold;
  color: var(--color-blue);
  line-height: 1;
}
.modal__header .btn__close {
  overflow: hidden;
  position: absolute;
  top: 40px;
  right: 40px;
  z-index: 2;
  width: 60px;
  aspect-ratio: 1/1;
  background: url("../images/icon_close1.svg") no-repeat center center var(--color-blue);
  border-radius: 30px;
  text-indent: -9999em;
}
.modal__body {
  overflow-y: auto;
  max-height: calc(100dvh - 180px);
  padding: 40px;
}

/* Modal - 모집분야 */
.modal__realm .modal__body > ul {
  display: flex;
  align-items: stretch;
  gap: 24px;
}
.modal__realm .modal__body > ul > li {
  flex: 1 1 0;
  overflow: hidden;
  border: 1px solid #e2e2e2;
  border-radius: 20px;
}
.modal__realm .modal__body li img {
  display: block;
  width: 100%;
}
.modal__realm .modal__body li dl {
  padding: 32px 16px;
}
.modal__realm .modal__body li dt {
  margin-bottom: 12px;
  font-size: 32px;
  font-weight: bold;
  color: var(--color-blue);
}
.modal__realm .modal__body li dd {
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.16px;
}
.modal__realm .modal__body li li {
  position: relative;
  padding-left: 28px;
}
.modal__realm .modal__body li li:before {
  content: "";
  position: absolute;
  top: 9px;
  left: 10px;
  width: 5px;
  aspect-ratio: 1 / 1;
  background: #1a1a1a;
  border-radius: 5px;
}

.modal__video .modal__content {
  overflow: visible;
}
.modal__video .btn__close {
  overflow: hidden;
  position: absolute;
  top: -90px;
  right: 0;
  z-index: 2;
  width: 80px;
  aspect-ratio: 1 / 1;
  background: url("../images/icon_close2.svg") no-repeat center center #dad4f6;
  border-radius: 80px;
  text-indent: -9999em;
}
.modal__video .area__video {
  overflow: hidden;
  width: 960px;
  aspect-ratio: 960 / 540;
  background: #000;
  border-radius: 40px;
}

/* Floating */
.floating {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 10;
}
.floating a {
  display: block;
  width: 220px;
  aspect-ratio: 220 / 185;
  padding-top: 53px;
  background: url("../images/floating_heart1.svg") no-repeat center center;
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  letter-spacing: -1px;
}
.floating a + a {
  margin-top: -5px;
  background-image: url("../images/floating_heart2.svg");
}

/* Header */
header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 79px;
  padding: 30px 40px 0;
  background: #1e0d73;
}
header ul {
  display: flex;
  gap: 40px;
}
header ul li {
  padding-top: 9px;
}
header li a {
  display: block;
  font-size: 20px;
  color: #fff;
  line-height: 1;
}

/* Container */
.container {
  overflow: hidden;
  padding-top: 79px;
}

/* Section Intro */
.section__intro {
  padding: 181px 0 120px;
  text-align: center;
}
.section__intro h3 {
  font-size: 76px;
  font-weight: bold;
  color: #fff;
}
.section__intro p {
  margin-top: 15px;
  font-size: 32px;
  font-weight: bold;
  color: #ff404e;
}
.section__intro--description {
  margin-top: 60px;
  font-size: 38px;
  color: #fff;
}

/* Section Qualified */
.section__qualified {
  padding: 0 0 60px;
  background: var(--color-blue);
}
.section__qualified .inner {
  position: relative;
}
.section__qualified .inner:before {
  content: "";
  position: absolute;
  top: 203px;
  left: -397px;
  z-index: 1;
  width: 527px;
  aspect-ratio: 527 / 551;
  background: url("../images/img_section2_spring1.svg") no-repeat center center / 100% 100%;
}
.section__qualified--info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
  gap: 20px;
  height: 520px;
  background: url("../images/img_section2_bg1.svg") no-repeat center center / cover;
  border-radius: 30px;
  color: #fff;
  text-align: center;
}
.section__qualified--info h3 {
  font-size: 52px;
  font-weight: bold;
}
.section__qualified--info p {
  font-size: 24px;
  font-weight: 300;
  line-height: 1.4;
}
.section__qualified--list {
  position: relative;
  z-index: 3;
  margin-top: 60px;
  padding: 60px 0;
  background: rgba(26, 26, 26, 0.7);
  border-radius: 30px;
  color: #fff;
  scroll-margin-top: 120px;
}
.section__qualified--list h3 {
  margin-bottom: 40px;
  font-size: 48px;
  font-weight: bold;
  text-align: center;
}
.section__qualified--list dl {
  display: flex;
  gap: 12px;
  padding: 16px 40px;
  border-bottom: 1px solid #ebe8fa;
}
.section__qualified--list dt {
  flex: 0 1 auto;
  width: 120px;
  font-size: 24px;
  font-weight: 600;
}
.section__qualified--list dd {
  flex: 1 1 0;
  font-size: 22px;
  line-height: 1.4;
}
.section__qualified--list dd ul li {
  font-size: 20px;
  font-weight: 300;
}
.section__qualified--list > p {
  margin-top: 16px;
  font-size: 18px;
  text-align: center;
}

/* Section 모집분야 */
.section__realm {
  padding: 40px 0 0;
  background: var(--color-blue);
  text-align: center;
  scroll-margin-top: 80px;
}
.section__realm .inner {
  position: relative;
}
.section__realm .inner:before {
  content: "";
  position: absolute;
  bottom: -288px;
  left: -238px;
  width: 366px;
  aspect-ratio: 366 / 367;
  background: url("../images/img_section3_heart1.svg") no-repeat center center / 100% 100%;
}
.section__realm .inner:after {
  content: "";
  position: absolute;
  top: -138px;
  right: -456px;
  width: 634px;
  aspect-ratio: 634 / 458;
  background: url("../images/img_section3_hex1.svg") no-repeat center center / 100% 100%;
}
.section__realm h3 {
  margin-bottom: 20px;
  font-size: 48px;
  font-weight: bold;
  color: #fff;
}
.section__realm--description {
  margin-bottom: 40px;
  font-size: 28px;
  color: #fff;
}
.section__realm--content {
  display: flex;
  gap: 41px;
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 73px;
}
.section__realm--content .btn__detail {
  height: 380px;
  padding-top: 226px;
  border-radius: 20px;
  border-width: 30px;
  border-style: solid;
}
.section__realm--content .btn__detail h4 {
  margin-bottom: 8px;
  font-size: 32px;
  font-weight: bold;
  color: var(--color-blue);
  line-height: 1.4;
}
.section__realm--content .btn__detail p {
  font-size: 22px;
  color: var(--color-blue);
}
.section__realm--content .btn__volunteer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  border-radius: 20px;
  font-size: 32px;
  font-weight: bold;
  color: var(--color-blue);
}
.section__realm--ai_dc,
.section__realm--marketing {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 21px;
}
.section__realm--ai_dc .btn__detail {
  background: url("../images/img_section3_item1.svg") no-repeat center 10px #d7d1f5;
  border-color: #afa3eb;
}
.section__realm--ai_dc .btn__volunteer {
  background: #d7d1f5;
}
.section__realm--marketing .btn__detail {
  background: url("../images/img_section3_item2.svg") no-repeat center 10px #ffc6ca;
  border-color: #ff9fa6;
}
.section__realm--marketing .btn__volunteer {
  background: #ffc6ca;
}
.section__realm .openchat-wrap {position:relative;margin:60px auto 0;padding:0 73px;z-index:10;}
.section__realm .openchat-wrap .notice {display:flex;justify-content:center;align-items:center;gap:0 4px;font-size:24px;color:#fff;}
.section__realm .openchat-wrap .notice strong {color:#ff404e;font-weight:700;}
.section__realm .openchat-wrap .link-group {margin-top:40px;display:grid;grid-template-columns:repeat(2,1fr);column-gap: 40px;}
.section__realm .openchat-wrap .link-group .link {display:flex;justify-content:center;align-items:center;height:116px;border-radius:20px;font-size:32px;font-weight:700;line-height:120%;color:var(--color-blue);}
.section__realm .openchat-wrap .link-group .link.ai {background-color:#D7D1F5;}
.section__realm .openchat-wrap .link-group .link.marketing {background-color:#ffc6ca;}

/* Section Video */
.section__video {
  padding: 60px 0;
  background: var(--color-blue);
}
.section__video--visual {
  overflow: hidden;
  position: relative;
  width: 100%;
  aspect-ratio: 960 / 540;
  background: #ddd;
  border-radius: 30px;
  cursor: pointer;
}
.section__video--visual:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 80px;
  aspect-ratio: 1 / 1;
  background: url("../images/icon_play1.svg") no-repeat center center / 100% 100%;
  transform: translate(-50%, -50%);
}
.section__video--visual img {
  display: block;
  width: 100%;
  height: 100%;
}
.section__video--list {
  display: flex;
  gap: 24px;
  margin-top: 20px;
}
.section__video--item {
  flex: 1 1 0;
  position: relative;
  overflow: hidden;
  aspect-ratio: 222 / 126;
  background: #c4c4c4;
  border-radius: 20px;
  cursor: pointer;
}
.section__video--item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  border: 8px solid #9a8be6;
  border-radius: 20px;
}
.section__video--item img {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.section__video--item span {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  font-size: 20px;
  color: #fff;
  text-align: center;
}
.section__video--item.disabled {
  cursor: default;
}
.section__video--item:not(.disabled):after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  background: url("../images/icon_more1.svg") no-repeat center center rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.section__video--item:not(.disabled):hover:after {
  opacity: 1;
}
.section__video p {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-top: 28px;
  font-size: 24px;
  color: #fff;
}
.section__video p img {
  margin-top: -2px;
}
.section__video p strong {
  font-weight: bold;
  color: #ff404e;
}

/* Section 절차 및 일정 */
.section__procedure {
  padding-bottom: 200px;
  text-align: center;
  scroll-margin-top: 120px;
}
.section__procedure .inner {
  position: relative;
}
.section__procedure .inner:before {
  content: "";
  position: absolute;
  top: -16px;
  right: -191px;
  z-index: 1;
  width: 339px;
  aspect-ratio: 339 / 286;
  background: url("../images/img_section5_heart1.svg") no-repeat center center / 100% 100%;
}
.section__procedure .inner:after {
  content: "";
  position: absolute;
  bottom: -341px;
  left: -577px;
  z-index: 1;
  width: 1834px;
  aspect-ratio: 1834 / 658;
  background: url("../images/img_section5_line1.svg") no-repeat center center / 100% 100%;
}
.section__procedure--box {
  position: relative;
  z-index: 2;
  padding: 60px 25px;
  background: rgba(26, 26, 26, 0.7);
  border-radius: 30px;
}
.section__procedure h3 {
  margin-bottom: 50px;
  font-size: 48px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  line-height: 1;
}
.section__procedure--list {
  display: flex;
  gap: 28px;
}
.section__procedure--item {
  flex: 1 1 0;
  position: relative;
  padding-top: 85px;
  text-align: center;
}
.section__procedure--item p { 
  font-size: 16px;
  color: #fff;
}
.section__procedure--img {
  position: relative;
  margin-bottom: 20px;
}
.section__procedure--img:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -28px;
  width: 28px;
  aspect-ratio: 1 / 1;
  background: url("../images/icon_right1.svg") no-repeat center center / 100% 100%;
  transform: translate(0, -50%);
}
.section__procedure--img img {
  display:block;
  margin: 0 auto;
}
.section__procedure--item:first-child .section__procedure--img:before {
  display: none;
}
.section__procedure--item dl {
  position: absolute;
  top:0;
  left: 50%;
  transform: translate(-50%, 0);
}
.section__procedure--item dl dt {
  font-size: 20px;
  font-weight: bold;
  color: #d7d1f5;
  line-height: 1.4;
  white-space: nowrap;
}
.section__procedure--item dl dd {
  font-size: 18px;
  color: #cdcdcd;
  line-height: 1.4;
  letter-spacing: -0.8px;
}
.section__procedure ul {
  display: block;
  width: 550px;
  margin: 62px auto 0;
  padding: 20px;
  background: #ebe8fa;
  border-radius: 20px;
}
.section__procedure ul li {
  position: relative;
  padding-left: 28px;
  font-size: 18px;
  color: #1a1a1a;
  text-align: left;
  line-height: 1.6;
  word-break: keep-all;
}
.section__procedure ul li:before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 5px;
  aspect-ratio: 1 / 1;
  background: #1a1a1a;
  border-radius: 5px;
}

/* Section 우리가 일 하는 방식 */
.section__method {
  position: relative;
  z-index: 2;
  padding: 180px 0;
  background: #fff;
}
.section__method:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  width: 1920px;
  aspect-ratio: 1920 / 883;
  background: url("../images/img_section6_line1.svg") no-repeat center center / 100% 100%;
  transform: translate(-50%, 0);
}
.section__method--title {
  position: relative;
  z-index: 2;
  text-align: center;
  scroll-margin-top: 120px;
}
.section__method--title h3 {
  margin-bottom: 20px;
  font-size: 48px;
  font-weight: bold;
}
.section__method--title p {
  font-size: 28px;
  color: var(--color-blue);
  line-height: 1.4;
}
.section__method--info {
  position: relative;
  margin-bottom: 170px;
  padding-top: 121px;
}
.section__method--info dl dt {
  position: relative;
  z-index: 2;
  margin-bottom: 8px;
  font-size: 24px;
  color: #191919;
  line-height: 1.4;
}
.section__method--info dl dt strong {
  font-weight: bold;
}
.section__method--info dl dd {
  position: relative;
  z-index: 2;
  font-size: 20px;
  color: #4d4d4d;
  line-height: 1.4;
}
.section__method--first {
  position: relative;
  margin-bottom: 109px;
  padding-left: 532px;
}
.section__method--first:before {
  content: "";
  position: absolute;
  top: -133px;
  left: 188px;
  z-index: 1;
  width: 1251px;
  aspect-ratio: 1251 / 361;
  background: url("../images/img_section6_dir2.svg") no-repeat center left / 100% 100%;
}
.section__method--first:after {
  content: "";
  position: absolute;
  top: 95px;
  right: 89px;
  z-index: 1;
  width: 143px;
  aspect-ratio: 1 / 1;
  background: url("../images/icon_hand2.svg") no-repeat center left / 100% 100%;
}
.section__method--second {
  position: relative;
  z-index: 3;
  padding-left: 37px;
}
.section__method--second:before {
  content: "";
  position: absolute;
  top: -159px;
  left: -480px;
  z-index: 1;
  width: 1156px;
  aspect-ratio: 1156 / 413;
  background: url("../images/img_section6_dir1.svg") no-repeat center left / 100% 100%;
}
.section__method--second:after {
  content: "";
  position: absolute;
  top: -164px;
  right: 793px;
  z-index: 1;
  width: 143px;
  aspect-ratio: 1 / 1;
  background: url("../images/icon_hand1.svg") no-repeat center left / 100% 100%;
}
.section__method--video {
  position: relative;
}
.section__method--video:before {
  content: "";
  position: absolute;
  top: -268px;
  right: -419px;
  z-index: 1;
  width: 661px;
  aspect-ratio: 661 / 561;
  background: url("../images/img_section6_spring1.svg") no-repeat center left / 100% 100%;
}
.section__method--video:after {
  content: "";
  position: absolute;
  top: 268px;
  left: -129px;
  z-index: 1;
  width: 202px;
  aspect-ratio: 1 / 1;
  background: url("../images/img_section6_spark1.svg") no-repeat center left / 100% 100%;
}
.section__method--video p {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 2;
  margin-bottom: 24px;
  font-size: 24px;
}
.section__method--video p strong {
  font-weight: bold;
  color: #ff404e;
}
.section__method--video p img {
  margin-top: -4px;
}
.section__method--video a {
  display: block;
  overflow: hidden;
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 960 / 540;
  background: #ddd;
  border-radius: 30px;
  cursor: pointer;
}
.section__method--video a:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 80px;
  aspect-ratio: 1 / 1;
  background: url("../images/icon_play1.svg") no-repeat center center / 100% 100%;
  transform: translate(-50%, -50%);
}
.section__method--video a img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Section Balance */
.section__balance {
  padding: 180px 0;
  background: #ebe8fa;
}
.section__balance .inner {
  position: relative;
}
.section__balance .inner:before {
  content: "";
  position: absolute;
  top: -180px;
  left: -450px;
  z-index: 1;
  width: 554px;
  aspect-ratio: 554 / 651;
  background: url("../images/img_section7_round1.svg") no-repeat center center / 100% 100%;
}
.section__balance .inner:after {
  content: "";
  position: absolute;
  bottom: -180px;
  left: 850px;
  z-index: 1;
  width: 562px;
  aspect-ratio: 562 / 468;
  background: url("../images/img_section7_heart1.svg") no-repeat center center / 100% 100%;
}
.section__balance h3 {
  margin-bottom: 59px;
  font-size: 48px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  scroll-margin-top: 120px;
}
.section__balance ul {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  position: relative;
  z-index: 2;
}
.section__balance ul li {
  flex: 0 1 auto;
  overflow: hidden;
  width: calc((100% - 48px) / 3);
  aspect-ratio: 1 / 1;
  padding-top: 205px;
  background-repeat: no-repeat;
  background-position: center 59px;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 16px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
.section__balance ul li:nth-child(2n) {
  background-color: #5e45d7;
}
.section__balance ul li:nth-child(1) {
  background-image: url("../images/icon_balance_off1.svg");
}
.section__balance ul li:nth-child(2) {
  background-image: url("../images/icon_balance_off2.svg");
}
.section__balance ul li:nth-child(3) {
  background-image: url("../images/icon_balance_off3.svg");
}
.section__balance ul li:nth-child(4) {
  background-image: url("../images/icon_balance_off4.svg");
}
.section__balance ul li:nth-child(5) {
  background-image: url("../images/icon_balance_off5.svg");
}
.section__balance ul li:nth-child(6) {
  background-image: url("../images/icon_balance_off6.svg");
}
.section__balance ul li:nth-child(7) {
  background-image: url("../images/icon_balance_off7.svg");
}
.section__balance ul li:nth-child(8) {
  background-image: url("../images/icon_balance_off8.svg");
}
.section__balance ul li:nth-child(9) {
  background-image: url("../images/icon_balance_off9.svg");
}
.section__balance ul li:nth-child(10) {
  background-image: url("../images/icon_balance_off10.svg");
}
.section__balance ul li:nth-child(11) {
  background-image: url("../images/icon_balance_off11.svg");
}
.section__balance ul li:nth-child(12) {
  background-image: url("../images/icon_balance_off12.svg");
}
.section__balance ul li:nth-child(13) {
  background-image: url("../images/icon_balance_off13.svg");
}
.section__balance ul li:nth-child(14) {
  background-image: url("../images/icon_balance_off14.svg");
}
.section__balance ul li:nth-child(15) {
  background-image: url("../images/icon_balance_off15.svg");
}
.section__balance ul li h4 {
  font-size: 32px;
  font-weight: bold;
  color: var(--color-blue);
  line-height: 1;
}
.section__balance ul li:nth-child(2n) h4 {
  color: #fff;
}
.section__balance ul li p {
  margin-top: 20px;
  font-size: 20px;
  color: #fff;
  line-height: 1.4;
  opacity: 0;
}
.section__balance ul li:hover {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 0;
  background-position: center top;
  background-color: #3617ce;
  border: 6px solid #725cdd;
  /* transition:0.5s ease; */
}
.section__balance ul li:hover h4 {
  color: #fff;
}
.section__balance ul li:hover p {
  opacity: 1;
}
.section__balance ul li:nth-child(1):hover {
  background-image: url("../images/icon_balance_on1.svg");
}
.section__balance ul li:nth-child(2):hover {
  background-image: url("../images/icon_balance_on2.svg");
}
.section__balance ul li:nth-child(3):hover {
  background-image: url("../images/icon_balance_on3.svg");
}
.section__balance ul li:nth-child(4):hover {
  background-image: url("../images/icon_balance_on4.svg");
}
.section__balance ul li:nth-child(5):hover {
  background-image: url("../images/icon_balance_on5.svg");
}
.section__balance ul li:nth-child(6):hover {
  background-image: url("../images/icon_balance_on6.svg");
}
.section__balance ul li:nth-child(7):hover {
  background-image: url("../images/icon_balance_on7.svg");
}
.section__balance ul li:nth-child(8):hover {
  background-image: url("../images/icon_balance_on8.svg");
}
.section__balance ul li:nth-child(9):hover {
  background-image: url("../images/icon_balance_on9.svg");
}
.section__balance ul li:nth-child(10):hover {
  background-image: url("../images/icon_balance_on10.svg");
}
.section__balance ul li:nth-child(11):hover {
  background-image: url("../images/icon_balance_on11.svg");
}
.section__balance ul li:nth-child(12):hover {
  background-image: url("../images/icon_balance_on12.svg");
}
.section__balance ul li:nth-child(13):hover {
  background-image: url("../images/icon_balance_on13.svg");
}
.section__balance ul li:nth-child(14):hover {
  background-image: url("../images/icon_balance_on14.svg");
}
.section__balance ul li:nth-child(15):hover {
  background-image: url("../images/icon_balance_on15.svg");
}
.section__balance a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100px;
  margin-top: 60px;
  background: var(--color-blue);
  border-radius: 20px;
  font-size: 32px;
  font-weight: bold;
  color: #fff;
}

/* Section FAQ */
.section__faq {
  position: relative;
  padding: 180px 0;
}
.section__faq:before {
  content: "";
  position: absolute;
  top: 93px;
  left: 50%;
  z-index: 1;
  width: 1920px;
  aspect-ratio: 1920 / 590;
  background: url("../images/img_section8_line1.svg") no-repeat center center / 100% 100%;
  transform: translate(-50%, 0);
}
.section__faq .inner {
  position: relative;
  z-index: 2;
}
.section__faq .inner:before {
  content: "";
  position: absolute;
  top: 200px;
  left: -550px;
  z-index: 1;
  width: 300px;
  aspect-ratio: 212 / 294;
  background: url("../images/img_section8_hex1.svg") no-repeat center center / 100% 100%;
}
.section__faq .inner:after {
  content: "";
  position: absolute;
  top: 442px;
  left: 920px;
  z-index: 1;
  width: 546px;
  aspect-ratio: 546 / 610;
  background: url("../images/img_section8_spring1.svg") no-repeat center center / 100% 100%;
}
.section__faq h3 {
  margin-bottom: 40px;
  font-size: 48px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  line-height: 1;
  scroll-margin-top: 120px;
}
.section__faq ul {
  position: relative;
  z-index: 2;
}
.section__faq details {
  border-bottom: 1px solid #d6d6d6;
}
.section__faq details summary {
  display: flex;
  padding: 30px 40px;
  background: url("../images/icon_arrow_down1.svg") no-repeat right 10px center;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
  word-break: keep-all;
}
.section__faq details[open] summary {
  background-image: url("../images/icon_arrow_up1.svg");
}
.section__faq details summary span {
  flex: 0 1 auto;
  margin-right: 12px;
  font-weight: bold;
}
.section__faq details summary::marker {
  display: none;
  font-size: 0;
}
.section__faq details summary::-webkit-details-marker {
  display: none;
}
.section__faq details p {
  padding: 0 56px 30px;
  font-size: 20px;
  color: #ebebeb;
  line-height: 1.4;
  word-break: keep-all;
}
.section__faq--timer {
  padding: 80px 56px;
}
.section__faq--timer h4 {
  margin-bottom: 20px;
  font-size: 48px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  line-height: 1;
}
.section__faq--timer p {
  margin-top: 20px;
  font-size: 48px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  line-height: 1;
}
.section__faq--tick-label {
  display: flex;
  margin-top: 13px;
}
.section__faq--tick-label span {
  flex: 1 1 0;
  padding: 0 16px;
  font-size: 31px;
  color: #fff;
  text-align: center;
}
.section__faq .btn__volunteer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100px;
  background: #d7d1f5;
  border-radius: 20px;
  font-size: 32px;
  font-weight: bold;
  color: var(--color-blue);
}

/* Footer */
footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  background: #1e0d73;
  font-size: 16px;
  color: #fff;
}

/* Media Query */
@media only screen and (min-width: 600px) {
  header li a {
    transition: color 0.2s ease-in-out;
  }
  header li a:hover {
    color: #ff7983;
  }
}

@media only screen and (max-width: 1130px) {
  header {
    justify-content: center;
  }
  header ul {
    display: none;
  }
}

@media only screen and (max-width: 1020px) {
  .section__intro {
    padding: 120px 0 80px;
    background-size: 686px;
    background-position: center 42px;
  }
  .section__intro h3 {
    font-size: 46px;
  }
  .section__intro p {
    margin-top: 5px;
    font-size: 24px;
  }
  .section__intro--description {
    margin-top: 30px;
    font-size: 25px;
  }
  .section__qualified--info {
    gap: 10px;
    height: 350px;
  }
  .section__qualified--info h3 {
    font-size: 35px;
  }
  .section__qualified--info p {
    font-size: 18px;
  }
  .section__qualified--list {
    margin-top: 40px;
  }
  .section__qualified--list h3 {
    margin-bottom: 20px;
    font-size: 35px;
  }
  .section__qualified--list dt {
    width: 80px;
    font-size: 20px;
  }
  .section__qualified--list dd {
    font-size: 18px;
  }
  .section__qualified--list dd ul li {
    font-size: 16px;
  }
  .section__qualified--list > p {
    font-size: 14px;
  }
  .section__realm h3 {
    margin-bottom: 10px;
    font-size: 35px;
  }
  .section__realm--description {
    font-size: 20px;
  }
  .section__realm--content {
    padding: 0 20px;
  }
  .section__video--item span {
    font-size: 16px;
  }
  .section__video p {
    font-size: 18px;
  }
  .section__video p img {
    width: 30px;
    margin-top: -3px;
  }
  .section__procedure {
    padding-bottom: 80px;
  }
  .section__procedure h3 {
    font-size: 35px;
  }
  .section__procedure--list {
    flex-wrap: wrap;
    justify-content: center;
  }
  .section__procedure--item {
    flex: 0 1 auto;
  }
  .section__procedure--item p {
    white-space: nowrap;
  }
  .section__procedure ul {
    max-width: 100%;
  }
  .section__method {
    padding: 80px 0;
  }
  .section__method--title h3 {
    font-size: 35px;
  }
  .section__method--title p {
    font-size: 20px;
  }
  .section__method--info {
    padding-top: 80px;
  }
  .section__method--info dl dt {
    font-size: 19px;
  }
  .section__method--info dl dd {
    font-size: 16px;
  }
  .section__method--first {
    padding-left: 47%;
  }
  .section__method--first:before {
    top: -76px;
    left: 30%;
    width: 800px;
  }
  .section__method--second:before {
    top: -103px;
    left: auto;
    right: 31%;
    width: 800px;
  }
  .section__method--first:after {
    right: 8%;
    width: 99px;
  }
  .section__method--second:after {
    top: -119px;
    left: 8%;
    right: auto;
    width: 99px;
  }
  .section__method--video p {
    font-size: 18px;
  }
  .section__method--video p img {
    width: 25px;
  }
  .section__balance {
    padding: 80px 0;
  }
  .section__balance h3 {
    margin-bottom: 40px;
    font-size: 35px;
  }
  .section__balance ul {
    gap: 16px;
  }
  .section__balance ul li {
    padding-top: 19vw;
    background-size: 38% auto;
    background-position: center 34%;
  }
  .section__balance ul li:hover {
    background-size: 100% 100%;
  }
  .section__balance ul li h4 {
    font-size: 3vw;
  }
  .section__balance ul li p {
    font-size: 1.8vw;
  }
  .section__faq {
    padding: 80px 0;
  }
  .section__faq h3 {
    font-size: 35px;
  }
  .section__faq details summary {
    font-size: 18px;
  }
  .section__faq details p {
    font-size: 16px;
  }
  .section__faq--timer h4,
  .section__faq--timer p {
    font-size: 35px;
  }
  .floating {
    bottom: 20px;
    right: 20px;
    transform: scale(0.8);
    transform-origin: right bottom;
  }
  .modal__header {
    height: 80px;
    padding-top: 30px;
  }
  .modal__header h2 {
    font-size: 35px;
  }
  .modal__header .btn__close {
    top: 20px;
    width: 45px;
  }
  .modal__realm .modal__body li dt {
    font-size: 20px;
  }
  .modal__realm .modal__body li dd {
    font-size: 16px;
  }
  .modal__video .btn__close {
    top: -70px;
    width: 50px;
    background-size: 18px auto;
  }
  .modal__video .area__video {
    width: 100%;
  }
  .section__realm .openchat-wrap {
    padding:0 20px;
  }
}

@media only screen and (max-width: 800px) {
  .section__realm--content .btn__detail {
    height: 300px;
    padding-top: 135px;
    background-size: 200px auto;
  }
  .section__realm--content .btn__detail h4 {
    font-size: 20px;
  }
  .section__realm--content .btn__volunteer {
    height: 60px;
    font-size: 20px;
  }
  .section__video--item span {
    font-size: 14px;
  }
  .section__video p {
    gap: 3px;
    font-size: 14px;
  }
  .section__video--item {
    border-radius: 10px;
  }
  .section__video--item:before {
    border-width: 4px;
    border-radius: 10px;
  }
  .section__method--video p {
    gap: 4px;
    font-size: 14px;
  }
  .section__method--video p img {
    width: 20px;
  }
  .section__balance a,
  .section__faq .btn__volunteer {
    height: 60px;
    font-size: 20px;
  }
  .section__realm .openchat-wrap .link-group .link {
    height:90px;
    font-size:20px;
  }
}

@media only screen and (max-width: 600px) {
  .inner {
    padding: 0 15px;
  }
  header {
    height: 60px;
    padding-top: 20px;
  }
  header h1 img {
    display: block;
    width: 150px;
  }
  .floating {
    right: 15px;
    bottom: 15px;
    transform: scale(0.45);
  }
  .container {
    padding-top: 60px;
  }
  .section__intro {
    padding: 80px 0 40px;
    background-size: 452px;
    background-position: center 28px;
  }
  .section__intro h3 {
    font-size: 30px;
  }
  .section__intro p {
    font-size: 16px;
  }
  .section__intro--description {
    width: 250px;
    margin: 20px auto 0;
    font-size: 16px;
    word-break: keep-all;
  }
  .section__qualified {
    padding-bottom: 30px;
  }
  .section__qualified--info {
    height: auto;
    padding: 30px 15px;
    border-radius: 15px;
  }
  .section__qualified--info h3 {
    font-size: 25px;
  }
  .section__qualified--info p {
    font-size: 15px;
    word-break: keep-all;
  }
  .section__qualified--info p br {
    display: none;
  }
  .section__qualified--list {
    margin-top: 20px;
    padding: 30px 0;
    border-radius: 15px;
  }
  .section__qualified--list h3 {
    margin-bottom: 10px;
    font-size: 25px;
  }
  .section__qualified--list dl {
    padding: 15px;
  }
  .section__qualified--list dt {
    width: 40px;
    font-size: 16px;
  }
  .section__qualified--list dd {
    font-size: 14px;
    word-break: keep-all;
  }
  .section__qualified--list dd ul li {
    font-size: 13px;
  }
  .section__qualified--list > p {
    padding: 0 15px;
    font-size: 12px;
    word-break: keep-all;
  }
  .section__realm h3 {
    font-size: 25px;
  }
  .section__realm--description {
    margin-bottom: 20px;
    font-size: 16px;
    word-break: keep-all;
  }
  .section__realm--content {
    gap: 12px;
    padding: 0;
  }
  .section__realm--content .btn__detail {
    height: auto;
    padding: 100px 0 20px;
    background-position: center top;
    background-size: 150px;
    border-width: 10px;
    border-radius: 15px;
  }
  .section__realm--content .btn__detail h4 {
    margin-bottom: 5px;
    font-size: 16px;
  }
  .section__realm--content .btn__detail p {
    font-size: 16px;
  }
  .section__realm--content .btn__volunteer {
    border-radius: 15px;
  }
  .section__realm--ai_dc,
  .section__realm--marketing {
    gap: 12px;
  }
  .section__video--visual {
    border-radius: 15px;
  }
  .section__video--list {
    flex-wrap: wrap;
    gap: 10px;
  }
  .section__video--item {
    flex: 0 1 calc(50% - 5px);
  }
  .section__video--visual:before {
    width: 50px;
  }
  .section__video p {
    align-items: flex-start;
    margin-top: 15px;
    word-break: keep-all;
    line-height: 1.4;
  }
  .section__video p img {
    width: 20px;
    margin-top: -2px;
  }
  .section__procedure {
    padding-bottom: 60px;
  }
  .section__procedure--box {
    padding: 30px 15px 15px;
  }
  .section__procedure h3 {
    margin-bottom: 20px;
    font-size: 25px;
  }
  .section__procedure--item {
    width: calc(33.3% - 20px);
    padding-top: 75px;
  }
  .section__procedure--item p {
    font-size: 12px;
  }
  .section__procedure--item:nth-child(4) .section__procedure--img:before {
    display: none;
  }
  .section__procedure--img:before {
    left: -7.4vw;
    width: 7vw;
  }
  .section__procedure--img img {
    display: block;
    width: 80px;
    margin: 0 auto;
  }
  .section__procedure--item dl dt {
    font-size: 16px;
  }
  .section__procedure--item dl dd {
    font-size: 14px;
  }
  .section__procedure ul {
    padding: 15px;
  }
  .section__procedure ul li {
    padding-left: 15px;
    font-size: 14px;
  }
  .section__procedure ul li:before {
    top: 9px;
    left: 4px;
    width: 3px;
  }
  .section__method {
    padding: 60px 0;
  }
  .section__method:before {
    top: 143px;
    left: 50%;
    width: 100%;
  }
  .section__method h3 {
    margin-bottom: 10px;
    font-size: 25px;
  }
  .section__method--title p {
    font-size: 16px;
  }
  .section__method--info dl dt {
    font-size: 14px;
  }
  .section__method--info dl dd {
    font-size: 14px;
  }
  .section__method--first {
    margin-bottom: 90px;
    padding-left: 25vw;
  }
  .section__method--first:before {
    top: -76px;
    left: -9%;
    width: 755px;
  }
  .section__method--first:after {
    top: 65px;
    right: 30px;
    width: 66px;
  }
  .section__method--second:before {
    top: -85px;
    left: auto;
    right: 5%;
    width: 670px;
  }
  .section__method--second:after {
    top: -78px;
    left: 40px;
    right: auto;
    width: 68px;
  }
  .section__method--info {
    margin-bottom: 130px;
  }
  .section__method--video:before {
    top: 40px;
    right: -218px;
    width: 300px;
  }
  .section__method--video:after {
    top: 120px;
    left: -61px;
    width: 100px;
  }
  .section__method--video p {
    align-items: flex-start;
    margin-bottom: 15px;
    line-height: 1.4;
  }
  .section__method--video p img {
    margin-top: -1px;
  }
  .section__method--video a {
    border-radius: 15px;
  }
  .section__method--video a:before {
    width: 50px;
  }
  .section__balance {
    padding: 60px 0;
  }
  .section__balance h3 {
    margin-bottom: 30px;
    font-size: 25px;
  }
  .section__balance ul {
    gap: 10px;
  }
  .section__balance ul li {
    width: calc((100% - 20px) / 3);
  }
  .section__balance ul li p {
    margin-top: 2vw;
    font-size: 10px;
  }
  /* .section__balance ul li p br {
    display: none;
  } */
  .section__balance ul li p span.br {
    display:block;
  }
  .section__balance ul li p br.none {
    display:none;
  }
  .section__balance ul li:hover {
    padding: 3px;
    border-width: 2px;
  }
  .section__balance a,
  .section__faq .btn__volunteer {
    border-radius: 15px;
  }
  .section__balance a {
    margin-top: 30px;
  }
  .section__faq {
    padding: 60px 0;
  }
  .section__faq h3 {
    margin-bottom: 20px;
    font-size: 25px;
  }
  .section__faq details summary {
    padding: 15px 40px 15px 15px;
    background-size: 12px auto;
    font-size: 14px;
  }
  .section__faq details p {
    padding: 0 20px 15px;
    font-size: 13px;
  }
  .section__faq details p br {
    display:none;
  }
  .section__faq--timer {
    padding: 60px 0;
  }
  .section__faq--timer h4,
  .section__faq--timer p {
    font-size: 25px;
  }
  .section__faq--tick-label span {
    font-size: 16px;
  }
  .tick-group {
    margin: 0 5px;
  }

  footer {
    height: 60px;
    font-size: 12px;
  }

  .modal__overlay {
    padding: 30px 15px;
  }
  .modal__content {
    border-radius: 15px;
  }
  .modal__video .area__video {
    border-radius: 15px;
  }
  .modal__header {
    height: 60px;
    padding: 20px 20px 0;
  }
  .modal__header h2 {
    font-size: 25px;
  }
  .modal__header .btn__close {
    top: 16px;
    right: 20px;
    width: 30px;
    background-size: 12px auto;
  }
  .modal__body {
    padding: 15px;
  }
  .modal__realm .modal__body > ul {
    flex-direction: column;
  }
  .modal__realm .modal__body > ul > li {
    flex: 0 1 auto;
    border-radius: 10px;
  }
  .modal__realm .modal__body li dl {
    padding: 20px 15px;
  }
  .modal__realm .modal__body li dl dt {
    font-size: 18px;
  }
  .modal__realm .modal__body li dl dd {
    font-size: 14px;
    word-break: keep-all;
  }
  .modal__realm .modal__body li li:before {
    top: 7px;
  }
  .modal__video .btn__close {
    top: -40px;
    width: 30px;
    background-size: 12px auto;
  }
  .section__realm .openchat-wrap {
    margin-top:30px;
    padding:0;
  }
  .section__realm .openchat-wrap .link-group {
    margin-top:20px;
    column-gap:12px;
  }
  .section__realm .openchat-wrap .link-group .link {
    border-radius:15px;
  }
  .section__realm .openchat-wrap .notice {
    font-size:14px;
  }
  .section__realm .openchat-wrap .notice img {
    width:20px;
    margin-top:-2px;
  }
}