@charset "utf-8";
/* CSS Document */

/** base **/
html,
body {
    height:100%;
    overflow-y:hidden;
}
body {
    position:relative;
    min-width:1200px;
    font-family:  "Dotum", "Arial", sans-serif;
    font-size:12px;
    color:#333;
}

/** gnb **/

.gnb .top_menu {
    width: 100%;
    height: 29px;
    position: absolute;
    left: 0;
    top: 0;
    background: #101010;
    border-bottom: 1px solid #262626;
    z-index: 999;
}

.gnb .top_menu > div {
    position: absolute;
    left: 50%;
    z-index: 999;
}

.gnb .top_menu .menu {
    top: 9px;
    margin-left: 92px;
}

input {
    outline: none;
    position: absolute;
    left: 50%;
    top: 3px;
    margin-left: -420px;
}
input[type=search] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
    display: none;
}

input[type=search] {
    background: #ededed url("../img/common/header/search.png") no-repeat 10px center;
    border: solid 1px #ccc;
    padding: 3px 4px 3px 35px;
    width: 80px;

    -webkit-border-radius: 5em;
    -moz-border-radius: 5em;
    border-radius: 5em;

    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}
input[type=search]:focus {
    width: 120px;
    background-color: #fff;
    border-color: #0089fd;

    -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
    -moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
    box-shadow: 0 0 5px rgba(109,207,246,.5);
}

input:-moz-placeholder {
    color: #999;
}
input::-webkit-input-placeholder {
    color: #999;
}

.gnb .bottom_menu {
    width: 100%;
    height: 70px;
    position: absolute;
    left: 0;
    top: 30px;
    background: #000000;
    z-index: 999;
}

.gnb .bottom_menu .innerGnb {
    width:840px;
    position: absolute;
    left: 50%;
    top: 27px;
    margin-left: -420px;
    z-index: 999;
}
.gnb .bottom_menu .innerGnb > li {
    float:left;
    width:150px;
    z-index: 999;
    cursor: pointer;
}

.gnb .bottom_menu .innerGnb .menu_02 .sub {
    width: 1920px;
    height: 115px;
    background: #000000;
    opacity: 0.85;
    position: absolute;
    left: 50%;
    top: 43px;
    margin-left: -960px;
    display: none;
}

.gnb .bottom_menu .innerGnb .menu_02 .sub img {
    position: absolute;
    left: 690px;
    top: 14px;
}

.gnb .bottom_menu .innerGnb .menu_02:hover .sub {
    display: block;
}


.gnb .bottom_menu .innerGnb .logo {
    width: 240px;
    cursor: default;
}

/** scrollBox **/
.scrollBox {
    min-width:1200px;
    height:100%;
    position:relative;
}

.scrollBox .wrap {
    min-width:1200px;
    position:relative;
    overflow:hidden;
}

.scrollBox .wrap > div {
    position:relative;
}

.scrollBox .wrap .objs > div {
    position:absolute;
    left:50%;	/* 브라우저 창의 크기에 따라 반응을 해야 해서 가운데 기준을 잡는다 */
}

/** Scene01 **/
#scene01 {
    height: 850px;
    padding-top:100px;/* 메뉴 높이값만큼 여백 넣기 */
}

#scene01 .left.objs {
    width: 960px;
    height: 850px;
    background: url("../img/sub1/visual/bg.jpg") center center;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -960px;
}

#scene01 .left.objs .poster {
    top: 85px;
    left: 165px;
    box-shadow: 0 12px 24px rgba(63, 63, 63, 0.6), 0 8px 16px rgba(90, 90, 90, 0.4);
}

#scene01 .left.objs .arrow {
    top: 85px;
    left: 890px;
}

#scene01 .left.objs .arrow.next {
    top: 118px;
}

#scene01 .slide {
    width: 95px;
    height: 680px;
    position: absolute;
    left: 50%;
    top: 185px;
    margin-left: -207px;
    background: #000;
}

#scene01 .slide > div {
    width: 95px;
    float: left;
    opacity: 0.4;
}

#scene01 .slide .slide_01 {
    opacity: 1;
}


#scene01 .right.objs {
    width: 960px;
    height: 850px;
    position: absolute;
    left: 50%;
    top: 100px;
    background: #f8f8f8;
}

#scene01 .right.objs .top {
    width: 960px;
    top: 0;
    margin-left: -480px;
}

#scene01 .right.objs .bottom {
    width: 760px;
    top: 322px;
    margin-left: -380px;
    max-height: 528px;
    overflow: hidden;
}

    /** Scene02 **/
#scene02 {
    height: 720px;
}

#scene02 .characters.objs .title {
    width: 325px;
    top: 100px;
    margin-left: -162px;
}

#scene02 .card {
    width: 1224px;
    height: 397px;
    position: absolute;
    left: 50%;
    top: 241px;
    margin-left: -600px;
}

#scene02 .card > div {
    width: 244px;
    float: left;
    margin-right: 1px;
    cursor: pointer;
}

#scene02 .card .card_05 {
    margin-right: 0;
}

/** Scene03 **/

#scene03 {
    height: 848px;
    background: #f2f7fa;

}

#scene03 .soundtrack.objs .title {
    width: 403px;
    top: 75px;
    margin-left: -201px;
}

#scene03 .soundtrack .track_list {
    width: 100%;
    height: 1515px;
    left: 0;
    top: 216px;
}

#scene03 .soundtrack .track_list > div {
    position: absolute;
    left: 50%;
}

#scene03 .soundtrack .track_list .contents {
    top: 0;
    margin-left: -57px;
}

#scene03 .soundtrack .track_list .more {
    top: 532px;
    margin-left: 259px;
}

#scene03 .soundtrack.objs .vinyl {
    top: 199px;
    margin-left: -500px;
}

#scene03 .soundtrack.objs .cover {
    top: 216px;
    margin-left: -710px;
}

#scene03 .soundtrack.objs .info {
    top: 600px;
    margin-left: -508px;
}

#scene03 .soundtrack.objs .button {
    top: 732px;
    margin-left: -508px;
}

/** Scene04 **/

#scene04{
    height: 1136px;
    margin-bottom: 150px;
}

#scene04 .gallery.objs .title {
    width: 292px;
    top: 100px;
    margin-left: -146px;
}

#scene04 .gallery.objs .img {
}

#scene04 .gallery.objs .img_01 {
    top: 241px;
    margin-left: -600px;
}

#scene04 .gallery.objs .img_02 {
    top: 549px;
    margin-left: -600px;
}

#scene04 .gallery.objs .img_03 {
    top: 858px;
    margin-left: -600px;
}

#scene04 .gallery.objs .img_04 {
    top: 241px;
    margin-left: -190px;
}

#scene04 .gallery.objs .img_05 {
    top: 241px;
    margin-left: 220px;
}

#scene04 .gallery.objs .img_06 {
    top: 549px;
    margin-left: 220px;
}

/** footer **/
.footer {
    width: 100%;
    height: 251px;
    position: relative;
}
.footer .top_footer {
    width: 100%;
    height: 150px;
    background:#000000;
    border-bottom: 1px solid #282828;
    position: absolute;
    left: 0;
    bottom: 100px
}

.footer .top_footer > div {
    position: absolute;
    left: 50%;
}

.footer .top_footer .logo {
    width: 299px;
    height: 46px;
    top: 62px;
    margin-left: -600px;
}

.footer .top_footer .contact {
    width: 267px;
    height: 61px;
    top: 46px;
    margin-left: 47px;
}

.footer .top_footer .sns {
    width: 109px;
    height: 23px;
    position: absolute;
    top: 46px;
    margin-left: 491px;
}

.footer .top_footer .sns > div{
    width: 23px;
    height: 23px;
    float: left;
    cursor: pointer;
}

.footer .top_footer .sns .sns_02 {
    width: 11px;
    margin-left: 26px;
    margin-right: 26px;
}

.footer .bottom_footer {
    width: 100%;
    height: 100px;
    background:#000000;
    position: absolute;
    left: 0;
    bottom: 0;
}

.footer .bottom_footer > div {
    position: absolute;
    left: 50%;
}

.footer .bottom_footer .terms {
    width: 163px;
    height: 11px;
    top: 47px;
    margin-left: -600px;
}

.footer .bottom_footer .rights {
    width: 269px;
    height: 11px;
    top: 47px;
    margin-left: 333px;
}