* {
    box-sizing: border-box;
}
:root {
    --padding: 0 30px;
    --mo-padding: 0 20px;
}
main {
    margin-top: 80px;
}
/* header */
header {
    position: fixed;
    left: 0; top: 0;
    width: 100%; height: 80px;
    background: #fff;
    z-index: 999;
    box-shadow: 0px 4px 5px -2px rgba(0,0,0,0.18);
}
header .header_inner {
    max-width: 1200px;
    padding: var(--padding);
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
}
header .header_inner .left {
    display: block;
    height: 40px;
    margin-bottom: 5px;
}
header .header_inner .left img {
    display: block;
    height: 100%;
}
header .header_inner .right {
    display: flex;
    align-items: center;
    gap: 70px;
    width: 55%; height: 100%;
}
header .header_inner .right li {
    height: 100%;
    display: flex;
    align-items: center;
}
header .header_inner .right a {
    display: flex;
    align-items: center;
    font-size: 19px;
    height: 100%;
    border-bottom: 2px solid transparent;
    margin-top: 2px;
    padding: 0 8px;
}
header .header_inner .right li.on a {
    position: relative;
    color: #4CA82E;
    border-color: #47A628;
}
header .header_inner .right li.on a:after {
    position: absolute;
    content: '';
    top: 6px; left: 50%;
    transform: translateX(-50%);
    width: 30px; height: 30px;
    background: url(../img/sub_icon.png) no-repeat center/contain;
}
.inner {
    max-width: 1200px;
    padding: var(--padding);
    height: 100%;
    width: 100%;
    margin: 0 auto;
}

/* index */
.main_banner {
    position: relative;
    background: url(../img/main_img.png) no-repeat center/cover;
    width: 100%; height: 500px;
}
.main_banner .inner {
    padding-top: 110px;
    padding-left: 29%;
}
.main_banner h1 {
    color: #fff;
    font-size: 22px;
    line-height: 1.4;
    font-family: '400';
}
.main_banner h1 strong {
    font-size: 30px;
    color: #fff;
}
.main_banner a {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #7DD359;
    width: fit-content;
    margin-top: 20px;
    color: #fff;
    padding: 12px 25px;
    font-size: 19px;
    border-radius: 25px;
    font-family: '400';
}
.main_banner a .arrow_ico {
    display: block;
    width: 20px; height: 20px;
    background: url(../img/main_arrow.png) no-repeat center/contain;
}
.index_tit {
    margin: 60px 0 25px;
    font-size: 27px;
    font-family: '700';
}
.index_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.index_top li {
    width: calc(100% / 3 - 20px);
}
.index_top li a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 20px;
    height: 220px;
    border-radius: 10px;
}
.index_top li:nth-child(1) a {
    background: url(../img/img1.png) no-repeat center/cover;
}
.index_top li:nth-child(2) a {
    background: url(../img/img2.png) no-repeat center/cover;
}
.index_top li:nth-child(3) a {
    background: url(../img/img3.png) no-repeat center/cover;
}
.index_btm {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 60px;
}
.index_btm li {
    width: calc(100% / 3 - 20px);
}
.index_btm li:nth-child(4) {
    width: calc(50% - 15px);
}
.index_btm li:nth-child(5) {
    width: calc(50% - 15px);
}
.index_btm li a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 20px;
    height: 220px;
    border-radius: 10px;
}
.index_btm li:nth-child(1) a {
    background: url(../img/img4.png) no-repeat center/cover;
}
.index_btm li:nth-child(2) a {
    background: url(../img/img5.png) no-repeat center/cover;
}
.index_btm li:nth-child(3) a {
    background: url(../img/img6.png) no-repeat center/cover;
}
.index_btm li:nth-child(4) a {
    background: url(../img/img7.png) no-repeat center/cover;
}
.index_btm li:nth-child(5) a {
    background: url(../img/img8.png) no-repeat center/cover;
}
.index_btm_btns {
    background: #FFFCF2;
    padding: 100px 0;
}
.index_btm_btns ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 70px;
    box-shadow: rgba(0,0,0,0.18) 0px -1px 4px 1px;
    background: #fff;
    border-radius: 10px;
}
.index_btm_btns ul li {
    width: calc(100% / 3);
    padding: 40px 0;
}
.index_btm_btns ul li a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 15px;
    border-right: 1px solid #E3E3E3;
    padding: 10px 0;
}
.index_btm_btns ul li:last-child a {
    border-right: none;
} 
.index_btm_btns ul li a img {
    display: block;
    width: 55px; height: 50px;
}
.index_btm_btns ul li:nth-child(2) a img {
    width: 60px; height: 55px;
}
.index_btm_btns ul li:last-child a img {
    width: 50px; height: 50px;
}
.index_btm_btns ul li a p {
    font-size: 18px;
    font-family: '600';
}


/* sub1 */
main.sub {
    margin-bottom: 60px;
}
.sub_main_title {
    background: #FFFCF2;
    padding: 40px 0;
    text-align: center;
    font-size: 30px;
    color: #FBC901;
    font-family: '600';
    margin-bottom: 50px;
}
.sub_cont {
    font-size: 19px;
    color: #5F5F5F;
    line-height: 1.2;
}
.sub_cont .point3 {
    color: #0B8341;
    font-size: 20px;
    font-family: '600';
}
.sub_title_box {
    display: flex;
    justify-content: center;
    align-items: center;
}
.sub_title {
    color: #104942;
    padding: 13px 20px;
    border-radius: 25px;
    background: #E7ECEC;
    font-family: '700';
    width: fit-content;
    margin: 25px 0;
    font-size: 22px;
}
.sub_title_box > .sub_title {
    margin: 0 0 25px;
}
.list li {
    margin-bottom: 25px;
}
.list li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    background-color: #F2FBEE;
    border-radius: 10px;
}
.list li a .left {
    font-size: 21px;
    color: #1C8C4E;
    font-family: '600';
}
.list li a .right {
    display: flex;
    align-items: center;
    gap: 5px;
}
.list li a .right span {
    font-size: 17px;
}
.list li a .right .arrow_ico {
    display: block;
    width: 20px; height: 20px;
    background: url(../img/sub_arrow.png) no-repeat center/contain;
}
.main_banner a.mo {
    display: none;
}
@media screen and (max-width: 1799px) {
    .main_banner .inner {
        padding-left: 44%;
    }
}
@media screen and (max-width: 910px) {
    header {
        height: 12rem;
        padding: 2rem 0;
    }
    header .header_inner {
        flex-direction: column;
        padding: var(--mo-padding);
    }
    header .header_inner .left {
        margin-bottom: 0;
    }
    header .header_inner .right {
        height: auto;
        width: 100%;
        justify-content: space-between;
        gap: 2rem;
    }
    main {
        margin-top: 12rem;
    }
    .inner {
        padding: var(--mo-padding);
    }
    .main_banner {
        background-image: url(../img/main_img_mo.png);
        height: 40rem;
    }
    .main_banner .inner {
        padding-left: 2rem;
    }
    .main_banner .pc {
        display: none;
    }
    .main_banner a.mo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        background: transparent;
        margin-top: 1rem;
    }
    .main_banner a.mo p {
        display: flex;
        align-items: center;
        gap: 10px;
        background: #7DD359;
        width: fit-content;
        color: #fff;
        padding: 12px 25px;
        font-size: 19px;
        border-radius: 25px;
        font-family: '400';
    }
    .index_top {
        flex-direction: column;
    }
    .index_top li {
        width: 100%;
        margin-bottom: 2rem;
    }
    .index_btm li a {
        font-size: 2.2rem;
    }
    .index_top li:nth-child(1) a {
        background: url(../img/img_mo1.png) no-repeat center/cover;
    }
    .index_top li:nth-child(2) a {
        background: url(../img/img_mo2.png) no-repeat center/cover;
    }
    .index_top li:nth-child(3) a {
        background: url(../img/img_mo3.png) no-repeat center/cover;
    }
    .index_btm {
        flex-direction: column;
    }
    .index_btm li {
        width: 100%;
    }
    .index_btm li:nth-child(1) a {
        background: url(../img/img_mo4.png) no-repeat center/cover;
    }
    .index_btm li:nth-child(2) a {
        background: url(../img/img_mo5.png) no-repeat center/cover;
    }
    .index_btm li:nth-child(3) a {
        background: url(../img/img_mo6.png) no-repeat center/cover;
    }
    .index_btm li:nth-child(4) a {
        background: url(../img/img_mo7.png) no-repeat center/cover;
    }
    .index_btm li:nth-child(5) a {
        background: url(../img/img_mo8.png) no-repeat center/cover;
    }
    .index_btm li:nth-child(4) {
        width: 100%;
    }
    .index_btm li:nth-child(5) {
        width: 100%;
    }
    .index_btm_btns {
        padding: 4rem 0;
    }
    .index_btm_btns ul {
        flex-direction: column;
        margin: 0 2rem;
        padding: 0 3rem;
    }
    .index_btm_btns ul li {
        width: 100%;
        border-bottom: .1rem solid #E3E3E3;
        padding: 2rem 0;
    }
    .index_btm_btns ul li a {
        border-right: none;
    }
    header .header_inner .right li.on a:after {
        top: -23px;
    }
}
@media screen and (max-width: 430px) {
    .main_banner .inner {
        padding-top: 7rem;
    }
    .main_banner h1 {
        font-size: 1.8rem;
    }
    .main_banner h1 strong {
        font-size: 2.5rem;
    }
    .main_banner {
        height: 32rem;
    }
    header .header_inner .right {
        gap: 0;
    }
    header .header_inner .right a {
        font-size: 1.8rem;
    }
    header .header_inner {
        padding: 0 1rem;
    }
}