@charset "utf-8";
@import url("header.css");

/* CSS Document */
/** 清除內外邊距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li,pre,form, fieldset, legend, button, input, textarea,th, td, img{  border:medium none;  margin: 0;  padding: 0; }
a{
      outline: none; /* for Firefox Google Chrome  */
      behavior:expression(this.onFocus=this.blur()); /* for IE */
	  text-decoration:none;
	  border:none;
}
html,body{ -webkit-text-size-adjust:none; height:100%; }/*清除apple行動裝置文字的bug*/
html, body { width:100%; min-width:320px;  height:100%;font-family: "微軟正黑體", "Microsoft JhengHei", Arial !important; font-size:16px;  }
input, select, textarea{ border-radius:0; /*-webkit-appearance:none;*/}
.displayTable{ display:table;}
.clear{ clear:both; overflow:hidden;}
.floatL{ float:left;}
.floatR{ float:right;}
.arial{ font-family:Arial, sans-serif; }
.boxSizing{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box;box-sizing:border-box;}
.padd60{ padding-bottom:60px;}


body{ margin:0 auto; position:relative; background:#cacaca; }
header{ width:100%; height:92px; /*background:#fff url(../images/top.jpg) no-repeat top center; */text-align:center; position:fixed; z-index:9999; background:#FFF;  }
/*main{ width:100%; padding:0 0 92px;}*/
main{ width:100%; min-height:790px; padding:0;}
.space_mainTop{ width:100%; height:92px;}
#menuWorkArea{ width:100%; height:auto; min-height:50px;}
.menu_work{ width:100%;  background:#ff5a00;}
.menu_work>ul{ width:100%;  margin:0 auto; text-align:center; list-style:none; display:table; }/*作品選單*/
.menu_work>ul li{width:auto; height:50px; line-height:50px; margin:0 0 0 2em; padding:0; font-size:1.3em; display:inline-block; vertical-align:middle; font-weight:bold;border:none;}
.menu_work>ul li a{ color:#fff;}
.menu_work>ul li a:hover{ color:#333;}
.menu_work>ul li.active a{ color:#000;}
.menu_work>ul li:before{ content:"/"; color:#fff; margin-right:2em;}
.menu_work>ul li:first-child:before{ content:""; }
.submenu_work{ width:100%;  background:#fff; ; }/*作品次選單*/
.btn_close_submenu_work{ width:44px; height:44px; background:rgba(0,0,0,0.1); position:absolute; right:0; top:5px; text-align:center; cursor:pointer;}
.btn_close_submenu_work span{ width:10px; height:10px; display:inline-block; background:none; border-style:solid; border-color:#000 #000 transparent transparent; border-width:1px; margin-top:20px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform-origin:center;}
.btn_close_submenu_work span:before{ width:1px; height:15px;  background:#000;}
.btn_close_submenu_work:after{}
.submenu_work>div{width:80%; max-width:1500px;padding:0; margin:0 auto; position:relative}
.w_none{display:none;}
.submenu_work div ul{ width:100%; list-style-type:none;  display:table;}
.submenu_work div li{ width:20%; padding:0; margin:5px 1.5%;  line-height:2em;  display:inline-block; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box;box-sizing:border-box; }
.submenu_work div li a{color:#000; display:block; padding:5px 10px;}
.submenu_work div li a:hover, .submenu_work div li a:active{color:#000; background:#999;} 

.location{ width:90%; /*max-width:1500px;*/  margin:0 auto; font-size:1em; font-weight:bold; line-height:1.5em; padding:1em 0 0; color:#000; }
.location span:last-child{ color:#ff5a00;}
.contentxx{ width:100%; height:1000px; background:#000;}

footer{ position:relative; width:100%; text-align:center; color:#fff; clear:both;}

.box-footer{ width:100%; position:absolute; z-index:11; }

.f_up{ width:100%; padding:10px 0 30px;  line-height:30px; background:#000;  font-weight:bold; cursor:pointer; position:relative;}
.f_up:hover{ color:#ff5a00;}
/*.f_up .box-f_up{ position:absolute; z-index:10;}*/
.f_up:after{ width:0; height:0; border-style:solid; border-width:10px; border-color:#fff transparent transparent transparent; content:""; position:absolute; left:50%; margin-left:-10px; bottom:0; }
.f_up:hover:after{ border-color:#ff5a00 transparent transparent transparent;}

/*form.asp*/
.f_up_form{ width:100%; padding:10px 0 30px;  line-height:30px; background:#000;  font-weight:bold; cursor:pointer; position:relative; color:#fff; text-decoration:none;}
.f_up_form a{ display:block; color:#fff; }
.f_up_form a:hover{ color:#ff5a00;}
/*.f_up .box-f_up{ position:absolute; z-index:10;}*/
.f_up_form a:after{ width:0; height:0; border-style:solid; border-width:10px; border-color:#fff transparent transparent transparent; content:""; position:absolute; left:50%; margin-left:-10px; bottom:0; }
.f_up_form a:hover:after{ border-color:#ff5a00 transparent transparent transparent;}
/*form.asp*/


#fram_index{ width:100%;}
.mailForm{ width:100%; background:#f1f1f1; padding:0 0 50px; display:block; }
.mailForm_wrap{ width:90%;  word-wrap:break-word; word-break:break-all; margin:0 auto; text-align:left; color:#000;}
.Form_list, .Form_list2,.Form_list3,.Form_list4, .Form_clientInfo{  margin:0 0 30px; }
.Form_list h4,.h4_title, .Form_clientInfo{ font-size:1.2em; margin:0 0 5px; font-weight:bold;}

.Form_list>input{ width:48%; height:30px; font-size:16px; padding:0 1%; border-top:2px solid #9b9f9f;  }
.dateChoose{ display:inline-block; vertical-align:middle;}
.Form_list4 input{ width:35%; height:30px; font-size:16px; padding:0 2%; text-align:center; border-top:2px solid #9b9f9f;}
.h4_title{ display:inline-block; margin-right:5px; display:block;}
.change_sliderArea{ width:95%; margin:0 auto;}
.servicePay{ width:90px; height:35px; line-height:35px; border-radius:5px; font-size:1em; font-weight:bolder;  text-align:center; background:#000; -webkit-background:linear-gradient(180deg, #5b5b5b, #000 ); -moz-background:linear-gradient(180deg, #5b5b5b, #000 ); -ms-background:linear-gradient(180deg, #5b5b5b, #000 ); -o-background:linear-gradient(180deg, #5b5b5b, #000 ); background:linear-gradient(180deg, #5b5b5b, #000 );  color:#ff5a00; margin:-80px 0 0 -33px; position:relative; }/*動態的預算標籤*/
.servicePay:after{ width:0; height:0; border-width:10px; border-color:#000 transparent transparent transparent; border-style:solid; content:""; position:absolute; left:35px; top:35px; }
.Form_list2 ul{ list-style:none; margin:0; clear:both; overflow:hidden; display:inline-block; vertical-align:middle; }
.Form_list2 ul li{ float:left; margin-right:15px; cursor:pointer;}

.Form_list2 ul li.active, .Form_list2 div.active{ color:#ff5a00;}
.btn_other{ display:inline-block; vertical-align:middle;}
/*.btn_other input{ background:none;}*/
.txt_underline{ border-bottom:2px solid #9b9f9f;}

.Form_list textarea{ width:98%; border-top:2px solid #9b9f9f; height:150px; overflow-y:auto; resize:none; padding:1%;}
.btn_sentMail{ height:30px; line-height:30px; border-radius:30px; color:#fff; background:#000; padding:0 25px; display:inline-block;   cursor:pointer;}
.btn_sentMail:hover{ background:#ff5a00;}


.copyright{ width:100%; height:58px; line-height:58px; background:#515151; font-size:0.8em; position:relative;}



/*作品內頁*/
.workPage_padd{ padding-top:142px;  height:100%;}
#workPageControl{ width:100%; height:50px; background:#000;  position:fixed; top:92px; z-index:10; }
#workPageControl ul{width:100%; display:table; text-align:center; list-style:none; margin:0;}
#workPageControl li{ display:inline-block; height:50px ; line-height:50px; vertical-align:middle; color:#fff; margin:0 20px;}
#workPageControl li a{ color:#fff; display:block; }
#workPageControl li a:hover{ color:#ff5a00;display:table;}
#workPageControl li div{ }
#workPageControl li:hover div{ color:#ff5a00;}
#workPageControl li div i{ width:50px; height:50px; display:inline-block; background:url(../images/icon.png) no-repeat; font-size:0; vertical-align:middle;  }
#workPageControl li .arrL i{ background-position:0 0;}
#workPageControl li .arrR i{ background-position:0 -50px;}
#workPageControl li .square i{ background-position:0 -100px;}
#workPageControl li:hover .arrL i{ background-position:-50px 0;}
#workPageControl li:hover .arrR i{ background-position:-50px -50px;}
#workPageControl li:hover .square i{ background-position:-50px -100px;}

.mobile_w{ display:none;}
.pc_w{ display:inline-block;}

.project_wrap{ position:relative;}
.projectEdit_area{ width:65%;  padding:50px 0 0; margin:0 0 0 35%; }
.projectTXT_area{ width:35%; position:fixed; top:142px; height:100%; background:#fff;  padding:50px 0 0;  }
.pT_content{ width:90%;  height:80%; margin:0 auto; overflow:auto; padding:0 5px;}

.pT_content h2,.pE_content h2{ font-size:1.5em; line-height:1.5em; margin:0 0 30px; }
.pT_content h2{ display:block;}
.pE_content h2{ display:none;}
.pT_content h3{ font-size:1.1em; color:#ff5a00;  margin:5px 0 30px; font-weight:normal;}
.pT_content h3:last-child{ padding-bottom:250px;}
.pT_content h3 span{ color:#000;}
.pT_content h3 span a{ width:45px; height:45px; background:url(../images/btn_Community.png) no-repeat; display:inline-block; margin-right:10px; background-size:400%; vertical-align:top;}
.pT_content h3 span a.fb{ background-position:0 0;  }
.pT_content h3 span a.google{ background-position:-45px 0;}
.pT_content h3 span a.twitter{ background-position:-90px 0;}
.pT_content h3 span a.mail{ background-position:-135px 0;}
.pT_content h3 span a.fb:hover{ background-position:0 bottom;  }
.pT_content h3 span a.google:hover{ background-position:-45px bottom;}
.pT_content h3 span a.twitter:hover{ background-position:-90px bottom;}
.pT_content h3 span a.mail:hover{ background-position:-135px bottom;}
.pT_content h3.btn_webLink a{ color:#fff; font-family:"Times New Roman", Times, serif; font-size:2em; padding:10px 10px 0; border-radius:5px; background:#666; vertical-align:top; line-height:60px;}
.pT_content h3.btn_webLink a:hover{ background:#ff5a00;}

.project_txt{ padding:20px 0 50px;}
.project_txt p{ font-size:1em; line-height:1.75em;}
.pad_b250{ padding-bottom:250px;}
.pE_content{ width:100%; margin:0 auto; padding:0;}
.pE_content p{ font-size:1em; line-height:1.75em; }
.pE_content img{ width:100%; height:auto; vertical-align:middle; /*margin:0 0 -5px;*/}

/*index代圖*/
.index_section01{ :100%; height:0; padding-bottom:70%; background:url(../img_index/index01.jpg) no-repeat top center; background-size:cover;}
.index_section02{ :100%; height:0; padding-bottom:69%; background:url(../img_index/index02.jpg) no-repeat top center; background-size:cover;}
.index_section03{ :100%; height:0; padding-bottom:69%; background:url(../img_index/index03.jpg) no-repeat top center; background-size:cover;}
.index_section04{ :100%; height:0; padding-bottom:69%; background:url(../img_index/index04.jpg) no-repeat top center; background-size:cover;}
.index_section05{ :100%; height:0; padding-bottom:69%; background:url(../img_index/index05.jpg) no-repeat top center; background-size:cover;}
.index_section06{ :100%; height:0; padding-bottom:63.3%; background:url(../img_index/index06.jpg) no-repeat top center; background-size:cover;}


.boxWrap{ width:100%;}
.box-test{ width:90%; height:200px; overflow:auto;  margin:0 auto; background:#F90; }

.padTop_form{ margin-top:92px; text-align:center; color:#fff;}
@media screen and (max-width:1025px){
/*.mailForm{ width:100%; height:300px; overflow:scroll;   background:#f1f1f1; padding:0 0 50px; display:none; }*/
}

@media screen and (max-width:1024px){

.submenu_work>div{width:100%; padding:20px 0; margin:0 auto;}
.mailForm{ width:100%; background:#f1f1f1; padding:0 0 50px; display:block; }
.mailForm_wrap{ width:90%; word-wrap:break-word; word-break:break-all; margin:0 auto; text-align:left; color:#000;}
}

@media screen and (max-width:1023px){
header{ width:100%; height:60px;  text-align:center; position:fixed; z-index:9999; background:none; /*background:rgba(0,0,0,1)*/  }
#workPageControl{ width:100%; height:50px; background:#000;  position:fixed; top:60px; z-index:10; }
/*main{ width:100%; padding:0 0 60px;}*/
main{ width:100%; min-height:760px; padding:0;}
.space_mainTop{ width:100%; height:60px;}
.projectEdit_area{ width:60%; padding:50px 0 0; margin:0 0 0 40%; }

.projectTXT_area{ width:40%; position:fixed; top:110px; height:100%; background:#fff;  padding:50px 0 0;  }

.mailForm{ width:100%; height:50%; overflow:auto;   background:#f1f1f1; padding:0 ; display:block; }
.mailForm_wrap{ width:90%; display:block;    word-wrap:break-word; word-break:break-all; margin:0 auto; text-align:left; color:#000;}
.padTop_form{ margin-top:60px; text-align:center; color:#fff;}

}

@media screen and (max-width:767px){
body{ margin:0 auto; position:relative; background:#fff; }
main{ width:100%; min-height:500px; padding:0;}

.submenu_work div li{ width:28%; padding:0;  line-height:2em;  display:inline-block; margin:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box;box-sizing:border-box; }

.menu_work>ul{ width:100%;  margin:0 auto; text-align:center; list-style:none; display:table; }/*作品選單*/	
.menu_work>ul li{width:24%; height:50px; line-height:50px; margin:0; padding:0; font-size:1em; display:inline-block; vertical-align:middle; font-weight:bold; border-right:1px solid #fff;}	
.menu_work>ul li:last-child{ border:none;}
/*作品內頁*/	
.workPage_padd{ padding-top:142px;  height:100%;}
#workPageControl{ width:100%; height:50px; background:#000;  position:fixed; top:60px; z-index:10; }
#workPageControl ul{ width:100%; display:table; list-style:none; margin:0;}
#workPageControl li{ display:inline-block; height:50px ; line-height:50px; vertical-align:middle; color:#fff; margin:0 10px;}
.menu_work>ul li:before{ content:""; color:#fff; margin-right:0;}



.mobile_w{ display:inline-block;}
.pc_w{ display:none;}

.project_wrap{ position:relative;}
.projectEdit_area{ width:100%; background:#fff; margin:0 auto; padding:50px 0 0; }
.projectTXT_area{ width:100%; position:relative; top:0; height:auto; background:#fff;  padding:10px 0 0;  }
.pT_content{ width:95%;  height:auto; margin:0 auto; overflow:visible; padding:0;}
.pT_content h2,.pE_content h2{ font-size:1.5em; line-height:1.2em; margin:0 0 30px;}
.pT_content h2{ display:none;}
.pE_content h2{ display:block; text-align:center;}

.pT_content h3{ font-size:1.1em; color:#ff5a00; margin:5px 0 30px; font-weight:normal;}
.pT_content h3 span{ color:#000;}
.project_txt{ padding:20px 0 50px;}
.project_txt p{ font-size:1em; line-height:1.75em;}
.pad_b250{ padding-bottom:250px;}
.pE_content{ width:100%; margin:0 auto; padding:30px 0;}
.pE_content p{ font-size:1em; line-height:1.75em; }
.pE_content img{ width:100%; height:auto;}

/*服務表單*/
.Form_list>input{ width:100%; height:30px; font-size:16px; padding:0 1%; border-top:2px solid #9b9f9f;  }


}

@media screen and (max-width:567px){
.submenu_work>div{width:95%; padding:20px 0; margin:0 auto; }
.submenu_work div li{ width:45%; padding:0 1.5%;  line-height:2em;  display:inline-block; }
}

/*iphone5以下*/
@media screen and (max-width:370px){
/*.menu_work>ul li{width:auto; height:50px; line-height:50px; margin:0; padding:0 5px; font-size:1em; display:inline-block; vertical-align:middle; font-weight:bold; border-right:1px solid #fff;}*/	
.submenu_work>div{width:95%; padding:20px 0; margin:0 auto; }
.submenu_work div li{ width:85%; padding:0 ;  line-height:2.5em;  display:inline-block; }
.dateChoose{ display:block;}
	
}