@charset "utf-8";

@font-face {
    font-family:'sssB';
    src:url('../font/SamsungSharpSans-Bold.eot');
    src:url('../font/SamsungSharpSans-Bold.eot?#iefix') format('embedded-opentype'),
    url('../font/SamsungSharpSans-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family:'sssM';
    src:url('../font/SamsungSharpSans-Medium.eot');
    src:url('../font/SamsungSharpSans-Medium.eot?#iefix') format('embedded-opentype'),
    url('../font/SamsungSharpSans-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family:'sssR';
    src:url('../font/SamsungSharpSans-Regular.eot');
    src:url('../font/SamsungSharpSans-Regular.eot?#iefix') format('embedded-opentype'),
    url('../font/SamsungSharpSans-Regular.woff') format('woff');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'FontAwesome';
    src:url('../font/fontawesome-webfont.eot?v=4.3.0');
    src:url('../font/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),
    url('../font/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),
    url('../font/fontawesome-webfont.woff?v=4.3.0') format('woff'),
    url('../font/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
    font-weight:normal;
    font-style:normal;
}

.teaser {}
.teaser a:hover {color:#fff;}
/* countdown */
.timer {visibility:hidden;height:705px;padding:120px 0;background:#1d1d1d url("../images/bg_teaser_timer.jpg") repeat-x 50% 50%;text-align:center;}
.timer-tit {font-size:80px;font-family:"sssB",sans-serif;color:#fff;line-height:1.1;letter-spacing: -1px;}
.timer-tit_sub {display:block;margin-top:50px;font-size:28px;font-family:"sssM",sans-serif;}
.timer-clock {margin:30px auto 100px;text-align:center;font-size:0;}
.timer-flip {display:inline-block;}
.timer-register {display:inline-block;padding:20px 86px;background:#c3983f;border-radius:33px 36px;font-size:20px;font-family:"sssM",sans-serif;color:#fff;line-height:1.6;text-transform:uppercase;}
.timer-register:hover {color:#fff;}
.unpackNoti {max-width:1050px;margin:70px auto;color:#fff;letter-spacing:-1px;}
.unpackNoti:after {content:"";display:block;clear:both}
.unpackNoti-date {float:left;font-size:72px;font-family: "sssB",sans-serif;line-height:1;}
.unpackNoti-detail {float:right;text-align:left;line-height:1.3;}
.unpackNoti-detail span {float:left;position:relative;padding:0 17px;font-size:24px;font-family: "sssR",sans-serif;}
.unpackNoti-detail span:after {content:"";position:absolute;top:50%;right:0;width:2px;height:24px;margin-top:-12px;background:#fff;}
.unpackNoti-detail .place {clear:left;}
.unpackNoti-detail .begin:after,
.unpackNoti-detail .city:after {display:none;}

@media only screen and (max-width:1000px) {

    .unpackNoti {}
    .unpackNoti-date {display:block;float:none;}
    .unpackNoti-detail {float:none;text-align:center;}
    .unpackNoti-detail span {float:none;padding:0 12px;text-align:center;line-height:1.6;}
    .unpackNoti-detail span:after {width:1px;height:12px;margin-top:-6px;}
    .unpackNoti-detail .open {display:block;}
    .unpackNoti-detail .open:after {display:none;}
    .unpackNoti-detail .begin {display:block;}

}

@media only screen and (max-width:767px) {
    .timer {height:400px;padding:50px 0;background-size:auto 100%;}
    .timer-tit {font-size:44px;letter-spacing: normal;}
    .timer-tit_sub {margin-top:25px;font-size:14px;}
    .timer-clock {margin:20px auto 50px;}
    .timer-register {padding:10px 40px;border-radius:18px 21px;font-size:10px;}

    .unpackNoti {margin:0;text-align:center;}
    .unpackNoti-date {display:block;float:none;margin:15px 0;font-size:36px;}
    .unpackNoti-detail {float:none;text-align:center;}
    .unpackNoti-detail span {float:none;padding:0 12px;font-size:14px;text-align:center;line-height:1.6;}
    .unpackNoti-detail span:after {width:1px;height:12px;margin-top:-6px;}
    .unpackNoti-detail .open {display:block;}
    .unpackNoti-detail .open:after {display:none;}
    .unpackNoti-detail .begin {display:block;}
}

/* //countdown */

/* media (Video) */
.media {display:none;position:relative;top:0;left:0;z-index:10;width:100%;height:0;padding-bottom:56.25%;}
/*.media-wrap {position:absolute;top:0;left:0;width:100%;height:100%;z-index:300;}*/
.media-tit {position:absolute;top:0;left:0;z-index:310;padding:1.3em 2em;font-size:40px;color:#fff;font-family:"sssB",sans-serif;}
.media-player {position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;}
.media-player-iframe {position:absolute;top:0;left:0;z-index:5;width:100%;height:100%;}
.media-player-poster {position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;background:url("../images/img_teaser_media_poster.jpg") no-repeat 0 0;background-size:cover;}
.media .media-player-btn {position:absolute;top:50%;left:50%;width:85px;height:56px;margin:-28px 0 0 -42.5px;background:url("../images/btn_teaser_media_play.png") no-repeat 50% 50%;}
.media-share {position:absolute;bottom:7.4%;left:0;z-index:310;width:100%;text-align:center;}
.media-share-link {display:inline-block;margin:0 1.45%;color:#fff;}
.media-share-ico {font-family:"FontAwesome";font-size:25px;font-style:normal;line-height:1;text-rendering: auto;  display: inline-block;  -webkit-font-smoothing: antialiased;}
.media-share-ico.facebook:before {content:"\f09a";}
.media-share-ico.twitter:before {content:"\f099 ";}
.media-share-ico.google:before {content:"\f0d5 ";}
.media-share-ico.linkedln:before {content:"\f0e1";}
.media-share-txt {display:block;margin-top:1.5625em;font-family:"sssR",sans-serif;font-size:16px;}
@media only screen and (max-width:1280px) {
    .media-tit {font-size:25px;}
    .media-share-ico {font-size:20px;}
    .media-share-txt {font-size:13px;}
}
@media only screen and (max-width:767px) {
    .media {height:auto;padding-top:56.25%;padding-bottom:0;background-color:#000;}
    .media-tit {position:static;padding:0;font-size:20px;text-align: center;}
    .media-wrap {position:relative;padding:35px 0;}
    .media-player {height:0;padding-bottom:56.25%;}
    .media-player-iframe {}
    .media-share {position:static;margin-top:15px;}
    .media-share-link {}
    .media-share-ico {font-size:12px;}
    .media-share-txt {font-size:8px;}
}
/* //media (Video) */

/* register */
.register {position:relative;top:0;left:0;width:100%;height:580px;}  /* PC iframe height*/
.register-iframe {position:absolute;top:0;left:0;width:100%;height:100%;}
.register-iframe::-webkit-scrollbar {  width: 6px;  }
.register-iframe::-webkit-scrollbar-track {  border-radius: 10px;  }
.register-iframe::-webkit-scrollbar-thumb {  border-radius: 10px;  background: rgba(0,0,0,0.4);  }
.register-iframe::-webkit-scrollbar-thumb:window-inactive {  background: rgba(0,0,0,0.3);  }

@media only screen and (max-width:1023px){
    .register {height:950px;}  /* tablet iframe height*/
}
@media only screen and (max-width:767px){
    .register {height:800px;} /* mobile iframe height*/
}
/* //register */

/* evolution */
.evolution {position:relative;top:0;left:0;width:100%;height:0;padding-bottom:56.25%;background:#1d1d1d;font-family: "sssR",sans-serif;color:#fff;}
.evolution-head {position:absolute;top:0;left:0;padding:60px 80px;}
.evolution-tit {font-size:32px;line-height:1.6;font-family: "sssB",sans-serif;}
.evolution_tit_sub {font-size:20px;font-family: "sssM",sans-serif;}

.device-list-wrap {position:absolute;bottom:4.629%;left:0;width:100%;}
.device-list {overflow:hidden;white-space: nowrap;box-sizing:border-box;font-size:0;}
.device-list * {box-sizing:border-box;}
.device-list > li {position:relative;display:inline-block;background:#1d1d1d;vertical-align:bottom;opacity:1;/*-webkit-transition:margin,padding 0.5s linear;-ms-transition:margin,padding 0.5s linear;transition:margin,padding 0.5s linear;*/box-sizing:content-box;}
.device-list > li:first-child {margin-left:0;}
.device-item-s1 {width:23.4375%;}
.device-item-s2 {width:24.8598%;margin-left:-9.3%;}
.device-item-s3 {width:25.3125%;margin-left:-10.8%;}
.device-item-s4 {width:25.625%;margin-left:-11.3%;}
.device-item-s5 {width:26.353666%;margin-left:-11.6%}
.device-item-s6 {width:26.1%;margin-left:-12.3%}
.device-item-novel {width:42.8125%;margin-left:-11.2%;padding:0 !important;}
.device-item-novel .device-item {padding:0;}
.device-item-novel .device-info {margin: 0 4%;}
.device-item-novel .nobel-mobile {display:none;}

.device-item {text-align: center;padding: 0 12%;background-color: #1d1d1d;}
.device-pic {overflow: hidden;opacity:0.4;-webkit-transition:opacity 1s ease;-ms-transition:opacity 1s ease;transition:opacity 1s ease;}
.device-pic img {max-width:100%;height:auto;}
.device-info {position:absolute;left:0;bottom:0;margin: 0 12%;font-size:24px;font-family: "sssM", sans-serif;text-align: left;}
.device-info-year {display:block;font-size:1em;font-family: "sssB",sans-serif;line-height:normal;}
.device-info-name {display:block;font-size:1.166666666em;line-height:1.6;}
.device-list-pager {display:none}
.device-list li.active .device-pic {opacity:1;}

@media only screen and (max-width:1280px) {
    .device-list-wrap {bottom:2.6%;}
    .evolution-head {padding:20px 30px;}
    .evolution-tit {font-size:28px;}
    .evolution_tit_sub {font-size:16px;}
    .device-info {font-size:16px;}

}

@media only screen and (max-width:900px) {
    .evolution-head {padding:20px 30px;}
    .evolution-tit {font-size:28px;}
    .evolution_tit_sub {font-size:16px;}
    .device-info {font-size:12px;}
}

@media only screen and (max-width:767px) {
    .evolution {height:638px;padding-bottom:0;}
    .evolution-head {width:100%;padding:60px 0 20px;text-align:center;box-sizing:border-box;position: static;}
    .evolution-tit {font-size:20px;}
    .evolution_tit_sub {font-size:14px;}

    .device-list-wrap {position: static;height:auto;}
    .device-list {position:relative;height:auto;font-size:0;}
    .device-list > li {position:relative;margin:0;width:100% !important;height:auto;}
    .device-item-s1 .device-item {width:169px;}
    .device-item-s2 .device-item {width:182px;}
    .device-item-s3 .device-item {width:185px;}
    .device-item-s4 .device-item {width:188px;}
    .device-item-s5 .device-item {width:192px;}
    .device-item-s6 .device-item {width:192px;}
    .device-item-novel .device-item {}
    .device-item-novel .device-pic {text-align:center;}
    .device-item-novel .device-pic .nobel-pc {display:none;}
    .device-item-novel .device-pic .nobel-mobile {display:inline;position:relative;left:50%;width:612px;max-width:none !important;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);-moz-transform:translateX(-50%);transform:translateX(-50%);}
    .device-item-novel .device-info {margin:0;}

    .device-item {position:static;margin:0 auto;padding:0;}
    .device-pic {opacity:1;}
    .device-pic img {max-width:100% !important;}
    .device-info {bottom:5px;width:100%;margin:0;text-align:center;}
    .device-info-year {font-size:14px;}
    .device-info-name {font-size:14px;}


    .device-list-pager {position:absolute;bottom:40px;z-index:10;width:100%;display:block;text-align:center;font-size:0;}
    .device-list-pager li {display:inline-block;margin:0 4px;border:1px solid #fff;border-radius:50%;box-sizing:border-box;}
    .device-list-pager li.active {border:none;background:#c4983f;}
    .device-list-pager li a {display:block;width:12px;height:12px;}
}

@media only screen and (min-width:612px){
    .device-item-novel .device-pic .nobel-mobile {
        left:0;
        -webkit-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -moz-transform: translateX(0%);
         transform: translateX(0%);
    }
}


/* timer Flip Animation :: S */
.flip-group {position:relative;display:inline-block;width:240px;height:240px;margin:0 20px;font-size:120px;line-height:270px;text-align:center;font-family: "sssB",sans-serif;color:#fff;box-sizing:border-box;}
.flip-group * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-user-select: none;
}


.flip-label {position:absolute;bottom:0;left:0;width:100%;margin-bottom:-2em;font-size:20px;line-height:1.2;font-weight:normal;font-family: "sssB",sans-serif;color:#fff;text-transform: uppercase;}


.flip-item {
    position:relative;
    width:100%;
    height:100%;
    border-radius:15px;box-shadow:0 0 10px rgba(0,0,0,0.5);
}
.flip-item li {position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;}
.flip-item .after {z-index:3;}
/*.flip-item .before {z-index:2;}*/

.flip-item a {
    display: block;
    height: 100%;
    -webkit-perspective: 2000px;
    -ms-perspective: 2000px;
    -moz-perspective: 2000px;
    perspective: 2000px;
    margin: 0 !important;
    overflow: visible !important;
    cursor: default !important;
}
.flip-item .half {
    overflow:hidden;
    position:absolute;
    left:0;
    z-index:1;
    width:100%;
    height:50%;
}
.flip-item .up {
    top:0;
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}
.flip-item a div {
    z-index:1;
    overflow:hidden;
    position:absolute;
    left:0;
    width:100%;
    height:50%;
}
.flip-item .down {
    bottom:0;
    webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    -o-transform-origin: 50% 0;
    transform-origin: 50% 0;
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
}
.flip-item .shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.flip-item .inn {
    position: absolute;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 200%;
    color: #ccc;
    text-shadow: 0 1px 2px #000;
    text-align: center;
    background-color:transparent;
    background-image:url("../images/bg_clock.png");
    background-repeat:no-repeat;
    border-radius:13px;
    background-size:100% 100%;
}
.flip-item .up .inn {
    top:0;
}
.flip-item .down .inn {
    bottom:0;
}

.flip-item.days {}
.flip-item.hours {}
.flip-item.minutes {}
.flip-item.seconds {}

/* play */
.flip-item.play li.before {
    z-index:3;
}
.flip-item.play li.after {
    -webkit-animation: asd 0.5s 0.5s linear both;
    -ms-animation: asd 0.5s 0.5s linear both;
    -moz-animation: asd 0.5s 0.5s linear both;
    animation: asd 0.5s 0.5s linear both;
    z-index: 5;
}
.flip-item.play li.after .down {
    z-index: 2;
    -webkit-animation: turn 0.5s 0.5s linear both;
    -ms-animation: turn 0.5s 0.5s linear both;
    -moz-animation: turn 0.5s 0.5s linear both;
    animation: turn 0.5s 0.5s linear both;
}
.flip-item.play li.before .up {
    z-index: 2;
    -webkit-animation: turn2 0.5s linear both;
    -ms-animation: turn2 0.5s linear both;
    -moz-animation: turn2 0.5s linear both;
    animation: turn2 0.5s linear both;
}

.flip-item li.after {
    z-index:3;
}

/* shadow */
.flip-item.play li.before .up .shadow {
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
    background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
    background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
    -webkit-animation: show 0.5s linear both;
    -moz-animation: show 0.5s linear both;
    animation: show 0.5s linear both; }

.flip-item.play li.after .up .shadow {
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
    background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
    background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
    -webkit-animation: hide 0.5s 0.3s linear both;
    -moz-animation: hide 0.5s 0.3s linear both;
    animation: hide 0.5s 0.3s linear both; }

/*DOWN*/
.flip-item.play li.before .down .shadow {
    background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
    background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
    background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
    background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
    background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
    -webkit-animation: show 0.5s linear both;
    -moz-animation: show 0.5s linear both;
    animation: show 0.5s linear both; }

.flip-item.play li.after .down .shadow {
    background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
    background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
    background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
    background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
    background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
    -webkit-animation: hide 0.5s 0.3s linear both;
    -moz-animation: hide 0.5s 0.3s linear both;
    animation: hide 0.5s 0.2s linear both; }


@-webkit-keyframes asd {
    0% {
        z-index: 2; }

    20% {
        z-index: 4; }

    100% {
        z-index: 4; } }

@-moz-keyframes asd {
    0% {
        z-index: 2; }

    20% {
        z-index: 4; }

    100% {
        z-index: 4; } }

@-ms-keyframes asd {
    0% {
        z-index: 2; }

    20% {
        z-index: 4; }

    100% {
        z-index: 4; } }

@keyframes asd {
    0% {
        z-index: 2; }

    20% {
        z-index: 4; }

    100% {
        z-index: 4; } }

.flip-item.play li.after .down {
    z-index: 2;
    -webkit-animation: turn 0.5s 0.5s linear both;
    -moz-animation: turn 0.5s 0.5s linear both;
    animation: turn 0.5s 0.5s linear both; }

@-webkit-keyframes turn {
    0% {
        -webkit-transform: rotateX(90deg); }

    100% {
        -webkit-transform: rotateX(0deg); } }

@-moz-keyframes turn {
    0% {
        -moz-transform: rotateX(90deg); }

    100% {
        -moz-transform: rotateX(0deg); } }

@-ms-keyframes turn {
    0% {
        -o-transform: rotateX(90deg); }

    100% {
        -o-transform: rotateX(0deg); } }

@keyframes turn {
    0% {
        transform: rotateX(90deg); }

    100% {
        transform: rotateX(0deg); } }

@-webkit-keyframes turn2 {
    0% {
        -webkit-transform: rotateX(0deg); }

    100% {
        -webkit-transform: rotateX(-90deg); } }

@-moz-keyframes turn2 {
    0% {
        -moz-transform: rotateX(0deg); }

    100% {
        -moz-transform: rotateX(-90deg); } }

@-ms-keyframes turn2 {
    0% {
        -o-transform: rotateX(0deg); }

    100% {
        -o-transform: rotateX(-90deg); } }

@keyframes turn2 {
    0% {
        transform: rotateX(0deg); }

    100% {
        transform: rotateX(-90deg); } }



/* shadow keyframe */
@-webkit-keyframes show {
    0% {
        opacity: 0; }

    100% {
        opacity: 1; } }

@-moz-keyframes show {
    0% {
        opacity: 0; }

    100% {
        opacity: 1; } }

@-ms-keyframes show {
    0% {
        opacity: 0; }

    100% {
        opacity: 1; } }

@keyframes show {
    0% {
        opacity: 0; }

    100% {
        opacity: 1; } }


@-webkit-keyframes hide {
    0% {
        opacity: 1; }

    100% {
        opacity: 0; } }

@-moz-keyframes hide {
    0% {
        opacity: 1; }

    100% {
        opacity: 0; } }

@-ms-keyframes hide {
    0% {
        opacity: 1; }

    100% {
        opacity: 0; } }

@keyframes hide {
    0% {
        opacity: 1; }

    100% {
        opacity: 0; } }


/* timer Flip Animation :: E */

@media only screen and (max-width:1140px) {
    .flip-group {width:170px;height:170px;margin:0 0 0 10px;font-size:90px;line-height:190px;}
    .flip-group:first-child {margin-left:0;}
    .flip-label {font-size:15px;}
}

@media only screen and (max-width:767px) {
    .flip-group {width:70px;height:70px;margin:0 0 0 10px;font-size:40px;line-height:80px;}
    .flip-group:first-child {margin-left:0;}
    .flip-label {font-size:12px;}
}