body{background:var(--theme-ui-colors-secondary);}

.toggle-btn{top:0.8em;font-size:0.8em;}
.toggle-btn .switch-to-lang-tw{top:0;bottom:0.2em;}
.toggle-btn-checkbox + .toggle-btn-label .toggle-btn-label-span{top:0.2em;}
span.copy-link-icon:before{padding:0.1em 0.9em 0.2em 0.9em;}

.hide{display:none;}

#main-wrapper{outline:none;z-index:100000;position:relative;color:var(--theme-ui-colors-white);background:var(--theme-ui-colors-secondary);background-image:url(../imgs/circular-lines.svg);background-position:center;background-repeat:no-repeat;background-size:70% auto;background-attachment:fixed;}
#main-wrapper:after,.sticky-header,.sticky-header:after{width:100%;height:100vh;}
.sticky-header{position:re}
.cover-header{width:60%;height:100vh;margin:auto;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;transition:opacity 3s cubic-bezier(0.19, 1, 0.22, 1);transition-delay:1s;position:relative;z-index:4;opacity:0;}
.cover-header.visible{opacity:1;}
.cover-content{width:80%;margin:0 auto;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;color:#fff;position:absolute;}
.cover-content.align-bottom{top:80%;transform:translate(-50%,-80%);}
.cover-sub{font-size:1em;line-height:1.4;display:block;text-align:left;margin-bottom:2em;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:uppercase;position:relative;-webkit-animation:fadein 4s;-moz-animation:fadein 4s;animation:fadein 4s;}
.theme-logo{width:200px;height:auto;}

.cover-headline h1{text-shadow:0 2px 20px rgba(0,0,0,0.4);position:relative;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.cover-headline h1 span,.cover-headline h1 em{display:block;}
.cover-headline h1 span{font-size:2.8rem;font-weight:300;-webkit-animation:fadein 16s;-moz-animation:fadein 16s;animation:fadein 16s;}
.cover-headline h1 em{font-size:4rem;font-weight:900;-webkit-animation:fadein 6s;-moz-animation:fadein 6s;animation:fadein 6s;}
#program-label{padding:0.4em 0.8em;border-radius:0.3em;display:inline-block;color:var(--theme-ui-colors-white);background:var(--theme-ui-colors-main);}
#program-label:hover{background:var(--theme-ui-colors-secondary);}
.publish{font-size:0.9em;padding:1em 0;margin:1em auto 0 auto;border:none;position:relative;}
.publish::before{content:'';width:30%;height:1px;background:rgba(255,255,255,0.4);display:flex;justify-content:center;margin:0 auto 0.6em auto;}

.intro{width:60%;margin:0 auto 3em auto;position:relative;z-index:2;display:block;background:var(--theme-ui-colors-secondary);}
.intro-text{padding:3em 5em;top:50%;left:50%;width:100%;font-size:1.1em;background:rgba(0,0,0,0);display:block;margin:auto;color:#fff;z-index:1000;text-align:left;box-shadow:0 0 30px 0 rgb(0 0 0 / 8%);border:2px solid rgba(255,255,255,0.3);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.intro-text p{margin:0 0 1.2em 0;}
.intro-text a{border-bottom:2px solid var(--theme-ui-colors-main);color:var(--theme-ui-colors-white);}
.overflow-default{overflow:hidden;}

.btn-text{padding:0.8em 1.2em;margin:2em auto;display:inline-block;color:var(--theme-ui-colors-white);background:var(--theme-ui-colors-main);border-radius:50px;align-items:center;line-height:1;}
.btn-text em{font-weight:700;}

@keyframes blinker{
50%{opacity:1.0;}
100%{opacity:0;}
}
@-webkit-keyframes blinker{
50%{opacity:1.0;}
100%{opacity:0;}
}
.blink{text-decoration:blink;animation-name:blinker;-webkit-animation-name:blinker;animation-duration:0.7s;-webkit-animation-duration:0.7s;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;animation-direction:alternate;-webkit-animation-direction:alternate;}

.circle-container{padding:1em;width:160px;height:160px;bottom:-3em;left:50%;-ms-transform:translate(-50%,0);transform:translate(-50%,0);position:fixed;border-radius:50%;display:flex;justify-content:center;align-items:center;z-index:1000;background-color:rgba(255,255,255,.9);box-shadow:0 0 2em rgba(0,0,0,0.2);}
.circle-container:hover{background-color:var(--theme-ui-colors-main);}

.circle-text{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;transform-origin:center;animation:rotate 10s linear infinite;background-image:url(../imgs/tab-vote-now.svg);background-position:center;background-repeat:no-repeat;background-size:100%;border-radius:50%;}
.circle-text:hover{background-image:url(../imgs/tab-vote-now-white.svg);}
.circle-container:before{width:80px;height:80px;margin-top:-1em;content:'';background-image:url(../imgs/zaobao-character-of-the-year-icon.svg);background-position:center;background-repeat:no-repeat;background-size:100%;}
.circle-container:hover:before{background-image:url(../imgs/zaobao-character-of-the-year-icon-white.svg);}

@keyframes rotate{
0%{transform:rotate(360deg);}
100%{transform:rotate(0deg);}
}

@media (min-width:200px) and (max-width:768px){
.circle-container{bottom:-3em;width:110px;height:110px;padding:0em;background-color:var(--theme-ui-colors-main);}
.circle-container:before{width:40px;height:40px;margin-top:-2em;}
.circle-text{background-image:url(../imgs/tab-vote-now-white.svg);}
.circle-container:before{background-image:url(../imgs/zaobao-character-of-the-year-icon-white.svg);}
}

@media (min-width:1000px) and (max-width:1280px) and (orientation:landscape){
.cover-header{width:70%;}
.cover-headline h1 em{font-size:3rem;}
}

#MainTrendLine{width:68%;height:68%;overflow:visible;aspect-ratio:1/1;}
#trend-line{fill:none;stroke:url(#line-gradient);stroke-width:3;stroke-linecap:round;stroke-linejoin:square;stroke-dasharray:1000;stroke-dashoffset:1000;animation:draw-line 10s forwards;}
.moving-dot{fill:rgba(255,255,255,0.4);r:6;transition:r 0.5s ease, opacity 0.5s ease;}

@keyframes draw-line {
to{stroke-dashoffset:0;}
}
@media (min-width:769px) and (max-width:1100px){
#main-wrapper{background-size:90% auto;}
.cover-header{width:100%;}
.cover-headline h1 span{font-size:2rem;}
.cover-headline h1 em{font-size:3rem;} 
}
@media (min-width:200px) and (max-width:768px) and (orientation:portrait){
body,p{font-size:17px;}
.sticky-header:after{background-size:140% auto;}
#main-wrapper{background:none;}
.cover-header{background:var(--theme-ui-colors-secondary);background-image:url(../imgs/circular-lines.svg);background-position:center;background-repeat:no-repeat;background-size:180% auto;}
#MainTrendLine{width:100%;height:100%;}
.overflow-default{overflow:visible;}
.cover-header,.cover-content{width:100%;}
.cover-content.align-bottom{top:65%;}
.cover-sub{width:100%;margin:0 auto 1em auto;text-align:left;display:block;}
.cover-headline h1 span{font-size:1.8rem;font-weight:300;}
.cover-headline h1 em{font-size:2.6rem;}
#program-label{padding:0.2em 0.8em;font-size:0.9em;}
.intro{width:90%;margin:auto;height:auto;}
.intro-text{padding:1em 1.6em;}
.theme-logo{width:140px;}
}

@media (max-width:768px){
.intro .message{width:70%;padding:0.6em 1em 1.6em 1em;}
.intro h1 em,.intro h1 span{display:block;}
.intro h1 span{font-size:1.2em;}
}

@media screen and (max-width:767px){
.intro h1{font-size:5em;margin-top:0;}
.intro h1 em{font-size:1.2em;margin-top:1em;}
.intro .message{width:80%;margin-top:1em;padding:0.6em 1.4em;}
.intro .video-box{margin:1em auto;}
}

@-webkit-keyframes fadein{
from{opacity:0;}
to{opacity:1;}
}
@-moz-keyframes fadein{
from{opacity:0;}
to{opacity:1;}
}
@keyframes fadein{
from{opacity:0;}
to{opacity:1;}
}

.divider{height:1em;display:block;}
header{z-index:1;width:100%;}
section{display:flex;width:100%;overflow:none;float:left;color:#fff;}
section h2{font-size:2em;text-align:center;line-height:1.2;}
.container.main.open .legends{width:60%;padding:2em 0 0 0;position:relative!important;}
#legend{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);height:80vh;width:80vw;background-color:#fff;z-index:1000;box-shadow:0 0 20px 0 rgba(0, 0, 0, .06);}
#legend .legend-explain .title{display:none;}
.legend-action,.back-action{width:100%;padding:1em 0;margin-bottom:1px;cursor:pointer;background:rgba(0,0,155,0.06);}
.legend-action{background:rgba(0,0,155,0.1)}
.legend-action:hover,.back-action:hover{background:rgba(255,255,255,1);}
.back-action img{height:1.8em;width:auto;}
.legend-action{color:#000;margin-bottom:1em;width:100%;height:4em;display:flex;align-items:center;justify-content:center;}
.legend-title{display:flex;align-items:center;justify-content:space-between;padding:0.5em 1em;color:#333;border-bottom:1px solid #f2f2f2;background-color:#f1f0fb;}
.legend{width:100%;display:flex;justify-content:center;padding:2em;}
.legend-img,.legend-explain{width:25%;height:auto;}
.legend-img{float:left;}
#legend .legend{display:block;}
#legend .legend-explain{width:100%;}
#legend .legend-img{width:33%;}
.close-button{width:40px;height:40px;display:block;cursor:pointer;background-image:url('../imgs/icon-close.svg');background-color:transparent;background-position:center;background-size:80%;background-repeat:no-repeat;}

@media screen and (max-width:767px){
section h2{font-size:1.6em;}
.legend{flex-direction:column;}
.legend-action{font-size:0.8em;}
.back-action img{height:1.6em;}
.legend-img,.legend-explain{width:100%;}
#legend{width:90vw;top:10%;transform:translate(-50%, 0);overflow-y:scroll;}
#legend .legend-img{width:100%;}
.container.main.open .legends{width:90%;}
}

/*.container.main{height:400vh;}
#page-cn .container.main{height:240vh;}*/
.container.main.open{height:auto;}
.container{width:100%;display:flex;flex-direction:column;align-items:center;height:auto;position:relative;}
.container.open .start{left:-200%;overflow-y:hidden; position: absolute;}
.section{width:100%;flex-direction:column;justify-content:space-between;align-items:center;position:relative;}
.start{height:auto;/*000height:100vh;*/width:100%;z-index:10;/*position:absolute;*/top:0;left:0;transition:left 2s;overflow-y:visible;}
.start .title{width:30vw;height:35vh;display:block;margin:auto;background-size:100% auto;background-repeat:no-repeat;background-image:url(../imgs/zaobao-word-of-the-year-2019-logo.svg);content:"";}


#results #navigator{display:none!important;}
.v-text{width:20px;color:#000;text-align:center;display:flex-start;font-size:1.2em;text-wrap:avoid;white-space:break-word;word-break:break-all;}
.v-text i{width:6px;height:6px;margin:1.2em auto;text-align:center;display:block;border:1px solid #000;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;}

@media (max-width:768px){
.container.main{height:600vh;}
.start{padding-bottom:100vh;}
.start .container{text-align:left;align-items:start;}
.start .title{width:60vw;height:30vh;}
}

@media all and (min-width:320px) and (max-width:600px){
.start .container{padding:0 1.4em;}
.start .title{width:60vw;height:22vh;}
}

.col-left,.col-right{display:inline-block;vertical-align:top;}
.img-responsive{width:100%;height:auto;}

.trailer h3,.archive h3{font-size:2.4em;margin:1em 0;color:#000;font-family:'NotoSerifCJKsc-Medium',serif;}
.trailer{width:90%;background:#fff;margin:1em 10% 1em 0;padding:3em 0;}
.trailer .text.col-left{width:48%;padding:0 4em;}
.trailer .text.col-right{width:50%;}
.trailer .media-video{margin:-6em 5em 1em 5em;}




@media (max-width:768px){
.col-left,.col-right{width:100%!important;vertical-align:top;}
.trailer{width:96%;}
.trailer h3,.archive h3{font-size:1.4em;}
.trailer .text.col-left{padding:0 2em 0 4em;}
}

@media all and (min-width:320px) and (max-width:600px){
.trailer{width:95%;margin:0 5% 0 0;padding:2em 0;}
.trailer h3,.archive h3{font-size:1.2em;margin:1em auto;}
.trailer .text.col-left{padding:0;}
.trailer .media-video{margin:1em 0;}
}


.iframe-wrapper{position:relative;overflow:hidden;padding-top:56.25%;}
.iframe-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
figure{padding:0;margin:0;}
figure img{width:100%;}
.col2{width:50%;padding:0;margin:0;float:left;text-align:center;}
.col3{width:30%;display:inline-block;vertical-align:top;}

@media all and (min-width:320px) and (max-width:767px){
.col2,.col3{width:100%;display:block;}
.col2{margin-bottom:1em;}
}

.palette{width:100%;display:block;margin:1em auto;padding-bottom:5em;align-items:center;justify-content:center;text-align:center;}
.palette .box{margin:auto;}
.palette a{padding:0;width:20vw;height:30vh;display:inline-block;color:#fff;align-items:center;justify-content:center;text-align:center;background-color:rgb(0,0,0);
background-color:linear-gradient(0deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 50%);}
.palette a em,.palette a span{width:50%;display:inline-block;align-items:right;justify-content:bottom;}
.palette a em{text-align:right;font-size:6em;font-weight:700;}
.palette a span{text-align:left;font-weight:100;}

@media all and (min-width:320px) and (max-width:767px){
.palette.container{text-align:center;padding:0;}
.palette a{padding:1em 0;width:40vw;height:20vh;}
.palette a span{font-size:0.9em;font-weight:300;}
.palette a em{font-size:3em;}
}

#navigator{position:fixed;bottom:0;left:0;display:none;z-index:100;}
#navigator a{width:200px;height:70px;padding:0.8em 1em;margin:0;vertical-align:bottom;display:inline-block;text-align:center;line-height:1.2;}
#navigator a em,#navigator a span,#navigator a small{display:inline-block;}
#navigator a em{font-weight:bold;font-weight:900;}
#navigator a small{font-size:0.8em;padding-top:0.3em;margin-top:0.4em;border-top:1px solid rgba(255,255,255,0.6);}
#navigator a.btn1{background:var(--theme-ui-colors-main);color:#fff;}
#navigator a.btn1:hover{background:#fff;color:#000;}
#navigator a.btn2{background-image:linear-gradient(225deg,#1400c8 0%,#b900b4 100%);color:rgba(255,255,255,1);}
#navigator a.btn2:hover{background-image:linear-gradient(225deg,#fff 0%,#fff 100%);color:#000;}


@media (max-width:800px){
#navigator{width:100%;font-size:0.9em;}
#navigator a{width:auto;height:auto;padding:0.7em 0;}
#navigator a em{font-size:0.9em;}
#navigator a small{display:block;width:60%;margin:0.3em auto 0 auto;}
#navigator a.btn1{width:50%;}
#vote-cn #navigator a.btn1{width:100%;font-size:1.2em;}
#navigator a.btn2{width:50%;}
}

.back-action {display: none !important;}

/* Google Trend word tab */
.keyword-list { list-style: none; padding: 0; margin: 0.5em 0 0 0; display: flex; flex-wrap: wrap; justify-content: center;gap:6px;}
.keyword-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.2; font-size: 0.9em; color: #999; padding: 6px 14px; border: 1px solid #eee; border-radius: 8px; background: #fff; cursor: pointer; transition: all 0.2s ease;}
.keyword-tab .zh, .current-text .zh { font-weight: bold; font-size: 1em; display: block; color: #333;}
.keyword-tab .en,.current-text .en { font-size: 0.8em; text-transform:capitalize; display: block; margin-top: 2px; }
.keyword-tab.active { background-color: var(--theme-ui-colors-main); border-color: var(--theme-ui-colors-main); box-shadow: 0 2px 6px rgba(240, 0, 86, 0.2); }
.keyword-tab.active .zh, .keyword-tab.active .en { color: #fff; opacity: 1; }
.keyword-tab[data-event="default"] { display: none; }
.mobile-toggle { display: none; }
.chart-legend { width: 100%; text-align: center; margin-bottom:1em; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: sans-serif; }

.legend-label { font-size: 0.85rem; margin-bottom: 4px; display: block;opacity:0.7;}
.legend-bar-container { display: flex; align-items: center; justify-content: center; gap: 8px; }
.min-max { font-size: 0.8rem;opacity:0.7;}
.gradient-bar { width: 100px; height: 6px; border-radius: 3px; background: linear-gradient(to right, #0C8918, #A3D900, #FFF143, #FF7500, #F00056); }
.chart-wrapper { position: relative; width: 100%; display: flex; justify-content: center; }
.word-title { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; pointer-events: none; z-index: 0; }

@media screen and (max-width:768px) {
.tab-wrapper{position:relative;width:90%;margin:0 auto;position:relative;z-index:1000000000000;}
.mobile-toggle {font-size:1.1em;display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid #ddd;padding:0.4em 0.8em;border-radius:8px;cursor:pointer;position:relative;z-index:1000000000000;}
.mobile-toggle .current-text{display:flex;align-items:center;text-align:left;line-height:1.2;}
.mobile-toggle .en{font-size:1em;color:#555;padding-left:0.4em;}
.mobile-toggle .arrow{font-size:0.8em;margin-top:-0.4em;color:#999;}
.keyword-list{display:none;gap:0;flex-direction:column;position:absolute;top:100%;left:0;width:100%;background:#fff;border:1px solid #eee;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,0.15);z-index:999;margin-top:5px;max-height:300px;overflow-y:auto;}
.tab-wrapper.expanded .keyword-list{display:flex;}
.keyword-tab{font-size:1.1em;padding:0.6em 0.8em;align-items:flex-start;text-align:left;width:100%;border:none;border-bottom:1px solid #f9f9f9;border-radius:0;flex-direction:row;justify-content:start;margin:0;}
.keyword-tab .en,.current-text .en{font-size:0.9em;padding-left:0.4em;color:#555;}
.keyword-tab:last-child{border-bottom:none;}
.keyword-tab:hover{background-color:#f9f9f9;}
.keyword-tab.active{background-color:var(--theme-ui-colors-main);}
.keyword-tab[data-event="default"]{display:flex;}
.keyword-list .keyword-tab[data-event="default"]{display:none !important;}
.word-title{padding-bottom:40px;}
.chart-legend{margin:0;}
.legend-label{display:none;}
}

@media screen and (min-height:300px) and (max-height:720px) and (orientation:landscape) {
.section.words .viz-card{display:flex;flex-direction:column;}
.word-action{order:1;margin-bottom:1.4em!important;}
.chart-wrapper{order:2;}

.tab-wrapper{position:relative;width:90%;margin:0 auto;position:relative;z-index:1000000000000;}
.mobile-toggle {font-size:1.1em;display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid #ddd;padding:0.6em 0.8em;border-radius:8px;cursor:pointer;position:relative;z-index:1000000000000;}
.mobile-toggle .current-text{display:flex;align-items:center;text-align:left;line-height:1.2;}
.mobile-toggle .en{font-size:1em;color:#555;padding-left:0.4em;}
.mobile-toggle .arrow{font-size:0.8em;color:#999;}
.keyword-list{display:none;gap:0;flex-direction:column;position:absolute;top:100%;left:0;width:100%;background:#fff;border:1px solid #eee;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,0.15);z-index:999;margin-top:5px;max-height:300px;overflow-y:auto;}
.tab-wrapper.expanded .keyword-list{display:flex;font-size:1.1em;}
.keyword-tab{font-size:0.9em;padding:0.6em 0.8em;align-items:flex-start;text-align:left;width:100%;border:none;border-bottom:1px solid #f9f9f9;border-radius:0;flex-direction:row;justify-content:start;margin:0;}
.keyword-tab .zh,.current-text .zh,.keyword-tab .en,.current-text .en{font-size:0.8em;padding-left:0.4em;}
.keyword-tab .en,.current-text .en{color:#555;}
.keyword-tab:last-child{border-bottom:none;}
.keyword-tab:hover{background-color:#f9f9f9;}
.keyword-tab.active{background-color:var(--theme-ui-colors-main);}
.keyword-tab[data-event="default"]{display:flex;}
.keyword-list .keyword-tab[data-event="default"]{display:none !important;}
.word-title{padding-bottom:40px;}
.chart-legend{margin:0;}
.legend-label{display:none;}
}


.scroll_indicator {opacity: 0;transition: opacity 0.3s ease;pointer-events: none;}
.scroll_indicator.visible {opacity: 1;pointer-events: all;}


/* Accordion */
.methodology-accordion {border-top: 1px solid #eee;margin-top: 2em;font-size: 0.9em;}
.methodology-header {display: flex;justify-content: space-between;align-items: center;padding: 15px 0;cursor: pointer;user-select: none;}
.methodology-header h4 {margin: 0;font-size: 1em;font-weight: bold;}
.methodology-header h4:before{width:20px;height:20px;display:inline-flex;content:'?';color:#fff;background:var(--theme-ui-colors-main);align-items:center;justify-content:center;border-radius:50%;margin-right:0.4em;}
.methodology-header .arrow {font-size: 0.8em;transition: transform 0.3s ease;}
.methodology-content {max-height: 0;overflow: hidden;transition: max-height 0.3s ease-out;}
.methodology-content .inner-padding{overflow:auto;}
.methodology-content p {margin-bottom:1em;line-height:1.5;color:rgba(177,207,233,1);}
.methodology-accordion.active .methodology-header .arrow,.tab-wrapper.expanded .arrow{transform:rotate(-135deg);}
.tab-wrapper.expanded .arrow{margin-top:0.4em;}
.methodology-accordion.active .methodology-content {max-height:100vh;transition: max-height 0.5s ease-in;overflow: visible;}
.arrow-line-light{border:2px solid #fff;}
.arrow-line-dark{border:2px solid #000;}
.arrow-icon{width:12px;height:12px;display:inline-block;border-width:0 2px 2px 0;padding:2px;}
.arrow-down{transform:rotate(45deg);-webkit-transform:rotate(45deg);}