#wrapper {
            margin: 0 auto;
            text-align: center;
            width: 400px;
            height: auto;
        }

        h1 {
            font: normal 1.75em "Larsseit";
            color: #252525;
            text-align: center;
            padding: 50px 0 30px;
        }

        .card {
            display: inline-block;
            width: 80px;
            height: 115px;
            margin: 10px;
            perspective: 300px;
        }

        .card-inner {
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.8s;
            transform-style: preserve-3d;
        }

        .card.flipped .card-inner {
            transform: rotateY(180deg);
        }

        .card-front,
        .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
        }

        .card-front {
            width: 100%;
            height: 100%;
            background: #252525;
        }

        .card-back {
            transform: rotateY(180deg);
            background-position: center center;
        }
                    
                

                    
        var hor = 3;
        var ver = 4;
        var imageCandi = [
            'http://effysode.co.kr/projects/assets/image/cardgame-01.png',
            'http://effysode.co.kr/projects/assets/image/cardgame-01.png',
            'http://effysode.co.kr/projects/assets/image/cardgame-02.png',
            'http://effysode.co.kr/projects/assets/image/cardgame-02.png',
            'http://effysode.co.kr/projects/assets/image/cardgame-03.png',
            'http://effysode.co.kr/projects/assets/image/cardgame-03.png',
            'http://effysode.co.kr/projects/assets/image/cardgame-04.png',
            'http://effysode.co.kr/projects/assets/image/cardgame-04.png',
            'http://effysode.co.kr/projects/assets/image/cardgame-05.png',
            'http://effysode.co.kr/projects/assets/image/cardgame-05.png',
            'http://effysode.co.kr/projects/assets/image/cardgame-06.png',
            'http://effysode.co.kr/projects/assets/image/cardgame-06.png',
        ];
        var image = [];
        var clickFlag = true;
        var clicked = [];
        var complete = [];
        var startTime;
        var endTime;

        //이미지 랜덤 지정
        function shuffles() {
            for (var i = 0; imageCandi.length > 0; i += 1) {
                image = image.concat(imageCandi.splice(Math.floor(Math.random() * imageCandi.length), 1));
            }
        }

        //카드세팅
        function cardSetting(ver, hor) {
            clickFlag = false;
            var wrapper = document.querySelector('#wrapper');
            for (var i = 0; i < ver * hor; i += 1) {
                var card = document.createElement('div');
                card.className = 'card';
                var cardInner = document.createElement('div');
                cardInner.className = 'card-inner';
                var cardFront = document.createElement('div');
                cardFront.className = 'card-front';
                var cardBack = document.createElement('div');
                cardBack.className = 'card-back';
                cardBack.style.backgroundImage = 'url(' + image[i] + ')';
                cardInner.appendChild(cardFront);
                cardInner.appendChild(cardBack);
                card.appendChild(cardInner);

                (function(c) {
                    card.addEventListener('click', function() {

                        if (clickFlag && !complete.includes(c)) {
                            c.classList.toggle('flipped');
                            clicked.push(c);
                            if (clicked.length === 2) { //두개같을때
                                if (clicked[0].querySelector('.card-back').style.backgroundImage === clicked[1].querySelector('.card-back').style.backgroundImage) {
                                    complete.push(clicked[0]);
                                    complete.push(clicked[1]);
                                    clicked = [];
                                    if (complete.length === ver * hor) {
                                        var endTime = new Date();
                                        var time = (endTime - startTime) / 1000
                                        setTimeout(function() {
                                            alert('Success! ' + time + ' 초 걸렸습니다.');
                                        }, 700);

                                        //초기화
                                        wrapper.innerHTML = '';
                                        complete = [];
                                        imageCandi = imageCandi.slice();
                                        image = [];
                                        startTime = null;
                                        shuffles();
                                        cardSetting(ver, hor);
                                    }
                                } else { //두 카드의 색이 다르면
                                    clickFlag = false;
                                    setTimeout(function() {
                                        clicked[0].classList.remove('flipped');
                                        clicked[1].classList.remove('flipped');
                                        clickFlag = true;
                                        clicked = [];
                                    }, 1000);
                                }
                            }
                        }
                    });
                })(card);
                wrapper.append(card);
            }
            document.querySelectorAll('.card').forEach(function(card, index) {
                setTimeout(function() {
                    card.classList.add('flipped');
                }, 1000 + 100 * index);
            });
            setTimeout(function() {
                document.querySelectorAll('.card').forEach(function(card) {
                    card.classList.remove('flipped');
                });
                clickFlag = true;
                startTime = new Date();
            }, 5000);
        }
        shuffles();
        cardSetting(ver, hor);