@charset "utf-8";
/*CSS Document*/
/* reset css */
body {margin:0; padding:0; font-family:"돋움"; font-size:12px;}
div, ul, ol, li, dl, dt, dd, form, fieldset, select, input, button, h1, h2, h3, h4, h5, h6, p, blockquote, iframe, th, td {margin:0; padding:0;}
em { font-style:normal; }
img { border:0; vertical-align:middle;}
li { list-style:none; }
button { background:transparent; cursor:pointer; vertical-align:middle; border:none; margin:0; }
legend, caption{display:none;}


/* 리셋 추가
------------------------------------------------------------------------------------------------------------*/
body, table, th, td, input, select, textarea, div{font-family:"돋움",'Dotum',Helvetica; font-size:12px; color:#333333;}
html{overflow-y:scroll;}
img, fieldset{border:0 none;}
ol, ul, li{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
button{border:0 none; padding:0; margin:0; background:transparent; *overflow:visible; cursor:pointer;}
button::-moz-focus-inner{border:0; padding:0;}
label{cursor:pointer;}
input{border:0; padding:0; margin:0;}
a:link{color:#333333; text-decoration:none;}
a:visited{color:#333333; text-decoration:none;}
a:hover{color:#9046cf; text-decoration:none;}
a:active{color:#333333; text-decoration:none;}



#newmembership_myBG{background:#f4f4f4;}


/* 공통 레이아웃
------------------------------------------------------------------------------------------------------------*/
#Wrap{width:570px; margin:0 auto 0; padding:65px 0 100px;}
#Wrap {_height:1%;} /* IE6 및 하위 버전 브라우저 대응 Hack */
*:first-child+html #Wrap {height:1%;} /* IE7 대응 Hack */
#Wrap:after {content:" "; display:block; clear:both; height:0; visibility:hidden;} /* 표준계열 브라우저에 대응하는 float 해제용 가상 엘리먼트의 생성 */ 

/* 상단 탭 */
#join_step{overflow:hidden;}
#join_step li{float:left; width:190px; height:60px; background-image:url(img/tab.jpg); background-repeat:no-repeat;}
#join_step li.step1{background-position:0 0;}
#join_step li.step2{background-position:-190px 0;}
#join_step li.step3{background-position:-380px 0;}
#join_step li.step1.on{background-position:0 -60px;}
#join_step li.step2.on{background-position:-190px -60px;}
#join_step li.step3.on{background-position:-380px -60px;}

/* 박스 */
.boxwrap{margin-top:10px;}
.boxwrap .topbg{height:50px; background:url(img/box.png) center top no-repeat;}
.boxwrap .midbg{background:url(img/box_bg.gif) center top repeat-y; padding:0 55px;}
.boxwrap .footbg{height:50px; background:url(img/box.png) center bottom no-repeat;}
.boxwrap .inner{padding:0 55px;}


/* 푸터 */
#Footer{text-align:center; width:570px; margin:40px auto 0;}
#Footer div a{display:inline-block; color:#666; padding:0 20px; background:url(img/l.gif) left 1px no-repeat;}
#Footer div a.first{background:none;}
#Footer a.join{position:relative;}
#Footer a.join strong{position:absolute; left:100px; top:-6px; width:80px; font-weight:normal; padding:5px 7px; color:#711eda; border:1px solid #ccc; background:#fff; display:none;}
#Footer a.join:hover strong{display:block;}
#Footer small{display:block; text-align:center; font-size:11px; color:#666; padding:15px 0 100px;}






/* 회원가입_01약관동의
------------------------------------------------------------------------------------------------------------*/
.join_txtbox{height:25px; padding:4px 0; background:#ebebeb; border:1px solid #dedede; text-align:center;}
.join_txtbox b{display:inline-block; padding:5px 7px 0 0;}

.agree_tit{height:25px;}
.agree_tit b{display:inline-block; padding:4px 7px 0 0;}

.textarea1{position:relative; width:568px; height:178px; padding:1px 1px 2px 1px; background:url(img/textarea_bg.png) left top no-repeat;}
.textarea1 div{height:138px; padding:20px; overflow-y:scroll; color:#4c4c54; line-height:1.6; letter-spacing:-0.03em;}
.textarea1 ul{position:absolute; left:0; top:-35px; overflow:hidden;}
.textarea1 ul li{float:left;}
.textarea1 ul li a{display:block; text-align:center; width:190px; height:23px; background:url(img/l.gif) right 50% no-repeat #ebebeb; color:#4c4c54; letter-spacing:-0.05em; padding:12px 0 0 0;}
.textarea1 ul li a.last{background-image:none;}
.textarea1 ul li a.on{background:#fff; color:#333; font-weight:bold; width:188px; border-top:1px solid #dcdfe2; border-right:1px solid #dcdfe2; border-left:1px solid #dcdfe2;}





/* 회원가입_02기본정보입력
------------------------------------------------------------------------------------------------------------*/
#input_tab{width:460px; height:60px; display:block; padding-bottom:35px;}
#input_tab li{position:relative; float:left; background-image:url(img/input_tab.gif); background-repeat:no-repeat;}
#input_tab li.inputtab1{background-position:0 0;}
#input_tab li.inputtab2{background-position:-230px 0;}
#input_tab li a{display:block; width:230px; height:60px;}
#input_tab li.inputtab1.on{background-position:0 -60px;}
#input_tab li.inputtab2.on{background-position:-230px -60px;}
#input_tab li.inputtab2 .txtballoon{left:240px; top:4px;}

.join_codeinput{}
.join_codeinput li{position:relative; width:460px; padding:0 0 20px 0; display:block;}
.join_codeinput li input{float:left;}
.join_codeinput li button{float:right;}
.join_codeinput li p{clear:both; padding-top:19px;}

/* 라인 */
hr.line{margin:20px 0 40px; background:#ccc; height:2px; border:0 none;}

.myinfo{}
.myinfo li{position:relative; padding-bottom:10px;}


/* 내정보 수정 전 비밀번호 확인
------------------------------------------------------------------------------------------------------------*/
.my_info{}
.my_info li{position:relative; width:313px; min-height:50px; padding:0 0 10px 147px;}
.my_info li {_height:1%;} /* IE6 및 하위 버전 브라우저 대응 Hack */
*:first-child+html .my_info li {height:1%;} /* IE7 대응 Hack */
.my_info li:after {content:" "; display:block; clear:both; height:0; /*visibility:hidden;*/} /* 표준계열 브라우저에 대응하는 float 해제용 가상 엘리먼트의 생성 */ 
.my_info div.subject{position:absolute; left:0; top:0; width:107px; padding:21px 0 0 0; text-align:right;}
.my_info div.subject.modify{padding:0!important;}
.my_info div.cont{}
.my_info div.cont {_height:1%;} /* IE6 및 하위 버전 브라우저 대응 Hack */
*:first-child+html .my_info div.conti {height:1%;} /* IE7 대응 Hack */
.my_info div.cont:after {content:" "; display:block; clear:both; height:0; /*visibility:hidden;*/} /* 표준계열 브라우저에 대응하는 float 해제용 가상 엘리먼트의 생성 */ 
.my_info div.cont font{display:block; min-height:30px; padding:20px 0 0 0; font-size:16px; color:#333; font-weight:bold;}
.my_info div.cont .left{float:left;}
.my_info div.cont .right{float:right;}
.my_info div.cont p{clear:both; padding-top:20px;}
.my_info div.cont button.left{width:auto!important;}

.my_info.info2{} /* subject 가로 140px */
.my_info.info2 li{position:relative; width:280px; min-height:50px; padding:0 0 10px 180px;}
.my_info.info2 div.subject{position:absolute; left:0; top:0; width:140px; padding:21px 0 0 0; text-align:right;}



/* 공통
------------------------------------------------------------------------------------------------------------*/
/* 상단 타이틀 */
h2#join{height:48px; background:url(img/join_tit.png) center top no-repeat;}
h2#my{height:48px; background:url(img/my_tit.png) center top no-repeat; margin-bottom:30px;}

/* 체크박스 */
.custom_checkbox {position:relative;}
.custom_checkbox label {position:absolute; left:0; height:25px; padding:0 0 0 30px; background:url(img/checkbox.png) 0 0 no-repeat;}
.custom_checkbox input[type="checkbox"]:checked + label {background-position:0 -25px;}

/* 버튼 가운데 두개 */
.btnwrap{text-align:center;}
.btnwrap button{display:inline-block; margin-left:10px;}
.btnwrap button.first{margin-left:0;}

/* 인풋박스 */
.meminput{height:50px!important; padding:0 20px!important; margin:0; line-height:50px; color:#999999; font-size:16px; letter-spacing:-0.05em; font-weight:bold;}

.input163{width:123px!important; background:url(img/input.png) 0 0 no-repeat;}
.input163:focus{background-position:0 -50px;}
.input163.fail{background-position:0 -100px;}
.input310{width:270px; background:url(img/input.png) 0 -150px no-repeat;}
.input310:focus{background-position:0 -200px;}
.input310.fail{background-position:0 -250px;}
.input460{width:420px; background:url(img/input.png) 0 -300px no-repeat;}
.input460:focus{background-position:0 -350px;}
.input460.fail{background-position:0 -400px;}
 
/* 셀렉트박스 */
.tricselect{position:relative; padding:0 20px; height:50px; line-height:50px; color:#999; font-size:16px; letter-spacing:-0.05em; font-weight:bold; display:block; background-image:url(img/select.png); background-repeat:no-repeat; z-index:100;}

.tricselect310{width:270px; background-position:0 0;}
/*.tricselect310.fail{background:url(img/input.png) 0 -300px no-repeat; background-position:0 -250px;}*/
.tricselect310.on{background-position:0 -50px;}
.tricselect310.on .txtballoon{display:block;}
.tricselect310 dl{width:308px;}
.tricselect460{width:420px; background-position:0 -100px;}
.tricselect460.on{background-position:0 -150px;}
.tricselect460.fail{background:url(img/input.png) 0 -300px no-repeat; background-position:0 -400px;}
.tricselect460 dl{width:458px;}

.tricselect dl{position:absolute; left:0; top:0px; padding:10px 0; margin-top:48px;  background:#fff; border:1px solid #9046cf; z-index:99!important; display:none;}
.tricselect.on dl{display:block!important;}
.tricselect dl dd{line-height:40px; cursor:pointer; padding:0 20px;}
.tricselect dl dd:hover{background:#f7f7f7;}

/* 우측 텍스트박스 */
.txtballoon{position:absolute; left:470px; width:320px; top:0; height:50px; overflow:hidden;}
.txtballoon span{float:left; width:30px; height:50px; background:url(img/txtbox.png) left top no-repeat;}
.txtballoon b{float:left; height:35px; text-align:left; padding:15px 20px 0 0; background:url(img/txtbox.png) right top no-repeat; color:#fff; font-weight:bold; font-size:15px; letter-spacing:-0.08em;}
.txtballoon.line2{height:70px;}
.txtballoon.line2 span{height:70px; background-image:url(img/balloon2.png);}
.txtballoon.line2 b{height:55px; padding-top:15px; background-image:url(img/txtbox2.png); line-height:1.4;}



.top5{margin-top:5px;}
.top6{margin-top:6px;}
.top10{margin-top:10px;}
.top15{margin-top:15px;}
.top20{margin-top:20px;}
.top25{margin-top:25px;}
.top30{margin-top:30px;}
.top35{margin-top:35px;}
.top40{margin-top:40px;}
.top50{margin-top:50px;}
.top55{margin-top:55px;}
.top60{margin-top:60px;}
.top70{margin-top:70px;}
.top80{margin-top:80px;}
.top90{margin-top:90px;}

.left5{margin-left:5px;}
.left10{margin-left:10px!important;}
.left15{margin-left:15px;}
.left20{margin-left:20px;}
.left25{margin-left:25px;}
.left30{margin-left:30px;}
.left35{margin-left:35px;}
.left40{margin-left:40px;}
.left50{margin-left:50px;}
.left60{margin-left:60px;}
.left70{margin-left:70px;}
.left80{margin-left:80px;}
.left90{margin-left:90px;}

.center{text-align:center;}
.right{text-align:right;}
.left{text-align:left;}

.clear{clear:both;}