/* ---------------------------------------------
    $common
-----------------------------------------------*/ 
.bg{
  width: 100%;
  height: 300px;
  padding-top: 80px;
  top: 0;
  left: 0;
  background: linear-gradient( var(--color-main2), var(--color-second) 70%);
  box-shadow: 1px 1px 12px 0px rgba(0, 0, 0, 0.2);
  color: var(--color-white);
  transition: all .4s;
  h1{
      opacity: 0.7;
      font-weight: 600;
      font-size: 2rem;
      line-height: 1.4;
      letter-spacing: 0.5rem;
      margin: 0; }
      h5{
          opacity: 0.7;
          font-weight: 600;
          font-size: 1rem;
          margin: 0; }
}
.common-bg{
    height: 260px; }

.common-title{
    top: 50%;
    transform: translateY(-50%);
    p{
      padding: 16px 0;
      font-weight: 600;
      opacity: 0.7; }
  }

.common .img-box{
    width: 100%;
    flex: 1;
    overflow: hidden;
    transition: all .5s;
    img{
      width: 100%;
      height: 100%; }
      .img-fit-height{
        height: 100%;
        object-fit: cover;
        object-position: center; }
}

.common p{
    color: var(--color-dark2);
    line-height: 1.8;
  }

.common .text-group a{
    justify-content: center;
    margin: 0; }


/* $img-msg------------------  */
.img-msg::before{
  content: "↗";
  color: var(--color-white);
  text-shadow: 0px 2px 2px rgb(140 104 123);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 20px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%; height: 30%;
  z-index: 2;
  background: linear-gradient(180deg, rgba(246, 226, 236, 0), #C49DB5);
  transition: all .4s; }

.img-msg:hover{
  opacity: 1; }

.img-msg:hover::before{
  content: "VIEW MORE";
  justify-content: center;
  background: linear-gradient(315deg, rgba(246, 226, 236, .5), #C49DB5);
  height: 100%;
  z-index: 2; }

/* $other-works-list--------------- */
.other-works-list .img-msg::before{
  content: attr(data-title);
  justify-content: center;
  padding: 0 0 8px 0;
  align-items: end;
}
.other-works-list .img-msg:hover::before{
  align-items: center;
 }

.work-item .img-msg{
  aspect-ratio: 5 / 3;
  overflow: hidden;
}
@media (max-width: 768px){
    .work-item .img-msg{
      aspect-ratio: auto;
  }
}

.work-item .img-msg img{
  display: block;
  object-fit: contain;
  width: 100%; height: 100%;
}

/* $deco-container---------------------- */
article .deco-container {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: hidden; 
  pointer-events: none;
  z-index: -1;
  .circle-aricles{
    top: 5%; left: -5%;
    width: 260px; height: 260px;
  }
  .bubble-s-left{top: 30%; left: 5%; width: 125px; height: 125px;}
  .deco-magic{top: 55%; left: 5%; width: 72px; height: 85px;}
  .bubble-s{top: 8%; right: 5%; width: 125px; height: 125px;}
  .deco-t{top: 45%; right: 5%; width: 72px; height: 72px;}
  .circle-aricles-right{bottom: 20%; right: 20%; width: 260px; height: 260px;}
  .deco-auto{bottom: 10%; left: 5%; width: 72px; height: 72px;}
}
@media (max-width: 768px){
  article .deco-container{
    display: none;
  }
}
article .deco-container *{
  position: absolute;
  img{width: 100%; height: 100%;}
}

article .deco-container.circle-only .circle-aricles{
  top: 10%;
}
article .deco-container.circle-only .bubble-s{
  top: 20%;
}
article .deco-container.circle-only .circle-aricles-right{
  width: 180px; height: 180px;
  top: 35%; right: 0;
}
article .deco-container.circle-only .bubble-s-left{
  top: 45%;
}
article .deco-container.circle-only .bubble-s-right{
  width: 100px; height: 100px;
  bottom: 20%; right: 2%;
}
article .deco-container.circle-only .circle-aricles-left{
  width: 260px; height: 260px;
  bottom: 5%; left: 2%;
}

/* $beer-slider ------------------------- */
.beer-slider{width:100%; height: 500px; border: 1px solid #b3b3b3;}
@media (max-width:768px) {
  .beer-slider{height: auto;}
}
.beer-reveal[data-beer-label]:after, .beer-slider[data-beer-label]:after,.beer-handle{
  background: hsl(0deg 0% 27.71% / 75%);
  color: #fff;
}
/* ----------------------------------------------------------------- */
/* $page-work
-------------------------------------------------------------------- */
.work{
    width: 100%;
    height: 100%;

    /* $side-menu */
    .bg .side-menu{
        top: 50%;
        transform: translateY(-50%);
        @media (max-width: 576px) {
            transform: translateY(-55%); }

        .row{
            width: auto;
            max-width: 100%;
            justify-content: center;
            gap: 20px;
            ul{
                display: flex;
                flex-direction: row;
                justify-content: center;
                font-size: 1rem;
                @media (max-width: 768px){
                    display: none;
                }
                li{
                    flex: 1;
                    padding-left: 1rem;
                    @media (max-width: 768px){
                        max-width: 120px;
                        padding: 0.5rem;
                    }
                    a{
                        color: var(--color-second2);
                        font-weight: 600;
                        border-radius: 10rem;
                        height: 100%;
                        padding: 1rem;
                        background-color: white;
                        transition: all .4s;
                    }
                }
                li:nth-child(1) a,
                li:nth-child(2) a,
                li:nth-last-of-type(1) a{
                    line-height: 2; }
                    @media (max-width: 576px){
                        li a{ padding: 0.5rem; }
                    }
                    li a:visited, li a:hover{
                        opacity: 1;
                        top: -10px; }
                        li a::after{
                            content: "";
                            position: absolute;
                            border: solid var(--color-white);
                            border-width: 0px 3px 3px 0;
                            display: inline-block;
                            padding: 3px;
                            bottom: -20%;
                            left: 50%;
                            transform: rotate(45deg) translateX(-50%);
                            animation: arrow2 ease-out 1.5s infinite;
                         }
            }
        }
    }
    @media (max-width: 576px) {
      .bg{
          height: 200px; }
    }

    .img-box .img-box__inner{
        width: 100%;    
        padding-top: 80%;
        img{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            max-height: 400px;
            object-fit: cover; }
    }
}

/* 導覽箭頭動畫 */
@keyframes arrow2 {
    15% {
            opacity: 1;
            }
    30% {
        opacity: 1;
        bottom: -20%;
        }
    100% {
        opacity: 0;
        bottom: -30%;
        }
}

/* 平面設計 展示區 等高 */
.work-graphic .col-12{
    display: flex;
    flex-direction: column;
}

/* 手機板調整間距 */
@media (max-width: 768px){
  .work .row{
    gap: 40px;
  }
}
/* ---------------------------------------------------------------
 $page-graphic / illust
----------------------------------------------------------------*/
/* 封面圖固定尺寸 */
.post .cover{
  margin-bottom: 3rem;
}
@media (max-width: 768px) {
  .post .cover{
    margin-bottom: 2rem;
  }
}
.post .cover .img-box{
  overflow: hidden;
}
.post .cover .img-box img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------
 $page-sns / ec(ul)
----------------------------------------------------------------*/
.sns h4{
  display: flex;
  align-items: center;
  gap: 8px;
}

.case-result{
  background-color: var(--color-main2);
}

.case-detail ul,
#ec .ec-info ul{
  list-style-type: disc;
  line-height: 1.6;
  li{
    margin-left: 20px;
    margin-bottom: 12px;
  }
}

.btn-expand-trigger{
  margin: 0;
  padding: 0;
  border: 0;
  background: unset;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-second);
}

.btn-expand-trigger[aria-expanded="true"] .btn-expend{
  display: none;
}

.btn-expand-trigger[aria-expanded="true"] .material-symbols-outlined{
  transform: rotate(180deg);
}

.btn-expand-trigger[aria-expanded="false"] .btn-close{
  display: none;
}

/* -----------------------------------------------------------------------
 $page-web
-------------------------------------------------------------------------*/
.web{
  overflow-x: hidden;
}
@media (max-width: 768px){
  .web .row{
    row-gap: 40px;
  }
}



/* -------------------------------------------------------------------------
 $所有頁面類別選擇
---------------------------------------------------------------------------*/
.design.other-cat .img-box{
  height: auto;
}

.design.other-cat .img-box img{
  aspect-ratio: 4 / 3;
}
.design.other-cat .container{
  gap: 1.5rem;
}
@media (max-width: 768px){
  .design.other-cat .row{
    gap: 3rem;
  }
}


/* ------------------------------------------------------------------------
 $template content(based: graphic)
--------------------------------------------------------------------------*/
.detailed{
  position: relative;
  padding-top: 140px;
  z-index: 1;
  line-height: 1.6;
  h2,h4{font-weight: 600; margin: 0;}
  .content{
    display: flex;
    gap: 60px;
    }
  figure{
    margin: 0;
    img{
      object-fit: contain;
    }
  }
  figure:nth-last-child(1){
    margin: 0;
  }
  .col-md-5.sticky-sidebar{
    position: -webkit-sticky; /* 支援 Safari */
    position: sticky;
    top: 20px;
    height: fit-content;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    scrollbar-width: none;
  }
  @media (max-width: 768px){
    .col-md-5.sticky-sidebar{
      position: relative;
      top: 0;
      max-height: none;
      overflow: visible;
    }
  }
  .col-md-7{
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    flex-shrink: 1;
  }
  .btns{
    display: flex;
    justify-content: center;
    gap: 40px;
    .btn{width: fit-content;}
    @media (max-width: 768px){
      gap: 20px;
    }
  }

}

@media (max-width: 767px){
  .detailed{padding-top: 100px;}
  .detailed .content{
    flex-direction: column;
    .col-md-5{position: relative;}
  }
}

/* $template web----------------------------- */
.detailed.web{
  img{width: 100%; height: 100%; object-fit: contain;}
  h4{font-weight: 600;}
  .col-md-6{ min-width: 0; flex-shrink: 1; }
  .content{
      flex-direction: column;
      .col-12.web-info{
        display: flex;
        gap: 40px;
        @media (max-width: 767px){
          flex-wrap: wrap;
        }
      }
      .row.text-img-block{
        gap:40px;
        flex-wrap: nowrap;
        @media (max-width: 767px){
          gap: 28px;
          flex-wrap: wrap;
        }
      }
  }
  .work-item .img-msg img{
    height: 100%;
    object-fit: cover;
  }
  .img-web-full figure{
    margin-bottom: 40px;
  }
  .img-web-full figure:nth-last-child(1){
    margin-bottom: 0;
  }
}
.project-description .link{
  display: flex;
  gap: 8px;
  align-items: center;
  .icon{width: 24px;}
  a{font-weight: 600; color: var(--color-second);}
}
.project-description p{
  margin-bottom: 12px;
  line-height: 1.8;
}

/* 更改文字間距 */
.text-muted{
  display: flex;
  gap: 12px;
  line-height: 1.8;
  flex-direction: column;
}

/* 比較圖更改圖片設定 */
.uni-special-container .beer-slider img{
  object-fit: cover;
}

 /* ------------------------------------------------------
 $loader
-------------------------------------------------------*/
#loader{
  position: fixed;
  z-index: 200;
  height: 100vh;
  width: 100%;
  background: var(--color-main2);
  .cube-group{
    display: flex;
    justify-content: space-around;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 100px;
    .cube {
      flex-shrink: 0;
      width: calc(100px * 0.2);
      height: calc(100px * 0.2);
      animation: jump 2s ease-in-out infinite;
      .cube__inner {
        display: block;
        height: 100%;
        width: 100%;
        border-radius: 25%;
        background-color: var(--color-second);
        transform-origin: center bottom;
        animation: morph 2s ease-in-out infinite;
        transition: background-color 0.3s ease;
      }
    }
    .cube:nth-child(2) {
      animation-delay: calc(2s * -0.36);
    
      .cube__inner {
        animation-delay: calc(2s * -0.36); }
    }
    .cube:nth-child(3) {
      animation-delay: calc(2s * -0.2);
    
      .cube__inner {
        animation-delay: calc(2s * -0.2); }
    }
  }
}
@keyframes jump {
  0% { transform: translateY(0px); }

  30% {
    transform: translateY(0px);
    animation-timing-function: ease-out;
  }

  50% {
    transform: translateY(-200%);
    animation-timing-function: ease-in;
  }

  75% {
    transform: translateY(0px);
    animation-timing-function: ease-in;
  }
}
  
@keyframes morph {
  0% { transform: scaleY(1); }

  10% { transform: scaleY(1); }

  20%,
  25% {
    transform: scaleY(0.6) scaleX(1.3);
    animation-timing-function: ease-in-out;
  }

  30% {
    transform: scaleY(1.15) scaleX(0.9);
    animation-timing-function: ease-in-out;
  }

  40% { transform: scaleY(1); }

  70%,
  85%,
  100% { transform: scaleY(1); }

  75% { transform: scaleY(0.8) scaleX(1.2); }
}
 /* ------------------
 $fancy-box
-------------------*/
.fancybox__container{
  --fancybox-bg: var(--color-second2);
}