/* sub_header */
#header a.logo p {
    color: #111;
}

#header ul.main_menu>li a {
    color: #111;
}

.user i {
    color: #111;
}

#header.on .user i {
    color: #fff;
}

#header .st_icon span {
    background-color: #111;
}

#header.on .st_icon span {
    background-color: #fff;
}

/* sub_intro */
#sub_intro {
    margin-top: 160px;
    padding: 25px 0;

}

.sub_title {
    gap: 10px 0;
}

.sub_nav {
    margin-top: 75px;
    gap: 0 4vw;
}

#sub_intro .sub_content {
    display: flex;

}

#sub_intro .left_menu {
    width: 20%;
}

#sub_intro .left_menu li {
    margin-bottom: 5px;
    cursor: pointer;
}

#sub_intro .left_menu li.about_sub {
    color: #666666;
}

#sub_intro .right_content {
    width: 80%;
}

#sub_intro .txt_logo {
    display: flex;
    justify-content: flex-end;
}

/* sub1_1 */
.sub1_1_intro .right_content .content {
    display: flex;
}

.sub1_1_intro .right_content .content .left {
    width: 65%;
    color: #111111;
    line-height: 35px;
    box-sizing: border-box;
    padding-right: 20px;
}

.sub1_1_intro .right_content .content .left span {
    color: #1E2B74;
    background: linear-gradient(transparent 40%, rgba(30, 40, 116, 0.1) 40%);
}

.sub1_1_intro .right_content .content .right {
    width: 35%;
}

/* sub1_2 */
.sub1_2_intro .right_content .content {
    display: flex;
}

.sub1_2_intro .left {
    width: 40%;
}

.sub1_2_intro .left img {
    width: 100%;
}

.sub1_2_intro .left .img_title {
    width: 100%;
    display: flex;
    padding: 15px 0 35px;
    align-items: center;
}

.sub1_2_intro .left .img_title .img_text {
    width: 100%;
}

.sub1_2_intro .left .img_title .img_line {
    width: 100%;
    height: 1px;
    background-color: #111;
}

.sub1_2_intro .left .img_description {
    color: #444444;
    line-height: 25px;
}

.sub1_2_intro .right {
    padding-left: 50px;
    width: 60%;
    box-sizing: border-box;
}

.sub1_2_intro .right .description {
    line-height: 30px;
}

.sub1_2_intro .right .description span {
    background: linear-gradient(transparent 40%, rgba(30, 40, 116, 0.1) 40%);
}

/* sub1_3 */
.sub1_3_intro .right .description {
    border-left: 1px solid #CCCCCC;
    padding: 0 0 0 50px;
}

.sub1_3_intro .right .description .text {
    margin: 20px 0 70px;
    line-height: 30px;
}

.sub1_3_intro .right .description .description_txt {}

.sub1_3_intro .right .description span,
.sub1_3_intro .right .description .description_title {
    position: relative;
}

.sub1_3_intro .right .description span::before {
    position: absolute;
    content: "";
    width: 11px;
    height: 11px;
    background-color: #CCCCCC;
    left: -55.5px;
    top: 50%;
    border-radius: 50px;
    transform: translate(0, -50%);
}

.sub1_3_intro .right .description .description_title::before {
    content: "";
    position: absolute;
    width: 27px;
    height: 27px;
    background-color: rgba(30, 43, 116, 0.3);
    border-radius: 50%;
    left: -63.5px;
    top: -8px;
}

.sub1_3_intro .right .description .description_title::after {
    content: "";
    position: absolute;
    width: 11px;
    height: 11px;
    background-color: #1E2B74;
    border-radius: 50%;
    left: -55.5px;
}

/* sub1_4 */
.sub1_4_intro.sub3_1_intro .map .map_txt {
    margin: 25px 0;
}

.sub1_4_intro.sub3_1_intro .map {
    margin: 0;
}

.sub1_4_intro .map {
    margin: 0 0 60px;
    color: #444444;
    line-height: 35px;
}

.sub1_4_intro .map .root_daum_roughmap .wrap_controllers,
.sub1_4_intro .map .root_daum_roughmap .cont {
    display: none;
}

.sub1_4_intro .infomation {
    padding-top: 50px;
    border-top: 1px solid #D7D7D7;
}

.sub1_4_intro .infomation .box {
    display: flex;
    align-items: center;
    gap: 15px;
    line-height: 25px;
}

.sub1_4_intro .infomation .list {
    display: flex;
    align-items: center;
    gap: 150px;
    margin-bottom: 100px;
}

/* sub2_1 */
.sub2_1_intro .right_content .select_menu {
    display: flex;
    color: #999999;
    gap: 15px;
    margin-bottom: 35px;
}

.sub2_1_intro .right_content .select_menu .menu.menu1 {
    border: none;
}

.sub2_1_intro .right_content .select_menu .menu {
    padding: 0 15px 0 0;
    border-right: 1px solid #D7D7D7;
}

.sub2_1_intro .right_content .select_menu .on {
    color: #111;
}

.sub2_1_intro .content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 80px 25px;
    width: 100%;
}

.sub2_1_intro .content img {
    width: 100%;
}

.sub2_1_intro .content p {
    margin: 20px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#sub_intro .right_content .box {
    min-width: 0;
    color: #111;
}

#sub_intro .right_content .paging {
    margin: 80px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

#sub_intro .right_content .paging span {
    /* padding: 8px 14px; */
    /* background-color: #F5F5F5; */
    /* border-radius: 50px; */
}

#sub_intro .right_content .paging .on {
    padding: 8px 14px;
    color: #FFFFFF;
    background-color: #444444;
    border-radius: 50px;
    font-family: 'Pretendard-Bold', sans-serif;
}

/* sub3_1 */
.sub3_1_intro .map .map_txt {
    padding: 25px 0;
}

/* sub4_1_d, sub3_1_d*/
.sub4_1_d_intro .main_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 40px;
    border-bottom: 1px solid #D7D7D7;
}

.sub4_1_d_intro .right_content .content1 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sub4_1_d_intro .right_content .content1 img {
    max-width: 100%;
}

.sub4_1_d_intro .right_content .content1 .description {
    padding: 40px 0 60px;
    border-bottom: 1px solid #D7D7D7;
    width: 100%;
}

.sub4_1_d_intro .right_content .btn {
    margin: 40px 0 125px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sub4_1_d_intro .right_content .btn .list_btn {
    padding: 15px 45px;
    background-color: #999999;
    color: #FFFFFF;
}

.sub2_1_d_intro .right_content .content1.content2 img {
    margin: 0 0 40px;
}

.sub2_1_d_intro .right_content .content1.content2 .description {
    margin: 40px 0 0;
    border-top: 1px solid #D7D7D7;
    line-height: 35px;
}

.sub2_1_d_intro .right_content .content1.content2 .description span {
    line-height: 60px;
}

/* mobile */
@media screen and (max-width: 767px) {

    /* sub_intro */
    .sub_intro {
        padding-top: 180px;
    }

    #sub_intro img {
        width: 100%;
    }

    .sub_nav {
        margin-top: 35px;
    }

    .sub2_1_intro .right_content .content,
    .sub1_2_intro .right_content .content,
    .sub1_1_intro .right_content .content {
        flex-direction: column;
    }

    /* sub1_1 */

    .sub1_1_intro .right_content .content .left {
        width: 100%;
        line-height: 25px;
        padding: 0;
    }

    .sub1_1_intro .right_content .content .right {
        width: 100%;
        margin: 20px 0 0;
    }

    /* sub1_2 */
    .sub1_2_intro .right,
    .sub1_2_intro .left {
        width: 100%;
        padding: 0;
    }

    .sub1_2_intro .left .img_title {
        padding: 15px 0;
    }

    .sub1_2_intro .right .description {
        margin: 20px 0 0;
        line-height: 22.5px;
    }

    /* sub1_3 */

    .sub1_3_intro .right .description .text {
        margin: 15px 0 25px;
    }

    /* sub1_4 */
    #sub_intro.sub1_4_intro .infomation img {
        width: 50px;
    }

    .sub1_4_intro .infomation .list {
        display: flex;
        flex-direction: column;
        gap: 25px;
        align-items: flex-start;

    }

    .sub1_4_intro .infomation .list {
        margin: 0 0 50px;
    }

    /* sub2_1 */
    .sub2_1_intro .right_content .select_menu {
        flex-direction: column;
        border: none;
    }

    .sub2_1_intro .content {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* sub3_1 */
    .sub1_4_intro.sub3_1_intro .map .map_txt {
        line-height: 25px;
    }
}

/* tablet */
@media screen and (min-width: 768px) and (max-width: 1024px) {

    /* sub_intro */
    .sub_intro {
        padding-top: 200px;
    }

    .sub_nav {
        margin-top: 40px;
    }

    /* sub1_1 */
    .sub1_1_intro .right_content .content {
        flex-direction: column;
    }

}