@charset "utf-8";

.back-wrap::after {
	content: '';
	display: block;
	clear: both;
  }
	

.main-txt-1 {
	font-family: Noto Sans KR;
	font-style: normal;
	font-weight: normal;
	letter-spacing: -0.02em;
	color:#ffffff;
	opacity: 0.8;
}
.main-txt-2 {
	font-family: Noto Sans KR;
	font-style: normal;
	font-weight: bold;
	letter-spacing: -0.02em;
	color:#ffffff;
	
}
.main-txt-3 {
	font-family: Noto Sans KR;
	font-style: normal;
	font-weight: bold;
	letter-spacing: -0.02em;
	color:#ffffff;
}

/* form inner */
.form-warp {
   width:100%; height: auto; margin: auto;
}
.c-form-box {
    height:100%;
    overflow-y:auto;
}
.c-form-box .p-header {
    position:relative;
    height:62px;
    border-bottom:1px solid #eee;
}

.c-form-box .c-contents h2 {
    font-size:19px; 
	font-weight:500;
    color:#1C2F45;
}
.c-form-box .c-contents h3 {
    font-size:14px; font-weight:500;
    color:#3A2F5B;
    margin:16px 0 8px;
}
.c-form-box .c-contents h3 span {color:#6632FB;}
.c-form-box .c-contents input[type=text] {
    display:block;
    width:100%; height:50px;
    border:1px solid #BCBBCB;
    border-radius:4px;
    padding:0 12px;
    font-size:14px;
    color:#222;
}

.c-form-box .c-contents h2 a {font-size: 12px; color:#6632FB; line-height:15.6px; letter-spacing:-1px; margin-left:6px;}

.c-form-box .c-contents input::placeholder {color:#888;}
.c-form-box .c-contents hr {
    display:block; width:100%; height:1px;
    margin:40px 0;
    border:none;
}
.c-form-box .c-contents h2 span {
    display:inline-block;
    line-height:32px;
    border-radius:5px;
    background:#F5F0FF;
    padding:0 14px 0 12px;
    font-size:14px;
    color:#9667D2;
    margin-left:8px;
}
.c-form-box .c-contents h2 span img {
    vertical-align:middle; width:14px;
    margin-bottom:2px;
}

.c-form-box .c-contents .caution {
    position:relative;
}

.c-form-box .c-contents input:disabled {
    color:#888;
    background:#F5F5F5;
}

.c-form-box .c-contents input:disabled.st1 {
    color:#888;
    background:#F5F5F5;
}

.c-form-box .c-contents .caution p {
    margin-top:7px;
    font-size:12px;
    color:#6632FB;
    padding-left:16px;
    background:url(/images/popup_icon3.svg) no-repeat;
    background-size:12px;
    background-position:0 50%;
}
.c-form-box .c-contents .caution button {
    position:absolute; top:5px; right:5px;
    display:block;
    width:100px; height:40px;
    font-size:14px; font-weight:700;
    background:#fff;
    border:1px solid #6632FB;
    color:#6632FB;
    border-radius:4px;
}

.c-form-box .c-contents .btn-stl button {
    display:block;
    width:150px; height:50px;
    background:#fff;
    color:#6632FB;
    border:1px solid #6632FB;
    border-radius:4px;
    font-size:14px; font-weight:700;
}
.c-form-box .c-contents .group-inner {
    margin-top:12px;
}
.c-form-box .c-contents .group-inner .g-box {
    float:left;
    line-height:36px;
    background:#FFEFF4;
    border-radius:100px;
    margin:0 10px 7px 0;
    padding:0 35px 0 15px;
    font-size:13px; font-weight:500;
    color:#EB7997;
    position:relative;
}
.c-form-box .c-contents .group-inner .g-box button {
    position:absolute; top:0; right:0;
    width:30px; height:100%;
    background:url(/images/popup_group_close.svg) no-repeat;
    background-size:12px;
    background-position:5px 50%;
    text-indent:-9999px;
}
.c-form-box .c-contents .group-inner + hr {
    margin-bottom:30px;
}
.c-form-box .c-contents .sign-up {
    display:block; width:100%; height:50px;
    color:#fff;
    background:#6632FB;
    border-radius:5px;
    font-size:16px; font-weight:700;
}

.c-form-box .c-contents .array {display:block;}

.c-form-box {
	position:relative; margin-top:50px; left:50%; padding:0px 20px;
	transform:translate(-50%,0%);
 }
	
.c-form-box .f-contents hr {
    display:block; width:100%; height:1px;
    margin:20px 0; border:none;}

.personal-info p {margin: 20px auto 25px;
	width: 100%;
	background: #F2EEFF url(/images/popup_icon1.svg) no-repeat;
	background-size: 18px;
	background-position: 12px 10px;
	font-size: 14px;
	letter-spacing: -1px;
	line-height: 140%;
	color: #695F7D;
	border-radius: 7px;
	padding: 10px 5px 10px 38px;
	word-break: keep-all;}
	
.input-chk + .input-chk{margin-left:14px}
.input-chk{position:relative; display:inline-block}
.input-chk input[type=checkbox]{position:absolute; visibility:hidden}
.input-chk input[type=checkbox] + label{display:inline-block; padding-left:23px; padding-top:4px; font-size:15px; line-height:30px; color:#000; cursor:pointer; vertical-align:top}
.input-chk input[type=checkbox] + label:before{content:''; position:absolute; left:0; top:11px; width:16px; height:16px; border:solid 1px #ccc; background-color:#f8f7f7; box-sizing:border-box}
.input-chk input[type=checkbox]:checked + label{}
.input-chk input[type=checkbox]:checked + label:before{background-color:#fff; border-radius: 3px; border-color:#999}
.input-chk input[type=checkbox]:checked + label:after{content:''; position:absolute; left:3px; top:14px; width:8px; height:4px; border-left:solid 2px #6632FB; border-bottom:solid 2px #6632FB; transform:rotate(-45deg); -webkit-transform:rotate(-45deg)}





.m-txt1 {color:#6632FB; font-size: 14px; line-height:23px; margin-top:10px;}
.m-txt2 {color:#EE3E69; font-size: 14px; line-height:23px; margin-top:10px;}

.mgt10 {margin-top:10px;}
.mgt20 {margin-top:20px;}

/* 가로 해상도 768 이하 */
@media screen and (max-width: 767px) {
.center-background {
	width:100%; height:380px; 
	background: linear-gradient(139.1deg, #6ed3ff 4.89%, #8acfed 11.02%, #dcbaff 98.29%), #e5cbff;
	z-index:-1;
}	
.center-background img {width:480px; float: right; display:inline-block; z-index:0;}	

.back-wrap {
	min-width:200px;
	max-width:620px;
	height:240px;
	margin: auto;
	box-sizing: border-box;
	display:block;
	align-items: center;
	position: relative;
	}

.img-area {  
	min-width:200;
	max-width:580px;  
	margin: auto;
	height:380px;
	box-sizing: border-box;
	text-align: center;
	z-index:0;
	overflow: hidden;
	padding-top: 160px;
	}

	
.back-image {
	width:auto; 
	height:360px;
	margin: auto;
	display: block;
	background: url(/images/background_img_c.svg);
	background-repeat: no-repeat;
	background-position:center;
	background-size:auto;
	background-size: contain;
	position:relative;
}
 .text-area {
	max-width: 720px;
	width: 100%; 
	height:250px;
	padding:40px 20px 0px 20px;
	text-align: center;
	word-break:keep-all;
	position: absolute;
	left:50%; transform: translate(-50%, 0%);
	z-index:1;
	}
	
.center-background .main-txt-1 {font-size: 18px; line-height: 26px; margin-bottom:12px; line-height: 130%; opacity: 0.8;}
.center-background .main-txt-2 {font-size: 24px; font-weight:500; margin-bottom:10px; line-height: 130%;}
.center-background .main-txt-3 {font-size: 38px; font-weight:700; line-height: 130%;}
	
}
.section {padding:80px 0px;}

/* 가로 해상도 768 이상 */
@media screen and (min-width: 768px) {
.center-background {top:0; width:100%; height:340px; background: linear-gradient(139.1deg, #6ed3ff 4.89%, #8acfed 11.02%, #dcbaff 98.29%), #e5cbff; }

.back-wrap {
	min-width:780px;
	width: auto;
	height:360px;
	margin: auto;
	box-sizing: border-box;
	display:flex;
  }

 .img-area {
	position:absolute;
	right:30px; 
	padding-top:60px;	
	width:520px;
	height:340px;
	box-sizing: border-box;
	text-align: center;
	overflow: hidden;

  }
.back-image {
	width:500px; 
	height:380px; 
	display: block;
	background: url(/images/background_img_c.svg); 
	background-repeat: no-repeat;
	background-position: right;
	background-size: contain;

  }

 .text-area {
	width:720px;
	height: 360px;
	padding-left:20px;  
	display:table;
	word-break:keep-all;
	z-index:1;    
  }

.center-background	.main-txt-1 {
		font-size: 14px;
		line-height:28px;
	}
.center-background .main-txt-2 {
		font-size: 18px;
		line-height:34px;
	}
.center-background .main-txt-3 {
		font-size: 36px;
		line-height:56px;
	}	
	
	
.center-background .txt-middle {
	width: 400px; 
	height:113px; 
	display: table-cell; 
	vertical-align: middle;
	}

/* form inner */
	
.form-warp {width:100%; height: auto; padding:0 20px; margin: auto;}
.c-form-box {
	max-width:1200px; width:auto;
	position: relative; padding-top:36px; left:50%;
	transform:translate(-50%,0%);
    }	
	
.c-form-box .c-contents .array {display: flex;}
.c-form-box .c-contents .array > div {
        width:100%;
        float:left;
    }
.c-form-box .c-contents .array > div + div {
		margin-left:20px;
        float:left;
    }	
	
}

/* 가로 해상도 1024 이상 */
@media screen and (min-width: 1024px) {
.contents .c-inner {
        padding-bottom:80px;
    }	
	
.center-background {
	position: absolute;
	top: 0;
	width: 100%;
	height: 360px;
	background: linear-gradient(139.1deg, #6ed3ff 4.89%, #8acfed 11.02%, #e5cbff 98.29%), #68c7f0;
    }
.back-wrap {
	width:800px;
	height:360px;
	margin: auto;
	box-sizing: border-box;
	display:flex;
	}

.img-area {
	position:relative;
	right:10px; 
	width:640px;
	height:360px;
	box-sizing: border-box;
	text-align: center;
	overflow: hidden;
	}
.back-image {
	width:100%; 
	height:420px; 
	margin:10 auto; 
	display: block;
	background: url(/images/background_img_c.svg); 
	background-repeat: no-repeat;
	background-position:center;
	background-size: cover;
	}
 .text-area {
	float: left;
	width: 100%;
	height: 360px;
	box-sizing: border-box;
	display:table;
	}
.form-wrap {width:100%; max-width:1000px; height:100%; padding:20px; margin: auto;}
.c-form-box {
        position:relative; left:50%;
        transform:translate(-50%,0%);
		top:250px;
		height: 100%;
		padding-bottom:250px;

	}
}

/* 가로 해상도 1280 이상 */
@media screen and (min-width: 1280px) {
	.top-main {
       position:absolute; left: 0; top:0; width:100%; height:420px; box-sizing: border-box;
    }
	
.contents .c-inner {
        padding-bottom:80px;
    }	
	
.center-background {
	position: absolute;
	top: 0;
	width: 100%;
	height: 360px;
	background: linear-gradient(139.1deg, #6ed3ff 4.89%, #8acfed 11.02%, #e5cbff 98.29%), #68c7f0;
    }
.back-wrap {
	width:800px;
	height:360px;
	margin: auto;
	box-sizing: border-box;
	display:flex;
	}

.img-area {
	position:relative;
	right:10px; 
	width:640px;
	height:360px;
	box-sizing: border-box;
	text-align: center;
	overflow: hidden;
	}
.back-image {
	width:100%; 
	height:420px; 
	margin:10 auto; 
	display: block;
	background: url(/images/background_img_c.svg); 
	background-repeat: no-repeat;
	background-position:center;
	background-size: cover;
	}
 .text-area {
	float: left;
	width: 100%;
	height: 360px;
	box-sizing: border-box;
	display:table;
	}
.form-wrap {width:100%; max-width:1000px; height:100%; padding:20px; margin: auto;}
.c-form-box {
        position:relative; left:50%;
        transform:translate(-50%,0%);
		top:250px;
		height: 100%;
		padding-bottom:250px;

	}
}


/* 가로 해상도 1500 이상 */
@media screen and (min-width: 1500px) {
     .center-background {
        width: 100%;
        height: 420px;
    }
	.back-wrap {
		width:1100px;
		height:420px;
	}

	.img-area {
			position:relative;
			top:80px;
			right:20px; 
			width:600px;
			height:340px;
		 }
	.back-image {
			width:100%; 
			height:390px; 
			margin:10 auto; 
			background-position:left;
			background-size: cover;
		 }
	.text-area {
			float: left;
			width:70%;
			height: 420px;
			box-sizing: border-box;
			display:table;
		 }

	.center-background	.main-txt-1 {
			font-size: 18px;
			line-height: 26px;
			margin-bottom:12px;
		}
	.center-background	.main-txt-2 {
			font-size: 24px;
			line-height: 32px;
			margin-bottom:12px;
		}
	.center-background .main-txt-3 {
			font-weight: bold;
			font-size: 48px;
			line-height: 62px;
			/* or 47px */
		}
	
	.form-wrap {max-width:940px; min-width:768px; padding-top:76px; height: auto; margin: auto;}
    .c-form-box {
        position:relative; top:248px; left:50%;
        transform:translate(-50%,0%);

	}
}
	
/* 가로 해상도 1920 이상 */
@media screen and (min-width: 1920px) {
	.center-background .img-area {
			position:relative;
			top:80px;
			right:20px; 
			width:600px;
			height:340px;
			overflow: hidden;
		 }
	.center-background .text-area {
			float: left;
			width:70%;
			height: 420px;
			padding-left:0px;  
			display: table;
		  }
	
}