@charset "utf-8";
html, body {
    scroll-behavior: smooth;
}

@font-face {
    font-family: 'CruyffSansExpanded-Heavy';
    src: url('https://events.fconline.nexon.com/Content/230810/FoundersClub/CruyffSansExpanded-Heavy.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

#wrapper{padding-top: 100px;}

#gnb h1,
#gnb a,
#gnb button{letter-spacing: 0;font-family:"Pretendard",sans-serif; }
#gnb button { display:inline-block; margin:0; padding:0; font-family:"Pretendard",sans-serif; outline:0; border:0;}

#gnb { z-index:1000; position:fixed; left:0; top:0; width:100%; min-width:1280px;font-family:"Pretendard",sans-serif; line-height:0; letter-spacing: 0;}

#header { z-index:100; 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_event { z-index:1; position:absolute; left:53px; top:0;height: 50px;padding:6px 13px}
#header .btn_event img{height: 38px;}

#header .btn_logo { z-index:4; position:absolute; left:0; top:0;border-right: 1px solid #dcdfe1;height: 50px;}
#header .btn_logo a { width:52px; height:50px; background:url(https://ssl.nexon.com/s2/game/fo4/event/2023/230525_gnb_sa87ryh3/emblem.png) center center no-repeat;background-size: 26px auto; }

#header .event_link { z-index:2; position:absolute; left:50%; top:0; transform: translateX(-50%);height: 50px;line-height: 0;font-size: 0;}
#header .event_link .txt{margin:8.5px 0;background-color: #F4F4F4;display: inline-block;font-size: 14px;font-weight: 400;line-height: 33px;letter-spacing: -0.04em;text-align: left;height: 33px;padding: 0 14px;color: #000;}
#header .event_link a { height: 28px;background: #34A2E0;border-radius: 4px;font-weight: 400;color:#fff;box-sizing: border-box;font-size:13px; margin-left: 5px;;vertical-align: top;width:auto; padding:0 12px; margin-top:12px;line-height:28px; text-align:center}

#header .event_join { z-index:2; position:absolute; left:50%; top:0; font-size:0; line-height:0; transform:translateX(-50%);line-height: 0;font-size: 0;}
#header .event_join > p{margin:8.5px 0;background-color: #F4F4F4;display: inline-block;font-size: 14px;font-weight: 400;line-height: 33px;letter-spacing: -0.04em;text-align: left;height: 33px;padding: 0 14px;color: #000;}

#header .event_join .gnb_state_wrap { position: relative;display: inline-block;}
#header .event_join .gnb_state_wrap .gnb_state_info{margin-right: 12px;display: inline-block;vertical-align: top;margin-top: 16px;}
#header .event_join .gnb_state_wrap .gnb_state_info .today{width: 53px;height: 19px;background: url(https://ssl.nexon.com/s2/game/fo4/event/2023/230525_gnb_sa87ryh3/today.png) 0 0 no-repeat;background-size: 54px auto;margin-top: 3px;display: inline-block;;vertical-align: top;margin-right: 5px;;}
#header .event_join .gnb_state_wrap .gnb_state_info .pointer{width: 19px;height: 19px;background: url(https://ssl.nexon.com/s2/game/fo4/event/2023/230525_gnb_sa87ryh3/icon_info.png) 0 0 no-repeat;background-size: 19px auto;display: inline-block;vertical-align: top;cursor: pointer;}
#header .event_join .gnb_state_wrap .gnb_state_info .pointer:hover + .desc{display: block;}
#header .event_join .gnb_state_wrap .gnb_state_info .desc{width: 530px;height: 118px;background: url(https://ssl.nexon.com/s2/game/fo4/event/2023/230525_gnb_sa87ryh3/tooltip.png) 0 0 no-repeat;background-size: 530px auto;display: none;position: absolute;top:38px;left:-8px;pointer-events: none;z-index: 10;}

#header .event_join .gnb_state_wrap .gnb_state {margin:8.5px 0;background-color: #F4F4F4;display: inline-block;font-size: 14px;font-weight: 400;line-height: 33px;letter-spacing: -0.04em;text-align: left;height: 33px;padding: 0 12px;color: #000;vertical-align: top;}
#header .event_join .gnb_state_wrap .gnb_state a{font-size: 14px;font-weight: 400;line-height: 33px;letter-spacing: -0.04em;text-align: center;position: relative;vertical-align: top;}
#header .event_join .gnb_state_wrap .gnb_state a:first-child{margin-right: 20px;}
#header .event_join .gnb_state_wrap .gnb_state a:first-child:after{position: absolute;top: 10px;right: -13px;width: 1px;background-color: #000;content: "";height: 13px;}
#header .event_join .gnb_state_wrap .gnb_state a strong{color: #000000;font-weight: 400;}
#header .event_join .gnb_state_wrap .gnb_state a span{color: #E03457;margin-left: 3px;font-weight: 400;;}
#header .event_join .gnb_state_wrap .gnb_state a span.desc{color: #797979;font-weight: 400;}

#header .event_join .btn_nr { font-weight: 400;color:#E03457;border-radius: 4px; box-sizing: border-box;font-size:13px; border:2px solid #E03457;margin-left: 5px;;width:auto; padding:0 12px; height:28px; margin-top:12px;line-height:24px; text-align:center; vertical-align:top; background-color:#fff;;}
#header .event_join .btn_event_check { font-weight: 400;margin-left: 6px;;width:auto;border-radius: 4px;; padding:0 12px; height:28px; margin-top:12px; font-size:13px; line-height:28px; color:#fff; text-align:center; vertical-align:top; background-color:#E03457; }

#header .menu { z-index:1; position:absolute; right:0; top:0; height:50px;}
#header .menu .premium { float:left;width:74px; height:50px;background:url(https://ssl.nexon.com/s2/game/fo4/event/2023/230525_gnb_sa87ryh3/bg_premium.png) center 0 no-repeat;padding:0 20px; }
#header .menu .premium.active { background-position:center -50px; }
#header .menu .btn_login { float:left;width:120px; height:50px; background:url(https://ssl.nexon.com/s2/game/fo4/event/2023/230525_gnb_sa87ryh3/login.png) center center no-repeat;background-size:  auto 25px;border-left:1px solid #dcdfe1 }
#header .menu .btn_logout {  float:left;width:120px; height:50px; background:url(https://ssl.nexon.com/s2/game/fo4/event/2023/230525_gnb_sa87ryh3/logout.png) center center no-repeat;background-size: auto 25px;border-left:1px solid #dcdfe1 }
#header .menu .btn_gamestart {  float:left;width:130px; height:50px; background:url(https://ssl.nexon.com/s2/game/fo4/event/2023/230525_gnb_sa87ryh3/btn_gamestart.png) left top no-repeat;border-left:1px solid #dcdfe1  }

#fixedBar{ z-index:10; position:absolute; left:0; top:50px; width:100%; min-width:1280px; height:50px; text-align:center; background-color:#1D315E;}
#fixedBar .btn_wide_open{position: absolute;top:13px;left:50%;;width: 49px;height: 23px;background: url(https://ssl.nexon.com/s2/game/fo4/event/2023/230525_gnb_sa87ryh3/btn_toggle.png) 0 0 no-repeat;z-index: 100;margin-left: 591px;background-size: 49px auto;;}

#fixedBar ul{ width: 1280px;margin:0 auto;display: flex;padding:0 18px;box-sizing: border-box;;padding-right: 80px;}
#fixedBar ul li{flex: 1 1 0%;position: relative;padding-top: 6px;height: 42px;padding-bottom: 2px;}
#fixedBar ul li span{position: relative;display: inline-block;vertical-align: top;width: 6px;height: 6px;background-color: #FF5757;border-radius: 6px;margin-top: 11px;margin-right: 2px;}
#fixedBar ul li:after{content: "";position: absolute;top:17px;right:-2px;height: 18px;background-color: #455E9B;width: 2px;}
#fixedBar ul li:last-child:after{display: none;}
#fixedBar ul li a{ display: block;color: #fff;line-height: 39px;text-align: center;font-size: 14px;;position: absolute;top:6px;left:0;width: 100%;height: 42px;;z-index: 10;font-weight: 400;white-space: nowrap;}
#fixedBar ul li.active{z-index: 10;}
#fixedBar ul li.active a{background-color: #59C8C8;color: #1D315E;padding:0 2px;margin-left: -2px;;font-weight: 400;}
#fixedBar ul li a .alert{content: "";width: auto;font-size: 12px;color: #5c6b9f;font-weight: 400;height: 27px;background: #dce5fd;position: absolute;top:39px;left:50%;transform: translateX(-50%);border:1px solid #7d85d1;border-radius: 4px;line-height: 25px;padding:0 10px;white-space: nowrap;margin-top: 4px;box-sizing: border-box;}
#fixedBar ul li a .alert:before{position: absolute;top:-4px;left:50%;margin-left: -3px;content: "";width: 6px;height: 6px;background: #dce5fd;border:1px solid #7d85d1;transform: rotate(45deg);z-index: 1;}
#fixedBar ul li a .alert:after{position: absolute;top:0;left:50%;margin-left: -10px;content: "";width: 20px;height: 5px;background: #dce5fd;border:1px solid #dce5fd;z-index: 2;}

#wideBanner{z-index:20; position:absolute; left:0; top:50px; width:100%; min-width:1280px; height:calc(100vh - 50px);text-align:center; background-color:#1D315E;display: none;}
#wideBanner .btn_wide_close{position: absolute;top:14px;left:50%;;width: 49px;height: 23px;background: url(https://ssl.nexon.com/s2/game/fo4/event/2023/230525_gnb_sa87ryh3/btn_toggle_active.png) 0 0 no-repeat;z-index: 10;margin-left: 591px;background-size: 49px auto;}
#wideBanner .banner_list_wrap{color: #fff;width: 1280px;height: 100%;margin:0 auto;padding-top: 50px;}

#wideBanner .banner_list_wrap ul{overflow: overlay;}
#wideBanner .banner_list_wrap ul::-webkit-scrollbar{width: 5px;background: transparent;}
#wideBanner .banner_list_wrap ul::-webkit-scrollbar-track{background-color: transparent;}
#wideBanner .banner_list_wrap ul::-webkit-scrollbar-thumb{border-radius: 5px;background-color: transparent;}
#wideBanner .banner_list_wrap ul:hover::-webkit-scrollbar{background:rgba(255,255,255,0.1);}
#wideBanner .banner_list_wrap ul:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);}

#wideBanner .banner_list_wrap li{opacity: 1;;transform: translateY(0);}
#wideBanner .banner_list_wrap ul{display: flex;flex-wrap: wrap;height: calc(100% - 66px);align-content: flex-start;justify-content: flex-start;}
#wideBanner .banner_list_wrap ul li{width: 205px;height: 98px;background-color: #263C6C;border-radius: 5px;margin-bottom: 10px;border:3px solid #263C6C;box-sizing: border-box;position: relative;margin-right: 10px;transition: all 0.3s ease;}

#wideBanner .banner_list_wrap ul li{opacity: 0;;transform: translateY(10px)}
#wideBanner.active .banner_list_wrap ul li{opacity: 1;;transform: translateY(0)}

#wideBanner .banner_list_wrap ul li:nth-child(6n){margin-right: 0;}
#wideBanner .banner_list_wrap ul li a{padding:10px 15px;}
#wideBanner .banner_list_wrap ul li .category{margin-top: 3px;width: 100%;height: 10px;;}
#wideBanner .banner_list_wrap ul li .category.update{background: url(https://ssl.nexon.com/s2/game/fo4/event/2023/230525_gnb_sa87ryh3/update.png) center 0 no-repeat;}
#wideBanner .banner_list_wrap ul li .category.esports{background: url(https://ssl.nexon.com/s2/game/fo4/event/2023/230525_gnb_sa87ryh3/esports.png) center 0 no-repeat;}
#wideBanner .banner_list_wrap ul li .category.event{background: url(https://ssl.nexon.com/s2/game/fo4/event/2023/230525_gnb_sa87ryh3/event.png) center 0 no-repeat;}
#wideBanner .banner_list_wrap ul li .category.pcbang{background: url(https://ssl.nexon.com/s2/game/fo4/event/2023/230525_gnb_sa87ryh3/pcbang.png) center 0 no-repeat;}
#wideBanner .banner_list_wrap ul li .tit{font-style: normal;margin-top: 6px;;font-weight: 400;font-size: 17px;line-height: 20px;color: #FFFFFF;}
#wideBanner .banner_list_wrap ul li .date{margin-top: 8px;;padding-top: 8px;border-top: 1px dashed #4060AB;font-style: normal;font-weight: 400;font-size: 13px;line-height: 16px;color: #7584AF;}

#wideBanner .banner_list_wrap ul li.ready{border-color: #0FA29F;}
#wideBanner .banner_list_wrap ul li.ready:before{content: "";position: absolute;top:2px;left:2px;width: 32px;height: 16px;background: url(https://ssl.nexon.com/s2/game/fo4/event/2023/230525_gnb_sa87ryh3/ready.png) 0 0 no-repeat;}
#wideBanner .banner_list_wrap ul li.reward{border-color: #B25493;}
#wideBanner .banner_list_wrap ul li.reward:before{content: "";position: absolute;top:2px;left:2px;width: 52px;height: 16px;background: url(https://ssl.nexon.com/s2/game/fo4/event/2023/230525_gnb_sa87ryh3/reward.png) 0 0 no-repeat;}
#wideBanner .banner_list_wrap ul li.fire:after{content: "";position: absolute;top:2px;right:2px;width: 23px;height: 23px;background:#072A60 url(https://ssl.nexon.com/s2/game/fo4/event/2023/230525_gnb_sa87ryh3/fire.png) 0 0 no-repeat;border-radius: 23px;background-size: 23px auto;}

#wideBanner .banner_list_wrap ul li a{color: #fff;display: block;;}

#wideBanner .banner_list_wrap ul li:nth-child(0){transition-delay: 0.00s;}
#wideBanner .banner_list_wrap ul li:nth-child(1){transition-delay: 0.01s;}
#wideBanner .banner_list_wrap ul li:nth-child(2){transition-delay: 0.02s;}
#wideBanner .banner_list_wrap ul li:nth-child(3){transition-delay: 0.03s;}
#wideBanner .banner_list_wrap ul li:nth-child(4){transition-delay: 0.04s;}
#wideBanner .banner_list_wrap ul li:nth-child(5){transition-delay: 0.05s;}
#wideBanner .banner_list_wrap ul li:nth-child(6){transition-delay: 0.06s;}
#wideBanner .banner_list_wrap ul li:nth-child(7){transition-delay: 0.07s;}
#wideBanner .banner_list_wrap ul li:nth-child(8){transition-delay: 0.08s;}
#wideBanner .banner_list_wrap ul li:nth-child(9){transition-delay: 0.09s;}
#wideBanner .banner_list_wrap ul li:nth-child(10){transition-delay: 0.10s;}
#wideBanner .banner_list_wrap ul li:nth-child(11){transition-delay: 0.11s;}
#wideBanner .banner_list_wrap ul li:nth-child(12){transition-delay: 0.12s;}
#wideBanner .banner_list_wrap ul li:nth-child(13){transition-delay: 0.13s;}
#wideBanner .banner_list_wrap ul li:nth-child(14){transition-delay: 0.14s;}
#wideBanner .banner_list_wrap ul li:nth-child(15){transition-delay: 0.15s;}
#wideBanner .banner_list_wrap ul li:nth-child(16){transition-delay: 0.16s;}
#wideBanner .banner_list_wrap ul li:nth-child(17){transition-delay: 0.17s;}
#wideBanner .banner_list_wrap ul li:nth-child(18){transition-delay: 0.18s;}
#wideBanner .banner_list_wrap ul li:nth-child(19){transition-delay: 0.19s;}
#wideBanner .banner_list_wrap ul li:nth-child(20){transition-delay: 0.20s;}
#wideBanner .banner_list_wrap ul li:nth-child(21){transition-delay: 0.21s;}
#wideBanner .banner_list_wrap ul li:nth-child(22){transition-delay: 0.22s;}
#wideBanner .banner_list_wrap ul li:nth-child(23){transition-delay: 0.23s;}
#wideBanner .banner_list_wrap ul li:nth-child(24){transition-delay: 0.24s;}
#wideBanner .banner_list_wrap ul li:nth-child(25){transition-delay: 0.25s;}
#wideBanner .banner_list_wrap ul li:nth-child(26){transition-delay: 0.26s;}
#wideBanner .banner_list_wrap ul li:nth-child(27){transition-delay: 0.27s;}
#wideBanner .banner_list_wrap ul li:nth-child(28){transition-delay: 0.28s;}
#wideBanner .banner_list_wrap ul li:nth-child(29){transition-delay: 0.29s;}
#wideBanner .banner_list_wrap ul li:nth-child(30){transition-delay: 0.30s;}
#wideBanner .banner_list_wrap ul li:nth-child(31){transition-delay: 0.31s;}
#wideBanner .banner_list_wrap ul li:nth-child(32){transition-delay: 0.32s;}
#wideBanner .banner_list_wrap ul li:nth-child(33){transition-delay: 0.33s;}
#wideBanner .banner_list_wrap ul li:nth-child(34){transition-delay: 0.34s;}
#wideBanner .banner_list_wrap ul li:nth-child(35){transition-delay: 0.35s;}
#wideBanner .banner_list_wrap ul li:nth-child(36){transition-delay: 0.36s;}
#wideBanner .banner_list_wrap ul li:nth-child(37){transition-delay: 0.37s;}
#wideBanner .banner_list_wrap ul li:nth-child(38){transition-delay: 0.38s;}
#wideBanner .banner_list_wrap ul li:nth-child(39){transition-delay: 0.39s;}
#wideBanner .banner_list_wrap ul li:nth-child(40){transition-delay: 0.40s;}
#wideBanner .banner_list_wrap ul li:nth-child(41){transition-delay: 0.41s;}
#wideBanner .banner_list_wrap ul li:nth-child(42){transition-delay: 0.42s;}
#wideBanner .banner_list_wrap ul li:nth-child(43){transition-delay: 0.43s;}
#wideBanner .banner_list_wrap ul li:nth-child(44){transition-delay: 0.44s;}
#wideBanner .banner_list_wrap ul li:nth-child(45){transition-delay: 0.45s;}
#wideBanner .banner_list_wrap ul li:nth-child(46){transition-delay: 0.46s;}
#wideBanner .banner_list_wrap ul li:nth-child(47){transition-delay: 0.47s;}
#wideBanner .banner_list_wrap ul li:nth-child(48){transition-delay: 0.48s;}
#wideBanner .banner_list_wrap ul li:nth-child(49){transition-delay: 0.49s;}
#wideBanner .banner_list_wrap ul li:nth-child(50){transition-delay: 0.50s;}
#wideBanner .banner_list_wrap ul li:nth-child(51){transition-delay: 0.51s;}
#wideBanner .banner_list_wrap ul li:nth-child(52){transition-delay: 0.52s;}
#wideBanner .banner_list_wrap ul li:nth-child(53){transition-delay: 0.53s;}
#wideBanner .banner_list_wrap ul li:nth-child(54){transition-delay: 0.54s;}
#wideBanner .banner_list_wrap ul li:nth-child(55){transition-delay: 0.55s;}
#wideBanner .banner_list_wrap ul li:nth-child(56){transition-delay: 0.56s;}
#wideBanner .banner_list_wrap ul li:nth-child(57){transition-delay: 0.57s;}
#wideBanner .banner_list_wrap ul li:nth-child(58){transition-delay: 0.58s;}
#wideBanner .banner_list_wrap ul li:nth-child(59){transition-delay: 0.59s;}
#wideBanner .banner_list_wrap ul li:nth-child(60){transition-delay: 0.60s;}
#wideBanner .banner_list_wrap ul li:nth-child(61){transition-delay: 0.61s;}
#wideBanner .banner_list_wrap ul li:nth-child(62){transition-delay: 0.62s;}
#wideBanner .banner_list_wrap ul li:nth-child(63){transition-delay: 0.63s;}
#wideBanner .banner_list_wrap ul li:nth-child(64){transition-delay: 0.64s;}
#wideBanner .banner_list_wrap ul li:nth-child(65){transition-delay: 0.65s;}
#wideBanner .banner_list_wrap ul li:nth-child(66){transition-delay: 0.66s;}
#wideBanner .banner_list_wrap ul li:nth-child(67){transition-delay: 0.67s;}
#wideBanner .banner_list_wrap ul li:nth-child(68){transition-delay: 0.68s;}
#wideBanner .banner_list_wrap ul li:nth-child(69){transition-delay: 0.69s;}
#wideBanner .banner_list_wrap ul li:nth-child(70){transition-delay: 0.70s;}


/* FC */
.event_text{z-index: 2; position: absolute; left: 50%; top: 0; transform: translateX(-50%); line-height: 0; font-size: 0;}
.gnb_state_wrap{    position: relative;display: inline-block; }
 .gnb_state_wrap .gnb_state a{font-size: 20px; line-height: 50px; font-family: "CruyffSansExpanded-Heavy"; margin-right: 50px; position: relative; cursor: pointer; z-index: 19;}
 .gnb_state_wrap .gnb_state a:nth-child(2)::after{position: absolute; content: ""; width: 15px; height: 24px; background: url("https://ssl.nexon.com/s2/game/fo4/event/2023/230714_showcase_cwxg8hoj3/divide.png") center center no-repeat; left: -35px; top: 13px;}
.gnb_state_wrap span{font-size: 17px; line-height: 50px; font-family: "CruyffSansExpanded-Heavy"; color: #000;}
.gnb_state_wrap span.logo{width: 29px; height: 25px; background: url("https://ssl.nexon.com/s2/game/fo4/event/2023/230808_register_m82NIwqo/logo_mini.png") 0 0 no-repeat;  display: inline-block; vertical-align: middle; margin-right: 3px;}
.gnb_state_wrap a.active span{color : #00c757 !important;}
.gnb_state_wrap a:hover span{color : #00c757 !important; transition: 200ms linear;}

#header .btn_logo a{background: url("https://ssl.nexon.com/s2/game/fo4/event/2023/230714_showcase_cwxg8hoj3/fclogo.png")center center no-repeat !important; width: 175px !important; height: 50px !important;}
#header .btn_logo {border-right: 0 !important;}
#header .menu .premium{background: url("https://ssl.nexon.com/s2/game/fo4/event/2023/230714_showcase_cwxg8hoj3/bg_premium.png") center 0 no-repeat !important; background-position: 0 11px !important; padding:  0 20px 0 0 !important; position:relative; left:16px !important;}
#header .menu .premium.active{background-position: 0 -41px !important;}
#header .menu .btn_logout{background: url("https://ssl.nexon.com/s2/game/fo4/event/2023/230714_showcase_cwxg8hoj3/btn_logout.png") center center no-repeat !important; border-left: 0 !important; width: 180px !important;}
#header .menu .btn_login{background: url("https://ssl.nexon.com/s2/game/fo4/event/2023/230714_showcase_cwxg8hoj3/btn_login.png") center center no-repeat !important; border-left: 0 !important; width: 180px !important;}
#header .menu .btn_gamestart{background: url("https://ssl.nexon.com/s2/game/fo4/event/2023/230714_showcase_cwxg8hoj3/btn_game_start.png") left top no-repeat !important; border-left: 0 !important; width: 194px !important;}