@charset "utf-8";

/* 라이브 */
.wrap-live {padding: 10rem 0;}
.wrap-live .title {display: flex; justify-content: space-between;}
.wrap-live .title strong {position: relative; left: -10rem; font-family: sb; font-size: 5.2rem; line-height: 1; color: #000; opacity: 0;}
.wrap-live .control {position: relative; right: -10rem; display: flex; align-items: center; opacity: 0;}
.wrap-live .control button {width: 5.5rem; height: 5.5rem; border: 1px solid #d8d8d8; border-radius: 100%; text-indent: -9999rem;}
.wrap-live .control button.prev {margin-right: 1rem; background: url('../images/btn-live-prev.png') no-repeat center;}
.wrap-live .control button.next {background: url('../images/btn-live-next.png') no-repeat center;}
.wrap-live .control button:hover {border-color: #555;}
.wrap-live .list {display: flex; align-items: center; margin-top: 5rem;}
.wrap-live .sns {position: relative; top: 10rem; width: 13.5rem; opacity: 0;}
.wrap-live .sns li {padding: .75rem 0;}
.wrap-live .sns .ico a {display: block; width: 5.5rem; height: 5.5rem; text-indent: -9999rem; background-size: cover !important;}
.wrap-live .sns .ico1 a {background: url('../images/btn-live-sns1.png') no-repeat;}
.wrap-live .sns .ico1 a:hover {background: url('../images/btn-live-sns1-on.png') no-repeat;}
.wrap-live .sns .ico2 a {background: url('../images/btn-live-sns2.png') no-repeat;}
.wrap-live .sns .ico2 a:hover {background: url('../images/btn-live-sns2-on.png') no-repeat;}
.wrap-live .sns .ico3 a {background: url('../images/btn-live-sns3.png') no-repeat;}
.wrap-live .sns .ico3 a:hover {background: url('../images/btn-live-sns3-on.png') no-repeat;}
.wrap-live .sns .ico4 a {background: url('../images/btn-live-sns4.png') no-repeat;}
.wrap-live .sns .ico4 a:hover {background: url('../images/btn-live-sns4-on.png') no-repeat;}
.wrap-live .slider {overflow: hidden; width: calc(100% - 13.5rem);}
.wrap-live .slider .swiper-slide {position: relative; right: 10rem; width: calc(100% - 38rem); opacity: 0;}
.wrap-live .slider .swiper-slide-next .thumb {opacity: .5;}
.wrap-live .slider a {display: flex; margin: 1px;}
.wrap-live .slider .thumb {width: 38rem;height: 38rem;}
.wrap-live .slider .thumb img {border-radius: 4rem; width: 100%;height: 100%;object-fit: cover;object-position: center top;}
.wrap-live .slider .desc {width: calc(100% - 38rem); padding-left: 7rem; padding-top: 8rem;}
.wrap-live .slider .desc .big {display: block; font-family: pbl; font-size: 2.6rem; color: #000;}
.wrap-live .slider .desc .big em {position: relative; overflow: hidden; display: -webkit-inline-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical;}
.wrap-live .slider .desc .big em::after {content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: rgba(0,0,0,.5); transition: width .35s;}
.wrap-live .slider a:hover .desc .big em::after {width: 100%;}
.wrap-live .slider .desc .small {overflow: hidden; display: -webkit-box;  margin-top: 2rem; font-family: pr; font-size: 1.8rem; color: #555555; line-clamp: 3; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.wrap-live .slider .desc .date {display: block; margin-top: 2rem; font-family: pr; font-size: 1.6rem; color: #969696;}
.wrap-live .slider .desc .more {display: inline-block; width: 3.2rem; height: 3.2rem; margin-top: 2rem; background: url('../images/btn-live-link.png') no-repeat center top / cover; text-indent: -9999rem;}
.wrap-live .slider a:hover .desc .more {background-position: center bottom !important;}

@media screen and (max-width: 1580px) {
	.wrap-live .slider .swiper-slide {width: 100%;}
}

@media screen and (max-width: 1100px) {
	.wrap-live {padding: 8rem 0;}
	.wrap-live .title strong {font-size: 4.8rem;}
	.wrap-live .sns {width: 9rem;}
	.wrap-live .slider {width: calc(100% - 9rem);}
	.wrap-live .slider .desc {padding-top: 4rem; padding-left: 5rem;}
	.wrap-live .slider .desc .small {margin-top: 3rem;}
}

@media screen and (max-width: 980px) {
	.wrap-live .slider .thumb {width: 31rem;height: 31rem;}
	.wrap-live .slider .desc {width: calc(100% - 31rem); padding-top: 1.2rem;}
}

@media screen and (max-width: 830px) {
	.wrap-live .slider .thumb {width: 23rem;height: 23rem;}
	.wrap-live .slider .desc {width: calc(100% - 23rem); padding-top: 1.2rem; padding-left: 3rem;}
	.wrap-live .slider .desc .small {line-clamp: 2; -webkit-line-clamp: 2;}
}

@media screen and (max-width: 650px) {
	.wrap-live {padding: 6rem 0;}
	.wrap-live .title strong {font-size: 3.6rem;}
	.wrap-live .control button {width: 4.5rem; height: 4.5rem; background-size: 37% !important;}
	.wrap-live .list {align-items: flex-start; margin-top: 2.5rem;}
	.wrap-live .sns {margin-top: -1rem; padding-top: 0;}
	.wrap-live .slider a {flex-direction: column; align-items: flex-start;}
	.wrap-live .slider .thumb {width: 100%;height: 36rem;}
	.wrap-live .slider .thumb img {width: 100%;}
	.wrap-live .slider .desc {width: 100%; padding-left: 0;}
	.wrap-live .slider .desc .small {margin-top: 2rem; line-clamp: 3; -webkit-line-clamp: 3;}
}