/* 主要顏色 深咖啡 #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; } .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; -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; } .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;} /* 膠囊咖啡 */ .menucaff{ width: auto; float:right; } .menucaff a{ padding:10px 30px; font-size:15px; color:#000; text-align:center; display:inline-block; } .menucaff a:hover{ color:#3b1614; } /* 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); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; float:left; } #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; } #loginbox dd{ width:120px; height:20px; padding:10px; background-color:#FFF;} #loginbox 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;} #loginbox dl dt:hover,#loginbox dl dd:hover, #loginbox dl .selected{ font-size:15px; color:#3b1614; background-color:#fff; text-align:center; } #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; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; float:left; } #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; } #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:#3b1614; background-color:#fff; text-align:center; } #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:bold; 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:120px;} #topmenu .subMenu h1 dl.online{ width:125px; } /* 主選單 手機版本 */ #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; height:50px; padding-bottom:20px; position:relative; } /* mainNaviBar */ .mainNaviBar{ height:20px; padding: 13px 0; font-size:14px; text-align:right; color:#3b1614; position: absolute; right: 8px; top: -4px;} .mainNaviBar a{ padding:0 10px; color:#3b1614;} .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; position:absolute; left:0;} .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;} .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;} .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;} /* 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:center; border-bottom:solid 3px #3b1614; } .tablebox .categoryL{ padding:10px; font-size:18px; font-weight:bold; color:#000; text-align:center;} .tablebox .categoryP{ padding:23px 10px 10px 10px; font-size:18px; font-weight:bold; color:#000; text-align:center;} .tablebox .intro{ padding:10px; font-size:16px; color:#000; text-align:center; } .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; } .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; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;} .inputtxt2{ width:27%; padding:10px; font-size:17px; color:#000; border:solid 1px #fff; background:#e6e6e6; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;} .inputtxt3{ width:10%; padding:10px; font-size:17px; color:#000; border:solid 1px #fff; background:#e6e6e6; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;} .textareatxt{ width:95%; padding:10px; font-size:17px; color:#000; border:solid 1px #fff; background:#e6e6e6; -webkit-border-radius: 8px; -moz-border-radius: 8px; 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; -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; } .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 {width:980px; margin:0 auto;} .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 dt {width:100%; height:25px; font-size:15px; line-height:25px; font-weight:bold; color:#fff; margin-bottom:12px; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition: background-color .5s;} .footerBox dt a{color:#fff; display:block; } .footerBox dt a:hover{ text-decoration:underline;} .footerBox dd {width:150px; font-size:13px; line-height:15px; margin-bottom:8px; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-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:bold; color:#fff; margin-bottom:7px; transition: background-color .5s; -moz-transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition: background-color .5s;} .footerBox .t2 a{color:#fff; display:block; } .footerBox .t2 a:hover{ text-decoration:underline;} @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:left; } .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{ } #loginbox dl:nth-child(2){ display:none; } /* 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;} #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 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; } #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; } /*原來的 #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; } .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; } }