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


html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom, iphone */
	height:100%;
}


body, tr, td, p{
	font-family:"Open Sans", "MHei", "STHeiti", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height:25px;
	
	
	/* --- Disable Seletection --- */
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none;   /* Chrome/Safari/Opera */
	-khtml-user-select: none;    /* Konqueror */
	-moz-user-select: none;      /* Firefox */
	-ms-user-select: none;       /* IE/Edge */
	user-select: none;           /* non-prefixed version, currently*/
    outline-style:none;			 /* OLD IE*/
	
}

b, strong{
	/*font-family:"Proxima Nova Light", "MHei", "STHeiti", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;*/
	/*font-weight:bold;*/
}


body {
	background-color:#ffffff;
}

html, body{
	height:100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body, tr, td {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	color:#333333;
}

img {
	border:0px;
	outline: none !important;
}

td img {
	display: block;
}

input:focus {
	outline: none !important;
}

select::-ms-expand {
    display: none;
}

a:focus {
	outline: none !important;
}

a[title] {
    display : none;
}

a:link, a:visited{
	/*color:#4a4041;*/
	color:#cccccc;
	text-decoration: none;
}
a:hover{
	color:#666666;
	text-decoration: none;
}

video::-internal-media-controls-download-button {
    display:none;
}

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}



.table_fixed_size {
	table-layout:fixed; 
	overflow:hidden;
	word-wrap:break-word;
}

.table_fixed_size img{
	display:inline-block;
    vertical-align:middle;
}


.table_normal_size{
	table-layout:auto !important;
	overflow:visible !important;
	word-wrap:normal !important;
	display:inline-block !important;
}


.v_table {
	height:100%;
}


#cccdi, #cccdi a{
	font-family:'High Tower', "MHei", "STHeiti", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	color:#000;
	font-size:42px;
	text-decoration: none;
	letter-spacing: 1px;
}



.placeholder {
	color:#333333;
}


.hr_dash{
	border: 1px dotted #333333;
    border-style: none none dotted; 
    color: #F3F3F3; 
    background-color: #F3F3F3;
	padding-top:10px;
}


.hr_dash_bg_white{
	border: 1px dotted #333333;
    border-style: none none dotted; 
    color: #FFF; 
    background-color: #FFF;
	padding-top:10px;
}


#main-container{
	width:100%;
	display:inline-table;
	left:0;
	/*position:fixed;*/
	position:absolute;
	z-index:1;
	background-color:#FFF;
}


#main-container-content{
	width:100%;
	background-color:#FFF;
	display:inline-block;
}





.content_division{
	width:100%;
	text-align:center;
	border-bottom:1px solid #DDDDDD;
}

.content_division_100{
	width:100%;
	text-align:center;
}


.content_division .division_subtitle{
	display:block;
	font-weight:300;
	font-size:40px;
	line-height:60px;
	color:#000;
	width:100%;
	margin-top:100px;
	margin-bottom:20px;
}

.content_division .division_title{
	display:block;
	font-family:'High Tower', "MHei", "STHeiti", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	font-size:52px;
	line-height:70px;
	color:#000;
	width:100%;
	margin-top:140px;
	margin-bottom:30px;
}

.content_division .division_description{
	display:block;
	font-weight:300;
	font-size:22px;
	line-height:40px;
	color:#555;
	width:100%;
	text-decoration:none;
}

.content_division .division_description a, 
.content_division .division_description a:link,
.content_division .division_description a:visited{
	color:#555;
	text-decoration:underline;
}

.content_division .division_description a:hover{
	color:#CCC;
	text-decoration:none;
}

.content_division .division_img{
	display:inline-block;
	width:100%;
}


.content_division .division_img .division_img-whole{
	width:100%;
	height:380px;
	display:inline-block;
    float:left;
	
	background: url('../img/service/mood.jpg') no-repeat center center;
	
	-webkit-background-size:100% auto;
    -moz-background-size:100% auto;
    -o-background-size:100% auto;
    background-size:100% auto;
	
}

.content_division .division_img .division_img-left{
	width:31%;
	height:350px;
	display:inline-block;
    float:left;
	
	-webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
	
}

.content_division .division_img .division_img-center{
	
	width:38%;
	height:350px;
	display:inline-block;
    float:left;
	
	
	-webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
	
}

.content_division .division_img .division_img-right{
	width:31%;
	height:350px;
	display:inline-block;
    float:left;
	
	
	-webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
	
}








/* =================== inner page content =================== */


#main-inner{
	z-index:99999;
	background-color:#FFF;
	width:100%;
	height:100%;
	position:absolute;
	text-align:center;
	left:-1000px;
	display:none;
	box-shadow: 0px 3px 10px #999;
	position:fixed;
	
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}



#main-inner .header{
	display:inline-block;
	width:100%;
	text-align:center;
	border-bottom:1px solid #DDDDDD;
}

#main-inner .description{
	display:inline-block;
	width:100%;
	text-align:center;
}

#main-inner .footer{
	display:inline-block;
	width:100%;
	text-align:center;
	border-top:1px solid #DDDDDD;
}



#main-inner .header .content,
#main-inner .header .content p{
	font-weight:500;
	font-size:42px;
	line-height:56px;
	font-weight:300;
}

#main-inner .header .content{
	display:inline-block;
	margin-top:70px;
	margin-bottom:50px;
	width:900px;
	text-align:left;
}

#main-inner .datetime{
	font-size:22px;
	line-height:36px;
	font-weight:300;
	letter-spacing:1px;
	display:block;
	width:100%;
	color:#858585;
	margin-top:8px;
}


#main-inner .category{
	font-size:22px;
	line-height:36px;
	font-weight:500;
	letter-spacing:1px;
	display:block;
	width:100%;
	color:#858585;
	margin-top:8px;
}




#main-inner .footer .content,
#main-inner .footer .content p{
	font-weight:300;
	font-size:18px;
	line-height:38px;
	text-align:left;
}

#main-inner .footer .content{
	display:inline-block;
	margin-top:50px;
	margin-bottom:120px;
	width:900px;
	text-align:left;
}



#main-inner .description .content{
	display:inline-block;
	width:900px;
	text-align:left;
	margin-top:30px;
	margin-bottom:40px;
}

#main-inner .description .content li{
	margin-bottom:10px;
}

#main-inner .description .content,
#main-inner .description .content p{
	font-weight:300;
	font-size:18px;
	line-height:38px;
}

#main-inner .description .content .headline{
	font-size:16px;
	line-height:28px;
	font-weight:400;
	text-transform:uppercase;
	letter-spacing:1px;
}

#main-inner a,
#main-inner a:link,
#main-inner a:visited{
	text-decoration:underline;
	color:#333;
}

#main-inner a:hover{
	text-decoration:none;
	color:#ccc;
}

#main-inner .closeBtn{
	display:inline-block;
	float:right;
	font-size:10px;
	margin-left:5px;
	cursor:pointer;
	text-align:right;
}

#main-inner .header .closeBtn img{
	width:38px;
	height:31px;
	margin-top:12px;
}

#main-inner .footer .closeBtn img{
	width:25px;
	height:20px;
	margin-top:6px;
}

#main-inner .description .content img{
	width:100%;
	height:auto;
	display:block;
	margin-bottom:20px;
}

#main-inner .description .content video{
	width:100%;
	height:auto;
	display:block;
	margin-bottom:20px;
}

#main-inner .description .content .imgcol{
	width:100%;
	display:inline-block;
	margin-bottom:20px;
}

#main-inner .description .content .imgcol img{
	margin-bottom:0px !important;
}


#main-inner .description .content .imgcol_3_00{
	width:32%;
	display:inline-block;
	float:left;
}

#main-inner .description .content .imgcol_3_01{
	width:32%;
	display:inline-block;
    float:left;
	margin-left:2%;
	margin-right:2%;
}

#main-inner .description .content .imgcol_3_02{
	width:32%;
	display:inline-block;
    float:left;
}






#main-inner .copyright{
	font-size:14px;
	font-weight:300;
	margin-right:12px;
	margin-left:0px;
}

#main-inner .cccdi{
	font-family:'High Tower', "MHei", "STHeiti", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	font-size:20px;
	letter-spacing: 1px;
}


.inner-item-header,
.inner-item-content,
.inner-item-footer,
.inner-content{
	display:none;
}


/* --- END ---------------- inner page content ------------------ */







/* ======== Missing ========== */

#division_missing{
	width:700px;
	text-align:center;
	display:inline-block;
	margin:0 0 140px 0;
}

#division_browsers{
	width:840px;
	text-align:center;
	display:inline-block;
	margin:0 0 140px 0;
}
#division_browsers .img{
	width:590px;
	display:inline-block;
	margin-top:30px;
}
#division_browsers .img .col{
	display:inline-block;
	width:20%;
	float:left;
}
/* ---- END ------ Missing ------ */









#main-loading-overlay{
	margin: 0 auto;
	position:fixed;
	z-index:99998;
	width:100%; 
	height:100%;
	background-color:#FFF;
}


#main-loading-overlay #preloader_chi,
#main-loading-overlay #preloader_jp,
#main-loading-overlay #preloader{
	position:relative;
	height:24px;
	top:45%;
	left:0;
	right:0;
	margin-left:auto;
  	margin-right:auto;
	
	font-size:15px;
	font-weight:100;
	text-align:center;
	vertical-align: middle;
	padding-left:14px;
}

#main-loading-overlay #preloader_chi{
	width:122px;
}

#main-loading-overlay #preloader_jp{
	width:134px;
}

#main-loading-overlay #preloader{
	width:180px;
}

#main-loading-overlay #preloader_chi img,
#main-loading-overlay #preloader_jp img,
#main-loading-overlay #preloader img{
	display:block;
	float:left;
	margin-right:10px;
}

#main-loading-overlay #preloader_chi .loading,
#main-loading-overlay #preloader_jp .loading,
#main-loading-overlay #preloader .loading{
	float:left;
	margin-top:1px;
	cursor:default;
	
	color:#AAAAAA;
}






#main-overlay{
	cursor:pointer;
	width:100%;
	height:100%;
	position:absolute;
	z-index:89999;
	background-color:#FFF;
	display:none;
	
	
	/* Theoretically for IE 8 & 9 (more valid) */	
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	
	/* This works in IE 8 & 9 but also 5, 6, 7 */
	filter: alpha(opacity=0);
	
	/* Older than Firefox 0.9 */
	-moz-opacity:0.0;
	
	/* Safari 1.x (pre WebKit!) */
	-khtml-opacity: 0.0;
    
	/* Opera 9+, IE 9+ */
	opacity: 0.0;
}




/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
	clear:both;
}

/*

	//[ Vertical Alignment ]
	
	// older webkit
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-justify-content: center;

    // older firefox 
    display: -moz-box;
    -moz-box-align: center;
    -moz-box-pack: center;

    // IE10
    display: -ms-flexbox;
    -ms-flex-align: center;
    -ms-flex-pack: center;

    // newer webkit 
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-box-pack: center;

    // Standard Form - IE 11+, FF 22+, Chrome 29+, Opera 17+ 
    display: flex;
    align-items: center;
    justify-content: center;
	
*/











/* ==================================== Responsive Framework ================================ */


/*@media only screen and (min-width: 768px) and (max-width: 1024px) {*/

@media only screen and (max-width: 767px) {
	
	#cccdi, #cccdi a{
		font-size:36px;
	}
	
	
	.content_division .division_img .division_img-left,
	.content_division .division_img .division_img-right{
		display:none;
	}
	
	.content_division .division_img .division_img-whole{
		width:100%;
		-webkit-background-size: auto 200%;
   		-moz-background-size: auto 200%;
    	-o-background-size: auto 200%;
    	background-size: auto 200%;
	}
	
	
	.content_division .division_img .division_img-center{
		width:100%;
		height:230px;
		-webkit-background-size:100% auto;
   		-moz-background-size:100% auto;
    	-o-background-size:100% auto;
    	background-size:100% auto;
		background-position:top center;
	}
	
	
	.content_division .division_subtitle{
		font-size:34px;
		line-height:50px;
		text-align:left;
	}
	
	.content_division .division_title{
		font-size:42px;
		line-height:60px;
		margin-top:80px;
		text-align:left;
	}
	
	.content_division .division_description{
		font-size:19px;
		line-height:30px;
		text-align:left;
	}
	
	
	#main-inner .header .content,
	#main-inner .description .content,
	#main-inner .footer .content{
		width:84%;
	}
	
	
	#main-inner .header .content,
	#main-inner .header .content p{
		font-size:33px;
		line-height:48px;
	}
	
	
	#main-inner #closeBtn img{
		width:25px;
		height:auto;
	}
	
	
	#main-inner .description .content .imgcol{
		margin-bottom:10px;
	}
	
	#main-inner .description .content .imgcol_3_00,
	#main-inner .description .content .imgcol_3_01,
	#main-inner .description .content .imgcol_3_02{
		width:100%;
		margin-bottom:10px;
		margin-left:0px;
		margin-right:0px;
	}
	
	
	
	#division_missing,
	#division_browsers{
		width:86%;
		margin-bottom:80px;
	}
	
	/*
	#division_missing .division_description,
	#division_browsers .division_description{
		text-align:justify;
	}
	*/
	
	#division_browsers .img{
		width:100%;
	}
	
	#division_browsers .img .col{
		text-align:left;
		padding-right:2%;
		width:18%;
	}
	
	#division_browsers .img .col img{
		width:100%;
		height:auto;
	}
	
}


@media screen and (min-width: 2000px){
	
	.content_division .division_img .division_img-left,
	.content_division .division_img .division_img-center,
	.content_division .division_img .division_img-right{
		
		-webkit-background-size: 100% auto;
		-moz-background-size: 100% auto;
		-o-background-size: 100% auto;
		background-size: 100% auto;
		
		
		
	}
	
}


/* ==== END ================================ Responsive Framework ================================ */





/* ======================================================== */
/* ====================== Retina ========================== */
/* ======================================================== */

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

	
	
}