@charset "utf-8";

.middle_main .vis {padding: 160px 0px 80px;background-image: url(/app/img/main/vis_bg.png);background-position: top center;}
.vis .vis_txt {text-align: center;}

.vis .vis_txt > b {font-size: 40px;margin-bottom: 30px;display: block;color: #444444;}
.vis .vis_txt p.txt b {margin-bottom: 40px;font-size: 50px;line-height: 25px;color: #201B68;font-weight: bold;}
.vis .vis_txt p.txt span {font-size: 20px;display:block;margin-top: 30px;color: #a7a7a7;font-weight: lighter;margin-bottom: 60px;}
.vis .vis_txt .vis_btn {display: flex;gap: 30px;justify-content: center;}




.cont_in2 {width: auto;margin: 0 auto;}
.main_board .cont_in {width: 1200px;margin: 10px auto 40px;text-align: center;}
.main_board .cont_in h4 {width: 100%;position: relative;margin-top: 40px;display: inline-block;font-size: 22px;margin-bottom: 10px;}
.main_board .cont_in h4 a {position: absolute;right: 0;top: -3px;width: 30px;height: 30px;line-height: 34px;text-align: center;font-size: 15px;color: #7d7d7d;font-weight: normal;}
.main_board .cont_in h4 a:before {content: "";}
.main_board .cont_in ul {margin-top: 20px;display: flex;gap: 30px;width: 100%;justify-content: flex-start;}
.main_board .cont_in ul li {margin-bottom: 5px;border: 1px solid #eee;width: 25%;padding: 20px;border-radius: 10px;}
.main_board .cont_in ul span.date {float: left;color: #83AAF2;margin-top: 20px;}
.main_board .cont_in ul a {display: inline-block;width: 100%;font-weight: 600;color: #444444;text-overflow: ellipsis;overflow: hidden;word-break: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}



.topalim {text-align: center;display: flex;height: 80px;font-size: 19px;position: sticky;align-items: center;border-bottom: 1px dotted #646464;flex-direction: column;justify-content: center;background: #5493ff;}
.topalim:before {content: "";position: absolute;width: calc( 50% + 200px );right: 0;background: #fff;height: 80px;}
.topalim:after {content: "";position: absolute;width: 57px;right: calc(50% + 171px);height: 57px;background: #5493ff;transform: rotate(45deg);}
img.hidden_over {display: none;}

.topalim .btn_st.btn_c_no:hover + .hidden_over {position: fixed;display: flex;top: 80px;z-index: 10;max-width: 90%;margin-left: -60px;}
.topalim:hover  {position: relative;z-index: 1000;}






.my_service_top {position: relative;background: #95bcff;padding: 0;text-align: center;}
.my_service_top h4 {display: none;font-size: 20px;margin: 0;padding: 10px 0 5px;}
.my_service_top h4:before {display: none;}
.my_service_top .step_group ul {display: flex;max-width: 1200px;margin: 0 auto;}
.my_service_top .step_group ul li {position: relative;flex-grow: 1;}
.my_service_top .step_group ul li:nth-child(1) {background:#f4f4f4;}
.my_service_top .step_group ul li:nth-child(2) {background:#e6e6e6;}
.my_service_top .step_group ul li:nth-child(3) {background:#cdcdcd;}
.my_service_top .step_group ul li:nth-child(4) {background:#b0b0b0;}

.my_service_top .step_group ul li.ok.step1,
.my_service_top .step_group ul li.ing.step1{background:#f0f6ff;}
.my_service_top .step_group ul li.ok.step2,
.my_service_top .step_group ul li.ing.step2{background:#d1e2ff;}
.my_service_top .step_group ul li.ok.step3,
.my_service_top .step_group ul li.ing.step3{background:#b2cfff;}
.my_service_top .step_group ul li.ok.step4,
.my_service_top .step_group ul li.ing.step4{background:#95bcff;}

.my_service_top .step_group ul li:before {content: "";position: absolute;right: -28px;top: 45px;display: inline-block;border: 15px solid #cccccc00;border-left: 15px solid #ccc;z-index: 1;}
.my_service_top .step_group ul li.step1.ok:before,
.my_service_top .step_group ul li.step1.ing:before {border-left-color:#f0f6ff;}
.my_service_top .step_group ul li.step2.ok:before,
.my_service_top .step_group ul li.step2.ing:before {border-left-color:#d1e2ff;}
.my_service_top .step_group ul li.step3.ok:before,
.my_service_top .step_group ul li.step3.ing:before {border-left-color:#b2cfff;}
.my_service_top .step_group ul li.step4.ok:before,
.my_service_top .step_group ul li.step4.ing:before {border-left-color:#95bcff;}
.my_service_top .step_group ul li.step4:before{display:none;}
.my_service_top .step_group ul li span.num {display:none;}
.my_service_top .step_group .step2 .box .box2 .cont {padding-top: 0px;}
.my_service_top .step_group .step2 .box .box2 .cont .txt {background: none;display: inline-block;font-size: 13px;font-weight: normal;}

.my_service_top .step_group .box .box2 .cont {padding-top: 5px;}
.my_service_top  a.btn_c_di {background: #7a7a7a;color: #ccc;border: none;cursor: default;text-decoration: none;box-shadow: none;opacity: 1;}
.my_service_top .ok a.btn_st:hover,
.my_service_top .ing a.btn_st:hover {text-decoration:underline;box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 4px 10px 0 rgba(0, 0, 0, 0.19);opacity:0.9;}
.my_service_top .step_group .ok .box b.tit,
.my_service_top .step_group .ing .box b.tit, 
.my_service_top .step_group .ok .box p.stat,
.my_service_top .step_group .ing .box p.stat{color: #000;}
.my_service_top button.btn_myserv {background: #fff;border: none;padding: 5px 40px;border-radius: 20px;cursor: pointer;display: none;}
.my_service_top .step_group .box {padding: 5px 20px 10px;text-align: left;}
.my_service_top .step_group .box b.tit {display: block;font-size: 12px;font-weight: normal;color: #7a7a7a;}
.my_service_top .step_group .box p.stat {font-weight: bold;margin-bottom: 5px;font-size: 15px;color: #7a7a7a;}
.my_service_top .step_group .box .box2 .txt {background:#fff;border-radius:20px;padding:10px;text-align:center;font-weight:bold;}
.my_service_top .step_group .box .box2 .tit2  {visibility:hidden;height:0;}
.my_service_top .step_group .step2 .box .box2 .tit2 {visibility:inherit;height:auto;position: absolute;margin-top: -28px;right: 20px;color: #686868;font-size: 12px;}
.my_service_top .step_group .box .box2 .tit2 a.btn_st.btn_s_sml.btn_c_wh {border-radius: 9px;padding: 3px 1px;}
.my_service_top .step_group .cont .btn_st {border-radius:20px;padding: 0px 10px;line-height: 30px;font-size: 12px;}
.my_service_top .step_group .m_h,
.my_service_top .step_group a i{display:none;}


.my_service{background: #eee;padding: 50px;}
.my_service h4 {margin: 30px 0 120px;font-size: 40px;text-align: center;color: #1d3363;}
.my_service h4:before {width: 120px;height: 5px;background: #466cbd;content: "";display: block;margin: 30px auto;border-radius: 5px;}
.my_service .step_group ul {display: flex;}
.my_service .step_group ul li {flex: 1 0 0;position: relative;flex-grow: 1;}
.my_service .step_group ul li:before {content: "";width: 100%;height: 1px;position: absolute;top: 0;right: 50%;background: #cfcfcf;}
.my_service .step_group ul li:first-child:before {display: none;}
.my_service .step_group ul li span.num {position: absolute;top: -35px;right: 50%;margin-right: -35px;background: #cfcfcf;color: #fff;width: 70px;height: 70px;border-radius: 50px;text-align: center;line-height: 70px;font-size: 30px;font-weight: bold;z-index: 1;}
.my_service .step_group ul li .box {margin: 50px 10px 10px;text-align: center;}
.my_service .step_group ul li .box .tit {color: #979797;display: block;}
.my_service .step_group ul li .box .stat {color: #979797;margin: 10px 0 20px;padding: 10px 0px;min-width: 170px;font-size: 18px;border: 1px solid #ccc;display: inline-block;border-radius: 40px;}
.my_service .step_group ul li .box .box2 {position: relative;background: #fff;padding: 20px 0px;border-radius: 10px;}
.my_service .step_group ul li .box .box2:before {content:"";position: absolute;left: 50%;top: -20px;margin-left: -10px;border: 10px solid #eeeeee00;border-bottom: 10px solid #ffffff;}
.my_service .step_group ul li .box .box2 p.tit2 {font-size: 14px;color: #777;margin-bottom: 15px;}
.my_service .step_group ul li .box .box2 .txt {font-size: 20px;color: #2C2C2C;font-weight: 100;letter-spacing: 0.5px;margin-bottom: 10px;line-height: 30px;word-break: break-word;}
.my_service .step_group ul li .box .box2 .cont {margin: 0 20px;}
.my_service .step_group ul li .box .box2 .cont a {margin-top:10px;width:100%;}
.my_service .step_group ul li .box .box2 .cont a:first-child {margin-top:0px;}
.my_service .step_group ul li.ok:before, 
.my_service .step_group ul li.ing:before {background: #1d3363;}
.my_service .step_group ul li.ok .num {background: #1d3363;font-size: 0;}
.my_service .step_group ul li.ok .num:after {content:"\f00c";font-family: "Font Awesome 6 Free";font-weight: 900;font-size: 40px;}
.my_service .step_group ul li.ok .box .tit, 
.my_service .step_group ul li.ing .box .tit {color: #1d3363;}
.my_service .step_group ul li.ok .box .stat {color: #1d3363;border: 1px solid #1d3363;}
.my_service .step_group ul li.ing .num {background: #fff;color: #1d3363;border: 7px solid #1d3363;line-height: 54px;}
.my_service .step_group ul li.ing .box .stat {color: #2c2c2c;background: #fff;box-shadow: 2px 2px 10px #cbcbcb;}

.fsite_banner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 20px 20px;
    text-align: center;
    max-width: 1200px;
    margin: 70px auto 0;
}

.fsite_banner a img {
    width: auto;
    max-height: 30px;
}

.fsite_banner a:hover {
    border: 1px solid #fff;
}

.fsite_banner a {
    border: 1px solid #fff;
    padding: 10px 14px;
}

@media (max-width: 980px){

.my_service_top .step_group ul {flex-direction: column;}
.my_service_top .step_group ul li:before {top: inherit;bottom: -30px;right: inherit;left: 50%;}
.my_service_top .step_group ul li.step1.ok:before,
.my_service_top .step_group ul li.step1.ing:before {border: 15px solid #cccccc00;border-top-color:#f0f6ff;}
.my_service_top .step_group ul li.step2.ok:before,
.my_service_top .step_group ul li.step2.ing:before {border: 15px solid #cccccc00;border-top-color:#d1e2ff;}
.my_service_top .step_group ul li.step3.ok:before,
.my_service_top .step_group ul li.step3.ing:before {border: 15px solid #cccccc00;border-top-color:#b2cfff;}
.my_service_top .step_group ul li.step4.ok:before,
.my_service_top .step_group ul li.step4.ing:before {border: 15px solid #cccccc00;border-top-color:#95bcff;}
.my_service_top h4 {display: block;margin-bottom: 5px;}
.my_service_top button.btn_myserv {display: block;margin: 0 auto 10px;}
.my_service_top .step_group {overflow: hidden;height: 0px;transition: 1s all;}
.step_group.on {height: 420px;}

}