@charset "utf-8";

@font-face {
    font-family: 'IAMAPLAYER';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/IAMAPLAYER.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'InkLipquid';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/InkLipquid.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body, div, h1, h2, h3, h4, h5, p, ul, li, b, strong {
    word-break: keep-all;
    line-height: 1.5;
}
h1, h2, h3, h4, h5 {line-height: 1.3}
img {max-width: 100%;}
.desc {font-size: 20px;}
.fp-tableCell {padding-top: 50px;}
.admin-btn {
    position: absolute;
    left: 50px;
    bottom: 50px;
    z-index: 10;
}
.admin-btn a {
    color: #ce4242;
    font-size: 24px;
}
.fade-up {
    opacity: 0;
    transition: all 0.8s ease-in-out;
    transform: translate3d(0, 100px, 0);
}
.fade-up.move-up {
    opacity: 1;
    transform: translateZ(0);
}
.fade-right {
    opacity: 0;
    transition: all 0.8s ease-in-out;
    transform: translate3d(-100px, 0, 0);
}
.fade-right.move-right {
    opacity: 1;
    transform: translateZ(0);
}
.fade-left {
    opacity: 0;
    transition: all 0.8s ease-in-out;
    transform: translate3d(100px, 0, 0);
}
.fade-left.move-left {
    opacity: 1;
    transform: translateZ(0);
}
.fade-in {
    opacity: 0;
    transition: all 0.5s ease-in;
}
.fade-in.fade-in-visible {
    opacity: 1;
}
.delay-100 {transition-delay: 0.1s;}
.delay-200 {transition-delay: 0.2s;}
.delay-300 {transition-delay: 0.3s;}

#footer {
    display: block;
    table-layout: auto;
}
#footer .fp-tableCell {
    display: block;
    height: 100% !important;
    padding-top: 0;
}
.sub section {
    position: relative;
    padding: 150px 0;
}
.sub .title {
    text-align: center;
    margin-bottom: 80px;
}
.sub .title h2 {
    font-size: 50px;
    font-weight: bold;
}
.sub .title h2 span {color: #1f3678;}
.sub .title h2 .glitter {
    margin-top: -60px;
    margin-left: -15px;
}
.sub .title p {
    font-size: 24px;
    margin-top: 35px;
}
.list-wrap li {
    margin-bottom: 7px;
    display: flex;
    align-items: start;
}
.list-wrap li:last-child {margin-bottom: 0;}
.list-wrap li::before {
    content: "";
    background: #1f3678;
    width: 7px;
    height: 7px;
    display: block;
    margin-top: 10px;
}
.list-wrap li p {
    width: calc(100% - 7px);
    font-size: 21px;
    font-weight: 500;
    padding-left: 10px;
}
.list-wrap li p span {
    font-size: 18px;
    color: #666;
}
.table-wrap {
    border-radius: 10px;
    overflow: hidden;
}
.table-wrap table {
    font-size: 20px;
    width: 100%;
    border-collapse: collapse;
}
.table-wrap table th {
    background: #1f3678;
    color: #fff;
    text-align: center;
    padding: 15px;
}
.table-wrap table td {
    background: #fff;
    text-align: center;
    padding: 15px;
    font-weight: 500;
    border: 1px solid rgba(0,0,0,0.1);
}
.table-wrap table td:last-child {border-right: none;}
.table-wrap table td.td-bg {
    background: #e5e7ee;
    color: #1f3678;
    font-weight: bold;
    border-left: none;
}
.table-wrap table td .new {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background: #62c5e1;
    display: inline-block;
    padding: 1px 5px;
}
.note {
    font-size: 16px;
    color: #666;
    margin-top: 20px;
}
@media all and (max-width: 767px) {
    .sub section {padding: 100px 0;}
    .sub .title {margin-bottom: 30px;}
    .sub .title h2 {font-size: 30px;}
    .sub .title h2 .glitter {
        width: 30px;
        margin-top: -40px;
        margin-left: -10px;
    }
    .sub .title p {
        margin: 20px 0;
        font-size: 16px;
    }
    .desc {font-size: 15px;}
    .list-wrap li::before {
        width: 4px;
        height: 4px;
        margin-top: 7px;
    }
    .list-wrap li p {font-size: 15px;}
    .list-wrap li p span {font-size: 14px;}
    .table-wrap {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        padding-bottom: 10px;
    }
    .table-wrap::-webkit-scrollbar {height: 5px;}
    .table-wrap::-webkit-scrollbar-track {background-color:#eeeeee; border-radius: 5px}
    .table-wrap::-webkit-scrollbar-thumb {background-color:#002d73; border-radius: 5px;}
    .table-wrap table {font-size: 15px;}
    .table-wrap table th,
    .table-wrap table td {padding: 10px 15px !important;}
    .note {
        font-size: 14px;
        margin-top: 10px;
    }
    .admin-btn {
        left: 15px;
        bottom: 15px;
    }
}

/*메인*/
.main {margin-top: -100px;}
.main section {position: relative;}
.main .container {max-width: 1600px;}
.main .title {text-align: center;}
.main .title h2 {
    font-size: 50px;
    font-weight: bold;
}
.main .title h2 span {color: #1f3678;}
.main .slick-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.main .slick-slider div {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.main .slick-slider .slick-slide {background: #000;}
.main .slick-slider .slick-slide span {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.8;
}
.main .slider-controls {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 80px;
    z-index: 2;
    display: flex;
    align-items: center;
}
.main .slider-controls .slider-paging {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 20px;
    margin-left: 40px;
    margin-right: 20px;
}
.main .slider-controls .prev-btn,
.main .slider-controls .next-btn {
    opacity: 0.5;
    cursor: pointer;
}

.main #intro,
.main #about01,
.main #about02 {color: #fff;}
.main #intro::before,
.main #about01::before,
.main #about02::before {
    content: "";
    background: linear-gradient(to top, #000, transparent);
    width: 100%;
    height: 500px;
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    opacity: 0.5;
}
.main #intro .title {
    position: relative;
    z-index: 2;
    text-align: center;
}
.main #intro .title strong {
    font-size: 70px;
    line-height: 1.3;
    margin-bottom: 30px;
    text-shadow: 0 0 20px rgba(0,0,0,0.5);
    display: block;
}
.main #intro .title strong span {color: #3bd4ff;}
.main #intro .title p {
    font-size: 24px;
    font-weight: 600;
    text-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.main #intro .scroll-down {
    position: absolute;
    bottom: 0;
    right: 70px;
    z-index: 2;
    transition: opacity 2s ease;
}
.main #intro .scroll-down img {
    display: block;
    margin-left: -3px;
    margin-bottom: 15px;
}
.main #intro .scroll-down .line {
    width: 2px;
    height: 120px;
    background: rgba(255,255,255,0.3);
    display: inline-block;
    vertical-align: top;
}
.main #intro .scroll-down .line span {
    width: 2px;
    height: 40px;
    background: #fff;
    display: block;
    -webkit-animation: scroll 2s ease infinite;
    -moz-animation: scroll 2s ease infinite;
    animation: scroll 2s ease infinite;
}
@-webkit-keyframes scroll {
    0%{transform: translateY(0);}
    100%{transform: translateY(110px);}
}
@-moz-keyframes scroll {
    0%{transform: translateY(0);}
    100%{transform: translateY(110px);}
}
@-o-keyframes scroll {
    0%{transform: translateY(0);}
    100%{transform: translateY(110px);}
}
@keyframes scroll {
    0%{transform: translateY(0);}
    100%{transform: translateY(110px);}
}

.main #about01 .title {
    position: relative;
    z-index: 2;
    text-align: right;
    padding-right: calc((100% - 1600px)/2);
}
.main #about01 .title p {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 40px;
    text-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.main #about01 .title h2,
.main #about02 .title h2 {
    font-weight: 600;
    text-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.main #about02 .title {
    position: relative;
    z-index: 2;
    text-align: left;
    padding-left: calc((100% - 1600px)/2);
}
.main #about02 .history {
    position: relative;
    margin-bottom: 40px;
}
.main #about02 .history::before {
    content: "";
    background: linear-gradient(to bottom, #3bd4ff, transparent);
    display: block;
    width: 3px;
    height: 170px;
    position: absolute;
    top: 15px;
    left: 0;
}
.main #about02 .history li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative;
}
.main #about02 .history li::before {
    content: "";
    width: 11px;
    height: 11px;
    border-radius: 11px;
    background: #fff;
    position: absolute;
    top: 48%;
    transform: translateY(-50%);
    left: -4px;
}
.main #about02 .history li .year {
    font-size: 24px;
    color: #3bd4ff;
    font-weight: 600;
    font-style: italic;
    width: 80px;
    padding-right: 10px;
}
.main #about02 .history li p {
    font-size: 20px;
    font-weight: 600;
}

.main #experience {background: url(/img/assets/main_experience_bg.jpg) center right / cover no-repeat}
.main #experience ul {
    display: flex;
    flex-wrap: wrap;
    max-width: 1300px;
    margin: 80px auto 0;
}
.main #experience ul li {
    width: calc((100% - 60px)/3);
    margin-right: 30px;
    text-align: center;
}
.main #experience ul li:last-child {margin-right: 0;}
.main #experience ul li .box {
    background: rgba(238,240,245,0.8);
    padding: 40px;
    border-radius: 10px;
}
.main #experience ul li .box h3 {
    font-size: 24px;
    font-weight: bold;
    background: #62c5e1;
    padding: 7px 25px;
    border-radius: 40px;
    color: #fff;
    margin-bottom: 25px;
    display: inline-block;
}
.main #experience ul li .box .number {
    font-size: 85px;
    color: #62c5e1;
    line-height: 1;
    font-family: "IAMAPLAYER";
}
.main #experience ul li .box .number span {color: #343637;}

.main #satisfaction {background: #f5f6fa;}
.main #satisfaction .box-wrap {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 80px auto 0;
}
.main #satisfaction .box-wrap > div {width: calc((100% - 30px)/2);}
.main #satisfaction .box-wrap .left {margin-right: 30px;}
.main #satisfaction .box-wrap .left > div {
    background: #fff;
    border-radius: 30px;
    padding: 30px 40px;
    margin-bottom: 30px;
    position: relative;
}
.main #satisfaction .box-wrap .left > div:last-child {margin-bottom: 0}
.main #satisfaction .box-wrap .left .quotes {
    position: absolute;
    top: -10px;
    right: 40px;
}
.main #satisfaction .box-wrap .left p {
    font-family: 'InkLipquid';
    font-size: 30px;
    margin-bottom: 10px;
}
.main #satisfaction .box-wrap .left .desc {
    font-size: 20px;
    font-weight: 600;
}
.main #satisfaction .box-wrap .left .school {
    font-size: 16px;
    font-weight: 600;
    text-align: right;
    margin-top: 10px;
    color: #1f3678;
}
.main #satisfaction .box-wrap .right {
    margin-right: 0;
    background: url(/img/assets/main_satisfaction_img_02.jpg) center / cover no-repeat;
    border-radius: 30px;
    padding: 50px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main #satisfaction .box-wrap .right p {
    font-size: 30px;
    font-weight: bold;
    margin: 20px 0 30px;
}

.main #price {text-align: center;}
.main #price .title {margin-bottom: 40px;}
.main #price .title p {
    font-size: 30px;
    font-weight: bold;
    color: #1f3678;
    background: #e8eaf1;
    padding: 10px 40px;
    border-radius: 60px;
    display: inline-block;
    margin-top: 35px;
}
@media all and (max-width: 1600px) {
    .main #about01 .title {padding-right: 80px;}
    .main #about02 .title {padding-left: 80px;}
}
@media all and (max-width: 1400px) {
    .main #about01 .title {padding-right: 30px;}
    .main #about02 .title {padding-left: 30px;}
}
@media all and (max-width: 1024px) {
    .main #experience ul li .box .number {font-size: 60px;}
}
@media all and (max-width: 991px) {
    .main section {
        height: auto !important;
        padding: 100px 0;
        min-height: 100vh;
    }
    .fp-tableCell {height: auto !important;}
    .main #intro .title strong {font-size: 50px;}
    .main #experience ul li {
        width: 100%;
        margin: 0 0 30px;
    }
    .main #experience ul li:last-child {margin-bottom: 0;}
    .main #satisfaction .box-wrap > div {width: 100%;}
    .main #satisfaction .box-wrap .left {margin: 0 0 30px;}
}
@media all and (max-width: 767px) {
    .fp-tableCell {padding-top: 0;}
    .main {margin-top: -60px;}
    .main .title h2 {font-size: 26px;}
    .main #intro .title {padding: 0 15px;}
    .main #intro .title strong {
        font-size: 36px;
        margin-bottom: 20px;
    }
    .main #intro .title p {font-size: 16px;}
    .main #intro .scroll-down {display: none;}
    .main .slider-controls {bottom: 30px;}
    .main .slider-controls .slider-paging {
        font-size: 14px;
        margin-left: 20px;
        margin-right: 0;
    }
    .main #about01 .title p {
        font-size: 18px;
        margin-bottom: 20px;
    }
    .main #about02 .history::before {height: 120px;}
    .main #about02 .history li {padding-left: 20px;}
    .main #about02 .history li .year {
        font-size: 15px;
        width: 55px;
    }
    .main #about02 .history li p {font-size: 15px;}
    .main #experience ul {margin-top: 40px;}
    .main #experience ul li img {height: 60px;}
    .main #experience ul li .box {padding: 30px;}
    .main #experience ul li .box h3 {
        font-size: 18px;
        margin-bottom: 15px;
        padding: 6px 20px;
    }
    .main #experience ul li .box .number {font-size: 40px}
    .main #satisfaction .box-wrap {margin-top: 40px;}
    .main #satisfaction .box-wrap .left > div {
        padding: 20px 25px;
        margin-bottom: 20px;
    }
    .main #satisfaction .box-wrap .left {margin-bottom: 20px;}
    .main #satisfaction .box-wrap .left p {font-size: 24px;}
    .main #satisfaction .box-wrap .left .desc {font-size: 15px;}
    .main #satisfaction .box-wrap .left .school {font-size: 14px;}
    .main #satisfaction .box-wrap .left .quotes {right: 20px;}
    .main #satisfaction .box-wrap .right {padding: 25px;}
    .main #satisfaction .box-wrap .right .inner img {width: 180px;}
    .main #satisfaction .box-wrap .right p {
        font-size: 24px;
        margin: 12px 0 20px;
    }
    .main #price {
        display: block !important;
        min-height: auto;
    }
    .main #price .title p {
        font-size: 20px;
        padding: 8px 20px;
        margin-top: 25px;
    }
    #footer {height: auto !important;}
}

/*회사소개*/
.sub-company {margin-top: -100px;}
.sub-company section {padding: 0;}
.sub-company .spirit .title {text-align: left;}
.sub-company .spirit .title p {
    font-size: 24px;
    font-weight: bold;
    color: #1f3678;
    margin: 0;
}
.sub-company .spirit .title h2 {margin: 25px 0 40px;}
.sub-company #intro {text-align: center;}
.sub-company #spirit01 {background: url(/img/assets/company_spirit01_bg.jpg) center / cover no-repeat;}
.sub-company #spirit02 {background: url(/img/assets/company_spirit02_bg.jpg) center / cover no-repeat;}
.sub-company #spirit02 .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
}
.sub-company #value .title {text-align: center;}
.sub-company #value ul {
    display: flex;
    flex-wrap: wrap;
}
.sub-company #value ul li {
    width: calc((100% - 100px)/3);
    margin-right: 50px;
    border-radius: 30px;
    padding: 50px;
    height: 500px;
    position: relative;
    overflow: hidden;
}
.sub-company #value ul li:first-child {background: url(/img/assets/company_value_img_01.jpg) center / cover no-repeat;}
.sub-company #value ul li:nth-child(2) {background: url(/img/assets/company_value_img_02.jpg) center / cover no-repeat;}
.sub-company #value ul li:last-child {
    background: url(/img/assets/company_value_img_03.jpg) center / cover no-repeat;
    margin-right: 0;
}
.sub-company #value ul li h3 {
    font-size: 30px;
    font-weight: bold;
}
.sub-company #value ul li:last-child h3 {color: #fff;}
.sub-company #value ul li .hover {
    opacity: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 30px;
    transition: all .3s;
    background: linear-gradient(to bottom, rgba(66,170,199,0.95), rgba(31,54,120,0.95));
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.sub-company #value ul li .hover h3,
.sub-company #value ul li .hover .desc {transition: all .3s;}
.sub-company #value ul li:hover > h3 {opacity: 0;}
.sub-company #value ul li:hover .hover {opacity: 1;}
.sub-company #value ul li:hover .hover h3 {margin-bottom: 20px;}
@media all and (max-width: 1024px) {
    .fp-tableCell {padding-top: 0;}
    .sub-company .spirit {
        display: block !important;
        padding: 150px 0;
        text-align: center;
    }
    .sub-company .spirit .title {text-align: center;}
    .sub-company .spirit .fp-tableCell {display: block;}

    .sub-company #spirit01 {background-image: url(/img/assets/company_spirit01_bg_m.jpg);}
    .sub-company #spirit02 {background-image: url(/img/assets/company_spirit02_bg_m.jpg);}
    .sub-company #spirit02 .container {justify-content: center;}
    .sub-company #value {padding: 150px 0;}
    .sub-company #value ul li {
        width: 100%;
        margin: 0 0 50px;
        height: auto;
        background: none !important;
        padding: 0;
        border-radius: 0;
    }
    .sub-company #value ul li:last-child {margin-bottom: 0;}
    .sub-company #value ul li .img {
        height: 400px;
        border-radius: 30px;
    }
    .sub-company #value ul li:first-child .img {background: url(/img/assets/company_value_img_01.jpg) center / cover no-repeat;}
    .sub-company #value ul li:nth-child(2) .img {background: url(/img/assets/company_value_img_02.jpg) center / cover no-repeat;}
    .sub-company #value ul li:last-child .img {background: url(/img/assets/company_value_img_03.jpg) center / cover no-repeat;}
    .sub-company #value ul li h3 {
        margin: 30px 0 20px;
        opacity: 1 !important;
        color: #111 !important;
    }

}
@media all and (max-width: 767px) {
    .sub-company {margin-top: -60px;}
    .sub-company .spirit {padding: 100px 0;}
    .sub-company .spirit .title p {
        font-size: 18px;
    }
    .sub-company .spirit .title h2 {margin: 15px 0 30px;}
    .sub-company #spirit01 {
        display: block !important;
        background-image: url(/img/assets/company_spirit01_bg_m.jpg);
    }
    .sub-company #spirit02 {min-height: 110vh;}
    .sub-company #value {padding: 100px 0;}
    .sub-company #value ul li .img {height: 250px;}
    .sub-company #value ul li h3 {
        font-size: 24px;
        margin: 20px 0 15px;
    }
}

/*프로그램 공통 (정보과학, 문화예술)*/
.sub-program {margin-top: -100px;}
.sub-program .intro {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 50px 0 0;
}
.sub-program .intro .title {margin: 0;}
.sub-program .intro .title p {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 40px;
    text-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.sub-program .intro .title strong {
    font-size: 70px;
    line-height: 1.3;
    text-shadow: 0 0 20px rgba(0,0,0,0.5);
    display: block;
}
.sub-program .intro .title strong span {color: #62c5e1;}

.sub-program .process .process-wrap {
    display: flex;
    flex-wrap: wrap;
}
.sub-program .process .process-wrap li {
    width: calc((100% - 150px)/4);
    margin-right: 50px;
    background: #f6f7fb;
    border-radius: 10px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}
.sub-program .process .process-wrap li::after {
    content: "";
    background: url(/img/assets/process_arrow.svg) center / cover no-repeat;
    width: 20px;
    height: 24px;
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -35px;
}
.sub-program .process .process-wrap li:last-child {margin-right: 0;}
.sub-program .process .process-wrap li:last-child::after {content: none;}
.sub-program .process .process-wrap li .step {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background: #62c5e1;
    padding: 3px 15px;
    border-radius: 40px;
    display: inline-block;
}
.sub-program .process .process-wrap li h3 {
    font-size: 30px;
    font-weight: bold;
    margin: 12px 0 15px;
}
.sub-program .process .process-wrap li p {
    font-size: 18px;
    letter-spacing: -1px;
}
.sub-program .process .process-wrap li .box {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    margin-top: 30px;
    min-height: 123px;
}
.sub-program .process .process-wrap li .box h4 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #1f3678;
}
@media all and (max-width: 1024px) {
    .sub-program .process .process-wrap li {
        width: calc((100% - 50px)/2);
        margin-bottom: 30px;
    }
    .sub-program .process .process-wrap li:nth-child(2n) {margin-right: 0;}
    .sub-program .process .process-wrap li:nth-child(2n)::after {content: none;}
}
@media all and (max-width: 767px) {
    .sub-program {margin-top: -60px;}
    .sub-program .intro .title p {
        font-size: 18px;
        margin-bottom: 20px;
    }
    .sub-program .intro .title strong {font-size: 30px;}
    .sub-program .process .process-wrap li {
        width: 100%;
        margin-right: 0;
        margin-bottom: 15px;
        padding: 20px;
        display: block;
    }
    .sub-program .process .process-wrap li::after {content: none;}
    .sub-program .process .process-wrap li .step {font-size: 14px;}
    .sub-program .process .process-wrap li h3 {
        font-size: 24px;
        margin: 10px 0 12px;
    }
    .sub-program .process .process-wrap li p {font-size: 15px;}
    .sub-program .process .process-wrap li .box {
        margin-top: 20px;
        min-height: auto;
        padding: 15px;
    }
    .sub-program .process .process-wrap li .box h4 {font-size: 15px;}
}

/*정보 과학*/
.sub-science .intro {background: url(/img/assets/science_intro_bg.jpg) center / cover no-repeat;}
.sub-science .program {padding-top: 0;}
.sub-science .program .top {margin-bottom: 150px;}
.sub-science .program .top .box-wrap {
    max-width: 1760px;
    margin: 0 auto;
    background: url(/img/assets/science_program_bg.jpg) center / cover no-repeat;
    border-radius: 30px;
    padding: 100px;
    position: relative;
}
.sub-science .program .top .box-wrap .box {
    background: #fff;
    border-radius: 10px;
    padding: 50px;
    text-align: center;
}
.sub-science .program .top .box-wrap .box h3 {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 30px;
}
.sub-science .program .top .stargate-list {
    display: flex;
    flex-wrap: wrap;
}
.sub-science .program .top .stargate-list > li {
    width: calc((100% - 120px)/5);
    margin-right: 30px;
    background: #f6f7fb;
    border-radius: 10px;
    overflow: hidden;
}
.sub-science .program .top .stargate-list > li:last-child {margin-right: 0;}
.sub-science .program .top .stargate-list > li h4 {
    background: #1f3678;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    border-radius: 10px;
    padding: 16px;
}
.sub-science .program .top .stargate-list > li h4 span {color: #ffcc3a;}
.sub-science .program .top .detail-list {padding: 20px;}
.sub-science .program .top .detail-list li {margin-bottom: 10px;}
.sub-science .program .top .detail-list li:last-child {margin-bottom: 0;}
.sub-science .program .top .detail-list li a {
    background: #fff;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    min-height: 70px;
    font-size: 18px;
    font-weight: bold;
    border: 2px solid #fff;
    transition: all .3s;
}
.sub-science .program .top .detail-list li a span {
    display: block;
    font-size: 16px;
    color: #666;
    font-weight: 500;
}
.sub-science .program .top .detail-list li:hover a {
    border-color: #1f3678;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.sub-science .program .top .detail-list li.gray a {
    background: #e1e3eb;
    border-color: #e1e3eb;
    box-shadow: none;
}
.sub-science .program .top .scroll-down {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -40px;
    width: 80px;
    height: 80px;
    border-radius: 80px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    line-height: 80px;
    text-align: center;
    background: #62c5e1;
}
.sub-science .program .top .scroll-down img {animation: scrollDown 0.6s ease-in-out 0s infinite alternate;}
@keyframes scrollDown {
    0%{transform:translate(0,-3px);}
    100%{transform:translate(0,3px);}
}
.sub-science .program .bottom .container > div {margin-bottom: 120px;}
.sub-science .program .bottom .container > div:last-child {margin-bottom: 0;}
.sub-science .program .bottom h3 {
    border-radius: 10px;
    background: #edeff5;
    padding: 20px 30px;
    display: flex;
    align-items: center;
    margin-bottom: 80px;
}
.sub-science .program .bottom h3 .number {
    background: #1f3678;
    border-radius: 5px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}
.sub-science .program .bottom h3 b {
    font-size: 24px;
    margin-left: 18px;
    color: #1f3678;
}
.sub-science .program .bottom .program-list > li {margin-bottom: 100px;}
.sub-science .program .bottom .program-list > li:last-child {margin-bottom: 0;}
.sub-science .program .bottom .program-list > li .program-title {
    text-align: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 50px;
    margin-bottom: 60px;
}
.sub-science .program .bottom .program-list > li .program-title h4 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    font-size: 50px;
    font-weight: bold;
}
.sub-science .program .bottom .program-list > li .program-title h4 span {
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    background: #1f3678;
    border-radius: 10px;
    display: inline-block;
    padding: 8px 15px;
    margin-right: 12px;
}
.sub-science .program .bottom .program-list > li .program-title p {
    font-size: 24px;
    font-weight: bold;
    color: #1f3678;
}
.sub-science .program .bottom .program-list > li .program-content {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
}
.sub-science .program .bottom .program-list > li .program-content .img {
    width: 50%;
    background: linear-gradient(to bottom, #62c5e1, #1f3678);
    border-radius: 10px;
    padding: 15px;
    position: relative;
}
.sub-science .program .bottom .program-list > li .program-content .img::before {
    content: "";
    background: url(/img/assets/science_border_top.svg) center / cover no-repeat;
    display: block;
    width: 215px;
    height: 15px;
    position: absolute;
    top: -15px;
    right: 6px;
}
.sub-science .program .bottom .program-list > li .program-content .img::after {
    content: "";
    background: url(/img/assets/science_border_bottom.svg) center / cover no-repeat;
    display: block;
    width: 271px;
    height: 15px;
    position: absolute;
    bottom: -13px;
    left: 4px;
}
.sub-science .program .bottom .program-list > li .program-content .txt {
    width: 50%;
    padding-left: 70px;
}
.sub-science .program .bottom .program-list > li .program-content .txt .technology {
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 40px;
}
.sub-science .program .bottom .program-list > li .program-content .txt .technology h5 {
    background: #1f3678;
    border-radius: 10px;
    color: #fff;
    width: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 15px;
}
.sub-science .program .bottom .program-list > li .program-content .txt .technology h5 b {margin-left: 8px;}
.sub-science .program .bottom .program-list > li .program-content .txt .technology p {
    width: calc(100% - 160px);
    color: #1f3678;
    padding: 12px 20px;
}
.sub-science .program .bottom .program-list > li .program-content .txt .step-wrap {
    position: relative;
    margin-top: 50px;
    margin-left: 12px;
}
.sub-science .program .bottom .program-list > li .program-content .txt .step-wrap::before {
    content: "";
    background: linear-gradient(to bottom, #62c5e1, #1f3678);
    width: 5px;
    height: 100%;
    display: block;
    border-radius: 5px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}
.sub-science .program .bottom .program-list > li .program-content .txt .step-wrap li {
    position: relative;
    padding-left: 40px;
    margin-bottom: 30px;
}
.sub-science .program .bottom .program-list > li .program-content .txt .step-wrap li:last-child {margin-bottom: 0;}
.sub-science .program .bottom .program-list > li .program-content .txt .step-wrap li .check {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    line-height: 30px;
    text-align: center;
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}
.sub-science .program .bottom .program-list > li .program-content .txt .step-wrap li .box::before {
    content: "";
    border: 1px dashed #aaa;
    display: block;
    width: 40px;
    position: absolute;
    top: 50%;
    left: 0;
}
.sub-science .program .bottom .program-list > li .program-content .txt .step-wrap li .box {
    background: #f6f7fb;
    border-radius: 5px;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
}
.sub-science .program .bottom .program-list > li .program-content .txt .step-wrap li .box .step {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    border-radius: 5px;
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
}
.sub-science .program .bottom .program-list > li .program-content .txt .step-wrap li .box b {
    width: calc(100% - 80px);
    padding-left: 20px;
    font-size: 21px;
}
.sub-science .program .bottom .program-list > li .program-content .txt .step-wrap li:first-child .check,
.sub-science .program .bottom .program-list > li .program-content .txt .step-wrap li:first-child .box .step {background: #62c5e1;}
.sub-science .program .bottom .program-list > li .program-content .txt .step-wrap li:first-child .box b span {color: #62c5e1;}
.sub-science .program .bottom .program-list > li .program-content .txt .step-wrap li:nth-child(2) .check,
.sub-science .program .bottom .program-list > li .program-content .txt .step-wrap li:nth-child(2) .box .step {background: #2d78bd}
.sub-science .program .bottom .program-list > li .program-content .txt .step-wrap li:nth-child(2) .box b span {color: #2d78bd;}
.sub-science .program .bottom .program-list > li .program-content .txt .step-wrap li:last-child .check,
.sub-science .program .bottom .program-list > li .program-content .txt .step-wrap li:last-child .box .step {background: #1f3678}
.sub-science .program .bottom .program-list > li .program-content .txt .step-wrap li:last-child .box b span {color: #1f3678}

.sub-science .grade {
    background: #f6f7fb;
    padding: 100px 0;
}
.sub-science .grade .table-wrap table th,
.sub-science .grade .table-wrap table td {width: 20%;}
@media all and (max-width: 1400px) {
    .sub-science .program .top {padding: 0 30px;}
}
@media all and (max-width: 1024px) {
    .sub-science .program .top .box-wrap {padding: 100px 0;}
    .sub-science .program .top .stargate-list > li {
        width: 100%;
        margin: 0 0 030px;
    }
    .sub-science .program .bottom .program-list > li .program-content .img {
        width: fit-content;
        margin: 0 auto;
    }
    .sub-science .program .bottom .program-list > li .program-content .txt {
        width: 100%;
        padding: 70px 0 0;
    }
}
@media all and (max-width: 767px) {
    .sub-science .program .top {padding: 0 15px;}
    .sub-science .program .top .box-wrap {
        padding: 15px 0;
        border-radius: 10px;
    }
    .sub-science .program .top .box-wrap .box {padding: 25px 15px 0;}
    .sub-science .program .top .box-wrap .box h3 {
        font-size: 20px;
        margin-bottom: 15px;
    }
    .sub-science .program .top .stargate-list > li h4 {
        font-size: 18px;
        padding: 12px;
    }
    .sub-science .program .top .detail-list li a {
        font-size: 15px;
        min-height: auto;
        padding: 10px;
    }
    .sub-science .program .bottom h3 {
        padding: 10px 15px;
        margin-bottom: 30px;
    }
    .sub-science .program .bottom h3 .number {
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
    }
    .sub-science .program .bottom h3 b {
        font-size: 18px;
        margin-left: 12px;
    }
    .sub-science .program .bottom .container > div {margin-bottom: 80px;}
    .sub-science .program .bottom .program-list > li {margin-bottom: 80px;}
    .sub-science .program .bottom .program-list > li .program-title {
        padding-bottom: 20px;
        margin-bottom: 30px;
    }
    .sub-science .program .bottom .program-list > li .program-title h4 {
        font-size: 24px;
        margin-bottom: 10px;
    }
    .sub-science .program .bottom .program-list > li .program-title h4 span {
        font-size: 16px;
        padding: 5px 10px;
        border-radius: 5px;
        margin-right: 8px;
    }
    .sub-science .program .bottom .program-list > li .program-title p {font-size: 15px;}
    .sub-science .program .bottom .program-list > li .program-content .img {padding: 8px;}
    .sub-science .program .bottom .program-list > li .program-content .txt {padding-top: 50px;}
    .sub-science .program .bottom .program-list > li .program-content .txt .technology {
        font-size: 16px;
        margin-bottom: 20px;
    }
    .sub-science .program .bottom .program-list > li .program-content .txt .technology h5 {
        width: 90px;
    }
    .sub-science .program .bottom .program-list > li .program-content .txt .technology h5 img {display: none;}
    .sub-science .program .bottom .program-list > li .program-content .txt .technology h5 b {margin: 0;}
    .sub-science .program .bottom .program-list > li .program-content .txt .technology p {
        width: calc(100% - 90px);
        padding: 10px 15px;
    }
    .sub-science .program .bottom .program-list > li .program-content .txt .step-wrap {
        margin-top: 30px;
        margin-left: 8px;
    }
    .sub-science .program .bottom .program-list > li .program-content .txt .step-wrap li .box {padding: 15px;}
    .sub-science .program .bottom .program-list > li .program-content .txt .step-wrap li .box .step {
        font-size: 14px;
        height: 24px;
        line-height: 24px;
    }
    .sub-science .program .bottom .program-list > li .program-content .txt .step-wrap li .box b {
        width: 100%;
        padding: 10px 0 0;
        font-size: 15px;
    }
    .sub-science .grade {padding: 60px 0;}
    .sub-science .grade .table-wrap table {width: 500px;}
}

/*문화 예술*/
.sub-culture .intro {background: url(/img/assets/culture_intro_bg.jpg) center / cover no-repeat;}

.sub-culture .program .slider-wrap {
    display: flex;
    flex-wrap: wrap;
    margin-top: 150px;
}
.sub-culture .program .slider-txt {
    width: 34%;
    padding-top: 100px;
}
.sub-culture .program .slider-txt h3 {
    font-size: 50px;
    font-weight: bold;
    margin: 25px 0 40px;
}
.sub-culture .program .slider-img {width: 66%;}
.sub-culture .program .slider-img .slick-list {overflow: hidden;}
.sub-culture .program .slick-arrow {
    width: 60px;
    height: 60px;
    border-radius: 60px;
    line-height: 60px;
    text-align: center;
    border: none;
    background: #fff;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}
.sub-culture .program .slick-dots {
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    left: 0;
    bottom: 50px;
    width: 60%;
    margin-bottom: -5px;
}
.sub-culture .program .slick-dots li {
    margin-right: 5px;
    margin-bottom: 5px;
}
.sub-culture .program .slick-dots li button {
    background: #eee;
    font-size: 16px;
    font-weight: 500;
    color: #888;
    padding: 5px 8px;
    border: none;
}
.sub-culture .program .slick-dots li.slick-active button {
    background: #62c5e1;
    color: #fff;
}

.sub-culture .bubble {padding-top: 0;}
.sub-culture .bubble .object-wrap > div {
    position: absolute;}
.sub-culture .bubble .object-wrap .object01 {
    top: 30px;
    left: calc((100% - 1600px)/2);
}
.sub-culture .bubble .object-wrap .object02 {
    top: 32%;
    right: 60px;
    z-index: 1;
}
.sub-culture .bubble .object-wrap .object03 {
    left: 0;
    bottom: 20%;
}
.sub-culture .bubble .box-wrap {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    display: flex;
    flex-wrap: wrap;
    position: relative;
}
.sub-culture .bubble .box-wrap h3 {
    background: #1f3678;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 17%;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.sub-culture .bubble .box-wrap h3 span {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
    text-align: center;
    background: #fff;
    color: #1f3678;
    display: block;
    margin: 0 auto 15px;
}
.sub-culture .bubble .box-wrap h3 b {
    font-size: 24px;
    color: #fff;
    line-height: 1.3;
    display: block;
}
.sub-culture .bubble .box-wrap .list-wrap {
    width: 83%;
    padding: 35px 40px;
}
.sub-culture .bubble .box-wrap .list-wrap li p {
    font-size: 20px;
    font-weight: normal;
}
.sub-culture .bubble .slider-wrap {padding-left: calc((100% - 1400px)/2);}
.sub-culture .bubble .slider-txt {padding-right: 50px;}
.sub-culture .bubble .slider-txt .number {
    background: #1f3678;
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    border-radius: 10px;
    padding: 3px 15px;
    display: inline-block;
}
.sub-culture .bubble .slider-txt p {
    font-size: 24px;
    font-weight: bold;
    color: #1f3678;
}
.sub-culture .bubble .slider-img .slick-list {border-radius: 200px 0 0 200px;}
.sub-culture .bubble .slick-prev {left: -30px;}
.sub-culture .bubble .slick-next {right: 50px;}

.sub-culture .recreation {background: #f6f7fb;}
.sub-culture .recreation .title h2 span {color: #04924d;}
.sub-culture .recreation .list-wrap li::before {background: #04924d;}
.sub-culture .recreation .box-wrap {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    padding: 50px;
    position: relative;
    overflow: hidden;
    border-bottom: 10px solid #04924d;
}
.sub-culture .recreation .box-wrap .txt {width: 70%;}
.sub-culture .recreation .box-wrap .txt > div {margin-bottom: 50px;}
.sub-culture .recreation .box-wrap .txt > div:last-child {margin-bottom: 0;}
.sub-culture .recreation .box-wrap .txt h3 {
    font-size: 24px;
    font-weight: bold;
    background: #04924d;
    border-radius: 5px;
    color: #fff;
    display: inline-block;
    padding: 3px 12px;
    margin-bottom: 20px;
}
.sub-culture .recreation .box-wrap .txt .career-list {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -25px;
}
.sub-culture .recreation .box-wrap .txt .career-list > li {
    width: 50%;
    margin-bottom: 20px;
    padding-right: 30px;
}
.sub-culture .recreation .box-wrap .txt .career-list > li h4 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 12px;
}
.sub-culture .recreation .box-wrap .txt .career-list > li .list-wrap li {margin-bottom: 3px;}
.sub-culture .recreation .box-wrap .txt .career-list > li .list-wrap li p {
    font-size: 18px;
    font-weight: normal;
}
.sub-culture .recreation .box-wrap .img {
    position: absolute;
    right: 60px;
    bottom: 0;
    z-index: 1;
}
.sub-culture .recreation .box-wrap .img .profile-img {
    position: relative;
    z-index: 1;
}
.sub-culture .recreation .box-wrap .img .profile-txt {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -125px;
    max-width: none;
}
.sub-culture .recreation .slider-wrap {padding-right: calc((100% - 1400px)/2);}
.sub-culture .recreation .slider-txt {
    padding-left: 100px;
    order: 2;
}
.sub-culture .recreation .slider-txt .slick-slide > p {
    font-size: 30px;
    font-weight: bold;
    color: #04924d;
    line-height: 1;
}
.sub-culture .recreation .slider-txt .list-wrap {
    background: #fff;
    border-radius: 5px;
    padding: 20px 30px;
}
.sub-culture .recreation .slider-txt .list-wrap li {margin-bottom: 0;}
.sub-culture .recreation .slider-txt .list-wrap li p {font-size: 20px;}
.sub-culture .recreation .slider-img {order: 1;}
.sub-culture .recreation .slider-img .slick-list {border-radius: 0 200px 200px 0;}
.sub-culture .recreation .slick-prev {left: 50px;}
.sub-culture .recreation .slick-next {right: -30px;}
.sub-culture .recreation .slick-dots {left: 100px;}
.sub-culture .recreation .slick-dots li.slick-active button {background: #04924d;}
@media all and (max-width: 1800px) {
    .sub-culture .recreation .slider-txt {padding-top: 30px;}
    .sub-culture .recreation .slick-dots {bottom: 30px;}
}
@media all and (max-width: 1700px) {
    .sub-culture .recreation .slider-txt {padding-top: 0;}
    .sub-culture .recreation .slider-txt .list-wrap li p {font-size: 18px;}
    .sub-culture .recreation .slick-dots {bottom: 0;}
}
@media all and (max-width: 1400px) {
    .sub-culture .program .slider-txt {
        width: 100%;
        order: 1;
        margin-bottom: 100px;
    }
    .sub-culture .program .slider-img {
        width: 100%;
        order: 2;
        padding-left: 80px;
    }
    .sub-culture .program .slider-img .slick-slide img {
        max-width: none;
        width: 100%;
    }
    .sub-culture .program .slick-dots {
        position: static;
        margin-top: 50px;
    }
    .sub-culture .bubble .slider-wrap {padding-left: 30px;}
    .sub-culture .bubble .slick-prev {left: 50px;}
    .sub-culture .recreation .slider-wrap {
        padding-left: 30px;
        padding-right: 0;
    }
    .sub-culture .recreation .slider-txt {padding-left: 0;}
    .sub-culture .recreation .slider-img .slick-list {border-radius: 200px 0 0 200px;}
    .sub-culture .recreation .slick-next {right: 50px;}
}
@media all and (max-width: 767px) {
    .sub-culture .program .slider-txt h3 {
        font-size: 30px;
        margin: 12px 0 20px;
    }
    .sub-culture .program .slick-dots {
        width: 100%;
        margin-top: 30px;
    }
    .sub-culture .program .slider-txt {
        margin-bottom: 40px;
        padding-top: 0;
    }
    .sub-culture .program .slider-img {padding-left: 0;}
    .sub-culture .program .slick-arrow {
        width: 36px;
        height: 36px;
        line-height: 36px;
    }

    .sub-culture .bubble .object-wrap .object01 {left: -30px;top: 40px;}
    .sub-culture .bubble .object-wrap .object01 img {width: 100px;}
    .sub-culture .bubble .object-wrap .object02 {top: 45%; right: 20px;}
    .sub-culture .bubble .object-wrap .object02 img {width: 120px;}
    .sub-culture .bubble .object-wrap .object03 {}
    .sub-culture .bubble .object-wrap .object03 img {}
    .sub-culture .bubble .box-wrap h3 {
        width: 100%;
        font-size: 16px;
        padding: 15px;
        display: block;
    }
    .sub-culture .bubble .box-wrap h3 strong {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .sub-culture .bubble .box-wrap h3 span {
        width: 32px;
        height: 32px;
        line-height: 32px;
        margin: 0;
        margin-right: 8px;
    }
    .sub-culture .bubble .box-wrap h3 b {font-size: 18px;}
    .sub-culture .bubble .box-wrap .list-wrap {
        width: 100%;
        padding: 20px;
    }
    .sub-culture .bubble .box-wrap .list-wrap li p {font-size: 15px;}
    .sub-culture .bubble .slider-wrap {
        margin-top: 50px;
        padding-left: 15px;
    }
    .sub-culture .bubble .slider-txt {
        padding-top: 0;
        padding-right: 15px;
    }
    .sub-culture .bubble .slider-txt .number {font-size: 16px;}
    .sub-culture .bubble .slider-txt p {font-size: 15px;}
    .sub-culture .bubble .slick-prev {left: 15px;}
    .sub-culture .bubble .slick-next {right: 15px;}
    .sub-culture .recreation .box-wrap {padding: 20px;}
    .sub-culture .recreation .box-wrap .txt {width: 100%;}
    .sub-culture .recreation .box-wrap .txt h3 {
        font-size: 14px;
        margin-bottom: 12px;
    }
    .sub-culture .recreation .box-wrap .txt .career-list > li {
        width: 100%;
    }
    .sub-culture .recreation .box-wrap .txt .career-list > li h4 {
        font-size: 15px;
        margin-bottom: 10px;
    }
    .sub-culture .recreation .box-wrap .txt .career-list > li .list-wrap li p {font-size: 15px;}
    .sub-culture .recreation .box-wrap .img {margin-top: 100px;}
    .sub-culture .recreation .box-wrap .img .profile-txt {
        max-width: 180px;
        top: -50px;
    }
    .sub-culture .recreation .box-wrap .img {
        position: relative;
        text-align: center;
        right: inherit;
        bottom: inherit;
        margin-bottom: -30px;
    }
    .sub-culture .recreation .box-wrap .img .profile-img {max-width: 180px;}
    .sub-culture .recreation .slider-wrap {
        margin-top: 50px;
        padding-left: 15px;
    }
    .sub-culture .recreation .slider-txt {padding-right: 15px;}
    .sub-culture .recreation .slider-txt .slick-slide > p {font-size: 16px;}
    .sub-culture .recreation .slider-txt .list-wrap {padding: 12px 20px;}
    .sub-culture .recreation .slider-txt .list-wrap li p {font-size: 15px;}
    .sub-culture .recreation .slick-prev {left: 15px;}
    .sub-culture .recreation .slick-next {right: 15px;}
}


/*연구 개발*/
.sub-research .intro {background: url(/img/assets/research_intro_bg.jpg) center / cover no-repeat;}
.sub-research .intro .title p {margin: 40px 0 0;}
.sub-research .datavoucher .title h2,
.sub-research .performance .title h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.sub-research .datavoucher .title h2 b,
.sub-research .performance .title h2 b {margin-left: 20px;}

.sub-research .datavoucher .info {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 100px;
}
.sub-research .datavoucher .info li {
    width: calc((100% - 90px)/4);
    margin-right: 30px;
    border-radius: 10px;
    background: #eef0f5;
    padding: 40px 15px;
    text-align: center;
}
.sub-research .datavoucher .info li:last-child {margin-right: 0;}
.sub-research .datavoucher .info li h3 {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    background: #62c5e1;
    padding: 8px 20px;
    border-radius: 40px;
    display: inline-block;
    margin-bottom: 30px;
}
.sub-research .datavoucher .info li .desc {letter-spacing: -1px;}
.sub-research .datavoucher .system h3,
.sub-research .datavoucher .process h3 {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 20px;
}
.sub-research .datavoucher .system {margin-bottom: 100px;}
.sub-research .datavoucher .system .box-wrap {margin-top: 50px;}
.sub-research .datavoucher .system .box-wrap .box {margin-bottom: 50px;}
.sub-research .datavoucher .system .box-wrap .box:last-child {margin-bottom: 0;}
.sub-research .datavoucher .system .box-wrap .box h4 {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    background: #1f3678;
    border-radius: 10px 10px 0 0;
    display: inline-block;
    padding: 10px 20px;
}
.sub-research .datavoucher .system .box-wrap .box .inner {
    border: 1px solid #ddd;
    border-radius: 0 10px 10px 10px;
    padding: 50px;
}
.sub-research .datavoucher .system .box-wrap .box:first-child .inner {text-align: center;}
.sub-research .datavoucher .system .table-wrap table {font-size: 18px;}
.sub-research .datavoucher .system .table-wrap th {background: #52545b;}
.sub-research .datavoucher .system .table-wrap td {
    text-align: left;
    padding: 15px 30px;
    font-weight: normal;
}
.sub-research .datavoucher .system .table-wrap td.td-bg {
    text-align: center;
    font-weight: bold;
}
.sub-research .datavoucher .system .table-wrap td.td-bg span {
    font-weight: 300;
    display: block;
}
.sub-research .datavoucher .system .table-wrap .list-wrap li {margin-bottom: 0;}
.sub-research .datavoucher .system .table-wrap .list-wrap li p {
    font-size: 18px;
    font-weight: normal;
}
.sub-research .datavoucher .process .process-wrap {
    margin-top: 50px;
    margin-bottom: -30px;
}
.sub-research .datavoucher .process .process-wrap li {
    width: calc((100% - 100px)/3);
    display: block;
    margin-bottom: 30px;
}
.sub-research .datavoucher .process .process-wrap li:nth-child(4n) {margin-right: 50px;}
.sub-research .datavoucher .process .process-wrap li:nth-child(3n) {margin-right: 0;}
.sub-research .datavoucher .process .process-wrap li:nth-child(3n)::after {content: none;}
.sub-research .datavoucher .process .process-wrap li h3 {
    font-size: 24px;
    margin: 15px 0;
}

.sub-research .performance {background: url(/img/assets/research_performance_bg.jpg) center / cover no-repeat;}
.sub-research .performance .title h2 .logo {height: 63px;}
.sub-research .performance .history-wrap {position: relative}
.sub-research .performance .history-wrap::before {
    content: "";
    background: linear-gradient(to bottom, #62c5e1, #1f3678);
    width: 6px;
    height: 100%;
    display: block;
    border-radius: 6px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 180px;
}
.sub-research .performance .history-wrap > li {
    margin-bottom: 70px;
    display: flex;
    flex-wrap: wrap;
    align-items: start;
}
.sub-research .performance .history-wrap > li:last-child {margin-bottom: 0;}
.sub-research .performance .history-wrap .year {
    font-size: 50px;
    font-weight: bold;
    color: #1f3678;
    font-style: italic;
    width: 180px;
    line-height: 1;
}
.sub-research .performance .history-wrap .history-detail {
    width: calc(100% - 180px);
    padding-left: 50px;
}
.sub-research .performance .history-wrap .history-detail li {
    position: relative;
    margin-bottom: 10px;
}
.sub-research .performance .history-wrap .history-detail li:last-child {margin-bottom: 0;}
.sub-research .performance .history-wrap .history-detail li::before {
    content: "";
    background: #fff;
    border: 3px solid #1f3678;
    width: 16px;
    height: 16px;
    border-radius: 16px;
    display: block;
    position: absolute;
    left: -55px;
    top: 22px;
    z-index: 1;
}
.sub-research .performance .history-wrap .history-detail li::after {
    content: "";
    border: 1px dashed #aaa;
    display: block;
    width: 50px;
    position: absolute;
    top: 30px;
    left: -50px;
}
.sub-research .performance .history-wrap .history-detail li .inner {
    background: #fff;
    border-radius: 10px;
    padding: 15px 25px;
    font-size: 20px;
}
.sub-research .performance .history-wrap .history-detail li .inner2023 {
    padding: 25px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.sub-research .performance .history-wrap .history-detail li .inner2023 .txt {
    width: calc(100% - 202px);
    padding-right: 25px;
}
.sub-research .performance .history-wrap .history-detail li .inner2023 .txt .box {
    background: #f6f7fb;
    border-radius: 5px;
    padding: 25px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 15px;
}
.sub-research .performance .history-wrap .history-detail li .inner2023 .txt .box span {font-size: 18px;}
.sub-research .performance .history-wrap .history-detail li .inner2023 .txt .box .more-btn {
    font-size: 18px;
    font-weight: 600;
    background: #1f3678;
    display: inline-block;
    padding: 8px 20px;
    color: #fff;
    border-radius: 50px;
    margin-left: 10px;
    transition: all .3s;
}
.sub-research .performance .history-wrap .history-detail li .inner2023 .txt .box .more-btn:hover {background: #62c5e1;}
.sub-research .performance .history-wrap .history-detail li .inner2023 .img {
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
}
@media all and (max-width: 1024px) {
    .sub-research .process .process-wrap li:nth-child(2n) {margin-right: 50px;}
    .sub-research .process .process-wrap li:nth-child(2n)::after {
        content: "";
        background: url(/img/assets/process_arrow.svg) center / cover no-repeat;
        width: 20px;
        height: 24px;
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: -35px;
    }
}
@media all and (max-width: 767px) {
    .sub-research .datavoucher .title h2 b, .sub-research .performance .title h2 b {margin-left: 10px;}
    .sub-research .datavoucher .title h2 .logo {height: 40px;}
    .sub-research .datavoucher .info {margin-bottom: 50px;}
    .sub-research .datavoucher .info li {
        width: 100%;
        margin-right: 0;
        margin-bottom: 15px;
        padding: 25px 15px;
    }
    .sub-research .datavoucher .info li h3 {
        font-size: 14px;
        margin-bottom: 15px;
    }
    .sub-research .datavoucher .system {margin-bottom: 50px;}
    .sub-research .datavoucher .system h3, .sub-research .datavoucher .process h3 {
        font-size: 24px;
        margin-bottom: 12px;
    }
    .sub-research .datavoucher .system .box-wrap {margin-top: 30px;}
    .sub-research .datavoucher .system .box-wrap .box h4 {
        font-size: 15px;
        padding: 8px 12px;
    }
    .sub-research .datavoucher .system .box-wrap .box .inner {padding: 20px;}
    .sub-research .datavoucher .system .table-wrap table {
        font-size: 15px;
        width: 500px;
    }
    .sub-research .datavoucher .system .table-wrap .list-wrap li p {font-size: 15px;}
    .sub-research .datavoucher .process .process-wrap {
        margin-top: 30px;
    }
    .sub-research .datavoucher .process .process-wrap li {
        width: 100%;
        margin-bottom: 15px;
        margin-right: 0 !important;
    }
    .sub-program .process .process-wrap li:nth-child(2n)::after {content: none;}
    .sub-research .performance .title h2 .logo {
        height: 50px;
        margin-bottom: 8px;
        display: block;
    }
    .sub-research .performance .history-wrap::before {
        left: 60px;
        width: 3px;
    }
    .sub-research .performance .history-wrap .year {
        font-size: 18px;
        width: 60px;
    }
    .sub-research .performance .history-wrap .history-detail {
        width: calc(100% - 60px);
        padding-left: 30px;
    }
    .sub-research .performance .history-wrap .history-detail li .inner {
        padding: 12px 15px;
        font-size: 15px;
    }
    .sub-research .performance .history-wrap .history-detail li::before {
        width: 12px;
        height: 12px;
        left: -34px;
        top: 22px;
    }
    .sub-research .performance .history-wrap .history-detail li::after {
        width: 30px;
        left: -30px;
    }
    .sub-research .performance .history-wrap .history-detail li .inner2023 .txt {
        width: 100%;
        padding: 0 0 20px;
    }
    .sub-research .performance .history-wrap .history-detail li .inner2023 .txt .box {
        margin-top: 10px;
        padding: 15px;
    }
    .sub-research .performance .history-wrap .history-detail li .inner2023 .txt .box span {
        font-size: 15px;
        width: 100%;
    }
    .sub-research .performance .history-wrap .history-detail li .inner2023 .txt .box .more-btn {
        font-size: 15px;
        margin: 8px 0 0;
    }
}