/*Content CSS*/
#info2 {width: 100%; overflow: hidden; position: relative;}
#info2 > article{padding: 100px 0;}
#info2 > article:last-of-type{padding-bottom: 125px;}

#info2  .sub_inner{width: 100%; max-width: 1500px; padding: 0 50px; margin: 0 auto;}

/* font-style */
#info2 .fs_60{font-size: 60px; font-weight: 800; line-height: 1.4;}
#info2 .fs_40{font-size: 40px; font-weight: 700; line-height: 1.4; color: #000;}
#info2 .fs_20{font-size: 20px; line-height: 1.7;}
#info2 .fs_18{font-size: 18px; line-height: 2;}
#info2 .fs_16{font-size: 16px; line-height: 2; color: #222; }

/* bar_tit */
#info2 .bar_tit{position: relative; padding-left: 17px; }
#info2 .bar_tit::before{content: ''; display: block; width: 5px; height: 70%; max-height: 34px; position: absolute; top: 11px; left: 0; background-color: #472f1c; }

/* cont */
#info2 .cont{position: relative; padding: 49px 0; z-index: 2; display: flex; justify-content: space-between;}
#info2 .cont::before{content: ''; display: block; width: calc(100% + 100px); height: 100%; border-radius: 10px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: -1;}
#info2 .cont .left{flex-shrink: 0;}
#info2 .cont .left h3{position: relative; min-width: 73px; padding-right: 60px;}
#info2 .cont .left h3::after{content: ''; display: block; width: 19px; height: 19px; border-radius: 50%; position: absolute; z-index: 2; right: -10px; top: 50%; transform: translateY(-50%);}
#info2 .cont .right{display: flex; flex-wrap: wrap; align-items: stretch; column-gap: 29px; row-gap: 25px; padding-left: 75px; flex-grow: 1; position: relative;}
#info2 .cont .right > li{padding: 10px; width: calc((100% - (29px * 4)) / 5);  min-height: 80px; background-color: #fff; border-radius: 5px; border: solid 2px transparent; display: flex; align-items: center; justify-content: center; transition: .3s;}
#info2 .cont .right::before{content: ''; display: block; width: 1px; height: calc(100% + 14px); position: absolute; left: 0; bottom: 0;}


#info2 .tit + .cont{margin-top: 45px;}
#info2 .cont + .cont{margin-top: 23px;}

#info2 .cont.brown::before{background-color: #472f1c; opacity: .09;}
#info2 .cont.brown .left h3{color: #472f1c;}
#info2 .cont.brown .left h3::after{background: url('../img/brown_arrow.png') calc(50% + 1px) 50% no-repeat #c6bbb3;}
#info2 .cont.brown .right::before{background-color: #c6bbb3; }
#info2 .cont.blue::before{background-color: #f7f7f7;}
#info2 .cont.blue .left h3::after{background: url('../img/blue_arrow.png') calc(50% + 1px) 50% no-repeat #9cbfd9;}
#info2 .cont.blue .right::before{background-color: #9cbfd9; }

@media screen and (min-width: 1900px) {
    #info2 .cont::before{width: calc(100% + 240px);}
}

@media screen and (min-width: 1025px) {
    #info2 .cont.brown .right li:hover{border-color: #472f1c; color: #472f1c;}
    #info2 .cont.blue .right li:hover{border-color: #03508a; color: #03508a;}
}
@media screen and (max-width: 1600px) {
    #info2 .cont::before{border-radius: 0; width: 100vw;}

}

@media screen and (max-width: 1400px) {
    #info2 > article{padding: 80px 0;}
    #info2 > article:last-of-type{padding-bottom: 80px;}

    /* font-style */
    #info2 .fs_60{font-size: 55px;}
    #info2 .fs_40{font-size: 38px;}
    #info2 .fs_20{font-size: 19px;}
    #info2 .fs_18{font-size: 17px; line-height: 1.7;}
    #info2 .fs_16{font-size: 15px; line-height: 1.7;}

    /* bar_tit */
    #info2 .bar_tit{padding-left: 15px;}
    #info2 .bar_tit::before{max-height: 31px; top: 10px;}

    /* cont */
    #info2 .cont .right{column-gap: 20px; row-gap: 20px; padding-left: 60px; }
    #info2 .cont .right > li{width: calc((100% - (20px * 4)) / 5);  min-height: 70px;}
    #info2 .cont .right::before{height: 100%;}


}
@media screen and (max-width: 1280px) {
    /* font-style */
    #info2 .fs_60{font-size: 50px;}
    #info2 .fs_40{font-size: 36px;}
    #info2 .fs_20{font-size: 18px;}
    #info2 .fs_18{font-size: 16px;}
    #info2 .fs_16{font-size: 14px;}

    /* cont */
    #info2 .cont .left h3{min-width: 61px; padding-right: 50px;}
    #info2 .cont .right{padding-left: 50px; }
    #info2 .cont .right > li{min-height: 60px;}

}
@media screen and (max-width: 1024px) {
    #info2 > article{padding: 50px 0;}
    #info2 > article:last-of-type{padding-bottom: 50px;}
    #info2  .sub_inner{padding: 0 30px;}

    /* font-style */
    #info2 .fs_60{font-size: 45px;}
    #info2 .fs_40{font-size: 34px;}
    #info2 .fs_20{font-size: 17px;}

    /* bar_tit */
    #info2 .bar_tit::before{max-height: 30px; top: 8px;}

    #info2 .cont{padding: 30px 0; }

    #info2 .cont .right{column-gap: 15px; row-gap: 15px;}
    #info2 .cont .right > li{width: calc((100% - (15px * 3)) / 4);  min-height: 50px;}

    #info2 .tit + .cont{margin-top: 30px;}
    #info2 .cont + .cont{margin-top: 20px;}

}
@media screen and (max-width: 786px) {
    /* cont */
    #info2 .cont{display: block;}

    #info2 .cont .left{margin-bottom: 15px;}
    #info2 .cont .left h3{display: flex; align-items: center; flex-direction: row-reverse; justify-content: space-between; padding-right: 0;}
    #info2 .cont .left h3::after{transform: rotate(90deg); right: 0; top: 22px;}
    #info2 .cont .left h3::before{content: ''; display: block; flex-grow: 1; height: 1px; margin-left: 20px;}

    #info2 .cont .right{padding-left: 0;}
    #info2 .cont .right::before{display: none;}

    #info2 .cont.brown .left h3::before{background-color: #c6bbb3;}
    #info2 .cont.blue .left h3::before{background-color: #9cbfd9;}

}
@media screen and (max-width: 640px) {
    #info2  .sub_inner{padding: 0 20px;}
    /* cont */
    #info2 .cont .right{column-gap: 10px; row-gap: 10px;}
    #info2 .cont .right > li{width: calc((100% - 10px) / 2);}
}

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

}