@charset "utf-8";
/* CSS Document */

* {

}
form {
	margin-bottom: 0;
}
.logo {
	color: #ffffff !important;
	font-family: Microsoft JhengHei;
	font-size: 1.7rem;
	font-weight: 900;
}

.ilogo {
	width: 110px;
	height: auto;
	clear: both;
}

.mlogo {
	width: 40%;
	clear: both;
	margin: 0 auto;
}

.mwlogo {
	width: 100%;
	clear: both;
	margin: 25 auto;
}

.company-logo-img{
	max-height: 30px;
}

img {
	width: 100%;
}

body {
	font-family: 'Noto Sans TC','Noto Serif TC', Times, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft JhengHei", 微軟正黑體, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;line-height: 1.25em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1.5;
}

h1,
h2,
h3,
h6 {
	color: #14193c;
}

p {
	font-size: 1em;
}

dl,
ol,
ol ol,
ol ul,
ul,
ul ol,
ul ul {
	margin-left: 0;
	padding-left: 0;
}

ul {
	margin-left: 30px;
	padding-left: 0;
}

ul li {
    list-style: none;
	font-size: .9em;
}

a {
	text-decoration: none;
	color: #212529;
	font-weight: 700;
}
.link {
	color: #0d6efd;
    text-decoration: underline;
}

table {
	border: 1px solid #666;
	text-align: center;
	border-collapse: collapse;
	font-size: .9em;
}

th {
	background-color: #eee;
	padding:15px 20px;
	border:1px solid #666;
	color:#000;
}

th,
td {
	background-color: #fff;
	border:1px solid #666;
	padding:15px 20px;
}
.pb-15 {
    padding-bottom: 15px;
}
.pt-15 {
    padding-top: 15px;
}
.pt-4rem{
	padding-top: 4rem;
}
.navbar-dark .navbar-nav .nav-link, .contact-us {
    color: rgba(255,255,255,1);
	font-size: 1.2rem;
	font-weight: 600;
	margin: 0 1.2rem;
}

.nav-tit {
	padding: .5rem 2rem!important;
	background-color: #feeddd;
	color: #373f56;
	font-size: 1rem;
	font-weight: bolder;
	line-height: 2.2rem;
	border-radius: 100px 100px 100px 100px;
}

.navbar-dark .navbar-toggler-icon {
    background-image: url("../images/bars-solid.svg");
}

mark {
	color: #d82a43;
	background-color: transparent;
	padding: 0;
}

.nav-link {
	font-size: 1.2rem;
}

.link2 {
	color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
}
.txt-red {
	color: #f8b500 !important;
}

.mt-30 {
	margin-top: 30px;
}

.caption {
	position: absolute;
	color: #fff;
	bottom: 5%;
	right: 20%;
	transform: translateX(50%) translateY(-60%);
	background-color:#ffffff00;
	padding: 20px;
}

.tit-li {
	font-size: 1rem;
	font-weight: 700;
	margin-left: -16px;
}

.style-li::before {
	content: "\25AA";
	color: #0072a6;
	font-size: 1.1rem;
	padding-right: 10px;
	margin-left: -16px;
}

.style-li2::before {
	content: "\25AA";
	color: #d82a43;
	font-size: 1.1rem;
	padding-right: 10px;
	margin-left: -16px;
}

.bg-nav {
	background-color: #523C26 !important;
}

.bg-nav2 {
	background-color: #13325e!important;
}

.ai-flex {
	display: flex;
	align-items: center;
}

.ci-h {
	height: 100vh;	
	background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.ci-h2 {
	height: 50vh;
	background-repeat: no-repeat round;
	background-position: center;
}

.ci-bg1 {
    background-image: url("../images/Golf_OG_1200X630.jpg");
}

.ci-bg2 {
	background: url("../images/kaohsiung-banner-1.jpg") center center / 100%;
}

.ci-bg3 {
	background: url("../images/jp-4days-banner-1.jpg") center center / 100%;
}

.ci-bg4 {
	background: url("../images/jp-5days-banner-1.jpg") center center / 100%;
}

.ci-bg5 {
	background: url("../images/jp-kr-banner-1.jpg") center center / 100%;
}

.ci-bg6 {
	background: url("../images/header_bg_new03.jpg") center center / 100%;
}

.ci-txt {
	text-shadow: 0px 0px 10px #000;
}

.ci-txt h5 {
	font-size: 3rem;
	font-weight: 700;
}

.ci-txt h6 {
	font-size: 2.5rem;
	color: #fff !important;
	/* text-shadow: 3px 3px 3px #333; */
}

.ci-txt p {
	font-size: 1.5rem;
	font-weight: 200;
}

.on-txt h5 {
	font-size: 2rem;
	font-weight: 700;
}

.on-txt p {
	font-size: 1.2rem;
	font-weight: 200;
	margin: 0;
}

.bg-gray {
	background-color: #f3efe4c4 !important;
}
.bg-yellow {
    background-color: #f3efe466 !important;
}

.bg-yellow2 {
    background-color: #ffcc0012 !important;
}

.bg-light {
    background-color: #fffaea !important;
}

.bg-pink {
	background-color: #fee9e8 !important;
}

.bg-blue {
	background-color: #5fbded3b !important;
}

.bg-dark{
	background-color: #121717 !important;
}
.bg-gold{
	background: linear-gradient(
        90deg,
        #463206 0%,
        #F4E6B7 6%,
        #9E8D60 12%,
		#6C5830 25%,
        #6C5830 75%,
        #9E8D60 85%,
		#F6E8B9 93%,
        #463206 100%
    );
	position: sticky;
	top: 46px;
	z-index: 1; 
}

.indlink {
	height: 16em;
	background-repeat: no-repeat;
	background-position: center center;
	border: none;
	border-radius: 0;
	margin-top: 70px;
	color: #000;
	text-decoration: none;
	background-size: 100%;
}

.indtit {
	width: 25%;
	margin: 5em auto;
	background-color: rgba(255, 255, 255, 0.9);
	text-align: center;
	justify-content: center;
	display: flex;
	align-items: center;
}

.il-bg1 {
	background-image: url("../images/indlink-01.jpg");
}

.il-bg2 {
	background-image: url("../images/indlink-02.jpg");
}

.il-bg3 {
	background-image: url("../images/indlink-03.jpg");
}

.indp {
	text-align: center;
	line-height: 2.4em;
}

.about-box {
	margin: 0 30px;
}

.about-box h5 {
	font-size: 2.5rem;
	font-weight: 600;
	color: #fff;
}
.about-box .title-lg {
	font-size: 3.6rem;
	font-weight: 700;
	color: #fff;
}
.about-box p {
	font-size: 1.1rem;
    color: #fff;
    line-height: 1.8;
}

.about-icon {
	font-size: 2.5rem;
	margin: 0px auto;
	color: #d82a43;
	width: 2.5rem;
}

.model {
	padding: 20px;
	background: #fff3f3;
	border: 0.3px #d82a43 solid;
	margin-bottom: 30px;
	color: #d82a43;
	font-weight: 700;
	text-align: center;
}
.madel h4 {
	color: #d82a43 !important;
}

.ps {
	font-size: .8rem;
}

.med-a {
	border-radius: 0;
	border: none;
	box-shadow: 0 0 20px 1px #cccccc;
}
.recommended-section{
	background: var(--blue-dark);
}
#recommended-products .med-a {
	box-shadow: none;
}
#recommended-products .med-a img{
	border-radius: 16px 16px 0 0;
}
#recommended-products .med-a .card-body{
	border-radius: 0 0 16px 16px;
}
#recommended-products .card{
	border-radius: 16px 16px 16px 16px;
}

.med-a img {
	border-radius: 0;
}

.med-a h5 {
	font-weight: 700 !important;
	margin: 0;
}

.med-a h6 {
	font-size: 1em;
}

.med-a p {
	line-height: 1.8em;
	font-size: 0.9em;
}

/* .med-a a {
	color: #d82a43;
	border: 1px solid #d82a43;
	padding: .4em 1.8em;
	background: none;
	border-radius: 20px;
	float: none;
	margin: 0 auto;
	display: block;
	width: 50%;
}

.med-a a:hover {
	background-color: #d82a43;
	color: #fff;
	border: 1px solid #d82a43;
} */

.sa-bg {
	height: 40vh;
	background-image: url("../images/sale-bg-01.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.mc-bg {
	height: 40vh;
	background-image: url("../images/mice-bg-01.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.sale-txt {
	text-align: center;
	color: #fff;
	font-size: 1.1em;
}

.sale-txt h5,
.sale-txt h6 {
	text-shadow: 0px 0px 10px #000;
}

.sale-txt h5 {
	font-size: 1.8em !important;
}

.sale-txt h6 {
	font-size: 1.2em !important;
}

.sale {
	width: 90%;
	margin: 0 auto;
	padding-bottom: 3em;
}

.sale-box {
	padding: 1.5em;
}


.vi-h {
	height: 40vh;
	background-repeat: no-repeat;
	background-position: center center;
	padding-top: 150px;
	color: #fff;
	text-shadow: 0px 0px 5px #000;
	font-weight: 500;
}

.vi-bg1 {
	background-image: url("../images/vi-bg01.jpg");
}

.sidenav-li {
	padding: 15px 0;
	border-bottom: #9e9f9f 0.8px dotted;
}

/* 行程卡片 */
.card-body h5 {
	margin-bottom: .8rem;
}

.card-body h5 a {
	color: #000;
	width: 100%;
	padding: 0;
	border: none;
}

.card-body h5 a:hover {
	background-color: #d82a43;
	border: none;
	border-radius: 0;
	color: #fff;
}

.card-body span.tag {
	font-size: .8rem;
	color: var(--white);
	background-color: var(--tiffany);
	padding: .3rem .8rem;
	border-radius: 20px;
	margin-right: 10px;
}

.tag-box {
	margin-bottom: .8rem;
}

.date-box {
	font-size: .8rem;
}

.date-box span.date-txt {
	padding: .4em;
	float: left;
}

a.more {
	border: none;
	display: block;
	float: left;
	color: #d82a43;
	padding: .4em .1em;
	background: none;
	margin: 0 auto;
	width: auto;
}

a.more:hover {
	background-color: #d82a43;
	border: none;
	border-radius: 0;
	color: #fff;
}

.date-txt {
	float: left;
}

.price {}

.price a.pb {
	float: right;
	font-size: 1.4rem;
	border: none;
	clear: both;
	font-weight: 900;
	text-align: right;
	width: auto;
	padding: .2rem;
	color: var(--richmond-primary);
}

.price a.pb:hover {
	/* background-color: #d82a43; */
	color: var(--richmond-primary);
	border: none;
	border-radius: 0;
}

.price a.pb::before {
	content: "$";
	color: #000;
	font-weight: 400;
	font-size: .8rem;

}

.price a.pb::after {
	content: "元起";
	color: #000;
	font-weight: 400;
	font-size: .8rem;
}

.w-100 {
	width: 100% !important;
}

/* 行程內容 */
.topic::after {
	content: "";
	width: 50px;
	height: 4.5px;
	background: #f8b500;
	display: block;
	margin-top: 6px;
}

.datebox {
	background: #fff;
	padding: 20px 20px;
	box-shadow: #eee 10px 10px 30px;
	border: none;
	border-left: 8px #f8b500 solid;
	margin: 15px 0;
}


/* 特別企劃 */
h4.sp {
	padding: 3px 0 0 20px;
    font-size: 1.3rem;
    border-left: 7px #f8b500 solid;
    margin: 30px 0 10px 0;
	font-weight: 900;
}
h5.sp {
    font-size: 1.2rem;
	font-weight: 900;
}
h6.sp {
    font-size: 1rem;
	font-weight: 700;
	padding-top: 1.5rem;
}
.ps-flex {
	display: flex;
}
.ps-box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.sp-img {
	bottom:0;
}
.btn-red {
    color: #fff;
    background-color: #D82A43;
    border-color: #D82A43;
	border-radius:0;
}
a.btn-red:hover {
    color: #000 !important;
}

.lh-15{
	line-height: 1.5;
}

/* 崁入影片 */
.video-box {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.reels-video {
    width: 100%;
    height: 80vh;
}

/* 遊輪線上報名 */
.bg-blue-light {
	background-color: #ecfbff !important;
}

.checkout-head {
	padding: 8px 20px 6px 20px;
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
}

.checkout-body {
	padding: 30px 35px;
}

.h-center {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	-ms-align-items: center;
	align-items: center;
}

.checkoutBox label {
	color: #333;
	font-size: .9rem;
}

sup {
	color: #d82a43;
	font-size: .8rem;
}

input,
select,
textarea {
	border: 1px solid #aaa;
	border-radius: 0;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	outline: 0;
	color: #4b515e;
	background: 0 0;
	font-weight: 400;
	font-size: .9rem;
	width: 100%;
	margin: 5px 0 10px 0;
	padding: 14px 15px 8px 15px;
	letter-spacing: 1.1px;
	line-height: 18px;
	cursor: pointer;
}

label.checkbox-container input,
label.radio-container input {
	width: 0;
}

.form-disabled:disabled {
	background-color: #e9ecef;
	opacity: 1
}

.radio-container {
	display: block;
	position: relative;
	padding-left: 29px;
	margin: 20px 0;
	cursor: pointer;
	font-size: inherit;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.radio-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer
}

.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 18px;
	width: 18px;
	border: 1px solid #ddd;
	border-radius: 50%;
	margin-top: 2px
}

.radio-container:hover input~.checkmark {
	background-color: #fff;
	border: 1px #d82a43 solid
}

.radio-container input:checked~.checkmark {
	background-color: #fff;
	border: #d82a43 1px solid
}

.checkmark:after {
	content: "";
	position: absolute;
	display: none
}

.radio-container input:checked~.checkmark:after {
	display: block
}

.radio-container .checkmark:after {
	top: 3px;
	left: 3px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #d82a43
}

.checkbox-container {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 14px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.checkbox-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer
}

.box-checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 18px;
	width: 18px;
	border: 1px solid #ddd
}

.checkbox-container:hover input~.box-checkmark {
	background-color: #fff;
	border: 1px #d82a43 solid
}

.checkbox-container input:checked~.box-checkmark {
	background-color: #d82a43;
	border: 1px #d82a43 solid
}

.box-checkmark:after {
	content: "";
	position: absolute;
	display: none
}

.checkbox-container input:checked~.box-checkmark:after {
	display: block
}

.checkbox-container .box-checkmark:after {
	left: 4.5px;
	top: .65px;
	width: 7px;
	height: 12px;
	border: solid #fff;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg)
}

label.label-control {
	font-size: .8rem;
	color: #d82a43;
	background-color: #fff;
	position: absolute;
	top: -6px;
	left: 15px;
	width: auto;
	padding: 1px 4px;
	margin: 0 12px
}

.form-group {
	margin-bottom: 12px
}

.input__arrowdown {
	width: 100%;
	background-image: url(../../images/icons/arrows_down.svg);
	background-repeat: no-repeat;
	background-size: 21px 21px;
	background-position: 95% center
}

.scrollMenu {
	background-color: #f8f8f8;
	overflow: auto;
	white-space: nowrap;
	display: flex;
	justify-content: space-between
}

.scrollMenu a {
	display: inline-flex;
	color: #333;
	font-size: 1rem;
	letter-spacing: .8px;
	text-align: center;
	padding: 12px 0;
	text-decoration: none;
	transition: all .3s
}

.scrollMenu a {
	position: relative
}

.scrollMenu a:after {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 0%;
	height: 4px;
	content: ".";
	margin: auto;
	padding: 0;
	font-size: 0;
	color: transparent;
	background: #d82a43;
	transition: all .3s
}

.scrollMenu a:hover {
	opacity: .85;
	transition: all .3s
}

.scrollMenu a:hover:after {
	width: 100%
}

.carousel-indicators li {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #fff;
	margin: 0 10px
}

.carousel-indicators .active {
	background-color: #d82a43
}


label.label-control {
	font-size: .8rem;
	color: #d82a43;
	position: absolute;
	top: -6px;
	left: 15px;
	width: auto;
	padding: 1px 4px;
	margin: 0 12px;
	background-color: #fafafa;
}


.inlineb-item {
	margin-right: 25px !important;
}


.button{
	border-radius: 2rem;
}
.button.medium {
	font-size: 1.05rem;
    line-height: 3rem;
	font-weight: 700;
}

.button.small {
	font-size: 1rem;
    font-weight: 700;
}
.button.link-style{
	padding: 10px;
	font-size: 0.9rem;
}

.button.primary {
    background-color: #f8b500;
    color: #fff;
    border: 0px;
    width: 100%;
    margin-top: 2rem;
}
.button.color-line{
	color: #fff;
    background-color: #00c300;
}
.mb-10 {
    margin-bottom: 10px !important;
}
.phoneIcon {
    color: #d82a43;
    font-size: 2rem;
}
.fa-rotate-45 {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.phoneNo {
    font-size: 18px;
    font-weight: 700;
    color: #d82a43;
    margin: 0 !important;
}
.phoneDes {
    font-size: 12.5px;
    line-height: 10px;
    color: #d82a43;
    margin: 0 !important;
}

/* 表尾宣告 */
footer {
	font-size: .9rem;
	line-height: 1.6em;
}

footer span {
	clear: both;
	display: block;
	padding-top: .6rem;
	margin-bottom: 0.9rem;
	font-weight: 900;
}

.footer-ul {
	margin: 0;
}

.bg-primary {
	background-color: #d82a43 !important;
}

.bg-foot {
	background-color: #fbfbfb !important;
}

.copyright {
	font-size: 13px;
	text-align: center;
	color: white;
}

#back-top {
	position: fixed;
	bottom: 80px;
	right: 22px;
	padding: 0;
	margin: 0;
	z-index: 20;
	
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#back-top.show {
  visibility: visible;
  opacity: 1;
}

#back-top a {
	text-decoration: none;
	display: block;
	color: #fff;
	font-size: 26px;
	z-index: 999;
	padding: 5px;
	height: 42px;
	width: 42px;
	background: var(--green-medium);
	border-radius: 50%;	
    border: 1px solid #e0d8cc61;
}

#back-top a i {
	position: relative;
	left: 8px;
	bottom: 4px;
}
.td-mobile{
	display: none;
}
.td-web{
	display: table-cell;
	padding: 5px;
}

/* ═══════════════════════════════
       重疊圖片群組
    ═══════════════════════════════ */
.overlap-wrap {
	position: relative;
	padding-bottom: 22%;  /* 小圖超出大圖底部的留空 */
}

.overlap-wrap-lr {
    padding-left: 8%;
}

/* 大圖：正常流撐開容器 */
.overlap-img-back {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	position: relative;
	z-index: 1;
}

.overlap-img-front {
	position: absolute;
	top: 55%;
	left: 35%;
	width: 42%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center top;
	z-index: 2;
}

.overlap-img-right {
    display: block;
    width: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

/* 小圖：左側，重疊在大圖左下角 */
.overlap-img-left {
    position: absolute;
    top: 20%;
    left: -8%;
    width: 50%;
    object-fit: cover;
    object-position: center top;
    z-index: 2;
}

/* ═══════════════════════════════
	文字區
═══════════════════════════════ */
.travel-title {
	font-size: 2.5rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.05em;
	color: #f0ece4;
	margin-bottom: 24px;
}

.travel-desc {
	font-size: 1.1rem;
	line-height: 1.8;
	color: #fff;
}

.nav-link:hover{
	color: #ffffffcc;
}

.contact-us{
	border: 1px solid #fff;
}
@media (max-width: 991px){
	.dropbtn{
		text-align: left;
	}	
	.pb-md-5px{
		padding-bottom: 5px !important;
	}
}
@media (max-width: 992px) {
	.ci-h {
		height: 40vh;
	}

	.ci-txt h5 {
		font-size: 2.3rem;
	}

	.ci-txt p {
		font-size: 1.5rem;
	}

	.nav-contract-btn{
		margin-top: .25rem; 
	}
	
	.ci-h2 {
		height: 25vh;
	}
}

@media (min-width: 992px) {
	.nav-signup-btn{
		margin-right: .25rem; 
	}
	.navbar-dark .navbar-nav .nav-link:hover,
	.navbar-dark .navbar-nav .nav-link.active {
		box-shadow: inset 0 -2px 0 #B00F23;
	}
}

/* 手機/平板版 */
@media (max-width: 991px) {
	.offcanvas {
		background-color: #523C26;
		width: 100vw;
	}
	.navbar-toggler-icon {
		background-image: url("../images/bars-solid.svg");
		background: url(./images/bars-solid.svg) center center / 100%; 
		border: none;
		max-height: 30px;
	}
	.navbar-dark .navbar-nav .nav-link, .contact-us {
		padding: 15px 0;
		text-align: center;
	}
	
	.navbar-collapse{
		/* height: 100vh; */
		overflow-y: auto;
		transition: all 0.3s ease;
	}
	.navbar-collapse.show {
        min-height: calc(100vh - 56px);
    }
	.navbar-nav{
		margin-left: 0;
	}
}

@media (max-width: 768px) {
	.company-logo-img{
		max-height: 24px;
	}
	.navbar.sticky-top {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 1030;
	}

	.navbar .container {
        padding-right: var(--bs-gutter-x, .75rem);
        padding-left: var(--bs-gutter-x, .75rem);
    }
	.overlap-img-right {
		display: block;
		width: 100%;
		object-fit: cover;
		position: relative;
		z-index: 1;
	}

	/* 小圖：左側，重疊在大圖左下角 */
	.overlap-img-left {
		position: absolute;
		top: 20%;
		left: 0;
		width: 50%;
		object-fit: cover;
		object-position: center top;
		z-index: 2;
	}
	.contact-us{
		border: none;
		padding: 8px 0;
	}
	label.label-control {
		font-size: .73rem
	}
	
	.about-box{
		margin: 0 10px;
	}
	.about-box h5{
		font-size: 1.8rem;
	}
	.about-box .title-lg{
		font-size: 2.5rem;
	}

	.caption {		
		width: auto;
		right: auto;
		left: 2rem;
		bottom: 5rem;
		top: auto;
		transform: none;
	}

	.ci-txt {
		text-align: center;
	}

	.mwlogo {
		margin: 0 auto;
	}

	.indtit {
		width: 60%;
	}

	.sale {
		width: 98%;
	}

	
	.ci-h {
        /* height: 100dvh; */
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 65% center;
        background-attachment: scroll;
    }

	.ci-txt h5 {
		font-size: 1.2rem;
		margin-bottom: 0;
	}

	.ci-txt h6 {
		font-size: 3.6rem;
		opacity: 0.85;
	}

	.ci-txt p {
		font-size: 0.9rem;
	}
	.md-all-center{
		display: flex;
        justify-content: center;
        align-items: center;
	}
	.md-mt-10 {
        margin-top: 10px;
    }
	.md-mb-20 {
        margin-bottom: 20px;
    }
}

	
@media (max-width: 576px) {
	.pt-sm-7rem{
		padding-top: 7rem;
	}
}
@media (max-width: 576px) {
	/* footer {
		text-align: center;
	} */

	.mwlogo {
		width: 26%;
	}

	.indtit {
		width: 35%;
	}

	.sale-txt h5 {
		font-size: 1.2em !important;
	}

	.sale-txt h6 {
		font-size: .9em !important;
	}

	.caption {
		padding: 14px;
	}
}

.dropbtn {
    border: none;
}

.dropdown {
    position: relative;
    display: block;
}

.dropdown-content {
    display: none;
    position: absolute;
    border: 2px solid #343A40;
    left: 0;
    background-color: #343A40;
    min-width: 100%;
    box-shadow: 2px 4px 4px 0px rgba(0, 0, 0, 0.1);
    z-index: 11;
}

.dropdown-content li a {
    color: black;
	width: 100%;
    text-decoration: none;
    display: block;
}

.dropdown-content li:hover {
    background-color: #52575D;
}
.dropdown:hover .dropdown-menu {
	display: block; 
}


/* 照片小標from歌詩達官網語法 暫放*/
@media (max-width: 1300px) {
    .themes_content {
        font-size: 14px;
    }
}
@media (max-width: 1400px) {
    .themes_content {
        font-size: 14px;
    }
}
@media (max-width: 1730px) {
    .themes_content {
        font-size: 15px;
    }
}
.themes_content {
    position: absolute;
    width: 80%;
    font-size: 17px;
    display: inline-block;
    color: #fff;
    left: 5%;
    bottom: 3px;
    background-color: rgba(0, 0, 0, 0.55);
    margin: 0 auto;
    padding: 4% 5% 5% 5%;
    z-index: 100;
}

element.style {
}
@media (max-width: 1250px) {
    .themes_h2 {
        font-size: 20px;
    }
}
@media (max-width: 1300px) {
    .themes_h2 {
        font-size: 21px;
    }
}
@media (max-width: 1400px) {
    .themes_h2 {
        font-size: 23px;
    }
}
@media (max-width: 1730px) {
    .themes_h2 {
        font-size: 25px;
    }
}
.themes_h2 {
    position: absolute;
    font-size: 26px;
    font-weight: bold;
    color: #00479d;
    background-color: #fff200;
    display: inline-block;
    padding: 5px 15px;
    top: -0.8em;
}

/* 崁入影片 */
.video-box {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*tip標籤動畫*/
.recreation-wrapper{
	position: relative;
}

.tips-wrapper {
    position: absolute;
    left: 160px;
    top: 60px;
    z-index: 150;
}
.party-tips-wrapper {
    position: absolute;
    right: 0;
    top: 100px;
}
.Teatro-tips-wrapper {
    position: absolute;
    right: -30px;
    top: 100px;
}
.tips, .tips2, .tips3, .tips4 {
    position: absolute;
    /*width: 233px;*/
    right: 100px;
	cursor: pointer;
    z-index: 150;
    animation-name: tips;
    animation-duration: 0.8s;
    animation-iteration-count: infinite;
}
.Teatro-tips, .party-tips{
	position: absolute;
	cursor: pointer;
}
/* .recreation-title, .restaurant-title, .room-title,.Teatro-title,.party-title{
	cursor: pointer;
} */
 #link-recreation, .competition-link, #link-restaurant, #link-room{
	cursor: pointer;
}
/*@keyframes tips {
	0% {right: 10px;}
	50% {right: 25px;}
	70% {right: 25px;}
	100% {right: 10px;}
}*/

.modal-dialog{
	z-index: 999
}
.modal-backdrop{
	z-index: 100;
}

.modal-content{
	top: 10vh;
	margin: auto;
}
.recreation-modal-content, .restaurant-modal-content, .room-modal-content, .party-modal-content{
	width: 40%
}
.tip-link{
	clip-path: polygon(12% 20%, 100% 20%, 100% 80%, 12% 80%, 0% 50%);
	background-color: #f8b500;
	width: max-content;
	/*rotate: -7deg;*/
	color: #fff;
	font-size: 1.4rem;
	text-shadow: 2px 2px 4px #000000;
	box-shadow: 5px 10px #888888;
}
.party-tip-link{	
	clip-path: polygon(0% 0%, 85% 0, 100% 50%, 85% 100%, 0% 100%);
	background-color: #f8b500;
	width: max-content;
	/*rotate: -7deg;*/
	color: #fff;
	font-size: 1.4rem;
	text-shadow: 2px 2px 4px #000000;
	box-shadow: 5px 10px #888888;
	line-height: 2;
}

.modal-open{
    overflow: auto;
    padding-right:0 !important;
}

.relative {
	position: relative;
	/*width: 400px;
	height: 200px;
	border: 3px solid #73AD21;*/
} 
  
.absolute {
	position: absolute;
	top: 50px;
	right: 260px;
	/*width: 200px;
	height: 100px;
	border: 3px solid #73AD21;*/
}
.memo-absolute{
	position: absolute;
	right: 150px;
	top: 70px
}
.memo-close-relative{
	position: relative;

}
.memo-Teatro-absolute{
	position: absolute;
    right: -100px;
    top: -30px;
}
.memo-party-absolute{
	position: absolute;
    right: -40px;
    top: -30px;
}
.memo-close-absolute, .memo-close-absolute-restaurant, .memo-close-absolute-room,.memo-close-absolute-Teatro, .memo-close-absolute-party{
	position: absolute;
    right: 20px;
    top: 5px;
    width: 90px;
    height: 50px;
}
.memo-link-absolute, .memo-link-absolute-restaurant, .memo-link-absolute-room, .memo-link-absolute-Teatro, .memo-link-absolute-party{
	position: absolute;
    left: 30px;
    bottom: 30px;
    width: 200px;
    height: 80px;
}
.memo-box{
	width: 20vw
}

#memo-recreation, #memo-restaurant, #memo-room, #memo-Teatro, #memo-party{
	z-index: 99;
	display: none;
}

#link-Teatro{
	clip-path: polygon(9% 0, 100% 0%, 100% 100%, 8% 100%, 0% 50%);
	line-height: 2;
}
#modal-recreation iframe, #modal-restaurant iframe, #modal-room iframe, #modal-party iframe{
	width: 100%;
	height: 80vh;
}
.competition-link{
	clip-path: polygon(0% 0%, 92% 0, 100% 50%, 92% 100%, 0% 100%);
	background-color: #5B9BD5;
	width: max-content;
	
	color: #fff;
	font-size: 1.4rem;
	text-shadow: 2px 2px 4px #000000;
	box-shadow: 5px 10px #888888;
	line-height: 2;
}
.competition-link a{
	color: #fff;
	font-weight: 500;
}

.dropdown-menu-dark .dropdown-item:active{
	background-color: #52575D

}

.keyvision-wrap {
    position: relative;
}

.second-nav-wrapper {
    position: sticky;
    top: 49px;
    z-index: 10;
    margin-top: -160px;
	padding-bottom: 30px;
	/* background: rgba(120, 140, 40, 0.5); */
}
.second-nav-box {
	display: flex;
    justify-content: center;
    gap: 24px;
    max-width: 530px;
    margin: 0 auto;
    padding: 8px 0;
    background: rgba(120, 140, 40, 0.9);
	border-radius: 99px;
}

.second-nav {
    display: flex;
    justify-content: center;
    gap: 24px;
    max-width: 760px;
    margin: 0 auto;
    padding: 0;
    /* background: rgba(120, 140, 40, 0.5); */
}

.second-nav-link {
    /* 漸層邊框背景 */
    background: linear-gradient(to right, #DDC18B, #94A446, #DDC18B);
    border-radius: 999px;
    padding: 2px; /* 邊框厚度 */
    text-decoration: none;
    transition: opacity .3s;
}

.second-nav-link span {
    display: block;
    color: #fff;
    font-size: 1.1rem;
    letter-spacing: 1.5px;
    padding: 10px 32px;
    border-radius: 999px;
    background: #7F862D;
    transition: background .3s, color .3s;
}

.second-nav-link:hover span {
    background: #19512C;
    color: #fff8dc;
}
/* default */
/* ===== GLOBAL ===== */
    :root {
      --gold: #b8972a;
      --gold-light: #d4af37;
      /* --green-dark: #2c3e2d; */
      --blue-dark: #012E41;
      --green-medium: #19512C;
      --green-deep: #1E4101;
      --white: #ffffff;
      --cream: #F8F7F6;
	  --cream-medium: #EEEAE4;
      --dark: #2D2D2D;
	  --light-blue-linear: linear-gradient(to right, #E9FFF7, #B3DACC);
	  /* --tiffany: #0ABAB5;  */
	  --tiffany: #26A59E;
	  --richmond-primary: #d82a43;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: "Noto Serif TC", "Microsoft JhengHei", serif;
      background-color: var(--cream-medium);
    }

    a { text-decoration: none; color: inherit; }

    /* ===== NAV ===== */
    /* 純CSS漢堡：checkbox放在最外層，mobile-menu用fixed定位不佔空間 */
    #menu-toggle { display: none; }

    .top-nav {
      background-color: var(--green-medium);
      padding: 14px 40px;
      /* display: flex;
      align-items: center;
      justify-content: space-between; */
      border-bottom: 1px solid #3d5c3e;
      position: sticky;
      top: 0;
      z-index: 999;
    }

    .top-nav-box {
      /* background-color: var(--green-deep);
      padding: 14px 40px; */
      display: flex;
      align-items: center;
      justify-content: space-between;
      /* border-bottom: 1px solid #3d5c3e;
      position: sticky;
      top: 0;
      z-index: 999; */
    }

    .top-nav .brand {
      font-size: 1.7rem;
      font-weight: bold;
      color: var(--white);
      letter-spacing: 2px;
    }

    .top-nav .nav-links a {
      color: #ccc;
      margin-left: 28px;
      font-size: 1.1rem;
      transition: color 0.3s;
    }

    .top-nav .nav-links a:hover { color: var(--gold-light); }

    .hamburger-label {
      display: none;
      color: var(--white);
      font-size: 1.6rem;
      cursor: pointer;
      z-index: 1001;
      position: relative;
    }

    .hamburger-label .bi-x-lg { display: none; }
    #menu-toggle:checked ~ .top-nav .hamburger-label .bi-list { display: none; }
    #menu-toggle:checked ~ .top-nav .hamburger-label .bi-x-lg { display: inline; }

    /* ★ 關鍵：fixed 定位，不影響頁面內容流 */
    .mobile-menu {
      display: none;
      position: fixed;
      top: 49px; /* nav 高度 */
      left: 0;
      right: 0;
      background: var(--green-medium);
      padding: 8px 24px 16px;
      border-bottom: 1px solid #3d5c3e;
      z-index: 998;
      box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    }

    #menu-toggle:checked ~ .mobile-menu { display: block; }

    .mobile-menu a {
      display: block;
      color: var(--white);
      padding: 12px 0;
      font-size: 0.95rem;
      border-bottom: 1px solid #3d5c3e;
      transition: color 0.3s;
    }

    .mobile-menu a:last-child { border-bottom: none; }
    .mobile-menu a:hover { color: var(--gold-light); }

    /* ===== service ===== */
    .service {
      position: relative;
      background: var(--cream-medium);
      padding: 100px 40px 80px;
      text-align: center;
      overflow: hidden;
    }

    .service::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at center, rgba(184,151,42,0.08) 0%, transparent 70%);
    }

    .service-content { position: relative; z-index: 1; }

    .service-subtitle {
      font-size: 0.82rem;
      letter-spacing: 6px;
      color: var(--gold);
      text-transform: uppercase;
      margin-bottom: 20px;
    }

    .service h2 {
      font-size: clamp(1.6rem, 3vw, 2.4rem);
      font-weight: bold;
      color: var(--blue-dark);
      line-height: 1.4;
      margin-bottom: 24px;
    }

    .service > .service-content > p {
      max-width: 700px;
      margin: 0 auto 52px;
      color: var(--dark);
      font-size: 0.95rem;
      line-height: 2;
    }

    /* ===== FEATURE CARDS ===== */
    .feature-cards {
      display: flex;
      justify-content: center;
      gap: 24px;
      flex-wrap: wrap;
      margin-top: 0;
    }

    .feature-card {
      background: var(--cream);
      border-radius: 12px;
      padding: 40px 20px 36px;
      text-align: center;
      width: 280px;
      flex-shrink: 0;
      transition: transform 0.3s, box-shadow 0.3s;
    }

    .feature-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 32px rgba(0,0,0,0.25);
    }

    .feature-card-icon {
      font-size: 2.4rem;
      color: var(--gold);
      margin-bottom: 20px;
      display: block;
    }
    .feature-card-icon img {
      width: 85px;
      height: 85px;
    }

    .feature-card h4 {
      font-size: 1.2rem;
      color: #2c2c2c;
      margin-bottom: 12px;
      font-weight: bold;
    }

    .feature-card p {
      font-size: 1rem;
      color: #666;
      margin: 0;
      line-height: 1.8;
    }

    /* ===== SECTION HEADER ===== */
    .section-header {
      text-align: center;
      margin-bottom: 52px;
    }

    .section-tag {
      display: inline-block;
      font-size: 0.72rem;
      letter-spacing: 4px;
      color: var(--gold);
      text-transform: uppercase;
      border: 1px solid var(--gold);
      padding: 4px 14px;
      margin-bottom: 14px;
      border-radius: 2px;
    }

    .section-header h2 {
      font-size: clamp(1.6rem, 3vw, 2.4rem);
      color: var(--blue-dark);
      margin-bottom: 8px;
      font-weight: bold;
    }

    .section-header .sub {
      color: var(--blue-dark);
      font-size: 0.92rem;
    }
    .section-header.light-text h2 {
      /* font-size: clamp(1.6rem, 3vw, 2.4rem); */
      color: var(--white);
      /* margin-bottom: 8px;
      font-weight: bold; */
    }

    .section-header.light-text .sub {
      color: var(--white);
      /* font-size: 0.92rem; */
    }

    .gold-divider {
      width: 50px;
      height: 2px;
      background: var(--gold);
      margin: 16px auto 0;
    }

    /* ===== COURSE SECTIONS ===== */
    .course-section { padding: 80px 0; }
    .legends-section { background: var(--green-deep); }
    .curated-section { background: var(--cream-medium) }

    .course-wrap {
      max-width: 1160px;
      margin: 0 auto;
      padding: 0 40px;
    }

    /* ===== COURSE CARD ===== */
    .course-card {
      display: flex;
      align-items: stretch;
      /* ★ 淺色卡片背景，與深綠背景形成對比 */
      background: var(--cream);
      border-radius: 16px;
      overflow: hidden;
      margin-bottom: 32px;
      /* ★ 整個卡片有 padding，圖片與外框間距 */
      padding: 20px;
      gap: 0;
    }

    .course-card:last-child { margin-bottom: 0; }

    /* ---- 圖片側 ---- */
    .course-card-img-wrap {
      flex: 0 0 52%;
      max-width: 52%;
      /* ★ 圖片本身有圓角，呈現內縮感 */
      border-radius: 10px;
      overflow: hidden;
      order: 2; /* 圖片在右 */
    }

    .course-card-img-wrap .carousel,
    .course-card-img-wrap .carousel-inner,
    .course-card-img-wrap .carousel-item {
      height: 100%;
    }

    .course-card-img-wrap .carousel-item .img-ph {
      width: 100%;
      height: 100%;
      min-height: 320px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 5rem;
    }

    /* Placeholder 漸層 */
    .ph-pebble-1   { background-image: url('../images/Card-01-1.jpg'); }
    .ph-pebble-2   { background-image: url('../images/Card-01-2.jpg'); }
    .ph-pebble-3   { background-image: url('../images/Card-01-3.jpg'); }
    .ph-spyglass-1 { background-image: url('../images/Card-02-1.jpg'); }
    .ph-halfmoon-1 { background-image: url('../images/Card-03-1.jpg'); }
    .ph-halfmoon-2 { background-image: url('../images/Card-03-2.jpg'); }
    .ph-halfmoon-3 { background-image: url('../images/Card-03-3.jpg'); }


    .ph-rusutsu  { background-image: url('../images/Card-04-1.jpg'); }
    .ph-rusutsu2 { background-image: url('../images/Card-04-2.jpg'); }
    .ph-rusutsu3 { background-image: url('../images/Card-04-3.jpg'); }
    .ph-klgcc    { background-image: url('../images/Card-05-1.jpg'); }
    .ph-klgcc2   { background-image: url('../images/Card-05-2.jpg'); }
    .ph-klgcc3   { background-image: url('../images/Card-05-3.jpg'); }
    .ph-mimosa   { background-image: url('../images/Card-06-1.jpg'); }
    .ph-mimosa2  { background-image: url('../images/Card-06-2.jpg'); }

    /* ---- 文字側 ---- */
    .course-card-body {
      flex: 1;
      padding: 28px 40px 28px 36px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      order: 1; /* 文字在左 */
    }

	/* #curated：桌機版改為左圖右文 */
	#curated .course-card-img-wrap {
		order: 1;  /* 圖片移到左側 */
	}

	#curated .course-card-body {
		order: 2;  /* 文字移到右側 */
	}

    .course-card-location {
      font-size: 0.7rem;
      letter-spacing: 3px;
      color: var(--gold);
      text-transform: uppercase;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: bold;
    }

    .course-card-en {
      font-size: 0.88rem;
      color: #6b5a3e;
      font-style: italic;
      margin-bottom: 6px;
    }

    .course-card-name {
      font-size: clamp(1.3rem, 2vw, 1.75rem);
      font-weight: bold;
      color: var(--blue-dark);
      margin-bottom: 16px;
      line-height: 1.3;
    }

    .course-card-divider {
      width: 36px;
      height: 2px;
      background: var(--gold);
      margin-bottom: 16px;
    }

    .course-card-desc {
      color: #4a4a3a;
      font-size: 0.95rem;
      line-height: 2;
    }

    /* ===== CTA ===== */
	.cta-section {
	  background: var(--cream-medium);
	  padding: 10px 0;
	}
    .cta-section-wrap {
      padding: 90px 40px;
      /* background: linear-gradient(160deg,#1a2e1b 0%,#0f1e10 50%,#1a2e1b 100%); */
	  background-image:  url('../images/Golf_Banner_expand.jpg');
      background-size: cover;
      background-position: center;
      /* text-align: center; */
      position: relative;
      /* overflow: hidden; */
      /* min-height: 100vh; */
	  display: flex;
	  align-items: center;
	  min-height: 800px;
	  margin: 40px;
      width: auto;
	  border-radius: 16px;
    }

    .cta-section-wrap::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at center,rgba(184,151,42,0.12) 0%,transparent 65%);
    }
	.cta-section-wrap-content {
		/* display: flex;
		justify-content: flex-start;
		align-items: center; */
		width: 100%;
		position: relative;
		z-index: 1;
	}

    .cta-section-wrap > * { position: relative; z-index: 1; }

    .cta-section-wrap h2 {
      font-size: clamp(1.5rem,3vw,2.2rem);
      color: var(--white);
      margin-bottom: 18px;
      font-weight: bold;
    }

    .cta-section-wrap p {
      color: var(--white);
      font-size: 0.92rem;
      max-width: 580px;
      line-height: 2;
    }

    .btn-cta {
      display: inline-block;
      background: var(--light-blue-linear);
      color: var(--blue-dark);
      padding: 14px 48px;
      font-size: 0.92rem;
      letter-spacing: 3px;
      border-radius: 999px;
      border: none;
      cursor: pointer;
      transition: background 0.3s, transform 0.2s;
    }

    /* .btn-cta:hover {
      background: var(--gold-light);
      transform: translateY(-2px);
      color: var(--white);
    } */

	#legends,
	#curated,
	#recommended-products,
	#cta {
		scroll-margin-top: 125px;
	}

    /* ===== RWD ===== */

    /* Tablet */
    @media (max-width: 991px) {
      .course-wrap { padding: 0 24px; }
      .course-card-body { padding: 24px 28px 24px 24px; }
      .course-card { padding: 16px; }
      .course-card-img-wrap .carousel-item .img-ph { min-height: 280px; }
    }

    /* Mobile */
    @media (max-width: 767px) {
      /* Nav */
      .top-nav { padding: 12px 20px; }
      .top-nav .nav-links { display: none !important; }
      .hamburger-label { display: block; }

      /* service */
      .service { padding: 60px 20px 50px; }

      /* Feature Cards: 單欄 */
      .feature-cards { gap: 16px; }
      .feature-card {
        width: 100%;
        max-width: 340px;
        padding: 32px 24px 28px;
      }

      /* Section */
      .course-section { padding: 52px 0;}
      .course-wrap { padding: 0 14px; }

      /* ★ 手機版：上圖下文，padding 調小 */
      .course-card {
        flex-direction: column;
        padding: 12px;
        gap: 0;
        border-radius: 12px;
        margin-bottom: 20px;
      }

      .course-card-img-wrap {
        flex: unset;
        max-width: 100%;
        width: 100%;
        height: 210px;
        border-radius: 8px;
        order: 1; /* 圖在上 */
      }

      .course-card-img-wrap .carousel,
      .course-card-img-wrap .carousel-inner,
      .course-card-img-wrap .carousel-item {
        height: 210px;
      }

      .course-card-img-wrap .carousel-item .img-ph {
        min-height: 210px;
        height: 210px;
        font-size: 3.5rem;
      }

      .course-card-body {
        padding: 20px 16px 22px;
        order: 2; /* 文字在下 */
      }

      .course-card-en   { font-size: 0.82rem; }
      .course-card-name { font-size: 1.15rem; margin-bottom: 12px; }
      .course-card-desc {  line-height: 1.9; }

      /* CTA */
      .cta-section-wrap { 
		padding: 20px 20px;
		background-position: 62%;
        background-size: auto;
		min-height: 600px;
        align-items: start;
		margin: 10px;
	 }
    }

    @media (max-width: 400px) {
      .course-card-img-wrap,
      .course-card-img-wrap .carousel,
      .course-card-img-wrap .carousel-inner,
      .course-card-img-wrap .carousel-item,
      .course-card-img-wrap .carousel-item .img-ph {
        height: 175px;
        min-height: 175px;
      }
    }
/* default */

@media (max-width: 1280px) {
	.td-mobile{
		display: table-cell;
		padding: 10px;
	}
	.td-web{
		display: none;
	}
}

@media (min-width: 1279px) {
	.tips{
		right: 300px
	}
	.Teatro-tips, .party-tips{
		right: 200px
	}
}

@media (max-width: 1279px){
	.Teatro-tips-wrapper{
		top: 0;
		right: 280px;
	}
	.party-tips-wrapper{
		top: 10px;
		right: 250px;
	}
	.restaurant-modal-content, .recreation-modal-content, .party-modal-content{
		width: 70%
	}
}
@media (max-width: 1028px){
	.absolute {
        right: 60px;
    }
} 
@media (max-width: 768px) {
	.second-nav-box{
		max-width: 330px;
	} 
	.second-nav-wrapper {
		/*background: var(--cream-medium);
        position: static; */
		margin-top: 0;
		padding: 10px 0 10px 0;
    }
	.second-nav-link span{
		font-size: 1rem;
        padding: 5px 12px;
	}
	.memo-box{
		width: 70vw
	}
	.memo-absolute{
		/*position: absolute;*/
		right: 30px;
		top: 90px
	}
    /*.tips, .tips2, .tips3, .tips4 {
        width: 120px;
    }*/
	.tips-wrapper {
		top: 60px;
		left: 100px
	}
	.tip-link{
		font-size: 0.75rem;
	}
	.party-tip-link{
		font-size: 0.75rem;
		line-height: 2.5;
	}
	.competition-link{
		font-size: 0.75rem;
		line-height: 2.5;		
	}
	.Teatro-tips-wrapper{
		top: 0.8rem;
        left: 9rem;
	}
	.party-tips-wrapper{
		top: 0.8rem;
        left: 10rem;
	}
	.absolute {
		position: absolute;
		top: 50px;
		right: 0;
		/*width: 200px;
		height: 100px;
		border: 3px solid #73AD21;*/
	}
	#link-Teatro{
		line-height: 2.5;
	}
	.memo-party-absolute{
		position: absolute;
		left: -100px;
    	top: 10px;
	}
	.memo-Teatro-absolute{
		position: absolute;
		right: -11rem;
		top: 1rem;
	}
	.pt-sm-05{
		padding-top: 5rem !important;
	}
	.mt-sm-04{
		margin-top: 4rem;
	}
}
@media (max-width: 375px){
	.link2 {
		font-size: 1rem;
	}
}


/* --- 開始：懸浮線上報名按鈕樣式 --- */

.floating-signup-btn {
    position: fixed; /* 固定位置，不隨滾動而移動 */
    bottom: 70px;    /* 距離視窗底部 70px */
    right: 20px;     /* 距離視窗右側 20px */
    z-index: 1000;   /* 確保按鈕在最上層，不被其他元素遮擋 */

    /* 按鈕視覺設計 */
    background-color: #ff6600; /* 使用一個顯眼的橘色 */
    color: white;              /* 文字顏色為白色 */
    padding: 15px 12px;        /* 按鈕內邊距 (上下15px, 左右12px) */
    border-radius: 10px;       /* 圓角效果 */
    text-align: center;        /* 文字置中 */
    font-size: 18px;           /* 字體大小 */
    font-weight: bold;         /* 粗體字 */
    line-height: 1.3;          /* 行高 */
    text-decoration: none;     /* 移除連結底線 */
    box-shadow: 2px 2px 8px rgba(0,0,0,0.3); /* 加上陰影增加立體感 */
    transition: all 0.3s ease; /* 加入過渡動畫效果 */
}

/* 滑鼠移到按鈕上時的樣式變化 */
.floating-signup-btn:hover {
    background-color: #e65c00; /* 加深背景顏色 */
    transform: scale(1.05);    /* 輕微放大 */
    box-shadow: 4px 4px 12px rgba(0,0,0,0.4); /* 加深陰影 */
}

/* --- 手機版樣式調整 (螢幕寬度小於 767px 時生效) --- */
@media (max-width: 767px) {
    .floating-signup-btn {
        bottom: 15px;
        right: 15px;
        padding: 12px 10px;
        font-size: 16px;
    }
}

/* --- 結束：懸浮線上報名按鈕樣式 --- */

/* --- swiper 樣式 --- */
.swiper-button-next, .swiper-button-prev{
	color: rgb(163 163 163 / 60%) !important;
}


@media (max-width: 991px) {
    .order-md-1 {
        order: 1 !important;
    }
    .order-md-2 {
        order: 2 !important;
    }
    .order-md-3 {
        order: 3 !important;
    }
}
.sticky{
	position: sticky;
    top: 50;
    transform: translateY(-1px);
}

.sticky-mobile{
	position: sticky;
    top: 50;
    transform: translateY(-1px);
	background-color: #fff;
	z-index: 5;
}

.topic::after {
    content: "";
    width: 50px;
    height: 4.5px;
    background: #f8b500;
    display: block;
    margin-top: 6px;
}

.accordion-button>i{
	color: #d82a43;
    margin-right: 15px;
}

.accordion-button:not(.collapsed) {
    color: #000;
    background-color: #e7f1ff;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
}
.accordion-button:focus{
    border: none;
    box-shadow: none;
}




/* 奢華之旅 style */
.section {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 24px 120px;
}

/* ───────────────────────────
	三欄式佈局
─────────────────────────── */
.layout {
	display: grid;
	grid-template-columns: 300px 1fr 320px;
	grid-template-rows: auto;
	column-gap: 48px;
	align-items: start;   /* 重要：讓各欄從頂部對齊，sticky 才能正確運作 */
}

/* ─────────────────
	欄1：座艙圖
───────────────── */
.column-first {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	padding-top: 340px;   /* 往下錯位，讓視覺重心對齊文字區 */
}

.column-first img {
	width: 100%;
	display: block;
	object-fit: cover;
}

/* ─────────────────
	欄2：文字內容
───────────────── */
.column-content {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	padding-top: 320px;
	padding-bottom: 80px;
}

.column-content h5 {
	font-size: 2.5rem;
    font-weight: 600;
    color: #fff;
	line-height: 1.4;
	letter-spacing: 0.05em;
	margin-bottom: 32px;
}

.column-content p {
	font-size: 1.1rem;
    color: #fff;
    line-height: 1.8;	
}

.column-third {
	grid-column: 3 / 4;
	grid-row: 1 / 2;

	position: sticky;
	top: 0;               /* 黏在視窗頂部 */

	/* 高度設為視窗高，讓圖片佔滿視窗高度範圍內顯示 */
	/* height: 100vh;

	display: flex;
	align-items: flex-start; */
	align-self: start;
	padding-top: 40px;    /* 圖片與視窗頂部的間距 */
}

.column-third img {
	width: 100%;
	max-height: 80vh;
	object-fit: cover;
	object-position: center;
	display: block;
}

.layout-wider-img {
	display: grid;
	grid-template-columns: repeat(6, 1fr);;
	grid-template-rows: auto;
	column-gap: 30px;
}

/* ─────────────────
	欄1：座艙圖
───────────────── */
.layout-wider-img .column-first {
	grid-column: 1 / 5;
	grid-row: 1 / 2;
	padding-top: 120px;   /* 往下錯位，讓視覺重心對齊文字區 */
}

.layout-wider-img .column-first img {
	width: 100%;
	display: block;
	object-fit: cover;
}

/* ─────────────────
	欄2：文字內容
───────────────── */
.layout-wider-img .column-content {
	grid-column: 5/8;
	grid-row: 1 / 2;
	padding-top: 120px;
	padding-bottom: 80px;
}

.layout-wider-img .column-content h5 {
	font-size: 2.5rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.05em;
	margin-bottom: 32px;
	color: #fff;
}

.layout-wider-img .column-content p {
	font-size: 1.1rem;
	line-height: 1.8;
	color: #fff;
}

.layout-wider-img .column-third {
	grid-column: 8/9;
	grid-row: 1 / 2;

	position: inherit;
	align-self: start;
	padding-top: 600px;
}

.layout-wider-img .column-third img {
	width: 100%;
	max-height: 80vh;
	object-fit: cover;
	object-position: center;
	display: block;
}
.layout-two-column {
	display: grid;
	grid-template-columns: repeat(6, 1fr);;
	grid-template-rows: auto;
	column-gap: 40px;
}

/* ─────────────────
	欄1：座艙圖
───────────────── */
.layout-two-column .column-first {
	grid-column: 4/7;
	grid-row: 1/4;

	position: inherit;
	align-self: start;
	padding-top: 120px;
	max-width: 650px;
}

.layout-two-column .column-first img {
	width: 100%;
	display: block;
	object-fit: cover;
}
.layout-two-column .column-content {
	grid-column: 1/4;
	grid-row: 1/3;
	padding-top: 120px;
	padding-bottom: 80px;
}

.layout-two-column .column-content h5 {
	font-size: clamp(1.8rem, 2.5vw, 2.8rem);
	font-weight: bold;
	line-height: 1.4;
	letter-spacing: 0.05em;
	margin-bottom: 32px;
	color: #f0ece4;
}

.layout-two-column .column-content p {
	font-size: 0.95rem;
	line-height: 1.9;
	color: #f0ece4;
	margin-bottom: 12px;
}

.layout-two-column .column-third {
	grid-column: 1/1;
	grid-row: 3/4;
	padding-top: 80px;
	position: inherit;
}

.layout-two-column .column-third img {
	width: 100%;
	max-height: 300px;
	object-fit: contain;
	object-position: center;
	display: block;
}

.subtitle {
	font-size: 1.5rem !important;
	font-weight: bold;
}
.btn-wrap {
	margin-top: 56px;
	display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px; 
}

.btn {
	display: block;
	text-align: center;
	padding: 14px 20px;
	border: 2px solid #ffffff80;
	color: #ffffff80;
	background: transparent;
	font-size: 1.1rem;
	letter-spacing: 0.15em;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.3s, color 0.3s;
	border-radius: 0;

	position: relative;
    overflow: hidden;
	max-width: 400px;
	z-index: 0;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 100%;
    background-color: #8b0000;
    transition: width 0.4s ease;
    z-index: -1;
}
.btn:hover::before {
    width: 100%;
}

.btn:hover {
    color: #c9a84c;
    /* border-color: #8b0000; */
}

.card-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	margin-top: 80px;
}

/* .card {
	border: 1px solid #8b7355;
	display: flex;
	flex-direction: row;
	max-width: 1100px;
	width: 100%;
	background-color: #1e2022;
	overflow: hidden;
} */

/* 左側圖片區塊 */
.card-image {
	position: relative;
	width: 40%;
	flex-shrink: 0;
}

.card-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	filter: brightness(0.75);
	max-height: 310px;
}

.card-number {
	position: absolute;
	bottom: 50%;
	left: 50%;
	transform: translate(-50%, 50%);
	font-size: 80px;
	font-weight: 300;
	color: #ffffff;
	font-family: Georgia, "Times New Roman", serif;
	line-height: 1;
	letter-spacing: 2px;
	text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* 右側文字區塊 */
.card-content {
	padding: 40px;
	display: flex;
	align-items: center;
	flex: 1;
}

.card-content p {
	color: #c8bfb0;
	font-size: 1.1rem;
	line-height: 2;
	letter-spacing: 0.05em;
}

.mobile-number {
	display: none;
}

/* .hero {
	position: relative;
	width: 100%;
	height: 70vh;
	min-height: 500px;
} */

/* 背景圖片 */
.hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.hero-bg-a{		
	background-image: url('../images/img-Banner-A.jpg');
}
.hero-bg-b{		
	background-image: url('../images/img-Banner-B.jpg');
}

/* 卡片容器：電腦版置中偏右 */
/* .hero-content {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
} */

/* 內容卡片 */
.hero-card {
	background-color: rgba(58, 52, 30, 0.85);
	color: #f5f0e8;
	padding: 50px;
	max-width: 460px;
	width: 100%;
	text-align: center;
}

.hero-card h2 {
	font-size: 1.8rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	margin-bottom: 28px;
	color: #f5f0e8;
}

.hero-card p {
	font-size: 0.92rem;
	line-height: 2;
	letter-spacing: 0.05em;
	color: #e8e0d0;
	margin-bottom: 40px;
}

.btn-custom {
	display: inline-block;
	width: 100%;
	padding: 16px 20px;
	border: 1.5px solid #c8b99a;
	background: transparent;
	color: #f5f0e8;
	font-size: 1rem;
	letter-spacing: 0.15em;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.3s, color 0.3s;
	text-decoration: none;
}

.btn-custom:hover {
	background: rgba(200, 185, 154, 0.25);
	color: #fff;
}



@media (max-width: 1280px) {
	.section {
		max-width: 1200px;
	}
}	
@media (max-width: 768px) {
	.second-nav {
		gap: 6px;
	}
	.section {
		padding: 40px 20px;
	}

	.layout, .layout-wider-img, .layout-two-column {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	/* 手機版關閉 sticky */
	.column-third, .layout-wider-img .column-third, .layout-two-column .column-third {
		position: static;
		height: auto;
		order: 1;
		width: 52%;
		margin-left: auto;
		padding-top: 0;
		padding-bottom: 20px;
		display: block;
		/* top: 60px; */
	}

	.column-third img, .layout-wider-img .column-third img, .layout-two-column .column-third img {
		width: 100%;
		max-height: none;
	}

	.column-first, .layout-wider-img .column-first, .layout-two-column .column-first {
		order: 2;
		padding-top: 0;
		padding-bottom: 32px;
		width: 90%;
	}

	.column-first img, .layout-wider-img .column-first img, .layout-two-column .column-first img {
		width: 100%;
	}

	.column-content, .layout-wider-img .column-content, .layout-two-column .column-content {
		order: 3;
		padding-top: 0;
		padding-bottom: 0;
	}

	.column-content h5, .layout-wider-img .column-content h5, .layout-two-column .column-content h5 {
		font-size: 1.6rem;
		margin-bottom: 20px;
	}

	.column-content p, .layout-wider-img .column-content p, .layout-two-column .column-content p {
		font-size: 0.9rem;
	}

	.btn-wrap {
		margin-top: 48px;
		text-align: center;
	}

	.btn {
		display: block;
		width: 100%;
		text-align: center;
		padding: 6px 20px;
	}

	.overlap-wrap {
		padding-bottom: 38%;
		overflow: hidden; 
      }

      .overlap-img-front {
        top: 50%;
        left: 25%;
        width: 55%; 
      }

      .travel-title {
        font-size: 1.8rem;
        margin: 16px 0;
      }

	  /* .card {
			flex-direction: column;
			max-width: 420px;
		} */

		/* 手機版隱藏圖片，改用大字號碼 */
		.card-image {
			display: none;
		}

		.card-content {
			flex-direction: column;
			align-items: flex-start;
			padding: 36px 28px 40px;
		}

		/* 手機版數字放在文字上方 */
		.mobile-number {
			display: block;
			font-size: 90px;
			font-weight: 300;
			color: #ffffff;
			font-family: Georgia, "Times New Roman", serif;
			line-height: 1;
			letter-spacing: 2px;
			text-align: center;
			width: 100%;
			margin-bottom: 32px;
		}

		.card-content p {
			font-size: 1.1rem;
			line-height: 2;
		}

		/* hero 改為垂直排列 */
      /* .hero {
        height: auto;
        min-height: unset;
        display: flex;
        flex-direction: column;
      } */

      /* 背景圖改為上方圖片區塊 */
      .hero-bg {
        position: relative;
        inset: unset;
        width: 100%;
        height: 280px;
        flex-shrink: 0;
      }

      /* 卡片容器：手機版取消絕對定位 */
      /* .hero-content {
        position: relative;
        inset: unset;
        padding-left: 0;
        display: block;
      } */

      /* 卡片：手機版全寬，在圖片下方 */
      .hero-card {
        max-width: 100%;
        width: 100%;
        padding: 48px 28px 52px;
        background-color: #3a341e;
      }

      .hero-card h2 {
        font-size: 1.6rem;
        margin-bottom: 24px;
      }

      .hero-card p {
        font-size: 0.9rem;
        margin-bottom: 36px;
      }

      .btn-custom {
        padding: 18px 20px;
        font-size: 1rem;
      }

	  .content-text{
		order: 2;
	  }
	  .content-image{
		order: 1;
	  }
}

/* ===========================
   footer
   =========================== */
.footer {
  background-color: #a80000;  /* 深紅色背景 */
  color: #fff;
  width: 100%;
}

.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 60px 24px;
}

/* ===========================
   標語
   =========================== */
.footer-tagline {
  margin-bottom: 16px;
}

.footer-tagline p {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #ffffffcc;
}

/* ===========================
   分隔線
   =========================== */
.footer-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  margin: 0 0 36px;
}

/* ===========================
   主要內容：左右佈局
   =========================== */
.footer-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 40px;
}

/* ===========================
   左側：Logo + 描述
   =========================== */
.footer-left {
  flex: 0 0 65%;
  max-width: 65%;
}

.footer-logo {
  /* font-family: Georgia, "Times New Roman", serif; */
  font-size: 52px;
  /* font-style: italic; */
  font-weight: 600;
  color: #fff;
  margin-bottom: 24px;
  letter-spacing: 0.01em;
}

.footer-desc {
  font-size: 0.95rem;
  line-height: 1.9;
  color: #ffffffcc;
}

/* ===========================
   右側：品牌 + 社群 + 聯絡
   =========================== */
.footer-right {
  flex: 0 0 45%;
  max-width: 25%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 品牌名稱 + 社群圖示同一排 */
.footer-brand-row {
  display: flex;
  align-items: center;
  gap: 24px;
}

.footer-brand-name {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
}

/* 社群圖示 */
.footer-social {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-social a {
  color: #fff;
  font-size: 22px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.15);
  transition: background-color 0.2s ease;
}

.footer-social a:hover {
  background-color: rgba(255, 255, 255, 0.35);
}

/* LINE 特殊樣式 */
.footer-social .line-icon {
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.02em;
  background-color: rgba(255, 255, 255, 0.15);
}

/* 聯絡資訊 */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-contact p {
  margin-bottom: 0;
}
.footer-contact p a{
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.03em;
  line-height: 1.6;
}

/* ===========================
   底部版權
   =========================== */
.footer-bottom {
  padding-top: 20px;
}

.footer-bottom p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.03em;
}

/* ===========================
   RWD：手機版 (≤ 768px)
   =========================== */
@media (max-width: 768px) {
	.bg-gold{
		background: linear-gradient(
			90deg,
			#463206 0%,
			#F4E6B7 5%,
			#9E8D60 12%,
			#6C5830 25%,
			#6C5830 75%,
			#9E8D60 85%,
			#F6E8B9 95%,
			#463206 100%
		);
	}
  .py-sm-0 {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
  }

  .footer-inner {
    padding: 28px 24px 24px;
  }

  /* 主要內容改為上下排列 */
  .footer-main {
    flex-direction: column;
    gap: 32px;
    margin-bottom: 32px;
  }

  .footer-left,
  .footer-right {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .footer-logo {
    font-size: 42px;
    margin-bottom: 20px;
  }

  .footer-desc {
    font-size: 14px;
    line-height: 1.85;
  }

  .footer-brand-name {
    font-size: 24px;
  }

  .footer-social a {
    font-size: 20px;
    width: 34px;
    height: 34px;
  }

  .footer-contact p a{
    font-size: 0.95rem;
  }

  .footer-bottom p {
    font-size: 0.9rem;
	text-align: center;
  }
}