@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;
}

.posNum {
    position:fixed;
    left:50%;
    top:50%;
    width:300px;
    height:50px;
    margin:-25px 0 0 -150px;
    background:#111;
    color:#fff;
    font-size:20px;
    font-weight:bold;
    text-align:center;
    line-height:50px;
    z-index:9999;
}


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

#scene01 .visual.objs div {
    width: 1920px;
    top: 100px;
    margin-left: -960px;
}

/** Scene02 **/
#scene02 {
    height: 867px;
    background: #f8f8f8;
}

#scene02 .story.objs .title {
    width: 283px;
    top: 100px;
    margin-left: -141px;
}

#scene02 .story.objs .contents {
    top: 241px;
    margin-left: -600px;
}

#scene02 .story.objs .img {
    top: 387px;
    margin-left: -600px;
    box-shadow: 0 12px 24px rgba(63, 63, 63, 0.2), 0 8px 16px rgba(90, 90, 90, 0.15);
    z-index: 100;
}

/** Scene03 **/
#scene03{
    height: 499px;
    background: #f8f8f8;
}

#scene03 .banner.objs div {
    width: 1920px;
    top: 99px;
    margin-left: -960px;
}

/** Scene04 **/
#scene04 {
    height: 637px;
    margin-bottom: 150px;
}

#scene04 .events.objs .title {
    width: 485px;
    top: 100px;
    margin-left: -242px;
}

#scene04 .events.objs .contents {
    width: 1200px;
    height: 280px;
    top: 241px;
    margin-left: -600px;
}

#scene04 .events.objs .contents .con_top {
    width: 376px;
    height: 280px;
    float: left;
    margin-bottom: 30px;
}

#scene04 .events.objs .contents .con_bottom {
    width: 376px;
    float: left;
}

#scene04 .events.objs .contents .center {
    margin-left: 36px;
    margin-right: 36px;
}

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