@charset "utf-8";
html { margin:0; padding:0;  height:100%;}
body { margin:0; position:0; font-family:Microsoft JhengHei; height:100%;}

/** 通用設定 **/
*{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 -moz-box-sizing: border-box;    /* Firefox, other Gecko */
 box-sizing: border-box;         /* Opera/IE 8+ */
}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}/* End hide from IE-mac */

/*  漸變效果 */
a {transition: all 0.3s ease 0s; text-decoration:none; }
a:hover {transition: all 0.3s ease 0s; text-decoration:none; opacity:0.8; }

.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}/* End hide from IE-mac */
/*  padding and border no width  */


/** 主樣板設定 **/

.wallpaper { width:1080px; margin:0 auto; min-height:100%; padding-bottom:170px; position:relative;}
.footer { background-color:#eeeeee; padding-top:20px; position: fixed; bottom:0; left:0; width:100%; }
.footer>div { float:left; width:33.33%;}
.footer>div a { display:block; height:80px; text-align:center;}
.footer>div a img { display:inline-block; width:80px; height:80px; margin:0 auto; border-radius: 99em;}
.footer>div p { margin:0; padding:0; text-align:center; color:#444444; font-size:30px; height:70px;
                  display: -webkit-flex;
                  display: flex;
                  -webkit-align-items: center;
                          align-items: center;
                  -webkit-justify-content: center;
                          justify-content: center;
                 }


/** 會員專區 **/
.memb-tool-list h2 { margin:0; padding:0 0 0 40px; color:#444444; line-height:100px; font-size:48px; }
.memb-tool-list h2 .icon { display: block; float:left; margin-left:48px;}
.memb-tool-list ul { margin:0 48px; padding: 40px 0 0 0; list-style:none; display:inline-block;}
.memb-tool-list ul li { float:left; margin-bottom:40px; width:25%; }
.memb-tool-list ul li a { display:block; height:150px; text-align:center;}
.memb-tool-list ul li a img { background:#999999; display:inline-block; width:150px; height:150px; margin:0 auto; border-radius: 99em;}
.memb-tool-list ul li p { margin:0; padding:0; text-align:center; color:#444444; font-size:30px; height:100px;
                      display: -webkit-flex;
                      display: flex;
                      -webkit-align-items: center;
                                align-items: center;
                        -webkit-justify-content: center;
                                justify-content: center;
                     }
.div-line { border-bottom:1px #cccccc solid; }

/** 產品 **/
.pro-header { background:#FF9900; position:relative; height:220px; }
.pro-header h1 { position:absolute; font-size:60px; top:70px; left:150px; right:150px; line-height:150px; text-align:center; color:#fff; padding:0; margin:0;}
.pro-header .icon-prev { position:absolute; bottom:0; left:0;}
.pro-header .icon-faq { position:absolute; bottom:0; right:0;}
.pro-header .top-banner { width:1080px; height:220px;}
.member-bg { background:#444444;}

.tool { padding:40px;}
.tool a { display:block; text-align:center; font-size:48px; color:#ffffff;}
.tool .lottery { float:left; background:#886655;  width:405px; line-height:130px; border-radius:10px;}
.tool .award { float:left; background:#886655; width:405px; line-height:130px; border-radius:10px; margin:0 30px; position:relative;}
.tool .menu { float:left; background:#664433; width:130px; height:130px;  border-radius:10px; padding-top:15px; position:relative;}

.tool .menu > a { position: absolute; left: 0; top: 50%; width: 100%; font-size:36px; text-align: center; color:#ffffff; transform: translate(0, -50%); }

.tool .award:hover .sub-menu { top:150px; right:-160px; opacity:1;  visibility: visible; transition: all 0.3s ease 0s;}
.tool .menu:hover .sub-menu { top:150px; opacity:1;  visibility: visible; transition: all 0.3s ease 0s;}

.tool .sub-menu { position:absolute; top:160px; right:0px; z-index:999; opacity:0; visibility: hidden; transition: all 0.3s ease 0s;}
.tool .award .sub-menu { position:absolute; top:160px; right:-160px;}
.tool .sub-menu { background:#CCBBAA; width:1000px; padding:20px 1px;}
.tool .sub-menu a, .tool .menu .sub-menu a { background:#ffffff; display:block; line-height:100px; font-size:36px; text-align:center; color:#444444; margin:0 0 1px 0; }
.tool .sub-menu .top-box { position:relative;}
.tool .sub-menu .triangle {width: 0; height: 0; border-style: solid; border-width: 0 15px 30px 15px; border-color: transparent transparent #ccbbaa transparent; }

.tool .menu .sub-menu .triangle { position:absolute; top:-40px; right:50px;}
.tool .award .sub-menu .triangle { position:absolute; top:-40px; right:350px;}


.pro-itme { padding:0px 40px 40px 40px; }
.pro-itme .photo { float:left; }
.pro-itme .photo a { display:block;}
.pro-itme .photo a img { width:300px; height:300px; }

.pro-itme .info { margin-left:300px; }
.pro-itme .info .pro-name { height:140px; overflow:hidden; padding-left:15px;}
.pro-itme .info .pro-name h3 { margin:0 80px 0 0; padding:0; font-weight:normal;}
.pro-itme .info .pro-name h3 a { font-size:36px; color:#444444; }
/*.pro-itme .info .pro-name span.favorite { float:right; display:block; width:80px; height:80px; background-image:url(../images/icon-unfavrite.png); background-position:center; cursor:pointer;  }
.pro-itme .info .pro-name span.favorite.active { background-image:url(../images/icon-favrite.png);}*/
.pro-itme .info .pro-name span.favorite { float:right; display:block; width:80px; height:80px; cursor:pointer;  }

.pro-itme .info .price { line-height:75px; font-size:36px; color:#444444; padding-left:15px;}
.pro-itme .info .price .price-01 { color:#0099FF; font-size:48px; }
.pro-itme .info .price .price-02 { color:#FF0000; font-size:48px; }

.pro-itme .info .Date_of_draw { font-size:36px; color:#444444; background:#cccccc; line-height:80px; padding-left:15px; position:relative;}
.pro-itme .info .Date_of_draw a.lottery-button { background:#FF9900; color:#ffffff; font-size:48px; text-align:center; width:200px; line-height:80px; display:block; position:absolute; right:0; top:0;}

.pro-itme .info .participantCount { position:relative; margin-top: -80px; font-size: 32px; color:#444444; line-height:80px; padding-left:15px; text-align:right; }


.pro-detail .photo { width:100%; height:auto;}
.pro-detail .pro-name { padding:30px 40px; }
.pro-detail .pro-name h3 { margin-right:95px; height:140px; font-size:48px; color:#444444; margin:0; padding:0; font-weight:normal; }
/*.pro-detail .pro-name span.icon-fav { display:block; width:95px; height:95px; background-image:url(../images/icon-unfavrite.png); background-position:center; background-repeat:no-repeat; cursor:pointer;}*/
.pro-detail .pro-name span.icon-fav { display:block; width:95px; height:95px; cursor:pointer;}
.pro-detail .pro-name span.fav-text { display:block; width:95px; line-height:45px; color:#040000; text-align:center; font-size:30px; }
.pro-detail .fav-icon { float:right; width:95px;}

.pro-detail .pro-Introduction { margin:0 40px; padding:15px; font-size:36px; line-height:1.6em; color:#444444; border:1px #999999 solid; min-height:200px;  }

.pro-detail .price { padding:30px 40px;}
.pro-detail .price .price-box { margin-right:280px; }

.pro-detail .price .price-box .title { font-size:36px; line-height:55px; color:#040000;}
.pro-detail .price .price-box .velue { font-size:36px; line-height:70px; color:#040000;}
.pro-detail .price .price-box .blue { font-size:72px; color:#0099FF; }
.pro-detail .price .price-box .red { font-size:72px; color:#FF0000; }
.pro-detail .price .price-box .left-side { width:470px; float:left;}
.pro-detail .price .price-box .right-side { margin-left:470px;}
.pro-detail .price a.cart { display:block; width:280px; height:280px; float:right; }

.lottery-number { background:#FF6666; height:100px;  border-radius: 99em; margin:40px 40px;}
.lottery-number span.title { display:block; font-size:48px; color:#ffffff; width:250px; line-height:100px; text-align:right; float:left; padding-right:10px;}
.lottery-number ul { margin:0; padding:12px 0 0 0; list-style:none; margin-left:250px;}
.lottery-number ul li { width:75px; height:75px; float:left; padding:5px;  }
.lottery-number ul li span { background:#FFFF77; display:block; width:65px; line-height:65px; border-radius: 99em; font-size:26px; color:#FF0000; text-align:center; }


.lottery-number02 { background:#00BBBB; height:100px;  border-radius: 99em; margin:0 40px 40px 40px;}
.lottery-number02 span.title { display:block; font-size:48px; color:#ffffff; width:250px; line-height:100px; text-align:right; float:left; padding-right:10px;}
.lottery-number02 ul { margin:0; padding:12px 0 0 0; list-style:none; margin-left:250px;}
.lottery-number02 ul li { width:75px; height:75px; float:left; padding:5px;  }
.lottery-number02 ul li span { background:#ffffff; display:block; width:65px; line-height:65px; border-radius: 99em; font-size:26px; color:#FF0000; text-align:center; }


.pro-tools ul { margin:0 48px; padding: 0px 0 0 0; list-style:none;}
.pro-tools ul li { float:left; margin-bottom:40px; width:25%; }
.pro-tools ul li a { display:block; height:150px; text-align:center;}
.pro-tools ul li a img { background:#999999; display:inline-block; width:150px; height:150px; margin:0 auto; border-radius: 99em;}
.pro-tools ul li p { margin:0; padding:0; text-align:center; color:#444444; font-size:30px; height:60px;
                      display: -webkit-flex;
                      display: flex;
                      -webkit-align-items: center;
                                align-items: center;
                        -webkit-justify-content: center;
                                justify-content: center;
                     }


/** 首頁 **/
.header-index { height:70px; background:#000000;}
.index-banner img { width:100%; height:auto; }

.index-list h2 { margin:0; padding:0; color:#444444; line-height:100px; font-size:48px; }
.index-list h2 .icon { display: block; float:left; margin-left:48px;}

.index-list ul { margin:0 48px; padding: 40px 0 0 0; list-style:none; display:inline-block;}
.index-list ul li { float:left; margin-bottom:40px; width:25%; }
.index-list ul li a { display:block; height:150px; text-align:center;}
.index-list ul li a img { background:#999999; display:inline-block; width:150px; height:150px; margin:0 auto; border-radius: 99em;}
.index-list ul li p { margin:0; padding:0; text-align:center; color:#444444; font-size:30px; height:100px;
                      display: -webkit-flex;
                      display: flex;
                      -webkit-align-items: center;
                                align-items: center;
                        -webkit-justify-content: center;
                                justify-content: center;
                     }



.index-list02 h2 { margin:0; padding:0; color:#444444; line-height:100px; font-size:48px; }
.index-list02 h2 .icon { display: block; float:left; margin-left:48px;}
.index-list02 h2 a.more { display:block; float:right; line-height:100px; margin-right:30px; color:#FF5500; font-size:36px;}

.index-list02 ul { margin:0; padding:0; list-style:none; white-space:nowrap; overflow-y: hidden; overflow-x: auto; }
.index-list02 ul li {margin:0 0 40px 30px; width:300px; display:inline-block;}
.index-list02 ul li a { display:block; height:300px; text-align:center; margin: 30px 0;}
.index-list02 ul li a img { background:#999999; display:inline-block; width:300px; height:300px; margin:0 auto;}
.index-list02 ul li p { margin:0; padding:0; text-align:center; color:#444444; font-size:36px; height:100px;
						white-space:normal;
                        display: -webkit-flex;
                        display: flex;
                        -webkit-align-items: center;
                                align-items: center;
                        -webkit-justify-content: center;
                                justify-content: center;
                     }
.index-list02 ul li .price { display:block; line-height:60px; font-size:36px; color:#FF0000; padding-left:10px;}