@charset "utf-8";
html, body, * {font-family: "Pretendard";}

.main-visual {
    overflow: hidden;
    position: relative;
    height: 100vh;
    background-image: linear-gradient(-206deg, #1136f3  0%, #0d889a 100%);
    font-family: "Pretendard";
}

.main-visual canvas {
    width: 100%;
    height: 100%;
}

.main-visual .caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.main-visual .imgbox img {
    max-width: 56rem;
    width: 100%;
}

.main-visual .desc {
    margin-top: 3.7rem;
    font-size: 3.8rem;
    color: #fff;
}

.text-eng {
    padding-top: 26rem;
    color: #222;
    text-align: center;
    font-size: 6.8rem;
    line-height: 11rem;
    font-weight: 300;
}

.main-works-area {
    margin-top: 17.7rem;
}

.main-works-area .title {
    font-size: 8rem;
    color: #222;
    font-weight: 700;
    text-align: center;
}

.main-works-area .btn-area {
    text-align: center;
    margin-top: 2.5rem;
}

.main-works-area .btn-area .btn-arr {
    display: inline-block;
    font-size: 3.2rem;
    color: #f3d311;
    font-weight: 900;
    text-align: center;
}

.works-slider {
    margin-top: 20.2rem;
}

.works-slider .swiper-slide {
    max-width: 39rem;
}

.works-slider .swiper-slide img {
    width: 100%;
}

.main-works-area+.main-mask-txt {
    margin-top: 30rem;
}

.main-mask-txt .stit {
    margin-bottom: 4.0rem;
    font-size: 4.2rem;
    color: #222;
    font-weight: 700;
}

.main-mask-txt+.main-mask-txt {
    margin-top: 20rem;
}

.main-mask-txt .txt-line {
    line-height: 3.6rem;
}

.main-mask-txt .txt-line .txt {
    font-size: 3.6rem;
}

.main-mask-txt .txtpoint {
    font-size: 5.0rem;
}

.main-mask-txt .txt-line {
    color: #000;
}

.main-mask-txt .txt-line .txt-mask {
    background-color: #f3d311;
}

.main-mask-txt .txt-line .txt-mask .txt-maskpoint {
    background-color: #f3d311;
}

.contact-form {display: flex; flex-direction: column; gap: 1.8rem; padding: 0 0.8rem;}
.contact-form .form-group {display: flex; align-items: flex-start;}
.contact-form .form-group > label {flex-shrink: 0; width: 14rem; font-size: 1.8rem; line-height: 4.5rem;}
.contact-form .form-group > input[type="text"],
.contact-form .form-group > input[type="email"] {width: 100%; max-width: 50rem; height: 4.5rem; padding: 0 2rem; font-size: 1.8rem;}
.contact-form .form-group > textarea {width: 100%; min-height: 20rem; padding: 1.2rem 2rem; font-size: 1.8rem; resize: none; line-height: 1.4;}
.contact-form .form-group.privacy-agreement {display: flex; align-items: center; gap: 0.8rem; width: 100%;}
.contact-form .form-group.privacy-agreement > input[type="checkbox"] {}
.contact-form .form-group.privacy-agreement > label {white-space: nowrap; color: #333; text-decoration: unset; cursor: pointer;}
.contact-form .form-group.privacy-agreement > label > a {color: inherit; font-weight: 600;}
.contact-form .btn-submit {width: 100%; max-width: 28rem; height: 4.5rem; margin-inline: auto; background-color: #0d889a; font-size: 1.8rem; font-weight: 500; color: #fff;}