@charset "UTF-8";

.wrap-media {padding: 70px 0; text-align: center;}
.wrap-media .title {padding: 90px 0 0 0;}
.wrap-media .title strong {font-family: 'Mont Bold'; font-size: 60px; color: #000;}
.wrap-media .title p {font-family: 'Roboto'; font-weight: 300; font-size: 21px; color: #666;}
.wrap-media .list {position: relative;}
.wrap-media .list .link-list {display: none;}
.wrap-media .list .link-list li {display: inline-block;}
.wrap-media .list .box-list {display: inline-block; width: 100%; vertical-align: middle;}
.wrap-media .list .tab {position: relative; display: inline-block; padding: 0 40px; font-family: 'Roboto'; font-weight: 500; font-size: 20px; vertical-align: middle; color: #aaa;}
.wrap-media .list .tab.facebook:hover {color: #2e5bb6;}
.wrap-media .list .tab.instagram:hover {color: #963bb1;}
.wrap-media .list .tab.youtube:hover {color: #f50012;}
.wrap-media .list .tab::after {content: ''; position: absolute; right: 0; top: 49%; width: 3px; height: 3px; background: #aaa;}
.wrap-media .list .link-list li:last-child .tab::after {display: none;}
.wrap-media .detail {display: block; max-width: 1479px; margin: 0 auto;}
.wrap-media .detail .slick-slider li {float: left; width: 33.333%; padding: 21px; text-align: center;}
.wrap-media .detail .slick-slider li a {display: block;}
.wrap-media .detail .thumb {opacity: 0; overflow: hidden; position: relative; top: 60px; height: 0px; padding: 61% 0 0 0;}
.multipleDiv.on .wrap-media .thumb {opacity: 1; top: 0; transition: .75s;}
.multipleDiv.edit .wrap-media .thumb{opacity: 1;}
.multipleDiv.on .wrap-media .slick-slide:nth-child(1) .thumb {transition-delay: 0s;}
.multipleDiv.on .wrap-media .slick-slide:nth-child(2) .thumb {transition-delay: .4s;}
.multipleDiv.on .wrap-media .slick-slide:nth-child(3) .thumb {transition-delay: .8s;}
.wrap-media .detail .thumb img {position: absolute; left: 0; top: 0; width: 100%; transform: scale(1); transition: .8s;}
.wrap-media .detail .thumb:hover img {transform: scale(1.1);}
.wrap-media .detail .thumb::after {display: none; content: ''; position: absolute; right: 0; bottom: 0; width: 60px; height: 60px;}
.wrap-media .detail .thumb.facebook::after {background: url('../images/ico-media1.png') no-repeat center center;}
.wrap-media .detail .thumb.instagram::after {background: url('../images/ico-media2.png') no-repeat center center;}
.wrap-media .detail .thumb.youtube::after {background: url('../images/ico-media3.png') no-repeat center center;}
.wrap-media .detail .thumb:hover::after {display: none;}
.wrap-media .detail .thumb .over {position: absolute; left: 0; top: 0; display: table; width: 100%; height: 100%; opacity: 0; transition: .4s;}
.wrap-media .detail .thumb:hover .over {opacity: 1;}
.wrap-media .detail .thumb .btn {display: table-cell; vertical-align: middle; background: rgba(46,91,182,.8);}
.wrap-media .detail .thumb .btn span {padding: 10px 70px 10px 20px; background: url('../images/arrow-media.png') no-repeat 85% center; border: 1px solid rgba(255,255,255,.4); border-radius: 100px; font-family: 'Mont Medium'; font-size: 12px; color: #fff;}
.wrap-media .detail .desc {display: none; text-align: left;}
.wrap-media .detail .desc .sns {display: inline-block; width: 100%; margin: 25px 0 0 0; font-family: 'Mont Bold'; font-size: 14px; color: #2e5bb6;}
.wrap-media .detail .desc .sns.facebook {color: #2e5bb6;}
.wrap-media .detail .desc .sns.instagram {color: #963bb1;}
.wrap-media .detail .desc .sns.youtube {color: #f50012;}
.wrap-media .detail .desc p {position: relative; overflow: hidden; font-family: 'Roboto'; font-size: 18px; color: #000; white-space: nowrap; text-overflow: ellipsis;}
.wrap-media .control {font-size: 0;}
.wrap-media .control li,
.wrap-media .control button {display: inline-block; vertical-align: middle;}
.wrap-media .control button {width: 13px; height: 13px; margin: 0 5px; background: #eaeaea; border-radius: 100%; text-indent: -99999px;}
.wrap-media .control .slick-active button {background: #2e5bb6;}
.wrap-media .control .slick-dots {margin: 40px 0 0 0;}
.footer-btn {font-size: 16px; color: #ffffff !important; transition: all .2 ease}
.footer-btn:hover {color: #99def5 !important}
@media all and (max-width:700px) {
    .wrap-media {padding: 55px 0;}
}


@media all and (max-width: 1023px) {
	.wrap-media .detail {
		max-width: 100%;
	}
	.wrap-media .detail .slick-slider li {
		padding: 21px 0;
	}

	.wrap-media .detail .slick-slide {
		width: 100% !important;
	}
}