@charset "UTF-8";

/* 배너 */
.wrap-banner {position: relative; right: 100px; padding: 47px 0 60px 0; background: url('../images/bg-banner.jpg') no-repeat center top; opacity: 0;}
.wrap-banner .title {position: relative; right: -100px; overflow: hidden; opacity: 0;}
.wrap-banner .title .subject {float: right; margin-bottom: 49px; font-family: 'Play Regular'; font-size: 60px; line-height: 1; text-align: right; color: #727272;}
.wrap-banner .title .subject strong {display: block; margin-top: -2px; font-family: 'Play Bold'; font-size: 60px; color: #fcaf17;}

.wrap-banner .control {float: right; margin-top: 21px; margin-right: 20px; font-size: 0;}
.wrap-banner .control button {width: 30px; height: 30px; background-color: #fff !important; border-radius: 100%; text-indent: -99999px;}
.wrap-banner .control .prev {background: url('../images/ic-banner-prev.png') no-repeat center;}
.wrap-banner .control .prev:hover {background-color: #000 !important; background: url('../images/ic-banner-prev-hover.png') no-repeat center;}
.wrap-banner .control .next {background: url('../images/ic-banner-next.png') no-repeat center;}
.wrap-banner .control .next:hover {background-color: #000 !important; background: url('../images/ic-banner-next-hover.png') no-repeat center;}
.wrap-banner .control .stop {display: none; margin: 0 5px; background: url('../images/ic-banner-stop.png') no-repeat center;}
.wrap-banner .control .stop:hover {background-color: #000 !important; background: url('../images/ic-banner-stop-hover.png') no-repeat center;}
.wrap-banner .control .play {display: none; margin: 0 5px; background: url('../images/ic-banner-play.png') no-repeat center;}
.wrap-banner .control .play:hover {background-color: #000 !important; background: url('../images/ic-banner-play-hover.png') no-repeat center;}
.wrap-banner .control .stop.on,
.wrap-banner .control .play.on {display: inline-block;}

.wrap-banner .slider li {float: left; width: 25%; }
.wrap-banner .slider .thumb img {width: 100%;}
.wrap-banner .slider .slick-slide {margin: 0 30px;}
.wrap-banner .slider .slick-list {margin: 0 -30px;}
.wrap-banner .slider .con {text-align: center;}
.wrap-banner .slider .con p {padding-top: 12px; font-family: 'Dream Light'; font-size: 16px; color: #666;}
.wrap-banner .slider .con strong {position: relative; overflow: hidden; display: block; display: -webkit-box; padding-top: 2px; font-family: 'Dream Regular'; font-size: 16px; color: #000; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}

@media all and (max-width: 1700px) {
  .wrap-banner .slider .slick-slide {margin: 0 20px;}
  .wrap-banner .slider .slick-list {margin: 0 -20px;}
}

@media all and (max-width: 1400px) {
  .wrap-banner .slider .slick-slide {margin: 0 10px;}
  .wrap-banner .slider .slick-list {margin: 0 -10px;}
}

@media all and (max-width: 1200px) {
  .wrap-banner {padding: 60px 0 70px 0;}
  .wrap-banner .title .subject {margin-bottom: 33px; font-size: 60px;}
  .wrap-banner .title .subject strong {font-size: 70px;}
  .wrap-banner .control {margin-top: 30px; margin-right: 30px;}
}

@media all and (max-width: 768px) {
  .wrap-banner {padding: 52px 0 60px 0;}
  .wrap-banner .title .subject {margin-bottom: 33px; font-size: 40px;}
  .wrap-banner .title .subject strong {font-size: 50px;}
  .wrap-banner .control {margin-top: 12px; margin-right: 20px;}
}