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


section#UCOMEXPRESS { padding-top: 5px; }
section#UCOMEXPRESS > div#ucomexpress > div.TOPIC { 
	width: 98%; margin: 5px 1%; height: 170px;
	background-color: #CCC; 
	color: #FFF;
	background: -webkit-linear-gradient(left,rgba(24,198,196,0),rgba(24,198,196,0),rgba(24,152,196,0),rgba(24,152,196,0)),url('https://www.uuu.com.tw/Public/content/article/18/images/Visual.jpg') ;
	background: -moz-linear-gradient(left,rgba(24,198,196,0),rgba(24,198,196,0),rgba(24,152,196,0),rgba(24,152,196,0)),url('https://www.uuu.com.tw/Public/content/article/18/images/Visual.jpg') ;
	background: -ms-linear-gradient(left,rgba(24,198,196,0),rgba(24,198,196,0),rgba(24,152,196,0),rgba(24,152,196,0)),url('https://www.uuu.com.tw/Public/content/article/18/images/Visual.jpg') ;
	background-size: cover;
	background-position: center -150px;
	border-radius: 5px; padding: 30px; position: relative; overflow: hidden; 
}
section#UCOMEXPRESS > div#ucomexpress > div.TOPIC div.Content { width: 50%; position: absolute; top: 50px; left: 40px; }
section#UCOMEXPRESS > div#ucomexpress > div.TOPIC div.BTN { 
	width: 150px; height: 45px; line-height: 45px; 
	right: 40px; bottom: 30px;
	position: absolute; 
	font-size: 18px; 
	background-color: #31374f;
	border-radius: 5px; text-align: center;
}
section#UCOMEXPRESS > div#ucomexpress > div.TOPIC div.BTN a { color: #FFF; display: block; }
section#UCOMEXPRESS > div#ucomexpress > div.TOPIC div.BTN:hover { cursor: pointer; background-color: #C33 }

section#UCOMEXPRESS > div#ucomexpress > div.TOPIC h1 { color: #31374f; text-align: left; font-size: 3.5em; margin: 0; padding: 0; line-height: 1;}
section#UCOMEXPRESS > div#ucomexpress > div.TOPIC h2 { color: #31374f; font-size: 20px; font-weight: 600; margin: 0; padding: 6px 0; line-height: 1; letter-spacing: 2px; }





section#UCOMEXPRESS > div#ucomexpress > div.BOX { width: 48%; border-radius: 5px; overflow: hidden; border: solid 0px #EFEFED; padding: 20px; height: 180px;  }

section#UCOMEXPRESS > div#ucomexpress > div.BOX > div.TopContent { clear: both; }

section#UCOMEXPRESS > div#ucomexpress > div.BOX > div.TopContent > h4 {
	overflow:hidden; 
	text-overflow:ellipsis; 
	white-space: nowrap; 
	font-size: 20px; 
	margin: 0px 0 8px 0; 
	border-bottom: solid 3px #EFEFED;
	background: transparent; color:#BA6345;
	padding: 0px 10px 2px 0px; 
	border-radius: 4px;
}

section#UCOMEXPRESS > div#ucomexpress > div.BOX > div.TopContent > h4 a { color:#FFF;   }
section#UCOMEXPRESS > div#ucomexpress > div.BOX > div.TopContent > h5 {
	margin: 0 0 0 0; 
 	padding: 0 0 0 0; 
}
section#UCOMEXPRESS > div#ucomexpress > div.BOX > div.TopContent > h5 > span { color: #555; font-size: 13px; padding: 3px 6px 3px 0; border-radius: 4px; margin-right: 8px; }

section#UCOMEXPRESS > div#ucomexpress > div.BOX > div.DownContent { border-top: solid 0px #FFF; margin: 3px 0 0 0; padding: 0px 0 0 0; }
section#UCOMEXPRESS > div#ucomexpress > div.BOX > div.DownContent div.Graphic { width: 90px; height: 90px; overflow: hidden; float: left; background:#EFEFED; margin: 0 10px 30px 0; border-radius: 4px; }
section#UCOMEXPRESS > div#ucomexpress > div.BOX > div.DownContent div.Graphic img { width: 105%; height: auto; }
section#UCOMEXPRESS > div#ucomexpress > div.BOX > div.DownContent > p.Descp { font-size: 15px; line-height: 1.6;color: #333;}
section#UCOMEXPRESS > div#ucomexpress > div.BOX > div.DownContent > p.Descp a { color:#BA6345; }
section#UCOMEXPRESS > div#ucomexpress > div.BOX > div.DownContent > p.Descp a:hover { color: #C33; }

section#UCOMEXPRESS > div#ucomexpress > div.BOX > div.DownContent div.BTN { clear: both; width: 70px; height: 25px; background: #CCC; line-height: 25px; text-align: center; margin:auto; font-size: 13px; border-radius: 3px;  }
section#UCOMEXPRESS > div#ucomexpress > div.BOX > div.DownContent div.BTN:hover { background: #BA6345 }
section#UCOMEXPRESS > div#ucomexpress > div.BOX > div.DownContent div.BTN a { color: #FFF; }


	@media (max-width: 1440px) {
		section#UCOMEXPRESS > div#ucomexpress > div.BOX { height: 190px; padding: 15px; }
		section#UCOMEXPRESS > div#ucomexpress > div.BOX > div.TopContent > h4 { font-size: 18px; }
		section#UCOMEXPRESS > div#ucomexpress > div.BOX > div.DownContent > p.Descp { font-size: 14px; }
		section#UCOMEXPRESS > div#ucomexpress > div.BOX > div.DownContent div.Graphic { margin: 0 10px 20px 0; }

	}

	@media (max-width: 1280px) {
		section#UCOMEXPRESS > div#ucomexpress > div.BOX { height: 190px;  }
	}

	@media (max-width: 1200px) {

		section#UCOMEXPRESS > div#ucomexpress > div.BOX { width: 48%; height: 210px;  }
		section#UCOMEXPRESS > div#ucomexpress > div.BOX > div.DownContent div.Graphic { width: 70px; height: 70px; margin: 0 10px 10px 0; }
		section#UCOMEXPRESS > div#ucomexpress > div.BOX:nth-child(6),
		section#UCOMEXPRESS > div#ucomexpress > div.BOX:nth-child(7) { display: none !important; }
	}

	@media (max-width: 1160px) {

		section#UCOMEXPRESS > div#ucomexpress > div.TOPIC { width: 100%; margin: 5px 0; height: 170px; background-position: center -150px; padding: 30px; }
		section#UCOMEXPRESS > div#ucomexpress > div.TOPIC div.Content { width: 100%; position: absolute; top: 50px; left: 30px; }
		section#UCOMEXPRESS > div#ucomexpress > div.TOPIC div.BTN { width: 150px; height: 35px; line-height: 35px; right: 30px; bottom: 30px; font-size: 16px; }
		section#UCOMEXPRESS > div#ucomexpress > div.TOPIC h1 { font-size: 3em; }
		section#UCOMEXPRESS > div#ucomexpress > div.TOPIC h2 { font-size: 18px;  }

		section#UCOMEXPRESS > div#ucomexpress > div.BOX { width: 100%; height: auto;  }
		section#UCOMEXPRESS > div#ucomexpress > div.BOX > div.DownContent div.Graphic { width: 70px; height: 70px; margin: 0 10px 0px 0; }
		section#UCOMEXPRESS > div#ucomexpress > div.BOX > div.DownContent div.BTN { clear: none; float: right; margin:none;  }


	}

	@media (max-width: 850px) {
		section#UCOMEXPRESS > div#ucomexpress > div.TOPIC { height: 220px; background-position: center top; background-repeat: no-repeat; }
		section#UCOMEXPRESS > div#ucomexpress > div.TOPIC div.Content { background-color: rgba(255,255,255,0.7); left: 0; padding: 20px 0 10px 50px; }
		section#UCOMEXPRESS > div#ucomexpress > div.TOPIC div.BTN { width: 130px; height: 30px; line-height: 30px; right: 30px; bottom: 20px; font-size: 14px; }
	}

	/*Mobile Device Start*/
	@media (max-width: 599px) {
		section#UCOMEXPRESS > div#ucomexpress > div.TOPIC div.Content { padding: 20px 0 10px 20px; }
		section#UCOMEXPRESS > div#ucomexpress > div.TOPIC h1 { font-size: 2em; }
		section#UCOMEXPRESS > div#ucomexpress > div.TOPIC h2 { font-size: 14px;  }

		section#UCOMEXPRESS > div#ucomexpress > div.BOX > div.TopContent > h4 { font-size: 14px; }

		section#UCOMEXPRESS > div#ucomexpress > div.BOX:nth-child(5),
		section#UCOMEXPRESS > div#ucomexpress > div.BOX:nth-child(6),
		section#UCOMEXPRESS > div#ucomexpress > div.BOX:nth-child(7) { display: none !important; }
	}