/* BASIC css start */
/* BASIC css start */
/* button */
.cbtn { display: inline-block; font-size: 11px; color: rgb(0, 0, 0); min-width: 98px; height: 31px; line-height: 32px; border: 1px solid rgb(0, 0, 0); text-align: center; transition: all 0.3s ease 0s; }
.cbtn.form { }
.cbtn.form.action { background-color: rgb(0, 0, 0); color: rgb(255, 255, 255); }
.cbtn.form:hover { background-color: rgb(0, 0, 0); color: rgb(255, 255, 255); }
.cbtn.form.action:hover { background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); }
.btnArea { }
.btnArea::after { content: ""; display: block; clear: both; }
.btnArea .left { float: left; width: 50%; }
.btnArea .right { float: right; width: 50%; }
.btnArea .center { text-align: center; }
.cateTit_v2.join { padding: 0px 0px 48px; text-align: center; border-bottom: none; margin: 0px; }
.cateTit_v2.join .title { font-size: 22px; color: rgb(28, 27, 27); font-weight: 400; }
div#join_test { padding: 54px 0px 100px; }
#join_test .page-body { width: 716px; margin: 0px auto; }
#join_test .join-form { margin-bottom: 12px; }
#join_test .join-form li { position: relative; padding: 0px; background: rgb(255, 255, 255); color: rgb(0, 0, 0); margin-bottom: 32px; }
#join_test .join-form li label { font-size: 12px; font-weight: 500; color: rgb(136, 136, 136); display: block; padding-bottom: 6px; }
#join_test .join-form li label font { color: rgb(14, 89, 139); }
#join_test .join-form li .txt-input { width: 100%; height: 36px; line-height: 36px; padding: 0px; margin: 0px; font-size: 13px; font-weight: 500; color: rgb(28, 27, 27); border-width: 0px 0px 1px; border-top-style: initial; border-right-style: initial; border-left-style: initial; border-top-color: initial; border-right-color: initial; border-left-color: initial; border-image: initial; border-bottom-style: solid; border-bottom-color: rgb(136, 136, 136); }
#join_test .join-form li > p { margin-top: 5px; font-size: 11px; color: rgb(136, 136, 136); font-weight: 300; }
#join_test .join-form li .input-radio { width: 14px; height: 14px; margin: -2px 0px 0px; padding: 0px; vertical-align: middle; }
#join_test .join-form li .btn { display: block; position: absolute; top: 6px; right: 8px; width: 83px; height: 34px; line-height: 36px; font-size: 14px; font-weight: bold; color: rgb(255, 255, 255); text-align: center; }
#join_test .join-form li.birth::after { clear: both; display: block; content: ""; }
#join_test .join-form li.birth { }
#join_test .join-form li.birth .birth_txt { width: 150px; margin-left: 0px; font-size: 13px; font-weight: bold; text-align: left; color: rgb(5, 73, 187); padding-bottom: 5px; }
#join_test .join-form li.birth dl dd { position: relative; float: left; width: 31.8%; margin-left: 2.3%; font-size: 14px; font-weight: bold; }
#join_test .join-form li.birth dl dd:first-child { margin-left: 0px; }
#join_test .join-form li.birth dl.type2 ul li { margin: 0px; padding: 0px; border: 0px; }
#join_test .join-form li.birth dl.type2 ul li .txt-input { left: 0px; width: 90%; }
#join_test .join-form li.gender { }
#join_test .join-form li.gender label { margin-right: 30px; }
#join_test .join-msg li label { font-size: 14px; font-weight: bold; }
#join_test .join-msg li { height: 18px; line-height: 18px; padding-left: 2px; color: rgb(153, 153, 153); }
#join_test .bottom-btn { padding: 40px 0px; text-align: center; }
#join_test .bottom-btn a { display: block; height: 58px; line-height: 62px; margin: 0px auto; font-weight: bold; color: rgb(255, 255, 255); font-size: 24px; text-align: center; letter-spacing: -1px; }
.privercy-contract { width: 604px; display: inline-block; box-sizing: border-box; border: 1px solid #1c1b1b; margin-bottom: 40px; padding-right: 6px; box-sizing: border-box;}
.new-privercy-contract { overflow: hidden; clear: both; }
#sms_btn, .sms_num { position: absolute; top: 0px; left: 323px; }
#join_test .tb-l { text-align: left; }
#join_test .tb-c { text-align: center; }
#join_test .pl-30 { padding-left: 5px !important; }
#join_test .pl-6 { padding-left: 6px; }
#join_test .pt-10 { padding-top: 10px; }
#join_test .pb-10 { padding-bottom: 10px; }
#join_test .ml-30 { margin-left: 0px !important; }
#join_test .p10 { padding: 0px 24px !important; font-weight: 400;color: #1c1b1b;}
#join_test .input-cbox { width: 16px; height: 16px; padding: 0px; margin-bottom: 0px; margin-left: 0px; vertical-align: middle; margin-top: -3px !important; margin-right: 4px !important; }
#join_test .new-btn-area { text-align: center; margin: 40px 0px 144px; border-bottom: none !important; padding-bottom: 0px !important; }
#join_test .new-btn-area a { transition: all 0.3s ease 0s; width: 100%; height: 48px; font-size: 14px; line-height: 48px; display: inline-block; box-sizing: border-box; border: 1px solid rgb(28, 27, 27); background: rgb(28, 27, 27); color: rgb(255, 255, 255); text-align: center; font-weight: 500; }
#chkwrap { border-radius: 0px; border: 1px solid rgb(245, 245, 245) !important; background: rgb(245, 245, 245) !important; }
#chkwrap .all-chk { font-weight:400!important; font-size: 14px; font-weight: 500; border-bottom: 1px solid rgb(222, 222, 222); margin: 0px 24px; height: 52px !important; line-height: 52px !important; padding-left: 0px !important; color: rgb(28, 27, 27) !important; }
#chkwrap .all-chk .input-cbox { padding: 0px; margin: -3px 0px 0px; vertical-align: middle; width: 20px !important; height: 20px !important; }
#chkwrap .cont ul::after { clear: both; content: ""; display: block; }
#chkwrap .cont ul { padding-bottom: 14px; width: auto !important; }
#chkwrap .cont ul li { float: left; padding-left: 0px; padding-top: 19px; margin-right: 40px; width: auto !important; line-height: 0 !important; }
#chkwrap .cont ul li.w240 { width: 240px; padding-left: 0px; }
#chkwrap .cont ul li a { cursor: pointer; display: inline-block; text-align: center; color: rgb(28, 27, 27); box-sizing: border-box; letter-spacing: -0.045em; width: 46px !important; height: 18px !important; line-height: 18px !important; font-weight: 500 !important; font-size: 9px !important; border: 1px solid rgb(221, 221, 221) !important; background: rgb(245, 245, 245) !important; box-sizing: border-box;margin-top: -4px!important;}
#chkwrap .cont strong { font-weight: 400; color: rgb(93, 93, 93) !important; }
#chkwrap .cont label { margin-right: 4px; font-size: 12px; font-weight: 400 !important; color: rgb(28, 27, 27) !important; }
#chkwrap .cont label strong { font-weight: 400; color: rgb(28, 27, 27) !important; }
#chkwrap .cont .marketing { line-height: 18px; padding-bottom: 25px; color: rgb(93, 93, 93); padding-left: 0px !important; border-top: none !important; }
#chkwrap .cont .marketing .mk-wrap { margin-bottom: 27px; padding-top: 4px; height: auto !important; line-height: 1 !important; }
h4.tit { width: 102px; box-sizing: border-box; color: rgb(136, 136, 136); display: inline-block; vertical-align: top; margin-top: 0px !important; margin-bottom: 18px !important; font-size: 12px !important; font-weight: 500 !important; padding-left: 0px !important; width: 54px;margin-right: 55px;}
#join_test .privercy-contract textarea { width: 100%; height: 100%; box-sizing: border-box; line-height: 1.5; border: none;  color: rgb(28, 27, 27); resize: none; font-size: 11px; outline: none; white-space: pre-wrap; padding: 20px 30px; }
#join_test .privercy-contract textarea::-webkit-scrollbar-track { border-radius: 0px; background-color: rgb(255, 255, 255); }
#join_test .privercy-contract textarea::-webkit-scrollbar { width: 2px; background-color: rgb(255, 255, 255); }
#join_test .privercy-contract textarea::-webkit-scrollbar-thumb { border-radius: 0px; background-color: rgb(28, 27, 27); }
#join_test .contract-tbl { width: 604px; border-spacing: 0px; border-collapse: collapse;  }
#join_test .contract-tbl th, #join_test .contract-tbl td { border: 1px solid rgb(224, 224, 224); text-align: center; }
#join_test .contract-tbl th { background: rgb(252, 252, 252); }
#join_test .contract-tbl th div { height: 41px; line-height: 43px; font-size: 11px;color: #1c1b1b;}
#join_test .contract-tbl tbody th { font-weight: normal; }
#join_test .btm-msg { padding-top: 30px; line-height: 18px; }
.join-footer { text-align: center; padding-top: 15px; }
.join-footer .cbtn.form { width: 288px; height: 58px; line-height: 58px; font-size: 16px; margin: 0px 5px; }
#join_test .new-btn-area a:hover { background: #fff; color: #1c1b1b; }
h1.input_title { color: rgb(28, 27, 27); font-size: 14px; font-weight: 500; margin-top: 26px; margin-bottom: 8px; padding-left: 4px; }
#join_test .input-cbox:checked { background-size: 11px 8px !important; }
#chkwrap .all-chk .input-cbox:checked { background-size: 14px 10px !important; }
#join_test .btm-msg { padding: 0;padding-top: 14px;  text-align: left;width: 604px;;float: right;font-size: 11px;color: #888;font-weight: 400;letter-spacing: -0.045em;margin-top: 0;display: none;}
.join-footer { text-align: center; padding-top: 15px; }
.join-footer .cbtn.form { width: 288px; height: 58px; line-height: 58px; font-size: 16px; margin: 0px 5px; }
.birth .sbToggle { background: url("/design/surflo/pc/surflo_select_arrow.png") center center no-repeat; height: 36px; width: 21px; }
.birth .sbHolder { margin-top: 0px; height: 36px; line-height: 36px; border-top: none; border-right: none; border-left: none; border-image: initial; background: rgb(255, 255, 255); box-sizing: border-box; z-index: 9; width: 100%; font-weight: 500; font-size: 13px; border-bottom: 1px solid #1c1b1b; }
.birth .sbSelector { height: 36px; line-height: 38px; padding-left: 0px; box-sizing: border-box; color: rgb(28, 27, 27); font-size: 13px; left: 0px; text-indent: 5px; }
.sbOptions { top: 36px !important; max-height: 257px !important; }
.sbOptions li { height: 0px !important; padding: 5px !important; }
.sbOptions a { padding-left: 0px; font-size: 13px !important; color: rgb(28, 27, 27) !important; }
#join_test .join-form .sbOptions li {margin: 0;height: fit-content!important;}

#join_test .join-form .sbOptions li a {font-weight: 400;}
.sbOptions::-webkit-scrollbar { width: 3px; } 
.sbOptions::-webkit-scrollbar-track { background-color: #fff; border-radius: 100px; } 
.sbOptions { scrollbar-color: #1c1b1b #fff; } 
.sbOptions::-webkit-scrollbar-thumb { background:#1c1b1b; }

#join_test .join-form li.gender > div { padding: 18px 8px; border-top: 1px solid rgb(221, 221, 221); border-bottom: 1px solid rgb(221, 221, 221); }
#join_test .join-form li.gender > div label { float: left; font-size: 12px; color: rgb(28, 27, 27); font-weight: 500; margin-right: 176px; }
#join_test .join-form li.gender > div label:last-of-type {margin-right: 0;margin-left: 37px;}
#join_test .join-form li.gender > div label input { margin-right: 3px; }
#join_test .join-msg li.age_chk_box { padding: 24px; background: rgb(245, 245, 245); color: rgb(28, 27, 27); font-size: 12px; font-weight: 400; font-family: "Noto Sans KR"; }
#join_test .join-msg li.age_chk_box label { font-weight: 400; font-size: 12px; line-height: 16px; }
#join_test .join-msg li.age_chk_box label input[type="checkbox"] { margin-top: -0.5px; margin-right: 2px; }
ul.join-msg { margin-bottom: 47px; }
#join_test .join-msg li.age_msg { font-size: 11px; color: rgb(136, 136, 136); font-weight: 500; padding-top: 10px; }
#chkwrap .cont .marketing .mk-wrap label input[type="checkbox"] { margin-top: -3px !important; }
#chkwrap .cont .marketing .txt { font-size: 11px; color: rgb(136, 136, 136); font-weight: 400; }
#chkwrap .cont .marketing .mk-wrap label input[type="checkbox"] { margin-top: -3px !important; }
#chkwrap .cont .marketing .txt, #chkwrap .cont .marketing .txt strong { font-size: 11px !important; color: rgb(136, 136, 136) !important; font-weight: 400 !important; }
#chkwrap .cont .marketing .txt br:first-of-type { display: none; }
.right_tbl {display: inline-block;width: 604px;display: none;}

#join_test .contract-tbl:nth-of-type(2) th, #join_test .contract-tbl:nth-of-type(2) td {border-top: none;}

.persnal_info_box {float: left;width: 84%;}

.new-privercy-contract h4.tit {float: left;}

.persnal_info_box .top_box {font-size: 11px;color: #1c1b1b;font-weight: 700;padding-bottom: 10px;margin-top: 20px;}

.persnal_info_box .top_box:first-of-type {margin-top: 0; padding-top:0;}

.persnal_info_box>div>div {border-bottom: 1px solid #1c1b1b;font-size: 11px;color: #1c1b1b;font-weight: 400;overflow: hidden;padding: 12px 0;}

.persnal_info_box>div>div span {display: inline-block;width: 19%;float: left;height: 100%;}

.persnal_info_box>div {width: 48.5%;float: left;}

.persnal_info_box>div:first-of-type {margin-right: 3%;}

.persnal_info_box>div>div span:last-of-type {width: 80%;}
/* BASIC css end */

/* BASIC css end */


/* BASIC css end */