@charset "utf-8";
#inc02{position:relative;width:100%;background-color:#f9f6ed}
#inc02 .inner{display:flex}
#inc02 .group-fixed{position:sticky;top:0;left:0;flex:1;height:100vh}
#inc02 .group-fixed .frame{position:relative;display:flex;flex-direction:column;overflow:hidden;width:100%;height:100%}
#inc02 .group-fixed .frame img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0.6;transition:opacity 0.3s}
#inc02 .group-fixed .frame img.show{z-index:1;opacity:1}
#inc02 .group-scroll{flex:1}
#inc02 .group-scroll .pd-list{display:flex;flex-direction:column;align-items:center}
#inc02 .group-scroll .pd-item .link-pd{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;width:100%;height:100vh}
#inc02 .group-scroll .pd-item .link-pd .thumb-box{position:relative;padding-top:100px}
#inc02 .group-scroll .pd-item .link-pd .bg{position:absolute;top:0;left:50%;transform:translateX(-50%);width:436px;aspect-ratio:1;border-radius:500px;background-color:#fff;transition:transform 0.2s}
#inc02 .group-scroll .pd-item .link-pd:hover .bg{transform:translateX(-50%) scale(0.8)}
#inc02 .group-scroll .pd-item .link-pd .thumb{position:relative;z-index:1}
#inc02 .group-scroll .pd-item .link-pd .info{display:flex;flex-direction:column;gap:20px;align-items:center;text-align:center;color:#000}
#inc02 .group-scroll .pd-item .link-pd .info .name{font-family:var(--e-font-gothic);font-size:20px}
#inc02 .group-scroll .pd-item .link-pd .info .size{font-family:var(--k-font);font-size:16px}
#inc02 .group-scroll .pd-item .link-pd .info .desc{font-size:15px;font-family:var(--k-font);line-height:1.6;white-space:pre-line;word-break:keep-all}

@media (max-width:1200px){
#inc02 .group-scroll .pd-item .link-pd .bg{width:345px}
#inc02 .group-scroll .pd-item .link-pd .thumb{width:150px}
}
@media (max-width:1024px){
#inc02 .group-scroll .pd-item .link-pd .bg{width:300px}
#inc02 .group-scroll .pd-item .link-pd .thumb{width:130px}
#inc02 .group-scroll .pd-item .link-pd .info{gap:15px}
#inc02 .group-scroll .pd-item .link-pd .info .name{font-size:18px}
#inc02 .group-scroll .pd-item .link-pd .info .size{font-size:15px}
}
@media (max-width:768px){
#inc02 .group-fixed{display:none}
#inc02 .group-scroll .pd-item{width:100%}
#inc02 .group-scroll .pd-item .link-pd{padding:0 30px;background-size:cover;background-repeat:no-repeat;background-position:center center}
#inc02 .group-scroll .pd-item:first-child .link-pd{background-image:url(./img/img01.jpg)}
#inc02 .group-scroll .pd-item:nth-child(2) .link-pd{background-image:url(./img/img02.jpg)}
#inc02 .group-scroll .pd-item:nth-child(3) .link-pd{background-image:url(./img/img03.jpg)}
#inc02 .group-scroll .pd-item .link-pd::before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,0.6);pointer-events:none}
#inc02 .group-scroll .pd-item .link-pd .thumb-box{z-index:1}
#inc02 .group-scroll .pd-item .link-pd .info{z-index:1}
#inc02 .group-scroll .pd-item .link-pd .bg{width:250px;filter:blur(50px);opacity:0.4}
#inc02 .group-scroll .pd-item .link-pd:hover .bg{transform:translateX(-50%) scale(1)}
#inc02 .group-scroll .pd-item .link-pd .thumb-box{padding-top:0}
#inc02 .group-scroll .pd-item .link-pd .thumb{width:110px}
}
@media (max-width:480px){
#inc02 .group-scroll .pd-item .link-pd{padding:0 20px}
#inc02 .group-scroll .pd-item .link-pd .thumb{width:95px}
}
@media (max-width:390px){
#inc02 .group-scroll .pd-item .link-pd .thumb{width:85px}
}