css 및 추가 이미지
This commit is contained in:
focp212@naver.com
@@ -792,9 +792,10 @@ textarea {
|
||||
}
|
||||
|
||||
textarea:focus {
|
||||
border-color: var(--input-border-focus);
|
||||
outline: 1px solid var(--color-111111);
|
||||
/* border-color: var(--input-border-focus);
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(11, 102, 195, 0.2);
|
||||
box-shadow: 0 0 0 3px rgba(11, 102, 195, 0.2); */
|
||||
}
|
||||
|
||||
textarea[disabled] {
|
||||
@@ -986,16 +987,16 @@ button:disabled {
|
||||
|
||||
.check_box {
|
||||
position: relative;
|
||||
padding-left: 25px;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
font-size: var(--fs-14);
|
||||
font-size: var(--fs-17);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.check_box label {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 1px;
|
||||
top: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -1063,8 +1064,8 @@ input[type="checkbox"] {
|
||||
input[type="radio"] + label {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: url("../images/radio_off.svg") no-repeat 0 0;
|
||||
}
|
||||
|
||||
@@ -2142,6 +2143,18 @@ input[type="radio"] {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.transaction-amount.two {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.transaction-amount.two .unit {
|
||||
font-size: var(--fs-14);
|
||||
color: var(--color-999999);
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.summary-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -5148,4 +5161,560 @@ ul.txn-amount-detail li span:last-child {
|
||||
|
||||
.detail-title.summary-amount.divTop {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* 111 bottomsheet 정산 동의/거절 */
|
||||
.agree-section {
|
||||
padding: 0 0 0 0;
|
||||
}
|
||||
.agree-desc {
|
||||
font-size: var(--fs-17);
|
||||
color: var(--color-2D3436);
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.agree-desc::before {
|
||||
content: '●';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 26px;
|
||||
right: 0;
|
||||
font-size: 5px;
|
||||
}
|
||||
|
||||
.agree-desc.pb10 {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.agree-desc.pb16 {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.sheet-divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #EAEAEA;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sheet-divider.padded {
|
||||
margin: 10px 0;
|
||||
background: #EAEAEA;
|
||||
}
|
||||
|
||||
.agree-radio-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 26px;
|
||||
}
|
||||
|
||||
/* 113 정산매장 */
|
||||
.store-section {
|
||||
padding: 30px 10px 0 10px;
|
||||
}
|
||||
|
||||
.store-filter {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.store-input {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.store-input input {
|
||||
flex: 1;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-size: 15px;
|
||||
color: var(--color-2D3436);
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
/* 114 공지사항 */
|
||||
.notice114 {
|
||||
padding: 16px 10px 20px 10px;
|
||||
}
|
||||
|
||||
.notice-controls {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.notice-search {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.notice-search .ic16.search {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 12px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: url('../images/ico_search_16.svg') no-repeat center center;
|
||||
}
|
||||
|
||||
.notice-search input {
|
||||
flex: 1;
|
||||
height: 40px;
|
||||
padding-left: 40px;
|
||||
background: transparent;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.notice-filter {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.notice-list-114 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.notice-row-114 {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid var(--color-EaEaEa);
|
||||
}
|
||||
|
||||
.notice-row-114:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.notice-txt {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.notice-title-114 {
|
||||
font-size: var(--fs-17);
|
||||
color: var(--color-2D3436);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.notice-meta-114 {
|
||||
font-size: var(--fs-14);
|
||||
color: var(--color-999999);
|
||||
}
|
||||
|
||||
.store-list {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 26px;
|
||||
}
|
||||
|
||||
.store-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.store-line {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.store-line .dot {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 7px;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-3E6AFC);
|
||||
}
|
||||
|
||||
.store-name {
|
||||
padding-left: 20px;
|
||||
font-size: var(--fs-17);
|
||||
color: var(--color-2D3436);
|
||||
}
|
||||
|
||||
.store-detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
font-size: var(--fs-14);
|
||||
padding-left: 20px;
|
||||
color: var(--color-777777);
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.store-detail .line {
|
||||
padding-left: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.store-detail .line::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 9px;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
border-radius: 3px;
|
||||
background: var(--color-777777);
|
||||
|
||||
}
|
||||
|
||||
.notice-meta-114 .blue, .notice-title-114 .blue {
|
||||
color: var(--color-3E6AFC);
|
||||
}
|
||||
|
||||
/* 115 자주 묻는 질문 */
|
||||
.faq-section {
|
||||
padding: 20px 10px 16px 10px;
|
||||
}
|
||||
.faq-search {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
.faq-search .ic16.search {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 12px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: url('../images/ico_search_16.svg') no-repeat center center;
|
||||
}
|
||||
.faq-search input {
|
||||
flex: 1;
|
||||
height: 40px;
|
||||
padding-left: 40px;
|
||||
background: transparent;
|
||||
font-size: 15px;
|
||||
}
|
||||
.faq-filter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #D9D9D9;
|
||||
border-radius: 8px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.faq-filter .text {
|
||||
font-size: 15px;
|
||||
color: var(--color-2D3436);
|
||||
}
|
||||
.faq-filter .ic20.arrow-down {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: url('../images/select_arrow.svg') no-repeat center center;
|
||||
}
|
||||
.faq-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
padding-top: 16px;
|
||||
}
|
||||
.faq-row {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid var(--color-EaEaEa);
|
||||
}
|
||||
.faq-row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.faq-txt {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.faq-title {
|
||||
font-size: var(--fs-17);
|
||||
color: var(--color-2D3436);
|
||||
}
|
||||
.faq-tag {
|
||||
font-size: var(--fs-14);
|
||||
color: var(--color-3E6AFC);
|
||||
}
|
||||
|
||||
/* 116 자주 묻는 질문_상세 */
|
||||
.faq-detail {
|
||||
padding: 20px 10px 30px 10px;
|
||||
}
|
||||
|
||||
.faq-detail__title {
|
||||
font-size: var(--fs-20);
|
||||
font-weight: var(--fw-600);
|
||||
line-height: 1.4;
|
||||
color: var(--color-2D3436);
|
||||
}
|
||||
|
||||
.faq-detail__divider {
|
||||
height: 1px;
|
||||
background: #EAEAEA;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.faq-detail__body {
|
||||
white-space: pre-line;
|
||||
font-size: var(--fs-17);
|
||||
line-height: 1.4;
|
||||
color: var(--color-2D3436);
|
||||
}
|
||||
|
||||
/* 117 1:1 문의 */
|
||||
.inq117 {
|
||||
padding: 20px 10px 16px 10px;
|
||||
}
|
||||
|
||||
.inq-merchant {
|
||||
display: grid;
|
||||
grid-template-columns: 80px 1fr;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.inq-title {
|
||||
font-size: var(--fs-16);
|
||||
color: var(--color-2D3436);
|
||||
}
|
||||
|
||||
.inq-input {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #D9D9D9;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.inq-input input {
|
||||
flex: 1;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-size: 15px;
|
||||
color: var(--color-2D3436);
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.inq-filter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #D9D9D9;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.inq-filter .text {
|
||||
font-size: 15px;
|
||||
color: var(--color-2D3436);
|
||||
}
|
||||
|
||||
.inq-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.inq-item { height: 84px; }
|
||||
.inq-line {
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.inq-line .dot {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 8px;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.inq-line .dot.blue { background: #3E6AFC; }
|
||||
.inq-line .dot.gray { background: #C6C6C6; }
|
||||
.inq-title-text {
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
top: 0;
|
||||
font-size: var(--fs-16);
|
||||
color: var(--color-2D3436);
|
||||
}
|
||||
|
||||
.inq-meta {
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
top: 27px;
|
||||
font-size: 14px;
|
||||
color: var(--color-999999);
|
||||
}
|
||||
|
||||
.inq-meta span {
|
||||
display: inline-block;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.sai {
|
||||
color: var(--color-d6d6d6);
|
||||
}
|
||||
|
||||
/* 118 1:1 문의_상세 */
|
||||
.inq-detail {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.inq-detail__head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.inq-detail__row {
|
||||
display: grid;
|
||||
grid-template-columns: 60px 1fr;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.inq-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 24px;
|
||||
padding: 0 16px;
|
||||
border-radius: 30px;
|
||||
background: #F4F8FF;
|
||||
font-size: var(--fs-14);
|
||||
color: var(--color-2D3436);
|
||||
}
|
||||
|
||||
.inq-head-text {
|
||||
font-size: var(--fs-15);
|
||||
color: var(--color-2D3436);
|
||||
}
|
||||
|
||||
.inq-head-text.bold {
|
||||
font-weight: var(--fw-700);
|
||||
}
|
||||
|
||||
.inq-detail__divider {
|
||||
height: 1px;
|
||||
background: #EAEAEA;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.inq-detail__section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.inq-detail__section-title {
|
||||
font-size: var(--fs-18);
|
||||
font-weight: var(--fw-700);
|
||||
color: var(--color-2D3436);
|
||||
}
|
||||
|
||||
.inq-detail__body {
|
||||
white-space: pre-line;
|
||||
font-size: var(--fs-17);
|
||||
line-height: 1.4;
|
||||
color: var(--color-2D3436);
|
||||
}
|
||||
|
||||
.inq-detail__box {
|
||||
background: #F5F5F5;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.inq-detail__kv {
|
||||
display: grid;
|
||||
/* grid-template-columns: 60px 1fr; */
|
||||
align-items: start;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.inq-detail__kv + .inq-detail__kv {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.inq-detail__kv .k {
|
||||
font-weight: var(--fw-700);
|
||||
}
|
||||
|
||||
.inq-detail__kv .k,
|
||||
.inq-detail__kv .v {
|
||||
font-size: var(--fs-16);
|
||||
line-height: 1.4;
|
||||
color: var(--color-2D3436);
|
||||
}
|
||||
|
||||
/* 119 1:1 문의하기 */
|
||||
.inq-form {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.inq-field {
|
||||
display: grid;
|
||||
grid-template-columns: 90px 1fr;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
.inq-label {
|
||||
font-size: var(--fs-16);
|
||||
font-weight: var(--fw-500);
|
||||
color: var(--color-2D3436);
|
||||
}
|
||||
.inq-label .red, .inq-text-label .red { color: var(--color-EB5757); }
|
||||
.inq-control input,
|
||||
.inq-control select {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
.inq-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 0 0 30px 0;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.inq-text-label {
|
||||
font-size: var(--fs-16);
|
||||
font-weight: var(--fw-500);
|
||||
color: var(--color-2D3436);
|
||||
}
|
||||
.inq-text-body textarea {
|
||||
width: 100%;
|
||||
min-height: 150px;
|
||||
border: 1px solid #D9D9D9;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
Reference in New Issue
Block a user