@charset "utf-8";

/* CSS Document */

body,
html {
  background-color: #ffffff;
  color: #000000;
  font-size: 16px;
  line-height: 1.75rem;
  margin: 0px;
  padding: 0px;
  position: relative;
  font-family: 'Montserrat', '\5FAE\8EDF\6B63\9ED1\9AD4', 'Microsoft JhengHei', Helvetica, Arial, sans-serif !important;
}


.header .logo {
  background-image: url("../images/eva_logo_green.png");
  background-size: auto 75px;
  background-position: 15px 0px;
  width: 420px;
  height: 75px;
  background-color: transparent;
  background-repeat: no-repeat;
  cursor: pointer;
}

@media handheld,
screen and (max-width: 1024px) {
  .header .logo {
    background-image: url("../images/eva_logo_green.png");
    background-size: auto 75px;
    background-position: 0px 0px;
    width: 230px;
    height: 75px;
  }
}

@media handheld,
screen and (max-width: 480px) {
  .header .logo {
    background-image: url("../images/eva_logo_green.png");
    background-size: auto 75px;
    background-position: 0px 0px;
    width: 85px;
    height: 65px;
  }
}

p,
div,
span,
a {
  font-size: 16px;
  line-height: 1.75rem;
}

a:link {
  color: #ea842c;
  text-decoration: none;
}

a:visited {
  text-decoration: underline;
  color: #ea842c;
}

a:hover {
  text-decoration: underline;
  color: #ea842c;
}

a:active {
  text-decoration: underline;
  color: #ea842c;
}

a {
  outline: none;
  border: none;
}

.text-primary {
  color: #ea842c !important;
}

.btn-primary {
  color: #FFFFFF;
  background-color: #ea842c !important;
  border-color: #ea842c !important;
}

.btn-primary:hover {
  color: #FFFFFF;
  background-color: #fa7500 !important;
  border-color: #fa7500 !important;
  box-shadow: none !important;
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary.dropdown-toggle:focus {
  box-shadow: none !important;
}

.green {
  color: #639259;
}

.brown {
  color: #ea842c;
}

.btn {
  border-radius: 50px !important;
}

.bg-light {
  background-color: #ea842c !important;
}

h2 {
  border-left: 5px solid #ea842c;
  padding-left: 10px;
}

p {
  margin: 0px;
  padding: 0px 0px 10px 0px;
}

.footer .organizer_row .t_team {
  float: none;
  width: 100%;
}

.h10 {
  height: 10px;
}

.h20 {
  height: 20px;
}

.space {
  clear: both;
  line-height: 0px;
  height: 0px;
  width: 100%;
}

.space5 {
  clear: both;
  line-height: 0px;
  height: 5px;
  width: 100%;
}

.space10 {
  clear: both;
  line-height: 0px;
  height: 10px;
  width: 100%;
}

.space15 {
  clear: both;
  line-height: 0px;
  height: 15px;
  width: 100%;
}

.space20 {
  clear: both;
  line-height: 0px;
  height: 20px;
  width: 100%;
}

.space25 {
  clear: both;
  line-height: 0px;
  height: 25px;
  width: 100%;
}

.space30 {
  clear: both;
  line-height: 0px;
  height: 30px;
  width: 100%;
}

.space35 {
  clear: both;
  line-height: 0px;
  height: 35px;
  width: 100%;
}

.space40 {
  clear: both;
  line-height: 0px;
  height: 40px;
  width: 100%;
}

.space45 {
  clear: both;
  line-height: 0px;
  height: 35px;
  width: 100%;
}

.space50 {
  clear: both;
  line-height: 0px;
  height: 40px;
  width: 100%;
}

.space55 {
  clear: both;
  line-height: 0px;
  height: 35px;
  width: 100%;
}

.space60 {
  clear: both;
  line-height: 0px;
  height: 40px;
  width: 100%;
}

.alert {
  /*color: #ea842c;*/
  font-weight: 600;
}

.small {
  font-size: 13px;
}


/* smooth scroll to anchor */

* {
  scroll-behavior: smooth;
}


/* wrapper */

.wrapper {
  min-width: 320px;
  margin: 0px;
  padding: 0px;
  /*overflow: auto;*/
}

.content_frame {
  margin: 0px;
  padding: 0px;
  width: 100%;
  /*overflow: auto;*/
}

.content_frame.fixed {
  position: fixed;
}

.content {
  min-height: calc(100vh - 477px);
}

@media handheld,
screen and (max-width: 1024px) {
  .content {
    min-height: calc(100vh - 433px);
  }
}

@media handheld,
screen and (max-width: 768px) {
  .content {
    min-height: calc(100vh - 500px);
  }
}


/* header */

.header {
  position: fixed;
  top: 0px;
  height: 109px;
  margin: 0px;
  padding: 0px;
  background-color: #ffffff;
  width: 100%;
  border-bottom: 1px solid #ebe9f1;
  z-index: 7000;
  min-width: 320px;
  -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);
}

@media handheld,
screen and (max-width: 1024px) {
  .header .logo {
    margin-left: 60px;
  }
}

.inner_frame {
  max-width: 1200px;
  width: 100%;
  margin: 0px auto;
  position: relative;
}


/* menu */

#menuToggle {
  display: block;
  position: absolute;
  background: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  top: 75px;
  left: 0px;
  z-index: 5000;
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
}

#menuToggle .toggle_btn {
  display: none;
}

#menuToggle input {
  display: none;
}

#menu {
  position: relative;
  width: 100%;
  max-width: 1160px;
  left: 0px;
  top: 0px;
  margin: auto;
  padding: 0px;
  color: #ffffff;
  background: #ffffff;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-around;
  column-gap: 0px;
}

#menu:before {
  display: none;
}

#menu li {
  text-align: center;
  line-height: 34px;
  margin-bottom: 0px;
  cursor: pointer;
  white-space: nowrap;
}

#menu li>a {
  padding: 0px 20px;
}

#menu li:hover a {
  border-bottom: 5px solid #ea842c;
}

#menu li>a:hover {
  color: #ea842c !important;
}

#menu li.active>a {
  color: #ea842c !important;
  border-bottom: 5px solid #ea842c;
  background-color: #ffffff;
}

#menu li li.active>a {
  background-color: #d2ccf5;
}

/* submenu */
#menu li {
  position: relative;
  display: block !important;
  transition-duration: 0.5s;
  padding: 0px;
  height: 44px;
}

#menu li a:link {
  display: inline-block;
  width: 100%;
  height: 100%;
  line-height: 34px;
  transition: all 0.5s ease;
  border-top: 5px solid transparent;
}

#menu li:hover {
  cursor: pointer;
}

ul#menu li ul {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transition: all 0.5s ease;
  top: 44px;
  left: 0;
  display: none;
  background: #ffffff;
  min-width: 100%;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  -webkit-box-shadow: 0px 0px 12px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 12px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 12px 1px rgba(0, 0, 0, 0.1);
  border-radius: 0px;
  overflow: hidden;
}

ul#menu li:hover>ul,
ul#menu li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

ul#menu li ul li {
  height: inherit;
  color: #000000;
  clear: both;
  min-width: 100%;
  border-top: 0px;
  border-bottom: 0px;
  margin: 0px;
  text-align: left;
  border-bottom: 0px solid #eaeaea;
}

ul#menu li ul li a {
  padding: 8px 12px;
  border-left: 5px solid transparent !important;
  border-top: 0px !important;
  border-bottom: 0px !important;
  transition: all 0.5s ease;
}

ul#menu li ul li a {
  color: #000000 !important;
  text-align: left;
}

ul#menu li ul li:hover a {
  border-top: 0px !important;
  background: #ea842c;
  /*border-left: 5px solid #1a9431!important;*/
}

#menuToggle #menu input {
  display: none;
}


#menuToggleRight {
  float: right;
  position: absolute;
  right: 130px;
  top: 4px;
  z-index: 6000;
}

#menuToggleRight input {
  display: none;
}

#menuToggleRight .toggle_btn {
  display: none;
}

#menuRight {
  position: relative;
  width: 100%;
  max-width: 1160px;
  left: 0px;
  top: 0px;
  margin: auto;
  padding: 0px;
  color: #ffffff;
  background: transparent;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-around;
  column-gap: 10px;
}

#menuRight span {
  color: #ea842c;
  font-size: 25px;
  line-height: 65px;
  width: 60px;
  display: block;
}

#menuRight:before {
  display: none;
}

#menuRight li {
  text-align: center;
  line-height: 34px;
  margin-bottom: 0px;
  cursor: pointer;
  white-space: nowrap;
  width: 100%;
}

#menuRight li:hover>a {
  border-top: 5px solid #ea842c;
}

#menuRight li.active>a {
  border-top: 5px solid #ea842c;
  background-color: #ea842c;
}

/* submenu */
#menuRight li {
  position: relative;
  display: block !important;
  transition-duration: 0.5s;
  padding: 0px;
  height: 44px;
}

#menuToggleRight .login_btn {
  display: block;
  width: 60px;
  height: 65px;
  text-align: center;
}

#menuToggleRight .login_btn span {
  color: #ea842c;
  font-size: 25px;
  width: 60px;
  line-height: 65px;
}

#menuToggleRight .login_btn a {
  color: #ea842c;
  font-size: 25px;
  width: 60px;
  line-height: 65px;
  text-decoration: none;
}

#menuRight li a:link {
  display: inline-block;
  width: 100%;
  height: 100%;
  line-height: 34px;
  transition: all 0.5s ease;
  border-top: 5px solid transparent;
}

#menuRight li:hover {
  cursor: pointer;
}

ul#menuRight li ul {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transition: all 0.5s ease;
  top: 65px;
  right: 0;
  display: none;
  background: #ffffff;
  min-width: 100%;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  -webkit-box-shadow: 0px 0px 12px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 12px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 12px 1px rgba(0, 0, 0, 0.1);
  border-radius: 0px;
  overflow: hidden;
}

ul#menuRight li:hover>ul,
ul#menuRight li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

ul#menuRight li ul li {
  height: inherit;
  color: #000000;
  clear: both;
  min-width: 100%;
  border-top: 0px;
  border-bottom: 0px;
  margin: 0px;
  text-align: left;
  border-bottom: 1px solid #eaeaea;
}

ul#menuRight li ul li a {
  padding: 8px 12px;
  border-left: 5px solid transparent !important;
  border-top: 0px !important;
  border-bottom: 0px !important;
  transition: all 0.5s ease;
}

ul#menuRight li ul li a {
  color: #000000 !important;
  text-align: left;
}

ul#menuRight li ul li:hover a {
  border-top: 0px !important;
  text-decoration: none;
  color: #ffffff;
  background-color: #ea842c;
}

ul#menuRight li ul li a:hover {
  color: #ffffff !important;
  background-color: #ea842c;
}

/*
ul#menuRight li:nth-child(1) ul li:hover a { border-top: 0px!important; border-left: 5px solid #ac2e45!important; }
ul#menuRight li:nth-child(2) ul li:hover a { border-top: 0px!important; border-left: 5px solid #ea842c!important; }
ul#menuRight li:nth-child(3) ul li:hover a { border-top: 0px!important; border-left: 5px solid #1a9431!important; }
ul#menuRight li:nth-child(4) ul li:hover a { border-top: 0px!important; border-left: 5px solid #ff0000!important; }
ul#menuRight li:nth-child(5) ul li:hover a { border-top: 0px!important; border-left: 5px solid #0860a8!important; }
ul#menuRight li:nth-child(6) ul li:hover a { border-top: 0px!important; border-left: 5px solid #99cf16!important; }
ul#menuRight li:nth-child(7) ul li:hover a { border-top: 0px!important; border-left: 5px solid #9a3b26!important; }
*/
#menuToggleRight #menuRight input {
  display: none;
}


#menuUpload {
  float: right;
  position: absolute;
  right: 170px;
  top: 4px;
  z-index: 6000;
}



#evaairlogo {
  float: right;
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 6000;
}

#evaairlogo img{
margin: 10px 5px 0px;
    width: 120px;
  height:auto;
  display:block;
}

#menuUpload .toggle_btn {
  display: block;
  width: 60px;
  height: 65px;
  text-align: center;
}

#menuUpload .toggle_btn a {
  color: #ea842c;
  font-size: 25px;
  width: 60px;
  line-height: 65px;
}

#menuToggleLanguage {
  float: right;
  position: absolute;
  right: 140px;
  top: 0px;
  z-index: 6000;
}

#menuToggleLanguage input {
  display: none;
}

#menuToggleLanguage .toggle_btn {
  display: none;
}

#menuLanguage {
  position: relative;
  width: 100%;
  max-width: 1160px;
  left: 0px;
  top: 0px;
  margin: auto;
  padding: 0px;
  color: #ffffff;
  background: transparent;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-around;
  column-gap: 10px;
}

#menuLanguage span {
  color: #ea842c;
  font-size: 16px;
  line-height: 65px;
  width: 60px;
  display: block;
}

#menuLanguage:before {
  display: none;
}

#menuLanguage li {
  text-align: center;
  line-height: 34px;
  margin-bottom: 0px;
  cursor: pointer;
  white-space: nowrap;
  width: 100%;
}

#menuLanguage li:hover>a {
  border-top: 5px solid #ea842c;
}

#menuLanguage li.active>a {
  border-top: 5px solid #ea842c;
  background-color: #ea842c;
}

/* submenu */
#menuLanguage li {
  position: relative;
  display: block !important;
  transition-duration: 0.5s;
  padding: 0px;
  height: 44px;
}

#menuLanguage li a:link {
  display: inline-block;
  width: 100%;
  height: 100%;
  line-height: 34px;
  transition: all 0.5s ease;
  border-top: 5px solid transparent;
}

#menuLanguage li:hover {
  cursor: pointer;
}

ul#menuLanguage li ul {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transition: all 0.5s ease;
  top: 65px;
  right: 0;
  display: none;
  background: #ffffff;
  min-width: 100%;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  -webkit-box-shadow: 0px 0px 12px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 12px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 12px 1px rgba(0, 0, 0, 0.1);
  border-radius: 0px;
  overflow: hidden;
}

ul#menuLanguage li:hover>ul,
ul#menuLanguage li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

ul#menuLanguage li ul li {
  height: inherit;
  color: #000000;
  clear: both;
  min-width: 100%;
  border-top: 0px;
  border-bottom: 0px;
  margin: 0px;
  text-align: left;
  border-bottom: 1px solid #eaeaea;
}

ul#menuLanguage li ul li a {
  padding: 8px 12px;
  border-left: 5px solid transparent !important;
  border-top: 0px !important;
  border-bottom: 0px !important;
  transition: all 0.5s ease;
}

ul#menuLanguage li ul li a {
  color: #000000 !important;
  text-align: left;
}

ul#menuLanguage li ul li:hover a {
  border-top: 0px !important;
  text-decoration: none;
  color: #ffffff;
  background-color: #ea842c;
}

ul#menuLanguage li ul li a:hover {
  color: #ffffff !important;
  background-color: #ea842c;
}

/*
/*
ul#menuLanguage li:nth-child(1) ul li:hover a { border-top: 0px!important; border-left: 5px solid #ac2e45!important; }
ul#menuLanguage li:nth-child(2) ul li:hover a { border-top: 0px!important; border-left: 5px solid #ea842c!important; }
ul#menuLanguage li:nth-child(3) ul li:hover a { border-top: 0px!important; border-left: 5px solid #1a9431!important; }
ul#menuLanguage li:nth-child(4) ul li:hover a { border-top: 0px!important; border-left: 5px solid #ff0000!important; }
ul#menuLanguage li:nth-child(5) ul li:hover a { border-top: 0px!important; border-left: 5px solid #0860a8!important; }
ul#menuLanguage li:nth-child(6) ul li:hover a { border-top: 0px!important; border-left: 5px solid #99cf16!important; }
ul#menuLanguage li:nth-child(7) ul li:hover a { border-top: 0px!important; border-left: 5px solid #9a3b26!important; }
*/
#menuToggleLanguage #menuLanguage input {
  display: none;
}

#menuToggleOverlay {
  display: none;
}

#menuToggleOverlay .menu_overlay {
  display: none;
}

@media handheld,
screen and (max-width: 1024px) {
  #menuToggle {
    display: block;
    position: absolute;
    background: transparent;
    border-top: 0px;
    top: 0px;
    left: 0px;
    right: inherit;
    z-index: 5000;
    -webkit-user-select: none;
    user-select: none;
    width: auto;
  }

  #menuToggle input {
    display: block;
    width: 60px;
    height: 65px;
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0px;
    cursor: pointer;
    opacity: 0;
    /* hide this */
    z-index: 2;
    /* and place it over the hamburger */
    -webkit-touch-callout: none;
  }

  #menuToggle .toggle_btn {
    display: block;
    width: 60px;
    height: 65px;
    text-align: center;
  }

  #menuToggle .toggle_btn span {
    color: #ea842c;
    font-size: 25px;
    width: 60px;
    line-height: 65px;
  }

  /*#menuToggle .toggle_btn span { display: block; width: 25px; height: 3px; margin-bottom: 6px; position: relative; background: #ea842c; z-index: 1; transform-origin: 6px 6px; transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; -o-transform-origin: 6px 6px; -o-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; -ms-transform-origin: 6px 6px; -ms-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; -moz-transform-origin: 6px 6px; -moz-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; -webkit-transform-origin: 6px 6px; -webkit-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; }
    #menuToggle .toggle_btn span:first-child { transform-origin: 0% 0%; -o-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; }
    #menuToggle .toggle_btn span:nth-last-child(2) { transform-origin: 0% 100%; -o-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -webkit-transform-origin: 0% 100%; }*/
  /*#menuToggle input:checked~.toggle_btn span { opacity: 1; transform: rotate(45deg) translate(-13px, -8px); -o-transform: rotate(45deg) translate(-13px, -8px); -ms-transform: rotate(45deg) translate(-13px, -8px); -moz-transform: rotate(45deg) translate(-13px, -8px); -webkit-transform: rotate(45deg) translate(-13px, -8px); background: #ea842c; }
    #menuToggle input:checked~.toggle_btn span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); -o-transform: rotate(0deg) scale(0.2, 0.2); -ms-transform: rotate(0deg) scale(0.2, 0.2); -moz-transform: rotate(0deg) scale(0.2, 0.2); -webkit-transform: rotate(0deg) scale(0.2, 0.2); }
    #menuToggle input:checked~.toggle_btn span:nth-last-child(2) { transform: rotate(-45deg) translate(-4px, 8px); -o-transform: rotate(-45deg) translate(-4px, 8px); -ms-transform: rotate(-45deg) translate(-4px, 8px); -moz-transform: rotate(-45deg) translate(-4px, 8px); -webkit-transform: rotate(-45deg) translate(-4px, 8px); }*/
  #menu {
    position: absolute;
    left: 0px;
    top: 65px;
    margin: 0px;
    width: 250px;
    padding: 25px 25px 25px 0px;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    display: block;
    transform-origin: 0% 0%;
    transform: translate(-100%, 0px);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
    -o-transform-origin: 0% 0%;
    -o-transform: translate(-100%, 0px);
    -o-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
    -ms-transform-origin: 0% 0%;
    -ms-transform: translate(-100%, 0px);
    -ms-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
    -moz-transform-origin: 0% 0%;
    -moz-transform: translate(-100%, 0px);
    -moz-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
    -webkit-transform-origin: 0% 0%;
    -webkit-transform: translate(-100%, 0px);
    -webkit-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  }

  /*#menu:before { position: absolute; top: -10px; left: 16px; content: ""; display: block; width: 0px; height: 0px; border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 14px solid #ea842c; }*/
  #menu li {
    float: none;
    padding: 0px 0px 25px 20px;
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 22px;
    width: auto;
    height: 20px;
    background-repeat: no-repeat;
    background-position: left center;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
  }

  #menu li:last-child {
    margin-bottom: 0px;
  }

  #menuToggle input:checked~ul {
    transform: none;
    -o-transform: none;
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
  }

  #menu li {
    border-top: 0px solid transparent;
    border-bottom: 0px solid transparent;
  }

  #menu li:hover a,
  #menu li.active a {
    border-bottom: 0px;
    border-left: 5px solid #ea842c !important;
  }

  /*#menu li:nth-child(1):hover a, #menu li:nth-child(1).active a { border-top: 0px; border-left: 5px solid #ac2e45; }
    #menu li:nth-child(2):hover a, #menu li:nth-child(2).active a { border-top: 0px; border-left: 5px solid #ea842c; }
    #menu li:nth-child(3):hover a, #menu li:nth-child(3).active a { border-top: 0px; border-left: 5px solid #1a9431; }
    #menu li:nth-child(4):hover a, #menu li:nth-child(4).active a { border-top: 0px; border-left: 5px solid #ff0000; }
    #menu li:nth-child(5):hover a, #menu li:nth-child(5).active a { border-top: 0px; border-left: 5px solid #0860a8; }
    #menu li:nth-child(6):hover a, #menu li:nth-child(6).active a { border-top: 0px; border-left: 5px solid #99cf16; }
    #menu li:nth-child(7):hover a, #menu li:nth-child(7).active a { border-top: 0px; border-left: 5px solid #9a3b26; }*/
  ul#menu li ul {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
  }

  #menu {
    padding: 25px 0px;
  }

  #menu li {
    height: auto;
    /*padding: 8px 12px 8px 16px;*/
    padding: 0px;
    margin-bottom: 0px;
  }

  #menu li a {
    display: block;
    width: 100%;
    padding: 10px 12px 10px 16px;
  }

  #menu li a:link {
    line-height: inherit;
    border-top: 0px;
    border-left: 5px solid transparent;
  }

  ul#menu li ul li {
    padding: 0px;
  }

  ul#menu li ul li a {
    padding: 10px 12px 10px 32px;
  }

  ul#menu li:hover>ul,
  ul#menu li ul:hover {
    visibility: hidden;
    opacity: 0;
    display: none;
  }

  #menuToggle #menu input {
    display: block;
    width: 100%;
    height: 42px;
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0px;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    -webkit-touch-callout: none;
  }

  #menuToggle #menu input:hover~a {
    color: #ea842c !important;
    text-decoration: none;
  }

  #menuToggle #menu input:checked~ul {
    visibility: visible;
    opacity: 1;
    display: block;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-radius: 0px;
    overflow: hidden;
  }

  ul#menu li:nth-child(1) input:checked~a {
    border-top: 0px !important;
  }

  /*
    ul#menu li:nth-child(1) input:checked~a { border-top: 0px!important; border-left: 5px solid #ac2e45!important; }
    ul#menu li:nth-child(2) input:checked~a { border-top: 0px!important; border-left: 5px solid #ea842c!important; }
    ul#menu li:nth-child(3) input:checked~a { border-top: 0px!important; border-left: 5px solid #1a9431!important; }
    ul#menu li:nth-child(4) input:checked~a { border-top: 0px!important; border-left: 5px solid #ff0000!important; }
    ul#menu li:nth-child(5) input:checked~a { border-top: 0px!important; border-left: 5px solid #0860a8!important; }
    ul#menu li:nth-child(6) input:checked~a { border-top: 0px!important; border-left: 5px solid #99cf16!important; }
    ul#menu li:nth-child(7) input:checked~a { border-top: 0px!important; border-left: 5px solid #9a3b26!important; }
    */
  #menuToggleRight {
    display: block;
    position: absolute;
    background: transparent;
    top: 4px;
    left: inherit;
    right: 130px;
    z-index: 5000;
    -webkit-user-select: none;
    user-select: none;
    width: auto;
  }

  #menuToggleRight input {
    display: block;
    width: 60px;
    height: 65px;
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0px;
    cursor: pointer;
    opacity: 0;
    /* hide this */
    z-index: 2;
    /* and place it over the hamburger */
    -webkit-touch-callout: none;
  }

  #menuToggleRight .toggle_btn {
    display: block;
    width: 60px;
    height: 65px;
    text-align: center;
  }

  #menuToggleRight .toggle_btn span {
    color: #ea842c;
    font-size: 25px;
    width: 60px;
    line-height: 65px;
  }

  #menuRightFrame {
    overflow: hidden;
    height: 0px;
    display: block;
    position: absolute;
    top: 65px;
    right: 0px;
    width: 180px;
  }

  #menuRight span {
    display: none;
  }

  #menuRight {
    display: block;
    position: absolute;
    left: inherit;
    right: 0px;
    top: 0px;
    margin: 0px;
    width: 180px;
    padding: 25px 25px 25px 0px;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    opacity: 0;
    transform-origin: 0% 0%;
    transform: translate(0px, -172px);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
    -o-transform-origin: 0% 0%;
    -o-transform: translate(0px, -172px);
    -o-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
    -ms-transform-origin: 0% 0%;
    -ms-transform: translate(0px, -172px);
    -ms-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
    -moz-transform-origin: 0% 0%;
    -moz-transform: translate(0px, -172px);
    -moz-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
    -webkit-transform-origin: 0% 0%;
    -webkit-transform: translate(0px, -172px);
    -webkit-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
    transition: all 0.55s ease;
    -o-transition: all 0.55s ease;
    -ms-transition: all 0.55s ease;
    -moz-transition: all 0.55s ease;
    -webkit-transition: all 0.55s ease;
  }

  /*#menuRight:before { position: absolute; top: -12px; left: 18px; content: ""; display: block; width: 0px; height: 0px; border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 14px solid #ea842c; }*/
  #menuRight li {
    float: none;
    padding: 0px 0px 25px 20px;
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 22px;
    width: auto;
    height: 20px;
    background-repeat: no-repeat;
    background-position: left center;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
  }

  #menuRight li:last-child {
    margin-bottom: 0px;
  }

  #menuToggleRight input:checked~#menuRightFrame {
    /*height: 172px;*/
    height: 100dvh;
  }

  #menuToggleRight input:checked~#menuRightFrame ul {
    opacity: 1;
    transform: none;
    -o-transform: none;
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
  }

  #menuRight li {
    border-top: 0px solid transparent;
    border-bottom: 0px solid transparent;
  }

  #menuRight li:nth-child(1):hover a,
  #menuRight li:nth-child(1).active a {
    border-top: 0px;
    border-left: 5px solid #ac2e45;
  }

  #menuRight li:nth-child(2):hover a,
  #menuRight li:nth-child(2).active a {
    border-top: 0px;
    border-left: 5px solid #ea842c;
  }

  #menuRight li:nth-child(3):hover a,
  #menuRight li:nth-child(3).active a {
    border-top: 0px;
    border-left: 5px solid #1a9431;
  }

  #menuRight li:nth-child(4):hover a,
  #menuRight li:nth-child(4).active a {
    border-top: 0px;
    border-left: 5px solid #ff0000;
  }

  #menuRight li:nth-child(5):hover a,
  #menuRight li:nth-child(5).active a {
    border-top: 0px;
    border-left: 5px solid #0860a8;
  }

  #menuRight li:nth-child(6):hover a,
  #menuRight li:nth-child(6).active a {
    border-top: 0px;
    border-left: 5px solid #99cf16;
  }

  #menuRight li:nth-child(7):hover a,
  #menuRight li:nth-child(7).active a {
    border-top: 0px;
    border-left: 5px solid #9a3b26;
  }

  ul#menuRight li ul {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
  }

  #menuRight {
    padding: 0px 0px;
  }

  #menuRight li {
    height: auto;
    /*padding: 8px 12px 8px 16px;*/
    padding: 0px;
    margin-bottom: 0px;
  }

  #menuRight li a {
    display: block;
    width: 100%;
    padding: 10px 12px 10px 16px;
  }

  #menuRight li a:link {
    line-height: inherit;
    border-top: 0px;
    border-left: 5px solid transparent;
  }

  ul#menuRight li ul li {
    padding: 0px;
  }

  ul#menuRight li ul li a {
    padding: 10px 12px 10px 16px;
  }

  ul#menuRight li:hover>ul,
  ul#menuRight li ul:hover {
    visibility: hidden;
    opacity: 0;
    display: none;
  }

  #menuToggleRight #menuRight input {
    display: none;
    width: 100%;
    height: 42px;
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0px;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    -webkit-touch-callout: none;
  }

  #menuToggleRight #menuRight input:checked~ul {
    visibility: visible;
    opacity: 1;
    display: block;
    border-radius: 0px;
  }

  ul#menuRight li:nth-child(1) input:checked~a {
    border-top: 0px !important;
    border-left: 5px solid #ac2e45 !important;
  }

  ul#menuRight li:nth-child(2) input:checked~a {
    border-top: 0px !important;
    border-left: 5px solid #ea842c !important;
  }

  ul#menuRight li:nth-child(3) input:checked~a {
    border-top: 0px !important;
    border-left: 5px solid #1a9431 !important;
  }

  ul#menuRight li:nth-child(4) input:checked~a {
    border-top: 0px !important;
    border-left: 5px solid #ff0000 !important;
  }

  ul#menuRight li:nth-child(5) input:checked~a {
    border-top: 0px !important;
    border-left: 5px solid #0860a8 !important;
  }

  ul#menuRight li:nth-child(6) input:checked~a {
    border-top: 0px !important;
    border-left: 5px solid #99cf16 !important;
  }

  ul#menuRight li:nth-child(7) input:checked~a {
    border-top: 0px !important;
    border-left: 5px solid #9a3b26 !important;
  }

  #menuToggleLanguage {
    display: block;
    position: absolute;
    background: transparent;
    top: 0px;
    left: inherit;
    right: 120px;
    z-index: 5000;
    -webkit-user-select: none;
    user-select: none;
    width: auto;
  }

  #menuToggleLanguage input {
    display: block;
    width: 60px;
    height: 65px;
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0px;
    cursor: pointer;
    opacity: 0;
    /* hide this */
    z-index: 2;
    /* and place it over the hamburger */
    -webkit-touch-callout: none;
  }

  #menuToggleLanguage .toggle_btn {
    display: block;
    width: 60px;
    height: 65px;
    text-align: center;
  }

  #menuToggleLanguage .toggle_btn span {
    color: #ea842c;
    font-size: 16px;
    width: 60px;
    line-height: 65px;
  }

  #menuLanguageFrame {
    overflow: hidden;
    height: 0px;
    display: block;
    position: absolute;
    top: 65px;
    right: 0px;
    width: 89px;
  }

  #menuLanguage span {
    display: none;
  }

  #menuLanguage {
    position: absolute;
    left: inherit;
    right: 0px;
    top: 0px;
    margin: 0px;
    width: auto;
    padding: 25px 25px 25px 0px;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    display: block;
    opacity: 0;
    transform-origin: 0% 0%;
    transform: translate(0px, -86px);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
    -o-transform-origin: 0% 0%;
    -o-transform: translate(0px, -86px);
    -o-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
    -ms-transform-origin: 0% 0%;
    -ms-transform: translate(0px, -86px);
    -ms-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
    -moz-transform-origin: 0% 0%;
    -moz-transform: translate(0px, -86px);
    -moz-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
    -webkit-transform-origin: 0% 0%;
    -webkit-transform: translate(0px, -86px);
    -webkit-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
    transition: all 0.55s ease;
    -o-transition: all 0.55s ease;
    -ms-transition: all 0.55s ease;
    -moz-transition: all 0.55s ease;
    -webkit-transition: all 0.55s ease;
  }

  #menuLanguage li {
    float: none;
    padding: 0px 0px 25px 20px;
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 22px;
    width: auto;
    height: 20px;
    background-repeat: no-repeat;
    background-position: left center;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
  }

  #menuLanguage li:last-child {
    margin-bottom: 0px;
  }

  #menuToggleLanguage input:checked~#menuLanguageFrame {
    height: 86px;
  }

  #menuToggleLanguage input:checked~#menuLanguageFrame ul {
    opacity: 1;
    transform: none;
    -o-transform: none;
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
  }

  #menuLanguage li {
    border-top: 0px solid transparent;
    border-bottom: 0px solid transparent;
  }

  #menuLanguage li:nth-child(1):hover a,
  #menuLanguage li:nth-child(1).active a {
    border-top: 0px;
    border-left: 5px solid #ac2e45;
  }

  #menuLanguage li:nth-child(2):hover a,
  #menuLanguage li:nth-child(2).active a {
    border-top: 0px;
    border-left: 5px solid #ea842c;
  }

  #menuLanguage li:nth-child(3):hover a,
  #menuLanguage li:nth-child(3).active a {
    border-top: 0px;
    border-left: 5px solid #1a9431;
  }

  #menuLanguage li:nth-child(4):hover a,
  #menuLanguage li:nth-child(4).active a {
    border-top: 0px;
    border-left: 5px solid #ff0000;
  }

  #menuLanguage li:nth-child(5):hover a,
  #menuLanguage li:nth-child(5).active a {
    border-top: 0px;
    border-left: 5px solid #0860a8;
  }

  #menuLanguage li:nth-child(6):hover a,
  #menuLanguage li:nth-child(6).active a {
    border-top: 0px;
    border-left: 5px solid #99cf16;
  }

  #menuLanguage li:nth-child(7):hover a,
  #menuLanguage li:nth-child(7).active a {
    border-top: 0px;
    border-left: 5px solid #9a3b26;
  }

  ul#menuLanguage li ul {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    border-radius: 0px;
  }

  #menuLanguage {
    padding: 0px 0px;
  }

  #menuLanguage li {
    height: auto;
    /*padding: 8px 12px 8px 16px;*/
    padding: 0px;
    margin-bottom: 0px;
  }

  #menuLanguage li a {
    display: block;
    width: 100%;
    padding: 10px 12px 10px 16px;
  }

  #menuLanguage li a:link {
    line-height: inherit;
    border-top: 0px;
    border-left: 5px solid transparent;
  }

  ul#menuLanguage li ul li {
    padding: 0px;
  }

  ul#menuLanguage li ul li a {
    padding: 10px 12px 10px 16px;
  }

  ul#menuLanguage li:hover>ul,
  ul#menuLanguage li ul:hover {
    visibility: hidden;
    opacity: 0;
    display: none;
  }

  #menuToggleLanguage #menuLanguage input {
    display: none;
    width: 100%;
    height: 42px;
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0px;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    -webkit-touch-callout: none;
  }

  #menuToggleLanguage #menuLanguage input:checked~ul {
    visibility: visible;
    opacity: 1;
    display: block;
  }

  ul#menuLanguage li:nth-child(1) input:checked~a {
    border-top: 0px !important;
    border-left: 5px solid #ac2e45 !important;
  }

  ul#menuLanguage li:nth-child(2) input:checked~a {
    border-top: 0px !important;
    border-left: 5px solid #ea842c !important;
  }

  ul#menuLanguage li:nth-child(3) input:checked~a {
    border-top: 0px !important;
    border-left: 5px solid #1a9431 !important;
  }

  ul#menuLanguage li:nth-child(4) input:checked~a {
    border-top: 0px !important;
    border-left: 5px solid #ff0000 !important;
  }

  ul#menuLanguage li:nth-child(5) input:checked~a {
    border-top: 0px !important;
    border-left: 5px solid #0860a8 !important;
  }

  ul#menuLanguage li:nth-child(6) input:checked~a {
    border-top: 0px !important;
    border-left: 5px solid #99cf16 !important;
  }

  ul#menuLanguage li:nth-child(7) input:checked~a {
    border-top: 0px !important;
    border-left: 5px solid #9a3b26 !important;
  }

  /*#menuToggleOverlay input { width: 100%; height: calc(100% - 65px); position: fixed; top: 65px; left: 0px; z-index: 4001; opacity:0; }*/
  #menuToggleOverlay {
    display: block;
  }

  #menuToggleOverlay input {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 4001;
    opacity: 0;
  }

  #menuToggleOverlay input:checked {
    width: 0px;
    height: 0px;
  }

  #menuToggleOverlay input:checked~div.menu_overlay {
    display: none;
  }

  #menuToggleOverlay div.menu_overlay {
    display: block;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 4000;
  }
}


/* popup */

.popup_overlay {
  display: none;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 6000;
}

.popup_frame {
  background-color: #ffffff;
  position: absolute;
  left: 50%;
  margin-left: -400px;
  width: 800px;
  min-height: 400px;
  z-index: -10;
  /*padding: 30px;*/
  top: 100%;
  margin-top: 30px;
  opacity: 0;
  transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  -ms-transition: all 0.55s ease;
  -moz-transition: all 0.55s ease;
  -webkit-transition: all 0.55s ease;
}

.popup_frame.show {
  top: 0%;
  opacity: 1;
  z-index: 7000;
}

.popup_close {
  cursor: pointer;
  position: absolute;
  top: 22px;
  right: 22px;
  width: 20px;
  height: 20px;
}

.popup_close:before {
  content: "";
  display: block;
  width: 25px;
  height: 3px;
  background: #ea842c;
  transform: rotate(45deg) translate(4px, 8px);
  -o-transform: rotate(45deg) translate(4px, 8px);
  -ms-transform: rotate(45deg) translate(4px, 8px);
  -moz-transform: rotate(45deg) translate(4px, 8px);
  -webkit-transform: rotate(45deg) translate(4px, 8px);
}

.popup_close:after {
  content: "";
  display: block;
  width: 25px;
  height: 3px;
  background: #ea842c;
  transform: rotate(-45deg) translate(-6px, 2px);
  -o-transform: rotate(-45deg) translate(-6px, 2px);
  -ms-transform: rotate(-45deg) translate(-6px, 2px);
  -moz-transform: rotate(-45deg) translate(-6px, 2px);
  -webkit-transform: rotate(-45deg) translate(-6px, 2px);
}

.popup_title {
  font-size: 28px;
  line-height: 32px;
  color: #ea842c;
  width: 100%;
  border-bottom: 1px solid #ea842c;
  padding: 18px 50px 12px 30px;
  margin: 0px;
}

.popup_frame.popup_register {
  min-height: 300px;
  top: 100%;
  margin-top: 30px;
  position: fixed;
}

.popup_frame.popup_register.show {
  top: 50%;
  margin-top: -172px;
}

.popup_frame.scroll {
  height: 90vh;
  top: 100%;
  margin-top: 30px;
  position: fixed;
  padding: 0px;
}

.popup_frame.scroll.show {
  top: 5vh;
  margin-top: 0px;
}

.popup_frame.scroll .popup_content_frame {
  height: calc(90vh - 63px - 71px);
  overflow-y: scroll;
  overflow-x: hidden;
}

@media handheld,
screen and (max-width: 960px) {
  .popup_frame {
    width: 90%;
    margin-left: -45%;
    /*padding: 30px 3%;*/
  }
}

@media handheld,
screen and (max-width: 640px) {
  .popup_frame {
    width: 90%;
    margin-left: -45%;
    /*padding: 20px 5%;*/
  }

  .popup_close {
    top: 18px;
    right: 18px;
  }

  .popup_title {
    font-size: 22px;
    line-height: 28px;
    padding: 16px 50px 12px 20px;
  }

  .popup_frame.scroll .popup_content_frame {
    height: calc(90vh - 57px - 71px);
    overflow-y: scroll;
  }
}



/* banner */

.banner {
  /*max-height:610px;*/
  width: 100%;
  /*max-width:1160px;*/
  margin: auto;
  margin-top: 109px;
}

.banner img {
  height: 100%;
  width: 100%;
}

.banner_inner {
  position: relative;
  max-height: 200px;
  width: 100%;
  min-width: 320px;
  /*height:22vw;*/
  height: 200px;
  overflow: hidden;
  display: flex !important;
  justify-content: center;
  align-items: center;
  background-image: url(../images/banner_inner.jpg?a);
  background-repeat: repeat-x;
  background-color: #bccfde;
  background-position: right 65%;
  background-size: cover;
  /*top: 1px;*/
  margin-top: 109px;
}

.banner_inner .inner_frame {
  position: absolute;
  height: 100%;
}

.banner_inner img {
  height: 100%;
  width: 100%;
}


@media handheld,
screen and (max-width: 1024px) {
  .banner {
    margin-top: 65px;
  }

  .banner_inner {
    margin-top: 65px;
  }
}


/* content */

.step_counter {
  padding: 40px 50px 10px 50px;
}

.counter_bg {
  background-color: #ea842c;
  display: table;
  padding: 30px 30px 10px 30px;
  margin-left: auto;
  margin-right: auto;
}

.counter_row {
  font-size: 36px;
  line-height: 48px;
  padding-bottom: 10px;
  padding-bottom: 30px;
  display: block;
  text-align: center;
}

.counter_row .brown,
.counter_row .green {
  font-weight: 900;
  font-size: 50px;
}

.counter_row span {
  font-size: 36px;
  line-height: 48px;
  font-weight: bold;
  margin-left: 10px;
  margin-right: 10px;
}

.counter_row span.nowrap {
  white-space: nowrap;
}

.counter_row img {
  height: 48px;
  weight: auto;
}

.video_row {
  padding: 20px 0px;
}

.video_row iframe {
  width: 64vw;
  height: 48vw;
  max-width: 960px;
  max-height: 720px;
}

.inner_content {
  padding: 30px 30px;
  display: block;
}

p {
  margin-bottom: 10px;
}

.intro,
.intro .green,
.intro .brown,
.intro a {
  font-size: 16px;
}

.intro .green,
.intro .brown,
.intro a {
  font-weight: 900;
}

.step_section {
  background-color: #ffffff;
  padding: 30px 0px 0px 0px;
}

.step_section h1 {
  text-align: center;
  font-size: 36px;
  line-height: 56px;
  font-weight: 600;
  margin-bottom: 20px;
}

.step_row {
  width: auto;
  /*margin-bottom: 20px;*/
  margin-left: 30px;
  margin-right: 30px;
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.step {
  float: left;
  padding: 0px 20px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 25%;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
  box-sizing: border-box;
  margin-bottom: 20px;
}

.step_row1 {
  width: auto;
  margin-bottom: 2px;
  margin-left: 30px;
  margin-right: 30px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.step_pic {
  text-align: center;
  margin-bottom: 25px;
}

.step_pic img {
  width: 85%;
  max-width: 400px;
  height: auto;
}

.step_title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 15px;
}

.step_text {
  font-size: 16px;
}

.btn_row {
  text-align: center;
  padding: 20px 5px 20px 5px;
  display: block;
  align-items: center;
  justify-content: center;
  clear: both;
}

.btn_row_2 {
  text-align: center;
  padding: 20px 5px 20px 5px;
  display: table;
  align-items: center;
  justify-content: center;
  clear: both;
  margin-left: auto;
  margin-right: auto;
}

.btn_row_2 .btn {
  float: none;
  width: inherit;
}

.btn_line {
  padding: 0px 0px 15px 0px;
  display: flex;
}

h3 {
  font-size: 24px;
}

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid #eaeaea;
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}


/* button */

.btn1 {
  text-align: center;
  background-color: #ea842c;
  color: #ffffff;
  border-radius: 18px;
  font-size: 16px;
  line-height: 20px;
  padding: 8px 20px;
  cursor: pointer;
}

a.btn1 {
  text-decoration: none;
}

a.btn1:link {
  color: #ffffff;
  text-decoration: none;
}

a.btn1:hover {
  color: #ffffff;
  text-decoration: none;
}

a.btn1:visited {
  color: #ffffff;
  text-decoration: none;
}

.btn {
  /*background-color: #ea842c;*/
  color: #ffffff;
  border-radius: 0px;
  font-size: 16px;
  line-height: 20px;
  padding: 8px 20px;
  cursor: pointer;
}

.btn:hover {
  color: #ffffff;
  text-decoration: none;
}

a.btn {
  text-decoration: none;
}

a.btn:link {
  color: #ffffff;
  text-decoration: none;
}

a.btn:hover {
  color: #ffffff;
  text-decoration: none;
}

a.btn:visited {
  color: #ffffff;
  text-decoration: none;
}

#menu li a {
  text-decoration: none;
}

#menu li a:link {
  color: #7e8085;
  text-decoration: none;
}

#menu li a:hover {
  color: #ea842c !important;
  text-decoration: none;
}

#menu li a:visited {
  color: #7e8085;
  text-decoration: none;
}

.btn_row .btn {
  float: none;
  display: block;
  margin-bottom: 20px;
}

.coming_soon {
  text-align: center;
  height: 200px;
  font-size: 60px;
  line-height: 70px;
  color: #ea842c;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* table */

.align_center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.text_center {
  text-align: center;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #eaeaea;
}

table th,
table td {
  border: 1px solid #eaeaea;
  padding: 15px 10px;
}


/*.intro_table tr > td:first-child { border-left:5px solid #ea842c; }*/

.intro_table tr>td:first-child {
  font-weight: 600;
}

.intro_table tr>td[colspan="2"] {
  font-weight: normal;
}

ul {
  margin: 0px;
  padding: 0px 0px 10px 25px;
}

li {
  margin: 0px;
  padding: 0px 0px 5px 0px;
}


/* procedure */

.team {
  float: left;
  width: 50%;
  margin-top: 15px;
  margin-bottom: 20px;
}

.individual {
  float: left;
  width: 50%;
  margin-top: 15px;
  margin-bottom: 20px;
}

.subtitle {
  font-size: 36px;
  line-height: 40px;
  color: #ea842c;
  margin-top: 10px;
}

.procedure_content {
  float: none;
  width: 100%;
}

.procedure_group {
  display: block;
  margin: 40px 0px 20px 0px;
}

.procedure_step {
  display: flex;
  padding: 0px 0px 35px 0px;
  border-left: 2px solid #ea842c;
  margin-left: 20px;
}

.procedure_step.rules {
  display: flex;
  padding: 0px 0px 35px 0px;
  border-left: 0px;
  margin-left: 0px;
}

.procedure_step:last-child {
  border-left: 0px;
  padding-bottom: 0px;
}

.procedure_content .procedure_num {
  position: relative;
  float: left;
  left: -21px;
  width: 41px;
  height: 41px;
  border-radius: 100%;
  background-color: #ea842c;
  color: #ffffff;
  font-weight: bold;
  font-size: 22px;
  line-height: 40px;
  text-align: center;
}

.procedure_content .procedure_num {
  font-family: "Montserrat";
  width: 41px;
  height: 41px;
  border-radius: 100%;
  background-color: #ea842c;
  color: #ffffff;
  font-weight: bold;
  font-size: 22px;
  line-height: 40px;
  text-align: center;
}

.procedure_content .procedure_txt {
  float: left;
  width: calc(100vw - (100vw - 100%) - 70px);
}

.procedure_step.rules .procedure_content .procedure_txt {
  float: left;
  width: 100%;
}

.procedure_content .procedure_txt .procedure_title {
  font-size: 20px;
  line-height: 26px;
  font-weight: bold;
  padding-top: 6px;
  padding-bottom: 6px;
  margin-bottom: 10px;
}

.procedure_image {
  float: right;
  filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.5));
}

.procedure_image img {
  width: 354px;
  height: 226px;
}

.procedure_image img.desktop {
  display: block;
}

.procedure_image img.mobile {
  display: none;
}

.route .procedure_step {
  border: 0px;
}


/* method */

.method_row {
  margin-top: 50px;
  margin-left: -20px;
  margin-right: -20px;
  width: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.method_row .subtitle {
  font-family: "Montserrat";
  width: 41px;
  height: 41px;
  border-radius: 100%;
  background-color: #ea842c;
  color: #ffffff;
  font-weight: bold;
  font-size: 22px;
  line-height: 40px;
  text-align: center;
  font-weight: bold;
  text-align: center;
  position: absolute;
  left: 50%;
  margin-left: -21px;
  margin-top: 0px;
  top: 0px;
}

.method {
  float: left;
  padding: 20px;
  float: left;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 33.33%;
  -ms-flex: 0 0 33.33%;
  flex: 0 0 33.33%;
  max-width: 33.33%;
  box-sizing: border-box;
  margin-bottom: 30px;
  position: relative;
}

.method .items {
  border-top: 3px solid #ea842c;
  background-color: #ffffff;
  padding: 40px 20px 20px 20px;
  height: calc(100vh - (100vh - 100%) - 60px);
}

.method .item {
  margin-bottom: 15px;
}

.method .item a {
  margin-bottom: 15px;
}


/* use */

.agency_list {
  display: table;
  float: none;
  width: 100%;
  margin-right: 0%;
  margin-bottom: 50px;
}

.agency_list h2 {
  margin-top: 30px;
  margin-bottom: 30px;
}

.agency_table {
  width: 100%;
}

.needy {
  display: table;
  float: left;
  width: 100%;
  margin-bottom: 50px;
}

.needy h2 {
  margin-top: 30px;
  margin-bottom: 30px;
}

.needy_table {
  width: 100%;
  margin-bottom: 20px;
}


/* story */

.story_row {
  margin-left: -20px;
  margin-right: -20px;
  width: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.story {
  padding: 20px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 33.33%;
  -ms-flex: 0 0 33.33%;
  flex: 0 0 33.33%;
  max-width: 33.33%;
  box-sizing: border-box;
}

.story .img {
  position: relative;
  background-color: #ffffff;
  height: 100%;
}

.story img {
  width: 100%;
  height: auto;
}

.story .layer {
  display: table;
  background-color: #ffffff;
  text-align: center;
  padding: 20px 25px 45px 25px;
  width: 100%;
  box-sizing: border-box;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}

.story .layer .content {
  display: table-cell;
  vertical-align: middle;
}

.story .layer h3 {
  font-size: 1.94vw;
  line-height: 2.777vw;
  margin-top: 0px;
  margin-bottom: 10px;
}

.story .layer .btn {
  float: none;
}

@media (min-width: 1440px) {
  .story .layer h3 {
    font-size: 28px;
    line-height: 40px;
    margin-top: 0px;
  }
}

@media handheld,
screen and (max-width: 768px) {
  .story {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 0px;
  }

  .story .layer h3 {
    font-size: 24px;
    line-height: 36px;
    margin-top: 0px;
  }
}


/* carbon example */

.carbon_example.bg {
  background-color: #eeeeee;
  margin: 0px;
}

.carbon_example .story .img {
  background: none;
}


/* carbon tasks */

.green_tasks {
  margin-top: 0px;
  margin-left: -20px;
  margin-right: -20px;
  width: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.green_tasks .subtitle {
  font-family: "Montserrat";
  padding: 0px 20px;
  height: 41px;
  border-radius: 50px;
  background-color: #639259;
  color: #ffffff;
  font-weight: bold;
  font-size: 22px;
  line-height: 40px;
  text-align: center;
  position: relative;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  top: 20px;
}

.green_tasks .method {
  float: left;
  padding: 20px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 33.33%;
  -ms-flex: 0 0 33.33%;
  flex: 0 0 33.33%;
  max-width: 33.33%;
  box-sizing: border-box;
  margin-bottom: 0px;
  position: relative;
  margin-top: -30px;
}

.green_tasks .method .items {
  border-top: 3px solid #639259;
  background-color: #ea842c;
  padding: 40px 20px 20px 20px;
  height: calc(100vh - (100vh - 100%) - 110px);
}

.green_tasks .method .item {
  margin-bottom: 15px;
}

.green_tasks .method .item a {
  margin-bottom: 15px;
}

@media handheld,
screen and (max-width: 768px) {
  .green_tasks .method {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media handheld,
screen and (max-width: 480px) {
  .green_tasks .method {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}


/* tips */

.carbon_row {
  margin-left: -20px;
  margin-right: -20px;
  width: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.tips {
  padding: 20px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 25%;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
  box-sizing: border-box;
}

.tips .tips_title {
  font-size: 22px;
  font-weight: bold;
  background-color: #639259;
  color: #ffffff;
  text-align: center;
  padding: 10px;
}

.tips .img {
  position: relative;
  background-color: #ffffff;
  height: calc(100% - 48px);
}

.tips img {
  width: 100%;
  height: auto;
}

.tips .layer {
  display: table;
  background-color: #ffffff;
  padding: 0px 20px 20px 20px;
  width: 100%;
  box-sizing: border-box;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}

.tips .layer .content {
  display: table-cell;
  vertical-align: middle;
}

@media (min-width: 1440px) {
  .tips .layer h3 {
    font-size: 28px;
    line-height: 40px;
    margin-top: 0px;
  }
}

@media handheld,
screen and (max-width: 960px) {
  .tips {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 100%;
    margin-bottom: 0px;
  }
}

@media handheld,
screen and (max-width: 480px) {
  .tips {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 0px;
  }
}


/* category */

.category_row {
  margin-left: -20px;
  margin-right: -20px;
  width: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.category {
  padding: 20px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 33.33%;
  -ms-flex: 0 0 33.33%;
  flex: 0 0 33.33%;
  max-width: 50%;
  box-sizing: border-box;
}

.category .cat_title {
  font-size: 22px;
  font-weight: bold;
  background-color: #ea842c;
  color: #ffffff;
  text-align: center;
  padding: 10px;
}

.category .block {
  position: relative;
  background-color: #ffffff;
  height: calc(100% - 48px);
}

.category img {
  width: 100%;
  height: auto;
}

.category .layer {
  display: table;
  background-color: #ffffff;
  padding: 20px 20px 20px 20px;
  width: 100%;
  box-sizing: border-box;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}

.category .layer .content {
  display: table-cell;
  vertical-align: middle;
}

.cat_title {
  font-size: 22px;
  font-weight: bold;
  background-color: #ea842c;
  color: #ffffff;
  text-align: center;
  padding: 10px;
}

@media (min-width: 1440px) {
  .category .layer h3 {
    font-size: 28px;
    line-height: 40px;
    margin-top: 0px;
  }
}

@media handheld,
screen and (max-width: 960px) {
  .category {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.33%;
    -ms-flex: 0 0 33.33%;
    flex: 0 0 33.33%;
    max-width: 100%;
    margin-bottom: 0px;
  }
}

@media handheld,
screen and (max-width: 768px) {
  .category {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 0px;
  }
}


/* download */

.download_row {
  margin-left: -20px;
  margin-right: -20px;
  width: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.download_row .subtitle {}

.download {
  float: left;
  padding: 20px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 33.33%;
  -ms-flex: 0 0 33.33%;
  flex: 0 0 33.33%;
  max-width: 33.33%;
  box-sizing: border-box;
  margin-bottom: 20px;
}

.download .items {
  margin-top: 20px;
  background-color: #ffffff;
  padding: 20px;
  height: calc(100vh - (100vh - 100%) - 110px);
}

.download .item {
  margin-bottom: 15px;
}

.download .item a {
  margin-bottom: 15px;
}


/* footer */

.footer {
  background-color: transparent;
  color: #ffffff;
}

.footer .organizer_row {
  display: block;
  clear: both;
  width: 100%;
  margin-bottom: 44px;
}

.footer .organizer_row h3 {
  margin-bottom: 12px;
}

.footer .organizer_row .mh {
  font-size: 12px;
}

.footer .organizer_row .organizer {
  float: left;
  width: 38%;
}

.footer .organizer_row .organizer .mtr {
  float: left;
  width: 38%;
  margin-right: 6%;
}

.footer .organizer_row .organizer .gsgb {
  float: right;
  width: 42.5%;
  margin-right: 0%;
}

.footer .organizer_row .organizer img {
  height: auto;
  width: 100%;
  max-width: 160px;
}

.footer .organizer_row .supporter {
  float: right;
  width: 21%;
}

.footer .organizer_row .supporter .boc {
  float: left;
  width: 90%;
  margin-right: 0%;
}

.footer .organizer_row .supporter img {
  height: auto;
  width: 100%;
}

.footer .organizer_row .chairman {
  float: left;
  width: 35%;
  font-size: 18px;
}

.footer .organizer_row .co_chairman {
  float: left;
  width: 65%;
  font-size: 18px;
}

.footer .organizer_row .co_chairman p {
  margin-bottom: 5px;
}

.footer .organizer_row h4 {
  margin-top: 0;
  margin-bottom: 10px;
}

.footer_remarks {
  text-align: center;
  margin-top: 10px;
  display: inline-block;
  font-size: 13px;
  line-height: 22px;
}

.footer .contact_row {
  display: block;
  clear: both;
  width: 100%;
  padding-top: 10px;
}

.footer .contact_row .address {
  float: left;
}

.footer .contact_row .phone {
  float: left;
}

.footer .contact_row .email {
  float: left;
}

.footer .contact_row .social {
  float: right;
}

.footer .social div {
  float: left;
  margin-left: 10px;
  width: 36px;
  height: 36px;
  cursor: pointer;
}

.footer .social div img {
  width: 100%;
  height: 100%;
}

.footer .social {
  float: right !important;
}

.footer .social.org {
  margin-top: 20px;
  float: left !important;
}

.scroll-top {
  position: fixed;
  bottom: 5%;
  right: 30px;
  display: none;
  z-index: 6000;
  border: 2px solid #ffffff !important;
  border-radius: 50% !important;
  width: 53px;
  height: 53px;
}

.scroll-top .icon-chevron-up {
  position: relative;
  top: -3px;
}

.scroll-top:hover {
  border: 2px solid #ffffff !important;
}

@media handheld,
screen and (max-width: 768px) {
  .footer .social {
    float: inherit !important;
    margin: auto;
    display: table;
  }

   .footer .social.org {
    float: inherit !important;
    margin: auto;
    display: table;
    margin-top:20px;
  }
}

@media handheld,
screen and (max-width: 1280px) {
  .footer .contact_row .address {
    width: 50%;
  }

  .footer .contact_row .phone {
    width: 25%;
  }

  .footer .contact_row .email {
    width: 25%;
  }

  .footer .contact_row .social {
    padding-top: 20px;
    float: none;
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media handheld,
screen and (max-width: 1024px) {
  .content_frame {
    overflow: hidden;
  }

  .header {
    height: 75px;
    background-color: #ffffff;
    z-index: 6000;
  }

  .inner_content {
    padding: 25px 40px;
  }

  .step_section {
    padding: 25px 0px 0px 0px;
  }
}

@media handheld,
screen and (max-width: 960px) {
  .footer .organizer_row {
    display: block;
    clear: both;
    width: 100%;
    margin-bottom: 30px;
  }

  .footer .organizer_row h3 {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }

  .footer .organizer_row .organizer {
    float: none;
    display: table;
    width: 100%;
    max-width: 420px;
    margin: 0px auto 10px auto;
    justify-content: center !important;
  }

  .footer .organizer_row .organizer .mtr {
    float: left;
    width: 44%;
    margin-right: 6.8%;
    text-align: center;
  }

  .footer .organizer_row .organizer .gsgb {
    float: left;
    width: 49.2%;
    margin-right: 0%;
    text-align: center;
  }

  .footer .organizer_row .supporter {
    float: none;
    display: table;
    width: 100%;
    max-width: 580px;
    margin: 0px auto 10px auto;
  }

  .footer .organizer_row .t_team {
    float: none;
    display: table;
    width: 100%;
    max-width: 580px;
    margin: 0px auto 10px auto;
  }

  .footer .organizer_row .supporter .boc {
    float: none;
    width: 44%;
    max-width: 255px;
    margin: 0px auto;
  }

  .footer .organizer_row .chairman {
    float: none;
    display: table;
    width: 100%;
    font-size: 18px;
    text-align: center;
    margin: 0px auto 10px auto;
  }

  .footer .organizer_row .chairman br {
    display: none;
  }

  .footer .organizer_row .co_chairman {
    float: none;
    display: table;
    width: 100%;
    font-size: 18px;
    text-align: center;
    margin: 0px auto 10px auto;
  }

  .footer .organizer_row .co_chairman p {
    margin-bottom: 5px;
  }

  .agency_list {
    float: none;
    width: 100%;
    margin-bottom: 30px;
  }

  .needy {
    float: none;
    width: 100%;
    margin-bottom: 30px;
  }
}

@media handheld,
screen and (max-width: 960px) {
  .counter_eq {
    display: block;
    float: none;
  }
}

@media handheld,
screen and (max-width: 768px) {
  .step_counter {
    padding: 30px 0px 0px 0px;
  }

  .counter_row {
    font-size: 30px;
    line-height: 44px;
  }

  .counter_row span {
    font-size: 30px;
    line-height: 44px;
  }

  .counter_row img {
    height: 44px;
  }

  .video_row iframe {
    width: 87.5vw;
    height: 65.625vw;
    max-width: 960px;
    max-height: 720px;
  }

  .inner_content {
    padding: 25px 30px;
  }

  .team {
    float: none;
    width: 100%;
  }

  .individual {
    float: none;
    width: 100%;
  }

  /* method */
  .method_row {
    margin-top: 50px;
  }

  .method {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* download */
  .download {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 0px;
  }
}

@media handheld,
screen and (max-width: 680px) {}

@media handheld,
screen and (max-width: 640px) {
  .coming_soon {
    font-size: 40px;
    line-height: 50px;
  }

  /* intro */
  .intro_table {
    border-top: 1px solid #eaeaea;
    border-right: 1px solid #eaeaea;
    border-bottom: 0px;
  }

  .intro_table tr {
    position: relative;
    display: flex;
    width: 100%;
    padding: 0px;
    vertical-align: top;
    flex-wrap: wrap;
  }

  .intro_table tr>td {
    border-left: 0px;
    border-right: 0px solid #eaeaea;
  }

  .intro_table tr>td:nth-child(2) {
    width: 43.5%;
    padding: 15px 3%;
    border-right: 1px solid #eaeaea;
  }

  .intro_table tr>td:nth-child(3) {
    width: 44%;
    padding: 15px 3%;
    border-right: 0px;
  }

  .intro_table tr>td:first-child {
    display: inherit !important;
    width: 96%;
    padding: 15px 2%;
    border: 0px;
    border-left: 5px solid #ea842c;
  }

  .intro_table tr>td[colspan="2"] {
    display: block !important;
    width: 95%;
    padding: 15px 2% 15px 3%;
    border-right: 0px;
    border-left: 0px;
    border-bottom: 1px solid #eaeaea;
  }

  /* method */
  .method_row {
    margin-top: 50px;
  }

  .method {
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .app_group {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.33%;
    -ms-flex: 0 0 33.33%;
    flex: 0 0 33.33%;
    max-width: 33.33%;
  }

  .app_name {
    margin-bottom: 20px;
  }

  .app_group:nth-child(3n + 1) {
    clear: both;
  }
}

@media handheld,
screen and (max-width: 1024px) {
  .step {
    float: left;
    padding: 0px 20px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    box-sizing: border-box;
  }
}

@media handheld,
screen and (max-width: 576px) {
  .popup_frame.popup_register.show {
    margin-top: -244px;
  }
}

@media handheld,
screen and (max-width: 480px) {

  /*.header { height: 60px; }
    .header .logo { width: auto; height: 60px; background-size: auto 30px; }
    .header .logo { background-size: auto 30px; background-position: 16px 14px; width: 140px; height: 60px; }
    .header .logo_gsgb { background-size: auto 40px; background-position: 16px 10px; width: 120px; height: 60px; }
    #menuToggle { top: 20px; }
    #menu { top: 40px; }
    #menu:before { top: -10px; }*/
  .banner_inner {
    max-height: 150px;
  }

  .step_counter {
    padding: 25px 0px 0px 0px;
  }

  .counter_bg {
    padding: 15px 20px 10px 20px;
  }

  .counter_row {
    font-size: 20px;
    line-height: 32px;
    padding-bottom: 10px;
  }

  .counter_row .brown,
  .counter_row .green {
    font-size: 38px;
    line-height: 44px;
  }

  .counter_row span {
    font-size: 26px;
    line-height: 40px;
  }

  .counter_row img {
    height: 40px;
  }

  .inner_content {
    padding: 20px 20px;
  }

  .step_section {
    padding: 20px 0px 0px 0px;
  }

  .step_section h1 {
    text-align: center;
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 36px;
    line-height: 42px;
    font-weight: 600;
    margin-bottom: 15px;
  }

  .step_row {
    margin-left: 15px;
    margin-right: 15px;
    padding-bottom: 30px;
  }

  .step {
    float: left;
    padding: 0px 10px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .step_row1 {
    margin-bottom: 2px;
    margin-left: 15px;
    margin-right: 15px;
  }

  .step1 {
    padding: 0px 5px;
  }

  .step_title {
    font-size: 22px;
    margin-bottom: 15px;
  }

  .btn_row {
    padding: 15px 25px 0px 25px;
  }

  .donate_group {
    float: none;
    width: 100%;
    margin-right: 0%;
  }
}

@media handheld,
screen and (max-width: 320px) {

  /*.header { height: 48px; }*/
  /*.header .logo { background-size: auto 26px; background-position: 14px 11px; width: 120px; height: 48px; }
    .header .logo_gsgb { background-size: auto 32px; background-position: 16px 8px; width: 100px; height: 48px; }
    #menu { top: 33px; }
    #menu:before { top: -10px; }
    #menuToggle { top: 15px; right: 15px; }*/
  .step_counter {
    padding: 20px 0px 0px 0px;
  }

  .counter_row {
    font-size: 20px;
    line-height: 36px;
  }

  .counter_row span {
    font-size: 20px;
    line-height: 36px;
  }

  .counter_row img {
    height: 36px;
  }

  .inner_content {
    padding: 15px 20px;
  }

  .step_section {
    padding: 15px 0px 0px 0px;
  }

  .step_section h1 {
    text-align: center;
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 36px;
    line-height: 42px;
    font-weight: 600;
    margin-bottom: 15px;
  }

  .step_title {
    font-size: 22px;
    margin-bottom: 15px;
  }
}

@media (min-width: 1440px) {
  .banner img {
    width: 100% !important;
    overflow: hidden;
    height: auto;
    /*flex-shrink: 0;*/
    min-width: 100%;
    min-height: 100%;
    /*object-fit: cover;*/
  }
}

@media (min-width: 1920px) {

  .banner_inner {
    background-size: cover;
    background-position: right 64%;
  }
}

@media (max-width: 1440px) {

  /*.banner_inner { background-position: right bottom; }*/
  .banner_inner {
    background-size: cover;
  }
}

@media (max-width: 768px) {

  /*.banner_inner { background-position:16vw bottom; background-size: auto 30vw; }*/
  .banner_inner {
    background-size: cover;
  }
}

@media (max-width: 480px) {
  .banner_inner {
    background-size: cover;
  }

  /*.banner_inner { background-position: right -40px top; background-size: auto 120%; }
    .banner_inner .page_title { font-size: 24px; top: 15px; }*/
}

@media (max-width: 320px) {
  .banner_inner {
    background-size: cover;
  }

  /*.banner_inner { background-position: right -30px top; background-size: auto 120%; }
    .banner_inner .page_title { top: 12px; }*/
}


/* light gallery */

.lightgallery {
  width: 100%;
  display: block;
}

.lightgallery a:hover .media_thumb {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
}

.lightgallery a {
  display: inherit;
  overflow: hidden;
  position: relative;
  z-index: 9;
  width: 100%;
  height: 100%;
}

.lightgallery a:before {
  display: block;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  -webkit-transition: background-color 0.15s ease 0s;
  -o-transition: background-color 0.15s ease 0s;
  transition: background-color 0.15s ease 0s;
  z-index: 190;
}

.lightgallery a:after {
  font: normal 24px/1 FontAwesome;
  color: #ffffff;
  content: "\f002";
  width: 24px;
  height: 24px;
  line-height: 24px;
  position: absolute;
  margin-left: -12px;
  margin-top: -12px;
  left: 50%;
  top: 50%;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease 0s;
  -o-transition: opacity 0.3s ease 0s;
  transition: opacity 0.3s ease 0s;
  z-index: 200;
}

.lightgallery a:hover:before {
  background-color: rgba(0, 0, 0, 0.4);
}

.lightgallery a:hover:after {
  opacity: 1;
}

.lightgallery.image_hide a:hover:before {
  display: none;
}

.lightgallery.image_hide a:hover:after {
  display: none;
}

.lg-backdrop {
  z-index: 12040 !important;
}

.lg-outer {
  z-index: 12050 !important;
}

.lg-icon {
  font-family: feather !important;
}

.lg-toolbar .lg-close:after {
  content: "\e8f6";
}

.lg-toolbar .lg-download:after {
  content: "\e864";
}

.lg-autoplay-button:after {
  content: "\e8ae";
}

.lg-show-autoplay .lg-autoplay-button:after {
  content: "\e8cb";
}

.lg-fullscreen:after {
  content: "\e908";
}

.lg-fullscreen-on .lg-fullscreen:after {
  content: "\e88d";
}

#lg-zoom-in:after {
  content: "\e8f9";
}

#lg-zoom-out:after {
  content: "\e8fa";
}

#lg-actual-size:after {
  content: "\e855";
}

.lg-outer #lg-share:after {
  content: "\e8c0";
}

.lg-outer .lg-dropdown .lg-icon {
  font-family: FontAwesome !important;
}

.lg-outer #lg-share-facebook .lg-icon:after {
  content: "\f082";
}

.lg-outer #lg-share-twitter .lg-icon:after {
  content: "\f081";
}

.lg-outer #lg-share-googleplus .lg-icon:after {
  content: "\f0d4";
}

.lg-outer #lg-share-pinterest .lg-icon:after {
  content: "\f0d3";
}

.lg-actions .lg-prev:after {
  content: "\e843";
}

.lg-actions .lg-next:before {
  content: "\e844";
}

.lg-outer .lg-thumb-item {
  border: 3px solid #FFF;
  border: 0;
  border-radius: 0px;
  opacity: 0.5;
  -webkit-transition: opacity 0.3s ease 0s;
  -o-transition: opacity 0.3s ease 0s;
  transition: opacity 0.3s ease 0s;
}

.lg-outer .lg-thumb-item:hover {
  /*border-color: #309bd4;*/
  border: 0;
  opacity: 1;
}

.lg-outer .lg-thumb-item.active {
  /*border-color: #76ce76;*/
  border: 0;
  opacity: 1;
}

ul#lightGallery {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

ul#lightGallery li {
  margin: 0px;
  padding: 0px;
  border: 2px solid #ffffff;
  cursor: pointer;
  width: 100%;
  height: 180px;
  z-index: 9;
  display: flex !important;
  overflow: hidden;
  position: relative;
  justify-content: center;
  align-items: center;
}

ul#lightGallery li:before {
  display: block;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  -webkit-transition: background-color 0.15s ease 0s;
  -o-transition: background-color 0.15s ease 0s;
  transition: background-color 0.15s ease 0s;
  z-index: 190;
}

ul#lightGallery li:after {
  font: normal 24px/1 FontAwesome;
  color: #ffffff;
  content: "\f002";
  width: 24px;
  height: 24px;
  line-height: 24px;
  position: absolute;
  margin-left: -12px;
  margin-top: -12px;
  left: 50%;
  top: 50%;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease 0s;
  -o-transition: opacity 0.3s ease 0s;
  transition: opacity 0.3s ease 0s;
  z-index: 200;
}

ul#lightGallery li:hover img {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
}

ul#lightGallery li img {
  -webkit-transition: -webkit-transform 0.15s ease 0s;
  -moz-transition: -moz-transform 0.15s ease 0s;
  -o-transition: -o-transform 0.15s ease 0s;
  transition: transform 0.15s ease 0s;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  width: auto;
  height: auto;
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
  max-width: 200px;
  object-fit: cover;
}

ul#lightGallery li:hover:before {
  background-color: rgba(0, 0, 0, 0.4);
}

ul#lightGallery li:hover:after {
  opacity: 1;
}

ul#lightGallery li a {
  width: 100%;
  height: 100%;
}


/* tab */

.tab_panel .tab_content {
  display: none;
}

.tab_group>input:first-child:checked~.tab_panel .tab_content:first-child,
.tab_group>input:nth-child(3):checked~.tab_panel .tab_content:nth-child(2),
.tab_group>input:nth-child(5):checked~.tab_panel .tab_content:nth-child(3),
.tab_group>input:nth-child(7):checked~.tab_panel .tab_content:nth-child(4),
.tab_group>input:nth-child(9):checked~.tab_panel .tab_content:nth-child(5),
.tab_group>input:nth-child(11):checked~.tab_panel .tab_content:nth-child(6),
.tab_group>input:nth-child(13):checked~.tab_panel .tab_content:nth-child(7),
.tab_group>input:nth-child(15):checked~.tab_panel .tab_content:nth-child(8) {
  display: block;
}

.tab_group>input[type="radio"] {
  position: absolute;
  left: -200vw;
}

.tab_group>label {
  position: relative;
  display: inline-block;
  padding: 5px 20px 6px 20px;
  border: 1px solid transparent;
  border-bottom: 0;
  cursor: pointer;
  font-weight: 600;
  margin-bottom: 0px;
  border-top: 5px solid transparent;
  border-left: 0px;
  border-right: 0px;
}

.tab_group>label:hover,
.tab_group>input:focus+label {
  color: #ea842c;
}

.tab_group>input:checked+label {
  border-top: 5px solid #ea842c;
  background: #ffffff;
  border-bottom: 1px solid #fff;
  margin-bottom: -1px;
}


/* form field */

.form-control {
  font-size: inherit;
}


/* custom checkbox */

.custom_checkbox {
  display: inline;
}

.custom_checkbox label {
  display: inline-block;
  font-size: 1rem;
  font-weight: 400;
  line-height: 20px;
  position: relative;
  cursor: pointer;
  padding-left: 32px;
  margin-right: 10px;
  min-height: 24px;
  margin-bottom: 0px;
  margin-top: 10px;
}

.custom_checkbox input[type="checkbox"] {
  position: absolute;
  left: -9999px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  padding: 0px 30px 0px 0px;
  border-radius: 0px;
  text-align: center;
  margin: 0px;
  position: absolute;
  left: 0px;
}

.custom_checkbox input[type="checkbox"]:before {
  content: " ";
  display: block;
  border: 1px solid #cccccc;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 0px;
  cursor: pointer;
}

.custom_checkbox input[type="checkbox"]:after {
  content: " ";
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 4px;
  left: 4px;
  display: inline-block;
  background-image: none;
  background-size: 100% auto;
  filter: invert(61%) sepia(12%) saturate(2237%) hue-rotate(77deg) brightness(92%) contrast(87%);
  cursor: pointer;
}

.custom_checkbox input[type="checkbox"]:checked:after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'><polyline points='20 6 9 17 4 12'></polyline></svg>");
}

.custom_checkbox span {
  line-height: 1.5;
  position: relative;
  top: 2px;
}


/* radio */

.radio {
  display: flex;
}

.radio label {
  display: flex;
  font-size: 1rem;
  font-weight: 400;
  line-height: 50px;
  position: relative;
  cursor: pointer;
  padding-left: 32px;
  margin-right: 10px;
}

.radio label input[type="radio"] {
  position: absolute;
  left: -9999px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  padding: 0px 30px 0px 0px;
  border-radius: 0px;
  text-align: center;
  margin: 0px;
  position: absolute;
  left: 0px;
}

.radio label input[type="radio"]:before {
  content: " ";
  display: block;
  border: 1px solid #cccccc;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 12px;
  left: 0px;
  border-radius: 100%;
}

.radio label input[type="radio"]:after {
  content: " ";
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 16px;
  left: 4px;
  display: inline-block;
  background-image: none;
  background-size: 100% auto;
  filter: invert(61%) sepia(12%) saturate(2237%) hue-rotate(77deg) brightness(92%) contrast(87%);
}

.radio label input[type="radio"]:checked:after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'><polyline points='20 6 9 17 4 12'></polyline></svg>");
}


/* button choice */

.button_choice {
  margin-right: -4px;
  margin-left: -4px;
}

.button_choice .choice-group {
  padding-right: 4px;
  padding-left: 4px;
}

.button_choice .choice-group label span {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.45;
}

.button_choice label {
  padding-left: 0rem;
  padding-right: 0.2rem;
  width: 100%;
  display: flex;
  min-height: 50px;
}

.button_choice label input[type="radio"] {
  position: absolute;
  left: -9999px;
}

.button_choice label span {
  height: 100%;
  width: 100%;
  padding: 15px 12px;
  border: 1px solid #cccccc;
  color: #333;
  background-color: #fff;
  border-radius: 0px;
  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#booking_payment .button_choice label span {
  border-radius: 5px;
  border: 3px solid #eeeeee;
}

.form-group.error .button_choice label span:hover {
  border-color: #EA5455;
}

.form-group.error .button_choice label span {
  border-color: #EA5455;
}

.button_choice label span:hover {
  background-color: #e6e6e6;
  border-color: #adadad;
}

.button_choice label input[type="radio"]:checked~span {
  color: #fff;
  background-color: #38af47;
  border-color: #38af47;
}

#booking_payment .button_choice label input[type="radio"]:checked~span {
  border-color: #002c53;
  border-radius: 5px;
  border: 3px solid #002c53;
}

#booking_payment .button_choice label span:hover {
  background-color: #e6e6e6;
  border-color: #adadad;
}

.button_choice label input[type="radio"]:checked:focus~span {
  color: #fff;
  background-color: #38af47;
  border-color: #38af47;
}

#booking_payment .button_choice label input[type="radio"]:checked:focus~span {
  color: #fff;
  background-color: #002c53;
  border-color: #002c53;
}

.button_choice label .input-group-prepend {
  height: 50px;
}

.button_choice label .input-group-prepend span {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.button_choice.logo_image label span {
  padding: 0px;
}

.button_choice.logo_image label span img {
  border-radius: 4px;
}

.form-group .help-block {
  color: #EA5455;
}

.form-group .help-block ul {
  padding: 5px 0px 0px 0px;
}

.form-group .help-block ul li {
  font-size: 12px;
  line-height: 18px;
  padding: 0px;
}

select.form-control:not([multiple='multiple']) {
  background-position: calc(100% - 12px) 15px, calc(100% - 20px) 15px, 100% 0;
  background-size: 18px auto;
  padding-right: 30px;
}


/* select 2 in component */

.select2-container {
  width: 100% !important;
  margin: 0;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  box-sizing: border-box;
}

.select2-container--classic:focus,
.select2-container--default:focus {
  outline: none;
}

.select2-container--classic .select2-selection__choice,
.select2-container--default .select2-selection__choice {
  font-size: 0.9rem;
  margin-top: 6px !important;
}

.select2-container--classic .select2-selection--single,
.select2-container--default .select2-selection--single {
  min-height: 3.2rem;
  padding: 5px;
  border: 1px solid #d8d6de;
}

.select2-container--classic .select2-selection--single:focus,
.select2-container--default .select2-selection--single:focus {
  outline: 0;
  border-color: #002c53 !important;
  box-shadow: 0 3px 10px 0 rgba(34, 41, 47, 0.1) !important;
}

.select2-container--classic .select2-selection--single .select2-selection__rendered i,
.select2-container--classic .select2-selection--single .select2-selection__rendered svg,
.select2-container--default .select2-selection--single .select2-selection__rendered i,
.select2-container--default .select2-selection--single .select2-selection__rendered svg {
  font-size: 1.15rem;
  height: 1.15rem;
  width: 1.15rem;
  margin-right: 0.5rem;
}

.select2-container--classic .select2-selection--single .select2-selection__arrow b,
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8d6de' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 18px 14px, 18px 14px;
  background-repeat: no-repeat;
  height: 1rem;
  padding-right: 1.5rem;
  margin-left: 0;
  margin-top: 0;
  left: -8px;
  border-style: none;
}

.select2-container--classic.select2-container--open,
.select2-container--default.select2-container--open {
  box-shadow: 0 5px 25px rgba(34, 41, 47, 0.1);
}

.select2-container--classic.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: #002c53 !important;
  outline: 0;
}

.select2-container--classic.select2-container--focus,
.select2-container--default.select2-container--focus {
  outline: 0;
}

.select2-container--classic.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: #002c53 !important;
  outline: 0;
}

.select2-container--classic .select2-dropdown,
.select2-container--default .select2-dropdown {
  border-color: #d8d6de;
}

.select2-container--classic .select2-search--dropdown,
.select2-container--default .select2-search--dropdown {
  padding: 0.5rem;
}

.select2-container--classic .select2-search--dropdown .select2-search__field,
.select2-container--default .select2-search--dropdown .select2-search__field {
  outline: none !important;
  border-radius: 0.357rem;
  border-color: #d8d6de;
  padding: 0.438rem 1rem;
}

.select2-container--classic .select2-selection--multiple,
.select2-container--default .select2-selection--multiple {
  min-height: 38px !important;
  border: 1px solid #d8d6de;
}

.select2-container--classic .select2-selection--multiple:focus,
.select2-container--default .select2-selection--multiple:focus {
  outline: 0;
  border-color: #002c53 !important;
  box-shadow: 0 3px 10px 0 rgba(34, 41, 47, 0.1) !important;
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #002c53 !important;
  border-color: #002c53 !important;
  color: #fff;
  padding: 2px 5px;
}

.select2-container--classic .select2-selection--multiple .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  padding: 0 6px;
}

.select2-container--classic .select2-selection--multiple .select2-selection__rendered li .select2-search__field,
.select2-container--default .select2-selection--multiple .select2-selection__rendered li .select2-search__field {
  margin-top: 7px;
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  float: right;
  margin-left: 0.7rem;
  margin-right: 0.5rem;
  font-size: 0px;
  display: inline-block;
  position: relative;
  line-height: 1rem;
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:before,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:before {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
  background-size: 0.85rem;
  height: 0.85rem;
  width: 0.85rem;
  position: absolute;
  top: 22%;
  left: -4px;
}

.select2-container--classic .select2-selection--multiple i,
.select2-container--classic .select2-selection--multiple svg,
.select2-container--default .select2-selection--multiple i,
.select2-container--default .select2-selection--multiple svg {
  position: relative;
  top: 1px;
  margin-right: 0.5rem;
  height: 1.15rem;
  width: 1.15rem;
  font-size: 1.15rem;
  padding-left: 1px;
}

.select2-container--classic .select2-results__group,
.select2-container--default .select2-results__group {
  padding: 6px 9px;
  font-weight: 600;
}

.select2-container--classic .select2-results__option,
.select2-container--default .select2-results__option {
  padding: 0.628rem 1rem;
}

.select2-container--classic .select2-results__option[role='group'],
.select2-container--default .select2-results__option[role='group'] {
  padding: 0;
}

.select2-container--classic .select2-results__option[aria-selected='true'],
.select2-container--default .select2-results__option[aria-selected='true'] {
  background-color: #002c53 !important;
  color: white !important;
}

.select2-container--classic .select2-results__option i,
.select2-container--classic .select2-results__option svg,
.select2-container--default .select2-results__option i,
.select2-container--default .select2-results__option svg {
  height: 1.15rem;
  width: 1.15rem;
  font-size: 1.15rem;
  margin-right: 0.5rem;
}

.select2-container--classic .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted {
  background-color: rgba(177, 237, 231, 0.12) !important;
  color: #002c53 !important;
}

.select2-container--classic .select2-result-repository__avatar img,
.select2-container--default .select2-result-repository__avatar img {
  width: 50px;
}

.select2-container--classic .select-lg,
.select2-container--default .select-lg {
  min-height: 2.714rem !important;
  font-size: 1.2rem;
  margin-bottom: 0 !important;
  padding: 0.3rem 0.7rem;
}

.select2-container--classic .select-lg.select2-selection--single .select2-selection__rendered,
.select2-container--default .select-lg.select2-selection--single .select2-selection__rendered {
  padding-top: -0.1rem;
}

.select2-container--classic .select-lg.select2-selection--single .select2-selection__arrow,
.select2-container--default .select-lg.select2-selection--single .select2-selection__arrow {
  top: 0rem !important;
}

.select2-container--classic .select-lg.select2-selection--multiple,
.select2-container--default .select-lg.select2-selection--multiple {
  padding: 0 0.2rem;
}

.select2-container--classic .select-lg.select2-selection--multiple .select2-selection__rendered,
.select2-container--default .select-lg.select2-selection--multiple .select2-selection__rendered {
  padding-top: 0 !important;
}

.select2-container--classic .select-lg.select2-selection--multiple .select2-selection__rendered li,
.select2-container--default .select-lg.select2-selection--multiple .select2-selection__rendered li {
  font-size: 1.2rem;
}

.select2-container--classic .select-lg.select2-selection--multiple .select2-selection__rendered li .select2-search__field,
.select2-container--default .select-lg.select2-selection--multiple .select2-selection__rendered li .select2-search__field {
  margin-top: 10px;
}

.select2-container--classic .select-lg.select2-selection--multiple .select2-selection__rendered .select2-selection__choice,
.select2-container--default .select-lg.select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
  padding: 5px;
}

.select2-container--classic .select-lg.select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:before,
.select2-container--default .select-lg.select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:before {
  top: 46%;
}

.select2-container--classic .select-sm,
.select2-container--default .select-sm {
  min-height: 2.142rem !important;
  padding: 0 0.2rem;
  font-size: 0.75rem;
  margin-bottom: 0 !important;
  line-height: 1.5;
}

.select2-container--classic .select-sm.select2-selection--single .select2-selection__arrow,
.select2-container--default .select-sm.select2-selection--single .select2-selection__arrow {
  top: -0.3rem !important;
}

.select2-container--classic .select-sm.select2-selection--multiple,
.select2-container--default .select-sm.select2-selection--multiple {
  line-height: 1.3;
}

.select2-container--classic .select-sm.select2-selection--multiple .select2-selection__rendered,
.select2-container--default .select-sm.select2-selection--multiple .select2-selection__rendered {
  padding: 3px;
}

.select2-container--classic .select-sm.select2-selection--multiple .select2-selection__rendered li,
.select2-container--default .select-sm.select2-selection--multiple .select2-selection__rendered li {
  font-size: 0.75rem;
  margin-top: 2px;
}

.select2-container--classic .select-sm.select2-selection--multiple .select2-selection__rendered li .select2-search__field,
.select2-container--default .select-sm.select2-selection--multiple .select2-selection__rendered li .select2-search__field {
  margin-top: 4px;
}

.select2-container--classic .select-sm.select2-selection--multiple .select2-selection__choice,
.select2-container--default .select-sm.select2-selection--multiple .select2-selection__choice {
  padding: 0 0.2rem;
}

.select2-container--classic .select-sm.select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove:before,
.select2-container--default .select-sm.select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove:before {
  top: 5%;
}

.select2-container--classic .select-sm.select2-selection--multiple .select2-search--inline .select2-search__field,
.select2-container--default .select-sm.select2-selection--multiple .select2-search--inline .select2-search__field {
  margin-top: 0;
}


/* select 2 */

.select2-container {
  z-index: 6000;
}

.app-content .select2-container {
  /*z-index:1000;*/
  z-index: 9;
}

.select2-container--default .select2-selection--single {
  border-radius: 0px;
  border: 1px solid #d8d6de;
  padding: 0px;
}

.form-group.error .select2-container--default .select2-selection--single {
  border-color: #EA5455;
}

.select2-container .error input {
  border-color: #EA5455;
}

input.error {
  border-color: #EA5455;
}

.help-block.error {
  color: #EA5455;
  font-size: 0.875rem;
  padding-top: 0.2rem;
}

.select2-container--classic.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: #0a416f !important;
}

.select2-container--default .select2-selection--single {
  height: 50px;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 0px;
  padding-right: 15px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0.438rem 30px 0.438rem 1rem;
  font-size: inherit;
  font-weight: 400;
  line-height: 35px;
  color: #6e6b7b;
  background-color: #fff;
}

.select2-container--classic .select2-selection--single:focus,
.select2-container--default .select2-selection--single:focus {
  border-color: #0a416f !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 6px;
  right: 20px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  color: #0a416f;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8d6de' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-position: right 12px center;
  background-size: 18px auto;
  padding-right: 40px;
  line-height: 54px;
  left: 0px;
}

.select2-container--classic .select2-results__option[aria-selected='true'],
.select2-container--default .select2-results__option[aria-selected='true'] {
  background-color: #ea842c !important;
}

.select2-container--classic .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted {
  background-color: #999999 !important;
  color: #ffffff !important;
}

.select2-container--classic .select2-search--dropdown .select2-search__field,
.select2-container--default .select2-search--dropdown .select2-search__field {
  outline: none !important;
  border-radius: 0rem;
  border-color: #D8D6DE;
  padding: 0.7rem 1rem;
}

.select2-dropdown {
  border-color: #aaa;
  border-radius: 0px;
}


/* select2 multiple */

.select2-container--classic .select2-selection--multiple,
.select2-container--default .select2-selection--multiple {
  min-height: 50px !important;
  border-radius: 0px;
  padding: 0.6rem 0.7rem 0rem 0.7rem;
}

.select2-container--classic .select2-selection--multiple .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  padding: 0px;
  margin: 0px;
}

.select2-container--default .select2-selection__choice {
  font-size: 1rem;
  margin-top: 0px !important;
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  border-radius: 0px;
  background-color: #3eaf4d !important;
  border-color: #3eaf4d !important;
  color: #fff;
  padding: 5px 10px;
  margin-right: 5px;
  margin-bottom: 5px;
}


/* json form */

ul._jsonform-array-ul li:before {
  content: "";
}

.em-attendee-details .form-group {
  padding: 0px;
  margin: 0px;
}

.em-attendee-details .form-group ul {
  padding: 0px;
  margin: 0px;
}

.em-attendee-details .form-group ul li {
  padding: 0px;
  margin: 0px;
}

.em-attendee-details .help-block {
  font-size: 12px;
  line-height: 18px;
  padding: 0px;
}

.em-attendee-details>td>div>div>label {
  display: none;
}

.qty_field_td select {
  width: 70px;
}


/* social share */

.icon_xsmall {
  width: 14px;
  height: 14px;
  display: inline-block;
}

.icon_small {
  width: 18px;
  height: 18px;
  display: inline-block;
}

.icon_medium {
  width: 22px;
  height: 22px;
  display: inline-block;
}

.icon_large {
  width: 30px;
  height: 30px;
  display: inline-block;
}

.social-share img {
  filter: invert(25%) sepia(96%) saturate(306%) hue-rotate(105deg) brightness(96%) contrast(93%);
}

.social-share:hover img {
  filter: invert(59%) sepia(43%) saturate(685%) hue-rotate(77deg) brightness(87%) contrast(94%);
}


/* sweet alert */
.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation {
  z-index: 6000;
}

h2.swal2-title {
  border-left: 0px;
  padding: .8em 1em 0;
}


/* code field */
div#code_fields input {
  border-width: 1px !important;
  border-color: 2f286d;
  font-weight: 900;
}

.form-control:focus:valid,
.form-control:focus.is-valid {
  box-shadow: none !important;
  background: #fcfcf2;
}


/* step label */
.step_ribbon {
  padding: 4px 10px;
  width: 30px;
  height: 30px;
  line-height: 20px;
  background: #2f286d;
  left: 0px;
  color: #ffffff;
  position: relative;
  display: table-cell;
  /*border-radius: 50%;*/
  border-radius: 0px;
  border: 1px solid black;
  vertical-align: middle;
}

.step_ribbon.inactive {
  padding: 4px 10px;
  width: inherit;
  background: #cccccc;
  border: 1px solid #aaa;
  left: 0px;
  color: #ffffff;
  position: relative;
  display: table-cell;
  vertical-align: middle;
}

/*.step_ribbon:after { content:""; position:absolute; height:0; width:0; border-top:20px solid transparent; border-bottom:20px solid transparent; border-left:15px solid #2f286d; right:-15px; top:0px; }
.ribbon-2:before { content:""; position:absolute; height:0; width:0; border-bottom:8px solid #14455b; border-left:8px solid transparent; top:-8px; }*/
.step_title .feather-chevron-right {
  height: 30px !important;
}

.step_title .icon-chevron-right {
  height: 30px !important;
  line-height: 30px !important;
}


.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-color: rgba(34, 41, 47, 0.5);
  display: flex;
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s ease;
  z-index: -1;
}

.loading-overlay.show {
  opacity: 1;
  visibility: visible;
  width: 100%;
  height: 100%;
  z-index: 8000;
}

.loading-overlay .spinner-border {
  height: 8vw;
  width: 8vw;
  margin: auto;
}

.loading-overlay.inside {
  position: absolute;
}

.loading-overlay .loading-text {
  position: absolute;
  width: 100%;
  top: calc(50% + 4vw);
  left: 0px;
  text-align: center;
  z-index: 500;
  color: #ffffff;
}

.loading-overlay.small .spinner-border {
  height: 4vw;
  width: 4vw;
  margin: auto;
}

.loading-overlay.small.inside.show {
  z-index: 100;
}

.loading-overlay.small .loading-text {
  position: absolute;
  width: 100%;
  top: calc(50% + 2vw);
  left: 0px;
  text-align: center;
  z-index: 500;
  color: #ffffff;
}

@media (max-width:575.9px) {
  .loading-overlay.small .spinner-border {
    height: 8vw;
    width: 8vw;
  }

  .loading-overlay.small .loading-text {
    top: calc(50% + 4vw);
  }
}


.footer ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}


/* QR code reader */

#qr_scanner .header {
  position: fixed;
  top: 0px;
  height: 65px;
  margin: 0px;
  padding: 0px;
  background-color: #ea842c;
  width: 100%;
  border-bottom: 0px;
  /*border-bottom: 1px solid #ebe9f1;*/
  z-index: 7000;
  min-width: 320px;
}

#qr_scanner .header .title {
  font-size: 20px;
  font-weight: bold;
  width: 200px;
  text-align: center;
  line-height: 65px;
  color: #ffffff;
  position: absolute;
  top: 0px;
  left: 50%;
  margin-left: -100px;
  index: 10;
}

#qr_scanner #menuToggleRight .close_btn {
  display: block;
  width: 60px;
  height: 65px;
  text-align: center;
}

#qr_scanner #menuToggleRight .close_btn span {
  color: #ffffff;
  font-size: 25px;
  width: 60px;
  line-height: 65px;
}

#qr_scanner #menuToggleRight .close_btn a {
  color: #ffffff;
  font-size: 25px;
  width: 60px;
  line-height: 65px;
  text-decoration: none;
}

#qr_scanner {
  height: 100dvh;
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 8001;
  overflow-y: auto;
  background-color: #ffffff;
}

#qr_scanner.hide {
  z-index: -1;
  overflow-y: hidden;
}

#scan_page {
  height: calc(100dvh - 65px);
  /*height:auto;*/
  width: 100%;
  position: absolute;
  left: 0px;
  top: 65px;
  z-index: 6999;
  background-color: #000000;
}

.reader_frame {
  max-width: 580px;
  margin: auto;
}

#reader {
  border: 0px !important;
  /*margin-top:65px;*/
  height: inherit;
}

#qr_scanner.admin .header {
  position: fixed;
}

@media (min-width: 1024px) {
  #qr_scanner.admin #reader {
    margin-top: 0px;
  }
}

#reader__header_message {
  font-size: 18px !important;
  padding: 15px !important;
  /*position: relative; top: 40px; left: 50%; margin-left: -45%!important; font-size: 18px!important; border: 0px!important; padding: 10px!important; width: 90%!important;*/
}

#reader__scan_region {
  width: 100%;
  /*height:calc(100% - 65px)!important;*/
  /*height:100%;*/
  /*min-height:calc(100% - 65px)!important;*/
  /*min-height:75vh!important; */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0px !important;
}

#reader__scan_region img {
  width: 150px !important;
  height: auto !important;
  margin: 30px auto;
}

#reader__scan_region video {
  display: block;
  margin: 0px;
  width: 100%;
  height: 100%;
  /*max-width:100%!important; max-height:100%!important; margin:auto; position: absolute;*/
}

#reader__dashboard {
  margin: 0px auto;
  text-transform: none;
  word-wrap: normal;
  position: relative !important;
  /*bottom:0px; left:0px;*/
  width: 100%;
  z-index: 5000;
}

#reader__dashboard_section {
  padding: 20px 0px 60px 0px !important;
}

#html5-qrcode-select-camera {
  margin: 0px auto;
  display: block;
  width: 90%;
  height: 3.2rem;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.45;
  color: #6e6b7b;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #d8d6de;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8d6de' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E);
  background-repeat: no-repeat;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 1.5rem;
  background-position: calc(100% - 12px) 15px, calc(100% - 20px) 15px, 100% 0;
  background-size: 18px auto;
  padding-right: 30px;
}

#qr-shaded-region {
  /*border-width:calc((100dvh - 65px - 60vw)/2) calc((100vw - 60vw)/2)!important;*/
}

/*#qr-shaded-region { border-width:calc(20vw 20vw!important; }*/
/*#QR { position:absolute!important; top:0px; left:0px; width:100vw; height:100dvh; z-index:7000; background-color:#ffffff; }*/
/*#reader__scan_region { width:100%; height:100%!important; display:table-cell; vertical-align:middle; border:0px!important; }
/*#reader__scan_region video { width:100%!important; height:100%!important; }*/
#html5-qrcode-button-camera-permission {
  display: block;
  width: 80% !important;
  max-width: 250px !important;
  border: 0px;
  font-size: 16px;
  cursor: pointer;
  padding: 10px;
  background-color: #0b9bfb;
  color: #ffffff;
  margin-bottom: 10px;
}

a#html5-qrcode-anchor-scan-type-change {
  /*display:inline-block;*/
  display: none !important;
  width: 80% !important;
  max-width: 250px !important;
  border: 0px;
  font-size: 16px;
  cursor: pointer;
  padding: 10px;
  background-color: #0b9bfb;
  color: #ffffff;
  text-decoration: none !important;
  box-sizing: border-box;
}

/*#html5-qrcode-button-file-selection { display:inline-block; width:80%!important; max-width:250px!important; border:0px; font-size: 16px; cursor:pointer; padding:10px; background-color:#0b9bfb; color:#ffffff; margin-bottom:10px; }*/
#html5-qrcode-button-camera-permission,
#html5-qrcode-button-camera-start,
#html5-qrcode-button-camera-stop {
  color: #FFFFFF;
  background-image: linear-gradient(to right, #ff4431, #fe0062);
  border-radius: 1.5rem;
  position: fixed;
  bottom: 20px;
  left: 50%;
  margin-left: -120px;
  border-color: #ff4431 !important;
  border: 1px solid #ff4431;
  width: 240px;
  font-size: 16px;
  line-height: 20px;
  padding: 10px 25px;
  cursor: pointer;
  box-shadow: none;
  font-weight: 500;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  display: inline-block;
  -webkit-appearance: button;
  text-transform: none;
  overflow: visible;
  box-sizing: border-box;
}

/*#scan_start { color:#ffffff; position:fixed; bottom:20px; left:50%; width:120px; margin-left:-60px; z-index:3000; }*/
#scan_stop {
  color: #ffffff;
  position: fixed;
  bottom: 20px;
  left: 50%;
  width: 120px;
  margin-left: -60px;
  z-index: 3000;
}

#scan_again {
  color: #ffffff;
  position: fixed;
  bottom: 20px;
  left: 50%;
  width: 120px;
  margin-left: -60px;
  z-index: 3000;
}

#scan_other {
  color: #ffffff;
  position: fixed;
  bottom: 20px;
  left: 50%;
  width: 200px;
  margin-left: -100px;
  z-index: 3000;
}

#result_page {
  min-height: calc(100% - 65px);
  width: 100%;
  display: table;
  vertical-align: middle;
  margin-top: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.result_text {
  text-align: center;
  font-size: 18px;
  margin: 20px;
}

/* camera page */

#photo_snap {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 6001;
  overflow-y: auto;
}

#photo_snap.hide {
  z-index: -1;
  overflow-y: hidden;
}

#video_page {
  position: relative;
  top: 0px;
  margin-top: 65px;
}

#video_page.hide {
  position: absolute;
  top: 9999px;
}

#screencap_page {
  margin-top: 65px;
}


/* counter animation css */

@property --from {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

.counter {
  transition: --from 1s;
  counter-reset: int var(--from);
  animation: counter var(--time, 1000) forwards ease-in-out;
}

.counter::after {
  content: counter(int);
}

@keyframes counter {
  to {
    --from: var(--to, 100);
  }
}


/* pagination */

.dataTables_wrapper .dataTables_paginate {
  width: 100%;
  margin: 0px;
  padding-top: 20px;
  padding-bottom: 20px;
  /*border-left:1px solid #cccccc; border-right:1px solid #cccccc; border-bottom:1px solid #cccccc;*/
  height: auto;
}

.pagination {
  border-radius: 0rem;
  margin: 0px;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  margin-top: 0rem;
  padding-bottom: 0px;
  margin: 0px 0;
  justify-content: center;
}

.pagination .page-item {
  border-radius: 0rem;
  margin-left: 2px;
  margin-right: 2px;
  /*border-left: 4px solid transparent;box-shadow: rgb(0 0 0 / 5%) 0 4px 20px 0;*/
}

/*20230327 */

.pagination .page-item .page-link {
  border-radius: 0rem;
  color: #626262;
  background-color: #ffffff;
  border-color: #cccccc;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  padding: 0rem 0.9rem;
}

.pagination .page-item.active .page-link {
  border-radius: 0rem;
  color: #626262;
  background-color: #ea842c;
  border-color: #ea842c;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.pagination .page-item:last-child:not(.next-item) .page-link {
  border-top-right-radius: 0rem;
  border-bottom-right-radius: 0rem;
}

.pagination .page-item:first-child:not(.prev-item) .page-link {
  border-top-left-radius: 0rem;
  border-bottom-left-radius: 0rem;
}

.pagination .page-item.prev-item .page-link,
.pagination .page-item.next-item .page-link,
.pagination .page-item.first .page-link,
.pagination .page-item.last .page-link {
  color: inherit;
}

.pagination .page-item .page-link:hover {
  color: #ea842c;
}

/*.pagination .page-item.disabled { display:none; }*/
.pagination .page-item.disabled .page-link {
  color: #cccccc;
}

.pagination .page-item.first.disabled .page-link {
  color: #cccccc;
}

.pagination .page-item.last.disabled .page-link {
  color: #cccccc;
}

.pagination .page-item.first a,
.pagination .page-item.previous a,
.pagination .page-item.next a,
.pagination .page-item.last a {
  display: table-cell;
  width: 36px;
  line-height: 36px;
  text-indent: -9999px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pagination>li.first>a:after,
.pagination>li.first>span:after {
  margin-left: 6px;
  content: "1";
  text-indent: 9999px;
  display: inline-block;
  width: 20px;
  height: 20px;
  top: 8px;
  left: 4px;
  position: relative;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevrons-left'><polyline points='11 17 6 12 11 7'></polyline><polyline points='18 17 13 12 18 7'></polyline></svg>");
  background-size: 100% auto;
  background-repeat: no-repeat;
  filter: brightness(0) saturate(100%) invert(52%) sepia(69%) saturate(1823%) hue-rotate(163deg) brightness(92%) contrast(110%);
}

.pagination>li.previous>a:after,
.pagination>li.previous>span:after {
  margin-left: 6px;
  content: "1";
  text-indent: 9999px;
  display: inline-block;
  width: 20px;
  height: 20px;
  top: 8px;
  left: 4px;
  position: relative;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-left'><polyline points='15 18 9 12 15 6'></polyline></svg>");
  background-size: 100% auto;
  background-repeat: no-repeat;
  filter: brightness(0) saturate(100%) invert(52%) sepia(69%) saturate(1823%) hue-rotate(163deg) brightness(92%) contrast(110%);
}

.pagination>li.next>a:after,
.pagination>li.next>span:after,
.pagination .page-item.next .page-link:after {
  margin-left: 6px;
  content: "1";
  text-indent: 9999px;
  display: inline-block;
  width: 20px;
  height: 20px;
  top: 8px;
  left: 4px;
  position: relative;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-right'><polyline points='9 18 15 12 9 6'></polyline></svg>");
  background-size: 100% auto;
  background-repeat: no-repeat;
  filter: brightness(0) saturate(100%) invert(52%) sepia(69%) saturate(1823%) hue-rotate(163deg) brightness(92%) contrast(110%);
}

.pagination>li.last>a:after,
.pagination>li.last>span:after,
.pagination .page-item.last .page-link:after {
  margin-left: 6px;
  content: "1";
  text-indent: 9999px;
  display: inline-block;
  width: 20px;
  height: 20px;
  top: 8px;
  left: 4px;
  position: relative;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevrons-right'><polyline points='13 17 18 12 13 7'></polyline><polyline points='6 17 11 12 6 7'></polyline></svg>");
  background-size: 100% auto;
  background-repeat: no-repeat;
  filter: brightness(0) saturate(100%) invert(52%) sepia(69%) saturate(1823%) hue-rotate(163deg) brightness(92%) contrast(110%);
}


.pagination>li.first.disabled>a:after,
.pagination>li.first.disabled>span:after,
.pagination>li.previous.disabled>a:after,
.pagination>li.previous.disabled>span:after,
.pagination>li.next.disabled>a:after,
.pagination>li.next.disabled>span:after,
.pagination .page-item.next.disabled .page-link:after,
.pagination>li.last.disabled>a:after,
.pagination>li.last>span:after,
.pagination .page-item.last.disabled .page-link:after {
  filter: invert(76%) sepia(57%) saturate(2%) hue-rotate(38deg) brightness(103%) contrast(81%);
}

.pagination .page-item:not(.prev-item) .page-link,
.pagination .page-item:not(.next-item) .page-link,
.pagination .page-item:not(.first) .page-link,
.pagination .page-item:not(.last) .page-link,
.pagination .page-item:not(.active) .page-link {
  line-height: 36px;
  font-weight: 400;
  font-size: 15px;
}

@media only screen and (max-width: 768px) {

  /* 20240206 change this */
  /*.pagination .page-item:last-child { border-right: 1px solid #cccccc; }*/
  /*.pagination .page-item .page-link { padding: 0rem 0.7rem; }
.pagination .page-item.first a, .pagination .page-item.previous a, .pagination .page-item.next a, .pagination .page-item.last a { width: 30px; text-indent: -60px; }
.pagination .page-item.previous a { text-indent: -110px; }
.pagination > li.first > a:after, .pagination > li.first > span:after { left:12px; }
.pagination > li.previous > a:after, .pagination > li.previous > span:after { left:20px; }
.pagination > li.next > a:after, .pagination > li.next > span:after, .pagination .page-item.next .page-link:after { left:12px; }
.pagination > li.last > a:after, .pagination > li.last > span:after, .pagination .page-item.last .page-link:after { left:12px; }
*/
  div.dataTables_wrapper div.dataTables_paginate {
    text-align: right;
  }
}

/* override style */
.bg-white {
  border: 1px solid #eaeaea;
}

.card {
  border: 1px solid #eaeaea;
}

/*#distance_form .btn { border-radius:0px!important; }*/

.highlight_thread {
  border-bottom: 1px solid #eaeaea;
  display: flex;
  padding: 10px 0px;
}

.highlight_thread .highlight_date {
  min-width: 100px;
  width: 100px;
}

@media only screen and (max-width: 768px) {
  .highlight_thread {
    display: block;
  }
}

.summernote_content {
  display: block;
}

.summernote_content p:last-child {
  display: inline-block;
}

.summernote_content img.note-float-left {
  margin-right: 10px;
}

.summernote_content img.note-float-right {
  margin-left: 10px;
}


/* 20231207 upload file basic */
.custom-image {
  position: relative;
  display: inline-block;
  width: 100%;
  min-height: 50px;
  margin-bottom: 0;
}

.custom-image-input {
  position: absolute;
  z-index: -1;
}

/*.custom-image-input { position: relative; z-index: 2; width: 100%; height: 50px; margin: 0; overflow: hidden; opacity: 0; }
.custom-image-input:lang(en) ~ .custom-file-label::after { content:"Add image"; }*/
.custom-image-label {
  position: static;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  line-height: 32px;
  padding: 0.6rem 1rem;
  color: #6e6b7b;
  content: "Browse";
  background-color: white;
  border-radius: 0px;
  margin: 0px;
  border-left: 1px solid #d8d6de;
  cursor: pointer;
  text-wrap: nowrap;
  display: flex;
  order: 2;
}

.form-group label.custom-image-label {
  margin-bottom: 0px;
}

.custom-image-input_multiple {
  position: absolute;
  z-index: -1;
}

.custom-image-box {
  position: static;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  min-height: 50px !important;
  max-height: auto !important;
  height: auto !important;
  padding: 0px;
  overflow: hidden;
  font-weight: 400;
  line-height: 32px;
  color: #6e6b7b;
  background-color: #fff;
  border: 1px solid #d8d6de;
  border-radius: 0px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  order: 1;
  flex: 1 1 100%;
}

.custom-image-preview {
  padding: 6px 4px 4px 6px;
  display: flex;
  flex-wrap: wrap;
}

.custom-image-preview .photo_item {
  position: relative;
  overflow: hidden;
  margin-right: 2px;
  margin-bottom: 2px;
  cursor: pointer;
}

.custom-image-preview .photo_item:before {
  display: block;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  -webkit-transition: background-color 0.15s ease 0s;
  -o-transition: background-color 0.15s ease 0s;
  transition: background-color 0.15s ease 0s;
  z-index: 10;
}

.custom-image-preview .photo_item:after {
  font-family: feather;
  font-size: 24px;
  color: #ffffff;
  content: "\e8bd";
  width: 24px;
  height: 24px;
  line-height: 24px;
  position: absolute;
  margin-left: -12px;
  margin-top: -12px;
  left: 50%;
  top: 50%;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease 0s;
  -o-transition: opacity 0.3s ease 0s;
  transition: opacity 0.3s ease 0s;
  z-index: 200;
}

.custom-image-preview .photo_item.action_view {
  cursor: pointer;
}

.custom-image-preview .photo_item.action_delete {
  cursor: pointer;
}

.custom-image-preview .photo_item.action_delete:after {
  font-family: feather;
  content: "\e8db";
}

.custom-image-preview .photo_item:hover img {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
}

.custom-image-preview .photo_item:hover:before {
  background-color: rgba(0, 0, 0, 0.4);
}

.custom-image-preview .photo_item:hover:after {
  opacity: 1;
}

.custom-image-preview img {
  height: 100px;
  width: auto;
  cursor: pointer;
}



/* dropzone - single image style */
.dz_init,
.dz_template {
  display: none;
}

.dropzone.single_image {
  min-height: inherit;
  margin: 0px auto;
  border: 1px dashed #D9D9D9;
  background: #F8F8F8;
  border-radius: 0px;
  padding: 0px;
  cursor: pointer;
  position: relative;
}

.dropzone.single_image .dz-message:before {
  display: none;
}

.dropzone.single_image .dz-message {
  position: relative;
  text-align: center;
  font-size: 24px;
  top: 0px;
  color: #444444;
  padding: 50px 1.25rem;
  margin-top: 0px;
  margin-bottom: 0px;
  height: 100%;
  width: 100%;
  left: 0px;
  margin: 0px;
  background-color: #ffffff;
}

.dropzone.single_image.dz-started .dz-message {
  opacity: 0;
  display: none;
}

.dropzone.single_image .upload_container {
  /*display: table-cell; width: 100%; height: 100%;*/
  line-height: 20px;
  font-weight: bold;
  vertical-align: middle;
  margin-left: auto;
  margin-right: auto;
}

/*.dropzone.single_image .upload_container:before { content: '\f093'; font-family: 'FontAwesome'; font-size: 40px; color: #309bd4; }*/
.dropzone.single_image .upload_container svg {
  width: 40px;
  height: 40px;
  color: #2f286d;
}

.dropzone.single_image .upload_container div {
  font-size: 24px;
  line-height: 30px;
  padding-top: 20px;
}

.dropzone.single_image .upload_container div.remarks {
  font-weight: normal;
  font-size: 13px;
  line-height: 20px;
  padding-top: 10px;
}

.dropzone.single_image .upload_container img.icon_upload {
  width: 86px;
  height: 86px;
}

.dropzone.single_image .dz-image img {
  width: 100%;
  height: auto;
  max-width: inherit;
}

.dropzone.single_image .dz-image video {
  width: 100% !important;
  height: auto !important;
  max-width: inherit;
  max-height: 514px;
  display: inherit;
  z-index: 50;
  margin: 0px auto;
}

.dropzone.single_image .dz-preview {
  position: relative;
  min-height: 200px !important;
  margin: 0px;
  padding: 0px;
  border: 0px;
  box-shadow: none;
  display: block;
}

.dropzone.single_image .dz-success {
  min-height: inherit !important;
}

.dropzone.single_image .dz-processing {
  /*in-height:inherit!important;*/
  min-height: 200px !important;
}

.dropzone.single_image .dz-complete {
  min-height: inherit !important;
}

.dropzone.single_image .dz-image-preview {
  min-height: inherit !important;
}

.dropzone.single_image .dz-preview .dz-progress {
  opacity: 1;
  text-indent: -9999px;
  position: absolute;
  width: 100%;
  height: 100%;
  min-height: 100%;
  top: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.5);
}

.dropzone.single_image .dz-preview .dz-progress {
  opacity: 0;
}

.dropzone.single_image .dz-preview.dz-processing .dz-progress {
  opacity: 1;
}

.dropzone.single_image .dz-preview.dz-success .dz-progress {
  opacity: 0;
}

/*.dropzone.single_image .dz-preview .dz-progress .dz-loading { opacity:1; text-indent:0; position:absolute; width:100%; height:100%; min-height:200px; top:50%; margin-top:-30px; left:0px; background-color:rgba(0,0,0, 0.5); }*/

.dropzone.single_image .dz-preview.dz-success .dz-progress {
  opacity: 0;
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -ms-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  transition: opacity 0.4s ease-in;
  margin: 0px;
  border-radius: 0px;
}

.dropzone.single_image .dz-preview .dz-upload-info {
  opacity: 0;
}

.dropzone.single_image .dz-preview.dz-image-preview .dz-upload-info {
  opacity: 1;
  display: block;
  width: 70%;
  height: 60px;
  margin: -30px auto;
  top: 50%;
  position: absolute;
  left: 15%;
}

.dropzone.single_image .dz-preview.dz-file-preview .dz-upload-info {
  opacity: 1;
  display: block;
  width: 70%;
  height: 60px;
  margin: -30px auto;
  top: 50%;
  position: absolute;
  left: 15%;
}

.dropzone.single_image .dz-preview .dz-image {
  /*opacity:0;*/
}

.dropzone.single_image .dz-preview.dz-success .dz-image {
  opacity: 1;
  border-radius: 0rem;
  width: 100%;
  height: auto;
}

.dropzone.single_image .dz-upload {
  display: block;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  height: 20px;
  bottom: 0px;
  position: absolute;
  left: 0px;
  border-radius: 10px;
  overflow: hidden;
}

.dropzone.single_image .dz-upload-bar {
  display: block;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  height: 20px;
  bottom: 0px;
  position: absolute;
  left: 0px;
  border-radius: 0px;
}

.dropzone.single_image .dz-upload-text {
  text-indent: 0px;
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  color: #cccccc;
  font-size: 24px;
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
}

.dropzone.single_image .dropzone-choose {
  opacity: 0;
  position: absolute;
  width: 60px;
  height: 60px;
  margin: 0px;
  background-color: rgba(0, 0, 0, 0.5);
  background-image: none;
  border: 0px;
  margin: 0px;
  cursor: pointer;
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -ms-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  transition: opacity 0.4s ease-in;
  top: 50% !important;
  left: calc(50% - 100px) !important;
  /* top:10px; right:80px; */
  margin-top: -30px !important;
  z-index: 1;
}

.dropzone.single_image .dz-preview.dz-success:hover .dropzone-choose {
  opacity: 0.8;
}

.dropzone.single_image .dz-preview.dz-success:hover .dropzone-choose:hover {
  opacity: 1;
}

.dropzone.single_image .dropzone-choose:before {
  content: "1";
  text-indent: -9999px;
  display: inline-block;
  width: 40px;
  height: 40px;
  position: absolute;
  margin-top: -20px;
  top: 50%;
  left: 50%;
  margin-left: -20px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-upload'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'></path><polyline points='17 8 12 3 7 8'></polyline><line x1='12' y1='3' x2='12' y2='15'></line></svg>");
  background-size: 100% auto;
  filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(46deg) brightness(105%) contrast(101%);
  opacity: 0.7;
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -ms-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  transition: opacity 0.4s ease-in;
}

.dropzone.single_image .dropzone-choose:hover:before {
  opacity: 1;
}

.dropzone.single_image .dropzone-crop {
  opacity: 0;
  position: absolute;
  width: 60px;
  height: 60px;
  margin: 0px;
  background-color: rgba(0, 0, 0, 0.5);
  background-image: none;
  border: 0px;
  margin: 0px;
  cursor: pointer;
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -ms-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  transition: opacity 0.4s ease-in;
  top: 50% !important;
  left: calc(50% - 30px) !important;
  margin-top: -30px !important;
  z-index: 1;
}

.dropzone.single_image .dz-preview.dz-success:hover .dropzone-crop {
  opacity: 0.8;
}

.dropzone.single_image .dz-preview.dz-success:hover .dropzone-crop:hover {
  opacity: 1;
}

.dropzone.single_image .dropzone-crop:before {
  content: "1";
  text-indent: -9999px;
  display: inline-block;
  width: 40px;
  height: 40px;
  position: absolute;
  margin-top: -20px;
  top: 50%;
  left: 50%;
  margin-left: -20px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-crop'><path d='M6.13 1L6 16a2 2 0 0 0 2 2h15'></path><path d='M1 6.13L16 6a2 2 0 0 1 2 2v15'></path></svg>");
  background-size: 100% auto;
  filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(46deg) brightness(105%) contrast(101%);
  opacity: 0.7;
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -ms-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  transition: opacity 0.4s ease-in;
}

.dropzone.single_image .dropzone-crop:hover:before {
  opacity: 1;
}


.dropzone.single_image .dz-remove {
  opacity: 0;
  text-indent: -9999px;
  position: absolute;
  width: 60px;
  height: 60px;
  margin: 0px;
  background-color: rgba(0, 0, 0, 0.5);
  background-image: none;
  border: 0px;
  margin: 0px;
  cursor: pointer;
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -ms-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  transition: opacity 0.4s ease-in;
  overflow: hidden;
  top: 50% !important;
  left: calc(50% + 40px) !important;
  margin-top: -30px !important;
  z-index: 1;
}

.dropzone.single_image .dz-preview.dz-success:hover .dz-remove {
  opacity: 0.8;
}

.dropzone.single_image .dz-preview.dz-success:hover .dz-remove:hover {
  opacity: 1;
}

.dropzone.single_image .dz-remove:before {
  content: "1";
  text-indent: -9999px;
  display: inline-block;
  width: 40px;
  height: 40px;
  position: absolute;
  margin-top: -20px;
  top: 50%;
  left: 50%;
  margin-left: -20px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-trash'><polyline points='3 6 5 6 21 6'></polyline><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'></path></svg>");
  background-size: 100% auto;
  filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(46deg) brightness(105%) contrast(101%);
  opacity: 0.7;
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -ms-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  transition: opacity 0.4s ease-in;
}

.dropzone.single_image .dz-remove:hover:before {
  opacity: 1;
}

.dropzone.single_image .dz-remove:after {
  content: "";
  display: none;
}

.dropzone.single_image .dz-preview.dz-success:before {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  content: " ";
  background-color: rgba(255, 255, 255, 0.6);
  display: block;
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -ms-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  transition: opacity 0.4s ease-in;
}

.dropzone.single_image .dz-preview.dz-success:hover:before {
  opacity: 1;
}

.dropzone .dz-default.dz-message span,
.dropzone .dz-default.dz-message button {
  display: table !important;
  width: 100%;
  height: 100%;
  border: 0px;
  background: transparent;
  padding: 0px;
}

.dropzone .convert-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-color: rgba(34, 41, 47, 0.5);
  display: flex;
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s ease;
  z-index: -1;
}

.dropzone .convert-overlay .spinner-border {
  height: 4vw;
  width: 4vw;
  margin: auto;
}

.dropzone.converting .convert-overlay {
  opacity: 1;
  visibility: visible;
  z-index: 10;
}

.dropzone~.help-block .danger {
  color: #EA5455;
  font-size: 0.875rem;
  padding-top: 0.2rem;
}


/* no crop dropzone */
.no_crop .dz-message {
  height: 402px;
}

.no_crop.dropzone.single_image .dz-processing {
  min-height: 402px !important;
}

.no_crop.dropzone.single_image .dz-success {
  min-height: inherit !important;
}

.no_crop.dropzone.single_image .dz-complete {
  min-height: inherit !important;
}

@media (max-width: 575.9px) {
  .no_crop .dz-message {
    height: inherit;
  }

  .no_crop.dropzone.single_image .dz-processing {
    min-height: inherit !important;
  }
}

.no_crop.dropzone.single_image .dropzone-choose {
  left: calc(50% - 70px) !important;
}

.no_crop.dropzone.single_image .dropzone-crop {
  display: none !important;
}

.no_crop.dropzone.single_image .dz-remove {
  left: calc(50% + 10px) !important;
}


/* dropzone multiple */

.dropzone.multiple_images .dz-preview {
  width: 20%;
  height: 80px;
  float: left;
  border: 2px solid #ffffff;
}

.dropzone.multiple_images .dz-preview img {
  width: 100%;
  height: auto;
  flex-shrink: cover;
}

.dropzone.multiple_images {
  min-height: inherit;
  margin: 0px auto;
  border: 1px dashed #D9D9D9;
  background: #ffffff;
  border-radius: 0px;
  padding: 0px;
  cursor: pointer;
  position: relative;
  display: table;
  width: 100%;
}

.dropzone.multiple_images .dz-message:before {
  display: none;
}

.dropzone.multiple_images .dz-message {
  position: relative;
  text-align: center;
  font-size: 24px;
  top: 0px;
  color: #444444;
  padding: 50px 1.25rem;
  margin-top: 0px;
  margin-bottom: 0px;
  height: 100%;
  width: 100%;
  left: 0px;
  margin: 0px;
  background-color: #ffffff;
}

.dropzone.multiple_images.dz-started .dz-message {
  opacity: 0;
  display: none;
}

.dropzone.multiple_images .upload_container {
  /*display: table-cell; width: 100%; height: 100%;*/
  line-height: 20px;
  font-weight: bold;
  vertical-align: middle;
  margin-left: auto;
  margin-right: auto;
}

/*.dropzone.multiple_images .upload_container:before { content: '\f093'; font-family: 'FontAwesome'; font-size: 40px; color: #309bd4; }*/
.dropzone.multiple_images .upload_container div {
  font-size: 24px;
  line-height: 30px;
  padding-top: 20px;
}

.dropzone.multiple_images .upload_container div.remarks {
  font-weight: normal;
  font-size: 13px;
  line-height: 20px;
  padding-top: 10px;
}

.dropzone.multiple_images .upload_container img.icon_upload {
  width: 86px;
  height: 86px;
}

.dropzone.multiple_images .dz-image img {
  width: 100%;
  height: auto;
  max-width: inherit;
}

.dropzone.multiple_images .dz-image video {
  width: 100% !important;
  height: auto !important;
  max-width: inherit;
  max-height: 514px;
  display: inherit;
  z-index: 50;
  margin: 0px auto;
}

.dropzone.multiple_images .dz-preview {
  position: relative;
  height: auto;
}

.dropzone.multiple_images .dz-preview.dz-success:hover .dz-remove {
  opacity: 0.5;
}

.dropzone.multiple_images .dz-preview .dz-progress {
  opacity: 1;
  /*text-indent:-9999px;*/
  position: absolute;
  width: 100%;
  height: 100%;
  /*min-height:200px;*/
  top: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.5);
}

.dropzone.multiple_images .dz-preview.dz-success .dz-progress {
  opacity: 0;
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -ms-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  transition: opacity 0.4s ease-in;
}

.dropzone.multiple_images .dz-preview .dz-upload-info {
  opacity: 0;
}

.dropzone.multiple_images .dz-preview.dz-image-preview .dz-upload-info {
  opacity: 1;
  display: block;
  width: 70%;
  height: 60px;
  margin: -30px auto;
  top: 50%;
  position: absolute;
  left: 15%;
}

.dropzone.multiple_images .dz-preview.dz-file-preview .dz-upload-info {
  opacity: 1;
  display: block;
  width: 70%;
  height: 60px;
  margin: -30px auto;
  top: 50%;
  position: absolute;
  left: 15%;
}

.dropzone.multiple_images .dz-preview .dz-image {
  opacity: 1;
}

.dropzone.multiple_images .dz-preview.dz-success .dz-image {
  opacity: 1;
}

.dropzone.multiple_images .dz-upload {
  display: block;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  /*height:20px; bottom:0px; position:absolute; left:0px;*/
  border-radius: 10px;
  overflow: hidden;
}

.dropzone.multiple_images .dz-upload-bar {
  display: block;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  height: 20px;
  bottom: 0px;
  position: absolute;
  left: 0px;
  border-radius: 0px;
}

.dropzone.multiple_images .dz-upload-text {
  text-indent: 0px;
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  color: #cccccc;
  font-size: 24px;
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
}

.dropzone.multiple_images .dz-remove {
  opacity: 0;
  text-indent: -9999px;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0px;
  background-color: rgba(0, 0, 0, 0.5);
  background-image: none;
  border: 0px;
  margin: 0px;
  cursor: pointer;
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -ms-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  transition: opacity 0.4s ease-in;
  overflow: hidden;
  z-index: 1;
  top: 0px;
  right: 0px;
}

.dropzone.multiple_images .dz-preview.dz-success:hover .dz-remove {
  opacity: 0.8;
}

.dropzone.multiple_images .dz-preview.dz-success:hover .dz-remove:hover {
  opacity: 1;
}

.dropzone.multiple_images .dz-remove:before {
  content: "1";
  text-indent: -9999px;
  display: inline-block;
  width: 40px;
  height: 40px;
  position: absolute;
  margin-top: -20px;
  top: 50%;
  left: 50%;
  margin-left: -20px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-trash'><polyline points='3 6 5 6 21 6'></polyline><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'></path></svg>");
  background-size: 100% auto;
  filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(46deg) brightness(105%) contrast(101%);
  opacity: 0.7;
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -ms-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  transition: opacity 0.4s ease-in;
}

.dropzone.multiple_images .dz-remove:hover:before {
  opacity: 1;
}

.dropzone.multiple_images .dz-remove:after {
  content: "";
  display: none;
}

.dropzone.multiple_images .dropzone-choose {
  width: 20%;
  height: 80px;
  float: left;
  border: 2px solid #ffffff;
}

.dropzone_height_sync {
  height: calc(100% - 62px);
}

/* 20231214 photo album adjust */
#album_images.dropzone.multiple_images {
  display: flex;
  flex-wrap: wrap;
}

#album_images.dropzone.multiple_images .dz-preview {
  /*flex: 0 0 20%;*/
  height: inherit;
}

#album_images.dropzone.multiple_images .dz-preview .dz-progress {
  opacity: 0;
}

#album_images.dropzone.multiple_images .dz-preview .dz-success-mark {
  opacity: 0;
  position: absolute;
  bottom: 0px;
  right: 0px;
  border-top: 60px solid transparent;
  border-right: 60px solid #2f286d;
}

#album_images.dropzone.multiple_images .dz-preview .dz-success-mark .icon-check {
  position: absolute;
  bottom: 16px;
  right: -42px;
}

#album_images.dropzone.multiple_images .dz-preview.dz-processing .dz-progress {
  opacity: 1;
}

#album_images.dropzone.multiple_images .dz-preview.dz-processing.dz-complete .dz-progress {
  opacity: 0;
}

#album_images.dropzone.multiple_images .dz-preview.dz-processing.dz-complete .dz-success-mark {
  opacity: 1;
}

#album_images.dropzone.multiple_images .dz-preview .dz-remove {
  display: none;
}

#album_images.dropzone.multiple_images .dz-preview.dz-image-preview .dz-remove {
  display: block;
}

#album_images.dropzone.multiple_images .dz-preview.dz-processing .dz-remove {
  display: none;
}

#album_images.dropzone.multiple_images .dz-preview.dz-processing.dz-complete .dz-remove {
  display: none;
}

#album_images.dropzone.multiple_images .dz-preview:hover .dz-remove {
  opacity: 0.8;
}

#album_images.dropzone.multiple_images .dz-preview:hover .dz-remove:hover {
  opacity: 1;
}

#album_images.dropzone.multiple_images .dz-preview .convert-overlay.show {
  opacity: 1;
  visibility: visible;
  z-index: 10;
}

/*#album_images.dropzone.multiple_images .dz-preview { flex: 0 0 20%; }
#album_images.dropzone.multiple_images .dz-preview { flex: 0 0 20%; }
#album_images.dropzone.multiple_images .dz-preview { flex: 0 0 20%; }*/



/* dropzone audio preview */

.dropzone.single_image .dz-audio {
  position: absolute;
  width: 100%;
  height: 54px;
  margin-top: -27px;
  top: 50%;
  border: 0px;
}

.dropzone .dz-audio audio {
  width: 90%;
  display: block;
  margin: auto;
}

audio::-webkit-media-controls-panel {}

audio::-webkit-media-controls-mute-button {}

audio::-webkit-media-controls-play-button {}

audio::-webkit-media-controls-timeline-container {}

audio::-webkit-media-controls-current-time-display {
  /*display: none;*/
}

audio::-webkit-media-controls-time-remaining-display {
  display: none;
}

audio::-webkit-media-controls-timeline {}

audio::-webkit-media-controls-volume-slider-container {}

audio::-webkit-media-controls-volume-slider {}

audio::-webkit-media-controls-seek-back-button {}

audio::-webkit-media-controls-seek-forward-button {}

audio::-webkit-media-controls-fullscreen-button {}

audio::-webkit-media-controls-rewind-button {}

audio::-webkit-media-controls-return-to-realtime-button {}

audio::-webkit-media-controls-toggle-closed-captions-button {}




/* modal */

.modal.show {
  display: flex !important;
  padding: 0px;
}

.modal .modal-dialog {
  transform: none;
  margin: auto;
  width: 95vw;
}

.modal .modal-content {
  border-radius: 20px;
  overflow: hidden;
}

.modal .modal-header {
  border-radius: 0px;
  position: relative;
}

.modal .modal-header .close {
  padding: 0.2rem 0.62rem;
  box-shadow: 0 0px 0px 0 rgb(34 41 47 / 0%);
  border-radius: 0px;
  background-color: transparent;
  opacity: 1;
  transition: all 0.23s ease 0.1s;
  position: absolute;
  transform: none;
  top: 24px;
  right: 24px;
}

.modal .modal-header .modal-title {
  line-height: 40px;
  font-weight: bold;
}

.modal .modal-footer {
  border-radius: 0px;
}

.modal .modal-header .close:hover,
.modal .modal-header .close:focus,
.modal .modal-header .close:active {
  transform: translate(0px, 0px);
}

/* set all to scrollable modal */
.modal {
  overflow-y: hidden;
}

.modal .modal-body {
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}

.modal {
  min-width: 320px;
  z-index: 5800;
}

.modal.modal-slide-in {
  /*margin-top:62px;*/
  margin-top: 0px;
}

.modal-slide-in .modal-dialog .modal-content {
  position: relative;
}

.modal-slide-in .modal-dialog {
  /*margin-top:62px;*/
  margin-top: 0px;
}

.modal-slide-in .modal-dialog {
  width: 100%;
  min-width: 320px;
}

.modal-header {
  height: 62px;
}

.modal-slide-in .close {
  top: 26px;
  right: 20px;
}

.modal-slide-in .modal-dialog .modal-body {
  padding: 20px;
  padding-bottom: 100px;
  margin: 0px 0px 0px 0px;
  overflow-y: auto !important;
}

.modal.modal-slide-in .modal-title {
  line-height: 40px;
}

.modal.modal-slide-in .modal_button {
  position: fixed;
  bottom: 0px;
  left: 0px;
  z-index: 100;
}


.modal.modal-slide-in#modal_add .modal_button {
  display: none;
}

.modal.modal-slide-in#modal_edit .modal_button {
  display: none;
}

@media (min-width: 576px) {
  .modal-slide-in .modal-dialog.sidebar-lg {
    width: 400px !important;
  }
}

/* summernote */

.note-editor.card {
  box-shadow: none;
  border-radius: 0px;
}

.note-editor .note-toolbar {
  display: block;
}

.note-editor.note-frame .note-status-output {
  display: none;
}

.note-editor .btn {
  padding: 10px 15px;
}

.note-editor .dropdown-toggle::after {
  display: none;
}

.note-editor .dropdown-toggle .note-icon-caret:before {
  margin-left: 0px;
}

.note-editor .panel-heading.note-toolbar .dropdown-menu {
  margin-top: 0px;
  border-radius: 0px;
}

.note-editor .panel-heading.note-toolbar .note-style .dropdown-menu {
  padding: 10px;
  width: max-content;
}

.note-editor .panel-heading.note-toolbar .note-style .dropdown-menu>li:hover {
  background-color: #f0f0f0;
}

.note-editor .panel-heading.note-toolbar .note-style .dropdown-menu>li {
  padding: 8px 10px;
}

.note-editor .panel-heading.note-toolbar .note-style p {
  margin: 0px;
}

.note-editor .modal.show {
  display: flex !important;
  padding: 0px !important;
}

.note-editor .modal.show .modal-dialog {
  transform: none;
  margin: auto;
  width: 95vw;
}

.note-editor .modal .modal-content {
  border-radius: 0px;
}

.note-editor .modal .modal-header {
  border-radius: 0px;
  position: relative;
}

.note-editor .modal .modal-header .close {
  padding: 0.2rem 0.62rem;
  box-shadow: 0 0px 0px 0 rgb(34 41 47 / 0%);
  border-radius: 0px;
  background-color: transparent;
  opacity: 1;
  transition: all 0.23s ease 0.1s;
  position: absolute;
  transform: none;
  top: 24px;
  right: 24px;
}

.note-editor .modal .modal-header .modal-title {
  line-height: 40px;
  font-weight: bold;
}

.note-editor .modal .modal-footer {
  border-radius: 0px;
}

.note-editor .modal .form-check {
  position: relative;
  line-height: 22px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 0px;
}

.note-editor .modal .form-check label {
  position: relative;
  cursor: pointer;
  padding-left: 32px;
}

.note-editor .modal .form-check input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  padding: 0px 30px 0px 0px;
  border-radius: 0px;
  text-align: center;
  margin: 0px;
  position: absolute;
  left: 0px;
}

.note-editor .modal .form-check input[type="checkbox"]:before {
  content: " ";
  display: block;
  border: 1px solid #cccccc;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0px;
  left: 0px;
}

.note-editor .modal .form-check input[type="checkbox"]:after {
  content: " ";
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 4px;
  left: 4px;
  display: inline-block;
  background-image: none;
  background-size: 100% auto;
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}

.note-editor .modal .form-check input[type="checkbox"]:checked:before {
  border: 1px solid #000000;
  background-color: #000000;
}

.note-editor .modal .form-check input[type="checkbox"]:checked:after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'><polyline points='20 6 9 17 4 12'></polyline></svg>");
}

.note-popover.popover {
  display: none;
}

.note-link-popover {
  border-radius: 0px;
}

.note-link-popover .popover-content {
  padding: 5px 10px;
}

.note-link-popover .popover-content>.btn-group {
  margin: 0px;
}

.note-popover .btn {
  padding: 10px;
}

.note-editor .note-image-input {
  text-indent: -9999px;
  display: block;
  color: #6e6b7b;
  border: 1px solid #d8d6de;
  height: 50px;
  border-radius: 0px;
}

.note-editor.note-frame.card {
  margin-bottom: 0px;
}


/* cropper */
#modal_crop.show {
  height: 100%;
  width: 100%;
  margin: 0px;
  display: block !important;
  padding: 0px !important;
  overflow: hidden;
  z-index: 8000;
}

/*#modal_crop { height:100vh; width:100vw; margin: 0px; display: none!important; padding: 0px!important; overflow: hidden; }
#modal_crop.show { display: block!important; }*/
#modal_crop .modal-dialog {
  height: 100%;
  width: 100%;
  max-width: inherit;
  margin: 0px;
  padding: 0px !important;
}

#modal_crop .modal-dialog .modal-content {
  height: 100%;
  width: 100%;
  max-width: inherit;
  margin: 0px;
  padding: 0px !important;
}

#modal_crop .modal-body {
  height: calc(100% - 60px - 80px);
  padding: 0px !important;
}

#modal_crop .img-container {
  height: 100%;
  width: 100%;
  padding: 0px !important;
}

#modal_crop .img-container img {
  width: auto;
  max-height: 100%;
}

#modal_crop .img-container #crop_image {
  opacity: 0;
}


/*.banner_inner .inner_frame:before { content:" "; position:absolute; top:-12dvw; left:-2dvw; width:50dvw; height:50dvw; border-radius:100%; background-color:#98b630; opacity:0.2; z-index:0; }
.banner_inner:before { content:" "; position:absolute; top:-15dvw; left:-4dvw; width:40dvw; height:40dvw; border-radius:100%; background-color:#35831d; opacity:0.3; z-index:0; }*/

/*.banner_inner .inner_frame:before { content:" "; position:absolute; top: 1dvw; left: -44dvw; width: 4dvw; height: 100dvw; transform: skewX(-50deg); transform: skewX(-50deg); background-color:#98b630; opacity:0.5; z-index:0; }
.banner_inner:before { content:" "; position:absolute; top: -5dvw; left: 25dvw; width: 10dvw; height: 15dvw; transform: skewX(-50deg); background-color:#35831d; opacity:0.3; z-index:0; }*/

.banner_inner .bar {
  content: " ";
  position: absolute;
  transform: skewX(-45deg);
  opacity: 0.5;
  z-index: 0;
}

.banner_inner .bar:nth-child(1) {
  top: -50px;
  left: -36px;
  width: 120px;
  height: 390px;
  background-color: #ec5200;
  opacity: 0.5;
}

.banner_inner .bar:nth-child(2) {
  top: 40px;
  left: -24px;
  width: 60px;
  height: 390px;
  background-color: #ecac00;
  opacity: 0.3;
}

.banner_inner .bar:nth-child(3) {
  top: -260px;
  left: 130px;
  width: 24px;
  height: 390px;
  background-color: #ecac00;
  opacity: 0.3;
}

.banner_inner:after {
  content: " ";
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100dvw;
  height: 10dvw;
  background-image: url(../images/top_curve.png?a);
  background-size: cover;
}


/*.banner_inner .bar:nth-child(1) { animation-name: barloop; animation-timing-function:linear; animation-duration:0.7s; }
.banner_inner .bar:nth-child(2) { animation-name: barloop; animation-timing-function:linear; animation-duration:0.8s; }
.banner_inner .bar:nth-child(3) { animation-name: barloop; animation-timing-function:linear; animation-duration:0.5s;}*/

/*.banner_inner .inner_frame:before { animation-name: moveCircle1; animation-duration:0.5s; animation-fill-mode: backwards; animation-delay:0.3s; }
.banner_inner:before { animation-name: moveCircle2; animation-duration:0.5s; animation-fill-mode: backwards; animation-delay:0.8s; }*/
.banner_inner:after {
  animation-name: curving;
  animation-duration: 0.2s;
  animation-fill-mode: backwards;
  animation-delay: 0.2s;
}

@keyframes barloop {
  0% {
    transform: skewX(-45deg) translate(0px, 0px);
  }

  25% {
    transform: skewX(-45deg) translate(0px, 390px);
  }

  50% {
    transform: skewX(-45deg) translate(0px, 0px);
  }

  70% {
    transform: skewX(-45deg) translate(0px, 0px);
  }

  100% {
    transform: skewX(-45deg) translate(0px, -390px);
  }
}


@keyframes curving {
  0% {
    transform: translateX(-100dvw);
    transform: scaleX(6);
  }

  100% {
    transform: translateX(0dvw);
    transform: scaleX(1);
  }
}

@keyframes moveCircle1 {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }

  90% {
    transform: scale(1.1);
    opacity: 0.2;
  }

  100% {
    transform: scale(1);
    opacity: 0.2;
  }
}

@keyframes moveCircle2 {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }

  90% {
    transform: scale(1.1);
    opacity: 0.3;
  }

  100% {
    transform: scale(1);
    opacity: 0.3;
  }
}

.banner_inner {
  max-height: 260px;
  height: 260px;
}

.footer .social img {
  filter: invert(1);
}

.footer a {
  color: #ffffff;
  text-decoration: none;
}

.footer a:hover {
  color: #ffffff;
}

.footer a:active {
  color: #ffffff;
}

.footer {
  background-color: transparent;
  color: #ffffff;
  padding-top: 4dvw;
  overflow: hidden;
}

.footer .inner_frame {
  background-color: #ea842c;
  position: relative;
  width: 100%;
  max-width: 100%;
}

.footer .inner_frame .inner_content {
  max-width: 1200px;
  margin: auto;
}

.footer .inner_frame:before {
  content: " ";
  display: block;
  background-color: #ea842c;
  width: 500dvw;
  height: 250dvw;
  border-radius: 100%;
  position: absolute;
  top: -4dvw;
  left: -200dvw;
}

@media handheld,
screen and (max-width: 960px) {
  .footer {
    padding-top: 6dvw;
  }

  .footer .inner_frame:before {
    top: -6dvw;
  }
}

@media handheld,
screen and (max-width: 640px) {
  .footer {
    padding-top: 80px;
  }

  .footer .inner_frame:before {
    top: -80px;
  }
}

/*.footer .inner_frame:after { content:" "; position:absolute; left:26dvw; top:-100px; width:50px; height:50px; background-image:url("../images/running.gif"); background-size:cover; z-index:2; }*/
.footer {
  position: relative;
  padding-top: 100px;
}

.footer .sky {
  /*position: absolute;
  top: 0px;
  left: 0px;*/
  width: 100%;
  height: 100%;
}


.inner_frame .map_record {
  /*position: absolute;
  top: 0px;
  left: 0px;*/
  width: 100%;
  height: 100%;
}

.inner_frame .map_record .plane {
  content: " ";
  position: absolute;
  left: -6dvw;
  top: 320px;
  width: 100px;
  height: 56px;
  background-image: url("../images/evaairplane.png");
  background-size: cover;
  z-index: 6;
}

.inner_frame .map_record .plane {
  animation-name: flyingPlane;
  animation-duration: 40s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}


.inner_frame .map_record .cloud {
  content: " ";
  position: absolute;
  background-image: url("../images/cloud.png");
  background-size: cover;
}

.inner_frame .map_record .cloud.c1 {
  left: 10dvw;
  top: 100px;
  width: 80px;
  height: 80px;
  z-index: 0;
  animation-duration: 10s;
}

.inner_frame .map_record .cloud.c2 {
  left: 20dvw;
  top: 300px;
  width: 50px;
  height: 50px;
  z-index: 3;
  animation-duration: 14s;
}

.inner_frame .map_record .cloud.c3 {
  left: 50dvw;
  top: 485px;
  width: 70px;
  height: 70px;
  z-index: 1;
  animation-duration: 12s;
}

.inner_frame .map_record .cloud {
  animation-name: floatCloud;
  /*animation-duration:10s;*/
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}




.footer .sky .plane {
  content: " ";
  position: absolute;
  left: -6dvw;
  top: 40px;
  width: 100px;
  height: 56px;
  background-image: url("../images/evaairplane.png");
  background-size: cover;
  z-index: 6;
}

.footer .sky .plane {
  animation-name: flyingPlane;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.footer .sky .cloud {
  content: " ";
  position: absolute;
  background-image: url("../images/cloud.png");
  background-size: cover;
}

.footer .sky .cloud.c1 {
  left: 10dvw;
  top: 10px;
  width: 80px;
  height: 80px;
  z-index: 0;
  animation-duration: 10s;
}

.footer .sky .cloud.c2 {
  left: 57dvw;
  top: 20px;
  width: 100px;
  height: 100px;
  z-index: 3;
  animation-duration: 14s;
}

.footer .sky .cloud.c3 {
  left: 80dvw;
  top: 15px;
  width: 70px;
  height: 70px;
  z-index: 1;
  animation-duration: 12s;
}

.footer .sky .cloud {
  animation-name: floatCloud;
  /*animation-duration:10s;*/
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes flyingPlane {
  0% {
    transform: translateX(-6dvw);
  }

  100% {
    transform: translateX(106dvw);
  }
}


@keyframes floatCloud {
  0% {
    transform: translatey(0px);
  }

  25% {
    transform: translatey(20px);
  }

  50% {
    transform: translatey(0px);
  }

  75% {
    transform: translatey(-20px);
  }

  100% {
    transform: translateX(0px);
  }
}

.banner_inner.map {
  position: relative;
  max-height: inherit;
  width: 100%;
  min-width: 320px;
  /*height:22vw;*/
  height: inherit;
  overflow: hidden;
  display: flex !important;
  justify-content: center;
  align-items: center;
  background-image: none;
  background-repeat: repeat-x;
  background-color: #bccfde;
  background-position: right 65%;
  background-size: cover;
  /*top: 1px;*/
  margin-top: 109px;
  background-color: #71c8db;
}

.banner_inner.map .inner_frame {
  position: relative;
}

.banner_inner.map:before {
  display: none;
}

.banner_inner.map .inner_frame:before {
  display: none;
}


@media handheld,
screen and (max-width: 1024px) {
  .banner_inner.map {
    margin-top: 65px;
  }
}

.map_record {
  position: relative;
}

.map_record .badge {
  position: absolute;
  display: block;
  width: 10%;
  height: 16.7%;
  background-image: url("../images/badge.png");
  background-size: cover;
}

.map_record .badge .race_num {
  position: absolute;
  left: 65%;
  top: 65%;
  font-size: 24px;
  line-height: 24px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.map_record .badge.asia {
  top: 26%;
  left: 70%;
}

.map_record .badge.europe {
  top: 18%;
  left: 52%;
}

.map_record .badge.namerica {
  top: 22%;
  left: 22%;
}

.map_record .badge.samerica {
  top: 54%;
  left: 31.5%;
}

.map_record .badge.africa {
  top: 50%;
  left: 48%;
}

.map_record .badge.australia {
  top: 62%;
  left: 82%;
}


.map_record .badge.animation_1 {
  animation-name: badgePopup;
  animation-duration: 0.3s;
  animation-fill-mode: backwards;
  animation-delay: 0s;
}

.map_record .badge.animation_2 {
  animation-name: badgePopup;
  animation-duration: 0.3s;
  animation-fill-mode: backwards;
  animation-delay: 0.5s;
}

.map_record .badge.animation_3 {
  animation-name: badgePopup;
  animation-duration: 0.3s;
  animation-fill-mode: backwards;
  animation-delay: 1s;
}

.map_record .badge.animation_4 {
  animation-name: badgePopup;
  animation-duration: 0.3s;
  animation-fill-mode: backwards;
  animation-delay: 1.5s;
}

.map_record .badge.animation_5 {
  animation-name: badgePopup;
  animation-duration: 0.3s;
  animation-fill-mode: backwards;
  animation-delay: 2s;
}

.map_record .badge.animation_6 {
  animation-name: badgePopup;
  animation-duration: 0.3s;
  animation-fill-mode: backwards;
  animation-delay: 2.5s;
}


@media handheld,
screen and (max-width: 1199px) {
  .map .badge .race_num {
    font-size: 4dvw;
    line-height: 4dvw;
  }
}


@keyframes badgePopup {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }

  90% {
    transform: scale(1.5);
    opacity: 0.3;
  }

  100% {
    transform: scale(1);
    opacity: 0.3;
  }
}


/* event title */
.banner_inner .event_title {
  position: absolute;
  font-weight: 600;
  color: #ffffff;
  /*bottom: 30px;*/
  text-shadow: 0px -3px 10px rgb(60 88 55 / 30%);
}

.banner_inner .event_title {
  font-size: 24px;
  line-height: 40px;
  left: 20px;
  top: 13px;
}

@media handheld,
screen and (max-width: 1024px) {
  .banner_inner .event_title {
    font-size: 24px;
    line-height: 40px;
    left: 30px;
    top: 13px;
  }
}

@media handheld,
screen and (max-width:768px) {
  .banner_inner.map .event_title {
    display: none;
  }

  .banner_inner .event_title {
    font-size: 20px;
    line-height: 30px;
    left: 20px;
    top: 13px;
  }
}

/*@media handheld, screen and (max-width:480px) {
	.banner_inner .event_title { font-size: 15px; line-height: 24px; left: 20px; top: 15px; }
}*/



/* page title */
.banner_inner .page_title {
  position: absolute;
  font-weight: 600;
  color: #ffffff;
  /*bottom: 30px;*/
  text-shadow: 0px -3px 10px rgb(60 88 55 / 60%);
}

.banner_inner .page_title {
  font-size: 48px;
  line-height: 80px;
  left: 25px;
  top: 40px;
}

@media handheld,
screen and (max-width: 1024px) {
  .banner_inner .page_title {
    font-size: 48px;
    line-height: 80px;
    left: 35px;
    top: 40px;
  }

  /*.banner_inner.map .page_title { font-size: 4.68dvw; line-height:7.8125dvw; top: 2dvw; left: 3dvw; }*/
}

@media handheld,
screen and (max-width:768px) {
  .banner_inner.map .page_title {
    display: none;
  }


  .inner_frame .map_record .plane {
    content: " ";
    position: absolute;
    left: -6dvw;
    top: 200px;
    width: 50px;
    height: 28px;
    background-image: url("../images/evaairplane.png");
    background-size: cover;
    z-index: 6;
  }



  .inner_frame .map_record .cloud {
    content: " ";
    position: absolute;
    background-image: url("../images/cloud.png");
    background-size: cover;
  }

  .inner_frame .map_record .cloud.c1 {
    left: 10dvw;
    top: 100px;
    width: 30px;
    height: 30px;
    z-index: 0;
    animation-duration: 10s;
  }

  .inner_frame .map_record .cloud.c2 {
    left: 20dvw;
    top: 190px;
    width: 40px;
    height: 40px;
    z-index: 3;
    animation-duration: 14s;
  }

  .inner_frame .map_record .cloud.c3 {
    left: 50dvw;
    top: 255px;
    width: 40px;
    height: 40px;
    z-index: 1;
    animation-duration: 12s;
  }

  .inner_frame .map_record .cloud {
    animation-name: floatCloud;
    /*animation-duration:10s;*/
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }



  .banner_inner .page_title {
    font-size: 40px;
    line-height: 60px;
    left: 25px;
    top: 40px;
  }
}

/*@media handheld, screen and (max-width:480px) {
	.banner_inner .page_title { font-size: 30px; line-height: 48px; left: 25px; top: 40px; }
}*/