@font-face {
    font-family: 'ClimateCrisisKorean';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/ClimateCrisisKR-1979.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

body {
    font-family: 'NanumSquareNeoHeavy', sans-serif;
    word-break: keep-all;
    color: #00502b;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    width: 100%;
}

main {
    background: url(../img/bg.png) no-repeat 0 0 / cover;
    text-align: center;
    overflow-x: hidden;
}

section {
    width: 100%;
    padding: 15em 0;
}

@media(max-width:1024px) {
    section {
        padding: 0 0 13em;
    }
}

section .sec-inner {
    width: 90%;
    max-width: 1536px;
    margin: 0 auto;
}

h2 {
    font-size: clamp(36px, 6vw, 80px);
    color: #146d37;
    letter-spacing: -0.02em;
    font-family: 'ClimateCrisisKorean';
    margin-bottom: 1em;
}

p {
    font-size: clamp(16px, 2vw, 32px);
    letter-spacing: 0.03em;
}

header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 999;
}

header .h-inner {
    width: 94%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.3vw;
}

header .logo__pc {
    width: 40vw;
    max-width: 700px;
    min-width: 500px;
}

header .logo__mo {
    display: none;
}

header .sec-btn>a {
    background: #146d37;
    color: #fff;
    font-size: clamp(22px, 2.5vw, 28px);
    border-radius: 3em;
    padding: 0.4em 0.8em;
}

@media(max-width:1080px) {
    header .h-inner {
        padding-top: 15px;
    }


    header .logo__pc {
        display: none;
    }

    header .logo__mo {
        width: 45vw;
        max-width: 250px;
        min-width: 180px;
        display: block;
    }
}

/* sec01 */

.sec01 {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
}

.sec01 .soil-deco {
    position: absolute;
    width: 45vw;
    right: -10vw;
    bottom: -3vw;
    min-width: 300px;
}

.sec01 .sec-tit {
    width: 90%;
    max-width: 1536px;
    margin: 0 auto;
}

.sec01 .sec-tit>div {
    width: 100%;
}

.sec01 .main__mo {
    display: none;
}

@media(max-width: 1024px) {
    .sec01 {
        height: auto;
        padding: 15em 0;
    }

    .sec01 .soil-deco {
        bottom: 5em;
    }

}

@media(max-width: 768px) {
    .sec01 {
        padding: 10em 0 13em;
    }

    .sec01 .main__pc {
        display: none;
    }

    .sec01 .main__mo {
        display: block;
    }
}

/* sec02 */

.sec02 {
    position: relative;
}

.sec02 p:nth-child(2) {
    margin-bottom: 1em;
}

@media(max-width: 768px) {
    .sec02 p>br {
        display: none;
    }
}

/* sec03 */

.sec03 {
    position: relative;
}

.sec03 .soil-deco-l {
    position: absolute;
    width: 30vw;
    left: -10vw;
    top: -15vw;
    min-width: 170px;
}

.sec03 .soil-deco-r {
    position: absolute;
    width: 50vw;
    right: -15vw;
    bottom: -10vw;
    min-width: 350px;
}

.sec03 .sec-cont {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
}

.sec03 .sec-cont .y__box {
    position: relative;
    z-index: 1;
}

.sec03 .sec-cont .y__box::after {
    content: "";
    width: 100%;
    height: 100%;
    background: url(../img/y_bg.jpg) no-repeat center center / cover;
    position: absolute;
    left: 0.9vw;
    top: 0.8vw;
    z-index: -1;
}

.sec03 .sec-cont .youtube {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.sec03 .sec-cont .y__deco>div {
    position: absolute;
    z-index: -2;
}

.sec03 .sec-cont .y__deco .l-deco {
    left: -19%;
    top: 9%;
    transform: rotate(-35deg);
}

.sec03 .sec-cont .y__deco .r-deco {
    right: -22%;
    top: -25%;
    transform: rotate(30deg);
}

@media(max-width:1024px) {
    .sec03 .sec-cont .y__deco {
        display: none;
    }

    .sec03 .soil-deco-l {
        top: -12em;
    }

    .sec03 .soil-deco-r {
        bottom: 8em;
    }
}

/* sec04 */

.sec04 .sec-inner {
    max-width: 1320px;
}

.sec04 h2 {
    margin-bottom: 0.5em;
}

.sec04 .img__box {
    margin: 5vw 0;
}

.sec04 .hint__box ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sec04 .hint__box ul li {
    width: 30%;
}

.sec04 .hint__box ul li>h3 {
    font-size: clamp(18px, 3vw, 40px);
    margin-bottom: 0.7em;
}

.sec04 .hint__box ul li>h3>span {
    background: #00502b;
    color: #fff;
    border-radius: 50%;
    aspect-ratio: 5 / 5;
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
}

.sec04 .hint__box ul li>div {
    background: #fff;
    aspect-ratio: 5 / 3;
    position: relative;
    z-index: 10;
}

.sec04 .hint__box ul li>div>p {
    width: 100%;
    height: 100%;
    background: #fff;
    place-content: center;
}

.sec04 .hint__box ul li>div::after {
    content: "";
    position: absolute;
    left: 0.9vw;
    top: 0.8vw;
    width: 100%;
    height: 100%;
    background: #146d37;
    z-index: -3;
}

@media(max-width: 768px) {
    .sec04 .img__box {
        padding: 10vw 0;
    }

    .sec04 .hint__box ul {
        flex-direction: column;
    }

    .sec04 .hint__box ul li {
        width: 100%;
        margin-bottom: 2em;
    }

    .sec04 .hint__box ul li>h3>span {
        width: 30px;
        height: 30px;
        line-height: 30px;
    }


    .sec04 .hint__box ul li>div {
        aspect-ratio: 5 / 2;
    }
}

/* sec05 */

.sec05 {
    position: relative;
}

.sec05 .soil-deco-l {
    position: absolute;
    width: 45vw;
    left: -15vw;
    top: -11vw;
    min-width: 350px;
}

.sec05 .soil-deco-r {
    position: absolute;
    width: 30vw;
    right: -3vw;
    bottom: -5vw;
    min-width: 170px;
}

.sec05 .t__img {
    width: 55%;
    max-width: 600px;
    min-width: 300px;
    margin: 0 auto;
}

.sec05 .img__box {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}

@media(max-width: 1024px) {
    .sec05 .soil-deco-l {
        top: -17em;
    }

    .sec05 .soil-deco-r {
        bottom: 7em;
    }
}

/* sec06 */

.sec06 h2 {
    margin-bottom: 0.5em;
}

.sec06 .t__box p:last-child {
    margin: 0.5em 0 1.5em;
}

.sec06 .t__box p:last-child>span {
    background: #00502b;
    color: #fff;
    border-radius: 2em;
    padding: 6px 8px;
    font-size: clamp(14px, 2vw, 26px);
    display: inline-block;
    margin-right: 5px;
}

.sec06 .map__box {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    height: 400px;
    position: relative;
}

.sec06 .map__box {
    width: 100%;
    max-width: 1320px;
    height: 400px;
    margin: 0 auto;
    position: relative;
    z-index: 0;
}

.sec06 .map__box::after {
    content: "";
    position: absolute;
    left: 0.9vw;
    top: 0.8vw;
    width: 100%;
    height: 100%;
    background: url(../img/m_bg.jpg) no-repeat center center / cover;
    z-index: -1;
}

@media(max-width: 768px) {
    .sec06 .map__box {
        height: 200px;
    }
}

/* footer */

footer {
    padding: 5em 0;
}

footer .f-inner>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

footer .f-inner {
    width: 94%;
    margin: 0 auto;
}

footer h2 {
    font-size: clamp(28px, 3vw, 40px);
    margin-bottom: 0;
}

footer .f-top {
    margin-bottom: 5em;
}

footer .f-top .f-pc {
    width: 40vw;
    max-width: 700px;
    min-width: 330px;
}

footer .f-top .f-mo {
    display: none;
}

footer .f-bot .f-left ul {
    display: flex;
    align-items: center;
}

footer .f-bot p {
    font-size: clamp(14px, 2vw, 20px);
}

footer .f-bot .f-left p {
    padding-right: 2em;
}

@media(max-width:1536px) {
    footer .f-inner>.f-bot {
        flex-direction: column;
        align-items: flex-start;
    }

    footer .f-inner>.f-bot>.f-left {
        margin-bottom: 1em;
    }
}

@media(max-width:1024px) {
    footer .f-inner>.f-top {
        flex-direction: column;
        align-items: flex-start;
    }

    footer .f-left {
        margin-bottom: 1em;
    }
}

@media(max-width:768px) {
    footer {
        padding: 3em 0;
    }

    footer .f-top {
        margin-bottom: 3em;
    }

    footer .f-bot .f-left ul {
        align-items: flex-start;
        flex-direction: column;
    }

    footer .f-bot .f-left ul>li {
        margin-bottom: 10px;
    }
}