@font-face {
  font-family: 'SchoolSafetyEraser';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2402_keris@1.0/TTHakgyoansimJiugaeR.woff2') format('woff2');
  font-weight: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Noto+Sans+KR:wght@100..900&display=swap');

@font-face {
  font-family: "GmarketSansMedium";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "GmarketSansBold";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}
#container * {
  font-family: "Noto Sans KR";
}
html,body{
  scroll-behavior: smooth;
}
#sectionMain {
  background: transparent;
  position: relative;
  overflow: hidden;
}
#sectionMain .section_bg {
  position: absolute;
  top:0;left:0;
  height: 100%;
  z-index: -1;
  width: 100%;
}
#sectionMain .section_bg video {
  height: 120%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#sectionMain .scrolldown {
  position: absolute;
  bottom:50px;left:50%;
  transform: translate(-50%, 0);
  z-index: 1;
}
#sectionMain .section_inner{
  display: flex;flex-direction: column;gap:160px;align-items: center;justify-content: center;
  z-index: 1;
  width:100%;height:100vh;
}

#sectionMain .section_inner .section_title {
  text-align: center;display: flex;flex-direction: column;gap:20px;
}
#sectionMain .section_inner .section_title p{
  font-size:38px;font-weight:400;color:#fff;font-family: "GmarketSansMedium";
  text-shadow: 0px 5px 8px rgba(44, 44, 44, 1);
}

#sectionMain .section_inner .section_content {
  display: flex;flex-direction: column;gap:10px;width:622px;height: fit-content;align-items: center;justify-content: center;
}
#sectionMain .section_inner .section_content .apply_wrap{
  display: flex;border-radius:10px;width: 100%;height: 100%;background-color: #c4daff;
}
#sectionMain .section_inner .section_content .apply_wrap .progress {
  display: flex;width: 100%;height:50px;padding:11px 12px 11px 17px;position: relative;
}
#sectionMain .section_inner .section_content .apply_wrap .progress .progress_inner{
  display: flex;width: 100%;background-color: #7d8da9;border-radius: 10px;height: 100%;
}
#sectionMain .section_inner .section_content .apply_wrap .progress .bu01 {
  position: absolute;top:-54px;right:-42px;font-size:16px;font-weight: 700;color:#2c2c2c;
  display: flex;gap:7px;align-items: center;justify-content: center;background-image: url(https://careergate-service.s3.amazonaws.com/img/campusdev/beauty_html_img/event/20250827/bu01.png);
  width:178px;height:52px;background-size: cover;padding-bottom:9px;
}
#sectionMain .section_inner .section_content .apply_wrap .progress .bu02 {
  position: absolute;top:-79px;left:0;font-size:14px;font-weight: 500;color:#2c2c2c;line-height: 15px;
  display: flex;gap:7px;align-items: center;justify-content: center;background-image: url(https://careergate-service.s3.amazonaws.com/img/campusdev/beauty_html_img/event/20250827/bu02.png);
  width:245px;height:71px;background-size: cover;padding-bottom:12px;text-align: center;letter-spacing: -0.4px;display: none;
}
#sectionMain .section_inner .section_content .apply_wrap .progress .bu03 {
  position: absolute;top:-123px;right:-42px;font-size:14px;font-weight: 500;color:#2c2c2c;line-height: 15px;
  display: flex;gap:7px;align-items: center;justify-content: center;background-image: url(https://careergate-service.s3.amazonaws.com/img/campusdev/beauty_html_img/event/20250827/bu02.png);
  width:245px;height:71px;background-size: cover;padding-bottom:12px;text-align: center;letter-spacing: -0.4px;display: none;
}
#sectionMain .section_inner .section_content .apply_wrap .progress .progress_bar {
  background: #0f6efd;width:100%;border-radius: 10px;height:100%;display: flex;align-items: center;
  justify-content: center;
}
#sectionMain .section_inner .section_content .apply_wrap .progress .progress_bar h2 {
  font-size:15px;font-weight: 500;color:#fff;position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);
}
#sectionMain .section_inner .section_content .apply_wrap .progress .progress_bar h2 span {
  font-size:18px;
}
#sectionMain .section_inner .section_content .apply_wrap .apply_btn a{
  display: flex;align-items: center;justify-content: center;background: rgba(20,20,20,1);height: 100%;width: 150px;border-radius: 10px;font-size:20px;font-weight: 500;color:#fff;
}
#sectionMain .section_inner .section_content .apply_wrap .apply_btn a:hover{
  box-shadow: 3px 3px 2px rgba(0,0,0,.29);background: rgba(20,20,20,.8);
}


.section_sticky {
  position: relative;
}
#sticky_menu{
  position: sticky;
  top:0;left:0;
  z-index: 99;
  background: #fff;
  padding: 19px 0;
  transition: transform 0.3s ease;
}
#sticky_menu .section_inner {
  display: flex;align-items: center;justify-content: space-between;
  max-width: 1200px;width:100%;margin:0 auto;
}
#sticky_menu .section_inner .anchor_box {
  display: flex;gap:30px;align-items: center;justify-content: center;
}
#sticky_menu .section_inner .anchor_box a {
  font-size:24px;font-weight: 500;line-height: 1;
}
#sticky_menu .section_inner .anchor_box a.active{
  font-weight:700;color:#0268fe;
}
#sticky_menu .section_inner .anchor_box a:hover{
  font-weight:700;color:#0268fe;
}
#sticky_menu .section_inner .anchor_box span {
  width:1px;height:25px;background: #222;
}
#sticky_menu .section_inner .apply_btn {
  display: flex;gap:20px;align-items: center;justify-content: center;
}
#sticky_menu .section_inner .apply_btn p {
  font-size:25px;color:#000000;font-weight: 500;
}
#sticky_menu .section_inner .apply_btn p span{
  font-weight:900;color:rgba(255,0,246,1);
}
#sticky_menu .section_inner .apply_btn a{
  font-weight:400;background:rgba(255,0,246,1);color: #000;display: flex;align-items: center;gap:8px;font-size: 25px;width: 249px;height:52px;justify-content: center;border-radius: 10px;
}
#sticky_menu .section_inner .apply_btn a:hover{
  background:rgba(200,0,200,1);
}
#sticky_menu .section_inner .apply_btn a span{
  font-weight:700;color:#fff;
}
#section01 {
  background: url(https://careergate-service.s3.amazonaws.com/img/campusdev/beauty_html_img/event/20250827/section01_bg.png);
  position: relative;
  overflow: hidden;
  height: 1217px;
}
#section01 .section_inner {
  display: flex;flex-direction: column;align-items: center;justify-content: center;
  max-width: 1200px;width:100%;margin:0 auto;padding:163px 0 160px;gap:79px;
}
#section01 .section_inner .section01_content {
  display: flex;flex-direction: column;gap:79px;align-items: center;justify-content: center;
}
#section01 .section_inner .section01_content iframe{
  width:1060px;height:565px;
}

#section02 {
  background: url(https://careergate-service.s3.amazonaws.com/img/campusdev/beauty_html_img/event/20250827/section02_bg.png);
  position: relative;
  overflow: hidden;
  height: 959px;
}
#section02 .section_inner {
  display: flex;flex-direction: column;align-items: center;justify-content: center;
  max-width: 1200px;width:100%;margin:0 auto;padding:160px 0 188px;gap:0;position: relative;
}
#section02 .section_inner .section02_content {
  display: flex;flex-direction: column;align-items: center;justify-content: center;gap:30px;position: absolute;bottom:150px;z-index: 5;
}
#section02 .section_inner .section02_content .location_wrap{
  display: flex;gap:15px;align-items: flex-end;justify-content: center;
}
#section02 .section_inner .section02_content .location_wrap > img {
  padding-right:5px;
}
#section02 .section_inner .section02_content .location_wrap a {
  display: flex;
}
#section02 .section_inner .section02_content .date_wrap p{
  font-size:25px;font-weight:400;color: #ffffff;line-height: 1;
}
#section03{
  background: #fff;
  padding: 150px 0 156px;
}
#section03 .section_inner {
  display: flex;align-items: center;justify-content: center;flex-direction: column;
  max-width: 1200px;width:100%;margin:0 auto;gap:80px;
}
#section03 .section_inner .section_title h2{
    font-family: "GmarketSansMedium";font-weight: 400;font-size:70px;color: #333333;    line-height: 1;
}
#section03 .section_inner .section_title h2 span{
  font-family: "GmarketSansBold";font-weight: 400;font-size:70px;color: #1200ff;    line-height: 1;
}
#section03 .section_inner .section03_content {
  box-shadow: 6px 13px 32px rgba(59,59,59,0.5);
  border-radius: 20px;
  width: 1142px;
  height: 522px;
  background-image: url(https://careergate-service.s3.amazonaws.com/img/campusdev/beauty_html_img/event/20250827/section03_content_bg.png);
  background-color: rgba(59,59,59,0.2);
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;align-items: center;justify-content: center;flex-direction: column;
}

#section03 .section_inner .section03_content .content_txt {
  display: flex;gap:10px;align-items: center;
} 
#section03 .section_inner .section03_content .content_txt p {
  font-size:20px;font-weight:300;color:#ffffff;padding-right:10px;
}
#section03 .section_inner .section03_content .content_txt > span {
  width:120px;height:1px;background: #fff;
}
#section03 .section_inner .section03_content .content_txt h2 {
  font-size:30px;font-weight:400;color:#ffffff;
}
#section03 .section_inner .section03_content .content_txt h2 span{
  font-size:30px;font-weight:700;color:#fff602;
}
#section03 .section_inner .section03_content > h2 {
  font-size:60px;font-weight:700;color:#ffffff;line-height: 1.6;
}
#section03 .section_inner .section03_content > h2 > span > span {
  font-family: "GmarketSansBold";font-size: 90px;line-height: 1;color: #fff602;animation: twin 2s infinite;transition:all 0s;opacity: 1;
}
@keyframes twin {
  0%{
    opacity:0;
  }
  50%{
    opacity:1;
  }
  100%{
    opacity:0;
  }
}
#section04 {
  background: url(https://careergate-service.s3.amazonaws.com/img/campusdev/beauty_html_img/event/20250827/section04_bg.png);
  position: relative;
  overflow: hidden;
  height: 360px;
}
#section04 .section_inner {
  display: flex;flex-direction: column;align-items: center;justify-content: flex-end;
  max-width: 1200px;width:100%;margin:0 auto;height: 100%;padding:9px 0;
}
#section05 {
  background: url(https://careergate-service.s3.amazonaws.com/img/campusdev/beauty_html_img/event/20250827/section05_bg.png);
  position: relative;
  overflow: hidden;
  height: 360px;
}
#section05 .section_inner {
  display: flex;flex-direction: column;align-items: center;justify-content: flex-end;
  max-width: 1200px;width:100%;margin:0 auto;height: 100%;padding:9px 0;
}
#section06 {
  background: #fff;
}
#section06 .section_inner {
  display: flex;flex-direction: column;align-items: center;justify-content: center;
  max-width: 1200px;width:100%;margin:0 auto;height: 100%;padding:58px 0 0;gap:200px;
}
#section06 .section_inner .section_content {
  background: url(https://careergate-service.s3.amazonaws.com/img/campusdev/beauty_html_img/event/20250827/section06_content_bg.png);
  position: relative;
  height: 285px;
  width:1136px;
  display: flex;
  flex-direction: column;gap:42px;
  align-items: center;justify-content: flex-end;
  padding:130px 121px 86px;
}
#section06 .section_inner .section_content h2 {
  font-size:90px;color: #fff;font-weight:700;line-height:1;letter-spacing: -4px;
  background: linear-gradient(to right, #a524ff, #00a2ff);width:100%;position: relative;
  top:-35px;text-align: center;padding:10px 0 20px;
}
#section06-1 {
  background: #fff;
  position: relative;
  overflow: hidden;
  padding:97px 0;
}
#section06-1 .section_inner {
  display: flex;flex-direction: column;align-items: center;justify-content: center;
  max-width: 1200px;width:100%;margin:0 auto;
}

#section07 {
  background: url(https://careergate-service.s3.amazonaws.com/img/campusdev/beauty_html_img/event/20250827/section07_bg.png);
  position: relative;
  overflow: hidden;
  height: 374px;
  background-position: center center;
}
#section07 .section_inner {
  display: flex;flex-direction: column;align-items: center;justify-content: center;
  max-width: 1200px;width:100%;margin:0 auto;height: 100%;gap:81px;
}

#section08 {
  background-color: #464646;
  height: 220px;
}
#section08 .section_inner {
  display: flex;flex-direction: column;align-items: center;justify-content: center;
  max-width: 1200px;width:100%;margin:0 auto;height: 100%;
}


#section09 {
  background-image: url(https://careergate-service.s3.amazonaws.com/img/campusdev/beauty_html_img/event/20250827/section09_bg.png);
  background-color: #00f6ff;
  background-position: center;
  position: relative;
  overflow: hidden;
  height: 3504px;
}
#section09 .section_inner {
  display: flex;flex-direction: column;align-items: center;justify-content: flex-start;
  max-width: 1200px;width:100%;margin:0 auto;height: 100%;gap:164px;padding:159px 0 0;
}
#section09 .section_inner .section_unit{
  text-align: center;display: flex;flex-direction: column;gap:83px;

}
#section09 .section_inner .section_unit .section09_content {
  height:881px;position: relative;width: 1133px;
}
#section09 .section_inner .section_unit .graph_container {
  background: #fff;width: 100%;height:590px;border-top-right-radius: 30px;border-bottom-right-radius: 30px;border-bottom-left-radius: 30px;box-shadow: 7px 5px 18px rgba(3,24,55,.1);z-index: 2;position: relative;
  display:flex;gap:200px;padding:250px 215px 28px;align-items: flex-end;
}
#section09 .section_inner .section_unit .graph_container > span {
  font-family: 'SchoolSafetyEraser';font-size:80px;font-weight:400;
  background: linear-gradient(to top, #0000ff, #ff00f6);
  color: transparent;
  -webkit-background-clip: text;
  position: absolute;top:162px;left:372px;
  line-height: 1.1;
  letter-spacing: -5px;
  width: 250px;
  transition: all 1s ease-in-out;scale: 0.5;opacity: 0;
  z-index: 1;
}
#section09 .section_inner .section_unit .graph_container > span.active{
  scale: 1;opacity: 1;transition: all 1s ease-in-out;
}
#section09 .section_inner .section_unit .graph_container .arrow_wrap{
  z-index: 0;position: relative;position: absolute;top:108px;left:326px;width: 424px;height:276px;overflow: hidden;
}
#section09 .section_inner .section_unit .graph_container .arrow_bg{
  background: #fff;width:100%;height:100%;position: absolute;top:0;left:0;transform: translateY(0);
}
#section09 .section_inner .section_unit .graph_container .arrow_wrap.chk3.active .arrow_bg{
  transform: translateY(-276px);transition: all 1s ease-in-out;
}
#section09 .section_inner .section_unit .graph_container #arrow {
  
}
#section09 .section_inner .section_unit .graph_container #revealMask {
  position: absolute;top:108px;left:326px;
}
#section09 .section_inner .section_unit .graph_container .graph_unit {
  display: flex;flex-direction: column;gap:3px;align-items: center;position: relative;
}
#section09 .section_inner .section_unit .graph_container .graph_unit.graph_unit01 > img {
  position: absolute;top:20px;right:-192px;display: none;
}
#section09 .section_inner .section_unit .graph_container .graph_unit.graph_unit02 > img {
  position: absolute;top:-10px;right:-175px;display: none;
}
#section09 .section_inner .section_unit .graph_container .graph_unit.graph_unit01 > img.active {
  top:0px;opacity: 1;
}
#section09 .section_inner .section_unit .graph_container .graph_unit.graph_unit02 > img.active {
  top:-30px;opacity: 1;
}
#section09 .section_inner .section_unit .graph_container .graph_unit.graph_unit01 > span {
  background: rgba(176,176,176,0.5);width:69px;height:69px;border-radius: 69px;display: flex;align-items: center;justify-content: center;padding:8px;display: none;
}
#section09 .section_inner .section_unit .graph_container .graph_unit.graph_unit01 > span > span {
  background: rgba(176,176,176,1);width:100%;height:100%;border-radius: 100%;display: flex;align-items: center;justify-content: center;font-size:20px;font-weight:700;color:#ececec;letter-spacing: -0.4px;
}
#section09 .section_inner .section_unit .graph_container .graph_unit.graph_unit02 > span {
  background: rgba(94,94,94,0.5);width:71px;height:71px;border-radius: 69px;display: flex;align-items: center;justify-content: center;font-size:20px;font-weight:700;color:#fff;padding:8px;display: none;
}
#section09 .section_inner .section_unit .graph_container .graph_unit.graph_unit02 > span > span {
  background: rgba(94,94,94,1);width:100%;height:100%;border-radius: 100%;display: flex;align-items: center;justify-content: center;font-size:20px;font-weight:700;color:#ececec;letter-spacing: -0.4px;
}
#section09 .section_inner .section_unit .graph_container .graph_unit.graph_unit03 > span {
  border:1px solid #0012ff;width:232px;height:233px;border-radius: 233px;display: flex;align-items: center;justify-content: center;font-size:70px;font-weight:700;color:#0422ff;padding:23px;    position: absolute;
  top: -233px;
  scale: 0;
  opacity: 0;
  transition: all 1s ease-in-out;
}
#section09 .section_inner .section_unit .graph_container .graph_unit.graph_unit03 > span.active{
  scale: 1;
  opacity: 1;
}
#section09 .section_inner .section_unit .graph_container .graph_unit.graph_unit03 > span > span {
  border:5px solid #0060ff;width:100%;height:100%;border-radius: 100%;display: flex;align-items: center;justify-content: center;font-size:70px;font-weight:400;color:#0422ff;letter-spacing: -2px;font-family: 'SchoolSafetyEraser';  padding-top: 10px;transition: all 1s ease-in-out;
}
#section09 .section_inner .section_unit .graph_container .graph_unit.graph_unit03 > span > span > span {
  font-size: 50px;
  font-family: 'SchoolSafetyEraser';
  display: flex;
  line-height: 1;
  padding-top: 10px;
  font-weight:400;
}

#section09 .section_inner .section_unit .graph_container .graph_unit.graph_unit01 .bar {
  height: 0;width:100px;background: linear-gradient(to bottom, rgba(176,176,176,1), rgba(176,176,176,0) 80%);border-top-left-radius: 20px;border-top-right-radius:20px;position: relative;opacity:0;transition: all 0.5s;
}
#section09 .section_inner .section_unit .graph_container .graph_unit.graph_unit01 .bar.active{
  height: 115px;transition: all 1s;opacity:1;
}
#section09 .section_inner .section_unit .graph_container .graph_unit.graph_unit02 .bar {
  height: 0;width:100px;background: linear-gradient(to bottom, rgba(94,94,94,1), rgba(94,94,94,0) 80%);border-top-left-radius: 20px;border-top-right-radius:20px;position: relative;transition: all 1s;opacity:0;
}
#section09 .section_inner .section_unit .graph_container .graph_unit.graph_unit02 .bar.active {
  height: 181px;transition: all 1s;opacity:1;
}
#section09 .section_inner .section_unit .graph_container .graph_unit.graph_unit03 .bar {
  height: 0;width:100px;background: linear-gradient(to bottom, rgba(0,103,255,1), rgba(0,103,255,0) 90%);border-top-left-radius: 20px;border-top-right-radius:20px;position: relative;transition: all 1s;opacity:0;
}
#section09 .section_inner .section_unit .graph_container .graph_unit.graph_unit03 .bar.active {
  height: 312px;transition: all 1s;opacity:1;
}
#section09 .section_inner .section_unit .graph_container .graph_unit.graph_unit01 .bar p {
  font-size:18px;font-weight:700;color:#1a1a1a;position: absolute;bottom:16px;left:50%;transform: translate(-50%, 0);white-space: nowrap;
}
#section09 .section_inner .section_unit .graph_container .graph_unit.graph_unit01 .bar p span {
  font-weight: 300;white-space: nowrap;
}
#section09 .section_inner .section_unit .graph_container .graph_unit.graph_unit02 .bar p{
  font-size:25px;font-weight:700;color:#1a1a1a;position: absolute;bottom:27px;left:50%;transform: translate(-50%, 0);white-space: nowrap;
}
#section09 .section_inner .section_unit .graph_container .graph_unit.graph_unit03 .bar img{
  position: absolute;bottom:23px;left:50%;transform: translate(-50%, 0);
}
#section09 .section_inner .section_unit .grapgh_txt {
  position: absolute;
  bottom:0;
}





#section10 {
  background-color: #00f6ff;
}
#section10 .section_inner {
  display: flex;flex-direction: column;align-items: center;justify-content: center;
  max-width: 1240px;width:100%;margin:0 auto;height: 100%;gap:80px;padding:126px 0 147px;
}
#section10 .section_inner .section10_content{
  width:100%;
}
#section10 .section_inner .tabs2024_2_box {
  position: relative;padding: 0 20px;
}
#section10 .section_inner .tabs2024_2 {
  width:100%;position: relative;
}
#section10 .section_inner .tabs2024_2 .swiper-slide {
  width: 100%;text-align: center;max-width: 291px;
}
#section10 .section_inner .tabs2024_2 .swiper-slide .S3Box{
  display: flex;flex-direction: column;align-items: center;justify-content: center;
}
#section10 .S3Img{
  display: flex;
}
#section10 .S3Img img {
  border:1px solid #4C7796;max-width: 100%;width: 100%;
}
#section10 .S3Name {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  gap:15px;
}
#section10 .S3Name p {
  font-family: "GmarketSansMedium";
  font-size: 24px;
  padding-top: 5px;
  letter-spacing: -0.5px;
}

#section10 .SlideBtnR,
#section10 .SlideBtnL {
  width: 62px !important;
  height: 62px !important;
  transform: translate(0, calc(-50% - 57px));
  transform: translate(0, calc(-50% - 57px));
  margin-top: 32px !important;
}
#section10 .SlideBtnR {
  background: url(https://careergate-service.s3.amazonaws.com/img/campusdev/beauty_html_img/event/20250827/S6BtnR.png)
    no-repeat;
  background-position: center;
}

#section10 .SlideBtnL {
  background: url(https://careergate-service.s3.amazonaws.com/img/campusdev/beauty_html_img/event/20250827/S6BtnL.png)
    no-repeat;
  background-position: center;
}

#section10 .swiper-button-next::after,
#section10 .swiper-button-prev::after {
  display: none;
}

#section10 .swiper-button-prev,
#section10 .swiper-rtl .swiper-button-next {
  left: 0 !important;
}

#section10 .swiper-button-next,
#section10 .swiper-rtl .swiper-button-prev {
  right: 0 !important;
}
#section11 {
  background-color: #464646;height: 164px;
}
#section11 .section_inner {
  display: flex;flex-direction: column;align-items: center;justify-content: center;
  max-width: 1240px;width:100%;margin:0 auto;height: 100%;padding:55px 0 56px;overflow: hidden;
}
#section11 .section_inner .section_title {
  position: relative;
}
#section11 .section_inner .section_title img {
  position: relative;z-index: 1;
}
#section11 .section_inner .section_title img.section11_title_circle {
  position: absolute;    top: -40px;
  left: -16px;z-index: 0;
}
#section12 {
  background-color: #f6f6f6;
}
#section12 .section_inner {
  display: flex;flex-direction: column;align-items: center;justify-content: center;
  max-width: 1240px;width:100%;margin:0 auto;height: 100%;padding:159px 0 139px;
}
#section13 {
  background-color: #464646;overflow: hidden;
}
#section13 .section_inner {
  display: flex;flex-direction: column;align-items: center;justify-content: center;
  max-width: 1200px;width:100%;margin:0 auto;padding:207px 0 216px;gap:120px;
}
#section13 .section_inner .section13_content{
  width:100%;display: flex;align-items: center;justify-content: center;gap:140px;flex-direction: column;
}
#section13 .section_inner .section13_content .unit_container{
  width:100%;display: flex;flex-direction: column;gap:40px;
}
#section13 .section_inner .section13_content .unit_container .unit {
  display: flex;flex-direction: column;gap:30px;width: 100%;
}
#section13 .section_inner .section13_content .unit_container .unit_title h2{
  color:#fff;font-size:35px;font-weight: 700;line-height: 1;padding-left:25px;
}
#section13 .section_inner .section13_content .unit_container .unit_title h2 span{
  color:#fff;font-size:35px;font-weight: 300;line-height: 1;
}
#section13 .section_inner .section13_content .unit_container .swiper-container{
  width:100%;overflow: hidden;
}
#section13 .section_inner .section13_content .unit_container .swiper-container .swiper-slide{
  width: fit-content;
}
#section13 .section_inner .section13_content .pass_unit {
  display: flex;flex-direction: column;align-items: center;justify-content: center;gap:77px;
}
#section13 .section_inner .section13_content .pass_unit .pass_content {
  display: flex;
    flex-direction: column;
    gap: 45px;
}
#section13 .section_inner .section13_content .pass_unit .pass_content p{
  font-size:18px;font-weight:300;color:#898989;
}
.stack{
  width:1020px;
  height:969px;
  position:relative;
}
.title{
  text-align:center; color:#e9e9e9; opacity:.9;
  font-weight:800; letter-spacing:.02em;
  margin-bottom:20px; font-size:clamp(18px,2.4vw,24px);
}

.cards{
display:flex;
/* 기존: flex-direction: column; */
flex-direction: column-reverse; /* 👈 아래에서 위로 쌓이도록 역순 배치 */
gap:14px;

}

.card{
  border-radius:18px;
  box-shadow:11px 13px 40px rgba(70,70,70,.27);
  padding:40px 130px;
  background:#ddd;
  position: absolute;
  width: 100%;
  opacity: 0;
  transform: translateX(-50%) translateY(40px);
}
.card.animate {
  animation: rackUp .6s cubic-bezier(.2,.8,.2,1) forwards;
}
.card.c2 {
  padding:40px 120px;
}
.card.c3 {
  padding:30px 100px;
}
.card > div > div{
  font-size:40px;color:#272727;line-height: 50px;
}
.card > div > small{
  font-size:40px;font-weight:300;color:#272727;line-height: 50px;
}
.card.c2 > div > div{
  font-size:35px;color:#272727;line-height: 50px;
}
.card.c2 > div > small{
  font-size:35px;font-weight:300;color:#272727;line-height: 50px;
}
.card.c3 > div p {
  color:#444444;font-size:16px;font-weight:500;line-height: 24px;
}
.card.c3 > div > div{
  font-size:32px;color:#272727;line-height: 40px;
}
.card.c3 > div > small{
  font-size:32px;font-weight:300;color:#272727;line-height: 40px;
}
.dept{
  display:flex; justify-content:space-between; align-items:center;
  font-weight:800; color:#111;    align-items: flex-end;
}
.dept small{
  display:block; font-weight:600; opacity:.6; font-size:.86rem;
}
.dept .right{
  text-align:right;
}
.dept .num{
  font-size:90px; font-weight:700;font-family: "GmarketSansBold" !important;line-height: 1;
}
.dept .num >span {
  font-size:56px; font-weight:700;color: #151515;font-family: "GmarketSansBold" !important;line-height: 1;
}
.c3{ bottom:0;left:50%;width:744px;height:302px;background:#f3f2ff; animation-delay:.05s; } /* 코스메틱뷰티매니지먼트 */
.c2{ bottom:166px;left:50%;width:837px;height:302px;background:#dbe9ff; animation-delay:.25s; } /* 헤어디자인 */
.c1{ bottom:332px;left:50%;width:930px;height:302px;background:#b0cdf3;  animation-delay:.45s; } /* 메이크업     */

.summary{
  position:relative;
  background:#0c00ff;
  color:#fff;
  padding:30px 28px;
  height: 462px;
  border-radius:26px;
  display:flex; flex-direction:column; gap:10px;
  animation-delay:.75s;
  left:50%;
  align-items: center;
  justify-content: center;
}
.summary .big{
  display:flex; align-items:baseline; gap:5px;justify-content: center;position: relative;    padding-top: 30px;
}
.summary .big #count{
  line-height:1.2; font-weight:400;
  font-size:280px;
    font-family: "GmarketSansBold";
    background: linear-gradient(to top, #46f1f7, #ffffff);
    color: transparent;
    -webkit-background-clip: text;
    letter-spacing: -8px;
}
.summary .big .unit{
  font-size:200px; font-weight:400;  font-family: "GmarketSansBold" !important;
  background: linear-gradient(to top, #46f1f7, #ffffff);
    color: transparent;
    -webkit-background-clip: text;
}
.summary .badge{
  position: absolute;
  right: -80px;
  bottom: 50px;
  font-size: 60px;
  font-weight: 400;
  background: #0c00ff;
  font-family: "GmarketSansBold" !important;
  border-radius: 5px;
  padding: 10px 4px;
  color:#fff;
  line-height:1;
}

@keyframes rackUp{
  from{ transform:translateX(-50%) translateY(60px); opacity:0 }
  to  { transform:translateX(-50%) translateY(0);    opacity:1 }
}

/* 접근성: 모션 최소 선호 시 애니메이션 제거 & 최종 상태 표시 */
@media (prefers-reduced-motion: reduce){
  .card{ animation:none; transform:none; opacity:1 }
}
#section14{
  background: #fff;
  padding: 69px 0 0 16px;
  overflow: hidden;
}
#section14 .section_inner {
  display: flex;align-items: center;justify-content: center;flex-direction: column;
  max-width: 1200px;width:100%;margin:0 auto;
}
#section15{
  background: #282828;
  padding: 61px 0;
  overflow: hidden;
}
#section15 .section_inner {
  display: flex;align-items: center;justify-content: center;flex-direction: column;
  max-width: 1200px;width:100%;margin:0 auto;
}
#section16 {
  background-image: url(https://careergate-service.s3.amazonaws.com/img/campusdev/beauty_html_img/event/20250827/section16_bg.png);
  background-color: #00f6ff;
  background-position: center;
  position: relative;
  overflow: hidden;
}
#section16 .section_inner {
  display: flex;flex-direction: column;align-items: center;justify-content: flex-start;
  max-width: 1201px;width:100%;margin:0 auto;height: 100%;padding:156px 0 161px;
}
#section17{
  background: #275aff;
  padding: 161px 0;
  overflow: hidden;
}
#section17 .section_inner {
  display: flex;align-items: center;justify-content: center;flex-direction: column;
  max-width: 1200px;width:100%;margin:0 auto;gap:74px;
}
#section17 .section_inner .section17_content {
  width: 100%;display: flex;flex-direction: column;gap:80px;
}
#section17 .section_inner .section17_content .review_tab_container{
  width: 100%;display: flex;flex-direction: column;gap: 30px;
}
.tabs-wrap{width:100%}


/* 상단 큰 탭 */
.big-tabs{display:flex;align-items:flex-end;width:100%;}
.big-tab{
position:relative;
height:130px;
font-weight:700;
font-size:40px;
letter-spacing:-0.02em;
cursor: pointer;
width: 100%;
}
.big-tab.left{
background:#e1e1e1;
box-shadow:0 6px 18px rgba(0,0,0,.25);
color:#706969;
text-align: center;
display: flex;align-items: center;justify-content: center;
}
.big-tab.left.active{
  background:#171717;
  color:#fff;
  height:150px;
}
/* 오른쪽 끝을 사선으로 잘라내기 */
.big-tab.left.active::after{
content:'';
position:absolute;right:-35px;top:0;width:70px;height:100%;
transform:skewX(-25deg);
background:#151515;
box-shadow: 6px 0 20px rgba(0,0,0,0.25);
z-index: 1;
}


.big-tab.right{
background:#e1e1e1;
color:#706969;font-weight:700;
min-width:260px;text-align:center;
display: flex;align-items: center;justify-content: center;
}
.big-tab.right.active{
  background:#171717;
  color:#fff;
  height:150px;
}
.big-tab.right.active::after{
  content:'';
  position:absolute;left:-35px;top:0;width:70px;height:100%;
  transform:skewX(25deg);
  background:#151515;
  box-shadow: 6px 0 20px rgba(0,0,0,0.25);
  z-index: 1;
  }

/* 하단 작은 탭 리스트 */
.small-tabs{display:none;align-items:stretch;width:100%;}
.small-tabs.active{display:flex;align-items:stretch;width:100%;}
.small-tab{
background:#022ebb;
color: #86ade6;
font-size: 30px;
font-weight:700;
min-width:140px;text-align:center;
width: 100%;
cursor:pointer;
transition:all .18s ease;
height:150px;display: flex;align-items: center;justify-content: center;
}
.small-tab.active{
  background:#fff;
  color:#151515;
}


/* 작은 탭들을 감싸는 바(이미지 참고한 아래 네이비 백그라운드) */
.small-tabs-bar{
background:linear-gradient(180deg,#2b56ff,#063ba8);border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.12);
}

#section17 .section_inner .section17_content .video_wrap {
  width:1000px;height:565px;border-radius: 30px;overflow: hidden;
  margin:0 auto;
}
#section17 .section_inner .section17_content .video_wrap > div {
  width:100%;height:100%;
}
#section17 .section_inner .section17_content .video_wrap > div > iframe{
  width:100%;height:100%;
}
#section17 .section_inner .section17_content  a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 auto;
}
#section18 {
  background-color: #f8f8f8;
  position: relative;
  text-align: center;
  padding:159px 0 173px;
  display: flex;
  flex-direction: column;
  gap:50px;
}
#section18 #section18_content {
  width:100%;
}
#section18 #section18_content .marquee {
  width:100%;overflow: hidden;
}
#section18 .marquee .mar-track {
  display: flex;gap:22px; align-items:center; will-change:transform;
}
#section18 .marquee .mar-item{
  min-width:275px; flex:0 0 auto; border-radius:10px;display: flex;flex-direction: column;gap:30px;
}
#section18 .marquee .mar-item img:first-child{
  left:152px;position: relative;
}
#section18 .marquee .mar-item img {
  border-radius:10px;
}
#section19 {
  background-image: url(https://careergate-service.s3.amazonaws.com/img/campusdev/beauty_html_img/event/20250827/section19_bg.png);
  background-position: top center;
  position: relative;
  overflow: hidden;
}
#section19 .section_inner {
  display: flex;flex-direction: column;align-items: center;justify-content: flex-start;
  max-width: 100%;width:100%;margin:0 auto;height: 100%;padding:124px 0 528px;gap:176px;
}
#section19 .section_inner .section19_content {
  WIDTH:100%;display: flex;flex-direction: column;gap:150px;
  align-items: center;justify-content: center;
}
#section19 .section_inner .section19_content .event_swiper {
  width:100%;
  background-image: url(https://careergate-service.s3.amazonaws.com/img/campusdev/beauty_html_img/event/20250827/swiper_bg.png);
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 764px 390px;
  display: flex;
  align-items: flex-end;
  padding-bottom: 60px;
}
#section19 .section_inner .section19_content .event_swiper .swiper-slide{
  display: flex;flex-direction: column;align-items: center;justify-content: center;transition: all 0.8s;margin: auto 0;min-height:390px;
}
#section19 .section_inner .section19_content .event_swiper .swiper-slide-active{
  transition: all 0.8s;
}
#section19 .section_inner .section19_content .event_swiper .swiper-slide img {
  transition: all 0.8s;margin-bottom:50px;
}
#section19 .section_inner .section19_content .event_swiper .swiper-slide-active img {
  margin-top: -60px;transition: all 0.8s;margin-bottom:30px;
}
#section19 .section_inner .section19_content .event_swiper .swiper-slide img.event_swiper_img01{
  width: 191px;
}
#section19 .section_inner .section19_content .event_swiper .swiper-slide img.event_swiper_img02{
  width: 154px;
}
#section19 .section_inner .section19_content .event_swiper .swiper-slide img.event_swiper_img03{
  width: 150px;
}
#section19 .section_inner .section19_content .event_swiper .swiper-slide img.event_swiper_img04{
  width: 155px;
}
#section19 .section_inner .section19_content .event_swiper .swiper-slide img.event_swiper_img05{
  width: 194px;
}
#section19 .section_inner .section19_content .event_swiper .swiper-slide img.event_swiper_img06{
  width: 127px;
}
#section19 .section_inner .section19_content .event_swiper .swiper-slide-active img.event_swiper_img01{
  width: 241px;
}
#section19 .section_inner .section19_content .event_swiper .swiper-slide-active img.event_swiper_img02{
  width: 204px;
}
#section19 .section_inner .section19_content .event_swiper .swiper-slide-active img.event_swiper_img03{
  width: 200px;
}
#section19 .section_inner .section19_content .event_swiper .swiper-slide-active img.event_swiper_img04{
  width: 205px;
}
#section19 .section_inner .section19_content .event_swiper .swiper-slide-active img.event_swiper_img05{
  width: 244px;
}
#section19 .section_inner .section19_content .event_swiper .swiper-slide-active img.event_swiper_img06{
  width: 177px;
}
#section19 .section_inner .section19_content .event_swiper .swiper-slide .swiper_txt {
  display: flex;align-items: center;justify-content: center;flex-direction: column;gap:20px;  transition: all 0.8s;
}
#section19 .section_inner .section19_content .event_swiper .swiper-slide-active .swiper_txt {
  margin-bottom:20px;  transition: all 0.8s;
}
#section19 .section_inner .section19_content .event_swiper .swiper-slide h2 {
  font-size:35px;font-weight:700;color:#fff;transition: all 0.8s;line-height: 1;
}
#section19 .section_inner .section19_content .event_swiper .swiper-slide p{
  font-size:28px;font-weight:700;color:#fff;line-height: 1;
}
#section19 .section_inner .section19_content .event_swiper .swiper-slide p span {
  color: #fae289;line-height: 1;
}
#section19 .section_inner .section19_content .event_swiper .swiper-slide h6{
  font-size:18px;font-weight:500;color:#fff;line-height: 1;
}
#section19 .section_inner .section19_content .event_swiper .swiper-slide-active h2{
  font-size: 40px;transition: all 0.8s;
}
#section19 .section_inner .section19_content02{
  gap:0;
}
#section19 .section_inner .section19_content02 .section19_content_title{
  padding-right: 188px;
}
.roulette-container {
  width: 935px;
  height: 935px;
  position: relative;
}
#section19 .section_inner .section19_content02 .roulette-container .roulette_arrow{
  position: absolute;top:-90px;z-index: 2;left:349px;
}
#section19 .section_inner .section19_content02 .roulette-container .roulette_arrow2{
  position: absolute;top:255px;z-index: 0;left:-71px;
}

#roulette {
  width: 100%;
  height: auto;
  transform: rotate(0deg);
  transition: transform 4s cubic-bezier(0.33, 1, 0.68, 1);
  z-index: 1;
  position: relative;
  border-radius: 935px;
  box-shadow: 73px 0 155px rgba(0,0,0,.43);
}

#section20 {
  background-color: #f8f8f8;
  position: relative;
  text-align: center;
  padding:155px 0 84px;
  display: flex;
  flex-direction: column;
  gap:50px;
}
#section20 .section_inner {
  max-width: 1200px;margin:0 auto;
}
#section20 .section20_content {
  width:100%;
}
#section20 .section20_content .mainCounseling .inner {
  display: flex;flex-direction: column;gap:165px;
}
#section20 .section20_content .mainCounseling .inner .infoHead {
  text-align: left;
}
#section20 .section20_content .infoHead .mSubTit{
  font-size:57px;font-weight:700;color:#2b2b2b;line-height:1;
  display: flex;flex-direction: column;align-items: flex-start;gap:25px;
}
#section20 .section20_content .infoHead .mSubTit p {
  font-size:25px;font-weight:700;color:#f82828;line-height:1;
}
#section20 .section20_content .infoHead .mSubTit p span {
  font-weight: 300;line-height:1;
}
#section20 .section20_content .mainCounseling .inner .infoBody{
  display: flex;flex-direction: column;gap:20px;
}
#section20 .section20_content .mainCounseling .inner .infoBody .counsel_info{
  display: flex;padding:45px 20px;border-top:1px solid #ccc;justify-content: space-between;
}
#section20 .section20_content .mainCounseling .inner .infoBody .left{
  width:420px;
}
#section20 .section20_content .mainCounseling .inner .infoBody .left .counselingFormTable {
  display: flex;flex-direction: column;gap:15px;
}
#section20 .section20_content .mainCounseling .inner .infoBody .left .counselingFormTable .inp_box{
  display: flex;gap:45px;
}
#section20 .section20_content .mainCounseling .inner .infoBody .left .counselingFormTable .inp_box h2 {
  min-width:62px;text-align: left;font-size:22px;font-weight:700;color: #333333;
}
#section20 .section20_content .mainCounseling .inner .infoBody .left .counselingFormTable .inp_box .inp_wrap {
  display: flex;align-items: center;width: 100%;gap:5px;
}
#section20 .section20_content .mainCounseling .inner .infoBody .left .counselingFormTable .inp_box .inp_wrap input[type="radio"]{
  accent-color: #1c1c1c;width: 18px;height:18px;
}
#section20 .section20_content .mainCounseling .inner .infoBody .left .counselingFormTable .inp_box .inp_wrap label {
  font-size:18px;font-weight:400;color:#333333;
}
#section20 .section20_content .mainCounseling .inner .infoBody .left .counselingFormTable .inp_box .inp_wrap input[type="text"],#section20 .section20_content .mainCounseling .inner .infoBody .left .counselingFormTable .inp_box .inp_wrap input[type="tel"]{
  width:100%;height:35px;border:0.5px solid #1a1a1a;
}
#section20 .section20_content .mainCounseling .inner .infoBody .left .counselingFormTable .inp_box .inp_wrap.inp_wrap_tel {
  gap:1px;
}
#section20 .section20_content .mainCounseling .inner .infoBody .left .counselingFormTable .inp_box .inp_wrap span {
  min-width:9px;height:1px;background: #1c1c1c;display: flex;
}
#section20 .section20_content .mainCounseling .inner .infoBody .right {
  width:498px;display: flex;flex-direction: column;gap:25px;
}
#section20 .section20_content .mainCounseling .inner .infoBody .right .counselingFormTable {
  display: flex;flex-direction: column;gap:15px;
}
#section20 .section20_content .mainCounseling .inner .infoBody .right .counselingFormTable .inp_box{
  display: flex;gap:45px;
}
#section20 .section20_content .mainCounseling .inner .infoBody .right .counselingFormTable .inp_box h2 {
  min-width:82px;text-align: left;font-size:22px;font-weight:700;color: #333333;
}
#section20 .section20_content .mainCounseling .inner .infoBody .right .counselingFormTable .inp_box p {
  font-size:16px;color:#444444;font-weight:400;
}
#section20 .section20_content .mainCounseling .inner .infoBody .right .counselingFormTable .inp_box .inp_wrap > div select{
  width:100%;height:35px;border:0.5px solid #1a1a1a;padding:0 15px;font-size:16px;font-weight: 500;color: #8e8e8e; appearance: none;position: relative;
}
#section20 .section20_content .mainCounseling .inner .infoBody .right .counselingFormTable .inp_box .inp_wrap >div::after{
  content:'';
  background-image: url(https://careergate-service.s3.amazonaws.com/img/campusdev/beauty_html_img/event/20250827/ico_d_arr.png);
  position: absolute;
  top:50%;right:15px;
  width:14px;height:7px;
  background-size: cover;
  transform: translate(0, -50%);
}
#section20 .section20_content .mainCounseling .inner .infoBody .right .counselingFormTable .inp_box .inp_wrap{
  display: flex;align-items: flex-start;width: 100%;gap:5px;flex-direction: column;
}
#section20 .section20_content .mainCounseling .inner .infoBody .right .counselingFormTable .inp_box .inp_wrap > div{
  display: flex;align-items: center;width: 100%;gap:5px;position: relative;
}
.personalGuide{margin-top: 10px;position: relative;display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;}

.personalGuide a{color: #333333;font-size: 20px;letter-spacing: -0.04em;font-family: 'notokr-regular'; padding-right: 20px;-webkit-transition: 0.2s linear;
  -moz-transition: 0.2s linear;
  -ms-transition: 0.2s linear;
  -o-transition: 0.2s linear;
  transition: 0.2s linear;
display: flex;gap:5px;
align-items: center;}
.personalGuide a img.on{
  transform: rotate(180deg);
}
.personalGuide .agree_bx {
  display: flex;align-items: center;gap:9px;
}
.personalGuide div{margin-top: 10px;}
.personalGuide div input{width: 20px;height: 20px;border:1px solid #ddd;vertical-align: middle;margin-right: 0;}
.personalGuide div label{color: #9b9896;font-size: 15px;letter-spacing: -0.04em;font-family: 'notokr-regular'}
.personalInfo{background: #f7f7f7;/*border-top: 1px solid #e5e5e5;*/border-bottom: 1px solid #565656;padding:10px 0;font-size: 15px;line-height: 23px;letter-spacing: -0.02em;font-family: 'notokr-demilight';color: #9a9a9a;display: none;text-align: left;}
.counselingForm .btnCounseling a {
  background: #2b2b2b;
  font-size: 22px;
  line-height: 50px;
  border-radius: 10px;
  color:#fff;
  font-weight:700;
  display: flex;
      align-items: center;
      justify-content: center;
}

#section20 .section20_content .mainCounseling .inner .infoBody .apply_wrap{
  display: flex;border-radius:10px;width: 100%;background-color: #c4daff;height: 68px;
}
#section20 .section20_content .mainCounseling .inner .infoBody .progress {
  display: flex;width: 100%;height:100%;padding:14px 12px 13px 13px;position: relative;
}
#section20 .section20_content .mainCounseling .inner .infoBody .progress .progress_inner{
  display: flex;width: 100%;background-color: #7d8da9;border-radius: 10px;
}
#section20 .section20_content .mainCounseling .inner .infoBody .progress .bu01 {
  position: absolute;top:-69px;right:125px;font-size:20px;font-weight: 700;color:#2c2c2c;
  display: flex;gap:5px;align-items: center;justify-content: center;background-image: url(https://careergate-service.s3.amazonaws.com/img/campusdev/beauty_html_img/event/20250827/bu01_red.png);
  width: 206px;
  height: 60px;
  background-size: cover;
  padding-bottom: 11px;
}
#section20 .section20_content .mainCounseling .inner .infoBody .progress .bu02 {
  position: absolute;top:-103px;left:366px;font-size:18px;font-weight: 500;color:#2c2c2c;line-height: 25px;
  display: flex;gap:7px;align-items: center;justify-content: center;background-image: url(https://careergate-service.s3.amazonaws.com/img/campusdev/beauty_html_img/event/20250827/bu02_v2.png);
  width:319px;height:93px;background-size: cover;padding-bottom:16px;text-align: center;letter-spacing: -0.4px;display: none;
}
#section20 .section20_content .mainCounseling .inner .infoBody .progress .bu03 {
  position: absolute;top:-170px;right:135px;font-size:18px;font-weight: 500;color:#2c2c2c;line-height: 25px;
  display: flex;gap:7px;align-items: center;justify-content: center;background-image: url(https://careergate-service.s3.amazonaws.com/img/campusdev/beauty_html_img/event/20250827/bu02_v2.png);
  width:319px;height:93px;background-size: cover;padding-bottom:16px;text-align: center;letter-spacing: -0.4px;display: none;
}
#section20 .section20_content .mainCounseling .inner .infoBody .progress .progress_bar {
  background: #0f6efd;width:100%;border-radius: 10px;height:100%;display: flex;align-items: center;
  justify-content: center;
}
#section20 .section20_content .mainCounseling .inner .infoBody .progress .progress_bar h2 {
  font-size:20px;font-weight: 500;color:#fff;position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);
}
#section20 .section20_content .mainCounseling .inner .infoBody .progress .progress_bar h2 span {
  font-size:25px;
}
#section20 .section20_content .mainCounseling .inner .infoBody .progress .progress_bar h2 span span {
  font-weight: 500;width: 20px;
}

#section20 .section20_title {
  display: flex;justify-content: space-between;background: #0f6efd;
  padding:38px 45px 38px 42px;align-items: center;
}
#section20 .section20_title .title_left h2 {
  font-size:23px;color:#fff;font-weight:500;text-align: left;
}
#section20 .section20_title .title_left h2 span{
  font-size:25px;color:#fff000;font-weight:700;
}
#section20 .section20_title .title_right a {
  border-radius: 10px;
  background-color: rgb(255, 0, 114);
  box-shadow: 0px 3px 5px 0px rgba(59, 59, 59, 0.29);
  font-size: 25px;
  color: rgb(254, 254, 254);
  font-weight: bold;
  padding: 10px 42px;
}













#section21 {
  background-image: url(https://careergate-service.s3.amazonaws.com/img/campusdev/beauty_html_img/event/20250827/section21_bg.png);
  background-position: top center;
  position: relative;
  overflow: hidden;
  height: 605px;
}
#section21 .bg_wrap {
  width:100%;height:100%;background: rgba(26,26,26,1);transition: all 1s ease-in-out;
  z-index: 1;position: absolute;
}
#section21.active .bg_wrap{
  background: rgba(26,26,26,0);transition: all 1s ease-in-out;
}
#section21 .section_inner {
  display: flex;flex-direction: column;align-items: flex-start;justify-content: center;
  max-width: 1140px;width:100%;margin:0 auto;height: 100%;  position: relative;
  z-index: 2;
}
#section21 .section_inner .section_title {
  width:100%;
}
#section21 .section_inner .section_title h2{
  color:#fff;font-family: "GmarketSansBold";font-size:54px;
}
#section21 .section_inner .section_title h2 div:nth-child(1){
  color:#fff;font-family: "GmarketSansMedium";font-size:40px;font-weight: 400;
}
#section22 {
  background-color: #dedede;
  position: relative;
  text-align: left;
  padding:110px 0;
}
#section22 .section_inner {
  display: flex;flex-direction: column;align-items: flex-start;justify-content: center;
  max-width: 1200px;width:100%;margin:0 auto;height: 100%;
}
#section22 .section_inner .section_title h2{
  font-size:24px;font-weight:700;color:#9e9e9e;
}
#section22 .section_inner .section22_content{
  display: flex;flex-direction: column;gap:30px;
}
#section22 .section_inner .section22_content p{
  font-size:20px;font-weight:400;color:#9e9e9e;
}


.result_popup_bg{
  position: fixed;
  top:0;left:0;
  width:100%;height:100%;
  background: rgba(0,0,0,.5);
  z-index: 999;
  display: none;
}
.result_popup{
  position: fixed;
  top:50%;left:50%;transform:translate(-50%, -50%);
  z-index: 1000;
  width:900px;
  display: none;
}
.result_popup .result_title{
  background: #fff;    padding: 25px 30px;
}
.result_popup .result_title a {
  display: flex;justify-content: flex-end;
}
.result_popup .result_content{
  background:#5683d4;text-align: center;display: flex;flex-direction: column;gap:30px;
  align-items: center;justify-content: center;padding: 52px 0 67px;
}
.result_popup .result_content .roulette_apply_btn {
  background: #fff;color:#000000;font-size:35px;font-weight: 700;border-radius: 20px;
  width: 100%;max-width:778px;height: 80px;display: flex;align-items: center;justify-content: center;
}

.result_product_popup_bg{
  position: fixed;
  top:0;left:0;
  width:100%;height:100%;
  background: rgba(0,0,0,.5);
  z-index: 999;
  display: none;
}
.result_product_popup{
  position: fixed;
  top:50%;left:50%;transform:translate(-50%, -50%);
  z-index: 1000;
  width:900px;
  display: none;
}
.result_product_popup .result_product_img{
  position: absolute;
  width: 447px;
  height: 229px;
  top: 328px;
  display: flex;
  align-items: center;justify-content: center;
}
.result_product_popup .result_title{
  background: #fff;    padding: 25px 30px;position: relative;
}
.result_product_popup .result_title h2{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 35px;
font-weight: 700;
color: #000;
}
.result_product_popup .result_title a {
  display: flex;justify-content: flex-end;
}
.result_product_popup .result_content{
  background:#5683d4;text-align: center;display: flex;flex-direction: column;gap:30px;
  align-items: center;justify-content: center;padding: 52px 0 39px;
}
.result_product_popup .result_content a {
  background: #fff;color:#000000;font-size:35px;font-weight: 700;border-radius: 20px;
  width: 100%;max-width:778px;height: 80px;display: flex;align-items: center;justify-content: center;
  position: absolute;bottom:70px;left:50%;
  transform: translate(-50%, 0);
}


#top_btn {
  position: fixed;
  bottom:30px;right:30px;
  opacity: 0;
  pointer-events: none;
  transition: all 1s ease-in-out;
  z-index: 999;
}
#top_btn.active {
  transition: all 1s ease-in-out;
  opacity: 1;
  pointer-events: auto;
}