/*----------------------------------------------- hero-frame -----------------------------------------------*/ .title-hero { margin: -19% auto 0; transform: scale(.55); } .hero-group { position: absolute; top: -6%; right: 0; left: 0; margin: 0 auto; width: 1600px; height: 500px; text-align: center; /*! transform: scale(0.9); */ } @media screen and (max-width:1400px) { .hero-group { left: -4%; } } @media screen and (max-width:768px) { .hero-group { left: 0; width: 100%; } .title-hero { margin: -46% auto 0; transform: scale(1); } } /*----------------------------------------------- slowfloat - 上下飄動 -----------------------------------------------*/ @keyframes fadeOutPlay { 0% { opacity: 0; } 50% { opacity: .2; } 100% { opacity: .6; } } .hero-video:hover::before { opacity: .9; content: ''; transition: all .3s ease; background: url(../images/hero/icon-play-r.png) center center no-repeat; background-size: 16%; } /*----------------------------------------------- hero-nav -----------------------------------------------*/ .hero-nav { position: absolute; bottom: 37%; left: -1%; z-index: 51; width: 100%; height: 430px; max-width: 215px; } .hero-nav::after { position: absolute; top: -60%; left: -4%; z-index: -1; width: 100%; height: 210%; content: ''; background: url(../images/hero/bar-bg.png) center top / 100% no-repeat; /*background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 );*/ } .hero-nav::before { position: absolute; top: 52%; left: 44%; z-index: -1; width: 136%; height: 200px; /*! border-top: 2px solid #00000040; */ content: ''; /*! background: rgba(0, 0, 0, .11); */ } .hero-nav ul { display: flex; position: relative; margin: auto; z-index: 10; height: 100%; max-width: 160px; overflow: hidden; flex-wrap: wrap; } .hero-nav ul li { margin: 0 0 0 1%; padding: 0 0 0 0; opacity: .95; width: 11%; min-width: 70px; cursor: pointer; /*! height: 50%; */ } .hero-nav ul li { /* transition: all 0.3s; */ opacity: 1; } @media screen and (max-width:1280px) { .hero-nav { bottom: 39%; left: -1%; } } @media screen and (max-width:768px) { .hero-nav::after { top: 20%; left: -26%; width: 200%; height: 150%; content: ''; background: #000; } .hero-nav ul { height: 141px; max-width: 100%; } .hero-nav { bottom: -15%; left: 0%; height: 180px; max-width: 100%; transform: scale(.9); } .hero-nav ul li { margin: 0 0 0 0.5%; padding: 0 0 17% 0; width: 16%; height: 52px; min-width: 50px; } } @media screen and (max-width:375px) { .hero-nav { bottom: -5%; } .hero-nav::after { top: 18%; left: -26%; width: 200%; height: 150%; content: ''; background: #000de; } } @media screen and (max-width:320px) { .hero-nav { bottom: 10%; } } .h-1 { background: url(../images/hero/h1-nav.png) center top / 100% no-repeat; } .h-1:hover { background: url(../images/hero/h1-nav.png) center bottom / 100% no-repeat; } .h-2 { background: url(../images/hero/h2-nav.png) center top / 100% no-repeat; } .h-2:hover { background: url(../images/hero/h2-nav.png) center bottom / 100% no-repeat; } .h-3 { background: url(../images/hero/h3-nav.png) center top / 100% no-repeat; } .h-3:hover { background: url(../images/hero/h3-nav.png) center bottom / 100% no-repeat; } .h-4 { background: url(../images/hero/h4-nav.png) center top / 100% no-repeat; } .h-4:hover { background: url(../images/hero/h4-nav.png) center bottom / 100% no-repeat; } .h-5 { background: url(../images/hero/h5-nav.png) center top / 100% no-repeat; } .h-5:hover { background: url(../images/hero/h5-nav.png) center bottom / 100% no-repeat; } .h-6 { background: url(../images/hero/h6-nav.png) center top / 100% no-repeat; } .h-6:hover { background: url(../images/hero/h6-nav.png) center bottom / 100% no-repeat; } .h-7 { background: url(../images/hero/h7-nav.png) center top / 100% no-repeat; } .h-7:hover { background: url(../images/hero/h7-nav.png) center bottom / 100% no-repeat; } .h-8 { background: url(../images/hero/h8-nav.png) center top / 100% no-repeat; } .h-8:hover { background: url(../images/hero/h8-nav.png) center bottom / 100% no-repeat; } .h-9 { background: url(../images/hero/h9-nav.png) center top / 100% no-repeat; } .h-9:hover { background: url(../images/hero/h9-nav.png) center bottom / 100% no-repeat; } .h-10 { background: url(../images/hero/h10-nav.png) center top / 100% no-repeat; } .h-10:hover { background: url(../images/hero/h10-nav.png) center bottom / 100% no-repeat; } .h-11 { background: url(../images/hero/h11-nav.png) center top / 100% no-repeat; } .h-11:hover { background: url(../images/hero/h11-nav.png) center bottom / 100% no-repeat; } .h-12 { background: url(../images/hero/h12-nav.png) center top / 100% no-repeat; } .h-12:hover { background: url(../images/hero/h12-nav.png) center bottom / 100% no-repeat; } /**/ .hero-active { transition: all .3s ease; background-position: center bottom; } /*----------------------------------------------- hero-css3 -----------------------------------------------*/ /* ! class filename must be different,or they won't work */ @keyframes hero-hide { 0% { opacity: 1; } 32% { opacity: 0; } 100% { opacity: 1; transform: translateX(0px); } } @keyframes hero-show01 { 0% { opacity: 0; transform: translateX(70px); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateX(0); } } @keyframes hero-show02 { 0% { opacity: 0; transform: translateX(70px); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateX(0); } } @keyframes hero-show03 { 0% { opacity: 0; transform: translateX(70px); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateX(0); } } @keyframes hero-show04 { 0% { opacity: 0; transform: translateX(70px); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateX(0); } } @keyframes hero-show05 { 0% { opacity: 0; transform: translateX(70px); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateX(0); } } @keyframes hero-show06 { 0% { opacity: 0; transform: translateX(70px); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateX(0); } } @keyframes hero-show07 { 0% { opacity: 0; transform: translateX(70px); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateX(0); } } @keyframes hero-show08 { 0% { opacity: 0; transform: translateX(70px); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateX(0); } } @keyframes hero-show09 { 0% { opacity: 0; transform: translateX(70px); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateX(0); } } @keyframes hero-show10 { 0% { opacity: 0; transform: translateX(70px); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateX(0); } } @keyframes hero-show11 { 0% { opacity: 0; transform: translateX(70px); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateX(0); } } @keyframes hero-show12 { 0% { opacity: 0; transform: translateX(70px); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateX(0); } } @keyframes down01 { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes down02 { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes down03 { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes down04 { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes down05 { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes down06 { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes s-down01 { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes s-down02 { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes s-down03 { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes s-down04 { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes s-down05 { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes s-down06 { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .hero-all { position: relative; width: 100%; height: 100%; /*! transform: ; */ } /*----------------------------------------------- hero-hide -----------------------------------------------*/ .hero-hide01 , .hero-hide02 , .hero-hide03 , .hero-hide04 , .hero-hide05 , .hero-hide06 , .hero-hide07 , .hero-hide08 , .hero-hide09 , .hero-hide10 , .hero-hide11 , .hero-hide12 { animation: hero-hide .5s ease-in-out 0s 1 both; } /*----------------------------------------------- hero-single man -----------------------------------------------*/ .hero { position: absolute; top: -17%; right: -11%; width: 1132px; height: 867px; background: url(../images/hero/h12.png) center top / 100% no-repeat; } .hero00 { width: 0; height: 0; background: url(../images/hero/h1.png) center top / 100% no-repeat; } .hero-show01 { width: 1132px; height: 867px; animation: hero-show01 1.5s ease-in-out 0s 1 both; background: url(../images/hero/h1.png) center top no-repeat; } .hero-show02 { animation: hero-show02 1.5s ease-in-out 0s 1 both; background: url(../images/hero/h2.png) center top no-repeat; } .hero-show03 { animation: hero-show03 1.5s ease-in-out 0s 1 both; background: url(../images/hero/h3.png) center top no-repeat; } .hero-show04 { animation: hero-show04 1.5s ease-in-out 0s 1 both; background: url(../images/hero/h4.png) center top no-repeat; } .hero-show05 { animation: hero-show05 1.5s ease-in-out 0s 1 both; background: url(../images/hero/h5.png) center top no-repeat; } .hero-show06 { animation: hero-show06 1.5s ease-in-out 0s 1 both; background: url(../images/hero/h6.png) center top no-repeat; } .hero-show07 { animation: hero-show07 1.5s ease-in-out 0s 1 both; background: url(../images/hero/h7.png) center top no-repeat; } .hero-show08 { animation: hero-show08 1.5s ease-in-out 0s 1 both; background: url(../images/hero/h8.png) center top no-repeat; } .hero-show09 { right: -10%; animation: hero-show09 1.5s ease-in-out 0s 1 both; background: url(../images/hero/h9.png) 0 top no-repeat; } .hero-show10 { right: -10%; animation: hero-show10 1.5s ease-in-out 0s 1 both; background: url(../images/hero/h10.png) center top no-repeat; } .hero-show11 { right: -10%; animation: hero-show11 1.5s ease-in-out 0s 1 both; background: url(../images/hero/h11.png) center top no-repeat; } .hero-show12 { right: -10%; animation: hero-show12 1.5s ease-in-out 0s 1 both; background: url(../images/hero/h12.png) center top no-repeat; } @media screen and (max-width:768px) { .hero { position: absolute; top: 3%; right: 0; width: 100%; height: 130%; background: url(../images/hero/h12.png) 35% top / 160% no-repeat; } .hero-show01 { width: 100%; animation: hero-show01 1.8s ease-in-out 0s 1 both; background: url(../images/hero/h1.png) 7% top / 140% no-repeat; } .hero-show02 { animation: hero-show02 1.8s ease-in-out 0s 1 both; background: url(../images/hero/h2.png) 8% top / 135% no-repeat; } .hero-show03 { animation: hero-show03 1.8s ease-in-out 0s 1 both; background: url(../images/hero/h3.png) 27% top / 140% no-repeat; } .hero-show04 { animation: hero-show04 1.8s ease-in-out 0s 1 both; background: url(../images/hero/h4.png) 23% 21% / 140% no-repeat; } .hero-show05 { animation: hero-show05 1.8s ease-in-out 0s 1 both; background: url(../images/hero/h5.png) 5% 26% / 140% no-repeat; } .hero-show06 { animation: hero-show06 1.8s ease-in-out 0s 1 both; background: url(../images/hero/h6.png) -2% 9% / 130% no-repeat; } .hero-show07 { animation: hero-show07 1.8s ease-in-out 0s 1 both; background: url(../images/hero/h7.png) 10% 9% / 130% no-repeat; } .hero-show08 { animation: hero-show08 1.8s ease-in-out 0s 1 both; background: url(../images/hero/h8.png) 12% 9% / 130% no-repeat; } .hero-show09 { animation: hero-show09 1.8s ease-in-out 0s 1 both; background: url(../images/hero/h9.png) 10% 9% / 143% no-repeat; } .hero-show10 { animation: hero-show10 1.8s ease-in-out 0s 1 both; background: url(../images/hero/h10.png) 10% 9% / 143% no-repeat; } .hero-show11 { animation: hero-show11 1.8s ease-in-out 0s 1 both; background: url(../images/hero/h11.png) 0% 0 / 155% no-repeat; } .hero-show12 { animation: hero-show12 1.8s ease-in-out 0s 1 both; background: url(../images/hero/h12.png) 10% 23% / 153% no-repeat; } } /*----------------------------------------------- hero-name -----------------------------------------------*/ .hero-name { position: absolute; top: -15%; left: 10%; width: 441px; height: 224px; background: url(../images/hero/h12-name.png) center top / 85% no-repeat; } .hero-name01 { animation: down01 1.2s ease-out .2s 1 both; background: url(../images/hero/h1-name.png) center top / 85% no-repeat; } .hero-name02 { animation: down02 1.2s ease-out .2s 1 both; background: url(../images/hero/h2-name.png) center top / 85% no-repeat; } .hero-name03 { animation: down03 1.2s ease-out .2s 1 both; background: url(../images/hero/h3-name.png) center top / 85% no-repeat; } .hero-name04 { animation: down04 1.2s ease-out .2s 1 both; background: url(../images/hero/h4-name.png) center top / 85% no-repeat; } .hero-name05 { animation: down05 1.2s ease-out .2s 1 both; background: url(../images/hero/h5-name.png) center top / 85% no-repeat; } .hero-name06 { animation: down01 1.2s ease-out .2s 1 both; background: url(../images/hero/h6-name.png) center top / 85% no-repeat; } .hero-name07 { animation: down02 1.2s ease-out .2s 1 both; background: url(../images/hero/h7-name.png) center top / 85% no-repeat; } .hero-name08 { animation: down03 1.2s ease-out .2s 1 both; background: url(../images/hero/h8-name.png) center top / 85% no-repeat; } .hero-name09 { animation: down04 1.2s ease-out .2s 1 both; background: url(../images/hero/h9-name.png) center top / 85% no-repeat; } .hero-name10 { animation: down05 1.2s ease-out .2s 1 both; background: url(../images/hero/h10-name.png) center top / 85% no-repeat; } .hero-name11 { animation: down06 1.2s ease-out .2s 1 both; background: url(../images/hero/h11-name.png) center top / 85% no-repeat; } .hero-name12 { animation: down06 1.2s ease-out .2s 1 both; background: url(../images/hero/h12-name.png) center top / 85% no-repeat; } /*----------------------------------------------- hero-icon -----------------------------------------------*/ .hero-icon { position: absolute; top: 8%; left: 33%; width: 119px; height: 120px; background: url(../images/hero/h12-icon.png) center top / 80% no-repeat; } .hero-icon01 { animation: down01 .7s ease-out .4s 1 both; background: url(../images/hero/h1-icon.png) center top / 80% no-repeat; } .hero-icon02 { animation: down02 .7s ease-out .4s 1 both; background: url(../images/hero/h2-icon.png) center top / 80% no-repeat; } .hero-icon03 { top: -1%; animation: down03 .7s ease-out .4s 1 both; background: url(../images/hero/h3-icon.png) center top / 80% no-repeat; } .hero-icon04 { animation: down04 .7s ease-out .4s 1 both; background: url(../images/hero/h4-icon.png) center top / 80% no-repeat; } .hero-icon05 { animation: down05 .7s ease-out .4s 1 both; background: url(../images/hero/h5-icon.png) center top / 80% no-repeat; } .hero-icon06 { animation: down06 .7s ease-out .4s 1 both; background: url(../images/hero/h6-icon.png) center top / 80% no-repeat; } .hero-icon07 { animation: down01 .7s ease-out .4s 1 both; background: url(../images/hero/h7-icon.png) center top / 80% no-repeat; } .hero-icon08 { animation: down02 .7s ease-out .4s 1 both; background: url(../images/hero/h8-icon.png) center top / 80% no-repeat; } .hero-icon09 { animation: down03 .7s ease-out .4s 1 both; background: url(../images/hero/h9-icon.png) center top / 80% no-repeat; } .hero-icon10 { animation: down04 .7s ease-out .4s 1 both; background: url(../images/hero/h10-icon.png) center top / 80% no-repeat; } .hero-icon11 { animation: down05 .7s ease-out .4s 1 both; background: url(../images/hero/h11-icon.png) center top / 80% no-repeat; } .hero-icon12 { animation: down05 .7s ease-out .4s 1 both; background: url(../images/hero/h12-icon.png) center top / 80% no-repeat; } /*----------------------------------------------- hero-text -----------------------------------------------*/ .hero-text { position: absolute; top: 32%; left: 12%; padding: 0 0 0 0; width: 572px; height: 172px; border-top: 1px solid #555; background: url(../images/hero/h12-text.png) center 20px / 90% no-repeat; } .hero-text01 { animation: s-down01 .8s ease .5s 1 both; background: url(../images/hero/h1-text.png) center 20px / 90% no-repeat; } .hero-text02 { animation: s-down02 .8s ease .5s 1 both; background: url(../images/hero/h2-text.png) center 20px / 90% no-repeat; } .hero-text03 { animation: s-down03 .8s ease .5s 1 both; background: url(../images/hero/h3-text.png) center 20px / 90% no-repeat;} .hero-text04 { animation: s-down04 .8s ease .5s 1 both; background: url(../images/hero/h4-text.png) center 20px / 90% no-repeat; } .hero-text05 { animation: s-down05 .8s ease .5s 1 both; background: url(../images/hero/h5-text.png) center 14px / 90% no-repeat; } .hero-text06 { animation: s-down06 .8s ease .5s 1 both; background: url(../images/hero/h6-text.png) center 20px / 90% no-repeat; } .hero-text07 { animation: s-down01 .8s ease .5s 1 both; background: url(../images/hero/h7-text.png) center 20px / 90% no-repeat; } .hero-text08 { animation: s-down02 .8s ease .5s 1 both; background: url(../images/hero/h8-text.png) center 20px / 90% no-repeat; } .hero-text09 { animation: s-down03 .8s ease .5s 1 both; background: url(../images/hero/h9-text.png) center 20px / 90% no-repeat; } .hero-text10 { animation: s-down04 .8s ease .5s 1 both; background: url(../images/hero/h10-text.png) center 20px / 90% no-repeat; } .hero-text11 { animation: s-down05 .8s ease .5s 1 both; background: url(../images/hero/h11-text.png) center 20px / 90% no-repeat; } .hero-text12 { animation: s-down05 .8s ease .5s 1 both; background: url(../images/hero/h12-text.png) center 20px / 90% no-repeat; } /*----------------------------------------------- hero-bg -----------------------------------------------*/ .hero-bg { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/hero/bg-hero-4.jpg) top no-repeat; /*animation: slideup_ .8s ease-out 0s 1 both;*/ -webkit-filter: grayscale(1); filter: grayscale(1); } .hero-bg-8 { display: none; opacity: 0; } @media screen and (max-width:768px) { .hero-bg-8 { display: none; position: absolute; top: 0; left: 0; z-index: 0; opacity: 1; width: 100%; height: 100%; /*animation: slideup_ .8s ease-out 0s 1 both;*/ /*! -webkit-filter: grayscale(1); */ /*! filter: grayscale(1); */ background: url(../images/hero/bg-hero-4-m.jpg) 83% 171% /100% no-repeat; } } /*----------------------------------------------- hero-video -----------------------------------------------*/ /*.hero-video { position: absolute; top: 70%; left: 29%; width: 286px; height: 152px; border: 1px solid #0009e; transition: all .3s ease; } .hero-video:hover { border: 1px solid #861212ad; transition: all .3s ease; } .hero-play-cover { display: none; position: absolute; top: 0; left: 0; z-index: 1; opacity: .5; width: 100%; height: 100%; cursor: pointer; content: ''; transition: all .3s ease; pointer-events: all; background: url(../images/hero/icon-play.png) center center no-repeat; background-size: 16%; } .hero-play-cover:hover { opacity: 1; transition: all .3s ease; background: url(../images/hero/icon-play-r.png) center center no-repeat; background-size: 16%; } @media screen and (max-width:768px) { .hero-video { top: 47%; right: 5%; left: auto; width: 47%; height: 22%; border: 0 solid #0009e; transition: all .3s ease; } .hero-video:hover { border: 0 solid #861212ad; } } .video02 , .video03 , .video04 , .video05 , .video06 , .video07 { display: none; } .hero-video01 , .hero-video02 , .hero-video03 , .hero-video04 , .hero-video05 , .hero-video06 , .hero-video07 { animation: down01 .9s ease-out 2.2s 1 both; }*/ /*----------------------------------------------- hero-skill -----------------------------------------------*/ .hero-skill { position: absolute; top: 60%; left: 13%; padding: 32px 0 0 0; } @keyframes hero-skill01 { 0% { opacity: 0; transform: translateY(50px); } 30% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } } @keyframes hero-skill02 { 0% { opacity: 0; transform: translateY(50px); } 30% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } } @keyframes hero-skill03 { 0% { opacity: 0; transform: translateY(50px); } 30% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } } @keyframes hero-skill04 { 0% { opacity: 0; transform: translateY(50px); } 30% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } } @keyframes hero-skill05 { 0% { opacity: 0; transform: translateY(50px); } 30% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } } @keyframes hero-skill06 { 0% { opacity: 0; transform: translateY(50px); } 30% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } } @keyframes hero-skill07 { 0% { opacity: 0; transform: translateY(50px); } 30% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } } @keyframes hero-skill08 { 0% { opacity: 0; transform: translateY(50px); } 30% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } } .hero-skill01 , .hero-skill02 , .hero-skill03 , .hero-skill04 , .hero-skill05 , .hero-skill06 , .hero-skill07 , .hero-skill08 , .hero-skill09 , .hero-skill10 , .hero-skill11 , .hero-skill12 { animation: hero-skill06 .5s ease .6s 1 both; } .skill-change { position: absolute; top: 32px; left: 0; z-index: 10; width: 212px; height: 189px; background: url(../images/hero/skill12.png) center 0 / 100% no-repeat; } @media screen and (max-width:768px) { .hero-skill { top: 40%; left: 3%; padding: 32px 0 0 0; width: 33%; } .skill-change { width: 100%; height: 100%; } } @keyframes skill-change01 { 0% { opacity: 0; transform: scale(0); } 40% { opacity: 1; transform: scale(.9); } 50% { opacity: 1; transform: scale(.6); } 70% { transform: scale(.95); } 80% { opacity: 1; transform: scale(.85); } 100% { transform: scale(1); } } @keyframes skill-change02 { 0% { opacity: 0; transform: scale(0); } 40% { opacity: 1; transform: scale(.9); } 50% { opacity: 1; transform: scale(.6); } 70% { transform: scale(.95); } 80% { opacity: 1; transform: scale(.85); } 100% { transform: scale(1); } } @keyframes skill-change03 { 0% { opacity: 0; transform: scale(0); } 40% { opacity: 1; transform: scale(.9); } 50% { opacity: 1; transform: scale(.6); } 70% { transform: scale(.95); } 80% { opacity: 1; transform: scale(.85); } 100% { transform: scale(1); } } @keyframes skill-change04 { 0% { opacity: 0; transform: scale(0); } 40% { opacity: 1; transform: scale(.9); } 50% { opacity: 1; transform: scale(.6); } 70% { transform: scale(.95); } 80% { opacity: 1; transform: scale(.85); } 100% { transform: scale(1); } } @keyframes skill-change05 { 0% { opacity: 0; transform: scale(0); } 40% { opacity: 1; transform: scale(.9); } 50% { opacity: 1; transform: scale(.6); } 70% { transform: scale(.95); } 80% { opacity: 1; transform: scale(.85); } 100% { transform: scale(1); } } @keyframes skill-change06 { 0% { opacity: 0; transform: scale(0); } 40% { opacity: 1; transform: scale(.9); } 50% { opacity: 1; transform: scale(.6); } 70% { transform: scale(.95); } 80% { opacity: 1; transform: scale(.85); } 100% { transform: scale(1); } } @keyframes skill-change07 { 0% { opacity: 0; transform: scale(0); } 40% { opacity: 1; transform: scale(.9); } 50% { opacity: 1; transform: scale(.6); } 70% { transform: scale(.95); } 80% { opacity: 1; transform: scale(.85); } 100% { transform: scale(1); } } @keyframes skill-change08 { 0% { opacity: 0; transform: scale(0); } 40% { opacity: 1; transform: scale(.9); } 50% { opacity: 1; transform: scale(.6); } 70% { transform: scale(.95); } 80% { opacity: 1; transform: scale(.85); } 100% { transform: scale(1); } } .skill-change01 { animation: skill-change01 1.2s ease .65s 1 both; background: url(../images/hero/skill01.png) center 0 / 100% no-repeat; } .skill-change02 { animation: skill-change02 1.2s ease .65s 1 both; background: url(../images/hero/skill02.png) center 0 / 100% no-repeat; } .skill-change03 { animation: skill-change03 1.2s ease .65s 1 both; background: url(../images/hero/skill03.png) center 0 / 100% no-repeat; } .skill-change04 { animation: skill-change04 1.2s ease .65s 1 both; background: url(../images/hero/skill04.png) center 0 / 100% no-repeat; } .skill-change05 { animation: skill-change05 1.2s ease .65s 1 both; background: url(../images/hero/skill05.png) center 0 / 100% no-repeat; } .skill-change06 { animation: skill-change06 1.2s ease .65s 1 both; background: url(../images/hero/skill06.png) center 0 / 100% no-repeat; } .skill-change07 { animation: skill-change07 1.2s ease .65s 1 both; background: url(../images/hero/skill07.png) center 0 / 100% no-repeat; } .skill-change08 { animation: skill-change07 1.2s ease .65s 1 both; background: url(../images/hero/skill08.png) center 0 / 100% no-repeat; } .skill-change09 { animation: skill-change07 1.2s ease .65s 1 both; background: url(../images/hero/skill09.png) center 0 / 100% no-repeat; } .skill-change10 { animation: skill-change07 1.2s ease .65s 1 both; background: url(../images/hero/skill10.png) center 0 / 100% no-repeat; } .skill-change11 { animation: skill-change07 1.2s ease .65s 1 both; background: url(../images/hero/skill11.png) center 0 / 100% no-repeat; } .skill-change12 { animation: skill-change07 1.2s ease .65s 1 both; background: url(../images/hero/skill12.png) center 0 / 100% no-repeat; } /*----------------------------------------------- hero-m -----------------------------------------------*/ .h-m { position: absolute; top: -5%; left: 5%; z-index: 50; width: 50%; height: 62%; animation: down01 1.2s ease-out .7s 1 both; background: url(../images/hero/h12-m.png) 0 0 / 100% no-repeat; } .page03_bg { background: url(../images/hero/bg-hero-12.jpg) top no-repeat; }