/*  index
-------------------------------------------------
    - df-width
    - layout
    - top-banner
    - common
-------------------------------------------------*/





/*-----------------------------------------------
    df-width
-----------------------------------------------*/

.df-width {
    width: 100%;
    height: 100%;
    max-width: var(--width);
}

@media screen and (min-width: 1921px) {
    .df-width {
        max-width: 1800px;
    }

}

@media screen and (max-width: 1800px) {

    .df-width {
        width: 85%;
        min-width: 1024px;
    }
}



@media screen and (max-width: 768px) {
    .df-width {
        width: 100%;
        min-width: auto;
        padding-right: 5%;
        padding-left: 5%;
    }
}

/*  layout
-------------------------------------------------
    - html,body
    - main
    - top-banner
    - section
    - footer
-------------------------------------------------*/

html {
    background: var(--bg-color);
    scroll-behavior: smooth;
    overflow-x: hidden;

}




/*-----------------------------------------------
    main
-----------------------------------------------*/
main {
    overflow: hidden;
/*    max-width: 1920px;
    min-width: 1024px;*/
    margin: auto;

    animation: blur .8s ease-out 0s 1 both;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
}






@media screen and (min-width: 1921px) {
    main {
        overflow: initial;

    }

}


@media screen and (max-width: 768px) {

    main {
        min-width: auto;
    }




}


footer {
    aspect-ratio: 1920 / 600;
    background: var(--dark03);
}

@media screen and (max-width:768px) {
    .top-banner {
        aspect-ratio: 768 / 1400;
    }

    footer {
        aspect-ratio: 768 / 600;
    }

}



/*-----------------------------------------------
    common 通用
-----------------------------------------------*/
section,
section>*>*,
article,
article>* {
transition-property: transform, opacity;
transition-duration: .3s;
transition-timing-function: ease;
}


article {
    width: 100%;
    margin: 0 auto 9rem;

    z-index: 10;
}



/*@media screen and (max-width: 1440px) {
    article {
        margin: 0 auto 9rem;

    }

}*/

/*-----------------------------------------------
    h1
-----------------------------------------------*/


/*-----------------------------------------------
    eng 通用-橘色英文
-----------------------------------------------*/
/*橫排-預設*/

.eng_ {
    font-size: var(--fs-s3);
    font-family: var(--font-family-eng);
    color: var(--orange);
    letter-spacing: 0.1rem;
    font-style: italic;
    font-weight: 600;

    margin: 0rem 0 -0.6rem 0;
    display: block;
    overflow: hidden;
}



/*直排*/
.eng-vertical {
    margin: 0;
    display: block;
    overflow: hidden;

    position: absolute;
    text-orientation: initial;
    transform: translate(-120%,9%);
    left: 1.7rem;
    line-height: 1;
}



.eng-effect {
    line-height: 4;

    transition: all .3s ease;

}

.eng-effect.show {
    line-height: 2;
    transition: all .5s ease .1s;
}


@media screen and (max-width: 1440px) {

    .eng_ {
        font-size: var(--fs-s4);
    }
}


/*-----------------------------------------------
    通用-英文裝飾字
-----------------------------------------------*/

.eng-s {
    position: absolute;
    color: var(--black05);
    font-size: var(--fs-s5);
    font-weight: 600;
    text-align: right;
    text-transform: uppercase;
    line-height: 1.8;
    letter-spacing: 0.1em;


}



/*-----------------------------------------------
    dot 通用-斑駁字效果
-----------------------------------------------*/
.title_.dot:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    background: url(../images/dot.png) 0 / 586px repeat;
}

.title_ {
    position: relative;
    margin: 10% auto 3%;
    width: 95%;
}



@media screen and (max-width: 768px) {
.title_ {
  margin: 0% auto 4rem;
}


}

/*-----------------------------------------------
    通用-垂直文字
-----------------------------------------------*/
.vertical-text {
/* 1. 標準語法 (最優先) */
  writing-mode: vertical-rl;

  /* 2. 針對舊版 iOS / Safari 的前綴 */
  -webkit-writing-mode: vertical-rl;

  /* 3. 確保中文字體不會倒下，維持正立 */
  text-orientation: upright;

  display: inline-block;
}

.article-title.vertical-text {
    letter-spacing: 0.2rem;

}

/*-----------------------------------------------
    通用-大標架構01
-----------------------------------------------*/

.title_ ul,
.title_.df-title .heading-title {
    display: flex;
    color: var(--black03);
    width: 100%;
    margin: auto;
    max-height: 6.3rem;
    overflow: hidden;
}


.title_ ul li,
.df-title .heading-title span {
    position: relative;
}


.title_.df-title ul,
.title_.df-title .heading-title {
    justify-content: flex-end;
    width: 88%;
}

/*英文裝飾字*/
.df-title .eng-s {

    bottom: 0.5rem;
    left: 0.5rem;
    text-align: left;
}



@media screen and (max-width: 1280px) {
    .heading-title {

        line-height: 115px;

    }

}

@media screen and (max-width: 768px) {

.title_ ul li, .df-title .heading-title span {
  /*! width: inherit; */
  letter-spacing: 0.05rem;
}

.title_ ul {

  max-height: 5rem;
}
.title_.df-title .heading-title {

  max-height: 5.4rem;
}


.title_ ul,
.title_.df-title .heading-title {
    /*! overflow: initial; */
}
.df-title .eng-s {
  top: 0%;
  left: initial;
  text-align: right;
  width: 90%;
  right: 7%;
  bottom: initial;
}
.title_.df-title ul, .title_.df-title .heading-title {
  justify-content: flex-end;
  width: 100%;
  padding: 0 5% 0 0;
}
}


/*-----------------------------------------------
    通用-大標架構02
-----------------------------------------------*/

.title_.df-title2 ul li:nth-child(1) {
    text-align: right;
    flex: 8;

}

.title_.df-title2 ul li:nth-child(2) {
    flex: 1;
}


.title_.df-title2 ul li:nth-child(3) {
    text-align: left;
    flex: 8;

}

.title_.df-title2 .heading-title {
    position: absolute;
    margin: auto;
    width: 4rem;
    height: 16rem;
    background: #fff;
    left: 0;
    top: 0rem;
    right: 0;
    bottom: 0;

    writing-mode: vertical-rl;
    z-index: 10;
    font-size: var(--fs-h1);
    font-family: var(--font-family2);
    font-weight: 500;
    letter-spacing: 0.3rem;
    line-height: 3rem;
}

@media screen and (max-width: 1440px) {
    .title_.df-title2 ul li:nth-child(2) {
        flex: 1.3;
    }


}

@media screen and (max-width: 768px) {
.title_.df-title2 .heading-title {

  left: initial;
  right: 1.5rem;
      width: 3.5rem;
    line-height: 3rem;
  top: 1rem;
}
.title_.df-title2 ul li:nth-child(1) {
  text-align: left;
  flex: initial;
  width: auto;
}
 .title_.df-title2 ul li:nth-child(2) {
    display: none;
  }
  .title_.df-title2 ul li:nth-child(3) {
  text-align: left;
  flex: initial;
  width: auto;
}


.title_.df-title .heading-title {

  overflow: initial;


}
 .title_.df-title2 ul {
width: 95%;
margin: 0 0 0 0;
 }

}



/*-----------------------------------------------
    通用-大標文字
-----------------------------------------------*/

/*大標*/
.heading-title {
    font-family: var(--font-family2);
    font-size: var(--fs-3xl);
    text-align: right;
    font-weight: 500;
    overflow: hidden;
    line-height: 110px;
    transition: all .3s ease;
    position: relative;
    height: 6.5rem;
}


/*.heading-title.show {
    line-height: 110px;
    transition: all .3s ease;
}*/



@media screen and (max-width: 768px) {

.heading-title {
  font-size: var(--fs-2xl);
  font-weight: 500;

}

}


/*-----------------------------------------------
    通用-大標文字特效
-----------------------------------------------*/
/*.sl-effect {
    line-height: 200px;
}


.sl-effect.show {
    line-height: 110px;
}

*/
.sl-effect {
  transform: translateY(40px);
  /*! opacity: 0; */
}

.sl-effect.show {
  transform: translateY(0);
  opacity: 1;
}

@media screen and (max-width: 1280px) {

.sl-effect {
  transform: translateY(40px);
  opacity: 0;
}
}

/*-----------------------------------------------
    通用-句號。
-----------------------------------------------*/


/*add_end*/

.add_end{
    position: relative;
    display: block;
}

.end_ {
  position: absolute;
  right: initial;
  transform:translate(-34%,39%);
  width: 1rem;
  height: 1rem;
}

/*直式*/
.vertical-text .end_ ,.heading-title .end_ {
  position: absolute;
  transform: translate(90%,-75%);
  width: 1rem;
  height: 1rem;
}


@media screen and (max-width: 768px) {

.vertical-text .end_, .heading-title .end_ {
  transform: translate(35%,-35%);
  width: 1rem;
  height: 1rem;
}

}



/*-----------------------------------------------
    通用-大標的次標
-----------------------------------------------*/
.title-sub {
    font-family: var(--font-family2);
    font-size: var(--fs-h2);
    padding: 0 15px;
    font-weight: 500;

    line-height: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 0 .4em 0.4em 0;
    text-align: right;
    background: transparent;
    z-index: 10;
}

@media screen and (max-width: 768px) {

.df-title .heading-title span.title-sub{
    position: absolute;
    bottom: -74%;

    height: 4rem;
    width: 100%;
    line-height: 5.5rem;
    right: 1rem;
    padding: 0 1rem 0 0;
    background: var(--bg-color);
}
}

/*-----------------------------------------------
    city 通用-地名
-----------------------------------------------*/
.city {
    display: block;
    font-size: var(--fs-p);
    color: var(--black05);
    margin-right: 8px;
    font-weight: 600;
}





/*-----------------------------------------------
    通用-文章標題
-----------------------------------------------*/
.article-title {
    font-size: var(--fs-h2);
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    font-family: var(--font-family2);
    position: relative;

    /*! letter-spacing: 0.1rem; */
}

.article-title.article-title-effect {
    line-height: 6;
    transition: all .3s ease;
    overflow: hidden;
}

.article-title.article-title-effect.show {
    line-height: 1.3;
    /*transform: translate(-120%,20%);*/
    transition: all .5s ease .15s;
}



.article-title .inline {
    display: inline-block;
    padding: 0 0 1px 0;
    border-bottom: 1px dashed var(--black05);
    position: relative;
    line-height: 1.5;
    /*! overflow: hidden; */
    height: 2.5rem;
}

/*-----------------------------------------------
    location 通用-小圖示
-----------------------------------------------*/

.inline:before {
    content: '';
    position: absolute;
    left: -1.2rem;
    background: url(../images/icon-location.png) 0% 100% /1rem no-repeat;
    width: 1rem;
    height: 1rem;
    bottom: 0.4rem;
    padding: 0;
}



/*-----------------------------------------------
    通用-br
-----------------------------------------------*/
br {
    display: block;
}


@media screen and (max-width: 768px) {

    br {
        display: none;
    }

}



/*-----------------------------------------------
    通用- 大標英文
-----------------------------------------------*/

.title-eng {
    font-family: var(--font-family-eng2);
    font-size: var(--fs-5xl);
    font-weight: 600;
    overflow: hidden;
    transition: all .5s ease;
    /*! height: 5.8rem; */
    line-height: 110px;
    padding: 0.5rem 0 0 0;
}


@media screen and (max-width: 768px) {

.title-eng {
  font-size: var(--fs-3xl);
  font-weight: 600;
  max-height: 5.8rem;
  padding: 0;
}

}


/*-----------------------------------------------
    通用- 大圖-手機-滾動效果
-----------------------------------------------*/

@media screen and (max-width: 768px) {
.img-m-effect img.img-m,.img-m-effect:hover  img.img-m{
  width: 120% ;
  height: 100%;
  max-width: none;

  object-fit: cover;
  object-position: center;

  transform: scale(1) translateX(-11% );
}

}





/*-----------------------------------------------
    通用- 按鈕
-----------------------------------------------*/
.btn-more {
    height: auto;
    margin: 0.5rem 0 0.7rem;
    padding: 0 1rem;
    border-radius: 20px;
    border: 1px solid var(--orange);
    font-size: var(--fs-s1);
    color: var(--orange);
    background: var(--bg-color);
    /*! min-width: 6rem; */
}

.btn-more:hover {
    color: #fff;
    background: var(--orange);
}


.article-link {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  position: relative;
}


/*-----------------------------------------------
    通用- 大圓按鈕
-----------------------------------------------*/
.btn-more.df-btn2,
.btn-more.df-btn2-2 {
    position: absolute;

    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    background: var(--bg-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    outline: none;
    z-index: 10;
    border: 0.115rem solid var(--black04);
    box-shadow: 0 0 0 0.5rem var(--bg-color);
    overflow: hidden;
}

.btn-more.df-btn2 {
    right: -3%;
    top: -2rem;
}

.btn-more.df-btn2-2 {
    left: -8%;
    top: 18rem;
}

.btn-more.df-btn2:hover,
.btn-more.df-btn2-2:hover {
    color: inherit;
    background: var(--bg-color);

}





.btn-more.df-btn2 .btn-text,
.btn-more.df-btn2-2 .btn-text {
    text-decoration: none;
    color: var(--black02);
    font-size: var(--fs-s3);
    letter-spacing: 2px;
    position: absolute;
    top: 75%;
    border: 0;
    margin: auto;
}

.btn-more.df-btn2::before {
    content: "";
    width: 31%;
    height: 31%;
    border-right: 0.15rem solid var(--black05);
    border-bottom: 0.15rem solid var(--black05);

    transform: rotate(-45deg);
    position: absolute;
    top: 30%;
    pointer-events: none;
    left: 25%;
    transition: all .3s ease;

}




.btn-more.df-btn2-2::before {
    content: "";
    width: 31%;
    height: 31%;
    border-right: 0.15rem solid var(--black05);
    border-bottom: 0.15rem solid var(--black05);

    transform: rotate(135deg);
    position: absolute;
    top: 30%;
    pointer-events: none;
    left: 40%;
    transition: all .3s ease;

}



.btn-more.df-btn2:hover::before {
    transform: translateX(200%) rotate(-45deg);
    transition: all .3s ease;
}

.btn-more.df-btn2-2:hover::before {
    transform: translateX(-200%) rotate(135deg);
    transition: all .3s ease;
}


@media screen and (max-width: 768px) {
.btn-more.df-btn2, .btn-more.df-btn2-2 {
  width: 30vw;
  height: 30vw;

}
.btn-more.df-btn2 {
  right: -8%;
  top: -2rem;
}

.btn-more.df-btn2-2 {
  left: -9%;
  top: 10rem;
}
.btn-more.df-btn2:hover::before {
    transform: translateX(0%) rotate(-45deg);
}

}



/*-----------------------------------------------
    通用-單元文章-上下分
-----------------------------------------------*/
.text-group {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.2rem;
    position: relative;

}



/*-----------------------------------------------
    通用-單元文章-左分
-----------------------------------------------*/
.text-group-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

}


/*靠下  需搭配flex*/
.text-align-bottom {
    align-items: flex-end;
}



/*-----------------------------------------------
    通用-圖片-公司圖庫 尺寸
-----------------------------------------------*/

.photo_ {
    aspect-ratio: 4/3;
    /*! aspect-ratio: 1457/1000; */
    overflow: hidden;
    position: relative;
}

.photo_ img {
    width: 100%;
    height: 100%;
    transition: all 0.5s ease;

    object-position: center;
    object-fit: cover;
    transform: scale(1);
}

.photo_:hover img {
    transform: scale(1.07);
    transition: all 0.8s ease;
}

/*長形圖*/
.photo_.photo_v {
    /*aspect-ratio: 512/640;*/
    aspect-ratio: 3 / 4;
}




/*-----------------------------------------------
    通用-功能類
-----------------------------------------------*/

.hidden {
    display: none;
}


/*-----------------------------------------------
    通用-排版類
-----------------------------------------------*/



.text-align-right {
    text-align: right;
}

.margin-top {
    margin-top: var(--fs-p);
}

@media screen and (max-width: 768px) {
small {
  font-size: 0.65em;
}


}



/*-----------------------------------------------
    通用-重製swiper
-----------------------------------------------*/
article .swiper-slide {
    margin: 0;
}






/*-----------------------------------------------
    通用-飛機
-----------------------------------------------*/
.phane-line {
    width: 73%;
    height: 1px;
    background: var(--line-color);
    position: absolute;
    bottom: 0;
    left: 0;
}

.phane {
    width: 1.7rem;
    height: 1.7rem;
    position: absolute;
    bottom: -0.8rem;
    left: 73%;
    background: url(../images/plane.png) center 0 /100% no-repeat;
    z-index: 10;
}

.phane-line,
.phane {
    animation-fill-mode: forwards;
    will-change: width;
}

.phane-line.show {
    animation: line-move 1.2s cubic-bezier(0.230, 1.000, 0.320, 1.000) forwards;
}

.phane.show {
    animation: plane-move 1.2s cubic-bezier(0.230, 1.000, 0.320, 1.000) forwards;
}

@keyframes plane-move {
    0% {
        left: 73%;
    }

    100% {
        left: 95%;
    }
}

@keyframes line-move {
    0% {
        width: 73%;
    }

    100% {
        width: 94%;
    }
}


/*-----------------------------------------------
    fly
-----------------------------------------------*/
.snow01,
.snow03 {
    width: 102px;
    height: 68px;
    background: url(../images/snow01.png) center top / 102px no-repeat;
}

.snow02 {
    width: 51px;
    height: 34px;
    background: url(../images/snow02.png) center top / 51px no-repeat;
}



.snow {
    position: absolute;
    top: -109%;
    right: 10%;
    z-index: 10;
    width: 32%;
    height: 200%;
    overflow: hidden;
    pointer-events: none;
}

.snow01 {
    position: absolute;
    top: 67px;
    left: -100px;
    z-index: 10;
}

.snow02 {
    position: absolute;
    top: 95px;
    left: 0px;
    z-index: 10;
}

.snow03 {
    position: absolute;
    top: 70px;
    left: -10px;
    z-index: 1;
}

.snow01.show {
    animation: fly2 2.1s ease-out .2s 1 both;
}

.snow02.show {
    animation: fly 2s ease-out 0s 1 both;
}

.snow03.show {
    animation: fly2 2s ease-out .1s 1 both;
}



@keyframes fly {
    0% {
        opacity: 0;
        transform: translate3d(60%, 0%, 0);
    }

    30% {
        opacity: 1;
    }

    60% {
        opacity: 1;
        transform: translate3d(0%, -40%, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0%, -40%, 0);
    }
}


@keyframes fly2 {
    0% {
        opacity: 0;
        transform: translate3d(50%, 50%, 0);
    }

    10% {
        opacity: 1;
    }

    60% {
        opacity: 1;
        transform: translate3d(-50%, -30%, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(-50%, -30%, 0);
    }
}


@media screen and (max-width: 768px) {
.snow {
  top: -94%;
  right: 3%;
  width: 100%;
  height: 231%;
}

}


/*-----------------------------------------------
    button
-----------------------------------------------*/
button{
    transition: all .3s ease;
    cursor: pointer;
}