@charset "utf-8";

html,body { width:100%; max-width:2000px; min-width:1600px;min-height: 800px; margin:0 auto; font-family:"Noto Sans KR",sans-serif; color:#1e2028; background-color:#000000; }

#wrapper { position:relative; overflow:hidden; width:100%; height: 100%;box-sizing: border-box}
#wrapper a { display:inline-block; font-family:"Noto Sans KR"; }
#wrapper button { visibility:visible; overflow:visible; display:inline-block; padding:0; outline:none; cursor:pointer; font-family:"Noto Sans KR"; }

#loader { z-index:1024; position:fixed; left:0; top:0; width:100%; height:100%; background:url("https://ssl.nexon.com/s2/game/fo4/common/transparent.png") left top repeat #000; }

#middle {  width:100%; height:100%;background: url(https://ssl.nexon.com/s2/game/fo4/event/2019/190801_and_d84rhyu4/bg_event.jpg) center 0 no-repeat;min-height: 1200px;z-index: 200;position: relative;}
#middle #quick{position: fixed;top:50%;right:0;width: 76px;height: 249px;z-index: 1000;margin-top:-125px;}
#middle #quick ul{width: 76px;height: 249px;}
#middle #quick ul li{width: 76px;}
#middle #quick ul li a{display: block;}

#middle .section { position:relative; width:1600px;margin:0 auto;}
#middle .section.content{position: relative;width: 100%;height: 100%;height: 1200px;margin-top:-50px;}
#middle .section.content .video{position: absolute;top:0;left:50%;margin-left:-1000px;}
#middle .section.content .video video{}
#middle .section.content .video .dimmed{position: absolute;top:0;left:0;width:100%;height:100%;z-index: 1;background:url("https://ssl.nexon.com/s2/game/fo4/common/transparent.png") left top repeat;}
#middle .section.content .teaser_tit{position: relative;top:0;left:0;width: 100%;height: 100%;perspective: 100px;z-index: 10000;}
#middle .section.content .teaser_tit .wrap{position: absolute;top:50%;left:50%;transform: translateX(-50%) translateY(-50%) translateZ(0);transition: all 1s ease;transform-origin: 50% 50%;opacity: 1;transition-delay: 1s}
#middle .section.content .teaser_tit.active .wrap{transform: translateX(-50%) translateY(-50%) translateZ(100px);opacity: 0}

#middle .section.content .swiper-container{position: absolute;top:0;left:0;width:100%;height:100%;z-index: 10;opacity: 0;transition: opacity 0.5s ease}
#middle .section.content .swiper-container.active{opacity: 1;}
#middle .section.content .swiper-container .swiper-wrapper{position: relative;;width:100%;height:100%;}
#middle .section.content .swiper-container .swiper-slide{position: relative;;width:100%;height:100%;}
#middle .section.content .swiper-container .p_l{}
#middle .section.content .swiper-container .p_l .thumb{position: absolute;bottom:-20px;left:-300px;transition: all 1s ease;}
#middle .section.content .swiper-container .swiper-slide-active .p_l .thumb{transform: translateX(100px)}

#middle .section.content .swiper-container .p_l .chat{position: absolute;bottom:320px;left:150px;}
#middle .section.content .swiper-container .p_l .name{position: absolute;bottom:150px;left:250px;}
#middle .section.content .swiper-container .p_r{}
#middle .section.content .swiper-container .p_r .thumb{position: absolute;bottom:-20px;right:-300px;transition: all 1s ease;}
#middle .section.content .swiper-container .swiper-slide-active .p_r .thumb{transform: translateX(-100px)}
#middle .section.content .swiper-container .p_r .chat{position: absolute;bottom:320px;right:150px;}
#middle .section.content .swiper-container .p_r .name{position: absolute;bottom:150px;right:250px;}
#middle .section.content .swiper-container .cont{position: absolute;top:50%;left:50%;transform: translateX(-50%) translateY(-50%);width: 946px;height: 493px;}
#middle .section.content .swiper-container .cont .tit{position: absolute;bottom:520px;left:0;width: 100%;text-align: center}
#middle .section.content .swiper-container .cont .vs{position: absolute;top:520px;left:0;width: 100%;text-align: center}

#middle .section.content .swiper-container .cont .p_l_cont{}
#middle .section.content .swiper-container .cont .p_l_cont .thumb_s{position: absolute;top:88px;left:68px;}
#middle .section.content .swiper-container .cont .p_l_cont .btn{position: absolute;top:253px;left:68px;width: 187px;height: 80px;z-index: 10;background: url(https://ssl.nexon.com/s2/game/fo4/event/2019/190801_and_d84rhyu4/b_1.png) 0 0 no-repeat;;}
#middle .section.content .swiper-container .cont .p_l_cont .btn:hover{background-position: -196px 0}

#middle .section.content .swiper-container .cont .p_l_cont .btn.get.disable{cursor: default;background: url(https://ssl.nexon.com/s2/game/fo4/event/2019/190801_and_d84rhyu4/b_get.png) 0 0 no-repeat;;}
#middle .section.content .swiper-container .cont .p_l_cont .btn.get{background: url(https://ssl.nexon.com/s2/game/fo4/event/2019/190801_and_d84rhyu4/b_get.png) -196px 0 no-repeat;;}
#middle .section.content .swiper-container .cont .p_l_cont .btn.done{cursor: default;;background: url(https://ssl.nexon.com/s2/game/fo4/event/2019/190801_and_d84rhyu4/b_done.png) 0 0 no-repeat;;}
#middle .section.content .swiper-container .cont .p_l_cont .btn.done_pre{cursor: default;;background: url(https://ssl.nexon.com/s2/game/fo4/event/2019/190801_and_d84rhyu4/b_done2.png) 0 0 no-repeat;;}

#middle .section.content .swiper-container .cont .p_l_cont .per{overflow: hidden;position: absolute;top: 400px;left: 100px;width: 200px;text-align: left;}

#middle .section.content .swiper-container .cont .p_r_cont{}
#middle .section.content .swiper-container .cont .p_r_cont .thumb_s{position: absolute;top:88px;right:68px;}
#middle .section.content .swiper-container .cont .p_r_cont .btn{position: absolute;top:250px;right:68px;width: 187px;height: 83px;z-index: 10;background: url(https://ssl.nexon.com/s2/game/fo4/event/2019/190801_and_d84rhyu4/b_2.png) 0 0 no-repeat;;}
#middle .section.content .swiper-container .cont .p_r_cont .btn:hover{background-position: -196px 0}


#middle .section.content .swiper-container .cont .p_r_cont .btn.get.disable{cursor: default;background: url(https://ssl.nexon.com/s2/game/fo4/event/2019/190801_and_d84rhyu4/b_2_get.png) 0 0 no-repeat;;}
#middle .section.content .swiper-container .cont .p_r_cont .btn.get{background: url(https://ssl.nexon.com/s2/game/fo4/event/2019/190801_and_d84rhyu4/b_2_get.png) -196px 0 no-repeat;;}
#middle .section.content .swiper-container .cont .p_r_cont .btn.done{cursor: default;;background: url(https://ssl.nexon.com/s2/game/fo4/event/2019/190801_and_d84rhyu4/b_done.png) 0 0 no-repeat;;}
#middle .section.content .swiper-container .cont .p_r_cont .btn.done_pre{cursor: default;;background: url(https://ssl.nexon.com/s2/game/fo4/event/2019/190801_and_d84rhyu4/b_done2.png) 0 0 no-repeat;;}

#middle .section.content .swiper-container .cont .p_r_cont .per{overflow: hidden;position: absolute;top: 400px;right: 100px;width: 200px;text-align: right;}

#middle .section.content .swiper-container .cont .gage{position: absolute;bottom:68px;left:50%;margin-left:-266px;height:11px;width:532px;;background: url(https://ssl.nexon.com/s2/game/fo4/event/2019/190801_and_d84rhyu4/g_r.png) 0 0 no-repeat;}
#middle .section.content .swiper-container .cont .gage span{position: absolute;bottom:0;;left:0;height:11px;width:532px;;background: url(https://ssl.nexon.com/s2/game/fo4/event/2019/190801_and_d84rhyu4/g_l.png) 0 0 no-repeat;}
#middle .section.content .swiper-container .cont .link_youtube{position: absolute;top: 156px;left: 320px;width: 310px;height: 172px;z-index: 1;background:url("https://ssl.nexon.com/s2/game/fo4/common/transparent.png") left top repeat;}

#middle .section.content .swiper-container .cont .p_l_cont .per .num{display: inline-block;width:20px;height:43px;background: url(https://ssl.nexon.com/s2/game/fo4/event/2019/190801_and_d84rhyu4/s_l.png) 0 0 no-repeat; }
#middle .section.content .swiper-container .cont .p_l_cont .per .num.d{background: url(https://ssl.nexon.com/s2/game/fo4/event/2019/190801_and_d84rhyu4/d_l.png) 0 0 no-repeat;width: 33px;}
#middle .section.content .swiper-container .cont .p_l_cont .per .num.n0{background-position: -281px 0}
#middle .section.content .swiper-container .cont .p_l_cont .per .num.n1{background-position: 2px 0}
#middle .section.content .swiper-container .cont .p_l_cont .per .num.n2{background-position: -29px 0}
#middle .section.content .swiper-container .cont .p_l_cont .per .num.n3{background-position: -61px 0}
#middle .section.content .swiper-container .cont .p_l_cont .per .num.n4{background-position: -92px 0}
#middle .section.content .swiper-container .cont .p_l_cont .per .num.n5{background-position: -124px 0}
#middle .section.content .swiper-container .cont .p_l_cont .per .num.n6{background-position: -155px 0}
#middle .section.content .swiper-container .cont .p_l_cont .per .num.n7{background-position: -187px 0}
#middle .section.content .swiper-container .cont .p_l_cont .per .num.n8{background-position: -218px  0}
#middle .section.content .swiper-container .cont .p_l_cont .per .num.n9{background-position: -250px 0}
#middle .section.content .swiper-container .cont .p_r_cont .per .num{display: inline-block;width:20px;height:43px;background: url(https://ssl.nexon.com/s2/game/fo4/event/2019/190801_and_d84rhyu4/s_r.png) 0 0 no-repeat; }
#middle .section.content .swiper-container .cont .p_r_cont .per .num.d{background: url(https://ssl.nexon.com/s2/game/fo4/event/2019/190801_and_d84rhyu4/d_r.png) 0 0 no-repeat;width: 33px;}
#middle .section.content .swiper-container .cont .p_r_cont .per .num.n0{background-position: -281px 0}
#middle .section.content .swiper-container .cont .p_r_cont .per .num.n1{background-position: 2px 0}
#middle .section.content .swiper-container .cont .p_r_cont .per .num.n2{background-position: -29px 0}
#middle .section.content .swiper-container .cont .p_r_cont .per .num.n3{background-position: -61px 0}
#middle .section.content .swiper-container .cont .p_r_cont .per .num.n4{background-position: -92px 0}
#middle .section.content .swiper-container .cont .p_r_cont .per .num.n5{background-position: -124px 0}
#middle .section.content .swiper-container .cont .p_r_cont .per .num.n6{background-position: -155px 0}
#middle .section.content .swiper-container .cont .p_r_cont .per .num.n7{background-position: -187px 0}
#middle .section.content .swiper-container .cont .p_r_cont .per .num.n8{background-position: -218px  0}
#middle .section.content .swiper-container .cont .p_r_cont .per .num.n9{background-position: -250px 0}



#footer { position:relative; width:100%; min-width:1600px; text-align:center; background-color:#000000; z-index: 100;}
#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{position: fixed;top:0;left:0;width: 100%;height: 100%;z-index: 1000;background: rgba(0,0,0,0.5);display: none;}
.layer .layer_content{position: absolute;top:50%;left:50%;}
.layer .layer_content .btn_close{position: absolute;top: 0;right: 0;width: 68px;height: 68px;background:url("https://ssl.nexon.com/s2/game/fo4/common/transparent.png") left top repeat;}

#layerItem{overflow-y: auto;}
#layerItem .layer_content{;width:548px;height:629px;position: absolute;top:100px;margin-left:-274px;padding-bottom:100px;}
#layerItem .layer_content .content{box-sizing: border-box;width: 100%;}
#layerItem .layer_content .content .btn_confirm{position: absolute;top: 430px;left: 219px;width: 210px;height: 70px;background:url("https://ssl.nexon.com/s2/game/fo4/common/transparent.png") left top repeat;}
#layerItem .layer_content .content .thumb{position: absolute;top:110px;left:0;width:100%;z-index: 10;}
#layerItem .layer_content .content .thumb .img{width:300px;margin:0 auto;overflow: hidden;text-align: center}
#layerItem .layer_content .content .thumb .img img{width:250px;}
#layerItem .layer_content .content .thumb .desc{font-size: 30px;color: #404961;line-height: 1.3;margin-bottom:40px;text-align: center;padding-top: 20px;font-weight: 600}

#layerConfirm{overflow-y: auto;}
#layerConfirm .layer_content{;width:644px;height:629px;position: absolute;top:100px;margin-left:-322px;padding-bottom:100px;}
#layerConfirm .layer_content .content{box-sizing: border-box;width: 100%;}
#layerConfirm .layer_content .content .btn_confirm{position: absolute;top: 327px;left: 325px;width: 210px;height: 70px;background:url("https://ssl.nexon.com/s2/game/fo4/common/transparent.png") left top repeat;}
#layerConfirm .layer_content .content .btn_cancel{position: absolute;top: 327px;left: 110px;width: 210px;height: 70px;background:url("https://ssl.nexon.com/s2/game/fo4/common/transparent.png") left top repeat;}
#layerConfirm .layer_content .content .message{position: absolute;top:150px;left:0;width:100%;z-index: 10;font-size: 30px;color: #0f002d;text-align: center}
#layerConfirm .layer_content .content .message strong{font-size: 30px;color: #0f002d;line-height: 1.3;margin-bottom:10px;text-align: center;font-weight: 600}

#layerAlert{overflow-y: auto;}
#layerAlert .layer_content{;width:768px;height:875px;position: absolute;top:50px;margin-left:-424px;padding-bottom:100px;}
#layerAlert .layer_content .content{box-sizing: border-box;width: 100%;}
#layerAlert .layer_content .btn_close{position: absolute;top: 105px;right: 0;width: 68px;height: 68px;background:url("https://ssl.nexon.com/s2/game/fo4/common/transparent.png") left top repeat;}