@charset "utf-8";
@import url("../css/grid.min.css");
@import url("../css/assembly.min.css");
@import url("../js/hc-offcanvas-nav-6.1.1/hc-offcanvas-nav.carbon.css");
@import url("../js/dropdown/dropdown-menu.css");
@import url("../js/font-awesome/css/font-awesome.min.css");
@import url("../js/tooltipster/css/tooltipster.css");
@import url("../js/wow/animate.css");
@import url("../js/layer/theme/default/layer.css");

:root{
  --primary-color:#004573;
}

/* Overall and normalize */
html,button,input,select,textarea{color:#222;}
html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
::-moz-selection{background:#b3d4fc;text-shadow:none;}
::selection{background:#b3d4fc;text-shadow:none;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video{display:inline-block;}
audio:not([controls]){display:none;height:0;}
[hidden]{display:none;}
hr{margin: 20px 0;border: 0;border-top: 1px solid #eeeeee;border-bottom: 1px solid #ffffff;-moz-box-sizing:content-box;box-sizing:content-box;}
audio,canvas,img,video{vertical-align:middle;}
fieldset{border:0;margin:0;padding:0;}
textarea{resize:vertical;}
.browsehappy{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0;}
img{width:auto\9;height:auto;max-width:100%;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic;}
p{margin:0 0 10px;}
a:focus{outline:0;}
a:active,a:hover{outline:0;}
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:bold;}
blockquote{margin:1em 40px;}
dfn{font-style:italic;}
mark{background:#ff0;color:#000;}
pre{margin:1em 0;}
code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em;}
pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
q{quotes:none;}
q:before,q:after{content:'';content:none;}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
dl,menu,ol,ul{margin:1em 0;}
dd{margin:0 0 0 40px;}
menu,ol,ul{padding:0 0 0 40px;}
nav ul,nav ol{list-style:none;list-style-image:none;}
svg:not(:root){overflow:hidden;}
figure{margin:0;}
form{margin:0;}
fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em;}
legend{border:0;padding:0;white-space:normal;}
button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;}
button,input{line-height:normal;}
button,select{text-transform:none;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{appearance:button;cursor:pointer;}
button[disabled],html input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;}
table{border-collapse:collapse;border-spacing:0;}
select{ line-height: 100%;appearance: none;background-image: url("../img/select-arrow.svg");background-repeat: no-repeat;background-position: calc(100% - 10px) center;outline: none;background-size: 10px;padding-right: 30px;}
.clearfix:before,.clearfix:after{display:table;line-height:0;content:"";}
.clearfix:after{clear:both;}
/* Base styles */
.text-left{text-align:left;}
.text-right{text-align:right;}
.text-center{text-align:center;}
iframe{ border: none;max-width: 100%;}
.fb_iframe_widget,.fb_iframe_widget span,.fb_iframe_widget span iframe[style]{width:100% !important;} /*for facebook like box 100% width*/
.video-container {position: relative;padding-bottom: 56.25%;padding-top: 30px; height: 0; overflow: hidden;}  /*for youtube 100% width style*/
.video-container iframe,.video-container object,.video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}  /*for youtube 100% width style*/
.pull-right{float:right;}
.pull-left{float:left;}
.hidden{display: none !important;visibility: hidden !important;}
.hidden-desktop{display: none !important;}
.google-maps img{max-width:none;}
.google-maps{width:100%;height:100%;border:1px solid #DDD;}  /*for google map style*/
.text-cut{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;} /*for text the word cut*/
.text-linecut{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}
.full-width{width: 100vw;position: relative;left: 50%;margin: 0px -50vw;}
.circle{-webkit-border-radius:500px;-moz-border-radius:500px;border-radius:500px;}  /*for circle border style*/
.rounded{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;} /*for rounded border style*/
.enter-content p {line-height:150%; margin-bottom: 10px;}
table { max-width:100%;border-color:#DDD;}
table td,table th { padding: 10px;}
.imgresize{image-rendering: -moz-crisp-edges;image-rendering: -o-crisp-edges;image-rendering: -webkit-optimize-contrast;image-rendering: crisp-edges;-ms-interpolation-mode: nearest-neighbor;}
.required > label::before{content: "*";color: red;margin-right: 2px;}
.flex-box{ display: flex;flex-wrap: wrap;}
/* Grid setting */
.grid-container {padding-left: 0px;padding-right: 0px; max-width:1200px;}
.grid-5, .mobile-grid-5, .grid-10, .mobile-grid-10, .grid-15, .mobile-grid-15, .grid-20, .mobile-grid-20, .grid-25, .mobile-grid-25, .grid-30, .mobile-grid-30, .grid-35, .mobile-grid-35, .grid-40, .mobile-grid-40, .grid-45, .mobile-grid-45, .grid-50, .mobile-grid-50, .grid-55, .mobile-grid-55, .grid-60, .mobile-grid-60, .grid-65, .mobile-grid-65, .grid-70, .mobile-grid-70, .grid-75, .mobile-grid-75, .grid-80, .mobile-grid-80, .grid-85, .mobile-grid-85, .grid-90, .mobile-grid-90, .grid-95, .mobile-grid-95, .grid-100, .mobile-grid-100, .grid-33, .mobile-grid-33, .grid-66, .mobile-grid-66 {padding-left: 10px;padding-right: 10px;}
.grid-parent {padding-left: 0;padding-right: 0;}
.grid-parent-left {padding-left:0;}
.grid-parent-right {padding-right:0;}
/* Format setting */
h1,.h1,h2,.h2,h3,.h3,h4,.h4 {font-family:"ff-tisa-web-pro-1","ff-tisa-web-pro-2","Lucida Grande","Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei UI","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;line-height:120%;font-weight:normal;}
h1,.h1{font-size:36px;}
h2,.h2{font-size:30px;}
h3,.h3{font-size:24px;}
h4,.h4{font-size:18px;}
h5,.h5{font-size:14px;}
h6,.h6{font-size:12px;}
/* Color styles */
/* Author's custom styles */
body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:140%;color:#333;background-color:#fff;overflow-x: hidden;}
a{color:#333;text-decoration:none;}
a:hover,a:focus{color:#555;text-decoration:underline;}
.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-submenu:hover>a,.dropdown-submenu:focus>a {background-color:var(--primary-color);}
.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus{background-color:var(--primary-color);}
.pagination ul>li>a:hover,.pagination ul>li>a:focus,.pagination ul>.active>a,.pagination ul>.active>span{background:var(--primary-color);}
.pagination ul>.active>a,.pagination ul>.active>span{background:var(--primary-color);}
.pager li > a:hover,.pager li > a:focus {background-color: var(--primary-color);border-color: var(--primary-color);}
textarea:focus,input[type="text"]:focus,input[type="password"]:focus,input[type="tel"]:focus {border-color:var(--primary-color);}
.btn-style { background-color: var(--primary-color);}
.btn-style:hover, .btn-style:focus { background-color:var(--primary-color); }
.owl-theme .owl-nav [class*=owl-]:hover{background:var(--primary-color)!important;}
.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:var(--primary-color)!important;}
.tooltipster-default {background:var(--primary-color);}
.tooltipster-float {background:#4dc247;}
mark{background:#ff0 !important;color:#000;}
.advanced_search{border: 1px solid #DDD;background: #F7F7F7;margin-bottom: 10px;padding: 8px 10px 3px 10px;}
.gallery-wall { margin-left:-10px; margin-right:-10px;}
.gallery-wall a { display:block; height:150px;}
.gallery-wall .photo-style {display: block;margin-bottom:20px;}
.image-description { position: absolute;left: 0;right:0; bottom: 0; text-align:left; padding:5px 8px;background:rgba(0,0,0,.68);font-size:14px;color:#FFF;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
.image-frame { margin:5px; position: relative;}
.image-frame:before {position:absolute;left: -5px; right: -5px; top:-5px; bottom: -5px; background:#FFF;border:1px solid #DDD; content:'';z-index: 0;}
.image-frame a { position: relative; z-index: 1;display: block;width: 100%; overflow: hidden;}
.image-frame.active:before{ border-color:var(--primary-color);}
.thumbnail-frame{margin:5px; position: relative;}
.thumbnail-frame:before {position:absolute;left: -5px; right: -5px; top:-5px; bottom: -5px; background:#FFF;border:1px solid #eee; content:'';z-index: 0;}
.thumbnail-frame .cover { position: relative; z-index: 1;}
.page-tags{ margin-bottom: 20px;}
.page-tags > span{ font-size:14px; margin-right:5px; margin-bottom:5px;}
.page-tags .tags-lists{ display: inline-block; padding: 0; margin: 0;}
.page-tags .tags-lists li{ display: inline-block; margin-right: 5px;margin-bottom: 5px;}
.page-tags .tags-lists li a{ display: block; padding: 3px 5px; border: 1px solid #EEE; background-color: rgba(229, 229, 229, 0.6); color: #9F9E9C; border-radius: 3px;-webkit-transition-duration: 0.2s;transition-duration: 0.2s;}
.page-tags .tags-lists li a:hover{ text-decoration: none; background-color: rgba(229, 229, 229, 1); color: #646464;-webkit-transition-duration: 0.2s;transition-duration: 0.2s;border-color: #ddd;}
.form-inline { margin-left:-10px; margin-right:-10px;}
.form-inline label { display:block;}
.form-inline .grid-100 { margin-bottom:10px;}
.animation{-webkit-transition-duration: 0.2s;transition-duration: 0.2s;}
.hc-offcanvas-nav .nav-container, .hc-offcanvas-nav .nav-wrapper, .hc-offcanvas-nav ul{ background-color: var(--primary-color);}
.hc-offcanvas-nav.nav-levels-expand li.level-open>.nav-wrapper::before, .hc-offcanvas-nav.nav-levels-none li .nav-wrapper::before,
.hc-offcanvas-nav a.nav-next:before{ background-color: rgba(255,255,255,0.5);}
.hc-offcanvas-nav:not(.touch-device) li:not(.nav-item-custom) a:not([disabled]):hover{background-color: rgba(0,0,0,0.2);}
input[type=checkbox],input[type=radio] {border: 2px solid var(--primary-color);}
input[type=checkbox]:checked,input[type=checkbox]:indeterminate,input[type=radio]:checked:before {background: var(--primary-color);}

header { background-color: #fff;position: relative; z-index: 2;}
header .header-content{ padding:20px 0 0 0;background-color: #004878;text-align: center;}
header .flex-box{ align-items: center;}
header .right-content{ flex: 1;text-align: right;}
header .nav-bg{ background-color: var(--primary-color);}
header nav > ul{ margin: 0; padding: 0;font-size: 0;line-height: 0;text-align: center;}
header nav > ul > li{ display: inline-block;margin:0;position: relative;font-size: 14px;line-height: 100%;}
header nav > ul > li > a,
header nav > ul > li > span{ font-size: 16px;line-height:100%;display: block;cursor: pointer;padding: 15px 20px;color: #fff;}
header nav > ul > li > a:hover,
header nav > ul > li > a:focus,
header nav > ul > li > span:hover,
header nav > ul > li > span:focus,
header nav > ul > li.active > a,
header nav > ul > li.active > span{ text-decoration: none;background-color: rgba(255,255,255,0.05);color: #fff;}
header nav .dropdown-menu{ top: 100%;}
header .search-bar{padding: 0;margin: 0;}
header .search-bar .btn{ margin: 0;outline: none;box-shadow: none;}
header .search-btn,header .language-btn { display: inline-block;}
header .search-btn > a,header .language-btn > a{font-size: 24px;}
header .language{margin: 0 0 0 20px; padding: 0;}
header .language > li{ display: inline-block;margin-left: 20px; padding-left: 20px;border-left: 1px solid #ddd;}
header .language > li:first-child{ margin: 0; padding: 0; border-left: none;}

.more-arrow { margin-top: 20px;}
.more-arrow a{ display: inline-block;padding: 10px 20px;background-color: var(--primary-color);color: #fff;border-radius: 5px;}
.more-arrow a:hover{ text-decoration: none;}
.more-arrow a i{ width:0px;opacity: 0;transition: all 0.3s ease;}
.more-arrow a:hover i{width:16px;opacity: 1; margin-left: 10px;}

.index-title{ display: flex;align-items: center;margin-bottom: 20px;}
.index-title > span{ flex: 1;font-size: 24px;line-height: 100%;}
.index-title .more{ color: var(--primary-color);}
.index-title .more:hover,
.index-title .more:focus{ text-decoration: none;}
.index-box{ padding: 50px 0;}
.index-box.index-about .flex-box{ margin: 0 -10px;}
.index-box.index-about .flex-box .item{ margin: 0 10px;width: calc(50% - 20px);}
.index-box.index-about .tabs{margin: 0 0 20px 0;padding: 0;font-size: 0;line-height: 0;}
.index-box.index-about .tabs > li{ display: inline-block;font-size: 18px;line-height: 100%;margin-right: 10px;}
.index-box.index-about .tabs > li > p{margin: 0;}
.index-box.index-about .tabs > li a{ display: block;padding: 10px 20px;background-color: #e8f5fb;color: #000;border-radius: 5px;}
.index-box.index-about .tabs > li a:hover,
.index-box.index-about .tabs > li a:focus,
.index-box.index-about .tabs > li.active a{text-decoration: none; background-color: var(--primary-color);color: #fff;}
.index-box.index-news { position: relative;}
.index-box.index-news .news-pagination{ text-align: center;margin-top: 20px;}
.index-box.index-news .news-pagination span{ background-color: var(--primary-color);margin: 0 6px;}
.index-box.index-news .news-button-prev,
.index-box.index-news .news-button-next{ width: 48px;height: 48px;line-height: 48px;box-shadow: 0 0 10px rgba(0,0,0,0.1);background-color: #fff;text-align: center;font-size: 24px;color: var(--primary-color);border-radius: 100%;outline: none !important;cursor: pointer;position: absolute;top: calc(50% - 40px);z-index: 2;}
.index-box.index-news .news-button-prev{ left: 20px;}
.index-box.index-news .news-button-next{ right: 20px;}
.index-box.index-news .news-button-prev:hover,
.index-box.index-news .news-button-next:hover{ background-color: var(--primary-color);color: #fff;text-decoration: none;}
.index-box.index-news .news-button-prev.swiper-button-disabled,
.index-box.index-news .news-button-next.swiper-button-disabled{ background-color: #fff;color: var(--primary-color);text-decoration: none;cursor: default;opacity: 0.5;}
.news-box .cover{ margin-bottom: 20px;}
.news-box .cover a{ display: block;padding-top: 100%;border-radius: 5px;background-repeat: no-repeat;background-position: center center;background-size: 100%;transition: all 2s ease;}
.news-box:hover .cover a{ background-size: 120%;}
.news-box .date{ color: #aaaaaa;line-height: 100%;margin-bottom: 10px;}
.news-box .title a{ color: var(--primary-color);font-size: 16px;line-height: 140%;}
.news-box .title a:hover,
.news-box .title a:focus{ color: #000;text-decoration: none;}
.news-list .flex-box{ margin: 0 -10px;}
.news-list .flex-box .item{ margin: 0 10px 20px 10px;width: calc(25% - 20px);}

.page-title{ line-height: 100%;font-size: 36px;margin-bottom: 20px;text-align: center;}
.breadcrumb-box{ border-bottom: 1px solid #dedede;margin-bottom: 20px;}
.contact-form-box{ padding: 20px;border: 1px solid #dedede;border-radius: 10px;}
.contact-form-box > form{ max-width: 640px;margin:auto;}
.tabs.category{ margin: 0 -10px 10px -10px;padding: 0;display: flex;flex-wrap: wrap;}
.tabs.category > li{margin: 0 10px 10px 10px;width: calc(33.3333% - 20px);list-style-type: none;}
.tabs.category > li > a{ display: block;padding: 15px 20px;background-color: #e9ecef;color: #000;text-align: center;border-radius: 5px;font-size: 16px;line-height: 100%;}
.tabs.category > li > a:hover,
.tabs.category > li > a:focus,
.tabs.category > li.active > a{ text-decoration: none;background-color: var(--primary-color);color: #fff;}
.search-box{ padding: 20px;background-image: url("../img/search-bg.png");border-radius: 5px;margin-bottom: 20px;background-repeat: no-repeat;background-position: center center;background-size: cover;}
.search-box form label{ font-size: 18px;line-height: 100%;margin-bottom: 20px;color: #fff;}
.search-box form input{ display: block;padding: 10px;width: calc(100% - 20px);margin-bottom: 20px;}
.search-box form .btn{ margin: 0;border-radius: 5px;}
.search-box form .btn i{ margin-right: 10px;}
.search-box form .btn:hover{ opacity: 0.8;}
.search-box .category{display: flex;margin: 0 -10px;flex-wrap: wrap;padding: 0;}
.search-box .category > li{ list-style-type: none;width: calc(20% - 20px);margin: 0 10px 10px 10px;}
.search-box .category > li > a{display: block;background-color: #fff;color: var(--primary-color);text-align: center;padding: 5px;border-radius: 5px;}
.search-box .category > li > a:hover,
.search-box .category > li > a:focus,
.search-box .category > li.active > a{ background-color: var(--primary-color);color: #fff;text-decoration: none;}
.search-box .category > li > a img{ max-height: 60px;}
.search-box .category.handshape > li{width: calc(10% - 20px);}
.search-box .category.handshape > li > a img{ max-height: 60px;}
.search-result-title{ margin-bottom: 20px;}
.search-result-content .flex-box{ margin: 0 -10px;}
.search-result-content .flex-box .item{ margin: 0 10px 10px 10px;width: calc(25% - 20px);}
.search-result-content .flex-box .item a{ display: block;padding: 15px;border: 1px solid #dedede;border-radius: 5px;text-align: center;}
.search-result-content .flex-box .item a:hover,
.search-result-content .flex-box .item a:focus,
.search-result-content .flex-box .item a:active{ text-decoration: none;color: #fff;background-color: var(--primary-color);}
.action-content .flex-box{ margin: 0 -10px;}
.action-content .flex-box > div{ margin: 0 10px;width: calc(50% - 20px);}
.action-content .img-video{ text-align: center;}
.action-content .tabs{ margin:auto auto 20px auto;padding: 0;font-size: 0;line-height: 0;display: inline-block;border: 1px solid #dedede;border-radius: 5px;overflow: hidden;}
.action-content .tabs > li{ border-right: 1px solid #fff; font-size: 16px;line-height: 100%;display: inline-block;}
.action-content .tabs > li:last-child{ border: 0;}
.action-content .tabs > li > a{ display: block;padding: 15px; font-size: 16px;line-height: 100%;}
.action-content .tabs > li > a:hover,
.action-content .tabs > li > a:focus,
.action-content .tabs > li.active > a{ color: #fff;background-color: var(--primary-color);text-decoration: none;}
.action-content .title{ font-size: 24px;line-height: 100%;margin-bottom: 20px;}
.action-content .step{ margin: 0;padding: 0;}
.action-content .step p{ margin: 0;}
.action-content .step > li{ list-style-type: none;margin-bottom: 10px;padding: 15px;background-color: #F1F1F2;border-radius: 5px;}
.action-content .step > li:last-child{ margin-bottom: 0;}

footer{ background-color: var(--primary-color);color: #fff;}
footer .footer-content{ padding: 30px 0;}
footer .copyright{ text-align: center;padding: 20px 0;}

/*social-link*/
.social-link{ margin: 0; padding: 0;width: 100%;text-align: center;}
.social-link > li{ display: inline-block;margin: 0 10px;}
.social-link > li > a{font-size: 28px;}

/*page-sidebar*/
.sidebar-layout{ display: flex;}
.sidebar-layout .content-border{ flex: 1;width: 0;overflow: hidden;}
.sidebar{ width: 250px;margin: 0 20px 0 0;padding: 0;border-right: 1px solid #f3f3f3;}
.sidebar .list-title{text-align: center;color: #fff;padding: 20px;font-size: 24px;line-height: 100%; background-color: var(--primary-color);}
.sidebar > li{ list-style-type: none;}
.sidebar > li > a{ display: block; padding: 20px;color: #333;text-align: center;font-size: 18px;line-height: 100%;}
.sidebar > li > a:hover,
.sidebar > li > a:focus{ color: var(--primary-color);text-decoration: none;background-color: #f3f3f3;}
.sidebar > li.active > a{ color: var(--primary-color);text-decoration: none;}

/*tabs*/
.page-tabs{ margin: 0 0 20px 0;padding: 0;border-bottom: 1px solid #ddd;font-size: 0;line-height: 0;}
.page-tabs > li{font-size: 14px;line-height: 100%;display: inline-block;margin-right: 20px;margin-bottom:20px;}
.page-tabs > li > a{ display: block;padding: 15px;background-color: #f3f3f3;color: var(--primary-color);border-radius: 5px;transition: all 0.3s ease;line-height: 100%;}
.page-tabs > li.active > a,.page-tabs > li > a:hover,.page-tabs > li > a:focus{ background-color: var(--primary-color);color: #fff;text-decoration: none;}

/*slideshow*/
.slideshow{ text-align: center;overflow: hidden;}
.slideshow .swiper-pagination-bullets span{ background-color: #fff;margin: 0 6px !important;opacity: 1 !important;}
.slideshow .swiper-pagination-bullet-active{ background-color: var(--primary-color) !important;}
.slideshow .swiper-nav > div{ position: absolute; top: 50%; width: 36px; height: 36px; border-radius: 36px; background-color: var(--primary-color); color: #fff;font-size: 24px; margin-top: -16px;z-index:2;text-align: center; line-height: 32px;cursor: pointer;outline: none;}
.slideshow .swiper-nav > div:hover{background-color: #fff; color: var(--primary-color);}
.slideshow .swiper-nav .swiper-prev{ left: 20px;}
.slideshow .swiper-nav .swiper-next{ right: 20px;}
.slideshow .swiper-nav .swiper-prev i{ position: relative; left: -1px; top: 1px;}
.slideshow .swiper-nav .swiper-next i{ position: relative; right: -1px; top: 1px;}
.slideshow .swiper-nav > div.swiper-button-disabled{ opacity: 0.5;cursor: default;background-color: var(--primary-color);color: #fff;}

/*form*/
.form-inline .must{color: red;margin-left: 5px;}
.form-inline .input-btn{ display: flex;}
.form-inline .input-btn input{ width: 75%;}
.form-inline .input-btn button{display: block; padding: 10px 20px;width: 25%; background-color: var(--primary-color);color: #fff; text-align: center;margin:0;border: none;box-shadow: none;outline: none;}
.form-inline .input-btn button:hover,.form-inline .input-btn button:focus{ text-decoration: none; opacity: 0.8;}

/*mobile-menu-btn*/
.mobile-menu-btn{ display: none;position: relative;top: 2px;}
.mobile-menu-btn a{ font-size: 16px;position: relative;top: auto;width: auto;display: inline-block;padding-left: 35px;line-height: 24px;}
.mobile-menu-btn a:hover{ color: #fff;text-decoration: none;}
.mobile-menu-btn a .close {width: 35px;top: 50%;transform: translateY(-50%);transform-origin: 50% 50%;}
.mobile-menu-btn a .close,
.mobile-menu-btn a .close::before,
.mobile-menu-btn a .close::after {display: block;position: absolute;left: 0;height: 3px;background: #fff;transition: all .25s ease;border-radius: 3px;}
.mobile-menu-btn a .close::before,
.mobile-menu-btn a .close::after {content: '';width: 100%;}
.mobile-menu-btn a .close::before {top: -10px;}
.mobile-menu-btn a .close::after {bottom: -10px;}
.mobile-menu-btn a.toggle-open .close {background: rgba(0, 0, 0, 0);transform: rotate(45deg);}
.mobile-menu-btn a.toggle-open .close::before {transform: translate3d(0, 10px, 0);}
.mobile-menu-btn a.toggle-open .close::after {transform: rotate(-90deg) translate3d(11px, 0, 0);}
.mobile-menu-btn a:hover .close,
.mobile-menu-btn a:hover .close::before,
.mobile-menu-btn a:hover .close::after,
.mobile-menu-btn a.toggle-open .close,
.mobile-menu-btn a.toggle-open .close::before,
.mobile-menu-btn a.toggle-open .close::after {#fff;}

/*page-tools*/
.page-tools { margin: 0 0 20px 0;padding:20px;background-color: #f7f7f7;border-radius: 5px;}
.page-tools > div{ display: flex;align-items: center;}
.page-tools > div > *{ flex: 1;}
.page-tools .release-time{ color: #aaaaaa;}
.page-tools .release-time span{ margin-left: 20px;}
.page-tools .page-share { text-align: right;margin: 0;padding: 0;display: flex;align-items: center;justify-content: flex-end;}
.page-tools .page-share ul { list-style: none; margin:0; padding:0;}
.page-tools .page-share li { display:inline-block;margin-left:10px;color: #aaaaaa;}
.page-tools .page-share a,.page-tools .page-share span { cursor: pointer; color: #888; font-size:16px;}
.page-tools .page-share li.facebook a{ color: #3c5a99;}
.page-tools .page-share li.twitter a{ color: #1da1f2;}
.page-tools .page-share li.twitter img{ height: 14px;position: relative;top: -2px;}
.page-tools .page-share li.wechat a{ color: #4cc146;}
.page-tools .page-share li.weibo a{ color: #ea5514;}

/*search*/
ul.search-list { list-style:none; margin:0; padding:0;}
ul.search-list li{ border-bottom:1px dashed #DDD; padding:15px 0;display: flex;align-items: center;}
ul.search-list li .title{ flex: 1;}
.filterTypeGroupId{ padding: 5px;border-radius: 3px;background-color: var(--primary-color);color: #fff;font-size: 12px;line-height: 100%;margin-right: 20px;}
.filterTypeGroupId:hover,.filterTypeGroupId:focus{ text-decoration: none;color: #fff;opacity: 0.8;}
.filterType{ margin:20px 0 10px 0;}
.filterType > a{ display: inline-block;padding: 10px 20px; background-color: #666;color: #fff;border-radius: 5px;}
.filterType > a i{ margin-left: 10px;}
.filterType > a:hover,.filterType > a:focus{ text-decoration: none;background-color: var(--primary-color);}

/*gallery-box*/
.gallery-box { padding: 20px;border: 1px solid #dedede;border-radius: 10px;}
.gallery-box .swiper-nav > div{ position: absolute; top: 50%; width: 36px; height: 36px; border-radius: 36px; background-color: var(--primary-color); color: #fff;font-size: 24px; margin-top: -16px;z-index:2;text-align: center; line-height: 32px;cursor: pointer;outline: none;border: 2px solid var(--primary-color);}
.gallery-box .swiper-nav > div:hover{background-color: #fff; color: var(--primary-color);}
.gallery-box .swiper-nav .swiper-prev{ left: 20px;}
.gallery-box .swiper-nav .swiper-next{ right: 20px;}
.gallery-box .swiper-nav .swiper-prev i{ position: relative; left: -1px; top: 1px;}
.gallery-box .swiper-nav .swiper-next i{ position: relative; right: -1px; top: 1px;}
.gallery-box .swiper-nav > div.swiper-button-disabled{ opacity: 0.5;cursor: default;background-color: #fff;color:var(--primary-color);}
.gallery-top{ text-align: center;}
.gallery-thumbs{ margin: 0 -10px;}
.gallery-thumbs .swiper-slide .border{ border: 1px solid transparent; overflow: hidden;position: relative;}
.gallery-thumbs .swiper-slide.swiper-slide-thumb-active .border{ border-color: var(--primary-color);}
.gallery-thumbs .swiper-slide a{ display: block; padding-top: 60%; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.gallery-thumbs .swiper-nav > div{ position: absolute; top: 50%; width: 36px; height: 36px; border-radius: 36px; color: var(--primary-color); background-color: #fff;font-size: 24px; margin-top: -16px;z-index:2;text-align: center; line-height: 32px;cursor: pointer; box-shadow: 0 0 10px rgba(0,0,0,0.1);border: none;}
.gallery-thumbs .swiper-nav > div:hover{ color: #fff;background-color: var(--primary-color);}

/*progress-bar*/
@-webkit-keyframes progress-bar-stripes {
  from {background-position:1rem 0;}
  to {background-position:0 0;}
;}
@keyframes progress-bar-stripes {
  from {background-position:1rem 0;}
  to {background-position:0 0;}
;}
.progress {display:-ms-flexbox;display:flex;height:1rem;overflow:hidden;font-size:.75rem;background-color:#e9ecef;border-radius:.25rem;}
.progress-bar {display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;overflow:hidden;color:#fff;text-align:center;white-space:nowrap;background-color:#007bff;transition:width .6s ease;}
@media (prefers-reduced-motion:reduce) {
  .progress-bar {transition:none;}
;}
.progress-bar-striped {background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem;}
.progress-bar-animated {-webkit-animation:progress-bar-stripes 1s linear infinite;animation:progress-bar-stripes 1s linear infinite;}
@media (prefers-reduced-motion:reduce) {
  .progress-bar-animated {-webkit-animation:none;animation:none;}
;}

/*Default class*/
.list-layout{ margin: 0 -10px;}
.hidden-y{overflow-y: hidden;}
.preview-bar{ padding: 20px; background-color: red;color:#fff; text-align: center; font-size: 24px; line-height: 100%;}
.preview-bar i{ margin-right: 10px;}
.go-top{position:fixed;bottom:20px;right:20px;background:var(--primary-color);text-decoration:none;color:white;font-size:24px;display:none;filter:Alpha(Opacity=50);opacity:.5; z-index:9999;width:50px;height: 50px; line-height: 50px; text-align: center;border-radius: 100%;}
.go-top:hover{color:#FFF;text-decoration:none;filter:Alpha(Opacity=100);opacity:1;}
#wechat_qrcode{ padding: 20px;background-color: #fff;}
.click-dropdown{ position: relative;}
.click-dropdown .content{ position: absolute; right: 0; top: 300%; background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1);-webkit-transition-duration: 0.2s;transition-duration: 0.2s;visibility:hidden; opacity: 0;z-index: 2;}
.click-dropdown.active .content{ top: 120%;visibility:visible; opacity: 1;-webkit-transition-duration: 0.2s;transition-duration: 0.2s;}
.mobile-clickr-dropdown > a{ display: none;}
.mobile-clickr-dropdown .content{ position: relative; top: auto; right: auto;opacity: 1; visibility:visible;box-shadow: none; background: transparent;}

/* responsive layout styles */
@media(max-width:1240px){
.header-content{ padding:0 20px;}
.index-box{ padding: 50px 20px;}
#content{padding: 0 20px;}
footer .copyright{padding: 20px;}
}
@media(max-width:960px){
.sidebar{ width: 200px;}
.sidebar > li { margin-bottom: 10px;}
.sidebar > li > a{ padding: 10px; font-size: 14px;}
.page-tabs > li{ margin-right: 10px;}
.page-tabs > li > a{padding: 10px 15px;}
.news-list .flex-box .item{width: calc(33.3333% - 20px);}
.search-box .category > li{width: calc(25% - 20px);}
.search-box .category.handshape > li{width: calc(20% - 20px);}
.search-result-content .flex-box .item{width: calc(33.3333% - 20px);}
}
@media(max-width:767px){
.hidden-desktop{display: block !important;}
.hidden-phone{display: none !important;}
.mobile-text-left{text-align:left;}
.mobile-text-right{text-align:right;}
.mobile-text-center{text-align:center;}
.enter-content img{max-width:100%;height:auto;}
table { margin-bottom: 0;}
div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden;}
div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden;}
table td,table th { position: relative; white-space: nowrap; overflow: hidden;}
.grid-parent-left {padding-right:0;}
.grid-parent-right {padding-left:0;}
.mobile-grid-parent{ padding: 0;}
.list-layout{margin: 0;}
.mobile-list-layout{margin: 0 -10px;}
.form-inline .grid-50{ margin-bottom: 10px;}
.form-inline .input-btn input{ width: 60%;}
.form-inline .input-btn button{ padding: 10px;width: 40%;font-size: 12px;}

/* Author's custom styles */
.logo img{max-width:100%;height:auto;max-height: 180px;}
nav{ display: none !important;}
nav.hc-offcanvas-nav{ display: block !important;}
.mobile-menu-btn{ display: inline-block;}
.mobile-clickr-dropdown > a{ display: block;}
.mobile-clickr-dropdown .content{ position: absolute; right: 0; top: 300%; background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1);-webkit-transition-duration: 0.2s;transition-duration: 0.2s;visibility:hidden; opacity: 0;z-index: 2;}
.mobile-clickr-dropdown.active .content{ top: 120%;}
header .language-btn{ margin: 0 20px;}
header .language{ margin: 0;}
header .language > li{ display: block;margin: 0; padding: 0;border-left: none;border-bottom:1px solid #f3f3f3;}
header .language > li:last-child{ border-bottom: none;}
header .language > li > a{font-size: 14px; display: block; padding: 10px 20px; text-align: center;}
header .language > li > a:hover{ color: #fff;text-decoration: none;background-color: var(--primary-color);}
.mobile-clickr-dropdown.search-btn .content{ right: -100px;}
nav .dropdown .fa{ display: none;}
.page-tools > div{ display: block;}
.page-tools .page-share{ justify-content: start;margin-top: 10px;}
.page-tools .page-share li{ margin: 0 10px 0 0;}
.sidebar-layout{ display: block;}
.sidebar-layout .content-border{ width: auto;}
.sidebar-dropdown{ margin-bottom: 20px;}
.sidebar-dropdown a{ display: block; padding: 10px 20px; background-color: #f3f3f3;text-align: center;}
.sidebar-dropdown a:hover,
.sidebar-dropdown a:focus{text-decoration: none;}
.sidebar-dropdown.active{margin-bottom: 0;}
.sidebar-dropdown.active a{ color: #fff;background-color: var(--primary-color);text-decoration: none;}
.sidebar-dropdown a i{ margin-left: 10px;transition: all 0.3s ease;}
.sidebar-dropdown.active a i{transform:rotate(180deg);-ms-transform:rotate(180deg);-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-o-transform:rotate(180deg);}
.sidebar{ display: none;background-color: #f3f3f3; text-align: center;width: auto;margin: 0;overflow: hidden;}
.sidebar.active{ display: block;margin-bottom: 20px;}
.sidebar .list-title{ display: none;}
.sidebar > li { border-bottom: 1px solid #ddd;margin-bottom: 0;}
.sidebar > li:last-child{ border: none;}
.sidebar > li > a{text-align: center;font-weight: normal;font-size: 12px;}
.page-title-box{ padding: 30px 20px;}
.page-title-box .page-title{ margin-bottom: 10px;font-size: 24px;}

.nav-bg{ text-align: right;padding: 10px 20px;}
.index-box{ padding: 20px;}
.index-box.index-about .tabs > li > a{ font-size: 14px;}
.index-box.index-about .flex-box .item{width: calc(100% - 20px);}
.index-box.index-about .flex-box .item:first-child{ margin-bottom: 20px;}
.page-title{ font-size: 24px;}
.news-list .flex-box .item{width: calc(50% - 20px);}
.tabs.category > li > a{ padding: 10px;font-size: 14px;}
.search-box{ max-height: 240px;overflow: auto;}
.search-box .category > li{width: calc(50% - 20px);}
.search-box .category.handshape > li{width: calc(25% - 20px);}
.search-result-content .flex-box .item{width: calc(50% - 20px);}
.action-content .flex-box > div{ width: calc(100% - 20px);}
.action-content .flex-box > .text{ margin-top: 20px;}
}