/** Generated by FG **/
@font-face {
  font-family: 'Helvetica';
  src: url('../fonts/Helvetica.eot');
  src: local('☺'), url('../fonts/Helvetica.woff') format('woff'), url('../fonts/Helvetica.ttf') format('truetype'), url('../fonts/Helvetica.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

/** Generated by FG **/
@font-face {
  font-family: 'Helvetica';
  src: url('../fonts/Helvetica-Oblique.eot');
  src: local('☺'), url('../fonts/Helvetica-Oblique.woff') format('woff'), url('../fonts/Helvetica-Oblique.ttf') format('truetype'), url('../fonts/Helvetica-Oblique.svg') format('svg');
  font-weight: normal;
  font-style: italic;
}


@font-face {
  font-family: 'Helvetica';
  src: url('../fonts/Helvetica-Bold.eot');
  src: local('☺'), url('../fonts/Helvetica-Bold.woff') format('woff'), url('../fonts/Helvetica-Bold.ttf') format('truetype'), url('../fonts/Helvetica-Bold.svg') format('svg');
  font-weight: bold;
  font-style: normal;
}
/** Generated by FG **/
@font-face {
  font-family: 'Helvetica';
  src: url('../fonts/Helvetica-BoldOblique.eot');
  src: local('☺'), url('../fonts/Helvetica-BoldOblique.woff') format('woff'), url('../fonts/Helvetica-BoldOblique.ttf') format('truetype'), url('../fonts/Helvetica-BoldOblique.svg') format('svg');
  font-weight: bold;
  font-style: italic;
}

/** Generated by FG **/
@font-face {
  font-family: 'Helvetica';
  src: url('../fonts/helvetica-light-587ebe5a59211.eot');
  src: local('☺'), url('../fonts/helvetica-light-587ebe5a59211.woff') format('woff'), url('../fonts/helvetica-light-587ebe5a59211.ttf') format('truetype'), url('../fonts/helvetica-light-587ebe5a59211.svg') format('svg');
  font-weight: 300;
  font-style: normal;
}

/** Generated by FG **/
/*@font-face {
  font-family: 'Helvetica-rounded';
  src: url('../fonts/bk/helvetica-rounded-bold-5871d05ead8de.eot');
  src: local('☺'), url('../fonts/bk/helvetica-rounded-bold-5871d05ead8de.woff') format('woff'), url('../fonts/bk/helvetica-rounded-bold-5871d05ead8de.ttf') format('truetype'), url('../fonts/bk/helvetica-rounded-bold-5871d05ead8de.svg') format('svg');
  font-weight: bold;
  font-style: normal;
}*/

@font-face {
    font-family: 'Helvetica-rounded';
    src: url('../fonts/helvetica-rounded-bold-5871d05ead8de-webfont.woff2') format('woff2'),
         url('../fonts/helvetica-rounded-bold-5871d05ead8de-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/** Generated by FG **/
@font-face {
  font-family: 'helvetica-compressed';
  src: url('../fonts/helvetica-compressed-5871d14b6903a.eot');
  src: local('☺'), url('../fonts/helvetica-compressed-5871d14b6903a.woff') format('woff'), url('../fonts/helvetica-compressed-5871d14b6903a.ttf') format('truetype'), url('../fonts/helvetica-compressed-5871d14b6903a.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}





/*==================================================
    General
==================================================*/

html,body{
  padding: 0;
  margin: 0; 
  height: 100%
}  
body{  
  font-family:'Kanit', sans-serif;
  font-size:var(--f-15);
  font-weight: normal; 
  color:#000000;  /*5B5B5B*/
  line-height: 1.6;
  background-color:#ffffff;
  
  margin:0;
  padding:0;  

  position: relative;
  overflow-x: hidden;
}
 

.pc body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; 
  image-rendering: -webkit-optimize-contrast;
}

b, strong{
  font-weight: bold; 
  font-family: inherit;
}
h1,h2,h3,h4,h5,h6{   
  margin:0;  
  color:inherit; 
  line-height: 1.4; 
  font-weight: normal;
  font-style: normal;  
  font-family: inherit;
  color:inherit;
}  

.nowrap{ white-space: nowrap; }
 
a{
  color:inherit;
    -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}
a:hover{ text-decoration: none; color:inherit; }
 
.star{ color:red }

.form-control{
 -webkit-appearance: none;
   
  padding:0 10px;

  color:inherit;
  font-weight: 300;
  font-size:13px;

  height:35px;
  line-height:33px; 
  border-radius:10px; 
  border:1px solid rgba(164,164,164,0.5);  
  background-color:rgba(216,216,216,0.5); 
  font-family: inherit;
    -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}
.form-control.normal{border-radius: 0}
 
textarea.form-control{
  height: 135px;
  line-height: normal;
  padding-top: 10px;
  border-radius: 15px
}
.form-control:-webkit-autofill{
  border:1px solid rgba(164,164,164,0.5);  
  background-color:rgba(216,216,216,0.5); 
}
.form-group{
  display: block;
  position: relative;
  margin-bottom: 15px;
  
} 
 
.form-group label.title{
  text-align: left;
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 300;
}

.form-group label.d-flex{
  line-height: 1;
  width: 100%;
  height: 100%;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
justify-content: center;
  margin-bottom: 0;
}

.lb-0{border-bottom: 0 !important}
.form-control.lb,
.form-control.lt{
  height: 50px;
  line-height: 48px;
  padding-left: 0;
  border:0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none !important;
}
.form-control.lb{border-bottom: 1px solid #E0E0E0}
.form-control.lt{border-top: 1px solid #E0E0E0}

.form-control.h-60{
  height: 60px;
  line-height: 58px
}

.radio-group, 
.checkbox-group{ 
  padding-left:0; 
  position:relative;
  list-style-type:none;
  margin:0px;
  padding:0px;
  text-align:center;
  display:inline-block;
  vertical-align:top
}
.radio-group{ display:inline-block; position:relative}
.radio-group.block{display: block; margin-left:0 !important }


.radio-group input[type="radio"],
.checkbox-group input[type="checkbox"] {
  /*display: none;*/
  visibility: hidden;
  opacity: 0;
  height: 0;
  position: absolute;
  width: 0;
 
}
.checkbox-group label:before,
.radio-group label:before {
  content: "";
  display: inline-block;

  margin-right: 5px;
  position: absolute;
  left:0;
  top:2px;
  background-color:#fff;
  border:1px solid #707070; 

  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

.radio-group label:before{ 
  top:2px; 
  width:13px;
  height:13px; 
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
}

.checkbox-group label:before{
  top: 2px;
  width:15px;
  height:15px;
}
 

.radio-group label,
.checkbox-group label {
  position:relative;
  padding-left:25px;
  padding-right:15px;
  text-align:left;
  margin:1px 0;
  display:block; 
  font-size:inherit;
  line-height:1.3;
  cursor:pointer;
 
}

.checkbox-group label{color: inherit;} 
.radio-group label{color: inherit;} 


.radio-group:not(.checkbox) input[type="radio"]:checked + label:after, 
.radio-group:not(.checkbox) input[type="radio"]:checked + span + label:after,
.checkbox-group.radio input[type="checkbox"]:checked + label:after{
  content: "";
  color: #ea6f21;
  background-color:var(--gold); 
  position:absolute;
  left: 3px;
  top: 5px;
  width: 7px;
  height: 7px;

  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
}

 

.checkbox-group input[type="checkbox"]:checked + label:after,
.checkbox-group input[type="checkbox"]:checked + span + label:after,

.radio-group.checkbox input[type="radio"]:checked + label:after,
.radio-group.checkbox input[type="radio"]:checked + span + label:after {
  content: "";
  color: #ea6f21; 
  background-image: url(../img/icons/icon-check.png);
  background-color: #ccc; 
  background-repeat: no-repeat;
  background-position:54% 5px;
  background-size:55%;
 
  position:absolute;

  top: 2px;
  left: 0px;
  width:15px;
  height: 15px; 
  border-radius: 3px;
}
 
.radio-group.no-text,
.checkbox-group.no-text{
  width: 29px;
  height: 29px;
  margin-top:-2px; 
} 

.checkbox-group label a{text-decoration: underline;}
.pc .checkbox-group label a:hover{color: var(--red)}

.checkbox-group .error{/*display: none !important;*/ opacity: 0; pointer-events: none; position: absolute;}
.checkbox-group .error + label{color: var(--red)}

.checkbox-group input[type="checkbox"]:checked + span + label{ color: var(--black) !important }
 
.form-control::-webkit-input-placeholder {
  color: inherit;
  font-weight: inherit;
  opacity:0.5;
}

.form-control::-moz-placeholder {
  color: inherit;
  font-weight: inherit;
  opacity:0.7;
}

.form-control:-ms-input-placeholder {
  color: inherit;
  font-weight: inherit;
  opacity:0.7;
}

.form-control::-ms-input-placeholder {
  color: inherit;
  font-weight: inherit;
  opacity:0.7;
}

.form-control::placeholder {
  color: inherit;
  font-weight: inherit;
  opacity:0.7;
}

.form-control:disabled, 
.form-control[readonly] {
  background-color: #e2e2e2;
  border-color: #c7c7c7;
}
 
.custom-select{ 
  border:0; 
  padding: 0 30px 0 10px;
  height: 35px;
  line-height: 33px;
  font-weight:500;
  font-size: 14px;
  border-radius: 12px;
  outline:0 !important;
  box-shadow: none !important;
  border:1px solid #EDEDED;
  color: inherit;

  background:url(../img/icons/icon-arrow-down-b.svg) no-repeat right .75rem center/10px 16px;   
  background-color: #EDEDED;
} 
 
.custom-select.blue{

  background:url(../img/icons/icon-arrow-down-w.svg) no-repeat right .75rem center/10px 16px; 
  background-color: var(--blue);
  border:1px solid var(--blue);
  color: #fff !important;
} 
.custom-select.trans{

  background:url(../img/icons/icon-arrow-down-b.svg) no-repeat right .75rem center/10px 16px; 
  background-color: transparent;
  border:1px solid transparent;
  color:inherit;
} 
.btn{
  position: relative;
  border:0;
  padding: 0 20px; 
  height:40px;
  line-height: 38px;
  font-family:inherit;   
  font-size:14px;
  font-weight:300; 
  color:#fff; 
  background-color:var(--blue); 
  border:1px solid var(--blue); 
  border-radius:10px; 

  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
} 
.btn > span{
  position: relative;
  z-index: 10
}
.pc .btn:hover{
  color: #fff;
  background-color:#123360; 
  border-color:#123360; 
}
 
.btn-trans{
  border-color: transparent;
  background-color: transparent;
  color: #000;  
  font-weight: 400
}
.btn-red{
  border-color: #EB2308;
  background-color:#EB2308;
  color: #fff;  
  font-weight: 400
}
.btn-black{
  border-color:#232323;
  background-color:#232323;
  color: #fff;  
  font-weight: 400
}
.btn-dark{
  border-color:#0C264B;
  background-color:#0C264B;
  color: #fff;  
  font-weight: 400
}
.btn-outline{
  border-color:#CDCDCD;
  background-color: transparent;
  color: #000;  
  font-weight: 400
}
.btn.w-120{width: 120px}
.btn.w-160{width: 160px}
.btn.has-icon{
  display: flex;
  -ms-flex-align: center;
align-items: center;
}
.btn.has-icon .icons{
  width: 20px;
  height: 20px;
  margin-left: 15px
}

.btn.more{
  padding: 0;
  width: 120px;
}
.btn.more:before{
  content: '';
  position: absolute;
  top: 0;
  right: 10px;
  width:30px;
  bottom: 0;
  transition: all 0.2s linear 0s;
  opacity: 0;

  background-image: url(../img/icons/icon-arrow-tail-right.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 15px
}
.btn.more:hover{padding-right: 18px}
.btn.more:hover:before{
  right: 0;
  opacity: 1;
}

.btn-md{
  height: 54px;
  line-height: 52px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 500;
}

.btn-md .icon-bookmark{
  background-image: url(../img/icons/icon-bookmark.svg);
  width: 22px;
  height: 22px;
  margin: -2px 5px 0 0;
}

.btn[disabled]{
  border-color: #D4EAEA;
  background-color:#D4EAEA;
  color:#A1C9C9;
  line-height: 56px;
  pointer-events: none;
  opacity: 1;
} 
.btn svg,
.btn img{
  position: relative;
  left: 0;
  -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}
 
.btn-link, 
.btn-link:hover, 
.btn-link:focus, 
.btn-link:active{
  background-color: transparent;
}
 
.btn:focus,.btn:active,
button:focus,button:active,
a:focus,a:active {
   outline: none !important;
   box-shadow: none!important;
} 
.buttons{
  display: block; 
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
} 
 
.buttons.center .btn{
  margin: 0 auto;
}
.buttons.footer{
  display: flex;
  -ms-flex-pack: center;
justify-content: center;
}
.buttons.footer .btn{
  margin: 0 8px
}
svg path,
svg rect,
svg line,
svg circle,
svg polygon{ 
  -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}

@media (max-width: 1440px) { }

@media (max-width: 1199px) {}

@media (max-width:767px) {}


/*==================================================
    Icon Setup
==================================================*/  

.icons{
  display:inline-block;
  position:relative;
  vertical-align:middle; 
  background-size: contain;
  background-repeat:no-repeat;
  background-position: center center;
  transition: all 0.3s ease-in-out;
  opacity: 1;
}
.icons.before:before,
.icons.before:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: contain;
  background-repeat:no-repeat;
  background-position: center center;
  transition: all 0.3s ease-in-out;
  opacity: 0;
}
.icons.before:before{opacity: 1}
.pc .btn:hover .icons.before:before{ opacity: 0; }
.pc .btn:hover .icons.before:after{ opacity: 1; }
.inline-black{
  display: inline-block;
  padding: 0 10px
}

/**/

.arrow-left,
.arrow-right,
.arrow-up,
.arrow-down{
  position: absolute;
  left: 0;
  top: 0;
  width:5px;
  height:5px;
  vertical-align:top;

  border-top: 1px solid #676767;
  border-left: 1px solid #676767;

   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

.arrow-left{
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);  
}

.arrow-right{
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);  
}

.arrow-up{
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);  
}
.arrow-down{
   margin-left:1px; 
   -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);  
}
 
 
.container-fluid{
  max-width:calc(1440px + 200px); 
  padding-left:100px;
  padding-right:100px; 
  position: relative;
  z-index: 9; 
}

.container{
  max-width:calc(1300px + 200px); 
  padding-left:100px;
  padding-right:100px; 
  position:relative;
  z-index:9; 
}
.page-full .container{
  max-width: 100%
}
.section-target{
  position: absolute;
  top:-80px;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.section-target#room{top:-130px;}
.section-target#video{top:-170px;}
.section-target#equipment{top:-155px;}
.section-target#gallery{top:-145px;}
 
.section.pt-80{padding-top: 80px}
@media (max-width: 1680px) {
  .container{
    max-width:calc(1260px + 160px); 
  }
}

@media (max-width:1440px) {
  .container,
  .container-fluid{ 
    padding-left: 80px;
    padding-right: 80px;
  }

  .section-target#room{top:-130px;}
  .section-target#video{top:-150px;}
  .section-target#equipment{top:-145px;}
  .section-target#gallery{top:-135px;}
}
 

@media (max-width:1199px) {
  .container,
  .container-fluid{ 
    padding-left: 50px;
    padding-right: 50px;
  } 
}

 

@media (max-width: 767px) {
  .container,
  .container-fluid{ 
    padding-left: 25px;
    padding-right: 25px;
  }
  
  .section-ttile{
    padding:15px 0;
  }
  .section-target#equipment{top:-135px;}
  .section-target#room{top:-110px;}
}
   
.compensate-for-scrollbar{ margin-right: 0 !important } 
.compensate-for-scrollbar .header{ right: 0 } 
body.fancybox-active{ overflow: visible !important;padding-right: 0 !important  }
 
/*==================================================
    Header Setup
==================================================*/  

:root {  
  --blue:#004098;

  --f-13:13px;
  --f-14:14px;
  --f-15:15px;
  --f-16:16px;
  --f-20:20px;
  --f-23:23px;
  --f-25:25px;
  --f-28:28px;  
  --f-43:43px; 
  --f-59:59px;  
}

.f-12{font-size: 12px}
.f-14{font-size: 14px}
.f-16{font-size: 16px}
.red{color: #F24848}
.blue{color: var(--blue) !important;}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { }
@media (max-width:1680px) {
  :root{}
}
@media (max-width:1440px) {
  :root{}
}
 
@media (max-width:1199px) {
  :root{}
}

@media (max-width:767px) {
  :root{

  }

  .f-16{font-size: 14px}
}
@media (max-width:375px) {
  :root{}
}
.header,  
.navbar-brand,
.navbar-brand img{ 
   -webkit-transition: all 0.25s ease-in-out;
     -moz-transition: all 0.25s ease-in-out;
     -o-transition: all 0.25s ease-in-out;
     -ms-transition: all 0.25s ease-in-out;
     transition: all 0.25s ease-in-out;
}

.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding:0;
  z-index: 1040;  
  padding:0 0;  
  background-color:var(--blue);
  height: 80px;
} 
.navbar-brand{
  margin: 0;
  padding: 0;   
  width:78px;
  height: 38px;
}
.navbar-brand img{width: 100%; height: auto;} 

.header .container,
.header .container-fluid{
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  align-items: center;
}

.header .container{
  max-width: 100%;
}
 

.header{
   -webkit-animation-delay: 0ms;
    animation-delay: 0ms;
      -webkit-animation-duration: 300ms;
    animation-duration: 300ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

.page-loaded .header{
    opacity: 1;
   visibility: visible;
   -webkit-animation-delay: 100ms;
    animation-delay: 100ms;
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
 

@media (min-width:0) {
   .header .container{
    padding-left:30px; 
    padding-right: 30px;
    height: 100%
  }
  .navbar-device{display: none;}

  .search-general{
    display: flex;
    height: 80px;
    padding: 0;
    position: relative;
  }
  .search-general .form-control{
    border-color: #EDEDED;
    background-color: #EDEDED;
    border-radius: 50px;
    font-size: 14px;
    height: 30px;
    line-height: 28px;
    width: 100%;
    width: 205px;
    padding-left:30px;
  }
  .search-general .form-group{
    margin: auto;
    position: relative;
  }
  .search-general .form-group:before{
    content: '';
    position: absolute;
    top: 6px;
    left: 10px;
    width: 17px;
    height: 17px;

    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url(../img/icons/icon-search.svg);
  }
  .search-general .btn-search{
    position: absolute;
    top: 0;
    right: 0;
    display: none;
  }
  .user-setting{
    display: block;
    padding-right: 70px;
    white-space: nowrap;
  }
  .user-setting > a{
    color: #fff;
    font-family: 'Helvetica-rounded';
    display: flex;
    position: relative;
    text-transform: uppercase;
    font-size: 13px;
    padding: 10px 0;
    
    -ms-flex-align: center;
    align-items: center;

  }

  .user-setting > a .dot{
    width: 3px;
    height: 3px;
    position: relative;
    margin-left: 10px;
    margin-right: 20px;
  }
  .user-setting > a .dot:before{
    content: '';
    width: 3px;
    height: 3px;
    margin: -1px 0 0 0;

    position: absolute;
    top: 50%;
    right: 0;


    display: inline-block;
    background-image: url(../img/icons/icon-dot.svg);
    background-repeat: no-repeat;
    background-position: center center; 
  }

  .user-setting .avatar{
    width: 33px;
    height: 33px;
    border-radius:50%;

    background-color: #D1D1D1;
    border:1px solid #D1D1D1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .user-setting.before-signin .avatar{
    background-color: transparent;
    border:0;
  }

  .user-setting .dropdown-menu{
    padding: 0;
    margin: 0;
    border:0;
    border-radius:15px; 
    box-shadow: 0 0 15px rgba(0,0,0,0.24);
    width: 215px;
    right: 0;
    left: auto;

    display: block;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    top: 120%;
  }

  .user-setting  .dropdown-menu.show{
    opacity: 1;
    pointer-events: auto;
    top: 100%;
  }

  .user-setting .nav{
    flex-direction: column;
    font-family: 'Helvetica-rounded';
 
    padding: 10px;
  }
  .user-setting .nav li.info{
    padding:10px;
    margin-bottom: 10px;
    border-radius: 15px;
    background-color: #F5F5F5;
    font-size: 12px;
    color: #333333;
  }
  .user-setting .nav li.info a{
    height: 33px;
    color: inherit;
    display: flex;
     -ms-flex-align: center;
    align-items: center;
  }
  .user-setting .nav li.info .avatar{margin-right: 10px; width: 37px; height: 37px}
  .user-setting .nav li.info span.name{
    width: calc(100% - 49px);
  }

  .user-setting .nav li:not(.info) a{
    display: block;
    position: relative;
    padding:5px 10px;
    font-size: 13px;
    color: inherit;
    border-radius: 15px;
  }
  .pc .user-setting .nav li:not(.info) a:hover{
    background-color: #F5F5F5
  }
  .user-setting .nav li:not(.info) a:before{
    content: '';
    position: absolute;
    top: 50%;
    right: 8px;
    width: 8px;
    height: 15px;
    margin-top: -8px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../img/icons/icon-arrow-right.svg);
  }
  .user-setting .nav li.logout {
    margin-top: 15px;
  }
  .user-setting .nav li.logout a{
    color: #ED1C24;
    border-top:1px solid #BBBBBB;
    margin: 0 -10px 0;
    padding: 10px 20px 0;
    border-radius: 0;
    background-color: transparent !important;
  }
  .user-setting .nav li.logout a:before{
    display: none;
  }
}

@media (min-width:1200px) {
  .btn-icon{display: none;}
  .page-full .header .container{padding-left:50px; padding-right: 50px}
  
  .nav-main{
    margin: 0;
    padding: 0 15px;
    height: 80px;
    background-color: #123360;
    position: relative;
    font-family: 'Helvetica-rounded';
  }
  .nav-main > li{
    display: block;
    height: 100%;
    position:static;
  }
  .nav-main > li > a{
    display: flex;
    position: relative;
    color: #fff;
    font-size: 12px; 
    line-height: 1.4;
    font-family:inherit;
    font-weight: normal;
    padding: 0 20px;
    height: 100%;
    text-transform: uppercase;
  }
  .nav-main > li > a:before{
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 5px;
    right: 5px;
    background-color:rgba(132,184,255,0);
    transition: all 0.2s ease-in-out;
  }
  .nav-main > li.active > a:before,
  .pc .nav-main > li:hover > a:before{
    background-color:rgba(132,184,255,0.2);
  }
  .nav-main > li > a span{
    margin: auto;
    text-align: center;
    height: 32px;
    position: relative;
    z-index: 10;
  }
  .nav-main .dropdown-menu{
    width: 775px;
    background-color: #004098; 
    border:0;
    border-radius: 0;
    margin: 0;
    padding:30px;

    display: block;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    top: 120%;
  }
  .nav-main .dropdown:hover .dropdown-menu,
  .nav-main .dropdown-menu.show{
    opacity: 1;
    pointer-events: auto;
    top: 100%;
  }

  .nav-main.focus .dropdown-menu{top: 100%}
  .nav-main .dropdown-menu ul.nav{
    margin: 0 -10px
  }
  .nav-main .dropdown-menu ul.nav li a{
    font-family: 'Helvetica';
    font-size: 13px;
    color: #B4D3FF;
    font-weight: 500;
    padding: 10px;
    display: block;
    min-width: 170px
  }
  .nav-main .dropdown-menu ul.nav li a span{
     display: inline-block;
     border-bottom: 1px solid transparent;
     transition: all 0.2s ease-in-out;
  }
  .nav-main .dropdown-menu ul.nav li.active a span,
  .nav-main .dropdown-menu ul.nav li:hover a span{
    border-bottom: 1px solid rgba(254,254,254,0.38);
  }
  .nav-main h4{
    font-size: 19px;
    font-family: 'Helvetica-rounded';
    font-weight: normal;
    border-bottom: 1px solid rgba(203,225,255,0.38);
    padding: 0 0 12px;
    margin-bottom: 15px;
    color: #fff;
  }

  .nav-main h4:after{
    content: '';
    position: relative;
    width: 13px;
    height: 13px;
    display: inline-block;
    margin: 0 0 0 15px;
    background-size: contain;
    background-position: center center;
    background-repeat:no-repeat;
    background-image: url(../img/icons/icon-arrow-down-w.svg);
  }
  
  .user-setting{padding-right: 0}
  .user-setting > a span:first-child{display: none;}
  .user-setting > a .dot{display: none;}
  
  .nav-main .nav-search{display: none;}

  .nav-main .dropdown-menu{width: 748px}
  .nav-main .dropdown-menu ul.nav li a{min-width: 155px}
}

@media (min-width:1280px) {
  .nav-main > li > a{
    padding: 0 20px;
  } 

  .search-general .form-control{width: calc(100vw - 1060px)}

}

@media (min-width:1330px) {
  .page-full .header .container{padding-left: 80px; padding-right: 80px}
  .user-setting > a span:first-child,
  .user-setting > a .dot{display: inline-block;}

  .search-general .form-control{width: calc(100vw - 1200px)}
  .nav-main{margin-left: 15px}
  .nav-main > li > a{
    padding: 0 20px;
  } 
 
}

@media (min-width:1441px) {
  .page-full .header .container{padding-left: 100px; padding-right: 100px}
  .nav-main > li > a{
    padding: 0 23px;
  } 
  .nav-main .dropdown-menu{width: 778px}
  .nav-main .dropdown-menu ul.nav li a{min-width: 170px}
  .search-general .form-control{/*width:185px*/ width: calc(100vw - 1350px)}
}

 
@media (max-width:1199px) {
  .header .nav-main{display: none;}
  .search-general{margin-left: auto; margin-right: 25px;}
  .navbar-device{display: flex;}
  .btn.btn-icon{
    padding: 0 !important;
    border:0 !important;
    background-color: #123360 !important;
    display: flex;
    vertical-align: middle;
    z-index: 999; 
    float: right;
    border-radius: 0;
    overflow: visible;
    margin: auto; 
    margin-right: 0;

    position: absolute;
    top: 0;
    right: 0;
    height: 80px;
    width: 80px;
 
  } 
  .btn-icon:before{display: none;}
  .btn.btn-icon span:before{display: none;}

  .btn-icon .group{
    display: block;
    position: relative;
    width: 30px; 
    height:22px;
    margin:auto;
    min-width: 0
  }
  .btn-icon .group span{ 
    height: 3px;
    background:#fff;
    position: absolute;
    left: 0;
    right: 0;
    padding: 0;
    min-width: 0;
    width: auto;
    -webkit-transform-origin: 25px, 1px;
    -ms-transform-origin: 25px, 1px;
    transform-origin: 25px, 1px
  }

  .btn-icon .group span:nth-child(1) {
      top: 0;
      -webkit-transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98)
  }

  .btn-icon .group span:nth-child(2) {
      top: 9px; 
      -webkit-transition: -webkit-transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: -webkit-transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98)
  }

  .btn-icon .group span:nth-child(3) {
      top: 18px;
      -webkit-transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98)
  }

   
  .nav-opened .btn-icon .group span:nth-child(1){
      -webkit-transition: -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      -webkit-transform: rotate(45deg) translate3d(6px, 7px, 0);
      transform: rotate(45deg) translate3d(6px, 7px, 0)
  }
   
  .nav-opened .btn-icon .group span:nth-child(2){
      -webkit-transition: -webkit-transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: -webkit-transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      -webkit-transform: scaleX(0) translateZ(0);
      transform: scaleX(0) translateZ(0)
  }
   
  .nav-opened .btn-icon .group span:nth-child(3) {
      -webkit-transition: -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      -webkit-transform: rotate(-45deg) translate3d(5px, -7px, 0);
      transform: rotate(-45deg) translate3d(5px, -7px, 0)
  }
  
  .navbar-main .d-flex{
    -ms-flex-align: center;
    align-items: center;
  }

  .nav-lang {
    height: 23px; 
    margin-bottom: 1px;
    margin-right: 20px;
  }
  .nav-lang img.flag{width: 34px}
  .nav-lang.dropdown > a::before {
    border-top-color:#555
  }

  .nav-general{margin-right: -15px}

  /**/
  .header-slideout,
  .page-slideout {
      transition: -webkit-transform 0.6s ease;
      transition: transform 0.6s ease;
      transition: transform 0.6s ease, -webkit-transform 0.6s ease;
  }
  .page-slideout {
      position: relative;
      background-color: #fff;
      overflow: hidden;
  }
  .closing .page-slideout,
  .nav-opened .page-slideout {
      z-index: 1040;
  }
  .closing .header-slideout,
  .nav-opened .header-slideout {
      z-index: 1043;
  }
  .page-blocker {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      width: 100%;
      background-color: rgba(0, 0, 0, 0);
      z-index: 1050;
      pointer-events: none;
      transition: -webkit-transform 0.6s ease;
      transition: transform 0.6s ease;
      transition: transform 0.6s ease, -webkit-transform 0.6s ease;
  }
  .nav-opened .header-slideout,
  .nav-opened .page-blocker,
  .nav-opened .page-slideout {
      -webkit-transform: translate(-280px, 0);
      -ms-transform: translate(-280px, 0);
      transform: translate(-280px, 0);
      -webkit-transform: translate3d(-280px, 0, 0);
      transform: translate3d(-280px, 0, 0);
  }
  .nav-opened .page-blocker {
      background-color: rgba(0, 0, 0, 0.6);
  }
  .nav-opened .page-blocker {
      pointer-events: auto;
      display: block;
      cursor: pointer;
  }
  .navbar-device {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 1090;
      width: 280px;
      overflow: hidden;
      padding: 0;
      /*background-color: rgba(26, 28, 32, 0.95);*/
      background-color: #004098 ;
      align-items: normal;
      -ms-flex-align: normal;
      -webkit-transform: translate(280px, 0);
      -ms-transform: translate(280px, 0);
      transform: translate(280px, 0);
      -webkit-transform: translate3d(-280px, 0, 0);
      transform: translate3d(280px, 0, 0);
      transition: -webkit-transform 0.6s ease;
      transition: transform 0.6s ease;
      transition: transform 0.6s ease, -webkit-transform 0.6s ease;
  }
  .nav-opened .navbar-device {
      -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      transform: translate(0, 0);
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
  }
  .nav-opened .header {
      pointer-events: none;
  }
  .navbar-device .container-fluid {
      padding: 0;
  }
  .nav-main {
      position: absolute;
      top: 0;
      bottom: 0;
      display: block;
      height: 100%;
      right: -280px;
      width: 560px;
      overflow: hidden;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      height: 97vh;
      -webkit-transition: all 0.4s;
      -o-transition: all 0.4s;
      transition: all 0.4s;
  }
  .nav-main li {
      display: block;
      position: static;
  }
  .nav-main li {
      padding-left: 20px;
  }
  .nav-main li a:not(.links) {
      padding: 15px 0 15px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      font-weight: 400;
      font-size: 16px;
      display: block;
      position: relative;
      color: #fff;
  }
  .nav-main li a:not(.links) br{display: none;}
  .nav-main li a.links {
      display: none;
  }
  .nav-main > li > a {
      width: 260px;
  }
  .nav-main > li.dropdown > a:after {
      content: "";
      position: absolute;
      top: 25px;
      left: 226px;
      content: "";
      width: 8px;
      height: 8px;
      opacity: 0.75;
      vertical-align: top; 
      border-top: 1px solid #fff;
      border-left: 1px solid #fff;
      -webkit-transform: rotate(135deg);
      transform: rotate(135deg);
  }
  .nav-main .dropdown-menu {
      position: absolute;
      top: 0 !important;
      right: 0;
      bottom: 0;
      left: auto !important;
      width: 280px;
      margin: 0;
      padding: 0;
      transition: none;
      border: 0;
      background-color: var(--color-secondary);
  } 
  .nav-main h4.nav-title {
      padding-left: 0;
      position: relative;
      cursor: pointer;
      display: block;

      opacity: 0.8;
      font-weight: 300;
      font-size: 16px;
      padding: 20px 0 20px 50px;
      color: #fff;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  } 
 
  .nav-main h4.nav-title .arrow{
      display: inline-block;
      position: absolute;
      vertical-align: top;
      left: 20px;
      top: 50%;
      margin-top: -6px;
  }
  .nav-main h4.nav-title .arrow:before{
      content: "";
      width: 12px;
      height: 12px;
      vertical-align: top;
      position: absolute;
      top: 0;
      left: 0;
      border-top: 1px solid rgba(255, 255, 255, 0.8);
      border-left: 1px solid rgba(255, 255, 255, 0.8);
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
  } 
  .nav-main .dropdown.showing .dropdown-menu {
      display: block;
      opacity: 1;
  }
  .nav-main .dropdown .nav{
    flex-direction: column;
  }
  .level-1-opened .nav-main {
      right: 0;
  }

   .nav-main h4{}
 
  .nav-main li.nav-search{
    width: 280px;
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom:1px solid rgba(255, 255, 255, 0.1)
  }
  .nav-main .form-group.search{
    margin: 0;
    width: 240px;
  }
  .header .search-general{
    display: none;
  } 
  .search-general {
    height: 49px;
    display: flex;
  }
  .search-general .form-group{
    margin:auto 0; 
  }
  .search-general .form-control{
    width: 240px
  }
}

@media (max-width:767px){
  .user-setting > a span:first-child,
  .user-setting > a .dot{display: none;}
  
}

/*==================================================
    Section - setup
==================================================*/ 
 
.navbar .container, 
.navbar .container-fluid, 
.navbar .container-lg, 
.navbar .container-md, 
.navbar .container-sm, 
.navbar .container-xl{
  display: block;
}
 
.section{
  display: block;
  position: relative;   
  padding:70px 0; 
  
}  
.section.full{ 
  min-height: 100vh;
  display: flex;
}
.section.full .container{
  margin: auto;
}

.section-title{
  display: block;
  padding: 50px 0; 
}
.section-title.center{
  text-align: center;
}
.section-title.mw-450{
  display: block;
  max-width: 460px;
  margin: 0 auto;
  font-size: 17px
}
.title-lg{font-size: 33px; font-weight: 600;}
.title-md{font-size: 28px; font-weight: 600;}
.title-sm{font-size: 25px; font-weight: 600;}
.title-xs{font-size: 23px; font-weight: 600;}

.black{color: #2C2C2C}
.blue{color:var(--blue) !important}
.gray{color:#B6B6B6 !important}
  
.hgroup{
  display: block;  
  padding: 0
}
.hgroup.center{
  text-align: center;
} 
.background{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  pointer-events: none; 
}
.background.contain{background-size: contain;}   
.background.fixed{background-attachment: fixed;}  
.background[data-fancybox]{
  pointer-events: all;
}

.device .background.parallaxie{
  background-attachment: scroll !important;
  background-position: center center !important;
}

.breadcrumb{
  background-color: transparent;
  padding:30px 0;
  margin: 0 -10px;
  position: relative;
  font-size: 11px;
  color: #393939;
  display: flex;
}
.breadcrumb:before{
  content: '';
  position: absolute;
  top: 0;
  left:-100vw;
  right:-100vw;
  border-top:1px solid rgba(164,164,164,0.5);
}
.breadcrumb .breadcrumb-item{
  position: relative;
  color: #393939 !important;
}
.breadcrumb .breadcrumb-item:before{display: none;}
.breadcrumb .breadcrumb-item span,
.breadcrumb .breadcrumb-item a{
  display: block;
  position: relative;
  color: inherit;
  padding: 5px 10px
}
.breadcrumb .breadcrumb-item:first-child:after{
  content: '';
  position: absolute;
  top: 50%;
  right: -9px;

  width: 0; 
  height: 0; 
  margin-top: -5px;
  border-top:5px solid transparent;
  border-bottom: 5px solid transparent;
  
  border-left: 7px solid #393939;
}
.pc .breadcrumb .breadcrumb-item a:hover{ text-decoration: underline; }
@media (max-width:1440px) {}
@media (max-width:1366px) {
   .section-title{ padding:35px 0; }

  .title-lg{font-size: 28px; }
  .title-md{font-size: 25px;}
  .title-sm{font-size: 23px;}
  .title-xs{font-size: 20px;}
}


@media (max-width:1199px) {
  .background.parallaxie{
    background-attachment: scroll !important;
    background-position: center center !important;
  }  

  .section{padding:50px 0 }

  .section-title.mw-450{font-size: 15px}
} 

@media (max-width:991.98px) {}

@media (max-width:767px) {
  body{font-size: 14px}
  .title-lg{font-size: 22px; }
  .title-md{font-size: 20px; }
  .title-sm{font-size: 18px; }
  .title-xs{font-size: 18px;}
  .section{padding:30px 0 }

  .breadcrumb{ padding:20px 0;}
}
@media (max-width:375px) {}

.row.space-0{ margin:0}
.row.space-0 > div{ padding:0}
 
.row.space-5{ margin:0 -5px !important}
.row.space-5 > div{ padding:0 5px !important} 

.row.space-10{ margin:0 -10px}
.row.space-10 > div{ padding:0 10px}
 
.row.space-20{ margin:0 -20px}
.row.space-20 > div{ padding:0 20px} 

.row.space-25{ margin:0 -25px}
.row.space-25 > div{ padding:0 25px} 

.row.space-30{ margin:0 -30px}
.row.space-30 > div{ padding:0 30px} 

.row.space-40{ margin:0 -40px}
.row.space-40 > div{ padding:0 40px} 
  
.light{ font-weight: 300 !important }
.regular{ font-weight: 400 !important }
.medium{ font-weight: 500 !important }
.semibold{ font-weight: 600 !important }
.bold{font-weight: 600 !important }
.italic{font-style: italic;}

.card{
  border:0;
  border-radius: 0;
  background-color: transparent;
}
.card-photo{
  position: relative;
  overflow: hidden;
  z-index: 10;
}

.card-photo .photo{
  height: 100%;
  transition: all 0.2s ease-in-out;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.card-photo .photo img{margin-bottom: 0 !important}
.card-photo .photo-gif{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.2s ease-in-out;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index:100;
  opacity: 0;
  pointer-events: none;
}
.card-photo img{
  width: 100%
}

.card-photo:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  background-color: rgba(0,0,0,0.3);
  transition: all 0.2s ease-in-out;
  z-index: 40;

}

.pc a.card:hover .card-photo:before{opacity: 1}
.pc .card:hover .card-photo .photo-gif{opacity: 1;}
.pc .card-photo:hover .photo-gif{opacity: 1;}


@media (max-width:1440px) {
  .row.space-20{ margin:0 -15px}
  .row.space-20 > div{ padding:0 15px}
}

@media (max-width:1199px) {
  .row{ margin:0 -10px}
  .row > div{ padding:0 10px}

  .row.space-25{ margin:0 -15px}
  .row.space-25 > div{ padding:0 15px} 
}

@media (max-width:991.98px) {
  .row.space-40{ margin:0 -20px}
  .row.space-40 > div{ padding:0 20px} 
}

@media (max-width:767px) {}

/*==================================================
    Section - Intro
==================================================*/  

.preload{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color:#fff;
  z-index: 1090; 
  display:block; 
  background-repeat: no-repeat;
  background-position: calc(50% + 80px) 50%; 
  background-image: url(../img/loading.gif);
} 
.preload:before{
  content: '';
  position: absolute;
  top:50%;
  left: 50%;
  width:80px;
  height: 40px;
  margin: -16px 0 0 -40px; 
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat; 
  background-image: url(../img/logo-blue.svg);
}  
/*==================================================
    Page
==================================================*/  
 
.page{
  position: relative; 
  display: block;   
  overflow: hidden;   
  min-height: 100vh;
  padding-top: 0 ; 
}   
 
/*==================================================
   Banner
==================================================*/  

.section-banner{
  height: 100vh;
  background-color: #000;
  padding: 0 !important;
 }
.swiper-banner .background{
  position: relative;
  height: 100vh;
}
.section-banner .background:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width:100%;

  background: linear-gradient(90deg, rgba(0, 64, 152, 0.99) 0%, rgba(0, 0, 0, 0) 64.95%);
}

.section-banner.h-medium,
.section-banner.h-medium-2{
  height: 30vw;
  background-color: #ccc
}
.swiper-pagination.banner{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 80px;
  z-index: 1010;
  display: flex;
  flex-direction: column;
  -ms-flex-align: center;
align-items: center;
}

.swiper-pagination.banner .swiper-pagination-bullet{
  width: 100%;
  background-color: #888888;
  width: 10px;
  height:10px;
  margin: 9px 0 !important;
}

.swiper-pagination.banner .swiper-pagination-bullet:first-child{margin-top: auto !important;}
.swiper-pagination.banner .swiper-pagination-bullet:last-child{margin-bottom: auto !important;}

.swiper-caption,
.banner-caption{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;

  display: flex;
}

.swiper-caption .caption,
.banner-caption .caption{
  position: relative;
  margin: auto;
  text-align: center;
  color: #fff;
  text-shadow: 0px 2px 24px rgba(0, 0, 0, 0.61);
  font-size: 19px;
  font-weight: 500;
  max-width:500px;
}

.swiper-caption h2{
  font-size: 49px;
  font-weight: bold;
  margin-bottom: 10px;
}

.btn-learn-more{
  width: 106px;
  height: 106px;
  position: relative;
  background: rgba(59, 59, 59, 0.1);
  backdrop-filter: blur(40px);
  border:1px solid #fff;
  border-radius: 50%;
  font-size: 14px;
  display: flex;
  margin: 50px auto 20px
}
.btn-learn-more > span{
  margin:auto;
}

.btn-learn-more:after {
  content: '';
  position: absolute;
    top:-4px;
    left:-4px; 
    right:-4px;
    bottom:-4px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.95);
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
   
    opacity: 0;

    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}
.pc .btn-learn-more:hover{
  background-color: #fff;
  color: var(--blue)
}
.btn-learn-more:hover:after {
  -webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.btn-learn-more .icons{
  width: 18px;
  height: 18px;
  display: block;
  margin: -5px auto 0;
}
.btn-learn-more .icons:before{background-image: url(../img/icons/icon-arrow-more-w.svg);}
.btn-learn-more .icons:after{background-image: url(../img/icons/icon-arrow-more-b.svg);}

.pc .btn-learn-more:hover .icons:before{opacity: 0}
.pc .btn-learn-more:hover .icons:after{opacity: 1}

.banner-caption{
  max-width: 390px;
  margin: 0 auto;
  padding-top: 80px;
  text-align: center;
  color: #fff;
}
.banner-caption .caption{
  margin: auto; 
  padding: 0 20px;
}
.banner-caption h2{
  font-size: 59px;
  color: #ffffff; 
  font-weight: 600;
  margin-bottom: 5px
}
.banner-caption p{
  font-size: 16px;
}
.banner-caption .icon-360{
  width: 76px;
  height: 76px;
  display: block;
  margin: 40px auto 0;
  border:1px solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(40px);

  background-size: 60px;
  background-image: url(../img/icons/icon-360.gif);
  background-position: center center;
  background-repeat: no-repeat;
}

.banner-caption.left{
  text-align: left;
  max-width:100%;
}
.banner-caption.left h2{
  text-transform: none;
  line-height: 1.2;
  margin-bottom: 10px;
  display:flex;
} 

.banner-caption.left p{
  max-width: 320px;
  margin-bottom: 0
}
.banner-caption.left .btn-learn-more{
  margin-left:0;
  margin-top: 30px;
}
.banner-caption.left .container,
.banner-caption.middle .container{
  margin-top: auto;
  margin-bottom: auto;
  text-shadow: 0px 2px 24px rgba(0, 0, 0, 0.61);
}
.banner-caption.left .group{
  position: relative;
  display: block;
  padding-left: 230px
}
.banner-caption.left .group .number{
  font-size: 170px;
  font-family: 'Kanit';
  font-weight: 500;
  line-height: 0.8;
  padding-right: 30px;
  position: absolute;
  top:0;
  left: 0;
}

.banner-caption.mw-100 {
  max-width: 100%
}
/**/

.swiper-caption{
   -webkit-animation-delay: 0ms;
    animation-delay: 0ms;
      -webkit-animation-duration: 300ms;
    animation-duration: 300ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}
.swiper-slide-active .swiper-caption{ 
 
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    } 
 
.swiper-caption h2,
.swiper-caption p,
.swiper-caption .btn-learn-more{  

     -webkit-animation-delay: 0ms;
    animation-delay: 0ms;
      -webkit-animation-duration: 500ms;
    animation-duration: 500ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
 
}

.swiper-slide-active .swiper-caption h2,
.swiper-slide-active .swiper-caption p,
.swiper-slide-active .swiper-caption .btn-learn-more{
    opacity: 1;
   visibility: visible;
   -webkit-animation-delay: 300ms;
    animation-delay: 300ms;
    -webkit-animation-duration: 900ms;
    animation-duration: 900ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
} 
.swiper-slide-active .swiper-caption h2{
  -webkit-animation-delay: 400ms;
    animation-delay: 400ms; 
}  
.swiper-slide-active .swiper-caption p{
  -webkit-animation-delay: 600ms;
    animation-delay: 600ms; 
}  
.swiper-slide-active .swiper-caption .btn-learn-more{
  -webkit-animation-delay: 800ms;
    animation-delay: 800ms; 
}  

.navbar-menu{
  display: block;
  height: 92px;
  background: rgba(0, 0, 0, 0.33);
  backdrop-filter: blur(30px);
  position: relative;
  margin-top: -92px;
  z-index: 1000;
} 
.navbar-menu .container-fluid{
  padding: 0;
  max-width: 100%
}
.nav-menu li{
  width: 25%
}
.nav-menu li a{
  display: flex;
  height: 92px;
  color: #fff;
  font-size: 13px;
  
  position: relative;
  overflow: hidden;
}
.nav-menu li a:before{
  content: '';
  position: absolute;
  bottom: -100%;
  left: 0;
  right: 0;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(../img/thumb/nav-hover.jpg);
  opacity: 0;
  transition: all 0.4s ease-in-out;
}
.nav-menu li a:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  z-index: 200
}
.nav-menu li a .group{
  margin: auto;
  position: relative;
  z-index: 10;
  display: flex;
  -ms-flex-align: center;
align-items: center;
max-width: 300px;
width: 100%
}
.nav-menu li a .icons{
  width: 35px;
  height: 35px;
  margin-right: 15px;
}
.nav-menu li a .icon-nav-1{background-image: url(../img/icons/icon-nav-01.svg);}
.nav-menu li a .icon-nav-2{background-image: url(../img/icons/icon-nav-02.svg);}
.nav-menu li a .icon-nav-3{background-image: url(../img/icons/icon-nav-03.svg);}
.nav-menu li a .icon-nav-4{background-image: url(../img/icons/icon-nav-04.svg);}

/*
.nav-menu li:first-child a .group{max-width: 100%; padding-left: 100px}
.nav-menu li:last-child a .group{max-width: 100%; padding-left: 100px}
.nav-menu li:last-child a .t1,
.nav-menu li:last-child a .t2{padding-left: 150px}*/

.nav-menu li:last-child a .group{max-width:223px;}

.nav-menu li a .t1,
.nav-menu li a .t2{
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  width: 100%;
  height:33px;
  line-height: 33px;
  text-align: center;
  transition: all 0.4s ease-in-out;
}
.nav-menu li a .t2{
  font-size: 18px;
  opacity: 0;
  top: 100%;
}
.nav-menu li.active a .t1,
.pc .nav-menu li:hover a .t1{ 
  top: -100%;
  opacity: 0;
}
.nav-menu li.active a .t2,
.pc .nav-menu li:hover a .t2{ 
  top:0;
  opacity: 1;
}

.nav-menu li.active a:after,
.pc .nav-menu li:hover a:after{
  background: rgba(0, 64, 152, 0.1);
  /*backdrop-filter: blur(4px);*/
}

.nav-menu li.active a:before,
.pc .nav-menu li:hover a:before{
  opacity: 1;
  bottom: 0;
}

@media (max-width:1440px) {
  .navbar-menu{margin-top: -85px}
  .navbar-menu,.nav-menu li a{height: 85px}
  .nav-menu li a .icons {
    width: 30px;
    height: 30px;
  }
  .nav-menu li a .group{
    max-width: 240px
  }
  .nav-menu li:nth-child(2) a .group{
    max-width: 280px
  }
  .nav-menu li:nth-child(1) a .group{max-width:210px;}
  .nav-menu li a .t2{font-size: 16px}

  .swiper-caption h2{font-size: 40px}
  .learn-more{margin-top: 30px}

  .banner-caption h2{font-size: 48px}
  .section-banner.h-medium,
  .section-banner.h-medium-2{height: 39vw}

  .banner-caption.left .group .number{font-size: 134px}
  .banner-caption.left .group{padding-left: 167px}
}
@media (max-width:1024px) {
  .nav-menu li a .group{
    max-width: 200px
  }
  .nav-menu li:nth-child(2) a .group{
    max-width: 250px
  }

  .section-banner.h-medium{height:50vw !important}
  .section-banner.h-medium-2{height: 45vw !important}

  .banner-caption h2{font-size: 35px}
  .h-medium-2 .banner-caption h2{font-size: 30px}

  .banner-caption.left .group .number{font-size: 84px}
  .banner-caption.left .group{padding-left: 110px}
}
@media (max-width:991.98px) {
  .section-banner{padding-top: 0}

  .section-banner.h-medium{height:60vw !important}
  .section-banner.h-medium-2{height: 50vw !important}

  .section-banner,
  .swiper-banner .background{
    height:calc(100vh - 80px);
    height: calc(var(--vh, 1vh) * 100) !important;
  }
  .swiper-caption{
    padding-top: 80px !important;
  }
  .swiper-caption .caption{
    
    font-size: 16px; 
    padding-top: 5vw; 
    padding-bottom: 172px;
  }
  .swiper-caption h2{font-size: 34px}

  .banner-caption.left .btn-learn-more,
  .banner-caption.middle .btn-learn-more{
    width: 80px;
    height: 80px;
    font-size: 10px;
    margin-top: 10px;
  }
 
  .navbar-menu{
    margin-top: -172px; 
    height: auto;
  }
  .nav-menu li{
    width: 50%;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    border-left: 1px solid rgba(255,255,255,0.1)
  }
}

@media (max-width:767px) {
  .swiper-caption{
    padding: 0 20px
  }
  .swiper-caption h2{font-size: 22px}

  .banner-caption.left .group .number{font-size: 52px}
  .banner-caption.left .group{padding-left: 65px}

  .learn-more{
    width: 85px;
    height: 85px;
    font-size: 12px
  }
  .swiper-pagination.banner{right: 20px}

  .navbar-menu{margin-top: -122px;}
  .nav-menu li a {
    height: 60px
  }
  .nav-menu li a .icons{
    width: 20px;
    height: 20px
  }
  .nav-menu li a .t1{
    line-height: 1.4;
    position: relative;
    width: auto;
    height: auto;
  }
  .nav-menu li a .group{
    width: auto;
    margin: 0 auto; 
  }

  .section-banner.h-medium{height:120vw !important}
  .section-banner.h-medium-2{height: 75vw!important}

  .h-medium-2 .banner-caption h2{font-size: 22px}
  .h-medium-2 .banner-caption p{font-size: 13px; margin-bottom: 0}
  
  .banner-caption.left .btn-learn-more,
  .banner-caption.middle .btn-learn-more{
    width:35px;
    height: 35px; 
  }
  .banner-caption.left .btn-learn-more .icons,
  .banner-caption.middle .btn-learn-more .icons{margin-top: 0}
  .banner-caption.left .btn-learn-more .text,
  .banner-caption.middle .btn-learn-more .text{display: none;}
}


@media (max-height:550px) {
  .section-banner.h-medium-2 {
    height: 39vw !important;
  }
}

/*==================================================
   Webinar
==================================================*/ 
.card{position: relative;}
.section-webinar .row div.left{
  -ms-flex: 0 0 55%;
  flex: 0 0 55%;
  max-width: 55%;
}
.section-webinar .row div.right{
  -ms-flex: 0 0 45%;
  flex: 0 0 45%;
  max-width: 45%;
}
.card-photo.webinar{
  height: 100%;
  background-color: #ccc;
  position: relative;
  z-index: 1000
}
.card-photo.webinar:before{ 
  opacity: 1;
  background: linear-gradient(180deg, rgba(163, 202, 255, 0) 0%, rgba(0, 64, 152, 0.61) 100%);
}
.card-photo.webinar .photo{height: 100%; }

.article.webinar{
  display: flex;
  flex-direction: column;
  height: 100%
}
.article.webinar .textbox,
.article.webinar .learnmore-row{width:75% }
.article.webinar .textbox p:last-child{margin-bottom: 0}
.article.webinar h3{margin-bottom: 20px; margin-top: 0}
.article.webinar .learn-more{
  display: flex;
}
.learnmore-row .d-flex{
  width: 100%;
  position: relative;
  -ms-flex-align: center;
  align-items: center;
}
.learnmore-row .title{
  font-size: inherit; 
  display: inline-block;
  border-bottom: 1px solid var(--blue);
  color: var(--blue)
}
.learnmore-row .arrow-circle{
  width:32px;
  height:32px;
  background-color: var(--blue);
  border-radius: 50%;
  margin-left: auto;
  display: flex;
}

.learnmore-row .arrow-circle .icons{
  width: 18px;
  height: 9px;
  margin: auto;
}
.learnmore-row .arrow-circle .icons:before,
.learnmore-row .arrow-circle .icons:after{
  background-image: url(../img/icons/icon-arrow-tail-right.svg);
  width: 18px;
  height: 9px;
  left: 0; 
}

.learnmore-row .arrow-circle .icons:before{opacity: 1;}
.learnmore-row .arrow-circle .icons:after{opacity: 0;left: -10px; }

.pc .learnmore-row:hover .arrow-circle .icons:before{opacity: 0; left: 10px}
.pc .learnmore-row:hover .arrow-circle .icons:after{opacity: 1; left: 0;transition-delay: 0.2s;}

.swiper-overflow{
  position: relative;
  margin: 0;
  width: 100%
}
 
.section-webinar .swiper-overflow:before{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right:100%;
  left: -100vw;
  background-color: #fff;
  z-index: 90;
}
.section-webinar .swiper-overflow:after{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left:0;
  right: -20vw;
  background: linear-gradient(270deg, #F4F7F8 22.38%, rgba(196, 196, 196, 0) 89.44%);
  z-index: 90;
  pointer-events: none;
}

.swiper-webinar{
  overflow: visible;
}
.swiper-webinar .card-photo{width: 100%}
.swiper-webinar .card-photo .photo{height: 100%}

@media (max-width:1440px) {
  .section-webinar .swiper-overflow:after{
    right: -120px
  }

  .card-photo.webinar .photo{min-height: 420px} 
}

@media (max-width:1280px) {
  .article.webinar h3{margin-bottom: 10px}

}

@media (max-width:991.98px) {
  .section-webinar{padding-top: 20px}
  .section-webinar .row div.left,
  .section-webinar .row div.right{
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .swiper-overflow{overflow: hidden;}
  .swiper-overflow::before,
  .swiper-overflow::after {
    display: none;
  }

  .card-photo.webinar{
    height: 47vw;
    margin: 0 -50px;
  }
  .card-photo.webinar .photo{min-height: 0}

  .article.webinar{padding-top: 40px}
  .article.webinar .textbox, 
  .article.webinar .learnmore-row{max-width: 100%; width: 100%}

  .article.webinar .textbox{margin-bottom:20px}

  .article.webinar .learnmore-row{
    width: 130px;
    margin-bottom: 40px !important; 
  }

  .article.webinar .learnmore-row .arrow-circle{
    width: 22px;
    height: 22px;
    margin-left: 10px
  }
  .article.webinar .learnmore-row .arrow-circle .icons::before, 
  .article.webinar .learnmore-row .arrow-circle .icons::after{
    width: 13px;
    margin-left: 2px
  }
}

@media (max-width:767px) { 

  .article.webinar{padding-top: 30px}

  .article.webinar .learnmore-row {width: 100%}
  .article.webinar .learnmore-row .arrow-circle{margin-left: auto;}
}

/*==================================================
   Blog
==================================================*/ 
.icon-global{
  width: 22px;
  height: 22px;
  background-image: url(../img/icons/icon-global.svg);
  margin-right: 10px
}

.section-blog .title-sm{ margin-bottom: 40px }
.section-blog .container.content{
  max-width: 100%;
  padding: 0
}
.section-blog .row div.left{}
.section-blog .row div.right{}
.card-blog{
  background-color: #EBEEF3;
  flex-direction: row;
  border-radius: 0 15px 15px 0;
  height: calc(50% - 20px);
  margin-bottom: 40px; 
}
.card-blog + .card-blog{margin-bottom: 0}

.card-blog.h-auto{height: auto;}

.card-blog .card-photo{
  width: 13.5vw;
  height: 100%;
  overflow: hidden;
}
.card-blog .card-photo .photo{
  height: 100%;
  transition: all 0.3s ease-in-out;
}
.card-blog .card-body{
  width: calc(100% - 195px);
  padding: 30px 20vw 30px 30px;
  display: flex;
  flex-direction: column;
  font-size: 14px;
}
.card-blog .card-body .icon-global{
  width: 15px;
  height: 15px;
  opacity: 0.4;

  position: absolute;
  top: 20px;
  right: 10px
}
.card-blog .card-body h3,
.card-blog-main .card-body h3{
  font-size: 15px;
  font-weight: bold;
  color: var(--blue);
  margin-bottom: 9px
}

.card-blog .card-body p,
.card-blog-main .card-body p{
  margin-bottom: 0; line-height: 1.3;
  overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.card-blog-main .card-body p{color:#4E4E4E }
.card-blog .card-body p.more{margin-top: auto;}
.card-blog .card-body p.more span{
  display: inline-block; 
  font-weight: bold;
  font-size: 15px;
  color: #000;
  transition: all 0.2s ease-in-out;
  position: relative;
}
.card-blog .card-body p.more span:before{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  border-bottom: 1px solid var(--blue);
  transition: all 0.4s ease-in-out;
}
.pc .card-blog:hover .card-body p.more span{
  color: var(--blue);
  border-bottom-color: var(--blue);
}
.pc .card-blog:hover .card-body p.more span:before{ width: 100% }
.pc .card-blog:hover .photo{ transform: scale(1.12,1.12); } 
.pc .card-blog-main:hover .photo{ transform: scale(1.14,1.14); } 

.card-blog-main {
  margin-left: -100px
}
.card-blog-main .card-photo{
  height: 100%;
  transition: all 0.4s ease-in-out;
}
.card-blog-main .card-body{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;

  padding:30px 40px 40px;

  background: linear-gradient(180deg, rgba(222, 236, 255, 0.5) 0%, rgba(0, 64, 152, 0.2) 100%);
  backdrop-filter: blur(44px);
} 


@media (max-width:1680px) { 
}
@media (max-width:1440px) {
  .card-blog-main{margin-left: -80px}
  .card-blog-main .card-body{ padding-bottom: 30px } 
  .card-blog .card-body { 
    padding: 20px 10vw 20px 30px;
  }
  .card-blog{margin-bottom: 30px; height: calc(50% - 15px);}

}
@media (max-width:1199px) { 
  .card-blog-main{margin-left: -50px}
  .card-blog-main .card-body{padding: 20px}
  .section-blog .row div.right{padding-left: 10px}
}
@media (max-width:991.98px) {
  .section-blog .container.content{
    padding-left: 50px;
    padding-right: 50px;
  }
  .section-blog .row div.left,
  .section-blog .row div.right{
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .card-blog{
    margin-right: 0;
    margin-bottom: 20px
  }

  .card-blog-main{
    margin: 0 -50px 25px; 
    border-radius:0;
    overflow: hidden;
  }
  .card-blog-main .card-body{
    padding: 20px 50px
  }

  .card-blog-main .card-photo{height: 50vw;}
  .card-blog-main .card-photo img{display: none;}
}

@media (max-width:767px) {
  .section-blog .title-sm{margin-bottom: 20px}
  .section-blog .container.content{padding-left: 25px; padding-right: 25px}
  .card-blog-main .card-body{
    padding: 15px 25px
  }
  .card-blog-main{ 
    margin-left: -25px; 
    margin-right: -25px;
    margin-bottom: 25px;
  }
  .card-blog-main .card-photo{height:70vw;}
  .card-blog-main .card-body h3{margin-bottom: 5px}

  .card-blog{
    height: auto;
    flex-direction: column;
    border-radius: 0 0 15px 15px
  }
  .card-blog .card-photo{
    width: 100%;
    height: 30vw
  }
  .card-blog .card-body{
    width: 100%;
    height:auto;
    position: relative;

    padding:20px 15px;
  }
  .card-blog .card-body p.more{margin-top: 15px}
  .card-blog .card-body p.more span{
    border-bottom: 1px solid #000
  }
  .card-blog .card-body .icon-global{top: auto;bottom: 20px}
}
@media (max-width:576px) {
  .card-blog .card-photo{height: 60vw}
}

/*==================================================
   Procedure Training &  Available Program 
==================================================*/ 

.icon-arrow-rotate{
  width: 18px;
  height: 18px;
  background-image: url(../img/icons/icon-arrow-more-w.svg);
  margin: -1px 5px 0 -4px;
}

.section-training .hgroup{
  padding-top: 15px;
}

.swiper-training{
  margin-right: -15px;
}
.swiper-pagination.training{
  left: 0;
  right: 0;
  bottom: -30px;
}
.swiper-pagination.training .swiper-pagination-bullet{
  width: 8px;
  height: 8px;
  background-color: #cccccc
}
.card-training{
  padding:20px 15px 0;
  background-color:transparent;
  border-radius: 15px;
  height: 100%;
  transition: all 0.3s ease-in-out;
}
.card-training .card-photo{ 
  border-radius: 15px;
  overflow: hidden;
}
.card-training .card-photo:before{
  opacity: 1;
  background: linear-gradient(180deg, rgba(0, 64, 152, 0) 0%, #004098 100%);
  transition: all 0.3s ease-in-out;
}
.card-training .card-photo .photo{opacity: 0.8}
.card-training .card-body{padding:20px 0 25px;}
.card-training h4{
  color: #393939;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  max-width:150px;
  width: 100%;
  margin: 0 auto ;
  transition: all 0.3s ease-in-out;
}

.pc .card-training:hover{
  background-color:var(--blue);
}
.pc .card-training:hover h4{
  color: #fff;
}
.pc .card-training:hover .card-photo:Before{
  opacity: 0
}


@media (max-width:1280px) {
  .card-training h4{font-size: 16px}
}

@media (max-width:991.98px) {
  .section-training{
    padding-bottom: 0px;
    padding-top: 0;
  }
  .swiper-training{
    margin-right: -10px;
  }

  .swiper-slide-active .card-training .card-photo:before{opacity: 0}

  .swiper-pagination.training{ bottom: -15px }
}

@media (max-width:767px) {
  .card-training{
    padding: 0
  }
 
  .swiper-training{
    overflow: visible;
    padding-left: 14vw;
    padding-right: 14vw;
    margin-right: 0;
  } 

  .section-training .hgroup{
    padding: 0 0 30px;
    text-align: center
  }
  .card-training .card-body{
    padding-bottom: 0
  }
}

/*==================================================
   View T-tec
==================================================*/ 

.swiper-single .background{
  position: relative;
  pointer-events: auto; 
}

.swiper-single.h-700 .background{
  position: relative;
  pointer-events: auto;
  height:40vw
}

.title-left-top{
  position: absolute;
  top: 20px;
  left: 20px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  z-index: 10;
  text-transform:uppercase;
}


.swiper-button.single {
  width: 45px;
  height: 45px;
  border:0;
 
  background-color: var(--blue);
  border-radius: 50%;
  margin-left: auto;
  display: flex;
}

.swiper-button.single .icons{
  width: 18px;
  height: 9px;
  margin: auto;
}
.swiper-button.single .icons:before,
.swiper-button.single .icons:after{
  background-image: url(../img/icons/icon-arrow-tail-right.svg);
  width: 18px;
  height: 9px;
  left: 0; 
}

.swiper-button.single .icons:before{opacity: 1;}
.swiper-button.single .icons:after{opacity: 0;left: -10px; }

.pc .swiper-button.single:hover .icons:before{opacity: 0; left: 10px}
.pc .swiper-button.single:hover .icons:after{opacity: 1; left: 0;transition-delay: 0.2s;}

.swiper-button.single.swiper-button-prev .icons:before,
.swiper-button.single.swiper-button-prev .icons:after{
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
  right: 0;
  left: auto;
}


.swiper-button.single.swiper-button-prev .icons:before{opacity: 1;}
.swiper-button.single.swiper-button-prev .icons:after{opacity: 0;right: -10px; left: auto; }

.pc .swiper-button.single.swiper-button-prev:hover .icons:before{opacity: 0; right: 10px; left: auto;}
.pc .swiper-button.single.swiper-button-prev:hover .icons:after{opacity: 1; right: 0;transition-delay: 0.2s; left: auto;}


@media (max-width:1440px) {
  .swiper-single.h-470 .background{ height: 470px }
}

@media (max-width:1280px) {
  .swiper-single.h-470 .background{ height: 40vw }
  .swiper-single.h-700 .background{height: 45vw}
}

@media (max-width:991.98px) {
  .swiper-single.h-470 .background {
    height: 50vw;
  }

  .section-view-ttec{
    padding: 30px;
  }
  .section-view-ttec .container{
    padding: 0
  }

  .swiper-button.single{
    width: 34px;
    height: 34px;
    margin-top: -17px
  }

  .swiper-button-prev{left: 30px}
  .swiper-button-next{right: 30px}
}

@media (max-width:767px) {
  .section-view-ttec{
    padding: 20px;
  }
  .title-left-top{
    top:15px;
    left: 15px;
    font-size: 12px
  }

  .swiper-button.single{display: none;}
}

/*==================================================
   T-Tec Facilities
==================================================*/

.section-facility{padding: 0} 
.swiper-facility {
  padding:70px 0
}
.swiper-facility .swiper-slide{
  transition: all 0.5s ease-in-out;
}
.card-facility { 
  height:27vw;
  
  overflow: hidden;
}
.card-facility .card-photo{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all 0.5s ease-in-out;
   -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
.card-facility .card-body:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  border-radius: 6px 6px 0 0;

  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3422) 47.92%, rgba(0, 0, 0, 0.58) 100%);
  transform: rotate(180deg);
}
.card-facility .card-body:after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #004098 47.92%, #004098 100%);
  border-radius: 0 0 6px 6px;
}
.card-facility .card-body{
  display: flex;
  color: #fff;
  flex-direction: column;
  padding:25px 25px 35px;
  transition: all 0.4s ease-in-out;
  opacity: 0;
} 
.card-facility .hgroup,
.card-facility .fgroup{
  width: 100%;
  position: relative;
  z-index: 10
}

.card-facility .hgroup:before{
  content: '';
  position: absolute;
  top: 0;
  right: -5px;
  width: 45px;
  height: 45px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(../img/icons/icon-360.gif);
}
.card-facility h3{
  font-size: 25px;
  font-family: 'Helvetica-rounded';
  color: inherit;
}
.card-facility p{
  font-size: 11px;
  line-height: 1.3;
  overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}

.card-facility .fgroup{
  margin-top: auto;
}
.card-facility .learnmore-row{margin-top: 30px}
.card-facility .learnmore-row .title{
  font-size: 15px;
  font-family: 'Helvetica-rounded';
  color: #fff;
  border-bottom: 1px solid #ffffff;
}

.card-facility .learnmore-row .arrow-circle{
  width: 20px;
  height: 20px;
  background-color: #608DCB
}
.card-facility .learnmore-row .arrow-circle .icons,
.card-facility .learnmore-row .arrow-circle .icons::before, 
.card-facility .learnmore-row .arrow-circle .icons::after {
  width: 14px;
  height: 6px;
}


.pc .swiper-facility .swiper-slide:hover{
  z-index: 30;
  
  -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
.pc .card-facility:hover{border-radius: 6px; }
.pc .card-facility:hover .card-photo{
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}
.pc .card-facility:hover .card-body{
  opacity: 1
}

.facility-gallery{
  color: #0F0F0F;
  font-size: 17px;
  font-weight: 300;
  border-bottom: 2px solid rgba(197,197,197,0.7);
}
.facility-gallery > .row > div{
  display: flex;
}

.facility-gallery .inner{
  margin: auto 0;
}
.facility-gallery h3{
  margin-bottom: 30px;
  text-transform: uppercase;
}
.facility-gallery h6{
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.facility-gallery  p{
  margin-bottom: 10px; 
  max-width: 400px;
  overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.facility-gallery .viewmore{margin-bottom: 0}
.facility-gallery .viewmore a{color: var(--blue);}
.facility-gallery .viewmore a span{
  display: inline-block;
  text-decoration: underline;
  font-size: 13px;
}
.facility-gallery .row{margin: 0}
.facility-gallery .row > div{padding: 0}

.facility-gallery .box-flex{
  display: flex;
  width: 100%
}
.facility-gallery .number{
  font-size: 80px;
  font-weight: 500;
  font-family: 'Kanit';
  margin: auto;
  margin-bottom: 0;
  width: 200px;
  height: 260px; 
  display: flex;
  text-align: center;
}
.facility-gallery .number span{margin: auto;}

.facility-gallery .box-gray{
  padding: 35px 0;
  background-color: #EBEEF3;
  width: calc(100% - 200px);
  height: 260px;
  position: relative;
  margin-top: auto;
  display: flex;
}
.facility-gallery .box-gray:before{
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  right: -100vw;
  bottom: 0;
  background-color: #EBEEF3;
}
.facility-gallery .swiper-overflow{
  padding: 0 50px;
  width: 400px
}
 
.swiper-single.facility .background{
  position: relative;
  height: 188px;
  pointer-events: auto;
}
.facility-gallery .swiper-pagination{display: none;}
.facility-gallery .swiper-button.single{
  width: 32px;
  height: 32px;
  background-color: rgba(0,0,0,0.5);
  margin-top:-14px;
}
.facility-gallery .single.swiper-button-prev{left: 0;}
.facility-gallery .single.swiper-button-next{right: 0;}

.facility-gallery.x1 .row {
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.facility-gallery.x1 .row > div{
  height: 325px
}
.facility-gallery.x1 .row > div:nth-child(1){
  border-left: 0.8px solid rgba(197,197,197,0.7);
}
.facility-gallery.x1 .swiper-overflow{margin-left: auto;}
.facility-gallery.x2 .box-gray{
  width: calc(100% - 220px);
}
.facility-gallery.x2 .box-gray:before{
  right: 0;
  left: -100vw;
}
.facility-gallery.x2 .number{ 
  margin-right: auto; 
  margin-left: 0; 
}
.facility-gallery.x2 .inner{
  margin-left: -20px
}
.facility-gallery.x3 .number{
  position: relative;
  left: -15px
}
.facility-gallery.x3 .box-gray{
  margin: 0 15px 0 auto;
  width: auto;
}
.facility-gallery.x3 .box-gray:before{
  right:-100vw;
  left: -100vw;
}
.facility-gallery.x3 .number{width: 240px}
.facility-gallery.x3 .inner{
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.facility-gallery.x3 .inner h6{margin-top: auto;}
.facility-gallery.x3 .inner p:last-child{margin-bottom: auto;}
.facility-gallery.x3 .inner:before{
  content: '';
  position: absolute; 
  left:0;
  right: -100vw;
  bottom:-262px;
  height: 260px;
  background-color: #EBEEF3;
}

.facility-gallery.x4{
  overflow: hidden;
  margin-bottom: 70px;
  border-bottom: 0;
}
.facility-gallery.x4 .box-gray{
  width: auto;
  margin-left: auto;
  margin-right: 58px;
  background-color: transparent;
}
.facility-gallery.x4 .box-gray::before {display: none;}
.facility-gallery.x4 .number{
  margin-left: -60px;
  margin-right: 0;
}
.facility-gallery.x4 p{max-width: 350px}
.facility-gallery.x4 .inner{
  position: relative;
}


@media (max-width:1680px) {
  .facility-gallery .number{
    width: 170px; 
  }
}

@media (max-width:1440px) {
  .swiper-facility{padding: 80px 0}
  .card-facility .card-body{
    padding: 20px 20px 25px;
  }

  .card-facility h3{font-size: 20px}

  .card-facility .hgroup::before{
    width: 35px;
    height: 35px
  }
  .card-facility .learnmore-row{margin-top: 20px}
  .card-facility .learnmore-row .title{font-size: 13px}

  .facility-gallery .swiper-overflow {width: 365px;}
  .swiper-single.facility .background{height: 170px}
  .facility-gallery .box-gray{height: 240px}
  .facility-gallery .number{height: 240px}
  .facility-gallery .number{font-size: 70px}

  .facility-gallery .box-gray{width: calc(100% - 160px);}
  .facility-gallery.x2 .box-gray{width: calc(100% - 160px);}
  .facility-gallery.x2 .inner{margin-left: 0}
  .facility-gallery.x4 p{max-width: 316px;padding-right: 20px}

  .facility-gallery.x3 .inner:before{ height: 240px; bottom: -242px;}
}

@media (max-width:1280px) {
  .swiper-facility{padding: 50px 0 30px}

  .facility-gallery p{font-size: 14px; line-height: 1.3}
  .facility-gallery .number{font-size: 60px}
 
}

@media (max-width:1024px) {
  .swiper-facility{
    overflow:visible;
    max-width: 40vw;
    padding: 30px 0;
  }

  .card-facility{height: 55vw;border-radius: 12px;} 

  .swiper-slide-active .card-facility .photo{
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
  }
  .swiper-slide-active .card-facility .card-body{
    opacity: 1
  }

  .card-facility h3{font-size: 25px; margin-bottom: 3px}
  .card-facility p{font-size: 14px}
  .card-facility .learnmore-row .title{font-size: 15px}
  .card-facility .learnmore-row .arrow-circle {
    width: 25px;
    height: 25px;
  }

  .facility-gallery .container{padding: 0}
  .facility-gallery .swiper-overflow {margin: auto;}
  .facility-gallery .inner{padding:0 30px}
  .facility-gallery .number{font-size: 40px; width: 100px; display: none;}
  .facility-gallery .box-gray{width:100% !important;}
  .facility-gallery.x2 .box-gray{width: calc(100% - 100px);}
  .facility-gallery.x2 .number{display: none;}
  .facility-gallery.x3 .number{width: 100px}
  .facility-gallery.x4 .number{width: 140px; margin-left: -20px}

  .facility-gallery .row > div{
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .facility-gallery.x3 .row {
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
  .facility-gallery.x3 .box-gray::before {left: 0}
  .facility-gallery.x4 .inner::before {display: none;}
  .facility-gallery.x4 .box-gray{margin-right: 0}
  .facility-gallery.x4 .box-gray::before {left: -100vw; right: 0; display:block;}

  .facility-gallery.x1 .row > div:nth-child(1){border:0 !important;}

  .facility-gallery .single.swiper-button-prev{left: 10px}
  .facility-gallery .single.swiper-button-next{right: 10px}
}

@media (max-width:767px) {
  .swiper-facility{max-width: 60vw; padding-top: 20px}
  .card-facility{height: 85vw}
  .card-facility h3{font-size: 20px}
  .card-facility  p{font-size: 11px}
  .card-facility .learnmore-row .title{font-size: 11px}
  .card-facility .learnmore-row .arrow-circle {
    width: 20px;
    height: 20px;
  }

  .card-facility .card-photo,
  .card-facility .card-photo .photo{border-radius: 12px;}

  .card-facility .card-body:before{border-radius: 12px 12px 0 0;}
  .card-facility .card-body:after{border-radius: 0 0 12px 12px;}
  .card-facility .card-body{border-radius: 12px}

  .facility-gallery{border:0;}
  .facility-gallery .row > div {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .facility-gallery .box-gray{
    padding: 0;
    height: auto;
  }
  .facility-gallery .swiper-overflow{
    width: 100%;
    padding: 0;
  }
  .swiper-single.facility .background{
    height: 60vw
  }

  .facility-gallery .inner {
    padding: 30px 25px 50px;
  }

  .facility-gallery.x1 .row > div{height: auto;}

  .facility-gallery h3{
    text-align: center;
    margin: 30px 0
  }

  .facility-gallery .swiper-pagination{display:block;}

  .facility-gallery.x3 .inner::before,
  .facility-gallery.x4 .box-gray::before {display: none;}
}

/*==================================================
   T-Tec Facilities - Detail
==================================================*/

.nav-tabs .nav-item{margin: 0}
.nav-tabs .nav-link{border:0;border-radius: 0}

.nav-fill{
  margin: 0 auto;
  border:0;
}

.nav-fill .nav-link{
  background-color: #EBEEF3;
  padding: 0 20px;
  height:76px;
  display: flex;
  color: #000000;
  border-left: 1px solid rgba(150,150,150,0.3) !important;
}
.nav-tabs .nav-item{position: relative;}
.nav-tabs .nav-item:first-child .nav-link{border:0!important ;}

.nav-fill .nav-link span{
  margin: auto;
}
.nav-fill .nav-link:hover,
.nav-fill .nav-link.active{
  background-color: var(--blue);
  color: #fff;
}

.nav-fill .nav-fancybox .nav-link:nth-child(2){
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}/*
.nav-fill .nav-fancybox .nav-link.active + .nav-link{
  background-color: var(---blue);
   color: #ffffff
}*/
.nav-button{
  padding: 45px 0;
  -ms-flex-pack: center;
justify-content: center;
}
.nav-button .nav-item {margin: 0 15px;}
.nav-button .nav-item a{
  background-color: #EAEAEA;
  border-radius: 10px;
  display: flex; 
}
.nav-button .nav-item a span{
  margin: auto;
}
.nav-button.lg .nav-item a{
  font-size: 18px;
  color: #737373;
  font-weight: 500;
  height: 88px;
  display: flex;
  min-width: 245px
}
.nav-button.sm {
  margin:0 -10px;
}
.nav-button.sm .nav-item {
  margin: 0 10px;
}
.nav-button.sm .nav-item a{
  height: 56px;
  border-radius: 20px;
  min-width: 245px;
  font-size: 18px;
  background-color:transparent;
  border:1px solid #B9B9B9 !important;
}

.nav-button.sm .nav-item:last-child{ margin-right: auto;}

.nav-button .nav-item a.active,
.pc .nav-button .nav-item a:hover{
  background-color: var(--blue);
  color: #fff;
}

.nav-button.sm .nav-item a.active,
.pc .nav-button.sm .nav-item a:hover{border:1px solid var(--blue) !important;}

.nav-button.xs .nav-item a{
  height:46px;
  line-height: normal;
  padding: 0 10px;
  text-align: center;
}
.nav-button.xs.w-125 .nav-item a{ width: 135px } 
.nav-button.xs.f-12 .nav-item a{font-size: 12px}
.nav-fill.mw-785{
  /*max-width:785px;*/ 
  position: absolute;
  left: 0;
  right: 0;

  width: 100%;
  -ms-flex-pack: center;
justify-content: center;
}
.nav-tabs.mw-785 .nav-item{
  width:/**/ 260px;
  -ms-flex: unset;
flex: unset;
}
.nav-tabs.mw-785 .nav-link{font-size: 13px}

.nav-tabs-fixed{
  margin-top:60px;
  display: block;
  position: relative;
  height: 76px;
  z-index: 1010;
}
.nav-tabs-fixed .nav-fill.fixed{
  background-color: #EBEEF3;
}
.nav-tabs-fixed .nav-fill.fixed:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-top:1px solid rgba(150,150,150,0.3) !important
}
.facility.room-details{
  font-size: 16px;
  font-weight: 300;
  position: relative;
  margin: 0 70px;
}
.facility.room-details .row > div{padding: 0 40px}
.facility.room-details h3{
  color: var(--blue);
  margin-bottom:35px;
  margin-top: 30px;
} 
.facility.room-details h4{
  color: #000;
  font-size: 17px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 15px
}
.facility.room-360 {
  display: block;
  padding-bottom:70px;
  position: relative;
}
.facility.room-360:before ,
.facility.has-line:before {
  content: '';
  position: absolute;
  left: -100vw;
  right: -100vw;
  bottom: 0;
  border-bottom: 1px solid rgba(126,126,126,0.3)
}
.facility.has-line:before{
  border-top: 1px solid rgba(126,126,126,0.3);
  bottom: auto;
  top: 0;
  border-bottom: 0;
}
.facility.room-360.no-line{
  padding-bottom: 0;
}
.facility.room-360.no-line:before {display: none;}
.facility.room-360 img.icon {
  width: 95px;
  margin:  50px auto 30px
}
.facility.equipment-details{
  color: #000;
  font-size:16px;
  padding-top: 70px;
  padding-bottom: 50px;
  font-weight: 300;
  position: relative;
}
.facility.equipment-details .row{margin: 0}
.facility.equipment-details .row > .cols-left .infos{
  width:500px;
}
.facility.equipment-details .row > .cols-right{
  display: block; 
  width: calc(100% - 500px);
}
.facility.equipment-details .row .row{margin: 0 -40px} 
.facility.equipment-details .row .row > div{padding: 0 40px}
.facility.equipment-details .hgroup{
  display: flex;
  padding-bottom: 35px;
} 
.facility.equipment-details h4{
  font-weight: 400;
  font-size: 17px; 
  margin-bottom: 10px;
  text-transform: uppercase;
}

.card-info h5{
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px
}

.card-info .card-body{
  padding:30px 0;
  line-height: 1.5;
  font-size: 15px
}

.card-info .card-photo.h-200{height: 230px}

.card-info.equipment {
  /*max-width: 165px;*/
  margin: 0 auto
}
.card-info.equipment .card-photo:before{background-color: var(--blue); }
.pc .card-info.equipment:hover .card-photo:before{opacity: 0.3;}
.pc .card-info.equipment:hover{color: var(--blue);}
 
.card-info.hospitality{
  margin-bottom: 50px
}
.card-info.hospitality h3{
  font-size: 28px;
  font-weight:600;
  margin-bottom: 15px;
  transition: all 0.2s ease-in-out;
}
.card-info.hospitality p{
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}
.card-info.hospitality .card-photo,
.card-info.hospitality .background{
  height:auto;
  position: relative;
  pointer-events: auto;
}
.card-info.hospitality .swiper-container{
  width: 100%;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
}
.card-info.hospitality .swiper-overflow{
  position: relative;
  overflow: hidden;
}
.card-info.hospitality .card-body{
  height: 23vw;
  padding: 30px 0 0
}

.card-info.hospitality .swiper-button.single{
  width: 32px;
  height: 32px;
} 
.card-info.hospitality .swiper-button.swiper-button-prev{left:20px;}
.card-info.hospitality .swiper-button.swiper-button-next{right:20px;}
.card-info.hospitality .swiper-pagination{display: none;}

.pc .card-info.hospitality:hover h3{
  color:var(--blue);
}

.pc .card-info.hospitality:hover .swiper-container{
  -webkit-transform: scale(1.15);
    -moz-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
}

.card-info.training{
  max-width:215px;
  margin: 0 auto;
}
.card-info .nav.menu{
  flex-direction:column;
  margin: 0;
  -ms-flex-pack: justify;
justify-content: space-between;
}
.card-info .nav.menu li{
  width: 100%;
  position: relative;
}
.card-info .nav.menu.has-list li{
  padding-left: 18px;
}
.card-info .nav.menu.has-list li:before{
  content: '';
  position: absolute;
  top: 7px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #EDEDED;
  border:1px solid #757575;
}
.card-info .nav.menu li a{
  color: #000;
}
.pc .card-info .nav.menu li a:hover{
  color: var(--blue)
} 

.nav.menu .checkbox-group{margin: 2px 0}
.nav.menu .checkbox-group label::before {
    top: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
}
.nav.menu .checkbox-group.radio input[type="checkbox"]:checked + label::after{
  background-color:var(--blue);
  border-radius: 50%;
  background-image: none;
}
.procedure-training{
  padding:70px 50px 30px;
  display: flex;
  -ms-flex-pack: justify;
justify-content: space-between;
}
.hospitality-wrapper {
  display: block;
  padding:0 130px;
}
.hospitality-wrapper .row{
  margin: 0 -35px;
}
.hospitality-wrapper .row > div{
  padding: 0 35px;
}
.hospitality-wrapper .row > div:nth-child(even){
  margin-top: 23vw;
}

.facility.floorplan{
  display: block;
  text-align: center;
  padding: 50px 0;
}
.facility.floorplan .d-inline-block{
  position: relative;
}
.facility.floorplan img{
  max-width: 600px;
  width: 100%
}

.facility.floorplan .target{
  position: absolute;
  top: 38%;
  left:40%;
  width: 25%;
  height:125px;
  background-color: var(--blue);
  color: #fff;
  font-size: 12px;
  display: flex;
}
.pc .facility.floorplan .target:hover{background-color:#123360 }
.facility.floorplan .target .icons{
  width: 25px;
  height: 25px;
  margin-bottom: 10px;
  background-image: url(../img/icons/icon-360.gif);
}
.facility.floorplan .target > div{
  margin: auto;
  text-align: center;
}

@media (max-width:1680px) {
  .card-info.training{max-width:200px;}

  .facility.equipment-details .row .row{margin: 0 -30px} 
  .facility.equipment-details .row .row > div{padding: 0 30px}
}

@media (max-width:1550px) {
  .facility.equipment-details .row > .cols-left .infos{
    width:450px
  }
  .facility.equipment-details .row > .cols-right {
    display: block;
    width: calc(100% - 450px);
  }
}

@media (max-width:1440px) {
  .card-info h5{font-size: 15px}
  .facility.equipment-details h4{font-size: 16px}
  .facility.room-details h3{margin-bottom: 25px}
  .facility.room-details h4{font-size: 16px; margin-bottom: 5px}

  .facility.equipment-details .row > .cols-left .infos{
    width:400px;
  }
  .facility.equipment-details .row > .cols-right{
    width: calc(100% - 400px);
    padding-left: 30px
  }
  .facility.equipment-details .row .row {margin: 0 -25px;}
  .facility.equipment-details .row .row > div{padding: 0 25px}
  
  .nav-fill .nav-link{height: 65px;}

  .nav-button.sm .nav-item a{
    height: 50px;
    min-width: 235px;
  }

  .hospitality-wrapper{padding: 0 80px}
  .card-info.hospitality h3{font-size: 24px; margin-bottom: 5px}

  .card-info.training .card-body{font-size: 15px}
}

@media (max-width:1350px) {
  .card-info.training{max-width:200px; margin: 0 10px;}
}

@media (max-width:1280px) {
  .facility.equipment-details .row > .cols-left .infos{width: 350px}
  .facility.equipment-details .row > .cols-right{width: calc(100% - 350px);}
  .card-info h5{font-size: 14px}
  .card-info .card-body{font-size: 13px}

  .hospitality-wrapper{padding: 0 30px} 
  .card-info .card-body{padding: 20px 0}
  .facility.room-details{margin: 0 40px}
  .facility.equipment-details .row .row {margin: 0 -15px;}
  .facility.equipment-details .row .row > div{padding: 0 15px}
  
}

@media (max-width:1199px) {
  .facility.equipment-details{padding-top: 50px}
  .facility.equipment-details .row > .cols-left,
  .facility.equipment-details .row > .cols-right{
    width: 100%;
    padding-left: 0;
    padding-right: 0
  }
  .facility.equipment-details .row > .cols-left{padding-bottom:30px}
  .facility.equipment-details .row > .cols-left .infos{width: 80%}
  .facility.equipment-details .row > .cols-left .d-block{max-width: 100% !important}
 
  .facility.equipment-details .row .row {margin: 0 -25px;}
  .facility.equipment-details .row .row > div{padding: 0 25px}

  .facility.room-details .row{margin: 0 -20px}
  .facility.room-details .row > div{padding: 0 20px;}

  .facility.room-details{margin: 0}

  .nav-button.sm{
    padding-bottom:15px;
  }
  .nav-button.sm .nav-item a{
    height: 50px;
    min-width: 215px;
    font-size: 16px;
  }
  .hospitality-wrapper{padding:0px}
  .hospitality-wrapper .row {margin: 0 -20px}
  .hospitality-wrapper .row > div{padding: 0 20px} 
  .card-info.hospitality h3{font-size: 20px;}
  .hospitality-wrapper .row > div:nth-child(2n) {margin-top: 290px;}

  .card-info.training .card-body{font-size: 13px}

  .nav-fill.mw-785.floor-3rd .nav-item{
    width: 25%;
  }
  .nav-fill.mw-785.floor-3rd .nav-link{line-height: 1;}
}

@media (max-width:991.98px) {
  .card-info.hospitality .swiper-button.single{display: none;}
  .card-info.hospitality .swiper-pagination{
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px
  }
  .card-info.hospitality p{max-width: 100%}
  .card-info.hospitality .card-body{height: 190px; padding-top: 20px}
  .hospitality-wrapper .row > div:nth-child(2n) {margin-top: 220px;}

  .nav-button .nav-item {margin: 0 10px;}
  .nav-tabs.mw-785 .nav-item{width: 33.333%}

  .procedure-training{
    padding-left: 0;
    padding-right: 0;
  }
  .card-info.training{margin: 0 5px;}

  .facility.equipment-details .row .row {margin: 0 -20px;}
  .facility.equipment-details .row .row > div{padding: 0 20px}

  .nav-fill .nav-link{height: 55px;}

  .facility.equipment-details .row > .cols-left .infos img.w-100{max-width: 250px; margin-bottom: 30px;}
}

@media (max-width:767px) {
  .nav-tabs.mw-785 .nav-link{
    line-height: 1;
    font-size: 12px
  }

  .facility.floorplan .target{height: 18vw}
  .facility.floorplan .target .icons{
    width: 20px;
    height: 20px;
    margin-bottom:5px;
  }
  .facility.floorplan{padding: 30px 0}
  .facility.floorplan .target{font-size: 10px}

  .facility.room-details h3{margin-bottom: 15px}
  .facility.room-details h4{font-size: 14px; margin-top:10px}

  .facility.room-details{font-size: 14px}

  .facility.room-360 img.icon{
    margin: 20px auto 0;
    width: 50px
  }

  .facility.room-360{padding-bottom: 40px}
  .facility.equipment-details{padding-top: 30px}

  .facility.equipment-details .row > .cols-left,
  .facility.equipment-details .row > .cols-right{
    padding-left:10px;
    padding-right: 10px;
  }
  .facility.equipment-details .row > .cols-left{padding-bottom:10px}
  .facility.equipment-details .row > .cols-left .infos{width: 100%}
  .facility.equipment-details .row > .cols-left .d-block{margin-left: auto !important;}
  .facility.equipment-details .row > .cols-left .custom-select{font-size: 12px; margin-top: -5px}
  .facility.equipment-details .row{margin: 0 -5px}
  .card-info.equipment{max-width: 100%}

  .facility.equipment-details .row .row {margin: 0 -18px;}
  .facility.equipment-details .row .row > div{padding: 0 12px}

  .nav-button.sm{
    margin: 0 -5px
  }
  .nav-button.sm .nav-item{
    margin: 0 5px !important;
    width:calc(50% - 10px);
  }
  .nav-button.sm .nav-item a{
    height: 40px;
    min-width: 0;
    font-size: 14px;
  }
  .card-info.hospitality{margin-bottom:20px;}
  .card-info.hospitality .card-body{height: auto;}
  .card-info.hospitality .background{height: 50vw}
  .card-info.hospitality h3{font-size: 18px}
  .hospitality-wrapper .row > div:nth-child(2n) {margin-top: 0;}

  .nav-button.xs.w-125{margin: 0 -5px; padding:25px 15px}
  .nav-button.xs.w-125 .nav-item{width: 33.333%; margin: 0; padding:0 5px}
  .nav-button.xs.w-125 .nav-item a{width: 100%; font-size: 12px}

  .procedure-training{
    padding-top:25px;
    margin: 0 -10px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .card-info.training{
    margin: 0 10px;
    width:calc(50% - 20px);
  }
  .card-info.training .card-body{padding-top: 20px}

  .nav-tabs-fixed{margin-top: 40px}

  .nav.menu .checkbox-group label::before {top: 1px}
  .nav.menu .checkbox-group.radio input[type="checkbox"]:checked + label::after {top: 4px}

  .nav-fill.mw-785.floor-3rd .nav-link{
   padding: 0 10px;
  }

  .facility.room-360.no-line .section-title{
    padding: 20px 0;
  }
  .section-title.has-line{border-width: 2px;}

  .facility.equipment-details{font-size: 14px;}

  .facility.room-details .row{margin: 0 -12px}
  .facility.room-details .row > div{padding: 0 12px;}
}

/*==================================================
   Virtual Gallery
==================================================*/ 

.section-virtual-gallery .section-title.top{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.virtual-gallery{
  position: relative;
  padding-left: 15px;
  padding-right: 15px;
}
.virtual-gallery:before{
  content: '';
  position: absolute;
  bottom: 0;
  left: -100vw;
  right:-100vw;
  border-bottom: 1px solid rgba(197,197,197,0.5)
}
.virtual-gallery > .row{
  -ms-flex-pack: justify;
  justify-content: space-between;
  overflow: hidden;
}
.virtual-gallery > .row > div{
  border-left: 0.8px solid rgba(197,197,197,0.5);
  border-right: 0.8px solid rgba(197,197,197,0.5);
  /*width: 270px;*/
  width:calc(24% - 50px);
  padding-top: 230px;
  padding-left: 0;
  padding-right: 0;
}

.virtual-gallery > .row > div:nth-child(2){
  border-right: 0;
  margin-right: 10px;
}

.virtual-gallery > .row > div:nth-child(3){
  border-left: 0;
  margin-left: 10px;
}

.virtual-gallery > .row > div:nth-child(2) .card-body{border-right: 0.8px solid rgba(197,197,197,0.5);}
.virtual-gallery > .row > div:nth-child(3) .card-body{border-left: 0.8px solid rgba(197,197,197,0.5);}

.card-virtual .card-photo{ 
  background-color: #ccc;
}
.card-virtual .card-body{
  height: 125px;
  padding: 30px 0 0 ;
}
.card-virtual h4{
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #171717;
  transition: all 0.30s ease-in-out;
  position: relative;
  top: 0;
}

.fancybox-caption{
  font-size: 24px;
  font-weight:500;
}
.fancybox-caption .icon-360{
  width: 50px;
  height: 50px;
  background-image: url(../img/icons/icon-360.gif);
  display: inline-block;
  margin-right: 15px;
}
.pc .card-virtual:hover h4{top: -12px}

@media (max-width:1680px) {
  .virtual-gallery > .row > div{width:calc(25% - 50px);}
}

@media (max-width:1440px) {
  .section-virtual-gallery .section-title.top{top: 10px}
}
 
 
@media (max-width:1100px) {
  .virtual-gallery > .row > div{width: 20vw;} 
  .virtual-gallery{ padding-left: 0;padding-right: 0 }
}

@media (max-width:991.98px) {
  .virtual-gallery > .row > div{width: 21vw;}
  .virtual-gallery > .row > div:nth-child(2){ 
    margin-right: 0;
    border:0;
  }

  .virtual-gallery > .row > div:nth-child(3){
     margin-left: 0;
     border:0
  }

  .virtual-gallery > .row > div:nth-child(1){border-right:0}
  .virtual-gallery > .row > div:nth-child(4){border-left:0 }

  .virtual-gallery > .row > div:nth-child(1) .card-body,
  .virtual-gallery > .row > div:nth-child(3) .card-body{border-right: 0.8px solid rgba(197,197,197,0.5);}

  .virtual-gallery > .row > div:nth-child(2) .card-body,
  .virtual-gallery > .row > div:nth-child(4) .card-body{border-left: 0.8px solid rgba(197,197,197,0.5);}

  .card-virtual h4{font-size: 14px}
  .card-virtual .card-body{padding-top: 20px; height: 100px}
  
}

@media (max-width:767px) {
  .virtual-gallery > .row{margin: 0 -15px}
  .virtual-gallery > .row > div{
    border:0;
    margin: 0 12px !important;
    width: calc(50% - 24px);
    padding-top:0 
  }
  .card-virtual .card-body{
    border-left: 0.8px solid rgba(197,197,197,0.5);
    border-right: 0.8px solid rgba(197,197,197,0.5);
    height: 80px;
    padding-top: 15px;
  } 
  .virtual-gallery::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100vw;
    right: -100vw;
    border-bottom: 1px solid rgba(197,197,197,0.5);
  }

  .section-virtual-gallery .section-title.top{
    position: relative;
    top: 0;
  }

  .virtual-gallery > .row > div:nth-child(1) .card-virtual{border-bottom: 0.8px solid rgba(197,197,197,0.5);}
  .virtual-gallery > .row > div:nth-child(2) .card-virtual{border-bottom: 0.8px solid rgba(197,197,197,0.5);}

  .fancybox-caption{font-size: 15px}
  .fancybox-caption .icon-360 {
    width:30px;
    height:30px;
    display: block;
    margin: 0 auto 15px
  }
}

/*==================================================
   Becoming T-Tec
==================================================*/
.ttec-location{
  display: block;
  margin: 0 127px;
}
.ttec-location > .row {
  margin: 0;
  position: relative;
}
.ttec-location > .row:before{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-bottom: 0.8px solid rgba(197,197,197,0.5); 
}
.ttec-location .row:nth-child(1):before{
  left: 0;
  right: -100vw;
  
}
.ttec-location .row:nth-child(2):before{
  left:-100vw;
  right: -100vw; 
}
.ttec-location .row .row:before{display: none;}
.ttec-location > .row > div{
  display: flex;
  border-left: 0.8px solid rgba(197,197,197,0.5); 
  padding: 0;
  overflow: hidden;
  position: relative;
}
.ttec-location > .row > div.right-line{
  border-right: 0.8px solid rgba(197,197,197,0.5);
}
.ttec-location .inner{
  display: block;
  padding: 60px;
  margin: auto;
}
.ttec-location .inner.facility{
  padding: 60px 30px;
  margin-left: 0
}
.ttec-location .title-md{
  margin-bottom: 20px
}
.ttec-location p{
  max-width: 450px
}

.ttec-location .img-map{
  width: 100%; 
  margin: 80px auto 60px;
}

.ttec-location .card{
  margin: 50px 0 20px
}

.ttec-location .card .card-photo{ 
  background-color: #ccc
}
.ttec-location .card h5{
  font-size: 15px;
  font-weight: normal;
  text-align: center;
  padding-top:20px;
  color: #000;
}

.table th{
  background-color: var(--blue);
  color: #fff;
  text-align: center;
  padding: 15px ;
  font-weight: 500;
}
.table td {
  padding: 15px;
  line-height: 1.4;
  border-left: 1px solid #dee2e6;
}
.ttec-location .table td {height:85px }
.ttec-location .table td span{
  display: inline-block;
  max-width: 270px;
  padding-top: 5px;
}
.ttec-location .table td:nth-child(2){color: var(--blue)}

@media (max-width:1900px) {
  .ttec-location{
    display: block;
    margin: 0 110px;
  }
}
@media (max-width:1440px) {
  .ttec-location{margin: 0 110px;}
  .ttec-location .img-map{margin: 50px auto 40px} 

}

@media (max-width:1280px) {
  .ttec-location{margin: 0 0px;}
  .ttec-location .inner{
    padding: 30px
  }
  .ttec-location .card{margin-top: 30px}
}

@media (max-width:991.98px) {
  .section-becoming .container{
    padding-left:0;
    padding-right:0;
  }

  .ttec-location .title-md{
    font-size: 18px;
    margin-bottom: 10px
  }
  .ttec-location p{
    font-size: 14px;
    line-height: 1.3
  }

  .ttec-location .table td span{
    padding-top: 0;
    font-size: 13px
  }

  .ttec-location .card{ margin-bottom: 0 }
  .ttec-location .card h5{padding-top: 15px} 
  .ttec-location .inner.facility{padding: 40px 30px}
}

@media (max-width:767px) {
  .ttec-location .inner {
    padding:35px 25px 30px;
  }
  .ttec-location .card{margin-top: 25px; margin-bottom: 10px}
  .ttec-location .card h5{font-size: 14px; padding-top:10px; } 
}
 

/*==================================================
   Section column
==================================================*/ 

.section-column.pt-5{padding-top: 80px !important}
.section-column .container{
  display: flex;
}
@media (min-width:1680px) {
  .section-column .container{
    max-width: calc(100% - 100px)
  }
}

.section-column .container:before{
  content: '';
  position: absolute;
  top: 0;
  left: -100vw;
  right: -100vw;
  border-top:1px solid rgba(197,197,197,0.5)
}
.section-column.lt-0 .container:before{display: none;}
.sidebar .inner{
  display: block;
  width: 295px;
  color: #393939
}
.sidebar .hgroup{
  display: block;
  padding: 60px 20px 40px 30px;
  position: relative;
}

.sidebar .hgroup.no-line:before{display: none;}
.sidebar h3{
  font-size: 23px;
  color: #000000;
  margin-bottom: 10px;
  line-height: 1.2
}
.sidebar h2{
  font-size: 38px;
  font-weight: 600;
  line-height: 1.2
}
.sidebar .goback{
  display: flex;
  position: relative;
  font-size: 11px;
  font-weight: 300;
  color:inherit;
}
.sidebar .goback .arrow{
  display: block;
  width: 0; 
  height: 0; 
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent; 
  border-right:9px solid #393939;

  margin:4px 10px 0 0;

  position: relative;
  left:0;
  transition: all 0.2s ease-in-out;
}
.pc .sidebar .goback:hover{
  color: var(--blue)
}
.pc .sidebar .goback:hover .arrow{
  left: -5px;
  border-right:9px solid var(--blue);
}
.sidebar .navside{
  display: block;
  position: relative;
  padding: 30px 15px;
  border-left: 1px solid rgba(197,197,197,0.5);
}
.sidebar .navside:last-child{
  border-bottom: 1px solid rgba(197,197,197,0.5);
}
.sidebar .navside:before{
  content: '';
  position: absolute;
  right: 0;
  left: -100vw;
  top: 0;
  border-top: 1px solid rgba(197,197,197,0.5);
}
.sidebar .navside h3{
  padding:0 15px;
  margin-bottom: 30px;
}
.sidebar .navside h3{}
.sidebar .navside{
  display: block;
  position: relative;
}
.sidebar .navside.no-line{
  border:0;
}
.sidebar .nav{
  margin-top: -3px
}
.sidebar .nav li{
  width: 100%;
  margin: 2px 0
}
.sidebar .nav li a,
.sidebar .nav li > span{
  font-size: 16px;
  display: flex;
  height: 52px;
  border-radius: 10px;
  padding: 0 15px;
  font-weight: 300;
  position: relative;
  width: 100%;
}
.sidebar .nav li a:before{
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;

  width: 14px;
  height: 14px;
  margin: -6px 0 0 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(../img/icons/icon-arrow-more.svg);
}
.sidebar .nav li a span{
  margin: auto 0;
}

.sidebar .nav li > span{color: var(--blue)}

.sidebar .nav li.active a,
.pc .sidebar .nav li:hover a{
  background-color: #EDEDED;
  color: var(--blue);
}
.sidebar .nav li.active a{
  font-weight: 400;
}

.sidebar .nav.links li a{
  color: var(--blue);
  background-color: transparent !important;
  padding-right: 35px
}
.sidebar .nav.links li a:before{
  right: 2px;
  top: 14px;
}

.sidebar .navside div.links{
  display: block;
  padding:0 15px;
  margin-top: -10px;
}
.sidebar .navside div.links a{
  color:#4E88D7;
  line-height: 1.4;
  display: block;
  padding: 10px 0;

  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.pc .sidebar .navside div.links a:hover{
  color:var(--blue)
}
.sidebar .navside div.links .btn-booking{
  margin: 10px 0;
  font-size: 18px; 
  height: 55px;
  line-height: 53px;
  width: 100%;
}
.sidebar .navside div.links .btn-booking .icons{
  width: 25px;
  height: 25px;
  margin-right: 10px;
  background-image: url(../img/icons/icon-bookmark.svg);
}
.section-column .content{
  width: calc(100% - 295px);
  border-left: 1px solid rgba(197,197,197,0.5);
  padding: 60px 50px 50px 70px;
}
.section-column .content .article.pl{padding-left: 3rem}
.section-column .content .article.pr{padding-right:5rem}
.sidebar .bluebox{
  background-color: var(--blue);
  padding:20px 25px;
  margin-top:15px;
  margin-left: 15px;
  border-radius: 32px;
  display: block;
  max-width: 200px;
  color: #fff;
}
.sidebar .bluebox h6{
  font-size: 15px;
  margin-bottom: 5px
}
.sidebar .bluebox .nav{
  flex-direction: column;
  font-weight: 300;
  line-height: 1.1
}
.sidebar .bluebox .nav li{
  padding-bottom: 4px;
  padding-left: 15px;
  position: relative;
}
.sidebar .bluebox .nav li:before{
  content: '-';
  position: absolute;
  top: 0;
  left: 0;
}

@media (min-width:1680px) {
  .sidebar .inner{width: 340px;}
  .section-column .content{width: calc(100% - 340px);}
  .sidebar .bluebox{max-width: 230px}
}

.article{
  display: block;
  color: #1B1B1B;
  font-weight: 300;
}
.article h2{
  font-size: 28px;
  font-weight:600;
  color: inherit;
  margin-bottom: 25px;
  margin-top: 40px;
}
.article h3{
  font-size: 23px; 
  color: inherit;
  margin-bottom: 25px;
  margin-top: 40px;
}
.article h4{
  font-size: 20px;
  margin-bottom:25px;
   margin-top: 40px;
   font-weight:600;
}
.article h6{
  font-size: 16px;
  margin-bottom:25px;
   margin-top: 40px;
   font-weight:300;
}
.article h4 + img,
.article div + img{margin-top: 15px}
.article h4 + ol{margin-top: -5px}
.article img + h4{margin-top:0px}
.article h6{
  font-size: 16px;  
  margin-bottom: 5px;
  margin-top: 20px;
}
.article ul{
  padding-left: 0;
}
.article ul li{
  position: relative;
  padding-left:20px;
  margin: 3px 0;
  list-style-type: none;
}
.article ul li:before{
  content: '';
  position: absolute;
  top: 11px;
  left: 0;
  width: 5px;
  height: 1px;
  background-color: #000;
}

.article ol{
  padding-left: 17px;
}
.article ol li{
  margin:5px 0
}

.article img{width: 100%; margin-bottom: 40px}
.article img + .hr{margin-top: 0}

.article .download-box{
  display: block;
  position: relative;
  background-color: #ffffff;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  max-width: 490px;
  transition: all 0.2s ease-in-out;
  margin-bottom: 50px;
  border-radius: 5px;
}
.article .download-box > a{
  display:flex;
  color: inherit;
}
.article .download-box .icons{
  width: 82px;
  height: 82px;
  background-color: #000;
  flex-shrink: 0;
  border-radius: 5px 0 0 5px;
  background-size: 40px;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(../img/icons/icon-document.png);
}
.article .download-box .icons.download{
  background-image: url(../img/icons/icon-download.svg);
}

.article .download-box .group {
  display: block; 
  margin: auto;
  margin-left:20px;
}
.article .download-box h4{
  margin: 0;
  font-size: 15px;
  font-weight: 400;
}
.article .download-box p{
  margin: 0;
  font-size: 12px;
}

.pc .article .download-box:hover{
  background-color:#061534;
  color: #fff
}

.study-statistic{
  display: block;
  padding-top: 20px;
  padding-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.study-statistic .row{
  margin: 0 -5px;
} 
.study-statistic .row > div{
  padding: 0;
  position: relative;
} 
.study-statistic .row > div:before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 40px;
  border-left: 1px solid #000000;
}
.study-statistic .statistic{
  display: block;
  text-align: center;
  border-top: 1px solid #000000;
  padding: 30px 0;
  position: relative;
}
.study-statistic .statistic .number{
  font-size: 62px;
  font-weight: 600;
  color: var(--blue);
  position: relative;
  overflow: hidden;
}
.study-statistic .statistic .number span{display: block;}
.study-statistic .statistic p{
  font-size: 17px;
  font-weight: 600;
}

@media (max-width:1440px) {
  .sidebar h3{font-size: 20px}
  .article h2{font-size: 22px; margin-bottom: 20px}

  .section-column .content{padding-top: 60px} 

  .section-column .content .article.pl{padding-left: 1.5rem}
  .section-column .content .article.pr{padding-right:4rem}

  .study-statistic .statistic .number{font-size: 55px}
}

@media (max-width:1280px) {
  .section-column .content .article.pr{padding-right:0}

  .section-column .content{
    padding-left: 50px;
  }
}

@media (max-width:1199px) {
  .sidebar .hgroup{padding-top: 50px}
  .section-column .content {
    padding:50px 0 50px 50px;
    width: calc(100% - 260px);
  }
  .sidebar .inner{width: 260px}
  .sidebar h3{font-size: 18px}
  .sidebar .navside h3{margin-bottom: 25px}
  .sidebar .nav li a{
    font-size: 14px;
    height: 48px
  }

  .study-statistic .statistic .number{font-size: 45px}
  .study-statistic .statistic p{font-size: 15px}

  .sidebar .navside div.links .btn-booking{
    font-size: 16px;
    padding: 0;
    height: 50px;
    line-height: 48px;
  }
  .sidebar .navside div.links .btn-booking .icons {
    width: 18px;
    height: 18px;
    margin-right: 5px
  }

  .article img{margin-bottom: 30px}

  .section-column .content .article.pl{padding-left:0} 
}

@media (max-width:1024px) {
  .article h2{
    font-size: 18px;
    margin-top: 30px; 
    margin-bottom: 10px
  }

  .section-column .container{
    padding-left: 0;
    padding-right: 0;
  }
  .section-column .content{
    padding: 40px 30px;
    width: calc(100% - 240px);
  }
  .sidebar .hgroup { 
    padding: 40px 20px 40px 30px;
  }
  .sidebar .navside{border-left: 0}
  .sidebar .inner{width: 240px}
  .sidebar .nav li a{
    font-size: 12px;
    height: 45px;
  }

  .study-statistic .statistic .number{font-size: 35px}
  .study-statistic .statistic p{font-size: 13px}

  .article .download-box{margin: 30px 0 !important}
}

@media (max-width:991.98px) {
  .section-column .content.w-md-auto{
    width: 100% !important;
  }
}

@media (max-width:767px) {
  .section-column .container{
    display:block;
  }
  .section-column .content,
  .section-column .sidebar .inner{
    width: 100%
  }
  
  .section-column .content{
    padding-top: 25px;
    padding-left: 25px;
    padding-right: 25px
  }
  .sidebar .hgroup{
    padding: 25px 25px 25px;
  }
  .sidebar h2{ font-size: 30px; line-height: 1}
  .sidebar h3{font-size: 16px}
  .sidebar h3 br{display: none;}
  .sidebar .navside h3{margin-top: 5px}


  .sidebar .navside{
    padding: 20px 15px
  }
  .sidebar .navside h3{
    margin-bottom:15px
  }
  .sidebar .navside h3 br{display: none;}
  .sidebar .nav li{margin:0 }
  .sidebar .nav li a{
    height: 40px;
    font-size: 13px;
    border-radius: 5px
  }
  .article h2{font-size: 16px}
  .article a[data-fancybox] + .hr{margin-top: 0}

  .study-statistic{padding-top: 10px}
  .study-statistic .statistic{padding: 20px 0}

  .sidebar .navside div.links .btn-booking{margin-top: 20px}
}


/*==================================================
   Organization chart
==================================================*/ 
.organization-chart{
  margin: 0 0px;
  display: block;
}
.organization-chart .row > div{display: flex; flex-direction: column;}
.card-organization{ 
  margin: 30px auto;
  display: flex;
  -ms-flex-align: center;
align-items: center;
}
.card-organization .card-photo{
  width: 88px;
  height: 88px;
  background-color: var(--blue);
  padding: 2px;
  border-radius: 50%;
}
.card-organization .card-photo .photo{
  border-radius: 50%;
  
  background-size: 110%
}

.card-organization .card-body{
  display: flex;
  height: 86px;
  padding: 10px 20px;
  margin-left: 15px;
  border-radius: 20px;
  background-color:#004AAD;
  color: #fff;
  /*width:calc( 100% - 103px); */
  width: 340px;
}


.card-organization .card-body .inner{
  margin: auto 0;
  width: 100%;
}
.card-organization h3{
  font-size: 17px;
  line-height: 1.2
}
.card-organization p{
  font-size: 14px;
  font-weight: 300;
  margin-bottom: 0
}
.card-organization.level1{
  width: 275px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  flex-direction: column;
}
.card-organization.level1 .card-photo{
  width: 152px;
  height: 152px;
  margin-bottom: 10px;
}
.card-organization.level1 .card-body{
  width: 100%;
  margin: 15px 0 0;
  background-color: #08107B
}
.card-organization.level1 .card-body .inner{
  width: 100%;
}
.card-organization.level2{
  width: 520px; 
  margin: 60px auto
}
.card-organization.level2 .card-photo{
  width: 123px;
  height: 123px;
}
.card-organization.level2 .card-photo .photo{
  width: 100%;
  height: 100%;
}
.card-organization.level2 .card-body{
  margin-left: 30px;
  margin-right: 20px;
  background-color: #08107B
}

.card-organization.level4 .card-body{background-color: #436FD2}
.card-organization.level5 .card-body{background-color: #7280C9}

.card-organization.w-100 .card-body{
  max-width:440px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

@media (max-width:1440px) {
  .organization-chart{
    margin: 0 -40px
  }
  .card-organization{margin: 25px 0}
  .card-organization h3{
    font-size: 15px
  }
  .card-organization p{
    font-size: 13px
  }
  .card-organization .card-body{
    width: 255px
  }
  .card-organization.w-100{
    max-width:378px
  }
  .card-organization.level2{width: 450px}
  .card-organization.w-100 .card-body{max-width: 378px}
}
@media (max-width:1280px) {
  .card-organization.w-100{}
  .card-organization.w-100 .card-body{
    margin-left:auto;
    margin-right: auto; 
  }

  .card-organization .card-photo{
    width:75px;
    height:75px
  }
}

@media (max-width:1199px) {
  .nav-button .nav-item{margin: 0 10px;}
  .nav-button.lg .nav-item a{
    height: 80px; 
    font-size: 16px;
  }
  .organization-chart{
    margin: 0px
  }
  .card-organization.w-100 .card-body{
    margin: 0
  }

  .card-organization{
    padding: 0;
    flex-direction: column; 
    max-width: 290px;
    width: 100%;
  }
  .card-organization .card-photo{
    margin-bottom: 15px
  }

  .card-organization.w-100 { 
    width: 100%;
    max-width:295px;
    flex-direction: row; 
    margin-top: 151px;
  }
  .card-organization {
    margin:30px auto;
    padding: 0 10px
  }
  .card-organization h3{margin-bottom: 3px}
  .card-organization h3 br{display: none;}
  .card-organization .card-photo {
    width:105px;
    height:105px;
  }
  .card-organization .card-body{
    width: 100%;
    height:85px;
    margin: 0;
    text-align: center;
  }
}

@media (max-width:991.98px) {
  .nav-button.organization .nav-item{width:calc( 33.333% - 30px)}
  .nav-button.organization .nav-item a{ min-width: 0; width: 100%; height:65px }
  .organization-chart{
    margin-top: 40px;
  }
  .card-organization{
    padding: 0;
  }

  .card-organization .card-body{ 
    height:80px;
    padding: 0 10px;
  }
  .card-organization h3{font-size: 14px;}
  .card-organization p{font-size: 12px; line-height: 1}

  .card-organization.level1 h3,
  .card-organization.level2 h3{font-size: 15px;}

  .card-organization.level2{
    margin: 40px auto
  }

  .card-organization.level1 .card-body{margin-top: 0}
}

@media (max-width:767px) {
  .card-organization,
  .card-organization.level2{
    margin: 20px auto
  }
  .card-organization.w-100{
    height: auto;
    margin:20px auto 20px;
  }
  .card-organization .card-body{height: 72px}
  .nav-button.lg{margin: 0 -15px; padding:25px 35px}
  .nav-button.lg .nav-item{
    width: 50%;
    margin: 0;
    line-height: 1.2;
    padding: 0 5px;
  } 
  .nav-button.lg .nav-item a{
    font-size: 13px;
    height:50px;
    min-width: 0;
    width: 100%;
    text-align: center;
  }
  .nav-button.organization {
    padding-left:15px;
    padding-right: 15px;
  }
  .nav-button.organization .nav-item{width:calc(33.33% - 5px)}
}
@media (max-width:576px) {
  .nav-button.lg .nav-item a{
    font-size: 11px;
    padding-left: 5px;
    padding-right: 5px;
  }
}
/*==================================================
   News
==================================================*/

.news-filter{
  display: flex;
  margin:0; 
  -ms-flex-align: end;
align-items: flex-end;
  position: relative;
}
.news-filter .cols:nth-child(1){
  margin-left: auto;
}
.news-filter .cols:nth-child(2){
  display: block;
  margin-left: 0;
}
.news-filter h4{
  color: #000000;
  margin-bottom:25px 
}

.nav-category{
  margin: 0 -15px;
}
.nav-category > li{
  margin:0 15px;
}
.nav-category > li > a {
  display: block;
  font-size: 14px;
  border-radius: 10px;
  border:1px solid rgba(172,172,172,0.5); 
  height: 35px;
  line-height: 33px;
  padding: 0 15px;
  min-width: 120px;
  text-align: center;
  color: #747474;
}
.nav-category > li.active > a,
.nav-category > li > a:hover {
  background-color: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.search-group{
  display: flex;
  position: relative;
}
.search-group .form-group::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 12px;
  width: 15px;
  height: 15px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../img/icons/icon-search.svg);
}
.search-group .form-group{
  margin-bottom: 0;
  position: relative;
}
.search-group .form-control{
  height: 34px;
  line-height: 32px;
  padding-left: 35px;
  border:1px solid rgba(172,172,172,0.5);
  background-color: transparent;
  border-radius: 13px;
  font-size: 14px;
  color:#000000;
  width: 270px;
}
.search-group .btn{
  background-color:#232323;
  border-radius: 13px;
  width:99px;
  height: 34px;
  line-height: 32px;
  margin-left: 15px;
}

.section-news{
  padding-top: 50px;
  padding-bottom: 30px
}
.section-news.has-line{
  border-top: 1px solid rgba(197,197,197,0.5);
}

.blog-list{ 
  padding-top:45px; 
}
.blog-list .card-blog{
  max-width: 100%;
  margin-right: 0;
}

.section-news .container{
  margin-left:70px;
  margin-right: 70px;
  max-width: calc(100% - 140px)
}

.section-news.has-bg{
  background-color: #F4F5F7;
}

.article-share,
.article-share > div{
  display: flex;
}
 
.article-share > div{
  margin-right: -10px;
}
.pc .article-share a:hover{
  opacity: 0.7
}
.article-share .icon{
  width: 20px;
  height: 20px;
  margin: 0 10px;
}

.news-list {margin-top: 20px;}
.news-list .row{margin: 0 -50px}
.news-list .row > div{padding: 0 50px}

.news-list .btn-loadmore{
  font-size: 14px;
  color: #747474;
  height: 35px;
  line-height: 33px;
  background-color: #fff;
  border-radius: 10px;
  border:1px solid #ACACAC;
  padding: 0 20px;
  margin-bottom:20px;
}

.card-news{
  font-size: 14px;
  margin-bottom:40px
}
.card-news .card-photo{
  /*height:210px;*/
  background-color: #ccc
}
.card-news .card-photo:before{pointer-events: none;}
.pc .card-news:hover .card-photo:before{opacity: 1}
.card-news .card-photo.blue:before{display: none;}
.card-news .card-photo.blue .photo{
  transition: all 0.35s ease-in-out;
}
.card-news .card-photo.blue .photo:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 64, 152, 0.72) 18.92%, rgba(136, 166, 207, 0.46778) 65.8%, rgba(255, 255, 255, 0) 100%);
  opacity: 1;
}
.pc .card-news:hover .card-photo.blue .photo{
  -webkit-transform: scale(1.15);
    -moz-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
}
.card-news .card-photo .photo{
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 10
}
.card-news .card-body{
  padding:20px 0; 
}
.card-news .card-photo .code{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  font-size: 26px;
  font-weight: 500;
  color: #fff;
  z-index: 10;
}
.card-news h4,
.card-news h3{
  font-size: inherit;
  font-weight:600;
  margin-bottom: 10px;
  height: 40px;
  overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.card-news h3{
  font-size: 18px; 
  height: 48px;
  margin-bottom: 10px;
}
.card-news .readmore{
  display: block;
  position: relative;
}
.card-news .readmore a{
  display: flex;
  position: relative;
  font-size: inherit;
  font-weight: 300;
  
}
.card-news .readmore:before{
  content: '';
  position: absolute;
  top: 50%;
  left: 80px;
  right: 80px;
  border-bottom: 1px solid rgba(132,132,132,0.7);
  transition: all 0.2s ease-in-out;
} 
.card-news .readmore a > span{
  margin-top: auto;
  margin-bottom:auto; 
}
.card-news .readmore .icons{
  width: 31px;
  height: 31px;
  background-color: rgba(41,41,41,0.2);
  border-radius: 50%;
  margin-left: auto;
}
.card-news .readmore .icons:before,
.card-news .readmore .icons:after{
  background-size: 16px;
}
.card-news .readmore .icons:before{background-image: url(../img/icons/icon-arrow-more-g.svg);}
.card-news .readmore .icons:after{background-image: url(../img/icons/icon-arrow-more-w.svg);}

.card-news .readmore.column{
  margin-left: auto;
}
.card-news .readmore.column a{
  flex-direction: column;
}
.card-news .readmore.column:before{display: none;}
.card-news .readmore.column .icons{
  width: 50px;
  height: 50px;
  margin-top: 40px
}
.card-news .readmore.column .icons::before, 
.card-news .readmore.column .icons::after {
    background-size: 20px;
}

.card-news.menulist .card-body{
  padding-top: 30px;
  line-height: 1.4
}
.card-news.menulist .card-body > div:first-child{
  max-width: 220px
}

@media (min-width:768px) {
  .col-12 .card-news.menulist {
    flex-direction: row;
  }
  .col-12 .card-news.menulist .card-photo{width: 65%}
  .col-12 .card-news.menulist .card-body{
    width: 35%;
    flex-direction: column;
  }
  .col-12  .card-news.menulist .card-body > div{
    width: 100%;
    max-width: 250px; 
    margin-left: auto; 
    margin-right: auto;
  }
  .col-12 .card-news.menulist .card-body .readmore{
    margin: 20px auto auto;
  }
  .col-12 .card-news.menulist .card-body .readmore a{
    flex-direction: row;
  }
  .col-12 .card-news.menulist .card-body .readmore .icons{
    margin-top: auto; 
    margin-bottom: auto;
    margin-right:auto;
    margin-left: 30px
  }

  .col-12 .card-news.menulist .card-body > div:first-child{margin-top: auto;}
}
.card-news .numboxs{
  display:flex;
  font-size:13px;
}
.card-news .numboxs span + span{
  font-weight:600;
  font-size: 14px;
  margin-left: auto;
}
.card-news .category{
  display: flex;
  margin: 15px 0 30px;
  color: #004098
}

.card-news .category .icons{
  width:20px;
  height: 18px;
  margin-right:5px
}
.card-news.improvement .category{color: #008F98}
.card-news.events .category{color: #853FCB}

.card-news.general .category .icons{background-image: url(../img/icons/icon-newspaper.svg);}
.card-news.improvement .category .icons{background-image: url(../img/icons/icon-map.svg);}
.card-news.events .category .icons{background-image: url(../img/icons/icon-calendar.svg);}

.pc .card-news.general:hover .readmore .icons{background-color: var(--blue)}
.pc .card-news.general:hover .readmore::before {border-bottom-color: var(--blue)}
.pc .card-news.general:hover .readmore a{color: var(--blue)}

.pc .card-news.improvement:hover .readmore .icons{background-color:#008F98}
.pc .card-news.improvement:hover .readmore::before {border-bottom-color:#008F98}
.pc .card-news.improvement:hover .readmore a{color: #008F98}

.pc .card-news.events:hover .readmore .icons{background-color:#853FCB}
.pc .card-news.events:hover .readmore::before {border-bottom-color:#853FCB}
.pc .card-news.events:hover .readmore a{color: #853FCB}

.pc .card-news:hover .readmore .icons:before{opacity: 0}
.pc .card-news:hover .readmore .icons:after{opacity: 1}

.section-column.news{padding-top: 80px}
 

@media (min-width:1680px) { 
  .section-column.news .content{ padding-left: 70px }
}
.news-header{
  display: flex;
  padding: 0px 0 30px;
  position: relative;
  -ms-flex-align: center;
  align-items: center;
}
.news-header .title-xs{
  font-weight: 400;
}

.news-header .morebar{
  display: flex;
  width: 400px;
  position: relative;
  -ms-flex-align: center;
  align-items: center;
}
.news-header .morebar:before {
  content: '';
  position: absolute;
  top: 50%;
  left:145px;
  right:135px;
  border-bottom: 1px solid rgba(132,132,132,0.7);
  transition: all 0.2s ease-in-out;
}

.news-header .morebar p{
  margin: 0;
  font-weight: 300;
}
.news-header .morebar .btn{
  color: #5E5E5E;
  margin-left: auto;
}
.pc .news-header .morebar .btn:hover{
  color: #fff;
}

ul.star{
  display: flex;
  padding: 0;
  margin: 0 -5px;
  list-style-type: none;
}
ul.star li{
  margin: 0 5px;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(../img/icons/icon-star.png);
}

ul.star li:before{display: none;}



@media (max-width:1440px) {
  .news-list .row{margin: 0 -40px}
  .news-list .row > div {padding: 0 40px;}

  .article-share{margin-top: -5px;}
}

@media (max-width:1199px) {
  .nav-category{margin: 0 -5px;}
  .nav-category > li{margin:0 5px}
  .nav-category > li > a{min-width: 100px}

  .news-filter h4{margin-bottom:15px}
  .search-group .form-control{width: 230px}
  .search-group .btn{margin-left: 10px;}

  .news-list{margin-top:5px }

  .article-share{margin-top:5px;}

    .section-news .container{
      margin-left:30px;
      margin-right: 30px;
      max-width: calc(100% - 60px)
    }

}

@media (max-width:1024px) {
  .news-list .row{margin: 0 -20px}
  .news-list .row > div {padding: 0 20px;}

  .article h4{
    font-size: 16px;
    margin-bottom: 20px;
    margin-top: 30px;
  }
  .article h3{
    font-size: 20px;
    margin-bottom: 20px;
    margin-top: 30px;
  }

  .article h4 + img{margin-top: 10px}
  .article img + h4{margin-top: 0}

  .card-news .card-photo{/*height: 175px*/}
  .section-news .container{
      margin-left:0;
      margin-right: 0;
      max-width: 100%
    }

    .card-blog .card-body p, .card-blog-main .card-body p{-webkit-line-clamp: 2;}
}

@media (max-width:991.98px) {
  .section-news{padding-top:30px}
  .filter-header{
    display: block;
  }
  .filter-header .cols{
    width: 100%
  }
  .news-filter {display: block;}
  .news-filter .cols:nth-child(1){
    display: flex;
    margin:0 0 25px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(172,172,172,0.5);
  }

  .search-group{margin-left: auto;}
  .news-filter h4{margin-top: auto; margin-bottom:auto; }
  .nav-category > li{width:calc( 25% - 10px);}

  .news-list{margin-top:20px }
  .news-list .row{margin: 0 -15px}
  .news-list .row > div {padding: 0 15px;}
  .news-list .buttons{padding-top: 20px}
  .card-news .card-body{padding-bottom: 10px; padding-top: 15px}
  .card-news .card-body p:last-child{margin-bottom: 0}
  .news-header{padding-bottom: 10px}
  .card-news .card-photo{/*height: 130px*/}

  .card-blog.h-auto .card-photo{height: auto; width: 19vw}
  .card-blog.h-auto .card-photo img{display: none;}
  .card-blog.h-auto .card-body{width: calc(100% - 225px); }

  .article h3{
    font-size:18px; 
  }

  .col-12 .card-news.menulist .card-photo{width: 55%}
  .col-12 .card-news.menulist .card-body{width: 45%}

}

@media (max-width:767px) {
  .section-news{padding-top:10px; padding-bottom: 10px}
  .news-filter .cols:nth-child(1){
    display: block;
    margin-bottom:20px;
    padding-bottom: 26px;
  }
  .search-group .form-group{
    width: calc(100% - 95px);
    margin-top: 15px;
  }
  .search-group .form-control{width: 100%}
  .search-group .btn{width: 85px; padding:0; margin-top: auto;}

  .nav-category > li {
    width: calc( 50% - 10px);
    margin: 5px
  }

  .blog-list{padding-top: 25px}

  .news-list .buttons{padding-top: 0}
  .card-news{margin-bottom:25px }

  .sidebar .hgroup.no-line{border-bottom: 1px solid rgba(197,197,197,0.5);}
  .sidebar .hgroup.no-line::before{display: block;}

  .article-share{
    position: absolute;
    top: 25px;
    right: 25px
  }

  .article-share + h4{margin-top:-5px }

  .article-share .icon{margin: 0 5px}
  .article-share > div{margin-right: -3px}

  .card-news .card-photo{/*height: 30vw*/}

  .news-header{
    flex-direction: column;
    padding-top: 20px;
  }
  .news-header .morebar{
    width: 100vw;
    padding: 0 25px
  }
  .news-header .morebar:before {
    left: 160px;
    right: 137px;
  }
  .news-header .morebar .btn{
    padding: 0 10px;
    height: 35px;
    line-height: 33px
  }
  .news-header .title-xs{
    margin-bottom:10px 
  }

  ul.star li{
    margin: 0 2px;
    width: 18px;
    height: 18px;
   }

   .col-12 .card-news.menulist .card-photo,
   .col-12 .card-news.menulist .card-body{width: 100%}

   .card-news h3{font-size: 16px; height: 42px}
   .card-news.menulist .card-body{padding-top: 20px}

   .card-blog.h-auto .card-photo{width: 100%; height: 55vw} 
  .card-blog.h-auto .card-body{width: 100%}
}


@media (max-width:576px) {
  .card-news .card-photo{height:50vw}
  .card-news h4{height: auto;}
}

/*==================================================
    Account Setting
==================================================*/ 

.section-setting{
  
}
.section-setting .container-inner{
  display: flex; 
  padding: 20px 20px 0;
  padding-top: 100px;
  background-color: #F4F5F7;
  min-height: 100vh
}

.setting-sidebar{
  padding-right: 20px;
}

.setting-content{
  background-color: #ffffff;
  border-radius: 10px;
  width: calc(100% - 224px); 
  padding: 30px 25px;
}

.nav-setting{
  display: flex;
  flex-direction: column;
  background-color: #ffffff; 
  border-radius: 10px;
  width: 224px;
  height: 100%;
  padding-top: 20px;
}


@media (min-width:1680px) {
  .setting-content{
    width: calc(100% - 300px); 
    padding-left: 50px;
    padding-right: 50px;
  }
  .nav-setting{width: 300px;}
}

.nav-setting li a{
  display: flex;
  padding: 12px 0 12px 28px;
  font-size: 13px; 
  position: relative;
  overflow: hidden;
}
 
.nav-setting li a:before{
  content: '';
  position: absolute;
  left: 0px;
  top: 3px;
  bottom: 3px;
  width: 4px;
  background-color: var(--blue);
  transition: all 0.2s ease-in-out;
  opacity: 0;
}
.nav-setting li a svg,
.nav-setting li a img{
  margin-right: 14px;
  margin-top: auto;
  margin-bottom:auto; 
}
.nav-setting li.active a svg path,
.pc .nav-setting li:hover a svg path{
  fill: var(--blue);
}
.nav-setting li.logout{
  margin-top: auto; 
  margin-bottom: 25px;
}
.nav-setting li.logout a{ 
  color:#FF2222
}
.nav-setting li.active a,
.pc .nav-setting li:hover a{color: var(--blue)}

.nav-setting li.active a:after,
.nav-setting li.active a:before,
.pc .nav-setting li:hover a:after,
.pc .nav-setting li:hover a:before{opacity: 1}

.nav-setting li a span{
  display: block;
  position: relative;
  z-index: 9;
}

.setting-content .hgroup{
 -ms-flex-align: center;
  align-items: center;
}
.setting-content .hgroup h2{
  font-size: 20px;
  font-weight: 400;
  margin-bottom:5px
}
.setting-content .hgroup h2 a{
  color: #8D8D8D
}
.setting-content .hgroup h2 a.active{
  color: var(--blue)
}

.setting-content .hgroup p{ 
  font-size: 12px;
  font-weight:300;
  color:#343434
}
.setting-content .hgroup p.history{margin-left: auto; margin-bottom: 0}

.setting-content .link-green{color: #44F09E; text-decoration: underline;}
.pc .setting-content .link-green:hover{opacity: 0.8}

.setting-content .buttons{
  text-align: right;
  padding-top: 40px;
  margin: 0 -5px
}

.setting-content .link-red{
  color: var(--red);
  text-decoration: underline;
}
.pc .setting-content .link-red:hover{
  color: var(--blue);
}

.setting-content .buttons .btn{
  margin: 0 5px
}

.avatar-upload-box{
  display: flex;
  margin: 30px 0;
}
.avatar-upload-box .btn-add{
  height: 30px; 
  line-height: 28px;
  border-radius: 50px;
  background-color: transparent;
  margin: auto;
  margin-right: 0;
  padding: 0 15px 0 8px;
  color: var(--blue)
}
.avatar-upload-box .btn-add svg,
.avatar-upload-box .btn-add img{
  width: 16px;
  height: 16px;
  margin: -2px 5px 0 0;
}
.pc .avatar-upload-box .btn-add:hover svg path{fill: #ffffff}
.user-avatar-upload {
  display: block;
  width: 101px;
  height: 101px;
  margin: 30px auto;
  border-radius: 50%; 
  cursor: pointer;
  position: relative;
  background-position: center center;
  background-size:cover;
  background-repeat: no-repeat; 
  background-color: #ccc;
}

.account-setting .user-avatar-upload{
  margin: 0;
}

.account-setting .table-responsive{
  margin: 0 -25px;
  width: auto;
  display: block;
}
.table-profile{
  width: 100%;
  margin: 0
}
.table-profile th,
.table-profile td{ 
  font-size: 14px;
  border-bottom: 1px solid rgba(236,236,236,1);
  padding: 13px 0;
  font-weight: 400
}
.table-profile th{
  color: #101010;
  width: 40%;
  padding-left:35px;
}
.table-profile td{
  font-weight: 600;
  padding-right:35px;
  text-align: right;
}

.table-profile tr.line-t th,
.table-profile tr.line-t td{  
  border-top: 1px solid rgba(236,236,236,1);
}
.table-profile tr.line-b th,
.table-profile tr.line-b td{  
  border-bottom: 1px solid rgba(236,236,236,1);
}
.table-profile tr.has-input th,
.table-profile tr.has-input td{
  padding-top: 8px;
  padding-bottom: 8px
}

.table-profile tr td a.has-arrow{
  position: relative;
  display: inherit;
  padding-right:22px;
  width: auto;
  float: right;
}
.table-profile tr td a.has-arrow:before{
  content: '';
  position: absolute;
  top: 3px;
  right: 0;
  bottom: 0;

  width:9px;
  height: 16px;
  background-image: url(../img/icons/icon-arrow-right.svg);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat; 
}
.table-profile .custom-select{
  font-size: inherit;
  float: right;
  height: 33px;
  line-height: 31px;
  width: auto;
  font-weight: 400;
  margin-right: -12px
}

.line-thick{
  display: block;
  height:20px;
  margin: 0 -30px;
  background-color: #F4F5F7;
}

@media (max-width:1024px) {
  .section-setting .container{
    padding-left:0;
    padding-right: 0; 
  }
}

@media (max-width:991.98px) {
  .section-setting .container-inner{
    min-height: 100vh;
  }
  .nav-setting{
    width: 200px
  }

  .nav-setting li a{
    padding-left: 18px
  }
  .nav-setting li a svg{
    margin-right: 10px
  }
  
}


@media (max-width:767px) {
  .section-setting .container-inner{
    flex-direction: column;
  }
  .setting-sidebar{
    padding-right: 0
  }
  .nav-setting{
    width: 100%;
    flex-direction: row;
  }
  .nav-setting li{
    width:50%;
    padding-right: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
  }
  .nav-setting li a{
    padding-left: 14px
  }
  .nav-setting li a svg{
    width: 15px;
    height: 15px;
    margin-right:8px
  }
  .nav-setting li.logout{
    margin-bottom: 10px;
    border-bottom: 0
  }

  .nav-setting li a:before{
    top: auto;
    bottom: 0;
    right: 0;
    width: auto;
    height: 2px;
  }

  /*.nav-setting li a::before {top: 0;bottom: 0}*/

  .setting-content{
    width: 100%;
    margin-top: 20px;
    padding:20px;
  }

  .setting-content .hgroup h2{
    font-size: 16px;
    margin-bottom: 10px
  }

  .account-setting .table-responsive{
    margin: 0 -20px
  }

  .table-profile th,
  .table-profile td{font-size: 13px}
  .table-profile th{padding-left: 20px}
  .table-profile td{padding-right: 20px}

  .setting-content .buttons{padding-top:25px}

}

/*==================================================
   My Training
==================================================*/ 
.my-training{
  display: block;
  margin-top: 0
}
.clinical-wrapper{
  display: block;
  position: relative;
  overflow: hidden;
} 

.card-datarow {
  flex-direction: row;
  font-size: 14px;
  padding: 30px 0;
  border-bottom: 1px solid rgba(132,132,132,0.7);
}
.card-datarow > a{
  display: flex;
  flex-direction: row;
  width: 100%
}
.card-datarow .photo{
  width:110px; 
  height: 90px;
  border-radius: 8px;
}
.card-datarow .card-body{
  padding: 0 0 0 20px;
  display: flex;
  -ms-flex-align: center;
align-items: center;
}
.card-datarow .infos{
  padding-right: 40px;
  max-width: 70%
}
.card-datarow p{
  margin-bottom: 7px;
  font-weight: 300;
}
.card-datarow p:last-child{
  margin-bottom: 0
}
.card-datarow p strong{
  font-weight: 400;
}

.card-datarow .seemore{
  margin-left: auto;
  font-weight: 300;
}
.card-datarow .seemore .icons{
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background-color: rgba(41,41,41,0.14);
  margin-left: 15px;
}
.card-datarow .seemore .icons:before,
.card-datarow .seemore .icons:after{background-size:30px}
.card-datarow .seemore .icons:before{
  background-image: url(../img/icons/icon-arrow-more-g.svg);
}
.card-datarow .seemore .icons:after{
  background-image: url(../img/icons/icon-arrow-more-w.svg);
}

.pc .card-datarow:hover .seemore .icons{background-color: var(--blue)}
.pc .card-datarow:hover .seemore .icons:before{opacity: 0}
.pc .card-datarow:hover .seemore .icons:after{ opacity: 1 }

.card-datarow.data {padding: 40px 0}
.card-datarow.data .card-body{padding-left: 0}
.card-datarow.data .seemore .icons{
  width: 48px;
  height: 48px;
  margin-left: 40px
}
.card-datarow.data .seemore .icons::before, 
.card-datarow.data .seemore .icons::after {
  background-size: 22px
}


.setting-content .article{
  background-color: #F8F8F8;
  border-radius:15px;
  padding:20px 25px;
  margin-top:20px;
  font-size: 12px;
  min-height: calc(100vh - 209px);
  position: relative;
}
.setting-content .article:before{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -30px;
  height: 50px;
  background-color: #F8F8F8;
}

.pagination {
  display: flex;
  padding: 40px 0;
  color: #393939;
}
.pagination .nav{
  margin: 0 0 0 auto;
  font-size: 12px;
  flex-direction: row;
}
.pagination .nav li{
  position: relative;
}
.pagination .nav li:before{
  content: '/';
  position: absolute;
  top: 5px;
  left: 0;
}
.pagination .nav li.title:before,
.pagination .nav li.dot:before,
.pagination .nav li.arrow:before{display: none;}
.pagination .nav li a{
  display: block;
  padding: 5px 10px
}
.pc .pagination .nav li a:hover{color: var(--blue)}

.pagination .nav li.dot a{padding-left: 0}
.pagination .nav li.arrow {
  display: flex;
}
.pagination .nav li.arrow a{
  width: 15px; 
  height: 15px;
  padding:0;
  margin: auto;
  position: relative;
}
.pagination .nav li.arrow a:before{
  content: '';
  position: absolute;
  top: 0;

  width: 0; 
  height: 0; 
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.pagination .nav li.arrow.prev a:before{border-right: 10px solid #393939;}
.pagination .nav li.arrow.next a:before{border-left: 10px solid #393939;}

.pc .pagination .nav li.arrow.prev:hover a:before{border-right: 10px solid var(--blue);}
.pc .pagination .nav li.arrow.next:hover a:before{border-left: 10px solid var(--blue);}
 
@media (max-width:1440px) {
  .card-datarow .seemore .icons{
    width: 55px;
    height: 55px;
  }

  .card-datarow.data {padding:30px 0}
}

@media (max-width:1199px) {
  .card-datarow{padding: 25px 0}
  .card-datarow .seemore .icons{
    width: 45px;
    height: 45px;
  }
  .card-datarow .seemore .icons::before, .card-datarow .seemore .icons::after {
    background-size:20px;
 }
}

@media (max-width:991.98px) {
  .my-training{margin-bottom: 40px}
  .card-datarow .card-body{
    flex-direction: column;
  }
  .card-datarow .photo {
    width: 115px;
    height:105px;
  }
  .card-datarow .card-body{
    padding-left: 15px;
    -ms-flex-align: unset;
      align-items: unset;
  }
  .card-datarow .infos{
    padding-right: 0
  }
  .card-datarow p{margin-bottom: 0}
  .card-datarow .seemore{margin:10px 0 0; }
  .card-datarow .seemore .icons{
    width: 20px;
    height: 20px
  }
  .card-datarow .seemore .icons::before, 
  .card-datarow .seemore .icons::after {
    background-size:14px;
  }

  .card-datarow.data .card-body{flex-direction: row;}
  .card-datarow.data .seemore{margin-left: auto;}
   
}

@media (max-width:767px) {
  .my-training .card:first-child{padding-top: 10px}
  .card-datarow .photo{
    width: 75px;
    height: 68px
  }
  .card-datarow .card-body{
    width:calc(100% - 95px)
  }
  .card-datarow .seemore {
    display: flex;
  }
  .card-datarow .seemore .icons{
    margin-left: auto;
  }

  .setting-content .article{
    padding-left: 15px;
    padding-right: 15px;
    margin-left: -5px;
    margin-right: -5px
  }
  .card-datarow p{line-height: 1.4}

  .card-datarow.data{padding: 20px 0}
  .card-datarow.data .card-body{flex-direction: column;}
  .card-datarow.data .seemore{margin-left: 0;}
  .card-datarow.data .seemore .icons {
    width: 20px;
    height: 20px;
    margin-left: auto;
  }
  .card-datarow.data .seemore .icons::before, 
  .card-datarow.data .seemore .icons::after{
    background-size: 14px;
  }
  .card-datarow.data p:first-child{margin-bottom: 5px}

  .clinical-wrapper{padding-top:20px; padding-bottom: 40px}
}

/*==================================================
   Training Program
==================================================*/ 

.training-program,
.table-wrapper{
  display: block;
  margin-bottom: 30px;
}
.training-program .tablebox,
.table-wrapper .tablebox{
  border-radius: 15px;
  background-color: #EDEDED;
  margin-bottom: 20px
}
.table-wrapper .tablebox{
  margin-bottom:10px
}
.training-program .tablebox.blue,
 .tablebox.blue{
  border-radius: 15px;
  background-color:var(--blue);
}
.training-program table,
.table-wrapper table {
  width: 100%;
  border:0;
}
.training-program table.thead td,
.table-wrapper table.thead td{
  padding: 15px 15px;
  color: #fff;
  text-align: center;
  border-right: 1px solid #fff
}
.training-program table.thead td:nth-child(1){width: 155px}
.training-program table.thead td:nth-child(2){ width: 50%;}
.training-program table.thead td:nth-child(3){width: 155px}
.training-program table.thead td:nth-child(4){width: 160px}
.training-program table.tbody td,
.table-program table.tbody td{
  padding:5px 15px;
  line-height: 1.4
}


.training-program table tr:first-child td:first-child{
  border-radius: 15px 0 0 0;
}
.training-program table tr:first-child td:last-child{
  border-radius: 0 15px 0 0;
}
.training-program table tr:last-child td:first-child{
  border-radius: 0 0 0 15px;
}
.training-program table tr:last-child td:last-child{
  border-radius: 0 0 15px 0;
}
.training-program table.tbody td{
  /*background-color: #EDEDED;*/
  border-right: 1px solid rgba(197,197,197,0.5); 
}
  
.training-program table.tbody tr:first-child td:first-child{border-left: 0;}
.training-program table.tbody tr:first-child td:first-child > span{
  width: 100%;
  display: block;
  text-align: center;
}
.training-program table.tbody tr td:last-child {border-right: 0}
.training-program table.tbody tr td[rowspan]{width: 155px}
.training-program table.tbody tr td[rowspan] > span{ 
  width: 100%; 
  display: block; 
  text-align: center; 
  font-weight: 600;
} 
.training-program table.tbody tr td:last-child{width:160px }
.training-program table.tbody tr.full td{
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid rgba(197,197,197,0.5); 
  border-bottom: 1px solid rgba(197,197,197,0.5); 
}
.training-program table.tbody tr.full td:first-child > span{
  font-weight:600;
  text-align: center;
  width: 100%;
  display: block;
}
.training-program table.tbody tr td + td{width: 155px; text-align: center;}
.training-program table.tbody tr td[rowspan] + td{width: 50%; text-align: left;}
.training-program table.tbody tr td[rowspan] + td + td{width: 155px; text-align: center;}

.training-program strong{
  font-weight:500
}
.training-program .form-control{
  border-radius: 50px;
  background-color: #fff;
  border-color:transparent;
  text-align: center;
  width: 100%;
  height: 33px;
  line-height: 31px;
}

.table-wrapper table.thead td{padding-top:20px; padding-bottom: 20px}
.table-wrapper table.tbody p,
.table-wrapper table.tbody ul{
  position: relative;
  z-index: 10;
  margin: 0
}
.table-wrapper table.tbody p{padding: 5px 0}
.table-wrapper table.tbody ul{
  min-height: 65px;
  display: flex;
  flex-direction: column;
  padding:5px 0;
  list-style-type: none;
}
.table-wrapper table.tbody ul li:first-child{ margin-top: auto; }
.table-wrapper table.tbody ul li:last-child{ margin-bottom: auto; }
.table-wrapper table.tbody ul li{
  position: relative;
  padding-left: 15px
}
.table-wrapper table.tbody ul li:before{
  content: '';
  position: absolute;
  top: 10px;
  left: 0;
  width: 4px;
  height: 4px;
  background-color: #000;
  border-radius: 50%;
}
.table-wrapper table.tbody td{
 padding: 10px 15px;
 position: relative;
 vertical-align: middle;
}
.table-wrapper table.tbody td > div{
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  right: 0;
  background-color: #F6F6F6;
  display: block;
  padding: 10px; 
}
.pc .table-wrapper table.tbody tr:hover td > div{background-color: #f1f1f1}
.table-wrapper table.tbody td:first-child{padding-left: 30px}
.table-wrapper table.tbody td:first-child > div{
  border-radius: 15px 0 0 15px
}
.table-wrapper table.tbody td:last-child > div{
  border-radius: 0 15px 15px 0
}

.table-wrapper img.img{
  max-width: 214px; 
  width: 100%;
  margin: 10px auto;
  display: block;
  position: relative;
  z-index: 100;
}
.table-wrapper.sp table.thead td:nth-child(1),
.table-wrapper.sp table.tbody td:nth-child(1){width: 40%; text-align: left; padding-left: 30px}

.table-wrapper.sp table.thead td:nth-child(2),
.table-wrapper.sp table.tbody td:nth-child(2){width: 15%; text-align: center;}

.table-wrapper.sp table.thead td:nth-child(3),
.table-wrapper.sp table.tbody td:nth-child(3){width: 10%; text-align: center;}

.table-wrapper.sp table.thead td:nth-child(4){width: 45%; text-align: center; padding-left: 30px}
.table-wrapper.sp table.tbody td:nth-child(4){width: 45%; text-align: left; padding-left: 30px}

.table-wrapper.gi table.thead td:nth-child(1),
.table-wrapper.gi table.tbody td:nth-child(1){width: 30%; text-align: left; padding-left: 30px}

.table-wrapper.gi table.thead td:nth-child(2),
.table-wrapper.gi table.tbody td:nth-child(2){width: 16%; text-align: center;}

.table-wrapper.gi table.thead td:nth-child(3),
.table-wrapper.gi table.tbody td:nth-child(3){width: 10%; text-align: center;}

.table-wrapper.gi table.thead td:nth-child(4),
.table-wrapper.gi table.tbody td:nth-child(4){width: 10%; text-align: center;}

.table-wrapper.gi table.thead td:nth-child(5){width: 30%; text-align: center; padding-left: 30px}
.table-wrapper.gi table.tbody td:nth-child(5){width: 30%; text-align: left; padding-left: 30px}

@media (max-width:1280px) {
  .training-program {font-size: 14px}
  .training-program table.tbody tr td[rowspan] + td{width: 40%;}
  .training-program table.thead td:nth-child(2){width: 40%}

  .sidebar .bluebox{font-size: 12px}
  .sidebar .bluebox h6{font-size: 14px}
}

@media (max-width:1199px) {
  .table-wrapper {font-size: 13px; line-height: 1.4}
  .table-wrapper table.tbody p,
  .table-wrapper table.tbody ul{
    padding: 15px 0;
  }
  .table-wrapper.sp table.thead td:nth-child(1), 
  .table-wrapper.sp table.tbody td:nth-child(1) {
    padding-left:20px;
  }

  .table-wrapper table.tbody ul li::before {top: 6px;}

  .table-wrapper.gi table.thead td:nth-child(1), 
  .table-wrapper.gi table.tbody td:nth-child(1){
    padding-left:20px;
  }
}

@media (max-width:991.98px) {
  .training-program{
    margin-right: -30px;
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch;
  }
  .training-program .tablebox{
    width: 800px
  }

  .table-wrapper{
    margin-top: 20px;
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch;
  }
  .table-wrapper table.thead td {
    padding-top:15px;
    padding-bottom: 15px;
  }
}

@media (max-width:767px) {
  .sidebar .bluebox{
    max-width: 100%; 
    margin-bottom:5px;
    margin-right: 10px
  }

  .training-program{
    margin-left:-30px;
    margin-right: -30px;
    padding-left: 25px
  }

  .content .article h4:first-child{margin-top: 0}

  .table-wrapper {
    margin:20px -25px 0;
    padding: 0 25px
  }
  .table-wrapper .tablebox,
  .table-wrapper table{
    width: 767px
  }
  .table-wrapper table.tbody td {
    padding:5px 15px;
  }
  .table-wrapper table.tbody td > div { 
    top:5px;
    bottom: 5px;
  }
  .table-wrapper table.tbody p, .table-wrapper table.tbody ul {
    padding: 10px 0;
  }
  .table-wrapper table.tbody ul{min-height: 0}
  .table-wrapper table.tbody ul li::before {top: 7px}
  .table-wrapper.sp table.thead td:nth-child(3), 
  .table-wrapper.sp table.tbody td:nth-child(3) {
    width: 15%;
  }

  .training-program .form-control{
    height: 30px;
    line-height: 27px
  }
}
/*==================================================
   Search Result
==================================================*/ 

.section-search{
  background-color: #F5F5F5;
}
.search-header{
  display: block;
  position: relative;
  padding-top:20px;
  padding-bottom: 20px;
}
.search-header:before{
  content: '';
  position: absolute;
  top: -80px;
  left:-100vw;
  right: -100vw;
  bottom: 0;
  background-color:#ffffff;
}
.search-header h2{
  font-size:56px; 
  font-weight: 600;
  margin-bottom:5px;
  position: relative;
  z-index: 1;
}
.search-header p{
  position: relative;
  z-index: 1;
}

.search-result{
  padding: 10px 0;
}
.result-not-found{
  display: block;
  text-align: center;
  margin: 0 auto 40px;
  max-width: 380px;
  color: #888888;
  font-size: 14px;
  font-weight: 300;
}
.result-not-found > img{
  max-width: 250px;
  margin: 0 auto
}
.result-not-found h4{
  font-size: 25px;
  color: #5A5A5A;
  font-weight: 600;
  margin-bottom: 10px;
  margin-top: 10px;
}
@media (max-width:1440px) {
  .search-header h2{font-size: 45px}
}


@media (max-width:1024px) {
  .search-header h2{font-size:35px}
}

@media (max-width:767px) {
  .search-header {
    padding-top:15px;
    padding-bottom: 10px;
  }
  .search-header h2{font-size:25px}

  .result-not-found > img{
    max-width: 180px;
  }
  .result-not-found h4{
    font-size: 18px
  }
}

/*==================================================
  Clinical
==================================================*/ 

.clinical-info-box{
  display: block;
  padding: 0 60px;
  max-width: 1300px;
  margin: 0 auto
}
.clinical-info-box .row{
  margin: 0;
}
.clinical-info-box .row > div{
  padding: 0;
}

.card-clinical{
  background-color: #F5F5F5;
}
 
.card-clinical .card-photo:before {display: none;}
.card-clinical .card-photo .photo{
  height: 100%
}
.card-clinical .card-body{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  display: flex;
  padding: 40px;
  z-index: 100;
}

.card-clinical .group{
  display:block;
  margin: auto;
  color: #004098;
  font-weight:500;
}

.card-clinical .photo{
  opacity: 0;
}
.card-clinical .photo:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  background-color: rgba(0,64,152,0.8);
}
.card-clinical p{
  font-size:16px; 
  transition: all 0.2s ease-in-out;
}
.card-clinical h3{
  font-size:30px; 
  font-weight:600;
  margin-bottom: 10px;
  transition: all 0.2s ease-in-out;
}
.card-clinical h3 + p{ 
  opacity: 0;
  color: #ffffff;
}
.pc .card-clinical:hover h3{color: #fff}
.pc .card-clinical:hover p{color: #ffffff}
.pc .card-clinical:hover h3 + p{opacity: 1;}
.pc .card-clinical:hover .photo{opacity: 1}

.device .card-clinical h3{color: #fff}
.device .card-clinical p{color: #ffffff}
.device .card-clinical h3 + p{opacity: 1;}
.device .card-clinical .photo{opacity: 1}


@media (max-width:1440px) {
  .clinical-info-box{
    padding: 0;
    margin: 0 auto;
    max-width: 1000px;
    display: block;
  } 
  .card-clinical h3{font-size: 25px}
}

@media (max-width:991.98px) {
  .clinical-info-box{
    margin: 0 -25px;
  } 
  .card-clinical .card-body{
    padding: 20px;
  }
  .card-clinical h3{
    font-size: 18px
  }
  .card-clinical p{
    font-size: 14px;
    line-height: 1.4;
    font-weight: 300;
  }
}

@media (max-width:767px) {
  .section-clinical{padding:10px 0;}

  .clinical-info-box .row > div{
    padding:7px 15px;
  }
  .card-clinical .card-photo{
    height:30vw;
  }
  .card-clinical .card-photo img{display: none;}
}

@media (max-width:576px) {
  .card-clinical .card-photo{
    height:55vw;
  }
}

/*==================================================
   Create an account
==================================================*/ 

.section-separate {
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0 !important;
  min-height: 100vh;
}
.section-separate .col-image {
  -ms-flex: 0 0 55%;
  flex: 0 0 55%;
  max-width: 55%;
  position: relative;
}
.section-separate .col-image .background{
  display: flex;
}
.section-separate .col-image h3{
  margin: auto 0;
  font-size: 44px;
  color: #fff;
  text-align: center;
  padding-left: 15vw;
  font-weight: 600;
}
.section-separate .col-content {
  -ms-flex: 0 0 45%;
  flex: 0 0 45%;
  max-width: 45%;
  position: relative;
  padding-top: 80px;
}
.box-user.d-flex {
  height: 100%;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
}
.box-user .form {
    max-width: 400px;
    width: 100%;
    margin: 0 0 0 5vw;
} 
.box-user .form-hgroup h3 {
  font-family: 'Helvetica-rounded';
  font-size: 43px;
  font-weight: 700;
  margin-bottom: 10px;
  -ms-flex-align: center;
  align-items: center;
}
.box-user  .form-hgroup p{
  font-size: 13px;
  font-weight: 500;
  color: #5E5E5E
}

.form-register{
  display: block;
  width: 427px;
  height: auto;
  padding:30px; 
  margin: 40px auto;
  background: #FFFFFF;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.21);
  border-radius: 15px;
}

.form-register label.title{
  font-size: 13px;
  display: flex;
}
.form-register .form-group{
  margin-bottom: 20px
}
.form-register .form-control{
  font-size: 14px;
  font-family: 'Helvetica-rounded';
}

.form-register label.title .icons{
  width: 20px;
  height: 20px;
  margin-right: 15px
}

.form-register label.title .icon-user{
  background-image: url(../img/icons/icon-user.svg);
}
.form-register label.title .icon-mail{
  background-image: url(../img/icons/icon-email.svg);
}

.form-register label.title .icon-phone{
  background-image: url(../img/icons/icon-phone.svg);
}

.form-register label.title .icon-shield{
  background-image: url(../img/icons/icon-shield.svg);
}
.form-register .buttons{
  padding: 15px 0;
}
.form .label-error{
  position: absolute;
  left: 0;
  bottom: 15px;
  font-size: 12px;
  color:#FF5050;
  pointer-events: none;
  display: none;
}
.form-group .icon-eye{
  position: absolute;
  right: 10px;
  bottom: 10px;
  width:22px;
  height:22px;
  background-image: url(../img/icons/icon-eye.svg);
  
  background-position: center right;
  cursor: pointer;
}
.form-group input[type="password"] + .icon-eye{
  background-image: url(../img/icons/icon-eye-close.svg);
}

.checkbox-group.agreement label{
  font-size: 10px;
  font-weight: normal;
  padding-left: 0;
} 
.checkbox-group.agreement label a{
  color: #6F6F6F;
  text-decoration: none;
}
.pc .checkbox-group.agreement label a:hover{
  text-decoration: underline;
}

.checkbox-group.agreement label::before {
  left: auto;
  right: 0;
  width: 20px;
  height: 20px;
  border:3px solid #C4C4C4;
}
.checkbox-group.agreement input[type="checkbox"]:checked + label::after{
  left: auto;
  top: 2px;
  right: 4px;
  width: 20px;
  height: 20px;
  background-color: var(--blue);  
}


.modal-signin .modal-dialog{
  max-width: 427px;
}

.modal-signin .modal-content{
  border-radius: 15px;
  padding:30px 50px
}
 
.form-signin {
  font-size: 12px;
}
.modal .form-signin .hgroup{
  text-align: left;
  margin: 0 0 30px;
  padding: 0;
  border:0;
}
.form-signin .hgroup h3{
  font-size: 28px; 
  font-weight: 600;
}
.form-signin .hgroup p a{
  text-decoration: underline;
}
.pc .form-signin .hgroup p a:hover{color: var(--blue)}

.form-signin .button-group{
  display: block;
  text-align: center;
  padding-top: 30px;
}
.form-signin .btn{
  border-radius: 12px;
  height: 42px;
}
.form-signin .btn:hover{
  background-color: var(--red);
  border-color: var(--red);
}
.form-signin .btn-outline {
  border-width: 2px;
  border-color: #000;
  font-size: 18px;
  font-weight: 600;
  line-height: 36px; 
}
.form-signin .btn .icon-sharepoint{
  width: 30px;
  height: 30px;
  background-image: url(../img/icons/icon-sharepoint.png);
  margin-right: 10px
}
.form-signin p.or{
  margin:15px 0;
  text-align: center;
}
.form-signin a.forgotpass{
  margin-top: 20px;
  display: block;
  color: #484848;
  text-decoration: underline;
}
.pc .form-signin a.forgotpass:hover{color: var(--blue)}
@media (max-width:1550px) {
  .box-user .form-hgroup h3 {
    font-size: 35px
  }
  .box-user .form{
    max-width: 350px;
    margin-left: 4vw
  }
}
@media (max-width:991.98px) {
  .section-separate .col-image{
    height: 45vh;
    position: relative;
  }
  .section-separate .col-image, 
  .section-separate .col-content {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .section-separate .col-content{
    padding-top: 0
  }
  .box-user.d-flex{height: auto;}
  .box-user .form{
    margin: 0 auto
  }
  .box-user .form-hgroup h3 {
    font-size: 30px
  }

  .section-separate .col-image h3{
    font-size: 35px;
    margin: auto;
    padding: 0;
  }
}

@media (max-width:767px) {
  .section-separate{
    height: auto;
  }
  .section-separate .col-content{
    padding:25px
  }
  .section-separate .col-content.d-flex > div{
    width: 100%
  }
  .section-separate .col-image {
    height: 35vh;
    padding-top: 80px

  }
  .box-user .form-hgroup h3 {
    font-size: 22px
  }
  .box-user .form-hgroup h3 br{display: none;}

  .section-separate .col-image h3{
    padding-top:80px;
    font-size: 22px
  }
  .form-register{
    width: 100%;
    margin: 0 auto;
    max-width:570px;
  }
}




/*==================================================
    Sign In
==================================================*/ 
.modal{color: #0E0E0E}
.modal-427 .modal-dialog{ 
  max-width: 427px
}
.modal-386 .modal-dialog{ 
  max-width:386px
}

.modal-420 .modal-dialog{ 
  max-width:420px
}

.modal-content{border-radius: 10px;}
.modal-alert .modal-header{ 
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
align-items: center;
}
.modal-alert .modal-header .icons{margin-right: 10px;}
 
.modal-alert .modal-content{
  border:0;
  border-radius: 20px;
}

 
.modal-alert .modal-content{
  max-width: 330px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.modal-alert .title-md{
  padding: 10px 0;
}

.modal .link-green{
  color: var(--green-primary);
  text-decoration: underline;
}

.modal-alert .modal-footer{ 
  padding: 20px 0;
  -ms-flex-pack: center;
  justify-content: center;
}
.modal-footer .btn.btn-sm{width: 125px; margin: 0 10px}

.modal-signin .modal-content{
  padding: 30px 50px;
}

.modal-signin .input-block{
  padding-left: 0;
  padding-right: 0;
}
.modal-signin .hgroup{
  padding-bottom: 20px
}
 
.modal-signin .hgroup h4{
  font-size: 28px;
  font-weight: 500;
  padding-bottom:5px;
}
.modal-signin .hgroup p{
  font-size: 12px
}
 
 
.btn.btn-modal-close,
.btn.btn-modal-goback{
  background-color: transparent !important;
  padding: 0;
  width: 30px;
  height: 30px;

  position: absolute;
  top: 10px;
  right: 10px;
  border:0!important;

  background-size: 15px;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(../img/icons/icon-x.svg);
}
.btn.btn-modal-goback:after,
.btn.btn-modal-close:after{display: none;}
 
.modal .link{text-decoration: underline;}
.modal .link:hover{ color: var(--red) }
.modal-content.pt-6{padding-top: 4rem}

.modal .buttons{
  display: flex;
  padding:20px 0;
  margin:0 auto;
  width: 100%;
  max-width: 1100px;
}
.modal .buttons .btn{
  border-radius: 10px;
  width: 172px;
}
.modal .buttons .btn.next{
  margin-left: auto;
}
 
/*==================================================
   Training models
==================================================*/ 

.filter-header{
  display: flex;
  margin-top:-30px;
  margin-bottom: 35px;
  -ms-flex-align: center;
  align-items: center;
}
.filter-header .cols{
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}
.filter-header .cols:nth-child(2){
  margin-left: auto;
} 
.form-group.has-button{
  display: flex;
}
.form-group.has-button .icon-pencil{
  width:16px;
  height: 16px;
  background-image: url(../img/icons/icon-pencil.svg);

  position: absolute;
  top: 50%;
  left: 18px;
  margin-top: -8px;
}
.form-group.has-button .form-control,
.form-group.search .form-control{
  background-color: transparent;
  height: 56px;
  line-height: 54px;
  border-radius: 20px;
  padding-left: 45px;
  width: 274px;
  font-size: 15px;
  font-weight: 400;
  background-color: #fff
}
.form-group.has-button .btn{
  height: 56px;
  width: 110px;
  border-radius: 20px;
  margin-left: 15px;
}
.form-group.search{
  display: flex;
  margin-bottom: 0
}
.form-group.search .icons{
  position: absolute;
  top: 50%;
  left: 0;
  margin: -9px 0 0 17px;
  width: 18px;
  height: 18px;
  background-image: url(../img/icons/icon-search-b.svg);
}
.form-group.search .form-control.w-420{width: 420px}

.filter-header .link-blue{
  margin: auto;
  margin-right: 0;
  font-size: 11px;
  color: var(--blue);
}
.pc .filter-header .link-blue:hover{color: var(--red)}
.category-filter{
  display: flex;
  height: 56px;
  border-radius: 20px;
  border:1px solid rgba(164,164,164,0.5);
  margin-left:20px;

}
.category-filter .custom-select{
  border:0;
  background-color: transparent;
  box-shadow: none !important;
  height: 45px;
  margin: auto 0;
  width: 180px;
  color: #5A5A5A;
  font-weight: 400;
}
.category-filter .form-control{
  border:0;
  box-shadow: none !important;
  background-color: transparent;
  font-size: 15px;
  font-weight: 400;
  height: 45px;
  margin: auto 0;
  color: #5A5A5A
}
.filter-header.sp-gi .cols:nth-child(1){
  width: 65%
}
.filter-header.sp-gi .cols:nth-child(2){
  margin: 0;
  width: 35%;
  padding-left: 20px
} 
.filter-header.sp-gi .form-group.search{width: 60%}
.filter-header.sp-gi .form-group.search .form-control{width: 100%}
.filter-header.sp-gi .form-group.has-button{width: 100%}
.filter-header.sp-gi .form-group.has-button .form-control{ width:calc(100% - 125px) }

.model-details{
  display: flex;
  min-height: 500px;
  margin: 30px -15px 0;
  overflow: hidden;
  position: relative;
}
.model-details > .cols{
  padding:0 15px; 
  position: relative;
}
.model-details > .cols:nth-child(1){
  width: 45%
}
.model-details > .cols:nth-child(2){
   width: 55%
}

.model-details .background{
  position: relative;
  height: 100%
}
.model-details .row{
  height: 100%;
  margin: 0 -10px;
}
.model-details .row > div{
  padding: 0 10px;
}
.model-details .box{
  border-radius: 10px;
  background-color: #004098;
  padding: 30px 40px;
  color: #ffffff;
  height: 100%
}
.model-details .box.cons{background-color: #FF5858}
.model-details .box h5{
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}
.model-details .box ul{
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 300;
}
.model-details .box ul li{
  position: relative;
  padding-left: 15px;
  margin: 2px 0
}
.model-details .box ul li:before{
  content: '';
  position: absolute;
  top: 10px;
  left: 0;
  width: 5px;
  height: 5px;
  background-color: #ffffff;
  border-radius: 50%;
}

.sortby{
  margin-left: auto;
  display: flex;
  font-size: 11px;
  color:#393939; 
}
.sortby .title{
  white-space: nowrap;
  margin: auto 0;
  position: relative;
}
.sortby .title .icon-sort{
  width: 12px;
  height: 12px;
  background-image: url(../img/icons/icon-sort.svg);
}
.sortby .custom-select{
  background-color: transparent;
  font-size: 11px;
  border:0;
  color:#393939;
  padding-right: 17px;
  background: url(../img/icons/icon-arrow-down-b.svg) no-repeat right .15rem center/10px 16px; 
}

@media (max-width:1440px) {
  .form-group.has-button .form-control,
  .form-group.has-button .btn{
    height: 50px;
    line-height: 48px;
  }
  .form-group.has-button .btn{width:90px}

  .form-group.search .form-control{
    height: 50px;
    line-height: 48px;
  }

  .category-filter{height: 50px}

  .model-details{min-height: 450px}
  .model-details .box{padding: 30px}
  .model-details .box h5{font-size: 20px;}
}

@media (max-width:1199px) {
  .filter-header{
    margin-top:-5px;
  }

  .form-group.has-button .form-control,
  .form-group.has-button .btn{
    height: 45px;
    line-height: 43px;
    border-radius: 15px;
  }
  .form-group.has-button .btn{width:80px;margin-left: 10px}
  .category-filter{height: 45px;border-radius: 15px;}

  .form-group.search .icons{width: 16px; height: 16px;margin-top: -8px;}
  .form-group.search .form-control{
     height: 45px;
    line-height: 43px;
    border-radius: 15px;
    font-size: 13px
  }

  .form-group.has-button .icon-pencil{
    width: 12px;
    height: 12px;
    margin-top: -5px;
    left:15px
  }
  .form-group.has-button .form-control{
    padding-left: 35px
  }
  .category-filter{width: 340px; font-size: 14px}
  .category-filter .custom-select{width: 150px}

   .model-details{
    flex-direction: column;
   }

  .model-details .background{
    height: 35vw; 
    margin-bottom: 40px
  }
   .model-details > .cols:nth-child(1),
   .model-details > .cols:nth-child(2){
    width: 100%
   }

  .filter-header.equipment .cols:nth-child(1){flex-direction: row}
  .filter-header.equipment .category-filter{margin-top: 0; margin-left: 10px}
  .form-group.search .form-control.w-420{width:250px}

  .filter-header.sp-gi .cols:nth-child(1){
    width: 60%
  }
  .filter-header.sp-gi .cols:nth-child(2){
    width: 40%;
  }
}

@media (max-width:1100px) {
  .filter-header.sp-gi .form-group.search{
    width: 100%
  }
  .filter-header.sp-gi  .category-filter{width: 100%}
  .filter-header.sp-gi .cols:nth-child(2){margin-top: auto;}
  .filter-header.sp-gi .form-group.has-button .form-control {
    width: calc(100% - 90px);
  }
  .filter-header.sp-gi .cols:nth-child(1),
  .filter-header.sp-gi .cols:nth-child(2){width: 50%}
}

@media (max-width:1024px) {
  .filter-header .cols:nth-child(1){
    flex-direction: column;
    -ms-flex-align: unset;
      align-items: unset;
  }
  .filter-header .cols:nth-child(2){margin-top: auto;}
  .category-filter{
    margin-left: 0;
    margin-top: 10px
  }

  .category-filter{width: 300px; }
  .category-filter .form-control,
  .category-filter .custom-select{font-size: 13px}
  .form-group.has-button .form-control{font-size: 13px; width: 220px}
  .filter-header .form-group.has-button{margin-top: auto;}
}

@media (max-width:991.98px) {
  .model-details .background{
    height:45vw;
  }
}

@media (max-width:767px) {
  .filter-header{
    flex-direction: column;
  }

  .category-filter{
    width: 100%
  }
  .filter-header .cols{
    width: 100%
  }
  .filter-header .cols:nth-child(2){
    margin-left: 0;
    margin-top: 10px;
  }
  .filter-header .form-group.has-button{
    width: 100%
  }
  .form-group.has-button .form-control{
    width: 100%
  }

  .model-details{margin-top: 20px}
  .model-details .background {height: 55vw; margin-bottom: 25px}
  .model-details .box{height: auto;margin-bottom: 25px}
  .model-details .row{height: auto;}
  .model-details .box h5{font-size: 18px}

  .filter-header.equipment{margin-bottom: 15px}
  .filter-header.equipment .cols:nth-child(1){
    display: block;
  }
  .form-group.search .form-control.w-420{width: 100%}
  .filter-header.equipment .category-filter{
    margin: 10px 0 0 0;
  }

  .filter-header.sp-gi {margin-bottom: 25px}
  .filter-header.sp-gi .cols:nth-child(1),
  .filter-header.sp-gi .cols:nth-child(2){width: 100%; padding-left: 0}

  .filter-header.sp-gi .cols:nth-child(2){ padding-top: 10px; padding-left: 0}
}


/*==================================================
   hospitality
==================================================*/ 

.article .hr{
  margin: 50px 0 0;
  height: 40px;
  position: relative;
  display: block;
}
.article .hr:before{
  content: '';
  position: absolute;
  top: 0;
  left:-70px;
  right: -100vw;
  border-top: 1px solid rgba(197,197,197,0.5)
}
.article.hospitality{
  margin-top: -20px
}
.article .hr + h4{ margin-top: 0 }

@media (max-width:1199px) {
  .article .hr{margin-top: 30px}
  .article .hr:before{left: -40px}
}

@media (max-width:1440px) {
  .article.hospitality{
    margin-top: -5px
  }
  
}

@media (max-width:1280px) {
  .article .hr::before {left: -50px}
}

@media (max-width:1024px) {
  .article .hr{margin-top: 30px}
  .article .hr:before{left: -30px}
}


/*==================================================
   Detail Procedure
==================================================*/ 

.article.procedure{
  margin-top:-25px
}

.table-equipment{
  width: 100%
}
.table-equipment p{margin-bottom:0;}
.table-equipment p strong{font-weight: 500}

.table-equipment td{
  padding: 10px 0;
}

@media (max-width:1440px) {
  .article.procedure{
    margin-top:0px
  }
  .card-info .card-photo.h-200{height:15.5vw}
}

@media (max-width:991.98px) {
  .card-info .card-photo.h-200{height:28.5vw}
}


/*==================================================
   Program Guide
==================================================*/ 
.polygon {
  width: 
}
.polygon{
  position: absolute; 
  bottom: -92px;
  width: 179px;
  height: 179px;
  z-index: 100;

  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
.polygon .icons{
  width: 100%;
  height: 100%;
  background-image: url(../img/icons/polygon-right.svg);
}
.polygon.left{
  left: -40px;
  bottom: -85px 
  
} 
.polygon.left .icons{
  transform: rotate(180deg);
}
.polygon.right{
  right: -40px;
  
}
.program-guide{
  display: block;
  position: relative;
  padding: 50px 0;
  margin: 0 128px
}

.program-guide.s1{ 
  padding-bottom: 0;
  border-left: 1px solid rgba(197,197,197,0.5)
}

.program-guide:before,
.program-guide.s1 .card:before{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 1px solid rgba(197,197,197,0.5)
}
.program-guide:before{
  left: -100vw;
  right: -100vw;
}
.program-guide.s1 .card:nth-child(odd){
  -ms-flex-direction: row-reverse ;
  flex-direction: row-reverse;
}
.program-guide.s1 .card:nth-child(odd):before{
  right: -100vw
}
 

.card-full-info{
  flex-direction: row;
}

.card-full-info .card-photo,
.card-full-info .card-body{
  width: 50%
}

.card-full-info .card-body{
  display: flex;
}
.card-full-info .card-body .group{
  margin: auto;
}
.card-full-info ul.list{
  padding: 0;
  margin:15px 0 0 0;
  list-style-type: none;
}
.card-full-info ul.list li{
  position: relative;
  padding: 0 0 0 20px;
  margin: 3px 0;
}
.card-full-info ul.list li:before{
  content: '-';
  position: absolute;
  top: 0px;
  left: 0;
}

.tour-training{
  display: flex;
  -ms-flex-pack: center;
justify-content: center;
}

.tour-training .card{
  width: 200px;
  height: 200px;
  margin: 50px 70px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 300;
}
.tour-training .card .card-photo{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background-color: #E2E2E2;
}
.tour-training .card .card-photo:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  opacity: 0.9;

  background: linear-gradient(180deg, #004098 0%, rgba(255, 255, 255, 0) 100%);
  z-index: 10;
  display: none;
}
.tour-training .card .card-photo .photo{opacity: 0.8}

.tour-training .card .card-body{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  z-index: 100;
  padding: 0;
  transition: all 0.4s ease-in-out;
}
.tour-training .card .card-body:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--blue);
  border-radius: 50%;
  transition: all 0.4s ease-in-out;
  transform: scale(1.2, 1.2);
  opacity: 0;
  pointer-events: none;

}
.tour-training .card .card-body h6{
  margin: auto;
  color: #ffffff;
  font-size: 15px;
  position: relative;
  z-index: 10;
  text-align: center;
}

.pc .tour-training .card:hover .card-body:before{
  transform: scale(1, 1);
  opacity: 1

}

.program-guide.s3 .title-xs { margin-bottom: 40px }
.program-guide.s3 .row{margin: 0 -100px}
.program-guide.s3 .row > div{padding: 0 100px}

.program-guide.s4{padding-top: 70px}

@media (max-width:1440px) {
  .polygon{
    width: 150px;
    height: 150px;
    bottom: -78px;
  }
  .polygon.left{bottom: -70px}

  .program-guide.s3 .row{margin: 0 -80px}
  .program-guide.s3 .row > div{padding: 0 80px}

  .program-guide{margin: 0 105px}
}


@media (max-width:1300px) {
  .program-guide.s3 .row{margin: 0 -50px}
  .program-guide.s3 .row > div{padding: 0 50px}

  .program-guide{margin: 0 0px}
}
@media (max-width:1199px) {
  .program-guide.s3 .row{margin: 0 -25px}
  .program-guide.s3 .row > div{padding: 0 25px}

  .polygon{
    width: 120px;
    height: 120px;
    bottom:-62px;
  }
  .polygon.left{bottom: -56px}
}

@media (max-width:991.98px) {
  .program-guide.s1{
    margin: 0 -50px
  }

  .card-full-info .title-md{font-size: 20px}
  .card-full-info .card-body{padding: 0 40px; font-size: 14px; overflow: hidden; position: relative;}
  .card-full-info ul.list{margin-top: 5px}
  .card-full-info ul.list li{margin: 1px 0}

  .tour-training .card{
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 30px;
    width: 180px;
    height: 180px;
  }
  .program-guide.s4{margin-right: -50px}
}

@media (max-width:767px) {
  .card-full-info{flex-direction: column;}
  .program-guide.s1 .card:nth-child(2n+1){
    -ms-flex-direction:column;
    flex-direction:column;
  }
  .card-full-info .card-photo, 
  .card-full-info .card-body {
    width:100%;
  }

  .card-full-info .card-body{
    padding:30px 25px;
  }

  .program-guide.s1{margin: 0; padding-top: 25px}

  .polygon.left{left: -75px}
  .polygon.right{right: -75px}

  .tour-training{
    margin: 0 -25px
  }
  .tour-training .card {
    margin-left:15px;
    margin-right: 15px;
    width: 140px;
    height: 140px;
  }
  .tour-training .card .card-body{
    padding-left: 0;
    padding-right: 0;
  }
  

  .program-guide{padding: 30px 0}
  .program-guide.s4{margin-right: 0; padding-top: 40px}
  .program-guide.s3 .title-xs{margin-bottom: 30px}
}

/*==================================================
   Modal
==================================================*/ 
.modal-backdrop.show + .modal-backdrop.show{display: none !important;}

/*.modal.fade .modal-dialog{
  -webkit-transform: translate(0,0);
  transform: translate(0,0);
}*/


.modal-650 .modal-dialog{
  max-width: 650px;
}
.modal-1250 .modal-dialog{
  max-width: 1250px;
}
.modal-1360 .modal-dialog{
  max-width: 1360px;
}
.modal-1440 .modal-dialog{
  max-width: 1440px;
  padding:0 20px; 
}
.modal.overlap{z-index: 1060}

.modal-overlap .modal-backdrop{z-index: 1055}

.modal .btn-modal-close{
  position: absolute;
  top: 20px;
  right: 20px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border:0;
  padding: 0;
  background-color: #FF8088;
  transition: all 0.2s ease-in-out;
  background-image: url(../img/icons/icon-close-w.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 12px;
  z-index: 100;
}
.pc .modal .btn-modal-close:hover{
  background-color: var(--red);
}
.modal-content{
  border:0;
  border-radius:40px;
  padding: 40px; 
  overflow: hidden;
}

.training-day-wrap .row > div{
  border-left: 1px solid var(--blue);
}
.training-day-wrap .row > div:first-child{
  border:0;
}

.training-day{
  display: block;
  position: relative;
  padding: 30px 0;
  margin: 0 auto;
  width: 100%;
 
}

.training-day h3{
  text-align: center;
  color: var(--blue);
  font-size: 36px;
  margin-bottom: 15px;
}
.training-day h5{
  font-size: inherit;
  color: #000;
  margin-bottom: 10px;
  transition: all 0.2s ease-in-out;
}
.training-day .box{
  display: block;
  margin: 0 auto;

  width: 100%;
  max-width: 200px;
  border-radius: 40px;
  background-color: #EDEDED;
  padding:20px 30px;
  min-height: 150px;
  transition: all 0.2s ease-in-out;
  color: #888888;
  cursor: pointer;
  font-size: 15px;
}
.training-day ul{
  padding: 0;
  margin: 0 0 10px; 

}
.training-day ul li{
  position: relative;
  padding: 0 0 0 15px;
  margin:5px 0;
  list-style-type: none;
  line-height: 1.2;
}
.training-day ul li:before{
  content: '-';
  position: absolute;
  top: 0;
  left: 0;
}

.pc .training-day .box:hover{
  background-color: var(--blue);
  color: #ffffff;
}
.pc .training-day .box:hover h5{color: #fff}

.modal.modal-column .modal-dialog{
  max-width: 1360px;
}
.modal.modal-column .modal-content{
  padding: 0;
}

.modal-column .row.body{
  margin: 0;
}
.modal-column .row.body > div{
  width: 50%;
  height: 760px;
  display: flex;
  position: relative;
}

.modal-column .row.body .cols-left .background{
  border-radius: 40px 0 0 40px; 
}
.modal-column .row.body .cols-right .inner{
  margin: auto;
}

.modal .hgroup{
  display: block;
  text-align: center;
  max-width: 380px;
  margin: 0 auto
}
.modal .hgroup h2{
  font-size: 52px;
  font-weight: 600;
  margin-bottom: 5px;
}

ul.steps{
  padding: 0;
  margin: 50px auto;
  list-style-type: none;
  display: flex;
  width: 500px;
}
ul.steps li{
  width: 20%;
  position: relative;
  display: block;
  text-align: center;
}
ul.steps li:before{
  content: '';
  position: absolute;
  height: 2px;
  top: 50%;
  margin-top: -10px;
  background-color: #C4C4C4;
  width:100%;
}
ul.steps li:before{
  left: 50%;
}
 
ul.steps li .dot{
  width: 19px;
  height: 19px;
  background-color: #C4C4C4;
  border-radius: 50%;
  display:block;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}
ul.steps li .title{
  display: block;
  font-size: 12px;
  font-weight: 300;
  position: relative;
  top: 15px
}

/*ul.steps li:first-child:before{display: none;}
ul.steps li:last-child:before{display: none;}*/
ul.steps li:last-child:before{display: none;}

ul.steps li.active .title,
ul.steps li.done .title{color: var(--blue)}

ul.steps li.active .dot,
ul.steps li.done .dot{background-color: var(--blue)}
ul.steps li.done:before{background-color: var(--blue)} 

ul.steps + p.f-10{
  font-size: 10px;
  margin-bottom: 20px;
  color: #050505
}

.tour-training.two-items,
.tour-training.three-items{
  width: 450px;
  margin: 0 auto;
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.tour-training.three-items .card{
  width:148px;
  height:148px;
  margin:0px 0;
}
.tour-training.two-items{
  width: 500px;
}
.tour-training.two-items .card{
  margin:0px;
}
.tour-training .clearfix{
  display: block;
  width: 100%
}

.modal .procedure-training{
  width: 100%;
  max-width: 1100px;
  margin: 40px auto 0;
  padding:0;
}
.modal .card-info.training{max-width: 198px}

.modal .sidebar .inner{width: 295px}

.modal .section-column{
  margin-left:-40px;
  margin-right: -40px;
  margin-top: 50px;
  background-color: #F4F5F7
}
.modal .section-column .container{
  margin: 0;
  max-width: 100%;
}
.modal .section-column .content{
  padding-right: 0;
  padding-left: 50px;
  width: calc(100% - 295px)
}
.modal .sidebar .hgroup{text-align: left;}
.modal .sidebar .hgroup  h2{font-size: 38px}

.section-column > .row{
  margin:0; 
  border-top: 1px solid rgba(197,197,197,0.5);
}
 
.section-column .cols-body{ 
}
.section-column .cols-left{
  width: 22%; 
  padding-left:60px; 
  padding-top: 40px;
  padding-bottom: 20px;
}
.section-column .cols-left .hgroup{
  text-align: left;
} 
.section-column .cols-body{ 
  width: 78%; 
  padding-left:40px;
  padding-right: 40px;
  border-left: 1px solid rgba(197,197,197,0.5);

}
.section-column .cols-right{
  padding-top: 40px;
  padding-left: 50px;
  width: 30%;
  border-left: 1px solid rgba(197,197,197,0.5);
}
.section-column .cols-body .article{
  display: flex;
}
.section-column .cols-body .article-left{
  width: 60%;
  padding-top: 40px;
  padding-bottom: 20px;
  padding-right: 40px
}
.section-column .cols-body .article-right{
  width: 40%; 
  border-left: 1px solid rgba(197,197,197,0.5);
  padding-top: 40px;
  padding-bottom: 20px;
  padding-left: 40px;
  display: flex;
  flex-direction: column;
}
.section-column .cols-body .offer-box{
  border-top: 1px solid rgba(197,197,197,0.5);
  padding: 20px 40px 20px; 
  margin: auto -40px 0
}
.section-column .cols-body .offer-box h4{margin-bottom: 15px;}
.section-column .cols-body .offer-box .form-control{width: calc(100% - 130px)}
.card-select .card{cursor: pointer;}
.card-select .card .card-photo{
  overflow: visible;
} 
.card-select .card .card-photo:before{
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border:5px solid #FF5858;
  border-radius: 10px;
  z-index: 500;
  opacity: 0;
  background-color: transparent;
  transition: all 0.2s ease-in-out;
}
.card-select .card.active .card-photo:before,
.pc .card-select .card:hover .card-photo:before{
  opacity: 1;
}

@media (max-width:1680px) {
  .modal-column .row.body > div{
    height: 700px;
  }
  .modal .hgroup h2{font-size: 40px;}
  .tour-training.three-items{width: 400px}
  .tour-training .card .card-body h6{font-size: 13px}
  .tour-training.three-items .card {
    width: 135px;
    height: 135px;
  }
  ul.steps{margin:35px auto 50px}
}

@media (max-width:1440px) {
  .training-day h3{font-size: 30px}
  .tour-training.three-items .card {
    width: 125px;
    height: 125px;
  }
  .modal .hgroup h2{font-size:32px;}
  .modal.modal-column .modal-dialog{max-width: 1160px}
  .modal-column .row.body > div{height: 600px}

  .tour-training.two-items{max-width: 420px; width: 100%}
  .tour-training.two-items .card{width: 160px; height: 160px}

  .modal-1360 .modal-dialog{max-width: 1200px}
  .modal .sidebar .hgroup h2{font-size: 32px; margin-bottom: 0}
  .modal .card-info.training{max-width: 170px;font-size: 14px}
  .modal .card-info.training .card-body{padding-top: 20px;padding-bottom: 10px}
  .modal .procedure-training{max-width: 965px;margin-top: 20px}

  .modal .buttons{max-width:965px }

  .modal .section-column .article h4{ font-size: 17px }


}
@media (max-width:1199px) {
  .training-day h3{font-size: 25px}
  .training-day .box{
    font-size: 14px;
    border-radius: 25px;
    padding: 20px 20px;
    max-width: 180px;
  }

  .modal-1250 .modal-dialog{
    padding: 0 20px
  }
  .training-day .box{max-width: 200px}
  .modal .procedure-training{max-width: 900px}
  .modal .card-info.training{max-width: 150px;}

  .modal .sidebar .inner{width: 260px}
  .modal .section-column .container{padding: 0 40px 0 0}
  .modal .section-column .content{padding-left: 40px;width: calc(100% - 260px)}

  .section-column .cols-left{ 
    padding-left:30px;  
    width: 28%;
    font-size: 14px
  }
  .section-column .cols-body{width: 72%; padding-left: 30px; padding-right: 30px}
  .section-column .cols-body .article{display: block;}

  .section-column .cols-body .article .article-left{
    padding-right:0;
    width: 100%;
  }
  .section-column .cols-body .article .article-right{
    border:0;
    border-top: 1px solid rgba(197,197,197,0.5);
    margin: 0 -30px;
    width: auto;
  }

  .section-column .cols-body .article .article-right{padding-left: 30px; padding-right:30px }
  .section-column .cols-body .offer-box{
    padding: 20px 30px;
    margin: auto -30px 0;
  }
}
@media (max-width:991.98px) {
  .training-day-wrap .row > div:nth-child(3),
  .training-day-wrap .row > div:nth-child(4){border-top: 1px solid var(--blue)}
  .training-day-wrap .row > div:nth-child(3){border-left: 0;}

  .modal.modal-column .modal-dialog,
  .modal-1360 .modal-dialog{padding: 0 20px;}

  .modal-column .row.body > div{
    height: auto;
    width: 100%;
  }
  .modal-column .row.body > div.cols-left{
    height: 300px
  }
  .modal-column .row.body .cols-left .background{
    border-radius: 40px 40px 0 0;
  }
  .modal-column .row.body > div.cols-right{
    padding-top: 40px;
    padding-bottom: 50px;
  }
  .modal-column .hgroup h2{font-size: 28px}

  .modal .hgroup h2{font-size: 28px}
  .modal .training-program{margin-right: -40px}
}
@media (max-width:767px) {
  .modal-1250 .modal-dialog,
  .modal-1360 .modal-dialog,
  .modal-1440 .modal-dialog{padding: 0}
  .training-day-wrap .row > div{border:0 !important;}
  .training-day{padding: 15px 0}
  .training-day h3{font-size: 20px; margin-bottom: 10px}

  .modal.modal-column .modal-dialog{padding:0;}
  .modal-column .row.body > div.cols-left{height:170px}
  .modal-column .row.body > div.cols-right {padding-top:30px;padding-bottom:30px;}
  ul.steps{width: 100%; margin-bottom: 40px}

  .tour-training.three-items{
    width: 100%;
    padding: 0 20px
  }
  .modal .hgroup h2{font-size: 22px;}
  
  .tour-training.three-items .card {
    width:90px;
    height:90px;
  }
  .tour-training.two-items .card{width: 120px; height: 120px; margin: 0 15px 10px}
  .modal .procedure-training{
    margin: 20px -20px 0; 
    max-width:none;
    width: auto;
  }
  .modal .card-info.training{margin-bottom: 20px}
  .modal .buttons{margin: 0 -20px; padding-bottom: 0; max-width: none; width: auto;}
  .modal .buttons .btn{width: 140px}

  .modal .sidebar .inner,
  .modal .section-column .content{width: 100%}
  .modal .section-column { margin-top:30px;}
  .modal .section-column .container{padding-right: 10px}

  .modal .training-program{padding-left:15px}

  .section-column .cols-left,
  .section-column .cols-body{
    width: 100%
  }

  .section-column .cols-left{
    border-bottom: 1px solid rgba(197,197,197,0.5);
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .section-column .cols-body .article .article-left,
  .section-column .cols-body .article .article-right{
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .section-column > .row{border-top:10px solid #ffffff}
  .section-column > .row:first-child{border:0;}

  .section-column .cols-body .offer-box{margin-top: 20px}
  .section-column .cols-body .offer-box .form-control {
    width: calc(100% - 90px);
  } 
}

/*==================================================
   food & beverage
==================================================*/ 
.nav-tabs-thumb{
  border-bottom:0;
}
.nav-tabs-thumb .nav-item{
  width: 33.33%;
  padding: 0;
  margin:30px 0 
}
.card-food{
  transition: all 0.2s ease-in-out;
  flex-direction: row;
  -ms-flex-wrap: wrap;
flex-wrap: wrap;
}

 

.card-food .card-photo,
.card-food .card-photo .photo{height: auto;}

.card-food .card-photo{
  width: 45%;
}
.card-food .card-photo:before{display: none;}
.card-food .card-body{
  width: 55%
}

.card-food h3,
.card-food h4{
  margin: 0;
  color: inherit;
  transition: all 0.2s ease-in-out;
}
.card-food.active h3{color: var(--blue)}
.card-food h3{
  font-size: 22px;
  position: relative;
  padding-bottom: 5px;
  margin-bottom:5px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.card-food h3:before{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 20px;
  border-top: 1px solid #222;
  transition: all 0.2s ease-in-out;
}
.card-food.active h3:before{border-color:  var(--blue); width:90%}
.card-food h4{
  font-weight: 400;
  font-size: 20px
}
.card-food ul.star{
  margin: 5px -1px;
}
.card-food ul.star li{
  width: 15px;
  height: 15px;
  margin: 0 1px;
}

.card-food .card-body{
  padding:7px 0 0 20px;
}

@media (max-width:1440px) {
  .nav-tabs-thumb{margin-right: -50px}
  .card-food  {font-size: 13px; line-height: 1.3}
  .card-food h3{
    font-size: 16px; 
    padding-bottom: 5px; 
    margin-bottom: 7px;
    letter-spacing: normal;
    line-height: 1.1
  }
  .card-food h4{font-size: 15px}
  .card-food ul.star li {
    width: 12px;
    height: 12px; 
  }
  .card-food .card-body{padding-left: 15px}
  /*.card-food .card-photo{width: 40%}
  .card-food .card-body{width: 60%}*/

  .nav-tabs-thumb .nav-item{margin:15px 0}
}

@media (max-width:1280px) {
  .nav-tabs-thumb{margin: 0;}
}
@media (max-width:1199px) {
  .nav-tabs-thumb .nav-item {
    width:50%
  }

  .card-food{max-width:275px}
}

@media (max-width:991.98px) {
  .card-food .card-photo{width: 25%}
  .card-food .card-body{width:75%; padding-top: 0}
  .card-food h3{font-size: 14px}
  .card-food h4{font-size: 13px;}
}
@media (max-width:767px) {
  .nav-tabs-thumb .nav-item {
    width:100%
  }

  .card-food .card-photo{width: 105px}
  .card-food .card-body{width: calc(100% - 105px)}
}

/*==================================================
   Footer
==================================================*/ 

.footer{
  background-color: var(--blue);
  position: relative;
  z-index: 1000;
}
.footer .container{
  display: flex;
} 

.footer-links,
.footer-contact{
  padding-top:70px; 
}
.footer-links{
  width: 70%
}
.footer-contact{
  width: 30%
}

.footer h3{
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 15px;
}

.footer h3 a,
.footer h3 span{
  display: inline-block;
  border-bottom: 1px solid #fff;
}

.footer-links ul.nav{
  flex-direction: column;
}
.footer-links ul.nav li{
  display: block;
  margin: 5px 0;
}
.footer-links ul.nav li a{
  display: block;
  line-height: 1.3;
  font-size: 13px;
  color: #97C3FF;
  padding: 5px 0;
  text-transform: capitalize 
}
.pc .footer-links ul.nav li a:hover{color: #fff}

.footer-contact{
  display: block;
  position: relative;
  color: #fff;
}
.footer-contact:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100vw;
  background-color:#061534 
}

.footer .hr{
  position: relative;
  border:0;
  display: block;
  z-index: 10
}

.footer .hr:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  border-top: 1px solid rgba(225,225,225,0.5);
}
.contact-box{
  display: block;
  position: relative;
  padding-left: 50px;
  color: #fff;
  padding: 60px 0 60px 60px;
}
.pc .contact-box a:hover{color:#97C3FF}
.form-newsletter .form-control{
  border:0;
  border-bottom: 1px solid rgba(140,140,140,0.5);
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  font-size: 12px;
  box-shadow: none !important;
  color: #fff
}
.form-newsletter .form-control:focus{
  border-bottom: 1px solid rgba(255,255,255,0.5);
}
.form-newsletter .btn{
  border-radius: 50px;
  background-color: #fff;
  width: 100px;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  border:0;
  margin-top:20px;
  float: right;
  color: #000
}
.pc .form-newsletter .btn:hover{
  background-color: var(--blue)
}

.footer-copyright{
  position: absolute;
  left: 80px;
  bottom: 0;
  width: calc(70% - 120px);
  padding: 15px 0 25px;
}

.footer-copyright hr{
  border-top: 1px solid rgba(255,255,255,0.5);
}
.footer-copyright .copyright{
  display: block;
  text-align: center;
  color:#D8D8D8;
  font-size: 10px;
}

.icon-y-contact{
  width:35px;
  height:35px;
  margin: 15px 0;
  background-image: url(../img/icons/icon-y-contact.png);
}


@media (max-width:1440px) {
  .footer-links, .footer-contact{
    padding-top: 60px
  }

  .contact-box{
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

@media (max-width:1199px) {
  .footer-links, 
  .footer-contact{
    padding-top: 40px
  }
  .contact-box{
    padding: 30px;
    padding-right: 0;
  }

  .footer-contact{
    font-size: 14px
  }
  .footer-links ul.nav li a{
    font-size: 12px
  }

  .contact-box{padding-top: 40px}
  .footer-contact{padding-bottom: 100px}
  .footer-links ul.nav{margin-bottom:20px}
  .footer-links ul.nav li{margin: 0}
  .footer-links ul.nav li a br{display: none;}

  .footer-copyright{
    left: 50px;
    width: calc(70% - 70px);
  }
  .icon-y-contact{margin: 5px 0}
}

@media (max-width:767px) {
  .footer:before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #061534;
    height: 220px;
  }
  .footer h3{font-size: 15px}

  .footer-links,
  .footer-contact{
    width: 100%; 
  }
  .footer-links{
    padding: 40px 0 20px;
  }
  .footer .container{
    flex-direction: column;
  }

  .footer-contact::before ,
  .footer .hr::before{
    left: -50px;
    right: -50px;
    width: auto;
  }

  .footer-contact{
    display: flex;
    flex-direction: column;
    padding:0px;
  }

  .contact-box{
    padding:40px 0; 
  }

  .footer-copyright{
    position: relative;
    left: 0;
    width: 100%;
    padding-top: 30px
  }
  .footer-copyright::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50px;
    right: -50px; 
    bottom: 0;
    background-color: #061534;
  }

  .footer-copyright h3,
  .footer-copyright p,
  .footer-copyright hr,
  .footer-copyright .copyright{
    position: relative;
    z-index: 10
  }

  .footer-copyright hr{border-top: 1px solid rgba(225,225,225,0.5)}
}



/*==================================================
   29/09/2022 - T-TEC training model
==================================================*/ 
.card-photo.img-hover .photo{
  transition: all 0.45s;
}
.card-photo.video:before{ 
  /*background-color: rgba(0, 64, 152, 0.48);*/
  z-index:60;
  opacity: 1;
  transition: all 0.45s;
  pointer-events: none;
}
.card-photo.video:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 20%;
  background-image: url(../img/icons/icon-play.svg);
  z-index: 100;
  pointer-events: none;
}
.pc .card-photo.video:hover:before{
  opacity: 0.7;
}
.pc .card:hover .card-photo.img-hover .photo,
.pc .card-photo.img-hover:hover .photo{
  transform: scale(1.08);
}

.card-link{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  cursor: pointer;
}

.swiper-overflow.model{
  width:75%;
  display: block;
  margin:90px auto;
  position: relative;
  overflow:visible
} 
.swiper-button.model{display: flex;}
.swiper-button-prev.model{left: -90px;}
.swiper-button-next.model{right: -90px;}

.swiper-pagination.model{display: none;}

.fw-light{font-weight: 300;}
.fw-semibold{font-weight: 600 !important;}
.fw-medium{font-weight: 500 !important;}
.fs-17{font-size: var(--f-16);}
.fs-30{font-size:30px !important}
.download-box.w-100{max-width: 100%;}
.download-box-list{
  display: block;
  margin-top:40px;
}
.download-box-list .download-box{
  margin-bottom: 25px;
}
.download-box-list .download-box h4{
  overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

.loadmore-proload{
  display:flex;
}
.loadmore-proload img{
  margin: auto;
  display: block;
  width:40px;
}
@media (max-width:1550px) {
  .swiper-overflow.model{
    width: calc(100% - 300px);
    margin:60px auto;
  }
  .swiper-button.single.model{
    width: 30px;
    height: 30px;
  }
  .swiper-button-prev.model{left: -70px; margin-top: -15px;}
  .swiper-button-next.model{right: -70px; margin-top: -15px;}
  .swiper-button.model .icons{transform: scale(0.8);}
}

@media (max-width:1280px) {
  .swiper-overflow.model{
    margin:50px auto;
  }
  .download-box-list .download-box{
    margin: 20px 0 !important;
  }

  .fs-30{font-size:25px !important}
}
@media (max-width:991.98px) {
  
  .swiper-overflow.model{
   width: calc(100% - 140px);
   margin: 30px auto 50px;
  }
  .swiper-button-prev.model{left: -55px;}
  .swiper-button-next.model{right: -55px;}

  .download-box-list{
    margin-top: 30px;
  }
}
@media (max-width:576px) {
  .swiper-overflow.model{
    width: calc(100% - 45px);
    margin:10px auto 40px;
   }

   .swiper-button-prev.model{left: -35px;}
   .swiper-button-next.model{right: -35px;}
   
   .swiper-button.single.model{
    width: 25px;
    height: 25px;
    margin-top: -8px;
  }

  .swiper-model .card-photo.video:after{background-size: 25%;}

  .article .download-box-list .download-box .icons{
    width:65px;
    background-size: 35px;
  }
  .article .download-box-list .download-box .group{
    margin-left:15px;

  }
  .download-box-list .download-box h4{
    font-size: 13px;
  }

  .fs-30{font-size:18px !important}
  .fs-17{font-size:14px !important}
}


/*Modal Gallery*/
.h6{
  font-size: var(--f-16);
  font-weight: 600;
  color: var(--blue);
}
img.w-12{width: 14px; margin-right: 10px;}

.modal-gallery .modal-header{
  border:0;
  padding: 0 1rem 0.5rem; 
  margin-top: -10px;
}
.modal-gallery .modal-header .btn-modal-close{
  top: 30px;
  right: 30px;
}
.modal-gallery .modal-dialog{
  max-width: 1200px;
}

.modal-gallery .modal-content{
  border-radius: 20px;
}

.gallery-wrapper > div:nth-child(1){
  -ms-flex: 0 0 55%;
    flex: 0 0 55%;
    max-width: 55%;
    margin-bottom: auto;
}

.gallery-wrapper > div:nth-child(2){
  -ms-flex: 0 0 45%;
    flex: 0 0 45%;
    max-width: 45%;
    padding-left: 2.8rem;
}

.gallery-wrapper .hgroup{
  display: flex;
  max-width: 100%;
  width: 100%;
  justify-content: space-between!important;
  padding-bottom:15px;
}
.gallery-wrapper .btn-doc{
  background-color: #A7F0EC;
  border-color: #A7F0EC;
  font-weight: 500;
  font-size: 12px;
  color: #004098 !important;
  margin-left: auto;
}
.gallery-wrapper .btn-doc .icons{
  width: 14px;
  height: 14px;
  background-image: url(../img/icons/icon-doc.svg);
  margin: auto 10px auto 0;
}
.pc .gallery-wrapper .btn-doc:hover{
  background-color:#69EEE7;
  border-color: #69EEE7;
}
.swiper-gallery{
  height:550px;
}
.swiper-gallery:before{
  content: '';
  position: absolute;
  top: 15px;
  right: 15px;
  width: 17px;
  height: 17px;
  z-index: 100;
  pointer-events: none;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/icons/icon-expand.svg);
}
.swiper-pagination.gallery{
  left: 0;
  right: 0;
  padding-top: 10px;
  display: none;
}
.swiper-pagination.gallery .swiper-pagination-bullet{background-color: #ccc;}
.swiper-gallery .card-photo,
.swiper-gallery .photo,
.swiper-gallery-thumb .card-photo,
.swiper-gallery-thumb .photo{
  height: 100%;
  width: 100%;
}
.swiper-gallery .swiper-slide{background-color: #fff;}
.swiper-gallery video{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.swiper-gallery-thumb{
  margin-left: -8px;
  margin-right: -8px;
}
.swiper-gallery-thumb .swiper-slide{
  width: 33.333%;
  height: 140px;
  padding: 8px;
}
.swiper-gallery-thumb .swiper-wrapper{
  flex-wrap: wrap;
  height: 440px;
  margin-bottom: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform:none !important;
  align-content: flex-start;
}

.swiper-gallery-thumb .swiper-slide .card-photo:before{ 
  border:4px solid #FF8088;
  opacity: 0 !important; 
  background-color: transparent;
}
.swiper-gallery-thumb .swiper-slide.swiper-slide-thumb-active .card-photo:before{
  opacity: 0.8 !important;}
.swiper-button.gallery{
  width: 30px;
  height: 30px;
  display: flex;
}
.swiper-button-prev.gallery{left:0px; margin-top: -15px;}
.swiper-button-next.gallery{right:0px; margin-top: -15px;}
.swiper-button.gallery .icons{transform: scale(0.8);}

.swiper-gallery-thumb .card-photo.video:after{background-size: 30%;}

.page-manage{
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.page-manage .swiper-button{
  position: relative;
  top: 0;
  left:auto !important;
  right: auto !important;
  margin: 0 ;
  width: 35px;
  height: 35px;
  display: flex !important;
}
.page-manage .swiper-button:nth-child(2){
  margin-left:40px;
}
 
.page-number li a{
  display:block;
  padding: 5px 2px;
  font-weight: 300;
  color: #393939;
  position: relative;
}
.page-number li a:after{
  content: '/';
  margin: 0 2px  0 3px;
  display: inline-block;
  font-weight: 300;
  color: #393939;
}
.page-number li:first-child a,
.page-number li:last-child a{ padding: 5px 8px;}
 
.page-number li:first-child a:after,
.page-number li:last-child a:after{
  display: none;
}
.page-number li:nth-last-child(2) a:after{display: none;}
.pc .page-number li:hover a{color: var(--blue);}
 .page-number li.active a{color: var(--blue); font-weight: 500;}

.section-title.has-line{
  border-bottom: 3px solid var(--blue);
}

.facility.gallery{
  position: relative;
  max-width: 85%;
  margin-left: auto;
  margin-right: auto;
}

/*
.facility.gallery > .row{margin: 0 -50px;}
.facility.gallery > .row > div{padding: 0 50px 30px;}*/

@media (max-width:1550px) {
  /*.facility.gallery > .row{margin: 0 -40px;}
  .facility.gallery > .row > div{padding: 0 40px 30px;}*/

  .facility.gallery .card-info h5{font-size: 17px;}
}

@media (max-width:1280px) {
  .modal-gallery .modal-dialog {
    max-width: 1000px;
  }
  .modal-gallery .modal-content{
    padding:40px 25px;
  }
  .modal-gallery .btn-modal-close{
    width: 20px; 
    height: 20px; 
    top: 12px;
    right: 12px;
    background-size: 9px;
  }
  .gallery-wrapper .hgroup{padding-bottom: 10px;}
  .gallery-wrapper > div:nth-child(2){
    padding-left: 2rem;
  }

  .swiper-gallery{
    height: 450px;
  }
  .swiper-gallery-thumb .swiper-wrapper{height: 350px;}
  .swiper-gallery-thumb .swiper-slide{height: 125px;}

  .modal-gallery .modal-header .btn-modal-close{
    top: 25px;
    right: 25px;
  }

  /*.facility.gallery > .row{margin: 0 -30px;}
  .facility.gallery > .row > div{padding: 0 30px 20px;}*/
}


@media (max-width:992px) {
  .gallery-wrapper > div:nth-child(1){
    -ms-flex: 0 0 64%;
      flex: 0 0 64%;
      max-width: 64%;
  }
  
  .gallery-wrapper > div:nth-child(2){
    -ms-flex: 0 0 36%;
      flex: 0 0 36%;
      max-width: 36%;
      padding-left: 1.2rem;
  }
  .gallery-wrapper .title-sm{
    font-size: 16px;
  }
  .gallery-wrapper img.w-12{width: 11px; margin-right:5px;}
  .gallery-wrapper .h6{font-size: 14px;}
  .swiper-gallery{height:53vw;}
  .swiper-gallery-thumb{
    margin-left: -5px;
    margin-right: -5px;
  }
  .swiper-gallery-thumb .swiper-slide{ 
    height: 10vw;
    padding: 5px;
  }
  .modal-gallery .modal-content {
    padding: 40px 20px 20px;
  }

  .swiper-gallery-thumb .swiper-wrapper{height: 41vw;}

  .modal-gallery .modal-header{padding-bottom:5px;}
  .modal-gallery .modal-header .btn-modal-close{
    top: 20px;
    right: 20px;
  }

  .swiper-gallery-thumb .card-photo.video:after{background-size: 40%;}

  .section-column .sidebar.d-md-none + .content{border:0}

  .facility.gallery{max-width: 100%;}
  /*.facility.gallery > .row{margin: 0 -20px;}
  .facility.gallery > .row > div{padding: 0 20px 20px;}*/
  .facility.gallery .card-info h5{font-size: 14px;}
}
@media (min-width:577px) and (max-width:700px) {
  .swiper-button.gallery {
    width:22px;
    height: 22px;
    margin-top: -10px;
  }
  .swiper-button.gallery .icons{
    transform: scale(0.6);
  }
}

@media (max-width:700px) {
  
  .modal-gallery .modal-content {
    padding: 40px 5px 20px;
  }
  .gallery-wrapper > div:nth-child(2){
    padding-left: 10px;
  }
  .gallery-wrapper .title-sm {
    font-size: 12px;
  }
  .gallery-wrapper .h6{
    font-size: 10px;
  }
  .gallery-wrapper img.w-12{
    width: 9px;
    margin-top: -2px;
  }
  .gallery-wrapper .hgroup{
    padding-bottom: 4px;
  }

  .swiper-gallery-thumb{
    margin-left: -3px;
    margin-right: -3px;
  }
  .swiper-gallery-thumb .swiper-slide{  
    padding: 3px;
  }
  .swiper-gallery-thumb .swiper-slide .card-photo:before{border-width: 2px; }

  .page-manage .swiper-button{
    width: 30px;
    height: 30px;
  }
  .page-manage .swiper-button:nth-child(2){
    margin-left:15px;
  }
  .page-manage .swiper-button .icons{transform: scale(0.8);}
}

@media (max-width:576px) {
  .gallery-wrapper > div:nth-child(1),
  .gallery-wrapper > div:nth-child(2){
    -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%;
  }

  .gallery-wrapper .hgroup{
    padding: 15px 0 10px;
  }
  .gallery-wrapper .title-sm{
    font-size: 16px;
  }
  .gallery-wrapper .h6{
    font-size: 12px;
  }
  .gallery-wrapper img.w-12{width: 12px;}
  .swiper-gallery{
    height: 65vw;
  }
  .swiper-gallery-thumb .swiper-slide{
    width: 20%;
    height: 17vw;
  }
  .modal-gallery .modal-content {
    padding:30px 10px 20px;
  }
  .swiper-button-prev.gallery{left: -5px;}
  .swiper-button-next.gallery{right: -5px;}

  .swiper-gallery-thumb .swiper-wrapper{height: auto;}

  .modal-gallery .modal-header{
    padding-bottom:0;
    margin-top: -13px;
  }
  .modal-gallery .modal-header .logo img{width:80px;}
  .modal-gallery .modal-header .btn-modal-close{top: 25px;}

  .gallery-wrapper .btn-doc{margin: 0 auto;}

  .page-manage{ margin-bottom: 20px;}

  .facility.gallery > .row{margin: 0 -12px;}
  .facility.gallery > .row > div{padding: 0 12px 0;}
}