@charset "UTF-8";.e-shadow {
    display: none;
    overflow: hidden;
    z-index: 90;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8)
}

html,body {
    background-color: #000;
    min-width: 1280px
}

button {
    padding: 0;
    border: none 0;
    outline: none 0;
    cursor: pointer
}

button:disabled {
    pointer-events: none
}

.e-container {
    position: relative;
    overflow: hidden;
    min-width: 1280px;
    max-width: 1920px;
    margin: 0 auto
}

.e-contents {
    overflow: hidden
}

.e-event {
    position: relative;
    width: 1280px;
    margin: 0 auto
}

.e-event .img-content {
    margin-left: -320px
}

.e-wrap {
    position: relative;
    width: 1280px;
    margin: 0 auto
}

.e-footer p {
    overflow: hidden;
    line-height: 0;
    font-size: 0;
    color: transparent;
    text-indent: -9999px
}

.dimmed {
    opacity: 1;
    overflow: hidden;
    z-index: 90;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000
}

.ie-lower {
    padding: 240px 0;
    min-height: 400px;
    background: url(https://mimage.webzen.kr/community/v01/images/bg_dimmed.png) repeat;
    text-align: center
}

.ie-lower .inner {
    position: relative;
    margin: 0 auto;
    padding: 40px 30px 30px;
    width: 720px;
    background-color: #fff
}

.ie-lower h2 {
    line-height: 1.6;
    color: #1a1a1a;
    font-size: 24px
}

.ie-lower p {
    line-height: 1.6;
    color: #6f6f6f;
    font-size: 20px
}

.ie-lower .browser-list {
    overflow: hidden;
    width: 380px;
    margin: 50px auto 0
}

.ie-lower .browser-list li {
    font-size: 15px;
    color: #6f6f6f;
    float: left;
    width: 50%;
    padding-top: 132px;
    text-align: center;
    background: url(https://mimage.webzen.kr/template/images/ico_chrome.svg) no-repeat 50% 0/auto 120px
}

.ie-lower .browser-list li+li {
    background: url(https://mimage.webzen.kr/template/images/ico_edge.svg) no-repeat 50% 0/auto 120px
}

.ie-lower .browser-list a {
    display: block;
    margin: 35px auto 10px;
    width: 160px;
    height: 50px;
    font-family: "Segoe UI","Lucida Sans Unicode","Lucida Grande","Tahoma","Arial","sans-serif";
    font-weight: bold;
    line-height: 50px;
    border-radius: 4px;
    font-size: 16px;
    color: #303030;
    background-color: #f0f0f0
}

.ie-lower .browser-list a:hover {
    color: #fff;
    background-color: #303030
}

.ie-lower--layer {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999;
    width: 100%;
    height: 100%
}

.ie-lower-close {
    overflow: hidden;
    line-height: 0;
    font-size: 0;
    color: transparent;
    text-indent: -9999px;
    position: absolute;
    right: 30px;
    top: 30px;
    z-index: 99999;
    width: 35px;
    height: 35px;
    background: url(https://mimage.webzen.kr/community/v01/images/btn_close.png) no-repeat 50%
}

.ie-lower.dark {
    background: #000
}

.ie-lower.dark .inner {
    background-color: #000
}

.ie-lower.dark h2,.ie-lower.dark p {
    color: #e8d3c0
}

.ie-lower.dark .browser-list li {
    padding-top: 116px;
    color: #909090
}

.ie-lower.dark .browser-list a {
    color: #303030;
    background-color: #e8d3c0
}

.ie-lower.dark .browser-list a:hover {
    color: #fff;
    background-color: #303030
}

.ie-lower.dark .ie-lower-close {
    background-image: url(https://image.webzen.kr/Company/kor/img/popup/ban_popup_close.gif);
    background-position-x: -1px
}

.custom-select {
    position: relative;
    box-sizing: border-box;
    width: 240px;
    height: 60px
}

.custom-select .selected {
    display: block;
    box-sizing: border-box;
    padding-left: 25px;
    padding-right: 25px;
    width: 100%;
    height: 100%;
    letter-spacing: -0.5px;
    cursor: pointer;
    line-height: calc(60px - 1px);
    font-size: 20px;
    color: #5f6478;
    border: 1px solid #1c1d2c;
    border-radius: 0;
    background-color: #060302;
    background-repeat: no-repeat;
    background-image: url(images/ico_select.png);
    background-position: 100% 0
}

.custom-select .selected.active {
    color: #5f6478
}

.opened .selected {
    background-position: 100% 100%
}

.custom-select .select-items {
    display: none;
    box-sizing: border-box;
    overflow: hidden;
    position: absolute;
    padding: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    border: 1px solid #1c1d2c;
    border-radius: 0;
    background-color: #000
}

.custom-select .select-items>div,.custom-select .select-items>ul {
    overflow-y: auto;
    max-height: 200px;
    scrollbar-base-color:#1c1d2c;scrollbar-arrow-color:#1c1d2c;scrollbar-shadow-color:#1c1d2c;scrollbar-highlight-color:#000}

.custom-select .select-items>div::-webkit-scrollbar,.custom-select .select-items>ul::-webkit-scrollbar {
    width: 10px
}

.custom-select .select-items>div::-webkit-scrollbar-track,.custom-select .select-items>ul::-webkit-scrollbar-track {
    background: #000
}

.custom-select .select-items>div::-webkit-scrollbar-thumb,.custom-select .select-items>ul::-webkit-scrollbar-thumb {
    background: #1c1d2c
}

.custom-select .select-items>div::-webkit-scrollbar-button:start:decrement,.custom-select .select-items>ul::-webkit-scrollbar-button:start:decrement {
    width: 0;
    height: 0;
    background: #000
}

.custom-select .select-items>div::-webkit-scrollbar-button:end:increment,.custom-select .select-items>ul::-webkit-scrollbar-button:end:increment {
    width: 0;
    height: 0;
    background: #000
}

.custom-select .select-items label {
    display: block;
    box-sizing: border-box;
    position: relative
}

.custom-select .select-items label input {
    position: absolute;
    visibility: hidden;
    margin: 0;
    padding: 0;
    width: 0;
    height: 0
}

.custom-select .select-items label input:checked+span,.custom-select .select-items label input:checked ~ span {
    color: #5f6478
}

.custom-select .select-items label input:disabled+span,.custom-select .select-items label input:disabled ~ span {
    cursor: default;
    pointer-events: none
}

.custom-select .select-items span {
    display: block;
    padding-left: 25px;
    padding-right: 25px;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    color: #5f6478;
    cursor: pointer
}

.custom-select .select-items span:hover {
    color: #5f6478;
    background-color: #2b2e3e
}

.opened .select-items {
    display: block
}

.custom-input {
    position: relative;
    box-sizing: border-box;
    width: 240px;
    height: 60px
}

.custom-input input[type="text"] {
    display: block;
    box-sizing: border-box;
    padding: 0 25px;
    width: 100%;
    height: 100%;
    font-size: 20px;
    border: 1px solid #1c1d2c;
    background-color: #000;
    color: #5f6478
}

.custom-input input[type="text"]::placeholder {
    color: inherit
}

.e-cont .title-box {
    font-family: 'Taviraj',sans-serif
}

body,div,dl,dt,dd,ul,ol,menu,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,th,td,p {
    font-family: "Roboto","Segoe UI","Lucida Sans Unicode","Lucida Grande","Tahoma","Arial",sans-serif
}

html,body {
    height: 100%;
    min-height: 100%;
    background-color: #000;
    min-width: 1280px;
    scroll-behavior: smooth
}

button {
    border: none 0;
    outline: none 0;
    cursor: pointer;
    background-color: transparent
}

.e-skip,.e-roulette .roulette-event1 .roulette-tooltip li .switch input,.e-roulette .roulette-event1 .roulette-cont .item-list,.hide {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    visibility: hidden
}

.e-hidden {
    background-color: #fff;
    opacity: 0;
    filter: alpha(opacity=1)
}

.e-blind,.e-header .btn-home,.e-header .btn-down,.e-roulette .roulette-event1 .roulette-tooltip li .switch label,.e-roulette .roulette-event1 .roulette-cont .roulette-stage .start,.e-sales .e-section1 .new,.e-sales .e-section2 .desc {
    font-size: 0;
    text-indent: -9999em
}

.e-container {
    overflow: hidden;
    position: relative;
    max-width: 1920px;
    margin: 0 auto
}

.e-container * {
    box-sizing: border-box
}

.e-container *[class*="btn-"] {
    color: #fff
}

.e-header {
    position: relative;
    width: 100%;
    height: calc(100vh - 38px);
    min-height: 860px;
    max-height: 950px;
    overflow: hidden;
    background: url("https://i.ibb.co/M6FLyLw/bg-header-pt.jpg") 50% 0 no-repeat
}

.e-header .bi {
    position: absolute;
    top: 40px;
    left: 60px;
    z-index: 3
}

.e-header .btn-home,.e-header .btn-down {
    position: absolute;
    top: 40px;
    right: 40px;
    z-index: 5;
    display: block;
    width: 46px;
    height: 46px;
    background: url("https://i.ibb.co/wBfDfXq/btn-util.png") 0 0 no-repeat
}

.e-header .btn-home:hover,.e-header .btn-down:hover {
    -ms-background-position-y: 100%;
    background-position-y: 100%
}

.e-header .btn-home {
    right: 97px
}

.e-header .btn-down {
    -ms-background-position-x: 100%;
    background-position-x: 100%
}

.e-header #closeToday {
    display: block;
    position: absolute;
    top: 54px;
    right: 170px;
    z-index: 5;
    cursor: pointer
}

.e-header #closeToday span {
    display: block;
    padding-left: 30px;
    height: 16px;
    line-height: 16px;
    font-size: 14px;
    letter-spacing: -0.2px;
    color: #fff;
    background: url(https://i.ibb.co/McP9S9T/ico-chk-close.png) no-repeat
}

.e-header #closeToday input {
    position: absolute;
    left: -9999px
}

.e-header #closeToday input:checked+span {
    background-position: 0 100%
}

.e-header .dimmed {
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000
}

.smog {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2
}

.smog i {
    position: absolute;
    display: block;
    background: url("https://i.ibb.co/ZVpbFBN/sp-smog.png") no-repeat;
    transform-origin: 50% 100%
}

.smog .num2 {
    bottom: 0;
    left: -217px;
    width: 2354px;
    height: 1400px;
    opacity: 0
}

.smog .num1 {
    bottom: 0;
    left: -217px;
    width: 2354px;
    height: 800px;
    opacity: 0
}

.smog .num3 {
    bottom: 0;
    left: -217px;
    width: 2354px;
    height: 800px;
    opacity: 0
}

.e-header .smog .num1 {
    -webkit-animation: spreadSmog 5s infinite linear;
    animation: spreadSmog 5s infinite linear
}

.e-header .smog .num2 {
    -webkit-animation: spreadSmog 7s infinite linear;
    animation: spreadSmog 7s infinite linear
}

.e-header .smog .num3 {
    -webkit-animation: spreadSmog 10s infinite linear;
    animation: spreadSmog 10s infinite linear
}

#canvas {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    display: block;
    margin-left: -960px;
    pointer-events: none
}

.e-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 300;
    width: 100%;
    height: 90px;
    background: url("https://i.ibb.co/F03jYyd/bg-menu.jpg") no-repeat 50% 0;
    box-shadow: 0 15px 50px rgba(0,0,0,0.4)
}

.e-nav .menu {
    display: table;
    width: 1200px;
    height: 100%;
    margin: 0 auto
}

.e-nav a {
    display: table-cell;
    width: 25%;
    padding: 0 10px 3px;
    height: 100%;
    font-size: 16px;
    line-height: 1em;
    vertical-align: middle;
    text-align: center;
    color: #9dcaf3;
    opacity: .3;
    transition: opacity .3s ease;
    word-break: break-word
}

html[lang=pt] .e-nav a {
    padding: 0 5px 3px;
    font-size: 15px
}

html[lang=pt] .e-nav a:nth-child(5) {
    font-size: 19px
}

.e-nav a:hover,.e-nav a.current {
    opacity: 1
}

.e-nav a.current {
    font-weight: 600
}

.e-nav .menu1 {
    background-position-x: -360px
}

.e-nav .menu2 {
    background-position-x: -600px
}

.e-nav .menu3 {
    background-position-x: -840px
}

.e-nav .menu4 {
    background-position-x: -1080px
}

.e-nav .menu5 {
    background-position-x: -1320px
}

.e-nav.nav-fixed {
    position: fixed;
    bottom: inherit;
    top: 0
}

.btn-top {
    overflow: hidden;
    line-height: 0;
    font-size: 0;
    color: transparent;
    text-indent: -9999px;
    -webkit-transition: opacity .5s ease;
    transition: opacity .5s ease;
    opacity: 0;
    z-index: 10;
    position: absolute;
    right: 40px;
    bottom: 60px;
    width: 112px;
    height: 122px;
    background: url(https://i.ibb.co/TH1HPxz/btn-top.png) no-repeat;
    cursor: pointer
}

.btn-top.active {
    position: fixed;
    opacity: 1
}

.btn-top:hover {
    background-position-y: 100%
}

.btn-top.active {
    position: fixed;
    opacity: 1
}

.e-footer {
    height: 70px;
    background-color: rgba(0,0,0,0.6)
}

.e-footer p {
    line-height: 71px;
    text-align: center;
    color: #fff;
    font-size: 13px;
    text-indent: 0;
    letter-spacing: .05em;
    opacity: .5
}

.e-cont {
    width: 100%
}

.e-cont .e-wrap {
    position: relative;
    margin: 0 auto;
    width: 1280px;
    color: #fff
}

.e-cont .section-top .e-wrap>img {
    margin-left: -320px
}

.e-cont .section-content section {
    box-sizing: border-box;
    position: relative;
    text-align: center;
    color: #fff
}

.e-cont .sub-text {
    font-size: 24px;
    color: #f2cfb0;
    line-height: 30px;
    margin: 0 auto
}

.e-cont .title-box {
    text-align: center
}

.e-cont .title-box .superscript {
    line-height: 24px;
    font-size: 30px;
    color: #c8af93
}

.e-cont .title-box .title {
    display: block;
    font-family: inherit;
    margin-top: 5px;
    line-height: 70px;
    font-weight: 700;
    font-size: 60px;
    color: #f2e0c9
}

.e-cont .title-box .period {
    margin-top: 20px;
    margin-bottom: -20px;
    font-size: 20px;
    height: 90px;
    line-height: 70px;
    font-family: inherit;
    color: #c8af93;
    background: url("images/bg_period.png") 50% 0 no-repeat
}

html[lang='pt'] .e-cont .title-box .period {
    font-size: 18px
}

.e-cont .title-box .notice {
    margin-top: 16px;
    font-size: 40px;
    font-family: inherit;
    line-height: 50px;
    color: #d57950
}

.e-cont .description {
    line-height: 150%;
    letter-spacing: -0.2px;
    font-size: 20px
}

.e-cont .attention {
    width: 827px;
    margin: 0 auto;
    text-align: left
}

.e-cont .attention dt {
    margin-bottom: 24px;
    font-size: 20px;
    color: #ab5630;
    font-weight: bold
}

.e-cont .attention dd {
    position: relative;
    font-size: 16px;
    line-height: 1.6;
    color: #c8af93;
    font-weight: 300;
    padding-left: 14px
}

.e-cont .attention dd.em:before {
    color: #ab5630
}

.e-cont .attention dd:before {
    content: '\204E';
    display: block;
    position: absolute;
    top: -5px;
    left: 0
}

.e-cont .attention dd em {
    color: #ab5630
}

.e-attendance .attendance-event {
    height: 4828px;
    padding-top: 127px;
    background: url("images/bg_attendance.jpg") no-repeat 50% 0
}

.e-attendance .superscript {
    display: block;
    margin-bottom: 12px
}

.e-attendance .title-box .period {
    margin-top: 49px;
    font-size: 20px;
    line-height: 32px
}

.e-attendance .login-status {
    width: 510px;
    height: 452px;
    margin: 92px auto 0;
    padding: 55px 0
}

.e-attendance .login-status p {
    line-height: 1.5
}

.e-attendance .login-status--before {
    font-size: 20px;
    color: #f2e0a8
}

.e-attendance .login-status--before em {
    display: block;
    font-size: 24px;
    color: #fff
}

.e-attendance .login-status--after {
    font-size: 20px;
    color: #f2e0a8
}

.e-attendance .login-status--after em {
    display: block;
    font-size: 26px;
    color: #fff;
    font-weight: bold
}

.e-attendance .login-status--after span {
    font-size: 20px
}

.e-attendance .login-status .text-update {
    width: calc(100% + 100px);
    margin-top: 107px;
    padding-left: 90px;
    font-size: 20px;
    color: #a27e76;
    text-align: left
}

.e-attendance .login-status .text-update em {
    color: #d57950
}

.e-attendance .mission {
    height: 1189px
}

.e-attendance .mission .title-box .superscript {
    font-size: 36px
}

.e-attendance .mission .title-box .title {
    margin-bottom: 10px;
    font-size: 60px;
    line-height: 1
}

.e-attendance .mission .item-list {
    width: 825px;
    height: 55px;
    margin: 41px auto 0;
    display: table;
    table-layout: fixed
}

.e-attendance .mission .item-list li {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-size: 16px;
    line-height: 1.5;
    color: #f2e0a8
}

.e-attendance .mission .btn-claim {
    width: 282px;
    height: 91px;
    padding: 0 10px 16px 0;
    margin-top: 320px;
    background: url("images/btn_claim.png") 0 0 no-repeat;
    font-size: 20px;
    color: #f2e0c9;
    font-weight: bold
}

.e-attendance .mission .btn-claim:disabled,.e-attendance .mission .btn-claim.disabled {
    -ms-background-position-y: 100%;
    background-position-y: 100%;
    color: #6b6156
}

.e-attendance .mission .attention {
    margin-top: 10px
}

.e-attendance .mission .sub-text {
    font-size: 20px;
    color: #c8af93;
    line-height: normal
}

.e-attendance .mission__period {
    overflow: hidden;
    height: 266px;
    margin-top: 35px;
    margin-bottom: 90px;
    text-align: center;
    font-size: 0
}

.e-attendance .mission__period>div {
    display: inline-block;
    padding: 30px 20px;
    width: 254px;
    height: 100%;
    vertical-align: top
}

.e-attendance .mission__period>div+div {
    margin-left: 12px
}

.e-attendance .mission__period>div em {
    position: relative;
    display: block;
    color: #fff3e9;
    font-size: 24px;
    line-height: 1.4
}

.e-attendance .mission__period>div em:after {
    display: block;
    width: 30px;
    height: 4px;
    margin: 5px auto 10px;
    background-color: #655b52;
    content: ''
}

.e-attendance .mission__period>div .desc dt {
    font-size: 15px;
    line-height: 1.5;
    color: #e09e7f
}

.e-attendance .mission__period>div .desc dd {
    min-height: 4em;
    font-size: 15px;
    color: #f2e0c9
}

.e-attendance .mission__period>div .desc+.desc {
    margin-top: 20px
}

.e-attendance .mission2 {
    height: 1493px
}

.e-attendance .mission2 .item-list {
    width: 1000px;
    height: 114px;
    margin-top: 51px
}

.e-attendance .mission2 .item-list li {
    position: relative
}

.e-attendance .mission2 .item-list span {
    position: absolute;
    bottom: -186px;
    left: 0;
    display: block;
    width: 100%
}

.e-attendance .mission2 .attention {
    margin-top: 264px
}

.e-attendance .mission3 .title-box .sub-text {
    margin-top: 18px;
    font-size: 24px
}

.e-attendance .mission3 .title-box .sub-text em {
    color: #f2e0c9
}

.e-attendance .mission3 .item-list {
    height: 114px
}

.e-attendance .mission3 .btn-claim {
    margin-top: 260px
}

.e-attendance .mission3 .text-update {
    width: 597px;
    padding-left: 126px;
    margin: 0 auto;
    font-size: 20px;
    color: #a27e76;
    text-align: left
}

.e-attendance .mission3 .text-update em {
    color: #d57950
}

.e-attendance .mission3 .attention {
    margin-top: 41px
}

.e-section {
    position: relative
}

.e-section .e-wrap {
    padding-top: 230px;
    text-align: center
}

.e-section .e-stitle {
    width: 100%;
    background-position: center top;
    background-repeat: no-repeat;
    font-size: 0;
    text-indent: -9999px
}

.e-section .e-info {
    font-weight: 500;
    font-size: 18px;
    line-height: 1.3em;
    color: #515e6f;
    text-align: center;
    margin-top: 10px
}

.e-section .e-period {
    font-weight: 500;
    font-size: 18px;
    line-height: 1.3em;
    color: #fff;
    text-align: center;
    margin-top: 10px
}

.e-section .e-attention {
    position: absolute;
    top: 1650px;
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
    text-align: left
}

.e-section .e-attention>span {
    color: #738eb6;
    font-size: 24px;
    font-weight: 700;
    display: block;
    padding-bottom: 12px;
    line-height: 1.2em
}

.e-section .e-attention>p {
    color: #8d8a92;
    font-size: 15px;
    font-weight: 500;
    position: relative;
    padding-left: 12px;
    padding-bottom: 12px
}

.e-section .e-attention>p::before {
    content: "·";
    position: absolute;
    top: 0;
    left: 0
}

.e-section .e-attention>p em {
    font-weight: 700;
    color: #aab6cf
}

.e-celebration .e-stitle {
    background: 0;
    display: none
}

.e-celebration .e-info {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    margin-top: 0
}

.e-celebration .e-info span {
    color: #82a7c9
}

.e-celebration .e-period {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 65px;
    margin-top: 0
}

.e-celebration .e-section1 {
    height: 1202px;
    background: url("https://i.ibb.co/xstgS5m/bg-event1-evt1.jpg") center 0 no-repeat
}

.e-celebration .e-section1 .e-info {
    top: 375px
}

.e-celebration .e-section1 .e-period {
    top: 442px
}

.e-celebration .e-section1 .e-bonus {
    height: 145px;
    overflow: hidden;
    display: table;
    width: 1000px;
    position: absolute;
    top: 928px;
    left: 50%;
    transform: translateX(-50%)
}

.e-celebration .e-section1 .e-bonus .inner {
    display: table-cell;
    vertical-align: middle;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.3em;
    color: #fff;
    text-align: center;
    margin-top: 10px
}

.e-celebration .e-section1 .e-bonus .inner b {
    font-weight: 700
}

.e-celebration .e-section1 .e-bonus .inner span {
    color: #82a7c9
}

.e-celebration .e-section2 {
    height: 1097px;
    background: url("https://i.ibb.co/cTLZWrk/bg-event1-evt2.jpg") center 0 no-repeat
}

.e-celebration .e-section2 .e-info {
    top: 387px;
    color: #515e6f
}

.e-celebration .e-section2 .e-period {
    top: 442px;
    color: #515e6f
}

.e-celebration .e-section2 .e-box {
    height: 78px;
    width: 1006px;
    position: absolute;
    top: 565px;
    left: 50%;
    transform: translateX(-50%)
}

.e-celebration .e-section2 .e-box li {
    float: left;
    width: 490px;
    text-align: center;
    font-weight: 700;
    font-size: 24px;
    line-height: 78px;
    color: #fff
}

.e-celebration .e-section2 .e-box li+li {
    float: right
}

.e-celebration .e-section2 .e-noti {
    width: 100%;
    position: absolute;
    top: 932px;
    left: 0;
    text-align: center;
    font-size: 18px;
    color: #666
}

.e-celebration .e-section3 {
    height: 1216px;
    background: url("https://i.ibb.co/DYxvv7f/bg-event1-evt3.jpg") center 0 no-repeat
}

.e-celebration .e-section3 .e-info {
    top: 410px
}

.e-celebration .e-section3 .e-info b {
    color: #ff8400;
    font-weight: 700
}

.e-celebration .e-section3 .e-info span {
    color: #82a7c9
}

.e-celebration .e-section3 .e-period {
    top: 486px
}

.e-celebration .e-section4 {
    height: 975px;
    background: url("https://i.ibb.co/ryBgcjr/bg-event1-evt4.jpg") center 0 no-repeat
}

.e-celebration .e-section4 .e-info {
    top: 410px;
    color: #515e6f
}

.e-celebration .e-section4 .e-period {
    top: 466px;
    color: #515e6f
}

.e-celebration .e-section5 {
    height: 1910px;
    background: url("https://i.ibb.co/KLQctxL/bg-event1-evt5.jpg") center 0 no-repeat
}

.e-celebration .e-section5 .e-info {
    top: 415px
}

.e-celebration .e-section5 .e-info span {
    color: #82a7c9
}

.e-celebration .e-section5 .e-period {
    top: 478px
}

.e-celebration .e-section5 .e-box {
    height: 78px;
    width: 1006px;
    position: absolute;
    top: 605px;
    left: 50%;
    transform: translateX(-50%)
}

.e-celebration .e-section5 .e-box li {
    float: left;
    width: 490px;
    text-align: center;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.1em;
    color: #fff
}

.e-celebration .e-section5 .e-box li+li {
    float: right
}

.e-celebration .e-section5 .plus-title {
    width: 100%;
    position: absolute;
    top: 1035px;
    left: 0;
    text-align: center;
    font-size: 44px;
    font-weight: 700;
    color: #fff
}

.e-celebration .e-section5 .plus-noti {
    width: 100%;
    position: absolute;
    top: 1460px;
    left: 0;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    color: #fff
}

.e-celebration .e-section5 .e-attention {
    top: 1619px
}

.e-celebration .e-section6 {
    height: 1207px;
    background: url("https://i.ibb.co/xsddkx1/bg-event1-evt6.jpg") center 0 no-repeat
}

.e-celebration .e-section6 .e-info {
    top: 410px;
    color: #515e6f
}

.e-celebration .e-section6 .e-period {
    top: 472px;
    color: #515e6f
}

.e-celebration .e-section6 .e-attention {
    top: 884px
}

.e-celebration .e-section7 {
    height: 1026px;
    background: url("https://i.ibb.co/3vdGTDy/bg-event1-evt7.jpg") center 0 no-repeat
}

.e-celebration .e-section7 .e-info {
    top: 410px
}

.e-celebration .e-section7 .e-period {
    top: 480px
}

.e-celebration .e-section7 .step-box {
    position: absolute;
    top: 737px;
    left: 140px;
    width: 675px;
    text-align: center
}

.e-celebration .e-section7 .step-box li {
    width: 50%;
    float: left;
    vertical-align: top
}

.e-celebration .e-section7 .step-box li p {
    font-size: 16px;
    color: #4d80c4
}

.e-celebration .e-section7 .step-box li span {
    display: block;
    margin: 10px auto;
    font-size: 16px;
    color: #aab6cf
}

.e-celebration .e-section8 {
    height: 1106px;
    background: url("https://i.ibb.co/g9R1ky5/bg-event1-evt8.jpg") center 0 no-repeat
}

.e-celebration .e-section8 .e-info {
    top: 410px;
    color: #515e6f
}

.e-celebration .e-section8 .e-info span {
    color: #82a7c9
}

.e-celebration .e-section8 .e-period {
    top: 466px;
    color: #515e6f
}

.e-celebration .e-section8 .e-btn {
    display: block;
    width: 473px;
    height: 64px;
    margin: 0 auto;
    position: absolute;
    top: 870px;
    left: 50%;
    transform: translateX(-50%);
    background: url("https://i.ibb.co/XV3Gn5B/btn-how.png") center no-repeat
}

.e-celebration .e-section8 .e-btn span {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 60px
}

.e-celebration .e-section9 {
    height: 1003px;
    background: url("https://i.ibb.co/YXmD6yD/bg-event1-bonus.jpg") center 0 no-repeat
}

.e-celebration .e-section9 .bonus-title {
    width: 100%;
    position: absolute;
    top: 478px;
    left: 0;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: #fff
}

.e-celebration .e-section9 .bonus-noti {
    width: 100%;
    position: absolute;
    top: 760px;
    left: 0;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #aab6cf
}

.e-celebration .e-section9 .reset {
    width: 66px;
    position: absolute;
    top: 580px;
    right: 467px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff
}

.e-renewal .e-update {
    background: url("https://i.ibb.co/gMBWTy1/bg-event2-update.jpg") center 0 no-repeat;
    height: 1028px
}

.e-renewal .e-update .e-wrap {
    padding-top: 200px
}

.e-renewal .e-update .e-stitle {
    background-image: url("https://i.ibb.co/rk91HqW/bg-title-evt2-update.png");
    height: 169px
}

.e-renewal .e-update .content-box {
    position: absolute;
    top: 855px;
    left: 50%;
    transform: translateX(-50%);
    width: 1280px;
    display: table;
    table-layout: fixed
}

.e-renewal .e-update .content-box .cell {
    width: 100%;
    text-align: center
}

.e-renewal .e-update .content-box .cell .description {
    font-weight: 500;
    font-size: 16px;
    line-height: 34px
}

.e-renewal .e-section1 {
    background: url("https://i.ibb.co/s54DmrB/bg-event2-evt1.jpg") center 0 no-repeat;
    height: 924px
}

.e-renewal .e-section1 .e-stitle {
    background-image: url("https://i.ibb.co/1TDZMbN/bg-title-evt2-evt1.png");
    height: 139px
}

.e-renewal .e-section1 .e-info {
    margin-top: 24px
}

.e-renewal .e-section1 .content-box {
    width: 820px;
    height: 300px;
    position: absolute;
    top: 456px;
    left: 50%;
    transform: translateX(-50%)
}

.e-renewal .e-section1 .content-box .cell {
    position: absolute;
    top: 0;
    left: 0;
    width: 290px;
    height: 290px;
    overflow: hidden
}

.e-renewal .e-section1 .content-box .cell .reset {
    padding-top: 44px;
    font-weight: 700;
    font-size: 24px;
    color: #aab6cf;
    display: block;
    margin: 0 auto;
    line-height: normal
}

.e-renewal .e-section1 .content-box .cell .number {
    font-weight: 700;
    font-size: 34px;
    color: #fff;
    display: block;
    margin: 0 auto;
    line-height: 1em
}

.e-renewal .e-section1 .content-box .cell .skill {
    font-weight: 500;
    font-size: 18px;
    color: #fff;
    display: block;
    margin: 44px auto 0;
    line-height: 1.2em
}

.e-renewal .e-section1 .content-box .cell .skill span {
    display: block
}

.e-renewal .e-section1 .content-box .cell.second {
    left: 263px
}

.e-renewal .e-section1 .content-box .cell.third {
    left: auto;
    right: 5px
}

.e-renewal .e-section1 .content-desc {
    position: absolute;
    top: 800px;
    left: 0;
    width: 100%;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.3em;
    color: #666;
    text-align: center
}

.e-roulette .roulette-event1 {
    height: 1628px;
    background: url("https://i.ibb.co/0rz4QN4/bg-roulette.jpg") no-repeat 50% 0
}

.e-roulette .roulette-event1 .e-wrap {
    padding-top: 180px
}

.e-roulette .roulette-event1 .e-info {
    margin-top: 0
}

.e-roulette .roulette-event1 .e-stitle {
    background-image: url("https://i.ibb.co/VpHyxF0/bg-title-evt3.png");
    height: 116px
}

.e-roulette .roulette-event1 .e-info {
    color: #fff
}

.e-roulette .roulette-event1 .e-info b {
    color: #82a7c9
}

.e-roulette .roulette-event1 .e-period {
    margin-top: 0;
    position: absolute;
    top: 403px;
    left: 0;
    width: 100%
}

.e-roulette .roulette-event1 .roulette-tab {
    z-index: 10;
    width: 1200px;
    position: absolute;
    top: 638px;
    left: 50%;
    transform: translateX(-50%)
}

.e-roulette .roulette-event1 .roulette-tab ul {
    position: absolute;
    top: 0;
    right: 87px;
    width: 291px;
    height: 228px;
    overflow: hidden
}

.e-roulette .roulette-event1 .roulette-tab li {
    display: block;
    background: url("https://i.ibb.co/t3BX5Rp/bg-roulette-tab.png");
    width: 291px;
    height: 66px;
    font-size: 0;
    text-indent: -9999px;
    cursor: pointer
}

.e-roulette .roulette-event1 .roulette-tab li.t_goblin {
    background-position: 0 0
}

.e-roulette .roulette-event1 .roulette-tab li.t_goblin.selected {
    background-position: top right
}

.e-roulette .roulette-event1 .roulette-tab li.t_dimensional {
    background-position: center left
}

.e-roulette .roulette-event1 .roulette-tab li.t_dimensional.selected {
    background-position: center right
}

.e-roulette .roulette-event1 .roulette-tab li.t_playtime {
    background-position: bottom left
}

.e-roulette .roulette-event1 .roulette-tab li.t_playtime.selected {
    background-position: bottom right
}

.e-roulette .roulette-event1 .roulette-tooltip {
    position: absolute;
    top: 483px;
    right: 50%;
    margin-right: -527px;
    z-index: 10;
    width: 320px;
    height: 100px
}

.e-roulette .roulette-event1 .roulette-tooltip li {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100px
}

.e-roulette .roulette-event1 .roulette-tooltip li .switch {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 91px;
    height: 55px
}

.e-roulette .roulette-event1 .roulette-tooltip li .switch input+label {
    opacity: .6
}

.e-roulette .roulette-event1 .roulette-tooltip li .switch input:checked+label {
    opacity: 1;
    background-image: url("images/bg_on.png")
}

.e-roulette .roulette-event1 .roulette-tooltip li .switch input:checked+label:before {
    margin-right: 37px
}

.e-roulette .roulette-event1 .roulette-tooltip li .switch label {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: url("https://i.ibb.co/ncYGLgK/bg-off.png") 0 0 no-repeat;
    cursor: pointer;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.e-roulette .roulette-event1 .roulette-tooltip li .switch label:before {
    content: '';
    display: block;
    width: 41px;
    height: 41px;
    position: absolute;
    top: 7px;
    right: 6px;
    background: url("https://i.ibb.co/Vpt0ztS/ico-off.png") 0 0 no-repeat;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.e-roulette .roulette-event1 .roulette-tooltip__desc {
    text-align: right;
    margin-bottom: 10px;
    position: relative;
    right: 15px
}

.e-roulette .roulette-event1 .roulette-tooltip__desc dt {
    display: inline-block;
    font-size: 16px;
    line-height: 18px;
    color: #abc8ee;
    cursor: pointer;
    padding-right: 28px
}

.e-roulette .roulette-event1 .roulette-tooltip__desc dt::after {
    display: block;
    width: 21px;
    height: 21px;
    background: url("https://i.ibb.co/BVmk9L9/ico-tip.png") 0 0 no-repeat;
    content: '';
    position: absolute;
    bottom: -3px;
    right: 0
}

.e-roulette .roulette-event1 .roulette-tooltip__desc:hover dd {
    display: block
}

.e-roulette .roulette-event1 .roulette-tooltip__desc dd {
    display: none;
    position: absolute;
    top: calc(100% + 30px);
    right: 0;
    min-width: 320px;
    box-sizing: border-box;
    padding: 20px;
    border-radius: 20px;
    line-height: 18px;
    font-size: 14px;
    transform: translateY(calc(-50% + 15px));
    color: #8a96b3;
    background: #000;
    border: 3px solid #6e82a9;
    z-index: 1;
    box-shadow: 5px 5px 30px rgba(0,0,0,0.5)
}

.e-roulette .roulette-event1 .roulette-tooltip__single {
    left: 0
}

.e-roulette .roulette-event1 .roulette-tooltip__full {
    right: 0
}

.e-roulette .roulette-event1 .roulette-tooltip__full .switch input:checked+label {
    background-image: url("images/bg_on2.png") !important
}

.e-roulette .roulette-event1 .roulette-tooltip__full .switch label {
    background-image: url("https://i.ibb.co/tPmMcG1/bg-off2.png") !important
}

.e-roulette .roulette-event1 .roulette-tooltip__full .roulette-tooltip__desc dt {
    color: #daaa5b
}

.e-roulette .roulette-event1 .roulette-tooltip__full .roulette-tooltip__desc dt::after {
    background-position: bottom center
}

.e-roulette .roulette-event1 .roulette-tooltip__full .roulette-tooltip__desc dd {
    color: #b57306;
    border-color: #b57306
}

.e-roulette .roulette-event1 .roulette-common {
    width: 360px;
    height: 600px;
    position: absolute;
    top: 830px;
    left: 50%;
    margin-left: 196px;
    text-align: left
}

.e-roulette .roulette-event1 .roulette-common .goblin,.e-roulette .roulette-event1 .roulette-common .playtime {
    height: 129px;
    padding-right: 30px
}

.e-roulette .roulette-event1 .roulette-common .goblin .name,.e-roulette .roulette-event1 .roulette-common .playtime .name {
    display: block;
    width: 260px;
    height: 20px;
    margin: 0 auto 10px;
    background: url("https://i.ibb.co/br5QH6W/bg-roulette-point.png") center no-repeat;
    text-indent: -9999px;
    font-size: 0
}

.e-roulette .roulette-event1 .roulette-common .goblin .point,.e-roulette .roulette-event1 .roulette-common .playtime .point {
    display: block;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
    width: 260px;
    font-size: 26px;
    color: #fff;
    font-weight: bold;
    letter-spacing: -1px;
    font-family: Tahoma,sans-serif
}

.e-roulette .roulette-event1 .roulette-common .roulette-info {
    position: absolute;
    top: 80px;
    left: 10px;
    width: calc(100% - 40px);
    text-align: center;
    padding: 0 20px;
    line-height: 20px;
    color: #cfbeb4;
    font-size: 14px
}

.e-roulette .roulette-event1 .roulette-common .roulette-info em {
    color: #82a7c9
}

.e-roulette .roulette-event1 .roulette-common .roulette-key {
    background: url("https://i.ibb.co/Jddpnp1/key-bar.png") center bottom no-repeat;
    position: absolute;
    top: 308px;
    left: 0;
    width: 100%;
    height: 122px
}

.e-roulette .roulette-event1 .roulette-common .roulette-key h3 {
    display: block;
    width: 260px;
    height: 20px;
    margin: 0 auto 20px;
    background: url("https://i.ibb.co/NYnZQrc/bg-roulette-key.png") center no-repeat;
    text-indent: -9999px;
    font-size: 0
}

.e-roulette .roulette-event1 .roulette-common .roulette-key ul {
    overflow: hidden;
    min-width: 260px;
    padding: 0 20px;
    height: 82px
}

.e-roulette .roulette-event1 .roulette-common .roulette-key li {
    width: 75px;
    height: 71px;
    float: left;
    background: url("https://i.ibb.co/8xCWq1C/ico-lock.png") 0 0 no-repeat;
    opacity: .2
}

.e-roulette .roulette-event1 .roulette-common .roulette-key li:not(:first-child) {
    margin-left: -20px
}

.e-roulette .roulette-event1 .roulette-common .roulette-key li.active {
    opacity: 1
}

.e-roulette .roulette-event1 .roulette-common .goblin {
    display: block
}

.e-roulette .roulette-event1 .roulette-common .playtime {
    display: none
}

.e-roulette .roulette-event1 .roulette-common .playtime .name {
    background-image: url("https://i.ibb.co/8MfQyTX/bg-roulette-playtime.png")
}

.e-roulette .roulette-event1 .roulette-common .roulette-info {
    display: block
}

.e-roulette .roulette-event1 .roulette-common .roulette-info-playtime {
    display: none
}

.e-roulette .roulette-event1 .roulette-common .roulette-timer {
    position: absolute;
    top: 462px;
    left: 24px
}

.e-roulette .roulette-event1 .roulette-common .roulette-timer::before {
    content: '';
    position: absolute;
    background: url("https://i.ibb.co/ZMWs9QW/bg-time.png") center no-repeat;
    display: block;
    width: 403px;
    height: 91px;
    top: -17px;
    left: -46px;
    z-index: 0
}

.e-roulette .roulette-event1 .roulette-common .roulette-timer.off a {
    cursor: default;
    pointer-events: none
}

.e-roulette .roulette-event1 .roulette-common .roulette-timer strong {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
    line-height: 30px;
    margin-right: 5px;
    font-weight: normal;
    color: #fff;
    font-family: Tahoma,sans-serif;
    z-index: 1
}

.e-roulette .roulette-event1 .roulette-common .roulette-timer a {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 242px;
    height: 20px;
    background: url("https://i.ibb.co/TwS4cK9/bg-roulette-time.png") center no-repeat;
    text-indent: -9999px;
    font-size: 0;
    margin-right: 5px;
    z-index: 1
}

.e-roulette .roulette-event1 #playTimeRoulette.selected ~ .roulette-common .goblin {
    display: none
}

.e-roulette .roulette-event1 #playTimeRoulette.selected ~ .roulette-common .playtime {
    display: block
}

.e-roulette .roulette-event1 #playTimeRoulette.selected ~ .roulette-common .roulette-info {
    display: none
}

.e-roulette .roulette-event1 #playTimeRoulette.selected ~ .roulette-common .roulette-info-playtime {
    display: block
}

.e-roulette .roulette-event1 #playTimeRoulette.selected ~ .roulette-common .roulette-key,.e-roulette .roulette-event1 #playTimeRoulette.selected ~ .roulette-common .roulette-timer,.e-roulette .roulette-event1 #playTimeRoulette.selected ~ .roulette-common .roulette-info2 {
    display: none
}

.e-roulette .roulette-event1 #playTimeRoulette.selected ~ .roulette-tooltip {
    display: none
}

.e-roulette .roulette-event1 .roulette-cont {
    display: none;
    position: absolute;
    top: 586px;
    left: 104px;
    width: 684px;
    height: 684px
}

.e-roulette .roulette-event1 .roulette-cont.selected {
    display: block
}

.e-roulette .roulette-event1 .roulette-cont .roulette-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.e-roulette .roulette-event1 .roulette-cont .roulette-stage .stop {
    display: block;
    width: 148px;
    height: 151px;
    position: absolute;
    top: -75px;
    left: 50%;
    margin-left: -72px;
    z-index: 2;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url("https://i.ibb.co/6wL8jW7/ico-stop.png")
}

.e-roulette .roulette-event1 .roulette-cont .roulette-stage .board {
    width: 100%;
    height: 100%;
    overflow: hidden
}

.e-roulette .roulette-event1 .roulette-cont .roulette-stage .start {
    display: block;
    width: 218px;
    height: 218px;
    background-image: url("https://i.ibb.co/DtPm0RL/btn-start.png");
    background-repeat: no-repeat;
    background-position-x: 0;
    background-position-y: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.e-roulette .roulette-event1 .roulette-cont .roulette-stage::after {
    content: "";
    width: 100%;
    height: 26px;
    background: url("https://i.ibb.co/D418qCw/bg-roulette-tab-txt.png") center 0 no-repeat;
    display: block;
    position: absolute;
    bottom: -37px;
    left: 0
}

.e-roulette .roulette-event1 .roulette-cont#dimensionalRoulette .roulette-stage::after {
    background-position: center center
}

.e-roulette .roulette-event1 .roulette-cont#playTimeRoulette .roulette-stage::after {
    background-position: center bottom
}

.e-roulette .roulette-event1 .roulette-cont .roulette-type {
    position: absolute;
    top: -185px;
    left: 0;
    width: 1040px;
    text-align: center;
    font-size: 24px;
    font-weight: bold
}

.e-roulette .roulette-event1 .roulette-cont .roulette-type strong {
    display: none
}

.e-roulette .roulette-event1 .roulette-cont .roulette-type span {
    color: #f2e0c9
}

.e-roulette .roulette-event1 .roulette-cont .roulette-type em {
    font-weight: bold;
    color: #d57950
}

.e-roulette .roulette-event1 .roulette-info2 {
    position: absolute;
    top: 1414px;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 20px;
    color: #fff;
    font-size: 14px;
    font-weight: 500
}

.e-roulette .roulette-event1 .btnset {
    width: 750px;
    position: absolute;
    top: 1500px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 0;
    line-height: 0
}

.e-roulette .roulette-event1 .btnset button {
    min-width: 220px;
    font-size: 16px;
    line-height: 50px;
    height: 50px;
    margin: 0 10px;
    padding: 0 30px;
    background: #2b538c;
    border: 1px solid #59728d;
    color: #fff
}

.e-roulette .roulette-event2 .e-prize {
    height: 1093px;
    background: url("https://i.ibb.co/NmCjKg4/bg-roulette-prize.jpg") no-repeat 50% 0
}

.e-roulette .roulette-event2 .e-prize .e-wrap {
    padding-top: 120px
}

.e-roulette .roulette-event2 .e-prize .e-stitle {
    background-image: url("https://i.ibb.co/gyXqbkS/bg-title-evt3-prize.png");
    height: 153px
}

.e-roulette .roulette-event2 .e-prize .content-box {
    position: absolute;
    top: 345px;
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
    height: 150px;
    color: #515e6f;
    font-weight: 500
}

.e-roulette .roulette-event2 .e-prize .content-box .subtitle {
    font-weight: 700;
    color: #14253f;
    display: block;
    padding-bottom: 10px;
    line-height: 1em;
    font-size: 22px
}

.e-roulette .roulette-event2 .e-prize .content-box .inner {
    width: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%)
}

.e-roulette .roulette-event2 .e-prize .content-box .inner-box+.inner-box {
    margin-top: 20px
}

.e-roulette .roulette-event2 .e-prize .item-info {
    color: #fff;
    font-size: 22px;
    font-weight: 500;
    line-height: 27px;
    text-align: center;
    position: absolute;
    top: 665px;
    left: 0;
    width: 100%;
    height: 82px;
    overflow: hidden
}

.e-roulette .roulette-event2 .e-prize .point-box {
    overflow: hidden;
    position: absolute;
    top: 822px;
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
    display: table;
    table-layout: fixed
}

.e-roulette .roulette-event2 .e-prize .point-box .point {
    position: relative;
    width: 50%;
    display: table-cell
}

.e-roulette .roulette-event2 .e-prize .point-box .point em {
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    line-height: 1em;
    display: block
}

.e-roulette .roulette-event2 .e-prize .point-box .point span {
    color: #aab6cf;
    font-size: 18px;
    font-weight: 700;
    line-height: 1em;
    display: block;
    margin-top: 75px
}

.e-roulette .roulette-event2 .e-prize .point-box .point.third span {
    color: #4d80c4
}

.e-roulette .roulette-event2 .info {
    padding-top: 34px;
    width: 100%;
    height: 166px;
    line-height: 30px;
    color: #f2cfb0;
    font-size: 20px;
    position: absolute;
    top: 779px;
    left: 0;
    overflow: hidden
}

.e-roulette .roulette-event2 .roulette-point {
    position: absolute;
    top: 656px;
    left: 50%;
    margin-left: -480px;
    overflow: hidden;
    width: 960px;
    height: 121px
}

.e-roulette .roulette-event2 .roulette-point .type {
    float: left;
    width: 33.3%;
    text-align: center;
    letter-spacing: -0.5px
}

.e-roulette .roulette-event2 .roulette-point .type .name {
    display: block;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    color: #f2cfb0
}

.e-roulette .roulette-event2 .roulette-point .type .point {
    display: block;
    height: 60px;
    line-height: 60px;
    color: #d5794f;
    font-size: 20px
}

.e-roulette .e-rankinglist {
    height: 1424px;
    overflow: hidden;
    background: url("https://i.ibb.co/2c6Dh4h/bg-roulette-list.jpg") no-repeat 50% 0
}

.e-roulette .e-rankinglist .e-wrap {
    padding-top: 175px
}

.e-roulette .e-rankinglist .e-stitle {
    background-image: url("https://i.ibb.co/L5GKmxg/bg-title-evt3-list.png");
    height: 67px;
    z-index: 200;
    position: relative
}

.e-roulette .e-rankinglist .update {
    position: absolute;
    right: 150px;
    top: 435px;
    color: #999
}

.e-roulette .e-rankinglist .week {
    position: absolute;
    left: 0;
    top: 326px;
    z-index: 3;
    width: 100%;
    text-align: center
}

.e-roulette .e-rankinglist .week .label {
    display: inline-block;
    vertical-align: middle;
    margin-right: 20px;
    text-align: left;
    word-break: break-all;
    font-size: 20px;
    color: #aab6cf
}

.e-roulette .e-rankinglist .week .selectbox {
    position: relative;
    z-index: 6;
    display: inline-block;
    vertical-align: middle;
    width: 184px;
    height: 45px;
    box-sizing: border-box
}

.e-roulette .e-rankinglist .week .selectbox select {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    filter: alpha(opacity=0);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 10px 38px 10px 16px;
    outline: none 0;
    font-size: 20px;
    background: #000 url("https://i.ibb.co/jHqjRF7/ico-select.png") calc(100% - 16px) 50% no-repeat;
    cursor: pointer;
    border: 0;
    color: #aab6cf
}

.e-roulette .e-rankinglist .week .selectbox option {
    background: #000
}

.e-roulette .e-rankinglist .week .selectbox select::-ms-expand {
    display: none
}

.e-roulette .roulette-ranking {
    position: absolute;
    top: 410px;
    left: 50%;
    margin-left: -640px;
    width: 1280px;
    height: 730px;
    box-sizing: border-box
}

.e-roulette .roulette-ranking .ranking-dimmed {
    z-index: 10;
    position: absolute;
    left: 50%;
    top: -410px;
    transform: translate(-50%,0);
    width: 100vw;
    height: 1220px;
    background: url("images/bg_dimmed.jpg") no-repeat 50% 0
}

.e-roulette .roulette-ranking .ranking-dimmed p {
    font-size: 0;
    opacity: 0
}

.e-roulette .roulette-ranking .ranking-dimmed.end {
    background-image: url("images/bg_dimmed_end.jpg")
}

.e-roulette .roulette-ranking .ranking-box {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    width: 1000px;
    font-size: 0;
    line-height: 0
}

.e-roulette .roulette-ranking .ranking-box.ranking-top {
    top: 75px;
    height: 645px
}

.e-roulette .roulette-ranking .ranking-box.ranking-top li {
    display: block;
    width: 130px;
    height: 350px;
    position: absolute;
    top: 0
}

.e-roulette .roulette-ranking .ranking-box.ranking-top li i,.e-roulette .roulette-ranking .ranking-box.ranking-top li span,.e-roulette .roulette-ranking .ranking-box.ranking-top li em {
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 auto;
    overflow: hidden;
    line-height: 1em
}

.e-roulette .roulette-ranking .ranking-box.ranking-top li span {
    font-size: 24px;
    top: 115px
}

.e-roulette .roulette-ranking .ranking-box.ranking-top li em {
    font-size: 16px;
    top: 145px
}

.e-roulette .roulette-ranking .ranking-box.ranking-top li i {
    font-size: 17px;
    font-weight: bold;
    top: 252px;
    text-indent: 2px
}

.e-roulette .roulette-ranking .ranking-box.ranking-top li.no1 {
    left: 153px
}

.e-roulette .roulette-ranking .ranking-box.ranking-top li.no1 em,.e-roulette .roulette-ranking .ranking-box.ranking-top li.no1 span {
    color: #8f7018
}

.e-roulette .roulette-ranking .ranking-box.ranking-top li.no1 i {
    color: #ffe6c0
}

.e-roulette .roulette-ranking .ranking-box.ranking-top li.no2 {
    left: 431px
}

.e-roulette .roulette-ranking .ranking-box.ranking-top li.no2 em,.e-roulette .roulette-ranking .ranking-box.ranking-top li.no2 span {
    color: #959190
}

.e-roulette .roulette-ranking .ranking-box.ranking-top li.no2 i {
    color: #bebebe
}

.e-roulette .roulette-ranking .ranking-box.ranking-top li.no3 {
    left: 710px
}

.e-roulette .roulette-ranking .ranking-box.ranking-top li.no3 em,.e-roulette .roulette-ranking .ranking-box.ranking-top li.no3 span {
    color: #996d61
}

.e-roulette .roulette-ranking .ranking-box.ranking-top li.no3 i {
    color: #c9a193
}

.e-roulette .roulette-ranking .ranking-box.ranking-top li.no4 {
    top: auto;
    bottom: -1px;
    left: 281px
}

.e-roulette .roulette-ranking .ranking-box.ranking-top li.no4 em,.e-roulette .roulette-ranking .ranking-box.ranking-top li.no4 span {
    color: #7cc0eb
}

.e-roulette .roulette-ranking .ranking-box.ranking-top li.no4 i {
    color: #c1e6fa
}

.e-roulette .roulette-ranking .ranking-box.ranking-top li.no5 {
    top: auto;
    bottom: -1px;
    left: auto;
    right: 297px
}

.e-roulette .roulette-ranking .ranking-box.ranking-top li.no5 em,.e-roulette .roulette-ranking .ranking-box.ranking-top li.no5 span {
    color: #7cc0eb
}

.e-roulette .roulette-ranking .ranking-box.ranking-top li.no5 i {
    color: #c1e6fa
}

.e-roulette .roulette-ranking button {
    position: absolute;
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 263px;
    height: 68px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    padding-bottom: 4px;
    background: url("https://i.ibb.co/tLBC7Kx/btn-attention.png") top center no-repeat
}

.e-roulette .roulette-ranking button:disabled,.e-roulette .roulette-ranking button.disabled {
    color: #868685;
    background-position-y: bottom
}

.e-roulette .roulette-ranking button.btn-ranking {
    left: calc(50% - 132px)
}

.e-roulette .roulette-ranking button.btn-attention {
    color: #fff;
    background-position-y: bottom;
    left: calc(50% + 132px);
    z-index: 100
}

.e-roulette .e-rewards {
    height: 1077px;
    background: url("https://i.ibb.co/VQBZR7j/bg-roulette-rewards.jpg") no-repeat 50% 0
}

.e-roulette .e-rewards .e-wrap {
    padding-top: 120px
}

.e-roulette .e-rewards .e-stitle {
    background-image: url("https://i.ibb.co/FxSCBmx/bg-title-evt3-rewards.png");
    height: 51px
}

.e-roulette .ranking-new {
    height: 1971px;
    background: url("https://i.ibb.co/JkJM3gV/bg-roulette-new.jpg") no-repeat 50% 0
}

.e-roulette .ranking-new .e-stitle {
    background-image: url("https://i.ibb.co/Dbs3sjQ/bg-title-evt3-new.png");
    height: 263px
}

.e-roulette .ranking-new .e-week {
    position: absolute;
    top: 1020px;
    left: 50%;
    width: 1000px;
    transform: translateX(-50%)
}

.e-roulette .ranking-new .e-week .title {
    font-size: 34px;
    font-weight: bold;
    text-align: center;
    color: #aab6cf;
    height: 70px;
    line-height: 70px
}

.e-roulette .ranking-new .e-week .rp {
    position: absolute;
    top: 94px;
    left: 0;
    display: table;
    width: 100%;
    table-layout: fixed
}

.e-roulette .ranking-new .e-week .rp li {
    display: table-cell;
    text-align: center;
    font-size: 18px;
    font-weight: 700
}

.e-roulette .ranking-new .e-week .item {
    position: absolute;
    top: 283px;
    left: -5px;
    display: table;
    width: 100%;
    table-layout: fixed
}

.e-roulette .ranking-new .e-week .item li {
    display: table-cell;
    text-align: center;
    font-size: 18px;
    font-weight: 700
}

.e-roulette .ranking-new .e-attention {
    text-align: left
}

.e-roulette .ranking-new .e-attention.top p {
    padding-left: 60px;
    color: #fff;
    font-size: 16px
}

.e-roulette .ranking-new .e-attention.top p span {
    color: #4d80c4
}

.e-roulette .ranking-new .e-attention.top p::before {
    display: none !important
}

.e-roulette .ranking-new .e-attention.top__01 {
    top: 630px
}

.e-roulette .ranking-new .e-attention.top__02 {
    top: 794px
}

.e-roulette .ranking-new .e-attention.top__03 {
    top: 867px
}

.e-roulette .ranking-new .e-attention.bot {
    top: 1700px
}

.e-sales {
    height: 5343px;
    background: url("https://i.ibb.co/N319K8f/bg-event4.jpg") center 0 no-repeat
}

.e-sales .e-stitle {
    background: 0;
    display: none
}

.e-sales .e-section-top {
    height: 321px
}

.e-sales .e-section-top .e-period {
    position: absolute;
    left: 0;
    top: 195px;
    width: 100%;
    text-align: center;
    line-height: 65px;
    margin-top: 0
}

.e-sales .e-section1 {
    height: 1121px
}

.e-sales .e-section1 .e-info {
    position: absolute;
    left: 0;
    top: 653px;
    width: 100%;
    text-align: center;
    margin-top: 0;
    font-size: 22px;
    color: #fff;
    font-weight: 700
}

.e-sales .e-section2 {
    height: 827px
}

.e-sales .e-section3 {
    height: 1897px
}

.e-sales .e-section4 {
    height: 1176px
}

div[class*="pop-"] {
    display: none;
    position: absolute;
    left: 50%;
    z-index: 9999;
    box-sizing: border-box;
    width: 740px;
    background: #fff
}

div[class*="pop-"] .attention-list {
    padding: 40px 50px
}

div[class*="pop-"] .attention-list li {
    position: relative;
    padding-left: 11px;
    line-height: 26px;
    font-size: 15px;
    color: #484848
}

div[class*="pop-"] .attention-list li.em:before {
    color: #1a345e
}

div[class*="pop-"] .attention-list>li:before {
    content: '\204E';
    display: block;
    position: absolute;
    top: -5px;
    left: 0
}

div[class*="pop-"] .attention-list>li li:before {
    content: '-';
    display: block;
    position: absolute;
    top: -2px;
    left: 0
}

div[class*="pop-"] .attention-list em {
    color: #1a345e;
    font-weight: 500
}

div[class*="pop-"] .tab-cont {
    overflow: hidden;
    position: relative;
    padding: 40px
}

div[class*="pop-"] table {
    width: 100%
}

div[class*="pop-"] th {
    height: 60px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #444;
    border-top: 1px solid rgba(161,161,161,0.5);
    border-bottom: 1px solid rgba(161,161,161,0.5)
}

div[class*="pop-"] td {
    text-align: center;
    font-size: 15px;
    color: #484848;
    padding: 10px 5px;
    border-bottom: 1px solid rgba(161,161,161,0.2)
}

div[class*="pop-"] tr:last-child td {
    border-bottom: 1px solid rgba(161,161,161,0.5)
}

.pop-close {
    position: absolute;
    top: 0;
    right: 20px;
    overflow: hidden;
    width: 70px;
    height: 70px;
    text-indent: -1000em;
    cursor: pointer;
    background: url("https://i.ibb.co/LxWW0kX/ico-pop-close.png") 50% 50% no-repeat
}

.pop-title {
    padding: 0 40px;
    height: 70px;
    font-size: 22px;
    color: #fff;
    line-height: 70px;
    background: #1a345e
}

.pop-prizes {
    height: auto;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    padding-bottom: 20px
}

.pop-prizes .tab-list {
    position: relative;
    z-index: 1;
    padding: 40px 0 0;
    overflow: hidden;
    width: calc(100% - 80px);
    margin: 0 auto -20px;
    display: table;
    table-layout: fixed
}

.pop-prizes .tab-list li {
    position: relative;
    display: table-cell;
    width: 50%
}

.pop-prizes .tab-list li a {
    display: block;
    color: #a1a1a1;
    border: 1px solid rgba(161,161,161,0.4);
    text-align: center;
    padding: 15px;
    font-size: 16px;
    font-weight: 500
}

html[lang=pt] .pop-prizes .tab-list li a,html[lang=es] .pop-prizes .tab-list li a {
    font-size: 14px
}

.pop-prizes .tab-list li.on a {
    opacity: 1;
    background: #172d4c;
    color: #fff
}

.pop-prizes .tbl-chance {
    padding: 0 40px 40px
}

.pop-ranking .ranking-table {
    padding: 40px 40px 0
}

.pop-ranking .ranking-table tr.no1 td,.pop-ranking .ranking-table tr.no2 td,.pop-ranking .ranking-table tr.no3 td {
    background: #f2f4f8
}

.pager {
    clear: both;
    position: relative;
    padding: 20px 0;
    text-align: center;
    font-size: 0;
    z-index: 1;
    *z-index: 3
}

.pager.even.last_child {
    border-bottom: 0
}

.pager a {
    display: inline-block;
    margin: 0 5px;
    color: #afb4b9;
    border-bottom: 1px solid transparent;
    text-align: center;
    line-height: 20px;
    font-size: 15px
}

.pager a:hover {
    border-color: #f2cfb0
}

.pager a:before,.pager .current:before {
    content: '['
}

.pager a:after,.pager .current:after {
    content: ']'
}

.pager a.first:hover,.pager a.previous:hover,.pager a.next:hover,.pager a.last:hover {
    padding: 0
}

.pager .first,.pager .previous,.pager .next,.pager .last {
    display: inline-block;
    width: 35px;
    height: 35px;
    text-indent: -10000px;
    border: 0;
    margin: 0 2px;
    padding: 0;
    background-image: url("images/ico_page.png");
    background-repeat: no-repeat;
    background-position-y: 0
}

.pager .previous,.pager .previous:hover {
    margin: 0 0 0 -6px;
    background-position-x: -35px
}

.pager .next,.pager .next:hover {
    margin: 0 -6px 0 0;
    background-position-x: -70px
}

.pager .first,.pager .first:hover {
    margin: 0 2px;
    background-position-x: 0
}

.pager .last,.pager .last:hover {
    margin: 0 2px;
    background-position-x: -105px
}

.pager .current {
    display: inline-block;
    margin: 0 5px;
    color: #484848;
    text-align: center;
    line-height: 20px;
    font-size: 15px;
    font-weight: 900;
    border-bottom: 1px solid #484848
}

.pager .disabled {
    display: none
}

.pager span,.pager a,.pager a:hover {
    display: inline-block;
    vertical-align: middle
}

*+html .pager {
    margin-top: 0
}

.search-area {
    position: relative;
    z-index: 1;
    text-align: right;
    padding: 20px 40px 8px
}

.search-area ~ .tbl-point {
    margin: 0 auto 60px;
    width: 660px
}

.search-area ~ .tbl-point td.none {
    color: rgba(72,72,72,0.4)
}

.search-area fieldset {
    font-size: 0;
    line-height: 0
}

.search-area .inp-search,.search-area .btn-search {
    display: inline-block;
    vertical-align: top
}

.search-area .search-title {
    position: absolute;
    top: 28px;
    left: 40px;
    font-size: 24px;
    color: #172d4c;
    font-weight: 700
}

.search-area .search-title:after {
    content: ':'
}

.search-area .inp-search {
    position: relative;
    width: 224px;
    height: 40px;
    padding: 10px 14px 8px;
    margin: 0 6px 0 0;
    background: #fff;
    border: 1px solid #95a2b8;
    color: #95a2b8;
    font-size: 16px
}

.search-area .inp-search:-ms-input-placeholder {
    color: #95a2b8
}

.search-area .inp-search::-webkit-input-placeholder {
    color: #95a2b8
}

.search-area .inp-search::-moz-placeholder {
    color: #95a2b8
}

.search-area .inp-search::-moz-placeholder {
    color: #95a2b8
}

.search-area .btn-search {
    height: 40px;
    line-height: 40px;
    padding: 0 16px;
    vertical-align: middle;
    background: #95a2b8;
    color: #fff;
    border: 1px solid #95a2b8
}

.shadow {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #000;
    opacity: .6;
    filter: alpha(opacity=60);
    z-index: 9998
}

@-webkit-keyframes spreadSmog {
    0% {
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
        opacity: 0
    }

    45% {
        transform: scale(0.75);
        -webkit-transform: scale(0.75);
        opacity: 1
    }

    90% {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 0
    }

    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 0
    }
}

@keyframes spreadSmog {
    0% {
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
        opacity: 0
    }

    45% {
        transform: scale(0.75);
        -webkit-transform: scale(0.75);
        opacity: 1
    }

    90% {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 0
    }

    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 0
    }
}

@-webkit-keyframes spin {
    0% {
        opacity: .2;
        -webkit-transform: rotateY(0) scale(0.8);
        transform: rotateY(0) scale(0.8)
    }

    20% {
        opacity: .4;
        -webkit-transform: rotateY(180deg) scale(0.9);
        transform: rotateY(180deg) scale(0.9)
    }

    50% {
        opacity: 1;
        -webkit-transform: rotateY(360deg) scale(1);
        transform: rotateY(360deg) scale(1)
    }

    80% {
        opacity: .4;
        -webkit-transform: rotateY(-180deg) scale(0.9);
        transform: rotateY(-180deg) scale(0.9)
    }

    100% {
        opacity: .2;
        -webkit-transform: rotateY(0) scale(0.8);
        transform: rotateY(0) scale(0.8)
    }
}

@keyframes spin {
    0% {
        opacity: .2;
        -webkit-transform: rotateY(0) scale(0.8);
        transform: rotateY(0) scale(0.8)
    }

    20% {
        opacity: .4;
        -webkit-transform: rotateY(180deg) scale(0.9);
        transform: rotateY(180deg) scale(0.9)
    }

    50% {
        opacity: 1;
        -webkit-transform: rotateY(360deg) scale(1);
        transform: rotateY(360deg) scale(1)
    }

    80% {
        opacity: .4;
        -webkit-transform: rotateY(-180deg) scale(0.9);
        transform: rotateY(-180deg) scale(0.9)
    }

    100% {
        opacity: .2;
        -webkit-transform: rotateY(0) scale(0.8);
        transform: rotateY(0) scale(0.8)
    }
}

@-webkit-keyframes slideUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(60px);
        transform: translateY(60px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes slideUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(60px);
        transform: translateY(60px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}