@charset "UTF-8";


.storyBox{
	padding: 35% 10px 80px 10px;
}
.storyBox:before{
	content:"";
	position: fixed;
	top:0;
	left:0;
	width: 100vw;
	height: 100vh;
	z-index: 2;
	background: url(../../img/common/bg_6.png) center 100% no-repeat;
	background-size: 100%;
}

.storySection1{
	// border: #000 1.2vw solid;
	border-top: #000 1.2vw solid;
	padding: 10px 5vw 30px 5vw;
	background: 
		url(../img/bg_1.png) 1.2vw 14% no-repeat,
		url(../img/bg_7.png);
	background-size: 90%,100%;
	position: relative;
	z-index: 3;
}
.storySection1 .storySection1Img{
	position: absolute;
	top:-45vw;
	left:-25px;
	width: 100%;
}
.storySection1 .storySection1Img img{
	width: 100%;
}
.storySection1 h1{ 
	padding: 10px 10px 45vw 0;
	position: relative;
	z-index: 3;
}
.storySection1 h1 img{ 
	width: 60%;
	margin-left: auto;
}
.storySection1 p{ 
	text-align: left;
	font-size: 14px;
	font-weight: bold;
}


.storySection2{
	margin-top: 0;
	// border: #000 1.2vw solid;
	border-top: none;
	padding: 10px 5vw 5.2vw;
	background: url(../img/bg_6.png) ;
	background-size: 100%;
	position: relative;
	z-index: 3;
}
.storySection2 ul li a,
.storySection2 ul li span{ 
	border-radius:5px;
	background-color: #fff;
	border: #000 3px solid;
	padding: 10px 15px 10px 5px;
	display: block;
	line-height: 1.1;
	text-align: left;
	color:#333333;
	text-decoration: none;
	font-weight: 800;
	font-size: 16px;
	position: relative;
}
.storySection2 ul li.comingsoon span,
.storySection2 ul li.comingsoon a{ 
	opacity: 0.5;
}
.storySection2 ul li{ 
	position: relative;
	margin-top: 6px;
}
.storySection2 ul li.comingsoon:before{ 
	content:"";
	position: absolute;
	top:0;
	bottom:0;
	right:10px;
	z-index: 3;
	margin: auto;
	background: url(../img/img_comingsoon.png) 0 0 no-repeat;
	background-size: 113px;
	width: 113px;
	height: 15px;
}
.storySection2 ul li a:before{ 
	content:"";
	position: absolute;
	top:0;
	bottom:0;
	right:6px;
	z-index: 3;
	margin: auto;
	background: url(../img/go_episode.png) 0 0 no-repeat;
	background-size: 20px;
	width: 20px;
	height: 20px;
}
@media screen and (min-width: 768px) , print{
	.storySection2 ul{ 
		display:-webkit-box;
		display:-ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-justify-content: center;
		-webkit-justify-content: center;
		justify-content: center;
		-ms-flex-pack: wrap;
		-webkit-flex-wrap: wrap;
		flex-wrap:wrap;
	}
	.storySection2 ul li{ 
		position: relative;
		margin-top: 10px;
		width: 48%;
		margin-right: 1%;
		margin-left: 1%;
	}
}


.storySection3{
	margin: auto;
	position: relative;
	z-index: 3;
}

.storySection3 img{
	width: 100%;
}


.storySection4{
	margin-top: 5.5vw;
	border: #000 5px solid;
	padding: 10px 10px 90% 10px;
	background: 
		url(../img/bg_3.png) 0 0 repeat-x,
		#0B5598 url(../img/bg_4.png) 0 100% no-repeat;
	background-size: 370px,100%;
	position: relative;
	z-index: 3;
}
.storySection4 h1{
	margin-top: -7%;
}
.storySection4 h1 img{
	width: 74%;
}
.storySection4 h2{
	margin-top: 35px;
}
.storySection4 .storySection4Txt{
	margin-top: 10px;
	text-align: left;
	color:#fff;
	font-size: 14px;
}
.storySection4 .storySection4List{
	margin-top: 10px;
	color:#fff000;
}
.storySection4 .storySection4List li{
	text-indent: -28px;
	padding-left: 28px;
	text-align: left;
	font-size: 14px;
}

.storyTit1{ 
	position: relative;
	z-index: 4;
	margin-top: -8px;
}
.storyTit1 img,
.storyBg1 img{ 
	width: 100%;
	margin: auto;
}
.storyBg1{
	position: relative;
	z-index: 4;
	margin-top: -1.25vw;
}





.newspaperBox{
	padding: 3% 0 80px 0;
	background: #f5f4eb;
}

.newspaperInner{
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	position: relative;
}


ul.story_pagenav{
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	position: relative;
}

li.prev{
	display: block;
	width: 30%;
	height: auto;
	margin: 0;
	padding: 0;
	float: left;
}

li.next{
	display: block;
	width: 30%;
	height: auto;
	margin: 0;
	padding: 0;
	float: right;
}


p.go_storyTop{
	display: block;
	width: 64%;
	max-width:380px;
	margin: 6% auto 0 auto;
	padding: 0;
	text-align:center;
	position:	relative;
}