/*遊樂園-東京雙迪士尼+環球*/
#section-introduce{
    width: 100%;
    position: relative;
    font-family: 'Noto Serif TC','Noto Serif SC',serif;
    padding: 150px;
    
   & div[data-decorate="1"]{
      width: 20%;
      max-width: 86px;
      position: absolute;
      aspect-ratio: 1/1;
      top: 0;
      left: 0;
      background-image: url(https://www.tristar.com.tw/active/up/image/files/project_366/decorate_2.webp);
      background-size: cover;
    }
    & div[data-decorate="2"]{
      width: 20%;
      max-width: 86px;
      position: absolute;
      aspect-ratio: 1/1;
      top: 0;
      right: 0;
      background-image: url(https://www.tristar.com.tw/active/up/image/files/project_366/decorate_2.webp);
      background-size: cover;
      transform:rotate(90deg);
    }
    & div[data-decorate="3"]{
      width: 20%;
      max-width: 86px;
      position: absolute;
      aspect-ratio: 1/1;
      bottom: 0;
      left: 0;
      background-image: url(https://www.tristar.com.tw/active/up/image/files/project_366/decorate_2.webp);
      background-size: cover;
      transform:rotate(270deg);
    }
    & div[data-decorate="4"]{
      width: 20%;
      max-width: 86px;
      position: absolute;
      aspect-ratio: 1/1;
      bottom: 0;
      right: 0;
      background-image: url(https://www.tristar.com.tw/active/up/image/files/project_366/decorate_2.webp);
      background-size: cover;
      transform:rotate(180deg);
    }
}
  
.service-info-right{
  position: absolute;
  background-color: hsl(0deg 0% 100% / 90%);
  border-top: 4px solid #d9b67a;
  border-bottom: 4px solid #d9b67a;
  left: calc(0% + -2rem);
  top: 50%;
  min-width: 300px;
  padding: 25px 35px;
  transform: translateY(-50%);
  z-index: 3;
  line-height: 2rem;
  letter-spacing: 0.5px;
  color: #4d4d4d;
  
  h4{
    text-align: center;
    color: #3d6795;
    font-family: 'Noto Serif TC','Noto Serif SC',serif;
  }

  p{
    margin-bottom: 0;
  }
}

.service-info-left{
  position: absolute;
  background-color: hsl(0deg 0% 100% / 90%);
  border-top: 4px solid #d9b67a;
  border-bottom: 4px solid #d9b67a;
  right: calc(0% + -2rem);
  top: 50%;
  min-width: 300px;
  padding: 25px 35px;
  transform: translateY(-50%);
  z-index: 3;
  line-height: 2rem;
  letter-spacing: 0.5px;
  color: #4d4d4d;
  
  h4{
    text-align: center;
    color: #3d6795;
    font-family: 'Noto Serif TC','Noto Serif SC',serif;
  }

  p{
    margin-bottom: 0;
  }
}

#section1-background{
    width: 100%;
    aspect-ratio: 1140 / 1152;
    background-image: url(https://www.tristar.com.tw/active/up/image/files/project_384/background_01.webp);
    background-size: 100% AUTO;
    background-repeat: no-repeat;
}

#section2-background{
    width: 100%;
    aspect-ratio: 1140 / 884;
    background-image: url(https://www.tristar.com.tw/active/up/image/files/project_384/background_02.webp);
    background-size: 100% AUTO;
    background-repeat: no-repeat;
}

#section3-background{
    width: 100%;
    aspect-ratio: 1140 / 849;
    background-image: url(https://www.tristar.com.tw/active/up/image/files/project_384/background_03.webp);
    background-size: 100% AUTO;
    background-repeat: no-repeat;
}

.t1block{
  height: 125px;
}

/**pc通用設定**/
lite-youtube{
    aspect-ratio: 1.222 / 1;
}
lite-youtube > iframe{
    height:100% !important;
    top: 50% !important;
    transform: translateY(-50%);
}

.mobile-show{display: none;}

.mobile-fullsize{
    width: 100%;
}

.xs-overhiden{
    overflow: hidden;
}

/***rwd***/
@media (max-width: 767.95px) {
  #section1-background,#section2-background,#section3-background{
    background-image: none;
  }

/**通用設定**/
lite-youtube{
    aspect-ratio: 1.66666 / 1;
}

.mobile-fullsize{
    width: 100vw !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
}

.mobile-hide{
    display: none !important;
}

.mobile-show{
    display: block;
}

.xs-d-flex{display: flex;}

.xs-overhiden{
    overflow: hidden;
}
.xs-ratio-76{
    aspect-ratio: 7/6 !important;
}

.xs-ratio-64{
    aspect-ratio: 6/4 !important;
}

.xs-ratio-76 img{
    height: 100% !important;
    object-fit: cover;
}
.xs-top-0{top: 0;}
.xs-right-0{right: 0;}
.xs-bottom-0{bottom: 0;}
.xs-left-0{left: 0;}

.xs-h100{height: 100% !important;}
.xs-wauto{ width: auto !important;}
.xs-w50{  width: 50% !important;}
.xs-w75{  width: 75% !important;}
.xs-w80{  width: 80% !important;}
.xs-w90{  width: 90% !important;}
.xs-w95{  width: 95% !important;}
.xs-w100{  width: 100% !important;}

.xs-ml-2o5{margin-left:2.5%;}
.xs-ml-5{margin-left:5%;}
.xs-ml-10{margin-left:10%;}
.xs-ml-20{margin-left:20%;}
.xs-mr-2o5{margin-right:2.5%;}
.xs-mr-5{margin-right:5%;}
.xs-mr-10{margin-right:10%;}
.xs-mr-20{margin-right:20%;}

.xs-border-radius{  border-radius: 35px !important;  overflow: hidden;}

.xs-border-radius-1{border-top-left-radius: 35px !important;}
.xs-border-radius-2{border-top-right-radius: 35px !important;}
.xs-border-radius-3{border-bottom-right-radius: 35px !important;}
.xs-border-radius-4{border-bottom-right-radius: 35px !important;}

.xs-m-0{  margin:0 !important;}

/*****客製區*****/
.service-info-right{ 
    position: relative;
    width: 80%;
    left: 50%;
    top: -2rem;
    transform: translateX(-50%);
} 

}



@media (min-width: 768px) {
  lite-youtube{
      aspect-ratio: 1.58888 / 1;
  }

  .md-w50{
      width: 50% !important;
  }

}



@media (min-width: 1024px) {
lite-youtube{
    aspect-ratio: 1.6 / 1;
}
}

@media (min-width: 1200px) {
lite-youtube{
    aspect-ratio: 1.2/ 1;
}

}