@charset "UTF-8";
/* CSS Document */


body, html {
    height: 100%;
    font-family: Microsoft JhengHei, 微軟正黑體, Gill Sans, Gill Sans MT, "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif",'儷黑 Pro', LiHei Pro,"Apple LiGothic Medium", "Noto Sans", "NotoSansCJKtc ";
    font-size: 14px;

   
}

body a:hover { text-decoration: none; }

.Wrap { margin: 0 auto; padding-top: constant(safe-area-inset-top);
    padding-right: constant(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-left: constant(safe-area-inset-left); }


.TopBar { position: fixed; top:0; width: 100%; min-height: 70px; font-weight:900 ; padding: 0; z-index: 1001; background-color: #fff; }
	.MainMenu li a { color: #003385; transition: all .55s; }
	.MainMenu li:nth-child(5) { border-right: none; } 

	.btn-fb ,.btn-line{ display: inline-block; max-width:40px; font-size: 3.5rem;  }
	.btn-fb { margin-right: 15px; color: #4267b2; }
	.btn-fb:hover { color: #375797; }
	/*.btn-fb img{ max-width:42px; }*/
	.btn-line { margin-right: 42px; color: #39b14a; }
	.btn-line:hover { color: #329a41; }
	/*btn-line img{ max-width:42px;  display: inline-block; }*/




.navbar-expand-md { justify-content: space-between; }

.navbar-collapse {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 0;
}
.container { max-width: 1920px; padding-top: constant(safe-area-inset-top);
    padding-right: constant(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-left: constant(safe-area-inset-left); }
.container img { width: 100%; }
	.row { margin: 0;}
	.content { position: relative; }



.Box-1 .container{ width: 100%; min-height:670px; position: relative; background-color: #fff; /*background: url(../images/contain_01.jpg) center top no-repeat;*/ }
	
	.btn-join {  position: fixed; right: 4%; bottom:50px; z-index: 999; width: 138px; height: 140px; background: url(../images/btn_join_2.png) center center no-repeat;  }
	.btn-join a { width: 100%; max-width: 138px; height: 100%; max-height: 140px; display: block; margin: 0 auto; padding: 0; /*background: url(../images/btn_join.png) center top no-repeat; */}
	.btn-join a img { width: 100%; max-width: 138px; height: 100%; max-height: 140px; }



	.btn-join a{
    -webkit-animation: twinkling .9s infinite ease-in-out
	}
	.animated{
	    -webkit-animation-duration: 1s;
	    animation-duration: .3s;
	    -webkit-animation-fill-mode: both;
	    animation-fill-mode: both;
	    animation-timing-function: steps(2); 
	}
	@-webkit-keyframes twinkling{
	    0%{
	        opacity: 0.0;
	    }
	    100%{
	        opacity: 1;
	        background: url(../images/btn_join_2.png) center center no-repeat;
	    }

	}
	@keyframes twinkling{
	    0%{
	        opacity: 0.0;
	    }
	    100%{
	        opacity: 1;
	        background: url(../images/btn_join.png) center center no-repeat;/* background-position: 1px top;*/
	    }
	}

	


	.btn-gifts { position: absolute; /*right: 33%; bottom: 50px; margin-top: 572px; margin-right: -380px; */ }
	.btn-gifts a { width: 109px; height: 52px; display: block; margin: 0 auto; background: url(../images/btn_gifts.png) center top no-repeat; }

	.depiction-1 { font-weight: bold; line-height: 2.4rem; margin-top:10px; color: #333;  }
	.trump { width: 50%; text-align: center; }
	

.Box-2 .container{ padding: 20px 0; width: 100%; min-height:670px;  /*background: url(../images/contain_02.jpg) center top no-repeat;*/ }
	
	.Box-2 .depiction-1 { font-weight: bold; line-height: 2.4rem; margin-top:10px; color: #333; }
	.btn-detail a{  max-width: 484px; height: 44px; display: block; background: url(../images/btn_detail.png) center center no-repeat #39b14a; border-radius: 5px; margin: 0 auto;  }
	.detailPage { width: 1126px; padding: 0px 60px ; }
	.B2-subject { width: auto; height: auto; max-height: 64px; margin-bottom: 40px; }


.Box-3 .container{ min-height:500px;  background: url(../images/contain_03_bg.jpg) center top no-repeat; background-size:cover; }
	
	.Box-3 .title { width: 100%; height: 93px; max-width: 529px; margin: 0 auto; margin-top: 85px; margin-bottom: 40px; background: url(../images/title_03.png) center top no-repeat; background-size:100%; }


	.B3_items { min-width: 250px; height:60px; margin: 0 auto; vertical-align:middle; background: url(../images/contain_03_items_bg.png) left center no-repeat; }
	.B3_items .number { width: 30px; height: 30px; text-align: center; margin: 7px 0 0 10px; font-size:1.714rem; display: inline-block; vertical-align:middle;  color:#008e45; }
	.B3_items .subject{ margin: 12px 0 0 20px; font-size: 1.429rem; font-weight: bold; display: inline-block; vertical-align:middle; color:#006837; }

	.content-B3 { width: 250px; min-height: 500px; margin: 0 auto; position: relative; }

		.flotcontainer { width: 250px; margin: 0 auto; position: absolute; z-index: 12; }
		#Charts-1 { width: 250px;  height: 250px; }
		#Charts-2 { width: 250px;  height: 250px; }
		#Charts-3 { width: 250px;  height: 250px; }
		#Charts-4 { width: 250px;  height: 250px; }
		.circle_border { width: 260px; height: 260px; border: 7px solid #fff; border-radius: 1000px; position: absolute; top: 54px; left: -4px;    box-shadow: 5px 5px 0px #959595;
    z-index: 11;  }
		.legend { display: none; }
		
		.circle_frame { position: relative; width: 250px; height: 250px; /*overflow: hidden;*/ }
		.circle_satisfaction { position: absolute; width: 72px; height: 72px; border-radius: 50px; background: #000; top: 50%; left: 50%; margin-top: -32px; margin-left: -32px; overflow: hidden; }
			.satisfaction_color { width: 46px; height: 20px; background: #88c23f; margin: 0 auto; margin-top: 7px; border-radius: 150% 150% 90% 90%; }
			.satisfaction { color: #fff; text-align: center; font-size: 1rem; }

			.satisfied { width: 230px; margin: 0 auto; position: absolute; top: 360px; left: 20px }
			.satisfied .satFrame { width: 50%; float: left; }
			.satisfied .satFrame .cube { width: 20px; height: 20px; display: inline-block; vertical-align:middle; margin-right: 10px; }
				 .c1 { background-color: rgb(77,167,77); }
				 .c2 { background-color: rgb(203,75,75); }
				 .c3 { background-color: rgb(175,216,248); }
				 .c4 { background-color: rgb(237,194,64); }

			.satisfied .satFrame .sat-text { font-size:1.143rem; color: #4d4d4d; vertical-align:middle; }





		#canvas-holder { width: 200%; margin-left: -50%; }
		.circle_border_1 {  }
		#chart-1 {  width: 250px; height: 250px;  /*margin-top: 50px;*/  text-align: center; border: 7px solid #fff; border-radius: 1000px; position: absolute; box-shadow: 5px 5px 0px #959595;   }
		#chart-2 {  width: 100%;  /*margin-top: 50px;*/  text-align: center;   }
		#chart-3 {  width: 100%;  /*margin-top: 50px;*/  text-align: center;   }
		#chart-4 {  width: 100%;  /*margin-top: 50px;*/  text-align: center;   }
	    #chartjs-tooltip {
	      opacity: 1;
	      position: absolute;
	      background: rgba(0, 0, 0, .7);
	      color: white;
	      border-radius: 3px;
	      -webkit-transition: all .1s ease;
	      transition: all .1s ease;
	      pointer-events: none;
	      -webkit-transform: translate(-50%, 0);
	      transform: translate(-50%, 0);
	    }

	    .chartjs-tooltip-key {
	      display: inline-block;
	      width: 10px;
	      height: 10px;
	      margin-right: 10px;
	    }
	    




.Box-4 .container{ min-height:500px;  background: url(../images/contain_04.jpg) center top no-repeat; background-size:cover; }
.Box-4 .title { width: 100%; height: 44px; max-width: 640px; margin: 0 auto; margin-top: 55px; margin-bottom: 40px; background: url(../images/title_04.png) center top no-repeat; background-size:100%; }
	

	.list_frame { margin-bottom: 40px; }
	.list-L { width: 50%; min-height: 645px; float: left; padding: 50px 50px; background: #75c288; color: white; }
	
		.Box-4 .list-L label { font-size:1rem; display: inline-block;  }
		.Box-4 .list-L input { width: 100%; height: 45px; font-size:1.143rem; padding: 5px; border-radius: 30px; border: 3px solid #41b352; }
		.Box-4 .list-L select { width: 100%; height: 45px; padding: 5px; padding-left: 20px; border-radius: 30px; -moz-border-radius:30px; -webkit-border-radius: 30px; appearance:none; -moz-appearance:none; -webkit-appearance:none; background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent; background-color: #fff; background-position: right 20px center; border: 3px solid #41b352; color: #808080; }
		.Box-4 .checkbox { width: 40px; height: 40px; }


	.group-1 input, .group-2 input, .group-3 input, .group-3 select { margin-bottom: 15px; }
	.group-1 { width: 50%; }
	.group-2 { width: 45%; margin-left: 15px; }
	.group-3 { width: 100%; }

	.group-3 .address { width: 100%; }

		.label_title { min-width: 200px; margin-left: 10px; display: block; clear: both; }
		.Box-4 .list-L select.select-city, .Box-4 .list-L select.select-dist { width: 48.9%; }
	

			
			
	
	.list-check label { display: block; }
	.list-check label i { font-size:30px; font-style:normal; display:inline-block; width:20px; height:20px; text-align:center; line-height:4rem; color:#fff; vertical-align:middle;	margin:0 5px; border:#fff9e1 0.1em solid; background: #6db47e;  }

	.confrim { font-size:30px; font-style:normal; display:inline-block; width:20px; height:20px; text-align:center; line-height:4rem; color:#fff; vertical-align:middle; margin:0 ; border:#fff9e1 0.1em solid; background: #6db47e;}

	

	input[type="checkbox"],input[type="radio"] {display:none;} 
	input[type="radio"] + i {font-size:30px; } 


	input[type="checkbox"]:checked + i,input[type="radio"]:checked + i {background:#f7ac3b;} 
	input[type="checkbox"]:disabled + i,input[type="radio"]:disabled + i {border-color:#ccc;} 
	input[type="checkbox"]:checked:disabled + i,input[type="radio"]:checked:disabled + i {background:#ccc;} 


	.list-R { width: 50%; min-height: 645px; float: right; padding: 50px 30px 0px 30px; background: #fff; }
		
		.QandA { font-size:1rem; color: #009933; padding-left: 20px; }
		.QandA li { line-height: 2.5rem; border-bottom: 2px dashed #009933 ; padding-bottom: 25px; padding-top:15px;   }
		.QandA li:last-child { border-bottom: none; }
		.confrim-QA { font-size:30px; font-style:normal; display:inline-block; width:20px; height:20px; text-align:center; line-height:4rem; color:#fff; margin:0 ; border:#fff9e1 0.1em solid; background: #fff; border-color:#009933; vertical-align:middle; margin-right: 5px;  }
		.select-text { display: inline-block; vertical-align:middle; margin-right: 10px; }

	




.Box-5 {  }
	.BG_repeat { background: url(../images/contain_05_repeat.jpg) center top repeat; position: relative; padding-bottom: 100px; }
	
.Box-5 .prize { margin: 0 15px; /*border: 1px solid red;*/ }
		.G-Name, .G-value { font-size:1.143rem; text-align: center; font-weight: bold; }
		.quotas { font-size: 1.143rem; background:#88c23f; border-radius:5px; padding: 5px; margin-right: 14px;  }
		.prize { padding: 0; }
	
	.GoToTop { position: absolute; left: 50%; margin-left: -76px; bottom: 0px; width:154px; height: 77px;}
	.GoToTop a { width:154px; height: 77px; display: block; background: url(../images/gototop.png) center top no-repeat; }

#container2 select{ width: 50%; }
.btn-submit { width: 100%; height: 45px; font-size:1.143rem; padding: 5px; /*border-radius: 30px;*/ border: 3px solid #41b352; width: 289px; height: 73px; margin: 0 auto; display: block; margin-top: 20px; background: url(../images/btn_submit.png) center top no-repeat; border: none; }

footer { max-width: 1920px; margin: 0 auto; color: #fff; background: #39b14a; font-size:1rem; }
footer .container { padding: 0; }
		.notice { padding:20px 0; }
		.copyright { max-width: 1920px; background: #fff; color: #666; padding-top: 55px; margin: 0; }
		.copyright p{ margin-bottom: 1.5714rem; text-align: center; }



		.winner { line-height: 3rem; font-size: 1.143rem; }





/* Small */
@media (min-width: 320px) and (max-width: 768px) { 
	.TopBar { width: 100%; max-width: 768px; padding-left: 0; padding-right:0; }
	.TopBar .navbar { padding: 0; }
		.BailanLogo img { max-width: 80px; margin-left: 0px; margin-left:0; }
		.navbar-brand { padding-left: .5rem; margin-right: 6rem; }
		.navbar-toggler { margin-right: .5rem; }
		.navbar-collapse { background-color: #003385; padding-left: .5rem; }
		
		.MainMenu li a{ max-height: 45px; color: #003385; font-size:1.4rem; padding: 0; line-height: 3rem; color: #fff; }

		.share_btn_wrap { position: absolute; right: 45px; top: 3px; width: 100px; height: 40px;  }

			.blue_bg { background-color: rgba(14,60, 142, .95) }
			.white-bg { background-color:white; }
			.btn-fb { margin: 0;}
			/*.btn-fb img{ max-width:42px; }*/
			.btn-fb, .btn-line { margin: 0 3px; float: left; display: inline-block; font-size:3rem; vertical-align:middle; }

			.btn-line img{ max-width:42px;  display: inline-block; }
			.btn-fb ,.btn-line{ display: block; max-width:40px; height: 40px;   }


		.btn-Nor { display: none; }
	
	.Box-1 { margin-top: 70px; /*padding-top: 70px; */}
	.Box-1 .container { width: 100%; min-height:530px; padding: 0; /*background: url(../images/mobile/contain_01.jpg) center top no-repeat; background-size:120%; background-position: center -50px;*/ }
		
		 .content-PC { display: none; }
		 .B1-content-M { padding: 0; }



		 


	/*.Box-1 .container .B1-content-M .depiction-1 { font-size: 1.3rem; }*/
	/*.Box-1 .container .B1-content-M h5 { font-size: 1.3rem; }*/
		 .M1 { padding: 0; margin: 0; position: relative; }


		 .B1-M-bg { width: 100%; min-height: 670px; background: url(../images/mobile/contain_01.jpg) center top no-repeat; background-size: cover;/* padding-top: 255px;*/ }
		 .B1-M-bg .B1-content-M { /* background-color: rgba( 255, 255, 255, 0.75); border-radius: 20px; margin: 40px 0;*/  padding-top: 10px; }
		 .B1-M-bg .B1-content-M .depiction-1 { font-size: 1.1rem; line-height: 1.5rem; margin-top: 0; }
		 .B1-M-bg .B1-content-M .text-time { font-size: 1rem; }
		 .B1-M-bg .B1-content-M .text-10 { font-size: 14px; }
		 .B1-M-bg .B1-content-M .B1-btn-gifts a{ margin: 0 auto; width: 109px; height: 52px; display: block;  background: url(../images/btn_gifts.png) center top no-repeat;margin-top: 15px; }

		 .B1-M-MainTitle { text-align: center; margin: 0 auto; margin-top: 10px; }
		 .B1-M-MainTitle img {  width: auto; max-height: 75px; }
		 .B1-product-M { text-align: center; margin: 0 auto; }
		 .B1-product-M img { margin: 0 auto; width: auto; max-height: 220px; }


	.btn-join {  position: fixed; right: 4%; bottom:30px; z-index: 999; width: 70px; height: 70px; background: url(../images/btn_join_2.png) center top no-repeat; background-size: contain; }
	.btn-join a { width: 100%; max-width: 69px; height: 100%; max-height: 70px; display: block; margin: 0 auto; padding: 0; /*background: url(../images/btn_join.png) center top no-repeat; */ background-size: contain;}
	.btn-join a img { width: 100%; max-width: 140px; height: 100%; max-height: 140px; }


		.text-10 { font-size: 12px; }



	.btn-join a{ -webkit-animation: twinkling .9s infinite ease-in-out ; }
	.animated{
	    -webkit-animation-duration: 1s;
	    animation-duration: .3s;
	    -webkit-animation-fill-mode: both;
	    animation-fill-mode: both;
	    animation-timing-function: steps(2); 
	}

	@-webkit-keyframes twinkling{
	    0%{
	        opacity: 0.0;
	    }
	    100%{
	        opacity: 1;
	        width: 100%; height: 100%; max-height: 70px;
	        background: url(../images/btn_join_2.png) center top no-repeat; background-size: contain; 
	    }

	}
	@keyframes twinkling{
	    0%{
	        opacity: 0.0;
	    }
	    100%{
	        opacity: 1;
	        width: 100%; height: 100%; max-height: 70px;
	        background: url(../images/btn_join.png) center top no-repeat; background-size: contain; 
	    }
	}




	
	.B1-content { margin-top: 335px; }
	.B1-content h2 { font-size: 1rem; line-height: 1.85rem;  }

	.btn-gifts { margin: 0 auto; margin-top:20px; /*margin-bottom: 20px;*/ }
	.btn-gifts a { width: 109px; height: 52px; display: block;  background: url(../images/btn_gifts.png) center top no-repeat; }

	.Box-2 { /*padding-top: 70px;*/ }
	.Box-2 .container{ width: 100%; min-height:530px; padding: 0;  /*background: url(../images/mobile/contain_02.jpg) center top no-repeat; background-size:contain;*/ }

	.Box-2 .container .B2-text { font-size:1.2571rem; color: #333; width: 240px; margin: 0 auto; padding-top: 350px; margin-bottom: 20px; }

			.btn-detail { margin:20px auto; }
			.detailPage { padding: 0px auto ; }
			
			.B2-subject { display: none; }
			.B2-subject-M { display: block; width: 100%; max-width: 481px; height: auto; max-height: 136px; margin-bottom: 30px; }
	
	.content-B3 { width: 250px; }




	.Box-4 .container{ padding-top: 70px; min-height:500px;  background: url(../images/contain_04.jpg) center top no-repeat; background-size: cover; }
	.Box-4 .title { max-width:346px; width: 100%; height: 103px; margin-top: 50px; margin-bottom: 40px; background: url(../images/mobile/title_04.png) center top no-repeat; background-size:100%; }


		.list-L { width: 100%; min-height: 645px; float: left; padding: 50px 25px; background: #75c288; color: white; }

			.Box-4 .list-L label { font-size:1.143rem; display: inline-block;  }
			.Box-4 .list-L input { width: 100%; height: 45px; font-size:1.143rem; padding: 5px; border-radius: 30px; border: 3px solid #41b352; }
			.Box-4 .list-L select { width: 100%; height: 45px; padding: 5px; border-radius: 30px; border: 3px solid #41b352; color: #808080; }
			.Box-4 .checkbox { width: 40px; height: 40px; }


			.group-1, .group-2, .group-3{ width: 100%; margin-left: 0; }
			.group-3 { margin-top: 15px; }
			

			
		
			
			
		.list-R { width: 100%; }

		
			.G-Name, .G-value { font-size:1.6rem; }
			.quotas { font-size: 1.5rem;  }


		

	.btn-submit { width: 100%; height: 45px; font-size:1.143rem; padding: 5px; border-radius: 30px; /*border: 3px solid #41b352;*/ width:100%; height: 60px; max-height: 73px; background-size: contain;  }

	footer { font-size: 1rem; }


	.Box-5  .container { padding-top: 70px; }



	/* Prizes-List */
	#Prizes-List { width: 90%; min-width: 300px; height: auto; min-height: 500px; border: 15px solid #39b14a; overflow: visible;font-family:"Microsoft JhengHei","微軟正黑體"; padding: 10px !important; }
	#Prizes-List button { background: url(../images/prizes_close.png) center top no-repeat; right: 20px; top: -26px; z-index: 99; }
	#Prizes-List button svg{ display: none; }

		.prize-title { width: 190px; margin: 0 auto; margin-bottom: 20px;  }
		.prize-title img {display: block; }

		.prize-list { width:100%; font-size: 16px; color: #333; border: 1px solid #39b14a; margin-bottom: 60PX;  }

		.list-title { width: 100%; height:60px; padding-left: 8px; color: white; font-size: 1.143rem; font-weight: bold; position: relative; }

		.quota { width:20px; height: 20px; padding: 25px; background: url(../images/quota.png) center top no-repeat; position: absolute; right: 10px; top: -30px; background-size: contain; z-index: 99; }
	
}










@media (min-width: 769px) and (max-width: 991px) {
	.TopBar { width: 100%; padding-left: 0; padding-right:0; }
	.TopBar .navbar { padding: 0; }
		.BailanLogo img { max-width: 80px; margin-left: 0px; margin-left:0; }
		.navbar-brand { padding-left: .5rem; margin-right: 6rem; }
		.navbar-toggler { margin-right: .5rem; }
		.navbar-collapse { background-color: #003385; padding-left: .5rem; }
		
		.MainMenu li a{ max-height: 45px; color: #003385; font-size:1.4rem; padding: 0; line-height: 3rem; color: #fff; }

		.share_btn_wrap { position: absolute; right: 45px; top: 3px; width: 100px;  }

			.blue_bg { background-color: rgba(14,60, 142, .95) }
			.btn-fb { margin: 0;}
			/*.btn-fb img{ max-width:42px; }*/
			.btn-fb, .btn-line { margin: 0 3px; float: left; display: inline-block; font-size:3rem; vertical-align:middle; }

			.btn-line img{ max-width:42px;  display: inline-block; }
			.btn-fb ,.btn-line{ display: block; max-width:40px; height: 40px;   }


		.btn-Nor { display: none; }

	.Box-1 { margin-top: 70px; }
	.Box-1 .container { padding: 0; }
		
		.content-PC { display: none; }
		.M1 { padding: 0; position: relative; }

		.B1-M-bg { width: 100%; min-height: 1000px; background: url(../images/mobile/contain_01.jpg) center top no-repeat; background-size: 100%; /*padding-top: 90%;*/ }
		 .B1-M-bg .B1-content-M { /* background-color: rgba( 255, 255, 255, 0.75); border-radius: 20px; padding: 10px; margin: 40px 0; */}
		 .B1-M-bg .B1-content-M .depiction-1 { font-size: 1.22rem; line-height: 1.7rem; margin-top: 0; }
		 .B1-M-bg .B1-content-M .text-time { font-size: 1.22rem; }
		 .B1-M-bg .B1-content-M .B1-btn-gifts a{ margin: 0 auto; width: 109px; height: 52px; display: block;  background: url(../images/btn_gifts.png) center top no-repeat;margin-top: 15px; }


	.Box-2 { margin-top: 80px; }
	.Box-2 .container { padding-top: 80px; }

	.Box-2 .container .B2-text { display: none; }
		.B2-subject-M { display: none; }


	.Box-4 .container { padding-top: 60px; }


	
	/* Prizes-List */
	#Prizes-List { width: 90%; min-width: 300px; height: auto; min-height: 500px; border: 15px solid #39b14a; overflow: visible;font-family:"Microsoft JhengHei","微軟正黑體"; }
	#Prizes-List button { background: url(../images/prizes_close.png) center top no-repeat; right: 20px; top: -26px; z-index: 99; }
	#Prizes-List button svg{ display: none; }

		.prize-title { width: 190px; margin: 0 auto; margin-bottom: 20px;  }
		.prize-title img {display: block; }

		.prize-list { width:100%; font-size: 16px; color: #333; border: 1px solid #39b14a; margin-bottom: 60PX;  }

		.list-title { width: 100%; height:80px; padding-left: 30px; color: white; font-size: 1.857rem; font-weight: bold; position: relative; }

		.quota { width:20px; height: 20px; padding: 40px; background: url(../images/quota.png) center top no-repeat; position: absolute; right: 20px; top: -20px; background-size: contain; z-index: 99; }


}




@media (min-width: 992px) and (max-width: 1199px) {

	.TopBar { max-width: 1440px; min-width: 1000px; }
		.BailanLogo img { max-width: 100px; max-height: 85px; margin-left: 10px; }
		.MainMenu li { max-height: 25px; padding:0 20px; border-right: 2px solid #003385; line-height: 1.5rem; }
		.MainMenu li a{ max-height: 25px; color: #003385; font-size:1.1rem; padding: 0 !important; }
		.btn-line { margin-right: 40px; }

		.btn-M { display: none; }



	.Box-1 .container, .Box-2 .container, .Box-3 .container, .Box-4 .container { padding-left:0; padding-right:0; }
	.Box-1 .container, .Box-2 .container, .Box-3 .container, .Box-4 .container { margin-left:0; margin-right: 0; }

	.Box-1 .container{ margin-top: 100px; width: 100%; min-width: 990px; min-height:670px;  background: url(../images/contain_01_bg.jpg) center top no-repeat; background-size: cover; }
		
		.B1-product { margin-top: 100px; }
		.B1-product img {  width: 100%; max-width: 459px; max-height: 516px; margin: 0 auto; }

		.content-PC-R { margin-top: 60px; max-width: 544px; }
			.B1-subject { padding-left: 45px; margin-top: 40px; font-weight: bold; font-size: 1.35rem; color: #4d4d4d; line-height: 2.4rem; }
			.content-PC .depiction { padding-left: 45px; margin-top: 20px; font-weight: bold; font-size: 1.2rem; }
			.content-PC h5 { font-size: 1.2rem;padding-left: 40px; font-weight: bold; }
		
		.content-PC-R .btn-gifts { position: relative; }
		.content-PC-R .btn-gifts a { position: relative; top: 0; left: 0; }



		.B1-content-M { display: none; }

	.M1 { padding: 0; position: relative; }
	/*.btn-join { position: absolute; right: 25px; top:20px; margin-top: 210px; margin-left: 260px;}*/
	/*.btn-join a { width: 140px; height: 140px; display: block; margin: 0 auto; background: url(../images/btn_join.png) center top no-repeat; background-size: contain; }*/
	.btn-gifts { margin: 0 auto; margin-top:20px; margin-bottom: 20px; }
	.btn-gifts a { position: absolute; top:550px; right:440px; width: 109px; height: 52px; display: block;  background: url(../images/btn_gifts.png) center top no-repeat; }




	.Box-2 .container { padding: 20px 0; width: 100%; min-width: 990px; min-height:670px; background: url(../images/contain_02_bg.jpg) center top no-repeat; }

			.B2-subject-M { display: none; }


			.B2-model { margin: 0 auto; margin-top: 100px; }
		.B2-model img { width: 100%; max-width: 480px; max-height: 477px; margin: 0 auto; display: block; }

		.B2-title { width: 100%; max-width: 468px; max-height: 100px; margin: 0 auto; margin-top: 160px; }
		.B2-subject { width: 100%; margin: 0 auto; margin-top: 40px; font-weight: bold; font-size: 1.35rem; color: #4d4d4d; line-height: 2rem; display: block; }
		.content-PC .btn-detail { margin: 0 auto;  width: 100%; max-width: 484px; max-height: 44px; margin-top: 120px; }


		.B2-subject-M { display: none; }
		#B2-detail .B2-subject { width: 100%; max-width:883px; height: 100%; height: 28px; margin-left: 0; margin-top: 0; margin-bottom: 40px; }

		.content-PC { padding-left: 20px; }

		.btn-detail { margin-top:480px; margin-left: 490px; }


	.Box-3 .container { padding-top: 90px; }
	.Box-3 .title { margin-top: 15px; }

	.Box-4 .container { padding-top: 90px; }
	.Box-4 .title { margin-top: 15px; }



	/* Prizes-List */
	#Prizes-List { width: 90%; min-width: 300px; height: auto; min-height: 500px; border: 15px solid #39b14a; overflow: visible;font-family:"Microsoft JhengHei","微軟正黑體"; }
	#Prizes-List button { background: url(../images/prizes_close.png) center top no-repeat; right: 20px; top: -26px; z-index: 99; }
	#Prizes-List button svg{ display: none; }

		.prize-title { width: 190px; margin: 0 auto; margin-bottom: 20px;  }
		.prize-title img {display: block; }

		.prize-list { width:100%; font-size: 16px; color: #333; border: 1px solid #39b14a; margin-bottom: 60PX;  }

		.list-title { width: 100%; height:80px; padding-left: 30px; color: white; font-size: 1.857rem; font-weight: bold; position: relative; }

		.quota { width:20px; height: 20px; padding: 40px; background: url(../images/quota.png) center top no-repeat; position: absolute; right: 20px; top: -20px; background-size: contain; z-index: 99; }


}



/* large */
@media (min-width: 1200px) and (max-width: 1399px) {
	
.TopBar { max-width: 1440px; min-width: 1400px; /*padding-top: 10px;*/ }
		.BailanLogo img { max-width: 100px; max-height: 85px; margin-left: 40px; }
		.MainMenu li { max-height: 25px; padding:0 20px; border-right: 2px solid #003385; line-height: 1.5rem; }	
		.MainMenu li a{ max-height: 25px; color: #003385; font-size:1.6rem; padding: 0 .15rem !important; }
		
		.btn-line { margin-right: 40px; }

		.btn-M { display: none; }
	
	.Box-1 .container{ margin-top: 100px; width: 100%; min-width: 1200px; min-height:670px;  background: url(../images/contain_01_bg.jpg) center top no-repeat; background-size: cover; }
		
		.B1-product { margin-top: 100px; }
		.B1-product img {  width: 100%; max-width: 459px; max-height: 516px; margin: 0 auto; }

		.content-PC-R { margin-top: 60px; max-width: 544px; }
			.B1-subject { padding-left: 45px; margin-top: 40px; font-weight: bold; font-size: 1.714rem; color: #4d4d4d; line-height: 3rem; }
			.content-PC .depiction { padding-left: 45px; margin-top: 20px; font-weight: bold; font-size: 1.6rem; }
			.content-PC h5 { padding-left: 40px; font-weight: bold; }
		
		.content-PC-R .btn-gifts { position: relative; }
		.content-PC-R .btn-gifts a { position: relative; top: 0; left: 0; }



		.B1-content-M { display: none; }

	.M1 { padding: 0; position: relative; }
	/*.btn-join { position: absolute; right: 25px; top:20px; margin-top: 210px; margin-left: 260px;}*/
	/*.btn-join a { width: 140px; height: 140px; display: block; margin: 0 auto; background: url(../images/btn_join.png) center top no-repeat; background-size: contain; }*/
	.btn-gifts { margin: 0 auto; margin-top:20px; margin-bottom: 20px; }
	.btn-gifts a { position: absolute; top:550px; right:440px; width: 109px; height: 52px; display: block;  background: url(../images/btn_gifts.png) center top no-repeat; }
	

	.Box-2 .container { padding: 20px 0; width: 100%; min-width: 1200px; min-height:670px; background: url(../images/contain_02_bg.jpg) center top no-repeat; }
	.Box-2 .container .B2-text { display: none; }



		.B2-model { margin: 0 auto; margin-top: 100px; }
		.B2-model img { width: 100%; max-width: 480px; max-height: 477px; margin: 0 auto; display: block; }

		.B2-title { width: 100%; max-width: 468px; max-height: 100px; margin: 0 auto; margin-top: 160px; }
		.B2-subject { width: 480px; margin: 0 auto; margin-top: 40px; font-weight: bold; font-size: 1.714rem; color: #4d4d4d; line-height: 2.6rem; display: block; }
		.content-PC .btn-detail { margin: 0 auto;  width: 100%; max-width: 484px; max-height: 44px; margin-top: 120px; }


		.B2-subject-M { display: none; }
		#B2-detail .B2-subject { width: 100%; max-width:883px; height: 100%; height: 28px; margin-left: 0; margin-top: 0; margin-bottom: 40px; }

		.content-PC { padding-left: 20px; }

		.btn-detail { margin-top:480px; margin-left: 490px; }





	.Box-3 .container { min-width: 1200px; }
	
	
	.Box-4 .container{ min-width: 1200px; }
	.Box-4 .title { max-width:694px; width: 100%; height: 44px; margin-top: 50px; margin-bottom: 40px; background: url(../images/title_04.png) center top no-repeat; background-size:100%; }

		.p-5 { font-size:1.286rem; max-width: 1200px; line-height: 2.5rem; }
	

	.Box-5 .container{ min-width: 1200px; }
	.Box-5 .BG_repeat{  padding-top: 80px; }
	
	footer {  min-width: 1200px; }
	footer .container{  min-width: 1200px; }



	/* Prizes-List */
	#Prizes-List { width: 90%; min-width: 300px; height: auto; min-height: 500px; border: 15px solid #39b14a; overflow: visible;font-family:"Microsoft JhengHei","微軟正黑體"; }
	#Prizes-List button { background: url(../images/prizes_close.png) center top no-repeat; right: 20px; top: -26px; z-index: 99; }
	#Prizes-List button svg{ display: none; }

		.prize-title { width: 190px; margin: 0 auto; margin-bottom: 20px;  }
		.prize-title img {display: block; }

		.prize-list { width:100%; font-size: 16px; color: #333; border: 1px solid #39b14a; margin-bottom: 60PX;  }

		.list-title { width: 100%; height:80px; padding-left: 30px; color: white; font-size: 1.857rem; font-weight: bold; position: relative; }

		.quota { width:20px; height: 20px; padding: 40px; background: url(../images/quota.png) center top no-repeat; position: absolute; right: 20px; top: -20px; background-size: contain; z-index: 99; }
	
	
	
}

/* Extra large */
@media (min-width: 1400px) {

	.TopBar { height: 110px; transition: all .55s; margin: 0 auto; }

		.navbar { padding: 1rem; }
		.MainTopBar { width: 1440px; margin: 0 auto; }
		.BailanLogo img { max-width: 100px; max-height: 85px; margin-left: 90px; }
		.MainMenu li { max-height: 25px; padding:0 20px; border-right: 2px solid #003385; line-height: 1.5rem; transition: all .55s; }
		.MainMenu li a{ max-height: 25px; font-size:1.6rem; padding: 0; }

		.btn-M { display: none; }
	
	.Box-1 { padding-top: 110px; }
	.Box-1 .container{ width: 100%; min-height:670px;  background: url(../images/contain_01_bg.jpg) center top no-repeat; background-size: cover; }
		
		.M1 { padding: 0; position: relative; }
		/*.btn-join { position: absolute; right: 25px; top:20px; margin-top: 210px; margin-left: 260px;}
		.btn-join a { width: 140px; height: 140px; display: block; margin: 0 auto; background: url(../images/btn_join.png) center top no-repeat; background-size: contain; }*/
		.btn-gifts { margin: 0 auto; margin-top:20px; margin-bottom: 20px; }
		.btn-gifts a { position: absolute; top:550px; right:440px; width: 109px; height: 52px; display: block;  background: url(../images/btn_gifts.png) center top no-repeat; }

		.B1-product { margin-top: 100px; }
		.B1-product img {  width: 100%; max-width: 459px; max-height: 516px; margin: 0 auto; }

		.content-PC-R { margin-top: 60px; max-width: 544px; }
			.B1-subject { padding-left: 45px; margin-top: 40px; font-weight: bold; font-size: 1.714rem; color: #4d4d4d; line-height: 3rem; }
			.content-PC .depiction { padding-left: 45px; margin-top: 40px; font-weight: bold; font-size: 1.6rem; }
			.content-PC h5 { padding-left: 40px; font-weight: bold; }
		
		.content-PC-R .btn-gifts { position: relative; }
		.content-PC-R .btn-gifts a { position: relative; top: 0; left: 0; }



		.B1-content-M { display: none; }


	
	.Box-2 .container{ padding: 20px 0; width: 100%; min-height:670px;  background: url(../images/contain_02_bg.jpg) center top no-repeat; }
	.Box-2 .container .B2-text { display: none; }


		.B2-model { margin: 0 auto; margin-top: 100px; }
		.B2-model img { width: 100%; max-width: 480px; max-height: 477px; margin: 0 auto; display: block; }

		.B2-title { width: 100%; max-width: 468px; max-height: 100px; margin: 0 auto; margin-top: 160px; }
		.B2-subject { width: 480px; margin: 0 auto; margin-top: 40px; font-weight: bold; font-size: 1.714rem; color: #4d4d4d; line-height: 2.6rem; display: block; }
		.content-PC .btn-detail { margin: 0 auto;  width: 100%; max-width: 484px; max-height: 44px; margin-top: 120px; }


	#B2-detail .B2-subject { width: 100%; max-width:883px; height: 100%; height: 28px; margin-left: 0; margin-top: 0; margin-bottom: 40px; }


		.B2-subject-M { display: none; }

		.btn-detail { margin-top:480px; margin-left: 490px;  }
	
	
	.Box-3 .container { padding-top: 40px; } 


	.Box-4 .container { padding-top: 70px; } 
	.Box-4 .title { max-width:694px; width: 100%; height: 44px; margin-top: 50px; margin-bottom: 40px; background: url(../images/title_04.png) center top no-repeat; background-size:100%; }

		.p-5 { font-size:1.286rem; max-width: 1200px; line-height: 2.5rem; }
	
	.Box-5 .BG_repeat{  padding-top: 80px; }


	/* Prizes-List */
	#Prizes-List { width: 90%; min-width: 300px; height: auto; min-height: 500px; border: 15px solid #39b14a; overflow: visible;font-family:"Microsoft JhengHei","微軟正黑體"; }
	#Prizes-List button { background: url(../images/prizes_close.png) center top no-repeat; right: 20px; top: -26px; z-index: 99; }
	#Prizes-List button svg{ display: none; }

		.prize-title { width: 190px; margin: 0 auto; margin-bottom: 20px;  }
		.prize-title img {display: block; }

		.prize-list { width:100%; font-size: 16px; color: #333; border: 1px solid #39b14a; margin-bottom: 60PX;  }

		.list-title { width: 100%; height:80px; padding-left: 30px; color: white; font-size: 1.857rem; font-weight: bold; position: relative; }

		.quota { width:20px; height: 20px; padding: 40px; background: url(../images/quota.png) center top no-repeat; position: absolute; right: 20px; top: -20px; background-size: contain; z-index: 99; }


	
}


.chartjs-tooltip { z-index: 15; min-width: 130px;}

.CleanBoth { clear: both; background: #fff; }
.fancybox-container { font-family: Microsoft JhengHei, 微軟正黑體, Gill Sans, Gill Sans MT, "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif", "Apple LiGothic Medium", "Noto Sans", "NotoSansCJKtc "; }



/* Color */
.Cor-gold { color:gold; }
.Cor-white { color: white; }
.Cor-crimson { color: crimson}
.Cor-green { color: #009933; }
.Cor-darkbrown { color:#f7ac3b; }
.Cor-blue { color: #0060ff; }



/*
html, body { font-size: 14px; }

8px = 0.5714rem
9px = 0.6429rem
10px = 0.7143rem
11px = 0.7857rem
12px = 0.8571rem
13px = 0.9286rem
14px = 1rem (base)
15px = 1.071rem
16px = 1.143rem
18px = 1.286rem
20px = 1.429rem
22px = 1.571rem
24px = 1.714rem
26px = 1.857rem
28px = 2rem
30px = 2.143rem
32px = 2.286rem
34px = 2.429rem
36px = 2.571rem
38px = 2.714rem
40px = 2.857rem
42px = 3rem
44px = 3.143rem
46px = 3.286rem
48px = 3.429rem
50px = 3.571rem
52px = 3.714rem
54px = 3.857rem
55px = 3.929rem

*/