@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap');

/* html, body {
    width: 800px;
    margin: auto;
    position: relative;
} */


@font-face {
  font-family: 'S-CoreDream';
  src: url('./font/S-CoreDream-3Light.woff') format('woff');
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: 'S-CoreDream';
  src: url('./font/S-CoreDream-4Regular.woff') format('woff');
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: 'S-CoreDream';
  src: url('./font/S-CoreDream-5Medium.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'S-CoreDream';
  src: url('./font/S-CoreDream-6Bold.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}

ul,li,ol,li,dl,dd,dt{list-style:none}
html, body{touch-action: pan-y; }
body{ overflow-x: hidden; font-family: 'Noto Sans KR', sans-serif; font-weight:400; }
body,p,ul,ol,li,dl,dt,dd,form,table,th,td,fieldset,input,textarea,select,button,h1,h2,h3,h4,h5,h6,pre{margin:0;padding:0;-webkit-text-size-adjust:none }
body,table,input,textarea,button,select{ font-size:16px; color:#666; }
header,footer,nav,aside,section,article{display:block}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
legend{ display:none;}
ul,li{ list-style: none;}

/* link */
a{text-decoration:none;cursor:pointer}
a:link{color:#7e7e7e}
a:visited{color:#7e7e7e}
a:hover{color:#333}
a:active{color:#333}

/* Button */
button{margin:0;padding:0;border:none;background:none}
button.btn{display:inline-block;*overflow:visible;cursor:pointer}
button,button.btn{vertical-align:middle}
button:focus{ border: none; outline:none;}

/* input  초기화 */
input {
    -webkit-appearance: none;
	-webkit-border-radius: 0;
     -moz-appearance: none;
	 outline: 0;
     
} 

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
  font-size: 16px;
  
}


/* IE10 이상에서 input box 에 추가된 지우기 버튼 제거 */
input::-ms-clear { display: none; }

/* input type number 에서 화살표 제거 */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

input[type='text'],
input[type='number'],
textarea {
  font-size: 18px !important;
}



/* Select 초기화 */ 
select {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}



.video{ width: 640px; height: 380px; margin: 0 auto; position: relative;}
.wrap{ max-width: 640px; margin: 0 auto;}
#container{ max-width: 800px; width: 100%; margin: 0 auto; background-image: url(../images/bg_0324.jpg); background-position: center top; /*    background-size: 100%; */ background-repeat: no-repeat;}
#container .con-1{ position: relative; padding-top: 1250px;}
#container .con-1 p{ font-size: 24px; color: #fff; text-align: center; padding: 20px 0 10px;}



#container .con-1 .curtain{ display:none; }
#container .con-1 .curtain.on{     
	display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 999999;
    background: rgba(0,0,0,0.01);
}
#container .con-1 .ev-btn{ width: 240px; height: 50px; display: block; background: url(../images/btn.png); margin: 50px auto 0;}
/* #container .con-1 .ev-btn a{ display: block; width: 100%; height: 100%;} */
#container .con-1 .ev-btn:hover{ background: url(../images/btn_hover.png);}
#container .con-1 .coment{ display:block; color: #fff; font-size: 22px; text-align: center; padding-top: 30px;}

#container .con-2 .wrap{ margin-top: 220px; height: 600px; background-image: url(../images/img_1.png); background-position: center;
    background-size: 130%; background-repeat: no-repeat;}
#container .con-2 .wrap{ }


/*  팝업  */
.bg{ display: none; 
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 9999;

	background-color: #000; /* 배경색 지정 */
	opacity: 0.7; /* 투명도 조절 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE8을 위한 투명도 설정 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); /* IE7을 위한 투명도 설정 */ 

	position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 1;
}
.close{ position: absolute; top: -80px; right: 0; cursor: pointer;}

#container .popup{ 
	display: none; 
	width: 750px; 
	background-color: #fff; 
	padding-bottom: 50px;
	position: absolute;
	left: 50%; 
	transform: translateX(-50%);
	z-index: 50; 
	font-family: 'Noto Sans KR', sans-serif;
}
#container .popup .pop-wrap{ width: 92%; margin: 0 auto;}
#container .popup .tit{ display: block; font-size: 36px; color: #333; text-align: center; padding: 85px 0 40px; position: relative;}
#container .popup .tit:before{ content: ""; display: block; width: 35px; height: 15px; background: url(../images/icon.jpg) no-repeat; position: absolute; top: 70px; left: 50%; transform: translateX(-50%);}

#container .popup ul{ border-top: 3px solid #333;}
#container .popup ul li.under{ height: 70px; border-bottom: 1px solid #e1e1e1; position: relative;}
#container .popup ul li.under .name-1{ letter-spacing: 5px;}
#container .popup ul li.under .name-2{ letter-spacing: 6px;}
#container .popup ul li.under .name-3{ letter-spacing: 16px;}
#container .popup ul li.under span{ vertical-align: middle; display: inline-block; width: 34%; font-weight: bold; font-size: 24px; color: #333; line-height: 70px;}
#container .popup ul li.under input{ width: calc(100% - 35%); vertical-align: middle; height: 40px; border: 1px solid #e1e1e1; text-indent: 15px; font-size: 18px; box-sizing: border-box; }

#container .popup ul li.under .upload-label{ /* display: inline-block; width: calc(100% - 35%); height: 40px; border: 1px solid #e1e1e1; font-size: 16px; text-indent: 15px; line-height: 40px; vertical-align: middle; */
	display: inline-block;
    background: #666;
    color: #fff;
    width: 90px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
}
#container .popup ul li.under .upload-label:after{ content:"파일등록";}

#container .popup ul li.under input[type="file"]{ display:none; line-height: 40px; color: #c3c3c3;}
#container .popup ul li.under span.file-name{ 
    display: inline-block;
	width: calc(100% - 52%);
	position: absolute;
    left: 49%;
    top: 15px;
	line-height: 40px;
    font-size: 20px;
    color: #666;
    height: 40px;
    font-weight: 500;
	/* text-indent: 10px; */
	padding-left: 15px;
	letter-spacing: -2.5px;
	
	}
#container .popup ul li.under input::placeholder{ color: #c3c3c3;}

#container .popup ul li.list{ font-size: 21px; color: #333; position: relative; line-height: 1;}
#container .popup ul li.list:before{ content: "·"; position: absolute; left: 0;}
#container .popup ul li.list span{ display: block; padding-left: 20px; color: #333; letter-spacing: -1.5px;}
#container .popup ul li.list span.letter{ letter-spacing: -2.5px;}
#container .popup ul li.first{ padding-top: 30px;}
#container .popup ul .list+.list{ padding-top: 15px;}

#container .popup ul li.line{ border-bottom: 1px solid #e1e1e1; padding-bottom: 30px;}

#container .popup li .btn{ width: 215px; height: 60px; color: #fff; font-weight: bold; font-size: 28px; border: 0; outline: 0; cursor: pointer; font-family: 'Noto Sans KR';}
#container .popup li .reset{ background-color: #999999; margin-right: 20px;}
#container .popup li .submit{ background-color: #df813b;}

#container .popup li.btn-wrap{ text-align: center; margin: 30px 0;}
#container .popup li.check-wrap{ margin: 20px;}
#container .popup li.check-wrap label:nth-of-type(1){  display: block; background: url(../images/ico_2.png) no-repeat left center;}
#container .popup li.check-wrap label:nth-of-type(2){  display: block; background: url(../images/ico_2.png) no-repeat left 23px;}
#container .popup li.check-wrap label:nth-of-type(3){  display: block; background: url(../images/ico_2.png) no-repeat left 23px;}

#container .popup li.check-wrap label+label{ padding-top: 20px;}

#container .popup li.check-wrap label:nth-of-type(2) span{ color: #d1d1d1;}
#container .popup li.check-wrap label:nth-of-type(3) span{ color: #d1d1d1; letter-spacing: -2px;}

#container .popup li.check-wrap label span{ font-size: 22px; color: #333; padding-left: 35px; line-height: 1; letter-spacing: -1px;}
#container .popup li.check-wrap label input[type="checkbox"]{ display:none;}

/*  활성화  */
#container .popup li.check-wrap label:nth-of-type(1).on{ background: url(../images/ico_2_on.png) no-repeat left center;}
#container .popup li.check-wrap label:nth-of-type(2).on{ background: url(../images/ico_2_on.png) no-repeat left 23px;}
#container .popup li.check-wrap label:nth-of-type(3).on{ background: url(../images/ico_2_on.png) no-repeat left 23px;}

#container .popup li.check-wrap label:nth-of-type(2).on span{ color: #333;}
#container .popup li.check-wrap label:nth-of-type(3).on span{ color: #333;}

#container .con-3 .wrap{ height: 560px; background-image: url(../images/img_2.png); background-position: center;
    background-size: 130%; background-repeat: no-repeat;}

#container .con-4{ height: 1340px; background-image: url(../images/img_3_0324.png); background-position: center top; /* background-size: 120%; */ background-repeat: no-repeat;}
#container .con-4 .wrap{ }
#container .con-4 .video-1{ width: 680px; padding-top: 435px;}
#container .con-4 .video-2{ width: 680px; padding-top: 85px;}


#container .wait{  
	display:none;
	width: 668px;
	position: absolute;
	
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    font-family: 'Noto Sans KR', sans-serif;
	background-color: #fff; 
	border: 1px solid #ddd; 
	margin: 0 auto;
}
#container .wait p{ text-align: center; font-size: 34px; padding: 150px 50px 60px 50px; position: relative; color: #333;}
#container .wait p:before{
    content: "";
    display: block;
    width: 35px;
    height: 15px;
    background: url(../images/icon.jpg) no-repeat;
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
}
#container .wait p strong{ display: block; font-size: 44px;}

/* Mobile Device (가로폭 767px 이하) */
@media all and (max-width:767px) {

	.video{ width: 540px; height: 300px; margin: 0 auto;}

	/* #container{ background-size: 100%;} */

	#container .con-4 { height: 1140px; background-size: 100%}
	#container .con-4 .video-1{ width: 540px;padding-top: 380px;}
	#container .con-4 .video-2{ width: 540px;padding-top: 100px;}
	 
	#container .popup { width: 640px;}
	#container .popup ul li.list span.letter{ letter-spacing: -2.5px;}

	#container .popup{ 
		position: absolute; top: 1150px; left: 50%; 
		transform: translateX(-50%);
		z-index: 500; 
		font-family: 'Noto Sans KR', sans-serif;
	}

	

}