body,html{min-width:360px !important}
.ezguide{position:relative;padding-top:50px;width:100%;background:url('https://bbscdn.df.nexon.com/pg/ezguide/img/bgmain.jpg') no-repeat 50% 50px;overflow:hidden;min-width:360px !important}
.ezguide h1{position:relative;margin-top:165px;width:100%;height:168px;background:url('https://bbscdn.df.nexon.com/pg/ezguide/img/h1.png') no-repeat 50% 0}
.ezguide h2{position:relative;margin-top:44px;width:100%;height:58px;background:url('https://bbscdn.df.nexon.com/pg/ezguide/img/h2.png') no-repeat 50% 0}
.ezguide h3{position:relative;margin-top:83px;width:100%;height:53px;background:url('https://bbscdn.df.nexon.com/pg/ezguide/img/h3.png') no-repeat 50% 0}
.ezguide h1,
.ezguide h2,
.ezguide h3{opacity:0;transform:translateY(-20px);transition:opacity 0.5s ease-out, transform 0.5s ease-out;text-indent:-9999px;font-size:0;}
.ezguide.animate h1,
.ezguide.animate h2,
.ezguide.animate h3{opacity:1;transform:translateY(0);transition-delay:.6s;}
.ezguide.animate h2{transition-delay:.7s;}
.ezguide.animate h3{transition-delay:.8s}
.ezguide .tooltip{opacity:0;transition:opacity 2s 1.5s;transform:translateZ(0);will-change:opacity;position:absolute;margin-left:-540px;left:50%;top:644px;width:217px;height:65px;background:url('https://bbscdn.df.nexon.com/pg/ezguide/img/tooltip.png') no-repeat;z-index:20;text-indent:-9999px;font-size:0;}
.ezguide .tooltip.animate{opacity:1;}

.ezguide .linebox{position:relative;width:100%;height:160px;background-image:url('https://bbscdn.df.nexon.com/pg/ezguide/img/image.png') no-repeat 50% 1px;background-size:cover;overflow:hidden;}
.ezguide .linebox .line{animation:lineani .7s ease-in-out forwards;position:absolute;top:0;left:0;margin:0;width:100%;height:100%;background:url('https://bbscdn.df.nexon.com/pg/ezguide/img/line.png') no-repeat 50%;mask-image:linear-gradient(to right, black 100%, transparent 100%);mask-size:0% 100%;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to right, black 100%, transparent 100%);-webkit-mask-size:0% 100%;-webkit-mask-repeat:no-repeat;}
.ezguide .linebox .point{opacity:0;animation:pointicon 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;transition:.5s ease;transform:translate(-50%, 0) scale(0);position:absolute;left:50%;width:55px;height:55px;background:url('https://bbscdn.df.nexon.com/pg/ezguide/img/point.png') no-repeat;background-size:contain;z-index:10;}
.ezguide .linebox .point1{top:95px;margin-left:-431px;animation-delay:.5s; }
.ezguide .linebox .point2{top:55px;margin-left:1px;animation-delay:.6s; }
.ezguide .linebox .point3{top:11px;margin-left:432px;animation-delay:.7s; }
.ezguide .linebox .point.active{opacity:1;background:url('https://bbscdn.df.nexon.com/pg/ezguide/img/point_on.png') no-repeat}
@keyframes lineani{to{mask-size:100% 100%;-webkit-mask-size:100% 100%;}}
@keyframes pointicon{to{opacity:1;transform:translate(-50%, 0) scale(1)}}
.ezguide .stepbox{position:relative;width:100%;height:500px;}
.ezguide .stepbox a{display:block;position:absolute;left:50%;width:474px;height:619px;cursor:pointer;;text-indent:-9999px;font-size:0;}
.ezguide .stepbox a.step1{top:-25px;margin-left:-669px;background:url('https://bbscdn.df.nexon.com/pg/ezguide/img/step1.png') no-repeat;}
.ezguide .stepbox a.step2{top:-51px;margin-left:-237px;background:url('https://bbscdn.df.nexon.com/pg/ezguide/img/step2.png') no-repeat;}
.ezguide .stepbox a.step3{top:-78px;margin-left:195px;background:url('https://bbscdn.df.nexon.com/pg/ezguide/img/step3.png') no-repeat;}
.ezguide .stepbox a::after{opacity:0;transition:opacity .3s;transform:translateZ(0); will-change:opacity;content:'';position:absolute;left:0;top:0;width:474px;height:619px}
.ezguide .stepbox a.step1::after{background:url('https://bbscdn.df.nexon.com/pg/ezguide/img/step1_on.png') no-repeat;}
.ezguide .stepbox a.step2::after{background:url('https://bbscdn.df.nexon.com/pg/ezguide/img/step2_on.png') no-repeat;}
.ezguide .stepbox a.step3::after{background:url('https://bbscdn.df.nexon.com/pg/ezguide/img/step3_on.png') no-repeat;}
.ezguide .stepbox a:hover::after{opacity:1}
.ezguide .stepbox a{opacity:0;transform:translateY(20px);transition:opacity 1s ease-out, transform 0.5s ease-out;}
.ezguide .stepbox.animate a{opacity:1;transform:translateY(0);}
.ezguide .stepbox.animate a.step1{transition-delay:1.1s;}
.ezguide .stepbox.animate a.step2{transition-delay:1.2s;}
.ezguide .stepbox.animate a.step3{transition-delay:1.3s}
.ezguide .copyright{position:relative;width:100%;height:200px;background:url('https://bbscdn.df.nexon.com/pg/ezguide/img/copy.png') no-repeat 50% 100px;text-indent:-9999px;font-size:0;}

/* 가이드 상세 */
.ezguide_more{position:relative;margin-top:50px;background:url('https://bbscdn.df.nexon.com/pg/ezguide/img/bgbody.png') no-repeat 50% 50%;background-attachment:fixed;font-family:'SUIT';}
.ezguide_more header{position:relative;margin:0 auto;padding:77px 0 0 0;max-width:1680px;}
.ezguide_more header .svisual{position:relative;margin-bottom:20px;width:100%;height:273px;background:url('https://bbscdn.df.nexon.com/pg/ezguide/img/svisual.png') no-repeat 50%;}
.ezguide_more header a{display:flex;align-items:center;justify-content:center;position:absolute;left:30px;top:20px;width:178px;height:46px;border-radius:10px;border:2px solid #d9d9d9;color:#d9d9d9;font-size:16px;font-weight:500;letter-spacing:-.8px;font-family:"DNFForgedBlade";}
.ezguide_more header a::before{content:'';margin-right:8px;color:#fff;width:9px;height:15px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14'%3E%3Cpath d='M7.41422 0.707092L1.41422 6.70709L7.41422 12.7071' stroke='%23d9d9d9' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat;background-size:9px 15px;}
.ezcontent{position:relative;margin:25px auto 0 auto;max-width:1680px}
.ezguide_more h1{position:relative;color:#D6BA90;font-size:52px;text-align:center;font-weight:700;letter-spacing:-2.6px;font-family:"DNFForgedBlade";line-height:120%;}
.ezguide_more h2{position:relative;margin-top:10px;color:#fff;font-size:24px;text-align:center;font-weight:300;letter-spacing:-1.2px;font-family:"DNFForgedBlade";line-height:140%;}
.ezguide_more h3{display:flex;align-items:center;justify-content:center;position:relative;margin-top:100px;color:#fff;font-size:44px;font-weight:700;letter-spacing: -2.2px;font-family: "DNF Forged Blade";text-align:center;}
.ezguide_more .br{display:none;}
.guide_basic,
.guide_bonus{display:flex;flex-wrap:wrap;justify-content:center;}
.guide_bonus{margin-top:25px;}
.guide_list{display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;margin:15px;padding:0 30px;;width:390px;height:260px;background:#3c3d3f;;border-radius:24px;box-shadow: 0 15px 40px 0 rgba(0, 0, 0, 0.30);color:#bebebe;font-size:18px;font-weight:400;line-height: 140%;text-align:center;cursor:pointer;}
.guide_list::before{opacity:0;transition:opacity .5s ease;content:'';position:absolute;left:0;top:0;width:390px;height:260px;border-radius:24px;border:8px solid #6D7073;}
.guide_list:hover::before{opacity:1}
.guide_list li{word-break:break-all;color:#bebebe;font-size:18px;font-weight:400;line-height:140%;}
.guide_list li.mtitle{padding:10px 0;color:#fff;font-size:30px;font-weight:300;line-height:110%;letter-spacing:-1.5px;font-family:"DNFForgedBlade";}
.guide_list li.category{display:flex;align-items:center;justify-content:center;padding:0 14px;margin-bottom:10px;width:fit-content;height:31px;border:2px solid #77787b;border-radius:10px;text-align:center;color:rgba(255,255,255,.7);font-size:16px;font-weight:500;}
.guide_bonus .guide_list{background:#254D88}
.guide_bonus .guide_list li.category{border-color:#6182B4}
.guide_bonus .guide_list::before{border-color:#5B8DD7}
.copyright{padding:100px 0 50px 0;text-align:center;font-size:12px;color:#666;}

/* 레이어 */
.lypop{display:none;position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:900;}
.lypop *{font-family:'SUIT';}
.lypop .lypop_content{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:0 0 30px 0;min-width:375px;width:930px;max-height:900px;border-radius:20px;background:#3C3D3F;color:#000;overflow:hidden;}
.lypop .detail_tit{position:relative;padding:0}
.lypop .detail_tit h1{display:flex;align-items:center;justify-content:center;position:relative;padding:28px 0;width:100%;color:#fff;font-size:28px;font-weight:300;text-align:center;line-height:110%;letter-spacing:-1.4px;font-family:'DNFForgedBlade';}
.lypop .lyclse{display:block;position:absolute;right:26px;top:50%;transform:translateY(-50%);width:22px;height:22px;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M0.707153 20.707L20.7072 0.707031M20.7072 20.707L0.707153 0.707031' stroke='white' stroke-width='2'/%3E%3C/svg%3E") no-repeat;}
.lypop #modalDetail{position:relative;padding:0 12px 0 20px;max-height:800px;width:100%;overflow-y:auto;scrollbar-gutter: stable;}
.lypop .detail{position:relative;padding:30px 30px 60px 30px;margin:0 0 20px 0;border-radius:10px;background:#262728;}
.lypop .detail li{color:#c5c5c5;font-size:18px;line-height:150%}
.lypop .detail li b{color:700;color:#C4DFFF}
.lypop .detail li:first-child{display:flex;align-items:center;position:relative;margin-bottom:25px;padding-bottom:25px;border-bottom:1px solid #454545;}
.lypop .detail li.imgfit{display:flex;align-items:center;flex-direction:column;}
.lypop .detail li a{display:flex;align-items:center;justify-content:center;margin-left:auto;padding:0 30px;height:55px;border-radius:5px;background:#404a56;color:#fff;font-size:18px;font-weight:300;letter-spacing:-.9px;font-family:'DNFForgedBlade'}
.lypop .detail li p b{display:block;color:#fff;font-size:26px;font-weight:300;line-height:110%;font-family:'DNFForgedBlade';letter-spacing:-1.3px;}
.lypop .detail li p span{display:block;margin-top:6px;font-size:16px;color:#adadad}
.lypop .faq{position:relative;}
.lypop .faq ul{padding:30px 30px 60px 30px;margin-bottom:20px;border-radius:10px;background:#4D4E50}
.lypop .faq ul li.faq_q{position:relative;margin-bottom:25px;padding-bottom:25px;border-bottom:1px solid #828282;color:#FFF;font-size:26px;font-weight:300;line-height:110%;letter-spacing:-1.3px;font-family:'DNFForgedBlade';}
.lypop .faq ul li.faq_a{color:#C5C5C5;font-size:18px;font-weight:400;line-height:150%;}
.lypop .faq ul li.faq_a b{color:700;color:#C4DFFF}
.no_scroll{overflow:hidden}
.lypop #modalDetail::-webkit-scrollbar{width:8px;}
.lypop #modalDetail::-webkit-scrollbar-thumb{height:40px;background-color:rgba(0,0,0,.5);border-radius:999px;border-left:2px solid transparent;border-right:2px solid transparent;background-clip:padding-box}

/* 반응형 Tablet */
@media(max-width:1023px){
    .login_bar{display:none;}
    .ezguide_more{margin-top:0;}
    .ezguide_more h1{font-size:34px;letter-spacing:-1.7px;}
    .ezguide_more h2{font-size:20px;letter-spacing:-1px;}
    .ezguide_more h3{font-size:30px;letter-spacing:-1.5px;}
    .guide_list{width:335px;height:200px;}
    .guide_list li{font-size:16px;}
    .guide_list::before{width:335px;height:200px;}
    .guide_list li.mtitle{font-size:22px;letter-spacing: -1.1px;}
    .copyright{font-size:10px;}
    .lypop .lypop_content{width:768px;}
    .lypop .detail_tit h1{letter-spacing:-1.1px;}
    .lypop .detail li p b{letter-spacing:-1px;}
}
/* 반응형 Mobile  */
@media(max-width:767px){
    .login_bar{display:none;}
    .ezguide_more{margin-top:0;}
    .ezguide_more h1{padding:0 20px;font-size:34px;letter-spacing:-1.7px;}
    .ezguide_more h2{padding:0 20px;font-size:20px;letter-spacing:-1px;}
    .ezguide_more h3{flex-direction:column;font-size:30px;letter-spacing: -1.5px;}
    .guide_list{width:335px;height:200px;}
    .guide_list li{font-size:16px;}
    .guide_list::before{width:335px;height:200px;}
    .guide_list li.mtitle{font-size:22px;letter-spacing: -1.1px;}
    .ezguide_more .br{display:block}
    .copyright{font-size:10px;}
    .lypop .lypop{max-height:100%}
    .lypop .lypop_content{left:0;top:0;transform:initial;margin:0;padding:0;;width:100%;height:100%;min-width:initial;max-height:initial;border-radius:0;}
    .lypop #modalDetail{position:relative;height:calc(100% - 80px);width:100%;overflow-y:auto;scrollbar-gutter:stable;}
    .lypop .detail_tit h1{font-size:22px;line-height: 110%;letter-spacing: -1.1px;}
    .lypop .detail li{flex-direction:column;align-items:start;font-size:16px;}
    .lypop .detail li:first-child{align-items:start}
    .lypop .detail li p b{font-size:20px;font-weight:300;line-height:110%;font-family:'DNFForgedBlade';letter-spacing:-1px;}
    .lypop .detail li p span{display:block;margin-top:6px;font-size:16px;color:#adadad;}
    .lypop .detail li a{margin:24px 0 0 0;}
    .lypop .detail li.imgfit{display:block;}
    .lypop .detail li.imgfit img{width:100%;}
    .lypop .faq ul li.faq_q{font-size:20px;letter-spacing:-1px}
    .lypop .faq ul li.faq_a{font-size:16px}
}