@charset "utf-8";
/*--------------------------------------
	copyright : Lampros co.,Ltd.
	-----------------------------------*/

@import url(reset.css);
@import url(common.css);
@import url(page_common.css);
/*
 index
==============================*/

/* contents ----------*/
#contents { min-width:320px; overflow:hidden; }
.elm { width:150px; height:176px; margin:5px; position:relative; }
.douEW { width:310px; }
.tripEW { width:470px; }
.douEH { height:430px; }
.douEH { height:362px; }
  .ww .elm { width:170px; height:200px; }
  .ww .douEW { width:350px; }
  .ww .tripEW { width:530px; }
  .ww .douEH { height:410px; }

/* elm ----------*/
.elm .et { position:absolute; top:3px; left:3px; }
.elm .et img { height:15px; }
 .elm .et img { height:17px; }
.elm .bg { width:100%; height:100%; box-shadow:0px 0px 5px #000; -moz-box-shadow:0px 0px 5px #000; -webkit-box-shadow:0px 0px 5px #000; position:relative; }
.elm .eBg1s { background:url(../_img/common/bg_1s.png) no-repeat center top; }
.elm .eBg1d { background:url(../_img/common/bg_1d.png) no-repeat center top; }
.elm .eBg2s { background:url(../_img/common/bg_2s.png) no-repeat center top; }
.elm .eBg2d { background:url(../_img/common/bg_2d.png) no-repeat center top; }
.elm .eBg3s { background:url(../_img/common/bg_3s.png) no-repeat center top; }
.elm .eBg3d { background:url(../_img/common/bg_3d.png) no-repeat center top; }
.elm .eBg4s { background:url(../_img/common/bg_4s.png) no-repeat center top; }
.elm .eBg4d { background:url(../_img/common/bg_4d.png) no-repeat center top; }
.elm .eBg5s { background:url(../_img/common/bg_5s.png) no-repeat center top; }
.elm .eBg5d { background:url(../_img/common/bg_5d.png) no-repeat center top; }
.elm .eBg5t { background:url(../_img/common/bg_5t.png) no-repeat center top; }
.elm .eBg5r { background:url(../_img/common/bg_5r.png) repeat left top; }
.elm .eBg6s { background:url(../_img/common/bg_6s.png) no-repeat center top; }
.elm .eBg6d { background:url(../_img/common/bg_6d.png) no-repeat center top; }
.elm .eBg7s { background:url(../_img/common/bg_7s.png) no-repeat center top; }
.elm .eBg7d { background:url(../_img/common/bg_7d.png) no-repeat center top; }
.elm .more { position:absolute; bottom:5px; right:5px; text-align:right; line-height:12px; width:100%; }
.elm .recommendIcon { position:absolute; top:-10px; right:-10px; z-index:100; }
.elm .mi { padding-top:21px; }
.elm img { width:100%; vertical-align:top; }
#wn img {  width:auto; }

/* picup ----------*/
#picup .slider { width:470px; height:345px; overflow:hidden; position:absolute; top:19px; left:0; }
#picup .slider li { width:470px; height:345px; position:absolute; top:0; left:0; }
  .ww #picup .slider { width:530px; height:389px; top:21px; }
  .ww #picup .slider li { width:530px; height:389px; }
  .w320 #picup { height:248px !important; }
  .douEW .slider { width:310px !important; height:228px !important; }
  .douEW .slider li { width:310px !important; height:228px !important; }
  .w360 #picup  { height:278px !important; }
  .ww .douEW .slider { width:350px !important; height:257px !important; }
  .ww .douEW .slider li { width:350px !important; height:257px !important; }
#picup .slider li img { width:100%; }
#picup .pbg { position:absolute; top:0; left:0; }
#picup .i { position:absolute; bottom:5px; left:5px; padding:5px; width:450px; background:#000; background:rgba( 0, 0, 0, 0.8 ); }
	.ww #picup .i { width:510px; }
	.w320 #picup .i { width:290px; }
	.w360 #picup .i { width:330px; }
#picup .t { font-size:12px; color:#FFF; display:block; float:left; }
#picup .b { font-size:12px; color:#FFF; display:block; float:right; line-height:12px; }
#picup .moreLink { display:block; }
#picup .sliderControl { height:8px; position:absolute; top:8px; right:45px; }
#picup .sliderControl li { display:block; float:left; width:9px; height:9px; margin-left:5px; }
#picup .sliderControl li a { background:url(../_img/index/picup_point_off.png) no-repeat; display:block; width:9px; height:9px; }
#picup .sliderControl li.on a, #picup ul.sliderControl li a:hover { background:url(../_img/index/picup_point_on.png) no-repeat; display:block; width:9px; height:9px; }

/* wn ----------*/
#wn .bg h2 span { font-size:10px; color:#FFF; padding-left:15px; font-weight:normal; visibility:hidden; line-height:18px; vertical-align:top; }
#wnList { height:130px; overflow:hidden; margin:0 5px; padding-top:25px; overflow:hidden; position:relative; }
  .ww #wnList { height:150px; }
#wnList li { width:100%; height:26px; line-height:26px; color:#FFF; font-size:12px; float:left; overflow:hidden; background:url(../_img/index/wnls_bg.png); }
  .ww #wnList li { height:30px; line-height:30px; }
#wnList li span { display:block; float:left; }
#wnList li span.d { width:17%; padding-left:4%; color:#FF0000; font-size:10px; background:url(../_img/index/wn_icon.gif) no-repeat 5px center; }
#wnList li span.c { width:16%; color:#FF0000; font-size:10px; }
#wnList li span.tw { width:62%; height:30px; overflow:hidden; position:relative; }
#wnList li span.t { height:26px; position:absolute; top:0; left:0; white-space:nowrap }
  .ww #wnList li span.t  { height:30px; }
#wnList li span.t a { color:#F00; }
#wnList li span.t a:hover { color:#FF0; }
#returnWn { position:absolute; right:5px; top:8px; display:none; line-height:12px; z-index:120; }
#wnListBt { position:absolute; bottom:5px; right:5px; width:274px; text-align:right; line-height:12px; }
#moreListBt { position:absolute; bottom:5px; left:7px; line-height:12px; }
#reMoreListBt  { position:absolute; bottom:5px; left:7px; display:none; line-height:12px; }
  .wnw { width:auto !important; height:auto !important; position:inherit !important;  }
  .wnw .bg { width:100% !important; height:auto !important; padding-bottom:10px !important; }
  .wnw .bg h2 span {  visibility:visible !important; }
  .wnw #wnList { height:auto !important; }
  .wnw #wnList li { height:auto !important; line-height:1.4em !important; padding:10px 0 !important; border-bottom:dotted 1px #6D1B1B; }
  .wnw #wnList li span.d { width:7em !important; padding-left:14px !important; }
  .wnw #wnList li span.c { width:8em !important; }
  .wnw #wnList li span.tw { height:auto !important; position:inherit !important;  float:none !important; width:auto !important; }
  .wnw #wnList li span.t { height:auto !important; position:static !important; white-space:normal; padding-right:5px !important; }
  .wnw #returnWn { display:block !important; }
  .wnw #wnListBt { display:none !important; }
  .wnw #moreListBt { display:none !important; }
  .wnw #reMoreListBt { display:none !important; }
  .wnw .moreImg { display:none !important; }

/* beginner ----------*/
#beginner {}
#beginner li img { vertical-align:top; }
#beginner h2 { font-size:20px; background:url(../_img/common/bg_5r.png) repeat 200px top; padding:16px 20px; margin-bottom:20px; border-top:solid 4px #660000; border-bottom:solid 4px #660000; }
#beginner .chaBox p { font-size:12px; line-height:1.6em; color:#9E9A9A; }
#beginner .chaPageLink { text-align:center; padding:20px 0 20px 0; }
#beginner .chaPageLink li { display:inline; padding:0 20px; }
#beginner .chaPageLink li a {}
#returnBeg { position:absolute; right:5px; top:8px; display:none; line-height:12px; z-index:120; }
#storychart, #story, #character { /*display:none;*/ margin:0 5px; padding:2%; background:url(../_img/index/wnls_bg.png); color:#FFF; }
	.bew { width:auto !important; height:auto !important; position:inherit !important; }
  .bew .bg { width:100% !important; height:auto !important; padding-bottom:10px !important; padding-top:25px !important; }
  /*.bew .mi { display:none; }*/
  .bew #returnBeg { display:block !important; }
#storychart {}
#storychart table { height:100%; border-collapse:collapse; border-spacing:0; border:0;padding: 0;}
#storychart table th, #storychart table td {}
#storychart table th { padding:2px; vertical-align:middle; height:100%; }
#storychart table th span { display:block; font-size:12px; background:#660000; vertical-align:middle; height:100%; }
#storychart table th span img { width:12px; }
#storychart table td { padding:20px; vertical-align:middle; }
#storychart table td.cap { font-size:10px; color:#9E9A9A; white-space: nowrap;}
#storychart table td.bb { border-bottom:solid 1px #660000; }
#storychart table tr.first th, #storychart table tr.first td { padding:0; }
#storychart h3 { text-align:center; margin-bottom:10px; }
#storychart p { font-size:12px; line-height:1.6em; color:#9E9A9A; }
#story {}
#story h3 { margin-bottom:10px; }
#story p { font-size:12px; line-height:1.6em; color:#9E9A9A; }
#character {}
#character .chaTitle { width:100%; clear:both; margin-bottom:20px; }
#character .chaTitle .inner { background:url(../_img/common/bg_5r.png) repeat 200px -500px; padding:15px; border-top:solid 4px #000; border-bottom:solid 4px #000; }
#character .chaTitle h3 { margin-bottom:10px;  }
#character .chaTitle p { font-size:12px; line-height:1.6em; color:#9E9A9A; }
#character .chaBox { width:33%; float:left; }
	.w360 #character .chaBox,
	.w320 #character .chaBox { width:100%; }
#character .chaBox .inner { margin:10px; padding:10px;  }
#character .chaBox h3 { margin:10px 10px 0; padding:10px;line-height:100px;background:#000; }
#character .chaBox h3 img { width:100px; float:right; }
  .w720 #character .chaBox h3,
  .w640 #character .chaBox h3,
  .w540 #character .chaBox h3,
  .w480 #character .chaBox h3,
  .w360 #character .chaBox h3,
  .w320 #character .chaBox h3 { line-height:30px; }
  .w720 #character .chaBox h3 img,
  .w640 #character .chaBox h3 img,
  .w540 #character .chaBox h3 img,
  .w480 #character .chaBox h3 img { float:none; display:block; width:100%; }
  .w360 #character .chaBox h3 img,
  .w320 #character .chaBox h3 img { float:none; display:block; width:100px; }
#character .chaBox p { background:#000;margin:0 10px 10px 10px; padding:0 10px 10px 10px;}

/* timeLine ----------*/
#timeLine { height:410px; }
#timeLine .bg { background:#000; }

/* backstretchDot ----------*/
#backstretchDot { width:100%; height:100%; background:url(../_img/common/dot_bg.gif); }

/* Isotope Filtering ----------*/
.isotope-item { z-index: 2; }
.isotope-hidden.isotope-item { pointer-events:none; z-index: 1; }
.isotope, .isotope .isotope-item { -webkit-transition-duration:0.3s; -moz-transition-duration:0.3s; -ms-transition-duration:0.3s; -o-transition-duration:0.3s; transition-duration:0.3s; }
.isotope { -webkit-transition-property:height, width; -moz-transition-property:height, width; -ms-transition-property:height, width; -o-transition-property:height, width; transition-property:height, width; }
.isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property:-moz-transform, opacity; -ms-transition-property:-ms-transform, opacity; -o-transition-property:-o-transform, opacity; transition-property:transform, opacity; }
.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration:0s; -moz-transition-duration:0s; -ms-transition-duration:0s; -o-transition-duration:0s; transition-duration:0s; }
.isotope.infinite-scrolling { -webkit-transition:none; -moz-transition:none; -ms-transition:none; -o-transition:none; transition:none; }

.clear { clear: both; }