@import url("buy-success.css");




.wrap{width:100%;position:relative; line-height:1.6; font-size:1em; }

.unitName{ background:#8ec30f;}
.highlight1{color:#ff6600;}
.highlight2{color:#ff0000;}

/*-------------mainNav單元文字變色---------------*/
.mainNav > ul > li:nth-child(6) > a { color:#00babc; font-weight:bold;}
@media screen and (max-width: 980px) {
	
.mainNav > ul > li:nth-child(6) > a { color:#333; }

}



.wrap .contanier{ width:100%;max-width:802px; margin:0 auto; padding: 0 0px  200px ; }


.wrap .contanier h3{ text-align:left; margin-bottom:.8em; padding-left:.5em; letter-spacing:2px; }



/*---------------------------------- 標題 -----------------------------------*/

.wrap  .contanier header {width:100%;position:relative;margin:1em 0 .8em; border-bottom: 1px solid  #666; }
.wrap  .contanier header h2{ position:relative; float:left; text-align: center; padding-left:.3em; font-size:1.2em; font-weight:bold; color: #80ba41; letter-spacing:.6em; border-bottom: 5px solid   #80ba41; }
.wrap  .contanier header .note{font-size:.9em; color:#F00; display: inline-block; vertical-align: middle; padding-left:10px;}

.wrap  .contanier header p{ font-size:15px; position:absolute; right:0; bottom:5px; letter-spacing:2px;} 


span.warn { font-size:.9em; letter-spacing:.1em; }


/*---------------------------------- step 步驟 -----------------------------------*/

.wrap .step-wrap {width:100%; padding:1.5em 0; background: #EFEFEF; margin: 0; /*border-top:5px solid   #D9D9D9;*/}

.step { width:100%;max-width:800px; margin:0 auto;}
.step li {width:24%;   }


/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ 通用設定 ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/

.wrap .buy {}

.buy .title{ font-size:1.25em; font-weight:bold; color:#ff6600; padding:10px 0 10px 8px; background:#ffe7dd;}
.buy .title2{ font-size:1.25em; font-weight:bold; color:#333; padding:10px 0 10px 8px; background:#ccc;}

.buy .banner{ border:1px solid #dfdfdf;}

.buy .btn{font-weight:bold; padding:10px 0;}

.buy table{ width:100%;  position:relative; }


.buy table th {  padding:5px; text-align:left;   }
.buy table th:nth-child(3){  padding:5px; text-align:right;  }
.buy table th:nth-child(4){  padding:5px; text-align:right;  }
.buy table th:nth-child(5){  padding:5px; text-align:right;  }


.buy table td{ padding:5px ; position:relative;text-align:left; vertical-align:middle;}
.buy table td:nth-last-child(2){ padding-left:1.5em}
.buy table td:last-child{ padding-left:1.5em}
.buy table td:nth-last-child(3){ padding:5px ; position:relative;text-align:right; vertical-align:middle;}
.buy table td:nth-last-child(4){ padding:5px ; position:relative;text-align:right; vertical-align:middle;}
.buy table td:nth-last-child(5){ padding:5px ; position:relative;text-align:right; vertical-align:middle;}
.buy table td:nth-child(3){ padding:5px ; position:relative;text-align:right; vertical-align:middle;}
.buy table td:nth-child(4){ padding:5px ; position:relative;text-align:right; vertical-align:middle;}
.buy table td:nth-child(5){ padding:5px ; position:relative;text-align:right; vertical-align:middle;}


.buy table td label{ position:relative;top:2px; top:-12px\0;}


	




/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ 購買產品table ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/

table.buyProduct { margin-bottom:.6em;}

table.buyProduct th{ background: #8F8F8F; color:#FFF;}
table.buyProduct th:nth-child(1){ padding-left:1em;width: 21%;}
table.buyProduct th:nth-child(2){ width: 2%;}
table.buyProduct th:nth-child(3){ width: 8%;}
table.buyProduct th:nth-child(4){ width: 8%;}
table.buyProduct th:nth-child(5){ width: 8%;} 
table.buyProduct th:nth-child(6){ padding-left:1.5em;width: 14%;}
table.buyProduct th:nth-child(7){ padding-left:1.5em;width: 14%;}
table.buyProduct th:nth-child(8) {width:24%;} 

/* table.buyProduct th:last-child{ padding-left:1.5em;width: 25%;}  */
/* table.buyProduct th:nth-child(1){ padding-left:1em;width: 25%;}
table.buyProduct th:nth-child(5){ width: 9%;}
table.buyProduct th:nth-child(6){ padding-left:1.5em;width: 18%;}
table.buyProduct th:last-child{ padding-left:1.5em;width: 18%;}  */





table.buyProduct tr{ border-bottom:1px solid #EAEAEA;}
table.buyProduct tr.noBorder{ border-bottom:none;}
table.buyProduct tr:last-child{ border-bottom: none;}

table.buyProduct tr:nth-child(2) td{ padding-top:1em; }


table.buyProduct .point { color: #F60; font-size:.9em}

table.buyProduct .program {}

table.buyProduct .month { width:50px; font-family: Helvetica; font-size:.8em; margin-bottom:0; }
	
table.buyProduct label { }

table.buyProduct .text-center{ text-align:center;}


/*--------------- 增加 減少 icon ----------------*/

table.buyProduct tr:hover .plus{display: block;}
table.buyProduct tr:hover .less{display: block;}

	.plus ,.less{ display:block; cursor:pointer; position:absolute;  top:10px;  left:40%; }
	.plus:before,.less:before{font-family: 'FontAwesome'; font-size:1.2em;color: #F491AE; }
	.plus:hover:before,.less:hover:before{color: #EC0F46; }

.plus:before{content:"\f0fe";}
.less:before{content:"\f146";}



/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ 點數設定table ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/

table.count {}

table.count tr:last-child{ border-bottom: none;  }

table.count td:nth-child(1){  width:130px;text-align: right; vertical-align:top; padding-top:13px;}


table.count input{ max-width:360px; }
table.count slect{ max-width:360px;}

table.count .point { color: #F00; letter-spacing:3px; margin:0 .3em;}

.notice{color:#8F8F8F;font-size:.9em;}


/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ 金額結算 ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/

.buy  .account {margin:1em 0;}
.buy  .account div {width:100%;   text-align:center;  letter-spacing:2px;   padding:.5em; background:#EEE; border:1px solid #CDCDCD;box-shadow:0 1px 0 0 rgba(255,255,255,.5) inset; margin:.3em 0;}
.buy  .account ul {width:100%; margin:0 auto  ; text-align:right; white-space:nowrap; }
.buy  .account ul li { display:inline-block;}
.buy  .account ul li:nth-child(1) {text-align:right ; padding-right:.2em; width:80px;}
.buy  .account ul li:nth-child(2) {text-align:right; width:100px;}
.buy  .account ul li span{ color:#F00; font-family:Arial; font-weight:bold;}




/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ 發票 ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/



table.invoice {}

table.invoice td:nth-child(1){  width:130px;text-align: right;  padding-left:1.5em;}
table.invoice td:nth-child(2){ }
table.invoice input{ max-width:360px;}

table.invoice  .kind{ max-width:360px;}








/*------------訂購按鈕---------*/

.buybtn { width:86%; margin:1em auto; max-width:520px; height:60px; line-height:60px; font-weight:bold; font-size:1.2em; letter-spacing:5px;}


/*------手機版--------*/
@media screen and (max-width: 640px) {	


.wrap .contanier{  padding: 0 10px  60px ; }


.buy .select .arr{ right:5px;  }
.buy .select .arr:before{ display:none; }


.wrap  .contanier header p{ display:none;} 




table.buyProduct .program {}
table.buyProduct .month {width:46px; }

table.count tr{ display: block; width:100%;}
table.count td:nth-child(1){ display: block; width:100%; text-align:left;}
table.count td:nth-child(2){display: block; width:100%;}
table.count input{ max-width:100%;}


table.invoice td:nth-child(1){ display:none;}
table.invoice td:nth-child(2){ width:100% ;}
table.invoice input{width:100%; max-width:100%;}





.plus ,.less{ display: block; padding-top:5px }



/*-----改placeholder 字體顏色----*/
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666; }
input:-moz-placeholder, textarea:-moz-placeholder {  color:#666;}
input::-moz-placeholder, textarea::-moz-placeholder { color: #666;}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {  color:#666;}




}
	


@media screen and (max-width: 320px) {	

.buy table{ font-size:80%;}


}