section > h2 {margin:80px auto 10px; width:976px; color:#8b8b8b;  font:normal 20px/20px 'NanumBarunGothic';}
section > h2 > img {margin-right:20px; vertical-align:bottom;}
.loginform{ position:relative; width:976px; padding:0; margin:20px auto; border:1px solid #dbdbdb}
.loginform > h2{ padding:0; margin:0; border-bottom:solid 2px #999; font:normal 27px/46px 'NanumBarunGothic'; vertical-align:bottom }
.loginform > h2 > img{ height:36px; vertical-align:top }
.loginform > .inputarea{ position:relative; width:400px; height:130px; margin:47px 38px 0 38px }
.loginform > .inputarea > P {position:absolute; left:0; font:normal 18px/20px 'NanumBarunGothic'; margin:0; font-weight:700; color:#080808; }
.loginform > .inputarea > P.join_btn {font:normal 18px/78px 'NanumBarunGothic'; width:275px; text-align:center; }
.loginform > .inputarea > label{ position:absolute; width:70px; height:36px; vertical-align:middle; font:normal 12px/36px Dotum }
.loginform > .inputarea > label[for=login_userid]{ left:0; top:40PX }
.loginform > .inputarea > label[for=login_userpw]{ left:0; top:81px }
.loginform > .inputarea > label[for=login_username]{ left:0; top:40PX; }
.loginform > .inputarea > label[for=login_userphone]{ left:0; top:81px }
.loginform > .inputarea > input{ position:absolute; width:182px; height:26px; padding:4px 8px; margin:0; vertical-align:middle }
.loginform > .inputarea > input#login_userid{ left:70px; top:40PX }
.loginform > .inputarea > input#login_userpw{ left:70px; top:81px }
.loginform > .inputarea > input#login_username{ left:70px; top:40PX }
.loginform > .inputarea > input#login_userphone{ left:70px; top:81px }
.loginform > .inputarea > button{ position:absolute; right:0; top:40PX; width:125px; height:78px; background:#0080e5; border:0; color:#FFF; font:500 20px/normal 'NanumBarunGothic'; cursor:pointer }
.loginform > .inputarea > button#join_btn{ top:0;}
.loginform > .loginoptions{ width:400px; margin:8px 38px 12px 38px; color:#666; text-align:left; font-size:0 }
.loginform > .loginoptions > input[type=checkbox]{ margin-left:10px; vertical-align:middle }
.loginform > .loginoptions > label{ margin-left:10px; vertical-align:middle; font:normal 11px/normal Dotum }
.loginform > .loginoptions > a{ margin-left:10px; vertical-align:middle; font-size:11px }
.loginform > .loginothers{ width:400px; margin:24px 38px; text-align:center }
.loginform > .loginothers > a{ display:inline-block; height:36px; padding:0 16px; border-radius:3px; color:#FFF; font:500 16px/36px 'NanumBarunGothic'; cursor:pointer }
.loginform > .loginothers > a.in_naver{ background-color:#07BB00 }
.loginform > .loginbanner{ position:absolute; left:500px; top:0; width:475px; height:100%; padding:0; margin:0; border-left:solid 1px #CCC; overflow:hidden; }
.loginform > .loginbanner > a{ display:block; width:100%; height:100%; background-color:#999 }

section > .login_footer {margin:20px auto 40px; padding:20px; width:936px; color:#666;  font:normal 12px/20px 'NanumBarunGothic'; border:1px solid #dbdbdb;}
section > .login_footer > div > span:after {content:"｜"; padding:0 5px; text-align:center;}
section > .login_footer > div > span:last-child:after {display:none}



.JOINFORM{ width:800px; margin:0 auto; font:normal 12px/normal Dotum; color:#333 }
.JOINFORM > h3{ padding:0; margin:30px 0 6px 0; font:bold 14px/normal Dotum }
.JOINFORM > .DOCUMENTS{ height:220px; padding:19px; border:solid 1px #CCC; overflow:auto; transition:height .1s ease-in-out, padding .1s ease-in-out, border .1s ease-in-out; line-height:1.6; color:#999 }
.JOINFORM > .DOCUMENTS > h1{ margin-top:30px; font-size:15px }
.JOINFORM > .DOCUMENTS > h1:first-child{ margin:0 }
.JOINFORM > .DOCUMENTS > p{ margin:4px 0 }
.JOINFORM > .DOCUMENTS > ol,
.JOINFORM > .DOCUMENTS > ul{ padding:0 0 0 16px }
.JOINFORM > .DOCUMENTS > ol > li,
.JOINFORM > .DOCUMENTS > il > li{ margin-bottom:4px }
.JOINFORM > .DOCUMENTS > ol > li > ol,
.JOINFORM > .DOCUMENTS > ol > li > ul{ padding:6px 0 6px 16px; font-size:11px; list-style-type:upper-alpha }
.JOINFORM > .DOCUMENTS:hover{ border-color:#09C; color:#666 }
.JOINFORM > .DOCUMENTS:hover > h1{ color:#333 }
.JOINFORM > .CHECKBOX{ margin-top:6px }
.JOINFORM > .CHECKBOX > input{ vertical-align:middle }
.JOINFORM > .CHECKBOX > input + label{ vertical-align:middle; color:#666 }
.JOINFORM > .DOCUMENTS.COLLAPSE{ height:0; padding:0; border:0 }
.JOINFORM > .DOCUMENTS.COLLAPSE + .CHECKBOX > input + label{ color:#06C; font-weight:bold }

.JOIN_NEXT_STEP{ padding:32px 12px; background-color:#FFF; text-align:center; font-size:0 }
.JOIN_NEXT_STEP > button{ padding:16px 24px; background-color:#dd0505; border:0; border-radius:9px; color:#FFF; font:500 17px/normal NanumBarunGothic; cursor:pointer }

.JOINFORM_PERSON_INFO{ width:420px; padding:0; margin:60px auto }
.JOINFORM_PERSON_INFO > fieldset{ display:block; padding:0; margin:0 0 24px 0; border:solid 1px #CCC }
.JOINFORM_PERSON_INFO > fieldset > div{ min-height:32px; padding:8px 12px; border-bottom:solid 1px #DDD; font-size:0 }
.JOINFORM_PERSON_INFO > fieldset > div:last-child{ border-bottom:0 }
.JOINFORM_PERSON_INFO > fieldset > div > span.VALUE{ display:block; height:32px; padding:0; margin:0; border:0; font:normal 12px/32px Dotum }
.JOINFORM_PERSON_INFO > fieldset > div > label{ display:none }
.JOINFORM_PERSON_INFO > fieldset > div > input{ height:32px; padding:0; margin:0; border:0; outline:0 }
.JOINFORM_PERSON_INFO > fieldset > div > select{ height:32px; padding:0; margin:0; border:solid 1px #CCC; outline:0 }
.JOINFORM_PERSON_INFO > fieldset > div > button{ height:32px; padding:0 8px; margin:0; background-color:#FFF; border:solid 1px #CCC; outline:0; color:#999; font:normal 12px/normal Dotum }
.JOINFORM_PERSON_INFO > fieldset > div > button:hover{ background-color:#F9F9F9; color:#666; cursor:pointer }
.JOINFORM_PERSON_INFO > fieldset > div > p{ display:none; padding:0; margin:6px 0 0 0; font:normal 11px/normal Dotum; color:#666 }
.JOINFORM_PERSON_INFO > fieldset > div > p.SHOW{ display:block }
.JOINFORM_PERSON_INFO > fieldset > div > p.S01{ color:#E11 }
.JOINFORM_PERSON_INFO > fieldset > div > p.S02{ color:#06C }
.JOINFORM_PERSON_INFO > fieldset > div > p.S01{ color:#093 }
.JOINFORM_PERSON_INFO > .CHECKBOX{ margin-top:6px; font:normal 12px/normal Dotum }
.JOINFORM_PERSON_INFO > .CHECKBOX > input{ vertical-align:middle }
.JOINFORM_PERSON_INFO > .CHECKBOX > input + label{ vertical-align:middle; color:#666 }

.JOINFORM_PERSON_INFO #INFO_ID{ width:100% }
.JOINFORM_PERSON_INFO #INFO_PW{ width:100% }
.JOINFORM_PERSON_INFO #INFO_PW_CHECK{ width:100% }
.JOINFORM_PERSON_INFO #INFO_NAME{ width:100% }
.JOINFORM_PERSON_INFO #INFO_MAIL{ width:100% }
.JOINFORM_PERSON_INFO #INFO_ADDRESS1{ width:304px; margin-right:8px }
.JOINFORM_PERSON_INFO #BTN_SEARCH_ADDRESS{ width:82px }
.JOINFORM_PERSON_INFO #INFO_MOBILE1{ width:82px; margin-right:8px }
.JOINFORM_PERSON_INFO #INFO_MOBILE2{ width:192px; margin-right:8px }
.JOINFORM_PERSON_INFO #INFO_MOBILE2::-webkit-inner-spin-button{ -webkit-appearance : none }
.JOINFORM_PERSON_INFO #BTN_RECIVE_AUTH{ width:104px }
.JOINFORM_PERSON_INFO #INFO_AUTH_NUMBER{ width:282px; margin-right:8px }
.JOINFORM_PERSON_INFO #BTN_CONFIRM_AUTH{ width:104px }
.JOINFORM_PERSON_INFO #BTN_JOIN_EXECUTE{ width:100%; height:48px; margin-top:24px; background-color:#F03E3E; border:0; border-radius:8px; color:#FFF; font:700 15px/normal NaumBarunGothic; cursor:pointer; outline:0 }
.JOINFORM_PERSON_INFO #BTN_JOIN_EXECUTE:hover{ border:solid 2px #C11 }