@charset "utf-8";

/* 넘버스 */
.wrap-numbers {padding: 73px 0 80px 0; background: url('../images/bg-numbers.jpg') no-repeat center top / cover; text-align: center;}
.wrap-numbers .title {position: relative; top: 100px; opacity: 0;}
.wrap-numbers .title .eng {display: block; font-family: pps; font-size: 20px; letter-spacing: 0; color: #8ac3ff;}
.wrap-numbers .title strong {display: block; padding-top: 23px; font-family: pp; font-size: 40px; line-height: 1.1; color: #fff;}
.wrap-numbers .title .btn-bro {position: absolute; right: 0; bottom: 0; display: flex; align-items: center; height: 50px; padding: 0 20px; background: #1069e7; border-radius: 3px; font-family: pps; font-size: 14px; color: #fff;}
.wrap-numbers .title .btn-bro::after {content: ''; display: block; width: 15px; height: 11px; margin-left: 25px; background: url('../images/btn-bro.png') no-repeat center;}
.wrap-numbers .list {position: relative; top: 100px; overflow: hidden;  padding-top: 84px; opacity: 0;}
.wrap-numbers .list li {padding: 0 30px; border-right: 1px solid rgba(255,255,255,.25); text-align: left;}
.wrap-numbers .list li.last-slide {border: 0;}
.wrap-numbers .list .slider {margin-right: -1px;}
.wrap-numbers .text {min-height: 75px;}
.wrap-numbers .text strong {font-family: pps; font-size: 25px; color: #fff;}
.wrap-numbers .text p {font-family: ppr; font-size: 19px; color: #dddddd;}
.wrap-numbers .number {display: flex; align-items: flex-end; padding-top: 39px;}
.wrap-numbers .number strong {font-family: pps; font-size: 58px; line-height: 1; color: #00baff;}
.wrap-numbers .number p {font-family: pps; font-size: 30px; color: #00baff;}
.wrap-numbers .control {position: relative; top: 100px; display: flex; justify-content: center; padding-top: 85px; opacity: 0;}
.wrap-numbers .paging ul {display: flex; justify-content: center;}
.wrap-numbers .paging li {width: auto; height: auto; padding: 0 5px; background: none; opacity: 1;}
.wrap-numbers .paging span {display: block; width: 8px; height: 8px; background: rgba(255,255,255,.5); border-radius: 100%; text-indent: -99999px;}
.wrap-numbers .paging span:hover {background: rgba(255,255,255,1);}
.wrap-numbers .paging .swiper-pagination-bullet-active span {width: 40px; background: rgba(255,255,255,1); border-radius: 4px;}
.wrap-numbers .playstop {padding-left: 5px;}
.wrap-numbers .playstop .stop,
.wrap-numbers .playstop .play {display: none; width: 6px; height: 8px; text-indent: -999999px;}
.wrap-numbers .playstop .stop {background: url('../images/btn-numbers-stop.png') no-repeat center;}
.wrap-numbers .playstop .play {background: url('../images/btn-numbers-play.png') no-repeat center;}
.wrap-numbers .playstop .stop.on,
.wrap-numbers .playstop .play.on {display: block;}

@media screen and (max-width: 1450px) {
  .wrap-numbers .title strong {font-size: 35px;}
  .wrap-numbers .title .btn-bro {height: 40px; padding: 0 17px;}
  .wrap-numbers .title .btn-bro::after {margin-left: 13px;}
  .wrap-numbers .list {padding-top: 50px;}
  .wrap-numbers .list li {padding: 0 25px;}
  .wrap-numbers .text strong {font-size: 20px;}
  .wrap-numbers .text p {font-size: 16px;}
  .wrap-numbers .number strong {font-size: 45px;}
  .wrap-numbers .number p {font-size: 20px;}
  .wrap-numbers .control {padding-top: 55px;}
}

@media screen and (max-width: 1100px) {
  .wrap-numbers {padding: 63px 0 70px 0;}
  .wrap-numbers .title strong {font-size: 30px;}
  .wrap-numbers .title .eng {font-size: 18px;}
  .wrap-numbers .title .btn-bro {height: 35px; padding: 0 13px; font-size: 12px;}
  .wrap-numbers .title .btn-bro::after {margin-left: 7px;}
  .wrap-numbers .list {padding-top: 35px;}
  .wrap-numbers .list li {padding: 0 20px;}
  .wrap-numbers .text strong {font-size: 18px;}
  .wrap-numbers .text p {font-size: 14px;}
  .wrap-numbers .number {padding-top: 40px;}
  .wrap-numbers .number strong {font-size: 35px;}
  .wrap-numbers .number p {font-size: 16px;}
  .wrap-numbers .control {padding-top: 38px;}
}

@media screen and (max-width: 800px) {
  .wrap-numbers .title strong {font-size: 25px;}
}

@media screen and (max-width: 650px) {
  .wrap-numbers {padding: 33px 0 40px 0;}
  .wrap-numbers .title .eng {font-size: 17px;}
  .wrap-numbers .title strong {padding-top: 3px; padding-bottom: 30px; font-size: 30px;}
  .wrap-numbers .title .btn-bro {position: static; display: inline-flex; font-size: 15px;}
  .wrap-numbers .text strong {font-size: 21px;}
  .wrap-numbers .text p {font-size: 18px;}
  .wrap-numbers .number p {font-size: 18px;}
  .wrap-numbers .number {padding-top: 20px;}
  .wrap-numbers .number strong {font-size: 35px;}
}