/* 共用 */
body { background:url("./images/bg_top.png")repeat-x top center; }
.title { font-size:1.875rem; color:#1b4c65; }
.mh4 { height:40px; }
.mh6,.mhpgn { height:60px; }
.nodata { text-align: center; padding:40px 0px; color:#919191; font-size:1.5rem; }
.nodata .emotion { font-size:6rem; padding-bottom:60px; }

.topbnr { padding-bottom:20px; }

/* 分頁 */
.pgn { text-align:center; }
.pgn .con { display: inline; position: relative; }
.pgn .page { display:inline-block; width:32px; height:32px; border-radius:50px; padding:5px 0px; font-family:Helvetica; }
.pgn .page a { color:#474747; }
.pgn .pbtn {  width:32px; height:32px; border-radius:50px; padding:9px 0px; background-color:#0067ba; color:#ffffff; font-size:0.875rem; border:none; }
.pgn .active { background-color:#00d7d4; color:#ffffff; }
.pgn .pbtn.nopage { background-color: #c6c6c6; }
.pgn .larr { position: relative; left:-60px; } 
.pgn .rarr { position: relative; right:-60px; }
.pgn .pbtn:not(.nopage):hover { background-color: #fa5f69; }

/* form */
form:not(.coform) { text-align: left; }
form label { color:#0067ba; }
form label .import { color:#fa5f69; }
form:not(.toplogin) input:not(.securityInput):not(.noitem):not(.search):not(#UseBonus):not(#PostNo):not(.chkInput),form textarea { width:100%; background-color:#fff; border:1px solid #f7cc3f; padding:8px 10px; margin-bottom:25px; color:#777777; }
form input#PostNo { background-color:#e2e2e2; border:none; width:100%;  padding:8px 10px; margin-bottom:25px; color:#777777; }
form textarea { resize:none; height:130px; }
form:not(.toplogin) .security { margin-bottom:25px; }
form .change { height:100%; border:none; background-color: transparent; color:#303030; white-space: nowrap; }
form .change:hover { color:#fa5f69; }
form .security img { height:42px; }
form .security .securityInput { width:100%; background-color:#fff; border:1px solid #f7cc3f; padding:8px 10px; color:#777777; }

input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin:0; }

/* select 改變按鈕圖示 */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
}

select:not(.dis) { 
    background: url("./images/arrow.png") no-repeat center center;
    background-position:calc(100% - 20px) 50%;
}

/* ie remove arrow */
select::-ms-expand {
    display: none;
}

/* 
form input:not(.noitem):not(.search),
form textarea { width:100%; background-color:#f7f0e7; border:1px solid #d9c7b3; padding:8px 10px; margin-bottom:25px; color:#777777; }
form .security { margin-bottom:20px; }
form .security input { width:30%; margin-bottom:0px; }
form .security .ib { display:inline-block;  }
form .security img { height: 100%; width:auto; margin:0px 30px; margin-top:-4px; }

form input.securityInput { margin-bottom:0px; }
*/
input.send,
button.send { width:100%; border:none; border-radius: 5px; background-color:#303030; color:#ffffff; padding:10px 0px; }
button.send:hover { background-color:#fa5f69; }
button.back { float:right; padding:10px 20px; background-color:#1b4c65; color:#fff; border-radius:5px; width:160px; border:none; }
button.back:hover { background-color:#0096f0; }
button.back i { font-size:1.5rem; float:left; } 

/* 公版 標題描述 */
.publicArea { padding:30px; border:1px solid #ffffff; margin:20px 0px 40px 0px; background-color: #ffffff; }
.publicArea .title { padding-bottom:30px; border-bottom:1px solid #e9ecef; }
.publicArea .subtitle { text-align:left; color:#474747; }

/* icon */
.plink .icon { float:left; padding:6px 0px; display:flex; flex-wrap: wrap; }
.plink .icon .pic { width:32px; height:32px; background-color:#1b4c65; color:#fff; text-align:center; padding:8px 0px; border-radius: 50px; margin-right:20px; }
.plink .icon .pic:hover { background-color:#0096f0; }
.plink .icon .lineImg { display: block; }
.plink .icon .lineImg img { height:16px; width:auto; }
.contactus .plink .icon .pic { margin:10px 20px 10px 0px; }
.plink .icon div { height:32px; width:32px; margin-right:5px; display:inline-block; }
.plink .icon .fb { background: url("./images/img_s1.png") no-repeat center center; background-size:cover; }
.plink .icon .ig { background: url("./images/img_s2.png") no-repeat center center; background-size:cover; }
.plink .icon .line { background: url("./images/img_s3.png") no-repeat center center; background-size:cover; }
.plink .icon .yt { background: url("./images/img_s4.png") no-repeat center center; background-size:cover; }
.plink .icon .twi { background: url("./images/img_s5.png") no-repeat center center; background-size:cover; }
.plink .icon .wc { background: url("./images/img_s6.png") no-repeat center center; background-size:cover; }
.plink .icon .wb { background: url("./images/img_s7.png") no-repeat center center; background-size:cover; }
/* .plink .back { float:right; padding:10px 20px; background-color:#0067ba; color:#ffffff; border-radius:5px; width:160px; border:none; } */
/* .plink .back .txt { float:left; } */
/* .plink .back:hover { background-color:#bd9f77; } */
/* .plink .back i { font-size:1.5rem; float:left; } */

/* ====== product_list ====== */
.bc .back { float:left; padding:22px 0px; font-size:0.875rem; }
.bc .back a { color:#0067ba; }
.bc .breadcrumb { background-color:transparent; justify-content: flex-end; padding:22px 0px; margin:0px; }
.bc .breadcrumb li { color:#474747; font-size:0.875rem; }
.bc .breadcrumb li::before { color:#cacaca; }
.bc .breadcrumb a { color:#0067ba; }

.product { padding:20px 0px 40px 0px; }
.product .classname { margin:10px 0px; border-top:1px solid #f1f1f1; justify-content: center; border-bottom:1px solid #f1f1f1; }
.product .classname.row { margin-left:0px; margin-right:0px; }
.product .classname .cls { padding:20px 5px; }
.product .classname a { color:#0067ba; text-decoration: none; padding-bottom:3px; }
.product .classname a:hover { color:#fa5f69; border-bottom:2px solid #fa5f69; }
.product .classname select,
.product .classname i { display:none; }

.product .search .items { display: flex; margin-top:25px; }
.product .search .items .item1 { width:255px; }
.product .search .items .item2,.product .search .items .item3 { width:160px; }
.product .search .items .slash { width:30px; color:#f7cc3f; padding:13px; }

.product .list table { width:100%; }
.product .list table th { background-color:#1b4c65; color:#fff; padding:10px; font-weight: normal; font-size:0.875rem; }
.product .list table tr { border-bottom:1px solid #cceafc; }
.product .list table tr:nth-child(odd) { background-color:#f2fafe; }
.product .list table td { padding:10px; }

.product .list table .thpd { text-align:left; }
.product .list table .tdpd { color:#1b1b1b; }
.product .list table .tdpd a { color:#1b1b1b; }
.product .list table .tdpd a:hover { color:#0067ba; }
.product .list table .tdpd .img { width:80px; height:80px; position:relative; float:left; }
.product .list table .tdpd .des { float:left; text-align:left; padding-left:10px; width:calc(100% - 80px); }
.product .list table .tdpd .des .cont { padding-top:20px; font-size:0.875rem; color:#919191; }
.product .list table .tdpd .des .cont .dot { display: inline-block; width:5px; height:5px; border-radius: 5px; margin:3px 0px; margin-right:10px; }
.product .list table .tdpd .des .cont .dot.dot1 { background-color:#0096f0; }
.product .list table .tdpd .des .cont .dot.dot2 { background-color:#f7cc3f; }

.product .list table .num { color:#00b0be; }
.product .list table .stock { color:#6bb226; }
.product .list table .nostock { color:#fa5f69; }
.product .list table .buybtn { border:none; border-radius:5px; background-color:#f7cc3f; color:#1b4c65; padding:8px 0px; font-size:0.875rem; width:100%; }
.product .list table .buybtn.ting { cursor: default; }
.product .list table .buybtn:not(.ting):hover { background-color:#0096f0; color:#fff; }
.product .list table form input { padding:0px !important; }

.activity { padding:10px 0px; }
.giftprod .subt { color:#fa5f69; }
.giftprod .notice { font-size:0.875rem; color:#f00; }


/* ====== product_des ====== */
.pdes { padding:20px 0px 40px 0px; }
.pdes .content { display:flex; align-items:flex-start;  }
.pdes .content .inf { background-color: #fff; text-align: left; flex:1; margin-left:15px; }
.pdes .content .inf .i_cont { margin:30px; }
.pdes .content .inf .name { color:#303030; font-size:1.875rem; padding:0px 0px 16px 0px; }
.pdes .content .inf .price { padding:10px 0px; }
.pdes .content .inf .price1 { color:#fa5f69; }
.pdes .content .inf .offer { font-size:1.875rem; }
.pdes .content .inf .price2 { color:#ababab; }
.pdes .content .inf .origin { text-decoration: line-through; }

.pdes .content .inf .buyform .row select { margin-bottom:20px; }
.pdes .content .inf .buyform select { width:100%; margin:0px; padding:10px; background-color: #f3f3f3; border:1px solid #e2e2e2; color:#474747; }
.pdes .content .inf .f_btn { display:flex; justify-content: space-between; margin:10px 0px;  flex-wrap: wrap; }
/* .pdes .content .inf .buyform .f_btn .s_quantity { width:28.5%; padding:10px 5px; background-color: #f3f3f3; border:1px solid #e2e2e2; }
.pdes .content .inf .buyform .f_btn .addcar { width:37.5%;  margin:0px; border-radius: 5px; order:1; }
.pdes .content .inf .buyform .f_btn .follow { width:25%; border:none; background-color: #be9368; color:#ffffff; margin:0px; border-radius: 5px; order:2; } */
.pdes .content .inf .buyform .f_btn .addcar { width:calc(50% - 15px); margin:0px; border-radius: 5px; order:1; margin-bottom:25px; }
.pdes .content .inf .buyform .f_btn .follow { width:calc(50% - 15px); border:none; background-color: #0067ba; color:#fff; margin:0px; border-radius: 5px; order:2; padding:10px 0px; margin-bottom:25px; }
.pdes .content .inf .buyform .f_btn .item { border:none; background-color: #f7cc3f; color:#1b4c65; padding:10px 0px; }
.pdes .content .inf .buyform .f_btn .item:hover { background-color: #0096f0; color:#fff; }
.pdes .content .inf .buyform .f_btn .s_quantity.noitem { width:100%; }
.pdes .content .inf .buyform .f_btn .noitem { color:#474747; background-color:#e2e2e2; padding:10px; border:none; border-radius: 5px; margin-bottom:25px; }
.pdes .content .inf .buyform .f_btn .flexct { display:flex; display: -webkit-flex; display: -ms-flexbox; -webkit-box-orient: horizontal; justify-content: center; align-items: center; }
.pdes .content .inf .buyform .f_btn .follow:hover { background-color: #0096f0; color:#fff; }
.pdes .content .inf .des { padding-top:20px; }

.pdes .content .showimg { padding-left:0px; margin-right:15px; width:calc(50% - 15px); }
/* .pdes .content .showimg .b_img { background: url("./images/img_product1.jpg") no-repeat top center; background-size:cover; height:520px; } */
/* .pdes .content .showimg .pimg { display: flex; justify-content: flex-start; margin-top:30px;  } */
/* .pdes .content .showimg .pimg img { width:auto; height:65px; margin-right:30px; } */

.pdetail .content { margin-bottom:30px; padding:30px; background-color: #fff; border:1px solid #e9ecef;  }
.pdetail .content .tit { font-size:1.5rem; color:#1b4c65; background-color: #e2e2e2; border-top:1px solid #c6c6c6; padding:10px 0px; margin-bottom:30px; }
/* .pdetail .content .img { height:250px; } */
.pdetail .content .des { text-align: left; padding:10px 0px; }

/* ====== news ====== */
.news { padding:20px 0px 40px 0px; }
.news .new { margin-top:40px; padding:30px; border:1px solid #e9ecef; background-color: #fff; text-align: left; display:flex; }
.news .new .nc { border-right:1px solid #e9ecef; flex:4; padding-right:60px; }
.news .new .nc .newtitle { color:#0067ba; font-size:1.5rem; }
.news .new .nc .date { color:#ababab; margin-top:5px; margin-bottom:20px; font-size:0.8rem; font-family: Arial, Helvetica, sans-serif; }
.news .new .nc .content { color:#474747; line-height: 23px; word-break:break-all; }
/* .news .new .nc .content:after { content:'...'; text-align:right; position: absolute; bottom:0; right:0; width:10%; height:1.8em; background: linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,1) 50%); } */
.news .new .continue { color:#0067ba; flex:1; display:flex; justify-content: center; align-items:center; position: relative; }
.news .new .continue .arrow { position: absolute; right:0; top:50%; transform: translate(0,-50%); font-size:1.3rem; }

/* ====== news_content ====== */
.newscont { text-align: left; }
.newscont .date { color:#ababab; margin:5px 0px; font-size:0.8rem; font-family: Arial, Helvetica, sans-serif; }
.newscont .newtitle { color:#0067ba; font-size:1.5rem; padding-bottom:30px; border-bottom:1px solid #e9ecef; }
.newscont .img { margin-top:30px; }
/* .newscont .img { height:360px; background: url("./images/home_banner_4a.jpg") no-repeat center center; background-size:cover; margin:30px 0px; } */
.newscont .content { margin:40px 0px; color:#303030; word-break:break-all; }

.LinkArea { padding-top:40px; }
.LinkArea a { display: inline-block; padding-top:20px; color:#919191; }

/* ====== about ====== */
/* .about { padding:30px; border:1px solid #f7f0e7; margin:40px 0px; } */
/* .about .title { padding-bottom:30px; border-bottom:1px solid #f7f0e7; } */
.about img { margin-top:40px; }
/* .about .img { height:390px; background: url("./images/home_banner_4a.jpg") no-repeat center center; background-size:cover; margin:30px 0px; } */
.about .content { text-align: justify; margin-top:40px; }

/* ====== contactus ====== */
/* .contactus { padding:30px; border:1px solid #f7f0e7; margin:40px 0px; } */
/* .contactus .title { padding-bottom:30px; border-bottom:1px solid #f7f0e7; } */
.contactus .content { display:flex; margin-top:30px; text-align:left; flex-direction: row-reverse; }
.contactus .content > div { flex:1; }
.contactus .inf { padding-right:40px; }
.contactus .inf .company { background-color: #fff; border-left: 8px solid #1b4c65; padding:0px 10px; color:#8c695b; font-size: 1.25rem; }
.contactus .inf .pro { margin-top:30px; }
.contactus .inf .key { color:#0067ba; vertical-align: top; }
.contactus .inf .value { color:#474747; }
.contactus .inf .addr { display: inline-block; }
.contactus .inf .addr .gm a { color:#ffc107; text-decoration: underline; font-size:0.875rem; }
.contactus .inf .addr .gm a:hover { color:#fa5f69; }
.contactus .inf .follow { margin-top:30px; padding-top:20px; border-top:1px dotted #c6c6c6; }
/* .contactus .inf .follow .key { margin-bottom:10px; } */

.contactus .contform { padding-left:20px; }

.askus .contform { padding-left:0px; max-width:540px; margin:0px auto; }


/* ====== login ====== */
.lr_main { border:0px solid #fff; margin:80px auto; }
.lr_main .title { display:flex; background-color:#e9ecef; }
.lr_main .title a { flex:1; padding:15px; font-size: 1.5rem; color:#1b4c65; text-decoration: none; }
.lr_main .title .active { cursor: default; background-color: #ffffff; }
.lr_main .login,
.lr_main .join { background-color: #fff; padding:30px; text-align: left; }
.lr_main .join { display: none; }
.lr_main .join .content { margin-bottom:30px; color:#474747; }
.lr_main .lr_link { display: flex; justify-content: space-between; padding-top:20px; }
.lr_main .lr_link .check { flex:1; }
.lr_main .lr_link a { color:#0067ba; }
.lr_main .lr_link span { font-size:1.125rem; }
.lr_main .join .mhjoin { height:10px; }

/* ====== article ====== */
.article { margin-top:60px; margin-bottom:140px; }
.article .content { margin-top:30px; text-align: left; max-height:310px; overflow-y:scroll; width:100%; color:#474747; }
.article .check { text-align:left; color:#dc3545; margin:40px 0px; }

.article .agree { text-align:left; }
.article .agree button { background-color:#1b4c65; border:none; border-radius: 5px; color:#fff; padding:8px 0px; }
.article .agree button:hover { background-color:#0096f0; }

/* ====== join ====== */
.join .subtitle { padding:30px 0px; border-bottom:1px solid #faf5f2; }
.join .accountData , .join .memberData { text-align:left; display: flex; padding:16px 0px; border-bottom:1px solid #faf5f2;  }
.join .accountData .title , .join .memberData .title { flex-basis:286px; border-bottom:none; color:#1b4c65; font-family:"微軟正黑體","Microsoft JhengHei"; font-size:1.3rem;  }
.join .accountData .accountForm , .join .memberData .memberForm { flex: 1; }


.join .memberData.last { padding-bottom:0px; border-bottom:none; }
.contform select,
.memberForm select { width:100%; background-color:#fff; border:1px solid #f7cc3f; padding:8px 10px; margin-bottom:25px; }
/* .memberForm #PostNo { background-color:#e2e2e2; border:none; } */
.memberForm .birth { position: absolute; right:25px; top:45px; color:#474747; border:none; background-color:transparent; }

.memberForm .changeBtn { justify-content: flex-start; display: flex; }
.memberForm .changeBtn button { border:none; background-color: transparent; color:#0067ba; }
/* .memberForm .send { margin-top:25px; margin-bottom:0px; } */

/* ====== finishReg ====== */
.finishReg { margin-top:60px; margin-bottom:140px; }
.finishReg .cont1 { margin:30px 0px; color:#474747; }
.finishReg .cont1 .memName { font-size:1.3rem; }
.finishReg .cont2 { color:#474747; }
.finishReg .breadcrumb { justify-content: center; background-color:transparent;  }
.finishReg .breadcrumb .breadcrumb-item::before { color:#919191; }
.finishReg .breadcrumb a { color:#00a0e9; }
.finishReg .mhfin { height:350px; }

/* ====== memberMain ====== */
.memberMain .cont1 { margin-top:30px; margin-bottom:40px; }
.memberMain .feature { padding:30px 0px; text-decoration: none; cursor: pointer; }
.memberMain .feature .icon { color:#1b4c65; font-size:2rem; }
.memberMain .feature:hover > .icon { color:#0096f0; }
.memberMain .feature .fname { padding:15px 0px; color:#474747; }
.memberMain .feature .fname:hover { padding:15px 0px; color:#0096f0; }

/* pointModal */
#pointModal .modal-dialog { margin-top:8rem; }
#pointModal .modal-content { border-radius:10px; text-align:center; }
#pointModal .modal-header .mTitle { margin:0 auto; font-size:1.3rem; }
#pointModal .modal-header .close { position: absolute; right:20px; padding:20px; }
#pointModal .modal-body { padding:50px 0px; }
#pointModal .modal-body span { color:#d62828; }

/* levelModal */
#levelModal .modal-dialog { margin-top:8rem; }
#levelModal .modal-content { border-radius:10px; text-align:center; }
#levelModal .modal-header .mTitle { margin:0 auto; font-size:1.3rem; }
#levelModal .modal-header .close { position: absolute; right:20px; padding:20px; }
#levelModal .modal-body { padding:50px 30px; }
#levelModal .modal-body span { color:#d62828; }
#levelModal .modal-body .tip { margin-top:30px; color:#474747; font-size:0.875rem; }
#levelModal .modal-body .tip p { margin-bottom:5px; }

/* buyDesModal */
#buyDesModal .modal-dialog { margin-top: 6rem; width:100%; max-width:1140px; }
#buyDesModal .modal-header .mTitle { margin:0 auto; font-size:1.3rem; }
#buyDesModal .modal-header .close { position: absolute; right:20px; padding:20px; }
#buyDesModal .modal-content { border-radius: 10px; text-align: left; height:75vh; }
#buyDesModal .modal-body { padding:30px; }
#buyDesModal .modal-body .content { overflow-x: hidden; overflow-y:auto; position: absolute; top:30px; left:30px; right:30px; bottom:30px;  }

/* ====== forgetPwd ====== */
.forgetPwd .subtitle { padding-top:25px; }
.forgetPwd .forgetForm { padding-top:40px; }
.forgetPwd .forgetForm .send { margin-bottom:0px; }
.forgetPwd .subtitle .link { color:#00a0e9; }

/* ====== orderSearch ====== */
.orderSearch { margin-top:0px; }
.orderSearch .orderTable { display: table; width:100%; border-collapse: collapse; }
.orderSearch .orderTable .subject,
.orderSearch .orderTable .order { display: table-row; }
.orderSearch .orderTable .subject { background-color:#e2e2e2; color:#474747; }
.orderSearch .orderTable .order { border-bottom:1px dotted #c6c6c6; color:#474747; }
.orderSearch .orderTable .subject > div,
.orderSearch .orderTable .order > div { display: table-cell; padding:20px 15px; }

.orderSearch .orderTable .orderID { font-weight: bold; font-family:"Helvetica"; }
.orderSearch .orderTable .link { font-size:0.875rem; color:#919191; }
.orderSearch .orderTable .link a { color:#29abe2; }
.orderSearch .orderTable .price { font-size:0.875rem; color:#fa5f69; font-family:Helvetica; }
.orderSearch .orderTable .offer { font-size:1rem; font-weight:bold; } 

/* ====== orderDetail ====== */
.orderDetail { margin-top:0px;  }
.orderDetail .detailTable .table_th { padding-bottom:30px; line-height: 30px; color:#0067ba; }
.orderDetail .detailTable .table_th .title { padding-bottom:0px; border:none; color:#1b4c65; font-size:1.25rem; }
.orderDetail .detailTable .table_td { padding:20px 0px; }
.orderDetail .detailTable .table_td img { max-width:130px; }
.orderDetail .detailTable .table_td .des { color:#303030; padding-bottom:5px; }
.orderDetail .detailTable .table_td .ptype { color:#919191; font-size:0.875rem; }
.orderDetail .detailTable .table_td .price { font-weight: bold; font-family: "Helvetica"; }
.orderDetail .detailTable .table_td .price,
.orderDetail .detailTable .table_td .quantity { color:#474747; }
.orderDetail .detailTable .table_td .status { color:#d62828; }
.orderDetail .detailTable .table_td .price .origin { color:#919191; }

.bd1 { width:100%; border-bottom:1px solid #e9ecef; }
.bd2 { width:100%; border-bottom:1px solid #faf5f2; }
/* .orderBottom .bd1 { width:100%; border-bottom:1px solid #f7f0e7; } */
/* .orderDetail .detailTable .table_td { border-bottom:1px dotted #c6c6c6; } */
/* .orderDetail .detailTable .table_td:last-of-type { border-bottom:1px solid #f7f0e7; } */
/* price */
.orderDetail .sym { font-size:0.875rem; font-weight:normal; }
.orderDetail .amount { color:#fa5f69; font-weight: bold; font-family: "Helvetica"; font-size:1rem; }

/* .orderDetail .count { flex-direction: row-reverse; text-align: left; color:#474747; } */
.orderDetail .count .res { display: block; float:right; font-size:1rem; }
.orderDetail .point { color:#d62828; }
.orderDetail .count .point input { text-align:right; background-color:#f3f3f3; border:1px solid #e2e2e2; width:60px; padding:3px 5px; }
.orderDetail .area { border-bottom: 1px solid #e9ecef; padding:20px 0px; }
.orderDetail .area .sub { padding:3px 0px; }
.orderDetail .area.last { border:none; padding-bottom:0px; }
.orderDetail .remind { color:#d62828; font-size:0.875rem; }
.orderDetail .count .realPrice { font-weight: bold; color:#fa5f69; font-size:1.125rem; }
.orderDetail .count .realPrice #SumPrice { font-size:1.125rem; }

.orderDetail .ordertotal { margin:0px -15px; }
.orderDetail .count { width:50%; text-align: left; color:#474747; padding:0px 15px; }
.orderDetail .odTitle { padding:16px 0px 10px; color:#1b4c65; font-weight:bold; font-size:1.125rem; }

.bonusbd { padding:20px; border:6px solid #e9ecef; background-color:#fff; margin-bottom:40px; }
.bonusbd .remind { padding-top:20px; }
.bonusbd .remind.last { padding-top:10px; }

.orderBottom .title { border-bottom:none; }
.orderBottom .area { border-top:1px solid #e9ecef; text-align:left; }
.orderBottom .area .odTitle { padding:16px 0px 10px; color:#1b4c65; font-weight:bold; font-size:1.125rem; }
.orderBottom .area .content > div { line-height: 30px; }
.orderBottom .area .content .key { width:80px; color:#0067ba; }
.orderBottom .area .content .value { color:#474747; }
.orderBottom .area .content .value .none { color:#919191; }
.orderBottom .title { padding-bottom:30px; }
/* .orderBottom .orderStatus .area .status { color:#22b4a4; padding-bottom:30px; } */
.orderBottom .orderStatus .area .report .send { margin-bottom:0px; }
.orderBottom .orderData .content:not(:last-child) { padding-bottom:5px; }
.orderBottom .area { padding-bottom:30px; }
.orderBottom .orderData .area .content { display:table-row; }
.orderBottom .orderData .area .content > div { display: table-cell; word-break: break-all; }

/* ====== bottom checkbox ====== */
.orderBottom .ck { width:310px; margin:0 auto; }
.orderBottom .ckb { padding:30px 0px; color:#474747; text-align: left; }
.orderBottom .ckb a { color:#00a0e9; border-bottom:1px solid #00a0e9; }
.orderBottom .ckb a:hover { color:#00a0e9; }


/* ====== orderReturn ====== */
.orderReturn .content { max-width:730px; margin:0 auto; }
.orderReturn .content:not(.mainArea):not(.otherArea) { padding-top:30px; }
.orderReturn .content .number { color:#474747; font-family:"Helvetica"; font-weight:bold; padding-bottom:20px; }
.orderReturn .content .remind { color:#d62828; }
.orderReturn .content .oriway { color:#474747; }

/* ====== trace ====== */
.trace .tracepro { padding:20px 0px; }
.trace .tracepro .tpl { float:left; height:100%; }
.trace .tracepro .tpl img { width:130px; height:130px; }
.trace .tracepro .tpl .delete { padding-top:10px; }
.delete a { color:#474747; text-decoration: none; border-bottom:1px solid #474747; font-size:1rem; }
.delete a:hover { color:#fa5f69; border-bottom:1px solid #fa5f69; font-size:1rem; }
.delete a .del { font-size:0.875rem; }
.trace .tracepro .tpr { float:right; width:calc(100% - 130px); padding-left:30px; text-align: left; }
.trace .tracepro .tpr .price { font-size:0.875rem; font-family: "Helvetica"; margin-top:30px; }
.trace .tracepro .tpr .price .price1 { color:#fa5f69; }
.trace .tracepro .tpr .price .offer { font-size:1rem; font-weight: bold; }
.trace .tracepro .tpr .price .price2 { color:#ababab; }
.trace .tpbd { border-bottom:1px dotted #c6c6c6; }

/* ====== chginfo ====== */
.chginfo .memberForm { max-width:730px; margin:0 auto; padding-top:30px; }

/* ====== chgpass ====== */
.chgpass .memberForm { max-width:730px; margin:0 auto; padding-top:30px; }


/* checkout process pic */
.process { max-width:414px; width:100%; margin:0 auto; }
.process .bar { height:4px; width:100%; background-color: #fa5f69; position:relative; top:-13px; }
.process .steps { display: flex; justify-content: space-between; position: relative; z-index:2; }
.process .step { width:24px; height:24px; border-radius: 50px; border:3px solid #fa5f69; font-family: Helvetica,"微軟正黑體"; font-size:0.875rem; display: flex; justify-content: center; align-items: center; background-color:#fa5f69; color:#fff; }
.process .step .stepname { position: absolute; top:30px; color:#919191; width:80px; -moz-transform:translate(-35px); -ms-transform: translate(-35px); }
_::-webkit-full-page-media, _:future, :root .process .step .stepname { transform: translate(-35px); }  /*  only safari  */
.process .step.active { background-color:#fff; color:#fa5f69; }
.process .step.active > .stepname { color:#fa5f69; }



/* ====== cartList ====== */
.cartList { border:1px solid #fff; margin-bottom:40px; background-color: #fff; }
.cartList .processPic {  padding:30px 30px 50px; border-bottom:1px solid #e9ecef; }
/* .cartList .processPic img { max-width:690px; margin:0 auto; } */
.cartList .listDetail { padding:30px; }
.cartList .listDetail .selt { display:flex; justify-content: space-between; padding-top:15px; line-height:30px; }
.cartList .listDetail .total { display:flex; justify-content: space-between; padding-bottom:30px; }
/* .cartList .listDetail .total .tp { font-size:1.125rem; } */
.cartList .list .listDetail select { width:65px; padding:5px 10px; border:1px solid #e2e2e2; background-color: #f3f3f3; background-position:calc(100% - 10px) 50%; }
.cartList .list .listDetail .delete { padding-top:15px; }
.cartList .list .listDetail .selt .amount { padding:5px 0px; }
.cartList .list .listDetail .bottom { padding-bottom:0px; }
.cartList .list .listDetail .back {  padding:10px 0px; }
.cartList .list .listDetail .back a { color:#303030; }

/* ====== checkout ====== */
.checkout { margin-bottom:40px; }

/* ====== checkoutData ====== */
.checkoutData .memberData { border-bottom:1px solid #f7f0e7; }
.checkoutData .memberData .check { font-size:0.875rem; }
.checkoutData .memberData.payway { border:none; }
.checkoutData .memberData .txt { margin-bottom:25px; padding:8px 0px; }

/* ====== finishOrder ====== */
.finishOrder { padding:30px; text-align: left; }
.finishOrder .ftitle { color:#1b4c65; font-size:1.3rem; padding-bottom:30px; }
.finishOrder .content a { color:#00a0e9; text-decoration: underline; }

/* ====== orderError ====== */
.ordererror .error { max-width: 460px; margin: 0 auto; text-align: left; }
.ordererror .errtxt { padding:20px 0px; }
.ordererror .bd { border-bottom:1px solid #e9ecef; margin:20px 0px; }
.ordererror .remark { text-align: left; }

/* checkbox style */
.article .check { padding-left:35px; }
.check { display: block; position: relative; padding-left: 30px; margin-bottom: 0px; cursor: pointer; font-size: 1rem; overflow:hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.check input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }/* Hide the browser's default checkbox */
.checkmark { position: absolute; top: 4px; left: 4px; height: 16px; width: 16px; background-color: #eee; border-radius:3px; }/* Create a custom checkbox */
.check:hover input ~ .checkmark { background-color: #ccc; }/* On mouse-over, add a grey background color */
.check input:checked ~ .checkmark { background-color: #474747; }/* When the checkbox is checked, add a blue background */
.checkmark:after { content: ""; position: absolute; display: none; }/* Create the checkmark/indicator (hidden when not checked) */
.check input:checked ~ .checkmark:after { display: block; }/* Show the checkmark when checked */
.check .checkmark:after { left: 6px; top: 3px; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }/* Style the checkmark/indicator */


/* placeholder color */
::-webkit-input-placeholder{ color:#777777; }
/* ::-moz-placeholder { color:#777777; } */
/* ::-ms-input-placeholder{ color:#777777; } */

/* scrollbar */
.article .content::-webkit-scrollbar { width: 16px; } /* this targets the default scrollbar (compulsory) */
.article .content::-webkit-scrollbar-track { background-color: #e6e6e6; } /* the new scrollbar will have a flat appearance with the set background color */
.article .content::-webkit-scrollbar-thumb { background-color: #666666; } /* this will style the thumb, ignoring the track */
.article .content::-webkit-scrollbar-button { background-color: transparent; display: none; } /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

#buyDesModal .content::-webkit-scrollbar { width: 16px; } /* this targets the default scrollbar (compulsory) */
#buyDesModal .content::-webkit-scrollbar-track { background-color: #e6e6e6; } /* the new scrollbar will have a flat appearance with the set background color */
#buyDesModal .content::-webkit-scrollbar-thumb { background-color: #666666; } /* this will style the thumb, ignoring the track */
#buyDesModal .content::-webkit-scrollbar-button { background-color: transparent; display: none; } /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

::-webkit-scrollbar-corner {
    background-color: black;
} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */

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

@media (max-width:1198.98px) and (min-width:992px){
    /* ====== product_des ====== */
    select { background-position:calc(100% - 10px) 50%; }
    /* .pdes .content .inf .buyform { font-size:0.8rem; } */
    .pdes .content .showimg .b_img { height:430px; }

    /* ====== orderSearch ====== */
    .orderSearch .orderTable .order .link { font-size:0.8rem; }
    
    /* ====== orderDetail ====== */
    .orderDetail .detailTable .table_td .sym { font-size:0.8rem; }
    .orderDetail:not(.listDetail) .detailTable .table_td .price { font-size:0.875rem; }

    /* modal-dialog */
    #buyDesModal .modal-dialog { max-width:960px; }
}

@media (min-width:992px){
    .product .list table .show2 { display: none; }
}

@media (min-width:768px) and (max-width:991.98px){


    /* ====== product_des ====== */
    select { background-position:calc(100% - 10px) 50%; }
    .pdes .content .showimg .b_img { height:300px; }

    /* ====== contactus ====== */
    /* .contactus .inf .pro span { display:block; } */
    /* .contactus .inf .addr,
    .contactus .inf .online { font-size:0.8rem; } */
    /* .contactus .inf .plink .icon .pic { margin-right:3px; } */
    .contactus .contform .security input { width:100%; }
    /* .contactus .contform .security img { margin:15px 0px; margin-right:20px; } */
    /* .contactus .contform .security button { font-size:0.8rem; padding:0px; } */

    /* form */
    .login form .security .securityInput,
    .forgetPwd form .security .securityInput,
    .join form .security .securityInput { margin-bottom:0px; }



    /* ====== join ====== */
    .join .accountData .title , .join .memberData .title { flex-basis:180px; }

    /* ====== orderSearch ====== */
    .orderSearch .orderTable .order { font-size:0.8rem; }
    .orderSearch .orderTable .subject > div,
    .orderSearch .orderTable .order > div { padding:15px 5px; font-size:0.875rem; }
    /* .orderSearch .orderTable th,.orderSearch .orderTable td { padding:15px 5px; font-size:0.875rem; } */
    .orderSearch .orderTable .link { font-size:0.8rem; }
    .orderSearch .orderTable .price { font-size:0.8rem; }

    /* ====== orderDetail ====== */
    /* .orderDetail .detailTable .table_th .title { font-size:1.5rem;  } */
    /* .orderDetail .detailTable .table_td .ptype { font-size:1.3rem; } */
    /* .orderDetail .detailTable .table_td .des { font-size:1.5rem; } */

     /* ====== cartList ====== */
    /* .cartList .listDetail .total { font-size:1.3rem; } */
    /* .cartList .listDetail .sym { font-size:1.125rem; } */
    /* .cartList .listDetail .total .tp { font-size:1.5rem; } */

    /* modal-dialog */
    #buyDesModal .modal-dialog { max-width:720px; }
}

@media (max-width:991.98px){
    form .security .securityInput { margin-bottom:20px; }

    .product .list table .show1 { display: none; }
    .product .list table .tdpd .img { float:none; }
    .product .list table .tdpd .buybtn { margin-top:20px; padding:8px 0px; width:80px; }

    .product .list { margin-top:40px; }
    .product .list table .tdpd { display: flex; }
    .product .list table .tdpd .des { width:100%; }
    .product .list table .tdpd .des .info { margin-top:30px; }

    /* ====== contactus ====== */
    .contactus .inf .pro span { display:block; }
}

@media (min-width:768px){
    .pdes .md_top,
    .pgn .md_top { display:none; }

    /* ====== login ====== */
    .mhlog { height:150px; }
    .lr_main { max-width:540px; }

    /* ====== article ====== */
    .article .agree button { width:16%; margin-right:20px; }

    /* ====== join ====== */
    /* form .securityInput input { margin-bottom:0px; } */
    .join .memberData img { height: 42px; }
    /* .join form .col-12,.join form .col-8,.join form .col-7,.join form .col-6,.join form .col-5,.join form .col-4,.join form .col-2 { padding-left:8px; padding-right:8px; } */

    /* ====== forgetPwd ====== */
    .forgetPwd { max-width:540px; margin:0px auto; margin-bottom:40px; }

    /* ====== orderSearch ====== */
    .orderSearch .title { border:none; }
    .orderSearch .order .md_show { display: none; }

    /* ====== finishOrder ====== */
    .mhfin { height:300px; }
}

@media (max-width:767.98px){
    .bc .breadcrumb { display: none; }
    .bc .back { font-size:1.5rem; }
    button.back { width:100%; float:none; }
    .pshare button.back { width:160px; float:right; }
    .orderReturn button.back { padding:10px; width:100%; }

    /* page */
    .pgn .larr,.pgn .rarr { position: static; }
    .pgn .con { display:flex; justify-content: space-between; }
    .pgn .pbtn { width:60px; height:60px; font-size:1.5rem; padding:18px 0px; margin:0px; }
    .pgn .active { background-color: transparent;  color:#474747; font-weight: bold; width:auto; font-size:2rem; height:60px; font-family:"Microsoft JhengHei";  }
    .pgn .txt { padding:0px 10px; }
    .pgn .page:not(.active){ display:none; }

    /* form */
    /* form .security input { width:100%; } */
    /* form .security .ib { display: block; } */
    form .security img { width:100%; }
    /* form .send { margin-bottom:100px; } */
    /* form input.securityInput { width:100%; margin-bottom:20px; } */

    /* icon */
    .plink .icon .pic { margin-right:10px; }
    .plink:not(.pshare) .icon { float:none; }
    /* .plink .icon { display: flex; justify-content: center; flex-wrap: wrap; } */
    /* .plink .back { width:100%; } */

    
    /* ====== product_list ====== */    
    .topbnr { padding-top:80px; }

    /* .product { padding:40px; } */
    .product .classname div { display:none; }
    .product .classname select { display:block; width:100%; border:none; padding:15px; font-size:2rem; color:#0067ba; }
    /* .product .classname i { display:block; margin-right:20px; font-size:1.7rem; } */

    .newscont,.about,.contactus { margin-bottom:110px; }

    /* ====== product_des ====== */
    .pdes { padding: 0px; }
    .pdes .content { display:block; padding-top:40px; }
    .pdes .content .inf,
    .pdes .content .showimg { margin:0px; margin-bottom:40px; width:100%; }


    /* ====== news ====== */
    
    .news .new { display:block; }
    .news .new .nc { padding-right:0px; border-right:none; border-bottom:1px solid #e9ecef; }
    
    .news .new .nc .content { line-height: 23px; margin-bottom:30px; }
    .news .new .continue { justify-content: flex-end; padding-top: 30px; text-decoration: none; }
    .news .new .continue .arrow { position:static; transform:none; padding-left:20px; }

    /* ====== news_content ====== */
    .newscont .date { font-size:1.3rem; margin-bottom:20px; }
    .newscont .newtitle { font-size:2.5rem; }
    /* .newscont .img { height:500px; background:url("./images/home_banner_4b.jpg") no-repeat center center; background-size:cover; } */
    .newscont .content { font-size:1.5rem; }


    /* ====== contactus ====== */
    .contactus .content { display:block; }
    .contactus .inf,.contactus .contform { padding:0px; }
    /* .contactus .inf .pro span { display:block; } */
    /* .contactus .contform .security input { width:100%; }
    .contactus .contform .security .ib { display: block; margin-top:20px; }
    .contactus .contform .security img { margin:0px; margin-right:20px; }
    .contactus .contform .send { margin-bottom:100px; } */
    .contactus .contform .send { margin-bottom:60px; }
    /* ====== article ====== */
    /* .article .check input { margin-top:10px; } */
    .article .agree button { width:46.2%; }
    .article .agree button:nth-child(1) { float:left; }
    .article .agree button:nth-child(2) { float:right; }

    /* ====== join ====== */
    .join .accountData , .join .memberData { display: block; }
    .join .accountData .title , .join .memberData .title { text-align: left; font-size:1.5rem; }

    /* ====== finishReg ====== */
    .finishReg .cont2 { text-align: left; }
    .finishReg .breadcrumb { margin:50px 0px; }
    .finishReg .mhfin { height:50px; }

    /* ====== orderSearch ====== */
    .orderSearch .orderTable .subject { display: none; }
    .orderSearch .orderTable .order > div { display: block; padding:0px; }
    .orderSearch .orderTable .order .orderID { font-size:1.5rem; }
    .orderSearch .orderTable .order .date { color:#919191; padding:15px 0px; }
    .orderSearch .orderTable .order .link { font-size:1rem; padding-bottom:15px; }
    .orderSearch .orderTable .order .transport { padding-bottom:15px; }
    .orderSearch .orderTable .order .status { float:left; padding-bottom:15px; }
    .orderSearch .orderTable .order .price { float:right; }

    /* ====== orderDetail ====== */
    .orderDetail .detailTable .table_th .title { font-size:2rem; }
    .orderDetail .detailTable .table_td .prtable { display: table-row; }
    .orderDetail .detailTable .table_td .prtable .key { display: table-cell; white-space: nowrap; }
    .orderBottom .area .content .value { padding-bottom:10px; }
    /* .orderBottom .orderStatus .area .content { padding-bottom:30px; } */
    .orderBottom .orderData .area .content { display: block; }
    .orderBottom .orderData .area .content > div { display:block; }

    .orderDetail .count { width:100%; }
    .orderDetail .remind { text-align:left; }

    /* ====== orderReturn ====== */
    .orderReturn .content .mhor { height:40px; }

    /* modal-dialog */
    #buyDesModal .modal-dialog { max-width:540px; }
}



@media (max-width:767.98px){
    .mhpgn { height:40px; }
    .topbnr { padding-top:40px; }
    .title { font-size:1.5rem; }
    .nodata { padding:40px 0px; font-size:1rem; }
    .nodata .emotion { font-size:4rem; padding-bottom:40px; }
    .pshare button.back { width:105px; }

    .publicArea { padding:15px; }
    .publicArea .title { padding-bottom:15px; }
    /* form */
    form label { font-size:0.875rem; }
    form .security img { margin-right:5px; }

    /* icon */
    .plink:not(.pshare) .icon { margin-bottom:20px; }
    /* breadcrumb */
    .bc .back { font-size:1rem; }
    /* page */
    .pgn .pbtn { width:32px; height:32px; font-size:0.875rem; padding:9px 0px; }
    .pgn .active { font-size:1rem; height:32px; }

    .newscont,.about,.contactus { margin-bottom:60px; }

    /* ====== product_list ====== */
    .product .classname select { padding:10px; font-size:1.125rem; }
    
    .product .search .items { flex-wrap: wrap; }
    .product .search .items .item1,.product .search .items .item3 { width:100%; }
    .product .search .items .item2 { width:calc(50% - 15px); }

    

    /* ====== product_des ====== */
    /* .pdes .content .inf .buyform .f_btn .addcar { padding:10px 0px; } */

    /* ====== news_content ====== */
    .newscont .date { font-size:0.875rem; }
    .newscont .newtitle { font-size:1.5rem; }
    /* .newscont .img { height:375px; } */
    .newscont .content { font-size:1rem; }

    /* ====== contactus ====== */
    .contactus .inf .pro { margin-top:20px; }
    .contactus .inf .key { font-size:0.875rem; }
    /* .contactus .contform .security img { margin-right:5px; } */

    /* ====== login ====== */
    .lr_main .send { margin-bottom:40px; }

    .join form { font-size:0.875rem; }
    .memberForm .birth { top:42px; } 
    /* ====== orderDetail ====== */
    .orderDetail .detailTable .table_th { padding-bottom:15px; }
    .orderDetail .detailTable .table_th .title { font-size:1.75rem; }
    .orderDetail .area .sub { font-size:0.875rem; }
    .orderBottom .area .content .key { font-size:0.875rem; }
    .orderBottom .title { padding-bottom:15px; }
    .orderBottom .orderData .area { padding-bottom:40px; }
    /* .orderBottom .area .odTitle { padding:16px 0px 10px; } */

    /* ====== trace ====== */
    .trace .tracepro .tpl img { height:100px; width:100px; }
    .trace .tracepro .tpr { width:calc(100% - 100px); padding-left:15px; }

    /* ====== cartList ====== */
    .cartList .list .listDetail { padding:15px; }
    .cartList .listDetail .total .tp { font-size:1rem; }

    /* ====== checkout ====== */
    .checkout { margin:40px 0px; }

    /* ====== finishOrder ====== */
    .finishOrder .ftitle { padding-bottom:20px; }
    .finishOrder .content { padding-bottom:30px; }

    .process .step { font-size:0.7rem; }
}