@charset "utf-8";
#shopPick{position:relative;margin:180px auto;width:90%}
#shopPick h2{position:relative;left:50%;transform:translateX(-50%);width:max-content;text-align:center}
#shopPick h2::after{content:"";position:absolute;z-index:2;top:-20px;right:75px;width:25px;height:32px;background:url(./img/icon01.png) no-repeat center / contain}
#shopPick .latest{display:flex;gap:60px;margin-top:120px}
#shopPick .latest > div{width:100%}
#shopPick .latest h3{position:relative;padding:18px 50px;border:1px solid var(--primary);border-radius:10px;font-size:20px;font-weight:700;color:#111;background-color:#f4f9f1}
#shopPick .latest h3::after{content:"";position:absolute;top:50%;left:30px;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background-color:var(--primary)}
#shopPick .latest .left h3::before{content:"";position:absolute;top:-80px;left:40px;width:100px;height:100px;background:url(./img/mascot.png) no-repeat center / contain}
#shopPick .latest .pickSlide{position:relative;margin-top:60px;height:750px}
#shopPick .latest ul{margin:0 auto;width:95%}
#shopPick .latest ul li{display:flex;gap:30px}
#shopPick .latest ul li .img{flex-shrink:0;overflow:hidden;width:230px;height:100%;border-radius:20px}
#shopPick .latest ul li img{width:100%;height:100%;object-fit:cover}
#shopPick .latest ul li .txt{display:flex;flex-flow:column;width:100%;padding:5px 0 10px}
#shopPick .latest ul li .subject{margin:15px 0}
#shopPick .latest ul li a{position:relative;display:flex;justify-content:center;align-items:center;width:50px;height:50px;margin-top:auto;border:1px solid #e1e1e1;border-radius:50%;transition:all .3s}
#shopPick .latest ul li a::after{opacity:0;content:"";position:absolute;top:-15px;left:24px;width:30px;height:30px;transform:rotate(30deg);transition:all .3s;background:url(./img/mascot.png) no-repeat center / contain}
#shopPick .latest ul li a svg{width:20px;height:20px;color:#111;transition:all .3s}

@media (hover:hover){
#shopPick .latest ul li a:hover{border:1px solid var(--primary);background-color:#fff5d6}
#shopPick .latest ul li a:hover svg{color:var(--primary)}
#shopPick .latest ul li a:hover::after{opacity:1}
}
@media(max-width:1980px){
#shopPick .latest .pickSlide{height:640px}
}
@media (max-width:1230px){
#shopPick{width:calc(100% - 100px);margin:130px auto}
#shopPick h2::after{right:60px}
#shopPick .latest{gap:40px;margin-top:100px}
#shopPick .latest ul li .img{width:210px}
}
@media (max-width:1024px){
#shopPick{width:calc(100% - 30px)}
#shopPick .latest{flex-flow:column;gap:50px;margin-top:80px}
#shopPick .latest .left h3::before{top:-79px;width:90px}
#shopPick .latest .pickSlide{margin-top:45px}
#shopPick .latest h3{font-size:18px}
#shopPick .latest ul li .img{width:240px}
#shopPick .latest ul li .txt{padding-top:10px}
}
@media (max-width:768px){
#shopPick{margin:100px auto}
#shopPick h2::after{right:50px}
#shopPick .latest .pickSlide{height:600px}
#shopPick .latest ul li .img{width:225px}
}
@media (max-width:480px){
#shopPick{margin:60px auto}
#shopPick h2::after{right:35px;width:20px}
#shopPick .latest{margin-top:70px}
#shopPick .latest h3{padding:15px 15px 15px 30px;font-size:16px}
#shopPick .latest h3::after{left:15px;width:4px;height:4px}
#shopPick .latest .left h3::before{left:15px;top:-72px;width:75px}
#shopPick .latest .pickSlide{height:480px;margin-top:35px}
#shopPick .latest ul li{gap:25px}
#shopPick .latest ul li .img{width:45%;border-radius:10px}
#shopPick .latest ul li .subject{margin:8px 0 15px}
#shopPick .latest ul li a{width:40px;height:40px}
}
@media (max-width:380px){
#shopPick .latest{margin-top:60px}
#shopPick .latest .pickSlide{height:430px;margin-top:30px}
#shopPick .latest ul li .img{width:40%}
#shopPick .latest h3{font-size:15px}
#shopPick .latest .left h3::before{top:-69px;width:65px}
#shopPick .latest ul li a{width:35px;height:35px}
#shopPick .latest ul li a svg{width:15px;height:15px}
}