@charset "utf-8"; /* cmm/mber/sbscrb/style.css*/ /* 2023.03.15 OSY 2023.12.28 SSJ 2024.01.24 SSJ */ /* 서브페이지 틀 세팅*/ .contents {border-top: 2px solid #ddd;} .subCon h4.tit:empty {display: none;} .wrap_left_template .contents {border-top: none;} /* Button */ a.cfmBtn, a.nextBtn, a.cancelBtn, a.nextBtn_pw, a.cancelBtn_pw {height: 50px; line-height: 50px; padding: 0 25px; display: inline-block; border-radius: 2px; box-sizing: border-box; text-align: center; vertical-align: middle;} a.cfmBtn {color: #fff; background: #666; font-size: 14px; font-weight: 400; text-decoration: none; -webkit-transition: background 0.2s; transition: background 0.2s;} a.nextBtn {background: #083778; border: 1px solid #083778; color: #fff; font-size: 14px; font-weight: 400; text-decoration: none; -webkit-transition: background 0.5s; transition: background 0.5s;} a.cancelBtn {border: 1px solid #777; color: #666; background: #fff; font-size: 14px; font-weight: 400; text-decoration: none; -webkit-transition: background 0.5s; transition: background 0.5s;} a.nextBtn_pw {width: 33%; font-size: 14px; font-weight: 600; float: left; border: 1px solid #363636; text-align: center; box-sizing: border-box; padding: 6px 10px; border-radius: 2px; background: #363636; color: #fff;} a.cancelBtn_pw {width: 32%; font-size: 14px; margin-right: 1%; margin-left: 1%; float: left; border: 1px solid #ccc; text-align: center; box-sizing: border-box; padding: 6px 10px; border-radius: 2px;} a.cfmBtn:hover, a.nextBtn:hover {color: #fff; background: #333 !important; border-color: #333 !important;} a.cancelBtn:hover {color: #fff !important; background: #777;} .sbscrbTable a.cfmBtn {height: 40px !important; line-height: 40px !important;} /********** 로그인 Login **********/ div.sbscrbBox {position: relative; float: left; width: 100%; margin: 50px 0 70px; background: #fff; box-sizing: border-box; overflow: hidden;} div.sbscrbBox h2, div.sbscrbBox h4 {margin-bottom: 25px; color: #333;} div.sbscrbBox > div.sbscrbLoginbox {position: relative; width: 100%; padding: 80px 20px 40px; background: #fff; border: 1px solid #e7e7e7; border-top: 2px solid #000; overflow: hidden; box-sizing: border-box;} div.sbscrbBox > div.sbscrbLoginbox .textBox {font-size: 15px; line-height: 150%; text-align: center; word-break: keep-all;} .sbscrbNaming .textBox {font-size: 20px; line-height: 1.4em; text-align: center; word-break: keep-all;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap {float: left; width: 100%; margin: 0px auto; box-sizing: border-box;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginLine {position: relative; width: 80%; max-width: 800px; margin-left: auto; margin-right: auto; box-sizing: border-box;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginBox {position: relative; padding: 50px; overflow: hidden;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginBox > form#loginForm {margin: 0 auto;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginBox .inputLabel {position: relative; width: calc(100% - 150px);} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginBox .inputLabel:not(:nth-of-type(1)) {margin-top: 10px;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginBox .inputLabel > span {float: left; width: auto; display: inline-block; line-height: 39px; text-align: left; font-size: 14px; letter-spacing: -0.5px; position: absolute; top: 0; left: 0px;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginBox .inputLabel .loginId, .loginWrap .loginBox .inputLabel .loginPw {padding: 0 10px !important; width: 100%; height: 50px; font-size: 15px; color: #333; border: 1px solid #ccc; box-sizing: border-box;} /* 로그인 아이디 비밀번호 입력칸 앞에 이미지 넣을 경우 살려주세요 div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginBox .inputLabel::before {position:absolute; z-index:1; top:50%; left:15px; -webkit-transform:translateY(-50%); transform:translateY(-50%); content:''; width:20px; height:20px;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginBox .inputLabel:nth-of-type(1)::before {background:url(/images/wzwg/cmm/mber/sbscrb/login_icon_frm.png) 0 0 no-repeat;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginBox .inputLabel:nth-of-type(2)::before {background:url(/images/wzwg/cmm/mber/sbscrb/login_icon_frm.png) -20px 0 no-repeat;} */ div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginBox .idSaveBox {display: block; width: 100%; padding: 10px 0 0;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginBox .idSaveBox input {margin-right: 4px !important;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginBox ul.idSaveBox {position: absolute; left: 0; width: 90%; display: block; line-height: 12px; font-size: 12px; margin-left: 13%;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginBox ul.idSaveBox li {float: left;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginBox ul.idSaveBox li:last-child a {line-height: 10px; padding-left: 8px; margin-left: 8px; border-left: 1px solid #ccc; display: block; margin-top: 4px;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginBox .idSave {font-size: 15px;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginBox .idSave:hover {cursor: pointer;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginLine a.loginBt {float: right; display: inline-block; width: 140px; height: 110px; line-height: 80px; padding: 15px 5px; margin-top: -139px; font-size: 16px; color: #fff; text-align: center; background: #083778; box-sizing: border-box; transition: background .3s;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginLine a.loginBt:hover {background: #000;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .BtnBox {position: relative; width: 100%; /*height:100%;*/ } div.sbscrbBox > div.sbscrbLoginbox .loginWrap .BtnBox::before {position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 1px; background: #ddd;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .BtnBox > div {position: relative; float: left; width: 50%; padding: 40px 15px 0; text-align: center; box-sizing: border-box;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .BtnBox > div + div::before {position: absolute; top: 40px; left: 0; content: ''; width: 1px; height: calc(100% - 40px); background: #ddd;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .BtnBox > div .txt {margin-bottom: 20px; font-size: 14px; line-height: 1.5em; color: #333; text-align: center; word-break: keep-all;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .BtnBox > div a {display: inline-block; width: 50%; max-width: 200px; padding: 24px 0; margin: 2px; font-size: 15px; color: #000; text-align: center; word-break: keep-all; background: #fff; border: 1px solid #ddd; box-sizing: border-box; transition: all .3s;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .BtnBox > div a:hover, div.sbscrbBox > div.sbscrbLoginbox .loginWrap .BtnBox > div a:active {background: #333; color: #fff;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .BtnBox > div.memSearch:only-child {width: 100%; max-width: 800px; margin: 0 auto; padding: 20px 50px; box-sizing: border-box; display: flex; justify-content: space-between; float: none; align-items: center;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .BtnBox > div.memSearch:only-child .txt {text-align: left;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .BtnBox > div.memSearch:only-child a {margin: 0; width: 140px; padding: 15px 0; background: #f9f9f9;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .BtnBox > div.memSearch:only-child a:hover {color: #333;} /* 아이디 찾기 */ div.sbscrbBox div.sbscrbLoginbox.bg_btm {background: linear-gradient(#fff 50%, #e9efef 50%);} /* 비밀번호 변경 */ div.sbscrbBox.searchPw div.sbscrbLoginbox {display: flex;} div.sbscrbBox.searchPw div.sbscrbLoginbox .textBox {width: 50% !important;} div.sbscrbBox.searchPw div.sbscrbLoginbox .textBox + .textBox {border-left: 1px solid #ddd;} div.sbscrbBox.searchPw div.sbscrbLoginbox .textBox .sbscrbTable tr th {text-align: right;} /********** 회원유형 **********/ div.sbscrbBox > div.sbscrbLoginbox.memType {background: #fbfbfb; padding: 80px 20px 20px; word-break: keep-all; box-sizing: border-box;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType {text-align: center;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap {display: inline-block; margin: 1% 0.5%; padding: 50px; text-align: center; vertical-align: top; background: #fff; border: 1px solid #ddd; border-top: 3px solid #005aab; border-radius: 0 0 5px 5px; box-sizing: border-box;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap:hover {box-shadow: 2px 5px 10px 0 rgba(0,0,0,.15);} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap:only-child {widht: auto; max-width: 50%;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap:nth-last-child(2), div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap:nth-last-child(2)+li {width: calc(96% / 2);} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap:nth-last-child(n+3), div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap:nth-last-child(n+3)~li {width: calc(94% / 3);} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap:nth-child(3n+1) {clear: both !important;} /* 회원유형 */ div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap .sbscrbNaming {font-size: 30px;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap .sbscrbNaming span {display: none; margin-top: 10px; font-size: 17px; line-height: 1.3em;} /* 회원 세부유형 */ div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap ul.type {overflow: hidden;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap ul.type .siteUsrTy {margin-top: 20px; transition: all .1s;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap ul.type .siteUsrTy:first-child {margin-top: 30px;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap ul.type .siteUsrTy:hover {border-color: #000; background: #f9f9f9;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap ul.type .siteUsrTy a {display: flex; flex-flow: row wrap; justify-content: space-between; align-content: flex-start;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap ul.type .siteUsrTy a span {display: none; flex-grow: 1; font-size: 20px; line-height: 1.2em; text-align: left; margin-right: 15px; margin-bottom: 15px;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap ul.type .siteUsrTy a p {display: none;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap ul.type .siteUsrTy a .usrTyBtn {width: 140px; flex-shrink: 0; align-self: flex-end; padding: 15px 20px; vertical-align: middle; color: #fff; background: #083778; box-sizing: border-box; transition: background .5s; font-size: 16px;} /* 회원유형 색상 */ div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap:nth-child(9n-8) {border-top-color: #083778;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap:nth-child(9n-8) .usrTyBtn {background: #083778 !important;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap:nth-child(9n-7) {border-top-color: #239b98;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap:nth-child(9n-7) .usrTyBtn {background: #239b98 !important;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap:nth-child(9n-6) {border-top-color: #653da0;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap:nth-child(9n-6) .usrTyBtn {background: #653da0 !important;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap:nth-child(9n-5) {border-top-color: #991e33;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap:nth-child(9n-5) .usrTyBtn {background: #991e33 !important;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap:nth-child(9n-4) {border-top-color: #b53c6a;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap:nth-child(9n-4) .usrTyBtn {background: #b53c6a !important;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap:nth-child(9n-3) {border-top-color: #c75426;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap:nth-child(9n-3) .usrTyBtn {background: #c75426 !important;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap:nth-child(9n-2) {border-top-color: #0A9CC2;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap:nth-child(9n-2) .usrTyBtn {background: #0A9CC2 !important;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap:nth-child(9n-1) {border-top-color: #695692;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap:nth-child(9n-1) .usrTyBtn {background: #695692 !important;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap:nth-child(9n) {border-top-color: #57b0ae;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap:nth-child(9n) .usrTyBtn {background: #57b0ae !important;} /* 회원가입 버튼 hover */ div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap ul.type .siteUsrTy:hover a .usrTyBtn {background: #333 !important;} /********** 회원가입 (약관-인증-입력-완료) **********/ div.sbscrbWrap {width: 100%; margin: 50px 0 70px; box-sizing: border-box; overflow: hidden;} /* 상단 - 가입 단계 */ div.sbscrbWrap ul.sbscrbStep {width: 100%; max-width: 800px; margin: 0 auto 30px; overflow: hidden; text-align: center;} div.sbscrbWrap ul.sbscrbStep li {position: relative; width: 25%; display: inline-block;} div.sbscrbWrap ul.sbscrbStep li::before {position: absolute; left: -50%; top: 0; z-index: -1; content: ''; width: 100%; height: 25px; background-image: linear-gradient(to right, rgba(190,190,190,1) 17%, rgba(255,255,255,0) 0%); background-position: bottom; background-size: 17px 3px; background-repeat: repeat-x;} div.sbscrbWrap ul.sbscrbStep li:first-child::before {display: none;} div.sbscrbWrap ul.sbscrbStep li .stepBox {width: auto; margin-left: auto; margin-right: auto; text-align: center;} div.sbscrbWrap ul.sbscrbStep li .stepBox .num {position: relative; z-index: 0; display: inline-block; width: 50px; height: 50px; line-height: 50px; border-radius: 50%; text-align: center; color: #fff; background: #777; box-sizing: border-box;} div.sbscrbWrap ul.sbscrbStep li .stepBox .txt {margin-top: 10px; color: #666;} div.sbscrbWrap ul.sbscrbStep li.stepOn .stepBox .num {font-weight: 600; background: #083778;} div.sbscrbWrap ul.sbscrbStep li.stepOn .stepBox .txt {font-size: 18px; font-weight: 600; color: #083778;} div.sbscrbWrap ul.sbscrbStep li.stepOn::before {background-image: linear-gradient(to right, rgba(8,55,120,1) 17%, rgba(255,255,255,0) 0%);} div.sbscrbWrap .sbscrbNaming {width: 100%; padding: 40px 15px 30px; font-size: 22px; letter-spacing: -0.5px; font-weight: 600; border-top: 2px solid #000; box-sizing: border-box;} div.sbscrbWrap .sbscrbNaming.linebt {border-bottom: 1px solid #e7e7e7;} div.sbscrbWrap .sbscrbNaming.linenone {border-top: 0; padding-top: 0;} div.sbscrbWrap .sbscrbNaming > span {display: block; width: 100%; line-height: 150%; margin-top: 20px; font-size: 15px; font-weight: 400; color: #555;} div.sbscrbWrap .signupWrap {width: 100%; float: left;} div.sbscrbWrap .signupWrap .signupBox {position: relative; margin-bottom: 20px; padding-bottom: 20px;} div.sbscrbWrap .signupWrap .signupBox:not(:nth-last-child(1))::before {position: absolute; left: 15px; bottom: 0; content: ''; width: calc(100% - 30px); height: 1px; background: #eaeaea;} /* 약관 */ div.sbscrbWrap .signupWrap .signupBox h3 {font-size: 17px; letter-spacing: -0.5px; font-weight: 700; padding: 15px;} div.sbscrbWrap .signupWrap .signupBox h3 span.sbscrbPointc {display: inline-block; padding: 5px 8px; vertical-align: 1px; margin-right: 5px; background: #083778; border-radius: 15px; color: #fff; font-size: 13px; font-weight: 400;} div.sbscrbWrap .signupWrap ul.signText {padding: 0 15px; box-sizing: border-box;} div.sbscrbWrap .signupWrap ul.signText li {height: 350px; padding: 20px 15px; background: #fff; line-height: 18px; border: 1px solid #ddd; box-sizing: border-box; overflow-y: scroll;} div.sbscrbWrap .signupWrap ul.signText li:first-child {margin-top: 0;} div.sbscrbWrap .signupWrap ul.signText table {border: 1px solid #ececec; border-collapse: collapse;} div.sbscrbWrap .signupWrap ul.signText table tr th {line-height: 150%; padding: 5px 10px; border: 1px solid #ececec; font-size: 15px;} div.sbscrbWrap .signupWrap ul.signText table tr td {border: 1px solid #ececec; padding: 5px 10px; line-height: 150%; font-size: 15px;} div.sbscrbWrap .signupWrap ul.signText br+br+br, div.sbscrbWrap .signupWrap ul.signText br+br+br+br, div.sbscrbWrap .signupWrap ul.signText br+br+br+br+br, div.sbscrbWrap .signupWrap ul.signText br+br+br+br+br+br {display: none;} /* 로그인 아이디저장, 약관 동의 */ div.sbscrbWrap .signupWrap .signClick {text-align: right; padding: 10px 17px; overflow: hidden;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginBox .idSaveBox input, div.sbscrbWrap .signupWrap .signClick input {position: relative; width: 20px; height: 20px !important; border-radius: 50%; cursor: pointer; appearance: none; margin-right: 6px; vertical-align: middle; border: 1px solid rgba(0,0,0,0.2); background: #f9f9f9 !important; box-sizing: border-box;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginBox .idSaveBox label span, div.sbscrbWrap .signupWrap .signClick input + em {color: #666;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginBox .idSaveBox input::before, div.sbscrbWrap .signupWrap .signClick input::before {position: absolute; left: -1px; top: -1px; z-index: 1; content: ''; width: 20px; height: 20px; background: url(/images/wzwg/cmm/mber/sbscrb/chcek_arrow.png) no-repeat;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginBox .idSaveBox input[type="checkbox"]:checked, div.sbscrbWrap .signupWrap .signClick input[type="checkbox"]:checked {background: #083778 !important; border-color: #083778;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginBox .idSaveBox input[type="checkbox"]:checked + label .idSave, div.sbscrbWrap .signupWrap .signClick input[type="checkbox"]:checked + em {color: #083778; font-weight: 600;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginBox .idSaveBox label, div.sbscrbWrap .signupWrap .signClick label {cursor: pointer;} div.sbscrbWrap .signupWrap .signClick span {font-size: 15px; font-weight: 600;} /* 가입인증수단 */ div.sbscrbWrap .sbscrbContbox {padding: 0 15px; box-sizing: border-box;} div.sbscrbWrap .sbscrbNaming + .sbscrbContbox .typeBtn {padding: 50px 0; border: 1px solid #ddd;} div.sbscrbWrap .sbscrbContbox .typeBtn {display: flex; flex-flow: row wrap; justify-content: center; align-items: center; width: 100%; margin-bottom: 20px; box-sizing: border-box; overflow: hidden;} div.sbscrbWrap .sbscrbContbox .typeBtn li {width: calc(96% / 5); background: #fff; border: 1px solid #ddd; border-radius: 10px; box-sizing: border-box; transition: all .3s;} div.sbscrbWrap .sbscrbContbox .typeBtn li:not(:first-child):not(:nth-child(5n+1)) {margin-left: 1%;} div.sbscrbWrap .sbscrbContbox .typeBtn li a {display: block; padding: 50px 10px; text-align: center;} div.sbscrbWrap .sbscrbContbox .typeBtn li a img {max-width: 60px; height: auto;} div.sbscrbWrap .sbscrbContbox .typeBtn li a .snsName {margin-top: 10px; line-height: 1.4em;} div.sbscrbWrap .sbscrbContbox .typeBtn li:hover, div.sbscrbWrap .sbscrbContbox .typeBtn li:active {border-color: #333;} div.sbscrbWrap .sbscrbContbox .typeBtn li:hover a .snsName, div.sbscrbWrap .sbscrbContbox .typeBtn li:active a .snsName {font-weight: 600;} div.sbscrbWrap .sbscrbContbox .typeBtn li:nth-child(n+6) {margin-top: 1%;} /* 가입정보입력 */ div.sbscrbWrap .sbscrbTable {width: 100%; border-top: 1px solid #dfdfdf;} div.sbscrbWrap .sbscrbTable tr input#bassAdres {width: 100%; margin-bottom: 5px;} div.sbscrbWrap .sbscrbTable tr input#detailAdres {width: 100%;} div.sbscrbWrap .sbscrbTable tr th {padding: 20px 25px; background: #f9f9f9; border-bottom: 1px solid #eee; text-align: left; font-size: 15px; font-weight: 600;} div.sbscrbWrap .sbscrbTable>tbody>tr>td {padding: 20px 10px; border-bottom: 1px solid #eee; box-sizing: border-box; font-size: 16px;} div.sbscrbWrap .sbscrbTable tr td:only-child *:not(a) {line-height: 150%;} div.sbscrbWrap .sbscrbTable tr input {float: left; height: 40px !important; margin: 2px 8px 2px 0; padding: 8px 10px; font-size: 16px;} div.sbscrbWrap .sbscrbTable>tbody>tr>td>span {float: left; display: block; margin-right: 5px; margin-top: 10px; line-height: 1.3em; font-size: 15px;} div.sbscrbWrap .sbscrbTable>tbody>tr>td>.id_select_ok {margin-top: 0;} div.sbscrbWrap .sbscrbTable tr span.sbscrbPointc {margin-left: 5px; color: #007ad3;} div.sbscrbWrap .sbscrbTable tr span#dplct_div {line-height: 40px; padding: 0 10px; font-weight: 600;} div.sbscrbWrap .sbscrbTable tr select {/*height:26px;*/ border: 1px solid #ddd; margin-right: 2px; float: left; /*font-size:12px;*/ vertical-align: 2px;} div.sbscrbWrap .sbscrbTable tr select + a.cfmBtn {vertical-align: 3px;} div.sbscrbWrap .sbscrbTable tr input[type="checkbox"] {width: auto; border: none;} div.sbscrbWrap .sbscrbTable tr input + a.cfmBtn {margin-top: 3px; margin-bottom: 3px;} /* 약관 */ #stplatSimpDiv {float: left; width: 100%; padding: 10px; box-sizing: border-box; display: block; padding: 15px 5px; border-top: 1px solid #333; box-sizing: border-box; margin-top: 0px;} #stplatSimpDiv div.clauseTxt h3 {font-size: 18px; line-height: 22px; margin-bottom: 15px; margin-top: 30px;} #stplatSimpDiv div.clauseTxt > p {float: left; width: 100%; border-bottom: 1px solid #ddd; box-sizing: border-box; color: #333; font-size: 14px; padding-bottom: 10px; margin-bottom: 20px;} #stplatSimpDiv div.clauseTxt > p span {float: right; color: #838383; font-size: 15px; width: 100%; display: block; padding: 10px 0; box-sizing: border-box; text-align: right;} #stplatSimpDiv div.clauseTxt .ContentsWrap {font-size: 16px; line-height: 150%; background: #fafafa; width: 100%; float: left; margin-top: 20px; padding: 10px; box-sizing: border-box; height: 300px; overflow-y: scroll; margin-bottom: 20px; word-break: keep-all; list-style: none;} #stplatSimpDiv div.clauseTxt .ContentsWrap li {list-style: none;} div.clause001 {width: 100%; box-sizing: border-box;} div.clause001 p.clauseNaming {display: block; width: 100%; max-width: 1300px; margin: 0 auto; font-weight: 600; text-align: center; box-sizing: border-box;} /* 약관 - 탭 */ div.clause001 .clauseWrap {background: white; box-sizing: border-box; position: relative; padding-top: 0px; float: left; width: 100%;} div.clause001 .clauseWrap ul.clauseAllbox {float: left; width: 100%; margin-top: 30px; font-size: 0; padding-left: 0;} div.clause001 .clauseWrap ul.clauseAllbox > li {text-align: center; border: 1px solid #e8e8e8; overflow: hidden; margin-bottom: 7px; margin-right: 0.5%; box-sizing: border-box; float: left; vertical-align: middle;} div.clause001 .clauseWrap ul.clauseAllbox > li:hover {background: #f0f0f0;} div.clause001 .clauseWrap ul.clauseAllbox > li:last-child {margin-right: 0px;} div.clause001 .clauseWrap ul.clauseAllbox > li h2 {width: 100%; height: 55px; vertical-align: middle !important;} div.clause001 .clauseWrap ul.clauseAllbox > li h2 a {height: 100%; width: 100%; line-height: 1.4em; vertical-align: middle !important; font-size: 17px; font-weight: 400; display: inline-block; box-sizing: border-box;} div.clause001 .clauseWrap ul.clauseAllbox > li h2 a:first-line {line-height: 55px;} div.clause001 .clauseWrap ul.clauseAllbox > li.active {background: #777;} div.clause001 .clauseWrap ul.clauseAllbox > li.active h2 a {color: #fff; font-weight: 600;} div.clause001 .clauseWrap ul.clauseAllbox > li div.clauseBox h2.clauseList {display: block; position: absolute; top: 0px; width: 50%; height: 47px; line-height: 43px; text-align: center; color: #333; border-bottom: 0; text-decoration: none; font-size: 18px; letter-spacing: -1px; border: 1px solid #e8e8e8; box-sizing: border-box; min-width: 150px; max-width: 200px; left: 0;} div.clause001 .clauseWrap ul.clauseAllbox > li div h2.clauseList, div.clause001 .clauseWrap ul.clauseAllbox > li.active div.clauseBox h2.clauseList {border-left: none; display: inline-block; line-height: 100%;} div.clause001 .clauseWrap ul.clauseAllbox > li:first-child div.clauseBox h2.clauseList {border-left: 1px solid #e8e8e8;} div.clause001 .clauseWrap ul.clauseAllbox > li:last-child div.clauseBox h2.clauseList {left: 200px;} div.clause001 .clauseWrap ul.clauseAllbox > li div.clauseBox h2.clauseList a.tit_name {color: #555; width: 100%; height: 47px; position: relative; float: left; line-height: 47px; overflow: hidden; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 5px; box-sizing: border-box; font-size: 14px;} div.clause001 .clauseWrap ul.clauseAllbox > li.active div.clauseBox h2.clauseList a.tit_name {color: #fff; background: #777;} /* 약관 이력 */ div.sbscrbWrap .sbscrbTable.tblclause th, div.sbscrbWrap .sbscrbTable.tblclause td:not(:nth-child(2)) {text-align: center !important;} div.sbscrbWrap .sbscrbTable.tblclause tr.tdLogCn>td {padding-left: 62px;} div.sbscrbWrap .sbscrbTable.tblclause tr.tdLogCn td {text-align: left !important; line-height: 150%;} div.sbscrbWrap .sbscrbTable.tblclause tr.tdLogCn td p {font-size: 15px;} div.sbscrbWrap .sbscrbTable.tblclause tr.tdLogCn td > h3:first-child {display: none;} div.sbscrbWrap .sbscrbTable.tblclause tr.tdLogCn>td br+br, div.sbscrbWrap .sbscrbTable.tblclause tr.tdLogCn>td br+br+br, div.sbscrbWrap .sbscrbTable.tblclause tr.tdLogCn>td br+br+br+br, div.sbscrbWrap .sbscrbTable.tblclause tr.tdLogCn>td br+br+br+br+br, div.sbscrbWrap .sbscrbTable.tblclause tr.tdLogCn>td br+br+br+br+br+br, div.sbscrbWrap .sbscrbTable.tblclause tr.tdLogCn>td br+br+br+br+br+br+br, div.sbscrbWrap .sbscrbTable.tblclause tr.tdLogCn>td br+br+br+br+br+br+br+br, div.sbscrbWrap .sbscrbTable.tblclause tr.tdLogCn>td br+br+br+br+br+br+br+br+br, div.sbscrbWrap .sbscrbTable.tblclause tr.tdLogCn>td br+br+br+br+br+br+br+br+br+br, div.sbscrbWrap .sbscrbTable.tblclause tr.tdLogCn>td br+br+br+br+br+br+br+br+br+br+br, div.sbscrbWrap .sbscrbTable.tblclause tr.tdLogCn>td br+br+br+br+br+br+br+br+br+br+br+br, div.sbscrbWrap .sbscrbTable.tblclause tr.tdLogCn>td br+br+br+br+br+br+br+br+br+br+br+br+br, div.sbscrbWrap .sbscrbTable.tblclause tr.tdLogCn>td br+br+br+br+br+br+br+br+br+br+br+br+br+br {display: none;} /* Button Box */ div.sbscrbWrap div.sbscrbBtnbox {float: left; width: 100%; margin: 20px auto 0; overflow: hidden;} div.sbscrbWrap div.sbscrbBtnbox div.sbscrbBtnwidth {max-width: 300px; margin: 0 auto; overflow: hidden;} @media all and (max-width: 1299px) {div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap {padding:30px;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap:nth-last-child(n+3), div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap:nth-last-child(n+3)~li {width: 48%;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap:not(:only-child):nth-child(3n+1) {float: left !important; clear: inherit !important;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap:nth-child(2n+1) {clear: both !important; } } @media (min-width: 991px) {div.clause001 p.clauseNaming {font-size:22px; padding: 55px 0 30px; margin-bottom: 20px; border-bottom: 1px solid #ddd; } } @media all and (max-width: 990px) {div.clause001 p.clauseNaming {padding:30px 10px 10px;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .BtnBox > div a {width: 40%; padding: 18px 0; font-size: 13px; } } @media all and (min-width: 799px) and (max-width:990px) {div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginLine {width:100%; } } @media (min-width: 800px) {div.sbscrbBox.searchPw div.sbscrbLoginbox .textBox {min-height:185px;} div.clause001 .clauseWrap ul.clauseAllbox > li {width: auto; padding: 0 10px;} div.clause001 .clauseWrap ul.clauseAllbox > li:nth-child(5n) {margin-right: 0;} div.clause001 .clauseWrap ul.clauseAllbox > li:nth-child(5n):nth-last-child(2) {margin-right: 0.5%; } } @media (max-width: 799px) {div.sbscrbBox {margin:0;} div.sbscrbBox > div.sbscrbLoginbox {padding: 40px 15px 20px; margin-bottom: 30px;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginLine {width: 100%;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginBox .inputLabel {width: calc(100% - 110px);} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginLine a.loginBt {width: 100px;} div.sbscrbWrap .sbscrbNaming {font-size: 20px; } /* 회원유형 */ div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap {width: 100% !important;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap:only-child {max-width: none !important;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap:not(:last-child) {margin-bottom: 20px;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap ul.type .siteUsrTy a span {text-align: center; margin-right: 0;} div.sbscrbBox > div.sbscrbLoginbox.memType .sbscrbCustomers ul.customersType .memWrap ul.type .siteUsrTy a .usrTyBtn {width: 100%; } /* 가입인증수단 */ div.sbscrbWrap .sbscrbNaming + .sbscrbContbox .typeBtn {padding-left: 30px; padding-right: 30px;} div.sbscrbWrap .sbscrbContbox .typeBtn li {width: 100% !important; height: 80px; margin-left: 0 !important; border-radius: 10px;} div.sbscrbWrap .sbscrbContbox .typeBtn li:not(:first-child) {margin-top: 10px;} div.sbscrbWrap .sbscrbContbox .typeBtn li a {padding: 10px; text-align: left;} div.sbscrbWrap .sbscrbContbox .typeBtn li a img {margin-right: 15px; vertical-align: middle;} div.sbscrbWrap .sbscrbContbox .typeBtn li a .snsName {display: inline-block; margin-top: 0; vertical-align: middle;} div.sbscrbWrap .sbscrbContbox .typeBtn li a .snsName br {display: none; } /* 비밀번호변경 */ div.sbscrbBox div.sbscrbLoginbox.bg_btm {background: linear-gradient(#fff 70%, #e9efef 70%);} div.sbscrbBox div.sbscrbLoginbox.bg_mnone {background: transparent;} div.sbscrbBox.searchPw div.sbscrbLoginbox {display: block;} div.sbscrbBox.searchPw div.sbscrbLoginbox .textBox {width: 100% !important;} div.sbscrbBox.searchPw div.sbscrbLoginbox .textBox .txt {margin-top: 30px;} div.sbscrbBox.searchPw div.sbscrbLoginbox .textBox + .textBox {border-left: 0; border-top: 1px solid #ddd; margin-top: 30px; padding-top: 30px;} div.sbscrbWrap .sbscrbTable:not(.tblclause)>tbody>tr>td {border-bottom: 0; } /* 가입정보입력 */ div.sbscrbWrap .sbscrbTable:not(.tblclause) {border-bottom: 1px solid #ccc;} div.sbscrbWrap .sbscrbTable:not(.tblclause) colgroup {display: none;} div.sbscrbWrap .sbscrbTable:not(.tblclause) tbody tr {float: left; display: block; width: 100% !important;} div.sbscrbWrap .sbscrbTable:not(.tblclause) tbody th {float: left; clear: both; display: inline-block; width: 25%; font-size: 15px; padding: 10px; border: 1px solid #ccc; border-width: 1px 0 0 0; line-height: 1.5em; background: none; box-sizing: border-box;} div.sbscrbWrap .sbscrbTable:not(.tblclause) tbody td {float: left; display: inline-block; width: 75%; font-size: 14px; padding: 10px 10px; border: 1px solid #ccc; border-width: 1px 0 0 0; box-sizing: border-box;} div.sbscrbWrap .sbscrbTable:not(.tblclause) tbody td:only-child {width: 100%; } } @media all and (min-width: 499px) and (max-width:799px) {div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginBox .inputLabel > span {position:absolute; top: 50%; width: auto; margin-top: -19px;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginBox .inputLabel {position: relative;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginBox ul.idSaveBox {position: absolute; left: 0; width: 75%; margin-left: 25%;} div.sbscrbBox > div.sbscrbTopbox ul.sbscrbTxtbox {padding: 30px 15px; box-sizing: border-box; } } @media all and (max-width: 499px) {div.sbscrbBox > div.sbscrbLoginbox {padding:40px 15px 30px;} div.sbscrbBox > div.sbscrbLoginbox .textBox {font-size: 18px;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginLine {width: 100%;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginBox {padding: 30px 20px;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginBox .inputLabel {width: 100%;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .loginLine a.loginBt {float: none; width: 100%; height: auto; line-height: normal; margin-top: 20px;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .BtnBox > div {width: 100%; padding: 30px 0;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .BtnBox > div:nth-last-child(1) {padding-bottom: 0;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .BtnBox > div + div::before {top: 0; left: 0; content: ''; width: 100%; height: 1px;} div.sbscrbBox > div.sbscrbLoginbox .loginWrap .BtnBox > div a {padding: 10px 5px; } } @media (min-width: 320px) and (max-width:499px) {/*약관*/ div.clause001 .clauseWrap ul.clauseAllbox > li {width:50%; border-width: 0 0 1px 1px; box-sizing: border-box;} div.clause001 .clauseWrap ul.clauseAllbox > li:first-child, div.clause001 .clauseWrap ul.clauseAllbox > li:nth-child(2) {border-width: 1px 1px 1px 1px !important;} div.clause001 .clauseWrap ul.clauseAllbox > li:nth-child(2n) {border-width: 0 1px 1px 1px;} div.clause001 .clauseWrap ul.clauseAllbox > li:nth-child(2n+1) {clear: both;} div.clause001 .clauseWrap ul.clauseAllbox > li:last-child div h2 {left: 130px;} div.clause001 .clauseWrap ul.clauseAllbox > li h2 a {font-size: 14px; } } /************************************************/ /************************************************/ /********** 위 CSS로 충분하면 계속 확인 후 삭제 예정 **********/ /************************************************/ /************************************************/ /*sns 휴대폰인증*/ div.divSnsBtn table {margin-top: 10px; float: left; clear: both; text-align: center; overflow: hidden; border-radius: 3px;} div.divSnsBtn table tr {width: 16%; /* float:left; */ margin-right: 15px; position: relative; display: inline-block;} div.divSnsBtn table tr td {width: 100%; font-weight: 600; padding: 15px 0; float: left; border-radius: 3px; text-align: center; display: inline-block; font-size: 16px; padding-left: 10px;} div.divSnsBtn table tr.phone td {background: url("/images/wzwg/cmm/mber/sbscrb/phoneIcon001.png")no-repeat 5px #f1f1f1; color: #333;} div.divSnsBtn table tr.NAVER td {background: url(/images/wzwg/cmm/mber/sbscrb/naverIcon001.png)no-repeat 5px #2ec51a; background-size: 27px; color: #fff;} div.divSnsBtn table tr.KAKAO td {background: url("/images/wzwg/cmm/mber/sbscrb/kakaoIcon001.png")no-repeat 5px #f6e127; color: #333; background-size: 29px;} div.divSnsBtn table tr.Facebook td {background-color: #4064ac; color: #fff;} div.divSnsBtn table tr.Google td {background: url("/images/wzwg/cmm/mber/sbscrb/googleIcon001.png")no-repeat 5px #f8f8f8; color: #333; background-size: 29px;} div.divSnsBtn table tr:nth-child(4) td {background: url("/images/wzwg/cmm/mber/sbscrb/instaIcon001.png")no-repeat 5px, linear-gradient(to right, #ffc66c, #e74a54, #9f31a1, #1c10ef); color: #fff; /* background-size:24px; */ } div.divSnsBtn table tr:nth-child(5) td {background: url("/images/wzwg/cmm/mber/sbscrb/gooIcon001.png")no-repeat 5px #dc4a38; color: #fff;} div.divSnsBtn table tr:nth-child(6) td {background: url("/images/wzwg/cmm/mber/sbscrb/faceIcon001.png")no-repeat 5px #385899; color: #fff;} div.divSnsBtn table tr:nth-child(6) {margin-right: 0;} @media all and (min-width: 991px) {} @media all and (max-width: 990px) {} @media all and (min-width: 799px) and (max-width:990px) {} @media all and (min-width: 499px) and (max-width:799px) {div.sbscrb005 > table.sbscrbTable tr input {width:100%;} div.sbscrb005 > table.sbscrbTable tr span.sbscrbPwspan {color: #ff0000; margin: 5px 0 0 0; margin-left: 2px; line-height: 17px;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(2) input {width: 75%; box-sizing: border-box; margin-right: 1%;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(2) a.cfmBtn {width: 24%; text-align: center; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(4) input {width: 65%; box-sizing: border-box; margin-right: 1%;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(4) a.cfmBtn {width: 34%; text-align: center; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(5) input:last-child {width: 100%; margin-top: 10px;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(6) select {width: 28%; margin-right: 0; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(6) input {width: 32%; margin-right: 0; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(6) span {width: 2%; text-align: center; margin: 0 1%; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(7) select {width: 28%; margin-right: 0; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(7) input {width: 32%; margin-right: 0; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(7) span {width: 2%; text-align: center; margin: 0 1%; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr input[type="checkbox"] {width: auto;} div.sbscrb005 > table.sbscrbTable tr td textarea {width: 100%; font-size: 12px; padding: 5px; box-sizing: border-box; border: 1px solid #ddd;} div.sbscrb005 > table.sbscrbTable tr td ul li {width: 32%; line-height: 26px; text-align: left; margin-left: 1%; float: left;} div.sbscrb007 .sbscrbCustomers > ul.customersType {width: 100%; } /* div.sbscrb007 .sbscrbCustomers > ul.customersType > li ul.type {width:100%; margin-left:0; margin-right:0; display:block;} 2020.12.21 */ /*sns 휴대폰인증*/ div.divSnsBtn table tr {width: 30.3% !important; float: left; margin-bottom: 1%; margin-right: 3% !important;} div.divSnsBtn table tr:nth-child(3), table tr:nth-child(6) {width: 33.3% !important; margin-right: 0 !important; } } @media (max-width: 799px) {} @media all and (max-width: 499px) {div.sbscrb005 > table.sbscrbTable tr input {width:100%;} div.sbscrb005 > table.sbscrbTable tr span.sbscrbPwspan {color: #ff0000; margin: 5px 0 0 2px; line-height: 17px;} div.sbscrb005 > table.sbscrbTable tr td {padding: 10px; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(2) input {width: 70%; margin-right: 2%; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(2) a.cfmBtn {width: 28%; text-align: center; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(4) input {width: 56%; margin-right: 2%; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(4) a.cfmBtn {width: 42%; text-align: center; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(5) input:last-child {width: 100%; margin-top: 10px;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(6) select {width: 28%; margin-right: 0; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(6) input {width: 32%; margin-right: 0; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(6) span {width: 2%; text-align: center; margin: 0 1%; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(7) select {width: 28%; margin-right: 0; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(7) input {width: 32%; margin-right: 0; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(7) span {width: 2%; text-align: center; margin: 0 1%; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(3) td:nth-of-type(2) {vertical-align: top;} div.sbscrb005 > table.sbscrbTable tr input[type="checkbox"] {width: auto; border: none;} div.sbscrb005 > table.sbscrbTable tr td textarea {width: 100%; font-size: 12px; padding: 5px; box-sizing: border-box; border: 1px solid #ddd;} div.sbscrb005 > table.sbscrbTable tr td ul li {width: 32%; line-height: 26px; text-align: left; margin-left: 1%; float: left;} div.sbscrb003 > div.sbscrbLoginbox > div.sbscrbBtnbox div.sbscrbBtnwidth, div.sbscrb004 > div.sbscrbLoginbox div.sbscrbBtnbox div.sbscrbBtnwidth, div.sbscrb005 div.sbscrbBtnbox div.sbscrbBtnwidth, div.sbscrbWrap div.sbscrbBtnbox div.sbscrbBtnwidth, div.sbscrb007 div.sbscrbBtnbox div.sbscrbBtnwidth {max-width: 100%;} div.sbscrb007 .sbscrbCustomers > ul.customersType > li ul.type {width: 100%; } /*sns 휴대폰인증*/ div.divSnsBtn table tr {width: 49%; float: left; margin-bottom: 1%; margin-right: 0 !important;} div.divSnsBtn table tr:nth-child(odd) {width: 50%; margin-right: 1% !important; float: left; } } /* 190107 */ ul.sbscrbCmt {padding: 10px 0; word-break: keep-all; color: #5c5c5c;} ul.sbscrbCmt li {margin-top: 1px; letter-spacing: -0.5px; position: relative; padding-left: 15px; line-height: 150%;} ul.sbscrbCmt li:before {content: "-"; margin: 0 5px; position: absolute; top: 0; left: 0;} ul.sbscrbCmt li > span.sbscrbPointc {font-weight: 600; color: #005cbb;} ul.sbscrbTxtbox li > span.sbscrbPointc {font-weight: 600; color: #005cbb;} /* 20201221 login - join + add notice :SSJ */ .guideTip {width: 100%; max-width: 800px; margin: 10px auto 0; line-height: 150%; box-sizing: border-box; word-break: keep-all;} .newJoin .guideTip {margin-bottom: 21px;} .newJoin .wzbtn {background: #333; color: #fff; height: 90px; border-radius: 0; font-size: 18px !important;} .newJoin .wzbtn:hover {background: #000;} div.sbscrb007 .sbscrbCustomers > ul.customersType .guideTip {display: block !important; font-size: 15px !important; line-height: 150% !important; padding: 0 5px !important; word-break: keep-all;} @media all and (min-width: 850px) and (max-width:1190px) { div.sbscrb007 .sbscrbCustomers > ul.customersType .guideTip {height:88px; } } @media all and (min-width: 700px) and (max-width:849px) { div.sbscrb007 .sbscrbCustomers > ul.customersType .guideTip {height:133px; } } @media (max-width: 650px) { div.sbscrb007 .sbscrbCustomers > ul.customersType > li ul.type {width:98%;} div.sbscrb007 .sbscrbCustomers > ul.customersType > li:first-child .guideTip, div.sbscrb007 .sbscrbCustomers > ul.customersType > li:nth-child(2) .guideTip {height: 88px;} div.sbscrb007 .sbscrbCustomers > ul.customersType > li:nth-child(3) .guideTip, div.sbscrb007 .sbscrbCustomers > ul.customersType > li:nth-child(4) .guideTip {height: 66px; } } .pinnphon>li {border-top: none !important;} .pinnphon>li a {background: #333 !important; color: #fff;} .pinnphon>li a:hover {background: #000 !important;} .pinnphon>li a span {color: #fff !important; font-weight: 400 !important; padding-top: 0 !important; margin-bottom: 0 !important;} .pinnphon>li:only-child {float: none !important; display: inline-block;} /* 기존 cmm/mber/sbscrb/crtfc/style.css 통합 */ /*/cmm/mber/sbscrb/selectSbscrbCrtfc.do 에서만 적용됐던 부분.*/ /* 버튼 */ .sbscrbBtnbox {width: 100%; float: left; margin-top: 50px; text-align: center;} .sbscrbBtnbox .sbscrbBtnwidth {} @media all and (max-width: 499px) {div.sbscrb002 > div.sbscrbLoginbox {margin-top:20px;} div.sbscrb002 > div.sbscrbLoginbox > ul.typeBtn li {width: 100%;} div.sbscrb002 > div.sbscrbTopbox > ul.typeTop li a {padding: 8px 20px;} div.sbscrb002 > div.sbscrbLoginbox > ul.typeBtn li a p {font-size: 20px; color: #333; font-weight: 500;} div.sbscrb002 > div.sbscrbLoginbox > ul.typeBtn li a span {padding-right: 10px;} div.sbscrb002 > div.sbscrbLoginbox > ul.typeBtn li a span img {right: 5px;} div.sbscrb002 ul.sbscrbStep li img {width: 70px; padding: 10px;} div.sbscrb002 > div.sbscrbLoginbox > ul.typeBtn li {width: 100%; float: left; margin-right: 0; margin-bottom: 10px;} div.sbscrb002 > div.sbscrbLoginbox > ul.typeBtn li:last-child {width: 100%;} div.sbscrb003 > div.sbscrbLoginbox {width: 100%; float: left; margin-top: 20px;} div.sbscrb003 > div.sbscrbTopbox > ul.typeTop li a {padding: 8px 20px;} div.sbscrb003 > div.sbscrbLoginbox > div.sbscrbBtnbox div.sbscrbBtnwidth {max-width: 100%;} div.sbscrb003 > div.sbscrbLoginbox table.sbscrbTable tr:first-child input {width: 100%;} div.sbscrb003 > div.sbscrbLoginbox table.sbscrbTable tr input {width: 47%; box-sizing: border-box; margin-right: 0; padding: 0 3%;} div.sbscrb003 > div.sbscrbLoginbox table.sbscrbTable tr select {width: 100%; margin: 10px 0;} div.sbscrb003 > div.sbscrbLoginbox table.sbscrbTable tr td {padding: 10px;} div.sbscrb003 > div.sbscrbLoginbox table.sbscrbTable tr:last-child input {width: 55%; box-sizing: border-box; margin-right: 1%;} div.sbscrb003 > div.sbscrbLoginbox table.sbscrbTable tr a.cfmBtn {width: 44%; text-align: center; box-sizing: border-box;} div.sbscrb004 > div.sbscrbLoginbox {width: 100%; float: left; margin-top: 20px;} div.sbscrb004 > div.sbscrbTopbox > ul.typeTop li a {padding: 8px 20px;} div.sbscrb004 > div.sbscrbLoginbox div.sbscrbBtnbox div.sbscrbBtnwidth {max-width: 100%;} div.sbscrb005 > table.sbscrbTable tr input {width: 100%;} div.sbscrb005 > table.sbscrbTable tr span.sbscrbPwspan {color: #ff0000; margin: 5px 0 0 2px; line-height: 17px;} div.sbscrb005 > table.sbscrbTable tr td {padding: 10px; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(2) input {width: 70%; margin-right: 1%; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(2) a.cfmBtn {width: 29%; text-align: center; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(4) input {width: 57%; margin-right: 1%; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(4) a.cfmBtn {width: 42%; text-align: center; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(5) input:last-child {width: 100%; margin-top: 10px;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(6) select {width: 28%; margin-right: 0; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(6) input {width: 32%; margin-right: 0; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(6) span {width: 2%; text-align: center; margin: 0 1%; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(7) select {width: 28%; margin-right: 0; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(7) input {width: 32%; margin-right: 0; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(7) span {width: 2%; text-align: center; margin: 0 1%; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr input[type="checkbox"] {width: auto; border: none;} div.sbscrb005 > table.sbscrbTable tr td textarea {width: 100%; font-size: 12px; padding: 5px; box-sizing: border-box; border: 1px solid #ddd;} div.sbscrb005 > table.sbscrbTable tr td ul li {width: 32%; line-height: 26px; text-align: left; margin-left: 1%; float: left;} div.sbscrb007 .sbscrbCustomers > ul.customersType > li {width: 100%;} div.sbscrb007 .sbscrbCustomers > ul.customersType > li ul.type li {margin: 10px auto; text-align: center; overflow: hidden; float: none;} div.sbscrb007 .sbscrbCustomers > ul.customersType > li ul.type li > a {width: 100%; box-sizing: border-box;} div.sbscrb003 > div.sbscrbLoginbox > div.sbscrbBtnbox div.sbscrbBtnwidth, div.sbscrb004 > div.sbscrbLoginbox div.sbscrbBtnbox div.sbscrbBtnwidth, div.sbscrb005 div.sbscrbBtnbox div.sbscrbBtnwidth, div.sbscrbWrap div.sbscrbBtnbox div.sbscrbBtnwidth, div.sbscrb007 div.sbscrbBtnbox div.sbscrbBtnwidth {max-width: 100%; } /*sns 휴대폰인증*/ div.divSnsBtn table tr {width: 49%; float: left; margin-bottom: 1%; margin-right: 0 !important;} div.divSnsBtn table tr:nth-child(odd) {width: 50%; margin-right: 1% !important; float: left; } } @media all and (min-width: 499px) and (max-width:799px) {div.sbscrb002 > div.sbscrbLoginbox {margin-top:30px;} div.sbscrb002 > div.sbscrbLoginbox > ul.typeBtn li a p {font-size: 20px; color: #333; font-weight: 500;} div.sbscrb002 > div.sbscrbLoginbox > ul.typeBtn li {width: 49%; float: left; margin-bottom: 1%;} div.sbscrb002 > div.sbscrbLoginbox > ul.typeBtn li:last-child {width: 49%;} div.sbscrb003 > div.sbscrbLoginbox {margin-top: 30px;} div.sbscrb003 > div.sbscrbLoginbox table.sbscrbTable tr:first-child input {width: 100%;} div.sbscrb003 > div.sbscrbLoginbox table.sbscrbTable tr:last-child input {width: 64%; box-sizing: border-box; margin-right: 1%;} div.sbscrb003 > div.sbscrbLoginbox table.sbscrbTable tr a.cfmBtn {width: 35%; text-align: center; box-sizing: border-box;} div.sbscrb003 > div.sbscrbLoginbox table.sbscrbTable tr input {width: 47%; box-sizing: border-box; margin-right: 0; padding: 0 3%;} div.sbscrb003 > div.sbscrbLoginbox table.sbscrbTable tr select {width: 100%; margin: 10px 0;} div.sbscrb003 > div.sbscrbLoginbox table.sbscrbTable tr span {width: 4%; text-align: center; margin: 0 1%;} div.sbscrb003 > div.sbscrbLoginbox table.sbscrbTable tr td {box-sizing: border-box; width: 100%; padding: 10px;} div.sbscrb004 > div.sbscrbLoginbox {margin-top: 30px;} div.sbscrb005 > table.sbscrbTable tr td {padding: 10px; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr input {width: 100%;} div.sbscrb005 > table.sbscrbTable tr span.sbscrbPwspan {color: #ff0000; margin: 5px 0 0 0; margin-left: 2px; line-height: 17px;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(2) input {width: 75%; box-sizing: border-box; margin-right: 1%;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(2) a.cfmBtn {width: 24%; text-align: center; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(4) input {width: 65%; box-sizing: border-box; margin-right: 1%;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(4) a.cfmBtn {width: 34%; text-align: center; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(5) input:last-child {width: 100%; margin-top: 10px;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(6) select {width: 28%; margin-right: 0; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(6) input {width: 32%; margin-right: 0; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(6) span {width: 2%; text-align: center; margin: 0 1%; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(7) select {width: 28%; margin-right: 0; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(7) input {width: 32%; margin-right: 0; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr:nth-of-type(7) span {width: 2%; text-align: center; margin: 0 1%; box-sizing: border-box;} div.sbscrb005 > table.sbscrbTable tr input[type="checkbox"] {width: auto;} div.sbscrb005 > table.sbscrbTable tr td textarea {width: 100%; font-size: 12px; padding: 5px; box-sizing: border-box; border: 1px solid #ddd;} div.sbscrb005 > table.sbscrbTable tr td ul li {width: 32%; line-height: 26px; text-align: left; margin-left: 1%; float: left;} div.sbscrb007 .sbscrbCustomers > ul.customersType {width: 100%;} div.sbscrb007 .sbscrbCustomers > ul.customersType > li {width: 100%; background: #f9f9f9; padding: 20px 10px; margin-bottom: 20px; border: 1px solid rgba(0,0,0,0.05);} div.sbscrb007 .sbscrbCustomers > ul.customersType > li ul.type {width: 100%; margin-left: 0; margin-right: 0; display: block;} div.sbscrb007 .sbscrbCustomers > ul.customersType > li ul.type li {width: 50%; } /*sns 휴대폰인증*/ div.divSnsBtn table tr {width: 32.3% !important; float: left; margin-bottom: 1%; margin-right: 1% !important;} div.divSnsBtn table tr:nth-child(3), table tr:nth-child(6) {width: 33.3% !important; margin-right: 0 !important; } } @media all and (min-width: 799px) and (max-width:990px) {div.sbscrb005 > table.sbscrbTable tr span.sbscrbPwspan {color:#ff0000; margin: 5px 0 0 2px; line-height: 17px;} div.sbscrb007 .sbscrbCustomers > ul.customersType > li {width: 50%; padding-right: 10px; box-sizing: border-box;} div.sbscrb007 .sbscrbCustomers > ul.customersType > li ul.type li > a {padding: 25px; } } @media all and (min-width: 991px) {div.sbscrb007 .sbscrbCustomers > ul.customersType > li {width:50%; padding-right: 0px; box-sizing: border-box;} div.sbscrb007 .sbscrbCustomers > ul.customersType > li ul.type li > a {padding: 30px 55px; } } div.sbscrb002 > div.sbscrbBtmbox {margin-top: 30px;} div.sbscrb002 > div.sbscrbBtmbox > ul.typeBtn li a p {font-size: 20px; color: #333; font-weight: 500;} /* 비밀번호 찾기 */ .sbscrb003 {} .sbscrb003 .sbscrbBtmbox {} .sbscrb003 .sbscrbBtmbox>.sbscrbTable {width: 100%; max-width: 800px; border-top: 2px solid #333; margin-top: 50px; margin: 50px auto 0;} .sbscrb003 .sbscrbBtmbox>.sbscrbTable tr:only-child th {padding-top: 70px; font-size: 15px; text-align: left; font-weight: 400;} .sbscrb003 .sbscrbBtmbox>.sbscrbTable tr:only-child td {padding-top: 70px;} .sbscrb003 .sbscrbBtmbox>.sbscrbTable tr:only-child td input[type="password"] {border: 1px solid #ccc; width: 100%; height: 50px;} .sbscrb003 .sbscrbBtmbox .sbscrbNaming {font-size: 20px; box-sizing: border-box; font-weight: 600;} .sbscrb003 .sbscrbBtmbox .sbscrbNaming + .sbscrbTable {max-width: 100%; border: 1px solid #e7e7e7; border-top: 2px solid #000;} .sbscrb003 .sbscrbBtmbox .sbscrbNaming + .sbscrbTable tr:first-child th, .sbscrb003 .sbscrbBtmbox .sbscrbNaming + .sbscrbTable tr:first-child td {padding-top: 70px;} .sbscrb003 .sbscrbBtmbox .sbscrbNaming + .sbscrbTable tr:last-child th, .sbscrb003 .sbscrbBtmbox .sbscrbNaming + .sbscrbTable tr:last-child td {padding-bottom: 70px;} .sbscrb003 .sbscrbBtmbox .sbscrbNaming + .sbscrbTable th {font-size: 15px; font-weight: 500; padding: 5px;} .sbscrb003 .sbscrbBtmbox .sbscrbNaming + .sbscrbTable td {padding: 5px;} .sbscrb003 .sbscrbBtmbox .sbscrbNaming + .sbscrbTable input {border: 1px solid #ccc; height: 50px; width: 100%; max-width: 550px;} .sbscrb003 .sbscrbBtmbox .sbscrbNaming + .sbscrbTable + .sbscrbCmt {margin-top: 10px;} .sbscrb003 .sbscrbBtmbox .sbscrbNaming + .sbscrbTable + .sbscrbCmt li {font-size: 15px;} @media (max-width:990px) { .sbscrb003 .sbscrbBtmbox .sbscrbNaming {margin-top:30px;} .sbscrb003 .sbscrbBtmbox .sbscrbNaming + .sbscrbTable {margin-top:20px;} }