/* common */
#c3_wrap .c_inner { width: 100%; max-width: 1400px; margin:0 auto; position: relative; padding:0 50px;}
#c3_wrap .c_tit h3 {font-size: 24px; font-weight: 600; color:#13227e; margin-bottom: 5px; }
#c3_wrap .c_tit p {margin-top: 30px; }
/* font size */
#c3_wrap .fs_90 {font-size: 90px; font-weight: 700; color:#000; line-height: 1.1;  }
#c3_wrap .fs_38 {font-size: 38px; font-weight: 700; color:#000; line-height: 1.1; }
#c3_wrap .fs_20 {font-size: 20px; font-weight: 300; color:#313131; line-height: 1.8; }
#c3_wrap .fs_18 {font-size: 18px; font-weight: 300; color:#000; line-height: 1.56; }

/* c_btn */
#c3_wrap .c_btn a {display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background-color: #bcbcbc; transition: all .3s;}
#c3_wrap .c_btn a .arrow {display: block; width: 20px; height: 20px; background:url("../img/c_btn_arrow.png") 50%/contain no-repeat;}
#c3_wrap .c_btn a:hover {background-color: #13227e; }


/*Content CSS*/
#c3_wrap {position: relative; padding: 150px 0 155px; z-index: 1;}
#c3_wrap article {display: flex; justify-content: space-between; align-items: center; z-index: 1;}
#c3_wrap .line {width:100%; position: absolute; z-index: -1; height: 100%;  bottom:-0; display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; max-width: 1700px;  left: 50%;  transform: translateX(-50%);}
#c3_wrap .line > span {width: 1px;  height: 100%; display: block; background:#ccc; }

#c3_wrap .left_txt {padding-bottom: 130px; width: 100%;}

#c3_wrap .list {position: relative; flex-shrink: 0; text-align: left; }
#c3_wrap .list > li {width: 400px; margin-bottom: 40px; }
@media screen and (min-width: 1200px) {
    #c3_wrap .list > li:first-child {position: absolute; right:440px; top:200px; }
}
#c3_wrap .list > li:last-child {margin: 0;}
#c3_wrap .list a {position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; overflow: hidden; width: 100%; height: 360px;
 padding: 55px 50px 40px; border:1px solid #ccc; transition: border-color .3s; background-color: #fff; z-index: 1;}
#c3_wrap .list a::before {content: ''; display: block; width: 100%; height: 100%; position: absolute; z-index: -1; left: 0; top:0; transition: opacity .3s; opacity: 0;
border:2px solid #13227e; }
#c3_wrap .list .arrow {position: absolute; transition: all .3s; top:45px; right: 50px; width: 55px; height: 55px; border-radius: 50%; border:1px solid #ccc;
background:url("../img/c_btn_arrow_black.png") 50% no-repeat;}
#c3_wrap .list .icon  { margin-top: 35px; height: 105px; display: flex; justify-content: flex-start; align-items: flex-end; }
#c3_wrap .list .icon img {transition: transform .5s; }
#c3_wrap .list .txt {width: 100%;}
#c3_wrap .list h4 { margin-bottom: 20px; }


/* hover */
#c3_wrap .list a:hover {border-color: #13227e;}
#c3_wrap .list a:hover::before {opacity: 1; }
#c3_wrap .list a:hover .arrow {border-color: #13227e; background-color: #13227e; background-image:url("../img/c_btn_arrow.png"); }
#c3_wrap .list a:hover .icon img {transform: rotateY(180deg);}


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

    /* content */
    #c3_wrap .fs_90 {font-size: 70px;}
    #c3_wrap .fs_38 {font-size: 30px;}
    #c3_wrap .line {display: none;}

    #c3_wrap .left_txt {padding-right: 400px; }

    #c3_wrap .list > li {width:320px;}
    #c3_wrap .list > li:first-child {right:360px;}
    #c3_wrap .list a {height: 310px; padding: 45px 30px 40px;}
    #c3_wrap .list .arrow { top:35px; right: 30px;}
    #c3_wrap .list h4 { margin-bottom:15px; }
    #c3_wrap .list .icon {margin-top: 25px;}

}

@media screen and (max-width: 1199px) {
    #c3_wrap {padding:100px 0 300px;}
    #c3_wrap .c_inner {display: block;}
    #c3_wrap .left_txt {padding: 0; margin-bottom: 50px;}

    #c3_wrap .list {display: flex; justify-content: center;  }
    #c3_wrap .list > li {margin: 0 30px 0 0; width: calc(33.3% - 20px); }
    #c3_wrap .list a {height: 100%;  padding:50px 30px 40px;}
}

@media screen and (max-width: 1024px) {
    /* common */
    #c3_wrap {padding: 70px 0; text-align: center;}
    #c3_wrap .c_inner {padding: 0 30px;}
    #c3_wrap .c_tit h3 {font-size: 16px;}
    #c3_wrap .c_tit p { margin-top: 15px;}
    /* font size */
    #c3_wrap .fs_90 {font-size: 40px;}
    #c3_wrap .fs_38 {font-size: 25px;}
    #c3_wrap .fs_20 {font-size: 17px;line-height: 1.65; }
    #c3_wrap .fs_18 {font-size: 16px;line-height: 1.65; }


    /* btn */
    #c3_wrap .c_btn a { width: 40px; height: 40px; }
    #c3_wrap .c_btn a .arrow {width: 12px; height: 12px; }

    /* content */
    #c3_wrap .left_txt { margin-bottom:40px;}

    #c3_wrap .list > li {margin: 0 20px 0 0; width: calc(33.3% - 13.4px); }
    #c3_wrap .list a { padding: 35px 25px;} {}
    #c3_wrap .list .icon {height: auto;}
    #c3_wrap .list .icon img {height: 70px;}
    #c3_wrap .list h4 {  margin-bottom: 15px; }
    #c3_wrap .list .arrow {width: 40px; height: 40px; background-size: 12px auto;top:25px; right: 25px; }

}

@media screen and (max-width: 768px) {
    #c3_wrap .list {flex-direction: column; align-items: center; }
    #c3_wrap .list > li {width: 100%; margin:0 0 20px;}
    #c3_wrap .list a { padding:30px 20px; }
    #c3_wrap .list .icon {margin-top: 15px;}
    #c3_wrap .list .icon img {height: 60px;}
    #c3_wrap .list .arrow { top:20px; right: 20px; }

}

@media screen and (max-width: 640px) {
    /* common */
    #c3_wrap {padding: 50px 0;}
    #c3_wrap .c_inner {padding:0 20px;}
    #c3_wrap .c_tit h3 {font-size: 14px;}
    /* font size */
    #c3_wrap .fs_90 {font-size: 30px;}
    #c3_wrap .fs_38 {font-size: 22px;}
    #c3_wrap .fs_20 {font-size: 15px;  }
    #c3_wrap .fs_18 {font-size: 14px;  }


    /* content */
    #c3_wrap .left_txt { margin-bottom:30px;}

}