/* 縮小失敗。正在傳回未縮小的內容。 (209,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (210,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (211,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (212,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (213,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (214,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (215,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (216,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (217,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (218,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (219,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (236,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (237,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (289,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue' (295,15): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue2' (313,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (319,26): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue2' (320,15): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (324,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (325,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (341,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (347,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (348,31): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (355,32): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (356,26): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue2' (362,32): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (371,26): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (382,26): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue2' (389,19): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (402,19): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (415,19): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (428,19): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (441,19): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (499,19): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (563,19): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (579,19): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (759,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray4' (777,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (778,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray3' (787,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray2' (793,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (794,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (807,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink2' (808,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (825,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray2' (826,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (830,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (831,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (835,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue' (836,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (840,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue2' (844,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (849,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (859,29): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (912,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray3' (920,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (968,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray3' (976,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue' (987,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue' (1019,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue' (1020,21): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue' (1042,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (1054,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray2' (1068,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (1093,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray4' (1135,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (1136,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (1149,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue2' (1156,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (1197,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray4' (1212,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue' (1220,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (1233,19): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (1243,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink2' (1280,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (1295,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue' (1300,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue2' (1328,15): run-time error CSS1039: Token not allowed after unary operator: '-header-height' (1329,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (1354,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (1362,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink2' (1369,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (1376,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (1383,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (1387,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (1417,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (1419,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (1425,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue2' (1429,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink2' (1481,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (1496,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1502,30): run-time error CSS1039: Token not allowed after unary operator: '-category-search-x' (1505,30): run-time error CSS1039: Token not allowed after unary operator: '-category-search-x' (1515,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (1534,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (1550,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1559,26): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (1578,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1604,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (1605,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (1668,20): run-time error CSS1039: Token not allowed after unary operator: '-header-height' (1673,17): run-time error CSS1039: Token not allowed after unary operator: '-header-height' (1709,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (1721,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue2' (1785,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray' (1805,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (1828,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (1874,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue' (2002,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (2006,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue2' (2010,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue2' (2011,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (2085,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray2' (2089,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (2097,21): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue2' (2108,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (2109,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (2119,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue2' (2176,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (2180,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (2184,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (2188,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (2192,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (2261,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray2' (2266,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (2273,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (2277,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray4' (2312,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (2317,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray' (2328,32): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray3' (2351,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (2357,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (2358,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (2367,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue2' (2368,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (2385,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (2403,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (2419,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue' (2430,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue2' (2435,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (2441,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (2443,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (2462,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray' (2501,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (2516,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (2520,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue' (2524,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (2542,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (2543,30): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (2562,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (2572,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray' (2634,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray' (2739,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (2742,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (2744,19): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (2749,19): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (2750,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (2751,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (2819,19): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (2912,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue2' (2935,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue' (2946,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (2995,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray' (3001,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (3021,32): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray2' (3038,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (3066,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (3073,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue' (3080,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (3145,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray' (3156,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (3180,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (3258,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray4' (3290,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (3343,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (3359,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (3369,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue' (3376,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (3392,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray2' (3393,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (3440,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray4' (3459,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (3491,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (3502,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (3523,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (3527,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue' (3668,18): run-time error CSS1039: Token not allowed after unary operator: '-header-height' (3733,20): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (3748,13): run-time error CSS1039: Token not allowed after unary operator: '-header-height' (3751,26): run-time error CSS1039: Token not allowed after unary operator: '-main-color-white' (3763,33): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray2' (3771,15): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (3789,26): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray2' (3810,21): run-time error CSS1039: Token not allowed after unary operator: '-header-height' (3943,26): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray4' (3973,15): run-time error CSS1039: Token not allowed after unary operator: '-main-color-blue' (3991,26): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray4' (4000,15): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (4005,31): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray4' (4006,32): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray4' (4012,15): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (4017,26): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray4' (4025,15): run-time error CSS1039: Token not allowed after unary operator: '-main-color-block' (4050,33): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray2' (4068,15): run-time error CSS1039: Token not allowed after unary operator: '-main-color-gray4' (4573,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (4579,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' (4584,14): run-time error CSS1039: Token not allowed after unary operator: '-main-color-pink' */ @charset "utf-8"; *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } body { line-height: 1.5; -webkit-font-smoothing: antialiased; /* Chrome, Safari, 新版 Edge */ -moz-osx-font-smoothing: grayscale; /* Firefox on macOS */ min-height: 100vh; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } ul, ol { list-style: none; padding: 0; margin: 0; } a { text-decoration: none; color: inherit; } button { cursor: pointer; border: none; background: none; } table { border-collapse: collapse; } textarea { resize: vertical; } .toast-container { width: 50%; min-width: 300px; z-index: 9999; } * html .toast-container { position: absolute; } .toast-item { height: auto; background: #333; opacity: 0.9; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; color: #eee; padding-top: 20px; padding-bottom: 20px; padding-left: 6px; padding-right: 6px; font-family: lucida Grande; font-size: 1.25rem; border: 2px solid #999; display: block; position: relative; margin: 0 0 12px 0; } .toast-item p { text-align: left; margin-left: 50px; } .toast-item-close { background: url(/Content/toastmessage/images/close.gif); width: 22px; height: 22px; position: absolute; top: 7px; right: 7px; } .toast-item-image { width: 32px; height: 32px; position: absolute; top: 50%; margin-top: -16px; left: 10px; } .toast-item-image-notice { background: url(/Content/toastmessage/images/notice.png); } .toast-item-image-success { background: url(/Content/toastmessage/images/success.png); } .toast-item-image-warning { background: url(/Content/toastmessage/images/warning.png); } .toast-item-image-error { background: url(/Content/toastmessage/images/error.png); } /** * toast types * * pattern: toast-type-[value] * where 'value' is the real value of the plugin option 'type' * */ .toast-type-notice { color: white; } .toast-type-success { color: white; } .toast-type-warning { color: white; border-color: #FCBD57; } .toast-type-error { color: white; border-color: #B32B2B; } /** * positions * * pattern: toast-position-[value] * where 'value' is the real value of the plugin option 'position' * */ .toast-position-top-left { position: fixed; left: 20px; top: 20px; } .toast-position-top-center { position: fixed; top: 20px; left: 50%; margin-left: -140px; } .toast-position-top-right { position: fixed; top: 20px; right: 20px; } .toast-position-middle-left { position: fixed; left: 20px; top: 50%; margin-top: -40px; } .toast-position-middle-center { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); } .toast-position-middle-right { position: fixed; right: 20px; margin-left: -140px; margin-top: -40px; top: 50%; } body.compensate-for-scrollbar{overflow:hidden}.fancybox-active{height:auto}.fancybox-is-hidden{left:-9999px;margin:0;position:absolute!important;top:-9999px;visibility:hidden}.fancybox-container{-webkit-backface-visibility:hidden;height:100%;left:0;outline:none;position:fixed;-webkit-tap-highlight-color:transparent;top:0;-ms-touch-action:manipulation;touch-action:manipulation;transform:translateZ(0);width:100%;z-index:99992}.fancybox-container *{box-sizing:border-box}.fancybox-bg,.fancybox-inner,.fancybox-outer,.fancybox-stage{bottom:0;left:0;position:absolute;right:0;top:0}.fancybox-outer{-webkit-overflow-scrolling:touch;overflow-y:auto}.fancybox-bg{background:#1e1e1e;opacity:0;transition-duration:inherit;transition-property:opacity;transition-timing-function:cubic-bezier(.47,0,.74,.71)}.fancybox-is-open .fancybox-bg{opacity:.9;transition-timing-function:cubic-bezier(.22,.61,.36,1)}.fancybox-caption,.fancybox-infobar,.fancybox-navigation .fancybox-button,.fancybox-toolbar{direction:ltr;opacity:0;position:absolute;transition:opacity .25s ease,visibility 0s ease .25s;visibility:hidden;z-index:99997}.fancybox-show-caption .fancybox-caption,.fancybox-show-infobar .fancybox-infobar,.fancybox-show-nav .fancybox-navigation .fancybox-button,.fancybox-show-toolbar .fancybox-toolbar{opacity:1;transition:opacity .25s ease 0s,visibility 0s ease 0s;visibility:visible}.fancybox-infobar{color:#ccc;font-size:13px;-webkit-font-smoothing:subpixel-antialiased;height:44px;left:0;line-height:44px;min-width:44px;mix-blend-mode:difference;padding:0 10px;pointer-events:none;top:0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fancybox-toolbar{right:0;top:0}.fancybox-stage{direction:ltr;overflow:visible;transform:translateZ(0);z-index:99994}.fancybox-is-open .fancybox-stage{overflow:hidden}.fancybox-slide{-webkit-backface-visibility:hidden;display:none;height:100%;left:0;outline:none;overflow:auto;-webkit-overflow-scrolling:touch;padding:44px;position:absolute;text-align:center;top:0;transition-property:transform,opacity;white-space:normal;width:100%;z-index:99994}.fancybox-slide:before{content:"";display:inline-block;font-size:0;height:100%;vertical-align:middle;width:0}.fancybox-is-sliding .fancybox-slide,.fancybox-slide--current,.fancybox-slide--next,.fancybox-slide--previous{display:block}.fancybox-slide--image{overflow:hidden;padding:44px 0}.fancybox-slide--image:before{display:none}.fancybox-slide--html{padding:6px}.fancybox-content{background:#fff;display:inline-block;margin:0;max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch;padding:44px;position:relative;text-align:left;vertical-align:middle}.fancybox-slide--image .fancybox-content{animation-timing-function:cubic-bezier(.5,0,.14,1);-webkit-backface-visibility:hidden;background:transparent;background-repeat:no-repeat;background-size:100% 100%;left:0;max-width:none;overflow:visible;padding:0;position:absolute;top:0;transform-origin:top left;transition-property:transform,opacity;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:99995}.fancybox-can-zoomOut .fancybox-content{cursor:zoom-out}.fancybox-can-zoomIn .fancybox-content{cursor:zoom-in}.fancybox-can-pan .fancybox-content,.fancybox-can-swipe .fancybox-content{cursor:grab}.fancybox-is-grabbing .fancybox-content{cursor:grabbing}.fancybox-container [data-selectable=true]{cursor:text}.fancybox-image,.fancybox-spaceball{background:transparent;border:0;height:100%;left:0;margin:0;max-height:none;max-width:none;padding:0;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.fancybox-spaceball{z-index:1}.fancybox-slide--iframe .fancybox-content,.fancybox-slide--map .fancybox-content,.fancybox-slide--pdf .fancybox-content,.fancybox-slide--video .fancybox-content{height:100%;overflow:visible;padding:0;width:100%}.fancybox-slide--video .fancybox-content{background:#000}.fancybox-slide--map .fancybox-content{background:#e5e3df}.fancybox-slide--iframe .fancybox-content{background:#fff}.fancybox-iframe,.fancybox-video{background:transparent;border:0;display:block;height:100%;margin:0;overflow:hidden;padding:0;width:100%}.fancybox-iframe{left:0;position:absolute;top:0}.fancybox-error{background:#fff;cursor:default;max-width:400px;padding:40px;width:100%}.fancybox-error p{color:#444;font-size:16px;line-height:20px;margin:0;padding:0}.fancybox-button{background:rgba(30,30,30,.6);border:0;border-radius:0;box-shadow:none;cursor:pointer;display:inline-block;height:44px;margin:0;padding:10px;position:relative;transition:color .2s;vertical-align:top;visibility:inherit;width:44px}.fancybox-button,.fancybox-button:link,.fancybox-button:visited{color:#ccc}.fancybox-button:hover{color:#fff}.fancybox-button:focus{outline:none}.fancybox-button.fancybox-focus{outline:1px dotted}.fancybox-button[disabled],.fancybox-button[disabled]:hover{color:#888;cursor:default;outline:none}.fancybox-button div{height:100%}.fancybox-button svg{display:block;height:100%;overflow:visible;position:relative;width:100%}.fancybox-button svg path{fill:currentColor;stroke-width:0}.fancybox-button--fsenter svg:nth-child(2),.fancybox-button--fsexit svg:first-child,.fancybox-button--pause svg:first-child,.fancybox-button--play svg:nth-child(2){display:none}.fancybox-progress{background:#ff5268;height:2px;left:0;position:absolute;right:0;top:0;transform:scaleX(0);transform-origin:0;transition-property:transform;transition-timing-function:linear;z-index:99998}.fancybox-close-small{background:transparent;border:0;border-radius:0;color:#ccc;cursor:pointer;opacity:.8;padding:8px;position:absolute;right:-12px;top:-44px;z-index:401}.fancybox-close-small:hover{color:#fff;opacity:1}.fancybox-slide--html .fancybox-close-small{color:currentColor;padding:10px;right:0;top:0}.fancybox-slide--image.fancybox-is-scaling .fancybox-content{overflow:hidden}.fancybox-is-scaling .fancybox-close-small,.fancybox-is-zoomable.fancybox-can-pan .fancybox-close-small{display:none}.fancybox-navigation .fancybox-button{background-clip:content-box;height:100px;opacity:0;position:absolute;top:calc(50% - 50px);width:70px}.fancybox-navigation .fancybox-button div{padding:7px}.fancybox-navigation .fancybox-button--arrow_left{left:0;left:env(safe-area-inset-left);padding:31px 26px 31px 6px}.fancybox-navigation .fancybox-button--arrow_right{padding:31px 6px 31px 26px;right:0;right:env(safe-area-inset-right)}.fancybox-caption{background:linear-gradient(0deg,rgba(0,0,0,.85) 0,rgba(0,0,0,.3) 50%,rgba(0,0,0,.15) 65%,rgba(0,0,0,.075) 75.5%,rgba(0,0,0,.037) 82.85%,rgba(0,0,0,.019) 88%,transparent);bottom:0;color:#eee;font-size:14px;font-weight:400;left:0;line-height:1.5;padding:75px 44px 25px;pointer-events:none;right:0;text-align:center;z-index:99996}@supports (padding:max(0px)){.fancybox-caption{padding:75px max(44px,env(safe-area-inset-right)) max(25px,env(safe-area-inset-bottom)) max(44px,env(safe-area-inset-left))}}.fancybox-caption--separate{margin-top:-50px}.fancybox-caption__body{max-height:50vh;overflow:auto;pointer-events:all}.fancybox-caption a,.fancybox-caption a:link,.fancybox-caption a:visited{color:#ccc;text-decoration:none}.fancybox-caption a:hover{color:#fff;text-decoration:underline}.fancybox-loading{animation:a 1s linear infinite;background:transparent;border:4px solid #888;border-bottom-color:#fff;border-radius:50%;height:50px;left:50%;margin:-25px 0 0 -25px;opacity:.7;padding:0;position:absolute;top:50%;width:50px;z-index:99999}@keyframes a{to{transform:rotate(1turn)}}.fancybox-animated{transition-timing-function:cubic-bezier(0,0,.25,1)}.fancybox-fx-slide.fancybox-slide--previous{opacity:0;transform:translate3d(-100%,0,0)}.fancybox-fx-slide.fancybox-slide--next{opacity:0;transform:translate3d(100%,0,0)}.fancybox-fx-slide.fancybox-slide--current{opacity:1;transform:translateZ(0)}.fancybox-fx-fade.fancybox-slide--next,.fancybox-fx-fade.fancybox-slide--previous{opacity:0;transition-timing-function:cubic-bezier(.19,1,.22,1)}.fancybox-fx-fade.fancybox-slide--current{opacity:1}.fancybox-fx-zoom-in-out.fancybox-slide--previous{opacity:0;transform:scale3d(1.5,1.5,1.5)}.fancybox-fx-zoom-in-out.fancybox-slide--next{opacity:0;transform:scale3d(.5,.5,.5)}.fancybox-fx-zoom-in-out.fancybox-slide--current{opacity:1;transform:scaleX(1)}.fancybox-fx-rotate.fancybox-slide--previous{opacity:0;transform:rotate(-1turn)}.fancybox-fx-rotate.fancybox-slide--next{opacity:0;transform:rotate(1turn)}.fancybox-fx-rotate.fancybox-slide--current{opacity:1;transform:rotate(0deg)}.fancybox-fx-circular.fancybox-slide--previous{opacity:0;transform:scale3d(0,0,0) translate3d(-100%,0,0)}.fancybox-fx-circular.fancybox-slide--next{opacity:0;transform:scale3d(0,0,0) translate3d(100%,0,0)}.fancybox-fx-circular.fancybox-slide--current{opacity:1;transform:scaleX(1) translateZ(0)}.fancybox-fx-tube.fancybox-slide--previous{transform:translate3d(-100%,0,0) scale(.1) skew(-10deg)}.fancybox-fx-tube.fancybox-slide--next{transform:translate3d(100%,0,0) scale(.1) skew(10deg)}.fancybox-fx-tube.fancybox-slide--current{transform:translateZ(0) scale(1)}@media (max-height:576px){.fancybox-slide{padding-left:6px;padding-right:6px}.fancybox-slide--image{padding:6px 0}.fancybox-close-small{right:-6px}.fancybox-slide--image .fancybox-close-small{background:#4e4e4e;color:#f2f4f6;height:36px;opacity:1;padding:6px;right:0;top:0;width:36px}.fancybox-caption{padding-left:12px;padding-right:12px}@supports (padding:max(0px)){.fancybox-caption{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}}}.fancybox-share{background:#f4f4f4;border-radius:3px;max-width:90%;padding:30px;text-align:center}.fancybox-share h1{color:#222;font-size:35px;font-weight:700;margin:0 0 20px}.fancybox-share p{margin:0;padding:0}.fancybox-share__button{border:0;border-radius:3px;display:inline-block;font-size:14px;font-weight:700;line-height:40px;margin:0 5px 10px;min-width:130px;padding:0 15px;text-decoration:none;transition:all .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}.fancybox-share__button:link,.fancybox-share__button:visited{color:#fff}.fancybox-share__button:hover{text-decoration:none}.fancybox-share__button--fb{background:#3b5998}.fancybox-share__button--fb:hover{background:#344e86}.fancybox-share__button--pt{background:#bd081d}.fancybox-share__button--pt:hover{background:#aa0719}.fancybox-share__button--tw{background:#1da1f2}.fancybox-share__button--tw:hover{background:#0d95e8}.fancybox-share__button svg{height:25px;margin-right:7px;position:relative;top:-1px;vertical-align:middle;width:25px}.fancybox-share__button svg path{fill:#fff}.fancybox-share__input{background:transparent;border:0;border-bottom:1px solid #d7d7d7;border-radius:0;color:#5d5b5b;font-size:14px;margin:10px 0 0;outline:none;padding:10px 15px;width:100%}.fancybox-thumbs{background:#ddd;bottom:0;display:none;margin:0;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;padding:2px 2px 4px;position:absolute;right:0;-webkit-tap-highlight-color:rgba(0,0,0,0);top:0;width:212px;z-index:99995}.fancybox-thumbs-x{overflow-x:auto;overflow-y:hidden}.fancybox-show-thumbs .fancybox-thumbs{display:block}.fancybox-show-thumbs .fancybox-inner{right:212px}.fancybox-thumbs__list{font-size:0;height:100%;list-style:none;margin:0;overflow-x:hidden;overflow-y:auto;padding:0;position:absolute;position:relative;white-space:nowrap;width:100%}.fancybox-thumbs-x .fancybox-thumbs__list{overflow:hidden}.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar{width:7px}.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-track{background:#fff;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,.3)}.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:10px}.fancybox-thumbs__list a{-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:rgba(0,0,0,.1);background-position:50%;background-repeat:no-repeat;background-size:cover;cursor:pointer;float:left;height:75px;margin:2px;max-height:calc(100% - 8px);max-width:calc(50% - 4px);outline:none;overflow:hidden;padding:0;position:relative;-webkit-tap-highlight-color:transparent;width:100px}.fancybox-thumbs__list a:before{border:6px solid #ff5268;bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:all .2s cubic-bezier(.25,.46,.45,.94);z-index:99991}.fancybox-thumbs__list a:focus:before{opacity:.5}.fancybox-thumbs__list a.fancybox-thumbs-active:before{opacity:1}@media (max-width:576px){.fancybox-thumbs{width:110px}.fancybox-show-thumbs .fancybox-inner{right:110px}.fancybox-thumbs__list a{max-width:calc(100% - 10px)}} .bx-wrapper{position:relative;margin-bottom:60px;padding:0;-ms-touch-action:pan-y;touch-action:pan-y;-moz-box-shadow:0 0 5px #ccc;-webkit-box-shadow:0 0 5px #ccc;box-shadow:0 0 5px #ccc;border:5px solid #fff;background:#fff}.bx-wrapper img{max-width:100%;display:block}.bxslider{margin:0;padding:0;-webkit-perspective:1000}ul.bxslider{list-style:none}.bx-viewport{-webkit-transform:translateZ(0)}.bx-wrapper .bx-controls-auto,.bx-wrapper .bx-pager{position:absolute;bottom:-30px;width:100%}.bx-wrapper .bx-loading{min-height:50px;background:url(/Images/bxslider/bx_loader.gif) center center no-repeat #fff;height:100%;width:100%;position:absolute;top:0;left:0;z-index:2000}.bx-wrapper .bx-pager{text-align:center;font-size:.85em;font-family:Arial;font-weight:700;color:#666;padding-top:20px}.bx-wrapper .bx-pager.bx-default-pager a{background:#666;text-indent:-9999px;display:block;width:10px;height:10px;margin:0 5px;outline:0;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}.bx-wrapper .bx-pager.bx-default-pager a.active,.bx-wrapper .bx-pager.bx-default-pager a:focus,.bx-wrapper .bx-pager.bx-default-pager a:hover{background:#000}.bx-wrapper .bx-controls-auto .bx-controls-auto-item,.bx-wrapper .bx-pager-item{display:inline-block;vertical-align:bottom}.bx-wrapper .bx-pager-item{font-size:0;line-height:0}.bx-wrapper .bx-prev{left:10px;background:url(/Images/bxslider/controls.png) 0 -32px no-repeat}.bx-wrapper .bx-prev:focus,.bx-wrapper .bx-prev:hover{background-position:0 0}.bx-wrapper .bx-next{right:10px;background:url(/Images/bxslider/controls.png) -43px -32px no-repeat}.bx-wrapper .bx-next:focus,.bx-wrapper .bx-next:hover{background-position:-43px 0}.bx-wrapper .bx-controls-direction a{position:absolute;top:50%;margin-top:-16px;outline:0;width:32px;height:32px;text-indent:-9999px;z-index:9999}.bx-wrapper .bx-controls-direction a.disabled{display:none}.bx-wrapper .bx-controls-auto{text-align:center}.bx-wrapper .bx-controls-auto .bx-start{display:block;text-indent:-9999px;width:10px;height:11px;outline:0;background:url(/Images/bxslider/controls.png) -86px -11px no-repeat;margin:0 3px}.bx-wrapper .bx-controls-auto .bx-start.active,.bx-wrapper .bx-controls-auto .bx-start:focus,.bx-wrapper .bx-controls-auto .bx-start:hover{background-position:-86px 0}.bx-wrapper .bx-controls-auto .bx-stop{display:block;text-indent:-9999px;width:9px;height:11px;outline:0;background:url(/Images/bxslider/controls.png) -86px -44px no-repeat;margin:0 3px}.bx-wrapper .bx-controls-auto .bx-stop.active,.bx-wrapper .bx-controls-auto .bx-stop:focus,.bx-wrapper .bx-controls-auto .bx-stop:hover{background-position:-86px -33px}.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager{text-align:left;width:80%}.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto{right:0;width:35px}.bx-wrapper .bx-caption{position:absolute;bottom:0;left:0;background:#666;background:rgba(80,80,80,.75);width:100%}.bx-wrapper .bx-caption span{color:#fff;font-family:Arial;display:block;font-size:.85em;padding:10px} [data-aos][data-aos][data-aos-duration="50"],body[data-aos-duration="50"] [data-aos]{transition-duration:50ms}[data-aos][data-aos][data-aos-delay="50"],body[data-aos-delay="50"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="50"].aos-animate,body[data-aos-delay="50"] [data-aos].aos-animate{transition-delay:50ms}[data-aos][data-aos][data-aos-duration="100"],body[data-aos-duration="100"] [data-aos]{transition-duration:.1s}[data-aos][data-aos][data-aos-delay="100"],body[data-aos-delay="100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="100"].aos-animate,body[data-aos-delay="100"] [data-aos].aos-animate{transition-delay:.1s}[data-aos][data-aos][data-aos-duration="150"],body[data-aos-duration="150"] [data-aos]{transition-duration:.15s}[data-aos][data-aos][data-aos-delay="150"],body[data-aos-delay="150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="150"].aos-animate,body[data-aos-delay="150"] [data-aos].aos-animate{transition-delay:.15s}[data-aos][data-aos][data-aos-duration="200"],body[data-aos-duration="200"] [data-aos]{transition-duration:.2s}[data-aos][data-aos][data-aos-delay="200"],body[data-aos-delay="200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="200"].aos-animate,body[data-aos-delay="200"] [data-aos].aos-animate{transition-delay:.2s}[data-aos][data-aos][data-aos-duration="250"],body[data-aos-duration="250"] [data-aos]{transition-duration:.25s}[data-aos][data-aos][data-aos-delay="250"],body[data-aos-delay="250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="250"].aos-animate,body[data-aos-delay="250"] [data-aos].aos-animate{transition-delay:.25s}[data-aos][data-aos][data-aos-duration="300"],body[data-aos-duration="300"] [data-aos]{transition-duration:.3s}[data-aos][data-aos][data-aos-delay="300"],body[data-aos-delay="300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="300"].aos-animate,body[data-aos-delay="300"] [data-aos].aos-animate{transition-delay:.3s}[data-aos][data-aos][data-aos-duration="350"],body[data-aos-duration="350"] [data-aos]{transition-duration:.35s}[data-aos][data-aos][data-aos-delay="350"],body[data-aos-delay="350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="350"].aos-animate,body[data-aos-delay="350"] [data-aos].aos-animate{transition-delay:.35s}[data-aos][data-aos][data-aos-duration="400"],body[data-aos-duration="400"] [data-aos]{transition-duration:.4s}[data-aos][data-aos][data-aos-delay="400"],body[data-aos-delay="400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="400"].aos-animate,body[data-aos-delay="400"] [data-aos].aos-animate{transition-delay:.4s}[data-aos][data-aos][data-aos-duration="450"],body[data-aos-duration="450"] [data-aos]{transition-duration:.45s}[data-aos][data-aos][data-aos-delay="450"],body[data-aos-delay="450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="450"].aos-animate,body[data-aos-delay="450"] [data-aos].aos-animate{transition-delay:.45s}[data-aos][data-aos][data-aos-duration="500"],body[data-aos-duration="500"] [data-aos]{transition-duration:.5s}[data-aos][data-aos][data-aos-delay="500"],body[data-aos-delay="500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="500"].aos-animate,body[data-aos-delay="500"] [data-aos].aos-animate{transition-delay:.5s}[data-aos][data-aos][data-aos-duration="550"],body[data-aos-duration="550"] [data-aos]{transition-duration:.55s}[data-aos][data-aos][data-aos-delay="550"],body[data-aos-delay="550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="550"].aos-animate,body[data-aos-delay="550"] [data-aos].aos-animate{transition-delay:.55s}[data-aos][data-aos][data-aos-duration="600"],body[data-aos-duration="600"] [data-aos]{transition-duration:.6s}[data-aos][data-aos][data-aos-delay="600"],body[data-aos-delay="600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="600"].aos-animate,body[data-aos-delay="600"] [data-aos].aos-animate{transition-delay:.6s}[data-aos][data-aos][data-aos-duration="650"],body[data-aos-duration="650"] [data-aos]{transition-duration:.65s}[data-aos][data-aos][data-aos-delay="650"],body[data-aos-delay="650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="650"].aos-animate,body[data-aos-delay="650"] [data-aos].aos-animate{transition-delay:.65s}[data-aos][data-aos][data-aos-duration="700"],body[data-aos-duration="700"] [data-aos]{transition-duration:.7s}[data-aos][data-aos][data-aos-delay="700"],body[data-aos-delay="700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="700"].aos-animate,body[data-aos-delay="700"] [data-aos].aos-animate{transition-delay:.7s}[data-aos][data-aos][data-aos-duration="750"],body[data-aos-duration="750"] [data-aos]{transition-duration:.75s}[data-aos][data-aos][data-aos-delay="750"],body[data-aos-delay="750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="750"].aos-animate,body[data-aos-delay="750"] [data-aos].aos-animate{transition-delay:.75s}[data-aos][data-aos][data-aos-duration="800"],body[data-aos-duration="800"] [data-aos]{transition-duration:.8s}[data-aos][data-aos][data-aos-delay="800"],body[data-aos-delay="800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="800"].aos-animate,body[data-aos-delay="800"] [data-aos].aos-animate{transition-delay:.8s}[data-aos][data-aos][data-aos-duration="850"],body[data-aos-duration="850"] [data-aos]{transition-duration:.85s}[data-aos][data-aos][data-aos-delay="850"],body[data-aos-delay="850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="850"].aos-animate,body[data-aos-delay="850"] [data-aos].aos-animate{transition-delay:.85s}[data-aos][data-aos][data-aos-duration="900"],body[data-aos-duration="900"] [data-aos]{transition-duration:.9s}[data-aos][data-aos][data-aos-delay="900"],body[data-aos-delay="900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="900"].aos-animate,body[data-aos-delay="900"] [data-aos].aos-animate{transition-delay:.9s}[data-aos][data-aos][data-aos-duration="950"],body[data-aos-duration="950"] [data-aos]{transition-duration:.95s}[data-aos][data-aos][data-aos-delay="950"],body[data-aos-delay="950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="950"].aos-animate,body[data-aos-delay="950"] [data-aos].aos-animate{transition-delay:.95s}[data-aos][data-aos][data-aos-duration="1000"],body[data-aos-duration="1000"] [data-aos]{transition-duration:1s}[data-aos][data-aos][data-aos-delay="1000"],body[data-aos-delay="1000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1000"].aos-animate,body[data-aos-delay="1000"] [data-aos].aos-animate{transition-delay:1s}[data-aos][data-aos][data-aos-duration="1050"],body[data-aos-duration="1050"] [data-aos]{transition-duration:1.05s}[data-aos][data-aos][data-aos-delay="1050"],body[data-aos-delay="1050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1050"].aos-animate,body[data-aos-delay="1050"] [data-aos].aos-animate{transition-delay:1.05s}[data-aos][data-aos][data-aos-duration="1100"],body[data-aos-duration="1100"] [data-aos]{transition-duration:1.1s}[data-aos][data-aos][data-aos-delay="1100"],body[data-aos-delay="1100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1100"].aos-animate,body[data-aos-delay="1100"] [data-aos].aos-animate{transition-delay:1.1s}[data-aos][data-aos][data-aos-duration="1150"],body[data-aos-duration="1150"] [data-aos]{transition-duration:1.15s}[data-aos][data-aos][data-aos-delay="1150"],body[data-aos-delay="1150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1150"].aos-animate,body[data-aos-delay="1150"] [data-aos].aos-animate{transition-delay:1.15s}[data-aos][data-aos][data-aos-duration="1200"],body[data-aos-duration="1200"] [data-aos]{transition-duration:1.2s}[data-aos][data-aos][data-aos-delay="1200"],body[data-aos-delay="1200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1200"].aos-animate,body[data-aos-delay="1200"] [data-aos].aos-animate{transition-delay:1.2s}[data-aos][data-aos][data-aos-duration="1250"],body[data-aos-duration="1250"] [data-aos]{transition-duration:1.25s}[data-aos][data-aos][data-aos-delay="1250"],body[data-aos-delay="1250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1250"].aos-animate,body[data-aos-delay="1250"] [data-aos].aos-animate{transition-delay:1.25s}[data-aos][data-aos][data-aos-duration="1300"],body[data-aos-duration="1300"] [data-aos]{transition-duration:1.3s}[data-aos][data-aos][data-aos-delay="1300"],body[data-aos-delay="1300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1300"].aos-animate,body[data-aos-delay="1300"] [data-aos].aos-animate{transition-delay:1.3s}[data-aos][data-aos][data-aos-duration="1350"],body[data-aos-duration="1350"] [data-aos]{transition-duration:1.35s}[data-aos][data-aos][data-aos-delay="1350"],body[data-aos-delay="1350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1350"].aos-animate,body[data-aos-delay="1350"] [data-aos].aos-animate{transition-delay:1.35s}[data-aos][data-aos][data-aos-duration="1400"],body[data-aos-duration="1400"] [data-aos]{transition-duration:1.4s}[data-aos][data-aos][data-aos-delay="1400"],body[data-aos-delay="1400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1400"].aos-animate,body[data-aos-delay="1400"] [data-aos].aos-animate{transition-delay:1.4s}[data-aos][data-aos][data-aos-duration="1450"],body[data-aos-duration="1450"] [data-aos]{transition-duration:1.45s}[data-aos][data-aos][data-aos-delay="1450"],body[data-aos-delay="1450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1450"].aos-animate,body[data-aos-delay="1450"] [data-aos].aos-animate{transition-delay:1.45s}[data-aos][data-aos][data-aos-duration="1500"],body[data-aos-duration="1500"] [data-aos]{transition-duration:1.5s}[data-aos][data-aos][data-aos-delay="1500"],body[data-aos-delay="1500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1500"].aos-animate,body[data-aos-delay="1500"] [data-aos].aos-animate{transition-delay:1.5s}[data-aos][data-aos][data-aos-duration="1550"],body[data-aos-duration="1550"] [data-aos]{transition-duration:1.55s}[data-aos][data-aos][data-aos-delay="1550"],body[data-aos-delay="1550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1550"].aos-animate,body[data-aos-delay="1550"] [data-aos].aos-animate{transition-delay:1.55s}[data-aos][data-aos][data-aos-duration="1600"],body[data-aos-duration="1600"] [data-aos]{transition-duration:1.6s}[data-aos][data-aos][data-aos-delay="1600"],body[data-aos-delay="1600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1600"].aos-animate,body[data-aos-delay="1600"] [data-aos].aos-animate{transition-delay:1.6s}[data-aos][data-aos][data-aos-duration="1650"],body[data-aos-duration="1650"] [data-aos]{transition-duration:1.65s}[data-aos][data-aos][data-aos-delay="1650"],body[data-aos-delay="1650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1650"].aos-animate,body[data-aos-delay="1650"] [data-aos].aos-animate{transition-delay:1.65s}[data-aos][data-aos][data-aos-duration="1700"],body[data-aos-duration="1700"] [data-aos]{transition-duration:1.7s}[data-aos][data-aos][data-aos-delay="1700"],body[data-aos-delay="1700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1700"].aos-animate,body[data-aos-delay="1700"] [data-aos].aos-animate{transition-delay:1.7s}[data-aos][data-aos][data-aos-duration="1750"],body[data-aos-duration="1750"] [data-aos]{transition-duration:1.75s}[data-aos][data-aos][data-aos-delay="1750"],body[data-aos-delay="1750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1750"].aos-animate,body[data-aos-delay="1750"] [data-aos].aos-animate{transition-delay:1.75s}[data-aos][data-aos][data-aos-duration="1800"],body[data-aos-duration="1800"] [data-aos]{transition-duration:1.8s}[data-aos][data-aos][data-aos-delay="1800"],body[data-aos-delay="1800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1800"].aos-animate,body[data-aos-delay="1800"] [data-aos].aos-animate{transition-delay:1.8s}[data-aos][data-aos][data-aos-duration="1850"],body[data-aos-duration="1850"] [data-aos]{transition-duration:1.85s}[data-aos][data-aos][data-aos-delay="1850"],body[data-aos-delay="1850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1850"].aos-animate,body[data-aos-delay="1850"] [data-aos].aos-animate{transition-delay:1.85s}[data-aos][data-aos][data-aos-duration="1900"],body[data-aos-duration="1900"] [data-aos]{transition-duration:1.9s}[data-aos][data-aos][data-aos-delay="1900"],body[data-aos-delay="1900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1900"].aos-animate,body[data-aos-delay="1900"] [data-aos].aos-animate{transition-delay:1.9s}[data-aos][data-aos][data-aos-duration="1950"],body[data-aos-duration="1950"] [data-aos]{transition-duration:1.95s}[data-aos][data-aos][data-aos-delay="1950"],body[data-aos-delay="1950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1950"].aos-animate,body[data-aos-delay="1950"] [data-aos].aos-animate{transition-delay:1.95s}[data-aos][data-aos][data-aos-duration="2000"],body[data-aos-duration="2000"] [data-aos]{transition-duration:2s}[data-aos][data-aos][data-aos-delay="2000"],body[data-aos-delay="2000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2000"].aos-animate,body[data-aos-delay="2000"] [data-aos].aos-animate{transition-delay:2s}[data-aos][data-aos][data-aos-duration="2050"],body[data-aos-duration="2050"] [data-aos]{transition-duration:2.05s}[data-aos][data-aos][data-aos-delay="2050"],body[data-aos-delay="2050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2050"].aos-animate,body[data-aos-delay="2050"] [data-aos].aos-animate{transition-delay:2.05s}[data-aos][data-aos][data-aos-duration="2100"],body[data-aos-duration="2100"] [data-aos]{transition-duration:2.1s}[data-aos][data-aos][data-aos-delay="2100"],body[data-aos-delay="2100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2100"].aos-animate,body[data-aos-delay="2100"] [data-aos].aos-animate{transition-delay:2.1s}[data-aos][data-aos][data-aos-duration="2150"],body[data-aos-duration="2150"] [data-aos]{transition-duration:2.15s}[data-aos][data-aos][data-aos-delay="2150"],body[data-aos-delay="2150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2150"].aos-animate,body[data-aos-delay="2150"] [data-aos].aos-animate{transition-delay:2.15s}[data-aos][data-aos][data-aos-duration="2200"],body[data-aos-duration="2200"] [data-aos]{transition-duration:2.2s}[data-aos][data-aos][data-aos-delay="2200"],body[data-aos-delay="2200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2200"].aos-animate,body[data-aos-delay="2200"] [data-aos].aos-animate{transition-delay:2.2s}[data-aos][data-aos][data-aos-duration="2250"],body[data-aos-duration="2250"] [data-aos]{transition-duration:2.25s}[data-aos][data-aos][data-aos-delay="2250"],body[data-aos-delay="2250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2250"].aos-animate,body[data-aos-delay="2250"] [data-aos].aos-animate{transition-delay:2.25s}[data-aos][data-aos][data-aos-duration="2300"],body[data-aos-duration="2300"] [data-aos]{transition-duration:2.3s}[data-aos][data-aos][data-aos-delay="2300"],body[data-aos-delay="2300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2300"].aos-animate,body[data-aos-delay="2300"] [data-aos].aos-animate{transition-delay:2.3s}[data-aos][data-aos][data-aos-duration="2350"],body[data-aos-duration="2350"] [data-aos]{transition-duration:2.35s}[data-aos][data-aos][data-aos-delay="2350"],body[data-aos-delay="2350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2350"].aos-animate,body[data-aos-delay="2350"] [data-aos].aos-animate{transition-delay:2.35s}[data-aos][data-aos][data-aos-duration="2400"],body[data-aos-duration="2400"] [data-aos]{transition-duration:2.4s}[data-aos][data-aos][data-aos-delay="2400"],body[data-aos-delay="2400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2400"].aos-animate,body[data-aos-delay="2400"] [data-aos].aos-animate{transition-delay:2.4s}[data-aos][data-aos][data-aos-duration="2450"],body[data-aos-duration="2450"] [data-aos]{transition-duration:2.45s}[data-aos][data-aos][data-aos-delay="2450"],body[data-aos-delay="2450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2450"].aos-animate,body[data-aos-delay="2450"] [data-aos].aos-animate{transition-delay:2.45s}[data-aos][data-aos][data-aos-duration="2500"],body[data-aos-duration="2500"] [data-aos]{transition-duration:2.5s}[data-aos][data-aos][data-aos-delay="2500"],body[data-aos-delay="2500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2500"].aos-animate,body[data-aos-delay="2500"] [data-aos].aos-animate{transition-delay:2.5s}[data-aos][data-aos][data-aos-duration="2550"],body[data-aos-duration="2550"] [data-aos]{transition-duration:2.55s}[data-aos][data-aos][data-aos-delay="2550"],body[data-aos-delay="2550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2550"].aos-animate,body[data-aos-delay="2550"] [data-aos].aos-animate{transition-delay:2.55s}[data-aos][data-aos][data-aos-duration="2600"],body[data-aos-duration="2600"] [data-aos]{transition-duration:2.6s}[data-aos][data-aos][data-aos-delay="2600"],body[data-aos-delay="2600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2600"].aos-animate,body[data-aos-delay="2600"] [data-aos].aos-animate{transition-delay:2.6s}[data-aos][data-aos][data-aos-duration="2650"],body[data-aos-duration="2650"] [data-aos]{transition-duration:2.65s}[data-aos][data-aos][data-aos-delay="2650"],body[data-aos-delay="2650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2650"].aos-animate,body[data-aos-delay="2650"] [data-aos].aos-animate{transition-delay:2.65s}[data-aos][data-aos][data-aos-duration="2700"],body[data-aos-duration="2700"] [data-aos]{transition-duration:2.7s}[data-aos][data-aos][data-aos-delay="2700"],body[data-aos-delay="2700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2700"].aos-animate,body[data-aos-delay="2700"] [data-aos].aos-animate{transition-delay:2.7s}[data-aos][data-aos][data-aos-duration="2750"],body[data-aos-duration="2750"] [data-aos]{transition-duration:2.75s}[data-aos][data-aos][data-aos-delay="2750"],body[data-aos-delay="2750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2750"].aos-animate,body[data-aos-delay="2750"] [data-aos].aos-animate{transition-delay:2.75s}[data-aos][data-aos][data-aos-duration="2800"],body[data-aos-duration="2800"] [data-aos]{transition-duration:2.8s}[data-aos][data-aos][data-aos-delay="2800"],body[data-aos-delay="2800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2800"].aos-animate,body[data-aos-delay="2800"] [data-aos].aos-animate{transition-delay:2.8s}[data-aos][data-aos][data-aos-duration="2850"],body[data-aos-duration="2850"] [data-aos]{transition-duration:2.85s}[data-aos][data-aos][data-aos-delay="2850"],body[data-aos-delay="2850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2850"].aos-animate,body[data-aos-delay="2850"] [data-aos].aos-animate{transition-delay:2.85s}[data-aos][data-aos][data-aos-duration="2900"],body[data-aos-duration="2900"] [data-aos]{transition-duration:2.9s}[data-aos][data-aos][data-aos-delay="2900"],body[data-aos-delay="2900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2900"].aos-animate,body[data-aos-delay="2900"] [data-aos].aos-animate{transition-delay:2.9s}[data-aos][data-aos][data-aos-duration="2950"],body[data-aos-duration="2950"] [data-aos]{transition-duration:2.95s}[data-aos][data-aos][data-aos-delay="2950"],body[data-aos-delay="2950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2950"].aos-animate,body[data-aos-delay="2950"] [data-aos].aos-animate{transition-delay:2.95s}[data-aos][data-aos][data-aos-duration="3000"],body[data-aos-duration="3000"] [data-aos]{transition-duration:3s}[data-aos][data-aos][data-aos-delay="3000"],body[data-aos-delay="3000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="3000"].aos-animate,body[data-aos-delay="3000"] [data-aos].aos-animate{transition-delay:3s}[data-aos][data-aos][data-aos-easing=linear],body[data-aos-easing=linear] [data-aos]{transition-timing-function:cubic-bezier(.25,.25,.75,.75)}[data-aos][data-aos][data-aos-easing=ease],body[data-aos-easing=ease] [data-aos]{transition-timing-function:ease}[data-aos][data-aos][data-aos-easing=ease-in],body[data-aos-easing=ease-in] [data-aos]{transition-timing-function:ease-in}[data-aos][data-aos][data-aos-easing=ease-out],body[data-aos-easing=ease-out] [data-aos]{transition-timing-function:ease-out}[data-aos][data-aos][data-aos-easing=ease-in-out],body[data-aos-easing=ease-in-out] [data-aos]{transition-timing-function:ease-in-out}[data-aos][data-aos][data-aos-easing=ease-in-back],body[data-aos-easing=ease-in-back] [data-aos]{transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}[data-aos][data-aos][data-aos-easing=ease-out-back],body[data-aos-easing=ease-out-back] [data-aos]{transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}[data-aos][data-aos][data-aos-easing=ease-in-out-back],body[data-aos-easing=ease-in-out-back] [data-aos]{transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}[data-aos][data-aos][data-aos-easing=ease-in-sine],body[data-aos-easing=ease-in-sine] [data-aos]{transition-timing-function:cubic-bezier(.47,0,.745,.715)}[data-aos][data-aos][data-aos-easing=ease-out-sine],body[data-aos-easing=ease-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.39,.575,.565,1)}[data-aos][data-aos][data-aos-easing=ease-in-out-sine],body[data-aos-easing=ease-in-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.445,.05,.55,.95)}[data-aos][data-aos][data-aos-easing=ease-in-quad],body[data-aos-easing=ease-in-quad] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quad],body[data-aos-easing=ease-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quad],body[data-aos-easing=ease-in-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-cubic],body[data-aos-easing=ease-in-cubic] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-cubic],body[data-aos-easing=ease-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-cubic],body[data-aos-easing=ease-in-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-quart],body[data-aos-easing=ease-in-quart] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quart],body[data-aos-easing=ease-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quart],body[data-aos-easing=ease-in-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos^=fade][data-aos^=fade]{opacity:0;transition-property:opacity,transform}[data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;transform:translateZ(0)}[data-aos=fade-up]{transform:translate3d(0,100px,0)}[data-aos=fade-down]{transform:translate3d(0,-100px,0)}[data-aos=fade-right]{transform:translate3d(-100px,0,0)}[data-aos=fade-left]{transform:translate3d(100px,0,0)}[data-aos=fade-up-right]{transform:translate3d(-100px,100px,0)}[data-aos=fade-up-left]{transform:translate3d(100px,100px,0)}[data-aos=fade-down-right]{transform:translate3d(-100px,-100px,0)}[data-aos=fade-down-left]{transform:translate3d(100px,-100px,0)}[data-aos^=zoom][data-aos^=zoom]{opacity:0;transition-property:opacity,transform}[data-aos^=zoom][data-aos^=zoom].aos-animate{opacity:1;transform:translateZ(0) scale(1)}[data-aos=zoom-in]{transform:scale(.6)}[data-aos=zoom-in-up]{transform:translate3d(0,100px,0) scale(.6)}[data-aos=zoom-in-down]{transform:translate3d(0,-100px,0) scale(.6)}[data-aos=zoom-in-right]{transform:translate3d(-100px,0,0) scale(.6)}[data-aos=zoom-in-left]{transform:translate3d(100px,0,0) scale(.6)}[data-aos=zoom-out]{transform:scale(1.2)}[data-aos=zoom-out-up]{transform:translate3d(0,100px,0) scale(1.2)}[data-aos=zoom-out-down]{transform:translate3d(0,-100px,0) scale(1.2)}[data-aos=zoom-out-right]{transform:translate3d(-100px,0,0) scale(1.2)}[data-aos=zoom-out-left]{transform:translate3d(100px,0,0) scale(1.2)}[data-aos^=slide][data-aos^=slide]{transition-property:transform}[data-aos^=slide][data-aos^=slide].aos-animate{transform:translateZ(0)}[data-aos=slide-up]{transform:translate3d(0,100%,0)}[data-aos=slide-down]{transform:translate3d(0,-100%,0)}[data-aos=slide-right]{transform:translate3d(-100%,0,0)}[data-aos=slide-left]{transform:translate3d(100%,0,0)}[data-aos^=flip][data-aos^=flip]{backface-visibility:hidden;transition-property:transform}[data-aos=flip-left]{transform:perspective(2500px) rotateY(-100deg)}[data-aos=flip-left].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-right]{transform:perspective(2500px) rotateY(100deg)}[data-aos=flip-right].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-up]{transform:perspective(2500px) rotateX(-100deg)}[data-aos=flip-up].aos-animate{transform:perspective(2500px) rotateX(0)}[data-aos=flip-down]{transform:perspective(2500px) rotateX(100deg)}[data-aos=flip-down].aos-animate{transform:perspective(2500px) rotateX(0)} /*-----------------------------------------------------整體預設架構-------------------------------------------------------------*/ :root { --main-color-white: #ffffff; --main-color-block: #363636; --main-color-pink: #EA5B6F; --main-color-pink2: #F58393; --main-color-blue: #0985DC; --main-color-blue2: #48ABF1; --main-color-gray: #F5F5F5; --main-color-gray2: #D8D8D8; --main-color-gray3: #E5E5E5; --main-color-gray4: #707070; --header-height: 60px; } /*文字設定*/ html { font-size: 100%; -webkit-text-size-adjust: 100%; /* 避免縮放時文字閃爍 */ } body { font-family: 'Inter', /* 英文 */ 'Noto Sans TC', /* 中文 */ sans-serif; font-size: 1rem; /* 預設 16px */ font-weight: 400; line-height: 1.5; letter-spacing: 1px; color: var(--main-color-block); background-color: var(--main-color-white); background-image: url(/Images/bg.png); background-repeat: repeat; } h1 { font-size: 2.875rem; /* 46px */ font-weight: 800; letter-spacing: 2px; } h2 { font-size: 1.5rem; /* 24px */ line-height: 1.2; font-weight: 800; letter-spacing: 2px; } h3 { font-size: 1.25rem; /* 20px */ font-weight: 600; } h4 { font-size: 1.125rem; /* 18px */ font-weight: 500; } p { font-size: 1rem; /* 預設 16px */ } .small-word { font-size: 0.875rem; /* 預設 14px */ } /*寬度設定*/ .container { width: 92%; max-width: 1440px; margin: 0 auto; } /*scroll*/ body.no-scroll { overflow: hidden; } /*---無法選取---*/ .no_select { user-select: none; } /* link */ .link-blue { color: var(--main-color-blue); text-decoration: underline; transition: color 0.2s; } .link-blue:hover { color: var(--main-color-blue2); } /*-----------------------共用-----------------------*/ /*--- 圖片 ---*/ .img-mobile { display: none; } /*--- 按鈕 ---*/ .btn { display: block; text-align: center; padding: 8px 40px; border-radius: 30px; font-size: 1.125rem; /* 18px */ font-weight: 500; color: var(--main-color-block); cursor: pointer; transition: all 0.3s ease; } .btn:hover { background-color: var(--main-color-blue2); color: var(--main-color-white); } .btn-red { background-color: var(--main-color-pink); color: var(--main-color-white); } /*主體按鈕*/ .btn-go-box { text-align: center; position: relative; z-index: 20; margin-bottom: 10px; margin-right: 10px; } .btn-go { display: inline-flex; align-items: center; justify-content: center; gap: 12px; /* 文字與圖示的距離 */ background-color: var(--main-color-pink); color: #ffffff; font-size: 1.5rem; /* 24px */ letter-spacing: 2px; padding: 12px 30px; border-radius: 50px 50px 50px 0; border: 5px solid var(--main-color-white); box-shadow: 4px 5px 0px var(--main-color-block); transition: all 0.2s ease; animation: btnJumpAnim 2.5s infinite; } .btn-go:hover { transform: translateY(-2px); box-shadow: 4px 7px 0px var(--main-color-block); background-color: var(--main-color-blue2); animation-play-state: paused; } .btn-go:active { transform: translate(3px, 4px); box-shadow: 1px 1px 0px var(--main-color-block); } /* 右側白色圓形與圖示 */ .btn-go .icon-circle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: var(--main-color-white); border-radius: 50%; } .btn-go .icon-circle .icon-go { width: 14px; height: 14px; transition: background-color 0.2s ease; } .btn-go:hover .icon-go { background-color: var(--main-color-blue2); } /*--- icon ---*/ .icon-love { display: inline-block; aspect-ratio: 19/17; background: var(--main-color-white); mask-image: url(/Images/icon-love.svg); mask-size: 100%; mask-repeat: no-repeat; -webkit-mask-image: url(/Images/icon-love.svg); -webkit-mask-size: 100%; -webkit-mask-repeat: no-repeat; z-index: 10; } .icon-tourist-hotel { display: inline-block; aspect-ratio: 24/24; background: var(--main-color-white); mask-image: url(/Images/icon-tourist-hotel.svg); mask-size: 100%; mask-repeat: no-repeat; -webkit-mask-image: url(/Images/icon-tourist-hotel.svg); -webkit-mask-size: 100%; -webkit-mask-repeat: no-repeat; z-index: 10; } .icon-general-hotel { display: inline-block; aspect-ratio: 23/24; background: var(--main-color-white); mask-image: url(/Images/icon-general-hotel.svg); mask-size: 100%; mask-repeat: no-repeat; -webkit-mask-image: url(/Images/icon-general-hotel.svg); -webkit-mask-size: 100%; -webkit-mask-repeat: no-repeat; z-index: 10; } .icon-bnb { display: inline-block; aspect-ratio: 25/22; background: var(--main-color-white); mask-image: url(/Images/icon-bnb.svg); mask-size: 100%; mask-repeat: no-repeat; -webkit-mask-image: url(/Images/icon-bnb.svg); -webkit-mask-size: 100%; -webkit-mask-repeat: no-repeat; z-index: 10; } .icon-top { display: inline-block; aspect-ratio: 17/20; background: var(--main-color-white); mask-image: url(/Images/icon-top.svg); mask-size: 100%; mask-repeat: no-repeat; -webkit-mask-image: url(/Images/icon-top.svg); -webkit-mask-size: 100%; -webkit-mask-repeat: no-repeat; z-index: 10; } .icon-firework { display: inline-block; width: 32px; height: 32px; background-image: url(/Images/icon-firework.svg); background-repeat: no-repeat; background-size: 100%; } .icon-star { display: inline-block; width: 24px; height: 24px; background-image: url(/Images/icon-star.svg); background-repeat: no-repeat; background-size: 100%; } .icon-crown { display: inline-block; width: 51px; height: 35px; background-image: url(/Images/icon-crown.svg); background-repeat: no-repeat; background-size: 100%; } .icon-love-dialog { display: inline-block; width: 25px; height: 29px; background-image: url(/Images/icon-love-dialog.svg); background-repeat: no-repeat; background-size: 100%; } .icon-like-dialog { display: inline-block; width: 38px; height: 31px; background-image: url(/Images/icon-like-dialog.svg); background-repeat: no-repeat; background-size: 100%; } .icon-go { display: inline-block; aspect-ratio: 14/14; background: var(--main-color-pink); mask-image: url(/Images/icon-go.svg); mask-size: 100%; mask-repeat: no-repeat; -webkit-mask-image: url(/Images/icon-go.svg); -webkit-mask-size: 100%; -webkit-mask-repeat: no-repeat; z-index: 10; } .icon-page-vote { display: inline-block; width: 50px; height: 42px; background-image: url(/Images/icon-page-vote.svg); background-repeat: no-repeat; background-size: 100%; } .icon-page-about { display: inline-block; width: 44px; height: 42px; background-image: url(/Images/icon-page-about.svg); background-repeat: no-repeat; background-size: 100%; } .icon-page-vote-result { display: inline-block; width: 35px; height: 43px; background-image: url(/Images/icon-page-vote-result.svg); background-repeat: no-repeat; background-size: 100%; } .icon-page-award { display: inline-block; width: 40px; height: 35px; background-image: url(/Images/icon-page-award.svg); background-repeat: no-repeat; background-size: 100%; } .icon-bay-leaf { display: inline-block; width: 36px; height: 52px; background: #ECAD00; mask-image: url(/Images/vote-result/icon-bay-leaf.svg); mask-size: 100%; mask-repeat: no-repeat; -webkit-mask-image: url(/Images/vote-result/icon-bay-leaf.svg); -webkit-mask-size: 100%; -webkit-mask-repeat: no-repeat; z-index: 10; } .icon-check { display: inline-block; width: 14px; height: 14px; background: var(--main-color-white); mask-image: url(/Images/icon-check.svg); mask-size: 100%; mask-repeat: no-repeat; -webkit-mask-image: url(/Images/icon-check.svg); -webkit-mask-size: 100%; -webkit-mask-repeat: no-repeat; z-index: 10; pointer-events: none; } .icon-x { display: inline-block; width: 14px; height: 14px; aspect-ratio: 14/14; background: var(--main-color-white); mask-image: url(/Images/icon-x.svg); mask-size: 100%; mask-repeat: no-repeat; -webkit-mask-image: url(/Images/icon-x.svg); -webkit-mask-size: 100%; -webkit-mask-repeat: no-repeat; z-index: 10; pointer-events: none; } /* 社群分享 share !!不能改色!! */ .icon-share { display: inline-block; background-repeat: no-repeat; background-size: 100%; width: 35px; height: 35px; transition: filter 0.3s ease; } .icon-share-love { background-image: url(/Images/icon-share-love.svg); } .icon-share-love-no { background-image: url(/Images/icon-share-love-no.svg); } .icon-share-fb { background-image: url(/Images/icon-share-fb.svg); } .icon-share-line { background-image: url(/Images/icon-share-line.svg); } .icon-share-ig { background-image: url(/Images/icon-share-ig.svg); } .icon-share:hover { filter: brightness(1.2); } .icon-share-love2 { background-image: url(/Images/icon-share-love2.svg); } /* icon-login !!不能改色!! */ .icon-login-google { display: inline-block; width: 44px; height: 44px; background-image: url(/Images/icon-login-google.svg); background-repeat: no-repeat; background-size: 100%; } .icon-login-LINE { display: inline-block; width: 48px; height: 45px; background-image: url(/Images/icon-login-LINE.svg); background-repeat: no-repeat; background-size: 100%; } /*--- 動畫設置---*/ .firework-animation { position: absolute; opacity: 0; pointer-events: none; animation: fireworkBurst 2.5s infinite ease-out; } @keyframes fireworkBurst { 0% { transform: scale(0.2); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } } .crown-animation { animation: crownFloat 4s ease-in-out infinite; } @keyframes crownFloat { 0%, 100% { transform: translateY(0) rotate(-15deg); } 50% { transform: translateY(-8px) rotate(-10deg); } } .love-dialog-animation { animation: loveHeartbeat 2.5s ease-in-out infinite; } .like-dialog-animation { animation: loveHeartbeat 3.2s ease-in-out infinite; animation-delay: 0.8s; } @keyframes loveHeartbeat { 0%, 100% { transform: scale(1) translateY(0); } 15% { transform: scale(1.15) translateY(-3px); } 30% { transform: scale(1) translateY(0); } 45% { transform: scale(1.15) translateY(-3px); } 60%, 100% { transform: scale(1) translateY(0); } } @keyframes dateFloat { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } @keyframes btnJumpAnim { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-15px); } 60% { transform: translateY(-7px); } } @keyframes periodicScale { 0%, 60% { transform: scale(1) translateZ(0); } 70% { transform: scale(1.08) translateZ(0); } 80% { transform: scale(1.08) translateZ(0); } 90%, 100% { transform: scale(1) translateZ(0); } } /*--- form 表單---*/ .form-wrapper { width: 92%; max-width: 500px; margin: 0 auto; } .form-wrapper .hint { text-align: center; font-size: 1.125rem; margin-bottom: 20px; color: var(--main-color-gray4); } .input-group { margin-bottom: 12px; } label { display: block; font-size: 1.25rem; margin-bottom: 10px; font-weight: 500; } input { border: none; padding: 12px 20px; font-size: 1.125rem; color: var(--main-color-block); background-color: var(--main-color-gray3); width: 100%; box-sizing: border-box; border-radius: 10px; transition: background-color 0.2s ease; } input:focus { outline: none; background-color: var(--main-color-gray2); } .btn-form { width: 100%; display: block; background-color: var(--main-color-pink); color: var(--main-color-white); font-size: 1.25rem; font-weight: bold; padding: 20px 0; border: none; border-radius: 40px; cursor: pointer; margin-top: 15px; letter-spacing: 4px; transition: all 0.3s ease; } .btn-form:hover { background-color: var(--main-color-pink2); color: var(--main-color-white); } .form-actions { display: flex; justify-content: center; align-items: center; gap: 30px; } .form-actions .btn-form { margin-top: 0; flex: 1; padding: 15px 0; } .btn-form.btn-gray { background-color: var(--main-color-gray2); color: var(--main-color-block); } .btn-form.btn-gray:hover { background-color: var(--main-color-block); color: var(--main-color-white); } .btn-form.btn-blue { background-color: var(--main-color-blue); color: var(--main-color-white); } .btn-form.btn-blue:hover { background-color: var(--main-color-blue2); } .error input { border: 1px solid var(--main-color-pink); background-color: rgba(234, 93, 111,0.1); } .error .error-text { color: var(--main-color-pink); font-size: 0.85rem; margin-top: 8px; } .input-group.has-error .error-text { display: block; } .input-group.has-error input { box-shadow: 0 0 0 2px var(--main-color-pink, #ed5f72) inset; background-color: #fff0f2; } .password-box { position: relative; } .password-box input { padding-right: 50px; } .btn-toggle-pwd { position: absolute; right: 15px; top: 41%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 5px; display: flex; align-items: center; justify-content: center; } .icon-eye { display: inline-block; width: 20px; height: 20px; background-image: url('/Images/icon-eye-close.svg'); background-size: contain; background-repeat: no-repeat; opacity: 0.6; transition: opacity 0.2s; } .btn-toggle-pwd:hover .icon-eye { opacity: 1; } .icon-eye.open { background-image: url('/Images/icon-eye-open.svg'); } .search-box-group { display: flex; margin-bottom: 20px; } .search-box-group input { border-radius: 10px 0 0 10px; flex: 1; background-color: var(--main-color-gray3, #E5E5E5); border: none; padding: 12px 15px; font-size: 1rem; outline: none; } .search-box-group .btn-search { background-color: var(--main-color-block); color: #ffffff; border: none; padding: 0 25px; font-size: 1.125rem; border-radius: 0 10px 10px 0; cursor: pointer; font-weight: 500; transition: background-color 0.2s; } .search-box-group .btn-search:hover { background-color: #555; } .search-results { border: 1px solid #cccccc; border-radius: 10px; padding: 20px; margin-bottom: 15px; } .result-title { font-size: 1.125rem; font-weight: 500; margin-bottom: 15px; } .radio-label { display: flex; align-items: center; margin-bottom: 12px; cursor: pointer; font-size: 1.125rem; } .radio-label:last-child { margin-bottom: 0; } .radio-label input { display: none; } .custom-radio { width: 20px; height: 20px; border-radius: 50%; background-color: var(--main-color-gray3); margin-right: 15px; position: relative; display: inline-block; } .radio-label input:checked + .custom-radio { background-color: #ffffff; border: 2px solid var(--main-color-blue); } .radio-label input:checked + .custom-radio::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background-color: var(--main-color-blue); border-radius: 50%; } .checkbox-group { margin-top: 15px; margin-bottom: 15px; } .check-label { display: flex; align-items: center; cursor: pointer; font-size: 1.125rem; } .check-label input { display: none; } .custom-checkbox { width: 24px; height: 24px; border: 2px solid #ccc; background-color: #fff; border-radius: 4px; margin-right: 10px; position: relative; transition: 0.2s; } .check-label input:checked + .custom-checkbox { background-color: var(--main-color-blue); border-color: var(--main-color-blue); } .check-label input:checked + .custom-checkbox::after { content: ''; background-image: url(/Images/icon-check.svg); background-repeat: no-repeat; background-size: contain; width: 17px; height: 14px; color: #ffffff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; } textarea { border: none; padding: 15px 20px; font-size: 1.125rem; color: var(--main-color-block); width: 100%; box-sizing: border-box; border-radius: 10px; transition: background-color 0.2s ease; min-height: 120px; font-family: inherit; resize: none; } textarea:focus { outline: none; border: 1px solid var(--main-color-gray2, #e0e0e0); } .upload-box-group { display: flex; } .upload-box-group input[type="text"] { border-radius: 10px 0 0 10px; flex: 1; cursor: not-allowed; } .upload-box-group .btn-upload { background-color: var(--main-color-block); color: #ffffff; border: none; padding: 0 25px; font-size: 1.125rem; border-radius: 0 10px 10px 0; cursor: pointer; font-weight: 500; transition: background-color 0.2s; display: flex; align-items: center; justify-content: center; margin-bottom: 0; white-space: nowrap; } .upload-box-group .btn-upload:hover { background-color: #555; } .upload-box-group .btn-upload input[type="file"] { display: none; } .small-word { color: var(--main-color-gray4); line-height: 1.6; } /*--- 燈箱 modal ---*/ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(54, 54, 54,0.9); z-index: 9999; display: none; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; } .modal-overlay * { box-sizing: border-box; } .modal-content { background-color: #ffffff; width: 100%; max-width: 1600px; height: 90vh; border-radius: 20px; position: relative; display: flex; flex-direction: column; overflow: hidden; } .btn-close-modal { position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; background-color: var(--main-color-pink); color: var(--main-color-white); border: none; border-radius: 10px; font-size: 1.25rem; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: background-color 0.2s; } .btn-close-modal:hover { background-color: var(--main-color-blue2); } .modal-title { text-align: center; font-size: 1.5rem; font-weight: bold; color: var(--main-color-block, #363636); margin: 0; padding: 30px 20px 20px; border-bottom: 1px solid #eeeeee; flex-shrink: 0; } .modal-scroll-area { flex: 1; overflow-y: auto; padding: 30px 40px; } .modal-scroll-area::-webkit-scrollbar { width: 8px; } .modal-scroll-area::-webkit-scrollbar-track { background: #f1f1f1; } .modal-scroll-area::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; } .modal-scroll-area::-webkit-scrollbar-thumb:hover { background: #aaa; } /*--- vote卡片 | 觀光旅館.一般旅館.民宿 ---*/ .section-hotel-box { margin-bottom: 80px; } .section-hotel-box:last-child { margin-bottom: 0; } .section-hotel-box .category-wrapper { position: relative; border: 1px solid var(--main-color-gray4); border-radius: 30px; padding: 30px; } .section-hotel-box .category-title { position: absolute; z-index: 10; top: 0; left: 50%; transform: translate(-50%, -50%); background-image: url(/Images/bg.png); background-repeat: repeat; padding: 0 20px; margin: 0; color: var(--main-color-blue); display: flex; align-items: center; justify-items: center; gap: 8px; } .section-hotel-box .category-title i { background-color: var(--main-color-block); width: 30px; height: 30px; } .section-hotel-box .card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 80px 40px; } .section-hotel-box .hotel-card { position: relative; background: var(--main-color-white); border-radius: 10px 10px 3px 3px; border: 1px solid #9B9B9B; display: flex; flex-direction: column; align-items: center; transition: all 0.3s ease; } .section-hotel-box .hotel-card:hover { border: 1px solid var(--main-color-pink2); } .section-hotel-box .share-icon-box { position: absolute; top: 10px; left: 10px; display: flex; gap: 5px; z-index: 10; } .section-hotel-box .card-img-bpx { display: block; color: inherit; width: 100%; border-radius: 10px 10px 0 0; overflow: hidden; } .section-hotel-box .card-img { width: 100%; height: auto; display: block; object-fit: cover; aspect-ratio: 300 / 213; transition: filter 0.3s ease; } .card-tag-city { position: absolute; right: 8px; top: -38px; z-index: 10; padding: 3px 10px; font-size: 0.85rem; font-weight: 700; color: var(--main-color-block, #333333); background-color: #ffffff; border: 1px solid #d1d5db; border-radius: 12px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); pointer-events: none; } .section-hotel-box .card-info { padding: 20px 20px 40px 20px; text-align: center; position: relative; } .section-hotel-box .hotel-card .card-info h3.votes { color: var(--main-color-blue); margin-top: 5px; } .section-hotel-box .hotel-card:hover .card-info h3.votes { color: var(--main-color-blue2); } .section-hotel-box .vote-unit { font-size: 1rem; margin-left: 3px; } .section-hotel-box .btn-vote { position: absolute; z-index: 10; bottom: -23px; } /*---------------------------------------------------layout---------------------------------------*/ body { margin: 0; display: grid; grid-template-rows: 1fr auto; min-height: 100vh; } /*-----------------------header-----------------------*/ #main-header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); background-color: var(--main-color-block); z-index: 999; transition: box-shadow 0.3s ease; } #main-header.scrolled { box-shadow: 0 4px 10px rgba(0,0,0,0.3); } #main-header .header-inner { display: flex; justify-content: center; align-items: center; height: 100%; position: relative; max-width: 1400px; margin: 0 auto; } #main-header .desktop-nav { display: flex; gap: 35px; } #main-header .desktop-nav a { color: var(--main-color-white); text-decoration: none; font-size: 1.25rem; font-weight: 500; transition: color 0.3s ease; } #main-header .desktop-nav a:hover { color: var(--main-color-pink2); } #main-header .auth-box { position: absolute; right: 12%; height: 100%; background-color: var(--main-color-pink); display: flex; align-items: center; padding: 0 10px; } #main-header .auth-box a { color: var(--main-color-white); text-decoration: none; font-weight: 500; transition: color 0.3s ease; } #main-header .auth-box a:hover { color: var(--main-color-block); } #main-header .auth-box .divider { color: var(--main-color-white); margin: 0 8px; } .mobile-menu-toggle { display: none; } .mobile-nav-overlay { display: none; } /*-----------------------右側浮動選單按鈕 | floating-menu-----------------------*/ .floating-menu { position: fixed; right: 0; bottom: 5%; display: flex; flex-direction: column; gap: 10px; z-index: 100; } .floating-menu .menu-btn { position: relative; display: none; width: 140px; padding: 10px 0; text-align: center; border-radius: 30px 0 0 30px; color: var(--main-color-white); text-decoration: none; background-color: var(--main-color-block); transition: all 0.3s ease; } .floating-menu .menu-btn:hover, .floating-menu .menu-btn.btn-pink:hover { background-color: var(--main-color-blue2); } .floating-menu .menu-btn.btn-pink { background-color: var(--main-color-pink2); } .floating-menu .menu-btn span { display: flex; align-items: center; justify-content: center; gap: 10px; } .floating-menu .menu-btn .word-break { display: flex; align-items: center; } .floating-menu .menu-btn .text-group br { display: none; } .floating-menu .icon-love { width: 19px; height: 17px; } .floating-menu .icon-tourist-hotel { width: 24px; height: 24px; } .floating-menu .icon-general-hotel { width: 23px; height: 24px; } .floating-menu .icon-bnb { width: 25px; height: 22px; } .floating-menu .icon-top { width: 17px; height: 20px; } #btn-top { display: none; } .floating-menu .menu-category-search { width: 78px; height: 82px; margin: 0 auto -8px; color: var(--main-color-block); background-image: url(/Images/bg-dialog-box.svg); background-repeat: no-repeat; background-position: center; background-size: contain; text-decoration: none; display: none; opacity: 0; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; cursor: default; user-select: none; --category-search-x: 0px; animation: categorySearchFloat 2.2s ease-in-out infinite; } @keyframes categorySearchFloat { 0%, 100% { transform: translateX(var(--category-search-x)) translateY(0); } 50% { transform: translateX(var(--category-search-x)) translateY(-8px); } } .floating-menu .category-search-icon { position: absolute; top: -18px; left: -8px; width: 45px; height: 45px; background-color: var(--main-color-block); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .floating-menu .icon-category-search { display: inline-block; width: 25px; height: 28px; background-image: url(/Images/icon-notice.svg); background-repeat: no-repeat; background-size: contain; background-position: center; } .floating-menu .category-search-text { display: block; color: var(--main-color-block); font-size: 1rem; font-weight: 800; line-height: 1.15; text-align: center; } @media (max-width:1440px) { .floating-menu .menu-category-search { width: 48px; height: 74px; margin: 0 auto -6px; background-image: url(/Images/bg-dialog-box-1440.svg); background-repeat: no-repeat; background-position: center; background-size: contain; --category-search-x: 0px; } .floating-menu .category-search-icon { top: -18px; left: 50%; width: 35px; height: 35px; transform: translateX(-50%); background-color: var(--main-color-block); } .floating-menu .icon-category-search { width: 20px; height: 23px; } .floating-menu .category-search-text { font-size: 1rem; line-height: 1.12; } } @media (max-width:1024px) { .floating-menu .menu-category-search { width: 45px; height: 70px; margin: 0 auto -6px; --category-search-x: -1px; } .floating-menu .icon-category-search { width: 18px; height: 18px; } .floating-menu .category-search-text { line-height: 1.12; } } /*-----------------------main-----------------------*/ main { padding: 80px 0; } section { position: relative; } /*-----------------------footer-----------------------*/ #main-footer { position: relative; width: 100%; background-color: var(--main-color-block); color: var(--main-color-white); text-align: center; margin-top: 60px; } #main-footer .footer-deco { position: absolute; z-index: 10; left: 5%; top: -90px; width: 254px; height: 99px; } #main-footer .footer-deco2 { position: absolute; z-index: 10; left: 50%; top: -105px; transform: translateX(-50%); width: 267px; height: 112px; } #main-footer .info { max-width: 1440px; width: 94%; margin: 0 auto; padding: 15px 20px 20px 20px; box-sizing: border-box; } #main-footer p { position: relative; z-index: 2; margin-bottom: 10px; } #main-footer p:last-child { margin-bottom: 0; } .footer-up { position: absolute; z-index: 1; top: -7px; width: 100%; height: 18px; background-image: url(/Images/footer-up.png); background-size: cover; background-position: center; background-repeat: no-repeat; } /*---------------------------------------------------index---------------------------------------*/ #hero-banner { position: relative; width: 100%; height: 100vh; background-image: url(/Images/banner.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; padding-top: var(--header-height); } #hero-banner .banner-logos { position: absolute; top: calc(var(--header-height) + 30px); left: 0; width: 100%; display: flex; justify-content: space-between; padding: 0 8%; pointer-events: none; } #hero-banner .logo-left { height: 110px; width: auto; } #hero-banner .logo-right { height: 75px; width: auto; } .banner-down { position: absolute; bottom: -82px; width: 100%; height: 89px; background-image: url(/Images/banner-down.png); background-size: cover; background-position: center; background-repeat: no-repeat; } #scrollBtn { position: absolute; bottom: 40px; right: 40px; width: 30px; height: 100px; border: 2px solid var(--main-color-white); border-radius: 20px; cursor: pointer; display: flex; justify-content: center; padding-top: 10px; z-index: 10; } #scrollBtn .mouse-dot { width: 15px; height: 15px; background-color: var(--main-color-blue2); border-radius: 20px; animation: scrollAnim 1.5s infinite; } @keyframes scrollAnim { 0% { transform: translateY(0); } 50% { transform: translateY(60px); } 100% { transform: translateY(0); } } /*------------------活動banner-共用 | activities-banner ------------------*/ .activities-banner { padding-bottom: 80px; overflow: hidden; } .activities-banner .container { max-width: 1200px; margin: 0 auto; } .activities-banner .activities-flex-wrapper { display: flex; align-items: center; justify-content: center; gap: 40px; } .activities-banner .deco-img { flex: 0 0 auto; position: relative; } .activities-banner .deco-img img { width: 100%; height: auto; } .activities-banner .activities-content { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; } .activities-banner h2 { font-size: 1.75rem; margin: 0 0 30px 0; } .activities-banner .date-box { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 560px; background-color: var(--main-color-gray); border-radius: 30px; padding: 20px 5%; box-sizing: border-box; animation: periodicScale 4s infinite ease-in-out; backface-visibility: hidden; transform: translateZ(0); will-change: transform; } .activities-banner .date-label { font-size: 1.25rem; font-weight: 600; margin-bottom: 10px; } .activities-banner .date-numbers { display: flex; align-items: center; gap: 20px; color: var(--main-color-pink); } .activities-banner .date-numbers .day { font-size: 3.125rem; font-weight: 800; line-height: 1; letter-spacing: 5px; } .activities-banner .date-numbers .year-wrapper { display: flex; flex-direction: column; align-items: center; font-size: 1.25rem; font-weight: 800; } .activities-banner .date-numbers .year-wrapper::after { content: ''; display: block; width: 120%; height: 3px; background-color: var(--main-color-pink); margin-top: 2px; } /*------------------業者活動banner | business-activities-banner------------------*/ #business-activities-banner { padding-bottom: 0; } #business-activities-banner .activities-flex-wrapper { flex-wrap: wrap; justify-content: center; } #business-activities-banner .deco-left { width: 177px; } #business-activities-banner .deco-right { width: 193px; } #business-activities-banner .crown-left { position: absolute; top: -13px; left: 15px; transform: rotate(-15deg); } #business-activities-banner .love-dialog-right { position: absolute; top: 22px; left: 15px; } #business-activities-banner .like-dialog-right { position: absolute; top: -7px; right: 30px; } #business-activities-banner h2 { margin: 0 0 15px 0; } #business-activities-banner h2 span { color: var(--main-color-blue); } #business-activities-banner .date-box { margin-top: 10px; } #business-activities-banner .btn-go-box { width: 100%; order: 4; padding-top: 20px; padding-bottom: 20px; display: flex; justify-content: center; align-items: center; position: relative; z-index: 20; } /*------------------民眾活動banner | people-activities-banner------------------*/ #people-activities-banner .deco-left { width: 199px; } #people-activities-banner .deco-right { width: 179px; } #people-activities-banner .fw-left-1 { top: 25%; left: -15%; width: 35px; height: 35px; animation-delay: 1s; } #people-activities-banner .fw-left-2 { bottom: 5%; right: 5%; width: 45px; height: 45px; animation-delay: 2.4s; } #people-activities-banner .fw-right-1 { top: 40%; left: -5%; width: 40px; height: 40px; animation-delay: 1.6s; } #people-activities-banner .fw-right-2 { bottom: 25%; right: -15%; width: 30px; height: 30px; animation-delay: 2.8s; } #people-activities-banner h2.main-title { position: relative; } #people-activities-banner h2.main-title::after { content: ''; position: absolute; top: -3px; right: -25px; width: 19px; height: 19px; background-image: url(/Images/icon-star.svg); background-repeat: no-repeat; background-size: contain; } #people-activities-banner .main-title .highlight { font-size: 2.875rem; font-weight: 800; letter-spacing: 2px; } /*------------------搜尋列表 (form) | search-section------------------*/ .search-section { margin-bottom: 40px; } .search-section .container { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 900px; margin: 0 auto; } /*---第一層：地區篩選選單 (含 RWD 橫向滾動)---*/ .region-scroll-wrapper { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding: 4px 0; } .region-nav { display: inline-flex; align-items: center; justify-content: flex-start; gap: 15px; /* 控制地區與直線之間的間距 */ list-style: none; padding: 0 8px; margin: 0; white-space: nowrap; } .region-nav a { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.25rem; /* 20px */ text-align: center; padding: 5px 15px; border-radius: 30px; transition: all 0.3s ease; text-decoration: none; color: var(--main-color-block); } .region-nav a:hover { color: var(--main-color-blue2); } .region-nav a.active { background-color: var(--main-color-blue2); color: var(--main-color-white); } .region-nav .divider { font-size: 1rem; pointer-events: none; user-select: none; color: #ccc; } /*---第二層：縣市標籤模組 (方案 A：手機端自動換行)---*/ .city-container { width: 100%; display: flex; justify-content: center; } .city-nav { display: flex; flex-wrap: wrap; /* 行動端自動換行 */ justify-content: center; align-items: center; gap: 8px 10px; /* 上下 8px, 左右 10px */ list-style: none; padding: 0; margin: 0; } .city-nav li { display: inline-block; } .city-link { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1rem; /* 16px */ padding: 5px 16px; border-radius: 20px; background-color: #ffffff !important; border: 1px solid #d1d5db !important; /* 加上淺灰色邊框 */ color: #4b5563 !important; text-decoration: none; transition: all 0.3s ease; cursor: pointer; } .city-link:hover { border-color: #48ABF1 !important; color: #48ABF1 !important; } /* 縣市標籤選中時：維持深色 */ .city-link.active { background-color: #363636 !important; border-color: #363636 !important; color: #ffffff !important; } /*---第三層/右側：搜尋框模組---*/ .search-btn-group { display: flex; width: 100%; max-width: 400px; margin-bottom: 20px; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* 加上極輕微陰影，提昇質感 */ } .search-input { flex: 1; background-color: #ffffff !important; /* 純白底 */ border: 1px solid var(--main-color-gray2, #D8D8D8) !important; /* 淺灰框線 */ border-right: none !important; /* 銜接搜尋按鈕 */ padding: 10px 16px; font-size: 1rem !important; color: var(--main-color-block); border-radius: 10px 0 0 10px; outline: none; transition: all 0.2s ease; } /* 點擊輸入框時，邊框變藍 */ .search-input:focus { border-color: var(--main-color-blue2) !important; background-color: #ffffff !important; } .search-input::placeholder { color: #94a3b8; } /* 搜尋按鈕維持深色本體 */ .search-btn { border: none; background-color: var(--main-color-block); color: var(--main-color-white); font-weight: 600; letter-spacing: 2px; padding: 0 25px; cursor: pointer; transition: background-color 0.3s; white-space: nowrap; } .search-btn:hover { background-color: var(--main-color-blue2); } /* 桌機端第一層選單居中對齊 */ @media (min-width: 768px) { .region-scroll-wrapper { text-align: center; } .region-nav { justify-content: center; } } /*---------------------------------------------------page 內頁---------------------------------------*/ #page-banner { margin-top: 60px; } #page-banner .mobile-banner-page { display: none; } .deco-main { position: relative; } .deco-main::before { content: ''; position: absolute; top: 50px; left: 50px; background-image: url(/Images/deco-main-left.png); background-repeat: no-repeat; background-size: 100%; width: 195px; height: 102px; } .deco-main::after { content: ''; position: absolute; top: 50px; right: 50px; background-image: url(/Images/deco-main-right.png); background-repeat: no-repeat; background-size: 100%; width: 226px; height: 88px; } .page-title { position: relative; text-align: center; margin-bottom: 25px; } .page-about #main-header .desktop-nav a.nav-about { color: var(--main-color-pink); } .page-vote #main-header .desktop-nav a.nav-vote { color: var(--main-color-pink); } .page-vote-result #main-header .desktop-nav a.nav-vote-result { color: var(--main-color-pink); } .page-award #main-header .desktop-nav a.nav-award { color: var(--main-color-pink); } .page-collect #main-header .desktop-nav a.nav-vote { color: var(--main-color-white); } .page-login .hint { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 20px; text-align: center; margin-bottom: 20px; } .page-login .hint .text { width: 100%; } .login-hint .link { margin-left: 10px; } #peopleLoginModal .modal-content { max-width: 600px; width: 100%; height: 60vh; } #peopleLoginModal .modal-scroll-area { display: flex; align-items: center; justify-content: center; padding: 30px 40px; } .btn-login-people-box { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; } .btn-login-people-box a { display: block; width: 100%; max-width: 378px; } .btn-login-people { display: flex; align-items: center; justify-content: center; gap: 14px; max-width: 378px; min-height: 70px; padding: 0 20px; font-size: 1.25rem; font-weight: 600; line-height: 1; border-radius: 20px; text-align: center; transition: filter 0.3s ease; } .btn-login-people:hover { filter: brightness(0.95); } .btn-login-google { border: 1px solid var(--main-color-gray2); } .btn-login-LINE { background-color: #02B901; color: var(--main-color-white); } .page-register .hotel-list-details { font-size: 1.125rem; line-height: 1.6; margin-bottom: 30px; color: var(--main-color-block); } .page-register .hotel-list-details .details-title { color: var(--main-color-gray4); margin-bottom: 8px; font-size: 1rem; } .page-register .hotel-list-details .details-text { display: flex; flex-wrap: wrap; text-align: justify; font-weight: 500; } .hotel-list-section .container { max-width: 1200px; width: 92%; margin: 0 auto; } .hotel-list-section .section-title { font-size: 1.25rem; margin-bottom: 20px; } .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .hotel-table { width: 100%; border-collapse: collapse; min-width: 700px; text-align: left; font-size: 1.125rem; color: var(--main-color-block); background: #FFF; } .hotel-table thead { background-color: var(--main-color-gray); } .hotel-table th { padding: 20px 15px; font-weight: 500; white-space: nowrap; } .hotel-table td { padding: 25px 15px; border-bottom: 1px solid var(--main-color-gray3); vertical-align: middle; } .hotel-table td.col-name { font-weight: 600; } .hotel-table tbody tr:last-child td { border-bottom: none; } .col-id { width: 50px; text-align: center; } .col-action { width: 115px; text-align: center; } .status-red { color: var(--main-color-pink); font-weight: 600; } .btn-edit { display: inline-block; background-color: var(--main-color-pink); color: var(--main-color-white); padding: 8px 20px; border-radius: 5px; text-decoration: none; font-size: 1rem; transition: all 0.2s; } .btn-edit:hover { background-color: var(--main-color-blue2); color: var(--main-color-white); } .page-application-form .form-wrapper { max-width: 600px; } .info-list-group { margin-bottom: 10px; } .info-list-group h3 { margin: 0 0 15px 0; font-weight: 500; } .warning-text { color: var(--main-color-pink); margin: 20px 0; font-weight: bold; display: flex; justify-content: center; align-items: flex-start; gap: 8px; line-height: 1.5; text-align: left; } .warning-text .icon-warning { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px; background-color: var(--main-color-pink); color: #fff; border-radius: 50%; font-size: 0.85rem; font-style: normal; margin-top: 2px; } .page-business .status-header { text-align: center; margin-bottom: 20px; } .page-business .status-title { font-size: 1.75rem; font-weight: bold; color: var(--main-color-blue); display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 40px; } .page-business .status-title span { width: 40px; height: 40px; background-color: var(--main-color-blue2); border-radius: 50%; } .page-business .status-title.state-no { color: var(--main-color-pink); } .page-business .status-title.state-no span { width: 40px; height: 40px; background-color: var(--main-color-pink); border-radius: 50%; color: var(--main-color-pink); } .page-business .status-title span .icon-check { width: 16px; height: 16px; } .page-business .status-title span .icon-x { width: 16px; height: 16px; transform: translateY(-3px); } .page-business .form-actions .btn-form { max-width: 300px; } .page-business .info-display-box { background-color: var(--main-color-gray); border-radius: 30px; padding: 25px 50px; } .page-business .info-row { display: flex; margin-bottom: 15px; font-size: 1.125rem; line-height: 1.8; } .page-business .info-row:last-child { margin-bottom: 0; } .page-business .info-label { width: 240px; flex-shrink: 0; font-weight: 500; } .page-business .info-value { flex: 1; } .page-business .photo-gallery { display: flex; flex-wrap: wrap; gap: 5px; } .page-business .photo-gallery img { object-fit: cover; border-radius: 5px; border: 1px solid #ddd; } .about-section .info-card { border: 1px solid var(--main-color-block); border-radius: 30px; padding: 40px; text-align: center; position: relative; z-index: 10; } .about-section .info-card .date-highlight { font-size: 1.5rem; margin: 0 0 10px 0; font-weight: 700; } .about-section .info-card .date-highlight.pink .label { color: var(--main-color-pink); } .about-section .info-card .date-highlight.blue .label { color: var(--main-color-blue); } .about-section .info-card .date-highlight .date { color: var(--main-color-block); } .about-section .info-card .info-desc { margin-top: 20px; line-height: 1.8; } .about-section .btn-go-box { margin: 50px auto; } .about-section .rule-block { margin-bottom: 40px; } .about-section .block-title { font-weight: bold; color: var(--main-color-pink); border-left: 6px solid var(--main-color-pink); padding-left: 12px; margin-bottom: 20px; line-height: 1.2; } .about-section .rule-list { list-style-type: square; padding-left: 20px; margin: 0; } .about-section .rule-list > li { font-size: 1rem; line-height: 2; margin-bottom: 15px; } .about-section .rule-list strong { color: var(--main-color-block); } .about-section .region-list { list-style: none; padding: 0; margin: 10px 0 0 0; } .about-section .region-list li { background-color: var(--main-color-gray); padding: 8px 15px; margin-bottom: 6px; max-width: 500px; } .award-grid { display: flex; gap: 20px; margin-top: 30px; } .about-vote-ad-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin: 38px auto 40px; } .about-vote-ad-item { border-radius: 10px; overflow: hidden; } .about-vote-ad-item img { display: block; width: 100%; height: auto; aspect-ratio: 300 / 200; object-fit: cover; border-radius: 10px; } @media (max-width:1024px) { .about-vote-ad-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 32px auto 36px; } } @media (max-width:480px) { .about-vote-ad-grid { gap: 12px; margin: 26px auto 32px; } .about-vote-ad-item img { border-radius: 6px; } } .about-section .all-award-box img { border-radius: 10px; object-fit: cover; } .about-section .info-card { border: none; padding: 40px 0 0 0; } .about-section .notice-box { background-color: var(--main-color-gray); padding: 40px; margin-top: 40px; border-radius: 10px; } .about-section .notice-box h4 { font-weight: bold; margin: 0 0 15px 0; } .about-section .notice-box h4:not(:first-child) { margin-top: 30px; } .about-section .notice-box ol { list-style-type: decimal; padding-left: 25px; margin: 0; } .about-section .notice-box ol li { line-height: 1.8; margin-bottom: 8px; text-align: justify; } .vote-time { display: flex; padding-bottom: 20px; justify-content: center; } /* 📱 手機端 RWD 專屬優化設定 */ @media (max-width: 768px) { /* 投票時間換行居中 */ .vote-time { flex-direction: column; align-items: center; text-align: center; gap: 6px; } .vote-time .label, .vote-time .date { display: block; } /* 隱藏第一層原生捲軸 */ .region-scroll-wrapper::-webkit-scrollbar { display: none !important; } /* 1. 第一層地區：加上右側漸層淡出遮罩 (提示滑動) */ .region-scroll-wrapper { width: 100%; overflow-x: auto; scrollbar-width: none !important; -ms-overflow-style: none !important; mask-image: linear-gradient(to right, #000 80%, transparent 100%); -webkit-mask-image: linear-gradient(to right, #000 80%, transparent 100%); } .city-container { margin-top: 10px; margin-bottom: 6px; } /* 2. 第三層搜尋列：加上左右 16px 邊界留白，解決貼邊感 */ .search-btn-group { width: 100% !important; max-width: 100% !important; padding: 0 16px !important; box-sizing: border-box !important; } .search-input { padding-left: 14px !important; font-size: 0.95rem !important; } } /*---------------------------------------------------page-detail 內頁-詳細頁---------------------------------------*/ .page-detail .main-content { margin-top: 120px; } .page-detail main { padding-top: 0; } .page-detail .deco-main::before { display: none; } .page-detail .deco-main::after { top: 0; } .top-action-bar { margin-bottom: 20px; } .top-action-bar .btn-back { display: inline-block; border: 1px solid var(--main-color-block); border-radius: 20px; padding: 6px 15px; color: var(--main-color-block); font-size: 1.125rem; background: var(--main-color-white); transition: 0.2s; } .top-action-bar .btn-back:hover { background: var(--main-color-pink); color: var(--main-color-white); border: 1px solid var(--main-color-white); } .page-detail-vote-title { position: relative; text-align: center; margin-bottom: 50px; } .page-detail-vote-title .category-label { display: flex; justify-content: center; gap: 5px; } .page-detail-vote-title .category-label h2 { color: #9B9B9B; font-weight: 600; letter-spacing: 1px; } .page-detail-vote-title .category-label h1 { letter-spacing: 3px; } .page-detail-vote-title .icon-tourist-hotel { width: 24px; height: 24px; background-color: #9B9B9B; } .detail-main-row { display: flex; gap: 50px; margin-bottom: 50px; } .col-left-gallery { width: 45%; } .col-right-info { width: 55%; display: flex; flex-direction: column; } .page-detail .bx-pager { position: absolute; bottom: 30px; width: 100%; z-index: 10; display: flex; justify-content: center; } .bx-wrapper .bx-pager.bx-default-pager a { background: rgba(255, 255, 255, 0.9); width: 15px; height: 15px; border-radius: 50%; margin: 0 10px; transition: all 0.3s; } .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus { background: var(--main-color-pink); } .bx-wrapper { border: none !important; box-shadow: none !important; margin-bottom: 0 !important; border-radius: 50px 50px 50px 0; overflow: hidden; } .bxslider img { width: 100%; aspect-ratio: 660 / 500; object-fit: cover; display: block; } .bx-wrapper .bx-pager { bottom: 15px !important; } .bx-wrapper .bx-controls-direction a { width: 50px; height: 50px; } .bx-wrapper .bx-prev { left: 10px; background: url(/Images/bxslider/controls-2.svg) no-repeat; background-size: contain; transform: rotate(180deg); } .bx-wrapper .bx-next { right: 10px; background: url(/Images/bxslider/controls-2.svg) no-repeat; background-size: contain; } .bx-wrapper .bx-controls-direction a.disabled { display: block !important; opacity: 0.3; cursor: not-allowed; } .action-group { display: flex; gap: 10px; margin-bottom: 30px; } .btn-save, .share-box { background-color: #E9E8E8; border-radius: 10px; padding: 10px; display: flex; align-items: center; gap: 5px; font-size: 1.125rem; font-weight: 500; } .btn-save span.word-opacity { opacity: 0.3; } .info-list { list-style: none; padding: 0; margin: 0 0 auto 0; } .info-list li { display: flex; font-size: 1.25rem; line-height: 2.2; } .info-list .title { flex: 0 0 auto; } .info-list h3 { font-weight: 600; } .info-list .link { text-decoration: underline; transition: color 0.3s ease; } .info-list .link:hover { color: var(--main-color-blue2); } .vote-section-1024 { display: none; } .vote-section { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 30px; padding-top: 20px; } .vote-count .label { display: block; margin-bottom: 5px; } .vote-count .number { font-size: 2.875rem; font-weight: 800; color: var(--main-color-blue); line-height: 1; } .vote-action { display: flex; flex-direction: column; align-items: center; } .vote-hint { color: var(--main-color-pink); font-weight: bold; margin-bottom: 8px; } .hotel-description { font-size: 1.125rem; font-weight: 500; line-height: 2; text-align: justify; margin-bottom: 40px; } .facility-tags { display: flex; flex-wrap: wrap; gap: 12px; } .facility-tags .tag { border: 1px solid #9B9B9B; background: #fff; padding: 5px 8px; border-radius: 8px; } /*------------------內頁-中獎名單 | page-award ------------------*/ .award-section { position: relative; } .award-list-wrap { position: relative; z-index: 10; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 40px; } .award-list-table { width: 100%; min-width: 900px; border-collapse: collapse; text-align: left; background: transparent; } .award-list-table thead { background-color: var(--main-color-gray); } .award-list-table th { padding: 16px 30px; font-size: 1.125rem; color: var(--main-color-block); white-space: nowrap; text-align: left; } .award-list-table th:nth-child(1) { width: 120px; text-align: center; } .award-list-table th:nth-child(2) { width: 420px; } .award-list-table th:nth-child(3) { width: auto; } .award-list-table td { padding: 22px 30px; border-bottom: 1px solid var(--main-color-gray2); font-size: 1rem; line-height: 1.7; vertical-align: top; background: transparent; } .award-list-table td:nth-child(1) { text-align: center; white-space: nowrap; } .award-list-table td:nth-child(2) { font-weight: 600; } .award-list-table td:nth-child(3) { color: var(--main-color-block); font-size: 1rem; } .award-code { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-weight: 600; } .award-code::before, .award-code::after { content: "✦"; font-size: 1rem; line-height: 1; } .award-a .award-code, .award-a td:nth-child(2) { color: #EC8E00; } .award-b .award-code, .award-b td:nth-child(2), .award-c .award-code, .award-c td:nth-child(2) { color: var(--main-color-pink); } .award-d .award-code, .award-d td:nth-child(2), .award-e .award-code, .award-e td:nth-child(2) { color: var(--main-color-blue); } .award-f .award-code, .award-f td:nth-child(2), .award-g .award-code, .award-g td:nth-child(2) { color: var(--main-color-block); } .winner-email-list { list-style: none; padding: 0; margin: 0; } .winner-email-list li { margin-bottom: 6px; line-height: 1.6; word-break: break-word; font-size: 1rem; font-weight: 500; } .winner-email-list li:last-child { margin-bottom: 0; } .award-section .rule-block { margin-top: 40px; } /*------------------內頁-票選結果 | page-vote-result ------------------*/ .result-flag { position: absolute; top: 0; width: 210px; height: 120px; background-repeat: no-repeat; background-size: contain; pointer-events: none; z-index: 3; } .result-flag-left { left: 0; background-image: url(/Images/vote-result/flag-2-left.png); background-position: left top; } .result-flag-right { right: 0; background-image: url(/Images/vote-result/flag-2-right.png); background-position: right top; } .vote-result-hero .result-flag-left { background-image: url(/Images/vote-result/flag-1-left.png); } .vote-result-hero .result-flag-right { background-image: url(/Images/vote-result/flag-1-right.png); } .vote-result-hero { position: relative; z-index: 10; display: flex; align-items: center; justify-content: center; gap: 80px; min-height: 350px; background-color: var(--main-color-gray); border-radius: 30px; padding: 55px 70px; margin-bottom: 70px; overflow: hidden; } .hero-award-title { justify-self: center; position: relative; max-width: 420px; background-color: var(--main-color-white); border: 1px solid #F1D66B; border-radius: 60px; padding: 40px; text-align: center; } .hero-award-title .icon-crown { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: 75px; height: 52px; } .hero-award-title h2, .result-block-title { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 1.5rem; font-weight: 800; color: var(--main-color-block); letter-spacing: 2px; } .hero-award-title .icon-bay-leaf, .result-block-title .icon-bay-leaf { width: 22px; height: 32px; flex-shrink: 0; } .hero-award-title .icon-bay-leaf.right, .result-block-title .icon-bay-leaf.right { transform: scaleX(-1); } .result-block-title .icon-bay-leaf { position: relative; top: 8px; } .result-card-champion { grid-column: 3 / 4; justify-self: center; width: 260px; } .vote-result-hero .fw-hero-1 { top: -50px; left: -80px; width: 40px; height: 40px; animation-delay: 0s; } .vote-result-hero .fw-hero-2 { top: 0px; left: -20px; width: 16px; height: 16px; animation-delay: 0.8s; } .vote-result-hero .fw-hero-3 { top: -40px; left: 20px; width: 28px; height: 28px; animation-delay: 1.3s; } .vote-result-hero .fw-hero-4 { top: -30px; right: 60px; width: 14px; height: 14px; animation-delay: 0.5s; } .vote-result-hero .fw-hero-5 { top: -20px; right: 0px; width: 35px; height: 35px; animation-delay: 0.2s; } .vote-result-hero .fw-hero-6 { top: -50px; right: -45px; width: 25px; height: 25px; animation-delay: 0.5s; } .vote-result-award-block { position: relative; z-index: 10; border: 1px solid var(--main-color-gray4); border-radius: 30px; padding: 60px 60px 70px; margin-bottom: 70px; overflow: hidden; } .vote-result-award-block:last-child { margin-bottom: 0; } .result-block-title { position: relative; z-index: 5; display: table; margin: 0 auto 40px auto; } .result-card-grid { position: relative; z-index: 5; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 75px 35px; justify-items: center; } .result-card { position: relative; width: 100%; max-width: 400px; aspect-ratio: 400 / 400; background-color: var(--main-color-white); border: 1px solid #cfcfcf; border-radius: 10px 10px 0 0; text-align: center; user-select: none; display: flex; flex-direction: column; box-sizing: border-box; } .result-card, .result-card * { cursor: default; } .result-img-box { position: relative; width: 100%; aspect-ratio: 400 / 250; border-radius: 10px 10px 0 0; overflow: hidden; flex-shrink: 0; } .result-img-box img { display: block; width: 100%; height: 100%; object-fit: cover; } .result-medal { position: absolute; top: 10px; right: 10px; z-index: 5; width: clamp(70px, 23%, 92px); pointer-events: none; } .result-medal img { display: block; width: 100%; height: auto; } .result-card-info { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 25px 15px; background-color: var(--main-color-white); box-sizing: border-box; } .result-card-info h3 { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px; } .result-card-info h3::before, .result-card-info h3::after { content: "✦"; font-size: 0.9rem; color: var(--main-color-block); } .result-card-info p { line-height: 1; } .result-card-info strong { font-size: 1.125rem; font-weight: 800; color: var(--main-color-blue); letter-spacing: 1px; } .result-card-info span { font-size: 1rem; font-weight: 700; color: var(--main-color-block); margin-left: 3px; } .result-region { position: absolute; left: 50%; bottom: -38px; transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; min-width: 55px; height: 28px; padding: 0 20px; border-radius: 3px; background-color: var(--main-color-gray2); color: var(--main-color-block); overflow: visible; } .result-card-champion { width: 100%; max-width: 400px; aspect-ratio: 400 / 420; } .result-card-champion .result-medal { top: 8px; right: 8px; width: clamp(95px, 30%, 120px); } .result-card-champion .result-card-info h3 { font-size: 1.75rem; margin-bottom: 14px; } .result-card-champion .result-card-info h3::before, .result-card-champion .result-card-info h3::after { font-size: 1.3rem; } .result-card-champion .result-card-info strong { font-size: 1.5rem; letter-spacing: 2px; } .result-card-champion .result-card-info span { font-size: 1.125rem; } /*------------------業者說明會報名 | webinar------------------*/ .webinar { position: relative; } .webinar .container { max-width: 1100px; } .webinar-card { position: relative; padding: 50px; border: 1px solid var(--main-color-gray4); border-radius: 30px; margin-bottom: 80px; } .webinar-card:last-child { margin-bottom: 0; } .webinar-card-title { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); background-image: url(/Images/bg.png); background-repeat: repeat; padding: 0 30px; font-size: 1.75rem; font-weight: 800; color: var(--main-color-block); white-space: nowrap; } .webinar-card-business .webinar-desc { width: 100%; margin-bottom: 40px; } .webinar-desc p { font-size: 1.125rem; font-weight: 500; line-height: 2; letter-spacing: 1.5px; } .webinar-bottom-row { display: grid; grid-template-columns: 55% 45%; align-items: end; gap: 35px; } .webinar-info-box { position: relative; z-index: 6; } .webinar-info-title { display: flex; align-items: center; gap: 12px; color: var(--main-color-pink); font-size: 1.25rem; font-weight: 700; margin-bottom: 15px; } .webinar-info-title::before { content: ""; display: inline-block; width: 6px; height: 22px; background-color: var(--main-color-pink); } .webinar-info-list p { position: relative; padding-left: 14px; margin-bottom: 12px; font-size: 1.125rem; font-weight: 500; line-height: 1.6; } .webinar-info-list p:last-child { margin-bottom: 0; } .webinar-info-list p::before { content: "▪"; position: absolute; left: 0; top: 0; color: var(--main-color-block); } .webinar-info-list span { color: var(--main-color-blue); font-weight: 800; } .webinar-qr-area { display: flex; align-items: center; justify-content: center; gap: 15px; position: relative; z-index: 6; } .webinar-qr-area-business { justify-content: flex-start; } .webinar-qr-img { display: block; width: 200px; height: 200px; object-fit: contain; } .webinar-qr-label-img { display: block; width: 90px; height: 90px; margin-bottom: 50px; object-fit: contain; flex-shrink: 0; } .webinar-pic { position: relative; display: block; width: 180px; height: 180px; } .webinar-pic::after { display: none; } .webinar-pic img { display: block; width: 100%; height: auto; } .webinar-card-business .webinar-pic { position: absolute; top: 30px; right: 55px; z-index: 5; } .webinar-pic .icon-crown { position: absolute; z-index: 6; top: -14px; left: 18px; transform: rotate(-15deg); } .webinar-meeting-layout { display: grid; grid-template-columns: 40% 60%; align-items: center; gap: 40px; } .webinar-meeting-left { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; } .webinar-meeting-left .webinar-pic { width: 170px; height: 170px; margin-bottom: 10px; } .webinar-pic-meeting { position: relative; } .webinar-pic-meeting img { position: absolute; top: -15px; right: -100px; } .webinar-qr-area-meeting { gap: 18px; margin-left: -65px; } .webinar-qr-area-meeting .webinar-qr-label-meeting { width: 96px; height: 96px; } .webinar-meeting-right .webinar-desc { margin-bottom: 40px; } .webinar-meeting-right .webinar-qr-area-meeting-1024 { display: none; } /*螢幕尺寸【小於】1441時頁面顯示*/ @media (max-width:1440px) { .section-hotel-box .card-grid { gap: 60px 20px; } .section-hotel-box .btn-vote { padding: 5px 20px; bottom: -19px; } .floating-menu .menu-btn { width: 60px; padding: 15px 0; border-radius: 20px 0 0 20px; } .floating-menu .menu-btn span { flex-direction: column; gap: 6px; } .floating-menu .menu-btn .text-group { display: block; line-height: 1.25; text-align: center; } .floating-menu .menu-btn .text-group br { display: inline; } #hero-banner .banner-logos { top: calc(var(--header-height) + 15px); padding: 0 4%; } #hero-banner .logo-left { height: 90px; width: auto; } #hero-banner .logo-right { height: 55px; width: auto; } } /*螢幕尺寸【小於】1281時頁面顯示*/ @media (max-width:1280px) { #main-header .auth-box { right: 8%; } } /*螢幕尺寸【小於】1025時頁面顯示*/ @media (max-width:1024px) { html { font-size: 14px; } h1 { font-size: 2rem; } .img-desktop { display: none; } .img-mobile { display: block; margin: 0 auto; } .section-hotel-box { margin-bottom: 60px; } .section-hotel-box .card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px 20px; } .section-hotel-box .btn-vote { padding: 8px 40px; bottom: -23px; } #main-header .header-inner { justify-content: flex-end; padding-right: 3%; } #main-header .desktop-nav, #main-header .auth-box { display: none; } .mobile-menu-toggle { display: flex; flex-direction: column; gap: 6px; cursor: pointer; z-index: 1000; } .mobile-menu-toggle .bar { display: block; width: 30px; height: 3px; background: var(--main-color-white); border-radius: 2px; transition: all 0.3s ease; } .mobile-menu-toggle.open .bar-1 { transform: translateY(9px) rotate(45deg); } .mobile-menu-toggle.open .bar-2 { opacity: 0; } .mobile-menu-toggle.open .bar-3 { transform: translateY(-9px) rotate(-45deg); } .mobile-nav-overlay { position: absolute; top: var(--header-height); left: 0; width: 100%; background-color: var(--main-color-white); box-shadow: 0 10px 15px rgba(0,0,0,0.1); padding: 10px 0 40px 0; z-index: 998; } .mobile-nav-links { list-style: none; padding: 0; margin: 0 40px; } .mobile-nav-links li { text-align: center; border-bottom: 1px solid var(--main-color-gray2); } .mobile-nav-links li:last-child { border-bottom: none; } .mobile-nav-links a { display: block; padding: 20px 0; color: var(--main-color-block); text-decoration: none; font-size: 1.25rem; font-weight: 500; } .mobile-auth-buttons { display: flex; flex-direction: column; align-items: center; gap: 15px; margin-top: 10px; } .btn-mobile-login, .btn-mobile-register { width: 200px; padding: 10px 0; } .btn-mobile-register { background-color: var(--main-color-gray2); } .floating-menu .menu-btn { width: 45px; border-radius: 10px 0 0 10px; } main { padding: 40px 0; } #main-footer { margin-top: 100px; } .search-section { margin-bottom: 40px; } #hero-banner { height: 600px; background-image: url(/Images/banner.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; padding-top: var(--header-height); } .kv-banner .logo-left { height: 75px; width: auto; } .kv-banner .logo-right { height: 40px; width: auto; } #scrollBtn { right: 3%; } .mobile-intro-text { display: block; } .activities-banner { padding-bottom: 40px; } .activities-banner .activities-flex-wrapper { gap: 20px; } .activities-banner .date-box { padding: 15px 3%; max-width: 350px; margin-top: 10px; } .activities-banner h2 { font-size: 1.5rem; margin: 0 0 15px 0; } .activities-banner .date-numbers .day { font-size: 2.25rem; } #business-activities-banner .deco-left { width: 157px; } #business-activities-banner .deco-right { width: 173px; } #people-activities-banner .deco-left { width: 159px; } #people-activities-banner .deco-right { width: 139px; } #people-activities-banner .main-title .highlight { font-size: 2rem; } .vote-time span { display: block; } /*--- 地區篩選選單 RWD 手機版優化 ---*/ .region-scroll-wrapper { width: 100vw; margin-left: -10px; margin-right: -10px; padding: 5px 15px; } .region-nav { justify-content: flex-start; gap: 5px; padding-bottom: 5px; } .region-nav a { font-size: 1.1rem; padding: 6px 14px; } .deco-main::before, .deco-main::after { display: none; } .award-grid { flex-direction: column; align-items: center; gap: 40px; } .award-grid .award-card img { width: 100%; max-width: 400px; } .about-section .btn-go-box { margin: 35px auto; } .about-section .notice-box { border: none; padding: 20px; } .page-detail-vote-title { margin-bottom: 15px; } .detail-main-row { flex-wrap: wrap; } .col-left-gallery { flex: 0 0 100%; } .col-right-info { flex: 0 0 100%; order: -1; } .vote-section-1024 { display: flex; justify-content: space-between; align-items: flex-end; padding: 30px 0; } .vote-section { display: none; } .hotel-table thead { display: none; } .hotel-table { min-width: auto; } .hotel-table, .hotel-table tbody, .hotel-table tr, .hotel-table td { display: block; width: 100%; box-sizing: border-box; } .hotel-table tr { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; margin-bottom: 30px; padding: 0; border-bottom: none; border: 1px solid var(--main-color-gray4); padding: 20px; border-radius: 10px; } .hotel-table td { padding: 0; border: none; text-align: left; margin-bottom: 5px; } .col-id { order: 1; width: auto; font-size: 1.25rem; padding-right: 10px; padding-top: 5px; } .col-id::before { content: "#"; } .col-name { order: 2; flex: 1; font-size: 1.25rem; font-weight: bold; padding-right: 15px; padding-top: 5px; line-height: 1.4; margin-top: 5px; margin-bottom: 0; color: var(--main-color-blue); } .col-action { order: 3; width: auto; } .hotel-table .btn-edit-box { position: absolute; right: 20px; width: auto; height: auto; } .hotel-table .btn-edit { padding: 5px 10px; } .col-region { order: 4; width: 100%; border: 1px solid var(--main-color-gray4, #ccc); border-bottom: none; border-radius: 8px 8px 0 0; padding: 20px 20px 10px; margin-top: 8px; } .col-region::before { content: "地區："; font-weight: bold; color: var(--main-color-block); } .col-license { order: 5; width: 100%; border-left: 1px solid var(--main-color-gray4, #ccc); border-right: 1px solid var(--main-color-gray4, #ccc); padding: 10px 20px; } .col-license::before { content: "登記證號："; font-weight: bold; color: var(--main-color-block); } .col-status { order: 6; width: 100%; border: 1px solid var(--main-color-gray4, #ccc); border-top: none; border-radius: 0 0 8px 8px; padding: 10px 20px 20px; } .col-status::before { content: "狀態："; font-weight: bold; color: var(--main-color-block); } .hotel-table tbody tr:last-child { margin-bottom: 0; } .award-list-wrap { overflow-x: visible; } .award-list-table { min-width: auto; } .award-list-table, .award-list-table thead, .award-list-table tbody, .award-list-table tr, .award-list-table th, .award-list-table td { display: block; width: 100%; box-sizing: border-box; } .award-list-table thead { display: none; } .award-list-table tbody tr { border-bottom: 1px solid var(--main-color-gray2); padding: 20px 0; } .award-list-table tbody tr:first-child { padding-top: 0; } .award-list-table td { border-bottom: none; padding: 5px 0; } .award-list-table td:nth-child(1) { text-align: left; } .award-list-table td:nth-child(1)::before, .award-list-table td:nth-child(2)::before, .award-list-table td:nth-child(3)::before { content: attr(data-title); display: block; color: var(--main-color-gray4); font-size: 0.875rem; font-weight: 500; margin-bottom: 3px; } .award-list-table td:nth-child(1)::before { display: none; } .award-list-table td:nth-child(3) { margin-top: 10px; } .award-section .notice-box.award-notice-box { margin-top: 45px; } .award-section .notice-box.award-notice-box ol li { line-height: 1.8; } .vote-result-hero { flex-direction: column; gap: 40px; padding: 65px 40px 50px; margin-bottom: 50px; } .hero-award-title { padding: 30px 40px 24px; } .vote-result-award-block { padding: 60px 35px 70px; margin-bottom: 50px; } .result-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 70px 28px; } .result-card { aspect-ratio: auto; } .result-flag { width: 180px; height: 100px; } .vote-result-hero .fw-hero-1 { top: 40px; left: -110px; } .vote-result-hero .fw-hero-2 { top: 8px; left: -50px; } .vote-result-hero .fw-hero-3 { top: 30px; left: -26px; } .vote-result-hero .fw-hero-4 { top: 20px; right: -40px; } .vote-result-hero .fw-hero-5 { top: 10px; right: -100px; } .vote-result-hero .fw-hero-6 { top: 50px; right: -30px; } .webinar .container { width: 92%; max-width: 760px; } .webinar-card { padding: 50px 25px 40px; margin-bottom: 70px; border-radius: 24px; } .webinar-card-title { top: -14px; padding: 0 20px; font-size: 1.5rem; } .webinar-desc p { line-height: 1.9; letter-spacing: 1px; } .webinar-desc br { display: none; } .webinar-card-business .webinar-pic { position: relative; top: auto; right: auto; width: 160px; height: 160px; margin: 0 auto 30px; } .webinar-pic .icon-crown { top: -12px; left: 16px; } .webinar-card-business .webinar-desc { width: 100%; margin-bottom: 30px; } .webinar-bottom-row { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; } .webinar-info-box { width: 100%; margin-bottom: 30px; } .webinar-info-title { font-size: 1.125rem; margin-bottom: 15px; } .webinar-info-title::before { width: 5px; height: 20px; } .webinar-info-list p { font-size: 1rem; line-height: 1.7; margin-bottom: 10px; word-break: break-word; } .webinar-qr-area { gap: 10px; } .webinar-qr-area-business { justify-content: center; } .webinar-qr-img { width: 160px; height: 160px; } .webinar-qr-label-business { width: 86px; height: 86px; margin-bottom: 50px; } .webinar-meeting-layout { display: grid; grid-template-columns: 1fr; gap: 35px; } .webinar-meeting-left { order: -1; width: 100%; } .webinar-meeting-left .webinar-pic { width: 165px; height: 165px; margin: 0 auto 18px; } .webinar-pic-meeting img { position: static; top: auto; right: auto; } .webinar-qr-area-meeting { display: none; } .webinar-qr-area-meeting .webinar-qr-label-meeting { width: 90px; height: 90px; } .webinar-card-meeting .webinar-qr-img { width: 180px; height: 180px; } .webinar-meeting-right .webinar-desc { margin-bottom: 30px; } .webinar-meeting-right .webinar-qr-area-meeting-1024 { display: flex; margin-left: 0; justify-content: center; gap: 10px; } } /*螢幕尺寸【小於】769時頁面顯示---手機*/ @media (max-width: 768px) { .modal-content { height: 95vh; } .modal-title { font-size: 1.5rem; padding: 20px; } .modal-scroll-area { padding: 20px; } .btn-close-modal { top: 15px; right: 15px; width: 32px; height: 32px; font-size: 1rem; } .section-hotel-box .card-grid { grid-template-columns: repeat(1, 1fr); } #hero-banner { height: 750px; background-image: url(/Images/banner-m.jpg); margin-top: 60px; } #hero-banner .banner-logos { display: none; } .activities-banner .activities-flex-wrapper { position: relative; flex-wrap: wrap; gap: 30px; } .activities-banner .activities-content { flex: 0 0 100%; order: -1; } #business-activities-banner .activities-flex-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 15px; flex-direction: unset; } #business-activities-banner .deco-img { grid-row: 3; width: 100%; height: auto; display: flex; justify-content: center; align-items: center; } #business-activities-banner .deco-img img { width: 100%; max-width: 170px; height: auto; } #business-activities-banner .deco-left { grid-column: 1; justify-self: end; } #business-activities-banner .deco-right { grid-column: 2; justify-self: start; } #business-activities-banner i { transform: scale(0.95); } #business-activities-banner .crown-left { position: absolute; top: -19px; left: 29%; transform: rotate(-15deg) scale(0.8); } #business-activities-banner .love-dialog-right { position: absolute; top: 7px; left: 13%; } #business-activities-banner .like-dialog-right { position: absolute; top: -7px; right: 12%; } #business-activities-banner .activities-content { grid-column: span 2; grid-row: 1; justify-self: center; width: 100%; max-width: 560px; margin-bottom: 10px; } #business-activities-banner .btn-go-box { grid-column: span 2; grid-row: 2; justify-self: center; padding-top: 0; margin-bottom: 20px; } #page-banner .desktop-banner-page { display: none; } #page-banner .mobile-banner-page { display: block; } .page-business .form-actions { flex-direction: column; } .page-business .info-display-box { padding: 30px 20px; border-radius: 10px; } .page-business .info-row { flex-direction: column; gap: 5px; margin-bottom: 20px; } .page-business .photo-gallery img { width: 80px; height: 61px; } .vote-result-hero { border-radius: 20px; padding: 65px 20px 40px; } .hero-award-title { width: 100%; padding: 30px 25px 24px; } .vote-result-award-block { padding: 55px 20px 65px; } .result-card-grid { grid-template-columns: 1fr; gap: 70px; max-width: 400px; margin: 0 auto; } .result-card, .result-card-champion { width: 100%; max-width: 400px; } .result-flag { width: 135px; height: 80px; } .result-block-title { margin-bottom: 35px; } .page-vote .vote-time { flex-direction: column; align-items: center; text-align: center; } } /*螢幕尺寸【小於】601時頁面顯示---手機*/ @media (max-width: 600px) { #hero-banner { height: 580px; } } /*螢幕尺寸【小於】481時頁面顯示---手機*/ @media (max-width: 480px) { #hero-banner { height: auto; min-height: 450px; } #people-activities-banner .main-title .highlight { display: block; margin-top: 8px; } #people-activities-banner h2.main-title::after { top: auto; bottom: 18px; right: 12px; width: 16px; height: 16px; } #people-activities-banner .deco-left { width: 139px; } #people-activities-banner .deco-right { width: 119px; } .about-section .info-card { border-radius: 10px; padding: 20px; text-align: left; } .about-section .info-card .date-highlight span { display: block; } .award-list-table tbody tr { padding: 20px 0; } .award-code { gap: 6px; } .award-section .notice-box.award-notice-box h4 { margin-bottom: 15px; } .vote-result-hero { border-radius: 10px; padding: 55px 15px 35px; } .hero-award-title .icon-crown { top: -34px; transform: translateX(-50%) scale(0.9); } .vote-result-award-block { border-radius: 10px; padding: 50px 15px 60px; } .hero-award-title .icon-bay-leaf, .result-block-title .icon-bay-leaf { width: 18px; height: 26px; } .result-card-grid { max-width: 100%; } .result-card-info { padding: 15px 12px 20px; } .result-region { bottom: -34px; height: 26px; } .result-flag { width: 100px; height: 60px; } .vote-result-hero .fw-hero-1 { top: -40px; left: -20px; } .vote-result-hero .fw-hero-2 { display: none; } .vote-result-hero .fw-hero-3 { top: 30px; left: -10px; } .vote-result-hero .fw-hero-4 { top: -32px; right: 27px; } .vote-result-hero .fw-hero-5 { top: -37px; right: -17px; width: 20px; height: 20px; } .vote-result-hero .fw-hero-6 { top: 50px; right: -6px; } .vote-section-1024 { flex-wrap: wrap; justify-content: center; gap: 20px; } #peopleLoginModal .modal-content { height: auto; min-height: 420px; } #peopleLoginModal .modal-scroll-area { padding: 25px 20px; } .btn-login-people { max-width: 100%; min-height: 64px; font-size: 1.125rem; border-radius: 15px; padding: 0 15px; } .icon-login { width: 28px; height: 28px; } } /*====================註冊 > 搜尋旅宿====================*/ .scroll-div { max-height: 370px; overflow-y: auto; } .scroll-div::-webkit-scrollbar { width: 16px; height: 16px; } .scroll-div::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 8px; } .scroll-div::-webkit-scrollbar-thumb { background: #888; border-radius: 8px; border: 3px solid #f1f1f1; } .scroll-div::-webkit-scrollbar-thumb:hover { background: #555; } /*====================錯誤訊息與驗證====================*/ .validation-summary-errors { color: #C00 !important; text-align: center; padding: 5px; background: yellow; margin-top: 10px; font-size: 1.125rem; } .field-validation-error, .field-validation-valid { color: var(--main-color-pink) !important; display: block; height: 20px; } .input-validation-error, .input-validation-error:focus { border: 1px solid var(--main-color-pink) !important; background-color: rgba(234, 93, 111, 0.1); } .colortxt_red { color: var(--main-color-pink) !important; } /*====================狀態標籤====================*/ .s0 { border-radius: 5px; padding: 5px 10px; background: #555; color: #FFF; } .s1 { border-radius: 5px; padding: 5px 10px; background: #e69500; color: #FFF; } .s2 { border-radius: 5px; padding: 5px 10px; background: #00a04c; color: #FFF; } .s3 { border-radius: 5px; padding: 5px 10px; background: #de5233; color: #FFF; } /*====================票數與圖例====================*/ .vote-badge { font-size: 13px; font-weight: bold; color: #ffffff; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-left: 8px; box-sizing: border-box; } .region-nav li a.active .vote-badge { border: 1.5px solid #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.15); } .badge-full { background-color: #ff4757; } .badge-half { background-color: #ffa502; } .badge-empty { background-color: #2ecc71; } .vote-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 20px; font-size: 0.9rem; color: #4b5563; background: #fff9e6;; padding: 6px 20px; border-radius: 30px; max-width: 520px; margin-left: auto; margin-right: auto; } .vote-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 1rem; } .badge-dot { width: 15px; height: 15px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; font-weight: bold; } .vote-legend .bg-full { background-color: #ff4757; } .vote-legend .bg-half { background-color: #ffa502; } .vote-legend .bg-empty { background-color: #2ecc71; }