
.slider { position: relative; width: 100%; height: 675px; /* 항상 일정한 높이를 유지 */
max-height: 675px; overflow: hidden; background: #000; }

.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 1s ease-in-out; opacity: 0; }

.slide.active { opacity: 1; }

.slide .img { width: 100%; height: 100%; }

.slide .img img { width: 100%; height: 100%; object-fit: cover; /* 이미지가 컨테이너를 꽉 채움 */
object-position: center; }


 .slide .m_img { display:none; }


.slide-content { position: absolute; top: 53%; left: 50%; z-index: 1; width:1200px; animation: slideUp 0.8s ease; /* slideUp 애니메이션을 1초 동안 적용하며, 이징 함수는 ease로 설정합니다. */ transform: translate(-50%, -50%); }


.slide-content .txt01.wht { color:#fff; }

.slide-content .txt01 { display: table; width: auto; color: #000; text-align: left; margin-right: auto; }
.slide-content .txt01 > h2 { margin:0; padding: 0 0 0 0; font-size: 62px; font-weight: 400; letter-spacing: -1px;}
.slide-content .txt01 > h2 span { font-weight: 650; }
.slide-content .txt01 > h3 { padding:15px 0 0 0; font-size: 26px; font-weight: 350; line-height: 1.4;}

.slide-content .txt01 .btn {display:table; width:auto; margin-top:20px;}
.slide-content .txt01 .btn ul {width:100%;}
.slide-content .txt01 .btn ul li { padding:5px 20px;border:1px solid #000; border-radius:100px; font-size:22px; color:#000; transition: all ease 0.3s 0s;}
.slide-content .txt01 .btn ul li a {color:#000; transition: all ease 0.3s 0s;}
.slide-content .txt01 .btn ul li i { vertical-align:middle;font-size:18px; margin-left:3px;}

.slide-content .txt01 .btn ul li:hover {background:#000; transition: all ease 0.3s 0s;}
.slide-content .txt01 .btn ul li:hover a {color:#fff; transition: all ease 0.3s 0s;}

/* 컨텐츠 위로 올리기 */


@keyframes slideUp {
 from { opacity: 0; transform: translate(-50%, -35%); /* 시작 위치 */ }
 to { opacity: 1; transform: translate(-50%, -50%); /* 최종 위치 */ }
 }









 @media all and (max-width:1024px) {


 .slider { max-height: 545px; }

 .slide .m_img { display: revert; width: 100%; height: 100%; object-fit: cover; }

 .slide .m_img img { width: 100%; /* 이미지가 슬라이드의 너비를 채움 */
 height: 100%; /* 이미지가 슬라이드의 높이를 채움 */
 object-fit: cover; /* 해상도에 상관없이 이미지가 슬라이드에 꽉 차도록 */
 object-position: center; }

 .slide .img { display:none; }


 .slide-content { position: absolute; top: 52%; left: 50%; z-index: 1; width:80%; animation: slideUp 0.8s ease; /* slideUp 애니메이션을 1초 동안 적용하며, 이징 함수는 ease로 설정합니다. */ transform: translate(-50%, -50%); }

 .slide-content .txt01.wht { color:#fff; }

 .slide-content .txt01 { display: table; width: auto; color: #000; text-align: left; margin-right: auto; }
 .slide-content .txt01 > h2 { margin:0; padding: 0 0 0 0; font-size: 62px; font-weight: 400; letter-spacing: -1px;}
 .slide-content .txt01 > h2 span { font-weight: 650; }
 .slide-content .txt01 > h3 { padding:15px 0 0 0; font-size: 26px; font-weight: 350; line-height: 1.4;}

 .slide-content .txt01 .btn {display:table; width:auto; margin-top:20px;}
 .slide-content .txt01 .btn ul {width:100%;}
 .slide-content .txt01 .btn ul li { padding:5px 20px;border:1px solid #000; border-radius:100px; font-size:22px; color:#000; transition: all ease 0.3s 0s;}
 .slide-content .txt01 .btn ul li a {color:#000; transition: all ease 0.3s 0s;}
 .slide-content .txt01 .btn ul li i { vertical-align:middle;font-size:18px; margin-left:3px;}

 .slide-content .txt01 .btn ul li:hover {background:#000; transition: all ease 0.3s 0s;}
 .slide-content .txt01 .btn ul li:hover a {color:#fff; transition: all ease 0.3s 0s;}


 }







@media all and (max-width:764px) {



 .slider { max-height: 325px; }




.slide-content { position: absolute; top: 50%; left: 50%; z-index: 1; width:90%; animation: slideUp 0.8s ease; transform: translate(-50%, -50%); }

.slide-content .txt01.wht { color:#fff; }

.slide-content .txt01 { display: table; width: auto; color: #000; text-align: left; margin-right: auto; }
.slide-content .txt01 > h2 { margin:0; padding: 0 0 0 0; font-size: 22px; font-weight: 400; letter-spacing: -1px;}
.slide-content .txt01 > h2 span { font-weight: 650; }
.slide-content .txt01 > h3 { padding:15px 0 0 0; font-size: 12px; font-weight: 350; line-height: 1.4;}

.slide-content .txt01 .btn {display:table; width:auto; margin-top:20px;}
.slide-content .txt01 .btn ul {width:100%;}
.slide-content .txt01 .btn ul li { padding:3px 10px;border:1px solid #000; border-radius:100px; font-size:14px; color:#000; transition: all ease 0.3s 0s;}
.slide-content .txt01 .btn ul li a {color:#000; transition: all ease 0.3s 0s;}
.slide-content .txt01 .btn ul li i { vertical-align:middle;font-size:12px; margin-left:3px;}

.slide-content .txt01 .btn ul li:hover {background:#000; transition: all ease 0.3s 0s;}
.slide-content .txt01 .btn ul li:hover a {color:#fff; transition: all ease 0.3s 0s;}

 }




/* 컨텐츠 위로 올리기 */

@keyframes slideUp {
 from { opacity: 0; transform: translate(-50%, -35%); /* 시작 위치 */ }
 to { opacity: 1; transform: translate(-50%, -50%); /* 최종 위치 */ }
 }


























