/*--root: margin + color--*/
:root {
    --xxsize: 10.4167vw;
    /* 原 200px */
    --xlsize: 5.2083vw;
    /* 原 100px */
    --xmsize: 3.3333vw;
    /* 原 64px */
    --mmsize: 2.0833vw;
    /* 原 40px */
    --smsize: 1.875vw;
    /* 原 36px */
    --sssize: 1.5625vw;
    /* 原 30px */
    --xssize: 0.8333vw;
    /* 原 16px */

    --font-color: #ffffff;
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    box-sizing: border-box;
    /* scroll-margin-top: -6.5vw; */
}

html,
body {
    line-height: 1.6;
    letter-spacing: 8%;
    font-size: 16px;
    position: relative;
    width: 100%;
    font-family: "Roboto", 'Noto Sans TC', "Microsoft JhengHei", "微軟正黑", sans-serif;
    background: #000000;
    text-align: center;
    scroll-behavior: smooth;
    color: var(--font-color);
    overflow-x: hidden;
}

html {
    -webkit-text-size-adjust: 100%;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.25;
}

button,
input {
    overflow: visible;
    text-transform: none;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #EEF3F7 inset;
    box-shadow: 0 0 0 1000px #EEF3F7 inset;
    -webkit-text-fill-color: #000000;
    transition: background-color 5000s ease-in-out 0s;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

textarea {
    overflow: auto;
}

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
}

ul,
li {
    list-style: none;
}

button {
    background: transparent;
}

a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s ease;
}

a:hover {
    -webkit-filter: brightness(115%);
    /* Safari */
    filter: brightness(115%);
    transition: 0.3s ease;
}

img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    vertical-align: middle;
}

p {
    font-weight: normal;
}

.mo {
    display: none !important;
}

.pc {
    display: inline-block !important;
}

.page-scale {
    transform-origin: top center;
    width: 100%;
}

/*--font--*/
h3 {
    font-size: 2.5vw;
    /* 原 48px */
}

.font-b {
    font-size: 1.6667vw;
    /* 原 32px */
}

.font-m {
    font-size: 1.5625vw;
    /* 原 30px */
}

p {
    font-size: 1.25vw;
    /* 原 24px */
}

.font-s {
    font-size: 1.0417vw;
    /* 原 20px */
}

.font-ss {
    font-size: 0.9375vw;
    /* 原 18px */
}

.font-ps {
    font-size: 0.8333vw;
    /* 原 16px */
}
/*--mar+pad--*/
.mt-1 {
    margin-top: var(--xssize) !important
}

.mr-1 {
    margin-right: var(--xssize) !important
}

.ml-1 {
    margin-left: var(--xssize) !important
}

.mb-1 {
    margin-bottom: var(--xssize) !important
}

.mt-2 {
    margin-top: var(--sssize) !important
}

.mr-2 {
    margin-right: var(--sssize) !important
}

.mb-2 {
    margin-bottom: var(--sssize) !important
}

.ml-2 {
    margin-left: var(--sssize) !important
}

.mt-3 {
    margin-top: var(--smsize) !important
}

.mr-3 {
    margin-right: var(--smsize) !important
}

.mb-3 {
    margin-bottom: var(--smsize) !important
}

.ml-3 {
    margin-left: var(--smsize) !important
}

.mt-4 {
    margin-top: var(--mmsize) !important
}

.mr-4 {
    margin-right: var(--mmsize) !important
}

.mb-4 {
    margin-bottom: var(--mmsize) !important
}

.ml-4 {
    margin-left: var(--mmsize) !important
}

.mt-5 {
    margin-top: var(--xmsize) !important
}

.mr-5 {
    margin-right: var(--xmsize) !important
}

.mb-5 {
    margin-bottom: var(--xmsize) !important
}

.ml-5 {
    margin-left: var(--xmsize) !important
}

.mt-6 {
    margin-top: var(--xlsize) !important
}

.mr-6 {
    margin-right: var(--xlsize) !important
}

.mb-6 {
    margin-bottom: var(--xlsize) !important
}

.ml-6 {
    margin-left: var(--xlsize) !important
}

.mt-7 {
    margin-top: var(--xxsize) !important
}

.mr-7 {
    margin-right: var(--xxsize) !important
}

.mb-7 {
    margin-bottom: var(--xxsize) !important
}

.ml-7 {
    margin-left: var(--xxsize) !important
}

.pt-1 {
    padding-top: var(--xssize) !important
}

.pr-1 {
    padding-right: var(--xssize) !important
}

.pb-1 {
    padding-bottom: var(--xssize) !important
}

.pl-1 {
    padding-left: var(--xssize) !important
}

.pt-2 {
    padding-top: var(--sssize) !important
}

.pr-2 {
    padding-right: var(--sssize) !important
}

.pb-2 {
    padding-bottom: var(--sssize) !important
}

.pl-2 {
    padding-left: var(--sssize) !important
}

.pt-3 {
    padding-top: var(--smsize) !important
}

.pr-3 {
    padding-right: var(--smsize) !important
}

.pb-3 {
    padding-bottom: var(--smsize) !important
}

.pl-3 {
    padding-left: var(--smsize) !important
}

.pt-4 {
    padding-top: var(--mmsize) !important
}

.pr-4 {
    padding-right: var(--mmsize) !important
}

.pb-4 {
    padding-bottom: var(--mmsize) !important
}

.pl-4 {
    padding-left: var(--mmsize) !important
}

.pt-5 {
    padding-top: var(--xmsize) !important
}

.pr-5 {
    padding-right: var(--xmsize) !important
}

.pb-5 {
    padding-bottom: var(--xmsize) !important
}

.pl-5 {
    padding-left: var(--xmsize) !important
}

.pt-6 {
    padding-top: var(--xlsize) !important
}

.pr-6 {
    padding-right: var(--xlsize) !important
}

.pb-6 {
    padding-bottom: var(--xlsize) !important
}

.pl-6 {
    padding-left: var(--xxsize) !important
}

.pt-7 {
    padding-top: var(--xxsize) !important
}

.pr-7 {
    padding-right: var(--xxsize) !important
}

.pb-7 {
    padding-bottom: var(--xxsize) !important
}

.pl-7 {
    padding-left: var(--xxsize) !important
}

/*--color--*/
.co-gr{
    color: #E4E4E4;
}

/*--other--*/
.center {
    margin: 0 auto;
}

.wall {
    max-width: 1450px;
    width: 90vw;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.lp-s{
    letter-spacing: 4%;
}

.lh-s{
    line-height: 1.4;
}

/*--kv--*/
#kv {
    line-height: 0;
    position: relative;
    z-index: 2;
}

#kv>div>img {
    max-width: 100% !important;
    width: 100vw !important;
}

.title{
    background: url(../images/titile-bg.png) top center no-repeat;
    background-size: 100%;
    max-width: 1013px;
    aspect-ratio: 1013 / 155;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 4%;
}

.title > h3{
    background: linear-gradient(132deg, #FFF 34.24%, #0AEBED 83.47%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/*--about--*/
.about{
    background: url(../images/bg-001.jpg)center no-repeat;
    background-size: 100%;
}

.b-title01{
    width: 22.3vw;
    max-width: 427px;
}

.iconCard-boxs{
    display: flex;
    justify-content: center;
    background: radial-gradient(144.98% 36.25% at 50% 63.75%, #0076CE 0%, rgba(0, 0, 0, 0.00) 31.36%);
    margin-top: -3vw;
}

.iconCard-boxs > article{
    width: 20vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 var(--mmsize);
}

.iconCard-boxs > article > div{
    margin-bottom: var(--xssize);
    width: 7.15vw;
    max-width: 137px;
}

.iconCard-boxs > article > p:last-child{
    text-align: left;
    margin-top: var(--xssize);
}

/*--pro--*/
.pro-name {
    font-size: 1.6667vw;
    font-weight: bold;
    /* 原 32px */
}

.pro-title {
    font-size: 1.25vw;
    font-weight: bold;
    margin-top: 0.5vw;
    /* 原 24px */
}

.pro-tag {
    font-size: 0.9375vw;
    /* 原 18px */
}

.pro-text {
    font-size: 1.0417vw;
    text-align: left;
    width: 32vw;
    /* 原 20px */
}

.pro{
    background: url(../images/bg-002.jpg) center 77% no-repeat;
    background-size: 100%;
    padding-bottom: 11vw;
}

.pro-boxs{
    display: flex;
    justify-content: center;
}

.pro-boxs > article{
    width: 34vw;
}

.proName-box{
    background: url(../images/pro-name-bg.png)top center no-repeat;
    background-size: 100%;
    max-width: 633px;
    width: 33vw;
    aspect-ratio: 633 / 104;
    text-align: left;
    position: relative;
    padding: 0 0 0 1vw;
}

.proName-box > span {
    position: absolute;
    width: 19vw;
    max-width: 360px;
    top: -5vw;
    left: 17vw;
}

.proTag-box{
    display: flex;
    padding: var(--smsize) 0 var(--xssize);
    border-bottom: 0.1vw solid #0076CE;
}

.proTag-box:last-child{
    border-top: 0.1vw solid #0076CE;
}

.proTag-box > span{
    background-color: #0076CE;
    padding: 0.1vw 0.83vw 0.05vw;
    border-radius: 0.2vw;
    margin: 0 0.4vw;
    white-space: nowrap;
}

.proClub-box{
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
}

.proClub-box.mo{
    display: none !important;
}

.proClub-box > p{
    background: url(../images/pro-name-club.png) top center no-repeat;
    background-size: 100%;
    width: 6vw;
    max-width: 101px;
    aspect-ratio: 101 / 87;
    font-weight: bold;
    line-height: 1.2;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1vw;
    padding-top: 0.5vw;
}

/*--ai--*/
.ai{
    background: url(../images/bg-003.jpg) center bottom no-repeat;
    background-size: 100%;
    padding-bottom: 13vw;
}

.aiBoxs{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.aiBoxs > article{
    border-radius: 0.8vw;
    background: linear-gradient(147deg, rgba(3, 69, 97, 0.80) 36.46%, rgba(0, 134, 234, 1) 89.54%);
    /* backdrop-filter: blur(0.8vw); */
    width: 33vw;
    margin: 0 0.8vw;
    text-align: left;
    padding: 2.5vw 1vw 1vw 1.5vw;
    position: relative;
}

.aiBoxs > article:nth-child(n+3){
    margin-top: 3.5vw;
}

.aiBoxs > article > span{
    position: absolute;
    top: -1vw;
    left: 21.5vw;
    width: 11.5vw;
    max-width: 220px;
}

.ai-name {
    font-size: 1.5625vw;
    /* 原 30px */
    background: url(../images/ai-name-bg.png) top left no-repeat;
    background-size: 100%;
    width: 23vw;
    height: 50px;
    aspect-ratio: 361 / 50;
    padding: 0 0 0 3vw;
    margin: -4.3vw 0 0 -3vw;
    font-weight: bold;
}

.ai-title {
    font-size: 1.0417vw;
    /* 原 20px */
    font-weight: bold;
    width: 17vw;
}

.ai-tag {
    font-size: 0.8333vw;
    /* 原 16px */
}

.ai-text {
    font-size: 0.8333vw;
    /* 原 16px */
    width: 19vw;
}

.ai-btn {
    display: flex;
    font-size: 1.0417vw; /* 原 20px */
    color: #0AEBED;
    text-shadow: 0.2vw 0.4vw 0.4vw rgba(0, 0, 0, 0.25);
    align-items: center;
    justify-content: flex-end;
}

.ai-btn > img {
    width: 1.6vw;
}

.ai-tag-boxs > span{
    background-color: #0076CE;
    padding: 0.1vw 0.83vw 0.05vw;
    border-radius: 0.2vw;
    margin-right: 0.3vw;
}

.ai-tag-boxs > span:last-child{
    margin-right: 0;
}

/*--video--*/
.video-boxs{
    display: flex;
    justify-content: space-evenly;
}

.video-boxs > article{
    aspect-ratio: 400 / 330;
    width: 21vw;
    max-width: 400px;
    text-align: left;
    padding: 0 0 0 1vw;
}

.video-boxs > article:nth-child(1){
    background: url(../images/video01.png)top center no-repeat;
    background-size: 100%;
}

.video-boxs > article:nth-child(2){
    background: url(../images/video02.png)top center no-repeat;
    background-size: 100%;
}

.video-boxs > article:nth-child(3){
    background: url(../images/video03.png)top center no-repeat;
    background-size: 100%;
}

.video-boxs > article > a{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 1.5vw;
}

.video-wall{
    background: url(../images/video-alertBg.jpg)top center no-repeat;
    background-size: 100%;
    width: 52vw;
    max-width: 1000px;
    aspect-ratio: 1000 / 613;
    border-radius: 0.5vw;
    position: relative;
}

.video-wall iframe{
    aspect-ratio: 820 / 461;
    max-width: 820px;
    width: 42.8vw;
}

.video-wall p{
    color: #0AEBED;
    font-weight: bold;
    padding: 2vw 0 1vw;
    font-size: 1.875vw;
}

.video-title {
    font-size: 1.25vw;
    /* 原 24px */
}

.video-text {
    font-size: 1.0417vw;
    /* 原 20px */
}

.video-wrap{
    width: 43vw;
    max-width: 820px;
    aspect-ratio: 820 / 461;
    position: relative;
    top: 0vw;
    left: 4.6vw;
    border-radius: 0.5vw;
    overflow: hidden;
}

/*--tab--*/
.nav-boxs > div{
    position: relative;
    max-width: 55vw;
    width: fit-content;
    border-bottom: 2px solid #034561;
    padding: 0 1vw 0.2vw;
    transition: 0.3s ease;
}

.nav-boxs > div.is-active {
    border-bottom: 2px solid #0AEBED;
    transition: 0.3s ease;
}

.nav-boxs > div.is-active::after {
    content: '';
    width: 100%;
    height: 1vw;
    position: absolute;
    bottom: -0.6vw;
    left: 0vw;
    background: radial-gradient(61.15% 50% at 50% 50%, #0AEBED 24.61%, rgba(0, 118, 206, 0.00) 74.94%);
    opacity: 0.9;
}

.nav-boxs > div.is-active > .tab-tag{
    background-color: #0AEBED;
    color: #0076CE;
}

.nav-boxs > div.is-active > .tab-tag::after{
    content: '';
    width: 100%;
    height: 3.2vw;
    position: absolute;
    bottom: 3vw;
    left: 0vw;
    background: radial-gradient(61.15% 50% at 50% 50%, #0AEBED 24.61%, rgba(0, 118, 206, 0.00) 74.94%);
    opacity: 0.9;
    z-index: -1;
    transition: 0.3s ease;
}

.nav-boxs > div.is-active > .tab-title{
    color: #ffffff;
    transition: 0.3s ease;
}

.tab-tag {
    font-size: 0.8333vw;
    /* 原 16px */
    background-color: #034561;
    color: rgba(0, 0, 0, 0.25);
    border-radius: 5vw;
}

.tab-title{
    font-size: 1.25vw;
    /* 原 24px */
    color: #034561;
    font-weight: bold;
    line-height: 1.3;
    margin-top: 0.5vw;
}

.b-title02 {
    width: 22vw;
    max-width: 420px;
}

.tab_contentA.is-active{
    display: block !important;
	text-align: center;
}

.tab_contentA{
    display: none !important;
}

.tabbox{
    background: url(../images/bg-004.jpg)center bottom no-repeat;
    background-size: 100%;
    max-width: 1920px;
    aspect-ratio: 1920 / 900;
}


div.tabbox > nav{
    display: flex;
    justify-content: center;
    cursor: pointer;
}

.tabA01,
.tabA02,
.tab03-boxs{
    display: flex;
    justify-content: center;
}

.tab01-box {
    width: 15.4vw;
    max-width: 294px;
    aspect-ratio: 294 / 271;
    text-align: left;
    padding: 2vw 0.5vw 0 1.8vw;
    margin: 0 0.5vw;
    position: relative;
    isolation: isolate; /* 建立獨立層疊上下文，防止 z-index: -1 掉到父元件後面 */
}

.tab01-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 15.3vw;
    background: url(../images/tab-01bg.png) top center no-repeat;
    background-size: 100%;
    aspect-ratio: 378 / 344;
    z-index: -1;
}

.tab01-box::after {
    content: '';
    position: absolute;
    top: 0.8vw;
    left: 0.8vw;
    width: 14.5vw;
    height: 13vw;
    background: radial-gradient(449.74% 156.39% at 86.96% 0%, rgba(3, 69, 97, 0.00) 0%, #0076CE 59.62%);
    backdrop-filter: blur(0.8vw);
    -webkit-backdrop-filter: blur(0.8vw);
    border-radius: 0.5vw;
    z-index: -2;
}


.tab01-box > span,
.tab02-box > span{
    width: 3vw;
    display: block;
    max-width: 40px;
}

.tab01-box > p:nth-child(2){
    margin-bottom: 2.8vw;
}

.tab02-box{
    text-align: left;
    padding: 1vw 0.5vw 0 1vw;
    letter-spacing: 5%;
    position: relative;
    margin: 0 1vw;
    width: 18.85vw;
    isolation: isolate;
    aspect-ratio: 361 / 284;
}

.tab02-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/tab-02bg.png) top center no-repeat;
    background-size: 100%;
    width: 18.85vw;
    max-width: 361px;
    aspect-ratio: 361 / 284;
    z-index: -1;
}

.tab02-box::after {
    content: '';
    position: absolute;
    top: 0.6vw;
    left: 0.6vw;
    width: 18.2vw;
    height: 14.2vw;
    background: radial-gradient(449.74% 156.39% at 86.96% 0%, rgba(3, 69, 97, 0.00) 0%, #0076CE 59.62%);
    backdrop-filter: blur(0.8vw);
    -webkit-backdrop-filter: blur(0.8vw);
    border-radius: 0.5vw;
    z-index: -2;
}

.tab02-box > *{
    margin-bottom: 0.2vw;
}

.tabA03 > span{
    margin: 0 auto;
    width: 34.3vw;
    display: block;
}

.tab-card > *{
    margin-bottom: 0.4vw;
}

.tab-card > p:nth-child(3){
    margin-bottom: 0;
}

.tab-card > span{
    margin: 0 auto;
    display: block;
    width: 3vw;
    max-width: 40px;
}

.tab-card{
    background: url(../images/tab-03bg.png) top center no-repeat;
    background-size: 100%;
    width: 11.1vw;
    max-width: 213px;
    aspect-ratio: 213 / 210;
    text-align: center;
    padding: 1vw 0.3vw 1vw;
    margin: 0 0.5vw;
}

.tab-card > .step{
    margin-left: 3vw;
    letter-spacing: 5%;
}


/*--section_survey--*/
#survey {
    background: url(../images/bg-005.jpg)center bottom no-repeat;
    background-size: 100%;
    max-width: 1920px;
    aspect-ratio: 1920 / 900;
    margin: 0 auto;
}

.b-title03 {
    width: 22vw;
    max-width: 635px;
}

#survey article {
    position: relative;
    z-index: 3;
}

#survey article header > span > img,
#media article > span:nth-child(2) > img{
    width: 29vw;
    margin: 0 auto;
}

.light {
    display: inline-block;
    color: #20F2EC;
}

#survey .gift-boxs {
    gap: 0 3vw;
    display: flex;
    justify-content: center;
}

#survey .gift-boxs > article{

    padding: 1vw 0 0 0.5vw;
}

.gift-img{
    display: block;
    background: url(../images/gift-bg.png) top center no-repeat;
    background-size: 100%;
    aspect-ratio: 326 / 300;
    max-width: 326px;
    width: 17vw;
    padding: 1vw 1.5vw 1vw 1.5vw;
}

.gift-img span img{
    width: 15.65vw;
    -webkit-animation:  fly 5s infinite;
    animation: fly 5s infinite linear alternate;
    position: relative;
}

.gift-boxs article:nth-child(2) .gift-img span img{
    animation-delay: 1s;
}

#survey .font-s{
    margin: 0.5vw 0;
}

#survey .font-b{
    font-size: 1.77vw;
    font-weight: bold;
    margin-bottom: 0.5vw;
}

.btn_survey{
    display: inline-block;
    margin: 0 auto;
    width: 22.1vw;
}

/*--box_modal--*/
.lightbox {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    height: 100%;
    width: 100%;
    z-index: 1001;
    background: rgba(0, 0, 0, 0.9);
}

.lightbox.is-active {
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
}

.lightbox .box_modal {
    display: none;
}

/*--alert--*/
.alert-title {
    background-color: #182645;
    padding: 0.5vw 0;
    width: 65vw;
    max-width: 960px;
    color: #ffffff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50vw;
    margin-bottom: var(--mmsize);
    margin-right: -0.5vw;
    font-size: clamp(1.4vw, 1.66vw, 1.4vw);
}

.alert-title>img {
    margin-right: 0.5vw;
    max-width: 40px;
    width: 6vw;
}

.alert-title+ul {
    margin-left: 3.5vw;
    margin-bottom: var(--mmsize);
    font-size: clamp(1vw, 1.042vw, 1.25vw);
}

.lightbox .box_modal.is-active {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 2vw 3vw;
    position: relative;
    margin: auto;
    justify-content: center;
}

.modal_content {
    position: relative;
    display: flex;
    align-items: center;
}

.lightbox .box_modal_ps.box_modal.is-active {
    padding: 1.5vw 3.5vw 1vw 3vw;
    text-align: left;
    max-width: 1000px;
    width: 70vw;
}

.lightbox .box_modal.popup_award.is-active {
    background: transparent;
}

.lightbox .box_modal .btn_close {
    position: absolute;
    top: 2.5vw;
    right: 10vw;
    z-index: 1002;
    width: 2vw;
    min-width: 50px;
    height: 2vw;
    min-height: 50px;
    box-sizing: border-box;
}

.lightbox .box_modal_ps.box_modal .btn_close {
    top: 0.5vw;
    right: 0.5vw;
}

.lightbox .box_modal_ps.box_modal .content_inner ol li {
    font-size: clamp(0.80vw, 0.83vw, 1vw);
    text-align: left;
    list-style: auto;
    margin-bottom: 1vw;
    line-height: 1.5;
}

.lightbox .box_modal_ps.box_modal .content_inner ol li:last-child {
    margin-bottom: 0;
}

.lightbox .box_modal .btn_close::before,
.lightbox .box_modal .btn_close::after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: block;
    content: "";
    width: 55%;
    height: 55%;
    margin: auto;
    z-index: 9;
    border-top: 2px solid var(--font-color);
    transform-origin: center;
    pointer-events: none;
}

.lightbox .box_modal.popup_award .btn_close::before,
.lightbox .box_modal.popup_award .btn_close::after {
    border-top: 2px solid var(--font-color);
}

.lightbox .box_modal .btn_close.pop_close::after,
.lightbox .box_modal .btn_close.pop_close::before {
    border-top: 2px solid #000000;
}

.lightbox .box_modal .btn_close::before {
    transform: rotate(45deg) translate(0, 45%);

}

.lightbox .box_modal .btn_close::after {
    transform: rotate(-45deg) translate(0, 45%);
}

.box_modal.is-active {
    display: flex;
}

.box_modal .btn_close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1002;
    width: 2em;
    min-width: 35px;
    height: 2em;
    min-height: 35px;
    box-sizing: border-box;
    color: transparent;
}

div.lightbox.is-active .content_inner {
    position: relative;
    width: 60vw;
    height: fit-content;
    max-height: 90vh;
    overflow: auto;
    color: #0E0E0E;
    background: #ffffff;
    border-radius: 0.8vw;
    padding: 3vw;
    text-align: left;
}

div.lightbox.is-active .content_inner > h3{
    color: #0672CB;
    text-align: center;
    margin: 0 0 2vw
}

.lightbox .box_modal .btn_close {
    top: 1vw;
    right: 1.5vw;
}

.content_inner ul.list li{
    list-style: disc;
    margin-bottom: 1vw;
    line-height: 1.4;
}

.roadLink>span {
    display: block;
    line-height: 0;
}

.roadLink>span>a:hover {
    -webkit-filter: brightness(100%);
    filter: brightness(100%);
    transition: none;
}

/*--footer--*/
footer {
    display: block;
    background: #061728;
    line-height: 1.4;
    position: relative;
    text-align: left;
    z-index: 1;
    color: #ffffff;
}

/* Footer Styles */
.site-footer {
    position: relative;
    width: 100%;
    padding-top: 4%;
    background-color: #000519;
    color: #fff !important;
}

.footer-container {
    box-sizing: border-box;
    width: 100%;
    padding-inline: max(10.4167%, calc(50% - 760px));
}

.site-footer,
.site-footer * {
    color: #fff;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Contact Section */
/* 用 <address> 標記聯絡資訊，瀏覽器預設會斜體，這裡改回來。 */
.footer-contact {
    display: flex;
    align-items: center;
    gap: 15px;
    font-style: normal;
}

.phone-icon {
    flex: none;
    width: 80px;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.contact-text {
    font-size: 18px;
    margin: 0;
}

.contact-number {
    font-size: 18px;
    font-weight: 500;
    margin: 0;
}

.contact-number a {
    color: #fff;
    text-decoration: none;
}

.contact-number a:hover {
    color: #1484ec;
}

/* Social Media Links */
.social-links {
    display: block;
}

.social-links-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}

.social-links-item {
    margin: 0;
    padding: 0;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.social-link:hover {
    transform: scale(1.1);
}

.social-icon {
    width: 40px;
    height: 40px;
}

/* Legal Section */
.footer-legal {
    padding-top: 30px;
}

.legal-text,
.company-info,
.copyright {
    font-size: 16px;
    line-height: 1.6;
    padding-bottom: 20px;
    margin: 0;
}

.legal-text a {
    color: #fff;
    text-decoration: underline;
}

/*--黏人精--*/
.float_menu {
    position: fixed;
    right: 1vw;
    top: 22vw;
    z-index: 99;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

.show-floating-menu .float_menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
    transition: all 0.3s ease;
    pointer-events: auto;
}

.hide-floating-menu .float_menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%) translateX(20px);
    transition: all 0.2s ease;
    pointer-events: none;
}

.hide-floating-menu .float_menu * {
    pointer-events: none;
}

.float_menu_item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 15px;
    max-width: 193px;
    width: 9.5vw;
    position: relative;
    margin-bottom: 1vw;
}

.float_menu_item::before {
    content: '';
    background: url(../images/nav-point.png) top center no-repeat;
    background-size: 100%;
    position: absolute;
    width: 2vw;
    max-width: 36px;
    top: 4vw;
    left: 0vw;
    aspect-ratio: 36 / 36;
    opacity: 0;
    transition: 0.3s ease;
}

.float_menu_item::after {
    content: '';
    background: url(../images/nav-line.png) top center no-repeat;
    background-size: 100%;
    position: absolute;
    width: 3vw;
    max-width: 54px;
    top: 1.5vw;
    left: 8vw;
    aspect-ratio: 54 / 71;
    opacity: 0;
    transition: 0.3s ease;
}

.float_menu_item:hover::before {
    opacity: 1;
    transition: 0.3s ease;
}

.float_menu_item:hover::after {
    opacity: 1;
    left: 6vw;
    transition: 0.3s ease;
}

.float_menu_item:last-child>div {
    width: 12vw;
}

/*--RWD--*/
@media screen and (min-width: 1921px) {

    :root {
        --xxsize: 10.4167rem;
        /* 原 200px */
        --xlsize: 9rem;
        /* 原 100px */
        --xmsize: 5.5rem;
        /* 原 64px */
        --mmsize: 5rem;
        /* 原 40px */
        --smsize: 4rem;
        /* 原 36px */
        --sssize: 1.5625rem;
        /* 原 30px */
        --xssize: 0.8333rem;
        /* 原 16px */
    }

    /*--font--*/
    h3 {
        font-size: 2.5rem;
        /* 原 48px */
    }

    .font-b {
        font-size: 1.6667rem;
        /* 原 32px */
    }

    .font-m {
        font-size: 1.5625rem;
        /* 原 30px */
    }

    p {
        font-size: 1.25rem;
        /* 原 24px */
    }

    .font-s {
        font-size: 1.0417rem;
        /* 原 20px */
    }

    .font-ss {
        font-size: 0.9375rem;
        /* 原 18px */
    }

    .font-ps {
        font-size: 0.8333rem;
        /* 原 16px */
    }

    /*--pro--*/
    .b-title01 {
        width: 22.3rem;
    }

    .pro-name{
        font-size: 1.6667rem;
        padding-top: 0.15vw;
    }

    .pro-title {
        font-size: 1.25rem;
        margin-top: 1.2rem;
    }

    .proName-box > span {
        position: absolute;
        width: 19rem;
        max-width: 360px;
        top: -5rem;
        left: 17rem;
    }

    .pro-text {
        font-size: 1.0417rem;
        width: 32rem;
    }

    .pro-tag {
        font-size: 0.9375rem;
    }

    .proClub-box > p {
        width: 6rem;
        margin: 1rem;
        padding-top: 0.5rem;
    }

    /*--ai--*/
    .aiBoxs > article {
        border-radius: 0.8rem;
        width: 33rem;
        margin: 0 0.8rem;
        padding: 2.5rem 1rem 1rem 1.5rem;
    }

    .ai-name {
        font-size: 1.5625rem;
        width: 23rem;
        padding: 0 0 0 3rem;
        margin: -4.3rem 0 0 -3rem;
    }

    .ai-title {
        font-size: 1.0417rem;
        width: 17rem;
    }

    .ai-text {
        font-size: 0.8333rem;
        width: 19rem;
    }

    .ai-tag {
        font-size: 0.8333rem;
    }

    .aiBoxs > article > span {
        top: -1rem;
        left: 21.5rem;
        width: 11.5rem;
    }

    .ai-btn {
        font-size: 1.0417rem;
        text-shadow: 0.2rem 0.4rem 0.4rem rgba(0, 0, 0, 0.25);
    }

    .ai-btn > img {
        width: 1.6rem;
    }

    /*--video--*/
    .video-boxs > article {
        width: 21rem
    }

    .video-boxs > article > a {
        padding-bottom: 1.5rem;
    }

    .video-title {
        font-size: 1.25rem;
    }

    .video-wall {
        width: 52rem;
        border-radius: 0.5rem;
    }

    .video-wrap {
        width: 43rem;
        top: -1%;
        left: 8.6%;
        border-radius: 0.5rem;
    }

    .video-wall p {
        padding: 2rem 0 1rem;
        font-size: 1.875rem;
    }

    .lightbox .box_modal .btn_close {
        top: 1rem;
        right: 1.5rem;
    }

    /*--tab--*/
    .b-title02 {
        width: 22rem;
    }

    .nav-boxs > div {
        max-width: 55rem;
        padding: 0 1rem 0.2rem;
    }

    .tab-tag {
        font-size: 0.8333rem;
        border-radius: 5rem;
    }

    .tab-title {
        font-size: 1.25rem;
        margin-top: 0.5rem;
    }

    .nav-boxs > div.is-active > .tab-tag::after {
        height: 3.2rem;
        bottom: 3rem;
        left: 0rem;
    }

    .nav-boxs > div.is-active::after {
        height: 1rem;
        bottom: -0.6rem;
        left: 0rem;
    }

    .tab01-box {
        width: 15.4rem;
        padding: 2rem 0.5rem 0 1.8rem;
        margin: 0 0.5rem;
    }

    .tab01-box::before {
        width: 15.3rem;
    }

    .tab01-box::after {
        top: 0.8rem;
        left: 0.8rem;
        width: 14.5rem;
        height: 13rem;
        backdrop-filter: blur(0.8rem);
        -webkit-backdrop-filter: blur(0.8rem);
        border-radius: 0.5rem;
    }

    .tab01-box > span, .tab02-box > span {
        width: 3rem;
    }

    .tab01-box > p:nth-child(2) {
        margin-bottom: 2.8rem;
    }

    .tab02-box {
        width: 18.85rem;
        padding: 1rem 0.5rem 0 1rem;
        margin: 0 1rem;
    }

    .tab02-box::before {
        width: 18.85rem;
    }

    .tab02-box::after {
        top: 0.6rem;
        left: 0.6rem;
        width: 18.2rem;
        height: 14.2rem;
        backdrop-filter: blur(0.8rem);
        -webkit-backdrop-filter: blur(0.8rem);
        border-radius: 0.5rem;
    }

    .tabA03 > span {
        width: 34.3rem;
    }

    .tab-card {
        width: 11.1rem;
        padding: 1rem 0.3rem 1rem;
        margin: 0 0.5rem;
    }

    .tab-card > .step {
        margin-left: 3rem;
    }

    .tab-card > span {
        width: 3rem;
    }

    .tab-card > * {
        margin-bottom: 0.4rem;
    }

    /*--survey--*/

    .b-title03 {
        width: 22rem;
    }

    #survey .font-s {
        margin-bottom: 0.5rem;
    }

    .btn_survey {
        width: 22.1rem;
    }

    .gift-img {
        width: 43rem;
        padding: 1rem 1.5rem 1rem 1.5rem;
        margin: 0 auto;
    }


    #survey .font-s{
        margin-bottom: 0.5rem;
    }

    #survey .font-b{
        font-size: 1.77rem;
        font-weight: bold;
    }

    /*--nav--*/
    .float_menu_item::before {
        width: 2rem;
        max-width: 36px;
        top: 4rem;
        left: 0rem;
    }

    .float_menu_item:hover::after {
        left: 6rem;
    }

    .float_menu_item::after {
        width: 3rem;
        top: 1.5rem;
        left: 8rem;
    }

    .footertitle {
        font-size: 1.823rem;
    }

    /*黏人精*/

    .float_menu {
        top: 20rem;
        right: 1rem;
    }

    .float_menu_item {
        width: 9.5rem;
    }

    /*--lightbox--*/
    .lightbox .box_modal .content_inner h3 {
        font-size: 2.16rem;
        margin: 0 auto 2rem;
    }

    .lightbox .box_modal .content_inner li {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }
}

@media screen and (max-width:768px) {

    /*--root: margin + color--*/
    .mo {
        display: inline-block !important;
    }

    .pc {
        display: none !important;
    }

    :root {
        --xxsize: 15.49vw;
        /* 原 100px */
        --xlsize: 7.5vw;
        /* 原 64px */
        --xmsize: 5.21vw;
        /* 原 40px */
        --mmsize: 6.98vw;
        /* 原 36px */
        --smsize: 6.43vw;
        /* 原 32px */
        --sssize: 3vw;
        /* 原 16px */
        --xssize: 1.5vw;
        /* 原 16px */
    }

    .wall {
        width: 90vw;
    }

    h3 {
        font-size: 6.25vw;
        /* 原 48px */
        line-height: 1.2;
    }

    .font-b {
        font-size: 3.65vw;
        /* 原 28px */
    }

    .font-m {
        font-size: 2.6042vw;
        /* 原 20px */
    }

    p {
        font-size: 3.125vw;
        /* 原 24px */
    }

    .font-s {
        font-size: 2.6042vw;
        /* 原 20px */
    }

    .font-ss {
        font-size: 2.3438vw;
        /* 原 18px */
    }

    .font-ps {
        font-size: 2.0833vw;
        /* 原 16px */
    }

    .pro-name {
        font-size: 4.9479vw;
        /* 原 38px */
        margin-top: -10vw;
    }

    .pro-title {
        font-size: 3.776vw;
        /* 原 29px */
    }

    .pro-tag {
        font-size: 2.7344vw;
        /* 原 21px */
    }

    .pro-text {
        font-size: 3.125vw;
        /* 原 24px */
    }

    .ai-name {
        font-size: 3.776vw;
        /* 原 29px */
    }

    .ai-title {
        font-size: 3.125vw;
        /* 原 24px */
    }

    .ai-tag {
        font-size: 2.474vw;
        /* 原 19px */
    }

    .ai-text {
        font-size: 2.474vw;
        /* 原 19px */
    }

    .ai-btn {
        font-size: 2.474vw;
        /* 原 19px */
    }

    .video-title {
        font-size: 4.4271vw;
        /* 原 34px */
    }

    .video-text {
        font-size: 3.776vw;
        /* 原 29px */
    }

    .video-wrap {
        width: 73vw;
        top: 2.3vw;
        left: 8.8vw;
    }

    .tab-tag {
        font-size: 1.823vw;
        /* 原 14px */
        padding: 1vw 0;
    }

    .tab-title {
        font-size: 2.604vw;
        /* 原 20px */
        line-height: 1.6;
    }

    /*---about-*/
    .title {
        background: url(../images/titile-bg.png) center bottom no-repeat;
        background-size: 100%;
        padding-bottom: 4vw;
        margin: 4vw 0 3vw;
    }

    .no-wall{
        max-width: fit-content;
        width: 100%;
    }

    .tal{
        text-align: left;
    }

    .b-title01 {
        width: 34vw;
    }

    .about {
        background: url(../images/bg-001.jpg) left 37% no-repeat;
        background-size: 180%;
    }

    .iconCard-boxs {
        flex-direction: column;
        align-items: center;
    }

    .iconCard-boxs > article {
        width: 90vw;

    }

    .iconCard-boxs > article > div {
        width: 18vw;
    }

    .iconCard-boxs > article > p:last-child {
        margin-top: 1vw;
        margin-bottom: 6vw;
    }

    .iconCard-boxs {
        background: radial-gradient(152.86% 35.89% at 50% 64.11%, #0076CE 0%, rgba(0, 0, 0, 0.00) 84.67%);
    }

    /*--pro--*/
    .pro {
        background: none;
    }

    .pro-boxs > article {
        width: 100%;
        margin-bottom: 10vw;
        background: url(../images/bg-002.jpg) center bottom no-repeat;
        background-size: 150%;
    }

    .proName-box {
        background: url(../images/pro-name-bg.png) center bottom no-repeat;
        background-size: 100%;
        width: 100%;
        padding: 0 0 0 4vw;
        aspect-ratio: auto;
    }

    .proName-box > span {
        width: 87.7vw;
        max-width: none;
        position: relative;
        top: inherit;
        left: -3vw;
    }


    .pro-boxs {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .mo-prosection{
        display: flex;
    }

    .proClub-box.mo{
        display: flex !important;
        justify-content: flex-start;
        margin-right: 1vw;
        position: relative;
        width: 50vw;
    }

    .proClub-box > p {
        width: 14vw;
        position: absolute;
    }

    .proClub-box > p:first-child {
        top: 4vw;
    }

    .proClub-box > p:nth-child(2) {
        top: 29vw;
    }

    .proClub-box > p:nth-child(3) {
        top: 43vw;
    }

    .proClub-box.no2 > p:first-child {
        top: 4vw;
    }

    .proClub-box.no2 > p:nth-child(2) {
        top: 24vw;
    }

    .proClub-box.no2 > p:nth-child(3) {
        top: 38vw;
    }

    .proTag-box {
        flex-wrap: wrap;
        padding: 1vw 0 2vw;
    }

    .proTag-box > span {
        margin: 2vw 1vw 0;
        padding: 1vw 2vw 0.8vw;
        border-radius: 0.5vw;
    }

    .pro-text {
        width: fit-content;
    }

    /*--ai--*/
    .ai {
        background: url(../images/bg-003.jpg) right 83% no-repeat;
        background-size: 180%;
    }

    .aiBoxs {
        flex-direction: column;
    }

    .aiBoxs > article {
        border-radius: 0.8vw;
        width: 75vw;
        margin: 0 auto 5vw;
        padding: 2.5vw 2vw 2vw 2vw;
    }

    .aiBoxs > article > span {
        top: 0vw;
        left: 48.5vw;
        width: 35vw;
        max-width: 264px;
    }

    .ai-name {
        width: 50vw;
        padding: 0 0 0 3vw;
        margin: -4.3vw 0 0 -4vw;
    }

    .ai-title,
    .ai-text {
        width: 45vw;
    }

    .ai-tag {
        width: 45vw;
        display: flex;
        flex-wrap: wrap;
    }

    .ai-tag-boxs > span {
        padding: 0.5vw 1.3vw 0.3vw;
        border-radius: 0.5vw;
        margin: 1.5vw 1.5vw 0 0;
    }

    .ai-btn > img {
        width: 3vw;
    }

    /*--video--*/
    .video-boxs {
        flex-direction: column;
        align-items: center;
    }

    .video-boxs > article {
        width: 75vw;
        margin-bottom: 5vw;
        max-width: 576px;
        padding: 0 0 0 3vw;
    }

    .video-boxs > article > a {
        padding-bottom: 5.5vw;
    }

    .video-boxs > article:first-child{
        margin-top: 3vw;
    }

    .video-wall {
        width: 90vw;
    }

    .video-wall iframe {
        width: 76vw;
        margin: 3vw 0 0 0;
    }

    /*--tab--*/
    .tabbox {
        background: url(../images/bg-004.jpg) center bottom no-repeat;
        background-size: 180%;
        overflow: visible !important;
    }

    .b-title02 {
        width: 37.1vw;
    }

    .tabbox > nav {
        justify-content: flex-start !important;
    }

    .tab01-box::after {
        top: 2.8vw;
        left: 2vw;
        width: 39.5vw;
        height: 35vw;
        border-radius: 0.8vw;
    }

    .tab01-box::before {
        width: 41.4vw;
    }


    /* .nav-boxs {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0 0 2.08vw;
        width: 100%;
        max-width: 100vw;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        touch-action: pan-x;
    }

    .nav-boxs::-webkit-scrollbar {
        display: none;
    } */

    .nav-boxs > .btn_tabA {
        flex-shrink: 0;
        scroll-snap-align: start;
        width: 30vw;
    }

    .nav-boxs > div.is-active > .tab-tag::after {
        height: 17vw;
        bottom: 9vw;
    }

    .nav-boxs > div.is-active::after {
        height: 4vw;
        bottom: -2vw;
    }

    .tabA01{
        flex-wrap: wrap;
    }

    .tabA02{
        flex-direction: column;
        align-items: center;
    }

    .tab01-box {
        width: 40vw;
        margin: 0 5vw 5vw 0;
        padding: 6vw 5vw 0 4.2vw;
    }

    .tab01-box > span, .tab02-box > span {
        width: 7vw;
    }

    .tab01-box > p:nth-child(2) {
        margin-bottom: 8vw;
    }

    .tab02-box {
        width: 66.3vw;
        padding: 2.5vw 3vw 0 4vw;
        margin-bottom: 5vw;
        aspect-ratio: 509 / 296;
    }

    .tab02-box::before {
        background: url(../images/tab-02bg_m.png) top center no-repeat;
        background-size: 100%;
        aspect-ratio: 509 / 296;
        top: 0;
        left: 0;
        width: 66.3vw;
        max-width: 509px;
    }

    .tab02-box::after {
        top: 1.6vw;
        left: 1.6vw;
        width: 64.8vw;
        height: 36.8vw;
        border-radius: 1vw;
    }

    .tab02-box > * {
        margin-bottom: 1vw;
    }

    .tabA03 > span {
        margin: 5vw auto 0;
        width: 90vw;
    }

    .tab03-boxs{
        flex-direction: row;
        flex-wrap: wrap;
        width: 90vw;
        justify-content: center;
    }

    .tab-card {
        width: 37vw;
        margin: 0 1vw 1vw;
        padding: 4.3vw 1.5vw 2vw;
    }

    .tab-card > .step {
        margin-left: 5vw;
    }

    .tab-card > span {
        width: 11vw;
    }

    .tab-card > * {
        margin-bottom: 3vw;
    }

    /*--survey--*/
    #survey {
        background: url(../images/bg-005.jpg) center bottom no-repeat;
        background-size: 180%;
        padding-bottom: 10vw;
        aspect-ratio: auto;
    }

    .b-title03 {
        width: 70vw;
    }

    #survey .gift-boxs{
        flex-wrap: wrap;
    }

    .gift-img {
        width: 41.4vw;
        padding: 3vw 0 0 0.5vw;
        margin: 0 auto;
    }

    #survey .gift-boxs > article:first-child {
        width: 100%;
    }

    #survey .font-b {
        font-size: 3.65vw;
    }

    .btn_survey {
        width: 60vw;
    }

    #survey .font-s {
        margin: 1.5vw 0 !important;
    }

    .gift-img span img {
        width: 40vw;
    }

    /*--alert--*/
    div.lightbox.is-active .content_inner {
        padding: 5vw 2vw 5vw 7vw;
    }

    .lightbox .box_modal_ps.box_modal.is-active {
        min-width: 90vw;
        padding: 2vw 11vw 2vw 8vw;
    }

    .lightbox .box_modal_ps.box_modal .btn_close {
        top: 0;
        right: 0;
    }

    .lightbox .box_modal .btn_close {
        top: 2vw;
        right: 4.5vw;
    }

    .lightbox .box_modal .btn_close {
        top: 0vw;
        right: 0.5vw;
    }

    .lightbox .box_modal.popup_award .btn_close {
        top: 0rem;
        right: 0rem;
    }

    div.lightbox.is-active .content_inner {
        width: 80vw;
        overflow-x: hidden;
    }

    /*--alert--*/
    .alert-title {
        padding: 0.25rem 0;
        width: 80vw !important;
        margin: 0 auto 5.2vw;
    }

    .alert-title+ul {
        margin-left: 3.5rem;
        text-align: left;
        width: 80vw;
    }

    footer {
        font-size: 2.5vw;
    }

    .footertitle {
        font-size: 3.75vw;
    }

    footer .wall {
        width: 80vw;
    }

    /* footer p.copyright {
        margin: 5vw 0 0 0;
        font-size: 2.9vw;
        line-height: 1.7;
    } */

    .contact-text {
        font-size: 16px;
        margin: 0;
    }

    .contact-number {
        font-size: 16px;
        font-weight: 500;
        margin: 0;
    }

    .legal-text,
    .company-info,
    .copyright {
        font-size: 0.85rem;
    }

    .footer-content {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .site-footer {
        padding: 0;
    }

    /* 手機沒有 footer 設計稿，沿用全站其他區塊的版心：500 / 640 → 左右各 10.9375%。 */
    .footer-container {
        padding-inline: 10.9375%;
    }

    .phone-icon {
        display: none;
    }

    .footer-contact {
        flex-direction: column;
    }

    .contact-info {
        padding-top: 10%;
    }

    .social-links {
        margin-top: 20px;
    }

    body>div.lightbox.is-active>div>div>div.content_inner {
        position: relative;
        width: 90vw;
        height: 90vh;
    }

    .lightbox .box_modal.is-active {
        width: 90vw !important;
        padding: 2vw 1vw;
        height: 90%;
    }

    .float_menu {
        right: 1vw;
        top: 40vw;
    }

    .float_menu_item {
        width: 15vw;
        margin-bottom: 3vw;
    }

    .float_menu_item::before,
    .float_menu_item::after {
        display: none;
    }
}

/*--自訂卷軸--*/
.card-content {
    height: 11vw;
    padding-right: 0.5vw;
    text-align: justify;
    overflow-y: auto;
    overflow-x: hidden;
}

.card-content::-webkit-scrollbar {
    width: 0.3vw;
}

.card-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 0.5vw;
    margin: 0.4vw 0;
}

.card-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
            #d9d9d9,
            #bfbfbf);
    border-radius: 0.5vw;
}

/*--自訂卷軸_END--*/

@keyframes fly{
    0%{
        top: 0;
    }

    50%{
        top: 8%;
    }

    100%{
        top: 0%;
    }
}