/*字型*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');

* {
	margin: 0; 
	padding: 0;
	border: 0;
	list-style:none;		
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}
*::selection{
	background: var(--selected); 
}

html {
	font-size: 20px;		
}
@media (min-width: 3000px){
  html {
		font-size: 30px;
	}
}
@media (min-width: 5000px){
  html {
		font-size: 42px;
	}
}
@media (max-width: 1199px){
	html {
		font-size: 18.9px;	
	}
}
@media (max-width: 599px){
	html {
		font-size: 17.1px;	
	}
}
/*----------------------------------*\
	# var                     
\*----------------------------------*/
:root {	 
  --main: #e7ae00;
  --main: #ff8a05;   
  --mate: #5b5bcc;
  --match: #b8b8ff;
  --brand: #bb972f;/*Logo金*/
	
	--bg: #f6f7f8;
  --header: rgba(0,0,0,.63);  
  --header-scroll: rgba(255,255,255,.99);
	--footer: #545454;
	--burger: #545454;
	--panel: rgba(238, 238, 238, 0.9);	
  --scrollbar: lightyellow;		
	--scrollbar-track: white;
	--border: #ccc;	
	--input: #FFF;
	--selected: #FC0;	

	--font: #000;
	--white: #FFF;
  --weak: #F3F1F0;
  --tinygray: #dedede;
  --gray: #ccc;
	--strong: #333;

	--btn-h: 2.6rem;
	--header-h: 3.6rem;		
  --footer-h: 22.5rem; --footer-h: 27rem;
	--full-h: calc(var(--vh, 1vh) * 100); 
  /* --min-h: calc(var(--full-h) - var(--footer-h) - var(--header-h)); */
  --min-h: calc(var(--full-h) - var(--footer-h));  
	--topic-h:6.6rem;				
	
	--tx-sd: 0 1.8px 1.8px rgba(0, 0, 0, 0.36);
	--box-sd: 0 1px 2px 0 rgba(0, 0, 0, 0.24);	
	
	/*Font Family (X(Exciting); P(Plain); E(English) */
	--en: 'Hind Siliguri', sans-serif; /*EP*/ 
	--order: 'Poiret One', cursive;/*Number(thin,cursive)*/ 
	--cursive:'Great Vibes', cursive; /*E(cursive)*/  
	--num:'Cinzel Decorative', sans-serif; /*Price&Date(Number)*/  
  --mix:"Raleway",'Noto Sans TC',sans-serif ; /*EX+CP*/  
  --merge: "Hind Siliguri",'Noto Sans TC',sans-serif ; /*EP+CX*/
  --mingle:"Raleway",'Noto Serif TC', serif;	/*EX+CX*/
  --base: "Noto Sans TC",'Roboto', sans-serif; /*CP+EP*/
  --luyi: 'Noto Serif TC', 'Hind Siliguri',serif; /*CX+EP*/

  /*Font Size*/  
  --great: calc(5.4rem + .54vw); /*≅118.4px*/  
  --huge: calc(2.7rem + .27vw); /*59.184px*/ 
  --huge: calc(3.6rem + .36vw); /*px*/ 
  --topic: calc(1.8rem + .1875vw); /*39.6px*/
  --title: calc(1.35rem + .1875vw); /*30.6px*/  
	--keyword: calc(1.08rem + .25vw); /*26.4px*/
	--big: calc(.9rem + .25vw); /*22.8px*/
	--small: calc(.81rem + .1875vw); /*19.8px*/
	--tiny: calc(.72rem + .125vw); /*16.8px*/
  --bitty: calc(.63rem + .09vw); /*14.328px*/
  --p: calc(.81rem + .1875vw);	

  --line-h:  calc(var(--p) * 1.53); 
	--line-2h: calc(var(--p) * 3.06);
	--line-3h: calc(var(--p) * 4.59);	
	--line-4h: calc(var(--p) * 6.12); 
	--line-5h: calc(var(--p) * 7.65);

  --gap:  calc(0.26rem + 0.25vw) ;  
	--gap-1: calc(0.52rem + 0.5vw) ;  
	--gap_1: calc(0.78rem + 0.75vw);  
	--gap-2: calc(1.04rem + 1vw)   ;  
	--gap_2: calc(1.2rem + 1.25vw) ;  
	--gap-3: calc(1.56rem + 1.5vw) ;  
	--gap_3: calc(1.82rem + 1.75vw);  
	--gap-4: calc(2.08rem + 2vw)   ;  
	--gap_4: calc(2.34rem + 2.25vw);  
	--gap-5: calc(2.6rem + 2.5vw)  ;   
	--gap_5: calc(2.86rem + 2.75vw);  
	--gap-6: calc(3.12rem + 3vw)   ;  
	--gap_6: calc(3.38rem + 3.25vw);  
	--gap-7: calc(3.64rem + 3.5vw) ;   
	--gap_7: calc(3.9rem + 3.75vw) ;     
	--gap-8: calc(4.16rem + 4vw)   ;   
	--gap_8: calc(4.42rem + 4.25vw);  
	--gap-9: calc(4.68rem + 4.5vw) ;   
	--gap_9: calc(4.94rem + 4.75vw);  
	--gap-10: calc(5.2rem + 5vw)   ;
}
@media (max-width: 1199px){
	:root {
    --header: rgba(255,255,255,1);
    --footer-h: 27rem;
		--tx-sd: -0.6px 0 0.6px rgba(0,0,0,.34);
		--box-sd: 0 0.6px 1.2px 0 rgba(0, 0, 0, 0.24);
    --min-h: calc(var(--full-h) - var(--footer-h) - var(--header-h));	
	}
}
/*----------------------------------*\
	# element ( common )                  
\*----------------------------------*/
body {
  overflow-x:hidden; 
	scroll-behavior: smooth;
	position: relative; 
	background: var(--bg);	
	line-height: 1.5;	
	color: var(--font);		
	letter-spacing: normal;	
  letter-spacing: .135rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, 'Noto Sans', '微軟正黑體', sans-serif;
}
h1,h2,h5,h6 {
	line-height: 1.11;
}
h1 { font-size: calc(1.8rem + .5vw)  } 
h2 { font-size: calc(1.26rem + .25vw) } 
h3 { font-size: calc(1.17rem + .25vw) } 
h4 { font-size: calc(1.08rem + .218vw) } 
h5 { font-size: calc(.9rem + .1875vw)} 
 p { font-size: calc(.81rem + .1875vw) } 
h6 { font-size: calc(.72rem + .125vw) }  

h1,h2,h3 {
  font-family: var(--mingle);
}
h1 {
	font-weight: 900;  
}
h2 {
	font-weight: 800;  
}
h3 {
	font-weight: 700;	
}
h4,h5,h6,p {
	font-weight: 400;	
}
a,a:visited,a:hover  {
	text-decoration:none; 
	color:inherit;	
}
a:focus {
	outline: none; 
}

img { 
	display: block;
  max-width: 100%; 
}

/*----------------------------------*\
	# element ( form )                    
\*----------------------------------*/
input[type="text"],
input[type="search"],
input[type="password"],
input[type="date"],
input[type="email"],
input[type="tel"],
select,
textarea {   
  border: solid 0.05rem var(--border);
  background: var(--input);
  border-radius: 0;    
  outline: none; 
  width:100%;
  padding: 0 .54rem; 
  height: var(--btn-h); 
  line-height: var(--btn-h); 
  color: var(--font);
  font-size: var(--small);
}
textarea { 
  padding:.3rem .54rem; 
  height: auto; 
  line-height: 1.68;  
}
input::placeholder,
textarea::placeholder {
  color: var(--match);    
  opacity: .72; 
}
 button,.btn {
  outline: none; 
  display:block; 
  margin:auto;
  text-align:center;
  max-width: 100%;  
  background: var(--main);  
  color: var(--white);
	transition: background-color 0.54s;
  cursor: pointer; 
  border-radius: .21rem;
}
button:hover, 
.btn:hover {
  background: var(--main);   
} 

/*----------------------------------*\
	# scrollbar                     
\*----------------------------------*/
.scrollbar::-webkit-scrollbar {
  width: 0.009rem;
}
.scrollbar::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
.scrollbar::-webkit-scrollbar-thumb {  
  background-image: var(--scrollbar);
  border-radius: 2.4rem; 	
}
/*----------------------------------*\
	# tx limit                     
\*----------------------------------*/
.tx1 {
	white-space: nowrap;  
	overflow: hidden;
	text-overflow: ellipsis;
}
.tx2 {
	display: -webkit-box;
	-webkit-line-clamp: 2; 
	-webkit-box-orient: vertical;
	white-space: normal;
	height: var(--line-2h);	
	overflow: hidden;
}
.tx3 { 
	display: -webkit-box;
	-webkit-line-clamp: 3; 
	-webkit-box-orient: vertical;
	white-space: normal;
	height: var(--line-3h); 
	overflow: hidden;
}
.tx4 { 
	display: -webkit-box;
	-webkit-line-clamp: 4; 
	-webkit-box-orient: vertical;
	white-space: normal;
	height: var(--line-4h); 
	overflow: hidden;
}
.tx5 { 
	display: -webkit-box;
	-webkit-line-clamp: 5; 
	-webkit-box-orient: vertical;
	white-space: normal;
	height: var(--line-5h); 
	overflow: hidden;
}

/*----------------------------------*\
	# main                     
\*----------------------------------*/
main[data-scroll-container] {
  /* padding-top: var(--header-h); */
  width: 5120px; 
	max-width: 100%; 	
	margin: 0 auto ;	
	position: relative;
}