@import url("reset.css");
@import url("animate.css");
@import url("icofont/icofont.min.css");
@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);

*{box-sizing:border-box}
html{ font-size: 62.5%; /* 將根元素的預設文字大小改為 10px。(10 / 16 * 100% = 62.5%) */}
html , body{width: 100%; height: 100%;}
body{font-size:1.8rem}
a{text-decoration: none;color:rgba(255,255,255,1);transition: .4s .2s;}
a:hover{color: rgba(255,255,255,0.4)}
img [title=""]{
  border-radius:50%;
}

/* 最外框 */
#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{display: flex;align-items: center;justify-content: center; width: 100%;height:60rem;flex: 0 0 auto;position: relative;background-color: rgba(20,152,0,1.00)}
header h1{display: flex;align-items: center;height: 100%; padding: 1rem 4rem;backdrop-filter:blur(5px);background-color: rgba(255,255,255,0.1)}
header h1 img{width: 30vw;padding-bottom: 2rem}
header h1 ul{display: flex;align-items: center;justify-content: space-between;flex-wrap:wrap}
header h1 ul li:last-child {justify-content: flex-end}
header h1 ul li:first-child{display: flex;justify-content: center}
header h1 ul li p{width: 100%;font:300 1.8rem "微軟正黑體 Light", "新細明體-ExtB", Arial ;color: rgba(255,255,255,1.00);line-height: 3rem;padding-bottom: 1rem;}

header h1 ul li p i{padding-right: 1rem}
.TOPBAR{display: flex;width: 100%; height:8rem;background-color: rgba(0,0,0,0.8);}

/* 選單 */
#RWD_BTN,#RWD_CLOSE{ display: none; color:#fff; font-size:5rem; position: fixed; top:1rem; right:1rem; z-index:1100}
#TOPNAV{ display: flex;position: fixed;width: 100%;padding:2rem 4rem;align-items: center;z-index: 1000 }
#TOPNAV ul{display: flex;justify-content: flex-end;position: relative}
#TOPNAV ul li{display: flex;align-items: center; padding:0 1.5rem ;font:800 1.8rem "微軟正黑體", "新細明體", Arial;}
#TOPNAV ul li a{display: flex;flex-direction: column;align-items: center;justify-content: center;}
.logout {border-left: rgba(255,255,255,0.2) 1px solid}
#TOPNAV ul li a::after{
  content:" ";
  width: 0%;
  height:5px;
  background-color: rgba(255,255,255,0.5);margin-top:1rem;
  transition: .4s .2s;border-radius: 2rem;
}
#TOPNAV li a:hover::after{
  width:100%;
}
.NAVBG{background-color: rgba(0,0,0,0.8);transition: .4s .2s;}
.toplogo{position: absolute;top:-1rem; left: 0;color: rgba(255,255,255,1.00);font-size: 1.5rem;font-weight: 300}
.toplogo img{display:none;width:auto;height:6rem;padding-right:2rem}

/* 內容 */
main{display: flex; flex: 1 1 auto; width: 100%;padding: 4rem 2rem;}
main h2{display: flex;align-items: flex-end; font-size:5rem;font-weight: 300;padding-bottom: 2rem}
main h2 i{padding-right: 2rem;color: rgba(0,0,0,0.2);padding-bottom:0.5rem}
main h2 i::after{content: "/";padding-left:2rem}
main h2 span{font-size: 1.5rem;padding:0 0 1rem 1rem;font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif"}

.Product{display: flex;flex-wrap: wrap}
.Product li{display: flex;align-items: center;justify-content: center;background-size: cover}
.Product li:first-child{margin-left: 0}
.Product li:last-child{margin-right: 0}
.Product li a{display: flex;align-items: center;flex-direction: column;justify-content: center; width: 100%;height: 100%; backdrop-filter:blur(4px);font-size:2.5rem;font-weight: 800;text-shadow: 0.1em 0.1em 0.2em rgba(0,0,0,0.9)}
.Product li a span{font-size:1.8rem;padding-top:2rem;font-weight:300 }
.ProductHeight1 li a:hover{backdrop-filter:blur(1px);text-shadow: 0.1em 0.1em 0.2em rgba(0,0,0,0.1);width: 90%;height: 90%}
.ProductHeight1 li{ flex: 0 1 calc(100% / 5 - 2rem); margin: 0 1rem;}
.ProductHeight1 a{padding: 10rem 0;}
.ProductHeight2{flex-direction: column;flex: 0 1 40%;padding-right:5rem;}
.ProductHeight2 li{margin-bottom: 1rem;height:8rem}
.ProductHeight2 a{padding:2rem 0;}
.ProductHeight2 a span{display: none}
.ProductHeight2 li a:hover{backdrop-filter:blur(1px);text-shadow: 0.1em 0.1em 0.2em rgba(0,0,0,0.1);width: 90%;height:60%}

.ProductList{width: 100%;border-left: rgba(0,0,0,0.2) 1px dotted;padding-left:5rem;}
.ProductList h2{display: flex; position: relative;border-bottom: rgba(0,0,0,0.1) 1px dotted;margin-bottom: 4rem}
.ProductList h2 span{position: absolute;right: 0}
.ProductList ul {display: flex;width: 100%; align-items: center;justify-content: flex-start; flex-wrap: wrap}
.ProductList ul li {}
.ProductList ul li div{border: rgba(0,0,0,0.2) 1px solid;padding:1.5rem;margin: 0.5rem}

.ProductList ul li p{display: flex; padding-bottom: 1rem}
.ProductList ul li p select{border: rgba(0,0,0,0.4) 1px solid;padding: 1rem;filter: 0 1 30%}
.ProductList ul li p button{border: rgba(0,0,0,0.4) 1px solid;padding: 1.1rem;width: 100%;color: rgba(255,255,255,1.00);background-color: rgba(98,0,1,1.00);cursor: pointer}
.ProductList ul li span i{padding-right:1rem;color: rgba(0,0,0,0.5);padding-bottom:0.5rem}
.ProductList ul li span i::after{content: "/";padding-left:1rem}
.ProductListBox30 ul li {flex: 0 1  calc(100%/3);width: calc(100%/3)}
.ProductListBox20 ul li {flex: 0 1 20%;;width: calc(100%/5);position: relative}
.ProductListBox20 input[type=checkbox]{ width:3rem; height:3rem;position: absolute;top: 2rem;left: 2rem}
.ProductListImg{display: flex;align-items: center;justify-content: center; width:100%;height:15rem;margin-bottom: 2rem;overflow: hidden}

.zone{width: 100%;padding-bottom:10rem;margin-bottom:10rem; border-bottom: rgba(0,0,0,0.2) 1px dotted}
.zone2{width: 100%;padding-bottom:2rem;margin-bottom:2rem; }
.aboutUs p{text-indent: 4rem;padding-bottom: 2rem;text-align:justify;font:300  1.8rem "微軟正黑體 Light", "新細明體-ExtB", Arial;line-height:3rem}
.member{display: flex;align-items: center; background: url("../images/member.png") right bottom no-repeat;background-size: cover;flex-wrap: wrap}
.member li{width:50rem;}
.member img{width:100%;padding-right: 5rem;}
.cartmun{position: relative}
.cartmun span{display: flex;align-items: center;justify-content: center;padding: 1rem; position: absolute;right: -2rem;top: -1.5rem;border-radius: 5rem;width: 1rem;height: 1rem;background-color: rgba(255,0,4,1.00);color: rgba(255,255,255,1.00);font-size: 1rem}
.cartmun span{display: flex;align-items: center;justify-content: center;padding: 1rem; position: absolute;right: -2rem;top: -1.5rem;border-radius: 5rem;width: 1rem;height: 1rem;background-color: rgba(255,0,4,1.00);color: rgba(255,255,255,1.00);font-size: 1rem}

/*計算總價*/
.total ul{display: flex;justify-content: space-between;font:800 3rem "微軟正黑體", "新細明體", Arial;color: rgba(0,83,1,1.00);padding:0 2rem 2rem 2rem;}
.total ul li{display: flex;}
.total ul li p{padding-right:3rem}


/*mailform*/

.mailform{display: flex; flex-direction: column;width: 100%;align-items: flex-end;  padding: 4rem;}
.mailform label{display: flex;width: 100%; align-items: flex-start; padding: 0 0 1rem 0;font-size:2rem;font-weight:300;position: relative}
.mailform label i{padding-right: 1rem;color: rgba(0,0,0,0.3)}
.mailform label input,.mailform label textarea,.mailform label select{margin-left: 1rem;padding:1rem 2rem;border: rgba(0,0,0,0.1) 1px solid;width:50rem;color: rgba(0,0,0,0.8);font-size:2rem;font-family: "微軟正黑體 Light", "新細明體-ExtB", Arial}
.mailform label textarea{height:20rem}
#validText{width:50%;margin-right: 1rem}
#reBtn{font-size: 3rem;padding:1rem ;color: rgba(255,255,255,1.00);}
#verify_code{ color: rgba(255,255,255,1.00);padding: 1rem;position: absolute;left:1rem;top: 5rem;border-radius: 0 0 1rem 1rem}
#verify_code{color: rgba(255,255,255,1.00)}

.BTN{background-color: rgba(0,62,57,0.8); border: rgba(0,0,0,0.1) 1px solid;padding:2rem;color: rgba(255,255,255,1.00);font-size:2rem;cursor: pointer;}
.forgetBTN{background-color:transparent;border: none;color: rgba(255,255,255,1.00);font-size:2rem;cursor: pointer;padding-right: 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;}

/* 頁尾 */
hr{display: flex;width: 100%; border:none;border-bottom: rgba(0,0,0,0.2) 1px solid}
footer{display: flex;align-items: center;justify-content: space-between; flex-wrap: wrap;padding: 4rem 4rem 10rem 4rem}
footer ul{flex: 0 1 50%;font: 300 1.6rem "微軟正黑體 Light", "新細明體-ExtB", Arial;line-height: 4rem}
footer ul:last-child{display: flex;justify-content: flex-end}
footer ul img{width: 15rem}
footer ul a{color: rgba(0,0,0,0.5)}
footer ul a:hover{color: rgba(4,55,0,1.00)}
.goTOP{ display: block; width:45px; height:45px;font-size:5rem; color: rgba(0,0,0,0.5); position:fixed; right:1rem; bottom:2rem; opacity: 0.5; 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: 1200px) {
	.ProductHeight1 a{padding: 5rem 2rem;}
	.ProductListBox20 ul li {flex: 0 1 calc(100%/3);;width: calc(100%/3)}
}

@media (max-width: 800px) { 
	header h1 img{width:30rem}
	header h1 ul li p{font-size: 1.4rem; line-height: 2rem}
	.ProductHeight1 a{padding:2rem;}
	.ProductListBox20 ul li {flex: 0 1 calc(100%/2);;width: calc(100%/2)}
	.member{flex-direction: column}
	.member li{width:100%;}
}

@media (max-width: 600px) { 
	.showhide{display:block}
	.hideshow{display: none}
	#RWD_BTN{ display: block;color: rgba(255,255,255,0.8);z-index:3000}
	#RWD_CLOSE{color: rgba(255,255,255,1.00);z-index: 4000;}
	
	header{margin-bottom: 4rem}
	header h1{ padding:1vh 2vh;}
	header h1 img{width:40vh;padding-bottom:2vh;padding-top:5vh}

	header h1 ul li {flex: 0 1 100%;}

	#TOPNAV ul {display:flex;flex-direction: column;justify-content: center;}
	#TOPNAV ul li{display: none;padding: 2vw 0;font-size:3rem}
	.cartmun{width:5rem;margin: auto;font-size: 5rem}
	.logout {border-left:none;border-bottom:rgba(255,255,255,0.2) 1px solid}
	.NAVBG{min-height:8rem}
	.NAVBG100{height:100%;background-color: rgba(0,0,0,0.8);}
	main{flex-direction: column;padding-bottom: 0}
	main h2{flex-wrap: wrap; font-size:3rem;}
	.ProductHeight1 li{ flex: 0 1 100%; margin: 1rem 0;}
	.ProductHeight2{flex: 0 1 100%;padding-right:0;margin-bottom: 2rem}
	.ProductList{width: 100%;border-left: none;padding-left:0;}
	.ProductList h2{margin-bottom: 2rem;flex-wrap: wrap}
	.ProductList h2 span{display: none}
	.ProductList ul li p{display: flex; padding-bottom: 1rem;flex-wrap: wrap}
	.ProductList ul li p select,.ProductList ul li p button{width: 100%;padding: 1rem}
	.ProductList ul li span i{padding-right:0.5rem;}
	.ProductList ul li span i::after{padding-left:0.5rem}
	.ProductListBox30 ul li ,.ProductListBox20 ul li {flex: 0 1  calc(100%);width: calc(100%)}
	
	.total ul,.total ul li{flex-direction: column;font-size: 2rem}
	.total p{padding-bottom: 2rem;text-align: center}
	.BTN{width: 100%;}
	
	
	.toplogo{top:-2.5rem; left:-2rem;}
	.toplogo img{height:5rem;padding-right:0}
	.zone{padding-bottom:2rem;margin-bottom:2rem; }

	.mailform{width: auto; padding:2vh;}
	.mailform label input,.mailform label textarea{margin:0;width:100%;}
	
	footer{flex-direction:column-reverse;padding:0 2rem 4rem 2rem}
	footer ul img{width:20vh}
	
}