@charset "utf-8";

html,body { width:100%; max-width:2560px; min-width:1340px;min-height: 800px; margin:0 auto; font-family:"Pretendard",sans-serif; color:#1e2028; background-color:#000000; }

#wrapper { position:relative; overflow:hidden; width:100%; height: 100%;box-sizing: border-box;min-width:1340px;}
#wrapper a { display:inline-block; font-family:"Pretendard"; }
#wrapper button { visibility:visible; overflow:visible; display:inline-block; outline:none; cursor:pointer; font-family:"Pretendard"; }

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

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

#middle { overflow:hidden; position:relative; width:100%; max-width:2560px; min-width:1600px; margin:0 auto;}
#middle .section { position:relative; width:100%; max-width:2560px; min-width:1600px; margin:0 auto; }
#middle .inner { position:relative; box-sizing:border-box; width:1600px; height:100%; margin:0 auto; }
#middle .header.section { height:824px; }
#middle .event_01.section { height:1240px; background:url("https://ssl.nexon.com/s2/game/fo4/event/2023/230720_matchday_colkcdefs/bg_section1.jpg") center top no-repeat; }
#middle .event_02.section { height:1290px; background:url("https://ssl.nexon.com/s2/game/fo4/event/2023/230720_matchday_colkcdefs/bg_section2.jpg") center top no-repeat; }
#middle .event_03.section { height:1048px; background:url("https://ssl.nexon.com/s2/game/fo4/event/2023/230720_matchday_colkcdefs/bg_section3.jpg") center top no-repeat; }
#middle .event_04.section { height:685px; background:url("https://ssl.nexon.com/s2/game/fo4/event/2023/230720_matchday_colkcdefs/bg_section4.jpg") center top no-repeat; }

#middle .event_01.section .inner .btn_coupon { z-index:4; position:absolute; top:957px; width:420px; height:100px; background:url("https://ssl.nexon.com/s2/game/fo4/common/transparent.png") left top repeat; }
#middle .event_01.section .inner .btn_coupon.fo4 { left:379px; }
#middle .event_01.section .inner .btn_coupon.fmk { left:801px; }

#middle .event_02.section .inner .btn_notice { z-index:4; position:absolute; left:156px; top:517px; width:168px; height:46px; background:url("https://ssl.nexon.com/s2/game/fo4/common/transparent.png") left top repeat; }
#middle .inner .video { width: 734px; height:430px; z-index:4; position:absolute; right:158px; top:150px; border:20px solid #c09e59; background-color:#000000; box-sizing: border-box; }
#middle .inner .video #videoPlayer { width:694px; height:390px; }
#middle .inner .video .video_coming { width:694px; height:390px; }
#middle .inner .video .video_coming p {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width:272px; height:21px; background: url("https://ssl.nexon.com/s2/game/fo4/event/2023/230720_matchday_colkcdefs/comingsoon.png") center top no-repeat;}

#middle .event_02.section .inner .mission {width:1288px; height: 450px; position: absolute; left: 50%; top: 654px; transform: translateX(-50%);}
#middle .inner .mission li {width:314px; position:relative; float:left; height:450px; margin:0 8px 0 0; font-size:0; line-height:0; background:#ffffff; }
#middle .inner .mission .title { position:relative; box-sizing:border-box; margin:0 20px; padding: 20px 0 20px 0; font-size:20px; color:#000000;  line-height:1;border-bottom: 1px solid #e5e5e5;}
#middle .inner .mission .title p:nth-of-type(1) {font-size: 14px; font-weight: bold;}
#middle .inner .mission .title p:nth-of-type(2) {font-size: 20px; font-weight: bold; letter-spacing:-1px; padding-top: 7px;}
#middle .inner .mission .title_check {cursor: default; position: absolute; top: 21px; right: 0; width: 42px; height: 42px; background: url("https://ssl.nexon.com/s2/game/fo4/event/2023/230720_matchday_colkcdefs/check_off.png") center top no-repeat;}
#middle .inner .mission .title_check.active {background: url("https://ssl.nexon.com/s2/game/fo4/event/2023/230720_matchday_colkcdefs/check_on.png") center top no-repeat;}
#middle .inner .mission .item .image { width:144px; height:144px; margin:0 auto; padding:42px 0 20px; }
#middle .inner .mission .item .image img { width:144px; height:144px; background-color: #ebecf1; }
#middle .event_03.section .inner .mission .item .image img {background-color: #dee1eb;}
#middle .inner .mission .item .text { font-size:16px; line-height:26px; color:#000000; text-align:center; padding: 0 45px;}
#middle .inner .mission .item .text2 { font-size:16px; line-height:26px; color:#000000; text-align:center; padding: 0 10px;}
#middle .inner .mission .button {position: absolute; bottom: 0; left: 0; width: 100%; height: 80px; font-size:0; line-height:0; text-align:center; }
#middle .inner .mission .button .btn_reward { width: 100%; height: 100%;}
#middle .inner .mission .button .btn_reward.complete { cursor:default; background-color: #969696;}
#middle .inner .mission .button .btn_reward.none { cursor:default; background-color:#969696; }
#middle .inner .mission .button .btn_reward.active { cursor:pointer; background-color:#c09e59; }
#middle .inner .mission .button .btn_reward.inactive { position: relative; cursor:default; background-color:#c09e59; }
#middle .inner .mission .button .btn_reward.inactive::after { position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 100%; background-color: #ffffff; opacity: 50%; }
#middle .inner .mission .button .btn_reward p { font-weight:bold; font-size:21px; line-height:42px; color:#ffffff; letter-spacing:0; text-align:center; }

#middle .event_03.section .inner .btn_notice { z-index:4; position:absolute; left:160px; top:517px; width:168px; height:46px; background:url("https://ssl.nexon.com/s2/game/fo4/common/transparent.png") left top repeat; }
#middle .event_03.section .inner .video { width: 734px; height:430px; z-index:4; position:absolute; right:158px; top:150px; border:20px solid #66cfff; background-color:#000000; box-sizing: border-box; }
#middle .event_03.section .inner .video #videoPlayer2 { width:694px; height:390px; }
#middle .event_03.section .inner .mission {position: absolute; top: 703px; right: 208px; left: unset; width: 786px; height: 144px; display: flex;}
#middle .event_03.section .inner .mission .title {width: 250px; margin: 0; padding: 0; border: 0;}
#middle .event_03.section .inner .mission .title_check {position: absolute; top: unset; bottom: 0; right: 0; left: 1px; width: 42px; height: 42px; background: url("https://ssl.nexon.com/s2/game/fo4/event/2023/230720_matchday_colkcdefs/check_off2.png") center top no-repeat;}
#middle .event_03.section .inner .mission .title_check.active {background: url("https://ssl.nexon.com/s2/game/fo4/event/2023/230720_matchday_colkcdefs/check_on2.png") center top no-repeat;}
#middle .event_03.section .inner .mission .image {padding: 0 0 0 50px; float: left;}
#middle .event_03.section .inner .mission .item {width: 536px;}
#middle .event_03.section .inner .mission .item .text {padding: 0 90px 0 222px; text-align: left;}
#middle .event_03.section .inner .mission .button {position: absolute; left: unset; right: 0; width: 314px; height: 80px; font-size:0; line-height:0; text-align:center; }
#middle .event_03.section .inner .mission .button .btn_reward.inactive {background-color:#66cfff; }
#middle .event_03.section .inner .mission .button .btn_reward.inactive::after { position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 100%; background-color: #ffffff; opacity: 60%; }
#middle .event_03.section .inner .mission .button .btn_reward.active {background-color:#ffd40b; }

#middle .event_04.section .itembox._01 {display: flex; position: absolute; left: 268px; top: 332px;}
#middle .event_04.section .itembox._02 {display: flex; position: absolute; right: 266px; top: 332px;}
#middle .event_04.section .itembox ul {margin-right: 20px;}
#middle .event_04.section .itembox .image {width: 144px; height: 144px; margin-bottom: 20px; background-color: #dcdcdc; }
#middle .event_04.section .itembox .image img {width: 144px; height: 144px;}
#middle .event_04.section .itembox .text {text-align: center; font-size: 15px; line-height: 23px; color: #333333;}
#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; }

/* 레이어 */
.layer_popup { position:fixed; left:0; top:0; display:none; width:100%; height:100%; background-color:rgba(0,0,0,0.7);overflow-y:auto; z-index:10000;}
.layer_popup .content {  position:absolute; left:50%; top:50%; box-sizing:border-box; width:680px; box-shadow:0 0 32px rgba(0,0,0,0.8); -ms-transform:translateX(-50%) translateY(-50%); transform:translateX(-50%) translateY(-50%); background-color:#fff;z-index:100; }
.layer_popup .content .btn_close { 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;z-index:16;  }

.layer_popup .content .title { 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); position: relative;z-index: 10;background: #fff;}

.loading.layer_popup { z-index:10030 !important; }
.loading.layer_popup .content { z-index:138 !important; box-shadow:none; border-radius:0; border:none; background:transparent; }
.loading.layer_popup .content ul { width:128px; margin:0 auto 48px auto; }
.loading.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.layer_popup .content p:nth-child(2) { width:100%; margin-bottom:16px; font-size:48px; line-height:48px; font-weight:bold; color:#ffffff; text-align:center; text-shadow:0 0 32px rgba(0,0,0,1); }
.loading.layer_popup .content p:nth-child(3) { width:100%; font-size:32px; line-height:32px; color:#ffffff; text-align:center; text-shadow:0 0 32px rgba(0,0,0,1); }