.vertical-wrapper { float: left; display: block; position: relative; } 
#vertical-slider { width: 100px; height: 550px; float: left; overflow: hidden; position: relative; float: right; display: block; }
#vertical-slider ul { width: 100px; height: 100%; margin: 0; padding: 0; flex-flow: row; position: absolute; left: 0; top: 0; z-index: 999; } 
#vertical-slider ul li { width: 90px; height: 90px; float: left; display: inline; text-align: center; overflow: hidden; margin: 0 0 15px 0; border: 2px solid rgba(0,0,0,0); box-sizing: border-box; background-size: cover; background-repeat: no-repeat; position: relative; cursor: pointer; background-position: center; border: 2px solid #d8d6e4; }
#vertical-slider ul li.active { border: 2px #ff9a75 solid; } 
#vertical-slider ul li img { width: auto; height: 100%; text-align: center; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } 
#vertical-slider ul li iframe { width: 100%; height: 100px; } 

.horizon-wrapper { padding: 0; float: left; position: relative; margin-left: 15px; } 
#horizon-slider { width: 550px; height: 550px; float: left; overflow: hidden; position: relative; margin-top: 0px; float: right; display: block; padding-bottom: 15px; } 
#horizon-slider ul { width: 100%; height: 100%; margin: 0; padding: 0; flex-flow: row; position: absolute; left: 0; top: 0; z-index: 999;  }
#horizon-slider ul li { width: 550px; height: 550px !important; float: left; display: inline; text-align: center; overflow: hidden; background-size: cover !important; background-repeat: no-repeat; position: relative; background-position: center; object-fit: cover; }
#horizon-slider.zoomin ul li { cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAABd0lEQVQ4EY3BP0sbYQDA4d97QpATsjj0g3RzkYJV0lFKMwhNNosugh/BpV0kTs3Y3UH6JyII7+LgeDgE14iDipMILqb8Sjlyd54KeR4oNdnkKLlmHB7DJb/oMsurAhvJHSIiImK4os2LGuwjzrvlwKFnHrjunIjsEagJ7CNue2/VrR0R2aVmA/GHL9kRkRYVzeQOt31NW+ScGQqbOO+9pW8OLF3YEFmhcIRbVuE7q1ZF+kwk1ziwChet+i5ySmGMQ3Nf7dgR39ix68DcociIifCIZ+aaIiIifjL3W2TERLjEA3M3ZmbiWzMzH8z1RE4o/MR1q3DRqpZIj0IX57y11PSjpaGJyAKF2XCFny3d+ODE2CWRjCfaiDs+N/aLiCxTs4fY9sKqoUsiIpGUJwK7iA1X7XvoH3t+MBEREYmk1LQ4R0RERCTjPRERiaTUzLBMn1NGjDihxwL/pUREJJIylZSIiERSppISEZFjppQSkb+sMbWUY9bgHyb0+ODUzKBbAAAAAElFTkSuQmCC),-webkit-zoom-in; }
#horizon-slider.zoomout ul li { cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAABVklEQVQ4y6WTvUoDQRRGz64QRCGNb2PtD1qmMIUQU6nEJuAjWNlIUsXS3kIElYBgY2EZLIJtJIVKqljYJHIsds0mazYofreb+52ZO3fuQKI8BzTDV4bBIOhySZl5MhVQCfs4GcELxen2HOeIS1a9tu2jF+65GGF1gp+7nyMe+u64epYi5CQNVBDPnKajCNkYt+fDPh6apaLIE3MJcIBLqWLG9WxOZD0Bmlh1lgoipyN/+IrXM4GGyENywhDbcerYnVGUR9vciHSSng7wMU7lJ55tK169SgFdvIhTb7bG4iNerYncJyVd4u7MO2yK1BKgjIv2Mu1tQ5HlBJgPXrCUYR+6ItKaHI0i4tFU+37UgNX0NNURiz6niln57tgdC+l5PUHMWbDhjVfW3Ixqz0Rgg6f0B6LFKnfZyBxrnPJAhw731OLOLMxCputfyC38BflkG36P3LINX/eTArMN3xYiAAAAAElFTkSuQmCC),-webkit-zoom-in; }
#horizon-slider ul li img { width: auto; height: 100%; text-align: center; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none;
user-select: none; } 
#horizon-slider ul li iframe { width: 100%; height: 500px; } 

.horizone-nav { width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 0; z-index: 1023; visibility: hidden; }
.horizon-wrapper:hover .horizone-nav { visibility: visible; }
.horizone-nav .prev, .horizone-nav .next { width: 40px; height: 40px; background: rgba(0, 0, 0, 0.3); color: #fff; text-align: center; border-radius: 50px; cursor: pointer; position: relative; line-height: 52px; }
.horizone-nav .prev { float: left; margin-left: 10px; }
.horizone-nav .next { float: right; margin-right: 10px; }
.horizone-nav .next i  { margin-left: 5px; }
.horizone-nav .prev i  { margin-right: 5px; }
.horizone-nav .prev .left { position: absolute; top: 12px; left: 15px; z-index: 7; cursor: pointer; }
.horizone-nav .next .right { position: absolute; top: 12px; right: 15px; z-index: 7; cursor: pointer; }

.vertical-nav { width: 0px; position: absolute; top: 0; bottom: 0; left: -40px; margin: auto; height: 100%; visibility: hidden; z-index: 1023; }
.vertical-wrapper:hover .vertical-nav  { visibility: visible; }
.vertical-nav .prev, .vertical-nav .next { width: 40px; height: 40px; position: absolute; left: 0; right: 0; margin: 0 auto; background: rgba(0, 0, 0, 0.3); color: #fff; text-align: center; border-radius: 50px; }
.vertical-nav .prev {  top: 10px; line-height: 50px; } 
.vertical-nav .next { bottom: 10px; } 
.vertical-nav .next i  { margin-left: 0px; margin-top: 5px; }
.vertical-nav .prev i  { margin-right: 0px; }
.vertical-nav .prev .up { margin-left: 3px; cursor: pointer; }
.vertical-nav .next .down { margin-left: 3px; cursor: pointer; }

.horVerSlider { padding: 0; float: left; display: block; position: relative; }
.horVerSlider i { border-width: 0 3px 3px 0; display: inline-block; font-size: 34px; } 
.horVerSlider .right { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); padding: 7px; border-width: 0 2px 2px 0; } 
.horVerSlider .left { transform: rotate(135deg); -webkit-transform: rotate(135deg); padding: 7px; border-width: 0 2px 2px 0; }
.horVerSlider .up { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); padding: 4px; }
.horVerSlider .down { transform: rotate(45deg); -webkit-transform: rotate(45deg); padding: 4px; }
.horVerSlider .dots { position: absolute; left: 0; right: 0; bottom: -20px; z-index: 1000; height: 10px; margin: auto; display: none; }
.horVerSlider .dots .dotwrap { margin: 0; padding: 0; height: 10px; display: flex; justify-content: center; } 
.horVerSlider .dots .dotwrap > div { width: 8px; height: 8px; display: inline-block; border-radius: 4px; background: #ced4da; content: ""; margin: 0 7px; cursor: pointer; } 
.horVerSlider .dots .dotwrap > div.active { background: #ff9a75; }
.horVerSlider .close { position: fixed; right: 32px; top: 32px; width: 32px; height: 32px; opacity: 0.3; cursor: pointer; display: none; z-index:1000; }
.horVerSlider .close:hover { opacity: 1; }
.horVerSlider .close:before, .horVerSlider .close:after { position: absolute; left: 15px; content: ' '; height: 33px; width: 2px; background-color: #333; z-index:999; }
.horVerSlider .close:before { transform: rotate(45deg); } 
.horVerSlider .close:after { transform: rotate(-45deg); }

/* fullscreen mode css */
.fullscreen { display: none; }
.horVerSlider.fullscreen { width: 1175px; height: 100%; position: fixed; top: 0; left: 0; right:0; background: rgba(255,255,255,1); display: flex; justify-content: center;
align-items: center; box-sizing: border-box; z-index: 1025; margin: auto; }
.horVerSlider.fullscreen:before { width: 100%; height: 100%; position: fixed; top: 0; left:0; z-index:998; content:""; background: #fff; }
.horVerSlider.fullscreen #horizon-slider { width: 600px; height: 600px; }
.horVerSlider.fullscreen #horizon-slider ul li{ height: 100% !important; }
.horVerSlider.fullscreen #horizon-slider ul li iframe { margin: 100px 0; }
.horVerSlider.fullscreen #vertical-slider { margin-right: 50px; }
.horVerSlider.fullscreen #vertical-slider:before { background: #fff; }
.horVerSlider.fullscreen .close { display: block; } 
.horVerSlider.fullscreen .vertical-wrapper { display: none; }