@import url("reset.css");
*{ box-sizing:border-box;}
body{ font-family:"微軟正黑體"; font-weight:bold;}
header{ width:100%; height:460px; background:url(../images/header_bg.jpg) top center no-repeat;}
article{ width:100%; height:auto; background:url(../images/artcle_bg.jpg) top center repeat-y;}
footer{ width:100%; height:157px; background:url(../images/footer_bg.jpg) top center no-repeat; text-align:center;}
.main{ width:960px;  margin:0 auto; position:relative;}

header .logo{ position:absolute; top:20px; left:16px; z-index:3;}
header .share{ color:#484848; font-size:12px; line-height:27px; position:absolute; top:26px; right:245px; z-index:5;}
header .share a{ display:inline-block; width:27px; height:27px;  text-indent:-9999px; background:url(../images/icon.png); margin-left:5px; opacity:1; transition:opacity .3s;}
header .share a.plurk{ background-position:-32px 0;}
header .share a.twitter{ background-position:-63px 0;}
header .share a:hover{ opacity:.7;}
header .titletop{ position:absolute; top:59px;}

article h6{ display:block; width:918px; height:30px; margin:0 auto; text-indent:-9999px; margin-bottom:35px;}
article .part1 h6{ background:url(../images/title01.jpg);}
article .part2 h6{ background:url(../images/title02.jpg);}
article .part3 h6{ background:url(../images/title03.jpg);}
article .part1 .giftbtn{ position:absolute; right:21px; display:block; width:138px; height:62px; background:url(../images/gift_btn.png) top center; text-indent:-9999px; top:-16px;}
article .part1 .giftbtn:hover{ background-position:bottom;}
article .ttop{ overflow:hidden; width:880px; margin:0 auto; padding-bottom:30px;}
article .ttop img{ float:left;}
article .ttop p{ float:right; width:450px; font-size:18px; line-height:28px; color:#484848;}
article .ttop p span{ display:block; color:#c1272f; font-size:22px; line-height:30px; margin-bottom:8px;}
article .ttop a{ display:block; width:127px; height:38px; background:url(../images/more.jpg) top center; text-indent:-9999px; margin-top:8px; cursor:pointer}
article .ttop a:hover{ background-position:bottom;}
article .ttop p.nnoe{ margin-top:20px; display:none;}
article .ttop p.nnoe span{font-size:18px; line-height:28px; color:#484848; display:block; position:absolute; width:92%; left:4%; padding-top:1%;}
article a.moreoff{ display:block; width:127px; height:38px; background:url(../images/more2.jpg) top center; text-indent:-9999px; margin:20px 0; margin-left:795px;cursor:pointer}
.show{ display:none;}
article a.moreoff:hover{ background-position:bottom;}

article .tab{width:880px; margin:0 auto;overflow:hidden;}
article .tab >div{ width:46%; float:left;}
article .tab >div.tb2{ float:right;}
article .tab >div h4{ font-size:16px; color:#c1272f; line-height:48px; }
article .tab >div table{ width:100%; font-size:16px;}
article .tab >div table tr{ border-bottom:1px dashed #cccccc;}
article .tab >div table tr:nth-child(odd) { background:#eaeaea;}
article .tab >div table tr:first-child{ border:0; background:#008f3a; color:#fff;}
article .tab >div table td{ height:40px; line-height:40px; padding:0 5px;}
article .mtxt{width:880px; margin:0 auto; text-align:justify; font-size:16px; line-height:22px; color:#484848;}
article .mtxt p{ margin:20px 0;}
article .mtxt p span{ font-size:22px; line-height:50px; color:#c1272f; display:block;}
article .mtxt p.pbig{ font-size:18px; line-height:28px; margin-top:-30px;}
article .part2 .mtxt p{ margin:0 0 20px 0; margin-top:-10px;}
article .part2 .menu{ width:893px; margin:0 auto; overflow:hidden;}
article .part2 .menu > h3{ display:block; width:893px; height:26px; text-indent:-9999px; margin:25px 0;}
article .part2 .menu.m1 > h3{ background:url(../images/menu_t1.png);}
article .part2 .menu.m2 > h3{ background:url(../images/menu_t2.png);}
article .part2 .menu.m3 > h3{ background:url(../images/menu_t3.png);}
article .part2 .menu > img{ display:block; width:707px; margin: auto;}
article .part2 .menu .me_ll{ float:left; width:260px; background:#e84c54;-webkit-border-radius: 6px;
-moz-border-radius: 6px;border-radius: 6px; position:relative; padding-top:50px; margin-bottom:20px;}
article .part2 .menu .me_ll h5{ position:absolute; top:-4px; left:10px; display:block; width:242px; height:55px; background:url(../images/menu_2.png); text-indent:-9999px;}
article .part2 .menu .me_ll ul{ padding:0 20px; padding-bottom:10px;}
article .part2 .menu .me_ll ul li{ overflow:hidden; color:#fff; display:block;border-bottom:1px solid #efb0b3;}
article .part2 .menu .me_ll ul li:last-child{ border-bottom:0;}
article .part2 .menu .me_ll ul li h3{ float:left; font-size:16px; line-height:32px;}
article .part2 .menu .me_ll ul li p{ float:right; text-align:right;font-size:16px; line-height:32px;}
article .part2 .menu .me_ll ul li span{ display:block; clear:both; font-size:12px;text-align:right; padding-bottom:5px;}
article .part2 .menu .me_rr{ width:595px; float:right;}
article .part2 .menu .me_rr h5{ display:block; width:595px; height:47px; background:url(../images/menu_1.png); text-indent:-9999px; margin-bottom:10px;}
article .part2 .menu .me_rr ul{ padding-left:30px;counter-reset: my-badass-counter;}
article .part2 .menu .me_rr ul > li{position:relative; font-size:16px; line-height:22px;}
article .part2 .menu .me_rr ul > li:after{background:#4aa221;width:16px;height:16px;display:block;
    position:absolute;content: counter(my-badass-counter);counter-increment: my-badass-counter;
    top:2px;left:-20px; text-align:center; color:#fff; font-size:12px; line-height:16px;-webkit-border-radius: 10px;
-moz-border-radius: 10px;border-radius: 10px;}
article .part2 .menu .me_rr ul > li ol{ padding-left:20px; margin:10px 0;}
article .part2 .menu .me_rr ul > li ol li{list-style-type: upper-roman;}

article .part2 .menu .pic{ clear:both; padding:15px 0;}
article .part2 .menu .pic div{ width:50%; float:left;}
article .part2 .menu .pic div p{ font-size:14px; line-height:20px; color:#008333; padding:10px 15px;}
article .part2 .menu >p{ display:block; clear:both; font-size:15px; line-height:20px; color:#484848; margin:10px 0 30px 0;}

footer a{ display:block; width:183px; height:87px; text-indent:-9999px; background:url(../images/top.png); transition:all .5s; bottom:18px; right:0;  transform:scale(.9,.9);position:absolute; cursor:pointer;}
footer a:hover{ transform:scale(1,1);}
footer p{ font-size:12px; color:#fff; padding-top:100px;}

#view_overlay_gift{ display:none;  position:fixed; left:0; top:0; width:100%; height:100%; z-index:9999; background:#000; background:rgba(0,0,0,.7); overflow:auto;}
#view_box_gift{ width:856px; margin:10% auto; position:relative; z-index:10; }
#view_overlay_gift .mask{ position:absolute; left:0; top:0; width:100%; height:100%;  z-index:1;}
#view_box_gift .inner{ padding:30px ; overflow:hidden; width:856px; padding-top:60px; border:6px solid #008333;-webkit-border-radius: 40px;
-moz-border-radius: 40px;border-radius: 40px;background:#f3f3f3;}
#view_box_gift .inner .giftttlie{ position:absolute; top:-50px; left:0;}
#view_box_gift .inner table{ width:80%; margin:15px auto; text-align:center; line-height:37px;}
#view_box_gift .inner table td{ border:1px solid #008333; width:50%;}
#view_box_gift .inner table tr:nth-child(even) { background:#e5e5e5;}
#view_box_gift .inner div.gift01{ width:100%; border-bottom:1px dashed #B5B5B5; padding-bottom:20px; margin-bottom:20px; overflow:hidden;}
#view_box_gift .inner div .prd{ float:left; width:200px; height:auto; margin:10px 10px 20px 120px;}
#view_box_gift .inner div .prdtt{ float:left; width:350px; height:auto; padding-top:15px;}
#view_box_gift .close{ position:absolute; top:20px; right:25px; cursor:pointer; text-indent:-9999px; width:39px; height:39px; background:url(../images/gift_close.png); background-size:100% auto; }

@media screen and (max-width:999px) {
body{ font-family:"微軟正黑體"; font-weight:normal; background:url(../images/bgline.jpg) repeat-y; background-size:100% auto;}
header{ width:100%; height:auto; background: url(../images/bg.jpg) top center no-repeat; background-size:100% auto;  }
article{ width:100%; height:auto; background:none;}
footer{ width:100%; height:100px; background: url(../images/m_bbtbg.jpg) top center no-repeat #008333; text-align:center;background-size:100% auto;}
.main{ width:100%;  margin:0 auto; position:relative;}

header .logo{ position:absolute; top:10px; left:16px; z-index:3;}
header .share{ color:#484848; font-size:12px; line-height:27px; position:absolute; top:10px; right:10px;}
header .share a{ display:inline-block; width:27px; height:27px;  text-indent:-9999px; background:url(../images/icon.png); margin-left:5px; opacity:1; transition:opacity .3s;}
header .share a.plurk{ background-position:-32px 0;}
header .share a.twitter{ background-position:-63px 0;}
header .share a:hover{ opacity:.7;}
header .titletop{ position:relative; top:0; width:90%; height:auto; margin:0 5%;padding-top:73%; padding-bottom:3%;}

article h6{ display:block; width:90%; margin:0 auto; height:20px; margin:0 auto; text-indent:-9999px; margin-bottom:15px;}
article .part1 h6{ background:url(../images/title01.jpg) top center no-repeat; background-size:auto 75% ; }
article .part2 h6{ background:url(../images/title02.jpg) top center no-repeat; background-size:auto 75% ; }
article .part3 h6{ background:url(../images/title03.jpg) top center no-repeat; background-size:auto 75% ; }
article .part1 .giftbtn{ position:relative; right:0; display:block; width:138px; height:62px; background:url(../images/gift_btn.png) top center; text-indent:-9999px; top:0 ; margin:0 auto; margin-bottom:20px;}
article .part1 .giftbtn:hover{ background-position:bottom;}
article .ttop{ overflow:hidden; width:100%; margin:0 auto; padding-bottom:20px;}
article .ttop img{ float:none; width:80%; margin:0 10%;}
article .ttop p{ float:none; width:80%; margin:0 auto; font-size:16px; line-height:24px; color:#484848;}
article .ttop p span{ display:block; color:#c1272f; font-size:20px; line-height:28px; margin-bottom:8px;}
article .ttop a{ display:block; width:127px; height:38px; background:url(../images/more.jpg) top center; text-indent:-9999px; margin:0 auto; margin-top:8px; cursor:pointer}
article .ttop a:hover{ background-position:bottom;}
article .ttop p.nnoe{ margin-top:20px; display:none;}
article .ttop p.nnoe span{font-size:16px; line-height:24px; color:#484848; display:inline; position:relative; width:auto; left:0; padding-top:0;}
article a.moreoff{ display:block; width:127px; height:38px; background:url(../images/more2.jpg) top center; text-indent:-9999px; margin:20px auto; margin-top:10px; cursor:pointer}
.show{ display:none; width:80%; margin:0 auto;}
article a.moreoff:hover{ background-position:bottom;}

article .tab{width:100%; margin:0 auto;overflow:hidden;}
article .tab >div{ width:100%; float:none;}
article .tab >div.tb2{ float:right;}
article .tab >div h4{ font-size:14px; color:#c1272f; line-height:22px; }
article .tab >div table{ width:100%; font-size:15px;}
article .tab >div table tr{ border-bottom:1px dashed #cccccc;}
article .tab >div table tr:nth-child(odd) { background:#eaeaea;}
article .tab >div table tr:first-child{ border:0; background:#008f3a; color:#fff; font-size:13px;}
article .tab >div table td{ height:40px; line-height:20px; padding:0 5px;}
article .mtxt{width:100%; margin:0 auto; text-align:justify; font-size:15px; line-height:22px; color:#484848;}
article .mtxt p{ margin:10px 0;}
article .mtxt p span{  font-size:20px; line-height:28px; color:#c1272f; display:block; padding-bottom:15px;}
article .mtxt p.pbig{ font-size:16px; line-height:24px; margin-top:-30px;}
article .part2 .mtxt p{ margin:0 0 20px 0; margin-top:-10px;}
article .part2 .menu{ width:100%; margin:0 auto; overflow:hidden;}
article .part2 .menu > h3{ display:block; width:100%; height:26px; text-indent:-9999px; margin:10px 0;}
article .part2 .menu.m1 > h3{ background:url(../images/menu_t1.png) top no-repeat;background-size:auto 75% ; }
article .part2 .menu.m2 > h3{ background:url(../images/menu_t2.png) top no-repeat;background-size:auto 75% ;}
article .part2 .menu.m3 > h3{ background:url(../images/menu_t3.png) top no-repeat;background-size:auto 75% ;}
article .part2 .menu.m3 >p{ padding-top:15px;}
article .part2 .menu > img{ display:block; width:100%; margin: auto;}
article .part2 .menu.m1 >img{ margin-bottom:15px;}
article .part2 .menu .me_ll{ float:left; width:100%; background:#e84c54;-webkit-border-radius: 6px;
-moz-border-radius: 6px;border-radius: 6px; position:relative; padding-top:50px; margin-bottom:20px;}
article .part2 .menu .me_ll h5{ position:absolute; top:-4px; left:10px; display:block; width:242px; height:55px; background:url(../images/menu_2.png); text-indent:-9999px;}
article .part2 .menu .me_ll ul{ padding:0 20px; padding-bottom:10px;}
article .part2 .menu .me_ll ul li{ overflow:hidden; color:#fff; display:block;border-bottom:1px solid #efb0b3;}
article .part2 .menu .me_ll ul li:last-child{ border-bottom:0;}
article .part2 .menu .me_ll ul li h3{ float:left; font-size:16px; line-height:32px;}
article .part2 .menu .me_ll ul li p{ float:right; text-align:right;font-size:16px; line-height:32px;}
article .part2 .menu .me_ll ul li span{ display:block; clear:both; font-size:12px;text-align:right; padding-bottom:5px;}
article .part2 .menu .me_rr{ width:100%; float:right;}
article .part2 .menu .me_rr h5{ display:block; width:595px; height:47px; background:url(../images/menu_1.png); text-indent:-9999px; margin-bottom:10px;}
article .part2 .menu .me_rr ul{ padding-left:30px;counter-reset: my-badass-counter;}
article .part2 .menu .me_rr ul > li{position:relative; font-size:16px; line-height:22px;}
article .part2 .menu .me_rr ul > li:after{background:#4aa221;width:16px;height:16px;display:block;
    position:absolute;content: counter(my-badass-counter);counter-increment: my-badass-counter;
    top:2px;left:-20px; text-align:center; color:#fff; font-size:12px; line-height:16px;-webkit-border-radius: 10px;
-moz-border-radius: 10px;border-radius: 10px;}
article .part2 .menu .me_rr ul > li ol{ padding-left:20px; margin:10px 0;}
article .part2 .menu .me_rr ul > li ol li{list-style-type: upper-roman;}

article .part2 .menu .pic{ clear:both; padding:15px 0;}
article .part2 .menu .pic div{ width:100%; float:none;}
article .part2 .menu .pic div img{ width:100%; height:auto;}
article .part2 .menu .pic div p{ font-size:14px; line-height:20px; color:#008333; padding:10px 15px;}
article .part2 .menu >p{ display:block; clear:both; font-size:15px; line-height:20px; color:#484848; margin:10px 0 30px 0;}

footer a{ display:block; width:183px; height:87px; text-indent:-9999px; background:url(../images/top.png); transition:all .5s; bottom:20px; right:0;  transform:scale(.9,.9);position:absolute; cursor:pointer;}
footer a:hover{ transform:scale(1,1);}
footer p{ font-size:12px; color:#fff;padding:10px; padding-top:50px;}

#view_overlay_gift{ display:none;  position:fixed; left:0; top:0; width:100%; height:100%; z-index:9999; background:#000; background:rgba(0,0,0,.7); overflow:auto;}
#view_box_gift{ width:100%; margin:10% auto; position:relative; z-index:10; }
#view_overlay_gift .mask{ position:absolute; left:0; top:0; width:100%; height:100%;  z-index:1;}
#view_box_gift .inner{ padding:30px ; overflow:hidden; width:100%; padding-top:60px; border:6px solid #008333;-webkit-border-radius: 40px;
-moz-border-radius: 40px;border-radius: 40px;background:#f3f3f3;}
#view_box_gift .inner .giftttlie{ position:absolute; top:-20px; left:0; width:80%; height:auto;}
#view_box_gift .inner table{ width:100%; margin:20px auto; text-align:center; line-height:37px;}
#view_box_gift .inner table td{ border:1px solid #008333; width:50%;}
#view_box_gift .inner table tr:nth-child(even) { background:#e5e5e5;}
#view_box_gift .inner div.gift01{ width:100%; border-bottom:1px dashed #B5B5B5; padding-bottom:20px; margin-bottom:20px; overflow:hidden;}
#view_box_gift .inner div .prd{ float:none; width:100%; height:auto; margin:0 auto;}
#view_box_gift .inner div .prdtt{ float:none; width:100%; height:auto; margin:0 auto; padding-top:15px;}
#view_box_gift .close{ position:absolute; top:20px; right:25px; cursor:pointer; text-indent:-9999px; width:39px; height:39px; background:url(../images/gift_close.png); background-size:100% auto; }
}