/* ====== 共用樣式 ====== */
/* 內頁標題 */
.areaTIT { font-size:1.875rem; padding:15px 0px; background-color: #fff; font-family: "Arial","微軟正黑體","Microsoft JhengHei", serif; margin-top:20px ; }
/* 內頁外框 */
.areaCONT { border: 0px solid #fff; padding:30px; background-color:#fff; }

/* 聯絡我們 確認訂單 訂單明細 > 名稱 & 內容  */
.pubKey { color:#434343; margin-bottom: 4px; }
.pubValue { color:#919191; }

/* 下方外框 */
.bd1 { width:100%; border-bottom:1px solid #f1f1f1; }
.bd2 { width:100%; border-bottom:1px dotted #c6c6c6; }

/* 高度設定 */
.mh6,.mhpgn { height:60px; }
.mh2 { height:20px; }
.mh3 { height:30px; }
.bctop,.mh4 { height:40px; }

/* 無資料顯示 */
.nodata { text-align: center; padding:40px 0px; color:#919191; font-size:1.5rem; }
.nodata .emotion { font-size:6rem; padding-bottom:60px; }


.topbnr { padding:20px 0px; }

/* 分頁 */
.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; }
.pgn .page a { color:#262626; }
.pgn .pbtn {  width:32px; height:32px; border-radius:50px; padding:9px 0px; background-color:#262626; color:#ffffff; font-size:0.875rem; border:none; }
.pgn .active { background-color:#ffda00; color:#000; }
.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: #90120c; }

/* form */
form:not(.coform) { text-align: left; }
form label { color:#262626; }
form label .import { color:#90120c; }
form input:not(.securityInput):not(.search):not(#UseBonus):not(#PostNo):not(.chkInput),form textarea { width:100%; background-color:#f1f1f1; border:1px solid #e2e2e2; padding:8px 10px; margin-bottom:25px; color:#474747; }
form input#PostNo { background-color:#c6c6c6; border:1px solid #c6c6c6; width:100%;  padding:8px 10px; margin-bottom:25px; color:#474747; }
form .security .securityInput { width:100%; background-color:#f1f1f1; border:1px solid #e2e2e2; padding:8px 10px; color:#474747; }
form textarea { resize:none; height:130px; }
form .security { margin-bottom:25px; }
form .change { height:100%; border:none; background-color: transparent; color:#003049; white-space: nowrap; }
form .change:hover { color:#90120c; }
form .security img { height:42px; }

/* select 改變按鈕圖示 */
select { -webkit-appearance: none; -moz-appearance: none; background: url("./images/arrow.png") no-repeat center center; background-position:calc(100% - 20px) 50%; }


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

form select { width:100%; background-color:#f1f1f1; border:1px solid #e2e2e2; color:#474747; padding:8px 10px; margin-bottom:25px; }

/* icon */
.plink .icon { float:left; padding:6px 0px; display: flex; justify-content: flex-start; flex-wrap: wrap; }
.plink .icon .pic { width:32px; height:32px; background-color:#262626; color:#fff; text-align:center; padding:8px 0px; border-radius: 50px; margin-right:20px; }
.plink .icon .pic:hover { background-color:#90120c; color:#fff;  }
.plink .icon .lineImg .pic { display: block; background:url("./images/icon_line-c.png") no-repeat center center; background-size:16px; background-color:#262626; }
.plink .icon .lineImg .pic:hover { background:url("./images/icon_line-c.png") no-repeat center center; background-color:#90120c; background-size:16px; }
.plink.pshare .icon .pic { background-color:#262626; color:#fff; }
.plink.pshare .icon .pic:hover { background-color:#90120c; color:#fff; }
.plink.pshare .lineImg .pic { background-color:#262626; }

.contactus .plink .icon .pic { margin:10px 20px 10px 0px; }

/* ====== product_list ====== */
.mtop { height:80px; }
.bc .back { float:left; padding:20px 0px; font-size:0.875rem; }
.bc .back a { color:#474747; }
.bc .breadcrumb { background-color:transparent; justify-content: flex-end; padding:20px 0px; margin:0px; }
.bc .breadcrumb li { color:#919191; font-size:0.875rem; }
.bc .breadcrumb li::before { color:#e9ecef; }
.bc .breadcrumb a { color:#474747; }


/*.product { padding-bottom:40px; }*/
.product .classname { padding: 10px 0px; background-color: #fff; 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:10px 5px; }
.product .classname a { color:#808080; text-decoration: none; padding-bottom:3px; }
.product .classname a:hover { color:#262626; border-bottom:2px solid #262626; }
.product .classname select,
.product .classname i { display:none; }

.product .list .pd { margin:25px 0px; }
.product .list .pd .des .pdname { padding:15px 0px; font-size:1.25rem; }
.product .list .pd .des .price1 { font-size:0.875rem; }
.product .list .pd .des .offer { font-size:1.125rem; font-weight:bold; }
.product .list .pd .des .price2 { font-size:0.875rem; }
.product .list .pd .des .origin { text-decoration: line-through; }
.product .list .pd .des a { text-decoration: none; }
.product .list .pd .des a:hover .pdname { color: #e21b13; }

/* ====== product_des ====== */
.pdes { padding:20px 0px 40px 0px; }
.pdes .content { display:flex; align-items:flex-start;  }
.pdes .content .inf { text-align: left; flex:1; margin-left:15px; border:none; }
.pdes .content .inf .i_cont { margin:30px; }
.pdes .content .inf .code { color:#919191; font-size: 0.875rem; }
.pdes .content .inf .name { color:#262626; font-size:1.875rem; padding:8px 0px 8px 0px; }
.pdes .content .inf .price { padding:20px 0px 10px 0px; }
.pdes .content .inf .offer { font-size:2rem; }
.pdes .content .inf .origin { text-decoration: line-through; }

.pdes .content .inf .buyform select { margin-bottom:20px; width:100%; padding:10px; }
.pdes .content .inf .buyform .Pbtn { width:100%; border:none; padding:10px 0px; margin:0px; border-radius: 5px; }
.pdes .content .inf .buyform .addcar { background-color: #191970; color:#fff; display:flex; justify-content: center; align-items: center; }
.pdes .content .inf .buyform .addcar:hover { background-color: #191970; color:#fff; }
.pdes .content .inf .buyform .addcar.noitem { background-color:#919191; }
.pdes .content .inf .buyform .follow { background-color: #00befa; color:#fff; }
.pdes .content .inf .buyform .follow:hover { background-color: #00befa; color:#fff; }
.pdes .content .inf .des { padding:40px 0px 40px 0px; }

.pdes .content .showimg { padding-left:0px; margin-right:15px; width:calc(50% - 15px); }

.pdetail { padding:20px; }
.pdetail .content { margin-bottom:30px; background-color: #fff; }
.pdetail .tit { font-size:1.5rem; color:#2d3a3a; background-color: #fff; border-bottom:1px solid #f1f1f1; padding:0px 0px 20px 0px; margin-bottom:30px; }
.pdetail .content .img { margin-bottom:30px; }
.pdetail .des { text-align: left; width:100%; overflow: hidden; }
.pdetail .des img { width:auto; max-width:100%; }


/* ====== about ====== */
.about img { margin-bottom:30px; }
.about .content { text-align: left; }

/* ====== contactus ====== */
.contactus .content { display:flex; 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 #ffda00; padding:0px 10px; color:#262626; font-size:1.25rem; }
.contactus .inf .pro { margin-top:30px; }
.contactus .inf .addr { display: inline-block; }
.contactus .inf .addr .gm a { color:#ffda00; text-decoration: underline; font-size:0.875rem; }
.contactus .inf .addr .gm a:hover { color:#90120c; }
.contactus .inf .follow { margin-top:30px; padding-top:20px; }

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

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

@media (max-width:1198.98px){
    .mtop { height:40px; }
    .topnb .nb .submenu.inside { display: none; }

    .mbtns .mbtn .dp_menu { top:50px; }
}

@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; }

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

@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 .contform .security input { width:100%; }
    

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


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

@media (max-width:991.98px){
    form .security .securityInput { margin-bottom:20px; }
    
    /* ====== product_des ====== */
    .pdes .content .inf .buyform .f_btn .s_quantity,
    .pdes .content .inf .buyform .f_btn .follow { width:calc(50% - 9px); }
    .pdes .content .inf .buyform .f_btn .addcar { width:100%; order:3; padding:10px 0px; margin-top:20px; }

    /* ====== 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; }
}

@media (max-width:767.98px){

    /* ====== 共用樣式 ====== */
    .areaTIT { font-size:1.5rem; }
    .areaCONT { padding:15px; }
    
    .pubKey { font-size:0.875rem; }

    .mhpgn { height:40px; }
    .mh3 { height:15px; }
    .topbnr { padding-top:40px; }
    .nodata { padding:40px 0px; font-size:1rem; }
    .nodata .emotion { font-size:4rem; padding-bottom:40px; }

    .bc .breadcrumb { display: none; }
    .bc .back { font-size:1rem; }

    .pshare button.back { width:105px; 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:32px; height:32px; font-size:0.875rem; padding:9px 0px; margin:0px; }
    .pgn .active { background-color: transparent;  color:#474747; font-weight: bold; width:auto; font-size:1rem; height:32px; font-family:"Microsoft JhengHei";  }
    .pgn .txt { padding:0px 10px; }
    .pgn .page:not(.active){ display:none; }

    /* form */
    form .security img { width:100%; }
    form label { font-size:0.875rem; }
    form .security img { margin-right:5px; }


    /* icon */
    .plink .icon .pic { margin-right:10px; }
    .plink:not(.pshare) .icon { float:none; margin-bottom:20px; }

    
    /* ====== product_list ====== */    
    .product .classname div { display:none; }
    .product .classname select { display:block; width:100%; border:none; padding:10px; font-size:1.25rem; color:#777777; }


    /* ====== product_des ====== */
    .pdes { padding: 0px; }
    .pdes .content { display:block; padding-top:20px; }
    .pdes .content .inf .name { font-size:1.25rem; }
    .pdes .content .inf,
    .pdes .content .showimg { margin:0px; margin-bottom:40px; width:100%; }
    .pdes .content .inf .buyform .Pbtn { font-size:0.875rem; }

    /* ====== contactus ====== */
    .contactus .content { display:block; }
    .contactus .inf,.contactus .contform { padding:0px; }
    .contactus .inf .pro { margin-top:20px; }
    .contactus .inf .key { font-size:0.875rem; }
    .contactus .contform .send { margin-bottom:60px; }

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

}