Skip to content

T
TDS_Myshop_Detail
Commit b723c705 authored by 임지연_이모션's avatar 임지연_이모션
Browse files
Options

[임지연/이모션]가입정보추가

parent 9e28c32c
Hide whitespace changes
Inline Side-by-side
Showing with 691 additions and 497 deletions
.gitignore 0 → 100644
View file @ b723c705
.vscode/settings.json
src/assets/css/seller_common.css
View file @ b723c705
/* common */ /* common */
.table-row-list caption { .table-row-list caption {
overflow: hidden; overflow: hidden;
position: static; position: static;
width: 1px; width: 1px;
height: 1px; height: 1px;
padding: 0; padding: 0;
margin-top: -1px; margin-top: -1px;
font-size: 0; font-size: 0;
line-height: 0; line-height: 0;
text-indent: -999px; text-indent: -999px;
} }
.table-row-list { .table-row-list {
border-top: 0; border-top: 0;
font-family: 'Spoqa Han Sans', sans-serif; font-family: 'Spoqa Han Sans', sans-serif;
} }
.ellipsis { .ellipsis {
overflow: hidden; overflow: hidden;
display: block; display: block;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.seller-txt-style { .seller-txt-style {
text-decoration: underline; text-decoration: underline;
color: #429be6; color: #429be6;
font-size: 1.2rem; font-size: 1.2rem;
} }
.l-grid.l-seller { .l-grid.l-seller {
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
} }
.seller-wrap { .seller-wrap {
font-size: 1.3rem; font-size: 1.3rem;
background-color: #efeff1; background-color: #efeff1;
font-family: 'Spoqa Han Sans'; font-family: 'Spoqa Han Sans';
} }
.seller-wrap .content { .seller-wrap .content {
padding-top: 9rem; padding-top: 9rem;
/* padding-bottom: 4rem; */ /* padding-bottom: 4rem; */
} }
.seller-wrap.seller-product-detail .content { .seller-wrap.seller-product-detail .content {
padding-top: 6.2rem; padding-top: 6.2rem;
padding-bottom: 0; padding-bottom: 0;
} }
/* 상단 "이전버튼 헤더"와 "프로그레스 바"가 같이 있는 경우 */ /* 상단 "이전버튼 헤더"와 "프로그레스 바"가 같이 있는 경우 */
.header-sticky.bar-sticky .sticky-top { .header-sticky.bar-sticky .sticky-top {
top: 5.2rem; top: 5.2rem;
} }
.seller-wrap .sticky-top { .seller-wrap .sticky-top {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
z-index: 10010; z-index: 10010;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
max-height: 100%; max-height: 100%;
background-color: #f6f8fa; background-color: #f6f8fa;
box-shadow: 0 4px 10px 0 rgba(207, 207, 207, 0.88); box-shadow: 0 4px 10px 0 rgba(207, 207, 207, 0.88);
} }
.seller-wrap .spot-step .step-list { .seller-wrap .spot-step .step-list {
justify-content: space-between; justify-content: space-between;
margin: 0 auto; margin: 0 auto;
max-width: 28.8rem max-width: 28.8rem
} }
.seller-wrap .spot-step .step-list, .seller-wrap .spot-step .step-list,
.seller-wrap .spot-step .step-list .step-item { .seller-wrap .spot-step .step-list .step-item {
display: flex display: flex
} }
.seller-wrap .spot-step .step-list .step-item { .seller-wrap .spot-step .step-list .step-item {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
flex-grow: 1; flex-grow: 1;
padding: 2.1rem 0; padding: 2.1rem 0;
width: 0; width: 0;
font-size: 1.3rem; font-size: 1.3rem;
line-height: 1; line-height: 1;
color: #909090; color: #909090;
text-align: center; text-align: center;
font-weight: 600; font-weight: 600;
} }
.seller-wrap .spot-step .step-list .step-item .link-block { .seller-wrap .spot-step .step-list .step-item .link-block {
display: block; display: block;
} }
.seller-wrap .spot-step .step-list .step-item .link-block:before { .seller-wrap .spot-step .step-list .step-item .link-block:before {
content: ""; content: "";
display: inline-block; display: inline-block;
border-radius: 50%; border-radius: 50%;
width: 27px; width: 27px;
height: 27px; height: 27px;
line-height: 27px; line-height: 27px;
box-shadow: -4px -6px 10px 0 #ffffff, 4px 7px 10px 0 #dde0e2, -2px -2px 2px 0 #ffffff; box-shadow: -4px -6px 10px 0 #ffffff, 4px 7px 10px 0 #dde0e2, -2px -2px 2px 0 #ffffff;
background-color: #f6f8fa; background-color: #f6f8fa;
text-align: center; text-align: center;
font-family: TgothicBlack; font-family: TgothicBlack;
} }
.seller-wrap .spot-step .step-list .step-item .link-block span { .seller-wrap .spot-step .step-list .step-item .link-block span {
margin-top: .6rem; margin-top: .6rem;
display: block; display: block;
font-weight: 600; font-weight: 600;
} }
.seller-wrap .spot-step .step-list .step-item.end .link-block span { .seller-wrap .spot-step .step-list .step-item.end .link-block span {
color: #f76252; color: #f76252;
} }
.seller-wrap .spot-step .step-list .step-item .link-block[aria-current=step] { .seller-wrap .spot-step .step-list .step-item .link-block[aria-current=step] {
color: #f76252; color: #f76252;
font-weight: 700; font-weight: 700;
} }
.seller-wrap .spot-step .step-list .step-item:nth-child(1) .link-block:before { .seller-wrap .spot-step .step-list .step-item:nth-child(1) .link-block:before {
content: '1'; content: '1';
} }
.seller-wrap .spot-step .step-list .step-item:nth-child(2) .link-block:before { .seller-wrap .spot-step .step-list .step-item:nth-child(2) .link-block:before {
content: '2'; content: '2';
} }
.seller-wrap .spot-step .step-list .step-item:nth-child(3) .link-block:before { .seller-wrap .spot-step .step-list .step-item:nth-child(3) .link-block:before {
content: '3'; content: '3';
} }
.seller-wrap .spot-step .step-list .step-item.end .link-block:before { .seller-wrap .spot-step .step-list .step-item.end .link-block:before {
color: #f76252; color: #f76252;
content: ''; content: '';
background: url(../img/seller/bg_check_step.png) no-repeat center center; background: url(../img/seller/bg_check_step.png) no-repeat center center;
background-size: 50%; background-size: 50%;
} }
/* seller process 1 */ /* seller process 1 */
.seller-product-detail { .seller-product-detail {
background-color: #efeff1; background-color: #efeff1;
font-family: 'Spoqa Han Sans'; font-family: 'Spoqa Han Sans';
} }
.seller-product-detail .l-grid { .seller-product-detail .l-grid {
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
} }
.seller-product-detail .product-detail-header { .seller-product-detail .product-detail-header {
background-color: #efeff1; background-color: #efeff1;
} }
.header-sticky .product-detail-header { .header-sticky .product-detail-header {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
z-index: 10000; z-index: 10000;
} }
.seller-product-detail .product-detail-header .top-header { .seller-product-detail .product-detail-header .top-header {
width: calc(100% - 40px); width: calc(100% - 40px);
height: 52px; height: 52px;
margin: 0 auto; margin: 0 auto;
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
-webkit-box-pack: justify; -webkit-box-pack: justify;
-ms-flex-pack: justify; -ms-flex-pack: justify;
justify-content: space-between; justify-content: space-between;
} }
.seller-product-detail .product-detail-header .top-header .top-header-left { .seller-product-detail .product-detail-header .top-header .top-header-left {
width: auto; width: auto;
height: 25px; height: 25px;
} }
.seller-product-detail .product-detail-header .top-header .top-header-left img { .seller-product-detail .product-detail-header .top-header .top-header-left img {
width: 18px; width: 18px;
height: 16px; height: 16px;
} }
.seller-product-detail .product-detail-header .top-header .top-header-left span { .seller-product-detail .product-detail-header .top-header .top-header-left span {
margin: 0 0 0 13px; margin: 0 0 0 13px;
font-family: inherit; font-family: inherit;
font-size: 18px; font-size: 18px;
font-weight: normal; font-weight: normal;
font-stretch: normal; font-stretch: normal;
font-style: normal; font-style: normal;
line-height: normal; line-height: normal;
letter-spacing: -0.53px; letter-spacing: -0.53px;
color: #000000; color: #000000;
} }
.seller-product-detail .product-detail-header .top-header .top-header-left span.blind { .seller-product-detail .product-detail-header .top-header .top-header-left span.blind {
display: none; display: none;
} }
.seller-product-detail .product-detail-header .top-header .top-header-right { .seller-product-detail .product-detail-header .top-header .top-header-right {
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
} }
.seller-product-detail .product-detail-header .top-header .top-header-right .ico-cart { .seller-product-detail .product-detail-header .top-header .top-header-right .ico-cart {
width: 19px; width: 19px;
height: 20px; height: 20px;
margin-right: 17px; margin-right: 17px;
padding-top: 1px; padding-top: 1px;
} }
.seller-product-detail .product-detail-header .top-header .top-header-right .ico-cart img { .seller-product-detail .product-detail-header .top-header .top-header-right .ico-cart img {
width: 19px; width: 19px;
height: 20px; height: 20px;
} }
.seller-product-detail .product-detail-header .top-header .top-header-right .ico-mypage { .seller-product-detail .product-detail-header .top-header .top-header-right .ico-mypage {
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
.seller-product-detail .product-detail-header .top-header .top-header-right .ico-mypage img { .seller-product-detail .product-detail-header .top-header .top-header-right .ico-mypage img {
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
.seller-product-detail h1, .seller-product-detail h1,
...@@ -242,184 +242,187 @@ ...@@ -242,184 +242,187 @@
.seller-product-detail h3, .seller-product-detail h3,
.seller-product-detail strong, .seller-product-detail strong,
.seller-product-detail em { .seller-product-detail em {
font-weight: 400; font-weight: 400;
} }
.seller-detail-header { .seller-detail-header {
text-align: center; text-align: center;
padding-bottom: 2rem; padding-bottom: 2rem;
} }
.seller-detail-header .product-name>h1 { .seller-detail-header .product-name>h1 {
font-size: 2rem; font-size: 2rem;
font-weight: 400; font-weight: 400;
color: #000; color: #000;
line-height: normal; line-height: normal;
} }
.seller-detail-header .product-name>span { .seller-detail-header .product-name>span {
display: inline-block; display: inline-block;
font-size: 1.3rem; font-size: 1.3rem;
margin-top: 0.8rem; margin-top: 0.8rem;
} }
.seller-detail-header .product-key-visual { .seller-detail-header .product-key-visual {
margin: 2.5rem 0 2rem; margin: 2.5rem 0 2rem;
} }
.product-key-visual .img-area img { .product-key-visual .img-area img {
border-radius: 13px; border-radius: 13px;
} }
.seller-detail-header .link-kakako-chat { .seller-detail-header .link-kakako-chat {
font-size: 1.3rem; font-size: 1.3rem;
} }
.seller-detail-header .link-kakako-chat:before { .seller-detail-header .link-kakako-chat:before {
content: ''; content: '';
display: inline-block; display: inline-block;
width: 20px; width: 20px;
height: 18px; height: 18px;
background: url(../img/seller/ico_kakao@2x.png) no-repeat 0 0; background: url(../img/seller/ico_kakao@2x.png) no-repeat 0 0;
background-size: 100% 100%; background-size: 100% 100%;
vertical-align: top; vertical-align: top;
margin-right: 4px; margin-right: 4px;
} }
.opt-group { .opt-group {
padding: 1.6rem 0 2rem; padding: 1.6rem 0 2rem;
border-top: 1px solid #babcbd; border-top: 1px solid #babcbd;
clear: both; clear: both;
} }
.opt-group .btn-popup{ .opt-group .btn-popup {
float: right; float: right;
} }
.opt-group:nth-of-type(1) { .opt-group:nth-of-type(1) {
border-top: 0; border-top: 0;
} }
.inner-opt-desc { .inner-opt-desc {
margin-top: 3rem; margin-top: 3rem;
} }
.discount-types-tit{
margin-top:1rem; .discount-types-tit {
font-size: 1.5rem; margin-top: 1rem;
font-weight: 400; font-size: 1.5rem;
font-weight: 400;
} }
.opt-group-tit { .opt-group-tit {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 400; font-weight: 400;
} }
.opt-group-con { .opt-group-con {
margin-top: 1rem; margin-top: 1rem;
} }
.opt-group-con .dsc-list-wrap{ .opt-group-con .dsc-list-wrap {
margin-top:0.6rem; margin-top: 0.6rem;
} }
.opt-group-con .txt-info { .opt-group-con .txt-info {
font-size: 1.3rem; font-size: 1.3rem;
color: #757575; color: #757575;
letter-spacing: -0.33px; letter-spacing: -0.33px;
} }
.opt-group-con .btn-area-center { .opt-group-con .btn-area-center {
margin-top: 4px; margin-top: 4px;
text-align: center; text-align: center;
} }
.opt-group-notice { .opt-group-notice {
color: #3B98E6; color: #3B98E6;
margin-top: 1.6rem; margin-top: 1.6rem;
font-size: 1.2rem; font-size: 1.2rem;
text-decoration: underline; text-decoration: underline;
} }
.opt-capacity .product-capacities { .opt-capacity .product-capacities {
margin-top: 0; margin-top: 0;
} }
.opt-group .sort-lists, .opt-group .sort-lists,
.opt-group .sort-lists .sort-items { .opt-group .sort-lists .sort-items {
display: flex; display: flex;
} }
.opt-group .sort-lists { .opt-group .sort-lists {
justify-content: space-between; justify-content: space-between;
margin: 0 -.6rem 0 -.6rem; margin: 0 -.6rem 0 -.6rem;
flex-wrap: wrap; flex-wrap: wrap;
} }
.opt-group .sort-lists .sort-items { .opt-group .sort-lists .sort-items {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #757575; color: #757575;
border: 1px solid #c7c7c7; border: 1px solid #c7c7c7;
border-radius: 4px; border-radius: 4px;
flex-direction: column; flex-direction: column;
margin: 0 .6rem; margin: 0 .6rem;
width: calc(50% - 1.2rem); width: calc(50% - 1.2rem);
padding: 2rem; padding: 2rem;
} }
.opt-group .sort-lists .sort-items[aria-selected=true] { .opt-group .sort-lists .sort-items[aria-selected=true] {
color: #000; color: #000;
border-color: #000 border-color: #000
} }
.opt-group .sort-lists .sort-items.disabled, .opt-group .sort-lists .sort-items.disabled,
.opt-group .sort-lists .sort-items[aria-disabled], .opt-group .sort-lists .sort-items[aria-disabled],
.opt-group .sort-lists .sort-items[disabled] { .opt-group .sort-lists .sort-items[disabled] {
pointer-events: none; pointer-events: none;
cursor: default; cursor: default;
color: hsla(0, 0%, 40%, .4) color: hsla(0, 0%, 40%, .4)
} }
.opt-delivery .sort-lists .sort-items:nth-child(n+3) { .opt-delivery .sort-lists .sort-items:nth-child(n+3) {
margin-top: 1.2rem; margin-top: 1.2rem;
} }
.opt-delivery .sort-lists .sort-items>.tit { .opt-delivery .sort-lists .sort-items>.tit {
font-size: 2rem; font-size: 2rem;
} }
.opt-delivery .sort-lists .sort-items>.desc { .opt-delivery .sort-lists .sort-items>.desc {
font-size: 1.3rem; font-size: 1.3rem;
margin-top: 1rem; margin-top: 1rem;
line-height: 1.4; line-height: 1.4;
letter-spacing: -0.05em; letter-spacing: -0.05em;
} }
.opt-delivery .sort-lists .sort-items .desc>strong { .opt-delivery .sort-lists .sort-items .desc>strong {
color: #f76252; color: #f76252;
} }
.opt-delivery .buyer-info { .opt-delivery .buyer-info {
padding: 2rem; padding: 2rem;
background-color: #fafafa; background-color: #fafafa;
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 1.7rem; margin-bottom: 1.7rem;
border-radius: 8px; border-radius: 8px;
} }
.opt-delivery .buyer-info .buyer-tit { .opt-delivery .buyer-info .buyer-tit {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1;
padding-bottom: 1.6rem; padding-bottom: 1.6rem;
} }
.opt-delivery .buyer-info .buyer-tit .tit { .opt-delivery .buyer-info .buyer-tit .tit {
font-size: 1.5rem; font-size: 1.5rem;
} }
.opt-delivery .buyer-info .buyer-tit .notice { .opt-delivery .buyer-info .buyer-tit .notice {
font-size: 1.2rem; font-size: 1.2rem;
text-decoration: underline; text-decoration: underline;
color: #8f8f90; color: #8f8f90;
} }
.opt-delivery .buyer-info .buyer-list {} .opt-delivery .buyer-info .buyer-list {}
...@@ -427,25 +430,25 @@ ...@@ -427,25 +430,25 @@
.opt-delivery .buyer-info .buyer-list .buyer-item {} .opt-delivery .buyer-info .buyer-list .buyer-item {}
.opt-delivery .buyer-info .btn-submit { .opt-delivery .buyer-info .btn-submit {
text-align: center; text-align: center;
height: 44px; height: 44px;
border: 1px solid #ccc; border: 1px solid #ccc;
width: 100%; width: 100%;
margin-top: 3rem; margin-top: 3rem;
border-radius: 4px; border-radius: 4px;
font-size: 1.3rem; font-size: 1.3rem;
} }
.opt-delivery .buyer-item .title { .opt-delivery .buyer-item .title {
font-size: 1.3rem; font-size: 1.3rem;
margin: 2rem 0 .9rem; margin: 2rem 0 .9rem;
} }
.opt-delivery .buyer-item .c-input, .opt-delivery .buyer-item .c-input,
.opt-delivery .buyer-item .c-input-outline, .opt-delivery .buyer-item .c-input-outline,
.opt-delivery .buyer-item .c-input .input, .opt-delivery .buyer-item .c-input .input,
.opt-delivery .buyer-item .c-input-outline .input { .opt-delivery .buyer-item .c-input-outline .input {
font-size: 1.3rem; font-size: 1.3rem;
} }
.opt-delivery .buyer-item .btn-default, .opt-delivery .buyer-item .btn-default,
...@@ -457,573 +460,634 @@ ...@@ -457,573 +460,634 @@
.opt-delivery .buyer-item .btn-outline-secondary, .opt-delivery .buyer-item .btn-outline-secondary,
.opt-delivery .buyer-item .btn-primary, .opt-delivery .buyer-item .btn-primary,
.btn-secondary { .btn-secondary {
font-size: 1.3rem; font-size: 1.3rem;
} }
.opt-delivery .buyer-item .c-input>span { .opt-delivery .buyer-item .c-input>span {
display: block; display: block;
color: #4f4f4f; color: #4f4f4f;
} }
.favorite-seller { .favorite-seller {
position: relative; position: relative;
border-top: 1px solid #fff; border-top: 1px solid #fff;
padding: 3.6rem 0 2.4rem; padding: 3.6rem 0 2.4rem;
} }
.favorite-seller:before { .favorite-seller:before {
position: absolute; position: absolute;
top: -1px; top: -1px;
left: 0px; left: 0px;
content: ""; content: "";
display: block; display: block;
width: 100%; width: 100%;
height: 1px; height: 1px;
background-color: #d8d8d8; background-color: #d8d8d8;
border-top: 1px solid #fff; border-top: 1px solid #fff;
} }
.favorite-seller-tit { .favorite-seller-tit {
font-size: 1.5rem; font-size: 1.5rem;
} }
.favorite-seller-list { .favorite-seller-list {
display: flex; display: flex;
margin-top: 1.6rem; margin-top: 1.6rem;
} }
.favorite-seller-item { .favorite-seller-item {
justify-content: space-between; justify-content: space-between;
text-align: center; text-align: center;
padding: 1.2rem 1.3rem; padding: 1.2rem 1.3rem;
width: 33.33%; width: 33.33%;
} }
.favorite-seller-thumb { .favorite-seller-thumb {
width: 80px; width: 80px;
height: 80px; height: 80px;
border-radius: 8px; border-radius: 8px;
} }
.favorite-seller-name { .favorite-seller-name {
display: block; display: block;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow-wrap: break-word; overflow-wrap: break-word;
line-height: 1.3; line-height: 1.3;
max-height: 36.4px; max-height: 36.4px;
word-break: break-all; word-break: break-all;
white-space: normal; white-space: normal;
color: #222; color: #222;
font-size: 1.2rem; font-size: 1.2rem;
letter-spacing: -0.05em; letter-spacing: -0.05em;
margin-top: .7rem; margin-top: .7rem;
} }
.seller-tab-area { .seller-tab-area {
background-color: #fff; background-color: #fff;
margin-right: -20px; margin-right: -20px;
margin-left: -20px; margin-left: -20px;
} }
.seller-tab-area .tab-list { .seller-tab-area .tab-list {
display: flex; display: flex;
border-bottom: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1;
} }
.seller-tab-area .tab-item { .seller-tab-area .tab-item {
width: 50%; width: 50%;
} }
.seller-tab-area .tab-item>a { .seller-tab-area .tab-item>a {
display: block; display: block;
text-align: center; text-align: center;
padding: 14px 21px; padding: 14px 21px;
} }
.seller-tab-area .tab-item.on>a { .seller-tab-area .tab-item.on>a {
border-bottom: 3px solid #000; border-bottom: 3px solid #000;
font-weight: 600; font-weight: 600;
} }
.seller-tab-area .tab-content { .seller-tab-area .tab-content {
padding: 40px 20px; padding: 40px 20px;
} }
.seller-tab-area .tab-content img { .seller-tab-area .tab-content img {
max-width: 100%; max-width: 100%;
} }
.sticky-bar .layer-pay { .sticky-bar .layer-pay {
transition: all .3s ease; transition: all .3s ease;
box-shadow: 0 -2px 10px 0 rgba(207, 207, 207, 0.88); box-shadow: 0 -2px 10px 0 rgba(207, 207, 207, 0.88);
border-top: 0; border-top: 0;
border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
/* 2021.09.03 수정 */ /* 2021.09.03 수정 */
} }
.sticky-bar.active .layer-pay { .sticky-bar.active .layer-pay {
transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);
} }
.sticky-bar .l-grid { .sticky-bar .l-grid {
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
} }
.sticky-bar .layer-pay .layer-body { .sticky-bar .layer-pay .layer-body {
position: relative; position: relative;
padding-top: 2.3rem; padding-top: 2.3rem;
display: none; display: none;
} }
.sticky-bar .layer-pay .layer-body.show { .sticky-bar .layer-pay .layer-body.show {
display: block; display: block;
} }
.sticky-bar .layer-pay .layer-body.on { .sticky-bar .layer-pay .layer-body.on {
padding-bottom: 0.8rem; padding-bottom: 0.8rem;
} }
.sticky-bar .layer-pay .layer-body .price-area { .sticky-bar .layer-pay .layer-body .price-area {
display: none; display: none;
} }
.sticky-bar .layer-pay .layer-body .btn-toggle { .sticky-bar .layer-pay .layer-body .btn-toggle {
position: absolute; position: absolute;
left: 50%; left: 50%;
top: -10px; top: -10px;
width: 18px; width: 18px;
height: 6px; height: 6px;
background: url(../img/seller/floating_btn_up@2x.png) no-repeat center center; background: url(../img/seller/floating_btn_up@2x.png) no-repeat center center;
background-size: 18px 6px; background-size: 18px 6px;
transform: translateX(-50%); transform: translateX(-50%);
padding: 10px; padding: 10px;
} }
.sticky-bar .layer-pay .layer-body.on .price-area { .sticky-bar .layer-pay .layer-body.on .price-area {
display: flex; display: flex;
} }
.sticky-bar .layer-pay .layer-body.on .btn-toggle { .sticky-bar .layer-pay .layer-body.on .btn-toggle {
transform: translateX(-50%) rotateX(180deg); transform: translateX(-50%) rotateX(180deg);
} }
.sticky-bar .layer-pay .layer-foot { .sticky-bar .layer-pay .layer-foot {
padding-bottom: 2.1rem; padding-bottom: 2.1rem;
} }
.sticky-bar .layer-pay .price-area { .sticky-bar .layer-pay .price-area {
padding-top: 0; padding-top: 0;
align-items: flex-start; align-items: flex-start;
} }
.sticky-bar .layer-pay .price-area+.price-area { .sticky-bar .layer-pay .price-area+.price-area {
margin-top: 0.8rem; margin-top: 0.8rem;
} }
.sticky-bar .layer-pay .btn-area { .sticky-bar .layer-pay .btn-area {
font-size: 1.3rem; font-size: 1.3rem;
padding-top: 0; padding-top: 0;
} }
.sticky-bar .layer-pay .btn-area .btn-primary { .sticky-bar .layer-pay .btn-area .btn-primary {
box-shadow: -4px -6px 10px 0 rgba(255, 255, 255, 0.83), 4px 7px 10px 0 #d3d3d3, -1px -1px 1px 0 #ffffff; box-shadow: -4px -6px 10px 0 rgba(255, 255, 255, 0.83), 4px 7px 10px 0 #d3d3d3, -1px -1px 1px 0 #ffffff;
min-width: 70%; min-width: 70%;
} }
.sticky-bar .layer-pay .btn-area .btn-light { .sticky-bar .layer-pay .btn-area .btn-light {
color: #f76252; color: #f76252;
box-shadow: -4px -6px 10px 0 #ffffff, 4px 7px 10px 0 #dde0e2, -1px -1px 2px 0 #ffffff; box-shadow: -4px -6px 10px 0 #ffffff, 4px 7px 10px 0 #dde0e2, -1px -1px 2px 0 #ffffff;
background-color: #f6f8fa; background-color: #f6f8fa;
} }
.sticky-bar .layer-pay .btn-area.disabled [class^=btn-] { .sticky-bar .layer-pay .btn-area.disabled [class^=btn-] {
opacity: 0.6; opacity: 0.6;
pointer-events: none; pointer-events: none;
} }
.sticky-bar .layer-pay .price-area .price .num { .sticky-bar .layer-pay .price-area .price .num {
font-size: 1.3rem; font-size: 1.3rem;
color: #000; color: #000;
} }
.sticky-bar .layer-pay .price-area .price .num>strong { .sticky-bar .layer-pay .price-area .price .num>strong {
color: #f76252; color: #f76252;
font-size: 1.6rem; font-size: 1.6rem;
} }
.sticky-bar .layer-pay .price-area .price .desc { .sticky-bar .layer-pay .price-area .price .desc {
display: block; display: block;
color: #8d8d8d; color: #8d8d8d;
font-size: 1rem; font-size: 1rem;
}
/* new 가입자 정보 22.01.03 seller_subscriber_info */
.seller-wrap.seller_subscriber_info .content {
padding-top: 6.2rem;
padding-bottom: 0;
}
.subscrib-txt-msg {
font-size: 1.5rem;
letter-spacing: -0.5px;
font-weight: normal;
color: #222;
padding-bottom:4rem;
}
.bottom-btn-bar {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 10010;
width: 100%;
}
.seller_subscriber_info .layer-pay {
border-top: 0;
background-color: #efeff1;
box-shadow: none;
}
.seller_subscriber_info .l-grid {
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
}
.seller_subscriber_info .layer-pay .btn-area {
font-size: 1.3rem;
padding-top: 0;
display: flex;
}
.seller_subscriber_info .layer-pay .btn-area button {
height: 44px;
line-height: 44px;
}
.seller_subscriber_info .layer-pay .btn-area .btn-primary {
min-width: auto;
margin: 0 0.4rem;
box-shadow: -4px -6px 10px 0 rgba(255, 255, 255, 0.83), 4px 7px 10px 0 #d3d3d3, -1px -1px 1px 0 #fff;
}
.seller_subscriber_info .layer-pay .btn-area .btn-middle-light {
min-width: auto;
box-shadow: -4px -6px 10px 0 rgba(255, 255, 255, 0.83), 4px 7px 10px 0 #d3d3d3, -1px -1px 1px 0 #fff;
background-color: #efeff1;
margin: 0 0.4rem;
} }
/* seller_process 2 */ /* seller_process 2 */
.type-family .product-option-col .c-ick-var, .type-family .product-option-col .c-ick-var,
.type-welfare .product-option-col .c-ick-var { .type-welfare .product-option-col .c-ick-var {
flex-basis: 50%; flex-basis: 50%;
} }
.type-family .product-option-col .c-ick-var .unit, .type-family .product-option-col .c-ick-var .unit,
.type-welfare .product-option-col .c-ick-var .unit { .type-welfare .product-option-col .c-ick-var .unit {
color: #666; color: #666;
} }
.type-family .product-option-col .c-ick-var label, .type-family .product-option-col .c-ick-var label,
.type-welfare .product-option-col .c-ick-var label { .type-welfare .product-option-col .c-ick-var label {
padding: 1.8rem 0; padding: 1.8rem 0;
} }
.type-discount .product-option-row .c-ick-var label {} .type-discount .product-option-row .c-ick-var label {}
.type-discount .product-option-row .c-ick-var label .row { .type-discount .product-option-row .c-ick-var label .row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.type-discount .product-option-row .c-ick-var label .row+.row { .type-discount .product-option-row .c-ick-var label .row+.row {
color: #555; color: #555;
} }
.type-discount .product-option-row .c-ick-var input[type=radio]:checked+label .row:first-child { .type-discount .product-option-row .c-ick-var input[type=radio]:checked+label .row:first-child {
font-weight: 600; font-weight: 600;
} }
.type-discount .product-option-row .c-ick-var input[type=radio]:checked+label .row:first-child .desc { .type-discount .product-option-row .c-ick-var input[type=radio]:checked+label .row:first-child .desc {
color: #489bdf; color: #489bdf;
} }
.type-pay-way .txt { .type-pay-way .txt {
color: rgba(0, 0, 0, 0.4); color: rgba(0, 0, 0, 0.4);
font-size: 1.1rem; font-size: 1.1rem;
margin: 1rem 0; margin: 1rem 0;
} }
/* seller_process 3 */ /* seller_process 3 */
.group-more-discount { .group-more-discount {
padding-bottom: 0; padding-bottom: 0;
} }
.type-discount-more { .type-discount-more {
margin-top: 1.2rem; margin-top: 1.2rem;
} }
.type-discount-more .item { .type-discount-more .item {
border-top: 1px solid #babcbd; border-top: 1px solid #babcbd;
} }
.type-discount-more .item .link { .type-discount-more .item .link {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1.5rem 0; padding: 1.5rem 0;
} }
.type-discount-more .price { .type-discount-more .price {
font-weight: 600; font-weight: 600;
margin-right: 0.5rem; margin-right: 0.5rem;
font-size: 1.2rem; font-size: 1.2rem;
} }
.type-discount-more .point { .type-discount-more .point {
color: #3b98e6; color: #3b98e6;
} }
.type-discount-more .btn { .type-discount-more .btn {
font-size: 1.2rem; font-size: 1.2rem;
} }
.type-discount-more .btn:after { .type-discount-more .btn:after {
content: ''; content: '';
display: inline-block; display: inline-block;
width: 4px; width: 4px;
height: 7px; height: 7px;
background: url(../img/seller/btn_arrow_ico@2x.png) no-repeat 0 0; background: url(../img/seller/btn_arrow_ico@2x.png) no-repeat 0 0;
background-size: cover; background-size: cover;
margin-left: 0.5rem; margin-left: 0.5rem;
vertical-align: middle; vertical-align: middle;
transform: translateY(-1px); transform: translateY(-1px);
} }
.opt-group .tgift-type { .opt-group .tgift-type {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 16px 21px; padding: 16px 21px;
color: #000; color: #000;
border: 1px solid #000; border: 1px solid #000;
border-radius: 4px; border-radius: 4px;
} }
.opt-group .tgift-type.before-selected { .opt-group .tgift-type.before-selected {
border: 0; border: 0;
padding: 0; padding: 0;
background-color: #f6f8fa; background-color: #f6f8fa;
box-shadow: 0 4px 10px 0 rgba(207, 207, 207, 0.88); box-shadow: 0 4px 10px 0 rgba(207, 207, 207, 0.88);
} }
.opt-group .tgift-type.before-selected .img { .opt-group .tgift-type.before-selected .img {
max-width: 100%; max-width: 100%;
vertical-align: top; vertical-align: top;
} }
.opt-group .tgift-type .thumb { .opt-group .tgift-type .thumb {
position: relative; position: relative;
width: 54px; width: 54px;
min-width: 54px; min-width: 54px;
height: 54px; height: 54px;
margin-right: 2.4rem; margin-right: 2.4rem;
} }
.opt-group .tgift-type .thumb img { .opt-group .tgift-type .thumb img {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
margin: auto; margin: auto;
border-radius: 6px; border-radius: 6px;
} }
.opt-group .tgift-type .cont { .opt-group .tgift-type .cont {
position: relative; position: relative;
flex: 1 1; flex: 1 1;
display: block; display: block;
} }
.opt-group .tgift-type .title { .opt-group .tgift-type .title {
font-size: 1.3rem; font-size: 1.3rem;
font-weight: 700; font-weight: 700;
padding-right: 2.5rem; padding-right: 2.5rem;
} }
.opt-group .tgift-type .cont .btn-change { .opt-group .tgift-type .cont .btn-change {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
} }
.opt-group .tgift-type .option { .opt-group .tgift-type .option {
margin-top: .6rem; margin-top: .6rem;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
color: #666; color: #666;
} }
.group-order-confirm { .group-order-confirm {
padding-bottom: 0; padding-bottom: 0;
} }
.order-confirm-type>.tit { .order-confirm-type>.tit {
text-align: center; text-align: center;
font-size: 2rem; font-size: 2rem;
margin-top: 2rem; margin-top: 2rem;
} }
.order-confirm-type>.desc { .order-confirm-type>.desc {
display: block; display: block;
text-align: center; text-align: center;
font-size: 1.3rem; font-size: 1.3rem;
margin-top: 0.6rem; margin-top: 0.6rem;
} }
.order-confirm-type>.thumb-box { .order-confirm-type>.thumb-box {
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
width: 250px; width: 250px;
height: 250px; height: 250px;
margin-top: 1.5rem; margin-top: 1.5rem;
} }
.order-confirm-type>.thumb-box>img { .order-confirm-type>.thumb-box>img {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
margin: auto; margin: auto;
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
border-radius: 13px; border-radius: 13px;
} }
.order-confirm-type .order-detail-area { .order-confirm-type .order-detail-area {
margin-top: 3rem; margin-top: 3rem;
} }
.order-confirm-type .order-detail-area .table-row-list th { .order-confirm-type .order-detail-area .table-row-list th {
background-color: transparent; background-color: transparent;
font-size: 1.5rem; font-size: 1.5rem;
padding: 6px 0; padding: 6px 0;
} }
.order-confirm-type .order-detail-area .table-row-list td { .order-confirm-type .order-detail-area .table-row-list td {
padding: 6px 0; padding: 6px 0;
} }
.order-confirm-type .order-detail-area .table-row-list tbody th { .order-confirm-type .order-detail-area .table-row-list tbody th {
color: #202020; color: #202020;
} }
.order-confirm-type .order-detail-area .table-row-list tbody td { .order-confirm-type .order-detail-area .table-row-list tbody td {
font-size: 1.6rem; font-size: 1.6rem;
} }
.order-confirm-type .order-detail-area .table-row-list tbody td .unit { .order-confirm-type .order-detail-area .table-row-list tbody td .unit {
color: #666; color: #666;
font-size: 1.3rem; font-size: 1.3rem;
} }
.order-confirm-type .order-detail-area .table-row-list td .block { .order-confirm-type .order-detail-area .table-row-list td .block {
display: block; display: block;
} }
.order-confirm-type .order-detail-area .table-row-list td .small { .order-confirm-type .order-detail-area .table-row-list td .small {
font-size: 1rem; font-size: 1rem;
color: #8d8d8d; color: #8d8d8d;
} }
.order-confirm-type .order-detail-area .table-row-list tfoot th { .order-confirm-type .order-detail-area .table-row-list tfoot th {
color: #000; color: #000;
border-top: 1px solid #babcbd; border-top: 1px solid #babcbd;
padding: 12px 0; padding: 12px 0;
} }
.order-confirm-type .order-detail-area .table-row-list tfoot td { .order-confirm-type .order-detail-area .table-row-list tfoot td {
border-top: 1px solid #babcbd; border-top: 1px solid #babcbd;
padding: 12px 0; padding: 12px 0;
} }
.order-confirm-type .order-detail-area .table-row-list tfoot td .price { .order-confirm-type .order-detail-area .table-row-list tfoot td .price {
color: #f76252; color: #f76252;
font-size: 1.8rem; font-size: 1.8rem;
font-weight: 600; font-weight: 600;
} }
.order-confirm-type .order-detail-area .table-row-list tfoot td .btn-more { .order-confirm-type .order-detail-area .table-row-list tfoot td .btn-more {
margin-top: 0.8rem; margin-top: 0.8rem;
} }
.seller-notice-link { .seller-notice-link {
position: relative; position: relative;
display: block; display: block;
padding: 1.2rem 0; padding: 1.2rem 0;
border-top: 1px solid #babcbd; border-top: 1px solid #babcbd;
border-bottom: 1px solid #babcbd; border-bottom: 1px solid #babcbd;
margin-bottom: 3rem; margin-bottom: 3rem;
} }
.seller-notice-link:after { .seller-notice-link:after {
content: ''; content: '';
position: absolute; position: absolute;
right: 3px; right: 3px;
top: 50%; top: 50%;
width: 4px; width: 4px;
height: 7px; height: 7px;
background: url(../img/seller/btn_arrow_ico@2x.png) no-repeat 0 0; background: url(../img/seller/btn_arrow_ico@2x.png) no-repeat 0 0;
background-size: cover; background-size: cover;
transform: translateY(-50%); transform: translateY(-50%);
} }
.color-important { .color-important {
color: #e84f01; color: #e84f01;
} }
.auth-group { .auth-group {
margin-top: 18px; margin-top: 18px;
} }
.auth-group .auth-title { .auth-group .auth-title {
font-size: 1.4rem; font-size: 1.4rem;
line-height: normal; line-height: normal;
} }
.auth-group .auth-content { .auth-group .auth-content {
margin-top: 0.9rem; margin-top: 0.9rem;
} }
.auth-group .auth-content .txt-info { .auth-group .auth-content .txt-info {
margin-top: 0.9rem; margin-top: 0.9rem;
font-size: 1.2rem; font-size: 1.2rem;
} }
.auth-group .auth-status, .auth-group .auth-status,
.auth-group .form-group { .auth-group .form-group {
margin-top: 1.6rem; margin-top: 1.6rem;
} }
.auth-group .auth-status { .auth-group .auth-status {
color: rgba(0, 0, 0, 0.4); color: rgba(0, 0, 0, 0.4);
font-size: 1.4rem; font-size: 1.4rem;
} }
.auth-group .auth-status .txt-auth-status { .auth-group .auth-status .txt-auth-status {
font-weight: 600; font-weight: 600;
} }
.auth-group .auth-status .txt-auth-status:before { .auth-group .auth-status .txt-auth-status:before {
display: inline-block; display: inline-block;
width: 1px; width: 1px;
height: 10px; height: 10px;
margin: 0 6px 0 3px; margin: 0 6px 0 3px;
background-color: #e1e1e1; background-color: #e1e1e1;
content: ''; content: '';
} }
/* 제품사양(2021.08.25 수정) */ /* 제품사양(2021.08.25 수정) */
.tbl_row { .tbl_row {
width: 100% !important; width: 100% !important;
; ;
margin-top: 3rem !important; margin-top: 3rem !important;
border: 0 !important; border: 0 !important;
border-spacing: 0 !important; border-spacing: 0 !important;
border-top: 1px solid #e1e1e1 !important; border-top: 1px solid #e1e1e1 !important;
} }
.tbl_row caption { .tbl_row caption {
overflow: hidden; overflow: hidden;
height: 0; height: 0;
font-size: 0; font-size: 0;
line-height: 0; line-height: 0;
color: transparent; color: transparent;
} }
.tbl_row td, .tbl_row td,
.tbl_row th { .tbl_row th {
padding: 1.3rem 1rem 1.2rem 1.4rem !important; padding: 1.3rem 1rem 1.2rem 1.4rem !important;
font-size: 1.2rem !important; font-size: 1.2rem !important;
line-height: 1.5 !important; line-height: 1.5 !important;
text-align: left !important; text-align: left !important;
border: 0 !important; border: 0 !important;
border-bottom: 1px solid #e1e1e1 !important; border-bottom: 1px solid #e1e1e1 !important;
} }
.tbl_row th { .tbl_row th {
color: #5e5e5e !important; color: #5e5e5e !important;
font-weight: 400 !important; font-weight: 400 !important;
background-color: #fafafa !important; background-color: #fafafa !important;
border-right: 1px solid #e1e1e1 !important; border-right: 1px solid #e1e1e1 !important;
} }
.seller_subscriber_info .opt-group {
border-top: 0;
}
/* 320디바이스 대응수정(2021.08.24 추가) */ /* 320디바이스 대응수정(2021.08.24 추가) */
@media all and (max-width: 320px) { @media all and (max-width: 320px) {
.opt-group .tgift-type .thumb { .opt-group .tgift-type .thumb {
margin-right: 1.4rem; margin-right: 1.4rem;
} }
.opt-group .tgift-type .title { .opt-group .tgift-type .title {
max-width: 142px; max-width: 142px;
} }
.product-color .color-chips .c-ick-var { .product-color .color-chips .c-ick-var {
margin-right: 8px margin-right: 8px
} }
} }
\ No newline at end of file
src/assets/html/index.html
View file @ b723c705
...@@ -81,6 +81,8 @@ document.createElement("footer"); ...@@ -81,6 +81,8 @@ document.createElement("footer");
<li><a href="./seller_usim_5g_registration1.html">5G 요금제로 USIM 개통 - 옵션.혜택<span>/ ./seller_usim_5g_registration1.html</span></a></li> <li><a href="./seller_usim_5g_registration1.html">5G 요금제로 USIM 개통 - 옵션.혜택<span>/ ./seller_usim_5g_registration1.html</span></a></li>
<li><a href="./seller_usim_lte_registration1.html">LTE 요금제로 USIM 개통 - 옵션.혜택<span>/ ./seller_usim_lte_registration1.html</span></a></li> <li><a href="./seller_usim_lte_registration1.html">LTE 요금제로 USIM 개통 - 옵션.혜택<span>/ ./seller_usim_lte_registration1.html</span></a></li>
<li><a href="./seller_pop_serial_number.html">[팝업] 일련번호, IMEI, Wi-Fi MAC 주소 확인방법<span>/ ./seller_pop_serial_number.html</span></a></li> <li><a href="./seller_pop_serial_number.html">[팝업] 일련번호, IMEI, Wi-Fi MAC 주소 확인방법<span>/ ./seller_pop_serial_number.html</span></a></li>
<li><a href="./seller_subscriber_info.html">가입자 정보<span>/ ./seller_subscriber_info.html</span></a></li>
</ul> </ul>
</section> </section>
</article> </article>
......
src/assets/html/seller_subscriber_info.html 0 → 100644
View file @ b723c705
<!--
가입자 정보 화면
-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,viewport-fit=cover">
<title>[상품 Mobile] detail | SK텔레콤 공식 온라인 쇼핑몰 T월드 다이렉트</title>
<link rel="shortcut icon" type="image/x-icon" href="../img/favicon.ico">
<link rel="stylesheet" type="text/css" href="../css/seller.css">
<script>
document.documentElement.dataset.userAgent = navigator.userAgent;
</script>
</head>
<body>
<!-- [D] div.wrap에 클래스 product-detail-page 추가
header가 상단 고정을 경우 div.wrap에 클래스 header-sticky 추가 -->
<div class="wrap seller-wrap header-sticky seller_subscriber_info">
<header class="header header-sub">
<div class="top-menu">
<a href="#none" class="btn-back">
<span class="ico-back">이전 페이지로 돌아가기</span>
</a>
<div class="top-header-title"><span class="txt-head">가입자 정보</span></div>
</div>
</header>
<main role="main" class="content">
<div class="l-grid">
<p class="subscrib-txt-msg">신청서로 이동하기 전 가입자 정보를 확인해 주세요</p>
<!-- [D] Case: 비회원 -->
<div class="opt-group">
<h2 class="opt-group-tit">가입자명</h2>
<div class="opt-group-con">
<div class="form-group">
<span class="c-input">
<input type="text" placeholder="가입하실 분의 이름을 입력하세요" title="가입하실 분의 이름을 입력하세요" class="input">
</span>
</div>
</div>
</div>
<div class="opt-group">
<h2 class="opt-group-tit">휴대폰번호</h2>
<div class="opt-group-con">
<div class="form-group">
<span class="c-input">
<input type="text" placeholder="‘-’ 없이 숫자만 입력해 주세요" title="‘-’ 없이 숫자만 입력해 주세요" maxlength="11" class="input" numberOnly>
</span>
</div>
</div>
</div>
<!-- [D] Case: 회원(서비스관리번호有) -->
<div class="opt-group">
<h2 class="opt-group-tit">가입자명</h2>
<div class="opt-group-con">
<div class="form-group">
<span class="c-input">
<input type="text" placeholder="가입하실 분의 이름을 입력하세요" title="가입하실 분의 이름을 입력하세요" value="최부열" class="input">
</span>
</div>
</div>
</div>
<div class="opt-group">
<h2 class="opt-group-tit">휴대폰번호</h2>
<div class="opt-group-con">
<div class="form-group">
<span class="c-input">
<input type="text" placeholder="‘-’ 없이 숫자만 입력해 주세요" title="‘-’ 없이 숫자만 입력해 주세요" maxlength="11" onfocus="this.value=''" value="010-8912-1706"
class="input" numberOnly>
</span>
</div>
</div>
</div>
<!-- [D] Case: 언택트플랜 case (비회원 or 회원&다른번호 입력)-->
<div class="opt-group">
<h2 class="opt-group-tit">가입자명</h2>
<div class="opt-group-con">
<div class="form-group">
<span class="c-input">
<input type="text" placeholder="가입하실 분의 이름을 입력하세요" title="가입하실 분의 이름을 입력하세요" class="input">
</span>
</div>
</div>
</div>
<div class="opt-group">
<h2 class="opt-group-tit">휴대폰번호</h2>
<div class="opt-group-con">
<div class="form-group">
<span class="c-input">
010-8912-1706
</span>
</div>
</div>
</div>
</div>
</main>
<!-- s: 하단 버튼 바 -->
<div class="sticky-bar">
<div class="layer-pay">
<h2 class="g-invisible">가입자정보</h2>
<div class="l-grid">
<!-- [D] 활성/비활성 여부는 클래스 disabled 추가/삭제로 컨트롤 -->
<div class="btn-area">
<button type="button" class="btn-middle-light">취소</button>
<button type="button" class="btn-primary">확인</button>
</div>
</div>
</div>
</div>
<!-- //e: 하단 버튼 바 -->
</div>
<!-- <script>
$("input").on("click", function(){
$(this).val($(this).val().replace(/[^0-9]/g,""));
})
</script> -->
<script src="../js/jquery.min.js"></script>
<script src="../js/swiper.min.js"></script>
<script src="../js/tdirect-ui.js"></script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment