@charset "utf-8";

/*공통*/
img {max-width: 100%;}
body h1, h2, h3, h4, h5, h6, p, span, li, a, b, div {word-break: keep-all;}
.admin-btn a {
    font-size: 20px;
    color: #fff;
}
.more-btn a {
    background: #003e87;
    width: auto;
    min-width: 220px;
    height: 60px;
    line-height: 60px;
    border-radius: 60px;
    display: inline-block;
    transition: all .3s;
    text-align: center;
}
.more-btn a span {
    display: flex;
    align-items: center;
    justify-content: center;
}
.more-btn a b {
    font-size: 18px;
    color: #fff;
    margin-right: 15px;
    transition: all .3s;
}
.more-btn a img {transition: all .3s;}
.more-btn a:hover b {transform: translateX(-8px);}
.more-btn a:hover img {transform: translateX(8px);}

.desc {
    font-size: 18px;
    text-align: justify;
}
.desc .img {
    float: right;
    margin-left: 60px;
    margin-bottom: 50px;
}
.blue-txt {
    font-size: 24px;
    font-weight: bold;
    color: #003e87;
}
.list-wrap li {
    margin-bottom: 2px;
    display: flex;
    align-items: start;
}
.list-wrap li::before {
    content: "";
    background: #003e87;
    width: 5px;
    height: 5px;
    display: inline-block;
    margin-top: 11px;
}
.list-wrap li > div {
    width: calc(100% - 5px);
    padding-left: 7px;
    font-size: 18px;
}
.table-wrap table {
    width: 100%;
    font-size: 18px;
    border-collapse: collapse;
}
.table-wrap table th {
    background: #003e87;
    color: #fff;
    padding: 15px;
    border: 1px solid rgba(170,170,170,0.3);
    vertical-align: top;
    word-break: keep-all;
}
.table-wrap table td {
    padding: 15px 30px;
    border: 1px solid rgba(170,170,170,0.3);
    word-break: keep-all;
}
.slick-arrow {
    width: 60px;
    height: 60px;
    background: rgba(0,0,0,0.7);
    border: none;
}

.sub {padding-top: 120px;}
.sub section {
    position: relative;
    padding-bottom: 150px;
}
.sub section:last-child {padding-bottom: 0;}
.sub .title {margin-bottom: 40px;}
.sub .title h3 {
    font-size: 36px;
    font-weight: bold;
}
.sub .title h4 {
    display: flex;
    align-items: start;
}
.sub .title h4::before {
    content: "";
    background: #003e87;
    width: 5px;
    height: 25px;
    display: inline-block;
    margin-top: 9px;
}
.sub .title h4 b {
    font-size: 30px;
    margin-left: 12px;
    color: #003e87;
}
.sub .content h5 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}
.sub .sign {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 35px;
}
.sub .sign img {width: 128px;}
.sub .sign b {
    font-size: 18px;
    margin-left: 12px;
}
.sub .sign b span {
    font-weight: normal;
    color: #777;
    margin-left: 8px;
}
.sub .campaign {
    display: flex;
    align-items: start;
    margin-top: 50px;
}
.sub .campaign b {
    font-size: 18px;
    color: #003e87;
    margin-left: 10px;
}
.sub-category {
    transition: all .3s;
    position: relative;
    z-index: 8;
}
.sub-category-top {margin-top: -115px;}
.sub-category-top ul {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background: #003e87;
}
.sub-category-top ul li a {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
}
.sub-category-top-m {display: none;}

.sub-category-left {
    width: 200px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    margin-top: -120px;
    position: relative;
    z-index: 1;
}
.sub-category-left li {border-bottom: 1px solid #ddd;}
.sub-category-left li a {
    text-align: center;
    height: 70px;
    line-height: 70px;
    display: block;
    font-size: 18px;
    font-weight: 500;
    transition: all .3s;
}
.sub-category-left li a:hover {color: #003e87;}
.sub-category-left li.active a {
    background: #003e87;
    color: #fff;
}
.sub-category-left-m {display: none;}

.sub-category.fixed {
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    background: #003e87;
    z-index: 5;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.sub-category.fixed .sub-category-top {margin: 0;}

.column-layout .sub-category.fixed {
    top: 230px;
    left: calc((100% - 1400px)/2);
    z-index: 8;
    background: none;
    box-shadow: none;
    width: auto;
}
.column-layout .sub-category.fixed + .sub-right {padding-left: 280px;}

.sub-right {
    width: calc(100% - 200px);
    padding-top: 0;
    padding-left: 80px;
}
.sub-tab {
    display: flex;
    margin-bottom: 80px;
}
.sub-tab li a {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    background: #f8f8f8;
    transition: all .3s;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 60px;
    padding: 10px;
}
.sub-tab li a:hover,
.sub-tab li.active a {
    background: #303439;
    color: #fff;
}
.sub .detail-desc > div {margin-top: 80px;}
.sub .article-list li {margin-bottom: 10px;}
.sub .article-list li a {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border: 1px solid #ddd;
    padding: 15px 30px;
    transition: all .3s;
}
.sub .article-list li a:hover {border-color: #003e87;}
.sub .article-list li a b {
    font-size: 18px;
    font-weight: 600;
}
.sub .article-list li a span {
    font-size: 15px;
    color: #777;
    font-style: italic;
    margin-left: 10px;
}
.sub .video-list {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -50px;
}
.sub .video-list li {
    margin-right: 50px;
    margin-bottom: 50px;
}
.sub .video-list li a {display: block;}
.sub .video-list li a .img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    aspect-ratio: 535 / 300;
}
.sub .video-list li a p {
    font-size: 18px;
    font-weight: bold;
    margin-top: 25px;
    text-align: center;
}
.sub .board-list {border-top: 2px solid #003e87;}
.sub .board-list li {border-bottom: 1px solid #ddd;}
.sub .board-list li a {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: start;
    padding: 15px 20px;
}
.sub .board-list li a > b {
    font-size: 18px;
    font-weight: 500;
    width: calc(100% - 150px);
    transition: all .3s;
    display: flex;
    align-items: center;
}
.sub .board-list li a .download-btn {
    display: flex;
    align-items: center;
    justify-content: right;
    width: 150px;
}
.sub .board-list li a .download-btn b {
    font-size: 16px;
    color: #003e87;
    margin-right: 8px;
}
.sub .board-list li a:hover > b {color: #003e87;}
.sub .desc {
    display: flex;
    align-items: start;
}
.sub .desc .txt-wrap {
    width: calc(100% - 255px);
    order: 1;
}
.sub .desc .txt-wrap.no-img {width: 100%;}
.sub .desc .img-wrap {
    order: 2;
    width: 255px;
    margin-left: 50px;
}
.sub .desc .img-wrap.no-img {
    width: 0;
    margin-left: 0;
}
.sub .desc table {
    width: 100%;
    font-size: 18px;
    border-collapse: collapse;
}
.sub .desc table td {
    padding: 15px 30px !important;
    border: 1px solid rgba(170, 170, 170, 0.3) !important;
    word-break: keep-all;
}
.sub .desc table td:first-child {
    width: 180px !important;
    height: auto !important;
    background: #003e87 !important;
    color: #fff !important;
    padding: 15px !important;
    border: 1px solid rgba(170, 170, 170, 0.3) !important;
    vertical-align: top;
    word-break: keep-all;
    text-align: center !important;
    font-weight: bold !important;
}
.sub .instructor-list {border-top: 2px solid #003e87;}
.sub .instructor-list li {
    padding: 50px 20px;
    border-bottom: 1px solid #ddd;
    display: flex;
    flex-wrap: wrap;
    align-items: start;
}
.sub .instructor-list li .img {width: 200px;}
.sub .instructor-list li .txt {
    width: calc(100% - 200px);
    padding-top: 5px;
    padding-left: 50px;
}
.sub .instructor-list li .txt .name {
    display: flex;
    align-items: baseline;
    margin-bottom: 15px;
}
.sub .instructor-list li .txt .name b {font-size: 26px;}
.sub .instructor-list li .txt .name span {
    font-size: 18px;
    font-weight: 500;
    margin-left: 8px;
}
.sub .instructor-list li .txt .career-wrap > div {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    font-size: 18px;
}
.sub .instructor-list li .txt .career-wrap > div:last-child {margin-bottom: 0;}
.sub .instructor-list li .txt .career-wrap > div b {
    color: #003e87;
    width: 90px;
}
.sub .instructor-list li .txt .career-wrap > div .desc {width: calc(100% - 90px);}
.sub .textbook-list {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -60px;
}
.sub .textbook-list li {
    width: calc((100% - 90px)/4);
    margin-right: 30px;
    margin-bottom: 60px;
}
.sub .textbook-list li:nth-child(4n) {margin-right: 0;}
.sub .textbook-list li a {display: block;}
.sub .textbook-list li a p {
    font-size: 18px;
    font-weight: 500;
    margin-top: 20px;
    text-align: center;
}
.sub .content-container {
    position: relative;
    overflow: hidden;
}
.sub .content-container .content {
    transition: max-height 0.5s ease-in-out;
    overflow: hidden;
    position: relative;
    max-height: 600px;
}
.sub .content-container .content::after {
    content: "";
    background: linear-gradient(to bottom, transparent, #fff);
    width: 100%;
    height: 80px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
}
.sub .content-container .more-view {
    margin-top: 10px;
    text-align: center;
}
.sub .content-container .more-view button {
    background: none;
    border: none;
    display: inline-block;
}
.sub .content-container .more-view b {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    font-weight: bold;
}
.sub .content-container .more-view span {
    display: inline-block;
    vertical-align: middle;
    background: #003e87;
    width: 26px;
    height: 26px;
    border-radius: 26px;
    position: relative;
    margin-right: 10px;
}
.sub .content-container .more-view span::before {
    content: "";
    background: #fff;
    width: 8px;
    height: 2px;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.sub .content-container .more-view span::after {
    content: "";
    background: #fff;
    width: 2px;
    height: 8px;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.sub .content-container.expanded .content {max-height: 10000px !important;}
.sub .content-container.expanded .content::after,
.sub .content-container.expanded .more-view span::after {content: none;}

@media all and (max-width: 1520px) {
    .column-layout .sub-category.fixed {left: 50px;}
}
@media all and (max-width: 1400px) {
    .column-layout .sub-category.fixed {left: 30px;}
}
@media all and (max-width: 1024px) {
    .column-layout {display: block !important;}

    .sub-category-left {display: none;}
    .sub-category-left-m {
        display: block;
        margin-top: -80px;
        position: relative;
        transition: all .3s;
    }
    .sub-category-left-m .present-menu {
        background: #003e87;
        text-align: center;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        position: relative;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
    }
    .sub-category-left-m .present-menu img {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        transition: all .3s;
    }
    .sub-category-left-m ul {
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        background: #f5f5f5;
        text-align: center;
        max-height: 0;
        overflow: hidden;
        transition: all 0.3s; /* 애니메이션 효과 */
    }
    .sub-category-left-m ul li a {
        font-size: 16px;
        font-weight: 600;
        padding: 8px;
        display: block;
    }
    .sub-category-left-m.active .present-menu img {transform: translateY(-50%) rotate(180deg);}
    .sub-category-left-m.active ul {
        max-height: 1000px;
        border-top: 1px solid #ddd;
        padding: 8px 0;
    }

    .column-layout .sub-category.fixed {
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        background: #003e87;
        z-index: 5;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    .sub-category.fixed .sub-category-left-m {
        padding: 0;
        margin: 0;
    }
    .sub-category.fixed .sub-category-left-m.active ul {
        width: 100%;
        left: 0;
    }
    .sub-category.fixed .sub-category-left-m .present-menu img {right: 15px;}
    .sub-right {
        width: 100%;
        padding: 80px 0 0;
    }
    .sub .desc .txt-wrap {width: calc(100% - 180px);}
    .sub .desc .img-wrap {width: 180px;}
    .sub .desc table td:first-child {width: 100px !important;}
}
@media all and (max-width: 991px) {
    .slick-arrow {
        width: 40px;
        height: 40px;
    }
    .sub-category-top {display: none;}
    .sub-category-top-m {
        display: block;
        margin-top: -80px;
        position: relative;
        transition: all .3s;
    }
    .sub-category-top-m .present-menu {
        background: #003e87;
        text-align: center;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        position: relative;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
    }
    .sub-category-top-m .present-menu img {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        transition: all .3s;
    }
    .sub-category-top-m ul {
        position: absolute;
        top: 50px;
        left: 30px;
        width: calc(100% - 60px);
        background: #f5f5f5;
        text-align: center;
        max-height: 0;
        overflow: hidden;
        transition: all 0.3s; /* 애니메이션 효과 */
    }
    .sub-category-top-m ul li a {
        font-size: 16px;
        font-weight: 600;
        padding: 8px;
        display: block;
    }
    .sub-category-top-m.active .present-menu img {transform: translateY(-50%) rotate(180deg);}
    .sub-category-top-m.active ul {
        max-height: 1000px;
        border-top: 1px solid #ddd;
        padding: 8px 0;
    }

    .sub-category.fixed {top: 80px;}
    .sub-category.fixed .sub-category-top-m {
        padding: 0;
        margin: 0;
    }
    .sub-category.fixed .sub-category-top-m.active ul {
        width: 100%;
        left: 0;
    }
    .sub-category.fixed .sub-category-top-m .present-menu img {right: 0;}

}
@media all and (max-width: 767px) {
    .more-btn a {
        height: 45px;
        line-height: 45px;
        min-width: 180px;
    }
    .more-btn a b {
        font-size: 15px;
        margin-right: 10px;
    }
    .slider-controls button {
        width: 40px;
        height: 40px;
    }
    .blue-txt {font-size: 18px;}
    .desc {
        font-size: 15px;
        text-align: left;
    }
    .desc .img {
        float: none;
        margin: 0 auto 20px;
        display: block;
    }
    .list-wrap li > div {font-size: 15px;}
    .table-wrap table {font-size: 15px;}
    .table-wrap table th {padding: 12px;}
    .table-wrap table td {padding: 12px 20px;}
    .sub {padding-top: 40px;}
    .sub section {padding-bottom: 60px;}
    .sub .title {margin-bottom: 20px;}
    .sub .title h3 {font-size: 22px;}
    .sub-category-top-m {margin-top: -40px;}
    .sub-category-top-m ul {
        left: 15px;
        width: calc(100% - 30px);
    }
    .sub-category-left-m {margin-top: -40px;}
    .sub-category.fixed,
    .column-layout .sub-category.fixed {top: 50px;}
    .sub .sign {margin-top: 20px;}
    .sub .sign img {width: 100px;}
    .sub .sign b {font-size: 14px;}
    .sub-tab {margin-bottom: 30px;}
    .sub-tab li a {
        font-size: 15px;
        min-height: 45px;
        line-height: 1.3;
    }
    .sub .title h4::before {
        width: 3px;
        height: 18px;
        margin-top: 5px;
    }
    .sub .title h4 b {
        font-size: 20px;
        margin-left: 8px;
    }
    .sub .content h5 {
        font-size: 18px;
        margin-bottom: 10px;
    }
    .sub .campaign {margin-top: 30px;}
    .sub .campaign img {
        width: 14px;
        margin-top: 2px;
    }
    .sub .campaign b {
        font-size: 15px;
        margin-left: 8px;
    }
    .sub .detail-desc > div {margin-top: 30px;}
    .sub .article-list li a {padding: 10px 15px;}
    .sub .article-list li a b {font-size: 15px;}
    .sub .article-list li a span {
        display: block;
        margin: 0;
        font-size: 13px;
    }
    .sub .video-list li {
        margin-right: 15px;
        margin-bottom: 30px;
    }
    .sub .video-list.two-list li,
    .sub .video-list.three-list li {width: calc((100% - 15px)/2);}
    .sub .video-list.three-list li:nth-child(3n) {margin-right: 15px;}
    .sub .video-list.three-list li:nth-child(2n) {margin-right: 0;}
    .sub .video-list li a p {
        font-size: 15px;
        margin-top: 15px;
    }
    .sub .board-list li a {padding: 12px 0;}
    .sub .board-list li a > b {
        font-size: 15px;
        width: calc(100% - 80px);
    }
    .sub .board-list li a .download-btn {width: 80px;}
    .sub .board-list li a .download-btn b {font-size: 14px;}
    .sub .board-list li a .download-btn img {width: 12px;}
    .sub .desc {flex-wrap: wrap;}
    .sub .desc .img-wrap {
        order: 1;
        width: 100%;
        text-align: center;
        margin-left: 0;
    }
    .sub .desc .txt-wrap {
        width: 100%;
        padding: 20px 0 0;
        order: 2;
    }
    .sub .desc .txt-wrap.no-img {padding-top: 0;}
    .sub .instructor-list li {padding: 20px 0;}
    .sub .instructor-list li .img {
        width: 150px;
        margin: 0 auto;
    }
    .sub .instructor-list li .txt {
        width: 100%;
        padding: 20px 0 0;
    }
    .sub .instructor-list li .txt .name b {font-size: 20px;}
    .sub .instructor-list li .txt .name span {font-size: 14px;}
    .sub .instructor-list li .txt .career-wrap > div {
        font-size: 15px;
        margin-bottom: 15px;
    }
    .sub .instructor-list li .txt .career-wrap > div b {width: 70px;}
    .sub .instructor-list li .txt .career-wrap > div .desc {width: calc(100% - 70px);}
}

/*메인*/
.main > section {
    position: relative;
    padding-bottom: 200px;
}
.main > section:last-child {padding-bottom: 50px;}
.main .banner {padding: 0 50px;}
.main .banner .inner {position: relative;}
.main .banner-slider-m,
.main .banner .slider-controls-m {display: none;}
.main .banner-slider li a {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    display: block;
}
.main .banner .slider-controls {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    z-index: 1;
}
.main .banner .slider-controls .prev-btn,
.main .banner .slider-controls-m .prev-btn {border-right: 1px solid rgba(255,255,255,0.3);}
.main .banner .admin-btn {
    position: absolute;
    left: 30px;
    bottom: 30px;
}
.main .about {
    text-align: center;
    padding-top: 150px;
}
.main .about .txt {
    position: relative;
    z-index: 1;
}
.main .about strong {
    display: block;
    line-height: 1;
}
.main .about p {
    font-size: 24px;
    margin: 50px 0 80px;
}
.main .about .object {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
}
.main .news .title {
    text-align: center;
    margin-bottom: 60px;
}
.main .news .title h2 {
    position: relative;
    display: inline-block;
}
.main .news .title h2::after {
    content: "";
    background: url(/img/assets/symbol.svg) center / cover no-repeat;
    width: 36px;
    height: 55px;
    display: inline-block;
    margin-left: 12px;
}
.main .news .title h2 b {font-size: 45px;}
.main .news-list {
    display: flex;
    flex-wrap: wrap;
}
.main .news-list li {
    width: calc((100% - 150px)/4);
    margin-right: 50px;
}
.main .news-list li:last-child {margin-right: 0;}
.main .news-list li a {transition: all .3s;}
.main .news-list li .img {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 312px;
    position: relative;
}
.main .news-list li .img .label {
    position: absolute;
    left: 0;
    bottom: -20px;
    width: 80px;
    height: 40px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    line-height: 40px;
    text-align: center;
    background: #ed1c27;
}
.main .news-list li .txt {margin-top: 40px;}
.main .news-list li .txt .subject {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
}
.main .news-list li .txt .date {
    font-size: 14px;
    font-weight: 500;
    color: #888;
}
.main .news-list li a:hover .txt .subject {text-decoration: underline;}
.main .quick ul {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -30px;
}
.main .quick ul li {
    width: calc((100% - 30px)/2);
    margin-right: 30px;
    margin-bottom: 30px;
    border: 1px solid #ccc;
    padding: 60px 50px;
    min-height: 300px;
    position: relative;
    transition: all .3s;
}
.main .quick ul li:nth-child(2n) {margin-right: 0;}
.main .quick ul li h3 {
    font-size: 30px;
    font-weight: 600;
}
.main .quick ul li p {
    font-size: 18px;
    color: #888;
    margin: 15px 0 30px;
}
.main .quick ul li .more-btn a {
    min-width: 180px;
    height: 50px;
    line-height: 50px;
}
.main .quick ul li .ico {
    position: absolute;
    top: 50px;
    right: 50px;
}
.main .quick ul li:hover {border-color: #003e87;}
.main .site .container {position: relative;}
.main .site-slider {
    max-width: 1200px;
    margin: 0 auto;
}
.main .site-slider li a {
    display: flex;
    align-items: center;
    justify-content: center;
}
.main .site-slider li a img {
    max-width: 180px;
    max-height: 50px;
}
.main .site .slider-controls button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.main .site .slider-controls .prev-btn {left: 0;}
.main .site .slider-controls .next-btn {right: 0;}

@media all and (max-width: 1400px) {
    .main .banner {padding: 0 30px;}
    .main .site .slider-controls .prev-btn {left: 30px;}
    .main .site .slider-controls .next-btn {right: 30px;}
}
@media all and (max-width: 1024px) {
    .main .about .object {
        right: -100px;
        opacity: 0.6;
    }
    .main .news-list li {
        width: calc((100% - 90px)/4);
        margin-right: 30px;
    }
    .main .quick ul li {
        padding: 50px 40px;
        min-height: auto;
    }
    .main .quick ul li .ico {
        top: 30px;
        right: 30px;
        height: 60px;
    }
    .main .site-slider {padding: 0 100px;}
    .main .site-slider li a img {
        max-width: 150px;
        max-height: 42px;
    }
}
@media all and (max-width: 991px) {
    .main .banner-slider,
    .main .banner .slider-controls {display: none;}
    .main .banner-slider-m {display: block;}
    .main .banner .slider-controls-m {
        position: absolute;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        z-index: 1;
    }
    .main .news-list {margin-bottom: -50px;}
    .main .news-list li {
        width: calc((100% - 30px)/2);
        margin-bottom: 50px;
    }
    .main .news-list li:nth-child(2n) {margin-right: 0;}
    .main .quick ul li {
        width: 100%;
        margin-right: 0;
        padding: 40px;
    }
}
@media all and (max-width: 767px) {
    .main > section {padding-bottom: 80px;}
    .main .news .title {margin-bottom: 30px;}
    .main .news .title h2 b {font-size: 30px;}
    .main .news .title h2::after {
        width: 28px;
        height: 42px;
        margin-left: 8px;
    }
    .main .news-list {margin-bottom: -30px;}
    .main .news-list li {
        width: calc((100% - 15px)/2);
        margin-right: 15px;
        margin-bottom: 30px;
    }
    .main .news-list li .img .label {
        font-size: 13px;
        width: 70px;
        height: 32px;
        line-height: 32px;
        bottom: -16px;
    }
    .main .news-list li .txt {margin-top: 30px;}
    .main .news-list li .txt .subject {
        font-size: 16px;
        margin-bottom: 12px;
    }
    .main .news-list li .txt .date {font-size: 13px;}
    .main .banner {padding: 0 15px;}
    .main .banner .admin-btn {
        left: 10px;
        bottom: 10px;
    }
    .main .about {padding-top: 80px;}
    .main .about strong .visible-m {
        max-width: 250px;
        display: inline-block;
    }
    .main .about p {
        font-size: 18px;
        margin: 30px 0 40px;
    }
    .main .quick ul li {
        padding: 25px;
        margin-bottom: 15px;
    }
    .main .quick ul li h3 {font-size: 20px;}
    .main .quick ul li p {
        font-size: 15px;
        margin: 10px 0 20px;
    }
    .main .quick ul li .more-btn a {
        min-width: 150px;
        height: 40px;
        line-height: 40px;
    }
    .main .quick ul li .ico {
        top: 25px;
        right: 25px;
        height: 45px;
    }
    .main .site-slider {padding: 0;}
    .main .site-slider li a img {
        max-width: 120px;
        max-height: 36px;
    }
    .main .site .slider-controls {display: none;}
}


/*단체 소개*/
.sub-about #intro .content,
.sub-english #intro .content {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
}
.sub-about #intro .content .txt,
.sub-english #intro .content .txt {
    width: calc(100% - 360px);
    padding-right: 80px;
}
.sub-about #intro .content .txt .blue-txt,
.sub-english #intro .content .txt .blue-txt {margin-bottom: 25px;}
.sub-about #intro .content .txt .box {
    background: #f8f8f8;
    padding: 25px 30px;
    margin-top: 20px;
}
.sub-about #intro .content .img,
.sub-english #intro .content .img {width: 360px;}
.sub-about #intro .content .img img {margin-bottom: 10px;}
.sub-about #greeting {padding-bottom: 70px;}
.sub-about #greeting::after {
    content: "";
    background: #f0f4f9;
    width: 100%;
    height: 420px;
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
}
.sub-about #greeting .content {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    position: relative;
    z-index: 1;
}
.sub-about #greeting .content .img {
    position: relative;
    width: 25%;
}
.sub-about #greeting .content .img::after {
    content: "";
    background: #003e87;
    width: 150px;
    height: 150px;
    display: block;
    position: absolute;
    left: -20px;
    bottom: -20px;
}
.sub-about #greeting .content .img img {
    position: relative;
    z-index: 1;
}
.sub-about #greeting .content .txt {
    width: 75%;
    padding-left: 80px;
}
.sub-about #greeting .content .txt .blue-txt {margin: 30px 0 100px;}
.sub-about #organization {padding-top: 150px;}
.sub-about #organization .graphic {
    font-size: 0;
    text-align: center;
}
.sub-about #organization .graphic > div {position: relative;}
.sub-about #organization .graphic .box-div {
    width: 100%;
    max-width: 300px;
    height: 60px;
    line-height: 60px;
    border-radius: 10px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
.sub-about #organization .graphic .circle-div {
    background: #003e87;
    padding: 5px;
    width: 120px;
    height: 120px;
    border-radius: 120px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 30px;
    position: relative;
}
.sub-about #organization .graphic .circle-div::before {
    content: "";
    background: #ccc;
    width: 30px;
    height: 1px;
    display: inline-block;
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
}
.sub-about #organization .graphic .circle-div::after {
    content: "";
    background: #ccc;
    width: 30px;
    height: 1px;
    display: inline-block;
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
}
.sub-about #organization .graphic .circle-div .inner {
    border: 1px solid rgba(255,255,255,0.3);
    width: 100%;
    height: 100%;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sub-about #organization .graphic .circle-div .inner span {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}
.sub-about #organization .graphic .line01 {margin-bottom: 60px;}
.sub-about #organization .graphic .line01::before {
    content: "";
    background: #ccc;
    width: 1px;
    height: 60px;
    display: inline-block;
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
}
.sub-about #organization .graphic .line01::after {
    content: "";
    background: #ccc;
    width: 34.5%;
    height: 1px;
    display: inline-block;
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
}
.sub-about #organization .graphic .line01 .box-div {
    border: 2px solid #003e87;
    color: #003e87;
}
.sub-about #organization .graphic .line01 .box-div::after {
    content: "";
    background: #ccc;
    width: 1px;
    height: 60px;
    display: inline-block;
    position: absolute;
    bottom: -61px;
    left: 50%;
}
.sub-about #organization .graphic .line02 .box-div {
    background: #dbe5f1;
    display: block;
    margin: 0 auto 30px;
}
.sub-about #organization .graphic .line02 .box-div::after {
    content: "";
    background: #ccc;
    width: 1px;
    height: 30px;
    display: inline-block;
    position: absolute;
    bottom: -30px;
    left: 50%;
}
.sub-about #organization .graphic .line02 .box-div:last-child {margin-bottom: 60px;}
.sub-about #organization .graphic .line03::before {
    content: "";
    background: #ccc;
    width: 70.5%;
    height: 1px;
    display: inline-block;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
}
.sub-about #organization .graphic .line03 .box-div {
    width: calc((100% - 90px)/4);
    margin-right: 30px;
    background: #eee;
}
.sub-about #organization .graphic .line03 .box-div:last-child {margin-right: 0;}
.sub-about #organization .graphic .line03 .box-div::before {
    content: "";
    background: #ccc;
    width: 1px;
    height: 30px;
    display: inline-block;
    position: absolute;
    top: -30px;
    left: 50%;
}
.sub-about #together .together-list,
.sub-english #members .together-list {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    margin: 80px 0 -100px;
}
.sub-about #together .together-list > li,
.sub-english #members .together-list > li {
    width: 33.33%;
    padding-right: 50px;
    margin-bottom: 100px;
}
.sub-about #together .together-list > li .txt,
.sub-english #members .together-list > li .txt {margin-top: 25px;}
.sub-about #together .together-list > li .txt .name,
.sub-english #members .together-list > li .txt .name {
    display: flex;
    align-items: baseline;
    margin-bottom: 15px;
}
.sub-about #together .together-list > li .txt .name b {font-size: 30px;}
.sub-about #together .together-list > li .txt .name span,
.sub-english #members .together-list > li .txt .name span {
    font-size: 18px;
    color: #003e87;
    font-weight: 600;
    padding-left: 12px;
}
.sub-about #document {padding-top: 100px;}
.sub-about #document::after {
    content: "";
    background: url(/img/assets/about_bg_01.jpg) center / cover no-repeat;
    width: 100%;
    height: 400px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
.sub-about #document .container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: start;
}
.sub-about #document .title {
    width: 28.5%;
    padding-top: 30px;
    padding-right: 50px;
    color: #fff;
}
.sub-about #document .content {
    width: 71.5%;
    display: flex;
}
.sub-about #document .content img {
    width: calc((100% - 40px)/3);
    margin-right: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.sub-about #document .content img:last-child {margin-right: 0;}
.sub-about #ci .content,
.sub-english #symbol .content {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
}
.sub-about #ci .content .img,
.sub-english #symbol .content .img {
    width: 24%;
    text-align: center;
}
.sub-about #ci .content .txt,
.sub-english #symbol .content .txt {
    width: 76%;
    padding-left: 80px;
}
.sub-about #ci .content .txt > ul,
.sub-english #symbol .content .txt > ul {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -50px;
}
.sub-about #ci .content .txt > ul > li,
.sub-english #symbol .content .txt > ul > li {
    width: calc((100% - 50px)/2);
    margin-right: 50px;
    margin-bottom: 50px;
}
.sub-about #ci .content .txt > ul > li:last-child,
.sub-english #symbol .content .txt > ul > li:last-child {width: 100%;}
.sub-about #ci .content .txt > ul > li:nth-child(2n),
.sub-english #symbol .content .txt > ul > li:nth-child(2n),
.sub-about #ci .content .txt > ul > li:last-child,
.sub-english #symbol .content .txt > ul > li:last-child {margin-right: 0;}
.sub-about #ci .content .txt > ul > li h4,
.sub-english #symbol .content .txt > ul > li h4 {
    font-size: 20px;
    font-weight: bold;
    border-bottom: 2px solid #111;
    padding-bottom: 10px;
    margin-bottom: 25px;
}
.sub-about #ci .content .txt > ul > li .color-wrap > div {
    display: flex;
    align-items: start;
}
.sub-about #ci .content .txt > ul > li .color-wrap > div .color-box {
    width: 30px;
    height: 30px;
}
.sub-about #ci .content .txt > ul > li .color-wrap > div .color-desc {
    width: calc(100% - 30px);
    padding-left: 15px;
}
.sub-about #ci .content .txt > ul > li .color-wrap > div .color-desc span {color: #777;}
.sub-about #ci .content .txt > ul > li .color-wrap > div .color-desc p {display: inline-block;}

.sub-about #ci .content .txt > ul > li:first-child .color-wrap .color-box {background: #0f4c81;}
.sub-about #ci .content .txt > ul > li:nth-child(2) .color-wrap > div {margin-bottom: 10px;}
.sub-about #ci .content .txt > ul > li:nth-child(2) .color-wrap > div:first-child .color-box {background: #003e87;}
.sub-about #ci .content .txt > ul > li:nth-child(2) .color-wrap > div:nth-child(2) .color-box {background: #0084c9;}
.sub-about #ci .content .txt > ul > li:nth-child(2) .color-wrap > div:last-child .color-box {background: #ed1c27;}
.sub-about #ci .content .txt > ul > li:nth-child(2) .color-wrap > div .color-desc b {
    display: inline-block;
    width: 120px;
}
.sub-about #ci .content .txt > ul > li:last-child .list-wrap > li {margin-bottom: 30px;}
.sub-about #ci .content .txt > ul > li:last-child .list-wrap > li:last-child {margin-bottom: 0;}
.sub-about #location .map-wrap {
    width: 100%;
    height: 600px;
    overflow: hidden;
}
.sub-about #location .root_daum_roughmap {
    width: 100% !important;
    height: 100%;
}
.sub-about #location .root_daum_roughmap .wrap_map {height: 100% !important;}
.sub-about #location .box {
    background: #fff;
    padding: 50px 80px 0;
    position: relative;
    z-index: 1;
    margin-top: -150px;
}
.sub-about #location .box .top {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    border-bottom: 1px solid #ddd;
    margin-bottom: 50px;
    padding-bottom: 50px;
}
.sub-about #location .box .top .logo {width: 180px;}
.sub-about #location .box .top > div {
    width: calc(100% - 180px);
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    padding-left: 60px;
}
.sub-about #location .box .top > div > div {
    width: calc((100% - 50px)/2);
    margin-right: 50px;
}
.sub-about #location .box .top > div > div:last-child {margin-right: 0;}
.sub-about #location .box .top > div > div h4 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
}
.sub-about #location .box .bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
}
.sub-about #location .box .bottom > div {}
.sub-about #location .box .bottom > div:first-child {
    width: 33.33%;
    border-right: 1px solid #ddd;
    padding-right: 50px;
}
.sub-about #location .box .bottom > div:last-child {
    width: 66.66%;
    padding-left: 50px;
}
.sub-about #location .box .bottom > div h4 {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}
.sub-about #location .box .bottom > div h4 b {
    font-size: 20px;
    margin-left: 12px;
}
.sub-about #location .box .bottom > div ul li b {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
}
.sub-about #location .box .bottom > div:first-child ul li {margin-bottom: 30px;}
.sub-about #location .box .bottom > div:first-child ul li:last-child {margin-bottom: 0;}
.sub-about #location .box .bottom > div:first-child ul li .station {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.sub-about #location .box .bottom > div:first-child ul li .station span {
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 24px;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    display: inline-block;
}
.sub-about #location .box .bottom > div:first-child ul li .station b {
    font-size: 18px;
    margin: 0;
    margin-left: 7px;
}
.sub-about #location .box .bottom > div:first-child ul li:first-child .station span {background: #ff7f50;}
.sub-about #location .box .bottom > div:first-child ul li:first-child .station b {color: #ff7f50;}
.sub-about #location .box .bottom > div:first-child ul li:last-child .station span {background: #9632cb;}
.sub-about #location .box .bottom > div:first-child ul li:last-child .station b {color: #9632cb;}
.sub-about #location .box .bottom > div:last-child ul {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -30px;
}
.sub-about #location .box .bottom > div:last-child ul li {
    width: 50%;
    padding-right: 30px;
    margin-bottom: 30px;
}
@media all and (max-width: 1024px) {
    .sub-about #intro .content .txt, .sub-english #intro .content .txt {
        width: 100%;
        padding: 0 0 80px;
    }
    .sub-about #intro .content .img, .sub-english #intro .content .img {width: 100%;}
    .sub-about #intro .content .img {display: flex;}
    .sub-about #intro .content .img img {
        width: calc((100% - 10px)/2);
        margin-bottom: 0;
        margin-right: 10px;
    }
    .sub-about #intro .content .img img:last-child {margin-right: 0;}
    .sub-about #greeting .content .txt .blue-txt {margin: 30px 0 50px;}
    .sub-about #organization .graphic .box-div {max-width: 250px;}
    .sub-about #document::after {height: 300px;}
    .sub-about #ci .content .txt > ul, .sub-english #symbol .content .txt > ul {margin-bottom: -30px;}
    .sub-about #ci .content .txt > ul > li, .sub-english #symbol .content .txt > ul > li {
        width: 100%;
        margin-right: 0;
    }
    .sub-about #location .box {padding: 50px 50px 0;}
    .sub-about #location .box .top > div {
        width: 100%;
        padding: 30px 0 0;
    }
    .sub-about #location .box .bottom > div:first-child {
        width: 100%;
        border: none;
        padding: 0 0 50px;
    }
    .sub-about #location .box .bottom > div:first-child ul {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: -30px;
    }
    .sub-about #location .box .bottom > div:first-child ul li {
        width: 50%;
        padding-right: 30px;
        margin-bottom: 30px;
    }
    .sub-about #location .box .bottom > div:last-child {
        width: 100%;
        padding: 0;
    }
}
@media all and (max-width: 767px) {
    .sub-about #intro .content .txt, .sub-english #intro .content .txt {padding-bottom: 30px;}
    .sub-about #intro .content .txt .blue-txt, .sub-english #intro .content .txt .blue-txt {margin-bottom: 15px;}
    .sub-about #intro .content .txt .box {padding: 15px 20px;}
    .sub-about #greeting {
        background: #f0f4f9;
        padding: 60px 0;
    }
    .sub-about #greeting::after {content: none;}
    .sub-about #greeting .content .img {
        width: 100%;
        max-width: 200px;
        margin: 0 auto;
    }
    .sub-about #greeting .content .img::after {
        left: inherit;
        bottom: inherit;
        top: -10px;
        right: -10px;
        width: 100px;
        height: 100px;
    }
    .sub-about #greeting .content .txt {
        width: 100%;
        padding: 30px 0 0;
    }
    .sub-about #greeting .content .txt .blue-txt {margin: 0 0 15px;}
    .sub-about #organization {padding-top: 60px;}
    .sub-about #organization .graphic .box-div {
        max-width: 80px;
        height: 50px;
        line-height: 50px;
        font-size: 15px;
    }
    .sub-about #organization .graphic .circle-div {
        width: 80px;
        height: 80px;
        margin: 0 20px;
    }
    .sub-about #organization .graphic .circle-div .inner span {font-size: 18px;}
    .sub-about #organization .graphic .line01 {margin-bottom: 40px;}
    .sub-about #organization .graphic .line02 .box-div {
        max-width: 200px;
        margin-bottom: 20px;
    }
    .sub-about #organization .graphic .line02 .box-div:last-child {margin-bottom: 40px;}
    .sub-about #organization .graphic .line03 .box-div {
        width: calc((100% - 20px)/2);
        max-width: 100%;
        margin-right: 20px;
        margin-bottom: 20px;
    }
    .sub-about #organization .graphic .line03 .box-div:nth-child(2n) {margin-right: 0;}
    .sub-about #organization .graphic .circle-div::before {width: 20px; left: -20px;}
    .sub-about #organization .graphic .circle-div::after {width: 20px; right: -20px;}
    .sub-about #organization .graphic .line01::after {bottom: -20px; width: 60%;}
    .sub-about #organization .graphic .line01 .box-div::after {height: 38px; bottom: -38px;}
    .sub-about #organization .graphic .line02 .box-div::after {height: 20px; bottom: -20px;}
    .sub-about #organization .graphic .line03::before {top: -20px; width: 53%;}
    .sub-about #organization .graphic .line03 .box-div::before {height: 20px; top: -20px;}
    .sub-about #together .together-list, .sub-english #members .together-list {
        margin: 30px 0 -40px;
    }
    .sub-about #together .together-list > li, .sub-english #members .together-list > li {
        width: 100%;
        padding-right: 0;
        margin-bottom: 50px;
    }
    .sub-about #together .together-list > li .img, .sub-english #members .together-list > li .img {text-align: center;}
    .sub-about #together .together-list > li .img img, .sub-english #members .together-list > li .img img {max-width: 200px;}
    .sub-about #together .together-list > li .txt .name b {font-size: 20px;}
    .sub-about #together .together-list > li .txt .name span, .sub-english #members .together-list > li .txt .name span {
        font-size: 14px;
        padding-left: 8px;
    }
    .sub-about #document {padding-top: 60px;}
    .sub-about #document::after {height: 200px;}
    .sub-about #document .title {
        width: 100%;
        padding: 0;
    }
    .sub-about #document .content {width: 100%;}
    .sub-about #document .content img {
        width: calc((100% - 20px)/3);
        margin-right: 10px;
    }
    .sub-about #ci .content .img, .sub-english #symbol .content .img {width: 100%;}
    .sub-about #ci .content .img img, .sub-english #symbol .content .img img {max-width: 200px;}
    .sub-about #ci .content .txt, .sub-english #symbol .content .txt {
        width: 100%;
        padding: 30px 0 0;
    }
    .sub-about #ci .content .txt > ul > li, .sub-english #symbol .content .txt > ul > li {margin-bottom: 30px;}
    .sub-about #ci .content .txt > ul > li h4, .sub-english #symbol .content .txt > ul > li h4 {
        font-size: 18px;
        margin-bottom: 20px;
    }
    .sub-about #ci .content .txt > ul > li .color-wrap > div .color-box {
        width: 24px;
        height: 24px;
    }
    .sub-about #ci .content .txt > ul > li:nth-child(2) .color-wrap > div .color-desc b {width: 100px;}
    .sub-about #ci .content .txt > ul > li:last-child .list-wrap > li {margin-bottom: 10px;}
    .sub-about #location .map-wrap {height: 300px;}
    .sub-about #location .box {
        margin-top: -30px;
        padding: 25px 25px 0;
    }
    .sub-about #location .box .top {
        padding-bottom: 30px;
        margin-bottom: 30px;
    }
    .sub-about #location .box .top > div > div {
        width: 100%;
        margin: 0 0 20px;
    }
    .sub-about #location .box .top > div > div:last-child {margin-bottom: 0;}
    .sub-about #location .box .top > div > div h4 {
        font-size: 18px;
        margin-bottom: 10px;
    }
    .sub-about #location .box .bottom > div h4 {margin-bottom: 20px;}
    .sub-about #location .box .bottom > div h4 img {height: 25px;}
    .sub-about #location .box .bottom > div h4 b {font-size: 18px;}
    .sub-about #location .box .bottom > div ul li b {margin-bottom: 3px;}
    .sub-about #location .box .bottom > div:first-child {padding-bottom: 30px;}
    .sub-about #location .box .bottom > div:first-child ul {margin-bottom: 0;}
    .sub-about #location .box .bottom > div:first-child ul li {
        width: 100%;
        padding: 0;
        margin-bottom: 20px;
    }
    .sub-about #location .box .bottom > div:first-child ul li .station span {
        width: 18px;
        height: 18px;
        line-height: 18px;
        font-size: 13px;
    }
    .sub-about #location .box .bottom > div:first-child ul li .station b {font-size: 16px;}
    .sub-about #location .box .bottom > div:last-child ul li {
        width: 100%;
        padding: 0;
        margin-bottom: 20px;
    }
}

/*6.25를 평화의 날로*/
.forum-video.video-list li {width: calc((100% - 50px) / 2);}
.forum-video.video-list li:nth-child(2n) {margin-right: 0;}
.sub-peace-detail .detail-desc h5,
.sub-textbook02 .detail-desc h5 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
}
.sub-peace-detail .detail-desc .desc {margin-bottom: 40px;}
@media all and (max-width: 767px) {
    .forum-video.video-list li {width: calc((100% - 15px) / 2);}
    .forum-video.detail-desc h5, .sub-textbook02 .detail-desc h5 {
        font-size: 18px;
        margin-bottom: 15px;
    }
}

/*평화드림 아카데미*/
.academy-video.video-list li {width: calc((100% - 100px) / 3);}
.academy-video.video-list li:nth-child(2n) {margin-right: 50px;}
.academy-video.video-list li:nth-child(3n) {margin-right: 0;}
.sub-academy-detail #section1 .img {margin-bottom: 40px;}
.sub-academy-detail #section1 .img .caption {
    font-size: 16px;
    color: #777;
    margin-top: 15px;
}
.sub-academy-detail #section1 .table-wrap {margin: 40px 0;}
.sub-academy2021 #section1 .desc strong {font-size: 24px;}
.sub-academy2021 #section1 .content > div,
.sub-textbook02 #section1 .content > div {
    border-bottom: 1px solid #ddd;
    padding-bottom: 80px;
    margin-bottom: 80px;
}
.sub-academy2021 #section1 .content > div:last-child,
.sub-textbook02 #section1 .content > div:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
.sub-academy2021 #section1 .detail-desc > div {margin-top: 40px;}
@media all and (max-width: 767px) {
    .academy-video.video-list li {width: calc((100% - 15px) / 2);}
    .academy-video.video-list li:nth-child(3n) {margin-right: 15px;}
    .academy-video.video-list li:nth-child(2n) {margin-right: 0;}
    .sub-academy-detail #section1 .img {margin-bottom: 20px;}
    .sub-academy-detail #section1 .img .caption {font-size: 14px;}
    .sub-academy-detail #section1 .table-wrap {margin: 20px 0;}
    .sub-academy2021 #section1 .desc strong {font-size: 18px;}
    .sub-academy2021 .sign b {
        display: block;
        margin: 5px 0 0;
    }
    .sub-academy2021 #section1 .content > div, .sub-textbook02 #section1 .content > div {
        padding-bottom: 30px;
        margin-bottom: 30px;
    }
}

/*평화교육 교재*/
.sub-textbook02 #section2 .content > div {margin-bottom: 120px;}
.sub-textbook02 #section2 .content > div:last-child {margin-bottom: 0;}
.sub-textbook02 #section2 .content > div h5 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
}
@media all and (max-width: 767px) {
    .sub-textbook02 #section2 .content > div {margin-bottom: 40px;}
    .sub-textbook02 #section2 .content > div h5 {
        font-size: 18px;
        margin-bottom: 15px;
    }
    .sub .textbook-list {margin-bottom: -30px;}
    .sub .textbook-list li {
        width: calc((100% - 20px)/2);
        margin-right: 20px;
        margin-bottom: 30px;
    }
    .sub .textbook-list li:nth-child(4n) {margin-right: 20px;}
    .sub .textbook-list li:nth-child(2n) {margin-right: 0;}
    .sub .textbook-list li a p {
        font-size: 15px;
        margin-top: 15px;
        line-height: 1.3;
    }
}

/*ENGLISH*/
.sub-english #intro .desc {text-align: left;}
.sub-english #intro .bottom-txt {
    font-size: 16px;
    color: #777;
    margin-top: 30px;
}
.sub-english #intro .profile {position: relative;}
.sub-english #intro .profile::after {
    content: "";
    background: #003e87;
    width: 150px;
    height: 150px;
    display: block;
    position: absolute;
    right: -20px;
    top: -20px;
}
.sub-english #intro .profile img {
    position: relative;
    z-index: 1;
}
.sub-english #intro .sign {
    display: block;
    margin-top: 30px;
    line-height: 1.3;
}
.sub-english #intro .sign b {
    display: block;
    margin: 3px 0 8px;
}
.sub-english #intro .sign span {
    color: #777;
    font-size: 18px;
}
.sub-english #symbol .img {
    background: #eef2f6;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
}
.sub-english #symbol .img img {
    width: 230px;
    height: 345px;
}
.sub-english #symbol .bottom-txt {margin-top: 80px;}
.sub-english #symbol .bottom-txt h4 {
    font-size: 20px;
    font-weight: bold;
    border-bottom: 2px solid #111;
    padding-bottom: 10px;
    margin-bottom: 25px;
}
.sub-english #members .together-list {margin-bottom: 0;}
.sub-english #members .together-list:last-child {margin-bottom: -100px;}
.sub-english #members .together-list > li {padding-right: 100px;}
.sub-english #members .together-list > li .txt .name b {
    font-size: 20px;
    line-height: 1.3;
}
.sub-english #members .together-list > li .txt .desc {text-align: left;}
.sub-english #projects .blue-txt {margin-bottom: 50px;}
.sub-english #projects .box-wrap {margin-top: 50px;}
.sub-english #projects .box-wrap .box {
    background: #f8f8f8;
    padding: 25px 30px;
    margin-bottom: 20px;
}
.sub-english #projects .box-wrap .box:last-child {margin-bottom: 0;}
.sub-english #projects .box-wrap .box  h4 {
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #111;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.sub-english #footprint .board-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    padding: 15px 20px;
}
.sub-english #footprint .board-list li .date {
    font-size: 18px;
    color: #777;
    width: 180px;
    padding-right: 50px;
    line-height: 1.3;
}
.sub-english #footprint .board-list li .desc {width: calc(100% - 180px);}
.sub-english #pdf .blue-txt {margin-bottom: 50px;}
.sub-english #pdf .desc b {display: block;}
@media all and (max-width: 767px) {
    .sub-english #intro .profile {
        max-width: 200px;
        margin: 0 auto;
    }
    .sub-english #intro .profile::after {
        width: 100px;
        height: 100px;
        top: -10px;
        right: -10px;
    }
    .sub-english #intro .sign b {margin-bottom: 3px;}
    .sub-english #intro .sign span {font-size: 14px;}
    .sub-english #intro .bottom-txt {
        font-size: 15px;
        margin-top: 15px;
    }
    .sub-english #symbol .img {padding: 25px;}
    .sub-english #symbol .content .img img {
        width: 100px;
        height: 150px;
    }
    .sub-english #symbol .bottom-txt {margin-top: 30px;}
    .sub-english #symbol .bottom-txt h4 {
        font-size: 18px;
        margin-bottom: 20px;
    }
    .sub-english #members .together-list > li {padding-right: 0;}
    .sub-english #members .together-list:last-child {margin-bottom: -40px;}
    .sub-english #projects .blue-txt {margin-bottom: 15px;}
    .sub-english #projects .box-wrap {margin-top: 30px;}
    .sub-english #projects .box-wrap .box {padding: 15px 20px;}
    .sub-english #projects .box-wrap .box h4 {font-size: 16px;}
    .sub-english #footprint .board-list li {padding: 15px 0;}
    .sub-english #footprint .board-list li .date {
        font-size: 15px;
        width: 100%;
        padding: 0 0 10px;
    }
    .sub-english #footprint .board-list li .desc {width: 100%;}
    .sub-english #pdf .blue-txt {margin-bottom: 15px;}
}

/*소득공제*/
.sub-deduction {padding-top: 0;}
.sub-deduction .content {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
}
.sub-deduction .content .img {width: 120px;}
.sub-deduction .content .img a {
    display: block;
    text-align: center;
}
.sub-deduction .content .img a p {
    font-size: 16px;
    font-weight: bold;
    margin-top: 12px;
}
.sub-deduction .content .txt {
    width: calc(100% - 120px);
    padding-left: 50px;
}
.sub-deduction .content .txt > ul > li {
    display: flex;
    align-items: start;
    margin-bottom: 10px;
}
.sub-deduction .content .txt > ul > li:last-child {margin-bottom: 0;}
.sub-deduction .content .txt > ul > li img {
    width: 20px;
    margin-top: 4px;
}
.sub-deduction .content .txt > ul > li .desc {
    width: calc(100% - 20px);
    padding-left: 10px;
}
.sub-deduction .content .txt .box {
    background: #f8f8f8;
    padding: 15px 30px;
    margin-top: 15px;
}
@media all and (max-width: 767px) {
    .sub-deduction .content .img {margin: 0 auto;}
    .sub-deduction .content .txt {
        width: 100%;
        padding: 30px 0 0;
    }
    .sub-deduction .content .txt > ul > li img {
        width: 16px;
        margin-top: 3px;
    }
    .sub-deduction .content .txt > ul > li .desc {width: calc(100% - 16px)}
    .sub-deduction .content .txt .box {padding: 15px 20px;}
    .sub-deduction .content .img a p {font-size: 14px;}
}

/*다운로드*/
.sub-download {padding-top: 0;}
.sub-download .board-list {margin-top: 30px;}
.sub-download .board-list li a {align-items: center;}
.sub-download .board-list b img {
    width: 60px;
    margin-right: 10px;
}
.sub-download .admin-btn a {color: #d13f4a;}