@charset "utf-8";

html,body { width:100%; max-width:2560px; min-width:1390px; margin:0 auto; font-family:"Pretendard",sans-serif; letter-spacing:-1px; background-color:#000000; }
#wrapper { position:relative; overflow:hidden; box-sizing:border-box; width:100%; max-width:2560px; min-width:1390px; margin:0 auto; font-family:"Pretendard",sans-serif; letter-spacing:0; line-height:0; }
#wrapper a { display:inline-block; font-family:"Pretendard",sans-serif; letter-spacing:0; }
#wrapper button { overflow:visible; font-family:"Pretendard",sans-serif; }
#wrapper button:focus { outline:0 ;}
#wrapper p,
#wrapper strong,
#wrapper span { font-family:"Pretendard",sans-serif; letter-spacing:0; }

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

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

#middle { overflow:hidden; position:relative; width:100%; max-width:2560px; min-width:1390px; margin:0 auto; padding:0; background:url("https://ssl.nexon.com/s2/game/fo4/event/2022/221222_gift_sd745yh322/bg_middle.jpg") center top no-repeat #000000;margin-top: -70px;;}
#middle .section { position:relative; width:100%; max-width:2560px; min-width:1390px; margin:0 auto; }
#middle .section .inner { position:relative; box-sizing:border-box; width:1390px; margin:0 auto; }
#middle .header.section .inner { height:818px;}
#middle .event.section .inner { height:1700px;}

/* #middle .section .inner > .btn_howto { z-index:4; position:absolute; left:8px; top:520px; width:194px; height:48px; background:url("https://ssl.nexon.com/s2/game/fo4/common/transparent.png") left top repeat; } */

#middle .section .inner > .btn_notice { z-index:4; position:absolute;left: 512px;top: 660px;width: 184px;height: 59px; background:url("https://ssl.nexon.com/s2/game/fo4/common/transparent.png") left top repeat;}
#middle .section .inner > .btn_reward { z-index:4; position:absolute;left: 699px;top: 660px;width: 184px;height: 59px;background:url("https://ssl.nexon.com/s2/game/fo4/common/transparent.png") left top repeat;}

#middle .section .inner .user { z-index:16; position:absolute; left:30px; top:30px; box-sizing:border-box; width:1330px; height:100px; border-radius:8px; background-color:#000000; }
#middle .section .inner .user .login .btn_login { position:relative; box-sizing:border-box; width:1330px; height:100px; padding-right:300px; }
#middle .section .inner .user .login .btn_login::after { content:"로그인"; z-index:4; position:absolute; right:30px; top:28px; box-sizing:border-box; display:block; width:238px; height:44px; font-size:18px; line-height:42px; color:#000000; letter-spacing:0; text-align:center; border:1px solid #ffea00; border-radius:4px; background-color:#ffea00; }
#middle .section .inner .user .login .btn_login p { font-size:20px; line-height:100px; color:#ffffff; letter-spacing:0; text-align:center; }
#middle .section .inner .user .login .btn_login p strong { font-size:20px; line-height:100px; color:#faf000; letter-spacing:0; vertical-align:top; }

#middle .section .inner .user .login .fighting { position:relative; box-sizing:border-box; width:1330px; height:100px; padding-right:300px; }
#middle .section .inner .user .login .fighting::after { content:"윈터 캠프 참가 신청하러 가기"; z-index:4; position:absolute; right:30px; top:28px; box-sizing:border-box; display:block; width:238px; height:44px; font-size:18px; line-height:42px; color:#fff; letter-spacing:0; text-align:center; border:1px solid #0332dc; border-radius:4px; background-color:#0332dc; }
#middle .section .inner .user .login .fighting p { font-size:20px; line-height:100px; color:#ffffff; letter-spacing:0; text-align:center; }
#middle .section .inner .user .login .fighting p strong { font-size:20px; line-height:100px; color:#faf000; letter-spacing:0; vertical-align:top; }
#middle .section .inner .user .login .fighting p span { font-size:20px; line-height:100px; color:#979797; letter-spacing:0; vertical-align:top; }

#middle .section .inner .user .login .btn_check { z-index:4; position:absolute; left:0; top:0; box-sizing:border-box; width:298px; height:100px; background:url("https://ssl.nexon.com/s2/game/fo4/event/2022/221222_gift_sd745yh322/btn_check.png") left top no-repeat; }

#middle .section .inner .user .login .btn_reward_list { z-index:4; position:absolute; right:30px; top:28px; box-sizing:border-box; display:block; width:238px; height:44px; border:1px solid #3a3a3a; border-radius:4px; background-color:#3a3a3a; }
#middle .section .inner .user .login .btn_reward_list p { font-size:18px; line-height:42px; color:#c4c1c2; letter-spacing:0; text-align:center; }

#middle .section .inner .user .login .none { padding:38px 0; font-size:20px; line-height:24px; color:#ffffff; letter-spacing:0; text-align:center; }
#middle .section .inner .user .login .none span{color: #979797;font-size: 20px;}
#middle .section .inner .user .login .check { padding-left:298px; font-size:20px; line-height:100px; color:#ffffff; letter-spacing:0; text-align:center; }
#middle .section .inner .user .login > p.point { position:relative; padding:30px 300px 30px 298px; font-size:16px; line-height:20px; color:#ffffff; letter-spacing:0; text-align:center; }

#middle .section .inner .user .login .point { position:relative; padding:0 300px 0 333px;text-align: center;line-height: 100px;vertical-align: top;;}
#middle .section .inner .user .login .point p{ font-size: 28px;color: #ebe0e2;display: inline-block;margin-right: 50px;;line-height: 100px;vertical-align: top;}
#middle .section .inner .user .login .point p strong{ font-size: 28px;color: #ffd600;font-weight: 900;}
#middle .section .inner .user .login .point .btn_point_get_list{display: inline-block;vertical-align: top;margin-top: 28px;;}

#middle .section .inner .user .login .btn_point_get_list { z-index:4; box-sizing:border-box; display:block; width:238px; height:44px; border:1px solid #3a3a3a; border-radius:4px; background-color:#3a3a3a; }
#middle .section .inner .user .login .btn_point_get_list { font-size:18px; line-height:42px; color:#c4c1c2; letter-spacing:0; text-align:center; }


#middle .section .inner .user .login .end { font-size:20px; line-height:100px; color:#ffffff; letter-spacing:0; text-align:center; }
#middle .section .inner .user .login .point_list { z-index:32; position:absolute; left:362px; top:68px; box-sizing:border-box; opacity:0; display:none; width:512px; padding:24px 16px; font-weight:normal; font-size:14px; line-height:22px; color:#3a3a3a; letter-spacing:0; text-align:center; border:2px solid #3a3a3a; border-radius:4px; box-shadow:0 8px 16px rgba(0,0,0,0.2); background-color:#f0f0f0; }
#middle .section .inner .user .login .point_list.ready { opacity:0; display:block; }
#middle .section .inner .user .login .point_list.active { opacity:1; display:block; }
#middle .section .inner .user .login .point_list .btn_prev { z-index:4; position:absolute; left:16px; top:24px; box-sizing:border-box; width:36px; height:36px; border:1px solid #3a3a3a; border-radius:4px; background-color:#3a3a3a; }
#middle .section .inner .user .login .point_list .btn_prev::before { content:"◀"; z-index:4; position:absolute; left:0; top:0; box-sizing:border-box; display:block; width:34px; height:34px; font-weight:bold; font-size:18px; line-height:34px; color:#1cbcd4; letter-spacing:0; text-align:center; }
#middle .section .inner .user .login .point_list .btn_next { z-index:4; position:absolute; right:16px; top:24px; box-sizing:border-box; width:36px; height:36px; border:1px solid #3a3a3a; border-radius:4px; background-color:#3a3a3a; }
#middle .section .inner .user .login .point_list .btn_next::before { content:"▶"; z-index:4; position:absolute; left:0; top:0; box-sizing:border-box; display:block; width:34px; height:34px; font-weight:bold; font-size:18px; line-height:34px; color:#1cbcd4; letter-spacing:0; text-align:center; }
#middle .section .inner .user .login .point_list .swiper-button-disabled { opacity:0.4; cursor:default; }
#middle .section .inner .user .login .point_list .wrapper { overflow:hidden; font-size:0; line-height:0; }
#middle .section .inner .user .login .point_list .wrapper .title { font-weight:bold; font-size:18px; line-height:26px; color:#000000; letter-spacing:0; text-align:center; }
#middle .section .inner .user .login .point_list .wrapper .title strong { font-weight:bold; font-size:18px; line-height:26px; color:#3a3a3a; letter-spacing:0; vertical-align:top; }
#middle .section .inner .user .login .point_list .wrapper .point { margin-top:8px; padding:12px 0; font-size:16px; line-height:16px; color:#ffffff; letter-spacing:0; text-align:center; border-radius:4px; background-color:#0e1c34; }
#middle .section .inner .user .login .point_list .wrapper .point strong { font-weight:bold; font-size:16px; line-height:16px; color:#faf000; letter-spacing:0; vertical-align:top; }
#middle .section .inner .user .login .point_list .wrapper > .list { width:2856px; }
#middle .section .inner .user .login .point_list .wrapper > .list li { box-sizing:border-box; float:left; width:476px;  }
#middle .section .inner .user .login .point_list .wrapper > .list li table { table-layout:fixed; overflow:hidden; width:100%; margin-top:8px; border-radius:4px; }
#middle .section .inner .user .login .point_list .wrapper > .list li table th { padding:12px 0; font-weight:normal; font-size:14px; line-height:14px; color:#50e8ff; letter-spacing:0; text-align:center; vertical-align:middle; border-right:2px solid #3a3a3a; background-color:#3a3a3a; }
#middle .section .inner .user .login .point_list .wrapper > .list li table th:first-child { border-right:2px solid #3a3a3a; background-color:#3a3a3a; }
#middle .section .inner .user .login .point_list .wrapper > .list li table th:last-child { border-right:none; }
#middle .section .inner .user .login .point_list .wrapper > .list li table td { padding:12px 0; font-size:14px; line-height:14px; color:#000000; letter-spacing:0; text-align:center; border-right:2px solid #3a3a3a; vertical-align:middle; border-bottom:2px solid #3a3a3a; background-color:#ffffff; }
#middle .section .inner .user .login .point_list .wrapper > .list li table td[rowspan]:first-child { color:#50e8ff; border-right:2px solid #3a3a3a; background-color:#3a3a3a; }
#middle .section .inner .user .login .point_list .wrapper > .list li table td:last-child { border-right:none; }
#middle .section .inner .user .login .point_list .wrapper > .list li table td.active { font-weight:bold; color:#ff0000; }

#middle .section .inner .progress { z-index:4; position:absolute; left:30px; top:190px; overflow:hidden; width:1332px; height:30px; border-radius:8px; background-color:#0a1426; }
#middle .section .inner .progress li { box-sizing:border-box; float:left; width:166px; height:30px; font-weight:400; font-size:14px; line-height:30px; color:#ffffff; letter-spacing:0; text-align:center; border-right:1px solid #3a3a3a;position: relative;}
#middle .section .inner .progress li  span{position: absolute;top:0;right:0;transform: translateX(50%);font-size:14px; line-height:30px; color:#ffffff; }
#middle .section .inner .progress li:nth-child(1){width: 167px;z-index: 10;;}
#middle .section .inner .progress li:nth-child(2){width: 167px;z-index: 9;border-right: none;}
#middle .section .inner .progress li:nth-child(3){width: 167px;z-index: 8;;}
#middle .section .inner .progress li:nth-child(4){width: 167px;z-index: 7;border-right: none;;}
#middle .section .inner .progress li:nth-child(5){width: 166px;z-index: 6;;}
#middle .section .inner .progress li:nth-child(6){width: 166px;z-index: 5;border-right: none;;}
#middle .section .inner .progress li:nth-child(7){width: 166px;z-index: 4;;}
#middle .section .inner .progress li:nth-child(8){width: 166px;z-index: 3;;}
#middle .section .inner .progress li:last-child { border-right:none;;}
#middle .section .inner .progress li.active { color:#ffffff; background-color:#b13e00; }
#middle .section .inner .progress li.active:nth-child(4){background-color: #b13e00}
#middle .section .inner .progress li.active:nth-child(5){background-color: #b13e00}
#middle .section .inner .progress li.active:nth-child(6){background-color: #d26d1f}
#middle .section .inner .progress li.active:nth-child(7){background-color: #d26d1f}
#middle .section .inner .progress li.active:nth-child(8){background-color: #e7b295}

#middle .section .inner .tab { z-index:4; position:absolute; left:30px; top:234px; overflow:hidden; width:1332px; height:70px; border-radius:8px 8px 0 0; box-shadow:0 4px 8px rgba(0,0,0,0.4);
    background: rgb(185,196,204);
    background: linear-gradient(180deg, rgba(185,196,204,1) 0%, rgba(68,160,209,1) 0%, rgba(17,87,161,1) 100%);
 }

#middle .section .inner .tab li { position:relative; box-sizing:border-box; float:left; width:166px; height:70px; border-right:1px solid #4d0c13;box-sizing: border-box;}
#middle .section .inner .tab li:nth-child(1){width: 167px;;}
#middle .section .inner .tab li:nth-child(2){width: 167px;;}
#middle .section .inner .tab li:nth-child(3){width: 167px;;}
#middle .section .inner .tab li:nth-child(4){width: 167px;;}
#middle .section .inner .tab li:last-child { border-right:none;; }
#middle .section .inner .tab li button { display:block; width:100%; height:70px; font-weight:bold; font-size:18px; line-height:70px; color:#fff; letter-spacing:0; text-align:center; }
#middle .section .inner .tab li.active button { color:#fff; box-shadow:inset 0 -2px #3b362d;
    background: rgb(185,196,204);
    background: linear-gradient(180deg, rgba(185,196,204,1) 0%, rgba(51,51,51,1) 0%, rgba(11,11,11,1) 100%);
 }
#middle .section .inner .tab li.alarm button::after { content:""; z-index:4; position:absolute; right:16px; top:16px; box-sizing:border-box; display:block; width:10px; height:10px; border-radius:100%; background-color:#ffd600; }
#middle .section .inner .tab li.active.alarm button::after { display:none; }
#middle .section .inner .reward { z-index:8; position:absolute; left:30px; top:304px; width:1332px; height:700px; border-radius:0 0 8px 8px; box-shadow:0 4px 8px rgba(0,0,0,0.4); background-color:#131313; }
#middle .section .inner .reward li { z-index:8; position:absolute; left:0; top:0; display:none; box-sizing:border-box; width:1332px; padding:100px 0 32px 0; font-size:0; line-height:0; text-align:center; }
#middle .section .inner .reward li.active { display:block; }
#middle .section .inner .reward li .item { position:relative; display:inline-block; width:442px; vertical-align:top; border-left:2px solid #363636; }
#middle .section .inner .reward li .item:first-child { border-left:2px solid transparent }

#middle .section .inner .reward li .item .text { box-sizing:border-box; height:68px;; padding:16px 16px 0 16px; font-weight:500; font-size:22px; line-height:26px; color:#dddcdc; letter-spacing:0; text-align:center; }
#middle .section .inner .reward li .item.choice { display:block; width:1332px; padding-bottom:68px; font-size:0; line-height:0; border-left:none; }
#middle .section .inner .reward li .item.choice .image { display:inline-block; padding-right:56px; vertical-align:top; }
#middle .section .inner .reward li .item.choice .text { display:inline-block; width:522px; padding-top:72px; font-weight:normal; font-size:18px; line-height:22px; vertical-align:top; }
#middle .section .inner .reward li .item.choice .text strong { display:block; padding-bottom:16px; font-weight:bold; font-size:22px; line-height:26px; color:#dddcdc; letter-spacing:0; }
#middle .section .inner .reward li .item.choice .allitem { z-index:4; position:absolute; right:414px; top:200px; }
#middle .section .inner .reward li .item.choice .allitem > p { position:relative; box-sizing:border-box; display:block; width:238px; height:44px; padding:0 44px 0 16px; font-size:14px; line-height:42px; color:#50e8ff; letter-spacing:0; text-align:left; border-radius:4px; background-color:#3a3a3a; }
#middle .section .inner .reward li .item.choice .allitem > p strong { z-index:4; position:absolute; right:8px; top:8px; box-sizing:border-box; width:28px; height:28px; border:1px solid #3a3a3a; border-radius:4px; background-color:#201448; }
#middle .section .inner .reward li .item.choice .allitem > p strong::before { content:""; z-index:4; position:absolute; left:6px; top:12px; box-sizing:border-box; display:block; width:14px; height:2px; background-color:#50e8ff; }
#middle .section .inner .reward li .item.choice .allitem > p strong::after { content:""; z-index:4; position:absolute; left:12px; top:6px; box-sizing:border-box; display:block; width:2px; height:14px; background-color:#50e8ff; }
#middle .section .inner .reward li .button { box-sizing:border-box; display:block; width:100%; padding:64px 66px 0 66px; text-align:center; }
#middle .section .inner .reward li .button .btn_reward { opacity:0.4; width:1200px; height:100px; cursor:default; background:url("https://ssl.nexon.com/s2/game/fo4/event/2022/221222_gift_sd745yh322/btn_reward.png") left top no-repeat; }
#middle .section .inner .reward li .button .btn_reward.active { opacity:1; cursor:pointer; }
#middle .section .inner .reward li .button .btn_reward p { font-weight:bold; font-size:24px; line-height:100px; color:#ffffff; letter-spacing:0; }
#middle .section .inner .reward li .button .btn_reward p strong { font-weight:bold; font-size:16px; line-height:100px; color:#faf000; letter-spacing:0; vertical-align:top; }

#middle .section .inner .reward li .button .btn_reward.complete { opacity:1; border:6px solid #aaabaf; border-radius:4px; background:#131313; }
#middle .section .inner .reward li .button .btn_reward.complete p { line-height:88px; color:#aaabaf; }


#middle .section .inner .aside_wrap{ z-index:8; position:absolute; left:30px; top:1065px; width:1332px; height:536px;padding-top: 192px;;}
#middle .section .inner .aside_wrap .links{padding: 0 12px;}
#middle .section .inner .aside_wrap .links > a{display: block;width: 198px;height: 259px;background-color: transparent;float: left;margin-right: 2px;;}
#middle .section .inner .aside_wrap .mission{position: absolute;left: 952px;top: 338px;width: 345px;text-align: center;;}
#middle .section .inner .aside_wrap .mission .mission1_txt{font-size: 22px;color: #ffffff;;}
#middle .section .inner .aside_wrap .mission .mission1_txt strong{color: #ffe400;font-size: 22px;font-weight: 400;;}
#middle .section .inner .aside_wrap .mission .mission2_txt{font-size: 22px;color: #ffffff;margin-top: 78px;}
#middle .section .inner .aside_wrap .mission .mission2_txt strong{color: #ffe400;font-size: 22px;font-weight: 400;;}

#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:640px; 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 ; }
.event_layer_popup .content .title { z-index:10; position:relative; height:64px; font-weight:500; font-size:20px; line-height:64px; color:#000000; text-align:center; box-shadow:inset 0 -1px 0 rgba(220,220,220,1); background-color:#ffffff; }
.event_layer_popup .content .btn_close { z-index:16; position:absolute; right:0; top:0; width:64px; height:64px; box-shadow:inset 1px 0 0 rgba(220,220,220,1); background:url("https://ssl.nexon.com/s2/game/fo4/event/2020/200402_layer_common_/btn_close.png") left top no-repeat; }
.event_layer_popup .content .message { padding:32px 0; font-size:18px; line-height:26px; color:#000000; letter-spacing:0; text-align:center; }
.event_layer_popup .content .message strong { font-size:18px; line-height:26px; color:#08de68; letter-spacing:0; vertical-align:top; }
.event_layer_popup .content .table { padding:0 32px 32px 32px; }
.event_layer_popup .content .table table { table-layout:fixed; width:100%; }
.event_layer_popup .content .table table th { height:48px; font-weight:normal; font-size:16px; line-height:16px; color:#ffffff; text-align:center; vertical-align:middle; border-right:1px solid #dcdcdc; background-color:#949494; }
.event_layer_popup .content .table table th:first-child { border-left:1px solid #949494; }
.event_layer_popup .content .table table th:last-child { border-right:1px solid #949494; }
.event_layer_popup .content .table table td { height:48px; font-size:16px; line-height:16px; color:#666666; text-align:center; vertical-align:middle; border-left:1px solid #dcdcdc; border-bottom:1px solid #dcdcdc; }
.event_layer_popup .content .table table td:first-child[rowspan] { border-left:1px solid #949494; }
.event_layer_popup .content .table table td:last-child { border-right:1px solid #949494; }
.event_layer_popup .content .table table tr:last-child td { border-bottom:1px solid #949494; }
.event_layer_popup .content .table table tr:nth-child(6) td[rowspan] { border-bottom:1px solid #949494; }
.event_layer_popup .content .advice { padding:32px; font-size:14px; line-height:22px; color:#949494; letter-spacing:0; background-color:#eaeaea; }
.event_layer_popup .content .advice strong { font-weight:bold; font-size:14px; line-height:22px; color:#949494; letter-spacing:0; vertical-align:top; }
.event_layer_popup .content .button .btn_confirm { width:100%; font-size:24px; line-height:72px; color:#ffffff; letter-spacing:0; text-align:center; background-color:#08de68; }
.loading.event_layer_popup { z-index:1030 !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; }