@import url("reset.css");
@import url("font-awesome.css");
@import url("animate.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';
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500&display=swap');

*{box-sizing:border-box}
html{ font-size: 62.5%; /* 將根元素的預設文字大小改為 10px。(10 / 16 * 100% = 62.5%) */}
html , body{width: 100%; height: 100%;}
body{font-size:2rem}
a{text-decoration:none;color:rgba(204,51,0,1.00)}

/* 最外框 */
#WARPPER{ display:flex;flex-direction: column;justify-content: flex-start;align-items: center;  width:100%;position: relative;padding-bottom: 10rem}
.autobox{width: 100%; max-width:1600px;margin: auto;}

/* 頁首 */
header{display:flex;height:20rem;position:fixed;top: 0;left: 0;right: 0; z-index: 1000;padding:0 5rem;}
.headerBg{width: 100%; height:10rem;background-color: rgba(255,255,255,1.00);box-shadow: 0 0 5px rgba(0,0,0,0.5);}
.headerBg img{width:10vw;}
header div{display:flex; flex: 0 0 auto; justify-content:space-between;align-items: center;}
header div img{width:25vw;max-width:30rem;min-width: 20rem}
header div p{padding:3rem;margin-left:10rem; font-size:2rem ;color: rgba(108,0,0,0.50);border-left: rgba(0,0,0,0.2) 1px solid;position: absolute;bottom: 1rem;line-height: 4rem}

/* 選單 */
#RWD_BTN,#RWD_CLOSE{ display: none; color:rgba(0,0,0,255); font-size:2.4em; padding:5px; }

#TOPNAV,#TOPNAV ul,#TOPNAV ol{ display: flex; }
#TOPNAV ul a{display:block; color:rgba(204,51,0,1.00);font:300 1.8rem "微軟正黑體", "新細明體", Arial;padding: 1rem 0;margin: 0 1rem}
#TOPNAV ul a:hover{border-bottom:rgba(204,51,0,1.00) 1px solid;margin-top:-1px }

#MASK{display: flex;background: linear-gradient( rgba(255, 255, 255, 1)20%, rgba(255, 255, 255, 0)60%);position: absolute;top: 0;width: 100%;height:40vw}
#BANNER{display: flex;width: 100%;height:40vw}





/* 內容 */
main{display: flex; width: 100%;flex-direction: column;padding:0 5rem;}

/*.conter1 div{text-align: right;padding-right: 5vw}*/
.conter1 div,.conter2 div{text-align: left;padding-left: 5vw}
.conter2 div li{padding-bottom: 2rem}

.conter3{text-align: center}
.conter3 div ul{display: flex;flex-wrap:wrap;justify-content: center}
.conter3 div li{display: flex;flex:1 1 15%; flex-direction: column;align-items: center; padding:2rem;margin: 1rem; border: rgba(110,0,1,0.5) 1px solid}
.conter3 div li img{display: block; width:auto;height: 10rem}
.conter3 div li p{text-align: center}

.conter3 div li span{font:300 2rem 'Noto Serif TC', serif;padding-bottom: 2rem}
.flexzone{display: flex;justify-content: center;align-items: center;margin: 10rem 0;}
.flexzone img{width:30vw;}
.flexzone p{font:300 1.6rem "微軟正黑體 Light", "新細明體-ExtB", Arial;line-height:2.8rem;}
.titleT{display: block;font:300 3rem 'Noto Serif TC', serif;padding-bottom:1.5rem; }

/*回上一頁*/
.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;}

/* 頁尾 */
footer{display: flex; width: 100%;font:300 1.4rem "微軟正黑體 Light", "新細明體-ExtB", Arial;line-height:3rem;justify-content:space-between;padding:5rem;}
footer ul,footer ul li,label{display: flex;flex-direction: column;}
.ContactUs {text-align: right}
.ContactUs label{padding:0.5rem 0}
.ContactUs input,.ContactUs textarea{padding:1rem ;border: rgba(0,0,0,0.5) 1px solid;color: rgba(0,0,0,0.5);width:20vw;min-width:100%}
.ContactUs textarea{height: 20rem}
.ContactUs button{padding:1rem ;border: rgba(0,0,0,0.5) 1px solid;color: rgba(255,255,255,1.00);background-color: rgba(131,0,2,1.00);width:10vw;}
.goTOP{ display:block; width:45px; height:45px;font-size:5rem; color: rgba(0,0,0,0.3); position:fixed; right:1rem; bottom:2rem; z-index:1002}



/*通用css*/

/*youtube*/
.video-container {position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden;}
.video-container iframe, .video-container object, .video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

/* 常用的UL css */
.list1 li{ list-style:outside  decimal; margin-left:30px; padding-bottom:5px;}
.list2 li{ list-style:outside  upper-roman; margin-left:30px;padding-bottom:5px;}
.list3 { display:block;  padding:20px; margin-bottom:10px;border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; background-color:#8dcdcc}
.list3 li{ list-style:outside  decimal; margin-left:30px; padding-bottom:5px;}
.listil4 li{  padding-bottom:10px; float: none; color:#666}


/*大中小*/
.fontSize_xl{ font-size: 2rem }
.fontSize_xxl{ font-size:3rem }
.fontSize_x{ font-size:1.5rem }
.fontSize_l{ font-size: 1.3rem }
.fontSize_m{ font-size: 1rem }
.fontSize_s{ font-size: 0.8rem }
.fontSize_ss{ font-size: 0.2rem }
.fontSizeW800{font-weight: 800}
.fontwarp{white-space:nowrap;}

/* 顏色 */
.colorRed{ color:rgba(180,41,11,1.00)}
.colorOrange{ color:rgba(255,126,0,1.00)}
.colorWhite{ color:#fff}
.colorGray{ color: rgba(0,0,0,0.5)}
.colorBlue{color: rgba(13,132,189,1.00)}
.colorBlack{color: rgba(0,0,0,1.00)}
.colorGreen{color: rgba(50, 205, 50,1.00)}
.BgcolorRed{ background-color:rgba(180,41,11,1.00)}
.BgcolorPink{ background-color:rgba(241,180,201,1.00)}
.BgcolorOrange{ background-color:rgba(255,126,0,1.00)}
.BgcolorYellow{ background-color:rgba(255,189,51,1.00)}
.BgcolorGreen{ background-color: rgba(18,176,6,1.00)}
.BgcolorBlue{ background-color: rgba(13,132,189,1.00)}
.BgcolorWhite{ background-color:rgba(255,255,255,1)}
.BgcolorWhite50{ background-color:rgba(255,255,255,0.5)}
.BgcolorGray{ background-color: rgba(0,0,0,0.05)}
.BgcolorGray50{ background-color: rgba(0,0,0,0.5)}
.BgcolorBlack{ background-color: rgba(0,0,0,1)}

/*隱藏*/
.showhide{display:block}
.hideshow{display: none}

/*模糊*/
.blur {    
    -webkit-filter: blur(10px); /* Chrome, Opera */
       -moz-filter: blur(10px);
        -ms-filter: blur(10px);    
            filter: blur(10px);    
}




@media (max-width: 1024px) {

}

@media (max-width: 800px) { 
	
}

@media (max-width: 600px) {
	/*隱藏*/
	.showhide{display:none}
	.hideshow{display:block }
	header{padding:0 2rem;}
	#BANNER,#MASK{height:80vh;max-width: 100%; min-height: 100%}

	.flexzone{flex-direction: column; margin:2rem 0;}
	.flexzone img{width:100%;padding-bottom:2rem}
	.flexzone p{padding-bottom: 2rem}
	.conter1 div,.conter2 div,.ContactUs {text-align: center;padding:0}
	.conter2 p{text-align: left}
	.conter2img{display: flex;justify-content: center;align-items: center; height:25rem;overflow: hidden;margin-bottom: 2rem}
	.conter3 div li{flex-basis:100%;}
	footer{flex-direction:column-reverse;}
	.ContactUs{padding-bottom: 5rem}
	.ContactUs button{width:100%}
	/*選單*/
	#RWD_BTN{display: block;color: rgba(0,0,0,0.5);font-size:3rem;right: 0}
	#RWD_CLOSE{color: rgba(255,255,255,0.50);font-size:3rem;z-index: 10003;}
	#TOPNAV{ display: none;width: 100%;height: 100%;top: 0;left: 0;position: fixed;background-color: rgba(0,0,0,0.8)}
	#TOPNAV ul {flex-direction: column;justify-content: center;align-items: center;width: 100%;height: 100%;}
	#TOPNAV ul li{text-align: center;padding: 2rem 0}
	#TOPNAV ul a{ color:rgba(255,255,255,0.9);font:300 3rem "微軟正黑體", "新細明體", Arial;padding: 1rem 0;margin: 0 1rem}
	
	
	.flexzone div{display: flex;flex-direction: column}
	.P1{order:2;-webkit-order: 2;}
	.P2{order:1;-webkit-order: 1;}
	.P3{order:3;-webkit-order: 3;}

}