Files
fod/assets/css/popup.scss

228 lines
6.2 KiB
SCSS

@charset "UTF-8";
@import 'utils.scss';
/*변수파일 import*/
.popupWarp{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
overflow:hidden;
background-color: rgba(0,0,0,0.4);
z-index:1000;
.popInner{
background-color: #fff;
padding:5rem;
border-radius: 0.6rem;
h1{
font-size: 2.4rem;
font-weight: bold;
text-align: center;
margin-bottom:3rem;
}
.termsCon{
height:29rem;
overflow-y: auto;
overflow-x: hidden;
&::-webkit-scrollbar {
width: 8px;
}
&::-webkit-scrollbar-thumb {
background-color: #DEDEDE;
border-radius: 10px;
background-clip: padding-box;
border: 2px solid transparent;
}
&::-webkit-scrollbar-track {
background-color: transparent;
border-radius: 10px;
box-shadow: inset 0px 0px 5px white;
}
p{
line-height: 2.4rem;
color: #676767;
}
}
.oneButton{
width:16rem;
margin:0 auto;
margin-top:5rem;
}
.towButton{
margin:0 auto;
margin-top:5rem;
}
@include maxtablet{
padding: 3rem;
}
}
.popInner{
position: absolute;
width: 92%;
left:50%;
top:50%;
transform: translate(-50%,-50%);
@include desktopMax{
width:fit-content;
width: 100%;
}
}
.termsPop{
max-width:90rem;
}
.payInfo{
max-width:54rem;
.payInfoCon{
p{
strong{
display: block;
font-size: 1.6rem;
line-height: 2.4rem;
text-align: center;
}
span{
text-align: center;
display: block;
font-size: 1.6rem;
color: #676767;
margin-top:1.5rem;
line-height: 2.4rem;
}
}
}
}
.marketingAgree{
max-width:54rem;
.payInfoCon{
p{
text-align: center;
strong{
display: block;
font-size: 1.6rem;
line-height: 2.4rem;
}
span{
text-align: center;
display: block;
font-size: 1.6rem;
color: #676767;
margin-top:1.5rem;
line-height: 2.4rem;
}
&.borderWrap{
margin-top: 30px;
padding: 24px;
font-size: 1.4rem;
line-height: 2.2rem;
color: #676767;
border-top: 1px solid #DEDEDE;
border-bottom: 1px solid #DEDEDE;
}
}
}
&.popInner{
.towButton{
width: 100%;
}
}
.hideAdCheck{
text-align: center;
margin-top: 5rem;
label{
display: flex;
width: 100%;
justify-content: center;
align-items: center;
text-align: center;
font-size: 1.6rem;
color: #676767;
cursor: pointer;
span{
margin-left: 1rem;
}
}
}
@include maxtablet{
h1{
font-size: 1.8rem;
margin-bottom: 1.5rem;
}
.payInfoCon{
p{
font-size: 1.4rem;
&.borderWrap{
padding: 2rem 1rem;
}
}
}
&.popInner{
padding: 3rem 3rem 4rem;
.towButton{
margin-top: 4rem;
flex-wrap: wrap;
button+button{
margin-top: 1rem;
}
}
}
.hideAdCheck{
margin-top: 4rem;
label{
font-size: 1.4rem;
}
}
}
}
.inquiryCaseEtc{
max-width:54rem;
.inquiryCaseEtcCon{
p{
font-size: 1.6rem;
line-height: 2.4rem;
text-align: center;
span{
text-align: center;
display: block;
font-size: 1.6rem;
color: #676767;
margin-top:1.5rem;
line-height: 2.4rem;
}
}
.linkBox{
margin-top: 2rem;
padding: 2.8rem;
background-color: #F3F3F3;
text-align: center;
a{
position: relative;
display: inline;
border-bottom: 1px solid #676767;
margin-right: 2rem;
font-size: 1.4rem;
font-weight: 400;
line-height: 2.2;
color: #676767;
&:after{
content: '';
display: inline-block;
position: absolute;
right: -2rem;
bottom: 0;
width: 2rem;
height: 2rem;
background-image: url(/kr/assets/images/kia/svg/icon-link-arrow.svg);
background-repeat: no-repeat;
background-size: 0.6rem 1.2rem;
margin-left:1rem;
background-position: center;
}
}
}
}
}
}