@charset "UTF-8";

@font-face {    /* jf金萱鮮摘 半糖*/
    font-family: 'jf-jinxuan-M';
    src: url('../fonts/jf-jinxuan-medium.otf') format("truetype");
}

@font-face {    /* CHei2HK*/
    font-family: 'CHei2HK';
    src: url('../fonts/CHei2HK-Bold.otf') format("truetype");
}

@font-face {    /* AdobeMingStd*/
    font-family: 'Outfit';
    src: url('../fonts/Outfit-VariableFont_wght.ttf') format("truetype");
}

:root {
	--B59E85-40 : rgba(181, 158, 133, 0.4);
	--B59E85-20 : rgba(181, 158, 133, 0.2);
	--717679-30 : rgba(113, 128, 121, 0.3);
	--717679 : #717679;
	--FFFFFF : #FFFFFF;
	--B59E85 : #B59E85;
	--FBFBFB : #FBFBFB;
	--E5E5E5 : #E5E5E5;
	--595757 : #595757;
	--8A8A8A : #8A8A8A;
	--70767A : #70767A;
	--B5B5B6 : #B5B5B6;
}

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

html {
	font-family: sans-serif;
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
	width: 100%;
	display: block;
	background: var(--FBFBFB);
}

main{
	min-height: calc(100vh - 120px - 140px);
	margin: auto;
	font-family: 'CHei2HK';
	/* background: #000; */
}

section{
	margin: auto;
	background: var(--FBFBFB);
	max-width: 1920px;
	min-height: 1080px;
	width: 100%;
	height: auto;
}


a {
	text-decoration: none;
}

p {
	word-break: keep-all;
	line-break: loose;
	overflow-wrap: break-word;

}

img{
    width: 100%;
    height: auto;
    object-fit: cover;
    /* max-height: 100vh; */
}

@media screen and (max-width: 1440px) {

	main {
		min-height: calc(100vh - 100px - 110px);
	}

	section{
		min-height: auto;
	}
	
	img {
        max-height: 645px;
	}
}

@media screen and (max-width: 992px) {

	main {
		min-height: calc(100vh - 100px - 180px);
	}


    img {
        max-height: 500px;
    }
}

@media screen and (max-width: 768px) {

    img {
        max-height: 350px;
    }
}

@media screen and (max-width: 425px) {

    img {
        max-height: 250px;
    }
}

/* header */

header {
	background: var(--B59E85);
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 120px;
	padding: 0 5%;
	z-index: 1000;
}

header #logo {
	margin: 10px;
}

header #logo img {
	width: 120px;
	/* height: 70px; */
}

header .navbar-toggler {
    border: 0;
}

header .navbar-toggler-icon {
    width: 30px;
    height: 30px;
}

header #menus {
	display: flex;
	font-family: 'CHei2HK';
	font-size: 22px;
	color: var(--FBFBFB);
	justify-content: center;
}

header .menu {
	margin: 10px 20px;
	padding: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	align-content: center;
	position: relative;
	z-index: 1000;
}

header .dropdown-menu {
	border: 1px solid var(--B59E85);
	display: none;
	background: var(--E5E5E5);
	text-align: center;
	position: absolute;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	top: 50px;
	color: var(--595757);
	font-size: 20px;
	min-width: 120px;
}

header .dropdown-menu a {
	padding: 5px 0 ;
	color: var(--595757);
}

header .menu a{
	color: var(--FBFBFB);
	cursor: pointer;
}

header .menu a:hover{
	color: var(--595757);
}

header .dropdown-menu a{
	color: var(--595757);
}

header .dropdown-menu a:hover {
	color: var(--B59E85);
}

header .menu:hover .dropdown-menu,
header .menu:hover .text-english{
	display: flex;
	flex-direction: column;
	color: var(--595757);
}

header #icons {
	display: flex;
	justify-content: center;
	margin: 10px;
}

header #icons a{
	margin: 0 5px;
}

header #icons img{
	width: 35px;
	height: 35px;
	object-fit: fill;
}

header .text-english {
    display: none;
}

header .menu:hover .text-chinese {
    display: none;
	overflow: hidden;
}

header .menu:hover .text-english {
    display: flex;
	overflow: hidden;
	cursor: pointer;
}


@media screen and (max-width: 1440px) {



	header {
		padding: 15px;
		height: 100px;
	}

	header #menus {
		font-size: 20px;
	}

	header .menu {
		margin: 5px;
	}

}

@media screen and (max-width: 991px) {



	header {
		padding: 15px;
		height: auto;
	}


    header #menus {
        flex-direction: column;
    }

	header .dropdown-menu {
		position: relative;
		top: 0;
		margin-top: 10px;
	}
}


@media screen and (max-width: 768px) {

}

/* footer */

footer{
	height: 140px;
	background: var(--B59E85-40);
	display: flex;
	align-items: center;
    justify-content: center;
	color: var(--595757);
	font-family: 'jf-jinxuan-M';
	font-size: 16px;
	flex-wrap: wrap;
}

footer .menu{
	display: flex;
	flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

footer div{
	padding: 10px;
}

footer div a label ,
footer div a{
	color: var(--595757);
	cursor: pointer;
}

footer div a label:hover ,
footer div a:hover{
	color: var(--B59E85);
}

footer img {
	width: 150px;
}


@media screen and (max-width: 1440px) {

	footer {
		height: auto;
		padding: 20px;
	}

	footer div {
		padding: 5px 10px;
	}
}

@media screen and (max-width: 425px) {

    footer {
        padding: 15px 0;
		font-size: 15px;
    }
}