/*  index
-------------------------------------------------
    - Import
    - text
    - df-width
    - layout
    - new
-------------------------------------------------*/


/*-----------------------------------------------
     Import
-----------------------------------------------*/

/*@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;600&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;400&display=swap');

/*-----------------------------------------------
     text
-----------------------------------------------*/


h1,
h2 {
    color: #f1355f;
    font-size: 1.2rem;
    font-weight: 500;

}

p {
    font-weight: 400;
}

/*-----------------------------------------------
    df-width
-----------------------------------------------*/

.df-width {
    height: 100%;
    max-width: 1700px;
    overflow: hidden;
}



/*  layout
-------------------------------------------------
    - html,body
    - main
    - section
    - header
    - footer
-------------------------------------------------*/

html,
body {
    background: #e5eef3;
}

/*prelodd*/
body::before {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0;
    width: 1px;
    height: 1px;
    content: '';

    background-image:
         url(../images/hero/001.png),url(../images/hero/002.png),url(../images/hero/003.png),url(../images/hero/004.png),
         url(../images/hero/005.png),url(../images/hero/006.png),url(../images/hero/007.png),url(../images/hero/008.png),
         url(../images/hero/009.png),url(../images/hero/010-1.png),url(../images/hero/010-2.png),url(../images/hero/010-3.png),
         url(../images/hero/012-1.png),url(../images/hero/012-2.png),url(../images/hero/012-3.png),
         url(../images/hero/013-1.png),url(../images/hero/013-2.png),url(../images/hero/013-3.png),
         url(../images/hero/014-1.png),url(../images/hero/014-2.png),url(../images/hero/014-3.png),
         url(../images/hero/015-1.png),url(../images/hero/015-2.png),url(../images/hero/015-3.png),
         url(../images/hero/017-1.png),url(../images/hero/017-2.png),url(../images/hero/017-3.png),
         url(../images/hero/018-1.png),url(../images/hero/018-2.png),url(../images/hero/018-3.png);

}


@media screen and (max-width:768px)
{
/*prelodd*/
body::before {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0;
    width: 1px;
    height: 1px;
    content: '';

    background-image:

         url(../images/hero/man01-m.png),url(../images/hero/man02-m.png),url(../images/hero/man03-m.png);

}
}

/*-----------------------------------------------
    main
-----------------------------------------------*/
main {
    overflow: hidden;
    max-width: 1920px;
    margin: auto;
    /*animation: blur .8s ease-out 0s 1 both;*/
    /*background: url(../images/index.jpg) center 0 no-repeat;*/
}

section {
    width: 100%;
    text-align: justify;
    height: 1080px;
    /*background: #777;*/
    overflow: hidden;
}

/*@media screen and (min-width:1921px) {
    main {
        max-width: 1700px;
        background: url(../images/index.jpg) center 0 /100% no-repeat;
    }
}
*/
@media screen and (max-width:768px) {
    main {
        /*! background: url(../images/mobile.jpg) center 0 /100% no-repeat; */
    }
}

/*-----------------------------------------------
    header
-----------------------------------------------*/
header {
    height: 1086px;
    background: url(../images/opening/index_01.png) center 0 /cover no-repeat;

}

.opening {
    position: fixed;
    width: 100%;
    height: 1086px;
    top: 0;
    left: 0;

    z-index: 1;
    max-width: 1920px;
    margin: auto;
    right: 0;
    overflow: hidden;
    /*! animation: blur .8s ease-out .3s 1 both; */
    max-height: 1084px;
    pointer-events: none;
}

.bg {
    /*! opacity: 0; */
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../images/opening/bg.jpg) center 0 /cover no-repeat;
    animation: small 2.8s cubic-bezier(.250, .460, .450, .940) 0s 1 both;
}

.man01 {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../images/opening/man01.png) center -10% /cover no-repeat;
    animation: forMan01 2s cubic-bezier(.250, .460, .450, .940) 0.2s 1 both;
}

.man02 {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../images/opening/man02.png) center -10% /cover no-repeat;
    animation: forMan 1.8s cubic-bezier(.250, .460, .450, .940) 0.8s 1 both;
}

.man03 {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../images/opening/man03.png) center 0% /cover no-repeat;
    animation: forMan 1.8s cubic-bezier(.250, .460, .450, .940) 1.2s 1 both;
}

.petal {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../images/opening/petal.png) center 0% /cover no-repeat;
    animation: forMan 2.8s cubic-bezier(.250, .460, .450, .940) 0s 1 both;
}

.petal02 {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../images/opening/petal02.png) center 0% /cover no-repeat;
    animation: forMan 2.3s cubic-bezier(.250, .460, .450, .940) 1.6s 1 both;
}

.date {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    background: url(../images/opening/date.png) center 0% /cover no-repeat;
    animation: date 1.3s cubic-bezier(.250, .460, .450, .940) 1.6s 1 both;
}


@keyframes date {

    0%,
    10% {
        transform: scale(2);
        opacity: 0;
        filter: blur(20px);
        transform-origin: 50% 0%;
        top: 0px;
    }

    100% {
        transform: scale(1);
        opacity: 1;
        filter: blur(0px);
        transform-origin: 50% 50%;
        top: 70px;
    }
}



@keyframes small {
    0% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}


@keyframes forMan01 {

    0%,
    10% {
        transform: scale(2);
        opacity: 0;
        transform-origin: 50% 50%;
    }

    30% {
        opacity: 1;
        filter: blur(10px);
    }

    80% {
        opacity: 1;
        filter: blur(0px);
    }

    100% {
        transform: scale(1);
        opacity: 1;
        transform-origin: 50% 50%;
    }
}


@keyframes forMan {

    0%,
    10% {
        transform: scale(1.6);
        opacity: 0;
    }

    30% {
        opacity: 1;
        filter: blur(5px);
    }

    50% {
        opacity: 1;
        filter: blur(0px);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}




@media screen and (max-width:1600px) {
    header {
        background-size: 1600px;
        height: calc(1600px *(1086 /1920));
        /*background-size: 目前寬度*/
        /*height: calc(目前寬度 *(原始高度 /原始寬度));*/
    }

    .opening {
        height: calc(1600px *(1086 /1920));
    }

}

@media screen and (max-width:1400px) {
    header {
        background-size: 1400px;
        height: calc(1400px *(1086 /1920));
    }

    .opening {
        height: calc(1400px *(1086 /1920));
    }

}

@media screen and (max-width:1280px) {
    header {
        background-size: 1280px;
        height: calc(1280px *(1086 /1920));
    }

    .opening {
        height: calc(1280px *(1086 /1920));
    }

}

@media screen and (max-width:960px) {
    header {
        background-size: 960px;
        height: calc(960px *(1086 /1920));
    }

    .opening {
        height: calc(960px *(1086 /1920));
    }

}

@media screen and (max-width:768px) {
    header {
        background: transparent;
        /*background-size: 100%;*/
        background: url(../images/frame.png) center 100% / 100% no-repeat;

        padding: 0 0 190% 0;
        height: auto;
    }
.frame {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;

    z-index: 1;
    margin: auto;
    right: 0;

    pointer-events: none;
    background: url(../images/frame.jpg) center top / 100% no-repeat ;

}
.opening,.hide_ {
  width: 0;height: 0;
  display: none;
  z-index: -10;opacity: 0;

}
.frame {
    display: block;
    opacity: 1;
    position: absolute;
    width: 100%;
    height: 1086px;
    top: 0;
    left: 0;

    z-index: -1;
    max-width: 1920px;
    margin: auto;
    right: 0;
    overflow: hidden;
    max-height: 1084px;
    pointer-events: none;
     background: url(../images/frame.jpg) center 0% / 100% no-repeat;
}
}


/*-----------------------------------------------
    event
-----------------------------------------------*/
.event {
    height: 1026px;
    background: url(../images/index_02.jpg) center 0 no-repeat;

}
.go-rt{
    position: absolute;
    width: 60%;
    height: 10%;
    right: 2%;
    top: 55%;
    /*background:#ff000070;*/
    z-index: 10;
}

.go-rt a{
    display: block;
    width: 100%;
    height: 100%;
}
.header-cover {
    position: absolute;
    width: 100%;
    height: 70%;
    top: 0;
    left: 0;
    /*! background: #55555557; */
}

.event-group {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.event-group>div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;

}

.event-group>div:nth-child(1) {
    background: url(../images/event/001.png) center 0 /100% no-repeat;
    animation: titleBlur 0.6s ease-out 0s 1 both;
}

.event-group>div:nth-child(2) {
    background: url(../images/event/002.png) center 0 /100% no-repeat;
    animation: titleBlur2 0.4s ease-out 0.5s 1 both;
}

.event-group>div:nth-child(3) {
    background: url(../images/event/003.png) center 0 /100% no-repeat;
    animation: titleBlur 0.8s ease-out 0.3s 1 both;
}

.event-group>div:nth-child(4) {
    background: url(../images/event/004.png) center 0 /100% no-repeat;
    animation: titleBlur2 0.5s ease-out 0.6s 1 both;
}

.event-group>div:nth-child(5) {
    background: url(../images/event/005.png) center 0 /100% no-repeat;
    animation: titleBlur 0.7s ease-out 0.8s 1 both;
}

.event-group>div:nth-child(6) {
    background: url(../images/event/006.png) center 0 /100% no-repeat;
    animation: titleFadeIn 0.8s ease-out 1s 1 both;
    z-index: 0;
}

/**/
.event-group>div:nth-child(7) {
    background: url(../images/event/007.png) center 0 /100% no-repeat;
    animation: titleBlur 0.6s ease-out 0.7s 1 both;
}

.event-group>div:nth-child(8) {
    background: url(../images/event/008.png) center 0 /100% no-repeat;
    animation: titleBlur2 0.4s ease-out 0.9s 1 both;
}

.event-group>div:nth-child(9) {
    background: url(../images/event/009.png) center 0 /100% no-repeat;
    animation: titleBlur 0.8s ease-out 0.8s 1 both;
}

.event-group>div:nth-child(10) {
    background: url(../images/event/010.png) center 0 /100% no-repeat;
    animation: titleBlur2 0.5s ease-out 1.4s 1 both;
}

.event-group>div:nth-child(11) {
    background: url(../images/event/011.png) center 0 /100% no-repeat;
    animation: titleBlur 0.7s ease-out 1.3s 1 both;
}

/**/
.event-group>div:nth-child(12) {
    background: url(../images/event/012.png) center 0 /100% no-repeat;
    animation: titleBlur 0.6s ease-out 1s 1 both;
}

.event-group>div:nth-child(13) {
    background: url(../images/event/013.png) center 0 /100% no-repeat;
    animation: titleBlur2 0.4s ease-out 1.2s 1 both;
}

.event-group>div:nth-child(14) {
    background: url(../images/event/014.png) center 0 /100% no-repeat;
    animation: titleBlur 0.8s ease-out 1.0s 1 both;
}

.event-group>div:nth-child(15) {
    background: url(../images/event/015.png) center 0 /100% no-repeat;
    animation: titleBlur2 0.5s ease-out 1.2s 1 both;
}

.event-group>div:nth-child(16) {
    background: url(../images/event/016.png) center 0 /100% no-repeat;
    animation: titleBlur 0.7s ease-out 1.1s 1 both;
}

.event-group>div:nth-child(17) {
    background: url(../images/event/017.png) center 0 /100% no-repeat;
    animation: titleBlur 0.6s ease-out 1.4s 1 both;
}

.event-group>div:nth-child(18) {
    background: url(../images/event/018.png) center 0 /100% no-repeat;
    animation: titleBlur2 0.4s ease-out 1.6s 1 both;
}

.event-group>div:nth-child(19) {
    background: url(../images/event/019.png) center 0 /100% no-repeat;
    animation: titleBlur 0.6s ease-out 1.5s 1 both;
}



/*.btn-event{ background: url(../images/event/btn.png) center 0 /100% no-repeat;animation:titleFadeIn 0.7s ease-out 1.7s 1 both;}*/

.event-group>div:nth-child(20) {
    background: url(../images/event/rt1000.png) center 0 /100% no-repeat;
    animation: rt_ 0.5s ease-out 1s 1 both;
}

.event-group>div:nth-child(21) {
    background: url(../images/event/rt1500.png) center 0 /100% no-repeat;
    animation: rt_ 0.5s ease-out 1.2s 1 both;
}

.event-group>div:nth-child(22) {
    background: url(../images/event/rt2000.png) center 0 /100% no-repeat;
    animation: rt_ 0.5s ease-out 1.4s 1 both;
}
.event-group>div:nth-child(23) {
    background: url(../images/event/rt3000.png) center 0 /100% no-repeat;
    animation: rt_ 0.5s ease-out 1.6s 1 both;
}
.event-group>div:nth-child(24).btn-event {
    position: absolute;
    width: 21%;
    height: 10%;
    right: 14%;
    top: 25%;
    z-index: 10;
    cursor: pointer;
    left: initial;

    animation: titleFadeIn 0.7s ease-out 1.7s 1 both;
}

.btn-event a {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    z-index: 10;
}

.btn-event:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/event/btn.png) center 0 /100% no-repeat;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.btn-event:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/event/btn-bar.png) -80px 0 /100% no-repeat;
    width: 100%;
    height: 100%;
    transition: all .8s ease;
}


.btn-event:hover:after {
    content: "";
    background: url(../images/event/btn-bar.png) -10px 0 /100% no-repeat;
    transition: all .8s ease;

}



@keyframes rt_ {

    0%,
    10% {
        transform: translate3d(0, 50px, 0);
        opacity: 0;
    }

    100% {
        transform: translate3d(0, 0px, 0);
        opacity: 1;
    }
}

@keyframes titleFadeIn {

    0%,
    10% {
        transform: scale(1);
        opacity: 0;
        filter: blur(10px);
    }

    100% {
        transform: scale(1);
        opacity: 1;
        filter: blur(0px);
    }
}


@keyframes titleBlur {

    0%,
    10% {
        transform: scale(1.8);
        opacity: 0;
        filter: blur(10px);
        transform-origin: 50% 30%;
    }

    100% {
        transform: scale(1);
        opacity: 1;
        filter: blur(0px);
        transform-origin: 50% 30%;
    }
}

@keyframes titleBlur2 {

    0%,
    10% {
        transform: scale(1.6);
        opacity: 0;
        filter: blur(20px);
        transform-origin: 50% 30%;
    }

    100% {
        transform: scale(1);
        opacity: 1;
        filter: blur(0px);
        transform-origin: 50% 30%;
    }
}


@media screen and (max-width:1800px)
{
   .event-group>div:nth-child(25).btn-event {
        top: 23%;
    }

}


@media screen and (max-width:1600px) {
    .event {
        background-size: 1600px;
        height: calc(1600px *(1026 /1920));
    }

    .event-group>div:nth-child(25).btn-event {
        top: 24%;
    }

}

@media screen and (max-width:1400px) {
    .event {
        background-size: 1400px;
        height: calc(1400px *(1026 /1920));
    }

}

@media screen and (max-width:1280px) {
    .event {
        background-size: 1280px;
        height: calc(1280px *(1026 /1920));
    }

}

@media screen and (max-width:960px) {
    .event {
        background-size: 960px;
        height: calc(960px *(1026 /1920));
    }

}

@media screen and (max-width:768px) {
    .event {
        background: url(../images/mobile_02.jpg) center top no-repeat;
        background-size: 100%;
        padding: 0 0 223% 0;
        height: auto;
    }

}


/*-----------------------------------------------
    story
-----------------------------------------------*/
.story {
    height: 1059px;
    background: url(../images/index_03.jpg) center 0 no-repeat;

}

.story-group {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.story-group>div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;

}

.story-group>div:nth-child(1) {
    background: url(../images/story/001.png) center 0 /100% no-repeat;
    animation: titleBlur 0.6s ease-out 0s 1 both;
}

.story-group>div:nth-child(2) {
    background: url(../images/story/002.png) center 0 /100% no-repeat;
    animation: titleBlur2 0.4s ease-out 0.5s 1 both;
}

.story-group>div:nth-child(3) {
    background: url(../images/story/003.png) center 0 /100% no-repeat;
    animation: titleBlur 0.8s ease-out 0.3s 1 both;
}

.story-group>div:nth-child(4) {
    background: url(../images/story/004.png) center 0 /100% no-repeat;
    animation: titleBlur2 0.5s ease-out 0.6s 1 both;
}

.story-group>div:nth-child(5) {
    background: url(../images/story/005.png) center 0 /100% no-repeat;
    animation: titleBlur 0.7s ease-out 0.8s 1 both;
}

.story-group>div:nth-child(6) {
    background: url(../images/story/006.png) center 0 /100% no-repeat;
    animation: titleFadeIn 0.8s ease-out 0.7s 1 both;
    z-index: 0;
}

@media screen and (max-width:1600px) {
    .story {
        background-size: 1600px;
        height: calc(1600px *(1059 /1920));
    }

}

@media screen and (max-width:1400px) {
    .story {
        background-size: 1400px;
        height: calc(1400px *(1059 /1920));
    }

}

@media screen and (max-width:1280px) {
    .story {
        background-size: 1280px;
        height: calc(1280px *(1059 /1920));
    }

}

@media screen and (max-width:960px) {
    .story {
        background-size: 960px;
        height: calc(960px *(1059 /1920));
    }

}

@media screen and (max-width:768px) {
    .story {
        background: url(../images/mobile_03.jpg) center top no-repeat;
        background-size: 100%;
        padding: 0 0 227% 0;
        height: auto;
    }

}

/*-----------------------------------------------
     typing
-----------------------------------------------*/
.story .text {
    width: 45%;
    max-width: 850px;
    margin: 0;
    line-height: 2;
    font-weight: 600;
    color: #000;
    letter-spacing: 0.02rem;
    display: none;
    height: 0;
    padding: 8% 0 0 0;
    text-shadow:
        rgba(249, 249, 249, 0.51) 2px 2px,
        rgba(249, 249, 249, 0.36) 1px -2px,
        rgba(249, 249, 249, 0.5) -3px 1px,
        rgba(249, 249, 249, 0.5) 0 -2px,
        rgba(249, 249, 249, 0.34) -1px 2px,
        rgba(249, 249, 249, 0.3) -2px 1px,
        rgba(249, 249, 249, 0.5) 1px 0px,
        rgba(249, 249, 249, 0.24) -2px 1px;
    position: absolute;
    /*! left: 0; */
    right: 0;
    /*! font-size: 1.1rem; */
}



@keyframes typing {
    0% {
        width: 0rem;
        opacity: 0;

    }

    50% {
        filter: blur(2px);
    }

    100% {
        width: 35rem;
        opacity: 1;
        filter: blur(0px);
    }
}

h4 {
    overflow: hidden;
    white-space: nowrap;
    margin: 0 0 5px 0;
    opacity: 1;
    width: 0;

    line-height: 1.75;
    font-weight: 600;
    color: #000;
    letter-spacing: 0.02rem;
    text-shadow:
        rgba(249, 249, 249, 0.8) 0px 1px, rgba(249, 249, 249, 0.8) 2px -1px, rgba(249, 249, 249, 0.8) 1px -2px, rgba(249, 249, 249, 0.8) 0px 0px, rgba(249, 249, 249, 0.34) 0px 0px, rgba(249, 249, 249, 0.8) 1px 2px, rgba(249, 249, 249, 0.8) 1px 0px, rgba(249, 249, 249, 0.8) 0px -2px;
    font-size: 1.3rem;
}

.word {
    width: 0rem;
}

.word1 {
    animation: typing 0.7s steps(50) 0s both;
}

.word2 {
    animation: typing 0.7s steps(50) 0.2s both;
}

.word3 {
    margin: 0 0 14px 0;
    animation: typing 0.7s steps(50) 0.5s both;
}

.word4 {
    animation: typing 0.7s steps(50) 0.8s both;
    margin: 18% 0 0 0;
}

.word5 {
    animation: typing 0.7s steps(50) 1.1s both;
}

.word6 {
    animation: typing 0.7s steps(50) 1.4s both;
}

.word7 {
    animation: typing 0.7s steps(50) 1.7s both;
}

.word8 {
    margin: 8% 0 14px 0;
    animation: typing 0.7s steps(50) 2.0s both;
}

.word9 {
    animation: typing 0.7s steps(50) 2.3s both;
}


/*-----------------------------------------------
     typing2-hero
-----------------------------------------------*/
.hero .text {
    width: 50%;
    max-width: 800px;
    margin: 0;
    line-height: 2;
    font-weight: 600;
    color: #000;
    letter-spacing: 0.02rem;
    display: block;
    height: 12%;
    text-shadow:
        rgba(249, 249, 249, 0.51) 2px 2px, rgba(249, 249, 249, 0.36) 1px -2px, rgba(249, 249, 249, 0.5) -3px 1px, rgba(249, 249, 249, 0.5) 0 -2px, rgba(249, 249, 249, 0.34) -1px 2px, rgba(249, 249, 249, 0.3) -2px 1px, rgba(249, 249, 249, 0.5) 1px 0px, rgba(249, 249, 249, 0.24) -2px 1px;
    position: absolute;
    top: 47%;
    right: 5%;

    z-index: 9;
}



@keyframes typing2 {
    0% {
        width: 0rem;
        opacity: 0;

    }

    50% {
        filter: blur(2px);
    }

    100% {
        width: 50rem;
        opacity: 1;
        filter: blur(0px);
    }
}

.hero  h4 {
    overflow: hidden;
    white-space: nowrap;
    margin: 0 0 5px 0;
    opacity: 1;
    width: 0;

    line-height: 1.75;
    font-weight: 600;
    color: #000;
    letter-spacing: 0.02rem;
    text-shadow:
        rgba(249, 249, 249, 0.8) 0px 1px, rgba(249, 249, 249, 0.8) 2px -1px, rgba(249, 249, 249, 0.8) 1px -2px, rgba(249, 249, 249, 0.8) 0px 0px, rgba(249, 249, 249, 0.34) 0px 0px, rgba(249, 249, 249, 0.8) 1px 2px, rgba(249, 249, 249, 0.8) 1px 0px, rgba(249, 249, 249, 0.8) 0px -2px;
    font-size: 1.1rem;
}

.word {
    width: 0rem;
}

.word11 {
    animation: typing2 0.7s steps(50) 1.2s both;
}

.word12 {
    animation: typing2 0.7s steps(50) 1.5s both;
}

.word13 {
    animation: typing2 0.7s steps(50) 1.8s both;
}

.word14 {
    animation: typing2 0.7s steps(50) 2.1s both;
}


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

.hero .text {
    width: 50%;
    max-width: 800px;
    height: 12%;

    top: 41%;
}

.hero h4 {
    width: 50%;
    max-width: 800px;
    margin: 0 0 0 13%;
    line-height: 2;
    font-weight: 600;
    font-size: 0.8rem;
}

}
@media screen and (max-width:1280px)
{
.hero .text {
    width: 50%;
    max-width: 800px;
    height: 12%;

    top: 43%;
}
}


/*-----------------------------------------------
    video
-----------------------------------------------*/
.video {
    height: 1047px;
    background: url(../images/index_04.jpg) center 0 no-repeat;

}

.video-group {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.video-group>div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;

}

.video-group>div:nth-child(1) {
    background: url(../images/video/001.png) center 0 /100% no-repeat;
    animation: titleBlur 0.6s ease-out 0s 1 both;
}

.video-group>div:nth-child(2) {
    background: url(../images/video/002.png) center 0 /100% no-repeat;
    animation: titleBlur2 0.4s ease-out 0.5s 1 both;
}

.video-group>div:nth-child(3) {
    background: url(../images/video/003.png) center 0 /100% no-repeat;
    animation: titleBlur 0.8s ease-out 0.3s 1 both;
}

.video-group>div:nth-child(4) {
    background: url(../images/video/004.png) center 0 /100% no-repeat;
    animation: titleBlur2 0.5s ease-out 0.6s 1 both;
}

.video-group>div:nth-child(5) {
    background: url(../images/video/005.png) center 0 /100% no-repeat;
    animation: titleBlur 0.7s ease-out 0.8s 1 both;
}

.video-group>div:nth-child(6) {
    background: url(../images/video/006.png) center 0 /100% no-repeat;
    animation: titleBlur2 0.8s ease-out 1s 1 both;
}

.video-group>div:nth-child(7) {
    background: url(../images/video/007.png) center 0 /100% no-repeat;
    animation: titleBlur 0.9s ease-out 0.9s 1 both;
}


.video-group>div:nth-child(8) {
    background: url(../images/video/008.png) center 0 /100% no-repeat;
    animation: titleFadeIn 0.8s ease-out 0.7s 1 both;
    z-index: 0;
}




.btn-video a {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    z-index: 10;
}

.btn-pic:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
    background: url(../images/video/btn02.png) center 0 /100% no-repeat;
}

.btn-pic:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/event/btn-bar.png) -80px 0 /100% no-repeat;
    width: 100%;
    height: 100%;
    transition: all .8s ease;
}


.btn-pic:hover:after {
    content: "";
    background: url(../images/event/btn-bar.png) -10px 0 /100% no-repeat;
    transition: all .8s ease;

}
.video-group>div:nth-child(9).btn-event:after
{
    background: transparent;
}

.btn-video {
    position: absolute;
    width: 21%;
    height: 10%;
    right: 29%;
    top: 20%;
    z-index: 10;
    cursor: pointer;
    left: initial;
    background: url(../images/video/btn01.png) center 0 /100% no-repeat;
    animation: titleBlur  0.7s ease-out 1.1s 1 both;
}
.btn-pic {
    position: absolute;
    width: 21%;
    height: 10%;
    right: 15%;
    top: 20%;
    z-index: 10;
    cursor: pointer;
    left: initial;


    animation: titleBlur2  0.7s ease-out 1.2s 1 both;
}


@media screen and (max-width:1600px) {
    .video {
        background-size: 1600px;
        height: calc(1600px *(1047 /1920));
    }

}

@media screen and (max-width:1400px) {
    .video {
        background-size: 1400px;
        height: calc(1400px *(1047 /1920));
    }

}

@media screen and (max-width:1280px) {
    .video {
        background-size: 1280px;
        height: calc(1280px *(1047 /1920));
    }

}

@media screen and (max-width:960px) {
    .video {
        background-size: 960px;
        height: calc(960px *(1047 /1920));
    }

}

@media screen and (max-width:768px) {
    .video {
        background: url(../images/mobile_04.jpg) center top no-repeat;
        background-size: 100%;
        padding: 0 0 214% 0;
        height: auto;
    }
.btn-video {
    width: 55%;
    height: 10%;
    right: initial;
    top: 50%;
    left: 4%;
        animation: titleBlur  0s ease-out 0s 1 both;
    display: block;


}
.btn-pic {
    width: 55%;
    height: 10%;
    right: initial;
    top: 50%;
    left: 40%;
    display: block;
    animation: titleBlur2  0s ease-out 0s 1 both;


}

.btn-pic:after {
    content: '';
    background: url(../images/event/btn-bar.png) -50px 0 /100% no-repeat;
}


}
/*-----------------------------------------------
    video-wrap
-----------------------------------------------*/
.video-wrap {
    width: 45%;
    right: 7%;
    position: absolute;


    max-width: 920px;
    top: 30%;
}


.video-line-t,
.video-line-b {
    width: 100%;
    height: 50px;
    left: initial;
    right: 0;
    background: url(../images/video/line-t.png) 100% 50% /100% no-repeat;
    animation: lineShow 1.2s cubic-bezier(.250, .460, .450, .940) 0.9s 1 both;

}

.video-line-b{
    top: 0;
    bottom: -730px;
    left: -12px;
    background: url(../images/video/line-b.png) 0 100% / 100% no-repeat;
    animation: lineShow2 1.2s cubic-bezier(.250, .460, .450, .940) 1.2s 1 both;

}
.video-inside{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;

}

.pic-inside{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

}



@-webkit-keyframes lineShow {
    0% {
        width: 0;

        transform-origin: 0% 100%;
        filter: blur(1px);
        opacity: 0.5;
    }

    100% {
        width: 100%;
        transform-origin: 0% 100%;
        filter: blur(0);
        opacity: 1;
    }
}
@-webkit-keyframes lineShow2 {
    0% {
        width: 0;

        transform-origin: 0% 100%;
        filter: blur(1px);
        opacity: 0.5;
    }

    100% {
        width: 100%;
        transform-origin: 0% 100%;
        filter: blur(0);
        opacity: 1;
    }
}

@media screen and (max-width:768px) {
    .video-wrap {
        width: 96%;


        top: 58%;
        left: 0;
        right: 0;
        margin: auto;
    }

    .video-line-t,
.video-line-b {
    height: 30px;

}

.video-inside{
    position: relative;
    z-index: 10;

}

.pic-inside{
    /*! position: relative; */
    /*! top: 0; */
    /*! left: 0; */
    z-index: 1;

    /*! margin: 50px auto; */
}

}
/*-----------------------------------------------
    hero
-----------------------------------------------*/
.hero {
    height: 1180px;
    background: url(../images/index_05.jpg) center 0 no-repeat;

}


@media screen and (max-width:1600px) {
    .hero {
        background-size: 1600px;
        height: calc(1600px *(1281 /1920));
    }

}

@media screen and (max-width:1400px) {
    .hero {
        background-size: 1400px;
        height: calc(1400px *(1281 /1920));
    }

}

@media screen and (max-width:1280px) {
    .hero {
        background-size: 1280px;
        height: calc(1280px *(1281 /1920));
    }

}

@media screen and (max-width:960px) {
    .hero {
        background-size: 960px;
        height: calc(960px *(1281 /1920));
    }

}

@media screen and (max-width:768px) {
    .hero {
        background: url(../images/mobile_05.jpg) center top no-repeat;
        background-size: 100%;
        padding: 0 0 260% 0;
        height: auto;
    }

}


/*title*/

.hero-group,.man-group {
    width: 100%;
    max-width: 1920px;
    height: 100%;
    position: absolute;
    /*! top: 120px; */
    margin: auto;
    left: 0;
    right: 0;
}



.hero-group>div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 3;
    pointer-events: none;

}



.hero-group>div:nth-child(1) {
    background: url(../images/hero/001.png) center 0 /100% no-repeat;
    animation: titleBlur 0.6s ease-out 0s 1 both;
}

.hero-group>div:nth-child(2) {
    background: url(../images/hero/002.png) center 0 /100% no-repeat;
    animation: titleBlur2 0.4s ease-out 0.2s 1 both;
}

.hero-group>div:nth-child(3) {
    background: url(../images/hero/003.png) center 0 /100% no-repeat;
    animation: titleBlur 0.8s ease-out 0.3s 1 both;
}

.hero-group>div:nth-child(4) {
    background: url(../images/hero/004.png) center 0 /100% no-repeat;
    animation: titleBlur2 0.6s ease-out 0.4s 1 both;
}

.hero-group>div:nth-child(5) {
    background: url(../images/hero/005.png) center 0 /100% no-repeat;
    animation: titleBlur 0.7s ease-out 0.6s 1 both;
}

.hero-group>div:nth-child(6) {
    background: url(../images/hero/006.png) center 0 /100% no-repeat;
    animation: titleBlur 0.9s ease-out 0.7s 1 both;
}

.hero-group>div:nth-child(7) {
    background: url(../images/hero/007.png) center 0 /100% no-repeat;
    animation: titleBlur2 0.7s ease-out 0.8s 1 both;
}


.hero-group>div:nth-child(8) {
    background: url(../images/hero/008.png) center 0 /100% no-repeat;
    animation: titleBlur 0.8s ease-out .7s 1 both;
}


.hero-group>div:nth-child(9) {
    background: url(../images/hero/009.png) center 0 /100% no-repeat;
    animation: titleFadeIn 0.9s ease-out 0.8s 1 both;
}

.hero-group>div:nth-child(10) {
    background: url(../images/hero/010-1.png) center 0 /100% no-repeat;
    animation: titleFadeIn 0.9s ease-out 0.6s 1 both;
    z-index: 0;
}

/**/
.hero-group>div:nth-child(11) {
    background: url(../images/hero/011.png) center 0 /100% no-repeat;
    animation: titleBlur2 0.8s ease-out 0.7s 1 both;
    z-index: 0;
}
.hero-group>div:nth-child(12) {
    background: url(../images/hero/012-1.png) center 0 /100% no-repeat;
    animation: titleBlur 0.8s ease-out 0.8s 1 both;
    z-index: 0;
}
.hero-group>div:nth-child(13) {
    background: url(../images/hero/013-1.png) center 0 /100% no-repeat;
    animation: titleBlur2 0.8s ease-out 1s 1 both;
    z-index: 0;
}
.hero-group>div:nth-child(14) {
    background: url(../images/hero/014-1.png) center 0 /100% no-repeat;
    animation: titleBlur 0.8s ease-out 0.9s 1 both;
    z-index: 0;
}
.hero-group>div:nth-child(15) {
    background: url(../images/hero/015-1.png) center 0 /100% no-repeat;
    animation: titleBlur2 0.8s ease-out 1.1s 1 both;
    z-index: 0;
}

/**/
.hero-group>div:nth-child(16) {
    background: url(../images/hero/016.png) center 0 /100% no-repeat;
    animation: titleBlur2 0.8s ease-out 1.2s 1 both;
    z-index: 0;
}
.hero-group>div:nth-child(17) {
    background: url(../images/hero/017-1.png) center 0 /100% no-repeat;
    animation: titleBlur 0.8s ease-out 0.9s 1 both;
    z-index: 0;
}
.hero-group>div:nth-child(18) {
    background: url(../images/hero/018-1.png) center 0 /100% no-repeat;
    animation: titleBlur2 0.8s ease-out 1.1s 1 both;
    z-index: 0;
}
.hero-group>div:nth-child(19) {
    background: url(../images/hero/019-1.png) center 0 /100% no-repeat;
    animation: titleBlur 0.8s ease-out 1.2s 1 both;
    z-index: 0;
}
.hero-group>div:nth-child(20) {
    background: url(../images/hero/020-1.png) center 0 /100% no-repeat;
    animation: titleBlur2 0.8s ease-out 1.3s 1 both;
    z-index: 0;
}







/*man*/
.man-group{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}


.h_bg{
        position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    background: url(../images/hero/man01-2.png) center 0 /100% no-repeat;
    animation: h_bg 1.6s cubic-bezier(.250, .460, .450, .940) 0s 1 both;
}


@-webkit-keyframes h_bg {
 0% {
   height: 0;
   opacity: 0;
    filter: blur(5px);
  }
  100% {
    height: 100%;
    opacity: 1;
     filter: blur(0px);
  }

}


.h_pic{
        position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    background: url(../images/hero/man01.png) center 0 /100% no-repeat;
    animation: h_pic .4s cubic-bezier(.250, .460, .450, .940) .2s 1 both;
}

@-webkit-keyframes h_pic {
  0% {
            transform: translateY(100px) scale(1.2);
    opacity: 0;
    filter: blur(10px);
  }
  100% {
            transform: translateY(0) scale(1);
    opacity: 1;
     filter: blur(0px);
  }
}






/*btn*/
.btn-group{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
}

.btn01,.btn02,.btn03 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;


}
.btn01{
    display: block;
    /*background:red;*/
}

.btn02{
    /*background:green;*/
}

.btn03{
    /*background:blue;*/
}


.h_prev,
.h_next {
    position: absolute;
    right: 2rem;
    bottom: 50%;
    z-index: 99;
    opacity: .9;
    width: 3.5rem;
    height: 3.5rem;
    cursor: pointer;
    color: #fff;
    border-radius: 4px;
    box-sizing: border-box;
    transition: all .3s;
    /*background: #000; */
    background: rgb(188, 202, 208);
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, rgba(188, 202, 208, 1) 1%, rgba(174, 190, 196, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(188, 202, 208, 1) 1%, rgba(174, 190, 196, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgb(68, 84, 92) 1%, rgb(59, 78, 86) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bccad0', endColorstr='#aebec4', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
    top: initial;
    left: initial;
}

.h_prev {
    left: 2rem;
}

.h_prev::after,
.h_next::after {
    display: block;
    position: absolute;
    right: 10px;
    bottom: 14px;
    left: 0;
    margin: auto;
    width: 1.5rem;
    height: 1.5rem;
    color: #fff;
    border-top: 4px solid;
    border-right: 4px solid;
    box-sizing: border-box;
    content: '';
    transform: rotate(45deg);
    /*border-radius: 2px;*/
    border-top-left-radius: 1px;
    border-top-right-radius: 1px;
    border-bottom-right-radius: 1px;
    border-bottom-left-radius: 1px;
}

.h_prev::after {
    content: '';
    transform: rotate(-135deg);
    right: -10px;

}

.h_prev:focus,
.h_next:focus {
    outline: none;
}

.h_prev:hover,
.h_next:hover {
    opacity: .9;
    transition: all .3s ease;
    transform: scale(1.2);
}


@media screen and (max-width:768px)
{
.h_pic-m{
        position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    background: url(../images/hero/man01-m.png) center 0 /100% no-repeat;
    animation: h_pic .4s cubic-bezier(.250, .460, .450, .940) .2s 1 both;
}
.h_prev,
.h_next {
    bottom: 40%;
    width: 3rem;
    height: 3rem;
}


.h_prev::after,
.h_next::after {
    /*! right: 0; */
    bottom: 12px;
    left: 0px;
    margin: auto;
    width: 1.2rem;
    height: 1.2rem;
     content: '';

}
}

/*-----------------------------------------------
    css3
-----------------------------------------------*/

@keyframes blur {
    0% {
        opacity: 0;
        filter: blur(15px);
    }

    100% {
        opacity: 1;
        filter: blur(0px);
    }
}