@charset "UTF-8";


@import url('bannerset.css?rev=20131230');
@import url('sideblock.css?rev=20131230');
@import url('conbox.css?rev=20140320');
@import url('footer.css?rev=20131230');
@import url('extra.css');
@import url('responsive.css?rev=20131230');

a, table, p, h1, h2, h3, h4, h5, h6, span, b, strong, div, ul, li, body, input, select, option, textarea {
	font-family:'sans-serif',"Heiti SC Light","Heiti TC Light","Adobe Fan Heiti Std B","Adobe LiGothic Medium","Apple SD Gothic Neo Light","MHeiGB5-Light-U","Hiragino Sans GB","Hiragino Sans GB W3",微軟正黑體 !important; 	
				font-weight:100; 
				font-smooth:always;
				-webkit-font-smoothing:subpixel-antialiased; 
				font-smoothing:subpixel-antialiased;
				text-rendering:optimizeLegibility; 
}


/*==========================================================================================*/
/* DEFAULT STYLE */
	
	/* MAIN 2EADER ON FRAME */
	
	body { width:100%; height:100%; margin:0 auto; position:relative; background:url(../images/bgMain.jpg) repeat-x left 105px #f4f4f6; } /* Center page without wrapper */
	body.blank { width:100%; height:100%; margin:0 auto; min-width:700px; position:relative; text-align:center; background:none; } /* Center page without wrapper */
	/*bodybox, #bodybox { width:100%; height:100%; margin:0 auto; position:relative; text-align:center; background:url(../images/bgMain.jpg) repeat-x left 105px #f4f4f6; }*/
	/*div#fpo { position:absolute; z-index:2; width:100%; height:100%; background:url(../images/_fpo_index.jpg) no-repeat top center; overflow:hidden; opacity:0; }*/
	
	.closeOverFlow { overflow-y:hidden !important; }
	
	#frameHeader { position:fixed; display:block; z-index:40; width:100%; height:70px; margin-left:auto; margin-right:auto; background-color:#f4f4f6; text-align:center; left:0; top:0;}
	#header { display:block; width:980px; display:block; margin-left:auto; margin-right:auto; padding:4px 0; position:relative; height:53px !important;}
	#headerSingle { display:block; width:700px; display:block; margin-left:auto; margin-right:auto; padding:4px 0; margin-top:10px; position:relative; height:55px;}
	/*#header img.logo { float:left; display:block; cursor:pointer; margin-top:7px; }*/
	#header div#logo, #headerSingle div#logo { display:block; cursor:pointer; margin-top:8px; margin-left:-35px; 
			width:180px; height:45px; background:url(../images/logo-taiwanmobile.gif) no-repeat top left;
			position: absolute; left:0; top: 0;
			}
	#header .framemenu1, #header div.framemenu2 { display:block; margin-top:10px; font-size:13px; text-shadow:1px 1px 0 white; }
	#header .framemenu1 { position:absolute; top:20px; left:150px; }
	#header .framemenu2 { position:absolute; top:11px; right:0px; width:252px; }
	#header .framemenu1 li { list-style:none; float:left; display:block; padding:0; padding-right:5px; margin:0; line-height:13px; height:13px; margin-right:5px; border-right:1px solid #999; }
	#header .framemenu1 li:last-child,
	#header .framemenu1 li.last { border-right:0 !important; border:0px solid white \9; }
	#header .framemenu1 a { font-size:13px; margin:0 2px; padding:0; font-family:微軟正黑體, Arial, Helvetica, sans-serif; display:block; text-decoration:none; }
	#header .framemenu1 a.myfoneshop, #header .framemenu2 a.myfoneshop { background:url(../images/icon-myfoneshop.gif) no-repeat top left; height:36px; margin-top:-7px; padding-left:33px; padding-top:8px; color:#c81613; }
			
			
			.framemenu2 div.searchbox { display:inline-block; border-radius:5px; width:auto; height:28px; border:1px solid #aaa; background:white; position-x:absolute;
				box-shadow:inset 0 1px 3px rgba(0,0,0,0.3); padding:0; margin-left:2px; top:1px; right:0; transition:all .5s; }
			.framemenu2 div.searchbox input { display:inline-block; border:0; height:100%; background:none; vertical-align:middle; box-sizing:border-box;
				width:calc(100% - 25px); *padding:4px; transition:all .5s; }
			.framemenu2 div.searchbox input:focus { width:200px; }
			.framemenu2 div.searchbox img.searchicon { /*position:absolute; top:6px; right:8px;*/ vertical-align:middle; box-sizing:border-box; display:inline-block; cursor:pointer; }
				


			.framemenu2 > a,
			#header .framemenu1 a.btnlang { border-radius:5px; padding:6px; margin:1px 2px; display:inline-block;
				font-size:11px !important; line-height:13px !important; 
				border:1px solid #aaa; background:#f2f2f2; 
				background: -moz-linear-gradient(top, #f5f5f5 0%, #dedede 100%); /* FF3.6+ */
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#dedede)); /* Chrome,Safari4+ */
				background: -webkit-linear-gradient(top, #f5f5f5 0%,#dedede 100%); /* Chrome10+,Safari5.1+ */
				background: -o-linear-gradient(top, #f5f5f5 0%,#dedede 100%); /* Opera 11.10+ */
				background: -ms-linear-gradient(top, #f5f5f5 0%,#dedede 100%); /* IE10+ */
				background: linear-gradient(to bottom, #f5f5f5 0%,#dedede 100%); /* W3C */
				/*box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3);*/ float:left; }
				#header .framemenu1 a.btnlang { margin-top:-8px; }
			#header .framemenu1 a:hover, #header .framemenu2 > a:hover { text-decoration:underline; }





							/*NEW ADD*/
							.framemenu2 { text-align:right; z-index:997; padding-top:1px; }
							.framemenu2 > input.searchbox { 
								display:inline-block; border-radius:4px; width:200px; height:28px; box-sizing:border-box; 
								border:1px solid #aaa; background:white; padding:1px 4px; 
								/*padding:10px; */
								font-size:1.05em; color:gray;
								box-shadow:inset 0 1px 2px rgba(0,0,0,0.2); transition:all .3s; }
							.framemenu2 > input.searchbox:focus { width:100%; font-size:1.1em; color:#333; padding:10px; }
							.framemenu2 > img.searchicon { position:absolute; top:6px; right:8px; vertical-align:middle; box-sizing:border-box; 
								display:inline-block; cursor:pointer; }
							.framemenu2 > .searchhint { display:block; background:white; margin:0; padding:0; box-sizing:border-box; box-shadow:0 1px 3px rgba(0,0,0,.3); height:auto; width:auto; transition:all .3s; }
							.framemenu2 > .searchhint > a.hint {
								display:block !important; background:#f3f4f5 !important; 
								box-sizing:border-box; 
								border:0 !important; text-shadow:none !important; float:none !important; 
								position:relative !important; 
								text-align:left; text-decoration:none !important; 
								border-radius:0 !important; 
								margin:0 !important; padding:10px 7px !important; 
								font-size:1.1em !important;
								}
							.framemenu2 > .searchhint > a.hint:hover, 
							.framemenu2 > .searchhint > a.hintfocus { background:#e5e6e7 !important; }
							.framemenu2 > .searchhint > a.hint span { font-weight:bold; }






	
	#header.shorten { height:30px !important; }
	#header.shorten div#logo { margin-top:3px; background:url(../images/logo-taiwanmobile.gif) no-repeat left -50px;}
	#header.shorten .framemenu1 { top:3px; }
	#header.shorten .framemenu2 { top:-6px; }
	
	#btn-backtotop { 
		position:fixed; bottom:50px; right:50px; font-family:Arial; font-size:11px; cursor:pointer; padding-top:45px; display:none; z-index:161;
		background:url(../images/icon-global.png) no-repeat -150px -400px; width:50px; height:60px; color:#7b7b7d; }
	
	
	#navbar { display:block; position:relative; width:100%; height:47px; left:0; text-align:center; 
		background:url(../images/navBg.gif) top center; 
		box-shadow:0 2px 2px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(0,0,0,0.1); 
		border-bottom:1px solid #999 \9;
		box-shadow:0 1px 1px rgba(0,0,0,0.3) \9;
		}
	#navbar div.menu { width:980px; height:47px; margin-left:auto; margin-right:auto; position:relative; }
	#navbar div.menuNoSlide { margin-left:auto; }
	
	#navbar div.menu div.shadowover { width:14px; height:50px; display:block; background:url(../images/navBar-selectBg.png) no-repeat right top; z-index:19; position:absolute; top:-1px; left:115px; display:none; }
	#navbar ul { display:table; margin:0; padding:0; height:100%; width:800px; position:absolute; top:0; left:0; z-index:22; }
	#navbar ul li { display:table-cell; height:33px; color:white; margin:0; padding:0; padding-top:14px; box-shadow:inset 0 -1px 1px rgba(0,0,0,0.1);
		font-size:17px; line-height:20px; font-family:微軟正黑體, Arial; *display:block; *float:left; *height:33px; }
	
	#navbar ul li { /*position:absolute; top:0; height:33px;*/ }
	#navbar ul li p { font-size:17px; line-height:20px; font-family:微軟正黑體, Arial; color:white; font-weight:300; margin:0; padding:0; } 
			
			
			/* BASIC */
			#navStore { left:0px; width:115px; height:100%; background-color:#da3641; background-image:none; }
			#navStore dl dd {list-style:none; float:left; }
			#navMobile { left:115px; width:135px; height:100%; background-color:#eb5700; background-image:none; }
			#navMobile dl dd {list-style:none; float:left; border-right:#ced0d5 solid 1px;}
			#navService { left:250px; width:120px; height:100%; background-color:#5b9900; background-image:none; }
			#navPromo { left:370px; width:100px; height:100%; background-color:#447719; background-image:none; }
			#navApp { left:470px; width:135px; height:100%; background-color:#f11722; background-image:none; }
			#navTravel { left:605px; width:100px; height:100%; background-color:#37b7e4; background-image:none; }
			#navMaintain { left:705px; width:95px; height:100%; background-color:#2d8ec4; background-image:none; }
			#nav4G { left:805px; width:95px; height:100%; background-color:#000; background-image:none; }
			#nav4G--xx { height:100%; width:85px; background-color:#000; text-align:center; background-image:none; padding:auto; position:relative; cursor:pointer; }
			#nav4G--xx .hover { display:none; position:absolute; bottom:0; left:0; height:100%; width:85px; background:url(../images/menuglow.png) no-repeat 50% 95%; z-index:1; } 
			#nav4G.ie8active { background:url(../images/menuglow.png) no-repeat 50% 95% black; }
			#nav4G p, #nav4G p img { display:block; height:15px; width:auto; margin:0 auto !important; text-align:center; }
			#nav4G p { z-index:10; }
			
			/* ROLLOVER */
			#navStore:hover, #navStore.active { background:url(../images/navBar-selectBg.png) no-repeat left top #da3641; cursor:pointer; z-index:10; }
			#navMobile:hover, #navMobile.active { background:url(../images/navBar-selectBg.png) no-repeat left top #eb5700; cursor:pointer; z-index:10; }
			#navService:hover, #navService.active { background:url(../images/navBar-selectBg.png) no-repeat left top #5b9900; cursor:pointer; z-index:10; }
			#navPromo:hover, #navPromo.active { background:url(../images/navBar-selectBg.png) no-repeat left top #447719; cursor:pointer; z-index:10; }
			#navApp:hover, #navApp.active { background:url(../images/navBar-selectBg.png) no-repeat left top #f11722; cursor:pointer; z-index:10; }
			#navTravel:hover, #navTravel.active { background:url(../images/navBar-selectBg.png) no-repeat left top #37b7e4; cursor:pointer; z-index:10; }
			#navMaintain:hover, #navMaintain.active { background:url(../images/navBar-selectBg.png) no-repeat left top #2d8ec4; cursor:pointer; z-index:10; }
			#nav4G:hover, #nav4G.active { background:url(../images/navBar-selectBg.png) no-repeat left top #000000; cursor:pointer; z-index:10; }
			
			#navStore:hover p, #navStore.active p { color:#da3641; }
			#navMobile:hover p, #navMobile.active p { color:#eb5700; }
			#navService:hover p, #navService.active p { color:#5b9900; }
			#navPromo:hover p, #navPromo.active p { color:#447719; }
			#navApp:hover p, #navApp.active p { color:#f11722; }
			#navTravel:hover p, #navTravel.active p { color:#37b7e4; }
			#navMaintain:hover p, #navMaintain.active p { color:#2d8ec4; }
			#nav4G:hover p, #nav4G.active p { color:#2d8ec4; }
			
			
			
			/*SUBMEMU*/
			#navbar ul li div.submenu { display:block; width:950px; height:30px; padding:5px 15px; position:absolute; top:47px; left:0; display:none; z-index:107; 
				background:white; border-top:1px solid #ccc; box-shadow:0 2px 2px rgba(0,0,0,0.5);
				border:1px solid #999 \9; box-shadow:0 1px 1px rgba(0,0,0,0.3) \9;
				
				border-radius:0 0 6px 6px; 
				behavior:url(ie-css3.htc);
				behavior:url(js/PIE-1.0.0/PIE.htc);
				}
				#submenubox { z-index:100; postion:relative; top:0; left:0; display:block; }
				#submenubox div.submenu { display:block; width:950px; height:30px; padding:5px 15px; position:absolute; top:108px;  
					background:white; border:1px solid #ccc; box-shadow:0 1px 1px rgba(0,0,0,0.6) !important; z-index:150;
					border:1px solid #999 \9; box-shadow:0 1px 1px rgba(0,0,0,0.1) \9; *left:0px;
					border-radius:0 0 6px 6px; 
					behavior:url(ie-css3.htc);
					behavior:url(js/PIE-1.0.0/PIE.htc);
					}
			#navbar ul li div.active, #submenubox div.active { display:block !important; } 
			#navbar ul li div.submenu p, #submenubox div.submenu p { display:block; float:left; color:#ced0d5; }
			#navbar ul li div.submenu a, #submenubox div.submenu a { display:inline-block; float:left; color:#222; 
				font-size:13px; line-height:13px; height:13px; 
				margin:8px auto; padding:0 12px; border-right:1px solid #ced0d5; text-decoration:none; } 
			#navbar ul li div.submenu a:last-child, #submenubox div.submenu a:last-child { border-right:0px; } 
			
			
			/*
			#navbar ul li div.submenu1 { left:0; }
			#navbar ul li div.submenu2 { left:-115px; }
			#navbar ul li div.submenu3 { left:-250px; }
			#navbar ul li div.submenu4 { left:-370px; }
			#navbar ul li div.submenu5 { left:-470px; }
			#navbar ul li div.submenu6 { left:-605px; }
			#navbar ul li div.submenu7 { left:-705px; }
			*/
			#navbar ul li div.submenu1 a:hover,
			#navbar ul li div.submenu1 a.activeSelected, 
			#navbar ul li div.submenu1 a.active,
			#submenubox div.submenu1 a:hover,
			#submenubox div.submenu1 a.activeSelected, 
			#submenubox div.submenu1 a.active { color:#da3641; }
			#navbar ul li div.submenu2 a:hover, 
			#navbar ul li div.submenu2 a.activeSelected,
			#navbar ul li div.submenu2 a.active,
			#submenubox div.submenu2 a:hover,
			#submenubox div.submenu2 a.activeSelected, 
			#submenubox div.submenu2 a.active { color:#eb5700; }
			#navbar ul li div.submenu3 a:hover, 
			#navbar ul li div.submenu3 a.activeSelected,
			#navbar ul li div.submenu3 a.active,
			#submenubox div.submenu3 a:hover,
			#submenubox div.submenu3 a.activeSelected, 
			#submenubox div.submenu3 a.active { color:#5b9900; }
			#navbar ul li div.submenu4 a:hover, 
			#navbar ul li div.submenu4 a.activeSelected,
			#navbar ul li div.submenu4 a.active,
			#submenubox div.submenu4 a:hover,
			#submenubox div.submenu4 a.activeSelected, 
			#submenubox div.submenu4 a.active { color:#447719; }
			#navbar ul li div.submenu5 a:hover, 
			#navbar ul li div.submenu5 a.activeSelected,
			#navbar ul li div.submenu5 a.active,
			#submenubox div.submenu5 a:hover,
			#submenubox div.submenu5 a.activeSelected, 
			#submenubox div.submenu5 a.active { color:#e5002d; /*f11722*/ }
			#navbar ul li div.submenu6 a:hover, 
			#navbar ul li div.submenu6 a.activeSelected,
			#navbar ul li div.submenu6 a.active,
			#submenubox div.submenu6 a:hover,
			#submenubox div.submenu6 a.activeSelected, 
			#submenubox div.submenu6 a.active { color:#37b7e4; }
			#navbar ul li div.submenu7 a:hover,
			#navbar ul li div.submenu7 a.activeSelected,
			#navbar ul li div.submenu7 a.active,
			#submenubox div.submenu7 a:hover,
			#submenubox div.submenu7 a.activeSelected, 
			#submenubox div.submenu7 a.active { color:#2d8ec4; }
			#navbar ul li div.submenu8 a:hover,
			#navbar ul li div.submenu8 a.activeSelected,
			#navbar ul li div.submenu8 a.active,
			#submenubox div.submenu8 a:hover,
			#submenubox div.submenu8 a.activeSelected, 
			#submenubox div.submenu8 a.active { color:#00a0e9; }
			
			
			#navStore div.submenuLayer div.g1 a { color:#da3641; }
			#navMobile div.submenuLayer div.g1 a { color:#eb5700; }
			#navService div.submenuLayer div.g1 a { color:#5b9900; }
			#navPromo div.submenuLayer div.g1 a { color:#447719; }
			#navApp div.submenuLayer div.g1 a { color:#e5002d; /*f11722*/ }
			#navTravel div.submenuLayer div.g1 a { color:#37b7e4; }
			#navMaintain div.submenuLayer div.g1 a { color:#2d8ec4; }
			#nav4G div.submenuLayer div.g1 a { color:#00a0e9; }
			
			.submenuLayer div.g1 { overflow:visible !important; }
			.submenuLayer div.g1 div { overflow:visible !important; }
			.submenuLayer div.g1 a { overflow:visible !important; 
			
					/*
					background:radial-gradient(circle, #fff 29%, transparent 30%); background-size:10px 10px !important; 
					background-repeat:no-repeat !important; background-position:90% 50% !important;  
					*/
					cursor:pointer; 
					-webkit-transition:all .15s; -moz-transition:all .15s; -ms-transition:all .15s; -o-transition:all .15s; transition:all .15s; }
			
			
			#navStore div.submenuLayer div.g1 a,
			#navMobile div.submenuLayer div.g1 a,
			#navService div.submenuLayer div.g1 a,
			#navPromo div.submenuLayer div.g1 a,
			#navApp div.submenuLayer div.g1 a,
			#navTravel div.submenuLayer div.g1 a,
			#navMaintain div.submenuLayer div.g1 a,
			#nav4G div.submenuLayer div.g1 a,
			div.submenuLayer div.g1 div a { display:block; padding-left:15px; 
					/*
					background:radial-gradient(circle, rgba(255,255,255,.5) 49%, transparent 50%);
					background-position:0 50%; background-size:7px 7px; background-repeat:no-repeat;
					*/
					}
			
			
			
			
			#navStore div.submenuLayer div.g1 a:hover,
			#navMobile div.submenuLayer div.g1 a:hover,
			#navService div.submenuLayer div.g1 a:hover,
			#navPromo div.submenuLayer div.g1 a:hover,
			#navApp div.submenuLayer div.g1 a:hover,
			#navTravel div.submenuLayer div.g1 a:hover,
			#navMaintain div.submenuLayer div.g1 a:hover,
			#nav4G div.submenuLayer div.g1 a:hover,
			div.submenuLayer div.g1 div a:hover  { display-x:inline-block; width-x:auto; 
					
					background-color:rgba(50,52,54,.04);
					
					background-image:url(../images/icon-dot-link.png);
					background-repeat:no-repeat;
					background-position:0 2px;
					background-size-xx:250px;
					
					/*
					background:radial-gradient(circle, rgba(0,0,0,.7) 49%, transparent 50%);
					background-position:0 50%; background-size:7px 7px; background-repeat:no-repeat;
					*/
					}
			
			
			.colorSetStore div.g1 a { color:#da3641; }
			.colorSetMobile div.g1 a { color:#eb5700; }
			.colorSetService div.g1 a { color:#5b9900; }
			.colorSetPromo div.g1 a { color:#447719; }
			.colorSetApp div.g1 a { color:#e5002d; /*f11722*/ }
			.colorSetTravel div.g1 a { color:#37b7e4; }
			.colorSetMaintain div.g1 a { color:#2d8ec4; }
			.colorSet4G div.g1 a { color:#00a0e9; }

			
			
			
			/*2ND LAYER SUBMENU*/
			div.submenuLayer {
				display:none; width:980px; height:150px; padding:0; position:absolute; top:91px; left:-115px;
				opacity:0; border-top:1px solid #ccc; z-index:937;
				/*border-radius:0 0 6px 6px; background:white; border-top:1px solid #ccc; box-shadow:0 2px 2px rgba(0,0,0,0.5);*/
			}
			div.submenuLayer div.arrowtop { display:block; width:15px; height:11px; background:url(../images/icon-global.png) no-repeat -150px 0px; 
				position:absolute; top:-8px; left:415px; }
			div.submenuLayer div.con { margin:20px; padding:0px; display:table; width:92%; }
			
			div.submenuLayer div.g1, 
			div.submenuLayer div.g2 { text-align:left; padding:0 !important; height:100% !important; }
			
			div.submenuLayer div.g1 { display:table; }
			div.submenuLayer div.g1 div { display:table-cell; width:auto;
				position:relative; margin:0 !important; padding:0 10px !important; 
				border-right:1px solid #eee; vertical-align:top; }
			div.submenuLayer div.g2 { display:table-cell; width:250px; border-left:1px solid #eee !important; /*position:absolute; top:20px; right:20px;*/ border:2px solid pink; }
			
			div.submenuLayer div.g1 div:last-child { border-right-color: white !important; }
				
				
				/*FOR SUBMENULAYER"S LAST BLOCK PROBLEM*/
				div.submenuLayer div.g1 div.bannerblock { width:240px; border-right:none !important; position:inherit; }
				div.submenuLayer div.g1 div.bannerblock img { display:block; float:left; }
				div.submenuLayer div.g1 div.bannerblock div { display:block; width:120px; position:relative; padding:10px 0 0 0 !important; margin:0; padding-top:10px; float:right; border-right:none !important; }
				/*FOR SUBMENULAYER"S LAST BLOCK PROBLEM END*/
			
			
			div.submenuLayer div.g1 div h6, div.submenuLayer div.g2 h6,
			div.submenuLayer div.g1 div a { display:block; position:relative !important; text-decoration:none; }
			div.submenuLayer div.g1 div h6 { color:#333333; font-size:15px !important; line-height:20px; margin:0 !important; margin-bottom:16px !important; padding:0 !important; }
			div.submenuLayer div.g1 div a { font-size:13px; line-height:23px; }
	
			div.submenuLayer div.g2 div.con { position:relative; margin:0; padding:0; display:block; }
			div.submenuLayer div.g1 div h6,
			div.submenuLayer div.g2 h6 { color:#333333; font-size:13px; line-height:18px; margin:15px 0; padding:0; }
			div.submenuLayer div.g1 div a.btn,
			div.submenuLayer div.g2 a { border-radius:5px; border:1px solid #ccc; background-color:#eee; text-align:center;
				background: -moz-linear-gradient(top, #fff 0%, #eee 100%); /* FF3.6+ */
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#eee)); /* Chrome,Safari4+ */
				background: -webkit-linear-gradient(top, #fff 0%,#eee 100%); /* Chrome10+,Safari5.1+ */
				background: -o-linear-gradient(top, #fff 0%,#eee 100%); /* Opera 11.10+ */
				background: -ms-linear-gradient(top, #fff 0%,#eee 100%); /* IE10+ */
				background: linear-gradient(to bottom, #fff 0%,#eee 100%); /* W3C */
				font-size:13px; padding:7px 10px; color:#da3245;
				text-shadow:-1px -1px 0 rgba(150,150,150,0.3);
				box-shadow:0 1px 2px rgba(50,50,50,0.5);
				text-decoration:none; 
				}
				
				div.submenuLayer div.g1 div a:hover { text-decoration:underline; }
				div.submenuLayer div.g1 div a.btn:hover,
				div.submenuLayer div.g2 a:hover { border:1px solid #999; text-decoration:none; }
				
			div.submenuLayer div.g1 div img.thumbnail-product { float:left; }
	
	
	
		
		
	#navbar div.searchbox { border-radius:50px; width:170px; height:28px; border:1px solid #f55c00; background:white;
		box-shadow:inset 0 1px 3px rgba(0,0,0,0.3); border:2px solid red; 
		position:absolute; top:8px; right:0; transition:all 0.5s; }
		#navbar div.searchbox:focus { width:250px; }
	#navbar div.searchbox input { border:0; height:100%; background:none; width:85%; border:2px solid red; }
	#navbar div.searchbox img.searchicon { position:absolute; top:4px; right:8px; cursor:pointer; }
	
		
	
	/* FLOW MENU ON LEFT */
	
	#menu_float { display:block; z-index:80; position:fixed; top:61px; width:80px; border-radius:0 0 5px 0; box-shadow:0 1px 2px rgba(0,0,0,0.5); left:0; }
	#menu_float.shorten { top:38px; }
	#menu_float ul { margin:0; padding:0; display:block; position:relative; list-style-position:outside; /**margin-left:-20px;*/ }
	#menu_float ul li { list-style:none; display:inline-block; width:80px; cursor:default; background-color:#303a4a; border-top:1px solid #3e4455; border-bottom:1px solid #222a37; text-align:center; 
		position:relative; margin:0; padding:8px 0px; *vertical-align:top; }
	#menu_float ul li.asbtn { cursor:pointer !important; }
	#menu_float ul li.asbtn:hover { background-color:#27303d; }
	/*#menu_float ul li a { display:block; position:absolute; top:0; left:0; width:80px; height:70px; cursor:pointer; z-index:50; }*/
	#menu_float ul li div.toplayer { display:block; behavior:url(ie-css3.htc); float:left;
		position:absolute; top:0; left:0; width:80px; height:70px; cursor:pointer; z-index:150 !important; }
	
	
	#menu_float ul li p { color:white; text-shadow:0 1px 0 rgba(0,0,0,0.4); font-size:13px; line-height:13px; margin:0; margin-top:5px; padding:0; display:block; }
	#menu_float ul li div.icon-promo,
	#menu_float ul li div.icon-bill,
	#menu_float ul li div.icon-shop,
	#menu_float ul li div.icon-fanpage { *position:relative; *left:-10px; }
	#menu_float ul li div.icon-vip { width:40px; height:40px; margin-left:20px; display:block; background:url(../images/iconfm_login.png) no-repeat; z-index:2; }
	#menu_float ul li div.icon-promo { width:40px; height:40px; margin-left:20px; display:block; background:url(../images/icon-global.png) 0px 0px; z-index:2; }
	#menu_float ul li div.icon-bill { width:40px; height:40px; margin-left:20px; display:block; background:url(../images/icon-global.png) 0px -50px; z-index:2; }
	#menu_float ul li div.icon-shop { width:40px; height:40px; margin-left:20px; display:block; background:url(../images/icon-global.png) 0px -100px; z-index:2; }
	#menu_float ul li div.icon-fanpage { width:40px; height:40px; margin-left:20px; display:block; background:url(../images/icon-global.png) 0px -150px; z-index:2; }
	#menu_float ul li div.icon-reddot { margin-left:30px; display:block; position:absolute; top:7px; right:15px; 
		background-color:#e8042a; border-radius:30px; letter-spacing:-0.1em; padding:3px 4px;
		color:white; font-family:Arial, Helvetica, sans-serif; font-size:11px; line-height:12px; font-weight:bold;
		
		background-color:none \9; *width:21px; *height:21px; *padding:0px; *padding-top:2px;
		background:url(../images/icon-global.png) -50px 0px \9; /*#e8042a; */
		/*background:url(../images/icon-global.png) -50px 0px \9;*/
		behavior:url(ie-css3.htc);
		}
	
	#menu_float .navTop { background:url(../images/icon-global.png) no-repeat 0px -300px; height:46px; padding:0 !important; margin:0 !important; text-indent:-999px; }
	#menu_float .active { background:url(../images/icon-global.png) no-repeat -100px -300px !important; }
	#menu_float .navEnd { background:url(../images/icon-global.png) no-repeat 0px -350px #17202d; height:26px; border-radius:0 0 5px 0; margin:0 !important; padding:0 !important; text-indent:-999px; }
	#menu_float #fn-login {
		background: -moz-linear-gradient(top, #515d78 0%, #384254 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#515d78), color-stop(100%,#384254)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #515d78 0%,#384254 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #515d78 0%,#384254 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #515d78 0%,#384254 100%); /* IE10+ */
		background: linear-gradient(to bottom, #515d78 0%,#384254 100%); /* W3C */
		
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#515d78', endColorstr='#384254');
		background-image: -ms-linear-gradient(top, #515d78 0%, #384254 100%);
		}
		/*#menu_float #fn-login:hover { background-color:#27303d !important; }*/
	#menu_float #fn-vip {
		background: -moz-linear-gradient(top, #515d78 0%, #384254 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#515d78), color-stop(100%,#384254)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #515d78 0%,#384254 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #515d78 0%,#384254 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #515d78 0%,#384254 100%); /* IE10+ */
		background: linear-gradient(to bottom, #515d78 0%,#384254 100%); /* W3C */
		
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#515d78', endColorstr='#384254');
		background-image: -ms-linear-gradient(top, #515d78 0%, #384254 100%);
		}
		/*#menu_float #fn-vip:hover { background-color:#27303d !important; }*/
		#menu_float #fn-vip img.userimg { width:40px; height:40px; }
		#menu_float #fn-vip img.icon { width:40px; height:40px; }
	#menu_float #fn-promo {}
	#menu_float #fn-bill {}
	#menu_float #fn-shop {}
	#menu_float #fn-fanpage {}
	
	.topbar div .btn-member { position:relative !important; float:right !important; top:auto !important; left:auto !important; width:auto !important; height:auto !important; }
	.topbar div .btn-logout { position:relative !important; float:right !important; top:auto !important; left:auto !important; width:auto !important; height:auto !important; }
							
							
							
							
							#menu_float div#tabletIconSlide { 
								background:url(../images/icon-global.png) no-repeat -99px -350px; 
								display:block; cursor:pointer;
								width:42px; height:47px; 
								position:absolute; 
								top:0; left:0; }
							#menu_float div#tabletIconUL { 
								background:url(../images/icon-global.png) no-repeat -143px -350px; 
								display:block; cursor:pointer;
								width:42px; height:47px; 
								position:absolute; 
								top:0; left:42px; }
							#menu_float div#tabletarrowtop { 
								background:url(../images/icon-global.png) no-repeat -150px 0;
								display:block;
								width:15px; height:11px; 
								position:absolute; 
								top:45px; left:53px; }
								
	
	#menu_float div.iconInstruction { width:100px; height:40px; display:block; position:absolute; top:-40px; left:1px; 
		cursor:pointer;
		background:url(../images/icon-global.png) no-repeat 10px -400px; }
	
	
	#flowCon { position:absolute; top:10px; left:80px; z-index:881; padding-left:12px; padding-left:11px \9; display:none; opacity:0; -moz-opacity:0; -khtml-opacity:0; filter:alpha(opacity=0); }
	#flowCon div.arrow { display:block; width:12px; height:25px; background:url(../images/icon-global.png) no-repeat -150px -50px; position:absolute; top:30px; left:0;
		background:url(../images/icon-global.png) no-repeat -100px -100px \9;  }
		
		.navCon { width:250px; padding:10px; background-color:white; border-radius:6px; border-bottom:2px solid #eee; 
			border:1px solid #999 \9; /*IE8 背景變紅色*/
			*border:1px solid #999; _background:1px solid #999;
			box-shadow:0 1px 5px rgba(0,0,0,0.7); text-align:left; }
		.navCon h3 { display:block; font-size:16px; font-weight:bold; color:#458bc1; line-height:18px; margin-bottom:3px; }
		.navCon div.topbar { display:block; border-bottom:1px solid #ced0d5; padding:0; margin-bottom:5px; font-size:12px; position:relative !important; }
		.navCon div.topbar div { display:block; position:absolute !important; top:0 !important; right:0 !important; }
		.navCon div.userset { display:block; min-height:75px; position:relative; }
		.navCon div.menubox { display:table; border-radius:5px; border:1px solid #999 \9; box-shadow:0 1px 5px rgba(0,0,0,0.5); margin:0; position:relative; }
		.navCon div.menubox ul { list-style:none; font-size:12px; display:table; width:245px !important; height:28px; border-bottom:1px solid #eee;  }
		.navCon div.menubox ul:last-child { border-bottom:none !important;  }
		.navCon div.menubox ul li { display:table-cell; height:100% !important;
			margin:0 !important; padding:5px !important; 
			padding-left:15px !important; cursor:pointer;
			border:none !important; 
			background:url(../images/icon-global.png) no-repeat -95px -145px !important; text-align:left !important;
			*height:10px; *padding:0; *float:left;
			} 
			.navCon div.menubox ul li:hover { color:#ed8500; }  
		.navCon img.userpic { /*float:left;*/ display:block; position:absolute; top:0; left:0; }
		.navCon div.changepic { position:absolute; top:50px; left:0; font-size:12px; line-height:12px; padding:4px 0; color:white; cursor:pointer; 
			width:70px; height:auto; background:rgba(0,0,0,0.4); text-align:center; display:inline; }
		.navCon h2 { font-size:18px; line-height:24px; margin:0; padding:0; } 
		.navCon p { font-size:12px; line-height:16px; margin:0; padding:0; }
		.navCon p.usercon { color:#333 !important; line-height:18px !important; text-shadow:none !important; margin-left:80px !important; margin-top:7px !important; font-size:13px !important; width:160px; text-align:left !important; text-decoration:none !important; } 
		.navCon a { font-size:12px; display:block; margin:0; padding:0; float:left; margin-left:8px; } 
		.navCon a.btn-logout {}
		
		.navCon div.conset { display:block; position:relative; }
		.navCon div.conset div.normal { display:block; font-size:13px; font-weight:normal; padding:10px 0; cursor:pointer; 
			text-shadow:none !important; color:#333 !important; 
			background:none !important; cursor:default !important;
			}
		.navCon div.conset div { display:block; font-size:13px; font-weight:normal; height:18px; padding:10px 0; cursor:pointer; 
			border-bottom:1px solid #eee; background-color:#fff; position:relative;
			/*background:url(../images/icon-global.png) no-repeat 55px -200px; }*/
			background:url(../images/icon-floatarrow.png) no-repeat 235px -3px; }
			
			.navCon div.conset div:hover { /*background-color:#eee;*/ background-position:235px -103px; } 
		
			/*	
			.navCon div.conset div.2line { display:block; font-size:13px; font-weight:normal; height:18px; padding:10px 0; cursor:pointer; 
				border-bottom:1px solid #eee; background-color:#fff; position:relative;
				background:url(../images/icon-floatarrow.png) no-repeat 0px 0px !important; }
			.navCon div.conset div.2line:hover { background-position:url(../images/icon-floatarrow.png) no-repeat -250px 0px !important; }
			*/
		
		
		.navCon div.conset div:last-child { border-bottom:none !important; }
		.navCon div.conset div.blank { background:none !important; height:24px; }
		.navCon div.conset div span, .navCon div.conset div b { color:#f35600; }
		.navCon div.conset div a { display:block; /*
			background: #fdfdfd;
			background: -moz-linear-gradient(top, #fdfdfd 0%, #f4f4f4 50%, #ededed 51%, #e4e4e4 100%);
			background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#fdfdfd),color-stop(50%,#f4f4f4),color-stop(51%,#ededed),color-stop(100%,#e4e4e4));
			background: -webkit-linear-gradient(top, #fdfdfd 0%,#f4f4f4 50%,#ededed 51%,#e4e4e4 100%);
			background: -o-linear-gradient(top, #fdfdfd 0%,#f4f4f4 50%,#ededed 51%,#e4e4e4 100%);
			background: -ms-linear-gradient(top, #fdfdfd 0%,#f4f4f4 50%,#ededed 51%,#e4e4e4 100%);
			background: linear-gradient(to bottom, #fdfdfd 0%,#f4f4f4 50%,#ededed 51%,#e4e4e4 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#e4e4e4',GradientType=0 );*/
			margin:0; margin-right:4px; margin-bottom:15px !important; padding:5px 5px; border-radius:5px; border:1px solid #aaa; border-bottom:1px solid #9a9a9a; box-shadow:0 1px 2px rgba(0,0,0,0.4); }
		.navCon div.conset div a.text { display:block; background:none !important; height:auto !important; 
			margin:0; padding:0px !important; font-size:13px !important; color:#333333 !important;
			border-radius:0; border:0  !important; box-shadow:none !important; width:100% !important; }
		.navCon div.conset div a.btn-billcard {}
		.navCon div.conset div a.btn-creditcard {}
		.navCon div.conset div a.btn-atmcard {}
		
		
		
		
		#fc-vip,
		#fc-promo,
		#fc-bill,
		#fc-shop,
		#fc-fanpage {}
	
		.hidden { display:none; }
		
		p.fbtxt { color:#333 !important; text-shadow:none !important; margin:0 !important; padding:0 !important; 
			position:absolute; top:11px; left:0; 
			*float:left; border:0px solid red; }
	
	
	/* menu_float INNTER */
	#menu_slide { display:block; width:250px; height:100%; position:fixed; top:0; left:-250px; z-index:1000; background-color:#32384a; overflow-y:scroll; }
	#menu_slide div { text-align:left; color:white; font-family:Arial; display:block; }
	#menu_slide div.header { font-size:15px; padding:12px; color:white; text-shadow:1px 1px 0 rgba(0,0,0,0.3); 
		background: #515975 \9; /* Old browsers */
		background: -moz-linear-gradient(top, #515975 0%, #3a4155 100%); /* FF3.6+ */
		background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#515975),color-stop(100%,#3a4155)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #515975 0%,#3a4155 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #515975 0%,#3a4155 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #515975 0%,#3a4155 100%); /* IE10+ */
		background: linear-gradient(to bottom, #515975 0%,#3a4155 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515975', endColorstr='#3a4155',GradientType=0 ); /* IE6-9 */
		border-bottom:1px solid #242937;
		background:url(../images/slidemenu_headerbg.jpg) repeat-x top left \9;
		}
	#menu_slide div.header a.btnDark { display:inline-block; float:right; background:#13171a; border-radius:5px; color:white; font-family:Arial; font-size:12px; padding:3px 5px; } 
	
	
	#menu_slide div.conbox { font-size:13px; padding:12px; color:white; text-shadow:1px 1px 0 rgba(0,0,0,0.2); 
		background-color: #32384a; /* Old browsers */
		border-top:1px solid #3e4455;
		border-bottom:1px solid #242937;
		}
	#menu_slide div.conbox li,
	#menu_slide div.conbox p,
	#menu_slide div.conbox a,
	#menu_slide div.conbox h4,
	#menu_slide div.conbox span { color:#fff; margin:0; font-family:微軟正黑體, Arial; font-size:13px; font-style:normal; line-height:20px; }
	#menu_slide div.conbox span.yellow { color:#fef300; } 
	#menu_slide div.conbox span.gray { color:#9b9da1; } 
	#menu_slide div.conbox a.gray { color:#9b9da1; text-decoration:none; } 
	#menu_slide div.conbox h4 { display:inline-block; border-radius:5px; box-shadow:inset 0 2px 2px rgba(0,0,0,.5); text-shadow:1px 1px 0 rgba(0,0,0,0.6); padding:5px 15px; 
		font-weight:bold; text-align:center; width:100px; margin-bottom:7px; }
	#menu_slide div.conbox h4.red { background-color:#db3145; }
	#menu_slide div.conbox h4.green { background-color:#5e9f00; }
	#menu_slide div.conbox h4.orange { background-color:#ea5700; }
	#menu_slide div.conbox h4.darkred { background-color:#e50427; }
	#menu_slide div.conbox h4.darkgreen { background-color:#447719; }
	#menu_slide div.conbox h4.blue { background-color:#54b5e7; }
	#menu_slide div.conbox h4.darkblue { background-color:#4589c3; }
	#menu_slide div.conbox h4.blue4g { background-color:#00a0e9; }
	#menu_slide div.conbox p.group a { font-size:11px; text-decoration:none; }
	#menu_slide div.conbox ul { list-style:disc; margin:0; padding:0; padding-left:20px; } 
	#menu_slide div.conbox ul li { list-style:disc; } 
	#menu_slide div.conbox a.btn { display:inline-block; border:1px solid #cdcfd5; border-radius:5px;
		background: #fefefe \9;
		background: -moz-linear-gradient(top, #fefefe 0%, #eee 100%); /* FF3.6+ */
		background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#eee)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #fefefe 0%,#eee 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #fefefe 0%,#eee 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #fefefe 0%,#eee 100%); /* IE10+ */
		background: linear-gradient(to bottom, #fefefe 0%,#eee 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
		padding:8px 10px; margin:3px 0; color:#333; text-shadow:1px 1px 0 white; }
	
	#menu_slide div.conbox a:hover { text-decoration:underline !important; }
	#menu_slide a:hover { text-decoration:underline !important; }
	
			
							div#tabletCloseSlideIcon { 
								background: url(../images/icon-global.png) no-repeat -120px -304px;
								display:none; cursor:pointer; background-color:#32384a; border-radius: 0 0 6px 0;
								width:42px; height:40px; z-index:1001; 
								position:absolute; 
								top:0; left:0; }
	
	
	
	/* PRIMARY CONTENT */
	
	#containerBox { position:relative; display:table; z-index:10; width:100%; max-width:980px; margin-left:auto !important; margin-right:auto !important; padding-top:120px; padding: 0px; margin:0px;padding-top:120px; /*text-align:center;*/ }
	#containerBox.onsub { padding-top:155px !important; }
	#containerBoxSingle { position:relative; display:table; z-index:10; width:770px; margin-left:auto; margin-right:auto; text-align:center; }
	#mainbox { width:764px; display:table-cell; float:left; }
	#mainboxFull { width:100%; display:table-cell; float:left; }
	#mainboxFullSmall { width:90%; margin:20px 5% 30px 5%; display:block; }
	#mainboxright { width:764px; display:table-cell; float:right; }
	#rightbox { width:200px; display:table-cell; float:right; }
	#leftbox { width:200px; display:table-cell; float:left; }
	#mainbox, #mainboxright, #rightbox, #leftbox { border:0; }
	
	.boxBasic { display:block; background-color:white; text-align:left;  position:relative; overflow:hidden;
		border-bottom:2px solid #f6f6f6; margin-bottom:12px;
		border-radius:6px; box-shadow:0 1px 4px rgba(0,0,0,0.5);
		
		border:1px solid #ccc\9;
		box-shadow:none\9;
		behavior:url(js/PIE-1.0.0/PIE.htc);
		}
	.boxBasic div.header { display:block; border-radius:6px 6px 0 0; position:relative;
		background:#fdfdfd;
		background:-moz-linear-gradient(top, #fdfdfd 0%, #f4f4f4 50%, #ededed 51%, #e4e4e4 100%); /* FF3.6+ */
		background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fdfdfd),color-stop(50%,#f4f4f4),color-stop(51%,#ededed),color-stop(100%,#e4e4e4)); /* Chrome,Safari4+ */
		background:-webkit-linear-gradient(top, #fdfdfd 0%,#f4f4f4 50%,#ededed 51%,#e4e4e4 100%); /* Chrome10+,Safari5.1+ */
		background:-o-linear-gradient(top, #fdfdfd 0%,#f4f4f4 50%,#ededed 51%,#e4e4e4 100%); /* Opera 11.10+ */
		background:-ms-linear-gradient(top, #fdfdfd 0%,#f4f4f4 50%,#ededed 51%,#e4e4e4 100%); /* IE10+ */
		background:linear-gradient(to bottom, #fdfdfd 0%,#f4f4f4 50%,#ededed 51%,#e4e4e4 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#e4e4e4',GradientType=0 ); /* IE6-9 */
		padding:0; padding-top:10px; padding-left:20px; border-bottom:1px solid #cacaca;
		
		-webkit-border-radius:6px 6px 0 0;
		-moz-border-radius:6px 6px 0 0;
		behavior:url(js/PIE-1.0.0/PIE.htc);
		}
	.boxBasic div.header a.headerlink { display:block; background:url(../images/icon-global.png) no-repeat -100px -153px; 
		cursor:pointer;
		position:absolute; top:15px; right:18px; font-size:12px; padding-left:12px; }
	
	.boxBasic div.headerNoCorner { border-radius:0; }
	
	.boxBasic div.header select { display:block; position:absolute; top:9px; right:10px; font-size:12px; }
	.boxBasic div.headerSingle { padding-top:12px; padding-left:30px; }
		
	.boxBasic h2 { display:block; font-size:18px; color:#111; text-shadow:1px 1px 0 white; }
	.boxBasic h3 { display:block; font-size:14px; color:#111; text-shadow:1px 1px 0 white; margin-left:-5px; }
	.boxBasic h2.title_myfone { color-x:#c81613; vertical-align:middle; }
	.boxBasic h2.title_myfone img { display:inline-block; width-x:24px; height-x:24px; margin:-2px 10px -2px 0 !important; vertical-align:middle; }
	
	
	.boxBasicFlatBottom { border-radius:6px 6px 0 0 !important; }
	
	.boxBasicHalf1 { float:left; width:376px; }
	.boxBasicHalf2 { float:right; width:376px; }
	.boxBasicBanner { position:relative; height:90px; overflow:hidden; 
		border-radius:6px; 
		box-shadow:0px 1px 4px rgba(0,0,0,0.3);
		behavior:url(js/PIE-1.0.0/PIE.htc);
		}
	
	.boxServiceBanner { display:block; }
	.boxServiceBanner img { margin:11px !important; display:block; width:160px; height:auto; }
	.boxServiceBanner p { display:block; font-size:13px; margin:5px auto 8px 11px; }
	
	table.quaterboxtable { width:100%; }
	table.quaterboxtable td { width:25.3%; position:relative; height:100%; vertical-align:top; }
	table.quaterboxtable td:last-child { width:24%; }
	table.quaterboxtable .boxBasic div.header a.headerlink { top:8px; right:12px; background-position:-100px -148px;}
	div.quaterboxtable { display:block; width:100%; }
	.boxBasicQuater { display:inline-block; margin-right:10px; width:183px; height:auto; height:100%; }
	.boxBasicQuater:last-child { margin-right:0; }
	.boxBasicQuater .boxService { height:auto; }
	.boxBasicQuater ul { padding:12px 0 15px 32px !important; }
	
	
	
	
	
	


	/* column grid */
	.g1,.g2,.g3,.g4,.g5 {position: relative; margin-left:1%; margin-right:1%}
	/* 1 column grid */
	.g1,.g2,.g3,.g4,.g5 {width:100.0%; display:table-cell; float:left; border-width:0px !important; } 
	.g1 { border:3px solid red; padding-left:4px; z-index:11; }
	.g2 { border:3px solid orange; }
	.g3 { border:3px solid yellow; }
	.g4 { border:3px solid green; margin-right:2%; margin-top:0; }
	.g5 { border:3px solid blue; margin-left:2px; margin-right:1.2%; padding-left:3px; }
	.g4 img { margin-bottom:20px !important; margin-top:10px; width:99%; height:auto;  }
	.g5 img { margin-bottom:20px !important; margin-top:10px; width:95%; height:auto;  }
	

	.basicInput { color:#333; border-radius:4px; border:1px solid #ccc; padding:6px 4px; margin:1px; width:auto; }
	.inputGray { color:#aaa; }
	
	
	/* SPECIAL ADD FOR OLD TWN SIDE PAGES */
	body { background:none !important; }
	#wrap { margin-top:110px !important; }
	.threeColumns_fttx #keyvisual ul.tab {z-index:29 !important;}
	.twoColumnText table {margin-bottom:0 !important;}
	#blockmenu .right .textblock { padding:5px !important; }
	.bottombannerbox { background:#f8f8fa; text-align:center; padding:18px 30px; border-top:1px solid #ccc; }
	.bottombannerbox img { border:1px solid rgba(0,0,0,0.1); }
	
	

/*==========================================================================================*/

	/* MOBILE PORTRAIT, MOBILE LANDSCAPE */
	@media -ms-viewport, screen and (min-width: 300px) and (max-width: 580px) {
		/*
		.g1 {width:97.5%; padding-top:10px; position:relative; }
		.g2 {width:98.1%; }
		.g3 {width:98%; }
		.g4 {width:98%; }
		.g5 {width:98%; }
		#content {width:99.75%}
		*/
	}
	/* SMALL TABLET */
	/*
	@media -ms-viewport, screen and (min-width: 580px) and (max-width: 1000px) {
		#header, #navbar div.menu, div.submenuLayer, #containerBox { width:800px; }
		#header div#logo { margin-left:0px; }
		#header .framemenu2 { top:-999px; }
		#menu_float { top:61px; width:30px; }
		#menu_float div.iconInstruction { display:none; }
	}
	*/
	/* DESKTOP */
	@media -ms-viewport, screen and (min-width: 1020px) { 
		#containerBox { width:100%;padding-top:120px; }
		#header, #navbar div.menu, div.submenuLayer { width:980px; }
		#header div#logo { margin-left:-35px; }
		#header .framemenu2 { top:11px; }
		#menu_float { top:61px; width:80px; }
		#menu_float div.iconInstruction { display:block; }
	}
	
	


	#sitemapBox { margin:20px 20px 20px 35px; }
	#sitemapBox h3 { font-size:16px; font-family:微軟正黑體, Arial; font-weight:100; margin:4px; color:#333; }
	#sitemapBox ul { display:inline-block; width:23%; margin-right:1.2%; height:auto; vertical-align:top; }
	#sitemapBox ul li {
					/*
					list-style:disc; 
					list-style-position:inside;
					*/
					margin:0; padding:0; height:22px; line-height:22px; overflow:hidden; text-shadow:1px 1px 0 white; padding-left:3px; }
	#sitemapBox ul li a { margin:0; padding:0; text-decoration:none; font-size:13px; font-family:微軟正黑體, Arial; font-weight:100; }
	#sitemapBox ul li a:hover { text-decoration:underline; }
	
	#sitemapBox ul li.title-orange { font-size:13px; color:#da3245; height:30px; list-style:none; padding-top:20px; border-bottom:3px solid #da3245; }
	#sitemapBox ul li.title-darkred { font-size:13px; color:#ea5700; height:30px; list-style:none; padding-top:20px; border-bottom:3px solid #ea5700; }
	#sitemapBox ul li.title-green { font-size:13px; color:#619d15; height:30px; list-style:none; padding-top:20px; border-bottom:3px solid #619d15; }
	#sitemapBox ul li.title-darkgreen { font-size:13px; color:#46761f; height:30px; list-style:none; padding-top:20px; border-bottom:3px solid #46761f; }
	#sitemapBox ul li.title-red { font-size:13px; color:#e5002d; height:30px; list-style:none; padding-top:20px; border-bottom:3px solid #e5002d; }
	#sitemapBox ul li.title-blue { font-size:13px; color:#55b7e5; height:30px; list-style:none; padding-top:20px; border-bottom:3px solid #55b7e5; }
	#sitemapBox ul li.title-darkblue { font-size:13px; color:#458bc1; height:30px; list-style:none; padding-top:20px; border-bottom:3px solid #458bc1; }
	#sitemapBox ul li.title-gray { font-size:13px; color:#535353; height:30px; list-style:none; padding-top:20px; border-bottom:3px solid #535353; }
	
	
	#sitemapBox ul li.title-orange,
	#sitemapBox ul li.title-darkred,
	#sitemapBox ul li.title-green,
	#sitemapBox ul li.title-darkgreen,
	#sitemapBox ul li.title-red,
	#sitemapBox ul li.title-blue,
	#sitemapBox ul li.title-darkblue,
	#sitemapBox ul li.title-gray { margin-bottom:10px; padding-left:3px; font-size:15px; border-bottom-width:1px; border-bottom-style:dotted; list-style:none; }
	
	#sitemapBox ul div.submenulevel3 { display:block; width:100%; margin:5px auto 10px 0; height:auto; vertical-align:top; }
	#sitemapBox ul div.submenulevel3 a { display:block; font-size:12px; font-family:微軟正黑體, Arial; font-weight:100; margin-left:18px; color:#666; padding:0; line-height:18px; }
	
	
	




/*RESPONSIVE ADDIN*/
@charset "UTF-8";

body { min-width:auto !important; }
#extramenu { position:absolute; top:47px; left:0px; height:40px; width:765px; display:none; }

	
	
	/*=====================================================================================*/
		/* SPECIAL FOR IE TABLET VERSION */
			/*html.onie body { background:pink !important; }*/
			html.onie #header, 
			html.onie #navbar .menu, 
			html.onie div.submenuLayer, 
			html.onie #containerBox { width:880px; }
				
			html.onie div.submenuLayer { width:900px; margin-left:-54px; }
			html.onie #navbar .menu { width:880px !important; margin-left:21px !important; }
			html.onie #navbar .menuNoSlide { margin-left:auto !important; }
			html.onie #navbar .menuNoSlide ul { margin-left:-10px; }
			
			html.onie #navbar ul li div.submenu { width:870px !important; margin-left:-54px; }
			html.onie #navbar ul { width:800px; margin-left:60px; }
			html.onie #navbar ul li div.submenu a { padding:0 7px; } 
			html.onie .submenuLayer {}
			
			html.onie #header div#logo { margin-left:-15px; }
			html.onie #header.shorten div#logo { margin-left:-50px; }
			html.onie #header .framemenu1 { left:160px; }
			html.onie #header.shorten .framemenu1 { left:110px; }
			html.onie #header .framemenu2 { top:10px; right:0px; width:210px; }
			html.onie #header.shorten .framemenu2 { top:-6px; right:0px; }
			html.onie #header .framemenu2 div.searchbox { width:90px; margin-left:-10px; }
			html.onie #header .framemenu2 a { padding:10px 5px; margin:1px; border:0px solid #aaa; background:none; }
			html.onie #submenubox div.submenu { width:870px; !important }
			html.onie #submenubox div.submenu a { padding:0px 7px; }
			html.onie #extramenu { position:absolute; top:47px; width:690px !important; }
			html.onie #mainboxFull { width:900px; }
			html.onie .boxPlain img,
			html.onie .boxWhite img { max-width:100%; }
			html.onie .boxServiceBanner img { width:143px; height:auto; }
			html.onie .boxBasicQuater { width:164px; }
	/*=====================================================================================*/
	
	
	



/* SMALL TABLET */
@media -ms-viewport, screen and (max-width: 1140px) {
	#containerBox { width:100%; padding-top:120px;}
	#header, #navbar .menu, div.submenuLayer { width:880px; }
	div.submenuLayer { width:900px; margin-left:-54px; }
	#navbar .menu { width:880px !important; margin-left:21px !important; }
	#navbar .menuNoSlide { margin-left:auto !important; }
	#navbar .menuNoSlide ul { margin-left:-10px; }
	
	#navbar ul li div.submenu { width:870px !important; margin-left:-54px; }
	#navbar ul { left:0px; width:800px; margin-left:60px; }
	#navbar ul li div.submenu a { padding:0 7px; } 
	.submenuLayer {}
	
	#header div#logo { margin-left:-15px; }
		#header.shorten div#logo { margin-left:-50px; }
	#header .framemenu1 { left:160px; }
		#header.shorten .framemenu1 { left:110px; }
	#header .framemenu2 { top:10px; right:-10px; width:210px; }
		#header.shorten .framemenu2 { top:-6px; right:0px; }
		#header .framemenu2 div.searchbox { width:90px; margin-left:-10px; }
		#header .framemenu2 a { padding:10px 5px; margin:1px; border:0px solid #aaa; background:none; }
	#submenubox div.submenu { width:870px; !important }
	#submenubox div.submenu a { padding:0px 7px; }
	
	
	#extramenu { position:absolute; top:47px; width:690px !important; }
	#mainboxFull { width:900px; }
	
	
	.boxPlain img,
	.boxWhite img { max-width:100%; }
	.boxServiceBanner img { width:143px; height:auto; }
	.boxBasicQuater { width:164px; }
	.boxBasicQuater ul li, .boxService ul li a  { line-height:20px !important; }
}
/* DESKTOP */
@media -ms-viewport, screen and (min-width: 1141px) { 
	#containerBox { width:100%; padding-top:120px;}
	#header, #navbar .menu, div.submenuLayer { width:980px; }
	div.submenuLayer { width:980px; margin-left:auto; }
	#navbar .menu { width:980px !important; margin-left:auto !important; }
	#navbar .menuNoSlide { margin-left:auto !important; }
	#navbar .menuNoSlide ul { margin-left:auto; }
	
	#navbar ul li div.submenu { width:950px; margin-left:auto; }
	#navbar ul { left:0px; width:800px; margin-left:0px; }
	#navbar ul li div.submenu a { padding:0 12px; } 
	#header div#logo { margin-left:-35px; }
	#header.shorten div#logo { margin-left:-20px; }
	#header .framemenu1 { left:150px; }
	#header .framemenu2 { top:11px; right:0px; width: 252px; }
	#header .framemenu2 div.searchbox { width:120px; margin-left:2px; }
	#header .framemenu2 > a,
	#header .framemeuu1 a.btnlang { border-radius:5px; padding:8px 8px; margin:1px; font-size:11px !important; border:1px solid #aaa; background:#f2f2f2; 
				background: -moz-linear-gradient(top, #f5f5f5 0%, #dedede 100%); /* FF3.6+ */
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#dedede)); /* Chrome,Safari4+ */
				background: -webkit-linear-gradient(top, #f5f5f5 0%,#dedede 100%); /* Chrome10+,Safari5.1+ */
				background: -o-linear-gradient(top, #f5f5f5 0%,#dedede 100%); /* Opera 11.10+ */
				background: -ms-linear-gradient(top, #f5f5f5 0%,#dedede 100%); /* IE10+ */
				background: linear-gradient(to bottom, #f5f5f5 0%,#dedede 100%); /* W3C */
				/*box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3);*/ float:left; }
	
	#submenubox div.submenu { width:950px; }
	#submenubox div.submenu a { padding:0px 12px; }
	
	
	#extramenu { position:absolute; top:47px; width:765px; }
	#mainboxFull { width:100%; }
	.boxServiceBanner img { width:160px; }
	.boxBasicQuater { width:183px; }
	.boxBasicQuater ul li, .boxService ul li a  { line-height:24px !important; }
}





/* SMALL TABLET */
	/*
	@media -ms-viewport, screen and (max-width: 1140px) {
		
		#frameHeader { top:40px; }
		#menu_float.shorten { top:0; }
		#menu_float ul { width:6000px !important; }
		
		#menu_float .navTop { background:url(../images/icon-global.png) no-repeat 60px top; background-position:-96px -352px; height:40px !important; width:50px; }
		#menu_float .active { background-position:-116px -304px !important; }
		#menu_float .navEnd { background-position:-20px -350px; display:none; }
		
		#menu_float ul li { float:left; width:110px; border:0; border-left:1px solid #3e4455; border-right:1px solid #222a37; height:25px; padding-top:7px; }
		#menu_float ul li .icon { width:20px; height:20px !important; position:absolute; top:8px; left:25px !important; margin-left:-20px !important; }
		#menu_float ul li p { color:white; margin:0; margin-top:2px; width:100%; padding:0; display:block; }
		
		#menu_float ul li div.icon-promo,
		#menu_float ul li div.icon-bill,
		#menu_float ul li div.icon-shop,
		#menu_float ul li div.icon-fanpage { margin:-3px 5px; width:30px; height:30px; background-size:150px 450px; float:left; }
		#menu_float ul li div.icon-promo { background-position:0px 0px; }
		#menu_float ul li div.icon-bill { background-position:0px -37.5px; }
		#menu_float ul li div.icon-shop { background-position:0px -75px; }
		#menu_float ul li div.icon-fanpage { background-position:0px -112.5px; }
		#menu_float ul li div.icon-reddot { margin-left:20px; }
		#menu_float #fn-vip { padding-left:13px; }
		#menu_float #fn-vip img.userimg { width:29px; height:29px; position:absolute; top:5px; left:5px;  }
		
		
				#menu_float { top:0; width:100%; height:40px; background:#303a4a; border-radius:0; }
				#menu_float div.iconInstruction { display:none; }
				
				
	}
	*/
	
	
		/*=====================================================================================*/
			/* SPECIAL FOR IE TABLET VERSION */
				html.onie #menu_float.shorten { top:38px; }
				html.onie #menu_float .navTop { background:url(../images/icon-global.png) no-repeat 60px top; background-position:-96px -352px; height:40px; width:50px; display:none; }
				html.onie #menu_float .active { background-position:-96px -352px !important; }
				html.onie #menu_float .navEnd { background-position:-20px -350px; display:none; }
				html.onie #menu_float ul { width:250px; height:340px; display:block; background:#fff; box-shadow:1px 2px 8px rgba(0,0,0,0.4); padding:5px; border-radius:5px; margin:52px 10px auto 8px; opacity:0; display:none; border:1px solid #ccc; }
				html.onie #menu_float ul li { float:left; width:80px; border:0; height:70px; background:none; display:inline-block; }
				html.onie #menu_float ul li .icon { width:40px; height:40px; position:absolute; top:8px; left:20px !important; }
				html.onie #menu_float ul li p { color:#333; margin:0; margin-top:48px; text-shadow:none; width:100%; padding:0; display:block; }
				html.onie #menu_float ul li:hover { background:#eee !important; }
				html.onie #menu_float ul li:hover p { text-decoration:underline; color:#ea5700; }
				
				html.onie #menu_float ul li div.icon-promo,
				html.onie #menu_float ul li div.icon-bill,
				html.onie #menu_float ul li div.icon-shop,
				html.onie #menu_float ul li div.icon-fanpage { margin:-3px 5px; width:30px; height:30px; background-size:150px 450px; float:left; }
				html.onie #menu_float ul li div.icon-promo { background-position:0px 0px; }
				html.onie #menu_float ul li div.icon-bill { background-position:0px -37.5px; }
				html.onie #menu_float ul li div.icon-shop { background-position:0px -75px; }
				html.onie #menu_float ul li div.icon-fanpage { background-position:0px -112.5px; }
				html.onie #menu_float ul li div.icon-reddot { margin-left:20px; }
				
				html.onie #menu_float #fn-vip { background:none; color:#333; }
				/*html.onie #menu_float #fn-vip:hover { background:#eee !important; }*/
				
				html.onie #menu_float #fn-login { background:none; color:#333; }
				/*html.onie #menu_float #fn-login:hover { background:#eee !important; }
				html.onie #menu_float #fn-login:hover p { text-decoration:underline; color:#ea5700; }*/
				html.onie #menu_float { top:61px; width:43px; height:47px; border-radius:0; box-shadow:none; background:#303a4a; }
				html.onie #menu_float div.iconInstruction { display:none; }
		/*=====================================================================================*/
	
	
	
	
	@media -ms-viewport, screen and (max-width: 1140px) {
		#menu_float.shorten { top:38px; }
		#menu_float .navTop { background:url(../images/icon-global.png) no-repeat 60px top; background-position:-96px -352px; height:40px; width:50px; display:none; }
		#menu_float .active { background-position:-96px -352px !important; }
		#menu_float .navEnd { background-position:-20px -350px; display:none; }
		
		#menu_float ul { width:250px; height:340px; display:block; background:#fff; box-shadow:1px 1px 15px rgba(0,0,0,0.4); padding:5px; border-radius:5px; margin:52px 10px auto 8px; opacity:0; display:none; border:1px solid #ccc; }
		#menu_float ul li { float:left; width:80px; border:0; height:70px; background:none; display:inline-block; }
		#menu_float ul li .icon { width:40px; height:40px; position:absolute; top:8px; left:20px; }
		#menu_float ul li p { color:#333; margin:0; margin-top:48px; text-shadow:none; width:100%; padding:0; display:block; }
		
		#menu_float ul li:hover { background:#eeeeee !important; 
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#eeeeee');
			background-image: -ms-linear-gradient(top, #eeeeee 0%, #eeeeee 100%);
			}
		#menu_float ul li:hover p { text-decoration:underline; color:#ea5700; }
		
		
		#menu_float ul li div.icon-promo,
		#menu_float ul li div.icon-bill,
		#menu_float ul li div.icon-shop,
		#menu_float ul li div.icon-fanpage { margin:-3px 5px; width:30px; height:30px; background-size:150px 450px; float:left; }
		#menu_float ul li div.icon-promo { background-position:0px 0px; }
		#menu_float ul li div.icon-bill { background-position:0px -37.5px; }
		#menu_float ul li div.icon-shop { background-position:0px -75px; }
		#menu_float ul li div.icon-fanpage { background-position:0px -112.5px; }
		#menu_float ul li div.icon-reddot { margin-left:20px; }
			
			#menu_float #fn-vip { background:none; color:#333; }
			/*#menu_float #fn-vip:hover { background:#eee !important; }*/
			
			#menu_float #fn-login { background:none; color:#333; }
			/*
			#menu_float #fn-login:hover { background:#eee !important; }
			#menu_float #fn-login:hover p { text-decoration:underline; color:#ea5700; }
			*/
			
				#menu_float { top:61px; width:43px; height:47px; border-radius:0; box-shadow:none; background:#303a4a; }
				#menu_float div.iconInstruction { display:none; }
				
				
	}
	
	
	/* DESKTOP */
	@media -ms-viewport, screen and (min-width: 1141px) { 
	
		
		#menu_float .navTop { background:url(../images/icon-global.png) no-repeat; background-position:0px -300px; height:46px; width:100%; display:block; }
		#menu_float .active { background-position:-100px -300px !important; }
		#menu_float .navEnd { background-position:0px -350px; display:block; }
		
		#menu_float ul { list-style-position:outside; 
		width:100%; height:auto; display:block; background:none; box-shadow:none; padding:0; border-radius:0; margin:0; opacity:1; border:0; }
		#menu_float ul li { float:none; border:0; background-color:#303a4a; border-top:1px solid #3e4455; border-bottom:1px solid #222a37; }
		#menu_float ul li { padding-top:4px; }
		#menu_float ul li .icon { width:40px; height:40px; left:0; position:relative; top:0; }
		#menu_float ul li p { margin-top:10px; width:100%; padding:0; display:block; text-align:center; color:white; }
		
		
		#menu_float ul li div.icon-promo,
		#menu_float ul li div.icon-bill,
		#menu_float ul li div.icon-shop,
		#menu_float ul li div.icon-fanpage { margin-left:20px; width:40px; height:40px; background-size:200px 600px; }
		#menu_float ul li div.icon-promo { background-position:0px 0px; }
		#menu_float ul li div.icon-bill { background-position:0px -50px; }
		#menu_float ul li div.icon-shop { background-position:0px -100px; }
		#menu_float ul li div.icon-fanpage { background-position:0px -150px; }
		#menu_float ul li div.icon-reddot { margin-left:30px; }
			
			#menu_float #fn-vip { 
				background: -moz-linear-gradient(top, #515d78 0%, #384254 100%); /* FF3.6+ */
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#515d78), color-stop(100%,#384254)); /* Chrome,Safari4+ */
				background: -webkit-linear-gradient(top, #515d78 0%,#384254 100%); /* Chrome10+,Safari5.1+ */
				background: -o-linear-gradient(top, #515d78 0%,#384254 100%); /* Opera 11.10+ */
				background: -ms-linear-gradient(top, #515d78 0%,#384254 100%); /* IE10+ */
				background: linear-gradient(to bottom, #515d78 0%,#384254 100%); /* W3C */
				color:white;
			}
			/*#menu_float #fn-vip:hover { background:#27303d; }*/
			
			#menu_float #fn-login { 
				background: -moz-linear-gradient(top, #515d78 0%, #384254 100%); /* FF3.6+ */
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#515d78), color-stop(100%,#384254)); /* Chrome,Safari4+ */
				background: -webkit-linear-gradient(top, #515d78 0%,#384254 100%); /* Chrome10+,Safari5.1+ */
				background: -o-linear-gradient(top, #515d78 0%,#384254 100%); /* Opera 11.10+ */
				background: -ms-linear-gradient(top, #515d78 0%,#384254 100%); /* IE10+ */
				background: linear-gradient(to bottom, #515d78 0%,#384254 100%); /* W3C */
				color:white;
			}
			/*
			#menu_float #fn-login:hover { background:#27303d; }
			#menu_float #fn-login:hover p { text-decoration:underline; color:white; }
			*/
			
				#menu_float { top:61px; width:80px; background:none; }
				#menu_float div.iconInstruction { display:block; }
	}
	
	
	
	/*=====================================================================================*/
		/* SPECIAL FOR IE TABLET VERSION */
			html.onie #containerBox { width:100%;padding-top:120px; }
			html.onie #mainbox, html.onie #mainboxright { width:690px; }
			html.onie .boxBasicHalf1, html.onie .boxBasicHalf2 { width:340px; }
			html.onie #rightbox, 
			html.onie #leftbox,
			html.onie div.float_quicklink { width:200px; }
			html.onie .boxBasicBanner { height:75px; }
			html.onie #breadcrumbFooter { width:870px; }
			/*html.onie .navCon { width:200px; }*/
			html.onie .bbox-right { width:380px; }
	/*=====================================================================================*/

	/* SMALL TABLET */
	@media -ms-viewport, screen and (max-width: 1140px) {
		
		
		#containerBox { width:100%; max-width:900px; padding-top:120px;}
		#mainbox, #mainboxright { width:690px; }
		.boxBasicHalf1, .boxBasicHalf2 { width:340px; }
		#rightbox, #leftbox,
		div.float_quicklink { width:200px; }
		.boxBasicBanner { height:75px; }
		#breadcrumbFooter { width:870px; }
		
		/*.navCon { width:200px; }*/
		
		.bbox-right { width:380px; }
	}
	/* DESKTOP */
	@media -ms-viewport, screen and (min-width: 1141px) { 
	
		#containerBox { width:100%; padding-top:120px; }
		#mainbox, #mainboxright { width:764px; }
		.boxBasicHalf1, .boxBasicHalf2 { width:376px; }
		#rightbox, #leftbox,
		div.float_quicklink { width:200px; }
		.boxBasicBanner { height:90px; }
		#breadcrumbFooter { width:950px; }
		
		.navCon { width:250px; }
		
		.bbox-right { width:450px; }
	}
	
	







	
