@charset "utf-8";
/* CSS Document */
*{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	font-family: 'Noto Sans TC', sans-serif;
	vertical-align:baseline;
	text-decoration:none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
body, html{
	overflow-anchor: none;
	width:100%;
	height: auto;
}
html{
	font-size: 18px;
}
.hide,.toggle{
	display: none;
}
.water{
	position: fixed;
	right: 0;
	bottom: 50px;
	width: 78px;
	height: 500px;
	z-index: 50;
}
.water a{
	display: block;
	width: 78px;
	height: 245px;
	transition: 0.3s;
}
.water a:hover,.nav > div:hover,.but > a:hover{
	filter: invert(100%);
	transition: 0.3s;
}
a.w1{
	background: url(../img/w1.png) no-repeat center;
}
a.w2{
	background: url(../img/w2.png) no-repeat center;
}
.kv{
	background: url(../img/bg1.jpg) no-repeat center;
	background-size: cover;
	width: 100%;
	height: 890px;
	position: relative;
	overflow: hidden;
}
.kv > div,.top > div,.p1 > div,.p3 > div,.p4 > div,.f_logo > div,.pop1 > div,.pop2 > div,.op_pic > div{
	position: absolute;
}
.top{
	width: 90%;
	top: 20px;
	left: 5%;
	position: relative;
	z-index: 95;
}
.logo{
	background: url(../img/logo.png) no-repeat center;
	width: 233px;
	height: 204px;
	left: 0;
	top: 30px;
	cursor: pointer;
}
.nav{
	right: 0;
}
.nav > div{
	display: inline-block;
	height: 73px;
	cursor: pointer;
	transition: 0.3s;
	margin-left: -10px;
}
.nav1{
	background: url(../img/nav1.png) no-repeat center;
	background-size: contain;
	width: 199px;
}
.nav2{
	background: url(../img/nav2.png) no-repeat center;
	background-size: contain;
	width: 240px;
}
.nav3{
	background: url(../img/nav3.png) no-repeat center;
	background-size: contain;
	width: 218px;
}
.title_kv{
	background: url(../img/title.png) no-repeat center;
	background-size: contain;
	width: 614px;
	height: 234px;
	left: calc(50% - 307px);
	top: 160px;
}
.sentra{
	background: url(../img/sentra.png) no-repeat center;
	background-size: contain;
	width: 587px;
	height: 291px;
	left: calc(50% - 680px);
	top: 430px;
}
.kicks{
	background: url(../img/kicks.png) no-repeat center;
	background-size: contain;
	width: 618px;
	height: 288px;
	left: calc(50% - 40px);
	top: 530px;
}
.p1{
	background: url(../img/bg2.jpg) no-repeat center;
	background-size: cover;
	width: 100%;
	height: 1380px;
	position: relative;
	overflow: hidden;
}
.p1bg{
	background: url(../img/bg2_t.png) no-repeat center;
	width: 810px;
	height: 805px;
	left: calc(50% - 100px);
	top: 0;
}
.title1{
	background: url(../img/p1_title.png) no-repeat center;
	background-size: contain;
	width: 562px;
	height: 262px;
	left: calc(50% - 550px);
	top: 130px;
}
.p1a1{
	background: url(../img/p1_a1.png) no-repeat center;
	background-size: contain;
	width: 942px;
	height: 434px;
	left: calc(50% - 660px);
	top: 430px;
	cursor: pointer;
	transition: 0.3s;
}
.p1a2{
	background: url(../img/p1_a2.png) no-repeat center;
	background-size: contain;
	width: 563px;
	height: 259px;
	left: calc(50% + 90px);
	top: 690px;
	cursor: pointer;
	transition: 0.3s;
}
.p1a1:hover,.p1a2:hover{
	filter: brightness(1.2);
}
.p1a3{
	background: url(../img/p1_a3.png) no-repeat center;
	background-size: contain;
	width: 348px;
	height: 238px;
	left: calc(50% + 240px);
	top: 400px;
}
.p1b{
	left: calc(50% - 600px);
	top: 1050px;
	width: 1200px;
	height: 204px;
	text-align: center;
}
.p1b > div{
	display: inline-block;
	margin: 0 0 0 -50px;
	width: 443px;
	height: 204px;
}
.b1{
	background: url(../img/p1_b1.png) no-repeat center;
	background-size: contain;
}
.b2{
	background: url(../img/p1_b2.png) no-repeat center;
	background-size: contain;
}
.b3{
	background: url(../img/p1_b3.png) no-repeat center;
	background-size: contain;
}
.p2,.p3,.p4{
	background: url(../img/bg3.jpg) no-repeat center;
	background-size: cover;
	width: 100%;
	height: 1000px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.mv{
	width: 1200px;
	height: 80vh;
	margin: 0 auto;
	padding-top: 10vh;
}
.mv iframe{
	width: 100%;
	height: 100%;
}
.p3{
	background: url(../img/bg4.jpg) no-repeat center;
	background-size: cover;
}
.title2{
	background: url(../img/p3_title.png) no-repeat center;
	background-size: contain;
	width: 460px;
	height: 128px;
	left: calc(50% - 560px);
	top: 200px;
}
.title2a{
	background: url(../img/p3_title2.png) no-repeat center;
	background-size: contain;
	width: 436px;
	height: 192px;
	left: calc(50% + 180px);
	top: 180px;
}
.p3 .sentra{
	width: 740px;
	height: 367px;
	left: calc(50% - 680px);
	top: 400px;
}
.p3t{
	left: calc(50% + 190px);
	top: 460px;
}
.p3t > div{
	width: 518px;
	height: 46px;
	margin-bottom: 50px;
}
.p3t1{
	background: url(../img/p3_t1.png) no-repeat left;
}
.p3t2{
	background: url(../img/p3_t2.png) no-repeat left;
}
.p3t3{
	background: url(../img/p3_t3.png) no-repeat left;
}
.but{
	bottom: 150px;
	left: calc(50% + 180px);
}
.but > a{
	display: inline-block;
	width: 231px;
	height: 66px;
	transition: 0.3s;
}
a.but1{
	background: url(../img/but1.png) no-repeat center;
}
a.but2{
	background: url(../img/but2.png) no-repeat center;
}
.p4{
	background: url(../img/bg5.jpg) no-repeat center;
	background-size: cover;
}
.title3{
	background: url(../img/p4_title.png) no-repeat center;
	background-size: contain;
	width: 600px;
	height: 188px;
	left: calc(50% - 650px);
	top: 120px;
}
.title3a{
	background: url(../img/p4_title2.png) no-repeat center;
	background-size: contain;
	width: 396px;
	height: 139px;
	left: calc(50% + 210px);
	top: 250px;
}
.p4 .kicks{
	width: 690px;
	height: 322px;
	left: calc(50% - 5px);
	top: 470px;
}
.p4t{
	left: calc(50% - 640px);
	top: 360px;
}
.p4t > div{
	width: 420px;
	height: 46px;
	margin-bottom: 40px;
}
.p4t1{
	background: url(../img/p4_t1.png) no-repeat left;
}
.p4t2{
	background: url(../img/p4_t2.png) no-repeat left;
}
.p4t3{
	background: url(../img/p4_t3.png) no-repeat left;
}
.p4t4{
	background: url(../img/p4_t4.png) no-repeat left;
}
.p4 .but{
	left: calc(50% - 650px);
}
.footer{
	background: #1A1A1A;
	width: 100%;
	padding: 100px 0;
}
.w1200{
	width: 1200px;
	margin: 0 auto;
	color: #fff;
	font-weight: 300;
	line-height: 30px;
}
.f_logo{
	position: relative;
	width: 100%;
	height: 120px;
}
.f_logo1{
	background: url(../img/footer_logo1.png) no-repeat center;
	background-size: contain;
	width: 284px;
	height: 67px;
	left: 0;
}
.f_logo2{
	background: url(../img/footer_logo2.png) no-repeat center;
	background-size: contain;
	width: 331px;
	height: 69px;
	right: 0;
}
.w1200 > ul li{
	list-style: disc;
	margin: 0 0 6px 30px;
	text-align: justify;
}
.w1200 > ul li > ul li{
	list-style: decimal;
	margin: 0 0 6px 20px;
}
.social{
	width: 100%;
	margin: 100px auto 50px auto;
	text-align: center;
}
.social span,.social a{
	display: inline-block;
	vertical-align: middle;
}
.social span{
	width: 370px;
	height: 3px;
	background: #fff;
}
.social span:first-child{
	margin-right: 100px;
}
.social span:last-child{
	margin-left: 100px;
}
.social a{
	width: 50px;
	height: 50px;
	margin: 0 10px;
}
.social a.fb{
	background: url(../img/footer_fb.png) no-repeat center;
	background-size: contain;
}
.social a.ig{
	background: url(../img/footer_ig.png) no-repeat center;
	background-size: contain;
}
.social a.yt{
	background: url(../img/footer_yt.png) no-repeat center;
	background-size: contain;
}
.popup{
	background: rgba(0, 0, 0, 0.7);
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 100;
	display: none;
}
.popup > div{
	position: absolute;
	width: 1190px;
	height: 700px;
	left: calc(50% - 595px);
	top: calc(50% - 350px);
}
.op_pic{
	background: url(../img/p1_pop1.jpg) no-repeat center;
	background-size: contain;
	width: 1190px;
	height: 700px;
}
.op2 .op_pic{
	background: url(../img/p1_pop2.jpg) no-repeat center;
	background-size: contain;
}
.close_p{
	background: url(../img/pop_c.png) no-repeat center;
	width: 40px;
	height: 40px;
	top: 40px;
	right: 40px;
	z-index: 101;
	cursor: pointer;
	transition: 0.3s;
}
.close_p:hover{
	transform: rotate(180deg);
}
.opt1{
	top: 30px;
	left: 30px;
}
.opt2{
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	font-size: 28px;
	line-height: 45px;
	bottom: 0;
	width: 100%;
	height: 135px;
	font-weight: 300;
	letter-spacing: 2px;
}
.opt2 > div{
	display: inline-block;
	vertical-align: top;
}
.opt2t{
	width: calc(100% - 235px);
	padding: 20px 30px;
}