@charset "UTF-8";
@import url('char_thumb.css');

@font-face {
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: 400;
    src: url('/Static/font/noto-sans-jp-v24-japanese-regular.eot'); /* IE9 Compat Modes */
    src: url('/Static/font/noto-sans-jp-v24-japanese-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/Static/font/noto-sans-jp-v24-japanese-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('/Static/font/noto-sans-jp-v24-japanese-regular.woff') format('woff'), /* Modern Browsers */
    url('/Static/font/noto-sans-jp-v24-japanese-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/Static/font/noto-sans-jp-v24-japanese-regular.svg#NotoSansJP') format('svg'); /* Legacy iOS */
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

body>div,
body>div * {
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden],
template {
    display: none;
}

a {
    background-color: transparent;
}

a:active,
a:hover {
    outline: 0;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b,
strong {
    font-weight: 700;
}

dfn {
    font-style: italic;
}

h1 {
    font-size: 2em;
    margin: .67em 0;
}

mark {
    background: #ff0;
    color: #000;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -.5em;
}

sub {
    bottom: -.25em;
}

img {
    border: 0;
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 1em 40px;
}

hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

pre {
    overflow: auto;
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

button {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled],
html input[disabled] {
    cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

input {
    line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

input[type="search"] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em;
}

legend {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
}

optgroup {
    font-weight: 700;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td,
th {
    padding: 0;
}

::-moz-selection {
    background: #ccc;
    color: #fff;
    text-shadow: none;
}

::selection {
    background: #ccc;
    color: #fff;
    text-shadow: none;
}

::-moz-selection {
    background: #ccc;
    color: #fff;
    text-shadow: none;
}

::-webkit-selection {
    background: #ccc;
    color: #fff;
    text-shadow: none;
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder,
textarea:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
    color: transparent;
}

input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder {
    color: transparent;
}

/* RESET DEFAULT ELEMENTS STYLE */
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;
    word-break: keep-all;
}

dl,
ul,
ol,
menu,
li {
    list-style: none;
}

address,
caption,
cite,
code,
dfn,
em,
var {
    font-style: normal;
    font-weight: normal;
}

img,
fieldset,
iframe {
    border: 0 none;
}

img {
    vertical-align: top;
}

input,
select,
textarea,
button {
    vertical-align: middle;
}

textarea {
    resize: none;
}

input::-ms-clear {
    display: none;
}

button {
    border: 0 none;
    background-color: transparent;
    cursor: pointer;
}

button:focus,
a:focus {
    outline: 0;
}

button,
input[type='button'],
input[type='submit'],
input[type='reset'],
input[type='file'] {
    border-radius: 0;
    -webkit-appearance: button;
}

input[type="image"],
input[type="text"],
input[type="submit"],
input[type="password"],
input[type='search'] {
    border-radius: 0;
    -webkit-appearance: none;
}

input:checked[type='checkbox'] {
    -webkit-appearance: checkbox;
    background-color: transparent;
}

input[type='search']::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

input[type="text"]:focus {
    outline: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
}

caption,
legend {
    position: absolute;
    top: -9999px;
    left: -9999px;
    font-size: 0;
    line-height: 0;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    background-color: transparent;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
th,
td,
input,
select,
textarea,
button {
    font-family: 'Noto Sans JP', sans-serif, '돋움', Dotum;
    font-size: 16px;
    color: #52545e;
    line-height: 150%;
    letter-spacing: -0.2px;
}

hr {
    display: none;
}

address,
caption,
cite,
code,
dfn,
em,
var {
    font-style: normal;
    font-weight: normal;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
main {
    display: block;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

body {
    width: 100%;
    min-width: 1240px;
    background: #fff;
}

input::-webkit-input-placeholder {
    color: #a5a8b2;
}

input:-ms-input-placeholder {
    color: #a5a8b2;
}

textarea::-webkit-input-placeholder {
    color: #a5a8b2;
}

textarea:-ms-input-placeholder {
    color: #a5a8b2;
}

.overlay {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 8;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.7;
    filter: alpha(opacity=70);
}


.browserupgrade {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #ccc;
    padding: 20px 0;
    background-color: #efefef;
}

/* Scrollbar */
.scroll-wrapper {
    overflow: hidden !important;
    padding: 0 !important;
    position: relative;
}

.scroll-wrapper>.scroll-content {
    border: none !important;
    -webkit-box-sizing: content-box !important;
    box-sizing: content-box !important;
    height: auto;
    left: 0;
    margin: 0;
    max-height: none;
    max-width: none !important;
    overflow-y: scroll !important;
    overflow-x: hidden;
    padding: 0;
    position: relative !important;
    top: 0;
    width: auto !important;
}

.scroll-wrapper>.scroll-content::-webkit-scrollbar {
    height: 0;
    width: 0;
}

.scroll-element {
    display: none;
}

.scroll-element,
.scroll-element div {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

.scroll-element.scroll-x.scroll-scrollx_visible,
.scroll-element.scroll-y.scroll-scrolly_visible {
    display: block;
}

.scroll-element .scroll-arrow,
.scroll-element .scroll-bar {
    cursor: default;
}

.scroll-textarea {
    border: 1px solid #ccc;
    border-top-color: #999;
}

.scroll-textarea>.scroll-content {
    overflow: hidden !important;
}

.scroll-textarea>.scroll-content>textarea {
    border: none !important;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100% !important;
    margin: 0;
    max-height: none !important;
    max-width: none !important;
    overflow: scroll !important;
    outline: 0;
    padding: 2px;
    position: relative !important;
    top: 0;
    width: 100% !important;
}

.scroll-textarea>.scroll-content>textarea::-webkit-scrollbar {
    height: 0;
    width: 0;
}

.scrollbar-macosx>.scroll-element,
.scrollbar-macosx>.scroll-element div {
    background: 0 0;
    border: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 10;
}

.scrollbar-macosx>.scroll-element div {
    display: block;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}

.scrollbar-macosx>.scroll-element .scroll-element_track {
    left: -8px;
    width: 6px;
    height: calc(170px - 4px);
    border-radius: 2px;
    background-color: #000;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
    filter: alpha(opacity=25);
    opacity: 0.25;
}

.scrollbar-macosx>.scroll-element .scroll-bar {
    display: block;
    border-radius: 5px;
    -webkit-transition: opacity .2s linear;
    -o-transition: opacity .2s linear;
    transition: opacity .2s linear;
}

.scrollbar-macosx:hover>.scroll-element .scroll-bar,
.scrollbar-macosx>.scroll-element.scroll-draggable .scroll-bar {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

.scrollbar-macosx>.scroll-element.scroll-x {
    bottom: 0;
    height: 0;
    left: 0;
    min-width: 100%;
    overflow: visible;
    width: 100%;
}

.scrollbar-macosx>.scroll-element.scroll-y {
    height: 100%;
    min-height: 100%;
    right: 0;
    top: 0;
    width: 0;
}

.scrollbar-macosx>.scroll-element.scroll-x .scroll-bar {
    height: 7px;
    min-width: 10px;
    top: -9px;
}

.scrollbar-macosx>.scroll-element.scroll-y .scroll-bar {
    left: -10px;
    min-height: 10px;
    width: 10px;
}

.scrollbar-macosx>.scroll-element.scroll-x .scroll-element_outer {
    left: 2px;
}

.scrollbar-macosx>.scroll-element.scroll-x .scroll-element_size {
    left: -4px;
}

.scrollbar-macosx>.scroll-element.scroll-y .scroll-element_outer {
    top: 2px;
}

.scrollbar-macosx>.scroll-element.scroll-y .scroll-element_size {
    top: -4px;
}

.scrollbar-macosx>.scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
    left: -11px;
}

.scrollbar-macosx>.scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {
    top: -11px;
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    .scrollbar-macosx>.scroll-element .scroll-element_track {
        left: -8px;
        width: 6px;
        height: calc(170px - 4px);
        border-radius: 2px;
        background-color: #000;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
        filter: alpha(opacity=25);
        opacity: 0.25;
    }

    #wrap .charView_wrap section article .story .inner p span {
        max-height: 150px;
        box-sizing: border-box;
        padding-bottom: 20px;
    }
}

/*firefox only*/
@-moz-document url-prefix() {
    .scrollbar-macosx>.scroll-element .scroll-element_track {
        left: -8px;
        width: 6px;
        height: calc(140px - 4px);
        border-radius: 2px;
        background-color: #000;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
        filter: alpha(opacity=25);
        opacity: 0.25;
    }

    #wrap .charView_wrap section article .story .inner p span {
        max-height: 150px !important;
        box-sizing: border-box;
        padding-bottom: 20px;
    }
}

footer {
    position: relative;
    width: 100%;
    height: 120px;
    overflow: hidden;
    text-indent: -5000px;
    font-size: 0;
    line-height: 0;
    zoom: 1;
    background-color: #24232e;
}

 footer:before {content:'';display:block;position:absolute;top:0;left:50%;margin-left:-683px;width:1366px;height:120px;background: url('../image/character/common/foot.png') center center no-repeat;}

/* page Transition */
body.hide {
    opacity: 0;
}

body.hide #wrap .charView_wrap section article .image:before {
    transform: scale(1.1);
}

body.show {
    opacity: 1;
    transition: opacity 0.6s ease;
}

body.show #wrap .charView_wrap section article .image h3,
body.show #wrap .charView_wrap section article .image:before {
    opacity: 1;
    transform: translateX(0px);
}

body.out {
    opacity: 0;
    transition: opacity 0.3s 0.2s ease;
}

/* Character List Page */
html {
    background-color: #24232e;
}

body {
    width: 100%;
    max-width: 1920px;
    min-width: 1400px;
    margin: 0 auto;
    box-shadow: 0 0 40px black;
}

body.c0,
body.c1,
body.c2,
body.c3,
body.c4,
body.c5,
body.c6,
body.c7,
body.c8,
body.c9,
body.c10,
body.c11,
body.c12,
body.c13,
body.c14 {
    transition: background 0.8s ease;
}

body.c0 {
    background-color: #f1eff0;
}

body.c1 {
    background-color: #a72f38;
}

body.c2 {
    background-color: #913ab6;
}

body.c3 {
    background-color: #a5cc42;
}

body.c4 {
    background-color: #71777d;
}

body.c5 {
    background-color: #ef98ac;
}

body.c6 {
    background-color: #61c7da;
}

body.c7 {
    background-color: #e37f1c;
}

body.c8 {
    background-color: #a82d36;
}

body.c9 {
    background-color: #7f5fd4;
}

body.c10 {
    background-color: #2567c6;
}

body.c11 {
    background-color: #f5c32c;
}

body.c12 {
    background-color: #59c7a9;
}

body.c13 {
    background-color: #de4c78;
}

body.c14 {
    background-color: #4048b1;
}

body.c15 {
    background-color: #429c70;
}

#wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Character View Page */
#wrap .charView_wrap header {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4;
    width: 226px;
    height: 100%;
    background-color: #fff;
    box-shadow: 0 0 7px rgba(34, 34, 38, 0.25);
}

#wrap .charView_wrap header h1 a {
    display: block;
    width: 100%;
    height: 108px;
    overflow: hidden;
    text-indent: -5000px;
    background: url('../image/character/common/logo.png') center center no-repeat;
}

#wrap .charView_wrap header ul li {
    display: table;
    vertical-align: middle;
    width: 100%;
    height: 59px;
    border-bottom: 1px solid #fff;
}

#wrap .charView_wrap header ul li a {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    box-sizing: border-box;
    padding-right: 25px;
    color: #52545e;
    text-align: right;
    overflow: hidden;
}

#wrap .charView_wrap header ul li a,
#wrap .charView_wrap header ul li a:before {
    width: 100%;
    height: 59px;
    background-image: url('../image/character/common/char_nav.png');
    background-repeat: no-repeat;
}

#wrap .charView_wrap header ul li a:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    opacity: 0;
    transition: all 0.3s ease;
}

#wrap .charView_wrap header ul li a span {
    display: block;
    position: relative;
    z-index: 2;
    padding-top: 3px;
}

#wrap .charView_wrap header ul li a:hover {
    color: #31323a;
    text-decoration: none;
}

#wrap .charView_wrap header ul li a:hover:before {
    opacity: 1;
}

#wrap .charView_wrap header ul li a.active {
    color: #fff;
    text-shadow: 0 1px 4px rgba(34, 34, 38, 0.3);
}

#wrap .charView_wrap header ul li a.active:before {
    display: none;
}

#wrap .charView_wrap header ul li a[href*="Elsword"] {
    background-position: 0 0;
}

#wrap .charView_wrap header ul li a[href*="Elsword"]:before {
    background-position: -250px 0;
}

#wrap .charView_wrap header ul li a.active[href*="Elsword"] {
    background-position: -500px 0;
}

#wrap .charView_wrap header ul li a[href*="Aisha"] {
    background-position: 0 -60px;
}

#wrap .charView_wrap header ul li a[href*="Aisha"]:before {
    background-position: -250px -60px;
}

#wrap .charView_wrap header ul li a.active[href*="Aisha"] {
    background-position: -500px -60px;
}

#wrap .charView_wrap header ul li a[href*="Rena"] {
    background-position: 0 -120px;
}

#wrap .charView_wrap header ul li a[href*="Rena"]:before {
    background-position: -250px -120px;
}

#wrap .charView_wrap header ul li a.active[href*="Rena"] {
    background-position: -500px -120px;
}

#wrap .charView_wrap header ul li a[href*="Raven"] {
    background-position: 0 -180px;
}

#wrap .charView_wrap header ul li a[href*="Raven"]:before {
    background-position: -250px -180px;
}

#wrap .charView_wrap header ul li a.active[href*="Raven"] {
    background-position: -500px -180px;
}

#wrap .charView_wrap header ul li a[href*="Eve"] {
    background-position: 0 -240px;
}

#wrap .charView_wrap header ul li a[href*="Eve"]:before {
    background-position: -250px -240px;
}

#wrap .charView_wrap header ul li a.active[href*="Eve"] {
    background-position: -500px -240px;
}

#wrap .charView_wrap header ul li a[href*="Chung"] {
    background-position: 0 -300px;
}

#wrap .charView_wrap header ul li a[href*="Chung"]:before {
    background-position: -250px -300px;
}

#wrap .charView_wrap header ul li a.active[href*="Chung"] {
    background-position: -500px -300px;
}

#wrap .charView_wrap header ul li a[href*="Ara"] {
    background-position: 0 -360px;
}

#wrap .charView_wrap header ul li a[href*="Ara"]:before {
    background-position: -250px -360px;
}

#wrap .charView_wrap header ul li a.active[href*="Ara"] {
    background-position: -500px -360px;
}

#wrap .charView_wrap header ul li a[href*="Elesis"] {
    background-position: 0 -420px;
}

#wrap .charView_wrap header ul li a[href*="Elesis"]:before {
    background-position: -250px -420px;
}

#wrap .charView_wrap header ul li a.active[href*="Elesis"] {
    background-position: -500px -420px;
}

#wrap .charView_wrap header ul li a[href*="Add"] {
    background-position: 0 -480px;
}

#wrap .charView_wrap header ul li a[href*="Add"]:before {
    background-position: -250px -480px;
}

#wrap .charView_wrap header ul li a.active[href*="Add"] {
    background-position: -500px -480px;
}

#wrap .charView_wrap header ul li a[href*="Luciel"] {
    background-position: 0 -540px;
}

#wrap .charView_wrap header ul li a[href*="Luciel"]:before {
    background-position: -250px -540px;
}

#wrap .charView_wrap header ul li a.active[href*="Luciel"] {
    background-position: -500px -540px;
}

#wrap .charView_wrap header ul li a[href*="Rose"] {
    background-position: 0 -600px;
}

#wrap .charView_wrap header ul li a[href*="Rose"]:before {
    background-position: -250px -600px;
}

#wrap .charView_wrap header ul li a.active[href*="Rose"] {
    background-position: -500px -600px;
}

#wrap .charView_wrap header ul li a[href*="Ain"] {
    background-position: 0 -660px;
}

#wrap .charView_wrap header ul li a[href*="Ain"]:before {
    background-position: -250px -660px;
}

#wrap .charView_wrap header ul li a.active[href*="Ain"] {
    background-position: -500px -660px;
}

#wrap .charView_wrap header ul li a[href*="Laby"] {
    background-position: 0 -720px;
}

#wrap .charView_wrap header ul li a[href*="Laby"]:before {
    background-position: -250px -720px;
}

#wrap .charView_wrap header ul li a.active[href*="Laby"] {
    background-position: -500px -720px;
}

#wrap .charView_wrap header ul li a[href*="Noah"] {
    background-position: 0 -780px;
}

#wrap .charView_wrap header ul li a[href*="Noah"]:before {
    background-position: -250px -780px;
}

#wrap .charView_wrap header ul li a.active[href*="Noah"] {
    background-position: -500px -780px;
}

#wrap .charView_wrap header ul li a[href*="Lithia"],
#wrap .charView_wrap header ul li a[href*="Lithia"]:before {
    background: url('../image/character/common/char_nav_Lithia.png') no-repeat;
}

#wrap .charView_wrap header ul li a[href*="Lithia"]:before {
    background-position-x: -250px;
}

#wrap .charView_wrap header ul li a.active[href*="Lithia"] {
    background-position-x: -500px;
}

#wrap .charView_wrap section aside {
    position: relative;
    z-index: 3;
    width: calc(100% - 226px);
    width: 93.5%;
    height: 761px;
    font-size: 0;
    line-height: 0;
    zoom: 1;
    text-align: right;
    color: #fff;
}

#wrap .charView_wrap section aside>* {
    display: block;
    box-sizing: border-box;
}

#wrap .charView_wrap section aside h2 {
    font-size: 42px;
    color: #fff;
    line-height: 48px;
    letter-spacing: -0.7px;
    padding: 140px 8px 0 0;
}

#wrap .charView_wrap section aside h2>*,
#wrap .charView_wrap section aside h2 sup span {
    display: inline-block;
    vertical-align: top;
}

#wrap .charView_wrap section aside h2 sup {
    font-weight: 400;
    letter-spacing: -0.4px;
    padding: 0 32px 0 0;
    margin: 0 16px 0 0;
    font-size: 0;
    line-height: 0;
    zoom: 1;
    background: url('../image/character/common/dot_w.png') right 19px no-repeat;
}

#wrap .charView_wrap section aside h2 sup span {
    font-size: 18px;
    line-height: 44px;
}

#wrap .charView_wrap section aside h2 sup span.txt_dot {
    width: 22px;
    color: transparent;
    background: url('../image/character/common/dot.png') 11px 18px no-repeat;
}

#wrap .charView_wrap section aside>p {
    padding: 20px 8px 30px 0;
    font-size: 17px;
    line-height: 26px;
    opacity: 0.8;
}

#wrap .charView_wrap section aside .systemView {
    height: 95px;
    padding-right: 5px;
}

#wrap .charView_wrap section aside .systemView a {
    position: relative;
    display: inline-block;
    height: 40px;
    padding: 0 43px 0 24px;
    font-weight: 700;
    font-size: 17px;
    color: #31323a;
    line-height: 42px;
    text-align: left;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 5px 10px #22222650;
    transition: all 0.3s ease;
}

#wrap .charView_wrap section aside .systemView a:before,
#wrap .charView_wrap section aside .systemView a:after {
    content: '';
    display: block;
    position: absolute;
    right: 14px;
    top: 11px;
    width: 18px;
    height: 18px;
    background-position: center center;
    background-repeat: no-repeat;
    transition: all 0.3s ease;
}

#wrap .charView_wrap section aside .systemView a:before {
    background-image: url('../image/character/common/arr_right.png');
    opacity: 1;
}

#wrap .charView_wrap section aside .systemView a:after {
    background-image: url('../image/character/common/arr_right_white.png');
    opacity: 0;
}

#wrap .charView_wrap section aside .systemView a:hover {
    color: #fff;
    text-decoration: none;
}

#wrap .charView_wrap section aside .systemView a:hover:before {
    opacity: 0;
}

#wrap .charView_wrap section aside .systemView a:hover:after {
    opacity: 1;
}

#wrap .charView_wrap section aside .classBtn ul {
    position: absolute;
    top: 31px;
    left: 270px;
}

#wrap .charView_wrap section aside .classBtn ul li {
    display: table;
    vertical-align: middle;
    width: 84px;
    height: 84px;
    margin-top: 9px;
}

#wrap .charView_wrap section aside .classBtn ul li button {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    font-size: 14px;
    color: #fff;
    outline: none;
    border: none;
    text-align: center;
    line-height: 19px;
    border-radius: 50%;
    box-shadow: 0 5px 8px rgba(34, 34, 38, 0.15);
    transition: all 0.3s ease;
}

#wrap .charView_wrap section aside .classBtn ul li button:hover,
#wrap .charView_wrap section aside .classBtn ul li button.active {
    text-decoration: none;
}

#wrap .charView_wrap section aside .classBtn ul li button.active,
#wrap .charView_wrap section aside .classBtn ul li button.active:hover {
    font-weight: 700;
    background-color: #f1f0f0 !important;
}

#wrap .charView_wrap section aside .lineTab {
    padding-right: 3px;
}

#wrap .charView_wrap section aside .lineTab dl {
    display: inline-block;
    vertical-align: top;
    width: 66px;
    font-size: 15px;
    line-height: 23px;
    text-align: center;
    margin-left: 9px;
}

#wrap .charView_wrap section aside .lineTab dl dt {
    height: 31px;
    background: url('../image/character/common/arr_btm.png') center bottom no-repeat;
}

#wrap .charView_wrap section aside .lineTab dl dd {
    width: 66px;
    padding-top: 14px;
}

#wrap .charView_wrap section aside .lineTab dl dd a {
    position: relative;
    display: table;
    width: 66px;
    height: 58px;
    box-sizing: border-box;
}

#wrap .charView_wrap section aside .lineTab dl dd a:hover {
    text-decoration: none;
}

#wrap .charView_wrap section aside .lineTab dl dd a>span {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -29px;
    z-index: 1;
    display: block;
    width: 58px;
    height: 58px;
    overflow: hidden;
    text-indent: -5000px;
    box-sizing: border-box;
    opacity: 1;
    background-color: #24232e;
    background-size: 50px 50px;
    background-position: center center;
    border-width: 4px;
    border-style: solid;
    border-radius: 50%;
    box-shadow: 0 4px 8px #22222650;
    transition: all 0.3s ease;
}

/*#wrap .charView_wrap section aside .lineTab dl dd a:after {
    display: table-cell;
    vertical-align: middle;
    position: relative;
    z-index: 2;
    width: 66px;
    height: 58px;
    font-size: 13px;
    color: #fff;
    line-height: 17px;
    text-align: center;
    white-space: pre;
    opacity: 0;
    transition: all 0.3s ease;
}*/

#wrap .charView_wrap section aside .lineTab dl dd a:after {
    display: flex; 
    align-items: center; 
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: auto;
    min-width: 66px;
    height: 58px;
    font-size: 13px;
    color: #fff;
    line-height: 17px;
    text-align: center;
    white-space: pre;
    opacity: 0;
    transition: all 0.3s ease;
}

#wrap .charView_wrap section aside .lineTab dl dd a:hover span {
    opacity: 0.2;
}

#wrap .charView_wrap section aside .lineTab dl dd a:hover:after {
    opacity: 1;
}

#wrap .charView_wrap section aside .lineTab dl dd a.active span {
    border-color: #fff !important;
}

#wrap .charView_wrap section aside .lineTab dl dd>span.cur {
    display: block;
    width: 100%;
    height: 20px;
    color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
}

#wrap .charView_wrap section article .image h3.active,
#wrap .charView_wrap section article .image:before {
    opacity: 1;
    transform: translateX(0px);
}

#wrap .charView_wrap section article .image h3 {
    position: absolute;
    top: 0;
    left: 5%;
    z-index: 1;
    width: 90%;
    height: 762px;
    overflow: hidden;
    text-indent: -5000px;
    background-position: right 93px;
    background-repeat: no-repeat;
    opacity: 0;
    transform: translateX(-100px);
    transition: all 0.6s 0.2s ease;
}

#wrap .charView_wrap section article .image>div {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 1114px;
    opacity: 0;
    transform: scale(1.1);
    background-position: center top;
    background-repeat: no-repeat;
    transition: all 0.6s ease;
}

#wrap .charView_wrap section article .image>div.active {
    opacity: 1;
    transform: scale(1);
}

#wrap .charView_wrap section article .story {
    position: relative;
    z-index: 2;
    height: 353px;
    background-color: rgba(0, 0, 0, 0.5);
}

#wrap .charView_wrap section article .story:before {
    content: '';
    display: block;
    position: absolute;
    top: 50px;
    left: 72.5%;
    z-index: 1;
    width: 412px;
    height: 97px;
}

#wrap .charView_wrap section article .story .inner {
    display: block;
    position: relative;
    z-index: 2;
    width: 92.8%;
    box-sizing: border-box;
    padding: 60px 0 0 calc(226px + 5.4%);
}

#wrap .charView_wrap section article .story .inner h3 {
    height: 62px;
    font-size: 30px;
    color: #fff;
    line-height: 40px;
    padding-left: 45px;
    background: url('../image/character/common/icon_story.png') 0 6px no-repeat;
}

#wrap .charView_wrap section article .story .inner h3:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 34px;
    background: url('../image/character/common/dot_w.png') right 13px no-repeat;
}

#wrap .charView_wrap section article .story .inner p {
    position: relative;
}

#wrap .charView_wrap section article .story .inner p span {
    display: block;
    width: 100%;
    max-height: 170px;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    padding-right: 50px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 24px;
}

#wrap .charView_wrap section article .skill {
    position: relative;
    z-index: 2;
    background-position: center top;
    background-repeat: no-repeat;
}

#wrap .charView_wrap section article .skill:before {
    content: '';
    display: block;
    position: absolute;
    top: 62px;
    left: 76.3%;
    z-index: 1;
    width: 341px;
    height: 97px;
}

#wrap .charView_wrap section article .skill .inner {
    width: 92.8%;
    box-sizing: border-box;
    padding: 63px 0 100px calc(226px + 5.4%);
}

#wrap .charView_wrap section article .skill .inner h3 {
    height: 74px;
    font-size: 30px;
    color: #fff;
    line-height: 40px;
    padding-left: 45px;
    margin-left: 0.2%;
    background: url('../image/character/common/icon_skill.png') 10px 7px no-repeat;
}

#wrap .charView_wrap section article .skill .inner h3:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 34px;
    background: url('../image/character/common/dot_w.png') right 13px no-repeat;
}

#wrap .charView_wrap section article .skill .inner ul {
    position: relative;
    z-index: 2;
    display: table;
    vertical-align: top;
    width: 86.8%;
    box-sizing: border-box;
}

#wrap .charView_wrap section article .skill .inner ul li {
    float: left;
    vertical-align: top;
    width: 25%;
    box-sizing: border-box;
    padding: 0 5px;
}

#wrap .charView_wrap section article .skill .inner ul li a {
    position: relative;
    display: block;
    width: 100%;
}

#wrap .charView_wrap section article .skill .inner ul li a:before {
    content: '';
    display: block;
    vertical-align: top;
    width: 100%;
    padding-bottom: 56.25%;
    border-radius: 4px;
    box-shadow: 3px 0 7px rgba(34, 34, 38, 0.3);
    background-position: center center;
    background-repeat: no-repeat;
}

#wrap .charView_wrap section article .skill .inner ul li a:after {
    content: '';
    display: block;
    vertical-align: top;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-bottom: 56.25%;
    border-radius: 4px;
    background: url('../image/character/common/skillThumb_hover.png') center center no-repeat;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#wrap .charView_wrap section article .skill .inner ul li a strong {
    display: block;
    font-weight: 400;
    font-size: 16px;
    color: #fff;
    text-align: center;
    padding-top: 18px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

#wrap .charView_wrap section article .skill .inner ul li a:hover {
    text-decoration: none;
}

#wrap .charView_wrap section article .skill .inner ul li a:hover:after {
    opacity: 1;
}

#wrap .charView_wrap section article .skill .inner ul li a:hover strong {
    opacity: 1;
}

#wrap .charView_wrap .btn_paging {
    position: absolute;
    top: 700px;
    left: 50%;
    z-index: 5;
    display: table;
    vertical-align: middle;
    width: 154px;
    height: 34px;
    background: #fff url('../image/character/common/dot_line_v_s.png') center center no-repeat;
    border-radius: 17px;
    box-shadow: 5px 0 10px rgba(34, 34, 38, 0.25);
}

#wrap .charView_wrap .btn_paging span {
    opacity: 0.6;
}

#wrap .charView_wrap .btn_paging a {
    transition: color 0.3s ease;
}

#wrap .charView_wrap .btn_paging a:before,
#wrap .charView_wrap .btn_paging a:after {
    transition: background 0.3s ease;
}

#wrap .charView_wrap .btn_paging a,
#wrap .charView_wrap .btn_paging span {
    display: table-cell;
    vertical-align: middle;
    width: 50%;
    box-sizing: border-box;
    font-weight: 700;
    font-size: 15px;
    color: #31323a;
}

#wrap .charView_wrap .btn_paging a:before,
#wrap .charView_wrap .btn_paging span:before,
#wrap .charView_wrap .btn_paging a:after,
#wrap .charView_wrap .btn_paging span:after {
    display: inline-block;
    vertical-align: middle;
    width: 13px;
    height: 13px;
    margin-top: -2px;
    border-radius: 7px;
    background-color: #413f55;
    background-image: url('../image/character/common/pg_arrow.png');
    background-repeat: no-repeat;
}

#wrap .charView_wrap .btn_paging .prevPaging {
    padding-left: 12px;
}

#wrap .charView_wrap .btn_paging .prevPaging:before {
    content: '';
    background-position: 3px center;
    margin-right: 7px;
}

#wrap .charView_wrap .btn_paging .nextPaging {
    padding-right: 12px;
    text-align: right;
}

#wrap .charView_wrap .btn_paging .nextPaging:after {
    content: '';
    transform: rotate(180deg);
    background-position: 3px center;
    margin-left: 7px;
}

#wrap .charView_wrap .btn_paging a:hover {
    text-decoration: none;
}



/* Character View Skin Change */
/********** 엘소드 **********/
#wrap.elsword .charView_wrap .btn_paging a:hover {
    color: #c21622;
}

#wrap.elsword .charView_wrap .btn_paging a:hover:before,
#wrap.elsword .charView_wrap .btn_paging a:hover:after {
    background-color: #c21622;
}

#wrap.elsword .scrollbar-macosx>.scroll-element .scroll-bar {
    background-color: #a72f38;
}

#wrap.elsword {
    background-color: #a72f38;
}

#wrap.elsword .charView_wrap section aside .systemView a:hover {
    background-color: #c73741;
}

#wrap.elsword .charView_wrap section aside .classBtn ul li button {
    background-color: #da4347;
}

#wrap.elsword .charView_wrap section aside .classBtn ul li button:hover {
    background-color: #f45a5e;
}

#wrap.elsword .charView_wrap section aside .classBtn ul li button.active {
    color: #c21622;
}

#wrap.elsword .charView_wrap section aside .lineTab dl dd a>span {
    border-color: #db454f;
}

#wrap.elsword .charView_wrap section aside .lineTab dl.line_1 dd a.job_1:after {
    content: 'ソード\Aナイト';
}

#wrap.elsword .charView_wrap section aside .lineTab dl.line_1 dd a.job_2:after {
    content: 'ロード\Aナイト';
}

#wrap.elsword .charView_wrap section aside .lineTab dl.line_1 dd a.job_3:after {
    content: 'ナイト\Aエンペラー';
}

#wrap.elsword .charView_wrap section aside .lineTab dl.line_2 dd a.job_1:after {
    content: 'マジック\Aナイト';
}

#wrap.elsword .charView_wrap section aside .lineTab dl.line_2 dd a.job_2:after {
    content: 'ルーン\Aスレイヤー';
}

#wrap.elsword .charView_wrap section aside .lineTab dl.line_2 dd a.job_3:after {
    content: 'ルーン\Aマスター';
}

#wrap.elsword .charView_wrap section aside .lineTab dl.line_3 dd a.job_1:after {
    content: 'シース\Aナイト';
}

#wrap.elsword .charView_wrap section aside .lineTab dl.line_3 dd a.job_2:after {
    content: 'インフィニティ\Aソード';
}

#wrap.elsword .charView_wrap section aside .lineTab dl.line_3 dd a.job_3:after {
    content: 'イモータル';
}

#wrap.elsword .charView_wrap section aside .lineTab dl.line_4 dd a.job_1:after {
    content: 'ルート\Aナイト';
}

#wrap.elsword .charView_wrap section aside .lineTab dl.line_4 dd a.job_2:after {
    content: 'セイクリッド\Aテンプラー';
}

#wrap.elsword .charView_wrap section aside .lineTab dl.line_4 dd a.job_3:after {
    content: 'ジェネシス';
}

#wrap.elsword .charView_wrap section aside .lineTab dl dd>span.cur {
    background-image: url('../image/character/elsword/view/dot_h.png');
}

#wrap.elsword .charView_wrap section article .story:before {
    background-image: url('../image/character/elsword/view/typo_story.png');
}

#wrap.elsword .charView_wrap section article .skill {
    background-image: url('../image/character/elsword/view/bg_skill.png');
}

#wrap.elsword .charView_wrap section article .skill:before {
    background-image: url('../image/character/elsword/view/typo_skill.png');
}

#wrap.elsword .charView_wrap section article .skill .inner ul li.skill_1 a:before {
    background-image: url('../image/character/elsword/view/thumb_skill_2.jpg');
}

#wrap.elsword .charView_wrap section article .skill .inner ul li.skill_2 a:before {
    background-image: url('../image/character/elsword/view/thumb_skill_3.jpg');
}

#wrap.elsword .charView_wrap section article .skill .inner ul li.skill_3 a:before {
    background-image: url('../image/character/elsword/view/thumb_skill_4.jpg');
}

#wrap.elsword .charView_wrap section article .skill .inner ul li.skill_4 a:before {
    background-image: url('../image/character/elsword/view/thumb_skill_5.jpg');
}


#wrap.elsword.line0.job0 .charView_wrap section article .image h3 {
    background-image: url('../image/character/elsword/view/line_0/typo_name.png');
}

#wrap.elsword.line0.job0 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/elsword/view/line_0/character.png');
}

#wrap.elsword.line1.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/elsword/view/line_1/typo_name1.png');
}

#wrap.elsword.line1.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/elsword/view/line_1/character1.png');
}

#wrap.elsword.line1.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/elsword/view/line_1/typo_name2.png');
}

#wrap.elsword.line1.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/elsword/view/line_1/character2.png');
}

#wrap.elsword.line1.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/elsword/view/line_1/typo_name3.png');
}

#wrap.elsword.line1.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/elsword/view/line_1/character3_2.png');
}

#wrap.elsword.line1.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/elsword/view/line_1/character3_1.png');
}

#wrap.elsword.line2.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/elsword/view/line_2/typo_name1.png');
}

#wrap.elsword.line2.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/elsword/view/line_2/character1.png');
}

#wrap.elsword.line2.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/elsword/view/line_2/typo_name2.png');
}

#wrap.elsword.line2.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/elsword/view/line_2/character2.png');
}

#wrap.elsword.line2.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/elsword/view/line_2/typo_name3.png');
}

#wrap.elsword.line2.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/elsword/view/line_2/character3_2.png');
}

#wrap.elsword.line2.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/elsword/view/line_2/character3_1.png');
}

#wrap.elsword.line3.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/elsword/view/line_3/typo_name1.png');
}

#wrap.elsword.line3.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/elsword/view/line_3/character1.png');
}

#wrap.elsword.line3.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/elsword/view/line_3/typo_name2.png');
}

#wrap.elsword.line3.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/elsword/view/line_3/character2.png');
}

#wrap.elsword.line3.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/elsword/view/line_3/typo_name3.png');
}

#wrap.elsword.line3.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/elsword/view/line_3/character3_2.png');
}

#wrap.elsword.line3.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/elsword/view/line_3/character3_1.png');
}

#wrap.elsword.line4.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/elsword/view/line_4/typo_name1.png');
}

#wrap.elsword.line4.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/elsword/view/line_4/character1.png');
}

#wrap.elsword.line4.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/elsword/view/line_4/typo_name2.png');
}

#wrap.elsword.line4.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/elsword/view/line_4/character2.png');
}

#wrap.elsword.line4.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/elsword/view/line_4/typo_name3.png');
}

#wrap.elsword.line4.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/elsword/view/line_4/character3_2.png');
}

#wrap.elsword.line4.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/elsword/view/line_4/character3_1.png');
}

#wrap.elsword.line4.job3 .charView_wrap section article .image>div.image3 {
    background-image: url('../image/character/elsword/view/line_4/character3_3.png');
}


/********** 아이샤 **********/
#wrap.aisha .charView_wrap .btn_paging a:hover {
    color: #722992;
}

#wrap.aisha .charView_wrap .btn_paging a:hover:before,
#wrap.aisha .charView_wrap .btn_paging a:hover:after {
    background-color: #722992;
}

#wrap.aisha .scrollbar-macosx>.scroll-element .scroll-bar {
    background-color: #8633aa;
}

#wrap.aisha {
    background-color: #7e30a0;
}

#wrap.aisha .charView_wrap section aside .systemView a:hover {
    background-color: #9b3dc4;
}

#wrap.aisha .charView_wrap section aside .classBtn ul li button {
    background-color: #aa47d4;
}

#wrap.aisha .charView_wrap section aside .classBtn ul li button:hover {
    background-color: #c065e6;
}

#wrap.aisha .charView_wrap section aside .classBtn ul li button.active {
    color: #722992;
}

#wrap.aisha .charView_wrap section aside .lineTab dl dd a>span {
    border-color: #a844d2;
}

#wrap.aisha .charView_wrap section aside .lineTab dl.line_1 dd a.job_1:after {
    content: 'ハイ\Aマジシャン';
}

#wrap.aisha .charView_wrap section aside .lineTab dl.line_1 dd a.job_2:after {
    content: 'エレメンタル\Aマスター';
}

#wrap.aisha .charView_wrap section aside .lineTab dl.line_1 dd a.job_3:after {
    content: 'エーテル\Aセイジ';
}

#wrap.aisha .charView_wrap section aside .lineTab dl.line_2 dd a.job_1:after {
    content: 'ダーク\Aマジシャン';
}

#wrap.aisha .charView_wrap section aside .lineTab dl.line_2 dd a.job_2:after {
    content: 'ヴォイド\Aプリンセス';
}

#wrap.aisha .charView_wrap section aside .lineTab dl.line_2 dd a.job_3:after {
    content: 'オズ\Aソーサラー';
}

#wrap.aisha .charView_wrap section aside .lineTab dl.line_3 dd a.job_1:after {
    content: 'バトル\Aマジシャン';
}

#wrap.aisha .charView_wrap section aside .lineTab dl.line_3 dd a.job_2:after {
    content: 'ディメンション\Aウィッチ';
}

#wrap.aisha .charView_wrap section aside .lineTab dl.line_3 dd a.job_3:after {
    content: 'メタモルフィ';
}

#wrap.aisha .charView_wrap section aside .lineTab dl.line_4 dd a.job_1:after {
    content: 'ウィズ\Aマジシャン';
}

#wrap.aisha .charView_wrap section aside .lineTab dl.line_4 dd a.job_2:after {
    content: 'ミスティック\Aアルケミスト';
}

#wrap.aisha .charView_wrap section aside .lineTab dl.line_4 dd a.job_3:after {
    content: 'ロード\Aアゾット';
}

#wrap.aisha .charView_wrap section aside .lineTab dl dd>span.cur {
    background-image: url('../image/character/aisha/view/dot_h.png');
}

#wrap.aisha .charView_wrap section article .story:before {
    background-image: url('../image/character/aisha/view/typo_story.png');
}

#wrap.aisha .charView_wrap section article .skill {
    background-image: url('../image/character/aisha/view/bg_skill.png');
}

#wrap.aisha .charView_wrap section article .skill:before {
    background-image: url('../image/character/aisha/view/typo_skill.png');
}

#wrap.aisha .charView_wrap section article .skill .inner ul li.skill_1 a:before {
    background-image: url('../image/character/aisha/view/thumb_skill_2.jpg');
}

#wrap.aisha .charView_wrap section article .skill .inner ul li.skill_2 a:before {
    background-image: url('../image/character/aisha/view/thumb_skill_3.jpg');
}

#wrap.aisha .charView_wrap section article .skill .inner ul li.skill_3 a:before {
    background-image: url('../image/character/aisha/view/thumb_skill_4.jpg');
}

#wrap.aisha .charView_wrap section article .skill .inner ul li.skill_4 a:before {
    background-image: url('../image/character/aisha/view/thumb_skill_5.jpg');
}


#wrap.aisha.line0.job0 .charView_wrap section article .image h3 {
    background-image: url('../image/character/aisha/view/line_0/typo_name.png');
}

#wrap.aisha.line0.job0 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/aisha/view/line_0/character.png');
}

#wrap.aisha.line1.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/aisha/view/line_1/typo_name1.png');
}

#wrap.aisha.line1.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/aisha/view/line_1/character1.png');
}

#wrap.aisha.line1.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/aisha/view/line_1/typo_name2.png');
}

#wrap.aisha.line1.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/aisha/view/line_1/character2.png');
}

#wrap.aisha.line1.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/aisha/view/line_1/typo_name3.png');
}

#wrap.aisha.line1.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/aisha/view/line_1/character3_2.png');
}

#wrap.aisha.line1.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/aisha/view/line_1/character3_1.png');
}

#wrap.aisha.line2.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/aisha/view/line_2/typo_name1.png');
}

#wrap.aisha.line2.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/aisha/view/line_2/character1.png');
}

#wrap.aisha.line2.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/aisha/view/line_2/typo_name2.png');
}

#wrap.aisha.line2.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/aisha/view/line_2/character2.png');
}

#wrap.aisha.line2.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/aisha/view/line_2/typo_name3.png');
}

#wrap.aisha.line2.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/aisha/view/line_2/character3_2.png');
}

#wrap.aisha.line2.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/aisha/view/line_2/character3_1.png');
}

#wrap.aisha.line3.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/aisha/view/line_3/typo_name1.png');
}

#wrap.aisha.line3.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/aisha/view/line_3/character1.png');
}

#wrap.aisha.line3.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/aisha/view/line_3/typo_name2.png');
}

#wrap.aisha.line3.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/aisha/view/line_3/character2.png');
}

#wrap.aisha.line3.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/aisha/view/line_3/typo_name3.png');
}

#wrap.aisha.line3.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/aisha/view/line_3/character3_3.png');
}

#wrap.aisha.line3.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/aisha/view/line_3/character3_1.png');
}

#wrap.aisha.line3.job3 .charView_wrap section article .image>div.image3 {
    background-image: url('../image/character/aisha/view/line_3/character3_2.png');
}

#wrap.aisha.line4.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/aisha/view/line_4/typo_name1.png');
}

#wrap.aisha.line4.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/aisha/view/line_4/character1.png');
}

#wrap.aisha.line4.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/aisha/view/line_4/typo_name2.png');
}

#wrap.aisha.line4.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/aisha/view/line_4/character2.png');
}

#wrap.aisha.line4.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/aisha/view/line_4/typo_name3.png');
}

#wrap.aisha.line4.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/aisha/view/line_4/character3_1.png');
}

#wrap.aisha.line4.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/aisha/view/line_4/character3.png');
}


/********** 레나 **********/
#wrap.rena .charView_wrap .btn_paging a:hover {
    color: #88a930;
}

#wrap.rena .charView_wrap .btn_paging a:hover:before,
#wrap.rena .charView_wrap .btn_paging a:hover:after {
    background-color: #88a930;
}

#wrap.rena .scrollbar-macosx>.scroll-element .scroll-bar {
    background-color: #91b23b;
}

#wrap.rena {
    background-color: #91b23b;
}

#wrap.rena .charView_wrap section aside .systemView a:hover {
    background-color: #add548;
}

#wrap.rena .charView_wrap section aside .classBtn ul li button {
    background-color: #aacd4e;
}

#wrap.rena .charView_wrap section aside .classBtn ul li button:hover {
    background-color: #b8d960;
}

#wrap.rena .charView_wrap section aside .classBtn ul li button.active {
    color: #88a930;
}

#wrap.rena .charView_wrap section aside .lineTab dl dd a>span {
    border-color: #acd24b;
}

#wrap.rena .charView_wrap section aside .lineTab dl.line_1 dd a.job_1:after {
    content: 'コンバット\Aレンジャー';
}

#wrap.rena .charView_wrap section aside .lineTab dl.line_1 dd a.job_2:after {
    content: 'ウィンド\Aスニーカー';
}

#wrap.rena .charView_wrap section aside .lineTab dl.line_1 dd a.job_3:after {
    content: 'アネモス';
}

#wrap.rena .charView_wrap section aside .lineTab dl.line_2 dd a.job_1:after {
    content: 'スナイピング\Aレンジャー';
}

#wrap.rena .charView_wrap section aside .lineTab dl.line_2 dd a.job_2:after {
    content: 'グランド\Aアーチャー';
}

#wrap.rena .charView_wrap section aside .lineTab dl.line_2 dd a.job_3:after {
    content: 'デイ\Aブレイカー';
}

#wrap.rena .charView_wrap section aside .lineTab dl.line_3 dd a.job_1:after {
    content: 'トラッピング\Aレンジャー';
}

#wrap.rena .charView_wrap section aside .lineTab dl.line_3 dd a.job_2:after {
    content: 'ナイト\Aウォッチャー';
}

#wrap.rena .charView_wrap section aside .lineTab dl.line_3 dd a.job_3:after {
    content: 'トワイライト';
}

#wrap.rena .charView_wrap section aside .lineTab dl.line_4 dd a.job_1:after {
    content: 'ポエティック\Aレンジャー';
}

#wrap.rena .charView_wrap section aside .lineTab dl.line_4 dd a.job_2:after {
    content: 'テイル\Aスピナー';
}

#wrap.rena .charView_wrap section aside .lineTab dl.line_4 dd a.job_3:after {
    content: 'プロフェテス';
}

#wrap.rena .charView_wrap section aside .lineTab dl dd>span.cur {
    background-image: url('../image/character/rena/view/dot_h.png');
}

#wrap.rena .charView_wrap section article .story:before {
    background-image: url('../image/character/rena/view/typo_story.png');
}

#wrap.rena .charView_wrap section article .skill {
    background-image: url('../image/character/rena/view/bg_skill.png');
}

#wrap.rena .charView_wrap section article .skill:before {
    background-image: url('../image/character/rena/view/typo_skill.png');
}

#wrap.rena .charView_wrap section article .skill .inner ul li.skill_1 a:before {
    background-image: url('../image/character/rena/view/thumb_skill_2.jpg');
}

#wrap.rena .charView_wrap section article .skill .inner ul li.skill_2 a:before {
    background-image: url('../image/character/rena/view/thumb_skill_3.jpg');
}

#wrap.rena .charView_wrap section article .skill .inner ul li.skill_3 a:before {
    background-image: url('../image/character/rena/view/thumb_skill_4.jpg');
}

#wrap.rena .charView_wrap section article .skill .inner ul li.skill_4 a:before {
    background-image: url('../image/character/rena/view/thumb_skill_5.jpg');
}


#wrap.rena.line0.job0 .charView_wrap section article .image h3 {
    background-image: url('../image/character/rena/view/line_0/typo_name.png');
}

#wrap.rena.line0.job0 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/rena/view/line_0/character.png');
}

#wrap.rena.line1.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/rena/view/line_1/typo_name1.png');
}

#wrap.rena.line1.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/rena/view/line_1/character1.png');
}

#wrap.rena.line1.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/rena/view/line_1/typo_name2.png');
}

#wrap.rena.line1.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/rena/view/line_1/character2.png');
}

#wrap.rena.line1.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/rena/view/line_1/typo_name3.png');
}

#wrap.rena.line1.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/rena/view/line_1/character3_2.png');
}

#wrap.rena.line1.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/rena/view/line_1/character3_1.png');
}

#wrap.rena.line2.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/rena/view/line_2/typo_name1.png');
}

#wrap.rena.line2.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/rena/view/line_2/character1.png');
}

#wrap.rena.line2.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/rena/view/line_2/typo_name2.png');
}

#wrap.rena.line2.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/rena/view/line_2/character2.png');
}

#wrap.rena.line2.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/rena/view/line_2/typo_name3.png');
}

#wrap.rena.line2.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/rena/view/line_2/character3_2.png');
}

#wrap.rena.line2.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/rena/view/line_2/character3_1.png');
}

#wrap.rena.line3.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/rena/view/line_3/typo_name1.png');
}

#wrap.rena.line3.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/rena/view/line_3/character1.png');
}

#wrap.rena.line3.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/rena/view/line_3/typo_name2.png');
}

#wrap.rena.line3.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/rena/view/line_3/character2.png');
}

#wrap.rena.line3.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/rena/view/line_3/typo_name3.png');
}

#wrap.rena.line3.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/rena/view/line_3/character3_2.png');
}

#wrap.rena.line3.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/rena/view/line_3/character3_1.png');
}

#wrap.rena.line4.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/rena/view/line_4/typo_name1.png');
}

#wrap.rena.line4.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/rena/view/line_4/character1.png');
}

#wrap.rena.line4.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/rena/view/line_4/typo_name2.png');
}

#wrap.rena.line4.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/rena/view/line_4/character2.png');
}

#wrap.rena.line4.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/rena/view/line_4/typo_name3.png');
}

#wrap.rena.line4.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/rena/view/line_4/character3_2.png');
}

#wrap.rena.line4.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/rena/view/line_4/character3_1.png');
}


/********** 레이븐 **********/
#wrap.raven .charView_wrap .btn_paging a:hover {
    color: #51565b;
}

#wrap.raven .charView_wrap .btn_paging a:hover:before,
#wrap.raven .charView_wrap .btn_paging a:hover:after {
    background-color: #51565b;
}

#wrap.raven .scrollbar-macosx>.scroll-element .scroll-bar {
    background-color: #666b70;
}

#wrap.raven {
    background-color: #666b70;
}

#wrap.raven .charView_wrap section aside .systemView a:hover {
    background-color: #858a8f;
}

#wrap.raven .charView_wrap section aside .classBtn ul li button {
    background-color: #7d8389;
}

#wrap.raven .charView_wrap section aside .classBtn ul li button:hover {
    background-color: #8c9197;
}

#wrap.raven .charView_wrap section aside .classBtn ul li button.active {
    color: #51565b;
}

#wrap.raven .charView_wrap section aside .lineTab dl dd a>span {
    border-color: #898d92;
}

#wrap.raven .charView_wrap section aside .lineTab dl.line_1 dd a.job_1:after {
    content: 'ソード\Aテイカー';
}

#wrap.raven .charView_wrap section aside .lineTab dl.line_1 dd a.job_2:after {
    content: 'ブレード\Aマスター';
}

#wrap.raven .charView_wrap section aside .lineTab dl.line_1 dd a.job_3:after {
    content: 'フューリアス\Aブレード';
}

#wrap.raven .charView_wrap section aside .lineTab dl.line_2 dd a.job_1:after {
    content: 'オーバー\Aテイカー';
}

#wrap.raven .charView_wrap section aside .lineTab dl.line_2 dd a.job_2:after {
    content: 'レックレス\Aフィスト';
}

#wrap.raven .charView_wrap section aside .lineTab dl.line_2 dd a.job_3:after {
    content: 'レイジ\Aハーツ';
}

#wrap.raven .charView_wrap section aside .lineTab dl.line_3 dd a.job_1:after {
    content: 'ウェポン\Aテイカー';
}

#wrap.raven .charView_wrap section aside .lineTab dl.line_3 dd a.job_2:after {
    content: 'ベテラン\Aコマンダー';
}

#wrap.raven .charView_wrap section aside .lineTab dl.line_3 dd a.job_3:after {
    content: 'ノヴァ\Aインペラトル';
}

#wrap.raven .charView_wrap section aside .lineTab dl.line_4 dd a.job_1:after {
    content: 'ヴェノム\Aテイカー';
}

#wrap.raven .charView_wrap section aside .lineTab dl.line_4 dd a.job_2:after {
    content: 'ミュータント\Aリーパー';
}

#wrap.raven .charView_wrap section aside .lineTab dl.line_4 dd a.job_3:after {
    content: 'レヴァナント';
}

#wrap.raven .charView_wrap section aside .lineTab dl dd>span.cur {
    background-image: url('../image/character/raven/view/dot_h.png');
}

#wrap.raven .charView_wrap section article .story:before {
    background-image: url('../image/character/raven/view/typo_story.png');
}

#wrap.raven .charView_wrap section article .skill {
    background-image: url('../image/character/raven/view/bg_skill.png');
}

#wrap.raven .charView_wrap section article .skill:before {
    background-image: url('../image/character/raven/view/typo_skill.png');
}

#wrap.raven .charView_wrap section article .skill .inner ul li.skill_1 a:before {
    background-image: url('../image/character/raven/view/thumb_skill_2.jpg');
}

#wrap.raven .charView_wrap section article .skill .inner ul li.skill_2 a:before {
    background-image: url('../image/character/raven/view/thumb_skill_3.jpg');
}

#wrap.raven .charView_wrap section article .skill .inner ul li.skill_3 a:before {
    background-image: url('../image/character/raven/view/thumb_skill_4.jpg');
}

#wrap.raven .charView_wrap section article .skill .inner ul li.skill_4 a:before {
    background-image: url('../image/character/raven/view/thumb_skill_5.jpg');
}


#wrap.raven.line0.job0 .charView_wrap section article .image h3 {
    background-image: url('../image/character/raven/view/line_0/typo_name.png');
}

#wrap.raven.line0.job0 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/raven/view/line_0/character.png');
}

#wrap.raven.line1.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/raven/view/line_1/typo_name1.png');
}

#wrap.raven.line1.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/raven/view/line_1/character1.png');
}

#wrap.raven.line1.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/raven/view/line_1/typo_name2.png');
}

#wrap.raven.line1.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/raven/view/line_1/character2.png');
}

#wrap.raven.line1.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/raven/view/line_1/typo_name3.png');
}

#wrap.raven.line1.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/raven/view/line_1/character3_2.png');
}

#wrap.raven.line1.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/raven/view/line_1/character3_1.png');
}

#wrap.raven.line2.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/raven/view/line_2/typo_name1.png');
}

#wrap.raven.line2.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/raven/view/line_2/character1.png');
}

#wrap.raven.line2.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/raven/view/line_2/typo_name2.png');
}

#wrap.raven.line2.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/raven/view/line_2/character2.png');
}

#wrap.raven.line2.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/raven/view/line_2/typo_name3.png');
}

#wrap.raven.line2.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/raven/view/line_2/character3_2.png');
}

#wrap.raven.line2.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/raven/view/line_2/character3_1.png');
}

#wrap.raven.line3.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/raven/view/line_3/typo_name1.png');
}

#wrap.raven.line3.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/raven/view/line_3/character1.png');
}

#wrap.raven.line3.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/raven/view/line_3/typo_name2.png');
}

#wrap.raven.line3.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/raven/view/line_3/character2.png');
}

#wrap.raven.line3.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/raven/view/line_3/typo_name3.png');
}

#wrap.raven.line3.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/raven/view/line_3/character3_2.png');
}

#wrap.raven.line3.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/raven/view/line_3/character3_1.png');
}

#wrap.raven.line4.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/raven/view/line_4/typo_name1.png');
}

#wrap.raven.line4.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/raven/view/line_4/character1.png');
}

#wrap.raven.line4.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/raven/view/line_4/typo_name2.png');
}

#wrap.raven.line4.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/raven/view/line_4/character2.png');
}

#wrap.raven.line4.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/raven/view/line_4/typo_name3.png');
}

#wrap.raven.line4.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/raven/view/line_4/character3_3.png');
}

#wrap.raven.line4.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/raven/view/line_4/character3_1.png');
}

#wrap.raven.line4.job3 .charView_wrap section article .image>div.image3 {
    background-image: url('../image/character/raven/view/line_4/character3_2.png');
}


/********** 이브 **********/
#wrap.eve .charView_wrap .btn_paging a:hover {
    color: #c87a8b;
}

#wrap.eve .charView_wrap .btn_paging a:hover:before,
#wrap.eve .charView_wrap .btn_paging a:hover:after {
    background-color: #c87a8b;
}

#wrap.eve .scrollbar-macosx>.scroll-element .scroll-bar {
    background-color: #da8d9e;
}

#wrap.eve {
    background-color: #dc91a2;
}

#wrap.eve .charView_wrap section aside .systemView a:hover {
    background-color: #fca7b7;
}

#wrap.eve .charView_wrap section aside .classBtn ul li button {
    background-color: #f4a7b8;
}

#wrap.eve .charView_wrap section aside .classBtn ul li button:hover {
    background-color: #f7b8c5;
}

#wrap.eve .charView_wrap section aside .classBtn ul li button.active {
    color: #c87a8b;
}

#wrap.eve .charView_wrap section aside .lineTab dl dd a>span {
    border-color: #fbb1bf;
}

#wrap.eve .charView_wrap section aside .lineTab dl.line_1 dd a.job_1:after {
    content: 'コード\Aエキゾチック
';
}

#wrap.eve .charView_wrap section aside .lineTab dl.line_1 dd a.job_2:after {
    content: 'コード\Aネメシス';
}

#wrap.eve .charView_wrap section aside .lineTab dl.line_1 dd a.job_3:after {
    content: 'コード\Aアルティメイト';
}

#wrap.eve .charView_wrap section aside .lineTab dl.line_2 dd a.job_1:after {
    content: 'コード\Aアーキテクチャー';
}

#wrap.eve .charView_wrap section aside .lineTab dl.line_2 dd a.job_2:after {
    content: 'コード\Aエンプレス';
}

#wrap.eve .charView_wrap section aside .lineTab dl.line_2 dd a.job_3:after {
    content: 'コード\Aエセンシア';
}

#wrap.eve .charView_wrap section aside .lineTab dl.line_3 dd a.job_1:after {
    content: 'コード\Aエレクトラ';
}

#wrap.eve .charView_wrap section aside .lineTab dl.line_3 dd a.job_2:after {
    content: 'コード\Aバトルセラフ';
}

#wrap.eve .charView_wrap section aside .lineTab dl.line_3 dd a.job_3:after {
    content: 'コード\Aサリエル';
}

#wrap.eve .charView_wrap section aside .lineTab dl.line_4 dd a.job_1:after {
    content: 'コード\Aアンノウン';
}

#wrap.eve .charView_wrap section aside .lineTab dl.line_4 dd a.job_2:after {
    content: 'コード\Aフェイレス';
}

#wrap.eve .charView_wrap section aside .lineTab dl.line_4 dd a.job_3:after {
    content: 'コード\Aアンチテーゼ';
}

#wrap.eve .charView_wrap section aside .lineTab dl dd>span.cur {
    background-image: url('../image/character/eve/view/dot_h.png');
}

#wrap.eve .charView_wrap section article .story:before {
    background-image: url('../image/character/eve/view/typo_story.png');
}

#wrap.eve .charView_wrap section article .skill {
    background-image: url('../image/character/eve/view/bg_skill.png');
}

#wrap.eve .charView_wrap section article .skill:before {
    background-image: url('../image/character/eve/view/typo_skill.png');
}

#wrap.eve .charView_wrap section article .skill .inner ul li.skill_1 a:before {
    background-image: url('../image/character/eve/view/thumb_skill_2.jpg');
}

#wrap.eve .charView_wrap section article .skill .inner ul li.skill_2 a:before {
    background-image: url('../image/character/eve/view/thumb_skill_3.jpg');
}

#wrap.eve .charView_wrap section article .skill .inner ul li.skill_3 a:before {
    background-image: url('../image/character/eve/view/thumb_skill_4.jpg');
}

#wrap.eve .charView_wrap section article .skill .inner ul li.skill_4 a:before {
    background-image: url('../image/character/eve/view/thumb_skill_5.jpg');
}


#wrap.eve.line0.job0 .charView_wrap section article .image h3 {
    background-image: url('../image/character/eve/view/line_0/typo_name.png');
}

#wrap.eve.line0.job0 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/eve/view/line_0/character.png');
}

#wrap.eve.line1.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/eve/view/line_1/typo_name1.png');
}

#wrap.eve.line1.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/eve/view/line_1/character1.png');
}

#wrap.eve.line1.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/eve/view/line_1/typo_name2.png');
}

#wrap.eve.line1.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/eve/view/line_1/character2.png');
}

#wrap.eve.line1.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/eve/view/line_1/typo_name3.png');
}

#wrap.eve.line1.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/eve/view/line_1/character3_2.png');
}

#wrap.eve.line1.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/eve/view/line_1/character3_1.png');
}

#wrap.eve.line2.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/eve/view/line_2/typo_name1.png');
}

#wrap.eve.line2.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/eve/view/line_2/character1.png');
}

#wrap.eve.line2.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/eve/view/line_2/typo_name2.png');
}

#wrap.eve.line2.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/eve/view/line_2/character2.png');
}

#wrap.eve.line2.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/eve/view/line_2/typo_name3.png');
}

#wrap.eve.line2.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/eve/view/line_2/character3_2.png');
}

#wrap.eve.line2.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/eve/view/line_2/character3_1.png');
}

#wrap.eve.line3.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/eve/view/line_3/typo_name1.png');
}

#wrap.eve.line3.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/eve/view/line_3/character1.png');
}

#wrap.eve.line3.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/eve/view/line_3/typo_name2.png');
}

#wrap.eve.line3.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/eve/view/line_3/character2.png');
}

#wrap.eve.line3.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/eve/view/line_3/typo_name3.png');
}

#wrap.eve.line3.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/eve/view/line_3/character3_2.png');
}

#wrap.eve.line3.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/eve/view/line_3/character3_1.png');
}

#wrap.eve.line4.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/eve/view/line_4/typo_name1_.png');
}

#wrap.eve.line4.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/eve/view/line_4/character1_.png');
}

#wrap.eve.line4.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/eve/view/line_4/typo_name2_.png');
}

#wrap.eve.line4.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/eve/view/line_4/character2_.png');
}

#wrap.eve.line4.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/eve/view/line_4/typo_name3a.png');
}

#wrap.eve.line4.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/eve/view/line_4/character3_2.png');
}

#wrap.eve.line4.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/eve/view/line_4/character3_1.png');
}


/********** 청 **********/
#wrap.chung .charView_wrap .btn_paging a:hover {
    color: #3fa5b8;
}

#wrap.chung .charView_wrap .btn_paging a:hover:before,
#wrap.chung .charView_wrap .btn_paging a:hover:after {
    background-color: #3fa5b8;
}

#wrap.chung .scrollbar-macosx>.scroll-element .scroll-bar {
    background-color: #53b8cc;
}

#wrap.chung {
    background-color: #57bdd1;
}

#wrap.chung .charView_wrap section aside .systemView a:hover {
    background-color: #74daed;
}

#wrap.chung .charView_wrap section aside .classBtn ul li button {
    background-color: #6dd3e6;
}

#wrap.chung .charView_wrap section aside .classBtn ul li button:hover {
    background-color: #83daea;
}

#wrap.chung .charView_wrap section aside .classBtn ul li button.active {
    color: #3fa5b8;
}

#wrap.chung .charView_wrap section aside .lineTab dl dd a>span {
    border-color: #78ddf0;
}

#wrap.chung .charView_wrap section aside .lineTab dl.line_1 dd a.job_1:after {
    content: 'フューリー\Aガーディアン';
}

#wrap.chung .charView_wrap section aside .lineTab dl.line_1 dd a.job_2:after {
    content: 'アイアン\Aパラディン';
}

#wrap.chung .charView_wrap section aside .lineTab dl.line_1 dd a.job_3:after {
    content: 'コメット\Aクルセイダー';
}

#wrap.chung .charView_wrap section aside .lineTab dl.line_2 dd a.job_1:after {
    content: 'シューティング\Aガーディアン';
}

#wrap.chung .charView_wrap section aside .lineTab dl.line_2 dd a.job_2:after {
    content: 'デッドリー\Aチェイサー';
}

#wrap.chung .charView_wrap section aside .lineTab dl.line_2 dd a.job_3:after {
    content: 'フェイタル\Aファントム';
}

#wrap.chung .charView_wrap section aside .lineTab dl.line_3 dd a.job_1:after {
    content: 'シェリング\Aガーディアン';
}

#wrap.chung .charView_wrap section aside .lineTab dl.line_3 dd a.job_2:after {
    content: 'タクティカル\Aトルーパー';
}

#wrap.chung .charView_wrap section aside .lineTab dl.line_3 dd a.job_3:after {
    content: 'センチュリオン';
}

#wrap.chung .charView_wrap section aside .lineTab dl.line_4 dd a.job_1:after {
    content: 'コル\Aガーディアン';
}

#wrap.chung .charView_wrap section aside .lineTab dl.line_4 dd a.job_2:after {
    content: 'ディヴァイン\Aパネス';
}

#wrap.chung .charView_wrap section aside .lineTab dl.line_4 dd a.job_3:after {
    content: 'ディウス\Aアエール';
}

#wrap.chung .charView_wrap section aside .lineTab dl dd>span.cur {
    background-image: url('../image/character/chung/view/dot_h.png');
}

#wrap.chung .charView_wrap section article .story:before {
    background-image: url('../image/character/chung/view/typo_story.png');
}

#wrap.chung .charView_wrap section article .skill {
    background-image: url('../image/character/chung/view/bg_skill.png');
}

#wrap.chung .charView_wrap section article .skill:before {
    background-image: url('../image/character/chung/view/typo_skill.png');
}

#wrap.chung .charView_wrap section article .skill .inner ul li.skill_1 a:before {
    background-image: url('../image/character/chung/view/thumb_skill_2.jpg');
}

#wrap.chung .charView_wrap section article .skill .inner ul li.skill_2 a:before {
    background-image: url('../image/character/chung/view/thumb_skill_3.jpg');
}

#wrap.chung .charView_wrap section article .skill .inner ul li.skill_3 a:before {
    background-image: url('../image/character/chung/view/thumb_skill_4.jpg');
}

#wrap.chung .charView_wrap section article .skill .inner ul li.skill_4 a:before {
    background-image: url('../image/character/chung/view/thumb_skill_5.jpg');
}


#wrap.chung.line0.job0 .charView_wrap section article .image h3 {
    background-image: url('../image/character/chung/view/line_0/typo_name.png');
}

#wrap.chung.line0.job0 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/chung/view/line_0/character1_1.png');
}

#wrap.chung.line0.job0 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/chung/view/line_0/character1_2.png');
}

#wrap.chung.line1.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/chung/view/line_1/typo_name1.png');
}

#wrap.chung.line1.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/chung/view/line_1/character1_1.png');
}

#wrap.chung.line1.job1 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/chung/view/line_1/character1_2.png');
}

#wrap.chung.line1.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/chung/view/line_1/typo_name2.png');
}

#wrap.chung.line1.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/chung/view/line_1/character2_1.png');
}

#wrap.chung.line1.job2 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/chung/view/line_1/character2_2.png');
}

#wrap.chung.line1.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/chung/view/line_1/typo_name3.png');
}

#wrap.chung.line1.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/chung/view/line_1/character3_3.png');
}

#wrap.chung.line1.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/chung/view/line_1/character3_1.png');
}

#wrap.chung.line1.job3 .charView_wrap section article .image>div.image3 {
    background-image: url('../image/character/chung/view/line_1/character3_2.png');
}

#wrap.chung.line2.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/chung/view/line_2/typo_name1.png');
}

#wrap.chung.line2.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/chung/view/line_2/character1_1.png');
}

#wrap.chung.line2.job1 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/chung/view/line_2/character1_2.png');
}

#wrap.chung.line2.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/chung/view/line_2/typo_name2.png');
}

#wrap.chung.line2.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/chung/view/line_2/character2_1.png');
}

#wrap.chung.line2.job2 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/chung/view/line_2/character2_2.png');
}

#wrap.chung.line2.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/chung/view/line_2/typo_name3.png');
}

#wrap.chung.line2.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/chung/view/line_2/character3_3.png');
}

#wrap.chung.line2.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/chung/view/line_2/character3_1.png');
}

#wrap.chung.line2.job3 .charView_wrap section article .image>div.image3 {
    background-image: url('../image/character/chung/view/line_2/character3_2.png');
}

#wrap.chung.line3.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/chung/view/line_3/typo_name1.png');
}

#wrap.chung.line3.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/chung/view/line_3/character1_1.png');
}

#wrap.chung.line3.job1 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/chung/view/line_3/character1_2.png');
}

#wrap.chung.line3.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/chung/view/line_3/typo_name2.png');
}

#wrap.chung.line3.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/chung/view/line_3/character2_1.png');
}

#wrap.chung.line3.job2 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/chung/view/line_3/character2_2.png');
}

#wrap.chung.line3.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/chung/view/line_3/typo_name3.png');
}

#wrap.chung.line3.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/chung/view/line_3/character3_3.png');
}

#wrap.chung.line3.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/chung/view/line_3/character3_1.png');
}

#wrap.chung.line3.job3 .charView_wrap section article .image>div.image3 {
    background-image: url('../image/character/chung/view/line_3/character3_2.png');
}

#wrap.chung.line4.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/chung/view/line_4/typo_name1.png');
}

#wrap.chung.line4.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/chung/view/line_4/character1_1.png');
}

#wrap.chung.line4.job1 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/chung/view/line_4/character1_2.png');
}

#wrap.chung.line4.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/chung/view/line_4/typo_name2.png');
}

#wrap.chung.line4.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/chung/view/line_4/character2_1.png');
}

#wrap.chung.line4.job2 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/chung/view/line_4/character2_2.png');
}

#wrap.chung.line4.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/chung/view/line_4/typo_name3.png');
}

#wrap.chung.line4.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/chung/view/line_4/character3_3.png');
}

#wrap.chung.line4.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/chung/view/line_4/character3_1.png');
}

#wrap.chung.line4.job3 .charView_wrap section article .image>div.image3 {
    background-image: url('../image/character/chung/view/line_4/character3_2.png');
}


/********** 아라 **********/
#wrap.ara .charView_wrap .btn_paging a:hover {
    color: #db7817;
}

#wrap.ara .charView_wrap .btn_paging a:hover:before,
#wrap.ara .charView_wrap .btn_paging a:hover:after {
    background-color: #db7817;
}

#wrap.ara .scrollbar-macosx>.scroll-element .scroll-bar {
    background-color: #e9821d;
}

#wrap.ara {
    background-color: #eb831d;
}

#wrap.ara .charView_wrap section aside .systemView a:hover {
    background-color: #ff9b37;
}

#wrap.ara .charView_wrap section aside .classBtn ul li button {
    background-color: #ff952b;
}

#wrap.ara .charView_wrap section aside .classBtn ul li button:hover {
    background-color: #ffa44a;
}

#wrap.ara .charView_wrap section aside .classBtn ul li button.active {
    color: #db7817;
}

#wrap.ara .charView_wrap section aside .lineTab dl dd a>span {
    border-color: #ffaa56;
}

#wrap.ara .charView_wrap section aside .lineTab dl.line_1 dd a.job_1:after {
    content: '小仙';
}

#wrap.ara .charView_wrap section aside .lineTab dl.line_1 dd a.job_2:after {
    content: '帝釈天';
}

#wrap.ara .charView_wrap section aside .lineTab dl.line_1 dd a.job_3:after {
    content: '飛天';
}

#wrap.ara .charView_wrap section aside .lineTab dl.line_2 dd a.job_1:after {
    content: '小魔';
}

#wrap.ara .charView_wrap section aside .lineTab dl.line_2 dd a.job_2:after {
    content: '冥王';
}

#wrap.ara .charView_wrap section aside .lineTab dl.line_2 dd a.job_3:after {
    content: '黒闇天';
}

#wrap.ara .charView_wrap section aside .lineTab dl.line_3 dd a.job_1:after {
    content: '小妖';
}

#wrap.ara .charView_wrap section aside .lineTab dl.line_3 dd a.job_2:after {
    content: '修羅';
}

#wrap.ara .charView_wrap section aside .lineTab dl.line_3 dd a.job_3:after {
    content: '羅天';
}

#wrap.ara .charView_wrap section aside .lineTab dl.line_4 dd a.job_1:after {
    content: '小済';
}

#wrap.ara .charView_wrap section aside .lineTab dl.line_4 dd a.job_2:after {
    content: '摩利支天';
}

#wrap.ara .charView_wrap section aside .lineTab dl.line_4 dd a.job_3:after {
    content: '日天子';
}

#wrap.ara .charView_wrap section aside .lineTab dl dd>span.cur {
    background-image: url('../image/character/ara/view/dot_h.png');
}

#wrap.ara .charView_wrap section article .story:before {
    background-image: url('../image/character/ara/view/typo_story.png');
}

#wrap.ara .charView_wrap section article .skill {
    background-image: url('../image/character/ara/view/bg_skill.png');
}

#wrap.ara .charView_wrap section article .skill:before {
    background-image: url('../image/character/ara/view/typo_skill.png');
}

#wrap.ara .charView_wrap section article .skill .inner ul li.skill_1 a:before {
    background-image: url('../image/character/ara/view/thumb_skill_2.jpg');
}

#wrap.ara .charView_wrap section article .skill .inner ul li.skill_2 a:before {
    background-image: url('../image/character/ara/view/thumb_skill_3.jpg');
}

#wrap.ara .charView_wrap section article .skill .inner ul li.skill_3 a:before {
    background-image: url('../image/character/ara/view/thumb_skill_4.jpg');
}

#wrap.ara .charView_wrap section article .skill .inner ul li.skill_4 a:before {
    background-image: url('../image/character/ara/view/thumb_skill_5.jpg');
}


#wrap.ara.line0.job0 .charView_wrap section article .image h3 {
    background-image: url('../image/character/ara/view/line_0/typo_name.png');
}

#wrap.ara.line0.job0 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/ara/view/line_0/character1_1.png');
}

#wrap.ara.line0.job0 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/ara/view/line_0/character1_2.png');
}

#wrap.ara.line1.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/ara/view/line_1/typo_name1.png');
}

#wrap.ara.line1.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/ara/view/line_1/character1_1.png');
}

#wrap.ara.line1.job1 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/ara/view/line_1/character1_2.png');
}

#wrap.ara.line1.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/ara/view/line_1/typo_name2.png');
}

#wrap.ara.line1.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/ara/view/line_1/character2_1.png');
}

#wrap.ara.line1.job2 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/ara/view/line_1/character2_2.png');
}

#wrap.ara.line1.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/ara/view/line_1/typo_name3.png');
}

#wrap.ara.line1.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/ara/view/line_1/character3_3.png');
}

#wrap.ara.line1.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/ara/view/line_1/character3_1.png');
}

#wrap.ara.line1.job3 .charView_wrap section article .image>div.image3 {
    background-image: url('../image/character/ara/view/line_1/character3_2.png');
}

#wrap.ara.line2.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/ara/view/line_2/typo_name1.png');
}

#wrap.ara.line2.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/ara/view/line_2/character1_1.png');
}

#wrap.ara.line2.job1 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/ara/view/line_2/character1_2.png');
}

#wrap.ara.line2.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/ara/view/line_2/typo_name2.png');
}

#wrap.ara.line2.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/ara/view/line_2/character2_1.png');
}

#wrap.ara.line2.job2 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/ara/view/line_2/character2_2.png');
}

#wrap.ara.line2.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/ara/view/line_2/typo_name3.png');
}

#wrap.ara.line2.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/ara/view/line_2/character3_3.png');
}

#wrap.ara.line2.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/ara/view/line_2/character3_1.png');
}

#wrap.ara.line2.job3 .charView_wrap section article .image>div.image3 {
    background-image: url('../image/character/ara/view/line_2/character3_2.png');
}

#wrap.ara.line3.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/ara/view/line_3/typo_name1.png');
}

#wrap.ara.line3.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/ara/view/line_3/character1_1.png');
}

#wrap.ara.line3.job1 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/ara/view/line_3/character1_2.png');
}

#wrap.ara.line3.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/ara/view/line_3/typo_name2.png');
}

#wrap.ara.line3.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/ara/view/line_3/character2_1.png');
}

#wrap.ara.line3.job2 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/ara/view/line_3/character2_2.png');
}

#wrap.ara.line3.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/ara/view/line_3/typo_name3.png');
}

#wrap.ara.line3.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/ara/view/line_3/character3_3.png');
}

#wrap.ara.line3.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/ara/view/line_3/character3_1.png');
}

#wrap.ara.line3.job3 .charView_wrap section article .image>div.image3 {
    background-image: url('../image/character/ara/view/line_3/character3_2.png');
}

#wrap.ara.line4.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/ara/view/line_4/typo_name1.png');
}

#wrap.ara.line4.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/ara/view/line_4/character1_1.png');
}

#wrap.ara.line4.job1 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/ara/view/line_4/character1_2.png');
}

#wrap.ara.line4.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/ara/view/line_4/typo_name2.png');
}

#wrap.ara.line4.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/ara/view/line_4/character2_1.png');
}

#wrap.ara.line4.job2 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/ara/view/line_4/character2_2.png');
}

#wrap.ara.line4.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/ara/view/line_4/typo_name3.png');
}

#wrap.ara.line4.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/ara/view/line_4/character3_3.png');
}

#wrap.ara.line4.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/ara/view/line_4/character3_1.png');
}

#wrap.ara.line4.job3 .charView_wrap section article .image>div.image3 {
    background-image: url('../image/character/ara/view/line_4/character3_2.png');
}


/********** 엘리시스 **********/
#wrap.elesis .charView_wrap .btn_paging a:hover {
    color: #b73544;
}

#wrap.elesis .charView_wrap .btn_paging a:hover:before,
#wrap.elesis .charView_wrap .btn_paging a:hover:after {
    background-color: #b73544;
}

#wrap.elesis .scrollbar-macosx>.scroll-element .scroll-bar {
    background-color: #a62f40;
}

#wrap.elesis {
    background-color: #a72f40;
}

#wrap.elesis .charView_wrap section aside .systemView a:hover {
    background-color: #d44455;
}

#wrap.elesis .charView_wrap section aside .classBtn ul li button {
    background-color: #da4358;
}

#wrap.elesis .charView_wrap section aside .classBtn ul li button:hover {
    background-color: #e55367;
}

#wrap.elesis .charView_wrap section aside .classBtn ul li button.active {
    color: #b73544;
}

#wrap.elesis .charView_wrap section aside .lineTab dl dd a>span {
    border-color: #db455a;
}

#wrap.elesis .charView_wrap section aside .lineTab dl.line_1 dd a.job_1:after {
    content: 'セイバー\Aナイト';
}

#wrap.elesis .charView_wrap section aside .lineTab dl.line_1 dd a.job_2:after {
    content: 'グランド\Aマスター';
}

#wrap.elesis .charView_wrap section aside .lineTab dl.line_1 dd a.job_3:after {
    content: 'エンパイア\Aソード';
}

#wrap.elesis .charView_wrap section aside .lineTab dl.line_2 dd a.job_1:after {
    content: 'パイロ\Aナイト';
}

#wrap.elesis .charView_wrap section aside .lineTab dl.line_2 dd a.job_2:after {
    content: 'ブレイジング\Aハート';
}

#wrap.elesis .charView_wrap section aside .lineTab dl.line_2 dd a.job_3:after {
    content: 'フレイム\Aロード';
}

#wrap.elesis .charView_wrap section aside .lineTab dl.line_3 dd a.job_1:after {
    content: 'ダーク\Aナイト';
}

#wrap.elesis .charView_wrap section aside .lineTab dl.line_3 dd a.job_2:after {
    content: 'クリムゾン\Aアベンジャー';
}

#wrap.elesis .charView_wrap section aside .lineTab dl.line_3 dd a.job_3:after {
    content: 'ブラッディ\Aクイーン';
}

#wrap.elesis .charView_wrap section aside .lineTab dl.line_4 dd a.job_1:after {
    content: 'ソーア\Aナイト';
}

#wrap.elesis .charView_wrap section aside .lineTab dl.line_4 dd a.job_2:after {
    content: 'パトロナ';
}

#wrap.elesis .charView_wrap section aside .lineTab dl.line_4 dd a.job_3:after {
    content: 'アドレ\Aスティア';
}

#wrap.elesis .charView_wrap section aside .lineTab dl dd>span.cur {
    background-image: url('../image/character/elesis/view/dot_h.png');
}

#wrap.elesis .charView_wrap section article .story:before {
    background-image: url('../image/character/elesis/view/typo_story.png');
}

#wrap.elesis .charView_wrap section article .skill {
    background-image: url('../image/character/elesis/view/bg_skill.png');
}

#wrap.elesis .charView_wrap section article .skill:before {
    background-image: url('../image/character/elesis/view/typo_skill.png');
}

#wrap.elesis .charView_wrap section article .skill .inner ul li.skill_1 a:before {
    background-image: url('../image/character/elesis/view/thumb_skill_2.jpg');
}

#wrap.elesis .charView_wrap section article .skill .inner ul li.skill_2 a:before {
    background-image: url('../image/character/elesis/view/thumb_skill_3.jpg');
}

#wrap.elesis .charView_wrap section article .skill .inner ul li.skill_3 a:before {
    background-image: url('../image/character/elesis/view/thumb_skill_4.jpg');
}

#wrap.elesis .charView_wrap section article .skill .inner ul li.skill_4 a:before {
    background-image: url('../image/character/elesis/view/thumb_skill_5.jpg');
}


#wrap.elesis.line0.job0 .charView_wrap section article .image h3 {
    background-image: url('../image/character/elesis/view/line_0/typo_name.png');
}

#wrap.elesis.line0.job0 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/elesis/view/line_0/character.png');
}

#wrap.elesis.line1.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/elesis/view/line_1/typo_name1.png');
}

#wrap.elesis.line1.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/elesis/view/line_1/character1.png');
}

#wrap.elesis.line1.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/elesis/view/line_1/typo_name2.png');
}

#wrap.elesis.line1.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/elesis/view/line_1/character2.png');
}

#wrap.elesis.line1.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/elesis/view/line_1/typo_name3.png');
}

#wrap.elesis.line1.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/elesis/view/line_1/character3_2.png');
}

#wrap.elesis.line1.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/elesis/view/line_1/character3_1.png');
}

#wrap.elesis.line2.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/elesis/view/line_2/typo_name1.png');
}

#wrap.elesis.line2.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/elesis/view/line_2/character1.png');
}

#wrap.elesis.line2.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/elesis/view/line_2/typo_name2.png');
}

#wrap.elesis.line2.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/elesis/view/line_2/character2.png');
}

#wrap.elesis.line2.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/elesis/view/line_2/typo_name3.png');
}

#wrap.elesis.line2.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/elesis/view/line_2/character3_3.png');
}

#wrap.elesis.line2.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/elesis/view/line_2/character3_1.png');
}

#wrap.elesis.line2.job3 .charView_wrap section article .image>div.image3 {
    background-image: url('../image/character/elesis/view/line_2/character3_2.png');
}

#wrap.elesis.line3.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/elesis/view/line_3/typo_name1.png');
}

#wrap.elesis.line3.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/elesis/view/line_3/character1.png');
}

#wrap.elesis.line3.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/elesis/view/line_3/typo_name2.png');
}

#wrap.elesis.line3.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/elesis/view/line_3/character2.png');
}

#wrap.elesis.line3.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/elesis/view/line_3/typo_name3.png');
}

#wrap.elesis.line3.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/elesis/view/line_3/character3_2.png');
}

#wrap.elesis.line3.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/elesis/view/line_3/character3_1.png');
}

#wrap.elesis.line4.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/elesis/view/line_4/typo_name1.png');
}

#wrap.elesis.line4.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/elesis/view/line_4/character1.png');
}

#wrap.elesis.line4.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/elesis/view/line_4/typo_name2.png');
}

#wrap.elesis.line4.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/elesis/view/line_4/character2.png');
}

#wrap.elesis.line4.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/elesis/view/line_4/typo_name3.png');
}

#wrap.elesis.line4.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/elesis/view/line_4/character3_1.png');
}

#wrap.elesis.line4.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/elesis/view/line_4/character3_2.png');
}


/********** 애드 **********/
#wrap.add .charView_wrap .btn_paging a:hover {
    color: #693fd7;
}

#wrap.add .charView_wrap .btn_paging a:hover:before,
#wrap.add .charView_wrap .btn_paging a:hover:after {
    background-color: #693fd7;
}

#wrap.add .scrollbar-macosx>.scroll-element .scroll-bar {
    background-color: #6f4ad0;
}

#wrap.add {
    background-color: #6f4ad0;
}

#wrap.add .charView_wrap section aside .systemView a:hover {
    background-color: #9672f5;
}

#wrap.add .charView_wrap section aside .classBtn ul li button {
    background-color: #916cf2;
}

#wrap.add .charView_wrap section aside .classBtn ul li button:hover {
    background-color: #a586f7;
}

#wrap.add .charView_wrap section aside .classBtn ul li button.active {
    color: #693fd7;
}

#wrap.add .charView_wrap section aside .lineTab dl dd a>span {
    border-color: #916cf2;
}

#wrap.add .charView_wrap section aside .lineTab dl.line_1 dd a.job_1:after {
    content: 'サイキック\Aトレーサー';
}

#wrap.add .charView_wrap section aside .lineTab dl.line_1 dd a.job_2:after {
    content: 'ルナティック\Aサイカー';
}

#wrap.add .charView_wrap section aside .lineTab dl.line_1 dd a.job_3:after {
    content: 'ドゥーム\Aブリンガー';
}

#wrap.add .charView_wrap section aside .lineTab dl.line_2 dd a.job_1:after {
    content: 'アーク\Aトレーサー';
}

#wrap.add .charView_wrap section aside .lineTab dl.line_2 dd a.job_2:after {
    content: 'マスター\Aマインド';
}

#wrap.add .charView_wrap section aside .lineTab dl.line_2 dd a.job_3:after {
    content: 'ドミネーター';
}

#wrap.add .charView_wrap section aside .lineTab dl.line_3 dd a.job_1:after {
    content: 'タイム\Aトレーサー';
}

#wrap.add .charView_wrap section aside .lineTab dl.line_3 dd a.job_2:after {
    content: 'ディアボリック\Aエスパー';
}

#wrap.add .charView_wrap section aside .lineTab dl.line_3 dd a.job_3:after {
    content: 'マッド\Aパラドックス';
}

#wrap.add .charView_wrap section aside .lineTab dl.line_4 dd a.job_1:after {
    content: 'アフェクト\Aトレーサー';
}

#wrap.add .charView_wrap section aside .lineTab dl.line_4 dd a.job_2:after {
    content: 'ディセンブラー';
}

#wrap.add .charView_wrap section aside .lineTab dl.line_4 dd a.job_3:after {
    content: 'オーバーマインド';
}

#wrap.add .charView_wrap section aside .lineTab dl dd>span.cur {
    background-image: url('../image/character/add/view/dot_h.png');
}

#wrap.add .charView_wrap section article .story:before {
    background-image: url('../image/character/add/view/typo_story.png');
}

#wrap.add .charView_wrap section article .skill {
    background-image: url('../image/character/add/view/bg_skill.png');
}

#wrap.add .charView_wrap section article .skill:before {
    background-image: url('../image/character/add/view/typo_skill.png');
}

#wrap.add .charView_wrap section article .skill .inner ul li.skill_1 a:before {
    background-image: url('../image/character/add/view/thumb_skill_2.jpg');
}

#wrap.add .charView_wrap section article .skill .inner ul li.skill_2 a:before {
    background-image: url('../image/character/add/view/thumb_skill_3.jpg');
}

#wrap.add .charView_wrap section article .skill .inner ul li.skill_3 a:before {
    background-image: url('../image/character/add/view/thumb_skill_4.jpg');
}

#wrap.add .charView_wrap section article .skill .inner ul li.skill_4 a:before {
    background-image: url('../image/character/add/view/thumb_skill_5.jpg');
}


#wrap.add.line0.job0 .charView_wrap section article .image h3 {
    background-image: url('../image/character/add/view/line_0/typo_name.png');
}

#wrap.add.line0.job0 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/add/view/line_0/character.png');
}

#wrap.add.line1.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/add/view/line_1/typo_name1.png');
}

#wrap.add.line1.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/add/view/line_1/character1.png');
}

#wrap.add.line1.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/add/view/line_1/typo_name2.png');
}

#wrap.add.line1.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/add/view/line_1/character2.png');
}

#wrap.add.line1.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/add/view/line_1/typo_name3.png');
}

#wrap.add.line1.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/add/view/line_1/character3_2.png');
}

#wrap.add.line1.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/add/view/line_1/character3_1.png');
}

#wrap.add.line2.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/add/view/line_2/typo_name1.png');
}

#wrap.add.line2.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/add/view/line_2/character1.png');
}

#wrap.add.line2.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/add/view/line_2/typo_name2.png');
}

#wrap.add.line2.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/add/view/line_2/character2.png');
}

#wrap.add.line2.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/add/view/line_2/typo_name3.png');
}

#wrap.add.line2.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/add/view/line_2/character3_2.png');
}

#wrap.add.line2.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/add/view/line_2/character3_1.png');
}

#wrap.add.line3.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/add/view/line_3/typo_name1.png');
}

#wrap.add.line3.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/add/view/line_3/character1.png');
}

#wrap.add.line3.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/add/view/line_3/typo_name2.png');
}

#wrap.add.line3.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/add/view/line_3/character2.png');
}

#wrap.add.line3.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/add/view/line_3/typo_name3.png');
}

#wrap.add.line3.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/add/view/line_3/character3_2.png');
}

#wrap.add.line3.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/add/view/line_3/character3_1.png');
}

#wrap.add.line3.job3 .charView_wrap section article .image>div.image3 {
    background-image: url('../image/character/add/view/line_3/character3_3.png');
}

#wrap.add.line4.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/add/view/line_4/typo_name1.png');
}

#wrap.add.line4.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/add/view/line_4/character1.png');
}

#wrap.add.line4.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/add/view/line_4/typo_name2.png');
}

#wrap.add.line4.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/add/view/line_4/character2.png');
}

#wrap.add.line4.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/add/view/line_4/typo_name3.png');
}

#wrap.add.line4.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/add/view/line_4/character3_1.png');
}

#wrap.add.line4.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/add/view/line_4/character3_2.png');
}


/********** 루시엘 **********/
#wrap.luciel .charView_wrap .btn_paging a:hover {
    color: #185bbc;
}

#wrap.luciel .charView_wrap .btn_paging a:hover:before,
#wrap.luciel .charView_wrap .btn_paging a:hover:after {
    background-color: #185bbc;
}

#wrap.luciel .scrollbar-macosx>.scroll-element .scroll-bar {
    background-color: #2567c6;
}

#wrap.luciel {
    background-color: #2567c7;
}

#wrap.luciel .charView_wrap section aside .systemView a:hover {
    background-color: #418af2;
}

#wrap.luciel .charView_wrap section aside .classBtn ul li button {
    background-color: #3a7fe2;
}

#wrap.luciel .charView_wrap section aside .classBtn ul li button:hover {
    background-color: #5799f8;
}

#wrap.luciel .charView_wrap section aside .classBtn ul li button.active {
    color: #185bbc;
}

#wrap.luciel .charView_wrap section aside .lineTab dl dd a>span {
    border-color: #4088ef;
}

#wrap.luciel .charView_wrap section aside .lineTab dl.line_1 dd a.job_1:after {
    content: 'チリアーク';
}

#wrap.luciel .charView_wrap section aside .lineTab dl.line_1 dd a.job_2:after {
    content: 'ドレッドロード';
}

#wrap.luciel .charView_wrap section aside .lineTab dl.line_1 dd a.job_3:after {
    content: 'カタス\Aトロフィー';
}

#wrap.luciel .charView_wrap section aside .lineTab dl.line_2 dd a.job_1:after {
    content: 'ロイヤル\Aガード';
}

#wrap.luciel .charView_wrap section aside .lineTab dl.line_2 dd a.job_2:after {
    content: 'ノーブレス';
}

#wrap.luciel .charView_wrap section aside .lineTab dl.line_2 dd a.job_3:after {
    content: 'イノセント';
}

#wrap.luciel .charView_wrap section aside .lineTab dl.line_3 dd a.job_1:after {
    content: 'ディアブラ';
}

#wrap.luciel .charView_wrap section aside .lineTab dl.line_3 dd a.job_2:after {
    content: 'デモニオ';
}

#wrap.luciel .charView_wrap section aside .lineTab dl.line_3 dd a.job_3:after {
    content: 'ディアンゲリオン';
}

#wrap.luciel .charView_wrap section aside .lineTab dl.line_4 dd a.job_1:after {
    content: 'エンプティネス';
}

#wrap.luciel .charView_wrap section aside .lineTab dl.line_4 dd a.job_2:after {
    content: 'タービズ';
}

#wrap.luciel .charView_wrap section aside .lineTab dl.line_4 dd a.job_3:after {
    content: 'デメルシオ';
}

#wrap.luciel .charView_wrap section aside .lineTab dl dd>span.cur {
    background-image: url('../image/character/luciel/view/dot_h.png');
}

#wrap.luciel .charView_wrap section article .story:before {
    background-image: url('../image/character/luciel/view/typo_story.png');
}

#wrap.luciel .charView_wrap section article .skill {
    background-image: url('../image/character/luciel/view/bg_skill.png');
}

#wrap.luciel .charView_wrap section article .skill:before {
    background-image: url('../image/character/luciel/view/typo_skill.png');
}

#wrap.luciel .charView_wrap section article .skill .inner ul li.skill_1 a:before {
    background-image: url('../image/character/luciel/view/thumb_skill_2.jpg');
}

#wrap.luciel .charView_wrap section article .skill .inner ul li.skill_2 a:before {
    background-image: url('../image/character/luciel/view/thumb_skill_3.jpg');
}

#wrap.luciel .charView_wrap section article .skill .inner ul li.skill_3 a:before {
    background-image: url('../image/character/luciel/view/thumb_skill_4.jpg');
}

#wrap.luciel .charView_wrap section article .skill .inner ul li.skill_4 a:before {
    background-image: url('../image/character/luciel/view/thumb_skill_5.jpg');
}


#wrap.luciel.line0.job0 .charView_wrap section article .image h3 {
    background-image: url('../image/character/luciel/view/line_0/typo_name.png');
}

#wrap.luciel.line0.job0 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/luciel/view/line_0/character.png');
}

#wrap.luciel.line1.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/luciel/view/line_1/typo_name1.png');
}

#wrap.luciel.line1.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/luciel/view/line_1/character1.png');
}

#wrap.luciel.line1.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/luciel/view/line_1/typo_name2.png');
}

#wrap.luciel.line1.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/luciel/view/line_1/character2.png');
}

#wrap.luciel.line1.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/luciel/view/line_1/typo_name3.png');
}

#wrap.luciel.line1.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/luciel/view/line_1/character3_1.png');
}

#wrap.luciel.line1.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/luciel/view/line_1/character3_2.png');
}

#wrap.luciel.line2.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/luciel/view/line_2/typo_name1.png');
}

#wrap.luciel.line2.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/luciel/view/line_2/character1.png');
}

#wrap.luciel.line2.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/luciel/view/line_2/typo_name2.png');
}

#wrap.luciel.line2.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/luciel/view/line_2/character2.png');
}

#wrap.luciel.line2.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/luciel/view/line_2/typo_name3.png');
}

#wrap.luciel.line2.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/luciel/view/line_2/character3_2.png');
}

#wrap.luciel.line2.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/luciel/view/line_2/character3_1.png');
}

#wrap.luciel.line3.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/luciel/view/line_3/typo_name1.png');
}

#wrap.luciel.line3.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/luciel/view/line_3/character1_1.png');
}

#wrap.luciel.line3.job1 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/luciel/view/line_3/character1_2.png');
}

#wrap.luciel.line3.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/luciel/view/line_3/typo_name2.png');
}

#wrap.luciel.line3.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/luciel/view/line_3/character2_1.png');
}

#wrap.luciel.line3.job2 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/luciel/view/line_3/character2_2.png');
}

#wrap.luciel.line3.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/luciel/view/line_3/typo_name3.png');
}

#wrap.luciel.line3.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/luciel/view/line_3/character3_3.png');
}

#wrap.luciel.line3.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/luciel/view/line_3/character3_1.png');
}

#wrap.luciel.line3.job3 .charView_wrap section article .image>div.image3 {
    background-image: url('../image/character/luciel/view/line_3/character3_2.png');
}

#wrap.luciel.line4.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/luciel/view/line_4/typo_name1.png');
}

#wrap.luciel.line4.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/luciel/view/line_4/character1.png');
}

#wrap.luciel.line4.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/luciel/view/line_4/typo_name2.png');
}

#wrap.luciel.line4.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/luciel/view/line_4/character2.png');
}

#wrap.luciel.line4.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/luciel/view/line_4/typo_name3.png');
}

#wrap.luciel.line4.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/luciel/view/line_4/character3_2.png');
}

#wrap.luciel.line4.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/luciel/view/line_4/character3_1.png');
}


/********** 로제 **********/
#wrap.rose .charView_wrap .btn_paging a:hover {
    color: #e9bb19;
}

#wrap.rose .charView_wrap .btn_paging a:hover:before,
#wrap.rose .charView_wrap .btn_paging a:hover:after {
    background-color: #e9bb19;
}

#wrap.rose .scrollbar-macosx>.scroll-element .scroll-bar {
    background-color: #f0c429;
}

#wrap.rose {
    background-color: #f0c429;
}

#wrap.rose .charView_wrap section aside .systemView a:hover {
    background-color: #ffd73a;
}

#wrap.rose .charView_wrap section aside .classBtn ul li button {
    background-color: #f4ce38;
}

#wrap.rose .charView_wrap section aside .classBtn ul li button:hover {
    background-color: #fbd952;
}

#wrap.rose .charView_wrap section aside .classBtn ul li button.active {
    color: #e9bb19;
}

#wrap.rose .charView_wrap section aside .lineTab dl dd a>span {
    border-color: #ffdb4b;
}

#wrap.rose .charView_wrap section aside .lineTab dl.line_1 dd a.job_1:after {
    content: 'ヘビー\Aバレル';
}

#wrap.rose .charView_wrap section aside .lineTab dl.line_1 dd a.job_2:after {
    content: 'ストーム\Aトルーパー';
}

#wrap.rose .charView_wrap section aside .lineTab dl.line_1 dd a.job_3:after {
    content: 'テンペスト\Aバスター';
}

#wrap.rose .charView_wrap section aside .lineTab dl.line_2 dd a.job_1:after {
    content: 'ブラッディア';
}

#wrap.rose .charView_wrap section aside .lineTab dl.line_2 dd a.job_2:after {
    content: 'クリムゾン\Aロゼ';
}

#wrap.rose .charView_wrap section aside .lineTab dl.line_2 dd a.job_3:after {
    content: 'ブラック\Aマッサーカー';
}

#wrap.rose .charView_wrap section aside .lineTab dl.line_3 dd a.job_1:after {
    content: 'ヴァルキリー';
}

#wrap.rose .charView_wrap section aside .lineTab dl.line_3 dd a.job_2:after {
    content: 'フレイヤ';
}

#wrap.rose .charView_wrap section aside .lineTab dl.line_3 dd a.job_3:after {
    content: 'ミネルヴァ';
}

#wrap.rose .charView_wrap section aside .lineTab dl.line_4 dd a.job_1:after {
    content: 'メタル\Aハート';
}

#wrap.rose .charView_wrap section aside .lineTab dl.line_4 dd a.job_2:after {
    content: 'オプティマス';
}

#wrap.rose .charView_wrap section aside .lineTab dl.line_4 dd a.job_3:after {
    content: 'プライム\Aオペレーター';
}

#wrap.rose .charView_wrap section aside .lineTab dl dd>span.cur {
    background-image: url('../image/character/rose/view/dot_h.png');
}

#wrap.rose .charView_wrap section article .story:before {
    background-image: url('../image/character/rose/view/typo_story.png');
}

#wrap.rose .charView_wrap section article .skill {
    background-image: url('../image/character/rose/view/bg_skill.png');
}

#wrap.rose .charView_wrap section article .skill:before {
    background-image: url('../image/character/rose/view/typo_skill.png');
}

#wrap.rose .charView_wrap section article .skill .inner ul li.skill_1 a:before {
    background-image: url('../image/character/rose/view/thumb_skill_1.jpg');
}

#wrap.rose .charView_wrap section article .skill .inner ul li.skill_2 a:before {
    background-image: url('../image/character/rose/view/thumb_skill_2.jpg');
}

#wrap.rose .charView_wrap section article .skill .inner ul li.skill_3 a:before {
    background-image: url('../image/character/rose/view/thumb_skill_4.jpg');
}

#wrap.rose .charView_wrap section article .skill .inner ul li.skill_4 a:before {
    background-image: url('../image/character/rose/view/thumb_skill_3.jpg');
}


#wrap.rose.line0.job0 .charView_wrap section article .image h3 {
    background-image: url('../image/character/rose/view/line_0/typo_name.png');
}

#wrap.rose.line0.job0 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/rose/view/line_0/character.png');
}

#wrap.rose.line1.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/rose/view/line_1/typo_name1.png');
}

#wrap.rose.line1.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/rose/view/line_1/character1.png');
}

#wrap.rose.line1.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/rose/view/line_1/typo_name2.png');
}

#wrap.rose.line1.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/rose/view/line_1/character2.png');
}

#wrap.rose.line1.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/rose/view/line_1/typo_name3.png');
}

#wrap.rose.line1.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/rose/view/line_1/character3_2.png');
}

#wrap.rose.line1.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/rose/view/line_1/character3_1.png');
}

#wrap.rose.line2.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/rose/view/line_2/typo_name1.png');
}

#wrap.rose.line2.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/rose/view/line_2/character1.png');
}

#wrap.rose.line2.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/rose/view/line_2/typo_name2.png');
}

#wrap.rose.line2.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/rose/view/line_2/character2.png');
}

#wrap.rose.line2.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/rose/view/line_2/typo_name3.png');
}

#wrap.rose.line2.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/rose/view/line_2/character3_2.png');
}

#wrap.rose.line2.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/rose/view/line_2/character3_1.png');
}

#wrap.rose.line3.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/rose/view/line_3/typo_name1.png');
}

#wrap.rose.line3.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/rose/view/line_3/character1.png');
}

#wrap.rose.line3.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/rose/view/line_3/typo_name2.png');
}

#wrap.rose.line3.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/rose/view/line_3/character2.png');
}

#wrap.rose.line3.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/rose/view/line_3/typo_name3.png');
}

#wrap.rose.line3.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/rose/view/line_3/character3_2.png');
}

#wrap.rose.line3.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/rose/view/line_3/character3_1.png');
}

#wrap.rose.line4.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/rose/view/line_4/typo_name1.png');
}

#wrap.rose.line4.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/rose/view/line_4/character1.png');
}

#wrap.rose.line4.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/rose/view/line_4/typo_name2.png');
}

#wrap.rose.line4.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/rose/view/line_4/character2.png');
}

#wrap.rose.line4.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/rose/view/line_4/typo_name3.png');
}

#wrap.rose.line4.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/rose/view/line_4/character3_2.png');
}

#wrap.rose.line4.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/rose/view/line_4/character3_1.png');
}


/********** 아인 **********/
#wrap.ain .charView_wrap .btn_paging a:hover {
    color: #50b499;
}

#wrap.ain .charView_wrap .btn_paging a:hover:before,
#wrap.ain .charView_wrap .btn_paging a:hover:after {
    background-color: #50b499;
}

#wrap.ain .scrollbar-macosx>.scroll-element .scroll-bar {
    background-color: #55c6a8;
}

#wrap.ain {
    background-color: #56c7a9;
}

#wrap.ain .charView_wrap section aside .systemView a:hover {
    background-color: #6ae3c2;
}

#wrap.ain .charView_wrap section aside .classBtn ul li button {
    background-color: #67e0bf;
}

#wrap.ain .charView_wrap section aside .classBtn ul li button:hover {
    background-color: #81ebce;
}

#wrap.ain .charView_wrap section aside .classBtn ul li button.active {
    color: #50b499;
}

#wrap.ain .charView_wrap section aside .lineTab dl dd a>span {
    border-color: #62e0be;
}

#wrap.ain .charView_wrap section aside .lineTab dl.line_1 dd a.job_1:after {
    content: 'ロフティ：\Aエグザクター';
}

#wrap.ain .charView_wrap section aside .lineTab dl.line_1 dd a.job_2:after {
    content: 'アーム\Aソーマタージ';
}

#wrap.ain .charView_wrap section aside .lineTab dl.line_1 dd a.job_3:after {
    content: 'リヒター';
}

#wrap.ain .charView_wrap section aside .lineTab dl.line_2 dd a.job_1:after {
    content: 'ロフティ：\Aアンパセン';
}

#wrap.ain .charView_wrap section aside .lineTab dl.line_2 dd a.job_2:after {
    content: 'エブルーム\Aエモチオン';
}

#wrap.ain .charView_wrap section aside .lineTab dl.line_2 dd a.job_3:after {
    content: 'ブルーヘン';
}

#wrap.ain .charView_wrap section aside .lineTab dl.line_3 dd a.job_1:after {
    content: 'ロフティ：\Aヴァンデラー';
}

#wrap.ain .charView_wrap section aside .lineTab dl.line_3 dd a.job_2:after {
    content: 'アポス\Aタシア';
}

#wrap.ain .charView_wrap section aside .lineTab dl.line_3 dd a.job_3:after {
    content: 'ヘルシャー';
}

#wrap.ain .charView_wrap section aside .lineTab dl.line_4 dd a.job_1:after {
    content: 'ロフティ：\Aシュライアー';
}

#wrap.ain .charView_wrap section aside .lineTab dl.line_4 dd a.job_2:after {
    content: 'シャッツ\Aレプリゼ';
}

#wrap.ain .charView_wrap section aside .lineTab dl.line_4 dd a.job_3:after {
    content: 'ビゴット';
}

#wrap.ain .charView_wrap section aside .lineTab dl dd>span.cur {
    background-image: url('../image/character/ain/view/dot_h.png');
}

#wrap.ain .charView_wrap section article .story:before {
    background-image: url('../image/character/ain/view/typo_story.png');
}

#wrap.ain .charView_wrap section article .skill {
    background-image: url('../image/character/ain/view/bg_skill.png');
}

#wrap.ain .charView_wrap section article .skill:before {
    background-image: url('../image/character/ain/view/typo_skill.png');
}

#wrap.ain .charView_wrap section article .skill .inner ul li.skill_1 a:before {
    background-image: url('../image/character/ain/view/thumb_skill_2.jpg');
}

#wrap.ain .charView_wrap section article .skill .inner ul li.skill_2 a:before {
    background-image: url('../image/character/ain/view/thumb_skill_3.jpg');
}

#wrap.ain .charView_wrap section article .skill .inner ul li.skill_3 a:before {
    background-image: url('../image/character/ain/view/thumb_skill_4.jpg');
}

#wrap.ain .charView_wrap section article .skill .inner ul li.skill_4 a:before {
    background-image: url('../image/character/ain/view/thumb_skill_5.png');
}


#wrap.ain.line0.job0 .charView_wrap section article .image h3 {
    background-image: url('../image/character/ain/view/line_0/typo_name.png');
}

#wrap.ain.line0.job0 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/ain/view/line_0/character1.png');
}

#wrap.ain.line0.job0 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/ain/view/line_0/character2.png');
}

#wrap.ain.line1.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/ain/view/line_1/typo_name1.png');
}

#wrap.ain.line1.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/ain/view/line_1/character1.png');
}

#wrap.ain.line1.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/ain/view/line_1/typo_name2.png');
}

#wrap.ain.line1.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/ain/view/line_1/character2_1.png');
}

#wrap.ain.line1.job2 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/ain/view/line_1/character2_2.png');
}

#wrap.ain.line1.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/ain/view/line_1/typo_name3.png');
}

#wrap.ain.line1.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/ain/view/line_1/character3_3.png');
}

#wrap.ain.line1.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/ain/view/line_1/character3_1.png');
}

#wrap.ain.line1.job3 .charView_wrap section article .image>div.image3 {
    background-image: url('../image/character/ain/view/line_1/character3_2.png');
}

#wrap.ain.line2.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/ain/view/line_2/typo_name1.png');
}

#wrap.ain.line2.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/ain/view/line_2/character1.png');
}

#wrap.ain.line2.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/ain/view/line_2/typo_name2.png');
}

#wrap.ain.line2.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/ain/view/line_2/character2_1.png');
}

#wrap.ain.line2.job2 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/ain/view/line_2/character2_2.png');
}

#wrap.ain.line2.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/ain/view/line_2/typo_name3.png');
}

#wrap.ain.line2.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/ain/view/line_2/character3_3.png');
}

#wrap.ain.line2.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/ain/view/line_2/character3_1.png');
}

#wrap.ain.line2.job3 .charView_wrap section article .image>div.image3 {
    background-image: url('../image/character/ain/view/line_2/character3_2.png');
}

#wrap.ain.line3.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/ain/view/line_3/typo_name1.png');
}

#wrap.ain.line3.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/ain/view/line_3/character1.png');
}

#wrap.ain.line3.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/ain/view/line_3/typo_name2.png');
}

#wrap.ain.line3.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/ain/view/line_3/character2_1.png');
}

#wrap.ain.line3.job2 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/ain/view/line_3/character2_2.png');
}

#wrap.ain.line3.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/ain/view/line_3/typo_name3.png');
}

#wrap.ain.line3.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/ain/view/line_3/character3_3.png');
}

#wrap.ain.line3.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/ain/view/line_3/character3_1.png');
}

#wrap.ain.line3.job3 .charView_wrap section article .image>div.image3 {
    background-image: url('../image/character/ain/view/line_3/character3_2.png');
}

#wrap.ain.line4.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/ain/view/line_4/typo_name1.png');
}

#wrap.ain.line4.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/ain/view/line_4/character1.png');
}

#wrap.ain.line4.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/ain/view/line_4/typo_name2.png');
}

#wrap.ain.line4.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/ain/view/line_4/character2_1.png');
}

#wrap.ain.line4.job2 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/ain/view/line_4/character2_2.png');
}

#wrap.ain.line4.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/ain/view/line_4/typo_name3.png');
}

#wrap.ain.line4.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/ain/view/line_4/character3_3.png');
}

#wrap.ain.line4.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/ain/view/line_4/character3_1.png');
}

#wrap.ain.line4.job3 .charView_wrap section article .image>div.image3 {
    background-image: url('../image/character/ain/view/line_4/character3_2.png');
}


/********** 라비 **********/
#wrap.laby .charView_wrap .btn_paging a:hover {
    color: #e03668;
}

#wrap.laby .charView_wrap .btn_paging a:hover:before,
#wrap.laby .charView_wrap .btn_paging a:hover:after {
    background-color: #e03668;
}

#wrap.laby .scrollbar-macosx>.scroll-element .scroll-bar {
    background-color: #db4c77;
}

#wrap.laby {
    background-color: #de4d78;
}

#wrap.laby .charView_wrap section aside .systemView a:hover {
    background-color: #fa608e;
}

#wrap.laby .charView_wrap section aside .classBtn ul li button {
    background-color: #f75f8a;
}

#wrap.laby .charView_wrap section aside .classBtn ul li button:hover {
    background-color: #ff6f98;
}

#wrap.laby .charView_wrap section aside .classBtn ul li button.active {
    color: #e03668;
}

#wrap.laby .charView_wrap section aside .lineTab dl dd a>span {
    border-color: #ff759e;
}

#wrap.laby .charView_wrap section aside .lineTab dl.line_1 dd a.job_1:after {
    content: 'スパーキー\Aチャイルド';
}

#wrap.laby .charView_wrap section aside .lineTab dl.line_1 dd a.job_2:after {
    content: 'ランブルパー';
}

#wrap.laby .charView_wrap section aside .lineTab dl.line_1 dd a.job_3:after {
    content: 'エタニティー\Aウィナー;
}

#wrap.laby .charView_wrap section aside .lineTab dl.line_2 dd a.job_1:after {
    content: 'ツインクル\Aチャイルド';
}

#wrap.laby .charView_wrap section aside .lineTab dl.line_2 dd a.job_2:after {
    content: 'シャイニング\Aロマンティカ';
}

#wrap.laby .charView_wrap section aside .lineTab dl.line_2 dd a.job_3:after {
    content: 'ラディアント\Aソウル';
}

#wrap.laby .charView_wrap section aside .lineTab dl.line_3 dd a.job_1:after {
    content: 'ラスティー\Aチャイルド';
}

#wrap.laby .charView_wrap section aside .lineTab dl.line_3 dd a.job_2:after {
    content: 'デイドリーマー';
}

#wrap.laby .charView_wrap section aside .lineTab dl.line_3 dd a.job_3:after {
    content: 'ニーシャ\Aラビリンス';
}

#wrap.laby .charView_wrap section aside .lineTab dl.line_4 dd a.job_1:after {
    content: 'ラフ\Aチャイルド';
}

#wrap.laby .charView_wrap section aside .lineTab dl.line_4 dd a.job_2:after {
    content: 'パンキー\Aポペット';
}

#wrap.laby .charView_wrap section aside .lineTab dl.line_4 dd a.job_3:after {
    content: 'ツインズ\Aピカロ';
}

#wrap.laby .charView_wrap section aside .lineTab dl dd>span.cur {
    background-image: url('../image/character/laby/view/dot_h.png');
}

#wrap.laby .charView_wrap section article .story:before {
    background-image: url('../image/character/laby/view/typo_story.png');
}

#wrap.laby .charView_wrap section article .skill {
    background-image: url('../image/character/laby/view/bg_skill.png');
}

#wrap.laby .charView_wrap section article .skill:before {
    background-image: url('../image/character/laby/view/typo_skill.png');
}

#wrap.laby .charView_wrap section article .skill .inner ul li.skill_1 a:before {
    background-image: url('../image/character/laby/view/thumb_skill_2.jpg');
}

#wrap.laby .charView_wrap section article .skill .inner ul li.skill_2 a:before {
    background-image: url('../image/character/laby/view/thumb_skill_3.jpg');
}

#wrap.laby .charView_wrap section article .skill .inner ul li.skill_3 a:before {
    background-image: url('../image/character/laby/view/thumb_skill_4.jpg');
}

#wrap.laby .charView_wrap section article .skill .inner ul li.skill_4 a:before {
    background-image: url('../image/character/laby/view/thumb_skill_5.jpg');
}


#wrap.laby.line0.job0 .charView_wrap section article .image h3 {
    background-image: url('../image/character/laby/view/line_0/typo_name.png');
}

#wrap.laby.line0.job0 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/laby/view/line_0/character.png');
}

#wrap.laby.line1.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/laby/view/line_1/typo_name1.png');
}

#wrap.laby.line1.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/laby/view/line_1/character1.png');
}

#wrap.laby.line1.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/laby/view/line_1/typo_name2.png');
}

#wrap.laby.line1.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/laby/view/line_1/character2_1.png');
}

#wrap.laby.line1.job2 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/laby/view/line_1/character2_2.png');
}

#wrap.laby.line1.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/laby/view/line_1/typo_name3.png');
}

#wrap.laby.line1.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/laby/view/line_1/character3_3.png');
}

#wrap.laby.line1.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/laby/view/line_1/character3_1.png');
}

#wrap.laby.line1.job3 .charView_wrap section article .image>div.image3 {
    background-image: url('../image/character/laby/view/line_1/character3_2.png');
}

#wrap.laby.line2.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/laby/view/line_2/typo_name1.png');
}

#wrap.laby.line2.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/laby/view/line_2/character1.png');
}

#wrap.laby.line2.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/laby/view/line_2/typo_name2.png');
}

#wrap.laby.line2.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/laby/view/line_2/character2_1.png');
}

#wrap.laby.line2.job2 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/laby/view/line_2/character2_2.png');
}

#wrap.laby.line2.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/laby/view/line_2/typo_name3.png');
}

#wrap.laby.line2.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/laby/view/line_2/character3_2.png');
}

#wrap.laby.line2.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/laby/view/line_2/character3_1.png');
}

#wrap.laby.line3.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/laby/view/line_3/typo_name1.png');
}

#wrap.laby.line3.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/laby/view/line_3/character1.png');
}

#wrap.laby.line3.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/laby/view/line_3/typo_name2.png');
}

#wrap.laby.line3.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/laby/view/line_3/character2_1.png');
}

#wrap.laby.line3.job2 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/laby/view/line_3/character2_2.png');
}

#wrap.laby.line3.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/laby/view/line_3/typo_name3.png');
}

#wrap.laby.line3.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/laby/view/line_3/character3_3.png');
}

#wrap.laby.line3.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/laby/view/line_3/character3_1.png');
}

#wrap.laby.line3.job3 .charView_wrap section article .image>div.image3 {
    background-image: url('../image/character/laby/view/line_3/character3_2.png');
}

#wrap.laby.line4.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/laby/view/line_4/typo_name1.png');
}

#wrap.laby.line4.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/laby/view/line_4/character1.png');
}

#wrap.laby.line4.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/laby/view/line_4/typo_name2.png');
}

#wrap.laby.line4.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/laby/view/line_4/character2.png');
}

#wrap.laby.line4.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/laby/view/line_4/typo_name3.png');
}

#wrap.laby.line4.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/laby/view/line_4/character3_1.png');
}

#wrap.laby.line4.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/laby/view/line_4/character3_2.png');
}

#wrap.laby.line4.job3 .charView_wrap section article .image>div.image3 {
    background-image: url('../image/character/laby/view/line_4/character3_3.png');
}


/********** 노아 **********/
#wrap.noah .charView_wrap .btn_paging a:hover {
    color: #3b42af;
}

#wrap.noah .charView_wrap .btn_paging a:hover:before,
#wrap.noah .charView_wrap .btn_paging a:hover:after {
    background-color: #3b42af;
}

#wrap.noah .scrollbar-macosx>.scroll-element .scroll-bar {
    background-color: #3f46b0;
}

#wrap.noah {
    background-color: #4148b2;
}

#wrap.noah .charView_wrap section aside .systemView a:hover {
    background-color: #5d67de;
}

#wrap.noah .charView_wrap section aside .classBtn ul li button {
    background-color: #545dcf;
}

#wrap.noah .charView_wrap section aside .classBtn ul li button:hover {
    background-color: #656fe1;
}

#wrap.noah .charView_wrap section aside .classBtn ul li button.active {
    color: #3b42af;
}

#wrap.noah .charView_wrap section aside .lineTab dl dd a>span {
    border-color: #5d67de;
}

#wrap.noah .charView_wrap section aside .lineTab dl.line_1 dd a.job_1:after {
    content: 'セカンド\Aリベンジャー';
}

#wrap.noah .charView_wrap section aside .lineTab dl.line_1 dd a.job_2:after {
    content: 'サイレント\Aシャドウ';
}

#wrap.noah .charView_wrap section aside .lineTab dl.line_1 dd a.job_3:after {
    content: 'リベレーター';
}

#wrap.noah .charView_wrap section aside .lineTab dl.line_2 dd a.job_1:after {
    content: 'セカンド\Aセレクション';
}

#wrap.noah .charView_wrap section aside .lineTab dl.line_2 dd a.job_2:after {
    content: 'ステラ\Aキャスター';
}

#wrap.noah .charView_wrap section aside .lineTab dl.line_2 dd a.job_3:after {
    content: 'セレスティア';
}

#wrap.noah .charView_wrap section aside .lineTab dl.line_3 dd a.job_1:after {
    content: 'セカンド\Aグリーフ';
}

#wrap.noah .charView_wrap section aside .lineTab dl.line_3 dd a.job_2:after {
    content: 'ペール\Aピルグリム';
}

#wrap.noah .charView_wrap section aside .lineTab dl.line_3 dd a.job_3:after {
    content: 'ニュクス\Aピエタ';
}

#wrap.noah .charView_wrap section aside .lineTab dl.line_4 dd a.job_1:after {
    content: 'セカンド\Aディジェクション';
}

#wrap.noah .charView_wrap section aside .lineTab dl.line_4 dd a.job_2:after {
    content: 'ヘイジー\Aディリュージョン';
}

#wrap.noah .charView_wrap section aside .lineTab dl.line_4 dd a.job_3:after {
    content: 'モルペウス';
}

#wrap.noah .charView_wrap section aside .lineTab dl dd>span.cur {
    background-image: url('../image/character/noah/view/dot_h.png');
}

#wrap.noah .charView_wrap section article .story:before {
    background-image: url('../image/character/noah/view/typo_story.png');
}

#wrap.noah .charView_wrap section article .skill {
    background-image: url('../image/character/noah/view/bg_skill.png');
}

#wrap.noah .charView_wrap section article .skill:before {
    background-image: url('../image/character/noah/view/typo_skill.png');
}

#wrap.noah .charView_wrap section article .skill .inner ul li.skill_1 a:before {
    background-image: url('../image/character/noah/view/thumb_skill_2.jpg');
}

#wrap.noah .charView_wrap section article .skill .inner ul li.skill_2 a:before {
    background-image: url('../image/character/noah/view/thumb_skill_3.jpg');
}

#wrap.noah .charView_wrap section article .skill .inner ul li.skill_3 a:before {
    background-image: url('../image/character/noah/view/thumb_skill_4.jpg');
}

#wrap.noah .charView_wrap section article .skill .inner ul li.skill_4 a:before {
    background-image: url('../image/character/noah/view/thumb_skill_5.png');
}

/* 노아 스킬 세개일때
#wrap.noah .charView_wrap section article .skill .inner ul li.skill_4 a {cursor:default;}
#wrap.noah .charView_wrap section article .skill .inner ul li.skill_4 a:after {display:none;} */


#wrap.noah.line0.job0 .charView_wrap section article .image h3 {
    background-image: url('../image/character/noah/view/line_0/typo_name.png');
}

#wrap.noah.line0.job0 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/noah/view/line_0/character.png');
}

#wrap.noah.line1.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/noah/view/line_1/typo_name1.png');
}

#wrap.noah.line1.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/noah/view/line_1/character1.png');
}

#wrap.noah.line1.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/noah/view/line_1/typo_name2.png');
}

#wrap.noah.line1.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/noah/view/line_1/character2.png');
}

#wrap.noah.line1.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/noah/view/line_1/typo_name3.png');
}

#wrap.noah.line1.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/noah/view/line_1/character3_2.png');
}

#wrap.noah.line1.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/noah/view/line_1/character3_1.png');
}

#wrap.noah.line2.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/noah/view/line_2/typo_name1.png');
}

#wrap.noah.line2.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/noah/view/line_2/character1.png');
}

#wrap.noah.line2.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/noah/view/line_2/typo_name2.png');
}

#wrap.noah.line2.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/noah/view/line_2/character2.png');
}

#wrap.noah.line2.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/noah/view/line_2/typo_name3.png');
}

#wrap.noah.line2.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/noah/view/line_2/character3_2.png');
}

#wrap.noah.line2.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/noah/view/line_2/character3_1.png');
}

#wrap.noah.line2.job3 .charView_wrap section article .image>div.image3 {
    background-image: url('../image/character/noah/view/line_2/character3_3.png');
}

#wrap.noah.line3.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/noah/view/line_3_/typo_name1.png');
}

#wrap.noah.line3.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/noah/view/line_3_/character1.png');
}

#wrap.noah.line3.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/noah/view/line_3_/typo_name2.png');
}

#wrap.noah.line3.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/noah/view/line_3_/character2.png');
}

#wrap.noah.line3.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/noah/view/line_3_/typo_name3.png');
}

#wrap.noah.line3.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/noah/view/line_3_/character3_2.png');
}

#wrap.noah.line3.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/noah/view/line_3_/character3_1.png');
}

#wrap.noah.line3.job3 .charView_wrap section article .image>div.image3 {
    background-image: url('../image/character/noah/view/line_3_/character3_3.png');
}

#wrap.noah.line4.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/noah/view/line_4/typo_name1.png');
}

#wrap.noah.line4.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/noah/view/line_4/character1.png');
}

#wrap.noah.line4.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/noah/view/line_4/typo_name2.png');
}

#wrap.noah.line4.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/noah/view/line_4/character2.png');
}

#wrap.noah.line4.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/noah/view/line_4/typo_name3.png');
}

#wrap.noah.line4.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/noah/view/line_4/character3_2.png');
}

#wrap.noah.line4.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/noah/view/line_4/character3_1.png');
}

#wrap.noah.line4.job3 .charView_wrap section article .image>div.image3 {
    background-image: url('../image/character/noah/view/line_4/character3_3.png');
}




/********** 리티아 **********/
#wrap.lithia .charView_wrap .btn_paging a:hover {
    color: #429c70;
}

#wrap.lithia .charView_wrap .btn_paging a:hover:before,
#wrap.lithia .charView_wrap .btn_paging a:hover:after {
    background-color: #429c70;
}

#wrap.lithia .scrollbar-macosx>.scroll-element .scroll-bar {
    background-color: #2ec77c;
}

#wrap.lithia {
    background-color: #429c70;
}

#wrap.lithia .charView_wrap section aside .systemView a:hover {
    background-color: #52b886;
}

#wrap.lithia .charView_wrap section aside .classBtn ul li button {
    background-color: #2e7b55;
}

#wrap.lithia .charView_wrap section aside .classBtn ul li button:hover {
    background-color: #2ec77c;
}

#wrap.lithia .charView_wrap section aside .classBtn ul li button.active {
    color: #439c70;
}

#wrap.lithia .charView_wrap section aside .lineTab dl dd a>span {
    border-color: #2ec77c;
}

#wrap.lithia .charView_wrap section aside .lineTab dl.line_1 dd a.job_1:after {
    content: 'ポテン\Aファインダー';
}

#wrap.lithia .charView_wrap section aside .lineTab dl.line_1 dd a.job_2:after {
    content: 'マイティー\Aマイナー';
}

#wrap.lithia .charView_wrap section aside .lineTab dl.line_1 dd a.job_3:after {
    content: 'ジェムブリス';
}

#wrap.lithia .charView_wrap section aside .lineTab dl.line_2 dd a.job_1:after {
    content: 'フォーチュン\Aファインダー';
}

#wrap.lithia .charView_wrap section aside .lineTab dl.line_2 dd a.job_2:after {
    content: 'グリーディー\Aワンダー';
}

#wrap.lithia .charView_wrap section aside .lineTab dl.line_2 dd a.job_3:after {
    content: 'アヴァリス';
}

#wrap.lithia .charView_wrap section aside .lineTab dl.line_3 dd a.job_1:after {
    content: 'パス\Aファインダー';
}

#wrap.lithia .charView_wrap section aside .lineTab dl.line_3 dd a.job_2:after {
    content: 'リマ\Aクラヴィス';
}

#wrap.lithia .charView_wrap section aside .lineTab dl.line_3 dd a.job_3:after {
    content: 'アクリュース';
}

#wrap.lithia .charView_wrap section aside .lineTab dl.line_4 dd a.job_1:after {
    content: 'トリック\Aファインダー';
}

#wrap.lithia .charView_wrap section aside .lineTab dl.line_4 dd a.job_2:after {
    content: 'シニカル\Aスニーア';
}

#wrap.lithia .charView_wrap section aside .lineTab dl.line_4 dd a.job_3:after {
    content: 'ミスチーフ';
}

#wrap.lithia .charView_wrap section aside .lineTab dl dd>span.cur {
    background-image: url('../image/character/lithia/view/dot_h.png');
}

#wrap.lithia .charView_wrap section article .story:before {
    background-image: url('../image/character/lithia/view/typo_story.png');
}

#wrap.lithia .charView_wrap section article .skill {
    background-image: url('../image/character/lithia/view/bg_skill.png');
}

#wrap.lithia .charView_wrap section article .skill:before {
    background-image: url('../image/character/lithia/view/typo_skill.png');
}

#wrap.lithia .charView_wrap section article .skill .inner ul li.skill_1 a:before {
    background-image: url('../image/character/lithia/view/thumb_skill_1.png');
}

#wrap.lithia .charView_wrap section article .skill .inner ul li.skill_2 a:before {
    background-image: url('../image/character/lithia/view/thumb_skill_2.jpg');
}

#wrap.lithia .charView_wrap section article .skill .inner ul li.skill_3 a:before {
    background-image: url('../image/character/lithia/view/thumb_skill_3.jpg');
}

#wrap.lithia .charView_wrap section article .skill .inner ul li.skill_4 a:before {
    background-image: url('../image/character/lithia/view/thumb_skill_4.jpg');
}

/* 리티아 스킬 세개일때
#wrap.lithia .charView_wrap section article .skill .inner ul li.skill_4 a {cursor:default;}
#wrap.lithia .charView_wrap section article .skill .inner ul li.skill_4 a:after {display:none;} */


#wrap.lithia.line0.job0 .charView_wrap section article .image h3 {
    background-image: url('../image/character/lithia/view/line_0/typo_name.png');
}

#wrap.lithia.line0.job0 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/lithia/view/line_0/character.png');
}

#wrap.lithia.line1.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/lithia/view/line_1/typo_name1.png');
}

#wrap.lithia.line1.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/lithia/view/line_1/character1.png');
}

#wrap.lithia.line1.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/lithia/view/line_1/typo_name2.png');
}

#wrap.lithia.line1.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/lithia/view/line_1/character2.png');
}

#wrap.lithia.line1.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/lithia/view/line_1/typo_name3.png');
}

#wrap.lithia.line1.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/lithia/view/line_1/character3_2.png');
}

#wrap.lithia.line1.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/lithia/view/line_1/character3_1.png');
}

#wrap.lithia.line2.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/lithia/view/line_2/typo_name1.png');
}

#wrap.lithia.line2.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/lithia/view/line_2/character1.png');
}

#wrap.lithia.line2.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/lithia/view/line_2/typo_name2.png');
}

#wrap.lithia.line2.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/lithia/view/line_2/character2.png');
}

#wrap.lithia.line2.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/lithia/view/line_2/typo_name3.png');
}

#wrap.lithia.line2.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/lithia/view/line_2/character3_2.png');
}

#wrap.lithia.line2.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/lithia/view/line_2/character3_1.png');
}

#wrap.lithia.line3.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/lithia/view/line_3/typo_name1.png');
}

#wrap.lithia.line3.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/lithia/view/line_3/character1.png');
}

#wrap.lithia.line3.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/lithia/view/line_3/typo_name2.png');
}

#wrap.lithia.line3.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/lithia/view/line_3/character2.png');
}

#wrap.lithia.line3.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/lithia/view/line_3/typo_name3.png');
}

#wrap.lithia.line3.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/lithia/view/line_3/character3_2.png');
}

#wrap.lithia.line3.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/lithia/view/line_3/character3_1.png');
}

#wrap.lithia.line4.job1 .charView_wrap section article .image h3 {
    background-image: url('../image/character/lithia/view/line_4/typo_name1.png');
}

#wrap.lithia.line4.job1 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/lithia/view/line_4/character1.png');
}

#wrap.lithia.line4.job2 .charView_wrap section article .image h3 {
    background-image: url('../image/character/lithia/view/line_4/typo_name2.png');
}

#wrap.lithia.line4.job2 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/lithia/view/line_4/character2.png');
}

#wrap.lithia.line4.job3 .charView_wrap section article .image h3 {
    background-image: url('../image/character/lithia/view/line_4/typo_name3.png');
}

#wrap.lithia.line4.job3 .charView_wrap section article .image>div.image1 {
    background-image: url('../image/character/lithia/view/line_4/character3_2.png');
}

#wrap.lithia.line4.job3 .charView_wrap section article .image>div.image2 {
    background-image: url('../image/character/lithia/view/line_4/character3_1.png');
}