@charset "utf-8";
body,html { margin:0; padding:0; height:100%; font-size: 100%; }


@media screen and (max-width: 1366px) {
body,html {  font-size: 95%; }
}
@media screen and (max-width: 980px) {
}
@media screen and (max-width: 720px) {
}

/*內容區*/
.main{ box-sizing: border-box; min-height:calc(80% ); padding-bottom: 3%;}
.main.ismap{ padding-bottom: 0%;}

@media screen and (max-width: 720px) {
.main{ min-height:calc(70% ); padding-bottom: 12%;}
.main.ismap{ padding-bottom: 0%;}
}

a { text-decoration:none;}
* { font-family:"Microsoft JhengHei","Minion Pro","PMingLiU", SimSun, STSong, sans-serif; margin:0; padding:0;}
img {border:0;}
input,textarea { font-size:100%;}

.WF{width: 100%; max-width: 1366px; margin: auto;}

.layer {position: relative; width: 100%; height: 100%; left:0; -webkit-transition: left 300ms; transition: left 300ms;}
.layer.open{left: -200px;}

.indextop { text-align: center; padding-top: 4%;}
.indextop.s{ padding-top: 1%; padding-bottom: 1%;}
.indextop img{width: 18%; min-width: 180px;}
.indextop.s img{width: 10%; min-width: 140px;}
.logoMS{display: none;}
.indextoppic {display: flex; margin-top: 4%;  height: 15vw;}
.indextoppic div{flex: auto; margin-right: 1px;  background-repeat: no-repeat; background-size: cover; background-position: center;}
.indextoppic div:last-child{ margin-right: auto;}
.indextoppic div.arrD{display: none; font-size: 150%; color: #777777; font-weight: 200; width: 100%;text-align: center; margin-top: -30px; position: absolute;-webkit-animation: bounceL 3s infinite ease-in-out;
animation: bounceL 3s infinite ease-in-out;}

@media screen and (max-width: 720px) {
.indextoppic div.arrD{display:inline}
.logoS{display: none;}
.logoMS{display:inline;}
.indextop {padding-top: 30%;}
.indextop img{width: 60%;}
.indextop.s{ padding-top: 2%; padding-bottom: 2%;}
.indextop.s img{min-width: 120px;}
.indextoppic {margin-top: 30%; height: 25vw;}
}


/*小圖標按鈕*/
.topodermenu{position: absolute; right: 3%; top: 1%;  text-align: right;width: 100%;}
.topodermenu a{ color: #afafaf; font-size: 180%; margin-left: 5px;}

/*選項*/
.menu { position: relative; z-index: 2; background-color: rgba(110,77,58,1); margin-top: 1px;-webkit-transition: background-color 300ms; transition: background-color 300ms;}
.menu .Mbnt{display: flex; justify-content: center; height: 5vw; max-height: 70px; min-height: 50px; font-weight: 900; color: #ffffff; padding: 0; padding-left: 0; padding-right: 0;}
.menu a{ display: flex;flex: 0 auto; justify-content: center; margin-left: 4%; align-items: center; color: #ffffff; font-size: 130%; padding-top: 6px; border-bottom: 6px rgba(192,157,91,0) solid ;-webkit-transition: border-bottom 100ms; transition: border-bottom 100ms;}
.menu a:first-child{ margin-left: 0%;}
.menu a.hover ,.menu a:hover{ border-bottom: 6px rgba(192,157,91,1) solid;}
.menu a.logoW{display: none; }

.menu .Mmenubnt{display: none;}
.menu .Mbnt .close{ display: none;}
.menuH{height: 0px;}
.menu.top{position: fixed; width: 100%; top: 0; z-index: 2; margin-top: auto; background-color: rgba(110,77,58,0.80); }
.menuH.top{height: 60px;}

@media screen and (max-width: 980px) {
.menu a{ font-size: 110%;}
}
@media screen and (max-width: 720px) {
.menu .Mbnt{ display: none; position: fixed;top:0; left: 0;flex-direction:column; padding: 0 3%; font-weight: 900; height: 100%; box-sizing: border-box; max-height: none; z-index: 2; width: 100%; background-color: rgba(110,77,58,0.80);}
.menu .Mbnt.open{display: flex;}
.menu a.logoW{ display: block; position: absolute; border:0; padding: 0; opacity: 0; width: 50%; left: 3%;-webkit-transition: opacity 300ms; transition: opacity 300ms;}
.menu a.logoW:hover{ border:0;}
.menu a.logoW.top{ opacity: 1;}
.menu .Mbnt a{ margin-left: 0%;border-bottom: 1px #c09d5b solid; line-height: 300%; font-weight: 600; font-size: 120%; }
.menu .Mbnt a:last-child{ border-bottom: 0;}
.menu{ height: 60px; display: flex; justify-content: center; align-items:center; }
.menu .Mmenubnt{display:inline-table;padding-top: 0; border-bottom: none; position: absolute; right: 15px; font-size: 250%;}
.menu .Mmenubnt:hover{ border-bottom: none;}
.menu .Mbnt .close{ position: absolute; top: 3%; right: 3%; font-size: 320%; color: #c09d5b; display:block;}

}

/*購物車圖示*/
.menu .login{ position: absolute; display: flex; align-items: center; justify-content: center; border: 2px #dddddd solid; width: 50px; height: 50px;border-radius: 50%;  right: 80px; color: #dddddd; font-size: 170%; top: 50%; transform: translateY(-50%); line-height:100%; box-sizing: border-box; padding: 0;}
.menu a.login:hover{ border-bottom: 2px #c09d5b solid;}
.menu .shoppingcar{ position: absolute; display: flex; align-items: center; justify-content: center; border: 2px #dddddd solid; width: 50px; height: 50px;border-radius: 50%;  right:20px; color: #dddddd; font-size: 170%; top: 50%; transform: translateY(-50%); line-height:100%; box-sizing: border-box; padding: 0;}
.menu a.shoppingcar:hover{ border-bottom: 2px #c09d5b solid;}
.menu .shoppingcar .amount{  position: absolute; right: -7px; top: -7px;font-size: 50%;background-color: rgba(255,0,0,1);line-height: 20px; width: 20px; height: 20px; border-radius: 50%; color: #ffffff; opacity: 0; display: flex; justify-content: center; align-items:center;-webkit-transition: all 300ms; transition: all 300ms; z-index: 0;cursor:default;pointer-events:none;}
.menu .shoppingcar .amount.y{  opacity: 1; }
.menu .shoppingcar .amountM{position: fixed; right: -7px; top: -7px;opacity: 0; line-height: 20px; width: 500px; height: 500px; border-radius: 50%;background-color: rgba(255,0,0,1);-webkit-transition: all 0ms; transition: all 0ms; cursor:default;pointer-events:none; z-index: 0; }
.menu .shoppingcar .amountM.y{opacity: 0.7; width: 20px; height: 20px;-webkit-transition: all 300ms; transition: all 300ms; }
@media screen and (max-width: 1366px) {
.menu .login{right: 75px; width: 45px; height: 45px;}
.menu .shoppingcar{width: 45px; height: 45px;}
}
@media screen and (max-width: 980px) {
.menu .login{right: 70px; width: 40px; height: 40px;font-size: 160%;}
.menu .shoppingcar{width: 40px; height: 40px;font-size: 160%;}
}
@media screen and (max-width: 720px) {
.menu .login{right: 110px;}
.menu .shoppingcar{right: 60px;}
.menu .shoppingcar .amountM{width: 250px; height: 250px;}
}

.menu .shoppingcar .amount {
-webkit-animation: bounce 3s infinite ease-in-out;
animation: bounce 3s infinite ease-in-out;
}

@-webkit-keyframes bounce {
0%, 12%, 18%, 50%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
6% {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
15% {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
}
@keyframes bounce {
0%, 12%, 18%, 50%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
6% {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
15% {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
}

@-webkit-keyframes bounceL {
0%, 12%, 18%, 50%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
6% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
15% {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
}
@keyframes bounceL {
0%, 12%, 18%, 50%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
6% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
15% {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
}


/*首頁新聞*/
.indexnews { display: flex; justify-content: center; box-sizing: border-box; padding:4%  3%;  width: 100%;}
.indexnews a{ position: relative; flex: 0 50%; max-width: 620px; max-height: 330px; background-color: antiquewhite; margin-right: 2%; height: 25vw; background-repeat: no-repeat; background-size: cover; background-position: center;}
.indexnews a:last-child{ margin-right: 0%;}
.indexnews a .info{ position: absolute; bottom: 0px; background: rgba(110,77,58,0.6); padding: 2% 5%;}
.indexnews a .info b{font-size: 130%;font-weight: 400;text-shadow: 1px 1px 0px #000000; color: #e9d4a7;}
.indexnews a .info .s{ display: block; line-height: 140%; color: #ffffff; max-height: 0px; overflow: hidden;-webkit-transition: max-height 300ms; transition: max-height 300ms;}
.indexnews a:hover .info .s { max-height:100px;}

@media screen and (max-width: 720px) {
.indexnews {flex-wrap: wrap; padding: 12% 3%;}
.indexnews a{ position: relative; flex: 0 95%; margin-right: 0%; height: 45vw; margin-bottom: 5%; }
.indexnews a .info .s{ max-height:none; }
}


/*首頁商品*/
.indexporduct { position: relative; background-color: #eeeeee; padding: 4% 3% 2.3% 3%;}
.indexporduct .title{ position: relative; font-size: 280%; font-weight: 200; text-align: center; color: #555555; margin-bottom: 1.2%;}
.indexporduct .title .s{position: absolute; font-size: 55%; color: #bd9f5e; bottom: 5px; margin-left: 10px;}
.indexporduct .listA .more{ position: absolute; white-space: nowrap; right: 0%; margin-top: -2%; background-color: #a9a9a9; color: #ffffff; padding: 5px 10px;}
.indexporduct .listA{ position: relative; display: flex; flex-wrap: wrap; margin: auto; justify-content:center; width: 100%; max-width: 1366px; box-sizing: border-box;}
.indexporduct .listA .unit{ background-color: transparent;}
.indexporduct .listA .unit:nth-child(3n){ margin-right: 0%;}
.indexporduct .listA .unit .pic{ position: relative; background-color: transparent; width: 20vw; /* 設定圖片寬度 */ height: 20vw; /* 設定圖片高度 */ margin:5px; overflow: hidden; background-repeat: no-repeat; background-size: cover; /* 或 background-size: cover; */ background-position: center center;}
.indexporduct .listA .unit b{ display: block; width: 20vw; margin-top: 10px; text-align: center; font-weight: 400; color: #000000; margin-bottom: 4px;}
.indexporduct .listA .unit .pic::before{ position: absolute; opacity: 0.95; content: ""; width: 0;bottom: 0px; right: 0px;border-style: solid;border-width: 0px 0px 40px 80px; border-top-color:transparent; border-right-color:transparent;  border-left-color:transparent;height: 0px;}
.indexporduct .listA .unit .pic span{font-size: 95%; text-shadow: 1px 1px 0 #000000; position: absolute; right: 0px; bottom: 0px; color: #ffffff; padding: 0px 6px 3px 0px;}


@media screen and (max-width: 720px) {
.indexporduct {padding: 12% 0% 10.3% 0%;}
.indexporduct .title{ margin-bottom: 2%;}
.indexporduct .title .s{position:relative; display: block; font-size: 55%; color: #bd9f5e; bottom: 5px; margin-left: 0;}
.indexporduct .listA .more{ margin-top: -8%; margin-right: 3%;}
.indexporduct .listA .unit{ }
.indexporduct .listA .unit:nth-child(3n){ margin-right: 0%;}
.indexporduct .listA .unit .pic{ position: relative; width: 28vw; height: 28vw; /* 設定圖片高度 */ margin:2px; overflow: hidden; background-repeat: no-repeat; background-size: cover; /* 或 background-size: cover; */ background-position: center center; }
.indexporduct .listA .unit b{ width: 28vw; margin-top: 5px; padding: 0px 10px;}
.indexporduct .listA .unit.type1::after{ content:none;}
.indexporduct .listA .unit.type2::after{ content:none;}
}


/*首頁商家資訊*/
.indexabout { position: relative; padding: 4% 3%}
.indexabout .title{ position: relative; font-size: 280%; font-weight: 200; text-align: center; color: #555555; margin-bottom: 1.2%;}
.indexabout .title .s{position: absolute; font-size: 55%; color: #bd9f5e; bottom: 5px; margin-left: 10px;}
.indexabout .listA{ position: relative; display: flex; flex-wrap: wrap; margin: auto; width: 100%; max-width: 1366px; box-sizing: border-box;}
.indexabout .listA .pic {flex:66%;}
.indexabout .listA .pic img{ width: 100%;}
.indexabout .listA .info{ flex: 34%; box-sizing: border-box; display: flex; flex-direction:column; align-items: flex-start; color: #777777; justify-content: center;  font-size: 140%; line-height: 170%; padding-left: 3%;}
.indexabout .listA .info a{ margin-top: 10px; font-size: 75%; background-color: #a9a9a9; color: #ffffff; line-height: 120%; padding: 7px 25px;}

.indexaboutl { position: relative;}
.indexaboutl .title{ position: relative; font-size: 280%; font-weight: 200; text-align: center; color: #555555; margin-bottom: 1.2%;}
.indexaboutl .title .s{position: absolute; font-size: 55%; color: #bd9f5e; bottom: 5px; margin-left: 10px;}
.indexaboutl .listA{ position: relative; display: flex; flex-wrap: wrap; margin: auto; max-width: 200px; box-sizing: border-box;}
.indexaboutl .listA .pic {flex:66%;}
.indexaboutl .listA .pic img{ width: 100%;}
.indexaboutl .listA .info{ flex: 34%; box-sizing: border-box; display: flex; flex-direction:column; align-items: flex-start; color: #777777; justify-content: center;  font-size: 140%; line-height: 170%; padding-left: 3%;}
.indexaboutl .listA .info a{ margin-top: 10px; font-size: 75%; background-color: #a9a9a9; color: #ffffff; line-height: 120%; padding: 7px 25px;}

iframe.googlemap{width: 100%; height: 20vw;}

@media screen and (max-width: 1366px) {
.indexabout .listA .pic {flex:63%;}
.indexabout .listA .info{flex:37%;font-size: 130%;  }
.indexaboutl .listA .pic {flex:63%;}
.indexaboutl .listA .info{flex:37%;font-size: 130%;  }
}
@media screen and (max-width: 980px) {
.indexabout .listA .pic {flex:55%;}
.indexabout .listA .info{flex:45%;font-size: 130%;  }
.indexaboutl .listA .pic {flex:55%;}
.indexaboutl .listA .info{flex:45%;font-size: 130%;  }
}

@media screen and (max-width: 720px) {
.indexabout {padding: 12% 0%;}
.indexabout .title{ margin-bottom: 2%;}
.indexabout .title .s{position:relative; display: block; font-size: 55%; color: #bd9f5e; bottom: 5px; margin-left: 0;}
.indexabout .listA { flex-wrap: wrap; justify-content: center;}
.indexabout .listA .pic {flex:100%;}
.indexabout .listA .info{flex:initial; padding-top: 5%;font-size: 120%; padding-left: 0; }
.indexabout .listA .info .Mbr{ display: inline-table;}
.indexabout .listA .info a{margin: 15px auto auto; font-size: 110%;}
.indexaboutl {padding: 12% 0%;}
.indexaboutl .title{ margin-bottom: 2%;}
.indexaboutl .title .s{position:relative; display: block; font-size: 55%; color: #bd9f5e; bottom: 5px; margin-left: 0;}
.indexaboutl .listA { flex-wrap: wrap; justify-content: center;}
.indexaboutl .listA .pic {flex:100%;}
.indexaboutl .listA .info{flex:initial; padding-top: 5%;font-size: 120%; padding-left: 0; }
.indexaboutl .listA .info .Mbr{ display: inline-table;}
.indexaboutl .listA .info a{margin: 15px auto auto; font-size: 110%;}
iframe.googlemap{width: 100%; height: 80vw;}
}

/*商品列表*/
.porduct_list { position: relative; padding: 3% 3% 4% 3%;}
.porduct_list .title{ position: relative; font-size: 280%; font-weight: 200; text-align: center; color: #555555; margin-bottom: 1.2%;}
.porduct_list .title .s{position: absolute; font-size: 55%; color: #bd9f5e; bottom: 5px; margin-left: 10px;}
.porduct_list .listA{ position: relative; display: flex; flex-wrap: wrap; margin: auto; justify-content:center; width: 100%; max-width: 1366px; box-sizing: border-box;}
.porduct_list .pages{ width:100%; max-width:1190px; justify-content:left; padding:15px; }
.porduct_list .pages .page.hover{ font-weight:blod; color:#c87474; border: 2px rgba(192,113,115,100) solid; }
.porduct_list .pages .page{ padding-left:15px; padding-right:15px; padding-top:10px; padding-bottom:10px; margin-left:5px; color:#CCCCCC; border: 1px rgba(170,170,170,100) solid; }
.porduct_list .pages .page a.hover{ color:#c87474;}
.porduct_list .pages .page a{ color:#666666;}
.porduct_list .listA.type{ text-align: right; justify-content: center; box-sizing: border-box;  margin-bottom: 1.2%;}
.porduct_list .listA.type a{ white-space: nowrap; font-size: 110%; right: 0%; margin:auto 3px; color: #ffffff; padding: 5px 20px;border: 2px rgba(110,77,58,0) solid;}
.porduct_list .listA.type a.hover,
.porduct_list .listA.type a:hover{border: 2px rgba(110,77,58,0.4) solid;}
.porduct_list .listA.type a.hover{ font-weight: 600;}
.porduct_list .listA .unit{ }
.porduct_list .listA .unit:nth-child(3n){ margin-right: 0%;}
.porduct_list .listA .unit .pic{ position: relative; width: 20vw; height: 20vw; margin:5px; overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: center center;}
.porduct_list .listA .unit b{ display: block; margin-bottom:10px; text-align: center; font-weight: 400; color: #000000; }
.porduct_list .listA .unit .price {margin-top: -3px; }
.porduct_list .listA .unit .price span{ font-family: "Microsoft JhengHei", Tahoma; font-size: 90%; margin: auto 5px; color: #999999;}
.porduct_list .listA .unit .price span b{ font-family: "Microsoft JhengHei", Tahoma; width: 20vw; display:inline;font-size: 140%; font-weight: 400; color: #AB595A;}
.porduct_list .listA .unit .pic::before{ position: absolute; opacity: 0.95; content: ""; width: 0;bottom: 0px; right: 0px;border-style: solid;border-width: 0px 0px 40px 80px; border-top-color:transparent; border-right-color:transparent;  border-left-color:transparent;height: 0px;}
.porduct_list .listA .unit .pic span{font-size: 95%; text-shadow: 1px 1px 0 #000000; position: absolute; right: 0px; bottom: 0px; color: #ffffff; padding: 0px 6px 3px 0px;}


@media screen and (max-width: 720px) {
.porduct_list {padding: 8% 0% 8% 0%;}
.porduct_list .title{ margin-bottom: 2%;}
.porduct_list .title .s{position:relative; display: block; font-size: 55%; color: #bd9f5e; bottom: 5px; margin-left: 0;}
.porduct_list .listA.type {padding: 0 3% 4%;}
.porduct_list .listA.type a{ margin-bottom: 5px; padding: 4px 16px;}
.porduct_list .listA .more{ margin-top: -8%;}
.porduct_list .listA .unit{ }
.porduct_list .listA .unit:nth-child(3n){ margin-right: 0%;}
.porduct_list .listA .unit .pic{ position: relative; width: 28vw; height: 28vw; overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: center center; }
.porduct_list .listA .unit b{ width: 28vw; margin-bottom: 5px; padding-left: 5px; padding-right: 5px;}
.porduct_list .listA .unit .price span b{padding: 0;}
.porduct_list .listA .unit.type1::after{ content:none;}
.porduct_list .listA .unit.type2::after{ content:none;}
}

/*商品頁*/
.porduct_view { position: relative; padding: 2% 2% 4% 3%; text-align: center;}
.porduct_view .title{ position: relative; font-size: 220%; font-weight: 200; text-align: center; color: #555555; margin-bottom: 2%; font-weight:bold;}
.porduct_view .title .s{display: block; font-size: 75%; color: #bd9f5e; font-weight:bold;}
.porduct_view .listA{ position: relative; flex-wrap: wrap; flex-direction:column; margin: auto; justify-content:center; width: 100%; max-width: 1366px; box-sizing: border-box;}
.porduct_view .listA.type{ text-align: right; justify-content: flex-end; box-sizing: border-box; margin-bottom: 1%;}
.porduct_view .listA.type a.back{ white-space: nowrap; right: 0%; color: #777777; padding: 7px 35px; border: 1px #999999 solid;}
.porduct_view .productinfo{ display: flex; flex-direction: column; align-items: center; max-width: 1366px; margin: auto;}
.porduct_view .productinfo .pic{ display: flex; position: relative; margin: auto;}
.porduct_view .productinfo .pic .pic_view{ display: flex; flex-direction: column; justify-content: flex-end; width: 40vw; height: 40vw; margin: 0 auto; overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: center center;}
.porduct_view .productinfo .pic .pic_view span{ font-family: "Microsoft JhengHei", Tahoma; font-size: 90%; width:100%; color: #EEEEEE; align-self: end; text-align: center; background-color: #ccb686;}
.porduct_view .productinfo .pic .span_chevron{position:inherit; font-size:130%; color:gray; border-radius: 10px; border: 1px solid gray; padding:10px; margin:auto}
.porduct_view .productinfo .pic img{width:50vw; max-width:600px;}
.porduct_view .productinfo .morepic {display: flex; max-width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-top: 5px; margin-left:25px;margin-right:25px;}
.porduct_view .productinfo .morepic img{ max-height: 100px; padding:0 2.5px 5px; cursor: pointer; display: flex; justify-content: center; align-items: center; font-size: 2em;}
.porduct_view .productinfo .format{ margin-top: 2%; width: 100%; max-width: 980px; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start;}
.porduct_view .productinfo .format .w{text-align: left; color: #8a7850; font-size: 115%; line-height: 170%;}
.porduct_view .productinfo .format .w b{font-size: 160%; font-weight: 200;}
.porduct_view .productinfo .format .sharebnt{ font-size: 40px; display: flex; justify-content: center; align-items: center;  right: 0;}
.porduct_view .productinfo .format .sharebnt a{margin-left: 10px; display: flex; justify-content: flex-start; align-items: flex-start; }
.porduct_view .productinfo .format .sharebnt .fa-line{ color: #11b111;}
.porduct_view .productinfo .format .sharebnt .fa-facebook-square{ color: #5a81b8;}
.porduct_view .productinfo .format .sharebnt .fa-weixin{display: flex; justify-content: center; align-items: center; width: 36px; height: 36px;  background-color: #2ec101;color: #ffffff; border-radius: 5px; font-size: 60%;}
.porduct_view .productinfo .buybnt{ margin-top: 2%; width: 100%; max-width: 980px; text-align: left; }
.porduct_view .productinfo .buybnt a{ font-size: 110%; display: inline-table; padding: 9px 30px; margin-right: 10px; color: #ffffff;}
.porduct_view .productinfo .buybnt a:last-child{margin-right:0; }
.porduct_view .productinfo .buybnt a:nth-child(1){background-color: #bd9f5e;}
.porduct_view .productinfo .buybnt a:nth-child(2){background-color: #9b9a97;}
.porduct_view .productinfo .tagformat{ width:90vw; max-width: 980px; padding-top:5px; padding-left:10px; text-align: left;}
.porduct_view .productinfo .buyformat{ width: 100%; max-width: 980px; padding-top:10px; padding-bottom:10px; text-align: left;}
.porduct_view .productinfo .buyformat .fs_label{  display: inline-block; padding: 5px; font-size: 120%; color: #000000; margin: 5px;}
.porduct_view .productinfo .buyformat .buy_format{ display: inline-block; padding: 5px; font-size: 120%; color: #8a7850; border-radius: 10px; border: 1px solid gray; margin: 5px;}
.porduct_view .productinfo .buyformat .buy_format_select{ display: inline-block; padding: 5px; font-size: 120%; color: #DDDDDD; background-color:#bd9f5e; border-radius: 10px; border: 1px solid gray; margin: 5px;}
.porduct_view .productinfo .buyformat .unselect_format{ display: inline-block; padding: 5px; font-size: 120%; color: #8a7850; border-radius: 10px; border: 1px solid gray; margin: 5px;}
.porduct_view .productinfo .buyformat .select_format{ display: inline-block; padding: 5px; font-size: 120%; color: #DDDDDD; background-color:#bd9f5e; border-radius: 10px; border: 1px solid gray; margin: 5px;}
.porduct_view .productinfo .buyformat .unselect_format_size_cannot{ display: inline-block; padding: 5px; font-size: 120%; color: #DDDDDD; border-radius: 10px; border: 1px solid gray; margin: 5px;}
.porduct_view .productinfo .buyformat .unselect_format_size{ display: inline-block; padding: 5px; font-size: 120%; color: #8a7850; border-radius: 10px; border: 1px solid gray; margin: 5px;}
.porduct_view .productinfo .buyformat .select_format_size{ display: inline-block; padding: 5px; font-size: 120%; color: #DDDDDD; background-color:#bd9f5e; border-radius: 10px; border: 1px solid gray; margin: 5px;}
.porduct_view .productinfo .info{ margin-top: 3%; font-size: 130%; line-height: 160%; width: 100%; max-width: 980px; text-align: left; font-weight: bold; color: rgba(110,77,58,1);}
.porduct_view .productinfo .info img {max-width: 100%; margin-top: 15px; margin-bottom: 15px;}
.porduct_view .productinfo .info a{ color: #bd9f5e; border-bottom: 1px #bd9f5e solid;font-weight: 600;}
.porduct_view .productinfo .info strong,
.porduct_view .productinfo .info b{ color: #bd9f5e;}
.porduct_view .productinfo .instruction{ margin-top: 3%; padding-top: 3%; border-top: 1px #c09d5b solid; font-size: 105%; line-height: 160%; width: 100%; max-width: 980px; text-align: left;}
.porduct_view .productinfo .instruction strong,
.porduct_view .productinfo .instruction b{display: inline-table; margin-bottom: 5px; color: #C56B6D; font-weight: 600;}

.porduct_view .productinfo .instruction .flonMTitle{font-size: 110%; color: #d6662a; margin-bottom: 10px;}
.porduct_view .productinfo .instruction .flonMTitle b{font-size: 120%; color: #8e7160;}
.porduct_view .productinfo .instruction .flonM{display: flex; flex-wrap: wrap; margin-top: 20px;}
.porduct_view .productinfo .instruction .flonM div{position: relative; width: 33.3%; box-sizing: border-box; padding-top: 40px; color: #8e7160; font-weight: 600; font-size: 100%; padding-right: 25px;  margin-bottom: 20px;}
.porduct_view .productinfo .instruction .flonM div:nth-child(3n){ padding-right: 0px}
.porduct_view .productinfo .instruction .flonM div::after{ position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #8e2a8a;  padding: 0; color: #ffffff; width: 35px; height: 35px; font-size: 100%; line-height: 35px;}
.porduct_view .productinfo .instruction .flonM div:nth-child(1)::after{content: "1";}
.porduct_view .productinfo .instruction .flonM div:nth-child(2)::after{content: "2";}
.porduct_view .productinfo .instruction .flonM div:nth-child(3)::after{content: "3";}
.porduct_view .productinfo .instruction .flonM div:nth-child(4)::after{content: "4";}
.porduct_view .productinfo .instruction .flonM div:nth-child(5)::after{content: "5";}
.porduct_view .productinfo .instruction .flonM div:nth-child(6)::after{content: "6";}
.porduct_view .productinfo .instruction .flonM div b{font-size: 80%; font-weight: 400;color: #66544a;}

.porduct_view .productinfo .instruction li{margin-left: 15px; margin-bottom: 20px;}
.porduct_view .productinfo .instruction li tr td{padding: 2px 10px; text-align: center;background-color: #e2e4f9; color: #7c1c77;}
.porduct_view .productinfo .instruction li tr:first-child td{background-color: #d6662a; color: #ffffff;}

@media screen and (max-width: 720px) {
.porduct_view {padding: 5% 0% 5% 0%;}
.porduct_view .title{font-size: 200%;}
.porduct_view .listA.type {padding: 0 3% 4%;}
.porduct_view .productinfo .pic .pic_view{ width:80vw; height: 80vw;}
.porduct_view .productinfo{ width:100%; max-width: 1366px; margin: auto;}
.porduct_view .productinfo .morepic img{max-height: 60px;}
.porduct_view .productinfo .format{flex-direction:column-reverse; box-sizing: border-box; padding: 0% 3%; margin-top: 0.5%;}
.porduct_view .productinfo .format .w{line-height: 170%;}
.porduct_view .productinfo .format .sharebnt{ width: 100%; justify-content:flex-end; margin-bottom: 0.5%;}
.porduct_view .productinfo .tagformat{ padding-top:5px; padding-left:25px; text-align: left;}
.porduct_view .productinfo .buybnt{box-sizing: border-box; text-align: left; padding: 1% 3% 0;}
.porduct_view .productinfo .info{box-sizing: border-box; padding: 2% 3% 0;}
.porduct_view .productinfo .pic img{ width:75%; min-height: 80vw;}
.porduct_view .productinfo .instruction{box-sizing: border-box; padding: 7% 0%; margin-top: 7%; width: 94%;}
.porduct_view .productinfo .instruction .flonM div{padding-right: 15px;}
.porduct_view .productinfo .pic .span_chevron{font-size:110%; color:gray; border-radius: 10px; border: 1px solid gray; padding:8px;}
}
@media screen and (max-width: 371px) {
.porduct_view .productinfo .pic .span_chevron{font-size:110%; color:gray; border-radius: 10px; border: 1px solid gray; padding:7px;}
}


/*確認訂單*/
.confirm { position: relative; padding: 2% 3% 4% 3%; text-align: center; max-width: 1100px; margin: auto;}
.confirm .title{ position: relative; font-size: 220%; font-weight: 200; text-align: center; color: #555555; margin-bottom: 1%;}
.confirm .title .s{display: block; font-size: 75%; }
.confirm .listA{ position: relative; flex-wrap: wrap; flex-direction:column; margin: auto; justify-content:center; width: 100%; max-width: 1366px; box-sizing: border-box;}
.confirm .listA.type{ text-align: right; justify-content: flex-end; box-sizing: border-box;}
.confirm .listA.type a.back{ white-space: nowrap; right: 0%; color: #777777; padding: 7px 35px; margin-bottom: 1%; border: 1px #999999 solid;}
.confirm .checklist{}
.confirm .checklist .list{display: flex; width: 100%; margin-bottom: 1%; padding: 10px; box-sizing: border-box; justify-content: space-between; flex-direction: row; background-color: #eeeeee;}
.confirm .checklist .list .pic {height: 150px;flex: 150px; flex-shrink: 0;background-repeat: no-repeat; background-size: cover; background-position: center;}
.confirm .checklist .list .pic img {}
.confirm .checklist .list .info{ flex: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-left: 2%;}
.confirm .checklist .list .info .name{ text-align: left; width: 100%; font-size: 130%; font-weight: 600; margin-bottom: 5px; color: #c09d5b;}
.confirm .checklist .list .info .format{ text-align: left; width: 100%; line-height: 150%; font-size: 95%; color: #555555; }
.confirm .checklist .list .info .format b{font-size: 130%; font-weight: 200;}
.confirm .checklist .list .format_div{ display: flex; align-items: center; justify-content: center; align-content: center; width: 100%; max-width: 400px; flex-wrap: wrap;}
.confirm .checklist .list .format_div b{ display: inline-table; font-size: 95%;  font-weight: 400; padding-bottom: 8px;}
.confirm .checklist .list .format_div i{ font-size: 130%; color: #5d7181; cursor: pointer;}
.confirm .checklist .list .format_div input{width: 40px; text-align: center; border: 0; background-color: #ffffff; border-bottom: 1px #bbbbbb solid; font-size: 150%; height:35px; line-height: 35px; outline:none; font-weight: 200; margin: auto 5px;}
.confirm .checklist .list .format_div .format{ display: inline-block; min-width: 110px; padding: 5px; font-size: 120%; color: #8a7850; border-radius: 10px; border: 1px solid gray; margin: 5px; }
.confirm .checklist .list .count{ flex: 10%; display: flex; align-items: center; justify-content: center; white-space:nowrap; padding: 0 10px;}
.confirm .checklist .list .count b{ display: inline-table; font-size: 95%;  font-weight: 400; padding-bottom: 8px;}
.confirm .checklist .list .count i{ font-size: 130%; color: #5d7181; cursor: pointer;}
.confirm .checklist .list .count input{width: 40px; text-align: center; border: 0; background-color: #ffffff; border-bottom: 1px #bbbbbb solid; font-size: 150%; height:35px; line-height: 35px; outline:none; font-weight: 200; margin: auto 5px;}
.confirm .checklist .list .amount{ flex: 10%; display: flex; align-items: center; justify-content: center; white-space:nowrap; padding: 0 10px;}
.confirm .checklist .list .amount b{ display: inline-table; font-size: 95%;  font-weight: 400; padding-bottom: 8px;}
.confirm .checklist .list .amount .value{ line-height: 35px; font-size: 210%; color: #c06062; font-weight: 200;}
.confirm .checklist .list .bnt{ flex: 15%; display: flex; align-items: center; white-space:nowrap; justify-content: center; }
.confirm .checklist .list .bnt a{background-color: #777777; color: #ffffff; padding: 2px 5px;}

.confirm .checklist .buytype{ text-align: right; margin:20px auto auto;}
.confirm .checklist .buytype a{ display: inline-table; padding: 8px 22px; font-size: 115%; color: #777777;  margin: 5px; background-color: #e0e0e0;}
.confirm .checklist .buytype a.hover{background-color:#916e2c; color: #ffffff; }

.confirm .checklist .total{display: flex; justify-content: flex-end; align-items: center; text-align: right;  font-size: 100%; margin-top: 1%; padding-bottom: 1%; margin-bottom: 2%; border-bottom: 1px #999999 solid;}
.confirm .checklist .total div{margin-left: 20px;}
.confirm .checklist .total div:last-child{font-size:130%; }
.confirm .checklist .total b{ font-size: 200%; font-weight: 200;color: brown;}

@media screen and (max-width: 720px) {
.confirm { padding: 5% 0%;}
.confirm .listA.type {padding: 0 3% 4%;}
.confirm .title .s{ margin-top: 3%; margin-bottom: 3%; }
.confirm .checklist .list{ flex-wrap: wrap; margin-bottom: 3%;  padding: 10px 0;}
.confirm .checklist .list .pic { height: 30vw ;flex: initial; box-sizing: border-box; width: 30%; margin-bottom: 10px;}
.confirm .checklist .list .info{flex: initial; width: 70%; box-sizing: border-box; margin-bottom: 10px;}
.confirm .checklist .list .info .name{ font-size: 120%;}
.confirm .checklist .list .format_div{ display: flex; align-items: center; justify-content: center; align-content: center; width: 100%; max-width: 280px; min-width:150px; flex-wrap: wrap; }
.confirm .checklist .list .format_div input{ font-size: 100%; height: 30px; line-height: 30px;}
.confirm .checklist .list .format_div div{display: flex; align-items: center; }
.confirm .checklist .list .format_div b{padding-bottom: 0px; margin-right: 5px;}
.confirm .checklist .list .format_div b::after{ content: "：";}
.confirm .checklist .list .format_div i{ font-size: 170%; opacity: 0.5;}
.confirm .checklist .list .format_div .format{ display: inline-block; min-width: 110px; padding: 5px; font-size: 120%; color: #8a7850; border-radius: 10px; border: 1px solid gray; margin: 5px; }
.confirm .checklist .list .amount,
.confirm .checklist .list .count{ flex: 50; padding: 5px 0 0;}
.confirm .checklist .list .amount .value{font-size:  160%; line-height: normal;}
.confirm .checklist .list .count input{ font-size: 130%; height: 30px; line-height: 30px;}
.confirm .checklist .list .amount div,
.confirm .checklist .list .count div{display: flex; align-items: center; }
.confirm .checklist .list .amount b,
.confirm .checklist .list .count b{padding-bottom: 0px; margin-right: 5px;}
.confirm .checklist .list .amount b::after,
.confirm .checklist .list .count b::after{ content: "：";}
.confirm .checklist .list .amount i,
.confirm .checklist .list .count i{ font-size: 170%; opacity: 0.5;}
.confirm .checklist .buytype a{font-size: 125%;}

.confirm .checklist .total{flex-direction: column; align-items: flex-end; padding-right: 10px; padding-bottom: 3%; padding-top: 0%;   margin-bottom: 3%; border-bottom: 1px #dddddd solid;}
}

/*確認訂單-表單*/
.confirm .from{}

.confirm .fromtabP { display: flex; height:288px; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;}
.confirm .fromtabP .fromtab{ font-size: 105%; width:50%; height:100%; padding: 5% 10%; background-color: #eeeeee; margin: auto; box-sizing: border-box;}

.confirm .fromtab{ display: flex; font-size: 105%; max-width:1100px; padding: 5% 10%; background-color: #eeeeee; margin: auto; flex-wrap: wrap; justify-content: center; align-items: flex-start; box-sizing: border-box;}
.confirm .fromtab .tdL{width: 100%; line-height: 100%; text-align: left; font-size: 95%; margin-bottom: 2px; font-weight: 400; box-sizing: border-box;}
.confirm .fromtab .tdL .s{ display: inline-table; white-space: nowrap; font-size: 75%; margin-left: 15px; color: #B96163;}
.confirm .fromtab .tdR{width: 100%; text-align: left; margin-bottom: 20px;}
.confirm .fromtab .tdR input,
.confirm .fromtab .tdR select{ box-sizing: border-box;outline: none; padding:7px 5px; font-size: 100%; border: 0; border-bottom: 1px #bbbbbb solid; color: #356994; font-weight: 400; background-color: #ffffff; margin-right: 10px; margin-bottom: 3px; width: 30%;}
.confirm .fromtab .tdR select{padding-left: 0px; width: auto;}
.confirm .fromtab .tdR input:focus{ border-bottom: 1px #000000 solid;}
.confirm .fromtab .tdR input.M{ width: 40%;}
.confirm .fromtab .tdR input.L{ width: 100%;}
.confirm .fromtab .tdR .s{ display: inline-table; white-space: nowrap; font-size: 85%; margin-top: 3px; color: #B96163;}
.confirm .fromtab .tdR:last-child{ margin-bottom: auto;}
.confirm .fromtab .tdR .typename{font-size: 130%; color: #b96163;}

.confirm .from input.submit{display: block; font-size: 105%; font-weight: 600; cursor:pointer;margin: 20px auto; background-color: #c09d5b; border: 1px #c09d5b solid; padding: 12px 80px; color: #ffffff;-webkit-appearance:none;}
.confirm .from input.submit:hover{ background-color: #916e2c;}


.confirm .fromtab{ display: flex; font-size: 105%; max-width:1100px; padding: 5% 10%; background-color: #eeeeee; margin: auto; flex-wrap: wrap; justify-content: center; align-items: flex-start; box-sizing: border-box;}
.confirm .fromtab .tdL{width: 100%; line-height: 100%; text-align: left; font-size: 95%; margin-bottom: 2px; font-weight: 400; box-sizing: border-box;}
.confirm .fromtab .tdL .s{ display: inline-table; white-space: nowrap; font-size: 75%; margin-left: 15px; color: #B96163;}
.confirm .fromtab .tdR{width: 100%; text-align: left; margin-bottom: 20px;}
.confirm .fromtab .tdR input,
.confirm .fromtab .tdR select{ box-sizing: border-box;outline: none; padding:7px 5px; font-size: 100%; border: 0; border-bottom: 1px #bbbbbb solid; color: #356994; font-weight: 400; background-color: #ffffff; margin-right: 10px; margin-bottom: 3px; width: 30%;}
.confirm .fromtab .tdR select{padding-left: 0px; width: auto;}
.confirm .fromtab .tdR input:focus{ border-bottom: 1px #000000 solid;}
.confirm .fromtab .tdR input.M{ width: 40%;}
.confirm .fromtab .tdR input.L{ width: 100%;}
.confirm .fromtab .tdR .s{ display: inline-table; white-space: nowrap; font-size: 85%; margin-top: 3px; color: #B96163;}
.confirm .fromtab .tdR:last-child{ margin-bottom: auto;}
.confirm .fromtab .tdR .typename{font-size: 130%; color: #b96163;}

@media screen and (max-width: 720px) {
.confirm .fromtab{ padding: 30px 7%; font-size: 115%;}
.confirm .fromtab .tdR{ margin-bottom: 25px;}
.confirm .fromtab .tdR input,
.confirm .fromtab .tdR select{width: 100%; padding:0 5px; height: 45px; line-height: 45px;}
.confirm .fromtab .tdR input.M{width: 100%;}
.confirm .fromtab .tdR select{-webkit-appearance: menulist-button; height: 45px;}
.confirm .fromtab .tdR option {height: 50px;}

.confirm .fromtab{ padding: 30px 7%; font-size: 115%;}
.confirm .fromtab .tdR{ margin-bottom: 25px;}
.confirm .fromtab .tdR input,
.confirm .fromtab .tdR select{width: 100%; padding:0 5px; height: 45px; line-height: 45px;}
.confirm .fromtab .tdR input.M{width: 100%;}
.confirm .fromtab .tdR select{-webkit-appearance: menulist-button; height: 45px;}
.confirm .fromtab .tdR option {height: 50px;}
.confirm .fromtabP .fromtab{ font-size: 105%; padding: 5% 5%; }
}


/*訂購結果*/
.success { position: relative; padding: 8% 3% ; text-align: center; max-width: 1366px; margin: auto;}
.success .title{ position: relative; font-size: 200%; font-weight: 200; text-align: center; color: #000000;}
.success .title .s{display: block; font-size: 75%; margin-top: 1%; color: #A43C3E;  }
.success .title .s a{color: #A43C3E; border-bottom: 1px #A43C3E solid;}

@media screen and (max-width: 720px) {
.success { padding: 15% 0%;}
.success .title{ font-size: 160%; margin-top: 10%;}
.success .title .s{ margin-top: 3%; margin-bottom: 3%; }
}


/*訂單查詢*/
.order_record{ position: relative; padding: 3% 3% ; text-align: center; max-width: 1100px; margin: auto;}
.order_record .title{ font-size: 280%; font-weight: 200; text-align: center; color: #555555; margin-bottom: 3%;}
.order_record .title .s{display: block; font-size: 75%; margin-top: 1%; color: #A43C3E;  }
.order_record .title .s a{color: #A43C3E; border-bottom: 1px #A43C3E solid;}

.order_record .from{}
.order_record .from .fromtab{ display: flex; font-size: 105%; max-width:700px; padding: 2% 5%; background-color: #eeeeee; margin: auto; flex-wrap: wrap; justify-content: center; align-items: flex-start; box-sizing: border-box; margin-bottom: 3%;}
.order_record .from .fromtab .tdL{width: 100%; line-height: 100%; margin-bottom: 5px; text-align: left; font-size: 95%; font-weight: 400; box-sizing: border-box;}
.order_record .from .fromtab .tdL .s{ display: inline-table; white-space: nowrap; font-size: 75%; margin-left: 15px; color: #B96163;}
.order_record .from .fromtab .tdR{ display: flex; width: 100%;}
.order_record .from .fromtab .tdR input{ box-sizing: border-box;outline: none; padding:7px 5px; font-size: 120%; border: 0; border-bottom: 1px #bbbbbb solid; color: #356994; font-weight: 400; background-color: #ffffff; margin-right: 10px; margin-bottom: 3px; flex: 80;}
.order_record .from .fromtab .tdR input:focus{ border-bottom: 1px #000000 solid;}
.order_record .from .fromtab .tdR input.submit{ flex: 20; margin-right: auto;  font-size: 100%; font-weight: 600; cursor:pointer;background-color: #c09d5b; border: 1px #c09d5b solid; color: #ffffff;-webkit-appearance:none; }
.order_record .from .fromtab .tdR input.submit:hover{}

.order_record .checkW{color:#C5484A; font-size: 130%; margin: 5% auto;}
.order_record .checkW.s{color:#C5484A; font-size: 120%; margin: 0% auto;}

.order_record .checklist{ margin: 0% auto 4%; background-color: #eeeeee; padding: 2% 3% 1%; box-sizing: border-box;}
.order_record .orderinfo{ display: flex; justify-content: space-between; align-items: center;text-align: left; margin-bottom: 1%; padding: 0 2%;}
.order_record .orderinfo div:nth-child(2){ margin-left: 50px; margin-right: auto;}
.order_record .orderinfo div span{white-space: nowrap;}
.order_record .orderinfo div b{font-size: 110%; white-space: nowrap;}
.order_record .checklist .list{display: flex; width: 100%; margin-bottom: 1%; padding: 10px; box-sizing: border-box; justify-content: space-between; flex-direction: row; background-color: #ffffff;}
.order_record .checklist .list .pic{ height: 150px;flex: 150px; flex-shrink: 0;background-repeat: no-repeat; background-size: cover; background-position: center;}
.order_record .checklist .list .info{ flex: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;padding-left: 2%;}
.order_record .checklist .list .info .name{ text-align: left; width: 100%; font-size: 130%; font-weight: 600; margin-bottom: 5px; color: #c09d5b;}
.order_record .checklist .list .info .format{ text-align: left; width: 100%; line-height: 150%; font-size: 95%; color: #555555; }
.order_record .checklist .list .info .format b{font-size: 130%; font-weight: 200;}
.order_record .checklist .list .count{ flex: 10%; padding-right: 20px; box-sizing: border-box; display: flex; white-space:nowrap;align-items: center; }
.order_record .checklist .list .count b{  font-size: 95%;  font-weight: 400; }
.order_record .checklist .list .count .value{ font-size: 130%; font-weight: 200;}
.order_record .checklist .list .amount{ flex: 20%; display: flex; white-space:nowrap;align-items: center;}
.order_record .checklist .list .amount b{ font-size: 95%;  font-weight: 400;}
.order_record .checklist .list .amount .value{ font-size: 140%; color: #c06062; font-weight: 200;}

.order_record .checklist .list .amount b::after,
.order_record .checklist .list .count b::after{ content: "：";}

.order_record .checklist .total{display: flex; justify-content: flex-end; align-items: center; text-align: right;  font-size: 100%; padding-bottom: 1%; margin-top: 1%; margin-bottom: 2%;}
.order_record .checklist .total div{margin-left: 20px;}
.order_record .checklist .total div:last-child{font-size:140%; }
.order_record .checklist .total b{ font-size: 140%; font-weight: 200;color: brown;}
.order_record .checklist .atmM{font-size: 110%;display: flex; justify-content: center; align-items: center; }
.order_record .checklist .atmM div{ padding-left: 20px;}
.order_record .checklist .atmM div input{ width: 100px; padding: 5px; border:1px #916e2c solid; box-sizing: border-box;}
.order_record .checklist .atmM div input[type=button]{background-color:  #916e2c; width: inherit; color: #ffffff; border-radius: 5px; font-size: 100%;}

.order_record .checklist .atmM .atmbut{display: block;cursor: pointer; width:fit-content; padding: 8px 30px; border-radius: 6px; background-color: crimson; color: #FFFFFF; box-shadow: 0px 2px 3px #000000;}

.payinfolist{display: flex;margin: 2%; border-bottom: 1px #ffffff solid;  font-size: 105%; line-height: 180%; flex-direction: column;justify-content: flex-start; align-items: flex-start; margin-top: 20px;}
.payinfolist>.title{font-size: 110%; font-weight: 600; margin-bottom: 5px; color: #000000;}
.payinfolist>span{text-align: left;}
.payinfolist div>b{ font-size: 160%; color:brown; }

@media screen and (max-width: 720px) {
.order_record { padding: 8% 0%;}
.order_record .listA.type {padding: 0 3% 4%;}
.order_record .title .s{ margin-top: 3%; margin-bottom: 3%; }
.order_record .from .fromtab{  font-size: 110%; padding: 5%; margin-bottom: 5%; }
.order_record .checkW{margin: 12% auto;}
.order_record .orderinfo{ padding:0% 3%; margin-bottom: 2%; }
.order_record .orderinfo div:nth-child(2){ margin-left: auto; margin-right: auto;}
.order_record .orderinfo div span{display: block;}

.order_record .checklist .list{ margin-bottom: 3%;  padding: 10px;}
.order_record .checklist .list .pic { height: 20vw ;flex: initial; flex-shrink: 0; box-sizing: border-box; width: 20%; margin-bottom: 10px;}
.order_record .checklist .list .info{flex: initial; width: 60%; box-sizing: border-box; margin-bottom: 10px;}
.order_record .checklist .list .info .name{ font-size: 120%;}


.order_record .checklist .list .amount{ flex: 10%; justify-content: center; flex-direction: column;}
.order_record .checklist .list .amount .value{font-size:  110%; }
.order_record .checklist .list .amount b::after{content: "";}

.order_record .checklist .list .count{flex: 10%; justify-content: center;  flex-direction: column; text-align: center}
.order_record .checklist .list .count .value{ font-size: 130%;}
.order_record .checklist .list .count b::after{content: "";}

.order_record .checklist .total{flex-direction: column; align-items: flex-end; padding-right: 10px; padding-bottom: 3%; padding-top: 2%; }
.order_record .checklist .total b{}

.order_record .checklist .atmM{font-size: 108%;}
.order_record .checklist .atmM div{ padding-left: 10px;}
.order_record .checklist .atmM div input{ width: 75px;}
.order_record .checklist .atmM .atmbut{padding: 6px 12px;}
}

/*菜單*/
.menu_list { position: relative; padding: 3% 3% 4% 3%;}
.menu_list>.title{ position: relative; font-size: 280%; font-weight: 200; text-align: center; color: #555555; margin-bottom: 1.2%;}
.menu_list>.title .s{position: absolute; font-size: 55%; color: #bd9f5e; bottom: 5px; margin-left: 10px;}
.menu_list .menua{ position: relative; display: flex; flex-wrap: wrap; margin: auto; justify-content:flex-start; margin-top: 2%; width: 100%; max-width: 1200px; box-sizing: border-box; }

.menu_list .menua .group{width: 32.2%; margin-right: 1.7%; margin-bottom: 1.7%; box-sizing: border-box; background-color:#ebe4d8; padding:  20px 30px 30px;}
.menu_list .menua .group:nth-child(3n){ margin-right: auto;}

.menu_list .menua .group .title{ text-align: center;  font-size: 180%; font-weight: 200; margin-bottom: 10px; color: #967332;}
.menu_list .menua .group .unit{display: flex; flex-direction:row; align-items: center; justify-content: space-between; background-color: #ffffffa6; padding: 2px 10px 0; margin-bottom: 5px;}
.menu_list .menua .group .unit:last-child{ margin-bottom: 0;}
.menu_list .menua .group .unit .name{position: relative; display: flex; flex-wrap: wrap;  align-items: center; line-height: 120%; font-weight: 400;  font-size: 115%; padding: 8px 0;}
.menu_list .menua .group .unit .name .s{ font-size: 95%;  color: #e18282; white-space: nowrap;}
.menu_list .menua .group .unit .name .push{ font-size: 80%; position: absolute; top: 50%; left: -5px;; padding: 2px 4px 0;  transform: translate(-100%,-50%); background-color: #dd6f6f; color: #ffffff;}
.menu_list .menua .group .unit .price{ text-align: right; }
.menu_list .menua .group .unit .price span{ font-family: "Microsoft JhengHei"; ;line-height: 140%; font-size: 90%; margin-left: 15px;}
.menu_list .menua .group .unit span b{ font-family: "Microsoft JhengHei"; font-size: 140%; font-weight: 200; color: #AB595A;}

.menu_list.second{ position: relative; padding: 3% 3% 4% 3%; background-color: #eeeeee;}
.menu_list.second .menua .group{ width: 49%; margin-right: 2%; background-color:#cdbfa8;}
.menu_list.second .menua .group:nth-child(2n){ margin-right: auto;}
.menu_list.second .menua .group .title{ color: #ffffff; line-height: 110%; background-color: rgba(110,77,58,0.1); padding: 5px 0;}
.menu_list.second .menua .group .unit{ background-color: #ffffff56;}
.menu_list.second .menua .group .unitA{display: flex; flex-wrap: wrap; align-items: center;}
.menu_list.second .menua .group .unitA .unit{position: relative; width: 49%; box-sizing: border-box; justify-content: center; line-height: 120%; font-weight: 400; margin-right: 1%; margin-bottom: 1%;  font-size: 115%; padding: 8px 0;}
.menu_list.second .menua .group .unitA .unit:nth-child(2n){ margin-right: auto;}
.menu_list.second .menua .group .unit:last-child{ margin-bottom: 1%;}
.menu_list.second .menua .group .unitA .unit .or{z-index: 1; font-size: 80%; line-height: 100%; padding: 4px 5px 2px; position: absolute;background-color: #dd6f6f; color: #ffffff; bottom: 0; transform: translateY(60%);}

.menu_list.second .menua .group.s{ width: 32.2%; margin-right: 1.7%;}
.menu_list.second .menua .group.s:last-child{margin-right: auto;}
.menu_list.second .menua .group.s .title b{font-size: 70%;}
.menu_list.second .menua .group.s .unitA .unit{ width: 100%; margin-right: auto; margin-bottom: 2%;}
.menu_list.second .menua .group.s .unitA .unit:last-child{ margin-bottom: auto;}

@media screen and (max-width:1366px) {
.menu_list .menua .group .title{font-size: 160%;}
.menu_list .menua .group{ padding:  20px 20px 20px;}
}

@media screen and (max-width: 720px) {
.menu_list,.menu_list.second { padding: 8% 5%;}
.menu_list .menua .group{width: 100%; margin-right: 0%; margin-bottom: 8%; padding:  20px 30px 30px;}
.menu_list .title .s{position:relative; display: block; font-size: 55%; color: #bd9f5e; bottom: 5px; margin-left: 0;}
.menu_list.second .menua .group{ width:100%; margin-right: auto; padding:  20px 20px 20px;}
.menu_list.second .menua .group.s{ width: 100%; margin-right: auto;}
.menu_list.second .menua .group .title{ background-color: rgba(110,77,58,0.3);}

.menu_list.second .menua .group .unitA .unit{ margin-right: 2%;}
}

/*部落格*/
.blog { position: relative; padding: 2% 3% ; text-align: center; max-width: 1366px; margin: auto;}
.blog.list{ max-width: 1200px; padding: 3% 3% ;}
.blog .listA{ position: relative; flex-wrap: wrap; flex-direction:column; margin: auto; justify-content:center; width: 100%; max-width: 1366px; box-sizing: border-box;}
.blog .listA.type{ text-align: right; justify-content: flex-end; box-sizing: border-box; margin-bottom: 1%; }
.blog .listA.type a.back{ white-space: nowrap; right: 0%; color: #777777; padding: 7px 35px; border: 1px #999999 solid;}
.blog .title{ position: relative; font-size: 200%; font-weight: 200; text-align: center; color: #c09d5b;}
.blog.list .title { font-size: 280%; font-weight: 200; text-align: center; color: #555555; margin-bottom: 3%;}
.blog.list a{ display: block; font-size: 130%; color: #666666; text-align: left; padding: 15px 25px;; margin-bottom: 4%; }
.blog.list a b{ color: #c09d5b; margin-right: 15px;}
.blog.list a:hover{background-color: #eeeeee; color: #333333;} 
.blog.list a:hover b{ color: #a1792c; }
.blog.list a .ctime{font-size: 65%; white-space: nowrap; color: #bbbbbb; margin-top: 8px;}
.blog.list a i{margin-right: 5px;}
.blog.list a .info{ display: flex; box-sizing: border-box; font-size: 75%; margin-top: 10px; align-items: center; margin-bottom: auto;}
.blog.list a .info .pic { display: flex;width: 100%;  margin-right: 10px; min-height: 100px;}
.blog.list a .info .pic div{ flex: 1; background-repeat: no-repeat; background-size: cover; background-position: center;}


.blog .date{color: #999999;}
.blog .date i{margin-right: 5px;}
.blog .sharebnt{ font-size: 40px; display: flex; justify-content: center; align-items: center;  right: 0;}
.blog .sharebnt a{margin-left: 10px; display: flex; justify-content: flex-start; align-items: flex-start; }
.blog .sharebnt a:first-child{margin-left: auto;}
.blog .sharebnt .fa-line{ color: #11b111;}
.blog .sharebnt .fa-facebook-square{ color: #5a81b8;}
.blog .sharebnt .fa-weixin{display: flex; justify-content: center; align-items: center; width: 36px; height: 36px;  background-color: #2ec101;color: #ffffff; border-radius: 5px; font-size: 60%;}
.blog .info{ font-size: 105%; line-height: 160%; width: 100%; margin: 1% auto 3%; max-width: 1366px; text-align: center;}
.blog .info img {max-width: 100%; margin-top: 15px; margin-bottom: 15px;}
/*.blog .info iframe { margin-top: 15px; width: 100%;max-width: 100%; height: 40vw;}//*/
.blog .info iframe { margin-top: 15px; max-width: 100%; }
.blog .info a{ color: #bd9f5e; border-bottom: 1px #bd9f5e solid;font-weight: 600;}
.blog .info strong,
.blog .info b{ color: #bd9f5e;}

@media screen and (max-width: 720px) {
.blog { position: relative; padding: 5% 3% ;}
.blog.list{ padding: 8% 3% ;}
.blog.list a{ padding: 4% 0 5%; font-size: 130%;}
.blog.list a:hover{background-color:inherit;}
.blog.list a .ctime{margin-top: 6px;}
.blog.list a .info{ flex-direction: column; margin-top: 7px; }
.blog.list a .info .pic{height: 100px; margin-bottom: 7px; margin-right: auto;}
.blog .listA.type { margin-bottom: 5%;}
.blog .title{ text-align: left; line-height: 120%; margin-bottom: 10px;}
.blog .date{ text-align: left; }
.blog .info{ margin: 3% auto 6%;}
.blog .info iframe{width: 106%; max-width: 106%; margin-left: -3%; height: 54vw;}
.blog .info img {width: 106%; max-width: 106%; margin-left: -3%;}
}

/*關於我們*/
.about { position: relative; max-width: 1100px; padding: 3% 3% ; margin: auto;}
/*.about .title{ font-size: 280%; font-weight: 200; text-align: center; color: #555555; margin-bottom: 3%;}//*/
.about .title{ font-size: 280%; font-weight: 200; text-align: center; margin-bottom: 3%;}
.about .info{ font-size: 105%; line-height: 160%; width: 100%; margin: 1% auto 3%; max-width: 1366px; text-align: left;}
.about .info img {max-width: 100%; margin-top: 15px; margin-bottom: 15px;}
.about .info iframe { margin-top: 15px; width: 100%;max-width: 100%; height: 40vw;}
/*.about .info a{ color: #bd9f5e; border-bottom: 1px #bd9f5e solid;font-weight: 600;}//*/
.about .info a{ border-bottom: 1px #bd9f5e solid;font-weight: 600;}
.about .info strong,
/*.about .info b{ color: #bd9f5e;}//*/
.about .info b{ }
@media screen and (max-width: 720px) {
.about{ padding: 8% 3% ;}
.about .info{ margin: 5% auto 6%;}
.about .info iframe{width: 106%; max-width: 106%; margin-left: -3%; height: 54vw;}
.about .info img {width: 106%; max-width: 106%; margin-left: -3%;}
}

/*聯絡我們*/
.contact{ position: relative; max-width: 1100px; padding: 3% 3% 0; margin: auto;}
.contact .title{ position: relative; font-size: 280%; font-weight: 200; text-align: center; color: #555555; margin-bottom: 1.2%;}
.contact .title .s{position: absolute; font-size: 55%; color: #bd9f5e; bottom: 5px; margin-left: 10px;}
.contact .fromtab{ display: flex; font-size: 105%; max-width:700px; padding: 5% 5% 3%; background-color: #eeeeee; margin: auto; flex-wrap: wrap; justify-content: center; align-items: flex-start; box-sizing: border-box; margin-bottom: 3%;}
.contact .fromtab .tdL{width: 100%; line-height: 100%; margin-bottom: 5px; text-align: left; font-size: 95%; font-weight: 400; box-sizing: border-box;}
.contact .fromtab .tdL .s{ display: inline-table; white-space: nowrap; font-size: 75%; margin-left: 15px; color: #B96163;}
.contact .fromtab .tdR{ display: flex; width: 100%; margin-bottom: 10px;}
.contact .fromtab .tdR textarea,
.contact .fromtab .tdR input{ box-sizing: border-box;outline: none; padding:7px 5px; font-size: 100%; border: 0; border-bottom: 1px #bbbbbb solid; color: #356994; font-weight: 400; background-color: #ffffff; margin-bottom: 3px; flex: 80;}
.contact .fromtab .tdR input:focus{ border-bottom: 1px #000000 solid;}
.contact .fromtab .tdR textarea{height: 100px;}
.contact .fromtab .submit{width: auto;  padding:12px 80px; font-size: 105%; font-weight: 600; cursor:pointer;background-color: #c09d5b; border: 1px #c09d5b solid; color: #ffffff;-webkit-appearance:none; }
.contact .fromtab .submit:hover{ background-color: #916e2c;}
@media screen and (max-width: 720px) {
.contact{ padding: 8% 0% 0;}
.contact .title{ margin-bottom: 2%;}
.contact .title .s{position:relative; display: block; font-size: 55%; color: #bd9f5e; bottom: 5px; margin-left: 0;}
.contact .fromtab{  font-size: 110%; margin-bottom: 5%; }
.contact .fromtab .tdR textarea{height: 100px;}
.contact .fromtab .tdR input{height: 40px; line-height: 40px;}
}

.bc0{ background-color: #aaaaaa;}
.bc0::before{ border-bottom-color:#999999; }
.bc1{ background-color: #ccb686;}
.bc1::before{ border-bottom-color:#ac935c; }
.bc2{ background-color: #cfa7a1;}
.bc2::before{ border-bottom-color:#ae7a72; }
.bc3{ background-color: #86accc;}
.bc3::before{ border-bottom-color:#587fa0; }
.bc4{ background-color: #9e86cc;}
.bc4::before{ border-bottom-color:#765da4; }
.bc5{ background-color: #85a976;}
.bc5::before{ border-bottom-color:#577949; }
.bc6{ background-color: #76a79a;}
.bc6::before{ border-bottom-color:#4f8174; }
.bc7{ background-color: #caa483;}
.bc7::before{ border-bottom-color:#a27d5c; }

.footer{ position: relative; display: flex; height: 20%; justify-content: center; align-items: center; box-sizing: border-box; border-bottom: 7px #c09d5b solid; font-size: 115%; text-align: center; background-color: #22323f; color: #ffffff;}
.footer .w1{color: #c09d5b;}
.footer .gotop{ position: absolute; display: flex; align-items: center; justify-content: center; border: 2px #ffffff solid; width: 45px; height: 45px;border-radius: 50%;  right: 3%; color: #ffffff; font-size: 150%; top:1vw; line-height:100%; box-sizing: border-box; padding: 0;}

@media screen and (max-width: 720px) {
.footer{ font-size: 105%;height: 30%}
.footer .gotop{ top:3%;}
}

.floatMenu{display: flex; flex-direction:column; position: fixed; right: 10px; bottom: 10px; font-size: 85%;}
.floatMenu a{display:flex;  position: relative; flex-direction:column; width: 65px; height: 65px; border-radius: 50%; justify-content: center; align-items: center; color: #ffffff; background-color: #aaaaaa; margin: 1px; border: 0px rgba(255, 255 ,255 ,0.3) solid; box-sizing: border-box;}
.floatMenu a>i{display: block; font-size: 170%;}
.floatMenu a>b{position: absolute; display: flex; font-size: 16px; align-items: center; justify-content: center; line-height: 18px; width: 18px; height: 18px; right: 0; top: 0; border-radius: 50%; background-color: #FF0000;  color: #ffffff;}
.floatMenu a.car{ background-color: #c87474; padding-top: 3px;}
.floatMenu a.record{ background-color: #7ba9ad; padding-top: 3px;}
.floatMenu a.maket{ background-color: #917ecb; padding-top: 3px;}
.floatMenu a.line{font-size: 160%; background-color: #00c854;}
.floatMenu a.messeng{font-size: 150%; background-color: #0080f7;}
.floatMenu a.logout{ padding-top: 3px;}
.floatMenu a.gotop{font-size: 110%; background-color: #6e6e6e;}

/*
@media screen and (max-width:1170px){
.floatMenu a{width: 60px; height: 60px;}
.floatMenu a>b{ height: 20px; width: 20px; line-height: 20px; right: auto;top: -5px; transform: translateX(100%);}
}
@media screen and (max-width:870px){
.floatMenu{ flex-direction:row; width: 100%; right: auto; bottom: 0; background-color: aqua;}
.floatMenu a{border-radius: 0; height: 55px; flex: 1; width: auto; margin: auto;}
}
//*/

.floatBg{height: 0px; width: 0px;}
.floatBg.open{position: fixed; display: flex; align-items: center; top: 0; width: 100%; height: 100%;box-sizing: border-box; background-color: rgba(0,0,0,0.5); z-index: 2;}
.floatBg>.floatMain{position: relative; max-height: 95%; width: 90%; max-width: 1000px; background-color: #ffffff; margin: auto; box-sizing: border-box; box-shadow: 2px 2px 6px #000000; overflow: auto; padding: 70px 0 50px;}

.floatBg>.floatMain>.close{ position: fixed; display: flex;height: 70px; background-color: #ffffff; margin-top: -70px;justify-content: flex-end; width: 90%; max-width: 1000px;  box-sizing: border-box; z-index: 1;}
.floatBg>.floatMain>.close>a{display: block; text-align:center; font-size: 220%;background-color: #AB484A; color: #ffffff; width: 40px; height: 40px; }
.floatBg>.floatMain>.close>a>i{line-height: 40px;}

.floatBg>.floatMain>.Main>.title{ position: fixed;width: calc(90% - 80px); margin-top: -70px; max-width: 920px;  font-size: 150%; display: flex;height: 70px; align-items: center; justify-content: center;  box-sizing: border-box; color: #999999; font-weight: 600; background-color: #ffffff; z-index: 1;}

.floatBg>.floatMain>.Main{padding: 0 40px; }
@media screen and (max-width:870px){
.floatBg>.floatMain>.Main>.title{ width: calc(90% - 62px);}
.floatBg>.floatMain>.Main{padding: 0 22px; }
}

.floatBg>.floatMain>.Main>.item {display: block;position: relative; margin-bottom: 10px; width: 80%; max-width: 500px; margin:auto auto 10px;}
.floatBg>.floatMain>.Main>.item input {width: 100%; box-sizing: border-box; padding: 21px 10px 4px;font-size: 110%;outline: none;border: 1px solid #c3c3c3;background-color: #f5f5f5;}
.floatBg>.floatMain>.Main>.item input.login_valid{width: 50%; margin-right: 1px;}
.floatBg>.floatMain>.Main>.item a.send{background-color: #7787ac; color: #ffffff; padding: 5px 10px; box-shadow:2px 2px 3px #aaaaaa; }
.floatBg>.floatMain>.Main>.item a.send.is{background-color: #aaaaaa; }
.floatBg>.floatMain>.Main>.item .second{color: #ff0000; margin-left: 6px;}
.floatBg>.floatMain>.Main>.item label{position: absolute; left: 10px;font-size: 95%;top: 2px; color: #999999;}
.floatBg>.floatMain>.Main>.item.w{ color: #666666; margin-top: 10px;}
.floatBg>.floatMain>.Main>.item.w.joinus{margin-top: 50px; padding-top: 15px; border-top: 1px #dddddd solid;}
.floatBg>.floatMain>.Main>.item.w input.JoinusBtn{display: flex;height: 40px; align-items: center; justify-content: center; line-height: 1; width: 100%; text-align: center; max-width: 500px; margin: auto; font-size: 110%;outline: none; border: 0; background-color: #b39b78; padding: 0; color: #ffffff; box-shadow: 2px 2px 5px #aaaaaa; cursor: pointer; margin-bottom: 10px;}
.floatBg>.floatMain>.Main>.item.w a{display: flex;height: 40px; align-items: center; justify-content: center; line-height: 1; width: 100%; text-align: center; max-width: 500px; margin: auto; font-size: 110%;outline: none; border: 0; background-color: #b39b78; padding: 0; color: #ffffff; box-shadow: 2px 2px 5px #aaaaaa; cursor: pointer; margin-bottom: 10px;}
.floatBg>.floatMain>.Main>.item.w a i{font-size: 140%; margin-right: 5px;}
.floatBg>.floatMain>.Main>.item.w a.loginBtn{background-color: #b96464;}
.floatBg>.floatMain>.Main>.item.w a.fb{background-color: #4b7fc2;}
.floatBg>.floatMain>.Main>.item.w a.line{background-color: #069906;}
@media screen and (max-width:870px){
.floatBg>.floatMain>.Main>.item{width: 100%;}
}

.floatBg>.floatMain>.Main .noRecord{display: flex; height: 200px; align-items: center; justify-content: center; color: #ff0000; font-size: 120%; font-weight: 600;}
.floatBg>.floatMain>.Main .recordList{display: flex; flex-direction: column; border: 1px #d3d3d3 solid; margin-bottom: 50px;}
.floatBg>.floatMain>.Main .recordList:last-child{ margin-bottom: auto;}
.floatBg>.floatMain>.Main .recordList .top{padding: 10px;display: flex; align-items: center; justify-content: space-between; background-color: #b39b78; color: #ffffff; }
.floatBg>.floatMain>.Main .recordList .top .state{background-color:#ffffff; color: #333333; border-radius: 0px; padding: 1px 8px; font-weight: 600; font-size: 95%; }
.floatBg>.floatMain>.Main .recordList .top .state.r{color: #ff0000; }
.floatBg>.floatMain>.Main .recordList .top .state.g{color: #039803}
.floatBg>.floatMain>.Main .recordList .product{display: flex;align-items: center; justify-content:space-between; border-bottom: 1px #d3d3d3 solid; padding: 10px; }
.floatBg>.floatMain>.Main .recordList .product div:nth-child(1){color: #ab926c;width: 80%;}
.floatBg>.floatMain>.Main .recordList .product div:nth-child(1) b{font-size: 90%; font-weight: 400; margin-left: 5px;}
.floatBg>.floatMain>.Main .recordList .product div:nth-child(2){color: #888888;white-space: nowrap;padding: 0 10px; width: 10%}
.floatBg>.floatMain>.Main .recordList .product div:nth-child(2) b{font-size: 110%; font-weight: 400;}
.floatBg>.floatMain>.Main .recordList .product div:nth-child(3){color: #d98d8e; font-size: 90%;white-space: nowrap; width: 10%}
.floatBg>.floatMain>.Main .recordList .product div:nth-child(3) b{font-size: 120%; font-weight: 400; margin-left: 3px;}
.floatBg>.floatMain>.Main .recordList .amount{background-color: #f9f9f9; border-bottom: 1px #d3d3d3 solid; padding: 10px 2.5%; text-align: right; color: #666666;}
.floatBg>.floatMain>.Main .recordList .amount b{font-weight: 400; font-size: 120%; margin-left: 3px; color: #CB5658;}
.floatBg>.floatMain>.Main .recordList .amount i{font-weight: 400;font-style:normal; font-size: 90%; margin-left: 5px; color: #CB5658;}
.floatBg>.floatMain>.Main .recordList .info{display: flex; flex-direction: row; flex-wrap: wrap; padding: 10px 20px 0;}
.floatBg>.floatMain>.Main .recordList .info>div{width: 50%; color: #666666; padding: 3px 0;}
.floatBg>.floatMain>.Main .recordList .info>div.address{width: 100%;}
.floatBg>.floatMain>.Main .recordList .info>div>b{font-weight: 400; font-size: 90%; color: #999999;display: inline-block; min-width: 70px;}
.floatBg>.floatMain>.Main .recordList .buyinfo{display: flex; flex-direction:column; padding: 0 20px 10px;}
.floatBg>.floatMain>.Main .recordList .buyinfo>div{ color: #666666; padding: 3px 0;}
.floatBg>.floatMain>.Main .recordList .buyinfo>div>b{font-weight: 400; font-size: 90%; color: #999999;display: inline-block; min-width: 70px;}
.floatBg>.floatMain>.Main .recordList .buyinfo .successW{color: #d10000; margin-left: 5px;}
.floatBg>.floatMain>.Main .recordList .buyinfo .successW i{margin-right: 3px;}
.floatBg>.floatMain>.Main .recordList .W a{ display: inline-table; padding: 3px 10px; margin-right: 5px; box-shadow: 2px 2px 3px #aaaaaa; background-color: #CC5658; color:#ffffff;}
.floatBg>.floatMain>.Main .recordList .W{width: 100%;}
.floatBg>.floatMain>.Main .recordList .atmW{width: 100%; display: flex;}
.floatBg>.floatMain>.Main .recordList .atmW>div:first-child{font-weight: 400; font-size: 90%; color: #999999;display: inline-block; min-width: 70px;}
.floatBg>.floatMain>.Main .recordList .atmW>div:nth-child(2){display: flex; width: 100%; flex-direction: column; background-color: #f9f9f9; color: #b83535; font-size: 100%;}
.floatBg>.floatMain>.Main .recordList .atmW>div:nth-child(2) div{display: flex; margin: 2px 0;}
.floatBg>.floatMain>.Main .recordList .atmW>div:nth-child(2) div b{font-size: 90%; font-weight: 400; min-width: 70px; display: block; color: #333333; text-align: right; margin-right: 7px;}

@media screen and (max-width:1366px){
.floatBg>.floatMain>.Main .recordList .info>div>b,
.floatBg>.floatMain>.Main .recordList .buyinfo>div>b,
.floatBg>.floatMain>.Main .recordList .atmW>div:first-child{min-width: 60px;}
}
@media screen and (max-width:870px){
.floatBg>.floatMain>.Main .recordList{ margin-bottom: 70px;}
.floatBg>.floatMain>.Main .recordList .product div:nth-child(2),
.floatBg>.floatMain>.Main .recordList .product div:nth-child(3),
.floatBg>.floatMain>.Main .recordList .atmW>div:first-child{width: auto;}
.floatBg>.floatMain>.Main .recordList div>b{width: 100%}
.floatBg>.floatMain>.Main .recordList .W a{ margin-top: 3px; }
.floatBg>.floatMain>.Main .recordList .atmW{flex-direction: column;}
.floatBg>.floatMain>.Main .recordList .atmW>div:nth-child(2){margin-top: 5px;}
.floatBg>.floatMain>.Main .recordList .atmW>div:nth-child(2) div b{min-width: 60px;width: auto;text-align: left; padding: 0 5px;margin-right:0;}

}

.Main.Login{display: none;}
.Main.Joinus{display: none;}
.Main.UserData{display: none;}
.Main.Order{display: none;}
.Main.Record{display: none;}