/*** 網站整體屬性 ***/
* { padding: 0; margin: 0; border: 0; }
html, body { padding: 0; margin: 0; border: 0; min-width: 640px; height: 100%; font: 16px "微軟正黑體", arial, verdana, "Microsoft JhengHei", sans-serif; }
ul, ol, li { padding: 0; margin: 0; list-style: none; }
#rot { background: #fff1d6 url('../images/bg.jpg') top left repeat; min-height: 100%; }
.clear { padding: 0; margin: 0; clear: both; }

/*** 上方功能列 ***/
#nav {
    width: 100%;
    height: 90px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background: #e93e3e;
    background: -moz-linear-gradient(top,  #e93e3e 0%, #eb4c4c 50%, #de2727 51%, #d24747 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e93e3e), color-stop(50%,#eb4c4c), color-stop(51%,#de2727), color-stop(100%,#d24747));
    background: -webkit-linear-gradient(top,  #e93e3e 0%,#eb4c4c 50%,#de2727 51%,#d24747 100%);
    background: -o-linear-gradient(top,  #e93e3e 0%,#eb4c4c 50%,#de2727 51%,#d24747 100%);
    background: -ms-linear-gradient(top,  #e93e3e 0%,#eb4c4c 50%,#de2727 51%,#d24747 100%);
    background: linear-gradient(to bottom,  #e93e3e 0%,#eb4c4c 50%,#de2727 51%,#d24747 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e93e3e', endColorstr='#d24747',GradientType=0 );
    box-shadow: 0 2px 3px rgba(0,0,0,.3);
}
#nav_inner { padding: 15px; height: 60px; margin: 0; position: relative; }
#title { margin: 0 auto; padding: 0; width: 85%; }
#title h1 { padding: 0; margin: 0; text-align: center; color: #ffffff; font-size: 2.3em; line-height: 60px; }
#menu { width: 68px; height: 68px; position: absolute; left: 15px; top: 15px; }
#menu_button { padding: 9px; width: 50px; height: 50px; cursor: pointer; }
#action {  /*width: 115px;*/ height: 68px; position: absolute; right: 15px; top: 15px; text-align: right; }
#search_button { padding: 4px; width: 60px; height: 60px; cursor: pointer; display: inline-block; margin-right: 10px; }
#cart_button { padding: 4px; width: 60px; height: 60px; cursor: pointer; display: inline-block; position: relative; }
#cart_button .cart_num { display: block; width: 24px; height: 24px; line-height: 24px; font-size: 18px; text-align: center; background: #ffffff; color: #c93b3a; border-radius: 12px; position: absolute; right: 0; top: 0; }
#cart_button:hover .cart_num { background: #ffcfcf; }
#order_button { padding: 0; width: 64px; height: 64px; cursor: pointer; display: inline-block; margin-right: 10px; }

/*** 搜尋列 ***/
#search_box { padding: 90px 0 10px 0; width: 100%; background: #eeeeee; border-bottom: 1px #C3C3C3 solid; position: fixed; top: -96px; z-index: 999;}
#search_box form { width: 95%; padding: 0; margin: 0 auto; }
#search_box a.back_btn { display: inline-block; width: 10%; height: 63xp; padding: 0; margin-right: 1%; vertical-align: middle; }
#search_box a.back_btn img { display: block; height: 70px; }
#search_box .search_val { display: inline-block; width: 65%; height: 70xp; font-size: 28px; padding: 10px 2%; box-shadow: 0 0 3px rgba(0,0,0,0.3) inset; border-radius: 8px 0 0 8px; vertical-align: middle; }
#search_box .search_submit {
    display: inline-block;
    width: 24%;
    height: 55px;
    padding: 0 1%;
    margin-left: -3px;
    font-size: 28px;
    font-weight: bold;
    color: #ffffff;
    background: #e93e3e;
    background: -moz-linear-gradient(top,  #e93e3e 0%, #eb4c4c 50%, #de2727 51%, #d24747 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e93e3e), color-stop(50%,#eb4c4c), color-stop(51%,#de2727), color-stop(100%,#d24747));
    background: -webkit-linear-gradient(top,  #e93e3e 0%,#eb4c4c 50%,#de2727 51%,#d24747 100%);
    background: -o-linear-gradient(top,  #e93e3e 0%,#eb4c4c 50%,#de2727 51%,#d24747 100%);
    background: -ms-linear-gradient(top,  #e93e3e 0%,#eb4c4c 50%,#de2727 51%,#d24747 100%);
    background: linear-gradient(to bottom,  #e93e3e 0%,#eb4c4c 50%,#de2727 51%,#d24747 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e93e3e', endColorstr='#d24747',GradientType=0 );
    border-radius: 0 8px 8px 0;
    vertical-align: middle;
}
#search_box .closed { visibility: hidden; top: -96px; }
#search_box .opened { visibility: visible; top: 0; }

/*** 側邊選單 ***/
#menu_list { width: 100%; height: calc(100% - 90px); padding-top: 90px; position: fixed; left: -100%; top: 0; z-index: 100; background: #fff1d6 url('../images/bg.jpg') top left repeat; box-shadow: 1px 0 5px rgba(0,0,0,.3); overflow: hidden; overflow-y: auto; visibility: hidden; }
#menu_list .closed { visibility: hidden; left: -100%; }
#menu_list .opened { visibility: visible; left: 0; }
#menu_list ul { background: url('../images/bg_white_140x1.jpg') top left repeat-y; }
#menu_list li a { display: block; padding: 25px 30px 25px 170px; border-bottom: 2px #c93b3a solid; line-height: 40px; font-size: 2em; color: #c93b3a; text-decoration: none; }
#menu_list li a:hover { background-color: rgba(0,0,0,.06); }
#menu_list .menu_icon { background-position: 46px center; }

/*** 網頁主內容 (內容格式放置於 main.css) ***/
#main { padding: 95px 2% 15px 2%; }
#main_inner { /*background: rgba(0,0,0,0.3);*/ }

/*** 插圖集 Icon Style ***/
.icon_list { background-image: url('../images/icon_list.png'); background-repeat: no-repeat; }
.icon_new { background-image: url('../images/icon_new.png'); background-repeat: no-repeat; }
.icon_activity { background-image: url('../images/icon_activity.png'); background-repeat: no-repeat; }
.icon_sale { background-image: url('../images/icon_sale.png'); background-repeat: no-repeat; }
.icon_heart { background-image: url('../images/icon_heart.png'); background-repeat: no-repeat; }
.icon_cart { background-image: url('../images/icon_cart.png'); background-repeat: no-repeat; }
.icon_clock { background-image: url('../images/icon_clock.png'); background-repeat: no-repeat; }
.icon_mail { background-image: url('../images/icon_mail.png'); background-repeat: no-repeat; }
.icon_edit { background-image: url('../images/icon_edit.png'); background-repeat: no-repeat; }
.icon_account { background-image: url('../images/icon_account.png'); background-repeat: no-repeat; }

/** 分頁 Style **/
.pagination_box {
    width: 100%;
    text-align: center;
    padding: 20px 0;
}

.pagination_box .pages_number>li {
    display: inline-block;
    margin: 0 3px;
    vertical-align: middle;
    width: 65px;
    height: 65px;
    border-radius: 10px;
    color: #fff;
    background-color: #dcdcdc;
    text-align: center;
    line-height: 65px;
    font-size: 40px;
    font-weight: 700;
    -moz-box-shadow: inset 2px -2px 0 #c5c2bc;
    -webkit-box-shadow: inset 2px -2px 0 #c5c2bc;
    box-shadow: inset 2px -2px 0 #c5c2bc;
}

.pagination_box .pages_number>li.number {
    background-color: #b2aea6;
    -moz-box-shadow: inset 2px -2px 0 #a2a09b;
    -webkit-box-shadow: inset 2px -2px 0 #a2a09b;
    box-shadow: inset 2px -2px 0 #a2a09b;
}

.pagination_box .pages_number>li.number.now_p {
    background-color: #EA4444;
    -moz-box-shadow: inset 2px -2px 0 #B10F0F;
    -webkit-box-shadow: inset 2px -2px 0 #B10F0F;
    box-shadow: inset 2px -2px 0 #B10F0F;
}

.pagination_box .pages_number>li a {
    text-decoration: none;
    color: #fff;
}

/*=lightbox_block*/
.lightbox_block * {
    font-family: '微軟正黑體';
}

.lightbox_bg,
.lightbox_block {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0
}

.lightbox_block {
    display: none;
    height: 100%;
    z-index: 1120;
    overflow: auto
}

.lightbox_bg {
    background: rgba(0, 0, 0, .5);
    min-height: 100%;
    z-index: 1110
}

.lightbox_block .lightbox_box {
    border: 2px solid #D73A3A;
    position: relative;
    margin: 70px auto 0;
    width: 85%;
    z-index: 1115
}

.lightbox_block .lightbox_box .lightbox_title {
    background: #EA4646;
    color: #FFF;
    font-size: 32px;
    text-align: center;
    padding: 15px;
    font-weight: 700
}

.lightbox_block .lightbox_box .lightbox_content {
    background-color: #fff;
    font-size: 28px;
    padding: 10px;
}

.lightbox_block .lightbox_box .lightbox_btn_box {
    padding: 10px;
    text-align: center;
    background-color: #f3f3f3;
    border-top: 1px solid #E4A6A6;
}

.lightbox_block .lightbox_box .lightbox_btn_box .btn-sty {
    border: none;
    font-size: 32px;
    padding: 10px;
    border-radius: 3px
}

.lightbox_block .lightbox_box .lightbox_btn_box.btn-1 .btn-sty {
    width: 40%;
    margin: 0 5px
}

.lightbox_block .lightbox_box .lightbox_btn_box.btn-2 .btn-sty {
    width: calc(40% - 10px);
    margin: 0 5px
}

.lightbox_block .lightbox_box .lightbox_btn_box .btn-sty.btn-y {
    background: #E4A6A6;
    color: #fff
}

.lightbox_block .lightbox_box .lightbox_btn_box .btn-sty.btn-g {
    background: #C9C9C9;
    color: #fff
}
/*=lightbox_block(end)*/

#mailbox{
    position: relative;
}
#mailbox span{
    position: absolute;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: #C93B3A;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    top: 30px;
    right:calc(50% - 50px);
    font-size: 24px;
    font-weight: bold;
}