@charset "utf-8";

body { margin:0; padding:0; font-family: Arial,"微軟正黑體"; font-size: 13px; background-image: url(../images/bg.jpg) ;background-repeat :no-repeat top center;background-attachment : fixed;background-position :top center;}
a { text-decoration:none;}
img { border:0; vertical-align:middle;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}/* End hide from IE-mac */ 
.warpper { width:1000px; margin:0 auto;}


/** 選單 **/
.menu { width:1000px; margin:  0 auto;  }
.menu>ul {margin:0; padding:0; height:51px; list-style:none; border-right:5px #f2c450 solid;}
.menu>ul>li { display:block; border-left:5px #f2c450 solid; position:relative; float:left; line-height:51px; font-size:12px; text-align:center;}
.menu>ul>li  a {}
.menu>ul>li  a:hover { color: #F30;}

.menu a.menu001{ display:block; background:url(../images/menu.png) 0 0 no-repeat; width:243px;height:51px;}
.menu a.menu001:hover{display:block; background:url(../images/menu.png) 0 -51px no-repeat;width:243px;height:51px;}
.menu a.menu002{ display:block; background:url(../images/menu.png) -243px 0 no-repeat; width:244px;height:51px;}
.menu a.menu002:hover{display:block; background:url(../images/menu.png) -243px -51px no-repeat;width:244px;height:51px;}
.menu a.menu003{ display:block; background:url(../images/menu.png) -487px 0 no-repeat; width:243px;height:51px;}
.menu a.menu003:hover{display:block; background:url(../images/menu.png) -487px -51px no-repeat;width:243px;height:51px;}
.menu a.menu004{ display:block; background:url(../images/menu.png) -730px 0  no-repeat; width:244px;height:51px;}
.menu a.menu004:hover{display:block; background:url(../images/menu.png) -730px -51px no-repeat;width:244px;height:51px;}
	


/** 頭部 **/
.header { width:1000px; margin:0 auto;height:220px; position:relative; }
.logo {text-align:center; margin:25px 0 0 0; }

.top-tool {position:absolute;top:-13px; right:-10px; text-align:right; background:url(../images/icon_bg.png) bottom no-repeat; width:174px; height:68px;}
.top-tool ul{ list-style:none; margin:0; padding:0 12px; }
.top-tool ul li{ float:left;text-align:center; width:37.4px;}


/** main **/
.main { width:1000px; margin:30px auto 60px auto; min-height:300px; padding:12px 0; background:#00331a;-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px; border:10px #f2c450 solid;}
.col-01 { float:left; width:239px; border-right:1px #CCC solid; padding-right:10px; margin-right:10px;}
.col-02 { float:left; width:740px; }
.col-03 { width:980px; margin:0 10px; background:url(../images/contect_bg.png) bottom right no-repeat; min-height:400px;}

.page-main {}
h3.page-title { line-height:46px; font-size:24px; color:#d8fc80; border-bottom:3px #d8fc80 double; margin: 10px 5px 10px 5px; padding:0; text-align:center;}
.content { font-size:15px; font-family:微軟正黑體; line-height:1.6em; color:#f7eacf; margin:0 10px; clear:both; }
.content h2{ font-size:18px; font-family:微軟正黑體; line-height:1.5em; color:#ffb700; border-left:4px #ffb700 solid; padding:2px 0 2px 15px; margin:20px 0 10px 0; }
.content ul { list-style:none; margin:0; padding:0;}
.content ul li{ background:#004222; float:left; width:22.9%; padding:5px; margin:5px 0.5%; border-bottom:1px #14673e solid; text-align:center;}
.content02 { font-size:15px; font-family:微軟正黑體; line-height:1.5em; color:#f7eacf; margin:0 10px;}

.content02 h2{ font-size:18px; font-family:微軟正黑體; line-height:1.5em; color:#ffb700; border-left:4px #ffb700 solid; padding:2px 0 2px 15px; }
.content02 ul{ list-style: square;}
.content02 ul li{}
.content03 { font-size:15px; font-family:微軟正黑體; line-height:1.5em; color:#f7eacf; padding:0 0 0 20px; }

.btn-bottom { text-align:center; padding: 10px 0; margin-top:20px; }
input.input-btn01 { background: #608c76; line-height:25px; width:100px; color:#fff; font-family:微軟正黑體; font-size:13px; border:0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin: 0 3px; cursor: pointer; }
input.input-btn02 { background: #365b48; line-height:25px; width:100px; color:#fff;font-family:微軟正黑體; font-size:13px; border:0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;margin: 0 3px; cursor: pointer; }

.remark{ font:13px/22px "微軟正黑體"; color:#F00;}



/** 訂製你的專屬帽 **/
.step{ font:15px/24px "微軟正黑體";height:50px;}
.step ul{ display:block; list-style:none; margin:0; padding:0;}
.step ul li{  display:block; float: left; margin:10px 1.8px;}

.step ul li .step_h {background: #ffb76b; /* Old browsers */

/* IE9 SVG, needs conditional override of 'filter' to 'none' */

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYjc2YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQxJSIgc3RvcC1jb2xvcj0iI2ZmYTczZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYyJSIgc3RvcC1jb2xvcj0iI2ZmN2MwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjdmMDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 41%, #ff7c00 62%, #ff7f04 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(41%,#ffa73d), color-stop(62%,#ff7c00), color-stop(100%,#ff7f04)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #ffb76b 0%,#ffa73d 41%,#ff7c00 62%,#ff7f04 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #ffb76b 0%,#ffa73d 41%,#ff7c00 62%,#ff7f04 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, #ffb76b 0%,#ffa73d 41%,#ff7c00 62%,#ff7f04 100%); /* IE10+ */

background: linear-gradient(to bottom, #ffb76b 0%,#ffa73d 41%,#ff7c00 62%,#ff7f04 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); /* IE6-8 */padding:5px 4.8px;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; color:#fff;}
.step ul li .step_h02{ background:#ffaf55;padding:5px 4.8px;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; color:#d46700;}


.custom {font-size:15px; font-family:微軟正黑體; line-height:1.5em; color:#9a7018;width:978px; margin:20px auto; background:#ffffff; min-height:300px;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow:1px 1px 5px 2px #9fbaad inset; padding:15px 0; text-align:center;}
.cm{ position:absolute; bottom:10px; right:10px; color:#9a7018;}


.bg {background:#ffffff; min-height:300px;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow:1px 1px 5px 2px #315443 inset; padding:15px 0;}

/** 訂製你的專屬帽step001 **/
.hat-style{}
.hat-style ul{ list-style:none; padding:0; margin: 0;}
.hat-style ul li{ text-align:center; float:left; margin:3px;}
.hat-style ul li h2{font-family:微軟正黑體; line-height:1.5em; color:#f7eacf; font-size:15px; margin:5px 0 ; padding:0;}
.hat-style ul li img{ width:220px; height:220px; border:3px #afd4c1 double; padding:5px; background:#ffffff;}
.hat-style ul li img:hover{ border:3px #F00 solid;}


.custom .pro-data{ width:200px; margin:20px 0 0 120px; float:left; text-align:left;}
.custom .pro-data .drapery-01{ width:150px; height:350px; no-repeat; margin:15px 0;}
.custom .pro-data .drapery-02{ width:150px; height:350px; no-repeat; margin:15px 0;}
.custom .pro-data .drapery-03{ width:150px; height:350px; no-repeat; margin:15px 0;}
.custom .pro-style{ width:545px; float:left;}



/**** 訂製你的專屬帽step002 ****/
.hat-style02{font-family:微軟正黑體; line-height:1.5em; color:#f7eacf; font-size:15px;}
.hat-style02 ul{ list-style:none; margin:0; padding:0;}
.hat-style02 ul li{ float:left; display:block; width:420px; margin:5px 30px 5px 5px; text-align:right;}

.custom .color{ float:left; width:190px; padding:0 0 0 10px;}
.custom .color .color-choose{ width:170px; padding:10px; margin:0;}
.custom .color .color-choose ul{ margin:0; padding:10px 0 0 10px; list-style:none; background:#dddcdc;}
.custom .color .color-choose ul li{ margin:0; padding:0; width:30px; height:30px; margin:0 10px 10px 0; float:left; cursor: pointer;}


.cap-pieces{ float:right; width:670px; border-left:1px #739a87 solid; padding:25px 45px; text-align:left;}


/** 俯視圖 **/
.cap-pieces .look-view{ width:330px; height:316px; float:left; position:relative; }
.cap-pieces .look-view img,.cap-pieces .look-view canvas{ width:100%; height:auto; position:absolute; top:0; left:0;}




/** 訂製你的專屬帽step003 **/
.hat-style03{ float:left; width:170px; margin:-10px 0 0 0 ;}
.hat-style03 ul{ list-style:none; padding:0; margin: 20px 18px;}
.hat-style03 ul li{ text-align:center; margin:8px 0; border:1px #afd4c1 solid; position:relative; width:140px; height:140px;}
.hat-style03 ul li h2{font-family:微軟正黑體; line-height:1.5em; color:#f7eacf; font-size:15px; margin:5px 0 ; padding:0;}

.hat-style03 ul li .editor{ position:absolute; left:0; top:0;}

.logo-project{ float:left; width:240px; margin:0 10px 0 0 ;}
.logo-project h2{font-family:微軟正黑體; line-height:1.5em; color:#9a7018; font-size:17px; margin:5px 5px 10px 5px ; padding:5px; border-bottom:1px #b57e0b solid;}
.logo-project a.btn{ display:block; background:#396; color:#FFF; width:200px; margin:5px auto; padding:3px 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} 

.logo-project h3{font-family:微軟正黑體; line-height:1.5em; color:#9a7018; font-size:15px; margin:5px 0 ; padding:5px;}
.logo-project h4{font-family:微軟正黑體; line-height:1.5em; color:#9a7018; font-size:15px; margin:0; padding:0; font-weight:normal;}
.logo-project h4 a{color:#9a7018; font-weight:normal;}
.logo-project h4 a:hover{color:#b97d00; font-weight:normal;}
.logo-project .input-style01{ width:200px;}
.logo-project .input-style02{ width:190px;}

.logo-project>ul{ list-style: square; display:block; margin:0 ; padding:0 0 0 35px; color:#9a7018;}
.logo-project>ul>li{text-align: left; margin:0; padding:5px 0; border-bottom:1px #b2811c dotted;}
.logo-project2 {font-family:微軟正黑體; line-height:1.5em; color:#2e7352; font-size:15px; margin:0 ; padding:0; font-weight:normal;}

.logo-project .color{ float:left; width:190px; padding:0 0 0 10px;}
.logo-project .color-choose{ width:180px; padding:10px; margin:0 0 0 15px;}
.logo-project .color-choose ul{ margin:0 0 0 10px; padding:10px 0 0 10px; list-style:none; background:#dddcdc;}
.logo-project .color-choose ul li{ margin:0; padding:0; width:30px; height:30px; margin:0 10px 10px 0; float:left; cursor: pointer;}

.logo-project .picture{width:190px; padding:10px 5px; margin:0 0 0 20px; border:1px solid #EEE;}
.logo-project .picture ul{ margin:0; padding:0; list-style-type:none; height:450px; overflow:auto; }
.logo-project .picture li{ width:170px; margin:0 0 10px 0;}
.logo-project .picture li img{ width:90%; height:auto;}

.logo-project .input-btn01{ display:block; margin:5px auto; width:170px;}


.display { float:left; width:540px; margin-right:15px; position:relative; }
.display .scope{ margin-top:30px; position:relative;}

.display .scope .look-view{ width:540px; min-height:540px; float:left; position:relative; }
.display .scope .look-view img,.cap-pieces .look-view canvas{ width:100%; height:auto; position:absolute; top:0; left:0;}


.display .scope .look-view .front-image{ width:66.5%; height:33.5%; /*border:2px solid #ed010c;*/ position:absolute; top:23%; left:16.5%;}
.display .scope .look-view .right-image{ width:23%; height:23%; /*border:2px solid #ed010c;*/ position:absolute; top:40%; left:47%;}
.display .scope .look-view .left-image{ width:23%; height:23%; /*border:2px solid #ed010c;*/ position:absolute; top:40%; left:31%;}
.display .scope .look-view .rear-image{ width:22%; height:22%; /*border:2px solid #ed010c;*/ position:absolute; top:25%; left:38.5%;}
.display .scope .look-view .rear-image-b{ width:22%; height:22%; /*border:2px solid #ed010c;*/ position:absolute; top:47%; left:38.5%;}




/** 訂製你的專屬帽step004 **/
.hat-style04{font-family:微軟正黑體; line-height:1.5em; color:#f7eacf; font-size:15px; margin:15px 0 0 0; padding:0 0 20px 0; border-bottom:1px #8eac9d solid;}
.hat-style04 ul{ list-style:none; margin:0; padding:0;}
.hat-style04 ul li{display:block; margin:0 0 10px 0 ; padding:5px 0; border-bottom: 1px dashed #14673e; }
.hat-style04-td{ float:left; width:150px; text-align:left; padding:0 10px; line-height:35px;}
.hat-style04-th{ float:left; width:800px;}

.money{font-family:微軟正黑體; line-height:1.5em; color:#f7bcbc; font-size:17px; font-weight:bold; text-align:right; padding:10px 0 0 0;}

/**** 訂製你的專屬帽step005 ****/
.hat-style05{font-family:微軟正黑體; line-height:1.5em; color:#9a7018; font-size:15px;}
.hat-style05 h2{font-family:微軟正黑體; line-height:1.5em; color:#9a7018; font-size:18px; border-bottom:1px #9a7018 solid; padding: 0 0 10px 5px; margin:10px;}
.hat-style05 ul{ list-style:none; padding:0; margin: 0;}
.hat-style05 ul li{ text-align:center; float:left; margin:3px; position:relative;}
.hat-style05 ul li h3 img{font-family:微軟正黑體; line-height:1.5em; color:#9a7018; font-size:15px; margin: 0 ; padding:0; border:none; width:20px; height:20px;}
.hat-style05 ul li img{ width:220px; height:220px; border:3px #9a7018 double; padding:5px;}

.cm002{ position:absolute; bottom:65px; right:8px;}

/** 訂單資料 **/
.orders{ margin:0 5px 20px 0; }
.orders h2{ padding:0 0 10px 5px; font-size:18px;}

.orders .order-cap-image{ width:43%; min-height:410px; float:left; border-right:1px dashed #CCC; padding:0 10px 20px 10px; margin-right:15px;}
.orders .order-cap-image h3{ margin:0; padding:5px 15px; font-size:16px; color:#16690d;}
.orders .order-cap-image .numbering{ display:block; font-size:15px; padding:0 0 10px 15px;}
.orders .order-cap-image .order-pro-photo{ text-align:center; position:relative;}

.orders .order-cap-image .order-pro-photo .stereoscopic{ width:315px; height:315px; position:absolute; top:-30px; right:-5px;}
.orders .order-cap-image .order-pro-photo .rear{ width:120px; height:120px; position:absolute; top:235px; left:10px;}
.orders .order-cap-image .order-pro-photo .top{ width:150px; height:150px; position:absolute; top:100px; left:-10px;}
.orders .order-cap-image .order-pro-photo .right{ width:150px; height:150px; position:absolute; top:222px;  left:275px;}
.orders .order-cap-image .order-pro-photo .left{ width:150px; height:150px; position:absolute; top:222px;  left:125px;}
.orders .order-cap-image .order-pro-photo .bottom{ width:140px; height:140px; position:absolute; top:-20px;  left:10px;/* -moz-transform:rotate(-90deg); -webkit-transform:rotate(-90deg); -o-transform:rotate(-90deg);
-ms-transform:rotate(-90deg); transform:rotate(-90deg);*/}

.orders .front-logo{ width:52%; float:left; min-height:410px;}
.orders .front-logo h3{margin:0; padding:5px 0 5px 5px; font-size:16px; color:#16690d;}
.orders .front-logo .size{display:block; font-size:15px; padding:0 0 10px 5px;}
.orders .front-logo .embroidery{ margin:5px 5px 10px 5px; min-height:270px; position:relative;}
.orders .front-logo .embroidery .mark{ position:absolute; top:-21px; left:26px;}
.orders .front-logo .embroidery .result{ width:405px; height:207px; position:absolute; top:33px; left:46px;}
.orders .front-logo .embroidery img.auto-fix { max-width: 100%; max-height: 100%; height: auto;  width: auto;}
.orders .front-logo .color-box{ padding-left:5px; width:510px;}
.orders .front-logo .color-box input.color{ width:20px; float:right;}
 .color-box ul{ margin:5px 0;}
 .color-box ul li{ width:40px; margin-right:13px; text-align:left;}
 .color-box ul li span{ display:block; width:23px; height:18px; border:1px solid #CCC; float:right;}
 
 
.orders .embroidery-box{ clear:both; border-top:1px dashed #CCC; margin:10px; }
.orders .embroidery-box .embroidery-logo{ width:33.2%; border-right:1px dashed #CCC; float:left; padding:10px 0;}
.orders .embroidery-box .embroidery-logo h3{margin:0; padding:5px 0 5px 10px; font-size:16px; color:#16690d;}
.orders .embroidery-box .embroidery-logo .size{display:block; font-size:15px; padding:0 0 5px 10px;}
.orders .embroidery-box .embroidery-logo .embroidery{ margin:5px 10px 10px 10px; min-height:200px; position:relative;}
.orders .embroidery-box .embroidery-logo .embroidery .mark02{ position:absolute; top:-21px; left:25px;}
.orders .embroidery-box .embroidery-logo .embroidery .result02{ position:absolute; width:200px; height:200px; top:0; left:46px;}
.orders .embroidery-box .embroidery-logo .embroidery img.auto-fix { max-width: 100%; max-height: 100%; height: auto;  width: auto;}

.embroidery-logo .color-box{ padding-left:10px;}
 .color-box ul{ margin:5px 0;}
 .color-box ul li{ width:38px; margin-right:13px; text-align:left;}

/**訂單下方-款式一**/
.orders-box01{ clear:both; border-top:1px dashed #CCC; margin:10px;}
.orders-box01 .labels{ width:31.2%; float:left; padding:10px 10px 20px 10px; margin-right:15px;}
.orders-box01 .labels h3{margin:0; padding:5px 0 15px 5px; font-size:16px; color:#16690d;}

.orders-box01 .order-info{ float:left; width:65%; padding:25px 0;}
.orders-box01 .order-info table{ background:#33610a; }
.orders-box01 .order-info .item{ background:#428b2e; padding:10px 0; color:#FFF; font-size:16px; line-height:1.6; font-weight:bold;}
.orders-box01 .order-info .content{ display:block; color:#226a0f; font-size:16px; line-height:1.8; margin:0 20px; font-weight:bold;}
.orders-box01 .order-info .content .input-quantity{ width:80px; margin:0 20px 0 5px; padding:3px; border:0; border-bottom:1px solid #999;} 
.orders-box01 .order-info ul.quantity{ margin:0 5px 5px 0; padding:3px; border:0; } 
.orders-box01 .order-info ul.quantity li{ display:block; width:290px; text-align:left; color: #226a0f; font-weight:bold;} 
.orders-box01 .order-info ul.quantity li .size{ display:block; width:70px; float:left; text-align:center;}
.orders-box01 .order-info ul.quantity li .order-quantity{ float:left;}
.orders-box01 .order-info ul.quantity li .order-quantity .input-quantity{padding:3px; border:0; border-bottom:1px solid #999; width:190px;}


/**訂單下方-款式二**/
.orders-box02{ clear:both; border-top:1px dashed #CCC; margin:10px;}
.orders-box02 .labels{ width:31.2%; float:left; padding:10px 10px 20px 10px; margin-right:15px;}
.orders-box02 .labels h3{margin:0; padding:5px 0 15px 5px; font-size:16px; color:#16690d;}

.orders-box02 .order-info{ float:left; width:65%; padding:25px 0;}
.orders-box02 .order-info table{ background:#33610a; }
.orders-box02 .order-info .item{ background:#428b2e; padding:10px 0; color:#FFF; font-size:16px; line-height:1.6; font-weight:bold;}
.orders-box02 .order-info .content{ display:block; color:#226a0f; font-size:16px; line-height:1.8; margin:0 8px 0 12px; font-weight:bold;}
.orders-box02 .order-info ul.quantity{ margin:0 5px 5px 0; padding:3px; border:0; } 
.orders-box02 .order-info ul.quantity li{ display:block; width:290px; text-align:left; color: #226a0f; font-weight:bold;} 
.orders-box02 .order-info ul.quantity li .size{ display:block; width:115px; float:left; text-align:center;}
.orders-box02 .order-info ul.quantity li .order-quantity{ float:left;}
.orders-box02 .order-info ul.quantity li .order-quantity .input-quantity{padding:3px; border:0; border-bottom:1px solid #999;}

/**訂單下方-款式三**/
.orders-box03{ clear:both; border-top:1px dashed #CCC; margin:10px;}
.orders-box03 .labels{ width:31.2%; float:left; padding:10px 10px 20px 10px; margin-right:15px;}
.orders-box03 .labels h3{margin:0; padding:5px 0 15px 5px; font-size:16px; color:#16690d;}

.orders-box03 .order-info{ float:left; width:65%; padding:25px 0;}
.orders-box03 .order-info table{ background:#33610a; }
.orders-box03 .order-info .item{ background:#428b2e; padding:26px 0; color:#FFF; font-size:16px; line-height:1.6; font-weight:bold;}
.orders-box03 .order-info .content{ display:block; color:#226a0f; font-size:16px; line-height:1.8; margin:0 5px 0 10px; font-weight:bold;}
.orders-box03 .order-info .content .input-quantity{ width:55px; margin:0 20px 0 5px; padding:3px; border:0; border-bottom:1px solid #999;} 

 
.orders .copyright{ clear:both; text-align:center; color:#C00; font-size:15px; font-family:"微軟正黑體";  border-top:1px dashed #CCC;  border-bottom:1px dashed #CCC; margin:10px; padding:10px;}




/** 送貨資料 **/
.delivery-info{ clear:both;}



/** 首頁產品 **/
.i-pro{ width:978px; margin:30px auto 0 auto; background:#4d715f; min-height:300px;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow:1px 1px 5px 2px #315443 inset; padding:15px 0 0 0;}
.i-pro ul{ list-style:none; margin:0; padding:0;}
.i-pro ul li{ display:block; float:left; width:244px; text-align:center;}
.i-pro ul li h2{ display:block; font:12px/22px "微軟正黑體"; color:#f2c450; margin:0; padding:25px 0 0 0 ;}
.i-pro ul li h2 a{color:#f2c450;}
.i-pro ul li h2 a:hover{ color:#f7e1a9; }
.i-pro ul li h3{ display:block; font:12px/22px "微軟正黑體"; color:#ffffff; margin:0; padding:0 0 32px 0;height:25px; }
.i-pro ul li h3 a{color:#ffffff;}
.i-pro ul li h3 a:hover{ color:#dddddd; }

/** 訊息視窗 **/
.announcement { width:100%; margin:20px auto;}
.announcement h3 { text-align:center; font-size:16px; border-bottom:1px #CCC dotted; margin-bottom:10px; line-height:30px;}
.announcement .content { width:400px; margin:65px auto; padding:50px 10px; font-size:15px; color:#fff; line-height:1.5em; text-align:center; font-size:20px;}

/** 會員專區 **/
.login {float:left; width:470px; position:relative; padding:20px 10px; margin:20px 0; border-right:1px dashed #14673e;}
.login h4{font:20px/40px "微軟正黑體"; font-weight:bold; color:#f2c450; margin:10px 0 30px 0; padding:0;  text-align:center;}

.login ul { list-style:none; margin:20px 0 0 0; padding:20px 0;}
.login ul li { padding:3px 0; height:25px}
.login ul li img { vertical-align:middle;}
.login .options-th { float:left; width:115px; font-size:15px; font-family:微軟正黑體; color: #f7eacf; line-height:25px; text-align:right; padding-right:10px;}
.login .options-td { float:left; width:200px; font-size:15px;font-family:微軟正黑體;  color:#efd398; line-height:25px;}
input.login-input-style01 { background: #ddebe4;  font-size:15px;font-family:微軟正黑體;  color:#00331a; padding:3px 5px; line-height:15px; border:0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; width: 180px;}

input.login-btn-style01 { background: #f2c450;  font-size:15px;font-family:微軟正黑體;  color:#00331a; padding:5px; line-height:42px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; width: 90px; position:absolute; top:122px; right:50px; border:3px #00331a double; cursor: pointer; }

/** 社群登入 **/
.community{ float:right; width:455px; padding:20px 10px; margin:20px 0;}
.community h4{font:20px/40px "微軟正黑體"; font-weight:bold; color:#f2c450; margin:10px 0 30px 0; padding:0; text-align:center;}
.community ul{ list-style:none; margin:15px 0 0 0; padding:0;}
.community ul li{ display:block; padding:7px 0; text-align:center; }
.community ul li img{-webkit-border-top-left-radius: 30px;
-webkit-border-bottom-right-radius: 30px;
-moz-border-radius-topleft: 30px;
-moz-border-radius-bottomright: 30px;
border-top-left-radius: 30px;
border-bottom-right-radius: 30px;}

.member-post { border:1px #CCC solid; margin:10px 0; padding:20px; text-align:center; font-size:15px; color:#666; line-height:1.5em; } 


/** 會員註冊 **/
.new-regist { width:100%;font-size:16px; font-family:微軟正黑體; line-height:1.5em; color:#f7eacf; text-align:center; margin:50px 0; }
.login-tool { text-align:center; padding-top:10px;}
.forget { font-size:12px; color:#333;}
a.forget  { color:#333; text-decoration:none; padding:5px;} a.forget:link  { color: #900;}
.regist { font-size:12px; color:#333;}
a.regist { color:#333; text-decoration:none; padding:5px;} a.regist { color: #09C;}



/** 會員註冊 - 表單 **/
.new-regist .forms-style01 { float:none; background: rgba(0%,0%,0%,0.2); width:950px ; margin:50px auto 20px auto;padding:5px 0 20px 0;}
.new-regist .forms-style01 h3{font:20px/40px "arial"; color:#efd398; margin:10px 0 0 0; padding:0;border-bottom:1px #efd398 solid; text-align:center;}
.new-regist .forms-style01 ul { list-style:none; margin:20px 0 0 0; padding:10px 0;}
.new-regist .forms-style01 ul li { padding:5px 0; border-bottom:1px dashed #14673e; margin:0 15px;}
.new-regist .forms-style01 ul li img { vertical-align:middle;}
.new-regist .forms-style01 .options-th { float:left; width:100px; font:15px/35px "微軟正黑體"; color: #f7eacf;  text-align:left; padding-right:10px; margin-left:220px;}
.new-regist .forms-style01 .options-td { float:left; width:400px; font:15px/35px "微軟正黑體"; color: #f7eacf; text-align:left; }
.new-regist input.input-style01 { background: #ddebe4; width: 90%; font:13px/15px "微軟正黑體",arial; color: #00331a; padding:5px 5px; margin:4px 0; border:0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
.new-regist input.input-style02 { background: #ddebe4; font:13px/15px "微軟正黑體",arial; padding:5px; border:0; margin:5px 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; width: 100px;}
.new-regist input.input-style04 { background: #ddebe4 ; font:13px/15px "微軟正黑體",arial; color: #00331a; padding:3px 5px; border:0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 190px; margin:2px 0;}

.new-regist textarea.textarea-style01 { background: #ddebe4 ; width:100%; font:13px/15px "微軟正黑體",arial;padding:3px 5px;border:0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
.new-regist select.input-style01 { background: #ddebe4; font:13px/15px "微軟正黑體",arial; color: #00331a; padding:3px 5px; border:0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 200px;}


/** 歷史訂單列表 **/
.cart {width:900px; margin: 0 auto; }
.order-history-list { margin:-15px 0 20px 0; } 
h3.order-number { color:#960; }
th.order-history-list-th { background: #eea810; font-size:15px; color:#FFF; text-align:center; line-height:25px; } 
.order-history-list td { text-align:center; font-size:12px; line-height:1.5em; padding:5px 10px; }
.order-history-list img.pro-photo { width:90px; height:90px; padding:10px; border:1px #CCC solid;}
.order-history-list .pro-name { font-size:15px; color: #333; text-align: right;}
.order-history-list .pro-name02 { font-size:15px; color: #333; text-align:left;}

.order-history-list .price { font-size:15px; color:#900;}
.order-history-list .numb { font-size:15px; color: #66F;}
.order-history-list .count { font-size:15px; color: #333;}
.order-history-list .count a{ color: #333; text-decoration:underline;}
.order-history-list .count a:hover{ color: #e69d00;}

.order-history-list .count-portal { height:20px; padding:10px 0; border-bottom:1px #CCC dotted;}
                     .count-price { font-size:15px; color: #900; font-weight:bold;}
.order-history-list .portal { display:block; width:200px; font-size:15px; color:#900; float:right; text-align:right;}
.order-history-list .freight { display:block; width:150px; font-size:15px; color:#900; float:right; text-align:right;}


/** 歷史訂單明細 **/
.order-history{ margin:-20px 0 20px 0; font-family:微軟正黑體; line-height:1.5em; color:#9a7018; font-size:15px;}
.order-history h2{font-family:微軟正黑體; line-height:1.5em; color:#9a7018; font-size:18px; border-bottom:1px #9a7018 solid; padding: 0 0 10px 5px; margin:10px;}

.order-history .order-cap-image{ width:43%; min-height:410px; float:left; border-right:1px dashed #CCC; padding:0 10px 20px 10px; margin-right:15px;}
.order-history .order-cap-image h3{ margin:0; padding:5px 15px; font-size:16px; color:#16690d;}
.order-history .order-cap-image .numbering{ display:block; font-size:15px; padding:0 0 10px 15px;}
.order-history .order-cap-image .order-pro-photo{ text-align:center; position:relative;}

.order-history .order-cap-image .order-pro-photo .stereoscopic{ width:290px; height:290px; position:absolute; top:-25px; right:-5px;}
.order-history .order-cap-image .order-pro-photo .rear{ width:170px; height:170px; position:absolute; top:-23px; left:10px;}
.order-history .order-cap-image .order-pro-photo .top{ width:190px; height:190px; position:absolute; top:125px; left:-20px;}
.order-history .order-cap-image .order-pro-photo .right{ width:160px; height:160px; position:absolute; top:212px;  left:100px;}
.order-history .order-cap-image .order-pro-photo .left{ width:160px; height:160px; position:absolute; top:212px;  left:250px;}


.order-history .front-logo{ width:52%; float:left;}
.order-history .front-logo h3{margin:0; padding:5px 0 5px 5px; font-size:16px; color:#16690d;}
.order-history .front-logo .size{display:block; font-size:15px; padding:0 0 10px 5px;}
.order-history .front-logo .embroidery{ margin:5px 5px 10px 5px; border:1px solid #a4c19a; min-height:270px;}
.order-history .front-logo .embroidery img.auto-fix { max-width: 100%; max-height: 100%; height: auto;  width: auto;}
.order-history .front-logo .color-box{ padding-left:5px;}
.order-history .front-logo .color-box input.color{ width:20px; float:right;}
.order-history .front-logo .color-box ul{ margin:5px 0; list-style:none; padding:0; }
.order-history .front-logo .color-box ul li{ width:40px; margin-right:13px; text-align:left; text-align:center; float:left; position:relative;}
.order-history .front-logo .color-box ul li span{ display:block; width:23px; height:18px; border:1px solid #CCC; float:right;}
 
 
.order-history .embroidery-box{ clear:both; border-top:1px dashed #CCC; margin:10px; }
.order-history .embroidery-box .embroidery-logo{ width:33.2%; border-right:1px dashed #CCC; float:left; padding:10px 0;}
.order-history .embroidery-box .embroidery-logo h3{margin:0; padding:5px 0 5px 10px; font-size:16px; color:#16690d;}
.order-history .embroidery-box .embroidery-logo .size{display:block; font-size:15px; padding:0 0 5px 10px;}
.order-history .embroidery-box .embroidery-logo .embroidery{ margin:5px 10px 10px 10px; border:1px solid #a4c19a; min-height:200px;}
.order-history .embroidery-box .embroidery-logo .embroidery img.auto-fix { max-width: 100%; max-height: 100%; height: auto;  width: auto;}

.order-history .embroidery-box .embroidery-logo .color-box{ padding-left:10px;}
.order-history .embroidery-box .embroidery-logo .color-box ul{ margin:5px 0; list-style:none; padding:0;}
.order-history .embroidery-box .embroidery-logo .color-box ul li{ width:38px; margin:0 20px 8px 0; text-align:left; float:left;}

.order-history .copyright{ clear:both; text-align:center; color:#C00; font-size:15px; font-family:"微軟正黑體";  border-top:1px dashed #CCC;  border-bottom:1px dashed #CCC; margin:10px; padding:10px;}

/***********/



/** 切換圖片 **/
.switching{}
.switching ul{ display:block; list-style:none; margin:15px 0 0 0; padding:0;}
.switching ul li{ background:#fff; padding:3px; display:block; float:left; margin:1px; text-align:center;}
#gallery img { }

/** 產品介紹 **/
.pro-detaile { }
h3.pro-detaile-title { border-bottom:1px #dde5d4 dotted; font-size:16px; color: #f2c450; font-family:微軟正黑體;  line-height:30px; margin:10px 5px; padding:5px;}
.pro-detaile .pro-photo {float:left; width:450px; height:332px; margin:10px 20px 10px 10px; padding:0; border:1px #CCC solid; background:#ffffff;}
.pro-detaile .pro-photo .image{ width:450px; padding:10px 0;}
.pro-specification { float:left; width:480px; font-size:15px; line-height:1.5em;font-family:微軟正黑體; color:#f7eacf; position:relative; height:465px; margin-bottom:10px;}
.pro-specification p { margin:}
.pro-content { padding:0px 0; font-size:15px; line-height:1.5em; color:#f7eacf;font-family:微軟正黑體; clear:both;} 
.pro-content p.spec { margin:0; padding:0; font-size:15px; line-height:1.5em; color:#f7eacf;font-family:微軟正黑體;}


/** 首業主廣告 **/
.edm { width:974px; height:455px; margin:0 auto; text-align:center;}

/** 左邊選單 **/
.left-menu { margin-bottom:50px;}
.left-menu ul { display:block; list-style: none; margin:0; padding:0; font:15px/24px "微軟正黑體"; color:#fff; height:34px; }
.left-menu ul li  { display:block; float:left;  margin:2px 5px; background:#68aa49; width:315px; text-align:center;}
.left-menu ul li a {padding:5px ;  color:#fff; display:block;}
.left-menu ul li a:hover {background:#36731a;}




/** 聯絡我們 **/
.contact{font-size:15px; font-family:微軟正黑體; line-height:1.6em; color:#f7eacf; margin:30px 10px;}
.contact .infor{ float:left; width:38%; padding-left:2%;}
.contact .infor a{color:#f7eacf;}
.contact .infor a:hover{color:#88bc45;}
.contact .map{ width:60%; float:left;}

/** 聯絡我們的表單 **/
.contact .forms-style01 { float:none; background: rgba(0%,0%,0%,0.2); width:950px ; margin:50px auto 20px auto;padding:5px 0 20px 0;}
.contact .forms-style01 h3{font:20px/40px "arial"; color:#efd398; margin:10px 0 0 0; padding:0;border-bottom:1px #efd398 solid; text-align:center;}
.contact .forms-style01 ul { list-style:none; margin:20px 0 0 0; padding:10px 0;}
.contact .forms-style01 ul li { padding:5px 0; border-bottom:1px dashed #14673e; margin:0 15px;}
.contact .forms-style01 ul li img { vertical-align:middle;}
.contact .forms-style01 .options-th { float:left; width:120px; font:15px/35px "微軟正黑體"; color: #f7eacf;  text-align:left; padding-right:10px; margin-left:130px;}
.contact .forms-style01 .options-td { float:left; width:500px; font:15px/35px "微軟正黑體"; color: #f7eacf; }
.contact input.input-style01 { background: #ddebe4; width: 100%; font:13px/15px "微軟正黑體",arial; color: #00331a; padding:5px 5px; margin:4px 0; border:0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
.contact input.input-style02 { background: #ddebe4; font:13px/15px "微軟正黑體",arial; padding:5px; border:0; margin:5px 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; width: 100px;}
.contact input.input-style04 { background: #ddebe4 ; font:13px/15px "微軟正黑體",arial; color: #00331a; padding:3px 5px; border:0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 190px; margin:2px 0;}

.contact textarea.textarea-style01 { background: #ddebe4 ; width:100%; font:13px/15px "微軟正黑體",arial;padding:3px 5px;border:0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
.contact select.input-style01 { background: #ddebe4; font:13px/15px "微軟正黑體",arial; color: #00331a; padding:3px 5px; border:0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 200px;}






/** 表單 **/
.forms-style01 h3{font:20px/40px "arial"; color:#efd398; margin:10px 0 0 0; padding:0;border-bottom:1px #efd398 solid; text-align:center;}

.forms-style01 { float:left; width:510px ; margin:0 40px 0 0;}
.forms-style01 ul { list-style:none; margin:20px 0 0 0; padding:10px 0;}
.forms-style01 ul li { padding:3px 0;}
.forms-style01 ul li img { vertical-align:middle;}
.forms-style01 .options-th { float:left; width:70px; font:15px/25px "微軟正黑體"; color: #f7eacf;  text-align:right; padding-right:10px;}
.forms-style01 .options-td { float:left; width:388px; font:15px/20px "微軟正黑體"; color: #f7eacf;}
input.input-style01 { background: #ddebe4; font:13px/15px "微軟正黑體",arial; color: #00331a; padding:3px 5px; border:0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; width: 90%;}
input.input-style02 { background: #ddebe4; font:13px/15px "微軟正黑體",arial; padding:3px 5px; border:0; margin:5px 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; width: 70px;}
input.input-style04 { background: #ddebe4 ; font:13px/15px "微軟正黑體",arial; color: #00331a; padding:3px 5px; border:0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 190px; margin:2px 0;}

textarea.textarea-style01 { background: #ddebe4 ; font:13px/15px "微軟正黑體",arial;padding:3px 5px;border:0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; width:90%;}

textarea.textarea-style03{ background: #ddebe4 ; font:13px/15px "微軟正黑體",arial;padding:3px 5px;border:0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; width:300px;}

select.input-style01 { background: #ddebe4; font:13px/15px "微軟正黑體",arial; color: #00331a; padding:3px 5px; border:0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 200px;}


/** 加入會員 **/
.forms-style02 { margin-bottom:20px;}
.forms-style02 ul { list-style:none; margin:20px 0 0 0; padding:10px　0;}
.forms-style02 ul li { padding:10px 0;}
.forms-style02 ul li img { vertical-align:middle;}
.forms-style02 .options-th { float:left; width:325px; font:15px/26px "微軟正黑體"; color: #f7eacf;  text-align:right; padding-right:10px;}
.forms-style02 .options-td { float:left; width:388px; font:15px/20px "微軟正黑體"; color: #f7eacf; text-align:left;}
input.input-style03 { background: #ddebe4 ; font:13px/15px "微軟正黑體",arial; color: #00331a; padding:3px 5px; border:0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 300px;}
input.input-style02 { background: #ddebe4 ; font:13px/15px "微軟正黑體",arial; padding:3px 5px; border:0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 70px;}

textarea.textarea-style02 { background: #ddebe4 ; font:13px/15px "微軟正黑體",arial;padding:3px 5px;border:0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 400px;}



/** 訂單確認 **/
.forms-style03 {}
.forms-style03 ul { list-style:none; margin:20px 0 0 0; padding:10px　0;}
.forms-style03 ul li { padding:3px 0;}
.forms-style03 ul li img { vertical-align:middle;}
.forms-style03 .options-th { float:left; width:100px; font:16px/25px "微軟正黑體"; color: #226a0f;  text-align:right; padding-right:10px;}
.forms-style03 .options-td { float:left; width:800px; font:16px/20px "微軟正黑體"; color: #226a0f; text-align:left;}
input.input-style03 { background: #ddebe4 ; font:13px/15px "微軟正黑體",arial; color: #00331a; padding:5px; border:0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; width: 300px;}
input.input-style02 { background: #ddebe4; font:13px/15px "微軟正黑體",arial; padding:3px 5px; border:0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; width: 70px;}

textarea.textarea-style02 { background: #ddebe4; font:13px/15px "微軟正黑體",arial;padding:3px 5px;border:0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 400px;}
.forms-style03 ul li img { border:none; width: auto; height:auto;}



/* 頁次 */	
.page{ height:40px; font:13px/40px "微軟正黑體"; color:#fff; text-align: center; clear:both; margin:30px 0 10px 0; border-top:1px #fff dotted;}
  .page a {color:#fff;}
  .page a:hover {color: #f8d9c8;}

/** footer **/
.footer-extend { background:#fec64d;font:13px/42px "微軟正黑體"; color:#000000;}
.footer-extend a{color:#000000;}
.footer-extend a:hover{color:#ffecc3;}
.footer { position:relative; width:1000px; margin:0 auto;}
.footer-wd { position:absolute; top:0; right:0;font:13px/42px "微軟正黑體"; color:#333333;}
.footer-c { font-size:15px; color:#000000;}