@charset "UTF-8";@import"https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@900&display=swap";@import"https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300&family=Noto+Serif+TC:wght@600&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:微軟正黑體}body{overflow-x:hidden;overflow-y:auto}.loading-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;background:#bbded6;z-index:9999}.loading{position:absolute;color:#f4696b;width:80px;height:80px;top:50%;left:50%;transform:translate(-50%,-50%)}#card{width:100%;height:100vh;background-image:url(https://kyriehavegoodday.github.io/myindexImg/img/kyrie1.PNG);background-size:cover;background-repeat:no-repeat;background-attachment:fixed;background-position:0 -70px;color:#fff;overflow:hidden}@media screen and (max-width: 1024px){#card{height:400px;background-size:100%;background-position:0 0}}@media screen and (max-width: 767px){#card{height:200px;background-position:0 0}}#card #content{position:relative;top:300px;left:200px;width:600px;animation-name:kyrieText;animation-duration:3s;animation-delay:.2s}@media screen and (max-width: 1024px){#card #content{position:relative;top:180px;left:50px}}@media screen and (max-width: 767px){#card #content{position:relative;top:80px;left:20px;width:300px}}#card #content a{text-decoration:none;color:#fff}#card #content a h2{font-size:40px}@media screen and (max-width: 1024px){#card #content a h2{font-size:18px}}@media screen and (max-width: 767px){#card #content a h2{font-size:10px}}#card #content a hr{width:560px;margin-top:5px;margin-bottom:10px;height:2px;background-color:#fff;border:none}@media screen and (max-width: 1024px){#card #content a hr{width:420px}}@media screen and (max-width: 767px){#card #content a hr{width:170px}}#card #content a p{font-size:24px;font-weight:700}@media screen and (max-width: 1024px){#card #content a p{font-size:18px}}@media screen and (max-width: 767px){#card #content a p{font-size:10px}}#life{width:100%;margin-top:50px}#life #my-life{width:1200px;display:grid;grid-template-columns:45% 55%;margin:0 auto 30px;box-shadow:2px 4px 3px #0000001a;border-radius:5px;padding:20px;background-color:#fff}@media screen and (max-width: 1024px){#life #my-life{width:100%;display:grid;grid-template-columns:repeat(1,1fr)}}@media screen and (max-width: 767px){#life #my-life{width:100%}}#life #my-life #life-img{width:500px;height:500px;background-image:url(https://kyriehavegoodday.github.io/myindexImg/img/life.jpg);background-size:cover;background-position:-90px 0;box-shadow:2px 8px 3px #0000004d}@media screen and (max-width: 1024px){#life #my-life #life-img{margin:0 auto}}@media screen and (max-width: 767px){#life #my-life #life-img{width:300px;height:300px;margin:0 auto}}#life #my-life .life-content{padding:0 60px}@media screen and (max-width: 767px){#life #my-life .life-content{padding:0 30px}}#life #my-life .life-content h2{text-align:center;font-family:Noto Sans TC,sans-serif;font-size:36px;font-weight:400}@media screen and (max-width: 767px){#life #my-life .life-content h2{font-size:30px;margin-top:10px}}#life #my-life .life-content ol{margin-top:10px}#life #my-life .life-content ol li{font-weight:900}@media screen and (max-width: 767px){#life #my-life .life-content ol li{font-size:16px}}#life #my-life .life-content ol li a{text-decoration:none}#life #my-life .life-content p{margin-top:50px;line-height:30px;font-size:18px;font-weight:900}@media screen and (max-width: 767px){#life #my-life .life-content p{font-size:16px}}#life #my-focus{width:1200px;display:grid;grid-template-columns:57% 43%;margin:0 auto 30px;box-shadow:2px 4px 3px #0000001a;border-radius:5px;padding:20px;background-color:#fff}@media screen and (max-width: 1024px){#life #my-focus{width:100%;display:grid;grid-template-columns:repeat(1,1fr)}}@media screen and (max-width: 767px){#life #my-focus{width:100%;display:grid;grid-template-columns:repeat(1,1fr);margin:0 auto}}#life #my-focus #life-img{width:500px;height:500px;background-image:url(https://kyriehavegoodday.github.io/myindexImg/img/focus.jpg);background-size:cover;box-shadow:2px 8px 3px #0000004d}@media screen and (max-width: 1024px){#life #my-focus #life-img{margin:15px auto 0}}@media screen and (max-width: 767px){#life #my-focus #life-img{width:300px;height:300px}}#life #my-focus .life-content{padding:0 60px}@media screen and (max-width: 767px){#life #my-focus .life-content{padding:0 30px}}#life #my-focus .life-content h2{text-align:center;font-family:Noto Sans TC,sans-serif;font-size:36px;font-weight:400}@media screen and (max-width: 767px){#life #my-focus .life-content h2{font-size:30px}}#life #my-focus .life-content p{margin-top:30px;line-height:30px;font-family:"Noto Serif TC",serif;font-size:18px}@media screen and (max-width: 767px){#life #my-focus .life-content p{font-size:16px}}#life #mix-box{width:1000px;height:auto;display:grid;grid-template-columns:repeat(2,1fr);grid-gap:20px;margin:30px auto}@media screen and (max-width: 767px){#life #mix-box{width:100%;grid-template-columns:repeat(1,1fr)}}#life #mix-box .work-about{width:500px;height:350px;box-shadow:2px 8px 3px #0000004d}@media screen and (max-width: 767px){#life #mix-box .work-about{width:350px;margin:0 auto}}#life #mix-box .work-about a{height:350px;line-height:350px;text-decoration:none;text-align:center;color:#fff;font-family:Noto Sans TC,sans-serif}#life #mix-box .work-about a span{font-size:60px;display:block;transition:.5s;-webkit-backdrop-filter:blur(3px) opacity(90%);backdrop-filter:blur(3px) opacity(90%)}#life #mix-box .work-about a span:hover{-webkit-backdrop-filter:blur(3px) opacity(20%);backdrop-filter:blur(3px) opacity(20%)}#life #mix-box #img-work{background-image:url(https://kyriehavegoodday.github.io/myindexImg/img/works.jpg);background-size:cover}#life #mix-box #img-about{background-image:url(https://kyriehavegoodday.github.io/myindexImg/img/about.jpg);background-size:cover}.webTitle{display:block!important}.webTitle h1{font-family:Noto Sans TC,sans-serif;font-size:24px;transition:.5s}.webTitle h1:hover{color:#a54125}@media screen and (max-width: 1024px){.webTitle h1{font-size:30px}}@media screen and (max-width: 767px){.webTitle h1{font-size:25px;text-align:center}}#introduction{width:1200px;background:white;margin:0 auto;display:grid;grid-template-columns:200px 1000px;grid-template-areas:"card-left card-right"}@media screen and (max-width: 1024px){#introduction{position:relative;width:auto;grid-template-columns:200px 500px}}@media screen and (max-width: 767px){#introduction{grid-template-columns:repeat(1,1fr);grid-template-areas:"card-right" "card-left"}}#introduction #card-left{grid-area:card-left}@media screen and (max-width: 767px){#introduction #card-left{text-align:center}}#introduction #card-left #introduction-img{width:150px;height:150px;background-image:url(https://kyriehavegoodday.github.io/myindexImg/img/me-1.PNG);background-repeat:no-repeat;background-size:cover;border-radius:50%;margin-bottom:20px}@media screen and (max-width: 767px){#introduction #card-left #introduction-img{display:block;margin:0 auto}}#introduction #card-left h3{color:#000;font-family:Noto Sans TC,sans-serif;font-size:36px;transition:.5s;display:inline}#introduction #card-left h3:hover{filter:invert(26%) sepia(81%) saturate(800%) hue-rotate(336deg) brightness(101%) contrast(93%)}#introduction #card-left #symbol{font-size:30px;margin-left:85px;font-family:Noto Sans TC,sans-serif}@media screen and (max-width: 767px){#introduction #card-left #symbol{margin-left:0}}#introduction #card-left h1{color:#000;font-family:Noto Sans TC,sans-serif;transition:.5s;display:inline;font-size:40px}#introduction #card-left h1:hover{filter:invert(26%) sepia(81%) saturate(800%) hue-rotate(336deg) brightness(101%) contrast(93%)}#introduction #card-left #connection{margin-top:10px}#introduction #card-left #connection a img{width:50px;transition:.5s}#introduction #card-left #connection a img:hover{filter:invert(26%) sepia(81%) saturate(800%) hue-rotate(336deg) brightness(101%) contrast(93%)}#introduction #card-right{width:100%;grid-area:card-right;margin-bottom:50px;display:grid;grid-template-columns:repeat(2,1fr)}@media screen and (max-width: 1024px){#introduction #card-right{width:100%}}@media screen and (max-width: 767px){#introduction #card-right{display:block;position:relative}}#introduction #card-right img{width:600px;height:450px;transform:translate(180px,50px);object-fit:cover}@media screen and (max-width: 1024px){#introduction #card-right img{width:400px;height:250px;transform:translate(50px,80px);z-index:1;position:relative}}@media screen and (max-width: 767px){#introduction #card-right img{width:300px;height:250px;position:relative;left:20px;transform:translate(30px,30px)}}#introduction #card-right #card-bg{color:#fff4d6;font-family:Noto Sans TC,sans-serif;width:350px;height:450px;background-color:#fff4d6}@media screen and (max-width: 1024px){#introduction #card-right #card-bg{width:200px;height:300px;position:absolute;left:550px}}@media screen and (max-width: 767px){#introduction #card-right #card-bg{width:150px;height:250px;position:absolute;top:0;left:230px}}#title{width:100%;word-spacing:50px;margin-left:80px;margin-top:10px}@media screen and (max-width: 1024px){#title{width:100%;word-spacing:50px;margin-left:0;margin-top:0;text-align:center}}@media screen and (max-width: 767px){#title{word-spacing:10px;text-align:center}}#title span{margin:0 10px}#title a{text-decoration:none;transition:.5s;color:#000;font-family:"Noto Serif TC",serif;font-size:24px}#title a:hover{color:#a54125;border-bottom:5px solid rgb(165,65,37)}@media screen and (max-width: 1024px){#title a{font-size:35px}}@media screen and (max-width: 767px){#title a{font-size:25px}}.titleActive{color:#a54125!important;border-bottom:5px solid rgb(165,65,37)!important}@media screen and (max-width: 1024px){#hr-title{width:100%}}#work{margin-top:20px}#work #graphic-design{width:1200px;margin:0 auto;overflow:hidden}@media screen and (max-width: 1024px){#work #graphic-design{width:auto}}#work #graphic-design h1{font-family:Noto Sans TC,sans-serif;font-size:24px;transition:.5s}#work #graphic-design h1:hover{color:#a54125}@media screen and (max-width: 1024px){#work #graphic-design h1{font-size:30px}}@media screen and (max-width: 767px){#work #graphic-design h1{font-size:25px;text-align:center}}#work #graphic-design #img-box{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:20px;margin-top:15px}@media screen and (max-width: 1024px){#work #graphic-design #img-box{grid-template-columns:repeat(2,1fr)}}@media screen and (max-width: 767px){#work #graphic-design #img-box{grid-template-columns:repeat(1,1fr)}}#work #graphic-design #img-box img{width:300px;height:250px;justify-self:center;box-shadow:2px 5px 5px #0000004d;border-radius:5px}#work #poster{width:1200px;margin:0 auto;overflow:hidden}@media screen and (max-width: 1024px){#work #poster{width:auto}}#work #poster h1{font-family:Noto Sans TC,sans-serif;font-size:24px;transition:.5s}#work #poster h1:hover{color:#a54125}@media screen and (max-width: 1024px){#work #poster h1{font-size:30px}}@media screen and (max-width: 767px){#work #poster h1{font-size:25px;text-align:center}}#work #poster #img-box{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:10px;margin-top:15px}@media screen and (max-width: 1024px){#work #poster #img-box{grid-template-columns:repeat(2,1fr)}}@media screen and (max-width: 767px){#work #poster #img-box{grid-template-columns:repeat(1,1fr)}}#work #poster #img-box img{width:300px;height:450px;justify-self:center;box-shadow:2px 5px 5px #0000004d;border-radius:5px}#work #exquisite{width:1200px;margin:0 auto;overflow:hidden}@media screen and (max-width: 1024px){#work #exquisite{width:auto}}#work #exquisite h1{font-family:Noto Sans TC,sans-serif;font-size:24px;transition:.5s}#work #exquisite h1:hover{color:#a54125}@media screen and (max-width: 1024px){#work #exquisite h1{font-size:30px}}@media screen and (max-width: 767px){#work #exquisite h1{font-size:25px;text-align:center}}#work #exquisite #img-box{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:10px;margin-top:15px}@media screen and (max-width: 1024px){#work #exquisite #img-box{grid-template-columns:repeat(2,1fr)}}@media screen and (max-width: 767px){#work #exquisite #img-box{grid-template-columns:repeat(1,1fr)}}#work #exquisite #img-box img{width:300px;height:380px;justify-self:center;box-shadow:2px 5px 5px #0000004d;border-radius:5px}#work #exquisite #img-box #img-bottle{margin-top:100px;width:400px;height:200px}@media screen and (max-width: 767px){#work #exquisite #img-box #img-bottle{margin:0;width:300px}}#work #product{width:1200px;margin:0 auto;overflow:hidden}@media screen and (max-width: 1024px){#work #product{width:auto}}#work #product h1{font-family:Noto Sans TC,sans-serif;font-size:24px;transition:.5s}#work #product h1:hover{color:#a54125}@media screen and (max-width: 1024px){#work #product h1{font-size:30px}}@media screen and (max-width: 767px){#work #product h1{font-size:25px;text-align:center}}#work #product #img-box{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:10px;margin-top:15px}@media screen and (max-width: 1024px){#work #product #img-box{grid-template-columns:repeat(2,1fr)}}@media screen and (max-width: 767px){#work #product #img-box{grid-template-columns:repeat(1,1fr)}}#work #product #img-box img{width:300px;height:250px;justify-self:center;box-shadow:2px 5px 5px #0000004d;border-radius:5px}#work #VI{width:1200px;margin:0 auto;overflow:hidden}@media screen and (max-width: 1024px){#work #VI{width:auto}}#work #VI h1{font-family:Noto Sans TC,sans-serif;font-size:24px;transition:.5s}#work #VI h1:hover{color:#a54125}@media screen and (max-width: 1024px){#work #VI h1{font-size:30px}}@media screen and (max-width: 767px){#work #VI h1{font-size:25px;text-align:center}}#work #VI #logo-title{width:800px;margin:0 auto;overflow:hidden}@media screen and (max-width: 1024px){#work #VI #logo-title{width:auto}}#work #VI #logo-title img{width:800px}@media screen and (max-width: 1024px){#work #VI #logo-title img{width:600px;height:400px;display:block;margin:0 auto}}@media screen and (max-width: 767px){#work #VI #logo-title img{width:300px;height:200px}}#work #VI #img-box{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:10px;margin-top:15px}@media screen and (max-width: 1024px){#work #VI #img-box{grid-template-columns:repeat(2,1fr)}}@media screen and (max-width: 767px){#work #VI #img-box{grid-template-columns:repeat(1,1fr)}}#work #VI #img-box img{width:300px;height:250px;justify-self:center;box-shadow:2px 5px 5px #0000004d;border-radius:5px}.official{width:1200px;display:grid;grid-template-columns:repeat(3,1fr);grid-gap:50px;margin:20px auto}@media screen and (max-width: 1024px){.official{width:auto;grid-template-columns:repeat(2,1fr)}}@media screen and (max-width: 767px){.official{grid-template-columns:repeat(1,1fr)}}.official .web-title{text-align:center}.official .web-img{overflow:hidden;position:relative}.official .web-img .github{position:absolute;right:10px;top:10px;width:40px;height:40px;z-index:30;background:#fff;border-radius:50%;box-shadow:0 0 10px #ccc}@media screen and (max-width: 1024px){.official .web-img .github{display:none}}.official .web-img img{width:100%;height:200px;object-fit:cover;transition:all .5s}.official .web-img img:hover{transform:scale(1.1)}@media screen and (max-width: 767px){.official .web-img img{width:90%}.official .web-img img:hover{transform:scale(1)}}.official .web-img .skill{position:absolute;bottom:5%;width:96%;left:2%;text-align:left;display:flex;flex-wrap:wrap;gap:10px}@media screen and (max-width: 767px){.official .web-img .skill{width:86%;left:7%}}.official .web-img .skill span{background:rgba(0,0,0,.7);padding:2px 10px;color:#fff;border-radius:10px;letter-spacing:1px;font-size:14px}.official .web-h3{font-family:Noto Sans TC,sans-serif;margin-bottom:10px;transition:.5s}.official .web-h3:hover{color:#a54125}#about-kyrie{width:900px;margin:20px auto;display:grid;grid-template-columns:250px 650px;box-shadow:2px 4px 3px #0000001a;border-radius:5px;grid-template-areas:"about-left about-right"}@media screen and (max-width: 1024px){#about-kyrie{grid-template-columns:150px 550px;width:auto}}@media screen and (max-width: 767px){#about-kyrie{display:block}}#about-kyrie #about-left{background-color:#3c3c3c;grid-area:about-left}@media screen and (max-width: 767px){#about-kyrie #about-left{display:none}}#about-kyrie #about-left #about-resume{width:250px;height:250px;object-fit:cover}@media screen and (max-width: 1024px){#about-kyrie #about-left #about-resume{width:150px;height:150px}}#about-kyrie #about-left .about-date{padding:20px;color:#fff}@media screen and (max-width: 1024px){#about-kyrie #about-left .about-date{padding:10px}}#about-kyrie #about-left .about-date h2{font-family:Noto Sans TC,sans-serif;font-size:24px;margin-bottom:10px}#about-kyrie #about-left .about-date p{font-family:Noto Sans TC,sans-serif;font-size:16px}@media screen and (max-width: 1024px){#about-kyrie #about-left .about-date p{font-size:14px}}#about-kyrie #about-right{margin-left:40px;grid-area:about-right}@media screen and (max-width: 1024px){#about-kyrie #about-right{margin:0}}@media screen and (max-width: 767px){#about-kyrie #about-right{width:auto}}#about-kyrie #about-right #about-head h1{font-family:Noto Sans TC,sans-serif;font-size:80px}@media screen and (max-width: 767px){#about-kyrie #about-right #about-head h1{text-align:center}}@media screen and (max-width: 767px){#about-kyrie #about-right #about-head h3{text-align:center}}#about-kyrie #about-right #contact-me{display:grid;grid-template-columns:repeat(2,1fr);margin:20px 0}@media screen and (max-width: 767px){#about-kyrie #about-right #contact-me{grid-gap:10px}}#about-kyrie .box1 img{filter:invert(26%) sepia(81%) saturate(800%) hue-rotate(336deg) brightness(101%) contrast(93%);margin-right:10px}@media screen and (max-width: 767px){#about-kyrie .box1 img{margin:0;display:inline-block}}#about-kyrie .box1 span{font-family:"Noto Serif TC",serif}#about-kyrie .box1 span a{text-decoration:none;font-family:"Noto Serif TC",serif}#about-kyrie .about-title{width:200px;font-family:Noto Sans TC,sans-serif;font-size:30px;background:rgb(165,65,37);display:inline-block;color:#fff;margin:10px 0 20px;padding:5px 0 5px 20px}@media screen and (max-width: 767px){#about-kyrie .about-title{width:100px;font-size:20px;padding-left:0}}#about-kyrie .about-hr{width:300px;height:3px;background-color:#a54125;border:none;margin-left:250px;transform:translateY(-50px)}@media screen and (max-width: 767px){#about-kyrie .about-hr{width:200px;transform:translateY(-40px);margin-left:150px}}#about-kyrie .about-content{display:grid;grid-template-columns:200px 400px}@media screen and (max-width: 767px){#about-kyrie .about-content{grid-template-columns:150px 400px}}#about-kyrie .about-content h2{font-family:Noto Sans TC,sans-serif;text-align:center}@media screen and (max-width: 767px){#about-kyrie .about-content h2{text-align-last:left}}#about-kyrie .about-box{margin-bottom:10px}@media screen and (max-width: 767px){#about-kyrie .about-box{width:200px;font-size:12px}}#about-kyrie .about-box h3{font-family:Noto Sans TC,sans-serif}#about-kyrie .about-box h4,#about-kyrie .about-box p{font-family:"Noto Serif TC",serif}@media screen and (max-width: 767px){#about-kyrie .about-box p{width:200px}}#about-kyrie #skills{margin-bottom:10px}#about-kyrie #skills .about-skill .skill-box h2{text-align:center;font-family:Noto Sans TC,sans-serif}#about-kyrie #skills .about-skill .skill-box hr{height:5px;background-color:#a54125;margin:0 auto}@media screen and (max-width: 767px){#about-kyrie #skills .about-skill .skill-box hr{width:100%}}#about-kyrie #skills .about-skill .skill-box ol{display:grid;grid-template-columns:repeat(1,1fr)}#about-kyrie #skills .about-skill .skill-box ol li{display:inline-block;font-family:"Noto Serif TC",serif}@media screen and (max-width: 767px){#about-kyrie #skills .about-skill .skill-box ol li{padding-left:10px}}#icon{height:200px;background:rgb(165,65,37);color:#fff;font-family:Noto Sans TC,sans-serif;padding:30px;text-align:center}#icon a{text-decoration:none;color:#fff}#icon h3{margin-bottom:20px;margin-top:40px}#gotop{position:fixed;right:30px;bottom:30px;cursor:pointer;background:#fff;border-radius:50%;box-shadow:0 0 5px #ccccccb3;padding:5px}@keyframes kyrieText{0%{transform:scale(1.5)}to{transform:scale(1)}}/*!
 * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
 * Copyright 2015 Daniel Cardoso <@DanielCardoso>
 * Licensed under MIT
 */.la-ball-scale-ripple,.la-ball-scale-ripple>div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.la-ball-scale-ripple{display:block;font-size:0;color:#fff}.la-ball-scale-ripple.la-dark{color:#333}.la-ball-scale-ripple>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.la-ball-scale-ripple{width:32px;height:32px}.la-ball-scale-ripple>div{width:32px;height:32px;background:transparent;border-width:2px;border-radius:100%;opacity:0;-webkit-animation:ball-scale-ripple 1s 0s infinite cubic-bezier(.21,.53,.56,.8);-moz-animation:ball-scale-ripple 1s 0s infinite cubic-bezier(.21,.53,.56,.8);-o-animation:ball-scale-ripple 1s 0s infinite cubic-bezier(.21,.53,.56,.8);animation:ball-scale-ripple 1s 0s infinite cubic-bezier(.21,.53,.56,.8)}.la-ball-scale-ripple.la-sm{width:16px;height:16px}.la-ball-scale-ripple.la-sm>div{width:16px;height:16px;border-width:1px}.la-ball-scale-ripple.la-2x{width:64px;height:64px}.la-ball-scale-ripple.la-2x>div{width:64px;height:64px;border-width:4px}.la-ball-scale-ripple.la-3x{width:96px;height:96px}.la-ball-scale-ripple.la-3x>div{width:96px;height:96px;border-width:6px}@-webkit-keyframes ball-scale-ripple{0%{opacity:1;-webkit-transform:scale(.1);transform:scale(.1)}70%{opacity:.65;-webkit-transform:scale(1);transform:scale(1)}to{opacity:0}}@-moz-keyframes ball-scale-ripple{0%{opacity:1;-moz-transform:scale(.1);transform:scale(.1)}70%{opacity:.65;-moz-transform:scale(1);transform:scale(1)}to{opacity:0}}@-o-keyframes ball-scale-ripple{0%{opacity:1;-o-transform:scale(.1);transform:scale(.1)}70%{opacity:.65;-o-transform:scale(1);transform:scale(1)}to{opacity:0}}@keyframes ball-scale-ripple{0%{opacity:1;-webkit-transform:scale(.1);-moz-transform:scale(.1);-o-transform:scale(.1);transform:scale(.1)}70%{opacity:.65;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}to{opacity:0}}