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: #313942;
    background-size: 6%;
    position: relative;
    overflow: hidden;    
}

.btn_top{
    background: url(../images/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(../images/header_m.jpg)top center no-repeat;
    background-size: 100%;
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    margin-bottom: 7%;
}

.title{
    background: url(../images/title_m.png)no-repeat;
    background-size: 100%;
    width: 96.5%;
    height: 24vw;
    margin: 73% auto 23%;
    display: block;
    animation: 2s title infinite;
}

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

.worky{
    background: url(../images/logo.png)no-repeat;
    background-size: 100%;
    width: 32.5%;
    height: 10vw;
    display: block;
    position: absolute;
    top: 1.9vw;
    left: 3.5vw;
    z-index: 4;
}

.btn_cta{
    background: url(../images/cta.png)no-repeat;
    background-size: 100%;
    width: 75.9%;
    height: 23vw;
    display: block;
    margin: 0 auto 0;
    animation: 1s cta infinite;
}

@keyframes cta{
    0%{transform: scale(1);}
    50%{transform: scale(1.05);}
    100%{transform: scale(1);}
}

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


.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(../images/box_mid_m.png);
    background-size: 100%;
    width: 100%;
    position: relative;
    margin: 0 auto 15%;
    padding: 2vw 0;
}

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

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


.sub_1{
    background: url(../images/sb_1_m.png)no-repeat;
    background-size: 100%;
    width: 86.5%;
    height: 29vw;
    margin: 0 6.7% 7%;
}

.step{
    width: 100%;
    height: auto;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
}

.step li:nth-child(1){
    background: url(../images/step1_m.png)no-repeat;
    background-size: 100%;
    width: 81.25%;
    height: 112vw;
    overflow: hidden;
    margin: 0 auto 7%;
}

.step li:nth-child(2){
    background: url(../images/step2_m.png)no-repeat;
    background-size: 100%;
    width: 81.25%;
    height: 112vw;
    overflow: hidden;
    margin: 0 auto 7%;
}

.step li:nth-child(3){
    background: url(../images/step3_m.png)no-repeat;
    background-size: 100%;
    width: 81.25%;
    height: 112vw;
    overflow: hidden;
    margin: 0 auto 7%;
}

.step li p{
    width: 86%;
    color: black;
    font-size: 1.4vw;
    font-family: "Noto Sans TC", sans-serif;
    line-height: 2vw;
    margin: 84% auto 0;
}

.step li:nth-child(4){
    background: url(../images/step4_m.png)no-repeat;
    background-size: 100%;
    width: 81.25%;
    height: 115vw;
    overflow: hidden;
    margin: 0 auto 7%;
}

.step li p{
    width: 86%;
    color: black;
    font-size: 6vw;
    font-family: "Noto Sans TC", sans-serif;
    line-height: 9vw;
    margin: 84% auto 0;
}


.step li:nth-child(4) p{
    margin: 92% auto 0;
}


.sub_2{
    background: url(../images/sb_2_m.png)no-repeat;
    background-size: 100%;
    width: 86.8%;
    height: 15vw;
    margin: 0 6.7% 3%;
}

.txt1{
    width: 85%;
    color: black;
    font-size: 6vw;
    font-family: "Noto Sans TC", sans-serif;
    line-height: 9vw;
    margin: 0 auto 5%;
}

.txt1 a{
    color: #ff7f32;
    text-decoration: underline;
}

.txt1 span{
    font-size: 5vw;
    display: block;
    line-height: 8vw;
}

.pic{
    background: url(../images/pic_1_m.png)no-repeat;
    background-size: 100%;
    width: 81.25%;
    height: 68vw;
    margin: 0 auto;
    position: relative;
}

.pic span:nth-child(1){
    background: url(../images/pic_2.png)no-repeat;
    background-size: 100%;
    width: 23.4%;
    height: 13vw;
    position: absolute;
    right: -4%;
    bottom: -1%;
    display: block;
}

.pic span:nth-child(2){
    background: url(../images/pic_3_m.png)no-repeat;
    background-size: 100%;
    width: 15.3%;
    height: 10vw;
    position: absolute;
    left: 89%;
    top: 26%;
    display: block;
    animation: 2s bubble infinite;
}

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

.sub_3-1{
    background: url(../images/sb_3-1_m.png)no-repeat;
    background-size: 100%;
    width: 87.1%;
    height: 15vw;
    margin: 0 6.7% 3%;
}

.end_list{   
    width: 85%;
    color: black;
    font-size: 6vw;
    font-family: "Noto Sans TC", sans-serif;
    line-height: 9vw;
    margin: 0 auto 5%;
    list-style-type: square;
}

.end_list li{
    margin: 0 0 4% 8%;
    width: 90%;
}

.sub_3{
    background: url(../images/sb_3_m.png)no-repeat;
    background-size: 100%;
    width: 39.5%;
    height: 15vw;
    margin: 0 6.7% 3%;
}

.sub_4{
    background: url(../images/ex.png)no-repeat;
    background-size: 100%;
    width: 20%;
    height: 14vw;
    margin: 10% 6.7% 8%;
}


.box_ex{
    background: url(../images/ex_box_mid_m.png);
    background-size: 100%;
    width: 86.4%;
    position: relative;
    margin: 1.8vw 6.7% 15vw;
    padding: 1% 0;
}

.box_ex::before{
    background: url(../images/ex_box_top_m.png)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 6vw;
    content: " ";
    display: block;
    position: absolute;
    top: -5vw;
}

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

.ex_title1{
    background: url(../images/ex_title1.png)no-repeat;
    background-size: 100%;
    width: 37%;
    height: 11vw;
    margin: 0 auto 5% 7%;
}

.ex_title2{
    background: url(../images/ex_title2.png)no-repeat;
    background-size: 100%;
    width: 37%;
    height: 11vw;
    margin: 0 auto 5% 7%;
}

.box_ex>li{
    width: 82%;
    margin: 0 auto 5% 8%;
    color: black;
    font-size: 4.9vw;
    font-family: "Noto Sans TC", sans-serif;  
}

.box_ex li p{
    line-height: 7vw;
}

/*.box_ex li:last-child{
    margin: 0 auto 0 3%;
}
*/
.sub_ex1{
    background: url(../images/ex_sub1.png)no-repeat;
    background-size: 100%;
    width: 23.6%;
    height: 7vw;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1%;
    line-height: 6vw !important;
}

.sub_ex2{
    background: url(../images/ex_sub2.png)no-repeat;
    background-size: 100%;
    width: 32%;
    height: 7vw;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1%;
    line-height: 6vw !important;
}

.ex_list{
    width: 90%;
    list-style-type: square;
    margin: 3% 0 4% 9%;
}

.ex_list li{
    font-size: 4.5vw;
    margin-bottom: 0%;
}

.ex_deco1{
    background: url(../images/ex_1.png)no-repeat;
    background-size: 100%;
    width: 12%;
    height: 12vw;
    position: absolute;
    top: -26.3%;
    left: 26%;
    display: block;
}

.ex_deco2{
    background: url(../images/ex_2.png)no-repeat;
    background-size: 100%;
    width: 36.7%;
    height: 12vw;
    position: absolute;
    top: -31%;
    left: 39%;
    z-index: 3;
    display: block;
    animation: 2s bubble infinite;
}

.ex_deco3{
    background: url(../images/ex_3_m.png)no-repeat;
    background-size: 100%;
    width: 52.9%;
    height: 9vw;
    position: absolute;
    top: -22.9%;
    left: 49.4%;
    display: block;
    animation: 2s bubble infinite;
    animation-delay: 0.2s;
}

.ex_deco4{
    background: url(../images/arrow.png)no-repeat;
    background-size: 100%;
    width: 17.3%;
    height: 17vw;
    position: absolute;
    top: -14.9%;
    left: 74.4%;
    display: block;
    z-index: 3;
    animation: 1s bubble infinite;
}

.ex2{margin-bottom: 6vw;}

.cta2{margin-top: 10%;}


.notice{
    width: 83.5%;
    height: auto;
    margin: 0 auto 5%;
}

.notice_title{
    background: url(../images/notice_m.png)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 24vw;
    margin: 6% auto 6%;
}

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

.notice li span{
    color: #ffde33;
}

.copyright{
    width: 100%;
    height: 27vw;
    margin-top: 11%;
}

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

.deco07{
    background: url(../images/copyright_m.jpg)no-repeat;
    background-size: 100%;
    width: 100%;
    height: 20vw;
    display: block;
    position: absolute;
    bottom: 0%;
}

.tips{
    width: 85%;
    color: black;
    font-size: 4vw;
    font-family: "Noto Sans TC", sans-serif;
    line-height: 7vw;
    margin: 2% auto 2%;
    list-style-type: square;

}