@charset "UTF-8";

.inner {
    max-width: 1240px;
}

main {
    position: relative;
    overflow: hidden;
}

main::before {
    content: '';
    width: 100%;
    height: 764px;
    background-color: #F5FBFF;
    position: absolute;
    top: 27%;
    left: 0;
    z-index: -10;
}

main::after {
    content: '';
    width: 100%;
    height: 764px;
    background-image: url(/img/partner/bg-main.png);
    background-position: center top;
    background-repeat: no-repeat;
    position: absolute;
    top: 36%;
    transform: translateX(50%);
    right: 50%;
    z-index: -5;
}

.hero {
    padding-top: 120px;
}

.hero .inner {
    max-width: 1420px;
}

.hero_body {
    background-color: #F5FBFF;
    border-radius: 23px;
    padding: 69px 0 82px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 170px;
}

.hero_cnt_ttl {
    font-size: 40px;
    font-weight: bold;
    color: #007EDF;
    margin-bottom: 15px;
}

.btn_more {
    width: 100%;
    max-width: 380px;
}


.partner .line {
    justify-content: left;
}

.partner .section_ttl {
    color: #007EDF;
    margin-bottom: 40px;
}


/* partner_cnt */

.partner_cnt {
    padding: 64px 85px;
    margin-bottom: 100px;
    background-color: #fff;
    border-radius: 38px;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
}

.partner_cnt_img {
    text-align: center;
    margin-bottom: 53px;
}

.bnr_partner {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    padding: 52px 44px;
    border-radius: 15px;
    background: linear-gradient(to right bottom, #007EDF, #3DC0FF);
    overflow: hidden;
}

.bnr_partner::before {
    content: '';
    width: 599px;
    height: 599px;
    background-image: url(/img/partner/bg-bnr_partner.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 0;
    transform: translateY(50%);
    bottom: 50%;
    right: -10%;
}

.bnr_partner_row {
    max-width: 427px;
    position: relative;
    z-index: 1;

}

.bnr_partner_txt {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 30px;
}

.bnr_partner_ttl {
    font-size: 25px;
    font-weight: bold;
    color: #fff;
    padding: 5px 10px;
    margin-bottom: 10px;
    background-color: #000;
    width: fit-content;
}

.bnr_partner_ttl .yellow {
    color: #FFF258;
}


/* recommend */

.recommend_ttl {
    text-align: center;
    margin-bottom: 20px;
}

.recommend_list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 52px;
}

.recommend_list li {
    background-color: #fff;
    border: solid 1px #AEDFFF;
    border-radius: 17px;
    width: 100%;
    max-width: 352px;
    text-align: center;
    padding: 31px 36px;
}

.recommend_list li img {
    margin-bottom: 15px;
}

.recommend_list_txt {
    text-align: left;
    font-size: 16px;
}



/* lineup */

.lineup {
    padding: 97px 0;
}

.lineup_cnt {
    padding: 62px 69px;
    border-radius: 19px;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background-image: url(/img/partner/bg-lineup.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center;
}

.lineup_cnt_row {
    text-align: center;
}

.lineup_cnt ul li {
    background-color: #E4F2FB;
    border-radius: 8px;
    color: #3DC0FF;
    font-size: 16px;
    font-weight: bold;
    padding: 15px 28px;
    width: 340px;
    margin-bottom: 6px;
}

.lineup_cnt_row_ttl {
    font-size: 25px;
    font-weight: bold;
    color: #007EDF;
    margin-bottom: 20px;
}

.lineup_cnt_row_txt {
    font-size: 16px;
    font-weight: 500;
    margin: 20px 0;
}

.lineup_cnt_row .lineup_cnt_row_comment {
    color: #FA529D;
    font-weight: bold;
    position: relative;
    text-align: center;
    margin: 0 auto;
    width: fit-content;
    margin-bottom: 10px;
}

.lineup_cnt_row .lineup_cnt_row_comment::before {
    content: '';
    width: 14px;
    height: 2px;
    background-color: #FA529D;
    position: absolute;
    left: -12%;
    bottom: 50%;
    transform: rotate(65deg);
}

.lineup_cnt_row .lineup_cnt_row_comment::after {
    content: '';
    width: 14px;
    height: 2px;
    background-color: #FA529D;
    position: absolute;
    right: -12%;
    bottom: 50%;
    transform: rotate(115deg);
}

.lineup_cnt_row .btn_download {
    background-color: #FA529D;
    margin: 0 auto;
}


/* service_partner */

.service_partner {
    padding-bottom: 111px;
}

.service_partner_img {
    text-align: -webkit-center;
}

.service_partner_cnt img {
    margin-bottom: 63px;
}

.service_partner_txt {
    max-width: 555px;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
}


/* merit */

.merit {
    margin-bottom: 57px;
}

.merit_cnt {
    background-color: #E4F2FB;
    border-radius: 20px;
    padding: 100px;
}

.merit_cnt_ttl {
    font-size: 40px;
    font-weight: bold;
    color: #007EDF;
    margin-bottom: 50px;
    text-align: center;
}

.merit_list ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.merit_list ul li {
    width: 275px;
    height: 415px;
    padding: 23px 20px;
    background-color: #fff;
    text-align: center;
    border-radius: 15px;
}

.merit_list_ttl {
    color: #3DC0FF;
    font-size: 17px;
    font-weight: bold;
    line-height: 20px;
    font-family: 'Montserrat', sans-serif;
}

.merit_list_num {
    color: #3DC0FF;
    font-size: 35px;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 25px;
    line-height: 40px;
}

.merit_list li img {
    margin-bottom: 28px;
}

.merit_list_txt {
    font-size: 16px;
    font-weight: bold;
    line-height: 27px;
}


/* partner_ship */

.partner_ship {
    margin-bottom: 120px;
}

.partner_ship_cnt {
    text-align: center;
    padding: 121px 0;
    background-color: #F5FBFF;
    border-radius: 20px;
}

.merit_cnt_ttl {
    font-size: 40px;
    font-weight: bold;
    color: #007EDF;
    margin-bottom: 50px;
    text-align: center;
}


/* contact */

.contact {
    padding-bottom: 150px;
}

.contact_cnt {
    display: flex;
    justify-items: center;
    gap: 46px;
    align-items: center;
}

.contact_cnt_row {
    max-width: 600px;
}

.contact_cnt_ttl {
    font-size: 40px;
    font-weight: bold;
    color: #007EDF;
    margin-bottom: 25px;
}

.contact_cnt_txt {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 40px;
    max-width: 555px;
}


@media screen and (max-width:767px) {

    .hero {
        padding-top: 100px;
    }
    
    .hero_body {
        flex-flow: column-reverse;
        gap: 30px;
        padding: 30px;
        margin-bottom: 60px;
    }

    .hero_ttl h2 {
        font-size: 25px;
    }

    .hero_cnt_ttl {
        font-size: 25px;
    }


    /* partner */

    .partner_cnt {
        padding: 45px 24px;
    }

    .bnr_partner {
        padding: 38px 24px;
        flex-flow: column;
    }

    .bnr_partner_ttl {
        font-size: 16px;
    }

    .bnr_partner::before {
        width: 427px;
        height: 427px;
        transform: translateX(50%);
        right: 50%;
        bottom: -28%;
    }


    /* recommend */

    .recommend_list {
        flex-flow: column;
        gap: 30px;
    }

    /* lineup */

    .lineup_cnt {
        flex-flow: column-reverse;
        gap: 20px;
        padding: 43px 21px;
        background-position: right top;
    }

    .lineup_cnt_row_ttl {
        font-size: 21px;
    }

    .lineup_cnt ul li {
        width: 100%;
    }


    /* merit */

    .merit_cnt {
        padding: 60px 26px;
    }

    .merit_list {
        overflow: scroll;
    }

    .merit_list ul {
        width: 770px;
    }

    .merit_cnt_ttl {
        font-size: 30px;
    }
    
    .partner_ship_cnt {
        padding: 60px 26px;
    }


    /* contact */

    .contact_cnt_ttl {
        font-size: 30px;
        text-align: center;
    }
}