@import url(http://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);
/*-------------------------------------------
     基本版面設定區
-------------------------------------------*/	
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;

}
	
body {width: 100%;height: 100%;margin: 0px;padding: 0px;
font-family: 'cwtexhei', 'Varela Round', '微軟正黑體', sans-serif;background-color: #fff;}
img, object, embed, video {max-width: 100%;vertical-align: bottom;border: 0px;}
a,a:link,a:hover,a:active,a:visited{transition: 1s;text-decoration: none;}
/* IE 6 不支援最大寬度，因此寬度預設為 100% */
.ie6 img {width:100%;border: 0px;}
.row{padding-right: 15px;padding-left: 15px;}
.w{padding-right: 10px;padding-left: 10px;}
.rows{padding-right: 0px;padding-left: 0px;}
.rwd-img{width:100%;}

.cd-social-area {
	width: 100%;
	padding-top: 10px;

}

/*---------------------------------- 
      麵包屑導航
---------------------------------- */	
.breadcrumb{
	float: left;
}
ul.breadcrumb {display: block;height: 26px;margin: auto;list-style-type: none;}
ul.breadcrumb > li.crumb.first-crumb {z-index: 300;}
ul.breadcrumb > li.crumb.middle-crumb {z-index: 200;}
ul.breadcrumb > li.crumb.last-crumb {z-index: 100;}
ul.breadcrumb > li.crumb {position: relative;display: inline-block;box-sizing: border-box;float: left;color: #333;font-size: 13px;padding-left: 0px;transition: .2s border-color linear;padding-top: 5px;padding-right: 5px;padding-bottom: 5px;}
ul.breadcrumb > li.crumb:hover,
ul.breadcrumb > li.crumb:hover:after{cursor: pointer;transition: .2s border-color linear;color: #666;}
li.crumb:after,
li.crumb:before {content: '';position: absolute;left: 0;transition: .2s border-color linear;}
li.crumb:after {width: 100%;top: 25px;z-index: -1;}
li.crumb:before {top: 100%;}
.crumb{font-size: 15px;color: #958370;}
/*-------------------------------------------
                loading設定
-------------------------------------------*/	


/*-------------------------------------------
                首頁選單右側浮動社群連結設定
-------------------------------------------*/	
.right-float{
	float: right;
	position: fixed;
	z-index: 1;
	top: 40%;
	width: 25px;
	right: 0px;
	padding-right: 10px;
	display: block;
	color: #999;
}
.right-em{
	color: #999;
	float: left;
	writing-mode: vertical-lr;
	padding-top: 5px;
	padding-bottom: 10px;
	font-size: 100%;
	margin-top: 5px;
	margin-bottom: 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999;
	text-align: center;
	padding-right: 5px;
	padding-left: 5px;
}
.right-em a:link{color: #999;font-size: 100%;}
.right-em a:hover{color: #F60;font-size: 100%;}
.right-em a:visited{color: #999;font-size: 100%;}
.right-em a:active{color: #999;font-size: 100%;}
.right-ems{
	color: #999;
	float: left;
	text-align: center;
	padding-top: 2px;
	padding-bottom: 2px;
	font-size: 126%;
	width: 100%;
}
.right-ems a:link{color: #999;font-size: 100%;}
.right-ems a:hover{color: #F60;font-size: 100%;}
.right-ems a:visited{color: #999;font-size: 100%;}
.right-ems a:active{color: #999;font-size: 100%;}
/*---------------------------------- 
      導航字型設定
---------------------------------- */


/*---------------------------------- 
      選單社群圖示導航
---------------------------------- */	
.icon-area{text-align: center;width: 100%;}
.icon-area a:hover{color: #F90;transition: 1s;text-decoration: none;}
/*---------------------------------- 
      麵包屑導航
---------------------------------- */	
.breadcrumb{
	float: left;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 5px;
}
ul.breadcrumb {display: block;height: 26px;margin: auto;list-style-type: none;}
ul.breadcrumb > li.crumb.first-crumb {z-index: 300;}
ul.breadcrumb > li.crumb.middle-crumb {z-index: 200;}
ul.breadcrumb > li.crumb.last-crumb {z-index: 100;}
ul.breadcrumb > li.crumb {position: relative;display: inline-block;box-sizing: border-box;float: left;color: #333;font-size: 13px;padding-left: 0px;transition: .2s border-color linear;padding-top: 5px;padding-right: 5px;padding-bottom: 5px;}
ul.breadcrumb > li.crumb:hover,
ul.breadcrumb > li.crumb:hover:after{cursor: pointer;transition: .2s border-color linear;color: #666;}
li.crumb:after,
li.crumb:before {content: '';position: absolute;left: 0;transition: .2s border-color linear;}
li.crumb:after {width: 100%;top: 25px;z-index: -1;}
li.crumb:before {top: 100%;}
.crumb{font-size: 15px;color: #958370;}

/*-----------------------------------------------------
                  版權文字區
-----------------------------------------------------*/
#copyright{width: 100%;float: left;background-color: #4d4d4d;}
.copyright-area{width: 100%;margin-right: auto;margin-left: auto;max-width:1170px;}
.copyright-area .content{width: 100%;float: left;padding-top: 15px;padding-bottom: 15px;color: #FFF;}
.copyright-area .gem{width: 33.3333%;float: left;}
.copyright-area .gems{width: 30%;float: left;border-right-width: 1px;border-right-style: solid;border-right-color: #666;margin-right: 1.5%;padding-right: 1.5%;padding-top: 10px;padding-bottom: 10px;}
.copyright-area .gem-text{
	color: #FFF;
	font-size: 15px;
	line-height: 1.75em;
}
.copyright-area .gem-text a{color: #FFF;line-height: 1.55em;}
.copyright-area .gem-text a:link{color: #FFF;line-height: 1.55em;}
.copyright-area .gem-text a:hover{
	color: #F90;
	line-height: 1.55em;
}
.copyright-area .footer-logo{text-align: right;}
.copyright-area .footer-right{color: #dddddd;font-size: 12px;text-align: right;}

/*-----------------------------------------------------
                   主版面設定區
-----------------------------------------------------*/
#wap{width: 100%;position: relative;}
#content{width: 100%;float: left;}
.content{
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	max-width: 1170px;
	padding-top: 0px;
	padding-bottom: 30px;
}

/*-----------------------------------------------------
                   首頁設定區
-----------------------------------------------------*/
.banner-area{	float: left;
	width: 100%;}


.story-bg{
	background-image: url(../images/story/index-bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-image: cover;
	float: left;
	width: 100%;
	position: relative;
}

.story-bg-em{
	float: left;
	width: 100%;
	padding-top: 50px;
	padding-bottom: 50px;
}

.story-bg .eml{
	float: left;
	width: 40%;
}
.story-bg .emr{
	float: left;
	width: 60%;
	padding-top: 200px;
	padding-bottom: 100px;
}
.story-bg h1{
	line-height: 1.75em;
	color: #3c3030;
	font-size: 180%;
}


.story-bg p{
	font-size: 100%;
	line-height: 1.75em;
}

.story-bg-area{
	width: 100%;
	float: left;
	margin-bottom: 20px;
	position: absolute;
	left: 0px;
	top: 0px;
}
.story-bg-area .title-area{
	width: 60px;
	text-align: center;
	padding-top: 0px;
	padding-right: 10%;
	margin-left: auto;
}
.story-bg-area .line{
	width: 1px;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	background-color: #999;
	height: 80px;
}
.story-bg-area .h1{
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	font-size: 136%;
	padding-top: 10px;
	letter-spacing: 2px;
}
.story-bg-area .eng{
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	color: #b29c75;
	font-size: 14px;
}

/*-----------------------------------------------------
                   banner設定區
-----------------------------------------------------*/
.top-circle{border-radius:0 0 100px 100px;
height:50px;}

.top-header{
	float: left;
	width: 100%;
	position: relative;
	}

.header-title{
	width: 100%;
	text-align: right;
	}
.header-title-h1{
	width: 100%;
	text-align: left;
	color: #FFFFFF;
	font-size: 220%;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
	line-height: 1.75em;
	float: left;
}

.header-title-line{
	width: 100%;
	float: left;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: rgba(255, 255, 255, 0.2);
	height: 1px;
}

.header-title-en{
	width: 70%;
	float: left;
	font-size: 20px;
	line-height: 1.55em;
	color: #fff;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
	text-align: left;
	padding-top: 5px;
}


/*-----------------------------------------------------
                   新案設定區
-----------------------------------------------------*/

.projects-bg{
	float: left;
	width: 100%;
	position: relative;
}

.projects-bg .em-area{
	background-image: url(../images/projects/l-bg.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-image: cover;
	float: left;
	width: 100%;
	position: relative;
}

.projects-bg .eml{
	float: left;
	width: 30%;
}
.projects-bg .emr{
	float: left;
	width: 75%;
	padding-left: 25%;
}

.projects-bg .message{
	float: left;
	position: absolute;
	z-index: 1;
	left: 0px;
	bottom: -20px;
	background-color: #4d4040;
	width: 35%;
}

.projects-bg .con{
	float: left;
	padding-top: 50px;
	padding-right: 50px;
	padding-bottom: 50px;
	padding-left: 100px;
}

.projects-bg h1{
	line-height: 1.75em;
	color: #faf2e2;
	font-size: 180%;
}


.projects-bg p{
	font-size: 100%;
	line-height: 1.75em;
	color: #FFF;
}

.projects-bg-area{
	width: 100%;
	float: left;
	margin-bottom: 20px;
	position: absolute;
	left: 0px;
	top: 0px;
}
.projects-bg-area .title-area{
	width: 60px;
	text-align: center;
	margin-right: auto;
	padding-left: 10%;
}
.projects-bg-area .line{
	width: 1px;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	background-color: #CCC;
	height: 80px;
}
.projects-bg-area .h1{
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	font-size: 136%;
	padding-top: 10px;
	letter-spacing: 2px;
}
.projects-bg-area .eng{
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	color: #b29c75;
	font-size: 14px;
}

/*-----------------------------------------------------
                   消息設定區
-----------------------------------------------------*/
.news-area{	background-image: url(../images/news/index-bg.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-image: cover;
	float: left;
	width: 100%;}
.news-area .nem{
	width: 45%;
	float: left;
	position: relative;
	padding-bottom: 25px;
	padding-top: 25px;
	margin-right: 2.5%;
	margin-left: 2.5%;
	margin-bottom: 25px;
}
.news-area .nem-name{
	background-color: #FFF;
	box-shadow: 0px 0px 4px rgba(0%,0%,0%,0.2);
	position: absolute;
	left: -20px;
	top: 25px;
	padding: 10px;
	width: 35px;
	text-align: center;
	font-size: 90%;
	line-height: 16px;
	color: #666;
	z-index: 1;
}
.news-area .nem-img{width: 100%;float: left;}
.news-area .nem-area{width: 100%;float: left;margin-bottom: 10px;padding-bottom: 10px;border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #ececec;padding-top: 10px;}
.news-area .nem-time{
	width: 50%;
	float: left;
	font-size: 100%;
	color: #32a271;
	line-height: 1.55em;
}
.news-area .nem-more{width: 50%;float: left;text-align: right;font-size: 100%;color: #666;}
.news-area .nem-more a:link{
	width: 100%;
	float: left;
	text-align: right;
	font-size: 100%;
	color: #666;
}
.news-area .nem-more a:hover{
	width: 100%;
	float: left;
	text-align: right;
	font-size: 100%;
	color: #099;
}
.news-area .nem-more a:active{
	width: 100%;
	float: left;
	text-align: right;
	font-size: 100%;
	color: #666;
}
.news-area .nem-more a:visited{
	width: 100%;
	float: left;
	text-align: right;
	font-size: 100%;
	color: #666;
}

.news-area .nem-h1{width: 100%;float: left;font-size: 126%;color: #000;line-height: 1.75em;}
.news-area .nem-h2{width: 100%;float: left;font-size: 108%;color: #548c27;line-height: 1.75em;}
.news-area .nem-text{width: 100%;float: left;font-size: 100%;color: #333;line-height: 1.55em;}

.news-name-area{
	width: 100%;
	float: left;
	margin-bottom: 20px;
}
.news-name-area .title-area{
	width: 60px;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}
.news-name-area .line{
	width: 1px;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	background-color: #CCC;
	height: 80px;
}
.news-name-area .h1{
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	font-size: 136%;
	padding-top: 10px;
	letter-spacing: 2px;
}
.news-name-area .eng{
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	color: #b29c75;
	font-size: 14px;
}


/*-----------------------------------------------------
                   自適應設定區
-----------------------------------------------------*/
@media screen and (max-width: 1024px) {
/*-----------------------------------------------------
                   banner設定區
-----------------------------------------------------*/
.top-circle{border-radius:0 0 100px 100px;
height:50px;}

.top-header{
	float: left;
	width: 100%;
	position: relative;
	}

.header-title{
	width: 100%;
	text-align: right;
	}
.header-title-h1{
	width: 100%;
	text-align: left;
	color: #FFFFFF;
	font-size: 180%;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
	line-height: 1.75em;
	float: left;
}

.header-title-line{
	width: 100%;
	float: left;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: rgba(255, 255, 255, 0.2);
	height: 1px;
}

.header-title-en{
	width: 70%;
	float: left;
	font-size: 16px;
	line-height: 1.55em;
	color: #fff;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
	text-align: left;
	padding-top: 5px;
}
}

@media screen and (max-width: 768px) {
/*-------------------------------------------
                主版設定區
-------------------------------------------*/	
.content{
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	max-width: 1170px;
	padding-top: 0px;
	padding-bottom: 30px;
}
	
/*-------------------------------------------
                首頁區
-------------------------------------------*/	
.story-bg .eml{
	padding-top: 15px;
	float: left;
	width: 100%;
}
.story-bg .emr{
	float: left;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
}
.story-bg h1{
	line-height: 1.75em;
	color: #3c3030;
	font-size: 136%;
}


.story-bg p{
	font-size: 100%;
	line-height: 1.75em;
}
	
	
.cd-logo {
	display: block;
	position: absolute;
	top: 50%;
	bottom: auto;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 0.875em;
	z-index: 3;
	width: 150px;
}
.cd-logo img {
  display: block;
}

/*-----------------------------------------------------
                   新案設定區
-----------------------------------------------------*/
.projects-bg .eml{
	float: left;
	width: 100%;
}

.projects-bg-area{
	width: 100%;
	float: left;
	margin-bottom: 20px;
	position: static;
}
.projects-bg .emr{
	float: left;
	width: 100%;
	padding-left: 0%;
}


.projects-bg .message{
	float: left;
	position: static;
	background-color: #4d4040;
	width: 100%;
}

.projects-bg .con{
	float: left;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-left: 0px;
}

.projects-bg h1{
	line-height: 1.75em;
	color: #faf2e2;
	font-size: 180%;
}	
	
.projects-bg-area .title-area{
	width:100%;
	text-align: center;
	margin-right: auto;
	padding-left: 0;
}	
	
/*-------------------------------------------
                首頁選單右側浮動社群連結設定
-------------------------------------------*/	
.right-float{float: right;position: fixed;z-index: 888;top: 6%;width: 25px;right: 0px;padding-right: 10px;display: none;color: #999;}



/*-----------------------------------------------------
                   消息設定區
-----------------------------------------------------*/
.news-area .nem{width: 96%;float: left;position: relative;padding-bottom: 0px;padding-top: 10px;margin-right: 2%;margin-left: 2%;}
.news-area .nem-name{background-color: #FFF;box-shadow: 0px 0px 4px rgba(0%,0%,0%,0.2);position: absolute;z-index: 1;left: 10px;top: 20px;padding: 10px;width: 35px;text-align: center;font-size: 90%;line-height: 16px;color: #666;}
.news-area .nem-time{width: 100%;float: left;font-size: 70%;color: #32a271;line-height: 1.75em;}
.news-area .nem-more{width: 100%;float: left;text-align: left;font-size: 90%;color: #666;line-height: 1.75em;}

/*-----------------------------------------------------
                  版權文字區
-----------------------------------------------------*/
.copyright-area .gem{width: 100%;float: left;}		
.copyright-area .gems{
	width: 100%;
	float: left;
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #666;
	border-right-width: 0px;
}

.copyright-area .footer-logo{text-align:left;}
.copyright-area .footer-right{color: #dddddd;font-size: 12px;text-align: left;}
}