@charset "utf-8";


/* 기본 */
* {text-size-adjust:none;}
#wrap {margin: 0 auto;}
#wrap > div {margin:0 auto;}

html, body{
  -webkit-text-size-adjust : none; 
  -ms-text-size-adjust : none;
  -moz-text-size-adjust : none;
  -o-text-size-adjust : none;
}

/* main */
 
.header {width: 100%; background: #fff; height: 70px;}
.header .con {width:680px; margin:0 auto;height:70px;display: flex;align-items: center;justify-content: space-between; }
.header .logo img {height: 35px; margin:5px 0;}
.header .date_wrap {display: flex; align-items: center;}
.header .date_wrap h4 {padding: 12px 18px; background: #f5f5f5; font-weight: 700; font-size: 17px;}
.header .date_wrap p {padding: 12px 18px; background: #edeafb; color: #4b47a8; font-weight: 700; font-size: 17px;}

.form_wrap .con {position:relative; width:720px; margin:0 auto;}


.blank {position: absolute; left: 0; top: 1681px; background: url(./blank.png) no-repeat #fff center center; width: 720px; height: 100px; background-size: 75% auto; }
.checks {position: relative;}
.checks input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; }
.checks input[type="radio"] + label { display: inline-block; position: relative; padding-left: 60px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;  font-size:30px; margin-right:18px;}
.checks input[type="radio"] + label:before { content: ''; position: absolute; left: 0; top: -1px; width: 40px; height: 40px; text-align: center; background: #fafafa; border: 2px solid #000; border-radius: 100%; box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); }
.checks input[type="radio"] + label:active:before, .checks input[type="radio"]:checked + label:active:before { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); }
.checks input[type="radio"]:checked + label:before { background: #E9ECEE; border-color: #000; }
.checks input[type="radio"]:checked + label:after { content: ''; position: absolute;    top: 9px; left: 10px; width: 25px; height: 25px; background: #e83228; border-radius: 100%; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3); }


.alert {position: absolute;left: 432px;top: 139px;width: 202px;height: 1044px;cursor: pointer;}

.bx-box {background: #fff;width: 560px;padding: 30px;border-radius: 10px;margin-top:40px}
.bx-box .bx-wrapper, .bx-box .bx-viewport { height: 255px !important;	text-align:center}
.bx-box ul li {	margin-bottom: 15px;display: flex;align-items: center;justify-content: center;}
.bx-box ul li span { font-size: 22px; }
.bx-box ul li span:nth-child(2) {
}
.bx-box ul li span:nth-child(1),
.bx-box ul li span:nth-child(2) {
	display: inline-block;
}
.bx-box ul li span.name_new { vertical-align: -1.5px; 	}
.bx-box ul li span.sex { padding: 0 30px 0 23px; vertical-align: -1.5px; }
.bx-box ul li span.age { display: flex;  color: #fff; border: 1px solid #09447f; background: #09447f;  padding: 5px 20px;border-radius: 20px}
.bx-box ul li span.age i { font-size: 18px;  font-weight: normal;}



/* footer */
#footer {position:relative; background:#efefef;}
#footer ul li {font-size: 15px; padding-bottom: 10px;}
#footer .f-logo {background: url('./f-logo.png') no-repeat; background-size: contain; width: 411px; height: 45px; margin: 0 auto; margin-bottom: 20px;}
#footer .copyright{  color:#666; text-align:left;  font-size:18px; text-shadow:none !important; line-height:1.3; text-align:center; padding:30px 0;}
.footer-bg img {display:block;}


/* ���� ��� */
.footer{background: #282828; padding: 40px 0px; text-align: center;}
.footer .logo{width: 100%; height: 42px; display:flex;align-items:center;justify-content:center; margin-bottom: 25px;}
.footer .con span{position: relative;}
.footer .con span b{display:block; font-size: 14px; color: #fff; font-family:'Pretendard', sans-serif; font-weight: normal; color: #777;line-height:1.5}
.footer .con span p{font-size: 14px; color: #fff; font-weight: normal; font-family:'Pretendard', sans-serif; margin-bottom: 10px;  color: #777;;line-height:1.5}
.footer .con span em{width: 100%; display:flex;align-items:center;}


/* ���� ��� */
.form-box {position: relative;}
.form-all { height: 52px; font-weight: 800; font-size: 27px; font-family:pretendard, sans-serif;}
.form-set div { margin-bottom: 15px; display:flex; }
.form-set div span {width:30%;line-height: 52px;font-weight: bold;color: #fff; text-align: left;height: 40px; display: flex; align-items: center;}

.form-set .form-tel { display: inline-block; }
.form-set div .form-text {height:55px;background: #efefef;vertical-align: top;width: 100%;padding: 5px 0 5px 20px;outline: none;border: none;border-radius: 5px;box-sizing: border-box;}
.form-set div .form-number { background: #efefef; box-sizing: border-box; vertical-align: top; width: 30%; outline: none; border: none; border-radius: none; margin-right: 5px; padding: 5px 8px;height: 55px; border-radius: 5px;}
.form-set div .form-number:last-child {margin-right: 0;width: 68%;}
.form-set div select { outline: none; border: none; font-weight: 800;}

.form-set div select:focus { border: 1px solid #4b47a8; }
.form-set div input:focus { border: 1px solid #4b47a8; }

.privacy {font-size: 25px;font-family: pretendard, sans-serif;color: #222; position: relative;text-align: center;padding: 10px 0 10px;display: flex;align-items: center;justify-content: flex-start; gap: 10px;}
.privacy #check-box, .privacy #check-box__mod { width: 25px; height: 25px; }
.privacy .agree-text { cursor: pointer; color:#fff}
.privacy a { color: #fff; }

.privacy_second {font-size: 25px;font-family: pretendard, sans-serif;color: #222; position: relative;text-align: center; display: flex;align-items: center;justify-content: flex-start; gap: 10px; padding: 10px 0;}
.privacy_second #check-box_second, .privacy_second #check-box__mod_second, .privacy_marketing #check-box__mod_marketing { width: 25px; height: 25px; }
.privacy_second .agree-text { cursor: pointer; color:#fff}
.privacy_second a { color: #fff; }
.privacy_marketing {font-size: 25px;font-family: pretendard, sans-serif;color: #222; position: relative;text-align: center; display: flex;align-items: center;justify-content: flex-start; gap: 10px; padding: 10px 0; white-space: nowrap;}

.privacy_second #check-box_second, .privacy
.form-set div .birth_box, .form-set div .mobile_box {width:70%; margin-bottom:0}
.btn_submit {position: relative;
    bottom: 0;
    left:50%;
    width: 560px;
    height: 95px;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    overflow: visible;
    cursor: pointer;
    background: url(./form_btn.png)no-repeat;
    transform: translateX(-50%);
	}

/* Select box �ろ���� 豐�蠍壱�� */ 
select {
	padding: 0 10px 0 15px;
	background: url('arrow.png') no-repeat 100% 50% #efefef !important;
	border-radius: 0px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-family:pretendard,; 
	color:#000

}

/* IE ���� Select box ���危�� ��蟇� */ 
select::-ms-expand { display: none; }

/* IE10 �伎������ input box �� 豢�螳��� 讌��郁鍵 覯��� ��蟇� */
input::-ms-clear { display: none; }

/* placeholder 豐�蠍壱�� */
input::-webkit-input-placeholder {
  color: #aaa;
  font-style: normal;
  font-weight:100;
  font-family:pretendard,
}
input:-ms-input-placeholder {
  color: #aaa;
  font-style: normal;
  font-weight:100;
  font-family:pretendard,
}
textarea::-webkit-input-placeholder {
  color: #aaa;
  font-style: normal;
  font-weight:100;
  font-family:pretendard,
}
textarea:-ms-input-placeholder {
  color: #aaa;
  font-style: normal;
  font-weight:100;
  font-family:pretendard,
}
input::placeholder { font-weight: 400; color:#aaa;font-family:pretendard, }


.form-set div .cover_box { position:relative; margin:0; width:70%}
/* 성별 css */
.sex_cover {position:absolute;right:0;top: 0;display:flex;color:#fff; border-radius: 0 5px 5px 0;overflow: hidden;}
.sex_cover input { display:none;}
.sex_cover label {  height:55px; width:65px; display:flex; justify-content:center; align-items:center; font-weight:600; font-size:27px; background:#a0a0a0;}
.sex_cover input:checked + label { background:#1d295d; font-weight:600;}
.form-set div .cover_box { position:relative; margin-bottom:0;}




/* 폰트 깨지는 현상 */
@font-face {
	font-family: 'NotoSansKR';
	src: url('../Font/NotoSansKR-Medium.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}
.form-set .form-name {font-family: 'pretendard' !important;}
.form-set .form-name::placeholder{font-family: 'pretendard';}
.form-set .form-number::placeholder {font-size: 27px;}
#mobile2::placeholder{font-size: 27px;font-family: 'pretendard'}

.inner {width:650px; margin:0 auto}

/* section1 */
.section1 {background: #edeafb;position:relative; height: 785px; padding-top: 75px;}
.section1 .inner {display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: inherit;}
.section1 input::placeholder {font-weight: 400; color: #999;}
.section1 .title_wrap h1 {font-family: 'GmarketSans'; font-weight: 400; font-size: 52px; letter-spacing: -2px; text-align: center; line-height: 1.2; color: #333;}
.section1 .title_wrap h1 b {font-family: inherit; font-weight: inherit; color: #4b47a8;}
.section1 .title_wrap span {display: block; font-size: 27px; text-align: center; margin: 15px 0 40px;}
.section1 .title_wrap p {font-size: 26px; padding: 18px; border: 1px solid #4b47a8; text-align: center; border-radius: 8px; background: #fff;}
.section1 .title_wrap p b {color: #4b47a8;}
.section1 .form_wrap {width: 100%; max-width: 720px; background: #fff; position: relative; box-shadow: rgba(50, 50, 93, 0.2) 0px 13px 27px -5px, rgba(0, 0, 0, 0.2) 0px 8px 16px -8px;}
.section1 .form_wrap h1 {background: #4b47a8; color: #fff; padding: 20px 0; font-size: 32px; text-align: center;}
.section1 .form_wrap .input_wrap {background: #fff; padding: 30px 40px;}
.section1 .form_wrap .input_wrap ul li {display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;}
.section1 .form_wrap .input_wrap ul li > label {font-size: 26px; font-weight: 600; width: 30%;}
.section1 .form_wrap .input_wrap ul li input[type="text"], .section1 .form_wrap .input_wrap ul li input[type="tel"] {border: 0; border-bottom: 1px solid #999; padding: 10px; font-size: 26px; font-family: inherit; outline: none; width: 100%;}
.section1 .form_wrap .input_wrap ul li input[type="text"]:focus, .section1 .form_wrap .input_wrap ul li input[type="tel"]:focus {border-bottom-color: #4b47a8;}
.section1 .form_wrap .input_wrap ul li .box {display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; width: 400px;}
.section1 .form_wrap .input_wrap ul li #customer_birth, .section1 .form_wrap .input_wrap ul li #customer_birth__btm {width: 400px; box-sizing: border-box;}
.section1 .form_wrap .input_wrap ul li .box .sex_wrap {display: flex; align-items: center;}
.section1 .form_wrap .input_wrap ul li .box .sex_wrap input[type="radio"] {display: none;}
.section1 .form_wrap .input_wrap ul li .box .sex_wrap label {display: block; background: #ccc; padding: 14px 25px; font-size: 24px; cursor: pointer; color: #fff;}
.section1 .form_wrap .input_wrap ul li .box .sex_wrap input:checked + label {background: #1d295d;}
.section1 .form_wrap .input_wrap ul li #customer_name {width: 70%;}
.section1 .form_wrap .input_wrap ul li .box select {border: 0; border-bottom: 1px solid #999; padding: 10px; font-size: 24px; padding-right: 35px; outline: none; background-color: #fff !important; font-family: inherit;}
.section1 .form_wrap .input_wrap ul li .box select:focus {border-bottom-color: #4b47a8;}
.section1 .form_wrap .privacy_wrap {display: flex; align-items: center; justify-content: flex-start; margin: 25px 0 12px;}
.section1 .form_wrap .privacy_wrap input[type="checkbox"] {width: 22px; height: 22px;}
.section1 .form_wrap .privacy_wrap label {font-size: 22px; margin: 0 6px; cursor: pointer;}
.section1 .form_wrap .privacy_wrap button {border: 0; background: none; font-family: inherit; font-size: 22px; padding: 0; cursor: pointer;}

.section1 .form_wrap .privacy_wrap_second {display: flex; align-items: center; justify-content: flex-start; margin: 12px 0;}
.section1 .form_wrap .privacy_wrap_second input[type="checkbox"] {width: 22px; height: 22px;}
.section1 .form_wrap .privacy_wrap_second label {font-size: 22px; margin: 0 6px; cursor: pointer;}
.section1 .form_wrap .privacy_wrap_second button {border: 0; background: none; font-family: inherit; font-size: 22px; padding: 0; cursor: pointer;}
.section1 .form_wrap .btn_submit {display: block; border: 0; background: url("./db_btn.png") no-repeat center / cover; width: 100%; height: 68px; padding: 0; margin-top: 15px; cursor: pointer;}


.section1 .form_wrap .privacy_wrap_marketing {display: flex; align-items: center; justify-content: flex-start; margin: 12px 0 25px;}
.section1 .form_wrap .privacy_wrap_marketing input[type="checkbox"] {width: 22px; height: 22px;}
.section1 .form_wrap .privacy_wrap_marketing label {font-size: 22px; margin: 0 6px; cursor: pointer;}
.section1 .form_wrap .privacy_wrap_marketing button {border: 0; background: none; font-family: inherit; font-size: 22px; padding: 0; cursor: pointer;}
.section1 .form_wrap .btn_submit {display: block; border: 0; background: url("./db_btn.png") no-repeat center / cover; width: 100%; height: 80px; padding: 0; margin-top: 15px; cursor: pointer;}


/* section2 */
.section2 {padding: 200px 0 85px; background: #fafafa;}
.section2 h1 {font-size: 40px; font-family: 'GmarketSans'; letter-spacing: -1px; margin-bottom: 50px; text-align: center;}
.section2 h1 b {color: #4a6ced; font-family: inherit; letter-spacing: inherit;}
.section2 .flow_wrap ul {display: grid; grid-template-columns: repeat(2, 1fr); padding: 0 20px; gap: 35px 0;}
.section2 .flow_wrap ul li {display: flex; flex-direction: column; align-items: center; text-align: center;}
.section2 .flow_wrap ul li .txt_wrap {margin-top: 15px;}
.section2 .flow_wrap ul li .txt_wrap p {font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -1px; color: #333;}
.section2 .flow_wrap ul li .txt_wrap span {display: block; font-size: 20px; color: #999; line-height: 1.6;}
.section2 .flow_wrap ul .line {padding-bottom: 70px;}

/* section3 */
.section3 {padding: 80px 0; background: #fff;}
.section3 h1 {font-size: 40px; font-family: 'GmarketSans'; letter-spacing: -1px; margin-bottom: 55px; text-align: center;}
.section3 h1 b {color: #4a6ced; font-family: inherit; letter-spacing: inherit;}
.section3 .list_wrap ul li {border: 1px solid #ddd; text-align: center; border-radius: 10px; overflow: hidden;}
.section3 .list_wrap ul li:not(:last-child) {margin-bottom: 25px;}
.section3 .list_wrap ul li button {font-size: 24px; padding: 18px; border: 0; border-top: 1px solid #ddd; background: #fafafa; display: flex; width: 100%; font-family: inherit; cursor: pointer; color: #444; justify-content: center; align-items: center;}
.section3 .list_wrap ul li button img {margin-left: 8px;}

/* section4 */
.section4 {padding: 75px 0; background: url("./bg_img.png") no-repeat center / cover;}
.section4 .inner {display: flex; flex-direction: column; align-items: center; text-align: center;}
.section4 .title_wrap h1 {font-family: 'GmarketSans'; font-size: 42px; line-height: 1.3; margin-bottom: 25px; letter-spacing: -1px;}
.section4 .title_wrap h1 b {font-family: inherit;}
.section4 .title_wrap p {font-size: 22px; line-height: 1.5; color: #454545; margin-bottom: 40px;}
.section4 .list_wrap ul li {background: linear-gradient(to right, transparent 0%, #fff 15% 85%, transparent 100%); width: 650px;}
.section4 .list_wrap ul li p {font-size: 22px;  padding: 22px; padding-left: 65px; position: relative; text-align: left; width: 520px; margin: 0 auto;}
.section4 .list_wrap ul li:not(:last-child) {margin-bottom: 20px;}
.section4 .list_wrap ul li p::before {content: ""; width: 28px; height: 28px; background: url("./check_icon.png") no-repeat center / contain; position: absolute; top: 50%; left: 15px; transform: translateY(-50%);}

.bottom-form .form_wrap .input_wrap {padding: 30px 80px;}