/* Franchise */
.Franchise{
	.Franchise-wrap{
		width:65%;
		margin-bottom: 5rem;
		
		.con{
			width:72%;

			p{
				font-size:var(--md);
				color:var(--gray-500);
			}
		}

		.photo{
			position:relative;
			width:28%;
			z-index:5;
		}
	}
}	

/* Support */
.Support{
	background:var(--gray-150);
	overflow:hidden;
	margin-top: -8rem;
	padding: 8rem 0 5rem 0;

	.bg{
		width:17.5%;
		opacity: 1;
		top:-4rem;
		left:-2rem;
		z-index:1;
	}

	.Support-wrap{
		position:relative;
		width:65%;
		z-index:5;

		p{
			color: var(--gray-500);
		}

		.Support-list{
			justify-content:space-between;
		}

		.Support-group{
			width:19%;

			img{
				width:95%;
			}

			p{
				font-weight:700;
				color:var(--gray-900);
			}
		}
	}
}

/* Contat */
.Contat{
	.Contat-wrap{
		flex-wrap:no-wrap;
		margin-top: 10rem;
		margin-bottom: 7rem;
		
		.photo{
			width:50%;
			margin-top:-5rem;
			z-index:5;
		}

		.con{
			background:var(--red-500);
			color:var(--white);
			width:55%;
			overflow: hidden;
			box-sizing: border-box;
			margin-left: -10%;
			padding:8rem 12.5rem;

			.bg{
				width:25%;
				opacity: .3;
				top:-4rem;
				right:-2rem;
				z-index:1;
			}

			p{
				position:relative;
				z-index:3;
			}

			.link{
				a{
					background:var(--white);
					font-size:var(--md);
					font-weight:600;
					color:var(--black);
					text-transform: uppercase;
					text-decoration: none;
					border-radius:3rem;
					margin:0 .5rem;			
					padding:.7rem 2.4rem .5rem 1.2rem;

					&:before{
						position:absolute;
						content:"";
						background:url('../../images/layout/2024/icon_right_red.svg');
						color:var(--red-500);
						display:block;
						width:9px;
						height:15px;
						transition: .2s ease-in-out;
						z-index:1;
						margin:auto;
						top:0;
						bottom:0;
						right:1.2rem;
					}

					&:hover{
						&:before{
							right:.9rem;
						}
					}
				}
			}

			.bg-box{
				position:absolute;
				content:"";
				background:var(--blue-900);
				width:1.5rem;
				height:1.5rem;
				bottom:0;
				right:0;
			}
		}
	}
}

/* AD 廣告 */
#AD-Franchise{
	margin-top:10px;
}

/* Franchise */
.Franchise-con a:hover{
	color:#e60012;
	text-decoration: none;
}

.Franchise-con button{
	font-size:20px;
	margin:0 5px;
	padding:8px 12px;
}

@media screen and (min-width:1920px){
	/* Contat */
	.Contat{
		.Contat-wrap{
			.con{
				padding:11.5rem 12.5rem;
			}
		}
	}
}

@media screen and (min-width:1800px) and (max-width:1919px){
	/* Contat */
	.Contat{
		.Contat-wrap{
			.con{
				padding:10.5rem 12.5rem;
			}
		}
	}
}

@media screen and (min-width:1400px) and (max-width:1599px){
	/* Franchise */
	.Franchise{
		.Franchise-wrap{
			width:75%;
		}
	}

	/* Support */
	.Support{
		.Support-wrap{
			width:75%;
		}
	}
	
	/* Contat */
	.Contat{
		.Contat-wrap{
			.con{
				padding:7rem;
			}
		}
	}
}

@media screen and (min-width:1200px) and (max-width:1399px){
	/* Franchise */
	.Franchise{
		.Franchise-wrap{
			width:80%;

			.con{
				width:70%;
			}

			.photo{
				width:30%;
			}
		}
	}

	/* Support */
	.Support{
		margin-top: -7rem;

		.Support-wrap{
			width:80%;
		}
	}
	
	/* Contat */
	.Contat{
		.Contat-wrap{
			.con{
				padding:4rem 6rem;
			}
		}
	}
}

@media screen and (min-width:1024px) and (max-width:1199px){
	/* Franchise */
	.Franchise{
		.Franchise-wrap{
			width:90%;
		}
	}

	/* Support */
	.Support{
		.Support-wrap{
			width:90%;
		}
	}
	
	/* Contat */
	.Contat{
		.Contat-wrap{
			.photo{
				margin-top:-4rem;
			}

			.con{
				padding:2rem 4rem 2rem 4.5rem;

				.bg{
					width:28;
					top:-3rem;
					right:-2rem;
				}
			}

			.link{
				p{
					&:first-child{
						width:45%;
					}
				}

				a{
					text-align:center;
					padding:.7rem 2.4rem .5rem 1.2rem;
				}
			}
		}
	}
}

@media screen and (min-width:992px) and (max-width:1023px){
	/* Franchise */
	.Franchise{
		.Franchise-wrap{
			width:90%;
		}
	}

	/* Support */
	.Support{
		.Support-wrap{
			width:90%;
		}
	}
	
	/* Contat */
	.Contat{
		.Contat-wrap{
			.photo{
				margin-top:-4rem;
			}

			.con{
				padding:2rem 4rem 2rem 4.5rem;

				.bg{
					width:28;
					top:-3rem;
					right:-2rem;
				}
			}

			.link{
				p{
					&:first-child{
						width:48%;
					}
				}

				a{
					text-align:center;
					padding:.7rem 2.4rem .5rem 1.2rem;
				}
			}
		}
	}
}

@media screen and (max-width:991px){
	/* Franchise */
	.Franchise{
		.Franchise-wrap{
			width:90%;

			.photo, .con{
				width:100%;
			}

			.photo{
				margin-top: 0;
			}
		}
	}

	/* Support */
	.Support{
		margin-top: 0;		
		padding:5rem 0 4rem 0;

		.Support-wrap{
			width:90%;
		}
	}
	
	/* Contat */
	.Contat{
		.Contat-wrap{
			flex-wrap:wrap;
			margin-top: 5rem;
			margin-bottom: 5rem;
			
			.photo, .con{
				width:100%;
			}

			.link{
				a{
					text-align:center;
				}
			}
		}
	}
}

@media screen and (min-width:768px) and (max-width:991px){
	/* Support */
	.Support{
		padding: 5rem 0 1rem 0;

		.bg{
			width:35%;
			top:-4rem;
			left:-2rem;
		}

		.Support-wrap{
			.Support-list{
				justify-content:space-around;
			}

			.Support-group{
				width:30%;
				margin-bottom: 2rem;
			}
		}		
	}
	
	/* Contat */
	.Contat{
		.Contat-wrap{
			margin-top: 10rem;

			.con{
				margin-left: 0;
				padding:3rem;

				.bg{
					width:40%;
					top:-6rem;
					right:-5rem;
				}
			}

			.link{
				p{
					&:first-child{
						width:29%;
					}
				}

				a{
					padding:.7rem 2.4rem .5rem 1.2rem;
				}
			}
		}
	}
}

@media screen and (min-width:648px) and (max-width:767px){
	/* Support */
	.Support{
		padding: 5rem 0 1rem 0;

		.bg{
			width:45%;
			top:-3rem;
			left:-3rem;
		}

		.Support-wrap{
			.Support-list{
				justify-content:space-around;
			}

			.Support-group{
				width:30%;
				margin-bottom: 2rem;
			}
		}		
	}
	
	/* Contat */
	.Contat{
		.Contat-wrap{
			margin-top: 10rem;

			.con{
				margin-left: 0;
				padding:3rem;

				.bg{
					width:40%;
					top:-5rem;
					right:-4rem;
				}
			}

			.link{
				p{
					&:first-child{
						width:35%;
					}
				}

				a{
					padding:.7rem 2.4rem .5rem 1.2rem;
				}
			}
		}
	}
}

@media screen and (min-width:576px) and (max-width:647px){
	/* Support */
	.Support{
		padding: 5rem 0 1rem 0;

		.bg{
			width:50%;
			top:-3rem;
			left:-3rem;
		}

		.Support-wrap{
			.Support-list{
				justify-content:space-around;
			}

			.Support-group{
				width:60%;
				margin-bottom: 2rem;
			}
		}		
	}
	
	/* Contat */
	.Contat{
		.Contat-wrap{
			margin-top: 10rem;

			.con{
				margin-left: 0;
				padding:3rem;

				.bg{
					width:45%;
					top:-5rem;
					right:-4rem;
				}
			}

			.link{
				p{
					&:first-child{
						width:40%;
					}
				}

				a{
					padding:.7rem 2.4rem .5rem 1.2rem;
				}
			}
		}
	}
}

@media screen and (max-width:575px){
	/* Support */
	.Support{
		padding: 5rem 0 1rem 0;

		.bg{
			width:80%;
			top:-3rem;
			left:-3rem;
		}

		.Support-wrap{
			.Support-list{
				justify-content:space-around;
			}

			.Support-group{
				width:60%;
				margin-bottom: 2.5rem;
			}
		}		
	}
	
	/* Contat */
	.Contat{
		.Contat-wrap{
			margin-top: 10rem;

			.con{
				margin-left: 0;
				padding:3rem 2.5rem;

				.bg{
					width:60%;
					top:-5rem;
					right:-4rem;
				}
			}

			.link{
				p{
					&:first-child{
						width:1000%;
					}
				}

				a{
					padding:.7rem 2.4rem .5rem 1.2rem;
				}
			}
		}
	}
}

@media screen and (max-width:320px){
	.Contat{
		.Contat-wrap{
			.con{
				padding:3rem;
			}
		}
	}
}