@charset "utf-8";
#shopNotice{position:relative;display:flex;gap:60px;margin:160px auto;width:100%;max-width:1500px}
#shopNotice .left{flex-shrink:0;width:370px}
#shopNotice .left>div{display:flex;flex-direction:column;border-radius:20px;color:rgb(255, 255, 255, 0.8)}
#shopNotice .contact{justify-content:center;align-items:center;padding:65px 30px;font-size:20px;font-weight:700;background-color:#282b25}
#shopNotice .contact .number{margin:10px 0;font-size:38px;font-weight:700;color:#fff}
#shopNotice .contact_link{position:relative;align-items:start;padding:40px;margin-top:20px;background-color:var(--primary)}
#shopNotice .contact_link::after{content:"";position:absolute;z-index:2;bottom:8%;right:7%;width:125px;height:112px;background:url(./img/mascot01.png) no-repeat center / contain}
#shopNotice .contact_link h3{font-size:26px;font-weight:700;color:#fff}
#shopNotice .contact_link p{margin:11px 0 50px;font-size:18px;font-weight:400}
#shopNotice .contact_link a{position:relative;display:flex;justify-content:center;align-items:center;width:50px;height:50px;border-radius:50%;background-color:#fff;transition:all .3s}
#shopNotice .contact_link a::after{opacity:0;content:"";position:absolute;top:-20px;left:50%;transform:translateX(-50%);width:30px;height:30px;transition:all .3s;background:url(./img/mascot02.png) no-repeat center / contain}
#shopNotice .contact_link a svg{width:20px;height:20px;color:#111;transition:all .3s}
#shopNotice .right{display:flex;flex-direction:column;width:100%}
#shopNotice .right .tab{display:flex;align-items:center;gap:30px;padding-bottom:30px;margin-bottom:30px;border-bottom:3px solid #111;font-size:25px;font-weight:700;color:#aaa}
#shopNotice .right .tab div{cursor:pointer;transition:all .3s}
#shopNotice .right .tab .on{color:#111}
#shopNotice .latest{opacity:0 !important;display:none !important;height:0px !important}
#shopNotice .latest.on{opacity:1 !important;display:block !important;height:auto !important}
#shopNotice .latest li+li{margin-top:10px}
#shopNotice .latest li+li a{position:relative;padding-left:30px}
#shopNotice .latest li+li a::after{content:"";position:absolute;top:50%;left:10px;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background-color:var(--primary)}
#shopNotice .latest li a{display:flex;justify-content:space-between}
#shopNotice .latest li .subject{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;font-size:18px;font-weight:600;color:#444;transition:all.3s}
#shopNotice .latest li .content{display:none;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;margin-top:15px;font-size:18px;font-weight:400;color:#666;transition:all.3s}
#shopNotice .latest li .datetime{font-size:18px;font-weight:400;color:#666}
#shopNotice .latest li.first a{flex-direction:row-reverse;justify-content:flex-end;gap:30px;padding-bottom:30px;margin-bottom:30px;border-bottom:1px solid #e1e1e1}
#shopNotice .latest li.first .subject{font-size:18px;font-weight:700;color:#111;transition:all .3s}
#shopNotice .latest li.first .content{display:-webkit-box}
#shopNotice .latest li.first .datetime{flex-shrink:0;display:flex;flex-direction:column;justify-content:center;align-items:center;width:80px;height:80px;border-radius:10px;font-family:'Poppins';background-color:#f5f5f5}
#shopNotice .latest li.first .datetime .day{font-size:20px;font-weight:700;color:#111;transition:all .3s}
#shopNotice .latest li.first .datetime .month{font-size:16px;font-weight:500;color:#888;transition:all .3s}
#shopNotice .right .moreBtn{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:auto;padding:22px 0;border:1px solid #e1e1e1;border-radius:10px;font-size:18px;font-weight:600;color:#444;transition:all .3s}

@media (hover:hover){
#shopNotice .contact_link a:hover{background-color:#fff5d6}
#shopNotice .contact_link a:hover::after{opacity:1}
#shopNotice .contact_link a:hover svg{color:var(--primary)}
#shopNotice .right .tab div:hover{color:var(--primary)}
#shopNotice .right .tab div.on:hover{color:#111}
#shopNotice .latest li a:hover .subject{color:var(--primary)}
#shopNotice .latest li a:hover .datetime{color:var(--primary)}
#shopNotice .latest li.first a:hover .day{color:var(--primary)}
#shopNotice .latest li.first a:hover .month{color:var(--primary)}
#shopNotice .right .moreBtn:hover{border:1px solid var(--primary);color:#fff;background-color:var(--primary)}
}
@media(max-width:1980px){
#shopNotice .contact{padding:45px 30px;font-size:18px}
#shopNotice .contact .number{font-size:35px}
#shopNotice .contact_link{padding:30px}
#shopNotice .contact_link h3{font-size:23px}
#shopNotice .contact_link p{margin:11px 0 40px;font-size:16px}
#shopNotice .right .tab{font-size:23px}
#shopNotice .latest li .subject{font-size:16px}
#shopNotice .latest li .content{font-size:16px}
#shopNotice .latest li .datetime{font-size:16px}
#shopNotice .latest li.first .subject{font-size:16px}
#shopNotice .latest li.first .datetime{width:70px;height:70px}
#shopNotice .latest li.first .datetime .day{font-size:18px}
#shopNotice .latest li.first .datetime .month{font-size:14px}
#shopNotice .right .moreBtn{padding:18px 0;font-size:16px}
}
@media (max-width:1600px){
#shopNotice{max-width:100%;padding:0 50px}
}
@media (max-width:1230px){
#shopNotice{max-width:100%;margin:130px auto;padding:0 30px}
#shopNotice .left{width:330px}
}
@media (max-width:1024px){
#shopNotice{gap:50px;max-width:100%;padding:0 15px}
#shopNotice .left{width:280px}
#shopNotice .contact{font-size:16px}
#shopNotice .contact .number{font-size:30px}
#shopNotice .contact_link::after{width:110px}
}
@media (max-width:768px){
#shopNotice{flex-flow:column;gap:60px;margin:100px auto}
#shopNotice .left{display:flex;gap:20px;width:100%}
#shopNotice .left>div{width:100%}
#shopNotice .contact{padding:45px 10px}
#shopNotice .contact .number{font-size:25px}
#shopNotice .contact_link{margin-top:0}
#shopNotice .contact_link::after{width:95px}
#shopNotice .contact_link p{font-size:15px}
#shopNotice .contact_link h3{font-size:20px;line-height:1.3}
#shopNotice .right .moreBtn{margin-top:30px}
}
@media (max-width:480px){
#shopNotice{gap:50px;margin:60px auto}
#shopNotice .left{flex-flow:column;gap:15px}
#shopNotice .left>div{border-radius:10px;}
#shopNotice .contact{padding:35px 10px;font-size:15px}
#shopNotice .contact_link p{margin:11px 0 25px}
#shopNotice .contact_link a{width:40px;height:40px}
#shopNotice .right .tab{gap:15px;padding-bottom:20px;margin-bottom:25px;font-size:18px}
#shopNotice .latest li+li{margin-top:5px}
#shopNotice .latest li+li a::after{width:4px;height:4px}
#shopNotice .latest li .subject{font-size:15px}
#shopNotice .latest li .content{margin-top:8px;font-size:14px}
#shopNotice .latest li.first a{gap:20px;margin-bottom:25px;padding-bottom:20px}
#shopNotice .latest li.first .datetime{width:60px;height:60px;line-height:1.3}
#shopNotice .latest li.first .datetime .day{font-size:16px}
#shopNotice .latest li.first .datetime .month{font-size:14px}
#shopNotice .right .moreBtn{padding:13px 0;font-size:15px}
#shopNotice .right .moreBtn svg{height:15px}
}
@media (max-width:380px){
#shopNotice .latest li .datetime{display:none}
}