* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

a {
    display: block;
}

img {
    max-width: 100%;
    display: block;
    image-rendering: -moz-crisp-edges;
    /* Firefox */
    image-rendering: -o-crisp-edges;
    /* Opera */
    image-rendering: -webkit-optimize-contrast;
    /* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
    /* IE (non-standard property) */
}

.webview {
    background-color: #eeeeee;
    width: 100%;
    position: relative;
    /* background-image: url(https://active.mycard520.com.tw/web/CAD21434/banner_bg.png);
    background-size: 100% 100%;
    background-position: center top;
    background-repeat: no-repeat; */
    overflow: hidden;
}

.view_bg {
    width: 100%;
    height: auto;
    /* position: absolute; */
    z-index: 1;
    overflow: hidden;
}

.banner_pc {
    display: block;
}

.banner_mb {
    display: none;
}

.banner_pc,
.banner_mb {
    width: 100%;
    height: auto;
}

.banner_pc img,
.banner_mb img {
    position: absolute;
    top: 0px;
    left: 0px;
}

.banner_pc .banner_01,
.banner_mb .banner_01 {
    position: initial;
}

.text_content {
    width: 100%;
    max-width: 830px;
    margin: 0 auto 60px;
    padding: 20px 30px;
    background: #fff;
}

.text_content h3 {
    text-align: center;
    margin-bottom: 15px;
    font-size: 24px;
}

.text_content p {
    line-height: 1.7em;
}

.text_content p.sm {
    line-height: initial;
    font-size: 14px;
    color: #ff0000;
    text-align: center;
    margin-top: 15px;
}

.text_content .btn {
    width: 100%;
    max-width: 200px;
    margin: 20px auto 0;
}

.note_btn {
    position: absolute;
    width: 70px;
    top: 110px;
    right: 0px;
    cursor: pointer;
    z-index: 5;
}


/**/

.banner_02 {
    animation-name: banner_02;
    animation-delay: 1s;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    opacity: 1;
    transition: 1s;
    transform: scale(1);
}

@keyframes banner_02 {
    0% {
        transform: scale(1);
    }
    20% {
        transform: scale(1.1);
    }
    40% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

.banner_04 {
    animation-name: banner_04;
    animation-delay: 1s;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    opacity: 1;
    transition: 1s;
    transform: scale(1);
}

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

.banner_07 {
    animation-name: banner_07;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    opacity: 0;
    transition: 1s;
    top: 10%;
}

@keyframes banner_07 {
    0% {
        opacity: 0;
        top: 10%;
    }
    50% {
        opacity: 1;
        top: -1.5%;
    }
    75% {
        opacity: 1;
        top: 1.5%;
    }
    100% {
        opacity: 1;
        top: 0%;
    }
}

.banner_08 {
    animation-name: banner_08;
    animation-delay: 0.2s;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    transition: 1s;
    opacity: 0;
    top: 10%;
}

@keyframes banner_08 {
    0% {
        opacity: 0;
        top: 10%;
    }
    50% {
        opacity: 1;
        top: -1.5%;
    }
    75% {
        opacity: 1;
        top: 1.5%;
    }
    100% {
        opacity: 1;
        top: 0%;
    }
}

.banner_09 {
    animation-name: banner_09;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    opacity: 0;
    transition: 1s;
    top: 10%;
}

@keyframes banner_09 {
    0% {
        opacity: 0;
        top: 10%;
    }
    50% {
        opacity: 1;
        top: -1.5%;
    }
    75% {
        opacity: 1;
        top: 1.5%;
    }
    100% {
        opacity: 1;
        top: 0%;
    }
}

@media screen and (max-width:768px) {
    .banner_pc {
        display: none;
    }
    .banner_mb {
        display: block;
    }
    .view_bg {
        background-size: 100% 60%;
    }
}