@import url(http://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);
/*-------------------------------------------
                 基本版面設定區
-------------------------------------------*/
html{ height: 100%;scroll-behavior: smooth;}		
body {width: 100%;height: 100%;margin: 0px;padding: 0px;
font-family: 'cwtexhei', 'Varela Round', '微軟正黑體', sans-serif;background-color: #f6f2ee;}
img, object, embed, video {max-width: 100%;vertical-align: text-top;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;
}
.rows{padding-right: 25px;padding-left: 25px;}
.rowss{padding-right: 15px;padding-left: 15px;}
.rowsss{padding-right: 15px;padding-left: 15px;}
.rowssss{padding-right: 15px;padding-left: 15px;}
.row-content{
	padding-right: 80px;
	padding-left: 80px;
}
.row-contents{
	padding-right: 0px;
	padding-left: 80px;
}

.row-contenta{
	padding-right: 0px;
	padding-left: 0px;
}

.rwd-img{width:100%;}

section {
	display: block;
	height: 100vh;
	color: #FFFFFF;
}

/*------------------------------------------ 
                 選單位置
------------------------------------------ */

.left-menu{
	background-color: ##003d56;
	float: left;
	width: 64px;
	height: 100vh;
	max-width: 100vh;
	position: absolute;
	z-index: 999;
	left: 0px;
	top: 0px;
	color: #FFF;
}

/*------------------------------------------ 
                 文字方向位置
------------------------------------------ */	
.text-left{float: left;width: 100%;text-align: left;}
.text-content{float: left;width: 100%;text-align: content;}


/*------------------------------------------ 
                  麵包屑導航
------------------------------------------ */	
.breadcrumb{
	float: left;
	position: fixed;
	left: 35px;
	width: 100%;
	top: 5px;color: #666;
}
ul.breadcrumb {display: block;height: 26px;margin: auto;list-style-type: none;}
ul.breadcrumb > li.crumb.first-crumb {
	z-index: 300;
	color: #333;
}
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 a:link{transition: .2s border-color linear;color: #666;}
li.crumb a:active{transition: .2s border-color linear;color: #666;}
li.crumb a:visited{transition: .2s border-color linear;color: #666;}
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: #b79b6a;
}

/*------------------------------------------ 
                   分頁
------------------------------------------ */
#pagination{float: left;width: 100%;text-align: center;margin-bottom: 15px;margin-top: 15px;padding-top: 10px;padding-bottom: 10px;}
ul.pagination {display: inline-block;padding: 0;margin: 0;}
ul.pagination li {display: inline;}
ul.pagination li a {color: #333;float: left;text-decoration: none;border-radius: 20px;font-size: 90%;padding-top: 2px;
padding-right: 14px;padding-bottom: 2px;padding-left: 14px;border-radius: 50px;}
ul.pagination li a.active {color: #FFF;border-radius: 5px;background-color: #99CC00;}
ul.pagination li a:hover:not(.active) {color: #FC0;}

/*-----------------------------------------------------
                   主版面設定區
-----------------------------------------------------*/
#wap{float: left;width: 100%;position: relative;}
.content{width: 100%;margin-right: auto;margin-left: auto;max-width:1280px;}
.contents{width: 100%;margin-right: auto;margin-left: auto;max-width:1600px;}
.header{float: left;width: 100%;}
.main{
	float: left;
	width: 100%;
	position: relative;
	background-size: contain;
	background-image: url(../images/story/brand-body.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}
.mains{
	float: left;
	width: 100%;
	padding-top: 15px;
	padding-bottom: 15px;
}

.content-wap{float: left;width: 100%;}

/*-----------------------------------------------------
                   主橫幅 設定區
-----------------------------------------------------*/
.header-area{width: 100%;float: left;}
.header-area .heml{width: 50%;float: left;position: relative;}
.header-area .hemr{width: 50%;float: left;}
.header-area .video-icon{
	position: absolute;
	right: 10px;
	bottom: 10px;
}

/*-----------------------------------------------------
                   品牌介紹 設定區
-----------------------------------------------------*/
.brand-area{
	width: 100%;
	float: left;
}
.brand-area-title{
	float: left;
	font-size: 230px;
	color: #f0e9e2;
	position: absolute;
	left: 0px;
	top: 0px;
	font-family: "GT Super Display Trial";
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}

.brand-area .bem{
	width: 50%;
	float: left;
	padding-left: 25%;
}

.brand-area .beml{
	width: 60%;
	float: left;
	padding-left: 4%;
}
.brand-area .bemr{
	width: 40%;
	float: left;
}


.brand-area .brand-h1{
	font-size: 260%;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	height: 260px;
	color: #003d56;
	font-family: "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;
	font-weight: bold;
	padding-top: 80px;
	padding-left: 6%;
}


.brand-area .brand-ptext{
	font-size: 18px;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	height: 700px;
	padding-bottom: 200px;
}

.brand-area .title-area{
	width: 100%;
	text-align: left;
	padding-top: 40px;
}
.brand-area .line{
	width: 100%;
	background-color: #CCC;
	height: 1px;
	margin-bottom: 20px;
	max-width: 50px;
}
.brand-area .h1{
	text-align: left;
	font-size: 148%;
	letter-spacing: 1px;
	font-family: "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;
	font-weight: bold;
	color: #4c4c4c;
}

.brand-area .h2{
	text-align: left;
	font-size: 100%;
	letter-spacing: 1px;
	font-size: 108%;
	color: #333;
	line-height: 1.55em;
}
.brand-area .h3{
	text-align: left;
	color: #666;
	font-size: 24px;
	line-height: 1.75em;
	font-family: 'Lora', serif;
	font-weight: normal;
}

.brand-area .eng{
	text-align: left;
	color: #c0a67e;
	font-size: 28px;
	text-transform: uppercase;
	line-height: 1.25em;
	font-family: 'Lora', serif;
}

.brand-area .p-img{
	text-align: left;
	width: 80px;
	float: left;
}
.brand-area .p-con{
	text-align: left;
	width: 40%;
	float: left;
	padding-top: 15px;
}

.brand-area .p-cons{
	text-align: left;
	width: 22%;
	float: right;
	font-size: 18px;
	padding-top: 15px;
	line-height: 1.55em;
	font-family: "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;
	font-weight: bold;
	color: #333;
}

/*-----------------------------------------------------
                   關於我們 設定區
-----------------------------------------------------*/
.story-area{
	width: 100%;
	float: left;
	background-image: url(../images/story/story-body.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	padding-top: 80px;
	padding-bottom: 80px;
}

.story-area .eng{
	width: 100%;
	float: left;
	line-height: 2em;
	font-family: "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;
	color: #977355;
}

.story-area .h1{
	width: 100%;
	float: left;
	line-height: 1.05em;
	color: #003d56;
	text-align: left;
	font-size: 260%;
	font-weight: bold;
	font-family: "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;
}

.story-area .ptext{
	width: 100%;
	float: left;
	line-height: 1.55em;
	color: #333;
	padding-top: 15px;
}
.story-area .ptexts{
	width: 100%;
	margin-right: auto;
	text-align: left;
	max-width: 560px;
}

.story-area .sml{
	width: 50%;
	float: left;
}
.story-area .smr{
	width: 50%;
	float: left;
}

/*-----------------------------------------------------
                   最新消息 設定區
-----------------------------------------------------*/
.news-area{width: 100%;float: left;}
.news-areas{
	width: 100%;
	float: left;
	background-image: url(../images/news/body-time.png);
	background-repeat: no-repeat;
	background-position: left bottom;
}

.news-area .nml{
width: 20%;
float: left;
}
.news-area .nmr{
width: 80%;
float: left;
}
.news-area .title-area{
	width: 100%;
	text-align: left;
}
.news-area .line{
	width: 100%;
	background-color: #CCC;
	height: 1px;
	margin-bottom: 20px;
	max-width: 50px;
}
.news-area .h1{
	text-align: left;
	font-size: 136%;
	letter-spacing: 1px;
	font-family: "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;
	font-weight: bold;
	color: #4c4c4c;
}

.news-area .h2{
	text-align: left;
	font-size: 100%;
	letter-spacing: 1px;
	font-size: 108%;
	color: #333;
	line-height: 1.55em;
}
.news-area .h3{
	text-align: left;
	color: #666;
	font-size: 24px;
	line-height: 1.75em;
	font-family: 'Lora', serif;
	font-weight: normal;
}

.news-area .eng{
	text-align: left;
	color: #c0a67e;
	font-size: 36px;
	text-transform: uppercase;
	line-height: 1.75em;
	font-family: 'Lora', serif;
}

.news-area .p-img{
text-align: left;
width: 100%;
float: left;
}
.news-content{
	float: left;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 10px;
}

.c-content{
	float: left;
	width: 100%;
	margin-top: 20px;
	margin-bottom:0px;
}

.news-area-em{
	float: left;
	width: 50%;
	margin-bottom: 20px;
}

.news-area-ems{
	float: left;
	width: 33.3333%;
	margin-bottom: 20px;
}

.news-area-con{
	float: left;
	width: 100%;
	background-color: #FFF;
	box-shadow: 0 0px 6px rgba(0, 0, 0, 0.1);
	position: relative;
	padding-bottom: 10px;
}

.news-area-con .time-area{
	float: left;
	width: 100%;
	color: #FFF;
}
.news-area-con .time-area .t1{
	float: left;
	font-size: 15px;
	width: 50%;
	text-align: left;
	color: #459070;
}
.news-area-con .time-area .t2{
	float: left;
	width: 50%;
	text-align: right;
	color: #666;
}
.news-area-con .p-img{
	float: left;
	width: 100%;
}

.news-area-con .p-h1{
	float: left;
	width: 100%;
	font-size: 136%;
	line-height: 2em;
	color: #003d56;
	font-weight: bold;
	padding-top: 5px;
}

.news-area-con .p-item{
	float: left;
	width: 100%;
	font-size: 15px;
	line-height: 1.55em;
	color: #333333;
}

.news-area-con .p-area{
	float: left;
	width: 100%;
	margin-top: 5px;
	padding-top: 10px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #ececec;
	padding-bottom: 10px;
	font-size: 14px;
}


.news-area-icon{
	float: left;
	width: 100%;
	text-align: center;
}
.news-btn-icon{margin: 2px;}

.news-mains{width: 100%;float: left;padding-top: 0px;padding-bottom: 0px;}
.news-mains .times{
	width: 100%;
	float: left;
	color: #FF9900;
	font-size: 80%;
	padding-top: 10px;
	line-height: 1.75em;
}
.news-mains .title-h1{
	width: 100%;
	float: left;
	color: #003399;
	font-size: 136%;
	line-height: 2em;
}
.news-mains .title-h2{width: 100%;float: left;color: #4c7838;font-size: 118%;line-height: 2em;}
.news-mains .text-p{width: 100%;float: left;color: #333;font-size: 100%;line-height: 1.75em;}
.news-mains .area{
	width: 100%;
	float: left;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #ececec;
	border-bottom-color: #ececec;
	margin-top: 5px;
	margin-bottom: 0px;
	padding-top: 10px;
	padding-bottom: 20px;
}

.news-area-cons{
	float: left;
	width: 100%;
	line-height: 1.75em;
}

.news-area-cons .p-h1{
	float: left;
	width: 100%;
	font-size: 148%;
	line-height: 2em;
	color: #045373;
	font-weight: bold;
}
.news-area-cons .t1{
	float: left;
	font-size: 15px;
	width: 100%;
	text-align: left;
	color: #459070;
}

.news-area-cons .p-icon{
	float: left;
	width: 20%;
	margin-left: 80%;
}


.news-area-cons .ps{
	float: left;
	padding-top: 6px;
	padding-bottom: 6px;
}
.news-area-cons .pss{
	float: left;
	line-height: 1.75em;
	width: 36px;
}

.news-area-cons .p-area{
	float: left;
	width: 100%;
	padding-top: 20px;
	padding-bottom: 20px;
}

.news-area-cons .p-areas{
	float: left;
	width: 100%;
	padding-top: 0px;
	padding-bottom: 0px;
}


/*-----------------------------------------------------
                   熱銷新案 設定區
-----------------------------------------------------*/
.hot-case-area{
	width: 100%;
	float: left;
	background-image: url(../images/hotcase/hotcase-body.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-attachment: scroll;
}
.hot-case-area .title-area{
	width: 250px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.hot-case-area .line{
	width: 100%;
	background-color: #CCC;
	height: 1px;
	margin-bottom: 20px;
	max-width: 50px;
	margin-right: auto;
	margin-left: auto;
}
.hot-case-area .h1{
	text-align: center;
	font-size: 136%;
	letter-spacing: 1px;
	font-family: "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;
	font-weight: bold;
	color: #4c4c4c;
}

.hot-case-area .h2{
	text-align: center;
	font-size: 100%;
	letter-spacing: 1px;
	font-size: 108%;
	color: #333;
	line-height: 1.55em;
}
.hot-case-area .h3{
	text-align: center;
	color: #666;
	font-size: 24px;
	line-height: 1.75em;
	font-family: 'Lora', serif;
	font-weight: normal;
}

.hot-case-area .eng{
	text-align: center;
	color: #c0a67e;
	font-size: 36px;
	text-transform: uppercase;
	line-height: 1.75em;
	font-family: 'Lora', serif;
}

.hot-case-area .p-img{
text-align: center;
width: 100%;
float: left;
}

/*--------------- 熱銷新案 區塊設定區 --------------------*/
.hot-case-area .box-area{
	width: 100%;
	float: left;
	box-shadow: 0 0px 8px rgba(0, 0, 0, 0.1);
	background-color: #FFF;
	margin-top: 20px;
	margin-bottom: 10px;
}

.hot-case-area .eml{
width: 90%;
float: left;
}

.hot-case-area .emr{
	width: 10%;
	float: left;
	text-align: center;
	padding-bottom: 20px;
}

.box-content{
	width: 100%;
	float: left;
	padding-top: 10px;
	padding-bottom: 50px;
}

.box-content .eml{
	width: 30%;
	float: left;
	line-height: 1.75em;
}
.box-content .h1{
	width: 100%;
	float: left;
	line-height: 1.75em;
	color: #003d56;
	text-align: left;
	font-size: 180%;
	font-weight: bold;
}
.box-content .h2{
	width: 100%;
	float: left;
	line-height: 1.75em;
	color: #6da047;
	text-align: left;
	font-size: 118%;
}

.box-content .emr{
	width: 70%;
	float: left;
	line-height: 1.75em;
	text-align: left;
}

.btn-areas{
	width: 100%;
	float: left;
	line-height: 1.75em;
	font-size: 100%;
	text-align: center;
}

.btn-areas:link {color: #333;}
.btn-areas:visited {color: #333;}
.btn-areas:hover {color: #d3b382;}

.btn-dot{
	width: 80%;
	float: left;
	margin-top: 5px;
	padding-top: 5px;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #CCC;
	height: 2px;
	margin-right: 10%;
	margin-left: 10%;
}

/*--------------- 熱銷新案 內頁區塊設定區 --------------------*/

.case-body{
	width: 100%;
	float: left;
	background-image: url(../images/hotcase/hotcase-body.jpg);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-attachment: scroll;
}
.case-area{
	float: left;
	width: 100%;
	margin-bottom: 200px;
	background-color: #f6f2ee;
}
	
.case-area .grem-l{	float: left;
	width: 50%;}
.case-area .grem-l-r{	float:right;
	width: 50%;}
	
.case-area .grem-ls{
	float: left;
	width: 50%;
	position: relative;
}
	
.case-area .grem-r{
	float: left;
	width: 50%;
	position: relative;
	background-color: #f6f2ee;
}	
.grem-rx{
	float: left;
	width: 100%;
	position: relative;
}

.grem-rx-con{
	float: left;
	width: 50%;
	position: absolute;
	background-color: #f6f2ee;
	top: 50px;
	left: 60px;
	}
	
.case-area .grem-rs{
	float: left;
	width: 100%;
	position: absolute;
	top: 50px;
	left: -60px;
	background-color: #f6f2ee;
}	

.case-area .grem-ras{
	float: left;
	width: 100%;
	position: absolute;
	top: 30px;
	left: 0px;
	background-color: #f6f2ee;
}
.case-area-con{
	float: left;
	width: 90%;
	padding-top: 5%;
	padding-right: 0%;
	padding-bottom: 5%;
	padding-left: 10%;
}

.case-title{
	float: left;
	width: 100%;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #ececec;
	margin-bottom: 15px;
}

.case-title-h1{
	float: left;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #d5b686;
	font-size: 160%;
	line-height: 1.75em;
	color: #333;
}


.case-text{
	float: left;
	width: 100%;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #ececec;
	line-height: 1.55em;
	padding-bottom: 10px;
}

.case-texts{
	float: left;
	width: 100%;
	line-height: 1.75em;
	padding-bottom: 10px;
}


.case-text-h2{
	line-height: 1.55em;
	font-size: 136%;
	color: #3f5c7d;
	font-weight: bold;
}

.case-icon{
	float: left;
	width: 100%;
	padding-top: 10px;
}

.case-icon-a{
	float: left;
	text-align: center;
	font-size: 100%;
	color: #333;
	padding: 10px;
}

.case-icons{
	width: 100%;
	padding-top: 10px;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	max-width: 255px;
}


.case-icon-as{
	float: left;
	text-align: center;
	font-size: 100%;
	color: #333;
	padding: 10px;
}
.cases-area{
	float: left;
	width: 100%;
	padding-top: 20px;
	padding-bottom: 30px;
}

.cases-area .em{
	float: left;
	width: 100%;
}

.cases-area .eml{
	float: left;
	width: 20%;
}

.cases-area .emr{
	float: left;
	width: 80%;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #CCC;
	position: relative;
	padding-bottom: 30px;
}

.cases-area .title-e{
	float: left;
	width: 100%;
	font-size: 126%;
	line-height: 1.75em;
	color: #d2b972;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
}

.cases-area .title-h1{
	float: left;
	width: 100%;
	font-size: 136%;
	line-height: 0.9em;
	color: #333;
	text-align: left;
}

.cases-area .title-line{
	width: 12%;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #d2b972;
	float: left;
	margin-top: 10px;
}

.cases-area .triangle{
	float: left;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 0 8px 10px;
	border-color: transparent transparent transparent #d2b872;
	position: absolute;
	left: 0px;
	top: 0px;
}
.h-icon{
	float: left;
	width: 100%;
	margin-top: 15px;
	padding-top: 15px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #dadada;
}

.h-icon .icona{
	float: left;
	line-height: 1.75em;
	color: #886a49;
	font-size: 100%;
	text-align: center;
	margin-top: 0px;
	margin-right: 6px;
	margin-left: 0px;
	margin-bottom: 10px;
}

.h-icon .icona a:link{
	float: left;
	line-height: 1.75em;
	color: #886a49;
	font-size: 100%;
	text-align: center;
	margin-top: 0px;
	margin-right: 6px;
	margin-left: 6px;
}

.h-icon .icona a:hover{
	float: left;
	line-height: 1.75em;
	color: #993300;
	font-size: 100%;
	text-align: center;
	margin-top: 0px;
	margin-right: 6px;
	margin-left: 6px;
}

.h-icon .icona a:active,a:visited{
	float: left;
	line-height: 1.75em;
	color: #886a49;
	font-size: 100%;
	text-align: center;
	margin-top: 0px;
	margin-right: 6px;
	margin-left: 6px;
}



.h-icon .icon-circles{
	clip-path: circle(50% at 50% 50%);
	width: 80px;
	height: 80px;
	border-radius: 80px;	/* 高度 */
	background-color: #FFF;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}

.hbox{
	float: left;
	width: 90%;
	padding-top: 10%;
	padding-right: 0%;
	padding-bottom: 10%;
	padding-left: 10%;
}


.h-category{
	float: left;
	width: 100%;
	font-size: 16px;
	line-height: 1.55em;
	color: #856b4d;
}
.h1{
	float: left;
	width: 100%;
	font-size: 28px;
	line-height: 1.55em;
	font-family: "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;
	color: #003d56;
	font-weight: bold;
}
.h2{
	float: left;
	width: 100%;
	font-size: 22px;
	line-height: 1.55em;
	font-family: "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;
	color: #6da047;
	font-weight: bold;
}
.ptext{
	float: left;
	width: 100%;
	line-height: 1.75em;
}

.h-icons{
	width: 100%;
	max-width: 300px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 20px;
}

.h-icons .icona{
	float: left;
	line-height: 1.75em;
	color: #886a49;
	font-size: 100%;
	text-align: center;
	margin-top: 0px;
	margin-right: 6px;
	margin-left: 0px;
	margin-bottom: 10px;
}

.h-icons .icona a:link{
	float: left;
	line-height: 1.75em;
	color: #886a49;
	font-size: 100%;
	text-align: center;
	margin-top: 0px;
	margin-right: 6px;
	margin-left: 6px;
}

.h-icons .icona a:hover{
	float: left;
	line-height: 1.75em;
	color: #993300;
	font-size: 100%;
	text-align: center;
	margin-top: 0px;
	margin-right: 6px;
	margin-left: 6px;
}

.h-icons .icona a:active,a:visited{
	float: left;
	line-height: 1.75em;
	color: #886a49;
	font-size: 100%;
	text-align: center;
	margin-top: 0px;
	margin-right: 6px;
	margin-left: 6px;
}



.h-icons .icon-circles{
	clip-path: circle(50% at 50% 50%);
	width: 80px;
	height: 80px;
	border-radius: 80px;	/* 高度 */
	background-color: #FFF;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}


/*-----------------------------------------------------
                   熱銷新案 內容設定區
-----------------------------------------------------*/
#hotcases-area{
	float: left;
	width: 100%;
	position: relative;
}
.hotcases-area{	float: left;width: 100%;}
.hotcases-area .eml{
	float: left;
	width: 15%;
	padding-top: 200px;
}
.hotcases-area .emr{float: left;width: 85%;}
.hotcases-area .logo-area{
	float: left;
	background-color: #f6f2ee;
	padding: 40px;
	position: absolute;
	left: 10px;
	bottom: 20px;
	z-index: 1;
}
.h-line{
	float: left;
	background-color: #856b4d;
	height: 1px;
	width: 50px;
	margin-top: 10px;
	margin-right: 5px;
}
.h-lines{
	float: left;
	color: #856b4d;
}

.p-icons{
	float: left;
}
.ps{
	float: left;
	padding-top: 6px;
	padding-bottom: 6px;
}
.pss{
	float: left;
	line-height: 1.75em;
	width: 44px;
}
.p-area{
	float: left;
	width: 100%;
	padding-top: 20px;
	padding-bottom: 20px;
}

.main-area{
	float: left;
	width: 100%;
	padding-top: 60px;
	padding-bottom: 20px;
}

.main-area .title-con{
	float: left;
	width: 100%;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #d8d8d8;
	margin-bottom: 20px;
	margin-top:20px;
}

.main-area .title-name{
	float: left;
	line-height: 0.9em;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #e4cf96;
	font-size: 126%;
	color: #333;
	padding-bottom: 10px;
}
.main-area .title-eng{
	float: left;
	width: 100%;
	font-size: 160%;
	line-height: 10px;
	color: #d2b972;
	text-transform: uppercase;
	font-family: "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;
}
.main-area h1{
	float: left;
	width: 100%;
	font-size: 200%;
	line-height: 12px;
	color: #003d56;
	font-family: "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;
}

.main-area h2{
	float: left;
	width: 100%;
	font-size: 148%;
	line-height: 18px;
	color: #6da047;
	font-family: "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;
}

.main-area .text-p{
	float: left;
	width: 100%;
	line-height: 1.75em;
}

/*-----------------------------------------------------
                   歷年業績 首頁主版面設定區
-----------------------------------------------------*/

.performance-area{
	width: 100%;
	float: left;
	background-image: url(../images/performance/performance-body.jpg);
	background-repeat: no-repeat;
	background-position: right top;
	padding-bottom: 40px;
}
.performance-area .title-areap{
	width: 100%;
	float: left;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #dadada;
	margin-bottom: 30px;
	margin-top: 20px;
}

.performance-area .name-lines{
	width: 30px;
	float: left;
}

.performance-area .name-btn{
	float: left;
	line-height: 1.75em;
	color: #333;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #f6f2ee;
	font-size: 108%;
}

.performance-area .name-btn:hover{
	float: left;
	line-height: 1.75em;
	color: #0066CC;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #024f6f;
}


.performance-area .current{
	float: left;
	line-height: 1.75em;
	font-size: 108%;
	color: #024f6f;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #024f6f;
}

.performance-area .per-h1{
	width: 100%;
	float: left;
	text-align: left;
	color: #003d56;
	font-size: 200%;
	font-family: "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;
	font-weight: bold;
	line-height: 1.25em;
	padding-bottom: 10px;
}

.performance-area .per-text{
	width: 100%;
	text-align: left;
	color: #000;
	font-size: 106%;
	line-height: 1.75em;
	max-width: 880px;
	margin-right: auto;
}


.per-main-area{
	width: 100%;
	text-align: left;
}

.per-main-area .em{
	width: 48%;
	position: relative;
	float: left;
	margin-right: 2%;
	margin-bottom: 90px;
}

.per-main-area .em-img{
	width: 100%;
	text-align: left;
}

.per-main-area .em-name{
	text-align: left;
	position: absolute;
	z-index: 1;
	right: 0px;
	background-color: #f6f2ee;
	bottom: -60px;
	width: 90%;
	padding-top: 30px;
	padding-right: 30px;
	padding-bottom: 0px;
	padding-left: 30px;
}

.per-main-area .eml{
	width: 15%;
	float: left;
}
.per-main-area .emr{
	width: 85%;
	text-align: left;
	float: left;
	padding-top: 75px;
}

.per-main-area .title{
	width: 100%;
	text-align: center;
	font-size: 180%;
	font-family: "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;
	font-weight: bold;
	line-height: 1.25em;
	color: #003d56;
	float: left;
}
.per-main-area .title-h1{
	width: 100%;
	text-align: left;
	font-size: 128%;
	font-family: "Noto Serif TC", Times, "Times New Roman", "微軟正黑體", serif;
	line-height: 1.55em;
	color: #333;
}

.per-main-area .lines{
	float: left;
	text-align: center;
	width: 100%;
}


.per-main-area .year{
	width: 100%;
	text-align: center;
	font-size: 200%;
	font-family: "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;
	font-weight: normal;
	line-height: 1.25em;
	color: #a48b66;
	float: left;
}


.years{
	font-size: 108%;
	font-family: "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;
	font-weight: normal;
	color: #a48b66;
}

.texts{
	font-size: 16px;
	font-family: "Noto Serif TC", Times, "Times New Roman", "微軟正黑體", serif;
	font-weight: normal;
	color: #333;
}


.per-mains-area{
	float: left;
	width: 100%;
}

.per-mains-area .pbox{
	float: left;
	width: 33.3333%;
}
.per-mains-area-h1{
	width: 100%;
	float: left;
	text-align: center;
	line-height: 1.75em;
	padding-top: 10px;
	padding-bottom: 10px;
}

/*-----------------------------------------------------
                   工程進度 首頁主版面設定區
-----------------------------------------------------*/

.project-area{float: left;width: 100%;position: relative;background-size: cover;background-image: url(../images/project-img.jpg);background-repeat: no-repeat;background-position: center top;}
.ms{float: left;width: 100%;position: absolute;bottom:0px;}

.login-area{width: 100%;
	float: left;}
	
.login-area .projects{
	width: 100%;
	float: left;
	text-align: center;
	padding-bottom: 20px;
}

.login-area .p-area{
	width: 100%;
	max-width: 900px;
	margin-right: auto;
	margin-left: auto;
}
.login-area .pl{
	width: 30%;
	float: left;
	text-align: left;
	color: #faead5;
	font-size: 260%;
	font-family: "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;
	font-weight: bold;
	text-shadow:0px 0px 5px rgba(0,0,0,0.6);
}

.login-area .pr{
	width: 70%;
	float: left;
	text-align: left;
	color: #FFF;
	font-size: 108%;
	line-height: 1.75em;
	text-shadow:0px 0px 5px rgba(0,0,0,0.6);
}

.login-area .p-areas{
	width: 100%;
	max-width: 900px;
	margin-right: auto;
	margin-left: auto;
}
		
.login-area .pls{
	width: 28%;
	float: left;
	text-align: left;
	color: #faead5;
	font-size: 260%;
	font-family: "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;
	font-weight: bold;
	text-shadow: 0px 0px 5px rgba(0,0,0,0.6);
}

.login-area .prs{
	width: 72%;
	float: left;
	text-align: left;
	color: #FFF;
	font-size: 108%;
	line-height: 1.75em;
	text-shadow: 0px 0px 5px rgba(0,0,0,0.6);
}	
.login-area .coleml{width: 40%;
	float: left;}	
.login-area .colemr{
	width: 100%;
	float: left;
	text-align: center;
	margin-bottom: 250px;
}
	
.login-area .col{width: 33.3333%;
	float: left;text-align: center;}	
.login-area .cons{
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	max-width: 560px;
	text-align: center;
	line-height: 1.75em;
}
	
	
.login-area .box{
	width: 100%;
	height:230px;
	float: left;
	background-color: rgba(255,255,255,0.8);
	box-shadow: 0px 0px 6px rgba(0,0,0,0.1);
	border-radius: 20px;
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.login-area .box-area{
	float: left;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
}

.login-area .h1{
	float: left;
	width: 100%;
	font-size: 136%;
	line-height: 1.75em;
	font-weight: bold;
	color: #300;
	text-align: left;
}

.login-area .p-text{
	float: left;
	width: 100%;
	line-height: 1.75em;
	text-align: left;
}


.box-areas{
	float: left;
	width: 100%;
}

.box-areas .t{
	float: left;
	width: 100%;
	line-height: 1.75em;
	font-size: 18px;
}	

.t-h1{
	float: left;
	width: 100%;
	color: #333333;
	line-height: 1.55em;
	font-size: 26px;
}
.t-h1-eng{
	float: left;
	width: 100%;
	color: #999;
	line-height: 1.55em;
	font-size: 36px;
}
.t-h2{
	float: left;
	width: 100%;
	color: #d66a9f;
	line-height: 1.55em;
	font-size: 28px;
}

.t-p{
	float: left;
	width: 100%;
	color: #333;
	line-height: 1.75em;
	font-size: 16px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.t-nm-area{
	float: left;
	width: 100%;
	display: block;
	padding-top: 20px;
	padding-bottom: 20px;
}
			
.wbks{padding: 3px;border-radius: 5px;border: 1px solid #D4D4D4;box-shadow: inset 0 2px 5px #eee;color: #333333;font-family: "微軟正黑體";font-size: 100%;}
.wbks2{color: #333333;font-family: "微軟正黑體";font-size: 100%;box-shadow: inset 0 2px 5px #eee;border-radius: 5px;border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-top-color: #D4D4D4;border-right-color: #D4D4D4;border-bottom-color: #b8b8b8;border-left-color: #D4D4D4;padding-top: 0px;padding-right: 4px;padding-bottom: 0px;padding-left: 4px;}


.project-con{	float: left;
	width: 100%;}

.project-con .logo{
	width: 100%;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-right: auto;
	margin-left: auto;
	max-width:150px;
}
.project-text-area{
	float: left;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	border-top-width: 1px;
	border-bottom-width: 2px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #c6c6c6;
	border-bottom-color: #bfbfbf;
	margin-top: 10px;
	margin-bottom: 10px;
}
.project-text-area .boxz{float: left;line-height: 2em;padding-right: 15px;padding-left: 15px;}
.project-text-area .boxzs{float: left;line-height: 2em;padding-right: 0px;padding-left: 0px;display: block;}
.project-area .img-area{float: left;width: 100%;padding-top: 10px;}
.project-area .img-em{
	float: left;
	width: 48%;
	background-color: #fff;
	box-shadow: 0px 0px 6px rgba(0,0,0,0.1);
	margin-bottom: 10px;
	margin-top: 10px;
	margin-right: 1%;
	margin-left: 1%;
}
.project-area .img-title{
	float: left;
	color: #333;
	text-align: center;
	line-height: 1.75em;
	width: 100%;
	padding-bottom: 10px;
}
.project-area .img-titles{position: absolute;z-index: 888;left: -2px;top: 71px;height: 17px;width: 17px;}
.ws{
	padding: 15px;
}
.wp{padding: 10px;}

/*-----------------------------------------------------
                   工程進度 設定區
-----------------------------------------------------*/
.project-areas{
	width: 100%;
	float: left;
	background-image: url(../images/login/body-img.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-image:cover;
}
.project-areas-title{
	float: left;
	font-size: 230px;
	color: #f0e9e2;
	position: absolute;
	left: 0px;
	top: 0px;
	font-family: "GT Super Display Trial";
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}

.project-areas .bem{
	width: 50%;
	float: left;
	padding-left: 25%;
}

.project-areas .beml{
	width: 38%;
	float: left;
}
.project-areas .bemr{
	width: 62%;
	float: left;
	padding-left: 2%;
}


.project-areas .project-h1{
	font-size: 240%;
	width: 100%;
	float: left;
	color: #003d56;
	font-family: "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;
	font-weight: bolder;
	line-height: 1.25em;
}


.project-areas .project-ptext{
	font-size: 18px;
	width: 100%;
	float: left;
	line-height: 1.75em;
	padding-top: 10px;
}

.project-areas .title-area{
	width: 100%;
	text-align: left;
	padding-top: 40px;
}
.project-areas .line{
	width: 100%;
	background-color: #CCC;
	height: 1px;
	margin-bottom: 20px;
	max-width: 50px;
}
.project-areas .h1{
	text-align: left;
	font-size: 148%;
	letter-spacing: 1px;
	font-family: "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;
	font-weight: bold;
	color: #4c4c4c;
}

.project-areas .h2{
	text-align: left;
	font-size: 100%;
	letter-spacing: 1px;
	font-size: 108%;
	color: #333;
	line-height: 1.55em;
}
.project-areas .h3{
	text-align: left;
	color: #666;
	font-size: 24px;
	line-height: 1.75em;
	font-family: 'Lora', serif;
	font-weight: normal;
}

.project-areas .eng{
	text-align: left;
	color: #c0a67e;
	font-size: 28px;
	text-transform: uppercase;
	line-height: 1.25em;
	font-family: 'Lora', serif;
}

.project-areas .p-img{
	text-align: left;
	width: 80px;
	float: left;
}
.project-areas .p-con{
	text-align: left;
	width: 50%;
	float: left;
	padding-top: 15px;
}

/*------------------------------ 工程進度 內容區 ----------------------------------*/	
.projects-areas{
	float: left;
	width: 100%;
	margin-top: 20px;
	background-image: url(../images/progress/img2.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	padding-bottom: 20px;
}
.projects-areas-eml{
	float: left;
	width: 80%;
}
.projects-areas-emr{
	float: left;
	width: 20%;
	margin-top: 1%;
	margin-bottom: 1%;
}	


.projects-areas-emr-box{
	width: 46%;
	float: left;
	background-color: #FFF;
	box-shadow: 0 0px 4px rgba(0, 0, 0, 0.3);
	margin: 1%;
	padding: 1%;
}

.projects-areas-emr-img{
	width: 100%;
	float: left;
}
.projects-areas-emr-h1{
	width: 100%;
	float: left;
	text-align: center;
	line-height: 1.75em;
	padding-top: 5px;
}

.projects-areas-emr-main{
	float: left;
	width: 100%;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #E0E0E0;
}

.projects-areas-emr-mains{
	width: 100%;
	float: left;
	text-align: center;
}

.projects-areas-emr-main .p{
	float: left;
	color: #333;
	width: 100%;
	line-height: 1.75em;
}


.projects-areas-emr-title{
	width: 100%;
	float: left;
	color: #FFF;
	margin-top: 10px;
	margin-bottom: 10px;
}

.projects-areas-emr-icon{
	float: left;
	margin-right: 10px;
	color: #333;
}


.projects-h2s{
	width: 100%;
	float: left;
	padding-bottom: 5px;
	padding-top: 5px;
	margin-top: 5px;
	text-align: left;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #616e6d;
}


/*-----------------------------------------------------
                   聯絡我們 設定區
-----------------------------------------------------*/
.contact-area{
	width: 100%;
	float: left;
	background-image: url(../images/contactus/post-img.png);
	background-repeat: no-repeat;
	background-position: left bottom;
}
.contact-area-title{
	float: left;
	font-size: 230px;
	color: #f0e9e2;
	position: absolute;
	left: 0px;
	top: 0px;
	font-family: "GT Super Display Trial";
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}

.contact-area .bem{
	width: 50%;
	float: left;
	padding-left: 25%;
}

.contact-area .beml{
	width: 60%;
	float: left;
	padding-left: 4%;
}
.contact-area .bemr{
	width: 40%;
	float: left;
}


.contact-area .brand-h1{
	font-size: 260%;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	height: 260px;
	color: #003d56;
	font-family: "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;
	font-weight: bold;
	padding-top: 80px;
	padding-left: 6%;
}


.contact-area .brand-ptext{
	font-size: 18px;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	height: 700px;
	padding-bottom: 200px;
}

.contact-area .title-area{
	width: 100%;
	text-align: left;
	padding-top: 40px;
}
.contact-area .line{
	width: 100%;
	background-color: #CCC;
	height: 1px;
	margin-bottom: 20px;
	max-width: 50px;
}
.contact-area .h1{
	text-align: left;
	font-size: 148%;
	letter-spacing: 1px;
	font-family: "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;
	font-weight: bold;
	color: #4c4c4c;
}

.contact-area .h2{
	text-align: left;
	font-size: 100%;
	letter-spacing: 1px;
	font-size: 108%;
	color: #333;
	line-height: 1.55em;
}
.contact-area .h3{
	text-align: left;
	color: #666;
	font-size: 24px;
	line-height: 1.75em;
	font-family: 'Lora', serif;
	font-weight: normal;
}

.contact-area .eng{
	text-align: left;
	color: #c0a67e;
	font-size: 28px;
	text-transform: uppercase;
	line-height: 1.25em;
	font-family: 'Lora', serif;
}

.contact-area .p-img{
	text-align: left;
	width: 80px;
	float: left;
}
.contact-area .p-con{
	text-align: left;
	width: 50%;
	float: left;
	padding-top: 15px;
}

.contactwap{
	width: 98%;
	margin-right: auto;
	margin-left: auto;
	max-width: 1000px;
	padding-right: 1%;
	}
	
.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}

.col-md{
	float: left;
	width: 22%;
	color: #333;
	font-size: 15px;
	text-align: right;
}

.col-md2{
	float: left;
	width: 78%;
	color: #FFF;
}

.col-md3{
	float: left;
	width: 11%;
	color: #333;
	font-size: 15px;
	text-align: right;
}

.col-md4{
	float: left;
	width: 89%;
	color: #FFF;
}

.col-md5{
	float: left;
	width: 100%;
	color: #FFF;
}

.col-md6{
	float: left;
	width: 100%;
	color: #FFF;
	margin-bottom: 35px;
}
		
#form_area{
	float: left;
	width: 100%;
}

.form_area{
	color: #FFF;
	text-align: left;
	font-size: 100%;
	float: left;
	width: 50%;
	padding-top: 8px;
	padding-bottom: 8px;
}	


.form_areas{
	color: #FFF;
	text-align: left;
	font-size: 108%;
	float: left;
	width: 18%;
	padding-top: 0px;
	padding-bottom: 10px;
	padding-right: 2%;
}

.form_areasx{
	color: #FFF;
	text-align: left;
	font-size: 100%;
	float: left;
	width: 100%;
	padding-top: 5px;
	padding-bottom: 8px;
}

.wbk{
	padding: 3px;
	border-radius: 5px;
	border: 1px solid #D4D4D4;
	box-shadow: inset 0 2px 5px #eee;
	color: #333333;
	font-family: "微軟正黑體";
	font-size: 100%;
}

.wbk2{
	padding: 4px;
	color: #333333;
	font-family: "微軟正黑體";
	font-size: 100%;
	border-radius: 5px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #D4D4D4;
	border-right-color: #D4D4D4;
	border-bottom-color: #b8b8b8;
	border-left-color: #D4D4D4;
}

.contact-info{
	border-radius: 20px;
	background-color: #FFF;
	box-shadow: 0 0px 4px rgba(0, 0, 0, 0.2);
	padding: 20px;
	position: absolute;
	z-index: 888;
	top: 20%;
	right: 10%;
	width: 320px;
	line-height: 1.75em;
	}
		
.contact-info-line{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #ececec;
	padding-bottom: 10px;
	margin-bottom: 10px;
	}
	
.contact-info-p{
	float: left;
	width: 100%;
	}
.contact-info-p a:link{
	color: #333;
	}
.contact-info-p a:hover{
	color: #C90;
	}
	

/*-----------------------------------------------------
                   版權聲明 設定區
-----------------------------------------------------*/
#footer{float: left;width: 100%;}
.footer-em2 .h3{
	line-height: 1.55em;
	font-size: 18px;
	font-family: "微軟正黑體 Light";
	font-weight: bold;
}
.footer-area{
	float: left;
	width: 100%;
	font-size: 16px;
	color: #5d5d5d;
	line-height: 1.75em;
	padding-top: 10px;
	padding-bottom: 10px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #d7d4d1;
}
.footer-area .umenu {float: left;width: 33.3333%;}
.footer-area .umenu:link {color: #5d5d5d;}
.footer-area .umenu:visited {color: #5d5d5d;}
.footer-area .umenu:hover {color: #0276a5;}
.footer-logo{
	float: left;
	width: 17%;
	padding-right: 3%;
}
.footer-em{float: left;width: 30%;padding-top: 25px;}
.footer-em2{float: left;width: 25%;padding-top: 25px;}
.footer-em2 .umenus {color: #5d5d5d;}
.footer-em2 .umenus:link {color: #5d5d5d;}
.footer-em2 .umenus:visited {color: #5d5d5d;}
.footer-em2 .umenus:hover {color: #0276a5;}
.footer-copyright{float: left;width: 100%;font-size:13px;line-height: 3em;text-align: center;border-top-width: 1px;border-top-style: solid;border-top-color: #d7d4d1;color: #666;}

/*-----------------------------------------------------
                   自適應 主版面設定區
-----------------------------------------------------*/
@media screen and (max-width: 768px) {
	
.rowss{padding-right: 0px;padding-left: 0px;}
/*-----------------------------------------------------
                   主橫幅 設定區
-----------------------------------------------------*/
.header-area{width: 100%;float: left;}
.header-area .heml{width: 100%;float: left;position: relative;}
.header-area .hemr{width: 100%;float: left;}	
	
.main{
	float: left;
	width: 100%;
	position: relative;
	background-size: contain;
	background-image: url(../images/story/brand-body-768.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}

	
/*-----------------------------------------------------
                   品牌介紹 設定區
-----------------------------------------------------*/
.brand-area{width: 100%;float: left;}
.brand-area-title{
	float: left;
	font-size: 100px;
	color: #f0e9e2;
	position: absolute;
	left: 0px;
	top: 0px;
	font-family: "GT Super Display Trial";
}

.brand-area .bem{
	width: 80%;
	float: left;
	padding-left: 8%;
}

.brand-area .brand-h1{
	font-size: 260%;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	height: 250px;
	color: #003d56;
	font-family: "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;
	font-weight: bold;
	padding-top: 60px;
	padding-left: 25%;
}


.brand-area .brand-ptext{
	font-size: 100%;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	height: 420px;
	padding-bottom: 20px;
	padding-left: 18%;
}
.brand-area .p-cons{
	text-align: left;
	width: 100%;
	float: left;
	font-size: 18px;
	padding-top: 15px;
	line-height: 1.55em;
	font-family: "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;
	color: #333;
}

/*-----------------------------------------------------
                   關於我們 設定區
-----------------------------------------------------*/
.story-area{
	width: 100%;
	float: left;
	background-image: url(../images/story/story-body.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	padding-top: 0px;
	padding-bottom: 60px;
}

.story-area .ptexts{
	width: 100%;
	margin-right: auto;
	text-align: left;
	max-width: 100%;
}

.story-area .sml{
	width: 100%;
	float: left;
}
.story-area .smr{
	width: 100%;
	float: left;
}

/*-----------------------------------------------------
                   最新消息 設定區
-----------------------------------------------------*/
.news-area{width: 100%;float: left;}

.news-area .nml{
width: 100%;
float: left;
}
.news-area .nmr{
width: 100%;
float: left;
}
.news-area .title-area{
	width: 100%;
	text-align: left;
}
.news-area .line{
	width: 100%;
	background-color: #CCC;
	height: 1px;
	margin-bottom: 20px;
	max-width: 50px;
}
.news-area .h1{
	text-align: left;
	font-size: 136%;
	letter-spacing: 1px;
	font-family: "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;
	font-weight: bold;
	color: #4c4c4c;
}

.news-area .h2{
	text-align: left;
	font-size: 100%;
	letter-spacing: 1px;
	font-size: 108%;
	color: #333;
	line-height: 1.55em;
}
.news-area .h3{
	text-align: left;
	color: #666;
	font-size: 24px;
	line-height: 1.75em;
	font-family: 'Lora', serif;
	font-weight: normal;
}

.news-area .eng{
	text-align: left;
	color: #c0a67e;
	font-size: 36px;
	text-transform: uppercase;
	line-height: 1.75em;
	font-family: 'Lora', serif;
}

.news-area .p-img{
text-align: left;
width: 100%;
float: left;
}
.news-content{
	float: left;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 10px;
}

.c-content{
	float: left;
	width: 100%;
	margin-top: 20px;
	margin-bottom:0px;
}

.news-area-em{
	float: left;
	width: 100%;
	margin-bottom: 20px;
}


.news-area-ems{
	float: left;
	width: 100%;
	margin-bottom: 20px;
}

.news-area-con{
	float: left;
	width: 100%;
	background-color: #FFF;
	box-shadow: 0 0px 6px rgba(0, 0, 0, 0.1);
	position: relative;
	padding-bottom: 10px;
}

.news-area-con .time-area{
	float: left;
	width: 100%;
	color: #FFF;
}
.news-area-con .time-area .t1{
	float: left;
	font-size: 15px;
	width: 50%;
	text-align: left;
	color: #459070;
}
.news-area-con .time-area .t2{
	float: left;
	width: 50%;
	text-align: right;
	color: #666;
}
.news-area-con .p-img{
	float: left;
	width: 100%;
}

.news-area-con .p-h1{
	float: left;
	width: 100%;
	font-size: 136%;
	line-height: 2em;
	color: #003d56;
	font-weight: bold;
	padding-top: 5px;
}

.news-area-con .p-item{
	float: left;
	width: 100%;
	font-size: 15px;
	line-height: 1.55em;
	color: #333333;
}

.news-area-con .p-area{
	float: left;
	width: 100%;
	margin-top: 5px;
	padding-top: 10px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #ececec;
	padding-bottom: 10px;
	font-size: 14px;
}


.news-area-icon{
	float: left;
	width: 100%;
	text-align: center;
}
.news-btn-icon{margin: 2px;}

.news-mains{width: 100%;float: left;padding-top: 0px;padding-bottom: 0px;}
.news-mains .times{
	width: 100%;
	float: left;
	color: #FF9900;
	font-size: 80%;
	padding-top: 10px;
	line-height: 1.75em;
}
.news-mains .title-h1{
	width: 100%;
	float: left;
	color: #003399;
	font-size: 136%;
	line-height: 2em;
}
.news-mains .title-h2{width: 100%;float: left;color: #4c7838;font-size: 118%;line-height: 2em;}
.news-mains .text-p{width: 100%;float: left;color: #333;font-size: 100%;line-height: 1.75em;}
.news-mains .area{
	width: 100%;
	float: left;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #ececec;
	border-bottom-color: #ececec;
	margin-top: 5px;
	margin-bottom: 0px;
	padding-top: 10px;
	padding-bottom: 20px;
}

	
/*-----------------------------------------------------
                   熱銷新案 設定區
-----------------------------------------------------*/
.hot-case-area{
	width: 100%;
	float: left;
	background-image: url(../images/hotcase/hotcase-body-768.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-attachment: scroll;
}
/*--------------- 熱銷新案 區塊設定區 --------------------*/

.hot-case-area .eml{
width: 100%;
float: left;
}

.hot-case-area .emr{
	width: 100%;
	float: left;
	text-align: center;
}
.hot-case-area .eml{
width: 100%;
float: left;
}

.hot-case-area .emr{
	width: 100%;
	float: left;
	text-align: center;
	padding-bottom: 20px;
}

.box-content{
	width: 100%;
	float: left;
	padding-top: 10px;
	padding-bottom: 30px;
}

.box-content .eml{
	width: 100%;
	float: left;
	line-height: 1.75em;
}
.box-content .h1{
	width: 100%;
	float: left;
	line-height: 1.75em;
	color: #003d56;
	text-align: left;
	font-size: 180%;
	font-weight: bold;
}
.box-content .h2{
	width: 100%;
	float: left;
	line-height: 1.75em;
	color: #6da047;
	text-align: left;
	font-size: 118%;
}

.box-content .emr{
	width: 100%;
	float: left;
	line-height: 1.75em;
	text-align: left;
}
	
/*-----------------------------------------------------
                   工程進度區
-----------------------------------------------------*/

.login-area .colemr{
	width: 100%;
	float: left;
	text-align: center;
	margin-bottom: 80px;
}
.project-areas .beml{
	width: 100%;
	float: left;
	padding-left: 0%;
}
.project-areas .bemr{
	width: 100%;
	float: left;
	padding-left: 0%;
}


/*------------------------------ 工程進度 內容區 ----------------------------------*/	
.projects-areas{
	float: left;
	width: 100%;
	margin-top: 0px;
	background-image: url(../images/progress/img2.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	padding-bottom: 20px;
}
.projects-areas-eml{
	float: left;
	width: 100%;
	margin-top: 15px;
}
.projects-areas-emr{
	float: left;
	width: 100%;
	margin-top: 0%;
	margin-bottom: 0%;
}
.projects-areas-emr-box{
	width: 100%;
	float: left;
	background-color: #FFF;
	box-shadow: 0 0px 4px rgba(0, 0, 0, 0.3);
	padding: 2%;
	margin-top: 2%;
	margin-right: 0%;
	margin-bottom: 2%;
	margin-left: 0%;
}	

/*-----------------------------------------------------
                   聯絡我們 設定區
-----------------------------------------------------*/
.contact-area{
	width: 100%;
	float: left;
	background-image: url(../images/contactus/post-img.png);
	background-repeat: no-repeat;
	background-position: left center;
}

.contact-area .bem{
	width: 100%;
	float: left;
	padding-left: 25%;
}


.contact-area .beml{
	width: 100%;
	float: left;
	padding-left: 4%;
}
.contact-area .bemr{
	width: 100%;
	float: left;
}

.form_area{
	color: #FFF;
	text-align: left;
	font-size: 100%;
	float: left;
	width: 100%;
	padding-top: 8px;
	padding-bottom: 8px;
}	

.contactwap{
	width: 98%;
	margin-right: auto;
	margin-left: auto;
	max-width: 1000px;
	padding-right: 1%;
	}
	
.text-left{text-align:left}
.text-right{text-align:left}
.text-center{text-align:left}

.col-md{
	float: left;
	width: 100%;
	color: #333;
	font-size: 15px;
	text-align: left;
}

.col-md2{
	float: left;
	width: 100%;
	color: #FFF;
}

.col-md3{
	float: left;
	width: 100%;
	color: #333;
	font-size: 15px;
	text-align: left;
}

.col-md4{
	float: left;
	width: 100%;
	color: #FFF;
}

	
	
/*-----------------------------------------------------
                   版權聲明 設定區
-----------------------------------------------------*/
.footer-area{float: left;width: 100%;font-size: 16px;color: #5d5d5d;line-height: 1.75em;padding-top: 10px;padding-bottom: 10px;}
.footer-area .umenu {float: left;width: 50%;}
.footer-area .umenu:link {color: #5d5d5d;}
.footer-area .umenu:visited {color: #5d5d5d;}
.footer-area .umenu:hover {color: #0276a5;}
.footer-logo{
	float: left;
	width: 40%;
	padding-right: 0%;
}
.footer-em{float: left;width: 32%;padding-top: 10px;}
.footer-em2{float: left;width: 23%;padding-top: 10px;}

}
@media screen and (max-width: 991px) {
/*-----------------------------------------------------
                   歷年業績區
-----------------------------------------------------*/	
	
.per-main-area .em{
	width: 100%;
	position: relative;
	float: left;
	margin-right: 0%;
	margin-bottom: 25px;
}


.per-main-area .em-name{
	position: static;
	background-color: #f6f2ee;
	width: 100%;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	float: left;
}

.per-main-area .eml{
	width: 100%;
	float: left;
}
.per-main-area .emr{
	width: 100%;
	text-align: left;
	padding-top: 0px;
}

.per-main-area .title-h1{
	width: 100%;
	text-align: center;
	font-size: 128%;
	font-family: "Noto Serif TC", Times, "Times New Roman", "微軟正黑體", serif;
	line-height: 1.55em;
	color: #333;
}

	
	
.per-mains-area .pbox{
	float: left;
	width: 100%;
}


	
	
.row{
	padding-right: 0px;
	padding-left: 0px;
}
.rowssss{padding-right: 0px;padding-left: 0px;}

.row-contents{
	padding-right: 0px;
	padding-left: 0px;
}
.row-content{
	padding-right: 0px;
	padding-left: 0px;
}


.h-icon .icona{
	float: left;
	line-height: 1.75em;
	color: #886a49;
	font-size: 100%;
	text-align: center;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 10px;
}

	
/*-----------------------------------------------------
                   品牌介紹區
-----------------------------------------------------*/
.brand-area .title-area{
	width: 100%;
	text-align: left;
	padding-top: 60px;
}
	
.main{
	float: left;
	width: 100%;
	position: relative;
	background-size: contain;
	background-image: url(../images/story/brand-body-480.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}

/*-----------------------------------------------------
                   工程進度區
-----------------------------------------------------*/
	
.login-area .coleml{width: 100%;
	float: left;}	
.login-area .colemr{
	width: 100%;
	float: left;
	text-align: center;
}
	
.login-area .col{width: 100%;
	float: left;text-align: center;}	

.login-area .colemr{
	width: 100%;
	float: left;
	text-align: center;
	margin-bottom: 70px;
}

.t-nm-area{
	float: left;
	width: 100%;
	display: none;
	padding-top: 20px;
	padding-bottom: 20px;
}

.project-area .img-em{
	float: left;
	width: 98%;
	background-color: #fff;
	box-shadow: 0px 0px 6px rgba(0,0,0,0.1);
	margin-bottom: 10px;
	margin-top: 10px;
	margin-right: 1%;
	margin-left: 1%;
}

.login-area .pl{
	width: 100%;
	float: left;
	text-align: left;
	color: #faead5;
	font-size: 200%;
	font-family: "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;
	font-weight: bold;
	text-shadow:0px 0px 5px rgba(0,0,0,0.6);
}

.login-area .pr{
	width: 100%;
	float: left;
	text-align: left;
	color: #FFF;
	font-size: 100%;
	line-height: 1.75em;
	text-shadow:0px 0px 5px rgba(0,0,0,0.6);
}

.login-area .pls{
	width: 100%;
	float: left;
	text-align: left;
	color: #faead5;
	font-size: 200%;
	font-family: "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;
	font-weight: bold;
	text-shadow:0px 0px 5px rgba(0,0,0,0.6);
}

.login-area .prs{
	width: 100%;
	float: left;
	text-align: left;
	color: #FFF;
	font-size: 100%;
	line-height: 1.75em;
	text-shadow:0px 0px 5px rgba(0,0,0,0.6);
}

/*-----------------------------------------------------
                   熱銷新案 設定區
-----------------------------------------------------*/
.hotcases-area .eml{
	float: left;
	width: 100%;
	padding-top: 0px;
}
.hotcases-area .emr{float: left;width: 100%;}
.hotcases-area .logo-area{
	width: 100%;
	float: left;
	position: static;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-left: 0px;
	text-align: center;
}

/*-----------------------------------------------------
                   版權聲明 設定區
-----------------------------------------------------*/
.footer-area{float: left;width: 100%;font-size: 16px;color: #5d5d5d;line-height: 1.75em;padding-top: 10px;padding-bottom: 10px;}
.footer-area .umenu {float: left;width: 50%;}
.footer-area .umenu:link {color: #5d5d5d;}
.footer-area .umenu:visited {color: #5d5d5d;}
.footer-area .umenu:hover {color: #0276a5;}
.footer-logo{
	float: left;
	width: 40%;
	padding-right: 0%;
}
.footer-em{float: left;width: 60%;padding-top: 10px;}
.footer-em2{float: left;width: 100%;padding-top: 10px;}
.footer-copyright{
	float: left;
	width: 100%;
	font-size: 12px;
	line-height: 1.5em;
	text-align: left;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #d7d4d1;
	color: #666;
	padding-top: 10px;
	padding-bottom: 10px;
}
	}
@media screen and (max-width: 1280px) {

.news-area-cons .p-icon{
	float: left;
	width: 100%;
	margin-left: 0;
}


/*--------------- 知 新 個案簡介 設定區 --------------*/
.case-area{
	float: left;
	width: 100%;
	margin-top: 0px;
	margin-bottom: 20px;
}
	
.case-area .grem-l{	float: left;
	width: 100%;}
.case-area .grem-l-r{	float:left;
	width: 100%;}
.case-area .grem-r{
	float: left;
	width: 100%;
	position: static;
}		
	
.case-area .grem-rs{
	float: left;
	width: 100%;
	position: static;
	top: 0px;
	left: 0px;
}
.case-area-con{
	float: left;
	width: 100%;
	padding-top: 5%;
	padding-right: 0%;
	padding-bottom: 5%;
	padding-left: 0%;
}

.grem-rx-con{
	float: left;
	width: 100%;
	position: static;
	top: 0px;
	right: 0px;
	}
	
.case-area .grem-ls{
	float: left;
	width: 100%;
	position: relative;
}	

}