/*基本*/ body{margin:0;padding:0;} .btn_alert_danji { top: 6%!important;; } /*全BOX版面*/ .WRAPPER {z-index:0;position: relative;display:block;margin: 0 auto;padding:0;width:100%;min-width:1220px;text-align:left;font-family:"微軟正黑體","Microsoft JhengHei",Helvetica;padding-bottom: 30px;overflow: hidden;background-color: #0c1d54;} .WRAPPER img { border:0px; vertical-align:top;} .WRAPPER a { text-decoration: none;} /*預設清單樣式*/ .Area .list_00 ul {display:inline-block;} .Area .list_00 li {list-style:none;float:left;overflow: hidden;} @media screen and (max-width:767px){ .WRAPPER {margin-bottom: 0;min-width: inherit;min-height: 100vh;overflow: hidden;background-size: 100%;padding-bottom: 40vw;} .WRAPPER img { width:100%; height:auto; } } /** 入稿區基本 **/ .content_Area { position:relative; display:inline-block; margin:0px auto 0px auto; padding: 0px 0px 0px 0px; width:1220px;} .buttonAera_more { position: absolute; top:15px; right:15px; padding-left:17px; padding-right:10px; border-radius:60px; width:90px; height:40px; background-color: #666; text-align:center;} .buttonAera_more a { display:block; padding-top:5px; font: bold 24px/29px Century Gothic; color:#fff; text-decoration: none; letter-spacing:-0.05em; } .buttonAera_more:hover {background-color: #000;} .buttonAera_more .btnGO { margin:5px; float:right; width:20px ;height:20px;} /*PC背景*/ @media screen and (min-width:768px){ .bg_fix {z-index: -65;position:absolute;top: 0;left:0;width:100%;height: 100%;background-repeat:no-repeat;background-position: center top;pointer-events:none;} .top_deco {z-index: 30;position:absolute;top: 0;left:-12px;width:100%;height: 100%;background-repeat:no-repeat;background-position: center top;pointer-events:none; mix-blend-mode: screen; } .bg_deco {z-index: -30;position:absolute;top: 1120px;left: 0;width:100%;height: 95%;background-repeat:repeat-y;background-position: center top;pointer-events:none;} .bg_repeat {z-index: -70;position:fixed;top: 0;left: 0;width:100%;height: 100%;background-repeat:repeat-y;background-position: center top;pointer-events:none;} .bg_bottom {z-index: -60;position:absolute;bottom: 0;left:0;width:100%;height: 100%;background-repeat:no-repeat;background-position: center bottom;pointer-events:none;} } @media screen and (max-width:767px){ .m_bg_fix {z-index:-8;position:absolute;top: 11vw;left:0;width:100%;height:100%;background-repeat:no-repeat;background-position: center top;pointer-events:none;background-size: 100%;} .m_top_deco {z-index:15;position:absolute;top: 18vw;left:33.5vw;width:60%;height:100%;background-repeat:no-repeat;background-position: center top;pointer-events:none;background-size: 100%; mix-blend-mode: screen;} .m_bg02 {z-index:-50;position:absolute;top: 125vw;left:0;width:100%;height:100%;background-repeat:no-repeat;background-position: center top;pointer-events:none;background-size: 100%;} .m_bg_repeat {z-index:-55;position:absolute;top: 0;left:0;width:100%;height: 100%;background-repeat:repeat-y;background-position: center top;pointer-events:none;background-size: 100%;} .m_bg_bottom {z-index:-10;position:absolute;bottom: 0;left:0;width:100%;height:100%;background-repeat:no-repeat;background-position: center bottom;pointer-events:none;background-size: 100%;} } /*活動紀錄*/ .fixedfooterArea { z-index: 20; position: absolute; left: 0; margin: 0; padding: 0; width: 100%; height: 62px; text-align: center; font-size: 14px; line-height: 34px; color: #000; font-family: "微軟正黑體","Microsoft JhengHei",Arial; background-color: rgba(0,0,0,0); bottom: calc(130px + env(safe-area-inset-bottom)*.6); top: 505px;} .fixedfooterArea a { display: block; color: #454545; text-decoration: none;} .fixedfooterArea img {width: 100%; height: auto;} .fixedfooterArea .footerArea { display: none !important;} .fixedfooterArea .fixedBox_1 { z-index: 1; position: absolute; top: 0; left: 0; width: 100%; text-align: center; animation: fixedBox_1-play 1s 1;} .fixedfooterArea .fixedBox_1 ul { position: relative; margin: 0; padding: 0; width: 100%; list-style: none outside none; white-space: nowrap;} .fixedfooterArea .fixedBox_1 ul li { z-index: 1; position: relative; display: inline-block; padding: 0; border-radius: 44px; height: 60px; box-shadow: 0 1px 0 #f2f2f2,0 0 10px rgba(0,0,0,.2); background-color: rgba(255,255,255,.95);} .fixedfooterArea .fixedBox_1 ul li a { display: flex; align-items: center; padding: 10px 24px; font-size: 1.75rem; font-weight: bold;} .fixedfooterArea .fixedBox_1 ul li a span { width: 40px; height: 40px; background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2034%2034%22%20style%3D%22enable-background%3Anew%200%200%2034%2034%3B%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cg%3E%20%3Cg%3E%20%3Crect%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3Anone%3B%22%20width%3D%2234%22%20height%3D%2234%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Cg%3E%20%3Cpath%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%23000%3B%22%20d%3D%22M29.3%2C11.9c0.4-0.6%2C0.5-1.3%2C0.3-1.9c-0.2-0.6-0.6-1.2-1.3-1.5l-3.7-2c-0.6-0.3-1.4-0.4-2.1-0.2%20c-0.7%2C0.2-1.3%2C0.6-1.6%2C1.2l-0.5%2C0.8l-1.8%2C2.8L14%2C18.3l-0.5%2C0.8l-0.6%2C8.2h-8v1.7h19.4v-1.7h-8.6l6.2-3.8%20C24.4%2C19.6%2C26.9%2C15.7%2C29.3%2C11.9z%20M22.6%2C8.3C22.7%2C8.2%2C22.8%2C8%2C23%2C8c0.2%2C0%2C0.4%2C0%2C0.6%2C0.1l3.7%2C2c0.2%2C0.1%2C0.3%2C0.3%2C0.4%2C0.4%20c0.1%2C0.2%2C0%2C0.4-0.1%2C0.5l-0.5%2C0.8L22%2C9.2L22.6%2C8.3z%20M20.9%2C10.9l1.1%2C0.6l-4.3%2C6.8l-1.1-0.6L20.9%2C10.9z%20M17.2%2C24.2l-2.1-1.1l0.3-3.7%20c0.8%2C0.3%2C1.6%2C0.9%2C2.3%2C1.8c1.2%2C0%2C2.3%2C0.2%2C3.1%2C0.8L17.2%2C24.2z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E);top: -1px;} @media screen and (max-width:767px){ .fixedfooterArea {z-index: 100;position: fixed;left: 0;margin: 0;padding: 0;width: 100%;height: 82px;text-align: center;font-size: 14px;line-height: 34px;color: #000;font-family: "微軟正黑體","Microsoft JhengHei",Arial;background-color: rgba(0,0,0,0);bottom: calc(130px + env(safe-area-inset-bottom)*.6);top:83vh;} .fixedfooterArea a {display: block;color: #454545;text-decoration: none} .fixedfooterArea img {width: 100%;height: auto} .fixedfooterArea .footerArea {display: none !important} .fixedfooterArea .fixedBox_1 {z-index: 1;position: absolute;top: 0px;left: 0;width: 100%;text-align: center;animation: fixedBox_1-play 1s 1} .fixedfooterArea .fixedBox_1 ul {position: relative;margin: 0;padding: 0;width: 100%;list-style: none outside none;white-space: nowrap} .fixedfooterArea .fixedBox_1 ul li {z-index: 1;position: relative;display: inline-block;padding: 0;border-radius: 44px;height: 34px;box-shadow: 0 1px 0 #f2f2f2,0 0 10px rgba(0,0,0,.2);background-color: rgba(255,255,255,.95)} .fixedfooterArea .fixedBox_1 ul li a {display: flex;align-items: center;padding: 0 24px 0 20px;font-size: 1rem;font-weight: 800;} .fixedfooterArea .fixedBox_1 ul li a span {width: 24px;height: 24px;background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2034%2034%22%20style%3D%22enable-background%3Anew%200%200%2034%2034%3B%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cg%3E%20%3Cg%3E%20%3Crect%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3Anone%3B%22%20width%3D%2234%22%20height%3D%2234%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Cg%3E%20%3Cpath%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%23000%3B%22%20d%3D%22M29.3%2C11.9c0.4-0.6%2C0.5-1.3%2C0.3-1.9c-0.2-0.6-0.6-1.2-1.3-1.5l-3.7-2c-0.6-0.3-1.4-0.4-2.1-0.2%20c-0.7%2C0.2-1.3%2C0.6-1.6%2C1.2l-0.5%2C0.8l-1.8%2C2.8L14%2C18.3l-0.5%2C0.8l-0.6%2C8.2h-8v1.7h19.4v-1.7h-8.6l6.2-3.8%20C24.4%2C19.6%2C26.9%2C15.7%2C29.3%2C11.9z%20M22.6%2C8.3C22.7%2C8.2%2C22.8%2C8%2C23%2C8c0.2%2C0%2C0.4%2C0%2C0.6%2C0.1l3.7%2C2c0.2%2C0.1%2C0.3%2C0.3%2C0.4%2C0.4%20c0.1%2C0.2%2C0%2C0.4-0.1%2C0.5l-0.5%2C0.8L22%2C9.2L22.6%2C8.3z%20M20.9%2C10.9l1.1%2C0.6l-4.3%2C6.8l-1.1-0.6L20.9%2C10.9z%20M17.2%2C24.2l-2.1-1.1l0.3-3.7%20c0.8%2C0.3%2C1.6%2C0.9%2C2.3%2C1.8c1.2%2C0%2C2.3%2C0.2%2C3.1%2C0.8L17.2%2C24.2z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E);top: 0px;} } /*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;} } .PD_layout-btn li .PD h3{background-color: #a18e6b!important;} /*間距*/ @media screen and (min-width:768px){ .Area_bottom {margin-bottom: 14px!important;} .Area_bottom2 {margin-bottom: 40px!important;} } @media screen and (max-width:767px){ .Area_bottom {margin-bottom: 5vw!important;} .Area_bottom2 {margin-bottom: 5vw!important;} } /*版頭區塊*/ .Area_title img{ width: 100%; } @media screen and (min-width:768px){ .Area_title {height:435px;z-index: 20;} .top_deco01 {position: absolute;top: 326px;left: 813px;z-index: 2;width: 11%;pointer-events: none;} .title_deco {position: absolute;top: 108px;left: 880px;z-index: 10;width: 5.3%;pointer-events: none;} .title_light {position: absolute;top:110px;left:290px;z-index: 99!important;width:52%;height: 50%;} } @media screen and (max-width:767px){ .Area_title {height:50vw;} .top_deco01 {position: absolute;top: 37vw;left: 65vw;z-index: 10;width: 16%;} .title_deco {position: absolute;top: 11.5vw;left: 78.3vw;z-index: 15;width: 7%;pointer-events: none;} .title_light {position: absolute;top: 9vw;left: 12vw;z-index: 99!important;width: 78vw;height: 25vw;} } /*版頭主標微調*/ .Area_title img{width: 100%;border-radius: 0!important;} .Area_title .PD_layout .PD_slide { min-width:auto; } .Area_title .PD_layout ul{ background-color: #0000; } .Area_title .PD_layout li { border:none; } @media screen and (min-width: 768px){ .title .PD_layout li:nth-of-type(1) {position: absolute;top: 75px;left: 171px;z-index: 10;width: 72%;} .title .PD_layout li:nth-of-type(2) {position: absolute;top: 54px;left: 957px;z-index: 10;width: 9%;} .title .PD_layout .PD img { width: 100%!important; } } @media screen and (min-width: 768px){ .Area_AD{max-height:320px;} } @media screen and (min-width: 768px){ .Area_BN{width: 960px; margin:1% auto!important;} .Area_BN .PD_layout ul{display: flex ; flex-direction: row; flex-wrap: nowrap; justify-content: center; padding: 0 320px!important;} } @media screen and (max-width:767px){ .Area_BN{width:100%; margin:5% auto!important;} .Area_BN .PD_layout ul{display: flex ; flex-direction: row; flex-wrap: nowrap; justify-content: center; padding: 0 34vw!important;} } @media screen and (min-width: 768px){ .title .PD_layout li:nth-of-type(3) {position: absolute;top: 46px; right: 169px; z-index: 30; width: 96px;} } @media screen and (max-width:767px){ .title {position: relative;top: 8vw;} .title .PD_layout li:nth-of-type(1) {position: absolute;top: 0;left: 0;z-index: 10;width:100%;} .title .PD_layout li:nth-of-type(2) {position: absolute;top: 2vw; right: 0; z-index: 30; width: 13%;} .title .PD_layout .PD img { width: 100%!important; } } /*活動倒數*/ .TimerNick {position: absolute;padding: 0 0 0;top: 630px;left: 440px;display: inline-block;z-index:8;text-align: center;} .TimerNick .FontStyle {display: inline-block;margin: 0 0 0 5px;padding: 0;border: 0;font: normal 35px/30px Arial;color: #fff;letter-spacing: 2px;text-align: center;} .TimerNick span {padding-left: 2px;font: normal 25px/30px "Century Gothic","Microsoft JhengHei", Arial, Helvetica;font-weight: 400;letter-spacing: -0.05em;color: #fff;} @media screen and (max-width:767px){ .TimerNick {width: 59%;top: 70vw;left: 20vw;padding: 2vw 0 1vw;display: flow;margin-bottom: 1vw;} .TimerNick .FontStyle {margin: 0;padding: 0;border: 0;font: 5vw/4vw Arial;} .TimerNick span {padding-left: 0vw;font: 3.6vw/4vw "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: -0.05em;} } /*活動倒數2*/ .TimerNick2 {padding: 0 0 0; display: inline-block;z-index:8;text-align: center; margin-bottom: 20px;} .TimerNick2 .FontStyle {display: inline-block;margin: 0 0 0 5px;padding: 0;border: 0;font: normal 35px/30px Arial;color: #feedd0;letter-spacing: 2px;text-align: center;} .TimerNick2 span {padding-left: 2px;font: normal 25px/30px "Century Gothic","Microsoft JhengHei", Arial, Helvetica;font-weight: 400;letter-spacing: -0.05em;color: #feedd0;} @media screen and (max-width:767px){ .TimerNick2 {width: 100%;display: flow;margin-bottom: 3vw;} .TimerNick2 .FontStyle {margin: 0;padding: 0;border: 0;font: 5vw/4vw Arial;} .TimerNick2 span {padding-left: 0vw;font: 3.6vw/4vw "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: -0.05em;} } /*公版背景*/ .box_txt ul,.box_txt2 ul,.box_txt3 ul,.box_txt4 ul{ padding: 0; } @media screen and (min-width: 768px){ .box_txt {position: relative;display: flex;margin: 0 auto;width: 100%;height: auto;justify-content: center;} .box_txt img{width: 88%!important;padding: 0;} .box_txt .PD_layout .PD h3 {color: #fff7ff;font-size: 3.2em;font-family: "Century Gothic";letter-spacing: -1px;} .box_txtbg::after {content:"";position: absolute;display:block;top: -30px;left: 50px;width: 90%;height: 110%;pointer-events:none;z-index: 10;background: url("box_txtbg.png?t=1756952260367") center top/100% no-repeat scroll;} } @media screen and (max-width:767px){ .box_txt {position: relative;margin: 0 auto;width: 100%;height: auto;z-index: 30;} .box_txt img{width: 100%;} .box_txt .PD_layout .PD h3 {color: #fff;font-size: 1.5em;letter-spacing: -2px;line-height: 11vw;font-family: "Century Gothic","微軟正黑體";max-height: 9vw;font-weight: bold;} .box_txtbg::after {content:"";position: absolute;display:block;top: 0;left: 0;width: 100%;height: 100%;pointer-events:none;z-index: -1;background: url("box_txtbg.png?t=1756952260367") center top/100% no-repeat scroll;} } /*公式*/ .Area00 .PD_layout {font-family: "Century Gothic","Noto Sans TC","sans-serif";} .Area00 .PD_layout ul {padding: 0;align-items: center; background-color: transparent;} .Area00 .PD_layout ul li{border: none;} .Area00 .PD_layout ul li .PD_into{ align-items: center;} .Area00 .PD_layout ul li h3{position: absolute;bottom:0} .Area00 .PD_layout ul li:nth-child(1) h3{display: none;} .Area00 .PD_layout ul li:not(:nth-child(1))::before { display: block; float: left; color: #a9936c; font-weight: bolder; font-family: "Century Gothic" } /* .Area00{ background: url(area00_bg.png?t=1756952260367) no-repeat center / 100% 95%; } */ .a00_bg{ position: absolute; top: -13px; left: 4px; transform: scaleY(.95); } @media screen and (min-width: 768px){ .Area00 .PD_layout .PD p{height:6.5em;} .Area00 .PD_layout .PD p small{font-size: 40px;} .Area00 .PD_layout .PD p .Price{font-size: 70px;line-height: 70px;font-family: "Century Gothic";font-style: italic;} .Area00 .PD_layout li:nth-child(1) h4 {color: #1a2864;line-height: 43px;margin: 0;padding: 0;} .Area00 .PD_layout li:nth-child(1) p .js-PD_unit{color: #1a2864;} .Area00 .PD_layout li:nth-child(1) .Price {font-size:100px;position: relative;top:9%;background:linear-gradient(45deg, #4e65a2, #16346f, #5182e2) ;background-clip: text !important;color: transparent;} .Area00 .PD_layout .PD h4{font-size: 35px;margin: 0;color: #494949;} .Area00 .PD_layout .PD h4 span, .Area00 .PD_layout .PD h4 b{line-height: 1.3em;height: 40px;font-weight: 600;} .Area00 .PD_layout .PD p{background:linear-gradient(45deg, #4e65a2, #16346f, #5182e2) ;background-clip: text !important;color: transparent;} .Area00 .PD_layout .PD h3 span{ font-size: 20px;} .Area00 .PD_layout[data-pd-h3="2"] .PD h3, .Area00 .PD_layout .PD h3 span{background-color:#837b73 !important;} .Area00 .PD_layout .PD h3 span::after{content: "";display: block;border-width: 0.45em 0 0.45em 0.7em;border-style: solid;border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #ffeac5;float: right;margin-top: 0.3em;margin-right: 0em;margin-left: 0.3em;} .Area00 .PD_layout ul li:nth-child(2)::before {content: "=";position: absolute;top: 45%;left: -6%;} .Area00 .PD_layout ul li:nth-child(3)::before, .Area00 .PD_layout ul li:nth-child(4)::before, .Area00 .PD_layout ul li:nth-child(5)::before {content: "+";position: absolute;top: 45%;left: -6%;} } @media screen and (max-width: 767px){ .a00_bg{ top: 1vw; left: 0; } .Area00 {z-index: 5;} .Area00 .PD_layout ul{border-radius: 2vw;padding:3% 0 1%; margin: 0; width: 100%;} .Area00 .PD_layout .PD p{height:3em;} .Area00 .PD_layout li:nth-child(1) h4 {color: #1a2864;line-height:0;margin: 0;padding: 0;} .Area00 .PD_layout li:nth-child(1) p .js-PD_unit{color: #1a2864;} .Area00 .PD_layout li:nth-child(1) .Price {font-size:9vw;position: relative;top:9%;font-family: "Century Gothic";background:linear-gradient(45deg, #4e65a2, #16346f, #5182e2) ;background-clip: text !important;color: transparent;} .Area00 .PD_layout li .Price {font-family: "Century Gothic"!important;font-size:2.4em!important;letter-spacing: -0.05em!important;} .Area00 .PD_layout .PD h4{font-size:4vw;margin: 0;color: #494949;} .Area00 .PD_layout .PD h4 span, .Area00 .PD_layout .PD h4 b{line-height: 1.3em;height:5vw;font-weight: 600;} .Area00 .PD_layout .PD p{color: #494949;} .Area00 .PD_layout .PD h3 span{ font-size:2.8vw;} .Area00 .PD_layout .PD h3{font-size: 2.2vw;} .Area00 .PD_layout .PD p small{font-size: 20px; } .Area00 .PD_layout[data-pd-h3="2"] .PD h3, .Area00 .PD_layout .PD h3 span{background-color:#837b73 !important;} .Area00 .PD_layout .PD h3 span::after{content: "";display: block;border-width: 0.45em 0 0.45em 0.7em;border-style: solid;border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #ffeac5;float: right;margin-top: 0.3em;margin-right: 0em;margin-left: 0.3em;} .Area00 .PD_layout ul li:nth-child(2)::before {content: "=";position: absolute;top: 45%;left: -6%;font-size: 1.7em;} .Area00 .PD_layout ul li:nth-child(3)::before, .Area00 .PD_layout ul li:nth-child(4)::before, .Area00 .PD_layout ul li:nth-child(5)::before {content: "+";position: absolute;top: 45%;left: -6%;font-size: 1.7em;} } /*輪播BN*/ .Area_AD {overflow: hidden;margin:2% auto!important; } .Area_AD .PD_layout ul{display: flex; max-height: 320px;grid-gap: 0!important; padding: 0!important; margin: 0!important; } @media screen and (max-width: 767px){ .Area_AD{ width: 96%!important; } .Area_AD .PD_layout ul{ max-height: 35vw; } } @media screen and (min-width: 768px){ .Area_brand .memo h4{color: #fff;font-size:36px;width: 960px;} } @media screen and (max-width: 767px){ .Area_brand .memo h4{color: #fff;font-size: 3.5vw;width: 100%;margin: 0 auto;text-align: center;margin:2% auto;} .Area_brand .box .PD_layout {width: 95%; margin: 0 auto;} } /*商品公版*/ .Area05 .box .PD_layout.box_style ul{background-color: #fff!important;border-radius: 20px;} @media screen and (max-width: 767px){ .Area05 .box .PD_layout{ padding: 0 2vw; } .Area05 .PD_layout-btn{ margin-top: 4vw; margin-bottom: 24vw; } } /*區塊2*/ .Area02_bg02 {z-index: -40;position:absolute;top: 0;width:100%;height: 100%;background-repeat:no-repeat;background-position: center top;pointer-events:none;} .Area02_tag {position: absolute;top: 390px;left: 945px;z-index: 10;} .Area02_tag img{width: 130%;} .Area02 .box02 { position: relative;} .Area02 .box02 .PD_layout ul{padding: 2% 17% 3%;grid-gap: 38px;} .Area02 .box03 .PD_layout li img { width: 30%;} @media screen and (min-width: 768px){ .Area02{ margin-top: 11vw; } .Area02 .box01{ width: 90%; margin: auto; } } @media screen and (max-width: 767px){ .m_Area02_deco {z-index: -1;position:absolute;top: -20vw;width:100%;height: 100%;background-repeat:no-repeat;background-position: center top;pointer-events:none;background-size: 100%;} .Area02_bg02 {z-index: -1;position:absolute;top: 0;width:100%;height: 100%;background-repeat:no-repeat;background-position: center top;pointer-events:none;background-size: 100%;} .Area02_tag {position: absolute;top: 39vw;left: 70vw;right: -1vw;z-index: 10;} .Area02_tag img{width: 50%;} .Area02 .box02 .PD_layout ul{padding: 3% 6% 0%;grid-gap: 4vw;} .Area02 .box03 .PD_layout li img {width: 32%;} } /*區塊3*/ .Area03 .danji-pd-container{ overflow: visible; margin-top: 15%;} .Area03 #B01{ margin-top: 10%; } .Area03 .danji-pd-head{ border-radius: 8px 8px 0 0; color: #ffdfa5; } .Area03 .danji-pd-head2{ background-color:transparent; width: 90%; position: absolute; top: -9vw; left: 5%; z-index: -1; line-height: 1.5em; color: #c23f17;} .Area03 .danji-pd-body .pd-info-brand{ margin-left: 0; } .Area03 .danji-pd-foot ul{ list-style: none; padding: 0 0 2% 0; margin: auto;} .Area03 .danji-pd-foot ul:first-child{ padding-top: 2%; } @media screen and (min-width: 768px){ .Area03 {z-index: 35;height: auto;margin-top: 184px!important;margin-bottom:315px!important;} .Area03_top {z-index: -40;position:absolute;top: -220px;width:100%;height: 100%;background-repeat:no-repeat;background-position: center top;pointer-events:none;} .Area03_repeat {z-index: -45;position:absolute;top: 0;width:100%;height: 105%;background-repeat:repeat-y;background-position: center top;pointer-events:none;} .Area03_end {z-index: -40;position:absolute;bottom: -410px;width:100%;height: 100%;background-repeat:no-repeat;background-position: center bottom;pointer-events:none;} .Area03 .box{position: relative;top: -100px;height:2930px;} .Area03 .danji-pd-container{ overflow: visible; margin-top: 10%;} .Area03 .danji-pd-head2{ top: -76px; } .Area03 .txt_box h4{color: #9a6a1c;font-size:36px;width: 960px;} } @media screen and (max-width: 767px){ .Area03{ margin-top: 35vw!important; } .Area03_bg02 {z-index: 35;height: auto;margin-top: 45vw!important;margin-bottom: -13vw!important;} .m_Area03_top {z-index: -1;position:absolute;top: -41vw;width:100%;height: 100%;background-repeat:no-repeat;background-position: center top;pointer-events:none;background-size: 100%;} .m_Area03_repeat {z-index: -1;position:absolute;top: 0;width:100%;height: 93%;background-repeat:repeat-y;background-position: center top;pointer-events:none;background-size: 100%;} .m_Area03_end {z-index: -1;position:absolute;bottom: 0vw;width:100%;height: 100%;background-repeat:no-repeat;background-position: center bottom;pointer-events:none;background-size: 100%;} .Area03 .box{position: relative;top: -25vw;height: auto;} .Area03 .txt_box h4{color: #9a6a1c;font-size: 3.5vw;width: 100%;margin: 0 auto;text-align: center;} } /*註解補丁*/ .notice_bold { color: #9d7528; font-weight: 600;} .notice_txt { list-style: none !important;} /*區塊4*/ .Area04 {} .Area04 .PD_layout {} @media screen and (max-width: 767px){ .Area04 {position: fixed !important;bottom: -9vw;z-index: 99;} .Area04 .PD_layout[data-pd-li=BN] ul, .PD_layout[data-pd-li=BN-AWD] ul, .PD_layout[data-pd-li=PDBN] ul { padding: 0!important; } } /*區塊_all*/ .Area1220 {position: relative;margin:0 auto;width:1220px;} .Area960 { margin:0 auto; width:960px;} .Area {position: relative;margin:0 auto;border-radius:0;text-align:center;} /*注意事項區*/ .edm_notice{ text-align:center; padding:10px 10px 15px 10px; color:#fff; font:12px/18px Helvetica;} .edm_notice .apple_notice{ padding:10px 0px 10px 0px; } .Area a { position:relative; 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);} @media screen and (max-width:767px){ .Area1220 { width:100%;} .Area960 { width:100%;} .Area .go_bt:hover { -webkit-transform:none; -moz-transform:none; -ms-transform:none; -o-transform:none; transform:none;} } /*隱鑶*/ .for_pc {} .for_phone { display:none !important;} @media screen and (max-width:767px){ .for_pc { display:none !important;} .for_phone { display: inherit !important;} } /*閃光*/ .lightSweep { position: absolute; bottom: 0; right: 0; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); overflow: hidden; z-index: 30; pointer-events: none; -webkit-filter: brightness(1.5); -webkit-mask-size: 300% 200%; -webkit-mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%); -webkit-transition: -webkit-mask-position; -webkit-animation-timing-function: linear; -webkit-transform: translate3d(0, 0, 0); -moz-filter: brightness(1.5); -moz-mask-size: 300% 200%; -moz-mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%); -moz-transition: -webkit-mask-position; -moz-animation-timing-function: linear; -moz-transform: translate3d(0, 0, 0); -o-filter: brightness(1.5); -o-mask-size: 300% 200%; -o-mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%); -o-transition: -webkit-mask-position; -o-animation-timing-function: linear; -o-transform: translate3d(0, 0, 0); filter: brightness(1.5); mask-size: 300% 200%; mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%); transition: -webkit-mask-position; animation-timing-function: linear; transform: translate3d(0, 0, 0); transition-duration: 3s; animation: move 2s ease-out infinite; } @keyframes move { from { -webkit-mask-position: 150% 0px; -moz-mask-position: 150% 0px; -o-mask-position: 150% 0px; mask-position: 150% 0px; } to { -webkit-mask-position: 0% 0px; -moz-mask-position: 0% 0px; -o-mask-position: 0% 0px; mask-position: 0% 0px; } } .Area00 .PD_layout[data-pd-col-phone="4"] ul {grid-template-columns: repeat(4, minmax(0, 1fr));display: grid;align-content: center;justify-content: start;width: 100%;} .Area00 .PD_layout .PD_slide{min-width: initial !important;}