:root {--inputHeight: 50; --formFontSize: 20px; --formWidth: calc(120/20*1em);}
.sub {background: #000; padding-top: var(--header-height);}

@media screen and (max-width: 820px) {
    :root {--formFontSize: 18px;}
}

@media screen and (max-width: 500px) {
    :root {--formFontSize: 16px;}
}


.sub .paging {display: flex; align-items: center; justify-content: center; padding-top: 40px;}
.sub .paging > div {display: flex; align-items: center;}
.sub .paging > .num {padding: 0 20px;}
.sub .paging a {padding: calc(15/16*1em); color: #fff; font-family: 'SUIT'; font-weight: 500; font-size: 16px; letter-spacing: -0.03em; color: #fff; opacity: .3;}
.sub .paging a.act {opacity: 1; text-decoration: underline;}
.sub .paging .arr a {width: calc(30/16*1em); height: calc(30/16*1em); padding: 0; display: flex; align-items: center; justify-content: center;}

@media screen and (max-width: 1440px) {
    .sub .paging {padding-top: 35px;}
    .sub .paging a {font-size: 15px;}
}

@media screen and (max-width: 1280px) {
    .sub .paging {padding-top: 30px;}
    .sub .paging > .num {padding: 0 15px;}
}

@media screen and (max-width: 1024px) {
    .sub .paging a {font-size: 14px;}
    .sub .paging .arr a {width: calc(28/16*1em); height: calc(28/16*1em);}
}

@media screen and (max-width: 820px) {
    .sub .paging {padding-top: 25px;}
    .sub .paging > .num {padding: 0 10px;}
    .sub .paging a {padding: calc(12/16*1em);}
}

@media screen and (max-width: 500px) {
    .sub .paging {padding-top: 20px;}
    .sub .paging a {font-size: 13px;}
    .sub .paging .arr a {width: calc(25/16*1em); height: calc(25/16*1em);}
}

@media screen and (max-width: 360px) {
    .sub .paging > .num {padding: 0 5px;}
    .sub .paging a {padding: calc(10/16*1em);}
    .sub .paging .arr a {width: calc(22/16*1em); height: calc(22/16*1em);}
}



.input {transition: .4s; --placeholderColor: rgba(255, 255, 255, .4);}
.input:has(input:not([readonly]):focus) {border-color: #fff !important;}
.input input::placeholder {color: var(--placeholderColor);}

.hoverCircle { position: relative; overflow: hidden; z-index: 1; transition: .4s;}
.hoverCircle::before {content: ''; position: absolute; left: 50%; top: 50%; width: calc(100% + 10px); transform: translate(-150%, -50%); aspect-ratio: 1/1; background: #f6ad3c; border-radius: 50%; transition: .4s; z-index: -1;}
.hoverCircle:hover::before {transform: translate(-50%, -50%);}
.hoverCircle:hover {color: #000 !important; border-color: transparent !important;}

*:has(.selectBox) {position: relative; z-index: 3 !important;}
*:has(.selectBox) + *:has(.selectBox) {z-index: 2 !important;}




.followUs {padding-top: 150px; padding-bottom: 150px;}
.followUs .flx { display: flex; gap: clamp(10px, 20/1720*100%, 20px);justify-content: center;}
.followUs .follow-item {position: relative; width: 325px;}
.followUs .follow-item .follow-item-thumb {position: relative; width: 100%; overflow: hidden;}
.followUs .follow-item .follow-item-thumb::after {content: ''; display: block; padding-top: calc(420/325*100%);}
.followUs .follow-item .follow-item-thumb img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
.followUs .follow-item .follow-item-thumb img {transition: .6s;}
.followUs .follow-item span {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 28px; letter-spacing: -0.025em; font-family: 'disol_headline'; text-align: center; transition: all 0.3s;}

@media screen and (min-width: 821px) {
    .followUs .follow-item:hover .follow-item-thumb img {transform: translate(-50%, -50%) scale(1.1);}
}

@media screen and (max-width: 1440px) {
    .followUs {padding-top: 130px; padding-bottom: 130px;}
    .followUs .follow-item span {font-size: 26px;}
}

@media screen and (max-width: 1280px) {
    .followUs {padding-top: 120px; padding-bottom: 120px;}
    .followUs .follow-item span {font-size: 24px;}
}

@media screen and (max-width: 1024px) {
    .followUs {padding-top: 100px; padding-bottom: 100px;}
    .followUs .follow-item span {font-size: 22px;}
}

@media screen and (max-width: 820px) {
    .followUs {padding-top: 80px; padding-bottom: 80px;}
    .followUs .flx {flex-wrap: wrap; justify-content: center;}
    .followUs .follow-item {width: calc(100% / 3 - (10px * 2 / 3));}
    .followUs .follow-item span {font-size: 20px;}
}

@media screen and (max-width: 500px) {
    .followUs {padding-top: 60px; padding-bottom: 60px;}
    .followUs .follow-item span {font-size: 18px;}
}

@media screen and (max-width: 360px) {
    .followUs .follow-item {width: calc(100% / 2 - (10px * 1 / 2));}
    .followUs .follow-item span {font-size: 16px;}
}