/* common */
#c3_wrap .c_inner {width: 100%; max-width: 1400px; padding: 0 50px; margin: 0 auto; }
#c3_wrap .c_tit h2 {display: inline; position: relative;}
#c3_wrap .c_tit h2::after {content: ''; display: block; width: 15px; height: 15px; background-color: #014099; border-radius: 50%; right: -19px; top: -9px; position: absolute;}

/* font size */
#c3_wrap .fs_60 {font-size: 60px; font-weight: 800; color:#000; line-height: 1.3;  }
#c3_wrap .fs_24 {font-size: 24px; font-weight: 400; color:#000; line-height: 1.58;  }
#c3_wrap .fs_18 {font-size: 18px; font-weight: 400; color:#333; line-height: 1.83; }
#c3_wrap .fs_16 {font-size: 16px; font-weight: 400; color:#333; line-height: 1.5; }

/*Content CSS*/
#c3_wrap {width:100%;  margin: 0; text-align: center;  position: relative; z-index: 3;}
#c3_wrap .c_tit {width: 100%; position: absolute; top: 70px; z-index: 3; left: 0; pointer-events: none;}

#c3_wrap .list {display: flex; text-align: center; overflow: hidden; background-color: #fff; position: relative;z-index: 2; margin-top: -100px;}
#c3_wrap .list > li { flex:1; }
#c3_wrap .list .box {border-right: 1px solid #ddd; padding: 195px 10px 75px;  display: block; height: 100%;  position: relative; z-index: 1; }
#c3_wrap .list > li:first-child .box {border-left: 1px solid #ddd;}
#c3_wrap .list .icon {display: flex; align-items: center; justify-content: center; position: relative; margin: 0 auto; height: 120px; width: 120px; background-color: #f7f7f7;
border-radius: 50%; transition: background-color .3s;}
#c3_wrap .list .icon img {transition-property: all, transform; transition-duration: .3s, .5s; }
#c3_wrap .list .icon img + img {opacity: 0; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); z-index: 2;}
#c3_wrap .list h4 {margin:15px 0 5px; font-weight: 700; font-family: 'Montserrat'; }

#c3_wrap .list > li:hover .icon {background-color: #014099; }
#c3_wrap .list > li:hover .icon img {opacity: 0; transform: rotateY(180deg);}
#c3_wrap .list > li:hover .icon img + img {opacity: 1; transform: rotateY(180deg) translate(50%, -50%); }



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


    /*Content CSS*/

}

@media screen and (max-width: 1024px) {
    /* common */
    #c3_wrap {padding: 0 0 0; text-align: center; }
    #c3_wrap .c_inner {padding: 0 30px;}

    /* font */
    #c3_wrap .fs_60 {font-size: 40px;  }
    #c3_wrap .fs_24 {font-size: 20px; }
    #c3_wrap .fs_18 {font-size: 15px; line-height: 1.65;}
    #c3_wrap .fs_16 {font-size: 14px; }

    /*Content CSS*/
    #c3_wrap .c_tit {top:50px;}

    #c3_wrap .list {flex-wrap: wrap; margin: -30px 0 0;}
    #c3_wrap .list .box {padding: 120px 10px 30px;}
    #c3_wrap .list > li {width: 50%; flex:inherit; }
    @media screen and (min-width: 641px) {
        #c3_wrap .list > li:nth-child(odd) .box {border-left:1px solid #ddd; }
        #c3_wrap .list > li:nth-child(n+3) .box {border-top:1px solid #ddd; padding: 30px 10px 30px; }
    }

}

@media screen and (max-width: 640px) {
    /* common */
    #c3_wrap {padding:50px 0; }
    #c3_wrap .c_inner {padding: 0 20px;}
    #c3_wrap .c_tit h2::after { width: 10px; height: 10px; right: -15px; top: -5px;}

    /* font */
    #c3_wrap .fs_60 {font-size: 32px;  }
    #c3_wrap .fs_24 {font-size: 17px; }
    #c3_wrap .fs_18 {font-size: 13px;}
    #c3_wrap .fs_16 {font-size: 13px;}

    /*Content CSS*/
    #c3_wrap .c_tit {position: static;}

    #c3_wrap .list { margin:30px auto 0;}
    #c3_wrap .list > li {width: 100%;}
    #c3_wrap .list .box {padding: 15px 20px; display: flex; align-items: center; text-align: left; border-left:1px solid #ddd;  justify-content: flex-start; border-top:1px solid #ddd;}
    #c3_wrap .list > li:last-child .box {border-bottom:1px solid #ddd;}
    #c3_wrap .list .box .txt {display: flex; align-items: center;}
    #c3_wrap .list .icon {flex-shrink: 0; margin: 0 25px 0 0; width: 70px; height: 70px;}
    #c3_wrap .list .icon img {height:30px;}
    #c3_wrap .list h4 {  margin: 0 20px 0 0; min-width: 121px; flex-shrink: 0; font-size: 15px;}

}

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

    #c3_wrap .list .box {padding: 15px 20px;}
    #c3_wrap .list .box .txt {display: block;}
    #c3_wrap .list h4 {  margin: 0 0 5px 0; min-width: 0;}

}