@charset "utf-8";

html,body { width:100%; min-width:358px; background-color:#fff; }
input:focus, textarea:focus, select:focus, option:focus, button:focus { outline:none !important; }
#wrapper { position:relative; overflow:hidden; width:100%; min-width:358px; max-width:1000px; margin:0 auto; line-height:0; }
#loader { z-index:1024; position:fixed; left:0; top:0; width:100%; height:100%; background-color:#000000; }
#middle { overflow:hidden; width:100%;}
#middle .event{width: 100%;position: relative;;}
#middle .event1{background:url(https://ssl.nexon.com/s2/game/fo4/event/2020/201203_winter_x87fdeijh45/mobile/bg1.jpg) center top no-repeat;background-size: 1000px auto;text-align: center;padding:40px 0;}
#middle .event1 .inner{position: relative;width: 319.5px;margin:0 auto;}
#middle .event1 img{width: 319.5px;}
#middle .event1 .btn_advice{position: absolute;top:263px;left:41px;width: 78px;height: 30px;background-color: transparent;;}
#middle .event1 .btn_pc{position: absolute;top:263px;left:119px;width: 158px;height: 30px;background-color: transparent;;}
#middle .event1 #quick{}
#middle .event1 #quick .quick{position: absolute;width: 100px;height: 100px;background-color: transparent;;}
#middle .event1 .btn_quick1{top:323px;left:0;}
#middle .event1 .btn_quick2{top:323px;left:109px;}
#middle .event1 .btn_quick3{top:323px;left:219px;}
#middle .event1 .btn_quick4{top:433px;left:0;}
#middle .event1 .btn_quick5{top:433px;left:109px;}
#middle .event1 .btn_quick6{top:433px;left:219px;}

#middle .event2{background:url(https://ssl.nexon.com/s2/game/fo4/event/2020/201203_winter_x87fdeijh45/mobile/bg2.jpg) center top no-repeat;background-size: 1000px auto;text-align: center;padding:40px 0 23px;}
#middle .event2 .inner{position: relative;width: 320px;margin:0 auto;}
#middle .event2 .lv{position: relative;}
#middle .event2 .lv1{margin-bottom: 22px;;}
#middle .event2 .lv1 img{width: 271.5px;}
#middle .event2 .lv2{margin-bottom: 20px;;}
#middle .event2 .lv2 img{width: 320px;}
#middle .event2 .lv3{margin-bottom: 20px;;}
#middle .event2 .lv3 img{width: 320px;}
#middle .event2 .lv4{margin-bottom: 20px;;}
#middle .event2 .lv4 img{width: 320px;}
#middle .event2 .btn_pre{position: absolute;left:0;top:0;width: 100%;height: 50px;background: url(https://ssl.nexon.com/s2/game/fo4/event/2020/201203_winter_x87fdeijh45/mobile/btn_pre.png) 0 0 no-repeat;background-size: 100% auto;}
#middle .event2 .btn_official{position: absolute;left:0;top:0;width: 100%;height: 50px;background: url(https://ssl.nexon.com/s2/game/fo4/event/2020/201203_winter_x87fdeijh45/mobile/btn_off.png) 0 0 no-repeat;background-size: 100% auto;}
#middle .event2 .btn_mobile{position: absolute;left:0;top:0;width: 100%;height: 50px;background: url(https://ssl.nexon.com/s2/game/fo4/event/2020/201203_winter_x87fdeijh45/mobile/btn_mob.png) 0 0 no-repeat;background-size: 100% auto;}

#middle .event2 .disable.btn_pre{background-image: url(https://ssl.nexon.com/s2/game/fo4/event/2020/201203_winter_x87fdeijh45/mobile/btn_pre_disable.png);}
#middle .event2 .disable.btn_official{background-image: url(https://ssl.nexon.com/s2/game/fo4/event/2020/201203_winter_x87fdeijh45/mobile/btn_off_disable.png);}
#middle .event2 .disable.btn_mobile{background-image: url(https://ssl.nexon.com/s2/game/fo4/event/2020/201203_winter_x87fdeijh45/mobile/btn_mob_disable.png);}

#middle .event2 .done.btn_pre{background-image: url(https://ssl.nexon.com/s2/game/fo4/event/2020/201203_winter_x87fdeijh45/mobile/btn_done.png);}
#middle .event2 .done.btn_official{background-image: url(https://ssl.nexon.com/s2/game/fo4/event/2020/201203_winter_x87fdeijh45/mobile/btn_done.png);}
#middle .event2 .done.btn_mobile{background-image: url(https://ssl.nexon.com/s2/game/fo4/event/2020/201203_winter_x87fdeijh45/mobile/btn_done.png);}

#middle .event2 .end.btn_pre{background-image: url(https://ssl.nexon.com/s2/game/fo4/event/2020/201203_winter_x87fdeijh45/mobile/btn_end.png);}
#middle .event2 .end.btn_official{background-image: url(https://ssl.nexon.com/s2/game/fo4/event/2020/201203_winter_x87fdeijh45/mobile/btn_end.png);}
#middle .event2 .end.btn_mobile{background-image: url(https://ssl.nexon.com/s2/game/fo4/event/2020/201203_winter_x87fdeijh45/mobile/btn_end.png);}

#middle .event2 .btn_googleplay{position: absolute;top:319px;left:161px;width: 118px;height: 30px;background-color: transparent;;}
#middle .event2 .btn_appstore{position: absolute;top:319px;left:41px;width: 118px;height: 30px;background-color: transparent;;}

#middle .event3{background:url(https://ssl.nexon.com/s2/game/fo4/event/2020/201203_winter_x87fdeijh45/mobile/bg3.jpg) center top no-repeat;background-size: 1000px auto;text-align: center;padding:30px 0 23px;}
#middle .event3 .inner{position: relative;width: 320px;margin:0 auto;}
#middle .event3 .lv{position: relative;}
#middle .event3 .lv1{margin-bottom: 22px;;}
#middle .event3 .lv1 img{width: 271.5px;}
#middle .event3 .lv2{margin-bottom: 20px;;}
#middle .event3 .lv2 img{width: 320px;}
#middle .event3 .lv3{margin-bottom: 20px;;}
#middle .event3 .lv3 img{width: 320px;}
#middle .event3 .lv4{margin-bottom: 20px;;}
#middle .event3 .lv4 img{width: 320px;}


#middle .event4{background:url(https://ssl.nexon.com/s2/game/fo4/event/2020/201203_winter_x87fdeijh45/mobile/bg4.jpg) center top no-repeat;background-size: 1000px auto;text-align: center;padding:30px 0 23px;}
#middle .event4 .inner{position: relative;width: 325px;margin:0 auto;}
#middle .event4 .inner img{width: 325px;}

#middle .event5{background:url(https://ssl.nexon.com/s2/game/fo4/event/2020/201203_winter_x87fdeijh45/mobile/bg5.jpg) center top no-repeat;background-size: 1000px auto;text-align: center;padding:30px 0 23px;}
#middle .event5 .inner{position: relative;width: 356.5px;margin:0 auto;}
#middle .event5 .inner img{width: 356.5px;;}
#middle .event5 .inner .btn_link1{position: absolute;left:0;top:101px;width: 100%;height: 51px;background-color: transparent;;}
#middle .event5 .inner .btn_pc{position: absolute;left:0;top:389px;width: 100%;height: 50px;background-color: transparent;;}


/* #middle .inner { position:relative; } */
/* #middle .inner .btn_advice { z-index:4; position:absolute; right:2%; top:54%; width:24.167%; height:9%; background:url("https://ssl.nexon.com/s2/game/fo4/common/transparent.png") left top repeat; } */
/* #middle .inner .btn_event { z-index:4; position:absolute; left:0; top:74%; width:100%; height:18%; background:url("https://ssl.nexon.com/s2/game/fo4/common/transparent.png") left top repeat; } */

#footer { line-height:0; color:#666666; background-color:#c0c4ce; }
#footer .inner { overflow:hidden; padding:32px 8px; }
#footer .inner .logo { width:270px; height:50px; margin:0 auto 16px auto; text-indent:-9999px; background:url("https://ssl.nexon.com/s2/game/fo4/shop/sprite_logo.png") no-repeat; background-position:-300px 0; }
#footer .inner .nav { margin-bottom:8px; text-align:center; }
#footer .inner .nav ul { overflow:hidden; display:inline-block; }
#footer .inner .nav ul li { position:relative; display:inline-block; padding:0 8px; }
#footer .inner .nav ul li a { font-size:14px; line-height:14px; color:#444444; }
#footer .inner .nav ul li a:hover { text-decoration:underline; }
#footer .inner .nav ul li:after { display:inline-block; content:""; position:absolute; left:-1px; top:2px; width:1px; height:10px; background-color:#989898; }
#footer .inner .nav ul li:first-child:after { display:none; }
#footer .inner .nav ul li:nth-child(2) a { text-decoration:underline; }
#footer .inner .nx-copyright { margin-bottom:16px; font-size:14px; line-height:14px; color:#444444; letter-spacing:0; text-align:center; }
#footer .inner .copyright { font-size:12px; line-height:12px; color:#888c98; letter-spacing:0; text-align:center; text-decoration:underline; }

.register_layer_popup { overflow-y:auto; z-index:128; position:fixed; left:0; top:0; display:none; width:100%; height:100%; background-color:rgba(0,0,0,0.8); }
.register_layer_popup .content { z-index:132; position:absolute; left:50%; top:50%; box-sizing:border-box; width:90%; max-width:576px; min-width:256px; box-shadow:0 0 32px rgba(0,0,0,0.8); -ms-transform:translateX(-50%) translateY(-50%); transform:translateX(-50%) translateY(-50%); background-color:#ffffff; }
.pre.registration.register_layer_popup .content,
.official.registration.register_layer_popup .content,
.terms.register_layer_popup .content,
.official_complete.register_layer_popup .content { top:64px; margin-bottom:64px; -ms-transform:translateX(-50%) translateY(0%); transform:translateX(-50%) translateY(0%); }
.loading.register_layer_popup .content { box-shadow:none !important;  background:transparent !important; }
.loading.register_layer_popup .content ul { width:96px; height:16px; margin:0 auto 16px auto; }
.loading.register_layer_popup .content ul li { float:left; width:16px; height:16px; margin:0 4px; box-shadow:0 0 16px rgba(0,0,0,1); background-color:#ffffff; }
.loading.register_layer_popup .content p:nth-child(2) { margin-bottom:8px; font-size:32px; line-height:32px; font-weight:bold; color:#ffffff; text-align:center; text-shadow:0 0 32px rgba(0,0,0,1); }
.loading.register_layer_popup .content p:nth-child(3) { font-size:16px; line-height:16px; color:#ffffff; text-align:center; text-shadow:0 0 32px rgba(0,0,0,1); }
.register_layer_popup .content .btn_close { z-index:16; position:absolute; right:0; top:0; width:48px; height:48px; 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; background-size:48px 48px; }
.register_layer_popup .content .title { height:48px; padding-right:48px; font-weight:500; font-size:16px; line-height:48px; color:#000000; text-align:center; box-shadow:inset 0 -1px 0 rgba(220,220,220,1); background-color:#ffffff; }
.register_layer_popup .content .message { padding:16px; font-size:14px; line-height:22px; color:#000000; text-align:center; box-shadow:0 8px 8px rgba(0,0,0,0.1); }
.register_layer_popup .content .message strong { font-size:14px; line-height:22px; color:#ff6410; }
.register_layer_popup .content .item_wrap { position:relative; padding:28px 16px; font-size:0; line-height:0; text-align:center; }
.register_layer_popup .content .item { position:relative; display:inline-block; margin:4px; vertical-align:top; }
.register_layer_popup .content .item .image { position:relative; display:inline-block; width:64px; height:64px; padding:8px; font-size:0; line-height:0; background-color:#e0e4ea; }
.register_layer_popup .content .item .image .tag { z-index:4; position:absolute; left:-8px; top:-8px; width:28px; height:28px; font-size:12px; line-height:28px; color:#ffffff; text-align:center; border-radius:32px; background-color:#08de68; }
.register_layer_popup .content .item .image img { width:64px; height:64px; }
.register_layer_popup .content .item .text { display:block; width:80px; margin-top:8px; font-size:12px; line-height:16px; color:#203048; text-align:center; }
.register_layer_popup .content .item .text strong { font-weight:bold; font-size:12px; line-height:16px; color:#ff6410; }
.register_layer_popup .content .advice { padding:16px; background-color:#eaeaea; }
.register_layer_popup .content .advice .text { padding-left:30px; font-size:12px; line-height:20px; color:#949494; background:url("https://ssl.nexon.com/s2/game/fo4/event/2020/200402_layer_common_/ico_i.png") left center no-repeat; }
.register_layer_popup .content .advice .text strong { font-size:12px; line-height:20px; color:#ff6410; }
.register_layer_popup .content .terms,
.register_layer_popup .content .input { position:relative; padding:8px 16px; font-size:0; line-height:0; border-bottom:1px solid #dcdcdc; }
.register_layer_popup .content .input._02 { border-bottom:none; }
.register_layer_popup .content .terms > p { margin-bottom:4px; }
.register_layer_popup .content .terms > p:last-child { margin-bottom:0; }
.register_layer_popup .content .terms > p input { display:none; }
.register_layer_popup .content .terms > p label { position:relative; box-sizing:border-box; display:block; float:left; width:75%; padding:0 8px 0 20px; font-size:12px; line-height:20px; color:#000000; cursor:pointer; }
.register_layer_popup .content .terms > p label.active { color:#08de68; }
.register_layer_popup .content .terms > p label::before { content:""; z-index:4; position:absolute; left:0; top:2px; display:inline-block; width:14px; height:14px; border:1px solid #000000; }
.register_layer_popup .content .terms > p label.active::before { width:12px; height:12px; border:2px solid #08de68; }
.register_layer_popup .content .terms > p label.active::after { content:""; z-index:4; position:absolute; left:4px; top:6px; display:inline-block; width:8px; height:8px; background-color:#08de68; }
.register_layer_popup .content .terms > p button { display:block; float:left; width:25%; padding:4px 0; font-size:12px; line-height:12px; color:#ffffff; text-align:center; background-color:#08de68; }
.register_layer_popup .content .input input { padding:8px; box-sizing:border-box; font-size:14px; line-height:14px; color:#000000; border:1px solid #dcdcdc; }
.register_layer_popup .content .input input::placeholder { font-size:14px; line-height:14px; color:#b4b4b4; }
.register_layer_popup .content .input._01 input:nth-child(1) { width:25%; text-align:center; border-right:none; }
.register_layer_popup .content .input._01 input:nth-child(2) { width:75%; }
.register_layer_popup .content .input._02 input:nth-child(1) { width:100%; padding-right:44px; }
.register_layer_popup .content .input button { display:block; width:100%; margin-top:4px; padding:12px 0; font-size:14px; line-height:14px; color:#dcdcdc; text-align:center; cursor:default; background-color:#b4b4b4; }
.register_layer_popup .content .input button.active { color:#ffffff; cursor:pointer; background-color:#08de68; }
.register_layer_popup .content .input #timer { z-index:8; position:absolute; right:20px; top:8px; width:40px; padding:12px 0 10px 0; }
.register_layer_popup .content .input #timer strong { display:block; font-size:16px; line-height:16px; color:#d00a4c; text-align:center; }
.register_layer_popup .content .complete.message { z-index:8; position:absolute; left:0; top:48px; box-sizing:border-box; width:100%; height:254px; padding:100px 16px 102px 16px; box-shadow:none; background-color:#eaeaea; }
.register_layer_popup .content .complete.message strong { margin-bottom:8px; font-size:24px; }
.register_layer_popup .content .button { overflow:hidden; }
.register_layer_popup .content .button button { font-size:16px; line-height:48px; color:#ffffff; text-align:center; }
.register_layer_popup .content .button .btn_confirm { width:100%; background-color:#08de68; }
.register_layer_popup .content .button .btn_confirm.half { float:left; width:50%; background-color:#000000; }
.register_layer_popup .content .button .btn_next { width:100%; background-color:#08de68; }
.register_layer_popup .content .button .btn_next.half { float:left; width:50%; background-color:#08de68; }
.register_layer_popup .content .document { padding:16px; line-height:16px; }
.register_layer_popup .content .document p { font-size:12px; line-height:16px; color:#000000; }
.register_layer_popup .content .document table { table-layout:fixed; width:100%; border-left:1px solid #dcdcdc; border-top:1px solid #dcdcdc; }
.register_layer_popup .content .document table tr th,
.register_layer_popup .content .document table tr td { padding:8px; font-size:12px; line-height:16px; color:#000000; border-bottom:1px solid #dcdcdc; border-right:1px solid #dcdcdc; text-align:center; vertical-align:middle; }
.register_layer_popup .content .document .bold { font-weight:bold; font-size:14px; line-height:16px; vertical-align:top; }

.register_layer_popup .content .button { overflow:hidden; }
.register_layer_popup .content .button button { font-size:16px; line-height:48px; color:#ffffff; text-align:center; }
.register_layer_popup .content .button .btn_cancel { float:left; width:50%; background-color:#000000; }
.register_layer_popup .content .button .btn_cancel.half { float:left; width:50%; background-color:#000000; }
.register_layer_popup .content .button .btn_next { width:100%; background-color:#08de68; }
.register_layer_popup .content .button .btn_next.half { float:left; width:50%; background-color:#08de68; }
.register_layer_popup .content .button .btn_confirm { width:100%; background-color:#08de68; }
.register_layer_popup .content .button .btn_confirm.half { float:left; width:50%; background-color:#000000; }
.register_layer_popup .content .button .btn_cancel + .btn_confirm.half { float:left; width:50%; background-color:#08de68; }
.register_layer_popup .content .button .btn_exchange { width:100%; background-color:#08de68; }
.register_layer_popup .content .button .btn_exchange.half { float:left; width:50%; background-color:#000000; }
.register_layer_popup .content .button .btn_cancel + .btn_exchange.half { float:left; width:50%; background-color:#08de68; }


#layerComplete .content .item .message { box-shadow:0 0 10px rgba(0,0,0,0.2);padding-top:32px;padding-bottom:32px; font-size:14px; line-height:16px; color:#818080; text-align:center; position: relative;z-index: 9;}
#layerComplete .content .item .message strong{ font-size:14px; line-height:16px; color:#08de68; }

#layerComplete .content .item{margin:10px 0;display: block;;}
#layerComplete .content .item .table { box-sizing: border-box;text-align:center; }
#layerComplete .content .item .table .text { margin:0 auto; }
#layerComplete .content .item .table .item_wrap{overflow: hidden;}
#layerComplete .content .item .table .item_wrap .cont_text{line-height: 24px;font-size: 12px;;}
#layerComplete .content .item .table .tag{position: absolute;top: -9.5px;left: -9.5px;width: 25px;height: 25px;line-height: 25px;color: #fff;border-radius: 25px;overflow:hidden;}
#layerComplete .content .item .table .tag span{font-size: 10px;color: #fff;;}
#layerComplete .content .item .table .tag.blue{background-color: #12daeb;}
#layerComplete .content .item .table .tag.green{background-color: #08de68;}

#layerComplete .content .item .table{width: 100%;overflow: hidden;}
#layerComplete .content .item .table .item_wrap{width: 100px;box-sizing: border-box;position: relative;display: inline-block;padding:10px 0;}
#layerComplete .content .item .table .image { display:inline-block;position: relative; width:60px; height:60px; background-color:#e0e4ea; }
#layerComplete .content .item .table .image img { width:60px; height:60px; margin:2.5px;}
#layerComplete .content .item .table .text { box-sizing:border-box; margin-top:10px;font-size:11px; line-height:18px; color:#203048; text-align:center;box-sizing: border-box;width: 100%;}


#layerComplete .content .item .table.box4 .item_wrap { display: inline-block;vertical-align: top;width:140px; }
#layerComplete .content .item .table.box4 .image { display:inline-block; width:72px; height:72px; background-color:#e0e4ea; }
#layerComplete .content .item .table.box4 .image img { width:60px; height:60px; margin:6px;}
#layerComplete .content .item .table.box4 .text { box-sizing:border-box; width:140px; padding:8px 16px 0 16px; font-size:13px; line-height:18px; color:#203048; text-align:center; }