/***************************************
		copyright by MaxWeb.com.tw 
***************************************/
@import 'style.css';
:root {
	--swiper-navigation-size: 30px;
}

/*-------------------------------------------- 
	atrack
---------------------------------------------*/
/*各區塊container*/
.support_area .container,
.about_us_area .container,
.solutions_area .container,
.intro_area .container {
	max-width: 1280px;
	padding: 50px;
	margin: auto;
}
/*共用按鈕樣式*/
.support_area .questions_btn .btn,
.about_us_area .about_btn .btn {
	background-color: #fff;
	color: #388a35;
}

.intro_area h2,
.solutions_area .title_mini h3,
.solutions_area .contain h3,
.about_us_area .title_mini h3,
.support_area .title_mini h3,
.support_area .contain p {
	font-weight: 100;
}

/*.canvas_main_banner {
	position: relative;
	height: 100%;
	width: 100%;
	background-color: #eff2f5;
}
.canvas_main_banner > img {
	width: auto;
	background-color: #eff2f5;
}
.canvas_main_banner .content {
	height: 100%;
	padding: 50px 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	gap: 100px;
}
.canvas_main_banner .content .product {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.canvas_main_banner .content .product .img {
	position: absolute;
	padding: 20px;
}
.canvas_main_banner .swiper {
	width: 746px;
	align-self: flex-end;
	margin-top: 95px;
		overflow: hidden;
}
.canvas_main_banner .banner_content {
	width: 500px;
	align-self: center;
	padding-left: 70px;
}

.canvas_main_banner .swiper-slide {
	background-position: center;
	background-size: cover;
	width: 279px;
	height: 245px;
}

.canvas_main_banner .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	width: 245px;
	object-fit: contain;
}

.canvas_main_banner .info h1 {
	max-width: 470px;
	margin: 0px 0px 40px;
	font-size: 4rem;
	line-height: 1.3;
}
.canvas_main_banner .banner_btn .btn {
	background-color: #0755a7;
	color: #fff;
}*/

.home_banner {
	position: relative;
	height: 100%;
	width: 100%;
	background-color: #eff2f5;
}
.home_banner > img {
	width: auto;
	background-color: #eff2f5;
}
.home_banner .content {
	height: 100%;
	padding: 50px 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	gap: 100px;
	width: 100%;
    	justify-content: center;
}
.home_banner .content .product {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.home_banner .content .product .img {
	position: absolute;
	padding: 20px;
}
.home_banner .content .product .img img{
	width: 100%;
}
.home_banner .swiper {
	width: 746px;
	align-self: flex-end;
	margin-top: 95px;
		overflow: hidden;
}
/*.home_banner .swiper::before{
	content: "";
  display: block;
  padding-top: 56.25%;
}*/
.home_banner .banner_content {
	width: 500px;
	align-self: center;
	padding-left: 70px;
	padding-right: 20px;
}

.home_banner .swiper-slide {
	background-position: center;
	background-size: cover;
	width: 279px;
	height: 245px;
}

.home_banner .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	width: 245px;
	object-fit: contain;
}

.home_banner .info h1 {
	max-width: 470px;
	margin: 0px 0px 40px;
	font-size: 4rem;
	line-height: 1.3;
}
.home_banner .banner_btn .btn {
	background-color: #0755a7;
	color: #fff;
}



/*solutions*/
.solutions_area .solutions_btn {
	margin: 30px 0;
}
.solutions_area {
	background-image: url(../../../../../cufiles/images/home/solutions_area_bg_1.webp);
	background-repeat: no-repeat;
	background-position: bottom;
	padding: 50px;
}
.solutions_area .solutions_word {
	flex: 1;
}
.solutions_area .container {
	display: flex;
	gap: 50px;
}
.solutions_area .title_mini {
	color: #88b928;
}
.solutions_area .title {
	margin-bottom: 50px;
}
.solutions_area .title h1 {
	color: #0755a7;
	/*font-weight: normal;*/
}
.solutions_area .content {
	margin-bottom: 80px;
}
.solutions_area .solutions_btn .btn {
	background-color: #0755a7;
	color: #fff;
}
.solutions_area .solutions_img {
	flex: 1;
}
.solutions_area .solutions_img img {
	max-width: 100%;
}
/*.solutions_area .solutions_img{
	height: 510px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	padding: 10px;
	overflow: hidden;
}
/*.solutions_area .solutions_bubble{
	position: relative;
}*/
/*.solutions_area .solutions_bubble .solutions_circle{
	width:13vw;
	height:13vw;
	border-radius:999em;
	background-color:#F5F5F5;
	position: relative;
	transform: translate(-75%, 90%);
	left: 97%;
}*/
/*.solutions_area .solutions_bubble .solutions_circle img{
	max-width: 100%;
}*/
.solutions_area .solutions_list {
	padding: 10px 0 10px 35px;
}

/*about_us*/
/*swiper*/
.about_us_area .video_swipre {
	width: 380px;
	height: 320px;
	position: relative;
}
.about_us_area .video_swipre .swiper-slide img {
	display: block;
	width: 100%;
	max-height: 285px;
	/*max-height: 360px;*/
	object-fit: cover;
}
.about_us_area .video_swipre .swiper-slide .play_icon {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: unset;
}
.about_us_area .swiper-pagination-bullet-active {
	background: #165a14;
}

.about_us_area .about_swiper_prev,
.about_us_area .about_swiper_next {
	color: #004059;
}
.about_us_area .swiper-slide a {
	display: block;
	border: 12px solid #fff;
	border-radius: 10px;
}
.about_us_area {
	background-color: #d8edbe;
	padding: 80px 0;
}
.about_us_area > .title {
	margin-bottom: 25px;
}
.about_us_area .title h1 {
	text-align: center;
	color: #165a14;
	/*font-weight: normal;*/
}
.about_us_area .container {
	display: flex;
	padding: 0 20px;
}
.about_us_area .container .about_img {
	display: flex;
	align-items: center;
	position: relative;
	flex: 1;
}

.about_us_area .container .list_content .list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.about_us_area .container .title {
	color: #165a14;
}
.about_us_area .container .title h3 {
	font-weight: normal;
}
.about_us_area .container .content {
	color: #424242;
	max-height: 202px;
	overflow: hidden;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
}
.about_us_area .container .icon {
	width: 70px;
	height: 70px;
	flex-shrink: 0;
	background-color: #88b928;
	border-radius: 50%;
	padding: 12px;
}
.about_us_area .container .list_content {
	flex: 1;
	max-width: 600px;
	max-height: 500px;
	/*padding: 0px 20px 0;*/
}
.about_us_area .list_content .swiper {
	width: 100%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
}
.about_us_area .list_content .swiper-slide {
	display: flex;
	gap: 20px;
	height: calc((100% - 10px) / 2) !important;
}
.swiper-wrapper--- {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

/*intro_area*/
.intro_area {
	background-image: url(../../../../../cufiles/images/home/intro_area_bg.webp);
	padding: 100px 20px;
}
.intro_area .title {
	text-align: center;
	max-width: 800px;
	margin: auto;
}
.intro_area .title h1 {
	/*font-weight: normal;*/
}
.intro_area .title h3 {
	font-weight: 100;
	line-height: normal;
	margin-top: 17px;
}
.intro_area .intro_title h2{
	line-height: 1.2;
	font-size: 2.6rem;
}
.intro_area .container {
	display: flex;
	justify-content: center;
	gap: 50px;
	max-width: 1400px;
	padding: 90px 50px;
}
.intro_area .swiper-slide {
	padding: 10px;
}
.intro_area .intro_image img {
	max-width: 100%;
	object-fit: cover;
	border-radius: 10px 10px 0 0;
}
.intro_area .intro_card {
	background-color: #fff;
	box-shadow: 0px 0px 5px 2px rgb(185 185 185);
	border-radius: 10px;
	height: 100%;
}

.intro_area .intro_image figcaption {
	text-align: left;
	min-height: 190px;
	padding: 15px 30px;
}
.intro_area .swiper-pagination-bullet-active {
	background: #165a14;
}

/*support*/
.support_area {
	background-image: url(../../../../../cufiles/images/home/support_bg.webp);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.support_area .container {
	max-width: 800px;
	padding: 80px 50px;
	color: #fff;
	text-align: center;
}
.support_area .container .title h1 {
	/*font-weight: normal;*/
}
.support_area .content {
	margin-top: 20px;
}
.support_area .content a {
	color: #f6f276;
}
.support_area .questions_btn {
	margin-top: 80px;
}
/*-------------------------------------------- 
	Media Queries 
---------------------------------------------*/
/* Portrait and Landscape */
/*@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
}*/

/*iPad Pro*/
@media screen and (max-width: 1279px) {
	.canvas_main_banner .swiper-slide img{
		height: 86%;
		width: 210px;
	}
	.canvas_main_banner .swiper{
		width: 709px;
	}
	.canvas_main_banner .content{
		gap:0;
	}
	.home_banner .content{
		left: 52%;
		gap: 3vw;
	}
}

/*iPad*/
@media screen and (max-width: 1023px) {
	/*.solutions_area .solutions_bubble{
		display: none;
	}*/
	.solutions_area .solutions_img {
		margin: auto;
		width: 80%;
	}
	.about_us_area .about_btn,
	.solutions_area .solutions_btn {
		text-align: center;
	}
	.about_us_area .flex,
	.solutions_area .flex {
		flex-direction: column;
	}
	.swiper-button-prev,
	.swiper-rtl.swiper-button-next {
		left: -80px;
	}

	.canvas_main_banner .content{
		/*flex-direction: column;*/
		width: 100%;
		gap:0;
		padding-left: 40px;
	}
	.canvas_main_banner .content .img img{
			max-width: 76%;
	}

	.solutions_area .container{
		flex-direction: column;
		gap:5px;
	}
	.about_us_area .container{
		flex-direction: column;
		align-items: center;
	}
	.about_us_area .container .list_content{
		max-width: 362px;
	}
	.swiper-grid-column> .swiper-wrapper{
		height: 50%;
		flex-direction: row !important;
	}
	.canvas_main_banner .swiper-slide{
		height: 200px;
		width: 212px;
		padding: 0 20px;
	}
/*    .canvas_main_banner .content .product .img{
		left: 25%;
	}*/
	.canvas_main_banner .swiper{
		width: 460px;
		margin-top: 175px;
	}
	.swiper-wrapper{
		width: 60%;
	}
	.canvas_main_banner .swiper-slide img{
		height: 76%;
		width: 149px;
	}
	.canvas_main_banner .banner_content{
		padding-left: 40px;
	}
	/*.canvas_main_banner .content .product .img{
		left: 10%;
	}
	.canvas_main_banner .content .product .img img{
		max-width: 80%;
	}*/
	.home_banner .content{
		/*gap: 7vw;*/
		top: 53%;
		flex-wrap: wrap;
		/*align-content: space-between;*/
    		justify-content: center;
    		align-items: center;
    		        left: 50%;
	}
	.home_banner .content .product .img{
		width: 56vw;
	}
	.home_banner .swiper{
	            width: 559px;
	}
	.home_banner .swiper-slide{
               width: 235px;
        height: 168px;
	}
	.home_banner .swiper-slide img{
		height: 100%;
    	        width: 169px;
}

/*iPhone*/
@media screen and (max-width: 767px) {
	.intro_area .container {
		flex-wrap: wrap;
	}
	.about_us_area .about_word {
		margin: 0 30px;
	}

	.support_area .container {
		max-width: 700px;
		padding: 25px;
		color: #fff;
		text-align: center;
	}
	.support_area .questions_btn {
		margin-top: 50px;
	}
	.canvas_main_banner .content{
		flex-direction: column;
		padding-left: 40px;
	}
/*	.about_us_area .container .list_content{
		max-width: 280px;
	}*/
	.canvas_main_banner .swiper{
		width: 408px;
		margin: 100px auto 0px;
	}
	.canvas_main_banner .swiper-slide img{
		height: 68%;
		width: 132px;
	}
	.canvas_main_banner .content .product .img{
	    left: 15%;
    	width: 90%;
	}
    /*.canvas_main_banner .content .img img{
		max-width: 76%;
	}*/
	.canvas_main_banner .banner_content{
		padding: 0px 70px;
	}
	.solutions_area .container{
		padding: 10px;
	}
	.canvas_main_banner .content{
		padding: 0px;
	}
	.info{
		padding: 10px;
	}
	.solutions_area{
		padding: 25px;
	}
	.solutions_area .solutions_word{
		text-align: center;
	}
	.solutions_area .solutions_img{
		width: 55%;
	}
	.swiper-slide{
		padding: 0px 20px;
	}
	.intro_area .intro_title h2{
		font-size: 2.4rem;
	}
	.intro_area .intro_title h4{
		font-size: 1.6rem;
	}
	.tracker_intd .title, .key_features .title{
	    margin: 20px 20px;
	}
	.home_banner .content .product .img{
		            width: 76vw;
            min-width: 390px;
	}
	.home_banner .swiper-slide img{
		width: 169px;
	}
	.home_banner .swiper-slide{
		            width: 230px;
            height: 167px;
	}
	.home_banner .swiper{
		width: 506px;
	}
	.home_banner .banner_content{
		    padding-left: 48px;
	}
}