.intro-area { display:flex; } 
.intro-area .intro-wrap { display:flex; flex-direction: column; justify-content: center; align-items: center; width:50%; height:100vh; background: url(/images/common/intro-01.jpg) no-repeat center/cover; } 
.intro-area .intro-wrap:hover { width:80%;}
.intro-area .intro-wrap.intro2 { background-image: url(/images/common/intro-02.jpg); } 
.intro-wrap .logo { margin-bottom:var(--margin-40-20); } 
.intro-wrap h1 { color: #fff; font-size: var(--font-size-56-36); font-family: 'GmarketSans'; font-weight:700; margin-bottom:var(--margin-20-10); line-height:1em; } 
.intro-wrap p { margin-bottom: var(--margin-60-30); font-weight:600; font-size: var(--font-size-16-14); color: #fff; line-height:1.5em; } 
.intro-wrap .btn  { display:flex; justify-content: center; align-items: center; background-color: #e96424; width:250px; height:80px; font-weight:700; font-size: var(--font-size-24-20); line-height:1.25em; color: #fff; } 

@media (max-width: 1600px){
.intro-wrap .btn { width: 230px; height: 70px; } 
}

@media (max-width: 1024px){
.intro-wrap .btn  { width: 210px; height: 60px; } 
.intro-wrap .logo img { height:24px; } 
}

@media (max-width: 640px){
.intro-area { display:block; } 
.intro-area .intro-wrap { width: 100%; height: 50vh; } 
.intro-wrap .btn  { width: 180px; height: 50px; font-size: 18px; } 
.intro-wrap .logo img { height: 20px; } 
}