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

*{box-sizing:border-box}
html{ font-size: 62.5%; /* 將根元素的預設文字大小改為 10px。(10 / 16 * 100% = 62.5%) */}
html , body{width: 100%; height: 100%;font-family: "微軟正黑體 Light", "新細明體-ExtB", Arial}
body{font-size:2rem}


/* 最外框 */
#WARPPER{ display:flex;flex-direction: column; justify-content: space-between; width:100%;min-height: 100%;}
.autobox{width: 100%; max-width:1440px;margin: auto; position: relative;}

/* 頁首 */
header{width: 100%;font-size:2.5rem;flex: 0 0 auto;padding: 1vw 2vw;}
header ul{display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap}
header ul li> a > img{width: 100%;margin: auto;}
header ul li:first-child{width:30%;max-width: 300px;}
header ul li:nth-child(2){display: flex;align-items:stretch; font-size: 1.5rem;font-weight: 800;line-height: 3rem;border-left: rgba(0,0,0,0.2) 1px solid;border-right: rgba(0,0,0,0.2) 1px solid;padding: 0 2rem}
header ul li:nth-child(2) a{padding: 0 0 0 2rem;margin-left: 2rem; border-left: rgba(0,0,0,0.2) 1px solid;text-align: center}
header ul li:nth-child(2) a>i{font-size: 2rem}
header ul li:last-child{font-weight: 800; text-align: right;color: #5db430;}
header ul li:last-child>p{font-size:1.5rem }


/*搜尋*/
#SEARCHBAR{display: flex;width: 100%; align-items: center;border-top: rgba(0,0,0,0.2) 3px solid;padding: 2rem 0}
#SEARCHBAR li:first-child{display: flex;flex: 1 1 auto;width: 100%;padding-bottom:0 }
#SEARCHBAR li>input{width: 100%;}
#SEARCHBAR li:last-child{display: flex;align-items: center; font-size:3rem;padding:0 1rem }

/* 內容 */
#content{display: flex;flex: 1 1 auto;align-content:flex-start;}

#RWD_BTN,#RWD_CLOSE{ display: none; color:#de5f0e; font-size:4rem; padding:5px; position: fixed; top:10px; right:10px; z-index:3000}
nav{padding: 2rem;min-width:30rem; flex:0 1 30rem;border-right: rgba(0,0,0,0.1)  3px solid}
nav ul > li{padding-bottom: 2rem;font-weight: 800;}
nav ul > li > a{color: rgba(41,124,1,1.00);}
nav ul > li > a i{padding-right: 1rem}



main{display: flex; flex: 1 1 100%; padding: 0 2vw;width: 100%; min-height:100%;}
.minZone{display: flex;width: 100%;padding:2rem 5rem;border-top: rgba(0,0,0,0.2) 1px solid;border-bottom: rgba(0,0,0,0.2) 1px solid}
.minZone ul{display: flex;flex-direction: column; flex: 1 1 auto;justify-content: center; }
.minZone ul:first-child{flex-direction:row; flex: 1 1 auto;padding: 0 }
.minZone ul:first-child li{padding-right: 5rem }
.minZone ul li{display: flex;align-items: center; padding-bottom: 1rem;align-items: center}
.minZone ul li > select{margin-right: 2rem}

.minZonex3{display: flex;width: 100%;padding:2rem 1rem;flex-wrap: wrap}
.minZonex3 ul{border: rgba(0,0,0,0.2) 1px solid;padding:0.5rem 2rem;margin: 0 1rem 1rem 1rem;flex: 1 1 30%;box-shadow: 2px 2px 2px rgba(0,0,0,0.1);}
.minZonex3 ul li{display: flex;align-items: center}
.minZonex3 ul li>span{width:15rem; padding-right: 1rem}
.minZonex3 ul li:first-child{font-size: 2.5rem;font-weight: 800;padding-bottom:1rem;margin-bottom: 1rem; color: rgba(41,124,1,1.00);border-bottom: rgba(0,0,0,0.2) 1px dotted}
.minZonex3 ul li:first-child i{padding-right: 1.5rem}
.minZonex3 ul li:last-child{display: flex;flex-wrap: nowrap}
.minZonex3 ul:hover{background-color: rgba(0,0,0,0.1)}

.minZoneIcon{display: flex;width: 100%;padding:0 1rem;flex-wrap: wrap}
.minZoneIcon li {margin:0.5rem;flex: 1 1 auto;}
.minZoneIcon li a{display: flex;align-items: center;font-weight: 800; justify-content: center; border: rgba(0,0,0,0.2) 1px solid;padding:0.5rem 1rem;border-radius:10px;white-space:nowrap;}
.minZoneIcon li i{padding-right: 1rem ;}
.minZoneIcon li a:hover{background-color: rgba(0,0,0,0.1)}

.minZonetable{display: flex; width:100%;height: 100%;min-height: 30rem;margin-top: 2rem; overflow:auto;position: relative;}
.minZoneT{display: flex;flex-wrap:wrap }


/*登入介面*/
#LOGIN{display:flex;width: 100%; align-items: center;margin-bottom: 3vw;flex-wrap: wrap}
.LBOX,.RBOX{display: flex;flex-direction: column;align-items: center; height: 100%; flex: 1 1 auto;flex-basis: 50%;padding:5vw}
.LBOX{width: 20%;color: #5db430}
.LBOX li:first-child{font-size:6vw;font-weight: 800;padding-bottom:0.5rem;text-align: center;}
.LBOX li:last-child{font-size: 1.5rem;color: rgba(0,0,0,0.8);text-align: center}

.RBOX{width:80%;border-left: rgba(0,0,0,0.2) 1px solid;}
.RBOX li{display: flex;flex-direction: column;align-items: center; padding-bottom: 1.5rem;width: 100%;}
.RBOX li>img{width:30%}
.RBOX li>input{border: rgba(0,0,0,0.3) 1px solid;width:80%;padding: 1rem;}
.RBOX li>a{background-color: #5db430;text-align: center; color: rgba(255,255,255,1.00);padding: 1rem;width: 80%; font-size: 0.8rem;line-height:3rem}
.RBOX li i{font-size:5vw;color: #5db430}

/*標題匡*/
.titleZone{display: flex;justify-content: space-between;align-items: center;line-height:6rem}
.setpoint{font-size: 1.5rem;font-weight:800;color: rgba(255,0,4,1.00)}



/*標題*/
.title01{display: flex;align-items: center; font-size:3.5rem;font-weight: 800;margin-bottom:0.5rem;color: rgba(0,0,0,0.8)}
.title01 > i{padding:1rem 2rem 0 0;color: rgba(0,0,0,0.4)}
.title01 >select{line-height:2rem;padding:0.5rem 2rem;margin-left:2rem}

.title02{color: rgba(134,0,2,1.00);font-weight: 800;margin-bottom: 2rem}
.title02 > i{padding-right: 1rem}

.title03{color: rgba(255,255,255,1.00);background-color: rgba(240,149,0,1.00); font-weight: 800;margin-bottom: 2rem;padding: 1rem 2rem;border-radius:10px;}
.title03 > i{padding-right: 1rem}

.title04{color: rgba(134,0,2,1.00);font-weight: 800;margin-bottom:1rem;font-size: 1.5rem}
.title04 > i{padding-right: 1rem}

/*回上一頁*/
.goBACK{ display:block;  width:45px; height:45px;  border-left:#ccc 1px solid; padding-left:20px;}
.goTOP{ display: block; width:45px; height:45px;font-size:5rem; color: rgba(0,0,0,1.00); position:fixed; right:1rem; bottom:5rem; opacity: 0.5; z-index:1002}

/* 面包屑 */
#POS{ display:block;  font:0.8rem  Arial , "新細明體";line-height:2rem;border-bottom:rgba(0,0,0,0.1) 1px solid;padding: 1rem 0;margin-bottom: 1rem}

/*表格*//*輸入匡*/
.tablebox{font-size: 1.5rem;}
.tablebox th{border: rgba(0,0,0,0.3) 1px solid;padding:0.5rem 1rem;background-color: rgba(9,4,74,0.40);color: rgba(255,255,255,1.00);cursor:pointer}
.tablebox th i{padding-left: 1rem}
.tablebox th:first-child{width: 10%;}
.tablebox tr:hover{background-color: rgba(0,0,0,0.2)}
.tablebox td{border: rgba(0,0,0,0.1) 1px solid;padding:0.5rem 1rem;font-weight: 800}
.tablebox li>span{border: rgba(0,0,0,0.3) 1px solid;font-size: 1.8rem;line-height:3rem;padding: 1rem 3rem;margin-right:2rem}
.tablebox td img{width:80px;margin: auto}

.addData{width: 100%;}
.addData li{display: flex;align-items: center;justify-content: center;margin-bottom: 2rem}
.addData li>span{width:20%}
.addData li>span b{margin-left: 2rem}
.addData li>input{width: 80%;}

/*簽名區*/
#siginBox{display:none;align-items: flex-end;justify-content: flex-end; position: fixed;top: 0;left: 0;width: 100%;height: 100%	;background-color: rgba(255,255,255,1.00);z-index: 1000}

input,select{border: rgba(0,0,0,0.3) 1px solid;font-size: 1.8rem;line-height:3rem;padding: 1rem 2rem}
.tcolor{width:10rem;text-align: center;margin: 0 1rem;font-size: 8rem;font-weight: 800;color: rgba(255,0,2,1.00)}
.addUser{display: flex;align-items: center;padding:1rem 2rem;background-color: rgba(3,77,0,1.00);color: rgba(255,255,255,1.00);border-radius:10px;}
.addUser i,.signUser i,.okUser i{padding-right: 1rem}
.signUser{display: flex;align-items: center;padding:3rem 2rem;background-color: rgba(127,3,3,1.00);color: rgba(255,255,255,1.00);border-radius:10px;}
.okUser{display: flex;align-items: center;padding:3rem 2rem;background-color: rgba(76,82,200,1.00);color: rgba(255,255,255,1.00);border-radius:10px;}
.signSave{display: flex;align-items: center;padding:3rem 2rem;background-color: rgba(43,104,40,1.00);color: rgba(255,255,255,1.00);border-radius:10px;position: absolute;bottom:5rem;right: 5rem}
.nocolor{background-color: rgba(0,0,0,0.5);color: rgba(255,255,255,1.00)}
.tagcolor{background-color: rgba(33,8,104,0.50);color: rgba(255,255,255,1.00)} 
.okcolor{background-color: rgba(32,69,9,0.30);color: rgba(255,255,255,1.00)} 

.deldata{color: rgba(255,255,255,1.00);background-color: rgba(248,0,0,1.00); font-weight: 800;margin-bottom: 2rem;padding: 1rem 2rem;border-radius:10px;}
.deldata > i{padding-right: 1rem}

/* 頁尾 */
footer{ font-size: 1.2rem;flex: 0 0 auto;padding: 1rem 2rem  ;background-color: rgba(9,4,74,0.40);color: rgba(255,255,255,1.00)}
footer ul{display: flex;flex-wrap: wrap}
footer li{padding-right:1rem}




@media (max-width: 1024px) {
	html{ font-size: 50%; }}

@media (max-width: 800px) {
	html{ font-size: 40%; }
header{font-size:5rem;padding: 2rem;}
	header ul li:first-child{width:60%;}
	header ul li:last-child{text-align:left}
nav{padding: 1rem;min-width:20rem; flex:0 1 20rem;}

}

@media (max-width:500px) { 
	html{ font-size:45%; }
	header{padding-bottom: 0}
	header ul li{margin-bottom:2rem}
	.LBOX,.RBOX{width: 100%;flex-basis:100%;border: none}
	.RBOX li i{font-size:5rem}
	.titleZone{flex-wrap: wrap;margin-bottom: 1rem}
	.addData li{flex-direction: column}
	.addData li>span,.addData li>input{width:100%;margin-bottom: 1rem}
	footer{font-size: 1.5rem;padding: 2rem;}
	.minZone{display: block;padding: 1rem 2rem;}
	.minZone ul{display: block;flex-wrap: wrap;}
	#content{flex-direction: column}
	nav{display: none;position:fixed;flex-direction: column; font-size:4rem;width: 100%;height: 100%; left:0;top:0; background-color: rgba(255,255,255,0.9);padding: 4rem;z-index: 2000;align-items: center;justify-content: center;}
	#RWD_BTN{ display: block; }
	#POS{ display:none}
	.minZoneIcon li {margin:0.5rem;flex: 1 1 10%;}
	.minZoneIcon li a{padding:1rem 1.5rem;font-size: 1.8rem}
}