@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Dela+Gothic+One&family=Gloock&family=Hina+Mincho&family=Kristi&family=M+PLUS+2:wght@100..900&family=Patua+One&family=Potta+One&family=Zen+Antique&display=swap');

img[alt*="www.000webhost.com"] {
	display: none;
}

@color-profile {
    name: sRGB;
    src: url('https://www.w3.org/Graphics/Color/sRGB');
}

body {
    color-profile: sRGB;
	font-family: "Gloock"
}

##.disclaimer{
	display: none;
}

::selection{
background: rgba(40,200,160,.8);
color: rgba(250,250,250,.97);
}

body { 
	margin: 0;
}

.null {
	height: 115px;
}

/* 預設顯示英文，隱藏中文 */
body:not([data-lang="zh"]) .lang-zh {
    display: none;
}

/* 當 data-lang="zh" 時，顯示中文，隱藏英文 */
body[data-lang="zh"] .lang-en {
    display: none;
}

body[data-lang="zh"] .lang-zh {
    display: inline-block;  /* 確保中文顯示 */
}

#button {
	margin-top: 50px;
	font-size: 50pt;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	color: rgba(100,100,100,.8);
	-webkit-transition: all .5s ease-in-out .1s;
	-moz-transition: all .5s ease-in-out .1s;
	transition: all .5s ease-in-out .1s;
}

#meng-icon {
    width: 5vw;
    top: 4vh;
    left: 92vw;
    position: fixed;
    display: block; 
	cursor: pointer;
	z-index: 99;
}

#meng-icon:hover #meng-icon-solar {
	fill: rgba(180,180,180,.7);
	transition: all .5s ease-in-out .5s;
}

#meng-icon:hover #meng-icon-luna {
	fill: rgba(40,200,160,.8);
	transition: all .5s ease-in-out .5s;
}

#meng-icon-solar {
	fill: rgba(180,180,180,.2);
	transition: all .5s ease-in-out .5s;
}

#meng-icon-luna {
	fill: rgba(40,200,160,.3);
	transition: all .5s ease-in-out .5s;
}

#button:hover {
	color: rgba(100,255,173,.97);
}
	
#wrap{
    position: relative;
}

#wrap::before{
  background-image: url("/img/background.jpg");
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index:-1;
  opacity: 0.2;
}

@import url('normalize.css');

.player {
	opacity: 1;
	background: rgba(0,0,0,0.8);
	position: fixed;
	width: 100%;
	height: 100%;
	text-align: center;
	align-items: center;
	justify-content: center;
	margin: auto;
	z-index: 999999999;
	overflow: hidden;
    transition: all 1s ease-in-out .5s;	
	animation-name: play;
    animation-duration: 2s;
}


.player::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../img/overlays/05g.png");
	opacity:1%;
    background-size: auto 0.2%;
}

@keyframes play {
    from {
		background: rgba(10,10,10,.8);
		}
    to {
		background: rgba(0,0,0,.8);
		}
}

#youtube {
	width: 72%;
	height: 100%;
	z-index: 1000000000;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	animation-name: vidpopup;
    animation-duration: 1.5s;
}

@keyframes vidpopup {
    from {
		width: 0%;
		height: 0%;
		}
    to {
		width: 72%;
		height: 100%;
		}
}


#pic {
	border: solid white;
	border-width: 3em;
}

.player object .wide {
	opacity: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 精確置中 */
    max-width: 70vw;
    max-height: 70vh;
    object-fit: contain;
    transition: all 1s ease-in-out .5s;	
	animation-name: imgpopup-wide;
    animation-duration: 1s;
}


@keyframes imgpopup-wide {
    from {
		width: 0vw;
		height: 0vh;
		}
    to {
		width: auto;
		height: 70vh;
		}
}

.player object .tall {
	opacity: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 精確置中 */
    max-width: 70vw;
    max-height: 70vh;
    object-fit: contain;
    transition: all 1s ease-in-out .5s;	
	animation-name: imgpopup-tall;
    animation-duration: 1s;
}


@keyframes imgpopup-tall {
    from {
		width: 0vw;
		height: 0vh;
		}
    to {
		width: auto;
		height: 70vh;
		}
}

.player object .ultrawide {
	opacity: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 精確置中 */
    max-width: 80vw;
    max-height: 80vh;
    object-fit: contain;
    transition: all 1s ease-in-out .5s;	
	animation-name: imgpopup-superwide;
    animation-duration: 1s;
}


@keyframes imgpopup-ultrawide {
    from {
		width: 0vw;
		height: 0vh;
		}
    to {
		width: 80vw;
		height: auto;
		}
}

.player object .superwide {
	opacity: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 精確置中 */
    max-width: 80vw;
    max-height: 80vh;
    object-fit: contain;
    transition: all 1s ease-in-out .5s;	
	animation-name: imgpopup-superwide;
    animation-duration: 1s;
}


@keyframes imgpopup-superwide {
    from {
		width: 0vw;
		height: 0vh;
		}
    to {
		width: 80vw;
		height: auto;
		}
}


#wrap{
    position: relative;
}

#wrap::before{
  background-image: url(/img/background.jpg);
  background-repeat: repeat;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index:-99;
  opacity: 0.22;
}

@import url('normalize.css');


/* General Demo Style */
body{
	background: #fff url(../images/b.jpg);
	font-weight: 300;
	font-size: 15px;
	color: #333;
	-webkit-font-smoothing: antialiased;
	overflow-y: scroll;
	overflow-x: hidden;
}

a{
	color: #555;
	text-decoration: none;
}
.container{
	width: 100%;
	position: relative;
}
.clr{
	clear: both;
	padding: 0;
	height: 0;
	margin: 0;
}
.main{
	width: 90%;
	margin: 0 auto;
	position: relative;
}

.container > header{
	margin: 10px;
	padding: 20px 10px 10px 10px;
	position: relative;
	display: block;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    text-align: center;
}
.container > header h1{
	font-size: 32px;
	line-height: 32px;
	margin: 0;
	display: block;
	position: relative;
	font-weight: 300;
	color: #777;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.7);
}
.container > header h2{
	font-size: 14px;
	font-weight: 300;
	font-style: italic;
	margin: 0;
	padding: 15px 0 5px 0;
	color: #888;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.9);
}

.ch-grid {
	margin: 0px 0 0 0;
	padding: 0;
	list-style: none;
	display: block;
	text-align: center;
	width: 100%;
}

.ch-grid:after,
.ch-item:before {
	content: '';
    display: table;
}

.ch-grid:after {
	clear: both;
}

.ch-grid li {
	width: 220px;
	height: 220px;
	display: inline-block;
	margin: 2px;
}

.chart-title {
	color: rgba(240,240,240,1);
	text-shadow: 0px 0px 1px 0px rgba(255,255,255,0.9);
	text-transform:uppercase;
	font-weight:bold;
	font-size:180px;
	text-align: center;
	margin: -32px 0 0;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

.chart-title:hover {
	color: rgba(255,255,255,1);
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

.introbox  {
	list-style: none;
	margin: auto;
	padding: 0;
	width: 1150px;
}

.timechart {
	z-index: 50
	text-align: center;	
	padding: 22px;
	width: 280px;
	margin: -1.5px 38.9% 0;
}

.release-week {
	color: rgba(255,255,255,0);
	text-transform:uppercase;
	height: 30px;
	width: 100px;
	text-align: center;
	cursor: default;
	padding: 4px;
	margin: 0 10%;
	display: inline;
	font-size: 15pt;
	font-weight: bold;
	-webkit-transition: all 0.4s ease-in-out 0.4s;
	-moz-transition: all 0.4s ease-in-out 0.4s;
	-o-transition: all 0.4s ease-in-out 0.4s;
	-ms-transition: all 0.4s ease-in-out 0.4s;
	transition: all 0.4s ease-in-out 0.4s;
}

.release-year {
	color: rgba(255,255,255,0);
	text-transform:uppercase;
	height: 30px;
	width: 100px;
	text-align: center;
	cursor: default;
	padding: 4px;
	margin: 0 17%;
	display: inline;
	font-size: 15pt;
	font-weight: bold;
	-webkit-transition: all 0.4s ease-in-out 0.4s;
	-moz-transition: all 0.4s ease-in-out 0.4s;
	-o-transition: all 0.4s ease-in-out 0.4s;
	-ms-transition: all 0.4s ease-in-out 0.4s;
	transition: all 0.4s ease-in-out 0.4s;
}

.release-date {
	color: rgba(100,255,173,0.8);
	height: 30px;
	width: 100px;
	text-align: center;
	cursor: default;
	padding: 4px;
	margin: -20px -105px;
	display: inline;
	font-size: 15pt;
	font-weight: bold;
	border: 3px solid rgba(255,255,255,0.5);
	background: rgba(255,255,255,.9);
	-webkit-transition: all 0.4s ease-in-out 0.4s;
	-moz-transition: all 0.4s ease-in-out 0.4s;
	-o-transition: all 0.4s ease-in-out 0.4s;
	-ms-transition: all 0.4s ease-in-out 0.4s;
	transition: all 0.4s ease-in-out 0.4s;
}

.prevchart {
	margin: 0 20px 0 0;
	width: 5px;
	display: inline;
	text-align: center;
	opacity: 0;
	-webkit-transition: all 1s ease-in-out 0.4s;
	-moz-transition: all 1s ease-in-out 0.4s;
	-o-transition: all 1s ease-in-out 0.4s;
	-ms-transition: all 1s ease-in-out 0.4s;
	transition: all 1s ease-in-out 0.4s;
}

.nextchart {
	margin: 0 0 0 100px;
	width: 5px;
	display: inline;
	text-align: center;
	opacity: 0;
	-webkit-transition: all 1s ease-in-out 0.4s;
	-moz-transition: all 1s ease-in-out 0.4s;
	-o-transition: all 1s ease-in-out 0.4s;
	-ms-transition: all 1s ease-in-out 0.4s;
	transition: all 1s ease-in-out 0.4s;
}

.intro {
	font-size: x-large;
	padding: 20px 40px 40px 40px;
	background: #fff;
	text-align: justify;
	background: rgba(0,0,0,0);
}

.release-date:hover {
	color: rgba(255,255,255,0);
	border: 3px solid rgba(255,255,255,0.8);
	background: rgba(255,255,255,0);
}

.release-week:hover {
	color: rgba(255,255,255,1);
}

.release-year:hover {
	color: rgba(255,255,255,1);
}

.introbox:hover .prevchart {
	opacity: 1;
}

.introbox:hover .nextchart {
	opacity: 1;
}

.prevchart a:hover {
	color: rgba(255,255,255,0.8);
}

.nextchart a:hover {
	color: rgba(255,255,255,0.8);
}

.footer {
	color: #fff;
	letter-spacing: .5pt;
	width: 100%;
	height: 420px;
	margin: 50px 0 0px;
	background: rgba(61,61,61,1);
	overflow: hidden;
}

.footer table {
	width: 600px;
	height: 200px;
	margin: auto;	
}

.footer ul {
	color: #fff;
	list-style-type: none; 
	letter-spacing: 1px;
	font-size: 10pt;
	line-height: 14pt;
	height: 200px;
	width: 220px;
	padding: 5px;
	margin: auto;
}

.footer ul p {
	letter-spacing: 1px;
	font-size: medium;
	padding: 20px 0 0;
	font-weight: bold;
	color: rgba(100,255,173,1);
}

.footer ul a {
	color: #fff;
	-webkit-transition: all 0.4s ease-in-out 0.4s;
	-moz-transition: all 0.4s ease-in-out 0.4s;
	-o-transition: all 0.4s ease-in-out 0.4s;
	-ms-transition: all 0.4s ease-in-out 0.4s;
	transition: all 0.4s ease-in-out 0.4s;
}


.country {
	cursor: pointer;
	margin: auto;
}

.link {
	display: inline;
	padding: 1px;
	text-color: #fff;
	font-size: xx-small;
	opacity: 0;
	border: 1px solid rgba(61,61,61,1);
	-webkit-transition: all 0.4s ease-in-out 0.4s;
	-moz-transition: all 0.4s ease-in-out 0.4s;
	-o-transition: all 0.4s ease-in-out 0.4s;
	-ms-transition: all 0.4s ease-in-out 0.4s;
	transition: all 0.4s ease-in-out 0.4s;
}

.link a {
	font-size: xx-small;
	padding: 1px;
	color: rgba(100,255,173,1);
}


.country:hover .link {
	opacity: 1;
	border: 1px solid rgba(100,255,173,0.9);
}

.country:hover .link a {
	opacity: 1;
	color: rgba(100,255,173,1);
}


.copyright {
	font-size: smaller;
	text-align: center;
	height: 20px;
	padding: 160px 0 0;
	margin: auto;
}

.search {
	color: #fff;
	background: rgba(61,61,61,0);
	border: 0px solid;
}

::-webkit-input-placeholder { 
	font-size: smaller;
}
::-moz-placeholder { 
	font-size: smaller;
} 
:-ms-input-placeholder { 
	font-size: smaller;
} 
input:-moz-placeholder { 
	font-size: smaller;
}

#search-box:hover {
	border: 2px solid rgba(100,255,173,0.5);
	background: rgba(243,255,251,1);
}

#search-box:focus { 
	border: 2px solid rgba(100,255,173,1);
}

.footer ul a:hover {
	color: rgba(100,255,173,1);
}

.error {
	margin-top: 40vh;
	text-align:center;
	background: rgba(255,255,255,1);
}

#brush{
	color:rgba(100,100,100,.97);
	-webkit-transition: all .5s ease-in-out 5s;
	-moz-transition: all .5s ease-in-out .1s;
	transition: all .5s ease-in-out .1s;
	animation-name: animation;
    animation-duration: 5s;
	animation-iteration-count: infinite;
}

#brush:hover{
	color:rgba(100,255,173,.97);
}	
	
@keyframes animation {
    0% {transform: rotate(0deg) translateY(0px);}
	12.5% {transform: rotate(-30deg) translateY(-100px);}
	20% {transform: rotate(0deg) translateY(-20px);}
	37.5% {transform: rotate(-30deg) translateY(-100px);}	
	50% {transform: rotate(0deg) translateY(-20px);}
	62.5% {transform: rotate(30deg) translateY(-100px);}
	70% {transform: rotate(0deg) translateY(-20px);}
	85.5% {transform: rotate(30deg) translateY(-100px);}	
	100% {transform: rotate(0deg) translateY(0px);}
}

#error-title{
	letter-spacing:2px;
	color:rgba(100,255,173,.97);
	text-shadow: 0px 0px 1px 0px rgba(255,255,255,0.9);
	font-size: 20pt;
	text-transform:uppercase;
}

#error-text{
	letter-spacing:2px;
	text-shadow: 0px 0px 1px 0px rgba(255,255,255,0.9);
	font-size: 14pt;
	padding: 5px;
}	


#nav-footer {
	display: block;
	width: 100vw;
	text-align: center;		
	height: 1vh;
	bottom: 0vh;
	position: fixed;
	font-size: .8vw;
	overflow: hidden;
	background-color: rgba(40,200,160,.9);
	transition: all 1s ease-in-out .1s;
	z-index:99;
}

#nav-footer:hover, #nav-footer.active  {
	background-color: rgba(50,50,50,.9);
	font-size: 2vw;
	height: 6vh;
	padding: -1vh;
	color: rgba(100,100,100,.8);
	transition: all 1s ease-in-out .1s;
	z-index:99;
}

#nav-footer a{
    margin: 0 10vw;
	font-family: "M PLUS 2";		
	font-size: 1vw;
	color: rgba(255,255,255,0.9);
	text-transform: lowercase;	
	letter-spacing: 0.05vw;	
	opacity:0;
	text-decoration: none;
    position: relative;
    padding: 0.5vh 1vw; /* 讓按鈕內部有適當空間 */
	transition: all 1s ease-in-out .1s;
	z-index:99;
}

#nav-footer .switch-lang, #nav-footer.active .switch-lang{
	text-align: left;
	display:inline-block;
	font-family: "M PLUS 2";	
	font-weight: 800;	
	font-size: 0.8vw;
	color: rgba(255,255,255,0.9);
	text-transform: uppercase;	
	letter-spacing: 0vw;	
	opacity:0;
    position: absolute;  /* 使用絕對定位 */
	top:56%;
    left: 3.05%; 
    transform: translate(-50%, -50%);  /* 精確居中 */
	transition: all 1s ease-in-out .1s;
	z-index:100;
}

.switch-lang {
	width:7vw;
	height:7vh;
	top:50%;
    cursor: pointer;
    background-color: rgba(40, 200, 160, 1);
    position: absolute;  	
    transition: background-color 0.3s ease;	
}

.lang-group{
	width:7vw;
	height:7vh;
	top: 32%;
	text-align: center;	
	position: absolute; 	
}

#nav-footer:hover a, #nav-footer:hover .switch-lang, #nav-footer.active a, #nav-footer.active .switch-lang{
	color: rgba(255,255,255,.8);
	font-size: 1vw;
	opacity:100;	
	transition: all 1s ease-in-out .1s;
	z-index:99;	
}

#nav-footer a.lang-en, #nav-footer.active a.lang-en{	
	left: 1.5%;		
}

#nav-footer a.lang-zh, #nav-footer.active a.lang-zh{
	font-size: .9vw;
	letter-spacing: 1vw;		
	left: 1%;		
}

#nav-footer a.lang-zh:hover {
	letter-spacing: 1vw;	
}

#nav-footer:hover .switch-lang, #nav-footer.active .switch-lang{
	font-size: 0.8vw;
}

#nav-footer a:hover {
	font-weight: 900;
	color: rgba(255,255,255,1);
    text-decoration: none;
    position: relative;
	letter-spacing: 0.03vw;		
    display: inline-block;
    padding: 0.5vh 1vw; /* 讓按鈕內部有適當空間 */
	transition: all .1s ease-in-out .5s;
    z-index: 99;
}

.nav-footer a::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 7vh; /* 設定固定高度 */
    background-color: rgba(40, 200, 160, .8);
	mix-blend-mode:darken;
    transform: translate(-50%, -50%) scaleX(0); /* 初始狀態下，縮小並位於中間，僅在水平方向縮小 */
    visibility: hidden; /* 初始不可見 */
	transition: all .7s ease-in-out .3s;
    z-index: -1;
}

.nav-footer a:hover {
    color: black;
}

.nav-footer a:hover::after {
    width: 300%;
    transform: translate(-50%, -50%) scaleX(1); /* 放大並從中間開始，只在水平方向放大 */
    visibility: visible;
	transition: all .7s ease-in-out .3s;
}

.copyright{
	font-family: "M PLUS 2";	
	text-align: center;
	position: fixed;
	bottom: 15vh;
	width: 100vw;
	font-size: .6vw;
    font-weight: normal;
	display: block;
	text-transform: uppercase;	
	letter-spacing: 0.05vw;	
	color: rgba(0,0,0,0.5);	
	transition: all 1s ease-in-out .1s;	
}

body:has(.content:hover) #nav-footer {
	background-color: rgba(40,200,160,0);
	height: 0vh;
	transition: all 1s ease-in-out .5s;		
}

body:has(.content:hover) #nav-footer a{
	color: rgba(0,0,0,0);
	transition: all 1s ease-in-out .5s;		
}

#contact{
	width: 100vw;
	height: 6vh;
	display: inline-block;
	background: rgba(40,200,160,.9);
	right: -97vw;
	position: absolute;
	top: 0vh;
	z-index:99;
	transition: all 1s ease-in-out .2s;		
}

#contact i.contact-icon {
	color:rgba(255,255,255,.9);
	font-size: 1vw;
	align-items: left;
	left: 1vw;
	top: 40%;
	opacity:0;
	cursor: pointer;	
	position: absolute;		
	transition: all 1s ease-in-out .5s;			
}

.nav-footer:hover #contact i.contact-icon, #nav-footer.active #contact i.contact-icon {	
	opacity:1;	
}

.phone-info, .mail-info{
	margin-right: 50vw;

}


.phone-info{
	display: inline-block;		
	width: 30vw;
	position: absolute;	
	align-items: center;
}

.phone-num:before{
	content:"(853) 62122132";
}

.phone-title, .mail-title {
	margin-right: 1vw;	
	font-family: "M PLUS 2";	
	font-size: 1vw;
	margin-top: 1vh;
	display: inline-block;	
	color:white;
	text-transform: lowercase;	
	letter-spacing: 0.05vw;		
}

.phone-num, .mail-adr{
	font-family: "M PLUS 2";
	font-weight: 500;
	color:rgba(200,200,200,.9);
	font-size: .8vw;
	letter-spacing: 0.1vw;		
	text-transform: uppercase;		
	display: inline-block;
}

.phone-title.lang-en:before{
	content:"Phone";
}

.phone-title.lang-zh:before{
	content:"電話";
	letter-spacing: 1vw;	
}


.mail-adr:before{
	content:"jermainecmho@gmail.com";
}

.mail-title.lang-en:before{
	top:25%;	
	content:"Email";
}

.mail-title.lang-zh:before{
	content:"電郵";
	letter-spacing: 1vw;	
}