@import url(http://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);
/*-------------------------------------------
     基本版面設定區
-------------------------------------------*/		
body {margin: 0px;padding: 0px;font-family: 'cwtexhei', 'Varela Round', '微軟正黑體', sans-serif;background-color: #eaebe6;}
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;}
.both{clear: both;}

/* IE 6 不支援最大寬度，因此寬度預設為 100% */
.ie6 img {width:100%;border: 0px;}
.row{padding-right: 10px;padding-left: 10px;}
.w{padding-right: 10px;padding-left: 10px;}
.ws{padding: 15px;}
.wp{padding: 10px;}
.rows{padding-right: 0px;padding-left: 0px;}
.rwd-img{width:100%;}
.totop {position: absolute;top: -20px;cursor: pointer;background: #2c2c2c;color: #fff;border-radius: 50px;height: 50px;line-height: 50px;padding: 0 30px;z-index: 999;left: 48%;}

/*--------------------- 分頁 -------------------------------*/
#pagination{float: left;width: 100%;text-align: center;margin-top: 25px;margin-bottom: 25px;}
ul.pagination {display: inline-block;padding: 0;margin: 0;}
ul.pagination li {display: inline;}
ul.pagination li a {color: #666;float: left;text-decoration: none;border-radius: 20px;font-size: 90%;font-family: "微軟正黑體 Light";padding-top: 2px;padding-right: 12px;padding-bottom: 2px;padding-left: 12px;}
ul.pagination li a.active {color: #fff;border-radius: 5px;font-family: "微軟正黑體 Light";background-color: #b1966b;}
ul.pagination li a:hover:not(.active) {color: #9C0;}

/*---------------------------------- 
      麵包屑導航
---------------------------------- */	
.breadcrumb{float: right;}
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;}

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

/*-----------------------------------------------------
                   首頁設定區
-----------------------------------------------------*/

.menu-area{width: 100%;float: left;background-color: rgba(255,255,255,0.9);box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);position: absolute;z-index: 999;top: 0px;}
.logo{float: left;padding: 10px;display: block;}
.logos{float: right;padding: 10px;display: none;}
.menu{float: left;}

.header-area{width: 100%;float: left;}
.brand-area{width: 100%;float: left;background-image: url(../images/brand/brand-body.jpg);background-repeat: no-repeat;background-position: center top;background-size:cover;background-attachment: scroll;	padding-top: 30px;padding-bottom: 30px;}
.brand-area .beml{width: 45%;float: left;}
.brand-area .bemr{width: 55%;float: left;}
.brand-area .bemr-line{float: left;border: 8px solid #FFF;width: 92%;position: relative;margin-top: 60px;margin-bottom: 40px;}
.brand-area .bemr-box{float: left;padding-top: 400px;padding-right: 380px;padding-bottom: 30px;padding-left: 60px;line-height: 1.75em;}
.brand-area .bemr-boxs{float: left;color: #333;background-color: #FFF;position: absolute;z-index: 888;height: 40px;width: 40px;top: 0px;right: 0px;padding-top: 10px;padding-right: 10px;padding-bottom: 20px;padding-left: 20px;}
.brand-area .bemr-slider{position: absolute;z-index: 888;width: 850px;left: -80px;top: 60px;}

.brand-area .bemr-story{float: left;padding: 20px;}
.brand-area .bemr-story-line{float: left;width: 100%;border: 8px solid #FFF;position: relative;}
.brand-area .bemr-story-box{font-size: 100%;line-height: 1.55em;color: #333;background-color: #FFF;float: right;height: 40px;width: 40px;padding-top: 0px;padding-right: 0px;padding-bottom: 10px;padding-left: 10px;}
.brand-area .btemr{width: 8%;float: left;-webkit-writing-mode: vertical-rl;writing-mode: vertical-rl;color: #b69d82;font-family: 'cwTeXFangSong', sans-serif;font-size: 200%;position: absolute;z-index: 888;top: -60px;right: 90px;}


.hotcase-area{width: 100%;float: left; background-color:#FFF;}
.hotcase-area .eml{width: 50%;float: left;}
.hotcase-area .emr{width: 50%;float: left;}
.hotcase-area .emr-content{padding-top: 20%;padding-right: 10%;padding-left: 10%;}
.hotcase-area .eng{color: #b69d82;font-size: 90%;line-height: 0.9em;background-image: url(../images/hotcase/t-line.png);background-repeat: no-repeat;background-position: 120px center;}
.hotcase-area .title-h1{color: #333;font-size: 200%;line-height: 2em;font-family: "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;font-weight: bold;}
.hotcase-area .title-h2{color: #003a55;font-size: 160%;line-height: 2em;font-weight: bold;}
.hotcase-area .p-text{color: #333;font-size: 100%;line-height:1.55em;}

.news-area{width: 100%;float: left;background-image: url(../images/body-img.jpg);background-repeat: no-repeat;background-position: center top;background-size:cover;background-attachment: scroll;}
.news-title-area{width: 100%;padding-top: 20px;padding-bottom: 0px;}
.news-title-areas{width: 200px;margin-right: auto;margin-left: auto;text-align: center;}
.news-line{width: 40px;margin-right: auto;margin-left: auto;background-color: #b69d82;height: 1px;margin-top: 20px;margin-bottom: 20px;}
.news-title-h1{color: #333;font-size: 200%;line-height: 1.75em;font-family: "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;font-weight: bold;}
.news-eng{width: 100%;float: left;color: #b69d82;font-size: 136%;line-height:1.75em;font-family: 'Raleway', sans-serif;}
.news-main{width: 100%;float: left;padding-top: 20px;padding-bottom: 80px;}
.news-main .em{width: 46%;float: left;position: relative;margin-right: 2%;margin-left: 2%;margin-bottom: 20px;margin-top: 0px;}
.news-main .ems{width: 46%;float: left;position: relative;margin-right: 2%;margin-left: 2%;margin-bottom: 50px;margin-top: 20px;}

.news-main .cont{width: 100%;float: left;position: absolute;bottom: -40px;}
.news-main .cont-text{background-color: #FFF;margin-right: 20px;margin-left: 20px;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);}
.news-main .cont-texts{padding: 30px;}
.news-main .time{width: 100%;color: #99cc00;font-size: 100%;line-height: 2.5em;}
.news-main .text{width: 100%;color: #333;font-size: 100%;line-height: 1.75em;}
.news-main .more{position: absolute;z-index: 888;right: 40px;bottom: 0px;border: 2px solid #fff;}
.news-main .more:hover{position: absolute;z-index: 888;right: 40px;bottom: 0px;border: 2px solid #b1ce87;}
.projects-area{width: 100%;float: left;background-image: url(../images/projects/projects-body.jpg);background-repeat: no-repeat;background-position: center top;background-size: cover;background-attachment: scroll;padding-bottom: 40px;padding-top: 40px;}
.box-area{width: 100%;float: left;padding-bottom: 20px;padding-top: 20px;}
.box-area .title-area{width: 100%;float: left;}
.box-area .box{width: 33.3333%;float: left;margin-bottom: 0px;margin-top: 0px;}
.box-area .s{width: 100%;float: left;background-color: rgba(255,255,255,0.9);box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);text-align: center;padding-top: 20px;padding-bottom: 20px;}
.box-area .s1{width: 100%;float: left;text-align: center;padding-top: 5px;padding-bottom: 5px;}
.box-area .s2{width: 100%;float: left;text-align: center;}
.box-area .title-h1{color: #000;font-size: 180%;}
.box-area .eng{color: #ADADAD;font-size: 90%;font-family: "微軟正黑體 Light";}
.box-area .m{color: #5c5c5c;font-size: 100%;}


.projects-area .p-text{color: #fff;font-size: 100%;line-height:1.55em;}
.projects-area .pml{width: 20%;float: left;}
.projects-area .pmr{width: 80%;float: left;}
.projects-area-title-h1{color: #fff;text-shadow: 0.1em 0.1em 0.22em #333;font-size: 200%;line-height:2em;font-family: "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;font-weight: bold;}
.projects-area-eng{color: #fff;text-shadow: 0.1em 0.1em 0.22em #333;font-size: 90%;font-family: "微軟正黑體 Light";background-image: url(../images/projects/t-line.png);background-repeat: no-repeat;background-position: 110px center;}
.projects-area-text-p{width: 100%;color: #fff;text-shadow: 0.1em 0.1em 0.3em #333;font-size: 100%;line-height: 1.75em;}

/*-----------------------------------------------------
                   內頁版面設定區
-----------------------------------------------------*/
.main-area{
	width: 100%;
	float: left;
	background-image: url(../images/body-img2.jpg);
	background-repeat: repeat;
	background-position: center top;
	background-attachment: scroll;
}
.main-wap{width: 100%;float: left;padding-top: 90px;}
.main-content{width: 100%;float: left;}

/*-----------------------------------------------------
                   各單元背景版面設定區
-----------------------------------------------------*/

.brand-body{background-image: url(../images/body/brand-body-img.png);background-repeat: no-repeat;background-position: left top;float: left;width: 100%;background-attachment: fixed;}
.philosophy-body{background-image: url(../images/body/philosophy-body-img.jpg);background-repeat: no-repeat;background-position: center top;float: left;width: 100%;background-attachment: fixed;}
.thinking-body{background-image: url(../images/body/thinking-body-img.jpg);background-repeat: no-repeat;background-position: center top;float: left;width: 100%;background-attachment: fixed;}
.performance-body{background-image: url(../images/body/performance-body-img.jpg);background-repeat: no-repeat;background-position: center top;float: left;width: 100%;background-attachment: fixed;}
.case-body{background-image: url(../images/body/case-body-img.jpg);background-repeat: no-repeat;background-position: center top;float: left;width: 100%;background-attachment: fixed;}
.notice-body{background-image: url(../images/body/notice-body-img.jpg);background-repeat: no-repeat;background-position: center top;float: left;width: 100%;background-attachment: fixed;}
.classic-body{background-image: url(../images/body/classic-body-img.jpg);background-repeat: no-repeat;background-position: center top;float: left;width: 100%;background-attachment: fixed;}
.progress-body{background-image: url(../images/body/progress-body-img.jpg);background-repeat: no-repeat;background-position: center top;float: left;width: 100%;background-attachment: fixed;}
.news-body{background-image: url(../images/body/news-body-img.jpg);background-repeat: no-repeat;background-position: center top;float: left;width: 100%;background-attachment: fixed;}
.process-body{background-image: url(../images/body/process-body-img.jpg);background-repeat: no-repeat;background-position: center top;float: left;width: 100%;background-attachment: fixed;}
.contactus-body{background-image: url(../images/body/contactus-body-img.jpg);background-repeat: no-repeat;background-position: center top;float: left;width: 100%;background-attachment: fixed;}

/*-----------------------------------------------------
                   品牌故事設定區
-----------------------------------------------------*/
.brand-areas{width: 100%;float: left;margin-top: 20px;margin-bottom: 60px;}
.brand-areas .bteml{width: 92%;float: left;}
.brand-areas .btemr{width: 8%;float: left;-webkit-writing-mode: vertical-rl;writing-mode: vertical-rl;color: #b69d82;font-family: 'cwTeXFangSong', sans-serif;font-size: 200%;}
.brand-areas .btext{width: 100%;float: left;padding-top: 20px;padding-bottom: 20px;}
.brand-areas .btext-h1{width: 100%;float: left;font-size: 160%;line-height: 1.75em;color: #58772f;}
.brand-areas .btext-p{width: 100%;float: left;font-size: 108%;line-height: 1.75em;color: #333;}

.brand-areas .btemlsm{width: 100%;float: left;position: relative;}
.brand-areas .btemls{width: 50%;float: left;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);}
.brand-areas .btemlsa{width: 50%;float: left;}
.brand-areas .btemls-text{float: left;font-size: 108%;line-height: 1.75em;padding-top: 25%;padding-right: 10%;padding-left: 10%;}

.brand-areas .btemrsm{width: 100%;float: left;}
.brand-areas .btemrs{width: 50%;float: left;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);position: relative;}
.brand-areas .btemrsa{width: 50%;float: left;}
.brand-areas .btemrs-text{float: left;font-size: 108%;line-height: 1.75em;padding-top: 25%;padding-right: 10%;padding-left: 10%;}
.btemrs-name{float: left;position: absolute;left: -210px;bottom: 0px;width: 200px;}

#example {max-width: 100%;}

/*-----------------------------------------------------
                   建築心法 版面設定區
-----------------------------------------------------*/
.thinking-area{width: 100%;float: left;text-align: center;margin-bottom: 30px;}
.thinking-areas{width: 100%;float: left;text-align: center;margin-bottom: 80px;}
.thinking-area .title-h1{font-size: 160%;line-height: 1.75em;color: #654b3c;}
.thinking-area .title-h2{font-size: 118%;line-height: 1.75em;color: #666;}
.thinking-area .title-p{font-size: 108%;line-height: 1.75em;color: #333;}
.thinking-con{width: 100%;margin-right: auto;margin-left: auto;max-width: 780px;margin-bottom: 15px;}
.thinking-con .teml{width: 50%;float: left;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);}
.thinking-con .temr{width: 50%;float: left;margin-top: 50px;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);}
.thinking-con .tem-m{width: 33.3333%;float: left;}
.thinking-con .temls{width: 25%;float: left;}
.thinking-con .temrs{width: 75%;float: left;}
.thinking-con .text-p{font-size: 108%;line-height: 1.55em;}

.thinking-con .t-box{width: 100%;float: left;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#999999+0,131313+100 */background: rgb(153,153,153); /* Old browsers */background: -moz-linear-gradient(top,  rgba(153,153,153,1) 0%, rgba(19,19,19,1) 100%); /* FF3.6-15 */background: -webkit-linear-gradient(top,  rgba(153,153,153,1) 0%,rgba(19,19,19,1) 100%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(to bottom,  rgba(153,153,153,1) 0%,rgba(19,19,19,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#131313',GradientType=0 ); /* IE6-9 */font-size: 180%;color: #FFF;padding: 20px;}

/*-----------------------------------------------------
                   營造業績 版面設定區
-----------------------------------------------------*/
.performance-main{width: 100%;float: left;margin-bottom: 40px;}
.performance-main .title-h1{width: 100%;float: left;color: #654b3c;font-size: 180%;line-height:2em;text-align: center;}
.performance-main .title-h2{width: 100%;float: left;color: #333333;font-size: 118%;line-height:1.55em;text-align: center;}
.performance-main .col-em{width: 31%;float: left;margin-right:1%;margin-left: 1%;margin-top: 0px;margin-bottom: 20px;}
.performance-main .box{width: 100%;float: left;background-color: #FFF;border: 1px solid #CCC;}
.performance-main .boxs{padding: 3%;float: left;width: 94%;}
.performance-main .pimg{width: 100%;float: left;margin-bottom: 10px;}
.performance-main .p-text{width: 100%;float: left;color: #333;font-size: 100%;line-height:1.55em;}
.performance-main .p{width: 100%;float: left;color: #333;font-size: 100%;line-height:1.55em;}
.performance-main .p-btn{width: 100%;float: left;color: #7aaa62;font-size: 100%;line-height: 1.55em;text-align: right;}
.performance-mains{width: 100%;float: left;}
.performance-mains .contenta{width: 100%;float: left;margin-top: 5px;margin-bottom: 5px;}
.performance-mains .contentas{width: 100%;float: left;margin-top: 5px;margin-bottom: 5px;padding-top: 5px;padding-bottom: 10px;border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #CCC;}
.performance-mains .peml{width: 70%;float: left;}
.performance-mains .pemr{width: 30%;float: left;}
.performance-mains .p-text{
	width: 100%;
	float: left;
	line-height: 1.55em;
}
.performance-mains .pemm{width: 33.3333%;float: left;}

/*-----------------------------------------------------
                   最新消息 版面設定區
-----------------------------------------------------*/
.news-mains{width: 100%;float: left;padding-top: 0px;padding-bottom: 40px;}
.news-mains .times{width: 100%;float: left;color: #459070;font-size: 80%;padding-top: 10px;line-height: 1.75em;}
.news-mains .title-h1{width: 100%;float: left;color: #003366;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-btn-eml{float: left;width: 80%;display: block;}
.news-btn-emr{float:left;width: 20%;margin-top: 0px;}
.news-btn-title{font-size: 100%;color: #333;line-height:2em;}
.news-btn-icon{margin: 2px;}

/*-----------------------------------------------------
                   工程進度 版面設定區
-----------------------------------------------------*/
/*------------------------------ 標題區 ----------------------------------*/	
.title-wap{float: left;width: 100%;}	
.title-h1{color: #333;font-size: 148%;font-family: 'cwtexhei', 'Varela Round', '微軟正黑體', sans-serif;line-height: 1.75em;}
.title-en{width: 100%;float: left;font-size: 90%;color: #99CC00;font-family: 'cwtexhei', 'Varela Round', '微軟正黑體', sans-serif;line-height: 1.55em;}
.main-emr{float: left;width: 100%;padding-bottom: 40px;}
.about-main-p{width: 100%;float: left;text-align: center;}
.project-area{float: left;width: 100%;padding-top: 5px;padding-bottom:10px;}
.project-gem{float: left;width: 10%;text-align: center;}
.project-gem2{float: left;width: 15%;text-align: left;}
.project-gem3{float: left;width: 75%;text-align: left;line-height: 1.75em;}
.project-form_areas{float: left;width: 33.3333%;}	
.project-em{float: left;width: 50%;position: relative;}	
.project-ems{float: left;width: 100%;padding-bottom: 15px;}
.project-ems-main{max-width: 1170px;margin-right: auto;margin-left: auto;}
.project-ems-img{width: 200px;position: absolute;bottom: 0px;right: -100px;display: block;}	
.concact-forms{float: left;width: 100%;position: absolute;top: -20px;right: 0px;}
.contactwaps{width: 100%;margin-right: auto;margin-left: auto;max-width: 1170px;}
.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;}
.col-mds{float: left;width: 100%;color: #333;font-size: 15px;text-align: left;line-height: 1.75em;}
.col-md2s{float: left;width: 100%;color: #FFF;}
.col-md3s{float: left;width: 100%;color: #333;font-size: 15px;text-align: left;line-height: 1.75em;}
.col-md4s{float: left;width: 100%;color: #333;}
.col-md5s{float: left;width: 100%;color: #FFF;}
.col-md6s{float: left;width: 100%;color: #FFF;}

/*-----------------------------------------------------
                   工程進度 內頁版面設定區
-----------------------------------------------------*/
.progress-area{float: left;width: 100%;}
.progress-area .logo-area{width: 100%;float: left;text-align: center;padding-top: 20px;}
.logo-top{width: 100%;margin-right: auto;margin-left: auto;max-width:160px;}
.progress-text-area{float: left;width: 100%;padding-top: 20px;}
.progress-text-area .box{float: left;line-height: 2em;padding-right: 15px;padding-left: 15px;}
.progress-text-area .boxs{float: left;line-height: 2em;padding-right: 0px;padding-left: 0px;display: block;}
.progress-area .img-area{float: left;width: 100%;padding-top: 10px;}
.progress-area .img-em{float: left;width: 50%;position: relative;}
.progress-area .img-title{float: left;position: absolute;z-index: 888;left: -1px;top: 25px;background-color: rgba(0,0,0,0.8);padding: 15px;color:#FFF;}
.progress-area .img-titles{position: absolute;z-index: 888;left: -2px;top: 71px;height: 17px;width: 17px;}

/*-----------------------------------------------------
                  經營理念專區
-----------------------------------------------------*/
.philosophy-title-area{width: 100%;float: left;padding-top: 20px;padding-bottom: 0px;}
.philosophy-con{box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);background-color: #FFF;margin-top: 20px;margin-bottom: 20px;float: left;width: 100%;}
.t-h1{font-size: 160%;color:#58772f;line-height: 1.75em;}
.t-p{font-size: 108%;max-width: 600px;margin-right: auto;margin-left: auto;text-align: center;line-height: 1.75em;}

/*-----------------------------------------------------
                   個案介紹專區
-----------------------------------------------------*/
.case-wap{width: 100%;float: left;padding-top: 20px;padding-bottom: 20px;}
.case-wap .cases{width: 100%;float: left;position: relative;margin-top: 10px;margin-bottom: 40px;}
.case-wap .cases-eml{width: 30%;float: left;display: block;}
.case-wap .cases-emr{width: 70%;float: left;margin-bottom: 50px;}
.case-wap .cases-content{width: 50%;float: left;background-color: rgba(255,255,255,0.9);box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);position: absolute;z-index: 888;left: 0px;bottom: 0px;}
.case-wap .cases-contents{float: left;position: relative;padding-top: 80px;padding-right: 40px;padding-bottom: 20px;padding-left: 40px;line-height: 1.55em;}
.case-wap .cases-logo{width: 150px;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);position: absolute;z-index: 888;top: -80px;left: 20px;}
.case-wap .title-h1{line-height: 1.75em;font-size: 160%;color: #61804f;}
.case-wap .n-area{width: 100%;float: left;padding-top: 10px;margin-top: 10px;border-top-width: 1px;border-top-style: solid;border-top-color: #ececec;}
.c-area{float: left;margin-left: 6px;border-right-width: 1px;border-right-style: dotted;border-right-color: #999;float: left;padding-right: 8px;padding-left: 6px;color: #333;}
.c-area:link{color: #333;}
.c-area:active{color: #333;}
.c-area:hover{color: #d2b27f;}
.c-areas{float: left;margin-left: 6px;float: left;padding-right: 8px;padding-left: 6px;color: #333;}
.c-areas:link{color: #333;}
.c-areas:active{color: #333;}
.c-areas:hover{color: #d2b27f;}

.case-area{width: 100%;float: left;}
.case-areas{width: 100%;float: left;margin-top: 5px;margin-bottom: 5px;padding-top: 5px;padding-bottom: 5px;}
.case-areas .ceml{width: 10%;float: left;}
.case-areas .cemr{width: 90%;float: left;}
.case-areas .t-box{width: 60px;
float: left;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#999999+0,131313+100 */
background: rgb(153,153,153); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(153,153,153,1) 0%, rgba(19,19,19,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(153,153,153,1) 0%,rgba(19,19,19,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(153,153,153,1) 0%,rgba(19,19,19,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-webkit-border-top-left-radius: 15px;-moz-border-radius-topleft: 15px;border-top-left-radius: 15px;font-size: 160%;color: #FFF;height: 60px;padding-top: 15px;padding-right: 10px;padding-bottom: 20px;padding-left: 26px;position: relative;}
.case-areas .t-boxs{padding: 0px;display: block;}
.case-areas .t-box-t{font-size: 12px;color: #999;position: absolute;z-index: 777;left: 6px;top: 6px;}
.case-areas .t-ps{line-height: 1.75em;}
.case-areas .title-h1{line-height: 1.75em;font-size: 160%;color: #036;}
.video-container {position: relative;padding-bottom: 56.25%;padding-top: 0px;height: 0;overflow: hidden;}
.video-container iframe, .video-container object, .video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

/*-----------------------------------------------------
                   新案預告專區
-----------------------------------------------------*/
.notice-area{width: 100%;float: left;padding-bottom: 20px;}
.notice-area .main{width: 100%;float: left;padding-top: 20px;position: relative;}
.notice-area .n-area{width: 100%;float: left;padding-top: 10px;}
.b-area{float: left;margin-left: 6px;border-right-width: 1px;border-right-style: dotted;border-right-color: #999;float: right;padding-right: 8px;padding-left: 6px;color: #333;}
.b-area:link{color: #333;}
.b-area:active{color: #333;}
.b-area:hover{color: #d2b27f;}
.b-areas{float: left;margin-left: 6px;float: right;padding-right: 8px;padding-left: 6px;color: #333;}
.b-areas:link{color: #333;}
.b-areas:active{color: #333;}
.b-areas:hover{color: #d2b27f;}
.notice-area .top-icon{float: left;position: absolute;z-index: 888;left: 0px;top: 0px;}
.notice-area .main-text{width: 100%;float: left;line-height: 1.75em;}
.notice-area .title-h1{color: #060;font-size: 148%;font-family: 'cwtexhei', 'Varela Round', '微軟正黑體', sans-serif;line-height: 1.55em;}
/*-----------------------------------------------------
                  歷年業績內頁專區
-----------------------------------------------------*/
.classic-area .cem{width: 50%;float: left;position: relative;}
/*-----------------------------------------------------
                  歷年業績內頁專區
-----------------------------------------------------*/
.classic-area{width: 100%;float: left;padding-bottom:30px;padding-top: 20px;}
.classic-areas{width: 100%;float: left;padding-bottom:40px;padding-top: 0px;}
.classic-content{width: 100%;float: left;padding-bottom:0px;padding-top: 0px;}
.classic-area .content{width: 100%;margin-right: auto;margin-left: auto;max-width:1170px;}
.classic-areas .cl{width: 100%;position: relative;border-left-width: 2px;border-left-style: solid;border-left-color: #FFF;padding-bottom: 0px;float: left;}
.classic-areas .dot{border-radius: 50%;position: absolute;z-index: 888;left: -8px;top:-10px;background-color: #a11847;border: 2px solid #FFF;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);height: 10px;width: 10px;}
.classic-areas .conw{padding-right: 20px;padding-left: 20px;line-height: 1.75em;}
.classic-areas .text-time{color: #999;font-size: 90%;}
.classic-areas .text-red{color: #a11847;font-size: 180%;line-height: 1.75em;font-weight: bold;}
.classic-areas .text-b{color: #333;font-size: 136%;line-height: 1.75em;font-weight: bold;}
.classic-area .cem{width: 33.3333%;float: left;position: relative;}
.classic-area .text-p{float: left;position: absolute;font-size: 108%;color: #FFF;z-index: 888;right: 15px;bottom: 15px;text-shadow: 0.1em 0.1em 0.3em #333;}
/*-----------------------------------------------------
                  服務流程專區
-----------------------------------------------------*/
.process-area{width: 100%;float: left;padding-top: 20px;padding-bottom: 40px;}
.pro{display: block;width: 100%;}
.pros{display: none;width: 100%;}
/*-----------------------------------------------------
                   聯絡我們專區
-----------------------------------------------------*/
.contactwap{width: 100%;max-width: 1170px;margin-top: 10px;margin-right: auto;margin-left: auto;}
#contact{float: left;width: 100%;position: relative;}
.contact-con{float: left;color: #000;width: 100%;margin-top: 15px;margin-bottom: 15px;}	
.contact-content{float: left;width: 100%;padding-top: 20px;}
.text-lefts{text-align: left;line-height: 1em;padding-top: 14px;padding-bottom: 0px;}
.text-lefts a:link,a:active{color:#FFF;}
.text-lefts a:hover{color:#caaf8f;}
.text-left{text-align: left;}.text-right{text-align:right}.text-center{text-align:center;}
.col-md{float: left;width: 22%;color: #000;font-size: 16px;text-align: right;line-height: 1.75em;}
.col-md2{float: left;width: 78%;color: #000;}
.col-md3{float: left;width: 11%;color: #000;font-size: 16px;text-align: right;line-height: 1.75em;}
.col-md4{float: left;width: 89%;color: #000;}
#form_area{float: left;width: 100%;}
.form_area{color: #000;text-align: left;font-size: 100%;float: left;width: 50%;padding-top: 8px;padding-bottom: 8px;}	
.form_areas{color: #000;text-align: left;font-family: "微軟正黑體";font-size: 108%;float: left;width: 100%;padding-top: 0px;padding-bottom: 20px;}
.form_areasx{color: #000;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%;}
.con-map{box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);background-color: #FFF;margin-top: 30px;margin-bottom: 60px;padding-top: 5px;float: left;width: 100%;}


/*-----------------------------------------------------
                   版權聲明設定區
-----------------------------------------------------*/
#footer{width: 100%;background-color: #2c2c2c;float: left;position: relative;}
.footer{width: 100%;margin-right: auto;margin-left: auto;max-width: 1170px;color: #efefef;font-size: 90%;line-height:1.75em;}
.footer-content{width: 100%;float: left;padding-top: 15px;padding-bottom: 15px;}
.footer-em{
	width: 44%;
	float: left;
}
.footer-em2{width: 24%;float: left;font-size: 80%;color: #888888;}
.footer-em3{
	width: 32%;
	float: left;
}
.footer-em3s{width: 86px;float: left;text-align: center;color: #fff}
.footer-em3s p{line-height:0.2em;}
.footer-em3s a:link{width: 100px;float: left;text-align: center;transition: 1s;text-decoration: none;}
.footer-em3s:hover{width: 86px;float: left;text-align: center;color: #dfcea6;transition: 1s;text-decoration: none;}
.footer-circle{width: 28px;height: 28px;border-radius: 999em;border: 2px solid #FFF;text-align: center;padding: 10px;margin-right: 18px;margin-left: 18px;}

/*-----------------------------------------------------
                   自適應設定區
-----------------------------------------------------*/
@media screen and (max-width: 1366px) {
/*-----------------------------------------------------
                   首頁設定區
-----------------------------------------------------*/
.hotcase-area .emr-content{padding-top: 10%;padding-right: 10%;padding-left: 10%;}
.hotcase-area .p-text{color: #333;font-size: 100%;line-height:1.55em;}

.brand-area .beml{width: 100%;float: left;display: none;}
.brand-area .bemr{width: 100%;float: left;}
.brand-area .bemr-line{
	float: left;
	border: 8px solid #FFF;
	width: 93%;
	position: relative;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 2%;
	margin-right: 2%;
}
.brand-area .bemr-box{float: left;padding-top: 0px;padding-right: 15px;padding-bottom: 10px;padding-left: 20px;line-height: 1.75em;}
.brand-area .bemr-boxs{float: left;color: #333;background-color: #FFF;position: absolute;z-index: 888;height: 40px;width: 40px;top: 0px;right: 0px;padding-top: 10px;padding-right: 10px;padding-bottom: 20px;padding-left: 20px;}
.brand-area .bemr-slider{position: static;z-index: 888;width: 100%;left: 0px;top: 0px;}
.brand-area .bemr-story{float: left;padding: 20px;}
.brand-area .bemr-story-line{float: left;width: 100%;border: 8px solid #FFF;position: relative;}
.brand-area .bemr-story-box{font-size: 100%;line-height: 1.55em;color: #333;background-color: #FFF;float: right;height: 40px;width: 40px;padding-top: 0px;padding-right: 0px;padding-bottom: 10px;padding-left: 10px;}

}


@media screen and (max-width: 1024px) {
	
.stellarnav.dark {background: rgba(0, 0, 0, 1); }
.logo{float: left;padding: 10px;display: none;}
.logos{float: right;padding: 5px;display: block;}
.row{padding-right: 0px;padding-left: 0px;}
.rows{padding-right: 15px;padding-left: 15px;}	
/*-----------------------------------------------------
                   首頁設定區
-----------------------------------------------------*/
.hotcase-area .emr-content{padding-top: 5%;padding-right: 5%;padding-left: 5%;}
.hotcase-area .p-text{color: #333;font-size: 100%;line-height:1.55em;}


.menu-area{width: 100%;float: left;background-color: rgba(0,0,0);box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);position: absolute;z-index: 999;top: 0px;}	
.news-main .more{position: absolute;z-index: 888;right: 30px;bottom: -30px;border: 2px solid #fff;}
.news-main .more:hover{position: absolute;z-index: 888;right: 30px;bottom: -30px;border: 2px solid #b1ce87;}
/*-----------------------------------------------------
                   品牌區
-----------------------------------------------------*/
.brand-areas .bteml{width: 90%;float: left;}
.brand-areas .btemr{width: 10%;float: left;-webkit-writing-mode: vertical-rl;writing-mode: vertical-rl;color: #876b5a;font-family: 'cwTeXFangSong', sans-serif;font-size: 180%;}	
}

@media screen and (max-width: 768px) {
.row{padding-right: 0px;padding-left: 0px;}
.rows{padding-right: 15px;padding-left: 15px;}
.totop {position: absolute;top: -20px;cursor: pointer;background: #2c2c2c;color: #fff;border-radius: 50px;height: 50px;line-height: 50px;padding: 0 30px;z-index: 999;left: 40%;}
.l{width: 50%;float: center;padding-top: 15px;}
/*-----------------------------------------------------
                   首頁設定區
-----------------------------------------------------*/
.hotcase-area .eml{width: 100%;float: left;}
.hotcase-area .emr{width: 100%;float: left;}
.hotcase-area .emr-content{padding-top: 5%;padding-right: 5%;padding-left: 5%;}

.news-area{width: 100%;float: left;background-image: url(../images/body-img2.jpg);background-repeat: repeat;}
.news-main{width: 100%;float: left;padding-top: 20px;padding-bottom: 20px;}
.news-main .em{width: 100%;float: left;position: relative;margin-right: 0%;margin-left: 0%;margin-bottom: 20px;}
.news-main .ems{width: 100%;float: left;position: relative;margin-right: 0%;margin-left: 0%;margin-bottom: 20px;margin-top: 0px;}
.news-main .cont{width: 100%;float: left;position: static;}
.news-main .cont-text{background-color: #FFF;margin-right: 0px;margin-left: 0px;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);}
.news-main .more{position: absolute;z-index: 888;right: 5px;bottom: 5px;border: 2px solid #fff;}
.news-main .more:hover{position: absolute;z-index: 888;right: 5px;bottom: 5px;border: 2px solid #b1ce87;}

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

.projects-area .pml{width: 100%;float: left;}
.projects-area .pmr{width: 100%;float: left;}


/*-----------------------------------------------------
                   內頁版面設定區
-----------------------------------------------------*/
.main-area{width: 100%;float: left;background-image: url(../images/body-img2.jpg);background-repeat: repeat;}
.main-wap{width: 100%;float: left;padding-top: 60px;}
.main-content{width: 100%;float: left;padding-top: 0px;}

/*-----------------------------------------------------
                  經營理念專區
-----------------------------------------------------*/
.philosophy-title-area{width: 100%;float: left;padding-top: 0px;padding-bottom: 30px;}
.t-h1{font-size: 160%;color:#58772f;line-height: 1.75em;}
.t-p{font-size: 108%;max-width: 600px;margin-right: auto;margin-left: auto;text-align: left;line-height: 1.75em;}

/*-----------------------------------------------------
                   營造業績 版面設定區
-----------------------------------------------------*/
.performance-main .col-em{width: 98%;float: left;margin-right:1%;margin-left: 1%;margin-top: 0px;margin-bottom: 20px;}
.performance-mains .peml{width: 100%;float: left;}
.performance-mains .pemr{width: 100%;float: left;}
.performance-mains .pemm{width: 100%;float: left;}

/*-----------------------------------------------------
                   最新消息 版面設定區
-----------------------------------------------------*/
.news-btn-eml{float: left;width: 100%;display: none;}
.news-btn-emr{float: left;width: 100%;margin-top: 0px;text-align: right;}
.news-btn-title{font-size: 100%;color: #333;line-height:2em;}
.news-btn-icon{margin: 2px;}

/*-----------------------------------------------------
                   建築心法 版面設定區
-----------------------------------------------------*/
.thinking-con .tem-m{width: 50%;float: left;margin-bottom: 10px;}
.thinking-con .t-box{width: 100%;float: left;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#999999+0,131313+100 */background: rgb(153,153,153); /* Old browsers */background: -moz-linear-gradient(top,  rgba(153,153,153,1) 0%, rgba(19,19,19,1) 100%); /* FF3.6-15 */background: -webkit-linear-gradient(top,  rgba(153,153,153,1) 0%,rgba(19,19,19,1) 100%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(to bottom,  rgba(153,153,153,1) 0%,rgba(19,19,19,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#131313',GradientType=0 ); /* IE6-9 */font-size: 136%;color: #FFF;padding:15px;}
.thinking-con .text-p{font-size: 100%;line-height: 1.55em;}

/*-----------------------------------------------------
                   個案介紹專區
-----------------------------------------------------*/
.case-areas .ceml{width: 100%;float: left;}
.case-areas .cemr{width: 100%;float: left;}
.case-areas .t-box{width: 100%;float: left;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#999999+0,131313+100 */background: rgb(153,153,153); /* Old browsers */background: -moz-linear-gradient(top,  rgba(153,153,153,0.2) 0%, rgba(19,19,19,0.2) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(153,153,153,0.2) 0%,rgba(19,19,19,0.2) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(153,153,153,0.2) 0%,rgba(19,19,19,0.2) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-webkit-border-top-left-radius: 15px;-moz-border-radius-topleft: 15px;border-top-left-radius: 15px;font-size: 126%;color: #000;height: 60px;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;position: relative;border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #999;margin-bottom: 10px;}
.case-areas .t-boxs{display: block;padding-top: 20px;padding-right: 20px;padding-bottom: 50px;padding-left: 20px;}

.case-wap .cases-eml{width: 30%;float: left;display: none;}
.case-wap .cases-emr{width: 100%;float: left;margin-bottom: 0px;}
.case-wap .cases-content{width: 100%;float: left;background-color: rgba(255,255,255,0.9);box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);position: static;z-index: 888;left: 0px;bottom: 0px;padding-top: 80px;}
.case-wap .cases-contents{float: left;position: relative;padding-top: 80px;padding-right:20px;padding-bottom: 20px;padding-left: 20px;line-height: 1.55em;}

/*-----------------------------------------------------
                   新案預告專區
-----------------------------------------------------*/
.notice-area .top-icon{float: left;position: absolute;z-index: 888;left: 0px;top: 8px;width: 60px;}


/*-----------------------------------------------------
                  歷年業績內頁專區
-----------------------------------------------------*/
.classic-area .cem{width: 100%;float: left;position: relative;}

/*-----------------------------------------------------
                   工程進度 版面設定區
-----------------------------------------------------*/
/*------------------------------ 標題區 ----------------------------------*/	
.project-gem{float: left;width: 100%;text-align: center;}
.project-gem2{float: left;width: 100%;text-align: center;line-height: 1.55em;}
.project-gem3{float: left;width: 100%;text-align: left;line-height: 1.75em;}
.project-form_areas{float: left;width: 100%;}

/*-----------------------------------------------------
                   工程進度 內頁版面設定區
-----------------------------------------------------*/
.progress-text-area .box{float: left;width: 100%;line-height: 2em;padding-right: 5px;padding-left: 5px;}
.progress-text-area .boxs{float: left;line-height: 2em;padding-right: 0px;padding-left: 0px;display: none;}
.progress-area .img-em{float: left;width: 100%;position: relative;}

/*-----------------------------------------------------
                  服務流程專區
-----------------------------------------------------*/
.pro{display: none;width: 100%;}
.pros{display: block;width: 100%;}

/*-----------------------------------------------------
                   聯絡我們專區
-----------------------------------------------------*/
.text-lefts{text-align: left;line-height: 1.75em;padding-top: 0px;padding-bottom: 0px;}.text-left{text-align:left;}.text-right{text-align:left}.text-center{text-align:left;}
.col-md{float: left;width: 100%;color: #000;text-align: left;}
.col-md2{float: left;width: 100%;color: #000;text-align: left;}
.col-md3{float: left;width: 100%;color: #000;text-align: left;}
.col-md4{float: left;width: 100%;text-align: left;}
.form_area{color: #000;text-align: left;font-family: "微軟正黑體";font-size: 100%;float: left;width: 100%;padding-top: 8px;padding-bottom: 8px;}	

/*-----------------------------------------------------
                   版權聲明設定區
-----------------------------------------------------*/
.footer-em{width: 100%;float: left;}
.footer-em2{width: 100%;float: left;font-size: 90%;}
.footer-em3{width: 100%;float: left;}
		
}
@media screen and (max-width: 640px) {
/*-----------------------------------------------------
                   品牌故事設定區
-----------------------------------------------------*/

.brand-areas .btemls{width: 100%;float: left;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);}
.brand-areas .btemlsa{width: 100%;float: left;}
.brand-areas .btemls-text{float: left;font-size: 108%;line-height: 1.75em;padding-top: 1%;padding-right: 1%;padding-left: 1%;}


.brand-areas .btemrs{width: 100%;float: left;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);}
.brand-areas .btemrsa{width: 100%;float: left;}
.brand-areas .btemrs-text{float: left;font-size: 108%;line-height: 1.75em;padding-top: 1%;padding-right:1%;padding-left: 1%;}
.brand-areas .btemrs-name{float: left;position: absolute;left: 0px;bottom: 0px;width: 150px;}
}