		/* 自定义滚动条样式 */
		.scrollable::-webkit-scrollbar {
			width: 5px;
			/* 滚动条宽度 */
		}

		.scrollable::-webkit-scrollbar-track {
			background: #f1f1f1;
			/* 滚动条轨道颜色 */
		}

		.scrollable::-webkit-scrollbar-thumb {
			background: #999;
			/* 滚动条滑块颜色 */
		}

		.scrollable::-webkit-scrollbar-thumb:hover {
			background: #999;
			/* 鼠标悬停在滑块上时的颜色 */
		}

		a {
			text-decoration: none;
			color: #fff;
		}

		.display-pc {
			display: none;
		}

		.header-mobile {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
			display: none;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.95);
			padding: 100px 0;
			text-align: center;

		}
		.header-mobile-item{
			width: 100%;
			height: auto;
			/* 描边 */
			border-width: 1px 0px 0px 0px;
			border-style: solid;
			border-color: #333;
			padding: 20px;
			color: #fff;
			
		}

		.mobile-menu-close {
			z-index:9999 ;
			position: absolute;
			top: 20px;
			right: 20px;
		}

		.logo {
			position: absolute;
			left: 0px;
			top: 0px;
			width: 177px;
			height: 66px;
			opacity: 1;

		}

		.logo2 {
			position: static;
			left: 60px;
			top: 60px;
			width: 300px;
			height: 168px;
			border-radius: 0px 0px 30px 0px;
			opacity: 1;
		}






		.a:hover {
			cursor: pointer;
			filter: brightness(0.9);
		}

		.h36 {
			font-family: 思源黑体;
			font-size: 36px;
		}

		.h28 {
			font-family: 思源黑体;
			font-size: 28px;
		}

		.h32 {
			font-family: 思源黑体;
			font-size: 32px;
		}

		.h24 {
			font-family: 思源黑体;
			font-size: 24px;
		}

		.h18 {
			font-family: 思源黑体;
			font-size: 18px;
		}

		.h14 {
			font-family: 思源黑体;
			font-size: 14px;
		}

		.h12 {
			font-family: 思源黑体;
			font-size: 12px;
		}

		.font-bold {
			font-weight: bold;
		}

		.font-w100 {
			font-weight: 100;
		}

		.font-color-blue {
			color: #001353;
		}

		.font-color-333 {
			color: #333;
		}

		.font-color-666 {
			color: #666;
		}

		.font-color-999 {
			color: #999;
		}

		.font-color-fff {
			color: #fff;
		}


		.margin_top5 {
			margin-top: 5px;
		}

		.margin_top10 {
			margin-top: 10px;
		}

		.margin_top15 {
			margin-top: 15px;
		}


		.margin_top20 {
			margin-top: 20px;
		}

		.margin_top30 {
			margin-top: 30px;
		}

		.margin-top35 {
			margin-top: 30px;
		}


		.margin_top40 {
			margin-top: 40px;
		}


		.margin-top160 {
			margin-top: 176px;
		}

		.margin_top216 {
			margin-top: 216px;
		}


		.margin-left10 {
			margin-left: 10px;
		}

		.margin_left20 {
			margin-left: 20px;
		}

		.margin_left40 {
			margin-left: 40px;
		}

		.margin_left60 {
			margin-left: 60px;
		}

		.margin_left80 {
			margin-left: 80px;
		}

		.margin_left120 {
			margin-left: 120px;
		}



		.margin_left5vw {
			margin-left: 5vw;

		}

		.margin-left2p5vw {
			margin-left: 2.5vw;

		}

		.align_items {
			align-items: center;
		}

		.icon12 {
			width: 12px;
			height: 12px;
		}

		.icon16 {
			width: 16px;
			height: 16px;
		}

		.icon20 {
			width: 20px;
			height: 20px;
		}

		.icon24 {
			width: 24px;
			height: 24px;
		}

		.icon30 {
			width: 30px;
			height: 30px;
		}

		.icon36 {
			width: 36px;
			height: 36px;
		}

		.icon40 {
			width: 40px;
			height: 40px;
		}

		.icon50 {
			width: 50px;
			height: 50px;
		}

		.inline {
			display: inline-flex;
			align-items: center;
		}


		body {
			margin: 0;

			width: 100%;
			height: 100%;
			background-color: #fff;
		}



		/* Header */
		header {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: 100;
			padding: 15px 0;
			background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent);
		}

		.header-inner {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			margin: 0 auto;
			padding: 0 60px;
		}




		nav {
			display: flex;
			align-items: center;
			gap: 28px;
		}

		nav a {
			color: #fff;
			font-size: 14px;
			font-weight: 500;
			transition: opacity 0.3s;
			position: relative;
		}

		nav a:hover {
			opacity: 0.8;
		}

		nav a.active {
			font-weight: 700;
		}

		nav a.active::after {
			content: '';
			position: absolute;
			bottom: -4px;
			left: 0;
			right: 0;
			height: 2px;
			background: #fbbf24;
			border-radius: 1px;
		}

		.header-right {
			display: flex;
			align-items: center;
			gap: 20px;
		}

		.header-phone {
			color: #fff;
			font-size: 14px;
			font-weight: 500;
			display: flex;
			align-items: center;
			gap: 6px;
		}

		.header-phone i {
			font-size: 12px;
		}

		.lang-select {
			color: #fff;
			font-size: 14px;
			display: flex;
			align-items: center;
			gap: 5px;
			cursor: pointer;
		}

		.lang-select i {
			font-size: 10px;
		}



		.logo {
			margin-top: 1.8vw;
			margin-left: 2.5vw;
			width: 150px;
			height: 25.66px;
			transition: ease 0.3s;
		}


		.menu {

			width: 100%;
			position: fixed;
			right: 0;
			display: inline-flex;
			margin-top: 2%;
			transition: ease 0.3s;

		}

		.container {
			width: 100%;
			margin: 0 auto;
			padding: 0 60px;
		}


		.banner {

			width: 100vw;
			height: auto;
		}


		/* Our Services */
		.our-services {
			padding: 50px 0;

		}

		.services-header {
			display: flex;
			align-items: center;
			justify-content: space-between;

			margin-bottom: 40px;
		}

		.all-service-link {
			color: #3b82f6;
			font-size: 13px;
			font-weight: 600;

			display: flex;

			align-items: center;
			gap: 5px;
			cursor: pointer;
		}

		.services-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 24px;
		}

		.service-item {
			border-radius: 12px;
			overflow: hidden;
			background: #fff;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
			transition: transform 0.3s, box-shadow 0.3s;
			cursor: pointer;
		}

		.service-item:hover {
			transform: translateY(-4px);
			box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
		}
/* 		.service-item-img {
			height:240px;
			overflow: hidden;
		} */

		.service-item-img img {
			width: 100%;
			height:220px;
			object-fit: cover;
			transition: transform 0.5s;
		}

		.service-item:hover .service-item-img img {
			transform: scale(1.05);
		}

		.service-item-info {
			padding: 16px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.service-item-info h4 {
			font-size: 14px;
			font-weight: 600;
			color: #1e293b;
		}

		.service-item-info .arrow {
			color: #3b82f6;
			font-size: 14px;
		}




		/* Breadcrumb */
		.breadcrumb {
			padding: 25px 0;



		}

		.breadcrumb-inner {
			display: flex;
			align-items: center;
			gap: 8px;
			font-size: 14px;
			color: #64748b;
		}

		.breadcrumb-inner i {
			font-size: 12px;
		}

		.breadcrumb-inner a {
			color: #334155;
			transition: color 0.3s;
		}

		.breadcrumb-inner a:hover {
			color: #3b82f6;
		}

		.breadcrumb-inner .separator {
			color: #cbd5e1;
		}

		.breadcrumb-inner .current {
			color: #334155;
			font-weight: 500;
		}

		/* Footer */
		footer {
			padding: 50px 0 30px;
			background: #fafafa;
			box-sizing: border-box;
			/* 描边 */
			border-width: 1px 0px 0px 0px;
			border-style: solid;
			border-color: #EEEEEE;
		}


		.footer-grid {
			display: grid;
			grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
			gap: 40px;
			margin-bottom: 40px;
		}

		.footer-brand .logo {
			margin-bottom: 15px;
		}

		.footer-brand .logo-icon {
			width: 55px;
			height: 55px;
		}

		.footer-brand .logo-text .brand {
			font-size: 22px;
			color: #1e293b;
		}

		.footer-brand .logo-text .sub {
			color: #64748b;
		}

		.footer-col h5 {
			font-size: 13px;
			font-weight: 600;
			color: #94a3b8;
			margin-bottom: 15px;
			text-transform: uppercase;
			letter-spacing: 0.5px;
		}

		.footer-col ul {
			list-style: none;
		}

		.footer-col ul li {
			margin-bottom: 10px;
		}

		.footer-col ul li a {
			font-size: 13px;
			color: #475569;
			transition: color 0.3s;
		}

		.footer-col ul li a:hover {
			color: #3b82f6;
		}

		.footer-contact-item {
			display: flex;
			align-items: flex-start;
			gap: 10px;
			margin-bottom: 12px;
		}

		.footer-contact-item i {
			color: #3b82f6;
			font-size: 13px;
			margin-top: 2px;
		}

		.footer-contact-item span {
			font-size: 13px;
			color: #475569;
		}

		.footer-social {
			display: flex;
			gap: 10px;
			margin-top: 15px;
		}

		.footer-social a {
			width: 32px;
			height: 32px;
			border-radius: 50%;
			background: #1e293b;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 13px;
			transition: background 0.3s;
		}

		.footer-social a:hover {
			background: #3b82f6;
		}

		.footer-bottom {
			text-align: center;
			padding-top: 20px;
			border-top: 1px solid #f1f5f9;
		}

		.footer-bottom p {
			font-size: 12px;
			color: #94a3b8;
		}

		/* Mobile Menu */
		.mobile-menu-btn {
			display: none;
			color: #fff;
			font-size: 24px;
			cursor: pointer;
			background: none;
			border: none;
		}




		/* book -popup*/
		.book {
			position: fixed;
			padding: 10% 20% 20% 20%;
			width: 100%;
			height: 100%;
			z-index: 999;
			background-color: rgba(0, 0, 0, 0.8);
		}

	/* 	.contact-form {
			z-index: 9999;
			position: relative;
			padding: 40px;
			background-color: #fff;
			border-radius: 10px;
		} */

		.close-btn {
			position: absolute;
			right: 20px;
			top: 20px;
			z-index: 9999;
		}

		.review-text-box {
			max-height: 300px;
			overflow: auto;
			/* 或 overflow: scroll; */

		}



		/* Form */
		.contact-form h3 {
			font-size: 20px;
			font-weight: 600;
			color: #1e293b;
			margin-bottom: 30px;
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.contact-form h3 svg {
			width: 24px;
			height: 24px;
		}

		.form-group {
			margin-bottom: 20px;
		}

		.form-group label {
			display: block;
			font-size: 13px;
			color: #64748b;
			margin-bottom: 6px;
			font-weight: 500;
		}

		.form-group input,
		.form-group textarea,
		.form-group select {
			width: 100%;
			padding: 10px 14px;
			border: 1px solid #e2e8f0;
			border-radius: 6px;
			font-size: 14px;
			font-family: 'Inter', sans-serif;
			color: #334155;
			transition: border-color 0.3s;
			outline: none;
			background: #fff;
		}

		.form-group input:focus,
		.form-group textarea:focus,
		.form-group select:focus {
			border-color: #3b82f6;
		}

		.form-group textarea {
			height: 120px;
			resize: vertical;
		}

		.form-group input::placeholder,
		.form-group textarea::placeholder,
		.form-group select::placeholder {
			color: #94a3b8;
		}

		.form-row {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 20px;
		}

		.form-error {
			display: flex;
			align-items: center;
			gap: 6px;
			font-size: 13px;
			color: #ef4444;
			margin-bottom: 20px;
		}

		.form-error i {
			font-size: 12px;
		}

		.submit-btn {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			background: #f59e0b;
			color: #fff;
			padding: 12px 28px;
			border-radius: 6px;
			font-size: 15px;
			font-weight: 600;
			border: none;
			cursor: pointer;
			transition: background 0.3s;
			font-family: 'Inter', sans-serif;
		}

		.submit-btn:hover {
			background: #d97706;
		}

		.submit-btn i {
			font-size: 13px;
		}




		/* Responsive */
		@media (max-width: 1024px) {
			.service-cards {
				flex-wrap: wrap;
			}



			.service-card {
				flex: 0 0 calc(33.333% - 14px);
			}

			.dest-grid,
			.services-grid,
			.why-grid {
				grid-template-columns: repeat(2, 1fr);
			}

			.footer-grid {
				grid-template-columns: repeat(2, 1fr);
			}
		}

		@media (max-width: 768px) {
			nav {
				display: none;
			}

			.header-inner {

				padding: 0 20px;
			}

			.display_pc {
				display: block;
			}

			.dispay_mobile {
				display: none;
			}

			.container {
				width: 100%;
				margin: 0 auto;
				padding: 0 20px;
			}

			.mobile-menu-btn {
				display: block;
			}

			.header-phone {
				display: none;
			}

			.hero {
				height: 500px;
			}

			.hero h1 {
				font-size: 30px;
			}

			.hero-boat {
				display: none;
			}

			.service-cards {

				margin-top: -30px;
			}

			.service-card {
				flex: 1;
			}

			.dest-grid,
			.services-grid,


			.form-row {
				grid-template-columns: 1fr;
			}

			.contact-form {

				display: block;
				align-items: center;

			}


			.contact-grid {
				display: block;
				grid-template-columns: 280px 1fr;

			}

			.send_message {
				margin-top: 60px;
			}

			.why-grid {
				grid-template-columns: 1fr;
			}

			.footer-grid {
				grid-template-columns: 1fr;
			}

			.testimonial-nav.prev {
				left: 0;
			}

			.testimonial-nav.next {
				right: 0;
			}

			.book {
				position: fixed;
				padding: 5% 5% 5% 5%;
				width: 100%;
				height: 100%;
				z-index: 999;
				background-color: rgba(0, 0, 0, 0.8);
			}

			.contact-form {
				z-index: 9999;
				position: relative;
				padding: 20px;
				background-color: #fff;
				border-radius: 10px;
			}

			.review-text-box {
				max-height: 600px;
				overflow: auto;
				/* 或 overflow: scroll; */

			}
		

		
		}