/* ifec 2025 css file*/
	
	body{
		  margin: 0;
	}

	.hero-image {
	background-image:
	url('https://www.chromaate.com/Upload/images/IFEC/IFEC-banner-1920x700px-Chroma-V2.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    aspect-ratio: 1920 / 700;
    height: auto; /* 配合 aspect-ratio 控制比例 */
    position: relative;
    overflow: hidden;
    }
    
    .hero-text {
    font-weight: 800;
    font-size:50px;
    color: #ffffff;
    margin:10px;
	top:35%;
	left:15%;
    right:15%;
    -ms-transform: translate( -50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    }

    .hero-sub{
    color:#ffffff;
    font-size:2rem;
    font-weight:500;
    line-height:35px;
    text-align: justify;
    padding-top:1rem;
    padding-bottom:1rem;
    margin-top: 30px;
	left:15%;
    }
    
	.header {
	  background-color: #f1f1f1;
	}

	#navbar {
	  position: sticky;
	  top: 0;
	  background-color: #333;
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: center;
	  align-items: center;
	  z-index: 999;
	  padding: 8px 0;
	  max-width: 100%;
	  overflow-x: hidden;
	}

	#navbar a {
	  display: block;
	  color: #f2f2f2;
	  text-align: center;
	  padding: 12px 16px;
	  text-decoration: none;
	  font-size: 17px;
	  transition: color 0.3s;
	  white-space: nowrap;
	  flex-shrink: 0;
	}

	#navbar a span {
	  display: inline-block;
	  padding: 6px 12px;
	  transition: background-color 0.3s, color 0.3s;
	}

	#navbar a:hover span {
	  background-color: #ddd;
	  color: black;
	}

	#navbar a.active span {
	  background-color: #0a5596;
	  color: white;
	}

	.intro
		{	
	   background: radial-gradient(100% 58.8% at 0% 100%, #0A5596 0%, rgba(0, 0, 0, 0) 100%) , radial-gradient(100% 46.38% at 100% 41.74%, #0A5596 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(145deg, #0A5596 0%, #0A5596 15%, #000000 55%, #000000 100%);
	}
	
    .slide {
      position: relative;
      transform-style: inherit;
    }
    
    .inner-con{
    padding-left:10%;
    padding-right:10%;
    padding-bottom:5%;
    }

    .inner-banner{
    padding-bottom:15%;
	padding-top: 15%;
    }

	.footer-img{
	background-image: url('https://www.chromaate.com/Upload/images/IFEC/IFEC-banner-1920x500px-Chroma-TechForum-topic-V2.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position:relative;
	overflow: hidden;
	width: 100%;
    aspect-ratio: 1920 / 500;
    height: auto;
	}	

	.pro_sec_left{
	float: left;
	width: 95%;
	}

	.pro_sec_right{
	float: right;
	width: 95%;
	}

	.content_sec{
	padding-top:50px;
	padding-bottom:50px;
	}

	h1{
	font-size:30px;
	}

    h3{
    color:#ffffff;
    font-weight:500;
    font-size: 20px;
    text-align: left;
    line-height: 45px;
    padding-bottom: .5rem;
    padding-top: .5rem;
    }
    
    h2{
    color:#ffffff;
    font-weight:600;
    font-size:35px;
    text-align: left;
    padding-bottom:.5rem;
    }

    .content_title{
    color:#ffffff;
    font-size:22px;
    font-weight:600;
    line-height:35px;
    padding-top:.5rem;
    padding-bottom:.5rem;

    }

	.accintro {
	  cursor: pointer;  
	outline: none;
	  transition: 0.4s;
	}
	 .accintro:hover {
	  background-color: #ccc; 
	}

	.acc_p {
	  padding: 0 18px;
	  display: none;
	  background-color: white;
	  overflow: hidden;
	  transition: max-height 0.2s ease-out;
	}
    
    .content_p{
    color:#ffffff;
    font-size:20px;
    font-weight:500;
    line-height:35px;
    text-align: justify;
    padding-top:1rem;
    padding-bottom:1rem;
    margin-top: 50px;
    }

    .content_ul{
    color:#ffffff;
    font-size:20px;
    font-weight:500;
    line-height:35px;
    text-align: justify;
    margin-top: 50px;
    }

    .map_title{
    color:#ffffff;
    font-size:22px;
    font-weight:600;
    line-height:35px; 
    padding-top:.5rem;
    padding-bottom:.5rem;
    }

    .map_p{
	margin-top: 3rem;
    }

    .p_m{
	font-size:20px;
	}
    
    .last{
    margin-top:20px;
    }
    
    .fp{
    text-align:center; 
    font-size:14px;
    padding:0;
    margin:0;
    }
    
    .overview{
    background-color: #0a5596;
    padding-top:60px;
    padding-bottom:60px;
    height:700px;
    }
    
    .inner-top{
    float: right;
    width: 95%
    }
    
	.inner-bottom{
    padding-left:10%;
    padding-right:10%;
	padding-top:2%;
	padding-bottom:2%;
	}

    .fot_btn{
    box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.5);
    }
  
    .img{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 20px; 
    margin-bottom: 30px;
    }

    .bg-white a{
    color:#fff;
    }
    
    .bg-white a:hover{
    color:#00a0e6;
    }
    
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    
    .vi{
    padding-top: 2rem;
    padding-bottom:2rem;
    }
    
    .wrapper {
    padding: 0;
    }
    
    .row{
    padding:0;
    margin:0;
	border-bottom:0px;
    }

    #arti {
	padding-top:80px;
	padding-bottom:80px;
	}

	.ccus_title{
	border-bottom: 1px;
	padding-bottom:0.3rem;
	margin-bottom: 1.5rem;}

	.ccus_title span{
	position: relative;
	padding: 0 10px;
	}

	.ccus_title span::before{
	position: absolute;
	content:'';
	width: 100%;
	height: 3px;
	background-image: linear-gradient(to right, #ffffff 0%, #00a0e6 40%, #75f88d 85% , #ffffff 100%);bottom: -8px;left: 0;
	}

	.col-sm-3{
	padding:10px;
	}

	.col-sm-4{
	padding:10px;
	}

	.sp{
	  display: block;
	  margin-left: auto;
	  margin-right: auto;
	  width: 50%;
	}

	.block-heading {
		border-left: 5px solid #fcac33;
		padding-left: 10px;
		margin-top: 20px;
		margin-bottom: 20px;
		font-size: 30px;
		color:#ffffff;
	}

	.block-heading2 {
		border-left: 5px solid #75f88d;
		padding-left: 10px;
		margin-top: 50px;
		font-size: 30px;
		color:#ffffff;
	}

	.block-heading3 {
		border-left: 5px solid #00A0E6;
		padding-left: 10px;
		margin-top: 50px;
		font-size: 30px;
		color:#ffffff;
	}


	.chroma-logo {
		width: 60%;    /* 預設桌機版 */
		padding: 20px;
		margin-left: 30px;
		max-width: 300px;
		height: auto;
		display: block;
		visibility: hidden;
	}

    .speaker-card {
        text-align: center;
        margin-bottom: 30px;
    }
	
    .speaker-card img {
        width: 200px;
        height: 150px;
        object-fit: cover;
        border-radius: 50%;
        margin-bottom: 15px;
    }
    .speaker-name {
        font-size: 1.3rem;
        font-weight: bold;
		color: white;
    }
        
	.speaker-title {
        color: white;
        font-weight: 600;
        margin-bottom: 5px;
    }
	
    .speaker-org {
        color: white;
        font-size: 0.95rem;
	}

   
	@media only screen and (min-width: 768px) and (max-width: 991px) {
		#slide1 {
		background-position: center;
		}

		.inner-con{
		padding-left:0;
		padding-right:0;
		}

		h1{
		font-size:20px;
		}
    
		h2{
		color:#ffffff;
		font-weight:600;
		font-size:25px;
		text-align: left;
		padding-bottom:.5rem;
		margin-top:.5rem;
		padding-left:10px;
		padding-right:10px;
		}
    
	   h3{
		color:#ffffff;
		font-weight:500;
		font-size: 18px;
		text-align: left;
		padding-bottom: .5rem;
		padding-top: .5rem;
		}

		.content_title{
		font-size:18px;
		} 

		.content_p{
		font-size:16px;
		line-height:35px;
		text-align: left;
		margin-left:10px;
		margin-right:10px;
		padding-left:10px;
		padding-right:10px;
		margin-top: 10px;
		}

	   .content_ul{
		color:#ffffff;
		font-size:16px;
		font-weight:500;
		line-height:35px;
		text-align: justify;
		margin-top: 50px;
		}

		.p_m{
		font-size:18px;
		}
    
		.inner-top{
		float: none;
		width: 100%;
		}
    
		.inner-bottom{
		float: none;
		width: 100%;
		}

		.hero-text {
		font-size:40px;  
		text-align: left;
		padding:15px;
		margin:15px;
		top:200px;
		left:20px;
		}
	
		.hero-sub {
		font-size:20px;  
		text-align:left;
		}
	
		.hero-image {
		aspect-ratio: 1920 / 700;
		background-position: left center;
		}

		.block-heading {
		border-left: 5px solid #fcac33;
		padding-left: 10px;
		font-size: 26px;
		}

		.block-heading2 {
		border-left: 5px solid #75f88d;
		padding-left: 10px;
		font-size: 26px;
		}

		.block-heading3 {
		border-left: 5px solid #00A0E6;
		padding-left: 10px;
	    font-size: 26px;
		}

		.chroma-logo {
			padding: 15px;
			margin-left: 20px;
			width: 45%;
			visibility: hidden;
		}
	}
    
    @media (max-width: 767px) {
		#slide1 {
		background-position: center;
		}

		.inner-con{
		padding-left:0;
		padding-right:0;
		padding-bottom:15%;
		}
		
		.content_p{
		font-size:16px;
		line-height:35px;
		text-align: left;
		margin-top: 10px;
		margin-left:10px;
		margin-right:10px;
		}

	   .content_ul{
		color:#ffffff;
		font-size:16px;
		font-weight:500;
		line-height:35px;
		text-align: justify;
		margin-right: 30px;
		}

		.p_m{
		font-size:18px;
		}
		
		h1{
		font-size:20px;
		}
		
		h2{
		color:#ffffff;
		font-weight:600;
		font-size:25px;
		text-align: left;
		padding-bottom:.5rem;
		margin-top:.5rem;
		padding-left:10px;
		padding-right:10px;
		}
    
		.footer{
		display: block;
		}
    
		.inner-top{
			float: none;
			width: 100%;
		}
    
		.inner-bottom{
			float: none;
			width: 100%;
		}
    
		.vi{
		padding-right:0;
		padding-left:0;
		}
    
		.hero-text {
		font-size:40px;  
		text-align: left;
		padding:15px;
		margin:15px;
		top:200px;
		left:20px;
		}

		.hero-sub {
		font-size:20px;  
		text-align:left;
		}
    
		.hero-image {
		background-position: center;
		height: 22vh;
		}

		.chroma-logo {
		padding: 10px;
		margin-left: 10px;
		width: 50%;
		visibility: hidden;
		}

		.header {
		background-color: #f1f1f1;
		}
    }

	.motif-content .motif-line {
	  padding-top: 10px; 
	}
	
	.motif-content .motif-line li {
	height: 5px;
	display: inline-block;
	border-radius: 50px;
	margin-right: 3px;
	}
   
	.motif-content .motif-line li:nth-of-type(1) {
	width: 40px; 
	background-color: #00B189;
	}
	
	.motif-content .motif-line li:nth-of-type(2) {
	width: 5px; 
	background-color: #75f88d;
	}
	
	.motif-content .motif-line li:nth-of-type(3) {
	width: 5px; 
	background-color: #75f88d;
	}
	
	.motif-content .motif-line li:nth-of-type(4) {
	width: 5px; 
	background-color: #75f88d;
	}
	
	.motif-content .motif-line li:nth-of-type(5) {
	width: 5px; 
	background-color: #75f88d;
	}
	
	.motif-content .motif-line li:nth-of-type(6) {
	width: 15px; 
	background-color: #00A0E6;
	}
	
	.motif-content .motif-line li:nth-of-type(7) {
	width: 10px; 
	background-color: #00A0E6;
	}
	
	.motif-content .motif-line li:nth-of-type(8) {
	width: 10px; 
	background-color: #00A0E6;
	}
	
	.motif-content .motif-line li:nth-of-type(9) {
	width: 5px; 
	background-color: #00A0E6;
	}
	
	.motif-content .motif-line li:nth-of-type(10) {
	width: 5px; 
	background-color: #00A0E6;
	}

	.motif-content ul, ol {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	}

	.schedule-container {
	width: 100%;
	overflow: auto;
	background-color: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	}

	table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed; 
	}

	th, td {
	border: 1px solid #e1e4e8;
	text-align: center;
	padding: 10px 8px;
	font-size: 16px;
	min-width: 140px;
	background-color: #fff;
	font-weight: 600;
	position: relative;
    word-break: break-word;
	color: #000;
	}

	thead th {
	position: sticky;
	top: 0;
	background: #f8f9fa;
	color: #0066bb;
	font-weight: 800;
	z-index: 3;
	border-bottom: 2px solid #dcdcdc;
	}

	.time-col {
	  background-color: #f0f3f5;
	  font-weight: bold;
	  color: #34495e;
	  position: sticky;
	  left: 0;
	  z-index: 2;
	}

	.location-col {
	  font-weight: bold;
	  position: sticky;
	  left: 0;
	  z-index: 2;
	}

	td:hover {
	  background-color: #fdf5e6;
	  transition: background-color 0.2s ease;
	}

	/* 顏色區塊 */
	.lightblue  { background-color: #d6eaff; }
	.teal       { background-color: #d1f2eb; }
	.gray       { background-color: #ecf0f1; }
	.green      { background-color: #d4efdf; }
	.yellow     { background-color: #fcf3cf; }
	.purple     { background-color: #ebdef0; }
	.darkgreen  { background-color: #a9dfbf; }
	.lunch      { background-color: #ffffff; }
	.date       { background-color: #f9c784; }
	.blue-header { background-color: #00A0E6; }
	.gray-row    { background-color: #c5c5c5; }
	.darkblue-bg { background-color: #0a5596; color: #fff; }

	/* 表格自訂樣式 */
	.row-border-blue {
	  border-bottom: 1px solid #0a5596;
	}

	.row-border-white {
	  border-bottom: 1px solid #ffffff;
	}

	.left-align {
	  text-align: left;
	  padding: 15px 0;
	}



	/* 平板與手機最大化水平排列，允許左右捲動避免擠壓 */
	@media (max-width: 992px) {
	  #navbar {
		justify-content: flex-start;
	  }
	  #navbar a {
		padding: 10px 12px;
		font-size: 16px;
	  }

	  th, td {
		font-size: 14px;
		padding: 4px 2px;
	  }

	}

	/* 手機版調整 */
	@media screen and (max-width: 768px) {
	  th, td {
		font-size: 11px;
		padding: 3px 1px;
		white-space: normal; /* 允許換行 */
	  }
	  
	  table {
		min-width: 100%; /* 讓表格寬度不超出 */
	  }

	  #navbar {
		flex-wrap: wrap;
		padding: 0px 8px;
	  }

	  #navbar a {
		padding: 0px 8px;
		font-size: 14px;
	  }

	  #navbar a:nth-child(1),
	  #navbar a:nth-child(7) {
		flex: 1 1 100%;
	  }

	  #navbar a:nth-child(2),
	  #navbar a:nth-child(3),
	  #navbar a:nth-child(4),
	  #navbar a:nth-child(5),
	  #navbar a:nth-child(6) {
		flex: 1 1 15%;
	  }

	 .time-col, .location-col {
		line-height: normal;
	  }

   h3{
    color:#ffffff;
    font-weight:500;
    font-size: 15px;
    text-align: left;
    padding-bottom: .5rem;
    padding-top: .5rem;
    line-height: inherit;
    }

	    .block-heading {
    border-left: 5px solid #fcac33;
    padding-left: 10px;
    font-size: 23px;
	}

	.block-heading2 {
		border-left: 5px solid #75f88d;
		padding-left: 10px;
		font-size: 23px;
	}

	.block-heading3 {
		border-left: 5px solid #00A0E6;
		padding-left: 10px;
		font-size: 23px;
	}

		.content_title{
		font-size:18px;
		} 

	}


	/* 超小螢幕，極限調整 */
	@media (max-width: 480px) {
	 #navbar a {
		padding: 3px 6px;
		font-size: 13px;
	  }

	  #navbar a span {
		padding: 4px 8px;
	  }

		  .block-heading {
		border-left: 5px solid #fcac33;
		padding-left: 10px;
		font-size: 20px;
	}

	.block-heading2 {
		border-left: 5px solid #75f88d;
		padding-left: 10px;
		font-size: 20px;
	}

	.block-heading3 {
		border-left: 5px solid #00A0E6;
		padding-left: 10px;
		font-size: 20px;
	}
	}


table.fold-table > tbody > tr.view td,
table.fold-table > tbody > tr.view th {
  cursor: pointer;
}
table.fold-table > tbody > tr.view td:first-child,
table.fold-table > tbody > tr.view th:first-child {
  position: relative;
  padding-left: 20px;
}
table.fold-table > tbody > tr.view td:first-child:before,
table.fold-table > tbody > tr.view th:first-child:before {
  position: absolute;
  top: 50%;
  left: 5px;
  width: 9px;
  height: 16px;
  margin-top: -8px;
  color: #999;
  content: " ";
  transition: all 0.3s ease;
}
table.fold-table > tbody > tr.view:nth-child(4n-1) {
  background: #eee;
}
table.fold-table > tbody > tr.view:hover {
  background: #000;
}
table.fold-table > tbody > tr.view.open {
  background: tomato;
  color: white;
}
table.fold-table > tbody > tr.view.open td:first-child:before,
table.fold-table > tbody > tr.view.open th:first-child:before {
  transform: rotate(-180deg);
  color: #333;
}
table.fold-table > tbody > tr.fold {
  display: none;
}
table.fold-table > tbody > tr.fold.open {
  display: table-row;
}

.fold-content {
  padding: 0.5em;
}
.fold-content h3 {
  margin-top: 0;
}
.fold-content > table {
  border: 2px solid #ccc;
}
.fold-content > table > tbody tr:nth-child(even) {
  background: #eee;
}