@charset "UTF-8";

.main-social {background: #F4F5F8; padding: 100px 0;}
.main-social > div {line-height: 0;}
.main-social-inner {max-width: 1710px; margin: 0 auto; overflow: hidden; padding: 0 20px;}
.main-social-inner .main-social-bx {float: left; width: 17%;}
.main-social-inner .main-social-title strong {display: inline-block; font-family: "Gm"; font-size: 45px; line-height: 50px; color: #000000; font-weight: 600; word-break: break-all;}
.main-social-inner .main-social-title strong span {display: block;}
.main-social-inner .main-social-title p {font-size: 18px; line-height: 20px; letter-spacing: -0.5px; color: #666666; margin: 15px 0; word-break: break-all;}

.main-social-inner .main-social-list {margin-bottom: 40px;}
.main-social-inner .main-social-list ul {overflow: hidden;}
.main-social-inner .main-social-list li {float: left; margin-right: 5px;}
.main-social-inner .main-social-list li a {display: block; width: 38px; height: 38px;}
.main-social-inner .main-social-list li a.facebook {background: url("../images/btn_facebook.png") no-repeat;}
.main-social-inner .main-social-list li a.cafe {background: url("../images/btn_navercafe.png") no-repeat;}
.main-social-inner .main-social-list li a.blog {background: url("../images/btn_naverblog.png") no-repeat;}
.main-social-inner .main-social-list li a.youtube {background: url("../images/btn_youtube.png") no-repeat;}

.main-social-inner .main-social-list li a.facebook:hover {background: url("../images/btn_facebook_on.png") no-repeat;}
.main-social-inner .main-social-list li a.cafe:hover {background: url("../images/btn_navercafe_on.png") no-repeat;}
.main-social-inner .main-social-list li a.blog:hover {background: url("../images/btn_naverblog_on.png") no-repeat;}
.main-social-inner .main-social-list li a.youtube:hover {background: url("../images/btn_youtube_on.png") no-repeat;}

.main-social-btn button {display: inline-block; width: 58px; height: 58px; border: 1px solid #CCCCCC; transition: background 0.3s;}
.main-social-btn .prev {background: #fff url("../images/btn_media_prev.png") no-repeat center;}
.main-social-btn .next {background: #fff url("../images/btn_media_next.png") no-repeat center;}

.main-social-btn .prev:hover {background: #909090 url("../images/btn_media_prev_on.png") no-repeat center;}
.main-social-btn .next:hover {background: #909090 url("../images/btn_media_next_on.png") no-repeat center;}

.main-social-inner .social-slider {float: left; width: 83%; padding-left: 20px;}
.main-social-inner .social-slider ul {margin: 0 -20px;}
.main-social-inner .social-slider li {padding: 0 20px;}
.main-social-inner .social-slider li a {display: block;}
.main-social-inner .social-slider .img-bx {position: relative; width: 100%; height: 240px; overflow: hidden;}
.main-social-inner .social-slider .img-bx-inner {position: absolute; width: 100%; height: 100%; left: 0; top: 0; transform: scale(1); transition: transform 0.5s;}
.main-social-inner .social-slider .img-bx .img-video-btn {position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.4) url("../images/ic_video_play.png") no-repeat center;}

.main-social-inner .social-slider .img-info {padding: 13px 6%; background: #fff; margin-top: 5px;}
.main-social-inner .social-slider .img-info .title {font-size: 16px; line-height: 25px; letter-spacing: -0.5px; color: #333333; height: 50px; overflow: hidden;}
.main-social-inner .social-slider .img-info .hashtag {margin-top: 15px; font-size: 14px; line-height: 20px; letter-spacing: -0.1px; color: #0054a6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.main-social-inner .social-slider li a:hover .title {text-decoration: underline;}
.main-social-inner .social-slider li a:hover .img-bx-inner {transform: scale(1.1);}

@media all and (max-width: 1023px){
  .main-social {padding: 50px 0;}
  .main-social-inner .main-social-title strong {font-size: 30px; line-height: 40px;}
  .main-social-inner .main-social-title p {font-size: 12px; line-height: 14px; margin: 10px 0 15px;}

  .main-social-inner .main-social-list {margin-bottom: 25px;}
  .main-social-inner .main-social-list li a {width: 24px; height: 24px;}
  .main-social-inner .main-social-list li a.facebook {background-size: 24px auto;}
  .main-social-inner .main-social-list li a.cafe {background-size: 24px auto;}
  .main-social-inner .main-social-list li a.blog {background-size: 24px auto;}
  .main-social-inner .main-social-list li a.youtube {background-size: 24px auto;}

  .main-social-inner .main-social-list li a.facebook:hover {background-size: 24px auto;}
  .main-social-inner .main-social-list li a.cafe:hover {background-size: 24px auto;}
  .main-social-inner .main-social-list li a.blog:hover {background-size: 24px auto;}
  .main-social-inner .main-social-list li a.youtube:hover {background-size: 24px auto;}

  .main-social-btn button {width: 35px; height: 35px;}
  .main-social-btn .prev {background-size: 10px auto;}
  .main-social-btn .next {background-size: 10px auto;}

  .main-social-inner .social-slider ul {margin: 0 -15px;}
  .main-social-inner .social-slider li {padding: 0 15px;}

  .main-social-inner .social-slider .img-info {padding: 6px 6%;}
  .main-social-inner .social-slider .img-info .title {font-size: 12px; line-height: 16px; height: 32px; }
  .main-social-inner .social-slider .img-info .hashtag {font-size: 11px; margin-top: 5px;}
}

@media all and (max-width: 500px){
  .main-social {padding: 30px 0;}
  .main-social-inner {position: relative; padding-bottom: 75px;}
  .main-social-inner .main-social-bx {float: none; width: 100%; text-align: center;}
  .main-social-inner .main-social-title strong {font-size: 20px; line-height: 30px;}
  .main-social-inner .main-social-title strong span {display: inline;}
  .main-social-inner .main-social-title p {display: none;}

  .main-social-inner .main-social-list {margin: 10px 0 20px;}
  .main-social-inner .main-social-list li {float: none; display: inline-block;}
  .main-social-inner .main-social-list li a {width: 38px; height: 38px;}
  .main-social-inner .main-social-list li a.facebook {background-size: 38px auto;}
  .main-social-inner .main-social-list li a.cafe {background-size: 38px auto;}
  .main-social-inner .main-social-list li a.blog {background-size: 38px auto;}
  .main-social-inner .main-social-list li a.youtube {background-size: 38px auto;}

  .main-social-inner .main-social-list li a.facebook:hover {background-size: 38px auto;}
  .main-social-inner .main-social-list li a.cafe:hover {background-size: 38px auto;}
  .main-social-inner .main-social-list li a.blog:hover {background-size: 38px auto;}
  .main-social-inner .main-social-list li a.youtube:hover {background-size: 38px auto;}
  .main-social-inner .social-slider {float: none; width: 100%; padding-left: 0;}

  .main-social-btn {position: absolute; width: 100%; left: 0; bottom: 0;}
  .main-social-btn button {width: 58px; height: 58px;}
  .main-social-btn .prev {background-size: 11px auto;}
  .main-social-btn .next {background-size: 11px auto;}
}