:root{
  --swiper-pagination-progressbar-bg-color: #e7e7e7;
  --swiper-pagination-color: var(--blue-light);
  --section-title-size: 2.889em;
}
#homeTabMenu{
  position: relative;
  padding-top: 15px;
  overflow: hidden; 
  max-height: 200px; 
}
#homeTabMenu .tabItem:before{
  content: '';
  width: 0;
  height: 3px;
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: width .5s ease-out 0s;
  z-index: 10;
}
#homeTabMenu .tabItem.selected:before{ width: 100%;}
#homeTabMenu #tabPublic:before{ background-color: var(--blue); }
#homeTabMenu #tabShipOwners:before{ background-color: var(--main-color); }
#homeTabMenu #tabSeafarers:before{ background-color: var(--blue-normal); }

#homeTabMenu .tabCtrls{  
  display: flex;
  column-gap: 20px;
  justify-content: center;
  margin: 0;
  position: relative;
  z-index: 100;
  list-style-type: none;
  transition: transform .3s ease 0s;
}
#homeTabMenu .tabCtrls .tabItem {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: end;
  padding-top: 10px; 
  transition: padding .3s ease 0s; 
}
#homeTabMenu .tabCtrls .tabItem.selected{ padding-top: 0;}
#homeTabMenu .tabCtrls .tabItem a{
  font-weight: 700;
  transition: background .3s ease 0s
}
#homeTabMenu .tabCtrls .tabItem.selected a{
  
}
/* #homeTabMenu .tabCtrls .tabItem a:hover{
  filter: hue-rotate(-15deg);
} */
#homeTabMenu .tabCtrls .tabItem#tabPublic a{
  background-color: var(--blue);
}
#homeTabMenu .tabCtrls .tabItem#tabPublic a:hover{  
  background-color: #0077cb;
}
#homeTabMenu .tabCtrls .tabItem#tabShipOwners a{
  background-color: var(--main-color);
}
#homeTabMenu .tabCtrls .tabItem#tabShipOwners a:hover{
  background-color: #007cc2;
}
#homeTabMenu .tabCtrls .tabItem#tabSeafarers a{
  background-color: var(--blue-normal);
}
#homeTabMenu .tabCtrls .tabItem#tabSeafarers a:hover{
  background-color: #00589c;
}
#homeTabMenu .tabCtrls .tabItem a{
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 80px 10px 20px;
  height: 100%;
  /* min-height: 60px; */
  color: #fff;
  font-size: 1.222em;
  line-height: 26px;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}
#homeTabMenu .tabCtrls .tabItem a span{
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: block;
  background: currentColor;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}
#homeTabMenu .tabCtrls .tabItem a span:before{
  content: "";
  height: 7px;
  width: 7px;
  display: block;
  border: 2px solid var(--blue);
  border-left-width: 0;
  border-top-width: 0;
  transform-origin: left top;
  transform: rotate(45deg) translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
}

#homeTabsWrap{
  margin: 70px 0;
  position: relative;
  z-index: 200;
}
#homeTabsWrap .tab-panel{
  opacity: 0;  
  transform: scale(.8);
  transition: opacity .3s ease 0s, transform .3s ease 0s;
}
#homeTabsWrap .tab-panel.shownOp{
  opacity: 1;
  transform: scale(1);
}
#homeTabsWrap .swiper-wrap{
  max-width: 1700px;
  margin: 0 auto;
}
#homeTabsWrap .swiper-container{
  overflow: hidden;  
}
#homeTabsWrap .swiper-main{
  position: relative;
  padding: 0 80px;
}
#homeTabsWrap .swiper-slide{
  width: calc((100% - 80px)/5);
}
#homeTabsWrap .swiper-slide > a{
  border: 1px solid transparent;
  transition: transform .3s ease 0s, border-width .3s ease 0s;
}
#homeTabsWrap .swiper-slide:not(.swiper-slide-active) > a{
  transform: scale(0.9);
}
#homeTabsWrap .swiper-slide-active > a{
  border-width: 8px;
  background-color: #006ADC;
}
#homeTabsWrap .swiper-slide a{
  display: block;
  position: relative; 
}
#homeTabsWrap .swiper-slide a .img{
  display: block;
  line-height: 0;
  z-index: 1;
}
#homeTabsWrap .swiper-slide a .img img{
  aspect-ratio: 1/1;
  width: 100%;
  opacity: 0;
}
#homeTabsWrap .swiper-slide a .img img.swiper-lazy-loaded{
  opacity: 1;
}
#homeTabsWrap .swiper-slide a .caption{
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  padding: 20px;
  text-align: center;
  text-transform: uppercase;  
  font-size: 1.222em;
  color: #fff;
  z-index: 3;
  transition: font-size .3s ease 0s;
  background-color: #006ADC;
}
#homeTabsWrap .swiper-slide a:before{
  content: '';
  position: absolute;
  width: 100%;
  height: 50%;
  bottom: 0;
  left: 0;
  background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0) 70%);
  z-index: 2;
}
#homeTabsWrap .swiper-slide.swiper-slide-active a:before{ display:none; }
#homeTabsWrap .swiper-slide.swiper-slide-active a .caption{  
  font-size: 1.444em;
  background-color: #006ADC;
}
#homeTabsWrap .swiperCtrls{
  margin: 20px 0;
}
#homeTabsWrap .swiperCtrls a, #homeTabsWrap .swiperCtrls span{ color:#000; }
#homeTabsWrap .swiper-arrow{
  background-color: var(--blue);
  border-radius: 50%;
}
#homeTabsWrap .swiper-arrow:hover{
  background-color: #00a0e8;
}
#tab-panel-1 .swiper-arrow{
  background-color: var(--blue);
}
#tab-panel-1 .swiper-arrow:hover{
  background-color: var(--main-color);
}
#tab-panel-1 .swiper-slide-active{
  border-color: var(--blue);
}
/* #tab-panel-1 .swiper-slide-active a .caption{
  background-color: rgba(0,131,223,.8);
} */
#tab-panel-2 .swiper-arrow{
  background-color: var(--main-color);
}
#tab-panel-2 .swiper-arrow:hover{
  background-color: var(--blue-normal);
}
#tab-panel-2 .swiper-slide-active{
  border-color: var(--main-color);
}
/* #tab-panel-2 .swiper-slide-active a .caption{
  background-color: rgba(0,112,175,.8);
} */
#tab-panel-3  .swiper-arrow{
  background-color: var(--blue-normal);
}
#tab-panel-3 .swiper-arrow:hover{
  background-color: var(--blue);
}
#tab-panel-3 .swiper-slide-active{
  border-color: var(--blue-normal);
}
/* #tab-panel-3 .swiper-slide-active a .caption{
  background-color: rgba(0,71,151,.8);
} */
#homeTabsWrap .swiper-wrap .swiper-arrow span{
  width: 16px;
  height: 16px;
  border-width: 2px;
  color: #000;
}
#mainVisualWrap{
  position: relative;
  background-color:#bfdef0;
  padding-bottom: 11vw;
  overflow: hidden;
  transition: border-color .3s ease 0s;
}
#mainVisualWrap:before{
  content:'';  
  width: calc(100% + 2px);
  height: 200vh;
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  background-position: 50% 100%;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-image: url(../images/home/main-v.jpg);
/*  background-color:#bfdef0;*/
  z-index: 10;
}
/* #mainVisualWrap:after{
  content:'';
  width: calc(100% + 2px);
  height: 200px;
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  background-position: 50% 100%;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-image: url(../images/home/index-curve.svg);
  z-index: 20;
} */
#missionWrap{ 
  margin: max(24vw, 1.875em) auto 0;
  /*  margin: 300px auto 0;*/
  max-width: 1000px;
  text-align: center;
  color: #fff;
  position: relative;
  z-index: 300;
}
#missionWrap .container > div > div{
  display: inline-block;
  text-shadow: 1px 1px 20px rgba(0,0,0,.3);
}
#missionWrap .container > div > div.font-small{
  font-size: 1.875rem;
  font-size: clamp(1.5rem, 2.5vw + .8rem, 2.5rem);
}
#missionWrap .container > div > div.font-large{
  font-size: 3.157rem;
  font-size: clamp(2.5rem, 4.23vw + .8rem, 4.375rem);
}

#mision-line-1 .font-small{ 
  padding-right: 5px;
}
#mision-line-2 .font-small{ 
  padding-left: 5px;
}
#visualWaves{
  position: absolute;
  display: flex;
  justify-content: flex-end;
	align-items: center;
	overflow: hidden;
  width: calc(100% + 2px);
  aspect-ratio: 9/1;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  pointer-events: none;
}
#visualWaves .st0{ opacity:0.6; fill:#2C8BB1;}
#visualWaves .st1{ opacity:0.5; fill:#0D5593;}
#visualWaves .st2{ fill:#F2F6FA;}
#visualWaves > div{
  position: absolute;
  width: 100%;
  height: 100%;
}
#visualWaves svg{
  position: absolute;
  left: 0;
  bottom: 0;
}
#bannerZone {  
  padding: 40px;
  background-color: var(--blue-normal);
}
#bannerSwiper{
  position: relative;
  padding: 0 100px;
  max-width: 1580px;
  margin: 0 auto;  
}
#bannerSwiper .swiper-container{
  overflow: hidden;
}
#bannerSwiper .swiper-arrow{
  width: var(--button-size);
  height: var(--button-size);
}
#bannerSwiper > a:focus-visible {
  outline: #fff solid 1px !important;
}
#bannerSwiper .swiper-slide{
  width: auto;
  height: 56px;
  overflow: hidden;
}
#bannerSwiper .swiper-slide a{
  display: block;
  height: 100%;
  border: 3px solid #fff;
  line-height: 0;
  transition: border .3s ease;
}
#bannerSwiper .swiper-slide a:focus-visible, #bannerSwiper .swiper-slide a:hover{
  border-color: #B09230;
}
#bannerSwiper .swiper-slide a > img{
  height: 50px;
  width: auto;
  border: 0.5px solid #00387e;
}
#bannerSwiper .swiper-arrow span, #bannerSwiper .swiper-play span{ color:#fff;}

#bannerSwiper .swiper-play {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  transition: transform .3s ease 0s;
}
#bannerSwiper.swiper-wrap .swiper-play:hover, #bannerSwiper.swiper-wrap .swiper-play:focus-within{
  transform: translateY(-50%) scale(1.25);
}
.secTitle{
  text-align: center;
}
.secTitle .title{
  color: var(--main-color);
  font-size: var(--section-title-size);
}
#newsWrap{
  background-color: #f3f7fb;
  padding-top: 20px;
  padding-bottom: 80px;
}
#newsMain{
  max-width: var(--maxwidth);
  padding: 0 var(--layout-padding);
  margin: 0 auto;  
}
#newsMain .swiper-container{ overflow: hidden; }
#newsMain .ctrlsWrap{ display:flex; justify-content:end; margin-bottom:20px; }
#newsMain .ctrlsWrap .swiperCtrls .swiper-arrow, #newsMain .ctrlsWrap .swiperCtrls a{
  position: relative;
  display: inline-block;
  vertical-align: top;
}
#newsMain .ctrlsWrap .swiperCtrls .swiper-arrow{
  width: var(--button-size);
  height: var(--button-size);
  border-radius: 50%;
  border: 2px solid #666;
  margin: 0 5px;
}
#newsMain .ctrlsWrap .swiperCtrls .swiper-arrow:hover{
  border-color: #0077cb;
}
#newsMain .ctrlsWrap .swiperCtrls .swiper-arrow span{
  width: 14px;
  height: 14px;
  border-color: #666;
}
#newsMain .ctrlsWrap .swiperCtrls .swiper-arrow:hover span{ border-color:#0077cb;}
#newsMain .ctrlsWrap .swiperCtrls .btn-play{ 
  height:40px;
  transform: scale(1);
  transition: transform .3s ease 0s;
}
#newsMain .ctrlsWrap .swiperCtrls .btn-play:hover, #newsMain .ctrlsWrap .swiperCtrls .btn-play:focus-within{
  transform: scale(1.2);
}
#newsMain .ctrlsWrap .swiperCtrls .btn-play:before,
#newsMain .ctrlsWrap .swiperCtrls .btn-play:after{
  background-color: #666;
}
#newsMain .ctrlsWrap .swiperCtrls .btn-play.stop:before {
  border-bottom: 7px solid transparent;
  border-left: 10px solid #666;
  border-top: 7px solid transparent;
  background: none;
  border-radius: 0;
}
#newsMain .ctrlsWrap .swiperCtrls .btn-play:hover:before,
#newsMain .ctrlsWrap .swiperCtrls .btn-play:hover:after{
  background-color: #0077cb;
}
#newsMain .ctrlsWrap .swiperCtrls .btn-play.stop:hover:before{
  border-bottom: 7px solid transparent;
  border-left: 10px solid #0077cb;
  border-top: 7px solid transparent;
  background: none;
}
#newsMain .swiper-slide{
  border: 1px solid #ccc;
  aspect-ratio: 4/3;
  width: calc((100% - 120px)/4);
  margin-right: 40px;
  background-color: #fff;
  transition: border .3s ease 0s;
}
#newsMain .swiper-slide:hover{
  border: 1px solid var(--blue-light);
}
#newsMain .swiper-slide a{
  display: block;
  height: 100%;
  padding: 30px 25px 50px;
  position: relative;
  font-size: 1.111em;
  transition: background .3s ease 0s;
}
#newsMain .swiper-slide a:hover{
  background-color: #e0f6ff;
}
#newsMain .swiper-slide a .date{
  color: var(--main-color);
  display: block;
  margin-bottom: 15px;
}
#newsMain .swiper-slide a .news{
/*  display: block;*/
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}
#newsMain .swiper-slide a .details{
  position: absolute;
  bottom: 20px;
  right: 30px;
  display: inline-block;
  padding-right: 20px;
  color: var(--main-color);
}
#newsMain .swiper-slide a .details:after{
  content: '';
  position: absolute;
  top: 50%;
  right: 8px;
  height: 8px;
  width: 8px;
  display: block;
  border: 1px solid currentColor;
  border-top-width: 0;
  border-left-width: 0;
  transform: rotate(-45deg) translateY(-50%);
  transition: right .3s ease 0s;
}
#newsMain .swiper-slide a:hover .details:after, #newsMain .swiper-slide a.focus .details:after{ right:6px; }
#newsMain .pagingWrap{
  margin: 30px 0;
  height: 4px;
  position: relative;
}
#newsMain .pagingWrap .swiper-pagination-progressbar{
  
}
#newsMain .pagingWrap .swiper-paging{
  display: block;
  width: 100%;
  padding: 0;
}

#newsMain .btn-more{ text-align:right; }
#newsMain .btn-more a{
  display: inline-block;
  padding-right: 35px;
  position: relative;  
}
#newsMain .btn-more a span{
  color: var(--main-color);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 25px;
  height: 35px;
  border: 2px solid var(--main-color);
  border-radius: 10px;
  transition: background .3s ease 0s;
}
#newsMain .btn-more a span:after{
  content: '';
  position: absolute;
  top: 50%;
  right: 8px;
  height: 8px;
  width: 8px;
  display: block;
  border: 2px solid currentColor;
  border-bottom-width: 0;
  border-left-width: 0;
  transform: rotate(45deg) translateY(-50%);
  transform-origin: top center;
  transition: right .3s ease 0s;
}
#newsMain .btn-more a:hover span{
  color: #fff;
  background-color: var(--main-color);
}
@media screen and (max-width: 1699px) {
  #homeTabsWrap .swiper-wrap .swiper-prev{ left:20px; }
  #homeTabsWrap .swiper-wrap .swiper-next{ right:20px; }
}
@media screen and (min-width: 992px) {
  #homeTabMenu .tabCtrls .tabItem a{ min-width: 250px;}
}
@media screen and (max-width: 991.98px) {
  #bannerZone{ padding: 40px 20px;}
  #bannerSwiper{ padding: 0 100px 0 60px;}
  #homeTabsWrap .swiper-slide.swiper-slide-active a .caption{ 
    /* font-size: clamp(1.444em, 4vw, 1.889em); */
    font-size: clamp(1.444em, 3vw, 1.889em);
  }  
}
@media screen and (min-width: 768px) {
  #bnrPlaym{ display: none;}
  #missionMain.inview #mision-line-1{ 
    transform: translateX(-80px);
  }
  #missionMain.inview #mision-line-2{ 
    transform: translateX(0);
  }
}
@media screen and (max-width: 767.98px) {
  :root{
    --section-title-size: clamp(30px, 6vw, 44px);
    --layout-padding: 20px;
  }
  #homeTabMenu .tabCtrls .tabItem a span{
    width: 18px;
    height: 18px;
  }
  #newsMain .ctrlsWrap{ display: none;}
  #newsWrap .secTitle{ margin-bottom: 20px;} 
  #homeTabsWrap .swiper-wrap .swiper-prev{ left:10vw; }
  #homeTabsWrap .swiper-wrap .swiper-next{ right:10vw; }
  #bannerZone{ padding: 40px 10px 60px;}
  #bannerSwiper{ padding: 0 40px;}
  #bannerSwiper .btn-play{ 
    /*display: none;*/
    top: inherit;
    bottom: -40px;
    left: 50%;
    right: inherit;
    transform: translateX(-50%);
  }
  #bannerSwiper.swiper-wrap .swiper-play:hover, #bannerSwiper.swiper-wrap .swiper-play:focus-within{
    transform: translateX(-50%) scale(1.0);
  }
  #bnrPlaym{ display: none; margin-top: 5px;} 
  #homeTabsWrap{
    margin: 30px 0;
  }
  #homeTabMenu{ padding: 0 10px;}
  #homeTabMenu .tabItem.selected:before{ width: calc(100% + 20px);}
  #homeTabMenu .tabCtrls{ column-gap: 10px;}
  #homeTabMenu .tabCtrls .tabItem a{
    text-align: center;
    padding: 10px 15px 30px;
    font-size: 1.125em; /*champ(,,1.222em); */
  }
  #homeTabMenu .tabCtrls .tabItem a span{ right: inherit; left: 50%; top:inherit; bottom: 7px; transform: translateX(-50%);}
  #homeTabsWrap .swiper-main{ padding:0; }
  #homeTabsWrap .swiper-slide.swiper-slide-active a .caption{ 
    padding: 15px;
  }
  #missionMain.inview #mision-line-1{ 
    transform: translateX(-20px);
  }
  #missionMain.inview #mision-line-2{ 
    transform: translateX(20px);
  }
  #missionWrap .container > div > div.font-small{
    font-size: 1.875rem;
    font-size: clamp(1.125rem, 2.5vw + .8rem, 2.5rem);
   }
   #missionWrap .container > div > div.font-large{
    font-size: 3.157rem;
    font-size: clamp(2.2rem, 4.23vw + .8rem, 4.375rem);
   }
   #newsMain .swiper-slide a{ padding: 20px 15px 40px;}
}  

/*animation*/
.home #headerZone {
  transform: translateY(-150px);
  transition: transform .5s linear 0s;
}
#wrapper.loaded #headerZone{
  transform: translateY(0);
}
#mainVisualWrap{
  opacity: 0;
  min-height: 100svh;
  transition: all .5s ease .5s;
}
#mainVisualWrap.inview {
  opacity: 1;
  min-height: 530px;
  background-color: #bfdef0;
/*  background-color: var(--main-color);*/
}
#mainVisualWrap:before{ 
  opacity: 0;
  transition: opacity 1s ease 1s;
}
#mainVisualWrap.inview:before{ 
  opacity: 1;
}
#visualWaves{
  opacity: 0;
  transition: opacity .5s ease .5s;
}
#mainVisualWrap.inview #visualWaves{
  opacity: 1;
}
#homeTabMenu{
  opacity: 0;
  transform: translateY(100px);
  transition: max-height .3s ease-out 0s, opacity .5s ease 0s, transform .5s ease 0s;
}
#homeTabMenu.shown{
  opacity: 1;
  transform: translateY(0);
}
#homeTabsWrap .tab-panel:not(#tab-panel-1){ display: none;}
#homeTabsWrap{
  opacity: 0;
  transition: opacity .5s ease .5s;
}
#homeTabsWrap.inview{
  opacity: 1;
}
#missionMain > div{  
  opacity: 0;
  transition: opacity .5s ease 0s, transform 1s ease 0s;
}
#mision-line-1{
  transform: translateX(-180px);
}
#mision-line-2{
  transform: translateX(80px);
}
#missionMain.inview > div{
  opacity: 1;
}
#newsWrap .secTitle{
  opacity: 0;
  transform: translateY(100px);
  transition: opacity .4s ease 0s, transform .6s ease 0s;
}
#newsWrap.inview .secTitle{
  opacity: 1;
  transform: translateY(0);
}
#newsWrap .swiper-slide{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .3s ease 0s, transform .5s ease 0s;
}
#newsWrap.inview .swiper-slide.shown{
  opacity: 1;
  transform: translateY(0);
}
#newsWrap .pagingWrap{
  opacity: 0;
  transition: opacity .5s ease 1s;
}
#newsWrap .ctrlsWrap, #newsWrap .btn-more{
  opacity: 0;
  transition: opacity .5s ease 1.5s;
}
#newsWrap.inview .pagingWrap, #newsWrap.inview .ctrlsWrap, #newsWrap.inview .btn-more{
  opacity: 1;  
}
#bannerSwiper{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .4s ease 0s, transform .5s ease 0s;
}  
#footerZone.inview #bannerSwiper{
  opacity: 1;
  transform: translateY(0);
}
#footerZone #footerMain > div{
  opacity: 0;
  transition: opacity .5s ease 0s;
}
#footerZone.inview #footerMain > div{
  opacity: 1;
}