@charset "utf-8";

html,body { width:100%; max-width:2560px; min-width:1428px; margin:0 auto; font-family:"Noto Sans KR",sans-serif; background-color:#000000; }
h1,h2,h3,h4,h5,h6,th,td,input,select,textarea,button,b,strong,span { font-family:"Noto Sans KR",sans-serif; }
button:focus,input:focus,textarea:focus { outline:0; }

#wrapper { position:relative; overflow:hidden; width:100%; max-width:2560px; min-width:1428px; margin:0 auto; font-size:0; line-height:0; }
#wrapper a { font-family:"Noto Sans KR",sans-serif; cursor:pointer; }
#wrapper button { font-family:"Noto Sans KR",sans-serif; outline:none; cursor:pointer; }
#wrapper button:focus { outline:none; }

#loader { z-index:1024; position:fixed; left:0; top:0; width:100%; height:100%; background-color:#000000; }

img { image-rendering:-webkit-optimize-contrast; }

#quick { z-index:32; position:absolute; right:32px; top:768px; width:130px; }
#quick button,
#quick a { display:block; width:130px; height:130px; filter:drop-shadow(0 4px 4px rgba(18,12,56,0.4)); }
#quick .btn_notice { margin-bottom:8px; background:url("https://ssl.nexon.com/s2/game/fo4/event/2022/220623_attendancebook/btn_quick.png") 0 0 no-repeat; }
#quick .btn_reward { background:url("https://ssl.nexon.com/s2/game/fo4/event/2022/220623_attendancebook/btn_quick.png") 0 -130px no-repeat; }

@media screen and (max-width:1558px) { #quick { display:none; } }

#middle { position:relative; overflow:hidden; background:url("https://ssl.nexon.com/s2/game/fo4/event/2022/220623_attendancebook/bg_middle.png") center top no-repeat; }
#middle .section { position:relative; }
#middle .section .inner { position:relative; box-sizing:border-box; width:1428px; margin:0 auto; }
#middle .header.section .inner { height:660px; }
#middle .header.section .inner .user { z-index:4; position:absolute; left:0; bottom:28px; width:1428px; height:106px; }
#middle .header.section .inner .user .login { z-index:8; position:absolute; left:0; top:0; box-sizing:border-box; height:106px; padding:16px; }
#middle .header.section .inner .user .login.type_01 { width:1428px; background:url("https://ssl.nexon.com/s2/game/fo4/event/2022/220623_attendancebook/bg_user_01.png") left top no-repeat; }
#middle .header.section .inner .user .login.type_02 { width:1020px; background:url("https://ssl.nexon.com/s2/game/fo4/event/2022/220623_attendancebook/bg_user_02.png") left top no-repeat; }
#middle .header.section .inner .user .login .btn_login { width:100%; height:74px; border-radius:4px; background:url("https://ssl.nexon.com/s2/game/fo4/common/transparent.png") left top repeat #120c38; }
#middle .header.section .inner .user .login .btn_login p { font-weight:bold; font-size:18px; line-height:74px; color:#ffffff; letter-spacing:0; text-align:center; }
#middle .header.section .inner .user .login .btn_login p strong { font-weight:bold; font-size:18px; line-height:74px; color:#92ff56; letter-spacing:0; vertical-align:top; }
#middle .header.section .inner .user .login .message { box-sizing:border-box; width:100%; height:74px; border-radius:4px; font-weight:bold; font-size:18px; line-height:74px; color:#ffffff; letter-spacing:0; text-align:center; background-color:#120c38; }
#middle .header.section .inner .user .login .btn_check { z-index:12; position:absolute; right:-408px; top:0; width:390px; height:106px; background:url("https://ssl.nexon.com/s2/game/fo4/event/2022/220623_attendancebook/btn_check.png") left top no-repeat; }
#middle .header.section .inner .user .login .check { position:relative; box-sizing:border-box; width:100%; height:74px; padding-right:124px; font-size:0; line-height:0; text-align:center; border-radius:4px; background-color:#120c38; }
#middle .header.section .inner .user .login .check p { box-sizing:border-box; display:inline-block; max-width:432px; height:42px; padding:0 16px; margin:16px 0; vertical-align:top; }
#middle .header.section .inner .user .login .check p:nth-child(1) { border-right:2px solid #384a6c; }
#middle .header.section .inner .user .login .check p::before { content:""; display:inline-block; width:26px; height:28px; margin:6px 8px 8px 0; vertical-align:top; }
#middle .header.section .inner .user .login .check p:nth-child(1):before { background:url("https://ssl.nexon.com/s2/game/fo4/event/2022/220623_attendancebook/ico_user_01.png") left top no-repeat; }
#middle .header.section .inner .user .login .check p:nth-child(2):before { background:url("https://ssl.nexon.com/s2/game/fo4/event/2022/220623_attendancebook/ico_user_02.png") left top no-repeat; }
#middle .header.section .inner .user .login .check p strong:nth-child(1) { font-weight:bold; font-size:18px; line-height:42px; color:#ffffff; letter-spacing:-1px; vertical-align:top; }
#middle .header.section .inner .user .login .check p strong:nth-child(2) { font-weight:bold; font-size:18px; line-height:42px; color:#92ff56; letter-spacing:-1px; vertical-align:top; }
#middle .header.section .inner .user .login .check p strong:nth-child(2) span { font-weight:bold; font-size:18px; line-height:42px; color:#fffa5e; letter-spacing:-1px; vertical-align:top; }
#middle .header.section .inner .user .login .check p strong:nth-child(2) span.line { color:#788a90; }
#middle .header.section .inner .user .login .check p:nth-child(2) strong:nth-child(2) span { color:#788a90; }
#middle .header.section .inner .user .login .check p:nth-child(2) strong:nth-child(2) span.active { color:#fffa5e; }
#middle .header.section .inner .user .login .check .btn_history { z-index:4; position:absolute; right:16px; top:20px; width:92px; height:34px; background:url("https://ssl.nexon.com/s2/game/fo4/event/2022/220623_attendancebook/btn_history.png") left top no-repeat; }
#middle .tab.section::after { content:""; z-index:4; position:absolute; left:50%; bottom:0; width:2560px; height:6px; margin-left:-1280px; background:linear-gradient(to right, rgba(94,255,196,0) 5%, rgba(94,255,196,1) 20%, rgba(94,255,196,1) 80%, rgba(94,255,196,0) 95%);}
#middle .tab.section .inner { height:76px; }
#middle .tab.section .inner ul li { position:relative; float:left; width:128px; margin-right:2px; }
#middle .tab.section .inner ul li:last-child { margin-right:0; }
#middle .tab.section .inner ul li button { width:100%; height:70px; border-radius:8px 8px 0 0; background-color:#1c1866; }
#middle .tab.section .inner ul li button p { font-weight:bold; font-size:22px; color:#4a4886; line-height:70px; letter-spacing:0; text-align:center; }
#middle .tab.section .inner ul li.active button { background-color:#5effc4; }
#middle .tab.section .inner ul li.active button p { color:#1c1866; }
#middle .tab.section .inner ul li.current::before { content:""; z-index:4; position:absolute; left:16px; top:-16px; width:96px; height:32px; background:url("https://ssl.nexon.com/s2/game/fo4/event/2022/220623_attendancebook/ico_current.png") left top no-repeat; }
#middle .tab.section .inner ul li.alarm button p::before { content:""; z-index:4; position:absolute; left:8px; top:8px; box-sizing:border-box; display:block; width:14px; height:14px; border-radius:100%; border:1px solid #120c38; background-color:#d81212; }
#middle .event_01.section .inner { height:1108px; background:url("https://ssl.nexon.com/s2/game/fo4/event/2022/220623_attendancebook/bg_event_01.png") left top no-repeat; }
#middle .event_02.section .inner { height:722px; background:url("https://ssl.nexon.com/s2/game/fo4/event/2022/220623_attendancebook/bg_event_02_0628.png") left top no-repeat; }
#middle .section .inner .reward { z-index:4; position:absolute; left:152px; width:1252px; }
#middle .section .inner .reward._01 { top:170px; }
#middle .section .inner .reward._02 { top:712px; }
#middle .section .inner .reward._03 { left:6px; top:276px; width:702px; font-size:0; line-height:0; text-align:center; }
#middle .section .inner .reward._04 { left:728px; top:276px; width:702px; font-size:0; line-height:0; text-align:center; }
#middle .section .inner .reward li { position:relative; float:left; box-sizing:border-box; width:172px; margin-right:8px; }
#middle .section .inner .reward._01 li { height:488px; }
#middle .section .inner .reward._02 li { height:268px; }
#middle .section .inner .reward li:last-child { margin-right:0; }
#middle .section .inner .reward li .wrapper { font-size:0; line-height:0; border-radius:16px; background-color:#e4f4fe; }
#middle .section .inner .reward._01 li .wrapper { box-shadow:0 8px 0 #6880c2, 2px 0 2px #6880c2, -2px 0 2px #6880c2; }
#middle .section .inner .reward._02 li .wrapper { box-shadow:0 8px 0 #cec278, 2px 0 2px #ccc8c2, -2px 0 2px #ccc8c2; }
#middle .section .inner .reward li .date { height:46px; font-weight:bold; font-size:18px; line-height:46px; color:#ffffff; letter-spacing:0; text-align:center; border-radius:16px 16px 0 0; background-color:#2f61e0; }
#middle .section .inner .reward li.weekend .date { background-color:#582adc; }
#middle .section .inner .reward li .item { padding-top:16px; }
#middle .section .inner .reward li .item .image { width:100px; height:100px; margin:0 auto; background-color:#ccd8e2; }
#middle .section .inner .reward li.weekend .item .image { background-color:#d4d2be; }
#middle .section .inner .reward li .item .image img { width:100px; height:100px; }
#middle .section .inner .reward li .item .text { height:62px; padding:12px 8px 0 8px; font-weight:600; font-size:14px; line-height:18px; color:#58627a; letter-spacing:0; text-align:center; }
#middle .section .inner .reward li .button { font-size:0; line-height:0; text-align:center; }
#middle .section .inner .reward._01 li .button { padding:2px 0 16px 0; }
#middle .section .inner .reward._02 li .button { padding:18px 0 16px 0; }
#middle .section .inner .reward li .btn_reward { box-sizing:border-box; width:132px; height:44px; cursor:default; background:url("https://ssl.nexon.com/s2/game/fo4/event/2022/220623_attendancebook/btn_reward_01.png") 0 0 no-repeat; }
#middle .section .inner .reward li .btn_reward.active { cursor:pointer; background-position:0 -44px; }
#middle .section .inner .reward li .btn_reward.complete { background-position:0 -88px; }
#middle .section .inner .reward li .btn_reward.none { background-position:0 -132px; }
#middle .section .inner .reward li.today::before { content:""; z-index:4; position:absolute; right:12px; top:-30px; display:block; width:70px; height:30px; background:url("https://ssl.nexon.com/s2/game/fo4/event/2022/220623_attendancebook/img_today.png") left top no-repeat; }
#middle .section .inner .reward li.attend::after { content:"출석"; z-index:4; position:absolute; left:-8px; top:-16px; display:block; box-sizing:border-box; width:48px; height:48px; filter:drop-shadow(2px 2px 2px rgba(18,12,56,0.4)); padding:14px 0 18px 0; font-size:16px; line-height:16px; color:#ffffff; letter-spacing:0; text-align:center; background:url("https://ssl.nexon.com/s2/game/fo4/event/2022/220623_attendancebook/img_attend.png") left top no-repeat; }
#middle .section .inner .reward._01 li.today .wrapper .date { box-shadow:inset 4px 0 0 #d81212, inset -4px 0 0 #d81212, inset 0 4px 0 #d81212; }
#middle .section .inner .reward._01 li.today .wrapper { box-shadow:0 8px 0 #6880c2, 2px 0 2px #6880c2, -2px 0 2px #6880c2, inset 4px 0 0 #d81212, inset -4px 0 0 #d81212, inset 0 -4px 0 #d81212; }
#middle .section .inner .reward._02 li.today .wrapper { box-shadow:0 8px 0 #cec278, 2px 0 2px #ccc8c2, -2px 0 2px #ccc8c2, inset 4px 0 0 #d81212, inset -4px 0 0 #d81212, inset 0 -4px 0 #d81212, inset 0 4px 0 #d81212; }
#middle .section .inner .btn_summerpass { z-index:4; position:absolute; left:0; bottom:0; width:1428px; height:88px; background:url("https://ssl.nexon.com/s2/game/fo4/common/transparent.png") left top repeat; }
#middle .section .inner .reward._03 li,
#middle .section .inner .reward._04 li { float:none; display:inline-block; width:288px; margin:0; vertical-align:top; }
#middle .section .inner .reward._03 li .wrapper,
#middle .section .inner .reward._04 li .wrapper { background-color:transparent; }
#middle .section .inner .reward._03 li .item,
#middle .section .inner .reward._04 li .item { padding-top:0; }
#middle .section .inner .reward._03 li .item .image,
#middle .section .inner .reward._04 li .item .image { width:128px; height:128px; }
#middle .section .inner .reward._03 li .item .image img,
#middle .section .inner .reward._04 li .item .image img { width:128px; height:128px; }
#middle .section .inner .reward._03 li .item .text,
#middle .section .inner .reward._04 li .item .text { padding:12px 24px 0 24px; }
#middle .section .inner .reward._03 li.button,
#middle .section .inner .reward._04 li.button { display:block; width:702px; }
#middle .section .inner .reward._03 li .btn_reward,
#middle .section .inner .reward._04 li .btn_reward { width:288px; height:70px; background:url("https://ssl.nexon.com/s2/game/fo4/event/2022/220623_attendancebook/btn_reward_02.png") 0 0 no-repeat; }
#middle .section .inner .reward._03 li .btn_reward.active,
#middle .section .inner .reward._04 li .btn_reward.active { background-position:0 -70px; }
#middle .section .inner .reward._03 li .btn_reward.complete,
#middle .section .inner .reward._04 li .btn_reward.complete { background-position:0 -140px; }
#middle .section .inner .reward._03 li .btn_reward.none,
#middle .section .inner .reward._04 li .btn_reward.none { background-position:0 -210px; }
#middle .section .inner .week { z-index:4; position:absolute; left:460px; top:72px; width:64px; font-size:16px; line-height:20px; color:#ffffff; letter-spacing:0; text-align:center; text-shadow:0 2px 4px rgba(18,12,56,0.4); }

#footer { position:relative; width:100%; min-width:1040px; text-align:center; background-color:#000000; }
#footer .inner { width:100%; padding:64px 0; }
#footer .inner .logo { margin-bottom:64px; line-height:0; }
#footer .inner .information { position:relative; overflow:hidden; width:1142px; margin:0 auto; }
#footer .inner .information .company { position:relative; float:left; width:254px; height:62px; }
#footer .inner .information .company .bt-nexon { position:absolute; left:0; top:12px; }
#footer .inner .information .company .bt-ea { position:absolute; left:162px; top:12px; }
#footer .inner .information .copyright { float:left; width:888px; height:62px; }

.event_layer_popup { overflow-y:auto; z-index:1080; position:fixed; left:0; top:0; display:none; width:100%; height:100%; background-color:rgba(0,0,0,0.8); }
.event_layer_popup .content { z-index:128; position:absolute; left:50%; top:50%; width:320px; box-shadow:0 0 32px rgba(0,0,0,0.8); transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); -ms-transform:translateX(-50%) translateY(-50%); background-color:#ffffff ; }
.loading.event_layer_popup { z-index:14320 !important; }
.loading.event_layer_popup .content { z-index:256 !important; width:272px; box-shadow:none; border-radius:0; border:none; background:transparent; }
.loading.event_layer_popup .content ul { width:128px; margin:0 auto 32px auto; }
.loading.event_layer_popup .content ul li { float:left; width:24px; height:24px; margin:0 4px; box-shadow:0 0 32px rgba(0,0,0,1); background-color:#ffffff; }
.loading.event_layer_popup .content p { text-align:center; color:#ffffff; text-shadow:0 0 32px rgba(0,0,0,1); }
.loading.event_layer_popup .content p:nth-child(2) { margin-bottom:16px; font-size:48px; line-height:48px; font-weight:bold; }
.loading.event_layer_popup .content p:nth-child(3) { font-size:32px; line-height:32px; }