#adRhsLnk{display:none !important}
.heading-menu{display:none;}
#scroll {
    padding: 0;
}

html,body{font: 400 14px/24px 'Zoho_Puvi_Regular';color: black;overflow-x:hidden;}
.heading {
    text-align: center;
    padding: 60px 0px;
    margin-bottom: 0;
    background: url('https://www.manageengine.cn/products/self-service-password/images/what-is-adfs-and-how-does-adfs-work-banner.png');
    color: white;
    background-position: center;
    background-size: 100% 100%;
}
.heading .main-tit {
    font-size:36px;
    font-weight:700;
}

p {
    text-align: center;
    font-size: 15px;
    line-height: 24px;
}

#maincontent h2 {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    margin: 38px 0 15px;
}

.tiles {
    list-style-type: none;
    display: inline-block;
    width: 100%;
    padding: 0 !important;
    margin-top: 33px;
}

.tiles li {
    list-style: none;
    position: relative;
}

.tiles-three li{
opacity:0;
margin-top:-50px;
transition: .5s;
}

.tiles li.anim {
    margin: 0 1% 30px;
    opacity: 1;
}


.tiles-three li {
    max-width: 25%;
    float: left;
    margin: 16px;
    border: 1px solid #979fb6;
    padding: 46px 30px;
    padding-bottom: 17px;
    text-align: center;
    background: #f6f8fe;
    border-radius: 10px;
    min-height: 155px;
    position: relative;
transition:.5s;
}
/*.tiles-three li:hover {
    -webkit-box-shadow: 0 0 12px rgba(0,0,0,.13);
    box-shadow: 0 0 12px rgba(0,0,0,.13);
    transform: scale(1.03);
}
*/
.comp .tiles-three li:hover {
    box-shadow: 0px 13px 18px -11px rgb(17 20 33 / 41%);
}

.tiles li span {
    display: block;
    font-weight: 700;
    margin-bottom: 10px;
}

.tiles-three li:nth-of-type(2) {
    margin-left: 0;
    margin-right: 0;
}

.tiles li:before {
    content: '';
    width: 60px;
    height: 63px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: -31px;
    background: url('https://www.manageengine.cn/products/self-service-password/images/what-is-adfs-and-how-does-adfs-work-sprite.png') no-repeat;
    background-size: 253px;
    background-position: -5px -2px;
}
.components li:nth-of-type(2):before{
     background-position: -87px -2px;
} 
.components li:nth-of-type(3):before{
     background-position: -170px -3px;
} 

b {
    font-weight: 700;
}

.how p {
    margin: 5px;
}

.how img {
    width: 80%;
    margin: auto;
    text-align: center;
    margin: 40px 0;
max-width:1000px !important;
}

.how {
    text-align: center;
}

.how ol {
    text-align: left;
    width: 80%;
    margin: auto;
    font-size: 15px;
    font-weight: 600;
}

.how ol li {
    margin: 21px 0;
    padding-left: 10px;
}
.why-use {
    position: relative;
    display: inline-block;
margin-top: 48px;
}

.why-use:before {
    content: '';
    width: 100%;
    height: 480px;
    background: #f6f6fd;
    position: absolute;
    left: 0;
    z-index: -1;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
}
.middle {
    max-width: 1000px;
    margin: auto;
}
.why-use .tiles-three li {
    border: none;
    padding: 10px 24px 10px 50px;
    text-align: left;
    margin: 0 12px;
    width: 23%;
    min-height: auto;
}

.why-use .tiles-three li:before {
    left: -17px;
    margin: 0;
    top: -1px;
    background-position: -6px -86px;
}
.why-use .tiles-three li:nth-of-type(2):before{
    background-position: -61px -86px;
}
.why-use .tiles-three li:nth-of-type(3):before{
    background-position: -120px -86px;
}
div#tab1 {
    display: block;
}

.all-tab {
    background: #6679b3;
    border-radius: 10px;
    padding: 25px 63px;
    display: inline-block;
    padding-right: 89px;
    font-size: 15px;
    overflow:hidden;
    position:relative;
    margin-top: 30px;
}
.all-tab:before{
    content:'';
    width:100px;
    height:100px;
    background:#ff000000;
    border: 30px solid #6b7eb6;
    border-radius:100%;
    position:absolute;
    z-index:0;
    bottom: -84px;
    left: -66px;
}
.all-tab:after{
    content:'';
    width: 111px;
    height: 123px;
    background:#ff000000;
    border: 40px solid #6b7eb6;
    border-radius: 100%;
    position: absolute;
    z-index: 0;
    top: -83px;
    right: -78px;
}
.tab-title {
    width: 200px;
    float: left;
    position: relative;
    z-index: 1;
}

.tab-title li {
    list-style: none;
    color: white;
    font-size: 15px;
    background: none;
    margin-left: 0;
    padding: 10px;
    padding-left: 20px;
    transition: .5s;
    cursor:pointer;
}

.tab-title ul {
    padding: 0 !important;
    margin: 0;
}

.tab-cont {
    width: calc( 100% - 200px );
    float: right;
    background: #f6f6fd;
    color: #010101;
    border-radius: 5px;
    border-top-left-radius: 0;
    padding: 9px 49px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}
.tab-cont div{transition:.5s}
.tab-cont p {
    font-size: 15px;
    text-align: left;
    line-height: 25px;
}

.tab-title li.activeTab {
    background: #f6f6fd;
    color: black;
    font-weight: 700;
    border-left: 5px solid #26345f;
    border-radius: 4px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.tab-title li:hover{
    background: #f6f6fd;
    color: black;
    font-weight: 700;
    border-left: 5px solid #26345f;
    border-radius: 4px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.how-Adssp {
    display: inline-block;
    margin-top: 28px;
}
.how-Adssp *{
    text-align:left;
}

#maincontent .how-Adssp h2 {
    margin: 38px 0;
text-align:left;
}

.tiles-two {
    margin-top: 18px;
}

.tiles-two li {
    box-sizing: border-box;
    width: 46%;
    float: left;
    padding-left: 70px;
    margin-right: 2%;
    margin-bottom: 25px;
    padding-right: 11px;
}

.tiles-two li:before {
    margin: 0;
    left: -8px;
    top: -11px;
    background-position: -179px -88px;
}
.tiles-two li:nth-of-type(2):before {
    background-position: 5px -158px;
}
.tiles-two li:nth-of-type(3):before {
    background-position: -57px -158px;
}
.tiles-two li:nth-of-type(4):before {
    background-position: -117px -158px;
}
.tiles-two li:nth-of-type(5):before {
    background-position: -188px -158px;
}
.tiles-two li span {
    margin-bottom: 5px;
}

.foot-ban {
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    background: url('https://www.manageengine.cn/products/self-service-password/images/what-is-adfs-and-how-does-adfs-work-foot-ban.png') no-repeat;
    background-size: cover;
    background-position: left;
    padding-left: 313px;
    padding-right: 35px;
    padding-bottom: 34px;
    border-radius: 8px;
    margin-top:30px;
    margin-bottom:20px;
transition:.5s;
}

.foot-ban h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
}

.foot-ban a {
    padding: 10px 22px;
    width: 116px;
    display: inline-block;
    font-size: 16px;
    color: white;
    margin-right: 10px;
    text-align: center;
    font-weight: 600;
transition:.2s ease-in;
}

.foot-ban a:nth-of-type(1) {
    background: #7b95f5;
}
.foot-ban a:nth-of-type(2) {
    background: #e9142b;
}

.foot-ban a:nth-of-type(1):hover {
    background: #5a77e2;
    text-decoration: none;
}


.foot-ban a:nth-of-type(2):hover , .foot-ban:hover a:nth-of-type(2){
    background: #a51b1e;
    text-decoration: none;
}

@media screen and (max-width : 1100px){
.tiles-three{
    margin-top: 30px;
    box-sizing: border-box;
    display: inline-flex;
    width: 100%;
}
.tiles-three li {
    max-width: 23%;
}
}
@media screen and (max-width : 992px){
.why-use {
    padding: 20px;
    box-sizing: border-box;
width:100%;
    width: 100%;
    margin-top: 0;
}
.why-use .tiles-three li {
    max-width: 100%;
width: 22%;
    border: 1px solid #979fb6;
    padding-bottom: 17px;
    background: #f6f8fe;
    padding: 20px 19px 20px 67px;
}
.tiles-three li {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    margin-bottom: 47px;
    margin-top: 20px;
}
.why-use .tiles-three li {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 20px;
margin-left:0;
}
.tiles-three {
    display: block;
}
.why-use:before{
display:none;
}
.why-use .tiles-three li:before {
    left: 5px;
top:8px;
}
.tab-title {
    width: 100%;
}

.tab-title li.activeTab {
    border-left: none;
    border-bottom: 5px solid #26345f;
    border-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.tab-title li {
    width: 33%;
    float: left;
    box-sizing: border-box;
    margin-bottom: 10px;
    text-align: center;
    padding-left: 5px;
    font-size: 12px;
    line-height: 1.3;
}

.tab-cont {
    width: 100%;
    padding: 10px;
}

.how-Adssp {
    margin-top: 0;
}

.tiles-two li {
    width: 100%;
}

.foot-ban {
    background: #efeefd;
    padding: 27px;
    text-align: center;
    padding-top: 0;
}

#maincontent h2 {
    margin-top: 4px;
    font-size: 20px;
    line-height: 25px;
}

.all-tab {
    margin-top: 7px;
    padding: 15px;
}

.heading .main-tit {
    font-size: 24px;
}

.heading {
    padding: 30px 0;
}
.foot-ban a {
    margin-bottom: 10px;
}
.tiles-three li{
opacity:1;
margin-top:10px;
}
.components {
    padding: 20px !important;
}
}



/*New Css*/

@media screen and (min-width : 992px ){
.tab-title li.activeTab,.tab-title li {
    border: none;
    position: relative;
    overflow: hidden;
    transition:.5s ease-in;
}

.tab-title li:before {
    content: '';
    width: 5px;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0;
    background: #26345f;
    display:none;
    transition:.5s ease-in;
}
.tab-title li:hover:before{
    display:block;
}
.tab-title li.activeTab:before {
display:block;
}
.tab-title li:hover{
    border:none;
    font-weight:inherit;
}
.tab-title li.activeTab:hover{
    font-weight:bold;
}


.tab-title {
    right: -5px;
}

.tab-cont {
    border-radius: 5px;
    min-height: 175px;
}
}

@media screen and (max-width : 992px){
.comp {
    margin-top: 40px;
}

#maincontent .middle h2:nth-of-type(2) {
    margin: 30px 0;
    display: inline-block;
}

.how-Adssp {
    padding: 20px;
}

#maincontent .how-Adssp h2 {
    margin: 0;
}

.foot-ban {
    padding: 10px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    float: none;
    display: block;
    margin-bottom: 25px;
    padding-bottom: 25px;
}

.foot-ban h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
}
.tiles li span {
    font-size: 16px;
}

.tab-title li{
    height: 50px;
}
.how img {
    width: 90%;
    margin: 0;
    margin-top: 20px;
}
.tiles li span {
    font-size: 16px;
    line-height: 30px;
    border-bottom: 1px solid gray;
    display: table;
}
#scroll {
    padding: 0;
    padding-top: 35px;
}
}

@media screen and (max-width : 580px){
.lnkTab.fr.lnkDldMar {
    position: relative;
    top: -20px;
    margin-right: 53px;
}
}