@charset "UTF-8";

._fnctWrap {line-height:1.5;}

.sns-popup {position:relative; z-index:90;}

.main-sns-tab {margin-bottom: 35px;}
.main-sns-tab > p {float: left; font-family: "Roboto"; font-size: 40px; line-height: 46px; color: #fff; font-weight: 900;}
.main-sns-tab > p span.blue {color: #00baee;}
.main-sns-tab > ul {float: right; margin-right: -10px;}
.main-sns-tab > ul > li {float: left; padding: 0 10px;}
.main-sns-tab > ul > li > a {position: relative; display: block; font-size: 20px; text-indent: -99999px; width: 50px; height: 50px; line-height: 35px; letter-spacing: 0; font-family: "Roboto"; font-weight: 600; color: #fff; transition: all ease 1s 0s;}
.main-sns-tab > ul > li:hover > a {transform: rotateY(360deg);}
.main-sns-tab > ul > li > a.fb {background: url("../images/fb.png") no-repeat center;}
.main-sns-tab > ul > li > a.yb {background: url("../images/youtube.png") no-repeat center;}
.main-sns-tab > ul > li > a.it {background: url("../images/insta.png") no-repeat center;}
.main-sns-tab > ul > li > a.nb {background: url("../images/blog.png") no-repeat center;}
/*.main-sns-tab > ul > li > a::before {content: ""; position: absolute; width: 0; height: 3px; left: 50%; bottom: 0; background: #fff; transition: all 0.3s;}
.main-sns-tab > ul > li > a::after {content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #fff; top: 5px; left: 50%; margin-left: -3.5px; transition: all 0.3s;}


.main-sns-tab > ul > li > a._active, .main-sns-tab > ul > li > a:hover {color: #fff;}
.main-sns-tab > ul > li > a._active::before, .main-sns-tab > ul > li > a:hover::before {left: 0; width: 100%;}
.main-sns-tab > ul > li > a._active::after, .main-sns-tab > ul > li > a:hover::after {}*/

.sns-popup .slider {margin: 0 -20px;}
.sns-popup .slider .slick-slide > div {padding: 0 20px;}
.sns-popup .slider li {position: relative; padding-bottom: 70px; width: 290px; height: 360px;}
.sns-popup .slider li a {display: block;}
.sns-popup .slider li img {width:100%; max-width: 290px;}
.main-sns-img {width: 290px; height: 290px;}

.main-sns-info {position: absolute; width: 260px; height: 130px; background: #fff; left: 0; bottom: 20px; box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.3); padding: 15px 20px; z-index: 3; transition: bottom 0.3s;}

.main-sns-info .sns-icon p {font-size: 16px; line-height: 32px; letter-spacing: 0; padding-left: 35px; font-family: "Roboto";}
.main-sns-info .sns-icon .facebook {color: #4066aa; background: url("../images/btn_facebook.png") no-repeat left center; background-size: 26px auto;}
.main-sns-info .sns-icon .insta {color: #E1306C; background: url("../images/btn_insta.png") no-repeat left center; background-size: 26px auto;}
.main-sns-info .sns-icon .youtube {color: #E60C13; background: url("../images/btn_youtube.png") no-repeat left center; background-size: 26px auto;}
.main-sns-info .sns-icon .blog {color: #00CA30; background: url("../images/btn_blog.png") no-repeat left center; background-size: 26px auto;}

.main-sns-info .title {font-size: 16px; line-height: 26px; letter-spacing: -0.5px; color: #2c2c2c; height: 52px; overflow: hidden; text-overflow: ellipsis; margin: 10px 0 15px; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all; display: -webkit-box;
 }
.main-sns-info .title  span {background-image: linear-gradient(transparent 96%, #2c2c2c 1px);    background-repeat: no-repeat;
    background-size: 0 100%;    transition: background-size 0.5s; }
.main-sns-info .date {font-size: 16px; color: #888888; padding-left: 30px; background: url("../images/ic_date.png") no-repeat left center; font-family: "Roboto";}

.sns-popup .control {display: none; text-align:center; position:absolute; bottom:20px; left:50%; transform:translate(-50%,0); background:rgba(0,0,0,0.6); padding:2px 6% 0 6%;  border-radius:100px; }
.sns-popup .control .paging {display:inline-block;}
.sns-popup .control .paging ul {display:inline-block;}
.sns-popup .control .paging li {float:left; margin:0 2px;}
.sns-popup .control .paging li.slick-active button {width:22px; background:url('../images/pop-dot-on.png') no-repeat center center; position:relative;}
.sns-popup .control .paging li button {width:12px; height:22px; background:url('../images/pop-dot-off.png') no-repeat center center; text-indent:-9999px;}
.sns-popup .control .playstop {display:inline-block; position:relative; top:-5px; margin:0 0 0 4px;}
.sns-popup .control .playstop button {display:none; text-indent:-9999px;}
.sns-popup .control .playstop button.on {display:inline-block;}
.sns-popup .control .play {width:22px; height:22px; background:url('../images/pop-play.png') no-repeat center center;}
.sns-popup .control .stop {width:22px; height:22px; background:url('../images/pop-stop.png') no-repeat center center;}

.sns-popup-btn {display: none;}

.sns-popup .slider li a:hover .main-sns-info {bottom: 30px;}
.sns-popup .slider li a:hover .title span {background-size: 100% 100%;}

@media all and (max-width:1055px) {
  .sns-popup-btn {display: block; text-align: center;}
  .prevnext-inner {display: inline-block;}
  .prevnext-inner > button {display: block; position: absolute; top: 30%; width: 30px; height: 30px; cursor: pointer;}
  .prevnext-inner > button.prev {background: url("../images/btn_sns_prev.png") no-repeat center; left: 0;}
  .prevnext-inner > button.next {background: url("../images/btn_sns_next.png") no-repeat center; right: 0;}
}

@media all and (max-width:768px) {
  .main-sns-tab {margin-bottom: 20px; text-align: center;}
  .main-sns-tab > p {float: none; margin-bottom: 20px; font-size: 30px; line-height: 40px;}
  .main-sns-tab > ul {float: none; margin-right: 0; display: inline-block;}
  .main-sns-tab > ul > li {width: 25%; text-align: center; padding: 0px;}
  .main-sns-tab > ul > li > a {display: inline-block; padding-top: 5px; font-size: 18px; word-break: break-all; line-height: 28px;}
  .main-sns-tab > ul > li > a::after {top: -5px;}

  .sns-popup .slider {text-align: center;}
  .main-sns-img {width: 280px; height: 280px;}
  .sns-popup .slider li {max-width: 280px; margin: 0 auto; text-align: left; padding-bottom: 70px;}

  .main-sns-info {width: 250px; height: 115px; padding: 10px 25px;}
  .main-sns-info .title {font-size: 16px; line-height: 24px; height: 48px;}
}

@media all and (max-width: 500px){
  .main-sns-tab > ul > li {margin-bottom: 15px; padding: 0px;}
  .main-sns-tab > ul > li > a {font-size: 16px;}
}

/*@media all and (max-width: 410px){
  .main-sns-tab > ul > li {width: 50%;}
}*/