select::-ms-expand { display: none;
}
select:focus::-ms-value {
    background: rgba(0, 0, 0, 0);
}
input,
textarea,
select,
form {
    outline: none;
}

div,p,span,ul,table {position: relative;z-index: 2;}

a{transition: .2s;}
a:hover{filter: brightness(1.1);}

.wrapper{
    width: 100%;
    background: url(../imgs/bg.jpg);
    background-size: 6%;
    position: relative;
    overflow: hidden;    
}

.btn_top{
    background: url(../imgs/btn_top.png)no-repeat;
    background-size: 100%;
    width: 4%;
    height: 4vw;
    display: block;
    z-index: 99;
    bottom: 4%;
    right: 2%;
    position: fixed;
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.btn_top.show {
    opacity: 1;
}

.header{
    background: url(../imgs/header.png)top center no-repeat;
    background-size: 100%;
    width: 100%;
    height: 38vw;
    overflow: hidden;
    position: relative;
}

.hotpot{
    background: url(../imgs/hotpot.png)no-repeat;
    background-size: 100%;
    width: 25.2%;
    height: 23vw;
    margin: 14.6% auto 0;
    display: block;
    animation: 1s hotpot infinite;
}

@keyframes hotpot{
    0%{transform: scale(1);}
    50%{transform: scale(1.02);}
    100%{transform: scale(1);}
}

.steam_01{
    background: url(../imgs/steam_1.png)no-repeat;
    background-size: 100%;
    width: 14.6%;
    height: 8vw;
    position: absolute;
    top: 35%;
    left: 61%;
    display: block;
    animation: 2s steam1 infinite;
}

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


/*@keyframes steam1{
    0%{transform: translateX(0%);opacity: 0;}
    20%{opacity: 1;}
    70%{transform: translateX(15%);opacity: 1;}
    100%{transform: translateX(15%);opacity: 0;}
}*/

.steam_02{
    background: url(../imgs/steam_2.png)no-repeat;
    background-size: 100%;
    width: 13.3%;
    height: 9vw;
    position: absolute;
    top: 38%;
    left: 26%;
    display: block;
    animation: 2.2s steam2 infinite;
}

@keyframes steam2{
    0%{transform: translateY(0%);}
    50%{transform: translateY(10%);}
    100%{transform: translateY(0%);}
}

@keyframes steam3{
    0%{transform: translateY(0%);}
    50%{transform: translateY(5%);}
    100%{transform: translateY(0%);}
}

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

.steam_03{
    background: url(../imgs/steam_3.png)no-repeat;
    background-size: 100%;
    width: 17.5%;
    height: 12vw;
    position: absolute;
    top: 57%;
    left: 71%;
    display: block;
    animation: 2.3s steam3 infinite;
}

.steam_04{
    background: url(../imgs/steam_4.png)no-repeat;
    background-size: 100%;
    width: 15.4%;
    height: 11vw;
    position: absolute;
    top: 49%;
    left: 8%;
    display: block;
    animation: 1.8s steam4 infinite;
    z-index: 4;
}

.steam_05{
    background: url(../imgs/steam_4.png)no-repeat;
    background-size: 100%;
    width: 14%;
    height: 10vw;
    position: absolute;
    top: 66%;
    left: 18%;
    display: block;
    animation: 2s steam3 infinite;
    z-index: 5;
}

@keyframes lamp1{
    0%{transform: rotate(0.7deg);}
    50%{transform: rotate(-0.7deg);}
    100%{transform: rotate(0.7deg);}
}

@keyframes lamp2{
    0%{transform: rotate(-0.7deg);}
    50%{transform: rotate(0.7deg);}
    100%{transform: rotate(-0.7deg);}
}


.lamp_1{
    background: url(../imgs/lamp1.png)no-repeat;
    background-size: 100%;
    width: 5.9%;
    height: 17vw;
    display: block;
    position: absolute;
    top: -10.9%;
    left: 15.7%;
    transform-origin:top center;
    animation: 2s lamp1 infinite;
}

.lamp_2{
    background: url(../imgs/lamp2.png)no-repeat;
    background-size: 100%;
    width: 8.3%;
    height: 25vw;
    display: block;
    position: absolute;
    top: -1%;
    left: 5.8%;
    transform-origin:top center;
    animation: 2.2s lamp2 infinite;
    z-index: 3;
}
.lamp_3{
    background: url(../imgs/lamp3.png)no-repeat;
    background-size: 100%;
    width: 7.3%;
    height: 19vw;
    display: block;
    position: absolute;
    top: -14%;
    left: 0.5%;
    transform-origin:top center;
    animation: 1.8s lamp1 infinite;
}
.lamp_4{
    background: url(../imgs/lamp4.png)no-repeat;
    background-size: 100%;
    width: 6.5%;
    height: 22vw;
    display: block;
    position: absolute;
    top: -9%;
    left: 91.7%;
    transform-origin:top center;
    animation: 2s lamp2 infinite;
    z-index: 3;
}
.lamp_5{
    background: url(../imgs/lamp5.png)no-repeat;
    background-size: 100%;
    width: 6.4%;
    height: 13vw;
    display: block;
    position: absolute;
    top: -7.7%;
    left: 86.5%;
    transform-origin:top center;
    animation: 2.2s lamp1 infinite;
}
.lamp_6{
    background: url(../imgs/lamp6.png)no-repeat;
    background-size: 100%;
    width: 3%;
    height: 25vw;
    display: block;
    position: absolute;
    top: -23%;
    left: 82.1%;
    transform-origin:top center;
    animation: 2s lamp2 infinite;
}

@keyframes lamp3{
    0%{transform: translateY(0);}
    12%{transform: translateY(-5%)}
    25%{transform: translateY(0)}
    100%{transform: translateY(0)}
}

@keyframes lamp4{
    0%{transform: translateY(0);}
    25%{transform: translateY(0%)}
    37%{transform: translateY(-5%)}
    50%{transform: translateY(0%);}
    100%{transform: translateY(0)}
}


.lamp_7{
    background: url(../imgs/lamp7.png)no-repeat;
    background-size: 100%;
    width: 3.6%;
    height: 7vw;
    display: block;
    position: absolute;
    top: 34.7%;
    left: 84.7%;
    animation: 1.5s lamp3 infinite;
}
.lamp_8{
    background: url(../imgs/lamp8.png)no-repeat;
    background-size: 100%;
    width: 4.4%;
    height: 9vw;
    display: block;
    position: absolute;
    top: 37.7%;
    left: 88.3%;
    animation: 1.5s lamp4 infinite;
}

.worky{
    background: url(../imgs/logo.png)no-repeat;
    background-size: 100%;
    width: 10.8%;
    height: 4vw;
    display: block;
    position: absolute;
    top: 2%;
    left: 2.2%;
    z-index: 4;
}

.content{
    width: 72.7%;
    height: auto;
    margin: 0 auto;
}

.title_1, .title_2, .title_3, .title_4, .title_5{
    width: 20.6%;
    height: 5vw;
    margin: 0 auto;
}

.title_1{
    background: url(../imgs/title_1.png)no-repeat;
    background-size: 100%;
}

.title_2{
    background: url(../imgs/title_2.png)no-repeat;
    background-size: 100%; 
}

.title_3{
    background: url(../imgs/title_3.png)no-repeat;
    background-size: 100%;
    z-index: 3;
}

.title_4{
    background: url(../imgs/title_4.png)no-repeat;
    background-size: 100%;
    z-index: 3;
}

.title_5{
    background: url(../imgs/title_5.png)no-repeat;
    background-size: 100%; 
}

.text{
    width: 73.7%;
    text-align: center;
    font-size: 1.7vw;
    font-family: "Noto Sans TC", sans-serif;
    color: #fff8cd;
    margin: 1% auto 8%;
    line-height: 3vw;
}

.box{
    background: url(../imgs/box_mid.png);
    background-size: 100%;
    width: 100%;
    position: relative;
    margin: 1.8vw auto 13vw;
}

.box::before{
    background: url(../imgs/box_top.png)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 5vw;
    content: " ";
    display: block;
    position: absolute;
    top: -4.6vw;
}

.box::after{
    background: url(../imgs/box_bot.png)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 6vw;
    content: " ";
    display: block;
    position: absolute;
    bottom: -6vw;
}

.logo{
    width: 80%;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 10% 3%;
}

.logo li{
    width: 9.5vw;
    height: 9.5vw;
    margin: 0.5%;
}

.logo li img{
    width: 100%;
    height: 100%;
}


.list{
    width: 63%;
    height: auto;
    margin: 0% auto 0%;
    border-collapse: collapse;
    border-spacing: 0px;
}

.list thead , .list tbody {
    width: 100%;
    height: auto;
    text-align: center;
}

.list tr td{
    width: 50%;
    font-size: 1.2vw;
    font-family: "Noto Sans TC", sans-serif;
    text-align: center;
    color: #a54003;
    border: 2px solid #fd9e3c;
    padding: 0.5vw 1vw;
}

.list tr td span{
    width: 100%;
    display: inline-flex;
    justify-content: center;
}

.list tr td img{display: none;}

.list thead{
    background: #fd9e3c;
}

.list thead td{
    color: #fff8cd;
}

.list tbody td{
    background: #fff;
}

.ps2{
    width: 63%;
    padding: 2% 0;
    margin: 0 auto;
}

.howto{
    width: 82%;
    height: auto;
    margin: 0 auto 0;
}

.howto>li{
    width: 99%;
    height: auto;
    font-size: 1.5vw;
    line-height: 2.5vw;
    color: #a54003;
    font-family: "Noto Sans TC", sans-serif;
    list-style-type: decimal;
    margin: 0 0 3% 1%;
}

.app_step{
    width: 100%;
    height: auto;
    margin: 3% auto 0;
}

.app_step p{
    font-size: 1.3vw;
}

.app_step p>a{
    color: #fd9e3c;
    text-decoration: underline;
}

.sub_t{
    width: fit-content;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 600;
    color: #fff8cd;
    background: #fd9e3c;
    padding: 0 1vw;
    border-radius: 100em;
    margin-bottom: 1%;
}

.step_img{
    width: 100%;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin: 2% auto 0;
}

.step_img li{
    width: 32%;
    height: 20vw;
}

.step_img li:nth-child(1){
    background: url(../imgs/step_01.png)no-repeat;
    background-size: 100%;
}

.step_img li:nth-child(2){
    background: url(../imgs/step_02.png)no-repeat;
    background-size: 100%;
}

.step_img li:nth-child(3){
    background: url(../imgs/step_03.png)no-repeat;
    background-size: 100%;
}

.ps , .ps2{
    font-family: "Noto Sans TC", sans-serif;
    font-size: 1.1vw !important;
    color: #fd9e3c;
    line-height: 1.1vw;
}

.example{
    width: 85.3%;
    height: auto;
    margin: 0 auto;
}

.sub_t2{
    background: url(../imgs/ex_01.png)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 3vw;
    display: block;

}

.sub_t2 span{
    font-size: 1.5vw;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 600;
    color: #fff8cd;
    padding: 0.4% 2.3%;
    display: block;
}

.example>span:nth-child(3){
    background: url(../imgs/ex_02.png)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 1vw;
    display: block;
}

.example ul{
    width: 98%;
    height: auto;
    font-size: 1.2vw;
    line-height: 2.6vw;
    color: #a54003;
    font-family: "Noto Sans TC", sans-serif;
    margin: 1.5% 0 1.5% 2%;
}

.example ul li{
    list-style-type: disc;
    width: 95%;
    margin-left: 3%;
}

.notice{
    width: 80%;
    height: auto;
    margin: 1.5% auto 8%;
}

.notice li{
    width: 97%;
    list-style: decimal;
    color: #fff8cd;
    font-size: 1.2vw;
    line-height: 2vw;
    font-family: "Noto Sans TC", sans-serif;
    margin-left: 3%;
    margin-bottom: 1vw;
}

.copyright{
    width: 100%;
    height: auto;
    background: #750000;
}

.copyright p{
    color: #f8cb85;
    font-size: 0.9vw;
    text-align: center;
    font-family: "Noto Sans TC", sans-serif;
    padding: 2vw 0;
}

.deco01{
    background: url(../imgs/deco_01.png)no-repeat;
    background-size: 100%;
    width: 11.6%;
    height: 26vw;
    display: block;
    position: absolute;
    top: 11%;
    right: -1%;
}

.deco02{
    background: url(../imgs/deco_02.png)no-repeat;
    background-size: 100%;
    width: 14.6%;
    height: 10vw;
    display: block;
    position: absolute;
    top: 22%;
    left: -0.6%;
}

.deco03{
    background: url(../imgs/deco_03.png)no-repeat;
    background-size: 100%;
    width: 16.1%;
    height: 11vw;
    display: block;
    position: absolute;
    top: 45%;
    right: -3%;
}

.deco04{
    background: url(../imgs/deco_04.png)no-repeat;
    background-size: 100%;
    width: 16.6%;
    height: 11vw;
    display: block;
    position: absolute;
    top: 53%;
    left: -5.6%;
}

.deco05{
    background: url(../imgs/deco_05.png)no-repeat;
    background-size: 100%;
    width: 13.7%;
    height: 10vw;
    display: block;
    position: absolute;
    top: 77%;
    left: -1.6%;
}

.deco06{
    background: url(../imgs/deco_06.png)no-repeat;
    background-size: 100%;
    width: 13.2%;
    height: 18vw;
    display: block;
    position: absolute;
    top: 90%;
    right: -0.7%;
}