@media screen and (min-width: 1024px) { html { margin: 0; padding: 0; } body { font-family: "微軟正黑體", "sans-serif"; color: #2b2b2b; } .Header_Desktop { display: block; } .Header_Mobile { display: none; } .Footer_Desktop { display: block; } .Footer_Mobile { display: none; } .H1Tag { display: inline; font-size: 16px; color: #959393; } .topmenuTD { border: 1px solid #e3e3e3; border-bottom-style: dashed; padding-top: 5px; padding-bottom: 5px; } .topmenu { font-family: Arial, Helvetica, sans - serif; font-size: 14px; color: #4f4f4f; text-align: center; vertical-align: middle; text-decoration: none; padding: 7px; } a.topmenu:link { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #4f4f4f; text-align: center; vertical-align: middle; text-decoration: none; padding: 7px; } a.topmenu:visited { font-family: Arial, Helvetica, sans - serif; font-size: 14px; color: #4f4f4f; text-align: center; vertical-align: middle; text-decoration: none; padding: 7px; } a.topmenu:active { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #4f4f4f; text-align: center; vertical-align: middle; text-decoration: none; padding: 7px; } a.topmenu:hover { color: #a53f53; text-decoration: underline; padding: 7px; } .content { color: #383838; } a.content:link { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #5b5b5b; text-align: center; vertical-align: middle; text-decoration: none; } a.content:visited { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #5b5b5b; text-align: center; vertical-align: middle; text-decoration: none; } a.content:active { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #5b5b5b; text-align: center; vertical-align: middle; text-decoration: none; } a.content:hover { color: #8a8a8a; font-size: 14px; text-decoration: underline; } .SearchFormTable { } .SelectElement { background-color: #ffffff; } .btnGreen { font-size: 20px; font-weight: bold; color: #ffffff; padding-top: 20px; padding-bottom: 20px; width: 200px; background-color: #4caf50; } .menu_left { font-family: Arial, Helvetica, sans-serif; font-size: 14px; height: 40px; color: #ffffff; vertical-align: middle; background-color: #ffffff; } a.menu_left:link { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #745656; vertical-align: middle; text-decoration: none; } a.menu_left:visited { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #745656; vertical-align: middle; text-decoration: none; } a.menu_left:active { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #745656; vertical-align: middle; text-decoration: none; } a.menu_left:hover { color: #a53f53; text-decoration: underline; } .menu_left_gray { font-family: Arial, Helvetica, sans-serif; font-size: 14px; height: 40px; color: #745656; vertical-align: middle; background-color: #edecec; text-decoration: none; } a.menu_left_gray:link { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #745656; vertical-align: middle; text-decoration: none; } a.menu_left_gray:visited { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #745656; vertical-align: middle; text-decoration: none; } a.menu_left_gray:active { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #745656; vertical-align: middle; text-decoration: none; } a.menu_left_gray:hover { color: #a53f53; text-decoration: underline; } .prd_nameDiv { width: 250px; height: 26px; text-align: left; overflow: hidden; margin-bottom: 10px; } .prd_name { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 400; line-height: 16px; color: #383838; text-align: left; padding: 5px 0px 0px 0px; } a.prd_name:link { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 400; color: #5b5b5b; text-align: left; vertical-align: middle; text-decoration: none; } a.prd_name:visited { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 400; color: #5b5b5b; text-align: left; vertical-align: middle; text-decoration: none; } a.prd_name:active { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 400; color: #5b5b5b; text-align: left; vertical-align: middle; text-decoration: none; } a.prd_name:hover { color: #8a8a8a; text-decoration: underline; } .DispatchBox { } .ProdNameBox { width: 400px; height: 20px; text-align: left; overflow: hidden; } .ProdNameBox1 { width: 300px; height: 20px; text-align: left; overflow: hidden; } .prize { font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 16px; color: #e03243; padding: 0 0 0 5px; } a.prize:link { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #e03243; text-align: center; vertical-align: middle; text-decoration: underline; } a.prize:visited { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #e03243; text-align: center; vertical-align: middle; text-decoration: underline; } a.prize:active { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #e03243; text-align: center; vertical-align: middle; text-decoration: underline; } a.prize:hover { color: #f17682; text-decoration: underline; } #DeskMenu { display: block; } .PromoProd { width: 260px; height: 260px; } .ProdListDesk { display: block; } .ProdListMobile { display: none; } .ProdListPic { width: 390px; height: 390px; } .ProdListPic1 { width: 300px; height: 300px; } .DeliverTypeStyle { display: inline; } .DisplaySwitchMobile { display: none; } .DisplaySwitchDesk { display: block; } .outerBox { border: 1px solid #ccc; text-align: left; background-color: #fff; } .HomeADPicture { width: 816px; height: auto; } .tablehead { background-color: #777777; height: 25px; font-size: 14px; color: #ffffff; } .td_orange { border: #e5950f 1px solid; vertical-align: middle; padding: 5px 5px 5px 5px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; } .td_gray { border: #848484 1px solid; vertical-align: middle; padding: 5px 5px 5px 5px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; } .td05 { vertical-align: middle; padding: 5px 5px 5px 5px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #5b5b5b; } .td05_S { vertical-align: top; padding: 5px 5px 5px 5px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #5b5b5b; } .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; max-height: 100%; background-color: rgba(0, 0, 0, 0.8); align-items: center; justify-content: center; transition: opacity 0.5s ease; } .modal-content { position: relative; width: 200px; height: 200px; max-height: 95%; border-radius: 5px; overflow: hidden; animation: zoomIn 0.5s; } @keyframes zoomIn { from { transform: scale(0.6); } to { transform: scale(1); } } .modal.show { display: flex; opacity: 1; } .close { position: absolute; z-index: 1100; top: 10px; right: 15px; color: #ffffff; font-size: 35px; font-weight: bold; cursor: pointer; transition: transform 0.3s; } } @media screen and (max-width: 1024px) { body { font-family: "微軟正黑體", "sans-serif"; color: #2b2b2b; } input { border-color: #999; } .Header_Desktop { display: none; } .Header_Mobile { display: block; } .Footer_Desktop { display: none; } .Footer_Mobile { display: block; } .H1Tag { display: inline; font-size: 16px; color: #959393; } .topmenu { font-size: 12px; width: 70px; border: solid 1px #444444; border-radius: 3px; color: #444444; text-decoration: none; padding: 3px 5px 3px 5px; } .content { font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 16px; color: #5b5b5b; vertical-align: middle; text-decoration: none; } a.content:link { color: #5b5b5b; text-align: center; } a.content:visited { color: #5b5b5b; text-align: center; vertical-align: middle; text-decoration: none; } a.content:active { color: #5b5b5b; text-align: center; vertical-align: middle; text-decoration: none; } a.content:hover { color: #8a8a8a; font-size: 14px; text-decoration: underline; } .content_info { font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 16px; color: #e5004a; } .SearchFormTable { padding: 4px; } .SelectElement { background-color: #ffffff; } .btnGreen { font-size: 20px; font-weight: bold; color: #ffffff; padding-top: 20px; padding-bottom: 20px; width: 200px; background-color: #4caf50; } .CatalogStyle { position: fixed; width: 100%; height: 100%; z-index: 99; top: 180px; display: none; -webkit-overflow-scrolling: touch; overflow-y: scroll; } .CatalogStyle iframe { height: 90%; width: 85%; } .ClassStyle { position: fixed; width: 100%; height: 100%; z-index: 99; top: 180px; display: none; -webkit-overflow-scrolling: touch; overflow-y: scroll; } .ClassStyle iframe { height: 90%; width: 85%; } .prd_nameDiv { height: 50px; text-align: left; } .prd_name { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 400; line-height: 16px; color: #383838; text-align: left; padding: 5px 0px 0px 0px; text-decoration: none; } a.prd_name:link { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 400; color: #5b5b5b; text-align: left; vertical-align: middle; text-decoration: none; } a.prd_name:visited { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 400; color: #5b5b5b; text-align: left; vertical-align: middle; text-decoration: none; } a.prd_name:active { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 400; color: #5b5b5b; text-align: left; vertical-align: middle; text-decoration: none; } a.prd_name:hover { color: #8a8a8a; text-decoration: underline; } .DispatchBox { max-width: 200px; } .ProdNameBox { width: 160px; height: 70px; text-align: left; } .prize { font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 16px; color: #e03243; padding: 0 0 0 5px; } a.prize:link { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #e03243; text-align: center; vertical-align: middle; text-decoration: underline; } a.prize:visited { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #e03243; text-align: center; vertical-align: middle; text-decoration: underline; } a.prize:active { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #e03243; text-align: center; vertical-align: middle; text-decoration: underline; } a.prize:hover { color: #f17682; text-decoration: underline; } #DeskMenu { display: none; } .PromoProd { width: 180px; height: 180px; } .ProdListDesk { display: none; } .ProdListMobile { display: block; } .ProdListPic { width: 180px; height: 180px; } .ProdListPic1 { width: 180px; height: 180px; } .DeliverTypeStyle { display: block; } .DisplaySwitchMobile { display: block; } .DisplaySwitchDesk { display: none; } .btn-group .button { background-color: #4caf50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; float: left; } .btn-group .button:hover { background-color: #3e8e41; } .HomeADPicture { width: 100%; height: auto; } .tablehead { background-color: #777777; height: 25px; font-size: 14px; color: #ffffff; } .td_orange { border: #e5950f 1px solid; vertical-align: middle; padding: 5px 5px 5px 5px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; } .td_gray { border: #848484 1px solid; vertical-align: middle; padding: 5px 5px 5px 5px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; } .td05 { vertical-align: middle; padding: 5px 5px 5px 5px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #5b5b5b; } .td05_S { vertical-align: top; padding: 5px 5px 5px 5px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #5b5b5b; } .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); align-items: center; justify-content: center; transition: opacity 0.5s ease; } .modal-content { position: relative; width: 200px; height: 200px; max-width: 95%; border-radius: 5px; overflow: hidden; animation: zoomIn 0.5s; } @keyframes zoomIn { from { transform: scale(0.6); } to { transform: scale(1); } } .modal.show { display: flex; opacity: 1; } .close { position: absolute; background-color: #333333; z-index: 1100; top: 10px; right: 15px; color: #ffffff; font-size: 35px; font-weight: bold; cursor: pointer; transition: transform 0.3s; } }