@charset "utf-8";

.main-container {position:relative;}

/* ==========================================================================
    MAIN VISUAL
    ========================================================================== */
.main-visual{
    position: relative; overflow: hidden;
    width: 100%;
    .main-vis{position: relative; width: 100%; height: 100svh; background-color: #fff; overflow: hidden}
    /*.main-vis::after{content: ""; position: absolute; inset: 0; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,.15); pointer-events: none;}*/
    .main-vis .bg{position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%;}
    .main-vis .move01{animation: move01 15s ease-in-out forwards;}
    .main-vis .move02{animation: move02 15s ease-in-out forwards;}
    .static-text{position: absolute; left: 0; top: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; text-align: center;  z-index: 1; user-select: none; pointer-events: none;}
    .mvis-text {
        position: relative;
        color: #fff;
        .txt-ko{opacity: 0; font-size: 18px; font-weight: bold; margin-bottom: 13px; animation: fadeUp .5s ease-in-out forwards .2s;}
        .slogan{font-size: 62px; font-weight: bold; line-height: 1;}
        .slogan{opacity: 0; animation: fadeUp .5s ease-in-out forwards .4s;}
        .search-area{opacity: 0; pointer-events: auto; margin-top: 18px; animation: fadeUp .5s ease-in-out forwards .8s;}
        .link-btn-more{margin-top: 70px;}
        .link-btn-more{opacity: 0; animation: fadeUp .5s ease-in-out forwards 1.0s;}
        .link-btn-more > a{ pointer-events: auto;}
    }
    .swiper-button-next,
    .swiper-button-prev{top: auto; margin-top: 0; bottom: 13px;}

    @media (width <= 1024px) {
        .mvis-text {
            .slogan{font-size: 56px;}
            .search-area .searchbar01 {max-width: 420px;}
            .link-btn-more{margin-top: 60px;}
        }

    }
    @media (width <= 860px) {
        .mvis-text {
            .txt-ko{font-size: 17px;}
            .slogan{font-size: 45px;}
            .search-area{padding: 0 20px;}
            .search-area .searchbar01.white-search {max-width: 100%; height: 50px;}
            .link-btn-more{margin-top: 60px;}
        }
    }
    @media (width <= 640px) {
        .mvis-text {
            .txt-ko{display: none;}
            .slogan{font-size: 33px; line-height: 1.25;}
            .link-btn-more{margin-top: 40px;}
        }

    }
}

/* ==========================================================================
    MAIN CONTENTS
    ========================================================================== */
.main-content{
    .main-sec{position: relative;}
    .scroll-bounce{text-align: center;}
    .scroll-bounce + .tit-sec01{margin-top: 60px;}
    @media (width <= 1024px) {
        .scroll-bounce + .tit-sec01{margin-top: 46px;}
    }
    @media (width <= 860px) {
        .scroll-bounce .stick{height: 52px;}
    }
    @media (width <= 640px) {
        .scroll-bounce .stick{height: 46px;}
        .scroll-bounce + .tit-sec01{margin-top: 32px;}
    }
}

.main-sec01 {
    padding-top: 80px; padding-bottom: 40px;
    .slider-container {margin-top: 55px; margin-left: var(--minus-gap); margin-right: var(--minus-gap);}
    .link-btn-more{margin-top: 46px;}
    @media (width <= 640px) {
        padding-top: 56px;
        .slider-container{margin-top: 40px;}
        .link-btn-more{margin-top: 33px;}
    }
}
.main-sec02{
    padding-top: 39px; padding-bottom: 73px;
    .synced-slider {margin-top: 55px;}
    .link-btn-more{margin-top: 52px;}
    .pos01{margin-top: 79px;}

    @media (width <= 1200px) {
        padding-bottom: 60px;
    }
    @media (width <= 640px) {
        padding-top: 30px; padding-bottom: 45px;
        .synced-slider {margin-top: 40px;}
        .pos01{margin-top: 48px;}
        .link-btn-more{margin-top: 38px;}
    }
}
.main-sec03 {
    position: relative;
    > a { display: flex; justify-content: center; align-items: center; width: 100%; height: calc(100svh - var(--header-height)); padding-bottom: 43px;}
    .vis-img{position: absolute; top: 0; width: 100%; height: 100%;}
    .txt-set{color: #fff; text-align: center;}
    .txt-set .title{font-size: 50px; font-weight: bold; line-height: 1; text-transform: uppercase;}
    .txt-set p{font-size: 17px; color: rgba(239, 237, 223, 0.87); line-height: 28px; margin-top: 10px;}
    .txt-set .link-btn-more{color: #fff; margin-top: 16px;}
    @media (width <= 1200px) {
        .txt-set .title{font-size: 45px;}
    }
    @media (width <= 860px) {
        .txt-set .title{font-size: 40px;}
        .txt-set p{font-size: 16px; line-height: 26px;}
    }
    @media (width <= 640px) {
        .txt-set .title{font-size: 36px;}
        .txt-set p{font-size: 15px; line-height: 23px;}
    }
}




@media (width <= 1200px) {

}
@media (width <= 1024px) {

}
@media (width <= 860px) {

}
@media (width <= 640px) {

}


/* article 공통 */
article .top a{
    float: right;
}
article .top a:hover .more,
article .top a:focus .more{transform: rotate(90deg); transition: all 0.25s;}
article .top a .more{
    position: relative;
    display: flex; justify-content: center; align-items: center; box-sizing: border-box;
    width: 23px; height: 23px;
}
article .top a .more:before,
article .top a .more:after{
    content: "";
    position: absolute;
    width: 100%; height: 1px; background-color: #000;
}
article .top a .more:after{
    width: 1px; height: 100%;
}



article.news-board {
    margin-top: 9rem;
}
article.news-board .top{
    border-bottom: 1px solid #111; padding-bottom: 1rem;
}
article.news-board .top h3{
    display: inline-block;
    font-size: 1.6rem; font-weight: 600; color: #111; line-height: 1;
}
article.news-board .top .category{
    display: inline-block; vertical-align: bottom; line-height: 1;     margin-left: 0.8rem;
}
article.news-board .top .category button{
    border: none; background: transparent; color: #666; letter-spacing: -0.5px; padding: 0 0.7rem; font-size: 1rem;  cursor: pointer; position: relative;
}
article.news-board .top .category button.on{
    color: #d71518; font-weight: 500;
}
article.news-board .top .category button.on::after{
    content: ''; display: block; width: 4px; height: 4px; background: #d71518; border-radius: 50%; position: absolute; top: -5px; left: 50%; margin-left: -2px;
    animation: onCircleAni 0.1s ease-in-out;
}
@keyframes onCircleAni {
    from{
        top: -15px;
    }
    to{
        top: -5px;
    }
}
article.news-board .top a{
    float: right;

}
article.news-board .top a:before{

    display: block; box-sizing: border-box;
    width: 23px; height: 23px;
    border: 1px solid #000;
}
article.news-board .bottom{
    margin-top: 2rem;
}
article.news-board .bottom ul{
    margin-left: -40px;
}
article.news-board .bottom ul li{
    float: left; width: 25%;
}
article.news-board .bottom ul li a{
    display: block; margin-left: 40px;
}
article.news-board .bottom .category{
    display: inline-block;
    font-size: 0.9rem; line-height: 1; padding: 0.3rem 0.9rem; font-weight: 500;
}
article.news-board .bottom .category.notice{
    color: #d71518; border: 1px solid #d71518;
}
article.news-board .bottom .category.notice::after{
    content: '공지사항';
}
article.news-board .bottom .category.reference{
    color: #20419f; border: 1px solid #20419f;
}
article.news-board .bottom .category.reference::after{
    content: '자료실';
}
article.news-board .bottom h4{
    font-size: 1.2rem; color: #111; font-weight: 500; letter-spacing: -0.8px;
    margin-top: 1rem;
    overflow: hidden; text-overflow: ellipsis; line-height: 1.4em; min-height: 2.8em; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
article.news-board .bottom p{
    border-top: 1px solid #e9e9e9; margin: 1rem 0 0.5rem; padding-top: 1rem;
    color: #555; letter-spacing: -0.8px;
    overflow: hidden; text-overflow: ellipsis; line-height: 1.4em; min-height: 4.2em; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
article.news-board .bottom span{
    display: block; font-size: 0.867rem; color: #666; letter-spacing: 0.2px;
}

@media screen and (max-width:1024px){
    article.news-board .bottom ul {
        margin-left: -20px;
    }
    article.news-board .bottom ul li a{
        margin-left: 20px;
    }
}
@media screen and (max-width:640px){
    article.news-board .bottom ul li {
        width: 33.3%;
    }
    article.news-board .bottom ul li:last-child{
        display: none;
    }
}
@media screen and (max-width:425px){
    article.news-board .bottom ul li {
        width: 50%;     margin-bottom: 2.5rem;
    }
    article.news-board .bottom ul li:last-child{
        display: block;
    }
    article.news-board .bottom h4{
        margin-top: 0.5rem;
    }
    article.news-board .bottom p{
        margin: 0.5rem 0 0.5rem;
        padding-top: 0.5rem;
    }
}

article.gallery-board{
    margin: 7rem 0 7rem;
}
article.gallery-board .top{
    border-bottom: 1px solid #111; padding-bottom: 1rem;
}
article.gallery-board .top h3{
    display: inline-block;
    font-size: 1.6rem; font-weight: 600; color: #111; line-height: 1;
}
article.gallery-board .bottom{
    margin-top: 2rem;
}
article.gallery-board .bottom ul{
    margin-left: -40px;
}
article.gallery-board .bottom ul li{
    float: left; width: 25%;
}
article.gallery-board .bottom ul li a{
    display: block; margin-left: 40px;
}
article.gallery-board .bottom .image{
    padding-bottom: 63%;
    position: relative;
}
article.gallery-board .bottom .image img{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
article.gallery-board .bottom h4{
    font-size: 1.2rem; color: #111; font-weight: 500; letter-spacing: -0.8px;
    margin-top: 1rem;
    overflow: hidden; text-overflow: ellipsis; line-height: 1.4em; min-height: 2.8em; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
article.gallery-board .bottom span{
    display: block; font-size: 0.867rem; color: #666; letter-spacing: 0.2px;
    margin-top: 0.6rem;
}

@media screen and (max-width:1024px){
    article.gallery-board .bottom ul {
        margin-left: -20px;
    }
    article.gallery-board .bottom ul li a{
        margin-left: 20px;
    }
}
@media screen and (max-width:640px){
    article.gallery-board .bottom ul li{
        width: 50%;     margin-bottom: 2rem;
    }
}
@media screen and (max-width:425px){
    article.gallery-board .bottom ul {
        margin-left: -10px;
    }
    article.gallery-board .bottom ul li a{
        margin-left: 10px;
    }
}











/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

}

/* IE6,7 */
@media screen\9 {

}

/* IE8 */
@media \0screen {

}

/* IE6,7,8 */
@media \0screen\,screen\9 {

}

/* IE9,10 */
@media screen and (min-width:0\0){

}