@charset "UTF-8";

@import url("reset.css");
@import url("fonts.css");

:root { 
    --body-bg-color: #fff;  
    --highlight-bg-color: #fcf8e3;
    --body-font-family: 'Pretendard'; 
    --point-font-family: 'cafe24Ssurround', sans-serif;
    --body-line-height: 1.5;  
    --body-text-align: left;
    --primary-color: #8B63BB;
    --heading-color: #333;
    --font-size: 0.8125rem;
    --font-weight: 400;
    --font-color: #868686;
    --font-secondary-color: #555;
}

*,::after,::before{-webkit-box-sizing:border-box;box-sizing:border-box}
@media (prefers-reduced-motion:no-preference) {
    :root{scroll-behavior:smooth}
}
html{
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}
html, body {overflow-x: hidden;}
body {min-height:640px;}
body[orient="portrait"] { min-height:640px; }
body[orient="landscape"] { min-height:480px; }
.preventTouch {
    touch-action: none;
}
body {
    margin: 0;
    font-family: var(--body-font-family);
    font-size: 100%;
    font-weight: var(--body-font-weight);
    line-height: var(--body-line-height);
    color: var(--body-color);
    text-align: var(--body-text-align);
    background-color: var(--body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
hr {
    margin: 1rem 0;
    color: inherit;
    border: 0;
    border-top: 1px solid;
    opacity: .25
}
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-family: var(--body-font-family);
    font-weight: 500;
    line-height: 1.2;
    color: var(--heading-color);
}
.h1,h1{font-size:calc(1.328125rem + .9375vw)}
.h2,h2{font-size:calc(1.2875rem + .45vw)}
.h3,h3{font-size:calc(1.2671875rem + .20625vw)}
.h5,h5{font-size:1.015625rem}
.h6,h6{font-size:.8125rem}
.h4,h4{font-size:1.21875rem}
p{margin-top:0;margin-bottom:1rem;word-break:keep-all;}
abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}
address{margin-bottom:1rem;font-style:normal;line-height:inherit}
ol ol,ol ul,ul ol,ul ul{margin-bottom:0}
b,strong{font-weight:bolder}
.small,small{font-size:.875em}
a {color:rgba(var(--link-color));text-decoration:none}
a:hover {color: var(--vz-link-hover-color)}
a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}
img {vertical-align:middle; width:100%; height:auto;}
table{caption-side:bottom;border-collapse:collapse}
caption{padding-top:.75rem;padding-bottom:.75rem;color:var(--font-secondary-color);text-align:left}
th{font-weight:600;text-align:inherit;text-align:-webkit-match-parent}
tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}
label{display:inline-block}
button{border-radius:0}
button:focus:not(:focus-visible){outline:0}
button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}
button,select{text-transform:none}
[role=button]{cursor:pointer}
select{word-wrap:normal}
select:disabled{opacity:1}
[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none!important}
[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}
[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}
::-moz-focus-inner{padding:0;border-style:none}
textarea{resize:vertical}
fieldset{min-width:0;padding:0;margin:0;border:0}
legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}
legend+*{clear:left}
::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}
::-webkit-inner-spin-button{height:auto}
[type=search]{outline-offset:-2px;-webkit-appearance:textfield}
::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-color-swatch-wrapper{padding:0}
::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}
::file-selector-button{font:inherit;-webkit-appearance:button}
output{display:inline-block}
iframe{border:0}
summary{display:list-item;cursor:pointer}
progress{vertical-align:baseline}
[hidden]{display:none!important}
.overflow-auto {overflow-y: auto !important;}

/* button */
.btn {
    position: relative;
    margin: 10px auto;
    border-radius: 5px;   
    text-align: center; 
    cursor: pointer; 
    box-shadow: none;
    border:2px solid transparent;
    transition: 0.5s ease;
    transition: 0.2s all ease-in-out;
    overflow: hidden;
}
.btn > span {
    position: relative;
    z-index: 1;
}
.btn-lg {
    width: 372px;
    height: 60px;
    font-size: 25px; 
    font-weight: 600;
    line-height: 56px;
}
.btn-primary {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-primary:after {
    content: "";
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    background: var(--primary-color);
    width: 150%;
    padding-top: 150%;
    transition: 0.55s ease;
}
.btn-primary:hover {
    color: var(--primary-color);
    background: #fff;
    transform: translateY(-5px);
}
.btn-primary:hover:after {    
    left: 190%;
}

/* color */
.font-primary {color: var(--primary-color) !important}
.app {
    position: relative;
    width:100vw;
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.container {
    position: relative;
    max-width: 1140px;
    min-height: 580px;
    height: auto;
    margin: 0 auto;
    text-align: center;
}
.container:after {
    content:'';
    clear:both;
    display: table;
}
h1.ci {
    position: absolute;
    width: 70px;
    height: 90px;
    left: 50%;
    bottom: 0px;
    margin-left:-35px;    
    margin-bottom: 0;
    padding:10px 0;
}
.landing-title {
    position: relative;
    margin: 80px auto 0;
    text-align: center;
    z-index: 10;
}
.landing-title h2 {
    display: block;
    text-align: center;
    font-size: 60px;
    font-family: var(--point-font-family);
    font-weight: bold;
    line-height: 1.2;
    color: var(--primary-color)
}
.landing-title h3 {
    display: block;
    text-align: center;
    font-size: 40px;
    font-family: var(--point-font-family);
    font-weight: bold;
    color: #333;
    line-height: 1.2;
    white-space: nowrap;
}
.landing-title p {
    display: inline-block;
    width: auto;
    margin-top: 16px;
    color: var(--font-color);
    font-family: var(--body-font-family);
    font-size: 24px;
    font-weight: normal;
    line-height: 1.4;    
    background-color: rgba(255,255,255,0.7);
}
.landing-form {
    position: relative;
    width:100%;
    max-width: 372px;
    margin: 30px auto 0;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    z-index: 10;
}
.landing-form .input {
    position: relative;
    top: 0;
    left: 0;
    width: 372px;
    height: 60px;
    border: 1px solid #B0B0B0;
    border-radius: 5px;
    font-size: 25px;
    text-align: center;
    color: var(--heading-color);
    outline: none;
    padding: 0 30px 0 16px;
    line-height: 58px;
    background-color: #F8F8FA;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.landing-form .input::placeholder {
    font-size: 20px;
    color: var(--font-color);
}
.landing-form .input:focus {
    border-color: var(--primary-color);
}
.landing-form .label {
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 12px;
    padding: 0 4px;
    margin-left: -90px;
    color: var(--font-color);
    font-size: 25px;
    cursor: text;
    transition: top 200ms ease-in, left 200ms ease-in, font-size 200ms ease-in;
}
.landing-form .input:focus ~ .label,
.landing-form .input:not(:placeholder-shown).input:not(:focus) ~ .label {
    opacity: 1;
    font-size: 16px;
    top: -24px;
    left: 30%;
    color: #333;
}
.landing-form .reset {
    display: none;
    position: absolute;
    top: 10px;
    right: 50%;
    margin-right: -170px;
    width: 25px;
    height: 25px;
    border: 0;
    background-color: transparent;
    outline: 0;
}
.landing-form .reset i[class*=" ri-"], 
.landing-form .reset i[class^=ri-] {
    font-size: 24px;
    color:var(--font-color);
}
.landing-form .input:not(:placeholder-shown) ~ .reset {
    display: inline-block;
}  
.landing-form .input:focus::placeholder {
    opacity: 0;
}
.landing-form .input:focus::-webkit-input-placeholder {
    opacity: 0;
}
.landing-form .input:focus::-moz-placeholder {
    opacity: 0;
}  
.landing-form .input:not(:focus):not(:placeholder-shown) ~ label {
    display: none;
}
.landing-form .validation {
    margin-top: 4px;
    color:#ED1659;
    font-size: 18px;  
}
.landing-form .agree-wrap {
    width: 100%;
    height: 100%;
    max-width: 100%;
    background-color: rgba(255,255,255,0.8);
}
.landing-form .agree {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    margin: 10px auto;
    max-width: 372px;
}
.landing-form .agree .info-text {
    display: block;
    font-size: 20px;
    color:#555;
    font-weight: 600;
}
.landing-form .check-area {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: flex-start;
    text-align: left;
}
.landing-form .check-area .checkbox {    
    display: inline-block;
    margin: 0 12px 0 0;
    height: 20px;   
    width: 20px;
    background-color: #F8F8FA;
    border: 1px solid #B0B0B0;
    border-radius:4px;
}
.landing-form .check-area .checkbox label {    
    position: relative;
    display: block;
    height: 20px;
    width: 20px;
    cursor: pointer;
}
.landing-form .check-area .checkbox label:after {
    -moz-transform: scaleX(-1) rotate(135deg);
    -ms-transform: scaleX(-1) rotate(135deg);
    -webkit-transform: scaleX(-1) rotate(135deg);
    transform: scaleX(-1) rotate(135deg);    
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-right: 2px solid #B0B0B0;
    border-top: 2px solid #B0B0B0;
    content: '';
    display: block;
    height: 12px;
    left: 3px;
    position: absolute;
    top: 11px;
    width: 5px
}
.landing-form .check-area .checkbox label:hover:after {
    border-color: #ccc;
}
.landing-form .check-area .checkbox input {
    display: none;
}
.landing-form .check-area .checkbox input:checked + label {
    background-color: var(--primary-color);
    border: 1px solid transparent;
    border-radius: 4px;
    left: -1px;
    top:-1px;
}
.landing-form .check-area .checkbox input:checked + label:after {
    -webkit-animation: check 0.8s;
    -moz-animation: check 0.8s;
    -o-animation: check 0.8s;
    animation: check 0.8s;
    border-color: #fff;
}
.landing-form .check-area .checkbox.checkbox-alt label:hover:after {
    -webkit-animation: check 0.8s ease infinite;
    -moz-animation: check 0.8s ease infinite;
    -o-animation: check 0.8s ease infinite;
    animation: check 0.8s ease infinite;
}
.landing-form .check-area .checkbox.checkbox-alt input:checked + label:after {
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
    animation: none;
}
@-webkit-keyframes check {
    0%{height:0;width:0;}
    25%{height:0;width:5px;}
    50%{height:12px;width:5px;}
}
@-moz-keyframes check {
    0%{height:0;width:0;}
    25%{height:0;width:5px;}
    50%{height:12px;width:5px;}
}
@-ms-keyframes check {
    0%{height:0;width:0;}
    25%{height:0;width:5px;}
    50%{height:12px;width:5px;}
}
@keyframes check {
    0%{height:0;width:0;}
    25%{height:0;width:5px;}
    50%{height:12px;width:5px;}
}
.landing-form .check-area .check-label strong {
    color: var(--font-secondary-color);
    font-weight: 400;
}
.landing-form .check-area a, .landing-form .check-area div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 32px);
    color: var(--font-color);
    font-size: 15px;
}

.landing-bg {
    position:relative;
    width: 100%;
    min-height: 400px;
}
.landing-bg .parking-line {
    position: absolute;
    left: 0;
    right: 0;    
    bottom: 90px;
    height: 106px;
    background-color: #EBEBFB;
    border-top: 1.3px solid #54362A;
    opacity: 0; 
    z-index: 2;
    animation: fade-in 1.5s ease forwards; 
} 
.landing-bg .parking-line:after {
    content:'';
    position: absolute;
    bottom:0;
    left: 0;
    right:0;
    width: 100%;
    height: 5px;
    background-color: #EBEBFB;
}
@keyframes fade-in {
    to{opacity:1;}
}
.landing-bg .parking-line .trapezoid {
    position: absolute;
    bottom: 14px;
    left: 50%;
	border-bottom: 90px solid #fff;
	border-left: 90px solid transparent;
	border-right: 90px solid transparent;
	height: 0;
	width: 500px;
    margin-left: -250px;
}
.landing-bg .parallelogram {
    position: absolute;
	width: calc(50% - 190px) ;
	height: 94px;	
	background-color: #fff;
}
.landing-bg .parallelogram.first {
    transform: skew(-45deg);
    left: -36px;
}
.landing-bg .parallelogram.last {
    left: calc(50% + 226px);
    transform: skew(45deg);
}
.landing-bg .landing-image {
    position: absolute;
    width: 100%;
    bottom: 196px;
    z-index: 1;
}
.landing-bg .landing-image .mountain {
    position: absolute;
    left:0;
    bottom:0;
    width: 174px;
    height: 130px;
    background: url(../images/landing/mountain.svg) no-repeat 0 100%/100%;
}
.landing-bg .landing-image .parking-mark {
    position: absolute;
    left:140px;
    bottom:0;
    width: 80px;
    height: 178px;
    background: url(../images/landing/parking-mark.svg) no-repeat 0 100%/100%;
}
.landing-bg .parking-mark2 {
    position: absolute;
    left:40%;
    bottom:140px;
    width: 78px;
    height: 200px;
    background: url(../images/landing/parking-mark2.svg) no-repeat 0 100%/100%;
    z-index: 3;
}
.landing-bg .landing-image .cloud .cloud1 {
    position: absolute;
    left: 50%;
    bottom: 116px;
    width: 89px;
    height: 33px;
    background: url(../images/landing/cloud1.svg) no-repeat 0 0/100%;
    -webkit-animation: cloud-transit infinite ease-in-out 10s;
            animation: cloud-transit infinite ease-in-out 10s;
}
.landing-bg .landing-image .cloud .cloud2 {
    position: absolute;
    left:60%;
    bottom:175px;
    width: 55px;
    height: 20px;
    background: url(../images/landing/cloud2.svg) no-repeat 0 0/100%;
    -webkit-animation: cloud-transit-2 infinite ease-out 10s;
            animation: cloud-transit-2 infinite ease-out 10s;
}
.landing-bg .landing-image .building {
    position: absolute;
    right:0;
    bottom:0;
    width: 178px;
    height: 134px;
    background: url(../images/landing/building.svg) no-repeat 0 100%/100%;
}
.landing-bg .landing-image .tree {
    position: absolute;
    right:70px;
    bottom:0;
    width: 66px;
    height: 50px;
    background: url(../images/landing/tree.svg) no-repeat 0 100%/100%;
    z-index: 1;
}
.landing-bg .car {
    position: absolute;
    left:0;
    right: auto;
    bottom:120px;
    width: 324px;
    height: 134px;
    background: url(../images/landing/car.svg) no-repeat 0 0/100%;
    z-index: 3;
    animation: drive 2s forwards;
}
@keyframes drive {
    /* from {transform: translateX(0);}
    to {transform: translateX(170%);} */
    from {left: 0;}
    to {left: calc(50% - 162px)}
}
@-webkit-keyframes drive {   
    from {left: 0;}
    to {left: calc(50% - 162px)}
}  
@-webkit-keyframes cloud-transit {
    0% { 
        opacity:0;       
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    50% {opacity:1;}
    100% {        
        -webkit-transform: translateX(10%);
                transform: translateX(10%);
        opacity: 0;
    }
}  
@keyframes cloud-transit {
    0% { 
        opacity:0;       
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    50% {opacity:1;}
    100% {        
        -webkit-transform: translateX(10%);
                transform: translateX(10%);
        opacity: 0;
    }
}  
@-webkit-keyframes cloud-transit-2 {
    0%{opacity:0;}
    50%{opacity:1;}
    100% {
        opacity: 0;
        -webkit-transform: translateX(-5%);
                transform: translateX(-5%);
    }
}  
@keyframes cloud-transit-2 {
    0%{opacity:0;}
    50%{opacity:1;}
    100% {
        opacity: 0;
        -webkit-transform: translateX(-5%);
                transform: translateX(-5%);
    }
}
.landing-bg .notification {
    position: absolute;
    left:50%;
    right: auto;
    bottom:120px;
    width: 148px;
    height: 165px;
    margin-left:-74px;
    background: url(../images/landing/bubble.svg) no-repeat center center/100% 100%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}
.landing-bg .notification .frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
}  
.landing-bg .notification .bell {
    position: absolute; 
    width: 92px;
    height: 93px;
    max-width: 65%;
    top:16%;
    background: url(../images/landing/bell.svg) no-repeat center center/100%;
    z-index: 4;
    -webkit-animation: shake 2.5s ease infinite;
    animation: shake 2.5s ease infinite;
}
@-webkit-keyframes shake {
    0%,50%,100%{transform:rotate(0);}
    5%,10%,15%,20%,25%,30%,35%,40%{transform:rotate(6deg);}
    45%{transform:rotate(4deg);}
    7.5%,12.5%,17.5%,22.5%,27.5%,32.5%,37.5%,42.5%{transform:rotate(-6deg);}
    47.5%{transform:rotate(-2deg);}
}
@keyframes shake {
    0%,50%,100%{transform:rotate(0);}
    5%,10%,15%,20%,25%,30%,35%,40%{transform:rotate(6deg);}
    45%{transform:rotate(4deg);}
    7.5%,12.5%,17.5%,22.5%,27.5%,32.5%,37.5%,42.5%{transform:rotate(-6deg);}
    47.5%{transform:rotate(-2deg);}
} 
.landing-bg .pin-area {
    position: absolute; 
    width: 142px;
    height: 150px; 
    max-width: 20%;
    left:50%;
    bottom:100px;
    margin-left: -71px;
    z-index: 3;
}
.landing-bg .pin-area .pin { 
    position: absolute;   
    width: 100%;
    height: 134px;   
    background: url(../images/landing/pin.svg) no-repeat center 100%/100%;     
    animation: bounce 1s infinite;
    z-index: 5;
}
.landing-bg .pin-area .pulse {
    background: #d6d4d4;
    border-radius: 50%;
    height: 14px;
    width: 14px;
    position: absolute;
    left: 50%;
    top: 60%;
    margin: 11px 0px 0px -8px;
    transform: rotateX(55deg);
    z-index: -2;
}
.landing-bg .pin-area .pulse:after {
    content: "";
    border-radius: 50%;
    height: 40px;
    width: 40px;
    position: absolute;
    margin: -13px 0 0 -13px;
    animation: pulsate 1s ease-out;
    animation-iteration-count: infinite;
    opacity: 0;
    box-shadow: 0 0 1px 2px #ED1659;
    animation-delay: 1.1s;
}  
@keyframes pulsate {
    0%{transform:scale(0.1,0.1);opacity:0;}
    50%{opacity:1;}  
    100%{transform:scale(1.2,1.2);opacity:0;}
}
@keyframes bounce {
    0%{transform:translateY(0);}
    50%{transform:translateY(-.5em);}
    0%{transform:translateY(0);}
} 
.parking-list {
    position: relative;
    width: 560px;
    max-width: 100%;
    margin: 20px auto 0;
    z-index: 5;
}
.parking-list ul {  
    width:100%;  
    display: flex;
    flex-direction: column;    
    align-items: flex-start;
    justify-content: flex-start;
}
.parking-list ul li {
    width: 100%;
    margin:5px auto;
    padding: 12px 10px 12px 20px;
    background-color: #F8F8FA;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    text-align: left;
}
.parking-list ul li .address {    
    width: calc(100% - 140px);
    color: var(--font-secondary-color);
    font-size: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.parking-list ul li .discount,
.parking-list ul li .distance {
    text-align: center;
    color: var(--font-color);
    font-size: 20px;
    line-height: 1.2;
    padding: 0 12px;
    border-left: 1px solid #B0B0B0;
}
.parking-list + .landing-form {
    margin:20px auto 0;
}
.customer {
    position: relative;
    margin: 60px auto;
}
.customer p {
    color: var(--font-secondary-color);
    font-size: 22px;
    font-family: var(--point-font-family);
}
.customer .app-down {
    display: flex;
    margin-top:36px;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}
.customer .app-down a {
    width: 200px;
}
.customer .app-down a + a {
    margin-left: 10px;
}
.customer .cs {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.customer .cs a {
    margin: 10px auto 0;
    width: 408px;
    min-height: 60px;   
    text-align: center;
    border-radius: 5px;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.customer .cs a.kakao {
    padding:5px 20px;
    background-color: #FFE502;
    color: #704B3C;
}
.customer .cs a.kakao i.ico-kakao {
    display: inline-block;
    width: 49px;
    height: 49px;
    vertical-align: middle;
    background: url(../images/landing/kakaoTalk.svg) no-repeat 0 0;
}
.customer .cs a.tel {
    padding:5px 20px;
    background-color: #EBEBFB;
    color: var(--primary-color);
}
.customer .cs a.tel i.ico-zoomansa {
    display: inline-block;
    width: 49px;
    height: 49px;
    vertical-align: middle;
    background: url(../images/landing/ci.svg) no-repeat 50% 49%/50%;
}
footer {
    position: relative;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary-color);   
}
footer .container {
    max-width: 400px;
    padding: 20px 0;
    color:#fff;    
    text-align: left;
    min-height: auto;
}
footer .footer-menu a {
    display: inline-block;
    padding-right: 5px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
}
footer .footer-menu a + a {
    padding-left: 7px;
    border-left: 1px solid #fff;
}
footer .footer-menu a.privacy {
    color:#ffe900;
    font-weight: 500;
}
footer .sns {
    position: absolute;
    top: 20px;
    right: 0;
}
footer .sns a {
    display: inline-block;
    width: 25px;
    height: 24px;
}
footer .footer-info {
    word-break: keep-all;
}
footer .footer-info span:not(.company) {
    display: inline-block;
    font-size: 11px !important;
    font-weight: 400;
    line-height: 15px;
}
footer .footer-info .company {
    display: block;
    margin:15px 0;
    font-size: 13px;
    font-weight: 700;
}
footer .center {
    width: 410px;
    height: 24px;
    margin: 14px 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    border: 1px solid #fff;
    box-sizing: border-box;
    border-radius: 12px;
}
footer .center dt {  
    width: 140px;
    min-width: 140px;
    height: 100%;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    line-height: 22px;
    border-right: 1px solid #fff;
    vertical-align: middle;
}
footer .center dd {
    display: flex;
    width: calc(100% - 140px);
    height: 100%;
    padding: 0 8%;
    text-align: left;
    flex-wrap: nowrap;
    justify-content: space-between;
}
footer .center a.tel {
    display: inline-block;
    margin-right: 16px;
    height: 100%;
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    white-space: nowrap;
    flex: 1;
}
footer .center a.mail {
    display: inline-block;
    height: 100%;
    font-size: 12px;
    font-weight: 400;
    
    line-height: 22px;
    flex: 1;
}
footer .copyright {
    display: block;
    width: 100%;
    margin-top:14px;
    font-size: 11px;
    color:#EBEBFB;
    white-space: nowrap;
}

.footer-p {
    position: absolute !important;
    bottom: 8px !important;
    left: 8px !important;
    font-size: 12px !important;
    color: #7F7F7F !important;
}

@media screen and (max-width: 1140px) {
    .container {max-width:100%; margin:0 20px;}
    .landing-bg .parking-mark2 {left:30%}
}
/* @media screen and (max-height: 900px) {
    footer {position: absolute;}
} */
@media screen and (max-width: 900px) {
    .landing-bg .parking-mark2 {left:30%}
}
@media screen and (max-width: 600px) {   
    .container {min-height: 400px;} 
    .landing-title {margin:40px auto 0;}
    .landing-title h2 {font-size: 40px;}
    .landing-title h3 {font-size: 26px;}
    .landing-title p {font-size: 18px; }
    .landing-form {margin-top:10px;}
    .landing-form .btn-lg,
    .landing-form .input {width:100%; font-size:18px; height: 50px; line-height:46px;}
    .landing-form .input::placeholder{font-size:18px;}
    .landing-form .reset{top:6px;margin-right:0;right:20px;width:20px;height:20px;}    
    .landing-bg {position:absolute;top:auto;bottom:0;width:100%;}
    .landing-bg .landing-image .mountain {max-width: 30%;}
    .landing-bg .landing-image .building {max-width:30%;}
    .landing-bg .landing-image .parking-mark {max-width:15%; left:20%}
    .landing-bg .parking-mark2 {max-width:16%; left:24%; bottom: 120px;}
    .landing-bg .landing-image .tree {max-width:10%; right:10%}
    .landing-bg .car {max-width:64%; margin-left:-32%; bottom: 80px;}
    .landing-bg .notification {max-width:28%; margin-left:-12%; bottom:100px;}
    @keyframes drive {        
        from {left: 0;}
        to {left: calc(50%)}
    }
    @-webkit-keyframes drive {   
        from {left: 0;}
        to {left: calc(50%)}
    }  
    .landing-form .agree .info-text {font-size:16px;}
    .landing-bg .pin-area {margin-left: -10%;}
    .landing-bg .pin-area .pulse {top: 67%;}
    .parking-list ul li {padding:8px 0 8px 16px;}
    .parking-list ul li .address {width: calc(100% - 120px); font-size: 16px;}
    .parking-list ul li .discount, 
    .parking-list ul li .distance {font-size:14px;}
    h1.ci {width: 50px; margin-left:-25px; height: 70px;}
    .landing-bg .parking-line {bottom:70px;}
    .landing-bg .landing-image {bottom:168px;}
    .landing-bg .pin-area {bottom:80px;}
    .customer {margin:10px auto}
    .customer p {font-size: 16px;}
    .customer .app-down {margin-top:12px;}
    .customer .app-down a {width: auto; flex: 1;}
    .customer .cs a{margin:10px auto 0;width:100%;height:50px;line-height:50px;font-size:16px;}
    .customer .cs a.kakao i{margin-right:4px;}
    .customer .cs a.tel i.zoomansa{margin-right:4px;}
    footer .container {font-size: 14px;}
    footer .center{width:100%;}
    .app.overflow-auto {min-height:700px; height: 100vh;}
    .landing-form .validation {font-size:14px;}
}
@media screen and (max-width: 500px) {
    .landing-bg .parking-line .trapezoid {width: 100%; margin-left: -50%;}    
    .landing-bg .parallelogram.first {left:-43%; width:50%;}
    .landing-bg .parallelogram.last {left:93%; width:50%;}
}

@media screen and (max-width: 400px) {
    footer .center {white-space:wrap; line-height: 1.4;}
    footer .center dt {width:auto; min-width:80px;}
}
@media screen and (max-width: 300px) {
    .container {min-height:460px;}
}
@media screen and (min-width: 250%) {
    .landing-bg {bottom:-100% !important;}   
}