html,body{max-width:100%;overflow-x:hidden}
.container{max-width:1200px}
.header{height:480px;background-image: url(../images/header.jpg);background-attachment: scroll;background-size: cover;background-position: center center;background-repeat: no-repeat}
.header .text{height:100%;background-color: rgba(90, 78, 66, 0.45);justify-content: center;display:flex;align-items: center}
.header .text p{color:#fff;font-size: 45px;text-align: center}
.home-about{
  background:
    repeating-linear-gradient(90deg, rgba(74,64,54,.035) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, #faf6ef 0%, #f3ebdf 50%, #efe6d8 100%);
  padding:50px 0;
}
.home-about .box{padding-bottom:60px}
.home-about .box h3,
.home-case h3{text-align: center;color:#3d342b;margin:10px 0 40px;font-size:45px}
.home-about .box article{text-align: center;color:#5c5348;font-size:17px;line-height:1.9;max-width:600px;margin:0 auto;}
.home-case{}
.home-case ul{display:flex;flex-wrap:wrap;justify-content:space-between}
.home-case li{flex:0 0 33.1%;position:relative;margin-bottom:3px;overflow: hidden}
.home-case li img{width:100%;height:260px;;transition:.3s}
.home-case li img:hover{transform: scale(1.05, 1.05)}
.home-case li span{position:absolute;right:8px;bottom:8px;z-index:2;color:#fff;font-size:25px;text-shadow:0 1px 4px rgba(0,0,0,.35)}
.home-article{background:#f8f4ec;padding:50px 0}
.home-article h3{text-align: center;color:#3d342b;margin:40px 0 60px;font-size:45px}
.home-article ul{display:flex;flex-wrap: wrap;justify-content: space-between}
.home-article li{flex:0 0 48%;width:48%}
.home-article figure{overflow: hidden}
.home-article figure img{width:100%}
.home-article .title{font-size:18px;margin-top:25px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.home-article .title a{color: #4a4036}
.home-article .title a:hover{color: #8b6914}
.home-article .author{color: #7a6e60;margin:18px 0 30px}
.home-article p{color: #5c5348;margin:30px 0}
.home-article a.link{background-color:#5c4e40;color:#faf6ef;display:inline-block;padding:6px 40px}
.home-article a.link:hover{background-color:#463a30}
.footer{background:#f6f0e6;overflow-x:hidden;width:100%}
.footer-panel{
  position:relative;overflow:hidden;color:#4a4036;text-align:center;
  padding:36px 20px 0;
  width:100%;
  background:
    repeating-linear-gradient(90deg, rgba(74,64,54,.04) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, #faf6ef 0%, #f3ebdf 55%, #eee4d6 100%);
}
.footer-panel::before{
  content:"慕";position:absolute;left:50%;top:6%;transform:translateX(-50%);
  width:1em;height:1em;font-size:min(280px, 48vw);line-height:1;font-weight:700;
  color:rgba(74,64,54,.06);pointer-events:none;
  letter-spacing:-.04em;overflow:hidden;white-space:nowrap;
}
.footer-panel .inner{
  position:relative;z-index:1;width:100%;max-width:420px;margin:0 auto;
  padding:0 4px;box-sizing:border-box;
}
.footer-panel .line{height:1px;background:rgba(74,64,54,.22);margin:0 auto 22px;max-width:280px}
.footer-panel .qr{
  width:42%;max-width:180px;aspect-ratio:1/1;margin:0 auto 14px;
  background:#fff;padding:8px;box-sizing:border-box;
  box-shadow:0 1px 0 rgba(74,64,54,.06);
}
.footer-panel .qr img{width:100%;height:100%;display:block;object-fit:contain}
.footer-panel .qr-tip{
  font-size:13px;margin:0 auto 24px;letter-spacing:.04em;color:#6b5f52;
  max-width:100%;padding:0 8px;word-break:keep-all;
}
.footer-panel .store{font-size:18px;font-weight:600;margin-bottom:10px;padding:0 8px;color:#3d342b}
.footer-panel .address{
  font-size:13px;color:#6b5f52;margin:0 auto 26px;
  line-height:1.7;padding:0 12px;max-width:100%;
  word-break:break-word;overflow-wrap:anywhere;
}
.footer-panel .line2{height:1px;background:rgba(74,64,54,.22);margin:0 auto 22px;max-width:280px}
.footer-panel .socials{
  font-size:12px;color:#7a6e60;margin:0 auto 14px;
  letter-spacing:.02em;padding:0 12px;line-height:1.7;
  word-break:break-word;overflow-wrap:anywhere;
}
.footer-panel .brand{font-size:20px;font-weight:600;margin-bottom:18px;padding:0 8px;color:#3d342b}
.footer-panel .chars{width:100%;max-width:360px;margin:0 auto;display:block;line-height:0;padding:0 8px 8px;box-sizing:border-box}
.footer-panel .chars img{width:100%;height:auto;display:block;max-width:100%}
.footer .copyright{
  background:#e8dfd2;color:#8a7d6e;font-size:12px;text-align:center;
  padding:9px 12px;word-break:break-all;overflow-wrap:anywhere;
}
.footer .copyright a{color:#8a7d6e}
@media (max-width:768px){
  .footer-panel{padding:28px 16px 8px}
  .footer-panel::before{font-size:min(220px, 48vw);top:4%;opacity:.9}
  .footer-panel .inner{max-width:100%;padding:0}
  .footer-panel .line,
  .footer-panel .line2{max-width:72%;margin-bottom:18px}
  .footer-panel .qr{width:38%;max-width:148px;padding:6px;margin-bottom:12px}
  .footer-panel .qr-tip{font-size:13px;margin-bottom:20px}
  .footer-panel .store{font-size:16px;margin-bottom:8px}
  .footer-panel .address{font-size:13px;margin-bottom:20px;padding:0 4px}
  .footer-panel .socials{font-size:12px;margin-bottom:12px;padding:0 4px}
  .footer-panel .brand{font-size:18px;margin-bottom:14px}
  .footer-panel .chars{padding:0 0 4px}
}
@media (max-width:414px){
  .footer-panel{padding:24px 14px 6px}
  .footer-panel::before{font-size:42vw}
  .footer-panel .qr{width:42%;max-width:132px}
  .footer-panel .qr-tip{font-size:12px;margin-bottom:18px}
  .footer-panel .store{font-size:15px}
  .footer-panel .address{font-size:12px;line-height:1.65}
  .footer-panel .socials{font-size:11px;line-height:1.65}
  .footer-panel .brand{font-size:16px;margin-bottom:12px}
  .footer .copyright{font-size:11px;padding:8px 10px}
}
.case-detail {}
.case-detail img{max-width:100%;}
@media (max-width:1200px){
  .home-case li img{height:22vw}
}
@media (max-width:768px){
  .header{height:56vw}
  .header .text p{font-size: 35px}
  .home-about{padding:40px 0}
  .home-about .box{border-bottom:dashed 1px rgba(74,64,54,.28);padding-bottom:30px;margin-bottom:30px}
  .home-case li{flex:0 0 49.5%;margin-bottom:6px}
  .home-case li img{height:32vw}
  .home-article li{flex:0 0 100%;width:100%}
  .home-about .box h3,
  .home-case h3{margin:10px 0 30px;font-size:32px}
  .home-article h3{margin:30px 0 40px;font-size:32px}

}
@media (max-width:512px){
  .header{background-image: url(../images/header-mobile.jpg);background-attachment: scroll;background-position: center bottom}
  .header .text{display:none}
  .home-about,
  .home-article{padding:30px 0}
  .home-about .box h3,
  .home-case h3{margin:10px 0 20px;font-size:20px}
  .home-article h3{margin:10px 0 30px;font-size:20px}
  .home-about .box p{display:inline;font-size:14px}
  .home-case li span{font-size:15px}
  .home-article li{margin-bottom:20px}
  .home-article .title{font-size:15px;margin-top:15px}
  .home-article .author{margin:10px 0;font-size:12px;color:#999}
  .home-article p{margin:10px 0 15px}
  .home-article a.link{padding:4px 30px;font-size:12px;border-radius:2px}
}
@media (max-width:414px){
  .home-about .box h3,
  .home-case h3{margin:10px 0 15px;font-size:18px}
  .home-about .box article{;line-height:1.5}
  .home-about .box p{display:inline;font-size:12px}
  .home-article p{font-size:12px}
}