body {
    padding: 0;
	margin: 0;
	width: 100%;
	min-width: 1020px;
	background-color: #000;
	font-size: 12pt;
	line-height: 1.2em;
	background-position: center top;
}

.wraper * {
    font-family: 'Noto Sans JP', sans-serif!important;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

a:hover {
	cursor: pointer;
}

a:link {
	color: #000;
	border: 0;
}

a:visited {
	color: #000;
}

a {
	text-decoration:none;
}


a img {
	border: 0;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
}

blockquote {
    display: inline-block;
    margin: 0;
}

ul {
    padding:0;
    margin:0;
    list-style-type:none;
}

ul.float-left li {
    float:left;
}

.strong {
	font-weight: bold;
}

.wraper {
	margin: 0 auto;
	max-width: 1920px;
	min-height: 1200px; 
	background: url("../img/img_background_03.png?20190717") no-repeat;
}

.container {
	margin: 0 auto;
	/*width: 991px;*/
    width: 1020px;
}

.border {
	border: 1px solid red;
	border-collapse:collapse;
}

.btn-collapse {
}
.btn-collapse::after {
    margin-left:15px;
    content: "[Hide]";
}

.btn-collapse.collapsed::after {
    content: "[Show]";
}

.btn-collapse:hover {
    cursor:pointer;
}


.hide {
    display:none;
}

#logo {
	text-align: center;
	padding: 17px 0;
}

#top {
    /*padding-top: 120px;*/
	width: 1020px;
	/*height: 372px;*/
	/*background-color: #666;*/
}

#top #game {
	width: 240px;
	height: 252px;
	float: left;
}

#game a {
    display:block;
    width:100%;
    height:100%;
}

#game #empty {
    height:100%;
    width:100%;
    background:url('../img/Image_PLAY.png') no-repeat 0 0;
    margin:18px 6px;
}

#top #game #button_start {
    height:218px;
    margin:0 auto;
}

#button_start a {
    display:block;
    height:100%;
    background: url(../img/Button_START.png) no-repeat 0 0;
    margin:18px 6px;
}

#button_start a:hover {
    background-position-y:-219px;
}

	#top #game #start {
		width: 240px;
		height: 252px;
		overflow: hidden;
	}

#start_button {
	position: relative;
	top: 0;
}
#start_button:hover {
	position: relative;
	top: -121px;
}

#sign_up {
	position: relative;
	top: 0;
}
#sign_up:hover {
	position: relative;
	top: -131px;
}


#top #banner {
	width: 780px;
	height: 252px;
	margin-left: 240px;
	background-color: pink;
	overflow: hidden;
}

#body {
	clear:left;
	/*background-color: #EDEDED;*/
}

#body #side {
	width: 232px;
	float: left;
}

#body #side #login {
    background-color:rgba(255, 255, 255, .5);
    border:3px solid rgba(255, 255, 255, .55);
    border-radius:5px;
}
    #body #side #login #default {
        margin:5px auto;
        width:214px;
        height:64px;
        background: url(../img/Button_join.png) no-repeat 0 0;
    }

    #body #side #login #default:hover {
        background-position-y:-64px;
    }

    #body #side #login div:hover,  #body #side #logined div:hover{
        background-position-y:-64px;
    }

	#login #logined {
        margin:5px auto;
		width: 214px;
		height: 64px;
		background: url(../img/Button_Logout.png) no-repeat 0 0;
	}

    #login #logined form { height: 100%; }

    #login #nexon_login {
        margin:5px auto;
		width: 214px;
		height: 64px;
		background: url(../img/Button_nexonID_login.png) no-repeat 0 0;
	}

    #login #steam_login {
        margin:5px auto;
		width: 214px;
		height: 64px;
		background: url(../img/Button_steamID_login.png) no-repeat 0 0;
	}

    #login #pmang_login  {
        margin:5px auto;
		width: 214px;
		height: 64px;
		background: url(../img/btn_pmang_login.png) no-repeat 0 0;
    }

#side .menu {
    margin:0px auto;
    margin-top:8px;
}

#side #btn-cash {
    width:211px;
    height:52px;
    background:url(../img/Button_cash.png) no-repeat 0 0;
}

#side #btn-cash:hover {
    background-position-y:-52px;
}

#side .btn-sns {
    width:190px;
    height:40px;
}

.btn-sns li {
    width:40px;
    height:40px;
}

.btn-sns li:nth-child(n+2) {
    margin-left:10px;
}

.btn-sns .twitter {
    background:url(../img/sns/twitter.png) no-repeat 0 0;
}
.btn-sns .facebook {
    background:url(../img/sns/facebook.png) no-repeat 0 0;
}
.btn-sns .instagram {
    background:url(../img/sns/instagram.png) no-repeat 0 0;
}
.btn-sns .youtube {
    background:url(../img/sns/youtube.png) no-repeat 0 0;
}


#side a {
    display:block;
    width:100%;
    height:100%;
}

	/*#body #menu ul {
	  list-style-type: none;
	  margin: 0;
	  padding: 0;
	}

	#body #menu li a {
	  display: block;
	  height: 52px;
	  width: 240px;
	}

		#menu_info {
			background: url(../img/MENU_INFO.png) no-repeat 0 0;
		}
		#menu_info:hover {
			background-position: 0 -52px;
		}

		#menu_library {
			background: url(../img/MENU_LIBRARY.png) no-repeat;
		}
		#menu_library:hover {
			background-position: 0 -52px;
		}

		#menu_support {
			background: url(../img/MENU_SUPPORT.png) no-repeat;
		}
		#menu_support:hover {
			background-position: 0 -52px;
		}

		#menu_faq {
			background: url(../img/MENU_FAQ.png) no-repeat;
		}
		#menu_faq:hover {
			background-position: 0 -52px;
		}

        #menu_guide {
			background: url(../img/MENU_GAMEGUIDE.png) no-repeat;
		}
		#menu_guide:hover {
			background-position: 0 -52px;
		}

        #menu_character {
			background: url(../img/MENU_CHARACTER.png) no-repeat;
		}
		#menu_character:hover {
			background-position: 0 -52px;
		}

		#menu_cash {
			background: url(../img/MENU_CASH.png) no-repeat;
		}

		#menu_twitter {
			background: url(../img/MENU_TWITTER.png) no-repeat;
		}

    #body #menu li a#banner_reserve {
	  display: block;
	  height: 251px;
	  width: 240px;
	}
        #banner_reserve {
			background: url(../img/banner_reserve.gif) no-repeat;
		}*/


#body #content {
	width: 780px;
	margin-left: 240px;
	background-color: white;
	min-height: 400px;
	padding-bottom: 30px;
}

	#body #content #sub_title {
		background-color: #393939;
		color: white;
		padding: 10px;
		height: 52px;
		width: 100%;
		display:table;
	}

		#body #content #sub_title #sub_title_content {
			display: table-cell;
			vertical-align: middle;
		}

	#body #content #content_body {
		padding: 10px 20px 30px 20px;
	}

.board_list {
	border-bottom: 2px solid #acacac;
	padding: 0;
	margin: 0;
}
	.board_list > li.caption > div {
		text-align: center;
		font-size: 16px;
		color: #444;
	}

	.board_list > li.caption {
		height: 50px;
		border-bottom: 1px solid #acacac;
		border-top: none;
	}

	.board_list > li {
		display: table;
		width: 100%;
		min-height: 60px;
		padding: 10px 0 10px;
		border-top: 1px solid #ccc;
	}

	.board_list > li.sticky {
		background-color: #f0fbff;
	}

    .sticky {
		background-color: #f0fbff;
    }

	.board_list > li > div {
		display: table-cell;
		padding: 0 20px;
		vertical-align: middle;
	}

	.board_list > li > div.b_subject {
		/*display:inline-block;*/
		width: 590px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}


	.board_list > li:first-child {
		border-width: 2px;
	}

	
	.notice .board_list .b_category {
		font-size: small;
	}

	.notice .board_list li.caption .b_date {
		width: 150px;
		font-size: medium;
		text-align: center;
	}
	.notice .board_list li .b_date {
		width: 150px;
		font-size: smaller;
		text-align: center;
	}

	.board_list > li > div {
		display: table-cell;
		padding: 0 20px;
		vertical-align: middle;
	}

	.board_list a:hover {
		text-decoration: underline;
	}

#pagination {
	text-align:center;
}

	#pagination > a {
		color: black;
		padding: 10px 16px;
		text-decoration: none;
		display: inline-block;
	}

	#pagination > a:hover {
		
		background-color: #FFCA68;
	}

	#pagination > a.active {
		color: white;
		background-color: orange;
	}

#search {
	margin: 10px;
	text-align:center;
}

#sub_title_content h2 {
	list-style: none;
	float: left;
    font-weight:normal;
    padding:0 10px;
}

#sub_title_content .category {
	list-style: none;
	float: left;
	margin: 0;
	padding-top: 3px;
	padding-left: 10px;
}

	#sub_title_content .category li {
		position: relative;
		float: left;
		padding: 0 10px;
		font-size: 16px;
		color: #fff;
		letter-spacing: -0.5px;
	}

	#sub_title_content .category li a:link, #sub_title_content .category li a:visited {
		color: white;
	}

	#sub_title_content .category li a.active {
		color: orange;
	}

	#sub_title_content .category li::before {
		position: absolute;
		display: block;
		content: '';
		top: 50%;
		width: 1px;
		height: 13px;
		margin-top: -5px;
		margin-right: -10px;
		background: #b4b4b4;
		left: 0;
	}

#content_body #bv_info {
	margin: 10px;
	border-bottom: 2px solid #ccc;
	width: 720px;
	overflow-wrap:break-word;
	-ms-word-wrap: break-word;
	white-space: normal;
} 

#content_body #bv_content {
	padding: 10px;
	line-height: 22px;
	display:inline-block;
	width: 720px;
	overflow-wrap:break-word;
	-ms-word-wrap: break-word;
	white-space: normal;
} 

#content_body #bv_content table {
	border-collapse:collapse;
	margin: 5px 0;
	table-layout:fixed;
} 

#content_body #bv_content td {
	border: 1px solid #ccc;
} 

#content_body #bv_bottom {
	text-align: center;
	padding: 10px;
	margin: 10px;
	border-top: 2px solid #ccc;
	height: 50px;
}

.media_list {
	overflow: hidden;
    padding-bottom: 28px;
    border-bottom: 2px solid #acacac;
}

	.media_list {
		margin: 20px 0;
		padding: 0;
	}

.media_list > li {
    float: left;
    /*margin-left: 18px;*/
    margin-bottom: 35px;
	list-style: none;
}

.media_list .b_subject {
    font-weight:bold;
	width: 240px;
	overflow:hidden;
	text-overflow: ellipsis;
}

.media_list .b_subject a {
	display:inline-block;
    font-weight:bold;
	width: 240px;
	overflow:hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


.media_list > li:first-child, .media_list > li:nth-child(3n+1) {
    margin-left: 4px !important;
}

.media_list .b_thumb {
    margin: 0 0 15px 0;
	border: 1px solid #eee;
}

.media_list .b_thumb > .thumb {
    display: block;
    overflow: hidden;
    width: 240px;
    height: 161px;
}

.multimedia .media_list .b_thumb > .thumb > img {
    width: auto;
    height: auto;
}

.media_list .b_info {
    overflow: hidden;
    line-height: 18px;
    text-align: center;
}

.media_list .b_info a:hover {
    text-decoration:underline;
}

#confirm_link_id {
	width: 100%;
	height: 900px;
}

.shop #content_body {
	width: 630px;
	margin:0 auto;
    padding:80px 20px 60px 20px!important;
}

.shop .shop_product_list {
	padding: 0;
    padding-bottom: 28px;
	overflow:hidden;
}


.shop_product {
	position: relative;
    display: inline-block;
    width: 136px;
    height: 150px;
	margin-bottom: 15px;
	float: left;
	overflow:hidden;
}

.shop_product img:hover {
	position: relative;
	left: -136px;
}

.shop_product_item {
	position: relative;
    display: inline-block;
    width: 136px;
    height: 150px;
    padding: 76px 0 0;
	margin-bottom: 15px;
    background: url(../img/ec_item.jpg) center 7px no-repeat,url(../img/ec_bg.jpg) 0 0 no-repeat;
    text-align: center;
    line-height: 1.1;
    vertical-align: top;
	float: left;
}

.pmang {
    background: url(../img/PtoE.png) center 7px no-repeat,url(../img/ec_bg.jpg) 0 0 no-repeat;
}

	.shop_product_list li{
		margin-left: 15px;
	}

	.shop_product_list li:first-child, .shop_product_list li:nth-child(4n+1) {
		margin-left: 0 !important;
	}

	.shop_product .product_name {
		font-weight:bold;
		letter-spacing: -1px;
	}

	.shop_product .product_price {
		font-size:.9em;
		padding: 5px 0;
	}

    .product_btn .btn_buy {
        display:inline-block;
        background: url(../img/ec_btn.gif) 0 0 no-repeat;
        width:38px;
        height:19px;
    }

#shop_caution {
	position:relative;
	font-size:small;
	border: 1px solid #ADD8FA;
	background-color:#F6FBFF;
	color:#6699CC;
	padding: 20px 20px;
	border-radius:5px;
}

#shop_caution h4 {
    position: absolute;
    top: 5px;
    left: -8px;
    width: 53px;
    height: 16px;
    background: url('../img/ttl_caution_list.gif') 0 0 no-repeat;
    z-index: 1;
}


.faq-header {
	font-size: 1.5em;
	border-bottom: 2px solid #ccc;
	padding: .5em 0;
}

.faq-c {
	border-bottom: 1px solid #ccc;
	padding: .7em 0;
}

.faq-c:hover {
	background-color:#f0fbff;
}

.faq-a {
	/*display:none;*/
	margin-left: 15px;
}

	.faq-a p {
		line-height: 2em;
		font-size: .95em;
	}

	.faq-a table {
		width : 100%;
		border-spacing: 0;
		border-collapse:collapse;
	}

	.faq-a table td {
		border: 1px solid #ccc;
		padding: 10px;
	}

.b {
	color:#2E74B5;
}

.faq-q {
	padding: 5px 0;
	cursor: pointer;
	font-weight: bold;
}

.faq-t {
	line-height: 1em;
	color: #aaa;
	font-family: sans-serif;
	float: left;
	font-weight: 700;
	padding-right: 0.3em;
	-webkit-transition: all 200ms;
	-moz-transition: all 200ms;
	transition: all 200ms;
}

.faq-o {
	transform: rotate(-45deg);
	transform-origin: 50% 50%;
	-ms-transform: rotate(-45deg);
	-ms-transform-origin: 50% 50%;
	-webkit-transform: rotate(-45deg);
	-webkit-transform-origin: 50% 50%;
	-webkit-transition: all 200ms;
	-moz-transition: all 200ms;
	transition: all 200ms;
}




.btn {
  display: inline-block;
  height: 30px;
  transition: opacity 0.3s;
  cursor: pointer;
  line-height: 30px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 0;
  border: 0px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.btn:hover {
  text-decoration: none;
  opacity: 0.8;
}

.btn.btn-primary {
  background-color: #4e91e4;
  color: #ffffff;
}

.btn-warning {
  color: #ffffff;
  background-color: #f0ad4e;
  border-color: #eea236;
}

.btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

.btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-info {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}

.btn-light {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}

.btn-dark {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}

.btn-link {
    font-weight: 400;
    color: #007bff;
    background-color: transparent;
}

.input {
  height: 30px;
  line-height: 24px;
  font-size: 14px;
  font-weight: normal;
  color: #546778;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 0px;
  padding-bottom: 0px;
  border: 1px solid;
  border-radius: 0;
  outline: 0px;
  background-color: #ffffff;
  vertical-align: top;
  box-sizing: border-box;
  display:inline-block;
}

.pt5 {
	padding-top: 5px;
}

.pb5 {
	padding-bottom: 5px;
}

.pt10 {
	padding-top: 10px;
}

.pb10 {
	padding-bottom: 10px;
}

.mb10 {
	margin-bottom: 10px;
}

.mt10 {
	margin-top: 10px;
}

.width100 {
	width: 100%;
}

#recent_post {
	width: 365px;
	float: left;
}

.recent_post {
	padding: 5px 0;
}

#twitter {
	width: 365px;
	margin-left: 375px;
	height: 700px;
}

#twitter_short {
    width: 365px;
	margin-left: 375px;
	height: 500px;
}

#video {
    width: 365px;
	margin-left: 375px;
    margin-bottom: 30px;
}

.icon-plus {
	float: right;
	padding: 7px 5px;
}

.recent_notice {
	margin-bottom: 30px;
}

.recent_pds {
	min-height:400px;
	overflow: hidden;
}

.recent_pds .recent_post {
	border: 0;
	padding-top: 5px;
	display: inline-block;
	width: 178px;
}

.recent_pds .recent_post .b_subject {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align:center;
}

.recent_title {
	padding: 3px 0;
	border-bottom: 2px solid #D8D8D8;
	margin-bottom: 3px;
}

.recent_notice .recent_post {
	border-bottom: 1px solid #D8D8D8;
}

.recent_notice .recent_post .b_subject{
	margin-bottom: 3px;
	padding-bottom: 3px;
	width: 370px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#copy_right {
	margin-top:50px;
	background-color:#383C3D;
	padding: 35px 0;
	text-align:center;
	color:#A4A4A4;
	line-height: -20px;
	font-size: .8em;
}

	#copy_right .cp_content {
		max-width: 1020px;
		margin:0 auto;
	}	

	#copy_right img {
		margin-right: 10px;
		vertical-align:middle;
	}

	
#copy_right #cp_nexon {
	margin: 0 auto;
	margin-top: 10px;
	padding-top: 10px;
	color: #A4A4A4;
	font-size:.85em;
	text-align:left;
	line-height: 1.5em;
}

	#copy_right #cp_nexon img {
	}

	#copy_right #cp_nexon a:link, #copy_right #cp_nexon a:visited {
		color: #A4A4A4;
	}

#error {
	margin: 100px auto;
	width: 700px;
	text-align: center;
	line-height: 2em;
	border: 2px solid #434343;
	border-radius: 10px;
	padding: 50px;
}

#sign_up_bg {
	width:780px;
	height:641px;
	background: url('../img/MAGIC_BG.png');
	position:relative;
}

	#sign_up_bg .su_btn {
		display:inline-block;
		width: 179px;
		height: 180px;
		overflow:hidden;
	}

	#sign_up_bg .su_top {
		position:absolute;
		left: 291px;
		top: 17px;
	}

	#sign_up_bg .su_left {
		position:absolute;
		left: 59px;
		top: 200px;
	}

	#sign_up_bg .su_right {
		position:absolute;
		left: 517px;
		top: 200px;
	}

	#sign_up_bg .su_bottom_left {
		position:absolute;
		left: 150px;
		top: 440px;
	}

    #sign_up_bg .su_bottom_right {
		position:absolute;
		left: 430px;
		top: 440px;
	}

	#sign_up_bg .su_btn img:hover {
		position: relative;
		left: -179px;
	}

#confirm_link_id {
	margin: 20px 0;
}


#new_world {
    position: relative;
    width: 780px;
    height: 1344px;
    background: url("../img/new_world_bg.png") no-repeat;
	background-position: center top; 
    margin-bottom: -30px;
}

    #new_world #youtube {
        position: absolute;
        top: 399px;
        left: 48px;
        width: 687px;
        height: 382px;
        border:0px solid red;
        color:red;
        background-color:black;
    }

    #new_world #btn_reserve {
        position: absolute;
        top: 1135px;
        left: 217px;
        width: 347px;
        height: 109px;
        border:0px solid red;
        color:red;
        background-color:black;
        background: url("../img/btn_reserve.png") no-repeat;
	    background-position: center top; 
        cursor:pointer;
    }

    #new_world #btn_reserve:hover {
        background-position: 0 -110px;
    }

    #new_world #channeling {
        position: absolute;
        top: 1160px;
        left: 83px;
        width: 614px;
        height: 62px;
        background-color: rgba(107, 142, 31, .7);
        padding: 6px;
    }



/* Header */
#header {position:relative;height:123px;max-width:1020px;margin:0 auto;text-align:center;}
#header .inner {position:absolute;top:0;z-index:30;}
#header .logo {position:absolute;left:50%;margin-left:-127px;z-index:50;}
#header .logo a {width:253px;height:87px;}
#header .nav {height:130px; width:1020px;}
#header .gnb {/*overflow:hidden;*/width:1020px;height:80px;margin:-120px auto 0;padding-top:30px;}
#header .gnb .gnb_sub {margin-top:-15px; opacity:0; display:none;}
#header .gnb .gnb_sub li a {display:inline-block;padding:8px;color:#80858e}
#header .gnb .gnb_sub li a:hover {color:#fff}
#header .gnb > li a {display:inline-block; width:190px; height: 40px; padding:30px 0;}
#header .gnb > li {position:relative;float:left;width:193px;text-align:center;}
#header .gnb > li > a {display:block;background-position:0 -10px;cursor:default;}
.wraper  .background {position:absolute; background-color:rgba(0, 0, 0, .85); height:0px;z-index:29;}
.wraper  .background.on {height:280px;}

#header .gnb > li.info > a {background-image:url(../img/info.png)}
#header .gnb > li.library > a {background-image:url(../img/lib.png)}
#header .gnb > li.support > a {background-image:url(../img/support.png)}
#header .gnb > li.guide > a {background-image:url(../img/guide.png)}

#header .gnb > li.support {margin-left:248px;}
#header .nav.on {height:280px;}
#header .nav.on .gnb {height:100%;margin:-120px auto;}
#header .nav.on .gnb > li {height:100%}
#header .nav.on .gnb > li > a {display:block;background-position:0 -90px}
#header .nav.on .gnb_sub {margin-top:5px; opacity:1; display:block;}
#header .nav.on .gnb_sub li {font-size:16px;}
#header .nav,
#header .gnb,
#header .gnb > li,
.wraper  .background/*,
#header .gnb > li > a*/ {
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
#header .gnb_sub,
#header .gnb_sub > li,
.wraper  .background/*,
#header .gnb_sub > li > a*/ {
-webkit-transition: all 250ms ease-out;
-moz-transition: all 250ms ease-out;
transition: all 250ms ease-out;
}


#side #btn_noah {
    width:213px;
    height:253px;
    background:url(../img/reserve/noah/sub_banner.png) no-repeat 0 0;
}

#side #btn_noah_after {
    width:213px;
    height:253px;
    background:url(../img/reserve/noah/sub_banner_after.png) no-repeat 0 0;
}

#side #btn_noah:hover, #side #btn_noah_after:hover {
    background-position-y:-253px;
}