@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:70px; margin:0 auto; margin-top:15px; margin-bottom: 10px; background:#b31100;
	color:#ffffff!important; font-weight:800; text-align:center; line-height:70px; font-size: 24px;
	text-decoration-line: none;
}

.wrap_in {
	margin: 0px auto; text-align: center; overflow: hidden; max-width: 800px;
}
.title {
	background: url("../img/18_title.png") no-repeat top; height: 280px; 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: 7px; border: 1px solid #08467a; border-image: none; width: 70%; 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: 49px; font-size: 35px; border:1px solid #333333;
}

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

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

.name input {
	width: 65%; 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;
}
.wrap_in ul {
	transition:0.2s; width: 600%; height: 100%;
}
.wrap_in ul::after {
	clear: both; display: block; content: "";
}
.wrap_in li {
	width: 16.6667%; height: 100%; float: left;
}
.wrap_in ul.page-1 {
	margin-left: 0px;
}
.wrap_in ul.page-2 {
	margin-left: -100%;
}
.wrap_in ul.page-3 {
	margin-left: -200%;
}
.wrap_in ul.page-4 {
	margin-left: -300%;
}
.wrap_in ul.page-5 {
	margin-left: -400%;
}
.wrap_in ul.page-6 {
	margin-left: -500%;
}
.wrap_in ul.page-7 {
	margin-left: -600%;
}
.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: #000000; 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 #e71718 transparent #e71718;
            -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: #053154;
            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);
        }
    }