/* common */
#c2_wrap .c_inner { width: 100%; max-width: 1400px; margin:0 auto; position: relative; padding:0 50px; border:0px solid rgba(255,255,255,.3); border-width: 0 1px;}
#c2_wrap .c_tit h2 {position: relative;}
#c2_wrap .c_tit h2::before {content: ''; display: block; width: 5px; height:80%;  position: absolute; left: -50px; top:12%; background: #fff;}
#c2_wrap .c_tit p {margin-top: 25px;}
/* font size */
#c2_wrap .fs_60 {font-size: 60px; font-weight: 800; color:#fff; line-height: 1.2; font-family: 'Montserrat', sans-serif; }
#c2_wrap .fs_18 {font-size: 18px; font-weight: 400; color:rgba(255, 255, 255, 0.7); line-height: 1.83; letter-spacing: -.36px;}

/* c_btn */
#c2_wrap .c_btn a { position: relative; display: inline-flex; font-size: 16px; color: #fff; font-weight: 500; padding-right: 33px; z-index: 1; transition: all .3s; white-space: nowrap; align-items: center; height: 45px; font-family: 'Montserrat', sans-serif; }
#c2_wrap .c_btn .arrow { position: relative; top:0; display:block; background:url('../img/c_btn_arrow_w.png') no-repeat center; font-size: 0; width: 23px;
height: 25px; margin-left: 13px; transition: all .3s; }
#c2_wrap .c_btn a::after { content: ""; position: absolute; right: 0; top: 0; width: 45px; height: 45px;  z-index: -1; transition: all .3s;
background:url("../img/c_btn_rec.png") 50%/contain no-repeat;}
#c2_wrap .c_btn a:hover .arrow { transform: translateX(10px);}


/* c1 */
#c2_wrap {overflow: hidden; background:url("../img/c2_bg.jpg") 50%/cover no-repeat; position: relative;z-index: 1; }
#c2_wrap .c_inner {padding-top: 90px; }
#c2_wrap .top {display: flex; justify-content: space-between; align-items: center; }

#c2_wrap .list {display: flex; text-align: center; border-top: 1px solid rgba(255,255,255,.3); position: relative; width: calc(100% + 100px); left: -50px; margin-top: 70px;}
#c2_wrap .list > li {width: calc(100% / 3); border-right: 1px solid rgba(255,255,255,.3); transition: all .3s; padding: 105px 0; position: relative;}
#c2_wrap .list > li:last-child {border-right:0;}
#c2_wrap .list > li::before {content: ''; display: block; width: 5px; height: 5px; background: #fff; position: absolute; left: -3px; top:-3px; }
@media screen and (min-width: 1025px) {
    #c2_wrap .list > li:last-child::after {content: ''; display: block; width: 5px; height: 5px; background: #fff; position: absolute; right: -3px; top:-3px; }
}
#c2_wrap .list .icon {display: flex; align-items: center; justify-content: center; height: 87px; }
#c2_wrap .list .icon img {transition: transform .5s; }
#c2_wrap .list h3 {font-size: 28px; font-weight: 700; color:#fff; font-family: 'Montserrat', sans-serif; margin: 25px 0; line-height: 1.32;}
#c2_wrap .list p {font-size: 17px; font-weight: 400; color:rgba(255, 255, 255, 0.7); }

#c2_wrap .list li:hover {background-color: rgba(255,255,255,.09); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);}
#c2_wrap .list li:hover .icon img {transform: rotateY(180deg);}




@media screen and (max-width: 1400px) {
    /* common */
    #c2_wrap .c_inner {border-width: 0;}


}

@media screen and (max-width: 1024px) {
    /* common */
    #c2_wrap {padding:70px 0 0; text-align: center;}
    #c2_wrap .c_inner {padding:0 30px;}
    #c2_wrap .c_tit h2::before {position: static; width: 50px; height: 5px; margin: 0 auto 25px;}
    #c2_wrap .c_tit p {margin-top: 15px ;}
    /* font size */
    #c2_wrap .fs_60 {font-size: 40px; }
    #c2_wrap .fs_18 {font-size: 16px;}


    /*Content CSS*/
    #c2_wrap .top {display: block; }
    #c2_wrap .top .c_btn {margin: 20px auto 0; }
    #c2_wrap .list {width: calc(100% + 60px); left: -30px;  margin-top: 50px;}
    #c2_wrap .list > li { padding: 40px 0;}
    #c2_wrap .list > li:first-child::before {display: none;}
    #c2_wrap .list h3 {font-size: 20px; margin: 20px 0;}
    #c2_wrap .list p {font-size: 16px;}



}

@media screen and (max-width:640px) {
    /* common */
    #c2_wrap {padding:50px 0 0;}
    #c2_wrap .c_inner {padding:0 20px;}
    #c2_wrap .c_tit h2::before {height: 4px; margin: 0 auto 20px;}
    /* font size */
    #c2_wrap .fs_60 {font-size: 30px; }
    #c2_wrap .fs_18 {font-size: 14px;}
    /* c_btn */
    #c2_wrap .c_btn a {font-size: 14px; height: 35px; padding-right: 25px;}
    #c2_wrap .c_btn a::after {width: 35px; height: 35px;}
    #c2_wrap .c_btn .arrow {height: 19px; width: 19px; background-size: contain; margin-left: 7px;}
    #c2_wrap .c_btn a:hover .arrow { transform: translateX(5px);}

    /*Content CSS*/
    #c2_wrap .top .c_btn {margin: 15px auto 0; }
    #c2_wrap .list {width: calc(100% + 40px); left: -20px;  margin-top:30px; flex-wrap: wrap; border-top: 0; }
    #c2_wrap .list::before {content: ''; display: block; width: 5px; height: 5px; background: #fff; position: absolute; left: -0; top:-3px;}
    #c2_wrap .list::after {content: ''; display: block; width: 5px; height: 5px; background: #fff; position: absolute; right: -0; top:-3px;}

    #c2_wrap .list > li { padding: 20px 15px; width: 100%; border-top: 1px solid rgba(255,255,255,.3);  }
    #c2_wrap .list > li::before {display: none;}
    #c2_wrap .list h3 {font-size: 18px; margin: 10px 0 7px;}
    #c2_wrap .list p {font-size: 14px;}
    #c2_wrap .list .icon {height: auto;}
    #c2_wrap .list .icon img {height: 45px;}
    #c2_wrap .list br {display: none;}

}