@charset "utf-8";
/* 공통 */
/* serif */
.serif{font-family: 'YESMyoungjo-Regular' !important;}
.normal{font-family: "Pretendard-Regular" !important;}
/* sc-btn */
.sc-btn{background-color: rgba(0, 0, 0, 0.3); padding: 8px 24px; border: 1px solid var(--line-color); border-radius: 40px; display: flex; align-items: center; column-gap: 16px;}
.sc-btn span{font-family: 'YESMyoungjo-Regular'; opacity: 0.5; transition: all 0.3s; color: var(--cont-color);}
.sc-btn img{transition: all 0.3s;}
.sc-btn:hover span {opacity: 1;}
.sc-btn:hover img{transform: translateX(10px);}

/* header-wrap */
.header-wrap{width: 100%; display: flex; align-items: center; justify-content: space-between; /* padding-bottom: 15px; border-bottom: 1px solid var(--line-color);*/}
.header-wrap h1{height: 3rem;}
.header-wrap a{display: block; height: 100%;}
.header-wrap .logo{height: 100%;}
.menu-btn{display: flex; column-gap: 12px; align-items: center;}
.menu-btn > span {opacity: 0.5 !important;}
.menu-btn .menu-icon {text-align: right;}
.menu-btn .menu-icon > span{display: block; width: 30px; height: 2px; background-color: var(--cont-color);}
.menu-btn .menu-icon > span:nth-child(2){width: 20px; margin: 7px 0 7px 10px; transition: all 0.3s;}
.menu-btn:hover .menu-icon > span:nth-child(2) {margin: 7px 0 7px 0;}
.menu-btn:hover > span{opacity: 1 !important;}

.menu-btn .close-icon {width: 30px; height: 30px; position: relative;}
.menu-btn .close-icon span {position: absolute; top: 50%; left: 50%; width: 30px; height: 2px; background-color: var(--cont-color); transform-origin: center;}
.menu-btn .close-icon span:first-child {transform: translate(-50%, -50%) rotate(45deg);}
.menu-btn .close-icon span:last-child {transform: translate(-50%, -50%) rotate(-45deg);}

/* header */
header {width: 100%; padding: 20px 25px; position: relative; z-index: 1; overflow: hidden;}
header .bg-video {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;}
header::after{background: #000000; background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; z-index: -1;}

.main-banner{width: 100%;}
.main-banner > p{font-size: 3vw; padding: 1vw 0;}
/* .main-banner > div{background-color: rgba(0, 0, 0, 0.3); backdrop-filter: blur(5px); position: relative; border: 1px solid var(--line-color); width: 100%; height: 75vh; min-height: 600px; display: flex; row-gap: 3rem; flex-direction: column; align-items: center; justify-content: center;} */
.main-banner > div{position: relative; width: 100%; height: 90vh; min-height: 600px; display: flex; row-gap: 3rem; flex-direction: column; align-items: center; justify-content: center;}
.main-banner .main-logo{opacity: 0.7; width: 100px; height: 100px;}
.main-banner h2{font-family: 'SBAggroB'; position: relative; z-index: 2; text-align: center; font-size: 6vw; height: 6vw; font-weight: bold; line-height: 1; display: flex; align-items: center;}
.main-banner h2 span{display: inline-block;}
.main-banner > div h2 span:nth-child(2){margin-right: 2rem;}
.main-banner p{font-size: 1.25rem; color: var(--cont-text1);}
/* .main-banner > div h2 p{position: relative;}
.main-banner > div h2 p span{position: absolute; top: 1vw; right: 6vw; display: inline-block; padding: 4px 8px; background-color: red; color: var(--cont-color); font-size: 16px;} */

.scroll-down,.scroll-desc {align-content: center; display: flex; justify-content: center; width: 100%;}
.scroll-down {width: 100%; flex-wrap: wrap; z-index: 999; position: fixed; left: 0; bottom: 1vh;}
.scroll-down .scroll-desc {font-weight: 500; padding-bottom: 30px;}
.scroll-down .line {animation-duration: 2.2s; animation-iteration-count: infinite; animation-name: scroll; animation-timing-function: linear; background: var(--cont-color); bottom: 0; display: flex; height: 20px; justify-content: center; position: relative; width: 1px;}

.contact-btn{position: fixed; z-index: 9998; right: 2rem; bottom: 2rem; width: 150px; height: 150px; display: flex; justify-content: center; align-items: center; flex-direction: column; color: var(--cont-color); padding: 1vw; font-size: 1.125rem; background-color: var(--input-bg); border-radius: 50%; backdrop-filter: blur(20px);}
.contact-btn img{position: absolute; top: 5%; left: 5%; width: 90%; height: 90%; animation: rotateImage 10s linear infinite;}
.contact-btn svg, .contact-btn span{opacity: 0.5; transition: all 0.3s; text-align: center;}
.contact-btn:hover svg, .contact-btn:hover span{opacity: 1;}
.contact-btn:hover svg{margin-left: 10px;}

/* nav#gnb */
#gnb{overflow: hidden; padding: 20px 25px; width: 100%; height: 100%; position: fixed; top: -100%; left: 0; z-index: 99999;  transition: all 1s; width: 100%; height: 100%; background-color: var(--bg-color);}
#gnb.open{top: 0;}

#gnb .gnb-wrap{position: relative; max-width: 1440px; width: 80%; height: 85vh; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;}
/*#gnb .gnb-wrap::after{opacity: 0.5; content: ''; display: block; height: 40vh; width: 40vh; position: absolute; top: calc(50% - 20vh); left: calc(-17% - 20vh); transform: translate(-50%,-50%); background: url(../img/logo-circle.svg) no-repeat; background-size: cover; animation: rotateImage 10s linear infinite;;}*/
#gnb ul{display: flex; flex-direction: column;}

#gnb .gnb{width: 50%; row-gap: 1.5vw; font-size: 4rem; font-weight: bold;}
#gnb .gnb li > a {opacity: 0.5; transition: all 0.3s;}
#gnb .sub-gnb{margin-top: 0.5rem; font-size: 3rem; color: var(--cont-text1); row-gap: 0.5rem;}
#gnb .sub-gnb li{padding-left: 1rem;}
/* 네비 호버 */
#gnb .gnb > li,
#gnb .sub-gnb > li{overflow: hidden;}
#gnb .gnb > li > a,
#gnb .sub-gnb li > a{position: relative;}
#gnb .gnb > li > a > span,
#gnb .sub-gnb > li > a > span{transition: all 0.3s; position: absolute; left: calc(100% + 1rem); bottom: 100%; white-space: nowrap;}
#gnb .gnb > li > a > span{font-size: 1.5rem;}
#gnb .sub-gnb > li > a > span{font-size: 1.2rem;}
#gnb .gnb li:hover > a,
#gnb .gnb li.on > a,
#gnb .sub-gnb li:hover > a,
#gnb .sub-gnb li.on > a {opacity: 1;}
#gnb .gnb > li:hover > a > span,
#gnb .gnb > li.on > a > span,
#gnb .sub-gnb > li:hover > a > span,
#gnb .sub-gnb > li.on > a > span{bottom: 0.5rem;}

#gnb .info{min-width: 35%; display: flex; flex-direction: column; align-items: flex-start;}
#gnb .info h3{font-size: 1.5rem;}
#gnb .info ul{width: 100%; margin-top: 1.5rem; margin-bottom: 5rem; font-size: 1.125rem; color: var(--cont-text1);}
#gnb .info ul li{width: 100%; display: flex; column-gap: 0.5vw; margin-bottom: 0.5vw;}
#gnb .info ul li:last-child{margin-bottom: 0;}
#gnb .info ul li span{display: inline-block; width: 4rem; font-weight: bold;}

/* main */
main{padding: 18vw 0 23vw; margin: 0 auto; max-width: 1440px; width: 80%;}
section{position: relative; z-index: 10; width: 100%; margin-bottom: 20.5vw; display: flex; flex-direction: column; row-gap: 80px; align-items: center;}


/* footer */
footer{ margin: 0 auto; max-width: 1440px; width: 80%; padding-bottom: 140px;}
footer>p{font-size: 5rem; font-weight: bold; padding-bottom: 1rem;}
footer>p strong{color: var(--point-color);}
footer>div{width: 100%;}
footer>div ul{display: flex; column-gap: 16px;}
footer .ft-top{margin-bottom: 48px; display: flex; justify-content: space-between; border-top: 1px solid var(--line-color); padding-top: 24px; font-weight: bold;}
footer .ft-bot{color: var(--cont-text1);}
footer .ft-bot ul{margin-bottom: 16px;}
.top-btn {transition: all 0.3s; opacity: 0.5; display: flex; align-items: center; column-gap: 8px;}
.top-btn:hover {opacity: 1;}

/* apply */
.apply-wrap {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: flex; justify-content: center; align-items: center; background-color: var(--input-bg); backdrop-filter: blur(10px);}
.apply-wrap .tit-wrap{margin-bottom: 2rem; text-align: left;}
.apply-wrap .tit-wrap h3{font-size: 4rem; margin-bottom: 1rem; width: calc(100% - 80px);}
.apply-wrap .tit-wrap p{color: var(--cont-text1);}
.apply-wrap .tit-wrap p strong{color: var(--point-color); font-weight: normal;}
.apply-wrap .close-btn{justify-content: flex-end; margin-bottom: 2rem; position: absolute; top: 2rem; right: 2rem;}
.apply-wrap .apply{position: relative; width: 90%; max-width: 1000px; padding: 2rem; border: 1px solid var(--line-color); background-color: rgba(0, 0, 0, 1);}

/* 폼 */
input[type="text"], textarea {color: var(--cont-text1); background: var(--input-bg); font-size: 1rem; resize: none; padding: 0.5rem; border-radius: 0;}
input[type="text"] {border: 0; border-bottom: 1px solid var(--line-color);}
input[type="text"]:focus,textarea:focus {outline: none;}
fieldset {border: none; padding: 0; margin: 0; min-inline-size: unset;}
textarea {border: 1px solid var(--line-color); width: 100%; height: 100px; padding: 1rem;}

/* 폼 레이아웃 */
.form-wrapper {width: 100%; margin: 0 auto; display: flex; flex-direction: column; row-gap: 2rem; align-items: center;}
.form-wrapper .form-wrap .form-row:not(:last-child),
.form-wrapper .form-wrap .form-group:not(:last-child){margin-bottom: 2rem;}
.form-wrapper .input-tit{font-size: 1rem; margin-bottom: 0.5rem; padding: 0 0.25rem;}
.form-wrapper .sc-btn span{font-family: "Pretendard-Regular";}

/* 인풋 묶음 */
.form-row {display: flex; column-gap: 1rem; row-gap: 2rem; margin-bottom: 20px; flex-wrap: wrap;}
.form-row .input-group{display: flex; flex-direction: column; align-items: flex-start;}
.form-row .input-group input {width: 100%; height: 3.125rem;}
.form-row .input-group .input-wrap {width: 100%; height: 3.125rem; display: flex; gap: 1rem;}

.form-row .input-group:nth-child(1){width: calc(100% / 3 - 2rem / 3);}
.form-row .input-group:nth-child(2){width: calc(100% / 3 - 2rem / 3);}
.form-row .input-group:nth-child(3){width: calc(100% / 3 - 2rem / 3);}
.form-row .input-group:nth-child(4){width: calc(100% / 2 - 2rem / 2);}
.form-row .input-group:nth-child(5){width: calc(100% / 2 - 2rem / 2);}

/* 라디오그룹 */
.radio-group {display: flex; gap: 1rem;}
.radio-group input[type="radio"] {display: none;}
.radio-group label {font-size: 0.875rem; width: 100%; min-height: 3.125rem; text-align: center; display: flex; justify-content: center; align-items: center;  padding: 0.5rem; border: 1px solid var(--line-color); background-color: var(--input-bg); transition: background-color 0.3s, color 0.3s;}
.radio-group input[type="radio"]:checked + label {background-color: var(--cont-color); color: #000;}

/* 로딩 */
.loading{display: none; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--input-bg); backdrop-filter: blur(50px); z-index: 99999;}
.loader {width: 50px; --b: 8px; aspect-ratio: 1; border-radius: 50%; padding: 1px; background: conic-gradient(#0000 10%,var(--point-color)) content-box; -webkit-mask: repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg), radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b))); -webkit-mask-composite: destination-in; mask-composite: intersect; animation:l4 1s infinite steps(10);}
@keyframes l4 {to{transform: rotate(1turn)}}

@keyframes rotateImage {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media screen and (min-width: 1921px) {
    main{max-width: unset;}
    footer {max-width: unset;}
}

@media screen and (min-width: 1281px) {
}

@media screen and (max-width: 1280px) {
  .radio-group label{cursor: pointer;}
}


@media screen and (max-width: 1024px) {
    main, footer{width: 90%;}
    #gnb .gnb-wrap{width: 90%; flex-direction: column; justify-content: space-around;}
    #gnb .gnb, #gnb .info{width: 100%;}
    #gnb .gnb-wrap::after{left: unset; right: calc(-17% - 20vh);}
    #gnb .info ul{margin-bottom: 0;}
    #gnb .info .sc-btn{display: none;}
    .main-banner > p{font-size: 7vw; padding: 2vw 0;}
    .main-banner > div{min-height: unset;}
    .main-banner > div h2{font-size: 8vw; height: 24vw; flex-wrap: wrap; justify-content: center;}
    .main-banner > div h2 span:nth-child(1),.main-banner > div h2 span:nth-child(2) {font-size: 12vw; width: 50%; margin: 0;}
    .main-banner > div h2 span:nth-child(1){text-align: right;}
    .main-banner > div h2 span:nth-child(2){text-align: left;}
    footer>p{font-size: 4rem;}
    .contact-btn{right: 1rem; width: 115px; height: 115px;}
}

@media screen and (max-width: 768px) {
  footer>div ul {flex-direction: column; row-gap: 1rem;}
}

@media screen and (max-width: 480px) {
  .contact-btn{right: 1rem; width: 80px; height: 80px; font-size: 0.875rem;}
  .apply-wrap .tit-wrap h3{font-size: 2.5rem;}
  footer>p{font-size: 3rem;}
  #gnb .gnb{font-size: 3rem;}
}