/*選單區/////////////////////////////////////////////////////////////////////////////*/

header{width:100%; background-color:rgba(0,0,0,1);
	    background-image:url(../images/bg_headmenu.png); background-repeat: repeat-x; background-size:auto 100%; background-position:0 0 ;
        border:3px #ff0173; border-bottom-style:solid;    
		position:fixed; position:relative; left:0; top:0; z-index:99;
		}
header > div{width:100%; max-width:1420px; margin:0 auto;
			display:flex; display:-ms-flexbox;
			justify-content:flex-end; -ms-flex-pack:end;
			}
header.fixed{ background-color:rgba(0,0,0,0.7); position:fixed; }

/*logo*/	
.menu_flex01{width:5%; 	position:relative; z-index:99;}

.btn_logo{width:236px; height:auto; margin:-.45rem auto 0rem auto; 
			background:url(../images/btn_logo.png) no-repeat center top; background-size:100% auto;
			position:absolute; left:0; top:0;
			z-index:99;
			}
.btn_logo a{width:100%; height:auto; display:block; opacity:0.01;/*chrome*/-webkit-transition:opacity 0.5s; /*firefox*/-moz-transition:opacity 0.5s; transition:opacity 0.5s; }
.btn_logo a:hover{ background:url(../images/btn_logo_ov.png) no-repeat center top; background-size:100% auto; opacity:1; }
.btn_logo img{ visibility:hidden; }


.menu_flex02{width:95%;
			display:flex; display:-ms-flexbox;
			flex-direction:row; -ms-flex-direction: row;
			justify-content:flex-end; -ms-flex-pack:end;
			position:relative; z-index:98;
			}



/*-------在PC上隱藏選單--------*/
.btn_toggle{
	margin:.6rem .8rem .6rem 0;
	position:relative;
	display:none;
	z-index:100;
}
.btn_toggle a{
	display: block;
	background-repeat: no-repeat;
	background-image: url(../images/btn_toggle.png);
	background-size: 100% auto;
	background-position: right center;
}

.btn_toggle a:hover{ background-image: url(../images/btn_toggle_ov.png); }

.btn_toggle.close a{
	display: block;
	background-repeat: no-repeat;
	background-image: url(../images/btn_close.png);
	background-size: 100% auto;
	background-position: right center;
}

.btn_toggle.close a:hover{ background-image: url(../images/btn_close_ov.png);}
	
@media screen and (max-width:990px) {
		.btn_toggle {
			display: block;
		}
		
		/*jQuery點擊後動態在 body 加上 class */
		.menu_show .menu_flex02{
			display: block;
			animation:.6s fat;
			-webkit-animation:.6s fat;
        }
		/*20200610 點擊後跳回原顯示icon*/
		    .menu_show_icon .menu_flex021{
			display: block;
			background-repeat: no-repeat;
			background-image: url(../images/btn_toggle.png);
			background-size: 100% auto;
			background-position: right center;
			animation:.6s fat;
			-webkit-animation:.6s fat;
        }
}

@keyframes fat{
			0%{ 
				opacity:0; transform:translateX(50%); 
			}
			100%{
				opacity:1; transform:translateX(0%);
			} 
}

/*top_menu社群*/
ul.top_menu{ width:auto; overflow:hidden; }

ul.top_menu > li{ width:auto; background-repeat:no-repeat; background-size:auto; background-position: center center; float:left; position:relative;}
ul.top_menu > li:nth-of-type(1){ background-image:url(../images/btn_sec00.png); }
ul.top_menu > li:nth-of-type(2){ background-image:url(../images/btn_sec01.png); }
ul.top_menu > li:nth-of-type(3){ background-image:url(../images/btn_sec02.png); }
ul.top_menu > li:nth-of-type(4){ background-image:url(../images/btn_sec03.png); }
ul.top_menu > li:nth-of-type(5){ background-image:url(../images/btn_sec04.png); }
ul.top_menu > li:nth-of-type(6){ background-image:url(../images/btn_sec05.png); }
ul.top_menu > li:nth-of-type(7){ background-image:url(../images/btn_cash.png?=v20220209); }

ul.top_menu > li:nth-of-type(1) a,ul.top_menu > li:nth-of-type(1).current a{ background-image:url(../images/btn_sec00_ov.png); }
ul.top_menu > li:nth-of-type(2) a,ul.top_menu > li:nth-of-type(2).current a{ background-image:url(../images/btn_sec01_ov.png); }
ul.top_menu > li:nth-of-type(3) a,ul.top_menu > li:nth-of-type(3).current a{ background-image:url(../images/btn_sec02_ov.png); }
ul.top_menu > li:nth-of-type(4) a,ul.top_menu > li:nth-of-type(4).current a{ background-image:url(../images/btn_sec03_ov.png); }
ul.top_menu > li:nth-of-type(5) a,ul.top_menu > li:nth-of-type(5).current a{ background-image:url(../images/btn_sec04_ov.png); }
ul.top_menu > li:nth-of-type(6) a,ul.top_menu > li:nth-of-type(6).current a{ background-image:url(../images/btn_sec05_ov.png); }
ul.top_menu > li:nth-of-type(7) a,ul.top_menu > li:nth-of-type(7).current a{ background-image:url(../images/btn_cash_ov.png?=v20220209); }

ul.top_menu > li a{width:100%; height:auto; display:block; 
					background-repeat:no-repeat; background-size:auto;  
					background-position: center center;
					opacity:0.01;	transition:filter 0.5s,opacity 0.7s;
					}
ul.top_menu > li a:hover,ul.top_menu > li.current a{cursor:pointer; opacity:1;}


/*網點底*/	
ul.top_menu > li .bg_txt{width:100%; height:0%; opacity:0.01; transform-origin:center 0; transition:height 0.4s ,opacity 0.4s; 
	                     background-repeat:no-repeat; background-size:100% auto; background-position:center bottom; 
						 position:absolute; left:0; bottom:0; z-index:-1; 
						}
ul.top_menu > li:nth-of-type(1) .bg_txt{ background-image:url(../images/btn_sec00_bg.png);}
ul.top_menu > li:nth-of-type(2) .bg_txt{ background-image:url(../images/btn_sec01_bg.png);}
ul.top_menu > li:nth-of-type(3) .bg_txt{ background-image:url(../images/btn_sec02_bg.png);}
ul.top_menu > li:nth-of-type(4) .bg_txt{ background-image:url(../images/btn_sec03_bg.png);}
ul.top_menu > li:nth-of-type(5) .bg_txt{ background-image:url(../images/btn_sec04_bg.png);}
ul.top_menu > li:nth-of-type(6) .bg_txt{ background-image:url(../images/btn_sec05_bg.png);}
ul.top_menu > li:nth-of-type(7) .bg_txt{ background-image:url(../images/btn_cash_bg.png);}

ul.top_menu > li:hover .bg_txt,
ul.top_menu > li.current .bg_txt{width:100%; height:100%; opacity:1;}
ul.top_menu li img{ opacity: 0.01; }

@media screen and (max-width:1400px) {

     	.btn_logo{ width:250px; }

        /*top_menu*/
		ul.top_menu > li{ background-size:auto 100%; background-position:center center; }
		ul.top_menu li img{ width:auto; height:5.4rem; }


}


@media screen and (max-width:1330px) {

	.btn_logo{ width:245px; }

	/*top_menu*/

	

}

@media screen and (max-width:1147px) {

		.btn_logo{ width:215px; left:.1rem; }
		.menu_flex02{
			transform: scale(.94);
			transform-origin:top right;
			margin-bottom: -.55rem;

		}



	
}	


@media screen and (max-width:1063px) {


		.menu_flex02{
			transform: scale(.88);
			margin-bottom: -.64rem;
		}


}	


@media screen and (max-width:999px) {

		header{width:100%; display:block; background:none !important;
				border:none; border-bottom-style:none;
				}

		header > div{ display:block;}

		/*logo*/	
		.menu_flex01{width:100%; vertical-align:middle; overflow:visible;
			background-color:rgba(0,0,0,1);
			background-image:none; 
			border:3px #ff0173; border-bottom-style:solid;    
			display:flex; display:-ms-flexbox;
			justify-content:flex-end; -ms-flex-pack:end;
			}


		.btn_logo{ width:22.5%; max-width:491px; margin:0; top:-.3rem; }	 

		.btn_toggle{ width:auto; margin:.4rem .8rem .4rem 0; display:block; float:none;}

		.btn_toggle img{ width:auto; height:3.3rem;}

		.menu_flex02{width:15%; height:auto; margin-top:1rem; margin-bottom:0; position:absolute; right:0; top:3.3rem;
			        transform: scale(1);			       
					display:none;
					}

		.menu_flex02::after{	
			content:" ";
			width:100%;
			height:100vh;
			margin:0;
			padding:0;
			background-color:rgba(0,0,0,0.8);
			position:absolute;
			top:0;
			right:0;
			display:block;	
			z-index:-2;
			}
	

		/*網點底*/	
		ul.top_menu > li .bg_txt{width:0%; height:100%; transform-origin:right 0; transition:width 0.7s ,opacity 0.7s; 
								background-size:auto 100%; background-position:right bottom;
								left:auto; right:0;
								}
		ul.top_menu > li:nth-of-type(1) .bg_txt{ background-image:url(../images/btn_sec00_bg_s.png);}
		ul.top_menu > li:nth-of-type(2) .bg_txt{ background-image:url(../images/btn_sec01_bg_s.png);}
		ul.top_menu > li:nth-of-type(3) .bg_txt{ background-image:url(../images/btn_sec02_bg_s.png);}
		ul.top_menu > li:nth-of-type(4) .bg_txt{ background-image:url(../images/btn_sec03_bg_s.png);}
		ul.top_menu > li:nth-of-type(5) .bg_txt{ background-image:url(../images/btn_sec04_bg_s.png);}
		ul.top_menu > li:nth-of-type(6) .bg_txt{ background-image:url(../images/btn_sec05_bg_s.png);}
		ul.top_menu > li:nth-of-type(7) .bg_txt{ background-image:url(../images/btn_cash_bg_s.png);}


		ul.top_menu{ width:100%; display:block;}

		ul.top_menu > li{ width:100%; max-width:400px; padding:0;   background-size:100% auto; float:none; }
		ul.top_menu li a{ margin-top:0;}

		ul.top_menu > li:nth-of-type(2){ width:100%;}
		ul.top_menu > li:nth-of-type(4){ width:100%; }

		ul.top_menu > li:nth-of-type(1){ background-image:url(../images/btn_sec00_s.png); }
		ul.top_menu > li:nth-of-type(2){ background-image:url(../images/btn_sec01_s.png); }
		ul.top_menu > li:nth-of-type(3){ background-image:url(../images/btn_sec02_s.png); }
		ul.top_menu > li:nth-of-type(4){ background-image:url(../images/btn_sec03_s.png); }
		ul.top_menu > li:nth-of-type(5){ background-image:url(../images/btn_sec04_s.png); }
		ul.top_menu > li:nth-of-type(6){ background-image:url(../images/btn_sec05_s.png); }
		ul.top_menu > li:nth-of-type(7){ background-image:url(../images/btn_cash_s.png?=v20220209); }

		ul.top_menu > li:nth-of-type(1) a,ul.top_menu > li:nth-of-type(1).current a{ background-image:url(../images/btn_sec00_s_ov.png); }
		ul.top_menu > li:nth-of-type(2) a,ul.top_menu > li:nth-of-type(2).current a{ background-image:url(../images/btn_sec01_s_ov.png); }
		ul.top_menu > li:nth-of-type(3) a,ul.top_menu > li:nth-of-type(3).current a{ background-image:url(../images/btn_sec02_s_ov.png); }
		ul.top_menu > li:nth-of-type(4) a,ul.top_menu > li:nth-of-type(4).current a{ background-image:url(../images/btn_sec03_s_ov.png); }
		ul.top_menu > li:nth-of-type(5) a,ul.top_menu > li:nth-of-type(5).current a{ background-image:url(../images/btn_sec04_s_ov.png); }
		ul.top_menu > li:nth-of-type(6) a,ul.top_menu > li:nth-of-type(6).current a{ background-image:url(../images/btn_sec05_s_ov.png); }
		ul.top_menu > li:nth-of-type(7) a,ul.top_menu > li:nth-of-type(7).current a{ background-image:url(../images/btn_cash_s_ov.png?=v20220209); }
		ul.top_menu > li a{background-size:100% auto;}

		ul.top_menu li{
			transform: translateX(100%);
			-webkit-transform: translateX(100%);
			-moz-transform: translateX(100%);
			-ms-transform: translateX(100%);
			-o-transform: translateX(100%);
		}

		.menu_show .menu_flex02{ display: block;}
		
		.menu_show ul.top_menu li{ animation:.6s fat; -webkit-animation:.6s fat; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; }

		.menu_show ul.top_menu > li:nth-of-type(1){ animation-delay:0s;}
		.menu_show ul.top_menu > li:nth-of-type(2){ animation-delay:0.2s;}
		.menu_show ul.top_menu > li:nth-of-type(3){ animation-delay:0.4s;}
		.menu_show ul.top_menu > li:nth-of-type(4){ animation-delay:0.6s;}
		.menu_show ul.top_menu > li:nth-of-type(5){ animation-delay:0.8s;}
		.menu_show ul.top_menu > li:nth-of-type(6){ animation-delay:1s;}
		.menu_show ul.top_menu > li:nth-of-type(7){ animation-delay:1.2s;}
		.menu_show ul.top_menu > li:nth-of-type(8){ animation-delay:1.4s;}
			
		ul.top_menu img.l{ display:none; }
		ul.top_menu img.s{ display:block; }

}

@media screen and (max-width:990px) {


			.btn_toggle img{ height:3.3rem;}

			.menu_flex02{width:25%; top:3.3rem;}

}


@media screen and (max-width:900px) {
	
			.btn_logo{ width:28.2%;}
			.menu_flex02{ width:32vw;}

}


@media screen and (max-width:800px) {

			.btn_logo{ width:32%;}

}



@media screen and (max-width:700px) {

		.btn_toggle{ margin:.3rem .5rem .3rem 0; }

		.menu_flex02{ width:33vw; top:3.16rem;}

}


@media screen and (max-width:550px) {

		.btn_toggle img{
			height: 3rem;
		}

		.menu_flex02{ top:2.80rem; }

}


@media screen and (max-width:500px) {

		.menu_flex02{ width:40vw; }
		ul.top_menu li img{ height:4.8rem;}

		.btn_toggle{ margin:.3rem .5rem .3rem 0; }

	
}



@media screen and (max-width:450px) {

		.btn_toggle img{
			height:2.65rem;
		}

		.menu_flex02{ top:2.47rem; }

}