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


.sitemap {
    padding: 30px 0;
    background: #fff;
}
.sitemap > div{
    max-width: 1100px;
    margin: auto;
}

.sitemap article ~ article{
    margin-top: 30px;
}

.sitemap article:first-of-type{
    margin-top: 0;
}



/* ------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------- */
/* 서브 타이틀 (bar 포함) */

.sitemap .sub-title {
    position: relative;
    display: flex;
    margin-top: 50px;
}
.sitemap .sub-title h1 {
    font: 23px/1.3em "나눔바른고딕";
    display: flex;
    align-items: flex-start;
    color: #000;
}
.sitemap .sub-title h1.bar:before {
    content: "";
    display: inline-block;
    min-width: 3px;
    height: 22px;
    background: url(../../../../images/iosf/ko/content/index/img_bar_3x22.png)no-repeat center;
    background-size: 3px 22px;
    margin-right: 10px;
    margin-top: 2px;
}
.sitemap .sub-title .btn{
    position: absolute;
    right: 0;
}


/* 서브 타이틀 (bar 포함) */
/* ----------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------- */
.sitemap .index{
    padding: 30px 0 0;
    border-top: 1px solid #222222;
    border-bottom: 1px solid #d8d8d8;
}

.sitemap .index .menu-sitemap{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.sitemap .index .menu-sitemap dt{
    width: calc((100% / 4) - (60px / 4));
    height: fit-content;
}
.sitemap .index .menu-sitemap dt ~ dt{
    margin-left: 20px;
}
.sitemap .index .menu-sitemap dt:nth-child(4n + 1){
    margin-left: 0;
}

.sitemap .index .menu-sitemap dt a{
    display: flex;
    width: 100%;
    font: 19px/1.3em "나눔바른고딕";
    color: #000;
    background: #f4f4f4;
    padding: 16px 15px;
}
.sitemap .index .menu-sitemap dt{
    margin-bottom: 30px;
}

.sitemap .index .menu-sitemap dt:hover a:first-of-type{
    background: #8f816a;
    color: #fff;
    transition: all 0.2s;
}

.sitemap .index .menu-sitemap dt a ~ a{
    display: flex;
    align-items: flex-start;
    font: 17px/1.3em "나눔바른고딕";
    color: #313131;
    background: transparent;
    padding: 13px 15px;
    border-bottom: 1px solid #e3e3e3;
}
.sitemap .index .menu-sitemap dt a ~ a:hover{
    color: #830020;
    background: #fbfbfb;
}

.sitemap .index .menu-sitemap dt a ~ a:before{
    content: "";
    display: inline-block;
    min-width: 6px;
    height: 6px;
    border-radius: 10px;
    background: #9f9f9f;
    margin-right: 8px;
    margin-top: 7px;
}
.sitemap .index .menu-sitemap dt a ~ a:hover:before{
    background: #000000;
}
.sitemap .index .menu-sitemap dt a.link:after{
    content: "";
    display: inline-block;
    min-width: 16px;
    height: 16px;
    background: url(../../../../images/iosf/ko/content/sitemap/img_link_grey_16x16.png)no-repeat center;
    background-size: 16px 16px;
    margin-left: 9px;
    margin-top: 2px;
}

.sitemap .index .menu-sitemap dt a.link:hover:after{
    background: url(../../../../images/iosf/ko/content/sitemap/img_link_red_16x16.png)no-repeat center;
}

.sitemap .index .menu-sitemap dt a:first-of-type.link:after{
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    background: url(../../../../images/iosf/ko/content/sitemap/img_link_black_18x18.png)no-repeat center;
    background-size: 18px 18px;
}
.sitemap .index .menu-sitemap dt:hover a:first-of-type.link:after{
    background: url(../../../../images/iosf/ko/content/sitemap/img_link_white_18x18.png)no-repeat center;
    transition: all 0.2s;
}




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



@media screen and (max-width: 1140px) {
    .sitemap.thumnail>div {
        /* padding: 0 10px; */
    }


}


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

    /* ------------------------------------------ */
    /* sitemap */

    .sitemap .index .menu-sitemap dt{
        width: calc((100% / 3) - (60px / 3));
    }
    
    .sitemap .index .menu-sitemap dt:nth-child(n):not(:first-of-type) {
        margin-left: 30px;
    }
    .sitemap .index .menu-sitemap dt:nth-child(3n + 1):not(:first-of-type) {
        margin-left: 0;
    }
        
    
    /* sitemap */
    /* -------------------------------------------- */

}


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

    /* ------------------------------------------ */
    /* sitemap */

    .sitemap .index .menu-sitemap dt{
        width: calc((100% / 2) - (30px / 2));
    }
    
    .sitemap .index .menu-sitemap dt:nth-child(n):not(:first-of-type) {
        margin-left: 30px;
    }
    .sitemap .index .menu-sitemap dt:nth-child(2n + 1):not(:first-of-type) {
        margin-left: 0;
    }
        
    .sitemap .sub-title{
        margin-top: 40px;
    }

    .sitemap .sub-title h1{
        font-size: 21px;
    }
    .sitemap .sub-title h1.bar:before{
        height: 20px;
    }

    /* sitemap */
    /* -------------------------------------------- */

}

@media screen and (max-width: 640px) {
    .sitemap {
        padding: 20px 0;
    }
    .sitemap article ~ article{
        margin-top: 20px;
    }
    .sitemap .index div section:nth-of-type(n) ~ section,
    .sitemap .index.lab div section:nth-of-type(n) ~ section{
        margin-top: 20px;
    }

    /* ------------------------------------------ */
    /* sitemap */

    .sitemap .index .menu-sitemap dt{
        width: calc((100%));
    }
    
    .sitemap .index .menu-sitemap dt:nth-child(n):not(:first-of-type) {
        margin-left: 0px;
    }
}

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