
/*Content CSS*/
#c1_wrap{position: relative; overflow: hidden; width: 100%;}
#c1_wrap > article{padding: 90px 0;}
#c1_wrap .c_inner{width: 100%; max-width: 1400px; padding: 0 50px; margin: 0 auto;}
#c1_wrap br.mob{display: none;}

/* font-style */
#c1_wrap .fs_60{font-size: 60px; font-weight: 700; line-height: 1.2;}
#c1_wrap .fs_31{font-size: 31px; line-height: 1.2;}
#c1_wrap .fs_27{font-size: 27px; line-height: 1.2;}
#c1_wrap .fs_23{font-size: 23px; line-height: 1.35;}
#c1_wrap .fs_19{font-size: 19px; line-height: 1.58;}
#c1_wrap .fs_17{font-size: 17px; line-height: 1.76;}

/* vm_btn */
#c1_wrap .vm_btn a{overflow: hidden; display: inline-flex; align-items: center; justify-content: space-between; padding: 0 12px 0 31px; width: 228px; height: 54px; border: solid 1px #000; border-radius: 27px; position: relative; z-index: 2; transition: .3s;}
#c1_wrap .vm_btn a::before{content: ''; display: block; width: 38px; height: 38px; border-radius: 27px; background-color: #04056b; position: absolute; top: 50%; transform: translateY(-50%); right: 12px; z-index: -1; transition: .6s;}
#c1_wrap .vm_btn a i{display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; }
#c1_wrap .vm_btn a span{transition: .6s;}

/* dot_lsit */
#c1_wrap .dot_list li{position: relative; padding-left: 12px; color: rgba(255, 255, 255, .8);}
#c1_wrap .dot_list li::before{content: ''; display: block; width: 4px; height: 4px; background-color: #fff; position: absolute; top: 12px; left: 0;}

/* c1_wrap */
#c1_wrap .top{position: relative;}
#c1_wrap .top h3{margin-bottom: 15px; max-width: calc(100% - 300px);}
#c1_wrap .top h3::after{content: ''; display: block; width: 45px; height: 3px; background-color: #04056b; margin: 33px 0 0;}

/* card_list */
#c1_wrap .card_list{display: flex; gap: 14px; margin-top: 51px; }
#c1_wrap .card_list > li{width: calc((100% - 42px) / 4); padding-top: 26px; border-radius: 10px; overflow:hidden; position: relative; transition: .5s; cursor: pointer;}
#c1_wrap .card_list > li > div{display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%;}
#c1_wrap .card_list > li .wrap{border-radius: 10px; padding: 40px 44px; background: 50% / cover no-repeat; transition: .3s;}
#c1_wrap .card_list > li .wrap .num{display: block; font-size: 50px; font-weight: 700; font-family: 'Poppins'; color: rgba(255,255,255,.15); line-height: 1; text-align: right;}
#c1_wrap .card_list > li .wrap .txt{margin-top: 160px;}
#c1_wrap .card_list > li .wrap .txt i{display: block;}
#c1_wrap .card_list > li .wrap .txt h4{font-weight: 600; color: #fff; margin-top: 18px;}

#c1_wrap .card_list > li .hv_wrap{height: calc(100% - 26px); padding-top: 45px; position: absolute; bottom: 0; left: 0; opacity: 0; transition: .5s; z-index: 2;}
#c1_wrap .card_list > li .hv_wrap::before{content: ''; display: block; width: 100%; height: 100%; background-color: #ea8929; border-radius: 15px; position: absolute; top: 50px; left: 0; z-index: -1; transition-delay: 1s; transition: .5s;}
#c1_wrap .card_list > li .hv_wrap h4{font-weight: 800; color: #fff; text-align: center; position: relative; top: 26px; transition-delay: 1s; transition: .5s;}
#c1_wrap .card_list > li .hv_wrap .txt{width: 100%; position: absolute; left: 0; bottom: 0; background-color: #04056b; padding: 50px 25px; border-radius: 0 80px 15px 15px;}
#c1_wrap .card_list > li .hv_wrap .txt h6{font-weight: 600; color: #fff; border-bottom: solid 1px rgba(255,255,255,.4); padding-bottom: 20px; margin-bottom: 20px;}

#c1_wrap .card_list > li:nth-child(1) .wrap{background-image: url('../img/c1_img1.jpg');}
#c1_wrap .card_list > li:nth-child(2) .wrap{background-image: url('../img/c1_img2.jpg');}
#c1_wrap .card_list > li:nth-child(3) .wrap{background-image: url('../img/c1_img3.jpg');}
#c1_wrap .card_list > li:nth-child(4) .wrap{background-image: url('../img/c1_img4.jpg');}

/* sec1 */
#c1_wrap .sec1{position: relative; z-index: 2;}
#c1_wrap .sec1::before{position: absolute; width: 100%; height: calc(50% - 72px); z-index: -1;}

#c1_wrap .card_list > li.active{border-radius: 15px;}
#c1_wrap .card_list > li.active .hv_wrap{opacity: 1;}
#c1_wrap .card_list > li.active .hv_wrap h4{top: 0;}
#c1_wrap .card_list > li.active .hv_wrap::before{top: -26px;}

@media screen and (min-width: 1901px) {
    #c1_wrap .card_list > li{min-height: 422px;}
    #c1_wrap .card_list > li .hv_wrap .txt {min-height: 284px;}
    #c1_wrap .card_list > li .hv_wrap .txt > *{padding: 0 20px}
}

@media screen and (min-width: 1025px) {
    #c1_wrap .vm_btn a:hover{border-color:#04056b;}
    #c1_wrap .vm_btn a:hover::before{transform: scale(15);}
    #c1_wrap .vm_btn a:hover span{color: #fff;}

    #c1_wrap .top .vm_btn{position: absolute; right: 0; top: 0;}
}

@media screen and (max-width: 1600px) {
    #c1_wrap > article{padding: 70px 0;}

    /* card_list */
    #c1_wrap .card_list > li .wrap{padding: 30px;}
}

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

    /* font-style */
    #c1_wrap .fs_60{font-size: 50px;}
    #c1_wrap .fs_31{font-size: 29px;}
    #c1_wrap .fs_27{font-size: 25px;}
    #c1_wrap .fs_23{font-size: 21px;}
    #c1_wrap .fs_19{font-size: 18px;}
    #c1_wrap .fs_17{font-size: 16px; line-height: 1.7;}

    /* vm_btn */
    #c1_wrap .vm_btn a{padding-left: 20px;}

    /* card_list */
    #c1_wrap .card_list{margin-top: 30px;}
    #c1_wrap .card_list > li .wrap .num{font-size: 40px;}
    #c1_wrap .card_list > li .hv_wrap .txt{border-radius: 0 30px 15px 15px; padding: 25px 20px; min-height: 60%;}
}
@media screen and (max-width: 1280px) {
    /* card_list */
    #c1_wrap .card_list{flex-wrap: wrap; margin-top: 20px;}
    #c1_wrap .card_list > li{width: calc((100% - 20px) / 2); padding-top: 20px;}
    #c1_wrap .card_list > li .wrap .num{font-size: 40px;}
    #c1_wrap .card_list > li .wrap .txt{margin-top: 100px;}
    #c1_wrap .card_list > li .wrap .txt i img{transform: scale(.8);}
    #c1_wrap .card_list > li .hv_wrap{padding-top: 30px; height: calc(100% - 20px);}
    #c1_wrap .card_list > li .hv_wrap .txt{border-radius: 0 30px 15px 15px; padding: 25px 20px; min-height: 60%;}

    #c1_wrap .card_list > li.active .hv_wrap::before{top: -20px;}

}
@media screen and (max-width: 1024px) {
    #c1_wrap > article{padding: 50px 0;}
    #c1_wrap .c_inner{padding: 0 30px;}
    #c1_wrap br.mob{display: block;}

    /* font-style */
    #c1_wrap .fs_60{font-size: 45px;}
    #c1_wrap .fs_31{font-size: 27px;}
    #c1_wrap .fs_27{font-size: 23px;}
    #c1_wrap .fs_23{font-size: 20px;}
    #c1_wrap .fs_19{font-size: 17px;}
    #c1_wrap .fs_17{font-size: 15px;}

    /* dot_list */
    #c1_wrap .dot_list li::before{top: 11px;}

    /* c1_wrap */
    #c1_wrap .top{text-align: center;}
    #c1_wrap .top h3{margin-bottom: 15px; max-width: 100%;}
    #c1_wrap .top h3::after{width: 35px; margin: 25px auto 0;}

    /* vm_btn */
    #c1_wrap .vm_btn{text-align: center; margin-top: 30px;}
    #c1_wrap .vm_btn a{width: 220px; height: 48px;}
    #c1_wrap .vm_btn a::before{width: 30px; height: 30px;}
    #c1_wrap .vm_btn a i{width: 30px; height: 30px;}
}

@media screen and (max-width: 768px) {
    /* card_list */
    #c1_wrap .card_list > li{width: 100%;}
    #c1_wrap .card_list > li .wrap{padding: 20px;}
    #c1_wrap .card_list > li .wrap .num{font-size: 35px;}
    #c1_wrap .card_list > li .wrap .txt{margin-top: 50px;}
    #c1_wrap .card_list > li .hv_wrap{padding-top: 5px;}
    #c1_wrap .card_list > li .hv_wrap .txt{padding: 20px; min-height: 0;}

    #c1_wrap .card_list > li.active .hv_wrap h4{top: 0;}
}

@media screen and (max-width: 640px) {
    #c1_wrap .c_inner{padding: 0 20px;}
    /* font-style */
    #c1_wrap .fs_60{font-size: 40px;}
    #c1_wrap .fs_31{font-size: 25px;}
    #c1_wrap .fs_27{font-size: 21px;}
    #c1_wrap .fs_23{font-size: 19px;}
    #c1_wrap .fs_19{font-size: 16px;}
    #c1_wrap .fs_17{font-size: 14px;}

    /* vm_btn */
    #c1_wrap .vm_btn a{width: 100%; height: 45px; padding-right: 8px;}
    #c1_wrap .vm_btn a::before{right: 8px;}
}

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

}
