@charset "UTF-8";

.sec-sw-board-3topimg1 { overflow:hidden; background:#ffffff;}
.sec-sw-board-3topimg1 .header { text-align:center; }
.sec-sw-board-3topimg1 .tab-btn { display:flex; justify-content:center; align-items:center; margin:-20px 0 40px; }
.sec-sw-board-3topimg1 .tab-btn span { position:relative; padding:10px 30px; border-radius:99px; background:#fff; border:1px solid #ddd; cursor:pointer; margin:0 5px;  }
.sec-sw-board-3topimg1 .tab-btn span.on { border-color:var(--main-color1); background:var(--main-color1); color:#fff; }


.sec-sw-board-3topimg1 .tab-con { position:relative; }

.sec-sw-board-3topimg1 .swiper { overflow:visible; opacity:0; position:absolute; left:0; top:0; right:0; bottom:0; transition-duration:400ms; z-index:-1; margin:-30px; padding:30px; }
.sec-sw-board-3topimg1 .swiper.on { opacity:1; position:relative; z-index:2; }

.sec-sw-board-3topimg1 .swiper-slide { border-radius:30px; overflow:hidden; background:#fff; box-shadow:5px 5px 20px rgba(0,0,0,.1); transition-duration:200ms; height:auto; }
.sec-sw-board-3topimg1 .swiper-slide:hover { transform:translateY(-20px); border:4px solid var(--main-color1); }
.sec-sw-board-3topimg1 .swiper-slide .image { position:relative; background:#ddd; }
.sec-sw-board-3topimg1 .swiper-slide .image .img { background:none no-repeat center/cover; padding-bottom:66%; }

.sec-sw-board-3topimg1 .swiper-slide .content { padding:35px; }
.sec-sw-board-3topimg1 .swiper-slide .head { width:100%; font-size:1.125rem; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; margin-bottom:15px; font-weight:400; }
.sec-sw-board-3topimg1 .swiper-slide:hover .head { color:var(--main-color1); }
.sec-sw-board-3topimg1 .swiper-slide .date { opacity:.7; }

.sec-sw-board-3topimg1 .nav { position:absolute; top:55%; transform:translateY(-50%); width:50px; height:50px; cursor:pointer; border-radius:99px; background:#333; color:#eee; display:flex; justify-content:center; align-items:center; z-index:9; transition-duration:400ms; }
.sec-sw-board-3topimg1 .nav:hover { background:var(--main-color2); }
.sec-sw-board-3topimg1 .nav.prev { left:0; }
.sec-sw-board-3topimg1 .nav.next { right:0; }


@media (max-width: 1024px) {
    .sec-sw-board-3topimg1 .nav { top:54%; }
}

@media (max-width: 767px) {
    
    .sec-sw-board-3topimg1 .tab-btn { margin:-10px 0 30px; }
    .sec-sw-board-3topimg1 .tab-btn span { padding:5px 15px; font-size:.875rem; margin:0 2px; }
    
    
    .sec-sw-board-3topimg1 .nav { top:50%; width:40px; height:40px; border:1px solid #eee; color:#eee; }
    .sec-sw-board-3topimg1 .nav.prev { left:10px; }
    .sec-sw-board-3topimg1 .nav.next { right:10px; }
    
}