/* 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: 30px 15px 70px; }
#join_test .page-body { width: 100%; 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: 13px; 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: #1c1b1b; }
#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: 100%; display: inline-block; box-sizing: border-box; border: 1px solid rgb(221, 221, 221); margin-bottom: 40px; padding-right: 6px; }
.new-privercy-contract { overflow: hidden; clear: both; width: 100%;}
#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; border-radius: 50%!important;}
#join_test .new-btn-area { text-align: center; margin: 20px 0px 50px; 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; }
#terms_agree { border-radius: 0px; border: 1px solid rgb(245, 245, 245) !important; background: rgb(245, 245, 245) !important; }
#terms_agree .terms-agree dt { font-size: 14px; font-weight: 400!important; border-bottom: 1px solid rgb(222, 222, 222)!important; margin: 0px 15px; height: 40px !important; line-height: 40px !important; padding-left: 0px !important; color: rgb(28, 27, 27) !important; margin-top: 7px!important;}
#terms_agree .terms-agree dt .input-cbox { padding: 0px; margin: -3px 0px 0px; vertical-align: middle;   }
#terms_agree .cont ul::after { clear: both; content: ""; display: block; }
#terms_agree .cont ul { padding-bottom: 14px; width: auto !important; }
#terms_agree .terms-agree dd .lst li { float: left; padding-left: 0px; padding: 0!important;padding-top: 19px!important; margin-right: 40px; width: 100%!important; line-height: 0 !important; }
#terms_agree .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: 40px !important; height: 16px !important; line-height: 16px !important; font-weight: 500 !important; font-size: 9px !important; border: 1px solid rgb(221, 221, 221) !important; background: rgb(245, 245, 245) !important; }
#chkwrap .cont strong { font-weight: 400; color: rgb(93, 93, 93) !important; }
#terms_agree .terms-agree label { margin-right: 1px; font-size: 12px; font-weight: 400 !important; color: rgb(28, 27, 27) !important; }
#terms_agree .terms-agree label strong { font-weight: 400!important; 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: 10px !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: 1px solid rgb(255, 255, 255); border-radius: 10px; color: rgb(28, 27, 27); resize: none; font-size: 11px; outline: none; white-space: pre-wrap; padding: 15px; }
#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; }

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; }
#terms_agree .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;}
.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 rgb(136, 136, 136); }
.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 li.gender > div { padding: 18px 0; border-top: 1px solid rgb(221, 221, 221); border-bottom: 1px solid rgb(221, 221, 221); overflow: hidden;}
#join_test .join-form li.gender > div dd {float: left;}
#join_test .join-form li.gender > div label { padding-bottom:0px; font-size: 12px; color: rgb(28, 27, 27); font-weight: 500; margin-right: 15vw; }
#join_test .join-form li.gender > div label input { margin-right: 3px; }
#join_test .join-msg li.age_chk_box { padding: 18px 15px; 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-right: 2px; }
ul.join-msg { margin-bottom: 20px; }
#join_test .join-msg li.age_msg { font-size: 11px; color: rgb(136, 136, 136); font-weight: 500; padding-top: 10px; height: auto;line-height: 1.5;}
div#terms_agree .cont .marketing .mk-wrap label input[type="checkbox"] { margin-top: -3px !important; }
#terms_agree .terms-agree dd .txt { font-size: 11px; color: rgb(136, 136, 136); font-weight: 400; }
#terms_agree .cont .marketing .mk-wrap label input[type="checkbox"] { margin-top: -3px !important; }
#terms_agree .terms-agree dd .txt, #terms_agree .terms-agree dd .txt p { font-size: 11px !important; color: rgb(136, 136, 136) !important; font-weight: 400 !important; margin-top: 12px!important;line-height: 1.7!important;}
#terms_agree .terms-agree dd .txt p { margin-top: 1px!important; }
.right_tbl {display: inline-block;width: 604px;}

#join_test .contract-tbl:nth-of-type(2) th, #join_test .contract-tbl:nth-of-type(2) td {border-top: none;}
#join_test .join-form li.birth dl dd select {width: 100%;border: none;border-bottom: 1px solid #1c1b1b; padding:0; }

#join_test .join-form li .txt-input#email {width: 100%!important;}
div#terms_agree {}

#terms_agree .terms-agree dd .lst li a {text-decoration: none!important;margin-right: 10px;
    font-size: 12px;
    font-weight: 400 !important;
    color: rgb(28, 27, 27) !important;}

#terms_agree .terms-agree dd {border-bottom: none!important;padding: 0 0 15px!important;margin: 0 15px!important;}

#terms_agree input#ADemail_ {margin-left: 8px!important;}

#terms_agree .terms-agree dd .lst li label, #terms_agree .terms-agree dd .lst li .cont_open { float:left; line-height:20px; }
#terms_agree .terms-agree dd .lst li .cont_open {
    display:inline-block;
    font-size: 11px;
    line-height: 20px;
    height: 20px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    color: #1c1b1b;
    border: 1px solid #ddd;
    padding: 0 5px;
    
}

#terms_desc .terms-desc dd { display:block!important; }
.new-privercy-contract #terms_desc .terms-desc dt {padding: 0; font-weight: 400;color: #888; font-size: 14px; font-weight:500;border: none;}

.new-privercy-contract #terms_desc .terms-desc dt a {display: none;}

.new-privercy-contract #terms_desc .terms-desc dd {border: none;background: #fff;padding: 0;background: #fff;
    padding: 15px 10px;
    border: 1px solid #1c1b1b;
    box-sizing: border-box; padding-right:5px;}

.new-privercy-contract #terms_desc .terms-desc dd textarea {padding: 0;color: #1c1b1b;font-size: 11px;border: 1px solid #ddd;box-sizing: border-box;resize: none;height: 210px;border: none;text-align: left!important;}

.new-privercy-contract #terms_desc .terms-desc dd .sect {display: none;}
.persnal_info_box .top_box {font-size: 12px;color: #1c1b1b;font-weight: 700;padding-bottom: 10px;margin-top: 20px;}

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

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

.persnal_info_box>div span {display: inline-block;width: 17vw;float: left;}
.new-privercy-contract #terms_desc .terms-desc dd textarea::-webkit-scrollbar { width: 3px; } 
.new-privercy-contract #terms_desc .terms-desc dd textarea::-webkit-scrollbar-track { margin-right:10px; background-color: #fff; border-radius: 100px; } 
.new-privercy-contract #terms_desc .terms-desc dd textarea { scrollbar-color: #1c1b1b #fff; } 
.new-privercy-contract #terms_desc .terms-desc dd textarea::-webkit-scrollbar-thumb { background:#1c1b1b; }

.new-privercy-contract #terms_desc dl#termsCont2 dd { display:none!important; }

.new-privercy-contract #terms_desc .terms-desc dt {padding: 40px 0 0;}
/* BASIC css end */