@charset "utf-8";

* {
	margin:0;
	padding:0;
}
*, *:before, *:after {
	box-sizing:border-box;
}
html, body {
	padding:0;
	margin:0;
	font-family:"微軟正黑體";
}

.Wrapper { width:100%; height:100vh; overflow:hidden; min-height:866px;
display:flex; flex-wrap:wrap;
/*垂直對齊狀態*/
align-items:center;
/*水平對齊狀態*/
justify-content:center;}

.Flower { width:100%; height:auto; overflow:hidden; max-width:1024px;}

.Flower small { display:block; width:100%; height:auto; overflow:hidden; float:left; text-align:center; padding:10px; font-size:12px; opacity:0.8;}
.Menu { width:1024px; height:840px; overflow:hidden; position:relative; margin:10px auto; background:url(../Images/Home/Default.jpg) center center no-repeat;
background-size:contain;}
.Menu .def-menu { position:absolute;}
.Menu .def-menu > a { position:absolute; width:100%; height:100%; top:0; left:0; text-indent:-9999px; z-index:3;}
.Menu .def-menu > a.spe { height:7%;}
.Menu .menu-02 > a.spe { top:61.5%; width:50%; left:25%;}
.Menu .menu-03 > a.spe { top:27.5%;}

.Menu .def-menu:before { content:''; display:block; position:absolute; width:100%; height:100%; top:0; left:0; z-index:0; opacity:0;opacity:1;
transition:all .5s;}
.Menu .menu-01:before { background:url(../Images/Home/Default_01.jpg) 0 0 no-repeat; background-size:contain;animation:menu-01_Ani 10s infinite linear;}
.Menu .menu-02:before { background:url(../Images/Home/Default_02.jpg) 0 0 no-repeat; background-size:contain;animation:menu-02_Ani 10s infinite linear;}
.Menu .menu-03:before { background:url(../Images/Home/Default_03.jpg) 0 0 no-repeat; background-size:contain;animation:menu-03_Ani 10s infinite linear;}
.Menu .menu-04:before { background:url(../Images/Home/Default_04.jpg) 0 0 no-repeat; background-size:contain;animation:menu-04_Ani 10s infinite linear;}
.Menu .menu-05:before { background:url(../Images/Home/Default_05.jpg) 0 0 no-repeat; background-size:contain;animation:menu-05_Ani 10s infinite linear;}
.Menu .menu-06:before { background:url(../Images/Home/Default_06.jpg) 0 0 no-repeat; background-size:contain;animation:menu-06_Ani 10s infinite linear;}
.Menu .menu-07:before { background:url(../Images/Home/Default_07.jpg) 0 0 no-repeat; background-size:contain;animation:menu-07_Ani 10s infinite linear;}
.Menu .menu-08:before { background:url(../Images/Home/Default_08.jpg) 0 0 no-repeat; background-size:contain;animation:menu-08_Ani 10s infinite linear;}

.Menu .def-menu:after { content:''; display:block; position:absolute; width:100%; height:100%; top:0; left:0; z-index:1; opacity:0;opacity:1;
transition:all .5s;}
.Menu .def-menu:hover:after { opacity:1;}

.Menu .menu-01:after { background:url(../Images/Home/Default_01.jpg) 0 0 no-repeat; background-size:contain;}
.Menu .menu-02:after { background:url(../Images/Home/Default_02.jpg) 0 0 no-repeat; background-size:contain;}
.Menu .menu-03:after { background:url(../Images/Home/Default_03.jpg) 0 0 no-repeat; background-size:contain;}
.Menu .menu-04:after { background:url(../Images/Home/Default_04.jpg) 0 0 no-repeat; background-size:contain;}
.Menu .menu-05:after { background:url(../Images/Home/Default_05.jpg) 0 0 no-repeat; background-size:contain;}
.Menu .menu-06:after { background:url(../Images/Home/Default_06.jpg) 0 0 no-repeat; background-size:contain;}
.Menu .menu-07:after { background:url(../Images/Home/Default_07.jpg) 0 0 no-repeat; background-size:contain;}
.Menu .menu-08:after { background:url(../Images/Home/Default_08.jpg) 0 0 no-repeat; background-size:contain;}

.Menu .menu-01 { width:calc( 423 / 1024 * 100% ); height:calc( 177 / 840 * 100% ); top:calc( 360 / 840 * 100% ); left:0;}
.Menu .menu-02 { width:calc( 423 / 1024 * 100% ); height:calc( 360 / 840 * 100% ); top:0; left:0;}
.Menu .menu-03 { width:calc( 178 / 1024 * 100% ); height:calc( 360 / 840 * 100% ); top:0; left:calc( 423 / 1024 * 100% );}
.Menu .menu-04 { width:calc( 423 / 1024 * 100% ); height:calc( 360 / 840 * 100% ); top:0; right:0;}
.Menu .menu-05 { width:calc( 423 / 1024 * 100% ); height:calc( 177 / 840 * 100% ); top:calc( 360 / 840 * 100% ); right:0;}
.Menu .menu-06 { width:calc( 423 / 1024 * 100% ); height:calc( 303 / 840 * 100% ); bottom:0; right:0;}
.Menu .menu-07 { width:calc( 178 / 1024 * 100% ); height:calc( 303 / 840 * 100% ); bottom:0; right:calc( 423 / 1024 * 100% );}
.Menu .menu-08 { width:calc( 423 / 1024 * 100% ); height:calc( 303 / 840 * 100% ); bottom:0; left:0;}

/*@keyframes menu-01_Ani{
0%{ opacity:0;}
10%{ opacity:1;}
80%{ opacity:1;}
90%{ opacity:0;}
100%{ opacity:0;}
}
@keyframes menu-02_Ani{
0%{ opacity:0;}
10%{ opacity:0;}
15%{ opacity:1;}
80%{ opacity:1;}
90%{ opacity:0;}
100%{ opacity:0;}
}
@keyframes menu-03_Ani{
0%{ opacity:0;}
15%{ opacity:0;}
20%{ opacity:1;}
80%{ opacity:1;}
90%{ opacity:0;}
100%{ opacity:0;}
}
@keyframes menu-04_Ani{
0%{ opacity:0;}
20%{ opacity:0;}
25%{ opacity:1;}
80%{ opacity:1;}
90%{ opacity:0;}
100%{ opacity:0;}
}
@keyframes menu-05_Ani{
0%{ opacity:0;}
25%{ opacity:0;}
30%{ opacity:1;}
80%{ opacity:1;}
90%{ opacity:0;}
100%{ opacity:0;}
}
@keyframes menu-06_Ani{
0%{ opacity:0;}
30%{ opacity:0;}
35%{ opacity:1;}
80%{ opacity:1;}
90%{ opacity:0;}
100%{ opacity:0;}
}
@keyframes menu-07_Ani{
0%{ opacity:0;}
35%{ opacity:0;}
40%{ opacity:1;}
80%{ opacity:1;}
90%{ opacity:0;}
100%{ opacity:0;}
}
@keyframes menu-08_Ani{
0%{ opacity:0;}
40%{ opacity:0;}
45%{ opacity:1;}
80%{ opacity:1;}
90%{ opacity:0;}
100%{ opacity:0;}
}*/

.DefLanguage {
	display:inline-block;
	width:auto;
	height:auto;
	overflow:hidden;
	text-align:center;
	position:absolute;
	top:0;
	right:10px;
	z-index:999;
}

.partner { position:absolute; right:calc( 50% - 512px ); bottom:calc( 100vh - 840px ); font-weight:bold; background:#fdb8bd; padding:10px; z-index:9;
/*圓角*/
-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}
.partner h3 { margin-bottom:10px; text-align:center; font-size:14px; color:#fff;}
.partner * { padding:0; margin:0; list-style:none; text-decoration:none; font-size:12px; line-height:1.5;}
.partner a{color:#999; display:inline-block; width:100%; height:auto; overflow:hidden; padding:5px; border:1px solid #fdb8bd; margin-bottom:2.5px; text-align:center; background:#fff;
/*基礎動畫設定*/
webkit-transition:all .5s, -webkit-transform .5s; transition:all .5s, transform .5s;
/*圓角*/
-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}
.partner a:hover,
.partner a:active { background:#fb8694; color:#fff;}

@media only screen and (min-width:0px) and (max-width:1024px) {
	
	.Wrapper { height:auto; min-height:100vh;}
	
	.Menu { width:100vw; height:82.03125vw;}
	.Menu .menu-01:before,
	.Menu .menu-02:before,
	.Menu .menu-03:before,
	.Menu .menu-04:before,
	.Menu .menu-05:before,
	.Menu .menu-06:before,
	.Menu .menu-07:before,
	.Menu .menu-08 { opacity:1; animation:none;}
	
	.DefLanguage { position:fixed; top:10px;}
	
	.partner { right:10px;}
	}

@media only screen and (min-width:0px) and (max-width:768px) {
.partner { width:320px; max-width:calc( 100% - 10px ); position:static; right:auto; bottom:auto; margin:0 auto;}
	}