@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
    --fontPoppins: 'Poppins', sans-serif;
}

html{
    font-size: 85.5%;
}

body {
    font-family: var(--fontPoppins);
    line-height: 1.3;
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.c-container {
    max-width: 45.0rem;
    margin: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-weight: 100%;
}
.home_area{
    text-align: center;
}
.home_area .bg{
    width: 100%;
    max-width: 52rem;
}
.green-logo {
    text-align: center;
    padding-top: 5.0rem;
    padding-bottom: 3.0rem;
}

.top-text {
    text-align: center;
    margin-top: 2rem;
}

.top-text h2 {
    font-size: 3rem;
    font-weight: 400;
    color: #2A8225;
    line-height: 1;
}
.top-text h3 {
    font-size: 3.6rem;
    color: #58C029;
    line-height: 1.1;
    font-weight: 400;
}

.button {
    display: inline-block;
    padding: 0.9rem 3.7rem 0.8rem;
    background: -webkit-gradient(linear, left top, right top, from(rgba(248,197,61,1)), to(rgba(248,128,35,1)));
    background: -o-linear-gradient(left, rgba(248,197,61,1) 0%, rgba(248,128,35,1) 100%);
    background: linear-gradient(90deg, rgba(248,197,61,1) 0%, rgba(248,128,35,1) 100%);
    border-radius: 1.0rem;
    line-height: 1.1;
    font-size: 1.3rem;
    font-weight: 600;
    color: #1C1C1C;
    position: relative;
    z-index: 1;
    text-decoration: none;
}
.button::before{
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: -webkit-gradient(linear, right top, left top, from(rgba(248,197,61,1)), to(rgba(248,128,35,1)));
    background: -o-linear-gradient(right, rgba(248,197,61,1) 0%, rgba(248,128,35,1) 100%);
    background: linear-gradient(-90deg, rgba(248,197,61,1) 0%, rgba(248,128,35,1) 100%);
    border-radius: 1.0rem;
    -webkit-filter: blur(0.5rem);
            filter: blur(0.5rem);
}


.top-text p {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    max-width: 30.0rem;
    margin-inline: auto;
    font-weight: 600;
    color: #333333;
}

.avater-img {
    margin-top: 7.3rem;
}
.avater-img img{
    width: 100%;
    max-width: 35.9rem;
}
.news {
    margin-top: -9.4rem;
    text-align: center;
    background-color: #58C029;
    color: #21420D;
    border-radius: 50%;
    width: 31.2rem;
    aspect-ratio: 1/1;
    margin-left: auto;
    margin-right: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 1rem 2rem 0;
}

.news h2 {
    font-size: 2.5rem;
    color: #fff;
    font-weight: 400;
}
.news p {
    font-size: 1.3rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    max-width: 24.2rem;
    margin-left: auto;
    margin-right: auto;
}
.news p strong{
    font-weight: 600;
    display: block;
}
.news p:nth-last-child(2){
    font-size: 1rem;
    margin-top: 1rem;
}
.news div {
    margin-top: 1.8rem;
    margin-bottom: -1rem;
}

.news-btn {
    display: inline-block;
    padding: 0.75rem .7rem;
    background-color: #43CC7E;
    -webkit-box-shadow: .0rem .0rem 2.0rem .0rem #43CC7E;
            box-shadow: .0rem .0rem 2.0rem .0rem #43CC7E;
    border-radius: 1.0rem;
}


.result {
    text-align: center;
    padding-top: 8.0rem;
}
.result h2 {
    font-size: 2.7rem;
    font-weight: 400;
    color: #2A8225;
    line-height: 1;
}
.result h3 {
    font-size: 3.9rem;
    color: #58C029;
    line-height: 1.1;
    font-weight: 400;
}
.result-card-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1.5rem;
    max-width: 44.0rem;
    margin: auto;
    margin-top: 2rem;
}
.result-card-wrap>*{
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}
.result-card-img img{
    max-width: 100%;
}
.result-card {
    overflow: auto;
    text-align: left;
    height: 28rem;
    scrollbar-color: #58C029 #C9C9C9;
    padding-right: 1rem;
    max-width: 50%;
}
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #C9C9C9;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #58C029; /* Thumb color */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4CAF20;
}
* {
    scrollbar-width: thin;
    scrollbar-color: #58C029 #C9C9C9;
}
.result-card p {
    font-size: .8rem;
}
.result-card h4 {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #052E2A;
    line-height: 1.1;
    margin-top: 0.3rem;
}
.team_item:not(:last-child){
    border-bottom: 0.1rem solid #C9C9C9;
    padding-bottom: 0.4rem;
    margin-bottom: 0.4rem;
}
.circle{
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(42,93,37,1)), to(rgba(88,192,41,1)));
    background: -o-linear-gradient(top, rgba(42,93,37,1) 0%, rgba(88,192,41,1) 100%);
    background: linear-gradient(180deg, rgba(42,93,37,1) 0%, rgba(88,192,41,1) 100%);
    width: 31.2rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    color: #fff;
    margin-left: auto;
    margin-right: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.circle img{
    width: 20rem;
    margin-top: 1.5rem;
    margin-bottom: -1.5rem;
}
.bonus {
    margin-top: 4.0rem;
    text-align: center;
}
.bonus h2 {
    font-size: 3.5rem;
    font-weight: 400;
    line-height: 1;
}
.bonus h3 {
    font-size: 3.5rem;
    line-height: 1;
    font-weight: 600;
}
.bonus-card-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 2.0rem;
    margin: auto;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-top: 2rem;
}
.bonus-card {
    background: -o-linear-gradient(314deg, rgba(42, 93, 37, 1) 0%, rgba(88, 192, 41, 1) 100%);
    background: linear-gradient(136deg, rgba(42, 93, 37, 1) 0%, rgba(88, 192, 41, 1) 100%);
    border-radius: 1.2rem;
    text-align: center;
    padding: 1.8rem 2.2rem 1.0rem 2.2rem;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}
.bonus-card:nth-child(even){
    background: -o-linear-gradient(226deg, rgba(42, 93, 37, 1) 0%, rgba(88, 192, 41, 1) 100%);
    background: linear-gradient(-136deg, rgba(42, 93, 37, 1) 0%, rgba(88, 192, 41, 1) 100%);
}

.bonus-card h4 {
    font-size: 1.8rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
}
.bonus-card h5 {
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    margin-top: 0.8rem;
}
.coupon-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    max-width: 10.5rem;
    margin: auto;
    margin-bottom: 1.3rem;
}

.coupon-box span:first-child {
    background: -webkit-gradient(linear, right top, left top, from(rgba(248,197,61,1)), to(rgba(248,128,35,1)));
    background: -o-linear-gradient(right, rgba(248,197,61,1) 0%, rgba(248,128,35,1) 100%);
    background: linear-gradient(-90deg, rgba(248,197,61,1) 0%, rgba(248,128,35,1) 100%);
    padding: .2rem .8rem;
    font-size: 1.2rem;
    font-weight: 600;
    width: 40%;
    border-radius: 0.35rem 0 0 0.35rem;
    line-height: 1.3;
}

.coupon-box span:last-child {
    padding: .2rem .6rem;
    font-weight: 500;
    font-size: 1.05rem;
    color: white;
    width: 60%;
    border: 0.1rem solid #707070;
    border-left: none;
    border-radius: 0 0.35rem 0.35rem 0;
}
.bonus-card .button{
    padding: 0.4rem 2rem;
    border-radius: 4rem;
}
.bonus-card .button::before{
    border-radius: 4rem;
}

.perform-box-wrap {
    padding-top: 4.5rem;
}

.perform {
    text-align: center;
    padding-top: 8.0rem;
}

.perform h2 {
    font-size: 2.6rem;
    font-weight: 400;
    color: #2A8225;
    line-height: 1;
}
.perform h3 {
    font-size: 3.1rem;
    color: #58C029;
    line-height: 1.1;
    font-weight: 400;
}

.perform>p {
    max-width: 35rem;
    margin-inline: auto;
    font-size: 1.4rem;
    margin-top: 1.0rem;
    font-weight: 600;
    color: #333333;
}

.perform-box-wrap{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 2.5rem;
}
.perform-box {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(42,93,37,1)), to(rgba(88,192,41,1)));
    background: -o-linear-gradient(top, rgba(42,93,37,1) 0%, rgba(88,192,41,1) 100%);
    background: linear-gradient(180deg, rgba(42,93,37,1) 0%, rgba(88,192,41,1) 100%);
    border-radius: 1.2rem;
    position: relative;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.perform_header{
    background: -webkit-gradient(linear, left top, right top, from(rgba(248,197,61,1)), to(rgba(248,128,35,1)));
    background: -o-linear-gradient(left, rgba(248,197,61,1) 0%, rgba(248,128,35,1) 100%);
    background: linear-gradient(90deg, rgba(248,197,61,1) 0%, rgba(248,128,35,1) 100%);
    height: 7rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;
    padding: 1rem;
    border-radius: 1.2rem 1.2rem 0 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}
.perform-box h4 {
    font-size: 1.85rem;
    font-weight: 700;
    color: #1C1C1C;
}
.perform-box ul{
    list-style: none;
    font-size: 1.1rem;
    font-weight: 500;
}
.perform-box ul li{
    margin-top: 2rem;
}
.perform_content{
    padding: 1rem 2rem 0;
    height: 100%;
}
.perform-box img{
    width: 100%;
}
.perform-box:first-child img {
    margin-bottom: -8.5rem;
    margin-top: -6rem;
}
.perform-box:last-child img {
    margin-bottom: -4.6rem;
    margin-top: 2rem;
}
.footer {
    text-align: center;
    margin-top: 11rem;
    margin-bottom: 4.0rem;
}
.footer img{
    width: 11.6rem;
}
.footer p {
    font-size: 1.1rem;
    margin-top: 1.5rem;
    color: #8C8C8C;
}

@media (max-width: 575.98px){
    html{
        font-size: 2.9vw;
    }
    .result h3,
    .bonus h3,
    .perform h3{
        font-size: 3.8rem;
    }
    .result-card-wrap{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .bonus-card-wrap{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .perform-box-wrap{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .result-card{
        max-width: 100%;
    }
}