@charset "utf-8";
.home-container {
	position: absolute;
	top: 0px;
	left: 0px;
	margin :0;
	padding:0;
	width: 100%;
	height:100%;
	background-image: url(../images/home-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
	display: flex;
	align-content: center;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	overflow: hidden;
}
.home-container .main{
	display: flex;
	width: 90%;
	height: 100%;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-left: 10%;
}
.home-title {
	width: 100%;
	height:auto;
	text-align: center;
}
.home-title img{
	max-width: 100%;
	width: 900px;
	height:auto;
	text-align: center;
}

.home-lang-area {
	display: flex;
	text-align: center;
	margin-top: 30px;
}
.home-lang-area .selectLang{
	padding: 10px 30px;
	cursor: pointer;
	transition: filter 0.2s;
}
.home-lang-area .selectLang img{
	filter: grayscale(1);
}
.home-lang-area .selectLang.active img,.home-lang-area .selectLang:hover img{
	filter: grayscale(0);
}

.home.start-btn{
	position: absolute;
	left: 50%;
	bottom: -70px;

}
.home.start-btn img{
	width: 220px;
	height: 220px;
	transition: filter 0.2s;
}
.home.start-btn:hover img{
	filter: brightness(1.5);
}


/* summary */
.summary-container{
	position: absolute;
	top: 0px;
	left: 0px;
	margin :0;
	padding:0;
	width: 100%;
	height:100%;
	background-image: url(../images/summary-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
	display: flex;
	align-content: center;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	overflow: hidden;
}
.summary-container .main{
	display: flex;
	width: auto;
	height: auto;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-left: 12%;
}
.summary-content {
	width: auto;
	height:auto;
	text-align: center;
	margin-top: -55px;
}
.summary-content img{
	width: auto;
	height:auto;
	text-align: center;
}

.summary-back-btn{
	position: absolute;
	left: 50%;
	top: -100px;

}
.summary-back-btn img{
	width: 220px;
	height: 220px;
}

.summary-back-btn:hover a::after{
	content: "";
	position: absolute;
	left: 0px;
	top: 0px;
	width: 220px;
	height: 220px;
	background-image: url(../images/btn-back-over.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.summary.start-btn{
	position: absolute;
	left: 50%;
	bottom: -70px;

}
.summary.start-btn img{
	width: 220px;
	height: 220px;
}
.summary.start-btn:hover a::after{
	content: "";
	position: absolute;
	left: 0px;
	top: 0px;
	width: 220px;
	height: 220px;
	background-image: url(../images/btn-start-over.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


/* challenge */
.challenge-container{
	position: absolute;
	top: 0px;
	left: 0px;
	margin :0;
	padding:0;
	width: 100%;
	height:100%;
	min-width: 1600px;
	background-image: url(../images/role-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
	display: flex;
	align-content: center;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	overflow: hidden;
}
.challenge-container .main{
	display: flex;
	width: 100%;
	height: auto;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.challenge-title {
	position: absolute;
	top: 5%;
	left: 6.5%;
	width: 22%;
	height: auto;
}
.challenge-title img{
	width: 90%;
	height: auto;
	text-align: center;
}

.role-items{
	display: flex;
	width: 100%;
	max-width: 85%;
	margin-top: 8%;
}
.role-items .item{
	position: relative;
	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
	cursor: pointer;
	border-radius: 20px;
	padding-bottom: 20px;
	height: auto;
	margin-top: 5%;
	width: 25%;
}

.role-msg{
	position: absolute;
	top: -32%;
	left: 4%;
	width: 100%;
}

.role-msg img{
	width: 80%;
}
.role-info{
	position: relative;
	text-align: center;
	width: 100%;
	padding: 5px 20px;
}
.role-face{
	margin-top: 10px;
	width: 100%;
}
.role-face img{
	width: 90%;
}
.role-name{
	display: inline-block;
	width: auto;
	background-color: #164289;
	margin-top: 15px;
	border: #ffffff 1px solid;
	padding: 8px 20px;
	border-radius: 10px;
}
.role-name img{
	width: 100%;
	display: block;
}
.role-power{
	margin-top: 20px;
	opacity: 0;
}

.role-items .item:hover{
	background-color: #40a68f;
}
.role-items .item:hover .role-name{
	background-color: transparent;
}
.role-items .item:hover .role-power{
	opacity: 1;
}


.challenge.back-btn{
	position: absolute;
	left: 7%;
	bottom: 6%;
}
.challenge.back-btn img{
	width: 145px;
	height: 50px;
}
.challenge.back-btn.zh:hover a::after{
	content: "";
	position: absolute;
	left: 0px;
	top: 0px;
	width: 145px;
	height: 50px;
	background-image: url(../images/btn-role-back-zh-over.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.challenge.back-btn.en:hover a::after{
	content: "";
	position: absolute;
	left: 0px;
	top: 0px;
	width: 145px;
	height: 50px;
	background-image: url(../images/btn-role-back-en-over.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.challenge.back-btn.jp:hover a::after{
	content: "";
	position: absolute;
	left: 0px;
	top: 0px;
	width: 145px;
	height: 50px;
	background-image: url(../images/btn-role-back-jp-over.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}



/* playcontent */
.playcontent{
	position: absolute;
	top: 0px;
	left: 0px;
	margin :0;
	padding:0;
	width: 100%;
	height:100%;
	overflow: hidden;
}
.playcontent iframe{
	margin :0;
	padding:0;
	width: 100%;
	height:100%;
	overflow: hidden;
}
.playcontent h2{
	text-align: center;
}


@media (min-width: 1921px) {
	.challenge-title {
		position: absolute;
		top: 5%;
		left: 6.5%;
		width: 25%;
		height: auto;
	}
	.role-info{
		position: relative;
		text-align: center;
		width: 100%;
		padding: 15px 20px;
	}
	.role-msg{
		position: absolute;
		top: -30%;
		left: 4%;

	}
	.role-name{
		margin-top: 55px;
		transform: scale(1.5);
	}
	.role-power{
		margin-top: 50px;
		transform: scale(1.5);
	}
}

@media (min-width: 3840px) {
	.role-msg{
		position: absolute;
		top: -36%;

	}
}