@charset "utf-8";

h2 { font-size: 42px; font-weight: 800; line-height: 130%; letter-spacing: -0.42px; text-align: center; margin-bottom: 80px; position: relative; }
.has-marker { padding-top: 68px; }
.has-marker::before { content: ''; display: block; width: 38px; aspect-ratio: 38/28; position: absolute; top:0; left: 50%; transform: translateX(-50%); background: url('/resources/img/main/main_h2_deco.svg') no-repeat center/contain; }

.wave-btn { display: block; width: fit-content; margin:0 auto; padding:16px 40px; font-size: 20px; border-radius: 50px; position: relative; z-index: 1; transition: 0.2s ease-out; border: 1px solid rgba(255, 255, 255, 0.30); background: rgba(255, 255, 255, 0.05); }
.wave-btn:active { transform: scale(0.98); }
.wave-btn::before, .wave-btn::after {content: ""; width:100%; height:100%; display: inline-block; position: absolute; left:50%; top:50%; border-radius: 100px; z-index: -1; transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0.1); opacity: 0; }
.wave-btn:hover::before { animation-name: wave; animation-iteration-count: infinite; animation-duration: 2.5s; }
.wave-btn:hover::after { animation-name: wave2; animation-iteration-count: infinite; animation-duration: 2.5s; }

@keyframes wave {
  0% { width:100%; height:100%; opacity: 1; }
  40% { opacity: 0.4; }
  70% { width:calc(100% + 80px); height:calc(100% + 60px); opacity: 0; }
  100% {opacity: 0; }
}
@keyframes wave2 {
  25% { width:100%; height:100%; opacity: 1; }
  50% { opacity: 0.4; }
  80% { width:calc(100% + 80px); height:calc(100% + 60px); opacity: 0; }
  100% {opacity: 0;}
}

@media screen and (max-width:1400px){
  h2 { margin-bottom: 70px; font-size: 36px; }
  .has-marker { padding-top: 60px; }
  .has-marker::before { width: 36px; }

  .wave-btn { padding: 12px 36px; font-size: 19px; }
}
@media screen and (max-width:1130px){
  h2 { margin-bottom: 68px; font-size: 32px; }
  .has-marker { padding-top: 58px; }
  .has-marker::before { width: 34px; }

  .wave-btn { padding: 12px 32px; font-size: 18px; }
}
@media screen and (max-width:1024px){
  h2 { margin-bottom: 58px; font-size: 28px; }
  .has-marker { padding-top: 56px; }
  .has-marker::before { width: 32px; }

  .wave-btn { padding: 11px 28px; font-size: 17px; }
}
@media screen and (max-width:768px){
  h2 { margin-bottom: 48px; font-size: 24px; }
  .has-marker { padding-top: 54px; }
  .has-marker::before { width: 30px; }

  .wave-btn { padding: 11px 24px; font-size: 16px; }
}


/* main-sec1 */
.main-sec1 { padding:140px 0 190px; background: linear-gradient(180deg, #111114 0%, #2F2F6B 100%); }
.main-sec1 .inner { max-width: 1294px; }
.main-sec1 h2 { color:rgba(255, 255, 255, 0.9); }
.main-sec1 ul { display: grid; grid-template-columns: repeat(4, 1fr); gap:18px; }
.main-sec1 li { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap:30px; padding-top: 48px; border-radius: 16px; background: rgba(255, 255, 255, 0.10); overflow: hidden; color:white; }
.main-sec1 li .tit-box p { font-size: 20px; font-weight: 700; line-height: 140%; text-align: center; }
.main-sec1 .wave-btn { color:white; margin-top: 80px; }
.main-sec1 .wave-btn:hover { background: white; color:var(--main-black); }

@media screen and (max-width:1400px){
  .main-sec1 .wave-btn { margin-top: 60px; }
  .main-sec1 li .tit-box p { font-size: 19px; }
}
@media screen and (max-width:1130px){
  .main-sec1 ul { gap:14px }
  .main-sec1 li { padding-top: 40px; gap:26px; }
  .main-sec1 li .tit-box p { font-size: 17px; }
}
@media screen and (max-width:1024px){
  .main-sec1 { padding: 120px 0 170px; }
  .main-sec1 ul { gap:12px; grid-template-columns: repeat(2, 1fr);  max-width: 520px; margin: 0 auto; }
}
@media screen and (max-width:768px){
  .main-sec1 { padding: 100px 0 120px; }
  .main-sec1 li { padding-top: 36px; gap:24px; }
  .main-sec1 li .tit-box p { font-size: 16px; transform: rotate(0.045deg); }
}
@media screen and (max-width:450px){
  .main-sec1 ul { grid-template-columns: repeat(1, 1fr); max-width: 250px; }
}

/* main-sec2 */
.main-sec2 { padding: 140px 0 200px; }
.main-sec2 .inner { max-width: 1760px; }
.main-sec2 ul { display: grid; grid-template-columns: repeat(4, 1fr); gap:46px; }
.main-sec2 li a { display: block; transition: .3s ease-out; position: relative; }
.main-sec2 li:nth-child(odd) a { margin-top: 55px; }
.main-sec2 li .img-box { aspect-ratio: 405/355; border-radius: 16px; overflow: hidden; }
.main-sec2 li .img-box img { height: 100%; object-fit: cover; transition: .3s ease-out; }
.main-sec2 li p { font-size: 24px; font-weight: 700; margin-top: 16px; text-align: center; }
.main-sec2 li .arw-box { width: 56px; height: 56px; padding:9px; position: absolute; right:-1px; top:-1px; background: url('/resources/img/main/main_global_arw_bg.png') no-repeat center/contain; display: flex; justify-content: right; }
.main-sec2 li .arw-box span { display: block; width: 19px; aspect-ratio: 1/1; overflow: hidden; position: relative; }
.main-sec2 li .arw-box span img { width: 39px; aspect-ratio: 1/1; position: absolute; right: 0; top:0; transition: 0.2s ease-out; }
.main-sec2 li:hover a { transform: translateY(-10px); }
.main-sec2 li:hover .img-box img { transform: scale(1.05); }
.main-sec2 li:hover .arw-box img { transform: translate(50%,-50%); }

@media screen and (max-width:1400px){
  .main-sec2 ul { gap:32px; }
  .main-sec2 li p { font-size: 22px; }
  .main-sec2 li:nth-child(odd) a { margin-top: 48px; }
}

@media screen and (max-width:1024px){
  .main-sec2 { padding: 100px 0 160px; }
  .main-sec2 ul { gap:20px; }
  .main-sec2 li p { margin-top: 12px; font-size: 20px; }
  .main-sec2 li .arw-box { width: 48px; height: 48px; padding: 6px; }
  .main-sec2 li:nth-child(odd) a { margin-top: 32px; }
  .main-sec2 li .img-box { aspect-ratio: 40/46; }
}

@media screen and (max-width:768px){
  .main-sec2 { padding: 80px 0 120px; }
  .main-sec2 ul { gap:24px; grid-template-columns: repeat(2, 1fr); max-width: 520px; margin:0 auto; }
  .main-sec2 li p { margin-top: 10px; font-size: 18px; }
}

@media screen and (max-width:500px){
  .main-sec2 ul { gap:18px; }
  .main-sec2 li p { margin-top: 10px; font-size: 17px; }
}


/* main-sec3 */
.main-sec3 { padding:140px 0 150px; background: var(--main-black); color:white; font-size: 18px; }
.main-sec3 .inner { max-width: 1100px; }
.main-sec3 .wave-btn { color:white; margin-top: 80px; }
.main-sec3 .wave-btn:hover { background: white; color:var(--main-black); }
.main-sec3 .frm-tit { margin-bottom: 12px; font-size: 20px; font-weight: 700; }
.main-sec3 .frm-tit .required { color:var(--sub-key-color); }
.main-sec3 .basic_form { display: grid; grid-template-columns: repeat(2, 1fr); gap:32px 46px; }
.main-sec3 .basic_form label { cursor: pointer; }  
.main-sec3 .basic_form ::placeholder { color:rgba(255, 255, 255, 0.7); font-weight: 300; }
.main-sec3 .basic_form input[type="text"] { width: 100%; height: 60px; padding:0 32px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); color:white; border:none; }
.main-sec3 .basic_form input[type="text"]:autofill { background: rgba(255, 255, 255, 0.05); color:white; }
.main-sec3 .basic_form input[type="text"]:-webkit-autofill { background: rgba(255, 255, 255, 0.05); color:white; }
.main-sec3 .basic_form textarea { width: 100%; height: 160px; padding:20px 32px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); color:white; border:none; line-height: 140%; }
.main-sec3 .basic_form .select-div { position: relative; }
.main-sec3 .basic_form .select-div::after { content: ''; display: block; width: 24px; aspect-ratio: 1/1; position: absolute; right:23px; top:50%; transform: translateY(-50%); background: url('/resources/img/main/main_drop_down.svg') no-repeat center/contain; }
.main-sec3 .basic_form select { width: 100%; height: 60px; padding:0 32px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); color:white; border:none; }
.main-sec3 .basic_form option { color:var(--main-black) }
.main-sec3 .basic_form input[type="checkbox"] { display: none; }
.main-sec3 .basic_form input[type="checkbox"] + label { padding-left: 40px; position: relative; }
.main-sec3 .basic_form input[type="checkbox"] + label::before { content: ''; width: 24px; height: 24px; display: block; position: absolute; left: 0; top:50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.05); overflow: hidden; border-radius: 2px; }
.main-sec3 .basic_form input[type="checkbox"]:checked + label::before { background: url('/resources/img/main/checked.svg') no-repeat center/contain; }
.main-sec3 .grid-col-2 { grid-column: span 2 / auto; }
  /* 카테고리 */
  .main-sec3 .frm-category ul { display: grid; grid-template-columns: repeat(6, 1fr); gap:46px; }
  .main-sec3 .frm-category input { display: none; }
  .main-sec3 .frm-category label { height: 135px; padding-top: 6px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap:14px; width: 100%; border-radius: 10px; background: rgba(255, 255, 255, 0.05); font-size: 20px; font-weight: 700; transition: .3s ease-out; border: 1px solid transparent; }
  .main-sec3 .frm-category label img { width: 40px; filter: brightness(20); opacity: 0.3; transition: .2s ease-out; }
  .main-sec3 .frm-category input + label:hover { background: white; color:var(--main-black); }
  .main-sec3 .frm-category input + label:hover img { filter:none; opacity: 1; }
  .main-sec3 .frm-category input:checked + label { border-color: #72C9F1; }
  .main-sec3 .frm-category input:checked + label img { filter:none; opacity: 1; }
  /* 캡챠 */
  .main-sec3 .frm-captcha .frm-tit { font-size: 18px; }
  .main-sec3 .frm-captcha .frm-desc { display: flex; align-items: center; }
  .main-sec3 .frm-captcha #captcha { width: 96px; height: 32px; padding:0 10px; border-radius: 0; }
  .main-sec3 .frm-captcha #capt_img { width: 90px; height: 32px; }
  .main-sec3 .frm-captcha .refresh-captcha { width: 24px; aspect-ratio: 1/1; margin-left:4px; border:none; background: url('/resources/img/main/capcha_refresh.svg') no-repeat center/contain; text-indent: -9999px; overflow: hidden; }
  
@media screen and (max-width:1130px){
  .main-sec3 { font-size: 17px; }
  .main-sec3 .frm-tit { font-size: 18px; margin-bottom: 10px; }
  .main-sec3 .frm-category ul { gap:32px; }
  .main-sec3 .frm-category label { padding-top: 2px; font-size: 18px; gap:12px; }
  .main-sec3 .frm-category label img { width: 36px; }
  .main-sec3 .frm-captcha .frm-tit { font-size: 17px; }
  .main-sec3 .basic_form input[type="text"] { padding: 0 26px; }
  .main-sec3 .basic_form textarea { padding: 20px 26px; }
  .main-sec3 .basic_form select { padding: 0 26px; }

  .main-sec3 .wave-btn { margin-top: 60px; }
}

@media screen and (max-width:1024px){
  .main-sec3 { font-size: 16px; padding:100px 0 120px; }
  .main-sec3 .frm-tit { font-size: 17px; }
  .main-sec3 .frm-captcha .frm-tit { font-size: 16px; }
  .main-sec3 .basic_form { gap:28px 38px; }
  .main-sec3 .frm-category ul { gap:12px; }
  .main-sec3 .frm-category label { height: 125px; gap:10px; font-size: 16px; transform: rotate(0.045deg); }
  .main-sec3 .basic_form input[type="text"] { height: 54px; }
  .main-sec3 .basic_form select { height: 54px; }
  .main-sec3 .basic_form .select-div::after { right: 16px; }
}

@media screen and (max-width:768px){
  .main-sec3 .frm-category ul { grid-template-columns: repeat(3, 1fr); }
  .main-sec3 .basic_form { gap:28px 16px }
  .main-sec3 .basic_form input[type="text"] { padding: 0 20px; }
  .main-sec3 .basic_form textarea { padding: 18px 20px; }
  .main-sec3 .basic_form select { padding: 0 20px; }
  .main-sec3 .basic_form .select-div::after { right: 12px; }

  .main-sec3 .basic_form input[type="checkbox"] + label::before { width: 20px; height: 20px; }
  .main-sec3 .basic_form input[type="checkbox"] + label { padding-left: 32px; }
}

@media screen and (max-width:550px){
  .main-sec3 { font-size: 15px; padding:80px 0 100px; }
  .main-sec3 .frm-tit { font-size: 16px; }
  .main-sec3 .frm-captcha .frm-tit { font-size: 15px; }
  .main-sec3 .frm-category ul { grid-template-columns: repeat(2, 1fr); }
  .main-sec3 .basic_form { grid-template-columns: repeat(1, 1fr); }
  .main-sec3 .grid-col-2 { grid-column: auto; }
}


/* main-sec4  */
.main-sec4 { padding:140px 0 200px; position: relative; }
.main-sec4 .bg { position: absolute; left: 0; top:50%; transform: translateY(-50%); }
.main-sec4 .bg ul { display: flex; }
.main-sec4 .inner { max-width: 1100px; }
.main-sec4 .state-box ul { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:16px; }
.main-sec4 .state-box li { display: flex; flex-direction: column; justify-content: space-between; height: 208px; padding:36px 36px 30px; border-radius: 16px; border:1px solid #EEE; background: #F5F5F5; position: relative; }
.main-sec4 .state-box li:nth-child(1) { padding-bottom: 25px; background: radial-gradient(507.5% 118.57% at 12.92% 18.04%, #2DB2F8 0%, #008CD6 100%); color:white; overflow: hidden; }
.main-sec4 .state-box li:nth-child(1)::before { content:''; display: block; height: 100%; aspect-ratio: 431/208; position: absolute; left:0; top:0; background: url('/resources/img/main/main_board_deco.png') no-repeat center/contain; z-index: -1; }
.main-sec4 .state-box li:nth-child(1) p:nth-child(1) { font-size: 32px; }
.main-sec4 .state-box li:nth-child(1) p:nth-child(2) { font-size: 72px; font-weight: 800; }
.main-sec4 .state-box li:nth-child(3) { background: var(--main-black); color:white; }
.main-sec4 .state-box li p:nth-child(1) { font-size: 24px; font-weight: 700; line-height: 130%; }
.main-sec4 .state-box li p:nth-child(2) { font-size: 50px; font-weight: 800; line-height: 100%; display: flex; align-items:start; gap:8px; justify-content: right; }
.main-sec4 .state-box li .cnt-plus { font-size: 46px; transform: translateY(-3px); }
.main-sec4 table { width: 100%; margin-top: 48px; font-size: 20px; }
.main-sec4 table th { padding: 20px 10px; text-align: center; border-top: 1px solid #DDD; border-bottom: 1px solid #DDD; background: #F5F5F5; }
.main-sec4 table td { padding: 30px 10px; text-align: center; border-bottom: 1px solid #DDD; }
  .main-sec4 .col-1 { width: 9%; }
  .main-sec4 .col-2 { width: 14%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .main-sec4 .col-3 { width: 41%; padding-left:20px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .main-sec4 .col-4 { width: 9%; }
  .main-sec4 .col-5 { width: 11%; }
  .main-sec4 td.col-5 { font-size: 18px; }
  .main-sec4 .col-6 { width: 12%; }
.main-sec4 .board-stat { width: 80px; margin:0 auto; padding:8px 0; text-align: center; font-size: 16px; font-weight: 700; border-radius: 4px; transform: rotate(0.045deg); }
  .main-sec4 .board-wait { background: #F5F5F5; }
  .main-sec4 .board-ing { background: var(--main-black); color:white; }
  .main-sec4 .board-end { background: #18A0E8; color:white; }
.main-sec4 .wave-btn { margin-top: 48px; border-color: #1111144D; }
.main-sec4 .wave-btn:hover { background: var(--main-black); color:white; }
.main-sec4 .wave-btn::before,.main-sec4 .wave-btn::after { background: rgba(17, 17, 20, 0.1); }

@media screen and (max-width:1130px){
  .main-sec4 .state-box li:nth-child(1) p:nth-child(1) { font-size: 26px; }
  .main-sec4 .state-box li:nth-child(1) p:nth-child(2) { font-size: 60px; }
  .main-sec4 .state-box li p:nth-child(1) { font-size: 22px; }
  .main-sec4 .state-box li p:nth-child(2) { font-size: 46px; }

  .main-sec4 table { font-size: 18px; }
  .main-sec4 td.col-5 { font-size: 17px; }
}
@media screen and (max-width:1024px){
  .main-sec4 .state-box ul { grid-template-columns: 2fr 1fr 1fr 1fr; gap:12px; }
  .main-sec4 .state-box li { height: 160px; padding: 32px 26px 26px; }
  .main-sec4 .state-box li .cnt-plus { font-size: 40px; }
  .main-sec4 .state-box li:nth-child(1) p:nth-child(1) { font-size: 22px; }
  .main-sec4 .state-box li:nth-child(1) p:nth-child(2) { font-size: 50px; }
  .main-sec4 .state-box li p:nth-child(1) { font-size: 20px; }
  .main-sec4 .state-box li p:nth-child(2) { font-size: 36px; }

  .main-sec4 table { margin-top: 40px; font-size: 17px; }
  .main-sec4 td.col-5 { font-size: 16px; }
  .main-sec4 .board-stat { width: 100%; font-size: 15px; }
  .main-sec4 .col-3 { width: 30%; }
}

@media screen and (max-width:768px){
  .main-sec4 .col-2 { display: none; }
  .main-sec4 .col-5 { display: none; }
  .main-sec4 .state-box ul { grid-template-columns: 1.5fr 1fr; gap:10px; }
  .main-sec4 .state-box li { height: 134px; padding: 26px 24px 24px; }

  .main-sec4 .state-box li .cnt-plus { font-size: 32px; }
  .main-sec4 .state-box li:nth-child(1) { padding-bottom: 20px; }
  .main-sec4 .state-box li:nth-child(1) p:nth-child(1) { font-size: 20px; }
  .main-sec4 .state-box li:nth-child(1) p:nth-child(2) { font-size: 42px; }
  .main-sec4 .state-box li p:nth-child(1) { font-size: 18px; }
  .main-sec4 .state-box li p:nth-child(2) { font-size: 32px; }

  .main-sec4 table { margin-top: 32px; font-size: 16px; transform: rotate(0.045deg); }
  .main-sec4 td.col-5 { font-size: 15px; }
  .main-sec4 table th { padding: 16px 8px; }
  .main-sec4 table td { padding: 24px 8px; }
  .main-sec4 .col-3 { padding-left: 14px; }
}

@media screen and (max-width:500px){
  .main-sec4 .state-box li { height: 124px; }
  .main-sec4 .col-4 { display: none; }

  .main-sec4 .state-box li .cnt-plus { font-size: 26px; }
  .main-sec4 .state-box li:nth-child(1) p:nth-child(1) { font-size: 18px; }
  .main-sec4 .state-box li:nth-child(1) p:nth-child(2) { font-size: 32px; }
  .main-sec4 .state-box li p:nth-child(1) { font-size: 17px; }
  .main-sec4 .state-box li p:nth-child(2) { font-size: 30px; }

  .main-sec4 table  { font-size: 15px; }
  .main-sec4 table th { padding: 14px 6px; }
  .main-sec4 table td { padding: 18px 6px; }
  .main-sec4 .board-stat { font-size: 14px; }
    
}


/* [필수] 인덱스 팝업 */
.divpop { position: fixed; background: #fff; border: 1px solid #eee; z-index: 9999; }
.divpop .close_box { padding: 5px; color: #000; border-top: 1px solid #eee; }
.divpop .close_box label { font-size: 12px; }
.divpop .close_box .close { float: right; padding-top: 3px; cursor: pointer; font-size: 14px; color: #999; }
@media screen and (max-width: 1200px){ 
    .divpop { left: 0px !important;} 
}
@media screen and (max-width: 768px){ 
    .divpop { width: 100% !important; height: auto !important; top: 0px !important; left: 0px !important; } 
}