/*
 取至 ECMall
*/

/*初始化*/

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, li, body, form, input, button, img, cite, strong, em, table, td, th { padding:0; margin:0;}
h1, h2, h3, h4, h5, h6 { font-size:14px;}
img, table, td, th { border:0;}
ul, ol { list-style-type:none;}
body { font:12px Arial, Verdana, sans-serif;}

/*css group*/

#head,#head ul,#news,#product,#exhibit,#selectarea,#client,#foot,.subnav,#content,.shadow {width: 880px; margin: 0 auto;}
#content { overflow: hidden; background: url(../images/content.gif) repeat-y; position: relative;}
.content1 {width: 2px; height: 125px; background: url(../images/con_top_left.gif); position: absolute; top: 0; left: 0;}
.content2 {width: 2px; height: 125px; background: url(../images/con_top_right.gif); position: absolute; top: 0; right: 0;}
.content3 {width: 2px; height: 125px; background: url(../images/con_bot_left.gif); position: absolute; bottom: 0; left: 0;}
.content4 {width: 2px; height: 125px; background: url(../images/con_bot_right.gif); position: absolute; bottom: 0; right: 0;}
.shadow {height: 10px; background: url(../images/shadow.gif); position: relative; z-index: 2; top: 1px; overflow: hidden;}
	.shadow1 {width: 71px; height: 10px; background: url(../images/shadow1.gif); position: absolute; bottom: 0; left: 0; overflow: hidden; }
	.shadow2 {width: 1px; height: 10px; background: url(../images/shadow2.gif); position: absolute; bottom: 0; right: 0; overflow: hidden;}
#left {float: left;width: 630px; position: relative;}
	.leftLine {width: 2px; height: 518px; background: url(../images/left_line.gif); position: absolute; top: 0; right: 0;}
#right {float: right; width: 235px; padding-top: 50px;}
.marginB20 {margin-bottom: 20px;}
.paddingL20 {padding-left: 20px;}
.marginR20 {margin-right: 20px;}
.lineHeight {line-height: 20px}
.tind25 {text-indent: 25px;}
strong {color: #ff6c00}

/*頭部*/

#head {	height: 104px;	position: relative;}
	#head h1 { position: absolute; top: 20px;left: 0;}
	#search {position: absolute; top: 25px;right: 0;}
		.text { width: 183px; padding: 4px 3px 3px 3px; font:12px Arial, Verdana, sans-serif; color: #666; border: 1px solid #afafaf; border-right: 0; background: url(../images/text.gif) repeat-x; position: relative;left: 3px; bottom: 1px; bottom: 0;}
		.but { border: 0; background: url(../images/but.gif); height: 24px; width: 67px; }
	#head ul {position: absolute; bottom: 0;left: 0; height: 34px; background: url(../images/nav.gif) repeat-x;}
	#head ul li {float: left;}
	.index {background: url(../images/index.gif); height: 34px; width: 59px;padding-left: 12px; float: left;line-height: 34px; text-align: center;color:#fff; text-decoration:none;}
	.link {color:#fff; text-decoration:none; display: block; background: url(../images/nav_hover.gif) no-repeat 0 0; height: 34px; width: 88px; float: left; line-height: 34px; text-align: center;}
	.link:hover { background: url(../images/nav_hover.gif) no-repeat 0 bottom; }
	.hover {color:#fff; text-decoration:none; display: block; background: url(../images/nav_hover.gif) no-repeat 0 bottom; height: 34px; width: 88px; float: left; line-height: 34px; text-align: center;}
	.navR {width: 5px; height: 34px; background: url(../images/nav_right_pic.gif); position: absolute; top: 0; right: 0;}
	.navT {width: 120px; height: 1px; background: url(../images/nav_top_pic.gif); position: absolute; top: 1px; right: 5px; overflow: hidden;}
	.ico { position: absolute; top: -5px; right: 277px; }

/*廣告及最新動態*/

#news {height: 210px; background: #3d3d3d; position: relative;}
	.news1 {width: 5px; height: 5px; overflow: hidden; background: url(../images/news1.gif); position: absolute; bottom: 0;left: 0; z-index: 3;}
	.news2 {width: 5px; height: 5px; overflow: hidden; background: url(../images/news2.gif); position: absolute; bottom: 0;right: 0; z-index: 3}
	#scroll {width: 624px; height: 210px; position: absolute; bottom: 0;left: 0; z-index: 1;}
		#scroll ul {width: 66px; height: 205px; padding: 5px 0 0 6px; float: left;}
			#scroll li {width: 60px; height: 45px; overflow: hidden; margin-bottom: 4px; background: #545454;cursor: pointer;}
			.nonce {border: 1px solid #303030;}
			.glide {border: 1px solid #f57818;}
		.banner {float: left; width: 550px; height: 200px; margin: 5px 0 0 2px; overflow: hidden; background: #666;}
	#hot {width: 256px; height: 200px; position: absolute; bottom: 5px; right: 0; z-index: 1; background: url(../images/hot.gif) no-repeat;}
	.more {position: absolute; top: 5px; right: 12px;}
	#hot h2 {position: absolute; top: 5px; left: 10px; text-indent: -9999px; width: 104px; height: 14px; background: url(../images/hot_h2.gif) no-repeat;}
	#hot dl {position: absolute; top: 24px; left: 7px;}
	#hot dl dt {padding: 2px 0 0 5px; line-height: 14px; color: #929292; font-size: 10px; font-weight: bold;}
	#hot dl dd {padding: 0 0 2px 5px; line-height: 18px; height: 16px; width: 230px; overflow: hidden; border-bottom: 1px dotted #5b5b5b;}
		#hot dl dd a {color: #cfcfcf;text-decoration: none;}
		#hot dl dd a:hover {color: #fff;}
	.line1 {width: 2px; height: 167px; position: absolute; bottom: 0;left: 2px; background: url(../images/line1.gif); z-index: 1;}
	.line2 {width: 2px; height: 167px; position: absolute; bottom: 0;right: 5px; background: url(../images/line2.gif); z-index: 1;}
	.line3 {width: 245px; height: 0; overflow: hidden; position: absolute; bottom: 0; left: 4px; border-top: 1px solid #262626; border-bottom: 1px solid #494949; z-index: 2;}

/*電子商務系統 FLASH展示*/

#product {height: 190px; margin-top: 10px;}
	.down {float: left; width: 624px; height: 190px; background: url(../images/down.gif); position: relative;}
		.down p {position: absolute; bottom: 20px; left: 240px; color: #888;}
		.experience {position: absolute; bottom: 16px; right: 151px;}
		.download {position: absolute; bottom: 16px; right: 39px;}
	.affiliation {float: right; width: 256px; height: 190px; background: url(../images/affiliation.gif);  position: relative;}
		.qq1 {position: absolute; bottom: 35px; right: 135px;}
		.qq2 {position: absolute; bottom: 35px; right: 76px;}
		.qq3 {position: absolute; bottom: 35px; right: 16px;}
		.affiliation p {position: absolute; bottom: 13px; right: 20px; color: #888;}
		.affiliation a {color: #ff6c00;text-decoration: none;}
		.affiliation a:hover {text-decoration: underline;}
#exhibit {height: 190px; margin-top: 5px;}


/*搜尋區域*/

#selectarea {padding:10px 0 0 0;}
.b1f, .b2f, .b3f, .b4f {font-size:1px; overflow:hidden; display:block; background:#FFFFFF; border-right:2px solid #6694E3; border-left:2px solid #6694E3;}
.b1f {height:1px; margin:0 5px; background:#6694E3;}
.b2f {height:1px; margin:0 3px; border-right-width:2px; border-left-width:2px;}
.b3f {height:1px; margin:0 2px;}
.b4f {height:2px; margin:0 1px;}
.head {background:#6694E3;}
div.content, div.head{ padding-left:15px; border-right:2px solid #6694E3; border-left:2px solid #6694E3;}
div.head h1 {margin:0px; background:#6694E3; font-size:16px;color:#FFFFFF;}
.content {background:#FFFFFF; padding-top:5px;color:#000000;}




/*客戶展示 合作夥伴*/

#client {margin-top: 10px; margin-bottom: 10px; overflow: hidden;}
	.user {float: left; width: 100%; overflow: hidden; padding:0 0 10px 0;}
		#client h2 {height: 25px; background: url(../images/user_h2.gif); position: relative;}
			#client span {/*text-indent: -1000px;*/text-indent:5px; font-size:10pt; display: block; width: 142px; height: 25px; background: url(../images/title_bg.gif); color:#fff;}
				#client span img { position: absolute; top: 7px; left: 10px;}
			.userMore { position: absolute; bottom: 0; right: 0; line-height: 25px; height: 25px; background: url(../images/user_more.gif) no-repeat right top; padding-right: 10px; font-weight: normal; font-size: 12px; color: #6e6f6f;text-decoration: none;}
			.userMore:hover {text-decoration: underline;}
		.user ul {width: 98%; padding: 10px 0 0 16px; overflow: hidden; border: 1px solid #ccc; border-top: 0;}
		.user li {float: left; width: 280px; height: 90px; margin: 0 5px 0 0; padding-bottom: 10px; overflow: hidden;}
			.pic {float: left; border: 1px solid #ccc; padding: 2px; width: 100px; height: 70px; overflow: hidden;}
			.userText {float: right; width: 168px;}
				.userText h3 {font-size: 12px; font-weight: normal; margin-bottom: 3px;}
				.userText p {color: #a5a5a5; margin-bottom: 3px;}
				.userText a {color: #ff6c00; text-decoration: none;}
				.userText a:hover {text-decoration: underline;}
	.cooperate {float: right;  width: 250px;}
		.cooperate ul {width: 230px; height: 285px; padding: 15px 0 0 18px; border: 1px solid #ccc; border-top: 0; overflow-y: scroll; position: relative;}
			.cooperate li {float: left; border: 1px solid #ccc; width: 88px; height: 31px; margin: 0 16px 15px 0; display: inline;}

/*底部*/

#foot {height: 122px; text-align: center; word-spacing: 5px;}
	.subnav {line-height: 30px; height: 32px; background: url(../images/subnav.gif); color: #fff; position: relative; margin-bottom: 10px;}
		.subnav span {color: #fff}
		.subnav a {color: #ff6c00; text-decoration: none;}
		.subnav a:hover {text-decoration: underline;}
		.subnav1 {position: absolute; top: 0; left: 0; width: 2px; height: 32px; background: url(../images/subnav1.gif);}
		.subnav2 {position: absolute; top: 0; right: 0; width: 2px; height: 32px; background: url(../images/subnav2.gif);}
	#foot p {color: #858585; line-height: 22px;}
		#foot p a {color: #000000; text-decoration: none;}
		#foot p a:hover {text-decoration: underline;}

/*產品介紹*/

.title {margin: 50px 0 50px 50px;}
	.title dt {text-indent: -1000px; position: relative; width: 142px; height: 25px; background: url(../images/title_bg.gif); margin-bottom: 25px;}
		.title dt img { position: absolute; top: 7px; left: 10px;}
		.title dt span { position: absolute; top: 0; right: -210px; width: 210px; height: 25px; background: url(../images/title_dt.gif);}
	.title dd {margin-bottom: 25px; padding-right: 15px;}
		.intro {text-indent: 25px; color: #a5a5a5; line-height: 20px;}
			.intro a {color: #ff6c00; text-decoration: none;}
			.intro a:hover {text-decoration: underline;}
		.title dd div {padding-left: 45px; line-height: 20px; margin-bottom: 25px;}
		.n1 {background: url(../images/n1.gif) no-repeat 3px 5px;}
		.n2 {background: url(../images/n2.gif) no-repeat 3px 5px;}
		.n3 {background: url(../images/n3.gif) no-repeat 3px 5px;}
		.n4 {background: url(../images/n4.gif) no-repeat 3px 5px;}
		.n5 {background: url(../images/n5.gif) no-repeat 3px 5px;}
		.title h2 {color: #007bc9; font-size: 12px;}
		.title h3 {color: #007bc9;}
		.title h4 {padding: 30px 0 5px;}
		.title p {color: #a5a5a5;}

/*定制開發*/

.customize {margin: 50px 0 50px 50px; line-height: 20px; padding-right: 20px;}
	.customize h2 {position: relative; margin-bottom: 25px;}
		.customize h2 img {position: absolute; top: 0px; left: 0px;}
	.customize p {color: #7e7e7e; margin-bottom: 20px;}
		.customize p a {color: #ff6c00;text-decoration: underline;}
		.customize p a:hover {color: #c05100}

/*模板專區*/

.cyclostyle {padding: 40px 0 50px 50px; width: 558px;}
	.cyclostyle h2 {line-height: 35px; border-bottom: 1px solid #e6e6e6; padding-left: 10px; color: #007bc9; margin-bottom: 10px;position: relative;}
		.return {position: absolute; top: 2px; top: -6px; right: 10px; text-decoration: none; color: #007bc9}
		.return:hover {text-decoration: underline;}
	.cyclostyle ul {width: 558px; overflow: hidden;}
		.cyclostyle li {width: 548px; overflow: hidden; border-bottom: 1px dotted #e6e6e6; padding: 15px 0 15px 10px; position: relative;}
			.web {float: left; margin-right: 16px; border: 1px solid #ccc; width: 140px; height: 100px;}
			.webTemplate {float: left; margin-right: 26px; border: 1px solid #ccc; width: 140px; height: 100px;}
			.webIntro {float: left; width: 350px; overflow: hidden; color: #a5a5a5; line-height: 18px;}
				.linkBot {color: #ff6c00; }
				.linkBot:hover {color: #c05100}
				.name {font-weight: bold; color: #ff6c00; text-decoration: none;}
				.name:hover {text-decoration: underline;}
	.page {text-align: center; word-spacing: 5px; padding-top: 10px;}
		.pageLink {color: #007bc9;}
		.pageHover {color: #333; text-decoration: none;}

/*用戶展示*/

.bringForth {padding: 40px 0 50px 50px; width: 780px;}
	.bringForth h2 {line-height: 35px; border-bottom: 1px solid #e6e6e6; padding-left: 10px; color: #007bc9; margin-bottom: 10px;}
	.bringForth ul {width: 780px; overflow: hidden;}
		.bringForth li {width: 770px; overflow: hidden; border-bottom: 1px dotted #e6e6e6; padding: 15px 0 15px 10px; position: relative;}
			.bringIntro {float: left; width: 600px; overflow: hidden; color: #a5a5a5; line-height: 18px;}

/*相關下載*/

.cyclostyle h3 {padding: 10px 0 10px 20px; color: #606060;}
.load {margin-left: 9px; background: #f8f8f8; color: #a5a5a5; padding: 15px; width: 510px; overflow: hidden; line-height: 20px; position: relative;}
	.load p a {color: #007bc9; font-size: 14px; font-weight: bold;}
	.load p a:hover {color: #015e99;}
	.load p img {margin: 10px 0;}
.fn {position: absolute; top: 15px; right: 20px; word-spacing: 5px;}
	.fn a {color: #ff6c00; text-decoration: none;}
	.fn a:hover {text-decoration: underline;}
.formerText {color: #a5a5a5; line-height: 20px;}
.formerText a {font-weight: bold; color: #007bc9;}
.formerText a:hover {color: #015e99;}
.formerDown {position: absolute; right: 20px; bottom: 20px; }
.formerDown a {color: #ff6c00; padding-left: 12px; background: url(../images/formerDown.gif) no-repeat left center; }

/*幫助頁面*/

.help {line-height: 20px;}
	.help h3 {color: #333;}
	.help h4 {color: #007bc9; font-size: 12px; padding-left: 50px;}
	.help h5 {color: #a5a5a5; font-size: 12px; padding-left: 65px;}
	.help p {color: #a5a5a5; padding-left: 65px;}
	.jpg {width: 450px; margin-left: 65px; padding: 10px 0;}
	.green {font-weight: bold;}
	.textareastyle {width: 350px; height: 100px; color: #666; margin-left: 60px; font-size: 12px; overflow: auto}
	.helpTitle {text-indent: 40px; margin-left: 20px; color: #a5a5a5;}
	.help a {color: #007bc9;}
	.help a:hover {color: #009cff;}

/*右側*/

.system {padding-bottom: 10px;}
	.system h2 {height: 23px; line-height: 23px; background: url(../images/right_h2.gif) no-repeat; font-size: 12px; font-weight: normal; padding-left: 15px; margin-bottom: 15px;}
	.system p {color: #a5a5a5; line-height: 20px; margin-bottom: 10px; padding: 0 10px 0 15px;}
	.system ul {padding-left: 12px; line-height: 20px; margin-bottom: 10px;}
		.system ul li {padding-left: 15px; background: url(../images/system_li.gif) no-repeat left center;}
			.system ul li a {color: #a5a5a5;text-decoration: none;}
			.system ul li a:hover {text-decoration: underline;}
.affiliation2 {width: 205px; height: 106px; background: url(../images/affiliation2.gif); position: relative; margin-left: 10px;}
	.affiliation2 p {position: absolute; bottom: 7px; right: 20px; color: #888;}
		.affiliation2 a {color: #ff6c00;text-decoration: none;}
		.affiliation2 a:hover {text-decoration: underline;}
.see {line-height: 23px; padding-left: 25px; background: url(../images/see.gif) no-repeat; margin: 0 0 15px 13px;}
	.see a {color: #ff6c00;}
.declare {background: #f8f8f8; color: #a5a5a5; padding: 15px; width: 170px; margin-left: 10px; overflow: hidden; line-height: 20px; position: relative;}
	.declare1 {position: absolute; top: 0; left: 0; width: 5px; height: 5px; overflow: hidden; background: url(../images/declare1.gif)}
	.declare2 {position: absolute; top: 0; right: 0; width: 5px; height: 5px; overflow: hidden; background: url(../images/declare2.gif)}
	.declare3 {position: absolute; bottom: 0; left: 0; width: 5px; height: 5px; overflow: hidden; background: url(../images/declare3.gif)}
	.declare4 {position: absolute; bottom: 0; right: 0; width: 5px; height: 5px; overflow: hidden; background: url(../images/declare4.gif)}
	.declare h3 {font-size: 12px; font-weight: normal;}
	.declare p {text-indent: 25px;}
.none,.now {width: 190px; height: 23px; line-height: 23px; padding-left: 10px; background: url(../images/right_h2.gif); text-decoration: none; display: block; margin-bottom: 10px;}
.none {color: #a5a5a5;}
.now {color: #333;}