@charset "utf-8";
/* CSS Document */
/**** 基礎元素 ****/
html { min-height:100%; }
body {
	/* 讓 ios 的字體變細 */
	-moz-osx-font-smoothing: grayscale; 
	-webkit-font-smoothing: antialiased;
	background-color:#fff;
	font-size:15px;
	min-height:100%;
}
ol, ul { list-style: none; padding:0px; margin:0px; }
a { text-decoration:none; }
a:hover { text-decoration:none; }
* { box-sizing:border-box; }
input[type="text"],
input[type="password"],
textarea,
select{ border:1px solid #ccc; padding:5px 10px; border-radius:5px; box-sizing:border-box; }

/**** public 公用元件 ****/
	.wrapper { background-size:cover; background-repeat:no-repeat; background-position:50%; }
	.layout { width:1200px; margin:0px auto; }
	
	.btn { border-radius:5px; border:1px solid #ccc; display:inline-block; padding:5px 10px; color:#666; transition:.3s; }
	.btn:hover { background-color:#eb5310; border:1px solid #eb5310; color:#fff; }
	
	/* 使用於麵包屑 */
	.page_location { height:30px; line-height:30px; padding-left:36px; color:#666; background:url(../images/pages_icon_tips.png) no-repeat; margin-bottom:20px; }
	.page_location a { color:#0071bc; }
	
    .on_menu {
	color: #FFF;
	display: inline-block;
	text-align: center;
	width: 125px;
	font-family: "微軟正黑體";
	float: left;
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 8px;
	padding-left: 5px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 400;
	margin-left: 8px;
}
    .on_menu a:link {
	color: #FFF;
	transition: .5s;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom: 1px solid #54bcbd;
	transition: .5s;
	padding-bottom: 6px;
}

    .on_menu a:visited {
	color: #FFF;
	transition: .5s;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom: 1px solid #54bcbd;
	transition:.5s;
	padding-bottom: 6px;
}

    .on_menu a:hover {
	padding-bottom: 6px;
	padding-right: 2px;
	padding-left: 2px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #067d81;
	font-weight: bold;
	color: #FFF;
}	
	
	
	/* 每個內頁的內容區塊 */
	.page_con { padding:20px 0px;}

	/* 共用-原尺寸-內頁內容顯示區 */
	.con_box { display:flex; justify-content:space-between; border-bottom:1px solid #ccc; padding-bottom:20px; }
	.page_left { width:20%; margin-right:20px;  }
	.page_left .main_img { width:100%; }
	.page_left .member_menu a { padding:10px 15px; display:block; cursor:pointer; transform:.3s; color:#666; }
	.page_left .member_menu a:hover { background-color:#0071bc; color:#fff; }
	.page_left .member_menu a.selected { background-color:#0071bc; color:#fff; border-top:1px solid #fff; border-bottom:1px solid #fff; }
	
	.page_right { width:80%; }
	.page_right .page_con_area { padding:20px; }

	/* 陰影 */
	.shadow { box-shadow:0px 0px 5px rgba(0,0,0,.3); }

	/* 每一頁的區塊標題 */
	.block_title { margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid #eee; font-size:18px; color:#666; }
	.block_title img { vertical-align:middle; margin-right:10px; }


/**** private 私有元件 ****/
/* for any page */
	/* header */
	.header { display:flex; justify-content:space-between; align-items:center; }
	.header .menu { font-size:0px; align-self:flex-end; }
	.header .menu li { display:inline-block; height:119px; padding:0px 15px; }
	.header .menu li:nth-last-of-type(1) { padding:0px 0px 0px 15px; }
	/* mouse hover */
	.header .menu li > a { border-radius:50%; height:90px; width:90px; line-height:90px; font-size:16px; color:#333; transition:.3s; text-align:center; display:inline-block; letter-spacing:1px; }
	.header .menu li:hover > a { color:#fff; background-color:#eb5310; }
	/* mouse hover 的時候浮現子選單和 icon 的設定 */
	.header .menu li > div { position:absolute; transition:.2s; top:142px; background-color:rgba(255,255,255,.7); width:100%; opacity:0; visibility:hidden; left:0px; font-size:15px; border-bottom:1px solid #ccc; z-index:0; }
	.header .menu li:hover > div { opacity:1; visibility:visible; top:147px; z-index:1; transition:.5s; }
	.header .menu li.sub > a { background-image:url(../images/icon_arrow_down_black.png); background-repeat:no-repeat; background-position:50% 73%; transition:.3s; }
	.header .menu li.sub:hover > a { background-image:url(../images/icon_arrow_down_white.png); }
	/* 子選單 基礎設定 */
	.header .menu li .sub_box { width:1200px; margin:0px auto; background-color:#fff; color:#333; border-top:1px dashed #eee; padding:20px 50px 30px 50px; letter-spacing:1px; display:flex; justify-content:space-between; line-height:36px; }
	.header .menu li .sub_box .title { font-size:18px; color:#eb5310; }
	.header .menu li .sub_box a { color:#333; transition:.3s; }
	.header .menu li .sub_box a:hover { color:#eb5310; }

	/* footer */
	.foot_area { background-color:#333; width:100%; }
	.footer { padding:50px 0px; color:#fff; display:flex; justify-content:space-between; letter-spacing:1px; }
	.footer .contact_us { width:35%; }
	.footer .contact_us .title { font-size:18px; letter-spacing:2px; margin-bottom:5px; }
	.footer .contact_us .cons { line-height:24px; }
	.footer .contact_us .cons > span { font-size:12px; }
	.footer .foot_menu { width:60%; display:flex; }
	.footer .foot_menu > div { width:25%; }
	.footer .foot_menu .title { font-size:16px; padding-bottom:15px; margin-bottom:15px; border-bottom:1px solid #666; }
	.footer .foot_btn { color:#ccc; cursor:pointer; transition:.3s; }
	.footer .foot_btn:hover { color:#fff; }
	.footer .foot_menu_btn { color:#ccc; cursor:pointer; margin-bottom:15px; display:inline-block; transition:.3s; }
	.footer .foot_menu_btn:hover { color:#fff; } 
	
	/* page_banner */
	.page_banner { height:250px; }
	.page_banner .cons { color:#fff; text-align:right; padding:110px 70px 0px 0px; letter-spacing:2px; }
	.page_banner .b_slogan { font-size:48px; }
	.page_banner .s_slogan { font-size:18px; }

/* for index.php */
	/* service 區塊 */
	.service { height:550px; }
	.service .title { margin:35px 0px 0px 40px; }
	.service .cons { display:flex; justify-content:space-between; margin-top:55px; }
	
	/* application & products 區塊 */
	.app_block { padding:35px 40px; }
	.app_block .application { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; font-size:0px; margin-top:30px; }
	.app_block .application a { display:inline-block; margin-bottom:15px; opacity:.8; transition:.3s; box-shadow:3px 3px 3px -1px rgba(0,0,0,.3); }
	.app_block .application a:hover { opacity:1; }
	
	.app_block .products { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; margin-top:30px; }
	.app_block .products a { color:#333; font-size:17px; transition:.3s; }
	.app_block .products a:hover { color:#eb5310; }
	
	/* platform 區塊 */
	.platform { padding:35px 40px 50px 40px; }
	.platform .p_box { display:flex; justify-content:space-between; align-items:center; margin-top:30px; }
	.platform .p_box a { text-align:center; width:300px; transition:.3s; color:#333; }
	.platform .p_box a:hover { color:#eb5310; }
	.platform .p_box .p_cons { margin-top:30px; letter-spacing:1px; line-height:28px; padding:0px 30px; }


/* for service pages */
	/* service_page 區塊 , 含左側導覽列 */
	.service_page { font-size:15px; letter-spacing:1px; display:flex; justify-content:space-between; }
	.service_page .nav { width:230px; margin-right:40px; }
	.service_page .nav .box { box-shadow:rgba(0,0,0,.2) 5px 5px 5px -3px; padding-right:10px; margin-bottom:20px; padding-bottom:1px; }
	.service_page .nav .box .title { font-size:17px; margin-bottom:10px; color:#fff; background-color:rgb(0, 166, 174); padding:10px; }
	.service_page .nav a { display:block; color:#666; cursor:pointer; margin:15px 0px 15px 25px; transition:.3s; }	
	.service_page .nav a:hover { color:#333; }
	.service_page .nav a.active { color:#eb5310; margin:15px 0px 15px 10px; }
	.service_page .nav a.active:before { content:'▸'; width:15px; }
	
	.service_page .title { font-size:24px; letter-spacing:1px; font-weight:normal; margin:0px; padding:0px; }
	.service_page .title_02 { font-size:20px; letter-spacing:1px; font-weight:normal; margin:0px; padding:0px; }
	.service_page .text { line-height:32px; margin-top:30px; }


/* 預留 RWD 使用 , 還沒啟用 */
/* 桌上型電腦 */
@media screen and (min-width: 1301px) {
}

/* 筆記型電腦 */
@media screen and (min-width: 1025px) and (max-width: 1300px) {
}

/* 平版 */
@media screen and (min-width: 415px) and (max-width: 1024px) {
}

/* 手機 */
@media screen and (max-width: 414px) {
}