img {border:none;}
.wk-slideset{visibility:hidden}
.wk-slideset .sets{overflow:hidden}
.wk-slideset .set, .wk-slideset .nav{list-style:none;margin:0;padding:0}
.wk-slideset .set{display:none;position:relative;margin:0 auto;text-align:center}
.wk-slideset .set:first-child{display:block}
.wk-slideset .set>li{display:inline-block; position:relative; width:120px; height:120px; background:url("") 0 0 no-repeat; text-align:center; margin:0 10px; }
.wk-slideset .set>li img{ width:120px !important; height:120px !important; box-shadow:2px 2px 4px #000; }
.wk-slideset .nav span{display:block;cursor:pointer}
.wk-slideset .next, .wk-slideset .prev{position:absolute;z-index:5;cursor:pointer}
.wk-slideset .wk-content > a:first-child, .wk-slideset .wk-content > img:first-child, .wk-slideset .wk-content > a:first-child > img{display:block;}
/* --- 회전 애니메이션 정의 시작 --- */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* cover-img 클래스를 가진 이미지에 마우스를 올리면(hover) 회전 */
.wk-slideset .set .cover-img:hover {
animation: spin 2s infinite linear; /* 2초 동안 360도 회전, 무한반복 */
}
/* --- 회전 애니메이션 정의 끝 --- */
.wk-slideset-default .nav{margin:-10px auto 0;text-align:center; width:125px;background:none; }
.wk-slideset-default .nav li{display:inline-block}
.wk-slideset-default .nav.icon li{margin-left:5px}
.wk-slideset-default .nav.text li{margin-left:40px}
.wk-slideset-default .nav li:first-child{margin-left:0}
.wk-slideset-default .nav.icon span{width:16px;height:15px;background:url("../images/nav.png") 0 0 no-repeat;overflow:hidden}
.wk-slideset-default .nav.icon span:hover{background-position:0 -30px}
.wk-slideset-default .nav.icon span:active{background-position:0 -45px}
.wk-slideset-default .nav.icon .active span{background-position:0 -15px}
.wk-slideset-default .nav.text span{padding:0 11px}
.wk-slideset-default .nav.text .active span{padding:0 10px;border:1px solid rgba(0,0,0,0.1); background:rgba(0,0,0,0.05)}
.wk-slideset-default>div{position:relative}
.wk-slideset-default > div:hover .next, .wk-slideset-default > div:hover .prev{ top:40%; width:50px; height:50px; margin-top:-35px; margin-right:20px; background:url("../images/buttons.png") 0 50px no-repeat}
.wk-slideset-default > div:hover .next{right:-20px;background-position:0 0}
.wk-slideset-default > div:hover .prev{left:-20px;background-position:0 -50px}
.wk-slideset-default div{margin:0 0px}
.wk-slideset-default div+strong.title{font-weight:bold; color:#fff; }
.wk-slideshow-default .nav{margin-top:15px;text-align:center}
.wk-slideshow-default .nav li{display:inline-block;margin-left:5px}
.wk-slideshow-default .nav li:first-child{margin-left:0}
.wk-slideshow-default .nav span{ width:16px; height:15px; background:url("../images/nav.png") 0 0 no-repeat;overflow:hidden}
.wk-slideshow-default .nav span:hover{background-position:0 -30px}
.wk-slideshow-default .nav span:active{background-position:0 -45px}
.wk-slideshow-default .nav .active span{background-position:0 10px}
.wk-slideshow-default>div{position:relative}
.wk-slideshow-default > div:hover .next, .wk-slideshow-default > div:hover .prev{ top:40%; width:50px; height:50px; margin-top:-35px; margin-left:40px; background:url("../images/buttons.png") 0 50px no-repeat}
.wk-slideshow-default > div:hover .next{right:-20px;background-position:0 0}
.wk-slideshow-default > div:hover .prev{left:-20px;background-position:0 -50px}
/* next,prev = right:30px; margin-top:-25px; */
/* 3. New 리본 버튼의 포지션을 absolute로 변경하고 의 상단에 위치하도록 수정 */
.wk-slideset .set>li .ribbon{
z-index:9999;
display:block;
position:absolute; /* 의 상대적인 위치에 절대적으로 고정 */
top:4px;
left:-4.5px;
width:34px;
height:50px;
}
.wk-slideset .set>li .ribbon.new{background:url('../images/icon_new.png') no-repeat;}
/* 3. hot 리본 버튼의 포지션을 absolute로 변경하고 의 상단에 위치하도록 수정 */
.wk-slideset .set>li .ribbon{
z-index:9999;
display:block;
position:absolute; /* 의 상대적인 위치에 절대적으로 고정 */
top:3px;
left:-4px;
width:53px;
height:53px;
}
.wk-slideset .set>li .ribbon.hot{background:url('../images/icon_hot_green.gif') no-repeat;}
/* --- LP 효과: 물결무늬 선명도 극대화 버전 --- */
/* 1. 회전 애니메이션 */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 2. LP 박스 기본 설정 */
.lp-box {
position: relative !important;
display: inline-block !important;
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
box-shadow: 0px 4px 12px rgba(0,0,0,0.4);
z-index: 1;
background: #000;
}
/* 3. 배경 이미지: 선명하게 보일 수 있도록 투명도 유지 */
.lp-box img.cover-img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
border-radius: 50%;
display: block;
transition: all 0.5s ease;
}
.wk-content:hover .lp-box img.cover-img {
opacity: 0.75; /* 이미지가 잘 보이도록 설정 */
filter: brightness(0.9) contrast(1.1); /* 이미지의 대비를 살짝 올려 선명함 보정 */
}
/* 4. LP 디스크 디자인: 중앙 홀과 라벨 색상 교체 */
.lp-box::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
z-index: 10;
pointer-events: none;
background:
/* [1] 중앙 홀: 다크 블루로 변경 */
radial-gradient(circle, rgba(8, 27, 80, 0.9) 0%, rgba(8, 27, 80, 0.9) 4%, transparent 4.5%),
/* [2] 라벨 영역: 화이트로 변경 */
radial-gradient(circle, #ffffff 4.5%, #ffffff 25%, transparent 26%),
/* [3] 빛 반사 효과 (광택 표현) */
conic-gradient(
from 0deg,
transparent 35%,
rgba(255, 255, 255, 0.35) 45%,
transparent 55%,
transparent 85%,
rgba(255, 255, 255, 0.35) 95%,
transparent 100%
),
/* [4] 물결무늬 (선명도 유지) */
repeating-radial-gradient(
rgba(255, 255, 255, 0.45) 0px,
rgba(255, 255, 255, 0.0) 1.0px,
rgba(0, 0, 0, 0.3) 2.0px,
rgba(0, 0, 0, 0.0) 3.0px
);
opacity: 0;
transition: opacity 0.5s ease;
}
/* 5. 마우스 오버 동작 */
.wk-content:hover .lp-box::after {
opacity: 1; /* 무늬를 100% 선명하게 표시 */
}
.wk-content:hover .lp-box {
animation: spin 15s infinite linear;
}