@charset "UTF-8";.kbtn-solid{background-color:initial;border:none;border-radius:33px;box-sizing:border-box;cursor:pointer;display:inline-block;padding:9px 17px;text-align:center;transition:background-color .1s ease-in-out}.kbtn-solid.kbtn--primary{background-color:#09cef6;color:#fff}.kbtn-solid.kbtn--primary:hover{background-color:#00b6e1}.kbtn-outlined{background-color:initial;border:2px solid #888;border-radius:33px;box-sizing:border-box;cursor:pointer;display:inline-block;padding:9px 17px;text-align:center;transition:border-color .1s ease-in-out,color .1s ease-in-out}.kbtn-outlined.kbtn--primary{border-color:#09cef6;color:#09cef6}.kbtn-outlined.kbtn--primary:hover{border-color:#00b6e1;color:#00b6e1}.kbtn-outlined.kbtn--inverted{border-color:hsla(0,0%,100%,.7);color:hsla(0,0%,100%,.7)}.kbtn-outlined.kbtn--inverted:hover{border-color:hsla(0,0%,100%,.8);color:hsla(0,0%,100%,.8)}.kkbox-button{background-color:#f2f2f2;border-radius:30px;color:#00b6e1;display:inline-block;font-size:18px;font-weight:500;line-height:25px;padding:16px 48px;text-decoration:none;transition:background-color .2s}.kkbox-button:hover{background-color:#fff}.kbtn--expand{display:block;width:100%}body{background-color:#111}a{color:#09cef6;text-decoration:underline}.hide-in-sm{display:none}@media (min-width:768px){.hide-in-sm{display:block}.hide-after-md{display:none}}h2{font-size:42px;font-weight:600;line-height:59px;margin-bottom:12px}@media (min-width:768px){h2{font-size:40px;line-height:56px}}.key-vision{height:calc(100vh - 22px);position:relative}@media (min-width:1024px){.key-vision{height:calc(100vh - 30px)}}.key-vision .bg-1,.key-vision .bg-2{animation-duration:5.2s;animation-iteration-count:infinite;background-position:50%;background-repeat:no-repeat;background-size:cover;height:100%;left:0;position:absolute;top:0;width:100%}@media (min-width:768px){.key-vision .bg-1,.key-vision .bg-2{background-position:0}}@media (min-width:1440px){.key-vision .bg-1,.key-vision .bg-2{background-position:50%}}.key-vision .bg-1{animation-name:background-change-for-1;background-image:url(https://a-www.kfs.io/static/images/home/bg-blue-a46417edc9.png)}@media (min-width:768px){.key-vision .bg-1{background-image:url(https://a-www.kfs.io/static/images/home/bg-blue-md-3864fde96d.png)}}@media (min-width:1024px){.key-vision .bg-1{background-image:url(https://a-www.kfs.io/static/images/home/bg-blue-lg-5ab3cd05d1.png)}}@media (min-width:1440px){.key-vision .bg-1{background-image:url(https://a-www.kfs.io/static/images/home/bg-blue-xl-406959cb48.png)}}.key-vision .bg-2{animation-name:background-change-for-2;background-image:url(https://a-www.kfs.io/static/images/home/bg-orange-f2881a4835.png)}@media (min-width:768px){.key-vision .bg-2{background-image:url(https://a-www.kfs.io/static/images/home/bg-orange-md-7b7767c41c.png)}}@media (min-width:1024px){.key-vision .bg-2{background-image:url(https://a-www.kfs.io/static/images/home/bg-orange-lg-045da10e1e.png);background-image:url(https://a-www.kfs.io/static/images/home/bg-orange-xl-f2b5110230.png)}}@keyframes background-change-for-1{0%{opacity:1}31%{opacity:1}50%{opacity:0}81%{opacity:0}to{opacity:1}}@keyframes background-change-for-2{0%{opacity:0}31%{opacity:0}50%{opacity:1}81%{opacity:1}to{opacity:0}}.key-vision .key-slogan{left:0;max-width:1144px;overflow:hidden;padding-left:24px;position:absolute;top:50%;transform:translateY(-50%);transition:opacity .3s ease;width:100%}@media (min-width:768px){.key-vision .key-slogan{padding-left:60px}}@media (min-width:1024px){.key-vision .key-slogan{left:50%;transform:translate(-50%,-50%)}}.key-vision .key-slogan h1{-webkit-locale:"en";color:#fff;font-family:Work Sans,Franklin Gothic,Helvetica Neue,Arial,PingFang TC,Heiti TC,微軟正黑體,sans-serif;font-size:45px;font-weight:600;line-height:1.1719;margin-bottom:20px;white-space:nowrap}@media (min-width:768px){.key-vision .key-slogan h1{font-size:90px;margin-bottom:16px}}@media (min-width:1024px){.key-vision .key-slogan h1{font-size:120px}}.key-vision .key-slogan .marquee{height:22px;margin-bottom:20px;overflow:hidden}@media (min-width:768px){.key-vision .key-slogan .marquee{height:38px;margin-bottom:32px}}.key-vision .key-slogan .marquee .marquee-container{animation-duration:5.2s;animation-iteration-count:infinite;animation-name:marquee}.key-vision .key-slogan .marquee p{color:#fff;font-size:16px;letter-spacing:.1em;line-height:22px;white-space:nowrap;width:100%}@media (min-width:768px){.key-vision .key-slogan .marquee p{font-size:28px;letter-spacing:.12em;line-height:38px}}@keyframes marquee{0%{transform:translateY(0)}31%{transform:translateY(0)}50%{transform:translateY(-33.3333%)}81%{transform:translateY(-33.3333%)}to{transform:translateY(-66.6667%)}}.key-vision.no-animation .bg-1,.key-vision.no-animation .bg-2,.key-vision.no-animation .key-slogan .marquee .marquee-container{animation-delay:0s;animation-direction:normal;animation-duration:0s;animation-fill-mode:none;animation-iteration-count:1;animation-name:none;animation-play-state:running;animation-timing-function:ease}.key-vision.no-animation .bg-1{opacity:1}.key-vision.no-animation .bg-2{background:none;opacity:0}.key-vision .scroll-nav{bottom:0;color:#fff;font-size:11px;height:82px;left:50%;opacity:1;position:absolute;transform:translateX(-50%);width:30px}.key-vision .scroll-nav:before{content:"Scroll";line-height:14px}.key-vision .scroll-nav:after{animation:line-move 1.8s ease-in-out infinite;background-color:#fff;bottom:64px;content:"";display:inline-block;height:40px;left:14px;position:absolute;width:1px}@keyframes line-move{0%{bottom:64px;height:0}6%{bottom:64px;height:0}61%{bottom:24px;height:40px}72%{bottom:24px;height:40px}to{bottom:24px;height:0}}.key-vision .vertical-slogan{color:#fff;display:none;font-size:14px;font-weight:500;line-height:1;position:absolute;right:0;top:50%;transform:rotate(90deg) translateY(-50%)}@media (min-width:1024px){.key-vision .vertical-slogan{display:inline}}.key-slogan-again{color:#fff;display:none;margin-bottom:40px;opacity:1;padding-top:83px;text-align:center}@media (min-width:768px){.key-slogan-again{display:block}}.key-slogan-again h1{font-family:Work Sans,Franklin Gothic,Helvetica Neue,Arial,PingFang TC,Heiti TC,微軟正黑體,sans-serif;font-size:55px;font-weight:600;line-height:1.0375;margin-bottom:12px;white-space:nowrap}@media (min-width:1024px){.key-slogan-again h1{font-size:80px}}.key-slogan-again p{font-size:19px;line-height:26px;margin-bottom:54px}section.functions{margin-bottom:201px;padding-top:160px;text-align:center}@media (min-width:768px){section.functions{margin-bottom:240px}}section.functions h2{color:#fff;font-size:32px;font-weight:500;line-height:45px;margin-bottom:8px}@media (min-width:768px){section.functions h2{font-size:60px;line-height:84px}}@media (min-width:1024px){section.functions h2{font-size:54px;line-height:76px}}section.functions h3{color:#fff;font-size:24px;font-weight:600;line-height:34px;margin-bottom:8px}@media (min-width:768px){section.functions h3{font-size:28px;line-height:39px}}section.functions p{color:#fff;font-size:16px;line-height:22px;margin-bottom:12px}section.functions p a{color:#cdcdcd}section.functions .main-function{margin-left:auto;margin-right:auto;max-width:1096px;overflow:hidden;position:relative}@media (min-width:768px){section.functions .main-function{align-items:center;background-color:#232323;border-radius:17px;display:flex;flex-direction:row-reverse;width:calc(100vw - 68px)}}@media (min-width:1024px){section.functions .main-function{padding-left:37px;padding-right:37px}}section.functions .main-function .radial-gradient-bg{background:radial-gradient(50% 50% at 50% 50%,#09cef6 0,hsla(43,70%,66%,0) 100%);bottom:0;left:50%;opacity:.3;padding-top:156%;position:absolute;transform:translate(-50%,24%);width:146%;z-index:-1}@media (min-width:768px){section.functions .main-function .radial-gradient-bg{bottom:42px;padding-top:121%;transform:translate(-50%,50%);width:125%;z-index:0}}@media (min-width:1024px){section.functions .main-function .radial-gradient-bg{bottom:-9px;padding-top:91%;width:94%}}section.functions .main-function.hifi .radial-gradient-bg,section.functions .main-function.lossless .radial-gradient-bg{background:radial-gradient(50% 50% at 50% 50%,#e5c26a 0,hsla(43,70%,66%,0) 100%)}section.functions .main-function.podcast .radial-gradient-bg{background:radial-gradient(50% 50% at 50% 50%,#f56120 0,hsla(43,70%,66%,0) 100%)}section.functions .main-function.achievement .radial-gradient-bg{background:radial-gradient(50% 50% at 50% 50%,#09cef6 0,rgba(9,206,246,0) 100%);opacity:.3;padding-top:200%;transform:translate(-50%,50%);width:200%}@media (min-width:768px){section.functions .main-function.achievement .radial-gradient-bg{padding-top:173%;width:173%}}@media (min-width:1024px){section.functions .main-function.achievement .radial-gradient-bg{padding-top:100%;width:100%}}section.functions .main-function .text{padding-left:24px;padding-right:24px}@media (min-width:768px){section.functions .main-function .text{margin-bottom:0;padding-left:0;padding-right:10px;width:50%;z-index:1}}@media (min-width:1024px){section.functions .main-function .text{padding-right:0}}section.functions .main-function .text a{align-items:center;display:flex;justify-content:center;text-decoration:none}section.functions .main-function .text a>span:hover{text-decoration:underline}section.functions .main-function .text a:after{border:solid #a0a0a0;border-width:0 1px 1px 0;content:"";display:inline-block;margin-left:4px;padding:4px;transform:rotate(-45deg)}section.functions .main-function.hifi .text:before{background-image:url(https://pkg.kfs.io/kk-web/img/icon/hires-30-18.svg),url(https://pkg.kfs.io/kk-web/img/icon/hifi-30-18.svg);background-position-x:0,100%;background-position-y:center,center;background-repeat:no-repeat,no-repeat;background-size:contain,contain;content:"";display:inline-block;height:18px;margin-bottom:18px;width:72px}section.functions .main-function .vision{margin-top:21px;position:relative;z-index:-1}section.functions .main-function .vision img{display:block;height:auto;margin:0 auto;width:100%}@media (min-width:768px){section.functions .main-function .vision{margin-top:0;padding-top:106px;width:50%;z-index:1}}@media (min-width:1024px){section.functions .main-function .vision{padding-top:40px}section.functions .main-function .vision img{height:auto;width:82%}}section.functions .main-function.achievement .vision{margin-top:74px;padding:0 47px}@media (min-width:768px){section.functions .main-function.achievement .text{padding:0 28px}section.functions .main-function.achievement .text h2{font-size:51px}section.functions .main-function.achievement .vision{margin-top:0;padding:82px 0}}@media (min-width:1024px){section.functions .main-function.achievement .text{padding:0 0 0 24px}section.functions .main-function.achievement .text h2{font-size:54px}section.functions .main-function.achievement .vision{padding:34px 0 0}section.functions .main-function.achievement .vision img{width:94%}}section.functions .other-functions{display:flex;overflow-x:auto;padding-left:37px;padding-top:40px;position:relative;-webkit-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none;width:100%}section.functions .other-functions::-webkit-scrollbar{display:none}section.functions .other-functions p{font-size:14px;line-height:20px}@media (min-width:768px){section.functions .other-functions p{font-size:16px;line-height:22px}section.functions .other-functions{padding-left:max(34px,50vw - 548px)}}@media (min-width:1024px){section.functions .other-functions{margin-right:-62px;padding-left:0}}section.functions .other-functions .card{background-color:#232323;border-radius:12px;display:flex;flex-direction:column;height:500px;justify-content:space-between;margin-right:23px;scroll-snap-align:center;transition:background-color .2s ease-in-out}@media (min-width:768px){section.functions .other-functions .card{height:615px}}@media (min-width:1024px){section.functions .other-functions .card{background-color:#1e1e1e}section.functions .other-functions .card:hover{background-color:#232323}}section.functions .other-functions .card .text{padding-left:24px;padding-right:24px;padding-top:40px;width:calc(100vw - 75px);z-index:1}@media (min-width:768px){section.functions .other-functions .card .text{padding-top:48px;width:450px}}section.functions .other-functions .card .text h3{font-weight:500}section.functions .other-functions .card .text a{align-items:center;display:flex;justify-content:center;text-decoration:none}section.functions .other-functions .card .text a>span:hover{text-decoration:underline}section.functions .other-functions .card .text a:after{border:solid #a0a0a0;border-width:0 1px 1px 0;content:"";display:inline-block;margin-left:4px;padding:4px;transform:rotate(-45deg)}section.functions .other-functions .card .vision{display:flex;justify-content:center;position:relative}section.functions .other-functions .card .vision img{bottom:0;display:block;height:auto;max-width:391px;opacity:.75;position:absolute;transition:opacity .2s ease-in-out;width:100%}@media (min-width:768px){section.functions .other-functions .card .vision img{left:50%;max-width:100%;transform:translateX(-50%)}}@media (min-width:1024px){section.functions .other-functions .card:hover .vision img{opacity:1}}section.functions .other-functions .arrow{align-items:center;cursor:pointer;display:none;padding:0 15px;position:-webkit-sticky;position:sticky;transition:transform .3s;z-index:99}@media (min-width:1024px){section.functions .other-functions .arrow{display:flex}}section.functions .other-functions .arrow .arror-icon{align-items:center;border:2px solid #fff;border-radius:32px;display:flex;-webkit-filter:drop-shadow(0 1px 4px rgba(0,0,0,.35));filter:drop-shadow(0 1px 4px rgba(0,0,0,.35));height:32px;justify-content:center;width:32px}section.functions .other-functions .arrow .arror-icon:after{border-bottom:2px solid #fff;border-left:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);content:"";display:block;height:8px;width:8px}section.functions .other-functions .arrow.left{left:0;margin-right:max(-28px,50vw - 610px);transform:translateX(-100%)}section.functions .other-functions .arrow.left .arror-icon:after{transform:rotate(45deg) translate(1px,-1px)}section.functions .other-functions .arrow.right{margin-left:max(-55px,50vw - 633px);right:0;transform:translateX(100%)}section.functions .other-functions .arrow.right .arror-icon:after{transform:rotate(225deg) translate(1px,-1px)}section.functions .other-functions .arrow.hide{opacity:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}@media (min-width:1024px){section.functions .other-functions:hover .arrow.left,section.functions .other-functions:hover .arrow.right{transform:translateX(0)}}section.functions .other-functions:after{content:"";display:block;min-width:14px}@media (min-width:768px){section.functions .other-functions:after{display:none}}section.functions .other-functions-index{display:flex;justify-content:center;padding-top:26px}@media (min-width:768px){section.functions .other-functions-index{display:none}}section.functions .other-functions-index .circle{background-color:#4b4b4b;border-radius:8px;height:8px;margin-left:2px;margin-right:2px;width:8px}section.functions .other-functions-index .circle.active{background-color:#7d7d7d}.home-container{color:#fff;margin-left:auto;margin-right:auto;max-width:1030px;padding-bottom:120px;padding-left:16px;padding-right:16px;text-align:center}@media (min-width:768px){.home-container{padding-left:41px;padding-right:41px}}@media (min-width:1024px){.home-container{padding-left:35px;padding-right:35px}}section.enjoy-music{margin-bottom:240px}@media (min-width:1024px){section.enjoy-music{margin-bottom:237px}}section.enjoy-music.fade{opacity:1;transform:translateY(0);transition:transform .6s ease-in-out,opacity .4s ease-in-out}section.enjoy-music.fade-in{opacity:0;transform:translateY(50px);transition:transform .2s ease-in,opacity .2s ease-in}section.enjoy-music .kkbox-app{display:inline-block;height:auto;margin-bottom:40px;width:80px}section.enjoy-music h2{margin-bottom:40px}section.subscription{margin-bottom:112px}@media (min-width:1024px){section.subscription{margin-bottom:240px}}@media (min-width:1440px){section.subscription{margin-bottom:214px}}section.subscription p{font-size:16px;font-weight:400;line-height:1.6}@media (min-width:768px){section.subscription p{margin-bottom:12px}}section.subscription a.main-link{color:#a0a0a0;display:inline-block;font-size:16px;line-height:26px;text-decoration:none}@media (min-width:768px){section.subscription a.main-link{margin-bottom:29px}}@media (min-width:1024px){section.subscription a.main-link{margin-bottom:67px}}section.subscription a.main-link span{text-decoration:underline}@media (min-width:768px){section.subscription a.main-link span{text-decoration:none}section.subscription a.main-link span:hover{text-decoration:underline}}section.subscription a.main-link:after{border:solid #a0a0a0;border-width:0 1px 1px 0;content:"";display:inline-block;margin-left:4px;padding:4px;transform:rotate(-45deg)}section.subscription .plan-list .button{border:1px solid #ebebeb;border-radius:16px;font-size:12px;line-height:16px;margin-right:12px;margin-top:12px;padding:7px 20px}section.subscription .plan-list .button[aria-selected=true]{background:#4b4b4b;border-color:#fff}section.subscription .plan-list h3{font-size:24px;font-weight:600;line-height:34px;margin-bottom:12px}section.subscription .plan-list ul{color:#f2f2f2;font-size:16px;line-height:22px;margin-bottom:43px}section.subscription .plan-list ul li{margin-bottom:10px;padding-left:36px;position:relative}section.subscription .plan-list ul li:before{content:url(https://a-www.kfs.io/static/images/home/check-f2ad8c679e.svg);display:inline-block;left:0;padding:0 6px;position:absolute;top:0}section.subscription .plan-list .project{margin-bottom:12px;max-height:75px;overflow:hidden;text-align:left;transition:max-height .3s ease-in-out}@media (min-width:1024px){section.subscription .plan-list .project{margin-bottom:24px}}section.subscription .plan-list .project h3{align-items:baseline;color:#b4b4b4;cursor:pointer;display:flex;font-size:28px;line-height:39px;margin-bottom:0;transition:font-size .3s ease-in-out,line-height .3s ease-in-out}section.subscription .plan-list .project h3:before{border:solid #b4b4b4;border-width:0 2px 2px 0;content:"";display:inline-block;margin-right:17px;padding:6px;transform:rotate(-45deg);transition:padding .3s ease-in-out}section.subscription .plan-list .project ul{display:none;margin-bottom:0;padding:24px 0 12px 8px}section.subscription .plan-list .project ul li{margin-bottom:18px}@media (min-width:1024px){section.subscription .plan-list .project ul{padding-bottom:2px}}section.subscription .plan-list .project[aria-selected=true]{max-height:405px}section.subscription .plan-list .project[aria-selected=true] h3{color:#fff;font-size:36px;line-height:50px}section.subscription .plan-list .project[aria-selected=true] h3:before{border-color:#fff;padding:8px}section.subscription .plan-list .project[aria-selected=true] ul{display:block}section.subscription .plan-list .content{padding-top:29px;text-align:left}@media (min-width:768px){section.subscription .plan-list .content{padding-top:0}}section.subscription .plan-list .content a.card{background:#232323;border-radius:16px;color:#fff;display:block;margin-bottom:24px;overflow:hidden;text-decoration:none;transform:translateX(0);transition:transform .5s}section.subscription .plan-list .content a.card:hover{transform:translateX(8px)}section.subscription .plan-list .content a.card .row-1{align-items:center;display:flex;justify-content:space-between;min-height:56px;position:relative}section.subscription .plan-list .content a.card .row-1 .title{background-color:#7c00ff;border-bottom-right-radius:16px;border-top-left-radius:16px;font-size:20px;font-weight:600;line-height:28px;padding:16px 32px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}section.subscription .plan-list .content a.card .row-1 .tag{background-color:#ffe8df;border-radius:16px;color:#eb4d06;font-size:12px;height:25px;line-height:25px;margin:12px;padding:0 12px;text-align:center;white-space:nowrap}section.subscription .plan-list .content a.card .row-2{align-items:center;display:flex;justify-content:space-between;padding:12px 16px 20px 32px;width:100%}section.subscription .plan-list .content a.card .row-2 .slogan{align-items:center;display:flex;font-size:14px;line-height:20px;padding-right:16px}section.subscription .plan-list .content a.card .row-2 .price{font-size:20px;font-weight:600;line-height:28px;white-space:nowrap}section.subscription .plan-list .content a.card .row-2 .price small{font-size:12px;line-height:17px}section.subscription .plan-list .content.x-320k .card .row-1 .title{background-color:#09cef6}section.subscription .plan-list .content.student .card .row-1 .title{background-color:gold;color:#232323}section.subscription .plan-list .content.offers .card .row-1 .title{background-color:#fa466e}section.subscription .plan-list .content.family .card .row-1 .title{background-color:#f46223}section.faq{margin-bottom:52px}section.faq p{font-size:14px;font-weight:400;line-height:20px;margin-bottom:80px}@media (min-width:1024px){section.faq p{font-size:16px;line-height:22px;margin-bottom:86px}}section.faq ul>li{font-size:16px;font-weight:400;line-height:22.4px;text-align:left}section.faq ul>li .question{align-items:center;background-color:#232323;border-radius:8px;color:#ebebeb;column-gap:32px;cursor:pointer;display:grid;grid-template-columns:auto 32px;margin-bottom:0;min-height:50px;padding:9px 16px 9px 24px;transition:margin-bottom .3s ease-in-out}section.faq ul>li .question:after{background-image:url(https://a-www.kfs.io/static/images/home/faq-arrow-e4a23de3dd.svg);background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";display:block;height:32px}section.faq ul>li .question.open{background-color:#4b4b4b;color:#fff;margin-bottom:24px}section.faq ul>li .question.open:after{transform:rotate(180deg)}section.faq ul>li .solution{box-sizing:border-box;color:#b4b4b4;margin-bottom:12px;max-height:0;overflow:hidden;padding:0 24px;transition:max-height .3s ease-in-out,margin-bottom .3s ease-in-out}section.faq ul>li .solution ul{list-style:"-  ";padding-left:1em}section.faq ul>li .solution.open{margin-bottom:24px}.back-to-top{font-size:16px;font-weight:600;line-height:22px;text-decoration:none}.back-to-top:hover{text-decoration:underline}