html{font-size: 14px;}

#mtkContainer {
    text-align: left;
    font-family: "微軟正黑體", "Microsoft JhengHei", "Apple LiGothic Medium", Arial, Helvetica, sans-serif;
    background-color: #5cb7e2;
}



.wrapper {
    position: relative;
    width: 92%;
    margin: 0 auto;
    text-align: center; color: white;
}

.wrapper img {
    width: 100%;
    border: 0;
    vertical-align: top;
    max-width: 1200px;
}


.wrapper * {
    transition: all 0.2s;
}




.wrapper h1{font-size: 2rem; padding: 20px 0; margin: 20px 0; border:solid 5px white; letter-spacing: 0.02em;}
.wrapper h2{font-size: 1.2rem; padding: 20px 0; letter-spacing: 0.1em; line-height: 1.2em;display: inline-block;}

.btn{display: inline-block;background: #ffda26;border-radius: 15px;font-size: 24px;padding: 5px 15px;font-weight: bold;color:#000;box-shadow: 0px 4px 0px #b79b13;transition: 0.3s;}

.wrapper hr{border:dotted 2px white; margin:30px 0;}

.wrapper b{color: yellow;}

.wrapper li{text-align: left; padding:10px 0; line-height: 1.2em; text-indent: -2em; margin-left: 2em; font-size: 0.9rem;}

.wrapper a:hover{text-decoration: none;}

.step .pc{display: none;}
.step .m{display:block;}




@media screen and (min-width:700px) {

.step .pc{display: block;}
.step .m{display: none;}


}


@media screen and (min-width:900px) {

.wrapper .step1 p img{width: 50%;}

}


@media screen and (min-width:1245px) {
html{font-size: 20px;}
    .wrapper .step1 p img{width: auto;}
    .wrapper{width: 1200px;}
    .wrapper img {
        width: auto;
}

.wrapper hr{ margin:40px 0;}
}





/*media*/