@media (min-width: 576px) {
    .modal-dialog-centered {
        min-height: calc(100% - 3.5rem);
        margin: 1.75rem auto;
        max-width: 500px;
    }
    .i_modal .modal-dialog-centered {
        max-width: 430px;
    }
}
@media (max-width: 1199px) {
    /*電腦版*/
    .window .experiment .Waves{
        top:46.5%;
    }
    .window .experiment .icon_01{
        top:42.5%;
    }
    .window .experiment .icon_02{
        top:46%;
    }
}
@media (max-width: 991px) {
    /*電腦版*/
    .window .experiment .Waves {
        top: 45.5%;
    }
    .window .experiment .icon_01 {
        top: 41.5%;
    }
    .window .experiment .icon_02 {
        top: 45%;
    }
}

@media (max-width: 767px) {
    /*admin*/
    .admin_content {
        padding: 20px 15px;
    }
    .admin .title_item{
        display:block;
    }
    .admin .title_item .btn_item {
        margin-left: 0;
        display: block;
        margin-top: 10px;
    }
    .admin .title_item .btn_item .btn {
        margin-right: 10px;
        min-width: 95px;
        width: 100%;
        margin-bottom: 5px;
    }
    .admin .remaining_prizes .r_info .info .text:nth-child(1){
        display:inline-block;
        min-width:150px;
    }
    /*共用modal*/
    .item_modal .modal-content {
        border: 1px solid #50ff9e;
        border-radius: 25px;
        width: 90%;
        margin: auto;
        box-shadow: 0 0 20px #a3ff97;
    }
    .item_modal .modal-header {
        justify-content: center;
        padding: 8px 15px;
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
        border-bottom: 1px solid #50ff9e;
        background: linear-gradient(180deg, rgba(215, 255, 254, 1) 0%, rgba(86, 255, 94, 1) 75%, rgba(255, 255, 255, 1) 100%);
    }
    .item_modal .title span {
        font-family: "Noto Sans TC", sans-serif;
        font-size:19px;
        letter-spacing:2px;
        color:#000000;
    }
    .item_modal .title .t1 {
        font-weight: 900;
    }
    .item_modal .title .t2{
        padding-left:2px;
    }
    .item_modal .title .t2,
    .item_modal .title .other {
        font-weight: 400;
        font-style: italic;
    }
    .item_modal .close {
        position: absolute;
        top: 12px;
        right: 10px;
        text-shadow: none;
        padding: 0;
        margin: 0;
        opacity: 1;
    }
    .item_modal .close span {
        font-family: "Noto Sans TC", sans-serif;
        font-weight: 500;
        font-size: 25px;
        letter-spacing: 2px;
    }
    .item_modal .modal-body {
        padding: 0;
    }
    .item_modal .modal-body .text_item {
        padding: 20px 15px;
        padding-bottom: 30px;
        overflow: auto;
        max-height: 350px;
    }
    .item_modal#member_modal .modal-body .text_item .t1 {
        line-height:17px;
        margin-bottom:10px;
    }
    .item_modal#member_modal .modal-body .error_item {
        overflow: auto;
        max-height: 350px;
    }
    .item_modal .modal-body .text_item span,
    .item_modal .modal-body .text_item p {
        font-family: "Noto Sans TC", sans-serif;
        font-size: 12px;
        letter-spacing: 1px;
        color: #000000;
        margin-bottom: 0;
    }
    .item_modal .modal-body .text_item .title{
        margin-top:15px;
    }
    .item_modal .modal-body .text_item .title span {
        font-size:19px;
        font-weight:900;
    }
    .item_modal .modal-body .text_item .s_text {
        margin-bottom:5px;
    }
    .item_modal .error_item {
        padding: 0 18px;
        padding-top: 20px;
        padding-bottom: 30px;
    }
    .item_modal#checked_modal .error_item .t1 {
        justify-content: center;
    }
    .item_modal .error_item .t1,
    .item_modal .error_item .t2 {
        display: flex;
        align-items: flex-start;
        margin-bottom: 5px;
    }
    .item_modal .error_item span {
        font-family: "Noto Sans TC", sans-serif;
        font-weight: 200;
        font-size: 14px;
        letter-spacing: 1px;
        color: #000000;
    }
    .item_modal .error_item .o1 {
        font-weight: 800;
    }
    .item_modal .error_item .o2 {
        color: #ff7c67;
        font-weight: 800;
    }
    .item_modal .error_item .btn_item {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -15px;
    }
    .item_modal .error_item .btn_item .btn {
        position: relative;
        display: block;
        font-family: "Noto Sans TC", sans-serif;
        font-weight: 800;
        text-align: center;
        border-radius: 20px;
        font-size: 16px;
        letter-spacing: 1px;
        border: none;
        color: #000000;
        z-index: 1;
    }
    .item_modal .error_item .btn_item .btn:before {
        content: "";
        position: absolute;
        background: url('/Images/pic22.png')no-repeat center;
        background-size: 100%;
        inset: 0;
        width: 240px;
        height: 50px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
    }
    .item_modal .eyes {
        display: block;
        position: absolute;
        top: -130%;
        left: 50%;
        transform: translateX(-50%);
        width: 145px;
        margin: 10% auto 0;
        animation: shvr 0.2s infinite;
    }
    .item_modal#member_modal .eyes {
        top:-45%;
    }
    .item_modal#checked_modal .eyes,
    .item_modal#info_modal .eyes,
    .item_modal#no_info_modal .eyes {
        top: -200%;
    }
    .item_modal#info_modal .error_item .t1,
    .item_modal#no_info_modal .error_item .t1 {
        justify-content: center;
    }
    .item_modal .eyes:after {
        content: '';
        width: 15px;
        height: 15px;
        background: #000;
        position: absolute;
        top: 28px;
        left: 25px;
        border-radius: 50%;
        box-shadow: 80px 0 0 #000;
        animation: eye 2.5s infinite;
    }
    .item_modal .eyes .eyes_item {
        position: relative;
        display: inline-block;
        background: #fff;
        width: 55px;
        height: 60px;
        border-radius: 50% 50% 50% 50% / 45px 45px 45% 45%;
        transform: rotate(45deg);
    }
    .item_modal .eyes .eyes_item:after {
        content: '';
        position: absolute;
        border-bottom: 2px solid #fff;
        width: 40px;
        height: 23px;
        left: 8px;
        bottom: -10px;
        border-radius: 50%;
    }
    .item_modal .eyes .eyes_item:before {
        content: '';
        position: absolute;
        top: -100px;
        left: 0;
        transform: rotate(45deg);
    }
    .item_modal .eyes .eyes_item:nth-of-type(2) {
        float: right;
        transform: rotate(-45deg);
    }
    .item_modal .eyes .eyes_item:nth-of-type(2)::after {
        left: 6px;
    }
    .item_modal .eyes .eyes_item:nth-of-type(3) {
        display: none;
    }
    @keyframes eye {
        0%, 30%, 55%, 90%, 100% {
            transform: translate(0, 0);
        }

        10%, 25% {
            transform: translate(0, 10px);
        }

        65% {
            transform: translate(-10px, 0);
        }

        80% {
            transform: translate(10px, 0);
        }
    }

    @keyframes shvr {
        0% {
            transform: translate(1px) translateX(-50%);
        }

        50% {
            transform: translate(0) translateX(-50%);
        }

        100% {
            transform: translate(-1px) translateX(-50%);
        }
    }

    .item_modal#copy_modal .copy_item {
        padding: 15px;
        padding-bottom: 20px;
    }
    .item_modal#copy_modal .copy_item .item {
        padding: 0 5px;
        text-align: center;
    }
    .item_modal#copy_modal .copy_item .icon_item {
        width: 85%;
        margin: auto;
        margin-top: 15px;
    }
    .item_modal#copy_modal .copy_item .item .s_text {
        margin-top: -5px;
    }
    .item_modal#copy_modal .copy_item .item .s_text span {
        font-family: "Noto Sans TC", sans-serif;
        font-weight: 800;
        font-size: 11px;
        color: #000000;
        letter-spacing: 1px;
    }
    /*loading*/
    .loading-screen {
        position: fixed;
        top: 30px;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }
    .particle {
        position: absolute;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        pointer-events: none;
        opacity: 0;
    }
    .loading-container {
        position: relative;
        width:60%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2.5rem;
    }
    .loader-ring {
        position: relative;
        width: 150px;
        height: 150px;
        margin-bottom:20px;
    }
    .loader-ring::before,
    .loader-ring::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 2px solid transparent;
        border-top-color: #4eca52;
        animation: spin 2s linear infinite;
    }
    .loader-ring::after {
        border-top-color: #d7fffe;
        animation: spin 1.5s linear infinite reverse;
    }
    .loader-core {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100px;
        height: 100px;
        animation: pulse_core 2s ease-in-out infinite;
    }
    .progress-container {
        position: relative;
        width: 100%;
    }
    .progress-bar {
        position: relative;
        width: 100%;
        height: 6px;
        background: #444444;
        overflow: hidden;
    }
    .progress {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: linear-gradient(173deg, #d7fffe,#56ff5e);
        width: 0%;
        border-radius:0;
    }
    .progress-text {
        position: absolute;
        top: -28px;
        right: 0;
        font-family: "Noto Serif TC", serif;
        font-weight: 500;
        font-size: 13px;
        color: #f7f7f5;
        letter-spacing: 2px;
    }
    .loading-text {
        font-family: "Noto Sans TC", sans-serif;
        font-weight: 100;
        font-size: 14px;
        color: #f7f7f5;
        letter-spacing: 2px;
        margin-top: -20px;
    }
    .loading-en {
        font-family: "Noto Sans TC", sans-serif;
        font-weight: 100;
        font-size: 23px;
        color: #ffffff;
        letter-spacing: 3px;
        margin-top: 5px;
    }
    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }
    @keyframes pulse_core {
        0%, 100% {
            transform: translate(-50%, -50%) scale(1);
        }

        50% {
            transform: translate(-50%, -50%) scale(1.2);
        }
    }
    @keyframes particleFloat {
        0% {
            transform: translateY(0) translateX(0);
            opacity: 0;
        }

        50% {
            opacity: 0.8;
        }

        100% {
            transform: translateY(-100px) translateX(var(--translateX));
            opacity: 0;
        }
    }
    .other_item {
        position: relative;
        width: 100%;
        height: 90vh;
        background: #000000;
        /*overflow: hidden;*/
    }
    .other_item .item_bg {
        display: block;
        position: absolute;
        top: 3%;
        z-index: 1;
    }
    /*電腦版*/
    .window {
        display: none;
    }
    /*共用*/
    .item_01, 
    .item_02, 
    .item_03
    .item_04 {
        position: relative;
        z-index: 30;
    }
    .share .title {
        width: 90%;
        margin: auto;
        margin-top: 40px;
    }
    .share .text .t1 {
        text-align: center;
        margin-top: 10px;
        margin-bottom: 15px;
    }
    .share .text .t1 span {
        font-family: "Noto Serif TC", serif;
        font-weight: 700;
        font-size: 21px;
        letter-spacing: 1px;
        color: #ffffff;
    }
    .share .text .t1 .other {
        color: #50ff9e;
    }
    .share .text .t2 {
        padding: 0 5px;
        text-align: center;
        margin-bottom: 60px;
    }
    .share .text .t2 span {
        font-family: "Noto Sans TC", sans-serif;
        font-weight: 100;
        font-size: 14px;
        letter-spacing: 1px;
        color: #ffffff;
    }
    .share .text .t2 .other {
        font-weight: 700;
    }
    .share .text .t2 .icon {
        font-style: italic;
    }
    .share .box .smoke {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 2;
    }
    .share .box .form-control {
        height: auto;
        position: relative;
        font-family: "Noto Sans TC", sans-serif;
        font-weight: 600;
        font-size: 16px;
        letter-spacing: 1px;
        color: #ffffff;
        background: transparent;
        border: 2px solid transparent;
        border-radius: 0;
        background-image: linear-gradient(#000, #000), linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(86, 255, 94, 1) 46%, rgba(215, 255, 254, 1) 100%);
        background-origin: border-box;
        background-clip: padding-box, border-box;
        padding: 0 23px;
        padding-top: 6px;
        padding-bottom: 8px;
        box-shadow: 0 -2px var(--shinines) rgba(163, 255, 251, 0.41), 2px 0 var(--shinines) rgba(163, 255, 251, 0.41), 0 2px var(--shinines) rgba(163, 255, 251, 0.41), -2px 0 var(--shinines) rgba(163, 255, 251, 0.41);
    }
    .share .box .form-control::placeholder {
        font-family: "Noto Sans TC", sans-serif;
        font-weight: 600;
        font-size: 16px;
        letter-spacing: 1px;
        color: #ffffff;
    }
    /*item_01*/
    .item_01 {
        position:relative;
        overflow: hidden;
        z-index:2;
    }
    .item_01 .title {
        margin-top: 30px;
    }
    .item_01 .title .t1 {
        position:relative;
        text-align: center;
        padding: 4px 5px;
        width:94%;
        margin:auto;
    }
    .item_01 .title .t1:before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 2px;
        border-radius: 20px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(86, 255, 94, 1) 46%, rgba(215, 255, 254, 1) 100%);
        mask-composite: exclude;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
    }
    .item_01 .title .t1 span {
        font-family: "Noto Serif TC", serif;
        font-weight: 700;
        font-size: 21px;
        letter-spacing: 1px;
        color: #ffffff;
    }
    .item_01 .title .t1 .other {
        font-family: "Noto Sans TC", sans-serif;
        font-weight: 100;
    }
    .item_01 .title .t1 .color {
        color: #50ff9e;
    }
    .item_01 .logo_pic{
        width:40%;
        margin:auto;
        margin-top:25px;
    }
    .item_01 .experiment {
        margin-top: 30px;
    }
    .item_01 .experiment .particle_item {
        width: 100%;
        position: absolute;
        top: 35%;
        left: 50%;
        transform: translateX(-50%);
    }
    .item_01 .experiment .pic{
        width:80%;
        margin:auto;
    }
    .item_01 .experiment .icon_01 {
        position: absolute;
        width: 11%;
        top: 32%;
        left: 18%;
        animation: swingRotate 2s ease-in-out infinite;
    }
    .item_01 .experiment .icon_02 {
        position: absolute;
        width: 8.5%;
        top: 44%;
        right: 17%;
        animation: swingRotate 3s ease-in-out infinite;
    }
    .item_01 .experiment .icon_03 {
        width: 18%;
        position: absolute;
        top: 28%;
        right: 16%;
        animation: swingRotate 4s ease-in-out infinite;
    }
    @keyframes swingRotate {
        0% {
            transform: rotate(10deg);
        }

        50% {
            transform: rotate(-10deg);
        }
        100% {
            transform: rotate(10deg);
        }
    }
    .item_01 .experiment .Waves {
        width: 100%;
        position: absolute;
        top: 36.5%;
        left: 53%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }
    .item_01 .experiment .Waves .bubbleGroup {
        fill: #ffffff
    }
    .item_01 .experiment .Waves .poly {
        width: 100%;
        height: 100%;
        fill: url(#polyGradient_02);
    }
    .item_01 .text_item {
        position: relative;
        z-index: 5;
        text-align: center;
        margin-top: 15px;
    }
    .item_01 .text_item .item {
        margin-bottom:5px;
    }
    .item_01 .text_item .t2 {
        margin-bottom: 10px;
    }
    .item_01 .text_item span {
        position: relative;
        font-family: "Noto Sans TC", sans-serif;
        font-weight: 100;
        color: #ffffff;
        font-size: 14px;
        letter-spacing: 1px;
    }
    .item_01 .text_item .p1:after,
    .item_01 .text_item .p2:after,
    .item_01 .text_item .p3:after {
        content: "";
        position: absolute;
    }
    .item_01 .text_item .p1:after {
        background: url('/Images/pic08.png')no-repeat center;
        background-size: 100%;
        width:38px;
        height:13px;
        left:15px;
        bottom:-10px;
    }
    .item_01 .text_item .p2:after {
        background: url('/Images/pic09.png')no-repeat center;
        background-size: 100%;
        width: 38px;
        height: 13px;
        left: -4px;
        bottom: -10px;
    }
    .item_01 .text_item .p3:after {
        background: url('/Images/pic10.png')no-repeat center;
        background-size: 100%;
        width: 60px;
        height: 25px;
        left: -4px;
        bottom: -3px;
    }
    .item_01 .text_item .item .font {
        font-weight: 700;
    }
    .item_01 .text_item .t1 .style {
        font-style: italic;
    }
    .item_01 .text_item .p4{
        padding-left:10px;
    }
    .item_01 .text_item .t3 .other {
        position: relative;
        background: linear-gradient(180deg, rgba(55, 255, 196, 1) 0%, rgba(86, 255, 94, 1) 46%, rgba(215, 255, 254, 1) 100%);
        background-clip: text;
        color: transparent;
        font-weight: 700;
    }
    .item_01 .play_btn {
        width: 65%;
        margin: auto;
        margin-top: 15px;
        animation: upDown 3s infinite;
    }

    .item_01 .other_btn {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 95%;
        margin: auto;
        margin-top: 20px;
        padding-bottom: 20px;
    }
    .item_01 .other_btn .btn {
        position: relative;
        display: block;
        font-family: "Noto Sans TC", sans-serif;
        font-weight: 800;
        text-align: center;
        border-radius: 20px;
        font-size: 16px;
        letter-spacing: 1px;
        border: none;
        transition: all 0.8s ease;
    }
    .item_01 .other_btn .i1 .btn,
    .item_01 .other_btn .i2 .btn:hover {
        color: #000000;
    }
    .item_01 .other_btn .i2 .btn,
    .item_01 .other_btn .i1 .btn:hover {
        background: linear-gradient(180deg, rgba(55, 255, 196, 1) 0%, rgba(86, 255, 94, 1) 46%, rgba(215, 255, 254, 1) 100%);
        background-clip: text;
        color: transparent;
    }
    .item_01 .other_btn .i1 .btn:before,
    .item_01 .other_btn .i2 .btn:before {
        content: "";
        position: absolute;
        inset: 0;
        width: 170px;
        height: 65px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
        transition:all 0.8s ease;
    }
    .item_01 .other_btn .i1 .btn:before,
    .item_01 .other_btn .i2 .btn:hover:before {
        background: url('/Images/pic13.png')no-repeat center;
        background-size: 100%;
    }
    .item_01 .other_btn .i2 .btn:before,
    .item_01 .other_btn .i1 .btn:hover:before {
        background: url('/Images/pic14.png')no-repeat center;
        background-size: 100%;
    }
    /*獎項*/
    .award{
        position:relative;
        z-index:10;
    }
    .award .text .t2 .o_text {
        position: relative;
    }
    .award .text .t2 .o_text:after {
        content: "";
        position: absolute;
        background: url(/Images/pic19.png) no-repeat center;
        background-size: 100%;
        width: 75px;
        height: 15px;
        left: 13px;
        bottom: -12px;
    }
    .award .a_item {
        width: 80%;
        margin: auto;
        margin-top: -40px;
    }
    .award .a_item .item {
        padding: 0 10px;
        margin-bottom: 20px;
    }
    .award .a_item .item .pic {
        width: 90%;
        margin: auto;
    }
    .award .a_item .item .text .d-f {
        display: flex;
        align-items: center;
        justify-content: center
    }
    .award .a_item .item .text span {
        font-family: "Noto Sans TC", sans-serif;
        font-weight: 700;
        color: #ffffff;
        font-size: 12px;
        letter-spacing: 1px;
        text-align: center;
    }
    .award .a_item .item .text .t1 {
        margin: 0
    }
    .award .a_item .item .text .t2 {
        margin: 0;
        font-weight: 200;
        padding: 0 2px;
    }
    .award .a_item .item .text .t4 {
        display: block;
        font-weight: 100;
    }
    .award .bottom_item {
        position: fixed;
        bottom: 30px;
        left: 0;
        right: 0;
    }
    .award .bottom_item .pic {
        width: 65%;
        margin: auto;
        margin-top: 5px;
    }
    .award .bottom_item .text {
        text-align: center;
        margin-top: 5px;
    }
    .award .bottom_item .text span {
        display: block;
        font-family: "Noto Sans TC", sans-serif;
        font-weight: 100;
        font-size: 14px;
        letter-spacing: 1px;
        color: #ffffff;
        padding-bottom: 10px;
    }

    /*item_02*/
    .item_02{
        position:relative;
        z-index:2;
    }
    .item_02 .text .t2 .o_text {
        position:relative;
    }
    .item_02 .text .t2 .o_text:after {
        content: "";
        position: absolute;
        background: url(/Images/pic19.png) no-repeat center;
        background-size: 100%;
        width: 75px;
        height: 15px;
        left: 7px;
        bottom: -12px;
    }
    .item_02 .box {
        position:relative;
        width: 75%;
        margin: auto;
    }
    .item_02 .box .item{
        position:relative;
        margin-bottom:20px;
    }
    .item_02 .agree {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .item_02 .agree .black {
        position: relative;
        display: inline-block;
        background: #000000;
        border: 2px solid #a3ffb7;
        width: 23px;
        height: 23px;
        margin-top: 3px;
        margin-right: 10px;
    }
    .item_02 .agree .black.checked {
        background-image: linear-gradient(180deg, rgba(55, 255, 196, 1) 0%, rgba(86, 255, 94, 1) 46%, rgba(215, 255, 254, 1) 100%);
    }
    .item_02 .agree svg {
        margin-bottom: 10px;
    }
    .item_02 .agree .tick {
        width: 100%;
        height: 100%;
        fill: none;
        stroke: #000000;
        stroke-width: 20;
        stroke-linecap: round;
        stroke-dasharray: 180;
        stroke-dashoffset: 180;
        position: absolute;
    }
    .item_02 .agree .checked {
        animation: draw 0.4s ease forwards;
    }

    @keyframes draw {
        to {
            stroke-dashoffset: 0;
        }
    }
    .item_02 .agree span,
    .item_02 .agree a {
        font-family: "Noto Sans TC", sans-serif;
        font-weight: 100;
        font-size: 14px;
        letter-spacing: 1px;
        color: #ffffff;
    }
    .item_02 .agree a{
        margin:0 -3px;
    }
    .item_02 .agree .other {
        font-weight: 700;
    }
    .item_02 .bottom_item {
/*        position: fixed;
        left: 0;
        right: 0;
        bottom: 30px;*/
        margin-top:145px;
    }
    .item_02 .bottom_item .b_item {
        width: 65%;
        margin: auto;
        margin-top: 5px;
    }
    .item_02 .bottom_item .b_text{
        text-align:center;
    }
    .item_02 .bottom_item .b_text span {
        font-family: "Noto Sans TC", sans-serif;
        font-weight: 100;
        font-size:14px;
        letter-spacing:1px;
        color:#ffffff;
    }
    .item_02 .bottom_item .b_text span .red_text {
        font-family: "Noto Sans TC", sans-serif;
        font-weight: 600;
        color: #ff7c67;
    }
    .item_02 .bottom_item .b_text .t1 .start-icon {
        color: #ffb103;
        text-shadow: 2px 1px #00040a;
        transition: 0.5s;
        cursor: pointer;
    }
    .item_02 .bottom_item .b_text .t1 .other {
        font-weight: 700;
        padding:0 2px;
    }
    .item_02 .bottom_item .b_text .t1 .sec {
        display:block;
    }
    /*item_03*/
    .item_03 .text .t2 .o_text {
        position: relative;
    }
    .item_03 .text .t2 .o_text:after {
        content: "";
        position: absolute;
        background: url(/Images/pic24.png) no-repeat center;
        background-size: 100%;
        width: 60px;
        height: 40px;
        left: 11px;
        bottom: -10px;
    }
    .item_03 .bottom_item{
        position:fixed;
        left:0;
        right:0;
        bottom:0;
    }
    .item_03 .dragable {
        --top0: 500px;
        --top1: 100px;
        --left0: 100px;
        --left1: 900px;
        --size: 60px;
        position: absolute;
        cursor: pointer;
        width: var(--size);
        height: var(--size);
        border-radius: 50%;
        animation-delay: 0s;
        animation-name: blink, move1, move2;
        animation-duration: 60s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        opacity: 0.9;
        transition-property: filter;
        transition-duration: 0.5s;
    }
    .item_03 .dragable:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: inherit;
        opacity: 0.2;
    }
    .item_03 .drop {
        transform: rotate(45deg);
        border-radius: 5% 100% 50% 65% / 5% 65% 50% 100%;
    }
    .item_03 .egg {
        width: 55.1px;
        height: 80px;
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    }
    .item_03 .pudding {
        border-radius: 50% 50% 10% 10%;
    }
    .item_03 .square {
        border-radius: 20px;
    }
    .item_03 .dragable:nth-child(5n) {
        background: linear-gradient(#0f0, #000);
    }
    .item_03 .dragable:nth-child(5n+1) {
        background: radial-gradient(circle, red, #000);
        left: 100px;
    }
    .item_03 .dragable:nth-child(5n+2) {
        background: radial-gradient(circle, yellow, #000);
        left: 200px;
    }
    .item_03 .dragable:nth-child(5n+3) {
        background: radial-gradient(circle, blue, #000);
        left: 300px;
    }
    .item_03 .dragable:nth-child(5n+4) {
        background: radial-gradient(circle, violet, #000);
        left: 400px;
    }
    .item_03 .dragable_item {
        position: fixed;
        top: -1%;
        width: 100%;
        height: 100%;
        margin: auto;
        z-index: 20;
    }
    .item_03 .dragable.fixed-ball {
        width: 65px;
        height: 65px;
        animation: none !important;
        position: fixed;
        left: 50% !important;
        bottom: 130px;
        transform: translateX(-50%);
    }
    .item_03 .mix_item {
        position: fixed;
        z-index: 20;
        width: 18%;
        bottom: 180px;
        right: 20%;
    }
    .item_03 .mix_item img {
        animation: upDown 5s infinite;
    }
    .item_03 .hid_btn{
        display:none;
    }

    @keyframes upDown {
        0% {
            transform: translateY(5px);
        }
        50% {
            transform: translateY(-5px);
        }
        100% {
            transform: translateY(5px);
        }
    }

    @keyframes blink {
        0% {
            filter: brightness(1);
        }
        25% {
            filter: brightness(1);
        }
        50% {
            filter: brightness(3);
        }
        75% {
            filter: brightness(1);
        }
        100% {
            filter: brightness(1);
        }
    }

    @keyframes op {
        0% {
            opacity: 0.95;
        }
        50% {
            opacity: 0.65;
        }
        100% {
            opacity: 0.95;
        }
    }

    @keyframes move1 {
        0% {
            left: var(--left0);
        }
        50% {
            left: var(--left1);
        }
        100% {
            left: var(--left0);
        }
    }

    @keyframes move2 {
        0% {
            top: var(--top0);
        }
        50% {
            top: var(--top1);
        }
        100% {
            top: var(--top0);
        }
    }

    /*item_04*/
    .item_04{
        position:relative;
        z-index:10;
    }
    .item_04 .text .t2 .o_text {
        position: relative;
    }
    .item_04 .text .t2 .o_text:after {
        content: "";
        position: absolute;
        background: url(/Images/pic24.png) no-repeat center;
        background-size: 100%;
        width: 60px;
        height: 40px;
        left: 5px;
        bottom: -11px;
        transform: rotate(180deg);
    }
    .item_04 .beaker_item {
        position: relative;
        margin-top: 80px;
        z-index:30;
    }
    .item_04 .beaker_item .pic {
        width: 65%;
        margin: auto;
    }
    .item_04 .beaker_item .tap {
        position: absolute;
        width: 16%;
        right: 26%;
        top: -10%;
    }
    .item_04 .beaker_item .tap img {
        animation: upDown 5s infinite;
    }
    .item_04 .beaker_item .icon_01,
    .item_04 .beaker_item .icon_02,
    .item_04 .beaker_item .icon_03{
        opacity:0;
        transition:all 0.8s ease;
    }
    .item_04 .beaker_item .icon_01.active {
        opacity: 1;
        animation: upDown 0.3s infinite;
    }
    .item_04 .beaker_item .icon_02.active {
        opacity: 1;
        animation: upDown 0.5s infinite;
    }
    .item_04 .beaker_item .icon_03.active {
        opacity: 1;
        animation: upDown 0.7s infinite;
    }
    .item_04 .beaker_item .icon_01 {
        position: absolute;
        width: 9%;
        top: 15%;
        left: 24%;
    }
    .item_04 .beaker_item .icon_02 {
        position: absolute;
        width: 12%;
        top: 63%;
        left: 18%;
    }
    .item_04 .beaker_item .icon_03 {
        position: absolute;
        width: 13%;
        top: 32%;
        right: 22%;
    }
    .item_04 .beaker_item .progress-container {
        position: relative;
        width: 60%;
        margin: auto;
        margin-top: 15px;
    }
    .item_04 .beaker_item .progress-bar {
        position: relative;
        width: 100%;
        height: 6px;
        background: #444444;
        overflow: hidden;
    }
    .item_04 .beaker_item .progress {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: linear-gradient(173deg, #d7fffe,#56ff5e);
        width: 0%;
        border-radius: 0;
    }
    .item_04 .beaker_item .progress-text {
        position: absolute;
        top: -28px;
        right: 0;
        font-family: "Noto Serif TC", serif;
        font-weight: 500;
        font-size: 13px;
        color: #f7f7f5;
        letter-spacing: 2px;
    }
    .item_04 .bottom_item {
        position:fixed;
        bottom:30px;
        left:0;
        right:0;
    }
    .item_04 .bottom_item .pic {
        width: 65%;
        margin: auto;
        margin-top: 5px;
    }
    .item_04 .bottom_item .text {
        text-align: center;
        margin-top: 5px;
    }
    .item_04 .bottom_item .text span {
        display: block;
        font-family: "Noto Sans TC", sans-serif;
        font-weight: 100;
        font-size: 14px;
        letter-spacing: 1px;
        color: #ffffff;
        padding-bottom: 10px;
    }

    :root {
        --startColor: hsl(0, 100%, 75%);
        --stopColor: hsl(0, 100%, 75%);
    }
    .item_04 .beaker_waves{
        position:absolute;
        top:64%;
        left:50%;
        transform:translate(-50%,-50%);
    }
    .item_04 .beaker_waves svg {
        display: block;
    }
    .item_04 .beaker_waves path {
        cursor: pointer;
    }
    .item_04 .drip_item {
        opacity:0;
        width: 100%;
        position: absolute;
        top: 33%;
        left: 47.5%;
        transform: translate(-50%, -50%);
    }
    .item_04 .drip_item.active{
        opacity:1;
    }
    /*item_06*/
    .item_06{
        position:relative;
        z-index:20;
    }
    .item_06 .text .t1 .other_02 {
        font-weight: 100;
        font-style: italic;
    }
    .item_06 .award_pic {
        width: 90%;
        margin: auto;
        margin-top: 20px;
    }
    .item_06 .info_btn{
        margin-top:20px;
    }
    .item_06 .info_btn .btn {
        position: relative;
        display: block;
        font-family: "Noto Sans TC", sans-serif;
        font-weight: 800;
        text-align: center;
        border-radius: 20px;
        font-size: 16px;
        letter-spacing: 1px;
        border: none;
        background: linear-gradient(180deg, rgba(55, 255, 196, 1) 0%, rgba(86, 255, 94, 1) 46%, rgba(215, 255, 254, 1) 100%);
        background-clip: text;
        color: transparent;
        padding:0;
    }
    .item_06 .info_btn .btn:before {
        content: "";
        position: absolute;
        inset: 0;
        background: url(/Images/pic42.png) no-repeat center;
        background-size: 100%;
        width: 325px;
        height: 75px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
    }
    .item_06 .text_item {
        margin-top: 25px;
        margin-bottom: 30px;
    }
    .item_06 .text_item .b_text .t1{
        margin-bottom:5px;
    }
    .item_06 .text_item .b_text .t1 .start-icon {
        color: #ffb103;
        text-shadow: 2px 1px #00040a;
        transition: 0.5s;
        cursor: pointer;
    }
    .item_06 .text_item .b_text {
        text-align: center;
    }
    .item_06 .text_item .b_text span {
        font-family: "Noto Sans TC", sans-serif;
        font-weight: 100;
        font-size: 14px;
        letter-spacing: 1px;
        color: #ffffff;
    }
    .item_06 .text_item .b_text .sec{
        display:block;
    }
    .item_06 .other_btn {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 95%;
        margin: auto;
        margin-top: 20px;
        padding-bottom: 20px;
    }
    .item_06 .other_btn .btn {
        position: relative;
        display: block;
        font-family: "Noto Sans TC", sans-serif;
        font-weight: 800;
        text-align: center;
        border-radius: 20px;
        font-size: 16px;
        letter-spacing: 1px;
        border: none;
        transition: all 0.8s ease;
    }
    .item_06 .other_btn .i1 .btn,
    .item_06 .other_btn .i2 .btn:hover {
        color: #000000;
    }
    .item_06 .other_btn .i2 .btn,
    .item_06 .other_btn .i1 .btn:hover {
        background: linear-gradient(180deg, rgba(55, 255, 196, 1) 0%, rgba(86, 255, 94, 1) 46%, rgba(215, 255, 254, 1) 100%);
        background-clip: text;
        color: transparent;
    }
    .item_06 .other_btn .i1 .btn:before,
    .item_06 .other_btn .i2 .btn:before {
        content: "";
        position: absolute;
        inset: 0;
        width: 170px;
        height: 65px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
        transition: all 0.8s ease;
    }
    .item_06 .other_btn .i1 .btn:before,
    .item_06 .other_btn .i2 .btn:hover:before {
        background: url('/Images/pic13.png')no-repeat center;
        background-size: 100%;
    }
    .item_06 .other_btn .i2 .btn:before,
    .item_06 .other_btn .i1 .btn:hover:before {
        background: url('/Images/pic14.png')no-repeat center;
        background-size: 100%;
    }
    /*item_07*/
    .item_07 {
        position: relative;
        height:100%;
        z-index: 20;
    }
    .item_07 .text .t1 .other_02 {
        font-weight: 100;
        font-style: italic;
    }
    .item_07 .box {
        position: relative;
        width: 80%;
        margin: auto;
        margin-top:50px;
    }
    .item_07 .box .item {
        position: relative;
        margin-bottom: 20px;
    }
    .item_07 .i1{
        display:flex;
        align-items:center;
        justify-content:center;
        margin:0 -2px;
    }
    .item_07 .i1 .item{
        width:50%;
        margin:0 2px;
        margin-bottom:20px;
    }
    .item_07 .success {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .item_07 .success .black {
        position: relative;
        display: inline-block;
        background: #000000;
        border: 2px solid #a3ffb7;
        width: 23px;
        height: 23px;
        margin-top: 3px;
        margin-right: 10px;
    }
    .item_07 .success .black.checked {
        background-image: linear-gradient(180deg, rgba(55, 255, 196, 1) 0%, rgba(86, 255, 94, 1) 46%, rgba(215, 255, 254, 1) 100%);
    }
    .item_07 .success svg {
        margin-bottom: 10px;
    }
    .item_07 .success .tick {
        width: 100%;
        height: 100%;
        fill: none;
        stroke: #000000;
        stroke-width: 20;
        stroke-linecap: round;
        stroke-dasharray: 180;
        stroke-dashoffset: 180;
        position: absolute;
    }
    .item_07 .success .checked {
        animation: draw 0.4s ease forwards;
    }
    @keyframes draw {
        to {
            stroke-dashoffset: 0;
        }
    }
    .item_07 .success span {
        font-family: "Noto Sans TC", sans-serif;
        font-weight: 100;
        font-size: 14px;
        letter-spacing: 1px;
        color: #ffffff;
    }
    .item_07 .success .other {
        font-weight: 700;
    }
    .item_07 .send{
        position:absolute;
        left:0;
        right:0;
        bottom:20px;
    }
    .item_07 .send .btn {
        position: relative;
        display: block;
        font-family: "Noto Sans TC", sans-serif;
        font-weight: 800;
        text-align: center;
        border-radius: 20px;
        font-size: 16px;
        letter-spacing: 1px;
        border: none;
        color:#000000;
    }
    .item_07 .send .btn:before {
        content: "";
        position: absolute;
        inset: 0;
        width: 335px;
        height: 65px;
        top: 50%;
        left: 50%;
        background: url('/Images/pic43.png')no-repeat center;
        background-size: 100%;
        transform: translate(-50%, -50%);
        z-index: -1;
    }
    /*item_08*/
    .item_08{
        position:relative;
        z-index:20;
    }
    .item_08 .logo_pic {
        width: 40%;
        margin: auto;
        margin-top: 85px;
    }
    .item_08 .experiment {
        position:relative;
        margin-top: 30px;
    }
    .item_08 .experiment .pic {
        width: 65%;
        margin: auto;
    }
    .item_08 .experiment .icon_01 {
        position: absolute;
        width: 10%;
        top: 20.5%;
        left: 21%;
        z-index: 10;
        animation: swingRotate 2s ease-in-out infinite;
    }
    .item_08 .experiment .icon_02 {
        position: absolute;
        width: 9%;
        top: 30%;
        right: 20%;
        z-index: 10;
        animation: swingRotate 3s ease-in-out infinite;
    }
    .item_08 .experiment .particle_item {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    .item_08 .particle_item .particle {
        position: absolute;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        pointer-events: none;
        opacity: 0;
    }
    .item_08 .experiment .Waves {
        width: 100%;
        position: absolute;
        top: 38%;
        left: 53.8%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }
    .item_08 .experiment .Waves .bubbleGroup {
        fill: #ffffff
    }
    .item_08 .experiment .Waves .poly {
        width: 100%;
        height: 100%;
        fill: url(#polyGradient_03);
    }
    .item_08 .btn_item{
        position:fixed;
        left:0;
        right:0;
        bottom:60px;
    }
    .item_08 .btn_item a {
        position: relative;
        display: block;
        font-family: "Noto Sans TC", sans-serif;
        font-weight: 800;
        text-align: center;
        border-radius: 20px;
        font-size: 16px;
        letter-spacing: 1px;
        border: none;
        background: linear-gradient(180deg, rgba(55, 255, 196, 1) 0%, rgba(86, 255, 94, 1) 46%, rgba(215, 255, 254, 1) 100%);
        background-clip: text;
        color: transparent;
        padding: 0;
    }
    .item_08 .btn_item a:before {
        content: "";
        position: absolute;
        inset: 0;
        background: url(/Images/pic42.png) no-repeat center;
        background-size: 100%;
        width: 325px;
        height: 75px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
    }
    .item_08 .text{
        text-align:center;
    }
    .item_08 .text .item{
        margin-bottom:5px;
    }
    .item_08 .text .t3{
        margin-top:10px;
    }
    .item_08 .text .item span {
        font-family: "Noto Sans TC", sans-serif;
        font-weight: 100;
        font-size: 14px;
        letter-spacing: 1px;
        color: #ffffff;
    }
    .item_08 .text .item .other {
        position:relative;
        font-weight: 800;
    }
    .item_08 .text .item .font {
        font-style: italic;
    }
    .item_08 .text .t2 .other:after {
        content: "";
        position: absolute;
        width: 115px;
        height: 15px;
        bottom: -10px;
        left: -6px;
        background: url('/Images/pic47.png')no-repeat center;
        background-size: 100%;
    }
}