@charset "utf-8";


.main_navi > ul > li:nth-child(4) > a {
    display: inline-block;
    border-bottom: 3px solid #051766;
    color: #222;
    font-weight: 700;
    box-sizing: border-box;
}

.s_tab ul li:first-child a {
    display: block;
    border-bottom: 3px solid #051766;
    color: #051766;
    font-weight: 700;
    box-sizing: border-box;
}

/* step //////////////////// */

.step_title {
    display: flex;
    align-items: center;
}
.step_title img {
    margin-left: 10px;
}
.step_title h2 {
    font-size: 25px;
    font-weight: 700;
    padding: 0 10px;
}
.step_num1 ul, .step_num2 ul {
    margin: 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.step_num1 ul li, .step_num2 ul li {
    width: 28%;
    position: relative;
}
.step_num1 ul li div {
    background: #EAF6FE; 
    padding: 15px;
    position: relative;
    border-radius: 10px;
    box-shadow: 5px 5px 0px #051766;
    margin: 20px 0;
    box-sizing: border-box;
    z-index: 1;
    height: 78%;
}
.step_num2 ul li div {
    background: #fff; 
    padding: 15px;
    border-radius: 10px;
    box-shadow: 5px 5px 0px #051766;
    margin: 20px 0;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    height: 78%;
    
}
.step_num1 ul li div strong, .step_num2 ul li div strong {
    font-size: 20px;
    font-weight: 700;
}
.step_num1 ul li div p, .step_num2 ul li div p {
    font-size: 14px;
    color: #636363;
    margin: 10px 0;
}
.step_num1 ul li div a, .step_num2 ul li div a {
    font-size: 15px;
    font-weight: 500;
    color: #474747;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding-right: 5px;
}

.step_txt {
    position: relative;
}
.step_txt div span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-weight: 700;
    font-style: italic;
    font-size: 20px;
    text-align: center;
    width: 100%;
}
.step_txt div img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
    vertical-align: top;
}
.step_num1 ul li.step_txt div, .step_num2 ul li.step_txt div {
    padding: 0;
}

/* step_box //////////////////// */

#step1_box, #step3_box {
    padding: 40px 0;
    }

#step2_box {
    padding: 40px 0;
    background: url(../img/sub_04/step2-bg.png) no-repeat center;
}
#step4_box {
    padding: 40px 0;
    padding-bottom: 215px;
    background: url(../img/sub_04/step4-bg.png) no-repeat center;
}


/* 가상요소 //////////////////// */

/* 공통 왼>오 가로선 */
.step_num1 ul li::after,
.step_num2 ul li::after {
    content: '';
    position: absolute;
    width: 100px;
    border-top: 5px dotted #051766;
    right: -100px;
    top: 50%;
    transform: translateY(50%);
}

/* 수직선 */
.step_num1 ul li:nth-child(3)::after,
.step_num2 ul li:nth-child(3)::after,
.step_num1 ul li:nth-child(6)::after {
    width: 50px;
    transform: rotate(90deg) translateX(-50%);
    right: 45%;
    top: auto;
    bottom: -35px;
    z-index: 1;
}

/* 공통 오>왼 가로선 */
.step_num1 ul li:nth-child(4)::after,
.step_num1 ul li:nth-child(5)::after,
.step_num2 ul li:nth-child(4)::after,
.step_num2 ul li:nth-child(5)::after {
    right: auto;
    left: -100px;
}

/* 불필요한 선 삭제 */
#step1_box .step_num1 ul li:nth-child(9)::after,
#step3_box .step_num1 ul li:nth-child(6)::after,
#step4_box .step_num2 ul li:nth-child(3)::after {
    display: none;
}


/* step 순서바꾸기 //////////////////// */

.step_num1 ul li:nth-child(4),
.step_num2 ul li:nth-child(4) {
    order: 6;
}
.step_num1 ul li:nth-child(5),
.step_num2 ul li:nth-child(5) {
    order: 5;
}
.step_num1 ul li:nth-child(6),
.step_num2 ul li:nth-child(6) {
    order: 4;
}
.step_num1 ul li:nth-child(7) {
    order: 7;
}
.step_num1 ul li:nth-child(8) {
    order: 8;
}
.step_num1 ul li:nth-child(9) {
    order: 9;
}

@media screen and (max-width:500px) {
    /* 최상단 탭메뉴 안보이게 */
    .s_tab ul li a, .s_tab ul li:first-child a {
        display: none;
    }
    #step1_box {
        padding-top: 0;
        transition: 0.3s;
    }
} /* 모바일최소: 0부터 500까지 */

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

    .step_num1 ul, .step_num2 ul {
        display: flex;
        flex-direction: column;
    }
    .step_num1 ul li, .step_num2 ul li {
        width: 100%;
    }

    .step_num1 ul li::after,
    .step_num2 ul li::after,
    .step_num1 ul li:nth-child(3)::after,
    .step_num2 ul li:nth-child(3)::after,
    .step_num1 ul li:nth-child(6)::after {
        content: '';
        position: absolute;
        border-top: 5px dotted #051766;
        width: 50px;
        transform: rotate(90deg) translateX(-50%);
        right: 45%;
        top: auto;
        bottom: -35px;
        z-index: 1;
    }
    .step_num2 ul li:nth-child(6)::after {
        display: none;
    }
    .step_num1 ul li:nth-child(4)::after,
    .step_num1 ul li:nth-child(5)::after,
    .step_num2 ul li:nth-child(4)::after,
    .step_num2 ul li:nth-child(5)::after {
        left: auto;
        right:45%;
    }
    #step2_box, #step4_box  {
        background-size: cover;
    }
    #step2_box {
        background: url(../img/sub_04/step2-bg_mb.png) no-repeat center;
    }
    #step4_box {
        padding-bottom: 150px;
        background: url(../img/sub_04/step4-bg_mb.png) no-repeat center;
    }

    /* step 순서바꾸기 //////////////////// */

    .step_num1 ul li:nth-child(4),
    .step_num2 ul li:nth-child(4) {
        order: 4;
    }
    .step_num1 ul li:nth-child(5),
    .step_num2 ul li:nth-child(5) {
        order: 5;
    }
    .step_num1 ul li:nth-child(6),
    .step_num2 ul li:nth-child(6) {
        order: 6;
    }
    .step_num1 ul li:nth-child(7) {
        order: 7;
    }
    .step_num1 ul li:nth-child(8) {
        order: 8;
    }
    .step_num1 ul li:nth-child(9) {
        order: 9;
    }

} /* 0부터 630까지 */

@media screen and (min-width:500px) and (max-width:960px) {
    #step1_box {
        padding-top: 0px;
        transition: 0.3s;
    }
} /* 중간조절: 500부터 960까지 */

@media screen and (min-width:631px) and (max-width:768px) {
    .step_num1 ul li div strong, .step_num2 ul li div strong {
        font-size: 18px;
        letter-spacing: -1px;
    }
    .step_num1 ul li div p, .step_num2 ul li div p {
        font-size: 13px;
    }
    .step_num1 ul li div a, .step_num2 ul li div a {
        font-size: 13px;
    }
} /* 중간조절: 631부터 768까지 */