@charset "UTF-8";





.button, .button:hover {
background-color: #ff3300;
border: none;
color: white;
display: inline-block;
font-size: 10px;
font-weight: bold;
padding-bottom: 1.25px;
padding-top: 1.25px;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px
}

a.button-rounded, input.button-rounded, button.button-rounded {
background: #f30;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: none !important;
color: white !important;
cursor: pointer;
float: left;
font-size: 13px;
font-weight: bold;
margin-top: 10px;
padding: 2px 23px 3px 12px;
text-align: left;
text-decoration: none !important
}

a.button-rounded:hover, input.button-rounded:hover, button.button-rounded:hover {
background:#333;
color: white;
text-decoration: none;
border: none !important
}



.container {
width: 1073px;

text-align: left;

}
/*
.content-wrapper {
width: 960px;
padding: 10px;
background-color: gainsboro
}
*/

#hero-images small { text-transform: uppercase }

#hero-images small a {
color: #ff3300;
text-decoration: none;
border-bottom: 0px !important
}

#hero-images small a:hover {
border-bottom: 1px solid #666 !important;
text-decoration: none
}

h1.page { display: none }

.closed {
font-weight: bold;
color: #900
}

a.arrow {
font-family: verdana;
font-size: 10px;
color: #f30;
text-decoration: none
}

a.arrow .text {
font-family: helveticaneue, "helvetica neue", helvetica, arial, sans-serif;
font-size: 13px;
font-weight: bold;
color: #333
}

a.arrow:hover .text {
color: #f30;
text-decoration: underline
}

.hidden-before-onload { visibility: hidden }

#hero-images {
display: block;
position: relative;
width:1073px;height:578px;
overflow: hidden;
background: #ccc;
margin-top: 0px;
z-index:1;
}

#hero-images .slider { position: absolute ;}

#hero-images .item {
position: relative;
width:1073px;height:578px;
overflow: hidden;
}

#hero-images .item img {
position: absolute;
top: 0%;
margin-top: 0px;
}



#hero-images .item .loading {
background-image: url(/images/common/loading.gif);
background-position: 38px 37px;
opacity: 1.0 !important
}

#hero-images .info, #hero-images .info-bg {
background: rgba(0,0,0,0.8);
position: absolute;
left: 0;
bottom: 0;
width: 320px;
z-index:1

}

#hero-images .info-bg { z-index: 1 ;
background:#000;
opacity: 0.8;
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";/* IE 8 */
 filter: alpha(opacity=80);/* IE 5-7 */
  }

#hero-images .current-info { z-index: 2 }

#hero-images .arrow-bg {
position: relative;
display: block;
width: 320px;
height: 49px;
opacity: 0.6
}

#hero-images .hover .arrow-bg {
opacity: 1;
background-color: rgba(255,255,255,0.3)
}

#hero-images .arrow-prev {
position: absolute;
top: -50px;
left: 0;
border-bottom: 1px solid rgba(255,255,255,0.2);
z-index: 3
}

#hero-images .arrow-prev .arrow-icon { background: transparent url(ui.png) no-repeat -1116px -60px }

#hero-images .arrow-next {
position: absolute;
top: 65535px;
left: 0;
border-top: 1px solid rgba(255,255,255,0.2);
z-index: 3
}

#hero-images .arrow-next .arrow-icon { background: transparent url(ui.png) no-repeat -1144px -60px }

#hero-images .arrow-icon {
position: absolute;
width: 24px;
height: 24px;
top: 12px;
left: 148px
}

#hero-images .details { display: none }

#hero-images .setup { background: transparent }

#hero-images .setup .details { display: block }

#hero-images .info .content {
padding: 15px 20px 20px 20px;
color: #fff
}

#hero-images .info small {
color: #f30;
font-family: momagothic, helveticaneue, "helvetica neue", helvetica, arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased
}

#hero-images .info small a:hover {
color: #666;
border-bottom: none !important
}

#hero-images .info h2 {
font: 24px/30px momagothic, helveticaneue, "helvetica neue", helvetica, arial, sans-serif;
letter-spacing: -0.007em;
margin: 1px 0 8px 0;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased
}

#hero-images .info h2 a { color: #fff }

#hero-images .info h2 a:hover { color: #999 }

#hero-images .info h3 {
font: 16px/24px momagothic, helveticaneue, "helvetica neue", helvetica, arial, sans-serif;
letter-spacing: -0.01em;
color: #999;
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased
}

#hero-images .info .summary {
font-size: 14px;
line-height: 20px;
margin: 28px 0 25px 0
}

#hero-images .info a.button-rounded {
font-size: 12px;
background-color: #999;
background-image: none;
padding: 1px 25px 1px 12px;
position: relative
}

#hero-images .info a.button-rounded .icon {
width: 16px;
height: 16px;
position: absolute;
right: 6px;
top: 2px;
background-image: url(ui.png)
}

#hero-images .info a.button-rounded:hover { background-color: #f30 }

#hero-images .info a.button-rounded.icon-jump { padding-right: 23px }

#hero-images .info a.button-rounded.icon-jump .icon { background-position: -84px -92px }

#hero-images .info a.button-rounded.icon-open { padding-right: 27px }

#hero-images .info a.button-rounded.icon-play { padding: 1px 12px 1px 27px }

#hero-images .info a.button-rounded.icon-play .icon {
left: 6px;
right: auto
}

#hero-images a.icon-interactive .icon { background-position: -144px -92px }

#hero-images a.icon-listing .icon { background-position: -164px -92px }

#hero-images a.icon-open .icon { background-position: -184px -92px }

#hero-images a.icon-play .icon { background-position: -84px -92px }

#hero-images a.icon-download .icon { background-position: -204px -92px }

#hero-images .thumbs {
position: absolute;
right: -234px;/*우측 숨겨질 넓이*/
top: 0px;
bottom: 0;
padding:0px 10px 0 0;
/*background: rgba(0,0,0,0.4);*/
z-index: auto;
}

#hero-images .thumbs a {
display: block;
margin-bottom: 10px;
background: #333;
position: relative;
width: 224px;
height: 132px;
overflow: hidden;z-index: auto;
}

#hero-images .thumbs a img {
position: absolute;
top: 50%;
margin-top: -66px;
width: 224px;
height: 132px;
z-index: 3
}

#hero-images .thumbs a.image-loaded img { display: block }


#hero-images .thumbs a.image-loaded .fade {
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width:224px;height: 132px;
visibility:visible !important;
background:#000;opacity:0.1 !important;
z-index: 4
}


#hero-images .thumbs .current-thumb.image-loaded .fade {
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width:224px;height: 132px;
visibility:hidden !important;
background:#FFF;opacity:0.3 !important;
z-index: 4
}


/*
#hero-images .thumbs a span.title {
position: absolute;
left: 0px;
top: 71px !important;
color: #fff;
font-size: 11px;
line-height: 15px;
font-weight: normal;
width:188px;
display:block; 
height:37px;
z-index: 5;
padding:12px 18px;
background:rgba(0,0,0,0.2);

}*/

#hero-images .thumbs a span.title {
position: absolute;
left: 0px;
top: 80px !important;
color: #fff;
font-size: 11px;

font-weight: normal;
width:188px;
display:block; 
height:42px;
z-index: 5;
padding:10px 18px 0 18px;
background:rgba(0,0,0,0.3);

}
.thumbs .title.setup  p {line-height: 16px;}
#hero-images .thumbs .setup.title { display: block;}

#hero-images .thumbs a:hover .title {
color: #fff;
display: block
}



#hero-images .store-item {
font: 16px/26px momagothic, helveticaneue, "helvetica neue", helvetica, arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
position: absolute;
width: 980px;
left: 0;
top: 0;
color: #fff;
background: #000;
text-align: center
}

#hero-images .store-item span { color: #999 }

#hero-images .store-item:hover { color: #fff }

#hero-images .member-preview {
float: left;
margin-top: 10px
}
.info .content h2 p {font-size:18px;font-family:'NanumGothic';}

.info .content .date{color:#CCC;padding-top:8px }
.thumbs {font-family:'NanumGothic','Nanum Gothic','나눔고딕'; }

/*
.thumbs .title.setup  p {display:none;}
.thumbs .title.setup p.date {display:block;}*/


.details,
.arrow-next,
.arrow-prev,
.info-bg{display:none !important}