/* index ------------------------------------------------- - Import - text - page-frame - pc-layout - footer - title - feature -------------------------------------------------*/ /*----------------------------------------------- device width test -----------------------------------------------*/ @media screen and (max-width:1680px) { .game-name span {background: #d9c2c252;} } @media screen and (max-width:1480px) { .game-name span {background: #93beca52;} } @media screen and (max-width:1280px) { .game-name span {background: #a4bc7752;} } /*----------------------------------------------- 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+Sans+TC:wght@100;300;400;500;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,800;1,100;1,300;1,400;1,500;1,800&display=swap'); /*----------------------------------------------- text -----------------------------------------------*/ h1,h2 {} h2>span {display: block; color: #000;font-size: 1rem;text-align: left;} p {font-weight: 400;} /*----------------------------------------------- df-width ? -----------------------------------------------*/ .df-width { height: 100%;max-width: 1900px;padding: 0;} /*----------------------------------------------- page-frame -----------------------------------------------*/ .pages { position: relative; right: 0; bottom: 0;margin: 0;padding: 0; width: 100%;height: 100%;overflow: hidden;} .wrap-box {position: relative; top: 0%;right: 0; left: 0;margin: 0px auto 0; padding: 0; z-index: 3;width: 98%;height: 95%;max-width: 1700px;} .top{background: #fff url(../images/header.jpg) 50% 0% / cover no-repeat;} .news {background: url(../images/news.jpg) no-repeat center 85%;} .story {background: url(../images/story.jpg) no-repeat center 70%;} .hero {background: url(../images/feature.jpg) no-repeat center 70%;} .feature {background:#000000 url(../images/feature.jpg) 50% 0% / cover no-repeat;} @media screen and (max-width:1800px) { .top,.news,.story,.hero,.feature {background-size: cover;} } @media screen and (max-width:1280px) { } @media screen and (max-width:768px) { .top{background: #fff url(../images/header_m.jpg) 50% 0% / cover no-repeat;} .hero {background: url(../images/feature_m.jpg) no-repeat center 70%;} .feature {background: url(../images/feature_m.jpg) 50% 0% / cover no-repeat;} } /* ------------------------------------------------- pc-layout >1921px ,active effect -------------------------------------------------*/ html,body {background: #ffffff;} #wrapper{} .section {max-width: 1920px;overflow: hidden;width: 100%;top:0;left:0;padding: 0;margin:0 auto;} .section.active {-webkit-animation: scaleA 1s ease both;} .no-effect.active {-webkit-animation: scaleA 0s ease both;} @-webkit-keyframes scaleA { 0% {opacity: 0;-webkit-transform: scale(1.4); } 100% {opacity: 1;-webkit-transform: scale(1); } } /*----------------------------------------------- footer -----------------------------------------------*/ #footer {width: 100%;height: 10vw !important;background: rgba(232, 232, 232);} .copyright {position:absolute;width: 40%;height: 100%;margin: -5% 0 0 3%;} .copyright ul {display: flex;width: 100%;} .copyright ul li:nth-child(1) {flex: 1;background: url(../images/info.png) 0 50% /95% no-repeat;} .copyright ul li:nth-child(2) {flex: 1;background: url(../images/logos.png) 100% 60% /95% no-repeat;} @media screen and (min-width:1921px){ #footer {height:300px !important } .copyright{top: 80px;} } @media screen and (max-width:1600px) { .copyright ul li:nth-child(1) {background: url(../images/info.png) 0 60% /95% no-repeat;} .copyright ul li:nth-child(2) {background:url(../images/logos.png) 100% 65% /95% no-repeat;} } @media screen and (max-width:1280px){ #footer {height: 17vw !important} .copyright {transform: scale(1.5);margin: -10% 0 0 13%;} } @media screen and (max-width:768px) { #footer {height:310px !important ;background: #ffffff url(../images/footer-m.png) center 100% /100% no-repeat;} .copyright {opacity: 0;} } /*----------------------------------------------- footer__menu-bottom -----------------------------------------------*/ .menu-bottom {position:absolute;right: 45px;bottom: 15%;width: 25%;z-index: 10;} .menu-bottom ul li:after {content: '';width: 1px;height: 50%;position: absolute;top: 25%;left: 0;} .menu-bottom ul li:nth-child(1):after {width: 0px;} .menu-bottom ul {display: flex;width: 98%;padding: 0;margin: auto;flex-direction: column;height: 100%;} .menu-bottom ul li {padding: 0;list-style: none;flex: 1;} .menu-bottom a {font-size: 0.8rem;width: 100%;height: 100%;text-align: right;color: #555;line-height: 25px;font-weight: 500;letter-spacing: 0.02rem;transition: all .3s ease;} .menu-bottom a:hover {color: rgb(0, 95, 133);transition: all .3s ease;} .menu-bottom a:before {content: '';width: 0%;height: 1px;background: rgba(0, 139, 193, 0.5);position: absolute;bottom: 0;transition: all .5s ease;margin: auto;right: 0;} .menu-bottom a:hover:before {width: 45%;transition: all .5s ease;right: 0;bottom: 0;} @media screen and (min-width:1921px){ .menu-bottom{ bottom: 30%;} } @media screen and (max-width:1680px) {.menu-bottom {transform: scale(0.8) translate(7%,0%);right: 0%;bottom: 5%;} } @media screen and (max-width:1480px) {.menu-bottom {transform: scale(0.8) translate(7%,10%);} } @media screen and (max-width:1280px) {.menu-bottom {transform: scale(.9) translate(-10%,2%);} .menu-bottom a:hover:before {width: 85%;} } @media screen and (max-width:768px) {.menu-bottom {transform: scale(.95) translate(0%,0%);top: 4.3%;right: 0;left: 0; margin: auto;width: 75%;bottom: inherit;} .menu-bottom a {text-align: center;padding: 1px 0;} .menu-bottom a:hover:before {content: '';width: 50%;left: 0;right: 0;margin: auto;} .menu-bottom a:before {content: '';left: 0;right: 0;} } @media screen and (max-width:376px) {.menu-bottom {transform: scale(0.8) translate(0%,0%);} } /*----------------------------------------------- css3-class ? -----------------------------------------------*/ /*----------------------------------------------- section-hover ? -----------------------------------------------*/ /*----------------------------------------------- title -----------------------------------------------*/ .title{position: absolute;left: 50px;top: -700px;z-index: 15;width: 120px;} .section.active .title {-webkit-animation: bounceInDown 7s cubic-bezier(0.230, 1.000, 0.320, 1.000) .5s both;} .section.active .title-stay {-webkit-animation: bounceInStay 1.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) .5s both;} .title_r{position: absolute;right:50px;top: -100px;z-index: 5;width: 120px;} .section.active .title_r{-webkit-animation: bounceInDown 2s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;} @media screen and (max-width:1680px){ .hero .title_r{width: 90px;top: -30px; } .feature .title{width: 100px;margin-top:50px; left:3%;} } @media screen and (max-width:1280px){ .feature .title{width: 95px;margin-top:50px; left:8%;} } @media screen and (max-width:768px){ .hero .title_r{width: 70px;top: -10px; } .feature .title{width: 70px;margin-top:60px; left:11%;} } /*----------------------------------------------- feature特色 -----------------------------------------------*/ .feature .feature_title{position: absolute;top: -30px; left: 30vw; transition: all .3s ease;} .section.active .feature_title{animation: blur_entry 2s both;} .feature .pattern_c01{position: absolute;top: 15vw; left:7%; transition: all .3s ease;z-index: 100;} .feature .pattern_c02 {position: absolute;bottom: 5vw; right:5%; transition: all .3s ease;z-index: 100;} .section.active .pattern_c01{animation: blur_entry_l 2s .8s both;} .section.active .pattern_c02{animation: blur_entry_r 2s 1s both;} #section2 .fog {position: absolute;bottom: -10vh;pointer-events: none;} .section.active .fog {-webkit-animation: scaleA 1s cubic-bezier(.250, .460, .450, .940) .5s both;} @keyframes blur_entry_l { 0% {opacity: 0; filter: blur(10px); transform: scale(1.4) translate3d(10%, 10%, 0) translateX(150px);} 100% {opacity: 1; filter: blur(0px);transform: scale(1) translate3d(0%, 0%, 0)translateX(0);} } @keyframes blur_entry_r { 0% {opacity: 0; filter: blur(10px); transform: scale(1.4) translate3d(10%, 10%, 0) translateX(-150px);} 100% {opacity: 1; filter: blur(0px);transform: scale(1) translate3d(0%, 0%, 0)translateX(0);} } @media screen and (min-width:1921px){ .feature .feature_title{left: 15vw;} } @media screen and (max-width:1680px){ .feature .feature_title{left: 35vw;top:-20px;transform: scale(.8) !important;} } @media screen and (max-width:1580px){ .feature .feature_title{top: -20px;margin-left: -50px;} .feature .pattern_c01{ top: 15vw;left:12%; } .feature .pattern_c02 { bottom: 10vw; right:5%; } } @media screen and (max-width:1480px){ .feature .feature_title{transform: scale(.7) !important ; top:10px;margin-left: -50px;} } @media screen and (max-width:1280px){ .feature .feature_title{transform: scale(.8) !important; top: -5px;margin-left: -80px; } .feature .pattern_c01{ top: 37vw;left:1%; } .feature .pattern_c02 { bottom: 1vw; right:-10%; } .feature .title{margin-left: -40px;} } @media screen and (max-width:768px){ .feature .feature_title{width: 330px;;top:30px; left:120px; } .feature .pattern_c01{width: 150px; top:500px ;left:-30px; } .feature .pattern_c02 {width: 250px; bottom:10px; right:-80px; } } /*----------------------------------------------- history故事 -----------------------------------------------*/ /*----------------------------------------------- fly-crisom 光點 -----------------------------------------------*/ /*----------------------------------------------- history video -----------------------------------------------*/ /*----------------------------------------------- circle 新聞圓 -----------------------------------------------*/ /*----------------------------------------------- turn 新聞圓轉圈圈 -----------------------------------------------*/ /*----------------------------------------------- news-group新聞列表 -----------------------------------------------*/ /*----------------------------------------------- item-effect ? -----------------------------------------------*/ @keyframes fadeInDown { 0% {opacity: 0;-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);} to {opacity: 1;-webkit-transform: translateZ(0); transform: translateZ(0);} } @keyframes bounceInUp { 0% {opacity: 0;transform: translateY(50px);} 100% {opacity: 1;transform: translateY(0);} } @keyframes bounceInDown { 0% {transform: translateY(-700px);transform: scale(1.5);} 20%,40% {transform: scale(1);transform: translateY(600px);} 100% {transform: scale(1.2);transform: translateY(-700px);} } @keyframes bounceInStay { 0% {transform: translateY(-700px);transform: scale(1.5);} 100% {transform: scale(1);transform: translateY(600px);} }