/* Brand3 (365) — 1:1 port of ssu-11 design's assets/css/style.css + reponsive.css. Class names, selectors and pixel/percentage values are copied verbatim from the source design (see /data/temp/brand365_design/ssu-11/assets/css/style.css) so that the visual result matches the original exactly. Do not "clean up" or reinterpret these values — any real fix belongs in a documented follow-up, not a silent edit here. Known source defects — status: - assets/images/slot-glow.png and assets/images/sc-bg.jpg are referenced by the source but were never included in the ssu-11 export. FIXED (bugfix pass): both spots are marked .is-empty (see partials/sc-card.blade.php) with a plain dark gradient/hide fallback below — not an arbitrary image substitute, just enough so the card doesn't render fully blank while the real asset is unavailable. - Card labels: the source's name-btn text had copy-paste bugs (slot-container's Boongo/PLAYSON cards said "프로그매틱"; casino-container's 5 cards all said "플레이앤고"). FIXED (bugfix pass) in partials/slot-games.blade.php and partials/casino-games.blade.php — verified against each card's own image filenames before relabeling. This pass (login/signup modals): added the "login/join modals", "parsley- errors-list", "after-login header state" and ".b3-auth-page" sections below. The first three are 1:1 ports of style.css rules that simply weren't needed until modals/auth existed; .b3-auth-page is the one genuinely new addition (documented at its own definition) because ssu-11 has no standalone auth page at all. See README.md for the full auth integration writeup. */ /* ---------------------------------------------------------------------- */ /* Base */ /* ---------------------------------------------------------------------- */ .brand3-shell { background-image: url('../images/main-bg.jpg'); background-color: #131313; background-position: top center; background-repeat: repeat-x; text-align: center; font-size: 14px; line-height: 1.6; color: #636b6f; font-family: 'Raleway', sans-serif; } .brand3-shell .wrapper { width: 100%; position: relative; z-index: 1; } .brand3-shell .top_main_bar { width: 100%; position: relative; float: left; } /* ---------------------------------------------------------------------- */ /* moving_bg (header floating card/coin decorations) */ /* ---------------------------------------------------------------------- */ .moving_bg { width: 100%; max-width: 1920px; height: 100%; position: absolute; left: 0; right: 0; top: 0; margin: 0 auto; pointer-events: none; } .moving_bg img { width: 100%; } .moving_bg .mb-1 { width: 31.06%; position: absolute; left: 0; top: 0; } .moving_bg .mb-2 { width: 27.87%; position: absolute; right: 27%; top: 0; } .moving_bg .mb-3 { width: 31.65%; position: absolute; right: 28.25%; top: 23.50%; } .moving_bg .mb-4 { width: 32.70%; position: absolute; right: 0; top: 0; } /* ---------------------------------------------------------------------- */ /* nav-main / header */ /* ---------------------------------------------------------------------- */ .nav-main { width: 100%; height: 99px; float: left; margin-top: 71px; text-align: center; background-image: url('../images/nav-bg.png'); background-repeat: no-repeat; background-position: center bottom; position: relative; z-index: 98; } .nav-main .nav-cont { width: 1346px; height: 77px; display: inline-block; vertical-align: top; margin-top: 17px; position: relative; } .nav-main .nav-cont .left { width: auto; height: 100%; float: left; } .bs-ul { list-style: none; margin-bottom: 0; width: auto; display: table; height: 100%; padding: 0; } .bs-ul li { list-style: none; width: auto; height: auto; display: table-cell; text-align: center; vertical-align: middle; position: relative; } .nav-main .nav-cont .bs-ul li a { color: #fff; font-size: 16px; text-shadow: 0 1px 1px #330000; display: inline-block; vertical-align: middle; width: auto; padding: 5px 10px; } .nav-main .nav-cont .bs-ul li:before { content: ''; width: 2px; height: 100%; position: absolute; top: 0; left: 0; background-image: url('../images/nav-border.png'); background-size: 100% 100%; } .deposit-link:before { display: none; } .nav-main .nav-cont .bs-ul li a.yellow { color: #ffff00; } .over-style { position: relative; overflow: hidden; border-radius: 8px 2px 8px 2px; box-shadow: 0 0 0 #000; transition: 0.3s; z-index: 1; } .over-style:hover { box-shadow: 0 0 3px #000; text-decoration: none; } .over-style:before, .over-style:after { content: ''; position: absolute; background-color: rgba(0, 0, 0, 0.5); transition: all .5s ease; box-sizing: border-box; width: 50%; height: 50%; opacity: 0; z-index: -1; } .over-style:before { top: 0; left: 0; } .over-style:after { bottom: 0; right: 0; } .over-style .os-cont { position: relative; display: inline-block; } .over-style .os-cont:before, .over-style .os-cont:after { content: ''; position: absolute; background-color: rgba(0, 0, 0, 0.5); transition: all .5s ease; box-sizing: border-box; width: 50%; height: 50%; opacity: 0; z-index: -1; } .over-style .os-cont:before { top: 0; right: 0; } .over-style .os-cont:after { bottom: 0; left: 0; } .over-style:hover:before { left: 50%; opacity: 0.9; } .over-style:hover .os-cont:before { top: 50%; opacity: 0.9; } .over-style:hover .os-cont:after { bottom: 50%; opacity: 0.9; } .over-style:hover:after { right: 50%; opacity: 0.9; } /* ---------------------------------------------------------------------- */ /* tsf-logo (composite header logo — pane/roulette/cards/numbers/suits) */ /* ---------------------------------------------------------------------- */ .tsf-logo { width: 196px; display: inline-block; position: absolute; left: 0; right: 0; margin: 0 auto; top: -36%; z-index: 9; } .tsf-logo img { position: absolute; margin: 0 auto; } .tsf-logo .pane { width: 100%; position: relative; } .tsf-logo .roulette { width: 55.11%; right: -2%; top: -22%; z-index: 1; animation: lgRouletteAnim 20s ease infinite; } .tsf-logo .cards { width: 40%; right: -21.50%; top: -13%; animation: lgCardsAnim 20s ease infinite; } .tsf-logo .cont { width: 77.05%; left: -3%; right: 0; top: 9.25%; margin: 0 auto; display: inline-block; position: absolute; overflow: hidden; z-index: 2; } .tsf-logo .pattern { width: 100%; position: relative; opacity: 0; } .tsf-logo .three { width: 33.78%; left: 0; animation: lgThreeAnim 20s ease infinite; } .tsf-logo .heart { width: 10.60%; left: 14%; bottom: 23%; } .tsf-logo .card-symbol { animation: lgCardSymbolAnim 20s linear infinite; } .tsf-logo .cont .six { width: 39.07%; left: 0; right: 0; z-index: 1; animation: lgSixAnim 20s ease infinite; } .tsf-logo .spade { width: 10.60%; left: 0; right: 0; bottom: 23%; } .tsf-logo .five { width: 33.78%; right: 0; animation: lgFiveAnim 20s ease infinite; } .tsf-logo .diamond { width: 8.61%; right: 15%; bottom: 23%; } .tsf-logo .casino { width: 70%; left: -3.50%; right: 0; bottom: 10%; animation: lgCasinoAnim 20s ease infinite; } @keyframes lgRouletteAnim { 0% { opacity: 0; transform: rotate(0deg); } 5% { opacity: 0; transform: rotate(0deg); } 15% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; transform: rotate(720deg); } } @keyframes lgCardsAnim { 0% { opacity: 0; transform: translateY(0); } 5% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; transform: translateY(5px); } 30% { opacity: 1; transform: translateY(0); } 40% { opacity: 1; transform: translateY(5px); } 50% { opacity: 1; transform: translateY(0); } 60% { opacity: 1; transform: translateY(5px); } 70% { opacity: 1; transform: translateY(0); } 80% { opacity: 1; transform: translateY(5px); } 95% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(0); } } @keyframes lgThreeAnim { 0% { opacity: 0; transform: translateX(100%); } 2% { opacity: 0; transform: translateX(100%); } 9% { opacity: 1; transform: translateX(0); } 95% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(0); } } @keyframes lgSixAnim { 0% { opacity: 1; transform: translateY(100%); } 3% { opacity: 1; transform: translateY(0); } 95% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(0); } } @keyframes lgFiveAnim { 0% { opacity: 0; transform: translateX(-100%); } 2% { opacity: 0; transform: translateX(-100%); } 9% { opacity: 1; transform: translateX(0); } 95% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(0); } } @keyframes lgCardSymbolAnim { 0% { opacity: 0; transform: rotateY(0deg); } 5% { opacity: 0; transform: rotateY(0deg); } 10% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; transform: rotateY(900deg); } } @keyframes lgCasinoAnim { 0% { opacity: 0; transform: translateY(-100%); } 3% { opacity: 1; transform: translateY(0); } 95% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(0); } } .bal-container { width: auto; height: 100%; float: right; display: flex; align-items: center; justify-content: center; } .before-login { height: 100%; display: block; } /* ---------------------------------------------------------------------- */ /* bg-main (hero character-art collage) */ /* ---------------------------------------------------------------------- */ .bg-main { width: 100%; height: 100%; float: left; position: absolute; left: 0; top: 0; z-index: 2; } .bg-main .center { width: 1342px; height: 100%; left: 0; right: 0; top: 0; margin: 0 auto; position: absolute; } .bg-main .center .cent-inner { width: 1920px; height: 100%; left: -289px; top: 0; position: absolute; } .bg-main .left-bg { width: 21.39%; display: inline-block; position: absolute; left: 11%; bottom: -25.25%; } .bg-main .left-bg img { position: absolute; opacity: 1; } .bg-main .left-bg .roulette { width: 63.63%; left: -14%; top: 8%; z-index: 1; animation: bmRouletteAnim 20s ease infinite; } .bg-main .left-bg .fireworks { width: 217.92%; right: -157.50%; top: -3.50%; z-index: 1; animation: bmFirewoksAnim 20s ease infinite; } .bg-main .left-bg .casino-man { width: 100%; display: inline-block; position: relative; z-index: 2; } .bg-main .left-bg .glow-left { width: 150.36%; left: -35%; top: 10%; bottom: 0; margin: auto 0; z-index: 2; animation: bmGlowLeftAnim 20s ease infinite; } .explode-img { width: 100%; left: 0%; right: 0; top: 107%; margin: 0 auto; position: absolute; transform-origin: top center; animation: bmExplodeAnim 20s ease infinite; } .bg-main .right-bg { width: 29.38%; display: inline-block; position: absolute; right: 2.25%; bottom: -16.25%; } .bg-main .right-bg img { position: absolute; opacity: 1; } .bg-main .right-bg .glow-right { width: 100%; top: -33.25%; left: -30%; z-index: 1; animation: bmGlowRightAnim 20s ease 1; } .bg-main .right-bg .eva-girl { width: 28.98%; left: 13.50%; top: -5%; z-index: 1; animation: bmEvaAnim 20s ease 1; } .bg-main .right-bg .car { width: 100%; display: inline-block; position: relative; z-index: 2; animation: bmCarAnim 20s ease 1; } .bg-main .right-bg .gun-man { width: 49.01%; right: 5%; top: -1%; z-index: 3; animation: bmGunManAnim 20s ease 1; } @keyframes bmRouletteAnim { 0% { opacity: 0; transform: translateY(50%); } 5% { opacity: 0; transform: translateY(50%); } 10% { opacity: 1; transform: translateY(0); } 25% { opacity: 1; transform: translateY(5%); } 35% { opacity: 1; transform: translateY(0); } 45% { opacity: 1; transform: translateY(5%); } 55% { opacity: 1; transform: translateY(0); } 65% { opacity: 1; transform: translateY(5%); } 75% { opacity: 1; transform: translateY(0); } 85% { opacity: 1; transform: translateY(5%); } 95% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(0); } } @keyframes bmFirewoksAnim { 0% { opacity: 0; } 10% { opacity: 0; } 10.5% { opacity: 1; } 11% { opacity: 0.5; } 11.5% { opacity: 1; } 15% { opacity: 1; } 15.5% { opacity: 0.5; } 16% { opacity: 1; } 16.5% { opacity: 0.5; } 17% { opacity: 1; } 50% { opacity: 1; } 50.5% { opacity: 0.5; } 51% { opacity: 1; } 51.5% { opacity: 0.5; } 52% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } } @keyframes bmCasinoAnim { 0% { opacity: 0; transform: translateY(50%); } 6% { opacity: 1; transform: translateY(0); } 95% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(0); } } @keyframes bmGlowLeftAnim { 0% { opacity: 0; } 5% { opacity: 0; } 15% { opacity: 1; } 25% { opacity: 0.5; } 35% { opacity: 1; } 45% { opacity: 0.5; } 55% { opacity: 1; } 65% { opacity: 0.5; } 75% { opacity: 1; } 85% { opacity: 0.5; } 95% { opacity: 1; } 100% { opacity: 0; } } @keyframes bmGlowRightAnim { 0% { opacity: 0; } 5% { opacity: 0; } 15% { opacity: 1; } 25% { opacity: 0; } 35% { opacity: 1; } 45% { opacity: 0; } 55% { opacity: 1; } 65% { opacity: 0; } 75% { opacity: 1; } 85% { opacity: 0; } 95% { opacity: 1; } 100% { opacity: 0; } } @keyframes bmEvaAnim { 0% { opacity: 0; transform: translateY(50%); } 3% { opacity: 0; transform: translateY(50%); } 8% { opacity: 1; transform: translateY(0); } 95% { opacity: 1; transform: translateY(0); } 100% { opacity: 1; transform: translateY(0); } } @keyframes bmCarAnim { 0% { opacity: 0; transform: translateX(50%); } 6% { opacity: 1; transform: translateX(0); } 95% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(0); } } @keyframes bmGunManAnim { 0% { opacity: 0; transform: translateX(-50%); } 5% { opacity: 0; transform: translateX(-50%); } 12% { opacity: 1; transform: translateX(0); } 95% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(0); } } @keyframes bmExplodeAnim { 0% { opacity: 0; transform: scale(0); } 5% { opacity: 0; transform: scale(0.5); } 10% { opacity: 1; transform: scale(1); } 25% { opacity: 1; transform: scale(0.95); } 35% { opacity: 1; transform: scale(1); } 45% { opacity: 1; transform: scale(0.95); } 55% { opacity: 1; transform: scale(1); } 65% { opacity: 1; transform: scale(0.95); } 75% { opacity: 1; transform: scale(1); } 85% { opacity: 1; transform: scale(0.95); } 95% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } } /* ---------------------------------------------------------------------- */ /* banner-main (jackpot odometer + announcement carousel) */ /* ---------------------------------------------------------------------- */ .banner-main { width: 100%; height: 375px; float: left; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; position: relative; z-index: 2; padding-right: 6%; } .jackpot-main { width: auto; display: inline-block; text-align: center; position: relative; top: -9px; padding-left: 2%; } .jackpot-main .title { color: #ffffff; font-size: 48px; font-weight: bold; text-shadow: 0 3px 3px rgba(0, 0, 0, 1), 0 0 6px rgba(0, 0, 0, 1); } .jackpot-main .title .highlight { color: #ffffff; font-size: 60px; font-weight: bold; text-shadow: none; background: -webkit-linear-gradient(#dc8632, #ff6e02, #fbd07d, #fb8b37, #f94803); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: relative; } .jackpot-main .title .blue { color: #238cee; font-size: 48px; font-weight: bold; text-shadow: 0 3px 3px rgba(0, 0, 0, 1), 0 0 6px rgba(0, 0, 0, 1); } .jackpot-main .amount-cont { width: 480px; height: 90px; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 40px; border: solid 1px #990000; background-image: url('../images/amount-bg.png'); background-position: center; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.75), 0 0 6px rgba(255, 156, 156, 0.60); animation: jmContAnim 0.5s ease infinite; } @keyframes jmContAnim { 0% { box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.75), 0 0 6px rgba(255, 156, 156, 0.60); } 50% { box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.75), 0 0 0 rgba(255, 156, 156, 0.60); } 100% { box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.75), 0 0 6px rgba(255, 156, 156, 0.60); } } .jackpot-main .amount-cont .amount { color: #ffffff; font-size: 48px; font-weight: bold; text-shadow: 0 4px 3px #000; } .jackpot-main .amount-cont .symbol { color: #defe04; font-size: 35px; font-weight: bold; text-shadow: 0 3px 3px #000; margin-left: 15px; } .announce-main { width: 40%; display: inline-block; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0)); position: relative; top: 5px; margin-left: -1.50%; } .announce-main .text-cont { width: auto; display: inline-block; text-align: left; padding: 0 80px 0 80px; } .announce-main .text-cont .title { color: #ffffff; font-size: 36px; font-weight: bold; text-shadow: 0 3px 2px #000, 0 0 1px #000; } .announce-main .text-cont .title span { font-size: 60px; font-weight: bold; position: relative; top: 2px; } .announce-main .text-cont .title span.green { color: #27ff03; } .announce-main .text-cont .title span.blue { color: #12a9ff; } .announce-main .text-cont .title span.red { color: #f45637; } .announce-main .text-cont .sub { color: #ffe71e; font-size: 36px; font-weight: bold; text-shadow: 0 3px 2px #000, 0 0 1px #000; margin-top: -12px; margin-bottom: 0; } .inner_slick_slider .slick-dots { padding: 0; margin: 0; list-style: none; margin-bottom: 15px; } .inner_slick_slider .slick-dots li { display: inline-block; } .inner_slick_slider .slick-dots li button { box-shadow: none; border: none; width: 13px; height: 13px; border-radius: 50%; font-size: 0; background: #fff; margin: 0 5px; } .inner_slick_slider .slick-dots li.slick-active button { background: #c83b3b; } /* ---------------------------------------------------------------------- */ /* page-content / pagesc-container (slot + casino game panels) */ /* ---------------------------------------------------------------------- */ .page-content { width: 100%; float: left; text-align: center; margin-top: -72px; } .pagesc-container { width: 100%; max-width: 1346px; display: inline-block; vertical-align: top; border: 2px solid #292727; border-radius: 5px; position: relative; padding-bottom: 40px; box-shadow: 0 6px 10px #000000; } .slot-container { width: 100%; float: left; position: relative; z-index: 3; } .pagesc-container .panel-head { width: 100%; float: left; text-align: center; margin: 5px 0; } .pagesc-container .panel-head .title { color: #ff9600; font-size: 40px; font-weight: bold; } .pagesc-container .panel-head .title span { font-weight: bold; text-shadow: none; background: -webkit-linear-gradient(#ffeea9, #ffb71c, #ff9600, #ff9600, #ff9600); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: relative; } .pagesc-container .panel-head .title span:after { content: attr(data-text); background: none; left: 0; top: 0; position: absolute; z-index: -1; text-shadow: 0 0 8px rgba(221, 187, 29, 0.30); } .pagesc-container .pane-body { width: 100%; float: left; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .casino-container { width: 100%; float: left; position: relative; z-index: 3; margin-top: 15px; } .casino-container .panel-head .title span { background: -webkit-linear-gradient(#ffffff, #cccccc, #ffffff, #cccccc, #cccccc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .casino-container .panel-head .title span:after { text-shadow: 0 0 8px rgba(219, 222, 219, 0.30); } /* ---------------------------------------------------------------------- */ /* sc-btn — shared game-card component used by both slot & casino panels */ /* ---------------------------------------------------------------------- */ .sc-btn { width: 210px; float: left; margin: 4px; position: relative; border-radius: 3px; box-shadow: 0 2px 2px #000, 0 0 18px rgba(0, 0, 0, 0.75); display: block; } .sc-btn .border-over { width: 100%; height: 100%; position: absolute; left: 0; top: 0; border-radius: 3px; overflow: hidden; pointer-events: none; z-index: 3; } .sc-btn:before, .sc-btn:after { content: ''; width: calc(100% - 6px); height: 1px; position: absolute; left: 0; right: 0; margin: 0 auto; background-image: linear-gradient(to right, #200000, #f6ae00, #200000); z-index: 2; border-radius: 3px; transition: 0.3s; } .sc-btn:after { bottom: 0; } .sc-btn:before { top: 0; } .sc-btn .border-ud:before, .sc-btn .border-ud:after { content: ''; width: 0; height: 1px; left: 0; right: 0; margin: 0 auto; position: absolute; background-color: #f6ae00; border-radius: 3px; transition: ease 0.3s; opacity: 0; } .sc-btn .border-ud:before { top: 0; } .sc-btn .border-ud:after { bottom: 0; } .sc-btn .main-cont { width: 100%; float: left; border-radius: 3px; position: relative; overflow: hidden; border: 1px solid #200000; transition: 0.3s; background-image: url('../images/sc-bg.jpg'); background-size: 100% 100%; } /* is-empty fallback: sc-bg.jpg is missing from the ssu-11 export (see sc-card.blade.php comment). Plain dark gradient only — not an arbitrary image substitute — so the card doesn't render fully blank while the real asset is still unavailable. */ .sc-btn .main-cont.is-empty { background-image: linear-gradient(180deg, #241a12, #0c0806); } .sc-btn .main-cont:before { content: ''; position: absolute; inset: 0; z-index: 2; opacity: 1; transition: 0.3s; } .sc-btn .sc-glow { width: 173.08%; position: absolute; left: -11.75%; bottom: -25%; z-index: 1; } /* is-empty fallback: slot-glow.png is missing from the ssu-11 export. This is a decorative light-glow overlay, not a flat panel, so faking it with a solid color would look wrong — hide the broken instead of showing a broken image icon, leaving the same visual void the original would have. */ .sc-btn .sc-glow.is-empty { display: none; } .sc-over { width: 100%; float: left; position: relative; overflow: hidden; transition: 0.3s; z-index: 1; } .sc-over:before, .sc-over:after { content: ''; position: absolute; background-size: 200% 200%; transition: all .5s ease; box-sizing: border-box; width: 50%; height: 50%; opacity: 0; z-index: 2; background-color: rgba(0, 0, 0, 0.6); } .sc-over:before { top: 0; left: 0; background-position: right top; } .sc-over:after { bottom: 0; right: 0; background-position: left bottom; } .sc-over .sc-in { width: 100%; height: 100%; float: left; display: flex; align-items: center; justify-content: center; background-color: transparent; border: none; z-index: 1; } .sc-over .sc-in:before, .sc-over .sc-in:after { content: ''; position: absolute; background-size: 200% 200%; transition: all .5s ease; box-sizing: border-box; width: 50%; height: 50%; opacity: 0; z-index: 2; background-color: rgba(0, 0, 0, 0.6); } .sc-over .sc-in:before { top: 0; right: 0; background-position: right bottom; } .sc-over .sc-in:after { bottom: 0; left: 0; background-position: left top; } .sc-over.pragmatic:before, .sc-over.pragmatic:after, .sc-over.pragmatic .sc-in:before, .sc-over.pragmatic .sc-in:after { background-image: url('../images/pragmatic-1.png'); } .sc-over.bng:before, .sc-over.bng:after, .sc-over.bng .sc-in:before, .sc-over.bng .sc-in:after { background-image: url('../images/bng-1.png'); } .sc-over.playson:before, .sc-over.playson:after, .sc-over.playson .sc-in:before, .sc-over.playson .sc-in:after { background-image: url('../images/playson-1.png'); } .sc-over.cq9:before, .sc-over.cq9:after, .sc-over.cq9 .sc-in:before, .sc-over.cq9 .sc-in:after { background-image: url('../images/cq9-1.png'); } .sc-over.playngo:before, .sc-over.playngo:after, .sc-over.playngo .sc-in:before, .sc-over.playngo .sc-in:after { background-image: url('../images/playngo-1.png'); } .sc-over.oriental:before, .sc-over.oriental:after, .sc-over.oriental .sc-in:before, .sc-over.oriental .sc-in:after { background-image: url('../images/oriental-1.png'); } .sc-over.evolution:before, .sc-over.evolution:after, .sc-over.evolution .sc-in:before, .sc-over.evolution .sc-in:after { background-image: url('../images/evolution-1.png'); } .sc-over.ag:before, .sc-over.ag:after, .sc-over.ag .sc-in:before, .sc-over.ag .sc-in:after { background-image: url('../images/ag-1.png'); } .sc-over.taishan:before, .sc-over.taishan:after, .sc-over.taishan .sc-in:before, .sc-over.taishan .sc-in:after { background-image: url('../images/taishan-1.png'); } .sc-over.bbin:before, .sc-over.bbin:after, .sc-over.bbin .sc-in:before, .sc-over.bbin .sc-in:after { background-image: url('../images/bbin-1.png'); } .sc-btn .sc-img { width: 100%; left: 0; position: relative; opacity: 1; z-index: 1; transform-origin: top center; transition: ease 0.5s; } .sc-btn .foot { width: 100%; height: 36px; left: 0; bottom: 0; position: absolute; z-index: 2; cursor: pointer; } .sc-btn .foot .bg { width: 100%; height: 36px; left: -100%; bottom: -1px; position: absolute; background-image: linear-gradient(to bottom, #2b2b2b, #000000); transition: ease 0.3s; } .sc-btn .foot .bg:before { content: ''; width: 100%; height: 1px; left: 0; right: 0; margin: 0 auto; top: 0; position: absolute; background-image: linear-gradient(to right, #200000, #f6ae00, #200000); border-radius: 3px; transition: 0.3s; } .sc-btn .foot .bg:after { content: ''; width: 91px; height: 36px; right: -91px; top: 0; position: absolute; background-image: url('../images/sc-foot.png'); background-repeat: no-repeat; } .sc-btn .foot .icon-img { position: absolute; left: 6px; top: 0; bottom: 0; margin: auto 0; z-index: 1; } .sc-btn .foot .name-btn { width: 85px; height: 28px; position: absolute; right: 7px; bottom: 5px; border-radius: 3px; background-color: #bd1713; border: solid 1px #e05151; color: #ffffff; font-size: 13px; transition: 0.5s; cursor: pointer; } .sc-btn .hover { width: 100px; height: 34px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; z-index: 2; opacity: 0; overflow: hidden; border-radius: 8px 2px 8px 2px; box-shadow: 0 0 5px #000; cursor: pointer; } .sc-btn .hover:before, .sc-btn .hover:after { content: ''; position: absolute; background-color: #ffb921; transition: all .8s ease; box-sizing: border-box; width: 50%; height: 50%; opacity: 1; } .sc-btn .hover:before { top: 0; left: 0; } .sc-btn .hover:after { bottom: 0; right: 0; } .sc-btn .hover button { width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: transparent; border: none; z-index: 1; cursor: pointer; } .sc-btn .hover button:before, .sc-btn .hover button:after { content: ''; position: absolute; background-color: #ffb921; transition: all .8s ease; box-sizing: border-box; width: 50%; height: 50%; opacity: 1; z-index: -1; } .sc-btn .hover button:before { top: 0; right: 0; } .sc-btn .hover button:after { bottom: 0; left: 0; } .sc-btn .border-side:before, .sc-btn .border-side:after { content: ''; width: 1px; height: 0; top: 0; bottom: 0; margin: auto 0; position: absolute; background-color: #f6ae00; border-radius: 3px; transition: ease 0.3s; opacity: 0; } .sc-btn .border-side:before { left: 0; } .sc-btn .border-side:after { right: 0; } .sc-btn:hover .border-side:before, .sc-btn:hover .border-side:after { height: 100%; opacity: 1; } .sc-btn:hover .border-ud:before, .sc-btn:hover .border-ud:after { width: 100%; opacity: 1; } .sc-btn:hover .main-cont:before { opacity: 0; } .sc-btn:hover .sc-over:before { left: 50%; opacity: 1; } .sc-btn:hover .sc-over .sc-in:before { top: 50%; opacity: 1; } .sc-btn:hover .sc-img { opacity: 0; } .sc-btn:hover .sc-over .sc-in:after { bottom: 50%; opacity: 1; } .sc-btn:hover .sc-over:after { right: 50%; opacity: 1; } .sc-btn:hover .foot .bg { left: 0; } .sc-btn:hover .foot .name-btn { color: #ffb71c; background-color: transparent; border: solid 1px transparent; text-shadow: 0 1px 1px #000; } .sc-btn:hover .hover { opacity: 1; } .sc-btn:hover .hover:before { left: 50%; opacity: 0.9; } .sc-btn:hover .hover:after { right: 50%; opacity: 0.9; } .sc-btn:hover .hover button:after { bottom: 50%; opacity: 0.9; } .sc-btn:hover .hover button:before { top: 50%; opacity: 0.9; } /* ---------------------------------------------------------------------- */ /* footer-main (static 24-provider logo strip) */ /* ---------------------------------------------------------------------- */ .footer-main { width: 100%; float: left; text-align: center; margin-top: 10px; margin-bottom: 20px; } .footer-main .footer-bg { position: relative; left: 5%; margin-bottom: -203px; } .footer-main .top-cont { width: 100%; float: left; background-color: rgba(0, 0, 0, 0.5); border-top: solid 1px #252525; text-align: center; padding: 30px 10px 13px 10px; } .footer-main .company-cont { width: 100%; float: left; margin-top: 15px; } .footer-main .company-cont .center { width: 100%; max-width: 1280px; display: inline-block; vertical-align: top; text-align: center; } .footer-main .company-cont img { display: inline-block; vertical-align: middle; margin: 0 10px 10px 10px; } /* ---------------------------------------------------------------------- */ /* login/join modals — ported verbatim from style.css's "login popup" */ /* section (selectors/values unchanged; this is the same chrome the */ /* /login and /register PAGE views reuse via .b3-auth-page below). */ /* ---------------------------------------------------------------------- */ .modal { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; -webkit-overflow-scrolling: touch; outline: 0; } .modal-dialog { position: relative; width: auto; margin: 10px; } @media (min-width: 768px) { .modal-dialog { width: 600px; margin: 30px auto; } } .bs-modal { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; margin: 0; padding: 30px 10px; overflow-y: scroll; max-width: 100%; pointer-events: unset; } .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000; display: none; } .modal-backdrop.in { opacity: 0.6; } .bsm-cont { width: 1000px; display: flex; flex-direction: column; align-items: center; position: relative; margin: auto 0; } .loginModal .bsm-cont { width: 800px; } .joinModal .bsm-cont { width: 800px; } .bsm-inner { width: 100%; float: left; position: relative; padding: 0 0 0 130px; overflow: hidden; border: solid 1px #656565; border-radius: 5px; } .loginModal .bsm-inner, .joinModal .bsm-inner { padding-left: 0; } .modal-body { width: 100%; float: left; text-align: center; position: relative; background-image: url('../images/modal-bg.png'); background-repeat: no-repeat; background-position: top 2px center; background-color: #121212; border-left: none; padding: 0; z-index: 1; } .modal-body:before, .modal-body:after { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-repeat: no-repeat; pointer-events: none; } .modal-body:before { background-image: url('../images/modal-bg-left.png'); background-position: top left; } .modal-body:after { background-image: url('../images/modal-bg-right.png'); background-position: bottom right; } .mdl-close-btn { width: 41px; height: 43px; top: 12px; right: 12px; position: absolute; background-color: transparent; background-image: url('../images/close.png'); background-repeat: no-repeat; background-position: center; transition: 0.3s; border: none; z-index: 3; cursor: pointer; display: block; } .mdl-close-btn:focus { outline: none; } .modal-body .mdl-head { width: 100%; float: left; position: relative; z-index: 2; display: flex; align-items: center; justify-content: flex-start; padding: 0 10px; margin-top: 40px; } .modal-body .mdl-head .mdl-title { width: 100%; float: left; text-align: center; } .modal-body .mdl-head .mdl-title div { width: auto; display: none; vertical-align: top; animation: mdlTitleAnim 0.8s ease 1; } .modal-body .mdl-head .mdl-title .active { display: block; } .modal-body .mdl-head .mdl-title div p { font-weight: bold; text-shadow: 0 3px 2px #000000; margin: 0; } .modal-body .mdl-head .mdl-title div .en { color: #ffffff; font-size: 22px; } .modal-body .mdl-head .mdl-title div .kr { color: #ffbb7f; font-size: 35px; margin-top: -5px; } .modal-body .tab-mdl { width: 100%; height: 100%; float: left; padding: 40px 40px; position: relative; z-index: 1; display: none; } .modal-body .tab-mdl.active { display: block; animation: modalTabAnim 0.8s 0s ease 1 backwards; } .loginModal .modal-body .tab-mdl { padding: 40px 75px; } @keyframes modalTabAnim { 0% { opacity: 0; transform: translateX(100%); } 100% { opacity: 1; transform: translateX(0); } } @keyframes mdlTitleAnim { 0% { opacity: 0; transform: translateY(-100%); } 100% { opacity: 1; transform: translateY(0); } } .form-container { width: 100%; float: left; } .form-container .form-group { width: 100%; float: left; position: relative; padding-left: 110px; margin-bottom: 30px; } .loginModal .form-container .form-group { padding-left: 0; } .form-container .form-group .infos { width: 100%; float: left; text-align: left; } .form-container .form-group .infos input { width: 100%; height: 50px; float: left; background-color: #fff; border: none; color: #000; font-size: 17px; font-weight: bold; padding: 0 20px; border-radius: 10px; } .form-container .form-group .infos input:focus { outline: none; } .form-container .form-group .labels { width: 110px; height: 50px; position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: flex-start; } .form-container .form-group .labels p { color: #ffffff; font-size: 16px; text-shadow: 0 2px 1px #000000; margin: 0; } .form-container .form-group .infos label { width: 100%; height: 50px; float: left; position: relative; } .form-container .form-group .infos label select { width: 100%; height: 100%; float: left; background-color: #ffffff; border: none; border-radius: 10px; color: #000; font-size: 17px; padding: 0 10px; } .form-container .form-group p { margin: 0; } .modal-btn-foot { width: 100%; height: auto; float: left; margin: 30px 0 20px 0; text-align: center; } .modal-btn-foot .btn-cont { width: auto; display: inline-block; } .modal-btn-foot .btn-cont button { width: 150px; height: 60px; float: left; border: 1px solid; border-top-color: #dcbf9d; border-left-color: #b69a76; border-right-color: #b69a76; border-bottom-color: #7f643e; background-color: #df801f; margin: 0 8px; border-radius: 5px; overflow: hidden; position: relative; z-index: 1; color: #4e2800; font-size: 18px; font-weight: bold; transition: 0.3s; box-shadow: 0 3px 3px #000000; cursor: pointer; } .modal-btn-foot .btn-cont button.red { background-color: #bd1713; color: #fff; border-top-color: #fe8383; border-left-color: #db4f4f; border-right-color: #db4f4f; border-bottom-color: #a60202; } .modal-btn-foot .btn-cont button:hover { color: #fff; } .modal-btn-foot .os-cont { width: 100%; height: 100%; float: left; display: flex; align-items: center; justify-content: center; background-color: transparent; border: none; z-index: 1; } .joinModal { padding-right: 0 !important; } /* Not in style.css at all — Parsley.js (the source's client-side validator) was never ported, so these