@charset "utf-8";

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

#wrapper { position:relative; overflow:hidden; width:100%; max-width:2560px; min-width:1392px; margin:0 auto; font-size:0; line-height:0; }
#wrapper a { font-family:"Pretendard","Noto Sans KR",Dotum,"돋움",Helvetica,"Apple SD Gothic Neo",sans-serif; cursor:pointer; }
#wrapper button { font-family:"Pretendard","Noto Sans KR",Dotum,"돋움",Helvetica,"Apple SD Gothic Neo",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; }

#middle { position:relative; overflow:hidden; padding-bottom:98px; background:url("https://ssl.nexon.com/s2/game/fo4/event/2022/221103_attendancebook/bg_middle.png") center top no-repeat; }
#middle .section { position:relative; }
#middle .section .inner { position:relative; box-sizing:border-box; width:1392px; margin:0 auto; }
#middle .header.section .inner { height:794px; background:url("https://ssl.nexon.com/s2/game/fo4/event/2022/221103_attendancebook/bg_middle.png") -584px 0 no-repeat; }
#middle .header.section .inner .btn_notice { z-index:4; position:absolute; left:560px; top:524px; width:132px; height:40px; background:url("https://ssl.nexon.com/s2/game/fo4/common/transparent.png") left top repeat; }
#middle .header.section .inner .btn_reward { z-index:4; position:absolute; right:560px ; top:524px; width:132px; height:40px; background:url("https://ssl.nexon.com/s2/game/fo4/common/transparent.png") left top repeat; }
#middle .header.section .inner .user { z-index:4; position:absolute; left:0; bottom:0; box-sizing:border-box; width:1392px; height:150px; }
#middle .header.section .inner .user .login { z-index:8; position:absolute; left:30px; top:26px; box-sizing:border-box; width:1322px; height:98px; box-shadow:inset 0 4px 0 #00021e; background-color:#00097c; }
#middle .header.section .inner .user .login.check { left:200px; width:1152px; padding-left:170px; }
#middle .header.section .inner .user .login .btn_login { width:100%; height:98px; background:url("https://ssl.nexon.com/s2/game/fo4/common/transparent.png") left top repeat; }
#middle .header.section .inner .user .login .btn_login p { font-weight:bold; font-size:26px; line-height:98px; color:#ffffff; letter-spacing:0; text-align:center; }
#middle .header.section .inner .user .login .btn_login p strong { font-weight:bold; font-size:26px; line-height:98px; color:#ffff00; letter-spacing:0; vertical-align:top; }
#middle .header.section .inner .user .login .none { padding:24px 0; font-weight:bold; font-size:26px; line-height:26px; color:#ffffff; letter-spacing:0; text-align:center; }
#middle .header.section .inner .user .login .none strong { font-weight:bold; font-size:26px; line-height:26px; color:#ffff00; letter-spacing:0; vertical-align:top; }
#middle .header.section .inner .user .login .none span { display:block; padding-top:8px; font-size:16px; line-height:16px; color:#c08662; letter-spacing:0; }
#middle .header.section .inner .user .login .btn_check { z-index:8; position:absolute; left:-170px; top:0; width:340px; height:98px; filter:drop-shadow(0 4px 4px rgba(0,0,0,0.4)); background:url("https://ssl.nexon.com/s2/game/fo4/event/2022/221103_attendancebook/btn_check.png") left top no-repeat; }
#middle .header.section .inner .user .login .message { z-index:8; position:absolute; right:0; top:0; box-sizing:border-box; width:982px; height:98px; font-weight:bold; font-size:26px; line-height:98px; color:#ffffff; letter-spacing:0; text-align:center; }
#middle .header.section .inner .user .login .end { font-weight:bold; font-size:26px; line-height:98px; color:#ffffff; letter-spacing:0; text-align:center; }
#middle .header.section .inner .user .login .check { z-index:8; position:absolute; left:170px; top:0; box-sizing:border-box; width:834px; height:98px; }
#middle .header.section .inner .user .login .check li { float:left; width:416px; height:98px; border-right:2px solid #363c9a; }
#middle .header.section .inner .user .login .check li:last-child { border-right:none; }
#middle .header.section .inner .user .login .check li dl { overflow:hidden; font-size:0; line-height:0; }
#middle .header.section .inner .user .login .check li dl dt { float:left; width:130px; height:98px; font-weight:bold; font-size:14px; line-height:98px; color:#ffffff; text-align: center; }
#middle .header.section .inner .user .login .check li dl dd { float:left; width:150px; height:98px; }
#middle .header.section .inner .user .login .check li dl dd:last-child { width:136px; }
#middle .header.section .inner .user .login .check li:nth-child(1) dl dd p:nth-child(1) { display:inline-block; width:40px; vertical-align:top; font-weight:bold; font-size:14px; line-height:98px; color:#6884d8; text-align:left; }
#middle .header.section .inner .user .login .check li:nth-child(1) dl dd p:nth-child(2) { display:inline-block; width:96px; vertical-align:top; font-weight:bold; font-size:22px; line-height:98px; color:#ffff00; text-align:left; }
#middle .header.section .inner .user .login .check li:nth-child(2) dl dd:nth-child(2) p:nth-child(1) { display:inline-block; width:46px; margin:26px 0; vertical-align:top; font-size:14px; line-height:46px; color:#ffffff; text-align:center; border-radius:100%; background-color:#00ba3c; }
#middle .header.section .inner .user .login .check li:nth-child(2) dl dd:nth-child(3) p:nth-child(1) { display:inline-block; width:46px; margin:26px 0; vertical-align:top; font-size:14px; line-height:46px; color:#ffffff; text-align:center; border-radius:100%; background-color:#ff486e; }
#middle .header.section .inner .user .login .check li:nth-child(2) dl dd p:nth-child(2) { display:inline-block; width:82px; margin-left:8px; vertical-align:top; font-weight:bold; font-size:22px; line-height:98px; color:#ffffff; text-align:left; }
#middle .header.section .inner .user .login .check li:nth-child(2) dl dd p:nth-child(2).success { color:#0096f6; }
#middle .header.section .inner .user .login .check li:nth-child(2) dl dd p:nth-child(2).fail { color:#fa0446; }
#middle .header.section .inner .user .login .btn_history { z-index:4; position:absolute; right:20px; top:28px; width:120px; height:42px; border-radius:32px; background:url("https://ssl.nexon.com/s2/game/fo4/common/transparent.png") left top repeat #3652a4; }
#middle .header.section .inner .user .login .btn_history p { font-size:14px; line-height:42px; color:#ffffff; letter-spacing:0; text-align:center; }
#middle .tab.section .inner { width:1332px; height:100px; border-bottom:4px solid #1486ff; background:url("https://ssl.nexon.com/s2/game/fo4/event/2022/221103_attendancebook/bg_middle.png") -584px -794px no-repeat; }
#middle .tab.section .inner ul { z-index:4; position:absolute; left:128px; bottom:0; width:1078px; height:66px; }
#middle .tab.section .inner ul li { position:relative; float:left; width:154px; height:66px; }
#middle .tab.section .inner ul li:first-child::before { display:none; }
#middle .tab.section .inner ul li::before { content:""; z-index:8; position:absolute; left:0; top:18px; display:block; width:2px; height:38px; background-color:#1a1e64; }
#middle .tab.section .inner ul li button { position:relative; overflow:hidden; width:100%; height:58px; margin-top:8px; box-shadow:inset 0 4px 4px rgba(0,0,0,0.4); background:linear-gradient(to bottom,#000454,#000440); }
#middle .tab.section .inner ul li:first-child button { border-radius:8px 0 0 0; }
#middle .tab.section .inner ul li:last-child button { border-radius:0 8px 0 0; }
#middle .tab.section .inner ul li button p { font-weight:bold; font-size:18px; line-height:58px; color:#6884d8; letter-spacing:0; text-align:center; }
#middle .tab.section .inner ul li.active button { z-index:16; width:156px; height:66px; margin-top:0; border-radius:8px 8px 0 0; box-shadow:none; background:linear-gradient(to bottom,#1c8cf4,#1486ff); }
#middle .tab.section .inner ul li.active button p { padding-top:8px; color:#ffffff; padding-right:2px; }
#middle .tab.section .inner ul li.active:last-child button { width:154px; }
#middle .tab.section .inner ul li.active:last-child button p { padding-right:0; }
#middle .tab.section .inner ul li.current::after { content:"진행 중"; transition-duration:0.2s; z-index:32; position:absolute; left:50%; top:-8px; width:90px; height:32px; margin-left:-46px; font-weight:bold; font-size:16px; line-height:32px; color:#ffffff; letter-spacing:0; text-align:center; border-radius:32px; background-color:#fa0446; }
#middle .tab.section .inner ul li.active.current::after { top:-16px; }
#middle .tab.section .inner ul li.alarm button p::after { content:""; z-index:32; position:absolute; left:8px; top:8px; box-sizing:border-box; display:block; width:14px; height:14px; border-radius:100%; background-color:#08f4e4; }
#middle .event.section .inner { height:2146px; background:url("https://ssl.nexon.com/s2/game/fo4/event/2022/221103_attendancebook/bg_middle.png") -584px -894px no-repeat; }
#middle .section .inner .type_01 { z-index:4; position:absolute; left:82px; width:1228px; }
#middle .section .inner .daily.type_01 { top:132px; }
#middle .section .inner .cheer.type_01 { top:788px; }
#middle .section .inner .type_01 li { position:relative; float:left; box-sizing:border-box; width:172px; margin-right:4px; }
#middle .section .inner .type_01 li:last-child { margin-right:0; }
#middle .section .inner .type_01 li .wrapper { font-size:0; line-height:0; border-radius:8px; box-shadow:0 16px 8px rgba(0,0,0,0.4); background-color:#ffffff; }
#middle .section .inner .type_01 li.weekend .wrapper { background-color:#d4fff0; }
#middle .section .inner .type_01 li .date { position:relative; height:64px; font-weight:bold; font-size:16px; line-height:64px; color:#ffffff; letter-spacing:0; text-align:center; border-radius:6px 6px 0 0; background-color:#3652a4; }
#middle .section .inner .type_01 li.weekend .date { color:#140038; background-color:#08f4e4; }
#middle .section .inner .type_01 li .date::after { content:""; z-index:4; position:absolute; left:78px; bottom:-12px; display:block; width:0; height:0; border-style:solid; border-width:0 8px 12px; border-color:transparent transparent #3652a4; transform:rotate(-180deg); -webkit-transform:rotate(-180deg); }
#middle .section .inner .type_01 li.weekend .date::after { border-color:transparent transparent #08f4e4; }
#middle .section .inner .type_01 li .item:nth-child(2) { padding-top:20px; }
#middle .section .inner .type_01 li .item:nth-child(3) { padding-top:8px; }
#middle .section .inner .type_01 li .item .image { width:88px; height:88px; margin:0 auto; background-color:#f0f0f0; }
#middle .section .inner .type_01 li.weekend .item .image { background-color:#c8f0e6; }
#middle .section .inner .type_01 li .item .image img { width:88px; height:88px; }
#middle .section .inner .type_01 li .item .text { height:48px; padding:8px 8px 0 8px; font-size:12px; line-height:16px; color:#4a1a00; letter-spacing:0; text-align:center; }
#middle .section .inner .type_01 li .item .image { border:4px solid transparent; }
#middle .section .inner .type_01 li .item.active .image { border:4px solid #ff9200; }
#middle .section .inner .type_01 li .button { padding:16px 0; font-size:0; line-height:0; text-align:center; }
#middle .section .inner .type_01 li .btn_reward { box-sizing:border-box; width:132px; height:50px; cursor:default; border-radius:8px; background:linear-gradient(to bottom,#a8a8a8 10%,#7a7a7a 40%); }
#middle .section .inner .type_01 li .btn_reward p { font-weight:bold; font-size:18px; line-height:50px; color:#cccccc; letter-spacing:0; text-align:center; }
#middle .section .inner .type_01 li .btn_reward.active { cursor:pointer; background:linear-gradient(to bottom,#ff9200 0%,#ff2a00 100%); }
#middle .section .inner .type_01 li .btn_reward.active p { color:#ffffff; }
#middle .section .inner .type_01 li .btn_reward.complete,
#middle .section .inner .type_01 li .btn_reward.none { background:url("https://ssl.nexon.com/s2/game/fo4/common/transparent.png") left top repeat #bcbcbc; }
#middle .section .inner .type_01 li .btn_reward.complete p,
#middle .section .inner .type_01 li .btn_reward.none p { color:#989898; }
#middle .section .inner .type_01 li.today::before { content:""; z-index:4; position:absolute; left:38px; top:-14px; display:block; width:96px; height:28px; background:url("https://ssl.nexon.com/s2/game/fo4/event/2022/221103_attendancebook/img_today.png") left top no-repeat; }
#middle .section .inner .type_01 li.attend::after { content:"출석"; z-index:4; position:absolute; left:8px; top:16px; display:block; box-sizing:border-box; width:34px; height:34px; font-weight:bold; font-size:14px; line-height:34px; color:#140038; letter-spacing:0; text-align:center; border-radius:100%; background-color:#ffff00; }
#middle .section .inner .type_01 li.today .wrapper .date { box-shadow:inset 4px 0 0 #fa0446, inset -4px 0 0 #fa0446, inset 0 4px 0 #fa0446; }
#middle .section .inner .type_01 li.today .wrapper { box-shadow:inset 4px 0 0 #fa0446, inset -4px 0 0 #fa0446, inset 0 -4px 0 #fa0446, 0 16px 8px rgba(0,0,0,0.4); }
#middle .section .inner .btn_link_01 { z-index:4; position:absolute; right:242px; top:696px; width:150px; height:36px; background:url("https://ssl.nexon.com/s2/game/fo4/common/transparent.png") left top repeat; }
#middle .section .inner .btn_link_02 { z-index:4; position:absolute; right:82px; top:696px; width:150px; height:36px; background:url("https://ssl.nexon.com/s2/game/fo4/common/transparent.png") left top repeat; }
#middle .section .inner p.week { z-index:4; position:absolute; left:500px; top:1460px; width:78px; height:58px; font-weight:bold; font-size:22px; line-height:58px; color:#140038; letter-spacing:0; text-align:center; }
#middle .section .inner .btn_banner { z-index:4; position:absolute; right:82px; top:1446px; width:256px; height:88px; background:url("https://ssl.nexon.com/s2/game/fo4/event/2022/221103_attendancebook/btn_banner.png") left top no-repeat; }
#middle .section .inner div.week { z-index:4; position:absolute; top:1546px; width:604px; height:416px; }
#middle .section .inner div.week._01 { left:80px; }
#middle .section .inner div.week._02 { right:82px; }
#middle .section .inner div.week .item { padding-top:102px; font-size:0; line-height:0; text-align:center; }
#middle .section .inner div.week .item .wrapper { display:inline-block; width:192px; vertical-align:top; border:4px solid transparent; }
#middle .section .inner div.week .item .wrapper .image { width:128px; margin:0 32px; background-color:#f0f0f0; }
#middle .section .inner div.week .item .wrapper.active .image { border:4px solid #ff9200; }
#middle .section .inner div.week .item .wrapper .image img { width:128px; height:128px; }
#middle .section .inner div.week .item .wrapper .text { height:48px; padding:8px 8px 0 8px; font-size:12px; line-height:16px; color:#4a1a00; letter-spacing:0; text-align:center; }
#middle .section .inner div.week .button { padding-top:32px; font-size:0; line-height:0; text-align:center; }
#middle .section .inner div.week .btn_reward { box-sizing:border-box; width:256px; height:50px; cursor:default; border-radius:8px; background:linear-gradient(to bottom,#a8a8a8 10%,#7a7a7a 40%); }
#middle .section .inner div.week .btn_reward p { font-weight:bold; font-size:18px; line-height:50px; color:#cccccc; letter-spacing:0; text-align:center; }
#middle .section .inner div.week .btn_reward.active { cursor:pointer; background:linear-gradient(to bottom,#ff9200 0%,#ff2a00 100%); }
#middle .section .inner div.week .btn_reward.active p { color:#ffffff; }
#middle .section .inner div.week .btn_reward.complete,
#middle .section .inner div.week .btn_reward.none { background:url("https://ssl.nexon.com/s2/game/fo4/common/transparent.png") left top repeat #bcbcbc; }
#middle .section .inner div.week .btn_reward.complete p,
#middle .section .inner div.week .btn_reward.none p { color:#989898; }

#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; }