/*for 電腦裝置 1-2K*/
@media screen and (min-width:1921px) and (max-width:3840px){
	.secA{
		background-size: cover !important; 
	}
	section#p1,
	section#p2,
	.p3-container,
	section#p4,
	section#p5
	{
		width: 1920px;
		margin: 0 auto;
	}
	section#p3,
	.secB{
		background-size: cover !important;
	}
	.p1-tab-content{
		width: 1920px;
	}
}


/*for 電腦裝置*/

@media screen and (min-width:1280px) and (max-width:1440px){
	
}	


@media screen and (min-width:1024px) and (max-width:1280px){
	ul#nav li {
	    margin: 0 10px;
	}
	.header-fast a {
	    margin-left: 10px;
	    width: max-content;
	    height: auto;
	    line-height: unset;
	    font-size: 1rem;
    	font-weight: 400;
    	padding: 5px 1.25rem;
	}
	a#header-play {
	    line-height: unset;
	}
}	

/*for 一般電腦裝置(螢幕尺寸>1025px)*/
@media screen and (max-width:1025px){  
	
}

@media screen and (min-width:1025px) and (max-width:1440px){
	.p2-container {
	    position: relative;
	    width: 100%;
	    height: 950px;
	    padding: 0 100px;
	    display: flex;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: -ms-flexbox;
	    display: -moz-box;
	    flex-wrap: wrap;
	    justify-content: flex-start;
	    align-items: flex-start;
	}
	.p2-content {
	    position: relative;
	    width: 50%;
	    height: auto;
	    padding-top: 340px;
	    z-index: 10;
	}
	.p2-img-info {
	    position: relative;
	    width: 50%;
	    height: 950px;
	    z-index: 6;
	}
	.header-container {
	    position: relative;
	    width: 100%;
	    height: 70px;
	    display: flex;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: -ms-flexbox;
	    display: -moz-box;
	    flex-wrap: wrap;
	    justify-content: space-between;
	    align-items: center;
	    padding: 0 10px;
	}
}


@media screen and (min-width:1024px) and (max-width:1042px){
	ul#nav li {
	    margin: 0 15px;
	}
	.header-fast a {
	    margin-left: 10px;
	    width: max-content;
	    height: auto;
	    line-height: unset;
	    font-size: 1rem;
    	font-weight: 400;
    	padding: 5px 1.25rem;
	}
	a#header-play {
	    line-height: unset;
	}
}	

/*for 平板+手機裝置*/
@media screen and (max-width:1024px){
	header{
		display: none;
	} 
	.m-nav{
		display: block;
	}
}

/*for 平板裝置(768px<螢幕尺寸<1024px)*/
@media screen and (min-width:768px) and (max-width:1024px){
	section#p0 {
	    padding: 0;
	}
	.p0-container {
	    width: 100%;
	    top: 65%;
	}
	.p0-logo {
	    margin: 0 auto;
	}
	.p0-title {
	    width: 90%;
	    margin: 20px auto 20px;
	}
	.p0-title h3 {
	    font-size: 2.5rem;
	    line-height: 2.5rem;
	    margin: 0 0 20px 0;
	    text-align: center;
	}
	.p0-title h1 {
	    line-height: 1.25rem;
	    text-align: center;
	}
	.p0-title h1 br{
		display: none;
	}
	a#p0-playbtn {
		display: none;
	    width: 65%;
	    height: 65px;
	    margin: 0 auto;
	}
	.p0-right,.p0-share,.p0-bg{
		display: none;
	}
	section#p1{
		width: 100%;
	}
	section#p1:before{
		display: none;
	}
	ul.p1-tab {
	    position: relative;
	    width: 100%;
	    right: unset;
	    top: unset;
	    margin-top: 50px;
	    padding: 0 0 0 0px;
	    padding: 0;
	    justify-content: center;
        align-items: flex-start;
	}
	ul.p1-tab li {
	    width: 20%;
	    margin: 0 5px;
	    padding-top: 15px;
	}
	ul.p1-tab li a{
		font-size: 1rem;
		padding: 0 5px;
	}
	.p1-tab-container {
	    width: 100%;
	    height: calc(100vh - 120px);
	}
	.p1-tab-content {
	    width: 100vw;
	    height: 100vh;
	    display: block;
	    flex-wrap: unset;
	    justify-content: unset;
	    align-items: unset;
	}
	.p1-tab-slogan {
	   position: relative;
	    top: unset;
	    left: unset;
	    transform: unset;
	    margin: 30px 0;
	    width: 100%;
	}
	.p1-tab-slogan h1 {
	    font-size: 1rem;
	    margin: 0 0px 0 0;
	    letter-spacing: 0px;
	}
	.p1-tab-slogan h1 .player-btn {
	    margin: 0;
	}
	.p1-tab-img {
	    position: relative;
	    width: 100%;
	    height: 45%;
	    bottom: 0;
	    background-size: cover !important;
	}
	.p1-tab-info {
	    width: 90%;
	    height: auto;
	    margin: 0 auto;
	}
	.p1-tab-info h1 {
	    font-size: 2.25rem;
	    margin: 0;
	    padding-bottom: 5px;
	}
	.p1-tab-info p {
	    font-size: 0.875rem;
	    line-height: 1.25rem;
	    margin: 20px 0 0 0;
	}
	section#p2{
	}
	section#p2:before{
		display: none;
	}
	.p2-container {
	    width: 100%;
	    height: 100%;
	    padding: 0 0px;
	    display: block;
	    flex-wrap: unset;
	    justify-content: unset;
	    align-items: unset;
	    padding-top: 50px;
	}
	.p2-content {
	    width: 90%;
	    height: auto;
	    padding-top: 0px;
	    z-index: 10;
	    margin: 0px auto 50px;
	}
	.p2-content h2 {
	    font-size: 1rem;
	    margin: 0 0 5px 0;
	    line-height: 1rem;
	}
	.p2-content h1 {
	    width: auto;
	    font-size: 2.25rem;
	    margin: 0 0 5px 0;
	    line-height: 2.5rem;
	    padding-bottom: 10px;
	}
	.p2-content p {
	    font-size: 0.875rem;
	    margin: 0 0 0px 0;
	    padding-left: 0px;
	    line-height: 1.25rem;
	}
	a#morecharabtn {
		display: none;
	    width: 60%;
	    height: 50px;
	    line-height: 50px;
	    font-size: 1rem;
	    margin: 10px auto 0;
	    background-size: contain !important;
	}
	.p2-img-info {
	    width: 90%;
	    height: 70%;
	    margin: 0 auto;
	}
	.webp .p2-img-info{
		background: url('../imgp/p2bg-m.webp') no-repeat center;
		background-size: cover;
	}
	.no-webp .p2-img-info{
		background: url('../img/p2bg-m.jpg') no-repeat center;
		background-size: cover;
	}
	#p2-chara-m,
	#p2-chara-f{
		display: none;
	}
	.p2-yt {
		right: 0;
	    left: unset;
	    top: 50%;
	    transform: translateY(-50%);
	}
	section#p3{
	}
	.p3-container {
	    height: 100%;
	    display: block;
	    flex-wrap: unset;
	    justify-content: unset;
	    align-items: unset;
	}
	ul.p3-tab {
	    position: relative;
	    width: 100%;
	    height: 100px;
	    right: unset;
	    top: unset;
	    justify-content: center;
	    flex-direction: unset;
	}
	ul.p3-tab:after {
	    width: 100%;
	    height: 1px;
	    top: 50%;
	    left: 50%;
	    transform: translateX(-50%);
	    z-index: -1;
	}
	ul.p3-tab li {
	    width: 80px;
	    height: 80px;
	    margin: 0 10px;
	}
	ul.p3-tab li a {
	    background-size: cover !important;
	    width: 80px;
	    height: 80px;
	}
	.chara-container {
	    position: relative;
	    width: 90%;
	    height: calc(100% - 100px);
	    margin: 0 auto;
	}
	.chara-content {
	    width: 100%;
	    height: 100%;
	    padding-left: 0;
	    margin: 0 auto;
	    background-position: top left !important;
	    justify-content: space-between;
    	align-items: center;
    	flex-direction: column;
	}
	.chara-info-content {
	    width: 100%;
	    height: 100%;
	    display: flex;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: -ms-flexbox;
	    display: -moz-box;
	    flex-wrap: wrap;
	    justify-content: space-between;
	    align-items: center;
	    flex-direction: column;
	}
	.chara-info-part01 {
	    width: 100%;
	    height: auto;
	    padding: 0 0 10px 0;
	    justify-content: flex-start;
	    align-items: center;
	    flex-direction: column;
	}
	.chara-icon {
	    width: 50px;
	    height: 50px;
	    justify-content: center;
	    align-items: center;
	    margin: 10px auto;
	}
	.chara-title {
	    width: 100%;
	    height: auto;
	}
	.chara-title h2 {
	    font-size: 1rem;
	    line-height: 1rem;
	    text-align: center;
	    margin: 0;
	}
	.chara-title h1 {
	    font-size: 2.25rem;
	    line-height: 2.25rem;
	    text-align: center;
	    margin: 0;
	}
	.chara-info-part02 {
	    width: 90%;
	    height: auto;
	    padding: 0;
	    margin: 0 auto;
	}
	.chara-info-part02 p {
		display: none;
	    font-size: 0.875rem;
	    line-height: 1.25rem;
	    margin: 0;
	}
	.chara-info-part02 p br{
		display: none;
	}
	.chara-yt {
	    margin: 10px auto;
	}
	.chara-skill{
		display: none;
	}
	.chara-img {
	    position: absolute;
	    width: 100%;
	    height: 90%;
	    left: unset;
	    top: unset;
	    bottom: 0;
	    margin: 0 auto;
	}
	#chara-t3{
		background-position-x: 75% !important;
    	background-size: cover !important;
	}
	#chara-t4{
		background-position-x: 85% !important;
    	background-size: cover !important;
	}
	#chara-t5{
		background-position-x: 85% !important;
    	background-size: cover !important;
	}
	/*#t4 .chara-info-content{
		height: 65%;
	}
	#t4 .chara-img{
		height: 35%;
	}
	#t5 .chara-info-content{
		height: 65%;
	}
	#t5 .chara-img{
		height: 35%;
	}*/
	section#p4 {
	    width: 100%;
	    height: auto;
	}
	.p4-container {
	    width: 100vw;
	    height: auto;
	    justify-content: flex-start;
	    align-items: center;
	    flex-direction: column;
	    padding: 20px 0;
	}
	.p4-content {
	    width: 90%;
	    height: auto;
	    justify-content: flex-start;
	    align-items: flex-start;
	    background-image: unset !important;
	    background-color: rgba(0,0,0,0.8) !important;
	    margin-bottom: 10px;
	}
	.act-container {
	    position: relative;
	    width: 100%;
	    height: auto;
	    padding: 10px;
	}
	.act-container h1 {
	    position: relative;
	    font-size: 2.25rem;
	    font-weight: 700;
	    text-align: right;
	    color: #d1bd84;
	    margin: 0;
	    height: 3.25rem;
	    width: 100%;
	}
	.webp #a-1 .act-container h1 {
		background: url('../imgp/actbg-1.webp') no-repeat center;
		background-size: cover;
	}
	.no-webp #a-1 .act-container h1 {
		background: url('../img/actbg-1.jpg') no-repeat center;
		background-size: cover;
	}
	.webp #a-2 .act-container h1 {
		background: url('../imgp/actbg-2.webp') no-repeat center;
		background-size: cover;
	}
	.no-webp #a-2 .act-container h1 {
		background: url('../img/actbg-2.jpg') no-repeat center;
		background-size: cover;
	}
	.act-container p {
	    font-size: 0.875rem;
	    line-height: 1.25rem;
	    margin: 10px 0 0px 0;
	    padding-bottom: 10px;
	}
	a.act-btn {
	    width: 100%;
	    height: 45px;
	    line-height: 43px;
	    font-size: 1.25rem;
	    margin-top: 5px;
	}
	.p5-container-1 {
	    position: relative;
	    width: 100%;
	    height: 250px;
	    padding: 0;
	    display: flex;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: -ms-flexbox;
	    display: -moz-box;
	    flex-wrap: wrap;
	    justify-content: center;
	    flex-direction: column;
	    background-size: cover !important;
	}
	.p5-content-1 {
	    position: relative;
	    width: 100%;
	    height: auto;
	    padding: 0 10px;
	}
	.p5-container-1 h1 {
	    font-size: 1.875rem;
	    margin: 0;
	    line-height: 1.875rem;
	    width: 85%;
	}
	.p5-container-1 h2 {
	    font-size: 0.875rem;
	    margin: 25px 0 0 0;
	}
	.p5-container-2 {
	    width: 100%;
	    height: 45vh;
	}
	.p5-container-2:before {
	    height: 40px;
	}
	.p5-steammedal {
	    position: relative;
	    width: 75%;
	    height: 75%;
	    background-size: contain !important;
	}
	.down-container{
		display: none;
	}
	
}



/*for 手機裝置(螢幕尺寸<768px)*/
@media screen and (max-width:767px){
	section#p0 {
	    height: 100vh;
	    padding: 0;
	}
	.p0-container {
	    width: 100%;
	    top: 65%;
	}
	.p0-logo {
	    margin: 0 auto;
	}
	.p0-title {
	    width: 90%;
	    margin: 20px auto 20px;
	}
	.p0-title h3 {
	    font-size: 2.5rem;
	    line-height: 2.5rem;
	    margin: 0 0 20px 0;
	    text-align: center;
	}
	.p0-title h1 {
	    line-height: 1.25rem;
	    text-align: center;
	}
	.p0-title h1 br{
		display: none;
	}
	a#p0-playbtn {
		display: none;
	    width: 65%;
	    height: 65px;
	    margin: 0 auto;
	}
	.p0-right,.p0-share,.p0-bg{
		display: none;
	}
	section#p1{
		width: 100%;
		height: 100vh;
	}
	section#p1:before{
		display: none;
	}
	ul.p1-tab {
	    position: relative;
	    width: 100%;
	    right: unset;
	    top: unset;
	    margin-top: 50px;
	    padding: 0 0 0 0px;
	    padding: 0;
	    justify-content: center;
        align-items: flex-start;
	}
	ul.p1-tab li {
	    width: 20%;
	    margin: 0 5px;
	    padding-top: 15px;
	}
	ul.p1-tab li a{
		font-size: 1rem;
		padding: 0 5px;
	}
	.p1-tab-container {
	    width: 100%;
	    height: calc(100vh - 120px);
	}
	.p1-tab-content {
	    width: 100vw;
	    height: 100vh;
	    display: block;
	    flex-wrap: unset;
	    justify-content: unset;
	    align-items: unset;
	}
	.p1-tab-slogan {
	   position: relative;
	    top: unset;
	    left: unset;
	    transform: unset;
	    margin: 30px 0;
	    width: 100%;
	}
	.p1-tab-slogan h1 {
	    font-size: 1rem;
	    margin: 0 0px 0 0;
	    letter-spacing: 0px;
	}
	.p1-tab-slogan h1 .player-btn {
	    margin: 0;
	}
	.p1-tab-img {
	    position: relative;
	    width: 100%;
	    height: 30%;
	    bottom: 0;
	    background-size: cover !important;
	}
	.p1-tab-info {
	    width: 90%;
	    height: auto;
	    margin: 0 auto;
	}
	.p1-tab-info h1 {
	    font-size: 2.25rem;
	    margin: 0;
	    padding-bottom: 5px;
	}
	.p1-tab-info p {
	    font-size: 0.875rem;
	    line-height: 1.25rem;
	    margin: 20px 0 0 0;
	}
	section#p2{
		height: 100vh;
	}
	section#p2:before{
		display: none;
	}
	.p2-container {
	    width: 100%;
	    height: 100%;
	    padding: 0 0px;
	    display: block;
	    flex-wrap: unset;
	    justify-content: unset;
	    align-items: unset;
	    padding-top: 50px;
	}
	.p2-content {
	    width: 90%;
	    height: auto;
	    padding-top: 0px;
	    z-index: 10;
	    margin: 0px auto 50px;
	}
	.p2-content h2 {
	    font-size: 1rem;
	    margin: 0 0 5px 0;
	    line-height: 1rem;
	}
	.p2-content h1 {
	    width: auto;
	    font-size: 2.25rem;
	    margin: 0 0 5px 0;
	    line-height: 2.5rem;
	    padding-bottom: 10px;
	}
	.p2-content p {
	    font-size: 0.875rem;
	    margin: 0 0 0px 0;
	    padding-left: 0px;
	    line-height: 1.25rem;
	}
	a#morecharabtn {
		display: none;
	    width: 60%;
	    height: 50px;
	    line-height: 50px;
	    font-size: 1rem;
	    margin: 10px auto 0;
	    background-size: contain !important;
	}
	.p2-img-info {
	    width: 90%;
	    height: 40%;
	    margin: 0 auto;
	}
	.webp .p2-img-info{
		background: url('../imgp/p2bg-m.webp') no-repeat center;
		background-size: cover;
	}
	.no-webp .p2-img-info{
		background: url('../img/p2bg-m.jpg') no-repeat center;
		background-size: cover;
	}
	#p2-chara-m,
	#p2-chara-f{
		display: none;
	}
	.p2-yt {
	    left: 50%;
	    top: 95%;
	    transform: translate(-50%,-50%);
	}
	section#p3{
		height: 100vh;
	}
	.p3-container {
	    height: 100%;
	    display: block;
	    flex-wrap: unset;
	    justify-content: unset;
	    align-items: unset;
	}
	ul.p3-tab {
	    position: relative;
	    width: 100%;
	    height: 100px;
	    right: unset;
	    top: unset;
	    justify-content: center;
	    flex-direction: unset;
	}
	ul.p3-tab:after {
	    width: 100%;
	    height: 1px;
	    top: 50%;
	    left: 50%;
	    transform: translateX(-50%);
	    z-index: -1;
	}
	ul.p3-tab li {
	    width: 80px;
	    height: 80px;
	    margin: 0 10px;
	}
	ul.p3-tab li a {
	    background-size: cover !important;
	    width: 80px;
	    height: 80px;
	}
	.chara-container {
	    position: relative;
	    width: 90%;
	    height: calc(100% - 100px);
	    margin: 0 auto;
	}
	.chara-content {
	    width: 100%;
	    height: 100%;
	    padding-left: 0;
	    margin: 0 auto;
	    background-position: top left !important;
	    justify-content: space-between;
    	align-items: center;
    	flex-direction: column;
	}
	.chara-info-content {
	    width: 100%;
	    height: 100%;
	    display: flex;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: -ms-flexbox;
	    display: -moz-box;
	    flex-wrap: wrap;
	    justify-content: space-between;
	    align-items: center;
	    flex-direction: column;
	}
	.chara-info-part01 {
	    width: 100%;
	    height: auto;
	    padding: 0 0 10px 0;
	    justify-content: flex-start;
	    align-items: center;
	    flex-direction: column;
	}
	.chara-icon {
	    width: 50px;
	    height: 50px;
	    justify-content: center;
	    align-items: center;
	    margin: 10px auto;
	}
	.chara-title {
	    width: 100%;
	    height: auto;
	}
	.chara-title h2 {
	    font-size: 1rem;
	    line-height: 1rem;
	    text-align: center;
	    margin: 0;
	}
	.chara-title h1 {
	    font-size: 2.25rem;
	    line-height: 2.25rem;
	    text-align: center;
	    margin: 0;
	}
	.chara-info-part02 {
	    width: 90%;
	    height: auto;
	    padding: 0;
	    margin: 0 auto;
	}
	.chara-info-part02 p {
		display: none;
	    font-size: 0.875rem;
	    line-height: 1.25rem;
	    margin: 0;
	}
	.chara-info-part02 p br{
		display: none;
	}
	.chara-yt {
	    margin: 10px auto;
	}
	.chara-skill{
		display: none;
	}
	.chara-img {
	    position: absolute;
	    width: 100%;
	    height: 90%;
	    left: unset;
	    top: unset;
	    bottom: 0;
	    margin: 0 auto;
	}
	#chara-t3{
		background-position-x: 75% !important;
    	background-size: cover !important;
	}
	#chara-t4{
		background-position-x: 85% !important;
    	background-size: cover !important;
	}
	#chara-t5{
		background-position-x: 85% !important;
    	background-size: cover !important;
	}
	/*#t4 .chara-info-content{
		height: 65%;
	}
	#t4 .chara-img{
		height: 35%;
	}
	#t5 .chara-info-content{
		height: 65%;
	}
	#t5 .chara-img{
		height: 35%;
	}*/
	section#p4 {
	    width: 100%;
	    height: auto;
	}
	.p4-container {
	    width: 100vw;
	    height: auto;
	    justify-content: flex-start;
	    align-items: center;
	    flex-direction: column;
	    padding: 20px 0;
	}
	.p4-content {
	    width: 90%;
	    height: auto;
	    justify-content: flex-start;
	    align-items: flex-start;
	    background-image: unset !important;
	    background-color: rgba(0,0,0,0.8) !important;
	    margin-bottom: 10px;
	}
	.act-container {
	    position: relative;
	    width: 100%;
	    height: auto;
	    padding: 10px;
	}
	.act-container h1 {
	    position: relative;
	    font-size: 2.25rem;
	    font-weight: 700;
	    text-align: right;
	    color: #d1bd84;
	    margin: 0;
	    height: 3.25rem;
	    width: 100%;
	}
	.webp #a-1 .act-container h1 {
		background: url('../imgp/actbg-1.webp') no-repeat center;
		background-size: cover;
	}
	.no-webp #a-1 .act-container h1 {
		background: url('../img/actbg-1.jpg') no-repeat center;
		background-size: cover;
	}
	.webp #a-2 .act-container h1 {
		background: url('../imgp/actbg-2.webp') no-repeat center;
		background-size: cover;
	}
	.no-webp #a-2 .act-container h1 {
		background: url('../img/actbg-2.jpg') no-repeat center;
		background-size: cover;
	}
	.act-container p {
	    font-size: 0.875rem;
	    line-height: 1.25rem;
	    margin: 10px 0 0px 0;
	    padding-bottom: 10px;
	}
	a.act-btn {
	    width: 100%;
	    height: 45px;
	    line-height: 43px;
	    font-size: 1.25rem;
	    margin-top: 5px;
	}
	.p5-container-1 {
	    position: relative;
	    width: 100%;
	    height: 250px;
	    padding: 0;
	    display: flex;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: -ms-flexbox;
	    display: -moz-box;
	    flex-wrap: wrap;
	    justify-content: center;
	    flex-direction: column;
	    background-size: cover !important;
	}
	.p5-content-1 {
	    position: relative;
	    width: 100%;
	    height: auto;
	    padding: 0 10px;
	}
	.p5-container-1 h1 {
	    font-size: 1.875rem;
	    margin: 0;
	    line-height: 1.875rem;
	    width: 85%;
	}
	.p5-container-1 h2 {
	    font-size: 0.875rem;
	    margin: 25px 0 0 0;
	}
	.p5-container-2 {
	    width: 100%;
	    height: 45vh;
	}
	.p5-container-2:before {
	    height: 40px;
	}
	.p5-steammedal {
	    position: relative;
	    width: 75%;
	    height: 75%;
	    background-size: contain !important;
	}
	.down-container{
		display: none;
	}
}

@media screen and (min-width:376px) and (max-width:540px){

}

@media screen and (min-width:325px) and (max-width:374px){
	section#p0{
		height:  100vh !important;
	}
	section{
		height: 120vh !important;
	}
	section#p5{
		height:  auto !important;
	}
	.p0-title h3 {
	    font-size: 2.25rem;
	}
}

/*for 手機裝置(螢幕尺寸<320px)*/
@media screen and (max-width:320px){
	section#p0{
		height:  100vh !important;
	}
	section{
		height: 150vh !important;
	}
	section#p5{
		height:  auto !important;
	}
	.p0-title h3 {
	    font-size: 2rem;
	}
	.p0-title h1 {
	    line-height: 1rem;
	}
	.p0-title h1 br{
		display: none;
	}
}