.sec1{
	padding: 6.77% 0 8.96%;
	background-color: #fff;
	position: relative;
}
.sec1 .table{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-direction: row;
	flex-wrap: wrap;
	margin-bottom: 6.6%;
}
.sec1 .table::after{
	display: block;
	content: "";
	width: 28.1%;
}
.sec1 .item{
	color: #333;
	width: 28.1%;
	padding: 3.75% 0;
	position: relative;
	display: block;
	z-index: 1;
}
.sec1 .item:hover{
	color: #fff;
}
.sec1 .item::after{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: rgba(153,153,153,0.3);
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}
.sec1 .item:hover::after{
	opacity: 0;
}
.sec1 .item .img-box{
	position: absolute;
	left: -11.95%;
	right: -11.95%;
	top: -1px;
	bottom: -1px;
	overflow: hidden;
	border-radius: 1.875em;
	z-index: -2;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
	opacity: 0;
}
.sec1 .item:hover .img-box{
	opacity: 1;
}
.sec1 .item .img-box::after{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	content: "";
	background-repeat: no-repeat;
	background-image: url(../images/index_sec5_boxbg.png);
	background-size: cover;
}
.sec1 .item .img-box img{
	position: absolute;
	left: 50%;
	top: 50%;
	min-width: 100%;
	min-height: 100%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.sec1 .item h5{
	font-size: 1.75em;
	color: inherit;
	font-weight: normal;
	line-height: 1.64;
	height: 3.28em;
	-webkit-transition: color 0.5s,font-weight 0.5s;
	transition: color 0.5s,font-weight 0.5s;
	margin-bottom: 8%;
	font-weight: bold;
}
.sec1 .item p{
	font-size: 1.125em;
	color: inherit;
	line-height: 2;
	height: 8em;
	margin-bottom: 19%;
	-webkit-transition: color 0.5s;
	transition: color 0.5s;
}
.sec1 .item .flexbox{
	-webkit-display: flex;
	-webkit-align-items: flex-end;
	-webkit-justify-content: space-between;
	-webkit-flex-direction: row;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-direction: row;
}
.sec1 .item .time{
	font-size: 1.125em;
	color: inherit;
	font-weight: bold;
	-webkit-transition: color 0.5s;
	transition: color 0.5s;
}
.sec1 .item .arrow{
	width: 1.25em;
	background-repeat: no-repeat;
	background-image: url(../images/index_sec5_arrow_bg.png);
	background-size: auto 200%;
	background-position: center bottom;
	opacity: 0;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}
.sec1 .item:hover .arrow{
	-webkit-transition: transform 0.5s 0.25s, opacity 0.5s 0.25s;
	transition: transform 0.5s 0.25s, opacity 0.5s 0.25s;
	opacity: 1;
	-webkit-transform: translateX(0);
	transform: translateX(0);
}

.sec6{
	text-align: center;
	background-color: #081827;
	padding: 9.25% 0;
	position: relative;
}
.sec6 h3{
	font-size: 2.5em;
	color: #fff;
	font-weight: bold;
	line-height: 1.5;
	margin-bottom: 3.3%;
}
.sec6 h3 span{
	display: inline-block;
	opacity: 0;
	transform: translateY(10vh);
 	transition:opacity .8s cubic-bezier(.22,1,.36,1),transform 1.6s cubic-bezier(.22,1,.36,1);
}
.sec6 h3 span:nth-child(1){
	transition-delay: 0.4s;
}
.sec6 h3 span:nth-child(3){
	transition-delay: 0.6s;
}
.sec6 h3 span:nth-child(5){
	transition-delay: 0.8s;
}
.sec6 h3 span.actived{
 	transform:translateY(0);
 	opacity:1;
}
.sec6 .btn-box{
	opacity: 0;
	transform: translateY(10vh);
 	transition:opacity .8s cubic-bezier(.22,1,.36,1),transform 1.6s cubic-bezier(.22,1,.36,1);
	transition-delay: 1s;
}
.sec6 .btn-box.actived{
 	transform:translateY(0);
 	opacity:1;
}

.sec6 .join{
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	background:transparent;
	padding:0;
	border:0;
	cursor:pointer;
	position:relative;
	display:inline-flex;
	flex-direction:row;
	align-items:center;
	justify-content:space-between;
	width:auto;
	min-width:10.25em;
	height: 2.875em;
	padding:0 3em 0 2em;
	margin-right: 3.82%;
}
.sec6 .join .svg {
 	position:absolute;
 	top:0;
 	left:0;
 	width:100%;
 	height:100%;
 	z-index:0;
 	overflow:visible;
 	pointer-events:none;
}
.sec6 .join .svg rect{
	stroke-dasharray: 23em, 0px;
	stroke-dashoffset: 13.753em;
	opacity: 1;
	-webkit-transition: all 1s;
	transition: all 1s;
}
.sec6 .join:hover .svg rect{
	stroke-dasharray: 2.2533em, 20.75em;
	stroke-dashoffset: -9.25em;
	opacity: 0;
}
.sec6 .join .svg circle {
	opacity:0;
	stroke-dasharray: 2.2533em, 9.0133em;
	-webkit-transition: all 1s;
	transition: all 1s;
}
.sec6 .join:hover .svg circle {
	opacity:1;
	stroke-dasharray: 9.0133em, 2.2533em;
}
.sec6 .join .word {
	 position:relative;
	 display:inline-block;
	 font-size:1em;
	 letter-spacing:.1em;
	 text-transform:uppercase;
	 white-space:nowrap;
	 color: #fff;
	 -webkit-transition: transform 1s;
	 transition: transform 1s;
}
.sec6 .join:hover .word{
	-webkit-transform: translate(-2em);
	transform: translate(-2em);
}
.sec6 .join .arrow {
	 position:absolute;
	 top:-1%;
	 right:0;
	 width:2.875em;
	 height:2.875em;
	 background-position:50%;
	 background-repeat:no-repeat;
	 background-size:0.8164em auto;
	 background-image:url(../images/btncommon_arrow.svg);
	 -webkit-transition: transform 1s;
	 transition: transform 1s;
	 -webkit-transform:translate(-35%);
	 transform:translate(-35%);
}
.sec6 .join:hover .arrow {
	 -webkit-transform:translate(0%);
	 transform:translate(0%);
}
.sec6 .contact{
	font-size: 1.125em;
	color: #fff;
	text-decoration: underline;
}
.sec6 .contact:hover{
	color: #39b9f3;
}


@media only screen and (max-width:1024px){
	.sec1{
		padding: 15% 0;
	}
	.sec1 .table{
		margin-bottom: 10%;
		justify-content: center;
	}
	.sec1 .table::after{
		width: 80%;
	}
	.sec1 .item{
		width: 80%;
		padding: 7% 0;
	}
	.sec1 .item h5{
		font-size: 1.625em;
	}
	.sec1 .item p{
		font-size: 1.25em;
		line-height: 1.5;
	}

	.sec6{
		padding: 15% 0;
	}
	.sec6 h3{
		font-size: 1.5em;
		margin-bottom: 10%;
	}
	.sec6 .btn-box{
		font-size: 1.125em;
	}
	.sec6 .join{
		margin-right: 5%;
	}
	.sec6 .join:hover .svg rect{
		stroke-dasharray: 23em, 0px;
		stroke-dashoffset: 13.753em;
		opacity: 1;
	}
	.sec6 .join:hover .svg circle {
		opacity:0;
		stroke-dasharray: 2.2533em, 9.0133em;
	}
	.sec6 .join:hover .word{
		-webkit-transform: translate(0);
		transform: translate(0);
	}
	.sec6 .join:hover .arrow {
		 -webkit-transform:translate(-35%);
		 transform:translate(-35%);
	}
}