@charset "utf-8";
/*訂閱中時新聞網*/
.subscribe-news-letter .flex-container {
    display: flex;
    flex-wrap: wrap;
    background: linear-gradient(150deg, #f5f5f5 30%, #cccccc);
    padding: 8px;
    margin: 16px auto;
}
.subscribe-news-letter .flex-container > div {
    margin: 8px;
    flex-grow: 1;
}
.subscribe-news-letter .icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.subscribe-news-letter .icon .ico-mail-forward {
    display: block;
    width: 80px;
    height: 66px;
    position: relative;
    overflow: hidden;
}
.subscribe-news-letter .icon .ico-mail-forward::before {
    content: "";
    position: absolute;
    right: 4px;
    bottom: 8px;
    width: 46px;
    height: 41px;
    background: url("../../images/2020/ico-mail-forward-envelope.svg") 0 0 no-repeat;
    background-size: 100% auto; 
    filter: blur(2px);
    animation: news-letter-envelope-transition 6s infinite;
}
.subscribe-news-letter .icon .ico-mail-forward::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 44px;
    height: 66px;
    background: url("../../images/2020/ico-mail-forward-paper-plane.svg") 0 0 no-repeat;
    background-size: 100% auto; 
    animation: news-letter-paper-plane-transition 6s infinite;
}
.subscribe-news-letter .promote-text {
    display: flex;
    align-items: center;
    justify-content: center;
}
.subscribe-news-letter .promote-text .title {
    font-size: 26px;
}
.subscribe-news-letter .promote-text .description {
    margin-top: 8px;
    margin-bottom: 0 !important;
    font-size: 16px;
    line-height: 1.5;
}
.subscribe-news-letter .action {
    display: flex;
    align-items: center;
    justify-content: center;
}
.subscribe-news-letter .action .btn-primary {
    width: 8em;
}
@keyframes news-letter-envelope-transition {
    0%,
    14.9999% {
        filter: none;
        width: 69px;
        height: 44px;
        background-image: url("../../images/2020/ico-mail-forward-envelope-close.svg");
        bottom: 0;
    }
    15%,
    25% {
        filter: none;
        width: 69px;
        height: 62px;
        background-image: url("../../images/2020/ico-mail-forward-envelope.svg");
        bottom: 0;
    }
    50%,
    100% {
        filter: blur(2px);
        width: 46px;
        height: 41px;
        bottom: 8px;
    }
}
@keyframes news-letter-paper-plane-transition {
    0%,
    25% {
        left: 200px;
        top: 200px;
        width: 308px;
        height: 462px;
        filter: blur(30px);
        transform: rotate(-120deg);
    }
    50%,
    100% {
        left: 0;
        top: 0;
        width: 44px;
        height: 66px;
        filter: none;
        transform: rotate(0deg);
    }
}