@charset "UTF-8";
/* CSS Document */
/*========================================= **** MAINNAV BUTTON **** =============================================== */
.mouseover{
}

/* ===================================================================================================================== */
/* PageTitle */
/* ===================================================================================================================== */
#Btn{
	margin: 0;
	padding: 0;
	border: none;
	max-width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	box-sizing: border-box;
}


#Btng{
	margin: 0;
	padding: 0;
	border: none;
	max-width: 100%;
	height: 100%;
	position: relative;
	cursor: pointer;
	box-sizing: border-box;
}


#Btngt{
	margin: 0;
	padding: 0;
	border: none;
	max-width: 100%;
	height: 100%;
	position: relative;
	box-sizing: border-box;
}

#BtnFix{
	max-width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

#BtnStyle{
	width: 100%;
	height: 100%;
	position: absolute;
	margin: 0;
	padding: 0;
	z-index: 1;
	background-position: center center;
	background-repeat:no-repeat;
	background-size:cover;
}

#BtnOver{
	width: 100%;
	height: 100%;
	position:absolute;
	margin: 0;
	padding: 0;
	z-index: 3;
	-webkit-transition:all .4s linear;
	-moz-transition:  all .4s linear;
	-ms-transition:  all .4s linear;
	-o-transition:  all .4s linear;
	transition:  all .4s linear;
	opacity: 0;
}

#BtnHead{
	max-width: 100%;
	max-height: 100%;
	top: 20px;
	right: 30px;
	position: absolute;
	z-index: 6;
	text-align: right;
}

#BtnHeadDate{
	max-width: 100%;
	max-height: 100%;
	top: 30px;
	left: 30px;
	position: absolute;
	z-index: 9;
	text-align: left;
}

#BtnHeadFeed{
	max-width: 100%;
	max-height: 100%;
	top: 20px;
	right: 30px;
	position: absolute;
	z-index: 6;
	text-align: right;
}


#BtnHeadTime{
	max-width: 100%;
	max-height: 100%;
	top: 1vw;
	right: 1vw;
	position: absolute;
	z-index: 6;
	text-align: right;
}



#BtnHeadActTime{
	max-width: 100%;
	max-height: 100%;
	top: 1vw;
	left: 1vw;
	position: absolute;
	z-index:8;
	text-align: left;
}



#BtnTitleEvent{
	width: 100%;
	top: 0;
	position: relative;
	
	z-index: 5;
    opacity: 1;
	overflow: hidden;
	-webkit-transition: all .4s linear;
	-moz-transition:  all .4s linear;
	-ms-transition:  all .4s linear;
	-o-transition:  all .4s linear;
	transition:  all .4s linear;
}

#BtnTitle{
	width: 100%;
	top: 0;
	position: relative;
	
	z-index: 5;
    opacity: 1;
	overflow: hidden;
	-webkit-transition: all .4s linear;
	-moz-transition:  all .4s linear;
	-ms-transition:  all .4s linear;
	-o-transition:  all .4s linear;
	transition:  all .4s linear;
}

#BtnClaim{
	width: 100%;
	height: 100%;
	top: 100%;
	position: absolute;
	z-index: 4;
    -webkit-transition:all .4s linear;
	-moz-transition:  all .4s linear;
	-ms-transition:  all .4s linear;
	-o-transition:  all .4s linear;
	transition:  all .4s linear;
	opacity: 0.0;
}

#BtnContentBox{
	margin-left: auto;
	margin-right: auto;
	width:  calc(100% - 60px);
	height: calc(100% - 60px);
	position: absolute;
	z-index: 7;
	top: 30px;
	left: 30px;
	overflow: hidden;
}




#BtnContentBoxFeed{
	margin-left: auto;
	margin-right: auto;
	width:  calc(100% - 60px);
	height: calc(100% - 60px);
	position: absolute;
	z-index: 7;
	top: 30px;
	left: 30px;
	overflow: hidden;
}



#BtnContentBoxFeed:hover h2{
	color: #e5c500;
}

#BtnContentBoxTime{
	margin-left: auto;
	margin-right: auto;
	width:  calc(100% - 5vw);
	height: calc(100% - 3vw);
	position: absolute;
	z-index: 7;
	top: 1.5vw;
	left: 2.5vw;
	overflow: hidden;
}


#BtnTitleTime{
	width: 100%;
	height: 100%;
	position: relative;
	top: 0;
	z-index: 5;
    opacity: 1;
	overflow: hidden;
	-webkit-transition: all .4s linear;
	-moz-transition:  all .4s linear;
	-ms-transition:  all .4s linear;
	-o-transition:  all .4s linear;
	transition:  all .4s linear;
}


.mouseover:hover #BtnTitle{
	top: -1.3vw;
	opacity: 1;
}
.mouseover:hover #BtnTitleTime{
	top: 100%;
	opacity: 0.0;
}


.mouseover:hover #BtnClaim{
	opacity: 1;	
	top: 1.3vw;
}

.mouseover:hover #BtnOver{
	opacity: 0.6;
}

#BtnLineh{
	margin-left: auto;
	margin-right: 0;
	width: 2px;
	height: 100%;
	position: relative;
	z-index: 1;
	bottom: 0px;
	right: auto;
	left: auto;
	
	-webkit-transition: all .4s linear;
	-moz-transition: all .4s linear;
	-ms-transition: all .4s linear;
	-o-transition: all .4s linear;
	transition: all .4s linear;
}



.mouseover:hover #BtnLineh{
	height: 50%;
}

#BtnLine{
	width: 10px;
	height: 10px;
	position: absolute;
	z-index: 8;
	bottom:30px;
	right: 30px;
	left: auto;
	
	-webkit-transition: all .4s linear;
	-moz-transition: all .4s linear;
	-ms-transition: all .4s linear;
	-o-transition: all .4s linear;
	transition: all .4s linear;
}



.mouseover:hover #BtnLine{
	width: calc(10px - 0px);
	border-radius: 100%;
}

#PlayIcon{
	position: relative;
	z-index: 6;
	width: 0px;
	height: 0px;
	-webkit-transform:rotate(360deg);
	border-style: solid;
	border-width: 0.6vw 0vw 0.6vw 0.75vw;
	border-color: transparent transparent transparent #fff;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
	opacity: 0;

}

.mouseover:hover #PlayIcon{
	border-width: 0.4vw 0vw 0.4vw 0.5vw;
border-color: transparent transparent transparent #fff;
	opacity: 0.7;

}

#PlayIconB{
	position: absolute;
	transform:translateY(-50%);
	top: 50%;
	z-index: 8;
	width: 0vw;
	height: 0vw;
	border-radius: 50%;
	border: 2px solid #fff;
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
	opacity: 0;

}

.mouseover:hover #PlayIconB{
	width:3.75vw;
	height: 3.75vw;
	opacity: 0.6;
}
#BtnLineTime{
	width: 3.125vw;
	height: 0.5vw;
	position: absolute;
	z-index: 8;
	bottom:1vw;
	right: 1vw;
	left: auto;
	
	-webkit-transition: all .4s linear;
	-moz-transition: all .4s linear;
	-ms-transition: all .4s linear;
	-o-transition: all .4s linear;
	transition: all .4s linear;
}



.mouseover:hover #BtnLineTime{
	width: calc(50% - 1vw);
}




#BtnNow{
	margin-left: auto;
	margin-right: auto;
	width: 15vw;
	height: 15vw;
	
	border-radius: 100%;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}
#BtnNowStyle{
	
	width: 100%;
	height: 100%;
	border-radius: 100%;
	position: absolute;
	margin: 0;
	padding: 0;
	z-index: 1;
	overflow: hidden;
	background-position: center center;
	background-repeat:no-repeat;
	background-size:cover;
	
	
	-webkit-transition: all .4s linear;
	-moz-transition: all .4s linear;
	-ms-transition: all .4s linear;
	-o-transition: all .4s linear;
	transition: all .4s linear;
	
	-webkit-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
	-ms-transform: rotate(5deg);
	-o-transform: rotate(5deg);
	transform: rotate(5deg);
}

.mouseover:hover #BtnNowStyle{
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
	transform: rotate(-5deg);
}

.button-back{
	position: relative;
	height: 5vw;
	width: 5vw;
	border-radius: 100%;
	background-color: #fff;
	
	-webkit-transition: all .4s linear;
	-moz-transition: all .4s linear;
	-ms-transition: all .4s linear;
	-o-transition: all .4s linear;
	transition: all .4s linear;
	
}

.button-plus{
	position: relative;
	height: 5vw;
	width: 5vw;
	border-radius: 100%;
	
	-webkit-transition: all .4s linear;
	-moz-transition: all .4s linear;
	-ms-transition: all .4s linear;
	-o-transition: all .4s linear;
	transition: all .4s linear;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	
}

.lineclose-1{
	position: absolute;
	height: 0.2vw;
	width: 2vw;
	background-color: #313131;
	
	-webkit-transition: all .4s linear;
	-moz-transition: all .4s linear;
	-ms-transition: all .4s linear;
	-o-transition: all .4s linear;
	transition: all .4s linear;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	
}
.lineclose-2{
	position: absolute;
	height: 0.2vw;
	width: 2vw;
	background-color: #313131;
	
	-webkit-transition: all .4s linear;
	-moz-transition: all .4s linear;
	-ms-transition: all .4s linear;
	-o-transition: all .4s linear;
	transition: all .4s linear;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.button-back:hover {
	background-color:#F6F6F6;
}

.button-back:hover .lineclose-1{
	
	-webkit-transition: all .4s linear;
	-moz-transition: all .4s linear;
	-ms-transition: all .4s linear;
	-o-transition: all .4s linear;
	transition: all .4s linear;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}

.button-back:hover .lineclose-2{
	
	-webkit-transition: all .4s linear;
	-moz-transition: all .4s linear;
	-ms-transition: all .4s linear;
	-o-transition: all .4s linear;
	transition: all .4s linear;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}

.button-plus:hover {
	
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}

.button-plus:hover .lineclose-1{
	
	-webkit-transition: all .4s linear;
	-moz-transition: all .4s linear;
	-ms-transition: all .4s linear;
	-o-transition: all .4s linear;
	transition: all .4s linear;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}

.button-plus:hover .lineclose-2{
	
	-webkit-transition: all .4s linear;
	-moz-transition: all .4s linear;
	-ms-transition: all .4s linear;
	-o-transition: all .4s linear;
	transition: all .4s linear;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}

.mouseover:hover .button-plus {
	
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}
.mouseover:hover .button-plus .lineclose-1{
	
	-webkit-transition: all .4s linear;
	-moz-transition: all .4s linear;
	-ms-transition: all .4s linear;
	-o-transition: all .4s linear;
	transition: all .4s linear;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}

.mouseover:hover .button-plus .lineclose-2{
	
	-webkit-transition: all .4s linear;
	-moz-transition: all .4s linear;
	-ms-transition: all .4s linear;
	-o-transition: all .4s linear;
	transition: all .4s linear;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}
/* ===================================================================================================================== */
/* ================================================= **** MOBILE **** ================================================== */
/* ===================================================================================================================== */
@media screen and (max-width: 1140px) {
	
	
		#BtnContentBox{
	width:  calc(100% - 40px);
	height: calc(100% - 60px);
	top: 30px;
	left: 20px;
}



#BtnContentBoxFeed{
	width:  calc(100% - 40px);
	height: calc(100% - 60px);
	top: 30px;
	left: 20px;
}

	#BtnHeadFeed{
	top: 15px;
	right: 20px;
}
	
		#BtnHead{
	top: 15px;
	right: 20px;
}

#BtnHeadDate{
	
	top: 20px;
	left: 20px;
}
	#BtnLine{
	bottom:20px;
	right: 20px;
}

	
	.mouseover:hover #BtnTitle{
	top: -2vw;
	opacity: 1;
}
.mouseover:hover #BtnTitleTime{
	top: 100%;
	opacity: 0.0;
}


.mouseover:hover #BtnClaim{
	opacity: 1;	
	top: 2vw;
}
	#BtnNow{
	width: 25vw;
	height: 25vw;
}
#PlayIcon{
	border-width: 1.2vw 0vw 1.2vw 1.55vw;

}
.mouseover:hover #PlayIcon{
	border-width: 0.8vw 0vw 0.8vw 1.1vw;

}

#PlayIconB{
	border: 2px solid #fff;

}

.mouseover:hover #PlayIconB{
	width: 6.5vw;
	height: 6.5vw;
}
	
	.button-back{
	position: relative;
	height: 7vw;
	width: 7vw;
	
}

.lineclose-1{
	position: absolute;
	height: 0.3vw;
	width: 3vw;
	
}
.lineclose-2{
	position: absolute;
	height: 0.3vw;
	width: 3vw;
}
	
	.button-plus{
	position: relative;
	height: 7vw;
	width: 7vw;
	
}
	
}

@media screen and (max-width: 568px) {	
	
	
	
	.button-plus{
	position: relative;
	height: 11vw;
	width: 11vw;
	
}
	
	.button-back{
	position: relative;
	height: 11vw;
	width: 11vw;
	
}

.lineclose-1{
	position: absolute;
	height: 0.3vw;
	width: 4vw;
	
}
.lineclose-2{
	position: absolute;
	height: 0.3vw;
	width: 4vw;
}
	
	
		.mouseover:hover #BtnTitle{
	top: -4vw;
	opacity: 1;
}
.mouseover:hover #BtnTitleTime{
	top: 100%;
	opacity: 0.0;
}


.mouseover:hover #BtnClaim{
	opacity: 1;	
	top: 4vw;
}
		#BtnNow{
	width: 25vh;
	height: 25vh;
}
	

.mouseover:hover #PlayIcon{
	border-width: 1vw 0vw 1vw 1.4vw;

}

#PlayIconB{
	border: 2px solid #fff;

}

.mouseover:hover #PlayIconB{
	width: 9.5vw;
	height: 9.5vw;
}
}