@charset "utf-8";

/* Page Common Module */
.history-section {overflow:hidden;position:relative;width:100%;height:0;padding-bottom:56.25%;}
.history-section *,
.history-section *:before,
.history-section *:after {box-sizing:border-box;}
.history-box {position:absolute;top:0;left:0;width:100%;z-index:5;}
.history-bg {position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;}


/* key visual */
.history-start {}
.history-start .history-box {top:50%;padding:0 7.291666%;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
    font-size:20px;
}
.history-start-year {font-size:4.5em;font-family: "sssB",sans-serif;}
.history-start-mean {font-size:1.2em;font-family: "sssM",sans-serif;}
.history-start-btn {position:absolute;bottom:60px;left:50%;z-index:5;display:inline-block;width:85px;height:44px;margin-left:-42px;background:url("/common/promotions/galaxy/note5/history/btn_history_start_scroll.png") no-repeat 0 0;background-size:auto 100%;}


/* history _ Step Module */
.history-section-steps {height:auto;padding-bottom:0;}
.history-step {overflow:hidden;position:relative;width:100%;height:0;padding-bottom:56.25%;}
.history-step-box {position:absolute;width:100%;height:100%;font-family: "sssM",sans-serif;font-size:100px;line-height:1;}
.history-step-box:after {content:"";display:block;clear:both}
.history-step-box > div {position:relative;float:left;width:50%;height:100%;background-image:url("/common/promotions/galaxy/note5/history/bg_history_step_white.png");background-repeat: repeat;color:#000;}
        .history-step-name {position:absolute;top:2.5%;left:2.5%;}
        .history-step-num {position:absolute;top:16%;left:0;z-index:0;font-size:4.96em;color:#e9e9e9;}

        .history-step-txt,
        .history-step-year {position:absolute;left:0;top:42.5%;
/*            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);*/
        }

        .history-step-txt {width:90%;padding:0 14.375%;text-align:left;}
            .history-step-mean {display:block;position:relative;z-index:1;font-size:0.57em;font-family: "sssB",sans-serif;text-transform: uppercase;word-break: break-all;}
            .history-step-mean--mobile {display:none;}
            .history-step-concept {position:relative;z-index:1;font-size:0.24em;line-height:1.3;}
        .history-step-year {width:100%;font-size:2.5em;text-align:left;padding-left:32.29166%;  }

.history-step-img {position:absolute;top:0;left:0;width:100%;height:100%;background-repeat:no-repeat;background-position:50% 100%;background-attachment: fixed;background-size:100% auto}


/* History Step 1 */
.history-step-01 {z-index:5;}
.history-step-01 .history-step-box-l {}
.history-step-01 .history-step-box-r {background-image:url("/common/promotions/galaxy/note5/history/bg_history_step_01_p.png");color:#fff;}
.history-step-01 .history-step-img {background-image:url("/common/promotions/galaxy/note5/history/img_history-step-01_p.png");}

/* History Step 2 */
.history-step-02 {z-index:4;}
.history-step-02 .history-step-box-l {background-image:url("/common/promotions/galaxy/note5/history/bg_history_step_02_p.png");color:#fff;}
.history-step-02 .history-step-box-r {}
.history-step-02 .history-step-num {color:#181c1f;}
.history-step-02 .history-step-img {background-image:url("/common/promotions/galaxy/note5/history/img_history-step-02_p.png");}

/* History Step 3 */
.history-step-03 {z-index:3;}
.history-step-03 .history-step-box-l {}
.history-step-03 .history-step-box-r {background-image:url("/common/promotions/galaxy/note5/history/bg_history_step_03_p.png");color:#fff;}
.history-step-03 .history-step-img {background-image:url("/common/promotions/galaxy/note5/history/img_history-step-03_p.png");}

/* History Step 4 */
.history-step-04 {z-index:2;}
.history-step-04 .history-step-box-l {background-image:url("/common/promotions/galaxy/note5/history/bg_history_step_04_p.png");color:#fff;}
.history-step-04 .history-step-box-r {}
.history-step-04 .history-step-num {color:#242729;}
.history-step-04 .history-step-img {background-image:url("/common/promotions/galaxy/note5/history/img_history-step-04_p.png");}

/* History Step 5 */
.history-step-05 {z-index:1;}
.history-step-05 .history-step-box-l {}
.history-step-05 .history-step-box-r {background-image:url("/common/promotions/galaxy/note5/history/bg_history_step_05_p.png");color:#fff;}
.history-step-05 .history-step-img {background-image:url("/common/promotions/galaxy/note5/history/img_history-step-05_p.png");}
.history-step-05 .history-step-num {top:19%;left:-7%;font-size:2.6em;}


/* note5 */
.history-next {height:auto;padding-bottom:0;}
.next-hand {position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;background:url("/common/promotions/galaxy/note5/history/img_history_handPic.png") no-repeat 0 0 fixed;background-size:100% auto;}
.next-hand-lock {height:0;padding-bottom:56.25%;bottom:0;top:auto;background-attachment: scroll;}

.next-coming {position:relative;z-index:1;width:50%;height:0;padding-bottom:56.25%;}
.next-coming-txt {position:absolute;top:50%;left:0;width:100%;
    padding:0 14.375%;
    font-size:40px;
    font-family: "sssR",sans-serif;
    color:#4c4c4c;
    line-height:1.5;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.next-device {position:relative;z-index:1;}


.next-hand-box {position:absolute;bottom:25%;left:-9999px;z-index:100;padding:0 7.1875%;font-size:20px;opacity:0;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.next-hand-box.visible {left:0;opacity:1;}
.next-hand-txt {display:block;font-size:3.5em;font-family: "sssR",sans-serif;letter-spacing:0.2em;color:#000;}
.next-hand-btn {display:inline-block;margin-top:1em;padding:0 4em;border:1px solid #999;border-radius:35px;font-size:1em;color:#292929;line-height:3.6;text-align:center;}
.next-hand-btn:active {background-color:#c3983f;color:#fff;}


@media only screen and (max-width: 1280px) {
    .history-start .history-box {font-size:24px;}
    .history-step-box {font-size:69px;}
    .history-start-btn {width:70px;height:33px;margin-left:-35px;}
}

@media only screen and (max-width: 1024px) {
    .history-start .history-box {font-size:19px;}
    .history-step-box {font-size:55px;}

    .next-coming-txt {font-size:30px;}
    .next-hand-box {font-size:14px;}
}


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

    .history-section {padding-bottom:159.72222%;}
    .history-box {}
    .history-bg {}


    /* key visual */
    .history-start {}
    .history-start .history-box {top:0;padding:5.555555%;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
    .history-start-year {font-size:53px;}
    .history-start-mean {font-size:16px;}
    .history-start-btn {bottom:30px;width:32px;height:17px;margin-left:-16px;}

    .history-section-steps {height:auto;padding-bottom:0;}
    .history-step {padding-bottom:159.72222%;background-repeat:repeat;}
    .history-step-box {font-size:0;}
    .history-step-box > div {float:none;width:100%;height:auto;background:none !important;}
    .history-step-box .history-step-box-l {margin-top:30px;}
    .history-step-box .history-step-box-r {position:absolute;top:29.13%;width:100%;}
    .history-step-name {position:static;display:block;text-align:center;}
    .history-step-name img {height:15px !important;}
    .history-step-num {display:none;}

    .history-step-txt {width:100%;padding:0;text-align:center;}

    .history-step-mean {font-size:50px;line-height:1.4;font-weight: normal;}
    .history-step-mean--pc {display:none;}
    .history-step-mean--mobile {display:block;}
    .history-step-concept {top:-10px;padding:0 9%;font-size:15px;line-height:1.3333;}
    .history-step-year {padding:0;text-align:center;font-size:150px;}

    .history-step-txt,
    .history-step-year {position:static;display:block;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;}

    .history-step-img {background-attachment: scroll;}


    .history-step-01 {background-image:url("/common/promotions/galaxy/note5/history/bg_history_step_01_m.png");}
    .history-step-01 .history-step-box-l {color:#fff;}
    .history-step-01 .history-step-box-r {background-image:none;}
    .history-step-01 .history-step-year {color:#23292e;}
    .history-step-01 .history-step-img {background-image:url("/common/promotions/galaxy/note5/history/img_history-step-01_m.png");}

    .history-step-02 {background-image:url("/common/promotions/galaxy/note5/history/bg_history_step_02_m.png");}
    .history-step-02 .history-step-box-l {background-image:none;color:#333}
    .history-step-02 .history-step-box-r {color:#23292e;}
    .history-step-02 .history-step-year {color:#fff;}
    .history-step-02 .history-step-img {background-image:url("/common/promotions/galaxy/note5/history/img_history-step-02_m.png");}

    .history-step-03 {background-image:url("/common/promotions/galaxy/note5/history/bg_history_step_03_m.png");}
    .history-step-03 .history-step-box-l {color:#fff;}
    .history-step-03 .history-step-box-r {background-image:none;}
    .history-step-03 .history-step-year {color:#23292e;}
    .history-step-03 .history-step-img {background-image:url("/common/promotions/galaxy/note5/history/img_history-step-03_m.png");}

    .history-step-04 {background-image:url("/common/promotions/galaxy/note5/history/bg_history_step_04_m.png");}
    .history-step-04 .history-step-box-l {background-image:none;color:#333}
    .history-step-04 .history-step-box-r {color:#23292e;}
    .history-step-04 .history-step-year {color:#fff;}
    .history-step-04 .history-step-img {background-image:url("/common/promotions/galaxy/note5/history/img_history-step-04_m.png");}

    .history-step-05 {background-image:url("/common/promotions/galaxy/note5/history/bg_history_step_05_m.png");}
    .history-step-05 .history-step-box-l {color:#fff;}
    .history-step-05 .history-step-box-r {background-image:none;}
    .history-step-05 .history-step-year {color:#23292e;}
    .history-step-05 .history-step-img {background-image:url("/common/promotions/galaxy/note5/history/img_history-step-05_m.png");}


    /* next note5 */
    /* note5 */
    .history-next {height:auto;padding-bottom:0;}
    .next-hand {display:none;}
    .next-hand-lock {}

    .next-coming {width:100%;padding-bottom:159.7222%;background:url("/common/promotions/galaxy/note5/history/img_next_coming_m.jpg") no-repeat 0 0;background-size:100% 100%;}
    .next-coming-txt {padding:0 5.555%;font-size:20px;
        -webkit-transform: translateY(13%);
        -moz-transform: translateY(13%);
        -ms-transform: translateY(13%);
        -o-transform: translateY(13%);
        transform: translateY(13%);
    }
    .next-device {}


    .next-hand-box {left:0;bottom:30px;width:100%;opacity:1;font-size:12px;text-align:center;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;}
    .next-hand-txt {font-size:2.5em;}
    .next-hand-btn {font-size:1em;padding:0 3.5em;}

}