@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&display=swap&subset=chinese-traditional');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap');


html,body{
	position: relative;
	width: 100%;
	height: auto;
}
html{
	scroll-behavior: smooth; 
	padding: 0;
	margin: 0;
	/*min-width: 1300px;*/
}
body{
	font-family: 'Noto Sans TC', sans-serif;
	position: relative;
	padding: 0;
	margin: 0;	
	background-color: #030303;
}
*{
	box-sizing: border-box;
}
.app{
	position: relative;
	width: 100%;
	height: auto;
	margin: 0;
	overflow: hidden;
}
[data-aos="fade-ani"] {
	opacity: 0;
	transform: translateY(15%);
	transition-property: transform, opacity;
}
[data-aos="fade-ani"].aos-animate{
	opacity: 1;
	transform: translateY(0%);
}

.sidebar{
	position: fixed;
	width: 324px;
	height: 270px;
	right: 0;
	top: 100px;
	transform: translateX(0%);
	z-index: 8888;
	transition: 0.3s ease-in-out;
}
.webp .sidebar{
	background: url('../imgp/newyear-btn.webp') no-repeat center;
}
.no-webp .sidebar{
	background: url('../img/newyear-btn.png') no-repeat center;
}
.sidebar.active{
	transform: translateX(80%);
	top: unset;
	bottom: 0;
}
.sidebar.active:hover{
	transform: translateX(0%);
}
span.sidebar-arrow{
	position: absolute;
	display: block;
	width: 40px;
	height: 40px;
	border-top: 8px solid #fff;
	border-left: 8px solid #fff;
	left: 0px;
	top: 65%;
	transform: translateY(-50%) rotateZ(-45deg);
	cursor: pointer;
	box-shadow: -5px -5px 8px rgba(0, 0, 0, 0.4);
}
a.sidebar-btn{
	position: absolute;
	display: block;
	width: 200px;
	height: 35px;
	background-color: rgba(255, 255, 255, 0.9);
	border: 1px solid #fff;
	line-height: 33px;
	text-align: center;
	color: #451314;
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	bottom: 5px;
	left: 50%;
	transform: translateX(-50%);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
	transition: 0.3s linear;
}
a.sidebar-btn:hover{
	background-color: #451314;
	border: 1px solid #fff;
	color: #fff;
}

a#newyear-btn-m{
	position: fixed;
	display: none;
	width: 100vw;
	height: 50px;
	background-image: linear-gradient(#721b1b,#521313);
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9999;
}
a#newyear-btn-m span{
	position: absolute;
	display: block;
	width: 296px;
	height: 96px;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
.webp a#newyear-btn-m span{
	background: url('../imgp/newyear-btn-m.webp') no-repeat center;
}
.no-webp a#newyear-btn-m span{
	background: url('../img/newyear-btn-m.png') no-repeat center;
}

/*-------------------------------nav-----------------------------------*/

#app-nav-btn{
	position: fixed;
	width: 50px;
	height: 50px;
	padding: 0px;
	border: 1px solid #00aaad;
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -moz-box;
	flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    right: 35px;
    top: 3%;
    z-index: 99;
    cursor: pointer;
    background-color: transparent;
    outline: none;
}
#app-nav-btn div{
	position: relative;
	width: 24px;
	height: 20px;
}
#app-nav-btn div span{
	transition: 0.3s linear;
}
#app-nav-btn div span:nth-child(1){
	position: absolute;
	display: block;
	width: 24px;
	height: 2px;
	background-color: #00aaad;
	margin: 0 0 5px;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
#app-nav-btn div span:nth-child(2){
	position: absolute;
	display: block;
	width: 20px;
	height: 2px;
	background-color: #00aaad;
	margin: 0 0 5px;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
#app-nav-btn div span:nth-child(3){
	position: absolute;
	display: block;
	width: 14px;
	height: 2px;
	background-color: #00aaad;
	margin: 0 0 0px;
	bottom: 0;
	left: 0;
}
#app-nav-btn.active div span:nth-child(1){
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%) rotateZ(45deg);
}
#app-nav-btn.active div span:nth-child(2){
	display: none;
}
#app-nav-btn.active div span:nth-child(3){
	position: absolute;
	width: 24px;
	height: 2px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%) rotateZ(-45deg);
}
.app-nav{
	display: none;
	position: fixed;
	width: 100vw;
	height: 100vh;
	background-color: rgba(12, 18, 27, 0.9);
	z-index: 90;
}
.app-nav-container{
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -moz-box;
	flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 5% 0;
}
ul.p-nav{
	position: relative;
	width: 700px;
	height: auto;
	padding: 0;
	margin: 0 0 30px;
	list-style: none;
}
ul.p-nav:after{
	content: '';
	position: absolute;
	width: 100%;
	height: 30px;
	display: block;
	bottom: -30px;
	left: 50%;
	transform: translateX(-50%);
}
.webp ul.p-nav:after{
	background: url('../imgp/nav-line.webp') no-repeat center;
}
.no-webp ul.p-nav:after{
	background: url('../img/nav-line.png') no-repeat center;
}
ul.p-nav li{
	position: relative;
	width: 440px;
	height: 74px;
	margin: 10px auto;
}
ul.p-nav li a{
	position: relative;
	display: block;
	width: 100%;
	height: 74px;
	line-height: 74px;
	text-align: center;
	font-size: 36px;
	font-family: 'Noto Serif TC', serif;
	font-weight: 700;
	color: #fff;
	transition: 0.4s linear;
	text-decoration: none;
}
/*ul.p-nav li a:hover{
	color: #0c0c0c;
}
.webp ul.p-nav li a:hover{
	background: url('../imgp/nav-btn.webp') no-repeat center;
}
.no-webp ul.p-nav li a:hover{
	background: url('../img/nav-btn.png') no-repeat center;
}*/
ul.p-nav li.active a{
	color: #0c0c0c;
}
.webp ul.p-nav li.active a{
	background: url('../imgp/nav-btn.webp') no-repeat center;
}
.no-webp ul.p-nav li.active a{
	background: url('../img/nav-btn.png') no-repeat center;
}
.fast-btn{
	position: relative;
	width: max-content;
	height: auto;
	margin: 20px auto 30px;
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -moz-box;
	flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.fast-btn a{
	position: relative;
	display: block;
	margin: 0 28px;
}
.fast-btn a img{
	position: relative;
	display: block;
	max-width: 100%;
	width: 100%;
}
.steam{
	position: relative;
	width: 270px;
	height: auto;
}
a.steambtn{
	position: relative;
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -moz-box;
	flex-wrap: wrap;
    justify-content: center;
    align-items: center;
	width: 270px;
	height:70px;
	border-radius: 35px 35px;
	background-color: #00aaad;
	box-shadow: 0 0 24px #094142;
	border: 2px solid #094142;
	text-decoration: none;
	color: #fff;
	font-size: 30px;
	font-weight: 700;
	line-height: 66px;
	text-align: center;
	transition: 0.3s linear;
}
a.steambtn i{
	font-size: 50px;
	margin-right: 10px;
	line-height: 50px;
}
a.steambtn:hover{
	background-color: transparent;
	border: 2px solid #67fcff;
}
.steam > p{
	position: relative;
	font-size: 20px;
	font-weight: 400;
	text-align: center;
	color: #fff;
	margin: 5px 0;
}

/*-------------------------------steam-bar-----------------------------------*/

.steam-bar{
	display: none;
	position: fixed;
	width: 390px;
	height: 160px;
	right: 0;
	bottom: 1%;
	transform: translateY(-50%);
	z-index: 80;
	padding: 5px;
	background-image: linear-gradient(#323c4c,#242a33);
}
.steam-bar:before{
	content: '';
	position: absolute;
	width: 100%;
	height: 1px;
	background-color: rgba(98, 116, 143, 0.5);
	top: 0;
	left: 0;
	display: block;
}
.steam-bar-top{
	position: relative;
	width: 100%;
	height: 40px;
	border-bottom: 1px solid rgba(98, 116, 143, 0.5);
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -moz-box;
	flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.steam-bar-top-l{
	position: relative;
	width: auto;
	height: 40px;
	line-height: 40px;
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -moz-box;
	flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    text-align: left;
}
.steam-bar-top-l i{
	position: relative;
	font-size: 36px;
	margin-right: 10px ;
}
.steam-bar-top > i{
	position: relative;
	font-size: 34px;
	color: #778baa;
}
.steam-bar-container{
	position: relative;
	width: 100%;
	height: 85px;
	margin-top: 5px;
	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 5px;
}
.steam-bar-container p{
	position: relative;
	font-size: 14px;
	font-weight: 300;
	color: #fff;
	margin: 0;
	width: 65%;
	text-align: justify;
}
.steam-bar-btn{
	position: absolute;
	width: max-content;
	height: 50px;
	background-color: #000;
	bottom: -26px;
	right: 10px;
	padding: 7px;
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -moz-box;
	flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    border-radius: 25px 25px;
}
.steam-bar-btn p{
	position: relative;
	font-size: 16px;
	font-weight: 300;
	color: #fff;
	margin: 0 0 0 10px;
}
.steam-bar-btn a{
	position: relative;
	display: block;
	font-size: 16px;
	font-weight: 500;
	color: #fff;
	margin: 0;
	background-image: linear-gradient(#72a0e5,#44608c);
	text-align: center;
	width: 120px;
	height: 36px;
	border-radius: 18px 18px;
	line-height: 36px;
	text-decoration: none;
	margin-left: 7px;
	transition: 0.3s linear;
}
.steam-bar-btn a:hover{
	filter: brightness(125%);
	-webkit-filter: brightness(125%);
	-ms-filter: brightness(125%);
	-o-filter: brightness(125%);
}

/*-------------------------------p1-----------------------------------*/

section#p1{
	position: relative;
	width: 100%;
	height: 950px;
	z-index: 20;
    overflow: hidden;
    display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -moz-box;
	flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.webp section#p1{
	background: url('../imgp/p1bg.webp') no-repeat center;
}
.no-webp section#p1{
	background: url('../img/p1bg.jpg') no-repeat center;
}
.p1-head{
	position: absolute;
	width: 100%;
	height: 50px;
	top: 3%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	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 130px 0 35px;
}
a.brand{
	position: relative;
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -moz-box;
	flex-wrap: wrap;
    justify-content: center;
    align-items: center;
	width: max-content;
	height: 50px;
	text-decoration: none;
}
a.brand img{
	position: relative;
	display: block;
	max-width: 100%;
	max-height: 100%;
}
a.brand p{
	position: relative;
	font-size: 16px;
	font-weight: 300;
	text-align: left;
	color: #fff;
	margin-left: 20px;
}
ul.p1-nav{
	position: relative;
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -moz-box;
	flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    z-index: 10;
}
ul.p1-nav li{
	position: relative;
	width: max-content;
	height: 50px;
	margin: 0 10px;
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -moz-box;
	flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
ul.p1-nav li a{
	position: relative;
	padding: 5px 25px;
	display: block;
	font-size: 16px;
	font-weight: 300;
	text-align: center;
	color: #fff;
	text-decoration: none;
	transition: 0.3s linear;
	border-bottom: 1px solid transparent;
}
ul.p1-nav li a:after{
	content: '';
	position: absolute;
	width: 22px;
	height: 24px;
	display: block;
	background: url('../img/p1nav-active.png') no-repeat center;
	bottom: -24px;
	left: 50%;
	transform: translateX(-50%);
	visibility: hidden;
	opacity: 0;
	transition: 0.3s linear;
}
ul.p1-nav li a:hover{
	color: #67fcff;
	border-bottom: 1px solid #67fcff;
}
ul.p1-nav li a:hover:after{
	visibility: visible;
	opacity: 1;
}
ul.p1-nav li a.active{
	color: #67fcff;
	border-bottom: 1px solid #67fcff;
}
ul.p1-nav li a.active:after{
	visibility: visible;
	opacity: 1;
}
.p1-container{
	position: relative;
	width: 1400px;
	height: auto;
	z-index: 5;
}
.p1-title{
	position: relative;
	margin-bottom: 80px;
}
.p1-title-pc{
	display: block;
}
.p1-title-m{
	display: none;
}
.p1-video{
	position: absolute;
	width: 360px;
	height: 203px;
	right: 0px;
	bottom: 0;
	background-color: #0c121b;
	border: 1px solid #00fbff;
	z-index: 10;
	overflow: hidden;
}
.p1-video a{
	position: absolute;
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -moz-box;
	flex-wrap: wrap;
    justify-content: center;
    align-items: center;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	transition: 0.3s linear;
	z-index: 10;
}
.p1-video a img{
	position: relative;
	display: block;
	max-width: 100%;
	max-height: 100%;
}
.p1-video a:hover{
	filter: brightness(125%);
	-webkit-filter: brightness(125%);
	-ms-filter: brightness(125%);
	-o-filter: brightness(125%);
}
#p0v{
	position: absolute;
	min-width: 100%;
	min-height: 100%;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 1;
}


/*-------------------------------p2-----------------------------------*/

section#p2{
	position: relative;
	width: 100%;
	height: 700px;
	z-index: 20;
    overflow: hidden;
    display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -moz-box;
	flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.webp section#p2{
	background: url('../imgp/p2bg.webp') no-repeat center;
}
.no-webp section#p2{
	background: url('../img/p2bg.jpg') no-repeat center;
}
section#p2:before{
	content: '';
	position: absolute;
	display: block;
	width: 100%;
	height: 2px;
	background-color: rgba(21, 148, 150, 0.4);
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
.p2-container{
	position: relative;
	width: 1400px;
	height: auto;
}
.p2-title{
	position: relative;
	width: max-content;
	margin:0 auto 30px;
}
.p2-title img{
	position: relative;
	display: block;
	max-width: 100%;
	max-height: 100%;
}
.p2-container p{
	position: relative;
	font-size: 16px;
	font-weight: 300;
	text-align: center;
	color: #fff;
	text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}
.p2-lightning-1{
	position: absolute;
	width: 492px;
	height: 432px;
	left: 0;
	bottom: -2%;
	overflow: hidden;
	background: url('../img/p2lightning-1.png') no-repeat right bottom;
	filter: brightness(1);
}
.p2-lightning-2{
	position: absolute;
	width: 345px;
	height: 441px;
	right: 0;
	bottom: -2%;
	overflow: hidden;
	background: url('../img/p2lightning-2.png') no-repeat right bottom;
	filter: brightness(1);
}


/*-------------------------------p3-----------------------------------*/

section#p3{
	position: relative;
	width: 100%;
	height: 950px;
	z-index: 20;
    overflow: hidden;
}
.webp section#p3{
	background: url('../imgp/p3bg.webp') no-repeat center;
}
.no-webp section#p3{
	background: url('../img/p3bg.jpg') no-repeat center;
}
section#p3:before{
	content: '';
	position: absolute;
	display: block;
	width: 100%;
	height: 2px;
	background-color: rgba(132, 170, 193, 0.25);
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
.p3-container{
	position: relative;
	width: 1400px;
	height: auto;
	margin: 0 auto;
	padding-top: 100px;
}
ul.chara-tab{
	position: absolute;
	list-style: none;
	padding: 0 0 0 10px;
	margin: 0;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
}
ul.chara-tab:before{
	content: '';
	position: absolute;
	width: 1px;
	height: 90%;
	left: 0;
	top: 55%;
	transform: translateY(-50%);
	background-color: #88fff6;
	display: block;
}
ul.chara-tab li{
	position: relative;
	width: max-content;
	margin-bottom: 10px;
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	transition: 0.3s linear;
}
ul.chara-tab li.active{
	filter: grayscale(0%);
	-webkit-filter: grayscale(0%);
	-ms-filter: grayscale(0%);
	-o-filter: grayscale(0%);
}
ul.chara-tab li:hover{
	filter: grayscale(0%);
	-webkit-filter: grayscale(0%);
	-ms-filter: grayscale(0%);
	-o-filter: grayscale(0%);
}
ul.chara-tab li a{
	position: relative;
	display: block;
}
ul.chara-tab li a img{
	position: relative;
	display: block;
	max-width: 100%;
	max-height: 100%;
}
.p-tag{
	position: relative;
	width: 236px;
	height: 47px;
	line-height: 47px;
	font-size: 20px;
	font-weight: 700;
	color: #171717;
	letter-spacing: 3px;
	padding: 0 20px;
}
.webp .p-tag{
	background: url('../imgp/p-tag.webp') no-repeat center;
}
.no-webp .p-tag{
	background: url('../img/p-tag.png') no-repeat center;
}
.chara-container{
	position: relative;
	width: 100%;
	height: 800px;
	margin-top: 10px;
	z-index: 5;
}
.chara-content{
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -moz-box;
	flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}
.chara-info{
	position: relative;
	width: 695px;
	height: auto;
	z-index: 10;
}
.chara-info img{
	position: relative;
	display: block;
	max-width: 100%;
	max-height: 100%;
}
.chara-info h1{
	position: relative;
	width: max-content;
	font-size: 70px;
	font-weight: 700;
	color: #fff;
	text-align: left;
	margin: 15px 0 30px;
	line-height: 70px;
}
.chara-info h1 a{
	position: absolute;
	display: block;
	right: -120px;
	top: 50%;
	transform: translateY(-50%);
	transition: 0.3s linear;
}
.chara-info h1 a:hover{
	filter: brightness(125%);
	-webkit-filter: brightness(125%);
	-ms-filter: brightness(125%);
	-o-filter: brightness(125%);
}
.chara-info p{
	position: relative;
	font-size: 14px;
	font-weight: 300;
	color: #fff;
	text-align: left;
	margin: 0px 0 30px;
	line-height: 28px;
}
.skill{
	position: relative;
	width: 80%;
	height: auto;
	border: 1px solid #40e1df;
	background-color: rgba(20, 42, 49, 0.7);
	padding: 25px;
}
.skill > ul{
	position: relative;
	padding: 0 0 0 15px;
	margin: 0;
	list-style: none;
	width: 100%;
}
.skill > ul > li{
	position: relative;
	width: 100%;
	font-size: 14px;
	font-weight: 300;
	color: #5dfff1;
	text-align: left;
	margin: 0px 0 10px;
}
.skill > ul > li:before{
	content: '';
	position: absolute;
	display: block;
	width: 5px;
	height: 5px;
	background-color: #5dfff1;
	left: -15px;
	top: 9px;
	transform: rotateZ(45deg);
}
.skill > ul > li > ul{
	position: relative;
	padding: 0 0 0 0px;
	margin: 5px 0;
	list-style: none;
	width: 100%;
}
.skill > ul > li > ul > li{
	position: relative;
	width: 100%;
	font-size: 14px;
	font-weight: 300;
	color: #54bfb6;
	text-align: left;
	margin: 0px 0 5px;
}
#t3 .chara{
	position: absolute;
	width: 600px;
	height: 950px;
	bottom: 0;
	left: 140px;
	z-index: 5;
}
.webp #t3 .chara{
	background: url('../imgp/t3-chara.webp') no-repeat top center;
}
.no-webp #t3 .chara{
	background: url('../img/t3-chara.png') no-repeat top center;
}
#t4 .chara{
	position: absolute;
	width: 600px;
	height: 950px;
	bottom: 0;
	left: 140px;
	z-index: 5;
}
.webp #t4 .chara{
	background: url('../imgp/t4-chara.webp') no-repeat top center;
}
.no-webp #t4 .chara{
	background: url('../img/t4-chara.png') no-repeat top center;
}
#t5 .chara{
	position: absolute;
	width: 775px;
	height: 950px;
	bottom: 0;
	left: 140px;
	z-index: 5;
}
.webp #t5 .chara{
	background: url('../imgp/t5-chara.webp') no-repeat top center;
}
.no-webp #t5 .chara{
	background: url('../img/t5-chara.png') no-repeat top center;
}
.p3-lightning-1{
	position: absolute;
	width: 339px;
	height: 415px;
	right: 0;
	bottom: -2%;
	overflow: hidden;
	background: url('../img/p3-ligntning.png') no-repeat right bottom;
	filter: brightness(1);
}


/*-------------------------------p4-----------------------------------*/

section#p4{
	position: relative;
	width: 100%;
	height: 950px;
	z-index: 20;
    overflow: hidden;
}
.webp section#p4{
	background: url('../imgp/p4bg.webp') no-repeat center;
}
.no-webp section#p4{
	background: url('../img/p4bg.jpg') no-repeat center;
}
section#p4:before{
	content: '';
	position: absolute;
	display: block;
	width: 100%;
	height: 2px;
	background-color: rgba(0, 73, 79, 0.5);
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
.p4-container{
	position: relative;
	width: 1400px;
	height: auto;
	margin: 0 auto;
	padding-top: 100px;
}
.p4-content{
	position: relative;
	width: 100%;
	height: calc(100% - 147px);
	padding-top: 110px;
}
.p4-content h1{
	position: relative;
	width: 100%;
	font-size: 70px;
	font-weight: 700;
	color: #fff;
	text-align: left;
	margin: 15px 0 30px;
	line-height: 70px;
}
.p4-content p{
	position: relative;
	width: 40%;
	font-size: 14px;
	font-weight: 300;
	color: #fff;
	text-align: left;
	margin: 0px 0 30px;
	line-height: 28px;
}
.p4-content .skill{
	width: 40%;
}
a#p4-video-btn{
	position: absolute;
	top: 240px;
	right: 230px;
}

/*-------------------------------p5-----------------------------------*/

section#p5{
	position: relative;
	width: 100%;
	height: auto;
	z-index: 25;
    /*overflow: hidden;*/
}
.p5-part-1{
	position: relative;
	width: 100%;
	height: 500px;
}
.webp .p5-part-1{
	background: url('../imgp/p5bg-1.webp') no-repeat center;
}
.no-webp .p5-part-1{
	background: url('../img/p5bg-1.jpg') no-repeat center;
}
.p5-part-1-container{
	position: relative;
	width: 1400px;
	height: 100%;
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -moz-box;
	flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    margin: 0 auto;
    z-index: 10;
}
.p5-part-1-container h1{
	position: relative;
	font-size: 50px;
	font-weight: 700;
	color: #88fff6;
	text-align: left;
	margin: 0px 0 45px;
	line-height: 50px;
}
.p5-part-1-container p{
	position: relative;
	font-size: 20px;
	font-weight: 400;
	color: #fff;
	text-align: left;
	margin: 0px 0 0px;
	line-height: 36px;
}
.p5-chara{
	position: absolute;
	width: 100%;
	height: 591px;
	bottom: 0;
	left: 0;
	z-index: 5;
}
.webp .p5-chara{
	background: url('../imgp/p5-chara.webp') no-repeat center;
}
.no-webp .p5-chara{
	background: url('../img/p5-chara.png') no-repeat center;
}
.p5-part-2{
	position: relative;
	width: 100%;
	height: 200px;
}
.webp .p5-part-2{
	background: url('../imgp/p5bg-2.webp') no-repeat center;
}
.no-webp .p5-part-2{
	background: url('../img/p5bg-2.jpg') no-repeat center;
}
.p5-part-2-container{
	position: relative;
	width: 1400px;
	height: 100%;
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -moz-box;
	flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    z-index: 10;
}


/*-------------------------------footer-----------------------------------*/

footer{
	position: relative;
	width: 100%;
	height: auto;
	padding: 35px 0;
	background-color: #060606;
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -moz-box;
	flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.footer-container{
	position: relative;
	width: 100%;
	height: auto;
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -moz-box;
	flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#booming-logo{
	position: relative;
	width: 140px;
	height: 44px;
	pointer-events: none;
	margin: 0 auto;
}
.webp #booming-logo{
	background: url('../imgp/booming-logo-w.webp') no-repeat center;
}
.no-webp #booming-logo{
	background: url('../img/booming-logo-w.png') no-repeat center;
}
p.copyright{
	position: relative;
	font-size: 0.75rem;
	font-weight: 400;
	text-align: center;
	color: #d8d8d8;
	margin: 15px 0 25px;
}
.term{
	position: relative;
	width: max-content;
	height: auto;
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -moz-box;
	flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.term p{
	position: relative;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.1rem;
	text-align: center;
	color: #d8d8d8;
	margin: 0 0 25px 0;
}
img#eva15{
	position: relative;
	height: 80px;
	height: 80px;
	margin: 0 auto;
}

[data-aos="light"] {
	filter: brightness(3) blur(10px);
}
[data-aos="light"].aos-animate{
	filter: brightness(1) blur(0px);
}