html{background-image:url(https://unsplash.com/photos/YJIH8vK0qFc/download?force=true&w=1920);background-position:50%;background-repeat:no-repeat;background-size:cover;min-height:100vh;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;position:relative}html:after{content:"";z-index:-1;background-color:rgba(30,30,30,.5);position:absolute;top:0;bottom:0;left:0;right:0}html body{-moz-box-orient:vertical;-moz-box-direction:normal;flex-direction:column;-moz-box-pack:center;justify-content:center;-moz-box-align:center;align-items:center;min-height:100vh;margin:0;display:flex}html body .wrap{max-width:960px;margin:0 auto}html body .wrap .header{font-size:22px;font-style:italic}html body .wrap .header .title{text-align:center;color:#fff;opacity:0;text-shadow:0 2px 2px rgba(0,0,0,.7);font-weight:500;transition:all 1s;-ms-transform:translateY(-100px);transform:translateY(-100px)}html body .wrap .header .title.title-in{opacity:1;transition:all 1s;-ms-transform:translateY(0);transform:translateY(0)}html body .wrap .main{padding:0 12px;overflow:hidden}html body .wrap .main .clock-outer-fram{-moz-box-pack:center;justify-content:center;display:flex}html body .wrap .main .clock-outer-fram .clock-outer{opacity:0;border:6px solid #fff;border-radius:50%;width:400px;height:400px;margin-top:20px;transition:all 1s;position:relative;overflow:hidden;-ms-transform:translateY(240px)rotate(-360deg);transform:translateY(240px)rotate(-360deg);box-shadow:inset 0 0 7px 1px rgba(0,0,0,.7),inset 0 0 5px 1px rgba(255,255,255,.9),0 0 1px 3px rgba(255,255,255,.9),0 0 10px 2px rgba(0,0,0,.7)}@media screen and (max-width:768px){html body .wrap .main .clock-outer-fram .clock-outer{width:350px;height:350px}}html body .wrap .main .clock-outer-fram .clock-outer.clock-outer-in{opacity:1;transition:all 1s;-ms-transform:translateY(0)rotate(0);transform:translateY(0)rotate(0)}html body .wrap .main .clock-outer-fram .clock-outer .clock{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);width:100%;height:100%;position:relative}html body .wrap .main .clock-outer-fram .clock-outer .clock .point-icon-outer{z-index:1;position:absolute;top:50%;left:50%;-ms-transform:translate(-50%,-50%)rotate(45deg);transform:translate(-50%,-50%)rotate(45deg)}html body .wrap .main .clock-outer-fram .clock-outer .clock .point-icon-outer .point-icon{color:#fff;text-shadow:0 0 5px rgba(0,0,0,.8);-ms-transform:rotate(var(--second-point-rotate-count));-ms-transform:rotate(var(--second-point-rotate-count));transform:rotate(var(--second-point-rotate-count));font-size:20px}html body .wrap .main .clock-outer-fram .clock-outer .clock .num{color:#fff;text-shadow:0 2px 2px rgba(0,0,0,.7);font-size:30px;position:absolute;-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}html body .wrap .main .clock-outer-fram .clock-outer .clock .num:nth-of-type(2){top:8%;left:50%}html body .wrap .main .clock-outer-fram .clock-outer .clock .num:nth-of-type(3){top:15%;left:70%}html body .wrap .main .clock-outer-fram .clock-outer .clock .num:nth-of-type(4){top:30%;left:85%}html body .wrap .main .clock-outer-fram .clock-outer .clock .num:nth-of-type(5){top:50%;left:92%}html body .wrap .main .clock-outer-fram .clock-outer .clock .num:nth-of-type(6){top:70%;left:85%}html body .wrap .main .clock-outer-fram .clock-outer .clock .num:nth-of-type(7){top:85%;left:70%}html body .wrap .main .clock-outer-fram .clock-outer .clock .num:nth-of-type(8){top:92%;left:50%}html body .wrap .main .clock-outer-fram .clock-outer .clock .num:nth-of-type(9){top:85%;left:30%}html body .wrap .main .clock-outer-fram .clock-outer .clock .num:nth-of-type(10){top:70%;left:15%}html body .wrap .main .clock-outer-fram .clock-outer .clock .num:nth-of-type(11){top:50%;left:8%}html body .wrap .main .clock-outer-fram .clock-outer .clock .num:nth-of-type(12){top:30%;left:15%}html body .wrap .main .clock-outer-fram .clock-outer .clock .num:nth-of-type(13){top:15%;left:30%}html body .wrap .main .clock-outer-fram .clock-outer .clock .line{width:100%;height:100%;position:absolute}html body .wrap .main .clock-outer-fram .clock-outer .clock .line.animate{transition:all .5s}html body .wrap .main .clock-outer-fram .clock-outer .clock .line.seconds{-ms-transform:rotate(var(--second-rotate-count));-ms-transform:rotate(var(--second-rotate-count));transform:rotate(var(--second-rotate-count))}html body .wrap .main .clock-outer-fram .clock-outer .clock .line.seconds:after{content:"";background-color:#fff;border-radius:10px;width:1%;height:48%;position:absolute;bottom:50%;left:50%;-ms-transform:translate(-50%);transform:translate(-50%);box-shadow:0 0 5px rgba(255,255,255,.7)}html body .wrap .main .clock-outer-fram .clock-outer .clock .line.minute{-ms-transform:rotate(var(--minute-rotate-count));-ms-transform:rotate(var(--minute-rotate-count));transform:rotate(var(--minute-rotate-count))}html body .wrap .main .clock-outer-fram .clock-outer .clock .line.minute:after{content:"";background-color:#fff;border-radius:10px;width:2%;height:35%;position:absolute;bottom:50%;left:50%;-ms-transform:translate(-50%);transform:translate(-50%);box-shadow:0 0 5px rgba(255,255,255,.7)}html body .wrap .main .clock-outer-fram .clock-outer .clock .line.hour{-ms-transform:rotate(var(--hour-rotate-count));-ms-transform:rotate(var(--hour-rotate-count));transform:rotate(var(--hour-rotate-count))}html body .wrap .main .clock-outer-fram .clock-outer .clock .line.hour:after{content:"";background-color:#fff;border-radius:10px;width:3%;height:28%;position:absolute;bottom:50%;left:50%;-ms-transform:translate(-50%);transform:translate(-50%);box-shadow:0 0 5px rgba(255,255,255,.7)}html body .wrap .main .show-text-group .city-show{text-align:center;color:#fff;text-shadow:0 2px 2px rgba(0,0,0,.7);opacity:0;margin-top:35px;font-size:40px;font-style:italic;transition:all 1s;display:block;-ms-transform:translateY(-10px);transform:translateY(-10px)}html body .wrap .main .show-text-group .city-show.city-show-in{opacity:1;-ms-transform:translateY(0);transform:translateY(0)}html body .wrap .main .show-text-group .time-show-day{text-align:center;color:#fff;text-shadow:0 2px 2px rgba(0,0,0,.7);opacity:0;margin:20px 0;font-size:25px;font-style:italic;transition:all 1s;display:block;-ms-transform:translateY(-30px);transform:translateY(-30px)}html body .wrap .main .show-text-group .time-show-day.time-show-day-in{opacity:1;-ms-transform:translateY(0);transform:translateY(0)}html body .wrap .main .show-text-group .time-show{text-align:center;white-space:pre-line;color:#fff;text-shadow:0 2px 2px rgba(0,0,0,.7);opacity:0;margin-bottom:30px;font-size:25px;font-style:italic;transition:all 1s;display:block;-ms-transform:translateY(-60px);transform:translateY(-60px)}html body .wrap .main .show-text-group .time-show.time-show-in{opacity:1;-ms-transform:translateY(0);transform:translateY(0)}html body .wrap .main .select-group{color:#fff;text-align:center;width:110px;transition:all .7s;position:fixed;bottom:-562px;right:0}html body .wrap .main .select-group.active{bottom:0}html body .wrap .main .select-group .toggle-bar-btn{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:rgba(30,30,30,.2);border-radius:5px;-moz-box-pack:center;justify-content:center;-moz-box-align:center;align-items:center;margin:0 5px 7px;padding:5px 0 8px 5px;transition:all .7s;display:flex;box-shadow:inset 0 0 2px rgba(255,255,255,.7)}html body .wrap .main .select-group .toggle-bar-btn i{margin:0 7px 0 10px;font-size:20px;transition:all .7s;-ms-transform:rotate(0);transform:rotate(0)}html body .wrap .main .select-group .toggle-bar-btn.active{margin:0 5px}html body .wrap .main .select-group .toggle-bar-btn.active i{-ms-transform:rotate(-180deg);transform:rotate(-180deg)}html body .wrap .main .select-group .select-outer{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:rgba(30,30,30,.2);border-radius:5px;-moz-box-orient:vertical;-moz-box-direction:normal;flex-direction:column;-moz-box-pack:center;justify-content:center;margin:5px;padding:1px;display:flex;overflow:hidden;box-shadow:inset 0 0 2px rgba(255,255,255,.7)}html body .wrap .main .select-group .select-outer .select-area{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:5px;padding:5px 0 8px;position:relative}html body .wrap .main .select-group .select-outer .select-area:after{content:"";background-color:rgba(255,255,255,.2);width:99%;height:1px;margin:0 auto;position:absolute;bottom:0;left:0;right:0}html body .wrap .main .select-group .select-outer .select-list{border-radius:0 0 5px 5px;max-height:0;margin-bottom:-1px;transition:all .7s;overflow-x:hidden;overflow-y:scroll}html body .wrap .main .select-group .select-outer .select-list::-webkit-scrollbar{border-radius:50%;width:3px}html body .wrap .main .select-group .select-outer .select-list::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.7)}html body .wrap .main .select-group .select-outer .select-list .options{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:5px 5px 8px;font-size:14px;transition:all .7s;position:relative;box-shadow:inset 0 0 2px 1px transparent}html body .wrap .main .select-group .select-outer .select-list .options:after{content:"";opacity:0;z-index:-1;background-color:rgba(255,255,255,.8);border-radius:5px;margin:0 5px;transition:all .7s;position:absolute;top:0;bottom:0;left:0;right:0;box-shadow:inset 0 0 2px 1px rgba(30,30,30,.5)}html body .wrap .main .select-group .select-outer .select-list .options.active{color:#000}html body .wrap .main .select-group .select-outer .select-list .options.active:after{opacity:1}html body .wrap .main .select-group .select-outer .select-list.list-toggle{max-height:20vh;margin-bottom:0;padding:5px 0}html body .wrap .main .loading-outer{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;z-index:10;pointer-events:none;background-color:rgba(0,0,0,.3);transition:opacity .7s;position:fixed;top:0;bottom:0;left:0;right:0}html body .wrap .main .loading-outer .loading svg{width:200px;height:198px;animation:1s linear infinite loadingFram;position:absolute;top:50%;left:50%;-ms-transform:translate(-50%,-50%)rotate(0);transform:translate(-50%,-50%)rotate(0)}@keyframes loadingFram{0%{-ms-transform:translate(-50%,-50%)rotate(0);transform:translate(-50%,-50%)rotate(0)}to{-ms-transform:translate(-50%,-50%)rotate(360deg);transform:translate(-50%,-50%)rotate(360deg)}}html body .wrap .main .loading-outer .loading .loading-text{color:#fff;font-size:18px;position:absolute;top:50%;left:50%;-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}html body .wrap .main .loading-outer.active{opacity:1;pointer-events:all}html body .wrap .footer h6{color:#fff;text-align:center;font-size:14px}