@charset "utf-8";

/* nav
====================================================*/
ul.business{
	width:200px;
	height:auto;
	position:absolute;
	top:-50px;
	right:100px;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	align-content:center;
	justify-content:center;
}
ul.business li{
	width:48%;
	height:auto;
	margin:0 1%;
	text-align:center;
	font-size:11px;
	border:1px solid #00aabb;
	border-top-right-radius:20px;
	border-bottom-left-radius:20px;
	overflow:hidden;
}
ul.business li a{
	width:100%;
	height:auto;
	padding:5px 0;
	display:block;
	color:#000;
	background:#fff;
}
ul.business li a:hover{
	color:#fff;
	background:#0ab;
}
ul.business li a.current{
	color:#fff;
	background:#0ab;
}
ul.business li a.current:hover{
	cursor:default;
}
/* page event
====================================================*/
div#event.contents{
	height:auto;
	padding:0 100px 100px 100px;
	margin:0 auto;
	overflow:visible;
}
div#event.contents .secBlock{
	margin:0 auto 50px auto;
	overflow:visible;
}
/* title */
div#event.contents div#title{
	position:relative;
}
div#event.contents div#title h1{
	width:100%;
	height:auto;
	margin:180px auto 0 auto;
	font-size:50px;
}
div#event.contents div#title h2{
	width:100%;
	position:absolute;
	top:20px;
	left:0;
	text-align:right;
	font-size:12px;
	font-weight:bold;
}
div#event.contents div#title p{
	width:100%;
	height:500px;
	margin:0 auto 50px auto;
	position:relative;
	display:block;
	background:#ddd url("../img/eventBg.jpg") center center no-repeat;
	background-size:cover;
}
div#event.contents div#title p span{
	position:absolute;
}
div#event.contents div#title p span:nth-child(1){
	width:400px;
	top:50%;
	left:50%;
	margin-top:-50px;
	margin-left:-200px;
}
div#event.contents div#title p span:nth-child(2){
	width:100px;
	top:50%;
	left:50%;
	margin-top:-200px;
	margin-left:-50px;
}
div#event.contents div#title p span img{
	width:100%;
	display:block;
}
img#apolloLogo{
	animation: motion1 0.4s infinite;
}
@keyframes motion1{
	0% {
		transform: translate(1px, 1px);
	}
	25% {
		transform: translate(1px, -1px);
	}
	50% {
		transform: translate(-1px, -1px);
	}
	75% {
		transform: translate(-1px, 1px);
	}
	100% {
		transform: translate(1px, 1px);
	}
}
/* sec */
div.secBlock div.secInner{
	width:100%;
	padding:30px;
	display:block;
	border:1px solid #0ab;
	border-top:none;
	position:relative;
	overflow:visible;
}
div#sec01 div.secInner{border-left:none;}
div#sec02 div.secInner{border-right:none;}

div#event.contents div.secInner h1{
	width:auto;
	position:absolute;
	top:50%;
	margin-top:-75px;
	font-size:60px;
	font-weight:bold;
	color:rgba(0, 170, 187, 0.3);
	overflow:visible;
}
div.secBlock div.secInner h1::before{
	content:"";
	width:70px;
	height:70px;
	position:absolute;
	top:-90px;
	left:50%;
	margin-left:-35px;
	background:rgba(0, 170, 187, 0.3);
	display:block;
}
div.secBlock div.wrap{
	display:flex;
	justify-content:center;
	align-items:center;
	align-content:center;
	position:relative;
}
div.wrap div{
	height:360px;
	margin:50px 0;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	align-content:center;
	position:relative;
}
div.wrap > div:nth-child(1){
	width:300px;
	height:400px;
	background:#ddd;
}
div.wrap > div:nth-child(2){
	width:calc(100% - 300px);
}
div.wrap div h2{
	width:100%;
	text-align:center;
	font-size:24px;
	color:#fff;
}
div.wrap div h3{
	width:100%;
	margin:20px auto;
	text-align:center;
	font-size:20px;
}
div.wrap div p{
	width:90%;
	max-width:550px;
}
div.wrap div ul{
	width:90%;
	max-width:350px;
	padding:10px 0 0 20px;
	margin:0 auto 30px auto;
	line-height:2;
	border-left:1px solid #000;
	border-right:1px solid #000;
}
div.wrap div ul li{
	padding:0 0 10px 10px;
	position:relative;
	letter-spacing: 4px;
	line-height:1.4;
}
div.wrap div ul li::before{
	content:"";
	width:5px;
	height:1px;
	position:absolute;
	top:7px;
	left:0;
	background:#000;
}
div.wrap div ul li span{
	display:block;
}
div.wrap div ul li span:nth-child(1){
	font-weight:bold;
}

/* sec01 */
div#sec01 div.secInner h1{right:-50px;}
div#sec01 div.wrap{flex-direction:row;}
/* sec02 */
div#sec02 div.secInner h1{left:-50px;}
div#sec02 div.wrap{flex-direction:row-reverse;}

/*  W:-1040px
====================================================*/
@media screen and (max-width: 1040px) {
	ul.business{right:50px;}
	div#event.contents{padding:0 50px 50px 50px;}
	div.secBlock div.secInner{padding:0;}
	div#event.contents div.secInner h1{top:110px;margin-top:0;font-size:50px;}
	div#sec01 div.secInner h1{right:-40px;}
	div#sec02 div.secInner h1{left:-40px;}
	div.wrap{display:block!important;}
	div.wrap > div:nth-child(1){width:100%!important;height:50px!important;}
	div.wrap > div:nth-child(2){width:calc(100% - 100px)!important;}
	div.wrap div{height:auto;margin:0 auto 30px auto;display:block;}
	div.wrap div p{width:100%;}
}
/*  W:-670px
====================================================*/
@media screen and (max-width: 670px) {
	ul.business{top:-25px;left:5px;}
	div#event.contents div#title h1{margin:30px auto 0 auto;}
}
/*  W:-600px
====================================================*/
@media screen and (max-width: 600px) {
	div#event.contents{padding:0 10px;}
	div#event.contents div.secInner h1{display:none;}
	div.secBlock div.secInner h1::before{display:none}
	div.wrap div{margin:0 auto 10px auto;}
	div.wrap > div:nth-child(2){width:96%!important;}
	div.wrap div ul{padding:30px 5px;border:none!important;
	border-top:1px solid #ccc!important;
	border-bottom:1px solid #ccc!important;
	}
}
/*  W:-480px
====================================================*/
@media screen and (max-width: 480px) {
	div#event.contents div#title p span:nth-child(1){width:300px;margin-left: -150px;}
}
/*  W:-380px
====================================================*/
@media screen and (max-width: 480px) {
	div#event.contents div#title p span:nth-child(1){width:240px;margin-left: -120px;}
}