@charset "utf-8";
@import url("layout.css");

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0;padding:0;}
fieldset,img{border:0 none;}
dl,ul,ol,menu,li {list-style:none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
input,select,textarea,button {vertical-align:middle;}
button {border:0 none;background-color:transparent;cursor:pointer;}
body {width:100%;margin:0 auto;}
body,th,td,input,select,textarea,button {font:11px/1.5 Tahoma;color:#766a60;} /* color°ªÀº µðÀÚÀΰ¡À̵忡 ¸Â°Ô»ç¿ë */
a {color:#333;text-decoration:none;}
a:active, a:hover {text-decoration:underline;}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal;}
legend {display:none;}

/* common */
.irPm {display:block;overflow:hidden;font-size:0px;line-height:0;text-indent:-9999em;}
.irWa {display:block;overflow:hidden;position:relative;width:100%;height:100%;z-index:-1;}
.screenOut {overflow:hidden;position:absolute;left:-9999in;width:0;height:0;font-size:0;line-height:0;}
.screenHide {font-size:0;line-height:0;visibility:hidden;}

.blind {position:absolute; left:-9999em;}
.fl {float:left;}
.fr {float:right;}
.clb {clear:both;overflow:hidden;width:0;height:0;font-size:0;line-height:0;}
.show {display:block;}
.hide {display:none;}
.dInline {display:inline-block;}
.tbl {border-collapse:collapse;border-spacing: 0;} /* Å×À̺í ÃʱâÈ­ */

h1 {position:absolute; top:117px; left:50%; width:372px; height:64px; margin:0 0 0 -208px;}
h1 a {display:block; width:372px; height:64px; text-indent:-9999em; overflow:hidden;}

#header .gnb {height:75px; margin:0 0 0 31px; padding:338px 0 0 0; overflow:hidden; *zoom:1;}
#header .gnb li {float:left; text-indent:-9999em;}
#header .gnb li a {display:block; height:45px; background:url(../images/common/gnbTit.png) no-repeat 0 0;}
#header .gnb .news {position:relative; width:106px; z-index:0;}
#header .gnb .news a:hover, #header .gnb .news a.select {background-position:0 -54px;}
#header .gnb .newsMenu {display:none; position:absolute; top:37px; left:4px; width:391px; height:38px; background:url(../images/news/newsTab.png) no-repeat 0 0;}
#header .gnb .newsMenu li {height:39px;}
#header .gnb .newsMenu li a {height:16px; margin:15px 0 0 1px; background:none;}
#header .gnb .newsMenu li.mAnnouncements a {width:134px; margin-left:2px;}
#header .gnb .newsMenu li.mAnnouncements a:hover, #header .gnb .newsMenu li.mAnnouncements a.select {background:url(../images/news/newsTab.png) no-repeat -2px -45px;}
#header .gnb .newsMenu li.mUpdate a {width:67px;}
#header .gnb .newsMenu li.mUpdate a:hover, #header .gnb .newsMenu li.mUpdate a.select {background:url(../images/news/newsTab.png) no-repeat -137px -45px;}
#header .gnb .newsMenu li.mUpdatePreview a {width:117px;}
#header .gnb .newsMenu li.mUpdatePreview a:hover, #header .gnb .newsMenu li.mUpdatePreview a.select {background:url(../images/news/newsTab.png) no-repeat -205px -45px;}
#header .gnb .newsMenu li.mEvent a {width:66px;}
#header .gnb .newsMenu li.mEvent a:hover, #header .gnb .newsMenu li.mEvent a.select {background:url(../images/news/newsTab.png) no-repeat -323px -45px;}
#header .gnb .gameInfo {position:relative; width:155px; z-index:0;}
#header .gnb .gameInfo a {background-position:-106px 0;}
#header .gnb .gameInfo a:hover, #header .gnb .gameInfo a.select {background-position:-106px -54px;}
#header .gnb .gameInfoMenu {display:none; position:absolute; top:37px; left:0; width:475px; height:38px; margin:0 0 0 -103px; background:url(../images/gameinfo/gameinfoTab.png) no-repeat 0 0;}
#header .gnb .gameInfoMenu li {height:39px;}
#header .gnb .gameInfoMenu li a {height:16px; margin:15px 0 0 1px; background:none;}
#header .gnb .gameInfoMenu li span {display:block; height:16px; margin:15px 0 0 1px; background:none;}
#header .gnb .gameInfoMenu li.mOverview span {width:85px; margin-left:7px;}
#header .gnb .gameInfoMenu li.mOverview a {width:85px; margin-left:7px;}
#header .gnb .gameInfoMenu li.mOverview a:hover, #header .gnb .gameInfoMenu li.mOverview a.select {background:url(../images/gameinfo/gameinfoTab.png) no-repeat -7px -45px;}
#header .gnb .gameInfoMenu li.mNoviceGuide span {width:109px;}
#header .gnb .gameInfoMenu li.mNoviceGuide a {width:109px;}
#header .gnb .gameInfoMenu li.mNoviceGuide a:hover, #header .gnb .gameInfoMenu li.mNoviceGuide a.select {background:url(../images/gameinfo/gameinfoTab.png) no-repeat -93px -45px;}
#header .gnb .gameInfoMenu li.mCharacters a {width:97px;}
#header .gnb .gameInfoMenu li.mCharacters span {width:97px;}
#header .gnb .gameInfoMenu li.mCharacters a:hover, #header .gnb .gameInfoMenu li.mCharacters a.select {background:url(../images/gameinfo/gameinfoTab.png) no-repeat -203px -45px;}
#header .gnb .gameInfoMenu li.mQuests a {width:65px;}
#header .gnb .gameInfoMenu li.mQuests span {width:65px;}
#header .gnb .gameInfoMenu li.mQuests a:hover, #header .gnb .gameInfoMenu li.mQuests a.select {background:url(../images/gameinfo/gameinfoTab.png) no-repeat -301px -45px;}
#header .gnb .gameInfoMenu li.mGameSystem a {width:99px;}
#header .gnb .gameInfoMenu li.mGameSystem a:hover, #header .gnb .gameInfoMenu li.mGameSystem a.select {background:url(../images/gameinfo/gameinfoTab.png) no-repeat -367px -45px;}
#header .gnb .community {position:relative; width:174px; z-index:0;}
#header .gnb .community a {background-position:-261px 0;}
#header .gnb .community a:hover, #header .gnb .community a.select {background-position:-261px -54px;}
#header .gnb .communityMenu {display:none; position:absolute; top:37px; left:0; width:300px; height:38px; margin:0 0 0 -69px; background:url(../images/community/communityTab.png) no-repeat 0 0;}
#header .gnb .communityMenu li {height:39px;}
#header .gnb .communityMenu li a {height:16px; margin:15px 0 0 1px; background:none;}
#header .gnb .communityMenu li.mForum a {width:73px; margin-left:2px;}
#header .gnb .communityMenu li.mForum a:hover, #header .gnb .communityMenu li.mForum a.select {background:url(../images/community/communityTab.png) no-repeat -2px -45px;}
#header .gnb .communityMenu li.mScreenshots a {width:105px;}
#header .gnb .communityMenu li.mScreenshots a:hover, #header .gnb .communityMenu li.mScreenshots a.select {background:url(../images/community/communityTab.png) no-repeat -76px -45px;}
#header .gnb .communityMenu li.mRanking a {width:116px;}
#header .gnb .communityMenu li.mRanking a:hover, #header .gnb .communityMenu li.mRanking a.select {background:url(../images/community/communityTab.png) no-repeat -182px -45px;}

#header .gnb .shop {position:relative; width:110px; z-index:0;}
#header .gnb .shop a {background-position:-435px 0;}
#header .gnb .shop a:hover, #header .gnb .shop a.select {background-position:-435px -54px;}
#header .gnb .shopMenu {display:none; position:absolute; top:37px; left:0; width:300px; height:38px; margin:0 0 0 -87px; background:url(../images/shop/shopTab.png) no-repeat 0 0;}
#header .gnb .shopMenu li {height:39px;}
#header .gnb .shopMenu li a {height:16px; margin:15px 0 0 1px; background:none;}
#header .gnb .shopMenu li.mLuckyShop a {width:98px; margin-left:2px;}
#header .gnb .shopMenu li.mLuckyShop a:hover, #header .gnb .shopMenu li.mLuckyShop a.select {background:url(../images/shop/shopTab.png) no-repeat -2px -45px;}
#header .gnb .shopMenu li.mItemShop a {width:86px; cursor:default;}
#header .gnb .shopMenu li.mItemShop a:hover, #header .gnb .shopMenu li.mItemShop a.select {background:url(../images/shop/shopTab.png) no-repeat -101px -45px;}
#header .gnb .shopMenu li.mBuyTcoin a {width:91px;}
#header .gnb .shopMenu li.mBuyTcoin a:hover, #header .gnb .shopMenu li.mBuyTcoin a.select {background:url(../images/shop/shopTab.png) no-repeat -188px -45px;}

#header .gnb .download {position:relative; width:165px; z-index:0;}
#header .gnb .download a {background-position:-545px 0;}
#header .gnb .download a:hover, #header .gnb .download a.select {background-position:-545px -54px;}
#header .gnb .downloadMenu {display:none; position:absolute; top:37px; left:0; width:300px; height:38px; margin:0 0 0 -69px; background:url(../images/download/downloadTab.png) no-repeat 0 0;}
#header .gnb .downloadMenu li {height:39px;}
#header .gnb .downloadMenu li a {height:16px; margin:15px 0 0 1px; background:none;}
#header .gnb .downloadMenu li.mGameDownload a {width:136px; margin-left:2px;}
#header .gnb .downloadMenu li.mGameDownload a:hover, #header .gnb .downloadMenu li.mGameDownload a.select {background:url(../images/download/downloadTab.png) no-repeat -2px -45px;}
#header .gnb .downloadMenu li.mVideos a {width:67px;}
#header .gnb .downloadMenu li.mVideos a:hover, #header .gnb .downloadMenu li.mVideos a.select {background:url(../images/download/downloadTab.png) no-repeat -139px -45px;}
#header .gnb .downloadMenu li.mArtwork a {width:91px;}
#header .gnb .downloadMenu li.mArtwork a:hover, #header .gnb .downloadMenu li.mArtwork a.select {background:url(../images/download/downloadTab.png) no-repeat -207px -45px;}

#header .gnb .support {position:relative; width:154px; z-index:0;}
#header .gnb .support a {background-position:-710px 0;}
#header .gnb .support a:hover, #header .gnb .support a.select {background-position:-710px -54px;}
#header .gnb .supportMenu {display:none; position:absolute; top:37px; left:0; width:320px; height:38px; margin:0 0 0 -189px; background:url(../images/support/supportTab.png) no-repeat 0 0;}
#header .gnb .supportMenu li {height:39px;}
#header .gnb .supportMenu li a {height:16px; margin:15px 0 0 1px; background:none;}
#header .gnb .supportMenu li.mFaq a {width:54px; margin-left:2px;}
#header .gnb .supportMenu li.mFaq a:hover, #header .gnb .supportMenu li.mFaq a.select {background:url(../images/support/supportTab.png) no-repeat -2px -45px;}
#header .gnb .supportMenu li.mMailinquiry a {width:105px;}
#header .gnb .supportMenu li.mMailinquiry a:hover, #header .gnb .supportMenu li.mMailinquiry a.select {background:url(../images/support/supportTab.png) no-repeat -57px -45px;}
#header .gnb .supportMenu li.mManagementPolicy a {width:155px;}
#header .gnb .supportMenu li.mManagementPolicy a:hover, #header .gnb .supportMenu li.mManagementPolicy a.select{background:url(../images/support/supportTab.png) no-repeat -163px -45px;}

.login {position:relative; width:195px; height:166px;  padding:13px 8px 0 15px; background:#303233 url(../images/common/loginBg.png) no-repeat 0 0; border:1px solid #424446; overflow:hidden;}
.login input {width:133px; padding:2px 0 4px 7px; background:#ddd; border:0; line-height:1.3em;}
.login .loginId {background:#ddd url(../images/common/txtId.png) no-repeat 7px 6px;}
.login .loginPwd {margin:4px 0 0 0; *margin:2px 0 0 0; background:#ddd url(../images/common/txtPw.png) no-repeat 7px 6px;}
.login .loginBtn {position:absolute; top:13px; right:14px; display:block; width:43px; height:43px; background:url(../images/common/btnLogin.png) no-repeat 0 0; text-indent:-9999em; cursor:pointer;}
.login .findInfo {margin:4px 0 0 0; padding:0 0 7px 10px; background:url(../images/common/loginArrow.png) no-repeat 0 5px; border-bottom:1px dotted #545658; color:#7a7979;}
.login .findInfo a {color:#c2c2c2;}
.login .dateInfo {margin:3px 0 4px 0; color:#c2c2c2; font-weight:bold;}
.login .dateInfo span {padding:0 0 0 13px;}
.login .facebookBtn{margin:3px 0 0 0; display:block;} /* 2013-03-06 */

.logoutNoFam {width:188px; height:133px; margin:0 0 37px 0; padding:17px 14px 0 14px; background:url(../images/common/bgNoFamily.png) no-repeat 0 0; text-align:center; overflow:hidden;}
.logoutNoFam h3 {font-size:9px; color:#7a7979;}
.logoutNoFam p {font-size:10px; line-height:1.3em;}
.logoutNoFam p.infoDanger {padding:5px 0 5px 0; border-bottom:1px dotted #545558; color:#fc0f18; line-height:1.2em;} /* 2013-03-04 */
.logoutNoFam .btnArea {margin:10px 0 0 0; overflow:hidden; *zoom:1;}
.logoutNoFam .btnArea button {display:block; float:left; height:23px; background:none; border:0; text-indent:-9999em; cursor:pointer;}
.logoutNoFam .btnArea .btnMyAccound {width:102px; margin:0 4px 0 0; background:url(../images/common/btnLogout.png) no-repeat 0 0;}
.logoutNoFam .btnArea .btnLogout {width:82px; background:url(../images/common/btnLogout.png) no-repeat 0 -23px;}
/* 2013-02-01 */
.logoutNoFam .dateTime {padding:5px 0 0 0; font-size:11px; color:#c2c2c2;}
.logoutNoFam .dateTime span {padding-left:13px; font-weight:bold; color:#c2c2c2;}
/* // 2013-02-01 */

.logoutFam {width:188px; height:133px; margin:0 0 37px 0; padding:15px 15px 0 15px; background:#303233 url(../images/common/loginBg.png) no-repeat 0 0; border:1px solid #424446; overflow:hidden;}
.logoutFam ul {padding:0 0 7px 0; border-bottom:1px dotted #555759; overflow:hidden; *zoom:1;}
.logoutFam ul li {float:left; width:100%; padding:0 0 0 10px; background:url(../images/common/bulLogout.png) no-repeat 0 3px; font-size:9px; color:#7a7979;}
.logoutFam ul li.selectFam {padding:0 0 7px 0; background:none;}
.logoutFam ul li.familyLv {width:72px;}
.logoutFam ul li.FamilyPt {width:92px;}
.logoutFam ul li.tcoin {width:123px;}
.logoutFam ul li.tcoin a {color:#fc0f18; text-decoration:underline;}/* 2013-01-09 */
.logoutFam ul li.last {width:53px; padding:0; background:none;}
.logoutFam ul li.last a {color:#fc0f18; text-decoration:underline;}
.logoutFam ul li strong {font-weight:bold; color:#fff;}
.logoutFam ul li select {width:100%; padding:0 0 0 6px; background:#ddd; border:1px solid #8f909e; font-size:9px; color:#7a7979;}
.logoutFam .btnArea {margin:10px 0 0 0; overflow:hidden; *zoom:1;}
.logoutFam .btnArea button {display:block; float:left; height:23px; background:none; border:0; text-indent:-9999em; cursor:pointer;}
.logoutFam .btnArea .btnMyAccound {width:102px; margin:0 4px 0 0; background:url(../images/common/btnLogout.png) no-repeat 0 0;}
.logoutFam .btnArea .btnLogout {width:82px; background:url(../images/common/btnLogout.png) no-repeat 0 -23px;}
/* 2013-02-01 */
.logoutFam .dateTime {padding:5px 0 0 0; color:#c2c2c2; text-align:center;}
.logoutFam .dateTime span {padding-left:13px; font-weight:bold; color:#c2c2c2;}
/* // 2013-02-01 */

.gameDownload {margin:12px 0 0 0;}
.guide {margin:5px 0 0 0;}
.setArea {position:relative;}
.latestNewsUpdates {margin:17px 0 0 0; padding:0 0 7px 0; background:url(../images/common/latestNewsUpdates.png) no-repeat 0 0; border-bottom:1px solid #becac4; text-indent:-9999em; line-height:1.1em;}
.setContent {margin:4px 0 0 0; padding:0 0 13px 0; border-bottom:1px solid #becac4;}
.setContent li {font-size:11px; font-weight:bold;}
.setContent li a {color:#414141; line-height:1.9em;}
.setContent li a:hover {color:#e20e0e;}
.setContent li img {vertical-align:-2px;}
.setMore {position:absolute; top:0; left:0; width:100%; height:14px;}
.setMore a {display:block; width:100%; height:14px; text-indent:-9999em;}

.snsArea {margin:7px 0 25px 0; height:32px; background:url(../images/common/bgSns.png) no-repeat 0 0; overflow:hidden; *zoom:1;}
.snsArea .facebook {float:left; width:109px; height:32px; margin:0 1px 0 0; border:0; text-indent:-9999em; cursor:pointer;}
.snsArea .youtube {float:left; width:110px; height:32px; border:0; text-indent:-9999em; cursor:pointer;}

.leftBanner {position:relative; margin:4px 0 0 0; background:#000;}
.leftBanner h3 {position:absolute; top:10px; left:10px; overflow:hidden; z-index:1;}
.leftBanner h3 a {float:left; display:block; width:9px; height:9px; margin:0 4px 0 0; background:#787878; text-indent:-9999em; overflow:hidden;}
.leftBanner h3 a:hover, .leftBanner h3 a.select {background:#e20e0e;}

.subPage .gameDownload {margin-top:6px;}
.subPage .guide {margin-top:229px;}
.leftMenuArea {position:absolute; top:273px; left:15px; width:240px; height:213px; margin:0 0 0 -10px;}

.sideBanner {position:fixed; _position:absolute; top:345px; *top:354px; left:50%; margin:0 0 0 475px;}
.main .sideBanner {position:absolute; top:438px;} /* 2013-03-06 */
.sideBanner a {display:block; margin:5px 0 0 0;}
.sideBanner img {border:1px solid #585858;}
.sideBanner .btnLike {position:relative; width:80px; height:200px; margin:5px 0 0 0; background:url(../images/common/sideBanner1.jpg) no-repeat 0 0;} /* 2013-03-06 */
.sideBanner .btnLike iframe {position:absolute; bottom:8px; left:50%; margin:0 0 0 -23px;} /* 2013-03-06 */

.contentsRight {width:640px;}
.contentsRight .titArea {margin:17px 0 0 0; overflow:hidden; *zoom:1;}
.contentsRight h3.pageTit {float:left; height:40px; padding:0; border:0; text-indent:-9999em;}
.contentsRight .navigator {float:right; margin:29px 0 0 0; font-size:9px; color:#8d8d8d;}
.contentsRight table {table-layout:fixed; border-collapse:collapse; border:0;}
.contentsRight table th {word-break:keep-all; word-wrap:break-word; border:0;}
.contentsRight table td {font-size:9px; color:#99a2a4; word-break:keep-all; word-wrap:break-word; text-align:center; border:0;}

.pagging {margin:10px 0 0 0; text-align:center;}
.pagging span {display:inline-block; width:auto; height:15px; margin:0 5px 0 0; overflow:hidden; text-align:center;}
.pagging span.pre {width:14px; height:15px;}
.pagging span.pre a {width:12px; height:13px; background:#5b6868 url(../images/common/btnPre.png) no-repeat 3px 3px; text-indent:-9999em;}
.pagging span.next {width:14px; height:15px; margin-right:0;}
.pagging span.next a {width:12px; height:13px; background:#5b6868 url(../images/common/btnNext.png) no-repeat 4px 3px; text-indent:-9999em;}
.pagging span a {display:block; width:auto; height:13px; padding:0 4px; font-size:10px; font-weight:bold; color:#8b9192; border:1px solid #b3b8b5; line-height:1.3em; *line-height:1.2em;}
.pagging span a:hover, .pagging span a.select {background-color:#616e6e; border-color:#788686; color:#fff;}

.search {margin:10px 0 0 0; padding:5px 0; background-color:#cfd5d5; text-align:center;}
.search select {height:20px; border:1px solid #99a2a4;}
.search input[type=text] {width:140px; height:16px; margin:0; padding:2px 0 0 0; font-size:10px; line-height:1.2em; border:1px solid #99a2a4;}
.search button.btnSearch {display:inline-block; width:75px; height:20px; background:url(../images/common/btnSeach.png) no-repeat 0 0; overflow:hidden; border:0; text-indent:-9999em; cursor:pointer;}

#footer {padding:22px 0 78px 0; height:15px; background:url(../images/common/bgFooter.png) no-repeat 0 22px;}
#footer p {width:657px; padding:0 0 0 253px; font-size:9px; color:#414344;}