.main button, .main input 	{ outline:none; border:none;}
	input[type="radio"], input[type="checkbox"] { width: 15px; height: 15px;}
	#body * {box-sizing: border-box}
	
	#body 			{ margin:0; padding:0; background:#fff; opacity:0;
					  font-family: "Helvetica Neue","Helvetica","Arial",sans-serif; font-weight:normal; color:#333; line-height:1.6;
					  -webkit-font-smoothing: antialiased;
  					 -moz-osx-font-smoothing: grayscale;}
	#body.cn { font-family: 微軟正黑體,"Helvetica Neue","Helvetica","Arial",sans-serif; }
	#body.ready 		{ opacity:1; }
	.en.font-aa 	{ font-size:16px; }
	.cn.font-aa 	{ font-size:18px; }

	.header,.header div,.header section,.header ul,.header li,.header a,
	.main div,.main section,.main ul,.main li,.main a, .main,
	.esfpushm div,.esfpushm section,.esfpushm ul,.esfpushm li,.esfpushm a, .esfpushm,
	.announcement div,.announcement section,.announcement ul,.announcement li,.announcement a{ position:relative;}
	.header h1,.header h2.header h3,.header h4,.header p,
	.main h1,.main h2.main h3,.main h4,.main p 	{ margin:0; }
	.main a 				{ cursor:pointer; word-wrap: break-word;}

	.header 			{ position:fixed; top:0; left:0; width:100%; /*height:140px;*/ background:#fff; z-index:1000; }
	.header img.logo { position:relative; height:95px; width:auto; top:20px; left:0px; transition:all 1s ease-out;  }
	.header nav 		{ position:absolute; left: auto; top:68%; color:#333; /*transform:translate(0,-50%);*/ }
/*	.header 			{ transition:all 1s ease-out; }*/
	.main 			{ padding-top:140px; display: block; }
	#footer .main 	{ padding-top:0; }



	.header .hd-wrp 		{  height:140px; transition:all 1s ease-out, top 0.3s ease-out; }
	.header .hd-wrp .pg-edge {  height: 100%;}


	.smhead .header .hd-wrp			{ height:100px; transition:all 1s ease-out, top 0.3s ease-out; }   

	.smhead .header img.logo { height:60px; }
	.smhead .main 			{ padding-top:100px; }
	
	.announcement { padding: 20px 0; background-color: #ececec; position: relative; }
	.announcement.hd { opacity: 0; visibility: hidden;	}
	.announcement p { margin: 0; }
	.announcement * { position: relative; }
	.announcement.fd { background-color:#ececec }
	.announcement .fa-times-circle 	 	{ position:absolute; right:20px; top:0px; font-size:20px; color: #333; z-index: 2; transition: all 0.3s ease-out;}
	.announcement .fa-times-circle:hover 	 	{ color: #666; }

	.announcement h3 					{ color: #0062af; margin: 0; }
	.announcement p a 					{ color: #0062af; margin: 0; transition: all 0.3s ease-out; cursor:pointer; text-decoration: underline}
	.announcement p a:hover 			{ color: #002b4c;}
	.clearfix::after { content: ""; clear: both; display: table;}

	.img-scale 		{ width:100%; height:auto;  display: block; }
	
	
	a.sp-alink 	  { padding:4px 10px; margin-bottom:15px; border-radius:4px; color:#fff; text-decoration:none; display:inline-block} 
	a.sp-alink:hover { color:#fff} 
	a.sp-alink:after { content:"\f08e"; display:inline-black; padding-left:5px; vertical-align:middle; font-family:"FontAwesome"} 
	a.sp-alink.a-blue { background-color:#0062a7;  } 
	a.sp-alink.a-blue:hover { background-color:#002b4c; text-decoration:none} 
	a.sp-alink.a-red  { background-color:#e84124;  } 
	a.sp-alink.a-red:hover { background-color:#842211; text-decoration:none }
	
	/* Go to Top */
	.gotop,
    .gotop span   	{ width:60px; height:60px; }

    .gotop.show 	{ opacity:1; }           
	.gotop  		{ position:fixed!important; bottom:0; right:0; z-index:1500; opacity:0;
					display:block; text-align:center; text-decoration:none; color:#333; cursor:pointer;
			              -webkit-transition: 1s;
			                 -moz-transition: 1s;
			              	      transition: 1s;}
	.gotop:hover	{ color: #fff;}
	.gotop span     { display:block; margin-bottom:0px; background:#ececec;
		                  -webkit-transition: 1s;
		                     -moz-transition: 1s;
		                          transition: 1s;}
	.gotop i 		{ font-size:25px; line-height:normal; margin-top:18px}


	/* Custom Page Layout */
	.pg-container 		{ max-width:100%; margin:0 auto; transition: all 0.3s ease-out; position:relative;}
	.pg-edge 			{ padding-left:150px; padding-right:150px; transition: all 0.3s ease-out;}
	.ct-pg-edge 		{ width: calc(100% + 300px); margin-left: -150px; }
	.pg-edge-top-bottom { padding-top:40px; padding-bottom:50px}
	.header .hd-wrp      { border-bottom:1px solid #ececec}

	.cn h1 { font-size:36px; font-weight:bold; margin-bottom:5px}
	.cn h2 { font-size:28px; font-weight:bold; margin-bottom:5px}
	.cn h3 { font-size:24px; font-weight:bold}
	.cn h4 { font-size:20px; font-weight:bold}


	.en h1 { font-size:34px; font-weight:bold; margin-bottom:5px}
	.en h2 { font-size:26px; font-weight:bold; margin-bottom:5px}
	.en h3 { font-size:22px; font-weight:bold}
	.en h4 { font-size:18px; font-weight:bold}


	/* Common */
	.float-r		{ float:right;}
	.float-l 		{ float:left}
	.text-align-r 	{ text-align:right;}

	/* Breadcrumb */
	ul.breadcrumb 					{ padding:0; list-style:none; margin:0; font-size:14px}
	ul.breadcrumb li 				{ display:inline }
	ul.breadcrumb li+li:before 		{ padding:8px; color:black; content: "/\00a0"; color:#e84124;}
	ul.breadcrumb li a 				{ color:#333; text-decoration:none; transition: all 0.3s ease-out;}
	ul.breadcrumb li a:hover 		{ color:#666; text-decoration:underline;}
	ul.breadcrumb li.current 		{ display:block; font-size:20px; color:#0062a7; text-transform:uppercase;}
	ul.breadcrumb li.current:before { padding:0; content: "";}

	.en ul.breadcrumb li.current 	{  font-weight:bold; }
	.cn ul.breadcrumb li.current 	{  font-weight:bold; }

	.font-red 	{ color: #e84124}
	.font-blue 	{ color: #0062a7}

	.g-padding 			{ padding-top:100px;}
	.g-padding-sm 		{ padding-top:55px;}

	.general a.btn-back 		{ text-transform:uppercase; text-decoration:none; color:#333; padding-bottom:8px; display:inline-block; transition: all 0.3s ease-out;}
	.general a.btn-back:hover 	{ color:#e84124; text-decoration:none;}
	.general a.btn-back img  	{ width:65px; height:auto; padding-right:10px}

	.en .general a.btn-back, .en ul.pg-item li 	{ font-size:85%; }
	.cn .general a.btn-back, .cn ul.pg-item li 	{ font-size:95%; }
	
	
	
	html {
	  scroll-behavior: smooth;
	}
	.main * { scroll-behavior: auto; }
	.hreflink{
	    top: -170px;
		display: block;
	}
	
	.mobonly { display : none;}

    [onclick] { cursor:pointer; }
	/* cookie consent */
	#ackbar { position:fixed; bottom:0; left:0; width:100%; padding:20px 30px; 
				background:#000; color:#fff; z-index:2000;}
	#ackbar>b { background:#E74225; top:12px; right:30px; position:absolute;
				padding:8px 20px; display:block; }

	/* ==========================================================================
	    Media Style:
	============================================================================= */
	@media only screen and (max-width:1600px) {
	.pg-edge 		{ padding-left:100px; padding-right:100px;}
	.ct-pg-edge		{ width:calc(100% + 200px); margin-left: -100px; }
	}

	@media only screen and (max-width:1400px) {
	.pg-edge 		{ padding-left:50px; padding-right:50px; /*border:1px solid blue;*/}
	.ct-pg-edge		{ width:calc(100% + 100px); margin-left: -50px; }
	.gotop,
    .gotop span   	{ width:50px; height:50px; }
	.gotop i 		{ font-size:22px; margin-top:13px}
	}

	@media only screen and (max-width:1200px) {
	.pg-edge-top-bottom { padding-top:30px; padding-bottom:30px}

	.header .hd-wrp { height:75px; /* transition:all 1s ease-out; */ }
	.header img.logo,
	.smhead .header img.logo 		{ height:55px; top:10px;}
	.main,
	.smhead .main 					{ padding-top:75px; }

	.smhead .header .hd-wrp			{ height:75px;}   
	.hreflink { top: -135px;}

	h2 { font-size:20px;}
	}
	
	@media only screen and (max-width: 1024px) {
	.g-padding 			{ padding-top:50px;}
	.general a.btn-back,
	ul.pg-item li 		{ font-size:80%;}
	.announcement { font-size: 14px; }
	.pg-edge 			{ padding-left:30px; padding-right:30px;}
	.ct-pg-edge		{ width:calc(100% + 60px); margin-left: -30px; }

	}


	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
	.pg-edge 			{ padding-left:30px; padding-right:30px;}
	.ct-pg-edge		{ width:calc(100% + 60px); margin-left: -30px; }
	}


	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
	.pg-edge 			{}
	}

	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
	.pg-edge 			{}
	}


	@media only screen and (max-width:767px) {
	
		
	.pg-edge 			{ padding-left:20px; padding-right:20px;}
	.ct-pg-edge		{ width:calc(100% + 40px); margin-left: -20px; }
	.pg-edge-top-bottom { padding-top:20px; padding-bottom:20px}

	ul.breadcrumb 		{ font-size:80% }

	.header .hd-wrp{ height:70px; transition:all 1s ease-out; }
	.header img.logo 		{ height:55px; top:5px;}
	.main 					{ padding-top:70px; }
	.hreflink { top: -130px;}

	.smhead .hd-wrp{ height:70px;}   

	.smhead .header img.logo { height:55px; top:5px; }
	.smhead .main 			{ padding-top:70px; }

	.gotop  		{ right:20px; bottom:39px;}

	.en h2 		{ font-size:20px;}
	.en h3 		{ font-size:18px;}
	.en h4 		{ font-size:16px;}

	.cn h1 		{ font-size:30px; font-weight:500;}
	.cn h2 		{ font-size:22px; font-weight:normal;}
	.cn h3 		{ font-size:20px; font-weight:normal}
	.cn h4 		{ font-size:18px; font-weight:normal}

	.cn ul.breadcrumb li.current 	{  font-weight:normal; }

	.mobonly { display : block;}

	#ackbar>b { position:relative; top:0; left:0; text-align:center; }

	}
	
	@media only screen and (max-width:767px) {
	.header img.logo 		{ height:40px; top:12px;}

	}