member.css

간단설명

---

@charset "UTF-8";

/* 로그인  */
.signIn{padding-bottom:55px}
.signIn .login{width:250px;margin:0 auto;position:relative}
.signIn .login input[type='tel'],
.signIn .login input[type='text'],
.signIn .login input[type='password']{margin-bottom:10px}
.signIn .login .row.btns{margin-top:10px}
.signIn .login label{font-size:14px;margin-right:10px}
.signIn .login .historyID{display:none;width:228px;overflow-y:scroll;max-height:190px;position:absolute;top:139px;left:0;z-index:1;padding:7px 10px;background-color:#fff;border:1px solid #bfc2c6;font-size:14px}
.signIn .login .historyID ul li{padding:3px 0}
.signIn .login .historyID ul li > span, .signIn .login .historyID ul li > span > a{display:inline-block;width:100%}

.signIn .help{width:285px;padding:15px 0 20px;margin:0 auto;border-top:1px solid #e2e2e2}
.signIn .help .row.btns .col{padding-left:5px}
.signIn .help .row.btns .col:first-child{padding-left:0}
.signIn .help .row.btns .col .btn{padding:0 5px}
.signIn .help .guide li{margin-top:13px}

.signIn.default .login{position:relative;padding:100px 0 25px}
.signIn.default .login:after{content:'';display:inline-block;position:absolute;left:50%;top:23px;margin-left:-36px;width:71px;height:60px;background-image:url('/static/images/common/logo_blue_142x120.png');background-repeat:no-repeat;background-size:71px auto}

.signIn.registerSingIn .login{padding-bottom:44px}
.signIn.registerSingIn .help .guide li{margin-bottom:13px}
.signIn.registerSingIn .guide.account{padding:50px 10px 30px}

/* 회원가입 게이트 */
.registerGate{height:100vh}
.registerGate .join{text-align:center;box-sizing:border-box;width:100%;height:calc(100vh - 50px);min-height:100%;background-image:url('/static/images/contents/register_gate_bg.jpg');background-size:100% auto;background-repeat:no-repeat}
.registerGate .join .slogun{width:250px;margin:0 auto 37.5px}
.registerGate .join .slogun:before{content:'';display:inline-block;width:103px;height:87px;margin-bottom:15px;font:0/0 a;background-image:url('/static/images/contents/gate_slogun.png');background-size:103px auto;background-repeat:no-repeat}
.registerGate .join .slogun p{color:#fff;font-size:16px;line-height:1.5}
.registerGate .join .acenter{padding-bottom:20px}
.registerGate .join .btns{width:250px;margin:0 auto}
.registerGate .join .btns .btn{width:100%;margin-top:10px}
.registerGate .join .btns .btn:first-child{margin-top:0}
.registerGate .join .verticalCenter{min-height:100%;padding:30px 0;-webkit-box-sizing:border-box;box-sizing:border-box;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
    -webkit-box-orient:vertical;
     -moz-box-orient:vertical;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    font-family:sans-serif;
}
.registerGate .join .btns.cards{width:81.25%;margin:-17.5px auto 0;text-align:center}
.registerGate .join .btns .card{border:1px solid #ccc;background-color:#fff;border-radius:3px}
.registerGate .join .btns .card + .card{margin-top:10px}
.registerGate .join .btns .card .head{padding:7px 10px;color:#fff;background-color:#00b6f0}
.registerGate .join .btns .card .body{padding:10px}
.registerGate .join .btns .card .body small{display:block;margin-top:10px;line-height:1.2}
.registerGate .join .btns .card .btn{width:50%;margin-top:20px;padding:5px 30px;line-height:20px;font-size:13px;background-color:#336699}
.registerGate .join .iMembership{margin-top:10px;padding:15px 10px;background-color:#f6f6f8;border-radius:2px}
.registerGate .join .iMembership .title{display:block;margin-bottom:10px;font-size:14px}
.registerGate .join .iMembership .info{margin-top:10px;text-align:left}
.registerGate .join .iMembership .info li{color:#999}
.registerGate .join .iMembership .info li:after{background-color:#999}
.registerGate .join .iMembership .btn{margin-top:10px;padding:5px 30px;line-height:20px;font-size:12px;border-radius:2px}
.registerGate .guide{text-align:left;padding:10px 15px}
.registerGate .guide p{font-size:13px}
.registerGate .guide span{display:block;margin-top:5px;font-size:12px;color:#999}

.registerGate aside{height:72px;padding-top:15px;background-color:#fff;text-align:center;box-sizing:border-box}
.registerGate aside p{font-size:15px;color:#333}
.registerGate aside small{font-size:12px;color:#999}
.registerGate .language{ background-color:#fff;overflow:hidden}
.registerGate .language + .language{ margin-top:10px}
.registerGate .language .title{ padding:5px 15px;color:#00b6f0;font-size:15px;font-weight:bold}
.registerGate .languageSelect{ width:101%}
.registerGate .languageSelect:after{ content:'';display:block;clear:both}
.registerGate .languageSelect span:only-child{border:1px solid #e2e2e2}
.registerGate .languageSelect span{  float:left;display:table;box-sizing:border-box;width:33.3333%;margin-top:-1px;border-top:1px solid #e2e2e2;border-left:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2}
.registerGate .languageSelect span:nth-child(3n+1){ width:33.3334%;border-left:none}
.registerGate .languageSelect span:nth-child(3n+1):last-child{border-right:1px solid #e2e2e2}
.registerGate .languageSelect span a{ position:relative;display:table-cell;max-width:72px;padding:10px 25px 10px 15px;color:#333333;font-size:11px;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.registerGate .languageSelect span a:after{ content:'';display:inline-block;position:absolute;right:15px;top:15px;width:5px;height:9px;background-image:url('/static/images/common/icon_sprite.png');background-position:-195px 0;background-repeat:no-repeat;background-size:360px auto}
.registerGate .languageSelect span .stateFlag{display:none;position:absolute;left:15px;top:50%;margin-top:-9px}
@media all and (max-width:321px){
	.registerGate .languageSelect span a{ max-width:42px}
}
.registerGate .fixBottom .fixContent{height:inherit}

/* 회원가입 */
.register .process{margin-bottom:25px}
.register .process ul{height:44px;overflow:hidden}
.register .process ul:after{content:'';display:block;clear:both}
.register .process ul li{float:left;position:relative;width:35%;height:44px;padding-top:12px;text-align:center;font-size:14px;color:#333;background-color:#f6f6f8;border-bottom:1px solid #c6c6c6;box-sizing:border-box}
.register .process ul li.active{color:#fff;background-color:#707781;border-bottom:1px solid #707781}
.register .process ul li span{position:relative}
.register .process ul li span:before{content:'';display:inline-block;position:absolute; background-image:url('/static/images/common/pictogram_sprite.png');background-size:360px auto;background-repeat:no-repeat}
.register .process ul li.step1{padding-left:14px}
.register .process ul li.step2{padding-left:17px}
.register .process ul li.step3{padding-left:21px}
.register .process ul li.step1 span:before{left:-20px;top:-2px;width:14px;height:19px;background-position:-25px -25px}
.register .process ul li.step2 span:before{left:-22px;top:-2px;width:17px;height:18px;background-position:-75px -25px}
.register .process ul li.step3 span:before{left:-23px;top:-1px;width:18px;height:17px;background-position:-125px -25px}
.register .process ul li.step1.active span:before{width:14px;height:19px;background-position:0 -25px}
.register .process ul li.step2.active span:before{width:17px;height:17px;background-position:-50px -25px}
.register .process ul li.step3.active span:before{width:18px;height:16px;background-position:-100px -25px}
.register .process ul li:after{content:'';display:inline-block;position:absolute;right:0;top:0;width:12px;height:44px;background-image:url('/static/images/common/process_arrow.png');background-size:12px auto;background-repeat:no-repeat}
.register .process ul li.active:after{background-position:0 -50px}
.register .process ul li.step3{width:30%}
.register .process ul li.step3:after{content:none}
.register .guide{padding:20px 25px;text-align:center}
.register .guide .text02{margin-top:3px}
.register .addition{margin-top:10px}
.register .title.sub{margin-top:20px}
.register .table{margin-bottom:15px}
.register .table tbody th{white-space:nowrap}

.register.step1 .bullet{margin-top:7px}
.register.step2 .process ul li.step1:after{background-image:url('/static/images/common/process_arrow2.png')}
.register.step3 .process ul li.step2:after{background-image:url('/static/images/common/process_arrow2.png')}
.register.step2 .board .list2 .btn{float:right}
.register.step2 .board .list2 > li{display:flex;justify-content:space-between;align-items:center}
.register.step2 .board.agreement .list2 label{transform:none;word-break:break-word}
.register.step2 .board .list2 .btn{white-space:nowrap}

.register.step2 .table .tips{position:relative;padding-right:46px}
.register.step2 .table .tips a{display:inline-block;position:absolute;right:10px;top:11px}
.register.step3 .bullet{margin-top:10px}
.register.step4 .box.primary{margin:15px 0;padding:15px 20px;font-size:14px}
.register.step4 .box.primary strong{font-size:17px;color:#333}
.register.step4 .box.default{position:relative;margin-bottom:12px}
.register.step4 .box.default .content{display:table;width:100%;margin:25px 0;table-layout:fixed;box-sizing:border-box}
.register.step4 .box.default .content span{display:table-cell;position:relative;width:50%;padding:0 5px;text-align:center;box-sizing:border-box}
.register.step4 .box.default .content span:after{content:'';display:inline-block;position:absolute;left:0;top:4px;height:12px;border-left:1px solid #e2e2e2}
.register.step4 .box.default .content span:first-child:after{content:none}
.register.step4 .box.default .row.btns{border-top:1px solid #e2e2e2;color:#666;font-size:15px}
.register.step4 .box.default .row.btns .btn{color:#333}
.register.step4 .bullet + .bullet{margin-top:7px}

.board.agreement li .btn{float:right}

/* 아이디, 비밀번호 찾기 */
.findId .tab.type2{padding:15px 35px}
.findId section{margin-top:15px}
.findId .table{margin-bottom:15px}
.findPassword section{margin-top:15px}
.findPassword .certificationNo .table{border-top:none}
.findPassword #success .title{padding-bottom:2px;border-bottom:1px solid #707780}
.findPassword #success .row{margin-top:10px}

/* 정보변경 비밀번호 확인 */
#body.password{padding-bottom:70px}
.password .guide.account{padding:0 30px}
.password .guide.account .text13{margin-top:4px}
.password .entry{width:250px;margin:18px auto 0;font-size:13px}
.password .entry div{margin-bottom:10px}
.password .entry .bullet{margin:15px 0}
.password .advice{width:285px;margin:20px auto 0;padding-top:16px;border-top:1px solid #e2e2e2}
.password .advice ul > li{display:inline-block;white-space:nowrap}
.password .fixContent{position:fixed;border-top:1px solid #e2e2e2}
.password .fixContent .col:first-child{border-right:1px solid #e2e2e2}
.password .fixContent .btn{border:none}
.password .fixContent .btn .icon{margin-left:4px}

/* 정보변경 */
.spouse section,
.accountCheck section,
.accountEdit section,
.accountLeave section,
.registrationUpdate section{margin-top:15px}
.accountLeave .guide{margin-top:15px}
.accountLeave .guide .bullet + .bullet{margin-top:10px}
.spouse .box.primary,
.accountCheck .box.primary,
.registrationUpdate .box.primary{margin-bottom:15px;padding:15px 10px 18px}
.accountCheck .box.primary .text12{margin-top:3px}

.accountEdit .noSpouse .row{height:61px;padding:10px 0;border-top:1px solid #707780;box-sizing:border-box}
.accountEdit .noSpouse .row:after{content:'';display:block;clear:both}
.accountEdit .noSpouse .row .text{float:left;font-size:14px;line-height:40px;color:#333}
.accountEdit .noSpouse .row .btn{float:right}
.accountEdit .noSpouse ~.board.agreement{margin-top:0}
.accountEdit .noSpouse ~.board.agreement .list2{border-top:1px solid #e2e2e2}

.accountEdit .table .row.user{position:relative;min-height:30px}
.accountEdit .table .row.user .text{display:block;padding-top:4px;vertical-align:sub}
.accountEdit .table .row.user .btns{position:absolute;right:0;top:0}
.accountEdit .table .row.user .btns.block{position:static;clear:both;float:none;padding-top:6px}
.accountEdit .table .row.user small{display:block;clear:both;margin-top:2px;font-size:12px}
.accountEdit .table .row.center .text{position:static;padding-top:4px;line-height:38px}
.accountEdit .table .row.number .text{position:static;padding-top:10px;word-break:break-all}
.accountEdit .board.agreement .list2 > li{display:block;padding-left:0}
.accountEdit .board.agreement .list2 li .checkbox{position:relative;top:0}

.accountEdit .tips{position:relative;display:flex;align-items:center; min-height:25px;padding-left:30px;font-size:12px}
.accountEdit .tips a{display:inline-block;position:absolute;left:0px;top:0}

#body.editCenter{padding-bottom:65px}
#body.editCenter .certificationNumber{margin-bottom:15px;border-top:none}
.editCenter .guide{margin-bottom:15px}

/* 주민등록번호 업데이트 */
.registrationUpdate .inlineInput input[type="text"]{width:20%;margin:2px 0;text-align:center}

/* 회원탈퇴 */
.unregister .section{margin:20px 0}
.unregister .section .certificationNumber{border-top:none}
.unregister .section .guide{margin:15px 0}

/* 배우자 등록, 변경 */
.spouse .agreement{margin-top:7px}
.spouse .box.primary .text12{margin-top:5px}
.spouse .table{margin-bottom:10px}
.spouse .guide li{position:relative}
.spouse .guide .btn{position:absolute;right:0;top:0}
.spouse .board.agreement .list2{margin-bottom:10px}
.spouse .board.agreement .list2 label{line-height:1.1}

/* 시리얼번호 입력 */
.serial .entry{margin:18px auto 0}
.serial .entry label{display:block;margin-bottom:10px;text-align:center}