/* 廣告 */
.AD_index{
	overflow: hidden;
	margin-top:-5rem;
	z-index:3;

	h1{
		position:absolute;
		color:var(--white);
		text-transform: uppercase;
		text-align: center;
		height:fit-content;
		width:fit-content;
		top:0;
		bottom:0;
		left:0;
		right:0;
		margin:auto;
		z-index:1;
	}

	.swiper-container {
		width: 100%;
		height: 100%;
	}
  
	.swiper-slide {
		display: flex;
		align-items: center;
		justify-content: center;
	}
  
	.swiper-slide video {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.swiper-pagination-bullet{
		background:var(--white);
		width:.8rem;
		height:.2rem;
		opacity: 1;
		border-radius:0;
	}

	.swiper-pagination-bullet-active{
		background:var(--red-500);
	}
}

/* World */
.World{
	overflow: hidden;
	padding:7rem 0 11rem 0;

	.World-wrap{
		position:relative;
		width:65%;
		z-index:3;

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

		.country-wrap{
			flex-wrap:nowrap;
			justify-content:space-between;

			.country-group{	
				img{
					display:block;
					width:85%;
					margin:0 auto;
				}

				p{
					font-size:var(--lg);
					color:var(--black);
					line-height:var(--md);
					margin-bottom: 0;
				}

				& + .country-group{
					margin-left: 1rem;
				}

				&:last-child{
					p{
						color:var(--gray-250);						
					}
				}
			}
			
		}
	}

	.bg{
		margin:auto;
		top:0;
		left:0;
		z-index:1;

		img{
			display:block;
			width:100%;
			margin:0 auto;
		}
	}
}

/* History */
.History{
	.title-group{
		width:82.5%;
		&:before{
			position:absolute;
			content:"";
			background:var(--red-500);
			display:block;
			width:100%;
			height:.15rem;
			margin:auto;
			top:0;
			bottom:0;
			right:0;
			z-index:1;
		}

		h2{
			position:relative;
			background:var(--white);
			width:fit-content;
			z-index:9;
		}
	}

	.swiper {
		width: 100%;
		height: 100%;
		margin-bottom:5rem;
	}

	.swiper-wrapper{
		display:flex;
		align-items:stretch;
	}

	.swiper-slide {	
	display: flex;
	flex-wrap:wrap;
	justify-content: center;
	align-items:stretch;
	transition: .5s ease-in-out;
	transform: translate(0, 2.5rem);

		&.swiper-slide-active{
			transform: translate(0, 0);
		}

		.slide-group{
			display:flex;
			flex-wrap:wrap;
			align-content:flex-start;
			height:12rem;

			h3{
				font-size: var(--2lg);
				font-weight:700;
			}

			h4{
				font-size: var(--lg);
				font-weight:700;
			}

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

		img{
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		&:first-child, &:nth-child(4), &:nth-child(7){			
			background:var(--red-500);
			color:var(--white);
		}

		&:nth-child(2), &:nth-child(5){
			background:var(--gray-150);
			color:var(--black);
		}

		&:nth-child(3), &:nth-child(6){
			background:var(--blue-900);
			color:var(--white);
		}
	}

	.swiper-button-next, .swiper-button-prev{
		background:var(--gray-900);
		border-radius:50%;
		color:var(--white);
		width:4rem;
		height:4rem;
		opacity: .7;

		&:after{
			font-size:var(--base);
		}

		&:hover{
			opacity: .9;
		}
	}
}

/* Advantages */
.Advantages{
	margin-bottom: 6rem;

	.title{
		.title-group{
			width:82.5%;
	
			&:before{
				position:absolute;
				content:"";
				background:var(--red-500);
				display:block;
				width:100%;
				height:.15rem;
				margin:auto;
				top:0;
				bottom:0;
				right:0;
				z-index:1;
			}
	
			h2{
				position:relative;
				background:var(--white);
				width:fit-content;
				z-index:9;
			}
		}

		p{
			width:82.5%;
		}
	}

	.Advantages-wrap{
		margin-top: 10rem;

		.photo{
			display:flex;
			width:50%;
			justify-content:flex-end;
			margin-top:-5rem;
			z-index:5;

			img{
				width:66%;
			}
		}

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

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

			.con-wrap{
				.con-group{

					.con-photo{
						width:30%;

						img{
							width:50%;
						}
					}

					.txt{
						width:70%;

						h3{
							font-size:var(--lg);
						}
	
						p{
							font-size:var(--md);
						}
					}

					& + .con-group{
						margin-top: 4.5rem;
					}
				}

				
			}
		}

		&.Advantages2{
			margin-top: 0;

			.photo{
				justify-content:flex-start;
			}

			.con{
				background:var(--blue-900);
				margin-left: 0;
				margin-right: -10%;
				padding:6rem 10rem 10rem 12rem;
			}

			.bg{
				width:28%;
				left:-2rem;
				right:0;
			}
		}
	}	
}

.Forus{
	display:block;
	width:95%;
	margin:0 auto 5rem auto;

	.title{
		margin-bottom: 8rem;
	}

	.Forus-wrap{
		flex-wrap:no-wrap;

		.photo{
			width:55%;
			height:29rem;
			margin-top: -5rem;
			z-index:5;
		}
	
		.Forus-group{
			background:var(--red-500);
			width:50%;
			color:var(--white);
			overflow:hidden;
			box-sizing: border-box;
			margin-left:-10%;
			padding:6rem 7rem 8rem 8rem;

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

			.box{
				
			}

			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;
					}
				}
			}
		}
	}	
}

.FAB {
    position: fixed;
    display: flex;
    align-items: center;
    bottom: 5.2rem;
    right: 0.7rem;
    z-index: 1030;

    .FAB-wrap {
        flex-direction: column;
        width: auto;
        height: auto;

        a {    
            flex-direction: column; 
            width: 100%;
            font-weight:500;
            text-decoration: none;
            color:var(--black);

			p{
				font-size:var(--base);
				text-shadow :1px 1px 3px rgba(255,255,255,1);
			}

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

			&:hover{
				img{
					transform: rotate(-10deg);
				}
			}
        }
    }
}

@media screen and (min-width:1920px){
	/* Advantages */
	.Advantages{
		.Advantages-wrap{
			&.Advantages2{
				.con{
					padding: 12rem 12rem 12rem 12rem;
				}
			}
		}
	}

	.Forus{
		.Forus-wrap{
			.photo{
				height:34rem;
			}

			.Forus-group{
				padding:10rem 7rem 10rem 8rem;
			}
		}
	}
}

@media screen and (min-width:1800px) and (max-width:1919px){
	/* Advantages */
	.Advantages{
		.Advantages-wrap{
			&.Advantages2{
				.con{
					padding: 12rem 12rem 12rem 12rem;
				}
			}
		}
	}

	.Forus{
		.Forus-wrap{
			.photo{
				height:34rem;
			}

			.Forus-group{
				padding:10rem 7rem 10rem 8rem;
			}
		}
	}
}

@media screen and (min-width:1400px) and (max-width:1599px){
	/* 廣告 */
	#AD_index{
		h1.title{
			font-size:var(--32xl);
		}
	}

	/* World */
	.World{
		.World-wrap{
			width:75%;
		}
	}

	/* History */
	.History{
		.title-group{
			width:85.5%;
		}
	}

	/* Advantages */
	.Advantages{
		.title{
			.title-group, p{
				width:85.5%;
			}
		}

		.Advantages-wrap{

			.con{
				.con-wrap{
					.con-group{
						.con-photo{
							img{
								width:50%;
							}
						}
					}
					
				}
			}

			.photo{
				img{
					width:70%;
				}
			}

			

			&.Advantages2{
				.con{
					padding:  7rem 10rem 7rem 10rem;
				}
			}
		}
	}

	.Forus{
		.photo{
			height:26rem;
		}

		.Forus-wrap{
			.Forus-group{
				padding:6rem 7rem 6rem 7rem;
			}
		}
	}
}

@media screen and (min-width:1200px) and (max-width:1399px){
	/* 廣告 */
	#AD_index{
		h1.title{
			font-size:var(--3xl);
		}
	}

	/* World */
	.World{
		.World-wrap{
			width:80%;
		}
	}

	/* History */
	.History{
		.title-group{
			width:88%;
		}

		.swiper-slide {
			.slide-group{
				height:16rem;
			}
		}
	}

	/* Advantages */
	.Advantages{
		.title{
			.title-group, p{
				width:88%;
			}
		}

		.Advantages-wrap{			

			.con{
				.con-wrap{
					.con-group{
						.con-photo{
							img{
								width:65%;
							}
						}
					}
					
				}
			}

			.photo{
				img{
					width:75%;
				}
			}

			&.Advantages2{
				.con{
					padding:  5rem 7rem 5rem 7rem;
				}
			}
		}
	}

	.Forus{	
		.Forus-wrap{
			.photo{
				height:22rem;
			}

			.Forus-group{
				padding:4rem 6rem 4rem 6rem;
			}
		}
	}
}

@media screen and (min-width:1024px) and (max-width:1199px){
	/* 廣告 */
	#AD_index{
		h1.title{
			font-size:var(--3xl);
		}
	}

	/* World */
	.World{
		.World-wrap{
			width:90%;
		}
	}

	/* History */
	.History{
		.title-group{
			width:93%;
		}

		.swiper-slide {
			.slide-group{
				height:18rem;
			}
		}
	}

	/* Advantages */
	.Advantages{
		.title{
			.title-group, p{
				width:93%;
			}
		}

		.Advantages-wrap{			

			.con{
				padding: 6rem 8rem;

				.con-wrap{
					.con-group{
						.con-photo{
							img{
								width:75%;
							}
						}
					}
					
				}
			}

			.photo{
				img{
					width:85%;
				}
			}

			&.Advantages2{
				.con{
					padding:  5rem 7rem 5rem 7rem;
				}
			}
		}
	}

	.Forus{
		.Forus-wrap{
			.Forus-group{
				padding:2rem 4rem 3rem 4rem;
			}

			.photo{
				height:19rem;
				margin-top: -3rem;
			}
		}
	}
}

@media screen and (min-width:992px) and (max-width:1023px){
	/* 廣告 */
	#AD_index{
		h1.title{
			font-size:var(--25xl);
		}
	}
		
	/* World */
	.World{
		.World-wrap{
			width:90%;
		}
	}

	/* History */
	.History{
		.title-group{
			width:93%;
		}

		.swiper-slide {
			.slide-group{
				height:22rem;
			}
		}
	}

	/* Advantages */
	.Advantages{
		.title{
			.title-group, p{
				width:93%;
			}
		}

		.Advantages-wrap{			

			.con{
				padding: 6rem 6rem 6rem 7rem;

				.con-wrap{
					.con-group{
						.con-photo{
							img{
								width:75%;
							}
						}
					}
					
				}
			}

			.photo{
				img{
					width:85%;
				}
			}

			&.Advantages2{
				.con{
					padding:  5rem 7rem 5rem 7rem;
				}
			}
		}
	}

	.Forus{
		.Forus-wrap{
			.Forus-group{
				padding:2rem 4rem 3rem 4rem;
			}

			.photo{
				height:22rem;
				margin-top: -3rem;
			}
		}
	}
}

@media screen  and (max-width:991px){	
	/* World */
	.World{
		padding:4rem 0;

		.World-wrap{
			width:90%;

			.country-wrap{
				flex-wrap:wrap;

				.country-group{	

					& + .country-group{
						margin-left: 0;
					}
				}
			}
		}
	}

	/* History */
	.History{
		.title-group{
			width:93%;

			&:before{
				background:transparent;
			}
		}
	}

	/* Advantages */
	.Advantages{
		.title{
			.title-group, p{
				width:93%;
			}

			.title-group{
				&:before{
					background:transparent;
				}
			}
		}

		.Advantages-wrap{			

			.con{
				.con-wrap{
					.con-group{
						.con-photo{
							width:100%;
						}

						.txt{
							width:100%;
							margin-top: 1.5rem;
						}
					}					
				}				
			}

			.photo{
				img{
					width:100%;
				}
			}
		}
	}

	.Forus{
		width:100%;

		.Forus-wrap{
			flex-wrap:wrap;

			.Forus-group{
				width:100%;				
				margin-left: 0;
			}

			.photo{
				width:100%;
				height:27rem;
				margin-top: -3rem;
			}
		}
	}

	.FAB {
	
		.FAB-wrap {
	
			a {  
				p{
					font-size:var(--sm);
				}
				
				img{
					max-width:60px;
				}
			}
		}
	}
}

@media screen and (min-width:768px) and (max-width:991px){
	/* 廣告 */
	#AD_index{
		h1.title{
			font-size:var(--2xl);
		}
	}

	/* World */
	.World{
		.World-wrap{
			.country-wrap{
				.country-group{	
					width:30%;
					margin-top: 2rem;
				}
			}
		}
	}

	/* History */
	.History{
		.swiper-slide {
			.slide-group{
				height:15rem;
			}
		}
	}

	/* Advantages */
	.Advantages{
		.Advantages-wrap{			
			margin-top:7rem;

			.con{
				width:100%;
				margin-left: -20rem;
				padding: 30rem 6rem 6rem 7rem;

				.con-wrap{
					.con-group{
						.con-photo{
							img{
								width:40%;
							}
						}
					}
				}

				.bg{
					width:100%;
					top:-2rem;
					right:-29rem;
				}
			}

			.photo{
				width:50%;
			}

			&.Advantages2{
				.photo{
					width:50%;
				}

				.con{
					margin-right: -20rem;
					padding:  30rem 6rem 6rem 7rem;

					.con-wrap{
						.con-group{
							.con-photo{
								img{
									width:40%;
								}
							}
						}
						
					}

					.bg{
						width:100%;
						top:-2rem;
						left:-4rem;
						right:0;
					}
				}
			}
		}
	}

	.Forus{
		.Forus-wrap{
			.Forus-group{
				padding:3rem 4rem 4rem 4rem;
			}

			.photo{
				margin-top: -3rem;
			}
		}
	}
}

@media screen and (min-width:648px) and (max-width:767px){
	/* 廣告 */
	#AD_index{
		h1.title{
			font-size:var(--xl);
		}
	}

	/* World */
	.World{
		.World-wrap{
			.country-wrap{
				.country-group{	
					width:30%;
					margin-top: 2rem;
				}
			}
		}
	}

	/* History */
	.History{
		.swiper-slide {
			.slide-group{
				height:15rem;
			}
		}
	}

	/* Advantages */
	.Advantages{
		.Advantages-wrap{			
			margin-top:7rem;

			.con{
				width:100%;
				margin-left: -15rem;
				padding: 22rem 6rem 6rem 7rem;

				.con-wrap{
					.con-group{
						.con-photo{
							img{
								width:40%;
							}
						}
					}
				}

				.bg{
					width:100%;
					top:-2rem;
					right:-21rem;
				}
			}

			.photo{
				width:50%;
			}

			&.Advantages2{
				.photo{
					width:50%;
				}

				.con{
					margin-right: -15rem;
					padding:  22rem 6rem 6rem 7rem;

					.con-wrap{
						.con-group{
							.con-photo{
								img{
									width:40%;
								}
							}
						}
					}

					.bg{
						width:100%;
						top:-2rem;
						left:-4rem;
						right:0;
					}
				}
			}
		}
	}

	.Forus{
		.Forus-wrap{
			.Forus-group{
				padding:3rem 4rem 4rem 4rem;
			}

			.photo{
				height:22.5rem;
				margin-top: -3rem;
			}
		}
	}
}

@media screen and (min-width:576px) and (max-width:647px){
	/* 廣告 */
	#AD_index{
		h1.title{
			font-size:var(--2lg);
		}
	}

	/* World */
	.World{
		.World-wrap{
			.country-wrap{
				justify-content:center;
				
				.country-group{	
					width:60%;
					margin-top: 2rem;

					img{
						width:60%;
					}
				}
			}
		}
	}

	/* History */
	.History{
		.swiper-slide {
			.slide-group{
				height:12rem;
			}
		}
	}

	/* Advantages */
	.Advantages{
		.Advantages-wrap{			
			margin-top:7rem;

			.con{
				width:100%;
				margin-left: -18rem;
				padding: 25em 5rem 7rem 5rem;

				.con-wrap{
					.con-group{
						.con-photo{
							img{
								width:40%;
							}
						}
					}					
				}

				.bg{
					width:100%;
					top:-2rem;
					right:-18rem;
				}
			}

			.photo{
				width:60%;
			}

			&.Advantages2{
				.photo{
					width:60%;
				}

				.con{
					margin-right: -18rem;
					padding:  25rem 5rem 6rem 5rem;

					.con-wrap{
						.con-group{
							.con-photo{
								img{
									width:40%;
								}
							}
						}
					}

					.bg{
						width:100%;
						top:-2rem;
						left:-4rem;
						right:0;
					}
				}
			}
		}
	}

	.Forus{
		.Forus-wrap{
			.Forus-group{
				padding:3rem 4rem 4rem 4rem;
			}

			.photo{
				height:20.5rem;
				margin-top: -3rem;
			}
		}
	}
}

@media screen and (min-width:425px) and (max-width:575px){
	/* 廣告 */
	#AD_index{
		h1.title{
			font-size:var(--lg);
		}
	}

	/* World */
	.World{
		.World-wrap{
			.country-wrap{
				justify-content:center;
				
				.country-group{	
					width:70%;
					margin-top: 2rem;

					img{
						width:60%;
					}
				}
			}
		}
	}

	/* History */
	.History{
		.swiper-slide {
			.slide-group{
				height:14rem;
			}
		}
	}

	/* Advantages */
	.Advantages{
		.Advantages-wrap{			
			margin-top:7rem;

			.con{
				width:100%;
				margin-left: -13rem;
				padding: 20rem 3rem 7rem 3rem;

				.con-wrap{
					.con-group{
						.con-photo{
							img{
								width:40%;
							}
						}
					}
				}

				.bg{
					width:70%;
					top:-2rem;
					right:-5rem;
				}
			}

			.photo{
				width:60%;
			}

			&.Advantages2{
				.photo{
					width:60%;
				}

				.con{
					margin-right: -13rem;
					padding:  20rem 3rem 6rem 3rem;

					.con-wrap{
						.con-group{
							.con-photo{
								img{
									width:40%;
								}
							}
						}
					}

					.bg{
						width:65%;
						top:-2rem;
						left:-3rem;
						right:0;
					}
				}
			}
		}
	}

	.Forus{
		.Forus-wrap{
			.Forus-group{
				padding:2rem;
			}

			.photo{
				height:14.9rem;
				margin-top: -5rem;
			}
		}
	}
}

@media screen and (min-width:320px) and (max-width:424px){
	/* 廣告 */
	#AD_index{
		h1.title{
			font-size:var(--md);
		}
	}

	/* World */
	.World{
		.World-wrap{
			.country-wrap{
				justify-content:center;
				
				.country-group{	
					width:80%;
					margin-top: 2rem;

					img{
						width:60%;
					}
				}
			}
		}
	}

	/* History */
	.History{
		.swiper-slide {
			.slide-group{
				height:16rem;
			}
		}
	}

	/* Advantages */
	.Advantages{
		.Advantages-wrap{			
			margin-top:7rem;

			.con{
				width:100%;
				margin-left: -11rem;
				padding: 14rem 2rem 7rem 2rem;

				.con-wrap{
					.con-group{
						.con-photo{
							img{
								width:40%;
							}
						}
					}
				}
				
				.bg{
					width:70%;
					top:-2rem;
					right:-5rem;
				}
			}

			.photo{
				width:60%;
			}

			&.Advantages2{
				.photo{
					width:60%;
				}

				.con{
					margin-right: -11rem;
					padding:  14rem 2rem 6rem 2rem;

					.con-wrap{
						.con-group{
							.con-photo{
								img{
									width:40%;
								}
							}
						}
					}

					.bg{
						width:65%;
						top:-2rem;
						left:-3rem;
						right:0;
					}
				}
			}
		}
	}

	.Forus{
		.Forus-wrap{
			.Forus-group{
				padding:2rem;
			}

			.photo{
				height:13.1rem;
				margin-top: -5rem;
			}
		}
	}
}

@media screen and (max-width:320px){
	/* 廣告 */
	#AD_index{
		h1.title{
			font-size:var(--base);
		}
	}

	/* History */
	.History{
		.swiper-slide {
			.slide-group{
				height:17rem;
			}
		}
	}

	/* Advantages */
	.Advantages{
		.Advantages-wrap{			
			margin-top:7rem;

			.con{
				width:100%;
				margin-left: -9rem;
				padding: 12rem 2rem 7rem 2rem;

				.con-wrap{
					.con-group{
						.con-photo{
							img{
								width:40%;
							}
						}
					}
					
				}
			}

			.photo{
				width:60%;
			}

			&.Advantages2{
				.photo{
					width:60%;
				}

				.con{
					margin-right: -9rem;
					padding:  12rem 2rem 6rem 2rem;

					.con-wrap{
						.con-group{
							.con-photo{
								img{
									width:40%;
								}
							}
						}
						
					}
				}
			}
		}
	}

	.Forus{
		.Forus-wrap{
			.photo{
				height:11.3rem;
			}
		}
	}
}