@import url( http://fonts.googleapis.com/earlyaccess/nanumgothic.css );
/*linear-gradient(to top, #297f16, #3bd617)*/

* {
	margin: 0px; padding: 0px; font-family: "malgun Gothic", "¸¼Àº°íµñ", "Dotum", "µ¸¿ò", "arial";
}
body {
	background: url("../img/img01.jpg") no-repeat top;
}
ul {
	list-style: none;
}
li {
	list-style: none;
}
#wrap {
	
}

.submit-btn {
	display:block;
	width:100%; height:100px; margin:0 auto; margin-top:15px; margin-bottom: 10px; background:#fcff25;
	color:#000000; font-weight:800; text-align:center; line-height:100px; font-size: 3em;
	text-decoration-line: none;
}


.gnb {
  width: 100%;
  background-color: #520000; 
  padding: 16px 0;
}

.nav_inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ----- ¿ÞÂÊ ·Î°í ----- */
.nav_left img {
  height: 36px;   /* ÇÊ¿ä ½Ã Á¶Àý */
  display: block;
}

/* ----- ¿À¸¥ÂÊ ¸Þ´º ----- */
.nav_right {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav_right li a {
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.nav_right li a:hover {
  opacity: 0.8;
}

/* ===== ¹ÝÀÀÇü (600px ÀÌÇÏ) ===== */
@media (max-width: 600px) {
  .nav_inner {
    flex-direction: column;
    gap: 12px;
  }

  .nav_right {
    gap: 18px;
  }

  .nav_left img {
    height: 28px;
  }
}



.wrap_in {
	margin: 0px auto; text-align: center; overflow: hidden; max-width: 800px;
}
.title {
    text-align: center; position: relative;
}
.date {
	 width: 100%; text-align: center; color: rgb(255, 255, 255); letter-spacing: -4px; font-size: 32px; font-weight: bold; position: absolute;
}
.gif {
	left: 50%; top: 140px; margin-left: -30px; position: absolute;
}
.padding20 {
	padding: 20px 0px;
}
.padding30 {
	padding: 30px 0px;
}
.padding40 {
	padding: 40px 0px;
}
.padding80 {
	padding: 80px 0px;
}
.padding15 {
	padding: 10px 0px;
}
.input_wrap {
	margin: 5px auto; padding: 15px; border: 3px solid #faff81; border-image: none; width: 80%; text-align: left; color: #051102; font-size: 35px; 
}
.input_wrap input {
	background: #ffffff; border: 0px; border-image: none; width: 57%; text-align: center; color: #051102; line-height: 60px; font-size: 35px;
}

.input_wrap select {
	background: #ffffff; border: 0px; border-image: none; width: 22%; text-align: center; color: #051102; line-height: 40px; font-size: 32px;
}

.input_wrap label {
	width: 22%; color: #ffffff; padding-left: 10px;}
.tel input {
	width: 24%; margin-right: 1.5%;
}

.name input {
	width: 70%; margin-right: 1.5%;
}
.tel input.btn {
	background: rgb(241, 241, 241); margin: 0px; color: rgb(0, 0, 0); line-height: 40px; font-size: 16px; font-weight: bold;
}
.input_wrap::after {
	clear: both; display: block; content: "";
}
.fff {
	color: rgb(255, 255, 255);
}
.success-text {
	color: #fff600; letter-spacing: -7px; font-size: 47px; font-weight: bold; display: none;
}

@import url( http://fonts.googleapis.com/earlyaccess/nanumgothic.css );

* { margin: 0px; padding: 0px; font-family: "malgun Gothic", sans-serif; }

/* ·¹À̾ƿô ÃʱâÈ­ */
.wrap_in { margin: 0px auto; text-align: center; max-width: 800px; }

/* °¡·Î ½½¶óÀÌµå °ü·Ã ±¸Çü ÄÚµå Á¦°Å ¹× ÃʱâÈ­ */
.wrap_in ul { width: 100% !important; transition: none !important; margin-left: 0 !important; }
.wrap_in li { width: 100% !important; float: none !important; }

/* °øÅë ¹öÆ° ½ºÅ¸ÀÏ */
.submit-btn {
    display:block;
    width:90%; height:100px; margin:15px auto; background:#fcff25;
    color:#000; font-weight:800; text-align:center; line-height:100px; font-size: 3em;
    text-decoration: none; border-radius: 10px; letter-spacing:-1px;
}

/* ÀÔ·Â ÇÊµå ½ºÅ¸ÀÏ */
.input_wrap {
    margin: 10px auto; padding: 15px; border: 3px solid #faff81; width: 85%; 
    text-align: left; font-size: 35px; color: #fff;
}
.input_wrap input {
    background: #fff; border: 0; line-height: 60px; font-size: 35px; text-align: center;
}
.input_wrap label { width: 20%; display: inline-block; color: #fff; }

/* ÇÁ·Î±×·¹½º¹Ù */
.progressEds-wrap { width: 100%; height: 40px; background: #333; margin: 15px 0; position: relative; overflow: hidden; }
.progressEds-bar { position: absolute; left: -100%; width: 100%; height: 100%; background: #87d678; }

/* ¾Ö´Ï¸ÞÀÌ¼Ç ¹è³Ê */
.photobanner { display: flex; animation: bannermove 20s linear infinite; }
@keyframes bannermove {
    from { transform: translateX(0); }
    to { transform: translateX(-2000px); }
}




.progress-wrap {
	margin: auto;  border: 3px solid rgb(255, 255, 255); border-image: none; width: 522px; height: 66px; 
}
.progress-wrap .progress-bar {
	background: rgb(255, 255, 255); margin: 18px auto auto; width: 444px; height: 29px;
}
.progress-wrap .progress-bar-over {
	background: #ff8bf9; transition:2.5s; width: 0.1%; height: 29px;
}
.page-3 .slide-3 .progress-bar-over {
	width: 100%;
}
.page-4 .slide-4 .progress-bar-over {
	width: 100%;
}
.page-5 .slide-5 .progress-bar-over {
	width: 100%;
}
.page-6 .slide-6 .progress-bar-over {
	width: 100%;
}
.page-7 .slide-7 .progress-bar-over {
	width: 100%;
}
#overlay-mask {
	left: 0px; top: 0px; width: 100%; height: 100%; right: 0px; bottom: 0px; display: none; position: fixed; z-index: 1000;
}
#overlay-contents {
	background: rgb(255, 255, 255); padding: 10px; left: 50%; top: 5%; overflow: hidden; margin-left: -170px; display: none; position: fixed; z-index: 1003;
}
#overlay-contents textarea {
	padding: 5px; width: 320px; height: 400px; font-size: 12px; resize: none;
}
#overlay-contents .close-btn {
	padding: 3px 5px; border: 1px solid rgb(0, 0, 1); border-image: none; color: rgb(0, 0, 1); font-size: 12px; float: right; display: block;
}
#overlay-contents .close-btn:hover {
	color: rgb(0, 0, 1);
}
#overlay-contents .close-btn:active {
	color: rgb(0, 0, 1);
}



.footer {
	background: rgb(239, 240, 241); width: 100%; border-top-color: rgb(221, 221, 221); border-top-width: 1px; border-top-style: solid;
}
.footer button {
	background: rgb(255, 255, 255); padding: 3px 5px; border: 1px solid rgb(153, 153, 153); border-image: none; margin-left: 10px;
}
.chk_box a {
	color: rgb(255, 255, 255); font-size: 13px;
}



/** BEGIN CSS **/
 
        @keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-moz-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-webkit-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-o-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-moz-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-webkit-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-o-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @keyframes loading-text-opacity {
            0%  {opacity: 0}
            20% {opacity: 0}
            50% {opacity: 1}
            100%{opacity: 0}
        }

        @-moz-keyframes loading-text-opacity {
            0%  {opacity: 0}
            20% {opacity: 0}
            50% {opacity: 1}
            100%{opacity: 0}
        }

        @-webkit-keyframes loading-text-opacity {
            0%  {opacity: 0}
            20% {opacity: 0}
            50% {opacity: 1}
            100%{opacity: 0}
        }

        @-o-keyframes loading-text-opacity {
            0%  {opacity: 0}
            20% {opacity: 0}
            50% {opacity: 1}
            100%{opacity: 0}
        }
        .loading-container,
        .loading {
            height: 100px;
            position: relative;
            width: 100px;
            border-radius: 100%;
        }


        .loading-container { margin: 40px auto }

        .loading {
            border: 2px solid transparent;
            border-color: transparent #890004 transparent #890004;
            -moz-animation: rotate-loading 1.5s linear 0s infinite normal;
            -moz-transform-origin: 50% 50%;
            -o-animation: rotate-loading 1.5s linear 0s infinite normal;
            -o-transform-origin: 50% 50%;
            -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
            -webkit-transform-origin: 50% 50%;
            animation: rotate-loading 1.5s linear 0s infinite normal;
            transform-origin: 50% 50%;
        }

        .loading-container:hover .loading {
            border-color: transparent #09a315 transparent #09a315;
        }
        .loading-container:hover .loading,
        .loading-container .loading {
            -webkit-transition: all 0.5s ease-in-out;
            -moz-transition: all 0.5s ease-in-out;
            -ms-transition: all 0.5s ease-in-out;
            -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
        }

        #loading-text {
            -moz-animation: loading-text-opacity 2s linear 0s infinite normal;
            -o-animation: loading-text-opacity 2s linear 0s infinite normal;
            -webkit-animation: loading-text-opacity 2s linear 0s infinite normal;
            animation: loading-text-opacity 2s linear 0s infinite normal;
            color: #ffffff;
            font-family: "Helvetica Neue, "Helvetica", ""arial";
            font-size: 10px;a
            font-weight: bold;
            margin-top: 45px;
            opacity: 0;
            position: absolute;
            text-align: center;
            text-transform: uppercase;
            top: 0;
            width: 100px;
        }
   
   
    /* ----------------     KEYFRAMES    ----------------- */
    
    @-webkit-keyframes loader-1-outter {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    
    @keyframes loader-1-outter {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    
    @-webkit-keyframes loader-1-inner {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
        }
    }
    
    @keyframes loader-1-inner {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
        }
    }