html{scroll-behavior:smooth}body{margin:0}h1{text-align:center}main{background:#fff}#hero{height:100vh;height:100dvh;padding:86px var(--pd);margin:0 auto;overflow:hidden;position:relative}#hero>img{position:absolute;left:50%;right:0;bottom:0;height:100%;max-height:100vw;width:auto;z-index:0;transform:translate(-50%)}#hero>div{position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;text-align:center;padding:var(--pd);z-index:2}#hero>div h1{font-size:var(--fs-2);font-weight:400;margin:16px 0}#hero>div p{font-size:var(--fs-p);margin-top:16px;margin-bottom:36px}@media screen and (min-width:480px){#hero>div h1{font-size:var(--fs-1)}#hero>div h1>span{display:block;font-size:var(--fs-2)}}@media screen and (min-width:600px){#hero>div h1{font-size:var(--fs-1)}#hero>div h1>span{display:inline;font-size:var(--fs-1)}#hero>div p{font-size:var(--fs-3)}}#hero>div .actions{display:flex;gap:16px}#hero>div .actions a,#hero>div .actions button{background:#e7e7e7;color:#111;padding:12px 24px;border-radius:24px;border:none;outline:none;margin:0 auto;text-decoration:none;transition:background-color .25s ease}#hero>div .actions a:hover,#hero>div .actions button:hover{background:#d4d4d4}#hero>div .actions a.main,#hero>div .actions button.main{background:var(--act-main);color:var(--act-main-content)}#hero>div .actions a.main:hover,#hero>div .actions button.main:hover{background:var(--act-main-hover)}#home-areas{padding:0 var(--pd)}#home-areas h2{text-align:center;padding-top:128px;margin-top:0;margin-bottom:28px;color:#444f5c}#home-areas grid{margin:0 auto 64px;max-width:480px;height:768px;display:block;position:relative}#home-areas grid.smooth .area-card{transition:all .75s ease}#home-areas .area-card{position:absolute;top:0;left:0;width:45%;width:calc(50% - 12px);height:240px;overflow:hidden;margin:24px 0;border-radius:18px;transform:translate(-50%);display:block;transition:all .1s linear;transform-origin:bottom}#home-areas .area-card img{position:absolute;left:0;top:0;height:100%;width:100%;object-fit:cover;z-index:2}#home-areas .area-card h3{display:block;position:absolute;left:0;bottom:0;width:100%;padding:0 12px;margin:0;z-index:3;line-height:36px;font-size:14pt;text-align:center;color:var(--color-base-1);object-fit:cover;transition:bottom .4s ease,opacity .3s ease;border-radius:18px 18px 0 0;color:#fff;background:#323232d1;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@media screen and (min-width:344px){#home-areas .area-card{border-radius:24px}#home-areas .area-card:nth-child(2n){transform:translateY(50%)}#home-areas .area-card img{border-radius:24px}#home-areas .area-card h3{text-align:left;width:unset;left:8px;bottom:8px;line-height:44px;border-radius:16px;color:var(--color-base-1);background:#e6e6e6c5;color:#fff;background:linear-gradient(45deg,#2f1d33,#49412c4a)}}@media screen and (min-width:480px){#home-areas .area-card,#home-areas .area-card img{border-radius:16px}#home-areas .area-card h3{text-align:left;width:unset;left:8px;bottom:8px;border-radius:8px;font-size:16pt;line-height:48px}}@media screen and (min-width:860px){#home-areas h2{margin-bottom:32px}#home-areas grid{display:flex;max-width:1350px;height:90vh;height:calc(100vh - 128px);max-height:600px}#home-areas .area-card{position:absolute;left:0;width:20%;width:calc(20% - 10px);height:100%;background:var(--bg-box);border-radius:24px;transform-origin:center}#home-areas .area-card img{position:absolute;left:0;top:0;height:100%;width:100%;border-radius:24px;transition:top .4s ease,opacity .25s ease;object-fit:cover;opacity:.8}#home-areas .area-card h3{position:absolute;left:0;bottom:-32px;width:100%;transition:bottom .4s ease,opacity .3s ease;object-fit:cover;z-index:1;padding:0 12px;line-height:64px;height:64px;opacity:0;color:var(--color-base-1);text-align:center;font-size:18pt;background:none}#home-areas .area-card:hover img{top:-64px;opacity:1}#home-areas .area-card:hover h3{bottom:0;opacity:1}#home-areas .area-card:nth-child(1),#home-areas .area-card:nth-child(5){z-index:1}#home-areas .area-card:nth-child(2),#home-areas .area-card:nth-child(4){z-index:2}#home-areas .area-card:nth-child(3){z-index:3}}
