@charset "utf-8";

.intro-wrap {height: 100vh;width: 100%;position: relative;}
.intro-wrap * { color: #fff;font-family: 'Pretendard';} 
.intro-wrap > .row {height: 100%;width: 100%;}
.intro-wrap .row a {position: relative;display: flex;justify-content: center;align-items: center;} 
.intro-wrap .row a:first-child { background: #febf4c; } 
.intro-wrap .row a:last-child { background: #333333; } 
.intro-wrap .row a::before { content:''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); transition: 0.4s; z-index: 1; } 
.intro-wrap .row a .back-img {position: absolute;bottom: 0;top: 50%;overflow: hidden;display: flex;width: auto} 
.intro-wrap .row a .back-img img {display: block;max-width: 100%;height: auto;object-fit: contain;}
.intro-wrap .row a .front-text {position: absolute;z-index:11;text-align: center;transition: .3s;} 
.intro-wrap .row a .front-text h2 {font-size: 75px;margin-bottom: 45px;font-family: 'MBC 1961';}
.intro-wrap .row a .front-text p {font-size: 25px;margin-bottom: 5px;}
.intro-wrap .row a .front-text h4 {font-size: 35px;font-weight: bold;}
.intro-wrap .intro-logo {position: absolute;top: 50%;left: 50%;margin-left: -120px;margin-top: -120px;background: #fff;z-index: 99;width: 240px;height: 240px;border-radius: 50%;display: flex;align-items: center;justify-content: center;flex-direction: column;}
.intro-wrap .intro-logo img {width: 160px;}
.intro-wrap .intro-logo img.logo-hover {display:none;}
.intro-wrap .intro-logo:hover {background: #febf4c}
.intro-wrap .intro-logo:hover img.logo {display: none;}
.intro-wrap .intro-logo:hover img.logo-hover {display: block;}
.intro-wrap .row a:hover::before {opacity: 0;}
.intro-wrap .row a:hover .front-text {transform: translateY(-70%);}

@media (max-width: 1200px) {
    .intro-wrap .row a .front-text h2 {font-size: 55px;}
    .intro-wrap .row a .front-text p {font-size: 22px;}
    .intro-wrap .row a .front-text h4 {font-size: 30px;}
}

@media (max-width: 1024px) {
    .intro-wrap .row a .front-text h2 {font-size: 42px;margin-bottom: 25px;}
    .intro-wrap .row a .front-text p {font-size: 18px;}
    .intro-wrap .row a .front-text h4 {font-size: 24px;}
    .intro-wrap .intro-logo {transform: scale(0.65);}
}
@media (max-width: 560px) {
    .intro-wrap .row a .front-text h2 {font-size: 32px;}
    .intro-wrap .row a .front-text p {font-size: 16px;}
    .intro-wrap .row a .front-text h4 {font-size: 21px;}
    .intro-wrap .intro-logo {transform: scale(0.5);}
}