/* 共用 */
.title { font-size:1.875rem; color:#303030; font-family: "Arial","微軟正黑體","Microsoft JhengHei", serif; }
.mh4 { height:40px; }
.mh6,.mhpgn { height:60px; }
.bctop { height:40px; }
.nodata { text-align: center; padding:40px 0px; color:#919191; font-size:1.5rem; }
.nodata .emotion { font-size:6rem; padding-bottom:60px; }

.topnb { top:0px; background-color:#f1f1f100; }
.topbnr { padding-bottom:20px; }

.bkspace { height:100px; }

/* 分頁 */
.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:#646464; color:#ffffff; font-size:0.875rem; border:none; }
.pgn .active { background-color:#00b3ba; color:#ffffff; font-weight: bold; }
.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: #4b4a48; }

/* form */
form:not(.coform) { text-align: left; }
form label { color:#4b4a48; }
form label .import { color:#00b3ba; }
form input:not(.securityInput):not(.noitem):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:none; width:100%;  padding:8px 10px; margin-bottom:25px; color:#474747; border:1px solid transparent; }
form textarea { resize:none; height:130px; }
form .security { margin-bottom:25px; }
form .change { height:100%; border:none; background-color: transparent; color:#000; white-space: nowrap; }
form .change:hover { color:#777; }
form .security img { height:42px; }
form .security .securityInput { width:100%; background-color:#f1f1f1; border:1px solid #e2e2e2; 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;
}

.LinkArea { padding-top:40px; text-align:left; }
.LinkArea a { display: inline-block; padding-top:20px; color:#dc3545; }

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

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

/* icon */
.plink .icon { padding:6px 0px; display: flex; justify-content: center; flex-wrap: wrap; }
.plink .icon .pic { width:32px; height:32px; color:#000; text-align:center; padding:8px 0px; border-radius: 50px; margin-right:20px; }
.plink .icon .pic:hover { color:#777;  }
/* .plink.pshare .icon .pic { color:#646464; } */
/* .plink.pshare .icon .pic:hover { color:#00b3ba; } */
.plink .icon .lineImg .pic { display: block; background:url("./images/ico-line-a2.png") no-repeat center center; background-size:16px; }
.plink .icon .lineImg .pic:hover { background:url("./images/ico-line-o3.png") no-repeat center center; background-size:16px; }
/* .plink.pshare .lineImg .pic { background-color:#919191; } */

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


/* ====== product_list ====== */

.bc .back { float:left; padding:20px 0px; font-size:0.875rem; }
.bc .back a { color:#14213d; }
.bc .breadcrumb { background-color:transparent; justify-content: flex-end; padding:20px 0px; margin:0px; }
.bc .breadcrumb li { color:#ababab; font-size:0.875rem; }
.bc .breadcrumb li::before { color:#e2e2e2; }
.bc .breadcrumb a { color:#303030; }


/* .product { padding:20px 0px 40px 0px; } */
.classname { margin:20px 0px; background-color: #fff; justify-content: center; }
.classname.row { margin-left:0px; margin-right:0px; }
.classname .cls { padding:20px 5px; }
.classname a { color:#303030; text-decoration: none; padding-bottom:3px; }
.classname a:hover { color:#4b4a48; border-bottom:2px solid #4b4a48; }
.classname select,
.classname i { display:none; }
.product .list .pd { margin:25px 0px; }
.product .list .pd .des .pdname { padding:15px 0px; font-size:1.25rem; color:#303030; }
.product .list .pd .des .price { font-family:"Helvetica"; }
.product .list .pd .des .price1 { color:#ff729f; font-size:0.875rem; }
.product .list .pd .des .offer { font-size:1.125rem; font-weight:bold; }
.product .list .pd .des .price2 { color:#ababab; 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: #4b4a48; }

/* ====== product_des ====== */
.pdes .name { font-size:2.5rem; }
.pdes .ytembed { max-width: 900px; margin:0px auto; }
.pdes .intro { max-width:540px; margin:0px auto; text-align:left; color:#474747; }
.pdes .intro .tit { font-size:1.25rem; padding-bottom:20px; }
.pdes .pimg { margin-bottom:30px; }
.pdes .LinkArea { max-width: 540px; margin:0px auto; padding-top:0px; }

/* ====== 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: left; 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 #00b3ba; padding:0px 10px; color:#00b3ba; font-size:1.25rem; }
.contactus .inf .pro { margin-top:30px; }
.contactus .inf .key { color:#4b4a48; vertical-align: top; }
.contactus .inf .value { color:#000; }
.contactus .inf .addr { display: inline-block; }
.contactus .inf .addr .gm a { color:#63308a; text-decoration: underline; font-size:0.875rem; }
.contactus .inf .addr .gm a:hover { color:#00b3ba; }
.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; }

/* ====== gallery ====== */
.album .gallery { margin-top:40px;  }
.album .gallery a:hover { text-decoration: none; }
.album .gallery .des { padding:20px; text-align: left; background-color:#fff; }
.album .gallery .des .title { color:#262626; font-size:1.125rem; padding-bottom:0px; }
.album .gallery .des .date { color:#919191; font-size:0.875rem; }
.album .gallery .des:hover .title { color:#ffc107; }

.album .gbox { display:block; width:100%; overflow:hidden; height:200px; }
.album .gbox img { width:auto; transition: all .5s ease-out; }
.album .gbox:hover img { transform: scale(1.1); }
/* .gbox .wh { height:100% !important; width:auto !important; } */
/* .gbox .ww { width:100% !important; height:auto !important; } */

.pic_list .title { color:#262626; font-size:1.5rem; text-align:left; }
.pic_list .fancybox { display: block; height:200px; overflow:hidden; margin-top:40px; }

/************************** video rwd **************************/
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;left: 0;
	width: 100%;
	height: 100%;
}

.video-container-4by3 {
	position: relative;
	padding-bottom: 75%;
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}

.video-container-4by3 iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;left: 0;
	width: 100%;
	height: 100%;
}

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

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


::-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 */

/************************** video rwd **************************/
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;left: 0;
	width: 100%;
	height: 100%;
}

.video-container-4by3 {
	position: relative;
	padding-bottom: 75%;
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}

.video-container-4by3 iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;left: 0;
	width: 100%;
	height: 100%;
}



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

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

    /* ====== contactus ====== */
    /* .contactus .inf .online { font-size:0.875rem; } */


    /* 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; }
    .pdes .content .inf .buyform .f_btn .follow { padding:0px; }

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


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

    /* ====== orderDetail ====== */
    /* .orderDetail .detailTable { font-size:1rem; } */
    /* .orderDetail .detailTable .table_td .status { padding-top:10px; } */

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

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

@media (max-width:767.98px){
    
    .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; float:right; }

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

    .bkspace { height:60px; }

    .publicArea { padding:15px; }
    .publicArea .title { padding-bottom:15px; }

    .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; }
    .mhpgn { height:40px; }

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

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

    /* ====== product_list ====== */
    .topbnr { padding-top:40px; }
    .product .classname select { padding:10px; font-size:1.25rem; }

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

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

    /* ====== product_des ====== */
    .pdes { padding: 0px; }
    .pdes .container.bnr { max-width:100%; padding:0px; }
    .pdes .name { font-size:1.5rem; }



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

}