@charset "utf-8";
@import url('font.css');

*{
-webkit-text-size-adjust:none;
-webkit-text-size-adjust - auto | none | N% (default auto)
}
*, *:before, *:after{box-sizing:border-box;-webkit-box-sizing:border-box; , -moz-box-sizing:border-box;}
[hidden], area, base, basefont, command, datalist, head,input[type=hidden], link, menu[type=context], meta, noembed, noframes,param, script, source, style, track, title {display: none;/* case-insensitive */}
address, article, aside, blockquote, body, center, dd, dir, div, dl,dt, figure, figcaption, footer, form, h1, h2, h3, h4, h5, h6, header,hgroup, hr, html, legend, listing, menu, nav, ol, p, plaintext, pre,section, summary, ul, xmp{display:block;}
table{display: table;}
caption{display: table-caption;}
colgroup{display: table-column-group;}
col{display: table-column;}
thead{display: table-header-group;}
tbody{display: table-row-group;}
tfoot{display: table-footer-group;}
tr{display: table-row;}
td, th{display: table-cell;}
li{display: list-item;}

/* reset */				  
body,div,p,h1,h2,h3,h4,h5,h6,ul,li,dl,dt,dd,ol,table,tr,th,td,caption,form,fieldset,input,select,textarea,blockquote,address{margin:0;padding:0;line-height:1; word-break:keep-all;}
img,fieldset,iframe{border:0 none; font-weight:400;}
h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:400;}
address,em{font-style:normal;font-weight:normal;}
table{width:100%; border-collapse:collapse; border-spacing:0px; table-layout:fixed;}
input,textarea,select,button,table{font-size:inherit;font-family:inherit;line-height:inherit;}
input, select{-webkit-border-radius:0px; }
input[type="text"], input[type="password"], input[type="email"], input[type="tel"]{-webkit-appearance:none; vertical-align:middle;}
select{-webkit-appearance: none; -moz-appearance: none; appearance: none; opacity:1 !important; background:#fff url("../img/skin/select_arrow.png") calc(100% - 20px) 50% no-repeat; border:1px solid #ced1d3; vertical-align:middle; outline:none;}
select::-ms-expand{display:none;}
input,select,button{border:0; outline:0; padding:0;}

/* base */
body{min-width:280px; min-height: 100vh; min-height: -webkit-fill-available; position:relative; font-family:'NanumSquareNeo', sans-serif; font-size:16px; font-weight:400; color:#000000; padding:0; overflow-x:hidden;}
body * {letter-spacing:-0.025em;}
ul,ol,li{list-style:none;line-height:100%;}
a{text-decoration:none; color:inherit; line-height:1.0;}
a:hover, a:focus{text-decoration:none;}
caption,legend, .hide{position:absolute;top:-5000px;text-indent:-5000px;visibility:hidden;width:0;height:0;font-size:0;line-height:0;}
ul:after{content:" ";display:block;clear:both;}
textarea {resize:none;}
img{vertical-align:middle;}	   
button{background:none; border:0; outline:0; cursor:pointer;}
hr{display:none;}
section{margin:0;padding:0;}
section:after{content:" "; display:block; clear:both;}
header:after{content:" "; display:block; clear:both;}
.clfix:after{content:" "; display:block; clear:both;}


.pc{display:inline-block;}
.mb{display:none;}
#wrap{max-width:935px; margin:0 auto; padding:110px 0 40px; text-align:center; background:#7c3baa;}
#wrap img{max-width:100%;}
.form_wrap{max-width:760px; width:100%; margin:55px auto 0; display:flex; justify-content:space-between; text-align:left;}	
.form_wrap h2{position:relative; display:block; font-size:18px; color:#fff; font-weight:600; text-align:left;}
.form_wrap h2:before{content:''; position:absolute; top:6px; left:-18px; width:4px; height:4px; border-radius:50%; background:#fff;}
.form_wrap p{margin-top:8px; font-size:14px; color:#ffe156; font-weight:600; line-height:1.3;}
.agree_box{width:calc(100% - 385px); padding-left:20px;}
.agree_box .agree_info{margin-top:15px; padding:25px 10px 30px 28px; background:rgba(0,0,0,0.15); border-radius:10px;}
.agree_box .agree_info li{position:relative; padding-right:20px; font-size:13px; color:#fff; line-height:1.3;}
.agree_box .agree_info li:before{content:''; position:absolute; top:8px; left:-8px; width:2px; height:2px; border-radius:2px; background:#fff;}
.agree_box .agree_info li + li{margin-top:14px;}
.agree_chk{margin-top:25px; padding-left:2px;}
.agree_chk input[type="checkbox"]{display:none;}
.agree_chk input[type="checkbox"] + label{position:relative; display:block; padding-left:40px; font-size:15px; color:#fff; line-height:1.4; cursor:pointer;}
.agree_chk input[type="checkbox"] + label:before{content:''; position:absolute; top:-3px; left:0; width:26px; height:26px; background:#fff;}
.agree_chk input[type="checkbox"]:checked + label:before{background:#fff url(../img/2025_02_event_chk.png)no-repeat center;}

.form_box{width:345px;}
.form_box h2{margin-bottom:30px;}
.input_box{position:relative; width:100%; border-radius:10px; background:#fff;}
.input_box label{position:absolute; top:22px; left:22px; font-size:18px; color:#000; z-index:4;}
.input_box label span{display:inline-block; padding-left:8px; font-size:15px; color:#7e7e7e;}
.input_box .input_txt{position:relative; padding:0 23px; width:100%; height:60px; font-size:16px; font-weight:600; color:#000; border-radius:10px; background:transparent; outline:none; z-index:5;}
.input_box .btn_clear{position:absolute; top:50%; right:20px; transform:translateY(-50%) scale(0); width:24px; height:24px; background:url(../img/2025_02_event_clear.png)no-repeat; background-size:100% auto; z-index:10;}
.input_box + .input_box{margin-top:15px;}

.input_box.focus{box-shadow:0 0 13px rgba(0,0,0,0.8);}
.input_box.focus label{top:14px; font-size:13px; color:#7c3baa; font-weight:800; transition:0.2s;}
.input_box.focus label span{display:none;}
.input_box.focus .input_txt{padding:18px 23px 0 23px; border:2px solid #cc84ff;}
.input_box.focus .btn_clear{transform:translateY(-50%) scale(1); transition:linear 0.2s;}

.btn{display:block; margin:0 auto; cursor:pointer;}
.btn strong{color:#fffd69;}
.btn:hover{transform:translate3d(0, 5px, 0); transition:0.2s;}
.btn.btn_01{margin:15px auto 20px;}
.btn.btn_02{margin:35px auto 0; width:100%; max-width:780px; height:80px; display:flex; align-items:center; justify-content:center; background:#3d1a55; border-radius:20px;}
.info_txt{margin-top:20px; font-size:16px; color:#fffd69; font-weight:600; line-height:1.4;}


@media all and (max-width:935px){
	#wrap{padding:40px 5% 30px}

	.form_wrap{padding:0;}
	.form_box{width:50%;}
	.agree_box{width:45%;}
}


@media all and (max-width:750px){
	.pc{display:none;}
	.mb{display:inline-block;}
	#wrap{padding:40px 5% 100px}
	.form_wrap{margin-top:40px; display:block; padding-left:25px; padding-right:10px;}	
	.form_wrap h2{font-size:17px;}
	.form_wrap h2:before{top:6px; left:-15px; width:3px; height:3px;}
	.form_wrap p{margin-top:8px; font-size:16px; font-weight:400;}
	.info_txt{margin-top:20px; margin-left:25px; padding-right:10px; font-size:14px; font-weight:600; text-align:left; padding-left:18px; text-indent:-18px;}
	.agree_box{width:100%; padding-left:0;}
	.agree_box .agree_info{margin-top:15px; padding:20px 0 20px 30px;}
	.agree_box .agree_info li{font-size:14px; letter-spacing:-1px;}
	.agree_box .agree_info li:before{top:8px; left:-8px;}
	.agree_box .agree_info li + li{margin-top:8px;}
	.agree_chk{margin-top:20px; padding-left:2px;}
	.agree_chk input[type="checkbox"] + label{padding-left:35px; font-size:13px;}
	.agree_chk input[type="checkbox"] + label:before{top:-2px; left:0; width:22px; height:22px;}
	.agree_chk input[type="checkbox"]:checked + label:before{background-size:15px auto;}

	.form_box{margin-top:45px; width:100%;}
	.form_box h2{margin-bottom:25px;}
	.input_box label{left:20px;}
	.input_box label span{display:inline-block; padding-left:8px; font-size:15px; color:#7e7e7e;}
	.input_box .input_txt{padding:0 20px;}
	.input_box .btn_clear{}
	.input_box + .input_box{margin-top:12px;}

	.input_box.focus .input_txt{padding:18px 20px 0 20px;}

	.btn:hover{transform:translate3d(0, 0, 0);}
	.btn.btn_01{margin:15px auto 20px; width:100%;}
	.btn.btn_02{position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:100%; height:70px; padding:0 5%; border-radius:0;}
	.btn.btn_02 img{max-height:26px;}
}

@media all and (max-width:390px){
	#wrap .inner{padding:40px 3% 30px;}
	.form_wrap{padding-left:20px; padding-right:5px;}
	.form_wrap p{font-size:14px; letter-spacing:-1px; }
	.agree_box .agree_info{padding:20px 0 20px 25px;}
	.agree_box .agree_info li{font-size:12px;}
	.agree_box .agree_info li:before{top:6px;}
	.input_box label{font-size:15px; letter-spacing:-1px;}
	.input_box label span{padding-left:5px; font-size:13px; letter-spacing:-1px;}
	.btn.btn_02 img{max-height:20px;}
}

@media all and (max-width:320px){
	.agree_box .agree_info li{font-size:11px;}
}