/* 2017-01-03 소셜쉐어 */
/* 소셜쉐어 공통 */
.sns_comm .ico_sns {
  display: inline-block;
  overflow: hidden;
  background: url(https://t1.daumcdn.net/media/img-media/mobile/m320/social/ico_sns_170103.png)
    0 0 no-repeat;
  background-size: 276px 76px;
  font-size: 1px;
  line-height: 0;
  color: transparent;
  vertical-align: top;
}
.type_normal .ico_sns {
  width: 35px;
  height: 35px;
}
.sns_comm {
  overflow: hidden;
}
.sns_comm .list_sns {
  float: left;
}
.sns_comm .list_sns .link_sns {
  display: block;
}
.sns_comm .list_sns li {
  float: left;
}
.sns_comm .list_sns li + li {
  padding-left: 5px;
}
.sns_comm .link_more {
  float: left;
  padding-left: 5px;
}

/* 소셜쉐어 NormalType */
.type_normal .ico_sns_kt {
  background-position: 0 0;
}
.type_normal .ico_sns_face {
  background-position: -80px 0;
}
.type_normal .ico_sns_twi {
  background-position: -120px 0;
}
.type_normal .ico_sns_cafe {
  background-position: -160px 0;
}
.type_normal .ico_sns_mail {
  background-position: -200px 0;
}
.type_normal .ico_more {
  background-position: -240px 0;
}

/* 소셜쉐어 Black Type */
.type_black .ico_sns_kt {
  background-position: 0 -40px;
}
.type_black .ico_sns_face {
  background-position: -80px -40px;
}
.type_black .ico_sns_twi {
  background-position: -120px -40px;
}
.type_black .ico_sns_cafe {
  background-position: -160px -40px;
}
.type_black .ico_sns_mail {
  background-position: -200px -40px;
}
.type_black .ico_more {
  background-position: -240px -40px;
}

/* 공유버튼 */
.btn_share .ico_share {
  display: block;
  overflow: hidden;
  background: url(https://t1.daumcdn.net/media/img-media/mobile/m320/social/ico_share_170103.png)
    0 0 no-repeat;
  background-size: 44px 160px;
  font-size: 1px;
  line-height: 0;
  color: transparent;
}
.btn_share {
  display: inline-block;
}
.btn_share .ico_share {
  width: 42px;
  height: 45px;
}
.btn_share .ico_share_w {
  background-position: 0 -50px;
}
.btn_share .ico_share_s {
  width: 28px;
  height: 30px;
  background-position: 0 -98px;
}
.btn_share .ico_share_sw {
  width: 28px;
  height: 30px;
  background-position: 0 -130px;
}

/* 레이어 */
.type_layer .img_social {
  display: block;
  overflow: hidden;
  background: url(//t1.daumcdn.net/daumtop_deco/socialshare/images/mo/m640/img_social_231103.png)
    0 0 no-repeat;
  background-size: 330px 110px;
  font-size: 1px;
  line-height: 0;
  color: transparent;
}
.type_layer {
  position: absolute;
  z-index: 9999;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.6);
}
.type_layer .inner_sns {
  position:relative;
  margin:0 auto;
  width:280px;
  height:280px;
  background-color:#fff
}
.type_layer .list_sns {
  overflow: hidden;
  float: none;
  padding: 48px 17px 0;
}
.type_layer.sns_comm .list_sns li {
  width: 68px;
  height: 88px;
  padding: 0 7px;
}
.type_layer .list_sns {
  font-size: 12px;
  color: #000;
  text-align: center;
  white-space: nowrap;
}
.type_layer .list_sns .img_social {
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 auto 7px;
}
.type_layer .ico_sns_kt {
  background-position-x: 0;
}
.type_layer .ico_sns_face {
  background-position-x: -104px;
}
.type_layer .ico_sns_twi {
  background-position-x: -156px;
}
.type_layer .ico_sns_cafe {
  background-position-x: -260px;
}
.type_layer .ico_sns_mail {
  background-position-x: -208px;
}
.type_layer .tf_url {
  position: relative;
  display: block;
  overflow: hidden;
  height: 38px;
  margin: 0 16px;
  border: 1px solid #E0E0E0;
  font-size: 13px;
  line-height: 40px;
  background-color: #f8f8f8;
  white-space: nowrap;
  color: #118EFF;
  text-overflow: ellipsis;
}
.type_layer .btn_close {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 10px;
}
.type_layer .ico_close {
  display: block;
  width: 16px;
  height: 16px;
  background-position: -312px 0;
}
.tf_url .txt_url {
  display:block;
  overflow:hidden;
  padding:0 70px 0 10px;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.tf_url .txt_copy {
  position: absolute;
  top:0;
  right:0;
  width:60px;
  height:100%;
  border-left:1px solid #E0E0E0;
  text-align:center;
  background-color:#fff;
  color:#333;
  font-size:12px;
}
/* 다크모드 대응 */
.social_dark .type_layer .img_social, .social_dark .type_layer .ico_close {
  background-position-y: -55px;
}
.social_dark .type_layer .inner_sns {
  background-color: #383838;
}
.social_dark .sns_comm .list_sns .link_sns {
  color: #CFCFCF;
}
.social_dark .type_layer .tf_url {
  background-color: #2D2D2D;
  border-color: #4c4c4c;
}
.social_dark .tf_url .txt_copy {
  border-color: #4c4c4c;
  background-color: #383838;
  color: #CFCFCF;
}

/* toast message */
.pop_toast{
  position: fixed;
  left: 15px;
  bottom: 15px;
  width: calc(100% - 30px);
  height: 45px;
  border-radius: 5px;
  z-index: 10;
  font-size: 15px;
  text-align: center;
  line-height: 45px;
  color: #fff;
  background: rgba(0,0,0,0.7);
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (min-device-pixel-ratio: 1.5),
  only screen and (min-resolution: 1.5dppx) {
  .sns_comm .ico_sns {
    background-image: url(https://t1.daumcdn.net/media/img-media/mobile/m640/social/ico_sns_170103.png);
  }
  .btn_share .ico_share {
    background-image: url(https://t1.daumcdn.net/media/img-media/mobile/m640/social/ico_share_170103.png);
  }
  .type_layer .img_social {
    background-image: url(//t1.daumcdn.net/daumtop_deco/socialshare/images/mo/m640/img_social_231103.png);
  }
}