@charset "UTF-8";
.turnjs-slider { width: 600px; height: 8px; background: #aecab2; border-radius: 5px; margin: 20px auto; }

@media (max-width: 768px) { .turnjs-slider { width: 80%; } }

/* Layout helpers
----------------------------------*/
/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }

/* Misc visuals
----------------------------------*/
/* Overlays */
.turnjs-slider .ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.turnjs-slider .ui-slider { position: relative; text-align: left; }

.turnjs-slider .ui-slider-horizontal { height: 8px; width: calc(600px - (100% / 8)); margin-left: calc(100% / 8); }

.turnjs-slider .ui-slider-handle { position: absolute; z-index: 0; width: calc(100% / 7); height: 8px; cursor: default; border-radius: 5px; top: 0; }

.turnjs-slider .ui-slider-horizontal .ui-slider-handle { margin-left: calc(-100% / 7); }

@media (max-width: 768px) { .turnjs-slider .ui-slider-horizontal { height: 8px; width: 90%; width: calc(100% - (100% / 9)); width: calc(100% - (100% / 5)); width: calc(100% - (100% / 5 / 2)); margin-left: calc(100% / 9 / 2 - 1px); margin-left: calc(100% / 9); margin-left: calc(100% / 5); margin-left: calc(100% / 5 /2); }
  .turnjs-slider .ui-slider-handle { width: calc(100% / 9); width: calc(100% / 8); width: calc(100% / 4); width: calc(100% / 4 /2); }
  .turnjs-slider .ui-slider-horizontal .ui-slider-handle { margin-left: calc(-100% / 9 / 2); margin-left: calc(-100% / 8); margin-left: calc(-100% / 4); margin-left: calc(-100% / 4 / 2); } }

/* Interaction states
----------------------------------*/
.turnjs-slider .ui-slider-handle { background-color: #1c885f; cursor: pointer; display: block; transition: opacity 0.2s; }

.turnjs-slider .ui-state-hover { opacity: 0.4; }

.turnjs-slider .ui-state-active { opacity: 1; }

.magazine-viewport { position: absolute; width: 100%; height: 100%; z-index: 10; }

.magazine-viewport .container { position: absolute; top: 50%; left: 50%; margin: auto; }

.magazine-viewport .magazine { width: 1100px; height: 568px; left: -550px; top: calc(-568px / 2); }

.magazine-viewport .page { width: 550px; height: 568px; background-color: #fff; }

@media (max-width: 768px) { .magazine-viewport .container { position: absolute; top: 50%; left: 50%; margin: auto; max-width: none; padding: 0; }
  .magazine-viewport .magazine { height: 96.666vw; width: 95vw; top: -48.333vw; left: -47.5vw; }
  .magazine-viewport .page { height: 48.333vw; width: 47.5vw; } }

.magazine-viewport .page .pageimg { user-select: none; margin: 0; }

.magazine .even .gradient { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(left, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.2) 100%); display: none; }

.magazine .odd .gradient { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(right, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.15) 100%); display: none; }

.magazine-viewport .zoom-in .even .gradient, .magazine-viewport .zoom-in .odd .gradient { display: none; }

.magazine-viewport .loader { display: none; }

.magazine-viewport .next-button, .magazine-viewport .previous-button { width: 100px; height: 200px; position: absolute; top: 50%; transform: translate(0, -50%); z-index: 1000; }

@media (max-width: 768px) { .magazine-viewport .next-button, .magazine-viewport .previous-button { width: 20vw; height: 40vw; } }

.magazine-viewport .next-button { right: 0; }

.magazine-viewport .previous-button { left: 0; }

.animated { transition: margin-left 0.5s; }

.turnjs-slider .ui-slider-handle { background-color: #ea5504; }

.turnjs-slider { background-color: #ead0c2; }

.magazine-modal-content { height: 100%; left: 50%; position: fixed; top: 50%; transform: translate(-50%, -50%); width: 100%; z-index: 999999; opacity: 0; visibility: hidden; transition: 1s; z-index: -1; }

.magazine-modal-content::after { background-color: rgba(255, 255, 255, 0.9); content: ''; display: block; height: 100%; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 100%; z-index: 1; }

.magazine-modal-content.magazine-open { opacity: 1; visibility: visible; z-index: 999999; }

.magazine-modal-content .magazine-last-page { bottom: 40px; left: 50%; position: absolute; transform: translate(-50%, 0); width: 445px; z-index: 10; }

@media (max-width: 768px) { .magazine-modal-content .magazine-last-page { bottom: 4.66vw; width: 74.33vw; }
  .magazine-modal-content .magazine-last-page img { max-width: 100%; } }

.magazine-modal-content .magazine-last-page div { margin: 20px 0 0; }

@media (max-width: 768px) { .magazine-modal-content .magazine-last-page div { margin: 3.3vw 0 0; } }

.magazine-modal-content .magazine-last-page div a { transition: .5s; }

.magazine-modal-content .magazine-last-page div a:hover { opacity: .7; }

.magazine-modal-content .magazine-last-page div a img { vertical-align: bottom; }

.magazine-bottom { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 335px 0 0; width: 100%; }

@media (max-width: 768px) { .magazine-bottom { margin: 60% 0 0; } }

.magazine-bottom .magazine-modal-close { text-align: center; }

.magazine-bottom .magazine-modal-close span { align-items: center; background-color: #ea5504; border-radius: 25px; color: #fff; cursor: pointer; display: flex; font-size: 21px; font-family: 'Yu Mincho','YuMincho', '游明朝'; height: 50px; justify-content: center; margin: 0 auto; width: 330px; }

@media (max-width: 768px) { .magazine-bottom .magazine-modal-close span { border-radius: 27.75vw; font-size: 4vw; height: 8.33vw; width: 55.5vw; } }

.magazine-top { height: 40px; right: 20px; margin: 0; position: absolute; top: 20px; width: 40px; }

@media (max-width: 768px) { .magazine-top { display: none; } }

.magazine-top .magazine-modal-close { background-color: rgba(234, 85, 4, 0.1); cursor: pointer; height: 100%; position: relative; width: 100%; }

.magazine-top .magazine-modal-close::before, .magazine-top .magazine-modal-close::after { background-color: #ea5504; content: ''; display: block; height: 2px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 70%; }

.magazine-top .magazine-modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

.magazine-modal-open { cursor: pointer; }
/*# sourceMappingURL=magazine.css.map */