@charset "utf-8";

/* 새글 스킨 (latest) */
.lat_title {display:block; margin-bottom:20rem; font-size:30rem; line-height:1em;}
.lat_title a {position:relative; color:#333; display:inline-block}

.lat ul {}
.lat li {position:relative;line-height:18px;border-bottom:1px solid #e5ecee;margin-bottom:10px}
.lat li a {font-weight:bold;font-size:1.2em;line-height:20px;vertical-align:middle}
.lat li a:hover {color:#3a8afd}
.lat li .fa-heart {color:#ff0000}
.lat li .fa-lock {display:inline-block;line-height:14px;width:16px;font-size:0.833em;color:#4f818c;background:#cbe3e8;text-align:center;border-radius:2px;font-size:12px;border:1px solid #cbe3e8;vertical-align:middle}
.lat li .new_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#23db79;background:#b9ffda;text-align:center;border-radius:2px;margin-left:2px;font-weight:bold;vertical-align:middle}
.lat li .hot_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#ff0000;background:#ffb9b9;text-align:center;border-radius:2px;vertical-align:middle}
.lat li .fa-caret-right {color:#bbb}
.lat li .fa-download {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#daae37;background:#ffefb9;text-align:center;border-radius:2px;vertical-align:middle}
.lat li .fa-link {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#b451fd;background:#edd3fd;text-align:center;border-radius:2px;vertical-align:middle}

.lat .profile_img img{border-radius:50%}

.lt_info {padding:10px 0}
.lt_info .lt_nick {}
.lt_info .lt_date {color:#888}

.lat .empty_li {line-height:145px;color:#666;text-align:center;padding:0}
.lat .empty_li:before {background:none;padding:0}

.lat .lt_cmt {background:#e9eff5;color:#3a8afd;font-size:11px;height:16px;line-height:16px;padding:0 5px;border-radius:3px;vertical-align:middle}
.lat .lt_more {position:absolute;top:11px;right:0;display:block;width:40px;line-height:25px;color:#3a8afd;border-radius:3px;text-align:center}
.lat .lt_more:hover {color:#777}

.board-list{position:absolute; right:40rem; bottom:50rem; padding:25rem 20rem; width:400rem; height:190rem; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.2); border-radius:10rem; box-sizing:border-box; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);  z-index:2; }
.boardSwiper{overflow:hidden;}
.boardSwiper .swiper-slide,
.boardSwiper .empty_li{height:auto;}
.boardSwiper .empty_li{display: flex;justify-content: center;align-items: center;text-align: center;width: 100%; font-size:16rem;}
.boardSwiper .swiper-slide > *{transition:all 0.3s ease;}
.boardSwiper .swiper-slide > a{display:flex; gap:20rem; width:100%; height:100%;}
.boardSwiper .swiper-slide > a .img{width:150rem; height:140rem; border-radius:5rem; box-sizing:border-box; overflow:hidden;}
.boardSwiper .swiper-slide > a .img img{width:100%; height:auto; transform:scale(1); transition:all 0.3s ease;}
.boardSwiper .swiper-slide > a .txt{width:calc(100% - 170rem); width:-webkit-calc(100% - 170rem);}
.boardSwiper .swiper-slide > a .txt em{display:inline-block; margin-top:5rem; padding:5rem 10rem; margin-bottom:14rem; font-size:11rem; font-weight:500; color:#fff; line-height:1em; word-break:keep-all; background:rgba(255,255,255,0.08); box-sizing:border-box; border-radius:50rem;}
.boardSwiper .swiper-slide > a h3{display:block; font-size:17rem; font-weight:600; color:#fff; line-height:1.6em; word-break:keep-all; display: -webkit-box; word-wrap: break-word; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; word-break: keep-all; overflow: hidden; } 
.boardSwiper .swiper-slide > a .date{display:inline-block; margin-top:8rem; font-size:14rem; font-weight:400; color:#fff; line-height:1em; opacity:0.5;}
.boardSwiper .swiper-slide > a .btn-arr{position:absolute; right:0; bottom:0; width:40rem; height:40rem; background:url(./img/ic-lt-arr-wt.svg)no-repeat center; background-size:12rem auto; border:1px dashed rgba(255,255,255,0.3); box-sizing:border-box; border-radius:50rem; transition:all 0.3s ease;}
.boardSwiper .swiper-slide > a:hover .btn-arr{background-color:var(--color-point); border:1px solid var(--color-point); }
.boardSwiper .swiper-slide > a:hover .img img{transform:scale(1.1);}
/*
.boardSwiper .swiper-slide > a:hover{background-color:var(--color-point);}
.boardSwiper .swiper-slide > a:hover em,
.boardSwiper .swiper-slide > a:hover h3,
.boardSwiper .swiper-slide > a:hover .date{color:#fff;}
*/
.btn-navi{position:absolute; top:10rem; right:0; display: flex; align-items: center; }
.btn-navi .swiper-button-next, 
.btn-navi .swiper-button-prev{position:relative; top:unset; left:unset; right:unset; margin-top:0; width:12rem; height:12rem; background:url(img/ic-slide-arr.svg)no-repeat center; background-size:contain;}
.btn-navi .swiper-button-prev{transform:rotate(-180deg);}
.btn-navi .swiper-button-next{margin-left:40rem;}
.btn-navi .swiper-button-next:after{content:''; position:absolute; top:0; left:-20rem; width:1px; height:12rem; background:rgba(0,0,0,0.1);}

@media all and (max-width:768px){
	.board-list{display:none;}
}

/*
@media all and (max-width:620px){
	.boardSwiper .swiper-slide,
	.boardSwiper .empty_li{height:260rem;}
	.boardSwiper .swiper-slide > a{padding:25rem; border-radius:15rem;}
}
@media all and (max-width:540px){
	.lat_title{font-size:20rem; margin-bottom:10rem;}
	.boardSwiper .swiper-slide,
	.boardSwiper .empty_li{height:200rem;}
	.boardSwiper .swiper-slide > a{padding:15rem; border-radius:8rem;}
	.boardSwiper .swiper-slide > a em{font-size:14rem; margin-bottom:13rem;}
	.boardSwiper .swiper-slide > a h3{font-size:16rem; line-height:1.4em;}
	.boardSwiper .swiper-slide > a .date{font-size:14rem;}
	.btn-navi .swiper-button-next{margin-left:26rem;}
	.btn-navi .swiper-button-next:after{left:-13rem;}
}
@media all and (max-width:480px){
	.lat_title{font-size:16rem;}
	.boardSwiper .swiper-slide,
	.boardSwiper .empty_li{height:150rem;}
	.boardSwiper .empty_li{font-size:12rem;}
	.boardSwiper .swiper-slide > a{padding:10rem;}
	.boardSwiper .swiper-slide > a em{font-size:10rem;}
	.boardSwiper .swiper-slide > a h3{font-size:13rem;}
	.boardSwiper .swiper-slide > a .date{font-size:11rem;}
}
*/