/* 'Etolan Style 都蘭國 — homepage replica. Geometry measured from www.atolan-style.com (desktop 1280 / Wix mobile 320). */
@font-face{font-family:'BreeSub';src:url(/fonts/c296bf19560456db.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F;font-display:swap}
@font-face{font-family:'BarlowXL';src:url(/fonts/83b6f4e8a4992b4c.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F;font-display:swap}
:root{
 --f-maru:'Zen Maru Gothic','Huninn',meiryo,"ヒラギノ角ゴ pro w3","hiragino kaku gothic pro",sans-serif;
 --f-bree:'BreeSub',sans-serif;
 --f-mei:メイリオ,meiryo,"ヒラギノ角ゴ pro w3","hiragino kaku gothic pro",sans-serif;
 --f-barlow:'BarlowXL',sans-serif;
 --f-seurat:'M PLUS Rounded 1c','Huninn',meiryo,"ヒラギノ角ゴ pro w3","hiragino kaku gothic pro",sans-serif;
 --f-cez:'Zen Kaku Gothic New','Noto Sans TC',"ms gothic","ヒラギノ角ゴ pro w3","hiragino kaku gothic pro",osaka,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#fff;min-width:980px;overflow-x:hidden;color:#000}
img{display:block;border:0}
a{color:inherit}
button{font:inherit;color:inherit}
section,header,footer{position:relative;display:block}
.g{position:absolute;top:0;left:50%;margin-left:-490px;width:980px;height:100%}
.a{position:absolute;margin:0;left:calc(var(--x)*1px);top:calc(var(--y)*1px);width:calc(var(--w)*1px);height:calc(var(--h)*1px)}
.a>img,.a>picture>img{width:100%;height:100%;object-fit:cover}
.m-only{display:none!important}

/* header */
#hdr{position:sticky;top:0;height:115px;background:#fff;z-index:40}
.logo{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:52px;line-height:normal;color:#000;text-decoration:none;white-space:nowrap}
.nav{display:flex;gap:16px}
.nav a{display:block;height:27px;padding-top:7px;font-family:var(--f-maru);font-size:16px;line-height:12.64px;letter-spacing:1.6px;color:#404040;text-decoration:none;white-space:nowrap;border-radius:10px}
.nav a span{display:block}
.nav a.cur span{text-decoration:underline}
.nav a:hover{color:#d11f6c}
.lang{border:1px solid #5b5b5b;border-radius:200px}
.lang img{position:absolute;left:9px;top:-1px;width:61px;height:27px;object-fit:cover}

/* slideshows */
.ss{position:absolute;overflow:hidden}
.track{display:flex;height:100%;transition:transform 1s cubic-bezier(.45,.05,.55,.95)}
.slide{position:relative;flex:0 0 100%;height:100%;overflow:hidden}
.slide>picture>img{width:100%;height:100%;object-fit:cover}
.slide::before{content:"";position:absolute;inset:-40px;background:var(--lq) center/cover;filter:blur(18px)}
.slide>picture{position:relative;display:block;height:100%}
.js img{transition:opacity .6s ease}
.js img.wait{opacity:0}
.arr{position:absolute;background:none;border:0;padding:0;cursor:pointer;z-index:3}
.arr svg{display:block;width:100%;height:100%}
.arr.next svg{transform:scaleX(-1)}
.dots{position:absolute;display:flex;align-items:center;z-index:3}
.dots a{display:block;border-radius:50%;background:#fff}
.dots a.on{background:transparent;border:2px solid #fff}

/* hero */
#hero{height:654px;z-index:0}
#heroSS{top:0;left:calc(50% - 676px);width:1341px;height:658px;background:#e9e6e1}
.slogo{position:absolute;object-fit:cover}
.js .slide .slogo{opacity:0;transform:translateX(-40px);transition:opacity 1s ease .25s,transform 1s ease .25s}
.js .slide.cur .slogo{opacity:1;transform:none}
#heroSS .arr{top:310px;width:18px;height:35px;fill:#ffebff}
#heroSS .prev{left:19px}
#heroSS .next{left:1304px}
#heroSS .dots{top:621px;left:619px;height:11px;gap:16px}
#heroSS .dots a{width:7px;height:7px}
#heroSS .dots a.on{width:11px;height:11px}

/* section 2 */
#s2{height:428px;z-index:1;background:#10171c}
.bg{position:absolute;inset:0;overflow:hidden}
.bg img{width:100%;height:100%;object-fit:cover}
.veil{position:absolute;left:50%;top:0;width:50%;height:100%;background:rgba(255,255,254,.74)}
.bree{font-family:var(--f-bree);font-weight:700;font-size:16px;line-height:28.8px;text-align:justify}
.c1{color:#808080}.c2{color:#474747}
.btn{display:flex;align-items:center;justify-content:center;border-radius:5px;text-decoration:none;font-family:var(--f-bree);font-weight:700;font-size:15px;line-height:21px;white-space:nowrap}
.btn.light{background:#eee;color:#404040}
.btn.dark{background:#404040;color:#e8edea}
.btn:hover{opacity:.85}

/* section 3 */
#s3{height:1187px;z-index:1;background:#fff}
#s3 video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s}
#s3 video.on{opacity:1}
.life{font-family:var(--f-mei);font-weight:700;font-size:53px;line-height:74.2px;color:#333959;text-align:center}
.gal{overflow:hidden}
.gs{width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-behavior:smooth}
.gs::-webkit-scrollbar{display:none}
.gi{position:relative;width:5780px;height:100%}
.gi a img{transition:transform .4s}
.gi a:hover img{transform:scale(1.03)}
.gi a{overflow:hidden}
.gnext{position:absolute;left:936px;top:257px;width:23px;height:39px;background:none;border:0;padding:0;cursor:pointer;fill:#fff}
.gnext svg{display:block;width:100%;height:100%}
#media{position:absolute;left:0;right:0;top:769px;height:419px;background:#f20d94}
#mediaSS{inset:0}
.qi svg{display:block;width:100%;height:100%}
.mt{font-family:'Syne',sans-serif;font-size:27px;line-height:normal;color:#fff;text-align:center;white-space:nowrap}
.pill{display:flex;align-items:center;justify-content:center;background:#e6deca;border-radius:300px}
.pill span{font-family:var(--f-barlow);font-weight:700;font-size:12px;line-height:16.8px;color:#f20d94}
.mq{font-family:var(--f-barlow);font-size:19px;line-height:26.6px;color:#fff;text-align:center}
#mediaSS .arr{top:189px;width:20px;height:39px;fill:#fff}
#mediaSS .prev{left:50px}
#mediaSS .next{right:50px}
#mediaSS .dots{top:365px;left:calc(50% - 58px);height:9px;gap:12px}
#mediaSS .dots a{width:6px;height:6px}
#mediaSS .dots a.on{width:9px;height:9px}

/* section 4 */
#s4{height:460px;z-index:1;background:#fff}
#s4 .bg{inset:auto;top:0;left:calc(50% - 693px);width:1387px;height:379px}
.card{background:rgba(255,255,255,.9);border-radius:20px 0}
.ch{font-family:var(--f-seurat);font-weight:700;font-size:20px;line-height:40px;color:#587e8e;white-space:nowrap}
.cp{font-family:var(--f-seurat);font-size:14px;line-height:30px;letter-spacing:-.8px;color:#587e8e;text-align:justify}
.soc:hover{opacity:.8}
.foot p{margin:0;font-family:'Questrial',sans-serif;font-size:10px;line-height:14px;color:#bfbfbf}
.foot a{text-decoration:none}

#ftr{height:75px;background:#fff;z-index:1}

/* reveal (Wix-like fade-in) */
.js .rv{opacity:0;transition:opacity 1.2s ease}
.js .rv.in{opacity:1}

/* mobile: Wix serves a 320px-wide layout */
@media (max-width:600px){
 body{min-width:0}
 .d-only{display:none!important}
 .m-only{display:block!important}
 .g{left:0;margin-left:0;width:320px}
 .a{left:calc(var(--mx)*1px);top:calc(var(--my)*1px);width:calc(var(--mw)*1px);height:calc(var(--mh)*1px)}
 #hdr{position:relative;height:54px}
 #burger{position:fixed;top:7px;right:11px;width:42px;height:41px;border:0;padding:0;border-radius:40px;background:#5a5a5a;z-index:60;cursor:pointer}
 #burger i{position:absolute;left:10px;width:22px;height:2px;background:#fff;transition:transform .3s,opacity .3s}
 #burger i:nth-child(1){top:11px}#burger i:nth-child(2){top:20px}#burger i:nth-child(3){top:29px}
 .menu-open #burger i:nth-child(1){transform:translateY(9px) rotate(45deg)}
 .menu-open #burger i:nth-child(2){opacity:0}
 .menu-open #burger i:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
 #mmenu{position:fixed;inset:0;z-index:55;visibility:hidden;opacity:0;transition:opacity .4s,visibility .4s}
 .menu-open #mmenu{visibility:visible;opacity:1}
 #mmenu .ov{position:absolute;inset:0;background:rgba(0,0,0,.46)}
 #mmenu .panel{position:absolute;left:116px;top:0;width:204px;height:100%;background:rgba(255,255,255,.61);transform:translateX(100%);transition:transform .4s}
 .menu-open #mmenu .panel{transform:none}
 #mmenu .panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
 #mmenu ul{position:absolute;left:27px;top:72px;width:146px;margin:0;padding:0;list-style:none}
 #mmenu li{height:34px}
 #mmenu li a,#mmenu li div{display:block;font-family:var(--f-cez);font-size:15px;line-height:34px;color:#e8f4ff;text-align:center;text-decoration:none;white-space:nowrap}
 #mmenu li a.cur{color:#fff}
 #hero{height:287px}
 #heroSS{left:0;top:82px;width:320px;height:179px}
 #heroSS .arr{top:80px;width:8px;height:16px}
 #heroSS .prev{left:15px}
 #heroSS .next{left:297px}
 #s2{height:565px}
 .veil{left:0;width:100%;height:237px}
 .bree{font-size:13px;line-height:23.4px}
 .btn{font-size:10.9412px;line-height:15.3176px}
 #s3{height:718px}
 .life{font-size:24px;line-height:33.6px}
 .gi{width:2483px}
 #media{top:328px;height:390px}
 .mt{font-size:23px}
 .pill span{font-size:9px;line-height:12.6px}
 .mq{font-size:13px;line-height:18.2px}
 #mediaSS .arr{top:183px;width:10px;height:20px}
 #mediaSS .prev{left:13px}
 #mediaSS .next{right:13px}
 #mediaSS .dots{top:335px}
 #s4{height:338px}
 #s4 .bg{left:-208px;width:669px;height:236px}
 .ch{font-size:14px;line-height:28px;text-align:center}
 .cp{font-size:10px;line-height:19.5px;letter-spacing:-.52px}
 .foot p{font-size:8px;line-height:10px}
 #ftr{height:40px}
 #qab{position:fixed;right:16px;bottom:16px;width:50px;height:50px;border-radius:50%;background:rgba(64,64,64,.75);box-shadow:0 2px 8px rgba(0,0,0,.3);z-index:45;display:flex!important;align-items:center;justify-content:center;gap:4px}
 #qab i{display:block;width:5px;height:5px;border-radius:50%;background:#fff}
}
/* measured: Wix bg-media opacity, gallery start offset */
#hero,#s4{overflow:hidden}
#s2 .bg img{opacity:.21}
#s3 .bg{opacity:.04}
.gi{left:5px}
@media (max-width:600px){#s3 .bg{opacity:.19}.gi{left:2px}}