@charset "utf-8";
/* CSS Document */

@import url("reset.css");
@import url("usual.css");

body {position:relative;left:0;line-height:24px;letter-spacing:1px;min-width:320px;font-family:Arial,"微軟正黑體";background:#F5F5F5;-webkit-transition:left .3s;transition:left .3s}
body.open {left:250px}
.BG_main {width:100%;background:#d5dee7;overflow:auto}
.inx {min-height:700px;background:url(../images/index_bg.jpg) no-repeat;width:100%}

.WRAPPER {width:1000px;margin:0 auto;position:relative}

/*首頁登入*/
ul.LOGIN_FORM {position:absolute;left:0;top:460px;width:100%;padding:50px;font-size:18px;font-weight:bold;color:#FFF;background:rgba(0,0,0,0.7)}
ul.LOGIN_FORM li {padding:12px 0px}
ul.LOGIN_FORM li span {width:120px;display:block;float:left}
ul.LOGIN_FORM li input {width:40%;height:24px;line-height:24px;border:none}
ul.LOGIN_FORM li input.SMALL {width:80px;height:24px}
ul.LOGIN_FORM li input {background:#f7f7f7}
ul.LOGIN_FORM .BTN_LOG {position:absolute;top:60px;right:22%}

/*頁首 選單 頁腳*/
.HEADER {min-height:80px;width:100%;position:relative}
h1.LOGO {position:absolute;top:180px}
h1.LOGO a {display:block;font-size:24px;font-weight:bolder}
h1.LOGO * {vertical-align:middle}

.TITLE {text-align:left;font-size:28px;font-weight:bolder;color:#344563;padding:20px 0 0 10px}
.TITLE1 {width:20%;text-align:center;background:#FFF;font-size:24px;font-weight:bold;color:#273946;letter-spacing:5px;border:4px solid #FCB100;padding:20px 0 20px 0;margin:20px 0 20px 10px}

/*left_menu*/
.btn {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
position:relative;
display:inline-block;
padding:10px 20px;
height:50px;
background-color:#838383;
border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
-webkit-box-shadow:0 3px 0 0 #636363;
box-shadow:0 3px 0 0 #636363;
line-height:30px;
font-size:14px;
font-weight:normal;
text-shadow:0px 1px 1px #888}
.btn:active,.btn.active {top:1px;-webkit-box-shadow:0 1px 0 0 #636363;box-shadow:0 1px 0 0 #636363}
.btn.submit {font-size:12px;height:30px;line-height:30px;padding:0 10px;margin:0;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px}
.btn-small {height:30px;font-size:12px;line-height:10px}
a.menu-icon {position:absolute;top:10px;left:0;font-size:16px}
ul.side-menu {position:fixed;top:0;left:-250px;width:250px;height:100%;background:#344563;color:#FFF;z-index:1;-webkit-transition:left .3s;transition:left .3s}
ul.side-menu.open {left:0}
ul.side-menu li {position:absolute;top:100%;left:0;right:0;padding:15px 20px 0 20px;text-align:left;height:40px;line-height:40px;-webkit-transition:top .3s;transition:top .3s}
ul.side-menu h2.title {padding:10px 20px 0 20px;position:relative;font-size:16px;line-height:24px;height:60px;background:#ef634a;-webkit-transition:top .3s;transition:top .3s}
ul.side-menu li.link a {display:block;font-size:15px;font-weight:bold;padding-left:30px;margin:0;color:#b6c6e2}
ul.side-menu li.link a.GREEN {color:#51a670}
ul.side-menu li.link a:hover {background:url(../images/icon_left.png) 15px center no-repeat #283957}


.logo_top {padding-top:15px}
.box01 {margin-top:20px;clear:both}
table.TAB_STYLE {width:100%;margin-bottom:20px}
table.TAB_STYLE th,
table.TAB_STYLE td {padding:7px;border-bottom:1px solid #cdd7e3}
table.TAB_STYLE th {background:#344563;color:#b6c6e2;font-weight:bold;text-align:center}
table.TAB_STYLE td {background:#FFF;font-size:13px;text-align:center}

.UL_STYLE {width:100%;margin:20px auto;background:#FFF;overflow:auto}
.UL_STYLE li {clear:both;line-height:40px;border-bottom:1px solid #EEE}
.UL_STYLE li div.LI_TITLE {background:#344563;width:150px;padding:1px 10px;display:block;float:left;border-bottom:1px solid #cdd7e3;text-align:right;font-size:16px;font-weight:bold;color:#b6c6e2}
.UL_STYLE li div.LI_TITLE_2 {background:#344563;text-align:center;font-size:16px;font-weight:bold;color:#b6c6e2;border-bottom:1px solid #cdd7e3}
.UL_STYLE li div.LI_CONTENT {float:left;font-size:14px;margin:0 10px 0 10px}
.UL_STYLE li input, .UL_STYLE li select, .UL_STYLE li textarea {margin-left:4px;border:1px solid #CCC}
.UL_STYLE li textarea {width:90%;margin:10px}

.BTN_STYLE1 {width:100%;text-align:center;background:url(../images/btn_bg.jpg) repeat-x;font-size:20px;font-weight:bolder;color:#273946;letter-spacing:5px;border:3px solid #FFF;padding:15px 0 15px 0}
.BTN_STYLE1 a {color:#273946}
.BTN_ADD {width:10%;text-align:center;padding:10px;background:#FFCF33;font-size:16px;font-weight:bolder;color:#273946}
.BTN_ADD a {color:#273946}

/*左右區塊*/
.LEFT {width:58%;float:left;_display:inline;margin-bottom:10px}
.RIGHT {width:40%;float:right;_display:inline}

.LEFT_HALF {float:left;width:48%}
.RIGHT_HALF {float:right;width:48%}

/*頁腳*/
.FOOTER_BG {background:#333;padding:10px 0;clear:both;color:#FFF;font-size:13px;margin:120px 0 0 0;overflow:auto}
.FOOTER_BG a {color:#FFF}
.FOOTER_BG a:hover {color:#CCC;text-decoration:underline}

/*首頁區塊------------------------------------------------------*/
.BOX_WHITE {background:#fff;padding:50px 0}
.BOX_BLACK {background:#262626;padding:50px 0;color:#FFF}
.BOX_BLACK2 {background:#000;padding:50px 0 20px 0;color:#FFF;overflow:auto}
.BOX_GARY {background:#e9e9e9;padding:50px 0;border-top:1px solid #CCC;border-bottom:1px solid #CCC}

.CONTAINER {margin-top:20px;background:url(../images/left_bg.gif) 10px 0px repeat-y;position:relative;min-height:310px}
.ProMenuTitle {text-indent:-9999px;width:232px;height:51px;background:url(../images/pro_menu_title.jpg) no-repeat}
.StoreMenuTitle {text-indent:-9999px;width:232px;height:51px;background:url(../images/store_menu_title.jpg) no-repeat}

.LEFT_MENU,
.AREA_MENU {padding:0 10px;background:#ffeceb;border:1px solid #c12020;border-top:none;
-webkit-border-bottom-right-radius:4px;
-webkit-border-bottom-left-radius:4px;
-moz-border-radius-bottomright:4px;
-moz-border-radius-bottomleft:4px;
border-bottom-right-radius:4px;
border-bottom-left-radius:4px}

.LEFT_MENU li a,
.AREA_MENU li a {display:block;padding:6px 0;font-size:16px;color:#330202}

.PRO_LIST li {width:232px;height:260px;font-size:16px;line-height:20px;margin-right:7px;margin-bottom:10px !important}
.PRO_LIST li div.PHOTO_BOX {width:211px!important;height:181px!important;border:none}
.PRO_LIST li div.PHOTO_BOX img {max-width:210px;max-height:180px}
.PRO_LIST li div.PRO_MANE {padding-top:5px}

.STORE_CLASS {font-family:"新細明體";font-size:13px;line-height:21px;color:#666}
.PRICE {font-family:"Arial Black";color:#e8155a;font-size:24px;line-height:28px}

.Regulation {width:100%;height:300px;margin:10px auto;overflow:scroll;border:1px solid #ccc;background:#eee}

/*內頁------------------------------------------------------------*/

.PAGE_BG {padding:12px;width:700px;min-height:480px;background:url(../images/page_bg.gif) no-repeat}

/*內文*/

.TEXT {padding:20px}
.TEXT * {}
.TEXT p {padding-bottom:20px}

.GOODS_MENU {overflow:auto;padding:0 5px;border-bottom:1px solid #bbb;margin-bottom:20px}
.GOODS_MENU li {float:left;display:inline}
.GOODS_MENU li a {display:block;padding:5px 20px}

/*產品內頁*/
.GOODS_TITLE {padding:8px;margin-bottom:10px;font-size:16px;line-height:24px;background:url(../images/goods_title_bg.gif) repeat-x #d6d6d6;color:#222;
-moz-border-radius:6px 6px 0 0; /* Firefox */
-webkit-border-radius:6px 6px 0 0; /* Safari, Chrome */
-khtml-border-radius:6px 6px 0 0; /* Konqueror */
border-radius:6px 6px 0 0; /* Opera 10.50 and later (CSS3 standard) */
behavior:url(border-radius.htc); /* IE6, IE7, IE8 */
}

.GOODS_LEFT {width:310px;float:left;_display:inline;padding-bottom:20px}
.GOODS_LEFT img {border:3px solid #dcdcdc}

.GOODS_RIGHT {width:620px;float:right;_display:inline;padding-bottom:20px}
.GOODS_SUB_TITLE {margin:20px 0 10px 0;padding:0px;padding-left:30px;height:22px;line-height:22px;background:url(../images/goods_subtitle_bg.gif) 10px 0px no-repeat;color:#000; border-bottom:2px solid #d5d5d5}

/*讚*/
.FB_LIKE {width:225px;position:absolute;top:50px;right:0}

/*FB留言 寬100%*/
.fb-comments, .fb-comments span, .fb-comments iframe {width:100% !important}

.TELEPHONE_BG {min-height:300px;background:url(../images/telephone.gif) no-repeat center center}

/*會員登入*/
.BG_LINE {background:url(../images/bg_line.gif)}

.ICON_MEMBER {background:url(../images/login_icon1.gif) 5px center no-repeat;text-indent:30px}
.ICON_LOCK {background:url(../images/login_icon2.gif) 5px center no-repeat;text-indent:30px}
.ICON_MAIL {background:url(../images/login_icon3.gif) 5px center no-repeat;text-indent:30px}

.FUN_LIST {clear:both}
.FUN_LIST li {float:left;padding:1%;margin-left:2%;margin-bottom:20px;width:29%;font-size:14px;background:#fff;border:1px solid #ccc}

.MINI_HIGHT400 li {min-height:390px}
.MINI_HIGHT480 li {min-height:480px}

ul.LIST {padding-bottom:20px}
ul.LIST li {padding-bottom:10px}


/*其他----------------------------------------------------------------*/

/*標題*/
.ARROW_ICON {display:block;float:left;text-indent:-9999px;width:8px;height:13px;background: url(../images/title_icon2.gif) center center no-repeat}
.ICON_ARROW {margin:20px 0;display:block;background:url(../images/arrow.png) no-repeat;padding-left:34px;font-size:22px;color:#de1f3f;height:28px;line-height:28px;clear:both}
.ICON_CIRCLE {margin:10px 0;display:block;background:url(../images/icon_circle.gif) 0px 2px no-repeat;padding-left:20px;font-size:16px}

.TITLE_STYLE1 {margin:10px 0;display:block;background:url(../images/icon04.gif) 0px 2px no-repeat;padding-left:20px;font-size:16px}
.TITLE_MAIN {font-weight:bold;font-size:18px;color:#900;padding:3px 0}
.TITLE_SUB {font-weight:bold;font-size:16px;color:#333;padding:3px 0}

.HOME_SUBTITLE {padding:14px 0;font-size:18px}
.DETAIL_TITLE {padding:10px 0px;margin-bottom:10px;font-size:18px;color:#5d1466;border-bottom:1px solid #ccc;background:url(../images/sub_title.gif) 0px 6px no-repeat}
.DETAIL_DATE {color:#900;padding-bottom:10px}

.Introduction_TITLE {padding:0 5px;height:30px;line-height:30px;color:#FFF;background:url(../images/introduction_bg.gif) repeat-x;margin-bottom:10px}

/*箭頭*/
.ARROW {padding-left:24px;font-size:18px;background:url(../images/arrow1.gif) left center no-repeat}
.ICON_TITLE {padding-left:16px;font-size:18px;background:url(../images/map_icon.gif) left center no-repeat;font-size:16px;color:#f20a3b}

/*顏色*/
.RED {color:#900}
.WHITE {color:#FFF}
.blue {color:#06C}
.GREEN {color:#090}
.ORANGE {color:#F90}
.YELLOW {color:#FF3}
strong {font-weight:bolder}

/*文字*/
p {padding-bottom:14px}

.MARGIN_TOP {margin-top:50px}
.PADDING_LEFT {padding-left:20px}
.PADDING_20 {padding:20px}

/*產品內頁*/
div.PRO_DETAIL {overflow:auto;padding-bottom:30px}
div.PRO_DETAIL .PHOTO_BOX {width:240px;height:160px}
div.PRO_DETAIL .BTN2 {margin-top:20px}
div.PRO_DETAIL .INFORMATION {min-height:180px}

/*首頁表格*/
table.HOME_TAB {width:960px;margin:0 auto}
table.HOME_TAB {text-align:center}

a.BTN_MORE {position:absolute;top:20px;right:22px;color:#444;text-decoration:none;font-size:11px}
a.BTN_DETAIL {text-indent:-9999px;width:43px;height:43px;background:url(../images/btn_detail.jpg) no-repeat;position:absolute;bottom:5px;right:5px}
a.BTN_Introduction {text-indent:-9999px;width:43px;height:43px;background:url(../images/btn_detail2.png) no-repeat;position:absolute;bottom:5px;right:5px}

/*按鈕*/
.BTN1 a {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #adbad1), color-stop(1, #8894aa));
background:-moz-linear-gradient(top, #adbad1 5%, #8894aa 100%);
background:-webkit-linear-gradient(top, #adbad1 5%, #8894aa 100%);
background:-o-linear-gradient(top, #adbad1 5%, #8894aa 100%);
background:-ms-linear-gradient(top, #adbad1 5%, #8894aa 100%);
background:linear-gradient(to bottom, #adbad1 5%, #8894aa 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#adbad1', endColorstr='#8894aa',GradientType=0);
background-color:#adbad1;
border:1px solid #adbad1;
display:inline-block;
cursor:pointer;
color:#FFF;
float:left;
font-size:16px;
font-weight:bold;
padding:10px 20px;
margin:20px 20px 20px 0;
text-decoration:none}
.BTN1 a:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #8894aa), color-stop(1, #adbad1));
background:-moz-linear-gradient(top, #8894aa 5%, #adbad1 100%);
background:-webkit-linear-gradient(top, #8894aa 5%, #adbad1 100%);
background:-o-linear-gradient(top, #8894aa 5%, #adbad1 100%);
background:-ms-linear-gradient(top, #8894aa 5%, #adbad1 100%);
background:linear-gradient(to bottom, #8894aa 5%, #adbad1 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8894aa', endColorstr='#adbad1',GradientType=0);
background-color:#8894aa}
.BTN1 a:active {position:relative;top:1px}

.BTN2 a {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #556f9e), color-stop(1, #344563));
background:-moz-linear-gradient(top, #556f9e 5%, #344563 100%);
background:-webkit-linear-gradient(top, #556f9e 5%, #344563 100%);
background:-o-linear-gradient(top, #556f9e 5%, #344563 100%);
background:-ms-linear-gradient(top, #556f9e 5%, #344563 100%);
background:linear-gradient(to bottom, #556f9e 5%, #344563 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#556f9e', endColorstr='#344563',GradientType=0);
float:left;
background-color:#556f9e;
border:1px solid #556f9e;
display:inline-block;
cursor:pointer;
color:#FFF;
font-size:15px;
font-weight:bold;
padding:5px 10px;
margin:0 20px 40px 0;
text-decoration:none}
.BTN2 a:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #344563), color-stop(1, #556f9e));
background:-moz-linear-gradient(top, #344563 5%, #556f9e 100%);
background:-webkit-linear-gradient(top, #344563 5%, #556f9e 100%);
background:-o-linear-gradient(top, #344563 5%, #556f9e 100%);
background:-ms-linear-gradient(top, #344563 5%, #556f9e 100%);
background:linear-gradient(to bottom, #344563 5%, #556f9e 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#344563', endColorstr='#556f9e',GradientType=0);
background-color:#344563}
.BTN2 a:active {position:relative;top:1px}


.BTN3 {display:block;width:92px;height:37px;line-height:37px;background:url(../images/btn3.jpg) no-repeat;color:#fff;text-decoration:none;border:none;text-align:center}

.BTN_CENTER {display:block;margin:0 auto}
.BLOCK_CENTER {text-align:center;padding:10px}

.SUB_MENU {height:46px;border-bottom:1px solid #ddd;padding-left:10px;margin-bottom:20px}
.SUB_MENU li {float:left;height:35px;border:1px solid #ddd;background:#efefef;margin-left:-1px;margin-top:10px}
.SUB_MENU li a {display:block;padding:5px 10px;font-size:14px}

.FUN_MENU {overflow:auto;padding:50px 0}
.FUN_MENU li {float:left;width:17%;margin-left:3%;text-align:center;font-size:14px}
.FUN_MENU li .TITLE_MENU {padding:5px 0;font-size:20px;font-weight:bolder}