@font-face {
    font-family: 'Futura Bold';
    url('Futura Bold.otf') format('woff'),
    font-weight: normal;
    font-style: normal;
}


.bg1{height:auto; max-height:384px; background-image:url(/image/Event/E241114_attendance_check/bg_01.jpg);overflow:hidden;}
.bg2{height:auto; max-height: 986px; background-image:url(/image/Event/E241114_attendance_check/bg_02.jpg);overflow:hidden;}
.bg3{height:auto;background-image:url(/image/Event/E241114_attendance_check/bg_03.jpg);overflow:hidden;}
.bg4{height:auto;background-image:url(/image/Event/E241114_attendance_check/bg_04.jpg);overflow:hidden;}

.bg1 .title_wrapper{position:relative; max-width: 600px; width:100%; height:auto; margin:0 auto;}
.bg1 .title_wrapper img{width:100%;}
.bg1 #period_event{position:absolute; color:#fff; left:50%; transform: translate(-50%); top:5%;}
.bg1 #period_event #period{font-family: 'Futura Bold'; font-weight: bold;}

.bg1 button{display: block; margin:0 auto;position:absolute;  left:50%; transform: translate(-50%); }
.bg1 img.title_img{width:100%; max-width:600px;}
.bg1 button{bottom:0; left:50%; transform: translate(-50%); background-color: transparent;}
#close_layer{position:absolute;top:10px;right:10px;width:24px;height:24px;background-image:url(/image/Trade/btn_ex.png);cursor:pointer; }

.bg2 .calendar_wrapper{position:relative; max-width: 600px; width:100%; height:auto; margin:0 auto;}
.bg2 .calendar_wrapper img{width:100%;}
.bg2 .calender_title{position:absolute; top:24%; width: 90%; display: flex; left:50%; transform: translate(-50%);}
.bg2 .calender_title span{font-size:36px; color: green; font-family: 'Futura Bold'; font-weight: bold;}
.bg2 .calender_title span:first-child{margin-right:auto; margin-top: 2%; color:#000}
.bg2 .calender_title span:first-child a{font-size:20px;}
.bg2 .calender_title span:last-child{margin-right:4%; margin-top:0.5%;}
.bg2 .calendar{position:absolute;width:90%; height:40%; top:35.5%; left:50%; transform: translate(-50%); display: flex; flex-wrap: wrap;}

.bg2 .calendar li{width:14.25%; height:20%; display: flex; align-items:flex-start; justify-content: end; position: relative; font-weight: bold; }
.bg2 .calendar li span{margin-right:10px;}
.bg2 .calendar li .check_img{position:absolute; width:70%; bottom:9%; left:10%;}
.bg2 .calendar li .day999{position:absolute; width:80%; bottom:0; left:50%; transform: translate(-50%);}

.bg2 .event_btn_wrap{position:absolute; bottom:14%; text-align: center; width:100%;}
.bg2 .event_btn_wrap img{width:80%;}

.bg3 .event2{position:relative; max-width: 600px; width:100%; height:auto; margin:0 auto;}
.bg3 .event2>img{width:100%;}
.bg3 .ball_wrapper{position:absolute; width:100%; bottom:10%;}
.bg3 .ball_wrapper ul{ display: flex; width:100%; justify-content: center; align-items: center;}
.bg3 .ball_wrapper ul li{flex:1; position:relative;}
.bg3 .ball_wrapper ul li:first-child{text-align: right;}
.bg3 .ball_wrapper ul li:last-child{text-align: left;}
.bg3 .ball_wrapper ul li img{width:80%;}
img.filter{-webkit-filter: grayscale(100%); filter: grayscale(100%);}
.bg3 .ball_wrapper ul li img.finish{position:absolute; bottom:20%; left:50%; transform: translate(-50%);}

.bg4 .event3{position:relative; max-width: 600px; width:100%; height:auto; margin:0 auto;}
.bg4 .event3>img{width:100%;}
.bg4 .event3 .event3_btn_wrapper{width:100%; text-align: center; position: absolute; bottom:30%;}
.bg4 .event3 .event3_btn_wrapper button{background-color: transparent;}
.bg4 .event3 .event3_prize_wrapper {position:absolute; bottom:8%; width:90%; left:50%; transform: translate(-50%); text-align: center;}
.bg4 .event3 .event3_prize_wrapper img{width:100%;}
.bg4 .event3 .close_prize{position:absolute; bottom:6%; width:100%; left:50%; transform: translate(-50%); text-align: center;}
.bg4 .event3 .close_prize img{width:100%;}

.notice{background-color:#000;}
.notice .inner{padding:35px 20px 60px;}
.notice_title{font-size:25px;font-weight:bold;color:#d4d4d4;margin-bottom:25px;}
.notice_list{font-size:15px;color:#D4D4D4}

.layer .inner{text-align: left; max-width:600px; width:100%;}
.layer .inner dl{width:100%;}
.layer .inner dt{width:100%; background-color: #000; color:#fff; margin-bottom:15px; line-height: 38px;}
.layer .inner dt .layer_title{margin-left:15px;}
.layer .inner dd ul{padding:15px;}
.layer .inner dt span{float: right; margin-right:15px; cursor: pointer;}

@media (max-width:576px) {
    .bg2 .calender_title{position:absolute; top:24%; width: 90%; display: flex; left:50%; transform: translate(-50%);}
    .bg2 .calender_title span{font-size:1.5rem; color: green; font-weight:bold;}
    .bg2 .calender_title span:first-child a{font-size:1rem;}
}