@charset "utf-8";
html{overflow-x:hidden}
button {border:0;}
.chkB {display:inline-block;margin:0 8px 0 0;cursor:pointer;vertical-align:middle; padding:0;}
.chkB input {position:absolute; visibility:hidden;position:static\9;visibility:visible\9;}
.chkB input + span {display:inline-block;padding:3px 0px 3px 30px;padding:0\9;background:url(/img/chk_off.svg) no-repeat left 0px; background-size:20px 20px; background:none\9; font-size:14px; color:#999;}
.chkB input:checked + span {background:url(/img/chk_on.svg) no-repeat left 0px; background-size:20px 20px; background:none\9; color:#111;}

.radioB {display:inline-block;margin:0;cursor:pointer;vertical-align:middle;}
.radioB input {position:absolute; visibility:hidden;position:static\9;visibility:visible\9;}
.radioB input + span {display:inline-block;padding:0px 0px 0px 28px;padding:0\9;background:url(/img/bg_radio_off.svg) no-repeat left 0px; background-size:20px 20px; background:none\9; color:#333; min-height:20px;}
.radioB input:checked + span {background:url(/img/bg_radio_on.svg) no-repeat left 0; background-size:20px 20px; background:none\9; color:#0180b3;}

table{border-collapse:collapse;table-layout:fixed; border-collapse:collapse;border-spacing:0;}
em {font-style:normal;}

.pageTitle {color:#111; font-size:20px; margin-bottom:10px; line-height:1.2;  font-weight:800;font-family: 'Noto Sans KR';position:relative;display:table}
.pageTitle em {font-size:14px; color:#666; margin-left:10px; font-style:normal;}
.pageTitle:after{content:'';position:absolute;top:50%;margin-top:-3px;right:-15px;width:6px;height:6px;border-radius:50% 50%;background-color:#0364B3;}

.joinForm {position:relative; }
.joinForm .cauTxt {display:flex; justify-content:flex-end; align-items:center; gap:5px; font-size:14px; color:#666; position:relative; margin-bottom:10px;}
.joinForm .cauTxt:before {content:'*'; color:#ff5b00; font-weight:600; font-size:16px;}
.joinForm .formBlock {display:flex; justify-content:flex-start; align-items:center; gap:24px; padding:20px 10px; border-bottom:1px solid #ddd;}
.joinForm .formBlock:first-of-type {border-top:1px solid #ddd;}
.joinForm .formBlock .items {display:block; width:180px;}
.joinForm .formBlock .items .title {color:#111; font-size:16px; font-weight:400; display:flex; justify-content:flex-start; align-items:center; gap:3px;}
.joinForm .formBlock .items .title span {color:#111; font-size:16px; font-weight:400; display:flex; justify-content:flex-start; align-items:center; gap:3px;}
.joinForm .formBlock .items .title.required {background-image:none !important;}
.joinForm .formBlock .items .title.required:after {content:'*'; position:relative; right:unset; top:unset; color:#FF4242; font-weight:700; font-size:14px;}
.joinForm .formBlock .items .sub_title {display:block; color:#4388E6; margin-top:5px; font-size:12px;line-height:1}
.joinForm .formBlock .inputCont {display:block; width:calc(100% - 204px);}

.joinForm input[type="text"], .joinForm input[type="password"], .joinForm input[type="number"] , .joinForm input[type="tel"] {display:inline-block; width:100%; max-width:205px; height:36px; border:1px solid #ccc; padding:0 10px; box-sizing:border-box; border-radius:4px; background:#FFF;}
.joinForm select {display:inline-block; width:100%; height:36px; border:1px solid #ccc; padding:0 10px; box-sizing:border-box; border-radius:4px; background:#FFF;font-size:14px}
.joinForm .inputCont.national select {width:200px;}
.joinForm .inputCont.type select {width:200px;}
.joinForm .inputCont.gender label {font-size:14px; margin-right:10px;}
.joinForm .inputCont.birth select:first-of-type {width:110px;}
.joinForm .inputCont.birth select {width:110px; margin-right:10px;}
.joinForm .inputCont.phone input:first-of-type {width:110px;}
.joinForm .inputCont.phone input {width:110px; margin-right:10px;}
.joinForm .inputCont.course select {width:264px;}
.joinForm .inputCont.gift {display:flex; justify-content:flex-start; align-items:center; color:#222; font-size:14px; gap:10px;}
.joinForm .inputCont.gift select {width:180px;}
.joinForm .inputCont.address .post {display:flex; justify-content:flex-start; align-items:center; gap:10px; margin-bottom:10px;}
.joinForm .inputCont.address .post input {width:120px;}
.joinForm .inputCont.address .post button {height:36px; border-radius:4px; background:#f1f1f1; border:1px solid #bbb; padding:0 20px; color:#333;}
.joinForm .inputCont.address input {width:100%;}
.joinForm .inputCont.address input.address1 {width:100%; max-width:480px; margin-bottom:10px;display: flex;flex-direction: column;justify-content: center;align-items: flex-start;gap: 10px;border-radius: 6px;border: 1px solid #E4E4E4;background: #ECECEC;}
.joinForm .inputCont.address input.address2 {width:100%; max-width:480px; } /* margin-bottom:10px; */
.joinForm .inputCont.group button.btnChk {height:36px; border-radius:4px; background:#2CB6DC; border:1px solid #2CB6DC; padding:0 15px; color:#ffffff;font-size:14px;vertical-align:top;}
.joinForm .inputCont .btnOk {display:inline-block; height:36px; line-height:32px; border-radius:4px; background:#5cc90b; border:1px solid #5cc90b; 
padding:0 15px; color:#FFF;font-size:14px;vertical-align:top;}

.groupInfo {position:relative; margin-top:30px;}
.groupInfo .groupFunc {display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;}
.groupInfo .groupFunc .funcTitle {color:#222; font-size:16px; font-weight:600;}
.groupInfo .groupFunc .funcTitle span {color:#5ba1df;}
.groupInfo .groupFunc .btns {display:flex; justify-content:flex-start; align-items:center; gap:10px;}
.groupInfo .groupFunc .btns a {display:inline-block; padding:8px 16px;}
.groupInfo .groupFunc .btns a {background:#FFF; color:#222; font-size:14px; font-weight:500; border:1px solid #ccc;}
.groupInfo .groupFunc .btns a.btnAddMem {background:#FFF; color:#222; }
.groupInfo .groupFunc .btns a.btnMemDel {background:#f1f1f1; color:#222;}

.memList {position:relative;}
.memList ul {display:flex; justify-content:flex-start; align-items:center;}
.memList ul li {text-align:center; padding:8px 0; box-sizing:border-box; font-size:14px; font-weight:500; color:#222; text-align:center; flex:0 0 auto;}
.memList ul li em {font-size:12px; color:#2CB6DC; font-style:normal; display:block;}
.memList .tHead {background:#eef6ff; border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
.memList .tHead li {font-weight:600;}
.memList .tBody {padding:6px 0; border-bottom:1px dashed #ccc;}
.memList ul li.chk {width:60px; text-align:center;}
.memList ul li.name {width:15%;}
.memList ul li.phone {width:15%;}
.memList ul li.course {width:15%;}
.memList ul li.gift {width:15%;}
.memList ul li.additem {width:calc(45% - 250px);}
.memList ul li.edit {width:140px;}
.memList ul li .item {display:none;}

.btnArea {display:flex; justify-content:center; align-items:center; margin:30px 0; gap:10px;}
.btnArea button.btnConfirm {padding:15px 25px 12px; line-height:1;color:#FFF; font-size:18px; font-weight:700;border:1px solid #2CB6DC;  background:#2CB6DC; border-radius:100px;}
.btnArea button.btnSave {padding:15px 25px 12px; line-height:1;color:#FFF; font-size:18px; font-weight:700; border:1px solid #2CB6DC;background:#2CB6DC; border-radius:100px;}
.btnArea button.btnCancel {padding:15px 25px 12px; line-height:1;color:#666; font-size:18px;border:1px solid #ccc; font-weight:700; background:#FFF; border-radius:100px;}
.btnArea button em {font-size:16px; display:inline-block; margin-left:5px; font-style:normal;}
.btnArea button em img{vertical-align:middle}

.dim {position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.7); z-index:1000; display:none;}
.groupPop {position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); width:96%; max-width:768px; max-height:90%; overflow:hidden; overflow-y:auto; padding:15px; background:#FFF; z-index:2000; display:none;}
.groupPop .gpTitle {padding:14px 20px; background:#444; color:#FFF; font-size:16px; font-weight:600; position:sticky; left:0; top:0; z-index:200;}
a.btnEdit {display:inline-block; background:#444; color:#FFF; font-size:12px; font-weight:500; padding:6px 12px; border-radius:4px;}
a.btnEdit em {display:block; font-size:12px !important; font-weight:400 !important; color:#FFF !important;}
a.btnDel {display:inline-block; background:#444; color:#FFF; font-size:12px; font-weight:500; padding:6px 12px; border-radius:4px;}
a.btnClose {position:absolute; right:5px; top:50%; transform:translate(0, -50%); width:40px; height:40px;}
a.btnClose:after {content:''; position:absolute; left:50%; top:50%; width:2px; height:18px; background:#FFF; transform:translate(-50%, -50%) rotate(45deg);}
a.btnClose:before {content:''; position:absolute; left:50%; top:50%; width:2px; height:18px; background:#FFF; transform:translate(-50%, -50%) rotate(-45deg);}

.payTable {display:block; margin-top:30px;}
.payTable .ptTitle {color:#222; font-size:18px; font-weight:600; margin-bottom:10px;}
.payTable .ptTitle em {font-style:normal; color:#666; font-size:14px;}
.payTable table {padding:0; margin:0; width:100%; table-layout:fixed;}
.payTable table col.item {width:160px;}
.payTable th, .payTable td {padding:14px; text-align:left; color:#222; border:1px solid #ddd;}
.payTable th {background:#f0f0f0; font-size:14px;}
.payTable th em {display:block; font-weight:400; font-size:12px;}
.payTable td {font-size:14px;}
.payTable td .costPrice {color:#2CB6DC; font-weight:600;}
.payTable td .finalPrice {color:#f4361e; font-weight:600;}
.payTable td label {margin-right:20px;}

.costPayment {display:block; padding:30px; text-align:center; background:#eff5ff; border:1px solid #adccff; border-radius:4px; margin-bottom:20px;}
.costPayment .cpTitle {color:#222; font-size:16px; font-weight:600; line-height:1.4; position:relative; display:flex; justify-content:center; align-items:center;}
.costPayment .cpTitle:before {content:'🔈'; font-size:20px;}
.costPayment .cpDesc {color:#666; font-size:16px; font-weight:600; line-height:1.4; margin-top:10px;}
.costPayment .cpDesc span {font-weight:900;}

.agTitle {color:#111111; font-size:18px; margin-bottom:10px; font-weight:600;}
.terms {display:block; height:300px; background:#ffffff; padding:35px 27px; font-size:14px; line-height:1.5; color:#111; overflow:hidden; overflow-y:auto;border:1px solid #C0C0C0}
.agreeSec {display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding:20px; gap:5px; }
.agreeSec .agreeTxt {color:#222; font-size:16px; font-weight:600;}
.agreeSec .agreeTxt em {display:block; color:#666; font-weight:400; font-size:14px;}
.agreeSec .chkB input + span {color:#222; font-weight:600; font-size:16px; background-position:left 5px;}
.agreeSec .chkB input + span em {display:block; font-weight:400; color:#666; font-size:14px;}

@media all and (max-width:1024px) {
	.agreeSec {flex-direction:column; justify-content:flex-end; align-items:flex-start;padding:20px 0; }
	.agreeSec .agreeTxt {width:100%; text-align:left; border-bottom:1px dashed #ccc; padding-bottom:10px; margin-bottom:10px;}
	.agreeSec .chkB {float:right;}
	.agreeSec .chkB input + span em {display:inline-block;}

	.pageTitle {margin-top:20px; padding:0 20px 0;}
	.pageTitle {color:#111; font-size:20px; margin-bottom:10px; line-height:1.2;  font-weight:800;font-family: 'Noto Sans KR';position:relative;display:table}
	.pageTitle em {font-size:14px; color:#666; margin-left:10px; font-style:normal;}
	.pageTitle:after{display:none;content:'';position:absolute;top:50%;margin-top:-3px;right:-15px;width:6px;height:6px;border-radius:50% 50%;background-color:#0364B3;}

	.joinForm {padding: 0;}
	.joinForm .formBlock {flex-direction:column; padding:20px 0; gap:16px;}
	.joinForm input[type="text"], .joinForm input[type="password"], .joinForm input[type="number"], .joinForm input[type="tel"] {padding:0 15px;}

	.joinForm .inputCont.address input.address1{max-width:100%;}
	.joinForm .inputCont.address input.address2{max-width:100%;}
	.joinForm .formBlock .inputCont input{max-width:100%;width:100%}

	.joinForm select {padding:0 10px;}
	.joinForm .formBlock .items {width:100%; display:flex; justify-content:flex-start; align-items:center;}
	.joinForm .formBlock .items span {display:inline-block; margin-left:10px;}
	.joinForm .formBlock .inputCont {width:100%;}
	.joinForm .inputCont.national select {width:100%;}
	.joinForm .inputCont.type select {width:100%;}
	.joinForm .formBlock .inputCont input {width:100%;}
	.joinForm .formBlock .inputCont.birth {display:flex; justify-content:flex-start; align-items:center; gap:10px;}
	.joinForm .inputCont.birth select:first-of-type {width:40%;}
	.joinForm .inputCont.birth select {width:30%; margin-right:0;}
	.joinForm .inputCont.group {display:flex; justify-content:flex-start; align-items:flex-start; gap:5px; flex-direction:column;}
	.joinForm .inputCont.group button {width:100%;}
	.joinForm .formBlock .inputCont.phone {display:flex; justify-content:flex-start; align-items:center; gap:10px;}
	.joinForm .formBlock .inputCont.phone input {margin-right:0; width:37%;}
	.joinForm .formBlock .inputCont.phone input:first-of-type {width:26%;}
	.joinForm .inputCont.course select {width:100%;}
	.joinForm .inputCont.address .post button {width:calc(100% - 130px);padding:0 10px;}

	.groupInfo .groupFunc {flex-direction:column; align-items:flex-end;}
	.groupInfo .groupFunc .funcTitle {text-align:left; margin-bottom:10px; width:100%;}
	.memList .tHead {display:none;}
	.memList {border-top:1px solid #ccc;}
	.memList ul {flex-direction:column; position:relative; flex-wrap:wrap; align-items:flex-start; padding-left:50px !important;}
	.memList ul li {width:100% !important; text-align:left;}
	.memList ul li .item {display:inline-block; width:120px; text-align:left;}
	.memList ul li em {display:inline-block; margin-left:5px;}
	.memList ul li.chk {position:absolute; left:0; top:5px; width:60px !important;}
	.memList ul li.edit {text-align:right;}

	.groupPop {padding:15px 15px; width:96%;}
	.payTable {display:block; margin-top:15px;}
	.payTable table col.item {width:120px;}
	.payTable th, .payTable td {font-size:13px;}
	.payTable td label {display:block; margin-bottom:10px;}
	.payTable td label:last-child {margin-bottom:0;}

	.costPayment {padding:20px;}
	.costPayment .cpTitle {font-size:14px;}
	.costPayment .cpDesc {font-size:12px; margin-top:3px;}

	.btnArea button.btnConfirm {border-radius:50px;}
	.btnArea button.btnSave {border-radius:50px;}
	.btnArea button.btnCancel {border-radius:50px;}
	.btnArea button em {font-size:12px; }

}