@charset "utf-8";

.main-container {position:relative;}

.visual {position: relative;}
.visual .swiper-slide {position: relative; overflow: hidden;}
.visual .swiper-slide .img {}
.visual .swiper-slide .img img {width: 100%;}
.visual .swiper-slide .txt {position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; align-items: center; color: #fff;}
.visual .swiper-slide .txt .wrap {width: 100%;}
.visual .swiper-slide .txt .tit {font-size: 3.6rem; font-weight: 600;}
.visual .swiper-slide .txt .sub {padding: 20px 0 60px;}
.visual .swiper-slide .txt .more {display: inline-block; border: 1px solid #dbdbdb; box-sizing: border-box; padding: 0 30px; line-height: 45px; text-transform: uppercase; font-size: 11px; font-weight: 500; letter-spacing: 2px;}


@media screen and (max-width: 1820px) {
    .visual .swiper-slide .txt .wrap {max-width: none; width: calc(100% - 180px); margin: 0 auto;}
    .visual .swiper-nav .swiper-button-prev {left: 20px;}
    .visual .swiper-nav .swiper-button-next {right: 20px;}
}

@media screen and (max-width: 1280px) {
    .visual {margin-top: 80px;}
}

@media screen and (max-width: 1200px) {
    .visual .swiper-slide .img img {position: relative; width: 130%; max-width: none; left: 50%; transform: translateX(-50%);}
    .visual .swiper-slide .txt .tit {font-size: 2.8rem;}
    .visual .swiper-slide .txt .sub {padding: 2% 0 3%;}
    .visual .swiper-slide .txt .wrap {max-width: 100%; width: 100%; margin: 0 15px;}
    .visual .swiper-nav {display: none;}
}

@media screen and (max-width: 860px) {
    .visual {margin-top: 65px;}
    .visual .swiper-slide .txt .tit {font-size: 5vw;}
}

@media screen and (max-width: 640px) {
    .visual .swiper-slide .img {padding: 50% 0 0; box-sizing: border-box;}
    .visual .swiper-slide .img img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: cover;}
    .visual .swiper-slide .txt .tit {font-size: 5.5vw; line-height: 120%;}
    .visual .swiper-slide .txt .sub {padding: 3% 0 5%; font-size: 14px; line-height: 130%;}
    .visual .swiper-slide .txt .more {line-height: 30px; padding: 0 1.2rem; letter-spacing: 1px;}
    .visual .swiper-pagination .swiper-pagination-bullet {width: 8px; height: 8px; margin: 0 4px;}
}

@media screen and (max-width: 460px) {
    .visual {margin-top: 55px;}
    .visual .swiper-slide .img {padding: 60% 0 0;}
}

/* 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){

}