/* CSS Document */
/*基本*/
html, body {
margin: 0;
padding: 0;
background-image: url(bg.png?t=1751537834506);
}
@media screen and (max-width: 767px) {
html, body {
background-image: url(bg_m.png?t=1751537834506);
background-size: contain;
}
}
/*全BOX版面*/
.WRAPPER { z-index:0; position: relative; display:block; margin: 0 auto; padding:0; overflow:hidden; width:100%; min-width:1220px; text-align:left; font-family:"微軟正黑體","Microsoft JhengHei",Helvetica;}
.WRAPPER img { border:0px; vertical-align:top;}
.WRAPPER a { text-decoration:none; -webkit-tap-highlight-color: transparent}
/*預設清單樣式*/
.Area .list_00 ul {display:inline-block; margin:0; padding:0;}
.Area .list_00 li {list-style:none;float:left;overflow: hidden;}
@media screen and (max-width:767px){
.WRAPPER { padding-bottom:0px; min-width: inherit; min-height:100vh; overflow: hidden;}
.WRAPPER img { width:100%; height:auto;}
}
/*回版頭*/
#gotop { display: none; position:fixed; z-index:201; right:0; padding:14px 6px 3px 10px; font:12px/30px Verdana; text-align:center; color:#fff; cursor:pointer; transition: 0.2s; transform: translateX(200%);
bottom:70px;
bottom: calc(70px + constant(safe-area-inset-bottom)*0.6 );
bottom: calc(70px + env(safe-area-inset-bottom)*0.6 );}
#gotop::before { content: ""; position:absolute; top:9px; left:19px; width: 0; height: 0; border: 4px solid #fff; border-color: transparent transparent #fff; }
#gotop::after { content: ""; z-index:-1; position:absolute; top:50%; left:50%; border-radius:50px 0 0 50px; transform:translate(-50%,-50%); width:44px; height:44px; background-color:rgba(0,0,0,0.8);}
#gotop.cate-open { transform: translateX(0%);}
/*白色*/
#gotop { color:#000; }
#gotop::before { border-color: transparent transparent #000;}
#gotop::after { background-color: rgba(255,255,255,0.95); box-shadow:0 1px 0 rgba(242,242,242,1), 0 0 10px rgba(0,0,0,0.2);}
/*背景*/
.bg_00 { z-index:-2; position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none;}
.bg_01 { z-index:-2; position:absolute; top:0; left:0; width:100%; height:520px; background-repeat:no-repeat; background-position: center top; pointer-events:none;}
.bg_02 { z-index:-2; position:absolute; top:0; left:0; width:100%; height:520px; background-repeat:no-repeat; background-position: center top; pointer-events:none;}
.bg_03 { z-index:-2; position:absolute; top:0; left:0; width:100%; height:520px; background-repeat:no-repeat; background-position: center top; pointer-events:none;}
@media screen and (max-width:767px){
.mbg_01 {z-index:-2;position:absolute;top:0;left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center top;background-size:100%; pointer-events:none;}
.mbg_02 {z-index:-2;position:absolute;top:0;left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center top;background-size:100%; pointer-events:none;}
.mbg_03 {z-index:-2;position:absolute;top:0;left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center top;background-size:100%; pointer-events:none;}
}
/*區塊_all*/
.Area1220 { margin:0 auto; width:1220px;}
.Area960 { margin:0 auto; width:960px;}
.Area { position: relative; margin:0 auto; padding:0; border-radius:0; text-align:center; }
.Area a { display:block; }
.Area .go_bt {
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;}
.Area .go_bt:hover {
-webkit-transform:scale(0.95);
-moz-transform:scale(0.95);
-ms-transform:scale(0.95);
-o-transform:scale(0.95);
transform:scale(0.95);}
.Area .go_bt1 {
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;}
.Area .go_bt1:hover {
-webkit-transform:translateY(-10px);
-moz-transform:translateY(-10px);
-ms-transform:translateY(-10px);
-o-transform:translateY(-10px);
transform:translateY(-10px);}
@media screen and (max-width:767px){
.Area .go_bt:hover {
-webkit-transform:none;
-moz-transform:none;
-ms-transform:none;
-o-transform:none;
transform:none;}
.Area1220 { width:100%;}
.Area960 {margin:0 auto;width: 96%;}
}
/*LOGO*/
.momologo { z-index:2; position: absolute; top: 15px; left:15px;}
.momologo a { display:block; width:140px; height:21px;}
.momologo a svg { width:140px; height:21px; }
.momologo a path { fill:#EA27C2; }
.momologo-pink a path { fill:#EA27C2; }/*LOGO 桃紅色*/
.momologo-white a path { fill:#ffffff; }/*LOGO 白色*/
@media screen and (max-width:767px){
.momologo { display:none;}
}
/*版頭區塊*/
.Area_title {height:645px;}
.Area_title .deco {position:absolute; left: 0;top: 0;width: 100%; z-index: 100;}
.Area_title .title_01 {position:absolute;left: 0;top: 0;}
.Area_title .knowmore { z-index: 999; position: absolute; top:24px; right: 110px;}
.Area_title .knowmore img { width: 100%;}
@media screen and (max-width:767px){
.Area_title {width: 100%; height: 72vw;}
.Area_title .title_01 {position:relative; left: 0;top: 0;width: 100%; display: block;}
.Area_title .knowmore { width: 15%; top:2vw; right: 0;}
}
/*區塊1*/
.Area01{ height: 800px; }
.Areabg{ position: absolute;}
.Area01_bg{ left: 0; top: -231px; }
.Area01 ul{ transform: scale(1.05);}
.Area01_bg{ left: 0; top: -231px; }
@media screen and (max-width:767px){
.Area01{ height: 90vw; }
.Area01_bg{ margin-bottom: -2vw;}
.Area01_txt{ position: relative; top:3vw;}
.Area01_bg{ margin-bottom: 0vw;}
}
/*AD廣告區*/
.Area01 .Area_swiper { margin: 0 auto; padding: 0;}
.Area01 .Area_swiper li{ list-style: none;}
.Area01 .Area_swiper img { -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; width: 100%; height: auto;}
.Area01 .Area_swiper_box { padding-bottom: 0; margin: auto;}
@media screen and (min-width: 768px) {
/*.Area_AD:before { content: ""; position: absolute; top: -8px; left: 0; width: 1220px; height: 168px;}*/
.Area01 .Area_swiper { padding-bottom: 20px; margin-top: 40px;}
.Area01 .Area_swiper img { border-radius: 8px;}
.Area01 .Area_swiper_box { width: 960px;}
/*微調間距*/
.Area01 { margin: 90px auto 50px;}
}
@media screen and (max-width: 767px) {
/*.Area_AD:before { content: ""; position: absolute; top: -2vw; left: 0; width: 100%; height: 40vw;}*/
.Area01 .Area_swiper { width: 96%; margin-top: 3vw; }
.Area01 .Area_swiper img {border-radius: 2vw;}
/*微調間距*/
.Area01 { margin: 12vw auto 10vw; }
.Area01 .swiper-pagination-bullets{ bottom: 4px!important; }
}
/*區塊2-富邦證券介紹*/
.Area02{ height: 900px; }
.Area02 ul{ transform: scale(1.05);}
.Area02 .Area00_btn { z-index: 99; position: absolute; top:235px; right: 185px;}
.Area02 .Area00_btn img { width: 100%;}
.Area02_bg{ left: 0; top: -231px; }
.Area02 .btnWrap{ display: flex; flex-direction: column; position: relative; top:500px;}
.Area02 .Area02_btn{ position: absolute; top:330px; left: 117px; z-index: 50;}
@media screen and (max-width:767px){
.Area02{ height: 90vw;}
.Area02 .Area00_btn { top:23vw; right: 3vw;}
.Area02 .Area00_btn img { width: 55%;}
.Area02_bg{ margin-bottom: -2vw;left: 0; top: -27.5vw; }
.Area02 .btnWrap{ top:61vw; }
.Area02 .Area02_btn{ width: 100%; top:40vw; left: -2vw; }
}
/*coin*/
.Area01Deco{ position: absolute; top: 100px; left: 250px; z-index: 999;}
.Area02Deco{ position: absolute; top: 80px; left: 930px; z-index: 999;}
.Area03Deco{ position: absolute; top: -150px; left: 110px; z-index: 999;}
.Area04Deco{ position: absolute; top: -100px; left: 190px; z-index: 999;}
@media screen and (max-width:767px){
.Area01Deco{ top: 7vw; left:12vw; width: 12vw; z-index: 999;}
.Area02Deco{ top: 7vw; left:82vw; width: 12vw; z-index: 999;}
.Area03Deco{ top: -19vw; left:10vw; width: 12vw; z-index: 999;}
.Area04Deco{ top: -14vw; left:17vw; width: 12vw; z-index: 999;}
}
/*區塊3*/
.Area03{ height:1750px; }
.Area03 ul{ transform: scale(1.05);}
.Area03 .Area00_btn { z-index: 99; position: absolute; top:211px; right: 176px;}
.Area03 .Area00_btn img { width: 100%;}
.Area03_bg{ left: 0; top: -231px; }
.Area03 .btnWrap{ display: flex; flex-direction: column; position: relative; top:625px;}
.Area03 .Area02_btn{ position: absolute; top:410px; left: 0; z-index: 50;}
@media screen and (max-width:767px){
.Area03{ height:180vw;}
.Area03 .Area00_btn { top:20vw; right: 1vw;}
.Area03 .Area00_btn img { width: 55%;}
.Area03_bg{ margin-bottom: -2vw;left: 0; top: -27.5vw; }
.Area03 .btnWrap{ top:61vw; }
.Area03 .Area02_btn{ width: 100%; top:40vw; left: -2vw; }
}
/*折價券共用*/
.Area_Coupon {}
.Area_Coupon .get_all { position: absolute; top:-112px; left:895px;z-index: 999;}
.Area_Coupon .get_all ul { margin: 0; padding: 0; list-style: none;}
@media screen and (max-width:767px){
.Area_Coupon .get_all { position: absolute; top: -5.5%; left: 32.5%; width: 33.8%;}
}
/*券樣式*/
.Area_Coupon .PD_coupon .PD_wrapper{ justify-content: center;}
.Area_Coupon .PD_coupon .PD_slide { background-size: 100%; background-repeat: no-repeat; background-position: center top; background-color: transparent;}
/*css內凹圓.Area_Coupon .PD_coupon .PD_slide { background: radial-gradient(20px at -2.5% 50%, transparent 50%, #fff 50%) center left, radial-gradient(20px at 102.5% 50%, transparent 50%, #fff 50%) center right; background-size: 50% 100%; background-repeat: no-repeat;}*/
.Area_Coupon .PD_coupon .PD p { height: 2.15em; line-height: 2.15em; color: #007ac7; font-size: 1.88em;}
.Area_Coupon .PD_coupon .PD p .Discount { font-size: 2.47em; font-weight: 700; font-family:"Century Gothic", "Microsoft JhengHei", system-ui, Helvetica, Arial; letter-spacing: -0.02em;}
.Area_Coupon .PD_coupon .PD h3 { max-height: 2.5em; line-height: 2.5em; color: #6d6d6d; font-size: 1.5em; font-weight: normal; font-family: "Century Gothic","微軟正黑體","Microsoft JhengHei",Helvetica;}
.Area_Coupon .PD_coupon .PD p small { position: relative; top: -0.075em; font-size: 1.27em; font-weight: 900;}
.Area_Coupon .PD_coupon .PD h5 { margin: 0; color: #414141; font-size: 1em; font-weight: normal; font-style: italic;}
.Area_Coupon .PD_coupon .PD h5 .Deadline { font-family: Microsoft Tai Le,"微軟正黑體","Microsoft JhengHei",Helvetica;}
@media screen and (max-width:767px){
.Area_Coupon .PD_coupon .PD p .Discount { letter-spacing: -0.25vw;}
.Area_Coupon .PD_coupon .PD h3 { max-height: 1.9em; line-height: 1.9em;}
/*h5單行超出隱藏*/
.Area_Coupon .PD_layout .PD h5 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; white-space: normal; overflow: hidden;}
}
/*按鈕*/
.Area_Coupon .PD_layout[data-pd-btn][data-pd-btn-more] .PD_btn.more { background: #f85bbb;}
.Area_Coupon .PD_layout[data-pd-btn][data-pd-btn-more] .PD_btn.more b::after { content: "立即領取";}
.Area_Coupon .PD_layout[data-pd-btn] .PD_btn i { display: none;}
.Area_Coupon .PD_layout[data-pd-btn] .PD_btn span, .PD_layout[data-pd-btn] .PD_btn.more span { -webkit-transform: none; transform: none;}
.Area_Coupon .PD_layout[data-pd-btn][data-pd-btn-more] .PD_btn.more { pointer-events: none;}
.Area_Coupon .PD_layout[data-pd-btn][data-pd-btn-more] .cate-hover .PD a { pointer-events: none;}
.Area_Coupon .PD_layout[data-pd-btn][data-pd-btn-more] .cate-hover .PD_btn.more { background: #333; pointer-events: inherit;}
.Area_Coupon .PD_layout[data-pd-btn][data-pd-btn-more] .cate-hover .PD_btn.more b::after { content: "適用商品";}
/*裝飾圖*/
.Area_Coupon .PD_coupon .PD_slide:after { content: ""; pointer-events: none; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background-position: center top; background-size: 100%; background-repeat: no-repeat;}
/*02全站適用券*/
.Area_Coupon2{height: 685px;}
.Area_Coupon2 .PD_coupon .PD .PD_into:after { content: "-------------------------"; position: absolute; bottom: 5.4em; left: 0; width: 100%; height: 1em; color: #595959; font-weight: 500; letter-spacing: 0.1em;} /*虛線*/
.Area_Coupon2 .PD_layout[data-pd-btn][data-pd-btn-more] .PD_btn.more { bottom: 2.5em; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width:68.75%;}
.Area_Coupon2 .PD_layout .cate-hover:hover{ box-shadow: none; }
@media screen and (min-width:768px){
.coupontitle{ margin-bottom: 3%; margin-top: -9%; }
.Area_Coupon2 { margin-top: 50px; margin-bottom: 38px; }
.Area_Coupon2 .PD_layout ul { padding-left: 57px; padding-right: 57px; margin-top: -20px;}
.Area_Coupon2 .PD_layout ul li { margin-bottom: 16px; margin-left: 18px; width: calc(25% - 18px * 0.75);}
.Area_Coupon2 .PD_layout ul li:nth-child(4n+1) { margin-left: 0;}
.Area_Coupon2 .PD_layout .PD_slide { height: 370px; background-image: url(Coupon2_bg.svg);}
.Area_Coupon2 .PD_coupon .PD_slide:after { background-image:url(PD_coupon2_deco.png?t=1751537834506);}
.Area_Coupon2 .PD_layout .PD_into { padding-top: 3em; padding-bottom: 6.9em;}
}
@media screen and (max-width:767px){
.Area_Coupon2{height: 142vw;}
.coupontitle{ margin-bottom: 0; margin-top: -7%; }
.Area_Coupon2 .PD_layout { font-size: 3.15vw;top: 5vw;}
.Area_Coupon2 .PD_layout ul li { width: 49%; transform: scale(0.95); transform-origin: top; margin-bottom:-5vw;}
.Area_Coupon2 .PD_layout ul li:nth-child(odd) { transform-origin: top right;}
.Area_Coupon2 .PD_layout ul li:nth-child(even) { transform-origin: top left;}
.Area_Coupon2 .PD_layout .PD_slide { height: 57vw; background-image: url(Coupon2_mbg.svg);}
.Area_Coupon2 .PD_coupon .PD_slide:after { background-image:url(PD_coupon2_decoM.png?t=1751537834506);}
.Area_Coupon2 .PD_layout .PD_into { padding-top: 2em; padding-bottom: 6.6em;}
.Area_Coupon2 .PD_coupon .PD .PD_into:after { bottom: 5.5em; transform: scale(0.95);} /*虛線*/
.Area_Coupon2 .PD_coupon .PD h5 { font-size: 0.875em; padding-right: 0.075em;}
.Area_Coupon2 .PD_layout[data-pd-btn][data-pd-btn-more] .PD_btn.more { bottom: 3.6em;}
.Area_Coupon2 .PD_layout[data-pd-btn] .PD_btn b { max-height: 1.9em; line-height: 1.9em; font-size: 1.275em;}
}
/*看更多*/
.Area_Coupon2 .PD_layout-D1_03 ul::before,
.Area_Coupon2 .PD_layout-D1_03 .PD h3 span::before { display: none;}
.Area_Coupon2 .PD_layout-D1_03 li { width: 100%; background-color: #4af784; list-style: none; height: 48px;}
.Area_Coupon2 .PD_layout-D1_03 .PD h3 { color: #000; font-size: 1.5em;}
@media screen and (min-width:768px){
.Area_Coupon2 .PD_layout-D1_03 { margin-top: 20px;}
.Area_Coupon2 .PD_layout-D1_03 a{line-height: 48px;}
.Area_Coupon2 .PD_layout-D1_03 ul { padding: 0 31%;}
}
@media screen and (max-width:767px){
.Area_Coupon2 .PD_layout-D1_03 ul { padding: 0 22%; margin-top: -3vw;}
.Area_Coupon2 .PD_layout-D1_03 { margin-top: 1.5vw;}
.Area_Coupon2 .PD_layout-D1_03 .PD h3 { font-size: 1em;}
.Area_Coupon2 .PD_layout-D1_03 li {height: 9vw;}
.Area_Coupon2 .PD_layout-D1_03 li a {line-height: 9vw;}
}
/*footer*/
.footer { margin:0 auto; padding:0; font-family:"Century Gothic", "微軟正黑體", sans-serif; text-align:left; color:#006931; position: relative; z-index: 100; background-color: #c4de83; padding: 3em 0 0!important;}
.footer img{ width:100%; height:auto;}
.footer .txtArea {text-align: justify; padding-top: 1.5em;}
.footer h3 {margin:0;padding:0 0 0 10px;height:3rem;font-size: 2.25rem;font-weight:800;line-height:3rem; }
.footer p { margin:auto; padding: 0; text-align:center; font-size:1.25em; text-align:left; line-height:1.2em;}
.footer p b { display:block; padding-bottom:0px;}
.footer .qrcodeimg { text-align:center; }
.footer .qrcodeimg a { color:#006afe;}
.footer .qrcodeimg img { width:100%; height:auto;}
.footer .agree_table table { margin:20px auto; border-collapse:collapse; width:90%; text-align:center;}
.footer .agree_table th { padding:5px; border:1px solid #CCC; width:33%; font-size:0.9em; }
.footer .agree_table td { padding:5px; border:1px solid #CCC; font-size:0.9em; }
.footer .agree_table th a{ color:#c70026; text-decoration:underline;}
.footer .xxx{ display:block; width:80%; height:40px; font-size:1.5em; text-align:center; line-height:40px; color:#20447e; background-color:#7048A0; margin:0 auto; margin-bottom:20px; margin-top:10px; font-weight:bold; border-radius:10px;}
.footer ul,
.footer ol { margin:0;}
.footer li {}
.footer li a { color:#FF0;}
.footer table { margin: 0 5%; width:90%; border-collapse:collapse;}
.footer th { padding:5px; border:1px solid #CCC; background:#eee; font-size:0.8em; }
.footer td { padding:5px; border:1px solid #CCC; font-size:0.9em; vertical-align:top; }
.footer table ul,
.footer table ol { padding:0 0 0 20px;}
.footer table li { margin:0 0 10px 0px;}
@media screen and (max-width:767px){
.footer { position: relative; padding: 1em 0 0!important; }
.footer h3 { font-size:1.3rem; height:2rem; padding:0 0 0 6vw;}
.footer ol {margin: 0;padding: 1rem 1em 0.5em 2em;}
}
.footer .txtArea ol li{margin: 0;padding: 0 0 0.75em;font-size: 1.5rem;color: #006931;}
.footer .paragraph { padding: 15px 0 0 28px!important; list-style: upper-alpha;}
@media screen and (max-width:767px){
.footer .txtArea {text-align: justify; padding-top: 0;}
.footer .txtArea ol li{font-size: 0.875rem;}
.footer .paragraph{ padding:2vw 0 0 5vw!important;}
}
/*其他按鈕*/
.Area_elsebtn{ position:relative; padding-top:0px; height:220px;}
.Area_elsebtn .box { width:960px; height:100%; padding: 40px 0;}
.Area_elsebtn a{display: inline-block; transition: all .4s;}
.Area_elsebtn .btn_web{width: 272px; height: 76px;}
.Area_elsebtn .btn_web img{display: block; width: 100%;}
.Area_elsebtn .btn_fb{width: 329px; height: 100px;}
.Area_elsebtn .btn_fb img{display: block; width: 100%;}
.Area_elsebtn .btn_youtube{width: 280px; height: 76px;}
.Area_elsebtn .btn_youtube img{display: block; width: 100%;}
.Area_elsebtn .btn_ig{width: 329px; height: 100px;}
.Area_elsebtn .btn_ig img{display: block; width: 100%;}
@media screen and (max-width:767px){
.Area_elsebtn{ height: 20vw}
.Area_elsebtn .box { width:100%; padding:0; }
.Area_elsebtn .btn_web{width: 40vw; height: 12vw; margin-bottom: 2vw;}
.Area_elsebtn .btn_web img{display: block; width: 100%;}
.Area_elsebtn .btn_fb{width: 47vw; height: 12vw; margin-bottom: 2vw;}
.Area_elsebtn .btn_fb img{display: block; width: 100%;}
.Area_elsebtn .btn_youtube{width: 42vw; height: 12vw;}
.Area_elsebtn .btn_youtube img{display: block; width: 100%;}
.Area_elsebtn .btn_ig{width: 47vw; height: 12vw; margin-bottom: 2vw;}
.Area_elsebtn .btn_ig img{display: block; width: 100%;}
}
/*警語*/
.notice { margin: 20px auto;}
.notice img { width: 100%}
/*固定QRcode*/
.fixQrcode { position:fixed; top:460px; right:10px; z-index:99; }
@media screen and (max-width:767px){
.fixQrcode{ display:none }
}
/*浮層嘿嘿*/
.blackBox_play {}
.blackBox { display:none; z-index:99999; position:fixed; top:0px; left:0px; width:100%; height:100%; background-color: rgba(34,34,34,0.75); text-align: left;}
.blackBox * { font-family:"微軟正黑體", "Microsoft JhengHei", Arial; box-sizing:border-box;}
/*.blackBox a { text-decoration:none;}*/
/*浮層基本*/
.blackBox .box .button { border-top:1px solid #d6d6d6; text-align:center; font-size:1.25rem; line-height:3.5rem; font-weight:bold;}
.blackBox .box .but-close { clear:both; width:100%;}
.blackBox .box .but-close a { display:inline-block; width:100%; height:100%; color:#333;}
.blackBox .box h3 span.close { position:absolute; top:6px; right:5px; display:block; border:2px solid #333; border-radius:5px; width:63px; height:33px; font-size:1rem; line-height:2rem; text-align:center;}
.blackBox .box h3 span.close a { display:inline-block; width:100%; height:100%; color:#333;}
.blackBox .Boxclose { position:absolute; top:0px; left:0px; width:100%; height:100%; background-color: transparent;}
.blackBox .box h4 { margin: 0 auto; margin-top: 1rem; margin-bottom: 5px; padding: 0 7%; width: 100%; font-size: 1.15em;}
@media screen and (min-width:768px){
.blackBox .box h4 { padding: 0 3.5%;}
}
/*IT用*/
.blackBox_IT { display:block; z-index:inherit; position:static; width:auto; height:auto; background: none;}
/*通知浮層*/
.agreeArea { z-index:1; position:relative; top:5%; margin:0 auto 30px; width:94%; max-width:700px; font-family:"Century Gothic", "微軟正黑體", sans-serif; /*text-align:justify; word-break:break-all;*/}
.agreeArea a { text-decoration: none;}
.agreeArea img{ width:90%; height:auto;}
.agreeArea .box { border-radius:10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); background-color:#fff; overflow:hidden;}
.agreeArea .box .txtArea { height:600px; overflow:auto; overflow-y:auto; -webkit-overflow-scrolling:touch;}
.agreeArea .box h3 { margin:0; padding:0; height:3rem; font-size:1.25rem; font-weight:800;line-height:3rem; text-align:center; color:#000; background-color:#ffd710;}
.agreeArea .box p { margin:10px auto; margin-top:1rem; padding:0 0 0 24px; font-size:1em; text-align:left; line-height:1.2em; color:#000;}
.agreeArea .box p b { display:block; padding-bottom:0px;}
.agreeArea .box p span { }
.agreeArea .box .qrcodeimg { text-align:center; }
.agreeArea .box .qrcodeimg a { color:#006afe;}
.agreeArea .box .qrcodeimg img { width:100%; height:auto;}
.agreeArea .box .agree_table table { margin:20px auto; border-collapse:collapse; width:90%; text-align:center;}
.agreeArea .box .agree_table th { padding:5px; border:1px solid #CCC; width:33%; font-size:0.9em; }
.agreeArea .box .agree_table td { padding:5px; border:1px solid #CCC; font-size:0.9em; }
.agreeArea .box .agree_table th a{ color:#c70026; text-decoration:underline;}
.agreeArea .box .xxx{ display:block; width:80%; height:40px; font-size:1.5em; text-align:center; line-height:40px; color:#FFF; background-color:#7048A0; margin:0 auto; margin-bottom:20px; margin-top:10px; font-weight:bold; border-radius:10px;}
.agreeArea .box ul,
.agreeArea .box ol { margin:0; padding: revert;}
.agreeArea .box li { margin:0 20px 10px 0px; font-size:0.9em;}
.agreeArea .box ol > ul li { margin-left: -2em;}
.agreeArea .box table { margin: 0; width:100%; border-collapse:collapse;text-align: center;}
.agreeArea .box th { padding:5px; border:1px solid #CCC; background:#eee; font-size:0.9em; width: 100px;}
.agreeArea .box td { padding: 5px; border: 1px solid #CCC; font-size: 1em; vertical-align: center; }
.agreeArea .box table ul,
.agreeArea .box table ol { padding:0 0 0 20px;}
.agreeArea .box table li { margin:0 0 10px 0px;}
/*浮層輪播*/
.agreeArea .box_pic { padding:5% 5% 0; overflow: hidden; -webkit-box-sizing:border-box; box-sizing:border-box; }
.agreeArea .box_pic .pic_swiper {}
.agreeArea .box_pic .pic_swiper ul { margin:0; padding:0; list-style:none;}
.agreeArea .box_pic .pic_swiper li { margin:0; padding:0;}
.agreeArea .box_pic .pic_swiper li.cate-active {}
/*商品大圖*/
.agreeArea .box_pic .box_picimg { position:relative; overflow:hidden;}
.agreeArea .box_pic .box_picimg .pagination { padding:0 10px; text-align:right; -webkit-transform-origin:bottom right; transform-origin:bottom right; -webkit-transform: translateZ(0) scale(0.8); transform: translateZ(0) scale(0.8);}
.agreeArea .box_pic .box_picimg .pagination span { display: inline-block; padding: 0 10px; border-radius: 50px; background-color: rgba(255,255,255,0.7);}
/*商品列表*/
.agreeArea .box_pic .box_piclist { padding-top:2%;}
.agreeArea .box_pic .box_piclist li { background-color:#000; cursor: pointer;}
.agreeArea .box_pic .box_piclist li img { opacity:0.75;}
.agreeArea .box_pic .box_piclist li.cate-active img { opacity:1;}
/*樣式--圖片放大*/
.agree_piczoom { }
.agree_piczoom .Boxclose { cursor: pointer;}
.agree_piczoom .agreeArea { pointer-events: none; }
.agree_piczoom .box { position: relative; top: -8vh; overflow: visible; box-shadow: none; background: none;}
.agree_piczoom .box img { width: 100%; height: auto; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);}
/*關閉btn*/
.agree_piczoom .box .but-close { position: fixed; top:10px; right:10px; width: auto;}
.agree_piczoom .box .but-close a { display: block;}
.agree_piczoom .box .but-close a i { display: inline-block; position:relative; top:3px; left:0; width:44px; height:44px;}
.agree_piczoom .box .but-close a i { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); -webkit-transform-origin:50% 50%; transform-origin:50% 50%; }
.agree_piczoom .box .but-close a i::before,
.agree_piczoom .box .but-close a i::after { content: ""; position:absolute; top:50%; left:0; width:100%; height:6%; background-color:rgba(255,255,255,1);}
.agree_piczoom .box .but-close a i::before { transform: rotate(45deg);}
.agree_piczoom .box .but-close a i::after { transform: rotate(135deg);}
@media screen and (max-width:767px){
.agreeArea .box th { width: 16vw;}
}
/*隱鑶*/
.for_pc {}
.for_phone { display:none !important;}
@media screen and (max-width:767px){
.for_pc { display:none !important;}
.for_phone { display: inherit !important;}
}
/*hammer拖移套件*/
.Area_hammerAD {
z-index: 300;
display: none;
position: fixed;
bottom: 0;
right: 0;
transform: translate3d(0, 200px, 0)
}
.Area_hammerAD .box {
position: relative;
margin-right: 10px;
opacity: 1
}
.Area_hammerAD img {
width: 100%;
height: auto
}
.Area_hammerAD .closeButton a {
display: block;
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
font: bold 20px/1em "Century Gothic";
color: #fff;
text-align: center;
background-color: rgba(0,0,0,.5);
text-decoration: none;
z-index: 2
}
@media screen and (min-width: 768px) {
.Area_hammerAD {
display:block;
width: 90px
}
.Area_hammerAD .closeButton a {
top: 0;
right: 0
}
}
@media screen and (max-width: 767px) {
.Area_hammerAD {
display:block;
width: 22%
}
.Area_hammerAD .closeButton a {
top: 1vw;
right: 1vw
}
}