@charset "utf-8";

/* ----------------------------------------------
 * HanbitSoft Service Development Team
 * GE 캐릭터 미리보기 네나 Stylesheet
 * Author - jhkim88@hanbitsoft.co.kr 20170616
------------------------------------------------- */

/* CSS Reset
-------------------------------------------------------------- */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, strong, small, dl, dt, dd, ol, ul, li, fieldset, form, select, input, button, label{margin:0;padding:0;font-size:100%}
img, fieldset, button{border:0}
body, input, button, textarea, select, table, kbd{line-height:1.2;font-family:'돋움', dotum, Helvetica, sans-serif;font-size:12px;color:#000}
img{vertical-align:middle}
ol, ul{list-style:none}
button, label{cursor:pointer}
button::-moz-focus-inner, input::-moz-focus-inner{padding:0;border:0}
table{border-collapse:collapse;border-spacing:0}
caption, legend{width:0;height:0;font-size:0;line-height:0;text-indent:-9999px;visibility:hidden}

/* Reserved Class
-------------------------------------------------------------- */
.irPm{display:block;overflow:hidden;font-size:0;line-height:0;text-indent:-9999px}
.irWa{display:block;overflow:hidden;position:relative;width:100%;height:100%;z-index:-1}
.blind{width:1px;height:1px;font-size:0;line-height:0;position:absolute;top:0;left:-1000%;overflow:hidden}
.show{display:block}
.hide{display:none}
.fL{float:left}
.fR{float:right}
.clearFix{zoom:1}
.clearFix:after{clear:both;display:block;content:''}

/* Styles
-------------------------------------------------------------- */
body{width:100%;height:100%;background-color:#ffffff}

.sp{display:inline-block;overflow:hidden;width:auto;height:18px;background:url(../images/sp.png) no-repeat 0 0;line-height:999px;vertical-align:top}

#wrap{overflow:hidden;position:relative;width:100%;min-width:1100px}
/* 퀵메뉴 */
.cp-quick-menu{
  position:absolute;
  left:50%;
  top:0;
  margin-left:-1000px;
  width:2000px;
  height:15px;
  background-color: #252525;
  box-shadow: 3px 5px 5px rgba(0, 0, 0, .5);
  z-index:1000;
}
.cp-quick-menu--list{
  position:absolute;
  display: flex;
  align-items: center;
  left:458px;
  top: 14px;
  padding: 0px 0px 15px 10px;
  background-color: #252525;
  box-shadow: 0 5px 6px rgba(0, 0, 0, .5);
}
.cp-quick-menu--list::before{
  content: '';
  position: absolute;
  top: -10px;
  left:-25px;
  width: 34px;
  height: 59px;
  background-color: #252525;
  border-radius: 0 0 0 15px;
  rotate: -27deg;
}
.cp-quick-menu--list:after{
  content: '';
  position: absolute;
  top: -10px;
  right:-25px;
  width: 34px;
  height: 59px;
  background-color: #252525;
  border-radius: 0 0 15px 0;
  rotate: 27deg;
}
.cp-quick-menu--list li{
  position:relative;
  margin-left:50px;
}

.cp-quick-menu--list li .dash{
  position:absolute;
  display:block;
  top:50%;
  left:-24px;
  transform: translateY(-50%);
  width:2px;
  height:8px;
  background-color:#5d5c5c;
}
/* .cp-quick-menu{position:absolute;left:50%;top:0;margin-left:-1000px;width:2000px;height:72px;background:url(../images/quickmenu_bg.png) no-repeat 0 0;z-index:1000}
.cp-quick-menu--list{position:absolute;left:458px;top:20px}
.cp-quick-menu--list li{position:relative;float:left;margin-left:50px}
.cp-quick-menu--list li .dash{position:absolute;left:-24px;top:3px;display:block;width:2px;height:8px;background-color:#5d5c5c} */
.cp-quick-menu--list li:first-child{float:left;margin-left:0}
.cp-quick-menu__story{width:47px;height:16px;background-position:0 0}
.cp-quick-menu__character-info{width:80px;height:16px;background-position:-49px 0}
.cp-quick-menu__comment{width:49px;height:16px;background-position:-131px 0}
.cp-quick-menu__movie{top:-8px;width:102px;height:33px;background-position:-182px 0}
.cp-quick-menu__screenshot{width:65px;height:16px;background-position:-114px -18px}

.cp-main{height:906px;background:url(../images/main_bg.jpg) no-repeat center 0}
.cp-main--inner{position:relative;width:1100px;height:100%;margin:0 auto;}

.cp-story{position:relative;height:673px;background:url(../images/story_bg.jpg) no-repeat center 0}
.cp-story--inner{position:relative;width:1100px;height:100%;margin:0 auto;}
.cp-story__dot{position:absolute;left:500px;top:80px;display:block;width:25px;height:6px;border-radius:3px;background-color:#f5553d}
.cp-story__txt--title{position:absolute;left:500px;top:96px;width:72px;height:26px;background-position:-332px -138px}
.cp-story__txt--contents{position:absolute;left:500px;top:155px;width:526px;height:402px;background:url(../images/story.png) no-repeat center 0}
.cp-story__btn--born{position:absolute;left:213px;top:357px;width:66px;height:22px;background-position:0 -36px}

.cp-description{position:relative;height:490px;background:url(../images/description_bg.jpg) no-repeat center 0}
.cp-description--inner{position:relative;width:1100px;height:100%;margin:0 auto;}
.cp-description__txt--contents{position:absolute;margin-left:-260px;left:50%;top:128px;width:519px;height:209px;background:url(../images/description.png) no-repeat 0 0}

.cp-info{position:relative;height:980px;background:url(../images/info_bg.jpg) no-repeat center 0}
.cp-info--inner{position:relative;width:1100px;height:100%;margin:0 auto;}
.cp-info__dot{position:absolute;left:550px;top:103px;display:block;width:25px;height:6px;border-radius:3px;background-color:#f5553d;z-index:150}
.cp-info__txt--title{position:absolute;left:550px;top:120px;width:130px;height:26px;background-position:-200px -138px;z-index:150}
.cp-progress-bar{position:absolute;left:500px;top:200px;width:557px;height:299px;background:url(../images/progress_bg.png) no-repeat 0 0;z-index:150}
.cp-progress-bar--list{padding:21px 10px 0 48px}
.cp-progress-bar__stick{margin-top:10px;height:30px;width:0;background-color:#a4a4a4}
.cp-progress-bar__stick.best{background-color:#f5553d}
.cp-progress-bar__stick--value{margin-left:10px;line-height:30px;font-size:13px;color:#ffffff;font-family:Malgun Gothic,'맑은고딕'}
.cp-info__txt--desc{position:absolute;left:550px;top:540px;width:473px;height:245px;background:url(../images/info_txt.png) no-repeat 0 0;z-index:150}

.cp-profile{position:relative;background-color:#242424}
.cp-profile--title{height:100px;background-color:#2d2d2d;text-align:center}
.cp-profile__title{margin-top:26px;display:inline-block;width:173px;height:24px;background-position:-274px -112px}
.cp-profile__btn--toggle{position:absolute;margin-left:-147px;left:50%;top:76px;width:295px;height:24px;background-position:0 -86px}
.cp-profile__btn--toggle.open{background-position:0 -60px}

.cp-profile__title--name{position:absolute;left:10px;top:165px;width:468px;height:69px;background:url(../images/profile_title_scarlet.png) no-repeat 0 0}
.cp-profile--desc{position:relative;overflow:hidden;height:1100px;background-color:#242424}
.cp-profile--desc-inner{position:relative;width:1100px;height:100%;margin:0 auto}
.cp-stat{position:absolute;left:10px;top:318px;width:470px}
.cp-stat__name{height:56px;background-color:#af2b33;font-size:14px}
.cp-stat__name--txt{margin-left:20px;line-height:56px;color:#242424}
.cp-stat__tbl{width:100%;background-color:#121212}
.cp-stat__tbl tr th{height:55px;font-size:14px;font-weight:bold;color:#ffffff;border-top:1px solid #242424}
.cp-stat__tbl tr td{font-size:14px;color:#646566;border-top:1px solid #242424}

.cp-history{position:absolute;left:500px;top:192px;width:594px;height:795px;border-top:4px solid #611f23;background-color:#121212;color:#646566;font-size:14px;line-height:22px;overflow:auto}
.cp-history--inner{padding:40px}
.cp-history__title{font-weight:bold;color:#ffffff}
.cp-history__txt{padding:24px 0}
.cp-history__txt>i{font-family:'궁서';font-style:normal;padding:24px 0}

.cp-screenshot{position:relative;height:858px;background:url(../images/screen_bg.jpg) 50% center;}
.cp-screenshot--inner{position:relative;width:1100px;height:100%;margin:0 auto}
.cp-screenshot__dot{position:absolute;left:90px;top:92px;display:block;width:25px;height:6px;border-radius:3px;background-color:#f5553d}
.cp-screenshot__txt--title{position:absolute;left:90px;top:110px;width:104px;height:24px;background-position:-201px -165px}
.cp-slider{position:absolute;left:91px;top:160px;width:890px;height:500px;overflow:hidden;border:14px solid #000000}
.cp-slider--list{position:absolute;left:0;top:0;}
.cp-slider--list li{float:left;width:890px;height:500px;overflow:hidden;background-color:#191b25}
.cp-slider--list li img{width:890px;height:500px;}
.cp-slider--dimmed{position:absolute;left:0;bottom:-14px;height:45px;width:100%;background-color:#000;}
.cp-slider--controller{position:absolute;margin-left:-52px;left:50%;bottom:0;z-index:100}
.cp-slider__btn--first{margin-top:4px;float:left;width:14px;height:16px;background-position:0 -18px}
.cp-slider__btn--prev{margin-left:15px;margin-top:4px;float:left;width:8px;height:16px;background-position:-16px -18px}
.cp-slider__btn--next{margin-right:15px;margin-top:4px;float:left;width:8px;height:16px;background-position:-28px -18px}
.cp-slider__btn--end{margin-top:4px;float:left;width:14px;height:16px;background-position:-39px -18px}
.cp-slider__number{margin:0 25px;float:left;display:inline-block;*display:inline;text-align:center;font-size:20px;color:#ffffff;font-weight:bold;font-style:italic;font-family:Bodoni MT, Malgun Gothic,'맑은고딕';word-spacing:-3px;z-index:10}

.cp-comment{position:relative;height:1369px;background:url(../images/comment_bg.jpg) no-repeat center 0}
.cp-comment--inner{position:relative;width:1100px;height:100%;margin:0 auto}
.cp-comment__dot{position:absolute;left:0;top:77px;display:block;width:25px;height:6px;border-radius:3px;background-color:#d03e29}
.cp-comment__txt--title{position:absolute;left:0;top:94px;width:72px;height:23px;background-position:-200px -112px}
.cp-comment--layout{position:absolute;left:0;top:168px}
.cp-comment--write{width:609px;border-top:4px solid #d03e29}
.cp-comment__textarea{position:relative;float:left;width:449px;height:162px;background-color:#ffffff}
.cp-comment__textarea textarea{width:369px;height:102px;border:none;text-align:left;padding:30px 40px;z-index:8;background:#ffffff;color:#555555;-webkit-appearance:none;resize:none}
.cp-comment__textarea label{position:absolute;width:369px;height:102px;top:0;left:0;padding:30px 40px;z-index:9;font-size:12px;color:#666360;line-height:20px}
.cp-comment__string-number{position:absolute;right:30px;bottom:10px;color:#666360}
.cp-comment__btn{float:right;width:159px;height:163px;background-position:0 -112px}
.cp-comment--board{margin-top:10px;position:relative;width:608px;height:870px;background-color:#ffffff}
.cp-comment--list{width:568px;padding-top:50px;margin:0 auto}
.cp-comment--list li{position:relative;min-height:66px;border-bottom:1px solid #b9b8b6;padding:28px 0}
.cp-comment--list li:first-child{padding:0 0 28px 0}
.cp-comment--list li:first-child .cp-comment__profile{top:4px}
.cp-comment--list--not{width:568px;padding-top:50px;margin:0 auto;text-align:center;line-height:730px;}

.cp-comment__profile{position:absolute;left:0;top:30px;min-height:66px;background:#a7a7a7}
.cp-comment__info{position:relative;padding-left:85px;max-height:94px;height:94px;overflow:auto}
.cp-comment__info--name{font-weight:bold;font-size:12px;color:#666360;line-height:20px}
.cp-comment__info--date{display:inline-block;margin-left:5px;font-weight:normal}
.cp-comment__info--contents{min-height:43px;word-break:break-all;word-wrap:break-word;color:#666360;line-height:18px}
.cp-comment--btn--area{position:absolute;right:7px;top:0;color:#707070}
.cp-comment__btn--del{width:37px;height:19px;background-position:-161px -123px}
.cp-comment__btn--mod{width:37px;height:19px;background-position:-161px -144px}
.cp-comment__btn--mod-ok{width:37px;height:19px;background-position:-161px -165px}

.cp-comment--controller{position:absolute;left:0;bottom:33px;width:100%;}
.cp-comment__number{float:left;margin-top:34px;font-size:12px;color:#666360;margin-left:20px;font-weight:bold }
.cp-comment--page{position:relative;float:right;width:346px;margin-right:20px;margin-top:26px;padding:0 60px;text-align:center;font-size:11px}
.cp-comment__focus, .cp-comment__btn--num:hover{display:inline-block;width:29px;height:29px;vertical-align:top;background-color:#b63c28;color:#ffffff;line-height:29px;border:1px solid #b63c28;text-decoration:none}
.cp-comment__btn--num{display:inline-block;width:29px;height:29px;line-height:29px;vertical-align:top;text-decoration:none;color:#666360;font-weight:bold;border:1px solid #959392}
.cp-comment__btn--control-first,
.cp-comment__btn--control-end,
.cp-comment__btn--control-prev,
.cp-comment__btn--control-next{position:absolute;display:inline-block;width:29px;height:29px;vertical-align:top;text-decoration:none}
.cp-comment__btn--control-first{left:0;top:0;}
.cp-comment__btn--control-end{right:0;top:0;}
.cp-comment__btn--control-prev{left:30px;top:0;}
.cp-comment__btn--control-next{right:30px;top:0;}
.cp-comment__btn--first{margin-top:10px;width:9px;height:9px;background-position:-161px -112px}
.cp-comment__btn--end{margin-top:10px;width:9px;height:9px;background-position:-186px -112px}
.cp-comment__btn--prev{margin-top:10px;width:5px;height:9px;background-position:-172px -112px}
.cp-comment__btn--next{margin-top:10px;width:5px;height:9px;background-position:-179px -112px}
.cp-comment__info--mod{display:none;float:left;width:460px;height:67px;margin-top:5px;border: 1px solid #e0e0e0}
.cp-comment__info--mod textarea{width:450px;height:56px;border:none;padding:5px;text-align:left;z-index:8;background:#ffffff;color:#555555;-webkit-appearance:none;resize:none}

.cp__btn--top{display:none;position:fixed;right:70px;bottom:30px;width:88px;height:89px;background-position:-296px 0;z-index:100}
.cp-copyright{position:relative;height:80px;background:url(../images/copyright.jpg) no-repeat center 0}

/*etc*/
.cp__rose--1{position:absolute;left:-330px;top:0;width:359px;height:471px;background:url(../images/etc/rose1.png) no-repeat 0 0;z-index:100}
.cp__rose--2{position:absolute;left:530px;top:130px;width:756px;height:522px;background:url(../images/etc/rose2.png) no-repeat 0 0;z-index:100}
.cp__rose--3{position:absolute;left:30px;top:430px;width:307px;height:58px;background:url(../images/etc/rose3.png) no-repeat 0 0;z-index:100}
.cp__rose--4{position:absolute;left:-230px;top:70px;width:926px;height:628px;background:url(../images/etc/rose4.png) no-repeat 0 0;z-index:100}
.cp__rose--5{position:absolute;left:-370px;top:1040px;width:307px;height:102px;background:url(../images/etc/rose5.png) no-repeat 0 0;z-index:100}
.cp__rose--6{position:absolute;left:630px;top:250px;width:698px;height:425px;background:url(../images/etc/rose6.png) no-repeat 0 0;z-index:100}
.cp__rose--7{position:absolute;left:980px;top:40px;width:272px;height:441px;background:url(../images/etc/rose7.png) no-repeat 0 0;z-index:100}

/*video*/
.cp-video{ display:block; position: fixed; left: 0; top: 0; width: 100%; min-width: 320px; height: 100%; margin: 0 auto; z-index: 2000; }
.cp-video--dimmed{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; opacity: 0.7; filter: alpha(opacity=70); z-index:500; }
.cp-video--player{ position:absolute; left:50%; top:50%; margin-left:-437px; margin-top:-250px; width:854px; height:480px;z-index:1000;background:url(../images/video_bg.jpg) no-repeat 0 0;padding:10px;}
.cp-video__btn--close{ position:absolute; right:50%; top:50%; margin-right:-490px; margin-top:-250px; width:47px; height:47px; background-position:-383px 0; z-index: 1000;}