﻿p svg{
    width: 13px !important;;
}
.i_section01{
	width:100%;
	/* padding:10px 8% 0px; */
    border-bottom: 1px solid #e4e8e9;}

.i_section01 h2{
	display:block;
	color:#444a52;
	font-size:34px;
	font-weight:600;
	text-align:center;
	margin-bottom:60px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	flex-wrap: wrap;}
.i_section01 h2 a{
	font-weight:normal;
	display:inline-block;
	background: #f0efe9;
	color: #333;
    font-size: 13px;
	margin-left:20px;
	max-width:98%;
	padding: 5px 10px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;}
.i_section01 h2 a:hover,
.i_section01 h2 a.i_section01y{	
	background:#5c5a5a;
	color:#fff}

.idex02{
	width:100%;
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
	-ms-flex-pack: justify;
    justify-content: space-between;}
.big_box{
    position:relative;display: flex;
}
.i_box03,.i_box04,.i_box05,.i_box06{
	    overflow: hidden;
	margin:0px 0% 0px;}
.i_box03,.i_box04,.ibox05,.i_box06{
	display:block;
	    width: calc(100% / 3);
    text-align: center;}
.i_box04{
	width:25%;
}
.i_box05{
    width:50%;
}
.type3_2{
    width: 25% !important;
    width: 50% !important;
    float: left;
}
.i_box05a1{
    position: absolute;left: 0;top: 0px;
}
.i_box05a2{
    position: absolute;right: 0;top: 0px;
}
.i_box05a3{
    position: absolute;left: 0;top: 183px;
}
.i_box05a4{
    position: absolute;right: 0;top: 183px;
}
.i_box03a,.i_box02a{
	width:100%;
	height:0;
	padding-bottom:70%;

	/* margin-bottom:30px; */
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	display:block;
	position:relative;
	overflow:hidden;
	/* border-radius: 15px; */
}

.i_box03a:before,.i_box02a:before{
    content: "";
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 0%;
    box-sizing: border-box;
    background: rgba(37,39,43,.73);
    left: 0;
    bottom: 0;
    transition: .3s;
    cursor: pointer;
}

.i_box03:hover .i_box03a:before,.i_box03:hover .i_box02a:before,
.i_box04:hover .i_box03a:before,.i_box04:hover .i_box02a:before,
.i_box05:hover .i_box03a:before,.i_box05:hover .i_box02a:before{
	height: 100%;
    /* z-index: 15; */
    transition: 0.45s; /* 0->0.45s 2022.08.05 */
}
.i_box03:hover .container-d_d2{
    opacity: 1;
}
.i_box03a span,.i_box02a span,.view span{
	display: inline-block;
    position: absolute;
    left: 50%;
    top: 45%;
    width:100%;
    transform: translateY(-50%) translateX(-50%);
    color: #fff;
    /* border-top: 1px solid hsla(0,0%,100%,.5); */
    /* border-bottom: 1px solid hsla(0,0%,100%,.5); */
    /*letter-spacing: 0.3em; 2022.08.05 無須間隔 */ 
    font-family: "微軟正黑體", cursive;/*"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;*/
    font-size: 16px; /*12px -> 16px 2022.08.08 */
    padding: 0px 0px 10px 0px;
    opacity: 0;
    z-index: 8;}

.i_box03:hover .i_box03a span,.i_box03:hover .i_box02a span,.i_box03:hover .view span,
.i_box03:hover p.i_box03c,.i_box03:hover p.i_box03d,
.i_box03:hover .btn_more2,
.i_box04:hover .i_box03a span,.i_box04:hover .i_box02a span,
.i_box04:hover p.i_box03c,.i_box04:hover p.i_box03d,
.i_box04:hover .btn_more2,
.i_box05:hover .i_box03a span,.i_box05:hover .i_box02a span,
.i_box05:hover p.i_box03c,.i_box05:hover p.i_box03d,
.i_box05:hover .btn_more2,
.i_box03:hover .btn_add2,.i_box04:hover .btn_add2,.i_box05:hover .btn_add2
{
    opacity: 1;}
.i_box03:hover .swiper-pagination-bullet{
   /* opacity: 0; */
   z-index: -1;
}
.i_box03:hover .container-d_d2{
    opacity: 1;
}


.i_box03 p.i_box03b,
.i_box04 p.i_box03b{
	font-size:15px;
    color: #abb9b9;
	letter-spacing:0.1em;
	margin-bottom:12px;
}

.i_box03 h3,.i_box04 h3 {
	font-size: 20px;
	text-align: center;
	display: block;
	letter-spacing: 0.2em;
	margin-bottom: 15px;
	text-transform: uppercase;
	color: #b63333;
}
.i_box03 p.i_box03c,.i_box03 p.i_box03d,
.i_box04 p.i_box03c,.i_box04 p.i_box03d {
	text-transform: uppercase;
    display: inline-block;
    position: absolute;
    left: 1%;
    bottom: 19%;
    /* transform: translateY(-50%) translateX(-50%); */
    color: #fff;
    /* letter-spacing: 0.3em; 2022.08.05 無須間隔 */
	font-family:  "微軟正黑體", cursive;/*"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;*/
    font-size: 12px;
    padding: 0px 5px 0px 5px;
    opacity: 0;
    z-index: 1;
}
.i_box03_{
    font-size:9px!important;
}

.i_box03 p.i_box03d,.i_box04 p.i_box03d{
    /* left: 17%; */
    bottom: 13%;
}
.i_box05 p.i_box03d{
    bottom:8%;
}
.i_box05 p.i_box03c{
    bottom:8%;
    bottom:16%;
}
p.i_box03e{
    bottom: 25% !important;;
}
.box03e,.box03c,.box03d{
    position: absolute;
    right: 0;
    width: 98%;
    text-align: right;
}
.btn_more2{
	border: 1px solid rgb(255, 255, 255);
	padding:5px;
    text-transform: uppercase;
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 55%;
    transform: translateY(-50%) translateX(-50%);
    color: #fff!important;
    /*letter-spacing: 0.3em; *//*2022.08.08 無須間隔*/
    font-size: 12px;
    padding: 5px;
    opacity: 0;
    z-index: 9;
    width: 85px; /*35%->85px 2022.08.08 more 按鈕寬度固定 85px */

}
.type2.btn_more2{
    min-width: 85px;  /*35%->85px 2022.08.08 more 按鈕寬度固定 85px */
}
.btn_more2 img{
    width:17%;
}
.btn_more22{
    padding: 5px;
    /*width: 50%;*/ /* 2022.08.08 more 按鈕寬度固定 85px */
}

@media only screen and (max-width: 1200px) {
.i_box01{
    width: 95%;
    margin: 0 1.5% 30px;}
.i_box01 h3::after {
    bottom: 15px;}
.i_box01 h3 {
    padding: 20px 0 25px;}

.i_box03a,.i_box02a {
    /* margin-bottom: 15px; */
}

.i_box03 h3 {
    font-size: 20px;
    margin-bottom: 10px;}
.i_box03 p.i_box03c,.i_box03 p.i_box03d {
    font-size: 14px;}
.i_box03 p.i_box03c {
    padding-top: 10px;}
.i_section01{
    padding: 60px 0% 0px;}
    .i_box05a1{
        position: absolute;left: 0;top: 0px;
    }
    .i_box05a2{
        position: absolute;right: 0;top: 0px;
    }
    .i_box05a3{
        position: absolute;left: 0;top: 140px;
    }
    .i_box05a4{
        position: absolute;right: 0;top: 140px;
    }
}

@media only screen and (max-width: 1023px) {
	.i_section01 {
		padding: 60px 0% 0px;}

	.i_box03 {
		margin: 0px 0% 0px;}

	   .type3.i_box03 {
		width: 50%!important;
		width: 33%!important;

	}
		.type3.i_box05 {
			width: 50%!important;} 
		
	.about_box03{
		padding:15px;
		padding:0px;
	}

	@media only screen and (max-width: 900px) {
		.i_box03cc{
			width: 50%!important;
		}   
		.type3.i_box03 {
			width: 50%!important; 
		}
		.i_section01 {
			padding: 60px 20px 0px;}
		.idex02{
			-webkit-flex-wrap: wrap;
			-moz-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;}

		.i_box03{
			width: 50%;}


		.i_box03 p.i_box03b {
			font-size: 11px;
			margin-bottom: 10px;}
		.i_box03 h3 {
			font-size: 20px;}
		.i_box03 p.i_box03c {
			padding-top: 0px;
			border-top: 0px solid #e4e8e9;}
		.i_box03a span,.i_box02a span{
			top: 40%; /* 51% -> 40% 2022.08.08 */
		}
		.btn_more2 img{
			width:14%;
		}
		p.i_box03e2 {
			bottom: 6% !important;
			font-size: 12px!important;
		}
	}
	
	@media only screen and (max-width: 768px) {
		.i_section01 h2 {
			margin-bottom: 20px;}
		.i_section01 {
			padding: 30px 0px 0px;}
		.i_box02a {
			width: 100%;
			padding-bottom: 70%;
		}
		.i_box03a {
			width: 100%;
			padding-bottom: 70%;
		}
		.i_box03 {
			margin: 0px 0% 0px;
		}
		.i_box03{
			width: 100%;
		}
		.i_section01 h2 {
			font-size: 20px;
		}
	}
	
	.i_box04,.i_box05 {
		width: 50%;
	}

}
@media only screen and (max-width: 1200px) {
   
    .i_box06{
        width: 100% !important;
    }
    .i_box062{
        width: 50% !important;
    }
    .type2, .typee {
        width: 25% !important;}
    
}
@media only screen and (max-width: 1000px) {
    .i_box03.col-lg-4, .i_box03.col-lg-6{
        width: 50%;
    }

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

    .i_box02a span{
        top:40%;
    }
    .btn_more2{
        top: 50%; /* 60% -> 50% 2022.08.08*/
    }
    .btn_more22{
        top: 60%; /* 76% -> 60% 2022.08.08*/
    }
    /* p.i_box03e{
        bottom:20% !important;
    } */
    /* .i_box03 p.i_box03c{
        bottom:12%;
    } */

    .i_box05 p.i_box03_{
        bottom: 12% !important;
    }
    .i_box05.i_box03a span{
        top: 52%;
    }
    .i_box05.btn_more2{
        top: 60%; /* 76% -> 60% 2022.08.08*/
    }
}

@media only screen and (max-width: 675px) {
	.i_box06{
		/* width: 100% !important; */
	}
	.btn_more2{
	}
	.btn_more22{
		top: 60%; /* 70% -> 60% 2022.08.08*/
	}
	.i_box03a span, .i_box02a span{
		width:100%
	}
	.i_box03 p.i_box03c, .i_box03 p.i_box03d, .i_box03a span {
		font-size: 12px;
	}
	.i_box03.col-lg-4, .i_box03.col-lg-6{
		width: 100%;
	}
} 
   
@media only screen and (max-width: 481px) {
	.i_box03a span,.i_box02a span,.view span{
		top: 40%;
	}
	.btn_more22 {
		top: 65%; /* 70% -> 60% 2022.08.08*/
	}
	
	.i_box04 .btn_more2{
		width: 50%;
		top: 65%;
	}
    
	.type3 .user_place {
		top: 55% !important;
	}
}