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

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

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

body {
	font-family: "Meiryo UI", "Microsoft JhengHei UI", 'Poppins', sans-serif;
	background-color: #E4E4E4;
}

#limi-nav ul {
	list-style: none;
}

#limi-nav a {
	text-decoration: none;
}

nav {
	/*overflow: hidden;     /* 網頁捲軸,hidden:自動隱藏超出的文字或圖片 */
	position: sticky;     /* Sticky 滾動黏滯定位 */
	top: 0px;
	background-color: #232F3B; /* #60b4df */
	width: 100%;
	z-index: 1000;
}

#limi-nav .container {
	max-width: 1920px;  /* 85rem */ 
	padding: 0 30px;
	margin: 0 auto;
	display: flex;
	position: relative;
}

.logo-container {
	flex: 1;
	display: flex;
	/* padding-top: 0px; */
	align-items: center;
	line-height: 100px;  /* 3rem */
}

.nav-btn {
	flex: 3;
	display: flex;
}

.nav-links {     /* Menu */
	flex: 2;
	padding-top: 20px;
}

.nav-links > ul {     /* Menu */
	float: right;
	position: relative;
	display: flex;
	list-style: none;
	/* justify-content: flex-end; */     /* center:水平置中 */
	/* align-items: flex-end; */     /* center:垂直置中 */
}

.nav-link {    /* Menu */
	position: relative;
	padding: 0 0px;
}

.nav-link > a {     /* Menu Mouse */
	line-height: 60px;     /* 3rem */
	color: #fff;
	padding: 0 10px;     /* 0 0.7rem */
	letter-spacing: 2px;
	font-size: 15px;     /* .95rem */
	display: flex;
	align-items: center;
	justify-content: flex-start;     /* space-between */
	transition: .5s;
}

.nav-link > a > i {
	margin-left: 5px;     /* .2rem：箭頭的左距 */
}

.nav-link:hover > a {
	/*  transform: scale(1.5);  */
	font-size: 18px;
	text-decoration: none;
	border-radius: 3px;
    color: cyan;
	/* box-shadow: 0 0 10px #FFFFFF,
                0 0 10px #EFFFFF;  */
}

.dropdown {     /* 子功能選單 */
	position: absolute;
	top: 60px;
	left: 0;
	width: 220%;   /* 10rem; */
	transform: translateY(30px);
	opacity: 0;
	pointer-events: none;
	border-top: 2px solid cyan;
	transition: .5s;
}

.dropdown ul {
	position: relative;
}

.dropdown-link > a {
	display: flex;
	background-color: #232F3B; /* #3498db#fff */
	color: #fff;   /* #3498db */
	padding: 6px 20px;     /* .5rem 1rem */
	font-size: 15px;     /* .9rem */
	/* align-items: center; */
	/* justify-content: space-between; */
	transition: .3s;
}

.dropdown-link:hover > a {
	/* background-color: #3498db; */
	color: cyan;     /* #fff */
}

.dropdown-link:not(:nth-last-child(2)) {
	border-bottom: 0px solid #efefef;
}

/* .dropdown-link i {
	transform: rotate(-90deg);
} */

.arrow {
	position: absolute;
	width: 11px;
	height: 11px;
	top: -5.5px;
	left: 30px;
	background-color: cyan; /* #fff */
	transform: rotate(45deg);
	cursor: pointer;
	transition: .3s;
	z-index: -1;
}

.dropdown-link:first-child:hover ~ .arrow {
	background-color: cyan;     /* #3498db; */
}

.dropdown-link {
	position: relative;
}

/* .dropdown.second {
	top: 0;
	left: 100%;
	padding-left: .8rem;
	cursor: pointer;
	transform: translateX(10px);
}

.dropdown.second .arrow {
	top: 10px;
	left: -5.5px;
} */

.nav-link:hover > .dropdown,
.dropdown-link:hover > .dropdown {
	transform: translate(0, 0);
	opacity: 1;
	pointer-events: auto;
}

.hamburger-menu-container {     /* 三條橫線－MENU */
	flex: 1;
	display: none;
	align-items: center;
	justify-content: flex-end;
}

.hamburger-menu {     /* 三條橫線－MENU */
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hamburger-menu div {     /* 三條橫線－MENU */
	width: 1.6rem;
	height: 3px;
	border-radius: 3px;
	background-color: #fff;
	position: relative;
	z-index: 1001;
	transition: .5s;
}

.hamburger-menu div:before,
.hamburger-menu div:after {
	content: '';
	position: absolute;
	width: inherit;
	height: inherit;
	background-color: #fff;
	border-radius: 3px;
	transition: .5s;
}

.hamburger-menu div:before {
	transform: translateY(-7px);
}

.hamburger-menu div:after {
	transform: translateY(7px);
}

#check {
	position: absolute;
	top: 50%;
	right: 2rem;
	transform: translateY(-50%);
	width: 2.5rem;
	height: 2.5rem;
	z-index: 90000;
	cursor: pointer;
	opacity: 0;
	display: none;
}

#check:checked ~ .hamburger-menu-container .hamburger-menu div {
	background-color: transparent;
}

#check:checked ~ .hamburger-menu-container .hamburger-menu div:before {
	transform: translateY(0) rotate(-45deg);
}

#check:checked ~ .hamburger-menu-container .hamburger-menu div:after {
	transform: translateY(0) rotate(45deg);
}

@keyframes animation {
	from {
		opacity: 0;
		transform: translateY(15px);
	}
	to {
		opacity: 1;
		transform: translateY(0px);
	}
}

@media (max-width: 1200px) {
	.hamburger-menu-container {
		display: flex;
	}
	
	#limi-nav .container {
		padding: 0 20px;
		height: 60px;
	}
	
	#check {
		display: block;
	}
	
	.logo-container img {
		width: 100%;
	}
	
	.nav-btn {
		position: fixed;
		height: calc(100vh - 3rem);
		top: 100px;     /* 3rem */
		left: 0;
		width: 80%;
		background-color: #232F3B;     /* #69bde7 */
		flex-direction: column; /* 列行 */
		align-items: center;
		justify-content: space-between;
		overflow-x: hidden; /* 捲動 */
		overflow-y: auto;
		transform: translateY(100%);     /* 縱向移動 o 距離 */
		transition: .5s;
		border-top: 3px solid cyan;
	}
	
	#check:checked ~ .nav-btn {
		transform: translateY(0);
	}
	
	#check:checked ~ .nav-btn .nav-link {
		animation: animation .5s ease forwards var(--i);
	}
	
	.nav-links {
		flex: initial;
		width: 100%;
	}
	
	.nav-links > ul {
		flex-direction: column;
		float: inherit;
	}
	
	.nav-link {
		width: 100%;
		opacity: 0;
		transform: translateY(15px);
	}
	
	.nav-link > a {
		line-height: 1;
		padding: 20px 30px;     /* 1.6rem 2rem */
		display: flex;
		justify-content: space-between;
	}
	
	.nav-link:hover > a {
		/* transform: scale(1); */
		background-color: #50a9d6;
		border-radius: 0px;
		box-shadow: 0 0 1px #FFFFFF,
     	            0 0 1px #EFFFFF;
	}
	
	.dropdown {     /* .dropdown, .dropdown.second { */
		position: initial;
		top: initial;
		left: initial;
		transform: initial;
		opacity: 1;
		pointer-events: auto;
		width: 100%;
		padding: 0 30px;
		background-color: #3183ac;
		display: none;
	}
	
	.nav-link:hover > .dropdown,
	.dropdown-link:hover > .dropdown {
		display: block;
	}
	
	.nav-link:hover > a > i,
	.dropdown-link:hover > a > i {
		transform: rotate(360deg);
	}
	
	.dropdown-link > a {
		background-color: transparent;
		color: #fff;
		padding: 50 42px;     /* 1.2rem 2rem */
		line-height: 3;
	}
		
	.dropdown-link:not(:nth-last-child(2)) {
		border-bottom: none;
	}
	
	.arrow {
		z-index: 1;
		background-color: cyan;    /* #69bde7 */
		left: 10%;
		transform: scale(1.1) rotate(45deg);
		transition: .5s;
	}
	
	.nav-link:hover .arrow {
		background-color: cyan;   /* #50a9d6 */
	}
	
	/* .dropdown .dropdown .arrow {
		display: none;
	} */
	
	.dropdown-link:hover > a {
		background-color: #3a91bd;   /* #3a91bd */
		color: #fff;
	}
	
	.dropdown-link:first-child:hover ~ .arrow {
		background-color: cyan;   /* #50a9d6 */
	}
	
	.nav-link > a > i {   /* 箭頭的方向 */
		font-size: 1.1rem;
		transform: rotate(-90deg);
		transition: .2s;
	}
	
	.dropdown i {
		font-size: 1rem;
		transition: .2s;
	}
}

@media (max-width: 576px) {	
	#limi-nav .container {
		height: 60px;
	}
	.logo-container img {
		width: 150%;
	}
	.nav-btn {
		top: 50px;
	}
}