@charset "UTF-8";

@media all and (max-width:480px){
    
    .sticky-menu{z-index: 9;top:0;right:0;width: 40%;height: 60px;background: #fff}
    .sticky-menu > ul{float: right;margin: 0 15px 0 0}
    .sticky-menu > ul > li{float: left;margin: 0 0 0 4px !important}
    .sticky-menu > ul > li > p{width: 20px;padding: 5px;display: inline-block}
    .sticky-menu > ul > li > p span{position: relative;right: 10px}
    .sticky-menu > ul > li > p span img{vertical-align: middle;position: absolute}
    
    .layer-comment{display: none}
    .layer-print{display: none}

    .layer-share p span i img{width: 26px !important;margin: 2px 0 0 0}
    .layer-clip p span i img{width: 24px !important}
    .layer-font-size p span i img{width: 30px !important}
    .layer-popup{right: 0;top:67px;display: none}
    .layer-popup-view{position: absolute;top:50px}
    .share-popup{right: -38px}

}
@media all and (min-width:481px) and (max-width:767px){
     
    .sticky-menu{z-index: 9;top:0;right:0;height: 60px;background: #fff}
    .sticky-menu > ul{float: right;margin: 0 15px 0 0}
    .sticky-menu > ul > li{float: left;margin: 5px 0 0 4px !important}
    .sticky-menu > ul > li > p{width: 30px;padding: 5px;display: inline-block}
    .sticky-menu > ul > li > p span{position: relative;right: 10px}
    .sticky-menu > ul > li > p span img{vertical-align: middle;position: absolute}
    
    .layer-comment{display: none}
    .layer-print{display: none}
    
    .layer-share p span i img{width: 26px !important;margin: 2px 0 0 0}
    .layer-clip p span i img{width: 24px !important}
    .layer-font-size p span i img{width: 30px !important}
    .layer-popup{right: 0;top:67px;display: none}
    .layer-popup-view{position: absolute;top:50px}
}
@media all and (min-width:768px) and (max-width:1024px){
    
    .sticky-menu{z-index: 9;top:0;right:0;height: 60px;background: #fff}
    .sticky-menu > ul{float: right;margin: 0 15px 0 0}
    .sticky-menu > ul > li{float: left}
    .sticky-menu > ul > li > p{height: 30px;padding: 5px}
    .sticky-menu > ul > li > p span{display: inline-block}
    
    .layer-comment{display: none}
    .layer-print{display: none}
    
    .layer-share p span i img{width: 26px !important;margin: 2px 0 0 0}
    .layer-clip p span i img{width: 24px !important}
    .layer-font-size p span i img{width: 30px !important}
    .layer-popup{right: 0;top:67px;display: none}
    .layer-popup-view{position: absolute;top:62px}

}
@media all and (min-width:1025px) and (max-width:1199px){
    
    .sticky-menu{z-index: 9;top:120px;left:20px;border:1px solid #ccc;border-radius: 10px;background: #fff}
    .sticky-menu > ul{padding: 20px 0}
    .sticky-menu > ul > li{padding: 10px 0}
    .sticky-menu > ul > li > p{width: 50px;padding: 10px}
    
    .layer-popup{left: 80px;top:0;display: none}

    .layer-share-view{display: none}
    
}
@media all and (min-width:1200px){
    
    .sticky-menu{z-index: 9;top:120px;left:20px;border:1px solid #ccc;border-radius: 10px;background: #fff}
    .sticky-menu > ul{padding: 20px 0}
    .sticky-menu > ul > li{padding: 10px 0}
    .sticky-menu > ul > li > p{width: 50px;padding: 10px}
    
    .layer-popup{left: 80px;top:0;display: none}

    .layer-share-view{display: none}
    
}

/*sticky-menu*/
.sticky-menu{position: fixed}

.sticky-menu > ul > li{padding: 10px 0;position: relative}
.sticky-menu > ul > li > p{text-align: center}
.sticky-menu > ul > li > p:hover{cursor: pointer;opacity: 0.8}
.sticky-menu > ul > li > p span{line-height: 1.6;display: block;font-size: 0.8em}
.sticky-menu > ul > li > p span i img{width: 25px;vertical-align: middle}

.sticky-menu > ul > li > p button{ line-height: 1.6; outline:none; }
.sticky-menu > ul > li > p button i{ width: 25px; height:25px; display: inline-block; background-repeat:no-repeat; background-size:cover; }
.sticky-menu > ul > li.layer-share > p > button i{ background-image:url("../image/icons/social_btn.svg"); }
.sticky-menu > ul > li.layer-comment > p > button i{ background-image:url("../image/icons/comment_icon.svg"); }
.sticky-menu > ul > li.layer-print > p > button i{ background-image:url("../image/icons/print_btn.svg"); }
.sticky-menu > ul > li.layer-font-size > p > button i{ background-image:url("../image/icons/fontsize_icon.svg"); }


.layer-popup{position: absolute;display: none;width: 250px;background: #fff;border-radius: 5px;border:1px solid #ccc;padding: 10px}

.layer-popup .layer-header{}
.layer-popup .layer-header p{width: 100%}
.layer-popup .layer-header p span{display: block;font-size: 0.9em;line-height: 1.2}
.layer-popup .layer-header p span strong{font-weight: 700;line-height: 1.7}

.layer-popup .layer-body ul{overflow: hidden;padding: 10px 0 0 0}
.layer-popup .layer-body ul li{float: left;width: 25%;text-align: center}
.layer-popup .layer-body ul li:hover{cursor: pointer}
.layer-popup .layer-body ul li span{font-size: 0.85em;width: 90%;margin: 0 auto;display: block;letter-spacing: -0.4px;color: #111;font-weight: 600}
.layer-popup .layer-body ul li span i img{width: 40px}

.layer-popup .layer-body ul li span i{ width:40px; height:40px; background-repeat: no-repeat; background-size:cover; display:inline-block; }
.layer-popup .layer-body ul li span.link-share-kakao i{ background-image:url("../image/icons/sticky/kakaotalk_icon.svg"); }
.layer-popup .layer-body ul li span.link-share-facebook i{ background-image:url("../image/icons/sticky/facebook_icon.svg"); }
.layer-popup .layer-body ul li span.link-share-twitter i{ background-image:url("../image/icons/sticky/twitter_icon.svg"); }
.layer-popup .layer-body ul li span.link-share-copy i{ background-image:url("../image/icons/sticky/link_icon.svg"); }


.fs-wrap li{width: 20% !important}
.fs-wrap li button{width: 40px;height: 40px;border-radius: 100%;border:1px solid #dfdfdf;color: #111}

.sticky-close{position: absolute;right: 10px;top:10px}
.sticky-close span i{}
.sticky-close span i img{width: 15px}

.sticky-close span i{ width:15px; height:15px; background-repeat:no-repeat; background-size:cover; background-image: url("../image/icons/close_icon.svg"); display:inline-block; }
/*sticky-menu*/

#fs1{font-size: 0.8em}
#fs2{font-size: 0.9em}
#fs3{font-size: 1em}
#fs4{font-size: 1.1em}
#fs5{font-size: 1.2em}

/**/
.layer-share-view{position: absolute;top:15px;right: 10px;z-index: 9}
.layer-share-view p{width: 30px;height: 30px}
.layer-share-view p button{
    width: 30px;
    height: 30px;
    background-image: url('../image/icons/social_btn.svg');
    background-position: center;
    background-size: 30px;
}
.layer-share-view p:hover{cursor: pointer}

.layer-popup-view{display: none;right:0;width: 250px;background: #fff;border-radius: 5px;border:1px solid #ccc;padding: 10px}
.layer-popup-view .layer-header-view{}
.layer-popup-view .layer-header-view p{width: 100%}
.layer-popup-view .layer-header-view p span{display: block;font-size: 0.9em;line-height: 1.2}
.layer-popup-view .layer-header-view p span strong{font-weight: 700;line-height: 1.7}

.layer-popup-view .layer-body-view ul{overflow: hidden;padding: 10px 0 0 0}
.layer-popup-view .layer-body-view ul li{float: left;width: 25%;text-align: center}
.layer-popup-view .layer-body-view ul li:hover{cursor: pointer}

.layer-popup-view .layer-body-view ul li:nth-child(1) span i button{
    background-image: url('../image/icons/sticky/kakaotalk_icon.svg');
    background-position: center;
    background-size: 40px;
}
.layer-popup-view .layer-body-view ul li:nth-child(2) span i button{
    background-image: url('../image/icons/sticky/facebook_icon.svg');
    background-position: center;
    background-size: 40px;
}
.layer-popup-view .layer-body-view ul li:nth-child(3) span i button{
    background-image: url('../image/icons/sticky/twitter_icon.svg');
    background-position: center;
    background-size: 40px;
}
.layer-popup-view .layer-body-view ul li:nth-child(4) span i button{
    background-image: url('../image/icons/sticky/link_icon.svg');
    background-position: center;
    background-size: 40px;
}

.layer-popup-view .layer-body-view ul li span{font-size: 0.85em;width: 90%;margin: 0 auto;display: block;letter-spacing: -0.4px;color: #111;font-weight: 600}

.layer-popup-view .layer-body-view ul li span i button{width: 40px;height: 40px}

.sticky-close-view{
    position: absolute;
    right: 10px;
    top:10px;
    width: 20px;
    height: 20px;
    background-image: url('../image/icons/close_icon.svg');
    background-position: center;
    background-size: 20px;
}