/* common */
#c4_wrap .c_inner { width: 100%; max-width: 1400px; margin:0 auto; position: relative; padding:0 50px; border:0px solid #ddd; border-width: 0 1px;}


/*Content CSS*/
#c4_wrap {overflow: hidden; display: flex; }
#c4_wrap .left {width: calc(50% - 135px); background:url("../img/c4_left.jpg") 50%/cover no-repeat; height: 620px;}
#c4_wrap .right {width: calc(50% + 135px); background:url("../img/c4_right.jpg") 100% 50%/cover no-repeat; display: flex; align-items: center; padding-left: 135px;}
#c4_wrap .right article {max-width: 650px; width: 100%;}
#c4_wrap .right .list {display: flex; flex-wrap: wrap; width: 100%;}
#c4_wrap .right .list > li {width: 50%; text-align: center; padding: 35px 10px;}
#c4_wrap .right .list > li:nth-child(odd) {border-right: 1px solid rgba(255,255,255,.25); }
#c4_wrap .right .list > li:nth-child(n+3) {border-top: 1px solid rgba(255,255,255,.25); }
#c4_wrap .right .list i {color:#fff; font-size: 35px; }
#c4_wrap .right .list h3 {font-size: 20px; font-weight: 700; color:#fff; font-family: 'Montserrat', sans-serif; margin: 20px 0 15px;}
#c4_wrap .right .list p {font-size: 15px; font-weight: 400; color:rgba(255, 255, 255, 0.8); line-height: 1.6; }

#c4_wrap .right .list i {transition: transform .5s; }
#c4_wrap .right .list li:hover i {transform: rotateY(180deg);}





@media screen and (max-width: 1400px) {
    /* common */
    #c4_wrap .left {width: calc(50% - 60px);}
    #c4_wrap .right {width: calc(50% + 60px); padding:0 50px 0 50px; justify-content: flex-end;}

}

@media screen and (max-width: 1024px) {
    /* common */

    /*Content CSS*/
    #c4_wrap {display: block; }
    #c4_wrap .left {height: 300px; width: 100%;}
    #c4_wrap .right {width: 100%; padding: 40px 30px; justify-content: center; }
    #c4_wrap .right article {max-width: 100%;}
    #c4_wrap .right .list > li {padding: 25px 10px;}
    #c4_wrap .right .list h3 {font-size: 18px; margin: 15px 0 10px;}
    #c4_wrap .right .list p {font-size: 14px;}



}

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

    /*Content CSS*/
    #c4_wrap .left {height: 200px; }
    #c4_wrap .right {padding: 30px 20px; }
    #c4_wrap .right br:not(.space) {display: none;}
    #c4_wrap .right .list > li {padding: 20px 5px;}
    #c4_wrap .right .list i {font-size: 30px;}
    #c4_wrap .right .list h3 {font-size: 16px; }
    #c4_wrap .right .list p {font-size: 13px;}
}

@media screen and (max-width:380px) {
    #c4_wrap .right .list h3 {font-size: 15px; }
    #c4_wrap .right .list p {font-size: 12px;}
}