@charset "utf-8";

/* header */
#headerBlank { height: 40px; }

/* menu */
#menu {
	position: relative;
	top: auto;
}
/*banner*/
.banner>img{
	width:100%;
}

/* title */
.indexTitle{
	margin:65px 0 30px 3px;
}

/* cloud */
#cloudBox {
    margin: 0 -5px 0 -15px;
}
.cloud-col {
    width: 20%;
    padding-right: 5px;
}
.cloudBackground { width: 100%; }
.cloudImg {
    top: 28%;
    left: 14%;
}

.cloudMask{
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	display: none;
	background-color:#74c4b7;
	
}
/*
.cloudMask_01, .cloudMask_02, .cloudMask_03, .cloudMask_04{
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	display: none;
}

.cloudMask_01{background: rgba(229, 174, 112, 1);}
.cloudMask_02{background: rgba(203, 85, 136, 1);}
.cloudMask_03{background: rgba(150, 187, 102, 1);}
.cloudMask_04{background: rgba(106, 174, 183, 1);}
*/
.cloudTitle {
    width: 100%;
    font-size: 1.8em;
    margin: 8px auto;
    text-align: center;
}
.cloudDelimiter {
	width: 70%;
	height: 1px;
	border-bottom: 1px #208D6E solid;
	margin: 0px 15%;
}
.cloudSubtitle {
    text-align: center;
    margin-top: 25px;
}
.cloudInfo {
    width: 80%;
    margin: 15px 0% 0% 10%;
    text-align: justify;
}

.cloudMore{
    width: 100%;
    text-align: center;
    margin: 20px 0 0 0;
}

.cloudCloud{
	background-color: #FFF;
    height: 100%;
    width: 28%;
    float: left;
}

.cloudCloud img{
    width: 90%;
    margin: 9.5% 0 0 5%;
}

.cloudBottom{
	width: 100%;
    height: 58px;
    bottom: 0;
	background-color:#329e8a;
}

/*.cloudBottom_01, .cloudBottom_02, .cloudBottom_03, .cloudBottom_04{
    width: 100%;
    height: 80px;
    bottom: 0;
}

.cloudBottom_01{background: rgba(227, 154, 73, 1);}
.cloudBottom_02{background: rgba(201, 47, 123, 1);}
.cloudBottom_03{background: rgba(114, 178, 44, 1);}
.cloudBottom_04{background: rgba(37, 157, 173, 1);}
*/
.cloudMaskTop {
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}

/* case */
.casecontaine{ margin-bottom:40px;}
#caseBackground { width: 100%; }
#caseBox{
	margin-right:-15px
}
#caseMask {
	width: 30%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: #74C5B8;
	padding: 12% 0px;
}
#caseContent {
    width: calc(100% - 50px);
    width: 85% \9;
    margin-left: 25px;
}
#caseTitle {
	font-size: 1.4375em;
	margin-left: 20px;
}
#caseSubTitle {
	font-size: 1.4375em;
	padding: 0px 15px 0px 20px;
}
#caseDelimiter {
	height: 1px;
	background: url(../img/background_dashed.png) repeat-x;
	margin: 15px 0px 20px 0px;
}
#caseInfo { padding: 20px 15px 0px 20px; }
#caseButton {
    bottom: 0px;
    right: 0px;
    padding: 7px 40px;
    color: #FFF;
    background-color: #009C84;
    font-size: 1.3em;
   	transition: background 0.5s ease-in-out;
}

/* news */
#newsContent {
	padding:0;
	margin-top: 0;
}
#newsContentrow {
    margin-right: -3.333%;
    margin-left: 0;
}
.newsItem {
    width: 30%;
    margin: 10px 3.3333% 25px 0px;
    float: left;
    background: #FFFFFF;
    transition: background 0.8s ease-in-out;
    padding: 0;
}
.newsImg {
	margin:10px;
}
.newsImg img { width: 100%; }
.newsTitle {
	font-size: 1.4375em;
	padding: 15px 25px 0px 25px;
	text-align: left;
}
.newsInfo {
    padding: 10px 25px 55px 25px;
}

.newsDate{
	bottom: 10px;
    right: 10px;
    background-color: #009C84;
/*    height: 30px; */
    color: #FFF;
    font-size: 1.2em;
/*    text-align: center; */
    padding: 5px 8px 3px;
	transition: background 0.5s ease-in-out;
}
.newsBorder {
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	border: 0px solid #74C5B8;
	transition: border 0.5s ease-in-out;
}
.newsBorderHover {
	border: 10px solid #74C5B8;
	transition: border 0.5s ease-in-out;
}

/* Bootstrap */
/*768(平板直)*/
@media (max-width: 767px) { 
	/* body */
	.paddingRight15px{ padding:0;}
	/*news*/
	.newsImg {margin: 3px;}
	.newsTitle {font-size: 1.3125em;padding: 15px 3px 0px 3px;}
	.newsInfo { padding: 20px 3px 35px 3px;}
	
	/*cloud*/
	.cloudCloud img {
    width: 70%;
    margin: 15% 0 0 13%;}
	.cloudTitle {
    font-size: 2em;
    margin: 5% 28% 2% 0%;}

	.cloudBottom_01, .cloudBottom_02, .cloudBottom_03, .cloudBottom_04{
    width: 100%;
    height: 80px;}
	.cloudInfo {
    width: 89%;
    margin: 5% 0% 0% 5%;
	font-size:1.8em;}
	#caseBox {margin-right: 15px;}
}
/*480(手機版)*/
@media (max-width: 480px) { 
/* body */
	.paddingRight15px{ padding:0;}
	/*banner*/
	#photoFade .control {
    zoom: 0.6;
	}
	/* cloud */
	#cloudBox {
    margin:0;
	}
	.cloud-col {
    width: 33.3333%;
    margin-bottom: 10px;
	}
	
	.cloudCloud img {
    width: 70%;
    margin: 20% 0 0 13%;}
	
	.cloudItem{    padding: 0 3.5%;}
	
	/*title*/
	.indexTitle {
    margin: 25px 0 10px 3px;
	}
	.indexTitle img {
    height: 21px;
	}
	.casecontainer{ margin-top:-10px;}
	
	
	/*news*/
	#newsContentrow {
    margin-right: -10px;
    margin-left: -10px;
	}
	#newsContent {
    margin-top: 0;
	}
	.newsItem {
    width: 90%;
    margin-left: 5%;
	margin-bottom: 8px;
	}	
	.newsTitle {
    font-size: 1.188em;
    padding: 15px 10px 0px 10px;
    margin-bottom: 40px;
	}
	.newsInfo {
		display:none;
	}
	.newsDate {
    font-size: 0.938em;
	}
	/*case*/
	#caseContent {
    width: 100%;
    margin-left: 0;
	}
	#caseBox {
    margin-right: -10px;
    margin-left: -10px;
	overflow: hidden;
	}
	#caseBackground {
    width: 125%;
    position: relative;
    right: 19%;
	}
	#caseButton {
    padding: 5px 30px;
    font-size: 1em;
	}
	#caseInfo { padding: 5px 1em 60px 1em; }
	#caseMask {
		position: relative;
		padding: 15px 0px 30px;
	}	
	#caseTitle {
		text-align: left;
		margin-left: 15px;
		margin-bottom: 5px;
		font-size:1.188em;
	}
	#caseSubTitle {
    padding: 0px 15px 0px 15px;
	font-size:1.188em;
	}
	
}
@media (min-width: 768px) and (max-width: 979px) { 
	/* header */
	#headerBlank { height: 60px; }

	/* cloud */
	.cloudImg { width: 80%; }
	

	/* case */
	.casecontaine{ margin-bottom:15px;}
	#caseMask { padding: 3% 0px;  position: relative;}
	#caseContent {
    width: 90%;
    margin-left: 5%;
	}
	#caseBox {
    margin: 0 -15px;
	}
	#caseTitle, #caseSubTitle { font-size: 1.3125em; }
	#caseDelimiter { margin: 10px 0px 13px 0px; }

	/* news */
	.newsItem {
    width: 97%;
	}
	.newsTitle {
		font-size: 1.3125em;
		padding: 25px 10px 0px 10px;
	}
	

}
/*1024*/
@media (min-width: 980px) and (max-width: 1140px) {
		/* cloud */
	.cloudTitle {     font-size: 1.1em; margin: 8.5% 28% 2% 0%;}
	.cloudCloud img {    margin: 15% 0 0 5%;}
	.cloudImg { width: 80%; }
	/*col-4 */
	.cloudSubtitle {
    text-align: center;
    margin-top: 15px;
	}
	.cloudInfo {
    width: 86%;
    margin: 8px 0% 0% 8%;
    font-size: 0.938em;
    line-height: 1.563em;
	}
	.cloudMore {
    margin: 15px 0 0 0;
    font-size: 0.938em;
	}
	.cloudBottom {
    height: 40px;
	}
	.cloudTitle {
    font-size: 1.188em;
	margin: 8px auto;
	}
	/* case */
	#caseTitle, #caseSubTitle { font-size: 1.3125em; }
	#caseMask {
	position: absolute;
    padding: 6% 0;
	}
	#caseContent {
    width: calc(100% - 20px);
    margin-left: 10px;
	}

	/* news */
	.newsItem { width: 30%; }
	.newsTitle { font-size: 1.3125em; }
	.cloudBottom_01, .cloudBottom_02, .cloudBottom_03, .cloudBottom_04 {
   		height: 60px;}

}
/*1280*/
@media (min-width: 1140px) and (max-width: 1300px) { 
	.indexTitle {
		margin: 45px 0 15px 3px;
	}
}
/*1336*/
@media (min-width: 1301px) and (max-width: 1439px) {
		/* cloud */
	
	.cloudTitle { font-size: 1.4375em; }
	.cloudImg { width: 80%; }

	/* case */
	#caseTitle, #caseSubTitle { font-size: 1.3125em; }

	/* news */
	.newsItem { width: 30%; }
	.newsTitle { font-size: 1.3125em; }
    }
/*1440*/
@media (min-width: 1440px) {
	#headerFunction { right: 1%; }
	/* news */
}


@media (max-width: 1440px) and (min-width: 1440px) {
	.newsItem { width: 30%; }
}