* { box-sizing:border-box;margin:0;padding:0} *:focus {outline: none;}
* {
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Open Sans',Arial,-apple-system-font,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif;
  font-weight: 400;
  font-size: 15px;
  min-width: 360px;
}
input, textarea, select {
  padding: 15px 15px;border:1px solid #ddd;border-radius:3px;font-size: 16px;color:#555;
  min-width: 100%; border-radius: 0; background: #f5f5f2; background: #fff;
}

a {color:#f57600;text-decoration: none;}
button {border: none; padding:15px 18px;text-align: center;background: #ffdd05;color:#fff;font-weight: 500}

header {display: flex;justify-content: center;padding:25px 30px;text-align: center;background: linear-gradient(180deg, rgba(255,216,0,1) 0%, rgba(255,255,255,1) 100%);background:#ffdd05;background: #fff;box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 8px;}
header .logo a {font-size: 30px;font-weight: 800;letter-spacing:-0.5px;margin-right:15px;color:#f57600;border-bottom:3px solid #ffdd05;padding-bottom:2px}
header .slogon {padding-top: 12px;font-size: 15px;color:#111;font-weight: 500;letter-spacing: 0;color:#f57600}
footer {padding:30px;font-size: 13px;color:#888;text-align:center;font-weight: 300}

.color-black-2{color:#222} .color-black-5{color:#555} .color-black-8{color:#888} .color-white{color:#fff} .color-green{color:#00ad43} .color-red{color:#ff002b}
.underline{text-decoration: underline}

.font-11 {font-size:11px} .font-12 {font-size:12px} .font-13 {font-size:13px} .font-14 {font-size:14px} .font-15 {font-size:15px} .font-16 {font-size:16px}
.font-17 {font-size:17px} .font-18 {font-size:18px} .font-19 {font-size:19px} .font-20 {font-size:20px} .font-22 {font-size:22px} .font-26 {font-size:26px}
.font-30 {font-size:30px} .font-40 {font-size:40px} .font-50 {font-size:50px} .font-60 {font-size:60px}
.font-bold {font-weight:bold} .font-sebold {font-weight:500} .font-light {font-weight:300} .font-regular {font-weight:400}
.break-all {word-break:break-all} .pre-wrap {white-space: pre-wrap}

.mx-auto{margin-left:auto;margin-right:auto} .mx-10{margin-left:10px;margin-right:10px} .mx-15{margin-left:15px;margin-right:15px}
.my-10{margin-top:10px;margin-bottom:10px} .my-20{margin-top:20px;margin-bottom:20px}
.mt-10{margin-top: 10px;} .mt-15{margin-top: 15px;} .mt-20{margin-top: 20px;} .mt-30{margin-top: 30px;} .mt-50{margin-top: 50px;}
.ml-15{margin-left:15px}
.p-0{padding:0} .p-5{padding:5px} .p-8{padding:8px} .p-10{padding:10px} .p-12{padding:12px} .p-15{padding:15px} .p-20{padding:20px} .p-25{padding:25px} .p-30{padding:30px}
.px-20{padding-left:20px;padding-right:20px} .px-25{padding-left:25px;padding-right:25px} .px-30{padding-left:30px;padding-right:30px}
.py-5{padding-top:5px;padding-bottom: 5px} .py-8{padding-top:8px;padding-bottom: 8px} .py-10{padding-top:10px;padding-bottom: 10px}
.pt-1{padding-top:1px} .pt-2{padding-top:2px}
.pr-15{padding-right:15px}

.flex {display:flex;} .flex-column{flex-direction: column} .flex-grow {flex-grow: 1;} .flex-wrap {flex-wrap: wrap;}
.justify-center {justify-content: center;} .justify-end{justify-content: flex-end;} .align-start{align-self: flex-start;}
.text-center{text-align:center;} .text-right{text-align:right}

 .object-cover {object-fit: cover;}

.relative {position:relative;} .absolute {position:absolute} .fixed {position:fixed}
.block {display:block} .inline-block {display:inline-block} .hidden {display: none;}
.appear {
  -webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;-ms-transition: all 0.3s ease;transition: all 0.3s ease;
  opacity: 1;animation-name:fadeInOpacity;animation-iteration-count: 1;animation-timing-function: ease-in;animation-duration: 0.5s;
}

.bt-1-black-a{border-top: 1px solid #aaa}
.bt-2-primary{border-top:2px solid #ffdd05} .bt-5-primary{border-top:5px solid #ffdd05}

.max-w-full{max-width:100%} .max-w-25p{max-width:25%} .max-w-50p{max-width:50%} .max-w-80p{max-width:80%} .max-w-80{max-width:80px} .max-w-400{max-width:400px} .max-w-500{max-width:500px} .max-w-600{max-width:600px}
.max-w-600{max-width:600px} .max-w-800{max-width:800px} .max-w-900{max-width:900px} .max-w-1000{max-width:1000px} .max-w-1200{max-width:1200px}
.min-w-25p{min-width:25%} .min-w-35p{min-width:35%} .min-w-50p{min-width:50%}
.min-w-100{min-width:100px} .min-w-120{min-width:120px} .min-w-150{min-width:150px} .min-w-200{min-width:200px}
.w-50p{width:50%}

@keyframes fadeInOpacity { 0% {opacity: 0;} 100% {opacity: 1;} }
@keyframes fadeOutOpacity { 0% {opacity: 1;} 100% {opacity: 0;} }

.primary-color{color:#ffdd05}
.pagenation {display: flex;flex-wrap:wrap;padding:20px 0}
.pagenation .dot {flex-grow: 1;text-align: center;margin-right: 5px;padding: 10px 10px;margin-top:5px}
.pagenation .pagelink {max-width:80px;cursor:pointer;flex-grow: 1;text-align: center;margin-top:5px;margin-right: 5px;padding: 10px 10px;border:2px solid #ffdd05;color:#ffdd05;}
.pagenation .pagelink.current {flex-grow: 1;text-align: center;margin-top:5px;margin-right: 5px;padding: 10px 10px;border:2px solid #ffdd05;background:#ffdd05;color:#fff;}

.tmp-page .tmp-content {line-height: 1.9}
.tmp-page .tmp-content h2 {margin-top:20px}
.tmp-page .tmp-content ul {padding-left:30px}
.tmp-page .tmp-content p, ul{margin-bottom: 15px}
.tmp-page .tmp-content a{color: #ffdd05}

.content-container-wider {padding: 0 30px;max-width: 1200px;margin:auto}
.content-container {padding:50px 30px;max-width: 900px;margin:auto}
.content-container.err-page {text-align: center;padding:50px 0}
.content-container.err-page h1 {font-size: 60px}
.content-container.err-page p {font-size: 20px}
.content-container.err-page .links a{font-size: 20px;display: inline-block;margin:20px 20px;text-decoration: underline;font-weight: 500}
.content-fw-container {padding:30px;}

@media screen and (max-width: 660px) {
  .content-container {padding:50px 15px}
}

.contact-form .form-field {margin-top: 20px}
.contact-form .form-field textarea {resize: vertical;}

.gas-price-banner {max-width: 400px;margin:auto;}


.emph-bn {min-width:400px;padding:30px;border:5px solid #ffdd05;border-radius: 20px;background: #ffdd05;box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;}
.emph-bn .compare-yesterday {text-align: center;font-size: 13px;color:#777}
.emph-bn .predict {text-align: center;margin-top:15px}
@media screen and (max-width: 420px) {
  .emph-bn {min-width: 90%}
}

.semi-emph-bn {width:48%;margin:1%;padding:20px;border:1px solid #ffdd05;border-radius:10px;background: #fff}
.semi-emph-bn .compare-yesterday {text-align: center;color:#888;font-size: 13px}
@media screen and (max-width: 580px) {
  .semi-emph-bn {width:99%;margin:1%;}
}


.gas-price-list .single-gas-price {padding:10px;display: flex}
.gas-price-list .single-gas-price:nth-child(odd){background: #fffdf3}

.city-gas-p-stats .flex.flex-column.p-20  {border:1px solid #ffdd05;border-radius: 10px;margin:5px;text-align: center;}
.city-gas-p-stats .flex.flex-column.p-20 .font-bold.font-20.text-center {padding:7px 0}
.city-gas-p-stats .flex.flex-column.p-20 .color-black-8 {font-size: 13px}
@media screen and (max-width: 760px) {
  .city-gas-p-stats {flex-wrap:wrap;}
  .city-gas-p-stats .flex.flex-column.p-20 {width:48%;margin:1%}
}
@media screen and (max-width: 460px) {
  .city-gas-p-stats .flex.flex-column.p-20 {width:99%;margin:1%}
  .city-gas-p-stats .font-20 {font-size:30px}
}

.canvas-scroller {max-width:92vw;overflow-x: scroll;position: relative;}
.canvas-scroller .canvas-wrapper{min-width:800px;position: relative;}