@charset "utf-8";

/* tablet */
.inner {
    max-width: 100%;
    padding: 24px 32px;
}

.gnb {
    gap: 28px;
    padding: 32px 0;
    font-size: 16px;
}

#main-visual {
    height: 72vh;
    min-height: 560px;
}

#main-visual .main-title {
    top: 43%;
    left: 12%;
    max-width: 480px;
    font-size: 16px;
    line-height: 1.8;
}

#main-visual .main-bg img {
    height: 100%;
}

/* section1 */
.section1 {
    padding: 110px 40px;
}

.section1-inner {
    width: 100%;
    gap: 70px;
}

.section1-inner img {
    width: 360px;
}

/* section2 */
.section2 {
    padding: 120px 40px 130px;
}

.section2 h2 {
    margin-bottom: 80px;
}

.section2-inner {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 100px 70px;
    align-items: end;
}

.section2-inner img {
    margin: 0 auto 34px;
}

.section2-inner .new1 img,
.section2-inner .new2 img,
.section2-inner .new3 img,
.section2-inner .new4 img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.section2 .section2-inner .new-text {
    min-height: auto;
}

/* section3 */
.section3 {
    padding: 120px 40px;
}

.section3-inner {
    width: 100%;
    max-width: 100%;
    gap: 70px;
}

.section3 .call-text {
    width: 42%;
}

.section3 .call-img {
    width: 58%;
}

.section3 .call-img img {
    max-width: 100%;
    width: 100%;
}

/* section4 */
.section4 {
    padding: 90px 40px 120px;
}

.section4-inner {
    width: 100%;
    max-width: 100%;
}

.section4-inner .story {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px 70px;
}

.section4-inner .story a {
    width: 100%;
}

.section4-inner .story strong {
    padding-right: 60px;
}

/* footer */
.footer-inner {
    width: 100%;
    max-width: 100%;
    padding: 0 40px;
}

footer .sns {
    right: 40px;
}