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

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

.title{
    background: url(../images/title.png)no-repeat;
    background-size: 100%;
    width: 35.2%;
    height: 9vw;
    margin: 19.4% auto 8%;
    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: 10.5%;
    height: 3vw;
    display: block;
    position: absolute;
    top: 2%;
    left: 1.5%;
    z-index: 4;
}

.btn_cta{
    background: url(../images/cta.png)no-repeat;
    background-size: 100%;
    background-size: 100%;
    width: 23.1%;
    height: 7vw;
    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: 64%;
    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.png);
    background-size: 100%;
    width: 100%;
    position: relative;
    margin: 1.8vw auto 10%;
    padding: 1% 0;
}

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

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


.sub_1{
    background: url(../images/sb_1.png)no-repeat;
    background-size: 100%;
    width: 92.6%;
    height: 4.5vw;
    margin: 0 3.7% 1%;
}

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

.step li:nth-child(1){
    background: url(../images/step1.png)no-repeat;
    background-size: 100%;
    width: 29.6%;
    height: 26vw;
    overflow: hidden;
    margin: 0 0.5vw;
}

.step li:nth-child(2){
    background: url(../images/step2.png)no-repeat;
    background-size: 100%;
    width: 29.6%;
    height: 26vw;
    overflow: hidden;
    margin: 0 0.5vw;
}

.step li:nth-child(3){
    background: url(../images/step3.png)no-repeat;
    background-size: 100%;
    width: 29.6%;
    height: 26vw;
    overflow: hidden;
    margin: 0 0.5vw;
}

.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.png)no-repeat;
    background-size: 100%;
    width: 92.6%;
    height: 22vw;
    overflow: hidden;
    margin: 0;
}

.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) p{
    margin: 4% 0 0 33%;
}


.sub_2{
    background: url(../images/sb_2.png)no-repeat;
    background-size: 100%;
    width: 92.4%;
    height: 4.5vw;
    margin: 0 3.7% 1%;
}

.txt1{
    width: 91%;
    color: black;
    font-size: 1.5vw;
    font-family: "Noto Sans TC", sans-serif;
    line-height: 2.5vw;
    margin: 0 auto 2%;
}

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

.txt1 span{
    font-size: 1.2vw;
    display: block;
}

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

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

.pic span:nth-child(2){
    background: url(../images/pic_3.png)no-repeat;
    background-size: 100%;
    width: 15.3%;
    height: 4vw;
    position: absolute;
    left: -22%;
    top: 7%;
    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.png)no-repeat;
    background-size: 100%;
    width: 91.3%;
    height: 4.5vw;
    margin: 0 3.7% 1%;
}

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

.end_list li{margin: 0 auto 1%;}

.sub_3{
    background: url(../images/sb_3.png)no-repeat;
    background-size: 100%;
    width: 18.1%;
    height: 4.5vw;
    margin: 0 3.7% 1%;
}

.sub_4{
    background: url(../images/ex.png)no-repeat;
    background-size: 100%;
    width: 9.7%;
    height: 4vw;
    margin: 5% 3.7% 4%;
}


.box_ex{
    background: url(../images/ex_box_mid.png);
    background-size: 100%;
    width: 91.3%;
    position: relative;
    margin: 1.8vw 3.7% 4vw;
    padding: 1% 0;
}

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

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

.ex_title1{
    background: url(../images/ex_title1.png)no-repeat;
    background-size: 100%;
    width: 15.2%;
    height: 3vw;
    margin: 0 auto 2% 3%;
}

.ex_title2{
    background: url(../images/ex_title2.png)no-repeat;
    background-size: 100%;
    width: 15.2%;
    height: 3vw;
    margin: 0 auto 2% 3%;
}

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

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

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

.ex_list{
    width: 90%;
    list-style-type: square;
    margin: 1% 0 2% 1%;v
}

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

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

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

.ex_deco3{
    background: url(../images/ex_3.png)no-repeat;
    background-size: 100%;
    width: 25.6%;
    height: 3vw;
    position: absolute;
    top: -32.9%;
    left: 33.4%;
    display: block;
    animation: 2s bubble infinite;
    animation-delay: 0.2s;
}

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

.ex2{margin-bottom: 2vw;}

.cta2{margin-top: 3%;}


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

.notice_title{
    background: url(../images/notice.png)no-repeat;
    background-size: 100%;
    width: 63.9%;
    height: 7vw;
    margin: 2% auto 4%;
}

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

.notice li span{
    color: #ffde33;
}

.copyright{
    width: 100%;
    height: auto;
}

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

.deco01{
    background: url(../images/deco1.jpg)no-repeat;
    background-size: 100%;
    width: 12.9%;
    height: 18vw;
    display: block;
    position: absolute;
    top: 24%;
    right: -1%;
}

.deco02{
    background: url(../images/deco2.jpg)no-repeat;
    background-size: 100%;
    width: 12%;
    height: 23vw;
    display: block;
    position: absolute;
    top: 39%;
    left: -0.6%;
}

.deco03{
    background: url(../images/deco3.jpg)no-repeat;
    background-size: 100%;
    width: 16.3%;
    height: 19vw;
    display: block;
    position: absolute;
    top: 50%;
    right: 0%;
}

.deco04{
    background: url(../images/deco4.jpg)no-repeat;
    background-size: 100%;
    width: 15.9%;
    height: 12vw;
    display: block;
    position: absolute;
    top: 69%;
    left: -5.6%;
}

.deco05{
    background: url(../images/deco5.jpg)no-repeat;
    background-size: 100%;
    width: 5.8%;
    height: 13vw;
    display: block;
    position: absolute;
    top: 81%;
    right: 5.4%;
}

.deco06{
    background: url(../images/deco6.jpg)no-repeat;
    background-size: 100%;
    width: 10.8%;
    height: 13vw;
    display: block;
    position: absolute;
    top: 88%;
    left: 4.3%;
}

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

.tips{
    width: 91%;
    color: black;
    font-size: 1.2vw;
    font-family: "Noto Sans TC", sans-serif;
    line-height: 2.5vw;
    margin: 0 auto 0%;
    list-style-type: square;

}