@import"https://fonts.googleapis.com/css2?family=Rubik:wght@700&text=NTHK$,12346890&display=swap";html{position:relative;min-height:100%}body{font-family:"Noto Sans TC","Helvetica Neue",Arial,"PingFang TC","Heiti TC","微軟正黑體",sans-serif;line-height:1.43;min-width:320px;margin:0;color:#000;background-color:#fff}*{-webkit-box-sizing:border-box;box-sizing:border-box}.container{width:100%;margin-right:auto;margin-left:auto;padding:40px 25px}@media(min-width: 768px){.container{padding-top:56px;padding-bottom:56px}}@media(min-width: 1470px){.container{width:1440px}}.section-trial{scroll-margin-top:20px;position:relative;z-index:0;background-color:#000;text-align:center}.section-trial .title{margin-bottom:40px;font-weight:700;font-size:48px;color:#fff}.section-trial .btn-container{margin-bottom:48px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.section-trial .btn-container .mode-btn{margin:0 8px;padding:12px 20px;font-weight:700;border-radius:40px;font-size:14px;border:1px solid #fff;color:#fff;background-color:#000;cursor:pointer}.section-trial .btn-container .mode-btn:hover,.section-trial .btn-container .mode-btn.active{border:1px solid #ec9849;color:#000;background-color:#ec9849}.section-trial .cover{margin-bottom:20px;width:244px;height:244px}.section-trial .song,.section-trial .singer{font-family:Roboto,sans-serif;font-size:20px;color:#fff}.section-trial .singer{margin-bottom:14px}.section-trial .mode-block{display:none}.section-trial .mode-block.active{display:block}.section-trial .seekbar-container{margin:0 auto;max-width:520px;min-width:300px;width:60%;height:76px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:#262626;border-radius:40px}.section-trial .seekbar-container .js-play-song{width:50px;height:50px;cursor:pointer}.section-trial .seekbar-container .js-play-song svg{width:50px;height:50px}.section-trial .seekbar-container .js-play-song .pause-icon{display:none}.section-trial .seekbar-container .js-play-song.pause .play-icon{display:none}.section-trial .seekbar-container .js-play-song.pause .pause-icon{display:block}.section-trial .seekbar-container .js-play-song:hover svg path{fill:#ec9849}.section-trial .text{margin-top:36px;color:#fff;font-size:14px;font-weight:500}.section-trial .wave-canvas{z-index:-1;position:absolute;bottom:0;left:0;width:100%;height:644px}@media(max-width: 767px){.section-trial .title{font-size:24px}.section-trial .btn-container{margin-bottom:32px}.section-trial .btn-container .mode-btn{font-size:16px}.section-trial .cover{width:200px;height:200px}.section-trial .song,.section-trial .singer{font-size:16px}.section-trial .mode-block{padding-bottom:40px}.section-trial .seekbar-container{height:50px}.section-trial .seekbar-container .js-play-song{width:33px;height:33px}.section-trial .seekbar-container .js-play-song svg{width:33px;height:33px}.section-trial .wave-canvas{height:544px}}.section-trial input[type=range]{-webkit-appearance:none;margin-left:20px;width:60%;height:3px;background:#fff;border-radius:10px;background-image:-webkit-gradient(linear, left top, left bottom, from(#EC9849), to(#EC9849));background-image:linear-gradient(#EC9849, #EC9849);background-size:0% 100%;background-repeat:no-repeat}.section-trial input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:17px;width:17px;border-radius:50%;background:#fff;cursor:pointer}.section-trial input[type=range]::-webkit-slider-thumb:hover{background:#fff;height:20px;width:20px}.section-trial input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;-webkit-box-shadow:none;box-shadow:none;border:none;background:rgba(0,0,0,0)}.section-subscribe{scroll-margin-top:20px;text-align:center}.section-subscribe .title{margin-bottom:20px;font-size:48px;font-weight:700}.section-subscribe .title br{display:none}.section-subscribe .subtitle{font-size:24px}.section-subscribe .plans-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:44px}.section-subscribe .plans-container .plan-wrapper{margin:0 18px 55px;padding:8px;width:100%;max-width:400px;border-radius:20px}.section-subscribe .plans-container .plan-wrapper.original{background:#000}.section-subscribe .plans-container .plan-wrapper.discount{background:linear-gradient(151.52deg, #FFD493 2.68%, #FFC05A 20.08%, #EFE7CB 56.69%, #FBD597 87.49%, #F0A636 100%)}.section-subscribe .plans-container .plan{padding:48px 24px 36px;background-color:#000;border-radius:20px;color:#fff;font-size:24px}.section-subscribe .plans-container .plan .name{margin-bottom:10px;font-weight:700}.section-subscribe .plans-container .plan .price-container{display:inline-block;margin-bottom:26px;padding-bottom:6px;border-bottom:1px solid #fff}.section-subscribe .plans-container .plan .price-container .unit,.section-subscribe .plans-container .plan .price-container .price{font-family:"Rubik",sans-serif;font-weight:700;color:#f8cd85;letter-spacing:1px}.section-subscribe .plans-container .plan .price-container .unit{font-size:35px}.section-subscribe .plans-container .plan .price-container .price{font-size:70px}.section-subscribe .plans-container .plan .price-container .average-price{font-size:16px;color:#787878}.section-subscribe .plans-container .plan .description{margin-bottom:60px;font-size:20px}.section-subscribe .plans-container .plan .action-btn{font-size:20px;width:80%}.section-subscribe .link-container{font-size:18px}.section-subscribe .link{color:#ec9849}.section-subscribe .link:hover{color:#a95608}@media(max-width: 1023px){.section-subscribe .plans-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.section-subscribe .plans-container .plan-wrapper{margin:0 0 60px}}@media(max-width: 767px){.section-subscribe .title{font-size:24px}.section-subscribe .title br{display:block}.section-subscribe .subtitle{font-size:16px;color:#777}.section-subscribe .plans-container{margin-top:36px}}.section-demo{text-align:center}.section-demo .subtitle{font-size:24px}.section-demo .title{margin-bottom:16px;font-size:48px;font-weight:900}.section-demo .description{margin:0 auto 70px;font-weight:500;line-height:34px;width:80%;text-align:left;font-size:18px}.section-demo .description .icon-wrapper{margin:16px auto 0;width:325px;text-align:left}.section-demo .description .step-wrapper{margin-top:16px}.section-demo .description .step-wrapper .step{font-weight:900;font-size:20px;line-height:27px}.section-demo .description .mobile-demo-list{margin:0;padding:0 24px;list-style:none}.section-demo .description .mobile-demo-list li::before{content:"";border-color:rgba(0,0,0,0) #111;border-style:solid;border-width:8px 0 8px 14px;display:block;height:0;width:0;left:-24px;top:23px;position:relative}.section-demo .icon{width:auto;height:18px}.section-demo .demo-video{width:100%}.section-demo .demo-video.pc{max-width:1000px}.section-demo .demo-video.mobile{max-width:370px}@media(max-width: 767px){.section-demo .subtitle{margin-bottom:6px;font-size:16px}.section-demo .title{font-size:24px;font-weight:700}.section-demo .description{margin:0 auto 20px;width:100%;line-height:28px;font-size:16px}.section-demo .description .step-wrapper .step{font-size:16px;line-height:22px}}.section-introduction{padding-bottom:50px;text-align:center}.section-introduction .subtitle{font-size:24px}.section-introduction .title{font-size:48px;font-weight:900}.section-introduction .card-container{display:-webkit-box;display:-ms-flexbox;display:flex}.section-introduction .card-wrapper{padding:0 24px}.section-introduction .card{overflow:hidden;position:relative;width:460px;height:600px;background-color:#000;border-radius:20px;color:#fff}.section-introduction .card .card-content{position:absolute;left:50%;bottom:50px;-webkit-transform:translate(-50%);-ms-transform:translate(-50%);transform:translate(-50%);width:90%}.section-introduction .card .card-content .card-header{margin-bottom:8px;font-size:20px;font-weight:500}.section-introduction .card .card-content .card-title{font-family:Roboto,sans-serif;margin-bottom:14px;font-size:40px;font-weight:900;letter-spacing:.04em}.section-introduction .card .card-content .card-subtitle{margin-bottom:32px;font-size:20px;font-weight:500}.section-introduction .card .card-content .card-action{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.section-introduction .card .card-content .card-action .action-btn{margin:0 15px;width:80%}.section-introduction .card.auralic{background-color:#efefef}.section-introduction .card.auralic .image{position:absolute;top:0;right:0px;width:320px}.section-introduction .card.auralic .card-header,.section-introduction .card.auralic .card-title,.section-introduction .card.auralic .card-subtitle{color:#000}.section-introduction .card.roon .image{width:100%;mask-image:-webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0)), color-stop(20%, #000000));mask-image:linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #000000 20%);-webkit-mask-image:-webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0)), color-stop(20%, #000000));-webkit-mask-image:linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #000000 20%)}.section-introduction .card.roon .card-title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:57px}.section-introduction .card.roon .card-title .kkbox-logo{margin-right:28px;padding-right:28px;border-right:2px solid #fff;height:37px}.section-introduction .card.roon .card-title .roon-logo{height:37px}.section-introduction .card.challenge .main-image{margin-top:28px;width:300px}.section-introduction .card.challenge .line-image{position:absolute;left:0;bottom:0;width:100%}@media(max-width: 767px){.section-introduction .subtitle{margin-bottom:6px;font-size:16px}.section-introduction .title{font-size:24px;font-weight:700}.section-introduction .card-wrapper{padding:0 6px}.section-introduction .card{width:330px;height:430px}.section-introduction .card .card-content{bottom:24px;width:90%}.section-introduction .card .card-content .card-header{font-size:14px}.section-introduction .card .card-content .card-title{margin-bottom:6px;font-size:24px}.section-introduction .card .card-content .card-subtitle{margin-bottom:16px;font-size:16px}.section-introduction .card .card-content .card-action .action-btn{margin:0 7px;padding:10px 0}.section-introduction .card.auralic .image{width:228px}.section-introduction .card.roon .card-title{height:34px}.section-introduction .card.roon .card-title .kkbox-logo{margin-right:20px;padding-right:20px;height:22px}.section-introduction .card.roon .card-title .roon-logo{height:22px}.section-introduction .card.challenge .main-image{margin-top:16px;width:230px}}.section-playlist{text-align:center;background-color:#000}.section-playlist .title{font-size:48px;font-weight:700;color:#fff}.section-playlist .playlist-tab-container{margin-bottom:40px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#fff;font-size:20px;border-bottom:1px solid #ec9849}.section-playlist .playlist-tab-container .playlist-tab{padding:0 50px 4px;cursor:pointer}.section-playlist .playlist-tab-container .playlist-tab:hover{font-weight:700;color:#ec9849}.section-playlist .playlist-tab-container .playlist-tab.active{font-weight:700;color:#ec9849;border-bottom:2px solid #ec9849}.section-playlist .playlist-container{display:none}.section-playlist .playlist-container.active{display:block}.section-playlist .playlist-list{display:-webkit-box;display:-ms-flexbox;display:flex;max-width:1400px}.section-playlist .playlist-list .playlist-wrapper{padding:0 25px}.section-playlist .playlist-list .playlist-wrapper .playlist{position:relative}.section-playlist .playlist-list .playlist-wrapper .playlist .cover{width:230px;height:230px;background-color:#f9f9f9}.section-playlist .playlist-list .playlist-wrapper .playlist .trial-block{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(248,205,133,.77);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.section-playlist .playlist-list .playlist-wrapper .playlist .trial-block .play-icon{margin-bottom:10px;width:57px;height:57px;cursor:pointer}.section-playlist .playlist-list .playlist-wrapper .playlist .trial-block .play-icon svg path{fill:#000}.section-playlist .playlist-list .playlist-wrapper .playlist:hover .trial-block{opacity:1}.section-playlist .playlist-list .playlist-wrapper .name{margin-top:10px;font-size:14px;font-weight:500;color:#fff;width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.section-playlist .playlist-list .playlist-wrapper .link a{display:inline-block;margin-top:20px;padding:8px 20px;background-color:#242424;border-radius:20px;font-size:14px;font-weight:700;color:#fff;text-decoration:none}.section-playlist .playlist-list .playlist-wrapper .link a:hover{color:#ec9849}.section-playlist .btn{position:relative;margin:60px auto 12px}.section-playlist .btn:hover{border:1px solid rgba(0,0,0,0);background:linear-gradient(90.96deg, #F8CD85 -3.99%, #D0552B 96.42%);background-clip:text;color:rgba(0,0,0,0);-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0)}.section-playlist .btn:hover::before{content:"";position:absolute;inset:0;border-radius:40px;padding:1px;background:linear-gradient(90.96deg, #F8CD85 -3.99%, #D0552B 96.42%);-webkit-mask:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) content-box,-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;-webkit-mask-composite:exclude}.section-playlist .text{display:inline-block;margin-bottom:50px;color:#ec9849;text-decoration:underline;cursor:pointer}.section-playlist .text:hover{color:#a95608}@media(max-width: 767px){.section-playlist .title{font-size:24px}.section-playlist .playlist-tab-container{margin-bottom:50px;font-size:15px}.section-playlist .playlist-tab-container .playlist-tab{padding:0 12px 4px}}.section-faq .subtitle{margin-bottom:6px;font-family:Roboto,sans-serif;font-size:24px;font-weight:700;text-align:center;letter-spacing:.18em}.section-faq .title{font-size:48px;font-weight:700;text-align:center}.section-faq .faq-list{margin-top:54px}.section-faq .faq{margin:0 auto;padding:40px 0;max-width:1000px;line-height:1.5;font-weight:500;border-bottom:1px solid #9e9e9e}.section-faq .faq .question-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}.section-faq .faq .question-container .question{width:85%;font-size:24px}.section-faq .faq .question-container .arrow{width:18px;height:auto;-webkit-transition:-webkit-transform .2s linear;transition:-webkit-transform .2s linear;transition:transform .2s linear;transition:transform .2s linear, -webkit-transform .2s linear}.section-faq .faq .answer{overflow:hidden;max-height:0;-webkit-transition:max-height .4s cubic-bezier(0, 1, 0, 1),margin .4s;transition:max-height .4s cubic-bezier(0, 1, 0, 1),margin .4s;color:#9e9e9e}.section-faq .faq .answer .link{text-decoration:underline;color:#ec9849}.section-faq .faq .answer .link:hover{color:#a95608}.section-faq .faq .answer .download{margin-left:4px;display:inline-block;width:18px;height:17px;background-image:url("../images/download_orange.svg");background-repeat:no-repeat;background-size:100%}.section-faq .faq .answer .download:hover{background-image:url("../images/download_active.svg")}.section-faq .faq .answer img{width:39px}.section-faq .faq.active .question-container .arrow{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}.section-faq .faq.active .answer{margin-top:20px;max-height:390px}.section-faq .action-container{margin-top:80px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.section-faq .action-container .btn{margin:0 50px;padding:18px 0;width:152px}@media(max-width: 767px){.section-faq .title{font-size:32px}.section-faq .faq-list{margin-top:28px}.section-faq .faq{padding:20px 0;font-weight:400}.section-faq .faq .question-container .question{font-size:20px}.section-faq .faq .question-container .arrow{width:15px}.section-faq .faq.active .answer{max-height:510px}.section-faq .action-container{margin-top:70px}.section-faq .action-container .btn{margin:0 8px;width:130px}}.gradient-btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:16px 0;margin:0 auto;max-width:320px;font-weight:700;border-radius:40px;text-decoration:none;cursor:pointer;color:#000;background:linear-gradient(92.05deg, #F8CD85 6.69%, #D0552B 91.99%)}.gradient-btn:hover{position:relative;background-clip:text;color:rgba(0,0,0,0);-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0)}.gradient-btn:hover::before{content:"";position:absolute;inset:0;border-radius:40px;padding:1px;background:linear-gradient(90.96deg, #F8CD85 -3.99%, #D0552B 96.42%);-webkit-mask:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) content-box,-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.plain-black-btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:16px 0;margin:0 auto;max-width:320px;font-weight:700;border-radius:40px;text-decoration:none;cursor:pointer;border:1px solid #fff;color:#fff;background-color:#000}.plain-black-btn:hover{color:#ec9849}.plain-white-btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:16px 0;margin:0 auto;max-width:320px;font-weight:700;border-radius:40px;text-decoration:none;cursor:pointer;color:#000;background-color:#fff}.plain-white-btn:hover{color:#ec9849}.action{text-align:center}.alert{position:fixed;top:10px;width:100%;text-align:center;color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc;padding:15px;margin:0 auto;border:1px solid rgba(0,0,0,0);border-radius:4px;opacity:1;-webkit-transition:opacity 6s ease-in;transition:opacity 6s ease-in;z-index:100}.alert.alert--loaded{opacity:0}.splide:not(.is-overflow) .splide__list{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.splide{padding-bottom:50px}.splide .splide__pagination__page{width:10px;height:10px;background:#9e9e9e;opacity:unset}.splide .splide__pagination__page.is-active{-webkit-transform:none;-ms-transform:none;transform:none}.splide .splide__pagination__page:hover{background:#c2c2c2}.section-introduction .splide__pagination__page.is-active{background:#fa704e}.section-playlist .splide__pagination__page.is-active{background:#f8cd85}