/* Template Common */
	html, body#body 		{ overflow-x: hidden;}

	body#body 		{ margin:0; padding:0; background:#fff; opacity:0;
					  font-family: 'Barlow', Arial, sans-serif,'robotoregular', "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif; font-weight:normal; color:#333; font-size:16px;
					  -webkit-font-smoothing: antialiased;
  					 -moz-osx-font-smoothing: grayscale;}
	body#body.sc 		{ margin:0; padding:0; background:#fff; opacity:0;
					  font-family: 微軟正黑體, 'Barlow', Arial, sans-serif,'robotoregular', "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif; font-weight:normal; color:#333; font-size:16px;
					  -webkit-font-smoothing: antialiased;
  					 -moz-osx-font-smoothing: grayscale;}
	body#body.ready 		{ opacity:1; }

	/*button, input, *:focus 	{ outline:none; border:none;}*/
	* {box-sizing: border-box}

	div,header,section,ul,li,a,main { position:relative;}
	body#body h1, body#body h2, body#body h3, body#body h4, body#body p 	{ margin:0; }
	a 				{ cursor:pointer; }

	.clearfix::after { content: ""; clear: both; display: table;}


	/* Header & Hunger Menu */
	header.site-header,
	header .pg-container   { height:70px;}

	header.site-header 	{ position:fixed; background:#fff; color:#fff; width:100%; padding:0; top:0; z-index:9998;}

	header .logo 		 { position:absolute; top:0; width:auto; height:30px; background-color:#fff; right:0; top:20px;}
	header .logo>img 	 { width:auto; height:30px; }
	header .pg-container { border-bottom:1px solid #000;}
	#hd-left { position:absolute; left:0; top:10px; }
	.menu-btn 			 { width:auto; padding:12px 0; background:#fff; color:#666; text-align:center;
					  	   cursor:pointer; border:0px; font-size:110%;
					  	   font-family:'Fjalla One'; font-weight:normal; float: left; margin-right: 30px;}
	.sub-btn { float: left; background: #0c2c84; padding: 15px; font-size:110%; font-family:'Fjalla One'; font-weight:normal; }
	.sub-btn:hover { background: #000;}
	.sub-btn a, .sub-btn a:hover, .sub-btn a:visited { color: #fff; text-decoration: none;}
	
	.lang { float: left; margin-left: 20px; color: #666; text-align: center; }
	.lang .current-lang { padding: 15px; display: table; width: 100px; }
	.lang .current-lang .arrow { font-size: 0.7em; display: table-cell; vertical-align: middle; width: 20px; }
	.lang .current-lang .txt { display: table-cell; vertical-align: middle; width: 50px;}
	.lang.active .items { display: block; }
	.lang .items { position: absolute; left: 0; top: calc(100% - 1px); width: auto; display: none; }
	.lang .items li { padding: 10px 15px; width: 80px; background-color: #fff; white-space: nowrap; }
	.lang .items li:not(:last-child) { border-bottom: 1px solid #666; }
	.lang [onclick] { cursor: pointer; }
	

	/* Page Container + header part (SWIRENEWS & Navigation menu)*/
	.pg-container 	{ max-width:80%; margin:0 auto;}
	.general 		{ margin-bottom:110px; margin-top: 30px; }
	#container 		{ margin-top: 70px; }

	#swirenews 		{ text-align: center; width: 100%; padding-bottom: calc(80% / 990 * 170); background-color: #cd0720; border-bottom-right-radius: 10vw; }
	#swirenews [onclick] { cursor: pointer; }
	#swirenews img 	{ position: absolute; left: 0; top: 0; width: 80%; height: 100%; object-fit: contain; object-position: left top; }

	body#body.no-topnav #top-nav { display:none}
	#top-nav		{ text-align:center; padding:20px 0 20px; /* border:1px solid #000; */ border-left:none; border-right:none; border-top:none;}
	#top-nav ul 	{ margin:0; padding:0;}
	#top-nav ul li  { list-style:none; display:inline-block; }
	#top-nav ul li a 		{ text-decoration:none; font-size:120%; color:#2c69a8; transition: all 0.3s ease-out; padding:10px 0; font-weight: 600;}
	#top-nav ul li:after    { content:url(images/img-sep-red.gif); padding:0px 20px; display: inline-block; vertical-align: middle; }
	#top-nav ul li:last-child:after   { content:""; padding-right:0;}
	#top-nav ul li a.current 	{ background:url(images/img-sep-bk.gif); background-position:bottom; background-repeat:repeat-x; color:#e23b2b;}
	
	/* picture overlay */
	.pic-oy { position: absolute; right: 0; bottom: 0; width: 25%; padding-bottom: 25%; background-repeat: no-repeat; background-size: contain; background-position: right bottom; opacity: 0; pointer-events: none; z-index: 2; }
	*:hover > .pic-oy { opacity: 1; transition: all 0.3s; }
	.pic-o1 { background-image:url('images/pic-overlay1.svg'); }
	.pic-o2 { background-image:url('images/pic-overlay2.svg'); }
	.pic-o3 { background-image:url('images/pic-overlay3.svg'); }
	.pic-o4 { background-image:url('images/pic-overlay4.svg'); }
	.pic-o5 { background-image:url('images/pic-overlay5.svg'); }
	.pic-o6 { background-image:url('images/pic-overlay6.svg'); }

	/* Back to top */
	.gotop,
    .gotop span   		{ width:100px; height:30px }
	.gotop 				{ position:fixed; bottom:0px; right:0px; z-index:1500; opacity:0; font-size:12px; transition:all 1s ease-out;
							text-align:center; cursor:pointer; text-decoration:none;  }
	.gotop.show 		{ opacity:1; }        
	.gotop span     	{ display:block; margin-bottom:0px; background-color:#333; color:#fff; padding:10px; text-transform:uppercase;
		                  -webkit-transition: 1s;
		                     -moz-transition: 1s;
		                          transition: 1s;}
	.gotop i 			{ line-height:normal; font-size:14px;}

	/* cookie consent */
	#ackbar { position:fixed; bottom:0; left:0; width:100%; padding:20px 30px; 
		background:#000; color:#fff; z-index:2000; box-sizing:border-box; }
	#ackbar>b { background:#c00; top:12px; right:30px; position:absolute;
		padding:8px 20px; display:block; }
	#ackbar a { color: #cdcdcd; text-decoration: underline; }
	#ackbar a:hover { color: #fff; }

	/* table Footer */
	table.t-footer 				{ width:100%; border-collapse:collapse; border:none; margin-bottom:50px}
	table.t-footer tbody tr td:first-child 	{ text-align:left; vertical-align:bottom; }
	table.t-footer tbody tr td:last-child 	{ text-align:left; vertical-align:top; width:20%;}


	/* Footer */
	footer 				{ margin-right:20px}
	.site-footer 		{ position: relative;color:#999; padding:0;}
	footer ul.link 		{ margin:0; padding:0 0 15px 0;  border-bottom: 1px solid #ececec; font-size:80%}
	footer ul.link li	{ margin:0; padding:0; list-style:none; display:inline-block; text-transform:uppercase;}
	footer ul.link li a 	{ text-decoration:none; color:#333; padding-right:20px;  transition: all 0.3s ease-out;}
	footer ul.link li img { width:12px; height: auto; margin-right:5px; vertical-align:bottom;}

	footer ul.sublink 		{ margin:0; padding:15px 0 10px 0;}
	footer ul.sublink li	{ margin:0; padding:0 0 10px 0; list-style:none; display:inline-block;}
	footer ul.sublink li a 	{ text-decoration:none; color:#999; padding-right:20px;  transition: all 0.3s ease-out;}

	footer .copyright	{ color:#999;}
	footer .copyright a	{ color:#999; text-decoration: none;}
	footer .copyright a:hover 		{ color:#c00;}
	footer ul.sublink,
	footer .copyright  { font-size:80%}

	/* Download this issues */
	#download { background:#000 url(images/quote-br-light.svg); color:#fff; background-position:right bottom; background-repeat:no-repeat; background-size:26%; 
				text-align:left; border-collapse:collapse; z-index:10;
				font-family:'Fjalla One'; line-height:1.2; transition: all 0.3s ease-out; }
	#download .d-divTable					{ display: table;  }
	#download .d-divTableBody 				{ display: table-row-group;}
	#download .d-divTableRow 				{ display: table-row;}
	#download .d-divTableCell 				{ display: table-cell; vertical-align:bottom}
	#download .d-divTableCell:first-child img { width:150px; height:auto; vertical-align:bottom;
											  border-left:1px solid #ececec; border-right:1px solid #ececec; border-top:1px solid #ececec;}

	#download .d-divTableCell:last-child 		{ vertical-align:middle; padding:0 30px 0 10px; }
	#download .d-divTableCell:last-child div 	{ width:65px; height:65px;  margin-bottom:8px; }
	#download .d-divTableCell:last-child img    { width:100%; height:auto}
	#download .d-divTableCell:last-child img.white { display:block;} 
	#download .d-divTableCell:last-child img.black { display:none;} 
	#download .d-divTableCell:last-child span   { font-size:120%; text-transform:uppercase;}

	.dskonly { }
	.mobonly { display:none; }
	
	/* inside & index */
	.v2-title { padding: 10px 20px; color: #fff; overflow: hidden;  }
	.v2-title .txt-wrp { z-index: 2; }
	.title-bg{ position: absolute; left: 0; top: 0;  width: 500px; height: 100%; background-size: contain; background-repeat: no-repeat; z-index: 1; }
	.bg-bottom { position: absolute; left: 0; bottom: 0; width: 100%; height: 40px; background-size: auto 100%; background-repeat: no-repeat; background-color: #cd0720; }

	/* ==========================================================================
	    Media Style
	============================================================================= */
	@media only screen and (max-width:1600px) {
	.pg-container 	{ max-width:90%;}
	}

	@media only screen and (max-width:1200px) {
	.pg-container 	{ max-width:94%;}

	header.site-header,
	header .pg-container    { height:55px;}
	#container 				{ margin-top:55px}
	header .logo 		 	{ height:25px; top:15px;}
	header .logo>img 		{ height:25px; width:auto; }
	#hd-left { top:10px; }
	.lang { margin-left: 8px; }
	.lang .current-lang { padding: 8px 15px; }
	.menu-btn 			 { padding:8px 0; margin-right: 15px;}
	.sub-btn { padding: 10px;}

	/* #swirenews 				{ padding:25px 0;}  */
	/* #swirenews img 			{ width:45%; height:auto} */

	#top-nav ul li a 		{ font-size:100%;}
	}


	@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
	footer ul.link 		{ padding-bottom:0}
	footer ul.link li	{ display:block; padding-bottom:15px; font-size:90%; }

	}

	@media only screen and (max-width:767px) {
	.pg-container 	{ max-width:92%;}

	header.site-header,
	header .pg-container    { height:35px;}
	#container 				{ margin-top:35px}
	header .logo 		 	{ height:15px; top:10px;}
	header .logo>img 		{ height:15px; width:auto; }
	
	.lang { margin-left: 3px; }
	.lang .current-lang{ padding: 3px 0px; width: 90px; }
	.lang .items li { padding: 3px 10px; width: 70px; }
	
	#hd-left { top:8px; }
	.menu-btn 			 { padding:0; margin-right: 10px; font-size:110%;}
	.sub-btn { padding: 5px; font-size:75%;}

	/* #swirenews 				{ padding:15px 0;} */ 
	#top-nav		{ text-align:center; padding:10px 0 0px; /* border:1px solid #000; */ border-left:none; border-right:none; border-top:none;}
	#top-nav ul li a 		{ font-size:110%; padding:10px 0;}
	#top-nav ul li:after    { content:url(images/img-sep-red-m.gif); padding:0px 5px;}
	#top-nav ul li a.current  { background:url(images/img-sep-bk-m.gif); background-position:bottom; bottom:1px; background-repeat:repeat-x; color:#e23b2b;}


	table.t-footer,
	table.t-footer tbody,
	table.t-footer tbody tr, 
	table.t-footer tbody tr td,
	table.t-footer tbody tr td:first-child,	
	table.t-footer tbody tr td:last-child			{ width:100%; display:block;}

	table.t-footer tbody tr { display:inline-grid;}
	table.t-footer tbody tr td:first-child { order: 2;}
	table.t-footer tbody tr td:last-child  { order: 1;}
	table.t-footer 				{ margin-bottom:25px}

	#download { width:75%; margin-bottom:30px}
	#download .d-divTableCell:last-child div 	{ width:30px; height:30px; }
	#download .d-divTableCell:last-child span { font-size:110%;}

	footer { margin-right: 0;}
	footer ul.sublink,
	footer .copyright 	{ font-size:80%}
	footer ul.link li	{ display:block; padding-bottom:15px; font-size:90%}
	footer ul.link li:last-child { padding-bottom:0}

	footer ul.sublink 		{ margin:0; padding:15px 0 0 0;}
	footer ul.sublink, footer .copyright  { font-size:65%}

    .gotop, .gotop span   		{ width:80px; height:25px }
	.gotop 				{ font-size:10px; }

	.dskonly { display:none; }
	.mobonly { display:block; }	
	
	.bg-bottom { bottom: -40px; }

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

	}
	
	@media (hover: hover) {
	/* #top-nav ul li a:hover 		{ color:#666; } */
	.gotop span:hover			{ background:#ececec;}
	footer ul.link li a:hover 	{ color:#e23b2b}
	footer ul.sublink li a:hover { color:#e23b2b}
	/* Device that can hover (desktops) */
	#download:hover { cursor:pointer}
	#download:hover { background:#fff url(images/quote-br.svg); background-position:right bottom; background-repeat:no-repeat; background-size:26%; 
					  color:#333 }
	#download:hover .d-divTableCell:last-child img.white  { display:none;} 
	#download:hover .d-divTableCell:last-child img.black  { display:block;} 
	}