/* CSS Document */ @charset "utf-8"; @import url("css/nanumgothic.css"); @import url("css/notosanskr.css"); @import url("css/fonts_global.css"); @import url("css/animator.css"); html body {width:100%; height:100vh; padding:0; color:#fff; font-family:'Noto Sans KR'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* "나눔고딕", 'Nanum Gothic', "맑은고딕", 'Malgun Gothic' is disabled in this */ /***********************************************/ /*** //// GLOBAL ATTRIBUTE : INDEX PAGE //// ***/ /***********************************************/ /*** //// GLOBAL ATTRIBUTE //// ***/ .index_h{overflow-x:hidden;} .body_wrap{} @media (min-width:0px) and (max-width:1903px){ .index{background:#000; display:block; position:relative;} .bg_ptn_body{display:none;} .body_wrap{width:100%; /*margin:0 auto; display:block; box-sizing:revert; */} } @media (min-width:1904px){ .index{ background-color: #000; /*display:table;*/ position:relative;} .bg_ptn_body{width:100%; height: 100%; /*min-height: 3014px; display: block; */ background: url(images/bg_ptn_body.png); background-size: 150px; background-repeat: repeat; background-position: center; position: absolute; z-index: -1; opacity: 0.6;} .body_wrap{/*max-width:1903px;*/ /*width:100%; margin:0 auto; display:block; background-color: #000; border-left: 2px solid #5c4403; border-right: 2px solid #5c4403; box-sizing: revert; box-shadow: 0px 0px 16px 5px #8d782c, 0px 0px 2px 2px #ffca00;*/} } /* ================================== TOP > SLIDE SECTION ================================== */ @media (min-width:0px) { .slide_section_wrapper{/*max-width:1903px;*/ width:100%; height:500px; position:relative; overflow: hidden;} .slide{ /*max-width:1903px;*/ width:100%; height:500px; position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); } .slide .slide_bg{/*max-width:1903px;*/ width:100%; height:500px; position:absolute; z-index:240; overflow: hidden;} .slide_bg img {width:100%; top: 50%!important; left: 50%!important; transform: translate(-50%, -50%);} .slide .slide_obj{z-index:241;} .slide .slide_obj > .grp{width:100%; height:500px; z-index:242; position:relative; display:flex; justify-content: space-around; align-items:center;} .slide .slide_obj > .grp > div{max-width:500px; width:100%; height:auto; z-index:244; position: relative;} .slide .slide_obj > .grp > div img{width:100%; height:auto;} .slide .slide_obj > div .centered{max-width:800px; min-width:300px; width:calc(50% + 1vw); z-index:245; position:absolute; top:75%; left:50%; transform:translate(-50%, -50%);} .slide .slide_obj > div .centered img{animation:floating1 4s infinite ease-in-out;} .slide .slide_obj > div .leftCentered{width:calc(200px + 10vw); position:absolute; top:calc(50% + 1.5vw); left:calc(-15% + 16vw); transform:translate(0%, -50%); -webkit-mask-image:linear-gradient(to bottom, black 90%, transparent 100%);} .slide .slide_obj > div .leftCentered img{animation:floating1 2s infinite ease-in-out;} .slide .slide_obj > div .rightCentered{width:calc(200px + 10vw); position:absolute; top:calc(50% + 1.5vw); right:calc(-18% + 5vw); transform:translate(0%, -50%);} .slide .slide_obj > div .rightCentered img{animation:floating2 3s infinite ease-in-out;} .slide .slide_obj > div .decoLeft{max-width:calc(200px + 20vw); z-index:243; position:absolute; top:0; left:0;} .slide .slide_obj > div .decoRight{max-width:calc(250px + 20vw); z-index:243; position:absolute; top:10%; left:50%; transform:translate(-50%, 0%);} .slide .slide_obj > div .decoRight img{animation:floating1 4s infinite ease-in-out;} .slide .slide_text{width:100%; height:500px; z-index:246; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:246; -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%);} .slide .slide_text > .grp{width:100%; height:500px; display:flex; justify-content:center; align-items:center; mask-image:linear-gradient(to left, transparent 0%, black 5%, black 95%, transparent 100%); -webkit-mask-image:linear-gradient(to left, transparent 0%, black 5%, black 95%, transparent 100%); /*position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);*/ } .slide .slide_text > .grp .txt{width:100%; font-family:'doh'; text-align:center; position:relative; top:80%;} .slide .slide_text > .grp .txt:before, .slide .slide_text > .grp .txt:after{width:100%; content:attr(data-text); padding:0.5rem; display:block; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);} .slide .slide_text > .grp .txt:before{z-index:252;} .slide .slide_text > .grp .txt:after{z-index:251; text-shadow:0px 0px 10px #000;} .slide .slide_text > .grp .txt-title{font-size:calc(0.6rem + 2vw); transform:translate(0%, calc(-1rem - 1vw)); animation:fadeSlidingRight 4s linear infinite;} .slide .slide_text > .grp .txt-title:before, .slide .slide_text > .grp .txt-title:after{} .slide .slide_text > .grp .txt-sub{font-size:calc(0.4rem + 1.5vw); transform:translate(0%, calc(1rem + 1vw)); animation:fadeSlidingLeft 4s linear infinite;} .slide .slide_text > .grp .txt-sub:before, .slide .slide_text > .grp .txt-sub:after{} @keyframes fadeSlidingRight{ 0%{transform:translate(-30%, calc(-1rem - 1vw)); opacity:(0);} 5%{transform:translate(-5%, calc(-1rem - 1vw)); opacity:(1);} 50%{transform:translate(0%, calc(-1rem - 1vw));} 95%{transform:translate(5%, calc(-1rem - 1vw)); opacity:(1);} 100%{transform:translate(30%, calc(-1rem - 1vw)); opacity:(0);} } @keyframes fadeSlidingLeft{ 0%{transform:translate(30%, calc(1rem + 1vw)); opacity:(0);} 5%{transform:translate(5%, calc(1rem + 1vw)); opacity:(1);} 50%{transform:translate(0%, calc(1rem + 1vw));} 95%{transform:translate(-5%, calc(1rem + 1vw)); opacity:(1);} 100%{transform:translate(-30%, calc(1rem + 1vw)); opacity:(0);} } .slide .slide_text > .grp.id-01 .txt-title{} .slide .slide_text > .grp.id-01 .txt-title:before, .slide .slide_text > .grp.id-01 .txt-title:after{} .slide .slide_text > .grp.id-01 .txt-title:before{background:linear-gradient(to bottom, #fff6f6, #ff9797); -webkit-background-clip:text; -webkit-text-fill-color:transparent;} .slide .slide_text > .grp.id-01 .txt-title:after{ -webkit-text-stroke:#d33965 calc(2px + 0.5vw); text-shadow:0px 0px 15px #9a0029, -1px -1px 3px #ffffff95; } .slide .slide_text > .grp.id-01 .txt-sub{} .slide .slide_text > .grp.id-01 .txt-sub:before{background:linear-gradient(to bottom, #fffef4, #fff4bf); -webkit-background-clip:text; -webkit-text-fill-color:transparent;} .slide .slide_text > .grp.id-01 .txt-sub:after{ -webkit-text-stroke:#d6ac3a calc(2px + 0.5vw); text-shadow:0px 0px 15px #ffdd81, -1px -1px 3px #ffffff95; } .slide .slide_text > .grp.id-02 .txt-title{} .slide .slide_text > .grp.id-02 .txt-title:before, .slide .slide_text > .grp.id-02 .txt-title:after{} .slide .slide_text > .grp.id-02 .txt-title:before{background:linear-gradient(to bottom, #f4f3ff, #d0fff6); -webkit-background-clip:text; -webkit-text-fill-color:transparent;} .slide .slide_text > .grp.id-02 .txt-title:after{ -webkit-text-stroke:#3887d0 calc(2px + 0.5vw); text-shadow:0px 0px 15px #1e598f, -1px -1px 3px #ffffff95; } .slide .slide_text > .grp.id-02 .txt-sub{} .slide .slide_text > .grp.id-02 .txt-sub:before{background:linear-gradient(to bottom, #fffdf2, #ffe5d0); -webkit-background-clip:text; -webkit-text-fill-color:transparent;} .slide .slide_text > .grp.id-02 .txt-sub:after{ -webkit-text-stroke:#d43a49 calc(2px + 0.5vw); text-shadow:0px 0px 15px #640f17, -1px -1px 3px #ffffff95; } .slide .slide_text > .grp.id-03 .txt-title{} .slide .slide_text > .grp.id-03 .txt-title:before, .slide .slide_text > .grp.id-03 .txt-title:after{} .slide .slide_text > .grp.id-03 .txt-title:after{background:linear-gradient(to bottom, #ffffff, #ffe8d0); -webkit-background-clip:text; -webkit-text-fill-color:transparent;} .slide .slide_text > .grp.id-03 .txt-title:after{ -webkit-text-stroke:#d4a33a calc(2px + 0.5vw); text-shadow:0px 0px 15px #b57b00, -1px -1px 3px #ffffff95; } .slide .slide_text > .grp.id-03 .txt-sub{} .slide .slide_text > .grp.id-03 .txt-sub:before{background:linear-gradient(to bottom, #fffdef, #ffe5d0); -webkit-background-clip:text; -webkit-text-fill-color:transparent;} .slide .slide_text > .grp.id-03 .txt-sub:after{ -webkit-text-stroke:#c137c9 calc(2px + 0.5vw); text-shadow:0px 0px 15px #be06c8, -1px -1px 3px #ffffff95; } .slide .slide_text > .grp.id-01 .txt-title:before, .slide .slide_text > .grp.id-01 .txt-title:after, .slide .slide_text > .grp.id-01 .txt-sub:before, .slide .slide_text > .grp.id-01 .txt-sub:after{} .slide .slide_text > .grp.id-02 .txt-title:before, .slide .slide_text > .grp.id-02 .txt-title:after, .slide .slide_text > .grp.id-02 .txt-sub:before, .slide .slide_text > .grp.id-02 .txt-sub:after{} .slide .slide_text > .grp.id-03 .txt-title:before, .slide .slide_text > .grp.id-03 .txt-title:after, .slide .slide_text > .grp.id-04 .txt-sub:before, .slide .slide_text > .grp.id-03 .txt-sub:after{} } @media (min-width:0px) and (max-width:1904px) { .slide_section_wrapper{/*top:60px;*/} .slide_bg{min-height:500px!important;top: 50%!important; left: 50%!important; transform: translate(-50%, -50%);} .slide_bg img{min-width:1904px!important; min-height: 500px!important;} } @media (min-width:0px) and (max-width:575px){ .slide .slide_obj{} .slide .slide_obj > .grp .leftCentered, .slide .slide_obj > .grp .rightentered{/*display:none;*/} } @media (min-width:576px) and (max-width:991px) { .slide .slide_obj{} } @media (min-width:768px){ .slide .slide_text > .grp .txt{top:70%} .slide .slide_obj > div .leftCentered{left:calc(1% + 5vw);} .slide .slide_obj > div .rightCentered{right:calc(1% + 5vw);} .slide .slide_obj > .grp .decoRight{top:50%; left:initial; right:0%; transform:translate(-50%, -50%);} } @media (min-width:992px){ .slide .slide_obj{/*width:; height:;*/} .slide .slide_text > .grp.id-01 .txt-title:after{ -webkit-text-stroke:#d33965 8px; text-shadow:0px 0px 15px #9a0029, -1px -1px 3px #ffffff95, -5px -5px 1px #fab7ba, -5px -6px 1px #fab7ba, -5px -7px 1px #fab7ba, -5px -8px 1px #fab7ba, -6px -5px 1px #fab7ba, -6px -6px 1px #fab7ba, -6px -7px 1px #fab7ba, -6px -8px 1px #fab7ba, -7px -5px 1px #fab7ba, -7px -6px 1px #fab7ba, -7px -7px 1px #fab7ba, -7px -8px 1px #fab7ba, -8px -5px 1px #fab7ba, -8px -6px 1px #fab7ba, -8px -7px 1px #fab7ba, -8px -8px 1px #fab7ba, -5px 5px 1px #fab7ba, -5px 6px 1px #fab7ba, -5px 7px 1px #fab7ba, -5px 8px 1px #fab7ba, -6px 5px 1px #fab7ba, -6px 6px 1px #fab7ba, -6px 7px 1px #fab7ba, -6px 8px 1px #fab7ba, -7px 5px 1px #fab7ba, -7px 6px 1px #fab7ba, -7px 7px 1px #fab7ba, -7px 8px 1px #fab7ba, -8px 5px 1px #fab7ba, -8px 6px 1px #fab7ba, -8px 7px 1px #fab7ba, -8px 8px 1px #fab7ba, 5px -5px 1px #fab7ba, 5px -6px 1px #fab7ba, 5px -7px 1px #fab7ba, 5px -8px 1px #fab7ba, 6px -5px 1px #fab7ba, 6px -6px 1px #fab7ba, 6px -7px 1px #fab7ba, 6px -8px 1px #fab7ba, 7px -5px 1px #fab7ba, 7px -6px 1px #fab7ba, 7px -7px 1px #fab7ba, 7px -8px 1px #fab7ba, 8px -5px 1px #fab7ba, 8px -6px 1px #fab7ba, 8px -7px 1px #fab7ba, 8px -8px 1px #fab7ba, 5px 5px 1px #fab7ba, 5px 6px 1px #fab7ba, 5px 7px 1px #fab7ba, 5px 8px 1px #fab7ba, 6px 5px 1px #fab7ba, 6px 6px 1px #fab7ba, 6px 7px 1px #fab7ba, 6px 8px 1px #fab7ba, 7px 5px 1px #fab7ba, 7px 6px 1px #fab7ba, 7px 7px 1px #fab7ba, 7px 8px 1px #fab7ba, 8px 5px 1px #fab7ba, 8px 6px 1px #fab7ba, 8px 7px 1px #fab7ba, 8px 8px 1px #fab7ba; } .slide .slide_text > .grp.id-01 .txt-sub:after{ -webkit-text-stroke:#d6ac3a 8px; text-shadow:0px 0px 15px #ffdd81, -1px -1px 3px #ffffff95, -5px -5px 1px #fcf5e9, -5px -6px 1px #fcf5e9, -5px -7px 1px #fcf5e9, -5px -8px 1px #fcf5e9, -6px -5px 1px #fcf5e9, -6px -6px 1px #fcf5e9, -6px -7px 1px #fcf5e9, -6px -8px 1px #fcf5e9, -7px -5px 1px #fcf5e9, -7px -6px 1px #fcf5e9, -7px -7px 1px #fcf5e9, -7px -8px 1px #fcf5e9, -8px -5px 1px #fcf5e9, -8px -6px 1px #fcf5e9, -8px -7px 1px #fcf5e9, -8px -8px 1px #fcf5e9, -5px 5px 1px #fcf5e9, -5px 6px 1px #fcf5e9, -5px 7px 1px #fcf5e9, -5px 8px 1px #fcf5e9, -6px 5px 1px #fcf5e9, -6px 6px 1px #fcf5e9, -6px 7px 1px #fcf5e9, -6px 8px 1px #fcf5e9, -7px 5px 1px #fcf5e9, -7px 6px 1px #fcf5e9, -7px 7px 1px #fcf5e9, -7px 8px 1px #fcf5e9, -8px 5px 1px #fcf5e9, -8px 6px 1px #fcf5e9, -8px 7px 1px #fcf5e9, -8px 8px 1px #fcf5e9, 5px -5px 1px #fcf5e9, 5px -6px 1px #fcf5e9, 5px -7px 1px #fcf5e9, 5px -8px 1px #fcf5e9, 6px -5px 1px #fcf5e9, 6px -6px 1px #fcf5e9, 6px -7px 1px #fcf5e9, 6px -8px 1px #fcf5e9, 7px -5px 1px #fcf5e9, 7px -6px 1px #fcf5e9, 7px -7px 1px #fcf5e9, 7px -8px 1px #fcf5e9, 8px -5px 1px #fcf5e9, 8px -6px 1px #fcf5e9, 8px -7px 1px #fcf5e9, 8px -8px 1px #fcf5e9, 5px 5px 1px #fcf5e9, 5px 6px 1px #fcf5e9, 5px 7px 1px #fcf5e9, 5px 8px 1px #fcf5e9, 6px 5px 1px #fcf5e9, 6px 6px 1px #fcf5e9, 6px 7px 1px #fcf5e9, 6px 8px 1px #fcf5e9, 7px 5px 1px #fcf5e9, 7px 6px 1px #fcf5e9, 7px 7px 1px #fcf5e9, 7px 8px 1px #fcf5e9, 8px 5px 1px #fcf5e9, 8px 6px 1px #fcf5e9, 8px 7px 1px #fcf5e9, 8px 8px 1px #fcf5e9; } .slide .slide_text > .grp.id-02 .txt-title:after{ -webkit-text-stroke:#3887d0 8px; text-shadow:0px 0px 15px #1e598f, -1px -1px 3px #ffffff95, -5px -5px 1px #b7dafa, -5px -6px 1px #b7dafa, -5px -7px 1px #b7dafa, -5px -8px 1px #b7dafa, -6px -5px 1px #b7dafa, -6px -6px 1px #b7dafa, -6px -7px 1px #b7dafa, -6px -8px 1px #b7dafa, -7px -5px 1px #b7dafa, -7px -6px 1px #b7dafa, -7px -7px 1px #b7dafa, -7px -8px 1px #b7dafa, -8px -5px 1px #b7dafa, -8px -6px 1px #b7dafa, -8px -7px 1px #b7dafa, -8px -8px 1px #b7dafa, -5px 5px 1px #b7dafa, -5px 6px 1px #b7dafa, -5px 7px 1px #b7dafa, -5px 8px 1px #b7dafa, -6px 5px 1px #b7dafa, -6px 6px 1px #b7dafa, -6px 7px 1px #b7dafa, -6px 8px 1px #b7dafa, -7px 5px 1px #b7dafa, -7px 6px 1px #b7dafa, -7px 7px 1px #b7dafa, -7px 8px 1px #b7dafa, -8px 5px 1px #b7dafa, -8px 6px 1px #b7dafa, -8px 7px 1px #b7dafa, -8px 8px 1px #b7dafa, 5px -5px 1px #b7dafa, 5px -6px 1px #b7dafa, 5px -7px 1px #b7dafa, 5px -8px 1px #b7dafa, 6px -5px 1px #b7dafa, 6px -6px 1px #b7dafa, 6px -7px 1px #b7dafa, 6px -8px 1px #b7dafa, 7px -5px 1px #b7dafa, 7px -6px 1px #b7dafa, 7px -7px 1px #b7dafa, 7px -8px 1px #b7dafa, 8px -5px 1px #b7dafa, 8px -6px 1px #b7dafa, 8px -7px 1px #b7dafa, 8px -8px 1px #b7dafa, 5px 5px 1px #b7dafa, 5px 6px 1px #b7dafa, 5px 7px 1px #b7dafa, 5px 8px 1px #b7dafa, 6px 5px 1px #b7dafa, 6px 6px 1px #b7dafa, 6px 7px 1px #b7dafa, 6px 8px 1px #b7dafa, 7px 5px 1px #b7dafa, 7px 6px 1px #b7dafa, 7px 7px 1px #b7dafa, 7px 8px 1px #b7dafa, 8px 5px 1px #b7dafa, 8px 6px 1px #b7dafa, 8px 7px 1px #b7dafa, 8px 8px 1px #b7dafa; } .slide .slide_text > .grp.id-02 .txt-sub:after{ -webkit-text-stroke:#d43a49 8px; text-shadow:0px 0px 15px #640f17, -1px -1px 3px #ffffff95, -5px -5px 1px #d29c47, -5px -6px 1px #d29c47, -5px -7px 1px #d29c47, -5px -8px 1px #d29c47, -6px -5px 1px #d29c47, -6px -6px 1px #d29c47, -6px -7px 1px #d29c47, -6px -8px 1px #d29c47, -7px -5px 1px #d29c47, -7px -6px 1px #d29c47, -7px -7px 1px #d29c47, -7px -8px 1px #d29c47, -8px -5px 1px #d29c47, -8px -6px 1px #d29c47, -8px -7px 1px #d29c47, -8px -8px 1px #d29c47, -5px 5px 1px #d29c47, -5px 6px 1px #d29c47, -5px 7px 1px #d29c47, -5px 8px 1px #d29c47, -6px 5px 1px #d29c47, -6px 6px 1px #d29c47, -6px 7px 1px #d29c47, -6px 8px 1px #d29c47, -7px 5px 1px #d29c47, -7px 6px 1px #d29c47, -7px 7px 1px #d29c47, -7px 8px 1px #d29c47, -8px 5px 1px #d29c47, -8px 6px 1px #d29c47, -8px 7px 1px #d29c47, -8px 8px 1px #d29c47, 5px -5px 1px #d29c47, 5px -6px 1px #d29c47, 5px -7px 1px #d29c47, 5px -8px 1px #d29c47, 6px -5px 1px #d29c47, 6px -6px 1px #d29c47, 6px -7px 1px #d29c47, 6px -8px 1px #d29c47, 7px -5px 1px #d29c47, 7px -6px 1px #d29c47, 7px -7px 1px #d29c47, 7px -8px 1px #d29c47, 8px -5px 1px #d29c47, 8px -6px 1px #d29c47, 8px -7px 1px #d29c47, 8px -8px 1px #d29c47, 5px 5px 1px #d29c47, 5px 6px 1px #d29c47, 5px 7px 1px #d29c47, 5px 8px 1px #d29c47, 6px 5px 1px #d29c47, 6px 6px 1px #d29c47, 6px 7px 1px #d29c47, 6px 8px 1px #d29c47, 7px 5px 1px #d29c47, 7px 6px 1px #d29c47, 7px 7px 1px #d29c47, 7px 8px 1px #d29c47, 8px 5px 1px #d29c47, 8px 6px 1px #d29c47, 8px 7px 1px #d29c47, 8px 8px 1px #d29c47; } .slide .slide_text > .grp.id-03 .txt-title:after{ -webkit-text-stroke:#d4a33a 8px; text-shadow:0px 0px 15px #b57b00, -1px -1px 3px #ffffff95, -5px -5px 1px #faeab7, -5px -6px 1px #faeab7, -5px -7px 1px #faeab7, -5px -8px 1px #faeab7, -6px -5px 1px #faeab7, -6px -6px 1px #faeab7, -6px -7px 1px #faeab7, -6px -8px 1px #faeab7, -7px -5px 1px #faeab7, -7px -6px 1px #faeab7, -7px -7px 1px #faeab7, -7px -8px 1px #faeab7, -8px -5px 1px #faeab7, -8px -6px 1px #faeab7, -8px -7px 1px #faeab7, -8px -8px 1px #faeab7, -5px 5px 1px #faeab7, -5px 6px 1px #faeab7, -5px 7px 1px #faeab7, -5px 8px 1px #faeab7, -6px 5px 1px #faeab7, -6px 6px 1px #faeab7, -6px 7px 1px #faeab7, -6px 8px 1px #faeab7, -7px 5px 1px #faeab7, -7px 6px 1px #faeab7, -7px 7px 1px #faeab7, -7px 8px 1px #faeab7, -8px 5px 1px #faeab7, -8px 6px 1px #faeab7, -8px 7px 1px #faeab7, -8px 8px 1px #faeab7, 5px -5px 1px #faeab7, 5px -6px 1px #faeab7, 5px -7px 1px #faeab7, 5px -8px 1px #faeab7, 6px -5px 1px #faeab7, 6px -6px 1px #faeab7, 6px -7px 1px #faeab7, 6px -8px 1px #faeab7, 7px -5px 1px #faeab7, 7px -6px 1px #faeab7, 7px -7px 1px #faeab7, 7px -8px 1px #faeab7, 8px -5px 1px #faeab7, 8px -6px 1px #faeab7, 8px -7px 1px #faeab7, 8px -8px 1px #faeab7, 5px 5px 1px #faeab7, 5px 6px 1px #faeab7, 5px 7px 1px #faeab7, 5px 8px 1px #faeab7, 6px 5px 1px #faeab7, 6px 6px 1px #faeab7, 6px 7px 1px #faeab7, 6px 8px 1px #faeab7, 7px 5px 1px #faeab7, 7px 6px 1px #faeab7, 7px 7px 1px #faeab7, 7px 8px 1px #faeab7, 8px 5px 1px #faeab7, 8px 6px 1px #faeab7, 8px 7px 1px #faeab7, 8px 8px 1px #faeab7; } .slide .slide_text > .grp.id-03 .txt-sub:after{ text-shadow:0px 0px 15px #be06c8, -1px -1px 3px #ffffff95, -5px -5px 1px #ffb2f5, -5px -6px 1px #ffb2f5, -5px -7px 1px #ffb2f5, -5px -8px 1px #ffb2f5, -6px -5px 1px #ffb2f5, -6px -6px 1px #ffb2f5, -6px -7px 1px #ffb2f5, -6px -8px 1px #ffb2f5, -7px -5px 1px #ffb2f5, -7px -6px 1px #ffb2f5, -7px -7px 1px #ffb2f5, -7px -8px 1px #ffb2f5, -8px -5px 1px #ffb2f5, -8px -6px 1px #ffb2f5, -8px -7px 1px #ffb2f5, -8px -8px 1px #ffb2f5, -5px 5px 1px #ffb2f5, -5px 6px 1px #ffb2f5, -5px 7px 1px #ffb2f5, -5px 8px 1px #ffb2f5, -6px 5px 1px #ffb2f5, -6px 6px 1px #ffb2f5, -6px 7px 1px #ffb2f5, -6px 8px 1px #ffb2f5, -7px 5px 1px #ffb2f5, -7px 6px 1px #ffb2f5, -7px 7px 1px #ffb2f5, -7px 8px 1px #ffb2f5, -8px 5px 1px #ffb2f5, -8px 6px 1px #ffb2f5, -8px 7px 1px #ffb2f5, -8px 8px 1px #ffb2f5, 5px -5px 1px #ffb2f5, 5px -6px 1px #ffb2f5, 5px -7px 1px #ffb2f5, 5px -8px 1px #ffb2f5, 6px -5px 1px #ffb2f5, 6px -6px 1px #ffb2f5, 6px -7px 1px #ffb2f5, 6px -8px 1px #ffb2f5, 7px -5px 1px #ffb2f5, 7px -6px 1px #ffb2f5, 7px -7px 1px #ffb2f5, 7px -8px 1px #ffb2f5, 8px -5px 1px #ffb2f5, 8px -6px 1px #ffb2f5, 8px -7px 1px #ffb2f5, 8px -8px 1px #ffb2f5, 5px 5px 1px #ffb2f5, 5px 6px 1px #ffb2f5, 5px 7px 1px #ffb2f5, 5px 8px 1px #ffb2f5, 6px 5px 1px #ffb2f5, 6px 6px 1px #ffb2f5, 6px 7px 1px #ffb2f5, 6px 8px 1px #ffb2f5, 7px 5px 1px #ffb2f5, 7px 6px 1px #ffb2f5, 7px 7px 1px #ffb2f5, 7px 8px 1px #ffb2f5, 8px 5px 1px #ffb2f5, 8px 6px 1px #ffb2f5, 8px 7px 1px #ffb2f5, 8px 8px 1px #ffb2f5; } } /* ================================== TOP > SLIDE > SYMBOL ================================== */ .symbol_section_wrapper{/*max-width:1903px;*/ width:100%; display:block; position:relative;} .symbol_link_top{width:100%; max-width: 175px; position:absolute;} .symbol_link_top:hover{} .symbol_link_top img{width:100%; animation:mainTextTwirl 2s ease infinite;} @media (min-width:0px) { } @media (min-width:0px) and (max-width:575px){ } @media (min-width:0px) and (max-width:759px){ #sy_mb{top:10px; text-align:center;} /* .symbol_section_wrapper for mobile container */ #sy_mb .symbol_link_top{ width:50%; left:50%; top:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); } #sy_pc{display:none;} .symbol_section_wrapper for PC container */ } @media (min-width:760px){ #sy_mb{display:none;} /* .symbol_section_wrapper for mobile container */ #sy_pc{top:25px; z-index:241;} /* .symbol_section_wrapper for PC container */ /*#sy_pc .symbol_link_top{ left:35px;} */ #sy_pc .symbol_link_top{ left:45%;} } @media (min-width:992px){ } @media (min-width:0px) and (max-width:759px) { .sectionWrapperloginNav{width:100%; height:60px; background:#0e1313; padding:0; position:absolute; top:0; z-index:999; border-bottom:2px solid #4b6385;} .cv_wrapper{} .cv_wrapper .offcanvas-header{background:#747474; font-family: 'doh';} .cv_wrapper .offcanvas-header button{} .tgl_btn{width:50px; height:50px; padding:0; border:1px solid rgba(255,255,255,0.3); position:absolute; right:8px; top:5px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; } .tgl_btn .navbar-toggler-icon{} .tgl_btn .navbar-toggler-icon div{width:100%; height:2px; margin:0.3em auto; background:#fff;} } @media (min-width:0px) and (max-width:575px){ } @media (min-width:576px) and (max-width:759px) { } @media (min-width:760px){ .sectionWrapperloginNav{width:100%; position:relative; padding:0;} } @media (min-width:992px){ } /* ================================== TOP > SLIDE > LOGIN SECTION ================================== */ @media (min-width:0px) { .login_table_wrap{max-width:375px; width:100%; height:180px; margin:0; position:relative; right:0; /* transform:translate(-50%, 0px); -webkit-transform:translate(-50%, 0px); -moz-transform:translate(-50%, 0px); -ms-transform:translate(-50%, 0px); -o-transform:translate(-50%, 0px); */ background:linear-gradient(to bottom, #ffeed6, #5b4516); z-index: 241; } .login_table_wrap .table_ptn_bg{width:100%; height:100%; position:absolute; background: url(images/loggedin_transparant_ptn.png); background-position: center; background-size: 767px 57px; background-repeat: repeat;} .login_table_wrap ul{width:100%; height:100%; padding:5px; margin:0; display:flex; align-items: center; justify-content: center; flex-wrap: nowrap; flex-direction: column; position:relative; } .login_table_wrap ul li{font-family: scdream;} .login_table_wrap ul.login{} .lg_icon{width:25px; height:25px; margin-right:8px; display:inline-block;} .lg_icon img{widht:100%; height:100%;} .login_table_wrap ul.loggedin{color:#483119; font-weight: 800; text-shadow: 0px 0px 0px rgba(255,255,255,0.8);} .login_table_wrap ul.loggedin li:first-child{font-size:14pt; } .login_table_wrap ul.loggedin li:nth-child(2){font-size:12pt; } .login_table_wrap ul.loggedin li:nth-child(3){font-size:12pt; } .login_table_wrap ul.loggedin li:nth-child(4){} .login_table_wrap ul.loggedin li:nth-child(5){} .login_table_wrap ul.loggedin li:nth-child(6){} .btn_lgn{height:40px; border-radius: 6px; border:none; box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.5); transition:0.1s all; color:#fff; font-weight:400; text-shadow:none; font-size:10pt; } .btn_lgn:hover{transform: translate(1px,1px); box-shadow: inset 2px 2px 0px 0px rgba(0,0,0,0.3);} .btn_rfs{background:linear-gradient(to top, #3d290b, #bc734f);} .btn_ltr{background:linear-gradient(to top, #0b293d, #bc734f);} .btn_lgout{background:linear-gradient(to top, #3d170b, #aebc4f);} .btn_lgn_in{height:40px; border-radius: 6px; border:none; box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.5); transition:0.1s all; color:#fff; font-weight:400; text-shadow:none; font-size:10pt;} .btn_lgn_in:hover{transform: translate(1px,1px); box-shadow: inset 2px 2px 0px 0px rgba(0,0,0,0.3);} .btn_confirm_index{background:linear-gradient(to bottom, #304b74, #062845);} .btn_confirm_index:hover{background:linear-gradient(to bottom, #304b74, #062845);} .btn_signup_index{background:linear-gradient(to bottom, #743030, #450606);} .btn_signup_index:hover{background:linear-gradient(to bottom, #743030, #450606);} ul.login input{color: #B9B9B9; font-size:12pt; background: rgba(19,19,19,0.9); border:1px solid rgba(255,255,255,0.5); display:inline-block; border-radius:0.35rem;} ul.login input:focus{background: #464646; color: #B9B9B9;} ul.login input::placeholder{color:#B9B9B9; font-size: 10pt;} } @media (min-width:0px) and (max-width:575px){ .login_table_wrap{} .login_table_wrap ul li{ margin-bottom:3px;} } @media (min-width:0px) and (max-width:759px) { .btn_lgn_in{width:290px;} ul.login input{width:250px; } .login_table_wrap ul.loggedin{display:flex; flex-wrap:wrap; justify-content:space-between; flex-direction:row; align-items:center;} .login_table_wrap ul.loggedin li:first-child{width:100%; text-align:center;} .login_table_wrap ul.loggedin li:nth-child(2){width:50%; text-align:center;} .login_table_wrap ul.loggedin li:nth-child(3){width:50%; text-align:center;} .login_table_wrap ul.loggedin li:nth-child(4){width:32%; text-align:center;} .login_table_wrap ul.loggedin li:nth-child(5){width:32%; text-align:center;} .login_table_wrap ul.loggedin li:nth-child(6){width:32%; text-align:center;} .btn_lgn{width:100%;} } @media (min-width:760px){ .login_table_wrap{ max-width:760px; height:60px; position:absolute; left:50%; transform:translate(-50%, -60px); -webkit-transform:translate(-50%, -60px); -moz-transform:translate(-50%, -60px); -ms-transform:translate(-50%, -60px); -o-transform:translate(-50%, -60px); } .login_table_wrap .table_ptn_bg{width:760px; height:60px;} .login_table_wrap ul{width:100%; height:auto; display:flex; align-items: center; justify-content: space-evenly; flex-wrap: wrap; flex-direction: row; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);} .btn_lgn_in{width:90px;} ul.login input{width:170px; } } @media (min-width:992px){ } /* ================================== NAVIGATOR SECTION ================================== */ @media (min-width:0px) { .nav_wrapper{width:100%; height:100%; border-top: 3px solid #46b5de;} .nav_wrapper > div{margin: 0 auto;} ul.nav_menu{height:100%; display:flex; justify-content: center; align-items: center; flex-wrap: wrap; align-content: center;} ul.nav_menu li{width:100%; text-align: center;} .nav_menu li a{width:100%; height:61px; display:block; position:relative; top:-2px; color:#e0e0e0; font-family: scdream; font-weight: 600; text-decoration: none; font-size:1.2em; transition: 0.5s all; margin-right: 15px;} .nav_menu li a p{width:100%; margin:0; position:absolute; top:25%;} .nav_menu li:nth-child(1) a img{} .nav_menu li:nth-child(2) a img{} .nav_menu li:nth-child(3) a img{} .nav_menu li:nth-child(4) a img{} .nav_menu li:nth-child(5) a img{} .nav_menu li:nth-child(6) a img{} .nav_menu li:last-child{border:none;} .nav_menu li a:hover{color:#787878; color: #fff; box-shadow: inset 1px 1px 10px 4px rgb(0 0 0 / 20%); text-shadow: 1px 1px 0px rgb(0 0 0 / 80%);} .nav_menu li a:hover img{ animation: float 1s ease infinite; -webkit-animation: float 1s ease infinite; } } @media (min-width:0px) and (max-width:759px){ .nav_wrapper{max-width:375px; height:auto; position:relative; right:0; top:0; margin:0;} .nav_wrapper > div{background:linear-gradient(to bottom, #146cf0 3%, #2c0454);} ul.nav_menu{height:100%; } .nav_menu li a{top:0px;} .nav_menu li{border-bottom:#c4d2ff 1px solid; box-shadow:inset -0.2em -0.2em 0.9em 0.1em #00000090, inset 0.1em 0.1em 0.1em 0.1em #ffffff50; } } @media (min-width:760px){ .nav_wrapper{height:67px; background:linear-gradient(to bottom, #146cf0 3%, #2c0454);} ul.nav_menu{height:67px; } /*ul.nav_menu li{width:190px;}*/ .nav_menu li a{top:-2px;} .nav_menu li{border-right:rgb(46 123 205 / 80%) 1px solid;} } @media (min-width:760px) and (max-width:967px){ ul.nav_menu li{width:150px;} .nav_menu li a{font-size:0.9em;} } @media (min-width:968px){ ul.nav_menu li{width:190px;} } /* ================================== ODOMETER SECTION ================================== */ @media (min-width:0px) { .odometer_section_wrapper{/*max-width:1903px;*/ width:100%; min-height:90px; max-height:300px; height:100%; position:relative; background:#262626;} .odometer_section_wrapper .section_bg{width:100%; position:absolute; z-index: 240; background:url(images/odometer_section_ptn_bg.png); background-repeat:repeat; background-size:1903px 90px;} .odometer_wrapper{display:flex; left:50%; transform: translate(-50%,0); z-index: 241;} .odometer_wrapper > div{} .odometer_title{max-width:420px; min-width:300px; width:100%; height:90px; position:relative; z-index: 241;} .odometer_title img{width:100%; height:100%;} .odometer_title .machine{max-width:74px; max-height:90px; animation:odoBgAnim1 5s ease infinite;} .odometer_title .title{max-width:360px; max-height:37px; position:absolute; top:37%; left:47px; animation:float 2s infinite ease-in-out;} .odometer_counter{min-width:360px; height:90px;} .odometer_counter div{color:#fff; font-family:tsb; font-size: 28pt; position:relative; top:25%; animation:od_glow 1.2s infinite;} .odometer_counter div p{} .odometer_counter div span.value{padding-left:8px; position:relative; bottom:8px;} } @media (min-width:0px) and (max-width:759px){ .odometer_wrapper{position:relative; flex-direction: column; align-items: center; border-top:2px solid #6f6f6f; border-bottom:2px solid #6f6f6f;} .odometer_section_wrapper .section_bg{height:100%;} .odometer_title{width:90%; position:relative; top:5px;} .odometer_counter{height:50px; position:relative; top:-20px;} .odometer_counter div{ font-size:20pt; text-align: center;} } @media (min-width:760px){ .odometer_wrapper{position:absolute;} .odometer_section_wrapper .section_bg{ height:90px;} } @media (min-width:992px){ } /* ================================== CARD SELECTION AREA ================================== */ @media (min-width:0px) { .gamelist_section_wrapper{/*max-width:1903px;*/ width:100%; height:100%; padding-bottom:50px; position:relative; background:url(images/gamelist_bg.png); background-position: center; background-size: cover; background-repeat: no-repeat;} .g_section_bg{/*max-width:1903px;*/ width:100%; height:100%; /*min-height:3294px;*/ position:absolute; overflow:hidden; z-index:2;} .left_bg{width:816px; height:100%; position:absolute; top:0; left:-816px; opacity: 0; transition: 0.4s all;} .left_layer_1{width:584px; height:1201px; position:absolute; left:0; top:50%; transform:translate(0, -50%);} .left_layer_1 img{ animation:floating1 2s ease infinite;} .left_layer_2{width:483px; height:498px; position:absolute; left:0; top:0%;} .left_layer_2 img{ animation:floating1 1s ease infinite;} .left_layer_3{width:816px; height:860px; position:absolute; left:0; top:4%;} .left_layer_3 img{ animation:float_card_link 3s ease-in-out infinite;} .left_layer_4{width:257px; height:472px; position:absolute; left:-20px; bottom:-2%;} .left_layer_4 img{ animation:tada 8s ease-in-out infinite;} .right_bg{width:764px; height:100%; position:absolute; top:0; right:-764px; opacity:0; transition: 0.4s all;} .right_layer_1{width:409px; height:1501px; position:absolute; right:0; top:50%; transform:translate(0, -50%);} .right_layer_1 img{} .right_layer_2{width:754px; height:963px; position:absolute; right:0; top:8%;} .right_layer_2 img{ animation:float_card_link 3s ease infinite;} .right_layer_3{width:342px; height:756px; position:absolute; right:0; top:50%;} .right_layer_3 img{ animation:floating1 1s ease-in-out infinite;} .right_layer_4{width:526px; height:564px; position:absolute; right:0; top:0%;} .right_layer_4 img{} .left_bg_fix{left:0; opacity:1;} .right_bg_fix{right:0; opacity:1;} .g_section_bg img{width:100%; height:100%;} .gameNav{position:relative; z-index:3;} .gameNav *{transition:all 0.3s;} .gameNav .game-nav{} .game-nav .nav-title{display:none!important; justify-content:center; align-items:center; font-size:calc(0.7rem + 0.8vw); font-weight:bold; padding:0 0.5rem 0.25rem; margin-bottom:0.25rem;} .game-nav .nav-title .wrapper{} .game-nav .nav-title .wrapper .imgs{} .game-nav .nav-title .wrapper .title{padding:0.825rem 1rem; background:linear-gradient(to bottom, #573208, #ce9733); border-bottom-left-radius:20px; border-bottom-right-radius:20px; box-shadow:inset 0 -5px 0.5rem #f7ac13, inset 0 -4px 2px #4c2800, inset 0 2px 2px #00000090, inset 3px 3px #00000060, 0 3px 0.5rem #00000070; text-shadow:0 0 0.25rem #00000090, 2px 2px 0.25rem #955400; } .game-nav .menu{display:flex; justify-content:center; align-items:center;} .game-nav .menu .menu-btn{width:fit-content; padding:0.25rem 1%; transform:scale(0.8);} .game-nav .menu .menu-btn .title{max-width:342px; max-height:128px; min-width:calc(342px / 2); min-height:calc(128px / 2); width:calc(85.5px + 10vw); height:calc(32px + 4vw); position:relative; background: url(images/gamelist_title_00.png); background-size:100%; background-repeat:no-repeat; background-position:center; filter:grayscale(1); -webkit-filter:grayscale(1); } .game-nav .menu .menu-btn .title .title_01{max-width:342px; max-height:128px; min-width:calc(342px / 2); min-height:calc(128px / 2); width:calc(85.5px + 10vw); height:calc(32px + 4vw); position:absolute; background-size:100%!important; background-position:center!important; background-repeat:no-repeat!important; } .game-nav .menu .menu-btn .title.slotGames .title_01{background:url(images/gamelist_title_02_s_non.png);} .game-nav .menu .menu-btn .title.casinoGames .title_01{background:url(images/gamelist_title_02_c_non.png);} .game-nav .menu .menu-btn .title .title_02{width:100%; height:auto;} .game-nav .menu .menu-btn .title.slotGames .title_02{} .game-nav .menu .menu-btn .title.casinoGames .title_02{} .game-nav .menu .menu-btn.active{transform:scale(0.9);} .game-nav .menu .menu-btn:hover{transform:scale(1);} .game-nav .menu .menu-btn.active .title{} .game-nav .menu .menu-btn:hover .title{} .game-nav .menu .menu-btn.active .title, .game-nav .menu .menu-btn:hover .title{filter:initial; -webkit-filter:initial;} .game-nav .menu .menu-btn.active .title .title_01{} .game-nav .menu .menu-btn.active .title.slotGames .title_01, .game-nav .menu .menu-btn:hover .title.slotGames .title_01{animation: game_list_bg_slot_games 1.5s ease infinite; -webkit-animation: game_list_bg_slot_games 1.5s ease infinite;} .game-nav .menu .menu-btn.active .title.casinoGames .title_01, .game-nav .menu .menu-btn:hover .title.casinoGames .title_01{animation: game_list_bg_casino_games 1.5s ease infinite; -webkit-animation: game_list_bg_casino_games 1.5s ease infinite;} .game-nav .menu .menu-btn.active .title .title_02, .game-nav .menu .menu-btn:hover .title .title_02{animation:odoBgAnim1 8s ease infinite;} .game-nav .menu .menu-btn.active .title.slotGames .title_02, .game-nav .menu .menu-btn:hover .title.slotGames .title_02{} .game-nav .menu .menu-btn.active .title.casinoGames .title_02, .game-nav .menu .menu-btn:hover .title.casinoGames .title_02{} .gamelist_section_wrapper .section_title{} .gamelist .title_wrapper{/*max-width:1903px;*/ width:100%; height:128px; position:relative; top:20px; margin:0 0 3em 0;} .gamelist .section_title{width:342px; height:128px; position:absolute; transform:translate(-50%,0); left:50%;} .gamelist .section_title .title{width:342px; height:128px; position:absolute; background: url(images/gamelist_title_00.png);} .gamelist .section_title .title_01{width:342px; height:128px; position:absolute;} .title_action_slot_games{ animation: game_list_bg_slot_games 1.5s ease infinite; -webkit-animation: game_list_bg_slot_games 1.5s ease infinite; } .title_action_casino_games{ animation: game_list_bg_casino_games 1.5s ease infinite;} /*@keyframes game_list_bg_glow1{ 0% { background: url(images/gamelist_title_02_non.png);} 20% { background: url(images/gamelist_title_02.png);} 43% { background: url(images/gamelist_title_02_non.png);} 60% { background: url(images/gamelist_title_02.png);} 80% { background: url(images/gamelist_title_02_non.png);} 100% { background: url(images/gamelist_title_02.png);} }*/ .gamelist .section_title .title_02{ animation:odoBgAnim1 8s ease infinite;} /* == GAME LIST AREA ==================================*/ .gamelist_group{margin: 0 auto; max-width:1500px; text-align: center; display:flex; justify-content: flex-start; flex-wrap: wrap; align-items: center; padding: 8px 0px 15px 0px;} .gamelist_group#w {padding:8px 10px 15px;} /* === Attributes => SLOT GAME SECTION === */ a.g_card_link{ width:100%; height:100%; max-width:230px; max-height:230px; margin: 10px; transition:0.2s all; -webkit-transition:0.2s all; -moz-transition:0.2s all; -ms-transition:0.2s all; -o-transition:0.2s all; } .g_card_wrapper_hv{max-width:230px; max-height:230px; width:100%; height:100%; overflow:hidden; position:relative; box-shadow:1px 1px 2px 1px rgb(0 0 0 / 50%);} .g_card_bg{width:444px; height:443px; background: url(images/gamecard_bg_01.png); background-size: 444px 443px; background-position: center; position:absolute; top:-50%; left:-50%; transition: 1s all ease; animation: float 6s ease-in-out infinite;} .g_card_frame{max-width:230px; max-height:230px; width:100%; height:100%; background: url(images/gamecard_stroke.png); background-size:cover; background-position: center; background-repeat: no-repeat; position:absolute;} .g_card_img_frame_hv{position:absolute; top:100%; left:0; opacity:0; transition: 0.3s all ease;} .g_card_img_frame_title_hv{position:absolute; top:100%; left:0; opacity:0; transition: 0.9s all ease;} .g_card_img_frame_hv img, .g_card_img_frame_title_hv img {width:100%; height:100%;} .g_card_img_frame{max-width:230px; max-height:230px; width:100%; height:100%; position:absolute; transition: 0.2s all ease;} .g_card_img_frame img {width:100%; height:100%;} .g_card_link:hover{ animation: float_card_link 1s ease-in-out infinite; -webkit-animation: float_card_link 1s ease-in-out infinite;} .g_card_link:hover{ transform: none !important; filter: none!important; -webkit-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -o-transform: none !important; -webkit-filter: none!important; } .g_ca_hv_fix{ filter: grayscale(100%);} .g_card_link:hover > .g_card_wrapper_hv{animation:bg-gamecard-outerglow 0.8s ease infinite;} .g_card_wrapper_hv:hover > .g_card_img_frame{transform: translate(0,100%); opacity:0; transition: 0.1s all ease;} .g_card_wrapper_hv:hover > .g_card_bg, .g_card_wrapper_hv:hover > .g_card_bg_red, .g_card_wrapper_hv:hover > .g_card_bg_gold, .g_card_wrapper_hv:hover > .g_card_bg_blue{width:415px; height:415px; background: url(images/gamecard_bg_play.png); top:-50%; left:-50%; animation:spin 4s linear infinite;} .g_card_wrapper_hv:hover > .g_card_img_frame_hv, .g_card_wrapper_hv:hover > .g_card_img_frame_title_hv{top:0; opacity:1; transition: 0.2s all ease; animation: float 2s ease-in infinite;} .g_card_wrapper_hv:hover > .g_card_img_frame_hv{animation: float 6s ease-in-out infinite;} /* === Attributes => CASINO GAME SECTION === */ a.g_ca_card_link{width:330px; height:230px; margin: 22px; overflow:visible; position:relative;} /*a.g_ca_card_link .g_card_wrapper_hv{width:330px; height:430px; overflow:hidden; position:relative;}*/ #w a.g_ca_card_link{width:100%; height:180px; max-width:1100px; max-height:180px; margin:0 auto 40px auto; overflow:visible; position:relative;} /* == HORIZONTAL WIDE TYPE GAMELIST GROUP == */ a.g_ca_card_link .g_ca_card_bg{width:100%; height:100%;/*width:330px; height:230px;*/ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); box-shadow: 1px 1px 1px 1px rgb(48 48 48 / 50%); border-radius:20px; transition: 0.3s all ease; animation: none;} #w a.g_ca_card_link .g_ca_card_bg{ border-radius:none;} .g_ca_card_bg#bg_51{background: url(images/ca_01_bg_fb.png); background-size: 330px 230px; background-position: center;} #w .g_ca_card_bg#bg_51{background: url(images/ca_01_bg_fb_w.png); background-size: 1500px 180px; background-position: center;} .g_ca_card_bg#bg_52{background: url(images/ca_02_bg_fb.png); background-size: 330px 230px; background-position: center;} #w .g_ca_card_bg#bg_52{background: url(images/ca_02_bg_fb_w.png); background-size: 1500px 180px; background-position: center;} .g_ca_card_bg#bg_53{background: url(images/ca_03_bg_fb.png); background-size: 330px 230px; background-position: center;} .g_ca_card_bg#bg_54{background: url(images/ca_04_bg_fb.png); background-size: 330px 230px; background-position: center;} .g_ca_card_bg#bg_55{background: url(images/ca_05_bg_fb.png); background-size: 330px 230px; background-position: center;} .g_ca_card_bg#bg_56{background: url(images/ca_06_bg_fb.png); background-size: 330px 230px; background-position: center;} .g_ca_card_bg#bg_57{background: url(images/ca_07_bg_fb.png); background-size: 330px 230px; background-position: center;} .g_ca_card_bg#bg_58{background: url(images/ca_08_bg_fb.png); background-size: 330px 230px; background-position: center;} .g_ca_card_bg#bg_59{background: url(images/ca_09_bg_fb.png); background-size: 330px 230px; background-position: center;} .g_ca_card_bg#bg_60{background: url(images/ca_10_bg_fb.png); background-size: 330px 230px; background-position: center;} .g_ca_card_bg#bg_61{background: url(images/ca_11_bg_fb.png); background-size: 330px 230px; background-position: center;} .g_ca_card_bg#bg_62{background: url(images/ca_12_bg_fb.png); background-size: 330px 230px; background-position: center;} .g_ca_card_bg#bg_63{background: url(images/ca_13_bg_fb.png); background-size: 330px 230px; background-position: center;} .g_ca_card_bg#bg_64{background: url(images/ca_14_bg_fb.png); background-size: 330px 230px; background-position: center;} .bg_dec_sha, .bg_dec_hlt, .bg_dec_glc {width:330px; height:230px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);} a.g_ca_card_link .bg_dec_sha{} a.g_ca_card_link .bg_dec_hlt{} a.g_ca_card_link .bg_dec_glc{} a.g_ca_card_link .g_ca_card_bg::before{ content:''; display: block; width:100%; height:100%; /*width:330px; height:230px;*/ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background:url(images/ca_bg_glossfx.png); background-position: center; background-size:330px 230px; -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%);} #w a.g_ca_card_link .g_ca_card_bg::before{ content:''; display: block; width:100%; height:100%; /*width:330px; height:230px;*/position:absolute; top:50%; left:50%; background:url(images/ca_bg_glossfx_w.png); background-position: center; background-size:1500px 180px; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; } a.g_ca_card_link .g_card_img_frame_hv{position:absolute; top:45%; left:50%; transform:translate(-50%, -50%); opacity:0; transition: 0.3s all ease;} #w a.g_ca_card_link .g_card_img_frame_hv{width:100%; height:auto; max-width: 380px; max-height: 220px; position:absolute; top:45%; left:50%; transform:translate(-50%, -50%); opacity:0; transition: 0.3s all ease;} a.g_ca_card_link .g_card_img_frame_hv .imgs {width:380px; height:280px; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);} #w a.g_ca_card_link .g_card_img_frame_hv .imgs {width:100%; height:auto; max-width:380px; max-height:220px; position:absolute; top:50%; left:0; transform: translate(-50%, -50%);} .g_card_img_frame_hv .imgs img{ animation:float 2s ease-in infinite; -webkit-animation:float 2s ease-in infinite; } a.g_ca_card_link .g_card_img_frame_hv .title { width:380px; height:230px; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); } #w a.g_ca_card_link .g_card_img_frame_hv .title { width:100%; height:auto; max-width:380px; max-height:220px; position:absolute; top:50%; left:0%; transform: translate(-50%, -50%);} a.g_ca_card_link .g_card_img_frame{ width:330px; height:230px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); transition: 0.2s all ease; -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); } #w a.g_ca_card_link .g_card_img_frame{ width:100%; height:220px; max-width:1500px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); transition: 0.2s all ease; -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); } a.g_ca_card_link .g_card_img_frame img { width:380px; height:280px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); } a.g_ca_card_link .g_card_img_frame img:last-child{ width:330px; height:230px; } #w a.g_ca_card_link .g_card_img_frame img:first-child{ width:100%; height:auto; max-width:380px; max-height:220px; position:absolute; top:50%; left:0; transform:translate(0%, -50%); -webkit-transform:translate(0%, -50%); -moz-transform:translate(0%, -50%); -ms-transform:translate(0%, -50%); -o-transform:translate(0%, -50%); } #w a.g_ca_card_link .g_card_img_frame img:last-child{ width:100%; height:auto; max-width:380px; max-height:220px; position:absolute; top:50%; left:unset; right:0%; margin-right:20px; transform:translate(0%, -50%); -webkit-transform:translate(0%, -50%); -moz-transform:translate(0%, -50%); -ms-transform:translate(0%, -50%); -o-transform:translate(0%, -50%); } /*a.g_ca_card_link #bg_54 .g_card_img_frame img:last-child {width: 500px !important; height: 560px !important;}*/ a.g_ca_card_link .g_ca_card_bg:hover {background: url(images/ca_hv_bg.png)!important; box-shadow: none;} #w a.g_ca_card_link .g_ca_card_bg:hover {background: url(images/ca_hv_bg_w.png)!important; box-shadow: none;} a.g_ca_card_link .g_ca_card_bg:hover > .g_card_img_frame{top:55%; opacity:0; transition: 0.1s all ease;} #w a.g_ca_card_link .g_ca_card_bg:hover > .g_card_img_frame{top:40%; opacity:0; transition: 0.1s all ease;} a.g_ca_card_link .g_ca_card_bg:hover > .g_card_img_frame_hv{top:50%; opacity:1; transition: 0.2s all ease; animation: float 2s ease-in infinite;} #w a.g_ca_card_link .g_ca_card_bg:hover > .g_card_img_frame_hv{ top:45%; opacity:1; transition: 0.2s all ease; animation: float 2s ease-in infinite;} a.g_ca_card_link .g_ca_card_bg:hover > .g_card_img_frame_hv{ animation: float 6s ease-in-out infinite; -webkit-animation: float 6s ease-in-out infinite; } #w a.g_ca_card_link .g_ca_card_bg:hover > .g_card_img_frame_hv{animation: float 6s ease-in-out infinite;} } @media (min-width:0px) and (max-width:1500px){ a.g_card_link{margin:10px auto;} a.g_ca_card_link{margin:10px auto;} } @media (min-width:0px) and (max-width:575px){ a.g_card_link{width:160px; height:160px;} } @media (min-width:576px) and (max-width:759px){ a.g_card_link{width:180px; height:180px;} } @media (min-width:0px) and (max-width:676px){ a.g_ca_card_link{width:220px; height:160px;} a.g_ca_card_link .g_card_img_frame_hv .imgs {width:260px; height:200px;} a.g_ca_card_link .g_card_img_frame_hv .title {width:220px; height:160px;} a.g_ca_card_link .g_card_img_frame img{width:280px; height:200px;} a.g_ca_card_link .g_card_img_frame img:last-child{width:220px; height:160px;} } @media (min-width:760px) and (max-width:1500px) { a.g_card_link{width:210px; height:210px;} } @media (min-width:0px) and (max-width:991px) { .left_layer_2{width:241.5px; height:249px;} .left_layer_3{width:408px; height:430px; top:0;} .left_layer_4{width:128.5px; height:236px;} .right_layer_4{width:263px; height:282px;} } @media (min-width:1501px){ a.g_card_link{margin:10px;} a.g_card_link{width:230px; height:230px;} } /* ================================== BOARD & FLICKERS SECTION ================================== */ /* INDEX PAGE BOARD PRINT SNIPPET */ /* INDEX PAGE BOARD PRINT SNIPPET */ /* INDEX PAGE BOARD PRINT SNIPPET */ .board_section_wrapper{/*width:1500px; position:absolute;*/ text-align: center; margin:0.5em auto; padding:0.5em 0; } .index_board_wrapper{height:100%; display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: flex-start;} .index_board_article{max-width:490px; background:#161616; text-align: left; margin-bottom:8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom:1px solid rgba(223,221,255,0.15); border-right:1px solid rgba(223,221,255,0.15);} .index_board_title{height:60px; background:linear-gradient(to top, #082f41 40%, #26f7ff); margin-bottom: 8px; font-family: doh; text-shadow: 1px 1px 1px rgba(0,0,0,0.5); border-top-left-radius: 4px; border-top-right-radius: 4px; position: relative;} .index_board_title .bg{width:100%; height:60px; background:url(images/board_header_ptn_bg.png); background-position: top center; position:relative; opacity:0.4;} .index_board_title p{ margin-bottom:0; position: absolute; top: 50%; left: 20px; transform: translate(0%,-50%);} .index_board_title p img{} .index_board_title p img:before{content:"■"; width:6px; height:6px; display:inline-block; font-size:0.7em; color:aqua; /*position:relative; top:50%; left:0; transform: translate(-50%,0);*/} .print_list_wrapper {padding:0 5px;} .print_list_article li{padding:3px; border-bottom:1px solid rgba(228,228,228,0.15); transition:all 0.4s;} .print_list_article li:hover{background:rgba(5,5,5,1.00);} .print_list_article li:first-child{padding-top: 6px;} .print_list_article li:last-child{border-bottom:none; padding-bottom: 6px;} .print_list_article li a{width:auto; display:block; transition: 0.3s all ease; font-family: scdream; font-size:1em; color:rgba(221,221,221,1.00); text-decoration: none;} /* ==== PUBLIC BOARD ATTRIBUTES ==== */ /* ==== PUBLIC BOARD ATTRIBUTES ==== */ /* ==== PUBLIC BOARD ATTRIBUTES ==== */ .board-notice{height:100vh; overflow-y:auto; text-shadow:1px 1px 2px rgba(0, 0, 0, 0.8);} table.board-bg-global {} .board-bg-global thead {} .board-bg-global thead tr { /*border-bottom: 1px solid rgba(255,255,255,0.3);*/} .board-bg-global thead tr td {background: rgba(255,255,255,0.15); } .board-bg-global thead tr td:first-child {} .board-bg-global thead tr td:last-child {} .board-bg-global tbody {} .board-bg-global tbody tr {transition: all 0.4s;} .board-bg-global tbody tr:nth-child(odd) {} .board-bg-global tbody tr:nth-child(even) {} /* ==== .board-bg > 'list' ATTRIBUTES ==== */ .board-bg-list tbody tr { color:#EDEDED;} .board-bg-list tbody tr:nth-child(odd) {background:rgba(255,255,255,0.1);} .board-bg-list tbody tr:nth-child(even) {background:rgba(0,0,0,0.1);} .board-bg-list tbody tr:hover {background:rgba(255,255,255,0.8);} .board-bg-list tbody tr:hover td {color:#4C4C4C;} /* ==== .board-bg > 'read' ATTRIBUTES ==== */ .board-bg-read tbody tr { border-bottom: 1px solid rgba(255,255,255,0.3); } .board-bg-read tbody tr td { background:rgba(255,255,255,0.50); } .board-bg-read tbody tr:nth-child(odd) {} .board-bg-read tbody tr:nth-child(even) {} .board-bg-read tbody tr:hover {} /* ==== .board-bg > 'write' ATTRIBUTES ==== */ table.board-bg-write {} .board-bg-write thead {} .board-bg-write thead tr {} .board-bg-write thead tr td {}/*background: #005b6d;*/ .board-bg-write thead tr td:first-child {} .board-bg-write thead tr td:last-child {} .board-bg-write tbody {} .board-bg-write tbody tr {transition: all 0.4s;} .board-bg-write tbody tr td {background:rgba(255,255,255,0.3);}/*background:rgba(0,91,109,0.50);*/ .board-bg-write tbody tr:nth-child(odd) {} .board-bg-write tbody tr:nth-child(even) {} /* ==== .board-page > 'list' ATTRIBUTES ==== */ /* ==== .board-page > 'list' ATTRIBUTES ==== */ table.board-page-list {} .board-page-list {} .board-page-list thead {} .board-page-list thead tr {height: 46px;} .board-page-list thead tr td {text-align: center; font-weight: 800; letter-spacing: 30px; color:#fff; text-shadow: 2px 2px 1px rgba(0,0,0,0.4);} .board-page-list thead tr td:first-child {width:80%; min-width: 150px; max-width: 210px; font-size: 1.2em;} .board-page-list thead tr td:last-child {width:20%; min-width: 90px;} .board-page-list tbody {background:rgba(255,255,255,0.2);} .board-page-list tbody tr {} .board-page-list tbody tr:nth-child(odd) {} .board-page-list tbody tr:nth-child(even) {} .board-page-list tbody tr:hover {} .board-page-list tbody td {padding:5px 8px; font-size: 0.8em;} .board-page-list tbody td.title {width:80%; min-width: 100px; max-width: 120px;} .board-page-list tbody td.date {text-align: center; } .article-loop .title a {display:block;} .article-loop .title a:before{content:"▶"; display:inline-block; width:auto; margin:0 5px 0 0;} /* ==== .board-page > 'list2' ATTRIBUTES ==== */ /* ==== .board-page > 'list2' ATTRIBUTES ==== */ table.board-page-list2 {margin: 8px 0;} .board-page-list2 {} .board-page-list2 thead {} .board-page-list2 thead tr {height: 45px;} .board-page-list2 thead tr td {font-size: 1em; text-align: center; font-weight: 800; color:#fff; text-shadow: 2px 2px 1px rgba(0,0,0,0.4);} .board-page-list2 thead tr td:first-child {width:40px; min-width: 40px; max-width: 40px; letter-spacing: 0.2rem;} .board-page-list2 thead tr td:nth-child(2) {width:50px; min-width: 90px; letter-spacing: 1rem;} .board-page-list2 thead tr td:nth-child(3) {width:90px; min-width: 90px; max-width: 90px; letter-spacing: 0.5rem;} .board-page-list2 thead tr td:nth-child(4) {width:50px; min-width: 50px; letter-spacing: 0.2rem;} .board-page-list2 thead tr td:last-child {width:40px; min-width: 40px; letter-spacing: 0.2rem;} .board-page-list2 tbody {background:rgba(255,255,255,0.2);} .board-page-list2 tbody tr {} .board-page-list2 tbody tr:nth-child(odd) {} .board-page-list2 tbody tr:nth-child(even) {} .board-page-list2 tbody tr:hover {} .board-page-list2 tbody td {padding:5px 8px; font-size: 0.8em;} .board-page-list2 tbody tr:hover td { font-weight:800; } .board-page-list2 tbody td:first-child {text-align:center; width:50px; min-width: 50px; max-width: 50px;} .board-page-list2 tbody td:nth-child(2) {text-align:left; max-width: 90px;} .board-page-list2 tbody td:nth-child(3) {text-align:center; min-width: 90px; max-width: 90px;} .board-page-list2 tbody td:nth-child(4) {text-align:center;} .board-page-list2 tbody td:last-child {text-align:center; width:40px; min-width: 40px; max-width:40px;} .btn-remove-board svg {color:rgba(219,0,3,1.00); transition: color 0.5s;} .btn-remove-board:hover svg {color:rgba(166,30,32,1.00);} /* ==== .board-page > 'list3' ATTRIBUTES ==== */ /* ==== .board-page > 'list3' ATTRIBUTES ==== */ table.board-page-list3 {margin: 8px 0;} .board-page-list3 {} .board-page-list3 thead {} .board-page-list3 thead tr {height: 45px;} .board-page-list3 thead tr td {font-size: 1em; text-align: center; font-weight: 800; color:#fff; text-shadow: 2px 2px 1px rgba(0,0,0,0.4);} .board-page-list3 thead tr td:first-child {width:15%; min-width: 90px; max-width: 120px; letter-spacing: 0.2rem; } .board-page-list3 thead tr td:nth-child(2) {width:10%; min-width: 40px; max-width: 50px; letter-spacing: 0.5rem;} .board-page-list3 thead tr td:nth-child(3) {width:15%; min-width: 70px; max-width: 90px; letter-spacing: 0.5rem;} .board-page-list3 thead tr td:nth-child(4) {width:15%; min-width: 50px; letter-spacing: 0.2rem;} .board-page-list3 thead tr td:nth-child(5) {width:10%; min-width: 50px; letter-spacing: 0.2rem;} .board-page-list3 thead tr td:nth-child(6) {width:10%; min-width: 50px; letter-spacing: 0.2rem;} .board-page-list3 thead tr td:last-child {width:25%; min-width: 60px; letter-spacing: 0.2rem;} .board-page-list3 tbody {} .board-page-list3 tbody tr {} .board-page-list3 tbody tr:nth-child(odd) {} .board-page-list3 tbody tr:nth-child(even) {} .board-page-list3 tbody tr:hover {} .board-page-list3 tbody td {padding:5px 8px; font-size: 0.8em; text-align:center;} .board-page-list3 tbody tr:hover td {font-weight:800;} .board-page-list3 tbody td:first-child {} .board-page-list3 tbody td:nth-child(2) {} .board-page-list3 tbody td:nth-child(3) {} .board-page-list3 tbody td:nth-child(4) {} .board-page-list3 tbody td:nth-child(5) {} .board-page-list3 tbody td:nth-child(6) {} .board-page-list3 tbody td:last-child {} /* ==== .board-page > 'read' ATTRIBUTES ==== */ table.board-page-read {} .board-page-read {} .board-page-read thead {} .board-page-read thead tr {height: 46px;} .board-page-read thead tr td {padding:5px; font-weight: 800; color:#fff; text-shadow: 2px 2px 1px rgba(0,0,0,0.4);} .board-page-read thead tr td:first-child {padding-left:15px; width:80%; min-width: 130px; max-width: 170px; font-size: 1.1em; text-align: left;} .board-page-read thead tr td:last-child {padding:0 5px; width:20%; min-width: 100px; max-width:100px; font-size: 0.9em; text-align: center;} .board-page-read tbody {} .board-page-read tbody tr {} .board-page-read tbody tr:nth-child(odd) {} .board-page-read tbody tr:nth-child(even) {} .board-page-read tbody tr:hover {} .board-page-read tbody td {padding:5px 8px; font-size: 0.8em; color:#fff;} .board-page-read tbody td.title {} .board-page-read tbody td.date {text-align: center;} /* ==== .board-page > 'write' ATTRIBUTES ==== */ table.board-page-write {} .board-page-write {} .board-page-write thead {} .board-page-write thead tr {height: 46px;} .board-page-write thead tr td {padding:5px; font-weight: 800; color:#fff; text-shadow: 2px 2px 1px rgba(0,0,0,0.4);} .board-page-write thead tr td:first-child {padding-left:10px; width:66px; min-width: 66px!important; max-width: 66px!important; font-size: 1em; text-align: left;} .board-page-write thead tr td:nth-child(2) {width:100%; min-width: 90px; padding:0 10px; max-width:100px; font-size: 0.9em;} .board-write-title {width:100%; height:35px; min-width:80px; border-left: 0; border-right: 0; border-top: 0; padding:0 5px; outline: none; font-size:0.8em; font-weight: 800; color:#fff; background:none; text-shadow:1px 1px 2px rgba(0, 0, 0, 0.8);} .board-page-write thead tr td:nth-child(3) {width:120px; min-width: 120px; max-width:120px; font-size: 0.8em; text-align: center;} label #deposit-chk {vertical-align: middle;} input.deposit-chkbox { margin-right:5px; display:inline-block;} .board-page-write tbody {} .board-page-write tbody tr {} .board-page-write tbody tr:nth-child(odd) {} .board-page-write tbody tr:nth-child(even) {} .board-page-write tbody tr:hover {} .board-page-write tbody td {padding:5px 8px; font-size: 0.8em;} .board-page-write tbody td.article {text-align: center; } .board-write-textarea {width: 100%; height:100%; max-width: 1084px; max-height: 400px; background:rgba(255,255,255,0.20); padding:0.5em; overflow-x:hidden; overflow-y: auto; border:none; color:white; display:inline-block; outline: none; margin:0 auto; color:#fff; text-shadow:1px 1px 2px rgba(0, 0, 0, 0.8);} .board-write-textarea::placeholder { color:#EDEDED;} .board-msgs{} .board-msgs table{} .board-msgs table td{} .board-msgs table.list{} .board-msgs table.list td{word-break:keep-all;} .board-msgs table.list thead{} .board-msgs table.list thead tr{background-color:#ffffff10; border-bottom:1px solid #ffffff40;} .board-msgs table.list thead tr td{text-align:center; padding:0.825rem 0.5rem; font-weight:bold;} .board-msgs table.list thead tr td:first-child{} .board-msgs table.list thead tr td:last-child{} .board-msgs table.list thead tr td:nth-child(1){width:5%; min-width:40px; max-width:50px;} .board-msgs table.list thead tr td:nth-child(2){} .board-msgs table.list thead tr td:nth-child(3){width:10%; min-width:40px;} .board-msgs table.list thead tr td:nth-child(4){width:20%; min-width:40px; max-width:150px;} .board-msgs table.list thead tr td:nth-child(5){width:5%; min-width:40px; max-width:50px;} .board-msgs table.list tbody{} .board-msgs table.list tbody tr{border-bottom:1px solid #ffffff20;} .board-msgs table.list tbody tr:first-child{} .board-msgs table.list tbody tr:last-child{} .board-msgs table.list tbody tr:nth-child(odd){} .board-msgs table.list tbody tr:nth-child(even){background-color:#ffffff05;} .board-msgs table.list tbody tr:hover{background-color:#ffffff50;} .board-msgs table.list tbody tr:hover td{font-weight:bold;} .board-msgs table.list tbody tr:hover td.title{text-decoration:underline;} .board-msgs table.list tbody tr td{text-align:center; padding:0.5rem 0.25rem;} .board-msgs table.list tbody tr td.num{} .board-msgs table.list tbody tr td.title{text-align:left; padding-left:0.5rem;} .board-msgs table.list tbody tr td.title span.hand{} .board-msgs table.list tbody tr td.date{font-size:0.75rem;} .board-msgs table.list tbody tr td.status{font-size:0.75rem;} .board-msgs table.list tbody tr td.article-deletion{} .board-msgs table.read{} .board-msgs table.read td{} .board-msgs table.read thead{} .board-msgs table.read thead tr{border-bottom:1px solid #ffffff50;} .board-msgs table.read thead tr td{padding:0.5rem;} .board-msgs table.read thead tr td.title{background-color:#ffffff15; font-weight:bold;} .board-msgs table.read thead tr td.date{background-color:#ffffff30;} .board-msgs table.read tbody{} .board-msgs table.read tbody tr{} .board-msgs table.read tbody tr td{height:80vh; vertical-align:top; padding:0.825rem; background-color:#ffffff08;} .board-msgs table.list{} /* ==== .board-controller ==== */ /* ==== .board-controller ==== */ .board-controller {margin:10px 0;} .board-controller button {border:0;} .board-list-paging { width:auto; text-align: center; margin:8px auto;} .board-list-paging a {width:23px; height:23px; padding:0.3em; font-size: 0.9em; font-weight: 800; color:#fff; text-shadow: 2px 2px 1px rgba(0,0,0,0.4); background: none; margin:0 2px; display: inline-block; transition: all 0.5s; /* box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 3px 3px 1px rgba(0,0,0,0.2); */} .board-list-paging a:first-child {margin-right:5px!important;} .board-list-paging a:last-child {margin-left:5px!important;} .board-list-paging a:hover {color:#777; text-decoration:underline; background:none; } .board-list-tool {width:auto; height:auto; margin:0 auto; position:relative; display:block; text-align: center; padding:8px;} .apply_btn {font-size: 0.9em; font-weight: 800; color:#fff!important; text-shadow: 2px 2px 1px rgba(0,0,0,0.4); box-shadow: 0 1px 1px rgba(0,0,0,0.2), inset 2px 2px 1px rgba(0,0,0,0.2); transition: background 0.5s; padding:0.4em; border-radius: 30px; margin:5px; cursor:hand;} .apply_btn svg {display:inline-block; text-shadow: 2px 2px 1px rgba(0,0,0,0.4); } .apply_btn span {display:inline-block; width:auto; padding:0 5px;} .btn-prev, .btn-fwrd {width:120px; height:35px; position:absolute; background: rgba(255,255,255,0.3);} .btn-prev:hover, .btn-fwrd:hover {background: rgba(0,0,0,0.3);} .btn-prev {} .btn-fwrd {} .btn-list, .btn-edit, .btn-write {width:auto; height:auto; padding:10px; margin:5px; background:#04658a;} .btn-list:hover, .btn-edit:hover, .btn-write:hover {background:#043446;} .btn_red{background:rgba(185,0,3,1.00);} .btn_red:hover{background:rgba(105,0,1,1.00);} .border-stroke-01{width:100%; height:1px; background:#474747; margin:8px 0;} @media (min-width:0px) { } @media (min-width:0px) and (max-width:575px){ } @media (min-width:576px) and (max-width:991px) { } @media (min-width:992px){ } /* ==== 'modal > .mypage' SECTION ATTRIBUTES ==== */ .mypage-wrapper {} .mypage-wrapper ul.page-category {width:100%; /*max-width: 375px;*/ display:block; margin:0 auto; text-align: center; } .mypage-wrapper ul.page-category li {display:inline-block;} .mypage-submenu_bt a {width:80px; height:35px; background:#c9cdb2; color:#fff; font-size:0.8em; font-weight: 800; text-shadow:1px 1px 2px rgba(0,0,0,0.3); transition: background 0.5s; display:flex; align-items:center; justify-content:center;} .mypage-submenu_bt a:hover {background:#979d71;} .mypage-submenu_bt a:active {background:#979d71;} .mypage-submenu_bt a:focus {background:#979d71;} .mypage-headtitle {width:100%; height:100px;} .mypage-headtitle .head-section-wrapper {position:relative;} .mypage-headtitle .head-section-wrapper .title-wrapper {width:100%; height:45px;/* max-width:375px; */margin:0 auto;} .mypage-headtitle .head-section-wrapper .title-wrapper .title-bg {width:100%; height:45px; max-width:375px; background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0.5), rgba(0,0,0,0)); position: absolute; top:50%; right:50%; transform:translate(50%,0);} .mypage-headtitle .head-section-wrapper .title-wrapper .title-icon-bg { width:100px; height:100px; position: absolute; right:50%; transform:translate(50%,0);} .mypage_01 {background:url(images/mypage_01.png) no-repeat; background-size:56px 68px; background-position:center;} .mypage_02 {background:url(images/mypage_02.png) no-repeat; background-size:34px 62px; background-position:center;} .mypage_03 {background:url(images/mypage_03.png) no-repeat; background-size:80px 52px; background-position:center;} .mypage_04 {background:url(images/mypage_04.png) no-repeat; background-size:79px 66px; background-position:center;} .mypage-headtitle .head-section-wrapper .title-wrapper p {width:100%; height:45px;/* max-width:375px; */position: absolute; top:50%; /*right:50%; transform:translate(50%,0);*/ margin-top: 8px; color:#fff; font-size:1.2em; font-weight: 800; text-shadow:1px 2px 2px rgba(0,0,0,0.4); text-align: center;} table.points_rewards {} .points_rewards tbody {} .points_rewards tbody tr {} .points_rewards tbody tr td {font-weight: 800; color:#E1E1E1;} .points_rewards tbody tr td.title {font-size: 1em;} .points_avail {font-size:1.2em; padding:1.2rem;} .extra-info {font-size: 0.8em; color:#838383!important; text-align:right;} .extra-info span {width:100%;/* max-width:375px; */display:block; margin:0 auto;} .point_input_wrapper {height:70px; padding:0.5rem;} .point_input_container {width:100%;/* max-width:375px; */background:#53144B; margin:0 auto; position:relative;} input.points_value {width:100%; height:35px;/* max-width:375px; */border: none; background: #3B3B3B; padding: 0.5em; padding-right:40px; color:#fff; position:absolute; top:0; left:0;} input.points_value::placeholder {color:#9785a7; text-align: left; } .point_input_container span {width:40px; height:35px; position:absolute; top:0; right:0; color:#fff; text-align:center; padding:6px;} .dm-tool {} .tap_btn {font-size: 0.8em; padding:0.4em; border:none; border-top-left-radius: 4px; border-top-right-radius: 4px; color:#ECECEC; transition: all 0.5s;} .tap_btn:hover {color:#424242;} .btn_darkpurple {background:#28113d; transition: all 0.5s;} .btn_darkpurple:hover {background:#A36CD6;} table.mypage-datachart-board {} .mypage-datachart-board {color:#fff; text-align:center; font-weight:800;} .mypage-datachart-board thead {} .mypage-datachart-board thead tr {height:45px;} .mypage-datachart-board thead tr td {font-size: 1em;} .mypage-datachart-board tbody {} .mypage-datachart-board tbody tr {} .mypage-datachart-board tbody tr td{font-size: 0.9em} table.datachart-rolling {} .datachart-rolling {min-width: 800px;} .datachart-rolling tbody {} .datachart-rolling tbody tr {} .datachart-rolling tbody tr td {padding:6px 2px;} .page-wrapper_empty{} table.stat_user_table {width:100%; padding:0 15px; margin: 0 auto;} .stat_user_table thead {} .stat_user_table thead tr {} .stat_user_table thead tr td {padding:7px 10px; background:#002056; color:#2f1901; font-weight: 800; text-shadow:none;} .stat_user_table thead tr .header {} .stat_user_table tbody {} .stat_user_table tbody tr{background:rgba(0,0,0,0.2); border-bottom: 1px rgba(255,255,255,0.2) solid;} .stat_user_table tbody tr.border-bt {} .stat_user_table tbody tr th {width:110px; min-width:110px; padding:5px; color:#E1E1E1; background:#152221;} .stat_user_table tbody tr td { padding:5px; color:#E1E1E1;} .stat_user_table tbody .colone {width:6px; padding:0 2px; text-align: center;} .stat_user_table tbody tr td:last-child{ width:100%;} /*.stat_user_table .pw_val {width: 100%; display: table-cell!important; text-align: right!important;}*/ .stat_user_table .pw_val {width:100%; /*max-width: 375px;*/ display:table-cell; text-align:right; font-size: 0.6em; font-weight: 800;} .stat_user_table .pw_val span{display:block;} #val_error_mat, #val_error_lng {color:#d54545!important;} #val_granted {color:#45d578!important;} input.mypage_pw {width:100%; background:rgba(90,118,169,0.2); padding:8px; color:#fff; font-size:0.8em; font-weight: 800; border:0; outline:none; transition:0.2s all;} input.mypage_pw:focus{background:rgba(90,118,169,0.5);} input.mypage_pw::placeholder {color:#2D4164/*rgba(192,192,192,1.00)*/; font-size: 0.7em;} .btn_confirm_modal_mypage_2 {width:100px; height:40px; color:#6bc0b3; font-weight: 600; background:#093a41; padding:3px; margin:0.5em; box-shadow: 3px 3px 0px 0px #6cc0b3; border:1px solid #6cc0b3; outline:none; transition: all 0.5s;} .btn_confirm_modal_mypage_2:hover {color:#083940; background:#218d99; border:1px solid rgba(145,232,218,1.00);} @media (min-width:0px) { } @media (min-width:0px) and (max-width:575px){ } @media (min-width:576px) and (max-width:991px) { } @media (min-width:992px){ } /* ============= */ /* WIN_DATA_LOOP */ /* ============= */ a.win_print_link{} a.win_print_link:hover{} ul.wpl_lp_wrapper{display:flex; justify-content:space-between; flex-wrap:wrap; /*border-bottom:1px solid rgba(228,228,228,0.15);*/} ul.wpl_lp_wrapper li{border-bottom: none;} .wpl_lst_id{} .wpl_lst_m_value{text-align: right;} span.m_value{padding-right:4px; color:rgba(243,15,107,1.00);} .wpl_lst_date{align-items: flex-start; text-align: left;} .wpl_lst_bet{ text-align: center;} .wpl_lst_user{ text-align: right;} .wpl_lst_id, .wpl_lst_m_value {flex:50% 1 1;} .wpl_lst_date, .wpl_lst_bet, .wpl_lst_user{font-size:0.4em; flex:33% 1 1;} .uniemoji{width:auto;} .uniemoji,.link_article,.print_list_article .date{ display:inline-block;} @media (min-width:0px) { } @media (min-width:0px) and (max-width:575px){ } @media (min-width:576px) and (max-width:991px) { } @media (min-width:992px){ } /* ==== '.board-print' SECTION ATTRIBUTES ==== */ /* ==== '.board-print' SECTION ATTRIBUTES ==== */ .board-print {position:relative;} .board-print-wrapper { padding:15px 0;} .board-print-wrapper .chart-board-index {width:100%; max-width:1500px; margin:0 auto 18px;} .board-print-wrapper .chart-board-index .board-title {width:100%; height:50px; padding:0px 14px; overflow: hidden;} .chart-board-index .board-title .title {max-width:300px; width:100%; height:50px; position:relative; margin: 0 auto;} .chart-board-index .board-title .title .bg {max-width:300px; width:100%; height:25px; border-top-left-radius: 4px; border-top-right-radius: 4px; position:absolute; bottom:0; right:50%; transform: translate(50%,0);} .bigwin_rate .board-title .title .bg {background:#447481; border-top: 1px #aaacac solid; border-left: 1px #aaacac solid; border-right: 1px #aaacac solid; animation:bg-board-title-outerglow 2s ease infinite;} .bigwin_money .board-title .title .bg {background:#334e4b; border-top: 1px #7fc6be solid; border-left: 1px #9de0d7 solid; border-right: 1px #9de0d7 solid; animation:bg-board-title-outerglow 2s ease infinite;} .notice_print .board-title .title .bg {background:#334e4b; border-top: 1px #7fc6be solid; border-left: 1px #9de0d7 solid; border-right: 1px #9de0d7 solid; animation:bg-board-title-outerglow 2s ease infinite;} @keyframes bg-board-title-outerglow{ 0%{box-shadow: 0 -5px 10px 0 #9cd6ef;} 50%{box-shadow: 0 -5px 22px 0 #9cd6ef;} 100%{box-shadow: 0 -5px 10px 0 #9cd6ef;} } .chart-board-index .board-title .title p {min-width:150px; max-width: 200px; width:100%; height:50px; border-top-left-radius: 4px; border-top-right-radius: 4px; color:#fff; font-family:'doh'; font-size:1.2em; text-align: center; font-weight: 800; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); padding:0.5em; position:absolute; right:50%; transform: translate(50%,0);} .chart-board-index .board-title .title p img{max-width:25px;} .bigwin_rate .board-title .title p {background:linear-gradient(to bottom, #0a4d6b 0%,#72c8e6 55%,#154959 56%,#1384ae 100%); border-top: 1px #7fc6be solid; border-left: 1px #9de0d7 solid; border-right: 1px #9de0d7 solid; box-shadow:0 -7px 14px 0px #000;} .bigwin_money .board-title .title p {background:linear-gradient(to bottom, #0a6b62 0%,#3ae7c9 55%,#0e554e 56%,#0e554e 100%); border-top: 1px #ccfff9 solid; border-left: 1px #9de0d7 solid; border-right: 1px #9de0d7 solid; box-shadow:0 -7px 14px 0px #000;} .notice_print .board-title .title p {background:linear-gradient(to bottom, #0a6b62 0%,#3ae7c9 55%,#0e554e 56%,#0e554e 100%); border-top: 1px #ccfff9 solid; border-left: 1px #9de0d7 solid; border-right: 1px #9de0d7 solid; box-shadow:0 -7px 14px 0px #000;} .chart-board-index .board-contents { padding:2px; border-radius: 2px;} .bigwin_money .board-contents { background: #18544e; border: 1px #1b9988 solid;} .bigwin_rate .board-contents { background: #184254; border: 1px #82b7a9 solid;} .notice_print .board-contents { background: #18544e; border: 1px #1b9988 solid;} .bigwin_money .board-contents .board-bg-wrapper {width:100%; height:100%; background: #113d38; border-radius: 1px;} .bigwin_rate .board-contents .board-bg-wrapper {width:100%; height:100%; background: #234254; border-radius: 1px;} .notice_print .board-contents .board-bg-wrapper {width:100%; height:100%; background: #113d38; border-radius: 1px;} .chart-board-index .board-contents .table-datasheet { text-align: center; color:#fff;} .chart-board-index .board-contents table { width:100%; border-collapse: separate; border-spacing:0 0.1em; margin:0 auto;} .chart-board-index .board-contents table thead tr { width:100%;} .chart-board-index .board-contents table thead tr td { padding:0.5em; font-size:1.2em; font-weight:800;} .bigwin_money .board-contents table thead td {text-shadow: 0px 0px 1px #282828, 0px -1px 1px #282828, 0px -2px 1px #282828, 0px -3px 1px #282828, 0px 1px 1px #282828, 0px 2px 1px #282828, 0px 3px 1px #282828, 1px 0px 1px #282828, 1px 1px 1px #282828, 1px 2px 1px #282828, 1px 3px 1px #282828, 1px -1px 1px #282828, 1px -2px 1px #282828, 1px -3px 1px #282828, 2px 0px 1px #282828, 2px 1px 1px #282828, 2px 2px 1px #282828, 2px 3px 1px #282828, 2px -1px 1px #282828, 2px -2px 1px #282828, 2px -3px 1px #282828, 3px 0px 1px #282828, 3px 1px 1px #282828, 3px 2px 1px #282828, 3px 3px 1px #282828, 3px -1px 1px #282828, 3px -2px 1px #282828, 3px -3px 1px #282828, -1px 0px 1px #282828, -1px -1px 1px #282828, -1px -2px 1px #282828, -1px -3px 1px #282828, -1px 1px 1px #282828, -1px 2px 1px #282828, -1px 3px 1px #282828, -2px 0px 1px #282828, -2px -1px 1px #282828, -2px -2px 1px #282828, -2px -3px 1px #282828, -2px 1px 1px #282828, -2px 2px 1px #282828, -2px 3px 1px #282828, -3px -0px 1px #282828, -3px -1px 1px #282828, -3px -2px 1px #282828, -3px -3px 1px #282828, -3px 1px 1px #282828, -3px 2px 1px #282828, -3px 3px 1px #282828;} /*.bigwin_rate .board-contents table thead td {text-shadow: 0px 0px 1px #420a0c, 0px -1px 1px #420a0c, 0px -2px 1px #420a0c, 0px -3px 1px #420a0c, 0px 1px 1px #420a0c, 0px 2px 1px #420a0c, 0px 3px 1px #420a0c, 1px 0px 1px #420a0c, 1px 1px 1px #420a0c, 1px 2px 1px #420a0c, 1px 3px 1px #420a0c, 1px -1px 1px #420a0c, 1px -2px 1px #420a0c, 1px -3px 1px #420a0c, 2px 0px 1px #420a0c, 2px 1px 1px #420a0c, 2px 2px 1px #420a0c, 2px 3px 1px #420a0c, 2px -1px 1px #420a0c, 2px -2px 1px #420a0c, 2px -3px 1px #420a0c, 3px 0px 1px #420a0c, 3px 1px 1px #420a0c, 3px 2px 1px #420a0c, 3px 3px 1px #420a0c, 3px -1px 1px #420a0c, 3px -2px 1px #420a0c, 3px -3px 1px #420a0c, -1px 0px 1px #420a0c, -1px -1px 1px #420a0c, -1px -2px 1px #420a0c, -1px -3px 1px #420a0c, -1px 1px 1px #420a0c, -1px 2px 1px #420a0c, -1px 3px 1px #420a0c, -2px 0px 1px #420a0c, -2px -1px 1px #420a0c, -2px -2px 1px #420a0c, -2px -3px 1px #420a0c, -2px 1px 1px #420a0c, -2px 2px 1px #420a0c, -2px 3px 1px #420a0c, -3px -0px 1px #420a0c, -3px -1px 1px #420a0c, -3px -2px 1px #420a0c, -3px -3px 1px #420a0c, -3px 1px 1px #420a0c, -3px 2px 1px #420a0c, -3px 3px 1px #420a0c;}*/ .notice_print .board-contents table thead td {text-shadow: 0px 0px 1px #4e4e4e, 0px -1px 1px #4e4e4e, 0px -2px 1px #4e4e4e, 0px -3px 1px #4e4e4e, 0px 1px 1px #4e4e4e, 0px 2px 1px #4e4e4e, 0px 3px 1px #4e4e4e, 1px 0px 1px #4e4e4e, 1px 1px 1px #4e4e4e, 1px 2px 1px #4e4e4e, 1px 3px 1px #4e4e4e, 1px -1px 1px #4e4e4e, 1px -2px 1px #4e4e4e, 1px -3px 1px #4e4e4e, 2px 0px 1px #4e4e4e, 2px 1px 1px #4e4e4e, 2px 2px 1px #4e4e4e, 2px 3px 1px #4e4e4e, 2px -1px 1px #4e4e4e, 2px -2px 1px #4e4e4e, 2px -3px 1px #4e4e4e, 3px 0px 1px #4e4e4e, 3px 1px 1px #4e4e4e, 3px 2px 1px #4e4e4e, 3px 3px 1px #4e4e4e, 3px -1px 1px #4e4e4e, 3px -2px 1px #4e4e4e, 3px -3px 1px #4e4e4e, -1px 0px 1px #4e4e4e, -1px -1px 1px #4e4e4e, -1px -2px 1px #4e4e4e, -1px -3px 1px #4e4e4e, -1px 1px 1px #4e4e4e, -1px 2px 1px #4e4e4e, -1px 3px 1px #4e4e4e, -2px 0px 1px #4e4e4e, -2px -1px 1px #4e4e4e, -2px -2px 1px #4e4e4e, -2px -3px 1px #4e4e4e, -2px 1px 1px #4e4e4e, -2px 2px 1px #4e4e4e, -2px 3px 1px #4e4e4e, -3px -0px 1px #4e4e4e, -3px -1px 1px #4e4e4e, -3px -2px 1px #4e4e4e, -3px -3px 1px #4e4e4e, -3px 1px 1px #4e4e4e, -3px 2px 1px #4e4e4e, -3px 3px 1px #4e4e4e;} @media (min-width:0px) and (max-width:575px){ .chart-board-index .board-contents table tbody { font-size:12px;} } @media (min-width:576px) and (max-width:1199px) { .chart-board-index .board-contents table tbody { font-size:calc(13px + (18 - 13) * ((100vw - 767px) / (767 - 300)));} } @media (min-width:1200px) { .chart-board-index .board-contents table tbody { font-size:1rem;} } tbody.chart-board-index .board-contents table tbody tr { width:100%; background:rgba(255,255,255,0.1);} .chart-board-index .board-contents table tbody tr:nth-child(odd) {background:#17354d; transition: all 1s;} .chart-board-index .board-contents table tbody tr:nth-child(even) {background:#1e3843; transition: all 1s;} .chart-board-index .board-contents table tbody tr:hover {background:rgba(0,0,0,0.3); font-weight: 700;} .chart-board-index .board-contents table tbody tr {/*margin:14px 0px;*/ display:table-row; flex-flow: wrap; } .chart-board-index .board-contents table tbody tr td { padding:0.5em; display: table-cell; } .chart-board-index .board-contents table tbody tr td {} .chart-board-index .board-contents table tbody tr td:first-child {width:10%; order:1; } .chart-board-index .board-contents table tbody tr td:nth-child(2) {width:20%; order:4; } .chart-board-index .board-contents table tbody tr td:nth-child(3) {width:10%; order:2; } .chart-board-index .board-contents table tbody tr td:nth-child(4) {width:20%; order:5; } .chart-board-index .board-contents table tbody tr td:nth-child(5) {width:20%; order:3; } tbody.board_print_index {} tbody.board_print_index tr { font-size: 12px;} tbody.board_print_index tr td:first-child { width:1%!important; text-align:center;} tbody.board_print_index tr td:nth-child(2) { min-width:100px; max-width: 130px; width:100%; text-align:left;} tbody.board_print_index tr td:last-child { min-width: 80px; max-width: 180px; width: 100%; text-align:center;} .board_print_index tr:odd {background:#0f2d40!important;} .board_print_index tr:even {background:#273e4b!important;} /* ============================== EVENT_BOARD_SUBPAGE SECTION ============================== */ /* ================================== */ /* 'event_board_list_subpage' SECTION */ /* ================================== */ .event_board_wrapper{} .event_page_data_wrapper{} .event_page_dataloop{max-width: 800px; border-bottom:1px solid #434343; margin:0 auto 13px auto;} .event_page_dataloop:last-child{border-bottom:none;} .event_page_dataloop#event_on{} .event_page_dataloop#event_off{} a.event_page_datalink{display:block; display:flex; transition:all 0.2s;} a.event_page_datalink:hover{} .event_page_ul{display:flex; flex-direction: row; justify-content: space-evenly; align-content: center; align-items: flex-start; flex-wrap: nowrap;} ul.event_page_ul li.img_thmn{width:100%; max-width: 160px; padding:5px; margin:0 5px 5px 0; border:1px solid #535353;} ul.event_page_ul li.img_thmn img{width:100%;} ul.event_page_ul li.article{width:100%;} ul.event_page_ul li.article ul.contents{display:flex; flex-direction: column; justify-content: flex-start;} ul.event_page_ul li.article ul.contents li.title{background: #212121; padding: 8px; border-bottom: 1px solid #4D4D4D; display: flex; align-items: center; font-size:1.2em; font-weight: bold;} ul.event_page_ul li.article ul.contents li.title span.event_status{font-size:0.7em; font-weight:bold; margin-left:5px;} ul.event_page_ul li.article ul.contents li.title span#ongoing{} ul.event_page_ul li.article ul.contents li.date{color: #b6b6b6; font-size:0.5em; text-align: right; padding: 5px;} ul.event_page_ul li.article ul.contents li.article_inside{ color:#CDCDCD; font-size: 0.8em;} ul.event_page_ul li.article ul.contents li.article_inside p{background:rgb(83 83 83 / 30%); padding:5px; min-height:80px;} ul.event_page_ul li.more_link{text-align: right; font-size: 0.7em; transition:0.2s all;} ul.event_page_ul li.more_link:hover{color:#333333; font-weight:bold; text-decoration: underline;} .event_page_dataloop#event_on .event_page_ul li.img_thmn{} .event_page_dataloop#event_on .event_page_ul li.img_thmn img{} .event_page_dataloop#event_on .event_page_ul li.article{} .event_page_dataloop#event_on .event_page_ul li.article ul.contents{} .event_page_dataloop#event_on .event_page_ul li.article ul.contents li.title{transition:0.2s all;} .event_page_dataloop#event_on .event_page_ul li.article ul.contents li.title:hover{color:#6E6E6E;} .event_page_dataloop#event_on .event_page_ul li.article ul.contents li.title span.event_status{background:#D02F6B;} .event_page_dataloop#event_on .event_page_ul li.article ul.contents li.title span#ongoing{} .event_page_dataloop#event_on .event_page_ul li.article ul.contents li.date{} .event_page_dataloop#event_on .event_page_ul li.article ul.contents li.article_inside{transition:0.2s all;} .event_page_dataloop#event_on .event_page_ul li.article ul.contents li.article_inside:hover{color:#414141;} .event_page_dataloop#event_on .event_page_ul li.article ul.contents li.article_inside p{transition:0.2s all;} .event_page_dataloop#event_on .event_page_ul li.article ul.contents li.article_inside p:hover{background:rgba(37,37,37,0.4); font-weight:bold; text-decoration:underline;} .event_page_dataloop#event_on .event_page_ul li.more_link{transition:0.2s all;} .event_page_dataloop#event_off{transition:0.2s all;} .event_page_dataloop#event_off .event_page_ul li.img_thmn{} .event_page_dataloop#event_off .event_page_ul li.img_thmn img{filter: grayscale(80%); transition:0.2s all;} .event_page_dataloop#event_off .event_page_ul li.img_thmn img:hover{filter:none;} .event_page_dataloop#event_off .event_page_ul li.article{} .event_page_dataloop#event_off .event_page_ul li.article ul.contents{} .event_page_dataloop#event_off .event_page_ul li.article ul.contents li.title{color:#6E6E6E; transition:0.2s all;} .event_page_dataloop#event_off .event_page_ul li.article ul.contents li.title:hover{color:#fff;} .event_page_dataloop#event_off .event_page_ul li.article ul.contents li.title span.event_status{background: #1354D7; color: #1f1f1f; transition: 0.2s all;} .event_page_dataloop#event_off .event_page_ul li.article ul.contents li.title span#ongoing{} .event_page_dataloop#event_off .event_page_ul li.article ul.contents li.date{} .event_page_dataloop#event_off .event_page_ul li.article ul.contents li.article_inside{ transition:0.2s all;} .event_page_dataloop#event_off .event_page_ul li.article ul.contents li.article_inside p{color:#7b7b7b; transition:0.2s all;} .event_page_dataloop#event_off .event_page_ul li.more_link{transition:0.2s all;} .event_page_dataloop#event_off .event_page_ul li.article ul.contents li.article_inside:hover, .event_page_dataloop#event_off .event_page_ul li.article ul.contents li.article_inside p:hover, .event_page_dataloop#event_off .event_page_ul li.more_link:hover{filter:none; font-weight:bold; text-decoration:underline;} .event_page_dataloop#event_off .event_page_ul li.article ul.contents li.article_inside p:hover{ background:rgba(27,27,27,0.4);} @media (min-width:0px) { } @media (min-width:0px) and (max-width:575px){ } @media (min-width:576px) and (max-width:991px) { } @media (min-width:992px){ } /* ================================== CUSTOMER CENTER SECTION ================================== */ .cs_section_wrapper{/*max-width:1903px;*/ width:100%; } /* ============= */ /* NOTICE BAR SECTION (MARQUEE PROGRAM) */ /* ============= */ @media (min-width:0px) { .noticebar_wrapper{display:block;} .marquee_wrapper{height:50px; background:linear-gradient(to bottom, #653e07, #b97e2b, #653e07);} .marquee_container{color:#ededed;} .marquee_rolling{width:100%; display:table;} .marquee_rolling > li{display:table-cell; height:50px; width:90%;} .marquee_rolling .title{width:100px; height:50px; display:table;} .marquee_rolling .title p{width:100%; height:100%; margin:0; display:table-cell!important; vertical-align: middle; font-family:doh; text-align:center;} .marquee_rolling .contents{width:100%; height:50px; display:table-cell; overflow-x:hidden; padding-right:20px; vertical-align:middle;} .marquee_rolling .title p, .marquee_rolling .contents .wrapper {display:block; width:auto;} .marquee_rolling .contents .wrapper .ul{display:block; width:100%; width:100%;} .marquee_rolling .contents .wrapper .ul li{width:100%; display:table-row;} .marquee_rolling .contents .wrapper .ul li p{width:auto; /*overflow-x: hidden;*/ vertical-align: middle; font-family:scdream; font-size:12pt; font-weight:500;} .marquee_rolling .contents .wrapper{width:100%; height:26px; display:block; /*overflow:visible!important;*/} .marquee_contents {} } @media (min-width:0px) and (max-width:575px){ } @media (min-width:576px) and (max-width:991px) { } @media (min-width:992px){ } /* ============= */ /* CUSTOMER CENTER SECTION */ /* ============= */ @media (min-width:0px) { .cs_page_wrapper{/*max-width:1903px;*/ width:100%; height:100%; position:relative; background:linear-gradient(#282828, #3a3a3a, #282828);} .cs_page_wrapper .bg_ptn{/*max-width:1903px;*/ width:100%; height:100%; position:absolute; background:url(images/cs_bg_matte.png); background-position: top center; background-size: 1903px 280px; background-repeat:repeat; opacity: 0.3; z-index:200;} .cs_page_wrapper .contents_wrapper{max-width:1320px; width:100%; margin:0 auto;} .cs_page_wrapper .title{max-width:400px; width:100%; margin:0; z-index:202;} .cs_page_wrapper .title li:first-child{height:60px; background:#432009; position:relative; border-bottom-left-radius: 17px; border-bottom-right-radius: 17px;} .cs_page_wrapper .title li:last-child{height:220px; position:relative; overflow:hidden;} .cs_page_wrapper .title li:last-child img{width:100%;} .cs_page_wrapper .title li:first-child img{position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);} .cs_page_wrapper .title li:last-child img{animation: floating1 0.7s infinite;} .cs_menu{margin:0; display:flex; justify-content: flex-start; flex-direction: row; flex-wrap: wrap; align-content: space-around; align-items: flex-start; z-index:202;} .cs_menu li{width:50%; padding:1em 3.5em; transition:all 0.2s;} .cs_menu li:hover{font-size:95%;} .cs_menu li p{margin:0;} .cs_menu li p:first-child{font-family:'bnt'; font-size:3em; color:#ededed;} .cs_menu li p:nth-child(2){font-family:'scdream'; font-size:1.4em; color:#bdbdbd; font-weight: 500;} .cs_menu li a{text-decoration: none;} } @media (min-width:0px) and (max-width:991px){ .cs_page_wrapper{} .cs_page_wrapper .contents_wrapper{padding:0 5px; display:flex; align-items: center; justify-content: space-around; flex-direction: column;} .cs_page_wrapper .title::after {content:""; width:100%; height:1px; display:block; background:linear-gradient(to right, rgba(0,0,0,0) 0%, black 20%, #6C704D 30%, white 50% ,#6C704D 70%, black 80%, rgba(0,0,0,0) 100%);} .cs_menu{padding:0;} .cs_menu li{width:100%; margin: 5px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.4);} .cs_menu li p:first-child{font-size:2.4em;} .cs_menu li p:nth-child(2){font-size:1em;} } @media (min-width:992px) and (max-width:1320px) { .cs_page_wrapper .contents_wrapper{padding:0 5px;} .cs_page_wrapper .title li:last-child{height:220px; position:relative; overflow:visible;} .cs_menu{padding-left:0em; } .cs_menu li{} } @media (min-width:992px){ .cs_page_wrapper{/*max-height:280px;*/} .cs_page_wrapper .bg_ptn{/*max-height:280px;*/} .cs_page_wrapper .contents_wrapper{padding:0 5px; display:flex; align-items: flex-start; justify-content: space-around;} } @media (min-width:1184px){ .cs_page_wrapper .title li:last-child{/* max-width:400px; width:400px; */overflow:hidden;} } /* ================================== FOOTER SECTION ================================== */ .company_symbol_wrapper{/*max-width:1903px;*/ width:100%; background:#151515; display:block; padding:2em 0.8em;} .company_ci_lst{max-width:1320px; width:100%; display: flex; flex-wrap: wrap; justify-content:space-evenly; align-items:center; margin:0 auto;} .company_ci_lst li{width:98px; height:48px; display:inline-flex; align-items: center;} .company_ci_lst li img{width:100%; height:100%; max-width:98px; max-height:48px; display:inline-block;} .copyright{height:auto; min-height:85px; background:#000; border-bottom: 18px solid #230d15; display:block; position:relative; padding:10px 3px;} .copyright .contents{color:#434343; font-size:0.8em; font-family:'SCDream';} .copyright .contents p{width:auto; height:auto; display:block; text-align:center; position:relative; transform:translate(0%,50%);} @media (min-width:0px) { } @media (min-width:0px) and (max-width:575px){ } @media (min-width:576px) and (max-width:991px) { } @media (min-width:992px){ } /* ================================== MODALS ================================== */ .modal-content{background-color:rgba(0, 0, 0, 0.8); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); box-shadow:0px 0px 0.5rem #000000;} .modal-dialog{background-color:initial;} .offcanvas-end{display:none;} .offcanvas.show{display:flex; visibility:visible;} .sectionWrapperloginNav .offcanvas.show{background:#00000040;} .sectionWrapperloginNav .offcanvas-backdrop.show{backdrop-filter:blur(8px);} /* ==== MODAL ATTRIBUTES ==== */ .iframe-body {background:transparent; overflow:hidden;} .iframe-body .tab-content{height:calc(100vh - 9vh); padding-bottom:4rem; overflow-y:auto;} .rightspace-closebutton .close{display:flex; justify-content:center; align-items:center;} .gamelist > .tablist{display:flex; flex-wrap:wrap; justify-content: flex-end;} .gamelist > .tablist > button, .gamelist > .tablist > div{margin:0.25rem;} .search-tab{/*position: relative; width:100%; padding:0.25rem;*/ display:flex;} .search-tab > .btn{} .search-tab .title{float:left;} .search-tab .title i{} .search-tab .title i .bi-search{} .search-tab .title span{} .search-tab .search-form{padding:0 0 0 0.5rem; background-color: #ffffff10; /*position:absolute; top:39px; left:0;*/ display: none; flex-wrap:nowrap; justify-content: flex-start; align-items: center; opacity: 0; visibility: hidden; } .search-tab .search-form .wrapper{display: flex;} .search-tab .search-form input{} .search-tab .search-form .func{width:max-content; padding:0.25rem; background-color: #725b8e; padding:0 0.5rem;} .search-tab .search-form .func button{ } .search-tab .search-form .func:hover{background-color:#6a5c7c;} .search-tab.active > .btn{ color: var(--bs-btn-hover-color); background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); } .search-tab.active .search-form{display:flex; opacity: 1; visibility: visible;} .shd div[role='tablist'], .iframe-container div[role='tablist']{background:#ffffff30; padding:0.25rem; display:flex; flex-wrap:wrap; justify-content: flex-end; position:sticky; top:0; z-index: 10;} .shd div[role='tablist'] button, .shd div[role='tablist'] .search-tab, .iframe-container div[role='tablist'] button, .iframe-container div[role='tablist'] .search-tab{box-shadow:2px 2px 4px #00000095;} .shd div[role='tablist'].sticky, .iframe-container div[role='tablist'].sticky{background-color: #00000070;} .shd div[role='tablist'] button, .iframe-container div[role='tablist'] > button{margin:0.25rem; border:1px solid #ffffff20;} .shd div[role='tablist'] button:hover, .shd div[role='tablist'] .search-tab:hover > .btn, .iframe-container div[role='tablist'] > button:hover, .iframe-container div[role='tablist'] .search-tab:hover > .btn{border:1px solid #ffffff50;} .shd div[role='tablist'] button.active, .shd div[role='tablist'] .search-tab.active > .btn, .iframe-container div[role='tablist'] > button.active, .iframe-container div[role='tablist'] .search-tab.active > .btn{border:1px solid #ffffff;} .search-wrapper{display:flex; flex-wrap:wrap; justify-content: center; align-items: center;} /* .search-tab */ .search-tab{position: relative; /*width:100%; padding:0.25rem;*/ display:flex;} .search-tab *{transition:0.2s all;} .search-tab > .btn{} .search-tab .title{float:left;} .search-tab .title i{} .search-tab .title i .bi-search{} .search-tab .title span{} .search-tab .search-form{padding:0.25rem; background-color: #6d6d6d; border:1px solid #949494; position:absolute; top:0; right:0; display: flex; flex-wrap:nowrap; justify-content: flex-start; align-items: center; opacity: 0; visibility: hidden; } .search-tab .search-form .wrapper{display: flex;} .search-tab .search-form input{} .search-tab .search-form .func{width:max-content; padding:0.25rem; padding:0 0.5rem; background-color: #5b788e; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; } .search-tab .search-form .func button{ } .search-tab .search-form .func:hover{background-color:#395d8d;} .search-tab.active > .btn{ color: var(--bs-btn-hover-color); background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); } .search-tab.active .search-form{opacity: 1; z-index:10; visibility: visible; top:46px; box-shadow:0px 0px 1.1rem #ffffff90, 2px 2px 2px #000000;} @media (min-width:0px) { .shd div[role='tablist'] button, .iframe-container div[role='tablist'] > button, .shd .search-tab .title{font-size:0.7rem; padding:0.6rem;} } @media (min-width: 375px) { } @media (min-width: 575px) { .shd div[role='tablist'] button, .iframe-container div[role='tablist'] > button, .shd .search-tab .title{font-size:0.8rem; padding:0.7rem;} } @media (min-width: 768px) { .navbar-expand-md .offcanvas{display:flex;} .shd div[role='tablist'] button, .iframe-container div[role='tablist'] > button, .shd div[role='tablist'] .search-tab .title{font-size:0.9rem;} } @media (min-width: 992px) { } @media (min-width: 1200px) { } .frm_input {width:100%; height:45px; min-width:100px; padding:3px 10px; margin:3px 0px; line-height:40px; color:#fff; font-weight: 800; background:#0a223a; border:0;} .frm_input:focus {background:#0a223c;} .btm_btn_align {text-align: center; padding:20px 0;} .btn_iframe {width: auto; line-height: 40px; height: 50px; padding: 0.5em; text-align: center; font-weight: bold; border: 0; text-align: center; color:#fff; text-shadow: 2px 2px 1px rgba(0,0,0,0.2);} @media (min-width:0px) { } @media (min-width:0px) and (max-width:575px){ } @media (min-width:576px) and (max-width:991px) { } @media (min-width:992px){ } /* ==== 'modal > .signin' SECTION ATTRIBUTES ==== */ .signin {} ul.signin-frm {max-width:250px; margin:0 auto; padding:10px 0;} ul.signin-frm li {padding:5px 0;} ul.signin-frm .title { color:#fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.5); font-weight:800;} .idsave { padding:0 5px; text-align: right;} .login-checkbox {-webkit-appearance: none; width:20px; height:20px; background-color:#76578f; border-radius: 3px; border:1px #421964 solid; display:inline-block; margin-right:6px; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 3px 3px 1px rgba(0,0,0,0.05); vertical-align: middle;position:relative;} .login-checkbox:active, .login-checkbox:checked:active {box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);} .login-checkbox:checked { background-color:#3B2B48; border: 1px solid #adb8c0; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 3px 3px 1px rgba(0,0,0,0.05); color: #99a1a7;} .login-checkbox:checked:after {content: '\2714'; position: absolute; top: 0px; left: 3px; color: #000; font-size: 14px; display: inline-block;} @media (min-width:0px) { } @media (min-width:0px) and (max-width:575px){ } @media (min-width:576px) and (max-width:991px) { } @media (min-width:992px){ } /* ==== 'modal > .signup' SECTION ATTRIBUTES ==== */ .signup {} .signup-frm {} ul.signup-frm {max-width: 375px; margin:0 auto; padding:10px 0;} /*ul.signup-frm li {position:relative; align-items: center;}*/ .signup-frm div > div {display: flex; align-items: center;} .signup-frm .title {display: flex; align-items: center; justify-content: center; font-weight:bold;} .signup-frm > div > .extra_info {padding:0.2em 5px; color:#dadada; font-size: 10px; padding:0 0 5px; line-height: 1.4em;} .signup-frm > div > .extra_info > .frm_info {display:flex;} .signup-frm select {color:#A9A9A9;} .signup-frm select option {height:45px;} ul.signup-frm button {height:45px; padding:0 5px; margin:3px 0px; font-weight:800; border:0;} .btn_frmline {width: 110px; height: 44px; background:#0a223a; border:none; position:relative; right:0; align-items: center; justify-content: center; vertical-align: top; color:#A9A9A9; font-size:0.8em; font-weight:bold; line-height:20px;} @media (min-width:0px) { } @media (min-width:0px) and (max-width:575px){ } @media (min-width:576px) and (max-width:991px) { } @media (min-width:992px){ } /* '.banking' SECTION === */ /* '.banking' SECTION === */ /* '.banking' SECTION === */ .despoite_wrapper{} .banking{} .banking .row{ padding:1px;} .banking .row > div{ padding:0.5rem;} .banking .title{display:flex; flex-wrap: wrap; justify-content: center; align-items: center; background-color: #ffffff05; font-weight: bold; } .banking .value{} .banking .row:first-child .value{display:flex; flex-wrap:wrap;} .banking input{width:100%; background-color:#00000040; color:#ffffff; box-shadow:inset 0px 0px 20px #00000095, 2px 2px 5px #00000095; border:1px solid #ffffff20;} .banking input::placeholder{} .banking input:read-only{width:100%; background-color:#00000040; color:#ffffff; box-shadow:inset 0px 0px 20px #00000095, 2px 2px 5px #00000095; border:1px solid #ffffff20;} .banking .value .extra_info{width:auto; font-size: 0.8em; text-align: right; padding:0.25rem 0.5rem; display:flex; align-items:center;} .banking .value .money_value_btn_set{width:100%; padding:0.5rem 0.1rem; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center;} .banking .value .money_value_btn_set button{margin-right:0.25rem; padding:0.5rem 0.25rem; font-size:0.825rem; font-weight:500; box-shadow:inset 0px 0px 15px #00000095, 2px 2px 3px #00000099;} .banking .value .money_value_btn_set button:last-child{margin-right:initial;} .banking .value .money_value_btn_set button:hover{box-shadow:inset 0px 0px 15px #00000095, 2px 2px 3px #00000099, inset 1px 1px 2px #00000090; font-weight:normal;} .banking .article{font-size: 0.9em;} .banking .article p{} .banking .account {padding:0.5rem; text-align: center;} .btn-wrap {display: flex; flex-wrap:wrap; justify-content: center; align-items: center;} .btn-wrap > button{margin:0.25rem;} div[role='tablist'] button.active:after{width:auto; height:auto; padding:0.25rem; font-size:calc(1.3rem + 0.6vw); font-weight:500; line-height: 1.2; position:absolute; top:50%; left:0.25rem; transform:translate(0, -50%);} div[role='tablist'] button[data-bs-target='#deposit_wrapper'].active:after{content:'입금신청';} div[role='tablist'] button[data-bs-target='#withdraw_wrapper'].active:after{content:'출금신청';} div[role='tablist'] button[data-bs-target='#transactionHistory'].active:after{content:'입출금내역';} @media (min-width: 0px) and (max-width: 765px) { .banking .title{justify-content: flex-start!important;} } @media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { } /* '.transactionHistory' SECTION === */ /* '.transactionHistory' SECTION === */ /* '.transactionHistory' SECTION === */ .transactionHistory{padding-top:1rem;} @media (min-width: 0px){ .transactionHistory .wrapper{} .transactionHistory .wrapper table{} .transactionHistory table{} .transactionHistory table td{word-break:keep-all;} .transactionHistory table thead{} .transactionHistory table thead tr{color:#ffffff; font-weight:bold; background-color:#ffffff40;} .transactionHistory table thead tr td{align-self:center; text-align: center; padding:0.5rem 0.25rem;} .transactionHistory table thead tr td.date{width:20%;} .transactionHistory table thead tr td.type{width:10%;} .transactionHistory table thead tr td.gameTitle{width:20%;} .transactionHistory table thead tr td.value{width:35%;} .transactionHistory table thead tr td.status{width:15%;} .transactionHistory table tbody{} .transactionHistory table tbody tr{border-bottom:1px solid #ffffff30;} .transactionHistory table tbody tr:nth-child(odd){background-color: #ffffff10;} .transactionHistory table tbody tr:nth-child(even){background-color: #ffffff05;} .transactionHistory table tbody tr:last-child{border-bottom:unset;} .transactionHistory table tbody tr:last-child > td{border-bottom:unset;} .transactionHistory table tbody tr:hover{background-color: #ffffff30; border-bottom:1px solid #ffffff50;} .transactionHistory table tbody tr:hover td{color:#ffffff; font-weight:bold;} .transactionHistory table tbody tr td{vertical-align:middle; padding:0.5rem 0.25rem; color:#ffffff90;} .transactionHistory table td.date{} .transactionHistory table td.type{} .transactionHistory table td.gameTitle{} .transactionHistory table td.value{} .transactionHistory table td.status{} .transactionHistory table td.status.denied{color:#da1616;} .transactionHistory table td.status.granted{color:#16da57;} } @media (min-width: 0px) and (max-width: 768px) { .transactionHistory table thead tr td{font-size:calc(0.8rem + 0.1vw);} .transactionHistory table tbody tr td.date{font-size:0.6rem;} .transactionHistory table tbody tr td{font-size:0.7rem;} } @media (min-width: 768px) { .transactionHistory table thead tr td{font-size:0.9rem;} .transactionHistory table tbody tr td{font-size:0.9rem;} } @media (min-width: 992px) { .transactionHistory table thead tr td{font-size:1.1rem;} .transactionHistory table tbody tr td{font-size:1rem;} } @media (min-width: 1200px) { } /* ==== 'modal > .deposit_wrapper' SECTION ATTRIBUTES ==== */ .bnk_frame{padding-bottom: 20px;} /*.deposit_wrapper, .withdraw_wrapper {max-width:700px; width:100%; padding:0.5em 0; border-bottom:1px solid rgba(255, 255, 255, 0.3);}*/ /* .banking {margin:0 auto; font-weight:800;} .banking > div {margin:0.25rem 0!important;} .banking .title {color:#fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); padding:0.5rem 0 0.25rem 0;} .banking .value input {width:100%; height:40px; padding:0.8em; font-weight:800; text-shadow: 1px 1px 2px rgba(0,0,0,0.4); border:none; outline:none;} .banking_value {color:#fff; background:#34280e; padding:5px; transition:all 0.2s;} .banking_value:focus{background:#413C33;} .banking_value::placeholder {color:#CBCBCB;} .banking_value:read-only { color:rgba(203,203,203,1.00);} .banking_query {color:#fff; font-size:1em; background:#af9763; padding:5px;} .banking_query::placeholder {color:#E5E5E5!important;} .banking .extra_info { font-size:10px; color:#fff; font-weight:normal; padding:5px 5px 0; text-align: right;} .banking .money_value_btn_set {text-align: center; display: flex; align-items: center; justify-content: space-evenly;} .btn_money_value {width:56px; height:50px; margin:5px; color:#fff; font-size:0.8em; font-weight:800; text-shadow: 1px 1px 2px rgba(0,0,0,0.4); outline:none; border:none; transition:background 0.5s;} .banking .article {padding-bottom: 0.5em; border-bottom: 1px thin #949494; text-align: left; color:#fff; font-size: 0.8em; font-weight: 500; padding:0.8em 1em; line-height: 1.8; background:#364243;} .banking .article p {text-indent: -1em; padding:0 0.5em 0 1em; margin:0;} .banking .account {text-align: center; color:#fff; padding:1em 0.8em;} .banking .buttons {text-align: center; padding:10px 5px;} .banking .buttons button {width:110px; height:50px; padding:5px; margin-top:6px; color:#fff; font-size:1em; font-weight:800; text-shadow: 1px 1px 2px rgba(0,0,0,0.4); box-shadow: 2px 2px 1px rgba(0,0,0,0.2) inset 2px 2px 1px rgba(0,0,0,0.3); outline:none; border:none; transition:all 0.5s;} .banking .buttons button:hover {box-shadow: inset 2px 2px 1px rgba(0,0,0,0.3); font-weight:normal;} @media (min-width:0px) { } @media (min-width:0px) and (max-width:575px){ } @media (min-width:576px) and (max-width:991px) { } @media (min-width:992px){ }*/ /* ================================ */ /* ==== COLOR PALETTE ==== */ /* ==== COLOR PALETTE ==== */ /* ==== COLOR PALETTE ==== */ /* ================================ */ .btn_cancel {background:#F5127B;} .btn_cancel:hover {background:#C0085D;} .btn_signup {background:#1292f5;} .btn_signup:hover {background:#065A9A;} .btn_blue {background:#F5127B;} .btn_blue:hover {background:#C0085D;} .btn_red {background:#1292f5;} .btn_red:hover {background:#065A9A;} .btn_green {background:#F5127B;} .btn_green:hover {background:#C0085D;} .btn_beige {background:#1292f5;} .btn_beige:hover {background:#065A9A;} .btn_cyan {background:#1280F5;} .btn_cyan:hover {background:#089FCD;} .yellow {background:#f5e193;} .yellow:hover {background:#C8A312;} .green {background:#c0f58c;} .green:hover {background:#6ECC11;} .blue {background:#93f5e8;} .blue:hover {background:#0FA28E;} .violet {background:#a88cf5;} .violet:hover {background:#6837ED;} .purple {background:#e812f5;} .purple:hover {background:#AD38B4;} .red {background:#ce7a24;} .red:hover {background:#6E4113;} .greyblue{background:#a4a197;} .greyblue:hover{background:#34312b;} .c_darkblue {background:#719d91;} .c_darkblue:hover {background:#4E7268;} .c_olive {background:#c6bd91;} .c_olive:hover {background:#6C704D;} .c_cyan_01{background:#5d9cc0;} .c_cyan_01:hover{background:#30617D;} /* ==== TRANSACTION HISTORY SECTION ==== */ .transaction_history{max-width:700px;} .transaction_history .title{color:rgba(251,251,251,1.00); font-size:1.2em; text-shadow: 1px 1px 2px rgba(0,0,0,0.7); font-weight:bold;} .transaction_history .wrapper{} /* ==== 'modal > GAME SLOT' SECTION ATTRIBUTES ==== */ /* ==== 'modal > GAME SLOT' SECTION ATTRIBUTES ==== */ /* ==== 'modal > GAME SLOT' SECTION ATTRIBUTES ==== */ .modal-bodya {} .gamelist {} ul.gamelist_navigator {margin:0 auto; display:block; text-align: center; font-weight: 800; padding:45px 5px 20px;} ul.gamelist_navigator li {width:auto; display:inline-block; padding:0 4px; transition: all 0.5s;} ul.gamelist_navigator li a {color:#FFFFFF; text-shadow: 1px 1px 2px rgba(0,0,0,0.4);} ul.gamelist_navigator li a:hover {color:#C5C5C5; font-weight: normal;} ul.gamelist_navigator li a:active {color:#A4A4A4;} .textmsgshow-empty {width:100%; text-align: center; color:#C8C8C8;} .textmsgshow-empty p {height:100%;} ul.gamecategory { margin:0 auto; padding:0 1em; font-size:0.8em; font-weight: 800; text-align: center;} ul.gamecategory li { margin:10px 5px; padding:5px; display:inline-block; vertical-align:top; transition: all 0.5s;} ul.gamecategory li img { width:200px; height:auto; } ul.gamecategory li p {width:200px; height:auto; color:#F3F3F3; margin:3px 0; font-size:14px;} ul.gamecategory li:hover p { color:#CCCCCC; font-weight: normal;} ul.gamecategory li:hover img {opacity: 0.7;} @media (min-width:0px) { } @media (min-width:0px) and (max-width:575px){ } @media (min-width:576px) and (max-width:991px) { } @media (min-width:992px){ } /* ==== 'modal > .mypage' SECTION ATTRIBUTES ==== */ .mypage-wrapper {height:100vh; overflow-y:auto; padding-bottom:4rem;} .mypage-wrapper ul.page-category {width:100%; max-width: 375px; display:block; margin:0 auto; text-align: center; } .mypage-wrapper ul.page-category li {display:inline-block;} .mypage-submenu_bt a {width:80px; height:35px; background:#c9cdb2; color:#fff; font-size:0.8em; font-weight: 800; text-shadow:1px 1px 2px rgba(0,0,0,0.3); transition: background 0.5s; display:flex; align-items:center; justify-content:center;} .mypage-submenu_bt a:hover {background:#979d71;} .mypage-submenu_bt a:active {background:#979d71;} .mypage-submenu_bt a:focus {background:#979d71;} .mypage-headtitle {width:100%; height:100px;} .mypage-headtitle .head-section-wrapper {position:relative;} .mypage-headtitle .head-section-wrapper .title-wrapper {width:100%; height:45px; max-width:375px; margin:0 auto;} .mypage-headtitle .head-section-wrapper .title-wrapper .title-bg {width:100%; height:45px; max-width:375px; background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0.5), rgba(0,0,0,0)); position: absolute; top:50%; right:50%; transform:translate(50%,0);} .mypage-headtitle .head-section-wrapper .title-wrapper .title-icon-bg { width:100px; height:100px; position: absolute; right:50%; transform:translate(50%,0);} .mypage_01 {background:url(images/mypage_01.png) no-repeat; background-size:56px 68px; background-position:center;} .mypage_02 {background:url(images/mypage_02.png) no-repeat; background-size:34px 62px; background-position:center;} .mypage_03 {background:url(images/mypage_03.png) no-repeat; background-size:80px 52px; background-position:center;} .mypage_04 {background:url(images/mypage_04.png) no-repeat; background-size:79px 66px; background-position:center;} .mypage-headtitle .head-section-wrapper .title-wrapper p {width:100%; height:45px; max-width:375px; position: absolute; top:50%; /*right:50%; transform:translate(50%,0);*/ margin-top: 8px; color:#fff; font-size:1.2em; font-weight: 800; text-shadow:1px 2px 2px rgba(0,0,0,0.4); text-align: center;} table.points_rewards {} .points_rewards tbody {} .points_rewards tbody tr {} .points_rewards tbody tr td {font-weight: 800; color:#E1E1E1;} .points_rewards tbody tr td.title {font-size: 1em;} .points_avail {font-size:1.2em; padding:1.2rem;} .extra-info {font-size: 0.8em; color:#838383!important; text-align:right;} .extra-info span {width:100%; max-width: 375px; display:block; margin:0 auto;} .point_input_wrapper {height:70px; padding:0.5rem;} .point_input_container {width:100%; max-width: 375px; background:#53144B; margin:0 auto; position:relative;} input.points_value {width:100%; height:35px; max-width: 375px; border: none; background: #3B3B3B; padding: 0.5em; padding-right:40px; color:#fff; position:absolute; top:0; left:0;} input.points_value::placeholder {color:#9785a7; text-align: left; } .point_input_container span {width:40px; height:35px; position:absolute; top:0; right:0; color:#fff; text-align:center; padding:6px;} .dm-tool {} .tap_btn {font-size: 0.8em; padding:0.4em; border:none; border-top-left-radius: 4px; border-top-right-radius: 4px; color:#ECECEC; transition: all 0.5s;} .tap_btn:hover {color:#424242;} .btn_darkpurple {background:#28113d; transition: all 0.5s;} .btn_darkpurple:hover {background:#A36CD6;} table.mypage-datachart-board {} .mypage-datachart-board {color:#fff; text-align:center; font-weight:800;} .mypage-datachart-board thead {} .mypage-datachart-board thead tr {height:45px;} .mypage-datachart-board thead tr td {font-size: 1em;} .mypage-datachart-board tbody {} .mypage-datachart-board tbody tr {} .mypage-datachart-board tbody tr td{font-size: 0.9em} table.datachart-rolling {} .datachart-rolling {min-width: 800px;} .datachart-rolling tbody {} .datachart-rolling tbody tr {} .datachart-rolling tbody tr td {padding:6px 2px;} table.stat_user_table {max-width: 800px; margin:0 auto 8px;} .stat_user_table thead { } .stat_user_table thead tr {} .stat_user_table thead tr td {padding:7px 10px; background:#002056; color:#fff; font-weight: 800;} .stat_user_table thead tr .header {} .stat_user_table tbody {} .stat_user_table tbody tr.border-bt {} .stat_user_table tbody tr th {width:110px; min-width:110px; max-width: 110px; padding:5px; color:#E1E1E1; text-align:center;} .stat_user_table tbody tr td { padding:5px; color:#E1E1E1; } .stat_user_table tbody .colone {width:6px; padding:0 2px; text-align: center;} .stat_user_table .stat-msg {width:100%; max-width: 375px; display:block; text-align:left; font-size: 0.8em; font-weight: 800;} .stat_user_table .stat-msg .formal {color:#D8D8D8;} .stat_user_table .stat-msg .error {color:#d54545;} .stat_user_table .stat-msg .granted {color:#45d578;} input.mypage_pw {width:100%; padding:8px; color:#fff; font-size:0.8em; font-weight: 800; border:0; outline:none;} .btn_confirm_modal_page_inside {width:100px; height:40px; color:#6e82cc; font-weight: 800; background:#011766; border:0; outline:none; transition: all 0.5s;} .btn_confirm_modal_page_inside:hover {color:#031040; background:#2a4194;} @media (min-width:0px) { } @media (min-width:0px) and (max-width:575px){ } @media (min-width:576px) and (max-width:991px) { } @media (min-width:992px){ } /* =========================== POPUP & ENVIRONMENTS =========================== */ @media (min-width:0px) { .popup_wrapper {/*max-width:1903px;*/ width:100%; position:absolute; top:0; left:50%; transform:translate(-50%,0); z-index: 800;} .popup_window {max-width: 350px; width:100%; padding: 0; background-color: #fff; display: block; color: #000000;} /* ==== POSITIONS ==== */ .popup_01{position: absolute; top:250px; left:350px; z-index: 801;} .popup_02{position: absolute; top:250px; left:530px; z-index: 802;} .popup_window img{width:100%;} .close_bar{width:100%; background: rgba(46,46,46,1.00); padding:5px; color: #fff; font-size:0.6em; font-weight: 800; display: flex; justify-content: space-between} .close_bar a label{width:190px; height: 35px; padding: 0 5px 0; display: flex; flex-wrap: nowrap; align-items: center;} .close_bar a label input {padding: 4px; margin: 0 8px 0;} .close_bar a.banner_close{width:100px; height:35px; background:rgba(183,183,183,1.00); color:rgba(30,30,30,1.00); font-family: scdream; font-size: 1.4em; font-weight:800; transition: all 0.2s; display:flex; align-items: center; justify-content: center; border:none; margin-right:15px;} .close_bar a.banner_close:hover{background: rgba(17,17,17,1.00); color:#fff;} } @media (min-width:0px) and (max-width:575px){ } @media (min-width:576px) and (max-width:991px) { } @media (min-width:992px){ } /* GLOBAL ATTRIBUTES END */ /* == GLOBAL SCROLL BAR == */ ::-webkit-scrollbar{ width:3px; } /* == the track (progress bar) of the scrollbar. */ ::-webkit-scrollbar-track{ background-color:#272727; } /* == the track (progress bar) NOT covered by the handle. */ ::-webkit-scrollbar-track-piece{ background:rgba(213,213,213,1.00); } /* == the draggable scrolling handle. */ ::-webkit-scrollbar-thumb{ background:rgba(27,27,27,1.00); } /* == the buttons on the scrollbar (arrows pointing upwards and downwards). */ ::-webkit-scrollbar-button{} /* == the draggable resizing handle that appears at the bottom corner of some elements */ ::-webkit-resizer{} /* == the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet. */ ::-webkit-scrollbar-corner{} /* =========================================== */ /* RESPONSIVE ENVIRONMENT */ /* =========================================== */ @media (min-width:0px) and (max-width:575px){ .bnk_frame{padding:0.7em;} .deposite_wrapper, .withdraw_wrapper{} div.banking .value .banking_value{width:100%;} div.banking .buttons button {width:100%;} } @media (min-width:0px) { } @media (min-width: 375px) { } @media (min-width: 575px) { } @media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { } @media (min-width: 375px) { } @media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { }