@keyframes flame_ani {
    0% { transform:scale(0); }
    70% { transform:scale(1); opacity: 1; display: block; }
    75% { opacity: 1; }
    80% { opacity: 0; }
    85% { opacity: 1; }
    90% { opacity: 0; }
    95% { opacity: 1; }
    100% { opacity: 0; display: none; }
}
@-webkit-keyframes flame_ani {
    0% { transform:scale(0); }
    70% { transform:scale(1); opacity: 1; display: block; }
    75% { opacity: 1; }
    80% { opacity: 0; }
    85% { opacity: 1; }
    90% { opacity: 0; }
    95% { opacity: 1; }
    100% { opacity: 0; display: none; }
}

@keyframes bg_ani {
    0% {transform: translatex(0);}
    100% {transform: translatex(-100%);}
}
@-webkit-keyframes bg_ani {
    0% {transform: translatex(0);}
    100% {transform: translatex(-100%);}
}
        
@keyframes car_ani {
    0% {transform: translatex(0);}
    100% {transform: translatex(-2000%);}
}
@-webkit-keyframes car_ani {
    0% {transform: translatex(0);}
    100% {transform: translatex(-2000%);}
}
        
@keyframes stamp_ani01 {
    0% {
        opacity: 1;
    }
    
    45% {
        -webkit-transform:scale(1) translatex(-20%) translatey(-56%);
        -moz-transform:scale(1) translatex(-20%) translatey(-56%);
        -o-transform:scale(1) translatex(-20%) translatey(-56%);
        transform:scale(1) translatex(-20%) translatey(-56%);
    }
    65% {
        -webkit-transform:scale(0.9) translatex(-20%) translatey(-56%);
        -moz-transform:scale(0.9) translatex(-20%) translatey(-56%);
        -o-transform:scale(0.9) translatex(-20%) translatey(-56%);
        transform:scale(0.9) translatex(-20%) translatey(-56%);
    }
    75% {
        opacity: 1;
        -webkit-transform:scale(1) translatex(-20%) translatey(-56%);
        -moz-transform:scale(1) translatex(-20%) translatey(-56%);
        -o-transform:scale(1) translatex(-20%) translatey(-56%);
        transform:scale(1) translatex(-20%) translatey(-56%);
    }
    95% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        -webkit-transform:scale(1) translatex(0) translatey(0);
        -moz-transform:scale(1) translatex(0) translatey(0);
        -o-transform:scale(1) translatex(0) translatey(0);
        transform:scale(1) translatex(0) translatey(0);
    }
}
@-webkit-keyframes stamp_ani01 {
    0% {
        opacity: 1;
    }
    
    45% {
        -webkit-transform:scale(1) translatex(-20%) translatey(-56%);
        -moz-transform:scale(1) translatex(-20%) translatey(-56%);
        -o-transform:scale(1) translatex(-20%) translatey(-56%);
        transform:scale(1) translatex(-20%) translatey(-56%);
    }
    65% {
        -webkit-transform:scale(0.9) translatex(-20%) translatey(-56%);
        -moz-transform:scale(0.9) translatex(-20%) translatey(-56%);
        -o-transform:scale(0.9) translatex(-20%) translatey(-56%);
        transform:scale(0.9) translatex(-20%) translatey(-56%);
    }
    75% {
        opacity: 1;
        -webkit-transform:scale(1) translatex(-20%) translatey(-56%);
        -moz-transform:scale(1) translatex(-20%) translatey(-56%);
        -o-transform:scale(1) translatex(-20%) translatey(-56%);
        transform:scale(1) translatex(-20%) translatey(-56%);
    }
    95% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        -webkit-transform:scale(1) translatex(0) translatey(0);
        -moz-transform:scale(1) translatex(0) translatey(0);
        -o-transform:scale(1) translatex(0) translatey(0);
        transform:scale(1) translatex(0) translatey(0);
    }
}

@keyframes max_ani {
    0% { transform:scale(0.9); transform: translatey(0); }
    50% { transform:scale(1.05); transform: translatey(-30px); }
    100% { transform:scale(0.9); }
}
@-webkit-keyframes max_ani {
    0% { transform:scale(0.9); transform: translatey(0); }
    50% { transform:scale(1.05); transform: translatey(-30px); }
    100% { transform:scale(0.9); }
}

@keyframes hill_ani {
    0% { transform: translatey(0); opacity: 1; }
    90% { opacity: 0; }
    100% { transform: translatey(100%); opacity: 0; }
}
@-webkit-keyframes hill_ani {
    0% { opacity: 1; transform: translatey(0); }
    90% { opacity: 0; }
    100% { opacity: 0; transform: translatey(100%); }
}

@keyframes step_on_ani {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@-webkit-keyframes step_on_ani {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes step_off_ani {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
@-webkit-keyframes step_off_ani {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/*******************************************************************************************************/
    /*reset CSS*/
    * { margin: 0; padding: 0; }
    a { text-decoration: none; color: black; }
    li { list-style: none; }
    img { border: none; }

    /***************************************/
    html {height: 100%;}

    body {
        width: 100%; height: 100%; overflow: hidden;
        position: fixed; top: 0; left: 0;
        background-color: #DDEDF5;
        -webkit-transition:background-color 0.3s linear;
        -o-transition:background-color 0.3s linear;
        transition:background-color 0.3s linear;
    }

    /**************************상단 하늘부분**************************/
    #div_top { width: 100%; height: 100%; overflow:hidden;
               position: absolute; top: 0; left: 0; }

    /*Costa 글씨부분*/
    #costa_txt { width: 160px; height: 50px; position: absolute; top: -30%; left: 50%; margin-left: -80px; }
    #costa_txt img { width: 100%; }

    /*클래스 추가*/
    #costa_txt.down { top: 10%; }

    /*구름 영역*/
    #cloud_wrap { width: 100%; height: 30%; position:absolute; left: 0; top: 11%;
        -webkit-animation: bg_ani 5s linear;
        -moz-animation: bg_ani 5s linear;
        -o-animation: bg_ani 5s linear;
        animation: bg_ani 5s linear;
    }
    .cloud { width: 200px; height: 30px; position: relative;
             background-image: url(../images/intro/cloud.png);
             background-size: cover; background-repeat: no-repeat; }
    .cloud01 { left: -110px; }
    .cloud02 { left: 330px; margin-top: -35px; }


    /*불꽃 영역*/
    #flame_wrap { width: 100%; height: 50%; position: relative; top: 9%; left: 0; margin-left: -15%; }
    #flame_wrap.on {
        -webkit-animation: bg_ani 10s linear;
        -moz-animation: bg_ani 10s linear;
        -o-animation: bg_ani 10s linear;
        animation: bg_ani 10s linear;
    }
    .flame { position: absolute; bottom: 65%; left: 50%;
        background-image: url(../images/intro/flame.png);
        background-size: cover; background-repeat: no-repeat;
    }
    .flame01 { width: 40px; height: 40px;}
    .flame01.on {
        -webkit-animation: flame_ani 1.3s alternate 0s ;
        -moz-animation: flame_ani 1.3s alternate 0s ;
        -o-animation: flame_ani 1.3s alternate 0s ;
        animation: flame_ani 1.3s alternate 0s ;
    }
    .flame02 { width: 20px; height: 20px; margin-left: 90px; margin-bottom: 50px; }
    .flame02.on {
        -webkit-animation: flame_ani 1.3s alternate 0.2s;
        -moz-animation: flame_ani 1.3s alternate 0.2s;
        -o-animation: flame_ani 1.3s alternate 0.2s;
        animation: flame_ani 1.3s alternate 0.2s;
    }
    .flame03 { width: 60px; height: 60px; margin-left: 210px; margin-top: -10px; }
    .flame03.on {
        -webkit-animation: flame_ani 1.3s alternate 0.4s;
        -moz-animation: flame_ani 1.3s alternate 0.4s;
        -o-animation: flame_ani 1.3s alternate 0.4s;
        animation: flame_ani 1.3s alternate 0.4s;
    }



        /*클래스 추가*/
         body.change { background-color: #fff; }
        .cloud.change { opacity: 0; }

        /*산배경, 불꽃, 길, 차 제거*/
        #flame_wrap.change { opacity: 0; }
        #mountain.change { top: 200%; }
        #div_bottom.change { background-color: #fff; overflow: visible; }

    /**************************중간 핸드폰부분**************************/
    /*중간 전체 설정*/
    #div_center { width: 100%; height: 55%; z-index: 9; overflow: visible;
                  position: fixed; bottom: 0px; left: 0%; }

    /*왼손영역*/
    #left_hand { width: 100%; height: 100%; position: absolute; bottom: -10px;
        background-image: url(../images/intro/left_hand.png);
        background-size: contain; background-repeat: no-repeat;
        background-position: right top;
    }




    /*디바이스 영역*/
    #device { width: 35%; height: 170px; display:none;
              position: absolute; top: -25px; right: 8%;
              /*animation: hand_ani 0.8s linear 0.2s;*/ }

    /*모바일 이미지*/
    #mobile { width: 100%; height: 100%; position:relative; display:none; }
    #mobile img { width: 100%; }

    /*커피스탬프*/
    #coffee_stamp { width: 60%; height: 70%; z-index: 6; opacity: 0;
                    position: absolute; top: 100%; left: 10%; }
    #coffee_stamp img { width: 100%; }

    /**********************************************클래스 추가***********************************************/
    #div_center.on #left_hand { background-image: url(../images/intro/coffee_hand.png);
        width: 100%; bottom: 17%; background-size: contain; margin-top: 30px;
                                background-position: right; transform:scale(0.9);
                                -webkit-animation: max_ani 0.5s linear;
                                -moz-animation: max_ani 0.5s linear;
                                -o-animation: max_ani 0.5s linear;
                                animation: max_ani 0.5s linear; }
    #div_center.on #left_hand #device { opacity: 0; }
    #coffee_stamp.show { opacity: 1; top: -25%; }
    #left_hand.on { opacity: 0; bottom: -50%;  }
    /********************************************************************************************************/
        

    /*오른손 영역*/
    #right_hand { position: absolute; width: 100%; height: 100%; z-index: 15; opacity: 0; bottom: -56%;  margin-left: 20%; margin-bottom: -30px; }


    #right_hand.on {
        -webkit-transition:all 0.3s linear;
        -o-transition:all 0.3s linear;
        transition:all 0.3s linear;
        -webkit-animation: stamp_ani01 1s linear;
        -moz-animation: stamp_ani01 1s linear;
        -o-animation: stamp_ani01 1s linear;
        animation: stamp_ani01 1s linear;
    }

    #right_hand> p { width: 100%; height: 100%; position: relative; z-index: 14; }
    #right_hand> p> img { width: 100%; }

    /*도장*/
/*
    #stamp { width: 70px; height: 70px; z-index: 13;
             position: absolute; top: 0px; left: 0;
             background-image: url(../images/intro/stamp_bg.png);
             background-size: cover; background-repeat: no-repeat; }
 */

    /**************************하단 땅부분**************************/
    #div_bottom { width: 100%; height: 65%; overflow: hidden;
                  position: absolute; bottom: 0; left: 0;
                  background-color: #747373; }

    .hill_wrap01 { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; }
    .hill_wrap02 { width: 100%; height: 100%; position: absolute; top: 0; left: 0;  overflow: visible; opacity: 0; }


    /*언덕 부분*/
    .hill, .sub_hill { width: 100%; height: 60%; overflow: hidden;
            position: absolute; bottom: 0; left: 0;
            background-size: cover; background-repeat: no-repeat; }
    .hill01 { z-index: 8; bottom: 0px; }
    .hill02 { z-index: 7; bottom: 5%; }
    .hill03 { z-index: 6; bottom: 10%; }
    .hill04 { z-index: 5; bottom: 20%; }
    .hill05 { z-index: 4; margin-left: -5%; bottom: 30%; }
    .hill06 { z-index: 3; margin-left: 10%; bottom: 45%; }

    .hill img {width: 100%;}


    /*서브 언덕부분*/
    .sub_hill { height: 80%; overflow: hidden; }
    .sub_hill01 { z-index: 5; bottom: -10%; bottom: -50%; }
    .sub_hill02 { z-index: 4; bottom: 22%; bottom: -50%; }
    .sub_hill03 { z-index: 3; bottom: 35%; bottom: -50%;}

    .sub_hill img {width: 100%;}

     /*클래스 추가*/
    /*
    .hill.down {
        -webkit-animation: hill_ani .6s linear 3s forwards;
        -moz-animation: hill_ani .6s linear 3s forwards;
        -o-animation: hill_ani .6s linear 3s forwards;
        animation: hill_ani .6s linear 3s forwards;
    }
    */
    .hill_wrap01.down {
        -webkit-animation: hill_ani .8s linear forwards;
        -moz-animation: hill_ani .8s linear forwards;
        -o-animation: hill_ani .8s linear forwards;
        animation: hill_ani .8s linear forwards;
    }

    .hill_wrap02.up { opacity: 1; }
    .sub_hill01.up { bottom: -10%; }
    .sub_hill02.up { bottom: 22%; }
    .sub_hill03.up { bottom: 35%; }

    /**************************길 이미지 부분**************************/
    #road { width: 100%; height: 20%; overflow: hidden;
            position: absolute; bottom: 61%; left: 0; margin-top: 0; }

    #mountain {
        width: 200%; height: 100%; position: relative; top: 0; left: 0;
        background-image: url(../images/intro/bg.png); background-size: contain; background-repeat: repeat;
    }
    #mountain.on {
        -webkit-animation: bg_ani 10s linear;
        -moz-animation: bg_ani 10s linear;
        -o-animation: bg_ani 10s linear;
        animation: bg_ani 10s linear;
    }

    /*자동차*/
    #car {
        width: 50px; height: 20px; z-index: 2; position: absolute; bottom: 15%; left: 100%;
        background-image: url(../images/intro/car.png); background-size: contain; background-repeat: no-repeat; background-position: center;
    }
    #car.on {
        -webkit-animation: car_ani 3s linear;
        -moz-animation: car_ani 3s linear;
        -o-animation: car_ani 3s linear;
        animation: car_ani 3s linear;
    }

    /*하단 텍스트 영역*/
    .txt_hill { width: 100%; height: 20%; z-index: 10; opacity: 1;
                  position: fixed; bottom: 0; left: 0;
                  background-image: url(../images/intro/main_hill.png);
                  background-size: cover; background-position: top;
                  background-repeat: no-repeat; }

    .sub_txt { background-image: url(../images/intro/sub_hill.png);
                z-index: 11; bottom: -50%; }


    /*클래스 추가*/
    .center_txt.change { opacity: 0; bottom: -100%; }
    .sub_txt.change { bottom: 0; }






#back_intro {
    opacity: 0;
    -webkit-transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -ms-transition: opacity .4s ease-in-out;
    -o-transition: opacity .4s ease-in-out;
    transition: opacity .4s ease-in-out;
}
#back_intro.on { opacity: 1; }



/*****************************/
/*          Loading          */
/*****************************/

.loading_div {
    position: fixed; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); color: #fff; z-index: 10000;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
}

.loading_div.on { opacity: 0; }
.loading_logo { width: 100%; height: 15px; position: absolute; top: 50%; margin-top: -90px; text-align: center; }
.loading_logo img { height: 100%; }
.loading_img { width: 84px; height: 84px; overflow: hidden; position: absolute; top: 50%; left: 50%; margin-top: -60px; margin-left: -42px; background-color: #DDEDF5; border-radius: 42px; -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); }

#l_mountain { width: 200%; height: 88px; position: relative; top: 0; left: 0;
    background-image: url(../images/intro/bg.png); background-size: cover; background-repeat: repeat;
    -webkit-animation: bg_ani 5s linear infinite;
    -moz-animation: bg_ani 5s linear infinite;
    -o-animation: bg_ani 5s linear infinite;
    animation: bg_ani 5s linear infinite; }
#l_car { width: 40px; height: 20px; z-index: 2; position: absolute; bottom: 15%; left: 100%;
    background-image: url(../images/intro/car.png); background-size: cover; background-repeat: no-repeat; background-position: center;
    -webkit-animation: car_ani 4s linear infinite;
    -moz-animation: car_ani 4s linear infinite;
    -o-animation: car_ani 4s linear infinite;
    animation: car_ani 4s linear infinite; }
.loading_p { position: absolute; text-align:center; top: 50%; font-size: 14px; font-weight: bold; font-family: sans-serif; width: 100%; height: 30px; line-height: 20px; vertical-align: middle; margin-top: 35px; }
.loading_p> span { color: #EE1F08; }



/*****************************/
/*     Sequence No Page      */
/*****************************/

#back_sequence_no {height: 100%; opacity: 0;
    -webkit-transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -ms-transition: opacity .4s ease-in-out;
    -o-transition: opacity .4s ease-in-out;
    transition: opacity .4s ease-in-out;
}
#back_sequence_no.on {opacity: 1;}

#sequence_no_navi { width: 100%; height: 8%; position: relative; z-index: 1; }
#sequence_no_navi img { height: 66%; position: relative; top: 22%; }
#sequence_no_navi_home { height: 100%; float: right; margin-right: 5%; }
##sequence_no_navi_home img { transform:scale(0.85); }



/*****************************/
/*     Intro Stamp Page      */
/*****************************/

#back_card_list {overflow-y: auto; display: none; opacity: 0;
    -webkit-transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -ms-transition: opacity .4s ease-in-out;
    -o-transition: opacity .4s ease-in-out;
    transition: opacity .4s ease-in-out;
}
#back_card_list.on {
    opacity: 1;
}

/*****************************/
/*     Intro Stamp Page      */
/*****************************/

#back_stamp { width: 100%; height: 100%; position: fixed; top: 0; left: 0; opacity: 0;
    -webkit-transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -ms-transition: opacity .4s ease-in-out;
    -o-transition: opacity .4s ease-in-out;
    transition: opacity .4s ease-in-out;
}
#back_stamp.on {opacity: 1;}

.navi { width: 100%; height: 8%; position: relative; }
.navi_inner_left { height: 100%; float: left; margin-left: 5%; }
.navi_inner_right { height: 100%; float: right; margin-right: 5%; }
.navi img { height: 66%; position: relative; top: 22%; }
.navi_inner_right img { transform:scale(1); }

#costa_logo_txt { width: 100%; height: 8%; position: relative; text-align: center; margin-top: 7%; }
#costa_logo_txt img { height: 100%; }

#back_stamp_hill_wrap, .hill_wrap  { width: 100%; height: 100%; position: relative; bottom: 0; left: 0; }
.stamp_sub_hill { width: 100%; height: 100%; overflow: hidden; position: absolute; bottom: 0; left: 0; }
.stamp_sub_hill01 { z-index: 5; bottom: -34%; }
.stamp_sub_hill02 { z-index: 4; bottom: -16%; }
.stamp_sub_hill03 { z-index: 3; bottom: -7%; }
.stamp_sub_hill00 { z-index: 6; bottom: -59%; }
.stamp_sub_hill img { width: 100%; }

#stamp_pic { height: 45%; position:absolute; top: 27.5%; width: 100%; text-align: center; z-index: 10; }
#stamp_pic img { height: 100%; }



/*****************************/
/*     Stamp Guide Popup     */
/*****************************/

#stamp_guide_popup_wrap {position:fixed;width:100%;height:100%;top:0;left:0;font-size:0;text-align:center;background-color: rgba(0,0,0,0.8);z-index: 10;word-break:break-all;overflow:auto; opacity: 0;
    -webkit-transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -ms-transition: opacity .4s ease-in-out;
    -o-transition: opacity .4s ease-in-out;
    transition: opacity .4s ease-in-out;
}
#stamp_guide_popup_wrap:before {width:0;height:100%;position:relative;vertical-align:middle;display:inline-block;overflow:hidden;content:"";font-size:0; }
#stamp_guide_popup_wrap.on {opacity: 1;}
#stamp_guide_popup_content {display:inline-block;vertical-align:middle;width:100%;padding:20px 0;font-size:1rem; color: #fff; }
#stamp_guide_popup_default {width:100%;margin:0 auto; }
.rolling_page_img { width: 70%; margin: 0 auto; font-size: 90%; }
.rolling_page_img img { width: 100%; }

#intro_rolling_bullet {position: absolute; width: 100%; top: initial; bottom: 10%;}
.swiper-pagination-bullet {margin: 0 5px !important; background-color: #fff !important; opacity: 1 !important; letter-spacing: 10px !important; }
.swiper-pagination-bullet-active{ background: #EE1F08 !important; opacity: 1; }

.start_btn { position: absolute; margin: 0px; width: 70%; left: 15%; top: 62%; opacity: 1; outline: none; border: 0; color: #fff; font-size: 18px; font-weight: normal;
background-color: transparent; z-index: 10; }

#stamp_guide_close {position: absolute; width: 20px; top: 20px; right: 25px;}



/*****************************/
/*     Costa Guide Popup     */
/*****************************/

#back_costa_guide {position: absolute; height: 100%; width: 100%; overflow-y: auto; top: 0; left: 0; z-index: 100; opacity: 0;
    -webkit-transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -ms-transition: opacity .4s ease-in-out;
    -o-transition: opacity .4s ease-in-out;
    transition: opacity .4s ease-in-out;
}
#back_costa_guide.on {opacity: 1;}

#main_upper { position:relative; width:100%; }
#main_upper .img_full { display:block; width:100%; }
#main_upper #costa_guide_close_btn { position:absolute; top:20px; right:20px; width: 20px; }
#main_upper #costa_guide_close_btn img { width: 100%; }
#main_upper .tit_wrap { width:100%; margin:0 auto; text-align:center; position:absolute; top:37px; }
#main_upper .tit_wrap .subtxt_mobile { display:block; margin:10px 0; color:#A18154; font-size:17px; }
#main_upper .tit_wrap .subtxt_01 { margin:10px 0; color:#B41223; font-size:23px; font-weight:100; letter-spacing:-2px; }
#main_upper .tit_wrap .subtxt_02 { color:#A18154; font-size:17px; font-weight:100; }

#main_lower { background-color:#B41223; }
#main_lower .subject_area { padding:30px 25px; }
#main_lower .subject_area li { margin-bottom:3px; }
#main_lower .subject_area .subject_bg { margin-bottom:13px; position:relative; }
#main_lower .subject_area .subject_name { position:absolute; top:0; left:23px; color:#DCCEBA; font-size:17px; line-height:30px; }
#main_lower .subject_area .number { vertical-align:top; color:#DCCEBA; }
#main_lower .subject_area p { display:inline-block; white-space:normal; width:90%; color:#DCCEBA; font-size:15px; letter-spacing:-1px; line-height:19px; }
#main_lower .subject_area .content_guide_wrap { margin-bottom:30px; }



/*****************************/
/*   Sequence Error Popup    */
/*****************************/

#sequence_error_popup_wrap {position:fixed;width:100%;height:100%;top:0;left:0;font-size:0;text-align:center;background-color: rgba(0,0,0,0.8);z-index: 10;word-break:break-all;overflow:auto; opacity: 0;
    -webkit-transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -ms-transition: opacity .4s ease-in-out;
    -o-transition: opacity .4s ease-in-out;
    transition: opacity .4s ease-in-out;
}
#sequence_error_popup_wrap:before {width:0;height:100%;position:relative;vertical-align:middle;display:inline-block;overflow:hidden;content:"";font-size:0; }
#sequence_error_popup_wrap.on {opacity: 1;}
#sequence_error_popup_content {display:inline-block;vertical-align:middle;width:100%;padding:20px 0;font-size:1rem; color: #fff; }
#sequence_error_popup_default {width:100%;margin:0 auto; }

.clock_pic { width: 50%; margin: 0 auto; position: relative; }
.clock_pic img { position: absolute; height: 100%; left: 0; }
.clock_num { position: relative; width: 100%; color: #FF001B; vertical-align: middle; }
.clock_txt { width: 100%; position: relative; top: 0; left:0; color: #fff; font-size: 0.9em; }
.clock_txt_inner { width:100%; }
.clock_txt_inner01 { color: #FF001B; margin-bottom: 3%; }
.clock_txt_inner02 { font-weight: bold; }



/*****************************/
/*     Stamp Error Popup     */
/*****************************/

#stamp_error_popup_wrap {position:fixed;width:100%;height:100%;top:0;left:0;font-size:0;text-align:center;background-color: rgba(0,0,0,0.8);z-index: 10;word-break:break-all;overflow:auto; opacity: 0;
    -webkit-transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -ms-transition: opacity .4s ease-in-out;
    -o-transition: opacity .4s ease-in-out;
    transition: opacity .4s ease-in-out;
}
#stamp_error_popup_wrap:before {width:0;height:100%;position:relative;vertical-align:middle;display:inline-block;overflow:hidden;content:"";font-size:0; }
#stamp_error_popup_wrap.on {opacity: 1;}
#stamp_error_popup_content {display:inline-block;vertical-align:middle;width:100%;padding:20px 0;font-size:1rem; color: #fff; }
#stamp_error_popup_default {width:100%;margin:0 auto; }

.stamp_error_pic { width: 70%; margin: 0 auto; position: relative; }
.stamp_error_pic img { width: 100%; }
.stamp_error_pic_inner { width: 90%; color: #FF1A00; font-weight: bold; display: inline-block; vertical-align: middle; }

#stamp_error_txt_wrap { position: absolute; bottom: 0; width: 100%; height: 46%; vertical-align: middle; }
#stamp_error_txt_wrap:before { content:''; display:inline-block; height:100%; vertical-align:middle; }
.stamp_error_txt { width: 100%; position: relative; top: 15px; left: 0; font-weight: bold; }

#stamp_error_close {position: absolute; width: 20px; top: 20px; right: 25px;}



/*****************************/
/*       Media Query        */
/*****************************/

@media only screen and (max-width: 359px) {
    html{font-size:16px;}
    .start_btn {font-size:16px;}
    .clock_num { font-size: 43px; }
    .swiper-pagination-bullet { width: 9px !important; height: 9px !important; }
    
    .stamp_error_page_wrap { font-size: 14px; }
    
    #main_upper .tit_wrap .logo_tit { width:30%; margin:0 auto; }
    #main_upper .tit_wrap .logo_tit .logo_tit_img { width:100%; }
    #main_upper .tit_wrap .subtxt_mobile { font-size:15px; }
    #main_upper .tit_wrap .subtxt_01 { margin:10px 0; font-size:18px; line-height:22px; }
    #main_upper .tit_wrap .subtxt_02 { font-size:14px; }
}
@media only screen and (min-width: 360px) and (max-width: 374px) {
    html {font-size:17px;}
    .start_btn {font-size:17px;}
    .clock_num { font-size: 45px; }
    .swiper-pagination-bullet { width: 10px !important; height: 10px !important; }
    
    .stamp_error_page_wrap { font-size: 15px; }
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
    html{font-size:18px;}
    .start_btn {font-size:18px;}
    .clock_num { font-size: 47px; }
    .swiper-pagination-bullet { width: 11px !important; height: 11px !important; }
    
    .stamp_error_page_wrap { font-size: 16px; }
}
@media only screen and (min-width: 414px) and (max-width: 480px) {
    html{font-size:20px;}
    .start_btn {font-size:20px;}
    .clock_num { font-size: 50px; }
    .swiper-pagination-bullet { width: 13px !important; height: 13px !important; }
    
    .stamp_error_page_wrap { font-size: 18px; }
}
@media only screen and (min-width: 480px)and (max-width: 1023px){
    html{font-size: 30px;}
    .start_btn {font-size:30px; }
    .clock_num { font-size: 80px; }
    .swiper-pagination-bullet { width: 16px !important; height: 16px !important; }
    
    .stamp_error_page_wrap { font-size: 30px; }
}
@media only screen and (min-width: 1024px){
    html{font-size: 40px;}
    .start_btn {font-size:40px;}
    .clock_num { font-size: 100px; }
    .swiper-pagination-bullet { width: 18px !important; height: 18px !important; }
    
    .stamp_error_page_wrap { font-size: 38px; }
}