/* 탭 tab 추가 */
/* 탭 tab 추가 */
.m4_m3_m5 article.tab div{
    display: flex;
}
.m4_m3_m5 article.tab div button{
    width: 100%;
    text-align: center;
    border: 1px solid #c3c3c3;
    font: 19px/1.4em "나눔바른고딕";
    color: #6e5d42;
    background: #fff;
    padding: 14px 15px;
}
.m4_m3_m5 article.tab div button ~ button{
    /* position: relative; */
    /* width: calc(100% + 1px); */
    margin-left: -1px;
}
.m4_m3_m5 article.tab div button.on{
    z-index: 1;
    border: 1px solid #830020;
    color: #fff;
    font-weight: bold;
    background: #830020;
}
/* 탭 tab 추가 */
/* 탭 tab 추가 */
/* 탭 tab 추가 */
/* 탭 tab 추가 */

/* 팁 tip */
/* 팁 tip */
/* 팁 tip */
.m4_m3_m5 article.tip {
    border-top: 1px solid #9f9f9f;
    border-bottom: 1px solid #9f9f9f;
}
.m4_m3_m5 article.tip .text{
    padding: 20px 0 17px;
    border-bottom: 1px solid #d8d8d8;
}
.m4_m3_m5 article.tip .text p{
    display: flex;
    align-items: flex-start;
    font: 17px/1.4em "나눔바른고딕";
    color: #000;
}
.m4_m3_m5 article.tip .text p::before{
    content: "";
    display: inline-block;
    min-width: 6px;
    height: 6px;
    background: #8f816a;
    border-radius: 10px;
    margin-top: 8px;
    margin-right: 8px;
}
.m4_m3_m5 article.tip .text p ~ p{
    margin-top: 8px;
}

.m4_m3_m5 article.tip .btn{
    display: flex;
    padding: 15px 0;
}
.m4_m3_m5 .tip a.link{
    background: #313133;
}
.m4_m3_m5 .tip a.link:after{
    background: url(../../../../images/iosf/ko/content/m4_m3_m5/link_white_14x14.png)no-repeat center;
}
.m4_m3_m5 .tip a.down{
    background: #8f816a;
}
.m4_m3_m5 .tip a.down:after{
    background: url(../../../../images/iosf/ko/content/m4_m3_m5/down_white_14x14.png)no-repeat center;
}

.m4_m3_m5 .tip a ~ a{
    margin-left: 10px;
}


/* 팁 tip */
/* 팁 tip */
/* 팁 tip */



.m4_m3_m5{
    padding: 30px 0;
    background: #fff;
}

.m4_m3_m5 > div{
    max-width: 1100px;
    margin: auto;
}

.m4_m3_m5 article{
    width: 100%;
}
.m4_m3_m5 article ~ article{
    margin-top: 50px;
}


.m4_m3_m5 article .title{
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    font: 23px/1.4em "나눔바른고딕";
    color: #000;
} 
.m4_m3_m5 article .title p{
    font: 23px/1.4em "나눔바른고딕";
    color: #000;
    flex: 1;
}

.m4_m3_m5 article .title:before{
    content: "";
    display: inline-block;
    min-width: 3px;
    height: 22px;
    background: url(../../../../images/iosf/ko/content/m4_m3_m5/bar_3x22.png)no-repeat center;
    margin-right: 10px;
    margin-top: 5px;
}
.m4_m3_m5 article .title:after{
    content: "";
    display: block;
    min-width: 100%;
    height: 1px;
    background: #222222;
    margin-top: 26px;
    margin-bottom: 30px;
}


.m4_m3_m5 .info .tip:last-of-type{
    font: 17px/1.4em "나눔바른고딕";
    color: #65001a;
    margin-bottom: 30px;
}
.m4_m3_m5 .info .case{
    width: 100%;
    padding: 30px 0;
}
.m4_m3_m5 .info .title + .case{
    padding: 0 0 30px;
}

.m4_m3_m5 .info > div:not(.title) ~ div{
    border-top: 1px solid #d8d8d8;
}
.m4_m3_m5 .info > div:last-of-type{
    border-bottom: 1px solid #d8d8d8;
}


.m4_m3_m5 .info .case h2{
    font: 19px/1.4em "나눔바른고딕";
    color: #000;
}
.m4_m3_m5 .info .case h2:after{
    content: "";
    display: block;
    width: 48px;
    height: 1px;
    background: #8f816a;
    margin-top: 11px;
    margin-bottom: 30px;
}

.m4_m3_m5 .info .case p{
    font: 17px/1.4em "나눔바른고딕";
    color: #000;
}
.m4_m3_m5 .info .case p.brown{
    color: #6e5d42;
}
.m4_m3_m5 .info .case p.red{
    color: #65001a;
}
.m4_m3_m5 .info .case p.red a{
    display: flex;
    color: #775250;
}

.m4_m3_m5 .info .case p.grey{
    color: #535353;
}
.m4_m3_m5 .info .case p.box{
    color: #000;
    background: #eaeaea;
    padding: 13px 14px;
    margin: 15px 0px 17px;
}





.m4_m3_m5 .info .case p ~ p{
    margin-top: 6px;
}
.m4_m3_m5 .info .case:has(>a) > p:last-of-type{
    margin-bottom: 17px;
}
.m4_m3_m5 .tip a,
.m4_m3_m5 .info .case > a{
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-width: 224px;
    font: bold 15px/1.4em "나눔바른고딕";
    color: #fff;
    padding: 9px 15px;
    background: #830020;
}
.m4_m3_m5 .tip a:after,
.m4_m3_m5 .info .case > a:after{
    content: "";
    display: inline-block;
    min-width: 14px;
    height: 14px;
    background: url(../../../../images/iosf/ko/content/m4_m3_m5/down_14x14.png)no-repeat center;
    margin-left: 13px;
}



.m4_m3_m5 .info .detail p.point{
    display: flex;
    align-items: flex-start;
    font: 17px/1.4em "나눔바른고딕";
    color: #000;
}
.m4_m3_m5 .info .detail p.point:before{
    content: "";
    display: inline-block;
    min-width: 6px;
    height: 6px;
    border-radius: 6px;
    background: #8f816a;
    margin-right: 10px;
    margin-left: 3px;
    margin-top: 8px;
}
.m4_m3_m5 .info .detail table p.point:before{
    background: #af8f8d;
}

.m4_m3_m5 .info .detail p ~ p{
    margin-top: 8px;
}
.m4_m3_m5 .info .detail p p{
    margin-top: 0px;
}

/* 테이블 */
/* 테이블 */
/* 테이블 */
/* 테이블 */
.m4_m3_m5 .info .detail table{
    width: 100%;
    border: 1px solid #d8d8d8;
    border-top: 2px solid #830020;
    border-bottom: 1px solid #222222;
}
.m4_m3_m5 .info .detail table th,
.m4_m3_m5 .info .detail table td{
    font: 17px/1.4em "나눔바른고딕";
    color: #000;
    padding: 13px 10px;
}

.m4_m3_m5 .info .detail table th{
    color: #6e5d42;
    border-bottom: 1px solid #9f9f9f;
}
.m4_m3_m5 .info .detail table td{
    text-align: center;
    border-bottom: 1px solid #d8d8d8;
}
.m4_m3_m5 .info .detail table td.left{
    text-align: left;
}

.m4_m3_m5 .info .detail table td[rowspan].grey{
    background: #f6f6f6;
}
.m4_m3_m5 .info .detail table td[rowspan].grey2{
    background: #f9f7f2;
}

.m4_m3_m5 .info .detail table th ~ th,
.m4_m3_m5 .info .detail table td[rowspan] ~ td,
.m4_m3_m5 .info .detail table td[rowspan]:not(:has([class])),
.m4_m3_m5 .info .detail table tr:not(:has(td[rowspan])) td{
    letter-spacing: -0.3px;
    border-left: 1px solid #d8d8d8;
}
.m4_m3_m5 .info .detail table tr td.last,
.m4_m3_m5 .info .detail table tr:last-of-type td{
    border-bottom: 0px solid #d8d8d8;
}


.m4_m3_m5 .info .case table p.red{
    margin: 0;
}
.m4_m3_m5 .info .case table p a:before{
    content: "";
    display: inline-block;
    min-width: 17px;
    height: 0;
    background: transparent;
}


.m4_m3_m5 .info .case .detail + p{
    margin-top: 20px;
}
/* 테이블 */
/* 테이블 */
/* 테이블 */
/* 테이블 */


/* 리스트 끄기 */
article.off{
    display: none;
}

/* ----------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------- */

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

    .m4_m3_m5 article.tab div button{
        font-size: 17px;
    }

    .m4_m3_m5 article.tip .btn{
        flex-direction: column;
    }
    .m4_m3_m5 article.tip .btn a ~ a{
        margin-left: 0;
        margin-top: 10px;
    }
    .m4_m3_m5 article.tip .btn a {
        width: auto;
        min-width: 230px;
        margin-right: auto;
    }

    .m4_m3_m5 article .title p{
        font-size: 21px;
    }
    .m4_m3_m5 article .title:before{
        height: 20px;
        margin-top: 3px;
    }
    .m4_m3_m5 article ~ article{
        margin-top: 40px;
    }

    .m4_m3_m5 .info .detail table th:nth-of-type(1){
        min-width: 83px;
    }
    .m4_m3_m5 .info .detail table th:nth-of-type(2){
        min-width: 92px;
    }
    .m4_m3_m5 .info .detail table th:nth-of-type(3){
        min-width: 92px;
    }
    .m4_m3_m5 .info .detail table th:nth-of-type(4){
        min-width: 96px;
    }

}

@media screen and (min-width: 640px) {
    .m4_m3_m5 .info .detail .mask{
        display: none;
    }
}
@media screen and (max-width: 640px) {

    .m4_m3_m5 .info .detail > div{
        position: relative;
        overflow: auto;
    }

    .m4_m3_m5 .info .detail > div table{
        width: 640px;
    }

    .m4_m3_m5 .info .detail .mask{
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0.5);
    }
    .m4_m3_m5 .info .detail .mask p{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50% , -50%);
        width: 140px;
        height: 120px;
        text-align: center;
        padding: 63px 10px 20px;
        border-radius: 5px;
        font: 15px/1.4em "나눔바른고딕";
        color: #fff;
        background: rgba(0,0,0,0.8);
    }
    .m4_m3_m5 .info .detail .mask p:before{
        position: absolute;
        content: "";
        display: block;
        width: 46px;
        height: 46px;
        top: 13px;
        left: 50%;
        transform: translateX(-50%);
        background: url(../../../../images/iosf/ko/content/m4_m3_m5/mouse_white_46x46.png)no-repeat center;
    }

}


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

    .m4_m3_m5{
        padding: 20px 0;
    }

}