@charset "utf-8";

#visual {position:relative; overflow:hidden; box-sizing:border-box; }
#visual .inner-area {position:absolute; top:0; left:0; right:0; width:100%; max-width:1720px; height:100%; margin:auto;}
#visual .inner-area .inner {position:absolute; position:absolute; bottom:50px; left:0;}
#visual .inner .txt-area { color:#fff;}
#visual .inner .txt-area strong {font-size:86px; font-weight:700; font-family:'Jost', sans-serif; line-height:1; text-transform:uppercase;}
#visual .inner .txt-area span {display:block; margin:30px 0 35px; font-size:20px; font-weight:300; letter-spacing:-0.05em;}
#visual .inner .txt-area a {display:inline-block; padding:0 40px; border:2px solid #fff; border-radius:27px; color:#fff; font-size:15px; font-family:'Jost', sans-serif; line-height:50px; text-transform:uppercase}
#visual .visu-s .slick-slide > div,
#visual .visu-s .slick-slide > div > div {height:100%; background-size: cover !important;}
#visual .visu-s .slick-slide > div img {display:none;}
#visual .control_btn {position:relative; display:inline-block; padding:0 30px; margin:85px 0 0;}
#visual .control_btn .slick-counter {display:inline-block; color:#9da5ab; font-size:16px; font-family:'Jost', sans-serif;}
#visual .control_btn .slick-counter span {display:inline-block; min-width:11px; color:#9da5ab; font-size:16px;}
#visual .control_btn .slick-counter .curr {color:#fff; font-weight:700;}
#visual .control_btn .slick-arrow {position:absolute; top:2px; width:12px; height:19px; text-indent:-9999px; font-size:0;}
#visual .control_btn .slick-arrow.slick-prev {left:0; background:url('../images/main/btn-main-v-prev.png') no-repeat 0 0;}
#visual .control_btn .slick-arrow.slick-next {right:0; background:url('../images/main/btn-main-v-next.png') no-repeat 0 0;}
#visual .scroll-down {display:block; position:absolute; bottom:50px; left:50%; width:42px; height:24px; background-image:url('../images/main/scroll-down.png'); background-size:100%; text-indent:-9999px; font-size:0;}

#main section {padding:160px 0; transition:0.2s;}
#main section .inner {max-width:1720px; margin:0 auto;}
#main .sec-tit {display:block; color:#1e1f22; font-size:52px; font-weight:700; font-family:'Jost', sans-serif; line-height:1; text-align:center; text-transform:uppercase}
#main .sec-slogan {display:block; margin:30px 0 0; color:#9da5ab; font-size:18px; letter-spacing:-0.05em; word-break:keep-all; text-align:center;}

section.section-01 {background:url('../images/main/section-01-bg.png') no-repeat 50% 50%; box-sizing:border-box; background-size:cover;}
section.section-01 ul {overflow:hidden; margin:60px 0 0;}
section.section-01 ul li {float:left; width:calc((100% - 120px) / 5); margin:0 0 0 30px; transition:0.2s;}
section.section-01 ul li:first-child {margin:0;}
section.section-01 ul li a {display:block;}
section.section-01 ul li a .img-area img {width:100%; max-width:100%;}
section.section-01 ul li a .txt-area {display:block; padding:0 10px; margin:25px 0 0; color:#1e1f22; font-size:22px; font-weight:700; letter-spacing:-0.05em; line-height:1;}

section.section-02 {background:url('../images/main/section-02-bg.png') no-repeat 50% 50%; box-sizing:border-box; text-align:center; background-size:cover;}
section.section-02 .list-post {padding:40px 0 0;}
section.section-02 .list-post .item {padding:30px 0 0; transition:0.2s;}
section.section-02 .list-post .item a {display:block; width:92%; margin:0 auto; outline:none;}
section.section-02 .list-post .item a .img-area { padding-bottom:68.425%; background-size:cover !important; }
section.section-02 .list-post .item a .img-area img {width:100%; max-width:100%;}
section.section-02 .list-post .item a .txt-area {height:165px; padding:38px 30px ; border-bottom:4px solid #f5f5f5; background-color:#f5f5f5; box-sizing:border-box; text-align:left; transition:0.2s;}
section.section-02 .list-post .item a .txt-area .tit {display:-webkit-box; height:60px; line-height:30px; color:#1e1f22; font-size:20px; font-weight:500; letter-spacing:-0.05em; overflow:hidden; text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
section.section-02 .list-post .item a .txt-area .date {display:block; margin:23px 0 0; color:#9da5ab; font-size:14px; font-family:'Jost', sans-serif;}
section.section-02 .list-post .item:hover {padding:0 0 30px;}
section.section-02 .list-post .item:hover a .txt-area {border-bottom:4px solid #a7ce38;}
section.section-02 .list-post .slick-arrow {display:none !important;}
section.section-02 a.btn {display:inline-block; padding:0 45px; margin:60px 0 0; color:#fff; font-size:15px; background-color:#1e1f22; border-radius:27px; line-height:54px;  text-transform:uppercase;}

@media all and (max-width:1730px){
    #visual .inner-area .inner {padding:0 15px;}

    #main section {padding:110px 0;}
    section .inner {padding:0 15px;}
}

/* 태블릿&모바일 공통*/
@media all and (max-width:1024px){

    #visual {height:auto !important;}
    #visual .inner-area .inner {width:100%; height:100%; top:0; bottom:auto; padding:0;}
    #visual .inner .txt-area {position:absolute; top:50%; left:0; width:100%; text-align:center; transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%);}
    #visual .inner .txt-area strong {font-size:28px;}
    #visual .inner .txt-area span {margin:20px 0; font-size:12px;}
    #visual .inner .txt-area a {padding:0 20px; border-radius:27px; font-size:11px; line-height:35px;}
    #visual .visu-s .slick-slide {height:auto !important}
    #visual .visu-s .slick-slide > div,
    #visual .visu-s .slick-slide > div > div {background:none !important; height:auto !important}
    #visual .visu-s .slick-slide > div img {display:block; width:100%;}
#visual .control_btn {position:absolute; bottom:70px; left:50%; padding:0 30px; margin:0 0 0 -55px;}
#visual .control_btn .slick-counter {display:inline-block; color:#9da5ab; font-size:16px; font-family:'Jost', sans-serif;}
#visual .control_btn .slick-counter span {display:inline-block; min-width:11px; color:#9da5ab; font-size:16px;}
#visual .control_btn .slick-counter .curr {color:#fff; font-weight:700;}
#visual .control_btn .slick-arrow {position:absolute; top:2px; width:12px; height:19px; text-indent:-9999px; font-size:0;}
#visual .control_btn .slick-arrow.slick-prev {left:0; background:url('../images/main/btn-main-v-prev.png') no-repeat 0 0;}
#visual .control_btn .slick-arrow.slick-next {right:0; background:url('../images/main/btn-main-v-next.png') no-repeat 0 0;}
#visual .scroll-down {bottom:38px; left:50%; width:21px; height:12px; margin-left:-10.5px;}

.slick-initialized .slick-slide {height:auto !important;}

    #main section {padding:50px 0;}
    #main .sec-tit {font-size:25px;}    
    #main .sec-slogan {margin:15px 0 20px; font-size:13px; line-height:20px;}
    
    section.section-01 {height:auto; background-size:cover;}
    section.section-01 ul {margin:30px 0 0;}
    section.section-01 ul li {width:calc((100% - 20px) / 3); margin:22px 0 0 10px;}
    section.section-01 ul li:first-child {margin:0;}
    section.section-01 ul li:nth-child(-n+3) {margin-top:0;}
    section.section-01 ul li:nth-child(4) {margin-left:0;}
    section.section-01 ul li a .txt-area {padding:0; margin:15px 0 0;  font-size:14px;}

    section.section-02 {height:auto;}
    section.section-02 .list-post {padding:30px 0 0;}
    section.section-02 .list-post .item {padding:0;}
    section.section-02 .list-post .item a {width:95%;}
    section.section-02 .list-post .item a .txt-area {height:auto; padding:15px ; border-bottom:0;}
    section.section-02 .list-post .item a .txt-area .tit {height:34px; font-size:13px; line-height:18px;}
    section.section-02 .list-post .item a .txt-area .date {margin:10px 0 0; font-size:11px;}
    section.section-02 .list-post .item:hover {padding:0;}
    section.section-02 .list-post .item:hover a .txt-area {border-bottom:0;}
    section.section-02 a.btn {padding:0 25px; margin:30px 0 0; font-size:11px; border-radius:19px; line-height:37px;}
}

/* 모바일 */
@media all and (max-width:768px){
    section.section-02 .list-post {padding:0 13px;}
    section.section-02 .list-post .item a {width:95%;}
}

@media all and (max-width:640px){
    section.section-01 ul li {width:calc((100% - 10px) / 2);}
    section.section-01 ul li:first-child {margin:0;}
    section.section-01 ul li:nth-child(-n+2) {margin-top:0;}
    section.section-01 ul li:nth-child(3) {margin:22px 0 0;}
    section.section-01 ul li:nth-child(4) {margin-left:10px;}
    section.section-01 ul li:nth-child(5) {margin-left:0;}
}