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;}


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

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

.btn_top.show {
    opacity: 1;
}


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

.hotpot{
    background: url(../imgs/hotpot_m.png)no-repeat;
    background-size: 100%;
    width: 90.3%;
    height: 83vw;
    margin: 55% 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_m.png)no-repeat;
    background-size: 100%;
    width: 34.8%;
    height: 28vw;
    position: absolute;
    top: 41%;
    right: 0;
    display: block;
    animation: 2s steam1 infinite;
}

@keyframes steam1{
    0%{transform: translateY(0%);}
    50%{transform: translateY(-10%);}
    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_m.png)no-repeat;
    background-size: 100%;
    width: 35.4%;
    height: 34vw;
    position: absolute;
    top: 51%;
    left: 0;
    display: block;
    animation: 2.2s steam2 infinite;
}

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

@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: 12.1%;
    height: 38vw;
    display: block;
    position: absolute;
    top: -5.3%;
    left: 5.7%;
    transform-origin:top center;
    animation: 2s lamp1 infinite;
}

.lamp_2{
    background: url(../imgs/lamp2.png)no-repeat;
    background-size: 100%;
    width: 17.7%;
    height: 54vw;
    display: block;
    position: absolute;
    top: -3%;
    left: -7.2%;
    transform-origin:top center;
    animation: 2.2s lamp2 infinite;
    z-index: 3;
}

.lamp_4{
    background: url(../imgs/lamp4.png)no-repeat;
    background-size: 100%;
    width: 12.9%;
    height: 62vw;
    display: block;
    position: absolute;
    top: -5.3%;
    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: 12.8%;
    height: 34vw;
    display: block;
    position: absolute;
    top: -3.9%;
    left: 82.7%;
    transform-origin:top center;
    animation: 2.2s lamp1 infinite;
}

.worky{
    background: url(../imgs/logo_m.png)no-repeat;
    background-size: 100%;
    width: 96.4%;
    height: 55vw;
    display: block;
    position: absolute;
    top: 1.5%;
    left: 1.8%;
    z-index: 6;
}


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

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

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

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

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

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

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

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

.text br{display: none;}

.box{
    background: url(../imgs/box_mid_m.png);
    background-size: 100%;
    width: 100%;
    position: relative;
    margin: -1vw auto 25vw;
    padding: 5% 0;
}

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

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

.logo{
    display: none;
}

.list{
    width: 85%;
    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: 4vw;
    font-family: "Noto Sans TC", sans-serif;
    text-align: center;
    color: #a54003;
    border: 2px solid #fd9e3c;
    padding: 2vw 2vw;
    text-align: left;
}

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

.list tr td img{
    width: 6vw;
    height: 6vw;
    float: left;
    margin-right: 1.5vw;
}

.list tr td span>img{
    float: unset;
}

.list thead{
    background: #fd9e3c;
}

.list thead td{
    color: #fff8cd;
    text-align: center !important;
}

.list tbody td{
    background: #fff;
}

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

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

.howto>li{
    width: 92%;
    height: auto;
    font-size: 5vw;
    line-height: 8vw;
    color: #a54003;
    font-family: "Noto Sans TC", sans-serif;
    list-style-type: decimal;
    margin: 0 0 10% 8%;
}

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

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

.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 4vw;
    border-radius: 100em;
    margin-bottom: 1%;
}

.step_img{
    width: 100%;
    height: auto;
    margin: 0% auto 5%;
}

.step_img li{
    width: 98.8%;
    height: 81vw;
    margin: 6% auto 0;
}

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

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

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

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

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

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

}

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

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

.example ul{
    width: 95%;
    height: auto;
    font-size: 4vw;
    line-height: 6vw;
    color: #a54003;
    font-family: "Noto Sans TC", sans-serif;
    margin: 3% 0 5% 4%;
}

.example ul li{
    list-style-type: disc;
    width: 90%;
    margin: 3% 0 3% 7%;
}

.notice{
    width: 86%;
    height: auto;
    margin: 3% auto 16%;
}

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

.copyright{
    width: 100%;
    height: auto;
    background: #750000;
    z-index: 3;
}

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

.deco01{
    background: url(../imgs/deco_01_m.png)no-repeat;
    background-size: 100%;
    width: 16.6%;
    height: 46vw;
    display: block;
    position: absolute;
    top: 8.6%;
    right: 0%;
}

.deco03{
    background: url(../imgs/deco_03.png)no-repeat;
    background-size: 100%;
    width: 28%;
    height: 19vw;
    display: block;
    position: absolute;
    top: 38.9%;
    right: -2%;
}

.deco04{
    background: url(../imgs/deco_04.png)no-repeat;
    background-size: 100%;
    width: 33%;
    height: 24vw;
    display: block;
    position: absolute;
    top: 83.9%;
    left: -5.5%;
}

.deco06{
    background: url(../imgs/deco_06.png)no-repeat;
    background-size: 100%;
    width: 22.9%;
    height: 31vw;
    display: block;
    position: absolute;
    top: 97.1%;
    right: 0%;
}