@charset "utf-8";
#gnb { z-index:516; position:fixed; left:0; top:0; width:100%; min-width:1280px; height:50px; font-family:"Noto Sans KR",sans-serif; line-height:0; }
#gnb a { display:inline-block; font-family:"Noto Sans KR",sans-serif; }
#gnb button { display:inline-block; margin:0; padding:0; font-family:"Noto Sans KR",sans-serif; outline:0; border:0; cursor:pointer; }
#header { z-index:516; position:absolute; left:0; top:0; width:100%; min-width:1280px; height:50px; text-align:center; box-shadow:0 0 32px rgba(0,0,0,0.4); background-color:#ffffff; }
#header .btn_logo { z-index:4; position:absolute; left:0; top:0; }
#header .btn_logo a { width:50px; height:50px; background:url("https://ssl.nexon.com/s2/game/fo4/event/2020/200709_nfc_8s7eyhs/gnb/logo.png") left top no-repeat; }
#header .btn_event { z-index:4; position:absolute; left:52px; top:0; }
#header .btn_event a { width:150px; height:50px; background:url("https://ssl.nexon.com/s2/game/fo4/event/2020/200709_nfc_8s7eyhs/gnb/fifa.png") left top no-repeat; }

#header .menu { z-index:4; position:absolute; right:0; top:0; width:300px; height:50px; }
#header .menu .premium { z-index:6; position:absolute; left:-98px; top:0; overflow:hidden; width:74px; height:50px; text-indent:-9999px; background:url("https://ssl.nexon.com/s2/game/fo4/event/2020/200625_summerfesta_xE2IllllI/gnb/bg_premium.png") 0 0 no-repeat; }
#header .menu .premium.active { background-position:0 -50px; }
#header .menu .btn_login { z-index:6; position:absolute; left:0; top:0; overflow:hidden; width:120px; height:50px; text-indent:-9999px; background:url("https://ssl.nexon.com/s2/game/fo4/event/2020/200528_luckydraw_zZzZQxKEE/gnb/btn_login.png") right top no-repeat;border-left:1px solid #dcdfe1 }
#header .menu .btn_logout { z-index:6; position:absolute; left:0; top:0; overflow:hidden; width:120px; height:50px; text-indent:-9999px; background:url("https://ssl.nexon.com/s2/game/fo4/event/2020/200528_luckydraw_zZzZQxKEE/gnb/btn_logout.png") right top no-repeat;border-left:1px solid #dcdfe1 }
#header .menu .btn_gamestart { z-index:4; position:absolute; right:50px; top:0; width:130px; height:50px; text-indent:-9999px; background:url("https://ssl.nexon.com/s2/game/fo4/event/2020/200528_luckydraw_zZzZQxKEE/gnb/btn_gamestart.png") left top no-repeat; }
#header .menu .btn_control { z-index:6; position:absolute; right:0; top:0; overflow:hidden; width:50px; height:50px; background-color:#000000; }
#header .menu .btn_control .inner { height:auto !important; padding:18px 0; -ms-transform:rotate(0); transform:rotate(0); transition-duration:0.4s; }
#header .menu .btn_control .inner span { display:block; width:18px; height:2px; margin:0 auto; text-indent:-9999px; background-color:#ffffff; }
#header .menu .btn_control .inner:before { content:""; display:block; width:18px; height:2px; margin:0 auto 4px auto; background-color:#ffffff; }
#header .menu .btn_control .inner:after { content:""; display:block; width:18px; height:2px; margin:4px auto 0 auto; background-color:#ffffff; }
#header .menu .btn_control.on .inner { -ms-transform:rotate(90deg); transform:rotate(90deg); }
#aside { z-index:514; position:absolute; right:-200px; top:0; opacity:0; width:200px; min-height:258px; padding-top:50px; box-sizing:border-box; transition-duration:0.4s; box-shadow:0 0 32px rgba(0,0,0,0.4); background-color:#c2c2c2; }
#aside.on { right:0; opacity:1; }
#aside .button_box { overflow:hidden; position:relative; min-height:64px; }
#aside .button_box a { float:left; width:100px; height:64px; overflow:hidden; font-size:14px; color:#8c8c96; line-height:64px; text-align:center; }
#aside .button_box .btn_home:before { content:""; display:inline-block; width:24px; height:64px; margin-right:8px; vertical-align:top; background:url("https://ssl.nexon.com/s2/game/fo4/event/2019/191114_winter_x7yh4hb/common/bt_home.png") left top no-repeat; }
#aside .button_box .btn_share:before { content:""; display:inline-block; width:12px; height:64px; margin-right:8px; vertical-align:top; background:url("https://ssl.nexon.com/s2/game/fo4/event/2019/191114_winter_x7yh4hb/common/bt_share.png") left top no-repeat; }
#aside .button_box a:hover { color:#3e3e54; background-color:#e8e8e8; }
#aside .button_box a:hover:before { background-position:0 -64px; }
#aside .button_box:after { content:""; display:block; position:absolute; left:50%; top:22px; width:2px; height:20px; margin:0 0 0 -1px; background-color:#a8aaae; }
#aside .scroll_box { overflow:hidden; min-height:530px; }
#aside .scroll_box ul { padding-bottom:32px; }
#aside .scroll_box ul li { line-height:0; }
#aside .scroll_box ul li a { position:relative; overflow:hidden; width:200px; border-bottom:1px solid #acacac; background-color:#c2c2c2; line-height:0; }
#aside .scroll_box ul li a .thumb { opacity:0.6; width:180px; height:72px; padding:16px 10px 10px 10px; }
#aside .scroll_box ul li a p { opacity:0.6; overflow:hidden; padding-bottom:16px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:180px; margin:0 auto; font-size:14px; line-height:14px; color:#000000; text-align:center; }
#aside .scroll_box ul li a:hover { background-color:#e8e8e8; }
#aside .scroll_box ul li a:hover .thumb { opacity:1; }
#aside .scroll_box ul li a:hover p { opacity:1; }
#aside .scroll_box ul li.on a { background-color:#e8e8e8; }
#aside .scroll_box ul li.on a .thumb { opacity:1; }
#aside .scroll_box ul li.on a p { opacity:1; }
#aside .scroll_bar { z-index:2; position:absolute; right:2px; top:88px; opacity:1; width:10px; min-height:258px; }
#aside .scroll_bar .handle { position:relative; opacity:0.4; width:4px; margin-left:6px; padding:16px 0 16px 0; box-sizing:border-box; }
#aside .scroll_bar .handle span { display:block; height:100%; border-radius:4px; box-sizing:border-box; background-color:#000; }
#share { z-index:508; display:none; position:fixed; left:50%; top:50%; -ms-transform:translateX(-50%) translateY(-50%); transform:translateX(-50%) translateY(-50%); box-shadow:0 0 32px rgba(0,0,0,0.8); }
#share .title { position:relative; padding:16px; background-color:#ffffff; }
#share .title h4 { padding-left:35px; font-size:24px; line-height:24px; color:#000000; background:url("https://ssl.nexon.com/s2/game/fo4/event/2019/190704_scoutz1/common/ico_fo4.png") left top no-repeat; }
#share .title .btn_close { position:absolute; right:16px; top:16px; width:24px; height:24px; text-indent:-9999px; background:url("https://ssl.nexon.com/s2/game/fo4/event/2019/190704_scoutz1/common/bt_close.png") left top no-repeat; }
#share .inner { padding:64px 128px; background-color:#e6e6e6; }
#share .inner button { width:100px; margin:0 16px; padding-top:116px; font-weight:bold; font-size:18px; line-height:18px; color:#565656; }
#share .inner .btn_kakaotalk { background:url("https://ssl.nexon.com/s2/game/fo4/event/2019/190704_scoutz1/common/bt_kakaotalk.png") left top no-repeat; }
#share .inner .btn_facebook { background:url("https://ssl.nexon.com/s2/game/fo4/event/2019/190704_scoutz1/common/bt_facebook.png") left top no-repeat; }
#dimmed { z-index:504; position:fixed; left:0; top:0; display:none; width:100%; height:100%; background-color:rgba(0,0,0,0.6); }

#header .nav {position: absolute;top:0;left:51px;;width:365px; height:50px;}
#header .nav > a { line-height: 50px;border-right: 1px solid #bfbfbf;border-left: 1px solid #bfbfbf;display: block;;}
#header .nav > a .arr{display: inline-block;width: 20px;height: 20px;background: url(https://ssl.nexon.com/s2/game/fo4/event/2021/210429_nfi_x87yeh24/gnb/arr.png) 0 0 no-repeat;vertical-align: top;margin-left: 10px;margin-top: 14px;transform: rotate(0);}
#header .nav.active > a .arr{transform: rotate(-180deg);}
#header .nav > a span{    font-size: 18px;color: #000;font-weight: 500;text-align: center;}
#header .nav > a strong{font-size: 18px;color: #474747;font-weight:700;margin-left: 6px;;}
#header .nav ul{position: absolute;top:51px;left:-1px;background: red;width: 366px;display: none;}
#header .nav.active ul{display: block;}
#header .nav ul li{background-color: #eaeaea;border:1px solid #b9b9b9;margin-top:-1px}
#header .nav ul li a { line-height: 50px;display: block;;}
#header .nav ul li a:hover{background-color: #333333;}
#header .nav ul li a:hover span{background-color: #333;color: #fff;}
#header .nav ul li a:hover strong{background-color: #333;color: #fff;}
#header .nav ul li a span{font-size: 18px;color: #909090;font-weight:300}
#header .nav ul li a strong{font-size: 18px;color: #474747;font-weight:700;margin-left: 6px;;}