/* Paragraph */
.video_area{ max-width:800px; margin: 0 auto}
.youtube_video {  width:100%; margin:10px 0;  box-shadow:0 0 5px rgba(0,0,0,.2); padding:0; height:0; padding-bottom:56.25%; position:relative;}
.youtube_video iframe { width:100%; position:absolute; left:0; top:0; height:100% ; min-height:auto} 
.youtube_video video { width:100%; position:absolute; left:0; top:0; height:100% ; min-height:auto} 

.boxing .description{ padding:10px; margin:10px 0 ; background: rgba(255,255,255,.7); border-radius:16px; }
.Album ul{ list-style:none; padding:0px; margin:0}

.right_desc ul { margin:0 0 0 20px !important; padding:0; list-style:outside}
.right_desc ol { margin:0 0 0 20px !important; padding:0; }
.right_desc ul li, .right_desc ol li{ float: none !important;}

#Inner_Type_A ul, #Inner_Type_A2 ul{ 
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
#Inner_Type_A li, #Inner_Type_A2 li{ 
width:calc(100%) ; 
display: flex;
align-items: center;
text-align: center;
}

#Inner_Type_A li p, #Inner_Type_A2 li p{ text-align: center; }

#Inner_Type_B ul, #Inner_Type_B2 ul{ 
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
#Inner_Type_B li, #Inner_Type_B2 li{ 
width:calc(100%) ; 
display: flex;
align-items: center;
text-align: center;
}
	
#Inner_Type_B li p, #Inner_Type_B2 li p{ text-align: left; }


#Inner_Type_H ul, #Inner_Type_H2 ul{ 
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
#Inner_Type_H li, #Inner_Type_H2 li{ 
width:calc(100%) ; 
display: flex;
align-items: center;
text-align: center;
}
#Inner_Type_H li p, #Inner_Type_H2 li p{ text-align: center; }


#Inner_Type_C li .title_des{ float: left; width:33%}
#Inner_Type_C li .right_desc{ float: right; width:65%; text-align: left}
#Inner_Type_C2 li .title_des{ float: right; width:33%}
#Inner_Type_C2 li .right_desc{ float: left; width:65%; text-align: left}
#Inner_Type_C li p, #Inner_Type_C2 li p{ text-align: left; }

.download_area ul{ list-style:none; margin:0px 0; padding:0px;}
.download_area ul li{  }

.download_area ul li a{ background:url(../images/icon/icon_download.png) no-repeat left; background-position:3px 5px; padding:8px 0 3px 30px; line-height:19px; color:#555; background-size:23px 23px; display:block;transition: all 0.3s ease 0s;}
.download_area ul li a:hover{ background:url(../images/icon/icon_download.png) no-repeat left; background-position:3px 8px; color:#666;background-size:23px 23px}

#Inner_Type_D ul{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
#Inner_Type_D ul li{
width:calc(100%) ; 
display: flex;
align-items: center;
text-align: left;
}

#Inner_Type_E ul{
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 10px;
}

#Inner_Type_E ul li{
width:calc(100%) ; 
display: flex;
align-items: center;
text-align: left;
}

#Inner_Type_E ul li a{ background:url(../images/icon/icon_pdf_b.png) no-repeat left; background-position:3px 5px; padding:8px 0 6px 30px; line-height:19px; color:#555; background-size:23px 27px; display:block;}
#Inner_Type_E ul li a:hover{ -webkit-transform: scale(1.2);
	transform: scale(1.2); background:url(../images/icon/icon_pdf_b.png) no-repeat left; background-position:3px 8px; color:#666;background-size:23px 27px}

#Inner_Type_F{ list-style:none; margin:0px 0 ; padding:0px;}
#Inner_Type_F ul li{ float:left; width:100%; margin:0 0; text-align: left;}
#Inner_Type_F ul li iframe{ width:100%; height:650px; border:0; max-width: 100%}

.accordion { 
  border-bottom:1px solid #ddd !important; 
background: none;
  padding:1em;
  width: 100%;  border: none;
  text-align: left;
  outline: none;
  transition: 0.4s; color:var(--main-color);
  color: var(--main-color);
font-size: 1.2em; cursor: pointer;background: #f9f6f0
}

.node__content .active, .accordion:hover { color:  #d69253 }

.accordion:after {
  content: '\002B';
  color: #666;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.node__content .active:after {
  content: "\2212";  color: #d69253;
}

.node__content .panel {
  padding: 0  15px; margin:0px 0;
  background-color: #f9f6f0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.mm-columns {
  --col-width: var(--_col-width, 280px);
  --columns: var(--_columns, 5);
  --gap: var(--_gap, 20px);
  columns: var(--col-width) var(--columns);
  column-gap: var(--gap);
}

.mm-columns__item:not(:last-child) {
  margin-bottom: var(--gap);
}

.mm-columns__img {
  width: 100%;
  height: auto;
}

.wrap_square {
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* 預設四列布局 */
            gap: 2px; /* 圖片之間的間距 */
            width: 100%;
            margin: 0 auto;
        }

        .item_square {
            position: relative;
            overflow: hidden;
        }

        .item_square img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 確保圖片填滿容器，保持比例 */
            display: block;
        }

      

        /* 第一張圖片占兩列和兩行 */
        .item_square:first-child {
            grid-column: span 2;
            grid-row: span 2;
        }

        /* 響應式設計 */
        @media (max-width: 768px) {
            .wrap_square {
                grid-template-columns: repeat(2, 1fr); /* 平板：兩列布局 */
            }

            .item_square:first-child {
                grid-column: span 2;
                grid-row: span 1; /* 第一張圖片改為只占一行 */
            }
        }

        @media (max-width: 480px) {
            .wrap_square {
                grid-template-columns: 1fr; /* 手機：單列布局 */
            }

            .item_square:first-child {
                grid-column: span 1;
                grid-row: span 1; /* 第一張圖片占一行 */
            }
        }

.item_square .txt{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 15px;
	box-sizing: border-box;
	text-align: center;
	color: #fff;
	background-color: rgba(0,0,0,.6);
	display: flex;
	opacity: 0;
	flex-direction: column;
	justify-content: center;
	align-item_squares: center;
	transform: scale(0);
	transition: .5s;
}
.item_square:hover .txt{
	transform: scale(1);
	opacity: 1;
}

.item_square p{
	font-weight: 100;
	line-height: 1.7;
}

@media screen and (max-width: 576px){
	
#Inner_Type_A ul, #Inner_Type_A2 ul{ 
grid-template-columns: repeat(1, 1fr);
}
#Inner_Type_B ul, #Inner_Type_B2 ul{ 
grid-template-columns: repeat(2, 1fr);
}
#Inner_Type_H ul, #Inner_Type_H2 ul{ 
grid-template-columns: repeat(2, 1fr);
}
#Inner_Type_C li .title_des{  width:48%}
#Inner_Type_C li .right_desc{  width:48%;}
#Inner_Type_C2 li .title_des{  width:48%}
#Inner_Type_C2 li .right_desc{ width:48%;}

#Inner_Type_D ul{
grid-template-columns: repeat(2, 1fr);
}
	
}