@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');

@font-face {
   font-family: 'Optima';
   font-style: normal;
   font-weight: normal;
   src: local('Optima'), url('font/OPTIMA.woff') format('woff');
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}


body {
   background-color: #e6e6e6;
}



h1,
h2,
h3,
a,
button,
.txt-head {
   font-family: 'Optima';
}


h4,
p {
   font-family: 'Lato', sans-serif;
   color: #535353;
}

.sec--padding {
   padding-top: 3em;
   padding-bottom: 5em;
   padding-right: 10em;
   padding-left: 10em;
}

.txt-head span {
   font-size: 4vw;
   letter-spacing: 10px;
   text-transform: uppercase;
   color: #005197;
}

section.pop-recipe .txt-head {
   margin-bottom: 2rem;
}

section.pop-recipe .txt-head span {
   color: white;
}

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

header {
   width: 100vw;
   position: fixed;
   top: 0;
   z-index: 1999;
   background-color: rgba(255, 255, 255);
}

header:hover .nav-bar {
   top: 0;
   opacity: 1;
}

.bar-hover {
   position: relative;
   display: flex;
   margin: 2vh 10vw;
   z-index: 350;
   background-image: url(img/logo/menu-ho_250724.webp);
   background-position: center;
   background-repeat: no-repeat;
   background-size: 25px;
   width: 40px;
   height: 40px;
   transition: all 500ms;
}



.nav-bar {
   position: absolute;
   display: flex;
   width: 100vw;
   padding: 2vh 10vw;
   z-index: 300;
   background: #fff;
   top: -5vh;
   transition: all 1s ease-in-out;
   opacity: 0;
}

.icon {
   position: relative;
   display: flex;
   margin: auto 0;
   width: 40px;
   height: 40px;
}

.icon img {
   width: 40px;
   padding-top: 10px;
}

.nav-menu {
   position: relative;
   display: flex;
   width: 100%;
   align-items: center;
}

.nav-menu ul {
   list-style: none;
   display: flex;
   width: 100%;
   justify-content: flex-end;
}

.nav-menu li {
   display: flex;
   justify-content: center;
   font-size: 0.7vw;
   font-weight: 400;
   border-right: 1px solid rgba(0, 0, 0, 0.30);
   cursor: pointer;
   transition: all 300ms;
   width: 6vw;
   letter-spacing: 3px;
   font-weight: 600;
}

.nav-menu li:last-child {
   border: none;
   margin: 0 10px;
}

.nav-menu li:hover {
   color: #005197;
   letter-spacing: 0.5px;
}

.logo {
   display: flex;
   position: relative;
   margin: auto 0;
   width: 50px;
   height: 40px;
}

.logo img.logo {
   width: 50px;
   display: none;
}

/* bar-logo */

header .bar-logo {
   display: flex;
   position: absolute;
   top: 0;
   right: 0;
   justify-content: flex-end;
   margin: 2vh 10vw;
   z-index: 500;
}

.bar-logo img {
   width: 40px;
   height: 40px;
}

/* bar-logo */



section {
   position: relative;
   width: 100vw;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
}

section.vdo-banner {
   position: relative;
   width: 100vw;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 0;
}


/********************* VDO section banner *********************/

.vdo-banner .video-bg {
   min-width: 100%;
   width: 100vw;
   height: 100vh;
   object-fit: cover;
   z-index: -1;
   position: absolute;
}

.vdo-banner .video-bg::-webkit-media-controls {
   display: none !important;
}

.vdo-mobile {
   display: none;
}

span.txt-vdo {
   color: #ffffff;
   font-size: 3vw;
}

@media screen and (max-width: 1280px) {
   section.vdo-banner {
      padding: 0;
   }

   .video-bg {
      /* display: none; 18-12-24*/
      display: block;
   }

   .vdo-mobile {
      /* display: block; 18-12-24 */
      display: none;
   }

   .vdo-mobile iframe {
      /* transform: scale(2.8); */
      transform: scale(1.25);
   }
}

@media screen and (max-width: 1024px) {
   .vdo-mobile iframe {
      transform: scale(1.3);
   }
}


@media screen and (max-width: 820px) {
   .sec--padding {
      padding-right: 2em;
      padding-left: 2em;
      padding-top: 5em;
   }
}

@media screen and (max-width: 430px) {
   .vdo-mobile iframe {
      transform: scale(4) !important;
   }
}

/********************* VDO section banner *********************/

section.vdo-banner .txt-head {
   position: absolute;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;

   text-align: center;
   -o-text-align: center;
   -ms-text-align: center;
   -webkit-text-align: center;
   color: #ffffff;
}


section.vdo-banner .icon {
   width: 50px;
   height: 25px;
   overflow: hidden;
   position: absolute;
   animation-name: animation;
   animation-duration: 2s;
   animation-iteration-count: infinite;
   animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
   margin-top: 0;
   opacity: 0;
   top: 90%;
   left: 50%;
   transform: translateX(-50%);
}

section.vdo-banner .icon::before {
   content: "";
   box-sizing: border-box;
   width: 50px;
   height: 50px;
   position: absolute;
   top: -36px;
   left: 0;
   border: solid 3px #fff;
   transform: rotate(45deg);
}

@keyframes animation {
   0% {
      margin-top: 0;
      opacity: 0;
   }

   5% {
      margin-top: 0;
      opacity: 1;
   }

   25% {
      opacity: 1;
   }

   50% {
      margin-top: 24px;
      opacity: 0;
   }

   100% {
      margin-top: 24px;
      opacity: 0;
   }
}

/******************** container *********************/
.container {
   position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
   justify-content: center;
}

/******************** container *********************/

/******************** section.about *********************/
section.about {
   height: fit-content;
}

.about {
   background-color: #ffffff;
}

.about .v-m {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 0;
}

.about .v-m_mo {
   display: none;
   margin-bottom: 3rem;
}

.v-m_mo h1 {
   text-align: center;
}

.mission_mo,
.vision_mo {
   margin-bottom: 3rem;
}

.v-m_mo h1 span {
   color: #005197;
}

p.v-m_detail,
.quarity_mo .txt-detail p {
   font-size: 14px;
   letter-spacing: 0.5px;
   text-align: center;
}

.quarity_mo {
   display: none;
}

/* quarity_mo */
.quarity_mo .txt-gradient {
   text-align: center;
}

.quarity_mo .txt-detail p {
   letter-spacing: -0.5px;
}



/*!!!!!!!!!!!!!!!!!!!! */
.about button {
   color: #005197;
   font-size: 4vw;
   text-transform: uppercase;
   width: 20vw;
   margin: 3vh 0;
}

/*!!!!!!!!!!!!!!!!!!!! */

/*???????????????? m&v swich ??????????????*/
.fade {
   opacity: 0;
   -webkit-transition: opacity .15s linear;
   -o-transition: opacity .15s linear;
   transition: opacity .15s linear
}

.fade.in {
   opacity: 1
}

.nav {
   padding-left: 0;
   margin-bottom: 0;
   list-style: none;
   display: flex;
   width: 50vw;
}

.nav>li {
   position: relative;
   display: flex;
   justify-content: center;
   width: 100%;
}

.nav>li>a {
   position: relative;
   display: block;
   padding: 10px 15px;
}

.nav>li>a:focus,
.nav>li>a:hover {
   text-decoration: none;
   background-color: #eee;
}

.nav>li.disabled>a {
   color: #777;
}

.nav>li.disabled>a:focus,
.nav>li.disabled>a:hover {
   color: #777;
   text-decoration: none;
   cursor: not-allowed;
   background-color: transparent;
}

.nav .open>a,
.nav .open>a:focus,
.nav .open>a:hover {
   background-color: #eee;
   border-color: #337ab7;
}

.nav .nav-divider {
   height: 1px;
   margin: 9px 0;
   overflow: hidden;
   background-color: #e5e5e5;
}

.nav>li>a>img {
   max-width: none;
}


.nav-tabs>li {
   float: left;
   margin-bottom: -1px;
}

.nav-tabs>li>button {
   transition: .15s ease;
}

.nav-tabs>li>button:hover {
   color: #339f5b;
}

.nav-tabs>li.active>button,
.nav-tabs>li.active>button:focus,
.nav-tabs>li.active>button:hover {
   cursor: default;
   text-transform: uppercase;
   color: #339f5b;
}

.tab-content {
   width: 100%;
   text-align: center;
   padding: 1rem;
}

.tab-content p {
   font-size: 1.5rem;
   letter-spacing: 2px;
   margin-top: 1.5rem;
}

.tab-content>.tab-pane {
   display: none;
}

.tab-content>.active {
   display: block;
}

.nav-tabs .dropdown-menu {
   margin-top: -1px;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
}

.navbar {
   position: relative;
   min-height: 50px;
   margin-bottom: 20px;
   border: 1px solid transparent;
}

@media (min-width:768px) {
   .navbar {
      border-radius: 4px;
   }
}

@media (min-width:768px) {
   .navbar-header {
      float: left;
   }
}


@media (min-width:768px) {

   .navbar>.container .navbar-brand,
   .navbar>.container-fluid .navbar-brand {
      margin-left: -15px;
   }
}



.btn-group-vertical>.btn-group:after,
.btn-group-vertical>.btn-group:before,
.btn-toolbar:after,
.btn-toolbar:before,
.clearfix:after,
.clearfix:before,
.container-fluid:after,
.container-fluid:before,
.container:after,
.container:before,
.dl-horizontal dd:after,
.dl-horizontal dd:before,
.form-horizontal .form-group:after,
.form-horizontal .form-group:before,
.modal-footer:after,
.modal-footer:before,
.modal-header:after,
.modal-header:before,
.nav:after,
.nav:before,
.navbar-collapse:after,
.navbar-collapse:before,
.navbar-header:after,
.navbar-header:before,
.navbar:after,
.navbar:before,
.pager:after,
.pager:before,
.panel-body:after,
.panel-body:before,
.row:after,
.row:before {
   display: table;
   content: " ";
}

.btn-group-vertical>.btn-group:after,
.btn-toolbar:after,
.clearfix:after,
.container-fluid:after,
.container:after,
.dl-horizontal dd:after,
.form-horizontal .form-group:after,
.modal-footer:after,
.modal-header:after,
.nav:after,
.navbar-collapse:after,
.navbar-header:after,
.navbar:after,
.pager:after,
.panel-body:after,
.row:after {
   clear: both;
}

/*???????????????? m&v swich ??????????????*/


.about .line-x {
   width: 3px;
   height: 12vh;
   background-color: #005197;
   background: linear-gradient(to top, #005197, #339f5b) !important;
}

.quarity {
   display: flex;
   /* margin-top: 10vh; */
   padding: 2.5rem 0 0 0;
}

.quarity-img,
.quarity-detail {
   display: flex;
   flex-direction: column;
   width: 50%;
}

.quarity-img {
   align-items: center;
   display: grid;
}

.img-top,
.img-bottom {
   width: 100%;
   display: flex;
   justify-content: space-evenly;
}

img.img-quarity {
   height: 14vh;
   /* margin-top: ; */
   /* margin: 4vh 1vw 0 0; */
}

/* 
06-12-24
.img-bottom img.img-quarity {
   transform: scale(1.5) !important;
} */

.quarity-detail {
   justify-content: flex-end;
   align-items: flex-start;
   padding-left: 3vw;
}

.txt-gradient {
   text-transform: uppercase;
   background: linear-gradient(to right, #339f5b 0%, #005197 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   /* font-weight: 600; */
}

.line-y {
   width: 100%;
   height: 5px;
   background-color: #005197;
   background: linear-gradient(to top, #005197, #339f5b) !important;
   margin: 3vh 0;
}

.about .txt-detail {
   font-size: 1.5rem;
   /* font-weight: 600; */
   letter-spacing: 2px;
   margin: 1vh 0;
}

.quarity_mo .txt-head,
.quarity_mo .quarity_img_mo,
.quarity_mo .txt-detail {
   margin-bottom: 3rem;
}


/******************** section.about *********************/




/******************** section.market *********************/

section.market {
   /* height: 120vh; */
   background-color: #f8f8f8;
   padding-bottom: 10em;
}

section.market .con-map_mo {
   display: none;
}

.con-market {
   /* border: 1px solid rebeccapurple; */
   justify-content: flex-start;
   /* justify-content: center; */
   /* top: 20%; */
   height: auto;
}

.con-market .txt-head {
   text-align: center;
   margin-top: 10vh;
   /* margin-bottom: 5vh; */
}

.market .txt-head span {
   font-size: 4vw;
}

.content-market {
   display: flex;
   justify-content: space-around;
   /* border: #e6e6e6 solid; */
   /* height: 100%; */
   width: 100%;
}

section.market .content-market {
   /* border: 1px solid teal; */
   display: flex;
}

.content-market .num-run {
   /* border: 1px solid yellowgreen; */
   position: absolute;
   display: flex;
   width: 30%;
   height: 15vw;
   left: 0;
   padding: 1rem;
   justify-content: space-between;

   /* background-color: rgba(0, 0, 0, 0.30); */
}

.t-box {
   width: fit-content;
   /* border: 1px solid pink; */
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}

.t-box .txt-top,
.t-box .txt-bottom {
   font-size: 1.7vw;
   margin-bottom: 2%;
   letter-spacing: 2px;
}

.t-box .run {
   font-size: 5vw;
   color: #339f5b;
   font-family: 'Optima';
   height: 5vw;
   display: flex;
   align-items: center;
}

.counter-item h1 {
   color: #339f5b;
   font-size: 5vw;
}

/*!!!!!!!!!! end box-num-run !!!!!!!!!!*/


/* ?????????????? con-map ????????????? */
.content-market .con-map {
   width: 100%;
   height: 60vh;
   /* position: absolute; */
   position: relative;
   display: flex;
   /* border: orange solid; */
}

.con-map .nav-map {
   display: flex;
   flex-direction: column;
   /* border: #339f5b solid 1px; */
   width: 15vw;
   height: 100%;
   /* transform: translateY(10%); */
   justify-content: center;
   /* margin-top:2rem; */
}

.nav-map>li {
   float: left;
   margin-top: 1vh;
   margin-bottom: 1vh;
   height: fit-content;
   width: 100%;
   display: flex;
   padding: 0 10px;
}

.nav-map>li>button {
   transition: .15s ease;
   text-transform: uppercase;
   color: #404040;
   font-size: 1.5vw;
   text-align: left;
}

.nav-map>li>button:hover {
   color: #005197;
}

.nav-map>li.active>button,
.nav-map>li.active>button:focus,
.nav-map>li.active>button:hover {
   cursor: default;
   text-transform: uppercase;
   /* background: linear-gradient(to right, #339f5b 0%, #005197 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent; */
   /* font-weight: 600; */
   color: #005197;
}

.con-map .sec-map {
   width: 100%;
   text-align: center;
   /* border: red solid 1px; */
   display: flex;
}

.sec-map .absolute {
   position: absolute;
   display: flex;
   width: 84%;
   flex-direction: row;
   height: 100%;
   /* height: fit-content; */
   /* border: blue solid; */
}

.sec-map .six-continent {
   /* border: pink solid; */
   position: relative;
   width: 100%;
   top: 15vw;
   height: fit-content;
}

.six-continent .name-continent {
   width: 100%;
   text-align: left;
   /* border: gold solid; */
}

.name-continent span {
   font-family: 'Optima';
   font-size: 5.5vw;
   line-height: normal;
   text-transform: uppercase;
   background: linear-gradient(to right, #339f5b 0%, #005197 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.six-continent .name-countries {
   width: 100%;
   /* border: green solid; */
   display: flex;
   margin-top: 1rem;
}

.name-countries ul {
   width: 100%;
}

.name-countries li {
   text-align: left;
   /* font-size: 1rem; */
   font-size: 16px;
}

.sec-map .map {
   /* width: fit-content; */
   height: 100%;
   display: flex;
   align-items: center;
}

.map figure.img-map {
   width: fit-content;
   margin: 0 3vw;
}

.map figure.img-map img {
   /* width: 50vw; */
   width: 100vw;
}

/******************** section.market *********************/










@media only screen and (max-width: 1500px) {
   /* section {
      height: 120vh;
      add by Ying 14-03-24
   } */

   .nav-menu li {
      font-size: 12px;
      width: 110px;
   }

   /* section.pop-recipe {
      height: 128vh;
   } */

   /* section.about {
      height: 120vh;
   } */

   .con-market {
      height: 100%;
   }

   .head-pop-recipe {
      width: 80%;
   }

   .con-book .txt-head span {
      font-size: 2.9vw;
   }

}

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

   header .bar-hover,
   header .bar-logo {
      margin: 2vh 5vw;
   }

}

@media screen and (max-width: 1024px) {
   img.img-quarity {
      height: 10vh;
   }
}