@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Praise&display=swap"); /* font-family: "Praise", serif; */

/* color */

:root {
  --point: #2846c3;
  --subtxt: #999999;
  --txt_Bk: #232323;
  --white: #fff;
  --black: #000;
  --navy: #243786;
  --red: #ff4a4a;
  --bg_lightSky: #f8fbff;
  --bg_gray: #f5f5f5;
  --border_normal: #ddd;
  --sky-blue: #1cdcff;
}


/* -------------- 공통 -------------- */
.Bk {
  color: var(--black);
}
.Bl {
  color: var(--point);
}

/* fontStyle */
.title h1,
h1 {
  font-size: 3.2rem;
  font-weight: bold;
}
.title p,
.textArea,
.textAreaG {
  font-size: 1.6rem;
  line-height: 150%;
}
.textAreaG {
  color: var(--subtxt);
}

.shotText {
  text-overflow: ellipsis;
  display: -webkit-box;
  white-space: nowrap;
  overflow: hidden;
  -webkit-line-clamp: 1;
}

/* text */
.fs16 {
  font-size: 1.6rem;
  font-weight: bold;
}
.fs20 {
  font-size: 2rem;
}
.center {
  text-align: center;
}

/* line-Height */
.Lh10 {
  line-height: 100%;
}
.Lh15 {
  line-height: 150%;
}

/* flex */
.flex,
.flex_sb {
  display: flex;
  align-items: center;
}
.flex_sb {
  justify-content: space-between;
}

/* br */
.br425 {
  display: none;
}

/* margin */
.mb5 {
  margin-bottom: 0.5rem;
}
.mb10 {
  margin-bottom: 1rem;
}
.mb20 {
  margin-bottom: 2rem;
}
.mb30 {
  margin-bottom: 3rem;
}
.mb40 {
  margin-bottom: 4rem;
}

.mt10 {
  margin-top: 1rem;
}
.mt20 {
  margin-top: 2rem;
}
.mt30 {
  margin-top: 3rem;
}

/* display */
.dpNone {
  display: none;
}
.dpBlock {
  display: block;
}

/* boxStyle */
.boxStyle {
  border: 1px solid var(--txt_Bk);
  border-radius: 1rem;
}
.boxStyle01 {
  background: var(--bg_lightSky);
  border: 1px solid var(--border_normal);
  border-radius: 1rem;
  padding: 6rem;
}
.boxStyle01.brNone {
  border: 0;
  background: transparent;
}

/* hr */
.hrStyle {
  border-bottom: 2px solid;
}

/* subNav */
.subNav {
  gap: 1rem;
}
.subNav li,
.subNav div {
  color: var(--white);
  font-size: 1.6rem;
}

/* imgArea */
.imgArea img {
  margin: 0 auto;
  overflow: hidden;
}

/* wrap */
#Wrap > * {
  margin-bottom: 10rem;
}
/* visual */
.visual {
  background: center center / cover no-repeat
    url("../img/SF-LGN-01-01_main.png");
  height: 340px;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  text-align: center;
  gap: 2.8rem;
  padding-top: 5rem;
}
.IntroWrap .visual {
  background: center center / cover no-repeat
    url("../img/SF-INT-02-01_main.png");
}

/* button */
.btn,
.Logbtn {
  border-radius: 8px;
}
.btn {
  font-size: 1.4rem;
  font-weight: 500;
  border: 1px solid var(--navy);
  color: var(--navy);
  padding: 1.3rem 2rem;
  min-width: 100px;
}
.btn.navy {
  border: 1px solid var(--navy);
  color: var(--white);
  background: var(--navy);
}

/* logBtn */
.Logbtn {
  width: 100%;
  padding: 1.5rem 2rem;
  background: var(--point);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 2rem;
  transition: all 0.3s linear;
}
.Logbtn:hover {
  background: var(--white);
  border: 1px solid var(--point);
  color: var(--point);
}
.Logbtn.sm {
  width: 50%;
}

/* checked */
input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid var(--border_normal);
  box-sizing: border-box;
  outline: 0;
  border-radius: 4px;
  margin-right: 0.5rem;
}
input[type="checkbox"]:checked {
  border-color: var(--point);
  background-color: var(--point);
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

/* 헤더 header start ------------------------------------------------------------ */
/* 기본 헤더 스타일 유지 */
header {
  width: 100%;
  height: 90px;
  background-color: rgba(0, 0, 0, 0.6); /* 기본은 반투명 검정 */
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  color: #fff;
  z-index: 999;
  transition: background-color 0.3s ease-in-out; /* 배경색 변경 애니메이션 */
}

.headerWrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 20px;
}

.head_logo {
  width: 120px;
}

.logo-default {
  display: block;
}
.logo-mobile {
  display: none;
}
.head_logo img {
  transition: opacity 0.3s ease-in-out;
}

.head_menu ul {
  display: flex;
  gap: 2.5rem;
}
.submenu {
  flex-direction: column;
}

.head_menu ul li {
  position: relative;
}

.head_menu ul li a {
  font-size: 1.8rem;
  color: white;
  text-decoration: none;
}

.head_menu ul li a:hover {
  color: var(--sky-blue);
  font-weight: 600;
}

.dropdown {
  position: relative;
}

.submenu {
  display: block;
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, 46%);
  width: 100%;
  min-width: 14rem;
  text-align: center;
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.submenu-2depth {
  gap: 2rem !important;
  background-color: rgba(0, 0, 0, 0.6);
}

.submenu li {
  padding: 10px 20px;
}

.submenu li a {
  color: var(--white);
  text-decoration: none;
  font-size: 1.4rem;
}

.dropdown:hover .submenu {
  opacity: 1;
  visibility: visible;
}

.head_user {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.head_user_login {
  padding: 1rem 2rem;
  border: 1px solid var(--white);
  border-radius: 50rem;
  font-size: 1.4rem;
  font-weight: 700;
}

.head_user_icon {
  font-size: 2.8rem;
  /* height: 2.8rem; */
  /* background-color: var(--white); */
  /* mask-image: url("../../img/header_user.svg");
  mask-repeat: no-repeat;
  mask-size: contain; */
  display: inline-block;
  cursor: pointer;
}
.mobile-menu .submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  display: block;
}

.mobile-menu .menu-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.5rem 0;
}

.mobile-menu .arrow {
  transition: transform 0.3s ease-in-out;
}

.mobile-menu .dropdown.open .arrow {
  transform: rotate(180deg);
}
.ham-menu-icon {
  display: none;
}
.ad-tournament-btn {
  padding: 1.2rem 1.6rem;
  background: var(--point);
  color: var(--white);
  font-size: 1.4rem;
  font-weight: 700;
  border-radius: 0.5rem;
}

@media (min-width: 1101px) {
  .mobile-menu,
  .head_user .ham {
    display: none !important;
  }

  .head_menu {
    display: flex !important;
  }
}

@media (max-width: 1100px) {
  header {
    background-color: var(--white);
    color: black;
  }
  .logo-default {
    display: none;
  }
  .logo-mobile {
    display: block;
  }

  .head_user .ham {
    display: block;
    cursor: pointer;
  }

  .mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 10rem 2rem;
    transition: right 0.3s ease-in-out;
    z-index: 1000;
    backdrop-filter: blur(5px);
  }
  .mobile-menu ul li {
    width: 100%;
  }
  .mobile-menu ul li a {
    width: 100%;
  }

  .mobile-menu.active {
    right: 0;
  }

  .mobile-menu .close-btn {
    position: absolute;
    top: 40px;
    right: 40px;
    background: none;
    border: none;
    color: black;
    cursor: pointer;
  }
  .close-btn img {
    width: 32px;
  }

  .mobile-menu ul li a {
    display: flex;
    align-items: center;
    color: var(--white);
    font-size: 2rem;
    font-weight: 600;
    height: 7rem;
    width: 100%;
    border-bottom: 1px solid var(--bg_gray);
  }
  .ham-menu-icon {
    font-size: 2.8rem;
    /* background-color: #232323; */
    /* mask-image: url("../../img/ham.svg");
    mask-repeat: no-repeat;
    mask-size: contain; */
    display: inline-block;
    cursor: pointer;
  }
  .head_user_login {
    border: 1px solid var(--txt_Bk);
  }

  .submenu {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    background: none;
    padding: 0;
    border-radius: 0;
  }
  .mb_potho_2depth {
    width: 100%;
  }
  .mb_potho_2depth li a {
    font-weight: 300;
  }
  .mobile-menu .submenu li {
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    text-align: left;
  }
  .mb_potho_2depth li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  .mobile-menu .submenu li a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 1.6rem;
    display: block;
    line-height: 7.2rem;
    padding: 0 2rem;
  }

  .mobile-menu .submenu li:hover {
    background: rgba(255, 255, 255, 0.2);
  }

  .mobile-menu .menu-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1.5rem 0;
  }

  .mobile-menu .arrow {
    transition: transform 0.3s ease-in-out;
  }

  .mobile-menu .dropdown.open .arrow {
    transform: rotate(180deg);
  }
  .ad-tournament-btn {
    padding: 1rem;
    font-size: 1.2rem;
  }
}
@media (max-width: 425px) {
  .head_user {
    gap: 0.4rem;
  }
  .ham-menu-icon {
    font-size: 2rem;
  }
  .head_user_login {
    padding: 0.6rem 1rem;
  }
  .head_user_login a {
    font-size: 1.2rem;
  }
  .head_user_icon {
    font-size: 2rem;
  }
  .mobile-menu {
    padding: 8rem 2rem;
  }
  .mobile-menu ul li a {
    font-size: 1.8rem;
  }
}

/* 헤더 header end -------------------------------------------------------------- */

/* 메인섹션 start ------------------------------------------------------------ */
section {width: 100%;}
.main {
  position: relative;
  width: 100%;
  height: 700px;
  /* overflow: hidden; */
  overflow-x: hidden;
  margin-bottom: 5rem;
}
.mainSlide {
  width: 300%; /*슬라이드 개수*100%*/
  height: 100%;
  display: flex;
  transition: transform 0.5s ease-in-out;
}
.slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 2rem;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}

.slide:nth-child(1) {
  background-image: url(../img/mainSlide1.png);
}

/* 첫 번째 슬라이드 */
.slide:nth-child(2) {
  background-image: url(../img/mainSlide2.png);
}

/* 두 번째 슬라이드 */
.slide:nth-child(3) {
  background-image: url(../img/mainSlide4.png);
}

/* 세 번째 슬라이드 */
.slide .slideinner {
  color: #fff;
}
.slide .slideinner h3 {
  font-family: "Praise", serif;
  font-size: 4rem;
  font-weight: 400;
}
.slide .slideinner h2 {
  font-weight: 900;
  font-size: 4rem;
  margin-top: 2rem;
}
.slide .slideinner b {
  font-weight: normal;
  font-size: 2.4rem;
  margin-top: 2rem;
}
.slide .slideinner p {
  font-size: 2rem;
  margin-top: 2rem;
}
.slide .slideinner button {
  font-size: 2rem;
  font-weight: bold;
  padding: 1rem 3rem;
  border-radius: 60px;
  background-color: rgba(255, 255, 255, 0.2);
  margin-top: 2rem;
  color: #fff;
}

.controls {
  max-width: 1300px;
  width: 100%;
  position: absolute;
  bottom: 0;
  margin-bottom: 4rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* margin-right: 17rem; transform: translateX(-50%); */
.arrow {
  color: white;
  border: none;
  padding: 5px;
  cursor: pointer;
}
.arrow.next {
  transform: rotate(180deg);
}

.playPause {
  color: white;
  font-size: 20px;
  border: none;
  cursor: pointer;
  position: relative;
  padding: 8px;
}
.playPause .play {
  display: none;
}
.paused .play {
  display: inline;
}
.paused .pause {
  display: none;
}
.pageIndicator {
  color: white;
  font-size: 1.4rem;
  text-align: center;
  width: 6rem;
}

/* 메인섹션 end -------------------------------------------------------------- */

/* 섹션2 start ------------------------------------------------------------ */
.section2 {
  padding: 8rem 0;
}
.section2 .sec2Box {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  padding: 2rem;
}

.section2 .sec2Box .sec2_1 {
  max-width: 314px;
  width: 100%;
  padding: 0 0.5rem;
}
.section2 .sec2Box .sec2_2 {padding: 0 0.5rem;}
.section2 .sec2Box .sec2_3 {padding: 0 0.5rem;
display: flex; flex-direction: column;}

.section2 .sec2Box .sec2_1 p {
  font-size: 2rem;
  color: var(--point);
}
.section2 .sec2Box .sec2_1 h2 {
  font-size: 4.3rem;
  margin-top: 3rem;
  line-height: 1.3;
}
.section2 .sec2Box .sec2_1 h2 span {
  font-weight: 800;
}
.section2 .sec2Box .sec2_1 a {
  display: block;
  color: #fff;
  font-size: 2rem;
  margin-top: 3rem;
  background-color: #333333;
  border-radius: 60px;
  padding: 1rem 3.5rem;
}

.section2 .sec2Box .sec2_2 .sec2_2_list {
  max-width: 500px;
  width: 100%;
  padding: 3.8rem;
  border-radius: 10px;
  border: 1px solid #dddddd;
  margin-bottom: 4rem;
}
.section2 .sec2Box .sec2_2 .sec2_2_list h2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--point);
  font-size: 2rem;
  margin-bottom: 3.1rem;
  font-weight: 600;
}
.section2 .sec2Box .sec2_2 .sec2_2_list h2 a {
  display: block;
  color: var(--subtxt);
  font-size: 1.4rem;
}
.section2 .sec2Box .sec2_2 .sec2_2_list li {
  font-size: 1.6rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--subtxt);
  margin-bottom: 1.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.section2 .sec2Box .sec2_2 .sec2_2_list li span {
  font-size: 1.4rem;
  color: #fff;
  background-color: var(--point);
  width: 6.7rem;
  display: inline-block;
  text-align: center;
  padding: 4px;
  border-radius: 60px;
  margin-right: 1.4rem;
}
.section2 .sec2Box .sec2_2 .sec2_2_list li:nth-child(1) span {
  color: #333333;
  background-color: #fff;
  border: 1px solid var(--subtxt);
}
.sec2_2_content {
  position: relative;
  overflow: hidden;
  max-width: 500px;
  width: 100%;
  height: 330px;
  border-radius: 10px;
  border: 1px solid #dddddd;
}
.sec2_2_contentSlide {
  display: flex;
  width: 400%; /* 4개의 슬라이드이므로 100% * 4 */
  height: 100%;
  transition: transform 0.5s ease-in-out;
}
.sec2_2_contentSlide > div {
  width: 25%;
  max-width: none;
  height: 100%;
  background: lightgray; /* 임시 배경 */
  font-size: 2rem;
  padding: 3.7rem;
  background-size: cover;
  background-position: right;
}
.sec2_2_contentSlide > div h2 {
  margin-bottom: 0.7rem;
  font-size: 1.6rem;
}
.sec2_2_contentSlide > div p {
  font-size: 1.4rem;
}
.sec2_2_contentNum {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
}
.sec2_2_contentNum span {
  width: 6px;
  height: 6px;
  background: #dcdada;
  border-radius: 50%;
  transition: background 0.3s;
  cursor: pointer;
}
.sec2_2_contentNum span.active {
  background: #2846c3; /* 활성화된 페이지네이션 색 */
}
.sec2_2_contentSlide > div:nth-child(1) {
  background-image: url(../img/sec2_2_contentSlide1.png);
}
.sec2_2_contentSlide > div:nth-child(2) {
  background-image: url(../img/sec2_2_contentSlide2.png);
}
.sec2_2_contentSlide > div:nth-child(3) {
  background-image: url(../img/sec2_2_contentSlide3.png);
}
.sec2_2_contentSlide > div:nth-child(4) {
  background-image: url(../img/sec2_2_contentSlide4.png);
}
.section2 .sec2Box .sec2_3 .sec2_3_content {
  width: 100%;
  max-width: 500px;
  height: 329px;
  background-image: url(../img/sec2_3_content.png);
  background-size: cover;
  border-radius: 10px;
  border: 1px solid #dddddd;
  margin-bottom: 4rem;
  margin-top: 5.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3.8rem;
}
.section2 .sec2Box .sec2_3 .sec2_3_content > div {
  color: #fff;
  font-size: 2rem;
  font-weight: 500;
}
.section2 .sec2Box .sec2_3 .sec2_3_content > div:nth-child(1) {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.section2 .sec2Box .sec2_3 .sec2_3_content > div:nth-child(2) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  white-space: nowrap;  /* 줄바꿈 없이 한 줄 유지 */
  flex-shrink: 0;        /* 줄어들지 않도록 고정 */
}
.section2 .sec2Box .sec2_3 .sec2_3_content > div:nth-child(2) span {
  font-size: 1.4rem;
  font-weight: normal;
}

.section2 .sec2Box .sec2_3 .sec2_3_list {
  width: 100%;
  max-width: 500px;
  /* max-height: 320px; */
  padding: 3.8rem;
  border-radius: 10px;
  border: 1px solid #dddddd;
  margin-bottom: 4rem;
  /* max-height: 330px; */
}
.section2 .sec2Box .sec2_3 .sec2_3_list h2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--point);
  font-size: 2rem;
  margin-bottom: 3.1rem;
  font-weight: 600;
}
.section2 .sec2Box .sec2_3 .sec2_3_list h2 a {
  display: block;
  color: var(--subtxt);
  font-size: 1.4rem;
}
.section2 .sec2Box .sec2_3 .sec2_3_list li {
  width: 100%;
  font-size: 1.6rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--subtxt);
  margin-bottom: 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 0;
}
.section2 .sec2Box .sec2_3 .sec2_3_list li:last-child {margin-bottom: 0;}
.section2 .sec2Box .sec2_3 .sec2_3_list li a {
  width: 100%;
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  font-size: 1.4rem;
}
.section2 .sec2Box .sec2_3 .sec2_3_list li a b {
  margin-right: 1rem;
  white-space: nowrap;  /* 줄바꿈 없이 한 줄 유지 */
  flex-shrink: 0;        /* 줄어들지 않도록 고정 */
}
.section2 .sec2Box .sec2_3 .sec2_3_list li a em {
  font-size: 1.6rem;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 1;     /* ✅ 최대 1줄까지 보이게 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.6;
  max-height: calc(1em * 2); /* 줄 수 * 줄간격 */
}
.section2 .sec2Box .sec2_3 .sec2_3_list li a span {
  margin-left: auto;
  color: var(--subtxt);
  white-space: nowrap;  /* 줄바꿈 없이 한 줄 유지 */
  flex-shrink: 0;        /* 줄어들지 않도록 고정 */
  margin-left: auto;
  
}
.section2 .sec3Box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
}
.section2 .sec3Box .sec3Boxinner {
  max-width: 67rem;
  width: 100%;
  padding: 6.5rem 4rem;
  display: flex;
  align-items: center;
  border-radius: 10px;
  margin-bottom: 8rem;
}
.section2 .sec3Box .sec3_contest {
  background-color: #243786;
  color: #fff;
}
.section2 .sec3Box .sec3_player {
  background-color: #f5f5f5;
}
.section2 .sec3Box .sec3Boxinner h2 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 2rem;
}
.section2 .sec3Box .sec3Boxinner p {
  font-size: 1.6rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;     /* ✅ 최대 1줄까지 보이게 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.6;
  max-height: calc(1em * 2); /* 줄 수 * 줄간격 */
}
.section2 .sec3Box .sec3_contest div:nth-child(1) {
  margin-right: 2rem;
}
.section2 .sec3Box .sec3_contest div:nth-child(3) {
  margin-left: auto;
}
.section2 .sec3Box .sec3_player div:nth-child(1) {
  margin-right: 2rem;
}
.section2 .sec3Box .sec3_player div:nth-child(3) {
  margin-left: auto;
}


.section2 .sec3Box a {
  width: 48%;
  height: 100%;
}
/* 섹션2 end -------------------------------------------------------------- */

/* 푸터 footer start ------------------------------------------------------------ */
footer {
  background-color: #2c2c2c;
}
.footerWrap {
  padding: 4.5rem 0;
  color: #fff;
  font-size: 1.4rem;
}
.footerWrap > div:nth-child(1) {
  margin-bottom: 2.7rem;
}
.footerWrap > div:nth-child(1) img {
  margin-bottom: 2.7rem;
}
.footerWrap > div:nth-child(1) p {
  margin-bottom: 1rem;
}
.footerWrap > div:nth-child(1) p:last-child {
  margin-bottom: 0;
}
.footerWrap > div:nth-child(2) {
  padding-top: 2.7rem;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  display: flex;
}
.footerWrap > div:nth-child(2) a {
  display: inline-block;
  margin-right: 3.5rem;
}
.footerWrap > div:nth-child(2) p {
  margin-left: auto;
}
.footerWrap > div:nth-child(2) p span {
  color: var(--point);
}

/* 푸터 footer end -------------------------------------------------------------- */

/* 화면너비조정 */
.headerWrap,
.section2,
.slideinner,
.footerWrap,
.contestInfo {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

/* ---------- Main Tab : 메인탭 ---------- */
.maintab-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 30px;
}
.maintab {
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  border: 1px solid var(--border_normal);
  margin-bottom: 4rem;
}
.maintab > li {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  box-sizing: border-box;
  -webkit-transition-property: color, border-color, background-color, box-shadow;
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: color, border-color, background-color, box-shadow;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}
.maintab > li a {
  width: 100%;
  font-size: 1.6rem;
  text-align: center;
  color: var(--txt_Bk);
  padding: 2rem;
  -webkit-transition-property: color, border-color, background-color, box-shadow;
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: color, border-color, background-color, box-shadow;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

.maintab > li a p {
  font-weight: bold;
  margin-top: 0.5rem;
}
.maintab > li.active a {
  color: var(--white);
  background: var(--navy);
}
.maintab > li.active:hover a,
.maintab > li.active {
  cursor: default;
}
.maintab:not(.subtab, .tab-indecate) > li:not(.active) a:hover {
  background: var(--white);
}

.tabcontents {
  display: block;
}
.tabcontents .tabcon {
  display: none;
  padding: 10px 0px;
  font-size: 1.6rem;
}

.tabcontents > div.active {
  display: block;
}

@media (max-width: 480px) {
  /* .maintab-wrap {margin-bottom: 2rem;} */
  .maintab {
    margin-bottom: 2rem;
  }
  .maintab > li {
    width: calc(100% / 2);
  }
  .maintab > li a {
    font-size: 1.4rem;
    padding: 2rem 1rem;
  }
}

/* ---------- info ---------- */
.info_title {
  position: relative;
  font-size: 2rem;
  font-weight: bold;
  margin: 0 0 3rem 4rem;
  display: flex;
  align-items: center;
}
.info_title::before {
  position: absolute;
  content: "";
  background: center left / cover no-repeat url(../img/icon_info.png);
  width: 24px;
  height: 24px;
  display: inline-block;
  margin-left: -3rem;
}
.infoWrap .info {
  margin-bottom: 4rem;
}
.infoWrap .info:last-child {
  margin-bottom: 0;
}
.infoWrap .info .title {
  font-size: 1.8rem;
  font-weight: bold;
  width: 100%;
  padding: 2rem;
  background: var(--bg_gray);
  margin-bottom: 1rem;
}
.infoWrap .info .title span {
  color: var(--red);
}
.infoWrap .info .box {
  border: 1px solid var(--border_normal);
  padding: 2rem;
  overflow-y: scroll;
  max-height: 200px;
}
.infoWrap .info .box .text_title,
.infoWrap .info .box .text {
  font-size: 1.4rem;
  line-height: 150%;
}
.infoWrap .info .box .text_title {
  font-weight: bold;
  color: var(--txt_Bk);
}
.infoWrap .info .box .text {
  color: var(--subtxt);
}
.infoWrap .info .box .text.flex {
  align-items: flex-start;
}
.infoWrap .info .box .text.flex > *:first-child {
  white-space: nowrap;
  margin-right: 0.5rem;
}

@media (max-width: 480px) {
  .info_title {
    font-size: 1.8rem;
  }
  .infoWrap .info {
    margin-bottom: 3rem;
  }
  .infoWrap .info .title {
    font-size: 1.6rem;
    padding: 1.5rem;
  }
}
@media (max-width: 400px) {
  .info_title {
    font-size: 1.6rem;
    margin: 0 0 2rem 2rem;
  }
  .info_title::before {
    width: 18px;
    height: 18px;
    margin-left: -2rem;
  }
  .infoWrap .info .title {
    font-size: 1.5rem;
  }
}

/* ---------- ✅ 1440px 이상 (데스크탑) ---------- */
/* .headerWrap,
.section2,
.slideinner,
.footerWrap,
.contestInfo {
  max-width: 1440px;
  max-width: calc(100%-1.5rem);
  width: 100%;
  margin: 0 auto;
} */
/* ---------- ✅ 1200px 이상 (데스크탑) ---------- */
@media (max-width: 1200px) {
  .headerWrap,
  .section2,
  .slideinner,
  .footerWrap,
  .contestInfo {
    /* max-width: calc(100% - 5rem); */
    max-width: 100%;
    padding: 0 1.5rem;
    width: 100%;
    margin: 0 auto;
  }
  .footerWrap {padding: 2rem 1.5rem;}
  /* 헤더 메뉴 크기 줄이기 */
  header .headerWrap .head_menu ul li a {
    font-size: 1.6rem;
  }
  header .headerWrap .head_user .head_user_login {
    font-size: 1.2rem;
  }

  /* 대회 신청 / 선수 신청 박스 너비 줄이기 */
  .section2 .sec3Box .sec3Boxinner {
    /* width: 48rem; */
    display: flex;
    width: 100%;
  }

  /* 메인 슬라이드 높이 줄이기 */
  .main {
    height: 600px;
  }

  /* .section2 .sec2Box 요소들 아래로 떨어뜨리기 */
  .section2 {
    padding: 0;
  }
  .section2 .sec2Box {
    flex-wrap: wrap;
  }
  .section2 .sec2Box .sec2_1 {
    width: 100%;
    max-width: 200rem;
    margin-bottom: 5rem;
  }
  .section2 .sec2Box .sec2_2 {
    display: flex;
    justify-content: space-between;
    /* max-width: 200rem; */
    width: 100%;
    margin-bottom: 5rem;
  }
  .section2 .sec2Box .sec2_3 {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    /* max-width: 200rem; */
    width: 100%;
  }
  .section2 .sec2Box .sec2_2 > div {
    width: 48%;
    max-width: 90rem;
  }
  .section2 .sec2Box .sec2_3 > div {
    width: 100%;
    max-width: 90rem;
  }
  .section2 .sec2Box .sec2_2 .sec2_2_list {
    margin: 0 3rem 0 0;
    padding: 2.5rem 3rem;
    width: 48%;
    max-width: 1000px;
  }
  .section2 .sec2Box .sec2_2 .sec2_2_list li {
    font-size: 1.6rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    max-height: calc(1.4em* 2);
  }
  .section2 .sec2Box .sec2_2 .sec2_2_list li span {
    font-size: 1.4rem;
  }
  .section2 .sec2Box .sec2_3 .sec2_3_content {
    margin: 0 3rem 0 0;
    max-width: 48%;
  }
  .section2 .sec2Box .sec2_3 .sec2_3_list {
    margin: 0;
    padding: 2.5rem 3rem;
    max-width: 48%;
  }
  .section2 .sec2Box .sec2_3 .sec2_3_list li a em {
    font-size: 1.6rem;
  }
  .section2 .sec2Box .sec2_3 .sec2_3_list li {
    font-size: 1.4rem;
  }
  .section2 .sec2Box .sec2_3 .sec2_3_list li span {
    font-size: 1.4rem;
  }
  .section2 .sec3Box .sec3Boxinner {
    padding: 4rem 3rem;
    margin: 3rem 0 5rem 0;
  }

  .slide {
    height: 100%;
    background-size: cover;
  }
  /* 버튼 크기 줄이기 */
  .slide .slideinner button {
    font-size: 1.8rem;
    padding: 0.8rem 2.5rem;
  }

  .controls {
    max-width: 1000px;
  }

  .sec2_2_contentSlide {
    display: flex;
    width: 400%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
  }
  .sec2_2_contentSlide > div {
    width: 25%;       /* 각 슬라이드가 컨테이너의 1/4을 차지 */
    max-width: none;  /* 고정 max-width 제거 */
  }

}

/* ✅ 992px 이하 (태블릿) */
@media (max-width: 992px) {
  /* 헤더 메뉴 */
  .headerWrap {
    padding: 1rem 0;
  }
  .head_menu {
    display: none;
  }
  .head_user .ham {
    display: block;
  }
  .head_user {
    gap: 1rem;
  }

  /* 메인 슬라이드 높이 줄이기 */
  .main {
    height: 500px;
  }
  .slide {
    height: 100%;
    background-size: cover;
  }
  .slide .slideinner h2 {
    font-size: 3rem;
  }
  .slide .slideinner p {
    font-size: 1.8rem;
  }

  /* 대회 정보 및 공지사항 세로 정렬 */
  .section2 .sec2Box {
    flex-direction: column;
    /* gap: 2rem; */
  }
  .section2 .sec2Box > div {
    width: 100%;
  }

  /* 대회 신청 / 선수 신청 박스 줄이기 */
  .section2 .sec3Box {
    display: flex;
    /* gap: 1.5rem;
    margin: 3rem 0; */
  }
  .section2 .sec2Box .sec2_2 {
    margin-bottom: 2rem;
  }
  .section2 .sec3Box .sec3Boxinner {
    width: 100%;
    padding: 4rem 3rem;
  }

  /* 푸터 정렬 조정 */
  .footerWrap {
    flex-direction: column;
    gap: 1.5rem;
  }
}

@media (max-width: 800px) {
  .mt30 {
    margin-top: 2rem;
  }
}

/* ✅ 768px 이하 (모바일) */
@media (max-width: 800px) {
  /* text */
  .fs20 {
    font-size: 1.8rem;
  }
  /* boxStyle */
  .boxStyle01 {
    padding: 3rem;
  }
  /* btn */
  .btn {
    padding: 1.3rem;
  }

  /* 헤더 크기 조정 */
  header {
    height: auto;
    padding: 1rem;
  }
  .head_logo img {
    width: 100px;
  }
  .head_menu ul {
    gap: 0.5rem;
  }
  .head_menu ul li a {
    font-size: 1.6rem;
  }

  /* 메인 슬라이드 더 줄이기 */
  .main {
    height: 400px;
  }
  .slide .slideinner h2 {
    font-size: 2.4rem;
  }
  .slide .slideinner p {
    font-size: 1.6rem;
  }
  .slide .slideinner button {
    font-size: 1.6rem;
    padding: 0.7rem 2rem;
  }

  /* 대회 신청 & 선수 신청 크기 조정 */
  .section2 .sec3Box .sec3Boxinner {
    padding: 2rem 3rem;
    text-align: center;
  }

  /* 공지사항 리스트 줄이기 */
  .section2 .sec2Box .sec2_3 .sec2_3_list li a em {
    font-size: 1.4rem;
  }
  .section2 .sec2Box .sec2_2 .sec2_2_list li {
    font-size: 1.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 2;
    max-height: calc(1.6em* 2);
  }
  .section2 .sec2Box .sec2_2 .sec2_2_list li span {
    display: none;
  }
  .section2 .sec2Box .sec2_3 .sec2_3_content > div:nth-child(2) {
    font-size: 1.6rem;
    text-align: center;
    justify-content: center;
  }
  .section2 .sec2Box .sec2_3 .sec2_3_content > div:nth-child(2) span {
    display: none;
  }
  .section2 .sec2Box .sec2_3 .sec2_3_list li a b {
    display: none;
  }
  .section2 .sec2Box .sec2_3 .sec2_3_list li a span {
    display: none;
  }
  .section2 .sec3Box {
    /* gap: 0; */
  }
  .section2 .sec3Box .sec3Boxinner {
    margin: 0 0 2rem 0;
    width: 100%;
    justify-content: space-between;
  }
  .section2 .sec3Box .sec3_contest div:nth-child(3) {
    margin: 0;
  }
  .section2 .sec3Box .sec3_player div:nth-child(3) {
    margin: 0;
  }
  .section2 .sec3Box .sec3Boxinner>div:nth-child(2) {
    display: flex;
    justify-content: center;
  }
  .section2 .sec3Box .sec3Boxinner h2 {
    font-size: 1.6rem;
    margin-bottom: 0;
  }
  .section2 .sec3Box .sec3Boxinner p {
    /* font-size: 1.4rem; */
    display: none;
  }

  /* 푸터 크기 조정 */
  .footerWrap {
    font-size: 1.2rem;
  }
  .footerWrap > div:nth-child(2) a {
    margin-right: 2rem;
  }
}


@media (max-width: 520px) {

  .section2 .sec2Box .sec2_1 p {font-size: 1.6rem;}
  .section2 .sec2Box .sec2_1 h2 {font-size: 3.6rem;}
  .section2 .sec2Box .sec2_1 button a {font-size: 1.6rem;}

  .footerWrap > div:nth-child(2) {
    flex-direction: column;
    gap: 1rem;
  }
  .footerWrap > div:nth-child(2) p {
    margin-left: 0;
  }
}

/* ✅ 480px 이하 (모바일 작은 화면) */
@media (max-width: 480px) {
  /* text */
  .title p,
  .textArea,
  .textAreaG {
    font-size: 1.4rem;
  }

  .contest-item .title1 {
    width: 10rem;
  }

  .contest-item .title2 p {
    font-size: 1rem;
  }

  .contest-item .title3 {
    width: 5rem;
  }

  .fs16 {
    line-height: 140%;
    font-size: 1rem;
  }

  /* br */
  .br425 {
    display: block;
  }

  /* flex */
  .flex_sb {
    flex-flow: column;
  }

  /* boxStyle */
  .boxStyle01 {
    padding: 2rem;
  }

  /* btn */
  .btn .none {
    display: none;
  }

  /* head */

  .headerWrap {
    margin: 0px;
    max-width: 500px;
    width: 100%;
  }
  .section2 .sec2Box .sec2_2 .sec2_2_list {width: 100%;}
  .section2 .sec2Box .sec2_2 > div {width: 100%;}
  .section2 .sec2Box .sec2_3 .sec2_3_content {max-width: 100%;}
  .section2 .sec2Box .sec2_3 .sec2_3_list {max-width: 100%;}
  .headerWrap,
  .section2,
  .slideinner,
  .footerWrap,
  .contestInfo {
    padding: 0 1rem;
  }

  .head_user .ham {
    margin-right: 1rem;
  }
  .head_logo img {
    width: 80px;
  }
  .head_menu ul li a {
    font-size: 1.4rem;
  }

  /* 메인 슬라이드 더 줄이기 */
  .main {
    height: 350px;
  }
  .slide .slideinner h2 {
    font-size: 2rem;
  }
  .slide .slideinner p {
    font-size: 1.4rem;
  }
  .slide .slideinner button {
    font-size: 1.4rem;
    padding: 0.5rem 1.5rem;
  }

  /* 대회 신청 & 선수 신청 더 줄이기 */
  .section2 .sec3Box .sec3Boxinner {
    padding: 2.5rem;
  }
  .section2 .sec2Box .sec2_1 p {
    font-size: 1.6rem;
  }
  .section2 .sec2Box .sec2_1 h2 {
    font-size: 4rem;
  }
  .section2 .sec2Box .sec2_1 a {
    font-size: 1.6rem;
    padding: 1rem 3rem;
  }
  .section2 .sec2Box .sec2_2 {
    flex-direction: column;
  }
  .section2 .sec2Box .sec2_2 .sec2_2_list {
    margin: 0;
  }
  .sec2_2_content {
    margin-top: 2rem;
  }
  .section2 .sec2Box {
    gap: 0;
  }
  .section2 .sec2Box .sec2_3 {
    flex-direction: column;
  }
  .section2 .sec2Box .sec2_3 .sec2_3_content {
    margin: 0;
  }
  .section2 .sec2Box .sec2_3 .sec2_3_list {
    margin-top: 2rem;
  }
  .section2 .sec2Box .sec2_2 {
    margin-bottom: 2rem;
  }

  .section2 .sec3Box .sec3Boxinner h2 {
    margin: 0;
  }
  .section2 .sec3Box .sec3_player div:nth-child(1) {
    margin: 0;
  }
  .section2 .sec3Box .sec3_contest div:nth-child(1) {
    margin: 0;
  }
  .section2 .sec3Box .sec3Boxinner p {
    display: none;
  }

  /* mainTab */
  .maintab > * {
    width: calc(100% / 2);
  }
  .maintab > li {
    justify-content: center;
    align-items: inherit;
    flex-wrap: inherit;
    flex-grow: inherit;
    flex-shrink: inherit;
    flex-basis: inherit;
    box-sizing: inherit;
  }

  /* 푸터 크기 조정 */
  .footerWrap {
    font-size: 1rem;
    padding: 2rem;
  }
  .footerWrap > div:nth-child(1) img {
    margin-bottom: 1.5rem;
  }
  .footerWrap > div:nth-child(1) {
    margin-bottom: 1.5rem;
  }

  .footerWrap > div:nth-child(2) {
    padding-top: 1.5rem;
  }
/* 
  .sec2_2_contentSlide > div {
    background-position: ;
  } */

  .section2 .sec3Box>a {width: 48%;}
  .section2 .sec3Box .sec3Boxinner h2 {font-size: 14px;}
  .section2 .sec3Box .sec3Boxinner div:nth-child(1) {
    display: none;
  }
  .section2 .sec3Box .sec3Boxinner {
    display: flex; justify-content: center;
  }
  .section2 .sec3Box .sec3Boxinner div:nth-child(3) {
    display: none;
  }

}

@media (max-width: 400px) {
  .mb20 {
    margin-bottom: 1rem;
  }
  /* btn */
  .btn {
    font-size: 1.2rem;
    padding: 1.3rem 1rem;
    min-width: 80px;
  }
  /* mainTab */
  .maintab > li a {
    font-size: 1.2rem;
    padding: 1.5rem 1rem;
  }
  .section2 .sec2Box .sec2_1 h2 {
    font-size: 3rem;
  }
}

/* ---------- input ---------- */
input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border_normal);
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 1.4rem;
  color: var(--subtxt);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden !important;
  -webkit-line-clamp: 1;
  display: -webkit-box;
}

/* ---------- popup-table ---------- */
.tableArea {
  max-height: 300px;
  overflow-x: auto;
}
.tableArea table {
  width: 100%;
  border-collapse: collapse;
  width: -webkit-fill-available;
}
.tableArea th {
  background: var(--bg_gray);
}
.tableArea th,
td {
  font-size: 1.4rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border_normal);
  text-align: center;
  white-space: nowrap;
}

/* ---------- popup ---------- */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  display: none;
}
.popup-overlay.block {
  display: block;
  display: flex;
}
.popupWrap {
  background: var(--white);
  padding: 4rem;
  border-radius: 1rem;
  max-width: 1000px;
  width: 90%;
}
.popupWrap > * {
  margin-bottom: 4rem;
}
.popupWrap > *:last-child {
  margin-bottom: 0;
}
.poptitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}
.poptitle h2 {
  font-size: 2.4rem;
}
.close-btn {
  cursor: pointer;
  font-size: 2rem;
}
.btnWrap {
  display: flex;
  align-items: center;
  gap: 2rem;
  justify-content: center;
}

/* select */
.select-box {
  width: 100%;
  max-width: 16rem;
  position: relative;
  display: flex;
  align-items: center;
}

.select-box select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--white);
  border: 1px solid var(--border_normal);
  border-radius: 7px;
  padding: 0.8rem 1.2rem;
  font-size: 16px;
  cursor: pointer;
  outline: none;
  width: 100%;
  height: 4.2rem;
  font-size: 1.4rem;
  letter-spacing: -0.03rem;
}

.select-box i {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--subtxt);
  transition: transform 0.15s ease-in;
  pointer-events: none;
}
.text-box {
  width: 100%;
  max-width: 28rem;
}