/* 主要顏色 深咖啡 #3b1614 中咖啡 #8B2331 淺咖啡 #97625f LOGO色 #8B2331 灰線 #d7d7d7 文字深咖啡 #3b1614 文字灰 #c6c6c6 底色灰 #a8a8a8 底色灰2 #e6e6e6 */ .bodybox { width:100%; min-width:980px; margin:0 auto; z-index:0; list-style:none; /*background:url(../Images/IndexbBg.jpg) no-repeat center top;*/} #top a{ display:scroll;position:fixed;bottom:0px;right:5px; } /* mainHeader */ .mainHeader { width:100%; height:90px;} .headerBox { width:980px; height:67px; padding:11px; margin:0 auto; z-index:0;} .headerBox .logo{ width:270px; height:67px; background:url(../Images/logo.png) no-repeat; display:block; float:left; } .headerBox .logo a{ height:67px; display:block;} /* contentBox */ .contentBox980{ width:980px; padding-bottom:20px; text-align:left;} .contentBox700{ width:700px; padding-bottom:20px; text-align:left; float:left;} .fbbox{ padding:8px 20px 0 0; text-align:right; float:right;} .linebox{ width:100%; height:35px; background:url(../Images/linebox.png) repeat; margin:30px 0; } .btn{ width:130px; margin:0 2px 20px 2px; float:right;} .btn a{ font-size:16px; line-height:25px; color:#000; background:#fff; text-align:center; padding:5px; border:solid 1px #d7d7d7; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition: background-color .5s; display:block;} .btn a:hover, .btn .selected{ color:#fff; background:#3b1614; } .btn.B{ width:160px; margin:0 2px 20px 2px; float:right;} .btn.B a{ font-size:16px; line-height:25px; color:#000; background:#fff; text-align:center; padding:5px; border:solid 1px #d7d7d7; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition: background-color .5s; display:block;} .btn.B a:hover, .btn.B .selected{ color:#fff; background:#3b1614; } .btnG{ width:130px; margin:0 2px 20px 2px; float:right; font-size:16px; line-height:25px; color:#fff; background:#a8a8a8; text-align:center; padding:5px; border:solid 1px #a8a8a8; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; display:block;} .btnR{ width:130px; margin:0 2px 20px 2px; float:right;} .btnR a{ font-size:16px; line-height:25px; color:#fff; background:#8B2331; text-align:center; padding:5px; border:solid 1px #d7d7d7; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition: background-color .5s; display:block;} .btnR a:hover, .btnR .selected{ background:#3b1614; } /* 20190529 修改 尚未更新 */ .btnL:first-child{margin-left:370px;} .allL{width:100%;text-align:center;} /* 20190529 修改 尚未更新 END */ .btnL{ width:130px; margin:0 2px 20px 2px; float:left;} .btnL a{ font-size:16px; line-height:25px; color:#fff; background:#8B2331; text-align:center; padding:5px; border:solid 1px #d7d7d7; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition: background-color .5s; display:block;} .btnL a:hover, .btnL .selected{ background:#3b1614; } .btnPC{ width:130px; margin:0 2px 20px 2px; float:right;} .btnPC a{ font-size:16px; line-height:25px; color:#fff; background:#8B2331; text-align:center; padding:5px; border:solid 1px #d7d7d7; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition: background-color .5s; display:block;} .btnPC a:hover, .btnPC .selected{ background:#3b1614; } .btnPC2{ width:150px; margin:0 2px 20px 2px; float:right;} .btnPC2 a{ font-size:16px; line-height:25px; color:#fff; background:#8B2331; text-align:center; padding:5px; border:solid 1px #d7d7d7; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition: background-color .5s; display:block;} .btnPC2 a:hover, .btnPC2 .selected{ background:#3b1614; } /*.btnBox{ width:100%; text-align:center; margin-top:15px; } .btnBox .btn{ margin:0 auto; z-index:0; } .btnBox a.btn{ margin:10px 5px; padding:7px 40px; font-size:18px; line-height:25px; color:#fff; background-color:#229f50; text-align:center; display:inline-block; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition: background-color .5s; box-shadow:inset 1px 1px 0 rgba(0,0,0,.3); -moz-box-shadow:inset 1px 1px 0 rgba(0,0,0,.3); -webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,.3); -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius:7px; } .btnBox a.btn:hover{ background-color:#015b2f; }*/ /* left 選單 */ .leftBox{ width:240px; margin-right:30px; text-align:left; background:#fff; float:left;} .leftBox dl{ } .leftBox dt{ /*text-shadow: 1px 1px 1px #000;*/ margin-bottom:4px; padding:10px 5px; font-size:16px; color:#fff; text-align:center; display:block; background:#3b1614; cursor: pointer;-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition: background-color .5s; font-weight: normal;} .leftBox dt a{ color:#fff;} .leftBox dt:hover,.leftBox dt.selected{ color:#fff; background:#8B2331;} .leftBox dd {} .leftBox dd a{ padding:7px; margin:1px 0; font-size:14px; color:#000; text-align:left; background:#fff; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition: background-color .5s; display:block; } .leftBox li a:hover,.leftBox li .selected{ background:#e6e6e6;} .leftBox dd.tpe{height:325px; width:240px; margin-bottom:20px; overflow:scorll;} .leftBox dd ul{font-weight:normal;} /* 膠囊咖啡 */ .menucaff{width:auto;float:right;} .menucaff a{padding:10px 30px;font-size:15px;color:#000;text-align:center;display:none; border:none;} .menucaff a:hover{color:#3b1614;} #loginbox dl.logo2{border:none;} #loginbox dl.logo2 a{border:none;} .logo2 a{width:40px;height:40px;background-repeat:no-repeat; display:inline-block;background-image:url(../Images/LOGO2.png);} #loginbox dl.logo2.FB{display:none;}/* 20190529 修改 尚未更新 */ .FB a{background-position:0 3px;} #loginbox dl.logo2.IG{ display:none;} .IG a{background-position:-48px 3px;}/* 20190529 修改 尚未更新 END */ /* Header 會員登入 */ #loginbox { width: auto; height:40px; margin-top:13px; position:relative; z-index:1000; text-align:right; float:right; } #loginbox dl{ margin-right:4px; border:solid 1px #d7d7d7; background-color:rgba(255, 255, 255, 0.9); border-radius: 8px; float:left; overflow: hidden;} #loginbox .menu{ width: auto; height:20px; padding:10px 30px; } #loginbox .menu a{ font-size:15px; color:#000; text-align:center; display:block;} #loginbox .menu a:hover{ color:#3b1614;} #loginbox dt{ width:130px; height:20px; padding:10px 10px 10px 0; background-color:#FFF; background:url(../Images/icon_bottom.png) no-repeat right; font-size:15px; text-align:center;transition: .5s; } #loginbox dd{ width:120px; height:20px; padding:10px; background-color:#FFF;transition: .5s;} #loginbox dd.bottom{ border-bottom:solid 1px #d7d7d7; border-bottom-right-radius:8px; border-bottom-left-radius:8px;} #loginbox dl dt:hover,#loginbox dl dd:hover, #loginbox dl .selected{ font-size:15px; color:#3b1614; background-color:#3b1614; text-align:center; } #loginbox dl dt:hover a,#loginbox dl dd:hover a, #loginbox dl .selected a{ color: #FFF;} #loginbox dl dd ul{ margin:-26px 0 0 196px; float:left; } #loginbox dl dt a, #loginbox dl dd a{ font-size:15px; color:#000; text-align:center; display:block; } /* Header 會員登入後畫面 */ #loginbox2 { width: auto; height:40px; margin-top:13px; position:relative; z-index:1000; text-align:right; float:right; } #loginbox2 dl{ margin-right:4px; border:solid 1px #d7d7d7; background-color:rgba(255, 255, 255, 0.9); text-align:center; border-radius: 8px; float:left; overflow: hidden; } #loginbox2 .menu{ width: auto; height:20px; padding:10px 30px; } #loginbox2 .menu a{ font-size:15px; color:#000; display:block;} #loginbox2 .menu a:hover{ color:#3b1614;} #loginbox2 dt{ width:200px; height:20px; padding:10px 10px 10px 0; background-color:#FFF; background:url(../Images/icon_bottom.png) no-repeat right; font-size:15px; text-align:center; } #loginbox2 dt span{color:#8B2331;/*font-weight:bold;*/padding:0 7px;}/* 191021修改 */ #loginbox2 dd{ width:200px; height:20px; padding:10px 10px 10px 0; background-color:#FFF; } #loginbox2 dd.bottom{ border-bottom:solid 1px #d7d7d7; -webkit-border-bottom-right-radius: 8px; -webkit-border-bottom-left-radius: 8px; -moz-border-bottom-right-radius: 8px; -moz-border-bottom-left-radius: 8px; border-bottom-right-radius:8px; border-bottom-left-radius:8px;} #loginbox2 dl dt:hover,#loginbox2 dl dd:hover, #loginbox2 dl .selected{ font-size:15px; color:#FFF; background-color:#3b1614; text-align:center; } #loginbox2 dt:hover span, #loginbox2 dl dt:hover a,#loginbox2 dl dd:hover a, #loginbox2 dl .selected a{ color: #FFF;} #loginbox2 dl dd ul{ margin:-26px 0 0 196px; float:left; } #loginbox2 dl dt a, #loginbox2 dl dd a{ font-size:15px; color:#000; display:block; } /* 浮動選單 */ #floatmenu{ width:100%; height:50px; background:rgba(59, 22, 20, 0.9); position:fixed; z-index:1200; top:-65px; -moz-box-shadow: 2px 2px 2px rgba(0,0,0,.4); -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.4); box-shadow:2px 2px 2px rgba(0,0,0,.4);} #floatmenu .menu{width:980px; margin:0 auto;} #floatmenu .menu .logo{ width:250px; height:35px; margin:7px 20px 0 0; background:url(../Images/floatlogo.png) no-repeat center; display:block; float:left;} #floatmenu .menu .link{ font-size:15px; font-weight:500; color:#fff; padding:0 13px; margin-top:15px; float:left; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition: background-color .5s;} #floatmenu .menu .link:hover{color: #97625f;} #floatmenu .menu .top{ width:20px; height:20px; margin-top:10px; padding:5px; background:url(../Images/icon.png) no-repeat -30px; background-color:transparent; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; display:block; float:right;} #floatmenu .menu .top:hover{ background-color:rgba(255, 255, 255, 0.9);} /* 主選單 */ #topmenu {width:100%; /*position:absolute;*/ z-index:999; left:0; } #topmenu .mainMenu { width:100%; background-color:rgba(48, 6, 3, 0.9); } #topmenu .mainMenu ul{ width:980px; margin:0 auto; color:#FFF; display:block;} #topmenu .mainMenu li{ width:130px; padding:5px; font-size:16px; line-height:20px; color:#fff; text-align:center; float:left; } #topmenu .mainMenu li:nth-child(2), #topmenu .mainMenu li:nth-child(2) a span{ width:110px; } #topmenu .mainMenu li:nth-child(3), #topmenu .mainMenu li:nth-child(3) a span{ width:150px; } #topmenu .mainMenu li a{ color:#FFF;} #topmenu .mainMenu li a span{ display:block; width:130px; font-size:10px; line-height:15px; color:#a4aba3;} #topmenu .mainMenu li a:hover span{ color:#FFF;} #topmenu .subMenu{ width:100%; text-align:left; background:url(../Images/menuBg.jpg); display:none;} #topmenu .subMenu h1{width:980px; margin:0 auto;} #topmenu .subMenu h1 dl{ width:130px; padding:10px 0 10px 0; float:left;} #topmenu .subMenu h1 dl dd{ padding:8px 0;} #topmenu .subMenu h1 dl dd a{ font-size:12px; color:#DDD; padding:3px 3px 3px 18px; display:block; } #topmenu .subMenu h1 dl dd a:hover{ color:#FFF; background:url(../Images/bean.png) no-repeat;} #topmenu .subMenu h1 dl.news{ width:130px; margin-left:19px; } #topmenu .subMenu h1 dl.store{ width:140px; } #topmenu .subMenu h1 dl.pd{ width:145px; } #topmenu .subMenu h1 dl.cfe{ width:130px;} #topmenu .subMenu h1 dl.lounge{ width:155px; } #topmenu .subMenu h1 dl.brown{ width:138px;} #topmenu .subMenu h1 dl.online{ /*width:110px;*/width:120px; } /* 主選單 手機版本 #topmenuMB { width:100%; position:absolute; top:0; left:50%; margin-left:-410px; z-index:0; color:#FFF; display:none; } #topmenuMB dl{ float:left; width:25%; } #topmenuMB dl dt,#topmenuMB dl dd,#topmenuMB dl dd ul li{ padding:0; } #topmenuMB dl dt.rollover,#topmenuMB dl dd.rollover,#topmenuMB dl dd ul li.rollover, #topmenuMB dl .selected{ background-color:#60d1e4;} #topmenuMB dl dd { position:relative; display:none;} #topmenuMB dl dd ul{ position: absolute; left: 100%; top: -1px;} #topmenuMB dl dd ul li{ width:190px;} #topmenuMB dl dt a, #topmenuMB dl dd a, #topmenuMB dl dd ul li a{ color:#FFF;} a.mobilemenu, a.mobilemenu > span, #floatmenu a.mobilemenu, #floatmenu a.mobilemenu > span{ display:none;} a.mobilemenu, #floatmenu a.mobilemenu{ width:50px; height:50px; margin:20px 10px 0 0; background:url(../Images/icon_50x50.png) no-repeat 0 0; -moz-border-radius: 50px; -khtml-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;} a.mobilemenu { float:right;} a.mobilemenu.rollover, #floatmenu a.mobilemenu.rollover{background:url(../Images/icon_50x50.png) no-repeat -50px 0; background-color:#3b1614; }*/ /* mainNaviBar & menubox BOX */ .topBar{width: 980px;display: inline-block;padding-bottom:20px;position: relative;text-align: left;} /* mainNaviBar */ .mainNaviBar{height: 20px;padding: 13px 0;font-size: 14px;text-align: right;color: #3b1614;right: 8px;top: -4px;width: 100%;display: block;text-align: left;} .mainNaviBar a{ padding:0 10px; color:#3b1614;font-weight:normal;} .mainNaviBar a:hover, .mainNaviBar a.selected{ color:#8B2331;} /* menubox */ .menubox {height: 45px;border: solid 1px #d7d7d7;background:#fff;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;display: inline-block;} .menubox .menu{float:left;} .menubox .menu a{ font-size:17px; line-height:20px; color:#000; padding:13px 40px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition:background-color .5s; display:block;font-weight:normal;} .menubox .menu a:hover,.menubox .menu .selected{ background:url(../Images/icon_right.png) no-repeat 1px; background-color:#3b1614; color:#fff;} .menubox .category{font-size:17px; line-height:20px; color:#000; padding:13px 40px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background:url(../Images/icon_right.png) no-repeat 1px; background-color:#3b1614; color:#fff; float:left;font-weight: normal;} .menuboxLG { height:45px; border:solid 1px #d7d7d7; background:#fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; position:absolute; left:0;} .menuboxLG .menu{float:left;} .menuboxLG .menu a{ font-size:17px; line-height:20px; color:#000; padding:13px 20px 13px 30px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition: background-color .5s; display:block;} .menuboxLG .menu a:hover,.menuboxLG .menu .selected{ background:url(../Images/icon_right.png) no-repeat 1px; background-color:#3b1614; color:#fff;} /* 選單並排 */ #topmenuMB dl.idea, #topmenuMB dl.member, #topmenuMB dl.related, #topmenuMB dl.contact, #topmenuMB dl.map, #topmenuMB dl.fbLink, #topmenuMB dl.catalog{width:49%;display:inline-block;vertical-align:top;} /* tablebox */ table { border-collapse: collapse; border-spacing: 0; } td,th { } .tablebox { width:97%; margin-bottom:20px; padding:15px; border:solid 1px #d7d7d7; background:#fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;} .tablebox a{ color:#8B2331;} .tablebox a:hover{ color:#3b1614;} .tablebox .category{ padding:10px; font-size:18px; font-weight:bold; color:#000; text-align:left; border-bottom:solid 3px #3b1614; } .tablebox .categoryP{ padding:23px 10px 10px 10px; font-size:18px; font-weight:bold; color:#000; text-align:center;} /* 20190529 修改 尚未更新 */ .tablebox .intro{ padding:10px; font-size:16px; color:#000; text-align:left; } /* 20190529 修改 尚未更新 END */ .tablebox .introL{ padding:10px; font-size:16px; line-height:25px; color:#000; text-align:left; } .tablebox .introL span{/*font-size:20px; line-height:30px; font-weight:bold;*/font-size:18px;line-height:30px;font-weight:normal;} .tablebox .introL table td{ padding: 5px 5px 5px 0;} .tablebox .btnT a{ font-size:16px; text-align:center; color:#000; padding:5px; border:solid 1px #d7d7d7; background:#fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition: background-color .5s; display:block;} .tablebox .btnT a:hover{ background-color:#3b1614; color:#fff;} .tablebox .red{ padding:10px; font-size:16px; color:#ff0000; text-align:center; } .tablebox .redL{ padding:10px; font-size:16px; color:#ff0000; text-align:left; } .tablebox .remind{ padding:10px; font-size:13px; color:#ff0000; text-align:left; } .tablebox th{ font-size:18px; font-weight:bold; color:#000; text-align:center;} .tablebox th:first-child{ } .tablebox th:nth-child(2){ width:55px; } .tablebox th:nth-child(3){ width:55px; } .tablebox th:nth-child(4) {width:65px; } .tablebox th:nth-child(5){ width:55px; } .tablebox th:nth-child(6){ width:55px; } .tablebox th:nth-child(7){ width:55px; } .tablebox th:nth-child(8) {width:70px; } .tablebox th:nth-child(9){ width:50px; } .tablebox th:nth-child(10) {width:50px; } .tablebox th:nth-child(11){ width:70px; } /* tablebox_small */ .tablebox_small { width:97%; margin:20px 0; border:solid 1px #d7d7d7; background:#fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;} .tablebox_small a{ color:#8B2331;} .tablebox_small a:hover{ color:#3b1614;} .tablebox_small .w1{ padding:10px; font-size:16px; font-weight:bold; color:#3b1614; text-align:center; border-bottom:solid 3px #3b1614; } .tablebox_small .w2{ padding:10px; font-size:14px; color:#000; text-align:center; border-bottom:dotted 1px #d7d7d7; } /* tablebox2 */ .tablebox2 { width:97%; margin-bottom:20px; padding:15px; border:solid 1px #d7d7d7; background:#fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;} .tablebox2 a{ color:#8B2331;} .tablebox2 a:hover{ color:#3b1614;} .tablebox2 .category{ padding:10px; font-size:18px; font-weight:bold; color:#000; text-align:center; border-bottom:solid 3px #3b1614; } .tablebox2 .categoryL{ padding:10px; font-size:18px; font-weight:bold; color:#000; text-align:center;} .tablebox2 .categoryP{ padding:23px 10px 10px 10px; font-size:18px; font-weight:bold; color:#000; text-align:center;} .tablebox2 .intro{ padding:10px; font-size:16px; color:#000; text-align:center; } .tablebox2 .introL{ padding:10px; font-size:16px; line-height:25px; color:#000; text-align:left; } .tablebox2 .introL span{ font-size:20px; line-height:30px; font-weight:bold; } .tablebox2 .btnT a{ font-size:16px; text-align:center; color:#000; padding:5px; border:solid 1px #d7d7d7; background:#fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition: background-color .5s; display:block;} .tablebox2 .btnT a:hover{ background-color:#3b1614; color:#fff;} .tablebox2 .red{ padding:10px; font-size:16px; color:#ff0000; text-align:center; } .tablebox2 .redL{ padding:10px; font-size:16px; color:#ff0000; text-align:left; } .tablebox2 .remind{ padding:10px; font-size:13px; color:#ff0000; text-align:left; } .tablebox2 th{ font-size:18px; font-weight:bold; color:#000; text-align:center;} .tablebox2 th:first-child{ } .tablebox2 th:nth-child(2){ width:55px; } .tablebox2 th:nth-child(3){ width:65px; } .tablebox2 th:nth-child(4) {width:55px; } .tablebox2 th:nth-child(5){ width:55px; } .tablebox2 th:nth-child(6){ width:65px; } .tablebox2 th:nth-child(7){ width:70px; } .tablebox2 th:nth-child(8) {width:60px; } .tablebox2 th:nth-child(9){ width:60px; } .tablebox2 th:nth-child(10) {width:110px; } .inputtxt{ width:95%; padding:10px; font-size:17px; color:#000; border:solid 1px #fff; background:#e6e6e6; border-radius: 8px;} .inputtxt2{ width:27%; padding:10px; font-size:17px; color:#000; border:solid 1px #fff; background:#e6e6e6; border-radius: 8px;} .inputtxt3{ width:10%; padding:10px; font-size:17px; color:#000; border:solid 1px #fff; background:#e6e6e6; border-radius: 8px;} .textareatxt{ width:95%; padding:10px; font-size:17px; color:#000; border:solid 1px #fff; background:#e6e6e6; border-radius: 8px;} /* 分頁 */ .paging_box { width:100%; height:40px; padding:0 10px 20px 0; clear:both;} .paging_box ul { float:right;} .paging_box li { width:40px; height:40px; margin:3px; float:left;} .paging_box li a { width:40px; height:30px; background-color:#fff; color: #2F2F2F; border:solid 1px #d7d7d7; padding:10px 0 0 0; font-size: 14px; text-align:center; display:block; border-radius: 8px; transition: background-color .5s;} .paging_box li a:hover, .paging_box li a:active, .paging_box .selected a { color: #fff; background-color:#8B2331;} .paging_box .L a { background:url(../Images/icon.png) no-repeat -86px;} .paging_box .R a { background:url(../Images/icon.png) no-repeat -56px;} /* mainFooter */ .mainFooter {width:100%; padding-top:30px; background:#3b1614;} .mainFooter .copyright{ font-size:11px; line-height:15px; color:#97625f; text-align:center; padding:20px 0 30px 0; } .footerBox { min-width:880px; margin:0 auto; display: inline-block;} .footerBox dl, .footerBox dt, .footerBox dd{float:left;text-align:left;} .footerBox dl {width:160px; } .footerBox dl.width1{width:160px; } .footerBox dl.width1 dt:nth-child(2){ margin-top:100px; padding-top:50px; } .footerBox dl.width2{width:300px; } .footerBox dl.width2 dt:nth-child(2){ margin-top:100px; padding-top:50px; } .footerBox dl.app{ width: 100px;} .footerBox dt {width:100%; height:25px; font-size:15px; line-height:25px; font-weight:500; color:#fff; margin-bottom:12px; transition: background-color .5s;} .footerBox dt a{color:#fff; display:block; font-weight: 300;} .footerBox dt a:hover{ text-decoration:underline;} .footerBox dd {width:150px; font-size:13px; line-height:15px; margin-bottom:8px; transition: background-color .5s;} .footerBox dd a{color:#cc9c9a; display:block; } .footerBox dd a:hover{ color:#fff;} .footerBox .t2 {width:100%; height:25px; font-size:15px; line-height:25px; font-weight:500; color:#fff; margin-bottom:7px; transition: background-color .5s;} .footerBox .t2 a{color:#fff; display:block; } .footerBox .t2 a:hover{ text-decoration:underline;} /* 20190529 修改 尚未更新 */ .footerBox .t2.fb, .footerBox .t2.ig{width:40px;height:40px;display:inline-block;} .footerBox .t2.fb a, .footerBox .t2.ig a{display:block;width:40px;height:40px;background-image:url(../Images/LOGO2.png);background-repeat:no-repeat;background-size:210%;} .footerBox .t2.fb a{background-position:0 0;} .footerBox .t2.ig a{background-position:-48px 0;} .footerBox .t2.fb a:hover{background-position:0 -46px;} .footerBox .t2.ig a:hover{background-position:-48px -46px;} /* 20190529 修改 尚未更新 */ .mainmenu{text-align:center;width:100%;background-color:rgba(255,255,255,0.5);height:45px;position:absolute;z-index:9; /*border-bottom:1px #d7d7d7 solid;*/padding-bottom:10px;z-index:999;} .topmenu{width:985px;z-index:99;color:#FFF;margin:0 auto;position:absolute;left:50%;margin-left:-492px;} .topmenu dl{float:left; width:14%; transition:.5s; border-radius: 8px; overflow: hidden;} .topmenu dl dt,.topmenu dl dd,.topmenu dl dd ul li{padding:5px; transition: .5s;} .topmenu dl dt{position:relative;} .topmenu dl dt b{font-weight:700;} .topmenu dl:hover dt:after{content: " ";width: 0;height: 0;border-style: solid;border-width: 6px 6px 0 6px;border-color: #3b1614 transparent transparent transparent;display: inline-block; position:absolute;z-index: 9;bottom: -6px;left: 50%;margin-left: -5px;} .topmenu dl dt.rollover,.topmenu dl:hover dd,.topmenu dl dd ul li.rollover, .topmenu dl .selected{/*background-color:rgba(255, 255, 255, 1);*/ background-color: #3b1614;} .topmenu dl dd { position:relative; display:none;} .topmenu dl dd:nth-child(2){/*margin-top:10px;*/ padding-top: 10px;} .topmenu dl dd ul{ position: absolute; left: 100%; top: -1px;} .topmenu dl dd ul li{ width:190px;} .topmenu dl dt a, .topmenu dl dd a, .topmenu dl dd ul li a{color:#8b2131;font-weight:bold;font-size:17px;} .topmenu dl dt.rollover a, .topmenu dl:hover dd a, .topmenu dl:hover dd ul li a, .topmenu dl dt.rollover a span, .topmenu dl:hover dd a span, .topmenu dl:hover dd ul li a span{color:#FFF;} .topmenu dl a span{display:block;width: 130px;font-size: 10px;line-height: 15px;color:#b1a8a9;font-weight:normal;} .topmenu dl dd a{font-size:13px; font-weight: 100; padding: 3px;display: block; text-align: center; color:#FFF;} a.mobilemenu, a.mobilemenu > span, .floatmenu a.mobilemenu, .floatmenu a.mobilemenu > span{ display:none;} a.mobilemenu, .floatmenu a.mobilemenu{ width:50px; height:50px; background:url(../Images/icon_50x50.png) no-repeat 0 0; -moz-border-radius: 50px; -khtml-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;} a.mobilemenu { float:right;} a.mobilemenu.rollover, .floatmenu a.mobilemenu.rollover{background:url(../Images/icon_50x50.png) no-repeat -50px 0; background-color:rgba(45, 45, 45, 0.8); top:15px; right:10px;} .topmenu dl:hover dd{ color:#FFF; background-color:#8b2131;} .topmenu dl:hover dd:hover{ background-color:#3b1614;} /* 20190529 修改 尚未更新 END */ /* htmleditor HTML編輯器 */ .htmlEditor .cke_inner, .htmlEditor .cke_wysiwyg_frame, .htmlEditor .cke_wysiwyg_div{ background-color:transparent;} .htmlEditor ul, .htmlEditor ol, .cke_editable ul, .cke_editable ol{ padding-left:30px;} .htmlEditor img{ max-width:100%;} @media screen and (max-width: 640px) { .bodybox { width:100%; min-width:640px; } /* mainHeader OK! */ .mainHeader { width:270px; height:90px; float:left; } .headerBox { width:270px; height:67px; float:left; } /* contentBox OK! */ .contentBox980{ width:100%; } .contentBox700{ width:100%; } .btn{ width:auto; margin:0 5px 30px 5px; float:right; } .btn a{ font-size:22px; padding:15px 30px; } .btnR{ width:auto; margin:0 5px 30px 5px; float:right; } .btnR a{ font-size:22px; padding:15px 30px; } .btn.B{ width:auto; margin:0 5px 30px 5px; float:right; } .btn.B a{ font-size:22px; padding:15px 30px; } .btnR{ width:auto; margin:0 5px 30px 5px; float:right; } .btnR a{ font-size:22px; padding:15px 30px; } .btnL{ width:auto; margin:0 5px 30px 5px; float:left;} .btnL a{ font-size:22px; padding:15px 30px; } .btnPC{ width:auto; margin:0 0 30px 0; float:left;} .btnPC a{ font-size:22px; padding:15px 30px; } .btnPC2{ width:auto; margin:0 0 30px 0; float:left;} .btnPC2 a{ font-size:22px; padding:15px 30px; } /*.btnBox a.btn{ font-size:22px; line-height:30px; }*/ /* left 選單 OK! */ .leftBox{ width:100%; } .leftBox dl{ float:none; } .leftBox dt{ margin:0 5px 5px 0; padding:10px 30px; font-size:23px; } .leftBox dd a{ font-size:20px; line-height:15px; } .leftBox dd.tpe{ height:55px; width:240px; } /* 膠囊咖啡 */ .menucaff{ width:190px; margin-left:90px; text-align:center; float:right; position:absolute; z-index:0; } .menucaff a{ padding:10px 0; font-size:20px; display:inline-block; } /* Header 會員登入 OK! */ #loginbox{position: absolute;right: 65px; z-index:5;} #loginbox dl:nth-child(2){} /* Header 會員登入後畫面 OK! */ #loginbox2{ } #loginbox2 dl:nth-child(2){ display:none; } /* 浮動選單 OK! */ #floatmenu{ display:none; } /* 主選單 手機版本 */ a.mobilemenu, #floatmenu .menu a.mobilemenu { display:inline-block; padding:0;} a.mobilemenu{position:absolute;right: 5px;z-index: 99999999;top: 15px;} #floatmenu { height:70px; } #floatmenu .menu a.mobilemenu{ margin:0;} .topmenu{ display:none; } #topmenuMB{ width:89%; height:100vh; background:url(../Images/menuBg.jpg); margin-left:0; left:-90%; z-index:999999; position:fixed; text-align:left; overflow-y:auto; display:block; } #topmenuMB dl{float:none;width:100%;} #topmenuMB dl:last-child{margin-bottom:110px;} #topmenuMB dl dt{ padding:30px 0; border:none; font-size:30px; border-bottom:solid 1px #381a14; position:relative; } #topmenuMB dl dt.rollover{ background-color:#8b2331; } #topmenuMB dl dt span{ margin-left:15px; font-size:25px; color:#fff; display:inline-block;width:auto;} #topmenuMB dl dd{ border:none; font-size:25px; background-color:#db596c; } #topmenuMB dl dd a{ padding:20px 0 20px 20px; background-color:#fff; color:#000; display:block; } #topmenuMB dl dd a:hover{ background-color:#e6e6e6; color:#000; } #topmenuMB dl .selected{ background-color:#d3b78f;} #topmenuMB dl dd ul{ position: relative; left:auto; top:auto; } #topmenuMB dl dd ul li{ width:auto; background-color:rgba(146, 223, 236, 0.9); position: relative; } #topmenuMB dl dt a{ margin-left:15px;color:#FFF;display:block;} /*原來的 #topmenuMB{ width:89%; height:100vh; background:url(../Images/menuBg.jpg); margin-left:0; left:-90%; z-index:999999; position:fixed; text-align:left; overflow-y:auto; display:block; } #topmenuMB dl{ float:none; width:100%; } #topmenuMB dl dt{ padding:30px 0; border:none; font-size:30px; border-bottom:solid 1px #d3b78f; position:relative; } #topmenuMB dl dt.rollover{ background-color:#704a00; } #topmenuMB dl dt span{ margin-left:15px; font-size:25px; color:#d3b78f; } #topmenuMB dl dd{ border:none; font-size:25px; background-color:#db596c; } #topmenuMB dl dd a{ padding:20px 0 20px 20px; border-bottom:solid 1px #704a00; background-color:#d3b78f; color:#704a00; display:block; } #topmenuMB dl dd a:hover{ background-color:#704a00; color:#fff; } #topmenuMB dl .selected{ background-color:#d3b78f;} #topmenuMB dl dd ul{ position: relative; left:auto; top:auto; } #topmenuMB dl dd ul li{ width:auto; background-color:rgba(146, 223, 236, 0.9); position: relative; } #topmenuMB dl dt a{ margin-left:15px; }*/ /* menu 右側icon, 僅需設好50x50 icon圖 */ #topmenuMB dl dt::after, #topmenuMB dl dd::after, #topmenuMB dl dd ul li::after{ background:url(../Images/icon_50x50.png) no-repeat -50px -200px; position:absolute; content: ""; display:block; right:5px; top:15px; width:50px; height:50px; overflow:hidden; } #topmenuMB dl dt.lv::after, #topmenuMB dl dd.lv::after{ background:url(../Images/icon_50x50.png) no-repeat -50px -200px;} #topmenuMB dl dt.rollover::after, #topmenuMB dl dd.rollover::after{ background:url(../Images/icon_50x50.png) no-repeat -50px -1` 50px;} /* mainNaviBar & menubox BOX OK! */ .topBar{ width:100%; height:auto; padding:0; position: static; } /* mainNaviBar OK! */ .mainNaviBar{ height:auto; padding:0 0 13px 0; font-size:18px; text-align:left; position: static; } /* menubox OK! */ .menubox {height:50px;position: static;display:block;} .menubox .menu{ float:left; margin-bottom:30px; } .menubox .menu a{ font-size:22px; padding:15px 30px; } .menubox .category{ font-size:22px; padding:15px 30px; margin-bottom:20px; } .menuboxLG { height:105px; margin-bottom:30px; position:static; } .menuboxLG .menu{ float:left; margin-bottom:5px; } .menuboxLG .menu a{ font-size:22px; padding:15px 30px; } /* tablebox */ table { overflow-x: scroll; display: block; } .tablebox { width:95%; margin:20px 0; padding:15px; border:solid 1px #d7d7d7; } .tablebox .category{ padding:10px; font-size:22px; font-weight:bold; color:#000; text-align:center; border-bottom:solid 3px #3b1614; } .tablebox .categoryL{ padding:10px; font-size:22px; } .tablebox .categoryP{ padding:23px 10px 10px 10px; font-size:22px; } .tablebox .intro{ padding:10px; font-size:22px; line-height:35px; } .tablebox .introL{ padding:10px; font-size:22px; line-height:35px; } .tablebox .introL span{ font-size:22px; line-height:35px; } .tablebox .btnT a{ font-size:20px; } .tablebox .red{ font-size:18px; line-height:25px; } .tablebox .redL{ font-size:18px; line-height:25px; } .tablebox .remind{ font-size:18px; line-height:25px; } .tablebox th{ font-size:20px; } .tablebox th:first-child{ } .tablebox th:nth-child(2){ width:55px; } .tablebox th:nth-child(3){ width:55px; } .tablebox th:nth-child(4) {width:65px; } .tablebox th:nth-child(5){ width:55px; } .tablebox th:nth-child(6){ width:55px; } .tablebox th:nth-child(7){ width:55px; } .tablebox th:nth-child(8) {width:70px; } .tablebox th:nth-child(9){ width:50px; } .tablebox th:nth-child(10) {width:50px; } .tablebox th:nth-child(11){ width:70px; } /* tablebox2 */ .tablebox2 { width:97%; margin-bottom:20px; padding:15px; border:solid 1px #d7d7d7; background:#fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;} .tablebox2 a{ color:#8B2331;} .tablebox2 a:hover{ color:#3b1614;} .tablebox2 .category{ padding:10px; font-size:18px; font-weight:bold; color:#000; text-align:center; border-bottom:solid 3px #3b1614; } .tablebox2 .categoryL{ padding:10px; font-size:18px; font-weight:bold; color:#000; text-align:center;} .tablebox2 .categoryP{ padding:23px 10px 10px 10px; font-size:18px; font-weight:bold; color:#000; text-align:center;} .tablebox2 .intro{ padding:10px; font-size:20px; color:#000; text-align:center; } .tablebox2 .introL{ padding:10px; font-size:20px; line-height:25px; color:#000; text-align:left; } .tablebox2 .introL span{ font-size:20px; line-height:30px; } .tablebox2 .btnT a{ font-size:16px; text-align:center; color:#000; padding:5px; border:solid 1px #d7d7d7; background:#fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition: background-color .5s; display:block;} .tablebox2 .red{ font-size:18px; line-height:25px; } .tablebox2 .redL{ font-size:18px; line-height:25px; } .tablebox2 .remind{ font-size:18px; line-height:25px; } .tablebox2 th{ font-size:18px; font-weight:bold; color:#000; text-align:center;} .tablebox2 th:first-child{ } .tablebox2 th:nth-child(2){ width:55px; } .tablebox2 th:nth-child(3){ width:65px; } .tablebox2 th:nth-child(4){ width:55px; } .tablebox2 th:nth-child(5){ width:55px; } .tablebox2 th:nth-child(6){ width:65px; } .tablebox2 th:nth-child(7){ width:70px; } .tablebox2 th:nth-child(8){ width:60px; } .tablebox2 th:nth-child(9){ width:60px; } .tablebox2 th:nth-child(10){ width:110px; } .inputtxt{ width:95%; font-size:20px; line-height:30px; } .inputtxt2{ width:45%; font-size:20px; line-height:30px; } .inputtxt3{ width:12%; font-size:20px; line-height:30px; } .textareatxt{ width:95%; font-size:20px; line-height:30px; } /* 分頁 OK! */ .paging_box { height:45px; padding:0 20px 20px 0; } .paging_box li { width:45x; height:45px; margin:10px; } .paging_box li a { width:45px; height:35px; padding:10px 0 0 0; font-size:18px; } /* mainFooter OK! */ .mainFooter .copyright{ font-size:18px; padding:10px 0 40px 0; } .footerBox { display:none; } /* 190408首頁修改 */ a.mobilemenu, #floatmenu .menu a.mobilemenu { display:inline-block; padding:0;} #floatmenu { height:70px;} #floatmenu .menu a.mobilemenu{ margin:10px 0 0 10px;} #topmenu{width:80%; height:100vh; background-color:rgba(0, 0, 0, 0.8); margin-left:0; left:-90%; z-index:999999; position:fixed; text-align:left; overflow-y:auto; -moz-box-shadow:0px 0px 15px rgba(0,0,0,.8); -webkit-box-shadow: 0px 0px 15px rgba(0,0,0,.8); box-shadow: 0px 0px 15px rgba(0,0,0,.8); font-size:32px; } .topmenu dl{ float:none; width:100%; } .topmenu dl dt,.topmenu dl dd,.topmenu dl dd ul li{ padding:20px 0; border:none;} .topmenu dl dt.rollover,.topmenu dl dd.rollover,.topmenu dl dd ul li.rollover, .topmenu dl .selected{ background-color:rgba(96, 209, 228, 0.9);} .topmenu dl dd {} .topmenu dl dd ul{ position: relative; left:auto; top:auto; margin-top:10px; } .topmenu dl dd ul li{ width:auto; background-color:rgba(146, 223, 236, 0.9); position: relative;} .topmenu dl dt a, #topmenu dl dd a, .topmenu dl dd ul li a{ margin-left:15px;} .topmenu dl dt{ border-top:solid 1px #336699; border-bottom:solid 1px #408080; position:relative;} /* menu 右側icon, 僅需設好50x50 icon圖 */ .topmenu dl dt::after, .topmenu dl dd::after, .topmenu dl dd ul li::after{ background:url(../Images/icon_50x50.png) no-repeat -50px -50px; position:absolute; content: ""; display:block; right:5px; top:15px; width:50px; height:50px; overflow:hidden; } .topmenu dl dt.lv::after, .topmenu dl dd.lv::after{ background:url(../Images/icon_50x50.png) no-repeat -50px -100px;} .topmenu dl dt.rollover::after, .topmenu dl dd.rollover::after{ background:url(../Images/icon_50x50.png) no-repeat -50px -150px;} /*#floatmenu{ display:none;}*/ .floatmenu .menu{width:100%; min-width:640px;} .floatmenu .menu .logo, .floatmenu .menu a{ padding:0 15px;} .floatmenu .menu a{display:none;} .mainmenu{background-color:rgba(255,255,255,0);} .bx-pager a {width:20px;height:20px;} /* 門市資訊 */ .photo-item ul li {width:100%;height:414px;} .photo-item ul li img{width:640px;} }