@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100..900&display=swap');

/* Variables */
:root {
    --bradius:1.25rem;
    --font-mitr:"Mitr", sans-serif;
}

.font-mitr{font-family:var(--font-mitr);}

/* Reset */
html, body{
    padding:0; margin:0; font-family: "Noto Sans Thai", sans-serif;
    font-size:16px; font-weight:300; line-height:1.15; overflow-x:hidden;
}
body.loading{height:100dvh!important; overflow:hidden!important;}

*{box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; outline:none;}

a{color:inherit; transition:all .25s;}
a, a:hover{text-decoration:none;}
a.link{text-decoration:underline; font-weight:400;}

img.img{display:block; width:100%; height:auto;}
.fit{position:absolute; top:0; bottom:0; left:0; right:0;}
.img-fill{background-size:cover; background-position:center; background-repeat:no-repeat;}

/* Buttons */
button{font-family: "Noto Sans Thai", sans-serif;}
.btns{width:100%; display:flex;}
.btn{display:inline-block; width:auto; height:auto; line-height:1.5; transition:all .25s;}
.btn.btn-action{
    font-size:1rem; font-weight:400; outline:none; box-shadow:none; text-decoration:none; cursor:pointer;
    padding:.5rem 1.25rem; border:1px solid transparent; white-space:nowrap;
    min-width:9rem; text-align:center;
}
.btn.btn-action.btn-icon .icon{
    width:1.375rem; height:1.375rem; display:flex;
    align-items:center; justify-content:center; transition:padding .25s;
}
.btn.btn-action.btn-icon:hover .icon{padding-left:.25rem;}
.btn.btn-action.btn-icon .icon em{font-size:.875rem;}
.link-more{display:flex; align-items:center;}
.link-more .icon em{font-size:.75rem;}

/* Animation */
@-webkit-keyframes shine {100% {left: 125%;}}
@keyframes shine {100% {left: 125%;}}


.department-container{
  position:absolute; top:-.875rem; left:0;
}
.department-container .logo-container .logo{
  width:5rem; height:5rem; border-radius:50%;
  padding:.3125rem; position:relative; display:flex;
  align-items:center; justify-content:center; margin-right:.75rem;
  /* box-shadow:-1px 3px 5px #ffdfdf; */
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.department-container .logo-container .logo img{
  display:block; max-width:100%; width:auto;
  max-height:100%; height:auto;
}
.department-container .logo-container{display:flex; align-items:center;}
.department-container .logo-container .logo.size-02 img {
  height: 3rem;
}
@media screen and (max-width:490.98px){
  .department-container .logo-container .logo{width:4.625rem; height:4.625rem;}
}


/* Scrollbar */
::-webkit-scrollbar{width:5px; border-radius:.25rem;}
::-webkit-scrollbar-thumb{border-radius:.25rem;}
::-webkit-scrollbar:horizontal{height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#cccccc;}
::-webkit-scrollbar-thumb:hover{background:#cccccc;}


/* Filter 02 */
.filter-02 {
    content: ''; position:absolute; top:0; bottom:0;
    left:0; right:0; z-index:2;
}
.filter-02{
  background-image: linear-gradient(to top,rgba(0,0,0,1),rgba(0,0,0,.9),
  rgba(0,0,0,.4),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),
  rgba(0,0,0,0));
}


/* Section & Container */
section{width:100%; overflow:hidden;}
section .content-wrapper{
    position:relative; border-radius:var(--bradius); padding:2rem; overflow:hidden;
}
section .content-wrapper.bg-right{ border-radius:var(--bradius) 0  0 var(--bradius);}
section .content-wrapper.bg-right::before{
   content:''; position:absolute; top:-.025rem; bottom:-.025rem; left:100%;
   background:#ffffff; width:15rem; z-index:2;
}
section .content-wrapper .img-bg{
    position:absolute; top:0; right:0; bottom:0; left:0;
    background-size:cover; background-repeat:no-repeat; background-position:center;
}
section .content-wrapper .content-inner{position:relative;}
.section-padding{padding:4rem 0;}
.section-padding-sm{padding:1.75rem 0;}
.container{position:relative; width:100%; max-width:calc(1240px - 2rem); padding:0; margin:0 auto;}
.container.expand-right{max-width:calc(620px - 1rem + 50vw); margin:0 0 0 auto;}
@media screen and (min-width:1400px){
    .container{max-width:calc(1300px - 2rem);}
    .container.expand-right{max-width:calc(650px - 1rem + 50vw);}
}
@media screen and (max-width:1299.98px){
    .container{max-width:calc(1140px - 2rem);}
    .container.expand-right{max-width:calc(570px - 1rem + 50vw);}
    section .content-wrapper.bg-right::before{top:-.0625rem; bottom:-.0625rem;}
}
@media screen and (max-width:1199.98px){
    .container{max-width:calc(992px - 2rem);}
    .container.expand-right{max-width:calc(496px - 1rem + 50vw);}
    section .content-wrapper{padding:3.5rem;}
}
@media screen and (max-width:991.98px){
    .section-padding{padding:3.5rem 0;}
    .container{max-width:calc(768px - 2rem);}
    .container.expand-sm{max-width:100%;}
    .container.expand-right{max-width:calc(384px - 1rem + 50vw);}
    section .content-wrapper{padding:3rem;}
}
@media screen and (max-width:767.98px){
    .section-padding{padding:3rem 0;}
    .section-padding-sm{padding:1.5rem 0;}
    .container{max-width:calc(576px - 2rem);}
    .container.expand-xs{max-width:100%;}
    .container.expand-right{max-width:calc(288px - 1rem + 50vw);}
    section .content-wrapper{padding:2rem;}
    section .content-wrapper.no-bg{padding:0 2rem 0 2rem;}
    section .content-wrapper.pr-0{padding:2rem!important;}
}
@media screen and (max-width:575.98px){
    .section-padding{padding:2.5rem 0;}
    .container{max-width:calc(100% - 2rem);}
    .container.expand-xxs{max-width:100%;}
    .container.expand-right{max-width:calc(50% - 1rem + 50vw);}
    section .content-wrapper{padding:2rem;}
    section .content-wrapper.no-bg{padding:0 2rem 0 2rem;}
}
@media screen and (max-width:490.98px){
    section .content-wrapper{padding:1.5rem;}
    section .content-wrapper.no-bg{padding:0 1.5rem 0 1.5rem;}
}
@media screen and (max-width:390.98px){
    section .content-wrapper{padding:1rem;}
    section .content-wrapper.no-bg{padding:0 1rem 0 1rem;}
}

/* Animation */
@-webkit-keyframes shine {100% {left: 125%;}}
@keyframes shine {100% {left: 125%;}}


/* Typography */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, .p, li, label{
    margin:0; font-weight:300; line-height:1.6;
}
h1, .h1{font-size:4rem; line-height:1.15;}
h2, .h2{font-size:2.375rem; line-height:1.25;}
h3, .h3{font-size:2rem; line-height:1.45;}
h4, .h4{font-size:1.875rem;}
h5, .h5{font-size:1.375rem;}
h5.sm, .h5.sm{font-size:1.25rem;}
h6, .h6{font-size:1.125rem;}
p, .p, li, label{font-size:1rem;}
p.md, .p.md, li.md, label.md{font-size:.9375rem;}
p.sm, .p.sm, li.sm, label.sm{font-size:.875rem;}
p.xs, .p.xs, li.xs, label.xs{font-size:.8125rem;}
p.xxs, .p.xxs, li.xxs, label.xxs{font-size:.6875rem;}
p.xxxs, .p.xxxs, li.xxxs, label.xxxs{font-size:.5rem;}
@media screen and (max-width:1199.98px){
    h1, .h1{font-size:3.75rem; line-height:1.15;}
    h2, .h2{font-size:2.1875rem; line-height:1.25;}
    h3, .h3{font-size:1.75rem; line-height:1.45;}
    h4, .h4{font-size:1.625rem;}
}
@media screen and (max-width:991.98px){
    h1, .h1{font-size:3.375rem; line-height:1.2;}
    h2, .h2{font-size:2rem; line-height:1.3;}
    h3, .h3{font-size:1.75rem; line-height:1.5;}
    h4, .h4{font-size:1.625rem;}
    h5, .h5{font-size:1.3125rem;}
}
@media screen and (max-width:767.98px){
    h1, .h1{font-size:3rem; line-height:1.25;}
    h2, .h2{font-size:1.875rem; line-height:1.4;}
    h3, .h3{font-size:1.5625rem; line-height:1.55;}
    h4, .h4{font-size:1.4375rem;}
    h6, .h6{font-size:1.0625rem;}
    h5, .h5{font-size:1.25rem;}
    h5.sm, .h5.sm{font-size:1.125rem;}
}
@media screen and (max-width:575.98px){
    h1, .h1{font-size:2.5rem; line-height:1.3;}
    h2, .h2{font-size:1.625rem; line-height:1.5;}
    h3, .h3{font-size:1.375rem; line-height:1.6;}
    h5, .h5{font-size:1.125rem;}
    h5, .h5{font-size:1.125rem;}
    h6, .h6{font-size:1rem;}
    p, .p, li, label{font-size:.9375rem;}
}

/* Inputs */
input[type=text], input[type=email], input[type=password], input[type=date], input[type=tel],
input[type=number], input[type=phone], input[type=submit], input[type=file], select, textarea{
    border:1px solid transparent; border-radius:0; box-shadow:none!important;
    font-size:1rem; line-height:1.15; font-weight:300; padding:.4375rem 1.125rem .4375rem .5rem; margin:0;
    outline:none!important; transition:border-color .25s, color .25s;  font-family: "Noto Sans Thai", sans-serif;
    width:100%;  border-radius:.375rem;
}


/* title-01 */
.title-01{min-height:3.125rem;}
@media screen and (max-width:575.98px){
    .title-01{min-height:unset;}
}


/* Hamburger */
.hamburger{cursor:pointer;}
.hamburger > *{
    width:1rem; height:.125rem; transform:translateX(.375rem); transition:all .45s;
}
.hamburger > *:nth-child(2){margin:.25rem 0; width:1.375rem; transform:none;}
.hamburger.active > *:nth-child(1){
    width:1.375rem; -webkit-transform:rotate(-45deg)translate(-.4rem, .4rem);
    transform:rotate(-45deg)translate(-.4rem, .4rem);
}
.hamburger.active > *:nth-child(2){opacity:0; transform:translateX(2rem);}
.hamburger.active > *:nth-child(3){
    width:1.375rem; -webkit-transform:rotate(45deg)translate(-.1rem,-.2rem);
    transform:rotate(45deg)translate(-.1rem, -.2rem);
}


/* Special Box */
.ss-box{display:block; width:100%; max-width:64rem; margin:0 auto;}
.ss-box.size-07{max-width:42rem;}
.ss-box.size-02{max-width:55rem;}
.ss-box.size-03{max-width:34rem;}
.ss-box.size-04{max-width:49rem;}
.ss-box.size-05{max-width:60rem;}
.ss-box.size-06{max-width:30rem;}

.ss-box.padding-01{padding:4rem;}
@media screen and (max-width:1299.98px){
    .ss-box.size-03{max-width:32rem;}
}
@media screen and (max-width:1199.98px){
    .ss-box.size-03{max-width:27rem;}
}
@media screen and (max-width:991.98px){
    .ss-box.size-03{max-width:100%;}
}
@media screen and (max-width:767.98px){
    .ss-box.padding-01{padding:3rem;}
}
@media screen and (max-width:575.98px){
    .ss-box.padding-01{padding:2.5rem;}
}


/* Scroll Wrapper */
.scroll-wrapper{width:100%; overflow:hidden;}
.scroll-x-wrapper{width:100%; overflow-x:auto; overflow-y:hidden; padding:0 .5rem .875rem .5rem;}
.scroll-y-wrapper{width:100%; overflow-x:hidden; overflow-y:auto; padding:0 .875rem 0 0;}


/* Special Card */
.ss-card{display:block; width:100%;}
.ss-card .title, .ss-card .desc{
    display:block; display:-webkit-box; text-overflow:ellipsis; overflow:hidden;
    -webkit-box-orient:vertical; transition:color .25s;
}
.ss-card .hover-filter-01 {
  position: absolute; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,.7);
  opacity:0; pointer-events:none; transition: opacity .3s;
}
.ss-card:hover .hover-filter-01{opacity:1;}


/* Special Card 01 */
.ss-card-01{position:relative; overflow:hidden; transition:.3s;}
.ss-card-01::after{
    position:absolute; top:0; left:-95%; z-index:2; display:block;
      content:''; width:50%; height:100%;
    background:-webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
      background:linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
      transform:skewX(-25deg); transform:skewX(-25deg); pointer-events:none;
  }
.ss-card-01:hover::after{-webkit-animation:shine .75s; animation:shine .75s;}
.ss-card-01 .text-container{
    position:absolute; top:0; bottom:0; left:0; right:0; align-items:center; opacity:0;
    display:flex; flex-direction: column; justify-content:center; padding:1rem;  transition:opacity .3s;
}
.ss-card-01:hover .text-container{opacity:1;}
.ss-card-01 .logo{
  width:6rem; height:6rem; border-radius:50%;
  position:relative; display:flex; align-items:center;
  justify-content: center; transition: transform .25s;
}
.ss-card-01 h6, .ss-card-01 h5{
-webkit-line-clamp: 3;
display:block; display:-webkit-box; text-overflow:ellipsis; overflow:hidden;
    -webkit-box-orient:vertical; transition:color .25s;
}
.ss-card-01  .logo img {
  display: block; max-width:100%; width:auto;
  max-height:100%; height:auto;
}
@media screen and (max-width:991.98px){
  .ss-card-01 .text-container h5{font-size:1.125rem!important;}
  .ss-card-01 .logo{height:5.25rem;}
}
@media screen and (max-width:490.98px){
  .ss-card-01 h6, .ss-card-01 h5{
-webkit-line-clamp: 2;

}
}
@media screen and (max-width:399.98px){
  .ss-card-01 .text-container h5{font-size:1rem!important;}
  .ss-card-01 .logo{height:4.875rem;}
}
@media screen and (max-width:320.98px){
  .ss-card-01 .text-container h5{font-size:.9375rem!important; margin-top:unset!important;}
  .ss-card-01 .logo{height:4.5rem;}
}


/* Special Card 02 */
.ss-card-02{position:relative; overflow:hidden;}
.ss-card-02 .text-container{
  position:absolute; right:0; bottom:0;
  left:0; z-index:2; padding:.625rem 1rem;
}
.ss-card-02::after{
  position:absolute; top:0; left:-95%; z-index:2; display:block;
    content:''; width:50%; height:100%;
  background:-webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    background:linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    transform:skewX(-25deg); transform:skewX(-25deg); pointer-events:none;
}
.ss-card-02:hover::after{-webkit-animation:shine .75s; animation:shine .75s;}
.ss-card-02 .title{-webkit-line-clamp: 2;}


/* Special Card 03 */
.ss-card-03{
    padding:2rem; margin:0 auto; transition: margin .25s, border .25s, transform .25s; border:1px solid transparent;
    text-align:center; box-shadow:0px 0px 20px 0px rgb(0 0 0 / 8%); max-width:16rem;
}

.ss-card-03 .icon{
    position:relative; width:4rem; height:4rem; border-radius:50%; margin:0 auto; margin-top:-4rem;
    display:flex; justify-content:center; align-items:center; margin-bottom:1rem;
}
.ss-card-03 .icon img{
    display:block; max-width:100%; max-height:100%; width:auto; height:2rem;
}
.ss-card-03 .icon:before {
    position:absolute; content:''; background: rgba(230, 190, 0, 1);
    width:5rem; height:5rem; left:50%; top:50%; transform:translate(-50%, -50%);
    border-radius:50%; z-index: -1;
    transition: all 900ms ease;
}
.ss-card-03:hover .icon:before{z-index:-1;}
.ss-card-03 .icon:after {
    position:absolute; content:''; width:6rem;
    height:6rem; left:50%; top:50%; transform:translate(-50%, -50%) scale(0,0); border-radius:50%;
    z-index:-1; transition: all 500ms ease;
}
.ss-card-03:hover .icon:after {transform:translate(-50%, -50%) scale(1,1);}
.ss-card-03 .icon:after{background: rgba(230, 190, 0, .5);}
.ss-card-03 .icon em{font-size:1.875rem;}


/* Swiper 01 */
.swiper-thumbs .swiper-slide{border:2px solid transparent; transition:border .25s;}
.swiper-thumbs .swiper-slide .ss-card{opacity: .85; transition:opacity .25s;}
.swiper-thumbs .swiper-slide:hover .ss-card,
.swiper-thumbs .swiper-slide.swiper-slide-thumb-active .ss-card{opacity:1;}



/* Isotope */
.isotope-wrapper {
    display:flex; justify-content:center; align-items:center;
    flex-wrap:wrap; padding:0 1rem; max-width:60rem;

}
.isotope-toolbar-btn{margin:.125rem .125rem;}


/* Special Separation 01 */
.ss-sep-01{position:relative; display:block; width:100%; max-width:100%; height:.05rem;}


/* List Footer */
.list-footer{
  margin:-.5rem 0; display:flex; align-items:center;
  justify-content:space-between; font-weight:300; white-space:nowrap;
}
.list-footer .option{display:flex; align-items:center; margin:.5rem 0;}
@media screen and (max-width:991.98px){
  .list-footer{display:block;}
  .list-footer .option{width:100%; justify-content:center;}
}
@media screen and (max-width:435.98px){
  .list-footer .option{flex-direction:column;}
}


/* Special List */
.ss-list, .ss-list ul{width:100%; padding:0; margin:0; list-style:none;}
.ss-list > li{position:relative; padding:.1875rem 0 .1875rem 0;}
.ss-list ul > li{padding:.1875rem 0;}
.ss-list > li::before{
  content:''; position:absolute; top:.625rem; left:0;
  width:.375rem; height:.375rem; border-radius:50%;
}
.ss-list ul > li::before{display:none;}


/* ss-list-01 */
.ss-list.ss-list-01 li{display:flex; align-items:start; margin-bottom:.5rem; padding:.1875rem 0 .1875rem .5rem;}
.ss-list.ss-list-01 li .icon{
    font-size:1rem; width:1rem; height:1rem; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
}
.ss-list.ss-list-01 li .text{
    width:calc(100% - 1rem); padding-left:.5rem; margin-top:-.3125rem; font-weight:200;
    font-size:1rem;
}
.ss-list.ss-list-01 li .text.size-02{font-size:1.125rem;}
.ss-list.ss-list-02 li{position:relative; padding-left:1rem;}
.ss-list.ss-list-02 li::before{
    content:''; position:absolute; top:calc(100% - 1.25rem); left:0;
    width:.5rem; height:.5rem; border-radius:50%;
}

/* ss-list-03 */
.ss-list.ss-list-03 li{display:flex; align-items:center; margin:1rem 0;}
.ss-list.ss-list-03 li .number{
    font-size:1rem; width:2rem; height:2rem; border-radius:.375rem;
    display:flex; align-items:center; justify-content:center; transform:rotate(45deg);
}
.ss-list.ss-list-03 li .number>*{transform:rotate(-45deg); font-weight:400;}
.ss-list.ss-list-03 li .text{
    width:calc(100% - 2rem); padding-left:1rem; font-weight:300;
    font-size:1rem; line-height:1.3125;
}
.ss-list.style-01 li {
    display:flex; align-items:center; border-bottom:1px solid transparent;
    padding: .5rem 0 .5rem 1rem;
}
.ss-list.style-01 li:not(.sub-cate) .title{font-weight:400; margin-left:.3125rem;}
.ss-list.style-01 li.sub-cate{padding:.3125rem 0 .3125rem 2.25rem;}
.ss-list.style-01 li.sub-cate .title{font-weight:300; margin-left:.3125rem;}
.ss-list.style-01 li .icon {
    width:1.375rem; height:1.375rem;
    display:flex; justify-content:center; align-items:center;
}
.ss-list.style-01 li .icon svg, .ss-list.style-01 li .icon img {
    display:block; max-width:100%; width:auto;
    max-height: 100%; height: 1rem;
}
.ss-list.style-01 li.sub-cate .icon svg,
.ss-list.style-01 li.sub-cate .icon img{height:.75rem;}


/* Special Tag */
.ss-tags{position:relative; display:flex; flex-wrap:wrap; overflow:hidden;}
.ss-tags > .tag{
    display:block; font-size:.8125rem; font-weight:300; padding:.5rem .875rem .5rem .875rem;
    transition:background .25s, color .25s; margin:.25rem .25rem; border-radius:1000em;
}


/* Special Text */
.ss-text-wrapper-01{
    display:block; width:100%; max-width:34rem; padding-left:2.5rem;
}
@media screen and (max-width:991.98px){
    .ss-text-wrapper-01.style-02{padding-left:0; max-width:100%;}
}

/* Special Title 01 */
.ss-title-01 .wrapper{
    display:flex; align-items:center;
}

.ss-title-03{

    position: relative;
    width: 50px;
    height: 4px;
    margin-left: 8px;

}
.ss-title-03:before {
  position: absolute;
  content: '';
  width: 4px;
  height: 4px;
  left: -8px;
  top: 0px;
}

/* Special Title 01 */
.ss-title-02{
    position:relative; padding:.75rem 1rem;
    max-width:15rem; transform:skewX(-25deg);
}
.ss-title-02.size-02{max-width:25rem; margin-left:3rem; padding-left:2.625rem;}
.ss-title-02.size-02::before{display:none;}
.ss-title-02.style-02{min-width:15rem;}
@media screen and (max-width:575.98px){
  .ss-title-02.size-02{max-width:15rem;}
}
@media screen and (max-width:575.98px){
  .ss-title-02, .ss-title-02.size-02{max-width:calc(100% - 4rem);}
}
@media screen and (max-width:390.98px){
    .ss-title-02.style-02{min-width:10rem;}
}

.ss-title-02::before{
   content:''; position:absolute; top:0; bottom:0; right:calc(100% - .5rem); z-index:2;
   width:3rem;
}
.ss-title-02 .wrapper{
    display:flex; align-items:center; transform:skewX(25deg);
}


.ss-title-04{display:flex;}
.ss-title-04 .icon{width:2.25rem; height:2.25rem; display:flex; align-items:center; justify-content:center; transition:background .25s;}
.ss-title-04 .text{width:calc(100% - 2rem); padding-left:1rem;}
.ss-title-04:hover .text p:first-child{transition:color .25s;}

@media screen and (max-width:767.98px){
    .ss-title-04 .icon{width:2rem; height:2rem;}
    .ss-title-04 .icon em{font-size:.875rem;}
}
@media screen and (max-width:390.98px){
    .ss-title-04 .icon{width:2rem; height:2rem;}
    .ss-title-04 .icon em{font-size:.75rem;}
}


.map-container-02{height:360px;}
@media screen and (max-width:767.98px){
    .map-container-02{height:300px;}
}
@media screen and (max-width:575.98px){
    .map-container-02{height:290px;}
}


/* Hamburger */
.hamburger{cursor:pointer;}
.hamburger.active{margin-top:-.25rem;}
.hamburger > *{
    width:1rem; height:.125rem; transform:translateX(.375rem); transition:all .45s;
}
.hamburger > *:nth-child(2){margin:.25rem 0; width:1.375rem; transform:none;}
.hamburger.active > *:nth-child(1){
    width:1.375rem; -webkit-transform:rotate(-45deg)translate(-.4rem, .4rem);
    transform:rotate(-45deg)translate(-.4rem, .4rem);
}
.hamburger.active > *:nth-child(2){opacity:0; transform:translateX(2rem);}
.hamburger.active > *:nth-child(3){
    width:1.375rem; -webkit-transform:rotate(45deg)translate(-.1rem,-.2rem);
    transform:rotate(45deg)translate(-.1rem, -.2rem);
}




/* Special Image */
.ss-img{display:block; position:relative; width:100%; padding:65% 0 0 0; overflow:hidden;}
.ss-img.square{padding:100% 0 0 0;}
.ss-img.square-2{padding:70% 0 0 0;}
.ss-img.horizontal{padding:55% 0 0 0;}
.ss-img.horizontal-2{padding:50% 0 0 0;}
.ss-img.vertical{padding:150% 0 0 0;}
.ss-img > .img-bg{
  position:absolute; top:0; bottom:0; left:0; right:0; background-size:cover;
  background-position:center; background-repeat:no-repeat; transition:transform .3s;
}
.ss-img:hover > .img-bg, .ss-card:hover .ss-img > .img-bg{transform:scale(1.1);}
.ss-img.no-hover > .img-bg, .ss-card .ss-img.no-hover > .img-bg{transform:none!important;}

.ss-img .hover-container{
  position:absolute; top:0; bottom:0; left:0; right:0; opacity:0;
  display:flex; justify-content:center; align-items:center;
  transition:opacity .25s, background .25s;
}
.ss-img:hover .hover-container, .ss-card:hover .ss-img .hover-container{opacity:1;}
.ss-img .hover-container .icon{display:block; width:4rem;}
.ss-img .hover-container .icon.md{display:block; width:3rem;}
.ss-img .hover-container .icon > img{display:block; width:100%; height:auto;}
.ss-img .hover-container .icon > em{position:relative; z-index:2; font-size:3.5rem;}


/* Special Stat */
.ss-stats{
  display:flex; flex-wrap:wrap; margin:.25rem 0 0 0;
}
.ss-stats .stat{
  display:flex; white-space:nowrap; margin:.1875rem .625rem 0 0;
  font-size:.875rem; font-weight:400; transition:color .25s; width:100%;
}
.ss-stats .stat .title{font-size:.875rem;}
.ss-stats .stat .icon{
  display:flex; align-items:center; font-size:.8125rem;
  justify-content:start; width:1.25rem; height:1.25rem;
}
.ss-stats .stat .icon img{
  display:block; width:.875rem; height:auto;
}


/* Spacing */
.p-0{padding:0!important;}
.p-1{padding:.25rem!important;} .p-2{padding:.5rem!important;}
.p-3{padding:.75rem!important;} .p-4{padding:1rem!important;}
.p-5{padding:1.25rem!important;} .p-6{padding:1.5rem!important;}
.pt-0{padding-top:0!important;}
.pt-1{padding-top:.25rem!important;} .pt-2{padding-top:.5rem!important;}
.pt-3{padding-top:.75rem!important;} .pt-4{padding-top:1rem!important;}
.pt-5{padding-top:1.25rem!important;} .pt-6{padding-top:1.5rem!important;}
.pr-0{padding-right:0!important;}
.pr-1{padding-right:.25rem!important;} .pr-2{padding-right:.5rem!important;}
.pr-3{padding-right:.75rem!important;} .pr-4{padding-right:1rem!important;}
.pr-5{padding-right:1.25rem!important;} .pr-6{padding-right:1.5rem!important;}
.pb-0{padding-bottom:0!important;}
.pb-1{padding-bottom:.25rem!important;} .pb-2{padding-bottom:.5rem!important;}
.pb-3{padding-bottom:.75rem!important;} .pb-4{padding-bottom:1rem!important;}
.pb-5{padding-bottom:1.25rem!important;} .pb-6{padding-bottom:1.5rem!important;}
.pl-0{padding-left:0!important;}
.pl-1{padding-left:.25rem!important;} .pl-2{padding-left:.5rem!important;}
.pl-3{padding-left:.75rem!important;} .pl-4{padding-left:1rem!important;}
.pl-5{padding-left:1.25rem!important;} .pl-6{padding-left:1.5rem!important;}

.m-0{margin:0!important;} .m-auto{margin-left:auto!important; margin-right:auto!important;}
.m-1{margin:.25rem!important;} .m-2{margin:.5rem!important;}
.m-3{margin:.75rem!important;} .m-4{margin:1rem!important;}
.m-5{margin:1.25rem!important;} .m-6{margin:1.5rem!important;}
.mt-0{margin-top:0!important;}
.mt-1{margin-top:.25rem!important;} .mt-2{margin-top:.5rem!important;}
.mt-3{margin-top:.75rem!important;} .mt-4{margin-top:1rem!important;}
.mt-5{margin-top:1.25rem!important;} .mt-6{margin-top:1.5rem!important;}
.mt-adaptive{margin-top:3rem!important;}
.mr-auto{margin-right:auto!important;}
.mr-0{margin-right:0!important;}
.mr-1{margin-right:.25rem!important;} .mr-2{margin-right:.5rem!important;}
.mr-3{margin-right:.75rem!important;} .mr-4{margin-right:1rem!important;}
.mr-5{margin-right:1.25rem!important;} .mr-6{margin-right:1.5rem!important;}
.mb-0{margin-bottom:0!important;}
.mb-1{margin-bottom:.25rem!important;} .mb-2{margin-bottom:.5rem!important;}
.mb-3{margin-bottom:.75rem!important;} .mb-4{margin-bottom:1rem!important;}
.mb-5{margin-bottom:1.25rem!important;} .mb-6{margin-bottom:1.5rem!important;}
.ml-auto{margin-left:auto!important;}
.ml-0{margin-left:0!important;}
.ml-1{margin-left:.25rem!important;} .ml-2{margin-left:.5rem!important;}
.ml-3{margin-left:.75rem!important;} .ml-4{margin-left:1rem!important;}
.ml-5{margin-left:1.25rem!important;} .ml-6{margin-left:1.5rem!important;}
@media screen and (max-width:767.98px){
    .sm-mt-1{margin-top:.25rem!important;}
    .sm-mt-4{margin-top:1rem!important;}
    .sm-mt-6{margin-top:1.5rem!important;}
}
@media screen and (max-width:575.98px){
    .xs-mb-7{margin-bottom:2rem!important;}
}


/* Utility */
.fw-100{font-weight:100!important;}
.fw-200{font-weight:200!important;}
.fw-300{font-weight:300!important;}
.fw-400{font-weight:400!important;}
.fw-500{font-weight:500!important;}
.fw-600{font-weight:600!important;}
.fw-700{font-weight:700!important;}
.fw-800{font-weight:800!important;}
.fw-900{font-weight:900!important;}

.lh-xl{line-height:1.32;}
.lh-lg{line-height:1.22;}
.lh-nm{line-height:1.12;}
.lh-sm{line-height:1.25;}
.lh-xs{line-height:.92;}
.lh-2xs{line-height:.82;}
.lh-3xs{line-height:.72;}

.text-sm{font-size:75%;}
.text-xs{font-size:50%;}

.tt-unset{text-transform:unset!important;}

.ls-0{letter-spacing:0!important;}
.ls-1{letter-spacing:-.06!important;}
.ls-2{letter-spacing:-.12!important;}

.op-100{opacity:1!important;} .op-0{opacity:0!important;}
.op-10{opacity:.1!important;} .op-20{opacity:.2!important;} .op-30{opacity:.3!important;}
.op-40{opacity:.4!important;} .op-50{opacity:.5!important;} .op-60{opacity:.6!important;}
.op-70{opacity:.7!important;} .op-80{opacity:.8!important;} .op-90{opacity:.9!important;}

.pos-absolute{position:absolute!important;}
.pos-relative{position:relative!important;}

.d-block{display:block!important;}
.d-flex{display:flex!important;}
.d-inline{display:inline!important;}
.d-inline-block{display:inline-block!important;}
.d-none{display:none!important;}
@media screen and (max-width:575.98px){
    .sm-d-none{display:none;}
}

.jc-start{justify-content:flex-start!important;}
.jc-center{justify-content:center!important;}
.jc-end{justify-content:flex-end!important;}
.jc-space-between{justify-content:space-between!important;}
.jc-space-evenly{justify-content:space-evenly!important;}
.ai-center{align-items:center!important;}
.ai-start{align-items:flex-start!important;}
.ai-end{align-items:flex-end!important;}
.ai-stretch{align-items:stretch!important;}
.ai-unset{align-items:unset!important;}
.fw-wrap{flex-wrap:wrap!important;}
.fw-unset{flex-wrap:unset!important;}
@media screen and (max-width:991.98px){
    .flex-row-reverse-md{flex-direction:row-reverse!important;}
    .flex-column-reverse-md{flex-direction:column-reverse!important;}

    .jc-start-md{justify-content:flex-start!important;}
    .jc-end-md{justify-content:flex-end!important;}
}
@media screen and (max-width:767.98px){
    .flex-row-reverse-sm{flex-direction:row-reverse!important;}
    .flex-column-reverse-sm{flex-direction:column-reverse!important;}
    .jc-start-sm{justify-content:flex-start!important;}
}
@media screen and (max-width:575.98px){
    .flex-col-reverse-xs{flex-direction:column-reverse!important;}
    .flex-col-xs{flex-direction:column!important;}

    .jc-start-xs{justify-content:flex-start!important;}
    .jc-center-xs{justify-content:center!important;}
}

.w-auto{width:auto!important; min-width:0!important}
.w-full{width:100%!important; max-width:100%!important;}
.h-auto{height:auto!important; min-height:0!important;}
.h-full{height:100%!important; max-height:100%!important;}

.ws-nowrap{white-space:nowrap!important;}
.ws-normal{white-space:normal!important;}
.ws-prewrap{white-space:pre-wrap!important;}
.ws-preline{white-space:pre-line!important;}

.pe-none{pointer-events:none!important;}
.pe-auto{pointer-events:auto!important;}

.c-pointer{cursor:pointer!important;}
.c-unset{cursor:unset!important;}

.border-0{border:0!important;}
.border-1{border:1px solid transparent!important;}
.border-2{border:2px solid transparent!important;}
.border-3{border:3px solid transparent!important;}
.border-4{border:4px solid transparent!important;}
.border-top-0{border-top:0px solid transparent!important;}
.border-top-1{border-top:1px solid transparent!important;}
.border-top-2{border-top:2px solid transparent!important;}
.border-top-3{border-top:3px solid transparent!important;}
.border-top-4{border-top:4px solid transparent!important;}
.border-bottom-0{border-bottom:0px solid transparent!important;}
.border-bottom-1{border-bottom:1px solid transparent!important;}
.border-bottom-2{border-bottom:2px solid transparent!important;}
.border-bottom-3{border-bottom:3px solid transparent!important;}
.border-bottom-4{border-bottom:4px solid transparent!important;}
.border-left-0{border-left:0px solid transparent!important;}
.border-left-1{border-left:1px solid transparent!important;}
.border-left-2{border-left:2px solid transparent!important;}
.border-left-3{border-left:3px solid transparent!important;}
.border-left-4{border-left:4px solid transparent!important;}
.border-right-0{border-right:0px solid transparent!important;}
.border-right-1{border-right:1px solid transparent!important;}
.border-right-2{border-right:2px solid transparent!important;}
.border-right-3{border-right:3px solid transparent!important;}
.border-right-4{border-right:4px solid transparent!important;}

.bradius{border-radius:var(--bradius)!important;}
.bradius-0{border-radius:0!important;}
.bradius-1{border-radius:4px!important;}
.bradius-2{border-radius:8px!important;}
.bradius-3{border-radius:12px!important;}
.bradius-4{border-radius:16px!important;}
.bradius-round{border-radius:1000em!important;}

.box-shadow{box-shadow:rgb(0 0 0 / 7%) 0px 10px 20px;}

.ovf-unset{overflow:unset!important;}
.ovf-hidden{overflow:hidden!important;}
.ovf-visible{overflow:visible!important;}
.clear-both{clear:both!important;}

.va-top{vertical-align:top!important;}
.va-baseline, .va-bl{vertical-align:baseline!important;}

.text-center{text-align:center!important;}
.text-left{text-align:left!important;}
.text-right{text-align:right!important;}
@media screen and (max-width:991.98px){
    .md-text-center{text-align:center!important;}
}
@media screen and (max-width:767.98px){
    .sm-text-center{text-align:center!important;}
}

.all-no-br > br{display:none;}
.all-hide{display:none;}
@media screen and (max-width:1199.98px){
	.lg-text-center{text-align:center!important;}
	.lg-text-left{text-align:left!important;}
	.lg-text-right{text-align:right!important;}

	.lg-jc-center{justify-content:center!important;}

    .lg-no-br > br{display:none;}
    .lg-hide{display:none;}
}
@media screen and (max-width:991.98px){
	.md-text-center{text-align:center!important;}
	.md-text-left{text-align:left!important;}
	.md-text-right{text-align:right!important;}

	.md-jc-center{justify-content:center!important;}

    .md-no-br > br{display:none;}
    .md-hide{display:none;}
}
@media screen and (max-width:767.98px){
	.sm-text-center{text-align:center!important;}
	.sm-text-left{text-align:left!important;}
	.sm-text-right{text-align:right!important;}

	.sm-jc-center{justify-content:center!important;}

    .sm-no-br > br{display:none;}
    .sm-hide{display:none;}

	.sm-ws-unset{white-space:unset!important;}
}
@media screen and (max-width:575.98px){
	.xs-text-center{text-align:center!important;}
	.xs-text-left{text-align:left!important;}
	.xs-text-right{text-align:right!important;}

	.xs-jc-center{justify-content:center!important;}

    .xs-no-br > br{display:none;}
    .xs-hide{display:none;}
    .xs-hide{display:none;}

	.xs-ws-unset{white-space:unset!important;}
}

.form-group{position:relative; margin:0 0 0 0;}
.form-group .dropdown-icon{
    position:absolute; right:0; pointer-events:none;
     height:100%; border-radius:0 .375rem .375rem 0;
    top:0; bottom:0; display:flex; justify-content:center;
    align-items:center; border:1px solid transparent; background:transparent;
}


.no-data{display:flex; flex-direction:column; align-items:center; margin-top:1rem;}
.no-data img{
    display:block; max-width:100%; max-height:100%;
    width:auto; height:15rem;
}
@media screen and (max-width:767.98px){
    .no-data img{height:13rem;}
}
@media screen and (max-width:575.98px){
    .no-data img{height:11rem;}
}
@media screen and (max-width:390.98px){
    .no-data img{height:9rem;}
}


/* Special Card 30 */
.ss-card-30:not(:first-child){margin-top:1.5rem;}
.ss-card-30 .wrapper{display:flex; flex-wrap:wrap;}
.ss-card-30 .img-container{width:30%;}
.ss-card-30 .text-container{width:70%; padding:0 1rem;}
.ss-card-30 .text-container .title{-webkit-line-clamp:1;}
.ss-card-30 .text-container .desc{-webkit-line-clamp:3; margin-top:.5rem;}
@media screen and (max-width:767.98px){
  .ss-card-30 .img-container{width:30%}
  .ss-card-30 .text-container{width:70%;}
  .ss-card-30 .text-container .desc{-webkit-line-clamp:2;}
}
@media screen and (max-width:575.98px){
  .ss-card-30 .text-container .desc{-webkit-line-clamp:1; margin-top:.3125rem;}
}
@media screen and (max-width:490.98px){
   .ss-card-30 .img-container{width:45%}
  .ss-card-30 .text-container{width:55%;}
  .ss-card-30 .text-container .desc{-webkit-line-clamp:1; margin-top:.0625rem;}
}
@media screen and (max-width:390.98px){
    .ss-card-30 .img-container{width:100%}
    .ss-card-30 .text-container{width:100%; padding:.75rem .5rem;}
}