@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; 
    border-radius: 10px;
}
.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_x_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;bottom:0;right: 10px;z-index: 9}
.layer-share-view p{
    width: 75px;
    
}
.layer-share-view > p{
    border:1px solid #ccc;
    border-radius: 40px;
    margin: 8px 0;
    height: 30px;
}
.layer-share-view p button{
    width: 17px;
    height: 17px;
    background-image: url('../image/icons/social_btn.svg');
    background-position: center;
    background-size: 17px;
    margin: 6px 10px 10px 10px;
}
.layer-share-view p:hover{cursor: pointer}
.layer-share-view p span{
    font-size: 13px;
    letter-spacing: -.065em;
    line-height: 28.5px;
}

.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: 7px 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_x_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;
    border-radius: 10px;
    margin: 0 0 3px 0;
}

.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;
}