@charset "UTF-8";

/* SNS */
.wrap-sns .subject {font-family: 'Dream Medium'; font-size: 32px; font-style: italic; line-height: 1.2; color: #fff;}
.wrap-sns .sns-list {position: absolute; right: 0; top: 58px;}
.wrap-sns .sns-list li {position: relative; display: inline-block; margin-right: 10px; padding-right: 13px;}
.wrap-sns .sns-list li::after {content: ''; position: absolute; right: 0; top: 12px; width: 3px; height: 3px; background: #aaa; }
.wrap-sns .sns-list li:last-child {padding-right: 0; margin-right: 0;}
.wrap-sns .sns-list li:last-child::after {display: none;}
.wrap-sns .sns-list button {font-family:'Klavika Medium'; font-size: 18px; color: #aaa;}
.wrap-sns .sns-list li:hover button,
.wrap-sns .sns-list .on button {color: #fff;}
#facebookFeed {padding-left: 390px; padding-top: 75px;}
#facebookFeed li {padding-bottom: 39px;}
#facebookFeed li:last-child {padding-bottom: 0;}
#facebookFeed li:nth-child(4) {display: none;}
#facebookFeed a {display: table; width: 100%; table-layout: fixed;}
#facebookFeed .thumb {position: relative; display: table-cell; width: 150px;}
#facebookFeed .desc {display: table-cell; padding: 30px; background: rgba(0,0,0,.4); font-family: 'Dream Regular'; font-size: 0; vertical-align: top; color: #c9c9c9;}
#facebookFeed .desc span {overflow: hidden; position: relative; top: 3px; display: inline-block; height: 83px; font-size: 15px; line-height: 1.4;}
#facebookFeed a:hover .desc {color: #fff;}
#facebookFeed .deco {position: absolute; right: 0; bottom: 0; width: 50px; height: 50px; background: #2e5bb6 url('../images/ic-sns-facebook.png') no-repeat center center; text-indent: -99999px;}
#facebookFeed .first {position: absolute; left: 0; top: 66px; width: 350px;}
#facebookFeed .first .thumb { overflow: hidden; display: block; width: 100%; height: 350px;}
#facebookFeed .first .thumb img {display:block; width: 100%; height: 100%; position:relative; left:50%; transform:translate(-50%,0); max-width:none;}
#facebookFeed .first .desc {width: 100%; display: block; width: 100%; padding: 10px 20px 7px 20px; font-family: 'Dream Medium'; font-size: 17px; letter-spacing: -1px; color: #fff;}
#facebookFeed .first .desc span {height: 47px; line-height: 1.5;}
#facebookFeed .first .deco {position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: rgba(27,65,141,.5) url('../images/ic-sns-facebook2.png') no-repeat center center; text-indent: -99999px; opacity: 0; transition: 1s;}
#facebookFeed .first:hover .deco {opacity: 1; transition: 1s;}

#facebookFeed .ani {bottom: -100px}
.ani-on #facebookFeed .ani {bottom: 0;}
.ani-on #facebookFeed .ani1 {transition-delay: 0s;}
.ani-on #facebookFeed .ani2 {transition-delay: .2s;}
.ani-on #facebookFeed .ani3 {transition-delay: .4s;}
.ani-on #facebookFeed .ani4 {transition-delay: .6s;}

#naverFeed {padding-top: 65px;}
#naverFeed ul {padding: 5px 20px 20px 20px; background: rgba(0,0,0,.4);}
#naverFeed li {padding: 18px 0; border-bottom: 1px dotted rgba(255,255,255,.2);}
#naverFeed li:last-child {border: 0; padding-bottom: 0;}
#naverFeed a {display: block; padding-left: 50px; padding-right: 10px; background: url('../images/ic-list-blog.png') no-repeat left top;}
#naverFeed strong {overflow: hidden; display: block; max-height: 25px; margin-bottom: 11px; font-family: 'Dream Medium'; font-size: 16px; line-height: 1.5; color: #fff;}
#naverFeed p {overflow: hidden; height: 55px; font-family: 'Dream Regular'; font-size: 14px; line-height: 1.3; color: rgba(255,255,255,.7);}
#naverFeed p span {position: relative; background: linear-gradient(to bottom, transparent 97%, rgba(255,255,255,.64) 0) left center no-repeat; background-size: 0; transition: background-size 1s;}
/* 웹접근성으로 인해 수정 */ #naverFeed p span img {display: none;}
#naverFeed a:hover p span {background-size: 100% auto;}

.list-sns {display: none;}
.list-sns.on {display: block;}

@media all and (max-width: 1660px) {
    .wrap-sns .sns-list {top: 6px;}
    #facebookFeed .desc {padding: 20px;}
    #naverFeed {padding-top: 25px;}
    #naverFeed li {padding: 26px 0;}
}

@media all and (max-width: 1500px) {
    #facebookFeed .thumb {display: none;}
    #facebookFeed {padding-top: 29px;}
    #facebookFeed li {padding-bottom: 14px;}
    #facebookFeed li:nth-child(4) {display: block;}
    #facebookFeed .desc span {height: 86px;}
}

@media all and (max-width: 1300px) {
    .wrap-sns .sns-list {left: 0; right: auto; top: auto; bottom: -60px;}
}

@media all and (max-width: 1200px) {
    #facebookFeed li:not(.first) {display: none;}
    #facebookFeed .first {width: 100%;}
}

@media all and (max-width: 900px) {
    .wrap-sns .subject {font-size: 26px;}
    .wrap-sns .sns-list {left: auto; right: 0; top: 33px; bottom: auto;}
    .wrap-sns .sns-list a {font-size: 16px;}
    #facebookFeed {padding-top: 53px; padding-left: 350px;}
    #facebookFeed li {padding-bottom: 15px;}
    #facebookFeed li:not(.first) {display: block;}
    #facebookFeed li:nth-child(4) {display: none;}
    #facebookFeed .thumb {display: table-cell; width: 150px;}
    #facebookFeed .first .thumb img {max-height: 299px;}
    #facebookFeed .first .thumb {height: 300px;}
    #facebookFeed .desc {padding: 22px 20px;}
    #facebookFeed .desc span {overflow: hidden; display: inline-block; height: 100px; background: none; line-height: 1.7;}
    #facebookFeed .first {top: 41px; width: 300px;}
    #facebookFeed .first .desc {padding: 14px 20px; font-size: 15px;}
    #facebookFeed .first .desc span {width: 100%; height: 30px; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;}
    #naverFeed {padding-top: 45px;}
}

@media all and (max-width: 770px) {
    .wrap-sns .sns-list {top: 2px;}
    #facebookFeed .thumb {display: none;}
    #facebookFeed {padding-top: 9px;}
    #facebookFeed .desc span {height: 123px;}
    #naverFeed {padding-top: 20px;}
}

@media all and (max-width: 630px) {
    .wrap-sns {padding-bottom: 30px;}
}
@media all and (max-width: 500px) {
    .wrap-sns {padding-bottom: 0px;}
    .wrap-sns .subject {text-align: center;}
    .wrap-sns .sns-list {position: static;}
    .wrap-sns .sns-list ul {margin-top: 17px; margin-bottom: 22px; text-align: center;}
    #facebookFeed {padding-top: 0; padding-left: 80px; padding-right: 80px;}
    #facebookFeed .first a {box-shadow: none;}
    #facebookFeed .slick-arrow {position: absolute; top: 37%; z-index: 10; width: 45px; height: 80px; text-indent: -9999px;}
    #facebookFeed .slick-prev {right: 105%; background: url('../images/btn-youtube-prev2.png') no-repeat left center; transition: 1s;}
    #facebookFeed .slick-prev:hover {background-position: right center;}
    #facebookFeed .slick-next {left: 105%; background: url('../images/btn-youtube-next2.png') no-repeat right center; transition: 1s;}
    #facebookFeed .slick-next:hover {background-position: left center;}
    #facebookFeed .first {position: static; display: block; width: 100%;}
    #facebookFeed .first .thumb {height: auto;}
    #facebookFeed .first .thumb img {width: 100%;}
    #facebookFeed .thumb {display: block; width: 100%;}
    #facebookFeed .thumb img {width: 100%;}
    #facebookFeed .desc {display: block; padding: 14px 20px; font-size: 15px; color: #fff;}
    #facebookFeed .desc span {width: 100%; height: 30px; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; line-height: 30px;}
    #naverFeed {padding-top: 0px;}
}