* {
		margin: 0;
		padding: 0;
}
img {
		border: none;
		vertical-align: top;
}
.modaal-wrapper.verPortrait {
		display: none !important;
}
.mobile_device .page_story .container.verPortrait {
		height: 90vh !important;
		overflow: hidden
}
.mobile_device .container.verPortrait main {
		display: none
}
.story_alert {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: #fff;
		z-index: 9999;
		opacity: 0;
		animation: fadeIn 0.1s linear forwards;
}
.desktop_device .story_alert {
		display: none !important
}
.story_alert.verLandscape {
		display: none !important;
}
@media (orientation: portrait) and (min-width: 500px) {
		.story_alert {
				display: none !important;
		}
}
@media(min-width: 1024px) {
		.story_alert {
				display: none !important;
		}
}


.story_alert_figure {
		width: 70vw;
		margin: 0 auto;
		padding-top: 150px;
}
.story_alert_figure img {
		width: 100%;
		height: auto;
		border-radius: 50%;
		opacity: 0;
		transform: scale(0);
		animation: fadeInAlert 0.3s linear forwards;
}
@keyframes fadeIn {
		0% {
				opacity: 0;
		}
		100% {
				opacity: 1;
		}
}
@keyframes fadeInAlert {
		0% {
				opacity: 0;
				transform: scale(0);
		}
		100% {
				opacity: 1;
				transform: scale(1) rotate(0deg);
		}
}
body {
		background: #d6e49a;
}
.book_container {
		overflow: hidden;
}
.book_wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		box-sizing: border-box;
		padding: 40px;
}
#app {
		width: 960px;
		aspect-ratio: 10 / 5.1;
		margin: auto;
}
.bounding-box {
		box-shadow: rgba(99, 99, 99, 0.5) 0px 2px 8px 0px;
}
.flipbook {
		width: 100%;
		aspect-ratio: 10 / 5.1;
		position: relative;
}
.flipbook-head {
		position: relative;
}
.flipbook-head-wrapper {
		position: relative;
}
.flipbook-head-wrapper .prevBtnWrap, .flipbook-head-wrapper .nextBtnWrap {
		position: absolute;
		top: 0;
		width: 0.1px;
		height: 100%;
		cursor: pointer;
		background-repeat: no-repeat;
}
.flipbook-head-wrapper .prevBtnWrap {
		left: 0;
}
.flipbook-head-wrapper .nextBtnWrap {
		right: 0;
}
.prevBtnWrap .prevBtn, .nextBtnWrap .nextBtn {
		position: absolute;
		top: calc(50% - 20px);
		background-color: #e4002b;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		cursor: pointer;
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 40px;
		z-index: 100;
}
.prevBtnWrap .prevBtn {
		left: -80px;
		background-image: url("../images/swiper_left_arw.png");
}
.nextBtnWrap .nextBtn {
		right: -80px;
		background-image: url("../images/swiper_right_arw.png");
}
.first-page .prevBtn, .last-page .nextBtn {
		opacity: 0;
		pointer-events: none;
}
.flipbook-container {
		position: relative;
}
.flipbook-head-wrapper .book_head_logo_wrap {
		position: absolute;
		left: 0;
		top: -65px;
		width: 100%;
}
.book_head_logo {
		max-width: 480px;
		margin: 0 auto;
		position: relative;
		z-index: 100;
}
.book_head_logo img {
		width: 100%;
		height: auto;
}
@media(max-width: 1080px) {
		.prevBtnWrap .prevBtn {
				left: -20px;
				background-image: url("../images/swiper_left_arw.png");
		}
		.nextBtnWrap .nextBtn {
				right: -20px;
				background-image: url("../images/swiper_right_arw.png");
		}
}
@media(max-height: 500px) {
		.book_wrap {
				height: 100vh;
				height: 100svh;
				padding: 30px 60px 0;
				overflow: hidden;
		}
		#app {
				width: 57.6vw;
				margin: auto;
		}
		.flipbook-head-wrapper .book_head_logo_wrap {
				top: -45px;
		}
		.book_head_logo {
				width: 45vw;
		}
		.flipbook-head-wrapper .prevBtn, .flipbook-head-wrapper .nextBtn {
				top: calc(50% - 20px);
				width: 40px;
				height: 40px;
				background-size: 40px;
		}
		.flipbook-head-wrapper .prevBtn {
				left: 0;
		}
		.flipbook-head-wrapper .prevBtn {
				left: -70px;
		}
		.flipbook-head-wrapper .nextBtn {
				right: -70px;
		}
}
.desktop_device .book_wrap {
		min-width: 500px !important;
}
@media(max-width: 650px) {
		.desktop_device .book_wrap {
				min-width: 500px !important;
				width: 500px !important;
		}
}
@media(max-width: 550px) {
		#app {
				width: 100%;
				height: calc(100vw - 100px);
		}
		.book_wrap {
				height: 100vh;
				height: 100svh;
				padding: 0;
				width: calc(100vw - 100px);
				margin-left: auto;
				margin-right: auto;
		}
		.desktop_device .book_wrap {
				min-width: 500px !important;
				width: 500px !important;
		}
		.flipbook {
				width: calc(100vw - 100px);
				height: calc(100vw - 100px);
		}
		.flipbook .book_head_logo_wrap {
				top: -50px;
		}
		.book_head_logo {
				width: calc(100vw - 100px);
		}
		.flipbook-head-wrapper .prevBtn, .flipbook-head-wrapper .nextBtn {
				top: calc(50% - 15px);
				width: 30px;
				height: 30px;
				background-size: 30px;
		}
		.flipbook-head-wrapper .prevBtn {
				left: -40px;
		}
		.flipbook-head-wrapper .nextBtn {
				right: -40px;
		}
}
.click-to-flip {
		pointer-events: none !important;
		cursor: auto;
}