Heroes of the Storm memes for seogwipo.jje.hs.kr, YouTube : https://youtu.be/2AR-Z1QKcLw

sigon.css

    /* ================================================================================================
																															KEYFRAMES
================================================================================================ */

    @keyframes shake {
        2% {
            transform: translate(-0.5px, -0.5px) rotate(0.5deg);
        }
        4% {
            transform: translate(2.5px, -1.5px) rotate(-0.5deg);
        }
        6% {
            transform: translate(2.5px, 0.5px) rotate(1.5deg);
        }
        8% {
            transform: translate(-0.5px, 2.5px) rotate(-0.5deg);
        }
        10% {
            transform: translate(1.5px, -0.5px) rotate(1.5deg);
        }
        12% {
            transform: translate(0.5px, -1.5px) rotate(-0.5deg);
        }
        14% {
            transform: translate(0.5px, -1.5px) rotate(0.5deg);
        }
        16% {
            transform: translate(-0.5px, 0.5px) rotate(0.5deg);
        }
        18% {
            transform: translate(-1.5px, 1.5px) rotate(0.5deg);
        }
        20% {
            transform: translate(-0.5px, -1.5px) rotate(-0.5deg);
        }
        22% {
            transform: translate(1.5px, 1.5px) rotate(0.5deg);
        }
        24% {
            transform: translate(-1.5px, 2.5px) rotate(1.5deg);
        }
        26% {
            transform: translate(-0.5px, 0.5px) rotate(0.5deg);
        }
        28% {
            transform: translate(-1.5px, 1.5px) rotate(-0.5deg);
        }
        30% {
            transform: translate(1.5px, 0.5px) rotate(0.5deg);
        }
        32% {
            transform: translate(1.5px, -0.5px) rotate(0.5deg);
        }
        34% {
            transform: translate(2.5px, 1.5px) rotate(-0.5deg);
        }
        36% {
            transform: translate(-1.5px, -0.5px) rotate(-0.5deg);
        }
        38% {
            transform: translate(1.5px, 2.5px) rotate(-0.5deg);
        }
        40% {
            transform: translate(-0.5px, -1.5px) rotate(0.5deg);
        }
        42% {
            transform: translate(0.5px, 0.5px) rotate(0.5deg);
        }
        44% {
            transform: translate(1.5px, 1.5px) rotate(-0.5deg);
        }
        46% {
            transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
        }
        48% {
            transform: translate(1.5px, 1.5px) rotate(1.5deg);
        }
        50% {
            transform: translate(0.5px, -0.5px) rotate(0.5deg);
        }
        52% {
            transform: translate(-0.5px, 0.5px) rotate(1.5deg);
        }
        54% {
            transform: translate(1.5px, -1.5px) rotate(0.5deg);
        }
        56% {
            transform: translate(-0.5px, -1.5px) rotate(1.5deg);
        }
        58% {
            transform: translate(2.5px, 1.5px) rotate(0.5deg);
        }
        60% {
            transform: translate(-0.5px, -0.5px) rotate(1.5deg);
        }
        62% {
            transform: translate(1.5px, 2.5px) rotate(-0.5deg);
        }
        64% {
            transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
        }
        66% {
            transform: translate(2.5px, 1.5px) rotate(-0.5deg);
        }
        68% {
            transform: translate(2.5px, 0.5px) rotate(1.5deg);
        }
        70% {
            transform: translate(-1.5px, -1.5px) rotate(0.5deg);
        }
        72% {
            transform: translate(-1.5px, -0.5px) rotate(-0.5deg);
        }
        74% {
            transform: translate(-0.5px, -1.5px) rotate(1.5deg);
        }
        76% {
            transform: translate(1.5px, 1.5px) rotate(0.5deg);
        }
        78% {
            transform: translate(1.5px, -0.5px) rotate(1.5deg);
        }
        80% {
            transform: translate(-0.5px, 1.5px) rotate(1.5deg);
        }
        82% {
            transform: translate(2.5px, 2.5px) rotate(0.5deg);
        }
        84% {
            transform: translate(-0.5px, 0.5px) rotate(1.5deg);
        }
        86% {
            transform: translate(1.5px, -0.5px) rotate(1.5deg);
        }
        88% {
            transform: translate(2.5px, -1.5px) rotate(0.5deg);
        }
        90% {
            transform: translate(0.5px, -1.5px) rotate(-0.5deg);
        }
        92% {
            transform: translate(-0.5px, -1.5px) rotate(1.5deg);
        }
        94% {
            transform: translate(2.5px, 0.5px) rotate(1.5deg);
        }
        96% {
            transform: translate(-0.5px, -1.5px) rotate(-0.5deg);
        }
        98% {
            transform: translate(-0.5px, -1.5px) rotate(0.5deg);
        }
        0%,
        100% {
            transform: translate(0, 0) rotate(0);
        }
    }


    @keyframes shake-little {
        2% {
            transform: translate(0px, 0px) rotate(0.5deg);
        }
        4% {
            transform: translate(2px, 2px) rotate(0.5deg);
        }
        6% {
            transform: translate(2px, 2px) rotate(0.5deg);
        }
        8% {
            transform: translate(2px, 2px) rotate(0.5deg);
        }
        10% {
            transform: translate(2px, 0px) rotate(0.5deg);
        }
        12% {
            transform: translate(0px, 2px) rotate(0.5deg);
        }
        14% {
            transform: translate(0px, 0px) rotate(0.5deg);
        }
        16% {
            transform: translate(2px, 2px) rotate(0.5deg);
        }
        18% {
            transform: translate(0px, 0px) rotate(0.5deg);
        }
        20% {
            transform: translate(2px, 0px) rotate(0.5deg);
        }
        22% {
            transform: translate(2px, 2px) rotate(0.5deg);
        }
        24% {
            transform: translate(0px, 2px) rotate(0.5deg);
        }
        26% {
            transform: translate(0px, 0px) rotate(0.5deg);
        }
        28% {
            transform: translate(0px, 0px) rotate(0.5deg);
        }
        30% {
            transform: translate(2px, 2px) rotate(0.5deg);
        }
        32% {
            transform: translate(2px, 0px) rotate(0.5deg);
        }
        34% {
            transform: translate(2px, 0px) rotate(0.5deg);
        }
        36% {
            transform: translate(0px, 0px) rotate(0.5deg);
        }
        38% {
            transform: translate(2px, 2px) rotate(0.5deg);
        }
        40% {
            transform: translate(2px, 2px) rotate(0.5deg);
        }
        42% {
            transform: translate(2px, 2px) rotate(0.5deg);
        }
        44% {
            transform: translate(2px, 0px) rotate(0.5deg);
        }
        46% {
            transform: translate(0px, 0px) rotate(0.5deg);
        }
        48% {
            transform: translate(2px, 2px) rotate(0.5deg);
        }
        50% {
            transform: translate(2px, 0px) rotate(0.5deg);
        }
        52% {
            transform: translate(0px, 0px) rotate(0.5deg);
        }
        54% {
            transform: translate(0px, 0px) rotate(0.5deg);
        }
        56% {
            transform: translate(2px, 0px) rotate(0.5deg);
        }
        58% {
            transform: translate(2px, 2px) rotate(0.5deg);
        }
        60% {
            transform: translate(2px, 2px) rotate(0.5deg);
        }
        62% {
            transform: translate(2px, 2px) rotate(0.5deg);
        }
        64% {
            transform: translate(2px, 2px) rotate(0.5deg);
        }
        66% {
            transform: translate(0px, 0px) rotate(0.5deg);
        }
        68% {
            transform: translate(2px, 2px) rotate(0.5deg);
        }
        70% {
            transform: translate(2px, 0px) rotate(0.5deg);
        }
        72% {
            transform: translate(2px, 0px) rotate(0.5deg);
        }
        74% {
            transform: translate(2px, 2px) rotate(0.5deg);
        }
        76% {
            transform: translate(0px, 2px) rotate(0.5deg);
        }
        78% {
            transform: translate(0px, 0px) rotate(0.5deg);
        }
        80% {
            transform: translate(0px, 0px) rotate(0.5deg);
        }
        82% {
            transform: translate(0px, 0px) rotate(0.5deg);
        }
        84% {
            transform: translate(0px, 0px) rotate(0.5deg);
        }
        86% {
            transform: translate(2px, 0px) rotate(0.5deg);
        }
        88% {
            transform: translate(2px, 2px) rotate(0.5deg);
        }
        90% {
            transform: translate(2px, 2px) rotate(0.5deg);
        }
        92% {
            transform: translate(2px, 0px) rotate(0.5deg);
        }
        94% {
            transform: translate(2px, 0px) rotate(0.5deg);
        }
        96% {
            transform: translate(2px, 2px) rotate(0.5deg);
        }
        98% {
            transform: translate(2px, 2px) rotate(0.5deg);
        }
        0%,
        100% {
            transform: translate(0, 0) rotate(0);
        }
    }
    /*=========================== shake end ==============================*/

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        0.1% {
            transform: rotate(-60deg);
        }
        0.2% {
            transform: rotate(-144deg);
        }
        0.25% {
            transform: rotate(-252deg);
        }
        0.3% {
            transform: rotate(-396deg);
        }
        0.35% {
            transform: rotate(-576deg);
        }
        0.4% {
            transform: rotate(-792deg);
        }
        0.45% {
            transform: rotate(-1152deg);
        }
        0.5% {
            transform: rotate(-1632deg);
        }
        0.6% {
            transform: rotate(-2352deg);
        }
        0.7% {
            transform: rotate(-4012deg);
        }
        2.1% {
            transform: rotate(-56856deg);
        }
        2.2% {
            transform: rotate(-58514deg);
        }
        2.3% {
            transform: rotate(-59234deg);
        }
        2.4% {
            transform: rotate(-59703deg);
        }
        2.5% {
            transform: rotate(-60063deg);
        }
        2.6% {
            transform: rotate(-60279deg);
        }
        2.7% {
            transform: rotate(-60603deg);
        }
        2.8% {
            transform: rotate(-60711deg);
        }
        100% {
            transform: rotate(-82656deg);
        }
    }

    @keyframes scale-up {
        0% {
            transform: scale(0.5);
        }
        0.5% {
            transform: scale(0.5);
        }
        1% {
            transform: scale(2.5);
        }
        2% {
            transform: scale(2.5);
        }
        2.3% {
            transform: scale(0.5) translate(200px, -200px);
        }
        100% {}
    }

    @keyframes remove-border {
        0% {}
        1% {
            border-color: rgba(255, 255, 255, 0);
            background-color: rgba(255, 255, 255, 0);
        }
        100% {}
    }

    @keyframes fall-header {
        0% {
            top: 0;
        }
        0.6% {
            opacity: 1;
        }
        0.7% {
            top: 350px;
            transform: scale(0) perspective(450px) rotateY(155deg) rotateZ(100deg);
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }

    @keyframes fall-sharemenu {
        0% {}
        0.5% {
            transform: translate(-100%, 0%) rotate(-270deg) scale(0.2);
            opacity: 1;
        }
        0.55% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }

    @keyframes fall-search_box {
        0% {}
        0.4% {
            transform: translate(-10%, -500%) rotate(400deg) scale(0);
            opacity: 1;
        }
        0.45% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }

    @keyframes fall-list_btn_top_right {
        0% {}
        0.5% {
            transform: translate(45vw, 212px) rotate(180deg) scale(0.2);
            transform-origin: left;
            opacity: 1;
        }
        0.55% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }

    @keyframes fall-list_btn_top_left {
        0% {}
        0.5% {
            transform: translate(-45vw, 212px) rotate(180deg) scale(0.2);
            transform-origin: left;
            opacity: 1;
        }
        0.55% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }

    @keyframes fall-list_btn_bottom_right {
        0% {}
        0.5% {
            transform: translate(45vw, -212px) rotate(180deg) scale(0.2);
            transform-origin: left;
            opacity: 1;
        }
        0.55% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }

    @keyframes fall-list_btn_bottom_left {
        0% {}
        0.5% {
            transform: translate(-45vw, -312px) rotate(180deg) scale(0.2);
            transform-origin: left;
            opacity: 1;
        }
        0.55% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }

    @keyframes fall-cafemenu {
        0% {}
        0.7% {
            transform: translate(44vw, -42%) rotate(345deg) scale(0.05);
            opacity: 1;
        }
        0.75% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }

    @keyframes fall-tops {
        0% {}
        0.7% {
            transform: translate(44vw, 42%) rotate(345deg) scale(0.05);
            opacity: 1;
        }
        0.75% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }

    @keyframes fall-commentDiv {
        0% {}
        1% {
            transform: translate(-6vw, -8vw) rotateX(230deg) rotateY(240deg) scale(0.05);
            opacity: 1;
            transform-origin: top;
        }
        1.1% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }

    @keyframes fall-subject {
        0% {}
        0.5% {
            transform: translate(45vw, 190px) rotate(50deg) scale(0.4);
            transform-origin: right;
            opacity: 1;
        }
        0.55% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }

    @keyframes fall-writer {
        0% {}
        0.5% {
            transform: translate(40vw, 180px) rotate(-60deg) scale(0.4);
            transform-origin: right;
            opacity: 1;
        }
        0.55% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }

    @keyframes fall-url {
        0% {}
        0.5% {
            transform: translate(45vw, 180px) rotate(-45deg) scale(0.2);
            transform-origin: right;
            opacity: 1;
        }
        0.55% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }

    @keyframes fall-comment_cnt {
        0% {}
        0.5% {
            transform: translate(40vw, -82px) rotate(180deg) scale(0.2);
            transform-origin: left;
            opacity: 1;
        }
        0.55% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }

    @keyframes fall-ccl {
        0% {}
        0.5% {
            transform: translate(-44vw, -42px) scale(0.5);
            transform-origin: left;
            opacity: 1;
        }
        0.55% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }

    @keyframes appear-hos {
        0% {}
        0.04% {
            opacity: 1;
        }
        100% {
            opacity: 1;
        }
    }

    @keyframes fall-paging {
        0% {}
        0.5% {
            transform: rotate(-45deg) translate(7vw, -400px) scale(0.5);
            opacity: 1;
        }
        0.55% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }

    @keyframes fall-minidaum {
        0% {}
        0.5% {
            transform: rotate(-48deg) translate(-45vw) scale(0.5);
            opacity: 1;
        }
        0.55% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }

    @keyframes fall-nickzzal {
        0% {}
        0.5% {
            transform: translate(387px, 22px) rotate(200deg) rotateX(60deg) rotateY(60deg) scale(0.1);
            opacity: 1;
        }
        0.55% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }
    /* ================================================================================================
																																	STYLE
================================================================================================ */

    html {
        animation-name: shake;
        animation-duration: 100ms;
        animation-timing-function: ease-in-out;
        animation-iteration-count: 190;
        animation-delay: 6.5s;
    }

    body {
        animation-name: shake-little;
        animation-duration: 100ms;
        animation-timing-function: ease-in-out;
        animation-iteration-count: 245;
        animation-delay: 3s;
    }

    .viewBox {
        z-index: 0;
    }

    header {
        z-index: 2000;
    }

    #pageTitle {
        overflow: visible;
        animation: 1000s fall-header ease-out 8.5s;
    }
    .tit {
        overflow: visible;
        animation: 1000s fall-header ease-out 8.5s;
    }

    .snsBox {
        z-index: 2000
    }

    .snsBox > .btnShare {
        animation: 1000s fall-sharemenu cubic-bezier(0.85, 0.18, 1, 1.01) 7s;
        z-index: 2000;
    }
    .snsBox > .sns_more .btnFbook{
        animation: 1000s fall-sharemenu cubic-bezier(0.85, 0.18, 1, 1.01) 7s;
        z-index: 2000;
    }
    .snsBox > .sns_more .btnTwt {
        animation: 1000s fall-sharemenu cubic-bezier(0.85, 0.18, 1, 1.01) 7s;
        z-index: 2000;
    }
    .snsBox > .sns_more .btnInstar {
        animation: 1000s fall-sharemenu cubic-bezier(0.85, 0.18, 1, 1.01) 7s;
        z-index: 2000;
    }
    #wrap {
        overflow: visible;
    }

    .survey {
        animation: 1000s fall-search_box ease 6s;
    }

    .infoBox > li {
        animation: 1000s fall-list_btn_top_right cubic-bezier(0.85, 0.18, 1, 1.01) 7s;
        z-index: 2000;
    }

    #location > a {
        animation: 1000s fall-list_btn_top_left cubic-bezier(0.85, 0.18, 1, 1.01) 7s;
        z-index: 2000;
    }
    #location > strong {
        animation: 1000s fall-list_btn_top_left cubic-bezier(0.85, 0.18, 1, 1.01) 7s;
        z-index: 2000;
    }
    #location > span {
        animation: 1000s fall-list_btn_top_left cubic-bezier(0.85, 0.18, 1, 1.01) 7s;
        z-index: 2000;
    }
    #webNavi > .mNavi {
        animation: 1000s fall-tops linear 7s;
        z-index: 2000;
    }
    .S_visual {
        animation: 1000s fall-tops linear 7s;
        z-index: 2000;
    }

    .pt10>a {
        animation: 1000s fall-list_btn_bottom_right cubic-bezier(0.85, 0.18, 1, 1.01) 7s;
        z-index: 2000;
    }

    .listNavi>ul {
        animation: 1000s fall-list_btn_bottom_left cubic-bezier(0.85, 0.18, 1, 1.01) 7s;
        z-index: 2000;
    }

    #sideContent, .top_menu {
        animation: 1000s fall-cafemenu linear 7s;
        z-index: 2000;
    }
    .top_menu {
        animation: 1000s fall-tops linear 7s;
        z-index: 2000;
    }


    .subject>span,
    .subject>a {
        animation: 1000s fall-subject linear 7s;
        z-index: 2000;
    }

    footer {
        display: none;
    }

    .sigong div {
        width: 300px;
        height: 300px;
        min-width: 300px;
        top: 0;
        left: 0;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    .sigong .sigong_detail2 {
        background-image: url('http://i.imgur.com/I7t6r1t.png');
        animation: spin 1000s linear infinite;
    }
    .sigong .sigong_detail1 {
        position: absolute;
        background-image: url('http://cfile263.uf.daum.net/image/2120C1435920967129707D');
    }

    .nickzzal img {
        position: absolute;
        top: -50px;
        width: 110px;
        z-index: 2000;
        animation: 1000s fall-nickzzal linear 6s;
    }

    #user_contents {
        overflow: visible !important;
    }

    .hos {
        background-image: url(http://cfile278.uf.daum.net/image/2124B4435920967229A02D);
        background-size: contain;
        background-position: center;
    }

    audio {
        visibility: hidden;
    }
    /* ================================================================================================
																																	미디어쿼리
================================================================================================ */

    @media screen and (min-width: 480px) {
        /* vw>480px */
        .sigong {
            position: absolute;
            right: 50%;
            margin-top: -100px;
            animation: scale-up 1000s linear infinite;
            z-index: 1000;
        }
        .hos {
            opacity: 0;
            animation: 1000s appear-hos linear 23s;
            width: 708px;
            height: 700px;
            position: absolute;
            right: 50%;
            margin-top: -338px;
            margin-right: -255px;
        }
    }

    @media screen and (max-width: 480px) {
        /* vw<480px */
        @keyframes scale-up {
            0% {
                transform: scale(0.5);
            }
            0.5% {
                transform: scale(0.5);
            }
            1% {
                transform: scale(1.2);
            }
            2% {
                transform: scale(1.2);
            }
            2.5% {
                transform: scale(0.21) translate(33%, -47%)
            }
            100% {}
        }
        @keyframes mobile_comment1 {
            0% {}
            0.5% {
                transform: translate(0, -100px) scale(0.4) rotate(-225deg);
                opacity: 1;
            }
            0.55% {
                opacity: 0;
            }
            100% {}
        }
        @keyframes mobile_comment2 {
            0% {}
            0.5% {
                transform: translate(0, -200px) scale(0.4) rotate(-45deg);
                opacity: 1;
            }
            0.55% {
                opacity: 0;
            }
            100% {}
        }
        @keyframes mobile_comment3 {
            0% {}
            0.5% {
                transform: translate(0, -300%) scale(0.4) rotate(70deg);
                opacity: 1;
            }
            0.55% {
                opacity: 0;
            }
            100% {}
        }
        @keyframes mobile_comment4 {
            0% {}
            0.5% {
                transform: translate(0, -400%) scale(0.4) rotate(-80deg);
                opacity: 1;
            }
            0.55% {
                opacity: 0;
            }
            100% {}
        }
        @keyframes mobile_comment5 {
            0% {}
            0.5% {
                transform: translate(0, -500%) scale(0.4) rotate(200deg);
                opacity: 1;
            }
            0.55% {
                opacity: 0;
            }
            100% {}
        }
        @keyframes mobile_subject {
            0% {}
            1% {
                transform: translate(0, 250px) scale(0.2) rotateX(60deg) rotateY(60deg) rotateZ(360deg);
                opacity: 1;
            }
            1.05% {
                opacity: 0;
            }
            100% {}
        }
        @keyframes mobile_navi {
            0% {}
            0.6% {
                transform: translate(0, 350px) scale(0.5) rotate(-145deg);
                opacity: 1;
            }
            0.65% {
                opacity: 0;
            }
            100% {}
        }
        @keyframes mobile_tabcafe {
            0% {}
            0.6% {
                transform: translate(0, -100px) scale(0.2) rotate(-145deg);
                opacity: 1;
            }
            0.65% {
                opacity: 0;
            }
            100% {}
        }
        @keyframes mobile_optionbtn1 {
            0% {}
            0.6% {
                transform: translate(-65px, -10px) scale(0.5);
                opacity: 1;
            }
            0.65% {
                opacity: 0;
            }
            100% {}
        }
        @keyframes mobile_optionbtn2 {
            0% {}
            0.6% {
                transform: translate(-100px, -10px) scale(0.5);
                opacity: 1;
            }
            0.65% {
                opacity: 0;
            }
            100% {}
        }
        @keyframes fall-nickzzal {
            0% {}
            0.5% {
                transform: translate(120px, 150px) rotate(200deg) rotateX(60deg) rotateY(60deg) scale(0.2);
                opacity: 1;
            }
            0.55% {
                opacity: 0;
            }
            100% {
                opacity: 0;
            }
        }
        html,
        body {
            overflow: hidden;
        }
        .sigong div {
            width: 100%;
        }
        .sigong {
            animation: scale-up 1000s linear infinite;
            width: 100%;
            z-index: 1000;
            display: table-cell;
        }
        .hos {
            position: absolute;
            width: 100%;
            left: 0;
            opacity: 0;
            z-index: -1;
            animation: 1000s appear-hos linear 23s;
        }
        .mobilebox {
            position: absolute;
            display: table;
            top: 0;
            left: 0;
            width: 100%;
            height: 375px;
            vertical-align: middle;
        }
        .list_cmt>li:nth-child(1) {
            position: relative;
            animation: 1000s mobile_comment1 linear 6s;
            z-index: 2000;
        }
        .list_cmt>li:nth-child(2) {
            position: relative;
            animation: 1000s mobile_comment2 linear 6.4s;
            z-index: 2000;
        }
        .list_cmt>li:nth-child(3) {
            position: relative;
            animation: 1000s mobile_comment3 linear 6.8s;
            z-index: 2000;
        }
        .list_cmt>li:nth-child(4) {
            position: relative;
            animation: 1000s mobile_comment4 linear 7.2s;
            z-index: 2000;
        }
        .list_cmt>li:nth-child(5) {
            position: relative;
            animation: 1000s mobile_comment5 linear 7.6s;
            z-index: 2000;
        }
        .view_subject {
            animation: 1000s mobile_subject linear 10s;
            z-index: 2000;
        }
        .cafe_navi {
            animation: 1000s mobile_navi linear 7s;
            z-index: 2000;
        }
        .tab_cafe {
            animation: 1000s mobile_tabcafe linear 9s;
            z-index: 2000;
            position: relative;
        }
        .detail_btns {
            animation: 1000s mobile_optionbtn1 linear 6s;
            z-index: 2000;
            position: relative;
        }
        .article_more {
            animation: 1000s mobile_optionbtn2 linear 6.5s;
            z-index: 2000;
            position: relative;
        }
    }
</style>