@charset "utf-8";
/* CSS Document */
body {
	font-family: "微軟正黑體", "新細明體",Arial;
	font-size:12px;
	color:#999;
}
h2 , h3 , h4 , dt {color:#000;}
#container { width:960px; padding:0 10px; margin:0 auto;}
a:link {
	color: #0080cc;
	text-decoration: none;
}
a:visited {
  color: #0080cc;
  text-decoration: none;
}
a:hover {
	color: #0080cc;
	text-decoration: underline;
}
#main-menu a:hover {
	color: #999;
	text-decoration: none;  
}
.stylecard {background-image:url(../images/stylecard/banner.jpg);}
.enterprise {background-image:url(../images/enterprise/banner.jpg);}
.linkpeople {background-image:url(../images/linkpeople/banner.jpg);}
.designCard {background-image:url(../images/designCard/banner.jpg);}
.designerWork {background-image:url(../images/designerWork/banner.jpg);}
.rounded-corners-5 {-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; behavior:url(PIE.php);}
.rounded-corners-top-4 {-webkit-border-radius:4px 4px 0 0; -moz-border-radius:4px 4px 0 0; border-radius:4px 4px 0 0; behavior:url(PIE.php);}
.box {border:1px solid #dddddd;}
.bottom-dotted {border-bottom:2px dotted #0080cc;}
.bottom-solid {border-bottom:2px solid #0080cc;}
.box-drop-shadow {
  -moz-box-shadow:0 0 10px rgba(0,0,0,0.5);
  -webkit-box-shadow:0 0 10px rgba(0,0,0,0.5);
  box-shadow:0 0 10px rgba(0,0,0,0.5);
}
.box-drop-shadow-2 {
  -moz-box-shadow:0 2px 4px rgba(0,0,0,0.5);
  -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.5);
  box-shadow:0 2px 4px rgba(0,0,0,0.5);
}
/*------------ header ------------*/
#header {width:960px;}
#logo {float: left; margin-top:21px; margin-left:28px;}
#nav {
	float: right;
	position:relative;
	width:700px;
	height:100px;
	margin-right:10px;
}
#top-menu {text-align:right; font-size:13px; position:absolute; top:0; right:0; margin:10px 0;}
#top-menu li {display:inline; text-align:left;}
#top-menu li ul {display:inline;}
#top-menu li ul li {display:inline; border-right:2px solid #efefef; padding:0 8px;}
#top-menu li ul li.lang { vertical-align:middle;}
#top-menu li ul li.socialLinks {display:inline-block; *display:inline; *zoom:1; vertical-align:middle;}
#top-menu li ul li.last {padding-right:0; border:0;}
#main-menu {text-align:right; font-size:15px; font-weight:bold; position:absolute; bottom:0; right:0;}
#main-menu li {display:inline; padding-left:40px;}
#banner { margin:5px auto 20px; width:960px; height:430px;}
.bannerText { color:#000; padding:10px; background-color:#ffffff; position:absolute; opacity: 0.7;}
.bannerText p {}
.stylecard .bannerText, .designCard .bannerText , .designerWork .bannerText{width:340px; height:148px; margin-top:250px; margin-left:20px;}
.enterprise .bannerText , .linkpeople .bannerText {width:330px; height:360px; margin-top:25px; margin-left:20px;}
.one , .two {display:block; font-weight:bold; font-size:14px;}
.two {margin-bottom:15px;}
.enterprise .one {margin-left:40px;}
.enterprise .two {margin-left:180px;}
.linkpeople .one {margin-left:70px;}
.linkpeople .two {margin-left:150px;}
.enterprise h1 {letter-spacing:10px;}
.stylecard .go, .designCard .go, .designerWork .go {position:absolute; margin-top:370px; margin-left:40px;}
.enterprise .go , .linkpeople .go {position:absolute; margin-top:360px; margin-left:40px;}
.go {width:140px; height:30px; padding-top:7px; text-align:center; color:#fff; font-size:15px; display:block; background-color:#0080cc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; behavior:url(PIE.php);}
.button-small {text-align:center; color:#fff; font-size:11px; background-color:#0080cc; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; behavior:url(PIE.php);}
.button-mid {text-align:center; color:#fff; font-size:15px; background-color:#0080cc; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; behavior:url(PIE.php);}
.go:link, .button-small:link, .button-mid:link {
	color: #fff;
	text-decoration: none;
}
.go:visited, .button-small:visited, .button-mid:visited {
  color: #fff;
  text-decoration: none;
}
.go:hover, .button-small:hover, .button-mid:hover {
	color: #fff;
	text-decoration: none;
	background-color:#00a0e9;
	text-shadow:1px 1px 4px #000;
}
/*------------ content ------------*/
#content {margin-bottom:20px;}
#small-banner{ background-image:url(../images/small-banner.png); background-repeat:no-repeat; width:960px; height:60px; font-size:15px; text-align:center; line-height:30px; color:#666; margin-bottom:15px;}

.textBox-s {width:280px; height:400px; margin:0 8px 15px; vertical-align:top; padding:10px; display:inline-block; *display:inline; /* IE6、7 block 元素 */ *zoom:1;}
.textBox-m {width:601px; height:400px; margin:0 8px 15px; padding:10px; display:inline-block; *display:inline; /* IE6、7 block 元素 */ *zoom:1;}
.textBox-l {width:924px; margin:0 8px 15px; padding:10px;}
.textBox-m ul {width:601px;}
.textBox-m ul li {height:150px; margin:15px 0 20px;}
.textBox-m img {float:left; margin-right:20px;}
.textBox-m h3 {color:#0080cc; margin-bottom:10px;}
.no-padding {padding:0;}
.no-margin {margin:0 !important;}
.textBody { margin-bottom:10px;}
.textBody img {margin:15px 0;}
.textBody p {margin:15px 0;}
.textBody p>img {float:right; margin:0;}
.more {background:url(../images/more.png) left no-repeat; display:block; padding:15px 5px 15px 32px; font-size:15px; border-top:1px solid #ddd;}
h1 {font-size:32px; color:#0080cc; margin:20px 0;}
h2 {font-size:15px; padding-bottom:4px;}
h3 {font-size:13px; padding-top:15px;}
h4 {font-size:14px; margin:0 0 10px;}
.icon-box {margin-bottom:10px; padding:15px 0px 10px;}
.icon-box li {display:block; margin-bottom:15px; padding:0px 0px 0px 65px; height:80px;}
.icon-box-one {background:url(../images/stylecard/step1.png) 0 0 no-repeat;}
.icon-box-two {background:url(../images/stylecard/step2.png) 0 0 no-repeat;}
.icon-box-three {background:url(../images/stylecard/step3.png) 0 0 no-repeat;}

.goodbox {}
.goodbox li {width:160px; float:left; padding:15px 12px; text-align:center;}
.goodbox li img {margin:0 0 15px;}
.goodbox li p {text-align:left;}

.price {width:280px; color:#000; text-align:center; margin:15px 0; display:inline-block;}
.pricelist .price {margin:15px 13px;}
.price td {padding:3px;}
.price .bgcolor-1 {background-color:#D7D7D7;}
.price .bgcolor-2 {background-color:#F2F2F2;}
.transverseTitle {width:92px; background-color:#d3edfb; font-weight:bold;}
.cardname {font-size:15px; background-color:#00afff; font-weight:bold;}

#content_left {width:700px; margin:0 8px; float:left;}
#content_right {width:228px; margin:0 8px; float:right;}
.work_list {width:698px; margin-bottom:15px;}
.info {width:228px; padding:10px 10px 5px 10px; background-color:#f0f0f0; float:left;}
.info img {float:left; margin-right:20px;}
.work_list ul.card {margin:10px 0 0 0; float:left;}
ul.card li {float:left; margin:0 10px;}
ul.info-text {margin-top:-4px;}
.name {color:#0080cc;}

.account-info, .friend-box {width:206px; padding:10px; margin-bottom:15px;}
.account-info img {margin:10px 0; }
.edit {border-top:1px solid #ddd; padding-top:5px; margin-top:10px; text-align:right;}
.designer-title {display:block;}
.friend-list {margin-top:10px;}
.friend-list img {float:left; margin-right:10px;}

.designerWork-title {width:940px; padding:10px; background-color:#0080cc; color:#fff; font-size:15px; margin-bottom:15px; }
.title-more a {color:#fff;}
.title-more {float:right; }
.title-name {float:left;}
.work-box { float:left; padding:0 19px 20px; }
.work {width:183px; padding:8px; margin-bottom:8px; background-color:#fff;}
.work ul {margin-top:8px;}
.work ul li {float:left; margin-right:10px;}
.view {background-image: url(../images/designerWork/view.png); padding-left: 20px;}
.fav {background-image: url(../images/designerWork/favorites.png); padding-left: 16px;}
.view, .fav {
	background-repeat: no-repeat;
	background-position: 0px 4px;
}
.designerName {font-size:13px; color:#3b5998; margin-left:10px;`}
/*------------ templetes 頁面 ------------*/
#top {width:950px; padding:0 0 20px 10px; margin-top:4px;border-top:8px solid #ebebeb; color:#000;}
#top h1, .pagination, .pagination-footer {color:#000;}
#viewTypeList li {float:left; padding-right:10px;}
#viewTypeList li a {width:25px; height:25px; display:block; background-image:url(../images/templetes/viewtype.png);}
.viewTitle {font-size:15px;}
.typeIcon-1 {background-position:0 0;}
.typeIcon-1:hover {background-position:0 -25px;}
.typeIcon-2 {background-position:-25px 0;}
.typeIcon-2:hover {background-position:-25px -25px;}
.typeIcon-3 {background-position:-50px 0;}
.typeIcon-3:hover {background-position:-50px -25px;}
.pagination {font-size:15px; line-height:15px; float:right; width:700px; margin-top:2px; margin-right:10px;}
.pagination-footer {font-size:15px; line-height:15px; display:block; margin:0 10px 20px 10px;}
.pagination p, .pagination-footer p {float:left;}
.total {margin:0 4px;}
.offset-end {margin-right:6px;}
.showAll {border-left:1px solid #ddd; padding-left:10px; margin-left:10px;}
.pagination-numbers {float:right !important;}
.pagination-numbers span {margin:0 5px; display:block; float:left;}
.pre-page {width:11px; height:16px; background-image:url(../images/templetes/arrowLeft_no.png);}
.next-page {width:11px; height:16px; background-image:url(../images/templetes/arrowRight_have.png);} 
.sideNavBox {background-color:#f5f5f5; width:200px; margin:0 10px 20px; padding:18px 10px;}
.side-nav li {border-bottom:1px solid #dddddd; margin-bottom:18px; padding-bottom:20px;}
.side-nav li.last {border-bottom:none; margin-bottom:0px; padding-bottom:0px;}
.close {background-image:url(../images/templetes/close.png); padding-left:24px; color:#000 !important; background-repeat:no-repeat; text-decoration:none !important; font-weight:bold; font-size:15px; background-position:0 2px;}
li.clearAll {font-size:12px; border-bottom:none; padding-bottom:0; margin-bottom:2px; margin-top:-10px;}
li.clearAll a , .clear, .linkMore {float:right;}
#industry ,#upload ,#style ,#colourTypeList{margin-top:10px;}
#industry li ,#upload li ,#style li ,#colourTypeList li{color:#000; margin:0; padding:0; border:0; line-height:24px;}
.side-nav input[type="checkbox"] {margin-right:5px; position:relative; top:2px; }
#colourTypeList li {float:left; margin-right:5px; margin-bottom:5px;}
#colourTypeList li a {width:25px; height:25px; display:block; background-image:url(../images/templetes/cardColor.png); background-repeat:no-repeat;}
.multi {background-position:0 0;}
.multi:hover {background-position:0 -25px;}
.black {background-position:-25px 0;}
.black:hover {background-position:-25px -25px;}
.white {background-position:-50px 0;}
.white:hover {background-position:-50px -25px;}
.red {background-position:-75px 0;}
.red:hover {background-position:-75px -25px;}
.blue {background-position:-100px 0;}
.blue:hover {background-position:-100px -25px;}
.green {background-position:-125px 0;}
.green:hover {background-position:-125px -25px;}
.grey {background-position:-150px 0;}
.grey:hover {background-position:-150px -25px;}
.yellow {background-position:-175px 0;}
.yellow:hover {background-position:-175px -25px;}
.brown {background-position:-200px 0;}
.brown:hover {background-position:-200px -25px;}
.pink {background-position:-225px 0;}
.pink:hover {background-position:-225px -25px;}
.cream {background-position:-250px 0;}
.cream:hover {background-position:-250px -25px;}
.purple {background-position:-275px 0;}
.purple:hover {background-position:-275px -25px;}

.sideSearch {width:198px; padding:10px; margin: 0 10px 20px;}
.sideSearch input[type=text] {float:left; margin-top:10px; width:133px; padding:0 5px;}
.sideSearch a {margin:10px 0 0 10px; position:absolute;}

.contentLeft {float:left; width:240px;}
.contentRight {width:720px; float:right; margin:0 0 20px;}
.col-3 {width:220px; display:inline-block; float:left; margin:0 10px 20px;}
.col-3 .pack {min-height:267px; position:relative;}
.col-3 .pack img {position:absolute;top:0;}
.col-3 h2 {background:#f5f5f5; background:rgba(245,245,245,0.93); min-width:200px; padding:11px 9px; position:absolute;}
.col-3 .pack .fave {position:absolute;bottom:10px;left:10px; background-image:url(../images/templetes/fav_01.png); background-repeat:no-repeat; width:25px; height:25px;}
.col-3 .pack .fave span, .moreDetails .left .fave span {display:none;}

.startMaking {bottom:10px; position:absolute; right:10px; padding:5px 15px;}
.startMaking2 {float:right; position:relative; margin:20px 0 10px; padding:5px 15px;}
.fave-remove {background-image:url(../images/templetes/x_mark.png); width:30px; height:30px; position:absolute; right:-15px; top:-15px;}

.headings {float:left; width:100%; margin-bottom:5px;}
.headings h3.details {float:left;}
.headings h3.otherImg {float:left; margin-left:363px;}


.detailsSide.landscape {min-height:259px; padding:0; width:371px;}
.imageSide.landscape {height:249px; overflow-x:hidden; overflow-y:auto; width:262px; padding:10px 10px 0px 0px;}
.imageSide { background-color:#ebebeb; float:left; white-space:nowrap; overflow:hidden; position:relative;}
.detailsSide {background-color:#ebebeb; float:left; margin-right:18px;}
.detailsSide.landscape img {padding:10px;}
.detailsSide, .imageSide {position:relative;}
.imageSide.landscape ul li {float:left;  height:73px; width:121px; margin-left:10px; margin-bottom:10px;}
.moreDetails {float:left; margin:20px 0 10px; width:100px;}
ul .left .fave {background-image:url(../images/templetes/fav_01.png); background-repeat:no-repeat; width:25px; height:25px; position:absolute;}
ul .left {float:left;}
ul .right {float:right; padding-top:2px;}
ul .right a {padding-left:10px; border-left:1px solid #ddd; display:block;}
/*------------ footer ------------*/
#footer { border-top:8px solid #ebebeb;}
.brand-box {border-bottom:2px #dddddd dotted; margin-bottom:20px; width:960px;}
.brand-box img {float:right; margin-top:-32px;}
.brand-box span {font-size:12px;}
.col-1 {width:300px;}
.col-2 {width:160px;}
.col-4 {width:700px; margin:0 10px 20px;}
.col-4>div {padding:16px 18px;}
.col-1 , .col-2 {float:left;}
.brand-box li {margin:20px 0 0; padding-left:19px;}
.brand-box ul {height:150px;}
.brand-box .first {}
.brand-box .border {border-right:1px #dddddd solid;}
.brand-box .last {}
#footer dl dd {margin:6px 0;}
#companyInfo { width:960px; text-align: center; margin:30px 0;}
/*------------ select ------------*/
#block_bg { width:100%; height:100%; background:#333; position:fixed; left:0px; top:0px; display:none; z-index:9999; }
.overlay_box { background-color:#fff; width:620px; height:308px; padding:18px; float:left; position:fixed; z-index:10000; display:none; border:2px dashed #999; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; behavior:url(PIE.php);}
.overlay_box a:hover { text-decoration:none;}
.overlay_box a,.overlay_box a:link,.overlay_box a:active,.overlay_box a:visited { color:#000000 !important; }
.selectContainer {height:120px; border:2px solid #ddd; margin-bottom:20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; behavior:url(PIE.php);}
.selectContainer:hover {border:2px solid #0080cc; cursor:pointer;}
.selectContainer:hover .next {border-left:2px solid #0080cc; cursor:pointer;}
.selectContent {height:80px; padding:18px; margin-bottom:20px;}
.selectContent h2 {border:0px; padding-bottom:5px; font-weight:bold;}
.mainContainer {padding-top:15px;}
.next {float:right; width:62px; height:120px; border-left:2px solid #dddddd; background-color:#f6f6f6;}
.next img {padding:34px 19px 0px;}
.iconContainer {float:right; width:78px; height:120px; margin-right:30px;}
.iconContainer img {padding-top:9px;}
#close_block { position:absolute; right:-12px; top:-12px; cursor:pointer; }

/*------------ 智邦送名片 ------------*/
.color_1 { color:#bd0d21;}
.color_2 { color:#F00;}
.free-card .banner { margin-top:5px;}
.introduction { font-size:13px; width:800px; margin:0 auto 20px;}
.introduction p { margin-bottom:1.8em; margin-top:1.8em;}
.option-title-2 { font-size:15px; color:#fff; background-color:#0080CC; padding:5px 0; width:140px; display:block; text-align:center;}
.act-content {border: 1px solid #999; border-collapse: collapse;  }
.act-content th,.act-content td {border: 1px solid #999; padding:5px;}
.act-content th { background-color:#ccc; color:#333;}
.info-box {  border:1px dashed #999;}
.info-box-left { float:left; margin-right:50px; background-color:#66CCFF; color:#fff; font-size:80px; line-height:187px; padding:0 30px; font-family:Arial, Helvetica, sans-serif; }
.info-box-right { padding:20px; font-size:16px; color:#000; line-height:1.5; }
.info-box-right li { margin-bottom:5px; list-style-position: outside; list-style-type: circle;}
.mode { margin-left:18px;}
.mode li { list-style:decimal outside; margin-bottom:1.8em;}
.print-step { width:726px; margin:0 auto;}
.print-box {width:190px; height:130px; border: 1px solid #999;background-color: #4ab3c2;color: #fff;}
.print-step li { float:left; margin:0 25px;}
.step-title { display:block; text-align:center; background-color: #4a8dc2; color: #fff; font-size: 15px; line-height:50px; font-weight: bold;}
.step-content { padding:10px; display:block;}
.top-text { font-size:15px; letter-spacing:1px;}
.line { border-top:1px solid #ccc; margin:50px 0;}

.form-box { width:600px; padding:20px 100px; margin:0 auto; border:1px solid #ddd;}
.form-title { font-size:20px; color:#000; display:block; line-height:32px; margin-bottom:10px;}
/*ul*/.card-option-list { border-top:1px dashed #ddd; margin-top:20px; padding-top:10px;}
.option-title { color:#333; display:block; margin-bottom:5px; font-weight:bold;}
.submit-box { margin:20px 0; padding-top:10px; border-top:1px solid #ddd;}
.card-style-list { margin-top:20px;}
.card-style-list li { float:left; margin:0 30px 20px 0; text-align:center; line-height:30px;}
.card-style-list li img { display:block;}
.card-style-list li img:hover { filter:alpha(opacity=70);opacity:0.7;}

/*------------ clearfix ------------*/
.clearfix:before,
.clearfix:after {
      display:table;
      line-height:0;
      content:"";
}
.clearfix:after {
      clear:both;
}
.clearfix {
      *zoom: 1;
}