body{
	background:#fff;
}
.window{
	opacity:0;
	-webkit-opacity:0;
	-moz-opacity:0;
	-ms-opacity:0;
	-o-opacity:0;
	transition-duration:600ms;
	-webkit-transition-duration:600ms;
	-moz-transition-duration:600ms;
	-ms-transition-duration:600ms;
	-o-transition-duration:600ms;
}
.window.open{
	opacity:1;
	-webkit-opacity:1;
	-moz-opacity:1;
	-ms-opacity:1;
	-o-opacity:1;
}
.wrap .section{
	z-index:100;
	background:#fff;
	position:fixed;
	left:0px;
	top:100%;
	width:100%;
	height:100%;

	opacity:0;
	-webkit-opacity:0;
	-moz-opacity:0;
	-ms-opacity:0;
	-o-opacity:0;

	transition-duration:600ms;
	-webkit-transition-duration:600ms;
	-moz-transition-duration:600ms;
	-ms-transition-duration:600ms;
	-o-transition-duration:600ms;
}
.wrap .section.active{
	top:0px;
	opacity:1;
	-webkit-opacity:1;
	-moz-opacity:1;
	-ms-opacity:1;
	-o-opacity:1;
}
.wrap .section.closed{
	opacity:0;
	-webkit-opacity:0;
	-moz-opacity:0;
	-ms-opacity:0;
	-o-opacity:0;
	top:-100%;
}
.wrap .section.closed{

}
.wrap .section .bg_video:after{
	content:"";
	background:rgba(255,255,255,0.2);
	position:absolute;
	left:100%;
	top:0px;
	width:100%;
	height:100%;

	transition-duration:600ms;
	-webkit-transition-duration:600ms;
	-moz-transition-duration:600ms;
	-ms-transition-duration:600ms;
	-o-transition-duration:600ms;
}
.wrap .section .bg_video.active:after{
	left:0%;
}
.wrap .section .text{
	position:absolute;
	overflow:hidden;
	/* height: 420px; */
	left:20%;
	top:50%;
	padding-left:15px;
	z-index:2;
	margin-top: -200px;
	width: -webkit-calc(80% - 80px);
	width: calc(80% - 80px);
	max-width: 768px;
}
.wrap .section .text h2{
	font-size: 42px;
	margin-bottom: 20px;
}
.wrap .section .text h2 strong{
	color: #df0011;
	font-size: 48px;
	margin-bottom: 20px;
}
.wrap .section .text p{
	font-size:24px;
	line-height:1.8em;
}


.wrap .transion{
	position:fixed;
	left:0%;
	top:0%;
	width:100%;
	height:100%;
	z-index:102;
	background:rgba(255,0,0,0);
	transition-duration:600ms;
	-webkit-transition-duration:600ms;
	-moz-transition-duration:600ms;
	-ms-transition-duration:600ms;
	--transition-duration:600ms;

}
.wrap .transion svg{
	position:fixed;
	left:50%;
	top:50%;
	z-index:102;
	display:block;
}
.wrap .transion:after{
	content:"";
	background:rgba(255,0,0,0);
	position:absolute;
	left:100%;
	top:0px;
	width:100%;
	height:100%;
	z-index:2;
	transition-duration:600ms;
	-webkit-transition-duration:600ms;
	-moz-transition-duration:600ms;
	-ms-transition-duration:600ms;
	-o-transition-duration:600ms;
}
.wrap .transion.active{
	background:rgba(255,0,0,0.7);
}


/* sec00 ------------------------------- */

.wrap .section.sec00 .text{
	position:absolute;
	left:0px;
	width:100%;
	top:50%;
	margin-top:-123px;
	text-align:center;
	max-width: none;
}
.wrap .section.sec00 .text h2{
	font-size:40px;
	text-align:center;
	line-height:1.8em;
}

/* sec01 ------------------------------- */



/* sec02 ------------------------------- */

.wrap .section.sec02 .text{
	position:absolute;
	right:10%;
	left:auto;
	top:10%;
	width: auto;
	background: rgba(0,0,0,0.6);
	padding:50px;
	text-align:left;
	color:#fff;
	margin:0px;
	height:auto;
	opacity:0;
	-webkit-opacity:0;
	-moz-opacity:0;
	-ms-opacity:0;
	-o-opacity:0;
	transition-duration:600ms;
	-webkit-transition-duration:600ms;
	-moz-transition-duration:600ms;
	-ms-transition-duration:600ms;
	-o-transition-duration:600ms;
	transition-delay:600ms;
	-webkit-transition-delay:600ms;
	-moz-transition-delay:600ms;
	-ms-transition-delay:600ms;
	-o-transition-delay:600ms;
}
.wrap .section.sec02 .text.active{
	opacity:1;
	-webkit-opacity:1;
	-moz-opacity:1;
	-ms-opacity:1;
	-o-opacity:1;
}
.wrap .section.sec02 .text h2{
	font-size:32px;
}
.wrap .section.sec02 .text p{
	font-size:16px;
	line-height:2em;
}

/* sec04 ------------------------------- */

.wrap .section.sec04 .text{
	position:absolute;
	right:auto;
	left:10%;
	top:10%;
	background: rgba(0,0,0,0.6);
	padding:50px;
	text-align:left;
	color:#fff;
	margin:0px;
	height:auto;
	opacity:0;
	-webkit-opacity:0;
	-moz-opacity:0;
	-ms-opacity:0;
	-o-opacity:0;
	transition-duration:600ms;
	-webkit-transition-duration:600ms;
	-moz-transition-duration:600ms;
	-ms-transition-duration:600ms;
	-o-transition-duration:600ms;
}
.wrap .section.sec04 .text.active{
	opacity:1;
	-webkit-opacity:1;
	-moz-opacity:1;
	-ms-opacity:1;
	-o-opacity:1;
}
.wrap .section.sec04 .text h2{
	font-size:32px;
}
.wrap .section.sec04 .text p{
	font-size:16px;
	line-height:2em;
}

/* sec06 ------------------------------- */

.wrap .section.sec06 .text{
	position:absolute;
	right:auto;
	top:auto;
	left:10%;
	bottom:10%;
	background: rgba(0,0,0,0.6);
	padding:50px;
	text-align:left;
	color:#fff;
	margin:0px;
	height:auto;
	opacity:0;
	-webkit-opacity:0;
	-moz-opacity:0;
	-ms-opacity:0;
	-o-opacity:0;
	transition-duration:600ms;
	-webkit-transition-duration:600ms;
	-moz-transition-duration:600ms;
	-ms-transition-duration:600ms;
	-o-transition-duration:600ms;
	transition-delay:600ms;
	-webkit-transition-delay:600ms;
	-moz-transition-delay:600ms;
	-ms-transition-delay:600ms;
	-o-transition-delay:600ms;
}
.wrap .section.sec06 .text.active{
	opacity:1;
	-webkit-opacity:1;
	-moz-opacity:1;
	-ms-opacity:1;
	-o-opacity:1;
}
.wrap .section.sec06 .text h2{
	font-size:32px;
}
.wrap .section.sec06 .text p{
	font-size:16px;
	line-height:2em;
}
.wrap .section.sec06 .bg_video video{
	position:absolute;
	bottom:0px;

}

/* sec08 ------------------------------- */

.wrap .section.sec08 .text{
	position:absolute;
	left:10%;
	right:auto;
	top:10%;
	background: rgba(0,0,0,0.6);
	padding:50px;
	text-align:left;
	color:#fff;
	margin:0px;
	height:auto;
	opacity:0;
	-webkit-opacity:0;
	-moz-opacity:0;
	-ms-opacity:0;
	-o-opacity:0;
	transition-duration:600ms;
	-webkit-transition-duration:600ms;
	-moz-transition-duration:600ms;
	-ms-transition-duration:600ms;
	-o-transition-duration:600ms;
	transition-delay:600ms;
	-webkit-transition-delay:600ms;
	-moz-transition-delay:600ms;
	-ms-transition-delay:600ms;
	-o-transition-delay:600ms;
}
.wrap .section.sec08 .text.active{
	opacity:1;
	-webkit-opacity:1;
	-moz-opacity:1;
	-ms-opacity:1;
	-o-opacity:1;
}
.wrap .section.sec08 .text h2{
	font-size:32px;
}
.wrap .section.sec08 .text p{
	font-size:16px;
	line-height:2em;
}

/* sec010 ------------------------------- */

.wrap .section.sec010 .text{
	position:absolute;
	right:auto;
	left:10%;
	bottom:10%;
	top:auto;
	background: rgba(0,0,0,0.6);
	padding:50px;
	text-align:left;
	color:#fff;
	margin:0px;
	height:auto;
	opacity:0;
	-webkit-opacity:0;
	-moz-opacity:0;
	-ms-opacity:0;
	-o-opacity:0;
	transition-duration:600ms;
	-webkit-transition-duration:600ms;
	-moz-transition-duration:600ms;
	-ms-transition-duration:600ms;
	-o-transition-duration:600ms;
	transition-delay:600ms;
	-webkit-transition-delay:600ms;
	-moz-transition-delay:600ms;
	-ms-transition-delay:600ms;
	-o-transition-delay:600ms;
}
.wrap .section.sec010 .text.active{
	opacity:1;
	-webkit-opacity:1;
	-moz-opacity:1;
	-ms-opacity:1;
	-o-opacity:1;
}
.wrap .section.sec010 .text h2{
	font-size:32px;
}
.wrap .section.sec010 .text p{
	font-size:16px;
	line-height:2em;
}

/* section sec10 ---------------- */

@keyframes sec10_open_text{
	0%{
		left:60%;
		width:640px;
		opacity:0;
	}
	100%{
		left:20%;
		width:640px;
		opacity:1;
	}
}
@keyframes sec10_close_text{
	0%{
		left:20%;
		opacity:1;
	}
	100%{
		left:10%;
		opacity:0;
	}
}
.wrap .section.sec011{
	z-index:102;
	transition-delay:1500ms;
	-webkit-transition-delay:1500ms;
	-moz-transition-delay:1500ms;
	-ms-transition-delay:1500ms;
	-o-transition-delay:1500ms;
}
.wrap .section.sec011.active{
	transition-delay:0ms;
	-webkit-transition-delay:0ms;
	-moz-transition-delay:0ms;
	-ms-transition-delay:0ms;
	-o-transition-delay:0ms;
}
.wrap .section.sec011 .bg>div{
	background:#f8f8f8;
	border-right: solid 1px #ccc;
	position:absolute;
	width:20%;
	height:0%;
	left:0px;
	top:0px;
	transition-duration:800ms;
	-webkit-transition-duration:800ms;
}
.wrap .section.sec011.active .bg>div{
	height:100%;
}
.wrap .section.sec011.active .bg>div:nth-child(2):hover,
.wrap .section.sec011.active .bg>div:nth-child(3):hover,
.wrap .section.sec011.active .bg>div:nth-child(4):hover{
	background: #e0e0e0;
}
.wrap .section.sec011.active .bg>div:nth-child(2) *,
.wrap .section.sec011.active .bg>div:nth-child(3) *,
.wrap .section.sec011.active .bg>div:nth-child(4) *{
	transition-duration:600ms;
	-webkit-transition-duration:600ms;
	-moz-transition-duration:600ms;
	-ms-transition-duration:600ms;
	-o-transition-duration:600ms;
}
.wrap .section.sec011 .bg>div a{
	position:absolute;
	left:0px;
	margin-top:-75px;
	height:150px;
	text-align:center;
	width:100%;
	top:50%;
	opacity:0;
	-webkit-opacity:0;
	-moz-opacity:0;
	-ms-opacity:0;
	-o-opacity:0;

	transition-duration:600ms;
	-webkit-transition-duration:600ms;
	-moz-transition-duration:600ms;
	-ms-transition-duration:600ms;
	-o-transition-duration:600ms;

  pointer-events:none;
}
.wrap .section.sec011.active .bg>div a{
	opacity:1;
	-webkit-opacity:1;
	-moz-opacity:1;
	-ms-opacity:1;
	-o-opacity:1;

  pointer-events:all;
}
.wrap .section.sec011 .bg>div a .title{
	font-size:14px;
	margin-bottom:30px;
}
.wrap .section.sec011 .bg>div a h3{
	font-size: 26px;
	line-height:80px;
	height:80px;
	margin-bottom:40px;
	letter-spacing: 0.1px;
}
.wrap .section.sec011 .bg>div:nth-child(2) a h3{
	line-height:40px;
}
.wrap .section.sec011 .bg>div a .sign{
	border-radius:50%;
	width: 40px;
	height: 40px;
	margin:30px auto;
	border: solid 1px #555;
	background-size: 70%;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(/img/about-us/brand/pc/arrow_black.png);
}
.wrap .section.sec011 .bg>div:nth-child(1){
	left:0%;
	transition-delay:600ms;
	z-index:3;
}
.wrap .section.sec011 .bg>div:nth-child(2){
	left:20%;
	transition-delay:450ms;
}
.wrap .section.sec011 .bg>div:nth-child(3){
	left:40%;
	transition-delay:300ms;
}
.wrap .section.sec011 .bg>div:nth-child(4){
	left:60%;
	transition-delay:150ms;
}
.wrap .section.sec011 .bg>div:nth-child(5){
	left:80%;
}
.wrap .section.sec011 .text{
	position:absolute;
	left:50%;
	width:400px;
	text-align:center;
	margin-left:-200px;
	top:30%;
	opacity:0;
	-webkit-opacity:0;
	transition-duration:600ms;
	-wekit-transition-duration:600ms;

	transition-delay:400ms;
	-webkit-transition-delay:400ms;
}
.wrap .section.sec011 .text a{
	padding-right:50px;
	background-image:url(/img/about-us/brand/pc/icon_window.png);
	background-repeat:no-repeat;
	background-position:right center;
}
.wrap .section.sec011.active .text{
	opacity:1;
	-webkit-opacity:1;
}
.wrap .section.sec011 .text a{
	font-size:36px;
	border-bottom:solid 2px #333;
}
.wrap .section.sec011 .top{
	position:absolute;
	left:50%;
	margin-left:-40px;
	bottom:50px;
	opacity:0;
	-webkit-opacity:0;
	pointer-events:none;
	width:80px;
	text-align:center;

	transition-duration:600ms;
	-webkit-transition-duration:600ms;
	-moz-transition-duration:600ms;
	-ms-transition-duration:600ms;
	-o-transition-duration:600ms;

	transition-delay:800ms;
	-webkit-transition-delay:800ms;
	-moz-transition-delay:800ms;
	-ms-transition-delay:800ms;
	-o-transition-delay:800ms;

}
.wrap .section.sec011.active .top{
	opacity:1;
	-webkit-opacity:1;
	-moz-opacity:1;
	-ms-opacity:1;
	-o-opacity:1;
	pointer-events:auto;
}
.wrap .section.sec011 .top a{
	display:inline-block;
	height:50px;
}
.wrap .section.sec011 .top a:after{
	content:"";
	position:absolute;

	width:20px;
	height:20px;
	border-top:solid 1px #333;
	border-left:solid 1px #333;
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	left: 50%;
	margin-left: -15px;
	top: 30px;
}
.wrap .section.sec011 .copyright{
	position:absolute;
	bottom:40px;
	right:50px;

	opacity:0;
	-webkit-opacity:0;
	-moz-opacity:0;
	-ms-opacity:0;
	-o-opacity:0;

	font-size:12px;

	transition-duration:600ms;
	-webkit-transition-duration:600ms;
	-moz-transition-duration:600ms;
	-ms-transition-duration:600ms;
	-o-transition-duration:600ms;
}
.wrap .section.sec011.active .copyright{
	opacity:1;
	-webkit-opacity:1;
	-moz-opacity:1;
	-ms-opacity:1;
	-o-opacity:1;
}

/* side_menu ---------------- */

.side_menu{
	position:fixed;
	right:20px;
	top:50%;
	margin-top:-165px;
	z-index:104;
}
.side_menu a{
	display:block;
	margin:10px;
}
.side_menu a.active{
	color:#e80;
}

/* mouse_icon ---------------- */

.mouse_icon{
	position: fixed;
	bottom: 20px;
	left: 50%;
	margin-left: -20px;
	z-index: 103;
}
.mouse_icon p{
	color:#555;
	width:40px;
	margin-bottom:5px;
	letter-spacing:0.5px;
	text-align:center;
}
.mouse_icon img{
	display:block;
	margin:0px auto;
	width:20px;
}
.mouse_icon .icon_normal{

}
.mouse_icon .icon_black{
	display:block !important;
}