@charset "UTF-8";
/*-------------------------------------------------
title       : 콘텐츠
Author      : MONI
Create date : 2020-11-09
-------------------------------------------------*/
/*-------------------------------------------------
title       : 메인 반응형
Author      : MONI
Create date : 2024-02-20
Last modification : 2024-02-22
-------------------------------------------------*/
@media (max-width: 1920px) {
  #visual .visual_list .img_box img {
    width: 186rem;
    max-width: 1860px;
    height: 58rem;
  }
}
@media (max-width: 1500px) {
  #visual .quick_link {
    right: 6rem;
    left: initial;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@media (max-width: 1400px) {
  #visual .quick_link {
    width: 49rem;
  }
  #visual .quick_link .item {
    width: 15rem;
    height: 15rem;
    margin-right: 2rem;
  }
  #visual .quick_link .item:hover .arrow, #visual .quick_link .item:focus .arrow {
    margin-top: 1rem;
    width: 3rem;
  }
}
@media (max-width: 1280px) {
  #visual .visual_list {
    width: calc(100% - 4rem);
    margin: 0 2rem;
  }
  #section_1 .section_wrap {
    max-width: calc(100% - 4rem);
  }
  #section_2 {
    width: calc(100% - 4rem);
    margin: 0 2rem;
  }
  #section_3 .cont_box {
    padding-right: 10rem;
  }
}
@media (max-width: 1100px) {
  #visual .visual_txt_box .txt1 {
    font-size: 5.3rem;
  }
  #visual .visual_txt_box .title {
    font-size: 5.3rem;
  }
  #visual .slider_control {
    top: 33rem;
  }
  #visual .quick_link {
    width: calc(100% - 10rem);
    right: initial;
    bottom: 3rem;
    top: inherit;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  #visual .quick_link .item {
    border-radius: 1rem;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    height: 10rem;
  }
  #visual .quick_link .item .txt_box {
    padding-top: 0;
    padding-left: 2rem;
  }
  #visual .quick_link .item .ti {
    font-size: 1.7rem;
  }
  #visual .quick_link .item:hover, #visual .quick_link .item:focus {
    -webkit-transform: translateY(0) !important;
            transform: translateY(0) !important;
  }
  #visual .quick_link .item:hover .arrow, #visual .quick_link .item:focus .arrow {
    display: none;
  }
  #section_1 h2 {
    font-size: 4rem;
  }
  #section_1 .item {
    width: 11rem;
  }
  #section_1 .item .ti {
    width: 13rem;
  }
  #section_1 .item .link {
    right: 4rem;
  }
  #section_1 .item.active {
    width: 30rem;
    padding: 5rem 4rem;
  }
}
@media (max-width: 900px) {
  #section_1 .section_wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  #section_1 h2 br {
    display: none;
  }
  #section_1 .more {
    position: absolute;
    right: 0;
    top: 0;
    padding-bottom: 2rem;
    width: 10rem;
    height: 10rem;
  }
  #section_1 .more::before {
    bottom: 1.2rem;
  }
  #section_1 .group1 {
    margin-bottom: 3rem;
  }
  #section_1 .item.active {
    width: calc(100% - 33rem - 4.8rem);
  }
  #section_2 {
    width: 100%;
    margin: 0;
    padding: 5rem 0;
  }
  #section_2 .section_wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: calc(100% - 4rem);
  }
  #section_2 .group {
    max-width: 100%;
  }
  #section_2 .group + .group {
    margin-left: 0;
    margin-top: 6rem;
  }
}
@media (max-width: 768px) {
  #section_1 .section_wrap {
    padding: 6rem 0;
  }
  #section_1 .item .link {
    right: 2rem;
  }
  #section_1 .item .ti {
    font-size: 2.4rem;
    height: 1rem;
  }
  #section_1 .item.active {
    width: calc(100% - 30rem - 4.8rem);
    padding: 5rem 3rem;
  }
  #section_1 .item.active .ti {
    font-size: 2.8rem;
  }
  #section_3 h2 {
    font-size: 3rem;
    padding: 0;
    text-align: left;
    position: relative;
    top: 0;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    border: none;
    margin-bottom: 1rem;
  }
  #section_3 .cont_box {
    padding-right: 0;
    padding-left: 4.5rem;
  }
  #section_3 .more {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    top: 4.5rem;
  }
}
@media (max-width: 500px) {
  #visual .visual_txt_box .txt1 {
    font-size: 4.3rem;
  }
  #visual .visual_txt_box .title {
    font-size: 4.3rem;
  }
  #visual .visual_txt_box .desc {
    font-size: 1.7rem;
  }
  #visual .slick-dots li.slick-active a {
    width: 17rem;
    padding-right: 12rem;
  }
  #visual .slick-dots li.slick-active a::before {
    width: 12rem;
  }
  #visual .slick-dots li.slick-active a:after {
    -webkit-animation: progress_bar2 5s linear forwards;
            animation: progress_bar2 5s linear forwards;
  }
  #visual .quick_link {
    width: calc(100% - 8rem);
    bottom: 2rem;
  }
  #visual .quick_link .item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  #visual .quick_link .item .txt_box {
    padding-left: 0;
    padding-top: 0.5rem;
  }
  #section_1 h2 {
    font-size: 3.4rem;
  }
  #section_1 .group2 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  #section_1 .item {
    width: 100%;
    height: 8rem;
    margin-bottom: 1rem;
    margin-right: 0;
    padding: 2rem 3rem;
  }
  #section_1 .item .ti {
    -webkit-transform: rotate(0);
            transform: rotate(0);
    height: 4rem;
    line-height: 4rem;
    font-size: 2.2rem;
  }
  #section_1 .item .def {
    height: 100%;
    left: initial;
    right: 3rem;
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  #section_1 .item .link {
    top: 4rem;
  }
  #section_1 .item .onimg {
    height: 12rem;
    right: 3rem;
    left: initial;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  #section_1 .item.active {
    width: 100%;
    height: 24rem;
    padding: 4rem 3rem;
  }
}
@media (max-width: 350px) {
  #visual .slider_control {
    top: 38rem;
  }
}
/*
@media (max-width: 1024px){
    #visual {
        .visual_txt_box{top: 16.5rem; padding-right: 0;}
        .slider_control{top: 10rem;}
        .quick_link{
            width: calc(100% - 6rem); display: flex; bottom: 9rem; top: inherit;
            .item{
                flex:1 1 33.33%; border-bottom: none;
                img{height: 5rem;}
            }
        }
    }

    #section1 {
        .section_wrap {

        }
        h2{width: 18rem;}
        .cont_box{padding-left: 21rem; padding-right: 15rem;}
        .more{right: 4rem;}
        .slick-arrow{left: -8.1rem;}
    }

    #section2 {
        h2{font-size: 5rem;}
        .section_wrap {
            .publication{flex: 1 1 20rem; max-width: 20rem;}
            .list {
                flex: 1 1 calc(100% - 20rem); max-width: calc(100% - 20rem);
                & > div{
                    flex: 1 1 calc(33.33% - 2rem); max-width: calc(33.33% - 2rem); margin-right: 3rem;
                    &:nth-child(n+7){display: none;}
                    &:nth-child(4n){margin-right: 3rem;}
                    &:nth-child(3n){margin-right: 0;}
                }
            }
        }
    }
}

@media (max-width: 900px){
    #section3 .list .item{
        &:nth-child(1) {
            width: 50%; margin-right: 0; 
            .txt_box{padding: 22.6rem 3rem 5.042rem;}
        }
        &:nth-child(n+2) {
            padding-right: 0;width: calc(50% - 4rem); margin-left: 4rem;
            .img_box{display: none;}
        }
    }
}

@media (max-width: 768px){
    #visual {
        height: 82rem;
        .visual_list .item {
            height: 82rem;

            .img_box img{height: 82rem;}
        }
        .visual_txt_box{
            top: 14rem;
            svg text{font-size: 5rem;}
            .title{font-size: 5rem;}
            .desc{font-size: 1.8rem;}
        }
        .slider_control{top: 8rem;}
        .quick_link {
            display: block;
            .item{padding: 2rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.4);}
        }
    }

    #section1 {
        .section_wrap{  position: relative; left: 0; transform: translateX(0); top: 0; max-width: 100%;}
        h2{width: 100%; border-radius: 0; height: 7rem; line-height: 7rem; position: relative; padding: 0 2rem;}
        .cont_box{
            border-radius: 0; padding-left: 2rem; padding-right: 2rem;
            li > a{line-height: 2rem; padding: 2.4rem 3rem 2.4rem 0;}
            .date{display: none;}
            .ti{max-width: 100%;}
        }
        .slick-arrow{left: inherit; right: 0; color: #999;}
        .more{
            text-indent: -9990px;width: 2rem;height: 2rem; background-color: transparent; color: #fff; right: 2rem; top: 2rem; transform: translateY(0); font-size: 2rem;
            &::before{content: ''; font-family: $ff1; width: 2rem; position: absolute; left: 0; top: 0; text-indent: 0;}
            &:hover,
            &:focus{
                background-color: transparent;
            }
        }
    }

    #section2 {
        &::before{height: 100%; top: 0;}
        h2{
            font-size: 3.5rem;
            br{display: none;}
        }
        .section_wrap{
            display: block; padding: 0 0 3rem;
            .publication{max-width: 100%; padding-top: 4rem;}
            .list{max-width: 100%; text-align: center;}
        }
        .publication_check_box{
            margin-top: 3rem;
            .form_check{
                display: inline-block;
                & + .form_check{margin-left: 2rem; margin-top: 0;}
            }
        }
        .more{top: 5rem;}
    }

    #section3 {
        margin-top: 5rem;
        .list .item{
            &:nth-child(1){
                width: 100%;
                .img_box{height: 100%;}
                .txt_box{padding: 18rem 3rem 5rem;}
            }

            &:nth-child(n+2){ margin-left: 0; width: 100%; margin-top: 3rem;}
            &:nth-child(3){padding-top: 3rem}
        }
    }

    #section4{
        margin-top: 5rem;
        .list {
            padding-bottom: 2rem;
            .ti{display: none;}
        }
        .slick-arrow{display: none !important;}
        .bar{width: 100%; margin-right: 0;}
    }
}

@media (max-width: 550px){
    #section2 {
        .publication_check_box .form_check{width: 32.5%; margin-left: 0 !important; margin-bottom: 1rem;}
        //.section_wrap .list{}
        //.slick-slide > div > div{
        //    padding: 4.5rem 2rem 0 1rem;
        //    &:nth-child(3n-1){padding: 0 1rem 4.5rem 2rem;}
        //}
        .section_wrap .list > div{
            flex: 1 1 calc(50% - 1rem); max-width: calc(50% - 1rem); margin-right: 2rem;
            &:nth-child(3n){margin-right: 2rem;}
            &:nth-child(2n){margin-right: 0;}
        }
        .item {
            .img_box{box-shadow: 0rem 0.5rem 1.5rem rgba(0,0,0,.12);}
            .ti{@include ellipsis2; white-space: normal;}
        }
        .slick-arrow{display: none !important;}
    }

    #section3 .list .item:nth-child(1) .txt_box{padding: 10rem 3rem 3rem;}
}

@media (max-width: 400px){
    #visual .visual_txt_box{
        top: 10rem;
        svg text{font-size: 4.6rem;}
        .title{font-size: 4.5rem;}
    }
    #section2 h2,
    #section3 h2,
    #section4 h2{font-size: 3rem;}


    #section2 {
        .publication_check_box .form_check{width:49%; }
        .section_wrap .list{}
    }

    #section4 {
        .slick-slide{width: 30rem;}
        .list .img_box{height: 17rem;}
    }
}

@media (max-width: 300px){
    #visual .quick_link{bottom: 5rem;}

    #section4 .list {
        .item{width: 28rem;}
    }
}*/