.main-pp{
	    max-width: 1680px;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 120px;
	margin-top:-12%;
}
.img-header{    pointer-events: none;}
.heading-tab h4{
	     font-family: var(--g-font-2);
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    text-transform: uppercase;
    color: #60646C;
}
.heading-tab{
	display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #D9D9E0;
    padding-bottom: 25px;
	cursor: pointer;
}
.heading-tab svg{
	-ms-transform: rotate(180deg);
    transform: rotate(180deg);
	margin-right:20px;
  width: 14px;
    height: 8px;
}
.heading-tab.active svg{
		-ms-transform: rotate(0deg);
    transform: rotate(0deg);
}
.dt-tab {
    margin-bottom: 60px;
}
.dt-tab:last-child{margin-bottom:0;}
.content-tab{display:none;}
.content-tab.active{display:block;}
.ct-list {
    display: flex;
    flex-wrap: wrap;
    margin: 24px -8px 0;
}
.ct-item {
    width: 25%;
    text-align: center;
    padding: 0 8px;
	position:relative;
	margin-bottom:16px;
  height: 92px;
      border-radius: 16px;
}
.ct-item>a{
	    display: block;
    position: relative;
  outline: none;
}

.ct-item .img-1{
-webkit-transition: all ease .3s;
	-o-transition: all ease .3s;
	transition: all ease .3s;
}
.ct-item .img-2{
	-webkit-transition: all ease .3s;
	-o-transition: all ease .3s;
	transition: all ease .3s;
	position: absolute;
	max-width: 100%;
	top: 0;
	left: 0;
	opacity:0;
}
.ct-item:hover .img-2{
	opacity:1;

}
.ct-name {
	    cursor: pointer;
	-webkit-transition: all ease .3s;
	-o-transition: all ease .3s;
	transition: all ease .3s;
  font-family: var(--g-font-1);
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    display: flex;
    align-items: center;
    letter-spacing: -0.08px;
    text-transform: uppercase;
    color: #1C2024;
    border: none;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), linear-gradient(92.97deg, rgba(143, 198, 0, 0.0517647) 0.04%, rgba(80, 0, 255, 0.0227451) 99.96%);
    box-shadow: inset -4.8px -7.2px 2.4px -4.8px #B3B3B3;
    border-radius: 16px;
    height: 100%;
    justify-content: center;
}
.ct-name.active, .ct-name:hover {
	background: #740EE7;
	color:#fff;
}
.ct-info,.pp-overlay {
    display: none;
}
.ct-info.active {
	display: block;
	max-width: 1369px;
	margin: 0 auto;
	left: 0;
	right: 0;
	position: fixed;
	z-index: 3;
	top: 15vh;
	background-image: url(https://file.hstatic.net/200000627799/file/grain_texture_29eeb9a229e94d3bb5c06883c6602738.png);
	background-color: #F9F9FB;
	text-align: left;
}
.pp-overlay.active{
	 display: block;
	    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.info-header {
    display: flex;
    align-items: center;
        justify-content: center;
    background: #381272;
    padding: 21px 43px;
}
.info-header span{
	    font-family: var(--g-font-1);
    font-weight: 700;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.12px;
    text-transform: uppercase;
    color: #FFFFFF;
}
.info-header span.info-close{
      position: absolute;
    right: 24px;
}
.info-list {
    padding: 32px 40px;
}
.info-item {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom:20px;
	cursor: pointer;
	position: relative;
}
.info-item span,.info-item a{
	   font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.08px;
    color: #1C2024;
}
.info-item .dt-icon{
  margin-right:30px;
  width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #FFFFFF;
    box-shadow: inset -4.8px -7.2px 2.4px -4.8px #B3B3B3;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.text-note {
    font-family: var(--g-font-2);
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    align-items: center;
    letter-spacing: -0.04px;
    color: #60646C;
    align-self: stretch;
  padding-top:20px;
}
.info-close{cursor: pointer;}
.info-item svg{
	-webkit-transition: all ease .3s;
	-o-transition: all ease .3s;
	transition: all ease .3s;
}
.svg-hover {
    position: absolute;
    left: 0;
    top: 0;
	-webkit-transition: all ease .3s;
	-o-transition: all ease .3s;
	transition: all ease .3s;
}
.svg-hover,.info-item:hover svg{
	opacity:0;
}
.info-item:hover .svg-hover{opacity:1;}
.info-item.item-1:hover span{	
	color: #740EE7;
}
.info-item.item-2:hover a{	
	color: #1877F2;
}
.info-item.item-3:hover a{	
	color: #EA501F;
}
.info-item.item-4:hover a{	
	color: #000083;
}
.info-item.item-5:hover a{	
	color: #69C9D0;
}
.dt-tab.first-tab-cw .ct-item{
      width: 33%;
      height: auto;
}
.dt-tab.first-tab-cw .ct-item .img-1{
     width: max-content;
    height: max-content;
}
h4.special-heading{
  font-family: var(--g-font-1);
    font-weight: 700;
    font-size: 32px;
    line-height: 120%;
    text-transform: uppercase;
    color: #1C2024;
  padding-bottom: 16px;
}
h4.special-heading.sh2{
  padding-bottom: 40px;
}
.dt-tab.first-tab-cw{
  margin-bottom: 104px;
}
.button-contact a{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 24px;
    gap: 12px;
    isolation: isolate;
    width: max-content;
    height: 64px;
    background: rgba(64, 0, 255, 0.0705882);
    border-radius: 16px;
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: -0.04px;
    color: rgba(86, 0, 215, 0.8196);
    outline: none;
}
.button-contact a:hover{
  opacity: 0.9;
}
@media(max-width:1700px){
	.main-pp{
		    max-width: 100%;
    padding: 0 120px 120px;
	}
	.text-note{padding-top:0;}
}
@media(max-width:1560px){
	.info-item span, .info-item a{
		    font-size: 20px;
	}
	.text-note {
    padding-top: 60px;
		font-size: 16px;
		line-height: 23px;
}
  .info-item .dt-icon{
    margin-right: 25px;
    width: 50px;
    height: 50px;
  }
  .info-item svg{
    width: 30px;
		height: auto;
  }
	.info-item .svg-hover{
		width: 50px;
		height: auto;
	}
	.info-list {
		padding: 30px 35px;
	}
	.info-header{
		padding: 15px 35px;
	}
	.info-header svg{
		width: 20px;
		height: auto;
	}
	.info-header span{
		    font-size: 28px;
    line-height: 32px;
	}
	.ct-info.active{
		max-width: 70vw;
	}
	.main-pp{
		padding: 0 100px 60px;
	}

	.heading-tab{    padding-bottom: 20px;}
	.ct-list{
		    margin: 20px -8px 0;
	}
	.ct-item{
		    margin-bottom: 20px;
		padding: 0 10px;
	}
	.dt-tab {
		margin-bottom: 45px;
	}

	.heading-tab svg{
    margin-right: 15px;
	}
}
@media(max-width:1440px){
	.text-note {
    padding-top: 55px;
		    font-size: 14px;
    line-height: 20px;
}
	.info-item span, .info-item a {
    font-size: 18px;
}
  .info-item .dt-icon{
    margin-right: 22px;
    width: 48px;
    height: 48px;
  }

	.info-item .svg-hover{
	width: 48px;
	}
	.info-item{
		margin-bottom: 16px;
	}
	.info-list {
		padding: 30px 30px;
	}
	.info-header svg {
		width: 18px;
		height: auto;
	}
	.info-header span {
		font-size: 26px;
		line-height: 30px;
	}
	.info-header {
		padding: 15px 30px;
	}
	.main-pp {
		padding: 0 90px 50px;
	}


	.heading-tab {
		padding-bottom: 15px;
	}

}
@media(max-width:1388px){
	.main-pp {
		padding: 0 80px 50px;
	}

	.dt-tab {
		margin-bottom: 35px;
	}

}
@media(max-width:1280px){
	.dt-tab {
		margin-bottom: 30px;
	}

	.info-header span {
		font-size: 24px;
		line-height: 28px;
	}
	.info-header svg {
		width: 16px;
		height: auto;
	}
  .info-item .dt-icon{
    width: 44px;
    height: 44px;
  }
  .info-item svg{
        width: 26px;
    height: auto;
  }
	.info-item .svg-hover{
		width: 44px;
	}
	.info-item span, .info-item a {
		font-size: 16px;
	}
	.text-note {
		padding-top: 50px;
		font-size: 12px;
		line-height: 18px;
	}
	.info-list {
		padding: 30px 30px 25px;
	}
}
@media(max-width:1199px){
	.ct-info.active {
		max-width: 90vw;
	}
	.main-pp {
		padding: 0 20px 30px;
	}
	.dt-tab.popup-tab .ct-item{
		    width: 33%;
	}

}
@media(max-width:767px){
	.info-item span, .info-item a {
		font-size: 14px;
		    display: block;
    overflow: scroll;
		width: calc(100% - 45px);
	}
  .info-item .dt-icon{
    margin-right: 10px;
		width: 32px;
    height: 32px;
  }
	.info-item svg {
		opacity:1 !important;
        width: 18px;
    height: auto;
	}
	.info-item .svg-hover {
		width: 30px;
		display:none;
	}
	.info-list {
		padding: 15px;
	}
	.info-header svg {
    width: 13px;
    height: auto;
}
	.info-header span {
    font-size: 16px;
    line-height: 120%;
}
	.ct-info.active {
		max-width: 90vw;
		top: 20vh;
	}
	.info-header {
		padding: 16px 24px;
            justify-content: left;
	}
	.img-header{
		margin-top: 0px;
	}
	.img-header img{
		width: 100%;
    height: auto;
	}
	.heading-tab h4 {
		font-size: 14px;
        line-height: 120%;
	}
	.heading-tab {
		padding-bottom: 10px;
	}
	.ct-list {
		margin: 15px -8px 0;
	}
	.ct-item,.dt-tab.popup-tab .ct-item{
		width:50%;
		margin-bottom: 15px;
    padding: 0 7px;
	}
	.heading-tab svg {

		margin-right: 5px;
	}
	.dt-tab {
		margin-bottom: 24px;
	}
	.ct-name {
		font-size: 10px;
		line-height: 18px;
		padding: 10px 5px;
            height: max-content;
        min-height: 68px;
	}
	.main-pp {
		padding: 0 15px 10px;
	}
  	.text-note{
		padding-top: 0px;
	}
  h4.special-heading{
    font-size: 16px;
  }
  .ct-item{
    height: max-content;
    min-height: 68px;
  }
  .dt-tab.first-tab-cw .ct-item{
    min-height: 160px;
    width: 50%;
    overflow: hidden;
    height: auto;
  }
   .dt-tab.first-tab-cw .ct-item:last-child{
     width: 100%;
   }
   .dt-tab.first-tab-cw .ct-item a{
         background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
     height: 100%;
   }
  .dt-tab.first-tab-cw .ct-item .img-1{
    opacity: 0;
  }
  .dt-tab.first-tab-cw {
      margin-bottom: 30px;
  }
  .button-contact {
      margin: 40px auto 100px;
  }
}