/*

November Template

http://www.templatemo.com/tm-473-november

*/

@media only screen and (min-width: 769px) and (max-width: 10000px) {
	#mobile_sec .menumobile { display: block!important; }
}

@media only screen and (min-width: 1025px) and (max-width: 1200px) {

	header { width: 100%; }
	header .Center { width: 100%; padding: 0px 2%;  }
	
	
	.Navigation { margin-right: 0px; }
	.Navigation li a { padding: 30px 36px; }
	header.smaller .Navigation li a { padding: 16px 36px; }

	
	.Banner_sec { width: 100%; height: 524px; }
	.Banner_sec .Center {width: 100%; padding: 0px 2%; }
	.Banner_sec .bannerside { top: 144px; }
	.Banner_sec .leftside h3 { font-size: 32px; }
	.Banner_sec .rightside { width: 66%; }
	.Banner_sec .rightside .Slider { width: 100%; }
	.Banner_sec .rightside .Slider .text { padding: 25px 10px 21px 10px; }
	.Banner_sec .rightside .Slider .text .Icon { width: 45%; }
	.Banner_sec .rightside .Slider .text .Lorem { width: 40%; }
	.Banner_sec .rightside .Shadow { width: 105%; }
	.Banner_sec .rightside .prevBtn { top: 160px; }
	.Banner_sec .rightside .nextBtn { top: 160px; }

	#Container { width: 100%; }

	.About_sec { width: 100%; padding: 70px 0px; }
	.About_sec .Center { width: 100%; padding: 0px 2%; }
	.About_sec p { font-size: 13px; }
	.About_sec .Tabside { padding: 50px 0; }
	.About_sec .Tabside .Description { margin-top: 0px; width: 51%; }

	.Services_sec { width: 100%; padding: 70px 0px; }
	.Services_sec .Center { width: 100%; padding: 0px 2%; }
	.Services_sec p { font-size: 13px; }
	.Services_sec .Serviceside { width: 100%; padding: 50px 0 30px; }
	.Services_sec .Serviceside li { margin: 0px 2% 0px 0px; width: 23.5%; }

	.Pricing_sec { width: 100%; padding: 70px 0px; }
	.Pricing_sec .Center { width: 100%; padding: 0px 2%; }
	.Pricing_sec p { font-size: 13px; }
	.Pricing_sec .Pricingside { width: 100%; padding: 50px 0 0 }
	.Pricing_sec .Pricingside li .Basic { width: 6%;}
	.Pricing_sec .Pricingside li .Dollar { width: 14%;  }
	.Pricing_sec .Pricingside li .Band { width: 16%; padding:  1px 30px}
	.Pricing_sec .Pricingside li .Order { width: 16%; float: right; }

	.Pricing_sec .Pricingside li.bg1 .Dollar1 { width: 14.8%; }
	.Pricing_sec .Pricingside li.bg1 .Band { width: 16%; padding:  1px 30px}
	.Pricing_sec .Pricingside li.bg1 .Order1 { width: 16%; float: right; }

	.Contact_sec { width: 100%; }
	.Contact_sec .Center { width: 100%; padding: 70px 2%;}
	
	.Contact_sec .Map { width: 100%;}
	.Contact_sec .Map img { height: 300px; width: 100%; }
	
	.Get_sec { width: 100%; }
	.Get_sec .Mid { width: 100%; padding: 50px 2%; }

	footer { width: 100%; }
	footer .Cntr { width: 100%; padding: 20px 2%; }
}	

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.language-switch {
        position: relative;
        justify-content: center; /* 小螢幕時按鈕置中 */
        right: 0;
        transform: none;
        padding-top: 5px;
    }
    .lang-switch {
        width: 75px;
        font-size: 12px;
        padding: 5px 10px;
    }

	header { width: 100%; height: 87px; }
	header .Center { width: 100%; padding: 0px 2%; }
	/* header .site-logo { padding: 27px 0 0 1px;  position: relative; z-index: 1; }
	header .site-logo h1 { line-height: 33px; }	 */
	header.smaller .Navigation li a { padding: 16px 20px; }

	.Navigation {  margin-right: 0px; }
	.Navigation li a { padding: 30px 20px; }

	.Banner_sec { width: 100%; height: 464px; }
	.Banner_sec .Center {width: 100%; padding: 0px 2%; }
	.Banner_sec .bannerside { top: 144px; }
	.Banner_sec .leftside { padding: 0px; width: 34%; }
	.Banner_sec .leftside h3 { font-size: 30px; }
	.Banner_sec .leftside p { padding: 10px  0px; font-size: 14px; line-height: 18px; }
	.Banner_sec .rightside { width: 64%;}
	.Banner_sec .rightside .Slider { width: 100%;}
	.Banner_sec .rightside .Slider .text { padding: 25px 10px 21px 10px; }
	.Banner_sec .rightside .Slider .text .Icon { width: 46%; }
	.Banner_sec .rightside .Slider .text li { padding: 0px 10px;}
	.Banner_sec .rightside .Slider .text .Lorem { width: 50%; }
	.Banner_sec .rightside .Slider .text .Lorem p { font-size: 16px; }
	.Banner_sec .rightside .Shadow { width: 106.5%; left: -21px; }
	.Banner_sec .rightside .prevBtn { top: 100px; left: 10px; }
	.Banner_sec .rightside .nextBtn { top: 100px; right: 10px; }

	#Container { width: 100%; }

	.About_sec { width: 100%; padding: 70px 0px 30px 0px; }
	.About_sec .Center { width: 100%; padding: 0px 2%; }
	.About_sec h2 { font-size: 40px; line-height: 40px; }
	.About_sec p { padding: 15px 0px; font-size: 13px; }
	.About_sec .Tabside { padding: 50px 0 0px 0; }
	.About_sec .Tabside .Description { margin-top: 0px; width: 51%; }
	.About_sec .Tabside .Description p { padding: 10px 0px; }
	.About_sec .Tabside .TabImage { width: 45.63%; }
	.About_sec .Tabside .TabImage .img1 { left: 0px; background-position: -40px 203px; }
	.About_sec .Tabside .TabImage .img1 img { width: 95%; }
	
	.About_sec .Tabside .TabImage .img2 { left: 15px; height: auto; background-position: -50px 132px;  }
	.About_sec .Tabside .TabImage .img2 img { width: 90%; height: auto; }

	.Services_sec { width: 100%; padding: 70px 0px 30px 0px; }
	.Services_sec .Center { width: 100%; padding: 0px 2%; }
	.Services_sec h2 { font-size: 40px; line-height: 40px; }
	.Services_sec p { padding: 15px 0px; font-size: 13px; }
	.Services_sec .Serviceside { width: 100%; padding: 50px 0 30px; }
	.Services_sec .Serviceside li { margin: 0px 2% 0px 0px; width: 23.5%; }

	.Services_sec .Serviceside li.Development a { background-size: 60%;}
	.Services_sec .Serviceside li.Development h4 { padding: 134px 0 0; }
	.Services_sec .Serviceside li.Development a:hover h4 { background-size: 60%;}

	.Services_sec .Serviceside li.Desdin a { background-size: 60%;}
	.Services_sec .Serviceside li.Desdin h4 { padding: 134px 0 0; }
	.Services_sec .Serviceside li.Desdin a:hover h4 { background-size: 60%;}

	.Services_sec .Serviceside li.Concept a { background-size: 60%;}
	.Services_sec .Serviceside li.Concept h4 { padding: 134px 0 0; }
	.Services_sec .Serviceside li.Concept a:hover h4 { background-size: 60%;}

	.Services_sec .Serviceside li.System a { background-size: 60%;}
	.Services_sec .Serviceside li.System h4 { padding: 134px 0 0; }
	.Services_sec .Serviceside li.System a:hover h4 { background-size: 60%;}

	.Pricing_sec { width: 100%; padding: 70px 0px 30px 0px; }
	.Pricing_sec .Center { width: 100%; padding: 0px 2%; }
	.Pricing_sec h2 { font-size: 40px; line-height: 40px; }
	.Pricing_sec p { padding: 15px 0px; font-size: 13px; }
	.Pricing_sec .Pricingside { width: 100%; padding: 30px 0 0 }
	.Pricing_sec .Pricingside li { height: 90px;}
	.Pricing_sec .Pricingside li:hover .Band { padding: 0px; height: 90px; }
	.Pricing_sec .Pricingside li .Basic { width: 8%; height: 90px;}
	.Pricing_sec .Pricingside li .Dollar { width: 14%; height: 90px; }
	.Pricing_sec .Pricingside li .Dollar h2 { font-size: 24px; }
	.Pricing_sec .Pricingside li .Band { width: 16%; }
	.Pricing_sec .Pricingside li .Band p { font-size: 15px; }
	.Pricing_sec .Pricingside li .Order { width: 14%; float: right; height: 90px; }

	.Contact_sec { width: 100%; }
	.Contact_sec .Center { width: 100%; padding: 70px 2% 30px 2%; }
	.Contact_sec h2 { font-size: 40px; line-height: 40px; }
	.Contact_sec p { padding: 15px 0px; font-size: 13px; }

	.Contact_sec .Map { width: 100%;}
	.Contact_sec .Map img { height: 250px; width: 100%; }
	
	.Get_sec { width: 100%; }
	.Get_sec .Mid { width: 100%; padding: 50px 2%; }
	.Get_sec .Leftside p { margin: 0 0 20px; } 
	.Get_sec .Leftside input.field { padding: 10px 20px; }
	.Get_sec .Leftside textarea { padding: 10px 20px; height: 125px; }
	.Get_sec .Leftside .button {
		-webkit-appearance: none;
		appearance: none;
	}

	.Get_sec .Rightside { padding-top: 0px; }
	.Get_sec .Rightside h3 { font-size: 40px; padding-bottom: 34px; }
	.Get_sec .Rightside address { padding: 0 0 23px 65px; }

	footer { width: 100%; }
	footer .Cntr { width: 100%; padding: 20px 2%; }
	

}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {

	header { width: 100%; position: relative; height: 57px;}
	header .Center { width: 100%;  }
	
	
	header.smaller { height: 55px;}
	
	
	#mobile_sec { position: fixed; width: 100%; }
	#mobile_sec .mobile { display: block; position: relative; float: right;}
	#mobile_sec .menumobile { display: none; width: 100%; position: absolute; top: 55px; right: 0%; background: rgba(0, 0, 0, 0.5);  }
	#mobile_sec .menumobile .Navigation { width: 100%; float: none; }
	#mobile_sec .menumobile .Navigation ul { float: none; }
	#mobile_sec .menumobile .Navigation li { float: none; width: 100%; border-bottom: solid 1px #365374; }
	#mobile_sec .menumobile .Navigation li a { padding: 10px 21px; background: none; border-bottom: none; }
	#mobile_sec .menumobile .Navigation li:last-child { border-bottom: none; }
	
	
	.Banner_sec { width: 100%; height: 620px; }
	.Banner_sec .Center {width: 100%; padding: 0px 3%; }
	.Banner_sec .bannerside { top: 144px; }
	.Banner_sec .leftside { padding: 0px 0px 20px 0px; width: 100%; float: none; }
	.Banner_sec .rightside { width: 99%;}
	.Banner_sec .rightside .Slider { width: 100%;}
	.Banner_sec .rightside .Slider .text { padding: 10px 10px; }
	.Banner_sec .rightside .Slider .text .Icon { width: 48%; }
	.Banner_sec .rightside .Slider .text li { padding: 0px 10px;}
	.Banner_sec .rightside .Slider .text .Lorem { width: 50%; }
	.Banner_sec .rightside .Slider .text .Lorem p { font-size: 14px; }
	.Banner_sec .rightside .Shadow { width: 105.5%; left: -16px; }
	.Banner_sec .rightside .prevBtn { top: 100px; left: 10px; }
	.Banner_sec .rightside .nextBtn { top: 100px; right: 10px; }
	.Banner_sec .rightside #slider li img { height: 280px; width: 100%;}	

	.bgcolor { height: 50px; }

	#Container { width: 100%; }

	.About_sec { width: 100%; padding: 100px 0px 50px; }
	.About_sec .Center { width: 100%; padding: 0px 3%; }
	.About_sec h2 { font-size: 30px; line-height: 30px; }
	.About_sec p { padding: 15px 0px; font-size: 13px; }
	.About_sec .Tabside { padding: 30px 0 0px 0; }
	.About_sec .Tabside ul { padding-bottom: 25px;}
	.About_sec .Tabside li a { font-size: 14px; padding: 14px 30px; }
	.About_sec .Tabside .TabImage { width: 100%; float: none; padding-bottom: 35px; text-align: center;}
	.About_sec .Tabside .TabImage .img1 { left: 0px; position: relative; }
	.About_sec .Tabside .TabImage .img1 img { margin: auto;}
	.About_sec .Tabside .TabImage .img2 { left: 25px;  }
	.About_sec .Tabside .TabImage .img2 img { width: 100%; height: auto; }
	.About_sec .Tabside .Description { margin-top: 0px; width: 100%; }
	.About_sec .Tabside .Description p { padding: 10px 0px; text-align: justify; }

	.Services_sec { width: 100%; padding: 100px 0px 30px; }
	.Services_sec .Center { width: 100%; padding: 0px 3%; }
	.Services_sec h2 { font-size: 30px; line-height: 30px; }
	.Services_sec p { padding: 15px 0px; font-size: 13px; }
	.Services_sec .Serviceside { width: 100%; padding: 50px 0 30px; }
	.Services_sec .Serviceside li { margin: 0px 0% 3% 2%; float: none; display:inline-block; }


	.Pricing_sec { width: 100%; padding: 100px 0px 30px; }
	.Pricing_sec .Center { width: 100%; padding: 0px 3%; }
	.Pricing_sec h2 { font-size: 30px; line-height: 30px; }
	.Pricing_sec p { padding: 15px 0px; font-size: 13px; }
	.Pricing_sec .Pricingside { width: 100%; padding: 30px 0 0 }
	.Pricing_sec .Pricingside li { height: 100%; width: 100%; margin: 0px 0px 50px 0px; }
	.Pricing_sec .Pricingside li .Basic { width: 100%; float: none; }
	.Pricing_sec .Pricingside li .Basic h5 { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); writing-mode: lr-tb; }
	.Pricing_sec .Pricingside li .Dollar { width: 100%; float: none; }
	.Pricing_sec .Pricingside li .Band { width: 100%; float: none; border-bottom: solid 1px #ccc; background: none; height: 75px; }
	.Pricing_sec .Pricingside li .Order { width: 100%; float: none; }
	.Pricing_sec .Pricingside li:hover .Band { height: 75px; }

	
	.Contact_sec { width: 100%; }
	.Contact_sec .Center { width: 100%; padding: 80px 3%;}
	.Contact_sec h2 { font-size: 30px; line-height: 30px; }
	.Contact_sec p { padding: 15px 0px; font-size: 13px; }

	.Contact_sec .Map { width: 100%;}
	.Contact_sec .Map img { height: 200px; width: 100%; }
	
	.Get_sec { width: 100%; }
	.Get_sec .Mid { width: 100%; padding: 30px 3%; }
	.Get_sec .Leftside { width: 100%; float: right;}
	.Get_sec .Leftside p { margin: 0 0 20px; } 
	.Get_sec .Leftside input.field { padding: 10px 20px; }
	.Get_sec .Leftside textarea { padding: 10px 20px; height: 125px; }
	.Get_sec .Leftside .button { -webkit-appearance: none; appearance: none; margin: 0px; padding: 12px 0px; }

	.Get_sec .Rightside { padding-top: 0px; width: 100%; }
	.Get_sec .Rightside h3 { font-size: 30px; padding-bottom: 20px; }
	.Get_sec .Rightside address { padding: 0 0 15px 65px; }
	.Get_sec .Rightside ul { padding: 10px 0 0 3px; }

	footer { width: 100%; }
	footer .Cntr { width: 100%; padding: 10px 3%; }
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {


	header { width: 100%; position: relative; height: 57px; }
	header .Center { width: 100%;}
	
	header.smaller { height: 55px;}
	
	
	#mobile_sec { position: fixed; width: 100%;}
	#mobile_sec .mobile { display: block; position: relative; float: right; }
	#mobile_sec .menumobile { display: none; width: 100%; position: absolute; top: 55px; right: 0%; background: rgba(0, 0, 0, 0.5);  }
	#mobile_sec .menumobile .Navigation { width: 100%; float: none; }
	#mobile_sec .menumobile .Navigation ul { float: none;}
	#mobile_sec .menumobile .Navigation li { float: none; width: 100%; border-bottom: solid 1px #365374; }
	#mobile_sec .menumobile .Navigation li a { padding: 10px; background: none; border-bottom: none; }
	#mobile_sec .menumobile .Navigation li a:hover, #mobile_sec .menumobile .Navigation li a.active { background: #ff910000; border-bottom: none; }
	#mobile_sec .menumobile .Navigation li:last-child { border-bottom: none; }

	
	.Banner_sec { width: 100%; height: 556px; }
	.Banner_sec .Center {width: 100%; padding: 0px 3%; }
	.Banner_sec .bannerside { top: 90px; }
	.Banner_sec .leftside { padding: 0px 0px 10px 0px; width: 100%; float: none; }
	.Banner_sec .leftside h3 { font-size: 30px; }
	.Banner_sec .leftside p { font-size: 14px; line-height: 18px; padding: 10px 0px; }
	.Banner_sec .leftside a { font-size: 13px; }
	.Banner_sec .rightside { width: 98%;}
	.Banner_sec .rightside .Slider { width: 99%; text-align: center; }
	.Banner_sec .rightside .Slider .text { padding: 10px 10px; }
	.Banner_sec .rightside .Slider .text .Icon { width: 100%; }
	.Banner_sec .rightside .Slider .text .Icon li { float: none!important; display: inline-block; padding: 0px 10px;}
	.Banner_sec .rightside .Slider .text .Lorem { width: 100%;  }
	.Banner_sec .rightside .Slider .text .Lorem p { font-size: 13px; text-align: initial;}
	.Banner_sec .rightside .Slider .text .Lorem p span { display: inline-block; }
	.Banner_sec .rightside .Shadow { width: 105.5%; left: -16px; }
	.Banner_sec .rightside .prevBtn { top: 100px; left: 10px; }
	.Banner_sec .rightside .nextBtn { top: 100px; right: 10px; }
	.Banner_sec .rightside #slider li img { height: 290px; width: 100%;}	

	
	.bgcolor { height: 50px; }

	#Container { width: 100%; }

	.About_sec,
	.Services_sec,
	.Pricing_sec { 
		width: 100%; padding: 60px 0px 30px; 
	}
	.About_sec .Center { width: 100%; padding: 0px 3%; }
	.About_sec h2 { font-size: 30px; line-height: 30px; }
	.About_sec p { padding: 15px 0px; font-size: 13px; }
	.About_sec .Tabside { padding: 30px 0 0px 0; }
	.About_sec .Tabside ul { padding-bottom: 25px;}
	.About_sec .Tabside li a { font-size: 13px; padding: 14px; }
	.About_sec .Tabside .TabImage { width: 100%; float: none; padding-bottom: 25px; text-align: center;}
	.About_sec .Tabside .TabImage .img1 { left: 0px; position: relative; height: 244px; background: none;background-size: 100%; }
	.About_sec .Tabside .TabImage .img1 img { margin: auto;}
	.About_sec .Tabside .TabImage .img2 { left: 20px;  background: none; background-size: 100%; }
	.About_sec .Tabside .TabImage .img2 img { width: 94%; height: auto; }
	.About_sec .Tabside .Description { margin-top: 0px; width: 100%; }
	.About_sec .Tabside .Description p { padding: 10px 0px; text-align: justify; }
	
	.Services_sec .Center { width: 100%; padding: 0px 3%; }
	.Services_sec h2 { font-size: 30px; line-height: 30px; }
	.Services_sec p { padding: 15px 0px; font-size: 13px; }
	.Services_sec .Serviceside { width: 100%; padding: 50px 0 30px; }
	.Services_sec .Serviceside li { margin: 0px 0% 3% 2%; float: none; display:inline-block; }
	
	.Pricing_sec .Center { width: 100%; padding: 0px 3%; }
	.Pricing_sec h2 { font-size: 30px; line-height: 30px; }
	.Pricing_sec p { padding: 15px 0px; font-size: 13px; }
	.Pricing_sec .Pricingside { width: 100%; padding: 30px 0 0 }
	.Pricing_sec .Pricingside li { height: 100%; width: 100%; margin: 0px 0px 50px 0px; }
	.Pricing_sec .Pricingside li .Basic { width: 100%; float: none; }
	.Pricing_sec .Pricingside li .Basic h5 { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); writing-mode: lr-tb; }
	.Pricing_sec .Pricingside li .Dollar { width: 100%; float: none; }
	.Pricing_sec .Pricingside li .Band { width: 100%; float: none; border-bottom: solid 1px #ccc; background: none; height: 75px; }
	.Pricing_sec .Pricingside li .Order { width: 100%; float: none; }
	.Pricing_sec .Pricingside li:hover .Band { height: 75px; }
	
	.Contact_sec { width: 100%; }
	.Contact_sec .Center { width: 100%; padding: 60px 3% 30px;}
	.Contact_sec h2 { font-size: 30px; line-height: 30px; }
	.Contact_sec p { padding: 15px 0px; font-size: 13px; }

	.Contact_sec .Map { width: 100%;}
	.Contact_sec .Map img { height: 200px; width: 100%; }
	
	.Get_sec { width: 100%; }
	.Get_sec .Mid { width: 100%; padding: 30px 4%; }
	.Get_sec .Leftside { width: 100%; float: right;}
	.Get_sec .Leftside p { margin: 0 0 20px; } 
	.Get_sec .Leftside input.field { padding: 10px 20px; }
	.Get_sec .Leftside textarea { padding: 10px 20px; height: 125px; }
	.Get_sec .Leftside .button { margin: 0px; padding: 12px 0px; -webkit-appearance: none; appearance: none; }

	.Get_sec .Rightside { padding-top: 0px; width: 100%; }
	.Get_sec .Rightside h3 { font-size: 30px; padding-bottom: 10px; }
	.Get_sec .Rightside address { padding: 0 0 15px 47px; }
	.Get_sec .Rightside ul { padding: 10px 0 0 3px; }

	footer { width: 100%; }
	footer .Cntr { width: 100%; padding: 10px 3%; }	
}

@media only screen and (max-width: 1199px) {
	
	header,
	.Navigation li,
	.Navigation li:hover span, 
	.Navigation li.active span { 
		height: 87px; }
	header.smaller .Navigation li:hover span,
	header.smaller .Navigation li.active span {
		height: 60px;
	}
}
@media only screen and (max-width: 767px) {
	header { 
		height: 55px; 
		position: relative;
	}
	.Navigation li {
		height: 45px;
	}

	.Navigation li:hover span, .Navigation li.active span {
		height: 45px;
	}
	.Navigation li span {
		border-bottom: none;
		background: none;
	}
	#mobile_sec .menumobile .Navigation li:hover, 
	#mobile_sec .menumobile .Navigation li.active {
		background: #FF9000 none repeat scroll 0% 0%;
		border-bottom: medium none;
	}
	header.smaller .Navigation li {
		height: 45px;
	}
	.Banner_sec .leftside a {
		margin-top: 20px;
		margin-bottom: 20px;
	}
}


/* 手機版調整 */
@media only screen and (max-width: 767px) {
    .Map {
        position: relative;
        margin-bottom: 20px; 
    }

    .map-container {
        width: 100%; 
        height: auto; 
        overflow: hidden;
    }

    .custom-iframe {
        width: 100%; /* 讓 iframe 填滿父容器 */
        height: 250px; 
        border: none; /* 去除邊框 */
    }

	.Get_sec {
        display: block; /* 確保顯示 */
        width: 100%;
        padding: 30px 4%;
        box-sizing: border-box;
    }

    .Get_sec .Mid {
        width: 100%;
        padding: 20px 0;
        display: flex;
        flex-direction: column;
    }

    .Get_sec .Rightside {
        width: 100%;
        text-align: center;
    }

    .Get_sec .Rightside h3 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .Get_sec .Rightside address {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 15px;
    }

    .Get_sec footer {
        margin-top: 20px;
        font-size: 12px;
        text-align: center;
    }
}

/* 桌面版樣式 */
@media only screen and (min-width: 768px) {
    .language-switch-mobile {
        display: none; /* 隱藏手機版語言切換 */
    }
    .language-switch {
        display: block; /* 顯示桌面版語言切換 */
    }

	.search-box-mobile {
		display: none; /* 隱藏手機版搜尋框 */
	}
	.search-box {
		display: block; /* 顯示桌面版搜尋框 */
	}
	
}

/* 手機版樣式 */
@media only screen and (max-width: 767px) {
    .language-switch {
        display: none; /* 隱藏桌面版語言切換 */
    }
    .language-switch-mobile {
        display: block; /* 顯示手機版語言切換 */
    }

	.search-box {
		display: none; /* 隱藏桌面版搜尋框 */
	}
	.search-box-mobile {
		display: block; /* 顯示手機版搜尋框 */
	}
}



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

    .search-box-mobile {
        margin-top: 10px;
        z-index: 1;
        display: flex;
        justify-content: space-between;
        padding: 5px;
        
        border-radius: 5px;
    }

    .search-box-mobile form {
        width: 100%;
        display: flex;
        align-items: center;
    }

    .search-box-mobile .search-input {
        flex: 1;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px 0 0 5px;
        font-size: 14px;
    }

    .search-box-mobile .search-button {
        padding: 10px;
        background-color: #15e7c4;
        color: white;
        border: none;
        border-radius: 0 5px 5px 0;
        font-size: 14px;
    }


    /* 手機版語言切換按鈕調整 */
    .language-switch-mobile {
        position: relative;
        z-index: 10;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        color: white;
        border-radius: 5px;
    }

    .language-switch-mobile .lang-menu {
        cursor: pointer;
        font-size: 14px;
    }

    .language-switch-mobile .lang-dropdown {
        display: none;
		position: absolute;
		top: calc(100% + 0px);
		background-color: #ffffff;
		left: 0;
		border-radius: 5px;
		width: 100%;
		z-index: 9999;
    }

    .language-switch-mobile .lang-dropdown li {
        padding: 10px;
        background-color: #373737b1;
        color: white;
        border-bottom: 1px solid #ccc;
        text-align: center;
        cursor: pointer;
    }


    /* 顯示下拉菜單 */
    .language-switch-mobile .lang-dropdown.visible {
        display: block;
    }

	#mobile_sec .menumobile .Navigation .dropdown-content {
		display: none;
		position: absolute;
		width: 100%;
		background: rgba(0, 0, 0, 0.9);
		top: 100%;
		left: 0;
		z-index: 2000; 
	}

	#mobile_sec .menumobile .Navigation .dropdown:hover .dropdown-content {
		display: block;
	}

	#mobile_sec .menumobile .Navigation .dropdown-content li {
		padding: 10px 20px;
		background: linear-gradient(to right, #032b46e5, #00796bc0);
		display: block;
		z-index: 2000; 
	}
	

    /* 漢堡選單樣式 */
    #mobile_sec .menumobile {
        display: none;
        position: absolute;
        top: 55px;
        right: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
        z-index: 1000;
    }

    #mobile_sec .menumobile ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #mobile_sec .menumobile ul li {
        padding: 10px 20px;
        border-bottom: 1px solid #ccc;
    }

    #mobile_sec .menumobile ul li a {
        color: white;
        text-decoration: none;
    }

    #mobile_sec .menumobile .search-box-mobile form {
        display: flex;
        align-items: center;
        margin: 10px 20px;
    }

    #mobile_sec .menumobile .search-input {
        flex: 1;
        padding: 5px;
        border-radius: 5px;
        border: 1px solid #ddd;
    }

    #mobile_sec .menumobile .search-button {
        margin-left: 5px;
        padding: 5px;
        background-color: #15e7c4;
        color: white;
        border: none;
        border-radius: 5px;
    }

    
    .mobile {
        cursor: pointer;
    }

    .mobile .fa-bars {
        display: block;
    }

    .mobile .fa-times {
        display: none;
    }

    #mobile_sec.active .menumobile {
        display: block;
    }

    #mobile_sec.active .mobile .fa-bars {
        display: none;
    }

    #mobile_sec.active .mobile .fa-times {
        display: block;
    }



    .hexagon {
        width: 100px; 
        height: 100px;
    }

    .hexagon img {
        max-width: 85%; 
        margin: auto;
        height: auto;
    }

    .CoreTechSection h2 {
        text-align: center; 
        font-size: 20px; 
    }

    .CoreTechSection p {
        padding: 0 10px;
        text-align: justify; 
        font-size: 14px;
    }

    .CoreComponents, .EndProducts, .Vehicles {
        margin-bottom: 5px; 
    }

    .ComponentItem, .ProductItem {
        margin: 5px 0; 
    }

    img {
        max-width: 100%; 
        height: auto;
    }

    .SystemIntegration {
        display: flex;
        flex-wrap: wrap; 
        justify-content: center; 
        gap: 10px; 
    }



}

@media only screen and (max-width: 767px) {
    header {
        position: relative;
        width: 100%;
        left: 0; /* 確保 header 靠左對齊 */
    }

    .site-logo {
        position: relative;
        max-width: 150px; 
        left: 100px; 
		z-index: 1000;
    }

    header.smaller .site-logo {
        left: 100px; 
        max-width: 120px;
        transition: all 0.3s ease;
    }

    .site-logo img {
        width: 100%; 
        height: auto;
    }
}


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

   
    .ApplicationCards, .Scenes {
        display: grid;
   		grid-template-columns: repeat(3, 1fr);
        justify-content: center; 
        align-items: center;
        gap: 20px;
		margin-top: 10px;;
		margin-left: 10px;
		margin-right: 10px;
        
    }

	.ApplicationCard {
		position: relative;
		width: 120px;
		height: 180px; 
		overflow: hidden;
		border-radius: 15px;
		background: #ffffff;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		cursor: pointer;
		
	}
    
    .ApplicationCard img {
        width: 100%;
        height: 70%;
        border-radius: 10px 10px 0 0;
    }


}