/*@charset "utf-8";*/
/*!
 * 作者：miniidea
 * 网站地址: http://www.miniidea.com
 */
/**
 +------------------------------------------------------------------------------
 * ************   Reset Css   ************
 +------------------------------------------------------------------------------
 */
html { font-family: sans-serif; line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100% }
body { margin: 0 }
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section { display: block }
h1 { font-size: 2em; margin: .67em 0 }
figure { margin: 1em 40px }
hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; overflow: visible }
pre { font-family: monospace; font-size: 1em }
a { background-color: transparent; -webkit-text-decoration-skip: objects }
a:active, a:hover { outline-width: 0 }
abbr[title] { border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted }
b, strong { font-weight: bolder }
code, kbd, samp { font-family: monospace; font-size: 1em }
dfn { font-style: italic }
mark { background-color: #ff0; color: #000 }
small { font-size: 80% }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline }
sub { bottom: -.25em }
sup { top: -.5em }
audio, canvas, video { display: inline-block }
audio:not([controls]) { display: none; height: 0 }
img { border-style: none }
svg:not(:root) { overflow: hidden }
button, input, optgroup, select, textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; outline: none }
button, input { overflow: visible }
button, select { text-transform: none }
button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0 }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText }
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: .35em .625em .75em }
legend { -webkit-box-sizing: border-box; box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal }
progress { display: inline-block; vertical-align: baseline }
textarea { overflow: auto }
[type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; cursor: pointer }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px }
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit }
summary { display: list-item }
[hidden], template { display: none }
/**
 +------------------------------------------------------------------------------
 * ************   Common Css   ************
 +------------------------------------------------------------------------------
 */
*, *::before, *::after { -webkit-box-sizing: inherit; box-sizing: inherit }
html { -webkit-box-sizing: border-box; box-sizing: border-box }
body { font-size: 1rem; line-height: 1.42858; font-family: "Open Sans", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Hiragino Sans GB", "WenQuanYi Micro Hei", Arial, sans-serif; color: #666 }
ol, ul { list-style: none }
dl, dd, ul, p { margin: 0; padding: 0 }
a { text-decoration: none; color: #333 }
a:hover { color: var(--text-color) }
code, kbd, pre, samp { font-family: Menlo, Monaco, Consolas, "Courier New", monospace }
pre { display: block; font-size: 13px; line-height: 1.42858; color: #333; word-break: break-all; word-wrap: break-word; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px; overflow: auto }
code { padding: 2px 4px; font-size: 90%; color: #c7254e; background-color: #f9f2f4; border-radius: 3px }
kbd { padding: 2px 4px; font-size: 90%; color: #fff; background-color: #333; border-radius: 3px }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: inherit; font-weight: 500; line-height: 1.1 }
small, .small { font-weight: 400; line-height: 1; color: #777; font-size: 65% }
.fl { float: left !important }
.fr { float: right !important }
.fix::before, .fix::after { content: " "; display: table }
.fix::after { clear: both }
.flex { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap }
.hide { display: none !important }
.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.ellipsis-rows { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; -webkit-line-clamp: 2; text-overflow: ellipsis }
/**
 +------------------------------------------------------------------------------
 * ************   Public Css   ************
 +------------------------------------------------------------------------------
 */
html { scroll-behavior: smooth }
.clear { clear: both }

.mt5 { margin-top: 5px }
.mt10 { margin-top: 10px }
.mt15 { margin-top: 15px }
.mt20 { margin-top: 20px }
.mt30 { margin-top: 30px }
.mt40 { margin-top: 40px }
.mt50 { margin-top: 50px }

.pr { position: relative }

.first { margin-left: 0 !important }
.last { margin-right: 0 !important }

/*scrollbar*/
::-webkit-scrollbar { width: 10px; height: 10px }
::-webkit-scrollbar-button:vertical { display: none }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background-color: #fff }
::-webkit-scrollbar-thumb { border-radius: 10px; background-color: rgba(0, 0, 0, .3) }
::-webkit-scrollbar-thumb:vertical:hover { background-color: rgba(0, 0, 0, .35) }
::-webkit-scrollbar-thumb:vertical:active { background-color: rgba(0, 0, 0, .38) }

body { background: #f0f0f0 }
.layout { position: relative; max-width: 750px; height: 100%; min-height: 100vh; margin: 0 auto; background: #fff }

/*main*/
.query { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100vh; padding-bottom: 200px; background: url(../images/bg.png) no-repeat center / contain }
.query-img { width: 60% }
.query-form { width: 100%; margin-top: 35px; padding: 0 15px }
.query-group { display: flex; align-items: center; position: relative; width: 100%; height: 48px; padding: 0 2px; font-size: 1rem; color: #333; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0px 4px 17px 0px rgba(0, 0, 0, .16) }
.query-label { display: flex; justify-content: center; align-items: center; padding: 0 8px; color: #b4bcc3 }
.query-input { flex: 1; max-width: 100%; height: 48px; border: none; color: #333 }
.query-input::-webkit-input-placeholder { color: #bebebe }
.query-input::placeholder { color: #bebebe }
.query-cancel { display: none; position: relative; height: 18px; width: 18px; margin: 0 12px; cursor: pointer; border-radius: 100%; background: #c9c9c9; -webkit-transition: all .4s ease; transition: all .4s ease }
.query-cancel::after, .query-cancel::before { content: ""; position: absolute; top: 4px; left: 8px; width: .1rem; height: 10px; background: #fcfcfc }
.query-cancel::before { -webkit-transform: rotate(45deg); transform: rotate(45deg) }
.query-cancel::after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg) }
.query-cancel:hover { -webkit-transform: rotate(90deg); transform: rotate(90deg) }
.query-cancel:hover::after, .query-cancel:hover::before { background: #e60012 }
.query-input:valid + .query-cancel { display: block }
.query-but { display: block; width: 100%; height: 48px; margin-top: 15px; padding: 0 20px; line-height: 48px; text-align: center; font-weight: 400; font-size: 20px; cursor: pointer; text-transform: capitalize; color: #fff; letter-spacing: 8px; border-radius: 10px; border: none; background-color: #0d6efd; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out }

.result { display: grid; grid: 'img title''img info'; grid-gap: 5px 15px; align-items: center; justify-items: start; justify-content: start; margin: 0 15px; padding: 30px 0 15px }
.result img { width: 80px; max-width: 80px; grid-area: img }
.result h1 { grid-area: title; color: #000; font-weight: 600 }
.result p { grid-area: info }

main { margin-top: 1rem; padding: 0 15px 100px }
.result-box { padding-top: 15px; padding-bottom: 15px; background: #fff; border-radius: 10px; box-shadow: 0 0px 15px rgba(0, 0, 0, .15); overflow: hidden }
.result-hb { position: relative; width: 100%; padding: 0 15px }
.result-hr { position: relative; width: 100%; height: 1px; margin-top: 30px; margin-bottom: 20px; border: none; border: none; background-image: linear-gradient(to right, #e0dede 0%, #e0dede 50%, transparent 50%); background-size: 8px 8px; background-repeat: repeat-x }
.result-hr::before { content: ""; display: block; position: absolute; top: -8px; left: -8px; width: 16px; height: 16px; border-radius: 100%; background: #e0dede }
.result-hr::after { content: ""; display: block; position: absolute; top: -8px; right: -8px; width: 16px; height: 16px; border-radius: 8px 0 0 8px; background: #e0dede }
.result-hb p { font-size: 14px; color: #333 }
.result-hb span { display: block; margin-top: 10px; text-align: center; font-size: 20px; color: #383838; background: url(../images/num-bg.png) no-repeat; background-size: 100% 100%; border: 1px solid #e5e5e5; border-radius: 0.2rem; padding: 8px 0; line-height: 1em; letter-spacing: .5em }
.result-schedule { }
.result-schedule span { display: block; text-align: center; font-weight: 600; font-size: 18px; color: #333 }
.result-schedule ul { margin-top: 15px; padding: 0 15px }
.result-schedule ul li { position: relative; padding-left: 30px; padding-bottom: 10px; font-size: 14px; border-bottom: 1px dashed #e0dede }
.result-schedule ul li + li { margin-top: 10px }
.result-schedule ul li::before { content: ""; display: block; position: absolute; top: 50%; left: 0; width: 12px; height: 12px; transform: translateY(-50%); border-radius: 100%; background: #e8cdab }
.result-schedule ul li time { }
.result-schedule ul li p { margin-top: 5px }
.result-bd { margin: 0 15px; padding: 15px 0; font-size: 14px }

footer { position: fixed; right: 0; bottom: 0; left: 0; width: 100%; max-width: 750px; margin: 0 auto; font-size: 14px; color: rgba(0, 0, 0, .75); background: #fff }
footer>hr { width: calc(100% - 30px); margin: 0 auto; border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0)) }
.copyright { position: relative; padding: 20px 0; line-height: 1.6; font-size: 12px; text-align: center }
.copyright a { color: rgba(0, 0, 0, .75); transition: all .3s ease }
.copyright a:hover { color: rgb(0, 0, 0); text-decoration: underline }

.home-box { position: fixed; bottom: 100px; right: 30px; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; color: #fff; border-radius: 100%; background: #0d6efd }

/*grid*/
@media (min-width:576px) {
  .result { margin: 0 30px }
  main { padding: 0 30px }
}