@charset "utf-8";

section.popular{padding: 0 0 40px 0;}
section.popular .cont{width: 100%;max-width: 1200px;margin: 0 auto;}
section.popular h3{display: block;color: #17393C;font-size: 27px;font-weight: 700;}
section.popular .sub{display: block;margin: 0 0 20px 0;color: #a1a1a1;font-size: 18px;}
section.popular .list{}
section.popular .list ul{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
section.popular .list li{position: relative;}
section.popular .list li .box{}
section.popular .list li .img{width:100%;height:auto;aspect-ratio:4/3;background:#f1f1f1;border-radius:5px;overflow:hidden;}
section.popular .list li .img img{width:100%;height:100%;object-fit:cover;}
section.popular .list li .con{padding:15px 0 0 0;}
section.popular .list li .subject{line-height:24px;font-size:16px;font-weight: 500;color:#303030;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('ellipsis.xml#ellipsis');
}

section.popular .list li .price{line-height:24px;font-size:16px;font-weight: 400;color:#303030;margin-top:5px;}
section.popular .list li .star{display:flex;align-items:center;gap: 2px;line-height:16px;font-size:14px;color:#999;margin-top:5px;}
section.popular .list li .star:before{content:'';width:12px;height:12px;background-size:contain;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='%23faad14' focusable='false' height='12' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24' width='12'%3E%3Cpath d='M2.10519 10.0221C1.61624 9.42298 1.96322 8.51936 2.72749 8.40149L8.15 7.56516L11.1557 2.83004C11.5485 2.21126 12.4515 2.21126 12.8443 2.83003L15.85 7.56516L21.2725 8.40149C22.0368 8.51936 22.3838 9.42298 21.8948 10.0221L18.05 14.7331L19.2957 20.5611C19.4654 21.3548 18.6688 22.0093 17.9231 21.6889L12 19.1441L6.07692 21.6889C5.33123 22.0093 4.53461 21.3548 4.70426 20.5611L5.95 14.7331L2.10519 10.0221Z'/%3E%3C/svg%3E");}
section.popular .list li .zzim{position:absolute;top:10px;right: 10px;width: 30px;height: 30px;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none'%3E%3Cpath d='M13.6658 5.94689L11.9998 7.65044L10.3336 5.94676C8.83891 4.41839 6.42406 4.41839 4.92935 5.94676C3.42355 7.48648 3.42355 9.99113 4.92935 11.5308L11.9998 18.7605L19.0702 11.5308C19.79 10.7951 20.2 9.79135 20.2 8.7388C20.2 7.68633 19.7904 6.68287 19.0704 5.94702C18.3493 5.20937 17.376 4.8 16.368 4.8C15.36 4.8 14.3869 5.20919 13.6658 5.94689Z' stroke='%23bf1e2e' stroke-width='1.3' fill='none' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");background-size: contain; border:none;background:none;}
section.popular .list li .zzim.active{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none'%3E%3Cpath d='M13.6658 5.94689L11.9998 7.65044L10.3336 5.94676C8.83891 4.41839 6.42406 4.41839 4.92935 5.94676C3.42355 7.48648 3.42355 9.99113 4.92935 11.5308L11.9998 18.7605L19.0702 11.5308C19.79 10.7951 20.2 9.79135 20.2 8.7388C20.2 7.68633 19.7904 6.68287 19.0704 5.94702C18.3493 5.20937 17.376 4.8 16.368 4.8C15.36 4.8 14.3869 5.20919 13.6658 5.94689Z' stroke='%23bf1e2e' stroke-width='1.1' fill='%23bf1e2e' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");}

section.popular a.thumb {
    display: block;
    position: relative;
    margin: 0 0 16px 0;
}

section.popular a.thumb img {
    width: 100%;
	aspect-ratio: 4 / 3; /* 원하는 비율로 설정 */
	object-fit: cover;    /* 이미지가 비율에 맞게 꽉 차도록 함 */
    border-radius: 10px;
    /* 연한 회색 배경 */
    border: 1px solid #ddd;
}

section.popular button.good {
    display: block;
    position: absolute;
    right: 15px;
    top: 15px;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    z-index: 100;
}

section.popular button.good i {
    font-size: 24px;
    color: red;
    /* 기준 색상을 흰색으로 설정 */
    /*filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.8));*/
}

section.popular a.title {
    display: block;
    margin: 0 0 6px 0;
    font-size: 18px;
    font-weight: 400;
    white-space: nowrap;
    /* 줄바꿈 금지 */
    overflow: hidden;
    /* 넘친 내용 숨김 */
    text-overflow: ellipsis;
    /* ... 표시 */
}

section.popular .val {
    color: #767676;
    font-size: 16px;
    font-weight: 400;
}

section.popular .val img {
    margin: 0 0 4px 0;
    vertical-align: middle
}



section.ranking{padding: 20px 20px 60px 20px;overflow: hidden;}
section.ranking .cont{width: 100%;max-width: 1200px;margin: 0 auto;}
section.ranking h3{display: block;color: #17393C;font-size: 27px;font-weight: 700;}
section.ranking .sub{display: block;margin: 0 0 20px 0;color: #a1a1a1;font-size: 18px;}
section.ranking .list{}
section.ranking .list ul{display:flex;flex-direction:column;flex-wrap:wrap;gap: 12px 40px;height: 608px;}
section.ranking .list li{position: relative;width:calc(50% - 20px);}
section.ranking .list li .box{display:flex;padding:24px 30px;align-items: center;border-radius:16px;background:#fafafa;}
section.ranking .list li .num{flex:0 0 auto;margin-right:9px;width:24px;height:30px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:bold;}
section.ranking .list li .img{flex:0 0 auto;width:96px;height:64px;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
section.ranking .list li .img img{width:100%;height:100%;}
section.ranking .list li .con{flex:1;padding: 0 0 0 16px;}
section.ranking .list li .con .subject{line-height:18px;font-size:14px;font-weight:700;color:rgb(17 17 17);}
section.ranking .list li .con .desc{margin-top:4px;line-height:18px;font-size:14px;font-weight:500;color:rgb(117 117 117);}


section.ranking a.thumb {
    display: block;
    position: relative;
    margin: 0 0 16px 0;
}

section.ranking a.thumb img {
    width: 100%;
	aspect-ratio: 4 / 3; /* 원하는 비율로 설정 */
	object-fit: cover;    /* 이미지가 비율에 맞게 꽉 차도록 함 */
    border-radius: 10px;  
    background: #f5f5f5;
    /* 연한 회색 배경 */
    border: 1px solid #ddd;
}

section.ranking button.good {
    display: block;
    position: absolute;
    right: 15px;
    top: 15px;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    z-index: 100;
}

section.ranking button.good i {
    font-size: 24px;
    color: red;
    /* 기준 색상을 흰색으로 설정 */
    /*filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.8));*/
}

section.ranking a.title {
    display: block;
    margin: 0 0 6px 0;
    font-size: 18px;
    font-weight: 400;
    white-space: nowrap;
    /* 줄바꿈 금지 */
    overflow: hidden;
    /* 넘친 내용 숨김 */
    text-overflow: ellipsis;
    /* ... 표시 */
}

section.ranking .val {
    color: #767676;
    font-size: 16px;
    font-weight: 400;
}

section.ranking .val img {
    margin: 0 0 4px 0;
    vertical-align: middle
}


@media all and (max-width:1240px) {
    section.search .form .input input{font-size:14px;}

    section.popular h3{margin: 0 0 5px 0;font-size: 18px;}
    section.popular .sub{margin: 0 0 15px 0;font-size: 14px;}
    section.popular .list ul{grid-template-columns:repeat(2,1fr);gap:16px;}

    section.ranking h3{margin: 0 0 5px 0;font-size: 18px;}
    section.ranking .sub{margin: 0 0 15px 0;font-size: 14px;}
    section.ranking .list ul{height:auto;}
    section.ranking .list li{width:100%;}
    section.ranking .list li .box{padding: 16px 8px;}


	section.recruit h3{margin: 0 0 5px 0;font-size: 18px;}
    section.recruit .sub{margin: 0 0 15px 0;font-size: 14px;}
}


.swiper_nav {
	position: absolute;
	top:50px;
	right:10px;
}

.swiper_nav div{display: inline-block;}
.swiper_nav div:nth-child(n+1) { margin-left:10px; }


.swiper_nav div i {font-size:14px;}

	.btn_more{
            display:none;
			max-width: 1200px;
            margin: 0 auto;
        }

        .btn_wrap{
            margin: 0 auto;
            display: flex;
            justify-content: center;
        }

        .btn_wrap button{
            margin-top:20px;
			width: 100%;
            height: 40px;
            border: 1px solid #17393C;
            background-color: #fff;
            color: #a1a1a1;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 500;
            /* 핵심 */
            transition: background-color 0.5s ease, color 0.5s ease;
        }

        .btn_wrap button:hover{
            background-color: #17393C;
            color: #fff;
        }

/* 좌측 상단 번호 스타일 */
.slide-number {
  position: absolute;
  top: 10px;       /* 상단 여백 */
  left: 10px;      /* 좌측 여백 */
  z-index: 10;     /* 이미지보다 위에 보이게 */

 /* 원형 만들기 */
  width: 45px;
  height: 45px;
  border: 2px solid #fff;
  border-radius: 50%;

  /* 숫자 정중앙 배치 */
  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  font-weight: bold;
  font-size: 18px;
  background: rgba(0, 0, 0, 0.2); /* 가독성을 위한 살짝 어두운 배경 */
  backdrop-filter: blur(4px); /* 뒤 배경 살짝 흐리게(고급효과) */

}

/* 🥇 1등: 골드 & 대형 & 글로우 */
.swiper-slide:nth-child(1) .slide-number {
  width: 45px;
  height: 45px;
   font-size: 24px;
  background: linear-gradient(135deg, #ffd700, #ffae00);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
  border: 3px solid #fff;
  color: #000;
}

/* 🥈 2등: 실버 & 중형 */
.swiper-slide:nth-child(2) .slide-number {
  width: 45px;
  height: 45px;
   font-size: 24px;
  background: linear-gradient(135deg, #e0e0e0, #8e8e8e);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
  border: 2px solid #fff;
}

/* 🥉 3등: 브론즈 & 중형 */
.swiper-slide:nth-child(3) .slide-number {
  width: 45px;
  height: 45px;
  font-size: 24px;
  background: linear-gradient(135deg, #cd7f32, #a0522d);
  box-shadow: 0 0 15px rgba(205, 127, 50, 0.4);
  border: 2px solid #fff;
}

.gal_div {display:block;}
.list_div {display:none}
#item_more {display:none}

@media screen and (max-width: 1024px) {
	/*section.intro { padding: 20px 0 !important;}*/
	section.service { padding: 20px !important;}
	section.ai {padding: 20px !important;}
	section.popular { padding: 20px !important;}
	section.ranking { padding: 20px !important;}
	section.recruit { padding: 20px !important;}

	.gal_div {display:block;}
	.list_div {display:none}
	#item_more {display:none}
}	

@media all and (max-width:375px) {
	.gal_div {display:none;}
	.list_div {display:block}
}

@media all and (max-width:480px) {
	
	.gal_div {display:none;}
	.list_div {display:block;}
	#item_more {display:block}
	
	.btn_more{display:block; }

	.ranking li:nth-child(n+6) {
		display: none; /* 6번째 이후의 모든 li 요소를 숨깁니다. */
	}

	.swiper_nav {top:5px;}

	section.ai{padding: 20px 20px 20px 20px;}
	section.vod{padding: 20px 20px 20px 20px;}
	section.service{padding: 20px 20px 20px 20px;}
	section.ranking{padding: 20px 20px 20px 20px;}

	section.ranking .list li .img img { height:120px; }

	section.ranking .list li .img { height:65px; }

	section.recruit{padding: 20px 20px 20px 20px;}
	
	section.ranking .val { font-size:12px !important;}
	
	.swiper-slide:nth-child(1) .slide-number {
		width: 35px !important;
		height: 35px !important;
		font-size: 20px !important;
	}

	.swiper-slide:nth-child(2) .slide-number {
		width: 35px !important;
		height: 35px !important;
		font-size: 20px !important;
	}

	.swiper-slide:nth-child(3) .slide-number {
		width: 35px !important;
		height: 35px !important;
		font-size: 20px !important;
	}

	.slide-number {
		width: 35px !important;
		height: 35px !important;
		font-size: 16px !important;
	}

	section.popular button.good { top:10px; right:10px; }
	section.ranking button.good { top:10px; right:10px; }
	

section.popular .list_div ul {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0;
    margin: 0;
    list-style: none;
}

section.popular .list_div ul li {
    display: block;
    position: relative;
    width: calc(50% - 15px);
    box-sizing: border-box;
}

section.popular .list_div ul li:nth-child(2n) {
    margin: 0;
}


section.popular .list_div ul li a.thumb {
    display: block;
    position: relative;
    margin: 0 0 16px 0;
}

section.popular .list_div ul li a.thumb img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid #ddd;
}

section.popular .list_div ul li button.good {
    display: block;
    position: absolute;
    color: red;
    right: 10px;
    top: 10px;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    z-index: 10;
}

section.popular .list_div ul li button.good i {
    font-size: 20px;
}

section.popular .list_div ul li .ctg {
    margin: 0 0 10px 0;
    color: #767676;
    font-size: 16px;
    font-weight: 400;
    min-height: 19px;
}

section.popular .list_div ul li .ctg span {
    padding: 5px 10px;
    font-size: 12px;
    color: #17393C;
    border: 1px solid #17393C;
    border-radius: 10px;
}


section.popular .list_div ul li a.title {
    display: block;
    margin: 0 0 6px 0;
    font-size: 18px;
    font-weight: 400;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
}

section.popular .list_div ul li .price {
    margin: 0 0 4px 0;
    color: #17393C;
    font-size: 14px;
    font-weight: 600;
}

section.popular .list_div ul li .val {
    color: #767676;
    font-size: 16px;
    font-weight: 400;
}

section.popular .list_div ul li .val img {
    margin: 0 0 4px 0;
    vertical-align: middle
}

section.popular .list_div ul li .box {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
}

section.popular .list_div ul li a.thumb_icon {
    display: block;
    text-align: center;
    line-height: 250px;
    background: #DFF8FB
}

section.popular .list_div ul li .con {
    padding: 40px 10px;
    ;
    text-align: center;
}

section.popular .list_div ul li a.label {
    display: block;
    margin: 0 0 10px 0;
    color: #195257;
    font-size: 36px;
    font-weight: 700;
}

section.popular .list_div ul li p {
    color: #666;
    font-size: 24px;
    font-weight: 400;
    word-break: keep-all;
}
	

}

.gray-image {  filter: grayscale(100%);}




/* 제목과 더보기를 감싸는 상단 영역 */
.title-wrap {
    display: flex;
    justify-content: space-between; /* 좌우 끝으로 밀기 */
    align-items: flex-end;         /* 하단 라인 맞춤 */
}

.title-wrap h3 {
    display: block;
    color: #17393C;
    font-size: 27px;
    font-weight: 700;
    margin: 0;                     /* flex 레이아웃을 위해 기본 마진 제거 */

    /* 제목 길어질 때 말줄임 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.title-wrap .sub {
    display: block;
    margin: 0 0 20px 0;
    color: #a1a1a1;
    font-size: 18px;
    /* 서브텍스트도 길어지면 말줄임 (선택사항) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.title-wrap .btn-more {
    color: #a1a1a1;
    font-size: 14px;               /* 제목보다 작게 설정 */
    text-decoration: none;
    flex-shrink: 0;                /* 제목이 길어져도 더보기는 찌그러지지 않음 */
    margin-bottom: 5px;            /* 제목 하단 라인과 시각적으로 맞추기 위함 */
}

/* 반응형 모바일 대응 */
@media (max-width: 768px) {
    .title-wraph3 { font-size: 20px; }
    .title-wrap .sub { font-size: 14px; margin-bottom: 15px; }
    .title-wrap .btn-more { font-size: 12px; }
}