/* =========================================================
   Banner
========================================================= */
#banner{position:relative;width:100%;height: 100vh;max-height: 100vh;overflow:hidden;background:var(--primary);color:var(--secondary);font-family:var(--font-family);}
#banner:before{content:"";position: absolute;width: 100%;height: 200px;background: linear-gradient(
180deg, rgba(var(--primary-rgb), .21), rgb(42 33 27 / 0%));z-index: 2;}
#banner .main-slider,#banner .slick-list,#banner .slick-track,#banner .item{width:100%;height:100%;}
#banner .main-slider{position:relative;}
#banner .item{position:relative;overflow:hidden;background:var(--primary);}
#banner .slick-slide{height:100%;}
#banner .slick-slide>div{height:100%;}
#banner .banner_panel{position:absolute;z-index:2;left:0;top:0;width:39%;height:100%;overflow:hidden;background:linear-gradient(115deg,#211a16 0%,var(--primary) 72%,#31261f 100%);border-right:1px solid rgba(var(--white-rgb),.08);}
#banner .banner_panel:before{position:absolute;left:-60%;top:-20%;width:85%;height:150%;background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),.05),transparent);transform:rotate(12deg);content:"";animation:bannerPanelLight 9s ease-in-out infinite;}
#banner .banner_panel:after{position:absolute;left:0;bottom:0;width:100%;height:42%;background:linear-gradient(0deg,rgba(var(--black-rgb),.2),transparent);content:"";}
#banner .banner_visual{position:absolute;z-index:1;top:0;right:0;width:61%;height:100%;overflow:hidden;background:var(--coffee);}
#banner .banner_visual>img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:center center;transform:scale(1.09);filter:brightness(.9);transition:transform 7s cubic-bezier(.2,.55,.25,1),filter 1.2s ease;}
#banner .slick-current .banner_visual>img{transform:scale(1.015);filter:brightness(1);}
#banner .banner_visual video{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;}
#banner .visual_mask{position:absolute;z-index:2;inset:0;overflow:hidden;background:linear-gradient(90deg,rgba(var(--primary-rgb),.27) 0%,rgba(var(--primary-rgb),.06) 46%,rgba(var(--black-rgb),.12) 100%);pointer-events:none;}
#banner .visual_mask:before{position:absolute;left:-60%;top:-30%;width:60%;height:160%;background:linear-gradient(90deg,transparent,rgba(255,235,205,.08),transparent);transform:rotate(9deg);content:"";animation:bannerLightMove 10s ease-in-out infinite;}
#banner .visual_mask:after{position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(0deg,rgba(var(--black-rgb),.28),transparent);content:"";}
#banner .info{z-index:6;left:0;top:0;width: 60%;height:100%;align-items:center;pointer-events:none;}
#banner .info .workframe{position:relative;width:100%;height:100%;max-width:none;padding: 0 12% 0 15%;display: flex;flex-direction: column;}
#banner .txt{color:var(--secondary);}
#banner .banner_location{position:absolute;left:15%;top: 18%;display:flex;align-items:center;gap:20px;font-family:var(--font-family);font-size:11px;font-weight:600;letter-spacing:.22em;color:rgba(var(--secondary-rgb),.78);white-space:nowrap;opacity:0;transform:translateY(-12px);transition:opacity .8s ease .1s,transform .8s ease .1s;}
#banner .banner_location span{color:inherit;font-size: 11px;}
#banner .banner_location i{display:block;width:10px;height:1px;background:rgba(var(--triadic2-rgb),.7);}
#banner .slick-current .banner_location{opacity:1;transform:translateY(0);}
#banner .banner_content{position:absolute;left:15%;top: 28%;width:76%;}
#banner .banner_en{margin-bottom: 20px;font-family:var(--font-family);font-size:13px;font-weight:500;letter-spacing:.2em;color:var(--gold);}
#banner .h3{width:100%;margin:0 0 34px;font-family:var(--font-serif);font-size:clamp(48px,3.6vw,72px);font-weight:400;line-height:1.5;letter-spacing:.055em;color:var(--secondary);}
#banner .banner_title br{display:block;}
#banner .banner_content>p{max-width:430px;margin:0;font-family:var(--font-family);font-size:15px;font-weight:400;line-height:2;color:rgba(var(--secondary-rgb),.86);letter-spacing:.06em;}
#banner .banner_more{display:flex;position:relative;align-items:center;width:165px;margin-top:42px;padding:0 0 14px;font-family:var(--font-family);font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--secondary);}
#banner .banner_more:after{position:absolute;left:0;bottom:0;width:100%;height:1px;background:rgba(var(--secondary-rgb),.45);transform-origin:left center;content:"";transition:transform .45s ease;}
#banner .banner_more span{white-space:nowrap;color:inherit;}
#banner .banner_more i{flex:1;}
#banner .banner_more b{font-size:27px;font-weight:200;line-height:1;color:var(--gold);transition:transform .45s ease;}
#banner .banner_content>*{opacity:0;transform:translateY(28px);transition:opacity .85s ease,transform .85s cubic-bezier(.22,.8,.25,1);}
#banner .slick-current .banner_content>*{opacity:1;transform:translateY(0);}
#banner .slick-current .banner_content .banner_en{transition-delay:.18s;}
#banner .slick-current .banner_content .h3{transition-delay:.28s;}
#banner .slick-current .banner_content>p{transition-delay:.4s;}
#banner .slick-current .banner_content .banner_more{transition-delay:.52s;}
#banner .scroll_text{position:absolute;z-index:10;left:15%;bottom:5%;display:flex;align-items:flex-start;gap:22px;text-decoration:none;font-family:var(--font-family);font-size:10px;font-weight:600;letter-spacing:.16em;color:rgba(var(--secondary-rgb),.8);opacity:0;transform:translateY(15px);transition:opacity .8s ease .7s,transform .8s ease .7s,color .3s ease;pointer-events:auto;cursor:pointer;}
#banner .slick-current .scroll_text{opacity:1;transform:translateY(0);}
#banner .scroll_text span{display:block;padding-top:2px;color:inherit;animation:scrollTextFade 2.4s ease-in-out infinite;font-size: 12px;}
#banner .scroll_text i{position:relative;display:block;width:1px;height:62px;overflow:hidden;background:rgba(var(--gold-rgb),.28);}
#banner .scroll_text i:after{position:absolute;left:0;top:-100%;width:1px;height:55%;background:var(--gold);content:"";animation:scrollLine 2s cubic-bezier(.4,0,.2,1) infinite;}
#banner .scroll_text:hover{color:var(--gold);}
#banner .vertical_text{position:absolute;z-index:3;right:3.3%;top:34%;display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--font-serif);font-size:14px;letter-spacing:.18em;color:rgba(var(--secondary-rgb),.9);writing-mode:vertical-rl;opacity:0;transform:translateY(20px);transition:opacity 1s ease .65s,transform 1s ease .65s;}
#banner .vertical_text span{color:inherit;}
#banner .slick-current .vertical_text{opacity:1;transform:translateY(0);}
#banner .vertical_text i{display:block;width:1px;height:32px;margin:5px 0;background:rgba(var(--secondary-rgb),.45);}
#banner .visual_bottom{position:absolute;z-index:3;left:0;right:0;bottom:0;height:16%;min-height:130px;background:linear-gradient(90deg,rgba(var(--primary-rgb),.21),rgba(var(--primary-rgb),0));transform:translateY(100%);transition:transform .9s cubic-bezier(.22,.8,.25,1) .25s;}
#banner .slick-current .visual_bottom{transform:translateY(0);}
#banner .slide_index{position:absolute;left:15%;bottom:27%;display:flex;align-items:center;gap:14px;color:var(--white);opacity:0;transform:translateY(10px);transition:opacity .7s ease .75s,transform .7s ease .75s;}
#banner .slick-current .slide_index{opacity:1;transform:translateY(0);}
#banner .slide_index strong{font-family:var(--font-en);font-size:29px;font-weight:500;line-height:1;color:var(--white);}
#banner .slide_index span{font-family:var(--font-family);font-size:9px;font-weight:600;letter-spacing:.09em;color:rgba(var(--secondary-rgb),.9);}
#banner .bottom_slogan{position:absolute;right: 20%;bottom:26%;display:flex;flex-direction:column;gap:2px;font-family:var(--font-family);font-size:9px;font-weight:600;line-height:1;letter-spacing:.16em;color:var(--secondary);opacity:0;transform:translateX(12px);transition:opacity .7s ease .85s,transform .7s ease .85s;}
#banner .slick-current .bottom_slogan{opacity:1;transform:translateX(0);}
#banner .slick-current .bottom_slogan span{font-size:12px;color:inherit;}
#banner .coffee_circle{position:absolute;right: 10%;bottom:16%;display:flex;width:72px;height:72px;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(var(--gold-rgb),.62);border-radius:50%;box-shadow:inset 0 0 0 4px rgba(var(--gold-rgb),.08);font-family:var(--font-serif);font-size:13px;line-height:1.5;letter-spacing:.08em;color:#e6c18f;opacity:0;transform:scale(.75) rotate(-12deg);transition:opacity .8s ease .9s,transform .8s cubic-bezier(.22,.8,.25,1) .9s;}
#banner .coffee_circle span{color:inherit;}
#banner .slick-current .coffee_circle{opacity:1;transform:scale(1) rotate(0);}
#banner .banner_link{z-index:4;inset:0;display:block;}
#banner .slick-active .banner_panel:before{animation-play-state:running;}

@keyframes bannerPanelLight{0%,100%{left:-65%;opacity:0;}30%{opacity:1;}65%{left:100%;opacity:.7;}66%,100%{opacity:0;}}
@keyframes bannerLightMove{0%,15%{left:-70%;opacity:0;}35%{opacity:1;}65%{left:120%;opacity:.8;}66%,100%{opacity:0;}}
@keyframes scrollLine{0%{top:-65%;opacity:0;}20%{opacity:1;}65%{opacity:1;}100%{top:115%;opacity:0;}}
@keyframes scrollTextFade{0%,100%{opacity:.62;}50%{opacity:1;}}

@media screen and (max-width:1399px) {
  #banner { min-height: 700px; }
  #banner .banner_panel,#banner .info { width: 42%; }
  #banner .banner_visual { width: 58%; }
  #banner .info .workframe { padding-left: 11%; padding-right: 8%; }
  #banner .banner_location,#banner .banner_content,#banner .scroll_text { left: 11%; }
  #banner .banner_location { top: 15%; font-size: 9px; gap: 13px; }
  #banner .banner_content { top: 27%; width: 80%; }
  #banner .banner_en { margin-bottom: 32px; font-size: 11px; }
  #banner .h3 { margin-bottom: 27px; font-size: clamp(42px,3.6vw,60px); }
  #banner .banner_content>p { font-size: 13px; }
  #banner .banner_more { margin-top: 32px; }
}
@media screen and (max-width:991px) {
  #banner { height: 820px; min-height: 0; }
  #banner .banner_visual { left: 0; right: auto; width: 100%; height: 100%; }
  #banner .banner_visual>img { object-position: 62% center; }
  #banner .visual_mask { background: linear-gradient(90deg,rgba(var(--primary-rgb),.94) 0%,rgba(var(--primary-rgb),.75) 48%,rgba(var(--primary-rgb),.3) 100%); }
  #banner .banner_panel { display: none; }
  #banner .info { width: 100%; }
  #banner .info .workframe { padding: 0 7%; }
  #banner .banner_location { left: 7%; top: 13%; }
  #banner .banner_content { left: 7%; top: 27%; width: 64%; }
  #banner .h3 { font-size: clamp(42px,7vw,64px); }
  #banner .scroll_text { left: 7%; }
  #banner .vertical_text { right: 5%; }
  #banner .slide_index { left: 7%; }
  #banner .bottom_slogan { right: 14%; }
  #banner .coffee_circle { right: 4%; }
}
@media screen and (max-width:767px) {
  #banner { height: 760px; }
  #banner .banner_visual>img { object-position: 64% center; }
  #banner .visual_mask { background: linear-gradient(180deg,rgba(var(--primary-rgb),.45) 0%,rgba(var(--primary-rgb),.72) 42%,rgba(var(--primary-rgb),.96) 100%); }
  #banner .banner_location {top: 18%;font-size: 8px;gap: 10px;}
  #banner .banner_location span:last-child { display: none; }
  #banner .banner_content {left: 7%;top: 29%;width: 86%;}
  #banner .banner_en { margin-bottom: 24px; font-size: 10px; }
  #banner .h3 {margin-bottom: 22px;font-size: clamp(35px,8vw,45px);line-height: 1.48;}
  #banner .banner_content>p {max-width: 330px;font-size: 16px;line-height: 1.9;}
  #banner .banner_more { width: 150px; margin-top: 28px; font-size: 13px; }
  #banner .scroll_text {bottom: 0%;font-size: 8px;}
  #banner .scroll_text i { height: 42px; }
  #banner .vertical_text { display: none; }
  #banner .visual_bottom { height: 105px; min-height: 0; background: rgba(var(--primary-rgb),.76); }
  #banner .slide_index {left: auto;right: 6%;bottom: 20px;}
  #banner .slide_index strong { font-size: 23px; }
  #banner .slide_index span {font-size: 10px;}
  #banner .bottom_slogan,#banner .coffee_circle { display: none; }
}