.image_figure_wrap{position:fixed; top:0; left:0; right:0;  background:#323232; z-index:1000; overflow:hidden; transition-duration:0.2s ease;height:0;}
.image_figure_wrap.on{bottom:0; height:auto;}
.image_figure_progress_wrap{background:#1a1a1a; height:72px;}
.image_figure_progress{flex: 0 0 272px; box-sizing:border-box; border-right:1px solid #a3a3a3; }
.image_figure_progress > .dp_flex_wauto{gap:15px;}
.figure_top_title{color:#fff; font-weight:700; font-size:15px; padding:16px 20px; flex-grow: 1;}

.image_figure_progress button{border:0; width:24px; height:24px; font-size:0; cursor:pointer;}
.btn-secondary{background:url('https://www.m2-pi.com/images/viewer/zoom_in_icon.png') center center no-repeat;}
.btn-primary{background:url('https://www.m2-pi.com/images/viewer/zoom_out_icon.png') center center no-repeat;}
.figure_content{box-sizing:border-box; background:#fff; color:#666;  width:380px;}
.figure_content > div{padding:30px 25px; height:100%; box-sizing:border-box; overflow-y:auto;}

.figure_content > div::-webkit-scrollbar {
    width: 8px;
}
.figure_content > div::-webkit-scrollbar-track {
    background-color: #ccc;
}
.figure_content > div::-webkit-scrollbar-thumb { 
    background-color: #0075ff;
}
.figure_content > div::-webkit-scrollbar-button {
    display:none;}

.figure_content button.info{display:none;}

.figure_arrow button{position:absolute; border:0; background:rgba(0,0,0,0.3) url('https://www.m2-pi.com/images/viewer/figure_arrow.png') center center no-repeat; width:54px; height:54px; top:50%; margin-top:-27px; cursor:pointer;}
.figure_arrow button.prev{left:0;}
.figure_arrow button.next{right:0; transform: rotate(180deg);}
.figure_bottom_gallery{background:#fff; border-top:3px solid #0075ff; box-sizing:border-box; position:relative; transition-duration:0.3s; position:absolute; bottom:0; left:0; right:0;}
.figure_bottom_gallery .figure_gallery_wrap{padding:16px 35px; display:block;}

.figure_bottom_gallery .figure_gallery_wrap::-webkit-scrollbar {
    height: 8px;
}
.figure_bottom_gallery .figure_gallery_wrap::-webkit-scrollbar-track {
    background-color: #ccc;
}
.figure_bottom_gallery .figure_gallery_wrap::-webkit-scrollbar-thumb { 
    background-color: #0075ff;
}
.figure_bottom_gallery .figure_gallery_wrap::-webkit-scrollbar-button {
    display:none;}

.figure_toggle_btn{position:absolute; border:0; background:#0075ff; color:#fff; font-weight:700; text-align:center; height:35px; width:150px; border-radius:8px 8px 0 0; left:50%; margin-left:-75px; top:-38px; cursor:pointer;}
.figure_toggle_btn:before{content:''; display:inline-block; width:15px; height:10px; background:url('https://www.m2-pi.com/images/viewer/figure_gallery_arrow.png') center center no-repeat; margin-right:6px;}
.figure_toggle_btn:hover{background:#252525;}

.figure_bottom_gallery .figure_gallery_wrap{overflow-x:scroll;}
.figure_bottom_gallery .figure_gallery_wrap::-webkit-scrollbar {
    height: 8px;
}
.figure_bottom_gallery .figure_gallery_wrap::-webkit-scrollbar-track {
    background-color: #ccc;
}
.figure_bottom_gallery .figure_gallery_wrap::-webkit-scrollbar-thumb { 
    background-color: #0075ff;
}
.figure_bottom_gallery .figure_gallery_wrap::-webkit-scrollbar-button {
    display: none;
}

.figure_bottom_gallery.active{}
/*.figure_bottom_gallery.active .figure_gallery_wrap{display:none;}*/
/*.figure_bottom_gallery.active{padding:0; height:0;}*/
.figure_bottom_gallery.active .figure_toggle_btn:before{transform: rotate(180deg);}
/*.figure_bottom_gallery.active > .figure_gallery_wrap > .dp_flex{height:0; overflow:hidden;}*/

.figure_gallery_wrap > div{gap:10px;}
.figure_gallery_wrap h3{color:#484848; font-size:14px; font-weight:500; margin:0; line-height:1; margin-bottom:9px;}
.figure_gallery_button{display:block; border:0; position:relative; padding:0; cursor:pointer;}
.figure_gallery_button:hover{opacity:0.7;}
.figure_gallery_button:before{content:''; position:absolute; top:0px; left:0; right:0; bottom:0; border:1px solid #e1e1e1;}
.figure_gallery_button.active:before{border:3px solid #0075ff; top:-1px; left:-1px; right:-1px; bottom:-1px;}
.figure_gallery_wrap img{display:block; width:122px;}


.h100p{height:100%;}
.image_figure_wrap .h100p{height:calc(100% - 208px); transition: height 0.2s ease-in;}
.image_figure_wrap.active .h100p{height:calc(100% - 75px);}

.figure_close_btn button.close{border:0; background:rgba(0,117,255) url('https://www.m2-pi.com/images/viewer/figure_close.png') center center no-repeat; width:72px; height:72px; cursor:pointer;}

.figure-image-container-wrap{height:100%; width:100%; position:relative;}
#figure-image-container {
	position: relative; height:100%; flex-grow: 1; overflow:hidden;
}

@media (min-width: 1360px) {
	#figure-image-container img {
		transition: transform 0.1s linear; max-width:720px; position: absolute; cursor: grab;
	}
}

@media (min-width:959px) and (max-width:1360px) { div.wrapper {} 
	#figure-image-container img {
		transition: transform 0.1s linear; max-width:560px; position: absolute; cursor: grab;
	}
}

@media (max-width: 960px) {
	#figure-image-container img {
		transition: transform 0.1s linear; max-width:480px; position: absolute; cursor: grab;
	}
}

.progress { overflow:hidden;
	height:6px; cursor:pointer; border-radius:6px;
	width:109px;
	background-color: #ddd;
	position: relative;
}

.progress-bar {
	height: 100%;
	background-color: #4caf50;
	width: 0;
	transition: width 0.3s ease;
}

.button-container {
	text-align: center;
	margin-top: 20px;
}

.button-container button {
	margin: 0 5px;
}


@media screen and (max-width:960px){
.figure_arrow{display:none;}
.figure_top_title{display:none;}
.image_figure_wrap .h100p{position:relative; height: calc(100% - 181px);}
.image_figure_wrap.active .h100p{height: calc(100% - 59px);}
.figure_content{position:absolute; right:-380px; bottom:0; top:0; transition-duration:0.3s; z-index:10;}
.figure_content.active{right:0;}
.figure_content button.info{display:block; position:absolute; left:-60px; top:20px; border:2px solid #fff; background:transparent; font-size:18px; color:#fff; text-align:center; width:40px; height:40px; border-radius:50%; font-weight:600;}
.figure_content button.info{background:url('https://www.m2-pi.com/images/viewer/info_open_mark.svg') center center no-repeat;}
.figure_content.active button.info{background:url('https://www.m2-pi.com/images/viewer/info_close_mark.svg') center center no-repeat;}
.figure_content.active button{background:#000;}

.image_figure_progress_wrap{height:56px;}
.figure_close_btn button.close{width:56px; height:56px;}
.image_figure_progress{flex: 0 0 230px;}

/*.figure_bottom_gallery{height:125px;}*/

.figure_bottom_gallery .figure_gallery_wrap{padding:16px;}


}

@media screen and (max-width:460px){
.figure_content{width:70%; right:-70%;}
.figure_bottom_gallery .figure_gallery_wrap{overflow-x: auto;}

}