@import url("reset.css");
body{ background:url(../images/bg.jpg) top center no-repeat #c3def1; font-family:"微軟正黑體";}
header > div{ width:1000px; height:552px; margin:0 auto; position:relative;}
header > div .logo{ position:absolute; top:25px; left:10px;}
header > div .tt{ position:absolute; top:96px; left:-20px;}
header > div p{ display:block; position:absolute; top:363px; left:22px; width:485px; text-align:justify; font-size:14px; line-height:22px; color:#343434; font-weight:bold;}
header > div p span{ display:block; width:105px; height:28px; background:#fff100;-webkit-border-radius:16px;
-moz-border-radius: 16px;
border-radius:16px; border:2px solid #005cb9; color:#005cb9; text-align:center; font-size:18px; line-height:28px; margin-bottom:10px;}
header > div p a{ display:inline-block; width:63px; height:20px; text-align:center; line-height:20px; background:#005cb9; color:#fff; text-decoration:none;-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}
header > div p a:hover{ color:#fff100;}
header > div .share{ color:#616161; font-size:12px; line-height:27px; position:absolute; top:40px; left:400px;}
header > div .share a{ display:inline-block; width:27px; height:27px;  text-indent:-9999px; background:url(../images/iconshare.png); margin-left:5px; opacity:1; transition:opacity .3s;}
header > div .share a.plurk{ background-position:-32px 0;}
header > div .share a.twitter{ background-position:-63px 0;}
header > div .share a:hover{ opacity:.7;}

.hide{display:none;}

article .inside_bg1{ display:block; height:54px; width:100%; background:url(../images/fo01.png) no-repeat top center;}
article .inside_bg2{ display:block; height:54px; width:100%; background:url(../images/fo03.png) no-repeat top center;}
article > form > div{ width:100%; background:url(../images/fo02.png) repeat-y top center;}
article > form > div >div { width:1000px; margin:0 auto;  position:relative;}
article > form > div >div >div{ float:left; width:50%; margin-bottom:20px;}
article > form > div >div >div h3{ display:block; width:492px;text-indent:16px;  height:48px; line-height:48px; font-size:14px; }
article > form > div >div >div h3 img{ margin-top:-5px;}
article > form > div >div >div.LL >div{ padding-top:20px; padding-left:25px;}
article > form > div >div >div.LL >div h6{ font-size:15px; color:#f73f3f; margin-bottom:15px;}
article > form > div >div >div.LL >div p{ font-size:12px; line-height:16px; color:#787878; text-align:justify; display:block; width:445px; margin-top:25px;}
article > form > div >div >div.LL >div h4{ font-size:15px; color:#1a1a1a; line-height:50px;}
article > form > div >div >div.LL >div h5{font-size:15px; color:#1a1a1a; line-height:25px; margin:10px 0; padding-right:40px;}
article > form  div >div >div.LL h3{ background:url(../images/step01.gif);color:#005cb9;}

article > form > div >div >div.RR{ background:url(../images/line.gif) left bottom no-repeat;}
article > form > div >div >div.RR h3{ background:url(../images/step02.gif);color:#fff100; margin-left:10px;}
article > form > div >div >div.RR .QA{font-size:15px; line-height:28px; font-weight:bold; padding-top:20px; padding-left:40px; color:#1a1a1a;}
article > form > div >div >div.RR .QA > p{ font-size:16px; color:#005cb9;}
article > form > div >div >div.RR .QA label{ display:block; padding-left:15px;}
article > form > div >div >div input[type=text]{ border:1px solid #c4c4c4; height:30px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; padding:0 20px; outline:none;width:220px;}
article > form > div >div >div input[type=text]:focus{ background:#e3f3ff; border:1px solid #005cb9;}
article > form > div >div >div input[type="checkbox"] {display:none;}
article > form > div >div >div label { display:inline-block;width:auto; float:none;}
article > form > div >div >div input[type="checkbox"] + label span {
    display:inline-block;   width:20px;   height:20px;   margin:-1px 4px 0 0;    vertical-align:middle;   background:url(../images/check_radio_sheet.jpg) left top no-repeat;    cursor:pointer;}
article > form > div >div >div input[type="checkbox"]:checked + label span { background-position:bottom;}
article > form > div >div >div input[type="radio"] {display:none;}
article > form > div >div >div input[type="radio"] + label span {display:inline-block;width:20px;height:20px;margin:-1px 4px 0 0; vertical-align:middle;background:url(../images/check_radio.jpg) left top no-repeat;cursor:pointer;}
article > form > div >div >div input[type="radio"]:checked + label span { background-position:bottom;}
article > form > div >div > a{ clear:both; display:block; width:297px; height:77px; text-indent:-9999px;  background:url(../images/btn.gif); margin:10px auto 0 auto;}
article > form > div >div > a:hover{ background-position:bottom;}

footer > div{ width:1000px; margin:0 auto; }
footer > div ul{ background:url(../images/note.gif) no-repeat top left; padding-left:115px; margin:10px 0;}
footer > div ul li{ list-style:disc; font-size:13px; font-weight:bold; line-height:18px; color:#005cb9;}
footer > div ul li p{ color:#4e4e4e;}
footer > div ul li p a{ color:#005cb9;}
footer > div >p{ text-align:center; line-height:68px; color:#4e4e4e; font-size:12px;}

a.hr12{ position:absolute; z-index:9999; right:-10%; bottom:0;display:block; width:129px; height:124px; background:url(../images/12hr.gif);}
a.hr12:hover{ background-position:bottom;}
a.hr12_2{ display:none;}

#view_overlay{ 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{ width:679px; margin:10% auto; position:relative; z-index:10;}
#view_overlay .mask{ position:absolute; left:0; top:0; width:100%; height:100%;  z-index:1;}
#view_box .inner{ padding:20px ; background:#d9eefc;-webkit-border-radius: 30px;
-moz-border-radius: 30px; 
border-radius: 30px; border:4px solid #005cb9; overflow:hidden; width:668px; padding-top:60px;}
#view_box .inner h2{ display:block; width:231px; height:127px; background:url(../images/gift_tt.png); background-size:100% auto; text-indent:-9999px; position:absolute; top:-70px; left:10px;}
#view_box .inner > div{ width:333px; height:272px; float:left; position:relative; }
#view_box .inner > div p{ margin-top:195px; font-weight:bold;margin-left:30px;font-size:14px; line-height:18px; color:#1c1c1c;}
#view_box .inner > div h6{ position:absolute; display:block; width:54px; height:54px; text-align:center; line-height:54px;-webkit-border-radius: 27px;
-moz-border-radius: 27px;
border-radius: 27px; background:#005cb9; bottom:26px; right:26px; color:#fff100; font-size:14px;}
#view_box .inner > div.gift1{ background:url(../images/gift_1.png); background-size:100% auto;}
#view_box .inner > div.gift2{ background:url(../images/gift_2.png); background-size:100% auto;}
#view_box .inner > div.gift3{ background:url(../images/gift_3.png); background-size:100% auto;}
#view_box .inner > div.gift4{ background:url(../images/gift_4.png); background-size:100% auto;}
#view_box .close{ position:absolute; top:-20px; right:-20px; cursor:pointer; text-indent:-9999px; width:47px; height:47px; background:url(../images/gift_close.png); background-size:100% auto;}

#view_overlay_ans{ 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_ans{ width:679px; margin:10% auto; position:relative; z-index:10;}
#view_overlay_ans .mask{ position:absolute; left:0; top:0; width:100%; height:100%;  z-index:1;}
#view_box_ans .inner{ padding:20px ; background:#d9eefc;-webkit-border-radius: 30px;
-moz-border-radius: 30px; 
border-radius: 30px; border:4px solid #005cb9; overflow:hidden; width:668px; padding-top:50px;}
#view_box_ans .inner h2{ display:block; width:319px; height:183px; background:url(../images/ans.png); background-size:100% auto; text-indent:-9999px; position:absolute; top:-70px; left:10px;}
#view_box_ans .inner h4{ display:block; text-align:center;  width:100%; height:110px; background:url(../images/ans_line.gif) bottom center no-repeat; line-height:100px; padding-bottom:10px; font-size:30px; font-weight:normal; color:#005cb9;}
#view_box_ans .inner h4 img{ margin:0 5px;margin-bottom:-10px;}
#view_box_ans .inner h4 span{ font-weight:bold;}
#view_box_ans .inner >div.ans_1{ background:url(../images/ans_a_p.jpg) no-repeat left center; padding-left:260px;}
#view_box_ans .inner >div.ans_2{ background:url(../images/ans_b_p.jpg) no-repeat left center; padding-left:260px;}
#view_box_ans .inner >div.ans_3{ background:url(../images/ans_c_p.jpg) no-repeat left center; padding-left:260px;}
#view_box_ans .inner >div.ans_4{ background:url(../images/ans_d_p.jpg) no-repeat left center; padding-left:260px;}
#view_box_ans .inner >div p{ color:#1c1c1c; font-size:15px; line-height:24px; margin:20px 0; display:block; width:380px;}
#view_box_ans .inner >div h6{ font-weight:bold; color:#1c1c1c; font-size:16px; line-height:24px; margin:20px 0; display:block; width:380px;}
#view_box_ans .inner >div h6 span{ display:block; background:#005cb9; text-align:center; color:#d9eefc; width:210px; height:30px; line-height:30px;-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px; margin-bottom:10px;}
#view_box_ans .close{ position:absolute; top:-20px; right:-20px; cursor:pointer; text-indent:-9999px; width:47px; height:47px; background:url(../images/gift_close.png); background-size:100% auto;}

#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:679px; 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:20px ; background:#d9eefc;-webkit-border-radius: 30px;
-moz-border-radius: 30px; 
border-radius: 30px; border:4px solid #005cb9; overflow:hidden; width:668px; padding-top:50px;}
#view_box_gift .inner h2{ display:block; width:468px; height:161px; background:url(../images/gift_popup.png); background-size:100% auto; text-indent:-9999px; position:absolute; top:-70px; left:10px;}
#view_box_gift .inner table{ margin:0 auto; margin-top:20px;}
#view_box_gift .inner td{ border:1px solid #005cb9; text-align:center; padding:3px; font-size:15px; background:#e2f3ff;}
#view_box_gift .inner td.color_b{ background:#005cb9; color:#fff100;}

#view_box_gift .close{ position:absolute; top:-20px; right:-20px; cursor:pointer; text-indent:-9999px; width:47px; height:47px; background:url(../images/gift_close.png); background-size:100% auto;}
@media screen and (max-width: 1235px) {

a.hr12{ position:absolute; z-index:9999; right:0; bottom:0;display:block; width:129px; height:124px; background:url(../images/12hr.gif);}
a.hr12:hover{ background-position:bottom;}
}
@media screen and (max-width: 960px) {
body{ background:url(../images/m/bg.jpg) top center no-repeat #c3def1; background-size:100% auto; font-family:"微軟正黑體";}
header > div{ width:100%; height:auto; margin:0 auto; position:relative;}
header > div .logo{ position:relative; top:0; left:0;  margin-left:5px; }
header > div .tt{ position:relative; top:0; left:0;width:92%; height:auto; margin-top:15px; margin-left:2%;}

header > div p{ display:block; position:relative; top:0; left:0; width:90%; text-align:justify; font-size:14px; line-height:22px; color:#343434; font-weight:normal; margin:0 auto;}
header > div p span{ display:block; width:105px; height:25px; background:#fff100;-webkit-border-radius:16px;
-moz-border-radius: 16px;
border-radius:16px; border:2px solid #005cb9; color:#005cb9; text-align:center; font-size:16px; line-height:28px; margin-bottom:10px; font-weight:bold;}
header > div p a{ display:inline-block; width:63px; height:20px; text-align:center; line-height:20px; background:#005cb9; color:#fff; text-decoration:none;-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}
header > div p a:hover{ color:#fff100;}
header > div .share{ color:#616161; font-size:12px; line-height:27px; position:relative; top:0; left:0; margin-left:15px; margin-bottom:20px; margin-top:10px;}
header > div .share a{ display:inline-block; width:27px; height:27px;  text-indent:-9999px; background:url(../images/iconshare.png); margin-left:5px; opacity:1; transition:opacity .3s;}
header > div .share a.plurk{ background-position:-32px 0;}
header > div .share a.twitter{ background-position:-63px 0;}
header > div .share a:hover{ opacity:.7;}


article .inside_bg1{ display:block; height:54px; width:100%; background:url(../images/fo01.png) no-repeat top center;}
article .inside_bg2{ display:block; height:54px; width:100%; background:url(../images/fo03.png) no-repeat top center;}
article > form > div{ width:100%; background:url(../images/fo02.png) repeat-y top center;}
article > form > div >div { width:100%; margin:0 auto; position:relative;}
article > form > div >div >div{ float:none; width:100%; margin-bottom:20px;}
article > form > div >div >div h3{ display:block; width:99%;text-indent:16px;  height:40px; line-height:40px; font-size:14px;-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;}
article > form > div >div >div h3 img{ margin-top:-5px;}
article > form > div >div >div.LL >div{padding:0 25px; padding-top:20px; }
article > form > div >div >div.LL >div h6{ font-size:15px; color:#f73f3f; margin-bottom:15px; font-weight:normal;}
article > form > div >div >div.LL >div p{ font-size:12px; line-height:16px; color:#787878; text-align:justify; display:block; width:100%; margin:25px 0;}
article > form > div >div >div.LL >div h4{ font-size:15px; color:#1a1a1a; line-height:50px;font-weight:normal;}
article > form > div >div >div.LL >div h5{font-size:15px; color:#1a1a1a; line-height:25px; margin:10px 0; padding-right:0;font-weight:normal;}
article > form > div >div >div.LL h3{ background:#fff100; border:2px solid #005cb9; color:#005cb9;}
article > form > div >div >div.RR{ background:none;}
article > form > div >div >div.RR h3{ background:#005cb9; border:2px solid #fff100; color:#fff100; margin-left:0; background-size:100% 100%;}
article > form > div >div >div.RR .QA{font-size:15px; line-height:28px; font-weight:normal; padding-top:20px; padding-left:10px; color:#1a1a1a;}
article > form > div >div >div.RR .QA > p{ font-size:16px; color:#005cb9;}
article > form > div >div >div.RR .QA label{ display:block; padding-left:15px;}
article > form > div >div >div input[type=text]{ border:1px solid #c4c4c4; height:30px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; padding:0 20px; outline:none;width:85%;}

article > form > div >div >div input[type=text]:focus{ background:#e3f3ff; border:1px solid #005cb9;}
article > form > div >div >div input[type="checkbox"] {display:none;}
article > form > div >div >div label { display:inline-block;width:auto; float:none;}
article > form > div >div >div input[type="checkbox"] + label span {
    display:inline-block;   width:20px;   height:20px;   margin:-1px 4px 0 0;    vertical-align:middle;   background:url(../images/check_radio_sheet.jpg) left top no-repeat;    cursor:pointer;}
.chk1{display:block; }
article > form > div >div >div input[type="checkbox"]:checked + label span { background-position:bottom;}
article > form > div >div >div input[type="radio"] {display:none;}
article > form > div >div >div input[type="radio"] + label span {display:inline-block;width:20px;height:20px;margin:-1px 4px 0 0; vertical-align:middle;background:url(../images/check_radio.jpg) left top no-repeat;cursor:pointer;}
article > form > div >div >div input[type="radio"]:checked + label span { background-position:bottom;}
article > form > div >div > a{ clear:both; display:block; width:297px; height:77px; text-indent:-9999px;  background:url(../images/btn.gif); margin:10px auto 0 auto;}
article > form > div >div > a:hover{ background-position:bottom;}

footer > div{ width:96%; margin:0 auto; margin-bottom:20px; }
footer > div ul{ background:url(../images/m/note.jpg) no-repeat top center; background-size:50% auto; padding-left:25px; margin:10px 0; padding-top:15%;}
footer > div ul li{ list-style:disc; font-size:13px; font-weight:normal; line-height:18px; color:#005cb9;}
footer > div ul li p{ color:#4e4e4e;}
footer > div ul li p a{ color:#005cb9;}
footer > div >p{ text-align:center;line-height:20px; color:#4e4e4e; font-size:12px;}

a.hr12{ display:none;}
a.hr12_2{ position:fixed; z-index:9999; right:1%; bottom:3%;display:block; width:70px; height:67px; background:url(../images/12hr.gif); background-size:100% auto;}
a.hr12_2:hover{ background-position:top;}

#view_overlay{ 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{ width:90%; margin:10% auto; position:relative; z-index:10;}
#view_overlay .mask{ position:absolute; left:0; top:0; width:100%; height:100%;  z-index:1;}
#view_box .inner{ padding:2% ; background:#d9eefc;-webkit-border-radius: 30px;
-moz-border-radius: 30px; 
border-radius: 30px; border:4px solid #005cb9; overflow:hidden; width:96%; padding-top:10px;}
#view_box .inner h2{ display:block; width:150px; height:82px; background:url(../images/gift_tt.png); background-size:100% auto; text-indent:-9999px; position:relative; top:0; left:0; margin:0 auto; }
#view_box .inner > div{ width:100%; height:auto; float:none; position:relative; padding-top:60%; margin:0 auto; padding-bottom:10%;}
#view_box .inner > div p{ display:block; height:70px; margin-top:0; font-weight:normal;margin-left:5%;font-size:14px; line-height:18px; color:#1c1c1c;}
#view_box .inner > div h6{ position:absolute; display:block; width:54px; height:54px; text-align:center; line-height:54px;-webkit-border-radius: 27px;
-moz-border-radius: 27px;
border-radius: 27px; background:#005cb9; bottom:20%; right:5%; color:#fff100; font-size:14px;}
#view_box .inner > div.gift1{ background:url(../images/gift_1.png) top center no-repeat; background-size:100% auto;;}
#view_box .inner > div.gift2{ background:url(../images/gift_2.png) top center no-repeat; background-size:100% auto;}
#view_box .inner > div.gift3{ background:url(../images/gift_3.png) top center no-repeat; background-size:100% auto;}
#view_box .inner > div.gift4{ background:url(../images/gift_4.png) top center no-repeat; background-size:100% auto;}
#view_box .close{ position:absolute; top:-20px; right:0px; cursor:pointer; text-indent:-9999px; width:47px; height:47px; background:url(../images/gift_close.png); background-size:100% auto;}

#view_overlay_ans{ 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_ans{ width:90%; margin:10% auto; position:relative; z-index:10;}
#view_overlay_ans .mask{ position:absolute; left:0; top:0; width:100%; height:100%;  z-index:1;}
#view_box_ans .inner{ padding:2% ; background:#d9eefc;-webkit-border-radius: 30px;
-moz-border-radius: 30px; 
border-radius: 30px; border:4px solid #005cb9; overflow:hidden; width:96%; padding-top:0;}
#view_box_ans .inner h2{ display:block; width:150px; height:86px; background:url(../images/ans.png); background-size:100% auto; text-indent:-9999px; position:relative; top:0; left:0; margin:0 auto;}
#view_box_ans .inner h4{ display:block; text-align:center;  width:100%; height:50px; background:url(../images/ans_line.gif) bottom center no-repeat; line-height:50px; padding-bottom:10px; font-size:20px; font-weight:normal; color:#005cb9;}
#view_box_ans .inner h4 img{ margin:0 2px;margin-bottom:-10px; width:35px; height:auto;}
#view_box_ans .inner h4 span{ font-weight:bold;}
#view_box_ans .inner >div.ans_1{ background:url(../images/ans_a_p.jpg) no-repeat bottom center; padding-left:0; padding-bottom:250px; }
#view_box_ans .inner >div.ans_2{ background:url(../images/ans_b_p.jpg) no-repeat bottom center; padding-left:0; padding-bottom:250px;}
#view_box_ans .inner >div.ans_3{ background:url(../images/ans_c_p.jpg) no-repeat bottom center; padding-left:0; padding-bottom:250px;}
#view_box_ans .inner >div.ans_4{ background:url(../images/ans_d_p.jpg) no-repeat bottom center; padding-left:0; padding-bottom:250px;}
#view_box_ans .inner >div p{ color:#1c1c1c; font-size:15px; line-height:24px; margin:0 auto; display:block; width:90%;}
#view_box_ans .inner >div h6{ font-weight:normal; color:#1c1c1c; font-size:16px; line-height:24px; margin:20px auto; display:block; width:90%;}
#view_box_ans .inner >div h6 span{ display:block; background:#005cb9; text-align:center; color:#d9eefc; width:210px; height:30px; line-height:30px;-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px; margin-bottom:10px;}
#view_box_ans .close{ position:absolute; top:-20px; right:-20px; cursor:pointer; text-indent:-9999px; width:47px; height:47px; background:url(../images/gift_close.png); background-size:100% auto;}

#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:90%; 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:2% ; background:#d9eefc;-webkit-border-radius: 30px;
-moz-border-radius: 30px; 
border-radius: 30px; border:4px solid #005cb9; overflow:hidden; width:96%; padding-top:0;}
#view_box_gift .inner h2{ display:block; width:90%; height:auto; background:url(../images/gift_popup.png) no-repeat; background-size:100% auto; text-indent:-9999px; position:relative; top:0; left:0; margin:0 auto; padding-top:20%;}
#view_box_gift .inner table{ margin:0 auto; margin-top:0;}
#view_box_gift .inner td{ border:1px solid #005cb9; text-align:center; padding:3px; font-size:15px; background:#e2f3ff;}
#view_box_gift .inner td.color_b{ background:#005cb9; color:#fff100;}

#view_box_gift .close{ position:absolute; top:-20px; right:-20px; cursor:pointer; text-indent:-9999px; width:47px; height:47px; background:url(../images/gift_close.png); background-size:100% auto;}
}
@media screen and (max-width: 360px) {
#view_box .inner > div{ width:100%; height:auto; float:none; position:relative; padding-top:56%; margin:0 auto; padding-bottom:4%;}

#view_box .inner > div h6{ position:absolute; display:block; width:54px; height:54px; text-align:center; line-height:54px;-webkit-border-radius: 27px;
-moz-border-radius: 27px;
border-radius: 27px; background:#005cb9; bottom:10%; right:5%; color:#fff100; font-size:14px;}
}