@charset "utf-8"

/*
 *2023冰雪世界的奇幻旅程｜美好假期
 *copyright 2023
 *Hx｜金廈旅行社
 *Licensed
 */

/* ----------------------------------- *\
	Content
\* ----------------------------------- */

/*
 *Content....................... You are reading it
 *Globel........................ Set common styles
 *Layuot........................ Set grid styles
 *Component..................... Set component styles
 *Utility....................... Set tools
*/

/* ----------------------------------- *\
	Globel
\* ----------------------------------- */
	{}

	*{
		box-sizing: border-box;
		position: relative;
	}
	html,body{
		font-family: 'Noto Sans TC', sans-serif;
		/*font-family: '微軟正黑體',arial;*/
	/*	font-family: 'Noto Serif TC', serif;*/
		color: #333;
	}
	h1,h2,h3,h4,h5,h6,p{
		margin: 0;
	}
	h2{
		font-size: 48px;
		font-weight: 900;
	}
	h3{
		font-size: 36px;
		font-weight: 700;
	}
	h4{
		font-size: 32px;
		font-weight: 550;
	}
	h5{
		font-size: 24px;
		font-weight: 550;
	}
	p{
		line-height: 22px;
		font-size: 14px;
	}
	ul{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	a{
		text-decoration: none;
		color: #333;
	}


/* ----------------------------------- *\
	Layout
\* ----------------------------------- */

	.container{
		max-width:1800px;
		width: 70%;
		height: 100%;
		margin: 0 auto;
		/*padding-left: 24px;
		padding-right: 24px;*/
		/*border: 1px solid blue;*/

	}

	@media (max-width:768px){
		.container{
			width: 100%;
			padding-left: 24px;
			padding-right: 24px;

		}
	}

	.row{
		display: flex;
	/*	border: 2px solid red;*/
		flex-wrap: wrap;
		margin-left: -16px;
		margin-right: -16px;
	}

	/*RWD GRID*/
	.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-6,.col-lg-8,.col-lg-12,
	.col-md-2,.col-md-3,.col-md-4,.col-md-6,.col-md-12,
	.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-6,.col-sm-12,
	.col-sm-2,.col-xs-3,.col-xs-4,.col-xs-6,.col-xs-12{
		padding-left: 16px;
		padding-right: 16px;
	/*	border: 2px solid skyblue;*/
	}
	.col-lg-2{
		width: 16.666666%;
	}
	.col-lg-2_4{
		width: 20%
	}
	.col-lg-3{
		width: 25%;
	}
	.col-lg-4{
		width: 33.33333%;
	}
	.col-lg-6{
		width: 50%;
	}
	.col-lg-8{
		width: 66.666666%;
	}
	.col-lg-12{
		width: 100%;
	}

	@media screen and (max-width: 768px){
		.col-md-2{
			width: 16.666666%;
		}
		.col-md-3{
			width: 25%;
		}
		.col-md-4{
			width: 33.33333%;
		}
		.col-md-6{
			width: 50%;
		}
		.col-md-12{
			width: 100%;
			margin-bottom: 24px;
		}
	}
	@media screen and (max-width: 540px){
		.col-sm-2{
		width: 16.666666%;
		}
		.col-sm-3{
			width: 25%;
		}
		.col-sm-4{
			width: 33.33333%;
		}
		.col-sm-6{
			width: 50%;
		}
		.col-sm-12{
			width: 100%;
		}
	}
	@media screen and (max-width: 375px){
		.col-xs-2{
		width: 16.666666%;
		}
		.col-xs-3{
			width: 25%;
		}
		.col-xs-4{
			width: 33.33333%;
		}
		.col-xs-6{
			width: 50%;
		}
		.col-xs-12{
			width: 100%;
		}
	}
/* ----------------------------------- *\
	Component
\* ----------------------------------- */

/*------ navbar ------*/

	.navbar{
		background-color: rgba(255, 255, 255, 0.0);
		position: fixed;
		top: 0;
		height: 60px;
		width: 100%;
		box-shadow: 0;
		backdrop-filter: blur(5px);
		display: flex;
		opacity: 1;
		

		display: flex;
		justify-content: space-between;
		padding-left: 5%;
		padding-right: 16px;

		transition: all 0.2s;

		z-index: 2;
	}

	.navbar.active{
		box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.4);
		opacity: 1;
		background-color: rgba(255, 255, 255, 0.6);


	}

	.navbar .logo{
	/*	border: 1px solid blue;*/
		width: 180px;
		height: 60px;
		overflow: hidden;
		/*margin: auto;*/
		/*margin-left: 5%;*/
	}
	
	.logo .image{
	 	width: 100%;
	 	height: 100%;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}
	.navbar .nav-list{
		display: flex;
		align-items: center;
		column-gap: 24px;
	}

	.navbar .nav-item .social-btn{
		/*border: 1px solid blue;*/
		width: 44px;
		height: 44px;
		display: flex;
		margin: 0 auto;
	}

	.navbar .nav-item .more-btn{
		/*border: 1px solid red;*/
		width: 44px;
		height: 44px;
		color: #0fbccd;
		font-weight: 700;
		/*display: flex;*/

	}

	.navbar .nav-item{
		/*margin-left: 16px;*/
	}

	.navbar i{
		font-size: 28px;
		margin: auto auto;
		color: #0fbccd;
	}

	@media(max-width: 768px){
		.navbar .nav-list{
			display: none;
		}

		.navbar {
			padding: 0;
			justify-content: space-around;

		}

		.navbar .logo{
			width: 150px;
			height: 50px;
			margin: auto auto;
		}
		

	}
/*------ img-container ------*/

	.img-container{
	/*	border: 5px solid green;*/
		width: 100%;
	}
	.img-container.ratio-1-1{
		padding-top: 100%;
	}
	.img-container.ratio-3-4{
		padding-top: 75%;
	}
	.img-container.ratio-4-3{
		padding-top: 133.333%;
	}
	.img-container.ratio-9-16{
		padding-top: 56.25%;
	}
	.img-container.ratio-mid{
		padding-top: 63%;
	}

	.img-container.ratio-5-8{
		padding-top: 160%;
	}
	.img-container.ratio-9-32{
		padding-top: 28.125%;  /* 28.125% */
	}
	.img-container.ratio-7-16{
		padding-top: 43.75%;
	}
	.img-container.ratio-10-13{
		padding-top: 130%;
	}
	.img-container.ratio-16-9{
		padding-top: 177.77%;
	}
	.img-container .image{
		position: absolute;
		top: 0;left: 0;
		width: 100%;
		height: 100%;
	/*	background-image: url('../images/jumbotron/jumbotron_1.webp');*/
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}

/*------ BTN ------*/

	.btn{
		background-color: #0048D2;
		color: white;
		width: 120px;
		line-height: 32px;
		border-radius: 4px;
		text-align: center;

		transition: all 0.2s;
	}

	.btn-primary{
		background-color: #004165;
	}

	.btn a{
		color: white;
	}

	.btn:hover{
		opacity: 0.8;
	}

	.btn-container .btn{
		margin: auto auto;
	}

	.btn-container .btn:hover{
		transform: scale(1.1);
	}

	.btn-container{
		display: flex;
		width: 100%;
		height: 160px;
	}

/*------ Jumbotron ------*/

	.jumbotron{
	/*	background-color: skyblue;*/
		/*border: 1px solid skyblue;*/
		width: 100%;
		height: 100vh;
	}
	.jumbotron-mask-bottom{
		background: linear-gradient(-180deg, rgb(255, 255, 255 ,0.0), rgb(255, 255, 255,1));
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 50vh;
	}
	.jumbotron-mask-top{
		background: linear-gradient(0deg, rgb(255, 255, 255 ,0.0), rgb(255, 255, 255,1));
		position: absolute;
		top: 0;
		width: 100%;
		height: 20vh;
	}

	.jumbotron .img-container{
		min-height: 100vh;
	}
	.jumbotron .img-container .image{
		/*opacity: 0.6;*/
		mix-blend-mode: hard-light;
	}

	.jumbotron-title{
	/*	border: 1px solid red;*/
		width: 600px;
		height: 236px;

		position: absolute;
		top: 50%;
		left: 5%;
		transform: translate(0,-50%);
	}

	.jumbotron-title .image{
		position: absolute;
		top: 0;left: 0;right: 0;left: 0;
		width: 100%;
		height: 100%;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	/*	z-index: 5;*/
	}
	.jumbotron-video{
		position: absolute;
		top: 0;left: 0;
		width: 100%;
		height: 100%;
		/*background-color: black;*/
		/*z-index: 1;*/
	}
	.jumbotron-text{
		color: white;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translate(40%,-50%) rotate(-90deg);
	}

	@media(max-width: 768px){
		.jumbotron-title{
			width: 95%;
			max-width: 440px;
		}
		.jumbotron-text{
			display: none;
		}
	}

	@media(max-width: 425px){
		.jumbotron-title{
			width: 100%;
			left: 0;
		}
		
	}

/*------ hero ------*/

	.hero{
		background-color: white;
		padding-top: 64px;
	}

	.hero-bg{
		position: absolute;
		width: 100%;
		height: 1080px;
	}

	.hero-bg.bg-1{
		top: 480px;
		/*background-color: goldenrod;*/
	}
	.hero-bg.bg-2{
		bottom: 0;
		/*background-color: darksalmon;*/
	}

	.hero-bg .img-container{
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.hero-bg .hero-mask{
		background: linear-gradient(180deg, rgb(255, 255, 255 ,0.0), rgb(255, 255, 255,1));
		position: absolute;
		width: 100%;
		height: 100%;
	}
	.hero-mask.mask-1{
		top: 0;
		transform: rotate(180deg);
	}
	.hero-mask.mask-2{
		bottom: 0;
	}

/*------ subtitle ------*/

	.subtitle{
		/*border: 1px solid blueviolet;*/
		width: 250px;
		height: 125px;
		margin: auto;
		margin-bottom: 64px;
	}

	.subtitle .image{
		position: absolute;
		top: 0;left: 0;
		width: 100%;
		height: 100%;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}

	@media(max-width: 768px){
		.subtitle{
			width: 200px;
			height: 100px;
		}

	}

/*------ product-card-float ------*/

	.float-product-card-list{
		display: flex;
		justify-content: space-around;
		margin-bottom: 128px;
		margin-left: -16px;
		margin-right: -16px;
	}

	.product-card-float{
		/*border: 1px solid red;*/
		width: 300px;
		box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.5);
		margin-left: 16px;
		margin-right: 16px;

		transition: all 0.2s;
	}

	.product-card-float:hover{
		box-shadow: 8px 8px 16px 0 rgba(0, 0, 0, 0.5);
		transform: translate(0,-4px);
	}	

	.product-card-float:after{
		content: '';
		background: linear-gradient(180deg, rgb(255, 255, 255 ,0), rgb(255, 255, 255,1));
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 70%;
		pointer-events: none;
	}
	.product-card-float .product-inf{
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 43%;
		z-index: 1;
		padding: 16px;

		color: #004165;
	}

	.product-card-float .product-title{
		font-size: 24px;
		font-weight: 700;
		margin-bottom: 16px;
		text-align: justify;
	}

	.product-card-float .product-para{
		font-size: 14px;
		font-weight: 500;
		text-align: justify;
	}

	.product-card-float .product-price{
		position: absolute;
		right: 16px;
		bottom: 12px;
	}

	.product-card-float .product-price span{
		font-size: 24px;
		font-weight: 900;
		margin-left: 4px;margin-right: 4px;
		color: red;
	}

	@media(max-width: 1024px){
		.product-card-float{
			width: 208px;
		}

		.product-card-float .product-inf{
			height: 60%;
		}

		.product-card-float .product-title{
		font-size: 20px;
		
		}
		.product-card-float .product-price span{
		font-size: 20px;
		}

	}

	@media(max-width: 425px){
		.float-product-card-list{
			flex-direction: column;
			row-gap: 32px;
			margin: auto 0;
			margin-bottom: 64px;
		}

		.product-card-float{
			margin: 0 auto;
			width: 80%;
		}
		.product-card-float .product-inf{
			height: 40%;
		}
	}
	@media(max-width: 375px){
		.product-card-float .product-inf{
			height: 45%;
		}
	}

/*------ product-card-small ------*/

	.small-product-list:first-child{
		margin-bottom: 64px;
	}

	.product-card-small{
		border-bottom: 2px dotted black;
		padding: 8px;
		margin-bottom: 16px;

		transition: all 0.2s;

	}
	.product-card-small:hover{
		transform: translate(8px,0);
	}

	.product-card-small .title{
		font-size: 24px;
		font-weight: 700;
		margin-bottom: 8px;
	}
	.product-card-small .brand{
		font-size: 14px;
		font-weight: 500;
		color: #004165;
		margin-bottom: 8px;
	}
	.product-card-small .date{
		font-size: 16px;
		font-weight: 500;
		color: #5B7490;
		margin-bottom: 8px;
	}
	.product-card-small .product-price{
		position: absolute;
		right: 8px;
		bottom: 8px;
	}

	.product-card-small .product-price span{
		font-size: 24px;
		color: red;
		font-weight: 700;
		margin-right: 8px;
		margin-left: 8px;
	}

	@media(max-width: 768px){
		.product-card-small .title{
			font-size: 20px;
		}
		.product-card-small .brand{
			font-size: 12px;
		}
		.product-card-small .date{
			font-size: 14px;
		}
		.product-card-small .product-price span{
			font-size: 20px;
		}
	}

/*------ product-card-mid ------*/
	.product-card-md .product-pic{
		margin-bottom: 16px;
	}

	.product-card-md{
		margin-bottom: 32px;
		font-weight: 500;
	}


/*------ rule section ------*/

	.rule-section{

		color: whitesmoke;
		border-bottom: 1px solid rgba(255,255,255,0.5);
		padding-top: 16px;
		padding-bottom: 16px;
		margin-right:8px;
		margin-left: 8px;
	}

/*------ footer ------*/

	.footer{
		width: 100%;
		/*background-color: black;*/
		color: #004165;
		text-align: center;
		/*height: 36px;*/
		line-height: 26px;
	}
	.footer i{
		color: #004165;
		font-size: 24px;
		line-height: 44px;
	}
	.footer .nav-item .social-btn{
		position: absolute;
		top: 0;left: 0;right: 0;bottom: 0;

		/*border: 1px solid red;*/
	}

	.footer .nav-item{
		/*border: 1px solid blue;*/
		display: inline-block;
		width: 44px;
		height: 44px;
	}
	.footer .nav-list{
		height: 32px;
		display: none;
	}


	.footer .copyright{
		font-weight: 500;
		padding-top: 8px;
		padding-bottom: 8px;
	}

	@media(max-width: 768px){
		.footer .nav-list{
			display: block;
		}
	}