style: update PDF view and subcomponent styles for consistency and responsiveness
- Added a wrapper for PDF tables with fixed width for better layout. - Adjusted height and flex properties in the PDF intro page for improved structure. - Enhanced spacing and alignment in various components for better visual consistency. - Standardized color codes and formatting across styles for uniformity. - Implemented responsive design adjustments for smaller screens.
This commit is contained in:
parent
404eaa3299
commit
9d89ceadc0
@ -58,11 +58,22 @@
|
||||
}
|
||||
|
||||
// 지붕재 적합성
|
||||
.pdf-table-wrap{
|
||||
max-width: 1540px;
|
||||
min-width: 1540px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.pdf-intro-page{
|
||||
height: 1080px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 1050px;
|
||||
padding: 80px 40px ;
|
||||
background-color: #fff;
|
||||
}
|
||||
.pdf-intro-foot-date{
|
||||
margin-top: auto;
|
||||
text-align: right;
|
||||
}
|
||||
.pdf-intro-tit-wrap{
|
||||
text-align: center;
|
||||
.pdf-intro-tit{
|
||||
@ -81,6 +92,7 @@
|
||||
|
||||
.pdf-table-content{
|
||||
padding: 20px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.pdf-table-grid-wrap{
|
||||
display: grid;
|
||||
|
||||
@ -1,38 +1,38 @@
|
||||
@use '../abstracts' as *;
|
||||
@use "../abstracts" as *;
|
||||
|
||||
// input form 공통
|
||||
.data-input-form-bx {
|
||||
.data-input-form-bx{
|
||||
margin-bottom: 18px;
|
||||
&:last-child {
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.data-input-form-tit {
|
||||
.data-input-form-tit{
|
||||
@include defaultFont($font-s-13, $font-w-500, $font-c);
|
||||
margin-bottom: 10px;
|
||||
.import {
|
||||
color: #f00;
|
||||
.import{
|
||||
color: #F00;
|
||||
}
|
||||
span {
|
||||
span{
|
||||
display: block;
|
||||
@include defaultFont($font-s-13, $font-w-400, #a8b6c7);
|
||||
@include defaultFont($font-s-13, $font-w-400, #A8B6C7);
|
||||
}
|
||||
}
|
||||
.data-input-guide {
|
||||
.data-input-guide{
|
||||
margin-top: 8px;
|
||||
@include defaultFont($font-s-13, $font-w-400, #a8b6c7);
|
||||
@include defaultFont($font-s-13, $font-w-400, #A8B6C7);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-flex-wrap {
|
||||
.btn-flex-wrap{
|
||||
@include flex(5px);
|
||||
margin-top: 24px;
|
||||
.btn-bx {
|
||||
.btn-bx{
|
||||
flex: 1;
|
||||
}
|
||||
&.com {
|
||||
.btn-bx {
|
||||
&.com{
|
||||
.btn-bx{
|
||||
flex: 1 1 auto;
|
||||
button {
|
||||
button{
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
@ -40,13 +40,13 @@
|
||||
}
|
||||
|
||||
// 매물 common
|
||||
.top-btn {
|
||||
.top-btn{
|
||||
position: fixed;
|
||||
bottom: 96px;
|
||||
right: 15px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
background-color: rgba(0, 0, 0, 0.50);
|
||||
background-image: url(/assets/images/sub/top_btn_icon.svg);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
@ -55,68 +55,68 @@
|
||||
z-index: 90000;
|
||||
}
|
||||
|
||||
.sale-contents {
|
||||
.sale-contents{
|
||||
width: 100%;
|
||||
background-color: #f5f5f5;
|
||||
.sale-frame {
|
||||
background-color: #F5F5F5;
|
||||
.sale-frame{
|
||||
padding: 0 20px;
|
||||
border-top: 1px solid #ececec;
|
||||
border-bottom: 1px solid #ececec;
|
||||
border-top: 1px solid #ECECEC;
|
||||
border-bottom: 1px solid #ECECEC;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 24px;
|
||||
padding-top: 24px;
|
||||
background-color: $white-fff;
|
||||
&:first-child {
|
||||
&:first-child{
|
||||
padding-top: 0;
|
||||
border-top: none;
|
||||
}
|
||||
&:last-child {
|
||||
&:last-child{
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sale-form-btn-wrap {
|
||||
padding: 20px 20px 0;
|
||||
.sale-form-btn-wrap{
|
||||
padding: 20px 20px 0 ;
|
||||
background-color: #fff;
|
||||
.btn-flex-wrap {
|
||||
.btn-flex-wrap{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 매물 목록
|
||||
.sale-form-bx {
|
||||
.sale-form-bx{
|
||||
margin-bottom: 14px;
|
||||
&:last-child {
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.sale-list-wrap {
|
||||
.sale-list-item {
|
||||
}
|
||||
.sale-list-wrap{
|
||||
.sale-list-item{
|
||||
padding-top: 14px;
|
||||
padding-bottom: 14px;
|
||||
border-bottom: 1px solid #ececec;
|
||||
border-bottom: 1px solid #ECECEC;
|
||||
cursor: pointer;
|
||||
&:first-child {
|
||||
&:first-child{
|
||||
padding-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
&:last-child{
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sale-item-bx {
|
||||
.sale-item-date-bx {
|
||||
.sale-item-bx{
|
||||
.sale-item-date-bx{
|
||||
@include flex(0px);
|
||||
align-items: center;
|
||||
margin-bottom: 9px;
|
||||
.sale-item-num {
|
||||
.sale-item-num{
|
||||
position: relative;
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
padding-right: 6px;
|
||||
&::after {
|
||||
&::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -124,31 +124,31 @@
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
height: 10px;
|
||||
background-color: #a2abb8;
|
||||
background-color: #A2ABB8;
|
||||
}
|
||||
}
|
||||
.sale-item-date {
|
||||
@include defaultFont($font-s-13, $font-w-400, #a2abb8);
|
||||
.sale-item-date{
|
||||
@include defaultFont($font-s-13, $font-w-400, #A2ABB8);
|
||||
padding-left: 6px;
|
||||
}
|
||||
}
|
||||
.sale-item-tit {
|
||||
.sale-item-tit{
|
||||
@include defaultFont($font-s-15, $font-w-500, $font-c);
|
||||
@include ellipsis(1);
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
.sale-item-customer {
|
||||
.sale-item-customer{
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
.sale-item-update-bx {
|
||||
.sale-item-update-bx{
|
||||
@include flex(0px);
|
||||
align-items: center;
|
||||
.sale-item-name {
|
||||
.sale-item-name{
|
||||
position: relative;
|
||||
@include defaultFont($font-s-13, $font-w-400, #a2abb8);
|
||||
@include defaultFont($font-s-13, $font-w-400, #A2ABB8);
|
||||
padding-right: 6px;
|
||||
&::after {
|
||||
&::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -156,177 +156,176 @@
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
height: 10px;
|
||||
background-color: #a2abb8;
|
||||
background-color: #A2ABB8;
|
||||
}
|
||||
}
|
||||
.sale-item-update {
|
||||
@include defaultFont($font-s-13, $font-w-400, #a2abb8);
|
||||
.sale-item-update{
|
||||
@include defaultFont($font-s-13, $font-w-400, #A2ABB8);
|
||||
padding-left: 6px;
|
||||
}
|
||||
}
|
||||
&.nodata {
|
||||
.sale-item-nodata {
|
||||
&.nodata{
|
||||
.sale-item-nodata{
|
||||
padding: 5px 0;
|
||||
text-align: center;
|
||||
@include defaultFont($font-s-15, $font-w-500, $font-c);
|
||||
}
|
||||
}
|
||||
}
|
||||
.sale-edit-btn {
|
||||
.sale-edit-btn{
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
// 매물 상세
|
||||
.sale-data-table-wrap {
|
||||
.sale-data-table-wrap{
|
||||
padding: 24px;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ececec;
|
||||
border-top: 1px solid #ECECEC;
|
||||
}
|
||||
.sale-data-table {
|
||||
.sale-data-table{
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
tbody {
|
||||
tr {
|
||||
th {
|
||||
tbody{
|
||||
tr{
|
||||
th{
|
||||
@include defaultFont($font-s-13, $font-w-500, $font-c);
|
||||
vertical-align: top;
|
||||
padding: 5px 0;
|
||||
}
|
||||
td {
|
||||
td{
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
padding: 5px 0 8px 14px;
|
||||
.data-down {
|
||||
.data-down{
|
||||
@include flex(8px);
|
||||
align-items: center;
|
||||
color: #1259cb;
|
||||
i {
|
||||
color: #1259CB;
|
||||
i{
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 12px;
|
||||
background: url(/assets/images/sub/down_icon.svg) no-repeat center;
|
||||
background: url(/assets/images/sub/down_icon.svg)no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:first-child {
|
||||
th,
|
||||
td {
|
||||
&:first-child{
|
||||
th,td{
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
th,
|
||||
td {
|
||||
&:last-child{
|
||||
th,td{
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sale-detail-toggle-wrap {
|
||||
border-top: 1px solid #ececec;
|
||||
.sale-detail-toggle-wrap{
|
||||
border-top: 1px solid #ECECEC;
|
||||
}
|
||||
.sale-detail-toggle-bx {
|
||||
border-bottom: 1px solid #ececec;
|
||||
.sale-detail-toggle-bx{
|
||||
border-bottom: 1px solid #ECECEC;
|
||||
}
|
||||
.sale-detail-toggle-head {
|
||||
.sale-detail-toggle-head{
|
||||
@include flex(5px);
|
||||
padding: 14px 18px;
|
||||
background-color: $white-fff;
|
||||
cursor: pointer;
|
||||
.sale-detail-toggle-name {
|
||||
.sale-detail-toggle-name{
|
||||
@include defaultFont($font-s-13, $font-w-500, $font-c);
|
||||
}
|
||||
.sale-detail-toggle-btn-wrap {
|
||||
.sale-detail-toggle-btn-wrap{
|
||||
margin-left: auto;
|
||||
.sale-detail-toggle-btn {
|
||||
.sale-detail-toggle-btn{
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background: url(/assets/images/sub/sale_toggle_btn.svg) no-repeat center;
|
||||
background-size: cover;
|
||||
background: url(/assets/images/sub/sale_toggle_btn.svg)no-repeat center;
|
||||
background-size: cover
|
||||
}
|
||||
}
|
||||
}
|
||||
.sale-detail-toggle-cont {
|
||||
.sale-detail-toggle-cont{
|
||||
display: none;
|
||||
.sale-frame {
|
||||
.sale-frame{
|
||||
padding: 24px 20px;
|
||||
&:first-child {
|
||||
&:first-child{
|
||||
padding-top: 24px;
|
||||
}
|
||||
&:last-child {
|
||||
&:last-child{
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sale-detail-toggle-bx {
|
||||
&.act {
|
||||
.sale-detail-toggle-head {
|
||||
background-color: #5f738e;
|
||||
.sale-detail-toggle-name {
|
||||
color: #fff;
|
||||
.sale-detail-toggle-bx{
|
||||
&.act{
|
||||
.sale-detail-toggle-head{
|
||||
background-color: #5F738E;
|
||||
.sale-detail-toggle-name{
|
||||
color: #fff
|
||||
}
|
||||
.sale-detail-toggle-btn-wrap {
|
||||
.sale-detail-toggle-btn {
|
||||
background: url(/assets/images/sub/sale_toggle_btn_white.svg) no-repeat center;
|
||||
.sale-detail-toggle-btn-wrap{
|
||||
.sale-detail-toggle-btn{
|
||||
background: url(/assets/images/sub/sale_toggle_btn_white.svg)no-repeat center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sale-detail-toggle-cont {
|
||||
.sale-detail-toggle-cont{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 매물 기본정보
|
||||
.form-flex {
|
||||
.form-flex{
|
||||
@include flex(5px);
|
||||
.form-bx {
|
||||
.form-bx{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.form-btn {
|
||||
.form-btn{
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
// 매물 전기 지붕정보
|
||||
.sale-roof-title {
|
||||
.sale-roof-title{
|
||||
@include defaultFont($font-s-15, $font-w-500, $font-c);
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid #2e3a59;
|
||||
border-bottom: 1px solid #2E3A59;
|
||||
}
|
||||
.data-check-wrap {
|
||||
.data-check-wrap{
|
||||
@include flex(10px);
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 12px;
|
||||
.radio-form-box,
|
||||
.check-form-box {
|
||||
.check-form-box{
|
||||
width: calc(50% - 5px);
|
||||
}
|
||||
&.mb0 {
|
||||
&.mb0{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.data-input {
|
||||
&.flex {
|
||||
.data-input{
|
||||
&.flex{
|
||||
@include flex(8px);
|
||||
align-items: center;
|
||||
span {
|
||||
span{
|
||||
flex: none;
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 1:1 문의 common
|
||||
.inquiry-frame {
|
||||
.inquiry-frame{
|
||||
padding: 0 20px;
|
||||
}
|
||||
.badge {
|
||||
.badge{
|
||||
min-width: 60px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
@ -335,64 +334,65 @@
|
||||
text-align: center;
|
||||
font-size: $font-s-12;
|
||||
font-weight: $font-w-500;
|
||||
&.blue {
|
||||
color: #5497e9;
|
||||
background-color: #ecf5ff;
|
||||
&.blue{
|
||||
color: #5497E9;
|
||||
background-color: #ECF5FF;
|
||||
}
|
||||
&.orange {
|
||||
color: #f86a56;
|
||||
background-color: #ffefed;
|
||||
&.orange{
|
||||
color: #F86A56;
|
||||
background-color: #FFEFED;
|
||||
}
|
||||
&.block {
|
||||
&.block{
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
}
|
||||
// 1:1 문의 목록
|
||||
.inquiry-table-filter {
|
||||
.inquiry-table-filter{
|
||||
margin-bottom: 24px;
|
||||
.filter-check {
|
||||
.filter-check{
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
.inquiry-list-tit {
|
||||
.inquiry-list-tit{
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #2e3a59;
|
||||
border-bottom: 1px solid #2E3A59;
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
span {
|
||||
span{
|
||||
font-weight: $font-w-500;
|
||||
}
|
||||
}
|
||||
.inquiry-list {
|
||||
.inquiry-item {
|
||||
.inquiry-list{
|
||||
.inquiry-item{
|
||||
padding: 10px 0;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #ececec;
|
||||
&:last-child {
|
||||
border-bottom: 1px solid #ECECEC;
|
||||
&:last-child{
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.inquiry-item-bx {
|
||||
.inquiry-item-bx{
|
||||
position: relative;
|
||||
padding-right: 70px;
|
||||
.inquiry-item-category {
|
||||
.inquiry-item-category{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
span {
|
||||
span{
|
||||
position: relative;
|
||||
display: block;
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
padding: 0 6px;
|
||||
&:first-child {
|
||||
&:first-child{
|
||||
padding-left: 0;
|
||||
}
|
||||
&:last-child {
|
||||
&:last-child{
|
||||
padding-right: 0;
|
||||
&::before {
|
||||
&::before{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
&::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -400,31 +400,26 @@
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
height: 10px;
|
||||
background-color: #a2abb8;
|
||||
background-color: #A2ABB8;
|
||||
}
|
||||
}
|
||||
}
|
||||
.inquiry-item-tit {
|
||||
.inquiry-item-tit{
|
||||
@include defaultFont($font-s-15, $font-w-500, $font-c);
|
||||
@include ellipsis(1);
|
||||
margin-bottom: 5px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
.inquiry-item-date {
|
||||
@include defaultFont($font-s-13, $font-w-400, #a2abb8);
|
||||
.inquiry-item-date{
|
||||
@include defaultFont($font-s-13, $font-w-400, #A2ABB8);
|
||||
}
|
||||
.inquiry-badge {
|
||||
.inquiry-badge{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
&.nodata {
|
||||
&.nodata{
|
||||
padding-right: 0;
|
||||
.inquiry-item-nodata {
|
||||
.inquiry-item-nodata{
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
@include defaultFont($font-s-15, $font-w-500, $font-c);
|
||||
@ -435,45 +430,42 @@
|
||||
}
|
||||
|
||||
// 1:1문의 작성
|
||||
.textarea-form {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.inquiry-file-wrap {
|
||||
.inquiry-file-wrap{
|
||||
margin-top: 20px;
|
||||
.file-list-wrap {
|
||||
.file-list-wrap{
|
||||
margin-top: 14px;
|
||||
}
|
||||
}
|
||||
.file-list-tit {
|
||||
.file-list-tit{
|
||||
@include defaultFont($font-s-13, $font-w-500, $font-c);
|
||||
}
|
||||
.file-list {
|
||||
.file-list{
|
||||
margin-top: 14px;
|
||||
.file-item {
|
||||
border-top: 1px solid #ededed;
|
||||
.file-item{
|
||||
border-top: 1px solid #EDEDED;
|
||||
cursor: default;
|
||||
.file-item-bx {
|
||||
.file-item-bx{
|
||||
width: 100%;
|
||||
padding: 14px 0;
|
||||
@include flex(0px);
|
||||
align-items: center;
|
||||
.file-item-name {
|
||||
.file-item-name{
|
||||
@include ellipsis(1);
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
padding-right: 10px;
|
||||
}
|
||||
.file-del {
|
||||
.file-del{
|
||||
flex: none;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: url(/assets/images/common/id_delete_icon.svg) no-repeat center;
|
||||
background: url(/assets/images/common/id_delete_icon.svg)no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
.file-item-bx {
|
||||
&:last-child{
|
||||
.file-item-bx{
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
@ -481,33 +473,33 @@
|
||||
}
|
||||
|
||||
// 1:1 문의 상세
|
||||
.inquiry-detail-data-table {
|
||||
.inquiry-detail-data-table{
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid #ececec;
|
||||
border-bottom: 1px solid #ECECEC;
|
||||
}
|
||||
.inquiry-detail-data {
|
||||
.inquiry-detail-data{
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid #2e3a59;
|
||||
border-bottom: 1px solid #2E3A59;
|
||||
margin-bottom: 24px;
|
||||
.inquiry-detail-category {
|
||||
.inquiry-detail-category{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 3px;
|
||||
span {
|
||||
span{
|
||||
position: relative;
|
||||
display: block;
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
padding: 0 6px;
|
||||
&:first-child {
|
||||
&:first-child{
|
||||
padding-left: 0;
|
||||
}
|
||||
&:last-child {
|
||||
&:last-child{
|
||||
padding-right: 0;
|
||||
&::before {
|
||||
&::before{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
&::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -515,154 +507,152 @@
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
height: 10px;
|
||||
background-color: #a2abb8;
|
||||
background-color: #A2ABB8;
|
||||
}
|
||||
}
|
||||
}
|
||||
.inquiry-detail-tit {
|
||||
.inquiry-detail-tit{
|
||||
@include defaultFont($font-s-15, $font-w-500, $font-c);
|
||||
margin-bottom: 10px;
|
||||
word-wrap: break-word;
|
||||
white-space: normal;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
.inquiry-detail-txt {
|
||||
.inquiry-detail-txt{
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
white-space: pre-line;
|
||||
}
|
||||
}
|
||||
|
||||
// 1:1 문의 답변
|
||||
.inquiry-answer-wrap {
|
||||
.inquiry-answer-wrap{
|
||||
margin-top: 24px;
|
||||
|
||||
}
|
||||
.inquiry-answer-header {
|
||||
.inquiry-answer-header{
|
||||
padding: 20px 0;
|
||||
border-top: 1px solid #f86a56;
|
||||
border-bottom: 1px solid #ececec;
|
||||
.inquiry-answer-tit {
|
||||
@include defaultFont($font-s-14, $font-w-500, #f86a56);
|
||||
border-top: 1px solid #F86A56;
|
||||
border-bottom: 1px solid #ECECEC;
|
||||
.inquiry-answer-tit{
|
||||
@include defaultFont($font-s-14, $font-w-500, #F86A56);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.inquiry-answer-date {
|
||||
@include defaultFont($font-s-13, $font-w-400, #f86a56);
|
||||
.inquiry-answer-date{
|
||||
@include defaultFont($font-s-13, $font-w-400, #F86A56);
|
||||
}
|
||||
}
|
||||
.inquiry-answer-tit {
|
||||
.inquiry-answer-tit{
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
// 비밀번호 변경
|
||||
.border-frame {
|
||||
.border-frame{
|
||||
padding: 20px;
|
||||
border-top: 1px solid #ececec;
|
||||
border-bottom: 1px solid #ececec;
|
||||
border-top: 1px solid #ECECEC;
|
||||
border-bottom: 1px solid #ECECEC;
|
||||
background-color: #fff;
|
||||
margin-bottom: 10px;
|
||||
&:last-child {
|
||||
&:last-child{
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.pw-guide {
|
||||
.pw-guide-tit {
|
||||
@include defaultFont($font-s-16, $font-w-500, #1259cb);
|
||||
.pw-guide{
|
||||
.pw-guide-tit{
|
||||
@include defaultFont($font-s-16, $font-w-500, #1259CB);
|
||||
}
|
||||
.pw-guide-txt {
|
||||
@include defaultFont($font-s-13, $font-w-400, #417ddc);
|
||||
.pw-guide-txt{
|
||||
@include defaultFont($font-s-13, $font-w-400, #417DDC);
|
||||
}
|
||||
}
|
||||
|
||||
// 지붕재 적합성
|
||||
.compliance-icon {
|
||||
.compliance-icon{
|
||||
display: flex;
|
||||
}
|
||||
.compliance-check-wrap {
|
||||
.compliance-check-wrap{
|
||||
padding-top: 10px;
|
||||
}
|
||||
.compliance-check-bx {
|
||||
.compliance-check-bx{
|
||||
position: relative;
|
||||
padding: 14px 18px;
|
||||
border: 1px solid #efefef;
|
||||
border: 1px solid #EFEFEF;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
&:last-child {
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&.act {
|
||||
.bx-btn {
|
||||
&.act{
|
||||
.bx-btn{
|
||||
transform: rotate(0) !important;
|
||||
}
|
||||
.reference-list {
|
||||
display: block;
|
||||
.reference-list{
|
||||
display: block
|
||||
}
|
||||
}
|
||||
}
|
||||
.check-name-wrap {
|
||||
.check-name-wrap{
|
||||
@include flex(0px);
|
||||
align-items: center;
|
||||
.check-name {
|
||||
.check-name{
|
||||
@include defaultFont($font-s-13, $font-w-500, $font-c);
|
||||
}
|
||||
.check-name-btn {
|
||||
.check-name-btn{
|
||||
padding-left: 5px;
|
||||
margin-left: auto;
|
||||
.bx-btn {
|
||||
.bx-btn{
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background: url(/assets/images/sub/compliance_bx_icon.svg) no-repeat center;
|
||||
background: url(/assets/images/sub/compliance_bx_icon.svg)no-repeat center;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.reference-list {
|
||||
.reference-list{
|
||||
display: none;
|
||||
margin-top: 10px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid #ececec;
|
||||
transition: all 0.15s ease-in-out;
|
||||
.reference-item {
|
||||
border-top: 1px solid #ECECEC;
|
||||
transition: all .15s ease-in-out;
|
||||
.reference-item{
|
||||
margin-bottom: 8px;
|
||||
padding-left: 14px;
|
||||
.reference-item-bx {
|
||||
.reference-item-bx{
|
||||
@include flex(10px);
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
align-items: center;
|
||||
}
|
||||
&:last-child {
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
&.check {
|
||||
.reference-item {
|
||||
&.check{
|
||||
.reference-item{
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.compliace-nosearch {
|
||||
.compliace-nosearch{
|
||||
padding: 30px 0;
|
||||
span {
|
||||
span{
|
||||
display: block;
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.check-item-wrap {
|
||||
.check-item-wrap{
|
||||
@include flex(0px);
|
||||
align-items: center;
|
||||
}
|
||||
.compliance-icon-wrap {
|
||||
.compliance-icon-wrap{
|
||||
margin-left: auto;
|
||||
min-width: 44px;
|
||||
@include flex(0px);
|
||||
align-items: center;
|
||||
}
|
||||
.float-btn-wrap {
|
||||
.float-btn-wrap{
|
||||
position: sticky;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
@ -670,14 +660,14 @@
|
||||
background-color: #fff;
|
||||
z-index: 9;
|
||||
}
|
||||
@media screen and (max-width: 360px) {
|
||||
.btn-flex-wrap {
|
||||
@media screen and (max-width: 360px){
|
||||
.btn-flex-wrap{
|
||||
flex-direction: column;
|
||||
}
|
||||
.data-check-wrap {
|
||||
.data-check-wrap{
|
||||
.radio-form-box,
|
||||
.check-form-box {
|
||||
.check-form-box{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user