/*---- story ----*/

.container_box {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0, 255, 255, 0);
	/*顏色標記*/
}

/*影子*/
.shadow {
	display: block;
	position: absolute;
	width: 100%;
	height: 100.1%;
	top: 0;
	left: 0;
	background: url("../images/story_shadow.png") no-repeat center bottom;
	background-size: cover;
	z-index: 62;
}

.chapter {
	position: absolute !important;
	width: 100%;
	height: 100%;
	left: 50%;
	top: 0%;
	transform: translateX(-50%);
	display: block;
	z-index: 61;
	background-color: rgba(255, 127, 80, 0);
	/*顏色標記*/
}


/*影片區*/
.chapter .swiper-slide.c1 .videoArea {
	height: 100%;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	display: block;
}

.chapter .videoArea #opVideo {
	object-fit: cover;
	object-position: left top;
	height: 100%;
	width: 100%;
	display: block;
}

.videoArea #opVideo_sp {
	display: none;
}

.chapter .swiper-slide.c2 .videoArea {
	height: 100%;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	display: block;
}

.chapter .swiper-slide.c3 .videoArea {
	height: 100%;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	display: block;
}

.chapter .swiper-slide.c4 .videoArea {
	height: 100%;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	display: block;
}

/*字*/
.chapter .story_txt {
	position: absolute;
	width: 43%;

	top: 72%;
	left: 51%;
	transform: translate(-50%, -50%);

	line-height: 32px;
	letter-spacing: 1px;
	z-index: 63;
	background-color: rgba(0, 255, 255, 0);
	/*顏色標記*/
}

.chapter .story_txt::after {
	content: "";
	display: block;
	position: absolute;
	margin-top: 40px;
	width: 855px;
	height: 526px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/*background: url(https://images1.iwplay.com.tw/image/tlbb/os_220922/images/game_story/story_txt_shadow.png) no-repeat center bottom;*/
	background-size: cover;
	z-index: -1;
}

.chapter .story_txt p {
	color: #fff;
	font-size: 12px;
	margin-block-start: 0em;
	margin-block-end: 0em;
	text-align: center;
	margin-top: 0%;
	text-shadow: 0 0 10px rgba(84, 84, 84, 1);
}

/*--標題--*/
.chapter .story_title {
	max-width: 100%;
	width: 78%;
	height: auto;

	margin: 0 auto;
	margin-bottom: 0px;

	background-color: rgba(0, 0, 255, 0);
	/*顏色標記*/
}


/*選項*/
.chapter_thumbs,
.scene_thumbs {
	position: absolute;
	width: 43% !important;
	bottom: 8% !important;
	left: 52% !important;

	font-weight: 500;
	font-size: 0.8vw;
	letter-spacing: 1px;
	transform: translateX(-50%);
	z-index: 65;
	background-color: rgba(165, 42, 42, 0);
	/*顏色標記*/
}

.chapter_thumbs::before,
.scene_thumbs::before {
	content: "";
	position: absolute;
	width: 67%;
	height: 2px;
	top: 50%;
	left: 48%;
	transform: translate(-50%, -50%);
	background: #cea140;
}

.chapter_thumbs li,
.scene_thumbs li,
.scene_thumbs li.bullet_active {
	border-radius: 50%;
	border: 3px solid #cea140;
	display: inline-block;
	position: relative;
	margin: 0px 8%;
	max-width: 7%;
	width: 7%;
	height: 4em;
	background: #cea140;
	cursor: pointer;
	transform: scale(1);
}

.scene_thumbs li {
	border: 3px solid rgba(255, 255, 255, 0);
	background: none;
}

.chapter_thumbs li.bullet_active,
.scene_thumbs li.bullet_active {
	border: 3px solid rgb(255, 255, 255);
	box-shadow: 0px 0px 10px rgb(255, 255, 255);
}

.scene_thumbs li .s_img {
	background: #c1c1c1;
	transform: scale(.25);
}

.scene_thumbs li.bullet_active .s_img {
	transform: initial;
}

.chapter_thumbs li .s_img,
.scene_thumbs li .s_img {
	border-radius: 50%;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.chapter_thumbs li .s_img::before,
.scene_thumbs li.bullet_active .s_img::before {
	content: "";
	border-radius: 50%;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #000;
	opacity: .4;
	transition: .5s;
}

.scene_thumbs li .s_img img {
	display: none;
}

.scene_thumbs li.bullet_active .s_img img {
	display: block;
}

.chapter_thumbs li.bullet_active .s_img::before,
.scene_thumbs li.bullet_active .s_img::before {
	opacity: 0;
}

.chapter_thumbs li .s_img::after,
.scene_thumbs li.bullet_active .s_img::after {
	content: "";
	display: block;
	position: absolute;
	width: 169%;
	height: 6em;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: url("../images/thumbs_frame.png") no-repeat center center;
	background-size: cover;
}

.chapter_thumbs li.bullet_active .s_img::after {
	animation: 4s rotate ease-in-out infinite;
}

.scene_thumbs li.bullet_active .s_img::after {
	animation: 3s rotate ease-in-out infinite;
}

@keyframes rotate {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

.chapter_thumbs li span,
.scene_thumbs li span {
	position: absolute;
	width: 300%;
	bottom: -60%;
	left: 50%;
	transform: translateX(-50%);
	background-color: rgba(222, 184, 135, 0);
	/*顏色標記*/
	text-align: center;
	color: #c1c1c1;
	font-size: 8px;

	display: block;
}

.chapter_thumbs li.bullet_active span,
.scene_thumbs li.bullet_active span {
	font-size: 8px;
	color: #fff;
	text-align: center;
}


@media (max-width:1100px) {

	.story_title {
		width: 100%;
	}

    .chapter .story_txt {
        width: 81%;
		top: 76%;
    }

	.story_txt p {
		color: #fff;
		font-size: 2.8vw !important;
		line-height: 160%;
	}


	.chapter .videoArea #opVideo {
		object-fit: cover;
		object-position: center top;
		display: block;
	}
	
	/*選項*/
	.chapter_thumbs,
	.scene_thumbs {
		width: 84% !important;
		bottom: 10% !important;
	}

	.chapter_thumbs li,
	.scene_thumbs li,
	.scene_thumbs li.bullet_active {
		margin: 0px 8%;
		max-width: 8%;
		width: 8%;
		height: 9em;
	}

	.chapter_thumbs li span,
	.scene_thumbs li span {
		font-size: 2.6vw;
		bottom: -92%
	}

	.chapter_thumbs li.bullet_active span,
	.scene_thumbs li.bullet_active span {
		font-size: 2.6vw;
		bottom: -92%
	}

	.chapter_thumbs li .s_img::after,
	.scene_thumbs li.bullet_active .s_img::after {
		height: 12em;
	}

}

@media (max-width:1050px) {

	.chapter_thumbs li,
	.scene_thumbs li,
	.scene_thumbs li.bullet_active {
		margin: 0px 7%;
	}

	.chapter_thumbs li,
	.scene_thumbs li,
	.scene_thumbs li.bullet_active:nth-child(1) {
		margin-left: 8%;
	}
}

@media (max-width:767px) {
	/*.swiper-slide-active.c1 .sec_bg {
		background: url("https://www.tianlong2m.com/events/20220422/image/story01_m.jpg") no-repeat center center !important;
		background-size: cover !important;
	}

	.swiper-slide-active.c2 .sec_bg {
		background: url("https://www.tianlong2m.com/events/20220422/image/story02_m.jpg") no-repeat center top !important;
		background-size: cover !important;
	}

	.swiper-slide-active.c3 .sec_bg {
		background: url("https://www.tianlong2m.com/events/20220422/image/story03_m.jpg") no-repeat center center !important;
		background-size: cover !important;
	}

	.swiper-slide-active.c4 .sec_bg {
		background: url("https://www.tianlong2m.com/events/20220422/image/story04_m.jpg") no-repeat center center !important;
		background-size: cover !important;
	}*/

	.videoArea #opVideo_sp {
		object-fit: cover;
		object-position: center top;
		height: 100%;
		width: 100%;
		display: block;
	}
	
	.videoArea #opVideo {
		display: none;
	}

	.story_title {
		width: 100%;
	}

	.chapter .story_txt {
        width: 85% !important;
        top: 73% !important;
    }

    .chapter .story_txt p {
        font-size: 3.6vw !important;
		line-height: 192%;
    }

	/*選項*/
	.chapter_thumbs,
	.scene_thumbs {
		width: 100% !important;
		left: 54% !important;
	}

	.chapter_thumbs li,
	.scene_thumbs li,
	.scene_thumbs li.bullet_active {
		margin: 0px 2%;
		max-width: 13%;
		width: 13%;
		height: 16em;
	}

	.chapter_thumbs li,
	.scene_thumbs li,
	.scene_thumbs li.bullet_active:nth-child(1) {
		margin-left: 7%;
	}

	.chapter_thumbs li span,
	.scene_thumbs li span {
		font-size: 2.6vw;
		bottom: -70%;
	}

	.chapter_thumbs li.bullet_active span,
	.scene_thumbs li.bullet_active span {
		font-size: 2.6vw;
		bottom: -70%;
	}

	/*--圈圈--*/
	.chapter_thumbs li .s_img::after,
	.scene_thumbs li.bullet_active .s_img::after {
		height: 22em;
	}
}

@media (max-width:520px) {
	.story_txt {
		width: 81%;
		top: 69%;
	}
}