#footer { z-index: 999; } /*------- PC版 -------*/ /*-------選單--------*/ .menu_wrap { width: 100%; /*height: 100%;*/ /*padding-top: 110px;*/ /*overflow: hidden;*/ background-repeat: no-repeat; background-position: top center; } .menu_box { width: 80%; height: 800px; padding: 0 5px; margin-left: 20%; margin-top: 40px; } .soon_game { width: 94%; margin: 0 3% 10px 3%; overflow: hidden; } .soon_game .soonLogo .soon_game .soonLogo img { width: 85% !important; margin: 0 auto; text-align: center; } .soon_game .soonWord { width: 100%; line-height: 24px; text-align: center; font-size: 18px; color: rgb(50, 125, 175); font-weight: bold; letter-spacing: 1px; text-shadow: -1.5px -1.5px 1px rgb(255, 255, 255), 1.5px -1.5px 1px rgb(255, 255, 255), -1.5px 1.5px 1px rgb(255, 255, 255), 1.5px 1.5px 1px rgb(255, 255, 255), 2px 2px 2px rgb(255, 255, 255); } .soon_game .soonIcon { width: 100%; height: 114px; text-align: center; margin: 5px; background-color: rgb(255, 255, 255); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; box-shadow: 0px 0px 5px rgba(62, 62, 62, .3); -webkit-box-shadow: 0px 0px 5px rgba(62, 62, 62, .3); -moz-box-shadow: 0px 0px 5px rgba(62, 62, 62, .3); } .soon_game .soonIcon span { width: 124px; line-height: 62px; font-size: 92px; margin: 27px 0; padding: 0 10px; border-right: 1px solid rgb(50, 125, 175); /*line-height:24px;*/ text-align: center; color: rgb(50, 125, 175); } .soon_game .soonIcon span:hover { color: rgb(41, 100, 140); cursor: pointer; } .soon_game .soonIcon span:last-child { border-right: none; } .menuPick { width: 100%; height: 600px; margin: 5px; background-color: rgb(255, 255, 255); position: relative; background-repeat: no-repeat; background-size: cover; background-position: top center; z-index: 1; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; box-shadow: 0px 0px 5px rgba(62, 62, 62, .3); -webkit-box-shadow: 0px 0px 5px rgba(62, 62, 62, .3); -moz-box-shadow: 0px 0px 5px rgba(62, 62, 62, .3); overflow: hidden; } .menuPick .menuTitle { width: 230px; height: 100%; padding: 15px 0; font-size: 21px; font-weight: bold; text-align: center; color: rgb(255, 255, 255); text-indent: -10px; position: absolute; top: 0; left: 0; z-index: 1; -webkit-clip-path: polygon(0 0, 100% 0, 40% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 40% 100%, 0% 100%); } /*.live_title { background: linear-gradient(270deg, rgba(115, 70, 255, 1) 60%, rgba(20, 0, 70, .8) 90%); background: -moz-linear-gradient(270deg, rgba(115, 70, 255, 1) 60%, rgba(20, 0, 70, .8) 90%); background: -webkit-linear-gradient(270deg, rgba(115, 70, 255, 1) 60%, rgba(20, 0, 70, .8) 90%); background: -o-linear-gradient(270deg, rgba(115, 70, 255, 1) 60%, rgba(20, 0, 70, .8) 90%); } .lotter_title { background: linear-gradient(270deg, rgba(250, 115, 0, 1) 60%, rgba(60, 30, 0, .8) 90%); background: -moz-linear-gradient(270deg, rgba(250, 115, 0, 1) 60%, rgba(60, 30, 0, .8) 90%); background: -webkit-linear-gradient(270deg, rgba(250, 115, 0, 1) 60%, rgba(60, 30, 0, .8) 90%); background: -o-linear-gradient(270deg, rgba(250, 115, 0, 1) 60%, rgba(60, 30, 0, .8) 90%); } .electronics_title { background: linear-gradient(270deg, rgba(75, 170, 255, 1) 60%, rgba(0, 10, 70, .8) 90%); background: -moz-linear-gradient(270deg, rgba(75, 170, 255, 1) 60%, rgba(0, 10, 70, .8) 90%); background: -webkit-linear-gradient(270deg, rgba(75, 170, 255, 1) 60%, rgba(0, 10, 70, .8) 90%); background: -o-linear-gradient(270deg, rgba(75, 170, 255, 1) 60%, rgba(0, 10, 70, .8) 90%); } .chessboard_title { background: linear-gradient(270deg, rgba(0, 225, 225, 1) 60%, rgba(0, 55, 45, .8) 90%); background: -moz-linear-gradient(270deg, rgba(0, 225, 225, 1) 60%, rgba(0, 55, 45, .8) 90%); background: -webkit-linear-gradient(270deg, rgba(0, 225, 225, 1) 60%, rgba(0, 55, 45, .8) 90%); background: -o-linear-gradient(270deg, rgba(0, 225, 225, 1) 60%, rgba(0, 55, 45, .8) 90%); } .fishgame_title { background: linear-gradient(270deg, rgba(35, 210, 245, 1) 60%, rgba(0, 10, 70, .8) 90%); background: -moz-linear-gradient(270deg, rgba(35, 210, 245, 1) 60%, rgba(0, 10, 70, .8) 90%); background: -webkit-linear-gradient(270deg, rgba(35, 210, 245, 1) 60%, rgba(0, 10, 70, .8) 90%); background: -o-linear-gradient(270deg, rgba(35, 210, 245, 1) 60%, rgba(0, 10, 70, .8) 90%); } .sport_title { background: linear-gradient(270deg, rgba(15, 195, 160, 1) 60%, rgba(0, 80, 65, .8) 90%); background: -moz-linear-gradient(270deg, rgba(15, 195, 160, 1) 60%, rgba(0, 80, 65, .8) 90%); background: -webkit-linear-gradient(270deg, rgba(15, 195, 160, 1) 60%, rgba(0, 80, 65, .8) 90%); background: -o-linear-gradient(270deg, rgba(15, 195, 160, 1) 60%, rgba(0, 80, 65, .8) 90%); } .electronics_title { background: linear-gradient(270deg, rgba(75, 170, 255, 1) 60%, rgba(0, 10, 70, .8) 90%); background: -moz-linear-gradient(270deg, rgba(75, 170, 255, 1) 60%, rgba(0, 10, 70, .8) 90%); background: -webkit-linear-gradient(270deg, rgba(75, 170, 255, 1) 60%, rgba(0, 10, 70, .8) 90%); background: -o-linear-gradient(270deg, rgba(75, 170, 255, 1) 60%, rgba(0, 10, 70, .8) 90%); }*/ .menuPick .menuOpt { width: 92%; height: 84%; margin: 5.4% 0 0 3.5%; /*background:rgba(100,100,100,1.00);*/ cursor: pointer; position: relative; z-index: 1; } /*禁止設定*/ .menuPick .menuOpt .caveat a .opt-worp { /*filter: brightness(.33) grayscale(1) !important; -webkit-filter: brightness(.33) grayscale(1) !important;*/ } .menuPick .menuOpt i { display: none; } .menuPick .menuOpt .caveat { width: 100%; height: 100%; display: block; position: relative; z-index: 12; } .menuPick .menuOpt .caveat i { width: 100%; height: 100%; margin-left: 6%; position: absolute; display: flex; align-items: center; justify-content: center; z-index: 10; } .menuPick .menuOpt .caveat b { display: none !important; } .menuPick .menuOpt .caveat i img { width: auto; height: 32%; position: absolute; top: 35%; z-index: 9; animation: rotate_caveat 5s linear infinite; left: 10%; } .menuPick .menuOpt .menu-box-4.caveat i img{ width: auto; height: 31%; position: absolute; top: 35%; z-index: 9; animation: rotate_caveat 5s linear infinite; left: 19%; } .menuPick .menuOpt .menu-box-4.caveat i .img2{ top: 48% !important; left: 54% !important; height: 20% !important; display: block; animation: rotate_caveat 5s linear infinite; } .menuPick .menuOpt .menu-box-3.caveat i img{ width: auto; height: 32%; position: absolute; top: 35%; z-index: 9; animation: rotate_caveat 5s linear infinite; left: 26%; } .menuPick .menuOpt .menu-box-3.caveat i .img2{ top: 49% !important; left: 53% !important; height: 19% !important; display: block; animation: rotate_caveat 5s linear infinite; } .menuPick .menuOpt .menu-box-2.caveat i img{ width: auto; height: 33%; position: absolute; top: 35%; z-index: 9; animation: rotate_caveat 5s linear infinite; left: 34%; } .menuPick .menuOpt .menu-box-2.caveat i .img2{ top: 48% !important; left: 52% !important; height: 21% !important; display: block; animation: rotate_caveat 5s linear infinite; } .menuPick .menuOpt .caveat i .img2 { top: 48% !important; left: 55% !important; height: 21% !important; display: block; animation: rotate_caveat 5s linear infinite; } .menuPick .menuOpt .caveat i span { padding: 0 15px; line-height: 26px; font-size: 20px; font-weight: 900; text-align: center; color: #483434; position: absolute; bottom: 22%; text-shadow: -1.5px -1.5px 1px rgba(255, 255, 255, 1), 1.5px -1.5px 1px rgba(255, 255, 255, 1), -1.5px 1.5px 1px rgba(255, 255, 255, 1), 1.5px 1.5px 1px rgba(255, 255, 255, 1), 2px 2px 2px rgba(255, 255, 255, 1); font-style: normal; } /*.menuPick .menuOpt .caveat:hover{ pointer-events: none; }*/ /*1格設定*/ .menuPick .menuOpt .menu-box-1 { /*float:left;*/ width: 94%; height: 90%; margin: 3.5% 3%; background-color: transparent; position: relative; z-index: 9; } .menuPick .menuOpt .menu-box-1 i { margin-left: 0 !important; } .menuPick .menuOpt .menu-box-1 i img { height: 24% !important; top: 31% !important; left: 38% !important; } .menuPick .menuOpt .menu-box-1 i .img2{ top: 40% !important; left: 51% !important; height: 16% !important; display: block; animation: rotate_caveat 5s linear infinite; } .menuPick .menuOpt .menu-box-1 i span { bottom: 38% !important; } .menuPick .menuOpt .menu-box-1:hover b { color: rgba(255, 255, 255, 1); display: block; transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; } .menuPick .menuOpt .menu-box-1 b { top: 45%; left: 45%; font-size: 21px; letter-spacing: 2px; /*font-weight: bold;*/ color: rgba(255, 255, 255, 0); position: absolute; z-index: 9; } .menuPick .menuOpt .menu-box-1 .opt-worp { /*float:left;*/ width: 80%; height: 100%; margin: 0 10%; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); -webkit-box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); -moz-box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); background-size: cover; background-repeat: no-repeat; background-position: top center; position: relative; z-index: 9; filter: brightness(1); -webkit-filter: brightness(1); transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; } .menuPick .menuOpt .menu-box-1:hover .opt-worp { -webkit-filter: brightness(.33); } .menuPick .menuOpt .menu-box-1 .opt-worp .btnGo { /*float:left;*/ width: 150px; height: 150px; color: rgba(255, 255, 255, 1); -webkit-clip-path: polygon(0 2%, 0 100%, 100% 100%); clip-path: polygon(0 2%, 0 100%, 100% 100%); background: rgba(40, 180, 150, 1); border-radius: 0px 0px 0px 10px; -webkit-border-radius: 0px 0px 0px 10px; -moz-border-radius: 0px 0px 0px 10px; position: absolute; bottom: 0; left: 0; z-index: 9; } .menuPick .menuOpt .menu-box-1 .opt-worp .btnGo p { color: rgba(255, 255, 255, 1); font-weight: bold; font-size: 18px; position: absolute; bottom: 0; left: 30px; z-index: 9; } .menuPick .menuOpt .menu-box-1 .opt-worp .box-left { width: 30%; height: 85%; margin-left: 20%; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; z-index: 2; } .menuPick .menuOpt .menu-box-1 .opt-worp .box-left .logoOpt { width: 200px; text-align: center; } .menuPick .menuOpt .menu-box-1 .opt-worp .box-left .logoOpt img { width: 100%; height: auto; } .menuPick .menuOpt .menu-box-1.caveat .opt-worp .box-left .logoOpt img{ filter: grayscale(60%); } .menuPick .menuOpt .menu-box-1 .opt-worp .box-left .logoOpt p { font-size: 18px; font-weight: bold; line-height: 32px; color: rgba(0, 0, 0, 1); /*-webkit-text-stroke: 1px rgba(255,255,255,1);*/ text-shadow: -1.5px -1.5px 1px rgba(255, 255, 255, 1), 1.5px -1.5px 1px rgba(255, 255, 255, 1), -1.5px 1.5px 1px rgba(255, 255, 255, 1), 1.5px 1.5px 1px rgba(255, 255, 255, 1), 2px 2px 2px rgba(255, 255, 255, 1); } .menuPick .menuOpt .menu-box-1.caveat .opt-worp .box-left .logoOpt p{ color: rgb(89 89 89); } .menuPick .menuOpt .menu-box-1 .opt-worp .box-right { width: 50%; height: 100%; margin-right: 18%; position: absolute; top: 0; right: 0; z-index: 1; } .menuPick .menuOpt .menu-box-1 .opt-worp .box-right .girlOpt { width: 100%; height: 110%; /*margin-right:10%;*/ position: absolute; overflow: hidden; bottom: 0; right: 0; z-index: 1; } .menuPick .menuOpt .menu-box-1 .opt-worp .box-right .girlOpt img { width: 100%; height: auto; } .menuPick .menuOpt .menu-box-1.caveat .opt-worp .box-right .girlOpt img{ filter: grayscale(60%); } /*2格左長型設定*/ .menuPick .menuOpt .menu-box-2-long { float: left; width: 50%; height: 100%; position: relative; z-index: 9; } .menuPick .menuOpt .menu-box-2-long i img { height: 22% !important; top: 32% !important; left: 28% !important; } .menuPick .menuOpt .menu-box-2-long i .img2{ top: 43% !important; left: 53% !important; height: 15% !important; display: block; animation: rotate_caveat 5s linear infinite; } .menuPick .menuOpt .menu-box-2-long i span { bottom: 38% !important; } .menuPick .menuOpt .menu-box-2-long:hover b { color: rgba(255, 255, 255, 1); display: block; transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; } .menuPick .menuOpt .menu-box-2-long b { top: 50%; left: 45%; font-size: 21px; letter-spacing: 2px; /*font-weight: bold;*/ color: rgba(255, 255, 255, 0); position: absolute; z-index: 10; } .menuPick .menuOpt .menu-box-2-long .opt-worp { /*float:left;*/ width: 94%; height: 72%; margin: 20% 0 0 7%; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); -webkit-box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); -moz-box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); background-repeat: no-repeat; background-position: top right; position: relative; z-index: 9; filter: brightness(1); -webkit-filter: brightness(1); transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; } .menuPick .menuOpt .menu-box-2-long:hover .opt-worp { -webkit-filter: brightness(.33); } .menuPick .menuOpt .menu-box-2-long .opt-worp .btnGo { /*float:left;*/ width: 150px; height: 150px; color: rgba(255, 255, 255, 1); -webkit-clip-path: polygon(0 2%, 0 100%, 100% 100%); clip-path: polygon(0 2%, 0 100%, 100% 100%); background: rgba(40, 180, 150, 1); border-radius: 0px 0px 0px 10px; -webkit-border-radius: 0px 0px 0px 10px; -moz-border-radius: 0px 0px 0px 10px; position: absolute; bottom: 0; left: 0; z-index: 9; } .menuPick .menuOpt .menu-box-2-long .opt-worp .btnGo p { color: rgba(255, 255, 255, 1); font-weight: bold; font-size: 18px; position: absolute; bottom: 0; left: 30px; z-index: 9; } .menuPick .menuOpt .menu-box-2-long .opt-worp .box-left { width: 38%; height: 75%; margin-left: 10%; display: flex; align-items: center; justify-content: center; position: absolute; top: 10px; left: 0; z-index: 2; } .menuPick .menuOpt .menu-box-2-long .opt-worp .box-left .logoOpt { min-width: 200px; text-align: center; } .menuPick .menuOpt .menu-box-2-long .opt-worp .box-left .logoOpt img { width: 100%; height: auto; } .menuPick .menuOpt .menu-box-2-long.caveat .opt-worp .box-left .logoOpt img{ filter: grayscale(60%); } .menuPick .menuOpt .menu-box-2-long .opt-worp .box-left .logoOpt p { font-size: 18px; font-weight: bold; line-height: 32px; color: rgba(0, 0, 0, 1); /*-webkit-text-stroke: 1px rgba(255,255,255,1);*/ text-shadow: -1.5px -1.5px 1px rgba(255, 255, 255, 1), 1.5px -1.5px 1px rgba(255, 255, 255, 1), -1.5px 1.5px 1px rgba(255, 255, 255, 1), 1.5px 1.5px 1px rgba(255, 255, 255, 1), 2px 2px 2px rgba(255, 255, 255, 1); } .menuPick .menuOpt .menu-box-2-long.caveat .opt-worp .box-left .logoOpt p{ color: rgb(89 89 89); } .menuPick .menuOpt .menu-box-2-long .opt-worp .box-right { width: 75%; height: 100%; margin-right: 0; position: absolute; top: 0; right: -5%; z-index: 1; } .menuPick .menuOpt .menu-box-2-long .opt-worp .box-right .girlOpt { width: 100%; height: 125%; /*margin-right:10%;*/ position: absolute; overflow: hidden; bottom: 0; right: 0; z-index: 1; } .menuPick .menuOpt .menu-box-2-long .opt-worp .box-right .girlOpt img { width: 100%; height: auto; } .menuPick .menuOpt .menu-box-2-long.caveat .opt-worp .box-right .girlOpt img{ filter: grayscale(60%); } /*3格長型設定*/ .menuPick .menuOpt .menu-box-3-long { float: left; width: 33.33333333333333%; height: 100%; position: relative; z-index: 9; } .menuPick .menuOpt .menu-box-3-long i img { height: 20% !important; top: 37% !important; left: 21% !important; animation: rotate_caveat 5s linear infinite; } .menuPick .menuOpt .menu-box-3-long i span { bottom: 38% !important; } .menuPick .menuOpt .menu-box-3-long i .img2{ top: 45% !important; left: 55% !important; height: 13% !important; display: block; animation: rotate_caveat 5s linear infinite; } .menuPick .menuOpt .menu-box-3-long:hover b { color: rgba(255, 255, 255, 1); display: block; transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; } .menuPick .menuOpt .menu-box-3-long b { top: 45%; left: 40%; font-size: 21px; letter-spacing: 2px; /*font-weight: bold;*/ color: rgba(255, 255, 255, 0); position: absolute; z-index: 100; } .menuPick .menuOpt .menu-box-3-long .opt-worp { /*float:left;*/ width: 92%; height: 70%; margin: 35% 0 0 9%; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); -webkit-box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); -moz-box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); background-repeat: no-repeat; background-position: top right; position: relative; z-index: 9; filter: brightness(1); -webkit-filter: brightness(1); transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; } .menuPick .menuOpt .menu-box-3-long:hover .opt-worp { -webkit-filter: brightness(.33); } .menuPick .menuOpt .menu-box-3-long .opt-worp .btnGo { /*float:left;*/ width: 150px; height: 150px; color: rgba(255, 255, 255, 1); -webkit-clip-path: polygon(0 2%, 0 100%, 100% 100%); clip-path: polygon(0 2%, 0 100%, 100% 100%); display: none; background: rgba(40, 180, 150, 1); border-radius: 0px 0px 0px 10px; -webkit-border-radius: 0px 0px 0px 10px; -moz-border-radius: 0px 0px 0px 10px; position: absolute; bottom: 0; left: 0; z-index: 9; } .menuPick .menuOpt .menu-box-3-long .opt-worp .btnGo p { color: rgba(255, 255, 255, 1); font-weight: bold; font-size: 18px; display: none; position: absolute; bottom: 20px; left: 30px; z-index: 9; } .menuPick .menuOpt .menu-box-3-long .opt-worp .box-left { width: 38%; height: 80%; margin-left: 14%; display: flex; align-items: center; justify-content: center; position: absolute; top: 0px; left: 0; z-index: 2; } .menuPick .menuOpt .menu-box-3-long .opt-worp .box-left .logoOpt { min-width: 165px; text-align: center; } .menuPick .menuOpt .menu-box-3-long .opt-worp .box-left .logoOpt img { width: 100%; height: auto; } .menuPick .menuOpt .menu-box-3-long.caveat .opt-worp .box-left .logoOpt img{ filter: grayscale(60%); } .menuPick .menuOpt .menu-box-3-long .opt-worp .box-left .logoOpt p { font-size: 18px; font-weight: bold; line-height: 32px; color: rgba(0, 0, 0, 1); /*-webkit-text-stroke: 1px rgba(255,255,255,1);*/ text-shadow: -1.5px -1.5px 1px rgba(255, 255, 255, 1), 1.5px -1.5px 1px rgba(255, 255, 255, 1), -1.5px 1.5px 1px rgba(255, 255, 255, 1), 1.5px 1.5px 1px rgba(255, 255, 255, 1), 2px 2px 2px rgba(255, 255, 255, 1); } .menuPick .menuOpt .menu-box-3-long.caveat .opt-worp .box-left .logoOpt p{ color: rgb(89 89 89); } .menuPick .menuOpt .menu-box-3-long .opt-worp .box-right { width: 92%; height: 100%; margin-right: 0; position: absolute; top: 0; right: -6%; z-index: 1; } .menuPick .menuOpt .menu-box-3-long .opt-worp .box-right .girlOpt { width: 100%; height: 120%; /*margin-right:10%;*/ position: absolute; overflow: hidden; bottom: 0; right: 0; z-index: 1; } .menuPick .menuOpt .menu-box-3-long .opt-worp .box-right .girlOpt img { width: 100%; height: auto; } .menuPick .menuOpt .menu-box-3-long.caveat .opt-worp .box-right .girlOpt img{ filter: grayscale(60%); } /*2(格)格設定*/ .menuPick .menuOpt .menu-box-2 { float: left; width: 50%; height: 50%; margin-bottom: 25px; position: relative; z-index: 9; } .menuPick .menuOpt .menu-box-2:hover b { color: rgba(255, 255, 255, 1); display: block; transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; } .menuPick .menuOpt .menu-box-2 b { top: 50%; left: 45%; font-size: 21px; letter-spacing: 2px; /*font-weight: bold;*/ color: rgba(255, 255, 255, 0); position: absolute; z-index: 9; } .menuPick .menuOpt .menu-box-2 .opt-worp { /*float:left;*/ width: 94%; height: 90%; margin: 5% 0 0 7%; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); -webkit-box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); -moz-box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); background-repeat: no-repeat; background-position: top right; position: relative; z-index: 9; filter: brightness(1); -webkit-filter: brightness(1); transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; } .menuPick .menuOpt .menu-box-2:hover .opt-worp { -webkit-filter: brightness(.33); } .menuPick .menuOpt .menu-box-2 .opt-worp .btnGo { /*float:left;*/ width: 150px; height: 150px; color: rgba(255, 255, 255, 1); -webkit-clip-path: polygon(0 2%, 0 100%, 100% 100%); clip-path: polygon(0 2%, 0 100%, 100% 100%); display: none; background: rgba(40, 180, 150, 1); border-radius: 0px 0px 0px 10px; -webkit-border-radius: 0px 0px 0px 10px; -moz-border-radius: 0px 0px 0px 10px; position: absolute; bottom: 0; left: 0; z-index: 9; } .menuPick .menuOpt .menu-box-2 .opt-worp .btnGo p { color: rgba(255, 255, 255, 1); font-weight: bold; font-size: 18px; display: none; position: absolute; bottom: 20px; left: 30px; z-index: 9; } .menuPick .menuOpt .menu-box-2 .opt-worp .box-left { width: 38%; height: 80%; margin-left: 10%; display: flex; align-items: center; justify-content: center; position: absolute; top: 15%; left: 5px; z-index: 2; } .menuPick .menuOpt .menu-box-2 .opt-worp .box-left .logoOpt { min-width: 180px; text-align: center; } .menuPick .menuOpt .menu-box-2 .opt-worp .box-left .logoOpt img { width: 100%; height: auto; } .menuPick .menuOpt .menu-box-2.caveat .opt-worp .box-left .logoOpt img{ filter: grayscale(60%); } .menuPick .menuOpt .menu-box-2 .opt-worp .box-left .logoOpt p { font-size: 18px; font-weight: bold; line-height: 32px; color: rgba(0, 0, 0, 1); /*-webkit-text-stroke: 1px rgba(255,255,255,1);*/ text-shadow: -1.5px -1.5px 1px rgba(255, 255, 255, 1), 1.5px -1.5px 1px rgba(255, 255, 255, 1), -1.5px 1.5px 1px rgba(255, 255, 255, 1), 1.5px 1.5px 1px rgba(255, 255, 255, 1), 2px 2px 2px rgba(255, 255, 255, 1); } .menuPick .menuOpt .menu-box-2.caveat .opt-worp .box-left .logoOpt p{ color: rgb(89 89 89); } .menuPick .menuOpt .menu-box-2 .opt-worp .box-right { width: 71.5%; height: 100%; margin-right: 0; position: absolute; top: 0; right: -1.5%; z-index: 1; } .menuPick .menuOpt .menu-box-2 .opt-worp .box-right .girlOpt { width: 100%; height: 125%; /*margin-right:10%;*/ position: absolute; overflow: hidden; bottom: 0; right: 0; z-index: 1; } .menuPick .menuOpt .menu-box-2 .opt-worp .box-right .girlOpt img { width: 100%; height: auto; } .menuPick .menuOpt .menu-box-2.caveat .opt-worp .box-right .girlOpt img{ filter: grayscale(60%); } /*5格(靠左長格)長型設定*/ .menuPick .menuOpt .menu-box-5-long { float: left; width: 33.33333333333333%; height: 100%; position: relative; z-index: 9; } .menuPick .menuOpt .menu-box-5-long i img { height: 20% !important; top: 30% !important; left: 20% !important; animation: rotate_caveat 5s linear infinite; } .menuPick .menuOpt .menu-box-5-long i .img2{ top: 38% !important; left: 54% !important; height: 14% !important; display: block; animation: rotate_caveat 5s linear infinite; } .menuPick .menuOpt .menu-box-5-long i span { bottom: 43% !important; } .menuPick .menuOpt .menu-box-5-long:hover b { color: rgba(255, 255, 255, 1); display: block; transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; } .menuPick .menuOpt .menu-box-5-long b { top: 45%; left: 40%; font-size: 21px; letter-spacing: 2px; /*font-weight: bold;*/ color: rgba(255, 255, 255, 0); position: absolute; z-index: 100; } .menuPick .menuOpt .menu-box-5-long .opt-worp { /*float:left;*/ width: 92%; height: 100%; margin: 5% 0 0 9%; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); -webkit-box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); -moz-box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); background-repeat: no-repeat; background-position: top right; background-size: cover; position: relative; z-index: 9; filter: brightness(1); -webkit-filter: brightness(1); transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; } .menuPick .menuOpt .menu-box-5-long:hover .opt-worp { -webkit-filter: brightness(.33); } .menuPick .menuOpt .menu-box-5-long .opt-worp .btnGo { /*float:left;*/ width: 150px; height: 150px; color: rgba(255, 255, 255, 1); -webkit-clip-path: polygon(0 2%, 0 100%, 100% 100%); clip-path: polygon(0 2%, 0 100%, 100% 100%); display: none; background: rgba(40, 180, 150, 1); border-radius: 0px 0px 0px 10px; -webkit-border-radius: 0px 0px 0px 10px; -moz-border-radius: 0px 0px 0px 10px; position: absolute; bottom: 0; left: 0; z-index: 9; } .menuPick .menuOpt .menu-box-5-long .opt-worp .btnGo p { color: rgba(255, 255, 255, 1); font-weight: bold; font-size: 18px; display: none; position: absolute; bottom: 20px; left: 30px; z-index: 9; } .menuPick .menuOpt .menu-box-5-long .opt-worp .box-left { width: 40%; height: 65%; margin-left: 5%; display: flex; align-items: center; justify-content: center; position: absolute; top: 10%; left: 0; z-index: 2; } .menuPick .menuOpt .menu-box-5-long .opt-worp .box-left .logoOpt { min-width: 150px; text-align: center; } .menuPick .menuOpt .menu-box-5-long .opt-worp .box-left .logoOpt img { width: 100%; height: auto; } .menuPick .menuOpt .menu-box-5-long.caveat .opt-worp .box-left .logoOpt img, .menuPick .menuOpt .menu-box-5-long.caveat .opt-worp .box-right .girlOpt img{ filter: grayscale(60%); } .menuPick .menuOpt .menu-box-5-long .opt-worp .box-left .logoOpt p { font-size: 18px; font-weight: bold; line-height: 32px; color: rgba(0, 0, 0, 1); /*-webkit-text-stroke: 1px rgba(255,255,255,1);*/ text-shadow: -1.5px -1.5px 1px rgba(255, 255, 255, 1), 1.5px -1.5px 1px rgba(255, 255, 255, 1), -1.5px 1.5px 1px rgba(255, 255, 255, 1), 1.5px 1.5px 1px rgba(255, 255, 255, 1), 2px 2px 2px rgba(255, 255, 255, 1); } .menuPick .menuOpt .menu-box-5-long.caveat .opt-worp .box-left .logoOpt p{ color: rgb(89 89 89); } .menuPick .menuOpt .menu-box-5-long .opt-worp .box-right { width: 90%; height: 100%; margin-right: 0; position: absolute; top: 0; right: -6%; z-index: 1; } .menuPick .menuOpt .menu-box-5-long .opt-worp .box-right .girlOpt { width: 100%; height: 105%; /*margin-right:10%;*/ position: absolute; overflow: hidden; bottom: 0; right: 0; z-index: 1; } .menuPick .menuOpt .menu-box-5-long .opt-worp .box-right .girlOpt img { width: 100%; height: auto; } /*3(6)格設定*/ .menuPick .menuOpt .menu-box-3 { float: left; width: 33.33333333333333%; height: 50%; margin-bottom: 25px; position: relative; z-index: 9; } .menuPick .menuOpt .menu-box-3:hover b { color: rgba(255, 255, 255, 1); display: block; transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; } .menuPick .menuOpt .menu-box-3 b { top: 45%; left: 38%; font-size: 21px; letter-spacing: 2px; /*font-weight: bold;*/ color: rgba(255, 255, 255, 0); position: absolute; z-index: 100; } .menuPick .menuOpt .menu-box-3 .opt-worp { /*float:left;*/ width: 94%; height: 90%; margin: 5% 0 0 8%; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); -webkit-box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); -moz-box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); background-repeat: no-repeat; background-position: -390px 0px; position: relative; z-index: 9; filter: brightness(1); -webkit-filter: brightness(1); transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; } .menuPick .menuOpt .menu-box-3:hover .opt-worp { -webkit-filter: brightness(.33); } .menuPick .menuOpt .menu-box-3-box-2 .opt-worp .btnGo { /*float:left;*/ width: 150px; height: 150px; color: rgba(255, 255, 255, 1); -webkit-clip-path: polygon(0 2%, 0 100%, 100% 100%); clip-path: polygon(0 2%, 0 100%, 100% 100%); display: none; background: rgba(40, 180, 150, 1); border-radius: 0px 0px 0px 10px; -webkit-border-radius: 0px 0px 0px 10px; -moz-border-radius: 0px 0px 0px 10px; position: absolute; bottom: 0; left: 0; z-index: 9; } .menuPick .menuOpt .menu-box-3 .opt-worp .btnGo p { color: rgba(255, 255, 255, 1); font-weight: bold; font-size: 18px; display: none; position: absolute; bottom: 20px; left: 30px; z-index: 9; } .menuPick .menuOpt .menu-box-3 .opt-worp .box-left { width: 40%; height: 100%; margin-left: 8%; display: flex; align-items: center; justify-content: center; position: absolute; top: 5%; left: 0; z-index: 2; } .menuPick .menuOpt .menu-box-3 .opt-worp .box-left .logoOpt { min-width: 150px; text-align: center; } .menuPick .menuOpt .menu-box-3 .opt-worp .box-left .logoOpt img { width: 100%; height: auto; } .menuPick .menuOpt .menu-box-3.caveat .opt-worp .box-left .logoOpt img, .menuPick .menuOpt .menu-box-3.caveat .opt-worp .box-right .girlOpt img{ filter: grayscale(60%); } .menuPick .menuOpt .menu-box-3 .opt-worp .box-left .logoOpt p { font-size: 18px; font-weight: bold; line-height: 32px; color: rgba(0, 0, 0, 1); /*-webkit-text-stroke: 1px rgba(255,255,255,1);*/ text-shadow: -1.5px -1.5px 1px rgba(255, 255, 255, 1), 1.5px -1.5px 1px rgba(255, 255, 255, 1), -1.5px 1.5px 1px rgba(255, 255, 255, 1), 1.5px 1.5px 1px rgba(255, 255, 255, 1), 2px 2px 2px rgba(255, 255, 255, 1); } .menuPick .menuOpt .menu-box-3.caveat .opt-worp .box-left .logoOpt p{ color: rgb(89 89 89); } .menuPick .menuOpt .menu-box-3 .opt-worp .box-right { width: 80%; height: 100%; margin-right: 0; position: absolute; top: 0; right: -5%; z-index: 1; } .menuPick .menuOpt .menu-box-3 .opt-worp .box-right .girlOpt { width: 100%; height: 115%; /*margin-right:10%;*/ position: absolute; overflow: hidden; bottom: 0; right: 0; z-index: 1; } .menuPick .menuOpt .menu-box-3 .opt-worp .box-right .girlOpt img { width: 100%; height: auto; } /*4(8)格設定*/ .menuPick .menuOpt .menu-box-4 { float: left; width: 25%; height: 50%; margin-bottom: 25px; position: relative; z-index: 9; } .menuPick .menuOpt .menu-box-4:hover b { color: rgba(255, 255, 255, 1); display: block; transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; } .menuPick .menuOpt .menu-box-4 b { top: 45%; left: 34%; font-size: 21px; letter-spacing: 2px; /*font-weight: bold;*/ color: rgba(255, 255, 255, 0); position: absolute; z-index: 100; } .menuPick .menuOpt .menu-box-4 .opt-worp { /*float:left;*/ width: 94%; height: 90%; margin: 5% 0 0 8%; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); -webkit-box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); -moz-box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); background-repeat: no-repeat; background-position: -465px 0px; position: relative; z-index: 9; filter: brightness(1); -webkit-filter: brightness(1); transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; } .menuPick .menuOpt .menu-box-4:hover .opt-worp { -webkit-filter: brightness(.33); } .menuPick .menuOpt .menu-box-4 .opt-worp .btnGo { /*float:left;*/ width: 150px; height: 150px; color: rgba(255, 255, 255, 1); -webkit-clip-path: polygon(0 2%, 0 100%, 100% 100%); clip-path: polygon(0 2%, 0 100%, 100% 100%); display: none; background: rgba(40, 180, 150, 1); border-radius: 0px 0px 0px 10px; -webkit-border-radius: 0px 0px 0px 10px; -moz-border-radius: 0px 0px 0px 10px; position: absolute; bottom: 0; left: 0; z-index: 9; } .menuPick .menuOpt .menu-box-4 .opt-worp .btnGo p { color: rgba(255, 255, 255, 1); font-weight: bold; font-size: 18px; display: none; position: absolute; bottom: 20px; left: 30px; z-index: 9; } .menuPick .menuOpt .menu-box-4 .opt-worp .box-left { width: 40%; height: 100%; margin-left: 11%; display: flex; align-items: center; justify-content: center; position: absolute; top: 2%; left: 0; z-index: 2; } .menuPick .menuOpt .menu-box-4 .opt-worp .box-left .logoOpt { min-width: 125px; text-align: center; } .menuPick .menuOpt .menu-box-4 .opt-worp .box-left .logoOpt img { width: 100%; height: auto; } .menuPick .menuOpt .menu-box-4.caveat .opt-worp .box-left .logoOpt img, .menuPick .menuOpt .menu-box-4.caveat .opt-worp .box-right .girlOpt img{ filter: grayscale(60%); } .menuPick .menuOpt .menu-box-4 .opt-worp .box-left .logoOpt p { font-size: 18px; font-weight: bold; line-height: 32px; color: rgba(0, 0, 0, 1); /*-webkit-text-stroke: 1px rgba(255,255,255,1);*/ text-shadow: -1.5px -1.5px 1px rgba(255, 255, 255, 1), 1.5px -1.5px 1px rgba(255, 255, 255, 1), -1.5px 1.5px 1px rgba(255, 255, 255, 1), 1.5px 1.5px 1px rgba(255, 255, 255, 1), 2px 2px 2px rgba(255, 255, 255, 1); } .menuPick .menuOpt .menu-box-4.caveat .opt-worp .box-left .logoOpt p{ color: rgb(89 89 89); } .menuPick .menuOpt .menu-box-4 .opt-worp .box-right { width: 100%; height: 100%; margin-right: 0; position: absolute; top: 0; right: -5%; z-index: 1; } .menuPick .menuOpt .menu-box-4 .opt-worp .box-right .girlOpt { width: 100%; height: 115%; /*margin-right:10%;*/ position: absolute; overflow: hidden; bottom: 0; right: 0; z-index: 1; } .menuPick .menuOpt .menu-box-4 .opt-worp .box-right .girlOpt img { width: 100%; height: auto; } /*7格(靠左長格)長型設定*/ .menuPick .menuOpt .menu-box-7-long { float: left; width: 25%; height: 100%; position: relative; z-index: 10; } .menuPick .menuOpt .menu-box-7-long a { width: 100%; height: 100%; display: block; position: relative; /*z-index: 12;*/ } .menuPick .menuOpt .menu-box-7-long a i img { height: 20% !important; top: 31% !important; display: block; left: 13% !important; } .menuPick .menuOpt .menu-box-7-long a i .img2{ top: 40% !important; left: 56% !important; height: 12% !important; display: block; animation: rotate_caveat 5s linear infinite; } .menuPick .menuOpt .menu-box-7-long a i span { bottom: 43% !important; display: block; } .menuPick .menuOpt .menu-box-7-long:hover b { color: rgba(255, 255, 255, 1); display: block; transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; } .menuPick .menuOpt .menu-box-7-long b { top: 45%; left: 34%; font-size: 21px; letter-spacing: 2px; /*font-weight: bold;*/ color: rgba(255, 255, 255, 0); position: absolute; z-index: 100; } .menuPick .menuOpt .menu-box-7-long .opt-worp { /*float:left;*/ width: 92%; height: 100%; margin: 5% 0 0 9%; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); -webkit-box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); -moz-box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); background-repeat: no-repeat; background-position: -500px top; background-size: cover; position: relative; z-index: 9; filter: brightness(1); -webkit-filter: brightness(1); transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; } .menuPick .menuOpt .menu-box-7-long:hover .opt-worp { -webkit-filter: brightness(.33); } .menuPick .menuOpt .menu-box-7-long .opt-worp .btnGo { /*float:left;*/ width: 150px; height: 150px; color: rgba(255, 255, 255, 1); -webkit-clip-path: polygon(0 2%, 0 100%, 100% 100%); clip-path: polygon(0 2%, 0 100%, 100% 100%); display: none; background: rgba(40, 180, 150, 1); border-radius: 0px 0px 0px 10px; -webkit-border-radius: 0px 0px 0px 10px; -moz-border-radius: 0px 0px 0px 10px; position: absolute; bottom: 0; left: 0; z-index: 9; } .menuPick .menuOpt .menu-box-7-long .opt-worp .btnGo p { color: rgba(255, 255, 255, 1); font-weight: bold; font-size: 18px; display: none; position: absolute; bottom: 20px; left: 30px; z-index: 9; } .menuPick .menuOpt .menu-box-7-long .opt-worp .box-left { width: 40%; height: 65%; margin-left: 15%; display: flex; align-items: center; justify-content: center; position: absolute; top: 0px; left: 0; z-index: 2; } .menuPick .menuOpt .menu-box-7-long .opt-worp .box-left .logoOpt { min-width: 140px; text-align: center; } .menuPick .menuOpt .menu-box-7-long .opt-worp .box-left .logoOpt img { width: 100%; height: auto; } .menuPick .menuOpt .menu-box-7-long.caveat .opt-worp .box-left .logoOpt img, .menuPick .menuOpt .menu-box-7-long.caveat .opt-worp .box-right .girlOpt img{ filter: grayscale(60%); } .menuPick .menuOpt .menu-box-7-long .opt-worp .box-left .logoOpt p { font-size: 18px; font-weight: bold; line-height: 32px; color: rgba(0, 0, 0, 1); /*-webkit-text-stroke: 1px rgba(255,255,255,1);*/ text-shadow: -1.5px -1.5px 1px rgba(255, 255, 255, 1), 1.5px -1.5px 1px rgba(255, 255, 255, 1), -1.5px 1.5px 1px rgba(255, 255, 255, 1), 1.5px 1.5px 1px rgba(255, 255, 255, 1), 2px 2px 2px rgba(255, 255, 255, 1); } .menuPick .menuOpt .menu-box-7-long.caveat .opt-worp .box-left .logoOpt p{ color: rgb(89 89 89); } .menuPick .menuOpt .menu-box-7-long .opt-worp .box-right { width: 104%; height: 100%; margin-right: 0; position: absolute; top: 0; right: -6%; z-index: 1; } .menuPick .menuOpt .menu-box-7-long .opt-worp .box-right .girlOpt { width: 105%; height: 105%; /*margin-right:10%;*/ position: absolute; overflow: hidden; bottom: 0; right: 0; z-index: 1; } .menuPick .menuOpt .menu-box-7-long .opt-worp .box-right .girlOpt img { width: 100%; height: auto; } /*5(10)格設定*/ .menuPick .menuOpt .menu-box-5 { float: left; width: 20%; height: 50%; margin-bottom: 25px; position: relative; z-index: 9; } .menuPick .menuOpt .menu-box-5:hover b { color: rgba(255, 255, 255, 1); display: block; transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; } .menuPick .menuOpt .menu-box-5 b { top: 45%; left: 34%; font-size: 21px; letter-spacing: 2px; /*font-weight: bold;*/ color: rgba(255, 255, 255, 0); position: absolute; z-index: 100; } .menuPick .menuOpt .menu-box-5 .opt-worp { /*float:left;*/ width: 94%; height: 90%; margin: 5% 0 0 8%; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); -webkit-box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); -moz-box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); background-repeat: no-repeat; background-position: -465px 0px; position: relative; z-index: 9; filter: brightness(1); -webkit-filter: brightness(1); transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; } .menuPick .menuOpt .menu-box-5:hover .opt-worp { -webkit-filter: brightness(.33); } .menuPick .menuOpt .menu-box-5 .opt-worp .btnGo { /*float:left;*/ width: 150px; height: 150px; color: rgba(255, 255, 255, 1); -webkit-clip-path: polygon(0 2%, 0 100%, 100% 100%); clip-path: polygon(0 2%, 0 100%, 100% 100%); display: none; background: rgba(40, 180, 150, 1); border-radius: 0px 0px 0px 10px; -webkit-border-radius: 0px 0px 0px 10px; -moz-border-radius: 0px 0px 0px 10px; position: absolute; bottom: 0; left: 0; z-index: 9; } .menuPick .menuOpt .menu-box-5 .opt-worp .btnGo p { color: rgba(255, 255, 255, 1); font-weight: bold; font-size: 18px; display: none; position: absolute; bottom: 20px; left: 30px; z-index: 9; } .menuPick .menuOpt .menu-box-5 .opt-worp .box-left { width: 40%; height: 100%; margin-left: 11%; display: flex; align-items: center; justify-content: center; position: absolute; top: 8%; left: 0; z-index: 2; } .menuPick .menuOpt .menu-box-5 .opt-worp .box-left .logoOpt { min-width: 125px; text-align: center; } .menuPick .menuOpt .menu-box-5 .opt-worp .box-left .logoOpt img { width: 100%; height: auto; } .menuPick .menuOpt .menu-box-5.caveat .opt-worp .box-left .logoOpt img{ filter: grayscale(60%); } .menuPick .menuOpt .menu-box-5 .opt-worp .box-left .logoOpt p { font-size: 18px; font-weight: bold; line-height: 32px; color: rgba(0, 0, 0, 1); /*-webkit-text-stroke: 1px rgba(255,255,255,1);*/ text-shadow: -1.5px -1.5px 1px rgba(255, 255, 255, 1), 1.5px -1.5px 1px rgba(255, 255, 255, 1), -1.5px 1.5px 1px rgba(255, 255, 255, 1), 1.5px 1.5px 1px rgba(255, 255, 255, 1), 2px 2px 2px rgba(255, 255, 255, 1); } .menuPick .menuOpt .menu-box-5 .opt-worp .box-right { width: 100%; height: 100%; margin-right: 0; position: absolute; top: 0; right: -5%; z-index: 1; } .menuPick .menuOpt .menu-box-5 .opt-worp .box-right .girlOpt { width: 115%; height: 105%; /*margin-right:10%;*/ position: absolute; overflow: hidden; bottom: 0; right: 0; z-index: 1; } .menuPick .menuOpt .menu-box-5 .opt-worp .box-right .girlOpt img { width: 100%; height: auto; } .menuPick .menuOpt .menu-box-5.caveat .opt-worp .box-right .girlOpt img{ filter: grayscale(60%); } /*6(10)格設定*/ .menuPick .menuOpt .menu-box-6 { float: left; width: 16%; height: 50%; margin-bottom: 25px; position: relative; z-index: 9; } .menuPick .menuOpt .menu-box-6:hover b { color: rgba(255, 255, 255, 1); display: block; transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; } .menuPick .menuOpt .menu-box-6 b { top: 45%; left: 34%; font-size: 17px; letter-spacing: 2px; /*font-weight: bold;*/ color: rgba(255, 255, 255, 0); position: absolute; z-index: 100; } .menuPick .menuOpt .menu-box-6 .opt-worp { /*float:left;*/ width: 94%; height: 90%; margin: 5% 0 0 8%; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); -webkit-box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); -moz-box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); background-repeat: no-repeat; background-position: -465px 0px; position: relative; z-index: 9; filter: brightness(1); -webkit-filter: brightness(1); transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; } .menuPick .menuOpt .menu-box-6:hover .opt-worp { -webkit-filter: brightness(.33); } .menuPick .menuOpt .menu-box-6 .opt-worp .btnGo { /*float:left;*/ width: 150px; height: 150px; color: rgba(255, 255, 255, 1); -webkit-clip-path: polygon(0 2%, 0 100%, 100% 100%); clip-path: polygon(0 2%, 0 100%, 100% 100%); display: none; background: rgba(40, 180, 150, 1); border-radius: 0px 0px 0px 10px; -webkit-border-radius: 0px 0px 0px 10px; -moz-border-radius: 0px 0px 0px 10px; position: absolute; bottom: 0; left: 0; z-index: 9; } .menuPick .menuOpt .menu-box-6 .opt-worp .btnGo p { color: rgba(255, 255, 255, 1); font-weight: bold; font-size: 18px; display: none; position: absolute; bottom: 20px; left: 30px; z-index: 9; } .menuPick .menuOpt .menu-box-6 .opt-worp .box-left { width: 40%; height: 100%; margin-left: 11%; display: flex; align-items: center; justify-content: center; position: absolute; top: 8%; left: 0; z-index: 2; } .menuPick .menuOpt .menu-box-6 .opt-worp .box-left .logoOpt { min-width: 89px; text-align: center; } .menuPick .menuOpt .menu-box-6 .opt-worp .box-left .logoOpt img { width: 100%; height: auto; } .menuPick .menuOpt .menu-box-6 .opt-worp .box-left .logoOpt p { font-size: 16px; font-weight: bold; line-height: 32px; color: rgba(0, 0, 0, 1); /*-webkit-text-stroke: 1px rgba(255,255,255,1);*/ text-shadow: -1.5px -1.5px 1px rgba(255, 255, 255, 1), 1.5px -1.5px 1px rgba(255, 255, 255, 1), -1.5px 1.5px 1px rgba(255, 255, 255, 1), 1.5px 1.5px 1px rgba(255, 255, 255, 1), 2px 2px 2px rgba(255, 255, 255, 1); } .menuPick .menuOpt .menu-box-6 .opt-worp .box-right { width: 100%; height: 100%; margin-right: 0; position: absolute; top: 0; right: -5%; z-index: 1; } .menuPick .menuOpt .menu-box-6 .opt-worp .box-right .girlOpt { width: 115%; height: 105%; /*margin-right:10%;*/ position: absolute; overflow: hidden; bottom: 0; right: 0; z-index: 1; } .menuPick .menuOpt .menu-box-6 .opt-worp .box-right .girlOpt img { width: 100%; height: auto; } /*9格(靠左長格)長型設定*/ .menuPick .menuOpt .menu-box-9-long { float: left; width: 20%; height: 100%; position: relative; z-index: 10; } .menuPick .menuOpt .menu-box-9-long a { width: 100%; height: 100%; display: block; position: relative; /*z-index: 12;*/ } .menuPick .menuOpt .menu-box-9-long a i img { height: 16% !important; top: 28% !important; display: block; left: 10%; animation: rotate_caveat 5s linear infinite; } .menuPick .menuOpt .menu-box-9-long a i .img2 { top: 36% !important; left: 52% !important; height: 11% !important; display: block; animation: rotate_caveat 5s linear infinite; } .menuPick .menuOpt .menu-box-9-long a i span { bottom: 47% !important; display: block; } .menuPick .menuOpt .menu-box-9-long:hover b { color: rgba(255, 255, 255, 1); display: block; transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; } .menuPick .menuOpt .menu-box-9-long b { top: 45%; left: 28%; font-size: 21px; letter-spacing: 2px; /*font-weight: bold;*/ color: rgba(255, 255, 255, 0); position: absolute; z-index: 100; } .menuPick .menuOpt .menu-box-9-long .opt-worp { /*float:left;*/ width: 92%; height: 100%; margin: 5% 0 0 9%; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); -webkit-box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); -moz-box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); background-repeat: no-repeat; background-position: -500px top; background-size: cover; position: relative; z-index: 9; filter: brightness(1); -webkit-filter: brightness(1); transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; } .menuPick .menuOpt .menu-box-9-long:hover .opt-worp { -webkit-filter: brightness(.33); } .menuPick .menuOpt .menu-box-9-long .opt-worp .btnGo { /*float:left;*/ width: 150px; height: 150px; color: rgba(255, 255, 255, 1); -webkit-clip-path: polygon(0 2%, 0 100%, 100% 100%); clip-path: polygon(0 2%, 0 100%, 100% 100%); display: none; background: rgba(40, 180, 150, 1); border-radius: 0px 0px 0px 10px; -webkit-border-radius: 0px 0px 0px 10px; -moz-border-radius: 0px 0px 0px 10px; position: absolute; bottom: 0; left: 0; z-index: 9; } .menuPick .menuOpt .menu-box-9-long .opt-worp .btnGo p { color: rgba(255, 255, 255, 1); font-weight: bold; font-size: 18px; display: none; position: absolute; bottom: 20px; left: 30px; z-index: 9; } .menuPick .menuOpt .menu-box-9-long .opt-worp .box-left { width: 40%; height: 85%; margin-left: 12%; display: flex; align-items: center; justify-content: center; position: absolute; top:-20px; left: 0; z-index: 2; } .menuPick .menuOpt .menu-box-9-long .opt-worp .box-left .logoOpt { min-width: 125px; text-align: center; } .menuPick .menuOpt .menu-box-9-long .opt-worp .box-left .logoOpt img { width: 100%; height: auto; } .menuPick .menuOpt .menu-box-9-long.caveat .opt-worp .box-left .logoOpt img{ filter: grayscale(60%); } .menuPick .menuOpt .menu-box-9-long .opt-worp .box-left .logoOpt p { font-size: 18px; font-weight: bold; line-height: 32px; color: rgba(0, 0, 0, 1); /*-webkit-text-stroke: 1px rgba(255,255,255,1);*/ text-shadow: -1.5px -1.5px 1px rgba(255, 255, 255, 1), 1.5px -1.5px 1px rgba(255, 255, 255, 1), -1.5px 1.5px 1px rgba(255, 255, 255, 1), 1.5px 1.5px 1px rgba(255, 255, 255, 1), 2px 2px 2px rgba(255, 255, 255, 1); } .menuPick .menuOpt .menu-box-9-long .opt-worp .box-right { width: 125%; height: 101%; margin-right: 0; position: absolute; top: 0; right: -6%; z-index: 1; } .menuPick .menuOpt .menu-box-9-long .opt-worp .box-right .girlOpt { width: 105%; height: 100%; margin-right:-2%; position: absolute; overflow: hidden; bottom: 4px; right: 0; z-index: 1; } .menuPick .menuOpt .menu-box-9-long .opt-worp .box-right .girlOpt img { width: 100%; height: auto; } .menuPick .menuOpt .menu-box-9-long.caveat .opt-worp .box-right .girlOpt img{ filter: grayscale(60%); } /*------- PC版 End -------*/ /*------- Phone版 -------*/ .menuPhone_wrap { width: 100%; min-height: 100%; padding-bottom: 5px; position: relative; z-index: 1; background-size: 100%; background-repeat: no-repeat; background-position: top right; overflow: hidden; } .menuPhone_wrap .row{ padding:.0px; margin:0px; } .menuPhone_wrap .row>[class^=col-] { padding-left:5px; padding-right:5px; } /*col-4*/ .menuPhone_wrap .col-4 { float: left; max-width: 33.333333%; padding:3px; margin:0; } .menuPhone_wrap .col-4 .menuBox { width: 100%; height:120px; border-radius:15px; overflow: hidden; position: relative; background-size:200%; background-position:left bottom; box-shadow: 2px 2px 5px #333333; } .menuPhone_wrap .col-4 .menuBox .logoOpt{ width: 60%; height: 100%; text-align: center; position: absolute; overflow: hidden; top:6%; left: 0; z-index: 2; display: flex; align-items: center; justify-content: start; } .menuPhone_wrap .col-4 .menuBox .logoOpt img{ width: 100%; height: auto; } .menuPhone_wrap .col-4 .menuBox .logoOpt p { font-size: 15px; font-weight: bold; margin-top: -5px; color: rgba(0, 0, 0, 1); /*-webkit-text-stroke: 1px rgba(255,255,255,1);*/ text-shadow: -1.5px -1.5px 1px rgba(255, 255, 255, 1), 1.5px -1.5px 1px rgba(255, 255, 255, 1), -1.5px 1.5px 1px rgba(255, 255, 255, 1), 1.5px 1.5px 1px rgba(255, 255, 255, 1), 2px 2px 2px rgba(255, 255, 255, 1); } .menuPhone_wrap .col-4 .menuBox .girlOpt { width: 100%; height:100%; /*margin-right:10%;*/ position: relative; overflow: hidden; z-index: 1; } .menuPhone_wrap .col-4 .menuBox .girlOpt img { width: 100%; height: auto; position: absolute; top:-10px; right: -15px; z-index: 1; } /*col-4-medium*/ .menuPhone_wrap .col-4-medium { float: left; max-width: 33.333333%; padding:3px; margin:0; } .menuPhone_wrap .col-4-medium .menuBox { width: 100%; height:240px; border-radius:15px; overflow: hidden; position: relative; background-size:cover; background-position:left bottom; box-shadow: 2px 2px 5px #333333; } .menuPhone_wrap .col-4-medium .menuBox .logoOpt{ width: 60%; height: 30%; text-align: center; position: absolute; overflow: hidden; top:3%; left:3%; z-index: 2; display: flex; align-items: center; justify-content: start; } .menuPhone_wrap .col-4-medium .menuBox .logoOpt img{ width: 100%; height: auto; } .menuPhone_wrap .col-4-medium .menuBox .logoOpt p { font-size: 15px; font-weight: bold; margin-top: -5px; color: rgba(0, 0, 0, 1); /*-webkit-text-stroke: 1px rgba(255,255,255,1);*/ text-shadow: -1.5px -1.5px 1px rgba(255, 255, 255, 1), 1.5px -1.5px 1px rgba(255, 255, 255, 1), -1.5px 1.5px 1px rgba(255, 255, 255, 1), 1.5px 1.5px 1px rgba(255, 255, 255, 1), 2px 2px 2px rgba(255, 255, 255, 1); } .menuPhone_wrap .col-4-medium .menuBox .girlOpt { width: 100%; height:100%; margin-right:0%; position: relative; overflow: hidden; z-index: 1; } .menuPhone_wrap .col-4-medium .menuBox .girlOpt img { width: 115%; height: auto; position: absolute; top: 25%; right:-10%; z-index: 1; } .menuPhone_wrap .col-4-medium.caveat i img { height: 25% !important; top: 30% !important; } .menuPhone_wrap .col-4-medium.caveat i span { bottom: 30% !important; } /*col-4-small*/ .menuPhone_wrap .col-4-small { float: left; max-width: 33.333333%; padding:3px; margin:0; } .menuPhone_wrap .col-4-small .menuBox { width: 100%; height:160px; border-radius:15px; overflow: hidden; position: relative; background-size:cover; background-position:left bottom; box-shadow: 2px 2px 5px #333333; } .menuPhone_wrap .col-4-small .menuBox .logoOpt{ width: 60%; height: 40%%; text-align: center; position: absolute; overflow: hidden; top:5%; left:0%; z-index: 2; display: flex; align-items: center; justify-content: start; } .menuPhone_wrap .col-4-small .menuBox .logoOpt img{ width: 100%; height: auto; } .menuPhone_wrap .col-4-small .menuBox .logoOpt p { font-size: 14px; font-weight: bold; margin-top: -5px; color: rgba(0, 0, 0, 1); /*-webkit-text-stroke: 1px rgba(255,255,255,1);*/ text-shadow: -1.5px -1.5px 1px rgba(255, 255, 255, 1), 1.5px -1.5px 1px rgba(255, 255, 255, 1), -1.5px 1.5px 1px rgba(255, 255, 255, 1), 1.5px 1.5px 1px rgba(255, 255, 255, 1), 2px 2px 2px rgba(255, 255, 255, 1); } .menuPhone_wrap .col-4-small .menuBox .girlOpt { width: 100%; height:100%; margin-right:0%; position: relative; overflow: hidden; z-index: 1; } .menuPhone_wrap .col-4-small .menuBox .girlOpt img { width: 115%; height: auto; position: absolute; top: 20%; right:-10%; z-index: 1; } .menuPhone_wrap .col-4-small.caveat i img { height: auto!important; top: 13% !important; width: 72px; left: 5%; } .menuPhone_wrap .col-4-small.caveat i .img2 { height: auto!important; top: 33% !important; width: 47px; left: 59%; } .menuPhone_wrap .col-4-small.caveat i span { bottom: 22% !important; font-size: 16px; } /*col-6*/ .menuPhone_wrap .col-6 { float: left; max-width: 50%; padding:3px; margin:0; } .menuPhone_wrap .col-6 .menuBox { width: 100%; height:120px; border-radius:15px; overflow: hidden; position: relative; background-size:200%; background-position:left bottom; box-shadow: 2px 2px 5px #333333; } .menuPhone_wrap .col-6 .menuBox .logoOpt{ width: 40%; height: 100%; text-align: center; position: absolute; overflow: hidden; top:6%; left:12%; z-index: 2; display: flex; align-items: center; justify-content: start; } .menuPhone_wrap .col-6 .menuBox .logoOpt img{ width: 100%; height: auto; } .menuPhone_wrap .col-6 .menuBox .logoOpt p { font-size: 15px; font-weight: bold; margin-top: -5px; color: rgba(0, 0, 0, 1); /*-webkit-text-stroke: 1px rgba(255,255,255,1);*/ text-shadow: -1.5px -1.5px 1px rgba(255, 255, 255, 1), 1.5px -1.5px 1px rgba(255, 255, 255, 1), -1.5px 1.5px 1px rgba(255, 255, 255, 1), 1.5px 1.5px 1px rgba(255, 255, 255, 1), 2px 2px 2px rgba(255, 255, 255, 1); } .menuPhone_wrap .col-6 .menuBox .girlOpt { width: 67%; height:100%; margin-left: 30%; position: relative; overflow: hidden; z-index: 1; } .menuPhone_wrap .col-6 .menuBox .girlOpt img { width: 100%; height: auto; position: absolute; top:0px; right: 0; z-index: 1; } /*col-12*/ .menuPhone_wrap .col-12 { float: left; max-width: 100%; padding:3px; margin:0; } .menuPhone_wrap .col-12 .menuBox { width: 100%; height:120px; border-radius:15px; overflow: hidden; position: relative; background-size:100%; background-position:left bottom; box-shadow: 2px 2px 5px #333333; } .menuPhone_wrap .col-12 .menuBox .logoOpt{ width: 25%; height: 100%; text-align: center; position: absolute; overflow: hidden; top: 10px; left: 28%; z-index: 2; display: flex; align-items: center; justify-content: start; } .menuPhone_wrap .col-12 .menuBox .logoOpt img{ width: 100%; height: auto; } .menuPhone_wrap .col-12 .menuBox .logoOpt p { font-size: 15px; font-weight: bold; margin-top: -5px; color: rgba(0, 0, 0, 1); /*-webkit-text-stroke: 1px rgba(255,255,255,1);*/ text-shadow: -1.5px -1.5px 1px rgba(255, 255, 255, 1), 1.5px -1.5px 1px rgba(255, 255, 255, 1), -1.5px 1.5px 1px rgba(255, 255, 255, 1), 1.5px 1.5px 1px rgba(255, 255, 255, 1), 2px 2px 2px rgba(255, 255, 255, 1); } .menuPhone_wrap .col-12 .menuBox .girlOpt { width: 40%; height:100%; margin-left: 38%; position: relative; overflow: hidden; z-index: 1; } .menuPhone_wrap .col-12 .menuBox .girlOpt img { width: 100%; height: auto; position: absolute; top:-5px; right:0px; z-index: 1; } /*col-12-large*/ .menuPhone_wrap .col-12-large { float: left; max-width: 100%; padding:3px; margin:0; } .menuPhone_wrap .col-12-large .menuBox { width: 100%; height:500px; border-radius:15px; overflow: hidden; position: relative; background-size:cover; background-position:left bottom; box-shadow: 2px 2px 5px #333333; } .menuPhone_wrap .col-12-large .menuBox .logoOpt{ width: 45%; height: 100%; text-align: center; position: absolute; overflow: hidden; top: 0%; left: 8%; z-index: 2; display: flex; align-items: center; justify-content: start; } .menuPhone_wrap .col-12-large .menuBox .logoOpt img{ width: 100%; height: auto; } .menuPhone_wrap .col-12-large .menuBox .logoOpt p { font-size: 24px; font-weight: bold; margin-top: -5px; color: rgba(0, 0, 0, 1); /*-webkit-text-stroke: 1px rgba(255,255,255,1);*/ text-shadow: -1.5px -1.5px 1px rgba(255, 255, 255, 1), 1.5px -1.5px 1px rgba(255, 255, 255, 1), -1.5px 1.5px 1px rgba(255, 255, 255, 1), 1.5px 1.5px 1px rgba(255, 255, 255, 1), 2px 2px 2px rgba(255, 255, 255, 1); } .menuPhone_wrap .col-12-large .menuBox .girlOpt { width: 75%; height: 100%; margin-left: 22%; position: relative; overflow: hidden; z-index: 1; } .menuPhone_wrap .col-12-large .menuBox .girlOpt img { width: 100%; height: auto; position: absolute; top:2%; right:0%; z-index: 1; } .menuPhone_wrap .col-12-large.caveat i img { height: auto; top: 36% !important; left: 25%; width: 112px; } .menuPhone_wrap .col-12-large.caveat i .img2{ height: auto; top: 45% !important; left: 52%; width: 73px; } .menuPhone_wrap .col-12-large.caveat i span { line-height: 28px; font-size: 21px; bottom: 35% !important; } /*col-12-medium*/ .menuPhone_wrap .col-12-medium { float: left; max-width: 100%; padding:3px; margin:0; } .menuPhone_wrap .col-12-medium .menuBox { width: 100%; height:240px; border-radius:15px; overflow: hidden; position: relative; background-size:cover; background-position:left bottom; box-shadow: 2px 2px 5px #333333; } .menuPhone_wrap .col-12-medium .menuBox .logoOpt{ width:40%; height:100%; text-align: center; position: absolute; overflow: hidden; top: 8%; left: 15%; z-index: 2; display: flex; align-items: center; justify-content: start; } .menuPhone_wrap .col-12-medium .menuBox .logoOpt img{ width: 100%; height: auto; } .menuPhone_wrap .col-12-medium .menuBox .logoOpt p { font-size: 20px; font-weight: bold; margin-top: -5px; color: rgba(0, 0, 0, 1); /*-webkit-text-stroke: 1px rgba(255,255,255,1);*/ text-shadow: -1.5px -1.5px 1px rgba(255, 255, 255, 1), 1.5px -1.5px 1px rgba(255, 255, 255, 1), -1.5px 1.5px 1px rgba(255, 255, 255, 1), 1.5px 1.5px 1px rgba(255, 255, 255, 1), 2px 2px 2px rgba(255, 255, 255, 1); } .menuPhone_wrap .col-12-medium .menuBox .girlOpt { width: 65%; height: 100%; margin-left: 20%; position: relative; overflow: hidden; z-index: 1; } .menuPhone_wrap .col-12-medium .menuBox .girlOpt img { width: 100%; height: auto; position: absolute; top:0%; right:0px; z-index: 1; } .menuPhone_wrap .col-12-medium.caveat i img { height: auto !important; top: 17% !important; width: 99px; left: 28%; } .menuPhone_wrap .col-12-medium.caveat i .img2 { height: auto !important; top: 32% !important; width: 69px; left: 52%; } .menuPhone_wrap .col-12-medium.caveat i span { line-height: 24px !important; font-size: 22px !important; bottom: 30% !important; } #memberIndexGame .col-12-mediumA{ width: 96%; margin-left: 2%; position: relative; } #memberIndexGame .col-12-mediumA.caveat i span { line-height: 24px !important; font-size: 22px !important; bottom: 26% !important; padding: 0 10px; line-height: 21px; font-size: 14px; font-weight: bold; text-align: center; position: absolute; bottom: 15%; } #memberIndexGame .col-12-mediumA .menuBox .logoOpt { text-align: left; position: absolute; overflow: hidden; top: 8%; left: 7%; z-index: 2; display: inline-block; align-items: center; justify-content: start; } #memberIndexGame .col-12-mediumA .menuBox .logoOpt p { font-size: 14px; line-height: 18px; font-weight: bold; margin-top: 0; margin-left: 3px; color: rgb(57 60 75); text-shadow: none; /* padding-top: 2px; */ } /*col-12-mediumA*/ .menuPhone_wrap .col-12-mediumA { float: left; max-width: 100%; padding:3px; margin:0; margin-bottom: 5px; } .menuPhone_wrap .col-12-mediumA .menuBox { width: 100%; height:240px; border-radius:15px; overflow: hidden; position: relative; background-size:cover; background-position:left bottom; box-shadow: 2px 2px 5px #333333; } .menuPhone_wrap .col-12-mediumA .menuBox .logoOpt{ width:40%; height:100%; text-align: center; position: absolute; overflow: hidden; top: 8%; left: 15%; z-index: 2; display: flex; align-items: center; justify-content: start; } .menuPhone_wrap .col-12-mediumA .menuBox .logoOpt img{ width: 100%; height: auto; } .menuPhone_wrap .col-12-mediumA .menuBox .logoOpt p { font-size: 20px; font-weight: bold; margin-top: -5px; color: rgba(0, 0, 0, 1); /*-webkit-text-stroke: 1px rgba(255,255,255,1);*/ text-shadow: -1.5px -1.5px 1px rgba(255, 255, 255, 1), 1.5px -1.5px 1px rgba(255, 255, 255, 1), -1.5px 1.5px 1px rgba(255, 255, 255, 1), 1.5px 1.5px 1px rgba(255, 255, 255, 1), 2px 2px 2px rgba(255, 255, 255, 1); } .menuPhone_wrap .col-12-mediumA .menuBox .girlOpt { width: 65%; height: 100%; margin-left: 20%; position: relative; overflow: hidden; z-index: 1; } .menuPhone_wrap .col-12-mediumA .menuBox .girlOpt img { width: 100%; height: auto; position: absolute; top:0%; right:0px; z-index: 1; } .menuPhone_wrap .col-12-mediumA.caveat i img { height: auto !important; top: 25% !important; width: 84px; left: 30%; } .menuPhone_wrap .col-12-mediumA.caveat i .img2{ height: auto !important; top: 37% !important; width: 64px; left: 51%; } .menuPhone_wrap .col-12-mediumA.caveat i span { line-height: 24px !important; font-size: 16px !important; bottom: 30% !important; } /*col-12-small*/ .menuPhone_wrap .col-12-small { float: left; max-width: 100%; padding:3px; margin:0; } .menuPhone_wrap .col-12-small .menuBox { width: 100%; height:160px; border-radius:15px; overflow: hidden; position: relative; background-size:cover; background-position:left bottom; box-shadow: 2px 2px 5px #333333; } .menuPhone_wrap .col-12-small .menuBox .logoOpt{ width:30%; height:100%; text-align: center; position: absolute; overflow: hidden; top: 8%; left: 24%; z-index: 2; display: flex; align-items: center; justify-content: start; } .menuPhone_wrap .col-12-small .menuBox .logoOpt img{ width: 100%; height: auto; } .menuPhone_wrap .col-12-small .menuBox .logoOpt p { font-size: 16px; font-weight: bold; margin-top: -5px; color: rgba(0, 0, 0, 1); /*-webkit-text-stroke: 1px rgba(255,255,255,1);*/ text-shadow: -1.5px -1.5px 1px rgba(255, 255, 255, 1), 1.5px -1.5px 1px rgba(255, 255, 255, 1), -1.5px 1.5px 1px rgba(255, 255, 255, 1), 1.5px 1.5px 1px rgba(255, 255, 255, 1), 2px 2px 2px rgba(255, 255, 255, 1); } .menuPhone_wrap .col-12-small .menuBox .girlOpt { width: 45%; height: 100%; margin-left: 35%; position: relative; overflow: hidden; z-index: 1; } .menuPhone_wrap .col-12-small .menuBox .girlOpt img { width: 100%; height: auto; position: absolute; top:0%; right:0px; z-index: 1; } .menuPhone_wrap .col-12-small.caveat i img { height: auto !important; top: 10% !important; width: 75px; left: 34%; } .menuPhone_wrap .col-12-small.caveat i .img2 { height: auto !important; top: 24% !important; width: 52px; left: 52%; } .menuPhone_wrap .col-12-small.caveat i span { line-height: 24px !important; font-size: 20px !important; bottom: 26% !important; } /*col-6-length*/ .menuPhone_wrap .col-6-large { float: left; max-width: 50%; padding:3px; margin:0; } .menuPhone_wrap .col-6-large .menuBox { width: 100%; height:480px; border-radius:15px; overflow: hidden; position: relative; background-size:cover; background-position:left bottom; box-shadow: 2px 2px 5px #333333; } .menuPhone_wrap .col-6-large .menuBox .logoOpt{ width: 60%; height: 25%; text-align: center; position: absolute; overflow: hidden; top: 0%; left: 0%; z-index: 2; display: flex; align-items: center; justify-content: start; } .menuPhone_wrap .col-6-large .menuBox .logoOpt img{ width: 100%; height: auto; } .menuPhone_wrap .col-6-large .menuBox .logoOpt p { font-size: 16px; font-weight: bold; margin-top: -5px; color: rgba(0, 0, 0, 1); /*-webkit-text-stroke: 1px rgba(255,255,255,1);*/ text-shadow: -1.5px -1.5px 1px rgba(255, 255, 255, 1), 1.5px -1.5px 1px rgba(255, 255, 255, 1), -1.5px 1.5px 1px rgba(255, 255, 255, 1), 1.5px 1.5px 1px rgba(255, 255, 255, 1), 2px 2px 2px rgba(255, 255, 255, 1); } .menuPhone_wrap .col-6-large .menuBox .girlOpt { width: 115%; height: 100%; margin-left: 0%; position: relative; overflow: hidden; z-index: 1; } .menuPhone_wrap .col-6-large .menuBox .girlOpt img { width: 100%; height: auto; position: absolute; top:18%; right:5%; z-index: 1; } .menuPhone_wrap .col-6-large.caveat i img { height: 20% !important; top: 35% !important; } .menuPhone_wrap .col-6-large.caveat i span { line-height: 28px !important; font-size: 16px !important; bottom: 35% !important; } /*col-6-medium*/ .menuPhone_wrap .col-6-medium { float: left; max-width: 50%; padding:3px; margin:0; } .menuPhone_wrap .col-6-medium .menuBox { width: 100%; height:240px; border-radius:15px; overflow: hidden; position: relative; background-size:cover; background-position:left bottom; box-shadow: 2px 2px 5px #333333; } .menuPhone_wrap .col-6-medium .menuBox .logoOpt{ width: 60%; height: 50%; text-align: center; position: absolute; overflow: hidden; top: 0%; left:-2%; z-index: 2; display: flex; align-items: center; justify-content: start; } .menuPhone_wrap .col-6-medium .menuBox .logoOpt img{ width: 100%; height: auto; } .menuPhone_wrap .col-6-medium .menuBox .logoOpt p { font-size: 15px; font-weight: bold; margin-top: -5px; color: rgba(0, 0, 0, 1); /*-webkit-text-stroke: 1px rgba(255,255,255,1);*/ text-shadow: -1.5px -1.5px 1px rgba(255, 255, 255, 1), 1.5px -1.5px 1px rgba(255, 255, 255, 1), -1.5px 1.5px 1px rgba(255, 255, 255, 1), 1.5px 1.5px 1px rgba(255, 255, 255, 1), 2px 2px 2px rgba(255, 255, 255, 1); } .menuPhone_wrap .col-6-medium .menuBox .girlOpt { width: 110%; height: 100%; margin-left: 2%; position: relative; overflow: hidden; z-index: 1; box-shadow: 2px 2px 5px #333333; } .menuPhone_wrap .col-6-medium .menuBox .girlOpt img { width: 100%; height: auto; position: absolute; top:15%; right: 0%; z-index: 1; } .menuPhone_wrap .col-6-medium.caveat i img { height: auto !important; top: 22% !important; width: 81px; left: 17%; } .menuPhone_wrap .col-6-medium.caveat i .img2 { height: auto !important; top: 35% !important; width: 56px; left: 55%; } .menuPhone_wrap .col-6-medium.caveat i span { line-height: 22px !important; font-size: 21px !important; padding: 0 15px !important; bottom: 32% !important; } /*col-6-small*/ .menuPhone_wrap .col-6-small { float: left; max-width: 50%; padding:3px; margin:0; } .menuPhone_wrap .col-6-small .menuBox { width: 100%; height:160px; border-radius:15px; overflow: hidden; position: relative; background-size:cover; background-position:left bottom; box-shadow: 2px 2px 5px #333333; } .menuPhone_wrap .col-6-small .menuBox .logoOpt{ width: 60%; height: 50%; text-align: center; position: absolute; overflow: hidden; top: 2%; left:-1%; z-index: 2; display: flex; align-items: center; justify-content: start; } .menuPhone_wrap .col-6-small .menuBox .logoOpt img{ width: 60%; height: auto; } .menuPhone_wrap .col-6-small .menuBox .logoOpt p { font-size: 15px; font-weight: bold; margin-top: -5px; color: rgba(0, 0, 0, 1); /*-webkit-text-stroke: 1px rgba(255,255,255,1);*/ text-shadow: -1.5px -1.5px 1px rgba(255, 255, 255, 1), 1.5px -1.5px 1px rgba(255, 255, 255, 1), -1.5px 1.5px 1px rgba(255, 255, 255, 1), 1.5px 1.5px 1px rgba(255, 255, 255, 1), 2px 2px 2px rgba(255, 255, 255, 1); } .menuPhone_wrap .col-6-small .menuBox .girlOpt { width: 95%; height: 100%; margin-left: 15%; position: relative; overflow: hidden; z-index: 1; } .menuPhone_wrap .col-6-small .menuBox .girlOpt img { width: 100%; height: auto; position: absolute; top:10%; right: 5%; z-index: 1; } .menuPhone_wrap .col-6-small.caveat i img { height: auto !important; top: 16% !important; width: 71px; left: 19%; } .menuPhone_wrap .col-6-small.caveat i .img2 { height: auto !important; top: 31% !important; width: 47px; left: 55%; } .menuPhone_wrap .col-6-small.caveat i span { line-height: 24px !important; font-size: 19px !important; padding: 0 10px !important; bottom: 24% !important; } /*col設定*/ .col-12-large, .col-12-medium, .col-12-small, .col-6-large, .col-6-medium, .col-6-small, .col-4-medium, .col-4-small{ position: relative; width: 100%; } /*禁止設定*/ .menuPhone_wrap .caveat .menuBox{ /*filter: brightness(.33) grayscale(1) !important; -webkit-filter: brightness(.33) grayscale(1) !important;*/ filter: grayscale(60%); } .menuPhone_wrap .caveat a { /*filter: brightness(.33) grayscale(1) !important; -webkit-filter: brightness(.33) grayscale(1) !important;*/ } .menuPhone_wrap i { display: none; } .menuPhone_wrap .caveat b { display: none !important; } .menuPhone_wrap .caveat i { width: 95%; height: 100%; margin-left: 0; position: absolute; display: flex; align-items: center; justify-content: center; z-index: 999; } .menuPhone_wrap .caveat i img { width: auto; height: 50%; position: absolute; top: 9%; z-index: 1000; animation: rotate_caveat 5s linear infinite; left: 21%; } .menuPhone_wrap .caveat i .img2 { width: auto; height: 34%; position: absolute; top: 28%; z-index: 1000; animation: rotate_caveat 5s linear infinite; left: 53%; } .menuPhone_wrap .col-4.caveat i img{ width: auto; height: 47%; position: absolute; top: 14%; z-index: 1000; animation: rotate_caveat 5s linear infinite; left: 7%; } .menuPhone_wrap .col-4.caveat i .img2{ width: auto; height: 32%; position: absolute; top: 33%; z-index: 1000; animation: rotate_caveat 5s linear infinite; left: 51%; } .menuPhone_wrap .caveat i span { padding: 0 15px; line-height: 21px; font-size: 19px; font-weight: bold; text-align: center; /* border: 2px solid rgba(0, 0, 0, 1); */ /* border-radius: 4px; */ /* background-color: rgba(255, 240, 0, 1); */ color: #483434; position: absolute; bottom: 18%; text-shadow: -1.5px -1.5px 1px rgba(255, 255, 255, 1), 1.5px -1.5px 1px rgba(255, 255, 255, 1), -1.5px 1.5px 1px rgba(255, 255, 255, 1), 1.5px 1.5px 1px rgba(255, 255, 255, 1), 2px 2px 2px rgba(255, 255, 255, 1); font-style: normal; } .menuPhone_wrap .col-4.caveat i span{ font-size: 15px; } /*標題 .menuPhone_wrap .menuTitle { width: 220px; line-height: 55px; font-size: 21px; font-weight: bold; text-align: center; margin-bottom: 10px; padding-bottom: 5px; color: rgb(255, 255, 255); text-indent: -20px; position: relative; z-index: 2; -webkit-clip-path: polygon(0px 0px, 100% 0px, 85% 100%, 0% 100%); clip-path: polygon(0px 0px, 100% 0px, 85% 100%, 0% 100%); }*/ .menuTitle{ background-position: center; background-repeat: no-repeat; background-size: cover; padding: 6px 10px 10px 10px !important; color: #fff; font-size: 20px; font-weight: 600; margin-bottom: 10px !important; } .memberIndexGame_menu_div{ box-shadow: 2px 2px 3px #0000003d; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,d5e3f3+100 */ background: rgba(255,255,255,0.8); /* Old browsers */ background: -moz-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(213,227,243,0.8) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(255,255,255,0.8) 0%,rgba(213,227,243,0.8) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(255,255,255,0.8) 0%,rgba(213,227,243,0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(255,255,255,0.8)', endColorstr='rgba(213,227,243,0.8)',GradientType=0 ); /* IE6-9 */ border-radius: 10px; width: 89%; margin: auto; padding-bottom: 2px; } .memberIndexGame_col-3{ max-width: 20%; } .memberIndexGame_menu_div i{ display: block; color: #4e609b; font-size: 53px; line-height: 45px; } .memberIndexGame_menu_div p{ margin-bottom: 3px; font-size: 14px; font-weight: 600; color: #373737; } .memberIndexGame_menu_div .icomoon.icon-sports-01{ font-size: 38px; } .memberIndexGame_menu_div .icomoon.icon-fishing-01{ font-size: 40px; } /*禁止設定 .menuPhone_wrap .caveat a .opt-worp { filter: brightness(.33) grayscale(1) !important; -webkit-filter: brightness(.33) grayscale(1) !important; } .menuPhone_wrap i { display: none; } .menuPhone_wrap .caveat b { display: none !important; } .menuPhone_wrap .caveat i { width: 105%; height: 100%; margin-left: 0; position: absolute; display: flex; align-items: center; justify-content: center; z-index: 999; } .menuPhone_wrap .caveat i img { width: auto; height: 35%; position: absolute; top: 28%; z-index: 1000; } .menuPhone_wrap .caveat i span { padding: 0 15px; line-height: 21px; font-size: 14px; font-weight: bold; text-align: center; border: 2px solid rgba(0, 0, 0, 1); border-radius: 4px; background-color: rgba(255, 240, 0, 1); color: rgba(0, 0, 0, 1); position: absolute; bottom: 22%; }*/ /*.menuPhone_wrap .caveat:hover{ pointer-events: none; }*/ /*字形邊框*/ .font-border { text-shadow: -1.5px -1.5px 1px rgba(255, 255, 255, 1), 1.5px -1.5px 1px rgba(255, 255, 255, 1), -1.5px 1.5px 1px rgba(255, 255, 255, 1), 1.5px 1.5px 1px rgba(255, 255, 255, 1), 0px 0px 2px rgba(255, 255, 255, 1); } /*排版*/ .menuPhone_wrap .menu-box-big { /*float:left;*/ width: 98%; height: 360px; margin: 3.5% 1%; background-color: transparent; position: relative; z-index: 9; } .menuPhone_wrap .menu-box-big i { margin-left: -2%; } .menuPhone_wrap .menu-box-big i img { width: auto; height: 27%; top: 33%; } .menuPhone_wrap .menu-box-big i span { position: absolute; bottom: 30%; } .menuPhone_wrap .menu-box-big:hover b { color: rgba(255, 255, 255, 1); display: block; transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; } .menuPhone_wrap .menu-box-big b { top: 45%; left: 38%; font-size: 18px; letter-spacing: 2px; /*font-weight: bold;*/ color: rgba(255, 255, 255, 0); position: absolute; z-index: 100; } .menuPhone_wrap .menu-box-big .opt-worp { /*float:left;*/ width: 98.5%; height: 100%; margin: 0 0.5%; border: 1px solid rgba(60, 140, 200, 1); border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); -webkit-box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); -moz-box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); background-size: cover; background-repeat: no-repeat; background-position: top center; position: relative; z-index: 9; filter: brightness(1); -webkit-filter: brightness(1); transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; } .menuPhone_wrap .menu-box-big:hover .opt-worp { -webkit-filter: brightness(.33); } .menuPhone_wrap .menu-box-big .opt-worp .box-left { width: 30%; height: 100%; margin-left: 20%; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; z-index: 2; } .menuPhone_wrap .menu-box-big .opt-worp .box-left .logoOpt { min-width: 150px; text-align: center; } .menuPhone_wrap .menu-box-big .opt-worp .box-left .logoOpt p { font-size: 18px; font-weight: bold; line-height: 32px; color: rgba(0, 0, 0, 1); /*-webkit-text-stroke: 1px rgba(255,255,255,1);*/ text-shadow: -1.5px -1.5px 1px rgba(255, 255, 255, 1), 1.5px -1.5px 1px rgba(255, 255, 255, 1), -1.5px 1.5px 1px rgba(255, 255, 255, 1), 1.5px 1.5px 1px rgba(255, 255, 255, 1), 2px 2px 2px rgba(255, 255, 255, 1); } .menuPhone_wrap .menu-box-big .opt-worp .box-right { width: 65%; height: 100%; margin-right: 10%; position: absolute; top: 0; right: 0; z-index: 1; } .menuPhone_wrap .menu-box-big .opt-worp .box-right .girlOpt { width: 100%; height: 100%; /*margin-right:10%;*/ position: absolute; overflow: hidden; bottom: 0; right: 0; z-index: 1; } .menuPhone_wrap .menu-box-big .opt-worp .box-right .girlOpt img { width: 100%; height: auto; } /*單數*/ .menuPhone_wrap .menu-box-odd { /*float:left;*/ width: 98%; height: 200px; margin: 3.5% 1%; background-color: transparent; position: relative; z-index: 9; } .menuPhone_wrap .menu-box-odd i { margin-left: -2%; } .menuPhone_wrap .menu-box-odd i img { width: auto; height: 45%; top: 20%; } .menuPhone_wrap .menu-box-odd i span { position: absolute; bottom: 20%; } .menuPhone_wrap .menu-box-odd:hover b { color: rgba(255, 255, 255, 1); display: block; transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; } .menuPhone_wrap .menu-box-odd b { top: 45%; left: 38%; font-size: 18px; letter-spacing: 2px; /*font-weight: bold;*/ color: rgba(255, 255, 255, 0); position: absolute; z-index: 100; } .menuPhone_wrap .menu-box-odd .opt-worp { /*float:left;*/ width: 99%; height: 100%; margin: 0 0.5%; border: 1px solid rgba(60, 140, 200, 1); border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); -webkit-box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); -moz-box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); background-size: cover; background-repeat: no-repeat; background-position: top center; position: relative; z-index: 9; filter: brightness(1); -webkit-filter: brightness(1); transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; } .menuPhone_wrap .menu-box-odd:hover .opt-worp { -webkit-filter: brightness(.33); } .menuPhone_wrap .menu-box-odd .opt-worp .box-left { width: 37%; height: 60%; margin: 13% 0 0 17%; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; z-index: 2; } .menuPhone_wrap .menu-box-odd .opt-worp .box-left .logoOpt { width: 100%; text-align: center; } .menuPhone_wrap .menu-box-odd .opt-worp .box-left .logoOpt img { width: 100%; height: auto; } .menuPhone_wrap .menu-box-odd .opt-worp .box-left .logoOpt p { font-size: 17px; font-weight: bold; line-height: 32px; color: rgba(0, 0, 0, 1); /*-webkit-text-stroke: 1px rgba(255,255,255,1);*/ text-shadow: -1.5px -1.5px 1px rgba(255, 255, 255, 1), 1.5px -1.5px 1px rgba(255, 255, 255, 1), -1.5px 1.5px 1px rgba(255, 255, 255, 1), 1.5px 1.5px 1px rgba(255, 255, 255, 1), 2px 2px 2px rgba(255, 255, 255, 1); } .menuPhone_wrap .menu-box-odd .opt-worp .box-right { width: 54%; height: 100%; margin-right: 18%; position: absolute; top: 0; right: 0; z-index: 1; } .menuPhone_wrap .menu-box-odd .opt-worp .box-right .girlOpt { width: 100%; height: 100%; /*margin-right:10%;*/ position: absolute; overflow: hidden; bottom: 0; right: 0; z-index: 1; } .menuPhone_wrap .menu-box-odd .opt-worp .box-right .girlOpt img { width: 100%; height: auto; position: absolute; top: -3%; left: 0; } /*雙數*/ .menuPhone_wrap .menu-box-even { /*float:left;*/ width: 97%; height: 200px; margin: 3.5% 1.5%; border: 1px solid rgba(60, 140, 200, 1); border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); -webkit-box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); -moz-box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); overflow: hidden; position: relative; z-index: 9; } /*左選單*/ .menuPhone_wrap .menu-box-even .menu-box-left { width: 55%; height: 100%; margin: 0; /*border-right: 1px solid rgba(60, 140, 200, 1);*/ -webkit-clip-path: polygon(0 0, 99% 0, 85% 100%, 0% 100%); clip-path: polygon(0 0, 99% 0, 85% 100%, 0% 100%); background-size: cover; background-position: bottom left; position: absolute; top: 0; left: 0; z-index: 2; } .menuPhone_wrap .menu-box-even .menu-box-left i { left: -5%; } .menuPhone_wrap .menu-box-even i { margin-left: -3%; } .menuPhone_wrap .menu-box-even .menu-box-left i img { width: auto; height: 45%; top: 20%; } .menuPhone_wrap .menu-box-even .menu-box-left i span { position: absolute; bottom: 20%; } .menuPhone_wrap .menu-box-even .menu-box-left a { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .menuPhone_wrap .menu-box-even .menu-box-left a b { top: 45%; left: 25%; font-size: 18px; letter-spacing: 2px; /*font-weight: bold;*/ color: rgba(255, 255, 255, 0); position: absolute; z-index: 100; } .menuPhone_wrap .menu-box-even .menu-box-left a:hover b { color: rgba(255, 255, 255, 1); transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; } .menuPhone_wrap .menu-box-even .menu-box-left a .opt-worp { /*float:left;*/ width: 99%; height: 100%; border-radius: 10px 0px 0px 10px; -webkit-border-radius: 10px 0px 0px 10px; -moz-border-radius: 10px 0px 0px 10px; overflow: hidden; background-size: 200% 130%; background-position: left bottom; filter: brightness(1); -webkit-filter: brightness(1); transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; position: relative; z-index: 9; } .menuPhone_wrap .menu-box-even .menu-box-left a:hover .opt-worp { filter: brightness(.33); -webkit-filter: brightness(.33); } .menuPhone_wrap .menu-box-even .menu-box-left a .opt-worp .slashBorder { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 3; background: rgba(60, 140, 200, 1); -webkit-clip-path: polygon(99.4% 0, 100% 0, 85.5% 100%, 84.9% 100%); clip-path: polygon(99.4% 0, 100% 0, 85.5% 100%, 84.9% 100%); } .menuPhone_wrap .menu-box-even .menu-box-left a .box-left { width: 90%; height: 100%; margin-right: 8%; position: absolute; top: 0; left: -10px; z-index: 1; } .menuPhone_wrap .menu-box-even .menu-box-left a .opt-worp .box-left .girlOpt { width: 114%; height: 100%; /*margin-right:10%;*/ border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; position: absolute; overflow: hidden; bottom: 0; right: -10px; z-index: 1; } .menuPhone_wrap .menu-box-even .menu-box-left a .opt-worp .box-left .girlOpt img { width: 100%; height: auto; transform: rotateY(180deg); position: absolute; top: -1%; left: 0; } .menuPhone_wrap .menu-box-even .menu-box-left a .box-right { width: 64.5%; height: 60%; margin: 27.5% 0% 0 0; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; right: 15px; z-index: 2; } .menuPhone_wrap .menu-box-even .menu-box-left a .opt-worp .box-right .logoOpt { width: 100%; text-align: center; } .menuPhone_wrap .menu-box-even .menu-box-left a .opt-worp .box-right .logoOpt img { width: 92%; height: auto; } .menuPhone_wrap .menu-box-even .menu-box-left a .opt-worp .box-right .logoOpt p { font-size: 17px; font-weight: bold; line-height: 32px; margin-top: -7px; color: rgba(0, 0, 0, 1); /*-webkit-text-stroke: 1px rgba(255,255,255,1);*/ text-shadow: -1.5px -1.5px 1px rgba(255, 255, 255, 1), 1.5px -1.5px 1px rgba(255, 255, 255, 1), -1.5px 1.5px 1px rgba(255, 255, 255, 1), 1.5px 1.5px 1px rgba(255, 255, 255, 1), 2px 2px 2px rgba(255, 255, 255, 1); } /*右選單*/ .menuPhone_wrap .menu-box-even .menu-box-right { width: 55%; height: 100%; margin: 0; position: absolute; top: 0; right: 0; z-index: 1; } .menuPhone_wrap .menu-box-even .menu-box-right i { left: 2%; } .menuPhone_wrap .menu-box-even .menu-box-right i img { width: auto; height: 45%; top: 20%; } .menuPhone_wrap .menu-box-even .menu-box-right i span { position: absolute; bottom: 20%; } .menuPhone_wrap .menu-box-even .menu-box-right a { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .menuPhone_wrap .menu-box-even .menu-box-right a b { top: 45%; left: 35%; font-size: 18px; letter-spacing: 2px; /*font-weight: bold;*/ color: rgba(255, 255, 255, 0); position: absolute; z-index: 100; } .menuPhone_wrap .menu-box-even .menu-box-right a:hover b { color: rgba(255, 255, 255, 1); transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; } .menuPhone_wrap .menu-box-even .menu-box-right a .opt-worp { /*float:left;*/ width: 100%; height: 100%; border-radius: 0px 10px 10px 0px; -webkit-border-radius: 0px 10px 10px 0px; -moz-border-radius: 0px 10px 10px 0px; overflow: hidden; background-size: 200% 130%; background-position: right bottom; filter: brightness(1); -webkit-filter: brightness(1); transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; position: relative; z-index: 9; } .menuPhone_wrap .menu-box-even .menu-box-right a:hover .opt-worp { filter: brightness(.33); -webkit-filter: brightness(.33); } .menuPhone_wrap .menu-box-even .menu-box-right a .opt-worp .box-left { width: 80%; height: 60%; margin: 28% 0 0 0%; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; z-index: 2; } .menuPhone_wrap .menu-box-even .menu-box-right a .opt-worp .box-left .logoOpt { width: 100%; text-align: center; } .menuPhone_wrap .menu-box-even .menu-box-right a .opt-worp .box-left .logoOpt img { width: 80%; height: auto; } .menuPhone_wrap .menu-box-even .menu-box-right a .opt-worp .box-left .logoOpt p { font-size: 17px; font-weight: bold; line-height: 32px; margin-top: -10px; color: rgba(0, 0, 0, 1); /*-webkit-text-stroke: 1px rgba(255,255,255,1);*/ text-shadow: -1.5px -1.5px 1px rgba(255, 255, 255, 1), 1.5px -1.5px 1px rgba(255, 255, 255, 1), -1.5px 1.5px 1px rgba(255, 255, 255, 1), 1.5px 1.5px 1px rgba(255, 255, 255, 1), 2px 2px 2px rgba(255, 255, 255, 1); } .menuPhone_wrap .menu-box-even .menu-box-right a .opt-worp .box-right { width: 102%; height: 100%; margin-right: 0%; position: absolute; top: 0; right: -10px; z-index: 1; } .menuPhone_wrap .menu-box-even .menu-box-right a .opt-worp .box-right .girlOpt { width: 95%; height: 100%; /*margin-right:10%;*/ position: absolute; overflow: hidden; bottom: 0; right: 0; z-index: 1; } .menuPhone_wrap .menu-box-even .menu-box-right a .opt-worp .box-right .girlOpt img { width: 100%; height: auto; /*transform: rotateY(180deg);*/ position: absolute; top: -2%; left: 0; } /*優惠*/ .menuPhone_wrap .discount-box { width: 98%; height: 200px; margin: 3.5% 1% 100px; background-color: transparent; position: relative; z-index: 9; } .menuPhone_wrap .discount-box a { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; top: 0; left: 0; position: absolute; } .menuPhone_wrap .discount-box b { width: 100px; /*top: 40%;*/ /*left:38%;*/ font-size: 18px; letter-spacing: 2px; /*font-weight: bold;*/ position: absolute; z-index: 100; } .menuPhone_wrap .discount-box b p { width: 100%; text-align: center; padding: 0; margin: 0; } .menuPhone_wrap .discount-box b img { width: 100%; height: auto; } .menuPhone_wrap .discount-box a { /*float:left;*/ width: 100%; height: 100%; } .menuPhone_wrap .discount-box a .opt-worp { /*float:left;*/ width: 99%; height: 100%; margin: 0 0.5%; border: 1px solid rgba(60, 140, 200, 1); border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); -webkit-box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); -moz-box-shadow: 0px 0px 8px rgba(62, 62, 62, .5); background-image: url(../images/Opt/discountPic.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative; z-index: 9; filter: brightness(1); -webkit-filter: brightness(1); transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; } .menuPhone_wrap .discount-box a:hover .opt-worp { -webkit-filter: brightness(.33); } /*----- Phone版 End ---------*/ /*------選單------*/ /*-------財務紀錄------*/ .record_warp { border: 7px solid rgba(5, 100, 160, 1); border-radius: 15px; padding-bottom: 50px; background-color: rgba(255, 255, 255, 1); } /*標題*/ .record_warp .recordTitle { width: 200px; margin: 0 auto; height: 38px; padding-bottom: 5px; font-size: 1.2em; text-align: center; color: rgba(255, 255, 5, 1); border-radius: 0px 0px 15px 15px; background-color: rgba(5, 100, 160, 1); padding-right: 5px; } .record_warp .recordTitle span { font-size: 1.5em; margin-right: 10px; } /*選擇框*/ .recordChoice { width: 84%; overflow: hidden; margin: 30px auto 0 auto; } .recordChoice .record-item { float: left; width: 12.5%; height: 130px; margin: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; } /*選擇框-圓標*/ .recordChoice .record-item .circle-item { width: 90px; height: 90px; color: rgba(5, 100, 160, 1); display: flex; align-items: center; justify-content: center; position: absolute; z-index: 9; border-radius: 50%; background: #fff; box-shadow: 2px 2px 5px rgba(51, 51, 51, 0.29) !important; -webkit-box-shadow: 2px 2px 5px rgba(51, 51, 51, 0.29) !important; -moz-box-shadow: 2px 2px 5px rgba(51, 51, 51, 0.29) !important; } .recordChoice .record-item .circle-item a { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .recordChoice .record-item .circle-item a span { font-size: 2.3em; padding: 0; color: rgba(5, 100, 160, 1); position: absolute; top: 16%; z-index: 2; } .recordChoice .record-item .circle-item a strong { font-size: 0.9em; margin: 0; padding: 0; color: rgba(5, 100, 160, 1); position: absolute; bottom: 18%; z-index: 2; } /*---啟動標示---*/ .recordChoice .record-item.on .circle-item, .recordChoice .record-item:hover .circle-item{ background-image: -webkit-linear-gradient(0deg, rgba(60, 200, 235, 1), rgba(230, 245, 175, 1)); background-image: -moz-linear-gradient(0deg, rgba(60, 200, 235, 1), rgba(230, 245, 175, 1)); background-image: linear-gradient(0deg, rgba(60, 200, 235, 1), rgba(230, 245, 175, 1)); } .recordChoice .record-item.on .circle-item span, .recordChoice .record-item:hover .circle-item span{ color: rgba(255, 255, 30, 1) !important; } .recordChoice .record-item.on .circle-item strong, .recordChoice .record-item:hover .circle-item strong{ color: rgba(255, 255, 255, 1) !important; text-shadow: 0px 0px 5px rgba(0, 0, 0, .2) !important; } .recordChoice .record-item.on .circle-item::before , .recordChoice .record-item:hover .circle-item::before{ width: 85px; height: 85px; content: ''; border-radius: 50%; position: absolute; z-index: 1; left: 3px; top: 3px; right: 3px; bottom: 3px; background-image: -webkit-linear-gradient(0deg, rgba(230, 245, 175, 1), rgba(60, 200, 235, 1)); background-image: -moz-linear-gradient(0deg, rgba(230, 245, 175, 1), rgba(60, 200, 235, 1)); background-image: linear-gradient(0deg, rgba(230, 245, 175, 1), rgba(60, 200, 235, 1)); } /*漸層旋轉*/ .recordChoice .record-item.on .record-linear { display: none; } .recordChoice .record-item.on .record-linear { float: left; width: 114px; height: 114px; margin: 0; border-radius: 50%; background-image: -webkit-linear-gradient(0deg, rgba(60, 200, 235, 1), rgba(230, 245, 175, 1)); background-image: -moz-linear-gradient(0deg, rgba(60, 200, 235, 1), rgba(230, 245, 175, 1)); background-image: linear-gradient(0deg, rgba(60, 200, 235, 1), rgba(230, 245, 175, 1)); display: flex !important; align-items: center; justify-content: center; position: absolute; z-index: 1; } .recordChoice .record-item.on .record-linear::before { width: 116px; height: 116px; content: ''; position: absolute; border-radius: 50%; left: -1px; top: -1px; right: -1px; bottom: -1px; border: 5px solid transparent; border-top: 5px solid rgba(255, 255, 255, 1); /*border-right: 5px solid #fff;*/ border-bottom: 5px solid rgba(255, 255, 255, 1); animation: rotate 1.5s infinite linear; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .recordChoice .record-item.on .record-whiteBG { float: left; width: 110px; height: 110px; margin: 0; border-radius: 50%; background-color: white; position: absolute; z-index: 2; } .record_warp .recordTable { width: 96%; margin: 15px auto 0 auto; padding: 20px; border-radius: 15px; background-color: rgba(255, 255, 255, 1); position: relative; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.24) !important; -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.24) !important; -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.24) !important; } .record_warp .recordTable table { width: 101%; /*border:1px solid #000; */ text-align: center; border-collapse: collapse; border-radius: 15px; margin-bottom: 10px; overflow: hidden; /*box-shadow: 0px 0px 5px rgba(0, 0, 0, .5) !important; -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, .5) !important; -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, .5) !important;*/ } .MemberCenter-style .recordTable table { box-shadow: 0px 0px 5px rgba(0, 0, 0, .5) !important; -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, .5) !important; -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, .5) !important; } .record_warp .recordTable table tbody { width: 100%; } .record_warp .recordTable table tbody tr { background-color: rgba(255, 255, 255, 1); border-right: 1px solid rgba(255, 255, 255, 1); padding: 5px; position: relative; } .record_warp .recordTable table tbody tr:nth-child(1) { background-color: rgba(110, 210, 245, 1) !important; } .record_warp .recordTable table tbody tr:nth-child(odd) { background-color: rgba(215, 245, 255, 1); } .record_warp .recordTable table tbody tr:nth-last-child(odd) { border-right: 1px solid rgba(215, 245, 255, 1); } .record_warp .recordTable table tbody th { height: 50px; color: rgb(5, 90, 160) !important; /*background-color: rgba(110, 210, 245, 1);*/ border-top: none; border-right: 3px solid rgb(255, 255, 255); border-bottom: none; border-left: none; color: #fff; } .record_warp .recordTable table tbody th:last-child { border-right: 1px solid rgb(110, 210, 245); } .record_warp .recordTable table tbody td { line-height: 50px; font-size: 16px; padding: 5px 0; border-top: none; border-right: none; border-bottom: none; border-left: 3px solid rgb(185, 230, 250); color: rgb(5, 90, 160); /*background-color: rgba(255,255,255,1);*/ } .record_warp .recordTable table tbody td:first-child { border-left: none; } .record_warp .recordTable table tbody td .wait { color: rgb(255, 0, 0); } .record_warp .recordTable table tbody td .btn { height: 35px; } .record_warp .recordTable table tbody td input { float: left; width: 67%; line-height: 40px; padding: 0; margin: 0px 1% 0px 2%; display: block; background-color: rgba(255, 255, 255, 0); box-shadow: 0px 0px 5px rgba(0, 0, 0, .5) !important; -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, .5) !important; -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, .5) !important; border-radius: 10px; border-width: 0px; text-align: center; } .record_warp .recordTable table tbody td .btn-info { float: left; width: 26%; height: 40px; margin: 0px 2% 0px 1%; border-radius: 10px; background-color: rgb(5, 90, 160) !important; } .record_warp .recordTable table tbody td .btn-info:hover { background-color: rgb(0, 80, 150) !important; } .record_warp a, .record_warp a:focus:not(.btn){ color: rgb(11, 97, 158); } .record_warp a:hover{ color: rgb(44, 148, 158); } .record_warp hr { border: 0; height: 2px; background-color: rgb(185, 185, 185); background-image:none; background-image:none; } /*------報表方式2-------*/ .record_warp .recordDiv { width: 92%; margin: 15px auto 0 auto; padding:0; border-radius: 15px; background-color: rgba(255, 255, 255, 1); line-height: 50px; font-size: 15px; text-align: center; overflow: hidden; position: relative; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.24) !important; -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.24) !important; -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.24) !important; } .record_warp .recordDiv .trDiv{ width: 100%; margin-top: -1px; /*border-bottom: 1px solid rgba(241,241,241,1);*/ background-color: rgba(255, 255, 255, 1); } .record_warp .recordDiv .trDiv div{ border-bottom: 1px solid rgba(241,241,241,1); } .record_warp .recordDiv .trDiv:first-child { background-color: rgba(110, 210, 245, 1) !important; border-bottom:none !important; } .record_warp .recordDiv .trDiv:nth-child(odd) { background-color: rgba(215, 245, 255, 1); } .record_warp .recordDiv .trDiv:last-child { border-bottom:none; } .record_warp .recordDiv .trDiv .thDiv { line-height: 50px; font-weight: bold; text-align: center; margin: 0 !important; color: rgb(5, 90, 160) !important; /*background-color: rgba(110, 210, 245, 1);*/ } .record_warp .recordDiv .trDiv .tdDiv { text-align: center; padding:0; color: rgb(5, 90, 160); /*background-color: rgba(255,255,255,1);*/ position: relative; } .record_warp .recordDiv .trDiv .tdDiv .td-4-tag{ float: left; width: 33.333333%; padding: 0 5px; background-color: rgba(110, 210, 245, 1); } .record_warp .recordDiv .trDiv .tdDiv .td-3-tag{ float: left; width: 25%; padding: 0 5px; background-color: rgba(110, 210, 245, 1); } .record_warp .recordDiv .trDiv .tdDiv .td-4-btn{ float: left; width: 33.333333%; padding: 0 5px; background-color: rgba(110, 210, 245, 1); } .record_warp .recordDiv .trDiv .tdDiv .td-3-btn{ float: left; width: 25%; padding: 0 5px; background-color: rgba(110, 210, 245, 1); } .record_warp .recordDiv .trDiv .tdDiv .td-8{ float: left; min-height: 50px; padding: 0 5px; width: 66.666667%; background-color: rgba(255, 255, 255, 1); } .record_warp .recordDiv .trDiv .tdDiv .td-9{ float: left; min-height: 50px; padding: 0 5px; width: 75%; background-color: rgba(255, 255, 255, 1); } .record_warp .recordDiv .trDiv .tdDiv .collapseCall{ width: 100%; padding: 0; margin: 0; } .record_warp .recordDiv .trDiv .tdDiv .collapseClick{ width: 100%; display: inline-block; } .record_warp .recordDiv .trDiv .tdDiv .collapseClick .collapseCall .arrowDown { /*width: 30px;*/ font-size: 18px; line-height: 50px; display: inline-block; color: rgb(5, 90, 160) !important; position: relative; } .record_warp .recordDiv .trDiv .tdDiv .collapseCall .rotate { transform: rotate(180deg); cursor: pointer; } .record_warp .recordDiv .trDiv .tdDiv .collapseCall .arrowDown::after { transform: rotate(180deg); cursor: pointer; } .record_warp .recordDiv .trDiv .tdDiv .collapseCall .arrowDown a{ color: rgb(5, 90, 160) !important; text-decoration: none; } .record_warp .recordDiv .trDiv .tdDiv .collapseCall .arrowDown a:hover{ color: rgb(5, 90, 160) !important; text-decoration: none; } .record_warp .recordDiv .trDiv .tdDiv .collapse{ width: 100%; padding: 0; margin: 0; background: rgba(255,255,255,1); } .record_warp .recordDiv .trDiv .tdDiv .collapse .tag{ background-color: rgba(110, 210, 245, 1); } .record_warp .recordDiv .trDiv .btnSet{ float: right; line-height: 26px; font-size: 13px; padding: 0px 10px; margin:10px 10px 10px 0px; color: #FFFFFF; } /*--- 遊戲報表 ---*/ .record_warp .daySelect { width: 60%; margin: 20px 20% 0px 20%; } .record_warp .border-radius-input { width: 100%; height: 45px; border:none; /* box-shadow: 0px 0px 5px rgba(0, 0, 0, .4); -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, .4); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, .4); -webkit-border-radius: 7px ; -moz-border-radius: 7px; border-radius: 7px;*/ } .border-radius-input-shadow{ box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.18) !important; -webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.18) !important; -moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.18) !important; } .border-radius-input-left{ border-top-left-radius: 7px !important; border-bottom-left-radius: 7px !important; border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; } .border-radius-input-right{ border-top-left-radius: 0px !important; border-bottom-left-radius: 0px !important; border-top-right-radius: 7px !important; border-bottom-right-radius: 7px !important; } .border-radius-input-center{ border-left: 1px solid rgba(51, 51, 51, 0.18823529411764706); background-color: #fff; border-right: 1px solid rgba(51, 51, 51, 0.18823529411764706); } .record_warp .border-radius-input:active, .record_warp .border-radius-input:focus { box-shadow: 0px 0px 5px rgba(0, 0, 0, .4) !important; -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, .4) !important; -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, .4) !important; } .record_warp label { font-size: 18px; height: 45px; font-weight: bold; letter-spacing: 1px; color: rgb(11, 97, 158); } .record_warp .form-control{ font-size: 18px; font-weight: bold; -webkit-border-radius: 7px !important; -moz-border-radius: 7px !important; border-radius: 7px !important; } .record_warp .explain{ font-size: 16px; line-height: 20px; padding: 5px 0; color: rgb(11, 97, 158); text-align: center; font-weight: bold; letter-spacing: 1px; } /* button colors */ .btn-blue { background-color: #1265A8; color: #FFF !important; } .btn-blue:hover { color:#fff !important; background-color:#434343; } .btn-day { font-size: 18px; height: 45px; font-weight: bold; cursor: pointer; color: rgb(11, 97, 158); background-image:none; background-image:none; background-image:none; background-color: rgb(255, 255, 255); box-shadow: 0px 0px 5px rgba(0, 0, 0, .4) !important; -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, .4) !important; -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, .4) !important; border-radius: 8px; border: none; } .btn-day:hover { color: rgb(255, 255, 255); background-color:none; background-image: -webkit-linear-gradient(0deg, rgba(60, 200, 235, 1), rgba(230, 245, 175, 1)); background-image: -moz-linear-gradient(0deg, rgba(60, 200, 235, 1), rgba(230, 245, 175, 1)); background-image: linear-gradient(0deg, rgba(60, 200, 235, 1), rgba(230, 245, 175, 1)); transition: all 0.15s ease 0s; -moz-transition: all 0.15s ease 0s; -webkit-transition: all 0.15s ease 0s; -o-transition: all 0.15s ease 0s; } .btn-day.on { color: rgb(255, 255, 255); background-color:none; background-image: -webkit-linear-gradient(0deg, rgba(60, 200, 235, 1), rgba(230, 245, 175, 1)); background-image: -moz-linear-gradient(0deg, rgba(60, 200, 235, 1), rgba(230, 245, 175, 1)); background-image: linear-gradient(0deg, rgba(60, 200, 235, 1), rgba(230, 245, 175, 1)); } .border-radius-input-pc{ background-color: rgb(255, 255, 255); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.19) !important; -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.19) !important; -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.19) !important; border-radius: 8px; } .bg-color{ background-color: rgb(63, 197, 240) !important; color: #fff; } /*--------- 遊戲大廳 ---------*/ .Game-hall { min-height: 800px; border-radius: 18px 18px 0 0; border-top: 8px solid rgb(11, 97, 158); border-right: 8px solid rgb(11, 97, 158); border-bottom:none; border-left: 8px solid rgb(11, 97, 158); background-color: rgb(255,255,255); z-index: 9; } .Game-Girl{ /*position: absolute; top: -25px; left: 0px; cursor: default;*/ width: 80%; position: absolute; top: 186px; left: 50%; transform: translate(-50%, -50%); } .Game-hall .recordChoice{ /*background: url(../images/Game-line.png) no-repeat center center;*/ position: relative; } /*-- 旋轉選單 --*/ .Game-hall .recordChoice .record-item { float:none; width:100%; height: 130px; margin: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; } .Game-hall .recordChoice .record-item .circle-item { color: rgb(40,30,30); border: 3px solid rgb(160,160,160); box-shadow:none !important; -webkit-box-shadow:none !important; -moz-box-shadow:none !important; } .Game-hall .recordChoice .record-item.on .circle-item , .Game-hall .recordChoice .record-item:hover .circle-item { border:none; } .Game-hall .recordChoice .record-item.on .circle-item::before, .Game-hall .recordChoice .record-item:hover .circle-item::before { width: 84px; height: 84px; background-color: #FFFFFF; background-image:none; } .Game-hall .recordChoice .record-item .circle-item a span { font-size: 1.9em; top: 16%; color: rgb(160, 160, 160); } .Game-hall .recordChoice .record-item.on .circle-item span, .Game-hall .recordChoice .record-item:hover .circle-item span { color:rgb(5, 100, 160) !important; } .Game-hall .recordChoice .record-item.on .circle-item strong, .Game-hall .recordChoice .record-item:hover .circle-item strong { color:rgb(5, 100, 160) !important; } .Game-hall .recordChoice .record-item .circle-item a strong { color: rgb(160,160,160); font-size: 0.95em; bottom: 20%; } /*-- 旋轉選單 END --*/ /*-- 頁簽修改 --*/ .Game-hall .recordChoice .nav { width: 100%; } .Game-hall .recordChoice .nav-tabs { width: 78%; margin: 0 auto; border: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; } .Game-hall .recordChoice .nav-tabs .nav-item { background-color: rgb(255,255,255); position: relative; float: left; width: 17%; margin: 0 auto; } .Game-hall .recordChoice .nav-tabs>li { float: left; width: 15%; position: relative; margin: 0 auto; } .Game-hall .recordChoice .nav-tabs .nav-item.show .nav-link, .Game-hall .recordChoice .nav-tabs .nav-link.active { color: #495057; background-color: transparent; border-color: transparent; } .Game-hall .recordChoice .nav-tabs .nav-link, .Game-hall .recordChoice .nav-tabs .nav-link:focus, .Game-hall .recordChoice .nav-tabs .nav-link:hover { border: none; } .gameMenu_div{ display: none; } .gameMenu_div.on{ display: block; } /*-- 頁簽修改 END --*/ /*-- 頁簽內容 --*/ .Game-hall .tab-content { width: 90%; margin: 0 auto; padding: 15px 0; } .Game-hall .game-image-box { position: relative; overflow: hidden; display: block; border-radius: 10px; background-image: -webkit-linear-gradient(0deg, rgba(60, 200, 235, 1), rgba(230, 245, 175, 1)); background-image: -moz-linear-gradient(0deg, rgba(60, 200, 235, 1), rgba(230, 245, 175, 1)); background-image: linear-gradient(0deg, rgba(60, 200, 235, 1), rgba(230, 245, 175, 1)); height: 145px; } .Game-hall .game-image-box:hover a{ opacity: 1; transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; } .Game-hall .game-image-box b{ width: 90%; height: 90%; margin: 5%; position: relative; overflow: hidden; display: block; background-color: rgb(255,255,255); } .Game-hall .game-image-box a{ width: 100%; height: 100%; position: absolute; z-index: 9; opacity: 0; margin: 0; overflow: hidden; background-color: rgba(0,0,0,0.6); } .Game-hall .game-image-box a .btn-warning { color:rgb(255,0,0); border-radius: 10px; padding: 5px 20px; } .Game-hall .game-image-box a .btn-warning:hover { color:rgb(0,0,0); background-color: #ffc107; border-color: #ffc107; } .Game-hall .tab-pane p{ color: rgb(11, 97, 158); font-weight: bold; } /*-- 頁簽內容 END --*/ /*--------- 遊戲大廳 END ---------*/ /*滑鼠*/ .record_warp .mouse-turn { width: 126px; height: 32px; margin: 10px auto 0px auto; position: relative; /* margin-left: -4em; */ /*bottom: 30px;*/ } .record_warp .mouse-turn .mouse { width: 50px; position: absolute; background: url(../images/mouse/mouse.gif) no-repeat center top; height: 35px; left: 23px; -webkit-transition: all 500ms ease-out 500ms; -ms-transition: all 500ms ease-out 500ms; transition: all 500ms ease-out 500ms; } .record_warp .mouse-turn .mouseGo { -webkit-animation: ani 1s ease-out infinite; -moz-animation: ani 1s ease-out infinite; -o-animation: ani 1s ease-out infinite; animation: ani 1s ease-out infinite; left: 23px; } .record_warp .mouse-turn .top-prev { position: absolute; background: url(../images/mouse/arrow-d.png) no-repeat center top; width: 23px; height: 35px; left: 0; /*opacity: 0.7;*/ } .record_warp .bot-next { position: absolute; background: url(../images/mouse/arrow-u.png) no-repeat center top; width: 23px; height: 35px; right: 0px; /*opacity: 0.7;*/ } @-webkit-keyframes ani { 0% { left: 63px } 100% { left: 23px } } @-moz-keyframes ani { 0% { left: 63px } 100% { left: 23px } } @-o-keyframes ani { 0% { left: 63px } 100% { left: 23px } } @keyframes ani { 0% { left: 63px } 100% { left: 23px } } /*下拉選單(財務手機用)*/ .select { width: 100%; line-height: 45 xp; padding: 0; position: relative; z-index: 10; } .select ul { margin: 0; padding: 0; list-style-type: none; } .select li { cursor: pointer; } .select ul li { height: 45px; line-height: 45px; text-align: center; letter-spacing: 2px; border-radius: 7px; list-style: none; background-color: rgba(255, 255, 255, 1); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.31) !important; -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.31) !important; -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.31) !important; } .select ul li span { font-size: 28px; top: 5px; right: 5px; position: relative; } .actionName_span{ font-size: 18px !important; top: 0px !important; right: 0px !important; position: initial !important; } .select ul li strong { font-size: 24px; top: 2px; left: 20px; position: relative; } .select ul li a { font-size: 18px; font-weight: bolder; color: rgba(5, 100, 160, 1); text-decoration: none; height: 45px; line-height: 40px; display: block; } .select ul li ul { width: 95%; margin: 0 5%; margin-top: 1px; position: absolute; top: 45px; left: 0; } .select ul li ul li { width: 100%; position: relative; text-align: center; letter-spacing: 2px; border: 1px solid rgba(160, 160, 160, 1); margin-top: -1px; margin-left: -5px; border-radius: 0; cursor: pointer; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; } .select ul.submenu { display: none; } .select ul.submenu { /*margin-left: 25px;*/ list-style-type: disc; color: #333333; } /*下拉選單(財務手機用) END*/ /*提示(跳出框)*/ .record-dialog-general { /*-webkit-clip-path: polygon(0% 15%, 0 0, 15% 0%, 93% 0, 96% 5%, 100% 11%, 100% 85%, 100% 100%, 85% 100%, 15% 100%, 0 100%, 0% 85%);*/ /*clip-path: polygon(0% 15%, 0 0, 15% 0%, 93% 0, 96% 5%, 100% 11%, 100% 85%, 100% 100%, 85% 100%, 15% 100%, 0 100%, 0% 85%);*/ max-width: 700px !important; margin-top: 80px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0) !important; -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0) !important; -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0) !important; background-color: rgb(11, 97, 158); background: linear-gradient(10deg, rgba(60, 200, 235, 1) 45%, rgba(230, 245, 175, 1) 90%); background: -moz-linear-gradient(10deg, rgba(60, 200, 235, 1) 45%, rgba(230, 245, 175, 1) 90%); background: -webkit-linear-gradient(10deg, rgba(60, 200, 235, 1) 45%, rgba(230, 245, 175, 1) 90%); background: -o-linear-gradient(10deg, rgba(60, 200, 235, 1) 45%, (230, 245, 175, 1) 90%); padding: 8px; border-radius: 13px; } .record-dialog-general .modal-content { border: 0px solid rgba(0,0,0,.2) !important; -webkit-clip-path: none !important; clip-path: none !important; border-radius: 13px; background: rgb(255, 255, 255); /*background: -moz-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(184, 224, 232) 100%);*/ /*background: -webkit-linear-gradient(top, rgb(255, 255, 255) 0%,rgb(184, 224, 232) 100%);*/ /*background: linear-gradient(to bottom, rgb(255, 255, 255) 0%,rgb(184, 224, 232) 100%);*/ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgb(255, 255, 255)', endColorstr='rgb(184, 224, 232)', GradientType=0); } .record-dialog-general .modal-body { padding: 40px 25px 10px 25px; } .record-dialog-general .modal-body2 { font-size: 15px; color: #626262; font-weight: bold; } .btnLinear { text-align: center; margin: 0 auto; padding: 10px 15px; position: relative; color: rgb(11, 97, 158) !important; display: inline-block; font-size: 18px; font-weight: bold; border: none; border-radius: 8px; background-image: -webkit-linear-gradient(0deg, rgba(60, 200, 235, 1), rgba(230, 245, 175, 1)); background-image: -moz-linear-gradient(0deg, rgba(60, 200, 235, 1), rgba(230, 245, 175, 1)); background-image: linear-gradient(0deg, rgba(60, 200, 235, 1), rgba(230, 245, 175, 1)); } .btnGame{ float: none !important; width: 80% !important; line-height: 40px; font-size: 17px; padding:0px; margin: 5px auto !important; text-align: center; position: relative; color: rgb(11, 97, 158); display: inline-block; font-weight: bold; border: none; cursor: pointer; border-radius: 8px; background-image: -webkit-linear-gradient(0deg, rgba(60, 200, 235, 1), rgba(230, 245, 175, 1)); background-image: -moz-linear-gradient(0deg, rgba(60, 200, 235, 1), rgba(230, 245, 175, 1)); background-image: linear-gradient(0deg, rgba(60, 200, 235, 1), rgba(230, 245, 175, 1)); } .btnLinear.bottomBtn { margin: 0 29%; position: absolute; bottom: -25px; z-index: 99; left: 10%; } .record-dialog-general .btnLinear:focus { color: rgb(70, 200, 230) } .record-dialog-general .modal-body2 span { width: 70px; height: 70px; font-size: 46px; line-height: 63px; color: rgb(255, 255, 255); border: 3px solid rgba(255, 255, 255, 1); background-image: -webkit-linear-gradient(0deg, rgba(60, 200, 235, 1), rgba(230, 245, 175, 1)); background-image: -moz-linear-gradient(0deg, rgba(60, 200, 235, 1), rgba(230, 245, 175, 1)); background-image: linear-gradient(0deg, rgba(60, 200, 235, 1), rgba(230, 245, 175, 1)); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.27) !important; -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.27) !important; -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.27) !important; border-radius: 50%; text-align: center; z-index: 9000; color: 3px solid rgba(255, 255, 255, 1); } .record-dialog-general .modal-body2 b { font-size: 50px; line-height: 44px; } .record-dialog-general .modal-body2 .row{ margin-bottom: 20px; } .record-dialog-general .modal-body2::-webkit-scrollbar { width: 7px; background-color: rgba(245, 245, 245, 0); } .record-dialog-general .modal-body2::-webkit-scrollbar-thumb { border-radius: 10px; background-color: rgba(85, 85, 85, 0.2); } .record-dialog-general .modal-body2::-webkit-scrollbar-track { border-radius: 10px; background-color: rgba(245, 245, 245, 0); } .record-dialog-general-bg .modal-title { position: absolute; left: 50.1%; transform: translate(-50%, 120%); min-width: 213px; padding-left: 1%; text-align: center; z-index: 9000; background-color: #0b619e; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b7deed', endColorstr='#eef5b2', GradientType=1); border-radius: 9px; box-shadow: 4px 3px 4px rgba(51, 51, 51, 0.18823529411764706) !important; -webkit-box-shadow: 4px 3px 4px rgba(51, 51, 51, 0.18823529411764706) !important; -moz-box-shadow: 4px 3px 4px rgba(51, 51, 51, 0.18823529411764706) !important; } .record-dialog-general-bg .modal-title span { position: absolute; left: -12%; top: -23%; width: 70px; height: 70px; font-size: 46px; line-height: 70px; border-radius: 50%; text-align: center; z-index: 9000; color: rgba(255, 255, 5, 1); background-color: #0b619e; box-shadow: 4px 3px 4px rgba(51, 51, 51, 0) !important; -webkit-box-shadow: 4px 3px 4px rgba(51, 51, 51, 0) !important; -moz-box-shadow: 4px 3px 4px rgba(51, 51, 51, 0) !important; } .record-dialog-general-bg .generalModal-close { position: absolute; top: -40%; left: 205%; transform: translate(-50%, -50%); z-index: 10; width: 13%; height: 32px; padding: 20px; } .record-dialog-general .modal-body2::-webkit-scrollbar { width: 7px; background-color: rgba(245, 245, 245, 0); } .record-dialog-general .modal-body2::-webkit-scrollbar-thumb { border-radius: 10px; background-color: rgba(85, 85, 85, 0.2); } .record-dialog-general .modal-body2::-webkit-scrollbar-track { border-radius: 10px; background-color: rgba(245, 245, 245, 0); } /*提示(跳出框) END*/ /*-------財務紀錄 END------*/ /*手機設定*/ @media (max-width: 480px) { .Game-hall .game-image-box { height: 102px; } .record-dialog-general .modal-body2 .row{ margin-bottom: 16px !important; } .record-dialog-general .modal-body { padding: 35px 25px 30px 25px !important; } .record-dialog-general{ padding: 7px !important; } .record-dialog-general-bg .modal-title span { position: absolute !important; left: -12% !important; top: -14% !important; width: 50px !important; height: 50px !important; font-size: 32px !important; line-height: 55px !important; border-radius: 50% !important; text-align: center !important; z-index: 9000 !important; color: rgba(255, 255, 5, 1) !important; background-color: #0b619e !important; box-shadow: 4px 3px 4px rgba(51, 51, 51, 0) !important; -webkit-box-shadow: 4px 3px 4px rgba(51, 51, 51, 0) !important; -moz-box-shadow: 4px 3px 4px rgba(51, 51, 51, 0) !important; } .record-dialog-general .modal-body2 span{ width: 40px !important; height: 40px !important; font-size: 23px !important; line-height: 37px !important; color: rgb(255, 255, 255) !important; border: 2px solid rgba(255, 255, 255, 1) !important; background-image: -webkit-linear-gradient(0deg, rgba(60, 200, 235, 1), rgba(230, 245, 175, 1)) !important; background-image: -moz-linear-gradient(0deg, rgba(60, 200, 235, 1), rgba(230, 245, 175, 1)) !important; background-image: linear-gradient(0deg, rgba(60, 200, 235, 1), rgba(230, 245, 175, 1)) !important; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.32) !important; -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.32) !important; -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.32) !important; border-radius: 50% !important; text-align: center !important; z-index: 9000 !important; } .record-dialog-general .modal-body2 b { font-size: 29px !important; line-height: 25px !important; font-weight: 600 !important; } .record-dialog-general-bg .modal-title { position: absolute; left: 50.1%; transform: translate(-50%, 160%) !important; min-width: 132px !important; padding-left: 1%; text-align: center; z-index: 9000; background-color: #0b619e; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b7deed', endColorstr='#eef5b2', GradientType=1); border-radius: 9px; box-shadow: 4px 3px 4px rgba(51, 51, 51, 0.18823529411764706) !important; -webkit-box-shadow: 4px 3px 4px rgba(51, 51, 51, 0.18823529411764706) !important; -moz-box-shadow: 4px 3px 4px rgba(51, 51, 51, 0.18823529411764706) !important; } .record_warp { margin-bottom: 0px; border: none; border-radius: 0px; padding-bottom: 0px; background-color: none; } .record_warp .recordTitle { width: 100%; height: 120px; margin: 0 auto; padding: 10px 0; padding-bottom: 5px; font-size: 1.2em; text-align: center; color: rgba(255, 255, 5, 1); display: flex; align-items: center; justify-content: center; position: relative; border-radius: 0px; background-color: rgb(5, 100, 160); } .record_warp .recordTitle span { width: 70px; height: 70px; line-height: 65px; font-size: 2.0em; color: rgba(255, 255, 255, 1); border: 3px solid rgba(255, 255, 255, 1); border-radius: 50%; background-image: -webkit-linear-gradient(0deg, rgb(60, 200, 235), rgb(230, 245, 175)); background-image: -moz-linear-gradient(0deg, rgb(60, 200, 235), rgb(230, 245, 175)); background-image: linear-gradient(0deg, rgb(60, 200, 235), rgb(230, 245, 175)); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.33) !important; -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.33) !important; -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.33) !important; top: 10%; position: absolute; } .record_warp .recordTitle strong { font-size: .9em; bottom: 7%; color: rgb(255, 255, 255); position: absolute; } /*表格*/ .record_warp .recordTable { width: 90%; /*min-height: 250px;*/ margin: 15px auto 0 auto; padding: 0; border-radius: 15px; position: -webkit-sticky; position: sticky; position: relative; background-color: rgb(255, 255, 255); overflow-x: auto; /*overflow:hidden;*/ } .record_warp .recordTable .Table-th{ float: left; width: 25%; z-index: 9; position: relative; } .record_warp .recordTable .Table-th table{ position: sticky; top: 0; } .record_warp .recordTable .Table-td{ float: left; width: 75%; position: relative; -ms-overflow-style: none; overflow-x: auto; /*隱藏scroll firefox*/ overflow: -moz-hidden-unscrollable; /*隱藏scroll IE*/ -ms-overflow-style: none; } /*隱藏scroll Chorme*/ .record_warp .recordTable .Table-td::-webkit-scrollbar { display: none; } .record_warp .recordTable table tbody th:last-child { border-right:3px solid rgb(255, 255, 255); } .record_warp .recordTable table tbody td:first-child { border-right:3px solid rgb(185, 230, 250); } .record_warp .recordTable table { margin-bottom: 0; table-layout: fixed; position: relative; text-align: center; border-radius: 0; overflow: hidden; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; } .record_warp .recordTable table tbody { position: -webkit-sticky; position: sticky; } .record_warp .recordTable table tbody th, record_warp .recordTable table tbody td { /*width:100px;*/ position: -webkit-sticky; position: sticky; } /*遊戲報表*/ .record_warp .daySelect { width:100%; margin: 20px 0px 0px 0px; } .record_warp label { font-size: 14px; height:35px; line-height: 35px; } .record_warp .border-radius-input { height:35px; } .btn-blue { font-size: 14px !important; height: 35px !important; } .record_warp .explain { font-size: 14px; height:60px; line-height: 20px; } .btn-day { font-size: 14px; height: 35px; background-image: none; background-image: none; background-image: none; background-color: rgb(255, 255, 255); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0) !important; -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0) !important; -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0) !important; border-radius: 0; border: none; border-right: 1px solid rgba(51, 51, 51, 0.18823529411764706); border-top: 1px solid rgba(51, 51, 51, 0.18823529411764706); border-bottom: 1px solid rgba(51, 51, 51, 0.18823529411764706); } .record_warp .btnInput { float: none !important; width: 100% !important; text-align: center; line-height: 35px; color: rgb(5, 100, 160); font-size: 15px; font-weight: bold; padding: 0px; margin: 2px auto !important; } .record_warp .btnGame { float: none !important; width: 90% !important; line-height: 35px; font-size: 14px; padding: 0px; margin: 2px auto !important; } /*選擇*/ .record_warp select { padding: 0 5px; text-align: center; text-align-last: center; letter-spacing: 2px; box-shadow: 0px 0px 5px rgba(0, 0, 0, .8) !important; -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, .8) !important; -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, .8) !important; } .record_warp select span { display: block; } /*按鈕*/ .btnLinear.bottomBtn { margin: 0 23% !important; } /*跳框手機*/ .record-dialog-general { margin-top: 65px !important; } .record-dialog-general-bg .modal-title { top: -15px; left: 55.1% !important; } .record-dialog-general-bg .modal-title span { left: -24% !important; } .record-dialog-general-bg .generalModal-close { top: 0% !important; left: 150% !important; } /*跳框手機 END*/ /*--遊戲大廳 手機--*/ .Game-hall { border: none; padding:0; } .Game-hall .Game-title{ width: 100%; height:30px; border-bottom:5px solid rgb(150, 210, 240); padding:0; background-color:rgb(5, 100, 160); position: relative; } .Game-hall .Game-title i { width: 100%; height: 40px; line-height: 40px; font-size: 32px; display: inline-block; background-color: rgb(255, 255, 255); color: rgb(15, 80, 125); font-weight: bolder; padding-left: 8px; position: absolute; left: 17px; bottom:7px; z-index: 5; -webkit-clip-path: polygon(1.7% 0%, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(1.7% 0%, 100% 0, 100% 100%, 0% 100%); } .gameCont{ border: none; margin-top:-20px ; padding:0 0 100px 0; } .Game-hall .tab-content { width: 100%; padding:0 15px; } .Game-hall .nav-tabs-s { width: 100%; /*border-top: 1px solid rgba(0, 0, 0, 0.1);*/ border-bottom: 1px solid rgba(0, 0, 0, 0.1); margin-bottom:0; } .Game-hall .nav-tabs .nav-item { margin-bottom: 0; } .Game-hall .nav-tabs-s .nav-link { border: 1px solid transparent; border-radius:0; padding: 5px 10px; margin-right:0; color:rgb(5, 100, 160); font-weight: bold; background-color: rgb(255, 255, 255); box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.33) !important; -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.33) !important; -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.33) !important; display: flex; align-items:center; justify-content: normal; } .Game-hall .nav-tabs-s .nav-link span{ font-size: 1.5rem; } .Game-hall .nav-tabs-s .nav-link.active { /*margin-bottom: 0;*/ border-top:1px solid rgb(230, 245, 175); border-bottom:1px solid rgb(60, 200, 235); background-image: -webkit-linear-gradient(0deg, rgb(60, 200, 235), rgb(230, 245, 175)); background-image: -moz-linear-gradient(0deg, rgb(60, 200, 235), rgb(230, 245, 175)); background-image: linear-gradient(0deg, rgb(60, 200, 235), rgb(230, 245, 175)); } /*--遊戲大廳 手機 END--*/ } /*手機設定 END*/ /* peco */ /* 註冊頁 */ .prompt.disabled{ background-color: rgb(100,100,100); } /* footer */ .footer-agentJoin{ width: 52px; margin-left: -6px; } /* 代理加盟頁 */ #agentJoinMain label, #agentJoinMain p{ color: rgb(100,100,100)!important; } #agentJoinMain #btnok{ background-color: rgb(150,150,150); border-color: rgb(150,150,150); color: white; } /* 儲值頁 超商icon */ .storeSelectArea{ border: 3px solid rgb(150,150,150); border-radius: 5px; height: 60px; margin: 0px 12px; opacity: 0.5; background-color: rgb(180,180,180); cursor: pointer; } .storeSelectArea.on{ border: 3px solid rgb(200,200,200); background-color: white!important; opacity: 1!important; } .storeSelectArea img{ height: 40px; margin-top: 7px; } /* 手機板 畫面調整 */ .storeSelectRwd .storeSelectArea{ height: 50px; margin: 0px 3px; } .storeSelectRwd .storeSelectArea img{ height: 30px; } /*usdtModal usdt彈窗*/ #usdtAModal .modal-title, #usdtAModalA .modal-title { left: 73.3% !important; top: 1.5%; width: 245px !important; background:transparent !important; -webkit-clip-path:none ; box-shadow:none; -webkit-box-shadow:none; -moz-box-shadow:none; } #usdtAModal .usdtTitle{ max-width:180px; margin: 0 auto; color: rgba(255, 255, 5, 1); position: relative; top: -45%; z-index: 1; } #usdtAModalA .usdtTitle{ max-width:180px; margin: 0 auto; color: rgba(255, 255, 5, 1); position: relative; top: -45%; left:-10%; z-index: 1; } #usdtAModal .usdtTitle h4{ border-radius:15px; padding-left: 60px !important; padding-right: 20px !important; font-size: 21px; z-index: 1; background: rgb(5, 99, 161); color: rgba(255, 255, 5, 1); } #usdtAModalA .usdtTitle h4{ width: 365px; border-radius:15px; padding-left: 60px !important; padding-right: 20px !important; font-size: 21px; z-index: 1; background: rgb(5, 99, 161); color: rgba(255, 255, 5, 1); } #usdtAModal .usdtTitle i, #usdtAModalA .usdtTitle i { color: rgba(255, 255, 5, 1); } #usdtAModal .usdtTitle .usdtIcom, #usdtAModalA .usdtTitle .usdtIcom{ width: 80px; height: 80px; line-height: 70px; border-radius: 50%; background: rgb(5, 99, 161); text-align:center !important; top: -33%; font-size: 45px; left:-15px; position: absolute; z-index: 2; } #usdtAModal .modal-body, #usdtAModalA .modal-body { padding: 72px 25px 30px 25px; } #usdtAModal .modal-body .usdtContBorder, #usdtAModalA .modal-body .usdtContBorder{ min-width: 960px !important; padding: 10px; border-radius: 5px; background: rgb(183, 222, 237); background: -moz-linear-gradient(left, rgba(183, 222, 237, 1) 0%, rgba(63, 197, 240, 1) 0%, rgba(66, 222, 225, 1) 31%, rgba(109, 236, 185, 1) 56%, rgba(238, 245, 178, 1) 100%); background: -webkit-linear-gradient(left, rgba(183, 222, 237, 1) 0%, rgba(63, 197, 240, 1) 0%, rgba(66, 222, 225, 1) 31%, rgba(109, 236, 185, 1) 56%, rgba(238, 245, 178, 1) 100%); background: linear-gradient(to right, rgba(183, 222, 237, 1) 0%, rgba(63, 197, 240, 1) 0%, rgba(66, 222, 225, 1) 31%, rgba(109, 236, 185, 1) 56%, rgba(238, 245, 178, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b7deed', endColorstr='#eef5b2', GradientType=1); } #usdtAModal .modal-body .usdtCont, #usdtAModalA .modal-body .usdtCont{ width: 100%; /*height: 100px;*/ padding: 0px 50px 0px 50px; border-radius: 5px; background-color: rgb(255,255,255); } #usdtAModal .modal-body .usdtPic, #usdtAModalA .modal-body .usdtPic{ width: 100%; /*height: 100px;*/ padding:0 15px; margin:5px 0; background-color: rgb(255,255,255); /*box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.19) !important;*/ /*-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.19) !important;*/ /*-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.19) !important;*/ } #usdtAModal .usdtAModal-dialog-general, #usdtAModalA .usdtAModal-dialog-general { max-width: 1000px !important; box-shadow: none !important; } #usdtAModal .usdtAModal-dialog-general .modal-content, #usdtAModalA .usdtAModal-dialog-general .modal-content { background-color: rgba(0, 0, 0, 0); } #usdtAModal .usdtAModal-close, #usdtAModalA .usdtAModal-close { position: absolute; left: 66.5%; top: 0%; transform: translate(300%, 140%); z-index: 9000; width: 43px; height: 43px; } #usdtAModal .modal-body .btn, #usdtAModalA .modal-body .btn { width: 100%; height:auto; border:0; padding:0; background-color: rgb(255,255,255); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.19) !important; -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.19) !important; -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.19) !important; } #usdtAModal .usdtPicModal-dialog-general, #usdtAModalA .usdtPicModal-dialog-general { max-width: 450px !important; box-shadow: none !important; } #usdtAModal .usdtBPicModal-close, #usdtAModalA .usdtBPicModal-close { position: absolute; left: 52%; top: -4%; transform: translate(300%, 140%); z-index: 9000; width: 43px; height: 43px; } #usdtPicModal1.modal-dialog-general-bg, #usdtPicModal2.modal-dialog-general-bg, #usdtPicModal3.modal-dialog-general-bg, #usdtPicModal4.modal-dialog-general-bg, #usdtPicModal5.modal-dialog-general-bg, #usdtPicModalA.modal-dialog-general-bg, #usdtPicModalB.modal-dialog-general-bg, #usdtPicModalC.modal-dialog-general-bg, #usdtPicModalD.modal-dialog-general-bg, #usdtPicModalE.modal-dialog-general-bg { background-color: rgba(0, 0, 0, 1) !important; } #usdtPicModal1.modal-dialog-general-bg .generalModal-close, #usdtPicModal2.modal-dialog-general-bg .generalModal-close, #usdtPicModal3.modal-dialog-general-bg .generalModal-close, #usdtPicModal4.modal-dialog-general-bg .generalModal-close, #usdtPicModal5.modal-dialog-general-bg .generalModal-close, #usdtPicModalA.modal-dialog-general-bg .generalModal-close, #usdtPicModalB.modal-dialog-general-bg .generalModal-close, #usdtPicModalC.modal-dialog-general-bg .generalModal-close, #usdtPicModalD.modal-dialog-general-bg .generalModal-close, #usdtPicModalE.modal-dialog-general-bg .generalModal-close, #usdtPicModalF.modal-dialog-general-bg .generalModal-close{ top: 1%; left: 64.5%; } #usdtPicModal1 .modal-dialog, #usdtPicModal2 .modal-dialog, #usdtPicModal3 .modal-dialog, #usdtPicModal4 .modal-dialog, #usdtPicModal5 .modal-dialog, #usdtPicModalA .modal-dialog, #usdtPicModalB .modal-dialog, #usdtPicModalC .modal-dialog, #usdtPicModalD .modal-dialog, #usdtPicModalE .modal-dialog , #usdtPicModalD .modal-dialog, #usdtPicModalF .modal-dialog { max-width: 455px; margin: 1.75rem auto; } #usdtAModal .carousel-indicators, #usdtAModalA .carousel-indicators { bottom: 78px; } #usdtAModal .carousel-indicators .active, #usdtAModalA .carousel-indicators .active { background-color: rgba(0, 0, 0, 1); } #usdtAModal .carousel-indicators li, #usdtAModalA .carousel-indicators li { background-color: rgba(0, 0, 0, 0.3); } #usdtAModal .carousel-control-prev-icon, #usdtAModalA .carousel-control-prev-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important; } #usdtAModal .carousel-control-next-icon, #usdtAModalA .carousel-control-next-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important; } #usdtAModal .carousel-control-next-icon, #usdtAModal .carousel-control-prev-icon, #usdtAModalA .carousel-control-next-icon, #usdtAModalA .carousel-control-prev-icon { width: 30px; height: 30px; } #usdtAModal .carousel-control-next, #usdtAModalA .carousel-control-next { right:-1%; z-index: 999; } #usdtAModal .carousel-control-prev, #usdtAModalA .carousel-control-prev { left:-1%; z-index: 999; } @media (max-width: 480px) { /*usdtModal usdt彈窗*/ #usdtAModal .usdtTitle { top: -100%; } #usdtAModalA .usdtTitle { top: -100%; left: -34%; } #usdtAModal .usdtTitle .usdtIcom, #usdtAModalA .usdtTitle .usdtIcom { top: -41%; left: -15px; } #usdtAModal .modal-body, #usdtAModalA .modal-body { padding: 72px 0px 30px 0px; } #usdtAModal .modal-body .usdtContBorder, #usdtAModalA .modal-body .usdtContBorder{ min-width: 345px !important; border-radius: 10px; position: relative; } #usdtAModal .modal-body .usdtPic, #usdtAModalA .modal-body .usdtPic{ padding: 0; margin: 0; } #usdtAModal .usdtAModal-dialog-general, #usdtAModalA .usdtAModal-dialog-general { margin-top: 15%; } #usdtAModal .usdtAModal-dialog-general .modal-content, #usdtAModalA .usdtAModal-dialog-general .modal-content { background-color: rgba(0, 0, 0, 0); left: 0.3%; } #usdtAModal .usdtAModal-close, #usdtAModalA .usdtAModal-close { top: -8%; left: 50%; right: 0; /*width: auto;*/ z-index: 9100; } #usdtPicModal1 .modal-body, #usdtPicModalA .modal-body { padding: 0; } #usdtAModal .modal-body .btn, #usdtAModalA .modal-body .btn { width: 100%; height:auto; border:0; padding:0; background-color: rgb(255,255,255); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.19) !important; -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.19) !important; -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.19) !important; } .usdtPicModal-dialog-general { /*max-width: 450px !important;*/ /*box-shadow: none !important;*/ top: 0%; } #usdtPicModal1.modal, #usdtPicModal2.modal, #usdtPicModal3.modal, #usdtPicModal4.modal, #usdtPicModal5.modal, #usdtPicModalA.modal, #usdtPicModalB.modal, #usdtPicModalC.modal, #usdtPicModalD.modal, #usdtPicModalE.modal , #usdtPicModalF.modal { top: 0; left: 0; width:auto; height: 100%; } #usdtPicModal1 .modal-content, #usdtPicModal2 .modal-content, #usdtPicModal3 .modal-content, #usdtPicModal4 .modal-content, #usdtPicModal5 .modal-content, #usdtPicModalA .modal-content, #usdtPicModalB .modal-content, #usdtPicModalC .modal-content, #usdtPicModalD .modal-content, #usdtPicModalE .modal-content, #usdtPicModalF .modal-content { width: 100%; /*padding: 0 2%; margin: 0 auto;*/ } #usdtPicModal1 .modal-dialog, #usdtPicModal2 .modal-dialog, #usdtPicModal3 .modal-dialog, #usdtPicModal4 .modal-dialog, #usdtPicModal5 .modal-dialog, #usdtPicModalA .modal-dialog, #usdtPicModalB .modal-dialog, #usdtPicModalC .modal-dialog, #usdtPicModalD .modal-dialog, #usdtPicModalE .modal-dialog, #usdtPicModalD .modal-dialog, #usdtPicModalF .modal-dialog { margin: 2.75rem 0.3rem; } #usdtPicModal1 .usdtPicModal-dialog-general, #usdtPicModal2 .usdtPicModal-dialog-general, #usdtPicModal3 .usdtPicModal-dialog-general,, #usdtPicModal4 .usdtPicModal-dialog-general, #usdtPicModal5 .usdtPicModal-dialog-general, #usdtPicModalA .usdtPicModal-dialog-general, #usdtPicModalB .usdtPicModal-dialog-general, #usdtPicModalC .usdtPicModal-dialog-general, #usdtPicModalD .usdtPicModal-dialog-general, #usdtPicModalE .usdtPicModal-dialog-general , #usdtPicModalF .usdtPicModal-dialog-general { width: 100%; max-width:none !important; box-shadow: none !important; /*margin: auto;*/ top: 7%; } #usdtPicModal1 .usdtPicModal-dialog-general .usdtCPicModal-close, #usdtPicModal2 .usdtPicModal-dialog-general .usdtCPicModal-close, #usdtPicModal3 .usdtPicModal-dialog-general .usdtCPicModal-close, #usdtPicModal4 .usdtPicModal-dialog-general .usdtCPicModal-close, #usdtPicModal5 .usdtPicModal-dialog-general .usdtCPicModal-close, #usdtPicModalA .usdtPicModal-dialog-general .usdtCPicModal-close, #usdtPicModalB .usdtPicModal-dialog-general .usdtCPicModal-close, #usdtPicModalC .usdtPicModal-dialog-general .usdtCPicModal-close, #usdtPicModalD .usdtPicModal-dialog-general .usdtCPicModal-close, #usdtPicModalE .usdtPicModal-dialog-general .usdtCPicModal-close, #usdtPicModalF .usdtPicModal-dialog-general .usdtCPicModal-close { left: auto; right: 50px; top:-45px; width: auto; height: auto; position: absolute; z-index: 9000; } #usdtPicModal1 .modal-body, #usdtPicModal2 .modal-body, #usdtPicModal3 .modal-body, #usdtPicModal4 .modal-body, #usdtPicModal5 .modal-body, #usdtPicModalA .modal-body, #usdtPicModalB .modal-body, #usdtPicModalC .modal-body, #usdtPicModalD .modal-body, #usdtPicModalE .modal-body, #usdtPicModalF .modal-body { padding: 0; } #usdtAModal .carousel-item small, #usdtAModalA .carousel-item small{ position:absolute; top:-10%; } #usdtPicModal1 .usdtBPicModal-close, #usdtPicModal2 .usdtBPicModal-close, #usdtPicModal3 .usdtBPicModal-close, #usdtPicModal4 .usdtBPicModal-close, #usdtPicModal5 .usdtBPicModal-close, #usdtPicModalA .usdtBPicModal-close, #usdtPicModalB .usdtBPicModal-close, #usdtPicModalC .usdtBPicModal-close, #usdtPicModalD .usdtBPicModal-close, #usdtPicModalE .usdtBPicModal-close, #usdtPicModalF .usdtBPicModal-close { left: 14%; top: -4%; } #usdtAModal .carousel-indicators, #usdtAModalA .carousel-indicators { right: 0; bottom: 9%; left: 0; z-index: 15; } #usdtAModal .carousel-indicators li, #usdtAModalA .carousel-indicators li { background-color: rgba(0, 0, 0, 1); } #usdtAModal .carousel-control-prev-icon, #usdtAModalA .carousel-control-prev-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important; } #usdtAModal .carousel-control-next-icon, #usdtAModalA .carousel-control-next-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important; } #usdtAModal .carousel-control-next-icon, #usdtAModal .carousel-control-prev-icon, #usdtAModalA .carousel-control-next-icon, #usdtAModalA .carousel-control-prev-icon { width: 30px; height: 30px; } #usdtAModal .carousel-control-next, #usdtAModalA .carousel-control-next { right:0%; } #usdtAModal .carousel-control-prev, #usdtAModalA .carousel-control-prev { left:0%; } } /*-------------------------------------------------------------------------------------------------------*/ .move_box{ width: 800px; height: 740px; margin-top: 15px; /*background-color: yellow;*/ } .move_box .move_waiter{ float: left; width: 50%; } .move_box .move_waiter img{ width: 100%; height: auto; } .move_box .move_word{ float: right; width: 50%; } .move_box .move_word h1{ margin-top: 28%; margin-bottom: 15px; font-size: 45px; letter-spacing:5px; line-height: 52px; color: #3c5f95; } .move_box .move_word samp{ font-size: 24px; letter-spacing:1px; /*line-height: 52px;*/ color: #363636; } .move_box .move_word b{ font-size: 24px !important; letter-spacing:1px; /*line-height: 52px;*/ color: #363636; } .move_box .move_btn{ width: 190px; margin-left: -5px; } .move_box .move_btn img{ width: 100%; height: auto; } @media (max-width: 480px){ .move_box{ width: 100%; height: auto; margin-top: 0; text-align: center; /*background-color: yellow;*/ } .move_box .move_waiter{ float: none; width: 80%; margin: 0 auto; overflow: hidden; } .move_box .move_word{ float: none; width: 80%; margin: 0 auto; } .move_box .move_word h1{ margin-top: 20%; margin-bottom: 15px; font-size: 42px; letter-spacing:5px; line-height: 52px; color: #3c5f95; } .move_box .move_word samp{ font-size: 18px; letter-spacing:1px; /*line-height: 52px;*/ color: #363636; } .move_box .move_word b{ font-size: 18px !important; letter-spacing:1px; /*line-height: 52px;*/ color: #363636; } .move_box .move_btn{ width: 190px; margin: 0 auto; } } /*-------------------------------------------------------------------------------------------------------*/ /*---置中---*/ .flex-center { display: flex; align-items: center; justify-content: center; } /*---置上---*/ .flex-start { display: flex; align-items: start; justify-content: center; } /*---置下---*/ .flex-start { display: flex; align-items: end; justify-content: center; } /*---置中左---*/ .flex-left { display: flex; align-items: center; justify-content: start; } /*---置中右---*/ .flex-right { display: flex; align-items: center; justify-content: end; } /*---置上左---*/ .flex-start-left { display: flex; align-items: start; justify-content: start; } /*---置上右---*/ .flex-start-right { display: flex; align-items: start; justify-content: end; } /*---置下左---*/ .flex-end-left { display: flex; align-items: end; justify-content: start; } /*---置下右---*/ .flex-end-right { display: flex; align-items: end; justify-content: end; } /*-------------------*/ .col-2-half{ width:20%; } .p-lr-0{ padding-left: 0px !important; padding-right: 0px !important; } .p-lr-5{ padding-left: 5px !important; padding-right: 5px !important; } .p-lr-10{ padding-left: 10px !important; padding-right: 10px !important; } .p-lr-12{ padding-left: 12px; padding-right: 12px; } .p-lr-15{ padding-left: 15px; padding-right: 15px; } .p-lr-20{ padding-left: 20px !important; padding-right: 20px !important; } .p-lr-25{ padding-left: 25px !important; padding-right: 25px !important; } .p-lr-30{ padding-left: 30px !important; padding-right: 30px !important; } .p-lr-35{ padding-left: 35px !important; padding-right: 35px !important; } .p-lr-40{ padding-left: 40px !important; padding-right: 40px !important; } .p-lr-45{ padding-left: 45px !important; padding-right: 45px !important; } .p-lr-50{ padding-left: 50px !important; padding-right: 50px !important; } .p-l-0{ padding-left: 0px !important; } .p-l-25{ padding-left: 25px !important; } .p-l-30{ padding-left: 30px !important; } .p-l-35{ padding-left: 35px !important; } .p-l-40{ padding-left: 40px !important; } .p-lr-45{ padding-left: 45px !important; } .p-l-50{ padding-left: 50px !important; } .p-r-10{ padding-right: 10px !important; } .p-r-20{ padding-right: 20px !important; } .p-r-25{ padding-right: 25px !important; } .p-r-30{ padding-right: 30px !important; } .p-r-35{ padding-right: 35px !important; } .p-r-40{ padding-right: 40px !important; } .p-r-45{ padding-right: 45px !important; } .p-r-50{ padding-right: 50px !important; } .p-t-25{ padding-top: 25px !important; } .p-t-30 { padding-top: 30px !important; } .p-t-35 { padding-top: 35px !important; } .p-t-40{ padding-top: 40px !important; } .p-t-45 { padding-top: 45px !important; } .p-t-50 { padding-top: 50px !important; } .margin-auto{ margin: auto !important; } .m-lr-0{ margin-left: 0px !important; margin-right: 0px !important; } .m-l-5{ margin-left: 5px !important; } .m-l-10{ margin-left: 10px !important; } .m-l-15{ margin-left: 15px !important; } .m-l-20{ margin-left: 20px !important; } .m-l-25{ margin-left: 25px !important; } .m-l-30{ margin-left: 30px !important; } .m-l-35{ padding-left: 35px !important; } .m-l-40{ margin-left: 40px !important; } .m-l-45{ margin-left: 45px !important; } .m-l-50{ margin-left: 50px !important; margin-right: 50px !important; } .m-r-0{ /* margin-left: 0px !important;*/ margin-right: 0px !important; } .m-r-5{ margin-right: 5px !important; } .m-r-10{ margin-right: 10px !important; } .m-r-15{ margin-right: 15px !important; } .m-r-20{ margin-right: 20px !important; } .m-r-25{ margin-right: 25px !important; } .m-r-30{ margin-right: 30px !important; } .m-r-35{ padding-right: 35px !important; } .m-r-40{ margin-right: 40px !important; } .m-r-45{ margin-right: 45px !important; } .m-r-50{ margin-right: 50px !important; } .m-lr-0{ margin-left: 0px !important; margin-right: 0px !important; } .m-lr-5{ margin-left: 5px !important; margin-right: 5px !important; } .m-lr-10{ margin-left: 10px !important; margin-right: 10px !important; } .m-lr-15{ margin-left: 15px !important; margin-right: 15px !important; } .m-lr-20{ margin-left: 20px !important; margin-right: 20px !important; } .m-lr-25{ margin-left: 25px !important; margin-right: 25px !important; } .m-lr-30{ margin-left: 30px !important; margin-right: 30px !important; background-color: rgba(0,0,0,.4); } .m-lr-35{ padding-left: 35px !important; padding-right: 35px !important; } .m-lr-40{ margin-left: 40px !important; margin-right: 40px !important; } .m-lr-45{ margin-left: 45px !important; margin-right: 45px !important; } .m-lr-50{ margin-left: 50px !important; margin-right: 50px !important; } .shadow-neno{ box-shadow:none !important; -webkit-box-shadow:none !important; -moz-box-shadow:none !important; } .shadow{ box-shadow: 1px 1px 6px 0px rgba(51, 51, 51, .8) !important; -webkit-box-shadow: 1px 1px 6px 0px rgba(51, 51, 51, .8) !important; -moz-box-shadow: 1px 1px 6px 0px rgba(51, 51, 51, .8) !important; } .shadow-rl{ box-shadow: 15px 0 5px -15px rgba(51, 51, 51, 0.27), -15px 0 5px -15px rgba(51, 51, 51, 0.27); -webkit-box-shadow: 15px 0 5px -15px rgba(51, 51, 51, 0.27), -15px 0 5px -15px rgba(51, 51, 51, 0.27); -moz-box-shadow: 15px 0 5px -15px rgba(51, 51, 51, 0.27), -15px 0 5px -15px rgba(51, 51, 51, 0.27); } .prompt{ padding: 5px 0; font-size: 15px; background-color: rgb(15,80,125); border-radius: 8px; margin-top: 8px; margin-bottom: 0px; } /* font size */ .fs-10 { font-size: 10px !important; } .fs-11 { font-size: 11px !important; } .fs-12 { font-size: 12px !important; } .fs-13 { font-size: 13px !important; } .fs-14 { font-size: 14px !important; } .fs-15 { font-size: 15px !important; } .fs-16 { font-size: 16px !important; } .fs-17 { font-size: 17px !important; } .fs-18 { font-size: 18px !important; } .fs-19 { font-size: 19px !important; } .fs-20 { font-size: 20px !important; } .fs-21 { font-size: 21px !important; } .fs-22 { font-size: 22px !important; } .fs-23 { font-size: 23px !important; } .fs-24 { font-size: 24px !important; } .fs-25 { font-size: 25px !important; } .fs-30 { font-size: 30px !important; } .fs-35 { font-size: 35px !important; } .fs-40 { font-size: 40px !important; } .fs-45 { font-size: 45px !important; } .fs-50 { font-size: 50px !important; } .fs-55 { font-size: 55px !important; } .fs-60 { font-size: 60px !important; } .fs-65 { font-size: 65px !important; } .fs-70 { font-size: 70px !important; } .fs-75 { font-size: 75px !important; } .fs-80 { font-size: 80px !important; } .fs-90 { font-size: 90px !important; } .fs-100 { font-size: 100px !important; } .fs-120 { font-size: 120px !important; } .fs-130 { font-size: 130px !important; } .fs-140 { font-size: 140px !important; } .fs-150 { font-size: 150px !important; } .fs-200 { font-size: 200px !important; } /* font weight */ .fw-100 { font-weight: 100 !important; } .fw-200 { font-weight: 200 !important; } .fw-300 { font-weight: 300 !important; } .fw-400 { font-weight: 400 !important; } .fw-500 { font-weight: 500 !important; } .fw-600 { font-weight: 600 !important; } .fw-700 { font-weight: 700 !important; } .fw-800 { font-weight: 800 !important; } .menuPhone_wrap .col-12-smalls .menuBox .logoOpt { width: 30%; height: 100%; text-align: center; position: absolute; overflow: hidden; top: 8%; left: 24%; z-index: 2; display: flex; align-items: center; justify-content: start; } @keyframes rotate_caveat { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .menuPhone_wrap .caveat .menuBox .logoOpt p{ color: rgb(89 89 89) !important; }