@import url("reset.css");
@import url("font-awesome.css");
@import url("styleShare.css");
@import url("animate.css");
@import url("tableCss.css");

/* font-awesome.css CSS */
@font-face {
    font-family: 'LigatureSymbols';
    src: url('LigatureSymbols-2.11.eot');
    src: url('LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'),
         url('LigatureSymbols-2.11.woff') format('woff'),
         url('LigatureSymbols-2.11.ttf') format('truetype'),
         url('LigatureSymbols-2.11.svg#LigatureSymbols') format('svg');
    src: url('LigatureSymbols-2.11.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.lsf, .lsf-icon:before {
  font-family: 'LigatureSymbols';
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

.lsf-icon:before {
  content:attr(title);
  margin-right:0.3em;
  font-size:130%;
}

.lsf-icon.amazon:before {
  content: '\E007';
}

*{box-sizing:border-box;transition-duration:0.3s;}
html{ font-size: 62.5%; /* 將根元素的預設文字大小改為 10px。(10 / 16 * 100% = 62.5%) */}
html , body{width: 100%; height: 100%; font-family:Arial, "微軟正黑體 Light", "新細明體-ExtB";min-height:768px; }
body{font-size:2rem;background: rgba(22,22,55,1.00) url("../images/BG.jpg")  center no-repeat;background-size:cover;background-attachment: fixed}
.bg2{padding:0 2rem;max-width: 1440px;margin: auto;z-index: 480;position: relative}


#LOADING{display: flex;width: 100%;height: 100%;flex-direction: column; position: fixed;align-items: center;justify-content: center; background-color: rgba(0,0,0,1.00);z-index: 3000;color: rgba(255,255,255,0.2);font-size: 0.8rem }
#LOADING li:first-child{font-size: 1.8rem;font-weight: 800;padding-bottom: 1rem}

/* 最外框 */
#WARPPER{ display:flex;width: 100%; flex-direction: column;align-items: center; justify-content:space-between;background-image: url("../images/planet2.png");background-attachment: fixed;background-size: 120%;background-position: center -10vw}


/* 頁首 */
#HEADER {  display: block;   width: 100%;   background-color: rgba(0,0,0,0.5);   position:fixed; top: 0;left: 0;  height:3rem;z-index:1001}
.topTitle1 {display: block;color: #fff; font:800 1.8rem  "微軟正黑體", "新細明體"; line-height:3rem;padding: 0 0 0 1rem}
.topTitle1 span {font-size: 1rem}
.topTitle3 {display: flex; position: absolute;  top: 0;  right:1rem;}
.topTitle3 li{padding-right:2rem}
.topTitle3 a{ color: #fff; font:1.5rem Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace, "微軟正黑體", "新細明體"; line-height:3rem;}

#HEADERBAR{display: block;width: 100%;height: 100%;min-height:900px;margin-bottom: 5rem;z-index: 1000;}

.H1{display:flex;align-items: center; width:50vw;height: auto;margin:3rem auto }
.H1 img{width:100%;}
.H1width{width:100%;background-color: rgba(255,255,255,1.00); position: fixed;left: 0; top:0; z-index:500;box-shadow: 2px 0 5px rgba(0, 0, 0, 0.4);}
.H1width img{width:auto;height:8rem; margin:0 0 0 1rem;}

.H2{display:none}

#FFF{display: block;width:80%;height:auto;top:40%;left:auto;right: auto; z-index:10;}
#CAR{display: block;width:100%; height:auto;top: auto; bottom:auto;right:0;z-index: 9;position: fixed}
#HAND{display: block;width:100%;height:auto;top:-10vw;left:auto;right: auto;z-index:8;position: fixed}


.wordbox{display: block; margin:auto;width: 90%; padding-bottom: 10rem; z-index:49;}
.wordbox table{font-size: 1.6rem;color: rgba(255,255,255,1.00);border: rgba(255,255,255,0.5) 5px solid;background-color: rgba(24,31,41,0.8)}
.wordbox table a{display:flex;width: 100%;height: 100%; color: rgba(255,255,255,1.00)}
.wordbox table tr:nth-child(odd){background-color: rgba(255,255,255,0.2)}
.wordbox table tr:hover{background-color: rgba(14,6,63,0.40)}
.engsize{ font-size: 1.3rem}
.engsize p{padding-bottom:1rem}

/*選單開關*/
.menuBtn{display: block; width:15vw;background: url("../images/menu.png") center top no-repeat}
.menuBtn > a{display:flex;flex-direction: column;align-items: center; padding:3rem 2rem ;font: 300 3.5rem Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";color: rgba(255,255,255,1);}

.menuBtn2{position: fixed;top:5%;right: 1rem; z-index:481;}
#RWD_BTN > a{display:flex;flex-direction: column;align-items: center; padding:0.5rem 2rem ;font: 800 3.5rem Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";color: rgba(0,0,0,0.8);}
#RWD_BTN > a > img{width:50px;}
#RWD_CLOSE{ display: none; color: rgba(0,0,0,0.8); font-size:4rem; padding:5px; position: fixed;top:5%; right:10px; z-index:1100; }

.MAIN_NAV {display: flex;align-items: center; justify-content: center; width: 100%;position: relative;z-index: 1000;}
.MAIN_NAV ul{display: flex; box-sizing: border-box; justify-content:flex-start;flex-wrap: wrap;background-color: rgba(0,0,0,0.20);width:90%; max-width:1400px;;z-index: 11;border: rgba(255,255,255,0.5) 1px solid}


.MAIN_NAV_POS{position: fixed;width: 100%;height: 100%; top:0;left: 0;background-color:rgba(0,0,0,0.8);z-index: 1000}
.MAIN_NAV_POS ul{top: auto}

.MAIN_NAV ul > li{flex-grow: 1;flex-shrink: 0;flex-basis:calc( 20% - 2rem);text-align: center;border: rgba(255,255,255,0.5)  1px solid}
.MAIN_NAV ul > li > a{display: block; color: rgba(255,255,255,1.00);text-shadow:1px 2px 5px rgba(0,0,0,0.8); padding:4rem 1rem; }
.MAIN_NAV ul > li > a > p > span{display: block;font-size: 1rem;word-wrap:break-word;}
.MAIN_NAV ul > li > a > p > img{display: block;margin: auto; margin-bottom: 1rem; width:30%;}
.MAIN_NAV ul > li:hover a{transform: scale(1.2)}



#BGANI{display:flex;justify-content: center;align-items: center; width: 100%; height: 100%;position: absolute; top: 0;left: 0;overflow: hidden;z-index:9 }

/* 內容 */
#CONTENT{}

.tdeng td{font-size:1.3rem}
.tdeng td:first-child{font-size:1.8rem}
.tdeng td:nth-child(5) p{padding-bottom:0.8rem;}

/*回上一頁*/
.goBACK{ display:block;  width:45px; height:45px;  border-left:#ccc 1px solid; padding-left:20px;}

/* 面包屑 */
#POS{ display:block;  font:0.8rem  Arial , "新細明體";line-height:40px;}

/* 頁尾 */
#footerBar{display: flex;flex-direction: column;width: 100%;align-items: center;z-index: 50}
footer{display: flex;flex-direction: column; width: 100%;height:13rem;justify-content: center;text-align: center; font-size: 1.5rem;color: rgba(0,0,0,0.8);}

.footerHeigh{height:8rem;position: fixed;left: 0; bottom: 0;z-index:50;}



/*分享*/
ul.share-buttons{
	display: flex; margin-top: 2rem
}

ul.share-buttons li{
	line-height: 32px; padding: 0 5px;}

ul.share-buttons .sr-only{
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.title {display: flex;align-items: center; font:800 3rem "微軟正黑體", "新細明體";  padding-bottom: 0.5em;color: rgba(255,255,255,1.00);padding-top: 2rem;text-shadow: 0 1px 3px rgba(0,0,0,1.00)}
.title img{width: 5rem;padding-right: 2rem}
.title span { font:1.5rem Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;padding-left: 1rem}
.no1 {  border-radius: 10px;width: 12rem}
.no2 {  border-radius: 50%; width:4rem;height:4rem;position: absolute;right: -2rem;top:-1rem;border: rgba(255,255,255,1.00) 2px solid;cursor: pointer}
.goTOP{ display:block; width:45px; height:45px;font-size:5rem; color: rgba(0,0,0,0.8); position:fixed; right:3rem; bottom:2rem; opacity: 0.5; z-index:1002}
table{width: 100%;box-sizing: border-box;font-family: "微軟正黑體", "新細明體", Arial}
table tr:hover{background-color: rgba(0,0,0,0.05)}
table td:last-child{position: relative}

.Awards{display: flex;align-items: center;justify-content: center; width: 100%;border-radius:5px;border: rgba(76,89,124,1.00) 1px solid;padding: 1rem;background:rgba(255,255,255,1.00) url("../images/BG.jpg") center no-repeat;background-size:cover;font-size: 1.8rem;font-weight: 800;margin: 0.5rem 0;text-shadow: 0 1px 3px rgba(0,0,0,1.00)}

.fontSize_E td:nth-child(3){font-size: 1.3rem}
.fontSize_E td:nth-child(4){font-size: 1.3rem}
.fontSize_E td:nth-child(5){font-size: 1.3rem}


@media (max-width: 1366px) and (max-height:1024px) {
	#H1{}
	

}






@media (max-width:1366px) and (max-height:768px)   {
	#H1{}
	
	
	
}




@media (max-width: 1024px) and (max-height:768px)   {
	#H1{}
	
	
	
	
}






@media (max-width: 500px)  {
	
	.H1{display: none}
	.H2{display:block;width:90%; margin:4.5rem auto 0 auto;mz-index: 50;position: static;}
	
	#HEADER { height:5rem;background-color: #19609c}
	.topTitle1 { line-height:5rem;text-align: center}
	.topTitle1 span{display: none}
	.topTitle3{display: none}
	
	.MAIN_NAV ul{ width:90%; position:static;}
	.MAIN_NAV ul > li{flex-basis:calc( 33%);}
	.MAIN_NAV ul > li > a{padding: 1rem}
	.MAIN_NAV ul > li > a > p{font-size: 1.6rem}
	.MAIN_NAV ul > li > a > p > img{ width:40%;}
	.MAIN_NAV ul > li > a > p > span{display:none}
	
	
	
	#H3{display: block; width:90%;margin: auto;padding-top:12rem}
	#FFF1,	#CAR1,	#HAND1{display: none}
	.menuBtn{ padding:1rem}
	.menuBtn2{top:0.6rem;z-index:1000;right: 0;}
	#RWD_BTN > a{ font-size:2.4rem;color: rgba(255,255,255,1.00)}
	
	#FFF{width:70%;height:auto;position: fixed;bottom:10rem;left: 0;z-index:10;}
	#CAR{top:5rem}
	#HAND{width:30rem;top:inherit;bottom:5rem;right: -1rem; z-index: 10}
	footer{font-size: 1.2rem;padding: 0 2rem;}
	.footerHeigh{height:10rem;position: static}
	.wordbox{ margin:0 1rem 0 1rem;padding-bottom: 1rem}
	
	nav{font: 800 1.5rem "微軟正黑體", "新細明體", Arial}
	nav > ul > li{flex-basis:calc( 30% - 1rem);}
	nav > ul > li > a > p > img{display: block;margin: auto; margin-bottom:0.5rem; width:50%;}
	#RWD_CLOSE{  font-size:2.4rem;}
	
	.Awards{background-position: center right}
	#WARPPER{ background-size:cover;background-position: right 0}
}