@charset "utf-8";

/* layout */
#wrap .content{position:relative;width:100%}
#wrap .bg_wrap{bottom:0}
#wrap.main.fixed .bg_wrap{position:fixed}
#wrap #footer{background:#fff}

/* common */
.main .content .icon, .banner_view .banner_rolling .banner_nav a{background:url("https://ssl.nexon.com/s2/game/tales/renewal_2018/main/spr_icon.png") no-repeat}
.banner_list > ul > li{float:left;width:350px;margin-right:35px}
.banner_list > ul > li > a{display:block;position:relative;width:100%;height:100%;overflow:hidden}
.banner_list li .cover{position:absolute;top:0;left:0;right:0;width:100%;background-size:100% 100% !important}
.banner_list li img{width:100%}
.more span, .more:after, .more:before{position:absolute;transition:all 170ms linear;overflow:hidden;}
.more:after, .more:before{content:"";z-index:1}
.more .vt, .more:after{top:0}
.more .hr, .more:before{width:100%}
.more:hover .hr, .more:before{transform:scaleX(0)}
.more:hover .vt, .more:after{transform:scaleY(0)}
.more:hover:before{transform:scaleX(1)}
.more:hover:after{transform:scaleY(1)}
.more:hover:before, .more:hover:after{transition-delay:80ms}

/* view type */
.view_type{padding:2.33% 0 1.67%}
.view_type ul{width:160px;*zoom:1;margin:0 auto}
.view_type ul:after{content:"";display:block;clear:both}
.view_type li{float:left}
.view_type a{display:block;width:68px;height:14px;line-height:16px;color:#3a3ba1;border:2px solid #4D62CF;font-size:12px;transition:all 200ms linear;padding:7px 0 7px 10px}
.view_type .btn_image{border-right:0 none;border-radius:4px 0 0 4px}
.view_type .btn_list{border-left:0 none;border-radius:0 4px 4px 0}
.view_type a .icon{display:inline-block;*zoom:1;width:14px;height:14px;vertical-align:top;margin-right:7px}
.view_type .btn_list .icon{background-position:0 -20px}
.view_type .on a, .view_type a:hover{color:#acadff;border-color:#3b40b1;background:#3b4da8}
.view_type .on .btn_image .icon, .view_type .btn_image:hover .icon{background-position:-24px 0}
.view_type .on .btn_list .icon, .view_type .btn_list:hover .icon{background-position:-24px -20px}

/* view wrap */
.view_wrap .view_content{position:relative;display:none}
.view_wrap .view_content.on{display:block}
.view_wrap .view_content .new{width:21px;height:33px;background-position:-87px -36px}

/* banner */
.banner_view .banner_rolling, .banner_view .banner_list li a, .banner_list .news_list div{box-shadow:5px 5px 30px 3px rgba(0,0,0,0.3)}
.banner_view .banner_rolling, .banner_view .banner_list > ul > li{opacity:0;transform:scale(0.95);transition:opacity 250ms linear, transform 250ms linear}
.banner_view.active .banner_rolling, .banner_view.active .banner_list > ul >li{opacity:1;transform:scale(1)}
.banner_view .banner_list > ul{position:relative;*zoom:1;margin-right:-35px}
.banner_view .banner_list ul:after{content:"";display:block;clear:both}
.banner_view .banner_list li{height:320px;text-align:center;padding-bottom:35px}
.banner_view .banner_list li img{height:100%}
.banner_view .banner_list > ul > li:not(.news_list) > a > .title{position:absolute;left:8%;right:8%;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.banner_view .banner_list li a .title, .banner_view .banner_list .banner4 .title .text{overflow:hidden;word-wrap:break-word}
.banner_view .banner_list li a .cover{transition:all 400ms ease}
.banner_view .banner_list li img, .banner_view .banner_list li .img{position:absolute;top:0%;left:0%;transition:transform 300ms linear}
.banner_view .banner_list li .new{position:absolute;top:0;left:15px}
.banner_view .banner_list .banner1 .title, .banner_view .banner_list .banner3 .title{bottom:12.81%;height:60px;color:#fff;font-size:25px;line-height:30px}
.banner_view .banner_list li .banner1:hover .title, .banner_view .banner_list li .banner3:hover .title{animation:titleHover 400ms ease}
.banner_view .banner_list .banner1 .cover{background:url("https://ssl.nexon.com/s2/game/tales/renewal_2018/main/bg_cover_banner1.png") 50% 0 no-repeat}
.banner_view .banner_list .banner1 .cover, .banner_view .banner_list .banner3 .cover{height:200%}
.banner_view .banner_list .banner1:hover .cover, .banner_view .banner_list .banner3:hover .cover{top:-25%}
.banner_view .banner_list .banner1 .blt{position:absolute;bottom:25%;left:50%;width:128px;height:11px;font-size:0;margin:0 0 44px -64px}
.banner_view .banner_list .banner1 .blt span{display:inline-block;*zoom:1;vertical-align:middle}
.banner_view .banner_list .banner1 .blt .polygon{width:60px;height:100%;background-position:0 -50px;margin:0 2px}
.banner_view .banner_list .banner1 .blt .line{width:32px;height:1px;border-top:1px solid #fff;border-bottom:1px solid #fff;filter:alpha(opacity=50);opacity:0.5}
.banner_view .banner_list .banner1 .blt .line:first-child{transform-origin:100% 50%}
.banner_view .banner_list .banner1 .blt .line:last-child{transform-origin:0 50%}
.banner_view .banner_list .banner1:hover .line{animation:lineHover 400ms ease}
.banner_view .banner_list .banner1:hover .polygon{animation:polyHover 400ms ease}
.banner_view .banner_list .banner1:hover img, .banner_view .banner_list .banner3:hover img, .banner_view .banner_list .banner4:hover .img{transform:scale(1.3);transition-duration:500ms}
.banner_view .banner_list .banner2 .cover{display:none}
.banner_view .banner_list .banner2:hover img{transform:scale(1.12)}
.banner_view .banner_list .banner3 .cover{background:url("https://ssl.nexon.com/s2/game/tales/renewal_2018/main/bg_cover_banner3.png") 50% 0 no-repeat}
.banner_view .banner_list .banner3 .play{position:absolute;bottom:35.32%;left:50%;width:134px;height:134px;background-position:0 -119px;margin-left:-67px}
.banner_view .banner_list .banner3:hover .play{animation:playHover 600ms ease}
.banner_view .banner_list .banner4 .category{position:absolute;bottom:45%;left:50%;width:96px;height:26px;line-height:27px;font-size:16px;border-width:2px;border-radius:15px;margin:0 0 76px -50px}
.banner_view .banner_list .banner4:hover .category{animation:categoryHover 400ms ease}
.banner_view .banner_list .banner4 .title{top:50%;height:136px;font-size:0;line-height:24px;margin-top:-64px}
.banner_view .banner_list .banner4 .title .text{display:inline-block;*display:inline;*zoom:1;vertical-align:middle;max-height:72px;font-size:20px}
.banner_view .banner_list .banner4:hover .title{animation:title4Hover 400ms ease}
.banner_view .banner_list .banner4 .number{position:absolute;top:52%;left:0;width:100%;color:#9da1ff;font-size:20px;font-weight:lighter;margin-top:71px}
.banner_view .banner_list .banner4:hover .number{animation:numberHover 400ms ease}
.banner_view .banner_list .banner4 .img{width:100%;height:100%;background-size:100% 100% !important}
.banner_view .banner_list .banner4 .cover{height:100%;background:#000734;filter:alpha(opacity=0);opacity:0}
.banner_view .banner_list .banner4:hover .cover{filter:alpha(opacity=30);opacity:0.3}
.banner_view .banner_list .banner4.event .img{background:url("https://ssl.nexon.com/s2/game/tales/renewal_2018/main/bg_banner4_event.jpg") 50% 50% no-repeat}
.banner_view .banner_list .banner4.notice .img{background:url("https://ssl.nexon.com/s2/game/tales/renewal_2018/main/bg_banner4_notice.jpg") 50% 50% no-repeat}
.banner_view .banner_list .banner4.cash .img{background:url("https://ssl.nexon.com/s2/game/tales/renewal_2018/main/bg_banner4_cash.jpg") 50% 50% no-repeat}
.banner_view .banner_list .banner4.update .img{background:url("https://ssl.nexon.com/s2/game/tales/renewal_2018/main/bg_banner4_update.jpg") 50% 50% no-repeat}
.banner_view .banner_list .banner4.media .img{background:url("https://ssl.nexon.com/s2/game/tales/renewal_2018/main/bg_banner4_media.jpg") 50% 50% no-repeat}
.banner_view .banner_list .banner4.news .img{background:url("https://ssl.nexon.com/s2/game/tales/renewal_2018/main/bg_banner4_news.jpg") 50% 50% no-repeat}
.banner_view .banner_list .banner4.event, .banner_view .banner_list .banner4.cash, .banner_view .banner_list .banner4.update{color:#dab0fe}
.banner_view .banner_list .banner4.notice, .banner_view .banner_list .banner4.news, .banner_view .banner_list .banner4.media{color:#b0c8fe}
.banner_view .banner_list .banner4.event .category, .banner_view .banner_list .banner4.cash .category, .banner_view .banner_list .banner4.update .category{color:#e487ff;border-color:#C971F7;border-color:rgba(201,113,247,0.7)}
.banner_view .banner_list .banner4.notice .category, .banner_view .banner_list .banner4.news .category, .banner_view .banner_list .banner4.media .category{color:#9aceff;border-color:#5B83E8}
.banner_view .news_list .news_inner{display:flex;justify-content:center;flex-direction:column;box-sizing:border-box;height:100%;background:url("https://ssl.nexon.com/s2/game/tales/renewal_2018/main/bg_banner4_event.jpg") 50% 50% no-repeat;padding:0 8.57%}
.banner_view .news_list .news_inner div{position:relative;box-shadow:none}
.banner_view .banner_list .news_list a{box-shadow:none}
.banner_view .banner_list .news_list .h2{display:block;color:#ddd6ff;text-align:left;font-size:25px;padding-bottom:10px}
.banner_view .news_list .more{position:absolute;top:0;right:0;width:20px;height:20px}
.banner_view .news_list .more span{position:absolute;background:#9A91C8}
.banner_view .news_list .more:hover span{background:#fff}
.banner_view .news_list .more .l1{top:8px;left:0;width:100%;height:3px}
.banner_view .news_list .more .l2{top:0;left:8px;width:3px;height:100%}
.banner_view .news_list ul{max-height:67.19%;overflow:hidden;margin-right:0}
.banner_view .news_list li{position:relative;height:25px;line-height:25px;text-align:left;padding-bottom:0;margin-top:16px}
.banner_view .news_list li a{color:#c2bfe4;font-size:14px;padding:0 0 0 69px}
.banner_view .news_list .category{width:58px;height:23px;line-height:23px;border-width:1px;border-radius:13px;font-size:12px}
.banner_view .news_list .category.notice{color:#5f88ff;border-color:#4861D8}
.banner_view .news_list .category.check{color:#389fbd;border-color:#225195}
.banner_view .news_list .category.update{color:#c160ff;border-color:#7131C8}
.banner_view .news_list .category.event{color:#8d60ff;border-color:#553AD1}
.banner_view .news_list .category.cash{color:#cd683a;border-color:#7C4C66}
.banner_view .banner_row{position:relative}
.banner_view .row_default .banner_list{margin-left:770px}
.banner_view .banner_rolling{position:absolute;top:0;left:0;width:735px;height:675px}
.banner_view .banner_rolling ul{position:absolute;width:100%;height:100%;overflow:hidden}
.banner_view .banner_rolling li, .banner_view .banner_rolling li a{width:100%;height:100%}
.banner_view .banner_rolling li{width:0;overflow:hidden}
.banner_view .banner_rolling .on{width:100%}
.banner_view .banner_rolling li a{display:block;width:100%;height:100%}
.banner_view .banner_rolling li img{position:absolute;top:0;left:0;width:735px;height:100%}
.banner_view .banner_rolling .banner_nav{right:-1.37%;bottom:20px;width:125px;height:40px;line-height:40px;z-index:1}
.banner_view .banner_rolling .banner_nav .number span{font-size:20px;font-weight:lighter}
.banner_view .banner_rolling .banner_nav .slash{width:12px}
.banner_view .banner_rolling .banner_nav a{width:40px}
.banner_view .banner_rolling .banner_nav .prev{background-position:15px -317px}
.banner_view .banner_rolling .banner_nav .prev:hover{background-position:15px -370px}
.banner_view .banner_rolling .banner_nav .next{background-position:-69px -317px}
.banner_view .banner_rolling .banner_nav .next:hover{background-position:-69px -370px}
.banner_view .row_a .mgr{margin-right:350px}
.banner_view .row_a .vertical, .banner_view .row_b .horizontal{position:absolute;top:0;left:735px;margin-left:35px}
.banner_view .row_a .vertical{bottom:0;height:auto}
.banner_view .row_a .vertical a{*overflow:visible}
.banner_view .row_a .fright{float:right;margin-left:350px}
.banner_view .row_b .horizontal{width:735px}
.banner_view .row_default .banner_list > ul > li:first-child{transition-delay:100ms}
.banner_view .row_default .banner_list > ul > li:nth-child(2){transition-delay:180ms}
.banner_view .row_default .banner_list > ul > li:nth-child(3){transition-delay:260ms}
.banner_view .row_default .banner_list > ul > li:nth-child(4){transition-delay:320ms}

@keyframes titleHover{
    0%{transform:translateY(20px);opacity:0}
    100%{transform:translateY(0);opacity:1}
}

@keyframes title4Hover{
    0%{transform:translateY(15px);opacity:0}
    100%{transform:translateY(0);opacity:1}
}

@keyframes polyHover{
    0%{transform:translateY(-10px);opacity:0}
    100%{transform:translateY(0);opacity:1}
}

@keyframes lineHover{
    0%{transform:scaleX(0)}
    40%{transform:scaleX(0)}
    100%{transform:scaleX(1)}
}

@keyframes playHover{
    0%{transform:translateY(-15px) rotateY(-180deg);opacity:0}
    100%{transform:translateY(0) rotateY(0deg);opacity:1}
}


@keyframes categoryHover{
    0%{transform:rotateX(-90deg);opacity:0}
    40%{transform:rotateX(-90deg);opacity:0}
    100%{transform:rotateX(0deg);opacity:1}
}

/* list */
.list_view li .category{width:81px;height:29px;border-width:2px;border-radius:17px;font-size:14px;line-height:31px}
.list_view li .title span{display:inline-block;*zoom:1;vertical-align:middle}
.list_view li .new{margin:2px 7px 0 0}
.list_view .date_list{position:relative;overflow:hidden}
.list_view .monthly_list{padding-bottom:35px}
.list_view .monthly_list ul{border-bottom:1px solid #42609E;border-color:rgba(0,0,0,0.3);overflow:hidden}
.list_view .news_list, .list_view .monthly_list li{position:relative;opacity:0;transform:translateY(15px);transition:all 200ms linear}
.list_view.active .news_list, .list_view.active .monthly_list li{opacity:1;transform:translateY(0)}
.list_view .monthly_list li .month, .list_view li .date{position:absolute;color:#18254e;font-weight:bold;font-family:'UniversLTStd', sans-serif;z-index:1}
.list_view .monthly_list li .month{top:45px;left:15px;font-size:16px;border-top:2px solid #18254E;padding-top:2px}
.list_view .monthly_list li .month span{display:block}
.list_view .monthly_list li.from{border-top:1px solid #42609E;border-color:rgba(0,0,0,0.3)}
.list_view .monthly_list li a{display:block;height:160px;color:#19257b;transition:all 200ms linear;border-top:1px solid #7BAAEE;border-color:rgba(255,255,255,0.15);margin-left:16.62%}
.list_view .monthly_list li a .bg{position:absolute;top:1px;right:0;left:0;height:160px;background:#1a48c7;filter:alpha(opacity=0);opacity:0;transition:all 200ms linear}
.list_view .monthly_list li a:hover{color:#fff}
.list_view .monthly_list li a:hover .bg{filter:alpha(opacity=40);opacity:0.4;background:#4273d7}
.list_view .monthly_list li.from a{border-top:0 none}
.list_view .monthly_list li.from a .bg{top:0}
.list_view .monthly_list li .date{top:29px;left:53px;font-size:100px}
.list_view .monthly_list li .thumbnail, .list_view .monthly_view li .category{left:16.26%}
.list_view .monthly_list li .thumbnail{position:absolute;top:16px;width:140px;height:128px}
.list_view .monthly_list li .thumbnail img{width:100%}
.list_view .monthly_list li .category{position:absolute;top:63px;border-color:#fff;color:#fff;margin-left:200px}
.list_view .monthly_list li .title{position:relative;height:128px;font-size:0;padding:16px 15.15% 16px 316px}
.list_view .monthly_list li .text{max-width:94%;font-size:30px;white-space:nowrap;word-wrap:break-word;overflow:hidden;text-overflow:ellipsis;line-height:131px}
.list_view .monthly_list li .details{position:absolute;top:35px;right:4.66%;width:90px;height:90px}
.list_view .monthly_list li .details .icon{position:absolute;filter:alpha(opacity=0);opacity:0;transition-duration:200ms}
.list_view .monthly_list li .details .rhombus{top:0;left:0;width:100%;height:100%;background-position:-153px -215px}
:root .list_view .monthly_list li .details .rhombus{background:none;top:50%;left:50%;width:60px;height:60px;border:2px solid #fff;transform:rotate(45deg) scale(0);margin:-32px 0 0 -32px}
.list_view .monthly_list li .details .plus{top:50%;left:50%;width:24px;height:24px;background-position:-300px -234px;transform:scale(0);margin:-12px 0 0 -12px}
.list_view .monthly_list li a:hover .details .icon{filter:alpha(opacity=0.5);opacity:0.5}
.list_view .monthly_list li a:hover .details .rhombus{transform:rotate(45deg) scale(1)}
.list_view .monthly_list li a:hover .details .plus{transform:scale(1);transition-delay:150ms}
.list_view .monthly_list li a:hover .details:hover .icon{filter:alpha(opacity=100);opacity:1;transition-delay:0ms}
.list_view .news_list{background:rgba(65,113,214,0.5);margin-bottom:25px}
.list_view .news_list:hover{background:rgba(65,113,214,0.8)}
.list_view .news_list h2{position:absolute;top:38px;left:53px;font-size:30px}
.list_view .news_list h2 a{color:#062567}
.list_view .news_list ul{overflow:hidden;margin-left:16.26%}
.list_view .news_list li{float:left;width:50%;line-height:33px;padding:38px 0}
.list_view .news_list li:first-child, .list_view .news_list li:nth-child(2){border-bottom:1px solid #6892E1}
.list_view .news_list li .category{color:#cee0ff;border-color:#cee0ff}
.list_view .news_list li a{height:33px;color:#19257b;font-size:20px;padding-left:115px;margin-right:6.35%}
.view_wrap .news_list li a:hover .title{color:#fff}

/* news list */
.news_wrap{position:relative;z-index:1;margin-top:25px}
.news_wrap .news_list{position:relative;height:85px;overflow:hidden;background:#F1F1F1;padding:0 4.65% 0 7.31%;margin-bottom:-2.85%}
.news_wrap .news_list h2{position:absolute;top:50%;left:2.32%;height:30px;line-height:31px;color:#062567;font-size:25px;font-weight:normal;margin-top:-15px}
.news_wrap .news_list ul{width:100%;height:100%;overflow:hidden}
.news_wrap .news_list li{position:relative;float:left;width:49.99%;height:100%}
.news_wrap .news_list li:before{content:"";position:absolute;top:0;left:-1px;width:1px;height:100%;background:#e8e8e8}
.news_wrap .news_list li a{position:absolute;top:50%;left:50px;right:35px;height:30px;line-height:31px;font-size:20px;padding-left:115px;margin-top:-15px}
.news_wrap .news_list li .category{width:96px;height:26px;border-width:2px;line-height:28px;border-radius:15px;font-size:16px}
.news_wrap .news_list li .title{font-weight:lighter}
.news_wrap .news_list li a:hover.title{color:#798bff}
.news_wrap .news_list li .category.notice{border-color:#7194F7;color:#5f88ff}
.news_wrap .news_list li .category.update{border-color:#CE94FF;color:#c160ff}
.news_wrap .news_list li .category.cash{border-color:#ff9c00;color:#FF961A}
.news_wrap .news_list li .category.event{border-color:#9371F7;color:#9976ff}
.news_wrap .news_list li .category.news{border-color:#97C3FF;color:#1a80ff}
.news_wrap .news_list li .category.check{border-color:#74B5C8;color:#74b5c8}
.news_wrap .news_list li .category.patch{border-color:#9199FF;color:#626dff}
.news_wrap .news_list .more{position:absolute;right:2.32%;top:50%;width:35px;height:35px;text-indent:-9999px;overflow:hidden;margin-top:-18px}
.news_wrap .news_list .more span{background:#7F8FA4}
.news_wrap .news_list .more:before, .news_wrap .news_list .more:after{background:#5F88FF}
.news_wrap .news_list .more .hr, .news_wrap .news_list .more:before{left:0;top:15px;height:5px}
.news_wrap .news_list .more .vt, .news_wrap .news_list .more:after{left:15px;width:5px;height:100%}

/* story list */
.story_wrap{background:#fff}
.story_wrap .story_content{position:relative;padding:5.98% 0}
.story_wrap .story_title{position:absolute;top:0;left:0;width:350px;margin-top:8.84%}
.story_wrap .story_title img{position:absolute;top:0;left:0;width:100%;animation:storyImg 3s linear infinite}
.story_wrap .story_title .more{position:relative;display:inline-block;*zoom:1;color:#000;font-size:20px;transition:color 150ms linear;padding-right:27px;margin-top:5.43%}
.story_wrap .story_title .more .line{position:absolute;top:0;right:0;width:17px;height:17px}
.story_wrap .story_title .more .line span{background:#000}
.story_wrap .story_title .more .hr, .story_wrap .story_title .more:before{right:0;top:7px;height:3px;width:17px}
.story_wrap .story_title .more .vt, .story_wrap .story_title .more:after{right:7px;width:3px;height:17px}
.story_wrap .story_title .more:hover{color:#5f88ff}
.story_wrap .story_title .more:hover:after, .story_wrap .story_title .more:hover:before{background:#5F88FF}
.story_wrap h2{position:relative;color:#9b4cff;font-size:70px;font-weight:normal;background:url("https://ssl.nexon.com/s2/game/tales/renewal_2018/main/blt_h2_story.png") no-repeat;padding-top:10.29%}
.story_wrap .banner_list{position:relative;overflow:hidden;margin-right:-9999px;margin-left:385px}
.story_wrap ul{width:9999px;overflow:hidden}
.story_wrap li{height:490px}
.story_wrap li .img{display:block;overflow:hidden}
.story_wrap li a img{position:absolute;top:0%;left:0%;transition:transform 300ms linear}
.story_wrap li a:hover img{transform:scale(1.14)}
.story_wrap li .cover{height:100%;background:url("https://ssl.nexon.com/s2/game/tales/renewal_2018/main/bg_cover_story.png") 50% 100% no-repeat}
.story_wrap li .title{position:absolute;left:35px;right:35px;top:71.84%}
.story_wrap li .title span{display:block;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.story_wrap li .headline{height:52px;font-size:22px;line-height:1.185;margin-bottom:5%}
.story_wrap li .subscript{height:38px;font-size:16px;line-height:1.25;font-weight:lighter;color:#999}
.story_wrap .story4 .icon{position:absolute;bottom:0;right:8.57%;width:51px;height:51px;border:2px solid #fff;border-color:rgba(255,255,255,0.2);margin-bottom:8.57%}
.story_wrap .story4.gallery .icon{background-position:-222px -141px}
.story_wrap .story4.cartoon .icon{background-position:-285px -141px}
.story_wrap .story4.play .icon{background-position:-349px -141px}
.story_wrap .story4.music .icon{background-position:-158px -141px}
.story_wrap .story1{background:#F1F1F1}
.story_wrap .story1 .img{position:absolute;top:10.2%;left:50%;width:74.3%;max-width:260px;margin-left:-37.14%;border-radius:100%;padding-top:74.3%}
.story_wrap .story1 .title{color:#9e51ff}
.story_wrap .story2{background:#fff}
.story_wrap .story2 .img{position:relative;padding-top:94.29%}
.story_wrap .story2 .title{left:0;right:0}
.story_wrap .story3 .headline{color:#fff}
.story_wrap .btn100{display:none;position:absolute;right:-50px;top:50%;z-index:1;margin-top:-50px}
.story_wrap .btn100.show{display:block}
.w1600 .story_wrap h2{font-size:55px}
.w1600 .story_wrap li .headline{height:44px;font-size:19px}
.w1600 .story_wrap li .subscript{height:32px;font-size:13px}

@keyframes storyImg{
    0%{transform:translateY(0px)}
    25%{transform:translateY(-5px)}
    50%{transform:translateY(0px)}
    75%{transform:translateY(5px)}
    100%{transform:translateY(0px)}
}

/* video layer pop*/
.pop_video .pop_content{max-width:1505px;background:#000;left:63px;font-size:0}

/* pop message */
.pop_message .pop_content{background:none;width:439px;height:728px;margin:-364px 0 0 -220px}
.pop_message .msg_content{position:absolute;top:241px;left:0;width:100%;height:439px}
.pop_message .msg_content .txt, .pop_message .msg_content .link{position:absolute}
.pop_message .msg1 .msg_content .txt, .pop_message .msg1 .msg_content .link, .pop_message .btn_close{text-indent:-99999px;overflow:hidden;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/0124_update/spr_btn_layerpop_0228.png") no-repeat}
.pop_message .msg1 .msg_content .txt{bottom:0;left:0;width:100%;height:567px;background-position:-198px -6px}
.pop_message .msg1 .msg_content .link{bottom:43px;left:50%;width:231px;height:58px;margin-left:-115px}
.pop_message .msg1 .msg_content .link{background-position:0 -751px}
.pop_message .msg1 .msg_content .link:hover{background-position:0 -842px}
.pop_message .btn_close{position:absolute;top:0;left:50%;width:71px;height:71px;background-position:-299px -829px !important;margin-left:-35px}
.pop_message .btn_hide_today{position:absolute;bottom:0;left:50%;width:143px;height:21px;text-indent:-99999px;overflow:hidden;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/0124_update/spr_btn_layerpop.png") no-repeat;margin-left:-72px}

/* pop thanks 20201021 추가 */
.pop_thanks .pop_content{background:none;width:980px;height:1298px;margin:-577px 0 0 -490px;}
.pop_thanks .msg_content{position:absolute;top:90px;left:0;width:100%;height:1154px;background:url("https://lwi.nexon.com/tales/2020/1021_event_0EDDF516B404AF7E/bg_thanksvip.png") no-repeat}
.pop_thanks .msg_content p, .pop_thanks .msg_content ul, .pop_thanks .msg_content dl,.pop_thanks .msg_content button,.pop_thanks .msg_content a {text-indent: -99999px;}
.pop_thanks .link, .pop_thanks .btn_close, .pop_thanks .btn_hide_today, .pop_thanks .btn_never{position:absolute; text-indent:-99999px;overflow:hidden;background:url("https://lwi.nexon.com/tales/2020/1021_event_0EDDF516B404AF7E/btns_thanksvip.png") no-repeat}
.pop_thanks .msg1 .msg_content .link {top:480px; left:300px; width: 402px; height: 89px; background-position: -10px -10px;}
.pop_thanks .msg1 .msg_content .link:hover {background-position: -10px -119px;}
.pop_thanks .msg1 .btn_close {top:0; left:837px; width: 69px; height: 69px; background-position: -432px -10px;}
.pop_thanks .msg1 .btn_close:hover {background-position: -432px -99px;}
.pop_thanks .msg1 .btn_hide_today {top:30px; left:90px; width: 178px; height: 39px; background-position: -10px -287px;}
.pop_thanks .msg1 .btn_hide_today:hover {background-position: -208px -287px;}
.pop_thanks .msg1 .btn_never {bottom:0; left:0; width: 178px; height: 39px; background-position: -10px -228px;}
.pop_thanks .msg1 .btn_never:hover {background-position: -208px -228px;}

/* benefit pop */
.__benefit_pop{position: absolute;top:142px;left:38%;z-index: 9999;display: none;}
.__content{margin-top:50px}
.__benefit_top{position:relative;background:url('https://lwi.nexon.com/tales/common/benefit/benefit_top_bg.png')no-repeat;width:550px;height:128px}
.__logo{position:absolute;bottom:1px;right:0}
.__benefit_list{width:550px;position:relative;background:#fff;padding:20px 20px 0 35px;box-sizing:border-box}
.__benefit_list ul{position:relative;height:243px;max-height:243px;overflow-y:auto}
.__benefit_list ul li{font-family:'NEXONLv1Gothic','맑은 고딕','Malgun Gothic','sans-serif';position:relative;padding:0 30px;font-size:17px;margin-bottom:20px;cursor:pointer}
.__benefit_info{padding:0 10px 18px;min-height:40px;border-bottom:1px solid#ddd}
.__benefit_title{display:flex}
.__benefit_name{max-width:400px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-weight:bold}
.__benefit_new{min-width:17px;min-height:17px;background:url('https://lwi.nexon.com/tales/common/benefit/new.png')no-repeat;margin:5px 0 0 5px}
.__benefit_date{margin-top:7px;color:#979da3;font-size:14px}
.__dot{position:absolute;width:10px;height:10px;top:6px;left:0;border-radius:50%;background:#81b9ff;z-index:2}
.__line{position:absolute;top:26px;left:39px;width:1px;height:90%;background:#d9eaff;z-index:1}
.__button_box{display:flex}
.__today_close{cursor:pointer;border:none;width:275px;height:60px;background:url('https://lwi.nexon.com/tales/common/benefit/today_close.jpg');text-indent:-400px;overflow:hidden}
.__popup_close{cursor:pointer;border:none;width:275px;height:60px;background:url('https://lwi.nexon.com/tales/common/benefit/close.jpg');text-indent:-400px;overflow:hidden}
@media (max-width: 1400px) {
    .__benefit_pop{left:30%;}
}
@media (max-width: 1200px) {
    .__benefit_pop{left:326px;}
}

/* video_recommendation list */
.video_recommendation{background-color: #2d4d86; padding: 35px 62px; display: flex; align-items: center}
.video_recommendation .video_content{ position: relative; padding: 5.98% 0; overflow: hidden;}
.video_recommendation ul{display: flex; justify-content: center;}
.video_recommendation ul li {display: block; margin-right: 35px;}
.video_recommendation ul li:last-child { margin-right: 0 !important}
.video_recommendation .video_item {display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 350px; height:320px; padding: 0;background-color: #fff}
.video_recommendation .video_item .video_item_thumb{position:relative; width: 100%; height: 197px; overflow: hidden; margin-bottom: 20px; display: flex; align-items: center}
.video_recommendation ul li:hover .cover {border: 4px solid #6395ea; width: 100%; height: 100%; display: block; box-sizing: border-box}
.video_recommendation ul li:hover .icon{display:block;animation:playHover 600ms ease}
.video_recommendation li img{width:100%;}
.video_recommendation li .cover{display:none; position:absolute; background: rgba(12, 19, 72, 0.6); height: 100%; top:0;left:0;right:0;width:100%;}
.video_recommendation li .title{text-align: center; width:100%; font-size: 18px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;color:#333; padding:0 25px; box-sizing: border-box}
.video_recommendation .video_item .icon{display:none; position: absolute; top: 50%; left: 50%; width: 102px; height: 102px; background-position: 0 0px; margin-top: -51px; margin-left: -51px; background: url('https://lwi.nexon.com/tales/common/main/icon_play.png') no-repeat;}
@media (max-width: 1600px) {
    .video_recommendation .video_item .video_item_thumb{margin-bottom: 16px}
    .video_recommendation li .title{-webkit-line-clamp: 3}
}