* {
  box-sizing: border-box;
}

:root {
  --color1: #ffffff;
  --color2: #1a1a1a;
  --color3: #e63946;
  --color4: #eeeeee;
  --color5: #999999;
  --color6: #fff8f0;
  --color7: #faf3e0;
}


/* ====================== Header  ======================*/

/* 1200 */
@media (max-width: 1199px) {
  .header-container {
    gap: 60px;
    padding: 0 30px;
  }
  
  .header-fixed {
    right: 30px;
  }
}

/* 1100 */
@media (max-width: 1100px) {
  .header-container {
    gap: 50px;
    padding: 0 24px;
  }
  
  header .left-header,
  header .right-header {
    width: auto;
    gap: 28px;
  }
  
  .right-header {
    /* margin-right: 15px; */
  }
  
  .header-fixed {
    right: 20px;
  }
  
  .cart-panel-wrapper {
    right: -20px;
    min-width: 320px;
  }

  .cart-items {
  max-height: 240px;
  overflow-y: auto;
  margin-bottom: 20px;
  padding-right: 8px;
}
}

/* 992 */
@media (max-width: 992px) {
  .header-container {
    gap: 30px;
    padding: 0 15px;
  }
  
  .header-fixed {
    right: 15px;
  }
}

/* 900 */
@media (max-width: 900px) {
  .header-container {
    gap: 20px;
    padding: 0 10px;
  }
  
  .header-fixed {
    right: 6px;
    gap: 4px;
  }
}

/* 820 */
@media screen and (max-width: 820px){
  .header-container {
    padding: 0 10px;
    justify-content: center;
    padding-inline-start: 20px;
  }
  .header-logo-wrapper {
    order: 1;
    flex-grow: 0;
    text-align: left;
  }
  .header-container .left-header{
    order: 2;
    display: none;
    flex-grow: 1;

  }
  .header-container .right-header{
    order: 2;
    display: none;
    flex-grow: 1;
  }

  .header-fixed{
    order: 3;
    display: flex;
    top: 50%; 
    transform: translateY(-50%);  
    right: 20px;
    gap: 18px;
    align-items: center;
  }

  .cart-icon,
  .user-icon{
    width: 24px;
  }
  .cart-icon .header-icon {
    scale: 1.3;
    content: url(../pics/cart-red.png);
  }

  .user-icon .header-icon {
    scale: 1.3;
    content: url(../pics/user-red.png);
  }

  .header-fixed .hamburgerWrapper{
    width: auto; 
    margin: 0;
    display: block;
    padding-top: 10px;
    scale: 0.65;
  }

  .menu ul{
    right: 0; 
    left: auto;
  }

  .hamburgerWrapper .menu {
    padding: 0;
    /* scale: 0.7; */
  }


  .cart-panel {
    width: 80vw; 
    max-width: 450px;
  }

  .cart-panel-wrapper.active .cart-panel {
    /* 根據需要調整位置，例如： */
    position: fixed;
    top: 80px; /* 根據你的 header 高度調整 */
    right: 20px;
  }

  .cart-panel::after {
    right: 88px;
  }
}

/*540*/
@media (max-width: 540px) {
  .header-logo-wrapper{
    scale: 0.9;
  }
  .header-fixed {
    position: absolute;
    right: 10px;
    top: 20px;
    scale: 0.9;
    padding-top: 0;
  }

  .header-fixed .hamburgerWrapper{
    scale: 0.65;
    padding-top: 10px;
  }
}

/* 440 */
@media screen and (max-width: 440px){

  .header-container {
    padding: 0 10px;
    justify-content: center;
    padding-inline-start: 20px;
    padding-right: 50px;
  }

  .header-logo-wrapper{
    scale: 1;
  }
  
  .header-fixed {
    position: absolute;
    right: 2;
    top: 22px;
    scale: 1;
    gap: 8px;
    
  }

  .header-fixed .hamburgerWrapper{
    scale: 0.65;
    padding-top: 6px;
  }

  .menu ul{
    width: 800px;
  }

}

/* ====================== Index Page  ======================*/
@media (max-width: 1200px){
  .wrapper-p3 ul {
    border-radius: 0;
  }
}


/* P1 */
/* 1100 */
@media (max-width: 1100px) {
  .hero-container-l {
    width: 800px;
  }
  .hero-container-r {
    width: 100%;
  }
}

/* 885 */
@media (max-width: 885px) {
  .wrapper-p1 .pr1 {
    font-size: 1.15em;
    left: 80px;
  }

  .wrapper-p1 .pr2 {
    font-size: 0.9em;
    left: 80px;
  }

  .wrapper-p1 .herop1button {
    top: 496px;
    left: 80px;
  }  
}

/* 820 */
@media (max-width: 820px) {

  header {
    max-width: 100vw !important;
    width: 100% !important;
  }

  .p5pic, 
  img {
    max-width: 100% !important;
  }

  .wrapper-p1 {
    display: block;
  }

  .hero-container-r img{
    display: none;
  }

  .hero-container-r {
    padding-left: 10px;
    padding-right: 10px;
    height: auto;
  }
   
  .hero-container-l {
    width: 90%;
    height: auto;
    aspect-ratio: 1 / 1; 
    margin: 20px auto 0;
    margin-right: 22px;
    margin: 0 auto;
  }

  #content li {
    outline: 1px solid var(--color1);
    outline-offset: -10px;
  }

  .aside-circle {
    margin-bottom: 16px;
  }
  .aside-circle-dots{
    display: flex;  
    gap: 16px;
    justify-content: center;
    scale: 0.9;
  }

  .hero-dot {
    width: 20px;
  }

  .hero-container-r {
    box-shadow: none;
    margin-top: -92px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    /* border: 1px solid red; */
  }

  .hero-title{
    display: block;
    position: static;
    font-size: 5em;
    width: 100%;
    margin-bottom: 32px;
  }

  .wrapper-p1 .pr1 {
    position: static;
    width: 100%;
    font-size: 1.4em;
    margin-bottom: 20px;
  }
  
  .wrapper-p1 .pr2 {
    position: static;
    width: 100%;
    font-size: 1.2em;
    margin-bottom: 30px;
  }

  .mobile-break{
    display: none;
  }

  .wrapper-p1 .pr1 .desktop-break {
  display: block;
  } 
  .wrapper-p1 .herop1button {
    position: static;
    margin: 0 auto;
  }

  #content {
    display: flex;
  }

  #content li {
  width: 100%;
  height: 100%;
  list-style: none;
  min-width: 100%;
  }
}

/* 440 */
@media (max-width: 440px) {
  .hero-container-r{
    padding-left: 12px;
  }
  .hero-title{
    font-size: 4.5em;
    margin-bottom: 2px;
  }

  .wrapper-p1 .pr1 {
    font-size: 1.1em;
    margin-bottom: 10px;
  }

  .wrapper-p1 .pr2 {
    font-size: 1em;
    margin-bottom: 70px;
  }

  .wrapper-p1 .herop1button{
    width: 176px;
  }

  .cart-panel {
    width: 80vw; 
    padding-bottom: 0px;
  }

  .cart-panel-wrapper.active .cart-panel {
    /* 根據需要調整位置，例如： */
    position: fixed;
    top: 70px; /* 根據你的 header 高度調整 */
    right: 0px;
  }

  .cart-total h4  {
    line-height: 1;
    font-size: 0.8em;
  }

  .goToCheckOut {
    width: 100px;
    line-height: 32px;
  }
  .cart-icon a {
    display: ;
  }
}
/* 393 */
@media screen and (max-width: 393px){
  
  .wrapper-p1 .pr1 {
    font-size: 1em;
  }

  .aside-circle-dots {
    scale: 0.8;
  }


}

/* P2 */
/* 1100 */
@media (max-width: 1100px) {
  .wrapper-p2 .p2-l .pr2,
  .wrapper-p2 .p2-l .pr3 {
  font-size: 1em;
  }

}

/* 900 */
@media (max-width: 900px) {
.wrapper-p2{
    gap: 60px;
}
  .wrapper-p2 .p2-l .pr2,
  .wrapper-p2 .p2-l .pr3 {
  font-size: 0.9em;
  }

.wrapper-p2 .wrapper-p2-text h2 {
  font-size: 4.5em;
}

 .wrapper-p2 .wrapper-p2-text
  .pr1{
    font-size: 1.5em;
    line-height: 32px;
    font-weight: normal;
    margin-bottom: 32px;
    color: var(--color2);
    text-shadow: 2px 2px 8px var(--color1), 4px 4px 8px rgba(0, 0, 0, 0.15);
  }

  .wrapper-p2 .wrapper-p2-text .pr2,
  .wrapper-p2 .wrapper-p2-text .pr3{
    font-size: 1.15em;
    font-weight: normal;
    margin-bottom: 20px;  
    text-shadow: 2px 2px 4px var(--color1), 4px 4px 8px rgba(0, 0, 0, 0.15);
  }
}

/* 820 */
@media (max-width: 820px) {
  .wrapper-p2-text{
    display: none;
  }

  .wrapper-p2 .p2-l {
   display: none;
  }

  .wrapper-p2 {
    flex-direction: column;
    justify-content: flex-start;
    padding: 0;
    margin-bottom: 100px;
    position: relative;
    min-height: 700px;
    width: 100%;
    max-width: 100%;
  }

  .wrapper-p2 .wrapper-p2-text-break {
    display: block;
    order: 2;
    width: calc(100% - 40px);
    max-width: 500px;
    position: absolute;
    left: 8%;
    top: 65%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
  }

  .wrapper-p2 .p2-r {
    order: 1;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    height: 600px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0;
    outline: 1px solid var(--color1);
    outline-offset: -10px;
  }

  .wrapper-p2 .p2-r .p2imgr {
    height: 100%;
    object-fit: cover;
    object-position: center 85%;
    border-radius: 0;
    outline: 1px solid var(--color1);
    outline-offset: -10px;
  }

  .wrapper-p2 .wrapper-p2-text-break h2 {
  font-weight: bold;
  font-size: 4.5em;
  line-height: 64px;
  color: var(--color3);
  margin-bottom: 40px;
  text-shadow: 2px 2px 4px var(--color1), 4px 4px 8px rgba(0, 0, 0, 0.15);
  }

  .wrapper-p2 .wrapper-p2-text-break 
  .pr1{
    font-size: 1.4em;
    line-height: 32px;
    font-weight: normal;
    margin-bottom: 32px;
    color: var(--color1);
    text-shadow: 2px 2px 8px var(--color1), 4px 4px 8px rgba(0, 0, 0, 0.15);
  }

  .wrapper-p2 .wrapper-p2-text-break .pr2,
  .wrapper-p2 .wrapper-p2-text-break .pr3{
    font-size: 1.15em;
    font-weight: normal;
    margin-bottom: 20px;  
    text-shadow: 2px 2px 8px var(--color1), 4px 4px 8px rgba(0, 0, 0, 0.15);
  }


  .wrapper-p2 .wrapper-p2-text-break .pr3 {
    margin-bottom: 200px;
  }

  .wrapper-p2 .herop2button {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px; 
    top: auto;
}

}

/* 440 */
@media (max-width: 440px) {
  .wrapper-p2 .p2-r {
    height: 550px;
  }


  .wrapper-p2 .p2-r .p2imgr {
    height: 100%; 
    
  }
}


/* P3 */

/* 820*/
@media (max-width: 820px){
.wrapper-p3 ul {
  border-radius: 0;
}
  
}


/* 440 */
@media (max-width: 440px){
.wrapper-p3 ul {
  flex-direction: column;
  align-items: center;
}

.wrapper-p3 li{
  width: 90%;
  height: 600px;
  margin-bottom: 100px;
}


.wrapper-p3 img {
  width: 100%;
  height: 600px;
  outline: 1px solid var(--color1);
  outline-offset: -10px;
}

.wrapper-p3 h2 {
  /* font-size: 2.5em; */
}

.wrapper-p3 .h3-1,
.h3-2,
.h3-3,
.h3-4 {
  font-size: 3em;
  left: 14px;
}

.wrapper-p3 .p-1,
.p-2,
.p-3,
.p-4 {
  font-size: 1.1em;
  left: 17px;
}
.wrapper-p3 .herop3button {
  bottom: -40px;
}

}

/* P4 */

/* 820*/
@media (max-width: 820px){
  .page4 .p5pic {
    scale: 0.95;
    animation: float-container 3s ease-in-out infinite;
  }

  @keyframes float-container {
  0% {
    transform: translateX(-55%);
  }
  50% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(-55%);
  }
  }

  .wrapperp4 {
    margin-bottom: 300px;
  }
}


/* 440 */
@media (max-width: 820px){
  .page4 .p5pic img {

  transform: translateX(-54%);

  }

  .wrapperp4{
    padding-top: 172px;
  }

  .wrapperp4 h3 {
  font-size: 2.2em;
  font-weight: bold;
  line-height: 48px;
  margin-bottom: 20px;
  color: var(--color3);
}

.wrapperp4 p {
  display: block;
  margin-bottom: 10px;
  font-size: 0.8em;
  line-height: 24px;
  font-weight: bold;
  color: var(--color5);
}

.wrapperp4 h4 {
  color: var(--color2);
  font-weight: bold;
  font-size: 1.2em;
  line-height: 32px;
  margin-bottom: 10px;
}

.wrapperp4 h5 {
  color: var(--color2);
  font-weight: bold;
  font-size: 0.8em;
  line-height: 24px;
}

}

/* ====================== About Page  ======================*/

/* 1100 */
@media (max-width: 1100px) {
  .about-wrapper-p1 {
    gap: 20px;
    padding: 20px; 
  }

  .about-p1-l {
    /* max-width: 500px;  */
    margin-right: 20px; 
  }

  .about-p1-r {
    width: 400px;
    height: 600px;
    margin-right: 10px;
  }

  .about-p1-r-2 {
    width: 200px;
  }

  .top-part {
    width: 90%;      
    margin: 0 auto; 
    gap: 50px;
  }

  .about-second-pic {
    width: 100%;      
    min-width: auto;   
    padding: 0 8px;

  }

  .about-wrapper-p2 .second-part {
    min-width: auto;   
  }

  .about-wrapper-p2 .second-part h2 {
    right: auto;
    left: 20%;        
    top: -122px; 
    font-size: 50px;
  }

  .about-p1-l .pr1 {
    font-size: 1em;
  }

  .about-p1-l .moment-logo-2{
    width: 32px;
  }

}

/* 920 */
@media (max-width: 920px) {


.about-p1-l .h2 {
  font-size: 3em;
}  
.about-p1-l .pr1 {
    font-size: 0.8em;
  }

.about-p1-l .moment-logo-2 {
  width: 28px;
}




/* .about-p1-l .pr1 br {
    display: none; 
} */
}

/* 820 */
@media (max-width: 820px) {

.about-wrapper {
  padding-left: 5%; 
  padding-right: 5%;
}

.about-wrapper-p1{
  flex-direction: column;
  justify-content: center;
  padding: 0;
  gap: 40px;
}
.about-p1-l {
  flex-direction: row;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.about-p1-l h2 {
  order: 1;
  margin-bottom: 40px;
}

.about-p1-l .moment-logo-2 {
  order: 2;
  margin: 0 auto;
  margin-bottom: 20px;
}

.about-p1-l .pr1 {
  order: 3;
  flex-basis: 100%;
  font-size: 1.02em;
  text-shadow: 2px 2px 8px var(--color1), 4px 4px 8px rgba(0, 0, 0, 0.2);
  }

.about-p1-l .moment-logo-2{
  width: 24px;
}

.about-p1-l .moment-logo-2 img {
  padding-top: 20px;
}

.about-p1-r {
    width: 100%;
    height: auto;
    margin: 0 auto; 
  }

  @keyframes float-container {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
  

  .about-p1-r-2 {
    width: 70%;
    margin: 0 auto; 
  }

  @keyframes float-container {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
    100% {
      transform: translateY(0);
    }
}
  
  .about-p1-r-container{
    gap: 10px;
    margin: 0 auto 60px;
  }

  .about-wrapper-p2 {
    gap: 200px; 
    height: auto; 
  }

  .top-part ul {
    gap: 30px;
    align-items: center; 
  }

  .about-second-pic {
    min-width: auto; 
    height: 180px; 
    margin-top: 50px; 
  }

  .second-part img {
    width: 100%; 
    height: 180px; 
  }

  .about-wrapper-p2 .second-part h2 {
    font-size: 3em;
    right: auto;
    left: 5%; 
    top: 50%;
    transform: translateY(-50%);
  }
}

/* 440 */

@media (max-width: 440px) {

.about-wrapper {
    padding-left: 5%; 
    padding-right: 5%;
}

.about-wrapper-p1{
  flex-direction: column;
  justify-content: center;
}
.about-p1-l {
  flex-direction: row;
  width: 100%;
  margin-right: 0;
  margin-top: 10px;
}
.about-p1-l h2 {
  order: 1;
  margin-bottom: 30px;
}

.about-p1-l .moment-logo-2 {
  order: 2;
  margin-bottom: 20px;
}

.about-p1-l .pr1 {
  order: 3;
  flex-basis: 100%;
  font-size: 1.1em;
  text-shadow: 2px 2px 8px var(--color1), 4px 4px 8px rgba(0, 0, 0, 0.2);
  }

.about-p1-l .moment-logo-2{
  width: 24px;
  margin-bottom: 6px;
}

.about-p1-r .about-p1-imgr1 {
  height: 380px;
  outline: 1px solid var(--color1);
  outline-offset: -10px;
}

.about-p1-r-2 .about-p1-imgr2 {
  outline: 1px solid var(--color1);
  outline-offset: -10px;
}

.about-p1-l .moment-logo-2 img {
  padding-top: 20px;
}

.top-part h2 {
  font-size: 2em;
}

.about-wrapper-p2 {
  gap: 80px;
}

.about-wrapper-p2 .second-part h2 {
  font-size: 40px;
  top: -8px;
}

.second-part img {
  height: 140px;
  outline: 1px solid var(--color1);
  outline-offset: -12px;
}

.top-part ul {
 gap: 4px;
}
}


/* ====================== Studios Page  ======================*/
/* 1100 */
@media (max-width: 1100px) {
  .studios-p1,
  .studios-p2,
  .studios-p3,
  .studios-p4 {
    gap: 32px;
    padding: 16px 20px;
  }

  .sliderBoard {
    max-width: 500px;
    min-width: 350px;
  }

  .sliderBoardImage {
    height: 650px;
  }

  .studios-right-part {
    max-width: 450px;
  }

  .studios-right-part h2 {
    font-size: 3.5em;
    line-height: 56px;
  }

  .studios-right-part .info-1,
  .studios-right-part .info-2 {
    font-size: 0.95em;
    max-width: 100%;
  }
}

/* 920px */
@media (max-width: 920px) {
  .studios-p1,
  .studios-p2,
  .studios-p3,
  .studios-p4 {
    gap: 24px;
    padding-top: 80px;
    margin-bottom: 80px;
  }

  .sliderBoard {
    max-width: 450px;
    min-width: 320px;
  }

  .sliderBoardImage {
    height: 550px;
  }

  .studios-right-part {
    max-width: 360px;
  }

  .studios-right-part h2 {
    font-size: 3em;
    line-height: 48px;
  }

  .studios-right-part .info-1,
  .studios-right-part .info-2 {
    font-size: 0.9em;
  }

  .prevButton,
  .nextButton {
    width: 36px;
    height: 36px;
  }

  .prevButton img,
  .nextButton img {
    width: 36px;
    height: 36px;
  }

  .dot-navigation {
    top: 6px;
  }
}

@media (max-width: 820px) {
  .studios-wrapper {
    padding-top: 60px;
  }

  .studios-p1,
  .studios-p2,
  .studios-p3,
  .studios-p4 {
    flex-direction: column;
    gap: 32px;
    padding: 16px 20px;
    align-items: center;
  }

  .studios-left-part {
    width: 100%;
    max-width: 100%;
    order: 2;
    display: flex;
    justify-content: center;
  }

  .sliderBoard {
    width: 100%;
    max-width: 600px;
    min-width: 0;
    margin: 0 8px;
    overflow: hidden;
  }

  .sliderBoardImage {
    /* height: 50px; */
    outline: 1px solid var(--color1);
    outline-offset: -10px;
  }

  .studios-right-part {
    width: 100%;
    max-width: 600px;
    gap: 20px;
    order: 3;
  }

  .dot-navigation {
    position: static;
    justify-content: center;
    margin: 20px 0 16px 10px;
    order: -1;
  }


  .dot {
    width: 44px;
    height: 44px;
  }

  .studios-right-part h2,
  .studios-2-right-part h2,
  .studios-3-right-part h2,
  .studios-4-right-part h2 {
    font-size: 4em;
    line-height: 48px;
  }

  .studios-right-part .info-1,
  .studios-right-part .info-2,
  .studios-2-right-part .info-1,
  .studios-2-right-part .info-2,
  .studios-3-right-part .info-1,
  .studios-3-right-part .info-2,
  .studios-4-right-part .info-2,
  .studios-p4 .info-1 {
    width: 100%;
    max-width: 100%;
    font-size: 0.95em;
  }

  .studios-right-part .map-1-container,
  .studios-right-part .map-2-container,
  .studios-right-part .map-3-container,
  .studios-right-part .map-4-container {
    width: 100%;
    max-width: 100%;
  }

  .studios-right-part .map-1,
  .studios-right-part .map-2,
  .studios-right-part .map-3,
  .studios-right-part .map-4 {
    width: 100%;
    height: 240px;
  }

  .notice-panel-wrapper {
    width: 90%;
    right: 5%;
  }

  .notice-panel {
    padding: 30px 20px;
  }

  .studios-right-part article {
    margin-bottom: 20px;
  }

  .studios-right-part h5 {
    align-self: center;
    font-size: 1.3em;
  }

  .studios-right-part .h5-2 {
    align-self: center;
    margin-bottom: 40px;
  }

  section .herop2button {
    align-self: center;
  }
}

/* 600px */
@media (max-width: 600px) {
  .studios-p1,
  .studios-p2,
  .studios-p3,
  .studios-p4 {
    padding: 16px 16px;
    gap: 28px;
  }

  .sliderBoardImage {
    height: 450px;
  }

  .studios-right-part h2 {
    font-size: 2.8em;
  }

  .studios-right-part .map-1,
  .studios-right-part .map-2,
  .studios-right-part .map-3,
  .studios-right-part .map-4 {
    height: 220px;
  }
}

@media (max-width: 440px) {
  .studios-wrapper {
    padding-top: 60px;
  }

  .studios-p1,
  .studios-p2,
  .studios-p3,
  .studios-p4 {
    padding: 16px 12px;
    gap: 24px;
  }

  .dot {
    width: 40px;
    height: 40px;
  }

  .sliderBoardImage {
    height: 360px;
  }
} 


/* ====================== Portfolio Page  ======================*/
/* 1200 */
@media (max-width: 1199px) {

  .portfolio-wrapper {
    max-width: 100%;
    padding: 0 20px ; 
    overflow-x: hidden; 
  }

  .content-scaler {
    transform: none; 
    width: 100%;
    margin-left: auto;
  }

  .portfolio-page1-wrapper {
    gap: 120px; 
    margin: 60px 0 30px;
  }
}


/* 1100 */
@media (max-width: 1100px) {

  .portfolio-page1-wrapper {
    gap: 100px; 
  }

}  

/* 992 */
@media (max-width: 992px) {
.portfolio-page1-r{
  width: 50%;;
}
.portfolio-page1-wrapper {
    gap: 80px; 
    align-items: center bottom;

  }
.portfolio-page1-r ul {
  margin: 0 auto;
  width: 100%;
}

.portfolio-page1-r ul li a{
   font-size: 1em;
 }
}


/* 820 */
@media (max-width: 820px) {
.about-wrapper {
    padding-left: 5%; 
    padding-right: 5%;
    height: auto; 
  }

.about-wrapper-p1{
    flex-direction: column;
    justify-content: center;
    padding: 0;
    gap: 40px;
    height: auto; 
  }

  .about-p1-l {
    display: block; 
    width: 100%;
    margin: 0 auto;
  }

  .commercialshooting-photo,
  .pre-wedding-photo,
  .year1-photo,
  .courses-photo,
  .popup-photo {
    width: 95%;
    height: auto;
    gap: 8px;
    margin-bottom: 40px;
  }

  .commercialshooting-photo h2,
  .pre-wedding-photo h2,
  .year1-photo h2,
  .courses-photo h2,
  .popup-photo h2 {
    font-size: 1.5em;
    top: -60px;
  }

  
  .photo-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
  }
  
  .photo-item:hover {
    transform: scale(1.02);
  }

  .portfolio-page1-r ul li:hover{
  flex-shrink: 0;
  /* flex-grow: 3; */
  /* transform: scale(1.1); */
  /* font-weight: bold; */
  transition: all 0.3s ease;
  }

  .portfolio-page1-r ul li:hover{
    flex-grow: 1;
    flex-shrink: 1;
  }

  .portfolio-page1-r ul li a {
    font-size: 0.85em;
    padding: 8px 5px;
  }
}


/* 440 */
@media (max-width: 440px) {
  
  .portfolio-page1-l h1{
    font-size: 2.8em;
    text-align: center;
  }

  .portfolio-page1-l h5{
    font-size: 1.15em;
    font-weight: bold;
    margin-bottom: 16px;
  }

  .portfolio-page1-r ul li a {
    font-size: 1em;
  }

  .portfolio-page1-wrapper{
    gap: 20px;
  }

  .portfolio-page1-r {
    width: 100%;
  }
  
  .portfolio-page1-wrapper{
    margin-top: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

    /* 4 columns */
  .commercialshooting-photo,
  .pre-wedding-photo,
  .year1-photo,
  .courses-photo,
  .popup-photo {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    gap: 6px;
    width: 98%;
  }
  
  .commercialshooting-photo h2,
  .pre-wedding-photo h2,
  .year1-photo h2,
  .courses-photo h2,
  .popup-photo h2 {
    font-size: 1.2em;
    top: -80px;
  }
  
  /* commercialshooting */
  .photo-1 {
    grid-column: 1 / 3;
    grid-row: 1 / 4;
  }
  
  .photo-2 {
    grid-column: 3 / 5;
    grid-row: 1 / 3;
  }
  
  .photo-3 {
    grid-column: 3 / 5;
    grid-row: 3 / 5;
  }
  
  .photo-4 {
    grid-column: 1 / 3;
    grid-row: 4 / 6;
  }
  
  .photo-5 {
    grid-column: 1 / 3;
    grid-row: 6 / 8;
  }
  
  .photo-6 {
    grid-column: 3 / 5;
    grid-row: 5 / 8;
  }
  
  /* prewedding */
  .pre-wedding-photo-1 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }
  
  .pre-wedding-photo-2 {
    grid-column: 3 / 5;
    grid-row: 1 / 4;
  }
  
  .pre-wedding-photo-3 {
    grid-column: 1 / 3;
    grid-row: 3 / 5;
  }
  
  .pre-wedding-photo-4 {
    grid-column: 1 / 3;
    grid-row: 5 / 7;
  }
  
  .pre-wedding-photo-5 {
    grid-column: 3 / 5;
    grid-row: 4 / 7;
  }
  
  /* year1*/
  .year1-photo-1 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }
  
  .year1-photo-2 {
    grid-column: 3 / 5;
    grid-row: 1 / 4;
  }
  
  .year1-photo-3 {
    grid-column: 1 / 3;
    grid-row: 3 / 5;
  }
  
  .year1-photo-4 {
    grid-column: 1 / 3;
    grid-row: 5 / 7;
  }
  
  .year1-photo-5 {
    grid-column: 3 / 5;
    grid-row: 4 / 6;
  }
  
  .year1-photo-6 {
    grid-column: 3 / 5;
    grid-row: 6 / 7;
  }


  /* courses */
  .courses-photo-1 {
    grid-column: 1 / 5;
    grid-row: 1 / 3;
  }
  
  .courses-photo-2 {
    grid-column: 1 / 3;
    grid-row: 3 / 5;
  }
  
  .courses-photo-3 {
    grid-column: 1 / 3;
    grid-row: 5 / 6;
  }
  
  .courses-photo-4 {
    grid-column: 3 / 5;
    grid-row: 3 / 6;
  }
  
  /* ===== P5 品牌快閃 ===== */
  .popup-photo-1 {
    grid-column: 1 / 3;
    grid-row: 1 / 4;
  }
  
  .popup-photo-2 {
    grid-column: 3 / 5;
    grid-row: 1 / 3;
  }
  
  .popup-photo-3 {
    grid-column: 3 / 5;
    grid-row: 3 / 5;
  }
  
  .popup-photo-4 {
    grid-column: 1 / 3;
    grid-row: 4 / 6;
  }
  
  .popup-photo-5 {
    grid-column: 3 / 5;
    grid-row: 5 / 6;
  }
  
  /* 按鈕調整 */
  .buttonorder {
    margin-top: 60px;
  }
  
  .herop2button {
    width: 150px;
    height: 48px;
    line-height: 54px;
    font-size: 1em;
  }
}

/* ====================== Reviews Page  ======================*/
/* 1200 */
@media (max-width: 1199px) {
  .reviews-wrapper {
    padding-top: 80px;
  }
  
  .reviews-p1 {
    gap: 60px;
    margin-top: 100px;
  }

  .reviews-p1 .reviews-top h1 {
    font-size: 3.5em;
  }

  .reviews-top-inside p {
    font-size: 1.1em;
  }

  .welcome ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .welcome ul li {
    padding: 30px 40px;
    gap: 30px;
  }

  .welcome-inside h2 {
    font-size: 3em;
  }

  .reviews-p2 {
    padding: 30px 20px;
  }

  .reviews-section {
    gap: 15px;
  }

  .reviews-section h3 {
    font-size: 1.3em;
    padding: 25px 30px;
  }

  .reviews-section span {
    height: 160px;
  }

  .reviews-p3 {
    padding: 50px 30px;
    width: calc(100% - 40px);
  }

  .reviews-p3 h3 {
    font-size: 2em;
  }

  .reviews-p3 p {
    font-size: 1.1em;
  }
}



/* 820 */
@media (max-width: 820px) {

  .reviews-wrapper {
    padding-top: 40px;
  }


/* P1 Part */
  .reviews-p1 {
    gap: 50px !important;
    margin-top: 80px !important;
    margin-bottom: 40px !important;
    padding: 0 15px !important;
  }

  .reviews-p1 .reviews-top h1 {
    font-size: 2.5em !important;
  }

  .reviews-top-inside p {
    font-size: 1em 
  }

  .welcome ul {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
  }

  .welcome ul li {
    padding: 25px 20px !important;
    gap: 20px ;
  }

  .welcome ul li img {
    max-width: 32px !important;
  }

  .welcome-inside h2 {
    font-size: 2.5em !important;
  }

  .welcome-inside p {
    font-size: 0.9em !important;
  }
  
  .reviews-p2 {
    padding: 20px 15px !important;
  }

  .reviews-section {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
    display: grid !important;
  }

  .reviews-section h3,
  .reviews-section span {
    grid-column: 1 / 2 !important;
    border-radius: 20px !important;
    margin: 0 !important;
  }

  .reviews-section h3 {
    font-size: 1.1em !important;
    padding: 20px 25px !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }

  .reviews-section span {
    height: 240px !important;
    grid-row: auto !important;
  }

  /* P3 Part */
  .reviews-p3 {
    padding: 40px 20px !important;
    width: calc(100% - 30px) !important;
    gap: 15px !important;
  }

  .reviews-p3 .talkicon {
    max-width: 32px !important;
  }

  .reviews-p3 h3 {
    font-size: 1.8em !important;
  }

  .reviews-p3 p {
    font-size: 1em !important;
  }

  .reviews-p3 a .reviewsbutton {
    max-width: 160px !important;
  }
}


/* 440 */
@media (max-width: 440px) {
/* P1 Part */
  .reviews-p1 {
    gap: 40px;
    margin-top: 60px;
    padding: 0 10px;
  }

  .reviews-p1 .reviews-top h1 {
    font-size: 2em;
  }

  .reviews-top {
    gap: 8px;
  }

  .reviews-top-inside p {
    font-size: 1.2em;
  }

  /* 數據區改為單欄橫式 */
  .welcome ul {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .welcome ul li {
    padding: 20px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }

  .welcome ul li img {
    max-width: 28px;
  }

  .welcome-inside {
    align-items: flex-start;
    gap: 4px;
  }

  .welcome-inside h2 {
    font-size: 2em;
  }

  .welcome-inside p {
    font-size: 0.85em;
  }

  /* P2 Part */
  .reviews-p2 {
    padding: 20px 10px;
  }

  .reviews-section {
    gap: 12px;
  }

  .reviews-section h3 {
    font-size: 1em;
    padding: 18px 20px;
    line-height: 1.5;
  }

  .reviews-section span {
    height: 200px;
  }

  /* P3 Part */
  .reviews-p3 {
    padding: 30px 15px;
    width: calc(100% - 20px);
    gap: 12px;
  }

  .reviews-p3 .talkicon {
    max-width: 28px;
  }

  .reviews-p3 h3 {
    font-size: 1.5em;
  }

  .reviews-p3 p {
    font-size: 0.9em;
  }

  .reviews-p3 a .reviewsbutton {
    max-width: 140px;
  }
}


/* ====================== Rules Page  ======================*/
/* 1000 */
@media (max-width: 1000px) {
  .rules-page-1-wrapper > h2 {
    font-size: 3em;
    line-height: 3.8em;
  }

  .procedure ul li {
    scale: 0.9;
    gap: 20px;
  }
}


/* 820 */
@media (max-width: 820px) {
  .rules-page-1-wrapper > h2 {
    font-size: 2.8em;
    line-height: 3.5em;
  }

  .procedure ul {
    flex-wrap: wrap;
    max-width: 100%;
    gap: 30px 20px;
    padding: 0 20px;
  }

  .procedure ul li {
    flex: 0 1 calc(50% - 10px);
    scale: 0.85;
    gap: 15px;
  }

  .procedure ul li svg {
    width: 60px;
    height: 60px;
  }

  .procedure h3 {
    font-size: 1.15em;
  }

  /* P2 注意事項區塊 */
  .rules-page-2 h1 {
    margin-top: 100px;
    font-size: 2.5em;
  }

  .rules-page-2-wrapper {
    flex-direction: column;
    height: auto;
    gap: 30px;
    padding: 30px 20px;
  }

  .rules-page-2-wrapper-l {
    width: 100%;
    max-width: 500px;
  }

  .rules-page-2-wrapper-l h4 {
    width: 100%;
    font-size: 1.2em;
  }

  .rules-page-2-wrapper-r {
    width: 90%;
    max-width: 500px;
    height: auto;
    min-height: 400px;
    padding: 30px 25px;
  }

  .rules-page-2-wrapper-r .rules-text .food,
  .rules-page-2-wrapper-r .rules-text .pet,
  .rules-page-2-wrapper-r .rules-text .book,
  .rules-page-2-wrapper-r .rules-text .space,
  .rules-page-2-wrapper-r .rules-text .number {
    font-size: 1.3em;
    line-height: 1.8em;
  }

  .rules-page-2-wrapper-r .rules-text .change {
    font-size: 1.15em;
    line-height: 1.8em;
  }

}


/* 440 */
@media (max-width: 440px) {
  .rules-page-1-wrapper > h2 {
    font-size: 2.2em;
    line-height: 3em;
  }

  .procedure ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px 15px;
    max-width: 100%;
    padding: 0 15px;
  }

  .procedure ul li:nth-child(7) {
    grid-column: 1 / -1;
    justify-self: center;
  }

  .procedure ul li {
    scale: 1;
    gap: 12px;
  }

  .procedure ul li svg {
    width: 50px;
    height: 50px;
  }

  .procedure h3 {
    font-size: 1em;
  }

  .rules-page-2 h1 {
    margin-top: 60px;
    font-size: 2em;
    margin-bottom: 30px;
  }

  .rules-page-2-wrapper {
    flex-direction: column;
    height: auto;
    padding: 0 15px 30px;
    gap: 20px;
  }

  .rules-page-2-wrapper-l,
  .rules-page-2-wrapper-r {
    display: none;
  }

  .rules-page-2-wrapper::after {
    content: '';
    display: block;
  }

}

@media (max-width: 440px) {
}



/* ====================== Goods Page  ======================*/
/* 1100 */
@media (max-width: 1100px) {
  .goods-items {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  
  .items-container {
    padding: 18px;
    gap: 10px;
  }
  
  .goods-items h4 {
    font-size: 1.05em;
  }
  
  .goods-items p {
    font-size: 0.95em;
  }
  
  .cart-button {
    gap: 10px;
  }
  
  .addToCart,
  .goToCheckout {
    font-size: 0.95em;
    height: 38px;
    line-height: 38px;
  }
}

/* 820 */
@media (max-width: 820px) {

  .goods-wrapper {
    padding: 0 16px;
  }
  
  .goods-items {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding-bottom: 30px;
  }
  
  .items-container {
    padding: 12px;
    gap: 8px;
    grid-template-rows: auto auto auto auto;
  }
  
  .goods-item {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    max-height: 350px;
    object-fit: cover;
  }
  
  .goods-items h4 {
    font-size: 0.9em;
    line-height: 1.3;
  }
  
  .goods-items p {
    font-size: 0.85em;
  }

  .cart-button {
    gap: 6px;
    height: auto;
  }
  
  .cart-button a {
    flex: 1;
    max-width: 100%;
  }
  
  .addToCart,
  .goToCheckout {
    width: 100%;
    font-size: 0.8em;
    height: 32px;
    line-height: 32px;
  }
  
  .top-banner {
    height: 200px;
    margin-bottom: 24px;
  }
  
  .select-container-container {
    /* padding: 0 16px; */

  }
  
  .select-container {
    width: 180px;
    max-width: 100%;
    margin: 0 0 24px 0;
  }
}


/* 440 */
@media (max-width: 440px) {
  .top-banner img{
    object-position: center;
  }

  .goods-wrapper {
    padding: 0 12px;
  }
  
  .goods-items {
    /* 強制 1 欄 */
    grid-template-columns: 1fr;
    gap: 16px;
    padding-bottom: 30px;
  }
  
  .items-container {
    padding: 14px;
    gap: 10px;
    width: 100%;
    max-width: 100%;
  }
  
  .goods-item {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
  }
  
  .goods-items h4 {
    font-size: 1em;
    line-height: 1.4;
  }
  
  .goods-items p {
    font-size: 0.95em;
  }
  
  .cart-button {
    gap: 8px;
    height: auto;
  }
  
  .addToCart,
  .goToCheckout {
    width: 100%;
    font-size: 0.9em;
    height: 36px;
    line-height: 36px;
  }
  
  .top-banner {
    height: 160px;
    margin-bottom: 20px;
  }
  
  .select-container-container {
    /* padding: 0 12px; */
    justify-content: flex-start;
  }
  
  .select-container {
    /* flex-basis: 1; */
    width: 168px;
    margin: 0 0 20px 0;
  }
  
  .select-display {
    padding: 10px 12px;
  }
  
  .selected-text {
    font-size: 0.95em;
  }
  
  .select-list li a {
    padding: 10px 16px;
    font-size: 0.95em;
  }
}



/* ====================== Footer  ======================*/

@media (max-width: 992px) {
  .wrapper-footer .part-l{
    scale: 0.8;
  }
  .wrapper-footer .part-r{
    scale: 0.8;
}
}


@media (max-width: 820px) {
  .hero-footer {
    /* padding: 22px 0; */
  }

  .wrapper-footer {
    flex-direction: column;
    /* align-items: center; */
    width: 100%;
    padding: 0 5%;
  }

  .wrapper-footer .part-r {
    flex-direction: column;
    gap: 12px;
  }

  .wrapper-footer .footer-ig ul{
    scale: 0.95;
    gap: 18px;
  }

  .footer-copyright p {
    font-size: 0.8em;
  }

  .up-button a img {
    width: 28px;
  }

  .up-button {
  position: absolute;
  right: 12px;
  bottom: 12px;
  position: fixed;
  width: 32px;
  }
}
 
@media (max-width: 440px) {  
  
  .up-button a img {
    width: 32px;
  }
  .up-button {
    position: absolute;
    right: 20px;
    bottom: 16px;
    position: fixed;
    width: 32px;
  }
}