/* common */
#c4_wrap .c_inner {width: 100%; max-width: 1400px; padding: 0 50px; margin: 0 auto; }
#c4_wrap .c_tit h2::before {    content: ''; display: block; width: 50px; height: 5px; background-color: #29a7e1; margin: 0 0 20px;}

/* font size */
#c4_wrap .fs_55 {font-size: 55px; font-weight:700;  line-height: 1.1; }
#c4_wrap .fs_40 {font-size: 40px; font-weight:700; line-height: 1.2; }
#c4_wrap .fs_35 {font-size: 35px; font-weight:700; line-height: 1.2; }
#c4_wrap .fs_20 {font-size: 20px;  }
#c4_wrap .fs_18 {font-size: 18px; font-weight: 400; color: #333; line-height: 1.83; }

/* btn */
#c4_wrap .c_btn {width: 180px; height:45px; display: flex; align-items: center; justify-content: space-between; color: #000; font-size: 14px; padding:0 15px;
font-weight: 400; overflow: hidden; z-index: 1; position: relative; background:transparent; border:1px solid #000; transition: all .3s; pointer-events: auto;  }
#c4_wrap .c_btn::before {content: ""; z-index: -1; position: absolute; background: #29a7e1; transition: all .4s; left: 0; top: 0; width: 0; height: 100%;}
#c4_wrap .c_btn .plus {transition: background-image .3s; display: block; width: 13px ;height: 13px; background:url("../img/c_btn_plus.png") 50%/contain no-repeat;
position: relative; }
#c4_wrap .c_btn:hover {border-color: #29a7e1; color:#fff;  }
#c4_wrap .c_btn:hover .plus {background-image:url("../img/c_btn_plus_w.png");}
#c4_wrap .c_btn:hover::before {width:100%;}
/* wh */
#c4_wrap .c_btn.wh {border-color: #fff; color:#fff; background: transparent; }
#c4_wrap .c_btn.wh:hover {border-color: #29a7e1; }
#c4_wrap .c_btn.wh .plus {background-image:url("../img/c_btn_plus_w.png");}

/*Content CSS*/
#c4_wrap {display: flex; overflow: hidden; }
#c4_wrap > div { padding: 95px 0 110px; }
#c4_wrap .left {width: 50%;  display: flex; justify-content: flex-end;background-color: #f7f7f7;  }
#c4_wrap .right { width: 50%; background:url("../img/c4_r_bg.jpg") 50%/cover no-repeat;}
#c4_wrap .tit_wrap {margin-bottom: 45px; display: flex; align-items: flex-end; justify-content: space-between; }
#c4_wrap .tit_wrap .c_btn {top:-9px;}
#c4_wrap .c_btn.mob {display: none;}

/* left */
#c4_wrap .left > div {width: 100%; max-width:650px; padding-right: 100px; display: flex; flex-direction: column; justify-content: space-between;}
#c4_wrap .bo_box .list {width: 100%;text-align: left; border-top: 2px solid #000; min-height: 305px;  }
#c4_wrap .bo_box .list > li {width: 100%; display: flex; padding:38px 0; border-bottom: 1px solid #ddd; align-items: center; transition: background-color .3s; }
#c4_wrap .bo_box .list a {     text-overflow: ellipsis; overflow: hidden; white-space: nowrap;line-height: 1.2; width: 100%;  display: flex; align-items: center;; }
#c4_wrap .bo_box .list a:hover {color: #29a7e1;  }
#c4_wrap .bo_box .list a p {text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-weight: 700;transition: color .3s;}
#c4_wrap .bo_box .list span { color: #999; flex-shrink: 0; display: block; margin-left: 30px;font-size: 16px; font-weight: 400; }
#c4_wrap .bo_box .list span i {margin-right: 5px; font-size: 120%; position: relative; top:2px;}


/* right */
#c4_wrap .right > div {padding: 0 0 0 100px; max-width: 750px; width: 100%; position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between;}
#c4_wrap .right .c_tit h2 { color:#fff; }
#c4_wrap .right .c_tit h2::before {background-color: #fff; }
#c4_wrap .right .tit_wrap + p {  color: rgba(255, 255, 255, 0.8);}



@media screen and (max-width:1600px) {
    #c4_wrap .right > div {max-width: 650px;}
}

@media screen and (max-width:1400px) {
    /* common */
    /* #c4_wrap br:not(.space) {display: none;} */

    /* content */
    #c4_wrap .left > div {padding:0 50px;}
    #c4_wrap .right > div {padding:0 50px;}



}

@media screen and (max-width: 1024px) {
    /* common */
    /* #c4_wrap {text-align: center;} */
    #c4_wrap .c_inner {padding:0 30px;}
    /* #c4_wrap .c_tit h2::before {margin: 0 auto 15px;} */
    #c4_wrap .c_tit h2::before {margin: 0 0 15px;}
    /* font size */
    #c4_wrap .fs_55 {font-size: 35px;}
    #c4_wrap .fs_40 {font-size: 27px;}
    #c4_wrap .fs_35 {font-size: 25px;}
    #c4_wrap .fs_20 {font-size: 18px;}
    #c4_wrap .fs_18 {font-size: 16px;}


    /* content */
    #c4_wrap {display: block; }
    #c4_wrap > div { padding: 50px 0; }

    #c4_wrap .tit_wrap {margin-bottom: 30px; }
    #c4_wrap .left {width:100%; justify-content: center;}
    #c4_wrap .left > div {padding:0 30px; max-width: 100%; display: block;}
    #c4_wrap .bo_box .list {min-height: 0;}
    #c4_wrap .bo_box .list > li {padding:20px 0;}
    #c4_wrap .bo_box .list span i {top:2px;}

    #c4_wrap .right { width:100%; }
    #c4_wrap .right > div {padding:0 30px; max-width: 100%; display: block;}

}

@media screen and (max-width: 640px) {
    /* common */
    #c4_wrap {text-align: center;}
    #c4_wrap .c_inner {padding:0 20px;}
    #c4_wrap .c_tit h2::before {width: 40px; height: 4px; margin: 0 auto 15px;}
    /* font size */
    #c4_wrap .fs_55 {font-size: 30px;}
    #c4_wrap .fs_35 {font-size: 22px;}
    #c4_wrap .fs_20 {font-size: 16px;}
    #c4_wrap .fs_18 {font-size: 14px;}
    /* c_btn */
    #c4_wrap .c_btn {width: 100%; height: 40px; padding: 0 15px; font-size: 13px; }

    /* content */
    #c4_wrap > div { padding: 40px 0; }
    #c4_wrap .tit_wrap {display: block; margin-bottom: 25px;  }
    #c4_wrap .tit_wrap .c_btn {top:0; margin-top: 20px; }

    #c4_wrap .bo_box .list > li {padding: 15px 0;}
    #c4_wrap .bo_box .list span {margin-left: 20px; font-size: 13px;}
    #c4_wrap .bo_box .list span i {top:2px; margin:0 3px 0 0;}

    #c4_wrap .c_btn {display: none; }
    #c4_wrap .c_btn.mob {display: flex; margin-top:25px; }


}