@charset "utf-8";

/* 
	util menu - pointer events 속성을 사용함*추후 웹호환성 검사 시 제거 요망
	사용이유 - 좌 우 버튼을 감싸고 있는 div가 자식 콘텐츠의 링크를 방해함. 그래서 링크를 살리기 위해 사용함.
*/
#utilMenu {position:fixed;/*z-index:50;*/width:100%;height:60px; top:132px; padding-top:10px; -webkit-transition:all .3s ease; transition: all .3s ease; /*pointer-events:none;*/}
#utilMenu.scroll{position:fixed;}
#utilMenu.up {z-index:50;background-color:rgba(255, 255, 255, .90);border-bottom:1px solid #ddd;}
#utilMenu button {position:absolute;/* pointer-events:auto; */}
#utilMenu button:hover {/* background-position-x:-40px; 웹 호환성 문제 */}
	/* display */
	#utilMenu .back  {background:transparent; left:50px; font-size:0; padding:5px;} 
	#utilMenu .back > span{position:relative; overflow: visible; display:block; width:100%; height:100%; font-size:0; text-align:left;}
	#utilMenu .back > span:before{content:''; position:absolute; top:0; left:20%; height:50%; width:1px; background:#555; -webkit-transform:skew(135deg, 0deg); transform:skew(135deg, 0deg);}
	#utilMenu .back > span:after{content:''; position:absolute; bottom:0; left:20%; height:50%; width:1px; background:#555; -webkit-transform:skew(-135deg, 0deg); transform:skew(-135deg, 0deg);}
	#utilMenu .back > span > i{display:block; position:absolute; top:50%;  width:100%; height:1px; background:#555; text-align:left; }
	
	#utilMenu .share {position:absolute;right:43px;/* pointer-events:auto; */}
	#utilMenu .share > span {
		position:relative;z-index:1;display:block;width:40px;height:40px; right:0;
		text-indent:-999em;overflow:hidden;background-position:0 -520px;cursor:pointer;
	}
	#utilMenu .share.over > span {opacity:0.5;}
	#utilMenu .share p {position:absolute;top:0;width:170px;height:40px; opacity:0;}
	#utilMenu .share p em {float:left;width:50px;color:#555;text-align:right;line-height:40px;padding-right:10px;}
	#utilMenu .share p > a {float:left;display:block;}
		/* 공유 아이콘 */
		#utilMenu .share p a.social1 {background-position:0 0;}
		#utilMenu .share p a.social2 {background-position:-40px 0;}
		#utilMenu .share p a.social3 {background-position:-80px 0;}
		#utilMenu .share p a.social4 {display:none;background-position:-120px 0;} /* 카카오톡은 데스트탑에서 지원하지 않음 */
@media only screen and (max-width:1450px) {
	#utilMenu .back  {left:30px}
	#utilMenu .share {right:23px;}
}
		
@media only screen and (max-width:1000px) {
	#utilMenu {z-index:50;top:85px;height:50px;border-bottom:1px solid #ddd;background-color:rgba(255, 255, 255, .95);}
	#utilMenu.up {top:0;}
	#utilMenu.down {top:56px;}
		/* display */
		#utilMenu .back  {width:50px; height:49px; top:0;left:0; padding:13px 12px 13px 15px;}
		#utilMenu .share {top:0;right:10px;}
		#utilMenu .share > span {display:none;transform:scale(.85, .85);} /* 모바일에서는 공유 버튼은 안보임 */
		#utilMenu .share p {width:160px;top:5px;right:0;opacity:1;}
		#utilMenu .share p a.social4 {display:block;}
}

@media only screen and (max-width:414px) {
	#utilMenu {z-index:50;padding-top: 0;top:80px;height:12.077vw;/* top:53px;height:50px; */}
	#utilMenu.down {top:13.527vw; /* top:56px; */}
		/* display */
		#utilMenu .back  {width:12.077vw; height:11.836vw; padding:3.140vw 2.899vw 3.140vw 3.623vw; /* width:50px; height:49px; padding:13px 12px 13px 15px; */}
		#utilMenu .share {right:2.415vw;/* right:10px; */}
		#utilMenu .share p {width:38.647vw;top:1.208vw; /* width:160px;top:5px; */}

	#utilMenu .share > span {width:9.662vw;height:9.662vw; /* width:40px;height:40px; */}
	#utilMenu .share p {width: auto;height:9.662vw;/* width:170px;height:40px; */display: flex;align-items: center;justify-content: flex-start;}
	#utilMenu .share p em {width:12.077vw;line-height:9.662vw;padding-right:2.415vw;  /* width:50px;line-height:40px;padding-right:10px; */}	
	#utilMenu .share p > a{width:7.246vw;height:7.246vw; margin-left: 1.208vw;/* width:30px;height:30px; margin-left: 5px; */}
	#utilMenu .share p a.social1 {background:url('../../images/newMosf/content/icoShare-social1.png') center center / contain no-repeat;}
	#utilMenu .share p a.social2 {background:url('../../images/newMosf/content/icoShare-social2.png') center center / contain no-repeat;}
	#utilMenu .share p a.social3 {background:url('../../images/newMosf/content/icoShare-social3.png') center center / contain no-repeat;}
	#utilMenu .share p a.social4 {background:url('../../images/newMosf/content/icoShare-social4.png') center center / contain no-repeat;}
}