@charset "utf-8";

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}
body.locked {box-sizing: border-box;}

button {border: 0;background: transparent;}

.mobile-storyin .story-share-wrap {position: absolute;top: 6px;right: 10px;z-index: 10000;}
.mobile-storyin.locked #wrap {overflow: hidden;}

.story-share-wrap * {box-sizing: border-box;}

.story-share-wrap {display: inline-flex;position: relative;font-size: 16px;z-index: 10;box-sizing: border-box}
.story-share-wrap .btn-ssw-share {display: flex;align-items: center;justify-content: center;gap: 8px;background-color: rgba(0,0,0,.5);height: 32px;padding: 0 10px 0 15px;border-radius: 100vw;border: 0;color: #fff;font-size: 16px !important;cursor: pointer}
.story-share-wrap .btn-ssw-share span {color: inherit;}
.story-share-wrap .btn-ssw-share:after {content: '';width: 13px;height: 18px;background: url(/story/intro/images/ico-ssw-share.png) no-repeat 0 0;flex-shrink: 0}

.story-share-wrap .ssw-list {display: none;position: absolute;z-index: 10;top: 50px;right: -20px;width: 320px;min-height: 140px;padding: 35px 20px 0px 10px;background: #fff;border-radius: 20px;box-shadow: 3px 3px 4px rgba(0,0,0,.2);}
.story-share-wrap .ssw-list .ssw-list-header {position: relative}
.story-share-wrap .ssw-list .ssw-list-header:before {content: '';position: absolute;top: -45px;right: 0;width: 0;height: 0;border: 15px solid transparent;border-top: 0;border-bottom: 20px solid #fff;}
.story-share-wrap .ssw-list .btn-ssw-close {position: absolute;top: -32px;right: -10px;width: 30px;height: 30px;text-indent: -9999em;cursor: pointer}
.story-share-wrap .ssw-list .btn-ssw-close:before {content: '';position: absolute;top: 14px;left: 4px;width: 24px;height: 3px;background-color: #000000;transform: rotate(135deg)}
.story-share-wrap .ssw-list .btn-ssw-close:after {content: '';position: absolute;top: 14px;left: 4px;width: 24px;height: 3px;background-color: #000000;transform: rotate(-135deg)}


.story-share-wrap .ssw-list ul {display: flex;flex-wrap: wrap;justify-content: center;gap: 10px}
.story-share-wrap .ssw-list ul li {margin: 0;padding: 0;}
.story-share-wrap .ssw-list ul li .btn-ssw {display: flex;align-items: center;justify-content: center;gap: 8px;color: #000;font-size: 16px !important;font-weight: 500;letter-spacing: -0.08em;font-family: inhert;cursor: pointer;border: 0;}
.story-share-wrap .ssw-list ul li .btn-ssw:before {content: '';width: 35px;height: 35px;background-image: url(/story/intro/images/ico-ssw.png); background-repeat: no-repeat;background-position: 0 0;}
.story-share-wrap .ssw-list ul li .btn-ssw-fb:before {background-position: 0 0}
.story-share-wrap .ssw-list ul li .btn-ssw-kakao:before {background-position: -35px 0}
.story-share-wrap .ssw-list ul li .btn-ssw-x:before {background-position: -70px 0}
.story-share-wrap .ssw-list ul li .btn-ssw-blog:before {background-position: -105px 0}
.story-share-wrap .ssw-list ul li .btn-ssw-url:before {background-position: -140px 0}

#footer.footer-new {border-top: 1px solid #777;}
#footer.footer-new .fn-links {border-bottom: 1px solid #777;}


@media (max-width: 1151px) {
	.mobile-storyin .story-share-wrap .btn-ssw-share {gap: 0;padding: 0;width: 36px;height: 36px;background-color: transparent}
	.mobile-storyin .story-share-wrap .btn-ssw-share:after {width: 18px;height: 24px;background: url(/story/intro/images/ico-ssw-share-mo.png) no-repeat 0 0;}
	.mobile-storyin .story-share-wrap .btn-ssw-share span.pc-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}

	.mobile-storyin .story-share-wrap .ssw-list {width: 160px;top: 45px;right: -5px;padding: 30px 10px 15px 10px;border-radius: 10px;box-shadow: 3px 4px 13px rgba(0,0,0,.3)}

	.mobile-storyin .story-share-wrap .ssw-list ul {flex-direction: column;gap: 5px;}
	.mobile-storyin .story-share-wrap .ssw-list ul li .btn-ssw {font-weight: 400}
	.mobile-storyin .story-share-wrap .ssw-list .btn-ssw-close {top: -28px;right: 0}
}
@media (min-width: 1152px) {
	.mobile-storyin .story-share-wrap {display: none}
}