@charset "UTF-8";

/* SNS */
#menu355_obj1117 {overflow: visible;}
.wrap-air {position: relative; top: 100px; padding: 0 0 60px 0; background: url('../images/deco-air.png') no-repeat right top; opacity: 0;}
.wrap-air .container {position: relative; padding-left: 77px;}
.wrap-air .title {position: relative; left: -100px; top: 7px; margin-bottom: 53px; font-family: 'Play Regular'; font-size: 60px; line-height: 1; color: #727272; opacity: 0;}
.wrap-air .title strong {display: block; font-family: 'Play Bold'; font-size: 60px; color: #0056d6;}
.wrap-air .title .hash {position: absolute; left: 375px; top: 5px; font-family: 'Dream Regular'; font-size: 17px; line-height: 1.6; color: #555;}
.wrap-air .slider .slick-slide {margin: 0 38px 0 37px;}
.wrap-air .slider .slick-list {margin: 0 -38px 0 -37px;}
.wrap-air .slider .slick-slide > div {position: relative; top: 100px; opacity: 0; transition: 1s;}
.wrap-air.active .slider .slick-slide > div {top: 0; opacity: 1;}
.wrap-air.active .slider .slick-slide .slide-1 {transition-delay: 0.3s;}
.wrap-air.active .slider .slick-slide .slide0 {transition-delay: .5s;}
.wrap-air.active .slider .slick-slide .slide1 {transition-delay: .8s;}
.wrap-air.active .slider .slick-slide .slide2 {transition-delay: 1.1s;}
.wrap-air.active .slider .slick-slide .slide3 {transition-delay: 1.4s;}
/* .wrap-air .slider .slick-slide:nth-child(1), */
/* .wrap-air .slider .slick-slide:nth-child(3) {padding-top: 80px;} */
.wrap-air .control {position: absolute; left: 437px; bottom: 9px; font-size: 0;}
.wrap-air .control button {width: 30px; height: 30px; background-color: #fff !important; border: 1px solid #d1d1d1; border-radius: 100%; text-indent: -99999px;}
.wrap-air .control .prev {background: url('../images/ic-banner-prev.png') no-repeat center;}
.wrap-air .control .next {background: url('../images/ic-banner-next.png') no-repeat center;}
.wrap-air .control .stop {display: none; margin: 0 5px; background: url('../images/ic-banner-stop.png') no-repeat center;}
.wrap-air .control .play {display: none; margin: 0 5px; background: url('../images/ic-banner-play.png') no-repeat center;}
.wrap-air .control .stop.on,
.wrap-air .control .play.on {display: none;}
.wrap-air .list .thumb img {width: 100%;}
.wrap-air .list .sns {padding-top: 22px; font-family: 'Play Bold'; font-size: 18px;}
.wrap-air .list .sns.naver {color: #32b34a;}
.wrap-air .list .sns.insta {color: #ec1e7a;}
.wrap-air .list .sns.youtube {color: #e50000;}
.wrap-air .list .sns.facebook {color: #1f4aa3;}
.wrap-air .list .text {overflow: hidden; display: -webkit-box; padding-top: 5px; font-family: 'Dream Light'; font-size: 17px; color: #000; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.wrap-air .list .text span {position: relative; background: linear-gradient(to bottom, transparent 96%, rgba(0,0,0,0.64) 0) left center no-repeat; background-size: 0; transition: .4s;}
.wrap-air .list a:hover .text  span{background-size: 100% auto;}
.wrap-air .sns-link {position: absolute; right: 110%; top: 0; width: 110px; height: 100%; border-right: 1px solid #000; opacity: 0;}
.wrap-air .sns-link ul {display: flex; flex-direction: column-reverse; justify-content: center; align-items: center; gap: 35px 0 ; height: 100%;}
.wrap-air .sns-link li {position: relative; text-align: center;}
.wrap-air .sns-link li a {display: flex; flex-direction: column-reverse; font-family: 'Play Regular'; font-size: 17px; color: #212121;}
.wrap-air .sns-link li i {margin: -7.5px 0; transform: rotate(-90deg);}
.wrap-air .sns-link li i.icon {margin-top: 8px;}

@media all and (max-width: 1860px) {
  .wrap-air .sns-link {width: 75px;}
  .wrap-air .container {padding-left: 140px;}
  .wrap-air .sns-link {right: auto !important; left: 0;}
}

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

@media all and (max-width: 1670px) {
  .wrap-air {margin-top: 40px; padding: 60px 0 90px 0;}
}

@media all and (max-width: 1600px) {
  .wrap-air .container {padding: 0 20px;}
  .wrap-air .sns-link {left: 20px; right: auto; top: 163px; width: auto; height: auto; border: 0;}
  .wrap-air .sns-link ul {display: inline-block; flex-direction: row; height: auto; font-size: 0;}
  .wrap-air .sns-link li {display: inline-block; margin-right: 10px;}
  .wrap-air .sns-link li i {display: none; margin: 0; transform: rotate(0);}
  .wrap-air .sns-link li i.icon {display: block; margin: 0; width: 36px}
}

@media all and (max-width: 1365px) {
  .wrap-air .slider .slick-slide {margin: 0 15px;}
  .wrap-air .slider .slick-list {margin: 0 -15px;}
}

@media all and (max-width: 1200px) {
  .wrap-air {margin-top: 20px; padding: 28px 0 60px 0; background-size: 50% auto;}
  .wrap-air .title {margin-bottom: 85px; font-size: 60px;}
  .wrap-air .title strong {font-size: 70px;}
  .wrap-air .title .hash {display: none; left: 121px; font-size: 15px;}
  .wrap-air .list .sns {font-size: 16px;}
  .wrap-air .list .text {font-size: 15px;}
  .wrap-air .sns-link {top: 90px;}
  .wrap-air .slider .slick-slide:nth-child(1),
  .wrap-air .slider .slick-slide:nth-child(3) {padding-top: 0;}
  .wrap-air .control .stop.on,
  .wrap-air .control .play.on {display: inline-block;}
}

@media all and (max-width: 768px) {
  .wrap-air {padding: 24px 0 49px 0;}
  .wrap-air .title {margin-bottom: 69px; font-size: 40px;}
  .wrap-air .title strong {font-size: 50px;}
  .wrap-air .title .hash {left: 82px; top: 1px; font-size: 13px;}
  .wrap-air .sns-link {top: 70px;}
  .wrap-air .sns-link li i.icon {width: 30px;}
  .wrap-air .control {left: auto; right: 0; bottom: -43px;}
  .wrap-air .list .text {font-size: 14px; -webkit-line-clamp: 1;}
}

@media all and (max-width: 520px) {
  .wrap-air .title {padding: 0 20px;}
  .wrap-air .title .hash {left: 102px;}
  .wrap-air .container {padding: 0;}
  .wrap-air .control {right: 20px;}
  .wrap-air .list .sns,
  .wrap-air .list .text {display: none;}
  .wrap-air .slider .slick-track {overflow: hidden; display: flex; flex-wrap: wrap;}
  .wrap-air .slider .slick-current .sns,
  .wrap-air .slider .slick-current .text {display: block;}
  .wrap-air .slider .slick-slide {margin: 0; padding: 0 10px;}
  .wrap-air .slider .slick-slide > div {transition: 1s ease-in-out;}
  .wrap-air .slider .slide-1 {position: relative; top: 40px !important;}
  .wrap-air .slider .slide0 {position: relative; top: 0;}
  .wrap-air .slider .slide1 {position: relative; top: 40px !important;}
  .wrap-air .slider .slick-list {margin: 0;}
}