:root{

}

html{
    scroll-behavior: smooth;
}

body{
    background-color: #FEF4F2;
    margin: 0;
}

.inner{
    max-width: 1240px;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
}

.header-logo{
    max-width: 880px;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

.header-logo__img{
    display: block;
    width: 100%;
}

.header-city{
    margin-top: 2vw;
}

.header-city__img{
    display: block;
    width: 100%;
}

nav{
    background-color: #FFAB40;
    position: sticky;
    top: 0;
    z-index: 9;
}

nav .inner{
    display: flow-root;
    overflow: hidden;
    padding-top: 16px;
    padding-bottom: 16px;
}

.nav-group{
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    margin: -12px 0 0 -12px;
    justify-content: space-between;
    width: 100%;
}

.nav-group__item{
    margin-left: 12px;
    margin-top: 12px;
}

.nav-group__link{
    display: block;
    text-align: center;
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
    font-size: 18px;
    transition: all 0.3s ease;
}

.nav-group__link:hover{
    color: royalblue;
}

.about{
    padding-top: 30px;
}

.about-main{

}

.about-main__img{
    display: block;
    width: 100%;
}

.about-purpose{
    margin-top: 5vw;
}

.about-slogan{
    margin-top: 3vw;
}

.about-slogan__img{
    display: block;
    width: 100%;
}

.about-core{
    margin-top: 5vw;
}

.about-core__img{
    display: block;
    width: 100%;
}

.about-content{
    margin-top: 5vw;
}

.about-content__img{
    display: block;
    width: 100%;
}

.struct{
    padding-bottom: 6vw;
}

.struct-item{
    padding-top: 30px;
}

.struct-item__img{
    display: block;
    width: 100%;
}

.rights{
    padding-top: 30px;
    padding-bottom: 4vw;
}

.rights-image__img{
    display: block;
    width: 100%;
}

.member{
    padding-top: 2vw;
    padding-bottom: 3vw;
    background-color: #F3F4B1;
}

.member-image__img{
    display: block;
    width: 100%;
}

.join{
    padding-top: 2vw;
    padding-bottom: 4vw;
    background-color: #F3F4B1;
}

.join .inner{
    max-width: 1440px;
}

.join-image{
    display: block;
}

.join-image__img{
    display: block;
    width: 100%;
}

.contact{
    background: url("../images/footer.png") no-repeat bottom center / cover;

}

.quotation-content{
    background: url("../images/footer.png") no-repeat bottom center / cover;
    color: #8F1300;
    padding-top: 2vw;
    padding-bottom: 13vw;
}

.quotation-content .inner{
    max-width: 790px;
}

.quotation-image__img{
    display: block;
    width: 100%;
}

.quotation-content__logo{
    width: 60%;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}

.quotation-content__img{
    display: block;
    width: 100%;
}

.quotation-content__title{
    text-align: center;
    text-decoration: underline;
    margin-bottom: 0;
    margin-top: 32px;
    font-size: 40px;
    font-weight: bold;
}

.quotation-content__text{
    font-size: 28px;
}

.quotation-content__text p{
    margin-bottom: 0;
}

.quotation-bottom{
    text-align: center;
    font-size: 28px;
    color: #00489F;
    font-weight: bold;
    line-height: 1;
    padding-top: 12px;
    padding-bottom: 12px;
}

.contact-content{
    background: url("../images/footer.png") no-repeat bottom center / cover;
    color: #8F1300;
    padding-top: 2vw;
    padding-bottom: 8vw;
    text-align: center;
}

.contact-image__img{
    display: block;
    width: 100%;
}

.contact-content__logo{
    width: 60%;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}

.contact-content__img{
    display: block;
    width: 100%;
}

.contact-content__title{
    text-align: center;
    margin-bottom: 0;
    margin-top: 32px;
    font-size: 40px;
    font-weight: bold;
}

.contact-content__sub{
    margin-top: 34px;
    font-size: 24px;
}

.contact-content__sub p{
    margin: 0;
    line-height: 1.6;
}

.contact-content__slogan{
    color: purple;
    margin-top: 40px;
    font-size: 32px;
}

.contact-content__slogan p{
    line-height: 1.6;
    margin: 0;
}

.contact-content__action{
    margin-top: 32px;
    display: flex;
    justify-content: center;
}

.contact-content__btn{
    padding: 8px 24px;
    display: block;
    border-radius: 999px;
    background-color: #FFAB40;
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    min-width: 160px;
    text-align: center;
    transition: all 0.3s ease;
}

.contact-content__btn:hover{
    background-color: #e5a14b;
}



@media (max-width: 768px) {
    .inner{
        padding-left: 8px;
        padding-right: 8px;
    }

    nav .inner{
        display: flex;
        justify-content: center;
        padding: 8px 0;
    }

    .nav-group{
        justify-content: center;
        margin: -8px 0 0 -8px;
    }

    .nav-group__item{
        margin-left: 8px;
        margin-top: 8px;
    }

    .nav-group__link{
        font-size: 14px;
    }

    .member{
        padding-top: 30px;
    }

    .join{
        padding-top: 4vw;
        padding-bottom: 8vw;
    }

    .quotation-content .inner{
        max-width: 90%;
    }

    .quotation-content__title{
        margin-top: 16px;
        font-size: 24px;
    }

    .quotation-content__text{
        font-size: 14px;
    }

    .quotation-bottom{
        font-size: 13px;
    }

    .contact-content__title{
        margin-top: 16px;
        font-size: 18px;
    }

    .contact-content__sub{
        margin-top: 16px;
        font-size: 14px;
    }

    .contact-content__slogan{
        margin-top: 16px;
        font-size: 16px;
    }

    .contact-content__action{
        margin-top: 24px;
    }

    .contact-content__btn{
        font-size: 14px;
        min-width: 96px;
    }
}