@charset "utf-8";
/* CSS Document */
pre{ position: fixed; left: 0px; top: 0px; width: 400px; height: 800px; overflow: scroll; z-index: 99999; font-size: 12px; color:#000; }
/** { outline:none; }*/
html { overflow-x: auto; overflow-y: auto; }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, li, body, form, input, button, img, cite, strong, em, table, td, th, hr { font-family:"Arial"; padding:0; margin:0; }
ul { list-style:none; }
h1{ font-size:20px; }
h2{ font-size:16px; }
h3{ font-size:12px; font-weight: normal; }
h4{ font-size:12px; font-weight: normal; }
h5{ font-size:12px; font-weight: normal; }
i{ font-style: normal; font-weight: normal; }
img{ border: 0px; }
hr { border: 0px #BFBFBF solid; border-bottom: 1px #BFBFBF solid; }
table { border-collapse: collapse;}
button ,input{ font-family:"Arial"; color: #555; padding: 0 5px; }
button{ height: 30px; font-size: 12px; line-height: 30px; color: #555; border: 0px; border-radius: 2px; cursor: pointer; }
textarea{ border: 1px #cccccc solid; }
a:link { color: #000; text-decoration: none; }
a:visited { color: #000; text-decoration: none; }
a:hover { color: #000; text-decoration: none; }
a:active { color: #000; text-decoration: none; }

.tip{ color: #C9792B; }
/*page*/
.page-bar{ height: 30px; line-height: 22px; text-align: right; }
.page-bar .page a{ width: 20px; display: inline-block; margin: 0 2px; text-align: center; }
.page-bar .page a:hover{ background: #F8E87F; }
.page-bar .page_cur{ width:20px; height: 20px; color: #000; text-align: center; background: #F8E87F; display: inline-block; }
.page-bar .page.prev a{ width: 40px; height: 20px; border-radius: 2px; border-right: 1px #000 solid; padding: 0 10px; }
.page-bar .page.next a{ width: 40px; height: 20px; border-radius: 2px; border-left: 1px #000 solid; padding: 0 10px; }

.back-bar{ width: 100%; height: 30px; text-align: center; padding-bottom: 10px; }
/*.page{ font-size: 12px; text-decoration: none; font-weight: bold; color:#FE9113; }
.pagelink{ font-size: 12px; text-decoration: none; font-weight: bold; }
.pagelink a{ text-decoration: none; color:#fff; }
.pagelink a:hover { text-decoration: none; color:#FE9113; }
.pagelink a:visited{ text-decoration: none; color:#fff; }*/

.placeholder{ color:#bbb; }
.msgBox{ position: absolute; top : 40%; right: 50%; width: 200px; height: auto; line-height: 30px; text-align: center; vertical-align: middle; padding: 5px; margin-left: 100px; margin-top: 25px; border: 2px #ccc solid; border-radius: 5px; background: #fff; z-index: 99999; display: none; }
.memberBody .tip{
    float: left;
    color: #B20000;
    padding-left: 10px;
}
.fb-like{ width: 72px; height: 20px; }
.hidden-head{ display: none; }
/*cart*/
#AddCart{ width: 92px; height: 20px; color: #fff; line-height: 20px; text-align: center; cursor: pointer; background: transparent url('../images/btn_brown.jpg') top right no-repeat; margin: 0px 0 0 0px; display: inline-block; }
#AddCart:hover{ color: #fff; }

/*float*/
.floatL{ float: left; }
.floatR{ float: right; }
/*text align*/
.alignL{ text-align: left; }
.alignC{ text-align: center; }
.alignR{ text-align: right; }
/*float*/
.floatL{ float: left; }
.floatR{ float: right; }
/*font size*/
.font_16{ font-size: 16px; }
/*font color*/
.fc-0f{ color:#ffffff; }
.fc-01{ color:#ff2703; }
.fc-02{ color:#e35555; }
.fz-16{ font-size: 16px; }
.fz-14{ font-size: 14px; }

/*input*/
/*input[type="text"]*/
.ipt-txt{ padding: 8px; font-size: 18px; border: 1px solid #CCC; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1) inset; }
.ipt-area{ padding: 8px; font-size: 18px; border: 1px solid #CCC; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1) inset; }
/*select*/
select{  }
/*button*/
.btn{ border: 0px; }
.btn.search{ width: 42px; height: 17px; background: url(../images/btn/search.jpg); margin: 6px 0px; }
.btn.more{ width: 46px; height: 18px; background: url(../images/btn/more.jpg); margin: 6px 0px; }

.btn.submit{ width:61px; height: 25px; background: url(../images/btn/submit.png) no-repeat; border: 0px; }
.btn.reset{ width:61px; height: 25px; background: url(../images/btn/reset.png) no-repeat; border: 0px; }
.btn.back{ width: 60px; height: 30px; line-height: 30px; background: #302E2E; border-radius: 2px; padding: 0px 10px; display: inline-block; cursor: pointer; }
.btn.b01{ width: 83px; height: 27px; line-height: 28px; color: #fff; background: url(../images/btn/01.jpg) no-repeat; text-align: center; cursor: pointer; }
.btn.b01:hover{ background-position-y: bottom; }

.transition{  transition: all 0.1s linear; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; -o-transition: all 0.1s linear; 	-ms-transition: all 0.1s linear; }
.wrapper{ font-size: 12px; background: url(../images/bg/bg.jpg); font-family:"Arial"; padding: 20px 0px 20px 0px; }
.head{ height: 100px; background: #fff; -moz-box-shadow: 0px 0px 10px 0 #cccccc; -webkit-box-shadow: 0px 0px 10px 0 #cccccc; box-shadow: 0px 0px 10px 0 #cccccc; margin-bottom: 10px; }
.head-main{ position: relative; width: 1000px; height: 100px; background: url(../images/bg/head_menu.png); margin: 0 auto; }
.head-main .logo{ position: absolute; left: 20px; top: 24px; width: 180px; height: 50px; background: url(../images/logo.png) no-repeat; }
.head-main .head-menu{ height: 100px; width: 600px; padding-left: 298px; }
.head-main .head-menu li{ position: relative; float: left; width: 120px; height: 100px; cursor: pointer; }
.head-main .head-menu li:hover .triangle{ border-width: 30px 30px 0px 0px; }
.head-main .head-menu li a{ width: 120px; height: 100px; display: block; }
.head-main .head-menu .triangle{ position: absolute; top: 0; left: 0; width: 0; height: 0; border-width: 20px 20px 0 0; border-style: solid; border-color: #AFAC9C rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); }
.head-main .head-menu .triangle.about{ border-color:#B2AE9E transparent transparent transparent; }
.head-main .head-menu .triangle.brand{ border-color:#EC9D23 transparent transparent transparent; }
.head-main .head-menu .triangle.products{ border-color:#E6231F transparent transparent transparent; }
.head-main .head-menu .triangle.projects{ border-color:#0000FF transparent transparent transparent; }
.head-main .head-menu .triangle.contact{ border-color:#35ADD4 transparent transparent transparent; }
.head-main .head-fb{ position: absolute; right: 80px; top: 20px; width: 72px; height: 20px; }

/*icon*/
.icon-arrow{ width:13px; height: 13px; background: url(../images/icon/arrow_detailes.png) no-repeat; }

.slide{ height: 480px; background: #000000; padding: 0px 0px; }
.slide-main{ width: 980px; height: 480px; margin: 0 auto; }

.banner{  }
.banner-main{ width: 950px; height: auto; margin: 0 auto; }

.body{ }

.body-main{ position: relative; width: 1000px; height: auto; margin: 0 auto; padding: 20px 0px 40px 0px; margin-bottom: 4px; }
.body-main .nav{ position: absolute; top: 20px; right: 10px; height: 36px; line-height: 36px; }
.body-main .nav a.home{ padding-left: 20px; background: url(../images/icon/home.jpg) no-repeat; }
.body-main .fb{ position: absolute; top: 130px; right: 30px; width: 80px; height: 20px; z-index: 9999; overflow: hidden; }
.body-main .main{ float: left; width: 800px; min-height: 560px; padding: 0px 0px 0px 0px; }

.body-main .sub-main{ float: left; width: 180px; height: auto; padding: 0px 0px 20px 20px; }
.body-main .sub-main-box{ float: left; width: 180px; height: auto; padding-bottom: 10px; }
.body-main .sub-main-box .sub-main-fb{ float: left; width: 72px; height: 20px; padding-left: 10px; }
.body-main .sub-main-box .sub-main-tweet{ float: left; width: 80px; height: 20px; padding-left: 10px; }
.body-main hgroup{ width: 100%; }
.body-main h1{ float: left; height: 28px; line-height: 28px; color: #6D6C6C; font-weight: normal; padding-bottom: 10px; }
.body-main h2{ float: left; height: 28px; line-height: 28px; font-size: 12px; color: #717071; font-weight: normal; padding-bottom: 10px; }
/*.body-main .sub-main{ float: left; width: 180px; height: auto; background: url(../images/bg/sub_main.jpg) no-repeat; padding: 0px 0px 20px 20px; }
.body-main .sub-search td{ height: 24px; line-height: 24px; }
.body-main .sub-search select{ width: 85px; }
.body-main .sub-category{ width: 186px; }
.body-main .sub-category li a{ height: 24px; line-height: 24px; padding-left: 20px; }
.body-main .sub-category li a:hover{ color: #fff; background: url(../images/bg/sub_category.jpg) center center no-repeat; }
.body-main .sub-category .dotted{ background: url(../images/line/dotted.jpg) left bottom repeat-x; }
.body-main .sub-main-box{ width: 190px; height: auto; margin-bottom: 10px; }
.body-main .sub-main-box a{ display: block; }*/

.foot{ background: #ffffff; }
.foot-main{ width: 1000px; height: auto; text-align: center; font-weight: bold; color: #353434; padding: 24px 0px; margin: 0 auto; overflow: hidden; }
.foot-main span{ color: #D70D18; }
.foot-main i a{ color: #bbbbbb; }
.foot-main i a:hover{ color: #000000; }

/*.main-head{ width: 100%; height: 36px; border-bottom: 1px #ccc solid; margin-bottom: 10px; }
.main-head.about{ background: url(../images/head/about.jpg) no-repeat; }*/

/*.main-head.news{ background: url(../images/head/news.jpg) no-repeat; }
.main-head.item{ background: url(../images/head/item.jpg) no-repeat; }
.main-head.location{ background: url(../images/head/location.jpg) no-repeat; }
.main-head.service{ background: url(../images/head/service.jpg) no-repeat; }
.main-head.recruit{ background: url(../images/head/recruit.jpg) no-repeat; }
.main-head.knowledge{ background: url(../images/head/knowledge.jpg) no-repeat; }
.main-head.project{ background: url(../images/head/project.jpg) no-repeat; }*/

.main-body{ position: relative; width: 100%; overflow: hidden; }
.main-body .news{ float: left; width: 430px; color: #717070; }
.main-body .news ul{ width: 430px; height: 150px; overflow: hidden; }
.main-body .news ul li{ float: left; width: 430px; height: 24px; line-height: 24px; }
.main-body .news-date{ float: left; width:70px; height: 24px; padding: 0 10px 0 0; }
.main-body .news-title{ float: left; width: 330px; height: 24px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.main-body .news-more{ width: 410px; height: 24px; line-height: 24px; }
.main-body .news-link{ float: left; width: 270px; padding-top: 10px; }
.main-body .svc-pic{ position: absolute; top: 20px; right: 20px; width: 270px; height: 220px; background: url(../images/service.jpg); }

.main-tab{ width: 444px; margin: 70px auto; }
.main-tab-btn{ width: 200px; height: 60px; display: inline-block; margin: 0px 10px; border: 0px; padding: 0px; }
.main-tab-btn.brand{ background: url(../images/btn/brand.png) left top no-repeat; }
.main-tab-btn.design{ background: url(../images/btn/design.png) left top no-repeat; }
.main-tab-btn.off{ background-position-y: bottom; }
.main-tab-btn.off:hover{ background-position-y: bottom; opacity: 0.6; }
/*.main-tab-btn:hover{ background-position-y: bottom; }*/
/* common animation */
.scale-anime {
	transition: all 0.1s linear;
	-webkit-transition: all 0.1s linear;
	-moz-transition: all 0.1s linear;
	-o-transition: all 0.1s linear;
	-ms-transition: all 0.1s linear;
}

.scale-anime:hover {
    transform: scale(1.1);
	-webkit-transform: scale(0.97);
    -moz-transform: scale(0.97);
	-o-transition: scale(0.97);
	-ms-transition: scale(0.97);

	transition: all 0.1s ease;
	-webkit-transition: all 0.1s ease;
	-moz-transition: all 0.1s ease;
	-o-transition: all 0.1s ease;
	-ms-transition: all 0.1s ease;
}

.idx-section{ float: left; margin-left: 0px; }
.idx-section.s1{ width: 380px; height: 400px; margin-right: 20px; }
.idx-section.s2{ width: 370px; height: 400px; }
.idx-section.s3{ height: auto; }
.idx-section.s4{ width: 100%; height: auto; }
.idx-section.s4 hgroup{ background: url(../images/line/dot.png) left bottom repeat-x; margin-bottom: 20px; }

.idx-box{ height: 320px; background: #ffffff; box-shadow: 0px 0px 5px rgba(0,0,0,0.1); }
.s1 .idx-box{ padding: 10px 8px; }
.s2 .idx-box{ padding: 10px 14px; }
.s4 .idx-box{ width: 770px; height: 200px; padding: 16px; }
.idx-box p{ letter-spacing: 1px; line-height: 1.6; color: #666; padding: 10px 0px; }
.idx-box .more{ width:80px; height: 16px; background: url(../images/icon/arrow_detailes.png) left center no-repeat; padding-left: 20px; }
.idx-ul{  }
.idx-ul li{ float: left; padding: 10px 0px; opacity: 1; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -ms-transition: all 0.2s ease; }
.idx-ul li:hover{ opacity: 0.6; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -ms-transition: all 0.2s ease; cursor: pointer; }
.idx-ul li.dashed{ border-bottom: 1px #ccc dashed; }
.idx-ul img{ float: left; width: 72px; padding-right: 10px; }
.idx-ul-head{ float: left; width: 240px; height: 20px; line-height: 20px; background: url(../images/icon/arrow_detailes.png) left center no-repeat; padding-left: 20px; overflow: hidden; font-size: 16px;}
.idx-ul-intro{ float: left; width: 260px; color: #888888; overflow: hidden; }
.idx-item-ul{  }
.idx-item-ul li{ float: left; width: 120px; height: 120px; padding: 10px 10px 0px 0px; }
.idx-contact{ position: relative; width: 770px; height: 200px; }
.idx-contact-map{ float: left; width: 410px; height: 200px; }
.idx-contact-logo{
	position: absolute;
	top: 16px;
	right: 591px;
	width: 160px;
	height: 30px;
	background: url(../images/idx/logo.png) no-repeat;
}
.idx-contact-addr{
	position: absolute;
	top: 53px;
	left: 21px;
	width: 300px;
	height: 129px;
	line-height: 20px;
}


.idx-contact-addr a:link {color:#0000FF}　　　　//宣告連結顏色
.idx-contact-addr a:visited {color:#0000FF}　   　 //訪問過連結顏色
.idx-contact-addr a:active {color:#0000FF}　　     //執行中連結顏色
.idx-contact-addr a:hover {color:#0000FF}             //當滑鼠移到連結時連結顏色

.idx-contact-tip{ position: absolute; top: 130px; left: 420px; width: 190px; height: 48px;  background: url(../images/bg/box.png) no-repeat; padding: 13px 40px; }

.bnd-box{ width: 480px; padding-left: 20px; margin-bottom: 20px; }
.bnd-box.border{ border-bottom: 1px #BFBCB8 solid; }
.bnd-box dl dt{ height: 30px; line-height: 30px; font-size: 16px; font-weight: bold; }
.bnd-box dl dd{ color: #717071; line-height: 24px; padding-bottom: 10px; }

.cnt{
	position: relative;
	width: 968px;
	height: 200px;
}
.cnt-box{ background: #FFF; padding: 16px; margin-bottom: 10px; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.cnt-map{ float: left; width: 610px; height: 260px; }
.cnt-logo{
	position: absolute;
	top: 12px;
	right: 790px;
	width: 160px;
	height: 30px;
	background: url(../images/idx/logo.png) no-repeat;
}
.cnt-addr{
	position: absolute;
	top: 10px;
	left: -4px;
	width: 300px;
	height: 129px;
	line-height: 20px;
}
.cnt-tip{
	position: absolute;
	top: 116px;
	left: 29px;
	width: 190px;
	height: 48px;
	background: url(../images/bg/box.png) no-repeat;
	padding: 13px 40px;
}
.cnt-head{ padding: 30px 0px; }
.cnt-body{ border-bottom: 1px #919191 solid; margin-bottom: 10px; }
.cnt-form{ float: left; width: 650px; height: 438px; }
.cnt-form tr{ border-bottom: #DDD 1px solid; }
.cnt-form tr:last-child{ border-bottom: 0px; }
.cnt-form th{ width: 160px; text-align: left; font-size: 16px; padding: 15px 0px; vertical-align: middle; }
.cnt-form th i{ color: #F00; }
.cnt-form td{ text-align: left; padding: 15px 0px; vertical-align: middle; }
.cnt-ads{ float: right; width: 300px; height: 400px; }
.cnt-ads img{ background: #FFF; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.cnt-form-bar{ width: 280px; height: 40px; padding: 20px 200px 20px 0px; margin: 0px auto; }
.cnt-form-btn {
    width: 120px;
    height: 40px;
    line-height: 40px;
    border: none;
    text-align: center;
    background: #DB6D00;
    background: -webkit-gradient(linear, left top, left bottom, from(#E79B00), to(#DB6D00));
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: #FFF;
    font-size: 14px;
    font-weight: normal;
    line-height: 3;
    letter-spacing: 4px;
    cursor: pointer;
    outline: none;
}
.cnt-form-btn.reset{ float: left; }
.cnt-form-btn.submit{ float: right; }

.pdt-box{ background: #FFF; padding: 10px; margin-bottom: 10px; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1); overflow: hidden; }
.pdt-box.radius{ -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
.pdt-head{ padding: 30px 0px; }
.pdt-body{  }
.pdt-item{  }
.pdt-item h1{ width: 100%; font-size:12px; text-align: center; color: #888888; }
.pdt-item li{ width: 300px; float: left; margin: 0px 50px 30px 0px; }
.pdt-item li:nth-child(3n) { margin-right: 0; }
.pdt-item li img{ width: 280px; height: 187px; }

.pdt-item2 h1{ width: 100%; font-size:12px; text-align: center; color: #888888; }
.pdt-item2 li{ width: 950px; float: left; margin: 0px 50px 30px 0px; }
.pdt-item2 li img{ width: 950px;  }

.pdt-himo{ position: absolute; right: 977px; top: -176px; background: url(../images/gra_himo.png) no-repeat; width: 833px; height: 233px; }
.pdt-detail{ padding: 30px; }
.pdt-detail-head{ width: 709px; height: auto; line-height: 22px; font-size: 20px; background: url(../images/icon/circle.png) no-repeat; padding: 0px 0px 20px 30px; }
.pdt-detail-body{  }
.pdt-share{ padding: 20px 0px 0px 40px; }
.pdt-share-box{ float: left; width: 100px; }
.pdt-share-box{ float: left; }
.main-intro{
	line-height: 22px;
	font-size: 13px;
	width: 862px;
	margin:auto;
	font-family:"細明體","Times New Roman",Georgia,Serif;
}
#about{
	width: 255px;
	float: left;
	margin-left:30px;
}
#about_text{
	width: 542px;
	float: left;
	font-size: 14px;
	line-height: 30px;
}
#about_c,#about_d,#about_e{
	cursor:pointer;
}
#about_c{
	width: 222px;
	height: 91.5px;
	background: url(../images/15.png) no-repeat;
}
#about_c.on{ background-position-y: bottom; }
#about_c:hover{ background-position-y: bottom; }
#about_d{
	width: 221px;
	height: 91px;
	margin-top:5px;
	background: url(../images/16.png) no-repeat;
}
#about_d.on{ background-position-y: bottom; }
#about_d:hover{ background-position-y: bottom; }
#about_e{
	width: 222px;
	height: 91px;
	margin-top:5px;
	background: url(../images/17.png) no-repeat;
}
#about_e.on{ background-position-y: bottom; }
#about_e:hover{ background-position-y: bottom; }
.brand-box{ width: 800px; font-size: 18px; display: none; }


.style1 a{ color: #bbbbbb; width: 111px; height: 18px; display: block; background: url(../images/head/07.png) no-repeat;  float:left; margin: 0px 0px 0px 10px;}
.style1 a:hover{ color: #000000; background: url(../images/head/07_1.png) no-repeat;}