#wrap {width: 100vw;}
header {width: 100vw;height: 100vh;}
header h1 {text-align: center;color: #fff;margin-top: 120px;font-size: 65px;}
header h1 span {text-align: center;color: #fff;margin-top: 320px;font-size: 65px;margin-left: 490px}

/*header .my_page .mine  {float: left;font-size: 20px;}
header .my_page .mine a {color: #fff;text-align: center}
header .my_page .mine a img {width: 160px;}
header .my_page .mine a img .page {float: left;}
header .my_page .mine a .my img {}
header .my_page .mine a .page{}
header .my_page .mine a .baner{}
header .my_page .mine a .popup{}*/




.my_page {width:2px; height:2px; border:0px solid yellow; position: fixed; left: 40%; top: 50%;perspective: 600px; transform: scale(2); transition: 1s; }
/*nav:hover ul {animation-duration: 20s}*/
.my_page ul.mine {width: 200px; height: 200px; transform: rotateX(-30deg) translateX(-50%) ; position: absolute;transform-style: preserve-3d; animation: ddd 10s infinite linear; border:0px solid red; }

@keyframes ddd {
	0% {transform: rotateX(-0deg) rotateY(0) translateX(0%)}
	100% {transform: rotateX(-0deg) rotateY(360deg) translateX(0%);}
}


.my_page ul.mine li {width: 100px; height: 100px; position: absolute; transform: translateX(0%) translateZ(100px); transform-style: preserve-3d; cursor: pointer; color: #fff; text-align: center;}

.my_page ul.mine li img {width: 100%;}
.my_page ul.mine li:nth-child(1) {transform:rotateY(90deg) translateZ(250px); }
.my_page ul.mine li:nth-child(2) {transform:rotateY(180deg) translateZ(250px);}
.my_page ul.mine li:nth-child(3) {transform:rotateY(270deg) translateZ(250px);}
.my_page ul.mine li:nth-child(4) {transform:rotateY(360deg) translateZ(250px);}








video {width: 100vw; position: fixed; z-index: -1; top: 0; left: 0}




.section_box h2 {color: #fff;font-size: 100px; letter-spacing: 0.3em; text-align: center;}
.section_box section.action h2 span {animation:bban 2s forwards cubic-bezier(0,.04,0,.92);}
@keyframes bban {
	0% {opacity: 0.2}
	10% {opacity: 1}
	20% {opacity: 0.2}
	30% {opacity: 1}
	40% {opacity: 0.2}
	50% {opacity: 1}
	60% {opacity: 0.2}
	100% {opacity: 1}
}

.section_box section.action h2 span:nth-child(1) {animation-delay: 0s}
.section_box section.action h2 span:nth-child(2) {animation-delay: 0.5s}
.section_box section.action h2 span:nth-child(3) {animation-delay: 0.3s}
.section_box section.action h2 span:nth-child(4) {animation-delay: 0.2s}
.section_box section.action h2 span:nth-child(5) {animation-delay: 0.4s}
.section_box section.action h2 span:nth-child(6) {animation-delay: 0.7s}
.section_box section.action h2 span:nth-child(7) {animation-delay: 0.3s}
.section_box section.action h2 span:nth-child(8) {animation-delay: 0.6s}
.section_box section.action h2 span:nth-child(9) {animation-delay: 0.5s}
.section_box section.action h2 span:nth-child(10) {animation-delay: 0.2s}
.section_box section.action h2 span:nth-child(11) {animation-delay: 0.1s}
.section_box section.action h2 span:nth-child(12) {animation-delay: 0.4s}
.section_box section.action h2 span:nth-child(13) {animation-delay: 0.5s}
.section_box section.action h2 span:nth-child(14) {animation-delay: 0.7s}

#section1 {width:100vw; height: 100vh; position: relative;}
#section1 a {}
#section1 li {color: #fff;font-size: 20px;text-align: center;margin-top: 100px}
#section1 p {position: absolute; right: 100px; top: 95px; }
#section1 h2 {color: #7aa4ff;}

#section2 {width:100vw;}
#section2:after {content: ""; display: block; clear: both}
#section2 ul {text-align: center}
#section2 ul li {display: inline-block; width: 400px; height: 560px; border:3px solid yellow; overflow: hidden; margin: 50px}
#section2 ul li img {width: 100%}
#section2 h2 a {color: #ea627d;}

#sub_section2 {width:100vw;}
#sub_section2:after {content: ""; display: block; clear: both}
#sub_section2 ul {text-align: center}
#sub_section2 ul li {display: inline-block; width: 400px; height: 560px; border:3px solid yellow; overflow: hidden; margin: 50px}
#sub_section2 ul li img {width: 100%}
#sub_section2 h2 a {color: #ea627d;}

#section3 {width:100vw; height: 100vh}
#section3 p {text-align: center;line-height: 75px;margin-top: 45px}
#section3 h2 {color: #d6d3d6;}


#section4 {width:100vw; height: 100vh}
#section4 p {text-align: center;margin-top: 80px}
#section4 h2 {color: #fbe47c;}
#section4 img {width: 255px;}