489 lines
11 KiB
SCSS
489 lines
11 KiB
SCSS
.modal-popup{
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width:100%;
|
|
height:100%;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
background:rgba(0,0,0,.75);
|
|
z-index:110000;
|
|
.modal-dialog {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: calc(100% - (1.5rem * 2));
|
|
width: 680px;
|
|
z-index:200000;
|
|
margin: 1.5rem auto;
|
|
pointer-events: none;
|
|
&.middle{
|
|
width: 800px;
|
|
}
|
|
&.big{
|
|
width: 1000px;
|
|
}
|
|
.modal-content{
|
|
flex:1;
|
|
position: relative;
|
|
background-clip: padding-box;
|
|
background-color: transparent;
|
|
outline: 0 none;
|
|
pointer-events: auto;
|
|
border-radius: 4px;
|
|
.modal-header{
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 24px;
|
|
background-color: #7992ba;
|
|
border-radius: 4px 4px 0px 0px;
|
|
// overflow: hidden;
|
|
h1.title{
|
|
font-size: 13px;
|
|
color: $pop-color;
|
|
font-weight: 700;
|
|
}
|
|
.modal-close{
|
|
margin-left: auto;
|
|
color: transparent;
|
|
font-size: 0;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: url(../../public/static/images/canvas/modal_close.svg)no-repeat center;
|
|
}
|
|
}
|
|
.modal-body{
|
|
padding: 30px;
|
|
background-color: #fff;
|
|
border-radius: 0px 0px 4px 4px;
|
|
.modal-body-inner{
|
|
margin-bottom: 20px;
|
|
&.border{
|
|
padding-bottom: 20px;
|
|
border-bottom: 1px solid #ECF0F4;
|
|
}
|
|
}
|
|
.footer-btn-wrap{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.community{
|
|
.modal-dialog{
|
|
.modal-content{
|
|
.modal-header{
|
|
padding: 19px 24px;
|
|
background-color: #fff;
|
|
.modal-close{
|
|
background: url(../../public/static/images/sub/community_pop_close.svg)no-repeat center;
|
|
}
|
|
}
|
|
.modal-body{
|
|
padding: 0 30px 30px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.explane{
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
color: #101010;
|
|
margin-bottom: 20px;
|
|
}
|
|
.red{
|
|
color: #F00;
|
|
}
|
|
// modal-contents
|
|
|
|
// 비밀번호 변경
|
|
.change-password-guide{
|
|
|
|
span{
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
color: #101010;
|
|
&:last-child{
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.change-password-box{
|
|
padding: 30px;
|
|
border-radius: 4px;
|
|
background: #F4F4F7;
|
|
margin-bottom: 20px;
|
|
.change-password-tit{
|
|
.tit-b{
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: #344356;
|
|
}
|
|
.tit-s{
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
color: #898989;
|
|
}
|
|
}
|
|
.change-password-input{
|
|
width: 100%;
|
|
.change-password{
|
|
width: 100%;
|
|
height: 45px;
|
|
border-radius: 4px;
|
|
border: 1px solid #E9E9E9;
|
|
background-color: #fff;
|
|
padding: 0 10px;
|
|
font-size: 12px;
|
|
color: #364864;
|
|
font-family: 'Noto Sans JP', sans-serif;
|
|
&::placeholder{
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
.table-item-th{
|
|
width: 145px;
|
|
}
|
|
}
|
|
.form-table{
|
|
display: table;
|
|
table-layout: auto;
|
|
width: 100%;
|
|
.table-item{
|
|
display: table-row;
|
|
.table-item-th,
|
|
.table-item-td{
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
padding-bottom: 10px;
|
|
}
|
|
&:last-child{
|
|
.table-item-th,
|
|
.table-item-td{
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
.table-item-td{
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 주소찾기 팝업
|
|
.address-input-wrap{
|
|
position: relative;
|
|
height: 45px;
|
|
padding: 0 40px 0 15px;
|
|
border-radius: 4px;
|
|
border: 1px solid #E9E9E9;
|
|
background: #FFF;
|
|
margin-bottom: 20px;
|
|
input{
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
font-family: "Noto Sans JP" sans-serif;
|
|
color: #868686;
|
|
&::placeholder{
|
|
color: #AEAEAE;
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
.search-btn{
|
|
position: absolute;
|
|
top: 0;
|
|
right: 15px;
|
|
width: 21px;
|
|
height: 100%;
|
|
background: url(../../public/static/images/sub/address_search.svg)no-repeat center;
|
|
background-size: 21px 21px;
|
|
}
|
|
}
|
|
|
|
// 설계의뢰 불러오기
|
|
.design-tit-wrap{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
h3{
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #101010;
|
|
}
|
|
.design-search-wrap{
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
.design-request-table{
|
|
margin-bottom: 20px;
|
|
}
|
|
.design-request-grid{
|
|
.design-request-count{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
.design-request-grid-tit{
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #101010;
|
|
}
|
|
.select-wrap{
|
|
margin-left: auto;
|
|
width: 80px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 제품 특이사항 팝업
|
|
.calculation-estimate{
|
|
&.usemodal{
|
|
margin-bottom: 0;
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
// 내정보 조회 팝업
|
|
.password-input{
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 30px;
|
|
border: 1px solid #EEE;
|
|
padding: 0 10px;
|
|
border-radius: 2px;
|
|
input{
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 13px;
|
|
color: #45576F;
|
|
font-family: 'Noto Sans JP', sans-serif;
|
|
font-weight: 400;
|
|
&::placeholder{
|
|
color: #D1D7E0;
|
|
}
|
|
}
|
|
.blink{
|
|
flex: none;
|
|
width: 19px;
|
|
height: 100%;
|
|
background-image: url(../../public/static/images/main/password_hidden.svg);
|
|
background-size: 19px 13px;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
&.on{
|
|
background-image: url(../../public/static/images/main/password_visible.svg);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 커뮤니티
|
|
.community_detail-tit{
|
|
font-size: 16px;
|
|
color: #101010;
|
|
font-weight: 600;
|
|
padding-bottom: 14px;
|
|
border-bottom: 2px solid #101010;
|
|
}
|
|
.community_detail-file-wrap{
|
|
padding: 24px 0;
|
|
border-bottom: 1px solid #E5E5E5;
|
|
dt{
|
|
font-size: 13px;
|
|
color: #101010;
|
|
font-weight: 500;
|
|
}
|
|
dd{
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
margin-bottom: 3px;
|
|
color: #344356;
|
|
&:nth-child(2){
|
|
margin-top: 15px;
|
|
}
|
|
&:last-child{
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
.community_detail-inner{
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
color: #45576F;
|
|
line-height: 26px;
|
|
word-break: keep-all;
|
|
&::-webkit-scrollbar {
|
|
width: 4px;
|
|
background-color: transparent;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
background-color: #C1CCD7;
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
|
|
// 견적 복사
|
|
.estimate-copy-info-item{
|
|
margin-bottom: 20px;
|
|
&:last-child{
|
|
margin-bottom: 0;
|
|
}
|
|
.estimate-copy-info-tit{
|
|
font-size: 13px;
|
|
color: #101010;
|
|
font-weight: 500;
|
|
margin-bottom: 10px;
|
|
}
|
|
.estimate-copy-info-box{
|
|
display: flex;
|
|
gap: 5px;
|
|
.estimate-copy-sel{
|
|
flex: 1 1 auto;
|
|
}
|
|
.estimate-copy-id{
|
|
flex: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 150px;
|
|
background-color: #FAFAFA;
|
|
border: 1px solid #EEEEEE;
|
|
font-size: 13px;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 1:1문의
|
|
.one-on-one{
|
|
.select-wrap{
|
|
width: 250px;
|
|
}
|
|
.input-wrap{
|
|
flex: 1 1 auto;
|
|
}
|
|
&.btn-area{
|
|
padding-bottom: 0;
|
|
border: none;
|
|
margin-left: 10px;
|
|
}
|
|
&.drag-file-box{
|
|
border: 1px solid #eee;
|
|
.drag-file-area{
|
|
margin-top: 0;
|
|
.file-list {
|
|
overflow-y: auto;
|
|
max-height: 100px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.oneonone-header-wrap{
|
|
padding-bottom: 14px;
|
|
border-bottom: 2px solid #101010;
|
|
.oneonone-title{
|
|
font-size: 16px;
|
|
color: #101010;
|
|
font-weight: 600;
|
|
margin-bottom: 14px;
|
|
}
|
|
}
|
|
.oneonone-infor{
|
|
display: flex;
|
|
align-items: center;
|
|
.profile{
|
|
position: relative;
|
|
padding-left: 26px;
|
|
padding-right: 8px;
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
color: #101010;
|
|
&::before{
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
transform: translateY(-50%);
|
|
width: 24px;
|
|
height: 24px;
|
|
background: url(./../../public/static/images/sub/oneonone_profile_icon.svg)no-repeat center;
|
|
}
|
|
&::after{
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 0;
|
|
transform: translateY(-50%);
|
|
width: 1px;
|
|
height: 8px;
|
|
background-color: #CCCCCC;
|
|
}
|
|
}
|
|
.date{
|
|
padding-left: 8px;
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
color: #101010;
|
|
}
|
|
}
|
|
.oneonone-detail{
|
|
padding: 20px;
|
|
border: 1px solid #101010;
|
|
border-top: none;
|
|
.community_detail-file-wrap{
|
|
padding-top: 0;
|
|
}
|
|
.community_detail-inner{
|
|
max-height: 110px;
|
|
margin-top: 24px;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.oneonone-answer{
|
|
margin-top: 8px;
|
|
padding: 20px;
|
|
border: 1px solid #101010;
|
|
.community_detail-inner{
|
|
max-height: 110px;
|
|
|
|
}
|
|
.community_detail-file-wrap{
|
|
border-top: 1px solid #D4DCE7;
|
|
padding: 16px 0 0 0;
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.answer-title-wrap{
|
|
display: flex;
|
|
align-items: center;
|
|
padding-bottom: 14px;
|
|
border-bottom: 1px solid #D4DCE7;
|
|
.answer-title{
|
|
font-size: 14px;
|
|
color: #101010;
|
|
font-weight: 600;
|
|
}
|
|
.oneonone-infor{
|
|
margin-left: auto;
|
|
}
|
|
} |