.bg1{height: 720px; background-image: url(//img1.itemmania.com/new_images/event/e260318_lineage_m_new_server_open/img01.jpg);}
.bg2{height: 1140px; background-image: url(//img1.itemmania.com/new_images/event/e260318_lineage_m_new_server_open/img02.jpg);}
.bg3{height: 2060px; background-image: url(//img1.itemmania.com/new_images/event/e260318_lineage_m_new_server_open/img03.jpg);}
.bg4{height: 905px; background-image: url(//img1.itemmania.com/new_images/event/e260318_lineage_m_new_server_open/img04.jpg);}

.done{pointer-events: none;}
.gray{filter: grayscale(1);}

.bg1 .e_date{color: #f3f3f3;}
.bg1 .layer_banner{position: fixed; top: 40vh; right: calc((100vw - 1200px - 160px) / 2); z-index: 1;}
.bg1 .layer_banner.animation{animation: banner_animation 1s infinite alternate;}

@keyframes banner_animation {
    from {transform: translateY(0px);}
    to {transform: translateY(20px);}
}

.bg2 .total_mileage{position: absolute; top: 390px; width: 100%; text-align: center; font-family: "tohoma", sans-serif; font-size: 80px; font-weight: bold; background: linear-gradient(to bottom, #fef3b2, #fb9117); background-clip: text; -webkit-text-fill-color: transparent;}
.bg2 .my_event_mileage{position: absolute; top: 583px; right: 404px; font-family: "tohoma", sans-serif; font-size: 33px; font-weight: bold; color: #ffd064; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.bg2 .event_btn_wrapper{position: absolute; top: 681px; width: 100%; display: flex; justify-content: center;}

.bg3 .inner{height: 100%;}
.bg3 .appearance_info_board{position: absolute; top: 784px; left: 490px; width: 394px; height: 209px; display: flex; flex-direction: column; gap: 12px;}
.bg3 .appearance_info_board .information{width: 100%; height: 44px; text-align: center; align-content: center; background-color: #000;}
.bg3 .appearance_info_board .information span{font-size: 22px; font-weight: bold; background: linear-gradient(to bottom, #fff, #fac285); background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 0 #FFF, 0 0 10px #fac285, 0 0 20px #FF6541, 0 0 30px #FF6541, 0 0 40px #FF6541, 0 0 55px #FF6541}
.bg3 .screenshot_img_wrapper{position: absolute; top: 1030px; width: 100%; height: 570px; padding-top: 160px; display: grid; grid-template-columns: repeat(4, 195px); gap: 20px; justify-content: center;}
.bg3 .screenshot_img_wrapper img{width: 195px; height: 195px; border-radius: 15px;}
.bg3 .screenshot_pagination{position: absolute; top: 1620px; width: 100%;}
.bg3 .screenshot_pagination .g_paging{margin: 0;}
.bg3 .screenshot_pagination .g_paging .cpnt{background-image: none; color: #bca794; border: 0;}
.bg3 .screenshot_pagination .g_paging .cpnt a{width: 30px; height: 30px;}
.bg3 .screenshot_pagination .g_paging .cpnt a:before{font-size: 17px; text-align: center; display: inline-block; width: 100%; line-height: 30px;}
.bg3 .screenshot_pagination .g_paging .cpnt.first a:before{content: '<<';}
.bg3 .screenshot_pagination .g_paging .cpnt.prev a:before{content: '<';}
.bg3 .screenshot_pagination .g_paging .cpnt.next a:before{content: '>';}
.bg3 .screenshot_pagination .g_paging .cpnt.last a:before{content: '>>';}
.bg3 .screenshot_pagination .g_paging .page_nums{font-size: 17px; font-weight: bold; color: #bca794; margin: 0 8px;}
.bg3 .screenshot_pagination .g_paging .page_nums a:hover{border-width: 0;}
.bg3 .screenshot_pagination .g_paging .page_nums strong{color: #000; background-color: #856c55;}
.bg3 .screenshot_pagination .g_paging .page_nums a, .bg3 .screenshot_pagination .g_paging .page_nums strong{width: 30px; height: 30px; line-height: 30px;}
.bg3 .event_btn_wrapper{position: absolute; bottom: 117px; left: 175px; width: 849px; height: 70px; align-content: center; background-color: #070504; border: 1px solid #5c4b3c; border-radius: 15px; padding: 0 30px;}
.bg3 .event_btn_wrapper .event_btn{position: relative;}
.bg3 .event_btn_wrapper .event_btn label[for="upload_screenshot"]{position: absolute; top: 0; left: 0; width: 170px; height: 40px; cursor: pointer;}
.bg3 .event_btn_wrapper input[type="file"]{position: absolute; width: 0; height: 0; opacity: 0;}

.bg4 .event_btn_wrapper{position: absolute; top: 673px; width: 100%; display: flex; gap: 30px; justify-content: center;}
.bg4 .event_btn_wrapper .code_input_wrapper{width: 585px; height: 70px; text-align: center; align-content: center; background-color: #070504; border: 1px solid #5c4b3c; border-radius: 15px;}
.bg4 .event_btn_wrapper .code_input_wrapper .code_number{border-width: 0; text-align: left; font-size: 28px; color: #FFF; font-weight: bold; background-color: transparent;}
.bg4 .event_btn_wrapper .code_input_wrapper .code_number:focus{outline-width: 0;}
.bg4 .event_btn_wrapper .code_input_wrapper .code_number:focus::placeholder{color: transparent;}
.bg4 .event_btn_wrapper .code_input_wrapper .code_number::placeholder{font-size: 18px; color: #909090; text-align: center;}

.notice{background-color: #121212;}
.e_notice_title{color: #d4d4d4; padding-top: 40px;}
.e_notice{color: #d4d4d4; word-break: keep-all; line-height: 26px;}