html,body{padding:0;margin:0;}

#viewer{position: fixed; left: 0; top: 50%; width: 100%; transform: translateY(-50%);}

#item_wrap{position: relative;width:100%;z-index: 10;}
#item_wrap>.item{position: relative;width:100%;}
#item_wrap>.item>.img{padding-top: 100%;padding-top:min(100vh, 100%);background-size:contain;background-repeat:no-repeat;background-position:50% 50%;}

#control_wrap{position:absolute; left:0; top:50%; width:100%; z-index: 20;}
#control_wrap>div{position:absolute;top:0;cursor:pointer;transition: 0.3s opacity; opacity: 0.6;transform:scale(2) translateY(-50%); filter:drop-shadow(1px 1px 3px #000e);}
#control_wrap>div:hover{opacity: 1;}
#control_wrap>.prev{left:5%;}
#control_wrap>.next{right:5%;}

#btn_fullscreen{position:absolute;top:3%;right:3%;z-index: 20;cursor: pointer; color:white; transition: 0.3s opacity; opacity: 0.6; transform: scale(1); filter: drop-shadow(1px 1px 3px #000e);font-size:0;}
#btn_fullscreen:hover{opacity: 1;}

.tns-nav{position:absolute; display:flex; max-width:80%; left:50%; transform:translateX(-50%); bottom:10%; z-index: 20;}
.tns-nav>button{position:relative; padding:5px 3px;background:none;border:none;opacity:0.3;transition:0.3s opacity;}
.tns-nav>button:before{content:'';display:block;position:relative;width:10px; height:10px;background-color:#fff; border-radius: 30px; filter: drop-shadow(1px 1px 3px #000e);}
.tns-nav>button:hover{opacity:0.8}
.tns-nav>button.tns-nav-active{opacity:1;}


@media (max-width:700px) {
	#control_wrap>div{transform:scale(1) translateY(-50%);}
}