@charset "utf-8";
#shopAbout{position:relative;width:100%;height:520px}
#shopAbout .bg{position:absolute;top:0px;left:0px;z-index:-1;width:100%;height:100%;filter:brightness(0.3);background:url(./img/bg.jpg) no-repeat center / cover}
#shopAbout .tit{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;width:100%;height:100%}
#shopAbout .tit h2{font-size:44px;font-weight:700;color:#fff}
#shopAbout .tit p{margin:30px 0;font-size:20px;font-weight:500;color:rgb(255, 255, 255, 0.6)}
#shopAbout .tit a{display:flex;justify-content:center;align-items:center;gap:20px;padding:20px 40px;border:2px solid #fff;border-radius:34px;font-size:18px;font-weight:500;color:#fff;transition:all .3s}
#shopAbout .tit a svg{width:20px;height:20px}

@media (hover:hover){
#shopAbout .tit a:hover{border:2px solid var(--primary);background-color:var(--primary)}
}

@media(max-width:1980px){
#shopAbout{height:450px}
#shopAbout .tit h2{font-size:38px}
#shopAbout .tit p{font-size:17px}
#shopAbout .tit a{font-size:16px}
}
@media (max-width:1230px){
#shopAbout{height:400px}
}
@media (max-width:1024px){
#shopAbout{height:380px}
#shopAbout .tit h2{font-size:35px}
#shopAbout .tit p{margin:20px 0 30px}
}
@media (max-width:768px){
#shopAbout{height:330px}
#shopAbout .tit h2{font-size:30px}
#shopAbout .tit p{font-size:16px}
#shopAbout .tit a{gap:15px;padding:15px 30px;font-size:15px}
}
@media (max-width:480px){
#shopAbout{height:270px}
#shopAbout .tit h2{font-size:23px}
#shopAbout .tit p{margin:15px 0 20px;font-size:15px}
#shopAbout .tit a{gap:10px;padding:13px 25px;font-size:14px}
}
@media (max-width:380px){
#shopAbout{height:230px}
#shopAbout .tit h2{font-size:20px}
#shopAbout .tit p{margin-top:10px}
}