@charset "UTF-8";

:root {
  --primary: #3A68FF;
  --secondary: #00D1E8;
  --padding-x: 80px;
  --base-width: 1000px;
  --font-size: clamp(13px, calc(16 / var(--base-width) * 100vw), 16px);
}

.only-desktop-tablet {  }
.only-mobile { display: none; }
img.only-mobile { margin-inline: auto; }

.container {
  position: relative;
  background: #FFFFFF; }
.contain {
  margin-inline: auto;
  padding-inline: var(--padding-x);
  max-width: calc(var(--base-width) + var(--padding-x)*2); }

.main-title {
  text-align: center; }
.main-title img {
  flex-shrink: 0;
  height: 48px; }
.main-title.line {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.875rem; }
.main-title.line:before,
.main-title.line:after {
  content: '';
  flex-grow: 1;
  width: 100%;
  height: 1px;
  background-color: var(--primary, #3A68FF); }

.floating-item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: scale(1) rotate(0deg);
  animation-name: floating-animate;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: none;
  transform-origin: center center;
  offset-path: path('M 67.6265 19.6887 C 67.6265 19.6887 67.6265 36.8093 67.6265 36.8093');
  offset-rotate: 0deg; }

section {
  --section-3-size: 13.75rem;
  --section-3-space: 4rem;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  line-height: 0;
  text-align: center; }
section img {
  user-select: none; }

.section-1 {
  --scale-a: 0.94;
  --scale-b: 1.06;
  --rotate-a: -3deg;
  --rotate-b: 3deg;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-image: url(/resource/images/eventImg/20250826/bg_sec1.jpg);
  aspect-ratio:  60 / 43; }
.section-1 .main-title-text {
  width: 100%;
  object-fit: cover;
  object-position: 50% 0; }
.section-1 .keyword {
  --mn-size: 92px;
  --mx-size: 163px;
  position: absolute;
  z-index: 2;
  width: clamp(var(--mn-size), 16vw,var(--mx-size));
  height: clamp(var(--mn-size), 16vw,var(--mx-size)); }
.section-1 .keyword:after {
  position: absolute;
  z-index: -1;
  display: block;
  padding: .25rem 1.375rem;
  border: 1px solid var(--primary, #3A68FF);
  border-radius: 8px;
  min-width: 108px;
  color: var(--primary, #3A68FF);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.5em;
  white-space: nowrap; }
.section-1 .keyword:nth-child(1) {
  top: clamp(54px, 6%, 102px);
  left: clamp(10px, 6%, 182px); }
.section-1 .keyword:nth-child(1):after {
  content: "바리스타";
  left: -107px;
  bottom: 8px; }
.section-1 .keyword:nth-child(2) {
  top: -8px;
  right: clamp(40px, 9%, 94px); }
.section-1 .keyword:nth-child(2):after {
  content: "CS";
  left: -74px;
  bottom: 8px; }
.section-1 .keyword:nth-child(3) {
  top: 46%;
  left: 44px; }
.section-1 .keyword:nth-child(3):after {
  content: "물류";
  right: -75px;
  bottom: -11px; }
.section-1 .keyword:nth-child(4) {
  top: 28%;
  right: 18%; }
.section-1 .keyword:nth-child(4):after {
  content: "금속재료";
  right: -100px;
  bottom: -11px; }
.section-1 .keyword:nth-child(5) {
  left: 15%;
  bottom: 140px; }
.section-1 .keyword:nth-child(5):after {
  content: "문서사무";
  right: -100px;
  bottom: -11px; }
.section-1 .keyword:nth-child(6) {
  right: -20px;
  bottom: 240px; }
.section-1 .keyword:nth-child(6):after {
  content: "디자인";
  left: -75px;
  bottom: -11px; }

.tabs-wrap {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 100;
  margin-top: -4.5rem; }
.tabs {
  margin-inline: auto;
  padding-inline: 8px;
  width: 100%;
  max-width: 1300px;
  overflow: hidden;
  text-align: center; }
.tabs li {
  position: relative;
  border-radius: 1.25rem 1.25rem 0 0;
  background: linear-gradient(8deg, var(--primary, #3A68FF) 5.82%, var(--secondary, #00D1E8) 110.89%); }
.tabs li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 4.5rem; }
.tabs li.is-active {
  background: #C8EDFF; }

.section-2 {
  padding-block: 7.5rem calc(var(--section-3-size) + 6rem);
  background-image: url(/resource/images/eventImg/20250826/bg_sec2.jpg); }
.section-2 .main-title {
  margin-bottom: 4rem; }
.section-2 .rewards {
  --num: 3;    
  --gap: .75rem;
  display: flex;
  flex-wrap: wrap;
  row-gap: 2rem;
  column-gap: var(--gap); }
.section-2 .rewards li {
  width: calc(100% / var(--num) - (var(--gap) - (var(--gap) * (1 / var(--num))))); }
.section-2 .rewards .item {
  position: relative;
  display: inline-block;
  padding-top: 1.25rem; }
.section-2 .rewards .badge {
  position: absolute;
  top: 0;
  left: 0; }

.section-3 {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--section-3-size) * -1  + var(--section-3-space) * -1);
  padding-block: var(--section-3-space) calc(var(--section-3-space) + 4rem); }
.section-3 .contain {
  margin-inline: auto;
  padding-block: 3rem;
  border-radius: 1.875rem;
  max-width: var(--base-width);
  min-height: calc(var(--section-3-size) * 2);
  background-color: var(--primary, #3A68FF); }
.section-3 .main-title {
  margin-bottom: 1rem; }
.section-3 .text-1 {
  margin-bottom: 1.5rem; }
.section-3 .button-div {
  margin-top: 2rem; }
.section-3 .button-div a {
  display: inline-block; }

.section-4 {
  --padding-x: 0px;
  position: relative;
  z-index: 1;
  margin-top: calc(var(--section-3-size) * -1  );
  padding-block: var(--section-3-size) 8rem;
  min-height: 100svh;
  background-color: #fff;
  background-image: url(/resource/images/eventImg/20250826/bg_sec4.jpg); }
/* .section-4 .contain {
  padding-inline: 0; } */
.section-4 .main-title {
  margin-bottom: 2rem; }
.howto {
  --space: 10rem;
  position: relative;
  padding-bottom: var(--space); }
.howto ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 7rem; }
.howto ul li {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 50%;
  max-width: 450px; }
.howto ul li:nth-child(even) {
  top: var(--space); }
.howto ul li:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 100vw;
  max-width: 680px;
  background-image: url(/resource/images/eventImg/20250826/bg_howto.png);
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  transform: translate(-50%,-50%);
  aspect-ratio: 1; } 
.howto .img-wrap {
  position: relative;
  display: inline-block; }
.howto .item {
  max-height: 90svh; }
.howto .char {
  position: absolute;
  z-index: 2; }
.howto .char1 {
  right: -32px;
  bottom: 140px; }
.howto .char2 {
  right: 0;
  bottom: 42%; }
.howto .char3 {
  left: -90px;
  bottom: 240px; }
.howto .char4 {
  top: 36%;
  right: -66px; }

.section-5 {
  background: linear-gradient(180deg, #00DAFF 1.91%, #27DFFF 10.07%, #4BE3FF 20.27%, #6CE7FF 32.5%, #87EBFF 44.74%, #9DEEFF 59.02%, #AEF0FF 75.33%, #BAF1FF 97.77%, #C1F2FF 126.32%, #C3F3FF 205.86%); }
.section-5 .contain {
  position: relative;
  padding-block: 10rem 8rem; }
.section-5 .button-div {
  position: relative;
  display: inline-block; }
.section-5 .button-div a {
  display: inline-block; }
.section-5 .img-pointer {
  position: absolute;
  right: 8px;
  bottom: -48px; }
.section-5 .char {
  position: absolute;
  left: 0;
  bottom: 0; }

.section-6 {
  padding-block: 10rem 12rem;
  background-image: url(/resource/images/eventImg/20250826/bg_sec6.jpg); }
.section-6 .main-title {
  margin-bottom: 3rem; }
.section-6 .qr-div {
  position: relative;
  z-index: 2;
  margin-top: 3.125rem;
  padding-bottom: 5.625rem; }
.section-6 .qr-div a {
  display: inline-block; }
.section-6 .char {
  position: absolute;
  left: 0;
  bottom: 0; }
  
  
/* ----- footer */
.footer {
  padding-block: 3.75rem;
  background-color: var(--primary, #3A68FF); }
.footer .title {
  margin-bottom: 10px;
  color: #fff;
  font-size: var(--font-size);
  font-weight: 700;
  line-height: 1.5em; }
.bullet-list li {
  position: relative;
  padding-left: 20px;
  color: #fff;
  font-size: .875rem;
  font-weight: 300;
  line-height: 1.375em;
  letter-spacing: -.02em;
  text-align: left; }
.bullet-list li:before {
  content: "";
  position: absolute;
  top: 10px;
  left: 6px;
  border-radius: 50%;
  width: 3px;
  height: 3px;
  background: #fff; }
.bullet-list li ~ li {
  margin-top: 4px; }
.bullet-list strong {
  font-weight: 600; }

@keyframes floating-animate {
  0% {
    transform: scale(var(--scale-a)) rotate(0deg);
    offset-distance: 0%;
    }
  50% {
    transform: scale(var(--scale-b)) rotate(var(--rotate-a));
  }
  100% {
    transform: scale(1) rotate(var(--rotate-b));
    offset-distance: 100%;
  }
}

@media screen and (max-width: 1280px) {
  :root {
    --padding-x: 40px;
  }
}
@media screen and (max-width: 1000px) {
  :root {
    --padding-x: 16px;
  }
  .only-desktop-tablet { display: none !important; }
  .only-mobile { display: block !important; }

  .container:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    padding-bottom: 522.2%;
    background-image: url(/resource/images/eventImg/20250826/bg_sec1_mo.jpg);
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: cover; }
    
  .main-title.line:before,
  .main-title.line:after {
    display: none; }

  section {
    --section-3-size: 0;
    --section-3-space: 0; }

  .section-1 {
    background-image: none;
    margin-bottom: 3rem;
    aspect-ratio:  360 / 581; }
  .section-1 .keyword:after {
    padding: .25rem 1rem;
    border-radius: 6px;
    min-width: 64px;
    font-size: 1rem;
    line-height: 1.375em; }
  .section-1 .keyword:nth-child(3) {
    top: 56%;
    left: -16px; }
  .section-1 .keyword:nth-child(4) {
    top: 16%;
    right: -12px; }
  .section-1 .keyword:nth-child(5) {
    left: 18%;
    bottom: 60px; }
  .section-1 .keyword:nth-child(6) {
    bottom: 160px;}
  .section-1 .keyword:nth-child(1):after {
    right: -70px;
    left: auto;
    bottom: 72px; }
  .section-1 .keyword:nth-child(2):after {
    left: -48px;
    bottom: 23px; }
  .section-1 .keyword:nth-child(3):after {
    right: -24px;
    bottom: -19px; }
  .section-1 .keyword:nth-child(4):after {
    right: auto;
    left: -18px;
    bottom: -39px; }
  .section-1 .keyword:nth-child(5):after {
    right: -82px;
    bottom: 29px; }
  .section-1 .keyword:nth-child(6):after {
    left: -54px; }

  .tabs-wrap {
    display: none;
    margin-top: -3.5rem; }
  .tabs {
    padding-inline: 0; }
  .tabs li {
    border-radius: 1rem 1rem 0 0; }
  .tabs li a {
    height: 3.5rem; }

  .section-2 {
    padding-block: 0rem 4rem;
    background-image: none; }
  .section-2 .main-title {
    margin-bottom: 2rem; }
  .section-2 .rewards {
    --num: 1; }

  .section-3 {
    margin-top: -1.875rem;
    padding-block: 0; }
  .section-3 .contain {
    padding-block: 4rem 3rem; }
  .section-3 .main-title {
    margin-bottom: 2rem; }
  .section-3 .text-1 {
    width: 282px; }
  .section-3 .text-2 {
    width: 249px; }

  .section-4 {
    margin-top: -1.875rem;
    padding-block: 6rem 4rem;
    background-image: none; }
  .howto {
    --space: 0; }
  .howto ul {
    flex-wrap: nowrap;
    justify-content: flex-start;
    scroll-behavior: smooth; }
  .howto ul li {
    width: 100vw;
    max-width: unset;
    height: 100svh; }
  .howto ul li:before {
    max-width: unset; } 

  .section-5 {
    border-radius: 1.875rem; }
  .section-5 .main-title {
    margin-bottom: 1.5rem; }
  .section-5 .contain {
    padding-block: 4rem 0; }
  .section-5 .char {
    position: static;
    margin-top: 2rem;
    width: 72vw;
    max-width: 592px; }

.section-6 {
  padding-block: 4rem 6rem;
  background-image: url(/resource/images/eventImg/20250826/bg_sec6_mo.jpg); }
.section-6 .download-text {
  margin-inline: auto;
  width: 60vw;
  max-width: 400px; }
.section-6 .qr-div {
  margin-inline: auto;
  width: 80%; }
.section-6 .qr-div img {
  width: 32vw;
  max-width: 206px; }
.section-6 .char {
  width: 30vw;
  max-width: 200px; }
  
  .footer {
    padding-block: 2rem; }
  .bullet-list li {
    font-size: 13px; }
}
@media screen and (max-width: 640px) { 
  .section-1 .keyword:nth-child(1) {
    left: 10px; }
}