@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=Nanum+Pen+Script&family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url('https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css');
:root {
	--gnb_size : 80px;
	--max_width : 1100px;
	--color_main : #004999;
	--color_point : #ff6c00;
	--color_point2 : #30547a;
	--color_point3: #ffc395;
	--color_point4: #003065;
	--color_point5 : #c4e1ff;
	--color_point6 : #b23121;
	--color_point7 : #f1f8ff;
	--bgColor_main:#fff;
	--bgColor_body : #fefff5;
	--border_main : 1px solid rgba(0,0,0,.1);
	--border_2 : 1px solid rgba(0,0,0,.3);
	--_scrollWidth : 20px;
	--_scrollBg:#eaeaea;
	--boxshadow:0 0 10px 0 rgba(0,0,0,0.1);
	--font_size:18px;
}
@media screen and (max-width:1024px){
	:root {
	--gnb_size : 70px;
	--max_width : 100%;
	}
}
@media screen and (max-width:768px){
	:root {
	--gnb_size : 40px;
	--max_width : 100%;
	--font_size:16px;
	}
}

body::-webkit-scrollbar { width: calc(var(--_scrollWidth) - 8px); height: calc(var(--_scrollWidth) - 8px); }
body::-webkit-scrollbar-track { background: var(--_scrollBg); border-radius: 0; }
body::-webkit-scrollbar-thumb { background: #ff7100; border-radius:var(--_scrollWidth); border:3px solid var(--_scrollBg); }


body { font-family:"Roboto","Noto Sans KR", "sans-serif"; font-weight:400; font-size: 14px; word-break:keep-all; background-color:var(--bgColor_body); color:#2d2828}
#nprogress .bar { background-color: var(--color_point) !important; }
#nprogress .spinner-icon { border-top-color: var(--color_point) !important; border-left-color: var(--color_point) !important; }

.main { margin:0 auto; width:1400px; max-width:100%; display: flex; flex-direction: column; align-items: center; overflow: hidden; }

.evt1,
.evt2,
.evt3,
.evt5 { position:relative;}

.evt1 .alpha { position:absolute; width:100%; text-align:center; bottom:17px}
.evt2 .point { position:absolute; width:100%; text-align:center; margin-left:100px;  bottom:400px}

.evt3 .btn_alpha { width:110px; position:absolute;left:calc(50% - 55px); top:calc(50% + 55px);  }
.alpha1 { margin-left:-10%; margin-top:-10%}
.alpha2 { margin-left:10%; margin-top:-10%}
.alpha3 { margin-left:10%; margin-top:10%}
.alpha4 { margin-left:-10%; margin-top:10%}

.evt5 {display: flex; justify-content: center; }
.evt5 .btn {position:absolute; bottom:60px; }

@keyframes shakeX {
  0%   { transform: translateX(0); }
  5%   { transform: translateX(-2px) scale(.95); }
  10%  { transform: translateX(2px) scale(.98); }
  15%  { transform: translateX(-1px) scale(.95); }
  20%  { transform: translateX(0); }
  100% { transform: translateX(0); }
}

/* 각 요소에 다른 시작 시점 부여 */
.shake1 {
  animation: shakeX 3s infinite;
  animation-delay: 0s;
}

.shake2 {
  animation: shakeX 3s infinite;
  animation-delay: 0.25s;
}

.shake3 {
  animation: shakeX 3s infinite;
  animation-delay: 0.5s;
}

.shake4 {
  animation: shakeX 3s infinite;
  animation-delay: 0.75s;
}
.btn_alpha:hover {
  animation-play-state: paused;
}

.evt.btnbox { display:flex;     justify-content: center; }
.btn,
input[type="button"] { 
	border:1px solid #fff000; border-radius:100px; padding:0 50px; height:70px; width: fit-content;
	display:flex; align-items: center; justify-content: center;
	background-color:#f7ff7d; color:#000;
	font-size:24px; font-weight:700; line-height:1;
	transition:.3s ease;
	}
.btn:hover { border:1px solid #ff8b00; background-color:#ffc700 ; color:#000;}	
.btn.bold { font-weight:900}
.pop .btn.zip { font-weight:400; font-size:14px; padding:0 15px; border-radius: 10px; background-color: #fff664;}
.pop .btn {  padding:0 50px; height:50px; font-size:20px;}
.btn_end {border:1px solid #c7c7c7; border-radius:100px; padding:0 30px; height:50px; width: fit-content;
	display:flex; align-items: center; justify-content: center;
	background-color:#f2f2f2; color:#a6a6a6;
	font-size:16px; font-weight:700; line-height:1;}

.pop { position:fixed; width:100%; height:100vh; z-index:1;left:0; top:0;  background-color:rgba(0,0,0,.5);backdrop-filter: blur(1px);
display:none; align-items: center; justify-content: center; flex-wrap: wrap; align-content: center;
}
.active {display:flex !important;}
.deactive {display:none !important;}
.pop > li:not(.btnClose) { position:relative; max-width: 600px; width:calc(100% - 20px); padding-bottom:40px; background-color:#fff; border-radius:4px; overflow:hidden; box-shadow:4px 4px 20px 0px rgba(0,0,0,.5); display:flex; align-items: center; justify-content: center; flex-direction: column;}
.pop > li div.title { padding: 40px 20px 20px 20px; width: 100%; background-color: #fff664; text-align: center;}
.pop > li div.title.simple { margin-bottom:30px;}
.pop > li div.title h2 { padding:0; margin:0; font-size: 30px; letter-spacing: -2px; font-weight: 900;}
.pop > li div.title h2 span { font-weight:400}
.pop > li div.title p { margin-top:10px}

.pop > li div.privacy { padding:20px 20px 0 20px;  }
.pop > li div.privacy p { font-size:10px; line-height:1.4; margin-top:5px}
.pop > li div.privacy p + .c-box { margin-top:10px;}
.pop > li .c-box {display: flex; align-items: center; font-weight:500   }

.pop > li form { padding:20px; width:100%; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.pop > li.doing {font-size:4em; color:#ffb400}
.pop > li table th { padding-right:20px;}
.pop > li table td { display:flex; padding:2px 0 }

.pop_point {position:fixed; width:100%; height:100vh; z-index:1;left:0; top:0;  background-color:rgba(0,0,0,.5);backdrop-filter: blur(1px); display:none ; align-items: center; justify-content: center; flex-wrap: wrap; align-content: center;}
.pop_point.active { display:flex; }
.pop_point li { position:relative;  height:90vh;}
.pop_point img {height:100%; border-radius:10px; }

.btnClose {position:absolute; top:10px; right:10px; }
.btnClose { width:40px; height:40px; line-height:1; display:flex; align-items: center; justify-content: center; font-size:2em; background-color:#ffd100; color:#000; border-radius:100%;}
.btnClose:hover {background-color:#f7ff7d; color:#000;}

input::placeholder { font-size: .8em;}
input:not([type="checkbox"]) {border:1px solid #ffc37d; outline: none; background-color:#fcffc6; border-radius:10px; padding:0 10px; height:50px; width: fit-content; font-size: 1.2em;}	
input:not([readonly]):focus {border:1px solid #ffde7d; background-color:#f7ff7d;}
input[type="tel"] { text-align:center;}
input[type="text"] { width:100%}
input[type="checkbox"] { width:20px; height:15px; margin-right:5px; }
#sample6_postcode {text-align:center; width:100px; margin-right:5px;}
#phone_number_dup { text-align:left; border-style:dashed; }


@media screen and (max-width:768px){

	.main { width:100%;}
	.main img {width:100%;}
	.btn,
	input[type="button"] { 
		height:50px; font-size:18px; padding:0 30px; 
	}
	.evt1 .alpha { bottom:5vw}
	.evt1 .alpha img {width:80vw}
	.evt2 .point { margin-left:10vw; bottom:65vw}
	.evt2 .point  img { width:55vw}
	.evt3 .btn_alpha { width:20vw; left:calc(50% - 10vw); top:calc(50% + 10vw);  }
	.alpha1 { margin-left:-20vw; margin-top:-20vw}
	.alpha2 { margin-left:20vw; margin-top:-20vw}
	.alpha3 { margin-left:20vw; margin-top:20vw}
	.alpha4 { margin-left:-20vw; margin-top:20vw}	
	.evt5 .btn { bottom:10vw; }
	.pop_point li { height:unset; width:calc(100% - 20px); }
	.pop_point img { width:100%; }
}