@charset "utf-8";
/* reset css */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td {margin:0; padding:0; -webkit-text-size-adjust:none;}
table {border-collapse:collapse; border-spacing:0;}
img {border:0;}
ol, ul {list-style:none;}
a{outline:none; hlbr:expression(this.onFocus=this.blur()); text-decoration:none;}
input , select , textarea , button{outline:none; border-radius:0;}

html{background:#FFF;}
body{font-family:arial,"微軟正黑體"; background:url(../images/main_bg.jpg) center 222px no-repeat #b10000;}

/* top */
#top{height:222px; background:url(../images/header_bg.jpg) center top no-repeat;}

/* header */
#header{position:relative; width:1000px; margin:0 auto; padding:30px 0 0 80px; z-index:1;}

/* logo */
#logo{display:inline-block; width:157px; height:34px; background:url(../images/logo.png); text-indent:-9999px; cursor:pointer;}

/* lang */
#lang{position:absolute; right:165px; top:11px;}
#lang a{display:inline-block; padding-left:20px; font-family:"新細明體"; font-size:12px; color:#b08484;}
#lang a:before{content:""; position:relative; left:-5px; top:-2px; display:inline-block; width:0; height:0; border-style:solid; border-width:2.5px 0 2.5px 5px; border-color:transparent transparent transparent #999; transition:all .3s;}
#lang a:hover{color:#bc9898;}
#lang a:hover:before{left:-2px; border-color:transparent transparent transparent #FFF;}

/* home */
#home-link{position:absolute; right:75px; top:13px; display:block; width:75px; height:18px; background:url(../images/home.jpg) top;}
#home-link:hover{background-position:bottom;}

/* navigation */
#navigation{position:relative; left:50px; display:inline-block; width:600px; overflow:hidden;}
#navigation li{position:relative; top:-50px; float:left; display:none; width:90px; border-left:1px dotted #000; border-right:1px dotted #a37474; font-size:15px; text-align:center; box-sizing:border-box; z-index:1;}
#navigation li a{color:#FFF;}
#navigation .hover{position:absolute; left:10; top:0; display:block; width:80px; height:30px; background:#960000; opacity:0; z-index:0;}

/* ani-page */
#ani-page{position:absolute; left:50%; top:-182px; width:1000px; height:182px; margin-left:-500px; background:url(../images/header.png); z-index:0}

/* tree */
#tree{position:absolute; left:50%; top:0; width:433px; height:222px; margin-left:-660px; background:url(../images/tree2.png);}
#flower{position:absolute; left:50%; top:100px; width:1000px; height:50px;}
#flower .big-flower{position:absolute; display:block; width:11px; height:10px; background:url(../images/leaf_1.png);}
#flower .flower{position:absolute; display:block; width:5px; height:6px; background:url(../images/leaf_2.png);}

/* container */
#container{position:relative; width:1000px; margin:-82px auto 0 auto; padding-left:210px; box-sizing:border-box;}
#container:after{content:""; display:block; clear:both;}

/* page-left */
#page-left{position:absolute; left:0; top:0; width:193px; height:100%; margin-left:19px; padding-top:50px; box-sizing:border-box; z-index:1}
#page-left .title{width:193px; height:84px;}
#page-left ul{height:100%; background:url(../images/left_body.png) repeat-y;}
#page-left li a{display:block; width:160px; margin:0 auto; padding:12px 0 12px 10px; background:url(../images/lm_arrow.gif) left 17px no-repeat; border-bottom:#b9b9b9 1px solid; font-size:12px; color:#4e4d4d; font-weight:bold; box-sizing:border-box;}
#page-left li a:hover{color:#FFF; background:url(../images/page_left-menu-bg.jpg) center no-repeat;}
#page-left li a:hover:before{visibility:hidden;}

/* page-right */
#page-right{width:788px; height:auto;}
#page-right:before{content:""; display:block; width:100%; height:82px; background:url(../images/right_top.png) left top;}
#page-right .wrapper{background:url(../images/right_body.jpg) repeat-y; margin-top:-20px; padding:0 50px 20px 20px;}
#page-right .path{font-size:12px; color:#980000; line-height:19px; text-align:right;}
#page-right .path a{color:#858585;}
#page-right .path a:hover{color:#000000;}
#page-right .banner img{display:block;}
#page-right .title{display:block; padding-left:40px; padding-bottom:10px; background:url(../images/page_title-bg.jpg) left top no-repeat; font-size:15px; color:#000000; line-height:46px; font-weight:bold;}

/* gotop */
#gotop{position:absolute; right:5px; top:300px; display:block; width:40px; height:40px; background:url(../images/gotop.png); cursor:pointer; text-indent:-9999px; z-index:100;}

/* footer */
#footer{position:relative; width:100%; margin:0 auto; padding-top:10px; border-top:1px solid #FFF; background:url(../images/ftbg_rx.jpg) top repeat-x; font-family:arial , "新細明體"; font-size:12px; color:#898989; line-height:20px; text-align:center; box-shadow:0 0 20px #999; z-index:2}
#footer > div{width:1000px; margin:0 auto;}
#footer .path a{color:#565656;}
#footer .path a:hover{color:#CC0000;}
#footer .copyright{line-height:18px; padding-top:5px;}
#footer .copyright a{color:#898989;}
#footer .copyright a:hover{color:#333333; text-decoration:underline;}
#footer:after{content:""; position:absolute; bottom:-30px; display:block; width:100%; height:30px; background:#FFF;}





/*---------------------------------------------------------關於我們---------------------------------------------------------------*/
/*----------團隊介紹----------*/
#team   { width:700px; display:block; }
#team ul{ width:700px; margin:15px 0;}
#team h3{ width:700px;}
#team h3 img{position:relative; top:5px;}
#team dl{ width:675px; display:block;padding-left:25px; border-bottom:#DADADA 1px dashed; overflow:hidden;}
#team dt{width:50px; float:left; display:block; color:#990000; font-size:12px; line-height:22px; font-weight:bold;}
#team dd{width:590px; float:left; display:block; color:#666666; font-size:12px; line-height:22px;}

/*---------------------------------------------------------網站設計---------------------------------------------------------------*/
/*----------活動網站----------*/
#web-flash{width:700px; margin:0 auto;}
#web-flash dl{ display:block; width:700px; float:left; margin-bottom:5px;}
#web-flash dt{ display:block; width:10px; float:left;}
#web-flash dd{ display:block; width:680px; float:right;}
#web-flash p{ display:block; width:700px; float:left; margin:5px 0;}


#web{width:700px; overflow:hidden; margin:15px auto;}
#web ul{margin:0 9px 15px 0; overflow:hidden;}
#web ul.low{ float:left; height:140px; width:166px; display:block; margin:0 9px 15px 0;}/*高度低*/
#web li{ width:166px; height:280px; background:url(../images/web_bg.jpg) center top no-repeat; float:left; margin:3px;}
#web p{color:#666666; width:150px; margin:0 auto;}
#web img{ margin:7px auto; width:150px; height:97px; display:block;}
#web span{}
/*------高度高----*/
#web-2{margin:15px auto; overflow:auto;}
#web-2 ul{ float:left; height:350px; width:166px; display:block; margin:0 9px 15px 0;}
#web-2 li{ width:166px; background:url(../images/web_bg.jpg) center top no-repeat; float:left;}
#web-2 p{color:#666666; width:150px; margin:0 auto;}
#web-2 img{ margin:7px auto; width:150px; height:97px; display:block;}
#web-2 span{}
/*----------企業網站----------*/
#web-company{width:700px; margin:0 auto; overflow:hidden;}
#web-company-menu{width:178px; height:420px; float:left; padding-right:15px; border-right:1px solid #CCCCCC; box-sizing:border-box;}
#web-company-menu a{ display:block; color:#666666; font-size:13px;  padding:0 5px; background-color:#fff; border:1px solid #cccccc; margin:0 0 3px 0;}
#web-company-menu a:hover{ color:#ffffff; background-color:#990000;}

#web-company-work{ width:522px; float:right; padding:0 5px; box-sizing:border-box;}
#web-company-work ul{float:left; display:block; margin:0 0px 20px 10px; width:160px;}
#web-company-work li{width:150px; color:#666666; line-height:25px; font-family:Arial; font-size:12px;}
#web-company-work img{ border:1px solid #CCCCCC; padding:1px;}
#web-company-work img:hover{ border:1px solid #990000;}

/*----------企業網站 作品介紹----------*/
#web-work{width:700px;}

/*--上面分類選單--*/
#web-work-menu{ background:url(../images/web_bg2.jpg) -10px 0; width:710px; height:132px; margin:0 auto; padding-bottom:15px;}
#web-work-menu ul{ float:left; width:173px}
#web-work-menu li{height:26px;}
#web-work-menu li a{ color:#666666; font-size:12px; font-family:Arial; line-height:26px; text-decoration:none; padding-left:10px;}
#web-work-menu li a:hover{ color:#000000;background:url(../images/icon_06.gif) no-repeat left;}

/*--下方作品2--*/
#web-design-work { width:700px;}
#web-design-work ul {width:700px; display:block; margin:0 4px 15px 5px; overflow:hidden;}
#web-design-work li { float:left; display:block; width:166px; height:166px !important; background:url(../images/web_bg.jpg) center top no-repeat; margin:0 9px 10px 0;}
#web-design-work p  { color:#6d4720; font-size:12px; font-family:Arial; line-height:18px; padding-left:5px; padding-bottom:5px; }
#web-design-work img{ display:block; margin:7px auto; width:150px; height:97px; border:1px solid #ffffff;}
#web-design-work img:hover{ border:1px solid #666666;}

/*----------SEO----------*/
#web-seo{ width:700px; margin:0 auto; overflow:auto; }
#web-seo img{ border:1px solid #cccccc; padding:1px;}
#web-seo img:hover{ border:1px solid #666666; padding:1px;}
#web-seo dl{ width:700px; float:left; margin:8px 0;}
#web-seo dt{ float:left; width:195px;}
#web-seo dd{ float:right; width:505px;}

/*----------相關提案----------*/
#web-design-demo{ width:700px; background-color:#FFFFFF;}
#web-design-demo h3 {margin:15px 0 8px 0;}
#web-design-demo ul{overflow:hidden;}
#web-design-demo li{ float:left; width:150px; height:97px; margin:0 8px 8px 5px; border:1px solid #CCCCCC; padding:2px;}
#web-design-demo li:hover{ border:1px solid #990000; }
#web-design-demo li img {width:150px; height:auto; margin:0 auto; overflow:hidden;}
#web-design-demo li a{ display:block; width:150px; height:97px; overflow:hidden;}

/*---------------------------------------------------------服務項目---------------------------------------------------------------*/
#service{width:700px; margin:0 auto; background-color:#FFFFFF;}
#service ul{width:680px; margin-bottom:10px; margin-top:5PX; overflow:hidden;}
#service li{ float:left; display:block; width:339px; margin:5px 0;}
#service li a.s1{ display:block; width:339px; height:134px; background-image:url(../images/s1.jpg); background-position:left top; text-indent:-9999px;}
#service li a.s2{ display:block; width:339px; height:134px; background-image:url(../images/s2.jpg); background-position:left top; text-indent:-9999px;}
#service li a.s3{ display:block; width:339px; height:134px; background-image:url(../images/s3.jpg); background-position:left top; text-indent:-9999px;}
#service li a.s4{ display:block; width:339px; height:134px; background-image:url(../images/s4.jpg); background-position:left top; text-indent:-9999px;}
#service li a.s5{ display:block; width:339px; height:134px; background-image:url(../images/s5.jpg); background-position:left top; text-indent:-9999px;}
#service li a.s6{ display:block; width:339px; height:134px; background-image:url(../images/s6.jpg); background-position:left top; text-indent:-9999px;}
#service li a.s6{ display:block; width:339px; height:134px; background-image:url(../images/s6.jpg); background-position:left top; text-indent:-9999px;}
#service li a.s7{ display:block; width:339px; height:134px; background-image:url(../images/s7.jpg); background-position:left top; text-indent:-9999px;}
#service li a.s8{ display:block; width:339px; height:134px; background-image:url(../images/s8.jpg); background-position:left top; text-indent:-9999px;}
#service li a.s9{ display:block; width:339px; height:134px; background-image:url(../images/s9.jpg); background-position:left top; text-indent:-9999px;}
#service li a.s10{ display:block; width:339px; height:134px; background-image:url(../images/s10.jpg); background-position:left top; text-indent:-9999px;}
#service li a.s11{ display:block; width:339px; height:134px; background-image:url(../images/s11.jpg); background-position:left top; text-indent:-9999px;}
#service li a.s12{ display:block; width:339px; height:134px; background-image:url(../images/s12.jpg); background-position:left top; text-indent:-9999px;}
#service li a.s13{ display:block; width:339px; height:134px; background-image:url(../images/s13.jpg); background-position:left top; text-indent:-9999px;}
#service li a.s14{ display:block; width:339px; height:134px; background-image:url(../images/s14.jpg); background-position:left top; text-indent:-9999px;}
#service li a:hover{ background-position:left bottom;}
/*---------- Banner 廣告設計 ----------*/
#banner{}
#banner ul{margin-left:20px; margin-top:10px; overflow:hidden;}
#banner li{ float:left; width:170px; height:auto; margin-bottom:15px;}
#banner li p{ display:block; width:110px; margin:2px 0 0 36px; font-size:12px; color:#666666; text-align:center;}
#banner li img{ display:block;opacity:1;filter:Alpha(opacity=100);}
#banner li img:hover{opacity:0.8;filter:Alpha(opacity=80);}
/*---------- 手機網站設計 ----------*/
.phone-way{ width:700px; overflow:auto;}
.phone-way ul{ width:600px; margin:0 auto;}
.phone-way li{ width:110px; height:211px; float:left; margin:10px 5px;}

/*手機網站*/
#phoneWeb{ display:block; margin:10px auto; width:555px; overflow:auto;}
.phoneBox { background:url(../images/plan_phone.png) left top no-repeat; width:180px; height:345px; position:relative; overflow:hidden; float:left; padding:2px;}
.phone{  width:150px; height:227px; position:absolute; left:15px; top:60px; overflow:hidden; cursor:pointer;}
.phoneBox .CONTENT { width:150px; height:227px; position:absolute;}
.phoneBox .CONTENT .MEMO { width:150px; height:227px;}
.phoneBox .CONTENT .MEMO img{ padding:50px 9px;}

/*---------------------------------------------------------成功案例---------------------------------------------------------------*/
/*----------網站案例----------*/
#case-web{ width:700px; margin:0 auto; overflow:auto; }
#case-web img{ border:1px solid #990000; padding:1px;}
#case-web img:hover{ border:1px solid #f2f2f2; padding:1px;}
#case-web dl{ width:700px; float:left; margin:8px 0;}
#case-web dt{ float:left; width:195px;}
#case-web dd{ float:right; width:505px;}
/*----------品牌形象----------*/
#case-brand{width:700px; margin:0 auto; overflow:auto;}
#case-brand ul{ width:550px; margin:0 auto;}
#case-brand li{ width:154px; float:left; margin:8px;}
#case-brand img{ border:1px solid #CCCCCC; padding:2px;}
#case-brand img:hover{ border:1px solid #990000;}

/*---------------------------------------------------------網站地圖---------------------------------------------------------------*/
#sitemap{ width:720px; margin:0 auto; overflow:hidden;}
#sitemap dl{border-bottom:1px solid  #e8e8e8; overflow:hidden;}
#sitemap ul{ float:left; display:block; width:160px; height:225px; padding:15px 10px;}
#sitemap li{ display:block; width:168px; padding:2px 0; }
#sitemap a{ color:#666666; text-decoration:none; font-size:12px;}
#sitemap a:hover{ color:#000000; font-weight:bold;}




/* asia word */
/*------------------------------------------------文字------------------------------------------------------*/
.word-gray{ color:#666666; font-size:13px; font-family:Arial; line-height:20px;}
.word-gray2{ color:#787878; font-size:12px; font-family:Arial; line-height:18px;}
.word-black{ color:#000000; font-size:13px; font-family:Arial; line-height:20px;}
.word-blod{ color:#333333; font-size:13px; font-family:Arial; line-height:20px; font-weight:bold;}
.word-brown{ color:#6d4720; font-size:12px; font-family:Arial; line-height:18px;}
.word-red{ color:#980000; font-size:13px; font-family:Arial; line-height:20px;}
.word-red_01{ display:block; color:#980000; font-size:13px; font-family:Arial; line-height:20px; padding-top:10px;}
.word-red_02{ color:#FF3333; font-size:13px; font-family:Arial; line-height:20px; vertical-align:top;}
.word-blue{ color:#3681ac; font-size:13px; font-family:Arial; line-height:20px;}
.word-title01{ color:#000000; font-size:15px; font-family:Arial; line-height:30px; font-weight:bold; vertical-align:top;}

.block{ padding:2px 0;}

/*------------------------------------------------連結------------------------------------------------------*/
.hp_gray{ color:#666666; font-size:13px; font-family:Arial; line-height:20px; text-decoration:none;}
.hp_gray:hover{ border-bottom:1px solid #666666; color:#333333;}

.hp_gray_02{ color:#666666; font-size:13px; font-family:Arial; line-height:20px; text-decoration:none;}
.hp_gray_02:hover{ border-bottom:1px solid #FF6666; color: #CC0000;}

.hp_gray_03{ color:#666666; font-size:12px; font-family:Arial; line-height:18px; text-decoration:none; border-bottom:1px solid #CCCCCC;}
.hp_gray_03:hover{ border-bottom:1px solid #FF6666; color: #CC0000;}

.hp_gray_04{ color:#666666; font-size:12px; font-family:Arial; line-height:18px; text-decoration:none;}
.hp_gray_04:hover{ color: #CC0000;}

.hp_gray5{ color:#333333; font-size:13px; font-family:Arial; line-height:20px; text-decoration:none; text-decoration:none; font-weight:bold;}
.hp_gray5:hover{ color:#ab6500;}

.hp_brown{ color:#ab6500; font-size:12px; font-family:Arial; line-height:18px; text-decoration:none; padding-left:20px; background: url(../images/icon_09.gif) no-repeat left;}
.hp_brown:hover{ color: #000000;}

.hp_footer {color:#565656; font-size:12px; font-family:Arial; line-height:20px; text-decoration:none;}
.hp_footer:hover{ color:#CC0000;}

.hp_btn{ display:block; margin:10px 5px; width:70px; height:19px; line-height:19px; font-size:13px; font-weight:bold; color:#666666; text-decoration:none; text-align:center; border:1px solid #999999;}
.hp_btn:hover{ color:#ffffff; border:1px solid #CCCCCC; background-color:#666666;}

.hp_link{ display:block; width:150px; height:18px; color:#666666; font-size:13px; text-decoration:none; margin:0 auto; line-height:18px;}
.hp_link:hover{ background-color:#990000; color:#FFFFFF;}

.hp_word-brown{ color:#6d4720; font-size:12px; font-family:Arial; line-height:18px; text-decoration:none; padding-left:10px;}
.hp_word-brown:hover{ color:#CC0000;}

.hp_box{ display:block; border:1px solid #ffffff; width:150px; height:97px;opacity:0.8;filter:Alpha(opacity=80);}
.hp_box:hover{ border:1px solid #666666;opacity:1;filter:Alpha(opacity=100);}


/*------------------------------------------------表單------------------------------------------------------*/
.box_01{ border:1px solid #cccccc; width:180px; height:15px; line-height:15px; color:#666666;}
.box_02{ border:1px solid #cccccc; width:350px; height:15px; line-height:15px; color:#666666;}
.box_03{ border:1px solid #cccccc; width:700px; line-height:18px; color:#666666;}
.box_04{ border:1px solid #cccccc; width:155px; height:15px; line-height:15px; color:#666666;}

.form1{ background-color:#fff; border:#cccccc solid 1px; padding:5px; font-size:12px; color:#999;}
.form1:focus{ background-color:#feffef; color:000; border:#fed17b solid 1px;}

.send{ display:block; width:100px; height:25px; background-image:url(../images/send.jpg); border:0; margin:0 auto; cursor:pointer;}
.send:hover{ background-position:left bottom;}