/*********************************************************************************

	Template Name: Template Full Name Here
	Description: A perfect template to build beautiful and unique medical websites. It comes with nice and clean design.
	Version: 1.0

	Note: This is custom css.

**********************************************************************************/

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@100;300;400;600;700&display=swap');

.welcome{
	position: relative;
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-flow: wrap;
	justify-content: center;
	align-items: center;
	background: url(../bg02.jpg) center top -450px;

	padding: 30px;
}
.welcome h1{
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: rgb(255 255 255 / 0%);
	text-align: center;
	font-size: 22px;
	line-height: 150%;
	padding: 20px ;
	font-weight: 600;
	letter-spacing: 3px;
}
.welcome h1 span{
	display: block;
	font-size: 16px;
	letter-spacing: 2px;
	color: rgba(0, 0, 0, 0.7);
	font-weight: 400;
	font-family: "Poppins";
}
.welcome ul{
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 30px;
}
.welcome ul li{
}
.welcome ul li a{
	display: block;
	transition: all 0.3s;
}
.welcome ul li a:hover{
	transform: scale(0.9,0.9);
}
@media (max-width: 767px){
	.welcome{
		padding: 20px;
	}
	.welcome ul{
		gap: 10px;
	}
}



/* 首頁 */

.logo h1{
	font-size: 0;
	margin: 0;
	padding: 0;
	line-height: 0;
}

.perform{}
@media (min-width: 1500px){
	.container,
	.container.perform{
		max-width: 1400px;
	}
}

.slick-slider .hero-item {
	position: relative;
}

.slick-slider .hero-item a {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	padding: 30px;
}

.slick-slider .hero-item .con {
	width: 100%;
	max-width: 500px;
	position: relative;
	display: flex;
	flex-flow: wrap;
	gap: 20px;
	padding: 30px 15px;
	background: rgba(0, 0, 0, 0.03);
	color: #fff;
	margin-left: 6%;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}
.slick-slider .hero-item .con::before {
	content: "";
	width: 15px;
	height: 15px;
	display: block;
	position: absolute;
	top: -8px;
	left: 23px;
	transform: rotate(45deg);
}

.slick-slider .hero-item .con h6{
	width: 100%;
	color: rgba(255, 255, 255, 0.7);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0;
}
.slick-slider .hero-item .con h2{
	width: 35%;
	color: #fff;
}
.slick-slider .hero-item .con p{
	display: block;
	flex: 1;
}
.slick-slider .hero-item .con p:last-of-type{
	margin-bottom: 0;
}

@media (max-width: 767px){
	.slick-slider .hero-item a {
		align-items: flex-end;
		padding: 0;
	}
	.slick-slider .hero-item .con {
		padding: 15px;
		display: block;
		margin-left: 0;
		background: rgba(0, 0, 0, 0.3);
		border: none;
	}
	.slick-slider .hero-item .con::before {
		display: none;
	}
	.slick-slider .hero-item .con h6{
		display: none;
	}
	.slick-slider .hero-item .con h2{
		width: 100%;
		font-size: 16px;
		line-height: 150%;
	}
	.slick-slider .hero-item .con p{
		font-size: 12px;
		line-height: 150%;
	}
}



.i_title{
	position: relative;
}
.i_title::after{
	content: "";
	width: 211px;
	height: 142px;
	display: block;
	position: absolute;
	left: 50%;
	top: 60px;
	transform: translateX(-50%);
	background: url(../icon02.svg) no-repeat center;
}
.brook-section-title{
	position: relative;
	z-index: 1;
}






.collection{
	position: relative;
	z-index: 1;
}
.collection h2{
	display: inline-block;
	position: relative;
	padding-bottom: 10px;
}
.collection h2::after{
	content: "";
	width: 1000px;
	height: 1px;
	border-bottom: 1px solid #000;
	position: absolute;
	right: -28px;
	bottom: 0;
}
.collection h2::before{
	content: "";
	width: 100px;
	height: 142px;
	display: block;
	position: absolute;
	right: -125px;
	top: -9px;
	background: url(../icon02-2.svg) no-repeat center;
	background-size: contain;
}

.collection .but01{
	display: inline-block;
	padding: 5px 2px;
	font-size: 14px;
	font-weight: 500;
	border-bottom: #000 solid 1px;
	margin: 15px 0;
	letter-spacing: 4px;
}
.collection .but01 i{
	position: relative;
	left: 0;
	transition: all 0.3s;
}
.collection .but01:hover i{	
	left: 5px;
}



.collection .pic{
	position: relative;
}
.collection .pic::before,
.collection .pic::after{
	content: "";
	width: 300px;
	height: 300px;
	display: block;
	position: absolute;
}
.collection .pic::before{
	top: -30px;
	right: -30px;
	background: rgb(160 199 226 / 50%);
}
.collection .service-skill-slider{
	position: relative;
	z-index: 1;
}

@media (max-width: 1599px){
	.collection h2::before{
		top: -17px;
	}
}
@media (max-width: 1199px){
	.collection h2::before{
		top: -9px;
	}
}
@media (max-width: 991px){
	.collection h2::before{
		top: -17px;
	}
}
@media (max-width: 767px){
	.collection h2::before{
		top: -21px;
	}
}







.rental{
	position: relative;
	background: url(../bg03.jpg) no-repeat center , #000;
	background-size:cover;
	background-attachment: fixed;
}
.rental::after{
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.5);
}
.rental .container{
	position: relative;
	z-index: 1;
}
.rental h2{
	margin-bottom: 30px;
}
.rental p{
	text-align: center;
}




footer{
	position: relative;
	background: #9bc7e1;
	letter-spacing: 2px;
}
footer::after{
	content: "";
	width: 30%;
	height: 100%;
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
}
footer .bk-footer-inner{
	position: relative;
	z-index: 1;
}
footer h2{
	text-transform: uppercase;
	color: #fff;
	font-size: 22px;
	line-height: 150%;
	margin-bottom: 30px;
	letter-spacing: 2px;
	font-weight: 300;
}
footer ul{
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;

	display: grid;
	grid-template-columns: 1fr;
}
footer ul li{
	display: flex;
	gap: 10px;
	text-align: left;
	border: none;
	padding: 0;
	margin: 0 0 15px;
}

footer ul li img{
	width: 20px;
	margin-bottom: 10px;
}
footer ul li a,
footer ul li p{
	color: #fff;
	font-size: 15px;
	line-height: 150%;
	margin: 0;
}
footer ul li p{
	flex: 1;
	letter-spacing: 3px;
}

.copyright{
	padding-left: 60px;
}

@media (max-width: 991px){
	.copyright{
		padding-left: 15px;	
	}
}


/* 內頁 */

.mainbg{
	padding: 1px 0; 
	background: url(../bg02.jpg) ;
	background-attachment: fixed;
}

.mainbg > .container{

}

@media (min-width: 1800px){
	.mainbg > .container{
		max-width: 1700px;
	}
}

.pageswf{
	width: 100%;
	position: relative;
	padding:0 0 30px;
	margin-top: 180px;
	
	display: flex;
	gap: 20px;
	flex-flow: wrap;
	justify-content:space-between;
	align-items: flex-end;
	
}
.pageswf section{
	position: relative;
}
.pageswf section:nth-of-type(1){
	padding-left: 70px;
	background: url(../icon02-2.svg) no-repeat left top;
	background-size: 60px auto;
}

.pageswf h1,
.pageswf h2{
	position: relative;
	font-size: 40px;
	color: #444;
	margin: 0 0 15px;
	font-weight: 500;
	letter-spacing: 5px;
	z-index: 2;
}
.pageswf section:nth-of-type(1):after{
	content: "";
	width: 500px;
	height: 1px;
	display: block;
	position: absolute;
	left: -499px;
	top: 27px;
	opacity: 0.8;
	border-bottom: 1px solid #444;
}

.pageswf p{
	color: #509ecd;
	margin: 0 ;
	font-size: 16px;
	line-height: 150%;
	font-weight: 300;
	letter-spacing: 5px;
	text-transform: uppercase;
	font-family: "Poppins", sans-serif;
}
.pageswf img{
	width: 60px;
	display: inline-block;
	margin-right: 10px;
}

@media (max-width: 479px){
	.pageswf{
	}
	.pageswf h2{
		font-size: 26px;
		margin: 10px 0 10px;
	}
	.pageswf h2 img{
		width: 240px;
	}
	.pageswf p{
		font-size: 13px;
	}
	.pageswf h1,
	.pageswf h2{
		font-size: 32px;
		margin: 6px 0 10px;
	}
}






.page-content{
	padding: 80px 60px ;
	margin-bottom: 80px;
	letter-spacing: 1px;
	background: rgba(255, 255, 255, 0.8);
}
@media (max-width: 767px){
	.page-content{
		padding: 50px 30px ;
	}
}


.breadcrumb {
	padding-right: 0;
	font-size: 13px;
	padding: 4px 5px;
	margin-bottom: 0px;
	border-radius: 0;
	background: transparent;
}
.breadcrumb a {
	color: #515151;
	font-weight: 500;
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	-o-transition: all .2s;
	transition: all .2s;
}
.breadcrumb a::after {
	content: "/";
	display: inline-block;
	padding-right: 8px;
	padding-left: 12px;
	color: rgba(0, 0, 0, 0.5);
}



.pagetitle{
	position: relative;
	font-size: 34px;
	line-height: 1.3;
	font-weight: 400;
	letter-spacing: 3px;
	margin-bottom: 40px;
	z-index: 1;
}
.pagetitle span{
	display: inline-block;
	padding: 0 20px 0 0;
	background: #fdfdfd;
}
.pagetitle::before{
	content: "";
	width: 58px;
	height: 28px;
	display: block;
	position: absolute;
	left: -75px;
	top: 12px;
	background: url(../icon01.png) no-repeat;
	background-size: contain;
}
.pagetitle.noicon::before{
	content: "";
	display: none;
}
.pagetitle::after{
	content: "";
	width: 100%;
	height: 1px;
	display: block;
	position: absolute;
	top: 23px;
	border-bottom: 1px dotted #ccc;
	z-index: -1;
}
.pagetitle img{
	width: 30px;
	display: inline-block;
	position: relative;
	top: -4px;
}
@media (max-width: 767px){
	.pagetitle{
		margin-bottom: 20px;
	}
	.pagetitle::before{
		width: 30px;
		left: -39px;
	}
	.pagetitle::after{
		top: 18px;
	}
}
@media (max-width: 479px){
	.pagetitle::before{
		top: 10px;
	}
	.pagetitle::after{
		top: 15px;
	}
}





.edit{
}
@media (max-width: 767px){
	.pagetitle{
		font-size: 26px;
	}
}
@media (max-width: 479px){
	.pagetitle{
		font-size: 22px;
	}
	.edit{
		padding-bottom: 30px;
	}
}





.pageform{
	display: flex;
	gap: 80px;
}
.pageform > section{}
.pageform > section:nth-of-type(1){
	width: 200px;
}
.pageform > section:nth-of-type(2){
	flex: 1;
}

@media (max-width: 991px){
	.pageform{
		gap: 0;
	}
	.pageform > section:nth-of-type(1){
		display: none;
	}
	.pageform > section:nth-of-type(2){
		width: 100%;
	}
}







/* 公司簡介 */

.about{}
.about article{
}
.about .pic{
	display: inline-block;
	position: relative;
}
.about .pic img{
	position: relative;
	z-index: 1;
}
.about .pic::after{
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 28px;
	right: -23px;
	background: #dfe7ed;
}

@media (max-width: 767px){
	.about .pic::after{
		content: "";
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		top: 20px;
		right: -15px;
		background: #dfe7ed;
	}
}



.about02{}
.about02 .title{
	font-size: 20px;
	background: #f5f5f5;
	border-radius: 30px;
	padding: 10px 20px;
	margin-bottom: 25px;
}
.about02 .title i{
	margin-right: 10px;
	color: #d9b888;
}
.about02 p{
}






/* 最新消息 */

.newslist{
	display: block;
}
.newslist.search{
	display: block;	
}
.newslist.search section{	
	margin-bottom: 10px;
}
.newslist section a{
	display: flex;
	gap: 50px;
	flex-flow: wrap;
	align-items: center;
	padding: 30px 0;
	border-bottom: 1px dotted #ccc;
	transition: all 0.3s;
}
.newslist section a:hover{
}
.newslist section a img{
	width: 100%;
	max-width: 320px;
	object-fit: cover;
	aspect-ratio: 2/1.5;
	border-radius: 4px;
}
.newslist .con{
	flex: 0.6;
}
.newslist a h2{
	font-size: 22px;
	line-height: 150%;
	margin-bottom: 10px;
	transition: all 0.3s;
}
.newslist a:hover h2{
	color: #369edc;
}
.newslist .con p{
	line-height: 150%;
	color: #727272;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}
.newslist .date{
	font-family: "Poppins";
	font-size: 14px;
	color: #999;
	margin-bottom: 15px;
}
.newslist a .but{
	display: inline-block;
	font-size:12px;
	font-weight: 400;
	line-height: 130%;
	text-transform: uppercase;
	padding: 7px 25px ;
	color: #fff;
	background: #444;
	font-family: "Poppins";
	transition: all 0.3s;
}
.newslist a:hover .but{
	background: #369edc;
}



.newslist.info section h4{
	margin-left: -33px;
	margin-right: -30px;
	border-left: 5px solid #00ada9;
	padding: 0 30px;
}
.newslist.info section ul li{
	color: #00ada9;
}




@media (max-width: 1199px){
	.newslist .con{
		flex: 1;
	}
}
@media (max-width: 991px){
	.newslist section a img{
		max-width: 260px;
	}
}
@media (max-width: 767px){
	.newslist section a img{
		max-width: 100%;
	}
	.newslist .con{
		flex-basis: 100%;
	}
	.newslist section a{
		gap: 20px;
	}
}
@media (max-width: 479px){
	
}



/* 會員專區 */

.single-input > section{
	display: flex;
	flex-flow: wrap;
	align-items: flex-start;
	gap:10px 15px;
}

.memberinfo{
	padding: 40px 40px 60px;
	border: #d5d5d5 solid 1px;
}
.memberinfo hr{
	width: 100%;
	height: 1px;
	display: block;
	border-bottom: 2px dotted #b2d4eb;
	margin: 40px 0 10px;
}

.memberinfo .date{
	display: grid;
	gap: 15px;
	grid-template-columns: 1fr 1fr 1fr;
}

#twzipcode{
	display: grid;
	gap: 0 30px;
	grid-template-columns: repeat(3, 1fr);
}

#twzipcode select{
	margin-bottom: 20px;
}

@media (max-width: 767px){
	.memberinfo .date{
		gap: 15px;
		grid-template-columns: 1fr;
	}
	#twzipcode{
		gap: 0;
		grid-template-columns: 1fr;
		margin-bottom: 20px;
	}
}
@media (max-width: 479px){
	.memberinfo{
		padding: 20px 20px 40px;
	}	
}






.historylist{}
.historylist table{}
.historylist table tr{}
.historylist table tr:nth-of-type(even){
	background: #f5f5f5;
}
.historylist table tr:first-of-type{
	border-bottom: 2px solid #000;
}
.historylist table tr th{
	padding: 8px 10px;
	font-weight: 500;
}
.historylist table tr td{}
.historylist table tr th:nth-last-of-type(1),
.historylist table tr th:nth-last-of-type(2),
.historylist table tr td:nth-last-of-type(1),
.historylist table tr td:nth-last-of-type(2){
	text-align: center;
}

.historylist table tr td:nth-last-of-type(1) a{
	display: block;
	color: #369edc;
}

.historylist table tr td span{
	display: none;
}

.historylist_in{}
.historylist_in h3{
	color: #221d72;
	font-size: 22px;
	font-weight: 400;
}
.historylist_in ul{
	margin: 0 0 30px;
	padding: 30px;
	list-style: none;
	background: #f5f5f5;
}
.historylist_in ul li{
	display: flex;
	gap: 15px;
	margin-bottom: 20px;
}
.historylist_in ul li h4{
	width: 90px;
	font-size: 16px;
	line-height: 150%;
	margin: 0;
}
.historylist_in ul li p{
	flex: 1;
	margin: 0;
	line-height: 150%;
}



@media (max-width: 767px){
	.historylist table,
	.historylist table tr,
	.historylist table tbody,
	.historylist table tr th,
	.historylist table tr td{
		width: 100%;
		display: block;
	}

	.historylist table tr:first-of-type{
		display: none;
	}
	.historylist table tr{
		margin-bottom: 30px;
		background: #f5f5f5;
	}
	.historylist table tr td span{
		width: 70px;
		display: inline-block;
		margin-right: 10px;
		color: #999;
	}

	.historylist_in ul li h4{
		width: 70px;
	}
}




.reserve{}
.reserve .step{
	margin: 50px 0 40px;
	padding: 0;
	list-style: none;
	position: relative;

	display: flex;
	gap:0 20px;
	flex-flow: wrap;
	justify-content: center;
	z-index: 1;
}
.reserve .step li{
	position: relative;
	padding: 8px 10px;
	text-align: center;
	color: #cbcbcb;
	
}
.reserve .step li i{
	display: block;
	font-size: 30px;
	margin-bottom: 2px;
}
.reserve .step li.active{
	color: #444;
}
.reserve .step li.active::after{
	content: "";
	width: 50px;
	height: 50px;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	border-radius: 50%;
	background: #edf2f7;
	z-index: -1;
}
.reserve .step li.active i{
	color: #579bcd;
}
.reserve .step li.line{
	display: flex;
	align-items: center;
	color: #c5c5c5;
}
.reserve h3{
	font-size: 20px;
	margin-bottom: 20px;
}
.reserve ol li{
	margin-bottom: 15px;
	line-height: 180%;
}

.reserve a.brook-btn.bk-btn-theme {
	display: inline-block;
	width: 100%;
	max-width: 200px;
	height: auto;
	line-height: 150%;
	font-weight: 400;
	font-size: 20px;
	padding: 15px 30px;
	letter-spacing: 2px;
	border-radius: 3px;
	text-align: center;
}
.reserve a.brook-btn.bk-btn-theme span{
	display: block;
	color: #221d72;
}

.presentation a.brook-btn.bk-btn-theme {
	margin: 0 0;
	padding: 12px 15px;
	font-size: 16px;
}




.reserve .time{
	margin: 0 0 40px;
	padding: 0;
	list-style: none;

	display: grid;
	gap: 15px;
	grid-template-columns: repeat(5, 1fr);
}
.reserve .time li{
	text-align: center;
	border: #444 solid 1px;
}
.reserve .time li a{
	display: flex;
	padding:20px 15px;
	flex-flow: column;
	justify-content: center;
}
.reserve .time li .title{}
.reserve .time li p{
	margin: 0;
}
.reserve .time li.end{
	border: #ccc solid 1px;	
}
.reserve .time li.end a:hover{
	color: #ccc;
}
.reserve .time li.end a{
	color: #ccc;
	cursor: not-allowed;
}
.reserve .time li.full{
	border: #e95454 solid 1px;	
}
.reserve .time li.full a:hover{
	color: #e95454;
}
.reserve .time li.full a{
	color: #e95454;
	cursor: not-allowed;
}
.reserve .time li.active{
	border: #369edc solid 1px;	
	background:#369edc ;
}
.reserve .time li.active a:hover{
	color: #fff;
}
.reserve .time li.active a{
	color: #fff;
}

.pro-qty{
	position: relative;
	width: 100%;
	max-width: 200px;
}
.pro-qty input{
	width: 100%;
	padding: 0.25em 1.8em !important;
}
.pro-qty span{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	position: absolute;
	left: 0;
	padding: 6px 10px;
	font-weight: 600;
	cursor: pointer;
}
.pro-qty span.inc{
	left: auto;
	right: 0;
	top: 0;
}



.reserve .check{
	padding: 30px;
	margin-bottom: 40px;
	background: #f5f5f5;
}
.reserve .check p{
	margin-bottom: 0;
	color: #2f87bb;
}
.reserve .check p span{
	width: 75px;
	display: inline-block;
	text-align: right;
	margin-right: 10px;
	color: #444;
}



.reserve .edit{
	margin-bottom: 40px;
}
.reserve .cost{
	display: flex;
	gap:20px;
	flex-flow: wrap;
}
.reserve .cost h3{
	line-height: 150%;
	margin: 0;
}
.reserve .cost p{
	font-weight: 600;
	font-size: 20px;
	line-height: 150%;
	color: #f14747;
	margin: 0;
}




@media (max-width: 767px){
	.reserve .step{
		margin: 30px 0 20px;
	}
	.reserve .step li,
	.reserve .step li.line{
		display: none;		
	}
	.reserve .step li.active {
		display: block;
	}
	.reserve .step li.active i{
		font-size: 50px;
	}



	.reserve .time{
		gap: 10px;
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 479px){
	.reserve .time{
		grid-template-columns: repeat(2, 1fr);
	}
	.reserve .check p span{
		width: 100%;
		display: block;
		text-align: left;
	}
}




.personinfo{}
.personinfo h4{
	font-size: 16px;
	font-weight: 400;
	margin-bottom: 10px;
}
.personinfo .col-lg-6 > div{
	margin-bottom: 30px;
}
.personinfo select,
.personinfo input[type="text"]{
	height: 3em;
	padding: 0.25em 0.8em;
	font: inherit;
	border-radius: 3px;
   border: 1px solid #cdcdcd;
	margin: 5px 0;
	background: #fff;
}
.personinfo section{
	display: flex;
   flex-flow: wrap;
   align-items: flex-start;
   gap: 10px 15px;
}




/* 公開資訊 */
.showcon{}
.showcon .category{
	display: flex;
	gap: 10px;
	flex-flow: wrap;
}
.showcon .category select{
	flex: 1 0 200px;
}
.showcon .en{
	font-size: 14px;
	padding: 8px 15px;
	color: #818181;
	background: #edf1f5;
	font-family: "Poppins", sans-serif;
}

.showbut{
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: 10px;
	margin-bottom: 40px;
	padding-bottom: 10px;
	background: url(../line03.png) repeat-x bottom;
}
.showbut li{}
.showbut li a{
	display: block;
	padding: 6px 15px;
}
.showbut li.active a{
	color: #509ecd;
}
.show_art{
	font-size: 14px;
	line-height: 150%;
	font-weight: 400;
	margin: 15px 0;
}
.show table tr:nth-of-type(even){
	background: #f5f5f5;
}

.showimg{
	display: none;
}
.showimg img{
	width: 100%;
	object-fit: cover;
	aspect-ratio: 1/1;
}
@media (max-width: 991px){
	.showimg{
		display: block;
		margin-bottom: 10px;
	}
}
@media (max-width: 767px){
	.show table{
		display: block;
		border: none;
	}
	.show table tr{
		display: block;
		padding: 15px;
		border: #dfdfdf solid 1px;
		margin-bottom: 10px;
	}
	.show table tr td{
		display: block;
		border: none;
	}
}



/* 聯絡資訊 */

.contactbg{
	background: url(../contact_01.jpg) no-repeat bottom , #000;
	background-size: cover;
}

.contact-modernbg{
	background: url(../footerbg.jpg) no-repeat center;
	background-size: cover;
}