@charset "utf-8";
@import url("reset.css");
@import url("loading.css");
@import url("fontawesome_all.css");
@import url("https://cdn.jsdelivr.net/npm/sweetalert2@11.7.1/dist/sweetalert2.min.css");

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> Main <<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; letter-spacing:1px; }
html { height:100% }
body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; -webkit-text-size-adjust:none; font-size:14px; overflow-y:scroll; overflow-x:hidden; }
body, td, th,select,input {font-size:12px;font-family: /*Arial,*/ "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "Microsoft JhengHei", "新細明體", "PMingLiU", sans-serif;color:#333333;}

/*簡易設定*/
.iframe_ch { display:none }
.middle { vertical-align:middle; }
.center { text-align:center; }
.w100{ width:100%; }

/*fix safari*/
input, select, textarea{ -ms-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; -webkit-box-sizing:content-box;}
input[type='text'],input[type='password'],input[type='button'],input[type='submit']{  -webkit-appearance: none; }

/*分頁*/
.pager{width:100%;overflow:hidden;margin: 10px auto 10px auto;text-align:center;}

/*編輯器*/
.editor{ padding:50px 0 20px 0; font-size:16px; line-height:30px; }

/*連結*/
a{ color:#000000;text-decoration:none; }
a:hover{ color:#506267; }

/*表格*/
#css-table { display:table; width:100%; }
.css-tr {display: table-row;}
.css-td {display: table-cell;text-align:left;vertical-align:middle;padding: 0px 10px;box-sizing:border-box;letter-spacing:1px;font-size:14px;color:#121212;}

/*網站標題*/
.b-title{
    color: #7c4322;
    border-bottom: 5px solid #d7cdb9;
    font-size: clamp(20px, 4vw, 30px);
    /* font-weight: bold; */
    margin: 0 0 10px 0;
}
.b-title img{
    vertical-align: middle;
    padding: 15px 15px 15px 0;
}

/*按鈕*/
.btn-1{display:inline-block;color:#FFFFFF;font-size: 18px;font-weight: bold;width:auto;padding: 10px 35px;margin:5px 0;border:0;letter-spacing: 3px;cursor:hand;cursor:pointer;background: #414141;outline:0;text-decoration:none;border-radius: 25px;}
.btn-1 i{ padding:0 5px;}
.btn-1:hover{background: #000000;color:#FFFFFF;transition: all 0.5s ease;}

@media screen and (max-width: 800px) {
	.none-m{ display:none; }
}
@media screen and (max-width: 468px) {
	.none-s{ display:none; }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Index <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

body{ background:#fff6eb; }
#wrapper{width:100%;max-width:900px;/*min-height:800px;*/margin:0 auto;padding: 0 20px 140px 20px;background:url(../../images/bg.png) no-repeat;background-size: contain;}
#header{width:100%;display:flex;border-bottom: 5px solid #5f3f3d;margin: 0 0 20px 0;}
#header .logo{ flex:1; }
#header .logo img{
    max-width: 200px;
    min-width: 130px;
    width: 70%;
    padding: 30px 0;
}
#header .welcome{flex:1;display: flex;align-items: flex-end;justify-content: flex-end;flex-direction: column;text-align: right;padding: 0 0 30px 0;color: #8a5d5b;font-weight: bold;font-size: clamp(14px, 4vw, 30px);}
#header .welcome span{
    padding: 10px 0;
    display: contents;
    font-size: clamp(14px, 4vw, 30px);
    color: #5f3e3c;
}
#header .welcome span i{font-size:clamp(14px, 4vw, 30px);}
#header .welcome i{margin: 10px 0;color: #5f3f3d;font-size: clamp(30px, 4vw, 40px);}
#header .welcome a{ color:#5f3f3d; }
#header .welcome img{
    max-width: 106px;
    width: 30%;
    margin: 10px 0 0 0;
}
#header .welcome span.return{display: inline-block;font-size: clamp(14px, 4vw, 20px);background: #8a5d5b;padding: 5px 8px;border-radius: 10px;margin: 0 0 5px 0;}
#header .welcome span.return i{font-size: clamp(14px, 4vw, 20px);margin: 0; color:#ffffff; }
#header .welcome span.return a{ color:#ffffff; }
#container{}
#container .frame{width:100%;background: #ffffff;padding: 10px 10px;box-shadow: 2px 2px 8px rgba(95,63,61,0.1);}

#menu{}
#menu .btn{
    position: relative;
    display: flex;
    align-items:center;
    /* justify-content: center; */
    margin: 1.5vw 0;
    background: #ffffff;
    box-shadow: 2px 2px 8px rgba(95,63,61,0.1);
    padding: 15px 15px;
	cursor:pointer;
}
#menu .btn:after{
  content: "";
  display: block;
  position:absolute;
  right:20px;
  top: 40%;
  width: 5%; /* 设置图片宽度为相对单位 */
  height: 30px; /* 自动计算图片高度，保持比例 */
  background-image: url(../../images/menu-arrow.png);
  background-size: contain; /* 控制背景图片的尺寸 */
  background-repeat: no-repeat;
}
#menu .img{
    width: 15%;
    max-width: 84px;
}
#menu .img img{
    width: 100%;
}
#menu .title{
    color: #7c4322;
    font-size: clamp(14px, 4vw, 30px);
    padding: 0 5vw;
    font-weight: bold;
}

#footer{background: #5f3f3d;position: fixed;bottom: 0;width: 100%;padding: 10px 0;}
#footer .wrap{display: flex;align-items:center;justify-content: space-between;width:100%;max-width: 900px;margin:0 auto;}
#footer .btn{
    flex: 1;
    display: flex;
    align-items:center;
    justify-content: center;
    flex-direction: column;
    color: #ffffff;
    font-size: clamp(14px, 4vw, 20px);
    padding: 0px 0 10px 0;
    font-weight: bold;
    cursor:pointer;
}
#footer .btn:not(:last-child){border-right: 1px solid #aa6c44;}
#footer .btn img{
    display: block;
    padding: 10px 0;
    width: 15%;
}

@media screen and (max-width: 468px) {
	#footer .btn img{ width:20%; }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 登入 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#login-area{width:100%;margin: 10px auto;overflow:hidden;padding:0 10px;box-sizing:border-box;/* background: #f9f6ec; */}
#login-area .input{cursor:hand;cursor:pointer;background:#f3f3f3;border:1px solid #d6d6d6;max-width: 450px;color:#323232;font-size:16px;letter-spacing:2px;margin: 15px auto 0px auto;padding: 5px 20px 5px 20px;-webkit-border-radius: 25px;-moz-border-radius: 25px;border-radius: 25px;}
#login-area .input input[type=text],#login-area .input input[type=password]{border:0;background:#F3F3F3;width: 100%;outline:0;font-size:14px;padding: 10px 0;letter-spacing:1px;color:#333;}
.login-content{width:100%;padding:15px 10px;font-size:16px;color:#222222;line-height:30px;text-align: center;/* background:#ffffff; */-webkit-border-bottom-right-radius: 10px;-webkit-border-bottom-left-radius: 10px;-moz-border-radius-bottomright: 10px;-moz-border-radius-bottomleft: 10px;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;}

.login-submit{ display:inline-block; border:1px solid #dadada; margin:30px auto; padding:12px 28px; letter-spacing:1px; color:#585858; font-size:16px; text-decoration:none; background:#ffffff; }

@media screen and (max-width : 480px) {
	#login-area .input span{ display:none; }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 線上下單 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#product-list .nav{position:relative;color: #464646;font-size: 14px;font-weight: bold;border: 1px solid #e2dbca;display: block;margin: 0 0 20px 0;}
#product-list .nav input[type='text']{box-sizing:border-box;padding: 0px 35px 0 10px;font-size:15px;letter-spacing:1px;color:#666;border:0;outline:0;width: 100%;height: 35px;}
#product-list select{box-sizing:border-box;width: 100%;padding: 5px 35px 5px 10px;font-size:15px;letter-spacing:1px;color:#666;border:0;outline:0;border: 1px solid #e2dbca;margin: 0 0 5px 0;}

#product-list .items {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #d7cdb9;
  flex-wrap: wrap;
}

#product-list .items .left {
  flex: 1;
  text-align: center;

}

#product-list .items .left img {
  width: 100%;
  max-width: 150px;
}

#product-list .items .center {
  flex: 3;







  padding: 0 10px;
  text-align: left;
}

#product-list .items .center .title {
  font-size: clamp(18px, 4vw, 30px);
  font-weight: bold;
  padding: 0 0 10px 0;
}

#product-list .items .center .content {
  font-size: clamp(14px, 4vw, 16px);
  color: #555;
  line-height: 25px;
}

#product-list .items .center .content span{}

#product-list .items .right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

#product-list .items .right .price {
  font-size: clamp(16px, 4vw, 30px);
  font-weight: bold;
  margin-bottom: 10px;
  color: #f4ab97;
}
#product-list .items .right .price a{color: #f4ab97;}

#product-list .items .right img {
  /* width: 30px; */
}
#product-list .items .right i { font-size:40px; color:#5f3f3d; }

@media (max-width: 480px) {
	#product-list .items .left{ /*flex:100%;*/ }
	#product-list .items .center .content span{/* display:block; */font-weight:bold;}
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 購物車 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#cart_num_area span{/* border: 1px solid #dbdbdb; */background: #9c885e;color: #ffffff;font-weight:bold;padding: 5px 10px;cursor:hand;cursor:pointer;}
#cart_num_area span:hover{ background:#bfa138; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }
#cart_num_area input[name='text']{border: 1px solid #dbdbdb;border-left:0;border-right:0;width:70px;height: 29px;text-align:center;font-size: 12px;background: #ffffff;outline: 0;}


.cart_step_area_m{ display:none; color:#888787; font-size:16px; letter-spacing:1px; text-align:center; margin:0 0 50px 0; }
.cart_step_area{ text-align:center; margin:0 0 50px 0;}
.cart_step{display:inline-block;width:32px;height:32px;line-height:32px;text-align:center;color:#FFF;font-size:15px;background: #9c885e;-webkit-border-radius:25px;-moz-border-radius:25px;border-radius:25px;}

#product_table{border-top: 3px solid #9c885e;}

#product_table th{border-bottom: 1px solid #9C885D;text-align:center;text-shadow:1px 1px #EBEBEB;color: #9C885E;font-size:16px;font-weight:bold;letter-spacing:1px;padding:10px 0;}
#product_table td{text-align:center;padding:10px 0;color:#505050;letter-spacing:1px;font-size:15px;line-height: 20px;border-bottom:1px solid #ebebeb;}
#product_table td.list{text-align:left;padding:10px;display:flex;align-items:center;}
#product_table td.list .p-img{float:left;}
#product_table td.list .p-title{float:left; min-height:70px; display:flex; align-items:center; flex:2}
#product_table td.list .p-num{}
#product_table td img{ margin:0 10px 0 0;}
#product_table input[type=text]{width:50px;height: 28px;border:0;text-align:center;font-size: 15px;outline:0;background: #f9f4eb;}
#product_table textarea{width:100%;height:50px; padding:10px; box-sizing:border-box; border:0;text-align:left;font-size: 15px;outline:0;background: #f9f4eb;}


.product_fee_area{width:100%;overflow:hidden;background: #E8DFCA;color:#505050;font-size:15px;letter-spacing:1px;padding: 15px 10px;border: 1px solid #9c885e;box-sizing:border-box;}
.product_fee_area_left{ float:left; width:40%; text-align:left; line-height:25px; }
.product_fee_area_right{float:left;width:100%;text-align: center;line-height:30px;}
.cart_number{ font-size:18px; color:#ff345a; font-weight:bold; }
.cart_price{color:#FF345A;font-size: 18px;font-weight:bold;}
.cart_tips{ display:inline-block; padding:3px 7px; background:#09a2e9; color:#fff; }
.cart_coupon_btn{padding:20px 0;text-align: center;}

@media screen and (max-width: 600px) {
	.cart_none{ display:none;}
	#product_table td.list .p-title{width:100%;min-height:inherit;margin: 10px 0;}
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 訂單查詢 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.memberbuy_title{background:#d7cdb9; color:#fff;}
.login_frame_content{ box-sizing: border-box; background:#FFF; }
.login_frame_content table th{ background:#ebebeb; padding: 15px 10px 15px 10px; font-size:14px; }
.login_frame_content table td{border:1px solid #f5f4f0;padding: 10px 10px 10px 10px;font-size:14px;word-break:break-all;line-height: 20px;}
.login_frame_content table td input[type="text"]{ border:1px solid #e9e8e8; width:80%; height:25px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; padding:5px 10px; font-size:14px; font:14px/18px 'Rosarivo', '微軟正黑體', sans-serif; color:#646464; }
.login_frame_content table td input[type="password"]{ border:1px solid #e9e8e8; width:80%; height:25px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; padding:5px 10px; font-size:14px; font:14px/18px 'Rosarivo', '微軟正黑體', sans-serif; color:#646464; }
.login_frame_content table td textarea{ border:1px solid #e9e8e8; width:80%; height:125px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; padding:5px 10px; }
.login_frame_content table td a{text-decoration:underline;color: #5f3f3d;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 網頁表單 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


.enrolment-form{width:100%; min-height:400px; }
.enrolment-form .form1{ width:100%; display:flex; }
.enrolment-form .form1 .left{flex:1;padding: 0 10px;}
.enrolment-form .form1 .right{ flex:1; display:flex; }
.enrolment-form .form1 .row{width:100%;display: flex;overflow: hidden;padding: 10px 0 0px 0;border-bottom: 1px dashed #d7cdb9;}
.enrolment-form .form1 .title{flex:1;display: flex;align-items:center;/*justify-content: flex-end;*/padding: 5px 5px 2px 5px;line-height:20px;font-size:16px;min-width: 75px;color:#282828;}
.enrolment-form .form1 .title span{ color:#C00; padding-right:5px; }
.enrolment-form .form1 .title img{ width:100%; }
.enrolment-form .form1 i{ color:#F00; padding-right:5px; }

/*內容欄位分配*/
.enrolment-form .form1 img{ vertical-align:middle; }
.enrolment-form .form1 .content{ flex:3; padding:10px; font-size:15px; line-height:22px; }
.enrolment-form .form1 .content2{flex: 6;padding: 2px 10px 15px 10px;font-size:15px;line-height:22px;}
.enrolment-form .form1 .content3{ flex:1.5; padding:10px; font-size:15px; line-height:22px; }
.enrolment-form .form1 .content4{ flex:7.5; padding:10px; font-size:15px; line-height:22px; }
.enrolment-form .form1 .tips{ background:#FFC; }

.enrolment-form .form1 input{ vertical-align:middle; }
.enrolment-form .form1 input[type='text'],.enrolment-form .form1 input[type='password'],
.enrolment-form .form1 input[type='file'],
.enrolment-form .form1 select,
.enrolment-form .form1 textarea
{width:100%;border:1px solid #dadada;background:#f5f5f5;padding: 8px 8px;margin:5px 0;box-sizing:border-box;font-size: 16px;}
.enrolment-form .form1 select{ max-width:300px; padding: 5px 8px; }

.align-start{ align-items:flex-start !important; }

.enrolment-caption{ width:100%; padding:15px 10px; color:#FFFFFF; font-size:15px; background:#329ED0; margin:20px 0 10px 0; }
.enrolment-border{ border:1px solid #EBEBEB; padding:10px; margin:20px 0; letter-spacing:1px; font-size:15px; line-height:22px; }
.enrolment-border i{ color:#F00; }

@media screen and (max-width : 1024px) {
	.enrolment-form .form1{ display:block; }
	.enrolment-form .form1 .row{/* display:block; *//* border-bottom:0; */}
	.enrolment-form .form1 .title{justify-content: flex-start;font-weight: bold;color: #9c885e;padding: 0px 0px 10px 0px;}
	
}

@media screen and (max-width : 768px) {
	.enrolment-step{ /*display:block;*/ }	
	.enrolment-step span{ width:100%; }
}

@media screen and (max-width : 480px) {
	.enrolment-form{padding: 0px 0px;}
	.enrolment-form .form1 .right{ display:block; }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Loadaction <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.Loadaction_Box { position:relative; height: 100%; width: 0%; position: fixed; overflow:auto; top: 0; left: 0; overflow:auto; background-color:rgba(0, 0, 0, 0.5); z-index:100000000 }
.Loadaction {width: 220px;height: 60px;top: 42%;position: absolute;margin-left: auto;margin-right: auto;padding-top: 10px;left: 0;right: 0;background-color:rgba(0, 0, 0, 0.5);-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;}
.Actionupload_Text {font-size:13px;color:#FFFFFF;height: 25px;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> pagelink <<<--------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.pageselect{border:1px solid #CCCCCC;padding: 4px 5px;font-size:12px;}
.pageselect:hover{ background:#ebebeb; }
a.pagelink_no{color:#333333;text-decoration:none;border: 1px solid #cccccc;padding: 7px 5px;display: inline-block;margin: 5px 0;}
a.pagelink_no:hover{ background:#ebebeb; }
a.pagelink{color:#333333;text-decoration:none;border: 1px solid #CCCCCC;padding: 5px 10px;}
a.pagelink:hover{ background:#ebebeb; }
a.pagelink_ch{color:#333333;padding: 5px 10px;border: 1px solid #cccccc;background: #ebebeb;text-decoration:none;}