@charset "utf-8";
/* CSS Document */

/* this css is all page's common settings ///////////////////////////////////////////////////////////////////////////////////////////*/
/* body ///////////////////////////////////////////////////////////////////////////////////////////*/
body{
min-width:986px;
background:url(https://static.nexon.co.jp/talesweaver_4th/common/bg_all.jpg) repeat-x center 35px #f7f5eb;
}


/* allcontainer ///////////////////////////////////////////////////////////////////////////////////////////*/
.allcontainer{
position:relative;
}


/* container ///////////////////////////////////////////////////////////////////////////////////////////*/
.container{
background:url(https://static.nexon.co.jp/talesweaver_4th/common/bg_container_btm.jpg) no-repeat center bottom;
}


/* header ///////////////////////////////////////////////////////////////////////////////////////////*/
header{
position:relative;
margin:0 auto;
width:986px;
}


/* loginbox ///////////////////////////////////////////////////////////////////////////////////////////*/
/* logout */
.loginbox.logout input[type="text"],
.loginbox.logout input[type="password"]{
position:absolute;
padding:0 5px;
color:#aa9778;
border:none;
background:url(https://static.nexon.co.jp/talesweaver_4th/common/txt_loginbox_form.png) no-repeat transparent;
}
.loginbox.logout input[type="text"]{
top:14px;
background-position:center 1px;
}
.loginbox.logout input[type="password"]{
top:38px;
background-position:center -19px;
}

.loginbox.logout .btn-login{
position:absolute;
}
.loginbox.logout .btn-login a{
display:block;
width:71px;
height:45px;
background:url(https://static.nexon.co.jp/talesweaver_4th/common/button/btn_loginbox_login.png) no-repeat left top;
white-space:nowrap;
text-indent:120%;
overflow:hidden;
}
.loginbox .btn-login a:hover{
background-position:0 -45px;
}

.loginbox.logout li{
position:absolute;
}
.loginbox.logout li.btn-idsave{
top:62px;
}
.loginbox.logout li.btn-idsave label{
display:block;
padding-right:53px;
width:17px;
height:14px;
cursor:pointer;
background:url(https://static.nexon.co.jp/talesweaver_4th/common/button/btn_loginbox_idsave.png) no-repeat 17px top;
}
.loginbox.logout li.btn-idsave label:hover{
background-position:17px -14px;
}
.loginbox.logout li.btn-idsave span{
display:none;
}

.loginbox.logout li.btn-forget{
top:62px;
}
.loginbox.logout .btn-forget a{
display:block;
width:120px;
height:14px;
background:url(https://static.nexon.co.jp/talesweaver_4th/common/button/btn_loginbox_forget.png) no-repeat left top;
white-space:nowrap;
text-indent:120%;
overflow:hidden;
}
.loginbox.logout .btn-forget a:hover{
background-position:0 -14px;
}

.loginbox.logout li.btn-otp{
top:76px;
}
.loginbox.logout .btn-otp a{
display:block;
width:205px;
height:19px;
background:url(https://static.nexon.co.jp/talesweaver_4th/common/button/btn_loginbox_otp.png) no-repeat left top;
white-space:nowrap;
text-indent:120%;
overflow:hidden;
}
.loginbox.logout .btn-otp a:hover{
background-position:0 -19px;
}

/* login */
.loginbox.login p.welcome{
position:absolute;
margin:0;
width:205px;
height:22px;
background:url(https://static.nexon.co.jp/talesweaver_4th/common/txt_login_welcome.png) no-repeat center top;
line-height:22px;
text-indent:110%;
white-space:nowrap;
overflow:hidden;
}

.loginbox.login p.userid{
position:absolute;
margin:0;
padding-left:10px;
width:205px;
height:22px;
background:url(https://static.nexon.co.jp/talesweaver_4th/common/bg_login_userid.png) no-repeat left top;
font-family:Arial,"ＭＳ Ｐゴシック", "Osaka－等幅", Verdana;
line-height:22px;
white-space:nowrap;
color:#fff;
font-weight:bold;
}

.loginbox.login .btn-otp-camp,
.loginbox.login .btn-mypage,
.loginbox.login .btn-logout{
position:absolute;
}
.loginbox.login.openid .btn-mypage,
.loginbox.login.openid .btn-logout{
position:absolute;
}
.loginbox.login .btn-otp-camp a{
display:block;
width:208px;
height:32px;
background:url(https://static.nexon.co.jp/talesweaver_4th/common/button/btn_loginbox_otpcamp.png) no-repeat left top;
white-space:nowrap;
text-indent:120%;
overflow:hidden;
}
.loginbox.login .btn-otp-camp a:hover{
background-position:0 -32px;
}
.loginbox.login .btn-mypage a,
.loginbox.login .btn-logout a{
display:block;
width:100px;
height:30px;
white-space:nowrap;
text-indent:120%;
overflow:hidden;
}
.loginbox.login .btn-mypage a{
background:url(https://static.nexon.co.jp/talesweaver_4th/common/button/btn_loginbox_mypage_140219.png) no-repeat left top;
}
.loginbox.login .btn-logout a{
background:url(https://static.nexon.co.jp/talesweaver_4th/common/button/btn_loginbox_logout_140219.png) no-repeat left top;
}
.loginbox.login .btn-mypage a:hover,
.loginbox.login .btn-logout a:hover{
background-position:0 -30px;
}

/* btn-web-login ///////////////////////////////////////////////////////////////////////////////////////////*/
.btn-web-login a{
display:block;
position:absolute;
left:5px;
top:0px;
width:216px;
height:36px;
background:url(https://static.nexon.co.jp/talesweaver_4th/common/button/btn_web_login.png) no-repeat left top;
white-space:nowrap;
text-indent:120%;
overflow:hidden;
}
.btn-web-login a:hover{
background-position:left bottom;
}

/* btn-openid-login ///////////////////////////////////////////////////////////////////////////////////////////*/
.btn-openid-login a{
display:block;
position:absolute;
left:5px;
top:39px;
width:216px;
height:36px;
background:url(https://static.nexon.co.jp/talesweaver_4th/common/button/btn_openid_login_160120.png) no-repeat left top;
white-space:nowrap;
text-indent:120%;
overflow:hidden;
}
.btn-openid-login a:hover{
background-position:left bottom;
}


/* randomitem ///////////////////////////////////////////////////////////////////////////////////////////*/
.randomitem h1{
display:none;
}

.randomitem > a{
display:block;
text-decoration:none;
cursor:pointer;
}
.randomitem > a > div{
height:151px;
background-repeat:no-repeat;
background-position:left top;
}

.randomitem > a > div dl{
position:relative;
}
.randomitem > a > div dt{
position:absolute;
top:29px;
padding:4px 3px 9px 2px;
width:98px;
height:25px;
font-size:92%;
line-height:1.1;
text-align:center;
background:url(https://static.nexon.co.jp/talesweaver_4th/common/randomitem/bg_randomitem_balloon.png) no-repeat left top;
z-index:1;
overflow:hidden;
}
.randomitem > a > div dt strong{
font-weight:normal;
color:#840000;
}

.randomitem > a > div dd.image{
position:absolute;
top:24px;
width:120px;
height:103px;
vertical-align:middle;
text-align:center;
z-index:0;
}

.randomitem > a > div dd.date img{
vertical-align:top;
}
.randomitem > a > div dd.date{
padding-top:127px;
height:24px;
text-align:right;
}
.randomitem > a > div dd.date span{
display:inline-block;
*display:inline;
*zoom:1;
height:24px;
background:url(https://static.nexon.co.jp/talesweaver_4th/common/randomitem/img_date_span.png) no-repeat;
white-space:nowrap;
text-indent:120%;
overflow:hidden;
}
.randomitem > a > div dd.date span.month{
width:10px;
background-position:0 center;
}
.randomitem > a > div dd.date span.day{
width:10px;
background-position:-11px center;
}
.randomitem > a > div dd.date span.update{
width:33px;
background-position:-21px center;
}


/* emergency ///////////////////////////////////////////////////////////////////////////////////////////*/
.emergency{
border:solid 2px #840000;
background:#faf9f6;
overflow:hidden;
}
.emergency dt,
.emergency dd.title{
float:left;
}
.emergency dt{
width:78px;
height:22px;
margin-right:5px;
background:url(https://static.nexon.co.jp/talesweaver_4th/common/ttl_emergency.gif) no-repeat left top #840000;
white-space:nowrap;
text-indent:120%;
overflow:hidden;
}
.emergency dd{
line-height:22px;
}
.emergency dd.title{
overflow:hidden;
}
.emergency dd.title a{
color:#840000;
white-space:nowrap;
}
.emergency dd.date{
float:right;
padding-right:10px;
text-align:right;
}



/* left ///////////////////////////////////////////////////////////////////////////////////////////*/

/* gamedownload ********************************************************************************************/
.left .gamedownload{
margin-bottom:19px;
}
.left .gamedownload .btn-gamedownload a{
display:block;
width:230px;
height:66px;
background:url(https://static.nexon.co.jp/talesweaver_4th/index/button/btn_gamedownload_130909.png) no-repeat left top;
white-space:nowrap;
text-indent:120%;
overflow:hidden;
}
.left .gamedownload .btn-gamedownload a:hover{
background-position:0 -66px;
}

/* jellypi mart ********************************************************************************************/
.left .jellypimart{
margin-bottom:19px;
}
.left .jellypimart .btn-jellypimart a{
display:block;
width:230px;
height:66px;
background:url(https://static.nexon.co.jp/talesweaver_4th/index/button/btn_jellypimart.png) no-repeat left top;
white-space:nowrap;
text-indent:120%;
overflow:hidden;
}
.left .jellypimart .btn-jellypimart a:hover{
background-position:0 -66px;
}

/* update ********************************************************************************************/
.left .updatehistory{
margin-bottom:19px;
}
.left .updatehistory .btn-update a{
display:block;
width:230px;
height:66px;
background:url(https://static.nexon.co.jp/talesweaver_4th/index/button/btn_update.png) no-repeat left top;
white-space:nowrap;
text-indent:120%;
overflow:hidden;
}
.left .updatehistory .btn-update a:hover{
background-position:0 -66px;
}

/* discord ********************************************************************************************/
.left .discordserver{
margin-bottom:19px;
}
.left .discordserver .btn-discordserver a{
display:block;
width:230px;
height:66px;
background:url(https://static.nexon.co.jp/talesweaver_4th/index/button/btn_discordserver.png) no-repeat left top;
white-space:nowrap;
text-indent:120%;
overflow:hidden;
}
.left .discordserver .btn-discordserver a:hover{
background-position:0 -66px;
}

/* nexonchan ********************************************************************************************/
.left .nexonchan{
margin-bottom:19px;
}
.left .nexonchan .btn-nexonchan a{
display:block;
width:230px;
height:66px;
background:url(https://static.nexon.co.jp/talesweaver_4th/index/button/btn_nexonchan.png) no-repeat left top;
white-space:nowrap;
text-indent:120%;
overflow:hidden;
}
.left .nexonchan .btn-nexonchan a:hover{
background-position:0 -66px;
}


/* maintenance ********************************************************************************************/
.left .maintenance{
border-bottom:solid 1px #c5c5c5;
}
.left .maintenance > h1{
margin-bottom:10px;
height:33px;
background:url(https://static.nexon.co.jp/talesweaver_4th/common/ttl_maintenance_180307.png) no-repeat left top;
white-space:nowrap;
text-indent:120%;
overflow:hidden;
}
.left .maintenance > dl{
width:230px;
height:95px;
background:url(https://static.nexon.co.jp/talesweaver_4th/common/bg_maintenance_151222.png) no-repeat left top;
white-space:nowrap;
text-indent:120%;
overflow:hidden;
}


/* leftbanner ********************************************************************************************/
.left .leftbanner li{
margin-top:10px;
}
.left .leftbanner li:first-child{
margin-top:0;
}


/* btn-pagetop ********************************************************************************************/
.container > .btn-pagetop{
position:relative;
margin:0 auto;
width:986px;
height:59px;
overflow:hidden;
}
.container > .btn-pagetop a{
float:right;
display:block;
margin-right:10px;
width:163px;
height:59px;
background:url(https://static.nexon.co.jp/talesweaver_4th/common/button/btn_pagetop_160713.png) no-repeat;
white-space:nowrap;
text-indent:120%;
overflow:hidden;
outline:none;
}
.container > .btn-pagetop a:hover{
background-position:0 -64px;
}


/* sitemap ///////////////////////////////////////////////////////////////////////////////////////////*/
.sitemap{
font-family:Arial,"ＭＳ Ｐゴシック", "Osaka－等幅", Verdana;
background:url(https://static.nexon.co.jp/talesweaver_4th/common/bg_sitemap.jpg) no-repeat center top;
}

.sitemap > div{
position:relative;
margin:0 auto;
width:986px;
background:url(https://static.nexon.co.jp/talesweaver_4th/common/bg_sitemap160713.png) no-repeat center top;
}

.sitemap > div > .detail{
padding:49px 0 0 53px;
width:933px;
height:238px;
}

.sitemap > div > .detail > dl{
float:left;
width:113px;
font-size:100%;
line-height:17px;
letter-spacing:0.5px;
}
.sitemap > div > .detail > dl > dt{
margin-bottom:2px;
height:17px;
white-space:nowrap;
text-indent:120%;
overflow:hidden;
}
.sitemap > div > .detail > dl > dd > dl{
margin-bottom:11px;
}
.sitemap > div > .detail > dl > dd > dl > dt{
margin-bottom:1px;
font-weight:bold;
}
.sitemap > div > .detail > dl > dd{
font-size:10px;
}
.sitemap > div > .detail > dl.support .sub02 {
padding-right: 17px;
background: url(https://static.nexon.co.jp/talesweaver_4th/common/icon_blank_sitemap.png) no-repeat 26px 4px;	
}

/* footer ///////////////////////////////////////////////////////////////////////////////////////////*/
.commonfooter{
clear:both;
padding-bottom:20px;
font-family:"Arial", "ＭＳ Ｐゴシック", "Osaka－等幅", Verdana;
font-size:92%;
text-align:center;
color:#afa594;
border-top:solid 1px #bcb7ae;
background:url(https://static.nexon.co.jp/talesweaver_4th/common/bg_footer.jpg) no-repeat center top #cfcac1;
}
.commonfooter > div{
padding:38px 0 32px;
border-top:solid 1px #f4f2ef;
background:url(https://static.nexon.co.jp/talesweaver_4th/common/logo_footer.png) no-repeat center bottom;
}

.commonfooter > div a{text-decoration:underline;}
.commonfooter > div a:hover{text-decoration:none;}

.commonfooter > div > ul > li{
display:inline;
padding:0 4px 0 7px;
border-left:solid 1px #afa594;
}
.commonfooter > div > ul > li:first-child{
border-left:none;
}
.commonfooter > div > ul > li a{
color:#6b3f00;
}
.commonfooter > div > div p{
margin-bottom:0;
padding-bottom:4px;
}
.commonfooter > div > div p > a{
color:#00a1e9;
}


/* community point ///////////////////////////////////////////////////////////////////////////////////////////*/
.get-community-point-box{
position: fixed;
right: 20px;
bottom: 20px;
width: 189px;
height: 112px;
background: url(https://static.nexon.co.jp/talesweaver_4th/common/bg_get_community_point.jpg);
box-shadow:0px 0px 8px 1px rgba(0, 0, 0, .2);
opacity: 0;
transform: translate(0, 80px);
transition: all .3s linear 0s;
z-index: 1000;
}
.get-community-point-box.open{
opacity: 1;
transform: translate(0, 0);
}
.get-community-point-box p:first-child,
.get-community-point-box p span + span{
display: none;
}
.get-community-point-box p + p{
position: absolute;
left: 13px;
top: 38px;
margin: 0;
padding: 0;
width: 102px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 40px;
font-weight: bold;
color: #6b3f00;
}