@charset "utf-8";

section.mainpage {margin-top:0;}
.mainpage .con-tit{margin-bottom:50px;text-align: center;}
.mainpage .con-tit img{height:60px;}
.mainpage .contents{padding:150px 0;}
.mainpage .visual{width:100%;height:100dvh;}
.mainpage .visual .visual-swip{width:100%;height:100%;}
.mainpage .visual .s1{background:url(../img/etc/visual_bg1.jpg) no-repeat center center / cover;}
.mainpage .visual .s2{background:url(../img/etc/visual_bg2.jpg) no-repeat center center / cover;}
.mainpage .visual .s3{background:url(../img/etc/visual_bg3.jpg) no-repeat center center / cover;}
.mainpage .visual-txt{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.mainpage .visual-txt img{width:60vw;max-width:696px;}

.mainpage .car-bg{position:relative;width:100%;background:#f7f3f3 url(../img/etc/car_lst_bg.jpg) no-repeat bottom;background-size:cover;}
.mainpage .car-bg .swiper-slide .sl-img{width:100%;height:100%;display:flex;align-items: bottom;justify-content: center;}
.mainpage .car-bg .swiper-slide .sl-txt{margin:0 auto 50px;text-align: center;}
.mainpage .car-bg .swiper-slide .sl-img img{height:330px;}
.mainpage .car-bg .swiper-slide .sl-txt img{height:50px;}
.mainpage .type-wrap.car-bg .swiper-slide .sl-txt img{width:100% !important;height:auto !important;}
.mainpage .car-bg .swiper{margin-bottom:50px;}
.ani-sl .sl-txt{opacity: 0;transform: translateY(30px);transition: all 0.6s ease;}
.ani-sl .sl-btn{opacity: 0;transition: all 0.6s ease;}
.ani-sl .swiper-slide-active .sl-txt{opacity: 1;transform: translateY(0);}
.ani-sl .swiper-slide-active .sl-btn {opacity: 1;;}
.mainpage .visual{position:relative;}
.mainpage .visual h1{position:absolute;top:0;left:50%;display:flex;align-items: center;height:75px;transform:translateX(-50%);z-index:2;}
.mainpage .visual h1 img{width:80px;}
.mainpage .visual .swiper a{position:absolute;top:0;left:0;width:100%;height:100%;}

.mainpage .detail-wrap .conbx{position:relative;display:flex;width:calc((100% / 3) - 20px);aspect-ratio: 2/1.5;padding:20px;align-items: center;justify-content: center;}
.mainpage .detail-wrap .conbx .con-img{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;}
.mainpage .detail-wrap .conbx.detail-bx1 .con-img{background:url(../img/etc/feature_lst_bg1.jpg) no-repeat center center / cover;}
.mainpage .detail-wrap .conbx.detail-bx2 .con-img{background:url(../img/etc/feature_lst_bg2.jpg) no-repeat center center / cover;}
.mainpage .detail-wrap .conbx.detail-bx3 .con-img{background:url(../img/etc/feature_lst_bg3.jpg) no-repeat center center / cover;}
.mainpage .detail-wrap .conbx .con-txt{text-align: center;font-size:22px;font-weight: 500;color:#fff;}
.mainpage .detail-wrap .conbx .con-txt .more-btn{width:150px;height:40px;margin:30px auto 0;border:1px solid #fff;font-size: 16px;font-weight: 600;color:#fff;}

.mainpage .quicklk-wrap ul{flex-wrap: wrap;gap:30px;align-items: stretch;}
.mainpage .quicklk-wrap ul li{position:relative;width:calc((100% / 3) - 20px);padding:20px;background:#fff;font-size: 18px;font-weight: 700;aspect-ratio: 1/0.3;}
.mainpage .quicklk-wrap ul li a{display:block;width:100%;height:100%;}
.mainpage .quicklk-wrap ul li .ico{display:block;position:absolute;bottom:20px;right:20px;height:50px;}
.mainpage .quicklk-wrap ul li .ico img{height:100%;}

.mainpage .ch-wrap .con-wrap{gap:20px;align-items: stretch;}
.mainpage .ch-wrap .conbx{width:calc((100% / 4) - 10px);}
.mainpage .ch-wrap .conbx .con-img{position:relative;width:100%;aspect-ratio: 1/1;}
.mainpage .ch-wrap .conbx .con-img::before{content:'';position:absolute;top:50%;left:50%;z-index:1;width:25%;transform: translate(-50%,-50%);aspect-ratio: 1/1;min-width:50px;}
.mainpage .ch-wrap .conbx.ch-bx1 .con-img{background:url(../img/etc/ch_bg_1.jpg) no-repeat center center / cover;}
.mainpage .ch-wrap .conbx.ch-bx2 .con-img{background:url(../img/etc/ch_bg_2.jpg) no-repeat center center / cover;}
.mainpage .ch-wrap .conbx.ch-bx3 .con-img{background:url(../img/etc/ch_bg_3.jpg) no-repeat center center / cover;}
.mainpage .ch-wrap .conbx.ch-bx4 .con-img{background:url(../img/etc/ch_bg_4.jpg) no-repeat center center / cover;}
.mainpage .ch-wrap .conbx.ch-bx1 .con-img::before{background:url(../img/etc/ch_ico_1.png) no-repeat center center / contain;}
.mainpage .ch-wrap .conbx.ch-bx2 .con-img::before{background:url(../img/etc/ch_ico_2.png) no-repeat center center / contain;}
.mainpage .ch-wrap .conbx.ch-bx3 .con-img::before{background:url(../img/etc/ch_ico_3.png) no-repeat center center / contain;}
.mainpage .ch-wrap .conbx.ch-bx4 .con-img::before{background:url(../img/etc/ch_ico_4.png) no-repeat center center / contain;}
.mainpage .ch-wrap .conbx{font-size: 16px;}
.mainpage .ch-wrap .conbx .con-txt{margin-top:20px;}
.mainpage .ch-wrap .conbx .con-txt p{margin-top:5px;}

.mainpage .sl-btn{margin-top:50px;gap:10px;justify-content: center;}
.mainpage .sl-btn a{width:150px;height:40px;border:1px solid #000;font-size: 16px;font-weight: 600;color:#000;}
.mainpage .models-wrap .con-tit{margin-bottom:150px;}

.iframe-section {width:100%;height:calc(100dvh - 75px);overflow:hidden;}
.iframe-section iframe{width:100%;height:100%;}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{position:absolute;bottom:30px;z-index:2;text-align: center;}
.visual .swiper-pagination-bullet-active{background:#fff;}
.visual .swiper-pagination-bullet{width:10px;height:10px;background:#fff;}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 10px;}
.swiper-pagination-fraction{bottom:50px;font-size: 16px;}
.swiper-pagination-current{font-weight: 700;}

.mainpage .type-wrap.car-bg{background:#ecedeb;}


.popup-overlay {
display: block; /* 기본 표시 */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 999;
}

.popup-content {
position: relative; /* 버튼 위치 기준이 되도록 */
top: 200px;
left: 100px;
width: fit-content; /* 이미지 크기에 맞게 */
}
.popup-content img{width: 400px}

.close-button {
	position: absolute;  /* 기준은 popup-content */
  top: 0px;
  right: 0px;
  width: 20px;
  height: 20px;
  background-color: white;
  color: #bbb;
  font-size: 24px;
  border: none;
  border-radius: 50%;
  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: background-color 0.2s, transform 0.2s;
}

.close-button:hover {
  background-color: #f0f0f0;
  transform: scale(1.05);
}	

@media screen and (max-width: 768px) {
  .popup-content {
	position: fixed;
	top: 200px;
	left: 50%;
	transform: translate(-50%, -50%);
	width
  }
	  .popup-content img {
	  width: 250px;
	}	
}