@charset "utf-8";
@import url("./reset.css");

/* ---------- 공통 ---------- */
#evt-wrap {
    width: 100%;
    max-width: 640px;
	min-width:293px;
}

#evt-wrap img {
    width: 100%
}

.container {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    text-align: center
}
.co-red {
    color: #e02727
}
.co-red2 {
    color: #e73c2b
}
.co-orange {
    color: #e57507
}
#nav-float {
    position: absolute;
    top: 40%;
    right: 0;
    bottom: 0;
    z-index: 10;
    width: 20%;
    max-width: 157px;
	-webkit-transform: translateZ(0);
	
}

#nav-float img {
    width: 100%;
}
/* ---------- 컨텐츠 ---------- */
section > div {
    position: relative;
}
.cont-area {
	 margin-top: -1px;
}
.cont-area em {
    font-weight: 700;
    position: relative;
    z-index: 1;
}

#cont1 .txt-area {
    text-align: center;
    position: absolute;
    top: 22%;
    left: 0;
    width: 100%;
}

.event-area {
    position: absolute;
    bottom:17%;
    left: 9%;
    line-height: 1.7;
}

.event-area div {
    display: inline-block;
    vertical-align: top;
    letter-spacing: -1px;
}
.event-area li {
	font-size:0.6rem
}
.event-area em {
    margin-right: 10px;
}

.btn-area {
    position: absolute;
    bottom: 3%;
    left: 50%;
    width: 70%;
    height: 60px;
    border-radius: 25px;
    box-shadow: 3px 4px 0 #b2994d;
    cursor: pointer;
    margin-left: -35%;
    background: #ea5657;
    text-align: center;
    border: 4px solid #222;
    vertical-align: middle;
}
.btn-area a{   
	display: block;
	line-height: 45px;
}
.btn-area a img {vertical-align:middle;}
#cont2 .txt-area {
    font-size: 20px;
    text-align: left;
    position: absolute;
    top: 215px;
    left: 39px;
    line-height: 1.7;
}

#cont2 .txt-area li {
    position: relative;
    padding-left: 20px;
}

#cont2 .txt-area li:before {
    content: '';
    background: url(../img/ico_down.png)0 0 no-repeat;
    width: 11px;
    height: 12px;
    position: absolute;
    top: 7px;
    left: 0;
    z-index: 1;
}
#cont2 .txt-area li span {
    width: 25%;
    height: 15px;
    background: #fff;
    position: absolute;
    bottom: 8px;
    left: -4px;
}
.btn-view {
    position: absolute;
    bottom: 17px;
    left: 265px;
    width: 236px;
    height: 30px;
    border: 1px solid #fff;
    color: #fff;
    font-size: 16px;
    text-align: center;
    border-radius: 50px;
    font-weight: 300;
    padding-right: 5px;
}
.btn-view:after {
    content: '';
    background: url(../img/ico_right.png)0 0 no-repeat;
    width: 8px;
    height: 13px;
    position: absolute;
    right: 10px;
    top: 7px;
}
#cont3 {position:relative;}
.gift-area {
    position: absolute;
    bottom: 16%;
    left: 50%;
    width: 72%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.gift-area > li {
    text-align: left;
    font-size:0.8rem;
    font-weight: 700;
    padding-bottom: 1px;
}

.gift-area li {
    position: relative;
    padding-left: 13px;
}

.gift-area li:before {
    content: '';
    background: url(../img/ico_star.png)0 0 no-repeat;
    width: 8px;
    height: 8px;
    position: absolute;
    top: 10px;
    left: 0;
}
#cont4 {    
    padding: 5%;
    font-size:0.8rem;
    font-weight: 300;
	background:#f3f3f3;
}

#cont4 > div {
    position: absolute;
    top: 20%;
    left: 0;
    padding: 0 5%;
}

#cont4 p {
    font-weight: 700;    
    font-size: 1rem;
    padding-bottom: 10px;
}

#cont4 li {
    line-height: 1.3;
    position: relative;
    padding-left: 13px
}

#cont4 li:before {
    content: '-';
    position: absolute;
    top: 0;
    left: 0;

}




/* ---------- 팝업 ---------- */
.ly-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5)
}

.btn-close {
    position: absolute;
    top: 27px;
    right: 29px;
    z-index: 120;
}

.pop-area {
    width: 96%;
    height: auto;
    position: absolute;
    top: 5% !important;
    left: 0;
    z-index: 999;
    text-align: center;
    letter-spacing: -0.5px;
    background: #fff;
    border-radius: 20px;
    line-height: 1.3;
    max-width: 640px;
    margin: 0 2%;
}
.pop-area div {
    position: relative;
}
.pop-tit {
    background: #ffe362;
    border-radius: 20px 20px 0 0;
    padding: 25px 0;
}
.pop-tit img{width:100%;}
.pop-inner {
    padding: 6% 5% 10% 5%;
}
.pop-inner em {
    font-size: 1rem;
    font-weight: 500
}
.chk-area ul {
    margin-top: 23px
}
.chk-area li {
    float: left;
    width: 280px;
    height: 365px
}

.chk-area li:nth-child(2) {
    float: right;
    width: 264px;
}

.chk-area li a {
    width: 100%;
    height: 100%;
    display: block;
}

.chk-area li:nth-child(1) a {
    background: url(../img/pop/chk1.png)0 0 no-repeat;
}

.chk-area li:nth-child(1) a:hover {
    background: url(../img/pop/chk1.png)100% 100% no-repeat;
}

.chk-area li:nth-child(2) a {
    background: url(../img/pop/chk2.png)0 0 no-repeat;
}

.chk-area li:nth-child(2) a:hover {
    background: url(../img/pop/chk2.png)100% 100% no-repeat;
}


.form-area {display:block;}

.form-area input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{
    /* Chrome/Opera/Safari */
    color: #999;
}

.form-area input::-moz-placeholder, textarea::-moz-placeholder{
    /* Firefox 19+ */
    color: #999;
}

.form-area input:-ms-input-placeholder, textarea:-ms-input-placeholder{
    /* IE 10+ */
    color: #999;
}

.form-area input:-moz-placeholder, textarea:-moz-placeholder{
    /* Firefox 18- */
    color: #999;
}

.form-tit p {
    color: #c86930;
    font-size: 18px;
    font-weight: 500;
    margin: 5px 0 35px 0;
}

.form-area>div {
    margin:2% 0;
}

.form-area input[type="text"],
.form-area input[type="tel"] {
    width: 100%;
    height: 60px;
    background: #f3f3f3;
    border: none;
    font-size: 1rem;
    padding-left: 5%;
}

.f_file input[type="text"] {
    float: left;
    width: 87.5%
}

.f_file .user_file {
    float: right;
}

.upload_hidden {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
}

.form-area>p {    
    text-align: left;
    font-size: 1rem;
    color: #999;
    font-weight: 300;
    padding-left: 2%;
}

.privacy_area {
    text-align: left;
    margin: 20px 0;
}

.privacy_area a {
    font-size: 18px;
    color: #666;
    font-weight: 300;
    border-radius: 30px;
    border: 1px solid;
    display: inline-block;
    text-align: center;
    width: 140px;
    height: 28px;
    vertical-align: middle;
    line-height: 28px;
    margin-left: 20px;
    position: relative;
    padding-right: 12px;
}

.privacy_area a:after {
    content: '';
    background: url(../img/pop/ico_upNdown.png)0 0 no-repeat;
    width: 11px;
    height: 7px;
    position: absolute;
    right: 15px;
    top: 10px;
}

.privacy_area a.on:after {
    content: '';
    background: url(../img/pop/ico_upNdown.png)100% 100% no-repeat;
    width: 11px;
    height: 7px;
    position: absolute;
    right: 9px;
    top: 7px;
}

.f_priv {}

.f_priv label {
    font-size: 20px;
    color: #333;
    font-weight: 300;
    padding-left: 35px;
	vertical-align: middle;
}

.f_priv label span {
    color: #c83030
}

.f_priv input {
    display: none
}

.f_priv label:before {
content: "";
    display: block;
    position: absolute;
    top: 4px;
    left: 0;
    width: 24px;
    height: 24px;
    background: url(../img/pop/btn_chk.png) 0 0 no-repeat;
    background-size: cover;
}

.f_priv input:checked+label:before {
    content: "";
    width: 24px;
    height: 24px;
    background: url(../img/pop/btn_chk.png) 100% 100% no-repeat;
    background-size: cover
}

.f_priv label>a {
    color: #262f59;
    font-size: 12px;
    background: #cecece;
    display: inline-block;
    padding: 1px 7px 2px;
    margin-left: 11px;
}

.f_textarea p {
    font-size: 18px;
    font-weight: 700;
    padding-bottom: 10px
}

.f_textarea div {
    width: 100%;
    height: 120px;
    border-radius: 10px;
    background: #f3f3f3;
    margin-top: 10px;
    overflow-y: scroll;
    padding: 20px 30px;
    font-size: 15px;
    color: #666;
    font-weight: 300;
    line-height: 1.5
}

a.pop-btn {   
    width: 78%;
    height: 54px;
    background: #3e3e3e;
    display: block;
    color: #fff;
    margin: 0 auto;
    font-weight: 500;
    font-size: 24px;
    line-height: 52px;
    border-radius: 50px;
    margin-top: 30px;
}

/* 2018-11-21 */
#pop-ev2 img, 
#pop-result img{
	width:100%
}
#pop-ev2 .pop-tit{
	background:#ffdfdf;
}
#pop-ev2 .form-tit em{
    font-size: 26px;
}
#pop-ev2 .form-tit p{
    color: #ff5f50;
    font-weight: 400;
	font-size: 22px;
}
.f_age li{
    float: left;
    position: relative;
    width: 100px;
    border: 1px solid #3e3e3e;
    height: 60px;
} 

.f_age li+li{
	margin-left:13px
}

.f_age label {
    color: #333;
	font-size: 20px;
    line-height: 55px;
}

.f_age label span {
    color: #c83030
}

.f_age input {
    display: none
}
.f_age label p{
	position: relative
}
.f_age label:before {
	content: "";
    display: block;
    color: #999;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.f_age input:checked+label:before {
    content: "";
    background: #3e3e3e;
    color: #fff;
    width: 100px;
    border: 1px solid #3e3e3e;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
}
.f_age input:checked+label p{
	color:#fff;
	font-weight:700
}

.f_age label>a {
    color: #262f59;
    font-size: 12px;
    background: #cecece;
    display: inline-block;
    padding: 1px 7px 2px;
    margin-left: 11px;
}
#pop-ev2 .form-area .pop-btn{
	display:inline-block;
	width:240px;
}
a.btn-false{
	background:#999;
	margin-right:20px
}
#pop-result {
}
#pop-result .pop-tit{
	background:#ffdfdf;
}
.pop-table-area{
    margin: 40px 50px;
}
.pop-table-area table{
    font-size: 26px;
	margin-bottom: 7%;
}
.pop-table-area thead{}
.pop-table-area thead th{
    background: #606060;
    color: #fff;
}
.pop-table-area th{
    height: 40px;
    border: 1px solid #d4d4d4;
    background: #f3f3f3;
	padding: 18px 0;
}
.pop-table-area td{
    border: 1px solid #d4d4d4;
	padding: 0 10px;
	height: 110px
}
#btn-result-more{
    border: 1px solid #959090;
    color: #606060;
    position: relative;
    padding-left: 32px;
    background: #fff;
}
#btn-result-more span{
    position: absolute;
    top: 0;
    left: 94px;
    font-size: 40px;
}
/* 181219 추가 */
select.sel_area { 
	-webkit-appearance: none; /* 네이티브 외형 감추기 */ 
	-moz-appearance: none; 
	appearance: none; 
	background: url(../img/select_bg.png) no-repeat 100% 50%; /* 화살표 모양의 이미지 */ 
    background-size: cover;	
    width: 100%;
    height: 60px;
    border: none;
    font-size: 20px;
    padding-left: 20px;
    font-family: 'Nanum Barun Gothic', sans-serif;
	color: #999;
} 
/* IE 10, 11의 네이티브 화살표 숨기기 */ 
select::-ms-expand {display: none;}
.f_txt textarea {
	resize:none;
	width: 100%;
    height: 80px;
    background: #f3f3f3;
    border: none;
	padding:3%;
	font-size: 1rem;
    font-family: 'Nanum Barun Gothic', sans-serif;
}


/* 미디어쿼리 */
@media only screen and (max-width:640px){
   .event-area {
		position: absolute;
		bottom: 18%;
		left: 10%;
		line-height: 1.7;
	}	
   .event-area li {font-size: 1rem;}
	.event-area em {margin-right:3px;}
	.gift-area {bottom:17%}
	.gift-area > li, #cont4 p, #cont4 li {font-size:1rem}
	.gift-area li:before {top:10px;}
	/* form */
	.btn-close {
		top: 15px;
		right: 15px
	}
	.pop-inner em, .form-area>p {font-size:15px;}
	.f_file input[type="text"]{width:76.5%;font-size:13px}
	.form-area input[type="text"], .form-area input[type="tel"] {padding-left:2%;font-size:13px;}
	.f_file .user_file {width:60px;}
	.f_file .user_file img {width:100%;}
	select.sel_area, .f_txt textarea {padding-left:2%;font-size:13px;}
	.f_priv label {padding-left:30px;font-size:13px}
	.privacy_area:after {
		display:block;
		content:'';
		clear:both;
	}
	.privacy_area a {		
		float: right;
		width:40%;
		margin-left:0;
		font-size:12px;
	}
	.f_textarea div {font-size:14px;}	
	.f_textarea p {font-size:15px}
}
@media only screen and (max-width:500px){
   .event-area {
		position: absolute;
		bottom: 18%;
		left: 10%;
		line-height: 1.7;
	}	
   .event-area li {font-size: 12px;}
	.event-area em {margin-right:3px;}
	.btn-area {height:47px}
	.btn-area a {line-height:33px;}
	.gift-area > li, #cont4 p, #cont4 li {font-size:14px}
	.gift-area li:before {top:3px;}
	/* form */
	.btn-close {
		top: 15px;
		right: 15px
	}
	.pop-inner em, .form-area>p {font-size:15px;}
	.f_file input[type="text"]{width:76.5%;font-size:13px}
	.form-area input[type="text"], .form-area input[type="tel"] {padding-left:2%;font-size:13px;}
	.f_file .user_file {width:60px;}
	.f_file .user_file img {width:100%;}
	select.sel_area, .f_txt textarea {padding-left:2%;font-size:13px;}
	.f_priv label {padding-left:30px;font-size:13px}
	.privacy_area:after {
		display:block;
		content:'';
		clear:both;
	}
	.privacy_area a {		
		float: right;
		width:40%;
		margin-left:0;
		font-size:12px;
	}
	.f_textarea div {font-size:14px;}	
	.f_textarea p {font-size:15px}
}
@media only screen and (max-width:414px){ /* iphone8, note8*/  
   .event-area {
		position: absolute;
		bottom: 18%;
		left: 10%;
		line-height: 1.7;
	}	
   .event-area li {font-size: 12px;}
	.event-area em {margin-right:3px;}
	.btn-area {height:47px}
	.btn-area a {line-height:33px;}
	.gift-area > li, #cont4 p, #cont4 li {font-size:14px}
	.gift-area li:before {top:3px;}
	/* form */
	.btn-close {
		top: 15px;
		right: 15px
	}
	.pop-inner em, .form-area>p {font-size:16px;}
	.f_file input[type="text"]{width:76.5%;font-size:13px}
	.form-area input[type="text"], .form-area input[type="tel"] {padding-left:2%;font-size:13px;}
	.f_file .user_file {width:60px;}
	.f_file .user_file img {width:100%;}
	select.sel_area, .f_txt textarea {padding-left:2%;font-size:13px;}
	.f_priv label {padding-left:30px;font-size:13px}
	.privacy_area:after {
		display:block;
		content:'';
		clear:both;
	}
	.privacy_area a {		
		float: right;
		width:32%;
		margin-left:0;
		font-size:12px;
	}
	.f_textarea div {font-size:14px;}	
	.f_textarea p {font-size:15px}
	.privacy_area a:after {
		right: 6px;
	}
}
@media only screen and (max-width:375px){ /* iphoneX */
	
}
@media only screen and (max-width:375px){ /* Galaxy */	 
	.event-area li {font-size: 11px;}
	.event-area em {margin-right:3px;}
	.btn-area {height:47px}
	.btn-area a {line-height:33px;}
	.gift-area > li, #cont4 p, #cont4 li {font-size:12px}
	.gift-area li:before {top:3px;}
	/* form */
	.btn-close {
		top: 15px;
		right: 15px
	}
	.pop-inner em, .form-area>p {font-size:14px;}
	.f_file input[type="text"]{width:76.5%;font-size:13px}
	.form-area input[type="text"], .form-area input[type="tel"] {padding-left:2%;font-size:13px;}
	.f_file .user_file {width:60px;}
	.f_file .user_file img {width:100%;}
	select.sel_area, .f_txt textarea {padding-left:2%;font-size:13px;}
	.f_priv label {padding-left:30px;font-size:13px}
	.privacy_area a {
		width:32%;
		margin-left:0;
		font-size:12px;
	}
	.f_textarea div {font-size:14px;}	
	.f_textarea p {font-size:15px}
	.privacy_area a:after {
		right: 6px;
	}
	
	.btn-area a {line-height:36px;}
}
@media only screen and (max-width:320px){ /* iphone5 */
    .event-area {}
	.event-area li {font-size: 10px;}
	.event-area em {margin-right:3px;}
	.btn-area {height:47px}
	.btn-area a {line-height:33px;}
	.gift-area > li, #cont4 p, #cont4 li {font-size:11px}
	.gift-area li:before {top:3px;}
	/* form */
	.btn-close {
		top: 15px;
		right: 15px
	}
	.pop-inner em, .form-area>p {font-size:13px;}
	.f_file input[type="text"]{ width:73.5%;font-size:12px}
	.form-area input[type="text"], .form-area input[type="tel"] {padding-left:2%;font-size:12px;}
	.f_file .user_file {width:60px;}
	.f_file .user_file img {width:100%;}
	select.sel_area, .f_txt textarea {padding-left:2%;font-size:12px;}
	.f_priv label {padding-left:30px;font-size:12px}
	.privacy_area a {
		width:32%;
		margin-left:0;
		font-size:11px;
	}
	.f_textarea div {font-size:12px;}	
	.f_textarea p {font-size:14px}
	.privacy_area a:after {
		right: 6px;
	}
}
.ajax-loader {
    text-align: center;
    padding-top: 30px;
    margin: 0 auto;
}