html,body{overflow-x: hidden;}

input {
  border-radius: 0 !important;
}


.process-bar-inner,.menu-wrapper{transition: all 0.3s linear;}

.color-white{color: #FFF}

.step-section{position: absolute;width: 100%;height: 100%;pointer-events: none}
.step-section .content-inner{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 100%;text-align: center;max-width: calc(100% - 40px);}
.step-section .content-inner.text-left{text-align: left}
.step-section {opacity: 0;pointer-events: none}
.step-section.active{opacity: 1;pointer-events: auto;z-index: 99;pointer-events: auto}

.click-btn,.close-btn{display: inline-block;margin: 0;padding:9px 16px 7px 16px;cursor: pointer}
.click-btn h4{color: #FFF }
.next-btn-ne,.next-btn,.result-final,.back-btn{display: inline-block;border-bottom: 2px solid #000;padding-right: 20px;background: url(../img/next-btn.svg) right top 8px no-repeat;pointer-events: none;opacity: .25;background-size: 16px auto;}
.ready-btn{display: inline-block;border: 1px solid #000;background: url(../img/next-btn.svg) right 14px center no-repeat;pointer-events: none;opacity: .25;padding: 11px 38px 9px 16px;background-size: 16px auto;}
.function-btn h4{padding: 9px 20px 7px 20px;text-align: center;border: 1px solid #000;margin-bottom: 20px;display: inline-block}
.downlaod-btn{background: url(../img/download.svg) right 4px top 6px  no-repeat;background-size: 6px auto;}

.next-btn.bn-btn{position: absolute;right: 10px}
.back-btn{position: absolute;left: 10px;opacity: 1;padding-left: 20px;pointer-events: auto;background: url(../img/back-btn.svg) left top 8px  no-repeat; background-size: 16px auto;padding-right: 0;cursor: pointer}


.aws-on .next-btn,.aws-on .next-btn-ne,.next-btn.on,.aws-on .ready-btn,.result-final.active{pointer-events: auto;cursor: pointer;;opacity: 1}

.content-inner,.step-section,.landing-ss{transition: all 1.2s cubic-bezier(0.65, 0, 0.35, 1);}
.logo,.bottom-menu,.process-bar,.botttom-border,.qof,.remind-wrap{transition: all 1.6s cubic-bezier(0.65, 0, 0.35, 1);}
.gif-loading{transition: all .8s cubic-bezier(0.65, 0, 0.35, 1);}
.bg-image{transition: all 1.6s linear}

.home-inner.off{opacity: 0}

.tran-bg{position: fixed;width: 100%;height: 100%;background: url(../img/background/Beige/5_Afterwards_blur.jpg) center  center no-repeat;background-size: cover !important;z-index: 999;pointer-events: none;display: none}

.retrace-wrap{height: 100%;overflow: hidden;position: fixed;width: 100%}
.retrace-wrap .content-inner{opacity: 0}
.retrace-wrap .step-section.active .content-inner{opacity: 1}
.retrace-wrap .step-section.active .content-inner.off,.speak-easy .content-inner.off{opacity: 0}
.logo.off,.warn-wrap .logo.off{top:-300px}
.qof.off{top:-300px}
.bottom-menu.off{bottom: -300px}
.process-bar.off{bottom: -302px}
.botttom-border.off{bottom: -301px}


.lightbox{position: absolute;top:0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,.5);z-index: 9;opacity: 0;transition: all 0.9s cubic-bezier(0.65, 0, 0.35, 1);transition-delay: 2s;}
.active .lightbox{opacity: 1}
.lightbox-inner{position: absolute;top:150%;left: 50%;transform: translate(-50%,-50%);width: 80%;background: #1A1A1A;padding:  20px 20px 28px 20px;text-align: center;transition: all 0.8s cubic-bezier(0.65, 0, 0.35, 1);transition-delay: 2s;}
.active .lightbox-inner{top: 50%}
.lightbox.off{opacity: 0;transition-delay: 0s;pointer-events: none;}

.lightbox p{color: #FFF}
.close-btn{border:1px solid #FFF}
.close-btn h4{color: #FFF}
.text-center{text-align: center}

a{text-decoration: none;color: #000}



/* header */
.logo{position: fixed;width: 128px;top: 20px;left: 20px;z-index: 999}
.logo.small img{opacity: 0;}
.logo img{transition: all .8s cubic-bezier(0.65, 0, 0.35, 1);}
.small-logo,.white-logo{position: absolute;width: auto;height: 100%;left: 0;top:0;opacity: 0;transition: all .4s cubic-bezier(0.65, 0, 0.35, 1);}
.logo.small .small-logo{opacity: 1}

.logo.active img{opacity: 0 !important}
.logo.active img.white-logo{opacity: 0 !important;}

.result-wrap .logo{position: absolute}

.bottom-menu{position: fixed;bottom: 0;height: 60px;width: 100%;z-index: 999;}
.botttom-border{position: fixed;width: 100%;height: 1px;background: #000;left: 0;bottom: 60px;z-index: 999;}
.botttom-border.active{display: none}
.process-bar{position: fixed;width: 100%;height: 2px;left: 0;bottom: 61px;z-index: 999;}
.process-bar.active{display: none}
.process-bar-inner{width: 0%;position: absolute;height: 100%;background: #000;}
.bottom-menu.active,.retrace-wrap .bottom-menu {background: none}
.audio-btn{position: absolute;width: 22px;height: 20px;left: 30px;top:50%;transform: translateY(-50%);background: url(../img/audio.svg) center  center no-repeat;;background-size: contain;}
.bottom-menu.active .audio-btn{background: url(../img/audio-w.svg) center  center no-repeat;;background-size: contain;opacity: .25}
.menu-btn{position: absolute;right: 30px;top:50%;transform: translateY(-50%);background: url(../img/menu-icon.svg) right  center no-repeat;;background-size: contain;display: inline-block;padding-right:35px;cursor: pointer}
.menu-btn h4{line-height: 1}
.menu-btn.active{background: url(../img/close-icon.svg) right  center no-repeat;;background-size: contain;}
.menu-btn.active h4{color: #FFF}
.menu-wrapper{width: 100%;height: 100%;background:#333;background-size: cover;position: fixed;;top:0;left: 0;z-index: 998;transform: translateY(100vh);opacity: 0}
.menu-wrapper.active{transform: translateY(0);opacity: 1}
.menu-list{position: absolute;left: 20px;top:50%;transform: translateY(-50%)}
.menu-list li a{border-bottom: 1px solid #FFF;color: #FFF;display: inline-block;padding-bottom: 2px}
.menu-list li{margin-bottom: 18px}
.home-audio,.audio-btn{display: none}

.landing-ss{opacity: 0}
.landing-ss.active{opacity: 1}

/* home */
.home-logo{height: 210px;margin: 0 auto;margin-bottom: 36px;}
.home-inner{text-align: center;overflow: hidden;padding: 15px;position: fixed;transform: translate(-50%,-50%);top:50%;left: 50%;width: 100%;transition: opacity .8s cubic-bezier(0.65, 0, 0.35, 1);}
.lang-list li h4{color: #000;padding: 11px 16px 9px 16px;border:1px solid #000}
.lang-list li a{color: #000}
.lang-list li{float: none;display: inline-block;margin: 0 12px}
.home-audio{position: fixed;width: 22px;height: 20px;left: calc(50% - 11px);bottom:20px;transform: translateY(-50%);background: url(../img/audio.svg) left  center no-repeat;;background-size: contain}
.home-audio-w{background: url(../img/audio-w.svg) center  center no-repeat;}
.home-audio-de{background: url(../img/audio-deactivate.svg) left  center no-repeat;width: 35px}
/* content */
.bg-image{position: fixed;width: 100%;height: 100%;background: url(../img/image.jpg) center  center no-repeat;background-size: cover;z-index: 99;pointer-events: none;opacity: 0}
.bg-image.on{opacity: 1;pointer-events: auto}
.bg-image-section-a{position: fixed;width: 100%;height: 100%;background: url(../img/background/Grey/5_Afterwards_blur.jpg) center  center no-repeat;background-size: cover !important;z-index: -2;pointer-events: none}
.bg-image-section-b{position: fixed;width: 100%;height: 100%;background: url(../img/background/Beige/5_Afterwards_blur.jpg) center  center no-repeat;background-size: cover !important;z-index: -3;pointer-events: none;}
.home-bg-image{position: fixed;width: 100%;height: 100%;background: url(../img/background/Grey/5_Afterwards_blur.jpg) center  center no-repeat;background-size: cover;z-index: -1}

.gif-loading{position: fixed;width: 100%;height: 100%;z-index: 9999;;top:0;left: 0;opacity: 0;pointer-events: none}
.gif-loading.active{opacity: 1}
.reuslt-page-wrap .bg-image-section-b, .about-page-wrap .bg-image-section-b, .data-page-wrap .bg-image-section-b{z-index: -1}


/* .step-1,.step-2,.step-3{background: #949494} */
.qof{position: fixed;right: 20px;top:20px}

.title-break-line{;width: 20px;height: 1px;background: #000;margin: 0 auto;margin-bottom: 23px;}

.owl-item > div { cursor: pointer;transition: margin 0.4s ease;}
.owl-item.center > div {cursor: auto; margin: 0;}

.drag-bar{position: relative;width: 100%;height: 180px;z-index: 9}
.drag-item-select{position: relative;width: 100%;overflow: hidden;display: block}


.owl-carousel{width: 100%;}
.owl-carousel .owl-stage-outer{overflow: visible}
.owl-item  img,.selecter-guide{height: 32px !important;margin: 0 auto}
.owl-carousel .pick-item{margin-bottom: 20px}

.point-list{position: absolute;transform: translate(-50%,-50%);top:40%;left: 50%;width: 100%}
.point-list ul{list-style: none;text-align: center;padding: 0}
.point-list ul li div{width: 4px;height: 30px;;padding: 0;margin: 0 auto;border-radius: 3px;border: 1px solid #000}
.point-list ul li{position: relative}
.point-list ul li::after{content: "　";position: absolute;width: 1px ;height: 10px;left: 18%;background: #000;top:10px}
.point-list ul li::before{content: "　";position: absolute;width: 1px ;height: 10px;left: 82%;background: #000;top:10px}
.point-list ul li:nth-child(1)::after{display: none}
.point-list ul li:last-child::before{display: none}

.guide-list{position: relative;width: 100%;height: 180px}
.guide-list li{float: none;display: inline-block;width: calc(100% / 6);}
.guide-list .point-list{top:30%}
.selecter-guide{position: absolute;bottom: 30%;left: 50%;transform: translateX(-50%)}
.guide-list .point-list ul li::after,.guide-list .point-list ul li::before{background: #FFF}
.guide-list .point-list ul li div{border-color: #FFF}

.count-slide{position: relative;display: inline-block;top: 0;z-index: 99}
.count-slide img{width: 24px;display: inline-block;}
.count-slide h3{display: inline-block}
.count-slide img.left-arrow{position: absolute;top:3px;left: -42px}
.count-slide img.right-arrow{position: absolute;top:3px;right: -42px}
.count-slide img.non-active{opacity: .3;pointer-events: none}
.check-owl-num span{opacity: .5;width: 25px;height: 25px;border: 1px solid #000;line-height: 25px;text-align: center;display: inline-block;border-radius: 100%;margin: 0 2px;cursor: pointer}
.check-owl-num {;height: 30px}
.check-owl-num span.active{opacity: 1}

.colo-pick-circle{overflow: hidden}

.pick-item{width: 100%;position: relative;display: block;text-align: center;margin-bottom: 40px}
.colo-pick-circle li{width: 54px;float: left;overflow: hidden}
.circle-ball{width: 100%;height: 54px;background: #999;;position: relative}
.colo-pick-circle li.active .circle-ball{}
.colo-pick-circle{max-width: calc(54px * 3);margin: 0 auto}
.top-b,.bottom-b{position: absolute;width: 100%;height: 3px;background: #000;top:0;left: 0;opacity: 0;transition: all .4s cubic-bezier(0.65, 0, 0.35, 1);}
.left-b,.right-b{position: absolute;width: 3px;height: 100%;background: #000;top:0;opacity: 0;transition: all .4s cubic-bezier(0.65, 0, 0.35, 1);}
.left-b{left: 0}
.right-b{right: 0}
.bottom-b{top:auto;bottom: 0}
.colo-pick-circle li.active .circle-ball .top-b,
.colo-pick-circle li.active .circle-ball .bottom-b,
.colo-pick-circle li.active .circle-ball .left-b,
.colo-pick-circle li.active .circle-ball .right-b{opacity: 1}

.value-text{opacity: .25}
.aws-on .value-text{opacity: 1}

.pick-item h4{cursor: pointer;background: rgba(255,255,255,.5);;margin-bottom: 4px;padding: 7px 10px;transition: all 0.3s linear}
.pick-item h4.off-list{opacity: .3}
.pick-item h4.active{background: rgba(255,255,255,1)}
.pick-item.margin-36-bottom{margin-bottom: 36px}

.tap-input{text-align: center;;background: none;border: none ;border-bottom: 1px solid #333;width: 65%;margin: 0 auto 28px auto}
.owl-dots{display: none}
.owl-dot{width: 8px;height: 8px;margin: 0 6px;border-radius: 100%;border: 2px solid #000 !important}
.owl-dot.active{background: #000 !important}



/* result Page */

.reuslt-page-wrap,.about-page-wrap,.data-page-wrap{position: fixed;;height: calc(100% - 60px);overflow-x: hidden;overflow-y: scroll;width: 100%}
.reuslt-menu{text-align: center;margin-bottom: 18px;}
.reuslt-menu li{margin-bottom: 4px;opacity: .5}
.reuslt-menu li h4{;background: #FFF;padding:7px 10px;}
.reuslt-menu li.active {opacity: 1}

.result-single {position: relative;padding: 0 20px;margin: 0 auto;margin-top: 144px}
.result-single .content-inner{padding-top: 20px;border-top:1px solid #000;padding-bottom: 40px}
.about-page-wrap .result-single .content-inner{padding-bottom: 32px;padding-top: 32px}
.radius-6{clip-path: polygon(0 12.00px,12.00px 0,calc(100% - 12.00px) 0,100% 12.00px,100% calc(100% - 12.00px),calc(100% - 12.00px) 100%,12.00px 100%,0 calc(100% - 12.00px));}

/* data Page */
.data-page-wrap .result-single .content-inner{border: none}
.clipboard{cursor: pointer}
.nc-pop{position: fixed;top:50%;left: 50%;transform: translate(-50%,-50%);z-index: 999;background: rgba(0,0,0,.8);display: none ;padding: 20px;color: #FFF !important}
.nc-pop h3{color: #FFF}

/* About Page */

/* recipes-list */
.recipes-list{overflow: hidden}
.recipes-list li{width: calc(50% - 10px);float: left;padding:0 5px;margin-bottom: 35px}
.dot-list li{list-style: disc;margin-left: 17px;padding-left: 5px}
.instructions-list li{list-style: decimal;margin-left: 17px;padding-left: 5px}
.remind-wrap{background: #000;padding: 10px 30px 8px;width:  calc(100% - 60px);}
.remind-wrap.off{margin-top: -300px}
.remind-wrap h5{color: #FFF !important;font-family:    'Inter', 'Noto Sans TC', serif !important;font-size: .85em !important}
.zh-content .remind-wrap h5{color: #FFF !important;font-family:   'Noto Sans TC', serif !important;font-size: .85em !important}
.warn-wrap .result-single{margin-top: 154px;}
.warn-wrap .logo{position: relative;top:20px !important}

.recipes-list li{text-align: center}
.recipes-list h4{border-bottom: 1px solid #000;display: inline-block}

/*drinking */

.qna-txt,.random-list li{position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%);width: 100%;max-width: 500px}

.random-qna{display: inline-block;border: 1px solid #000;padding:11px 16px 9px 16px;cursor: pointer;margin-bottom: 5px;position: fixed;bottom: -60px;left: 50%;transform: translateX(-50%)}
.random-list li{display: none}
.random-list li.active{display: block}
#game-list-wrap{border: 1px solid #000;height: 74px;overflow: hidden;margin-top: -24px}
.game-list{position: relative;transition: all .4s cubic-bezier(0.65, 0, 0.35, 1);}
.game-list li{position: relative;width: 180px;padding: 8px 0;border-bottom: 1px solid #000}
.game-list li.active{opacity: 1}
.game-list li:nth-child(1){margin-top: 18px ;border-top:1px solid #000}
.game-list li p{line-height: 1}

#game-list-wrap.on-2 .game-list{transform: translateY(-38px);}
#game-list-wrap.on-3 .game-list{transform: translateY(-76px);}

.game-control{position: relative;position: fixed;top: -60px;left: 50%;transform: translateX(-50%)}
.game-control .count-slide img.up-arrow{position: absolute;top:3px;left: -52px;z-index: 9}
.game-control .count-slide img.down-arrow{position: absolute;top:3px;right: -52px;z-index: 9}
.game-control .count-slide img.non-active{opacity: .3;pointer-events: none}