/*Content CSS*/
#c2_wrap {overflow: hidden;}
#c2_wrap br.mob{display: none;}

#c2_wrap > article:nth-child(1){padding: 60px 0; position: relative;}
#c2_wrap .c_inner{width: 100%; max-width: 1500px; padding: 0 50px; margin: 0 auto; position: relative; z-index: 3;}
/* font-size */
#c2_wrap .fs_40{font-size: 40px; font-weight: 800; line-height: 1.13; color: #fff;}
#c2_wrap .fs_35{font-size: 35px; line-height: 1;}
#c2_wrap .fs_27{font-size: 27px; font-weight: 500; color: #fff;}
#c2_wrap .fs_20{font-size: 20px;}
#c2_wrap .fs_19{font-size: 19px; line-height: 1.5;}

/* c_plus */
#c2_wrap .c_plus{flex-shrink: 0; margin-left: 50px;}
#c2_wrap .c_plus a{display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 5px; background-color: #555; transition: .3s;}
#c2_wrap .c_plus a img{transition: .5s;}

/* sec1 */
#c2_wrap .sec1{ width: calc(100% - 58px); margin: 0 auto; background-color: #333; border-radius: 10px; }
#c2_wrap .sec1::before{content: ''; display: block; width: 1030px; height: 100%; background: url('../img/c2_bg.png') left bottom / contain no-repeat; position: absolute; bottom: 0; left: 0;}
#c2_wrap .sec1 .flex_wrap{display: flex; justify-content: space-between; align-items: flex-end;}
#c2_wrap .sec1 .flex_wrap .left{display: flex; align-items: center; justify-content: flex-start; position: relative; padding: 13px 15px; min-width: 600px; background-color: rgba(0,0,0,.7); border-radius: 55.5px;}
#c2_wrap .sec1 .flex_wrap .left i{display: flex; align-items: center; justify-content: center; width: 83px; height: 83px; border-radius: 50%; background-color: #03508a; flex-shrink: 0;}
#c2_wrap .sec1 .flex_wrap .left i img{transition: .5s;}
#c2_wrap .sec1 .flex_wrap .left p{margin-left: 67px;}

#c2_wrap .sec1 .flex_wrap .right .top{display: flex; align-items: center; justify-content: flex-end;}
#c2_wrap .sec1 .flex_wrap .right .bot{margin-top: 50px;}
#c2_wrap .sec1 .flex_wrap .right .dir_list{display: flex; justify-content: flex-end;}
#c2_wrap .sec1 .flex_wrap .right .dir_list li{min-width: 250px;}
#c2_wrap .sec1 .flex_wrap .right .dir_list li + li{margin-left: 23px;}
#c2_wrap .sec1 .flex_wrap .right .dir_list li a{width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 20px 30px; border-radius: 10px; transition: .3s;}
#c2_wrap .sec1 .flex_wrap .right .dir_list li a > i{display: inline-block; flex-shrink: 0; margin-right: 15px;}
#c2_wrap .sec1 .flex_wrap .right .dir_list li a .txt span{font-weight: 700;}
#c2_wrap .sec1 .flex_wrap .right .dir_list li a .txt i{font-size: 19px; margin-left: 5px; position: relative; top: 1px;}
#c2_wrap .sec1 .flex_wrap .right .dir_list li:nth-child(1) a{background-color: #fff;}
#c2_wrap .sec1 .flex_wrap .right .dir_list li:nth-child(2) a{background-color: #f3d60a; }
#c2_wrap .sec1 .flex_wrap .right .dir_list li:nth-child(2) a .txt span{color: #381e1e;}

/* sec2 */
#c2_wrap .sec2 .c_inner{padding: 42px 50px;}
#c2_wrap .sec2 .c_inner:last-child{padding-bottom: 100px;}

#c2_wrap .sec2 .flex_wrap{display: flex; justify-content: space-between; align-items: center;}
#c2_wrap .sec2 .flex_wrap::before{content: ''; display: none; width: calc(100% + 240px); height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); background-color: #f1f1f1; border-radius: 10px; z-index: -1;}
#c2_wrap .sec2 > .flex_wrap:nth-child(even)::before{display: block;}

#c2_wrap .sec2 .flex_wrap .left{display: flex; align-items: center; flex-shrink: 0; margin-right: 50px; }
#c2_wrap .sec2 .flex_wrap .left i{min-width: 60px; margin-right: 27px;}
#c2_wrap .sec2 .flex_wrap .left h4{font-weight: 700;}
#c2_wrap .sec2 > .flex_wrap:nth-child(1) .left h4{color: #03508a;}
#c2_wrap .sec2 > .flex_wrap:nth-child(2) .left h4{color: #472f1c;}
#c2_wrap .sec2 > .flex_wrap:nth-child(3) .left h4{color: #333;}

#c2_wrap .sec2 .loca_list{width: 76%;}
#c2_wrap .sec2 .loca_list li{padding: 32px 65px; border-radius: 5px; border: solid 2px transparent; transition: .5s;}
#c2_wrap .sec2 > .flex_wrap:nth-child(1) .loca_list li{padding: 34px 65px 26px; }
#c2_wrap .sec2 .loca_list li + li{margin-top: 15px;}
#c2_wrap .sec2 .loca_list li .top{display: flex; align-items: center;}
#c2_wrap .sec2 .loca_list li .top .line{display: flex; align-items: center; justify-content: center; width: 55px; height: 23px; border-radius: 11.5px; font-size: 13px; font-weight: 600; margin-right: 9px; background-color: #0253a5; color: #fff;}
#c2_wrap .sec2 .loca_list li .top + p{margin-top: 10px;}
#c2_wrap .sec2 .loca_list li p{line-height: 1.7;}
#c2_wrap .sec2 > .flex_wrap:nth-child(odd) .loca_list li{background-color: #f7f7f7;}
#c2_wrap .sec2 > .flex_wrap:nth-child(even) .loca_list li{background-color: #fff;}

@media screen and (min-width: 1901px) {
    #c2_wrap .sec1 .flex_wrap .left{left: -46px;}

}

@media screen and (min-width: 1025px) {
    #c2_wrap .c_plus a:hover{background-color: #03508a;}
    #c2_wrap .c_plus a:hover img{transform: rotate(180deg);}
    #c2_wrap .sec1 .flex_wrap .left:hover i img{transform: rotateY(180deg);}
    #c2_wrap .sec1 .flex_wrap .right .dir_list li:nth-child(1):hover a{background-color: #cdcdcd;}
    #c2_wrap .sec1 .flex_wrap .right .dir_list li:nth-child(2):hover a{background-color: #D4BC17; }
    #c2_wrap .sec2 > .flex_wrap:nth-child(1) .loca_list li:hover{background-color: #edf4fb; border-color: #0253a5;}
    #c2_wrap .sec2 > .flex_wrap:nth-child(2) .loca_list li:hover{background-color: #F6F4F2; border-color: #472F1C;}

}


@media screen and (max-width: 1600px) {
    #c2_wrap br:not(.space){display: none;}

    /* font-size */
    #c2_wrap .fs_40{font-size: 38px;}

    /* sec1 */
    #c2_wrap .sec1::before{width: 60%;}
    #c2_wrap .sec1 .flex_wrap .left{min-width: 0; padding-right: 30px;}
    #c2_wrap .sec1 .flex_wrap .left p{margin-left: 20px;}

    /* sec2 */
    #c2_wrap .sec2 .loca_list li{padding: 30px 50px;}
    #c2_wrap .sec2 > .flex_wrap:nth-child(1) .loca_list li{padding: 30px 50px 25px;}

}

@media screen and (max-width: 1400px) {
    #c2_wrap > article:nth-child(1){padding: 50px 0;}
    /* font-size */
    #c2_wrap .fs_40{font-size: 36px;}
    #c2_wrap .fs_35{font-size: 32px;}
    #c2_wrap .fs_27{font-size: 23px;}
    #c2_wrap .fs_20{font-size: 19px;}
    #c2_wrap .fs_19{font-size: 18px;}
    /* c_plus */
    #c2_wrap .c_plus{margin-left: 30px;}
    #c2_wrap .c_plus a{width: 60px; height: 60px;}
    #c2_wrap .c_plus a img{width: 24px;}
    /* sec1 */
    #c2_wrap .sec1 .flex_wrap .left i{width: 60px; height: 60px;}
    #c2_wrap .sec1 .flex_wrap .left i img{width: 24px;}
    #c2_wrap .sec1 .flex_wrap .left{padding: 10px; padding-right: 25px;}
    #c2_wrap .sec1 .flex_wrap .left p{margin-left: 15px;}

    #c2_wrap .sec1 .flex_wrap .right .dir_list li{min-width: 215px;}
    #c2_wrap .sec1 .flex_wrap .right .dir_list li + li{margin-left: 15px;}
    #c2_wrap .sec1 .flex_wrap .right .dir_list li a{padding: 15px 20px;}

    /* sec2 */
    #c2_wrap .sec2 .flex_wrap .left i{width: 45px; min-width: 45px; margin-right: 20px;}
    #c2_wrap .sec2 .loca_list li{padding: 25px 30px;}
    #c2_wrap .sec2 > .flex_wrap:nth-child(1) .loca_list li{padding: 25px 30px 20px;}


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

    /* font-size */
    #c2_wrap .fs_40{font-size: 34px;}
    #c2_wrap .fs_35{font-size: 30px;}
    #c2_wrap .fs_27{font-size: 20px; line-height: 1.5;}
    #c2_wrap .fs_20{font-size: 18px;}
    #c2_wrap .fs_19{font-size: 17px;}

    #c2_wrap .sec1 .flex_wrap .left{margin-right: 50px;}


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

    #c2_wrap .c_inner{padding: 0 30px;}
    /* font-size */
    #c2_wrap .fs_40{font-size: 32px;}
    #c2_wrap .fs_35{font-size: 26px;}
    #c2_wrap .fs_27{font-size: 19px;}
    #c2_wrap .fs_20{font-size: 17px;}
    #c2_wrap .fs_19{font-size: 16px;}


    /* c_plus */
    #c2_wrap .c_plus a{width: 50px; height: 50px;}
    #c2_wrap .c_plus a img{width: 20px;}


    /* sec1 */
    #c2_wrap .sec1{width: calc(100% - 60px);}
    #c2_wrap .sec1 .flex_wrap{flex-direction: column-reverse;}
    #c2_wrap .sec1 .flex_wrap .left{width: 100%; margin: 20px auto 0;}
    #c2_wrap .sec1 .flex_wrap .left i{width: 50px; height: 50px;}
    #c2_wrap .sec1 .flex_wrap .left i img{width: 20px;}
    #c2_wrap .sec1 .flex_wrap .right{width: 100%;}
    #c2_wrap .sec1 .flex_wrap .right .top{justify-content: space-between;}
    #c2_wrap .sec1 .flex_wrap .right .bot{margin-top: 30px;}
    #c2_wrap .sec1 .flex_wrap .right .dir_list{width: 100%;}
    #c2_wrap .sec1 .flex_wrap .right .dir_list li{flex: 1; min-width: 0;}
    #c2_wrap .sec1 .flex_wrap .right .dir_list li a{justify-content: flex-start; padding: 10px 15px;}
    #c2_wrap .sec1 .flex_wrap .right .dir_list li a > i{margin-right: 5px;}
    #c2_wrap .sec1 .flex_wrap .right .dir_list li a > i img{transform: scale(.8);}
    #c2_wrap .sec1 .flex_wrap .right .dir_list li a .txt{flex-grow: 1; display: flex; justify-content: space-between;}

    /* sec2 */
    #c2_wrap .sec2 .c_inner{padding: 30px;}
    #c2_wrap .sec2 .c_inner:last-child{padding-bottom: 50px;}
    #c2_wrap .sec2 .flex_wrap{display: block;}
    #c2_wrap .sec2 .flex_wrap .left{justify-content: center; margin-right: 0; margin-bottom: 20px;}
    #c2_wrap .sec2 .flex_wrap .loca_list{width: 100%;}
    #c2_wrap .sec2 .loca_list li p i{width: 28px; display: inline-block;}



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

}

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

    #c2_wrap .c_inner{padding: 0 20px;}

    /* sec1 */
    #c2_wrap .sec1{width: calc(100% - 40px);}

    /* sec2 */
    #c2_wrap .sec2 .c_inner{padding: 30px 20px;}

    #c2_wrap .sec2 .loca_list li{padding: 20px;}
    #c2_wrap .sec2 > .flex_wrap:nth-child(1) .loca_list li{padding: 20px 20px 15px;}
    #c2_wrap .sec2 .loca_list li p i{width: 25px;}

}

@media screen and (max-width: 480px) {
    #c2_wrap br.mob{display: block;}
    #c2_wrap .sec1 .flex_wrap .right .dir_list{display: block;}
    #c2_wrap .sec1 .flex_wrap .right .dir_list li + li{margin: 15px 0 0;}


}