@charset "utf-8";

.main-container .tit-dep3{ margin:80px auto 40px; }

/* 상단 배너 */
.top-content{ position:relative; z-index:100; }
.top-content > .wide-layout{ height:30px; padding:0 46px; display:flex; position:relative; justify-content:center; align-items:center; }
.top-content .banner-layout{ display:block; font-weight:700; font-size:14px; color:#fff; text-align:center; overflow:hidden; text-overflow:ellipsis; word-break:break-all; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
.top-content .btn-close{ position:absolute; top:50%; right:16px; transform:translate(0, -50%); font-size:0; }
.top-content .btn-close .ico-close-wt{ width:18px; height:18px; }

/* 비주얼 배너 */
.visual-content .swiper .swiper-wrapper .swiper-slide{ position:relative; }
.visual-content .swiper .swiper-wrapper .swiper-slide > a{ height:369px; max-width:1024px; margin:0 auto; padding:0 16px; display:flex; color:#fff; }
.visual-content .swiper .swiper-wrapper .swiper-slide > a > *:not(.bg-area){ position:relative; z-index:2; }
.visual-content .swiper .swiper-wrapper .swiper-slide > a > .img-banner{ width:656px; max-width:100%; }
.visual-content .swiper .swiper-wrapper .swiper-slide > a > .img-banner .img-area{ width:100%; min-height:100%; display:flex; background-color:#F5F6FA; font-size:0; overflow:hidden; justify-content:center; align-items:center; }
.visual-content .swiper .swiper-wrapper .swiper-slide > a > .img-banner .img-area > img{ max-width:100%; max-height:100%; }
.visual-content .swiper .swiper-wrapper .swiper-slide > a > .cont-area{ padding:40px 24px; flex:1; }
.visual-content .swiper .swiper-wrapper .swiper-slide > a > .cont-area .tit-dep2{ overflow:hidden; text-overflow:ellipsis; word-break:break-all; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; opacity:0; }
.visual-content .swiper .swiper-wrapper .swiper-slide > a > .cont-area .txt{ margin-top:8px; overflow:hidden; text-overflow:ellipsis; word-break:break-all; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; opacity:0; }
.visual-content .swiper .swiper-wrapper .swiper-slide > a > .bg-area{ position:absolute; top:0; left:0; right:0; bottom:0; background-color:#ff8f32; z-index:1; }
.visual-content .swiper .swiper-pager .swiper-pagination-bullet{ background-color:#fff; }
.visual-content .swiper .swiper-pager .swiper-pagination-bullet-active{ background-color:transparent; border-color:#fff; }
.visual-content .swiper .swiper-btn{ margin-left:180px; position:absolute; left:50%; bottom:40px; }
.visual-content .swiper .swiper-btn > .swiper-button-disabled{ opacity:.7; }
.visual-content .swiper .swiper-number{ width:auto; line-height:22px; margin-left:282px; padding:0 16px; position:absolute; left:50%; bottom:51px; background-color:#282828; border-radius:14px; font-size:12px; font-weight:500; color:#fff; }

.visual-content .swiper .swiper-wrapper .swiper-slide-active > a > .cont-area .tit-dep2{ animation:mainTxt 1.5s .2s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards; }
.visual-content .swiper .swiper-wrapper .swiper-slide-active > a > .cont-area .txt{ animation:mainTxt 1.5s .4s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards; }

@keyframes mainTxt{
    0%{ opacity:.3; transform:translateY(40px); }
    100%{ opacity:1; transform:translateY(0); }
}

/* 비주얼 full 배너 */
.visual-content.visual-full-content .swiper .swiper-wrapper .swiper-slide > a{ height:auto; position:relative; flex-direction:column; }
.visual-content.visual-full-content .swiper .swiper-wrapper .swiper-slide > a .img-banner{ width:100%; }
.visual-content.visual-full-content .swiper .swiper-wrapper .swiper-slide > a .cont-area{ padding:24px 24px 70px; flex:auto; }
.visual-content.visual-full-content .swiper .swiper-wrapper .swiper-slide > a .bg-area{ left:16px; right:16px; }
.visual-content.visual-full-content .swiper .swiper-btn, .visual-content.visual-full-content .swiper .swiper-number{ display:none !important; }
.visual-content.visual-full-content .swiper .swiper-pager{ display:block !important; position:absolute; left:0; right:0; bottom:24px; }

/* 비주얼 cover 배너 */
.visual-content.visual-cover-content .swiper .swiper-wrapper .swiper-slide{ overflow:hidden; }
.visual-content.visual-cover-content .swiper .swiper-wrapper .swiper-slide > a{ height:auto; max-width:none; padding:0 0 34% 0; }
.visual-content.visual-cover-content .swiper .swiper-wrapper .swiper-slide > a:after{ content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(180deg, rgba(0, 0, 0, 0) 63.65%, #000000 100%); z-index:3; }
.visual-content.visual-cover-content .swiper .swiper-wrapper .swiper-slide > a > *{ position:absolute; top:0; left:0; right:0; bottom:0; }
.visual-content.visual-cover-content .swiper .swiper-wrapper .swiper-slide > a > .img-banner{ width:auto; z-index:2; }
.visual-content.visual-cover-content .swiper .swiper-wrapper .swiper-slide > a > .img-banner .img-area img{ min-width:100%; max-width:none; max-height:none; object-fit:cover; position:absolute; top:50%; left:50%; display:block; transform:translate(-50%, -50%); }
.visual-content.visual-cover-content .swiper .swiper-wrapper .swiper-slide > a > .cont-area{ max-width:1024px; margin:0 auto; padding:0 16px 78px; display:flex; z-index:4; justify-content:flex-end; align-items:flex-start; flex-direction:column; }
.visual-content.visual-cover-content .swiper .swiper-wrapper .swiper-slide > a > .cont-area .tit-dep2{ font-size:40px; font-weight:800; }
.visual-content.visual-cover-content .swiper .swiper-wrapper .swiper-slide > a > .cont-area .txt{ margin-top:16px; font-size:18px; }
.visual-content.visual-cover-content .swiper .swiper-wrapper .swiper-slide > a > .bg-area{ z-index:1; }
.visual-content.visual-cover-content .swiper .rw-pc{ display:none !important; }
.visual-content.visual-cover-content .swiper .rw-mo{ display:block !important; position:absolute; left:0; right:0; bottom:24px; }

/* 카테고리 */
.catagory-content .no-data{ margin-bottom:40px; }

/* 미들 배너 */
.middle-content{ margin-top:80px; padding:40px 0; background-color:#282828; }
.middle-content .swiper .swiper-wrapper .swiper-slide .cont-area{ text-align:center; word-break:break-all; }
.middle-content .swiper .swiper-wrapper .swiper-slide .cont-area .tit-dep2{ color:#fff; }
.middle-content .swiper .swiper-wrapper .swiper-slide .cont-area .txt{ margin-top:16px; font-weight:500; color:#fff; }
.middle-content .swiper .swiper-pager{ margin-top:24px; }
.middle-content .swiper .swiper-pager .swiper-pagination-bullet{ background-color:#FFDA50; }
.middle-content .swiper .swiper-pager .swiper-pagination-bullet-active{ background-color:transparent; border-color:#FFDA50; }

/* 문의 */
.qna-content .tit-dep2{ text-align:center; }
.qna-content .txt-area{ margin-top:8px; text-align:center; }

/* 오시는 길 */
.map-layout{ overflow:hidden; }
.map-layout .map-area{ padding-bottom:40%; position:relative; }
.map-layout .map-area > *{ width:100%; height:100%; position:absolute; top:0; left:0; right:0; bottom:0; }

.map-content .txt-area{ font-weight:500; }
.map-content .map-layout{ margin-top:16px; position:relative; font-size:14px; }
.map-content .map-layout .btn{ height:40px; line-height:38px; -webkit-box-shadow:none; box-shadow:none; }
.map-content .map-layout .btn-selected{ background-color:#FFDA50; }
.map-content .map-layout .custom-typecontrol{ position:absolute; top:10px; right:10px; z-index:10; }
.map-content .map-layout .custom-zoomcontrol{ position:absolute; right:10px; bottom:10px; z-index:10; }
.map-content .map-layout .custom-zoomcontrol > .btn{ width:40px; height:40px; padding:0; display:flex; justify-content:center; align-items:center; }
.map-content .map-layout .custom-zoomcontrol > .btn:last-child{ margin-top:2px; }
.map-content .map-layout .custom-zoomcontrol > .btn img{ max-width:20px; }


/** Tablets **/
@media screen and (max-width:1024px){
    /* 비주얼 배너 */
    .visual-content .swiper .swiper-wrapper .swiper-slide > a{ height:auto; padding:0; flex-direction:column; }
    .visual-content .swiper .swiper-wrapper .swiper-slide > a > .img-banner{ width:100%; }
    .visual-content .swiper .swiper-pager{ position:absolute; left:0; right:0; bottom:24px; }
    .visual-content .swiper .swiper-wrapper .swiper-slide > a > .cont-area{ padding:24px 24px 70px; }
    
    .visual-content.visual-full-content .swiper .swiper-wrapper .swiper-slide > a .bg-area{ left:0; right:0; }

    @keyframes mainTxt{
        0%{ opacity:.3; transform:translateX(40px); }
        100%{ opacity:1; transform:translateX(0); }
    }

    /* 비주얼 cover 배너 */
    .visual-content.visual-cover-content .swiper .swiper-wrapper .swiper-slide > a{ padding-bottom:60%; }
    .visual-content.visual-cover-content .swiper .swiper-wrapper .swiper-slide > a:after{ background:linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, #000000 100%); }
    .visual-content.visual-cover-content .swiper .swiper-wrapper .swiper-slide > a > .img-banner .img-area img{ min-width:none; height:100%; }

}

/** mobiles **/
@media screen and (max-width:767px){
    .main-container .tit-dep3{ margin:40px auto 24px; }

    /* 상단 배너 */
    .top-content > .wide-layout{ padding:0 46px 0 16px; justify-content:flex-start; }
    .top-content .banner-layout{ font-size:12px; text-align:left; }
    
    /* 비주얼 배너 */
    .visual-content .swiper .swiper-wrapper .swiper-slide > a > .cont-area .txt{ margin-top:4px; }
    .visual-content.visual-full-content .swiper .swiper-wrapper .swiper-slide > .cont-area{ padding:24px 24px 56px; }
    .visual-content .swiper .swiper-pager, .visual-content.visual-full-content .swiper .swiper-pager{ bottom:16px; }

    /* 비주얼 cover 배너 */
    .visual-content.visual-cover-content .swiper .swiper-wrapper .swiper-slide > a > .cont-area{ padding-bottom:40px; }
    .visual-content.visual-cover-content .swiper .swiper-wrapper .swiper-slide > a > .cont-area .tit-dep2{ font-size:20px; }
    .visual-content.visual-cover-content .swiper .swiper-wrapper .swiper-slide > a > .cont-area .txt{ margin-top:8px; font-size:14px; }
    .visual-content.visual-cover-content .swiper .rw-mo{ position:absolute; left:0; right:0; bottom:16px; }

    /* 미들 배너 */
    .middle-content{ margin-top:40px; padding:24px 0; }
    .middle-content .swiper .swiper-wrapper .swiper-slide .cont-area .txt{ margin-top:8px; }
    .middle-content .swiper .swiper-pager{ margin-top:16px; }
}

/** mobiles xs **/
@media (max-width:360px) and (orientation:portrait){
    
}