 .S_application_main {
     margin-top: 5%;
 }

 .S_application_main .app_title {
     font-family: 'Roboto-Bold';
     font-weight: normal;
     font-size: 50px;
     color: #000000;
     line-height: 72px;
     text-align: center;
     font-style: normal;
     text-transform: capitalize;
     margin-bottom: 55px;
 }

 .S_application_main .app_step1 .app_list {
     justify-content: flex-start;
     align-items: center;
     flex-wrap: wrap;
 }

 .S_application_main .app_step1 .app_list .app_item {
     width: 32%;
     margin-bottom: 22px;
     margin-right: 15px;
     position: relative;
     height: 0;
     overflow: hidden;
     padding-bottom: 21%;
     transition: all .5s ease-in-out;
 }

 .S_application_main .app_step1 .app_list .app_item:nth-child(3n) {
     margin-right: 0;
 }

 .S_application_main .app_step1 .app_list .app_item img {
     position: absolute;
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
     object-fit: cover;
 }

 .S_application_main .app_step1 .app_list .app_item .app_info {
     position: absolute;
     left: 0;
     bottom: 0;
     padding: 25px 33px;
     width: 100%;
     height: 30%;
     transition: height .5s ease-in-out, padding .5s ease-in-out;
 }

 .S_application_main .app_step1 .app_list .app_item:hover .app_info {
     width: 100%;
     height: 100%;
     padding: 122px 33px;
 }

 .S_application_main .app_step1 .app_list .app_item .app_info:after {
     width: 100%;
     height: 30%;
     position: absolute;
     bottom: 0;
     left: 0;
     content: '';
     background-color: rgba(0, 0, 0, .2);
     z-index: 9;
     opacity: 0;
     transition: opacity .5s ease-in-out, height .5s ease-in-out;
 }

 .S_application_main .app_step1 .app_list .app_item:hover .app_info:after {
     height: 100%;
     opacity: 1;
 }

 .S_application_main .app_step1 .app_list .app_item .app_info .item_title {
     position: relative;
     font-family: 'Roboto-Bold';
     font-weight: normal;
     font-size: 26px;
     color: #FFFFFF;
     line-height: 1.5;
     text-align: center;
     font-style: normal;
     text-transform: capitalize;
     z-index: 99;
 }


 .S_application_main .app_step1 .app_list .app_item .app_info .item_desc {
     position: relative;
     display: none;
     font-family: 'Roboto-Regular';
     font-weight: 400;
     font-size: 18px;
     color: #FFFFFF;
     line-height: 1.5;
     text-align: center;
     font-style: normal;
     text-transform: none;
     z-index: 99;
 }

 .S_application_main .app_step1 .app_list .app_item:hover .app_info .item_desc {
     display: block;
 }


 .S_application_main .app_step2 {
     margin-top: 5%;
 }

 .S_application_main .app_step2 .app_list {
     justify-content: flex-start;
     align-items: flex-start;
     flex-wrap: wrap;
 }

 .S_application_main .app_step2 .app_list .app_item {
     width: 24%;
     position: relative;
     height: 0;
     overflow: hidden;
     padding-bottom: 17%;
     margin-right: 12px;
     margin-bottom: 20px;
     -webkit-transition: all .5s ease-out 0ms;
     -moz-transition: all .5s ease-out 0ms;
     -o-transition: all .5s ease-out 0ms;
     transition: all .5s ease-out 0ms;
 }

 .S_application_main .app_step2 .app_list .app_item img {
     position: absolute;
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
     object-fit: cover;
 }


 .S_application_main .app_step2 .app_list .app_item:hover img {
     -webkit-transform: scale(1.08);
     -moz-transform: scale(1.08);
     -o-transform: scale(1.08);
     transform: scale(1.08);
 }

 .S_application_main .app_step2 .app_list .app_item:nth-child(4n) {
     margin-right: 0;
 }

 .S_application_main .app_step2 .app_list .app_item .item_tite {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 20%;
     font-family: 'Roboto-Regular';
     font-weight: 400;
     font-size: 24px;
     color: #FFFFFF;
     line-height: 46px;
     text-align: center;
     font-style: normal;
     text-transform: capitalize;
 }

 .S_application_main .app_step3 {
     margin-top: 5%;
 }

 .S_application_main .app_step3 .pro_list {
     justify-content: flex-start;
     align-items: flex-start;
     flex-wrap: wrap;
 }

 .S_application_main .app_step3 .pro_list .pro_item {
     width: 32%;
     margin-right: 20px;
     margin-bottom: 20px;
     -webkit-transition: all .5s ease-out 0ms;
     -moz-transition: all .5s ease-out 0ms;
     -o-transition: all .5s ease-out 0ms;
     transition: all .5s ease-out 0ms;
 }

 .S_application_main .app_step3 .pro_list .pro_item:nth-child(3n) {
     margin-right: 0;
 }

 .S_application_main .app_step3 .pro_list .pro_item .item_img {
     position: relative;
     height: 0;
     overflow: hidden;
     padding-bottom: 100%;
 }

 .S_application_main .app_step3 .pro_list .pro_item .item_img img {
     position: absolute;
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
     object-fit: cover;
 }

 .S_application_main .app_step3 .pro_list .pro_item:hover .item_img img {
     -webkit-transform: scale(1.08);
     -moz-transform: scale(1.08);
     -o-transform: scale(1.08);
     transform: scale(1.08);
 }

 .S_application_main .app_step3 .pro_list .pro_item .item_title {
     font-family: 'Roboto-Regular';
     font-weight: 400;
     font-size: 16px;
     color: #333333;
     line-height: 1.5;
     text-align: center;
     font-style: normal;
     text-transform: capitalize;
     background: #F4F4F4;
     transition: all .5s ease-out;
     padding: 10px 20px;
 }

 .S_application_main .app_step3 .pro_list .pro_item .item_title a {
     display: inline-block;
     color: #333333;
     height: 30px;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;
     overflow: hidden;
     text-overflow: ellipsis;
 }


 .S_application_main .app_step3 .pro_list .pro_item:hover .item_title a {
     color: #FFFFFF;
 }

 .S_application_main .app_step3 .pro_list .pro_item:hover .item_title {
     background: #000000;
 }

 .application_item a {
     color: #333333 !important;
 }

 /* 
 #app-tab-content1 .tab-pane {
     display: none;
 } */

 #app-tab-content1 .tab-pane.active {
     display: flex;
 }

 #app-tab-content2 .tab-pane {
     display: none;
 }

 #app-tab-content2 .tab-pane.active {
     display: flex;
 }

 @media (max-width:950px) {
     .S_application_main .app_title {
         font-size: 30px;
         line-height: 1.5;
         margin-bottom: 30px;
     }

     .S_application_main .app_step1 .app_list .app_item {
         width: 100%;
         margin-right: 0;
         padding-bottom: 66%;
     }

     .S_application_main .app_step2 .app_list .app_item {
         width: 100%;
         margin-right: 0;
         padding-bottom: 75%;
     }

     .S_application_main .app_step3 .pro_list .pro_item {
         width: 100%;
         margin-right: 0;
     }

     .S_application_main .app_step3 .pro_list .pro_item .item_title a {
         height: auto;
         -webkit-line-clamp: unset;
         overflow: visible;
     }
 }