@charset "UTF-8";

.sec._1,
.sec._2 {
    padding-bottom: 141px;
}
.sec._4 {
    padding: 75px 10% 85px;
    background: url(../img/p-top/bg_about.png) center / cover no-repeat;
}
.sec._4 .c_btn3 {
    margin-top: 50px;
}
.topics_box {
    margin-bottom: 80px;
}
.link_box {
    display: flex;
    flex-wrap: wrap;
    gap: 1px 0;
    background-color: #c3c3c3;
}
.link_box .card {
    display: flex;
    gap: 42px;
    position: relative;
    width: 50%;
    padding: 64px 70px 67px 54px;
    background-color: #f7f7f7;
    transition: background-color .3s;
}
.link_box .card .img_wrap {
    color: #666666;
    font-size: 101px;
}
.link_box .card .arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 46px;
    height: 100%;
    top: 0;
    right: 0;
    background-color: #415a9a;
    color: #fff;
    transition: background-color .3s;
}
@media (min-width: 769px) {
    .link_box .card:hover {
        background-color: #eceff8;
    }
    .link_box .card:hover .arrow {
        background-color: #364d81;
    }
}
.bnr_area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 43px;
    max-width: 1285px;
    margin: 0 auto;
    padding: 107px 0 117px;
}

@media (max-width: 1529px) {
    .link_box .card {
        gap: 25px;
    }
    .link_box .card .img_wrap {
        font-size: 70px;
    }
}
@media (max-width: 1350px) {
    .bnr_area {
        gap: 25px;
    }
}
@media (max-width: 768px) {
    .sec._1,
    .sec._2 {
        padding-bottom: 60px;
    }
    .sec._4 {
        padding: 40px 20px 60px;
    }
    .sec._4 .c_btn3 {
        margin-top: 30px;
    }
    .topics_box {
        margin-bottom: 40px;
    }
    .link_box .card {
        width: 100%;
        padding: 20px 60px 22px 20px;
    }
    .link_box .card .img_wrap {
        font-size: 45px;
    }
    .link_box .card .txt_wrap {
        width: calc(100% - 51px);
    }
    .link_box .card .arrow {
        width: 35px;
    }
    .bnr_area {
        flex-direction: column;
        gap: 10px;
        padding: 60px 0;
    }
}
@media (max-width: 525px) {
    .link_box .card {
        flex-direction: column;
        gap: 15px;
        padding: 20px 55px 22px 20px;
    }
    .link_box .card .img_wrap {
        width: 100%;
        text-align: center;
    }
    .link_box .card .txt_wrap {
        width: 100%;
    }
}