@charset "utf-8";

@media screen and (min-width: 2000px) {
  #mainVisualWrap{
    grid-template-columns: minmax(480px, 35%) auto;
	
  }
  .swiper-wrapper .swiper-slide, #mainVisualWrap{
	  max-height: 50svh;
  }
}

@media screen and (min-width: 1200px) {
  #mainVisualWrap{
    grid-template-columns: minmax(480px, 35%) auto;
  }
}
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
}

@media screen and (max-width: 1099.98px) {
  .pagination{
    column-gap: 1.666em;
  }
}

/* Large devices (Desktops, 995px and up) */
@media screen and (min-width: 992px) {
  html{ overflow: auto!important; overflow-x: hidden!important;}
  #mobileBgLayer, #mobileNavWrap, .showMMenu #mobileNavWrap{
    display: none;
  } 
  .tab-container .tab-menu .tabCtrls .tab-item.selected a,
  .tab-container .tab-menu .tabCtrls .tab-item.selected a.focus,
  .tab-container .tab-menu .tabCtrls .tab-item:not(.mobileSelected) a:hover {
    color: var(--primary-orange);
  }
}

/* Medium devices (Tablets, less than 992px) */
@media screen and (max-width: 991.98px) {
  .display-m{ display:block;}
  .headerWrap{
    padding: 0;
    height: 64px;
  }
  #mmenuCtrl {
    display: flex;
    align-items: center;
  }
  #logoWrap a{
    font-size: 2.14em;
  }
  header .common-btn, 
  header #account-details{
    display: none;
  }
  #topNavWrap{
    height: 100%;
  }
  #topNavWrap .search-btn{
    width: 64px;
    height: 100%;
  }
  #topNavWrap .search-btn span{
    width: 28px;
    height: 28px;
  }
  header .common-btn, header .account-details{
    display: none;
  }
  header #search-wrap .input-wrap input{
    font-size: 1.42em;
    line-height: 160%;
  }
  #mainZone {
    min-height: calc(100vh - 145px);
  }
  #mainContent {
    width: 100%;
    padding-top: 0;
  } 
  #filterWrap{
    display: none;
  }
  #footerMain{
    grid-template-columns: 1fr;
  }
  #footerMain #footerRight{
    display: none;
  }
  .informationWrap .swiper-wrapper .swiper-slide{
    width: 90px;
  }
  .pagination .mobilePagin{
    display: inline-flex;
    align-items: center;
    column-gap: 5px;
  }
  .pagination .mobilePagin .txt span{
    font-weight: 700;
  }

}

/*Between Tablets and Mobile */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
}

@media screen and (min-width: 768px) {
 
}

/* Small devices (landscape phones, less than 768px) */
@media screen and (max-width: 767.98px) {
  /****** content starts******/
  #announcementWrap > div,
  #filterResultWrap,
  #footerMain,
  #wrapper:not(.home) #content #form-wrap,
  #content #search-result-wrap,
  #projectWrap{
    padding-left: 1.785em;
    padding-right: 1.785em;
  }
  .headerWrap{
    column-gap: 10px;
  }
  header #search-wrap{
    padding-left: 1.785em;
    padding-right: 0;
    gap:0;
  }
  #footerMain{
    min-height: 54px;
  }
  #mainZone {
    min-height: calc(100vh - 119px);
  }
  .swiper-wrap .swiper-arrow span {
    width: 14px;
    height: 14px;
  }
  #content>.btn-wrap{
    gap: 10px;
  }
  .swiper-wrap .slider-ctrls{
    max-width: 160px;
    padding: 0 30px;
  }
  .swiper-wrap .slider-ctrls .swiper-arrow{
    width: 30px;
    height: 40px;
  }
  .pagination {
    column-gap: 1em;
  }
	#content #form-wrap .flexbox {
		margin-bottom: 20px;
	}
	.home #content{
    padding: 1.42em;
  }
  #content #login-form{
    padding: 2.14em 1.42em;
  }
  #mainVisualWrap #project-details{
    padding: 1.785em;
  }
  /* #mainVisualWrap #project-details .txt-S{
    display: none;
  } */
  #mainVisualWrap #project-details h2{
    font-size: 2.285em;
  }
  #content #mainVisualWrap .common-btn{
    width: 280px;
    font-size: 1.428em;
    border-radius: 25px;
  }
  #filterResultWrap #filterResult {
    grid-template-columns: 1fr;
    padding-top: 1.785em;
    padding-bottom: 1.785em;
    row-gap: 1.785em;
  }
  #filterResultWrap #filterResult #result-right{
    grid-row: 1 / 2;
    column-gap: 10px;
  }
  #filterResultWrap #filterResult #result-right nav{
    display: none;
  }
  #filterResultWrap #filterResult #result-right nav + .custom-select {
    display: block;
	height: 100%;
  }
  #filterResultWrap #filterResult #result-right .select-selected{
	height: 100%;
	align-items: center;
	display: flex;
  }
  #logoWrap a {
    font-size: 1.714em;
  }
  #wrapper:not(.home) #content #form-wrap,
  #content #search-result-wrap,
  #projectWrap{
    padding-top: 1.78em;
  }
  #content #form-wrap .form-blk{
    padding: 1.25em 1.42em 1.42em;
  }
  #content h1{
    font-size: 1.71em;
    line-height: 116%;
    margin-bottom: 0.714em;
  }
  #content h2{
    font-size: 1.428em;
  }
  #content p{
    margin-bottom: 1.42em;
  }
  #content #form-wrap .btn-wrap a{
    font-size: 1.14em;
    line-height: 125%;
  }
  
  
  /****** content ends******/
}

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

@media screen and (max-width: 500px) {
	#toolSearch .searchForm{
		position: fixed;
		top: 80px;
		width: 100%;
	}
	#toolSearch .subnav:before {
		right: 143px;
	}
  .home #sino-logo{
    max-width: 150px;
  }
  #footerRight{
    display: none;
  }
  #mainNav_m .category-nav a{
    max-width: 150px;
  }
}


@media screen and (max-width: 479.98px) {
  #mainNav_m .category-nav,
  #mainNav_m .category-filter{
    font-size: 1.42em;
  }
  #mobileMenu > a.common-btn{
    font-size: 1.035em;
  }
  #mainNav_m .category-filter .filters > a{
    padding: 0.45em 2.35em 0.45em 1.13em;
  }
  #mainNav_m .category-filter .filters > a:before {
    width: 13px;
    height: 13px;
    right: .7em;
  }
  #mainNav_m .category-filter .filters > a.active:before{
    right: 1.2em;
  }
  #mainNav_m .subFilters .flexbox{
    font-size: 0.8em;
  }
}

@media screen and (max-width: 395px) {
  #mobileMenu > a.common-btn{
    max-width: calc((100% - 15px) / 2);
  }
}


/** container query **/
@container content (670px < width  <= 900px) {
	#content .flexbox.col-3{
		grid-template-columns: repeat(2, 1fr);
	}
	#content .card-container .card{
		display: grid;
		grid-template-columns: minmax(40%, 130px) auto;
	}
	#content .card-container .card .card-thumb{
		height: 100%;
		aspect-ratio: auto;
	}
	
}

@container content (400px < width  <= 670px) {
	#content .card-container{
    gap: 10px;
  }
	#content .flexbox.col-3{
		grid-template-columns: 100%;
    gap: 10px;
	}
	#content .card-container .card{
		display: grid;
		grid-template-columns: minmax(120px, 160px) auto;
	}
	#content .card-container .card .card-thumb{
		height: 100%;
		aspect-ratio: auto;
	}
  #content .card-container .card .card-details .card-refno{
    position: absolute;
    bottom: 15px;
    left: 15px;
  }
	#content .flexbox.col-2{
	  grid-template-columns: 100%;
	}
}
@container content (width  <= 400px) {
	#content .card-container{
    gap: 10px;
  }
	#content .flexbox.col-3{
		grid-template-columns: 100%;
    gap: 10px;
	}
	#content .flexbox.col-2{
	  grid-template-columns: 100%;
    gap: 10px;
	}
	/* #content .card-container .card .card-thumb{
		aspect-ratio: 0;
	} */
	#content .card-container .card .card-thumb img{
		/* height: auto; */
		display: block;
	}
}
/** container query **/