@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: 880px;
    padding-top: 100px; /* 메뉴 높이값만큼 여백 넣기 */
}

#slides1 {
    width: 1920px;
    height: 880px;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -960px; /* left값을 50%로 적용했기 때문에 마진값으로 위치를 조절한다 */
}

#slides1 .list > div {
    width: 0;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
}

#slides1 .list > div:nth-child(2) {
    left: 480px;
}
#slides1 .list > div:nth-child(3) {
    left: 960px;
}
#slides1 .list > div:nth-child(4) {
    left: 1440px;
}

#slides1 .list1 {
    width: 1920px;
    height: 880px;
    background: url("../img/main/main_visual/visual_05.jpg") no-repeat center top;
}

#slides1 .list2 {
    width: 1920px;
    height: 880px;
    background: url("../img/main/main_visual/visual_01.jpg") no-repeat center top;
}

#slides1 .list3 {
    width: 1920px;
    height: 880px;
    background: url("../img/main/main_visual/visual_02.jpg") no-repeat center top;
}

#slides1 .list4 {
    width: 1920px;
    height: 880px;
    background: url("../img/main/main_visual/visual_03.jpg") no-repeat center top;
}

#slides1 .list5 {
    width: 1920px;
    height: 880px;
    background: url("../img/main/main_visual/visual_04.jpg") no-repeat center top;
}

#slides1 .slidesjs-previous {
    width: 46px;
    height: 46px;
    background: url("../img/main/main_visual/prev.png") no-repeat center top;
    position: absolute;
    left: 30px;
    top: 401px;
    z-index: 100;
    text-indent: -9999px;
}

#slides1 .slidesjs-next {
    width: 46px;
    height: 46px;
    background: url("../img/main/main_visual/next.png") no-repeat center top;
    position: absolute;
    right: 30px;
    top: 401px;
    z-index: 100;
    text-indent: -9999px;
}

#scene01 .visual.objs > div {
    z-index: 100;
    cursor: pointer;
    top: 781px;
}

#scene01 .visual.objs .button {
    margin-left: -663px;
}

#scene01 .visual.objs .scroll {
    margin-left: -13px;
    cursor: default;
}

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

#scene02 .banner.objs div {
    top: -22px;
    margin-left: -960px;
}

#scene02 .pixar.objs .pixar {
    top: 200px;
    margin-left: -960px;
}

#scene02 .pixar.objs .button {
    top: 455px;
    margin-left: -510px;
    cursor: pointer;
}

#scene02 .pixar.objs .button.right {
    margin-left: 377px;
}

/** Scene03 **/
#scene03 {
    height: 857px;
}

#scene03 .upcoming.objs .title {
    top: 100px;
    margin-left: -164px;
}

#scene03 .slide.objs .slide_04 {
    top: 241px;
    margin-left: -890px;
}

#scene03 .slide.objs .slide_01 {
    top: 241px;
    margin-left: -290px;
}

#scene03 .slide.objs .slide_02 {
    top: 241px;
    margin-left: 310px;
}

#scene03 .slide.objs .slide_con {
    top: 556px;
    margin-left: -290px;
    z-index: 100;
}

#scene03 .slide.objs .arrow {
    top: 446px;
    margin-left: -338px;
    z-index: 100;
    cursor: pointer;
}

#scene03 .slide.objs .arrow.next {
    margin-left: 310px;
}

#one_slides {
    width: 1780px;
    margin: 0 auto;
    padding-top: 241px;

}

#roll_ban_wrap {
    position: relative;
}

#roll_ban_wrap .roll_wrap > div {
    width: 580px;
    height: 465px;
    float: left;
    margin-right: 20px;
    position: relative;
    overflow: hidden;
}

#roll_ban_wrap .roll_wrap div .text {
    position: absolute;
    left: 0;
    bottom: -150px;
}

#roll_ban_wrap .prev {
    position: absolute;
    top: 205px;
    left: 552px;
    z-index: 10;
}

#roll_ban_wrap .next {
    position: absolute;
    top: 205px;
    left: 1200px;
    z-index: 10;
}

#pager2 {
    width: 500px;
    height: 11px;
    position: absolute;
    left: 657px;
    bottom: -51px;
    z-index: 100;
}

#pager2 > a {
    height: 11px;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    text-indent: -9999px;
    z-index: 100;
}

#pager2 a:nth-child(1) {
    width: 97px;
    height: 11px;
    background: url("../img/main/upcoming/list_04.jpg") no-repeat center top;
    left: 369px;
}

#pager2 a:nth-child(1).selected {
    background: url("../img/main/upcoming/list_on_04.jpg") no-repeat center top;
}

#pager2 a:nth-child(2) {
    width: 54px;
    background: url("../img/main/upcoming/list_01.jpg") no-repeat center top;
    left: 0;
}

#pager2 a:nth-child(2).selected {
    background: url("../img/main/upcoming/list_on_01.jpg") no-repeat center top;
}

#pager2 a:nth-child(3) {
    width: 40px;
    background: url("../img/main/upcoming/list_02.jpg") no-repeat center top;
    left: 95px;
}

#pager2 a:nth-child(3).selected {
    background: url("../img/main/upcoming/list_on_02.jpg") no-repeat center top;
}

#pager2 a:nth-child(4) {
    width: 153px;
    background: url("../img/main/upcoming/list_03.jpg") no-repeat center top;
    left: 177px;
}

#pager2 a:nth-child(4).selected {
    background: url("../img/main/upcoming/list_on_03.jpg") no-repeat center top;
}

#scene03 .list {
    width: 467px;
    height: 11px;
    position: absolute;
    left: 50%;
    top: 746px;
    margin-left: -233px;
}

#scene03 .list > li {
    float: left;
    margin-right: 20px;
}

#scene03 .list .list_01 {
    width: 54px;
}

#scene03 .list .line {
    width: 1px;
}

#scene03 .list .list_02 {
    width: 40px;
}

#scene03 .list .list_03 {
    width: 153px;
}

#scene03 .list .list_04 {
    width: 97px;
    margin-right: 0;
}

/** Scene04 **/
#scene04 {
    height: 736px;
}

#scene04 .best.objs {
    width: 100%;
    height: 736px;
    position: absolute;
    left: 0;
    top: 0;
    background: #f6f6f8;
}

#scene04 .best.objs .title {
    top: 75px;
    margin-left: -185px;
}

#slides2 {
    width: 1230px;
    height: 445px;
    position: absolute;
    left: 50%;
    margin-left: -615px;
    top: 216px;
}

#slides2 img {
    position: relative;
}

#slides2 .list {
    width: 1230px;
    height: 445px;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
}

#slides2 .list .bg {
    position: absolute;
    left: -1000px;
    top: 0;
}

#slides2 .list .board {
    width: 590px;
    height: 300px;
    background: #ffffff;
    box-shadow: 0 12px 24px rgba(81, 81, 81, 0.2), 0 8px 16px rgba(108, 108, 108, 0.15);
    position: absolute;
    left: 1300px;
    top: 80px;
    z-index:100;
}

#slides2 .list .text {
    position: absolute;
    left: 1200px;
    top: 80px;
    z-index: 100;
}

#slides2 .slidesjs-previous {
    background: url("../img/main/best_films/prev.png") no-repeat center top;
    width: 12px;
    height: 11px;
    position: absolute;
    left: 645px;
    z-index: 100;
    top: 222px;
    text-indent: -9999px;
}

#slides2 .slidesjs-next {
    background: url("../img/main/best_films/next.png") no-repeat center top;
    width: 12px;
    height: 11px;
    position: absolute;
    left: 1184px;
    top: 222px;
    z-index: 100;
    text-indent: -9999px;
}

/** Scene05 **/
#scene05 {
    height: 798px;
    background: #f9ffe8;
}

#scene05 .objs .triplet_01 {
    top: 367px;
    margin-left: -758px;
    z-index: 100;
}

#scene05 .objs .triplet_02 {
    top: 367px;
    margin-left: 73px;
    z-index: 100;
}

#scene05 .video {
    width: 1440px;
    height: 725px;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -720px;
}

/** Scene06 **/
#scene06 {
    height: 820px;
}

#scene06 .short.objs .title {
    top: 80px;
    margin-left: -194px;
}

#scene06 .accordion {
    width: 1920px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 220px;
    margin-left: -960px;
    box-shadow: 0 12px 24px rgba(81, 81, 81, 0.2), 0 8px 16px rgba(108, 108, 108, 0.15);
    overflow: hidden;
}

#scene06 .accordion li .btn {
    width: 0;
    float: left;
    overflow: hidden;
    cursor: pointer;
}

#scene06 .accordion li .on {
    width: 0;
    overflow: hidden;
    float: left;
}

#scene06 .accordion .slide01 .on {
    width: 1060px;
}

#scene06 .accordion .slide02 .btn {
    width: 215px;
}

#scene06 .accordion .slide03 .btn {
    width: 215px;
}

#scene06 .accordion .slide04 .btn {
    width: 215px;
}

#scene06 .accordion .slide05 .btn {
    width: 215px;
}

/** Scene07 **/
#scene07 {
    height: 690px;
    margin-bottom: 150px;
}

#scene07 .news.objs .title {
    top: 100px;
    margin-left: -155px;
}

#scene07 .news.objs .contents {
    top: 240px;
    margin-left: -600px;
}

#scene07 .news.objs .button {
    top: 268px;
    margin-left: -370px;
}

#scene07 .news.objs .button.bottom {
    top: 415px;
}

#scene07 .news.objs .img {
    top: 380px;
    margin-left: 341px;
}

/** 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;
}