/* base
-----------------------------------------------------------------------*/

body{ background:url(../images/bg_body.png);}
.wrapper{ width:960px; margin:0 auto;}

.header{ padding:20px 0 0 0;}
.header .logo{ float:left; width:160px; padding:10px 0 0 0 ;}
.header .header_right{ float:right; width:798px;}
.header .nav{ float:right; display:block; width:800px; margin-bottom:20px;}
.header .nav > li{ float:right; display:block;}

.header .nav > li.menu{ margin-right:30px;}
.header .nav > li.menu > a{  color:#000; font-size:15px; padding:10px 0 12px 0; display:block; letter-spacing:1px;}
.header .nav > li.menu > a:hover{ color:#98c289;}

.header .nav > li > a.haslist{ background: url(../images/arrows.png) bottom center no-repeat;}
.header .nav > li > a.haslist:hover{ background:url(../images/arrows_hover.png) bottom center no-repeat;}

.header .nav li.tier1{ position:relative; z-index:999;} 
.header .nav li .tier2{ position:absolute; background:#9bc239; padding:10px 15px; display:none; z-index:99;}
.header .nav li .tier2 a{ color:#ededed; display:block; line-height:24px; font-size:13px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.header .nav li .tier2 a:hover{ color:#fff;}
.header .nav li .tier2 a.haslist{ background: url(../images/arrows_right.png) right no-repeat;}
.header .nav li .tier2 a.haslist:hover{ background: url(../images/arrows_right_hover.png) right no-repeat;}
.header .nav li .tier2 > li{ position:relative; z-index:999;}
.header .nav li .tier3{ position:absolute; padding:20px; z-index:99;  display:none;}
.header .nav li .tier3 li{ position:relative; z-index:999; }
.header .nav li .tier3 a{ padding:0 20px; height:24px;line-height:24px; color:#eee; background:#9bc239; display:block; margin:0;}

.header .nav li a.current{ color:#9bc239; font-weight:bold;}

/* tier2 */

ul.weight1{ width:100px;}
ul.weight2{ width:120px;}
ul.weight3{ width:160px;}
ul.weight4{ width:140px;}

/* tier3 */

ul.weight5{ width:240px; left:160px; top:-15px;}
ul.weight6{ width:120px; left:120px; top:-15px;}
ul.weight7{ width:180px; left:160px; top:-15px;}
ul.weight8{ width:90px;  left:160px; top:-15px;}

/* upcoming */

.nav .tier2 li a.upcoming{ color:#ccc; cursor:not-allowed;}
.nav .tier2 li a.upcoming:hover{ color:#C00;}

.header .nav li.links{ float:right; width:36px; height:36px;}
.header .nav li.links a{ float:right; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; display:block; width:36px; height:36px;}
.header .nav li.links a.twitter{ background:url(../images/twitter.png) 0 0 no-repeat;}
.header .nav li.links a.twitter:hover{background-position: 0 -36px;}
.header .nav li.links a.facebook{background:url(../images/facebook.png) 0 0 no-repeat;}
.header .nav li.links a.facebook:hover{background-position: 0 -36px;}
.header .nav li.links a.youtube{ background:url(../images/youtube.png) 0 0 no-repeat;}
.header .nav li.links a.youtube:hover{background-position: 0 -36px;}

.header .nav li.menu .home{ background:url(../images/home.png) left center no-repeat; padding:10px 0 12px 35px;}

.dotted_line{ height:1px; background:url(../images/hor_separator.png) repeat-x; clear:both;}

.header .slogan{  height:100px; font:300 24px 'Alex Brush', cursive; letter-spacing:1px; clear:both;}
.header .slogan .text{ padding:20px 0 0 70px;}
.header .slogan .title{font:600 26px 'Alex Brush', cursive; margin-bottom:5px;}

/* index
-----------------------------------------------------------------------*/

.block_area{ overflow:hidden; margin:30px 0; position:relative;
   -moz-box-shadow: 3px 3px 10px #999;
-webkit-box-shadow: 3px 3px 10px #999;
        box-shadow: 3px 3px 10px #999;
}

.blocks{ width:320px; height:200px; float:left; position:relative; z-index:2;}
.blocks h3{ color:#fff; text-align:center; font-size:24px; font-family:"Times New Roman", Times, serif; font-style:italic; text-shadow:0 0 1px #999;}
.blocks p{ color:#fff; text-align:center;}
.blocks td{ height:200px; vertical-align:middle;}

.cover1{ position:absolute; top:0; right:0; width:160px; height:200px; z-index:99;}
.cover2{ position:absolute; top:0; left:0; width:160px; height:200px; z-index:99;}

.cover2 h2{ color:#fff; font-family:"Times New Roman", Times, serif; text-align:center; font-style: italic; font-size:18px;}

.mask .overlay { display: block; position: absolute; width: 320px; height: 200px; top: 0; left: 0; background-color: #000;	/* 遮罩的顏色 */ }
.blocks a img { width:320px !important; height:200px !important;}

#bxslider{ display: block; width: 320px; height: 200px; padding: 0; margin: 0; position: relative; overflow:hidden;}
#bxslider li{
	width: 100%;
	height: 200px;
	list-style: none;
	padding: 0;
	margin: 0;
	position: absolute;
	left: -3px;
}

.video_player{ width:64px; height:64px; position:absolute; background:url(../images/video_player.png) no-repeat; top:50%; left:25%; margin:-32px 0 0 -32px;-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; z-index:999;}
.video_player:hover{ background:url(../images/video_player_hover.png) no-repeat;}

.index_content{ width:960px; margin:0 auto; background:url(../images/banners.png) repeat-y; text-align:center; padding:20px 0; overflow:hidden; font-size:13px;}
.index_contet_block{ width:300px; margin:0 10px; float:left;}
.index_contet_block h2{ font: italic 24px/24px "Times New Roman", Times, serif; letter-spacing:-1px; margin-bottom:20px;}
.index_contet_block p{ padding:0 15px 20px; text-align:left; display:block; height:122px;}
.index_contet_block a{ background:#212121; border:1px #212121 solid; color:#fff; display:inline-block; padding:3px 17px; font-family:"Times New Roman", Times, serif; font-size:12px; text-transform:uppercase;-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;} 
.index_contet_block a:hover{ color:#690; background:#ededed; border:1px #cacaca solid;}

.footer{ padding:10px 0; font-weight:bold; clear:both;}
.footer td{ color:#000; font-weight:bold;}
.footer td a{ color:#333; font-weight:normal;-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.footer td a:hover{ color:#690;}
.footer td span{ font-weight:normal; margin-left:15px;}

#toTop{ display:none; cursor:pointer;  height:43px; width:43px; background: url(../images/totop.png) 0 0 no-repeat; position:fixed; bottom: 50px; left: 50%; margin-left: 550px; overflow: hidden; border: none; z-index: 99;  -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
#toTop:hover{ background-position:0 -43px;}

.container{ width:960px; margin:20px auto;}
.container h2{ font-size:20px; line-height:60px; font-weight:normal; letter-spacing:1px;}


/* easy
------------------------------------------------------------------------------------*/

.easy{ background:url(../images/easy.png) right center no-repeat; position:relative; min-height:500px;}
.easy h2{ background: url(../images/design_list.png) left 20px no-repeat; padding-left:30px;font-size:20px;  padding:0 0 20px 30px; font-weight:normal; letter-spacing:1px;}
.easy h3{ font-size:20px; font-weight:normal;}
.easy p{ padding: 15px 550px 0 0 ; font-size:14px; line-height:24px;  letter-spacing:1px; color:#555;}
.point_a{ left:888px; top:190px;}
.point_b{ left:680px; top:180px;}
.easy p span{ color:#C00; text-decoration:underline;}

/* elec
------------------------------------------------------------------------------------*/

.elec p{font-size:14px; line-height:20px; color:#555; letter-spacing:1px;}
.elec p span{ color:#C00; text-decoration:underline;}
.elec h2{ background: url(../images/design_list.png) left 20px no-repeat; padding-left:30px;font-size:20px;  padding:0 0 20px 30px; font-weight:normal; letter-spacing:1px;}
.compare_table{ padding:7px; background:#fff; border:1px #ddd solid; margin:20px 0 0 0; font-size:13px;
   -moz-box-shadow: 3px 3px 10px #cacaca;
-webkit-box-shadow: 3px 3px 10px #cacaca;
        box-shadow: 3px 3px 10px #cacaca;
}
.elec h3{ font-size:15px; line-height:50px;}
.elec a h3{ font-size:15px; line-height:50px; color:#333;}
.elec a p:hover{ text-decoration:underline;}

.compare_table td{ background:#f7f7f7; padding:6px 10px; border:1px #ddd solid; color:#555; text-shadow:0px 0px #fff; letter-spacing:0.5px;}
.compare_table th{ padding:10px; text-align:left; border-bottom:1px #C00 solid;}
.compare_table .th_green{  border-bottom:1px #6da130 solid;}
.compare_table .th_blue{ border-bottom:1px #1d77b5 solid;}
.compare_table1 td a{ color:#C00; text-decoration:underline; text-transform:uppercase; font-size:12px;}

td.ededed{ background:#ededed;}

.elec h4{ padding-left:30px; font-size:16px;  padding:10px 0 20px 0; letter-spacing:1px;}

/* design
------------------------------------------------------------------------------------*/

#bxslider2{ display: block; width: 960px; height: 350px; padding: 0; margin: 0; position: relative; padding:10px 0 20px;}
#bxslider2 li{ width: 100%; height: 350px; list-style: none; padding: 0; margin: 0; position: absolute; padding:0 50px 0 70px; display:block;}
#bxslider2 li table td{ height:350px;}

#bxslider2 li .left{ width:40%; float:left; padding:50px 0 0 0;}
#bxslider2 li .right{ width:60%; float:right; padding:30px 0 0 0;}

.design{ position:relative;}
.design p{font-size:14px; line-height:24px; color:#555; letter-spacing:1px;}
.design p span{ color:#C00; text-decoration:underline;}
.design td{ vertical-align:middle;}
.design td p{font-size:14px; line-height:24px;}
.design h3{ background: url(../images/design_list.png) left 12px no-repeat; padding-left:30px;font-size:20px;  padding:10px 0 30px 30px; font-weight:normal; letter-spacing:1px;}

.design .bx-prev{ display:block; width:49px; height:108px; background:url(../images/pd_arrow_left.png) no-repeat; position:absolute; z-index:999; top:300px; left:-30px;}
.design .bx-next{ display:block; width:49px; height:108px; background:url(../images/pd_arrow_right.png) no-repeat; position:absolute; z-index:999; top:300px; right:-30px;}

#bxslider3 { padding: 0; margin: 0 0 0 40px; position: relative;}
#bxslider3 li{ width: 100%; height: 300px; list-style: none; padding: 0; margin: 0; position: absolute;}

.none .bx-prev, .none .bx-next{ display:none;}

#bxslider5{padding: 0; margin: 0 0 0 60px; position: relative;}
#bxslider5 li{ width: 100%; height: 300px; list-style: none; padding: 0; margin: 0; position: absolute;}
#bxslider5 li img{ padding:10px; background:#fff;
   -moz-box-shadow: 3px 3px 10px #cacaca;
-webkit-box-shadow: 3px 3px 10px #cacaca;
        box-shadow: 3px 3px 10px #cacaca;
}

#bxslider7{padding: 0; margin: 0 0 0 60px; position: relative;}
#bxslider7 li{ width: 100%; height: 300px; list-style: none; padding: 0; margin: 0; position: absolute;}
#bxslider7 li img{ padding:10px; background:#fff;
   -moz-box-shadow: 3px 3px 10px #cacaca;
-webkit-box-shadow: 3px 3px 10px #cacaca;
        box-shadow: 3px 3px 10px #cacaca;
}
.img_shadow img{ padding:10px; background:#fff;
   -moz-box-shadow: 3px 3px 10px #cacaca;
-webkit-box-shadow: 3px 3px 10px #cacaca;
        box-shadow: 3px 3px 10px #cacaca;
}
#bxslider6{padding: 0; margin: 0 0 0 60px; position: relative;}
#bxslider6 li{ width: 100%; height: 300px; list-style: none; padding: 0; margin: 0; position: absolute;}

#bxslider2 li.bxslider9 { padding:0 0 0 50px;}
#bxslider2 li.bxslider9  .left{ width:45%; float:left; padding:50px 0 0 0;}
#bxslider2 li.bxslider9  .right{ width:55%; float:right; padding:50px 0 0 0;}

/* straegy
------------------------------------------------------------------------------------*/

.strategy{ position:relative; min-height:420px;}
.strategy h2{ background: url(../images/design_list.png) left 20px no-repeat; padding-left:30px;font-size:20px;  padding:0 0 0 30px; font-weight:normal; letter-spacing:1px;}
.strategy #bxslider4{ display: block; width: 960px; height:400px;  margin: 0; position: relative;}
.strategy #bxslider4 li{ width: 100%;  height:400px; list-style: none; padding: 0; margin: 0; position: absolute; padding:0 50px 0; display:block;}
.strategy #bxslider4 li td{ height:400px; font-size:14px; line-height:24px; color:#555; letter-spacing:1px; vertical-align:middle;}

.strategy .bx-prev{ display:block; width:49px; height:108px; background:url(../images/pd_arrow_left.png) no-repeat; position:absolute; z-index:999; top:50%; left:-30px; margin:-24px 0 0 0;}
.strategy .bx-next{ padding:30px 0; display:block; width:49px; height:108px; background:url(../images/pd_arrow_right.png) no-repeat; position:absolute; z-index:999; top:50%; right:-30px;  margin:-24px 0 0 0;}

.strategy p{font-size:14px; line-height:24px; color:#555; letter-spacing:1px;}
.strategy h3{ background: url(../images/design_list.png) left 12px no-repeat; padding:10px 0 30px 30px; font-size:20px; font-weight:normal; letter-spacing:1px;}

.strategy .none .bx-prev, .none .bx-next{ display:none;}

#bxslider4 li .left{ width:50%; float:left;}
#bxslider4 li .right{ width:50%; float:right;}
#bxslider4  #bxslider7{padding: 30px 0 0 0; margin: 0; position: relative;}

/* now_future
------------------------------------------------------------------------------------*/

.now_future { position:relative; min-height:420px;}
.now_future h2{ background: url(../images/design_list.png) left 20px no-repeat; padding-left:30px;font-size:20px;  padding:0 0 0 30px; font-weight:normal; letter-spacing:1px;}
.now_future h3{ background: url(../images/design_list.png) left 12px no-repeat; padding:10px 0 30px 30px; font-size:20px; font-weight:normal; letter-spacing:1px;}
.now_future #bxslider4{ display: block; width: 960px; height:400px;  margin: 0; position: relative;}
.now_future #bxslider4 li{ width: 100%;  height:400px; list-style: none; padding: 0; margin: 0; position: absolute; padding:0 50px 0; display:block;}
.now_future #bxslider4 li td{ height:400px; font-size:14px; line-height:24px; color:#555; letter-spacing:1px; vertical-align:middle;}

.now_future .bx-prev{ display:block; width:49px; height:108px; background:url(../images/pd_arrow_left.png) no-repeat; position:absolute; z-index:999; top:50%; left:-30px; margin:-30px 0 0 0;}
.now_future .bx-next{ padding:30px 0; display:block; width:49px; height:108px; background:url(../images/pd_arrow_right.png) no-repeat; position:absolute; z-index:999; top:50%; right:-30px;  margin:-30px 0 0 0;}

/* consulting
------------------------------------------------------------------------------------*/

.consulting{font-size:14px; line-height:24px; color:#555; letter-spacing:1px;}
.consulting h3{ background: url(../images/design_list.png) left 12px no-repeat; padding-left:30px;font-size:20px;  padding:10px 0 20px 30px; font-weight:normal; letter-spacing:1px;}
.consulting ul{ padding:20px 0 20px 20px; list-style: disc; font-size:14px;}
.consulting p.title{ color:#000; font-weight:bold; font-size:13px; color:#333;}
.consulting strong{ font-size:16px;}
.consulting li{ margin-bottom:15px; line-height:20px; letter-spacing:0; font-size:14px; cursor:pointer;}
.consulting li:hover{ text-decoration:underline;}
.consulting .title{ margin-bottom:5px;}
.consulting img.image{ padding:10px; border:1px #ddd solid; background:#fff; 

}

.show_wrapper{margin-bottom:15px; height:344px; position:relative;
	   -moz-box-shadow: 3px 3px 10px #cacaca;
-webkit-box-shadow: 3px 3px 10px #cacaca;
        box-shadow: 3px 3px 10px #cacaca;
	}
	
.show1{ position:absolute; left:0; top:0; height:342px; width:958px; background:#fff; z-index:2; display:none; border:1px #ddd solid;}	
.show1 td{ vertical-align:middle; height:342px; padding:0 30px; font-size:13px; line-stacking:0.5px; font-family:Arial, Helvetica, sans-serif; line-height:20px;}
.show1 td h4{ margin-bottom:10px; font-size:16px;}
.show1 td img{ padding:10px; border:1px #ddd solid;
		   -moz-box-shadow: 2px 2px 6px #cacaca;
-webkit-box-shadow: 2px 2px 6px #cacaca;
        box-shadow: 2px 2px 6px #cacaca;
	}
.show1 .close{ position:absolute; bottom:20px; right:30px; text-decoration:underline; cursor:pointer;}	
	
.show2{ position:absolute; left:0; top:0; height:342px; width:958px; background:#fff; z-index:2; display:none; border:1px #ddd solid;}
.show2 td{ vertical-align:middle; height:342px; padding:0 30px; font-size:13px; line-stacking:0.5px; font-family:Arial, Helvetica, sans-serif; line-height:20px;}
.show2 td h4{ margin-bottom:10px; font-size:16px;}
.show2 td img{ padding:10px; border:1px #ddd solid;
		   -moz-box-shadow: 2px 2px 6px #cacaca;
-webkit-box-shadow: 2px 2px 6px #cacaca;
        box-shadow: 2px 2px 6px #cacaca;
	}
.show2 .close{ position:absolute; bottom:20px; right:30px; text-decoration:underline; cursor:pointer;}	
	
.show3{ position:absolute; left:0; top:0; height:342px; width:958px; background:#fff; z-index:2; display:none; border:1px #ddd solid;}	
.show3 td{ vertical-align:middle; height:342px; padding:0 30px; font-size:13px; line-stacking:0.5px; font-family:Arial, Helvetica, sans-serif; line-height:20px;}
.show3 td h4{ margin-bottom:10px; font-size:16px;}
.show3 td img{ padding:10px; border:1px #ddd solid;
		   -moz-box-shadow: 2px 2px 6px #cacaca;
-webkit-box-shadow: 2px 2px 6px #cacaca;
        box-shadow: 2px 2px 6px #cacaca;
	}	
.show3 .close{ position:absolute; bottom:20px; right:30px; text-decoration:underline; cursor:pointer;}	

.images{ padding:10px; border:1px #ddd solid; background:#fff;
		   -moz-box-shadow: 2px 2px 6px #cacaca;
-webkit-box-shadow: 2px 2px 6px #cacaca;
        box-shadow: 2px 2px 6px #cacaca;
}

/* contact
------------------------------------------------------------------------------------*/

.contact{ background: url(../images/contact_bg.jpg) right 60px no-repeat;}
.contact h3{ background: url(../images/design_list.png) left 12px no-repeat; padding:10px 0 30px 30px; font-size:20px; font-weight:normal; letter-spacing:1px;}	
.contact #map-canvas{ height:198px; width:293px;}
.contact .map_wrap{ border:1px #ddd solid; margin-bottom:20px; height:100px; width:295px; padding:10px; background:#fff;
   -moz-box-shadow: 2px 2px 6px #cacaca;
-webkit-box-shadow: 2px 2px 6px #cacaca;
        box-shadow: 2px 2px 6px #cacaca;
}
.contacts_form{ width:630px; margin:0 0 0 -8px; float:left;}
.contects_info{ width:260px; text-align:center; padding:125px 0 0 0;}
.contects_info h4{ margin-bottom:10px; font-size:13px;}
.contects_info p{ margin-bottom:5px;}
.contacts_right{ float:right; width:305px;}

.contact a:hover{ text-decoration:underline;}

.path{ color:#333; font-size:13px;}
.path a{ color:#333;}
.path a:hover{ color:#C00; text-decoration:underline;}
.path img{ margin:0 10px;}