@charset "utf-8";

#intro_wrap{display: flex;}
#intro_wrap .intro_ctn{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 999; width: clamp(180px, 15.1vw, 290px); height: auto;}
#intro_wrap .intro_ctn img{width: 100%;}

#intro_wrap .intro_body{width: 50%; height: 100vh;}
#intro_wrap .intro_body:hover .intro_img{opacity: 1;}
#intro_wrap .intro_body a{width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #fff; overflow: hidden; position: relative; }

#intro_wrap .bg{position: absolute; width: 1920px; height: 100%; opacity: 0.3;}
#intro_wrap .bg video{width: 100%; height: 100%; object-fit: cover;}

#intro_wrap .intro_body:hover span{background: #fff;}
#intro_wrap .intro_body:hover button{background: #2b1717;}
#intro_wrap .intro_title{text-align: center; font-family: 'paybooc'; position: relative;}
#intro_wrap .intro_title h1{letter-spacing: -0.02em; font-weight: 800; font-size: 50px;}
#intro_wrap .intro_title span{display: inline-block; width: 70px; height: 5px; background: linear-gradient(135deg, #e4468f, #8d5dd8); margin: 25px 0 10px;}
#intro_wrap .intro_title p{font-size: 30px;}    
#intro_wrap .intro_title button{font-size: 18px; color: #fff; background: linear-gradient(135deg, #e4468f, #8d5dd8); margin-top: 15px; width: 130px;
padding: 7.5px 0; border-radius: 50px;}

#intro_wrap .intro_img{position: absolute; bottom: 0; opacity: 0;}

#intro_wrap .intro_body:hover{background: linear-gradient(135deg, #e4468f, #8d5dd8);}
#intro_wrap .intro_body:hover .bg{opacity: 0;}
#intro_wrap .intro_left{background: #2b1717;}
#intro_wrap .intro_left .bg{left: 0;}
#intro_wrap .intro_right{background: #25252a;} 
#intro_wrap .intro_right .bg{right: 0;}
 
  

@media all and (max-width:1280px){ 
#intro_wrap{flex-direction: column;}
#intro_wrap .intro_body{width: 100%; height: 50vh;}
#intro_wrap .intro_img{display: none;}
#intro_wrap .intro_ctn{display: none;}

#intro_wrap .bg{width: 100%;} 
#intro_wrap .intro_left .bg{top: 0;}
#intro_wrap .intro_right .bg{bottom: 0;}
}

@media all and (max-width:640px){ 
#intro_wrap .intro_title h1{font-size: 40px;}
#intro_wrap .intro_title span{width: 55px; height: 4px; margin: 15px 0 10px;}
#intro_wrap .intro_title p{font-size: 20px;}  
#intro_wrap .intro_title button{font-size: 17px; margin-top: 10px;}
}