@charset "UTF-8";
/***
	for YOATO
	create 2019/11/18
	author insowe Gili
***/
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC:400,500,600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700&display=swap");
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
}

html {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

caption,
th,
td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle;
}

q,
blockquote {
    quotes: none;
}
q:before,
q:after,
blockquote:before,
blockquote:after {
    content: "";
    content: none;
}

a img {
    border: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}

html,
body {
    color: #313131;
    font-size: 16px;
    line-height: 24px;
    font-family: "Noto Serif JP", "Noto Sans TC", "Helvetica Neue", "Helvetica",
        "Microsoft JhengHei", Arial, sans-serif;
    width: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
}

a {
    display: block;
    text-decoration: none;
    color: inherit;
}
b{
    font-weight: 700!important;
}
.inline-block {
    font-size: 0;
}
.inline-block > * {
    display: inline-block;
    vertical-align: top;
    font-size: 1rem;
}

input,
textarea,
select {
    font-family: Arial, "Noto Sans TC", "Microsoft JhengHei", "Segoe UI",
        -apple-system, system-ui, Helvetica, Arial, sans-serif, Impact;
    font-size: 14px;
    color: inherit;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
select::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #dddddd;
}
input:-moz-placeholder,
textarea:-moz-placeholder,
select:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #dddddd;
}
input::-moz-placeholder,
textarea::-moz-placeholder,
select::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #dddddd;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder,
select:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #dddddd;
}
input:focus,
textarea:focus,
select:focus {
    outline: none;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.afterClear:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
}

figure {
    text-align: center;
}
figure figcaption {
    text-align: right;
    font-size: 12px;
    color: #999999;
}

.wrap {
    max-width: 1020px;
    width: 100%;
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
}
.wrap:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
}

.layoutArea {
    max-width: 800px;
    margin: 0 auto;
}

.hide {
    display: none !important;
}

.btn {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    display: inline-block;
    vertical-align: top;
    padding: 6px 30px 5px;
    border: none;
    font-family: Arial, "Noto Sans TC", "Microsoft JhengHei", "Segoe UI",
        -apple-system, system-ui, Helvetica, Arial, sans-serif, Impact;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
}
.btn.btn-b {
    background-color: #4aa2db;
    color: #fff;
}
.btn.btn-gy {
    background-color: #999999;
    border-bottom-color: #666666;
    color: #fff;
}
.btn.btn-r {
    background-color: #ff8a49;
    border-bottom-color: #ec681f;
    color: #fff;
}

.link {
    display: inline-block;
    vertical-align: top;
}
.link::before {
    display: inline-block;
    vertical-align: top;
    font-family: "Font Awesome 5 Free";
    margin-right: 3px;
}
.link.arrow::before {
    content: "\f35a";
}

.read-more {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background: rgba(0, 160, 233, 0.75);
    padding: 10px 24px;
    display: inline-block;
    margin: 24px auto;
    border-radius: 3px;
}

.pc-hide {
    display: none;
}

.feedback {
    position: fixed;
    top: 10%;
    left: 0;
    width: 100%;
    z-index: -999;
    text-align: center;
    display: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.feedback .feedback-text {
    display: inline-block;
    padding: 5px 15px;
    font-size: 14px;
    color: #fff;
}
.feedback .feedback-text.feedback-success {
    background-color: #4aa2db;
}
.feedback .feedback-text.feedback-cancel {
    background-color: #ff8a49;
}
.feedback.active {
    z-index: 999;
}

#mask {
    display: none;
    position: fixed;
    z-index: 99;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
}

header {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    background-color: #fff;
}

header > .wrap {
    display: flex;
    align-items: center;
    padding-top: 10px;
}

header > .wrap .logo {
    margin-right: 1rem;
    padding-bottom: 10px;
}

header .menu-right {
    margin-left: auto;
}

header .menu > ul > li {
    padding: 8px 1.5rem;
}

header .logo a {
    width: 155px;
}
header .logo a img {
    max-width: 100%;
    height: auto;
}
header .search {
    position: relative;
}
header .search .btn-search {
    position: absolute;
    width: 22px;
    left: 12px;
    top: 8px;
}
header .search .btn-search svg {
    fill: #4aa2db;
}
header .search .search-box {
    width: 0;
    height: 40px;
    overflow: hidden;
    -moz-transition: width, 0.5s;
    -o-transition: width, 0.5s;
    -webkit-transition: width, 0.5s;
    transition: width, 0.5s;
}
header .search .search-box input {
    border: none;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    background-color: #f8f8f8;
    padding: 12px 20px 11px 42px;
    width: 210px;
}
header .search.active .search-box {
    width: 210px;
}
header .lang .lang-box .sub li a {
    padding: 10px;
    text-align: center;
}
header .member,
header .lang {
    position: relative;
    padding-left: 15px;
    margin-left: 5px;
    font-size: 16px;
    padding-right: 5px;
}
header .member::before,
header .lang::before {
    position: absolute;
    left: 0;
    top: 8px;
    width: 1px;
    height: 25px;
    background-color: #313131;
    content: "";
}
header .member .no-member li.dot::after {
    display: inline-block;
    vertical-align: top;
    content: "．";
    margin-top: 10px;
}
header .member .no-member a,
header .lang .lang-box .lang-selected {
    padding: 8px 5px;
    display: inline-block;
    font-size: 16px;
}
header .member .member-box,
header .lang .lang-box {
    position: relative;
    padding-bottom: 10px;
    padding-right: 16px;
}
header .member .member-box::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0d7";
    position: absolute;
    right: 0;
    top: 5px;
}
header .member .member-box .img {
    width: 40px;
    height: 40px;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    border: 2px solid #dddddd;
    overflow: hidden;
}
header .member .member-box .sub,
header .lang .lang-box .sub {
    position: fixed;
    top: 60px;
    background-color: #f9f9f9;
    z-index: -99;
    opacity: 0;
    pointer-events: none;
    margin-left: -20px;
}

header .lang .lang-box .sub {
    min-width: 80px;
}
header .member .member-box .sub li a {
    white-space: nowrap;
    padding: 10px 20px;
}
header .member .member-box .sub li a i {
    margin-right: 5px;
}
header #menu ul a {
    font-size: 16px;
    text-align: center;
}
header #menu ul a.active {
    position: relative;
}
header #menu ul a.active::before {
    position: absolute;
    left: 0;
    top: 0;
    height: 3px;
    width: 100%;
    content: "";
    background-color: #4aa2db;
}
header .menu .sub {
    position: fixed;
    top: 60px;
    background-color: #f9f9f9;
    text-align: right;
    z-index: -99;
    opacity: 0;
    pointer-events: none;
    margin-left: -40px;
}
header #menu .sub.active {
    z-index: 99;
    -moz-transition: all, 0.5s;
    -o-transition: all, 0.5s;
    -webkit-transition: all, 0.5s;
    transition: all, 0.5s;
    opacity: 1;
    pointer-events: auto;
}
header #menu .sub.active li a:hover {
    background-color: #eaf6fd;
}
header #menu .sub li a {
    text-align: left;
    padding: 0.7rem 1.5rem;
}
header #menu .sub h2 {
    font-size: 16px;
    color: #4aa2db;
    font-weight: 500;
    padding: 10px 15px;
}
header #menu .sub .route-col {
    border-left: 1px solid #f8f8f8;
    text-align: left;
}
header #menu .sub .route-col:first-child {
    border-left: none;
}
header #menu .sub .route-col a {
    text-align: left;
    padding: 10px 15px;
}
header #menu .sub .route-col a:before {
    display: none;
}
header #menu .sub .route-col a.active {
    background-color: #4aa2db;
    color: #fff;
}
header #menu .sub .route-col .country a {
    display: inline-block;
    vertical-align: top;
}
header #menu .sub .route-col .scrollbar {
    height: 200px;
}
header #menu .sub .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
header #menu .sub .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
    right: -6px;
}

.row-input {
    position: relative;
    margin-top: 15px;
}
.row-input input[type="text"],
.row-input input[type="password"],
.row-input input[type="number"],
.row-input input[type="date"] {
    width: 100%;
    padding: 10px 45px 10px 10px;
    border: 1px solid #dddddd;
    height: 40px;
}
.row-input .icon {
    display: inline-block;
    position: absolute;
    top: 9px;
    color: #999999;
}
.row-input .icon.icon-eye::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f06e";
}
.row-input .icon.active.icon-eye::after {
    content: "\f070";
}
.row-input a.icon {
    right: 15px;
}
.row-input.row-checkbox input[type="checkbox"] {
    display: none;
}
.row-input.row-checkbox input[type="checkbox"]:checked + label {
    background-color: #4aa2db;
}
.row-input.row-checkbox input[type="checkbox"]:checked + label::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f00c";
    margin-left: 3px;
    color: #fff;
    display: inline-block;
    vertical-align: top;
    margin-top: -1px;
}
.row-input.row-checkbox label {
    width: 21px;
    height: 21px;
    border: 1px solid #dddddd;
    display: inline-block;
    vertical-align: top;
}
.row-input.row-checkbox span {
    display: inline-block;
    vertical-align: top;
    padding: 0 5px;
}
.row-input.row-checkbox a {
    display: inline-block;
    vertical-align: top;
    color: #4aa2db;
    padding: 0 5px;
}

.checkbox-item input {
    display: none;
}
.checkbox-item input:checked + label::before {
    content: "\f14a";
    color: #4aa2db;
    font-weight: 900;
}
.checkbox-item label {
    display: block;
    padding-left: 40px;
    padding-right: 15px;
    position: relative;
    font-size: 16px;
    margin: 12px 0;
}
.checkbox-item label::before {
    position: absolute;
    font-family: "Font Awesome 5 Free";
    font-weight: 500;
    content: "\f0c8";
    left: 15px;
    top: -1px;
    color: #999999;
    font-size: 18px;
}

.container {
    padding-top: 60px;
    min-height: calc(100vh - 105px);
}

.container .section {
    padding: 50px 0;
}

.container .section + .section:not(.bg-b) {
    padding-top: 0;
}

.container .page .section {
    padding: 2rem 0;
}

.container .section:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
}
.container .section .page-content .top-block {
    position: relative;
}

.container .section .page-content .top-block h3 {
  font-size: 26px;
  margin-bottom: 1em;
}

.container .section .page-content .top-block p {
  margin-bottom: 1em;
}

.container .section .page-content .top-block a {
  display: inline-block;
  margin: 0 auto;
  border-bottom: 1px solid #03a9f4;
}

.container .section .page-content .top-block a:hover {
  background: #03a9f4;
  color: #fff;
  opacity: 0.9;
}

.container .section .page-content .top-block blockquote {
  font-weight: bold;
  font-size: 1.2em;
  padding: 0.8em 0 1.8em 0;
}

.container .section .page-content .top-block .page-title {
    font-size: 26px;
    position: relative;
    z-index: 0;
    padding-right: 150px;
    margin-bottom: 15px;
}
.container .section .page-content .top-block .share {
    position: absolute;
    right: 0;
    top: 5px;
    z-index: 5;
}
.container .section .page-content .top-block .share .btn-favourite {
    line-height: 1.3;
}
.container .section .page-content .top-block .share .btn-favourite::before {
    font-size: 24px;
}
.container .section .page-content .content {
    line-height: 1.8;
}
.container .section .page-content .content p {
    margin: 1.5em auto;
    font-size: 17px;
    line-height: 36px;
}
.container .section .page-content .content p img {
  display: inline-block;
  /* padding-right: 10px; */
  padding-left: 10px;
  padding-right: 10px;
}
.container .section .page-content .content p img:first-child {
  padding-left: 0;
}
.container .section .page-content .content p img + img {
  padding-right: 0;
}
.container .section .page-content .content ul {
    list-style: disc;
    margin-left: 20px;
    margin-bottom: 15px;
}
.container .section .page-content .content a {
    color: #4aa2db;
    display: inline;
}
.container .section .page-content .content table {
    border-collapse: collapse;
    border: 1px solid #ddd;
    width: 100% !important;
}
.container .section .page-content .content table th,
.container .section .page-content .content table td {
    border: 1px solid #ddd;
    padding: 5px;
}
.container .section .page-content .video-player {
    margin-top: 15px;
    margin-bottom: 15px;
    text-align: center;
    position: relative;
    height: calc(1160px * 315 / 560);
}
.container .section .page-content .video-player iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 5;
    left: 0;
    top: 0;
}
.container .section .page-content .bottom {
    margin-top: 5px;
    padding-bottom: 5px;
}
.container .section .page-content .bottom .btn-favourite {
    line-height: 1.3;
}
.container .section .page-content .bottom .btn-favourite::before {
    font-size: 24px;
}
.container .section .page-content .btn-block {
    border-top: 1px solid #dddddd;
    padding-top: 20px;
}
.container .section .page-content .block {
    margin-bottom: 30px;
}
.container .section .main-list .card .img:not(.popup) {
    padding-bottom: 56.25%;
}
.container .section .main-list > label {
    width: 100%;
    text-align: center;
    padding: 10px;
}
.container #sidebar {
    overflow: hidden;
}
.container #sidebar .sidebar-box {
    margin-bottom: 20px;
}
.container #sidebar .sidebar-box h2 {
    font-size: 18px;
    padding: 5px 10px;
    color: #fff;
    position: relative;
    z-index: 0;
}
.container #sidebar .sidebar-box h2::after {
    position: absolute;
    left: 0;
    bottom: -15px;
    content: "";
    background: url(../img/template/shadow.png) no-repeat center bottom;
    background-size: 100% auto;
    z-index: -1;
    width: 100%;
    height: 15px;
}
.container #sidebar .sidebar-box h2.side-b {
    background-color: #2b689c;
    *zoom: 1;
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF2B689C', endColorstr='#FF4AA2DB');
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJiNjg5YyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRhYTJkYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==");
    background-size: 100%;
    background-image: -webkit-gradient(
        linear,
        0% 50%,
        100% 50%,
        color-stop(0%, #2b689c),
        color-stop(100%, #4aa2db)
    );
    background-image: -moz-linear-gradient(left, #2b689c 0%, #4aa2db 100%);
    background-image: -webkit-linear-gradient(left, #2b689c 0%, #4aa2db 100%);
    background-image: linear-gradient(to right, #2b689c 0%, #4aa2db 100%);
}
.container #sidebar .sidebar-box h2.side-r {
    background-color: #ec681f;
    *zoom: 1;
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFEC681F', endColorstr='#FFFF8A49');
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VjNjgxZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmOGE0OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==");
    background-size: 100%;
    background-image: -webkit-gradient(
        linear,
        0% 50%,
        100% 50%,
        color-stop(0%, #ec681f),
        color-stop(100%, #ff8a49)
    );
    background-image: -moz-linear-gradient(left, #ec681f 0%, #ff8a49 100%);
    background-image: -webkit-linear-gradient(left, #ec681f 0%, #ff8a49 100%);
    background-image: linear-gradient(to right, #ec681f 0%, #ff8a49 100%);
}
.container #sidebar .sidebar-box .sidebar-list .sidebar-card {
    position: relative;
}
.container #sidebar .sidebar-box .sidebar-list .sidebar-card .list-card {
    display: block;
    padding: 10px;
}
.container #sidebar .sidebar-box .sidebar-list .sidebar-card .list-card:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
}
.container #sidebar .sidebar-box .sidebar-list .sidebar-card .list-card .img {
    display: block;
    float: left;
    width: 85px;
    height: 85px;
    overflow: hidden;
    margin-right: 10px;
    background-color: #000;
}
.container
    #sidebar
    .sidebar-box
    .sidebar-list
    .sidebar-card
    .list-card
    .img.img-icon.video::after {
    width: 24px;
    height: 17px;
    margin-left: -12px;
    margin-top: -9px;
}
.container #sidebar .sidebar-box .sidebar-list .sidebar-card .list-card .text {
    overflow: hidden;
}
.container
    #sidebar
    .sidebar-box
    .sidebar-list
    .sidebar-card
    .list-card
    .text
    h3 {
    margin-bottom: 3px;
    padding-right: 20px;
    display: block;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #313131;
}
.container
    #sidebar
    .sidebar-box
    .sidebar-list
    .sidebar-card
    .list-card
    .text
    p {
    font-size: 12px;
    color: #999999;
    line-height: 18px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-height: 36px;
    margin-bottom: 3px;
}
.container
    #sidebar
    .sidebar-box
    .sidebar-list
    .sidebar-card
    .list-card
    .text
    .info-block {
    font-size: 12px;
}
.container
    #sidebar
    .sidebar-box
    .sidebar-list
    .sidebar-card
    .list-card
    .text
    .info-block
    > span {
    padding-top: 0;
    padding-bottom: 0;
}
.container
    #sidebar
    .sidebar-box
    .sidebar-list
    .sidebar-card
    .list-card
    .text
    .info-block
    > span::after {
    top: 0;
}
.container #sidebar .sidebar-box .sidebar-list .sidebar-card:nth-child(2n) {
    background-color: #f8f8f8;
}
.container #sidebar .sidebar-box .sidebar-list .sidebar-card .btn-favourite {
    position: absolute;
    right: 10px;
    top: 8px;
    z-index: 2;
}

.side-main > h2 {
    margin-top: 32px;
}

.container .side-main .col3 .img {
    padding-bottom: 62.5%;
}

.main-list {
    display: flex;
    flex-wrap: wrap;
}

.btn-top {
    position: fixed;
    z-index: 99;
    width: 50px;
    height: 50px;
    background-color: #4aa2db;
    cursor: pointer;
    right: 20px;
    bottom: 10vh;
    text-align: center;
    padding: 12px;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
    opacity: 0.6;
    display: none;
}
.btn-top svg {
    display: inline-block;
    vertical-align: top;
    width: 12px;
    fill: #fff;
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

footer {
    font-size: 14px;
    padding: 10px 0 5px;
    background-color: #f8f8f8;
}
footer .bottom-info .logo {
    margin-right: 20px;
    width: 200px;
}
footer .bottom-info .info {
    margin-top: 22px;
}
footer .bottom-info .info li {
    display: inline-block;
    vertical-align: top;
}
footer .bottom-info .info li .icon {
    display: inline-block;
    vertical-align: top;
    width: 18px;
    text-align: center;
    margin-right: 5px;
    color: #4aa2db;
}
footer .bottom-info .info li a {
    display: inline;
}
footer .bottom-nav {
    margin-top: 17px;
}
footer .bottom-nav li {
    display: inline-block;
    vertical-align: top;
}
footer .bottom-nav li a {
    padding: 5px 10px;
}

footer .copyright {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid #999999;
    color: #999999;
    font-size: 12px;
}

.popup-wrap .window {
    margin: 0 auto;
    max-width: 480px;
    background-color: #fff;
    position: relative;
    padding: 20px 40px;
    border-radius: 10px;
}
.popup-wrap .window h2 {
    background-color: #4aa2db;
    color: #fff;
    font-size: 21px;
    letter-spacing: 2px;
    padding: 10px 20px;
    margin: -20px -40px 20px;
    border-radius: 10px 10px 0 0;
}
.popup-wrap .window .btn-close {
    width: 16px;
    height: 16px;
    position: absolute;
    z-index: 10;
    right: 20px;
    top: 14px;
}
.popup-wrap .window .btn-close svg {
    fill: #fff;
}
.popup-wrap .window .btn-block {
    margin-top: 15px;
}
.popup-wrap .window .btn-block .btn {
    width: 100%;
    margin: 5px 0;
    font-size: 16px;
    padding-top: 8px;
    padding-bottom: 7px;
}
.popup-wrap .window .line {
    margin-top: 15px;
    margin-bottom: 15px;
    position: relative;
    width: 100%;
    color: #999999;
    z-index: 0;
}
.popup-wrap .window .line::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    background-color: #dddddd;
    left: 0;
    top: 15px;
    z-index: 1;
}
.popup-wrap .window .line span {
    display: inline-block;
    background-color: #fff;
    padding: 5px 10px;
    position: relative;
    z-index: 2;
}
.popup-wrap .window .icon-block a {
    width: 45px;
    height: 45px;
    margin: 0 10px;
    background-repeat: no-repeat;
    background-position: center center;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    opacity: 0.8;
}
.popup-wrap .window .icon-block a.signInFb {
    background-image: url(../img/template/icon_fb.svg);
}
.popup-wrap .window .icon-block a.signInGoogle {
    background-image: url(../img/template/icon_google.svg);
}
.popup-wrap .window .link-block {
    margin-top: 20px;
}
.popup-wrap .window .link-block a {
    color: #4aa2db;
    padding: 0 15px;
}
.popup-wrap .window .link-block a:first-child {
    border-right: 1px solid #999999;
}

#banner {
    color: #fff;
}
.banner .slider-item {
    position: relative;
    background-size: cover;
    background-color: #eee;
    height: 560px;
}

.banner .slider-item .text {
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 20px 30px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: left;
    letter-spacing: 0.6px;
}

.banner .slider-item .text > div {
    max-width: 1020px;
    width: 100%;
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
}

#banner.banner .slider .slick-arrow {
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 50%;
}
#banner.banner .slider .slick-arrow svg {
    fill: #fff;
}
#banner.banner .slider .slick-prev {
    left: -50px;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
}
#banner.banner .slider .slick-next {
    right: -50px;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
}
#banner.page-banner {
    background: url(../img/template/banner_bg.png) repeat left top;
    padding-bottom: 31.25%;
}
#banner.page-banner.bgImg {
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
#banner.page-banner.bgImg::after {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 100%;
    height: 100%;
    z-index: 1;
}
#banner.page-banner .page-title {
    position: relative;
    z-index: 2;
    font-size: 28px;
    font-weight: 400;
    padding-top: 45px;
}

.bgImg {
    background-position: center center;
    background-repeat: no-repeat;
}
.bgImg .bgImg-img {
    display: none;
}

.bgImg-img {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.bgImg-img img {
    display: none;
}

.bg-b {
    background-color: #eaf6fd;
}

.textB {
    color: #4aa2db;
}

.tag-block {
    background-color: #f8f8f8;
    padding: 20px 15px;
    margin: 1em 0;
}

.tag-block .tag {
    position: relative;
    display: inline-block;
    background-color: #fff !important;
    color: #333;
    border: 1px solid #e8e8e8;
    font-size: 12px;
    line-height: 1;
    padding: 8px 12px;
    margin: 0 2px 5px 0;
    letter-spacing: 0.4px;
}

.info-block {
    color: #999;
    font-size: 13px;
}
.info-block > * {
    display: inline-block;
    vertical-align: top;
    padding: 0 5px 0 10px;
    position: relative;
}
.info-block > *::after {
    display: inline-block;
    vertical-align: top;
    content: "|";
    position: absolute;
    left: 0;
    top: -1px;
}
.info-block > *:first-child {
    padding-left: 0;
}
.info-block > *:first-child::after {
    display: none;
}
.info-block .author {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
}

.title-tag {
    background-color: #2b689c;
    color: #fff;
    display: inline-block;
    vertical-align: top;
    padding: 5px 20px;
    position: relative;
    z-index: 0;
    font-size: 16px;
}

.row-main {
    display: flex;
    justify-content: space-between;
}

.row-main.row-main-reverse {
    flex-direction: row-reverse;
}

.row-block {
    margin: 0 -10px;
}
.row-block:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
}
.row-block [class*="col"] {
    padding: 10px;
}
.row-block .col2 {
    width: calc(100% / 2);
}
.row-block .col4 {
    width: calc(100% / 4);
}
.row-block .col3 {
    width: calc(100% / 3);
}
.row-block .col1 {
    width: 100%;
}

.title-line {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.title-line::before {
    width: 30%;
    height: 4px;
    content: "";
    background-color: #4aa2db;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 5;
}
.title-line::after {
    width: 100%;
    height: 4px;
    content: "";
    background-color: #f8f8f8;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
}

.title {
    font-size: 20px;
    font-weight: 400;
    color: #4aa2db;
}
.title.title-line::after {
    background-color: #eaf6fd;
}

.img-icon.video {
    position: relative;
    background-color: #000;
    z-index: 0;
}
.img-icon.video::before {
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    content: "";
    z-index: 1;
}

.img-icon.video .play-btn {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.48);
    border: 0.05em solid #fff;
    border-radius: 100%;
    font-size: 40px;
    z-index: 1;
    -webkit-box-shadow: 0 0 0.15em rgb(0 0 0 / 40%);
    box-shadow: 0 0 0.15em rgb(0 0 0 / 40%);
}

.img-icon.video .play-btn i {
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    font-size: 60%;
    color: #fff;
}

.slider {
    position: relative;
    z-index: 0;
    overflow: hidden;
}
.slider .slick-arrow {
    width: 50px;
    height: 50px;
    padding: 0;
    border: none;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    z-index: 1;
    background-color: #4aa2db;
    cursor: pointer;
    padding: 12px;
}
.slider .slick-arrow svg {
    display: inline-block;
    vertical-align: top;
    width: 12px;
    fill: #fff;
}
.slider .slick-prev {
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.slider.slider-carousel {
    padding-left: 60px;
    padding-right: 60px;
}
.slider.slider-carousel .slick-prev {
    left: 0;
}
.slider.slider-carousel .slick-next {
    right: 0;
}

.slider-dot .slick-dots {
    text-align: center;
    margin-top: 0;
}
.slider-dot .slick-dots li {
    display: inline-block;
    vertical-align: top;
    margin: 0 3px;
}
.slider-dot .slick-dots li button {
    background: #eaf6fd;
    padding: 0;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    width: 12px;
    height: 12px;
    border: none;
    font-size: 0;
}
.slider-dot .slick-dots li.slick-active button {
    background: #4aa2db;
}

.card {
    background-color: #fff;
    display: block;
    /* border: 1px solid #dddddd; */
}
.card .img {
    overflow: hidden;
    position: relative;
}

.card .img.popup {
  min-height: 32px;
}

.card .img.img-icon.video::after {
    width: 50px;
    height: 36px;
    margin-left: -25px;
    margin-top: -18px;
}
.card .img .tag {
    background-color: #ec681f;
    color: #fff;
    font-size: 12px;
    display: inline-block;
    padding: 5px 10px 3px;
    position: absolute;
    left: 0;
    top: 0;
}
.card .img .date {
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 12px;
    display: inline-block;
    padding: 2px 6px 0;
    position: absolute;
    right: 0;
    bottom: 0;
}
.card .img .date::before {
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f017";
    margin-right: 5px;
}
.card .text {
    padding: 12px;
    position: relative;
}
.card .text .no {
    display: none;
}
.card .text .card-title {
    margin-bottom: 5px;
    position: relative;
}
.card .text .card-title a {
    font-size: 18px;
    line-height: 24px;
    min-height: 48px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-height: 48px;
    padding-right: 25px;
    display: block;
}

.card .text .card-title a.add-favor {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
}

.card .text .card-title a.add-favor:hover::before {
    content: "\f004";
    color: #f3a478;
}

.card .text p {
    font-size: 14px;
    color: #666;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    margin-top: 12px;
    margin-bottom: 24px;
}

.card .text .bottom .link {
    padding: 5px;
}

.card .text .bottom .btn {
    margin-top: 10px;
    width: 100%;
}

.card .text .btn-favourite {
    position: absolute;
    right: 12px;
    top: 8px;
    z-index: 2;
}
.card .text .btn-favourite::before {
    font-size: 18px;
}
.card.link-btn .text .card-title {
    font-size: 18px;
}
.card.link-btn .text .card-title a {
    padding-right: 0;
}
.card.topping {
    background-color: #eaf6fd;
}
.card.topping .img {
    /* padding-bottom: 62.5%; */
    height: 540px;
}
.card.topping .img.img-icon.video::after {
    width: 70px;
    height: 50px;
    margin-left: -35px;
    margin-top: -25px;
}
.card.topping .text {
    padding: 20px;
    position: relative;
}
.card.topping .text .card-title {
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
.card.topping .text .card-title a {
    font-size: 18px;
    min-height: auto;
    max-height: 48px;
}
.card.topping .text .card-title::before {
    width: 30%;
    height: 4px;
    content: "";
    background-color: #4aa2db;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 5;
}
.card.topping .text .card-title::after {
    width: 100%;
    height: 4px;
    content: "";
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
}
.card.topping .text p {
    min-height: auto;
    max-height: 88px;
}
.card.topping .text .bottom {
    margin-top: 10px;
}
.card.topping .text .bottom .info-block {
    margin-top: 5px;
}
.card.topping .text .bottom .btn {
    margin-top: 0;
    width: auto;
    float: right;
}
.card.topping .text .btn-favourite {
    right: 20px;
    top: 18px;
}
.card.topping .text .btn-favourite::before {
    font-size: 20px;
}
.card.card-block {
  border: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all .2s cubic-bezier(.645,.045,.355,1);
}
.card.card-block:hover {
  box-shadow: 0 6px 16px -8px #00000014, 0 9px 28px #0000000d, 0 12px 48px 16px #00000008;
}

.icon-favourite::before {
    font-family: "Font Awesome 5 Free";
    content: "\f004";
    color: #ec681f;
    font-size: 16px;
    transition: all 0.3s ease;
}
.icon-favourite.active {
    -moz-animation: rubberBand 1s linear;
    -webkit-animation: rubberBand 1s linear;
    animation: rubberBand 1s linear;
}
.icon-favourite.active::before {
    content: "\f004";
    font-weight: 900;
}

.pagination {
    margin-top: 30px;
}
.pagination a,
.pagination span {
    min-width: 25px;
    height: 25px;
    line-height: 25px;
    border: 1px solid #cccccc;
    color: #999999;
}
.pagination > a,
.pagination > span {
    display: inline-block;
    vertical-align: top;
}
.pagination > ul {
    display: inline-block;
    vertical-align: top;
}
.pagination > ul li {
    display: inline-block;
    vertical-align: top;
}
.pagination > ul li.active span {
    background-color: #4aa2db;
    color: #fff;
}
.pagination > ul li a,
.pagination > ul li span {
    display: block;
}

.tabs .tabs-nav {
    background-color: #eaf6fd;
    margin-bottom: 20px;
    white-space: nowrap;
    overflow-y: auto;
}
.tabs .tabs-nav li {
    min-width: 100px;
}
.tabs .tabs-nav li a {
    display: block;
    padding: 10px;
    font-size: 16px;
    color: #4aa2db;
    text-align: center;
}
.tabs .tabs-nav li a .icon {
    display: block;
    font-size: 18px;
}
.tabs .tabs-nav li a.active {
    background-color: #fff;
    position: relative;
}
.tabs .tabs-nav li a.active::before {
    height: 3px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    background-color: #4aa2db;
}
.tabs .tabs-content .tabs-block {
    display: none;
}
.tabs .tabs-content .tabs-block.active {
    display: block;
}

.route-list {
    color: #999999;
}
.route-list li {
  margin: 0 10px;
}
.route-list li:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    width: 25px;
    text-align: center;
    display: inline-block;
    vertical-align: top;
}
.route-list li.icon1:before {
    content: "\f6fc";
}
.route-list li.icon2:before {
    content: "\f885";
}
.route-list li.icon3:before {
    content: "\f884";
}
.route-list li.icon4:before {
    content: "\f31e";
}
.route-list li.icon5:before {
    content: "\f7e5";
}
.route-list li.icon6:before {
    content: "\f7e5";
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.route-list li.icon7:before {
    content: "\f0c0";
}
.route-list li .star-list {
    color: #ffd100;
}
.route-list li .star-list i {
    margin-right: 1px;
}

.route-title {
  font-size: 1.35em;
  line-height: 1.5;
  font-weight: bold;
}

.route-title .tag {
  font-size: 13px;
  line-height: 1.5;
  font-weight: normal;
  background: #ec681f;
  padding: 5px 10px 3px;
  color: #fff;
}

.route-tag {
    margin-top: 10px;
    min-height: 22px;
    overflow: hidden;
}
.route-tag a {
    display: inline-block;
    vertical-align: top;
    background-color: #f8f8f8 !important;
    color: #333;
    padding: 0 8px;
    font-size: 12px;
    border: 1px solid #e8e8e8;
}
.route-tag a::before {
    content: "#";
}

.innerWrap {
    max-width: 600px;
    width: 100%;
    margin: 80px auto 0;
    padding: 75px 40px 40px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 4px solid #4aa2db;
    position: relative;
}
.innerWrap:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
}
.innerWrap .top-block {
    position: absolute;
    width: 170px;
    height: 170px;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    overflow: hidden;
    border: 5px solid #eaf6fd;
    left: 50%;
    top: -85px;
    margin-left: -85px;
    background-color: #4aa2db;
}
.innerWrap .top-block .img {
    width: 160px;
    height: 160px;
    background-color: #4aa2db;
    background-image: url(../img/member/photo.png);
    background-size: cover;
}
.innerWrap .top-block .photo-upload {
    padding: 5px;
    font-size: 14px;
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: center;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    pointer-events: none;
}
.innerWrap .top-block #file-upload {
    display: none;
}
.innerWrap .top-block svg {
    width: 70px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -35px;
    margin-top: -46px;
    fill: #fff;
}
.innerWrap .row-input.email {
    font-size: 20px;
}
.innerWrap .row-input div.icon {
    left: 6px;
    color: #4aa2db;
    font-size: 16px;
    top: 6px;
}
.innerWrap .row-input input[type="text"],
.innerWrap .row-input input[type="password"],
.innerWrap .row-input input[type="number"],
.innerWrap .row-input input[type="date"] {
    border: none;
    border-bottom: 2px solid #dddddd;
    font-size: 16px;
    padding-left: 30px;
}
.innerWrap .row-input.row-radio {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background-color: #cccccc;
    text-align: center;
    font-size: 0;
    margin-top: 25px;
}
.innerWrap .row-input.row-radio input[type="radio"] {
    display: none;
}
.innerWrap .row-input.row-radio input[type="radio"]:checked + label {
    background-color: #4aa2db;
}
.innerWrap .row-input.row-radio label {
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    text-align: center;
    padding: 10px;
    color: #fff;
    width: calc(100% / 3);
    cursor: pointer;
}
.innerWrap .row-input .ui-datepicker-trigger {
    display: inline-block;
    position: absolute;
    right: 15px;
    font-size: 16px;
    top: 11px;
    font-size: 0;
    background: none;
    border: none;
    padding: 0;
    color: #999999;
}
.innerWrap .row-input .ui-datepicker-trigger::before {
    content: "\f073";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 16px;
}
.innerWrap .btn-block {
    margin-top: 35px;
}
.innerWrap .btn-block .btn {
    font-size: 16px;
    width: 150px;
    margin: 0 10px;
}

.feeback {
    margin-top: 10px;
    padding: 5px 10px;
}
.feeback::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 5px;
}
.feeback.error {
    background-color: #fadbda;
    color: #ec681f;
}
.feeback.error::before {
    content: "\f06a";
}
.feeback.success {
    background-color: #d6ffed;
    color: #42cea1;
}
.feeback.success::before {
    content: "\f058";
}

.top-bar {
    border-bottom: 1px solid #999999;
    position: relative;
}
.top-bar:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
}
.top-bar .list-name {
    font-size: 0;
    display: none;
    color: #999999;
}
.top-bar .list-name div {
    font-size: 14px;
    display: inline-block;
    vertical-align: top;
    padding: 6px 10px;
}
.top-bar .list-name .no {
    width: 10%;
}
.top-bar .list-sort {
    padding: 5px 0;
}
.top-bar .list-sort span,
.top-bar .list-sort a {
    display: inline-block;
    vertical-align: middle;
}
.top-bar .list-sort .sort {
    padding: 0 20px 0 10px;
    border: 1px solid #999999;
    color: #999999;
    position: relative;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
.top-bar .list-sort .sort.active {
    border-color: #4aa2db;
    color: #4aa2db;
}
.top-bar .list-sort .sort::before {
    position: absolute;
    right: 10px;
    top: 0;
    content: "\f30c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
.top-bar .list-sort .sort.down::before {
    content: "\f309";
}
.top-bar .list-sort .sort.init {
    padding-right: 10px;
}
.top-bar .list-sort .sort.init::before {
    display: none;
}
.top-bar .btn-group {
    position: absolute;
    right: 7px;
    top: 4px;
}
.top-bar .btn-group a {
    display: inline-block;
    vertical-align: top;
    font-size: 18px;
    color: #999999;
    margin: 0 5px;
}
.top-bar .btn-group a.active {
    color: #4aa2db;
}
.top-bar .btn-group a.mapDisable {
    cursor: default;
}

.list-card.list-style .top-bar .list-name {
    display: block;
}
.list-card.list-style .top-bar .list-sort {
    display: none;
}
.list-card.list-style .row-block {
    margin: 0;
}
.list-card.list-style .row-block .col4 {
    width: 100%;
    display: block;
    padding: 0;
}
.list-card.list-style .row-block .col4:nth-child(2n + 1) .card {
    background-color: #f8f8f8;
}
.list-card.list-style .card {
    border: none;
}
.list-card.list-style .card .img {
    display: none;
}
.list-card.list-style .card .text {
    font-size: 0;
    padding: 0;
}
.list-card.list-style .card .text .list-td {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    padding: 10px;
}
.list-card.list-style .card .text .card-title {
    margin-bottom: 0;
    padding: 10px 40px 10px 10px;
}
.list-card.list-style .card .text .card-title a {
    display: block;
    min-height: auto;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
}
.list-card.list-style .card .text p {
    display: none;
}
.list-card.list-style .card .text .bottom {
    display: none;
}
.list-card.list-style .card .text .route-list,
.list-card.list-style .card .text .route-tag {
    display: none;
}

.list-map {
    width: 100%;
    height: 0;
    position: relative;
    overflow: hidden;
    -moz-transition: height, 0.5s;
    -o-transition: height, 0.5s;
    -webkit-transition: height, 0.5s;
    transition: height, 0.5s;
}
.list-map.active {
    height: 480px;
    -moz-transition: height, 0.5s;
    -o-transition: height, 0.5s;
    -webkit-transition: height, 0.5s;
    transition: height, 0.5s;
}
.list-map .map {
    position: absolute;
    width: 100%;
    height: 480px;
    left: 0;
    top: 0;
    z-index: 1;
}
.list-map .btn-mapClose {
    position: absolute;
    color: #fff;
    right: 0;
    top: 0;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    z-index: 5;
}
.list-map .btn-mapClose i {
    font-size: 18px;
}
.list-map .btn-mapClose span {
    display: block;
}

.hot-block .slider-block {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

.slider-block .card .img {
    padding-bottom: 56.25%;
}

.share li {
    display: inline-block;
    vertical-align: top;
    width: 30px;
    text-align: center;
}
.share li a svg {
    fill: #aaaaaa;
}
.share li a.icon-favourite {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
}
.share #copyInput {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    position: fixed;
    z-index: -999;
}

#iconPopup .window {
    padding: 20px;
}
#iconPopup .window .window-box {
    max-height: 50vh;
    padding: 0 5px;
}
#iconPopup .window .window-box .row-block .col2:first-child {
    border-right: 1px solid #dddddd;
}
#iconPopup h2 {
    margin: -20px -20px 10px;
}
#iconPopup h3 {
    color: #2b689c;
    font-size: 16px;
}
#iconPopup ul li {
    padding-left: 40px;
    position: relative;
    font-size: 16px;
    margin: 15px 0;
}
#iconPopup ul li .icon {
    position: absolute;
    left: 0;
    width: 30px;
    top: -3px;
}

.ui-datepicker {
    background-color: #fff;
    padding: 5px;
    width: 280px;
    border: 1px solid #dddddd;
    -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
.ui-datepicker .ui-datepicker-header {
    background-color: #4aa2db;
    padding: 5px;
    position: relative;
    text-align: center;
    color: #fff;
}
.ui-datepicker .ui-datepicker-header .ui-corner-all {
    position: absolute;
    top: 10px;
    font-size: 0;
    width: 13px;
    height: 13px;
    padding: 2px;
    cursor: pointer;
    background-color: #fff;
    -webkit-mask: url(../img/template/icon_arrowRight.svg) no-repeat 50% 50%;
    mask: url(../img/template/icon_arrowRight.svg) no-repeat 50% 50%;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    opacity: 0.8;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev {
    left: 10px;
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-next {
    right: 10px;
}
.ui-datepicker .ui-datepicker-calendar {
    width: 100%;
}
.ui-datepicker .ui-datepicker-calendar thead {
    background-color: #f8f8f8;
}
.ui-datepicker .ui-datepicker-calendar th,
.ui-datepicker .ui-datepicker-calendar td {
    text-align: center;
    padding: 2px;
}
.ui-datepicker .ui-datepicker-calendar th span,
.ui-datepicker .ui-datepicker-calendar th a,
.ui-datepicker .ui-datepicker-calendar td span,
.ui-datepicker .ui-datepicker-calendar td a {
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 26px;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
}
.ui-datepicker .ui-datepicker-calendar th.ui-datepicker-today a,
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today a {
    border: 1px solid #4aa2db;
}
.ui-datepicker .ui-datepicker-calendar th.ui-datepicker-current-day a,
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day a {
    background-color: #4aa2db;
    color: #fff;
}

.mCS-minimal.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
    background-color: #4aa2db;
}
.mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: #4aa2db;
}
.mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_draggerRail {
    background-color: #dddddd;
    width: 4px;
}
.mCS-minimal.mCSB_scrollTools
    .mCSB_dragger.mCSB_dragger_onDrag
    .mCSB_dragger_bar,
.mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
    background-color: #4aa2db;
}

.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
.mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    width: 5px;
    right: 5px;
    margin: 0;
}

.home .home-block h3 {
    font-size: 26px;
    font-weight: 500;
    line-height: 32px;
}

.home .home-block .row-block > .text {
    position: relative;
    overflow: hidden;
}

.home .home-block .row-block > .img > .bgImg-img {
    padding-bottom: 62.5%;
}

.home .home-block .btn-block {
    position: absolute;
    width: calc(100% - 10px);
    bottom: 0;
    left: 10px;
}

#home .home-block .btn-block:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
}
#home .home-block .btn-block .info-block {
    margin-top: 5px;
}
#home .home-block .img-icon.video::after {
    width: 70px;
    height: 50px;
    margin-left: -35px;
    margin-top: -25px;
}
#home .article-block .gallery-block a .img {
    position: relative;
    z-index: 0;
    overflow: hidden;
    background-color: #000;
}
#home .video-block a .img-icon.video::after {
    width: 50px;
    height: 36px;
    margin-left: -25px;
    margin-top: -18px;
}
.home .gallery-block {
    margin: 24px -12px 0 -12px;
}

.home .gallery-block a {
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 32px;
}

.home .gallery-block a:nth-last-child(-n + 3) {
    padding-bottom: 0;
}

.home .gallery-block a .img {
    padding-bottom: 62.5%;
    margin-bottom: 16px;
}
.home .gallery-block a span {
    display: block;
}
.home .gallery-block a .text {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 1.8px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
}

#tag .tabs .tabs-nav li {
    width: calc(100% / 3);
}

#password .innerWrap {
    padding-top: 90px;
}
#password .innerWrap .row-input input[type="text"],
#password .innerWrap .row-input input[type="password"] {
    padding-left: 10px;
}

#favourite .tabs .tabs-nav li {
    width: calc(100% / 7);
}
#favourite .list-card.list-style .no {
    width: 10%;
}
#favourite .list-card.list-style .card-title,
#favourite .list-card.list-style .name {
    width: 90%;
}
#favourite .list-card.list-style .card-title a,
#favourite .list-card.list-style .name a {
    padding-right: 0;
}
#favourite .list-card.list-style .card-name {
    width: 40%;
}
#favourite .list-card.list-style .card-service {
    width: 50%;
    padding-right: 40px;
}
#favourite .list-card.list-style .name a,
#favourite .list-card.list-style .card-name a {
    padding-right: 0;
}
#favourite .list-card.list-style .name a.sort,
#favourite .list-card.list-style .card-name a.sort {
    padding-right: 14px;
    position: relative;
    display: inline-block;
}
#favourite .list-card.list-style .name a.sort::before,
#favourite .list-card.list-style .card-name a.sort::before {
    position: absolute;
    right: 0;
    top: 0;
    content: "\f0de";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #dddddd;
}
#favourite .list-card.list-style .name a.sort::after,
#favourite .list-card.list-style .card-name a.sort::after {
    position: absolute;
    right: 0;
    bottom: 0;
    content: "\f0dd";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #dddddd;
}
#favourite .list-card.list-style .name a.sort.up::before,
#favourite .list-card.list-style .card-name a.sort.up::before {
    color: #4aa2db;
}
#favourite .list-card.list-style .name a.sort.down::after,
#favourite .list-card.list-style .card-name a.sort.down::after {
    color: #4aa2db;
}

#route .location-block .title-tag::before {
    content: "\f3c5";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
}
#route .route-slider {
    padding: 0 25px;
}
#route .route-slider .slick-prev {
    left: 0;
}
#route .route-slider .slick-next {
    right: 0;
}
#route .route-slider .slider-item {
    background-color: #eaf6fd;
}
#route .route-slider .slider-item:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
}
#route .route-slider .slider-item .img {
    float: left;
    width: 55%;
    height: 406px;
}
#route .route-slider .slider-item .img .bgImg-img {
    height: 406px;
}
#route .route-slider .slider-item .text {
    overflow: hidden;
    padding: 18px 30px;
    position: relative;
    height: 406px;
}
#route .route-slider .slider-item .text .tag {
    background-color: #ec681f;
    color: #fff;
    font-size: 14px;
    display: inline-block;
    padding: 5px 10px 3px;
    margin-bottom: 12px;
}
#route .route-slider .slider-item .text .card-title {
    margin-bottom: 5px;
    padding-bottom: 13px;
}
#route .route-slider .slider-item .text .card-title a {
    font-size: 20px;
    line-height: 24px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-height: 48px;
    display: block;
}
#route .route-slider .slider-item .text .card-title::after {
    background-color: #fff;
}
#route .route-slider .slider-item .text .route-list {
    font-size: 16px;
    margin-bottom: 6px;
    margin-top: 10px;
}
#route .route-slider .slider-item .text .route-list li {
    margin: 3px 0;
}
#route .route-slider .slider-item .text .route-list li::before {
    width: 30px;
}
#route .route-slider .slider-item .text .tag-block {
    height: 38px;
    overflow: hidden;
}
#route .route-slider .slider-item .text .tag-block .tag {
    font-size: 12px;
    margin-bottom: 0;
    padding-left: 30px;
}
#route .route-slider .slider-item .text .bottom {
    margin-top: 6px;
}
#route .route-slider .slider-item .text .bottom .info-block {
    margin-top: 3px;
}
#route .route-slider .slider-item .text .btn-favourite {
    position: absolute;
    z-index: 2;
    right: 30px;
    top: 19px;
}
#route .route-slider .slider-item .text .btn-favourite::before {
    font-size: 24px;
}
#route .route-section .slider-item {
    background-color: transparent;
    margin-bottom: 40px;
}
#route .route-section .slider-item .text {
    padding-right: 0;
}
#route .route-section .slider-item .text .card-title::after {
    background-color: #eaf6fd;
}
#route .route-section .slider-item .text .bottom {
    border-top: 1px solid #dddddd;
    padding-top: 15px;
    margin-bottom: 0;
    padding-bottom: 0;
}
#route .route-section .slider-item .text .bottom .share {
    display: inline-block;
    vertical-align: top;
    margin-top: 5px;
}
#route .route-section .tabs .tabs-nav li {
    width: calc(100% / 3);
}
#route .route-section .download-list {
    margin-bottom: 25px;
    display: none;
}
#route .route-section .download-list li {
    border-bottom: 1px dashed #dddddd;
}
#route .route-section .download-list li:nth-child(2n + 1) {
    background-color: #f8f8f8;
}
#route .route-section .download-list li .name {
    width: 80%;
    padding: 5px 10px;
    background-color: #4aa2db;
    color: #fff;
}
#route .route-section .download-list li .download {
    width: 20%;
    padding: 5px 10px;
    background-color: #4aa2db;
    color: #fff;
    text-align: right;
}
#route .route-section .download-list li a {
    display: block;
    padding: 5px 10px;
    position: relative;
}
#route .route-section .download-list li a::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f381";
    position: absolute;
    color: #4aa2db;
    right: 14px;
    top: 5px;
}
#route .route-section #mapInfo .top-bar {
    border-bottom: none;
}
#route .route-section #mapInfo p {
    margin: 8px 0;
}
#route .route-section #mapInfo .btnMapSide.active {
    color: #4aa2db;
}
#route .route-section #mapInfo .list-map.sideOpen .mapSide {
    right: 0;
    -moz-transition: right, 0.5s;
    -o-transition: right, 0.5s;
    -webkit-transition: right, 0.5s;
    transition: right, 0.5s;
}
#route .route-section #mapInfo #routeMap img {
    max-width: 100%;
    height: auto;
    display: none;
}
#route .route-section #mapInfo #routeMap .canvasBox {
    height: 100%;
    min-width: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
}
#route .route-section #mapInfo #routeMap .canvasBox .zoomBar {
    position: absolute;
    top: 10px;
    left: 10px;
    box-shadow: 0 1px 5px rgb(0 0 0 / 65%);
}

#route .route-section #mapInfo #routeMap .canvasBox .zoomBar .zoomBtn {
    width: 24px;
    line-height: 24px;
    font-weight: bold;
    text-align: center;
    background-color: #fff;
    cursor: pointer;
}
#route .route-section #mapInfo #routeMap .canvasBox .zoomBar .zoomBtn:hover {
    background-color: #eee;
}

#route .route-section #mapInfo #routeMap .canvasBox .zoomBar .zoomIn {
    border-bottom: 1px solid #777;
}

#route .route-section #mapInfo #routeMap .mapCanvas {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    cursor: grab;
}
#route .route-section #mapInfo #routeMap .mapCanvas:active {
    cursor: grabbing;
}
#route .route-section #mapInfo .mapSide {
    position: absolute;
    right: -290px;
    top: 0;
    width: 280px;
    height: 100%;
    z-index: 10;
    background-color: #eaf6fd;
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
    -moz-transition: right, 0.5s;
    -o-transition: right, 0.5s;
    -webkit-transition: right, 0.5s;
    transition: right, 0.5s;
}
#route .route-section #mapInfo .mapSide .btn-close {
    display: none;
}
#route .route-section #mapInfo .mapSide h2 {
    padding: 15px;
    color: #2b689c;
    border-bottom: 1px solid #cccccc;
}
#route .route-section #mapInfo .mapSide ul li {
    border-bottom: 1px dashed #cccccc;
}
#route .route-section #mapInfo .mapSide ul li a {
    padding: 10px 15px 10px 50px;
    position: relative;
    font-size: 16px;
}
#route .route-section #mapInfo .mapSide ul li a.active {
    color: #4aa2db;
}
#route .route-section #mapInfo .mapSide ul li a .icon {
    position: absolute;
    left: 10px;
    width: 30px;
    top: 7px;
}

#route .route-section #mapInfo .mapSide ul li .mapInfoBox {
    display: none;
    padding: 5px 10px;
    background-color: #eaf6fd;
}
#route .route-section #mapInfo .mapSide ul li .mapInfoBox .inner {
    display: flex;
}
#route .route-section #mapInfo .mapSide ul li .mapInfoBox .inner .img {
    width: 40%;
}
#route .route-section #mapInfo .mapSide ul li .mapInfoBox .inner .img .linkBtn {
    width: 100%;
    text-align: center;
    cursor: pointer;
    align-items: center;
    padding: 0;
    color: #555;
    line-height: 20px;
    margin-top: 5px;
    transition: 0.3s color;
}
#route
    .route-section
    #mapInfo
    .mapSide
    ul
    li
    .mapInfoBox
    .inner
    .img
    .linkBtn
    svg {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

#route
    .route-section
    #mapInfo
    .mapSide
    ul
    li
    .mapInfoBox
    .inner
    .img
    .linkBtn
    svg
    path {
    fill: #555;
    transition: 0.3s fill;
}

#route
    .route-section
    #mapInfo
    .mapSide
    ul
    li
    .mapInfoBox
    .inner
    .img
    .linkBtn:hover {
    color: #2b689c;
}

#route
    .route-section
    #mapInfo
    .mapSide
    ul
    li
    .mapInfoBox
    .inner
    .img
    .linkBtn:hover
    svg
    path {
    fill: #2b689c;
}

#route .route-section #mapInfo .mapSide ul li .mapInfoBox .inner .text {
    width: 60%;
    padding-left: 10px;
}

#route .route-section #mapInfo .mapSide ul li .mapInfoBox .inner .text .tag {
    display: inline-block;
    padding: 2px 5px;
    background-color: #ec681f;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    margin-bottom: 10px;
}
#route .route-section #mapInfo .mapSide ul li .mapInfoBox .inner .text .name {
    font-size: 14px;
    margin-bottom: 5px;
}
#route .route-section #mapInfo .mapSide ul li .mapInfoBox .inner .text .icon {
    display: flex;
    flex-wrap: wrap;
}
#route
    .route-section
    #mapInfo
    .mapSide
    ul
    li
    .mapInfoBox
    .inner
    .text
    .icon
    img {
    width: 32px;
    margin-right: 10px;
    margin-bottom: 10px;
}

#routeHot {
  padding: 2em 0;
}

#route #routeHot .title-line::after {
    background-color: #fff;
}

#infoList .info-card a {
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden;
}
#infoList .info-card a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}
#infoList .info-card a .text {
    position: relative;
    z-index: 5;
    color: #fff;
    text-align: center;
    display: block;
    font-size: 24px;
    padding: 12% 0;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}
#infoList .info-card a .text .icon {
    font-size: 30px;
    display: block;
}

#infoPage .info-section {
    padding: 0;
}
.infoPage .info-sidebar {
    width: 300px;
    min-height: 600px;
    height: calc(100vh - 320px);
    background-color: #fff;
    position: relative;
    z-index: 5;
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
    transition: width .5s ease;
    margin-bottom: 30px;
}
.infoPage .info-sidebar.collapse-width {
  width: 120px;
  transition: width .5s ease;
}

.infoPage .info-sidebar h2 {
    color: #2b689c;
    font-size: 16px;
    padding: 17px 15px;
    border-bottom: 1px solid #cccccc;
}
.infoPage .info-sidebar ul {
    height: calc(100vh - 430px);
    min-height: 540px;
}
.infoPage .info-sidebar ul li label .icon {
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
    margin-top: -2px;
    width: 30px;
    height: 30px;
    overflow: hidden;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    display: none;
}
#infoPage .info-main {
    overflow: hidden;
    height: calc(100vh - 320px);
    min-height: 600px;
}
#infoPage .info-main .top-bar {
    height: auto;
    border-bottom: none;
    padding: 0 15px;
    background-color: #fff;
}
#infoPage .info-main .top-bar .inline-block {
    display: inline-block;
}
#infoPage .info-main .top-bar span {
    padding: 10px;
    vertical-align: middle;
    line-height: 38px;
    color: #999999;
}
#infoPage .info-main .top-bar select {
    width: 180px;
    padding: 5px;
    border: 1px solid #dddddd;
    height: 38px;
}
#infoPage .info-main .top-bar .btn {
    margin-top: 10px;
}
#infoPage .info-main .top-bar .btnChange::after {
    content: "列表";
    display: inline;
}
#infoPage .info-main .top-bar .btnChange.active::after {
    content: "地圖";
}
#infoPage .info-main .list-map {
    height: calc(100vh - 380px);
    min-height: 540px;
}
#infoPage .info-main .list-map .map {
    height: 100%;
}
#infoPage .info-main .list-map.open {
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    min-height: auto;
}
#infoPage .info-main #info-list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #eaf6fd;
    padding: 20px;
    z-index: -10;
}
#infoPage .info-main #info-list .m-popup-title {
    display: none;
}
#infoPage .info-main #info-list .top-bar {
    padding: 0;
}
#infoPage .info-main #info-list.list-style .no {
    width: 10%;
}
#infoPage .info-main #info-list.list-style .card-title,
#infoPage .info-main #info-list.list-style .name {
    width: 90%;
}
#infoPage .info-main #info-list.list-style .card-title a,
#infoPage .info-main #info-list.list-style .name a {
    padding-right: 0;
}
#infoPage .info-main #info-list.list-style .card-name {
    width: 40%;
}
#infoPage .info-main #info-list.list-style .card-service {
    width: 50%;
    padding-right: 40px;
}
#infoPage .info-main #info-list.list-style .card-service .icon {
    width: 26px;
    height: 26px;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    overflow: hidden;
    margin: -2px 2px;
    display: inline-block;
    vertical-align: top;
}
#infoPage .info-main #info-list.list-style .name a,
#infoPage .info-main #info-list.list-style .card-name a {
    padding-right: 0;
}
#infoPage .info-main #info-list.list-style .name a.sort,
#infoPage .info-main #info-list.list-style .card-name a.sort {
    padding-right: 14px;
    position: relative;
    display: inline-block;
}
#infoPage .info-main #info-list.list-style .name a.sort::before,
#infoPage .info-main #info-list.list-style .card-name a.sort::before {
    position: absolute;
    right: 0;
    top: 0;
    content: "\f0de";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #dddddd;
}
#infoPage .info-main #info-list.list-style .name a.sort::after,
#infoPage .info-main #info-list.list-style .card-name a.sort::after {
    position: absolute;
    right: 0;
    bottom: 0;
    content: "\f0dd";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #dddddd;
}
#infoPage .info-main #info-list.list-style .name a.sort.up::before,
#infoPage .info-main #info-list.list-style .card-name a.sort.up::before {
    color: #4aa2db;
}
#infoPage .info-main #info-list.list-style .name a.sort.down::after,
#infoPage .info-main #info-list.list-style .card-name a.sort.down::after {
    color: #4aa2db;
}
#infoPage .info-main #info-list.active {
    z-index: 10;
}
#infoPage .info-menu {
    display: none;
}
#infoPage .btn-close {
    display: none;
}

.leaflet-popup-content {
    margin: 0;
}

.masker-item {
    width: 300px;
    padding: 15px 18px 12px 10px;
    font-family: Arial, "Noto Sans TC", "Microsoft JhengHei", "Segoe UI",
        -apple-system, system-ui, Helvetica, Arial, sans-serif, Impact;
    font-size: 0;
}
.masker-item .img {
    width: 40%;
    display: inline-block;
    vertical-align: top;
}
.masker-item .text {
    width: 60%;
    display: inline-block;
    vertical-align: top;
    position: relative;
    padding-left: 10px;
    font-size: 12px;
}
.masker-item .text .tag {
    display: inline-block;
    padding: 2px 5px;
    background-color: #ec681f;
    color: #fff;
}
.masker-item .text .name {
    font-size: 14px;
    margin: 5px 0;
}
.masker-item .text .btn-favourite {
    right: 0;
    top: -2px;
    display: inline-block;
    position: absolute;
}
.masker-item .bottom .icon-group {
    display: block;
}
.masker-item .bottom .icon-group .icon {
    display: inline-block;
    vertical-align: top;
    margin-right: 4px;
    margin-top: 5px;
    width: 30px;
    height: 30px;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    overflow: hidden;
}
.masker-item .bottom .link {
    font-size: 12px;
    color: #313131;
    margin-top: 10px;
    display: inline-block;
    vertical-align: top;
}

.leaflet-right .leaflet-control {
    display: none;
}

.about-body,
.post-body {
  text-align: center;
}

.about h2,
.post-body h2 {
  font-size: 26px;
  font-weight: 600;
  margin:20px 0;
}

.about h3,
.post-body h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 20px 0;
}
.about p,
.post-boy p {
  margin: 20px 0;
  font-size: 18px;
  line-height: 1.56;
}

.about p.txt,
.post-body p.txt {
  text-align: left;
  text-indent: 36px;
}

.about p img,
.post-body p img {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px 0;
}

.about ul,
.post-body ul {
    margin-left: 15px;
    font-size: 16px;
}

.post-body li {
    list-style: inside;
}
.leaflet-top.leaflet-right,
.leaflet-pane.leaflet-shadow-pane,
.leaflet-marker-icon.leaflet-marker-draggable {
    display: none;
}

@media screen and (max-width: 1200px) {
    .container .section {
        padding: 40px 0;
    }
    .container .section .page-content .content .video-player {
        height: calc((100vw - 40px) * 315 / 560);
    }
    .container .section .main-list .col4 .card .img {
        height: calc(100vw * 136 / 1000);
    }
    .container .side-main .col3 .img {
        height: calc(100vw * 130 / 1000);
    }

    .card.topping .img {
        height: calc(100vw * 400 / 1000);
    }

    #banner.banner .slider-item {
        /* height: calc(100vw * 600 / 1920); */
    }
    #banner.banner .slider-item .text {
        font-size: 18px;
        padding: 30px;
    }
    #banner.page-banner {
        height: 150px;
    }
    #banner.page-banner .page-title {
        font-size: 26px;
        padding-top: 55px;
    }

    .infoPage .info-sidebar {
        height: calc(100vh - 330px);
    }
    .infoPage .info-sidebar ul {
        max-height: calc(100vh - 330px);
    }
    #infoPage .info-main {
        height: calc(100vh - 330px);
    }
    #infoPage .info-main .top-bar span {
        padding-left: 5px;
        padding-right: 5px;
    }
    #infoPage .info-main .top-bar select {
        width: 115px;
    }
    #infoPage .info-main .list-map {
        height: calc(100vh - 390px);
    }

    #home .gallery-block a .img {
        height: calc(100vw * 150 / 1000);
    }
}

@media screen and (max-width: 1023px) {
    .wrap {
        padding: 0 15px;
    }

    .outwrap.hidden {
        height: 100vh;
        overflow: hidden;
    }

    .pc-hide {
        display: block;
    }
    .m-hide {
        display: none !important;
    }

    #mask.active {
        display: block;
    }

    header .btn-group {
        width: 25px;
        position: fixed;
        left: 15px;
        top: 15px;
        z-index: 5;
    }
    header .btn-group a {
        display: none;
    }
    header .btn-group a svg {
        fill: #4aa2db;
    }
    header .btn-group a.active {
        display: block;
    }
    header > .wrap .logo {
        float: none;
        text-align: center;
        margin: 0 auto;
        padding-bottom: 4px;
    }
    header .logo a {
        display: inline-block;
        width: 150px;
    }
    header .search {
        width: 25px;
        position: fixed;
        right: 15px;
        top: 15px;
        z-index: 5;
        margin: 0;
    }
    header .search .btn-search {
        position: static;
        width: 25px;
    }
    header .search .search-box {
        width: 100%;
        position: fixed;
        display: none;
        left: 0;
        top: 54px;
        height: 58px;
        background-color: #fff;
        padding: 10px;
        border-top: 1px solid #dddddd;
        -moz-transition: none;
        -o-transition: none;
        -webkit-transition: none;
        transition: none;
    }
    header .search .search-box input {
        padding: 12px 60px 10px 15px;
        width: 100%;
    }
    header .search .search-box .search-input {
        position: relative;
    }
    header .search .search-box .search-input .btn {
        border-bottom: none;
        display: inline-block;
        position: absolute;
        top: 2px;
        right: 2px;
        width: auto;
        padding: 11px 15px 9px 15px;
        line-height: 1;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
    }
    header .search.active .search-box {
        width: 100%;
        display: block;
        -moz-transition: none;
        -o-transition: none;
        -webkit-transition: none;
        transition: none;
    }
    header .menu-right {
        float: none;
        position: fixed;
        left: -100%;
        top: 54px;
        height: calc(100vh - 54px);
        overflow-y: auto;
        background-color: #fff;
        width: 100%;
        -moz-transition: left, 0.3s;
        -o-transition: left, 0.3s;
        -webkit-transition: left, 0.3s;
        transition: left, 0.3s;
    }
    header .menu-right.active {
        left: 0;
        -moz-transition: left, 0.3s;
        -o-transition: left, 0.3s;
        -webkit-transition: left, 0.3s;
        transition: left, 0.3s;
    }
    header .menu-right.subMenu #member {
        display: none;
    }
    header .menu-right.subMenu #menu > ul > li {
        display: none;
        position: relative;
    }
    header .menu-right.subMenu #menu > ul > li.selected {
        display: block;
        border-top: 1px solid #dddddd;
    }
    header .menu-right.subMenu #menu > ul > li.selected > a {
        position: relative;
        color: #4aa2db;
        font-weight: 500;
    }
    header .menu-right.subMenu #menu > ul > li.selected > a::before {
        height: 100%;
        width: 5px;
        position: absolute;
        left: 0;
        top: 0;
        content: "";
        background-color: #4aa2db;
    }
    header .menu-right.subMenu #menu > ul > li.selected .btn-collapse {
        display: none;
    }
    header .menu-right.subMenu #menu > ul > li.selected .sub {
        display: block;
        position: static;
        z-index: 99;
        pointer-events: auto;
    }
    header .menu-right.subMenu #menu > ul > li.selected .sub .route-col {
        width: 100%;
        padding: 0;
        border-bottom: 1px solid #dddddd;
    }
    header .menu-right.subMenu #menu > ul > li.selected .sub .route-col:after {
        content: " ";
        display: block;
        height: 0;
        clear: both;
    }
    header .menu-right.subMenu #menu > ul > li.selected .sub .route-col h2 {
        float: left;
    }
    header
        .menu-right.subMenu
        #menu
        > ul
        > li.selected
        .sub
        .route-col
        .scrollbar {
        overflow: hidden !important;
        height: auto;
    }
    header
        .menu-right.subMenu
        #menu
        > ul
        > li.selected
        .sub
        .route-col
        .scrollbar
        a {
        display: inline-block;
        vertical-align: top;
        border-bottom: none;
        padding-top: 0;
        padding-bottom: 0;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        margin: 10px 2px;
        min-width: auto;
    }
    header .member {
        display: block;
        float: none;
        margin: 0;
        background-color: #f8f8f8;
        padding: 12px 15px 10px;
        border-top: 1px solid #dddddd;
        border-bottom: 1px solid #dddddd;
    }
    header .member:after {
        content: " ";
        display: block;
        height: 0;
        clear: both;
    }
    header .member::before {
        display: none;
    }
    header .member .no-member li:nth-child(2)::after {
        display: inline-block;
        vertical-align: top;
        content: "．";
        margin-top: 10px;
    }
    header .member .no-member li.img {
        display: inline-block;
        width: 40px;
        height: 40px;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%;
        border: 2px solid #dddddd;
        overflow: hidden;
        margin-right: 10px;
    }
    header .member .no-member a {
        padding: 8px 5px;
        display: inline-block;
        font-size: 16px;
    }
    header .member .member-box {
        padding-right: 0;
        padding-bottom: 0;
        position: relative;
    }
    header .member .member-box::after {
        display: none;
    }
    header .member .member-box .img {
        float: left;
        margin-right: 10px;
    }
    header .member .member-box .member-m {
        overflow: hidden;
        padding-top: 7px;
    }
    header .member .member-box .member-m a {
        color: #4aa2db;
    }
    header #menu {
        display: block;
        float: none;
    }
    header #menu ul li {
        display: block;
        position: relative;
    }
    header #menu ul li a {
        text-align: left;
        padding: 15px;
        border-bottom: 1px solid #dddddd;
    }
    header #menu ul li a.active::before {
        height: 100%;
        width: 5px;
    }
    header #menu ul li a.btn-collapse {
        position: absolute;
        right: 0;
        top: 0;
        width: auto;
        border: none;
        min-width: auto;
    }
    header #menu ul li a.btn-collapse::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f054";
        color: #999999;
    }
    header #menu ul li .sub {
        display: none;
        filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
        opacity: 1;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    header #menu ul li .sub ul {
        padding: 0;
    }
    header #menu ul li .sub li {
        width: 100%;
    }
    header #menu ul li .sub li a {
        padding: 15px;
    }
    header #menu ul.lang {
        margin-top: 60px;
        text-align: center;
    }
    header #menu ul.lang li {
        display: inline-block;
        vertical-align: top;
    }
    header #menu ul.lang li a {
        text-align: center;
        padding: 10px;
        border: none;
        min-width: auto;
        font-size: 14px;
    }
    header #menu ul.lang li a.active {
        color: #4aa2db;
    }
    header #menu ul.lang li a.active::before {
        display: none;
    }

    .container {
        padding-top: 54px;
        min-height: calc(100vh - 137px);
    }
    .container .section {
        padding: 20px 0;
    }
    .container .section .page-content .top-block .page-title {
        font-size: 24px;
    }
    .container .section .page-content .content p {
        margin-bottom: 10px;
    }
    .container .section .page-content .video-player {
        height: calc((100vw - 30px) * 315 / 560);
    }
    .container .section .main-list .col4 .card .img {
        height: calc(100vw * 300 / 1000);
    }
    .container #sidebar {
        display: none;
    }
    .container .side-main {
        float: none;
        width: 100%;
        padding-right: 0;
    }
    .container .side-main .col3 .img {
        height: calc(100vw * 300 / 1000);
    }

    footer {
        padding: 10px 0 5px;
        background-color: #f8f8f8;
        text-align: center;
    }
    footer .bottom-info {
        float: none;
        display: inline-block;
    }
    footer .bottom-info .logo {
        margin-right: 10px;
        width: 180px;
    }
    footer .bottom-info .info {
        text-align: left;
        margin-top: 18px;
    }
    footer .bottom-nav {
        float: none;
        margin-top: 0;
    }

    .slider .slick-arrow {
        width: 40px;
        height: 40px;
        margin-top: -20px;
        padding: 10px 12px;
    }
    .slider .slick-arrow svg {
        width: 9px;
    }

    .title-tag {
        font-size: 14px;
        margin-bottom: 15px;
    }
    .title-tag::after {
        height: 20px;
    }

    .title-line {
        margin-bottom: 15px;
    }

    .row-block .col4 {
        width: calc(100% / 2);
    }
    .row-block .col3 {
        width: calc(100% / 2);
    }

    .card .img.img-icon.video::after {
        width: 50px !important;
        height: 36px !important;
        margin-left: -25px !important;
        margin-top: -18px !important;
    }
    .card.topping .img {
        height: calc(100vw * 600 / 1000);
    }

    #banner.banner .slider-item {
        padding-top: calc(100vh * 25 / 600);
    }
    #banner.banner .slider-item .text {
        margin-left: 80px;
        padding: 25px;
    }
    #banner.banner .slider .slick-prev {
        left: 10px;
        filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
        opacity: 1;
    }
    #banner.banner .slider .slick-next {
        right: 10px;
        filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
        opacity: 1;
    }
    #banner.page-banner {
        height: 75px;
    }
    #banner.page-banner .page-title {
        font-size: 21px;
        padding-top: 20px;
    }

    #home .home-block h3 {
        font-size: 24px;
    }
    #home .home-block .row-block > .img > .bgImg-img {
        height: calc(100vw * 300 / 1000);
    }
    #home .home-block .btn-block {
        margin-top: 20px;
    }
    #home .gallery-block a .img {
        height: calc(100vw * 300 / 1000);
    }
    #home .gallery-block .col4 {
        width: calc(100% / 2);
    }
    #home .gallery-block .col4 .img-icon.video::after {
        width: 40px !important;
        height: 29px !important;
        margin-left: -20px !important;
        margin-top: -15px !important;
    }

    #route .slider-item .img {
        float: none;
        width: 100%;
        height: calc(100vw * 600 / 1000);
    }
    #route .slider-item .img .bgImg-img {
        height: calc(100vw * 600 / 1000);
    }
    #route .slider-item .text {
        height: auto;
    }
    #route .route-slider {
        padding: 0;
        overflow: visible;
    }
    #route .route-slider .slider-item .text {
        padding: 20px;
    }
    #route .route-slider .slider-item .text .card-title a {
        font-size: 18px;
        min-height: auto;
    }
    #route .route-slider .slider-item .text .tag-block {
        height: auto;
        max-height: 66px;
    }
    #route .route-slider .slick-prev {
        left: -15px;
    }
    #route .route-slider .slick-next {
        right: -15px;
    }
    #route .route-section .slider-item .text {
        padding-left: 0;
    }
}
@media screen and (max-width: 980px) {
    .infoPage .info-sidebar {
        position: fixed;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 1001;
        height: 100vh;
        min-height: auto;
    }
    .infoPage .info-sidebar ul {
        max-height: none;
        min-height: auto;
    }
    #infoPage .info-main {
        height: auto;
        min-height: auto;
    }
    #infoPage .info-main .top-bar {
        display: none;
    }
    #infoPage .info-main .top-bar span {
        display: block;
        padding: 5px 0;
        line-height: 1.6;
    }
    #infoPage .info-main .top-bar select {
        width: 100%;
    }
    #infoPage .info-main .top-bar .btn-gy {
        display: none;
    }
    #infoPage .info-main .list-map {
        min-height: auto;
        height: calc(100vh - 172px);
        position: relative;
        z-index: 1;
    }
    #infoPage .info-main .list-map .map {
        position: absolute;
        z-index: 2;
    }
    #infoPage .info-menu {
        display: block;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: #fff;
        z-index: 1000;
        -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
        -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
    }
    #infoPage .info-menu .btn {
        border-bottom: none;
        width: 20%;
        color: #999999;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
        padding: 10px;
    }
    #infoPage .info-menu .btn-search {
        width: 40%;
        background-color: #4aa2db;
        color: #fff;
    }
    #infoPage .info-menu .btn-filter {
        width: 40%;
        background-color: #2b689c;
        color: #fff;
    }
    #infoPage .m-popup {
        position: fixed !important;
        right: auto;
        top: 0;
        left: 0;
        width: 100%;
        height: 100% !important;
        z-index: 1010;
        background-color: #fff;
        display: none;
        padding: 0 15px !important;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    #infoPage .m-popup.active {
        display: block;
    }
    #infoPage .m-popup .btn-close {
        display: block;
    }
    #infoPage .m-popup .m-popup-title {
        font-size: 18px;
        padding: 10px 15px !important;
        border-bottom: none;
        background-color: #4aa2db;
        color: #fff !important;
        letter-spacing: 2px;
        display: block;
        margin: 0 -15px 10px;
        width: 100vw !important;
    }
    #infoPage .m-popup .btn-close {
        right: 15px;
        top: 12px;
        width: 16px;
        height: 16px;
        position: absolute;
        z-index: 10;
    }
    #infoPage .m-popup .btn-close svg {
        fill: #fff;
    }
    #infoPage #filterPopup {
        padding: 0 !important;
    }
    #infoPage #filterPopup .m-popup-title {
        margin: 0 0 10px !important;
    }

    #infoPage .info-main .list-map {
        -moz-transition: none;
        -o-transition: none;
        -webkit-transition: none;
        transition: none;
    }
    #infoPage .info-main .list-map #info-list {
        padding: 0 0 50px !important;
    }
    #infoPage .info-main .list-map #info-list .m-popup-title {
        margin: 0;
        display: block;
    }
    #infoPage .info-main .list-map .mCSB_scrollTools .mCSB_draggerContainer {
        left: 6px;
    }
}

@media screen and (max-width: 640px) {
    .btn {
        width: 100%;
    }

    .container {
        min-height: auto;
    }
    .container .section .page-content .top-block .page-title {
        padding-right: 0;
        font-size: 21px;
    }
    .container .section .page-content .top-block .share {
        position: static;
        text-align: right;
    }
    .container .section .page-content .bottom .info-block {
        float: none;
    }
    .container .section .page-content .bottom .share {
        margin-top: 5px;
        float: none;
    }
    .container .section .main-list .col4 .card .img {
        height: calc(100vw * 600 / 1000);
    }
    .container .side-main .col3 .img {
        height: calc(100vw * 600 / 1000);
    }

    footer {
        padding: 10px 0 5px;
    }
    footer .bottom-info {
        text-align: center;
        margin-top: 15px;
    }
    footer .bottom-info .logo {
        margin: 0 auto;
        display: block;
        float: none;
    }
    footer .bottom-info .info {
        margin-top: 7px;
        display: inline-block;
        float: none;
    }
    footer .bottom-info .info li {
        display: block !important;
    }
    footer .bottom-info .info li:nth-child(1) {
        border-right: none;
    }
    footer .bottom-nav {
        border-bottom: 1px solid #999999;
    }
    footer .bottom-nav li a {
        padding-left: 10px;
        padding-right: 10px;
    }

    .popup-wrap .window {
        padding: 20px 15px;
    }
    .popup-wrap .window h2 {
        font-size: 18px;
        padding: 10px 15px;
        margin: -20px -15px 15px;
    }
    .popup-wrap .window .btn-close {
        right: 15px;
        top: 15px;
    }
    .popup-wrap .window .row-input {
        margin-top: 10px;
    }
    .popup-wrap .window .btn-block {
        margin-top: 10px;
    }
    .popup-wrap .window .btn-block .btn {
        padding-top: 5px;
        padding-bottom: 4px;
    }
    .popup-wrap .window .line {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .popup-wrap .window .line::before {
        top: 10px;
    }
    .popup-wrap .window .line span {
        padding: 0 10px;
    }
    .popup-wrap .window .icon-block a {
        width: 40px;
        height: 40px;
    }
    .popup-wrap .window .link-block {
        margin-top: 15px;
    }

    .btn-top {
        width: 40px;
        height: 40px;
        right: 5px;
    }
    .btn-top svg {
        width: 9px;
    }

    .tag-block {
        max-height: none;
    }
    .tag-block .tag {
        font-size: 12px;
        margin: 3px 0;
        padding-top: 3px;
        padding-bottom: 2px;
    }

    #banner.banner .slider-item {
        padding-top: calc(100vh * 15 / 600);
        height: calc(100vw * 600 * 2 / 1920);
    }
    #banner.banner .slider-item .text {
        font-size: 14px;
        padding: 15px;
        width: 100%;
        max-width: 400px;
        margin-left: 0;
    }
    #banner.banner .slick-arrow {
        display: none !important;
    }

    #tagCloud {
        padding: 10px 0;
    }
    #tagCloud .wrap {
        overflow-y: auto;
        white-space: nowrap;
    }

    .slider.slider-carousel {
        padding-left: 40px;
        padding-right: 40px;
        margin: 0 -10px;
    }
    .slider .slick-dots {
        width: 100%;
        text-align: center;
        position: absolute;
        bottom: 0;
        left: 0;
        padding-bottom: 10px;
    }
    .slider .slick-dots li {
        display: inline-block;
        vertical-align: top;
        margin: 0 5px;
    }
    .slider .slick-dots li button {
        background: #999999;
        border: none;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%;
        padding: 0;
        width: 15px;
        height: 15px;
        font-size: 0;
    }
    .slider .slick-dots li.slick-active button {
        background: #4aa2db;
    }

    .row-block {
        margin: 0 -5px;
    }
    .row-block [class*="col"] {
        padding: 5px;
    }
    .row-block .col2 {
        width: 100%;
    }
    .row-block .col4 {
        width: 100%;
    }
    .row-block .col3 {
        width: 100%;
    }

    .title-line {
        padding-bottom: 8px;
        margin-bottom: 10px;
    }
    .title-line::before {
        height: 3px;
    }
    .title-line::after {
        height: 3px;
    }

    .tabs .tabs-nav {
        margin-bottom: 15px;
    }
    .tabs .tabs-nav li a {
        font-size: 14px;
    }

    .card .text p {
        min-height: auto;
        max-height: none;
        display: block;
    }
    .card .text .card-title a {
        min-height: auto;
    }
    .card .text .bottom .link {
        width: 100%;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        display: block;
        padding: 6px 30px 5px;
        border-bottom-style: solid;
        border-bottom-width: 5px;
        text-align: center;
        background-color: #4aa2db;
        border-bottom-color: #2b689c;
        color: #fff;
        margin-top: 5px;
    }
    .card .text .bottom .link::before {
        display: none;
    }
    .card.topping .text {
        padding: 15px;
    }
    .card.topping .text .card-title {
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    .card.topping .text .card-title a {
        font-size: 16px;
    }
    .card.topping .text .bottom {
        margin-top: 0;
    }
    .card.topping .text .bottom .info-block {
        margin-top: 0;
    }
    .card.topping .text .bottom .btn {
        width: 100%;
        float: none;
        margin-top: 5px;
    }
    .card.topping .text .btn-favourite {
        right: 15px;
        top: 12px;
    }

    .innerWrap {
        border: none;
        padding: 0 0 20px !important;
        margin: 0;
    }
    .innerWrap .top-block {
        position: relative;
        margin: 0 auto;
        left: auto;
        top: auto;
        width: 120px;
        height: 120px;
    }
    .innerWrap .top-block .img {
        width: 110px;
        height: 110px;
    }
    .innerWrap .top-block svg {
        width: 50px;
        margin-left: -25px;
        margin-top: -33px;
    }
    .innerWrap .top-block .photo-upload {
        font-size: 12px;
    }
    .innerWrap .row-input.email {
        margin-top: 0;
        font-size: 16px;
    }
    .innerWrap .row-input div.icon {
        left: 6px;
        top: 6px;
    }
    .innerWrap .row-input.row-radio {
        margin-top: 15px;
    }
    .innerWrap .row-input.row-radio label {
        font-size: 14px;
    }
    .innerWrap .row-input input[type="text"],
    .innerWrap .row-input input[type="number"],
    .innerWrap .row-input input[type="date"],
    .innerWrap .row-input input[type="password"] {
        font-size: 14px;
    }
    .innerWrap .btn-block {
        margin-top: 20px;
    }
    .innerWrap .btn-block .btn {
        font-size: 14px;
        width: 100%;
        margin: 0 4px;
    }

    .pagination {
        display: none;
    }

    .list-card.list-style .top-bar .list-name {
        display: none;
    }
    .list-card.list-style .top-bar .list-sort {
        display: block;
    }
    .list-card.list-style .card .text {
        padding: 10px;
    }
    .list-card.list-style .card .text .list-td {
        display: block;
        width: 100% !important;
        padding: 0 !important;
    }
    .list-card.list-style .card .text .list-td::before {
        content: attr(data-name);
        display: inline;
        color: #999999;
    }
    .list-card.list-style .card .text .card-title a {
        white-space: normal;
        display: inline;
    }
    .list-card.list-style .card .text .card-title a::after {
        content: "\f35d";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        display: inline;
        color: #4aa2db;
        display: inline-block;
        margin-left: 5px;
    }

    .list-map.active {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 1000;
    }
    .list-map.active .map {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 1001;
    }
    .list-map.active .btn-mapClose {
        position: fixed;
        z-index: 1002;
    }

    .share li a.share-fb svg {
        fill: #3f51b5;
    }
    .share li a.share-line svg {
        fill: #00c300;
    }
    .share li a.share-twitter svg {
        fill: #03a9f4;
    }
    .share li a.share-link svg {
        fill: #ffd100;
    }

    #iconPopup .window {
        width: 100vw;
        height: 100vh;
        margin: 0 -6px;
        padding-left: 10px;
        padding-right: 10px;
        max-width: none;
    }
    #iconPopup .window .window-box {
        max-height: calc(100vh - 60px);
        padding: 0 5px;
    }
    #iconPopup .window .window-box .row-block .col2:first-child {
        border-right: none;
        border-bottom: 1px solid #dddddd;
    }
    #iconPopup h2 {
        margin-left: -10px;
        margin-right: -10px;
    }

    #home .home-block h3 {
        font-size: 20px;
    }
    #home .home-block .row-block {
        position: relative;
        padding-top: 40px;
        margin-bottom: 15px;
    }
    #home .home-block .row-block > .img {
        float: none;
    }
    #home .home-block .row-block > .text {
        overflow: hidden;
    }
    #home .home-block .row-block > .text .title-tag {
        position: absolute;
        left: -10px;
        top: 0;
    }
    #home .home-block .row-block > .img > .bgImg-img {
        height: calc(100vw * 600 / 1000);
    }
    #home .home-block .btn-block {
        margin-top: 0;
    }
    #home .home-block .btn-block .info-block {
        margin-top: 0;
        float: none;
    }
    #home .home-block .btn-block .btn {
        float: none;
        margin-top: 5px;
    }
    #home .home-block .gallery-block {
        padding-top: 0;
    }
    #home .home-block .gallery-block a {
        width: 100%;
    }
    #home .home-block .gallery-block a .img {
        height: calc(100vw * 300 / 1000);
    }
    #home .article-block {
        border-bottom: 5px solid #f8f8f8;
        padding-bottom: 0;
    }
    #home .gallery-block {
        margin: 0 -5px;
    }
    #home .gallery-block a {
        padding: 5px;
        margin-bottom: 5px;
    }
    #home .gallery-block a .text {
        font-size: 14px;
        line-height: 20px;
        max-height: 40px;
    }
    #home .hot-block {
        padding-bottom: 40px;
    }
    #home .hot-block .btn {
        max-width: calc(100vw - 30px);
    }

    #route .route-slider .slider-item .text {
        padding: 15px;
    }
    #route .route-slider .slider-item .text .tag-block {
        height: 33px;
    }
    #route .route-slider .slider-item .text .tag-block .tag {
        font-size: 12px;
    }
    #route .route-slider .slider-item .text .card-title {
        padding-bottom: 10px;
        margin-bottom: 0;
    }
    #route .route-slider .slider-item .text .card-title a {
        font-size: 16px;
    }
    #route .route-slider .slider-item .text .route-list {
        font-size: 14px;
        margin-bottom: 6px;
        margin-top: 10px;
    }
    #route .route-slider .slider-item .text .btn-favourite {
        right: 15px;
        top: 10px;
    }
    #route .route-slider .slider-item .text .bottom {
        margin-top: 5px;
    }
    #route .route-slider .slider-item .text .bottom .btn {
        margin-top: 5px;
    }
    #route .route-slider .slick-prev {
        margin-top: -20px;
        top: calc(100vw * 331 / 1000);
    }
    #route .route-slider .slick-next {
        margin-top: -20px;
        top: calc(100vw * 331 / 1000);
    }
    #route .route-slider .slick-dots {
        display: none !important;
    }
    #route .route-section .slider-item {
        margin-bottom: 0;
    }
    #route .route-section .slider-item .text .card-title a {
        font-size: 18px;
    }
    #route .route-section .slider-item .text .bottom .btn-favourite {
        margin-top: 0;
    }
    #route .route-section .slider-item .text .bottom .share {
        margin-top: 10px;
    }
    #route .route-section .slider-item .text .route-list {
        font-size: 14px;
    }
    #route .route-section .slider-item .text .route-list li {
        margin: 0;
    }
    #route .route-section .download-list {
        margin-top: 0;
    }
    #route .route-section #mapInfo .list-map.active {
        position: relative;
        height: calc(100vw * 480 / 640);
        z-index: 1;
    }
    #route .route-section #mapInfo .list-map.active .map {
        position: absolute;
        z-index: 2;
    }
    #route .route-section #mapInfo .list-map.active .btn-mapClose {
        display: none;
    }

    #route .route-section .btn-block .btn.offline {
        margin-bottom: 10px;
    }
    #favourite .list-card.list-style .card-name::after {
        content: "\f35d";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        display: inline-block;
        margin-left: 5px;
        color: #4aa2db;
    }

    #route .route-section #mapInfo .list-map {
        -moz-transition: none;
        -o-transition: none;
        -webkit-transition: none;
        transition: none;
    }
    #route .route-section #mapInfo .list-map.sideOpen {
        z-index: 1000;
        position: fixed;
        width: 100%;
        height: 100vh;
        left: 0;
        top: 0;
    }
    #route .route-section #mapInfo .list-map.sideOpen .mapSide {
        display: block;
    }
    #route .route-section #mapInfo .mapSide {
        position: fixed;
        right: auto;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
        background-color: #fff;
        display: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    #route .route-section #mapInfo .mapSide .btn-close {
        display: block;
    }
    #route .route-section #mapInfo .mapSide h2 {
        font-size: 18px;
        padding: 10px 15px;
        margin: 0;
        border-bottom: none;
        background-color: #4aa2db;
        color: #fff;
        letter-spacing: 2px;
    }
    #route .route-section #mapInfo .mapSide .btn-close {
        right: 15px;
        top: 12px;
        width: 16px;
        height: 16px;
        position: absolute;
        z-index: 10;
    }
    #route .route-section #mapInfo .mapSide .btn-close svg {
        fill: #fff;
    }

    .infoPage .info-sidebar ul {
        height: calc(100vh - 50px);
    }
    #infoPage .info-main #info-list.list-style .card-service .icon {
        margin: 4px 2px 0;
    }
}
@media screen and (min-width: 980px) and (max-width: 1023px) {
    .infoPage .info-sidebar {
        height: calc(100vh - 265px);
    }
    .infoPage .info-sidebar ul {
        max-height: calc(100vh - 265px);
    }
    #infoPage .info-main {
        height: calc(100vh - 265px);
    }
    #infoPage .info-main .top-bar {
        padding-left: 10px;
        padding-right: 10px;
    }
    #infoPage .info-main .list-map {
        height: calc(100vh - 325px);
    }
}
@media screen and (min-width: 1024px) {
    a {
        -moz-transition: all, 0.5s;
        -o-transition: all, 0.5s;
        -webkit-transition: all, 0.5s;
        transition: all, 0.5s;
    }
    a svg {
        -moz-transition: all, 0.5s;
        -o-transition: all, 0.5s;
        -webkit-transition: all, 0.5s;
        transition: all, 0.5s;
    }
    a:hover {
        -moz-transition: all, 0.5s;
        -o-transition: all, 0.5s;
        -webkit-transition: all, 0.5s;
        transition: all, 0.5s;
    }
    a:hover svg {
        -moz-transition: all, 0.5s;
        -o-transition: all, 0.5s;
        -webkit-transition: all, 0.5s;
        transition: all, 0.5s;
    }

    button {
        -moz-transition: all, 0.5s;
        -o-transition: all, 0.5s;
        -webkit-transition: all, 0.5s;
        transition: all, 0.5s;
    }
    button:hover {
        -moz-transition: all, 0.5s;
        -o-transition: all, 0.5s;
        -webkit-transition: all, 0.5s;
        transition: all, 0.5s;
    }

    .btn.btn-b:hover {
        background-color: #2b689c;
    }
    .btn.btn-gy:hover {
        background-color: #666666;
    }
    .btn.btn-r:hover {
        background-color: #ec681f;
    }

    .link:hover {
        color: #4aa2db;
    }
    .link:hover::before {
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        -moz-transition: all, 0.5s;
        -o-transition: all, 0.5s;
        -webkit-transition: all, 0.5s;
        transition: all, 0.5s;
    }
    .link:hover.arrow::before {
        -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
        -moz-transition: all, 0.5s;
        -o-transition: all, 0.5s;
        -webkit-transition: all, 0.5s;
        transition: all, 0.5s;
    }

    header .search .btn-search svg {
        -moz-transition: all, 0.5s;
        -o-transition: all, 0.5s;
        -webkit-transition: all, 0.5s;
        transition: all, 0.5s;
    }
    header .search .btn-search:hover svg {
        fill: #2b689c;
        -moz-transition: all, 0.5s;
        -o-transition: all, 0.5s;
        -webkit-transition: all, 0.5s;
        transition: all, 0.5s;
    }
    header .member .member-box .sub,
    header .lang .lang-box .sub {
        -moz-transition: all, 0.5s;
        -o-transition: all, 0.5s;
        -webkit-transition: all, 0.5s;
        transition: all, 0.5s;
    }
    header .member .member-box:hover .sub,
    header .lang .lang-box:hover .sub {
        z-index: 99;
        -moz-transition: all, 0.5s;
        -o-transition: all, 0.5s;
        -webkit-transition: all, 0.5s;
        transition: all, 0.5s;
        opacity: 1;
        pointer-events: auto;
    }
    header .member .member-box:hover .sub li a:hover,
    header .lang .lang-box:hover .sub li a:hover {
        background-color: #eaf6fd;
    }
    header .member .no-member li a:hover {
        color: #4aa2db;
    }
    header #menu > ul > li .sub {
        -moz-transition: all, 0.5s;
        -o-transition: all, 0.5s;
        -webkit-transition: all, 0.5s;
        transition: all, 0.5s;
    }
    header #menu > ul > li > a:hover {
        color: #4aa2db;
    }
    header #menu .sub a:hover {
        color: #4aa2db;
    }
    header #menu .sub .route-col a:not(.active):hover {
        background-color: #eaf6fd;
    }
    header #menu .sub .route-col .country a:hover {
        color: #4aa2db;
        background-color: transparent;
    }

    .container .section .page-content .content a:hover {
        text-decoration: underline;
    }
    .container
        #sidebar
        .sidebar-box
        .sidebar-list
        .sidebar-card
        .list-card
        .text
        h3 {
        -moz-transition: all, 0.5s;
        -o-transition: all, 0.5s;
        -webkit-transition: all, 0.5s;
        transition: all, 0.5s;
    }
    .container
        #sidebar
        .sidebar-box
        .sidebar-list
        .sidebar-card
        .list-card:hover {
        background-color: #eaf6fd;
    }
    .container
        #sidebar
        .sidebar-box
        .sidebar-list
        .sidebar-card
        .list-card:hover
        .text
        h3 {
        color: #4aa2db;
        -moz-transition: all, 0.5s;
        -o-transition: all, 0.5s;
        -webkit-transition: all, 0.5s;
        transition: all, 0.5s;
    }

    .btn-top:hover {
        filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
        opacity: 1;
    }

    footer .bottom-nav li a:hover {
        color: #4aa2db;
    }

    .popup-wrap .window .btn-close:hover {
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    .popup-wrap .window .row-input.row-checkbox a:hover {
        text-decoration: underline;
    }
    .popup-wrap .window .icon-block a:hover {
        filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
        opacity: 1;
    }
    .popup-wrap .window .link-block a:hover {
        text-decoration: underline;
    }

    .tabs .tabs-nav li a:hover {
        background-color: #4aa2db;
        color: #fff;
    }

    #banner.banner .slider .slick-arrow:hover {
        background-color: #fff;
    }
    #banner.banner .slider .slick-arrow:hover svg {
        fill: #313131;
    }
    #banner.banner .slider:hover .slick-prev {
        left: 20px;
        filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
        opacity: 1;
    }
    #banner.banner .slider:hover .slick-next {
        right: 20px;
        filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
        opacity: 1;
    }

    .tag-block .tag:hover {
        -moz-transition: all, 0.5s;
        -o-transition: all, 0.5s;
        -webkit-transition: all, 0.5s;
        transition: all, 0.5s;
        background-color: #e8e8e8 !important;
        color: #111;
    }

    .slider .slick-arrow:hover {
        background-color: #2b689c;
    }

    .card {
        -moz-transition: all, 0.5s;
        -o-transition: all, 0.5s;
        -webkit-transition: all, 0.5s;
        transition: all, 0.5s;
    }
    .card .img img {
        -moz-transition: all, 0.5s;
        -o-transition: all, 0.5s;
        -webkit-transition: all, 0.5s;
        transition: all, 0.5s;
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    .card:hover {
        -moz-transition: all, 0.5s;
        -o-transition: all, 0.5s;
        -webkit-transition: all, 0.5s;
        transition: all, 0.5s;
    }
    .card:hover .img img {
        -moz-transition: all, 0.5s;
        -o-transition: all, 0.5s;
        -webkit-transition: all, 0.5s;
        transition: all, 0.5s;
        -moz-transform: scale(1.05, 1.05);
        -ms-transform: scale(1.05, 1.05);
        -webkit-transform: scale(1.05, 1.05);
        transform: scale(1.05, 1.05);
    }
    .pagination a:hover {
        background-color: #2b689c;
        color: #fff;
    }

    .share li a:hover.share-fb svg {
        fill: #3f51b5;
    }
    .share li a:hover.share-line svg {
        fill: #00c300;
    }
    .share li a:hover.share-twitter svg {
        fill: #03a9f4;
    }
    .share li a:hover.share-link svg {
        fill: #ffd100;
    }

    #home .gallery-block a .img {
        -moz-transition: all, 0.5s;
        -o-transition: all, 0.5s;
        -webkit-transition: all, 0.5s;
        transition: all, 0.5s;
    }
    #home .gallery-block a .text {
        -moz-transition: all, 0.5s;
        -o-transition: all, 0.5s;
        -webkit-transition: all, 0.5s;
        transition: all, 0.5s;
    }
    #home .gallery-block a:hover .img {
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
        opacity: 0.8;
        -moz-transition: all, 0.5s;
        -o-transition: all, 0.5s;
        -webkit-transition: all, 0.5s;
        transition: all, 0.5s;
    }
    #home .gallery-block a:hover .text {
        color: #4aa2db;
        -moz-transition: all, 0.5s;
        -o-transition: all, 0.5s;
        -webkit-transition: all, 0.5s;
        transition: all, 0.5s;
    }

    .list-card .card:hover {
        background-color: #eaf6fd !important;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .list-card .card:hover .text .card-title a {
        color: #4aa2db;
    }

    .ui-datepicker .ui-datepicker-header .ui-corner-all:hover {
        filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
        opacity: 1;
    }
    .ui-datepicker .ui-datepicker-calendar td a:hover {
        background-color: #eaf6fd;
    }

    #route .route-section .download-list li a:hover {
        background-color: #eaf6fd;
    }

    #infoList .info-card a::before {
        -moz-transition: background-color, 0.5s;
        -o-transition: background-color, 0.5s;
        -webkit-transition: background-color, 0.5s;
        transition: background-color, 0.5s;
    }
    #infoList .info-card a:hover::before {
        background-color: rgba(43, 104, 156, 0.5);
        -moz-transition: background-color, 0.5s;
        -o-transition: background-color, 0.5s;
        -webkit-transition: background-color, 0.5s;
        transition: background-color, 0.5s;
    }
}
@media screen and (min-width: 1600px) {
    #route #routeHot .slider.slider-carousel {
        padding-left: 0;
        padding-right: 0;
    }
}
@-webkit-keyframes rubberBand {
    0% {
        -moz-transform: scaleX(1);
        -ms-transform: scaleX(1);
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
    30% {
        -moz-transform: scale3d(1.25, 0.75, 1);
        -ms-transform: scale3d(1.25, 0.75, 1);
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        -moz-transform: scale3d(0.75, 1.25, 1);
        -ms-transform: scale3d(0.75, 1.25, 1);
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        -moz-transform: scale3d(1.15, 0.85, 1);
        -ms-transform: scale3d(1.15, 0.85, 1);
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        -moz-transform: scale3d(0.95, 1.05, 1);
        -ms-transform: scale3d(0.95, 1.05, 1);
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        -moz-transform: scale3d(1.05, 0.95, 1);
        -ms-transform: scale3d(1.05, 0.95, 1);
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }
    to {
        -moz-transform: scaleX(1);
        -ms-transform: scaleX(1);
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}
@-moz-keyframes rubberBand {
    0% {
        -moz-transform: scaleX(1);
        -ms-transform: scaleX(1);
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
    30% {
        -moz-transform: scale3d(1.25, 0.75, 1);
        -ms-transform: scale3d(1.25, 0.75, 1);
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        -moz-transform: scale3d(0.75, 1.25, 1);
        -ms-transform: scale3d(0.75, 1.25, 1);
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        -moz-transform: scale3d(1.15, 0.85, 1);
        -ms-transform: scale3d(1.15, 0.85, 1);
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        -moz-transform: scale3d(0.95, 1.05, 1);
        -ms-transform: scale3d(0.95, 1.05, 1);
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        -moz-transform: scale3d(1.05, 0.95, 1);
        -ms-transform: scale3d(1.05, 0.95, 1);
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }
    to {
        -moz-transform: scaleX(1);
        -ms-transform: scaleX(1);
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}
@-ms-keyframes rubberBand {
    0% {
        -moz-transform: scaleX(1);
        -ms-transform: scaleX(1);
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
    30% {
        -moz-transform: scale3d(1.25, 0.75, 1);
        -ms-transform: scale3d(1.25, 0.75, 1);
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        -moz-transform: scale3d(0.75, 1.25, 1);
        -ms-transform: scale3d(0.75, 1.25, 1);
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        -moz-transform: scale3d(1.15, 0.85, 1);
        -ms-transform: scale3d(1.15, 0.85, 1);
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        -moz-transform: scale3d(0.95, 1.05, 1);
        -ms-transform: scale3d(0.95, 1.05, 1);
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        -moz-transform: scale3d(1.05, 0.95, 1);
        -ms-transform: scale3d(1.05, 0.95, 1);
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }
    to {
        -moz-transform: scaleX(1);
        -ms-transform: scaleX(1);
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}
@keyframes rubberBand {
    0% {
        -moz-transform: scaleX(1);
        -ms-transform: scaleX(1);
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
    30% {
        -moz-transform: scale3d(1.25, 0.75, 1);
        -ms-transform: scale3d(1.25, 0.75, 1);
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        -moz-transform: scale3d(0.75, 1.25, 1);
        -ms-transform: scale3d(0.75, 1.25, 1);
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        -moz-transform: scale3d(1.15, 0.85, 1);
        -ms-transform: scale3d(1.15, 0.85, 1);
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        -moz-transform: scale3d(0.95, 1.05, 1);
        -ms-transform: scale3d(0.95, 1.05, 1);
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        -moz-transform: scale3d(1.05, 0.95, 1);
        -ms-transform: scale3d(1.05, 0.95, 1);
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }
    to {
        -moz-transform: scaleX(1);
        -ms-transform: scaleX(1);
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}

/* 社交媒體 */
.social-network {
    position: relative;
    overflow: hidden;
    font-size: 20px;
    margin: 0;
    text-align: center;
    background: rgba(0, 160, 233, 0.75);
    padding: 20px 0 20px;
}

.social-network ul {
    position: relative;
    left: 50%;
    float: left;
}

.social-network ul li {
    position: relative;
    list-style: none;
    left: -50%;
    float: left;
    margin: 0 10px;
}

.social-network ul li a {
    display: inline-block;
    background: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: rgba(0, 160, 233, 1);
    transition: all 0.3s ease;
}

.social-network ul li a:hover {
    background: rgba(0, 160, 233, 1);
    color: #fff;
}

.ui.header {
  font-family: "Noto Serif JP", "Noto Sans TC", "Helvetica Neue", "Helvetica",
  "Microsoft JhengHei", Arial, sans-serif;
}

.ui.segments {
  border: none;
  box-shadow: none;
}

.ui.form .inline.fields {
  margin: 0;
}

.advanced-search {
  display: none;
}

.locale {
  justify-content: center;
}

div label input {
  visibility: hidden;
}

.location::after, .tag::after {
  content: '';
  display: block;
  clear: both;
}

.check-btn {
  background-color:#EFEFEF;
  border-radius:4px;
  border: 1px solid rgba(0, 160, 233, 0.75);
  overflow:auto;
  float:left;
  width: 18%;
  margin-right: 2.5%;
  margin-bottom: 2.5%;
}

.check-btn:nth-child(5n) {
  margin-right: 0;
}

.check-btn:hover {
  background: rgba(0, 160, 233, 0.75);
  opacity: 0.8;
  cursor: pointer;
}

.check-btn label {
  float:left;
  cursor: pointer;
  width: 100%;
}

.check-btn label span {
  text-align:center;
  padding: 3% 5%;
  display:block;
  background: #FFFFFF;
}

.check-btn label input {
  position:absolute;
  top:-20px;
}

.check-btn input:checked + span {
  background: rgba(0, 160, 233, 0.75);
  color:#fff;
  padding: 3% 5%;
}

.search-bar {
  width: 100%;
}

.ui.form .field>label,
h5.ui.header {
  text-align: center;
}

.ui.form .inline.fields {
  justify-content: center;
  padding-bottom: 1em;
}

.ui.form .inline.fields .field.search-bar>input {
  width: 100%;
}

@media only screen and (max-width: 767px) {
  .check-btn {
    width: 47.5%;
  }

  .check-btn:nth-child(2n) {
    margin-right: 0;
  }

  .check-btn:nth-child(5n) {
    margin-right: 2.5%;
  }
}