@charset "utf-8";
/* CSS Document */
.incon{
	position: relative;
	width: 100%;
	margin:0 auto;
	animation: st 1s;
	/**/
	font-size:1.5rem;/*18*/
  	line-height:2.5rem;/*30*/
  	font-weight:400;
  	color:#504c48;/*2c2722*/
	z-index: 1;
	}
.dbx1{
	position:relative;
	display: block;
	padding: .8rem 0 1.5rem;
	}
.dbx1a{
	position:relative;
	display: block;
	padding: 2.2rem 0 2rem;
	font-weight: 500;
	}

.dbx2{
	position:relative;
	display:block;
	padding: 0 0 1rem;
	}
.f1{
	position:relative;
	display:inline-block;
	font-size:2rem;/*24*/
  	line-height:3rem;/*36*/
  	font-weight:500;
  	color:#2c2722;
	padding: 0 0 .3rem;
	}
.f1.ck{padding: 0 0 .3rem 3.5rem;}
.mt{position:relative;top:-.4rem;}
.ck:before{
	position:absolute;
	width:3rem;/**/
	padding-bottom: 3rem;
	/*content:'\1F4B0';*/
	content:'';
	display: inline-block;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image: url(../images/rb.png);
	background-size:100% auto;
	overflow:hidden;
	top:-.2rem;
	left: 0;
	/*
	-webkit-filter: drop-shadow(2px 3px 3px rgba(29, 6, 2, .25));
 	 filter: drop-shadow(2px 3px 3px rgba(29, 6, 2, .25));*/
	}
.db1{
	position:relative;
	display:inline-block;
	}
ul.ft1,ul.ft2 {
  	position: relative;
  	padding: .3rem 0 1rem 2rem;/*24*/
	}	
ul.ft1 li {
  	position:relative;
  	list-style-type: decimal;
	}
ul.ft2 li {
  	position:relative;
  	list-style-type: disc;
	}
.red{color:#ff2256;}/*#d42629*/
.red2{color:#ff3a68;/*#ff1944*/}
.org{color:#e65c08;}
.bck{color:#2c2722;}
.gre{color:#26856e;}
.fw{font-weight:500;}
.ibk{display:inline-block;}
.tf,.tbx1 table td.tf{text-align:left;}
.warning{
	position:relative;
	display: block;
	text-align:center;
	color:#f72959;/* #EC3437*/
	font-weight:500;
	padding:2.2rem 0 0 0;
	top:.5rem;
	}

.tbx1,.tbx2{position:relative;}
.tbx1 table,.tbx2 table{
	position:relative;
	width:100%;
	border-spacing:1px;
	margin:.5rem auto 1.25rem;
	}
.tbx1 table td,.tbx2 table td{
	word-break:break-all;
	padding:.5rem .5rem;
	text-align:center;
	}
.tbx1 table tr:nth-child(odd) td,.tbx2 table tr:nth-child(odd) td{
	background-color:rgba(216,208, 190, 0.5);
	}
.tbx1 table tr:nth-child(even) td,.tbx2 table tr:nth-child(even) td{
	background-color:rgba(223, 210, 190, 0.25);
	}
.tbx1 table tr:first-child td,.tbx1 table tr th{
	padding:.8rem .5rem;
	background-color:rgba(95,106,57,.8);
	text-align:center;
	font-weight:500;
	color:#f1e9de;
	}
/*1*/
.tbx1.tb1 tr td:nth-child(1){width:30%;}
.tbx1.tb1 tr td:nth-child(2){width:70%;}
/*2*/
.tbx1.tb2 tr td:nth-child(1){width:23%;}
.tbx1.tb2 tr td:nth-child(2){width:24%;}
.tbx1.tb2 tr td:nth-child(3){width:13%;}
.tbx1.tb2 tr td:nth-child(4){width:11%;}
.tbx1.tb2 tr td:nth-child(5){width:9%;}
.tbx1.tb2 tr td:nth-child(6){width:9%;}
.tbx1.tb2 tr td:nth-child(7){width:11%;}
/*3*/
/*.tbx1.tb3 tr:nth-child(odd) td:nth-child(1){width:20%; background-color:rgba(215,180,100,.6);}
.tbx1.tb3 tr:nth-child(even) td:nth-child(1){width:20%; background-color:rgba(215,180,100,.4);}*/

.tbx1.tb3 tr td:nth-child(1){width:25%;}
.tbx1.tb3 tr td:nth-child(2){width:25%;}
.tbx1.tb3 tr td:nth-child(3){width:25%;}
.tbx1.tb3 tr td:nth-child(4){width:25%;}
/*4*/
.tbx1.tb4 tr td:nth-child(1){width:26%;}
.tbx1.tb4 tr td:nth-child(2){width:17%;}
.tbx1.tb4 tr td:nth-child(3){width:17%;}
.tbx1.tb4 tr td:nth-child(4){width:40%;text-align:left;}
/**/
.tc{position:relative;
	display:block;
	text-align:center;
	}
.tc2{position:relative;
	display:block;
	text-align:center;
	}
.ph1,.ph2{
	position:relative;
	display:inline-block;
	margin:2rem auto;
	}
.ph2::before{
	position:absolute;
	width:100%;
	height:100%;
	display:block;
	content:"";
	top: 0;
	left: 0;
	background-attachment:scroll;
	background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat-x,repeat-y,repeat-x,repeat-y;
	background-position:0% 0%,100% 0%,100% 100%,0% 100%,50% 0%,100% 50%,50% 100%,0% 50%;
	background-image:url(../images/phb1.png),url(../images/phb2.png),url(../images/phb3.png),url(../images/phb4.png),url(../images/phb2a.png),url(../images/phb1a.png),url(../images/phb2a.png),url(../images/phb1a.png);
	z-index: 1;
	}
.ph1 img,.ph2 img{
	position:relative;
	display:block;
	max-width:100%;
	}
.ph2 p{
	position:absolute;
	width: 100%;
	height: 100%;
	display:block;
	pointer-events: none;
	top: 0;
	left: 0;
	z-index: 1;
	}
.ph2 p::before,.ph2 p::after{
	position:absolute;
	display: block;
	content:"";
	background-attachment:scroll;
	background-repeat: no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	}
.ph2 p::before{
	width:239px;/*239*/
	padding-bottom:111px;/*111*/
	top:-22px;
	left:-22px;
	background-image: url(../images/flt.png);
	}
.ph2 p::after{
	width:350px;
	padding-bottom:84px;
	right: -12px;
	bottom: -22px;
	background-image: url(../images/frd.png);
	}
/**/
.shp{
	position: relative;
	width:800px;/*610*/
	margin:.5rem auto 1.8rem;
	}
.ph2a{
	position: relative;
	width:100%;
	padding-bottom: 7.875%;
	margin:.85rem auto 0;
	background-attachment:scroll;
	background-repeat: no-repeat;
	background-image: url(../images/sh_01a.png);
	background-position:50% 100%;
	background-size:100% auto;
	}
.ph2a div{
	position: absolute;
	width: 100%;
	height:73%;
	text-align: center;
	bottom:9%;
	left: 0;
	font-size:2.5rem;
	line-height:73%;
	color:#ff3a68;/*#dc0053*/
	font-weight:700;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.ph2a div > span{
	position:relative;
	margin-top:.6%;
	}
.ph2a img{ width:100%;display:block;}
.ph2bx{
	position: relative;
	width: 100%;
	min-height:150px;
	margin:0 auto;
	background-attachment: scroll;
	background-repeat:no-repeat,repeat-y;
	background-image: url(../images/sh_02a.jpg),url(../images/sh_03a.jpg);
	background-position:50% 0%,50% 100%;
	background-size:100% auto,100% auto;
	padding:0;/*.5rem 0 0*/
	}
.shp::after {
  position: relative;
  width: 100%;
  padding-bottom: 4.375%;
  content: '';
  display: block;
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-image: url(../images/sh_04a.png);
  background-position: 50% 0%;
  background-size: 100% auto;
	}
.ph2bx .spt{
	position:relative;
	width:100%;
	ackground-attachment: scroll;
	background-repeat:repeat-y;
	background-image:url(../images/sh_tima.jpg);
	background-position:50% 50%;
	background-size:100% auto;
	padding:.4rem 0 .3rem;
	margin-bottom:1.5rem;/*.8*/
	}
.ph2bx .spt > div{
	position:relative;
	width:96%;
	margin:0 auto;
	font-size:1.5rem;
	color: #f7ecd6;
	text-align:center;
	}
.ph2bx ul{position:relative; width:95%; margin:0 auto;}
.ph2bx ul li{
	position:relative;
	width: 100%;
	padding:.5rem 0 .8rem;
	border-bottom:1px dotted #614d39;
	overflow:hidden;
	clear:both;
	
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	}
.ph2bx ul li:last-child{border-bottom:0px dotted #614d39;}
.ph2bx ul li div:nth-child(1){ text-align:center;}
.ph2bx ul li div img{ width:auto; display:block; margin:0 auto;}
.ph2bx ul li div{
	float:left;
	position: relative;
	width: 50%;
	margin: 2px 0;
	display:block;
	font-size: 1.25rem;
	color: #f7ecd6;
	font-weight:300;
	}
.ph2bx .b3x{
	position: relative;
	width:93%;
	margin:0 auto;
	text-align:center;
	padding:.8rem 0 0;
	} 
.ph2bx .b3x div{
	position: relative;
	width: 25%;/*33%*/
	display:inline-block;
	text-align:center;
	margin:.2rem -2px;
	}
.ph2bx .b3x div img{
	display: block;
	margin: 0 auto;
	border: 4px double #557899;
	border-radius:5px;
	}
.s1 {
  position: relative;
  width: 100%;
  height:15px;
  background-attachment: scroll;
  background-repeat: repeat-x;
  background-position: 50% 50%;
  background-image: url(../images/s1.png);
  margin:1.5rem auto ;
}
.s1a {
  position: relative;
  width: 92%;
  height:15px;
  background-attachment: scroll;
  background-repeat: repeat-x;
  background-position: 50% 50%;
  background-image: url(../images/s1.png);
  margin:1.5rem auto ;
  opacity: .65;
}

.smubx{
	position: relative;
	width:93%;/*1400 93%*/
	display:none;
	text-align: center;
	margin:0 auto;
	padding:.5rem 0 0;
	}
.smubx.on{display:block;}

.smubx::after,.smubx2::after{
	position: relative;
  	width:100%;/*95%*/
  	height:23px;
	display:block;
	content: '';
  	background-attachment: scroll;
  	background-repeat: no-repeat,repeat-x;
  	background-position: 50% 50%,50% 50%;
  	background-image: url(../images/sa.png),url(../images/s1.png);
  	margin:1rem auto;
	}
.smubx a{
	position:relative;
	width:176px;/*176*/
	display:inline-block;
  	background-attachment: scroll;
  	background-repeat:no-repeat;
  	background-position: 50% 50%;
	background-size: 100% auto;
	margin:.8% .5%;
	}

.smubx a::before{
	position:relative;
	width:100%;/*176*/
	padding-bottom:45.45454545454545%;/*80*/
	display:block;
	content: '';
  	background-attachment: scroll;
  	background-repeat:no-repeat;
  	background-position: 50% 50%;
	background-size: 100% auto;
	opacity: 0;
	transition: all .5s;
	}
.smubx2{
	position: relative;
	width:100%;/*1400 93%*/
	display:block;
	text-align: center;
	margin:0 auto;
	padding:1.5rem 0 0;
	}
.smubx2 p{
	position:relative;
	width:220px;/*220 17.2549%*/
	display:inline-block;
	cursor: pointer;
  	background-attachment: scroll;
  	background-repeat:no-repeat;
  	background-position: 50% 50%;
	background-size: 100% auto;
	margin:.8% 1%;
	}
.smubx2 p::before{
	position:relative;
	width:100%;/*220*/
	padding-bottom:36.36%;/*80*/
	display:block;
	content: '';
  	background-attachment: scroll;
  	background-repeat:no-repeat;
  	background-position: 50% 50%;
	background-size: 100% auto;
	opacity: 0;
	transition: all .5s;
	}

.smubx a:hover::before,.smubx a.on::before,.smubx2 p:hover::before{opacity:1;}
.bt_1{background-image: url(../images/bt_1.png);}
.bt_1::before{background-image: url(../images/bt_1a.png);}
.bt_2{background-image: url(../images/bt_2.png);}
.bt_2::before{background-image: url(../images/bt_2a.png);}
.bt_3{background-image: url(../images/bt_3.png);}
.bt_3::before{background-image: url(../images/bt_3a.png);}
.bt_4{background-image: url(../images/bt_4.png);}
.bt_4::before{background-image: url(../images/bt_4a.png);}
.bt_5{background-image: url(../images/bt_5.png);}
.bt_5::before{background-image: url(../images/bt_5a.png);}
.bt_6{background-image: url(../images/bt_6.png);}
.bt_6::before{background-image: url(../images/bt_6a.png);}
.bt_7{background-image: url(../images/bt_7.png);}
.bt_7::before{background-image: url(../images/bt_7a.png);}
.stit{
	position: relative;
	width:474px;/*474 /1275 25%*/
	display: block;
	margin:0 auto;
  	background-attachment: scroll;
  	background-repeat:no-repeat;
  	background-position: 50% 50%;
	background-size: 100% auto;
	}
.stit::before{
	position:relative;
	width:100%;/*474*/
	padding-bottom:37.9746835443038%;/*180*/
	display:block;
	content: '';
	}
.stit_1{background-image: url(../images/stit_1.png);}
.stit_2{background-image: url(../images/stit_2.png);}
.stit_3{background-image: url(../images/stit_3.png);}
.stit_4{background-image: url(../images/stit_4.png);}
.stit_5{background-image: url(../images/stit_5.png);}
.stit_6{background-image: url(../images/stit_6.png);}
.stit_7{background-image: url(../images/stit_7.png);}
/**/
.petalbx{
	position:fixed;/*fixed*/
	width:100%;
	height:100vh;
	overflow:hidden;
	top: 0;
	left: 0;
	pointer-events: none;
	filter:blur(1px);
	z-index:6;
	}	
.petalbx p{
  position:absolute;
  width:1.05vw;/*25 1.25*/
  height:1.55vw;/*35 1.75*/
  top: -10vh; /*螢幕頂部上方開始 */
  background-color:#ffada9; /* 花瓣顏色 */
  border-radius: 150% 0 150% 0;/*模擬花瓣形狀 */
  animation: fall 5s linear infinite; /* 應用下落動畫 */
  opacity:0.8;
}
.petalbx p:nth-child(1) {
  border-radius: 100% 0 100% 0;
  animation: fall 10.5s linear infinite; 
  opacity:0.8;	
 /* filter:blur(3px);*/
  animation-delay:0s;
	}		
.petalbx p:nth-child(2) {
  animation: fall2 6s linear infinite; 
  animation-delay: 1s;
  opacity:0.8;
	}	
.petalbx p:nth-child(3) {
  animation: fall3 6s linear infinite; 
  animation-delay: 5s; 
  opacity:0.5;
	}	
.petalbx p:nth-child(4) {
  animation: fall4 10s linear infinite; 
  animation-delay: 1.5s;
  opacity:0.65;
	}	
.petalbx p:nth-child(5) {
  animation:fall5 8s linear infinite; 
  opacity:0.5;
  animation-delay:.8s;
	}



@media only screen and (max-width:1600px){
	/**/
.ph2bx .b3x div img{width:95%;}
	}
@media only screen and (max-width:1400px){
/**/
.incon{
	font-size:1.333rem;/*16*/
  	line-height:2.333rem;/*28*/
	}
/**/
.ph2a div{
	font-size:2rem;
	font-weight:700;
	}
.ph2bx .spt > div{font-size:1.35rem;line-height: 1.6rem;}
.ph2bx ul li div img{ width:80%;/*96*/}
	
		
}
@media only screen and (max-width:1250px){	
/**/
/*.shp{width:650px;}*/
.ph2a{
	padding-bottom:10.32%;
	background-image: url(../images/sh_01.png);
	}
.ph2bx{background-image: url(../images/sh_02.jpg),url(../images/sh_03.jpg);}
.shp::after {
    padding-bottom: 5.7%;
    background-image: url(../images/sh_04.png);
  }
/**/
/*.stit{width:30%;}*/
	
	
}
@media only screen and (max-width:1000px){
/**/

.ph2a div{font-size:1.8rem;}
	
}
@media only screen and (max-width:950px){
/**/
.shp{width:100%;}
.smubx2 p{
	width:31%;/*220 17.2549%*/
	margin:.8% .5%;
	}
.smubx a{width:20.7vw;/*176*/}
}
@media only screen and (max-width:800px){
/**/
.ph2bx .b3x div{width: 33%;/*33%*/}
	
}
/**/
@media only screen and (max-width:780px){
/**/
.incon{
	font-size:1.25rem;/*15*/
  	line-height:2rem;/*26*/
	}
.f1{
	font-size:1.666rem;/*20*/
  	line-height:2.666rem;/*32*/
	}
.f1.ck{padding: 0 0 .3rem 3.166rem;}
.mt{top:-.3rem;}
.ck:before{
	width:2.666rem;/**/
	padding-bottom:2.666rem;
	top:-.23rem;
	}
	
.dbx1a{font-weight:400;}
	
.db1{ padding:0 0 0 .35rem;}

.tc2{text-align:left;}
/**/
.tbx1 table,.tbx2 table{width:95%;}	
.ph2{max-width: 95%;}	
/**/
.ph2a div{font-size:2.2rem;}
.ph2bx .spt > div {
    font-size: 1.25rem;
    line-height: 1.6rem;
  }
.ph2a div > span{margin-top:0.8%;}
/**/
.smubx,.smubx2{width:90%;}

/*
.stit{width:320px;}	*/
.petalbx {z-index: 4;}	
.petalbx p{
  	width:2.2vw;/*25*/
  	height:3.487vw;/*35*/
	}
		
}
@media only screen and (max-width:650px){ 
/**/
.shp{width:100%;}
.ph2bx ul li{display:block;}
.ph2bx ul li div{
	float: none;
	width: 95%;
	margin:.5rem auto;
	padding:.15rem 0;
	font-size: 1.1rem;/*1.2*/
	line-height:1.65rem;
	}
.ph2bx ul li div img{width:auto;}
	
}
@media only screen and (max-width:600px){
/**/
.ph1,.ph2{margin:1.5rem auto;}
.ph2 p::before{
	width:39.83vw;/*239*/
	padding-bottom:18.5vw;/*111*/
	top:-3.6vw;/*22*/
	left:-3.6vw;
	}
.ph2 p::after{
	width:58.3vw;/*350*/
	padding-bottom:14vw;/*84*/
	right: -2vw;/*12*/
	bottom: -3.6vw;
	}		
}
@media only screen and (max-width:560px){
/**/
.ph2bx .b3x div{width: 46.5%;/*33%*/}
.ph2bx .b3x div.ov1{ display:none;}	
.shp{width:98%;}
/**/
.stit{width:78vw;/*474*/}	
	
.smubx2 p{
	width:47%;/*220 17.2549%*/
	margin:.8% 1%;
	}
.smubx a{width:176px;/*176*/margin:.5% 2.5%;}
	
}
@media only screen and (max-width:470px){
/**/
.incon{
	font-size:1.2rem;/*15*/
  	line-height:2rem;/*26*/
	}
.f1{
	font-size:1.5rem;/*18*/
  	line-height:2.5rem;/*30*/
	}
.f1.ck{padding: 0 0 .3rem 2.6rem;}
.ck:before{
	width:2.2rem;/**/
	padding-bottom:2.2rem;
	top:-.18rem;
	}
	/**/
	-webkit-filter: drop-shadow(1px 2px 2px rgba(29, 6, 2, .25));
 	 filter: drop-shadow(1px 2px 2px rgba(29, 6, 2, .25));
	
.tbx1 table td,.tbx2 table td{
	font-size:1.15rem;
  	line-height:1.6rem;
	}
.tbx1 table tr:first-child td,.tbx1 table tr th{
	font-size:1.2rem;/*15*/
  	line-height:2rem;/*26*/
	}
/**/
.ph2a {
    padding-bottom: 13.114754%;
    background-image: url(../images/sh_01b.png);
  }
.ph2a div{
	font-size:1.6rem;
	bottom: 8.3%;
	}
/**/
.smubx{width:100%;}
.smubx2{width:100%;/*92*/}
.smubx a{
	width:40vw;/*176*/
	margin:.5% 1.5%;
	}	
.smubx::after{width:90%;}
}
@media only screen and (max-width:380px){
/**/
 .ph2a div {
    font-size: 1.5rem;
  }
	
}
@media only screen and (max-width:360px){
/**/
}
@media only screen and (max-width:340px){
/**/
}


@keyframes fall {
  0% {transform: translate(90vw,0) rotate(0deg) rotateX(0deg);  }
  25% {transform: translate(80vw,25vh) rotate(90deg) rotateX(180deg);}
  50% {transform: translate(70vw,50vh) rotate(180deg) rotateY(180deg);}
  75% {transform: translate(60vw,75vh) rotate(270deg) rotateX(360deg); }
  100% {transform: translate(50vw,110vh) rotate(360deg) rotateY(360deg);}
}
@keyframes fall2 {
  0% {transform: translate(80vw,0) rotate(0deg) rotateX(0deg);  }
  25% {transform: translate(70vw,25vh) rotate(90deg) rotateX(180deg);}
  50% {transform: translate(60vw,50vh) rotate(180deg) rotateY(180deg);}
  75% {transform: translate(50vw,75vh) rotate(270deg) rotateX(360deg); }
  100% {transform: translate(40vw,110vh) rotate(360deg) rotateY(360deg);}
	}
@keyframes fall3 {
  0% {transform: translate(70vw,0) rotate(0deg) rotateX(0deg);  }
  25% {transform: translate(60vw,25vh) rotate(90deg) rotateX(180deg);}
  50% {transform: translate(50vw,50vh) rotate(180deg) rotateY(180deg);}
  75% {transform: translate(40vw,75vh) rotate(270deg) rotateX(360deg); }
  100% {transform: translate(30vw,110vh) rotate(360deg) rotateY(360deg);}
	}
@keyframes fall4 {
  0% {transform: translate(90vw,0) rotate(0deg) rotateX(0deg);  }
  25% {transform: translate(60vw,25vh) rotate(90deg) rotateX(180deg);}
  50% {transform: translate(40vw,50vh) rotate(180deg) rotateY(180deg);}
  75% {transform: translate(20vw,75vh) rotate(270deg) rotateX(360deg); }
  100% {transform: translate(0vw,110vh) rotate(360deg) rotateY(360deg);}
	}
@keyframes fall5 {
  0% {transform: translate(60vw,0) rotate(0deg) rotateX(0deg);  }
  25% {transform: translate(50vw,25vh) rotate(90deg) rotateX(180deg);}
  50% {transform: translate(40vw,50vh) rotate(180deg) rotateY(180deg);}
  75% {transform: translate(30vw,75vh) rotate(270deg) rotateX(360deg); }
  100% {transform: translate(20vw,110vh) rotate(360deg) rotateY(360deg);}
	}