﻿.character_view {padding:127px 0 0 0}
.blind {display:block;overflow:hidden;visibility:hidden;text-indent:-9999px;font-size:0;height:0}
.modal {background-size:contain; width:100%; height:100%; position:fixed; z-index:9999999; top: 0; left: 0; cursor:url('https://contents.elsword.com/Static/guide/common/btn_close_cursor.cur'), pointer;}

/* 컨텐츠 컨테이너 */
.cv_cont.inner {width:780px}

/* 초상화 */
.cv_list { text-align:center; margin:0 auto 0 auto; width:740px; padding-top:20px; }
.cv_portrait { margin:3px 3px 0 3px; width:90px; height: 90px; background-repeat:no-repeat;background-position:-90px 0; cursor:pointer; display:inline-block; border:0px solid red;}
.cv_portrait.active, .cv_portrait:hover { background-position:0 0; }
.cv_list .elsword   { background-image:url('../guide/portrait/01.elsword.png') }
.cv_list .aisha     { background-image:url('../guide/portrait/02.aisha.png') }
.cv_list .rena      { background-image:url('../guide/portrait/03.rena.png') }
.cv_list .raven     { background-image:url('../guide/portrait/04.raven.png') }
.cv_list .eve       { background-image:url('../guide/portrait/05.eve.png') }
.cv_list .chung     { background-image:url('../guide/portrait/06.chung.png') }
.cv_list .ara       { background-image:url('../guide/portrait/07.ara.png') }
.cv_list .elisis    { background-image:url('../guide/portrait/08.elisis.png') }
.cv_list .add       { background-image:url('../guide/portrait/09.add.png') }
.cv_list .luciel    { background-image:url('../guide/portrait/10.luciel.png') }
.cv_list .rose      { background-image:url('../guide/portrait/11.rose.png') }
.cv_list .ain       { background-image:url('../guide/portrait/12.ain.png') }
.cv_list .laby      { background-image:url('../guide/portrait/13.laby.png') }
.cv_list .noah      { background-image:url('../guide/portrait/14.noah.png') }

.character { display:none; }
.character.active { display:block; animation:fadein .8s;-o-animation:fadein .8s;-moz-animation:fadein .8s;-webkit-animation:fadein .8s;}

/* 전직 라인 테이블 */
.cv_cont .cv_line {position:relative;float:right;margin:0 149px 38px 0}
.cv_cont .cv_line.line4 {margin:0 94px 38px 0}
.cv_cont .cv_line.line4:before {width:445px;height:23px;margin-left:-223px;background-image:url('../guide/common/bg_character_line4.png')}
.cv_cont .cv_line.line4 .cvl_list {margin:0 0 0 5px}
/*.cv_cont .cv_line.line1 {margin:0 94px 38px 0}*/
.cv_cont .cv_line.line1:before {height:23px;background-image:url('../guide/common/bg_character_line1.png')}
/*.cv_cont .cv_line.line1 .cvl_list {margin:0 0 0 5px}*/
.cv_cont .cv_line:before {position:absolute;top:84px;left:50%;display:block;width:353px;height:26px;margin-left:-176px;content:'';background-repeat:no-repeat;background-position:0 0;background-image:url('../guide/common/bg_character_line3.png')}
.cv_cont .cv_line .cvl_name {display:block;width:144px;margin:31px auto 34px;padding:15px 0;text-align:center;font-size:14px;font-weight:bold;color:#fff}
.cv_cont .cv_line .cvl_name:hover {text-decoration:underline; text-underline-position:under;}
.cv_cont .cv_line .cvl_list {float:left;width:143px;margin:0 0 0 27px;padding:1px;border:1px solid #bebebe}
.cv_cont .cv_line .cvl_list.first {margin-left:0}
.cv_cont .cv_line .cvl_list li {position:relative;}
.cv_cont .cv_line .cvl_list li.tit {padding:5px 0;text-align:center;color:#fff;background-color:#bebebe;border-bottom:1px solid #e5e5e5;}
.cv_cont .cv_line .cvl_list li.tit:after {position:absolute;left:50%;top:25px;margin-left:-12px;border-top:11px solid #bebebe;border-right:11px solid transparent;border-bottom:11px solid transparent;border-left:11px solid transparent;content:''}
.cv_cont .cv_line .cvl_list li.des:before {position:absolute;top:-2px;width:100%;height:8px;background:url('../guide/common/bg_character_arrow.png') no-repeat 0 0;content:''}
.cv_cont .cv_line .cvl_list li.des .btn_job {display:block;padding:18px 0 13px;line-height:22px;text-align:center;font-size:14px;color:#666}
.cv_cont .cv_line .btn_job.active {text-decoration:underline; text-underline-position:under;}
.cv_cont .cv_line .cvl_list li.des .btn_job > span {display:block}
.cv_cont .cv_line .cvl_list li.des.active .btn_job > span {font-weight:normal;}
.cv_cont .cv_line .cvl_list li.des.active .btn_job .name {text-decoration:underline; text-underline-position:under;}
.cv_cont .cv_line .cvl_list li.des .btn_job:hover .name {text-decoration:underline; text-underline-position:under;}
.cv_cont .cv_line .cvl_list li.des .btn_job .order {font-size:13px;line-height:10px;margin-top:-3px;margin-bottom:5px; color:#888;}
.cv_cont .cv_line .cvl_list li.des .btn_job .name {line-height:16px; height:35px; display:table-cell; vertical-align:middle; width:139px;}
.cv_cont .cv_line .cvl_list li.tit + .des:before {content:none}

.elsword .cv_cont .cv_line .cvl_list.active li.tit {background-color:#c71c00;border-bottom-color:#e9a499}
.elsword .cv_cont .cv_line .cvl_list.active li.tit:after{border-top:11px solid #c71c00}
.aisha .cv_cont .cv_line .cvl_list.active li.tit {background-color:#853ec8;border-bottom-color:#ceb2e9}
.aisha .cv_cont .cv_line .cvl_list.active li.tit:after{border-top:12px solid #853ec8}
.rena .cv_cont .cv_line .cvl_list.active li.tit {background-color:#75ce18;border-bottom-color:#c8eba3}
.rena .cv_cont .cv_line .cvl_list.active li.tit:after{border-top:12px solid #75ce18}
.raven .cv_cont .cv_line .cvl_list.active li.tit {background-color:#282828;border-bottom-color:#a9a9a9}
.raven .cv_cont .cv_line .cvl_list.active li.tit:after{border-top:12px solid #282828}
.eve .cv_cont .cv_line .cvl_list.active li.tit {background-color:#ef97bd;border-bottom-color:#f9d5e5}
.eve .cv_cont .cv_line .cvl_list.active li.tit:after{border-top:12px solid #ef97bd}
.chung .cv_cont .cv_line .cvl_list.active li.tit {background-color:#00a8e6;border-bottom-color:#99dcf5}
.chung .cv_cont .cv_line .cvl_list.active li.tit:after{border-top:12px solid #00a8e6}
.ara .cv_cont .cv_line .cvl_list.active li.tit {background-color:#fe9f01;border-bottom-color:#ffd999}
.ara .cv_cont .cv_line .cvl_list.active li.tit:after{border-top:12px solid #fe9f01}
.elisis .cv_cont .cv_line .cvl_list.active li.tit {background-color:#d00040;border-bottom-color:#ec99b3}
.elisis .cv_cont .cv_line .cvl_list.active li.tit:after{border-top:12px solid #d00040}
.add .cv_cont .cv_line .cvl_list.active li.tit {background-color:#a79fdf;border-bottom-color:#dcd9f2}
.add .cv_cont .cv_line .cvl_list.active li.tit:after{border-top:12px solid #a79fdf}
.luciel .cv_cont .cv_line .cvl_list.active li.tit {background-color:#202cf5;border-bottom-color:#dcd9f2}
.luciel .cv_cont .cv_line .cvl_list.active li.tit:after{border-top:12px solid #202cf5}
.rose .cv_cont .cv_line .cvl_list.active li.tit {color:#000;background-color:#fff653;border-bottom-color:#fffbba}
.rose .cv_cont .cv_line .cvl_list.active li.tit:after{border-top:12px solid #fff653}
.ain .cv_cont .cv_line .cvl_list.active li.tit {background-color:#19d2a8;border-bottom-color:#a3eddc}
.ain .cv_cont .cv_line .cvl_list.active li.tit:after{border-top:12px solid #19d2a8}
.laby .cv_cont .cv_line .cvl_list.active li.tit {background-color:#fe2d87;border-bottom-color:#ffd2e5}
.laby .cv_cont .cv_line .cvl_list.active li.tit:after{border-top:12px solid #fe2d87}
.noah .cv_cont .cv_line .cvl_list.active li.tit {background-color:#131a59;border-bottom-color:#40467B}
.noah .cv_cont .cv_line .cvl_list.active li.tit:after{border-top:12px solid #131a59}
.elsword .cv_cont .cv_line .cvl_list li.des.active .btn_job {color:#c71c00}
.aisha .cv_cont .cv_line .cvl_list li.des.active .btn_job {color:#853ec8}
.rena .cv_cont .cv_line .cvl_list li.des.active .btn_job {color:#75ce18}
.raven .cv_cont .cv_line .cvl_list li.des.active .btn_job {color:#282828}
.eve .cv_cont .cv_line .cvl_list li.des.active .btn_job {color:#ef97bd}
.chung .cv_cont .cv_line .cvl_list li.des.active .btn_job {color:#00a8e6}
.ara .cv_cont .cv_line .cvl_list li.des.active .btn_job {color:#fe9f01}
.elisis .cv_cont .cv_line .cvl_list li.des.active .btn_job {color:#d00040}
.add .cv_cont .cv_line .cvl_list li.des.active .btn_job {color:#a79fdf}
.luciel .cv_cont .cv_line .cvl_list li.des.active .btn_job {color:#202cf5}
.rose .cv_cont .cv_line .cvl_list li.des.active .btn_job {color:#000}
.ain .cv_cont .cv_line .cvl_list li.des.active .btn_job {color:#19d2a8}
.laby .cv_cont .cv_line .cvl_list li.des.active .btn_job {color:#fe2d87}
.noah .cv_cont .cv_line .cvl_list li.des.active .btn_job {color:#131a59}

.elsword .cv_cont .cv_title:after,
.elsword .cv_cont .cv_title .system,
.elsword .cv_cont .cv_line .cvl_name,
.elsword .cv_cont .cv_illust .illust_list li:first-child .gf_btn_illust {background-color:#c71c00}
.aisha .cv_cont .cv_title:after,
.aisha .cv_cont .cv_title .system,
.aisha .cv_cont .cv_line .cvl_name,
.aisha .cv_cont .cv_illust .illust_list li:first-child .gf_btn_illust {background-color:#853ec8}
.rena .cv_cont .cv_title:after,
.rena .cv_cont .cv_title .system ,
.rena .cv_cont .cv_line .cvl_name,
.rena .cv_cont .cv_illust .illust_list li:first-child .gf_btn_illust {background-color:#75ce18}
.raven .cv_cont .cv_title:after,
.raven .cv_cont .cv_title .system,
.raven .cv_cont .cv_line .cvl_name,
.raven .cv_cont .cv_illust .illust_list li:first-child .gf_btn_illust {background-color:#282828}
.eve .cv_cont .cv_title:after,
.eve .cv_cont .cv_title .system,
.eve .cv_cont .cv_line .cvl_name,
.eve .cv_cont .cv_illust .illust_list li:first-child .gf_btn_illust {background-color:#ef97bd}
.chung .cv_cont .cv_title:after,
.chung .cv_cont .cv_title .system,
.chung .cv_cont .cv_line .cvl_name,
.chung .cv_cont .cv_illust .illust_list li:first-child .gf_btn_illust {background-color:#00a8e6}
.ara .cv_cont .cv_title:after,
.ara .cv_cont .cv_title .system,
.ara .cv_cont .cv_line .cvl_name,
.ara .cv_cont .cv_illust .illust_list li:first-child .gf_btn_illust {background-color:#fe9f01}
.elisis .cv_cont .cv_title:after,
.elisis .cv_cont .cv_title .system,
.elisis .cv_cont .cv_line .cvl_name,
.elisis .cv_cont .cv_illust .illust_list li:first-child .gf_btn_illust {background-color:#d00040}
.add .cv_cont .cv_title:after,
.add .cv_cont .cv_title .system,
.add .cv_cont .cv_line .cvl_name,
.add .cv_cont .cv_illust .illust_list li:first-child .gf_btn_illust {background-color:#a79fdf}
.luciel .cv_cont .cv_title:after,
.luciel .cv_cont .cv_title .system,
.luciel .cv_cont .cv_line .cvl_name,
.luciel .cv_cont .cv_illust .illust_list li:first-child .gf_btn_illust {background-color:#202cf5}
.rose .cv_cont .cv_title:after,
.rose .cv_cont .cv_title .system,
.rose .cv_cont .cv_title .system .gf_btn_system,
.rose .cv_cont .cv_line .cvl_name,
.rose .cv_cont .cv_illust .illust_list li:first-child .gf_btn_illust {color:#000;background-color:#fff653}
.ain .cv_cont .cv_title:after,
.ain .cv_cont .cv_title .system,
.ain .cv_cont .cv_line .cvl_name,
.ain .cv_cont .cv_illust .illust_list li:first-child .gf_btn_illust {background-color:#19d2a8}
.laby .cv_cont .cv_title:after,
.laby .cv_cont .cv_title .system,
.laby .cv_cont .cv_line .cvl_name,
.laby .cv_cont .cv_illust .illust_list li:first-child .gf_btn_illust {background-color:#fe2d87}
.noah .cv_cont .cv_title:after,
.noah .cv_cont .cv_title .system,
.noah .cv_cont .cv_line .cvl_name,
.noah .cv_cont .cv_illust .illust_list li:first-child .gf_btn_illust {background-color:#131a59}

/* 일러스트 보기 */
.cv_cont .cv_illust {clear:both}
.cv_cont .cv_illust .illust_list {overflow:hidden;margin:0 0 32px 0;text-align:center;font-size:0;/*background:url('../guide/common/bg_line_diagonal_s.png') transparent repeat*/}
.cv_cont .cv_illust .illust_list li {font-size:14px}
.cv_cont .cv_illust .illust_list li,
.cv_cont .cv_illust .illust_list li .gf_btn_illust {display:inline-block;*display:inline;zoom:1;}
.cv_cont .cv_illust .illust_list li .gf_btn_illust:hover { text-decoration:underline; text-underline-position:under;}
.cv_cont .cv_illust .illust_list li .gf_btn_illust {width:560px;height:50px;line-height:50px;text-align:center;font-size:14px;font-weight:bold;color:#fff;background-color:#bebebe}
.cv_cont .cv_illust .illust_list li .gf_btn_illust.narrow {width:280px}

/* 타이틀, 시스템 */
.cv_cont .cv_title {position:relative;height:44px;margin:10px 60px;border-bottom:3px solid #ccc;}
.cv_cont .cv_title:after{position:absolute;bottom:-3px;left:0;display:block;width:250px;height:3px;content:""}
.cv_cont .cv_title .tit {float:left;margin:0 15px 0 0;font-size:28px;line-height:40px;color:#3a312a;letter-spacing:-1px;}
.cv_cont .cv_title .system {float:left;margin:1px 0 0 0}
.cv_cont .cv_title .system .gf_btn_system {display:block;min-width:148px;height:35px;padding:0 30px;line-height:35px;text-align:center;color:#fff}

/* 소개 */
.cv_description { margin:0 65px; line-height:20pt; display:none; min-height:270px; color:#555; word-break:normal; word-wrap:break-word; }
.cv_description.active { display:block; animation:fadein .8s;-o-animation:fadein .8s;-moz-animation:fadein .8s;-webkit-animation:fadein .8s;}

@keyframes fadein{from{opacity:0;}to{opacity:1;}}
@-o-keyframes fadein{from{opacity:0;}to{opacity:1;}}
@-moz-keyframes fadein{from{opacity:0;}to{opacity:1;}}
@-webkit-keyframes fadein{from{opacity:0;}to{opacity:1;}}

/* 가이드 */
.guide { margin-bottom:-30px; }
.guide img { display:block; }