开发首页 解决方案列表页 解决方案2个详情页

assets/css/style.css

@@ -1,4 +1,4 @@
-/*-----------------------------------------------------------------------------------
+    /*-----------------------------------------------------------------------------------
     CSS INDEX
     ===================
     01. Common
@@ -31,5131 +31,5288 @@
     28. Service page
     29. Technology page
 -----------------------------------------------------------------------------------*/
-
-
-/*===========================
+    /*===========================
 	COMMON CSS 
 ===========================*/
-
-@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap");
-body {
-    /* font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu; */
-    font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei";
-    font-weight: normal;
-    font-style: normal;
-    color: #041d38;
-    overflow-x: hidden;
-    font-size: 16px;
-    line-height: 1.6;
-    -webkit-font-smoothing: antialiased;
-}
-
-.cannot_selected {
-    -moz-user-select: none;
-    /*火狐*/
-    -webkit-user-select: none;
-    /*webkit浏览器*/
-    -ms-user-select: none;
-    /*IE10*/
-    -khtml-user-select: none;
-    /*早期浏览器*/
-    user-select: none;
-}
-
-.text_nowrap {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-* {
-    margin: 0;
-    padding: 0;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-}
-
-img {
-    max-width: 100%;
-    -webkit-transition: all 0.4s ease-out 0s;
-    transition: all 0.4s ease-out 0s;
-}
-
-a:focus,
-input:focus,
-textarea:focus,
-button:focus,
-.slick-initialized .slick-slide:focus,
-.btn:focus {
-    text-decoration: none;
-    outline: none;
-    -webkit-box-shadow: none;
-    box-shadow: none;
-}
-
-a:focus,
-a:hover {
-    text-decoration: none;
-}
-
-i,
-span,
-a {
-    display: inline-block;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    font-family: "Oswald", sans-serif;
-    font-weight: 700;
-    margin: 0px;
-}
-
-h1,
-h1 a,
-h2,
-h2 a,
-h3,
-h3 a,
-h4,
-h4 a,
-h5,
-h5 a,
-h6,
-h6 a {
-    color: #041d38;
-}
-
-h1 {
-    font-size: 48px;
-}
-
-h2 {
-    font-size: 36px;
-}
-
-h3 {
-    font-size: 28px;
-}
-
-h4 {
-    font-size: 24px;
-}
-
-h5 {
-    font-size: 18px;
-}
-
-h6 {
-    font-size: 16px;
-}
-
-ul,
-ol {
-    margin: 0px;
-    padding: 0px;
-    list-style-type: none;
-}
-
-p {
-    margin: 0px;
-}
-
-a {
-    -webkit-transition: all 0.3s ease-out 0s;
-    transition: all 0.3s ease-out 0s;
-}
-
-a,
-a:hover {
-    color: #ffaa17;
-}
-
-input,
-select,
-textarea {
-    width: 100%;
-    height: 50px;
-    border: 2px solid #ededed;
-    font-size: 14px;
-    font-weight: 600;
-    font-family: "Oswald", sans-serif;
-    color: #041d38;
-    text-transform: uppercase;
-    padding: 0 30px;
-}
-
-textarea {
-    padding-top: 20px;
-    height: 120px;
-}
-
-.input-group {
-    position: relative;
-}
-
-.input-group input,
-.input-group textarea {
-    padding-left: 65px;
-}
-
-.input-group .icon {
-    position: absolute;
-    left: 30px;
-    top: 50%;
-    -webkit-transform: translateY(-50%);
-    transform: translateY(-50%);
-    color: #ffaa17;
-}
-
-.input-group.textarea .icon {
-    top: 20px;
-    -webkit-transform: translateY(0);
-    transform: translateY(0);
-}
-
-::-webkit-input-placeholder {
-    opacity: 1;
-}
-
-:-ms-input-placeholder {
-    opacity: 1;
-}
-
-::-ms-input-placeholder {
-    opacity: 1;
-}
-
-::placeholder {
-    opacity: 1;
-}
-
-
-/*===== Common class Style =====*/
-
-.blue_fc1 {
-    color: #2a2e78
-}
-
-#preloader {
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    top: 0px;
-    left: 0px;
-    background-color: #ffaa17;
-    z-index: 9999999;
-}
-
-#preloader>div {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-}
-
-#preloader>div div {
-    height: 40px;
-    width: 40px;
-    background-color: #fff;
-    -webkit-animation: rotateplane 1.2s infinite ease-in-out;
-    animation: rotateplane 1.2s infinite ease-in-out;
-}
-
-.main-btn {
-    font-size: 14px;
-    font-weight: 700;
-    font-family: "Oswald", sans-serif;
-    color: #041d38;
-    text-transform: uppercase;
-    -webkit-transition: all 0.3s ease-out 0s;
-    transition: all 0.3s ease-out 0s;
-    padding: 0 45px;
-    background-color: #fff;
-    border: 2px solid #fff;
-    position: relative;
-    height: 60px;
-    line-height: 60px;
-}
-
-.main-btn::after,
-.main-btn::before {
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    height: 10px;
-    width: 2px;
-    content: '';
-    background-color: #ffaa17;
-    -webkit-transition: all 0.3s ease-out 0s;
-    transition: all 0.3s ease-out 0s;
-}
-
-.main-btn::before {
-    width: 10px;
-    height: 2px;
-}
-
-.main-btn:hover {
-    color: #041d38;
-}
-
-.main-btn.btn-borderd {
-    border: 2px solid rgba(4, 29, 56, 0.1);
-    background-color: transparent;
-}
-
-.main-btn.btn-borderd:hover {
-    background-color: #ffaa17;
-    border-color: #ffaa17;
-}
-
-.main-btn.btn-borderd:hover::after,
-.main-btn.btn-borderd:hover::before {
-    background-color: #041d38;
-}
-
-.main-btn.btn-filled {
-    background-color: #ffaa17;
-    border-color: #ffaa17;
-}
-
-.main-btn.btn-filled::after,
-.main-btn.btn-filled::before {
-    background-color: #041d38;
-}
-
-.main-btn.btn-filled:hover {
-    background-color: transparent;
-    border-color: rgba(4, 29, 56, 0.1);
-}
-
-.main-btn.btn-filled:hover::after,
-.main-btn.btn-filled:hover::before {
-    background-color: rgba(4, 29, 56, 0.1);
-}
-
-.section-title h2 {
-    font-size: 48px;
-    text-transform: uppercase;
-    line-height: 1.2;
-    letter-spacing: -1px;
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
-    .section-title h2 {
-        font-size: 38px;
+    
+    @import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap");
+    body {
+        /* font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu; */
+        font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei";
+        font-weight: normal;
+        font-style: normal;
+        color: #041d38;
+        overflow-x: hidden;
+        font-size: 16px;
+        line-height: 1.6;
+        -webkit-font-smoothing: antialiased;
+    }
+    
+    .cannot_selected {
+        -moz-user-select: none;
+        /*火狐*/
+        -webkit-user-select: none;
+        /*webkit浏览器*/
+        -ms-user-select: none;
+        /*IE10*/
+        -khtml-user-select: none;
+        /*早期浏览器*/
+        user-select: none;
+    }
+    
+    .text_nowrap {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    
+    * {
+        margin: 0;
+        padding: 0;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
     }
-}
-
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-    .section-title h2 {
-        font-size: 40px;
+    
+    img {
+        max-width: 100%;
+        -webkit-transition: all 0.4s ease-out 0s;
+        transition: all 0.4s ease-out 0s;
+    }
+    
+    a:focus,
+    input:focus,
+    textarea:focus,
+    button:focus,
+    .slick-initialized .slick-slide:focus,
+    .btn:focus {
+        text-decoration: none;
+        outline: none;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+    }
+    
+    a:focus,
+    a:hover {
+        text-decoration: none;
+    }
+    
+    i,
+    span,
+    a {
+        display: inline-block;
     }
-}
-
-@media only screen and (min-width: 576px) and (max-width: 767px) {
-    .section-title h2 {
-        font-size: 40px;
+    
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        font-family: "Oswald", sans-serif;
+        font-weight: 700;
+        margin: 0px;
+    }
+    
+    h1,
+    h1 a,
+    h2,
+    h2 a,
+    h3,
+    h3 a,
+    h4,
+    h4 a,
+    h5,
+    h5 a,
+    h6,
+    h6 a {
+        color: #041d38;
+    }
+    
+    h1 {
+        font-size: 48px;
+    }
+    
+    h2 {
+        font-size: 36px;
+    }
+    
+    h3 {
+        font-size: 28px;
+    }
+    
+    h4 {
+        font-size: 24px;
+    }
+    
+    h5 {
+        font-size: 18px;
     }
-}
-
-@media (max-width: 575px) {
-    .section-title h2 {
-        font-size: 32px;
+    
+    h6 {
+        font-size: 16px;
     }
-}
-
-@media (max-width: 399px) {
-    .section-title h2 {
-        font-size: 26px;
-    }
-}
-
-.section-title span.title-tag {
-    text-transform: uppercase;
-    color: #2a2e78;
-    /* font-family: "Oswald", sans-serif; */
-    line-height: 1;
-    font-size: 36px;
-    display: inline-block;
-    margin-bottom: 20px;
-    position: relative;
-}
-
-.section-title.left-border span.title-tag {
-    padding-left: 50px;
-}
-
-.section-title.left-border span.title-tag::before {
-    position: absolute;
-    left: 0;
-    top: 50%;
-    -webkit-transform: translateY(-50%);
-    transform: translateY(-50%);
-    height: 4px;
-    width: 30px;
-    background-color: #2a2e78;
-    content: '';
-}
-
-.section-title.both-border span.title-tag {
-    padding-left: 50px;
-    padding-right: 50px;
-}
-
-.section-title.both-border span.title-tag::before,
-.section-title.both-border span.title-tag::after {
-    position: absolute;
-    left: 0;
-    top: 50%;
-    -webkit-transform: translateY(-50%);
-    transform: translateY(-50%);
-    height: 3px;
-    width: 40px;
-    background-color: #2a2e78;
-    content: '';
-}
-
-.section-title.both-border span.title-tag::after {
-    left: auto;
-    right: 0;
-}
-
-
-/* Custom Container Width */
-
-@media (min-width: 1600px) {
-    .container-fluid.custom-container-one {
-        max-width: 1520px;
-    }
-}
-
-@media (min-width: 1600px) {
-    .container-fluid.custom-container-two {
-        max-width: 1400px;
-    }
-}
-
-
-/* Animation keyfranes */
-
-@-webkit-keyframes sticky {
-    0% {
-        top: -200px;
-    }
-    100% {
-        top: 0;
+    
+    ul,
+    ol {
+        margin: 0px;
+        padding: 0px;
+        list-style-type: none;
+    }
+    
+    p {
+        margin: 0px;
+    }
+    
+    a {
+        -webkit-transition: all 0.3s ease-out 0s;
+        transition: all 0.3s ease-out 0s;
+    }
+    
+    a,
+    a:hover {
+        color: #ffaa17;
+    }
+    
+    input,
+    select,
+    textarea {
+        width: 100%;
+        height: 50px;
+        border: 2px solid #ededed;
+        font-size: 14px;
+        font-weight: 600;
+        font-family: "Oswald", sans-serif;
+        color: #041d38;
+        text-transform: uppercase;
+        padding: 0 30px;
     }
-}
-
-@keyframes sticky {
-    0% {
-        top: -200px;
+    
+    textarea {
+        padding-top: 20px;
+        height: 120px;
     }
-    100% {
-        top: 0;
+    
+    .input-group {
+        position: relative;
     }
-}
-
-@-webkit-keyframes rotateplane {
-    0% {
-        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-    }
-    50% {
-        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-    }
-    100% {
-        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-    }
-}
-
-@keyframes rotateplane {
-    0% {
-        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-    }
-    50% {
-        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-    }
-    100% {
-        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-    }
-}
-
-@-webkit-keyframes hvr-buzz-out {
-    10% {
-        -webkit-transform: translateX(3px) rotate(2deg);
-        transform: translateX(3px) rotate(2deg);
-    }
-    20% {
-        -webkit-transform: translateX(-3px) rotate(-2deg);
-        transform: translateX(-3px) rotate(-2deg);
-    }
-    30% {
-        -webkit-transform: translateX(3px) rotate(2deg);
-        transform: translateX(3px) rotate(2deg);
-    }
-    40% {
-        -webkit-transform: translateX(-3px) rotate(-2deg);
-        transform: translateX(-3px) rotate(-2deg);
-    }
-    50% {
-        -webkit-transform: translateX(2px) rotate(1deg);
-        transform: translateX(2px) rotate(1deg);
-    }
-    60% {
-        -webkit-transform: translateX(-2px) rotate(-1deg);
-        transform: translateX(-2px) rotate(-1deg);
-    }
-    70% {
-        -webkit-transform: translateX(2px) rotate(1deg);
-        transform: translateX(2px) rotate(1deg);
-    }
-    80% {
-        -webkit-transform: translateX(-2px) rotate(-1deg);
-        transform: translateX(-2px) rotate(-1deg);
-    }
-    90% {
-        -webkit-transform: translateX(1px) rotate(0);
-        transform: translateX(1px) rotate(0);
-    }
-    100% {
-        -webkit-transform: translateX(-1px) rotate(0);
-        transform: translateX(-1px) rotate(0);
-    }
-}
-
-@keyframes hvr-buzz-out {
-    10% {
-        -webkit-transform: translateX(3px) rotate(2deg);
-        transform: translateX(3px) rotate(2deg);
-    }
-    20% {
-        -webkit-transform: translateX(-3px) rotate(-2deg);
-        transform: translateX(-3px) rotate(-2deg);
-    }
-    30% {
-        -webkit-transform: translateX(3px) rotate(2deg);
-        transform: translateX(3px) rotate(2deg);
-    }
-    40% {
-        -webkit-transform: translateX(-3px) rotate(-2deg);
-        transform: translateX(-3px) rotate(-2deg);
-    }
-    50% {
-        -webkit-transform: translateX(2px) rotate(1deg);
-        transform: translateX(2px) rotate(1deg);
-    }
-    60% {
-        -webkit-transform: translateX(-2px) rotate(-1deg);
-        transform: translateX(-2px) rotate(-1deg);
-    }
-    70% {
-        -webkit-transform: translateX(2px) rotate(1deg);
-        transform: translateX(2px) rotate(1deg);
-    }
-    80% {
-        -webkit-transform: translateX(-2px) rotate(-1deg);
-        transform: translateX(-2px) rotate(-1deg);
-    }
-    90% {
-        -webkit-transform: translateX(1px) rotate(0);
-        transform: translateX(1px) rotate(0);
-    }
-    100% {
-        -webkit-transform: translateX(-1px) rotate(0);
-        transform: translateX(-1px) rotate(0);
-    }
-}
-
-@-webkit-keyframes ripple {
-    0%,
-    35% {
-        -webkit-transform: scale(0);
-        transform: scale(0);
+    
+    .input-group input,
+    .input-group textarea {
+        padding-left: 65px;
+    }
+    
+    .input-group .icon {
+        position: absolute;
+        left: 30px;
+        top: 50%;
+        -webkit-transform: translateY(-50%);
+        transform: translateY(-50%);
+        color: #ffaa17;
+    }
+    
+    .input-group.textarea .icon {
+        top: 20px;
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+    }
+    
+     ::-webkit-input-placeholder {
         opacity: 1;
     }
-    50% {
-        -webkit-transform: scale(1.5);
-        transform: scale(1.5);
-        opacity: 0.8;
-    }
-    100% {
-        opacity: 0;
-        -webkit-transform: scale(2);
-        transform: scale(2);
-    }
-}
-
-@keyframes ripple {
-    0%,
-    35% {
-        -webkit-transform: scale(0);
-        transform: scale(0);
+    
+     :-ms-input-placeholder {
         opacity: 1;
     }
-    50% {
-        -webkit-transform: scale(1.5);
-        transform: scale(1.5);
-        opacity: 0.8;
+    
+     ::-ms-input-placeholder {
+        opacity: 1;
     }
-    100% {
-        opacity: 0;
-        -webkit-transform: scale(2);
-        transform: scale(2);
+    
+     ::placeholder {
+        opacity: 1;
     }
-}
-
-@-webkit-keyframes ripple-white {
-    0% {
-        opacity: 0;
-        -webkit-transform: scale(1);
-        transform: scale(1);
+    /*===== Common class Style =====*/
+    
+    .blue_fc1 {
+        color: #2a2e78
     }
-    40% {
-        opacity: 0.2;
-        -webkit-transform: scale(1.2);
-        transform: scale(1.2);
+    
+    #preloader {
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        top: 0px;
+        left: 0px;
+        background-color: #ffaa17;
+        z-index: 9999999;
+    }
+    
+    #preloader>div {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-pack: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        height: 100%;
+        width: 100%;
     }
-    100% {
-        opacity: 0;
-        -webkit-transform: scale(1.4);
-        transform: scale(1.4);
+    
+    #preloader>div div {
+        height: 40px;
+        width: 40px;
+        background-color: #fff;
+        -webkit-animation: rotateplane 1.2s infinite ease-in-out;
+        animation: rotateplane 1.2s infinite ease-in-out;
     }
-}
-
-@keyframes ripple-white {
-    0% {
-        opacity: 0;
-        -webkit-transform: scale(1);
-        transform: scale(1);
+    
+    .main-btn {
+        font-size: 16px;
+        font-weight: 400;
+        font-family: "Oswald", sans-serif;
+        color: #666666;
+        text-transform: uppercase;
+        -webkit-transition: all 0.3s ease-out 0s;
+        transition: all 0.3s ease-out 0s;
+        padding: 0 50px;
+        background-color: #f0f0f0;
+        opacity: 1;
+        position: relative;
+        height: 56px;
+        line-height: 56px;
+        border-radius: 28px
+    }
+    
+    .main-btn::before {
+        width: 10px;
+        height: 2px;
+    }
+    
+    .main-btn:hover {
+        color: #666666;
+        opacity: .7
+    }
+    
+    .main-btn.btn-borderd {
+        border: 2px solid rgba(4, 29, 56, 0.1);
+        background-color: transparent;
+    }
+    
+    .main-btn.btn-borderd:hover {
+        background-color: #ffaa17;
+        border-color: #ffaa17;
+    }
+    
+    .main-btn.btn-borderd:hover::after,
+    .main-btn.btn-borderd:hover::before {
+        background-color: #041d38;
+    }
+    /* .main-btn.btn-filled {
+    background-color: #ffaa17;
+    border-color: #ffaa17;
+} */
+    
+    .main-btn.btn-filled::after,
+    .main-btn.btn-filled::before {
+        background-color: #041d38;
+    }
+    
+    .main-btn.btn-filled:hover {
+        background-color: transparent;
+        border-color: rgba(4, 29, 56, 0.1);
+    }
+    
+    .main-btn.btn-filled:hover::after,
+    .main-btn.btn-filled:hover::before {
+        background-color: rgba(4, 29, 56, 0.1);
+    }
+    
+    .section-title h2 {
+        font-size: 48px;
+        text-transform: uppercase;
+        line-height: 1.2;
+        letter-spacing: -1px;
+    }
+    
+    @media only screen and (min-width: 992px) and (max-width: 1200px) {
+        .section-title h2 {
+            font-size: 38px;
+        }
+    }
+    
+    @media only screen and (min-width: 768px) and (max-width: 991px) {
+        .section-title h2 {
+            font-size: 40px;
+        }
+    }
+    
+    @media only screen and (min-width: 576px) and (max-width: 767px) {
+        .section-title h2 {
+            font-size: 40px;
+        }
+    }
+    
+    @media (max-width: 575px) {
+        .section-title h2 {
+            font-size: 32px;
+        }
+    }
+    
+    @media (max-width: 399px) {
+        .section-title h2 {
+            font-size: 26px;
+        }
+    }
+    
+    .section-title span.title-tag {
+        text-transform: uppercase;
+        /* font-family: "Oswald", sans-serif; */
+        line-height: 1;
+        font-size: 36px;
+        display: inline-block;
+        margin-bottom: 20px;
+        position: relative;
     }
-    40% {
-        opacity: 0.2;
-        -webkit-transform: scale(1.2);
-        transform: scale(1.2);
+    
+    .section-title.left-border span.title-tag {
+        padding-left: 50px;
     }
-    100% {
-        opacity: 0;
-        -webkit-transform: scale(1.4);
-        transform: scale(1.4);
+    
+    .section-title.left-border span.title-tag::before {
+        position: absolute;
+        left: 0;
+        top: 50%;
+        -webkit-transform: translateY(-50%);
+        transform: translateY(-50%);
+        height: 4px;
+        width: 30px;
+        background-color: #2a2e78;
+        content: '';
+    }
+    
+    .section-title.both-border span.title-tag {
+        padding-left: 50px;
+        padding-right: 50px;
+    }
+    
+    .section-title.both-border span.title-tag::after {
+        left: auto;
+        right: 0;
     }
-}
-
-
-/*===========================
+    /* Custom Container Width */
+    
+    @media (min-width: 1600px) {
+        .container-fluid.custom-container-one {
+            max-width: 1520px;
+        }
+    }
+    
+    @media (min-width: 1600px) {
+        .container-fluid.custom-container-two {
+            max-width: 1400px;
+        }
+    }
+    /* Animation keyfranes */
+    
+    @-webkit-keyframes sticky {
+        0% {
+            top: -200px;
+        }
+        100% {
+            top: 0;
+        }
+    }
+    
+    @keyframes sticky {
+        0% {
+            top: -200px;
+        }
+        100% {
+            top: 0;
+        }
+    }
+    
+    @-webkit-keyframes rotateplane {
+        0% {
+            transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+            -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+        }
+        50% {
+            transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+            -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+        }
+        100% {
+            transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+            -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+        }
+    }
+    
+    @keyframes rotateplane {
+        0% {
+            transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+            -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+        }
+        50% {
+            transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+            -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+        }
+        100% {
+            transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+            -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+        }
+    }
+    
+    @-webkit-keyframes hvr-buzz-out {
+        10% {
+            -webkit-transform: translateX(3px) rotate(2deg);
+            transform: translateX(3px) rotate(2deg);
+        }
+        20% {
+            -webkit-transform: translateX(-3px) rotate(-2deg);
+            transform: translateX(-3px) rotate(-2deg);
+        }
+        30% {
+            -webkit-transform: translateX(3px) rotate(2deg);
+            transform: translateX(3px) rotate(2deg);
+        }
+        40% {
+            -webkit-transform: translateX(-3px) rotate(-2deg);
+            transform: translateX(-3px) rotate(-2deg);
+        }
+        50% {
+            -webkit-transform: translateX(2px) rotate(1deg);
+            transform: translateX(2px) rotate(1deg);
+        }
+        60% {
+            -webkit-transform: translateX(-2px) rotate(-1deg);
+            transform: translateX(-2px) rotate(-1deg);
+        }
+        70% {
+            -webkit-transform: translateX(2px) rotate(1deg);
+            transform: translateX(2px) rotate(1deg);
+        }
+        80% {
+            -webkit-transform: translateX(-2px) rotate(-1deg);
+            transform: translateX(-2px) rotate(-1deg);
+        }
+        90% {
+            -webkit-transform: translateX(1px) rotate(0);
+            transform: translateX(1px) rotate(0);
+        }
+        100% {
+            -webkit-transform: translateX(-1px) rotate(0);
+            transform: translateX(-1px) rotate(0);
+        }
+    }
+    
+    @keyframes hvr-buzz-out {
+        10% {
+            -webkit-transform: translateX(3px) rotate(2deg);
+            transform: translateX(3px) rotate(2deg);
+        }
+        20% {
+            -webkit-transform: translateX(-3px) rotate(-2deg);
+            transform: translateX(-3px) rotate(-2deg);
+        }
+        30% {
+            -webkit-transform: translateX(3px) rotate(2deg);
+            transform: translateX(3px) rotate(2deg);
+        }
+        40% {
+            -webkit-transform: translateX(-3px) rotate(-2deg);
+            transform: translateX(-3px) rotate(-2deg);
+        }
+        50% {
+            -webkit-transform: translateX(2px) rotate(1deg);
+            transform: translateX(2px) rotate(1deg);
+        }
+        60% {
+            -webkit-transform: translateX(-2px) rotate(-1deg);
+            transform: translateX(-2px) rotate(-1deg);
+        }
+        70% {
+            -webkit-transform: translateX(2px) rotate(1deg);
+            transform: translateX(2px) rotate(1deg);
+        }
+        80% {
+            -webkit-transform: translateX(-2px) rotate(-1deg);
+            transform: translateX(-2px) rotate(-1deg);
+        }
+        90% {
+            -webkit-transform: translateX(1px) rotate(0);
+            transform: translateX(1px) rotate(0);
+        }
+        100% {
+            -webkit-transform: translateX(-1px) rotate(0);
+            transform: translateX(-1px) rotate(0);
+        }
+    }
+    
+    @-webkit-keyframes ripple {
+        0%,
+        35% {
+            -webkit-transform: scale(0);
+            transform: scale(0);
+            opacity: 1;
+        }
+        50% {
+            -webkit-transform: scale(1.5);
+            transform: scale(1.5);
+            opacity: 0.8;
+        }
+        100% {
+            opacity: 0;
+            -webkit-transform: scale(2);
+            transform: scale(2);
+        }
+    }
+    
+    @keyframes ripple {
+        0%,
+        35% {
+            -webkit-transform: scale(0);
+            transform: scale(0);
+            opacity: 1;
+        }
+        50% {
+            -webkit-transform: scale(1.5);
+            transform: scale(1.5);
+            opacity: 0.8;
+        }
+        100% {
+            opacity: 0;
+            -webkit-transform: scale(2);
+            transform: scale(2);
+        }
+    }
+    
+    @-webkit-keyframes ripple-white {
+        0% {
+            opacity: 0;
+            -webkit-transform: scale(1);
+            transform: scale(1);
+        }
+        40% {
+            opacity: 0.2;
+            -webkit-transform: scale(1.2);
+            transform: scale(1.2);
+        }
+        100% {
+            opacity: 0;
+            -webkit-transform: scale(1.4);
+            transform: scale(1.4);
+        }
+    }
+    
+    @keyframes ripple-white {
+        0% {
+            opacity: 0;
+            -webkit-transform: scale(1);
+            transform: scale(1);
+        }
+        40% {
+            opacity: 0.2;
+            -webkit-transform: scale(1.2);
+            transform: scale(1.2);
+        }
+        100% {
+            opacity: 0;
+            -webkit-transform: scale(1.4);
+            transform: scale(1.4);
+        }
+    }
+    /*===========================
     Header
 ===========================*/
-
-header {
-    /*===== Header transparent =====*/
-    /*===== Header to area =====*/
-    /*===== Main Menu =====*/
-    /*===== Mobile Menu =====*/
-    /*===== Header two =====*/
-    /*===== Header three =====*/
-    /*===== Sticky Header =====*/
-    /* off canvas menu */
-}
-
-header.header-absolute {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    z-index: 99;
-}
-
-header .header-top-area {
-    padding: 7px 0;
-    background: rgba(0, 0, 0, 0.1)
-}
-
-@media (max-width: 575px) {
+    
+    header {
+        /*===== Header transparent =====*/
+        /*===== Header to area =====*/
+        /*===== Main Menu =====*/
+        /*===== Mobile Menu =====*/
+        /*===== Header two =====*/
+        /*===== Header three =====*/
+        /*===== Sticky Header =====*/
+        /* off canvas menu */
+    }
+    
+    header.header-absolute {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 99;
+    }
+    
     header .header-top-area {
-        display: none;
+        padding: 7px 0;
+        background: rgba(0, 0, 0, 0.1)
+    }
+    
+    @media (max-width: 575px) {
+        header .header-top-area {
+            display: none;
+        }
+    }
+    
+    header .header-top-area .contact-list li,
+    header .header-top-area .social-link li {
+        display: inline-block;
+        font-weight: 700;
+        font-size: 16px;
+        /* text-transform: uppercase; */
+        margin-right: 25px;
+        /* font-family: "Oswald", sans-serif; */
     }
-}
-
-header .header-top-area .contact-list li,
-header .header-top-area .social-link li {
-    display: inline-block;
-    font-weight: 700;
-    font-size: 16px;
-    /* text-transform: uppercase; */
-    margin-right: 25px;
-    /* font-family: "Oswald", sans-serif; */
-}
-
-header .header-top-area .contact-list li:last-child,
-header .header-top-area .social-link li:last-child {
-    margin-right: 0;
-}
-
-header .header-top-area .contact-list li,
-header .header-top-area .contact-list li a,
-header .header-top-area .social-link li,
-header .header-top-area .social-link li a {
-    color: #fff;
-}
-
-header .header-top-area .contact-list li a:hover,
-header .header-top-area .social-link li a:hover {
-    color: #ffaa17;
-}
-
-header .header-top-area .social-link {
-    text-align: right;
-}
-
-header .header-top-area .social-link li {
-    margin-right: 0;
-    margin-left: 25px;
-}
-
-header .header-top-area .social-link li:first-child {
-    margin-left: 0;
-}
-
-header .mainmenu-area {
-    /* border: 1px solid red; */
-    /* background-color: #fff; */
-    position: relative;
-    padding: 0 60px;
-}
-
-@media only screen and (min-width: 1200px) and (max-width: 1599px) {
-    header .mainmenu-area {
-        padding: 0 40px;
+    
+    header .header-top-area .contact-list li:last-child,
+    header .header-top-area .social-link li:last-child {
+        margin-right: 0;
     }
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
-    header .mainmenu-area {
-        padding: 0 30px;
+    
+    header .header-top-area .contact-list li,
+    header .header-top-area .contact-list li a,
+    header .header-top-area .social-link li,
+    header .header-top-area .social-link li a {
+        color: #fff;
     }
-}
-
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-    header .mainmenu-area {
-        padding: 15px 95px 15px 15px;
+    
+    header .header-top-area .contact-list li a:hover,
+    header .header-top-area .social-link li a:hover {
+        color: #ffaa17;
     }
-}
-
-@media (max-width: 767px) {
-    header .mainmenu-area {
-        padding: 15px 95px 15px 15px;
+    
+    header .header-top-area .social-link {
+        text-align: right;
     }
-}
-
-@media (max-width: 575px) {
-    header .mainmenu-area {
-        margin-top: 15px;
+    
+    header .header-top-area .social-link li {
+        margin-right: 0;
+        margin-left: 25px;
+    }
+    
+    header .header-top-area .social-link li:first-child {
+        margin-left: 0;
     }
-}
-
-header .mainmenu-area .main-menu {
-    display: -ms-flexbox!important;
-    display: flex!important;
-    -ms-flex-pack: start!important;
-    justify-content: flex-start!important;
-    -ms-flex-align: center!important;
-    align-items: center!important;
-}
-
-header .mainmenu-area .main-menu .logo img {
-    max-width: 87px;
-}
-
-@media (max-width: 399px) {
+    
+    header .mainmenu-area {
+        /* border: 1px solid red; */
+        /* background-color: #fff; */
+        position: relative;
+        padding: 0 60px;
+    }
+    
+    @media only screen and (min-width: 1200px) and (max-width: 1599px) {
+        header .mainmenu-area {
+            padding: 0 40px;
+        }
+    }
+    
+    @media only screen and (min-width: 992px) and (max-width: 1200px) {
+        header .mainmenu-area {
+            padding: 0 30px;
+        }
+    }
+    
+    @media only screen and (min-width: 768px) and (max-width: 991px) {
+        header .mainmenu-area {
+            padding: 15px 95px 15px 15px;
+        }
+    }
+    
+    @media (max-width: 767px) {
+        header .mainmenu-area {
+            padding: 15px 95px 15px 15px;
+        }
+    }
+    
+    @media (max-width: 575px) {
+        header .mainmenu-area {
+            margin-top: 15px;
+        }
+    }
+    
+    header .mainmenu-area .main-menu {
+        display: -ms-flexbox!important;
+        display: flex!important;
+        -ms-flex-pack: start!important;
+        justify-content: flex-start!important;
+        -ms-flex-align: center!important;
+        align-items: center!important;
+    }
+    
     header .mainmenu-area .main-menu .logo img {
-        max-width: 120px;
-    }
-}
-
-header .mainmenu-area .main-menu .menu-items {
-    margin-left: 60px;
-}
-
-header .mainmenu-area .main-menu .menu-items ul li {
-    display: inline-block;
-    margin-right: 30px;
-    position: relative;
-}
-
-@media only screen and (min-width: 1200px) and (max-width: 1599px) {
-    header .mainmenu-area .main-menu .menu-items ul li {
-        margin-right: 15px;
+        max-width: 87px;
     }
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
+    
+    @media (max-width: 399px) {
+        header .mainmenu-area .main-menu .logo img {
+            max-width: 120px;
+        }
+    }
+    
+    header .mainmenu-area .main-menu .menu-items {
+        margin-left: 60px;
+    }
+    
     header .mainmenu-area .main-menu .menu-items ul li {
+        display: inline-block;
+        margin-right: 30px;
+        position: relative;
+    }
+    
+    @media only screen and (min-width: 1200px) and (max-width: 1599px) {
+        header .mainmenu-area .main-menu .menu-items ul li {
+            margin-right: 15px;
+        }
+    }
+    
+    @media only screen and (min-width: 992px) and (max-width: 1200px) {
+        header .mainmenu-area .main-menu .menu-items ul li {
+            margin-right: 0;
+        }
+    }
+    
+    header .mainmenu-area .main-menu .menu-items ul li:last-child {
         margin-right: 0;
     }
-}
-
-header .mainmenu-area .main-menu .menu-items ul li:last-child {
-    margin-right: 0;
-}
-
-header .mainmenu-area .main-menu .menu-items ul li a {
-    /* line-height: 74px; */
-    padding: 24px 48px;
-    color: #fff;
-    font-family: "Oswald", sans-serif;
-    font-weight: 500;
-    text-transform: uppercase;
-    font-size: 16px;
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
+    
     header .mainmenu-area .main-menu .menu-items ul li a {
-        padding: 0 12px;
-    }
-}
-
-header .mainmenu-area .main-menu .menu-items ul li a:hover {
-    color: #639BFF;
-}
-
-header .mainmenu-area .main-menu .menu-items ul li.active>a {
-    color: #639BFF;
-    font-size: 18px
-}
-
-header .mainmenu-area .main-menu .menu-items ul li.active>a:before {
-    content: '';
-    width: 24px;
-    height: 2px;
-    display: inline-block;
-    background-color: #639BFF;
-    /* margin-right: 5px; */
-    position: absolute;
-    bottom: 18px;
-    left: 50%;
-    margin-left: -12px;
-}
-
-header .mainmenu-area .main-menu .menu-items ul li .submenu {
-    position: absolute;
-    left: -28px;
-    top: 120%;
-    width: 220px;
-    background-color: #fff;
-    opacity: 0;
-    visibility: hidden;
-    -webkit-transition: all 0.3s ease-out 0s;
-    transition: all 0.3s ease-out 0s;
-    z-index: 99;
-    -webkit-box-shadow: 0px 8px 16px 0px rgba(73, 167, 211, 0.06);
-    box-shadow: 0px 8px 16px 0px rgba(73, 167, 211, 0.06);
-}
-
-header .mainmenu-area .main-menu .menu-items ul li .submenu>li {
-    position: relative;
-    display: block;
-    margin: 0;
-    text-align: center;
-}
-
-header .mainmenu-area .main-menu .menu-items ul li .submenu>li a {
-    display: block;
-    padding: 0 15px;
-    position: relative;
-    color: #041d38;
-    -webkit-transition: all 0.3s ease-out 0s;
-    transition: all 0.3s ease-out 0s;
-    border-radius: 0;
-    line-height: 40px;
-}
-
-header .mainmenu-area .main-menu .menu-items ul li .submenu>li a:hover {
-    background-color: #639BFF;
-    color: #fff;
-}
-
-header .mainmenu-area .main-menu .menu-items ul li .submenu>li .submenu {
-    position: absolute;
-    left: 100%;
-    top: 30%;
-    width: 200px;
-    background-color: #fff;
-    visibility: hidden;
-    opacity: 0;
-}
-
-header .mainmenu-area .main-menu .menu-items ul li .submenu>li:hover .submenu {
-    opacity: 1;
-    visibility: visible;
-    top: 0;
-}
-
-header .mainmenu-area .main-menu .menu-items ul li:hover .submenu {
-    visibility: visible;
-    opacity: 1;
-    top: 100%;
-}
-
-header .mainmenu-area .main-right {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: right;
-    -ms-flex-pack: right;
-    justify-content: right;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-}
-
-@media (max-width: 575px) {
+        /* line-height: 74px; */
+        padding: 24px 48px;
+        color: #fff;
+        font-family: "Oswald", sans-serif;
+        font-weight: 500;
+        text-transform: uppercase;
+        font-size: 16px;
+    }
+    
+    @media only screen and (min-width: 992px) and (max-width: 1200px) {
+        header .mainmenu-area .main-menu .menu-items ul li a {
+            padding: 0 12px;
+        }
+    }
+    
+    header .mainmenu-area .main-menu .menu-items ul li a:hover {
+        color: #639BFF;
+    }
+    
+    header .mainmenu-area .main-menu .menu-items ul li.active>a {
+        color: #639BFF;
+        font-size: 18px
+    }
+    
+    header .mainmenu-area .main-menu .menu-items ul li.active>a:before {
+        content: '';
+        width: 24px;
+        height: 2px;
+        display: inline-block;
+        background-color: #639BFF;
+        /* margin-right: 5px; */
+        position: absolute;
+        bottom: 18px;
+        left: 50%;
+        margin-left: -12px;
+    }
+    
+    header .mainmenu-area .main-menu .menu-items ul li .submenu {
+        position: absolute;
+        left: -28px;
+        top: 120%;
+        width: 220px;
+        background-color: #fff;
+        opacity: 0;
+        visibility: hidden;
+        -webkit-transition: all 0.3s ease-out 0s;
+        transition: all 0.3s ease-out 0s;
+        z-index: 99;
+        -webkit-box-shadow: 0px 8px 16px 0px rgba(73, 167, 211, 0.06);
+        box-shadow: 0px 8px 16px 0px rgba(73, 167, 211, 0.06);
+    }
+    
+    header .mainmenu-area .main-menu .menu-items ul li .submenu>li {
+        position: relative;
+        display: block;
+        margin: 0;
+        text-align: center;
+    }
+    
+    header .mainmenu-area .main-menu .menu-items ul li .submenu>li a {
+        display: block;
+        padding: 0 15px;
+        position: relative;
+        color: #041d38;
+        -webkit-transition: all 0.3s ease-out 0s;
+        transition: all 0.3s ease-out 0s;
+        border-radius: 0;
+        line-height: 40px;
+    }
+    
+    header .mainmenu-area .main-menu .menu-items ul li .submenu>li a:hover {
+        background-color: #639BFF;
+        color: #fff;
+    }
+    
+    header .mainmenu-area .main-menu .menu-items ul li .submenu>li .submenu {
+        position: absolute;
+        left: 100%;
+        top: 30%;
+        width: 200px;
+        background-color: #fff;
+        visibility: hidden;
+        opacity: 0;
+    }
+    
+    header .mainmenu-area .main-menu .menu-items ul li .submenu>li:hover .submenu {
+        opacity: 1;
+        visibility: visible;
+        top: 0;
+    }
+    
+    header .mainmenu-area .main-menu .menu-items ul li:hover .submenu {
+        visibility: visible;
+        opacity: 1;
+        top: 100%;
+    }
+    
     header .mainmenu-area .main-right {
-        display: none;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-pack: right;
+        -ms-flex-pack: right;
+        justify-content: right;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
     }
-}
-
-header .mainmenu-area .main-right .offcanvas-trigger {
-    margin-left: 20px;
-    height: 60px;
-    width: 60px;
-    line-height: 60px;
-    background-color: #ffaa17;
-    border: 2px solid #ffaa17;
-    color: #fff;
-    text-align: center;
-    -webkit-transition: all 0.3s ease-out 0s;
-    transition: all 0.3s ease-out 0s;
-}
-
-@media (max-width: 767px) {
+    
+    @media (max-width: 575px) {
+        header .mainmenu-area .main-right {
+            display: none;
+        }
+    }
+    
     header .mainmenu-area .main-right .offcanvas-trigger {
-        display: none;
+        margin-left: 20px;
+        height: 60px;
+        width: 60px;
+        line-height: 60px;
+        background-color: #ffaa17;
+        border: 2px solid #ffaa17;
+        color: #fff;
+        text-align: center;
+        -webkit-transition: all 0.3s ease-out 0s;
+        transition: all 0.3s ease-out 0s;
+    }
+    
+    @media (max-width: 767px) {
+        header .mainmenu-area .main-right .offcanvas-trigger {
+            display: none;
+        }
+    }
+    
+    header .mainmenu-area .main-right .offcanvas-trigger:hover {
+        background-color: #041d38;
+        border-color: #041d38;
+    }
+    
+    header .mainmenu-area .main-right .offcanvas-trigger i {
+        font-size: 30px;
+        position: relative;
+        top: 5px;
     }
-}
-
-header .mainmenu-area .main-right .offcanvas-trigger:hover {
-    background-color: #041d38;
-    border-color: #041d38;
-}
-
-header .mainmenu-area .main-right .offcanvas-trigger i {
-    font-size: 30px;
-    position: relative;
-    top: 5px;
-}
-
-header .mobile-menu.mean-container .mean-bar {
-    background-color: transparent;
-    padding: 0;
-    min-height: 0;
-}
-
-header .mobile-menu.mean-container .mean-bar a.meanmenu-reveal {
-    margin-right: 15px;
-    margin-top: -75px;
-    border: 2px solid rgba(4, 29, 56, 0.1);
-    padding: 17px 15px;
-    width: 26px;
-    z-index: 222;
-}
-
-@media (max-width: 399px) {
-    header .mobile-menu.mean-container .mean-bar a.meanmenu-reveal {
-        margin-top: -65px;
-        padding: 12px 10px;
-    }
-}
-
-header .mobile-menu.mean-container .mean-bar a.meanmenu-reveal span {
-    background-color: #041d38;
-}
-
-header .mobile-menu.mean-container .mean-nav {
-    margin-top: 0;
-    background-color: #041d38;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    z-index: 99;
-}
-
-header .mobile-menu.mean-container .mean-nav ul li {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-header .mobile-menu.mean-container .mean-nav ul li:last-child {
-    border: none;
-}
-
-header .mobile-menu.mean-container .mean-nav ul li a {
-    border: none;
-    padding: 0;
-    padding: 15px 20px;
-    width: 100%;
-    font-size: 14px;
-}
-
-header .mobile-menu.mean-container .mean-nav ul li li:first-child {
-    border-top: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-header .mobile-menu.mean-container .mean-nav ul li li a {
-    padding: 15px 40px;
-}
-
-header .mobile-menu.mean-container .mean-nav ul li li li {
-    border-top: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-header .mobile-menu.mean-container .mean-nav ul li li li a {
-    padding: 15px 60px;
-}
-
-header .mobile-menu.mean-container .mean-nav ul li a.mean-expand {
-    border: none !important;
-    width: 50px;
-    height: 53px;
-    padding: 0 !important;
-    line-height: 53px;
-    margin-top: 0;
-}
-
-header .mobile-menu.mean-container .mean-nav ul li a.mean-expand:hover {
-    background: transparent;
-}
-
-header.header-two .header-top-area {
-    padding: 15px 0;
-    background-color: #041d38;
-}
-
-header.header-two .mainmenu-area {
-    border-bottom: 1px solid #f1f1f1;
-    padding: 0;
-}
-
-@media only screen and (min-width: 1200px) and (max-width: 1599px) {
-    header.header-two .mainmenu-area {
+    
+    header .mobile-menu.mean-container .mean-bar {
+        background-color: transparent;
         padding: 0;
+        min-height: 0;
     }
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
-    header.header-two .mainmenu-area {
+    
+    header .mobile-menu.mean-container .mean-bar a.meanmenu-reveal {
+        margin-right: 15px;
+        margin-top: -75px;
+        border: 2px solid rgba(4, 29, 56, 0.1);
+        padding: 17px 15px;
+        width: 26px;
+        z-index: 222;
+    }
+    
+    @media (max-width: 399px) {
+        header .mobile-menu.mean-container .mean-bar a.meanmenu-reveal {
+            margin-top: -65px;
+            padding: 12px 10px;
+        }
+    }
+    
+    header .mobile-menu.mean-container .mean-bar a.meanmenu-reveal span {
+        background-color: #041d38;
+    }
+    
+    header .mobile-menu.mean-container .mean-nav {
+        margin-top: 0;
+        background-color: #041d38;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 99;
+    }
+    
+    header .mobile-menu.mean-container .mean-nav ul li {
+        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    }
+    
+    header .mobile-menu.mean-container .mean-nav ul li:last-child {
+        border: none;
+    }
+    
+    header .mobile-menu.mean-container .mean-nav ul li a {
+        border: none;
         padding: 0;
+        padding: 15px 20px;
+        width: 100%;
+        font-size: 14px;
     }
-}
-
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-    header.header-two .mainmenu-area {
-        padding: 15px 95px 15px 0;
+    
+    header .mobile-menu.mean-container .mean-nav ul li li:first-child {
+        border-top: 1px solid rgba(255, 255, 255, 0.2);
+    }
+    
+    header .mobile-menu.mean-container .mean-nav ul li li a {
+        padding: 15px 40px;
+    }
+    
+    header .mobile-menu.mean-container .mean-nav ul li li li {
+        border-top: 1px solid rgba(255, 255, 255, 0.2);
+    }
+    
+    header .mobile-menu.mean-container .mean-nav ul li li li a {
+        padding: 15px 60px;
+    }
+    
+    header .mobile-menu.mean-container .mean-nav ul li a.mean-expand {
+        border: none !important;
+        width: 50px;
+        height: 53px;
+        padding: 0 !important;
+        line-height: 53px;
+        margin-top: 0;
     }
-}
-
-@media (max-width: 767px) {
-    header.header-two .mainmenu-area {
-        padding: 15px 95px 15px 0;
+    
+    header .mobile-menu.mean-container .mean-nav ul li a.mean-expand:hover {
+        background: transparent;
+    }
+    
+    header.header-two .header-top-area {
+        padding: 15px 0;
+        background-color: #041d38;
     }
-}
-
-@media (max-width: 575px) {
+    
     header.header-two .mainmenu-area {
-        margin-top: 0;
+        border-bottom: 1px solid #f1f1f1;
+        padding: 0;
     }
-}
-
-header.header-two .mainmenu-area .main-menu {
-    grid-column-gap: 90px;
-}
-
-@media only screen and (min-width: 1200px) and (max-width: 1599px) {
+    
+    @media only screen and (min-width: 1200px) and (max-width: 1599px) {
+        header.header-two .mainmenu-area {
+            padding: 0;
+        }
+    }
+    
+    @media only screen and (min-width: 992px) and (max-width: 1200px) {
+        header.header-two .mainmenu-area {
+            padding: 0;
+        }
+    }
+    
+    @media only screen and (min-width: 768px) and (max-width: 991px) {
+        header.header-two .mainmenu-area {
+            padding: 15px 95px 15px 0;
+        }
+    }
+    
+    @media (max-width: 767px) {
+        header.header-two .mainmenu-area {
+            padding: 15px 95px 15px 0;
+        }
+    }
+    
+    @media (max-width: 575px) {
+        header.header-two .mainmenu-area {
+            margin-top: 0;
+        }
+    }
+    
     header.header-two .mainmenu-area .main-menu {
-        grid-column-gap: 60px;
+        grid-column-gap: 90px;
+    }
+    
+    @media only screen and (min-width: 1200px) and (max-width: 1599px) {
+        header.header-two .mainmenu-area .main-menu {
+            grid-column-gap: 60px;
+        }
+    }
+    
+    @media only screen and (min-width: 992px) and (max-width: 1200px) {
+        header.header-two .mainmenu-area .main-menu {
+            grid-column-gap: 30px;
+        }
+    }
+    
+    header.header-two .mainmenu-area .main-right {
+        text-align: right;
     }
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
-    header.header-two .mainmenu-area .main-menu {
-        grid-column-gap: 30px;
-    }
-}
-
-header.header-two .mainmenu-area .main-right {
-    text-align: right;
-}
-
-header.header-two .mainmenu-area .main-right .offcanvas-trigger {
-    margin-left: 50px;
-}
-
-header.header-two .mainmenu-area .main-right .quote-icon {
-    text-align: left;
-    padding-left: 80px;
-    position: relative;
-}
-
-header.header-two .mainmenu-area .main-right .quote-icon .icon {
-    position: absolute;
-    left: 0;
-    top: 50%;
-    -webkit-transform: translateY(-50%);
-    transform: translateY(-50%);
-}
-
-header.header-two .mainmenu-area .main-right .quote-icon span {
-    font-weight: 700;
-    font-size: 14px;
-    color: #041d38;
-    font-family: "Oswald", sans-serif;
-    line-height: 24px;
-    text-transform: uppercase;
-}
-
-header.header-two .mainmenu-area .main-right .quote-icon span span {
-    display: block;
-    font-size: 20px;
-    color: #ffaa17;
-}
-
-@media (max-width: 767px) {
+    
+    header.header-two .mainmenu-area .main-right .offcanvas-trigger {
+        margin-left: 50px;
+    }
+    
+    header.header-two .mainmenu-area .main-right .quote-icon {
+        text-align: left;
+        padding-left: 80px;
+        position: relative;
+    }
+    
+    header.header-two .mainmenu-area .main-right .quote-icon .icon {
+        position: absolute;
+        left: 0;
+        top: 50%;
+        -webkit-transform: translateY(-50%);
+        transform: translateY(-50%);
+    }
+    
+    header.header-two .mainmenu-area .main-right .quote-icon span {
+        font-weight: 700;
+        font-size: 14px;
+        color: #041d38;
+        font-family: "Oswald", sans-serif;
+        line-height: 24px;
+        text-transform: uppercase;
+    }
+    
     header.header-two .mainmenu-area .main-right .quote-icon span span {
-        font-size: 18px;
+        display: block;
+        font-size: 20px;
+        color: #ffaa17;
     }
-}
-
-header.header-three .mainmenu-area {
-    background-color: transparent;
-    padding: 15px 0;
-}
-
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-    header.header-three .mainmenu-area {
-        padding: 15px 95px 15px 0;
+    
+    @media (max-width: 767px) {
+        header.header-two .mainmenu-area .main-right .quote-icon span span {
+            font-size: 18px;
+        }
     }
-}
-
-@media (max-width: 767px) {
+    
     header.header-three .mainmenu-area {
-        padding: 15px 95px 15px 0;
-    }
-}
-
-header.header-three .mainmenu-area .main-menu {
-    grid-column-gap: 75px;
-}
-
-@media only screen and (min-width: 1200px) and (max-width: 1599px) {
+        background-color: transparent;
+        padding: 15px 0;
+    }
+    
+    @media only screen and (min-width: 768px) and (max-width: 991px) {
+        header.header-three .mainmenu-area {
+            padding: 15px 95px 15px 0;
+        }
+    }
+    
+    @media (max-width: 767px) {
+        header.header-three .mainmenu-area {
+            padding: 15px 95px 15px 0;
+        }
+    }
+    
     header.header-three .mainmenu-area .main-menu {
-        grid-column-gap: 40px;
+        grid-column-gap: 75px;
+    }
+    
+    @media only screen and (min-width: 1200px) and (max-width: 1599px) {
+        header.header-three .mainmenu-area .main-menu {
+            grid-column-gap: 40px;
+        }
+    }
+    
+    @media only screen and (min-width: 992px) and (max-width: 1200px) {
+        header.header-three .mainmenu-area .main-menu {
+            grid-column-gap: 30px;
+        }
+    }
+    
+    header.header-three .mainmenu-area .main-menu .logo img.sticky-logo {
+        display: none;
     }
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
-    header.header-three .mainmenu-area .main-menu {
-        grid-column-gap: 30px;
-    }
-}
-
-header.header-three .mainmenu-area .main-menu .logo img.sticky-logo {
-    display: none;
-}
-
-header.header-three .mainmenu-area .main-menu .menu-items ul li {
-    margin-right: 30px;
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
+    
     header.header-three .mainmenu-area .main-menu .menu-items ul li {
-        margin-right: 0;
+        margin-right: 30px;
+    }
+    
+    @media only screen and (min-width: 992px) and (max-width: 1200px) {
+        header.header-three .mainmenu-area .main-menu .menu-items ul li {
+            margin-right: 0;
+        }
+    }
+    
+    header.header-three .mainmenu-area .main-menu .menu-items ul li a {
+        color: #fff;
+        line-height: 90px;
+    }
+    
+    header.header-three .mainmenu-area .main-menu .menu-items ul li.active>a {
+        color: #ffaa17;
+    }
+    
+    header.header-three .mainmenu-area .main-right .main-btn.btn-filled:hover {
+        background-color: #fff;
+    }
+    
+    header.header-three .mainmenu-area .main-right .main-btn.btn-filled:hover::after,
+    header.header-three .mainmenu-area .main-right .main-btn.btn-filled:hover::before {
+        background-color: #041d38;
+    }
+    
+    header.header-three .mainmenu-area .main-right .offcanvas-trigger {
+        background-color: #fff;
+        border-color: #fff;
+        color: #041d38;
+    }
+    
+    header.header-three .mainmenu-area .main-right .offcanvas-trigger:hover {
+        background-color: #ffaa17;
+        border-color: #ffaa17;
+    }
+    
+    header.header-three .mobile-menu.mean-container .mean-bar a.meanmenu-reveal {
+        border-color: #fff;
+        background-color: #fff;
+    }
+    
+    header.header-three.sticky .mainmenu-area .main-menu .logo img.sticky-logo {
+        display: block;
     }
-}
-
-header.header-three .mainmenu-area .main-menu .menu-items ul li a {
-    color: #fff;
-    line-height: 90px;
-}
-
-header.header-three .mainmenu-area .main-menu .menu-items ul li.active>a {
-    color: #ffaa17;
-}
-
-header.header-three .mainmenu-area .main-right .main-btn.btn-filled:hover {
-    background-color: #fff;
-}
-
-header.header-three .mainmenu-area .main-right .main-btn.btn-filled:hover::after,
-header.header-three .mainmenu-area .main-right .main-btn.btn-filled:hover::before {
-    background-color: #041d38;
-}
-
-header.header-three .mainmenu-area .main-right .offcanvas-trigger {
-    background-color: #fff;
-    border-color: #fff;
-    color: #041d38;
-}
-
-header.header-three .mainmenu-area .main-right .offcanvas-trigger:hover {
-    background-color: #ffaa17;
-    border-color: #ffaa17;
-}
-
-header.header-three .mobile-menu.mean-container .mean-bar a.meanmenu-reveal {
-    border-color: #fff;
-    background-color: #fff;
-}
-
-header.header-three.sticky .mainmenu-area .main-menu .logo img.sticky-logo {
-    display: block;
-}
-
-header.header-three.sticky .mainmenu-area .main-menu .logo img.normal-logo {
-    display: none;
-}
-
-header.sticky {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    background: rgba(0, 0, 0, .5);
-    /* background: rgba(0, 0, 0, .1); */
-    -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.04);
-    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.04);
-    z-index: 99;
-    -webkit-animation: sticky 1.2s;
-    animation: sticky 1.2s;
-}
-
-header.sticky .mainmenu-area {
-    margin-top: 0;
-}
-
-header.sticky .mainmenu-area .main-menu .menu-items ul li a {
-    /* line-height: 90px; */
-}
-
-header.sticky .header-top-area {
-    display: none;
-}
-
-header.sticky.header-three .mainmenu-area {
-    padding: 0;
-}
-
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-    header.sticky.header-three .mainmenu-area {
-        padding: 15px 95px 15px 0;
+    
+    header.header-three.sticky .mainmenu-area .main-menu .logo img.normal-logo {
+        display: none;
+    }
+    
+    header.sticky {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        background: rgba(0, 0, 0, .5);
+        /* background: rgba(0, 0, 0, .1); */
+        -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.04);
+        box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.04);
+        z-index: 99;
+        -webkit-animation: sticky 1.2s;
+        animation: sticky 1.2s;
+    }
+    
+    header.sticky .mainmenu-area {
+        margin-top: 0;
     }
-}
-
-@media (max-width: 767px) {
+    
+    header.sticky .mainmenu-area .main-menu .menu-items ul li a {
+        /* line-height: 90px; */
+    }
+    
+    header.sticky .header-top-area {
+        display: none;
+    }
+    
     header.sticky.header-three .mainmenu-area {
-        padding: 15px 95px 15px 0;
-    }
-}
-
-header.sticky.header-three .mainmenu-area .main-menu .menu-items ul li a {
-    color: #041d38;
-}
-
-header.sticky.header-three .mainmenu-area .offcanvas-trigger {
-    background-color: #ffaa17;
-    border-color: #ffaa17;
-    color: #041d38;
-}
-
-header.sticky.header-three .mainmenu-area .offcanvas-trigger:hover {
-    background: transparent;
-    border-color: rgba(4, 29, 56, 0.1);
-}
-
-header.sticky.header-three .mobile-menu.mean-container .mean-bar a.meanmenu-reveal {
-    border-color: rgba(4, 29, 56, 0.1);
-    background-color: transparent;
-}
-
-header .off-canvas-wrap {
-    position: fixed;
-    width: 450px;
-    top: 0;
-    min-height: 100vh;
-    right: 0;
-    -webkit-transition: all 0.4s;
-    transition: all 0.4s;
-    z-index: 9999999;
-    margin-right: -450px;
-    -webkit-box-shadow: 0px 8px 16px 0px rgba(73, 167, 211, 0.08);
-    box-shadow: 0px 8px 16px 0px rgba(73, 167, 211, 0.08);
-    text-align: left;
-}
-
-header .off-canvas-wrap.show-off-canvas {
-    margin-right: 0;
-}
-
-header .off-canvas-wrap .overly {
-    position: fixed;
-    height: 100vh;
-    width: 100%;
-    z-index: 998;
-    background-color: #000;
-    left: 0;
-    top: 0;
-    -webkit-transition: all 0.4s;
-    transition: all 0.4s;
-    opacity: 0;
-    visibility: hidden;
-    cursor: pointer;
-}
-
-header .off-canvas-wrap .overly.show-overly {
-    visibility: visible;
-    opacity: 0.6;
-}
-
-header .off-canvas-wrap .off-canvas-widget {
-    padding: 90px 50px;
-    background-color: #fff;
-    height: 100vh;
-    /* height: 860px; */
-    position: relative;
-    z-index: 999;
-}
-
-header .off-canvas-wrap .off-canvas-widget a.off-canvas-close {
-    position: absolute;
-    right: 50px;
-    top: 40px;
-    font-size: 30px;
-    color: #041d38;
-}
-
-header .off-canvas-wrap .off-canvas-widget .widget {
-    margin-bottom: 50px;
-}
-
-header .off-canvas-wrap .off-canvas-widget .widget:last-child {
-    margin-bottom: 0;
-}
-
-header .off-canvas-wrap .off-canvas-widget .widget .widget-title {
-    font-size: 20px;
-    margin-bottom: 20px;
-    text-transform: uppercase;
-    letter-spacing: -1px;
-}
-
-header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li {
-    display: -ms-grid;
-    display: grid;
-    -ms-grid-rows: auto;
-    grid-template-rows: auto;
-    -ms-grid-columns: 120px 1fr;
-    grid-template-columns: 120px 1fr;
-    margin-bottom: 30px;
-}
-
-header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li:last-child {
-    margin-bottom: 0;
-}
-
-header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li .post-img {
-    background-size: cover;
-    background-position: center;
-}
-
-header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li .post-content {
-    padding-left: 20px;
-}
-
-header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li .post-content h6 {
-    margin-bottom: 15px;
-    font-size: 18px;
-    text-transform: uppercase;
-    letter-spacing: -1px;
-    line-height: 1.3;
-}
-
-header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li .post-content .time {
-    font-size: 15px;
-    font-weight: 500;
-}
-
-header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li .post-content .time i {
-    margin-right: 10px;
-}
-
-header .off-canvas-wrap .off-canvas-widget .widget.contact-widget ul li {
-    font-size: 18px;
-    color: #041d38;
-    font-weight: 600;
-    margin-bottom: 10px;
-    padding-left: 25px;
-    position: relative;
-}
-
-header .off-canvas-wrap .off-canvas-widget .widget.contact-widget ul li i {
-    position: absolute;
-    left: 0;
-    top: 50%;
-    -webkit-transform: translateY(-50%);
-    transform: translateY(-50%);
-    font-size: 15px;
-}
-
-header .off-canvas-wrap .off-canvas-widget .widget.contact-widget ul li a {
-    color: #041d38;
-}
-
-header .off-canvas-wrap .off-canvas-widget .widget.social-widget ul li a {
-    height: 40px;
-    width: 40px;
-    line-height: 40px;
-    border: 1px solid #041d38;
-    color: #041d38;
-    border-radius: 50%;
-    text-align: center;
-    font-size: 15px;
-    margin-right: 10px;
-}
-
-header .off-canvas-wrap .off-canvas-widget .widget.social-widget ul li a:hover {
-    background-color: #ffaa17;
-    color: #fff;
-    border-color: #ffaa17;
-}
-
-
-/*===========================
+        padding: 0;
+    }
+    
+    @media only screen and (min-width: 768px) and (max-width: 991px) {
+        header.sticky.header-three .mainmenu-area {
+            padding: 15px 95px 15px 0;
+        }
+    }
+    
+    @media (max-width: 767px) {
+        header.sticky.header-three .mainmenu-area {
+            padding: 15px 95px 15px 0;
+        }
+    }
+    
+    header.sticky.header-three .mainmenu-area .main-menu .menu-items ul li a {
+        color: #041d38;
+    }
+    
+    header.sticky.header-three .mainmenu-area .offcanvas-trigger {
+        background-color: #ffaa17;
+        border-color: #ffaa17;
+        color: #041d38;
+    }
+    
+    header.sticky.header-three .mainmenu-area .offcanvas-trigger:hover {
+        background: transparent;
+        border-color: rgba(4, 29, 56, 0.1);
+    }
+    
+    header.sticky.header-three .mobile-menu.mean-container .mean-bar a.meanmenu-reveal {
+        border-color: rgba(4, 29, 56, 0.1);
+        background-color: transparent;
+    }
+    
+    header .off-canvas-wrap {
+        position: fixed;
+        width: 450px;
+        top: 0;
+        min-height: 100vh;
+        right: 0;
+        -webkit-transition: all 0.4s;
+        transition: all 0.4s;
+        z-index: 9999999;
+        margin-right: -450px;
+        -webkit-box-shadow: 0px 8px 16px 0px rgba(73, 167, 211, 0.08);
+        box-shadow: 0px 8px 16px 0px rgba(73, 167, 211, 0.08);
+        text-align: left;
+    }
+    
+    header .off-canvas-wrap.show-off-canvas {
+        margin-right: 0;
+    }
+    
+    header .off-canvas-wrap .overly {
+        position: fixed;
+        height: 100vh;
+        width: 100%;
+        z-index: 998;
+        background-color: #000;
+        left: 0;
+        top: 0;
+        -webkit-transition: all 0.4s;
+        transition: all 0.4s;
+        opacity: 0;
+        visibility: hidden;
+        cursor: pointer;
+    }
+    
+    header .off-canvas-wrap .overly.show-overly {
+        visibility: visible;
+        opacity: 0.6;
+    }
+    
+    header .off-canvas-wrap .off-canvas-widget {
+        padding: 90px 50px;
+        background-color: #fff;
+        height: 100vh;
+        /* height: 860px; */
+        position: relative;
+        z-index: 999;
+    }
+    
+    header .off-canvas-wrap .off-canvas-widget a.off-canvas-close {
+        position: absolute;
+        right: 50px;
+        top: 40px;
+        font-size: 30px;
+        color: #041d38;
+    }
+    
+    header .off-canvas-wrap .off-canvas-widget .widget {
+        margin-bottom: 50px;
+    }
+    
+    header .off-canvas-wrap .off-canvas-widget .widget:last-child {
+        margin-bottom: 0;
+    }
+    
+    header .off-canvas-wrap .off-canvas-widget .widget .widget-title {
+        font-size: 20px;
+        margin-bottom: 20px;
+        text-transform: uppercase;
+        letter-spacing: -1px;
+    }
+    
+    header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li {
+        display: -ms-grid;
+        display: grid;
+        -ms-grid-rows: auto;
+        grid-template-rows: auto;
+        -ms-grid-columns: 120px 1fr;
+        grid-template-columns: 120px 1fr;
+        margin-bottom: 30px;
+    }
+    
+    header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li:last-child {
+        margin-bottom: 0;
+    }
+    
+    header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li .post-img {
+        background-size: cover;
+        background-position: center;
+    }
+    
+    header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li .post-content {
+        padding-left: 20px;
+    }
+    
+    header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li .post-content h6 {
+        margin-bottom: 15px;
+        font-size: 18px;
+        text-transform: uppercase;
+        letter-spacing: -1px;
+        line-height: 1.3;
+    }
+    
+    header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li .post-content .time {
+        font-size: 15px;
+        font-weight: 500;
+    }
+    
+    header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li .post-content .time i {
+        margin-right: 10px;
+    }
+    
+    header .off-canvas-wrap .off-canvas-widget .widget.contact-widget ul li {
+        font-size: 18px;
+        color: #041d38;
+        font-weight: 600;
+        margin-bottom: 10px;
+        padding-left: 25px;
+        position: relative;
+    }
+    
+    header .off-canvas-wrap .off-canvas-widget .widget.contact-widget ul li i {
+        position: absolute;
+        left: 0;
+        top: 50%;
+        -webkit-transform: translateY(-50%);
+        transform: translateY(-50%);
+        font-size: 15px;
+    }
+    
+    header .off-canvas-wrap .off-canvas-widget .widget.contact-widget ul li a {
+        color: #041d38;
+    }
+    
+    header .off-canvas-wrap .off-canvas-widget .widget.social-widget ul li a {
+        height: 40px;
+        width: 40px;
+        line-height: 40px;
+        border: 1px solid #041d38;
+        color: #041d38;
+        border-radius: 50%;
+        text-align: center;
+        font-size: 15px;
+        margin-right: 10px;
+    }
+    
+    header .off-canvas-wrap .off-canvas-widget .widget.social-widget ul li a:hover {
+        background-color: #ffaa17;
+        color: #fff;
+        border-color: #ffaa17;
+    }
+    /*===========================
     Banner
 ===========================*/
-
-.banner-section {
-    position: relative;
-    z-index: 1;
-    max-width: 1920px;
-}
-
-.banner-section .slider-active .slick-dots {
-    position: absolute;
-    left: 50%;
-    bottom: 130px;
-    -webkit-transform: translateX(-50%);
-    transform: translateX(-50%);
-    bottom: 50px;
-}
-
-@media (max-width: 767px) {
-    .banner-section .slider-active .slick-dots {
-        bottom: 50px;
+    
+    .banner-section {
+        position: relative;
+        z-index: 1;
+        max-width: 1920px;
     }
-}
-
-@media (max-width: 575px) {
+    
     .banner-section .slider-active .slick-dots {
+        position: absolute;
+        left: 50%;
+        bottom: 130px;
+        -webkit-transform: translateX(-50%);
+        transform: translateX(-50%);
         bottom: 50px;
     }
-}
-
-.banner-section .slider-active .slick-dots li {
-    display: inline-block;
-    margin: 0 4px;
-}
-
-.banner-section .slider-active .slick-dots li button {
-    font-size: 0;
-    height: 15px;
-    width: 15px;
-    border: navajowhite;
-    border-radius: 50%;
-    background: white;
-}
-
-.banner-section .slider-active .slick-dots li.slick-active button {
-    background-color: #ffaa17;
-}
-
-
-/*===========================
-    About 
-===========================*/
-
-.about-section .about-tile-gallery {
-    position: relative;
-    min-height: 620px;
-    border: 1px solid red;
-}
-
-.about-section .about-tile-gallery .col-md-6 {
-    border: 1px solid pink
-}
-
-.about-section h2 {
-    font-size: 32px;
-    font-weight: normal
-}
-
-.about-section .about-text p {
-    text-indent: 25px;
-    line-height: 1.8;
-}
-
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-    .about-section .about-tile-gallery {
-        margin-bottom: 50px;
+    
+    @media (max-width: 767px) {
+        .banner-section .slider-active .slick-dots {
+            bottom: 50px;
+        }
     }
-}
-
-@media (max-width: 767px) {
-    .about-section .about-tile-gallery {
-        margin-bottom: 50px;
+    
+    @media (max-width: 575px) {
+        .banner-section .slider-active .slick-dots {
+            bottom: 50px;
+        }
     }
-}
-
-@media (max-width: 575px) {
-    .about-section .about-tile-gallery {
-        min-height: 450px;
-    }
-}
-
-.about-section .about-tile-gallery img {
-    position: absolute;
-}
-
-.about-section .about-tile-gallery img.image-one {
-    top: 0;
-    left: 0;
-    max-width: 400px;
-    max-height: 450px;
-    z-index: 1;
-}
-
-@media (max-width: 575px) {
+    
+    .banner-section .slider-active .slick-dots li {
+        display: inline-block;
+        margin: 0 4px;
+    }
+    
+    .banner-section .slider-active .slick-dots li button {
+        font-size: 0;
+        height: 15px;
+        width: 15px;
+        border: navajowhite;
+        border-radius: 50%;
+        background: white;
+    }
+    
+    .banner-section .slider-active .slick-dots li.slick-active button {
+        background-color: #ffaa17;
+    }
+    /*===========================
+    About 
+===========================*/
+    
+    @media only screen and (min-width: 768px) and (max-width: 991px) {
+        .about-section .about-tile-gallery {
+            margin-bottom: 50px;
+        }
+    }
+    
+    @media (max-width: 767px) {
+        .about-section .about-tile-gallery {
+            margin-bottom: 50px;
+        }
+    }
+    
+    @media (max-width: 575px) {
+        .about-section .about-tile-gallery {
+            min-height: 450px;
+        }
+    }
+    
+    .about-section .about-tile-gallery img {
+        position: absolute;
+    }
+    
     .about-section .about-tile-gallery img.image-one {
-        max-width: 100%;
-    }
-}
-
-.about-section .about-tile-gallery img.image-two {
-    right: 20px;
-    bottom: 0;
-    max-width: 400px;
-    max-height: 260px;
-    z-index: 2;
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
-    .about-section .about-tile-gallery img.image-two {
-        max-width: 340px;
+        top: 0;
+        left: 0;
+        max-width: 400px;
+        max-height: 450px;
+        z-index: 1;
     }
-}
-
-@media (max-width: 575px) {
-    .about-section .about-tile-gallery img.image-two {
-        right: 0;
-        max-width: 300px;
+    
+    @media (max-width: 575px) {
+        .about-section .about-tile-gallery img.image-one {
+            max-width: 100%;
+        }
     }
-}
-
-@media (max-width: 399px) {
+    
     .about-section .about-tile-gallery img.image-two {
-        max-width: 250px;
-    }
-}
-
-.about-section .about-tile-gallery img.image-three {
-    right: 20px;
-    top: 20px;
-    max-width: 160px;
-    z-index: 2;
-}
-
-@media (max-width: 575px) {
+        right: 20px;
+        bottom: 0;
+        max-width: 400px;
+        max-height: 260px;
+        z-index: 2;
+    }
+    
+    @media only screen and (min-width: 992px) and (max-width: 1200px) {
+        .about-section .about-tile-gallery img.image-two {
+            max-width: 340px;
+        }
+    }
+    
+    @media (max-width: 575px) {
+        .about-section .about-tile-gallery img.image-two {
+            right: 0;
+            max-width: 300px;
+        }
+    }
+    
+    @media (max-width: 399px) {
+        .about-section .about-tile-gallery img.image-two {
+            max-width: 250px;
+        }
+    }
+    
     .about-section .about-tile-gallery img.image-three {
-        right: -15px;
-    }
-}
-
-.about-section .about-tile-gallery img.icon {
-    top: 140px;
-    right: 95px;
-    z-index: 3;
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
+        right: 20px;
+        top: 20px;
+        max-width: 160px;
+        z-index: 2;
+    }
+    
+    @media (max-width: 575px) {
+        .about-section .about-tile-gallery img.image-three {
+            right: -15px;
+        }
+    }
+    
     .about-section .about-tile-gallery img.icon {
-        right: 0;
+        top: 140px;
+        right: 95px;
+        z-index: 3;
+    }
+    
+    @media only screen and (min-width: 992px) and (max-width: 1200px) {
+        .about-section .about-tile-gallery img.icon {
+            right: 0;
+        }
+    }
+    
+    @media (max-width: 575px) {
+        .about-section .about-tile-gallery img.icon {
+            display: none;
+        }
+    }
+    
+    .about-section .about-tile-gallery img.zero-icon {
+        z-index: 4;
+        left: -45px;
+        bottom: 20px;
+    }
+    
+    @media (min-width: 1600px) {
+        .about-section .about-tile-gallery img.zero-icon {
+            bottom: 40px;
+            left: -140px;
+        }
+    }
+    
+    @media (max-width: 575px) {
+        .about-section .about-tile-gallery img.zero-icon {
+            left: -30px;
+            max-width: 150px;
+        }
+    }
+    
+    @media (max-width: 767px) {
+        .about-section .about-text {
+            padding-left: 0;
+        }
+    }
+    
+    .about-section .about-text .about-features .sngle-features {
+        margin-bottom: 30px;
     }
-}
-
-@media (max-width: 575px) {
-    .about-section .about-tile-gallery img.icon {
-        display: none;
+    
+    .about-section .about-text .about-features .sngle-features:last-child {
+        margin-bottom: 0;
     }
-}
-
-.about-section .about-tile-gallery img.zero-icon {
-    z-index: 4;
-    left: -45px;
-    bottom: 20px;
-}
-
-@media (min-width: 1600px) {
-    .about-section .about-tile-gallery img.zero-icon {
-        bottom: 40px;
-        left: -140px;
+    
+    @media (max-width: 575px) {
+        .about-section .about-text .about-features .sngle-features {
+            -ms-grid-rows: 90px 1fr;
+            grid-template-rows: 90px 1fr;
+        }
     }
-}
-
-@media (max-width: 575px) {
-    .about-section .about-tile-gallery img.zero-icon {
-        left: -30px;
-        max-width: 150px;
+    
+    .about-section .about-text .about-features .sngle-features .chart {
+        position: relative;
+        min-width: 94px;
+        min-height: 94px;
+        background-image: url(../img/white_round.png);
+    }
+    
+    .about-section .about-text .about-features .sngle-features .chart .bg_01 {
+        min-width: 94px;
+        min-height: 94px;
+        background-image: url(../img/blue_round.png);
+        transform: rotate(270deg);
+        -ms-transform: rotate(270deg);
+        /*	IE 9*/
+        -moz-transform: rotate(270deg);
+        /* Firefox */
+        -webkit-transform: rotate(270deg);
+        /* Safari 和 Chrome */
+        -o-transform: rotate(270deg);
+    }
+    
+    .about-section .about-text .about-features .sngle-features .chart .bg_01 span {
+        transform: rotate(90deg);
+        -ms-transform: rotate(90deg);
+        -moz-transform: rotate(90deg);
+        -webkit-transform: rotate(90deg);
+        -o-transform: rotate(90deg);
+        font-size: 45px;
+        font-weight: 600;
+    }
+    
+    .about-section .about-text .about-features .sngle-features .chart .bg_02 {
+        min-width: 94px;
+        min-height: 94px;
+        background-image: url(../img/blue_round.png);
+    }
+    
+    .about-section .about-text .about-features .sngle-features .chart .bg_02 span {
+        font-size: 45px;
+        font-weight: 600;
+    }
+    
+    .about-section .about-text .about-features .sngle-features .chart .bg_03 {
+        min-width: 94px;
+        min-height: 94px;
+        background-image: url(../img/blue_round.png);
+        transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+        -moz-transform: rotate(180deg);
+        -webkit-transform: rotate(180deg);
+        -o-transform: rotate(180deg);
+    }
+    
+    .about-section .about-text .about-features .sngle-features .chart .bg_03 span {
+        transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+        -moz-transform: rotate(180deg);
+        -webkit-transform: rotate(180deg);
+        -o-transform: rotate(180deg);
+        font-size: 45px;
+        font-weight: 600;
+    }
+    
+    .about-section .about-text .about-features .sngle-features .chart span.icon {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        -webkit-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%);
+        font-size: 30px;
+        color: #041d38;
+    }
+    
+    .about-section .about-text .about-features .sngle-features .chart canvas {
+        position: absolute;
+        left: 0;
+        top: 0;
     }
-}
-
-@media (max-width: 767px) {
-    .about-section .about-text {
-        padding-left: 0;
+    
+    .about-section .about-text .about-features .sngle-features .counter-box {
+        text-align: center;
+        color: #ffaa17;
+        font-weight: 700;
+        font-size: 48px;
+        font-family: "Oswald", sans-serif;
     }
-}
-
-.about-section .about-text .about-features .sngle-features {
-    margin-bottom: 30px;
-}
-
-.about-section .about-text .about-features .sngle-features:last-child {
-    margin-bottom: 0;
-}
-
-@media (max-width: 575px) {
-    .about-section .about-text .about-features .sngle-features {
-        -ms-grid-rows: 90px 1fr;
-        grid-template-rows: 90px 1fr;
-    }
-}
-
-.about-section .about-text .about-features .sngle-features .chart {
-    position: relative;
-    min-width: 94px;
-    min-height: 94px;
-    background-image: url(../img/white_round.png);
-}
-
-.about-section .about-text .about-features .sngle-features .chart .bg_01 {
-    min-width: 94px;
-    min-height: 94px;
-    background-image: url(../img/blue_round.png);
-    transform: rotate(270deg);
-    -ms-transform: rotate(270deg);
-    /*	IE 9*/
-    -moz-transform: rotate(270deg);
-    /* Firefox */
-    -webkit-transform: rotate(270deg);
-    /* Safari 和 Chrome */
-    -o-transform: rotate(270deg);
-}
-
-.about-section .about-text .about-features .sngle-features .chart .bg_01 span {
-    transform: rotate(90deg);
-    -ms-transform: rotate(90deg);
-    -moz-transform: rotate(90deg);
-    -webkit-transform: rotate(90deg);
-    -o-transform: rotate(90deg);
-    font-size: 45px;
-    font-weight: 600;
-}
-
-.about-section .about-text .about-features .sngle-features .chart .bg_02 {
-    min-width: 94px;
-    min-height: 94px;
-    background-image: url(../img/blue_round.png);
-}
-
-.about-section .about-text .about-features .sngle-features .chart .bg_02 span {
-    font-size: 45px;
-    font-weight: 600;
-}
-
-.about-section .about-text .about-features .sngle-features .chart .bg_03 {
-    min-width: 94px;
-    min-height: 94px;
-    background-image: url(../img/blue_round.png);
-    transform: rotate(180deg);
-    -ms-transform: rotate(180deg);
-    -moz-transform: rotate(180deg);
-    -webkit-transform: rotate(180deg);
-    -o-transform: rotate(180deg);
-}
-
-.about-section .about-text .about-features .sngle-features .chart .bg_03 span {
-    transform: rotate(180deg);
-    -ms-transform: rotate(180deg);
-    -moz-transform: rotate(180deg);
-    -webkit-transform: rotate(180deg);
-    -o-transform: rotate(180deg);
-    font-size: 45px;
-    font-weight: 600;
-}
-
-.about-section .about-text .about-features .sngle-features .chart span.icon {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    -webkit-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-    font-size: 30px;
-    color: #041d38;
-}
-
-.about-section .about-text .about-features .sngle-features .chart canvas {
-    position: absolute;
-    left: 0;
-    top: 0;
-}
-
-.about-section .about-text .about-features .sngle-features .counter-box {
-    text-align: center;
-    color: #ffaa17;
-    font-weight: 700;
-    font-size: 48px;
-    font-family: "Oswald", sans-serif;
-}
-
-.about-section .about-text .about-features .sngle-features .desc {
-    font-size: 20px;
-    line-height: 1.8;
-    padding-left: 30px;
-}
-
-
-/* @media (max-width: 575px) {
+    
+    .about-section .about-text .about-features .sngle-features .desc {
+        font-size: 20px;
+        line-height: 1.8;
+        padding-left: 30px;
+    }
+    /* @media (max-width: 575px) {
   .about-section .about-text .about-features .sngle-features .desc {
     margin-top: 20px;
     grid-column: 1/-1;
   }
 } */
-
-.about-section .about-text .about-features .sngle-features .desc h4 {
-    margin-bottom: 15px;
-    text-transform: uppercase;
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
+    
     .about-section .about-text .about-features .sngle-features .desc h4 {
-        font-size: 20px;
+        margin-bottom: 15px;
+        text-transform: uppercase;
     }
-}
-
-.about-section .about-text .about-extra {
-    padding-left: 215px;
-    position: relative;
-    margin-top: 80px;
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
-    .about-section .about-text .about-extra {
-        margin-top: 50px;
-        padding-left: 180px;
+    
+    @media only screen and (min-width: 992px) and (max-width: 1200px) {
+        .about-section .about-text .about-features .sngle-features .desc h4 {
+            font-size: 20px;
+        }
     }
-}
-
-@media only screen and (min-width: 768px) and (max-width: 991px) {
+    
     .about-section .about-text .about-extra {
-        margin-top: 30px;
-        padding-left: 0;
-        padding-bottom: 200px;
+        padding-left: 215px;
+        position: relative;
+        margin-top: 80px;
     }
-}
-
-@media (max-width: 767px) {
-    .about-section .about-text .about-extra {
-        margin-top: 30px;
-        padding-left: 0;
-        padding-bottom: 200px;
-    }
-}
-
-@media (max-width: 575px) {
-    .about-section .about-text .about-extra {
-        padding-bottom: 150px;
-    }
-}
-
-.about-section .about-text .about-extra .experience-tag {
-    position: absolute;
-    left: -335px;
-    top: 50%;
-    -webkit-transform: translateY(-50%);
-    transform: translateY(-50%);
-    z-index: 6;
-}
-
-@media only screen and (min-width: 1200px) and (max-width: 1599px) {
-    .about-section .about-text .about-extra .experience-tag {
-        left: -315px;
-        max-width: 500px;
-    }
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
-    .about-section .about-text .about-extra .experience-tag {
-        left: -220px;
-        max-width: 350px;
-    }
-}
-
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-    .about-section .about-text .about-extra .experience-tag {
-        left: 0;
-        bottom: 0;
-        -webkit-transform: translate(0, 0);
-        transform: translate(0, 0);
-        top: auto;
-        max-width: 100%;
-    }
-}
-
-@media (max-width: 767px) {
+    
+    @media only screen and (min-width: 992px) and (max-width: 1200px) {
+        .about-section .about-text .about-extra {
+            margin-top: 50px;
+            padding-left: 180px;
+        }
+    }
+    
+    @media only screen and (min-width: 768px) and (max-width: 991px) {
+        .about-section .about-text .about-extra {
+            margin-top: 30px;
+            padding-left: 0;
+            padding-bottom: 200px;
+        }
+    }
+    
+    @media (max-width: 767px) {
+        .about-section .about-text .about-extra {
+            margin-top: 30px;
+            padding-left: 0;
+            padding-bottom: 200px;
+        }
+    }
+    
+    @media (max-width: 575px) {
+        .about-section .about-text .about-extra {
+            padding-bottom: 150px;
+        }
+    }
+    
     .about-section .about-text .about-extra .experience-tag {
-        left: 0;
-        bottom: 0;
-        -webkit-transform: translate(0, 0);
-        transform: translate(0, 0);
-        top: auto;
-        max-width: 100%;
-    }
-}
-
-.about-section .about-tile-gallery-two {
-    min-height: 550px;
-    position: relative;
-    z-index: 5;
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
-    .about-section .about-tile-gallery-two {
-        min-height: 515px;
-    }
-}
-
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-    .about-section .about-tile-gallery-two {
-        margin-bottom: 50px;
-    }
-}
-
-@media (max-width: 767px) {
-    .about-section .about-tile-gallery-two {
-        margin-bottom: 50px;
-    }
-}
-
-@media (max-width: 575px) {
+        position: absolute;
+        left: -335px;
+        top: 50%;
+        -webkit-transform: translateY(-50%);
+        transform: translateY(-50%);
+        z-index: 6;
+    }
+    
+    @media only screen and (min-width: 1200px) and (max-width: 1599px) {
+        .about-section .about-text .about-extra .experience-tag {
+            left: -315px;
+            max-width: 500px;
+        }
+    }
+    
+    @media only screen and (min-width: 992px) and (max-width: 1200px) {
+        .about-section .about-text .about-extra .experience-tag {
+            left: -220px;
+            max-width: 350px;
+        }
+    }
+    
+    @media only screen and (min-width: 768px) and (max-width: 991px) {
+        .about-section .about-text .about-extra .experience-tag {
+            left: 0;
+            bottom: 0;
+            -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+            top: auto;
+            max-width: 100%;
+        }
+    }
+    
+    @media (max-width: 767px) {
+        .about-section .about-text .about-extra .experience-tag {
+            left: 0;
+            bottom: 0;
+            -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+            top: auto;
+            max-width: 100%;
+        }
+    }
+    
     .about-section .about-tile-gallery-two {
-        min-height: 410px;
-    }
-}
-
-.about-section .about-tile-gallery-two .image-two {
-    position: absolute;
-    left: -20px;
-    bottom: 0;
-    border-right: 20px solid #fff;
-    border-top: 20px solid #fff;
-    z-index: 1;
-}
-
-@media (min-width: 1600px) {
-    .about-section .about-tile-gallery-two .image-two {
-        left: -120px;
-    }
-}
-
-@media (max-width: 575px) {
+        min-height: 550px;
+        position: relative;
+        z-index: 5;
+    }
+    
+    @media only screen and (min-width: 992px) and (max-width: 1200px) {
+        .about-section .about-tile-gallery-two {
+            min-height: 515px;
+        }
+    }
+    
+    @media only screen and (min-width: 768px) and (max-width: 991px) {
+        .about-section .about-tile-gallery-two {
+            margin-bottom: 50px;
+        }
+    }
+    
+    @media (max-width: 767px) {
+        .about-section .about-tile-gallery-two {
+            margin-bottom: 50px;
+        }
+    }
+    
+    @media (max-width: 575px) {
+        .about-section .about-tile-gallery-two {
+            min-height: 410px;
+        }
+    }
+    
     .about-section .about-tile-gallery-two .image-two {
-        left: -15px;
-    }
-}
-
-.about-section.about-style-two .about-iconic-boxes {
-    margin-bottom: -60px;
-    z-index: 22;
-    position: relative;
-}
-
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-    .about-section.about-style-two .about-iconic-boxes {
-        margin-bottom: -240px;
-    }
-}
-
-@media (max-width: 767px) {
+        position: absolute;
+        left: -20px;
+        bottom: 0;
+        border-right: 20px solid #fff;
+        border-top: 20px solid #fff;
+        z-index: 1;
+    }
+    
+    @media (min-width: 1600px) {
+        .about-section .about-tile-gallery-two .image-two {
+            left: -120px;
+        }
+    }
+    
+    @media (max-width: 575px) {
+        .about-section .about-tile-gallery-two .image-two {
+            left: -15px;
+        }
+    }
+    
     .about-section.about-style-two .about-iconic-boxes {
-        margin-bottom: -240px;
-    }
-}
-
-.about-section.about-style-two .about-iconic-boxes .iconic-box {
-    padding: 30px 35px;
-    background-color: #fff;
-    -webkit-box-shadow: 0px 10px 20px 0px rgba(149, 183, 208, 0.06);
-    box-shadow: 0px 10px 20px 0px rgba(149, 183, 208, 0.06);
-    position: relative;
-    z-index: 1;
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
-    .about-section.about-style-two .about-iconic-boxes .iconic-box {
-        padding: 30px 25px;
+        margin-bottom: -60px;
+        z-index: 22;
+        position: relative;
     }
-}
-
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-    .about-section.about-style-two .about-iconic-boxes .iconic-box {
-        margin-bottom: 30px;
+    
+    @media only screen and (min-width: 768px) and (max-width: 991px) {
+        .about-section.about-style-two .about-iconic-boxes {
+            margin-bottom: -240px;
+        }
     }
-}
-
-@media (max-width: 767px) {
-    .about-section.about-style-two .about-iconic-boxes .iconic-box {
-        margin-bottom: 30px;
+    
+    @media (max-width: 767px) {
+        .about-section.about-style-two .about-iconic-boxes {
+            margin-bottom: -240px;
+        }
     }
-}
-
-@media (max-width: 399px) {
+    
     .about-section.about-style-two .about-iconic-boxes .iconic-box {
-        padding: 30px 25px;
-    }
-}
-
-.about-section.about-style-two .about-iconic-boxes .iconic-box h4 {
-    text-transform: uppercase;
-    letter-spacing: -1px;
-    margin-bottom: 10px;
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
+        padding: 30px 35px;
+        background-color: #fff;
+        -webkit-box-shadow: 0px 10px 20px 0px rgba(149, 183, 208, 0.06);
+        box-shadow: 0px 10px 20px 0px rgba(149, 183, 208, 0.06);
+        position: relative;
+        z-index: 1;
+    }
+    
+    @media only screen and (min-width: 992px) and (max-width: 1200px) {
+        .about-section.about-style-two .about-iconic-boxes .iconic-box {
+            padding: 30px 25px;
+        }
+    }
+    
+    @media only screen and (min-width: 768px) and (max-width: 991px) {
+        .about-section.about-style-two .about-iconic-boxes .iconic-box {
+            margin-bottom: 30px;
+        }
+    }
+    
+    @media (max-width: 767px) {
+        .about-section.about-style-two .about-iconic-boxes .iconic-box {
+            margin-bottom: 30px;
+        }
+    }
+    
+    @media (max-width: 399px) {
+        .about-section.about-style-two .about-iconic-boxes .iconic-box {
+            padding: 30px 25px;
+        }
+    }
+    
     .about-section.about-style-two .about-iconic-boxes .iconic-box h4 {
-        font-size: 20px;
+        text-transform: uppercase;
+        letter-spacing: -1px;
+        margin-bottom: 10px;
     }
-}
-
-@media (max-width: 399px) {
-    .about-section.about-style-two .about-iconic-boxes .iconic-box h4 {
-        font-size: 20px;
+    
+    @media only screen and (min-width: 992px) and (max-width: 1200px) {
+        .about-section.about-style-two .about-iconic-boxes .iconic-box h4 {
+            font-size: 20px;
+        }
+    }
+    
+    @media (max-width: 399px) {
+        .about-section.about-style-two .about-iconic-boxes .iconic-box h4 {
+            font-size: 20px;
+        }
+    }
+    
+    .about-section.about-style-two .about-iconic-boxes .iconic-box .icon {
+        position: absolute;
+        right: 35px;
+        top: 30px;
+        height: 30px;
+        width: 30px;
+        text-align: center;
+        line-height: 30px;
+        background-color: #ffaa17;
+        color: #041d38;
+        z-index: 2;
     }
-}
-
-.about-section.about-style-two .about-iconic-boxes .iconic-box .icon {
-    position: absolute;
-    right: 35px;
-    top: 30px;
-    height: 30px;
-    width: 30px;
-    text-align: center;
-    line-height: 30px;
-    background-color: #ffaa17;
-    color: #041d38;
-    z-index: 2;
-}
-
-.about-section.about-style-two .about-iconic-boxes .iconic-box .count {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    font-weight: 700;
-    font-family: "Oswald", sans-serif;
-    font-size: 70px;
-    color: #f7fcff;
-    z-index: -1;
-    line-height: 1;
-}
-
-.about-section.about-style-two .about-text-warp {
-    background-color: #f7fcff;
-    position: relative;
-    z-index: 1;
-    padding-top: 120px;
-    padding-bottom: 120px;
-}
-
-@media only screen and (min-width: 768px) and (max-width: 991px) {
+    
+    .about-section.about-style-two .about-iconic-boxes .iconic-box .count {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        font-weight: 700;
+        font-family: "Oswald", sans-serif;
+        font-size: 70px;
+        color: #f7fcff;
+        z-index: -1;
+        line-height: 1;
+    }
+    
     .about-section.about-style-two .about-text-warp {
-        padding-top: 280px;
+        background-color: #f7fcff;
+        position: relative;
+        z-index: 1;
+        padding-top: 120px;
+        padding-bottom: 120px;
     }
-}
-
-@media (max-width: 767px) {
-    .about-section.about-style-two .about-text-warp {
-        padding-top: 280px;
-    }
-}
-
-.about-section.about-style-two .about-text-warp .mockup-img {
-    position: absolute;
-    right: 0;
-    bottom: -110px;
-    max-width: 1000px;
-    z-index: -1;
-}
-
-@media only screen and (min-width: 1200px) and (max-width: 1599px) {
-    .about-section.about-style-two .about-text-warp .mockup-img {
-        max-width: 800px;
-        bottom: -80px;
+    
+    @media only screen and (min-width: 768px) and (max-width: 991px) {
+        .about-section.about-style-two .about-text-warp {
+            padding-top: 280px;
+        }
+    }
+    
+    @media (max-width: 767px) {
+        .about-section.about-style-two .about-text-warp {
+            padding-top: 280px;
+        }
     }
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
+    
     .about-section.about-style-two .about-text-warp .mockup-img {
+        position: absolute;
+        right: 0;
+        bottom: -110px;
+        max-width: 1000px;
+        z-index: -1;
+    }
+    
+    @media only screen and (min-width: 1200px) and (max-width: 1599px) {
+        .about-section.about-style-two .about-text-warp .mockup-img {
+            max-width: 800px;
+            bottom: -80px;
+        }
+    }
+    
+    @media only screen and (min-width: 992px) and (max-width: 1200px) {
+        .about-section.about-style-two .about-text-warp .mockup-img {
+            max-width: 575px;
+            bottom: 42%;
+            -webkit-transform: translateY(50%);
+            transform: translateY(50%);
+        }
+    }
+    
+    @media only screen and (min-width: 768px) and (max-width: 991px) {
+        .about-section.about-style-two .about-text-warp .mockup-img {
+            display: none;
+        }
+    }
+    
+    @media (max-width: 767px) {
+        .about-section.about-style-two .about-text-warp .mockup-img {
+            display: none;
+        }
+    }
+    
+    .about-section.about-style-two .about-text-warp .about-small-img {
+        position: absolute;
+        top: 53%;
+        left: 49%;
+        z-index: 1;
+    }
+    
+    @media only screen and (min-width: 1200px) and (max-width: 1599px) {
+        .about-section.about-style-two .about-text-warp .about-small-img {
+            left: 44%;
+        }
+    }
+    
+    @media only screen and (min-width: 992px) and (max-width: 1200px) {
+        .about-section.about-style-two .about-text-warp .about-small-img {
+            display: none;
+        }
+    }
+    
+    @media only screen and (min-width: 768px) and (max-width: 991px) {
+        .about-section.about-style-two .about-text-warp .about-small-img {
+            display: none;
+        }
+    }
+    
+    @media (max-width: 767px) {
+        .about-section.about-style-two .about-text-warp .about-small-img {
+            display: none;
+        }
+    }
+    
+    @media only screen and (min-width: 768px) and (max-width: 991px) {
+        .about-section .about-img {
+            margin-bottom: 50px;
+        }
+    }
+    
+    @media (max-width: 767px) {
+        .about-section .about-img {
+            margin-bottom: 50px;
+        }
+    }
+    
+    .about-section .with-man-shape {
+        position: relative;
+        padding-top: 150px;
+        padding-bottom: 150px;
+    }
+    
+    @media only screen and (min-width: 992px) and (max-width: 1200px) {
+        .about-section .with-man-shape {
+            padding-top: 120px;
+            padding-bottom: 60px;
+        }
+    }
+    
+    @media only screen and (min-width: 768px) and (max-width: 991px) {
+        .about-section .with-man-shape {
+            padding-top: 120px;
+            padding-bottom: 500px;
+        }
+    }
+    
+    @media (max-width: 767px) {
+        .about-section .with-man-shape {
+            padding-top: 120px;
+            padding-bottom: 360px;
+        }
+    }
+    
+    @media (max-width: 575px) {
+        .about-section .with-man-shape {
+            padding-bottom: 280px;
+        }
+    }
+    
+    @media (max-width: 399px) {
+        .about-section .with-man-shape {
+            padding-bottom: 120px;
+        }
+    }
+    
+    .about-section .with-man-shape .about-man-img {
+        position: absolute;
+        left: 0;
+        bottom: 0;
         max-width: 575px;
-        bottom: 42%;
-        -webkit-transform: translateY(50%);
-        transform: translateY(50%);
     }
-}
-
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-    .about-section.about-style-two .about-text-warp .mockup-img {
-        display: none;
+    
+    @media only screen and (min-width: 992px) and (max-width: 1200px) {
+        .about-section .with-man-shape .about-man-img {
+            max-width: 450px;
+        }
+    }
+    
+    @media only screen and (min-width: 768px) and (max-width: 991px) {
+        .about-section .with-man-shape .about-man-img {
+            left: 50%;
+            max-width: 345px;
+            -webkit-transform: translateX(-50%);
+            transform: translateX(-50%);
+        }
+    }
+    
+    @media (max-width: 767px) {
+        .about-section .with-man-shape .about-man-img {
+            left: 50%;
+            max-width: 250px;
+            -webkit-transform: translateX(-50%);
+            transform: translateX(-50%);
+        }
+    }
+    
+    @media (max-width: 399px) {
+        .about-section .with-man-shape .about-man-img {
+            display: none;
+        }
+    }
+    
+    .about-section .with-man-shape .about-man-img .shape {
+        position: relative;
+        z-index: 1;
     }
-}
-
-@media (max-width: 767px) {
-    .about-section.about-style-two .about-text-warp .mockup-img {
-        display: none;
+    
+    .about-section .with-man-shape .about-man-img .shape::after {
+        content: '';
+        position: absolute;
+        left: 50%;
+        -webkit-transform: translateX(-49%);
+        transform: translateX(-49%);
+        top: 100px;
+        background-color: #ffaa17;
+        height: 465px;
+        width: 465px;
+        border-radius: 50%;
+        z-index: -1;
+    }
+    
+    @media (max-width: 767px) {
+        .about-section .with-man-shape .about-man-img .shape::after {
+            height: 300px;
+            width: 300px;
+        }
+    }
+    
+    .about-section .with-man-shape .about-text {
+        padding-left: 80px;
+    }
+    
+    @media only screen and (min-width: 992px) and (max-width: 1200px) {
+        .about-section .with-man-shape .about-text {
+            padding-left: 20px;
+        }
+    }
+    
+    @media only screen and (min-width: 768px) and (max-width: 991px) {
+        .about-section .with-man-shape .about-text {
+            padding-left: 0;
+        }
+    }
+    
+    @media (max-width: 767px) {
+        .about-section .with-man-shape .about-text {
+            padding-left: 0;
+        }
+    }
+    /*===========================
+    Sidebar Style
+===========================*/
+    
+    @media only screen and (min-width: 768px) and (max-width: 991px) {
+        .sidebar {
+            margin-top: 80px;
+        }
+    }
+    
+    @media (max-width: 767px) {
+        .sidebar {
+            margin-top: 80px;
+        }
+    }
+    
+    .sidebar .widget {
+        padding: 40px;
+        border: 2px solid #ededed;
+    }
+    
+    @media only screen and (min-width: 992px) and (max-width: 1200px) {
+        .sidebar .widget {
+            padding: 40px 20px;
+        }
+    }
+    
+    @media (max-width: 399px) {
+        .sidebar .widget {
+            padding: 40px 20px;
+        }
+    }
+    
+    .sidebar .widget .widget-title {
+        font-size: 20px;
+        text-transform: uppercase;
+        margin-bottom: 40px;
+        line-height: 1;
+        position: relative;
+        padding-left: 30px;
     }
-}
-
-.about-section.about-style-two .about-text-warp .about-small-img {
-    position: absolute;
-    top: 53%;
-    left: 49%;
-    z-index: 1;
-}
-
-@media only screen and (min-width: 1200px) and (max-width: 1599px) {
-    .about-section.about-style-two .about-text-warp .about-small-img {
-        left: 44%;
+    
+    .sidebar .widget .widget-title::before {
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 100%;
+        width: 2px;
+        background-color: #ffaa17;
+        content: '';
     }
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
-    .about-section.about-style-two .about-text-warp .about-small-img {
-        display: none;
+    
+    .sidebar .widget.about-author-widget .author-box {
+        font-size: 14px;
+        text-align: center;
     }
-}
-
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-    .about-section.about-style-two .about-text-warp .about-small-img {
-        display: none;
+    
+    .sidebar .widget.about-author-widget .author-box h6 {
+        font-size: 18px;
+        text-transform: uppercase;
+        letter-spacing: -1px;
+        margin-top: 30px;
+        padding-bottom: 20px;
     }
-}
-
-@media (max-width: 767px) {
-    .about-section.about-style-two .about-text-warp .about-small-img {
-        display: none;
+    
+    .sidebar .widget.about-author-widget .author-box .social-icon {
+        margin-top: 25px;
     }
-}
-
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-    .about-section .about-img {
-        margin-bottom: 50px;
+    
+    .sidebar .widget.about-author-widget .author-box .social-icon li {
+        display: inline-block;
+        margin: 0 5px;
     }
-}
-
-@media (max-width: 767px) {
-    .about-section .about-img {
-        margin-bottom: 50px;
+    
+    .sidebar .widget.about-author-widget .author-box .social-icon li a {
+        padding: 5px;
+        color: #b3bed3;
     }
-}
-
-.about-section .with-man-shape {
-    position: relative;
-    padding-top: 150px;
-    padding-bottom: 150px;
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
-    .about-section .with-man-shape {
-        padding-top: 120px;
-        padding-bottom: 60px;
+    
+    .sidebar .widget.about-author-widget .author-box .social-icon li a:hover {
+        color: #ffaa17;
     }
-}
-
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-    .about-section .with-man-shape {
-        padding-top: 120px;
-        padding-bottom: 500px;
+    
+    .sidebar .widget.search-widget form {
+        position: relative;
     }
-}
-
-@media (max-width: 767px) {
-    .about-section .with-man-shape {
-        padding-top: 120px;
-        padding-bottom: 360px;
+    
+    .sidebar .widget.search-widget form input {
+        width: 100%;
+        background-color: #f6f4ff;
+        height: 60px;
+        border: none;
+        padding-left: 30px;
+        padding-right: 60px;
+        font-size: 14px;
     }
-}
-
-@media (max-width: 575px) {
-    .about-section .with-man-shape {
-        padding-bottom: 280px;
+    
+    .sidebar .widget.search-widget form button {
+        border: none;
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 60px;
+        height: 100%;
+        z-index: 1;
+        background-color: #ffaa17;
+        font-size: 14px;
+        -webkit-transition: all 0.3s ease-out 0s;
+        transition: all 0.3s ease-out 0s;
+    }
+    
+    .sidebar .widget.search-widget form button:hover {
+        background-color: #041d38;
+        color: #fff;
+    }
+    
+    .sidebar .widget.popular-feeds .single-popular-feed {
+        display: -ms-grid;
+        display: grid;
+        -ms-grid-rows: 1fr;
+        grid-template-rows: 1fr;
+        -ms-grid-columns: 80px 1fr;
+        grid-template-columns: 80px 1fr;
+        grid-column-gap: 15px;
+        margin-bottom: 30px;
+        padding-bottom: 30px;
+        border-bottom: 1px solid #e1e6ff;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
     }
-}
-
-@media (max-width: 399px) {
-    .about-section .with-man-shape {
-        padding-bottom: 120px;
+    
+    .sidebar .widget.popular-feeds .single-popular-feed:last-child {
+        margin-bottom: 0;
+        padding-bottom: 0;
+        border: none;
     }
-}
-
-.about-section .with-man-shape .about-man-img {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    max-width: 575px;
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
-    .about-section .with-man-shape .about-man-img {
-        max-width: 450px;
+    
+    .sidebar .widget.popular-feeds .single-popular-feed .feed-desc h6 {
+        text-transform: uppercase;
+        font-size: 16px;
+        margin-bottom: 10px;
     }
-}
-
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-    .about-section .with-man-shape .about-man-img {
-        left: 50%;
-        max-width: 345px;
-        -webkit-transform: translateX(-50%);
-        transform: translateX(-50%);
+    
+    .sidebar .widget.popular-feeds .single-popular-feed .feed-desc .time {
+        font-size: 14px;
     }
-}
-
-@media (max-width: 767px) {
-    .about-section .with-man-shape .about-man-img {
-        left: 50%;
-        max-width: 250px;
-        -webkit-transform: translateX(-50%);
-        transform: translateX(-50%);
+    
+    .sidebar .widget.popular-feeds .single-popular-feed .feed-desc .time i {
+        margin-right: 5px;
     }
-}
-
-@media (max-width: 399px) {
-    .about-section .with-man-shape .about-man-img {
-        display: none;
+    
+    .sidebar .widget.categories-widget ul li {
+        margin-bottom: 10px;
     }
-}
-
-.about-section .with-man-shape .about-man-img .shape {
-    position: relative;
-    z-index: 1;
-}
-
-.about-section .with-man-shape .about-man-img .shape::after {
-    content: '';
-    position: absolute;
-    left: 50%;
-    -webkit-transform: translateX(-49%);
-    transform: translateX(-49%);
-    top: 100px;
-    background-color: #ffaa17;
-    height: 465px;
-    width: 465px;
-    border-radius: 50%;
-    z-index: -1;
-}
-
-@media (max-width: 767px) {
-    .about-section .with-man-shape .about-man-img .shape::after {
-        height: 300px;
-        width: 300px;
+    
+    .sidebar .widget.categories-widget ul li:last-child {
+        margin-bottom: 0;
     }
-}
-
-.about-section .with-man-shape .about-text {
-    padding-left: 80px;
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
-    .about-section .with-man-shape .about-text {
-        padding-left: 20px;
+    
+    .sidebar .widget.categories-widget ul li a {
+        font-size: 14px;
+        padding-left: 30px;
+        height: 50px;
+        background-color: #edf3ff;
+        display: block;
+        position: relative;
+        line-height: 50px;
+        color: #041d38;
+        -webkit-transition: all 0.3s ease-out 0s;
+        transition: all 0.3s ease-out 0s;
+    }
+    
+    .sidebar .widget.categories-widget ul li a span {
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 50px;
+        height: 50px;
+        line-height: 50px;
+        text-align: center;
+        background-color: #d8e5ff;
+        -webkit-transition: all 0.3s ease-out 0s;
+        transition: all 0.3s ease-out 0s;
     }
-}
-
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-    .about-section .with-man-shape .about-text {
-        padding-left: 0;
+    
+    .sidebar .widget.categories-widget ul li a:hover {
+        background-color: #ffaa17;
     }
-}
-
-@media (max-width: 767px) {
-    .about-section .with-man-shape .about-text {
-        padding-left: 0;
+    
+    .sidebar .widget.categories-widget ul li a:hover span {
+        background-color: #ffc35c;
     }
-}
-
-
-/*===========================
-    Sidebar Style
-===========================*/
-
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-    .sidebar {
-        margin-top: 80px;
+    
+    .sidebar .widget.socail-widget ul li {
+        display: inline-block;
+        margin-right: 10px;
+    }
+    
+    @media only screen and (min-width: 992px) and (max-width: 1200px) {
+        .sidebar .widget.socail-widget ul li {
+            margin-right: 5px;
+        }
+    }
+    
+    @media (max-width: 399px) {
+        .sidebar .widget.socail-widget ul li {
+            margin-right: 5px;
+        }
+    }
+    
+    .sidebar .widget.socail-widget ul li a {
+        height: 40px;
+        width: 40px;
+        line-height: 40px;
+        font-size: 14px;
+        color: #041d38;
+        background-color: #edf3ff;
+        text-align: center;
     }
-}
-
-@media (max-width: 767px) {
-    .sidebar {
-        margin-top: 80px;
+    
+    .sidebar .widget.socail-widget ul li a:hover {
+        background-color: #ffaa17;
     }
-}
-
-.sidebar .widget {
-    padding: 40px;
-    border: 2px solid #ededed;
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
-    .sidebar .widget {
-        padding: 40px 20px;
+    
+    .sidebar .widget.twitter-feed-widget ul li {
+        margin-bottom: 30px;
+        padding-bottom: 30px;
+        font-size: 12px;
+        border-bottom: 1px solid #e1e6ff;
+        padding-left: 35px;
+        position: relative;
     }
-}
-
-@media (max-width: 399px) {
-    .sidebar .widget {
-        padding: 40px 20px;
-    }
-}
-
-.sidebar .widget .widget-title {
-    font-size: 20px;
-    text-transform: uppercase;
-    margin-bottom: 40px;
-    line-height: 1;
-    position: relative;
-    padding-left: 30px;
-}
-
-.sidebar .widget .widget-title::before {
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    width: 2px;
-    background-color: #ffaa17;
-    content: '';
-}
-
-.sidebar .widget.about-author-widget .author-box {
-    font-size: 14px;
-    text-align: center;
-}
-
-.sidebar .widget.about-author-widget .author-box h6 {
-    font-size: 18px;
-    text-transform: uppercase;
-    letter-spacing: -1px;
-    margin-top: 30px;
-    padding-bottom: 20px;
-}
-
-.sidebar .widget.about-author-widget .author-box .social-icon {
-    margin-top: 25px;
-}
-
-.sidebar .widget.about-author-widget .author-box .social-icon li {
-    display: inline-block;
-    margin: 0 5px;
-}
-
-.sidebar .widget.about-author-widget .author-box .social-icon li a {
-    padding: 5px;
-    color: #b3bed3;
-}
-
-.sidebar .widget.about-author-widget .author-box .social-icon li a:hover {
-    color: #ffaa17;
-}
-
-.sidebar .widget.search-widget form {
-    position: relative;
-}
-
-.sidebar .widget.search-widget form input {
-    width: 100%;
-    background-color: #f6f4ff;
-    height: 60px;
-    border: none;
-    padding-left: 30px;
-    padding-right: 60px;
-    font-size: 14px;
-}
-
-.sidebar .widget.search-widget form button {
-    border: none;
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 60px;
-    height: 100%;
-    z-index: 1;
-    background-color: #ffaa17;
-    font-size: 14px;
-    -webkit-transition: all 0.3s ease-out 0s;
-    transition: all 0.3s ease-out 0s;
-}
-
-.sidebar .widget.search-widget form button:hover {
-    background-color: #041d38;
-    color: #fff;
-}
-
-.sidebar .widget.popular-feeds .single-popular-feed {
-    display: -ms-grid;
-    display: grid;
-    -ms-grid-rows: 1fr;
-    grid-template-rows: 1fr;
-    -ms-grid-columns: 80px 1fr;
-    grid-template-columns: 80px 1fr;
-    grid-column-gap: 15px;
-    margin-bottom: 30px;
-    padding-bottom: 30px;
-    border-bottom: 1px solid #e1e6ff;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-}
-
-.sidebar .widget.popular-feeds .single-popular-feed:last-child {
-    margin-bottom: 0;
-    padding-bottom: 0;
-    border: none;
-}
-
-.sidebar .widget.popular-feeds .single-popular-feed .feed-desc h6 {
-    text-transform: uppercase;
-    font-size: 16px;
-    margin-bottom: 10px;
-}
-
-.sidebar .widget.popular-feeds .single-popular-feed .feed-desc .time {
-    font-size: 14px;
-}
-
-.sidebar .widget.popular-feeds .single-popular-feed .feed-desc .time i {
-    margin-right: 5px;
-}
-
-.sidebar .widget.categories-widget ul li {
-    margin-bottom: 10px;
-}
-
-.sidebar .widget.categories-widget ul li:last-child {
-    margin-bottom: 0;
-}
-
-.sidebar .widget.categories-widget ul li a {
-    font-size: 14px;
-    padding-left: 30px;
-    height: 50px;
-    background-color: #edf3ff;
-    display: block;
-    position: relative;
-    line-height: 50px;
-    color: #041d38;
-    -webkit-transition: all 0.3s ease-out 0s;
-    transition: all 0.3s ease-out 0s;
-}
-
-.sidebar .widget.categories-widget ul li a span {
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 50px;
-    height: 50px;
-    line-height: 50px;
-    text-align: center;
-    background-color: #d8e5ff;
-    -webkit-transition: all 0.3s ease-out 0s;
-    transition: all 0.3s ease-out 0s;
-}
-
-.sidebar .widget.categories-widget ul li a:hover {
-    background-color: #ffaa17;
-}
-
-.sidebar .widget.categories-widget ul li a:hover span {
-    background-color: #ffc35c;
-}
-
-.sidebar .widget.socail-widget ul li {
-    display: inline-block;
-    margin-right: 10px;
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
-    .sidebar .widget.socail-widget ul li {
-        margin-right: 5px;
+    
+    .sidebar .widget.twitter-feed-widget ul li::before {
+        position: absolute;
+        left: 0;
+        top: 0;
+        content: '\f099';
+        font-family: 'Font Awesome 5 Brands';
+        font-size: 14px;
+        color: #ffaa17;
     }
-}
-
-@media (max-width: 399px) {
-    .sidebar .widget.socail-widget ul li {
+    
+    .sidebar .widget.twitter-feed-widget ul li:last-child {
+        margin-bottom: 0;
+        padding-bottom: 0;
+        border: none;
+    }
+    
+    .sidebar .widget.twitter-feed-widget ul li a {
+        color: #041d38;
+    }
+    
+    .sidebar .widget.twitter-feed-widget ul li .date {
+        text-transform: uppercase;
+        margin-top: 15px;
+        font-weight: 500;
+    }
+    
+    .sidebar .widget.instagram-feed-widget ul {
+        display: -ms-flexbox!important;
+        display: flex!important;
+        -ms-flex-pack: start!important;
+        justify-content: flex-start!important;
+        -ms-flex-align: center!important;
+        align-items: center!important;
+    }
+    
+    .sidebar .widget.popular-tag-widget ul li {
+        display: inline-block;
         margin-right: 5px;
+        margin-bottom: 10px;
     }
-}
-
-.sidebar .widget.socail-widget ul li a {
-    height: 40px;
-    width: 40px;
-    line-height: 40px;
-    font-size: 14px;
-    color: #041d38;
-    background-color: #edf3ff;
-    text-align: center;
-}
-
-.sidebar .widget.socail-widget ul li a:hover {
-    background-color: #ffaa17;
-}
-
-.sidebar .widget.twitter-feed-widget ul li {
-    margin-bottom: 30px;
-    padding-bottom: 30px;
-    font-size: 12px;
-    border-bottom: 1px solid #e1e6ff;
-    padding-left: 35px;
-    position: relative;
-}
-
-.sidebar .widget.twitter-feed-widget ul li::before {
-    position: absolute;
-    left: 0;
-    top: 0;
-    content: '\f099';
-    font-family: 'Font Awesome 5 Brands';
-    font-size: 14px;
-    color: #ffaa17;
-}
-
-.sidebar .widget.twitter-feed-widget ul li:last-child {
-    margin-bottom: 0;
-    padding-bottom: 0;
-    border: none;
-}
-
-.sidebar .widget.twitter-feed-widget ul li a {
-    color: #041d38;
-}
-
-.sidebar .widget.twitter-feed-widget ul li .date {
-    text-transform: uppercase;
-    margin-top: 15px;
-    font-weight: 500;
-}
-
-.sidebar .widget.instagram-feed-widget ul {
-    display: -ms-flexbox!important;
-    display: flex!important;
-    -ms-flex-pack: start!important;
-    justify-content: flex-start!important;
-    -ms-flex-align: center!important;
-    align-items: center!important;
-}
-
-.sidebar .widget.popular-tag-widget ul li {
-    display: inline-block;
-    margin-right: 5px;
-    margin-bottom: 10px;
-}
-
-.sidebar .widget.popular-tag-widget ul li a {
-    font-size: 12px;
-    color: #041d38;
-    padding: 10px 20px;
-    background-color: #f4f4f4;
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
+    
     .sidebar .widget.popular-tag-widget ul li a {
-        padding: 10px 15px;
+        font-size: 12px;
+        color: #041d38;
+        padding: 10px 20px;
+        background-color: #f4f4f4;
+    }
+    
+    @media only screen and (min-width: 992px) and (max-width: 1200px) {
+        .sidebar .widget.popular-tag-widget ul li a {
+            padding: 10px 15px;
+        }
+    }
+    
+    @media (max-width: 399px) {
+        .sidebar .widget.popular-tag-widget ul li a {
+            padding: 10px 15px;
+        }
+    }
+    
+    .sidebar .widget.popular-tag-widget ul li a:hover {
+        background-color: #ffaa17;
+    }
+    
+    .sidebar .widget.banner-ad-widget {
+        padding: 0;
+        border: none;
     }
-}
-
-@media (max-width: 399px) {
-    .sidebar .widget.popular-tag-widget ul li a {
-        padding: 10px 15px;
+    
+    .sidebar .widget.contact-widget .input-group {
+        margin-top: -2px;
     }
-}
-
-.sidebar .widget.popular-tag-widget ul li a:hover {
-    background-color: #ffaa17;
-}
-
-.sidebar .widget.banner-ad-widget {
-    padding: 0;
-    border: none;
-}
-
-.sidebar .widget.contact-widget .input-group {
-    margin-top: -2px;
-}
-
-.sidebar .widget.service-cat-widget li a,
-.sidebar .widget.brouchers-widget li a {
-    display: block;
-    border: 2px solid #ededed;
-    padding: 15px 30px;
-    text-transform: uppercase;
-    color: #041d38;
-    font-family: "Oswald", sans-serif;
-    font-weight: 600;
-    font-size: 14px;
-}
-
-.sidebar .widget.service-cat-widget li a:hover,
-.sidebar .widget.brouchers-widget li a:hover {
-    background-color: #ffaa17;
-    color: #fff;
-    border-color: #ffaa17;
-}
-
-.sidebar .widget.service-cat-widget li:not(:last-child) a,
-.sidebar .widget.brouchers-widget li:not(:last-child) a {
-    border-bottom: none;
-}
-
-.sidebar .widget.brouchers-widget li a i {
-    margin-right: 20px;
-    color: #ffaa17;
-    -webkit-transition: all 0.3s ease-out 0s;
-    transition: all 0.3s ease-out 0s;
-}
-
-.sidebar .widget.brouchers-widget li a:hover i {
-    color: #fff;
-}
-
-
-/*===========================
+    
+    .sidebar .widget.service-cat-widget li a,
+    .sidebar .widget.brouchers-widget li a {
+        display: block;
+        border: 2px solid #ededed;
+        padding: 15px 30px;
+        text-transform: uppercase;
+        color: #041d38;
+        font-family: "Oswald", sans-serif;
+        font-weight: 600;
+        font-size: 14px;
+    }
+    
+    .sidebar .widget.service-cat-widget li a:hover,
+    .sidebar .widget.brouchers-widget li a:hover {
+        background-color: #ffaa17;
+        color: #fff;
+        border-color: #ffaa17;
+    }
+    
+    .sidebar .widget.service-cat-widget li:not(:last-child) a,
+    .sidebar .widget.brouchers-widget li:not(:last-child) a {
+        border-bottom: none;
+    }
+    
+    .sidebar .widget.brouchers-widget li a i {
+        margin-right: 20px;
+        color: #ffaa17;
+        -webkit-transition: all 0.3s ease-out 0s;
+        transition: all 0.3s ease-out 0s;
+    }
+    
+    .sidebar .widget.brouchers-widget li a:hover i {
+        color: #fff;
+    }
+    /*===========================
     Footer
 ===========================*/
-
-footer {
-    background-color: #2B2F42;
-}
-
-@media (max-width: 575px) {
-    footer .social-icon {
-        margin-top: 30px;
+    
+    footer {
+        background-color: #2B2F42;
     }
-}
-
-footer .social-icon a {
-    text-align: center;
-    background-color: #14212b;
-    color: #fff;
-    height: 60px;
-    width: 60px;
-    line-height: 60px;
-    border-radius: 50%;
-    margin-left: 10px;
-}
-
-@media (max-width: 767px) {
-    footer .social-icon a {
-        font-size: 15px;
-        line-height: 45px;
-        height: 45px;
-        width: 45px;
+    
+    @media (max-width: 575px) {
+        footer .social-icon {
+            margin-top: 30px;
+        }
     }
-}
-
-@media (max-width: 399px) {
+    
     footer .social-icon a {
-        margin-left: 5px;
-    }
-}
-
-footer .social-icon a:hover {
-    background-color: #ffaa17;
-    color: #14212b;
-}
-
-footer .footer-top {
-    background-color: #091620;
-    padding: 40px 0;
-}
-
-footer .footer-widget-area {
-    padding-top: 90px;
-    /* padding-bottom: 40px; */
-}
-
-footer .footer-widget-area .widget {
-    margin-bottom: 40px;
-    text-align: center
-}
-
-footer .footer-widget-area .widget,
-footer .footer-widget-area .widget a {
-    color: #fff;
-}
-
-footer .footer-widget-area .widget a:hover {
-    color: #ffaa17;
-}
-
-footer .footer-widget-area .widget .widget-title {
-    font-size: 20px;
-    text-transform: uppercase;
-    color: #fff;
-    margin-bottom: 40px;
-}
-
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-    footer .footer-widget-area .widget .widget-title {
-        margin-bottom: 30px;
-    }
-}
-
-@media (max-width: 767px) {
+        text-align: center;
+        background-color: #14212b;
+        color: #fff;
+        height: 60px;
+        width: 60px;
+        line-height: 60px;
+        border-radius: 50%;
+        margin-left: 10px;
+    }
+    
+    @media (max-width: 767px) {
+        footer .social-icon a {
+            font-size: 15px;
+            line-height: 45px;
+            height: 45px;
+            width: 45px;
+        }
+    }
+    
+    @media (max-width: 399px) {
+        footer .social-icon a {
+            margin-left: 5px;
+        }
+    }
+    
+    footer .social-icon a:hover {
+        background-color: #ffaa17;
+        color: #14212b;
+    }
+    
+    footer .footer-top {
+        background-color: #091620;
+        padding: 40px 0;
+    }
+    
+    footer .footer-widget-area {
+        padding-top: 90px;
+        /* padding-bottom: 40px; */
+    }
+    
+    footer .footer-widget-area .widget {
+        margin-bottom: 40px;
+        text-align: center
+    }
+    
+    footer .footer-widget-area .widget,
+    footer .footer-widget-area .widget a {
+        color: #fff;
+    }
+    
+    footer .footer-widget-area .widget a:hover {
+        color: #ffaa17;
+    }
+    
     footer .footer-widget-area .widget .widget-title {
-        margin-bottom: 30px;
-    }
-}
-
-footer .footer-widget-area .widget.nav-widget ul li {
-    line-height: 38px;
-}
-
-footer .footer-widget-area .widget.recent-post .post-loop .post {
-    display: -ms-grid;
-    display: grid;
-    -ms-grid-rows: auto;
-    grid-template-rows: auto;
-    -ms-grid-columns: 70px 1fr;
-    grid-template-columns: 70px 1fr;
-    grid-column-gap: 20px;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    padding-bottom: 20px;
-    margin-bottom: 20px;
-    border-bottom: 1px solid #283742;
-}
-
-@media only screen and (min-width: 576px) and (max-width: 767px) {
+        font-size: 20px;
+        text-transform: uppercase;
+        color: #fff;
+        margin-bottom: 40px;
+    }
+    
+    @media only screen and (min-width: 768px) and (max-width: 991px) {
+        footer .footer-widget-area .widget .widget-title {
+            margin-bottom: 30px;
+        }
+    }
+    
+    @media (max-width: 767px) {
+        footer .footer-widget-area .widget .widget-title {
+            margin-bottom: 30px;
+        }
+    }
+    
+    footer .footer-widget-area .widget.nav-widget ul li {
+        line-height: 38px;
+    }
+    
     footer .footer-widget-area .widget.recent-post .post-loop .post {
-        grid-column-gap: 10px;
-    }
-}
-
-footer .footer-widget-area .widget.recent-post .post-loop .post:last-child {
-    margin-bottom: 0;
-    padding-bottom: 0;
-    border: none;
-}
-
-footer .footer-widget-area .widget.recent-post .post-loop .post .post-img {
-    max-width: 70px;
-    max-height: 70px;
-}
-
-footer .footer-widget-area .widget.recent-post .post-loop .post .time {
-    font-size: 12px;
-    color: #96abbb;
-    text-transform: uppercase;
-    font-family: "Oswald", sans-serif;
-    font-weight: 700;
-}
-
-footer .footer-widget-area .widget.recent-post .post-loop .post .time i {
-    color: #ffaa17;
-    margin-right: 2px;
-}
-
-footer .footer-widget-area .widget.recent-post .post-loop .post h5 {
-    font-size: 20px;
-    line-height: 1.3;
-    color: #fff;
-    text-transform: uppercase;
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
-    footer .footer-widget-area .widget.recent-post .post-loop .post h5 {
-        font-size: 16px;
-    }
-}
-
-@media only screen and (min-width: 576px) and (max-width: 767px) {
+        display: -ms-grid;
+        display: grid;
+        -ms-grid-rows: auto;
+        grid-template-rows: auto;
+        -ms-grid-columns: 70px 1fr;
+        grid-template-columns: 70px 1fr;
+        grid-column-gap: 20px;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        padding-bottom: 20px;
+        margin-bottom: 20px;
+        border-bottom: 1px solid #283742;
+    }
+    
+    @media only screen and (min-width: 576px) and (max-width: 767px) {
+        footer .footer-widget-area .widget.recent-post .post-loop .post {
+            grid-column-gap: 10px;
+        }
+    }
+    
+    footer .footer-widget-area .widget.recent-post .post-loop .post:last-child {
+        margin-bottom: 0;
+        padding-bottom: 0;
+        border: none;
+    }
+    
+    footer .footer-widget-area .widget.recent-post .post-loop .post .post-img {
+        max-width: 70px;
+        max-height: 70px;
+    }
+    
+    footer .footer-widget-area .widget.recent-post .post-loop .post .time {
+        font-size: 12px;
+        color: #96abbb;
+        text-transform: uppercase;
+        font-family: "Oswald", sans-serif;
+        font-weight: 700;
+    }
+    
+    footer .footer-widget-area .widget.recent-post .post-loop .post .time i {
+        color: #ffaa17;
+        margin-right: 2px;
+    }
+    
     footer .footer-widget-area .widget.recent-post .post-loop .post h5 {
+        font-size: 20px;
+        line-height: 1.3;
+        color: #fff;
+        text-transform: uppercase;
+    }
+    
+    @media only screen and (min-width: 992px) and (max-width: 1200px) {
+        footer .footer-widget-area .widget.recent-post .post-loop .post h5 {
+            font-size: 16px;
+        }
+    }
+    
+    @media only screen and (min-width: 576px) and (max-width: 767px) {
+        footer .footer-widget-area .widget.recent-post .post-loop .post h5 {
+            font-size: 14px;
+        }
+    }
+    
+    @media (max-width: 575px) {
+        footer .footer-widget-area .widget.recent-post .post-loop .post h5 {
+            font-size: 16px;
+        }
+    }
+    
+    footer .copy-right-area .copyrigt-text {
+        padding: 35px 0 60px;
+        /* border-top: 1px solid #283742; */
+        font-weight: 700;
         font-size: 14px;
+        color: #fff;
+        text-align: center
+    }
+    
+    @media (max-width: 767px) {
+        footer .copy-right-area .copyrigt-text {
+            font-size: 16px;
+        }
+    }
+    
+    @media (max-width: 575px) {
+        footer .copy-right-area .copyrigt-text {
+            text-align: center;
+        }
+        footer .copy-right-area .copyrigt-text p {
+            margin-bottom: 10px;
+        }
+        footer .copy-right-area .copyrigt-text p:last-child {
+            margin-bottom: 0;
+        }
+    }
+    
+    footer .copy-right-area .copyrigt-text a {
+        color: #fff;
+    }
+    
+    footer .copy-right-area .copyrigt-text a:hover {
+        color: #ffaa17;
+    }
+    
+    footer.footer-style-two {
+        background-color: #041d38;
+    }
+    
+    footer.footer-style-two .footer-widget-area {
+        padding-bottom: 50px;
+    }
+    
+    footer.footer-style-two .footer-widget-area .foter-logo {
+        margin-bottom: 50px;
     }
-}
-
-@media (max-width: 575px) {
-    footer .footer-widget-area .widget.recent-post .post-loop .post h5 {
-        font-size: 16px;
-    }
-}
-
-footer .copy-right-area .copyrigt-text {
-    padding: 35px 0 60px;
-    /* border-top: 1px solid #283742; */
-    font-weight: 700;
-    font-size: 14px;
-    color: #fff;
-    text-align: center
-}
-
-@media (max-width: 767px) {
-    footer .copy-right-area .copyrigt-text {
-        font-size: 16px;
+    
+    @media (max-width: 767px) {
+        footer.footer-style-two .footer-widget-area .foter-logo {
+            margin-bottom: 80px;
+        }
     }
-}
-
-@media (max-width: 575px) {
-    footer .copy-right-area .copyrigt-text {
+    
+    footer.footer-style-two .footer-widget-area .widget {
+        padding: 50px 35px;
         text-align: center;
+        line-height: 38px;
+    }
+    
+    @media only screen and (min-width: 992px) and (max-width: 1200px) {
+        footer.footer-style-two .footer-widget-area .widget {
+            padding: 45px 10px;
+        }
+    }
+    
+    @media only screen and (min-width: 576px) and (max-width: 767px) {
+        footer.footer-style-two .footer-widget-area .widget {
+            padding: 0;
+        }
+    }
+    
+    @media (max-width: 575px) {
+        footer.footer-style-two .footer-widget-area .widget {
+            padding: 0 30px;
+        }
+    }
+    
+    @media (max-width: 399px) {
+        footer.footer-style-two .footer-widget-area .widget {
+            padding: 0 15px;
+        }
+    }
+    
+    footer.footer-style-two .footer-widget-area .widget .widget-title {
+        font-size: 30px;
+    }
+    
+    @media only screen and (min-width: 576px) and (max-width: 767px) {
+        footer.footer-style-two .footer-widget-area .widget.about-widget {
+            font-size: 15px;
+            line-height: 30px;
+        }
+    }
+    
+    footer.footer-style-two .footer-widget-area .widget.getin-widget {
+        background-color: #ffaa17;
+        font-weight: 700;
+    }
+    
+    @media (max-width: 767px) {
+        footer.footer-style-two .footer-widget-area .widget.getin-widget {
+            padding: 50px 0;
+        }
+    }
+    
+    footer.footer-style-two .footer-widget-area .widget.getin-widget li {
+        line-height: 36px;
+    }
+    
+    footer.footer-style-two .footer-widget-area .widget.getin-widget,
+    footer.footer-style-two .footer-widget-area .widget.getin-widget .widget-title {
+        color: #041d38;
+    }
+    
+    footer.footer-style-two .footer-widget-area .widget.getin-widget .getin-btn {
+        font-family: "Oswald", sans-serif;
+        font-weight: 700;
+        font-size: 14px;
+        padding: 10px 45px;
+        text-transform: uppercase;
+        background-color: #041d38;
+        display: inline-block;
+        margin-top: 30px;
     }
-    footer .copy-right-area .copyrigt-text p {
-        margin-bottom: 10px;
+    
+    footer.footer-style-two .footer-widget-area .widget.getin-widget .getin-btn:hover {
+        background-color: #041d38;
+        color: #fff;
     }
-    footer .copy-right-area .copyrigt-text p:last-child {
-        margin-bottom: 0;
+    
+    footer.footer-style-two .copy-right-area {
+        background-color: #021529;
+        padding: 15px 0;
     }
-}
-
-footer .copy-right-area .copyrigt-text a {
-    color: #fff;
-}
-
-footer .copy-right-area .copyrigt-text a:hover {
-    color: #ffaa17;
-}
-
-footer.footer-style-two {
-    background-color: #041d38;
-}
-
-footer.footer-style-two .footer-widget-area {
-    padding-bottom: 50px;
-}
-
-footer.footer-style-two .footer-widget-area .foter-logo {
-    margin-bottom: 50px;
-}
-
-@media (max-width: 767px) {
-    footer.footer-style-two .footer-widget-area .foter-logo {
-        margin-bottom: 80px;
-    }
-}
-
-footer.footer-style-two .footer-widget-area .widget {
-    padding: 50px 35px;
-    text-align: center;
-    line-height: 38px;
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
-    footer.footer-style-two .footer-widget-area .widget {
-        padding: 45px 10px;
+    
+    @media (max-width: 767px) {
+        footer.footer-style-two .copy-right-area {
+            padding: 20px 0;
+        }
     }
-}
-
-@media only screen and (min-width: 576px) and (max-width: 767px) {
-    footer.footer-style-two .footer-widget-area .widget {
+    
+    footer.footer-style-two .copy-right-area .copyrigt-text {
         padding: 0;
+        border: none;
+    }
+    
+    @media (max-width: 767px) {
+        footer.footer-style-two .copy-right-area .social-icon {
+            margin-top: 15px;
+        }
+    }
+    
+    footer.footer-style-two .copy-right-area .social-icon a {
+        background-color: #041d38;
+    }
+    
+    footer.footer-style-three {
+        background-color: #fff;
+    }
+    
+    footer.footer-style-three .footer-top {
+        background-color: #f7fcff;
+    }
+    
+    footer.footer-style-three .footer-top .social-icon a {
+        background-color: #fff;
+        color: #041d38;
+    }
+    
+    footer.footer-style-three .footer-top .social-icon a:hover {
+        background-color: #ffaa17;
+    }
+    
+    footer.footer-style-three .footer-widget-area .widget,
+    footer.footer-style-three .footer-widget-area .widget a {
+        color: #041d38;
+    }
+    
+    footer.footer-style-three .footer-widget-area .widget a:hover {
+        color: #ffaa17;
+    }
+    
+    footer.footer-style-three .footer-widget-area .widget .widget-title {
+        color: #041d38;
+    }
+    
+    footer.footer-style-three .footer-widget-area .widget.recent-post .post-loop .post {
+        border-color: #f2f3f4;
+    }
+    
+    footer.footer-style-three .footer-widget-area .widget.recent-post .post-loop .post .time {
+        color: #ffaa17;
+    }
+    
+    footer.footer-style-three .copy-right-area .copyrigt-text {
+        color: #041d38;
+        border-color: #d8e0e9;
+    }
+    
+    footer.footer-style-three .copy-right-area a {
+        color: #041d38;
+    }
+    
+    footer.footer-style-three .copy-right-area a:hover {
+        color: #ffaa17;
+    }
+    /*===== Go Top =====*/
+    
+    .go-top-area {
+        position: relative;
+        z-index: 9999;
     }
-}
-
-@media (max-width: 575px) {
-    footer.footer-style-two .footer-widget-area .widget {
-        padding: 0 30px;
+    
+    .go-top-area .go-top {
+        position: fixed;
+        cursor: pointer;
+        top: 0;
+        right: 24px;
+        color: #ffffff;
+        background-color: #ffaa17;
+        z-index: 9999;
+        width: 40px;
+        text-align: center;
+        height: 42px;
+        line-height: 42px;
+        opacity: 0;
+        visibility: hidden;
+        -webkit-transition: all 0.9s ease-out 0s;
+        transition: all 0.9s ease-out 0s;
+        border-right: 0;
+    }
+    
+    .go-top-area .go-top i {
+        position: absolute;
+        top: 50%;
+        left: -4px;
+        right: 0;
+        margin: 0 auto;
+        font-size: 15px;
+        -webkit-transform: translateY(-50%);
+        transform: translateY(-50%);
+        -webkit-transition: all 0.5s ease-out 0s;
+        transition: all 0.5s ease-out 0s;
     }
-}
-
-@media (max-width: 399px) {
-    footer.footer-style-two .footer-widget-area .widget {
-        padding: 0 15px;
+    
+    .go-top-area .go-top i:last-child {
+        opacity: 0;
+        visibility: hidden;
+        top: 60%;
     }
-}
-
-footer.footer-style-two .footer-widget-area .widget .widget-title {
-    font-size: 30px;
-}
-
-@media only screen and (min-width: 576px) and (max-width: 767px) {
-    footer.footer-style-two .footer-widget-area .widget.about-widget {
-        font-size: 15px;
-        line-height: 30px;
+    
+    .go-top-area .go-top::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+        background-color: #ffaa17;
+        opacity: 0;
+        visibility: hidden;
+        -webkit-transition: all 0.5s ease-out 0s;
+        transition: all 0.5s ease-out 0s;
+    }
+    
+    .go-top-area .go-top:focus,
+    .go-top-area .go-top:hover {
+        color: #fff;
+    }
+    
+    .go-top-area .go-top:focus::before,
+    .go-top-area .go-top:hover::before {
+        opacity: 1;
+        visibility: visible;
     }
-}
-
-footer.footer-style-two .footer-widget-area .widget.getin-widget {
-    background-color: #ffaa17;
-    font-weight: 700;
-}
-
-@media (max-width: 767px) {
-    footer.footer-style-two .footer-widget-area .widget.getin-widget {
-        padding: 50px 0;
-    }
-}
-
-footer.footer-style-two .footer-widget-area .widget.getin-widget li {
-    line-height: 36px;
-}
-
-footer.footer-style-two .footer-widget-area .widget.getin-widget,
-footer.footer-style-two .footer-widget-area .widget.getin-widget .widget-title {
-    color: #041d38;
-}
-
-footer.footer-style-two .footer-widget-area .widget.getin-widget .getin-btn {
-    font-family: "Oswald", sans-serif;
-    font-weight: 700;
-    font-size: 14px;
-    padding: 10px 45px;
-    text-transform: uppercase;
-    background-color: #041d38;
-    display: inline-block;
-    margin-top: 30px;
-}
-
-footer.footer-style-two .footer-widget-area .widget.getin-widget .getin-btn:hover {
-    background-color: #041d38;
-    color: #fff;
-}
-
-footer.footer-style-two .copy-right-area {
-    background-color: #021529;
-    padding: 15px 0;
-}
-
-@media (max-width: 767px) {
-    footer.footer-style-two .copy-right-area {
-        padding: 20px 0;
+    
+    .go-top-area .go-top:focus i:first-child,
+    .go-top-area .go-top:hover i:first-child {
+        opacity: 0;
+        top: 0;
+        visibility: hidden;
     }
-}
-
-footer.footer-style-two .copy-right-area .copyrigt-text {
-    padding: 0;
-    border: none;
-}
-
-@media (max-width: 767px) {
-    footer.footer-style-two .copy-right-area .social-icon {
-        margin-top: 15px;
+    
+    .go-top-area .go-top:focus i:last-child,
+    .go-top-area .go-top:hover i:last-child {
+        opacity: 1;
+        visibility: visible;
+        top: 50%;
     }
-}
-
-footer.footer-style-two .copy-right-area .social-icon a {
-    background-color: #041d38;
-}
-
-footer.footer-style-three {
-    background-color: #fff;
-}
-
-footer.footer-style-three .footer-top {
-    background-color: #f7fcff;
-}
-
-footer.footer-style-three .footer-top .social-icon a {
-    background-color: #fff;
-    color: #041d38;
-}
-
-footer.footer-style-three .footer-top .social-icon a:hover {
-    background-color: #ffaa17;
-}
-
-footer.footer-style-three .footer-widget-area .widget,
-footer.footer-style-three .footer-widget-area .widget a {
-    color: #041d38;
-}
-
-footer.footer-style-three .footer-widget-area .widget a:hover {
-    color: #ffaa17;
-}
-
-footer.footer-style-three .footer-widget-area .widget .widget-title {
-    color: #041d38;
-}
-
-footer.footer-style-three .footer-widget-area .widget.recent-post .post-loop .post {
-    border-color: #f2f3f4;
-}
-
-footer.footer-style-three .footer-widget-area .widget.recent-post .post-loop .post .time {
-    color: #ffaa17;
-}
-
-footer.footer-style-three .copy-right-area .copyrigt-text {
-    color: #041d38;
-    border-color: #d8e0e9;
-}
-
-footer.footer-style-three .copy-right-area a {
-    color: #041d38;
-}
-
-footer.footer-style-three .copy-right-area a:hover {
-    color: #ffaa17;
-}
-
-
-/*===== Go Top =====*/
-
-.go-top-area {
-    position: relative;
-    z-index: 9999;
-}
-
-.go-top-area .go-top {
-    position: fixed;
-    cursor: pointer;
-    top: 0;
-    right: 24px;
-    color: #ffffff;
-    background-color: #ffaa17;
-    z-index: 9999;
-    width: 40px;
-    text-align: center;
-    height: 42px;
-    line-height: 42px;
-    opacity: 0;
-    visibility: hidden;
-    -webkit-transition: all 0.9s ease-out 0s;
-    transition: all 0.9s ease-out 0s;
-    border-right: 0;
-}
-
-.go-top-area .go-top i {
-    position: absolute;
-    top: 50%;
-    left: -4px;
-    right: 0;
-    margin: 0 auto;
-    font-size: 15px;
-    -webkit-transform: translateY(-50%);
-    transform: translateY(-50%);
-    -webkit-transition: all 0.5s ease-out 0s;
-    transition: all 0.5s ease-out 0s;
-}
-
-.go-top-area .go-top i:last-child {
-    opacity: 0;
-    visibility: hidden;
-    top: 60%;
-}
-
-.go-top-area .go-top::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    background-color: #ffaa17;
-    opacity: 0;
-    visibility: hidden;
-    -webkit-transition: all 0.5s ease-out 0s;
-    transition: all 0.5s ease-out 0s;
-}
-
-.go-top-area .go-top:focus,
-.go-top-area .go-top:hover {
-    color: #fff;
-}
-
-.go-top-area .go-top:focus::before,
-.go-top-area .go-top:hover::before {
-    opacity: 1;
-    visibility: visible;
-}
-
-.go-top-area .go-top:focus i:first-child,
-.go-top-area .go-top:hover i:first-child {
-    opacity: 0;
-    top: 0;
-    visibility: hidden;
-}
-
-.go-top-area .go-top:focus i:last-child,
-.go-top-area .go-top:hover i:last-child {
-    opacity: 1;
-    visibility: visible;
-    top: 50%;
-}
-
-.go-top-area .go-top.active {
-    top: 98%;
-    -webkit-transform: translateY(-98%);
-    transform: translateY(-98%);
-    opacity: 1;
-    visibility: visible;
-    border-radius: 0;
-    right: 20px;
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
+    
     .go-top-area .go-top.active {
-        top: 93%;
-    }
-}
-
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-    .go-top-area .go-top.active {
-        top: 93%;
-    }
-}
-
-.go-top-wrap {
-    position: relative;
-}
-
-.go-top-wrap .go-top-btn {
-    display: inline-block;
-    width: 40px;
-    height: 40px;
-    line-height: 40px;
-    text-align: center;
-    color: #fff;
-    top: 3px;
-    z-index: 1;
-    background: #ffaa17;
-}
-
-.go-top-wrap .go-top-btn i {
-    font-size: 20px;
-    font-weight: 700;
-    padding-left: 4px;
-    color: #fff;
-}
-
-.go-top-wrap .go-top-btn::after {
-    z-index: -1;
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 40px;
-    height: 40px;
-    -webkit-animation: ripple 1.6s ease-out infinite;
-    animation: ripple 1.6s ease-out infinite;
-    opacity: 0;
-    background: #ffaa17;
-}
-
-.go-top-wrap .go-top-btn:hover {
-    background-color: #000;
-    color: #fff;
-}
-
-
-/*===========================
+        top: 98%;
+        -webkit-transform: translateY(-98%);
+        transform: translateY(-98%);
+        opacity: 1;
+        visibility: visible;
+        border-radius: 0;
+        right: 20px;
+    }
+    
+    @media only screen and (min-width: 992px) and (max-width: 1200px) {
+        .go-top-area .go-top.active {
+            top: 93%;
+        }
+    }
+    
+    @media only screen and (min-width: 768px) and (max-width: 991px) {
+        .go-top-area .go-top.active {
+            top: 93%;
+        }
+    }
+    
+    .go-top-wrap {
+        position: relative;
+    }
+    
+    .go-top-wrap .go-top-btn {
+        display: inline-block;
+        width: 40px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        color: #fff;
+        top: 3px;
+        z-index: 1;
+        background: #ffaa17;
+    }
+    
+    .go-top-wrap .go-top-btn i {
+        font-size: 20px;
+        font-weight: 700;
+        padding-left: 4px;
+        color: #fff;
+    }
+    
+    .go-top-wrap .go-top-btn::after {
+        z-index: -1;
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 40px;
+        height: 40px;
+        -webkit-animation: ripple 1.6s ease-out infinite;
+        animation: ripple 1.6s ease-out infinite;
+        opacity: 0;
+        background: #ffaa17;
+    }
+    
+    .go-top-wrap .go-top-btn:hover {
+        background-color: #000;
+        color: #fff;
+    }
+    /*===========================
     Solution
 ===========================*/
-
-.solution-section {
-    position: relative;
-    background-color: #f7fcff;
-}
-
-.solution-section .solution-content {
-    font-size: 25px;
-}
-
-.solution-section .solution-btn {
-    border: #2a2e78 1px solid;
-    padding: 5px 40px;
-    font-weight: 600;
-    color: #2a2e78;
-    cursor: pointer;
-}
-
-.solution-section .solution-btn:hover {
-    color: #ffaa17;
-    border: #ffaa17 1px solid;
-}
-
-
-/*===========================
+    
+    .solution-section {
+        position: relative;
+        /* background-color: #f7fcff; */
+    }
+    
+    .solution-section .solution-content {
+        font-size: 25px;
+    }
+    
+    .solution-section .solution-btn {
+        border: #2a2e78 1px solid;
+        padding: 5px 40px;
+        font-weight: 600;
+        color: #2a2e78;
+        cursor: pointer;
+    }
+    
+    .solution-section .solution-btn:hover {
+        color: #ffaa17;
+        border: #ffaa17 1px solid;
+    }
+    /*===========================
     Core Product
 ===========================*/
-
-.coreproduct-section {
-    position: relative;
-}
-
-.coreproduct-section .grid_titlle {
-    height: 45px;
-    background-color: #2a2e78;
-    color: white;
-    font-size: 20px;
-    text-align: center;
-}
-
-.coreproduct-section .grid_item {
-    margin-top: 20px;
-}
-
-.coreproduct-section .grid_item>div {
-    height: 470px;
-}
-
-.coreproduct-section .grid_img {
-    height: 252px;
-    overflow: hidden;
-}
-
-.coreproduct-section .grid_img>div {
-    height: 252px;
-    background-size: cover;
-    background-position: center center;
-    -webkit-transition: 0.3s;
-    transition: 0.3s;
-}
-
-.coreproduct-section .grid_img>div:hover {
-    -webkit-transform: scale(1.05, 1.05);
-    transform: scale(1.05, 1.05);
-}
-
-.coreproduct-section .grid_item p {
-    font-size: 16px;
-    text-indent: 25px;
-    padding: 15px 15px 0;
-}
-
-.coreproduct-section .grid_item .grid_button {
-    margin-right: 15px;
-    color: #2a2e78;
-    padding-bottom: 20px;
-    font-weight: 600;
-}
-
-
-/*===========================
+    
+    .coreproduct-section {
+        position: relative;
+    }
+    
+    .coreproduct-section .grid_titlle {
+        height: 45px;
+        background-color: #2a2e78;
+        color: white;
+        font-size: 20px;
+        text-align: center;
+    }
+    
+    .coreproduct-section .grid_item {
+        margin-top: 20px;
+    }
+    
+    .coreproduct-section .grid_item>div {
+        height: 470px;
+    }
+    
+    .coreproduct-section .grid_img {
+        height: 252px;
+        overflow: hidden;
+    }
+    
+    .coreproduct-section .grid_img>div {
+        height: 252px;
+        background-size: cover;
+        background-position: center center;
+        -webkit-transition: 0.3s;
+        transition: 0.3s;
+    }
+    
+    .coreproduct-section .grid_img>div:hover {
+        -webkit-transform: scale(1.05, 1.05);
+        transform: scale(1.05, 1.05);
+    }
+    
+    .coreproduct-section .grid_item p {
+        font-size: 16px;
+        text-indent: 25px;
+        padding: 15px 15px 0;
+    }
+    
+    .coreproduct-section .grid_item .grid_button {
+        margin-right: 15px;
+        color: #2a2e78;
+        padding-bottom: 20px;
+        font-weight: 600;
+    }
+    /*===========================
     About Two
 ===========================*/
-
-.abouttwo-section {
-    position: relative;
-}
-
-.abouttwo-section .abouttwo_item {
-    width: 50%;
-    height: 506px;
-}
-
-.abouttwo-section .abouttwo_content {
-    padding: 0 40px 40px;
-    background-color: #2a2e78;
-}
-
-.abouttwo-section .abouttwo_content>span {
-    color: white;
-    padding: 45px;
-    font-size: 40px;
-}
-
-.abouttwo-section .abouttwo_content p {
-    color: white;
-    font-size: 18px;
-    text-indent: 30px;
-    line-height: 1.9;
-}
-
-.abouttwo-section .abouttwo_content a {
-    color: white;
-    font-size: 16px;
-    cursor: pointer;
-}
-
-.abouttwo-section .abouttwo_content a:hover {
-    color: #ffaa17;
-}
-
-.abouttwo-section .abouttwo_img {
-    background-size: cover;
-    background-position: center center;
-    background-repeat: no-repeat;
-}
-
-@media (max-width: 774px) {
+    
+    .abouttwo-section {
+        position: relative;
+    }
+    
     .abouttwo-section .abouttwo_item {
-        width: 100%;
+        width: 50%;
         height: 506px;
     }
-}
-
-@media only screen and (min-width: 774px) and (max-width: 1120px) {
+    
+    .abouttwo-section .abouttwo_content {
+        padding: 0 40px 40px;
+        background-color: #2a2e78;
+    }
+    
+    .abouttwo-section .abouttwo_content>span {
+        color: white;
+        padding: 45px;
+        font-size: 40px;
+    }
+    
     .abouttwo-section .abouttwo_content p {
+        color: white;
+        font-size: 18px;
+        text-indent: 30px;
+        line-height: 1.9;
+    }
+    
+    .abouttwo-section .abouttwo_content a {
         color: white;
         font-size: 16px;
+        cursor: pointer;
+    }
+    
+    .abouttwo-section .abouttwo_content a:hover {
+        color: #ffaa17;
+    }
+    
+    .abouttwo-section .abouttwo_img {
+        background-size: cover;
+        background-position: center center;
+        background-repeat: no-repeat;
+    }
+    
+    @media (max-width: 774px) {
+        .abouttwo-section .abouttwo_item {
+            width: 100%;
+            height: 506px;
+        }
+    }
+    
+    @media only screen and (min-width: 774px) and (max-width: 1120px) {
+        .abouttwo-section .abouttwo_content p {
+            color: white;
+            font-size: 16px;
+            text-indent: 30px;
+            line-height: 1.6;
+        }
+    }
+    
+    @media (max-width:570px) {
+        .abouttwo-section .abouttwo_content>span {
+            color: white;
+            padding: 30px 45px;
+            font-size: 40px;
+        }
+    }
+    
+    @media (max-width:445px) {
+        .abouttwo-section .abouttwo_content>span {
+            color: white;
+            padding: 25px 30px;
+            font-size: 35px;
+        }
+        .abouttwo-section .abouttwo_content {
+            padding: 0 30px 30px;
+        }
+        .abouttwo-section .abouttwo_content p {
+            color: white;
+            font-size: 16px;
+            text-indent: 30px;
+            line-height: 1.9;
+        }
+    }
+    
+    @media (max-width:321px) {
+        .abouttwo-section .abouttwo_content {
+            height: 526px;
+        }
+    }
+    /*===========================
+    Classic Case
+===========================*/
+    
+    .classic-case-section {
+        position: relative;
+    }
+    
+    .classic-case-section .case-img {
+        position: relative;
+        z-index: 1;
+    }
+    
+    @media only screen and (min-width: 768px) and (max-width: 991px) {
+        .classic-case-section .case-img {
+            margin-top: 60px;
+        }
+    }
+    
+    @media (max-width: 767px) {
+        .classic-case-section .case-img {
+            margin-top: 60px;
+        }
+    }
+    
+    .classic-case-section .case-img::after {
+        position: absolute;
+        right: -25px;
+        bottom: -25px;
+        width: 180px;
+        height: 180px;
+        background-color: #2a2e78;
+        content: '';
+        -webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%);
+        clip-path: polygon(100% 0, 0 100%, 100% 100%);
+        z-index: -1;
+    }
+    
+    .classic-case-section .case-left {
+        position: relative;
+        z-index: 1;
+        margin-top: 26px;
+        height: 100%;
+    }
+    
+    .classic-case-section .case-left h1,
+    strong {
+        color: #2a2e78;
+    }
+    
+    .classic-case-section .case-left a {
+        color: #2a2e78;
+        font-size: 20px;
+        text-decoration: underline;
+        padding-bottom: 15px;
+        cursor: pointer;
+    }
+    
+    .classic-case-section .case-left a:hover {
+        color: #ffaa17;
+    }
+    
+    .classic-case-section .case-left::before {
+        position: absolute;
+        top: -26px;
+        width: 180px;
+        height: 180px;
+        background-color: #2a2e78;
+        content: '';
+        -webkit-clip-path: polygon(100% 0, 0% 100%, 0 0);
+        clip-path: polygon(100% 0, 0% 100%, 0 0);
+        z-index: -1;
+    }
+    
+    .classic-case-section .case-left h1 {
+        font-size: 30px;
+        padding: 20px 0;
+    }
+    
+    .classic-case-section .case-left p {
+        font-size: 16px;
+        padding: 20px 0 0 0;
         text-indent: 30px;
-        line-height: 1.6;
     }
-}
-
-@media (max-width:570px) {
-    .abouttwo-section .abouttwo_content>span {
+    
+    .classic-case-section .section-title h2 {
+        background-color: #2a2e78;
+        color: white;
+        padding: 10px 0;
+        line-height: 1.5;
+        width: 300px;
+    }
+    /*===========================
+    Sub Company
+===========================*/
+    
+    .sub-company-section {
+        position: relative;
+        background-image: url(../img/sub_company_bg.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        height: 1081px;
+    }
+    
+    @media (max-width: 575px) {
+        .sub-company-section {
+            position: relative;
+            background-image: none;
+            height: 100%;
+        }
+    }
+    
+    .sub-company-section .icon {
+        width: 25px;
+        height: 25px;
+        fill: currentColor;
+        overflow: hidden;
+    }
+    
+    .sub-company-section .phone {
+        margin-top: 20px;
+    }
+    
+    .sub-company-section hr {
+        margin-top: 30px;
+    }
+    
+    .sub-company-section .company-short-name {
+        width: 100px;
+    }
+    
+    .sub-company-section .company-name {
+        width: 300px;
+        text-align: right;
+    }
+    
+    @media (max-width: 490px) {
+        .sub-company-section .company-name {
+            width: 180px;
+            text-align: right;
+        }
+    }
+    
+    @media (max-width: 320px) {
+        .sub-company-section .company-name {
+            width: 150px;
+            text-align: right;
+        }
+    }
+    /*===========================
+	Custom Contact 
+===========================*/
+    
+    .cus-contact-section {
+        position: relative;
+    }
+    
+    .cus-contact-section .contact-btn {
+        text-align: center;
+        height: 80px;
+        width: 480px;
+        border-radius: 40px;
+        position: relative;
+    }
+    
+    .cus-contact-section .contact-btn span {
+        font-size: 30px;
+    }
+    
+    .cus-contact-section h2 {
+        font-weight: 400;
+        color: #2a2e78;
+    }
+    
+    .cus-contact-section h1 {
+        letter-spacing: 10px;
+        font-weight: 400;
+        color: #2a2e78;
+    }
+    
+    .cus-contact-section p {
+        font-size: 16px;
+        font-weight: 500;
+    }
+    
+    .cus-contact-section .contact-btn::after {
+        content: url("../img/contact.png");
+        position: absolute;
+        left: 400px;
+        top: 2px;
+        color: #2a2e78
+    }
+    
+    .cus-contact-section .contact-btn span {
+        color: #2a2e78;
+    }
+    
+    @media (max-width: 575px) {
+        .cus-contact-section .contact-btn {
+            width: 380px;
+        }
+        .cus-contact-section .contact-btn::after {
+            left: 300px;
+        }
+    }
+    /*===========================
+	News Breadcrumb
+===========================*/
+    
+    .news-breadcrumb-section {
+        position: relative;
+        background-image: url("../img/news/bg.png");
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        height: 478px;
+        padding-top: 250px;
+    }
+    
+    .news-breadcrumb-section img {
+        max-height: 89px;
+        max-width: 480px;
+    }
+    
+    @media (max-width: 575px) {
+        .news-breadcrumb-section {
+            height: 370px;
+            padding-top: 200px;
+        }
+        .news-breadcrumb-section img {
+            max-height: 62px;
+            max-width: 336px;
+        }
+    }
+    /*===========================
+	News Content
+===========================*/
+    
+    .news-content-section {
+        position: relative;
+        background-color: #f6f6fe;
+    }
+    
+    .news-content-section .menu-1 {
+        color: white;
+        font-size: 24px;
+        padding: 0 0;
+    }
+    
+    .news-content-section .menu-1 .title {
+        background-color: #2a2e78;
+        padding: 15px 0 15px 15px;
+    }
+    
+    .news-content-section .menu-1 ul li {
+        color: #2a2e78;
+        margin-bottom: 2px;
+        background-color: #e0e0f8;
+        font-size: 20px;
+        cursor: pointer;
+    }
+    
+    .news-content-section .menu-1 ul li a {
+        color: #2a2e78;
+        padding: 10px 0 10px 31px;
+        width: 100%;
+        height: 100%;
+    }
+    
+    .news-content-section .menu-1 .unactive {
+        padding: 10px 0 10px 31px;
+    }
+    
+    .news-content-section .menu-1 ul .active {
+        padding: 10px 0 10px 15px;
+        cursor: default;
+    }
+    
+    .news-content-section .menu-1 ul .active::before {
+        content: "▪";
+        color: #2a2e78;
+        margin-right: 10px;
+    }
+    
+    .news-content-section .menu-2 {
+        display: none;
+    }
+    
+    .news-content-section .menu-2 li {
+        display: inline-block;
+        width: 50%;
+        text-align: center;
+        font-size: 20px;
+        color: #2a2e78;
+        padding: 10px 0;
+        background-color: #e0e0f8;
+        cursor: pointer;
+    }
+    
+    .news-content-section .menu-2 li.active {
+        background-color: #2a2e78;
+        color: white;
+        cursor: default;
+    }
+    
+    @media (max-width: 768px) {
+        .news-content-section .menu-1 {
+            display: none;
+        }
+        .news-content-section .menu-2 {
+            display: block;
+        }
+    }
+    
+    .news-content-section .content li {
+        background-color: white;
+        margin-bottom: 15px;
+        margin-left: 0;
+        margin-right: 0;
+        padding: 15px 5px 15px 15px;
+    }
+    
+    .news-content-section .content .img {
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        height: 169px;
+    }
+    
+    .news-content-section .content .hr1 a {
+        font-size: 20px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: #2a2e78;
+    }
+    
+    .news-content-section .content .hr1 span {
+        min-width: 80px;
+        font-size: 14px;
+        color: #757a89;
+    }
+    
+    @media (max-width: 575px) {
+        .news-content-section .content .hr1 {
+            margin-top: 15px;
+        }
+    }
+    
+    .news-content-section .content .hr2 {
+        padding-top: 20px;
+    }
+    
+    .news-content-section .content .hr2 p {
+        text-indent: 30px;
+    }
+    
+    .news-content-section .content .hr3 .more {
+        color: #2a2e78;
+        width: 180px;
+        text-align: center;
+        font-size: 23px;
+        height: 40px;
+        border: #2a2e78 1px solid;
+        border-radius: 20px;
+        margin-top: 15px;
+        cursor: pointer;
+    }
+    
+    .news-content-section .content .hr3 .more:hover {
+        color: #ffaa17;
+        width: 180px;
+        text-align: center;
+        font-size: 23px;
+        height: 40px;
+        border: #ffaa17 1px solid;
+        border-radius: 20px;
+        margin-top: 15px;
+    }
+    
+    .news-content-section .content .page a {
+        background-color: white;
+        margin-right: 5px;
+        font-size: 16px;
+        color: #2a2e78;
+        font-weight: bold;
+        border: #2a2e78 1px solid;
+        padding: 10px 15px;
+        cursor: pointer;
+        border-radius: 2px;
+    }
+    
+    .news-content-section .content .page a:hover,
+    .news-content-section .content .page a.active {
         color: white;
-        padding: 30px 45px;
+        font-weight: bold;
+        border: none;
+        background-color: #2a2e78;
+    }
+    
+    .news-content-section .content .page a.previous,
+    .news-content-section .content .page a.next {
+        padding: 10px 15px;
+    }
+    
+    .news-content-section .content .page span {
+        margin-right: 5px;
+    }
+    
+    .news-content-section .content .page a.disable {
+        color: #757a89;
+        border: none;
+        background-color: white;
+        border: #757a89 1px solid;
+        cursor: default;
+    }
+    
+    @media (max-width: 575px) {
+        .news-content-section .content .page span {
+            display: none;
+        }
+        .news-content-section .content .page a {
+            display: none;
+        }
+        .news-content-section .content .page a.previous,
+        .news-content-section .content .page a.next {
+            display: inline-block;
+        }
+        .news-content-section .content .page a.previous {
+            margin-right: 150px;
+        }
+    }
+    
+    .news-content-section .content .read_content {
+        background-color: white;
+        padding: 30px 20px;
+    }
+    
+    .news-content-section .content .read_content .new-read-title h1 {
+        text-align: center;
+        font-size: 24px;
+        font-weight: 600;
+    }
+    
+    .news-content-section .content .read_content .new-read-title2 {
+        padding: 25px 0;
+    }
+    
+    .news-content-section .content .read_content .new-read-title2 span {
+        font-size: 14px;
+        color: #757a89;
+    }
+    
+    .news-content-section .content .read-page {
+        padding: 25px 0;
+    }
+    
+    .news-content-section .content .read-page a {
+        margin-right: 5px;
+        font-size: 22px;
+        color: #2a2e78;
+        text-decoration: underline;
+        cursor: pointer;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    
+    .news-content-section .content .read-page a.disable {
+        color: #757a89;
+        cursor: default;
+    }
+    
+    .news-content-section .content .read-page a:hover {
+        color: #ffaa17;
+    }
+    
+    .news-content-section .content .read-page a.disable:hover {
+        color: #757a89;
+        cursor: default;
+    }
+    
+    .news-content-section .content .read-page a.previous,
+    .news-content-section .content .read-page a.next {
+        max-width: 280px;
+    }
+    
+    .news-content-section .content .read-page a.min-previous,
+    .news-content-section .content .read-page a.min-next {
+        display: none;
+    }
+    
+    @media (max-width: 989px) {
+        .news-content-section .content .read-page a.min-previous,
+        .news-content-section .content .read-page a.min-next {
+            display: inline-block;
+        }
+        .news-content-section .content .read-page a.previous,
+        .news-content-section .content .read-page a.next {
+            display: none;
+        }
+    }
+    
+    .news-content-section .menu-1 ul.related li {
+        padding: 0;
+        color: #2a2e78;
+        margin-bottom: 2px;
+        background-color: white;
+        font-size: 20px;
+        cursor: pointer;
+    }
+    
+    .news-content-section .menu-1 ul.related li a {
+        padding: 13px 0 7px 10px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: 100%;
+        color: #2a2e78;
+    }
+    
+    .news-content-section .related2 {
+        display: none;
+    }
+    
+    .news-content-section .related2 li {
+        padding: 0;
+        color: #2a2e78;
+        margin-bottom: 2px;
+        background-color: white;
+        font-size: 20px;
+        cursor: pointer;
+    }
+    
+    .news-content-section .related2 li a {
+        padding: 13px 0 7px 10px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: 100%;
+        color: #2a2e78;
+    }
+    
+    .news-content-section .related2 .title {
+        background-color: #2a2e78;
+        padding: 15px 0 15px 15px;
+        color: white;
+    }
+    
+    @media (max-width: 768px) {
+        .news-content-section .related2 {
+            display: block;
+        }
+    }
+    /*===========================
+	Custom Banner
+===========================*/
+    
+    .banner-section .bg-img {
+        background-size: cover;
+        background-position: top center;
+        background-repeat: no-repeat;
+        max-width: 100%;
+        height: 860px;
+    }
+    
+    @media(max-width:1440px) {
+        .banner-section .bg-img {
+            height: 100vh
+        }
+    }
+    
+    .banner-section .bannerContent0 {
+        margin-top: 320px;
+    }
+    
+    .banner-section .bannerContent0 img:nth-child(1) {
+        max-width: 609px;
+        max-height: 97px;
+    }
+    
+    .banner-section .bannerContent0 img:nth-child(2) {
+        margin-top: 50px;
+        max-width: 668px;
+        max-height: 112px;
+    }
+    
+    @media (max-width: 780px) {
+        .banner-section .bg-img {
+            height: 470px;
+        }
+        .banner-section .bannerContent0 {
+            margin-top: 190px;
+        }
+        .banner-section .bannerContent0 img:nth-child(1) {
+            max-width: 304px;
+            max-height: 48px;
+        }
+        .banner-section .bannerContent0 img:nth-child(2) {
+            margin-top: 25px;
+            max-width: 334px;
+            max-height: 56px;
+        }
+    }
+    /*===========================
+	Common Breadcrumb
+===========================*/
+    
+    .common-bradcrumb-section {
+        position: relative;
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        height: 478px;
+        padding-top: 250px;
+    }
+    
+    @media (max-width: 575px) {
+        .common-bradcrumb-section {
+            height: 370px;
+            padding-top: 200px;
+        }
+    }
+    /*===========================
+	Product Grid
+===========================*/
+    
+    .product-grid-section {
+        position: relative;
+        background-color: #f6f6fe
+    }
+    
+    .product-grid-section .grid-filter ul li {
+        display: inline-block;
+        height: 60px;
+        position: relative;
+        width: 12.499999%;
+        padding: 0 1px;
+    }
+    
+    .product-grid-section .grid-filter ul li:nth-child(1) {
+        padding-left: 0;
+        padding-right: 1px;
+    }
+    
+    .product-grid-section .grid-filter ul li:nth-child(8) {
+        padding-right: 0;
+        padding-left: 1px;
+    }
+    
+    .product-grid-section .grid-filter ul li div {
+        width: 100%;
+        height: 100%;
+        display: -ms-flexbox;
+        display: flex;
+        -ms-flex-pack: center;
+        justify-content: center;
+        -ms-flex-align: center;
+        align-items: center;
+        background-color: #e0e0f8;
+        color: #2a2e78;
+        font-size: 20px;
+    }
+    
+    .product-grid-section .grid-filter ul li.active div,
+    .product-grid-section .grid-filter ul li div:hover {
+        background-color: #2a2e78;
+        color: white;
+        cursor: pointer;
+    }
+    
+    @media (max-width: 999px) {
+        .product-grid-section .grid-filter ul li {
+            width: 24.999999%;
+            margin-top: 2px;
+        }
+        .product-grid-section .grid-filter ul li:nth-child(4) {
+            padding-left: 1px;
+            padding-right: 0;
+        }
+        .product-grid-section .grid-filter ul li:nth-child(5) {
+            padding-left: 0;
+            padding-right: 1px;
+        }
+    }
+    
+    @media (max-width: 575px) {
+        .product-grid-section .grid-filter ul li {
+            width: 49.99999%;
+            margin-top: 2px;
+        }
+    }
+    
+    .product-grid-section .grid-isotope {
+        background-color: white;
+    }
+    
+    .product-grid-section .grid-isotope .product-grid-box {
+        margin: 20px 0;
+        border: #8386d5 2px solid;
+        border-radius: 5px;
+        position: relative;
+    }
+    
+    .product-grid-section .grid-isotope .product-grid-box .product-img {
+        padding: 30px 0;
+        overflow: hidden;
+        z-index: -2;
+    }
+    
+    .product-grid-section .grid-isotope .product-grid-box .product-img img {
+        height: 250px;
+        max-width: 250px;
+        margin: 0 auto;
+        display: block;
+    }
+    
+    .product-grid-section .grid-isotope .product-grid-box .title {
+        height: 60px;
+        background-color: #8386d5;
+        z-index: -2;
+        padding: 0 10px;
+    }
+    
+    .product-grid-section .grid-isotope .product-grid-box .title span {
+        color: white;
+        font-size: 20px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    
+    .product-grid-section .grid-isotope .product-grid-box .product-link {
+        position: absolute;
+        top: 45%;
+        /* -webkit-transform: translate(0%, -50%);
+  transform: translate(0%, -50%); */
+        width: 100%;
+        -webkit-transition: all 0.3s ease-out 0s;
+        transition: all 0.3s ease-out 0s;
+        color: #fff;
         font-size: 40px;
+        z-index: 2;
+        opacity: 0;
+        visibility: hidden;
     }
-}
-
-@media (max-width:445px) {
-    .abouttwo-section .abouttwo_content>span {
+    
+    .product-grid-section .grid-isotope .product-grid-box .product-link p {
+        font-size: 18px;
+        text-align: center;
+    }
+    
+    .product-grid-section .grid-isotope .product-grid-box::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background-color: #041d38;
+        z-index: 1;
+        -webkit-transition: all 0.3s ease-out 0s;
+        transition: all 0.3s ease-out 0s;
+        opacity: 0;
+        visibility: hidden;
+    }
+    
+    .product-grid-section .grid-isotope .product-grid-box:hover::after {
+        opacity: 0.9;
+        visibility: visible;
+    }
+    
+    .product-grid-section .grid-isotope .product-grid-box:hover .product-link {
+        opacity: 1;
+        visibility: visible;
+    }
+    /*===========================
+	Product Detail
+===========================*/
+    
+    .product-detial-section {
+        position: relative;
+        background-color: #f6f6fe;
+    }
+    
+    .product-detial-section .up-level-page a {
+        color: #2a2e78;
+        font-size: 22px;
+        text-decoration: underline;
+        cursor: pointer;
+    }
+    
+    .product-detial-section .up-level-page a:hover {
+        color: #ffaa17;
+    }
+    
+    .product-detial-section .article {
+        background-color: white;
+        padding: 0 45px;
+    }
+    
+    @media (max-width: 575px) {
+        .product-detial-section .article {
+            padding: 0 5px;
+        }
+    }
+    
+    .product-detial-section .article .title h1 {
+        font-size: 30px;
+        font-weight: 500;
+        color: #010432;
+        text-align: center;
+    }
+    
+    .product-detial-section .article h2 {
+        font-size: 24px;
+        font-weight: 400;
+        color: #2a2e78;
+        border-left: 8px #2a2e78 solid;
+    }
+    
+    .product-detial-section .article .fun-box .img-box {
+        overflow: hidden;
+        float: right;
+    }
+    
+    .product-detial-section .article .fun-box .img-box img {
+        height: 250px;
+        max-width: 250px;
+    }
+    
+    .product-detial-section .article .fun-box p {
+        padding-bottom: 10px;
+        font-size: 16px;
+        color: #010432;
+    }
+    
+    .product-detial-section .article .fun-box p::before {
+        content: "■";
+        color: #010432;
+        margin-right: 10px;
+    }
+    
+    .product-detial-section .article .params-box {
+        border: #8386d5 solid;
+        border-width: 0 1px 0 1px;
+    }
+    
+    @media (max-width: 1007px) {
+        .product-detial-section .article .params-box {
+            overflow-x: auto;
+        }
+    }
+    
+    .product-detial-section .article .params-box table {
+        width: 100%;
+        min-width: 768px;
+        border: #8386d5 solid;
+        border-width: 1px 0 0 0;
+    }
+    
+    .product-detial-section .article .params-box table th {
+        background-color: #e0e0f8;
+        padding: 0 10px;
+        height: 50px;
+    }
+    
+    .product-detial-section .article .params-box table th:nth-child(1) {
+        border: #8386d5 solid;
+        border-width: 0 1px 1px 0;
+    }
+    
+    .product-detial-section .article .params-box table th:nth-child(2) {
+        border: #8386d5 solid;
+        border-width: 0 0 1px 0;
+    }
+    
+    .product-detial-section .article .params-box table th:nth-child(3) {
+        border: #8386d5 solid;
+        border-width: 0 0 1px 1px;
+    }
+    
+    .product-detial-section .article .params-box table th:nth-child(4) {
+        border: #8386d5 solid;
+        border-width: 0 0 1px 1px;
+    }
+    
+    .product-detial-section .article .params-box table th span {
+        display: inline-block;
+    }
+    
+    .product-detial-section .article .params-box table th span:nth-child(2) {
+        display: inline-block;
+        font-weight: 400;
+        font-size: 14px;
+    }
+    
+    .product-detial-section .article .params-box table td {
+        padding: 0 10px;
+        height: 50px;
+    }
+    
+    .product-detial-section .article .params-box table td:nth-child(1) {
+        border: #8386d5 solid;
+        border-width: 0 1px 1px 0;
+    }
+    
+    .product-detial-section .article .params-box table td:nth-child(2) {
+        border: #8386d5 solid;
+        border-width: 0 0 1px 0;
+    }
+    
+    .product-detial-section .article .params-box table td:nth-child(3) {
+        border: #8386d5 solid;
+        border-width: 0 0 1px 1px;
+    }
+    
+    .product-detial-section .article .params-box table td:nth-child(4) {
+        border: #8386d5 solid;
+        border-width: 0 0 1px 1px;
+    }
+    
+    .product-detial-section .page a {
+        color: #2a2e78;
+        font-size: 22px;
+        text-decoration: underline;
+        cursor: pointer;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 415px;
+    }
+    
+    .product-detial-section .page a:hover {
+        color: #ffaa17;
+    }
+    /*===========================
+	Solution Page
+===========================*/
+    
+    .solution-page-section {
+        position: relative;
+        background-color: #f6f6fe;
+    }
+    
+    .solution-page-section .tab-menu-1 {
         color: white;
-        padding: 25px 30px;
-        font-size: 35px;
+        font-size: 24px;
+        padding: 0 0;
+    }
+    
+    .solution-page-section .tab-menu-1 .title {
+        background-color: #2a2e78;
+        padding: 15px 0 15px 15px;
+    }
+    
+    .solution-page-section .tab-menu-1 ul li {
+        color: #2a2e78;
+        margin-bottom: 2px;
+        background-color: #e0e0f8;
+        font-size: 18px;
+        cursor: pointer;
     }
-    .abouttwo-section .abouttwo_content {
-        padding: 0 30px 30px;
+    
+    .solution-page-section .tab-menu-1 ul li a {
+        color: #2a2e78;
+        padding: 10px 0 10px 31px;
+        width: 100%;
+        height: 100%;
     }
-    .abouttwo-section .abouttwo_content p {
+    
+    .solution-page-section .tab-menu-1 ul .active {
+        padding: 10px 0 10px 15px;
+        cursor: default;
+    }
+    
+    .solution-page-section .tab-menu-1 ul .active::before {
+        content: "▪";
+        color: #2a2e78;
+        margin-right: 10px;
+    }
+    
+    .solution-page-section .tab-menu-2 {
+        display: none;
+    }
+    
+    .solution-page-section .tab-menu-2 ul li {
+        display: inline-block;
+        text-align: center;
+        font-size: 18px;
+        cursor: pointer;
+        height: 60px;
+        margin-bottom: 2px;
+    }
+    
+    .solution-page-section .tab-menu-2 ul li:nth-child(1),
+    .solution-page-section .tab-menu-2 ul li:nth-child(3) {
+        padding-right: 5px;
+        padding-left: 0;
+    }
+    
+    .solution-page-section .tab-menu-2 ul li:nth-child(2),
+    .solution-page-section .tab-menu-2 ul li:nth-child(4) {
+        padding-left: 5px;
+        padding-right: 0;
+    }
+    
+    .solution-page-section .tab-menu-2 ul li a {
+        color: #2a2e78;
+        width: 100%;
+        height: 100%;
+        line-height: 60px;
+        background-color: #e0e0f8;
+    }
+    
+    .solution-page-section .tab-menu-2 ul li.active {
+        /* background-color: #2a2e78; */
         color: white;
+        cursor: default;
+    }
+    
+    .solution-page-section .tab-menu-2 ul li div {
+        width: 100%;
+        height: 100%;
+        background-color: #2a2e78;
+    }
+    
+    @media (max-width: 768px) {
+        .solution-page-section .tab-menu-1 {
+            display: none;
+        }
+        .solution-page-section .tab-menu-2 {
+            display: block;
+        }
+    }
+    
+    .solution-page-section .main {
+        background-color: white;
+        margin: 0;
+    }
+    
+    @media (max-width: 768px) {
+        .solution-page-section .main {
+            margin: 0 -15px;
+        }
+    }
+    
+    .solution-page-section .main .title h1 {
+        text-align: center;
+        font-size: 24px;
+        font-weight: 600;
+        color: #010432;
+    }
+    
+    .solution-page-section .main .sub-title h2 {
+        text-align: center;
+        font-size: 22px;
+        font-weight: 500;
+        color: #010432;
+    }
+    
+    .solution-page-section .main .solution-grid-box {
+        border: #8386d5 1px solid;
+        border-radius: 5px;
+        position: relative;
+    }
+    
+    .solution-page-section .main .solution-grid-box .solution-img {
+        overflow: hidden;
+        z-index: -2;
+    }
+    
+    .solution-page-section .main .solution-grid-box .solution-img>div {
+        height: 290px;
+        width: 100%;
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+    }
+    
+    .solution-page-section .main .solution-grid-box .cover-box {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        padding: 0 5px;
+        -webkit-transition: all 0.3s ease-out 0s;
+        transition: all 0.3s ease-out 0s;
+        z-index: 2;
+        opacity: 0;
+        visibility: hidden;
+    }
+    
+    .solution-page-section .main .solution-grid-box .cover-box>div {
+        width: 100%;
+    }
+    
+    .solution-page-section .main .solution-grid-box .cover-box p {
+        color: white;
+        font-size: 14px;
+        text-align: center;
+    }
+    
+    .solution-page-section .main .solution-grid-box .cover-box div:nth-child(2) {
+        min-height: 80px;
+    }
+    
+    .solution-page-section .main .solution-grid-box::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background-color: #041d38;
+        z-index: 1;
+        -webkit-transition: all 0.3s ease-out 0s;
+        transition: all 0.3s ease-out 0s;
+        opacity: 0;
+        visibility: hidden;
+    }
+    
+    .solution-page-section .main .solution-grid-box:hover::after {
+        opacity: 0.9;
+        visibility: visible;
+    }
+    
+    .solution-page-section .main .solution-grid-box:hover .cover-box {
+        opacity: 1;
+        visibility: visible;
+    }
+    
+    .solution-page-section .main .solution-grid-title span {
+        color: #010432;
         font-size: 16px;
-        text-indent: 30px;
-        line-height: 1.9;
+        font-weight: 600;
+    }
+    
+    .solution-page-section .page a {
+        color: #2a2e78;
+        font-size: 22px;
+        text-decoration: underline;
+        cursor: pointer;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 415px;
+    }
+    
+    .solution-page-section .page a:hover {
+        color: #ffaa17;
+    }
+    /*===========================
+	Join us 
+===========================*/
+    
+    .join-section {
+        position: relative;
+        background-color: #f6f6fe;
+    }
+    
+    .join-section .menu-1 {
+        color: white;
+        font-size: 24px;
+        padding: 0 0;
+    }
+    
+    .join-section .menu-1 .title {
+        background-color: #2a2e78;
+        padding: 15px 0 15px 15px;
+    }
+    
+    .join-section .menu-1 ul li {
+        color: #2a2e78;
+        margin-bottom: 2px;
+        background-color: #e0e0f8;
+        font-size: 16px;
+        cursor: pointer;
+        padding: 10px 0 10px 31px;
+    }
+    
+    .join-section .menu-1 ul li.active {
+        padding: 10px 0 10px 15px;
+        cursor: default;
     }
-}
-
-@media (max-width:321px) {
-    .abouttwo-section .abouttwo_content {
-        height: 526px;
+    
+    .join-section .menu-1 ul li.active::before {
+        content: "▪";
+        color: #2a2e78;
+        margin-right: 10px;
     }
-}
-
-
-/*===========================
-    Classic Case
-===========================*/
-
-.classic-case-section {
-    position: relative;
-}
-
-.classic-case-section .case-img {
-    position: relative;
-    z-index: 1;
-}
-
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-    .classic-case-section .case-img {
-        margin-top: 60px;
+    
+    .join-section .menu-2 {
+        display: none;
     }
-}
-
-@media (max-width: 767px) {
-    .classic-case-section .case-img {
-        margin-top: 60px;
-    }
-}
-
-.classic-case-section .case-img::after {
-    position: absolute;
-    right: -25px;
-    bottom: -25px;
-    width: 180px;
-    height: 180px;
-    background-color: #2a2e78;
-    content: '';
-    -webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%);
-    clip-path: polygon(100% 0, 0 100%, 100% 100%);
-    z-index: -1;
-}
-
-.classic-case-section .case-left {
-    position: relative;
-    z-index: 1;
-    margin-top: 26px;
-    height: 100%;
-}
-
-.classic-case-section .case-left h1,
-strong {
-    color: #2a2e78;
-}
-
-.classic-case-section .case-left a {
-    color: #2a2e78;
-    font-size: 20px;
-    text-decoration: underline;
-    padding-bottom: 15px;
-    cursor: pointer;
-}
-
-.classic-case-section .case-left a:hover {
-    color: #ffaa17;
-}
-
-.classic-case-section .case-left::before {
-    position: absolute;
-    top: -26px;
-    width: 180px;
-    height: 180px;
-    background-color: #2a2e78;
-    content: '';
-    -webkit-clip-path: polygon(100% 0, 0% 100%, 0 0);
-    clip-path: polygon(100% 0, 0% 100%, 0 0);
-    z-index: -1;
-}
-
-.classic-case-section .case-left h1 {
-    font-size: 30px;
-    padding: 20px 0;
-}
-
-.classic-case-section .case-left p {
-    font-size: 16px;
-    padding: 20px 0 0 0;
-    text-indent: 30px;
-}
-
-.classic-case-section .section-title h2 {
-    background-color: #2a2e78;
-    color: white;
-    padding: 10px 0;
-    line-height: 1.5;
-    width: 300px;
-}
-
-
-/*===========================
-    Sub Company
-===========================*/
-
-.sub-company-section {
-    position: relative;
-    background-image: url(../img/sub_company_bg.png);
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    height: 1081px;
-}
-
-@media (max-width: 575px) {
-    .sub-company-section {
-        position: relative;
-        background-image: none;
+    
+    .join-section .menu-2 ul li {
+        min-width: 50%;
+        text-align: center;
+        font-size: 18px;
+        cursor: pointer;
+        margin-bottom: 5px;
+    }
+    
+    .join-section .menu-2 ul li span {
+        color: #2a2e78;
+        padding: 10px 0;
+        background-color: #e0e0f8;
+        width: 100%;
         height: 100%;
     }
-}
-
-.sub-company-section .icon {
-    width: 25px;
-    height: 25px;
-    fill: currentColor;
-    overflow: hidden;
-}
-
-.sub-company-section .phone {
-    margin-top: 20px;
-}
-
-.sub-company-section hr {
-    margin-top: 30px;
-}
-
-.sub-company-section .company-short-name {
-    width: 100px;
-}
-
-.sub-company-section .company-name {
-    width: 300px;
-    text-align: right;
-}
-
-@media (max-width: 490px) {
-    .sub-company-section .company-name {
-        width: 180px;
-        text-align: right;
+    
+    .join-section .menu-2 ul li:nth-child(odd) {
+        padding-right: 5px;
     }
-}
-
-@media (max-width: 320px) {
-    .sub-company-section .company-name {
-        width: 150px;
-        text-align: right;
+    
+    .join-section .menu-2 ul li:nth-child(even) {
+        padding-left: 5px;
     }
-}
-
-
-/*===========================
-	Custom Contact 
-===========================*/
-
-.cus-contact-section {
-    position: relative;
-}
-
-.cus-contact-section .contact-btn {
-    text-align: center;
-    height: 80px;
-    width: 480px;
-    border-radius: 40px;
-    position: relative;
-}
-
-.cus-contact-section .contact-btn span {
-    font-size: 30px;
-}
-
-.cus-contact-section h2 {
-    font-weight: 400;
-    color: #2a2e78;
-}
-
-.cus-contact-section h1 {
-    letter-spacing: 10px;
-    font-weight: 400;
-    color: #2a2e78;
-}
-
-.cus-contact-section p {
-    font-size: 16px;
-    font-weight: 500;
-}
-
-.cus-contact-section .contact-btn::after {
-    content: url("../img/contact.png");
-    position: absolute;
-    left: 400px;
-    top: 2px;
-    color: #2a2e78
-}
-
-.cus-contact-section .contact-btn span {
-    color: #2a2e78;
-}
-
-@media (max-width: 575px) {
-    .cus-contact-section .contact-btn {
-        width: 380px;
+    
+    .join-section .menu-2 ul li.active span {
+        background-color: #2a2e78;
+        color: white;
+        cursor: default;
+    }
+    
+    @media (max-width: 768px) {
+        .join-section .menu-1 {
+            display: none;
+        }
+        .join-section .menu-2 {
+            display: block;
+        }
+    }
+    
+    .join-section .content {
+        background-color: white;
+        padding: 30px 30px;
+    }
+    
+    .join-section .content h1 {
+        text-align: center;
+        font-size: 24px;
+        font-weight: 600;
+        color: #010432;
     }
-    .cus-contact-section .contact-btn::after {
-        left: 300px;
+    
+    .join-section .content h2 {
+        font-size: 20px;
+        font-weight: 600;
+        color: #010432;
+        padding: 10px 0;
+        margin-bottom: 5px;
     }
-}
-
-
-/*===========================
-	News Breadcrumb
-===========================*/
-
-.news-breadcrumb-section {
-    position: relative;
-    background-image: url("../img/news/bg.png");
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    height: 478px;
-    padding-top: 250px;
-}
-
-.news-breadcrumb-section img {
-    max-height: 89px;
-    max-width: 480px;
-}
-
-@media (max-width: 575px) {
-    .news-breadcrumb-section {
-        height: 370px;
-        padding-top: 200px;
+    
+    .join-section .content p {
+        font-size: 16px;
+        color: #010432;
+        margin-bottom: 8px;
     }
-    .news-breadcrumb-section img {
-        max-height: 62px;
-        max-width: 336px;
+    
+    .join-section .content .email {
+        font-size: 16px;
+        color: #010432;
+        font-weight: 600;
     }
-}
-
-
-/*===========================
-	News Content
+    /*===========================
+	Example page
 ===========================*/
-
-.news-content-section {
-    position: relative;
-    background-color: #f6f6fe;
-}
-
-.news-content-section .menu-1 {
-    color: white;
-    font-size: 24px;
-    padding: 0 0;
-}
-
-.news-content-section .menu-1 .title {
-    background-color: #2a2e78;
-    padding: 15px 0 15px 15px;
-}
-
-.news-content-section .menu-1 ul li {
-    color: #2a2e78;
-    margin-bottom: 2px;
-    background-color: #e0e0f8;
-    font-size: 20px;
-    cursor: pointer;
-}
-
-.news-content-section .menu-1 ul li a {
-    color: #2a2e78;
-    padding: 10px 0 10px 31px;
-    width: 100%;
-    height: 100%;
-}
-
-.news-content-section .menu-1 .unactive {
-    padding: 10px 0 10px 31px;
-}
-
-.news-content-section .menu-1 ul .active {
-    padding: 10px 0 10px 15px;
-    cursor: default;
-}
-
-.news-content-section .menu-1 ul .active::before {
-    content: "▪";
-    color: #2a2e78;
-    margin-right: 10px;
-}
-
-.news-content-section .menu-2 {
-    display: none;
-}
-
-.news-content-section .menu-2 li {
-    display: inline-block;
-    width: 50%;
-    text-align: center;
-    font-size: 20px;
-    color: #2a2e78;
-    padding: 10px 0;
-    background-color: #e0e0f8;
-    cursor: pointer;
-}
-
-.news-content-section .menu-2 li.active {
-    background-color: #2a2e78;
-    color: white;
-    cursor: default;
-}
-
-@media (max-width: 768px) {
-    .news-content-section .menu-1 {
-        display: none;
+    
+    .example-page-section {
+        position: relative;
+        background-color: #f6f6fe;
     }
-    .news-content-section .menu-2 {
-        display: block;
+    
+    .example-page-section .menu-1 {
+        color: white;
+        font-size: 24px;
+        padding: 0 0;
+    }
+    
+    .example-page-section .menu-1 .title {
+        background-color: #2a2e78;
+        padding: 15px 0 15px 15px;
+    }
+    
+    .example-page-section .menu-1 ul li {
+        color: #2a2e78;
+        margin-bottom: 2px;
+        background-color: #e0e0f8;
+        font-size: 16px;
+        cursor: pointer;
+        padding: 10px 0 10px 31px;
     }
-}
-
-.news-content-section .content li {
-    background-color: white;
-    margin-bottom: 15px;
-    margin-left: 0;
-    margin-right: 0;
-    padding: 15px 5px 15px 15px;
-}
-
-.news-content-section .content .img {
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    height: 169px;
-}
-
-.news-content-section .content .hr1 a {
-    font-size: 20px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: #2a2e78;
-}
-
-.news-content-section .content .hr1 span {
-    min-width: 80px;
-    font-size: 14px;
-    color: #757a89;
-}
-
-@media (max-width: 575px) {
-    .news-content-section .content .hr1 {
-        margin-top: 15px;
+    
+    .example-page-section .menu-1 ul li.active {
+        padding: 10px 0 10px 15px;
+        cursor: default;
     }
-}
-
-.news-content-section .content .hr2 {
-    padding-top: 20px;
-}
-
-.news-content-section .content .hr2 p {
-    text-indent: 30px;
-}
-
-.news-content-section .content .hr3 .more {
-    color: #2a2e78;
-    width: 180px;
-    text-align: center;
-    font-size: 23px;
-    height: 40px;
-    border: #2a2e78 1px solid;
-    border-radius: 20px;
-    margin-top: 15px;
-    cursor: pointer;
-}
-
-.news-content-section .content .hr3 .more:hover {
-    color: #ffaa17;
-    width: 180px;
-    text-align: center;
-    font-size: 23px;
-    height: 40px;
-    border: #ffaa17 1px solid;
-    border-radius: 20px;
-    margin-top: 15px;
-}
-
-.news-content-section .content .page a {
-    background-color: white;
-    margin-right: 5px;
-    font-size: 16px;
-    color: #2a2e78;
-    font-weight: bold;
-    border: #2a2e78 1px solid;
-    padding: 10px 15px;
-    cursor: pointer;
-    border-radius: 2px;
-}
-
-.news-content-section .content .page a:hover,
-.news-content-section .content .page a.active {
-    color: white;
-    font-weight: bold;
-    border: none;
-    background-color: #2a2e78;
-}
-
-.news-content-section .content .page a.previous,
-.news-content-section .content .page a.next {
-    padding: 10px 15px;
-}
-
-.news-content-section .content .page span {
-    margin-right: 5px;
-}
-
-.news-content-section .content .page a.disable {
-    color: #757a89;
-    border: none;
-    background-color: white;
-    border: #757a89 1px solid;
-    cursor: default;
-}
-
-@media (max-width: 575px) {
-    .news-content-section .content .page span {
-        display: none;
+    
+    .example-page-section .menu-1 ul li.active::before {
+        content: "▪";
+        color: #2a2e78;
+        margin-right: 10px;
     }
-    .news-content-section .content .page a {
+    
+    .example-page-section .menu-2 {
         display: none;
     }
-    .news-content-section .content .page a.previous,
-    .news-content-section .content .page a.next {
-        display: inline-block;
-    }
-    .news-content-section .content .page a.previous {
-        margin-right: 150px;
-    }
-}
-
-.news-content-section .content .read_content {
-    background-color: white;
-    padding: 30px 20px;
-}
-
-.news-content-section .content .read_content .new-read-title h1 {
-    text-align: center;
-    font-size: 24px;
-    font-weight: 600;
-}
-
-.news-content-section .content .read_content .new-read-title2 {
-    padding: 25px 0;
-}
-
-.news-content-section .content .read_content .new-read-title2 span {
-    font-size: 14px;
-    color: #757a89;
-}
-
-.news-content-section .content .read-page {
-    padding: 25px 0;
-}
-
-.news-content-section .content .read-page a {
-    margin-right: 5px;
-    font-size: 22px;
-    color: #2a2e78;
-    text-decoration: underline;
-    cursor: pointer;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.news-content-section .content .read-page a.disable {
-    color: #757a89;
-    cursor: default;
-}
-
-.news-content-section .content .read-page a:hover {
-    color: #ffaa17;
-}
-
-.news-content-section .content .read-page a.disable:hover {
-    color: #757a89;
-    cursor: default;
-}
-
-.news-content-section .content .read-page a.previous,
-.news-content-section .content .read-page a.next {
-    max-width: 280px;
-}
-
-.news-content-section .content .read-page a.min-previous,
-.news-content-section .content .read-page a.min-next {
-    display: none;
-}
-
-@media (max-width: 989px) {
-    .news-content-section .content .read-page a.min-previous,
-    .news-content-section .content .read-page a.min-next {
-        display: inline-block;
+    
+    .example-page-section .menu-2 ul li {
+        min-width: 50%;
+        text-align: center;
+        font-size: 18px;
+        cursor: pointer;
+        margin-bottom: 5px;
+    }
+    
+    .example-page-section .menu-2 ul li span {
+        color: #2a2e78;
+        padding: 10px 0;
+        background-color: #e0e0f8;
+        width: 100%;
+        height: 100%;
     }
-    .news-content-section .content .read-page a.previous,
-    .news-content-section .content .read-page a.next {
-        display: none;
+    
+    .example-page-section .menu-2 ul li:nth-child(odd) {
+        padding-right: 5px;
     }
-}
-
-.news-content-section .menu-1 ul.related li {
-    padding: 0;
-    color: #2a2e78;
-    margin-bottom: 2px;
-    background-color: white;
-    font-size: 20px;
-    cursor: pointer;
-}
-
-.news-content-section .menu-1 ul.related li a {
-    padding: 13px 0 7px 10px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    width: 100%;
-    color: #2a2e78;
-}
-
-.news-content-section .related2 {
-    display: none;
-}
-
-.news-content-section .related2 li {
-    padding: 0;
-    color: #2a2e78;
-    margin-bottom: 2px;
-    background-color: white;
-    font-size: 20px;
-    cursor: pointer;
-}
-
-.news-content-section .related2 li a {
-    padding: 13px 0 7px 10px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    width: 100%;
-    color: #2a2e78;
-}
-
-.news-content-section .related2 .title {
-    background-color: #2a2e78;
-    padding: 15px 0 15px 15px;
-    color: white;
-}
-
-@media (max-width: 768px) {
-    .news-content-section .related2 {
-        display: block;
+    
+    .example-page-section .menu-2 ul li:nth-child(even) {
+        padding-left: 5px;
     }
-}
-
-
-/*===========================
-	Custom Banner
-===========================*/
-
-.banner-section .bg-img {
-    background-size: cover;
-    background-position: top center;
-    background-repeat: no-repeat;
-    max-width: 100%;
-    height: 100vh;
-}
-
-.banner-section .bannerContent0 {
-    margin-top: 320px;
-}
-
-.banner-section .bannerContent0 img:nth-child(1) {
-    max-width: 609px;
-    max-height: 97px;
-}
-
-.banner-section .bannerContent0 img:nth-child(2) {
-    margin-top: 50px;
-    max-width: 668px;
-    max-height: 112px;
-}
-
-@media (max-width: 780px) {
-    .banner-section .bg-img {
-        height: 470px;
+    
+    .example-page-section .menu-2 ul li.active span {
+        background-color: #2a2e78;
+        color: white;
+        cursor: default;
+    }
+    
+    @media (max-width: 768px) {
+        .example-page-section .menu-1 {
+            display: none;
+        }
+        .example-page-section .menu-2 {
+            display: block;
+        }
+    }
+    
+    .example-page-section .subject-box {
+        background-color: white;
+        padding: 0 25px 5px;
+    }
+    
+    .example-page-section .subject-box h1 {
+        text-align: center;
+        font-size: 24px;
+        font-weight: 600;
+        color: #010432;
     }
-    .banner-section .bannerContent0 {
-        margin-top: 190px;
+    
+    .example-page-section .subject-box .subject-img {
+        float: right;
+        max-height: 368px;
+        max-width: 550px;
     }
-    .banner-section .bannerContent0 img:nth-child(1) {
-        max-width: 304px;
-        max-height: 48px;
+    
+    .example-page-section .subject-box p {
+        font-size: 16px;
+        color: #010432;
+        margin-bottom: 8px;
+        text-align: left;
+        text-indent: 30px;
     }
-    .banner-section .bannerContent0 img:nth-child(2) {
-        margin-top: 25px;
-        max-width: 334px;
-        max-height: 56px;
+    
+    @media (max-width: 990px) {
+        .example-page-section .subject-box .subject-img {
+            float: none;
+            height: 100%;
+            width: 100%;
+        }
+    }
+    
+    .example-page-section .example-list-box {
+        background-color: white;
+        padding: 35px 25px 5px;
+    }
+    
+    .example-page-section .example-list-box .title h1 {
+        background-color: #2a2e78;
+        color: white;
+        font-size: 38px;
+        line-height: 65px;
+        font-weight: 300;
+        width: 300px;
+        text-align: center;
     }
-}
-
-
-/*===========================
-	Common Breadcrumb
-===========================*/
-
-.common-bradcrumb-section {
-    position: relative;
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    height: 478px;
-    padding-top: 250px;
-}
-
-@media (max-width: 575px) {
-    .common-bradcrumb-section {
-        height: 370px;
-        padding-top: 200px;
+    
+    .example-page-section .example-list-box .img-box {
+        /* overflow: hidden; */
+        float: right;
+        position: relative;
+        z-index: 5;
     }
-}
-
-
-/*===========================
-	Product Grid
-===========================*/
-
-.product-grid-section {
-    position: relative;
-    background-color: #f6f6fe
-}
-
-.product-grid-section .grid-filter ul li {
-    display: inline-block;
-    height: 60px;
-    position: relative;
-    width: 12.499999%;
-    padding: 0 1px;
-}
-
-.product-grid-section .grid-filter ul li:nth-child(1) {
-    padding-left: 0;
-    padding-right: 1px;
-}
-
-.product-grid-section .grid-filter ul li:nth-child(8) {
-    padding-right: 0;
-    padding-left: 1px;
-}
-
-.product-grid-section .grid-filter ul li div {
-    width: 100%;
-    height: 100%;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-pack: center;
-    justify-content: center;
-    -ms-flex-align: center;
-    align-items: center;
-    background-color: #e0e0f8;
-    color: #2a2e78;
-    font-size: 20px;
-}
-
-.product-grid-section .grid-filter ul li.active div,
-.product-grid-section .grid-filter ul li div:hover {
-    background-color: #2a2e78;
-    color: white;
-    cursor: pointer;
-}
-
-@media (max-width: 999px) {
-    .product-grid-section .grid-filter ul li {
-        width: 24.999999%;
-        margin-top: 2px;
+    
+    .example-page-section .example-list-box .img-box .img-div {
+        width: 252px;
+        height: 322px;
+        background-position: center center;
+        background-size: cover;
+        background-repeat: no-repeat;
+        z-index: 2;
+    }
+    
+    .example-page-section .example-list-box .img-box::after {
+        position: absolute;
+        right: -14px;
+        bottom: -14px;
+        width: 180px;
+        height: 180px;
+        background-color: #2a2e78;
+        content: '';
+        -webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%);
+        clip-path: polygon(100% 0, 0 100%, 100% 100%);
+        z-index: -1;
+    }
+    
+    @media (max-width: 990px) {
+        .example-page-section .example-list-box .img-box {
+            float: none;
+            width: 100%;
+            margin-bottom: 15px;
+        }
+        .example-page-section .example-list-box .img-box .img-div {
+            width: 100%;
+        }
+    }
+    
+    .example-page-section .example-list-box .memo-box img {
+        max-width: 202px;
+        height: 14px;
+    }
+    
+    .example-page-section .example-list-box .memo-box h1 {
+        color: #2a2e78;
+        font-size: 22px;
+        font-weight: 600;
+        padding: 5px 0;
+    }
+    
+    .example-page-section .example-list-box .memo-box .location-scale {
+        color: #2a2e78;
+        font-size: 16px;
+        font-weight: 600;
     }
-    .product-grid-section .grid-filter ul li:nth-child(4) {
-        padding-left: 1px;
-        padding-right: 0;
+    
+    .example-page-section .example-list-box .memo-box .location-scale span:nth-child(1) {
+        min-width: 200px;
     }
-    .product-grid-section .grid-filter ul li:nth-child(5) {
-        padding-left: 0;
-        padding-right: 1px;
+    
+    .example-page-section .example-list-box .memo-box p {
+        color: #010432;
+        text-indent: 30px;
+        line-height: 1.7;
     }
-}
-
-@media (max-width: 575px) {
-    .product-grid-section .grid-filter ul li {
-        width: 49.99999%;
-        margin-top: 2px;
-    }
-}
-
-.product-grid-section .grid-isotope {
-    background-color: white;
-}
-
-.product-grid-section .grid-isotope .product-grid-box {
-    margin: 20px 0;
-    border: #8386d5 2px solid;
-    border-radius: 5px;
-    position: relative;
-}
-
-.product-grid-section .grid-isotope .product-grid-box .product-img {
-    padding: 30px 0;
-    overflow: hidden;
-    z-index: -2;
-}
-
-.product-grid-section .grid-isotope .product-grid-box .product-img img {
-    height: 250px;
-    max-width: 250px;
-    margin: 0 auto;
-    display: block;
-}
-
-.product-grid-section .grid-isotope .product-grid-box .title {
-    height: 60px;
-    background-color: #8386d5;
-    z-index: -2;
-    padding: 0 10px;
-}
-
-.product-grid-section .grid-isotope .product-grid-box .title span {
-    color: white;
-    font-size: 20px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.product-grid-section .grid-isotope .product-grid-box .product-link {
-    position: absolute;
-    top: 45%;
-    /* -webkit-transform: translate(0%, -50%);
-  transform: translate(0%, -50%); */
-    width: 100%;
-    -webkit-transition: all 0.3s ease-out 0s;
-    transition: all 0.3s ease-out 0s;
-    color: #fff;
-    font-size: 40px;
-    z-index: 2;
-    opacity: 0;
-    visibility: hidden;
-}
-
-.product-grid-section .grid-isotope .product-grid-box .product-link p {
-    font-size: 18px;
-    text-align: center;
-}
-
-.product-grid-section .grid-isotope .product-grid-box::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: #041d38;
-    z-index: 1;
-    -webkit-transition: all 0.3s ease-out 0s;
-    transition: all 0.3s ease-out 0s;
-    opacity: 0;
-    visibility: hidden;
-}
-
-.product-grid-section .grid-isotope .product-grid-box:hover::after {
-    opacity: 0.9;
-    visibility: visible;
-}
-
-.product-grid-section .grid-isotope .product-grid-box:hover .product-link {
-    opacity: 1;
-    visibility: visible;
-}
-
-
-/*===========================
-	Product Detail
-===========================*/
-
-.product-detial-section {
-    position: relative;
-    background-color: #f6f6fe;
-}
-
-.product-detial-section .up-level-page a {
-    color: #2a2e78;
-    font-size: 22px;
-    text-decoration: underline;
-    cursor: pointer;
-}
-
-.product-detial-section .up-level-page a:hover {
-    color: #ffaa17;
-}
-
-.product-detial-section .article {
-    background-color: white;
-    padding: 0 45px;
-}
-
-@media (max-width: 575px) {
-    .product-detial-section .article {
-        padding: 0 5px;
+    
+    .example-page-section .example-list-box .line {
+        height: 2px;
+        background-color: #f6f6fe;
     }
-}
-
-.product-detial-section .article .title h1 {
-    font-size: 30px;
-    font-weight: 500;
-    color: #010432;
-    text-align: center;
-}
-
-.product-detial-section .article h2 {
-    font-size: 24px;
-    font-weight: 400;
-    color: #2a2e78;
-    border-left: 8px #2a2e78 solid;
-}
-
-.product-detial-section .article .fun-box .img-box {
-    overflow: hidden;
-    float: right;
-}
-
-.product-detial-section .article .fun-box .img-box img {
-    height: 250px;
-    max-width: 250px;
-}
-
-.product-detial-section .article .fun-box p {
-    padding-bottom: 10px;
-    font-size: 16px;
-    color: #010432;
-}
-
-.product-detial-section .article .fun-box p::before {
-    content: "■";
-    color: #010432;
-    margin-right: 10px;
-}
-
-.product-detial-section .article .params-box {
-    border: #8386d5 solid;
-    border-width: 0 1px 0 1px;
-}
-
-@media (max-width: 1007px) {
-    .product-detial-section .article .params-box {
-        overflow-x: auto;
-    }
-}
-
-.product-detial-section .article .params-box table {
-    width: 100%;
-    min-width: 768px;
-    border: #8386d5 solid;
-    border-width: 1px 0 0 0;
-}
-
-.product-detial-section .article .params-box table th {
-    background-color: #e0e0f8;
-    padding: 0 10px;
-    height: 50px;
-}
-
-.product-detial-section .article .params-box table th:nth-child(1) {
-    border: #8386d5 solid;
-    border-width: 0 1px 1px 0;
-}
-
-.product-detial-section .article .params-box table th:nth-child(2) {
-    border: #8386d5 solid;
-    border-width: 0 0 1px 0;
-}
-
-.product-detial-section .article .params-box table th:nth-child(3) {
-    border: #8386d5 solid;
-    border-width: 0 0 1px 1px;
-}
-
-.product-detial-section .article .params-box table th:nth-child(4) {
-    border: #8386d5 solid;
-    border-width: 0 0 1px 1px;
-}
-
-.product-detial-section .article .params-box table th span {
-    display: inline-block;
-}
-
-.product-detial-section .article .params-box table th span:nth-child(2) {
-    display: inline-block;
-    font-weight: 400;
-    font-size: 14px;
-}
-
-.product-detial-section .article .params-box table td {
-    padding: 0 10px;
-    height: 50px;
-}
-
-.product-detial-section .article .params-box table td:nth-child(1) {
-    border: #8386d5 solid;
-    border-width: 0 1px 1px 0;
-}
-
-.product-detial-section .article .params-box table td:nth-child(2) {
-    border: #8386d5 solid;
-    border-width: 0 0 1px 0;
-}
-
-.product-detial-section .article .params-box table td:nth-child(3) {
-    border: #8386d5 solid;
-    border-width: 0 0 1px 1px;
-}
-
-.product-detial-section .article .params-box table td:nth-child(4) {
-    border: #8386d5 solid;
-    border-width: 0 0 1px 1px;
-}
-
-.product-detial-section .page a {
-    color: #2a2e78;
-    font-size: 22px;
-    text-decoration: underline;
-    cursor: pointer;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 415px;
-}
-
-.product-detial-section .page a:hover {
-    color: #ffaa17;
-}
-
-
-/*===========================
-	Solution Page
+    /*===========================
+	About Page 
 ===========================*/
-
-.solution-page-section {
-    position: relative;
-    background-color: #f6f6fe;
-}
-
-.solution-page-section .tab-menu-1 {
-    color: white;
-    font-size: 24px;
-    padding: 0 0;
-}
-
-.solution-page-section .tab-menu-1 .title {
-    background-color: #2a2e78;
-    padding: 15px 0 15px 15px;
-}
-
-.solution-page-section .tab-menu-1 ul li {
-    color: #2a2e78;
-    margin-bottom: 2px;
-    background-color: #e0e0f8;
-    font-size: 18px;
-    cursor: pointer;
-}
-
-.solution-page-section .tab-menu-1 ul li a {
-    color: #2a2e78;
-    padding: 10px 0 10px 31px;
-    width: 100%;
-    height: 100%;
-}
-
-.solution-page-section .tab-menu-1 ul .active {
-    padding: 10px 0 10px 15px;
-    cursor: default;
-}
-
-.solution-page-section .tab-menu-1 ul .active::before {
-    content: "▪";
-    color: #2a2e78;
-    margin-right: 10px;
-}
-
-.solution-page-section .tab-menu-2 {
-    display: none;
-}
-
-.solution-page-section .tab-menu-2 ul li {
-    display: inline-block;
-    text-align: center;
-    font-size: 18px;
-    cursor: pointer;
-    height: 60px;
-    margin-bottom: 2px;
-}
-
-.solution-page-section .tab-menu-2 ul li:nth-child(1),
-.solution-page-section .tab-menu-2 ul li:nth-child(3) {
-    padding-right: 5px;
-    padding-left: 0;
-}
-
-.solution-page-section .tab-menu-2 ul li:nth-child(2),
-.solution-page-section .tab-menu-2 ul li:nth-child(4) {
-    padding-left: 5px;
-    padding-right: 0;
-}
-
-.solution-page-section .tab-menu-2 ul li a {
-    color: #2a2e78;
-    width: 100%;
-    height: 100%;
-    line-height: 60px;
-    background-color: #e0e0f8;
-}
-
-.solution-page-section .tab-menu-2 ul li.active {
-    /* background-color: #2a2e78; */
-    color: white;
-    cursor: default;
-}
-
-.solution-page-section .tab-menu-2 ul li div {
-    width: 100%;
-    height: 100%;
-    background-color: #2a2e78;
-}
-
-@media (max-width: 768px) {
-    .solution-page-section .tab-menu-1 {
-        display: none;
+    
+    .about-introduce-section {
+        position: relative;
     }
-    .solution-page-section .tab-menu-2 {
+    
+    .about-introduce-section .img-box img {
+        max-width: 411px;
+        max-height: 332px;
+        margin: 0 auto;
         display: block;
+        width: 100%;
+        height: 100%;
     }
-}
-
-.solution-page-section .main {
-    background-color: white;
-    margin: 0;
-}
-
-@media (max-width: 768px) {
-    .solution-page-section .main {
-        margin: 0 -15px;
-    }
-}
-
-.solution-page-section .main .title h1 {
-    text-align: center;
-    font-size: 24px;
-    font-weight: 600;
-    color: #010432;
-}
-
-.solution-page-section .main .sub-title h2 {
-    text-align: center;
-    font-size: 22px;
-    font-weight: 500;
-    color: #010432;
-}
-
-.solution-page-section .main .solution-grid-box {
-    border: #8386d5 1px solid;
-    border-radius: 5px;
-    position: relative;
-}
-
-.solution-page-section .main .solution-grid-box .solution-img {
-    overflow: hidden;
-    z-index: -2;
-}
-
-.solution-page-section .main .solution-grid-box .solution-img>div {
-    height: 290px;
-    width: 100%;
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: cover;
-}
-
-.solution-page-section .main .solution-grid-box .cover-box {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    padding: 0 5px;
-    -webkit-transition: all 0.3s ease-out 0s;
-    transition: all 0.3s ease-out 0s;
-    z-index: 2;
-    opacity: 0;
-    visibility: hidden;
-}
-
-.solution-page-section .main .solution-grid-box .cover-box>div {
-    width: 100%;
-}
-
-.solution-page-section .main .solution-grid-box .cover-box p {
-    color: white;
-    font-size: 14px;
-    text-align: center;
-}
-
-.solution-page-section .main .solution-grid-box .cover-box div:nth-child(2) {
-    min-height: 80px;
-}
-
-.solution-page-section .main .solution-grid-box::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: #041d38;
-    z-index: 1;
-    -webkit-transition: all 0.3s ease-out 0s;
-    transition: all 0.3s ease-out 0s;
-    opacity: 0;
-    visibility: hidden;
-}
-
-.solution-page-section .main .solution-grid-box:hover::after {
-    opacity: 0.9;
-    visibility: visible;
-}
-
-.solution-page-section .main .solution-grid-box:hover .cover-box {
-    opacity: 1;
-    visibility: visible;
-}
-
-.solution-page-section .main .solution-grid-title span {
-    color: #010432;
-    font-size: 16px;
-    font-weight: 600;
-}
-
-.solution-page-section .page a {
-    color: #2a2e78;
-    font-size: 22px;
-    text-decoration: underline;
-    cursor: pointer;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 415px;
-}
-
-.solution-page-section .page a:hover {
-    color: #ffaa17;
-}
-
-
-/*===========================
-	Join us 
-===========================*/
-
-.join-section {
-    position: relative;
-    background-color: #f6f6fe;
-}
-
-.join-section .menu-1 {
-    color: white;
-    font-size: 24px;
-    padding: 0 0;
-}
-
-.join-section .menu-1 .title {
-    background-color: #2a2e78;
-    padding: 15px 0 15px 15px;
-}
-
-.join-section .menu-1 ul li {
-    color: #2a2e78;
-    margin-bottom: 2px;
-    background-color: #e0e0f8;
-    font-size: 16px;
-    cursor: pointer;
-    padding: 10px 0 10px 31px;
-}
-
-.join-section .menu-1 ul li.active {
-    padding: 10px 0 10px 15px;
-    cursor: default;
-}
-
-.join-section .menu-1 ul li.active::before {
-    content: "▪";
-    color: #2a2e78;
-    margin-right: 10px;
-}
-
-.join-section .menu-2 {
-    display: none;
-}
-
-.join-section .menu-2 ul li {
-    min-width: 50%;
-    text-align: center;
-    font-size: 18px;
-    cursor: pointer;
-    margin-bottom: 5px;
-}
-
-.join-section .menu-2 ul li span {
-    color: #2a2e78;
-    padding: 10px 0;
-    background-color: #e0e0f8;
-    width: 100%;
-    height: 100%;
-}
-
-.join-section .menu-2 ul li:nth-child(odd) {
-    padding-right: 5px;
-}
-
-.join-section .menu-2 ul li:nth-child(even) {
-    padding-left: 5px;
-}
-
-.join-section .menu-2 ul li.active span {
-    background-color: #2a2e78;
-    color: white;
-    cursor: default;
-}
-
-@media (max-width: 768px) {
-    .join-section .menu-1 {
-        display: none;
-    }
-    .join-section .menu-2 {
-        display: block;
+    
+    .about-introduce-section .content p {
+        font-size: 18px;
+        color: #010432;
+        line-height: 1.8;
     }
-}
-
-.join-section .content {
-    background-color: white;
-    padding: 30px 30px;
-}
-
-.join-section .content h1 {
-    text-align: center;
-    font-size: 24px;
-    font-weight: 600;
-    color: #010432;
-}
-
-.join-section .content h2 {
-    font-size: 20px;
-    font-weight: 600;
-    color: #010432;
-    padding: 10px 0;
-    margin-bottom: 5px;
-}
-
-.join-section .content p {
-    font-size: 16px;
-    color: #010432;
-    margin-bottom: 8px;
-}
-
-.join-section .content .email {
-    font-size: 16px;
-    color: #010432;
-    font-weight: 600;
-}
-
-
-/*===========================
-	Example page
-===========================*/
-
-.example-page-section {
-    position: relative;
-    background-color: #f6f6fe;
-}
-
-.example-page-section .menu-1 {
-    color: white;
-    font-size: 24px;
-    padding: 0 0;
-}
-
-.example-page-section .menu-1 .title {
-    background-color: #2a2e78;
-    padding: 15px 0 15px 15px;
-}
-
-.example-page-section .menu-1 ul li {
-    color: #2a2e78;
-    margin-bottom: 2px;
-    background-color: #e0e0f8;
-    font-size: 16px;
-    cursor: pointer;
-    padding: 10px 0 10px 31px;
-}
-
-.example-page-section .menu-1 ul li.active {
-    padding: 10px 0 10px 15px;
-    cursor: default;
-}
-
-.example-page-section .menu-1 ul li.active::before {
-    content: "▪";
-    color: #2a2e78;
-    margin-right: 10px;
-}
-
-.example-page-section .menu-2 {
-    display: none;
-}
-
-.example-page-section .menu-2 ul li {
-    min-width: 50%;
-    text-align: center;
-    font-size: 18px;
-    cursor: pointer;
-    margin-bottom: 5px;
-}
-
-.example-page-section .menu-2 ul li span {
-    color: #2a2e78;
-    padding: 10px 0;
-    background-color: #e0e0f8;
-    width: 100%;
-    height: 100%;
-}
-
-.example-page-section .menu-2 ul li:nth-child(odd) {
-    padding-right: 5px;
-}
-
-.example-page-section .menu-2 ul li:nth-child(even) {
-    padding-left: 5px;
-}
-
-.example-page-section .menu-2 ul li.active span {
-    background-color: #2a2e78;
-    color: white;
-    cursor: default;
-}
-
-@media (max-width: 768px) {
-    .example-page-section .menu-1 {
-        display: none;
+    
+    .about-introduce-section .content p:nth-child(1) {
+        text-indent: 20px;
     }
-    .example-page-section .menu-2 {
-        display: block;
+    
+    .about-introduce-section .content p:nth-child(2) {
+        text-indent: 30px;
     }
-}
-
-.example-page-section .subject-box {
-    background-color: white;
-    padding: 0 25px 5px;
-}
-
-.example-page-section .subject-box h1 {
-    text-align: center;
-    font-size: 24px;
-    font-weight: 600;
-    color: #010432;
-}
-
-.example-page-section .subject-box .subject-img {
-    float: right;
-    max-height: 368px;
-    max-width: 550px;
-}
-
-.example-page-section .subject-box p {
-    font-size: 16px;
-    color: #010432;
-    margin-bottom: 8px;
-    text-align: left;
-    text-indent: 30px;
-}
-
-@media (max-width: 990px) {
-    .example-page-section .subject-box .subject-img {
-        float: none;
-        height: 100%;
-        width: 100%;
+    
+    .about-introduce-section .content p span {
+        font-weight: 600;
+        padding-right: 5px;
     }
-}
-
-.example-page-section .example-list-box {
-    background-color: white;
-    padding: 35px 25px 5px;
-}
-
-.example-page-section .example-list-box .title h1 {
-    background-color: #2a2e78;
-    color: white;
-    font-size: 38px;
-    line-height: 65px;
-    font-weight: 300;
-    width: 300px;
-    text-align: center;
-}
-
-.example-page-section .example-list-box .img-box {
-    /* overflow: hidden; */
-    float: right;
-    position: relative;
-    z-index: 5;
-}
-
-.example-page-section .example-list-box .img-box .img-div {
-    width: 252px;
-    height: 322px;
-    background-position: center center;
-    background-size: cover;
-    background-repeat: no-repeat;
-    z-index: 2;
-}
-
-.example-page-section .example-list-box .img-box::after {
-    position: absolute;
-    right: -14px;
-    bottom: -14px;
-    width: 180px;
-    height: 180px;
-    background-color: #2a2e78;
-    content: '';
-    -webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%);
-    clip-path: polygon(100% 0, 0 100%, 100% 100%);
-    z-index: -1;
-}
-
-@media (max-width: 990px) {
-    .example-page-section .example-list-box .img-box {
-        float: none;
-        width: 100%;
-        margin-bottom: 15px;
+    
+    .about-introduce-section .content a {
+        border: #2a2e78 1px solid;
+        color: #2a2e78;
+        font-size: 20px;
+        padding: 3px 30px;
     }
-    .example-page-section .example-list-box .img-box .img-div {
-        width: 100%;
+    
+    .about-introduce-section .content a:hover {
+        border: #ffaa17 1px solid;
+        color: #ffaa17;
     }
-}
-
-.example-page-section .example-list-box .memo-box img {
-    max-width: 202px;
-    height: 14px;
-}
-
-.example-page-section .example-list-box .memo-box h1 {
-    color: #2a2e78;
-    font-size: 22px;
-    font-weight: 600;
-    padding: 5px 0;
-}
-
-.example-page-section .example-list-box .memo-box .location-scale {
-    color: #2a2e78;
-    font-size: 16px;
-    font-weight: 600;
-}
-
-.example-page-section .example-list-box .memo-box .location-scale span:nth-child(1) {
-    min-width: 200px;
-}
-
-.example-page-section .example-list-box .memo-box p {
-    color: #010432;
-    text-indent: 30px;
-    line-height: 1.7;
-}
-
-.example-page-section .example-list-box .line {
-    height: 2px;
-    background-color: #f6f6fe;
-}
-
-
-/*===========================
-	About Page 
-===========================*/
-
-.about-introduce-section {
-    position: relative;
-}
-
-.about-introduce-section .img-box img {
-    max-width: 411px;
-    max-height: 332px;
-    margin: 0 auto;
-    display: block;
-    width: 100%;
-    height: 100%;
-}
-
-.about-introduce-section .content p {
-    font-size: 18px;
-    color: #010432;
-    line-height: 1.8;
-}
-
-.about-introduce-section .content p:nth-child(1) {
-    text-indent: 20px;
-}
-
-.about-introduce-section .content p:nth-child(2) {
-    text-indent: 30px;
-}
-
-.about-introduce-section .content p span {
-    font-weight: 600;
-    padding-right: 5px;
-}
-
-.about-introduce-section .content a {
-    border: #2a2e78 1px solid;
-    color: #2a2e78;
-    font-size: 20px;
-    padding: 3px 30px;
-}
-
-.about-introduce-section .content a:hover {
-    border: #ffaa17 1px solid;
-    color: #ffaa17;
-}
-
-
-/*===========================
+    /*===========================
 	About Page -- Credential
 ===========================*/
-
-.credential-section {
-    position: relative;
-    background-color: #f7fcff;
-}
-
-
-/*===========================
+    
+    .credential-section {
+        position: relative;
+        background-color: #f7fcff;
+    }
+    /*===========================
 	About Page -- Investor Relations
 ===========================*/
-
-.investor-section {
-    position: relative;
-}
-
-
-/*===========================
+    
+    .investor-section {
+        position: relative;
+    }
+    /*===========================
 	About Page -- Organizational Structure
 ===========================*/
-
-.org-structure-section {
-    position: relative;
-    background-color: #f7fcff;
-}
-
-
-/*===========================
+    
+    .org-structure-section {
+        position: relative;
+        background-color: #f7fcff;
+    }
+    /*===========================
 	About Page -- History
 ===========================*/
-
-.history-section {
-    position: relative;
-}
-
-.history-section .content .left-box {
-    width: 185px;
-    min-width: 185px;
-    border-right: #2a2e78 5px solid;
-    display: inline-block;
-}
-
-.history-section .content h1 {
-    color: #2a2e78;
-    font-size: 20px;
-    font-weight: 600;
-}
-
-.history-section .content .line {
-    height: 5px;
-    width: 25px;
-    background-color: #2a2e78;
-}
-
-.history-section .content .right-box {
-    display: inline-block;
-}
-
-.history-section .content .right-box p {
-    padding-left: 25px;
-}
-
-.history-section .content .right-box p span,
-.history-section .content .left-box p span {
-    color: #2a2e78;
-    padding-right: 5px;
-}
-
-
-/*===========================
+    
+    .history-section {
+        position: relative;
+    }
+    
+    .history-section .content .left-box {
+        width: 185px;
+        min-width: 185px;
+        border-right: #2a2e78 5px solid;
+        display: inline-block;
+    }
+    
+    .history-section .content h1 {
+        color: #2a2e78;
+        font-size: 20px;
+        font-weight: 600;
+    }
+    
+    .history-section .content .line {
+        height: 5px;
+        width: 25px;
+        background-color: #2a2e78;
+    }
+    
+    .history-section .content .right-box {
+        display: inline-block;
+    }
+    
+    .history-section .content .right-box p {
+        padding-left: 25px;
+    }
+    
+    .history-section .content .right-box p span,
+    .history-section .content .left-box p span {
+        color: #2a2e78;
+        padding-right: 5px;
+    }
+    /*===========================
 	About Page -- Sub Company
 ===========================*/
-
-.about-sub-company-section {
-    position: relative;
-    background-image: url(../img/sub_company_bg.png);
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    min-height: 1081px;
-}
-
-@media (max-width: 770px) {
+    
     .about-sub-company-section {
-        background-image: none;
-        height: 100%;
+        position: relative;
+        background-image: url(../img/sub_company_bg.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        min-height: 1081px;
+    }
+    
+    @media (max-width: 770px) {
+        .about-sub-company-section {
+            background-image: none;
+            height: 100%;
+        }
+    }
+    
+    .about-sub-company-section p {
+        font-size: 16px;
+        font-weight: 600;
     }
-}
-
-.about-sub-company-section p {
-    font-size: 16px;
-    font-weight: 600;
-}
-
-.about-sub-company-section .item-box {
-    max-width: 500px;
-}
-
-.about-sub-company-section .item-box .address-iphone-box .icon {
-    width: 25px;
-    height: 25px;
-    min-width: 25px;
-    min-height: 25px;
-    fill: currentColor;
-    overflow: hidden;
-}
-
-.about-sub-company-section hr {
-    margin: 35px 0;
-}
-
-.about-sub-company-section .item-box .short-name-box {
-    min-width: 100px;
-}
-
-
-/*===========================
+    
+    .about-sub-company-section .item-box {
+        max-width: 500px;
+    }
+    
+    .about-sub-company-section .item-box .address-iphone-box .icon {
+        width: 25px;
+        height: 25px;
+        min-width: 25px;
+        min-height: 25px;
+        fill: currentColor;
+        overflow: hidden;
+    }
+    
+    .about-sub-company-section hr {
+        margin: 35px 0;
+    }
+    
+    .about-sub-company-section .item-box .short-name-box {
+        min-width: 100px;
+    }
+    /*===========================
 	Service page
 ===========================*/
-
-.service-section {
-    position: relative;
-    background-color: #f6f6fe;
-}
-
-.service-section h1 {
-    text-align: center;
-    font-size: 22px;
-    font-weight: 500;
-    color: #010432;
-}
-
-.service-section .content-box {
-    max-width: 440px;
-    margin: 0 auto;
-}
-
-.service-section .left-box {
-    min-width: 200px;
-    padding: 0 20px;
-    display: inline-block;
-}
-
-.service-section .left-box img {
-    max-width: 160px;
-    max-height: 160px;
-    width: 100%;
-    height: 100%;
-    display: block;
-    margin: 0 auto;
-}
-
-.service-section .left-box span {
-    text-align: center;
-    display: block;
-    font-size: 16px;
-    font-weight: 500;
-    color: #010432;
-}
-
-.service-section .right-box {
-    padding: 0 20px;
-    height: 160px;
-    display: inline-block;
-}
-
-.service-section .right-box>div {
-    height: 100%;
-}
-
-.service-section .right-box img {
-    max-width: 26px;
-    max-height: 20px;
-}
-
-.service-section .right-box p span {
-    font-size: 16px;
-    color: #010432;
-}
-
-.service-section .right-box .download {
-    padding: 10px 0;
-    background-color: #2a2e78;
-    cursor: pointer;
-}
-
-.service-section .right-box .download span {
-    color: white;
-}
-
-.service-section .right-box .download:hover span {
-    color: #ffaa17;
-}
-
-.service-section .right-box .download:hover svg path {
-    fill: #ffaa17;
-}
-
-@media (max-width:576px) {
-    .service-section .right-box,
+    
+    .service-section {
+        position: relative;
+        background-color: #f6f6fe;
+    }
+    
+    .service-section h1 {
+        text-align: center;
+        font-size: 22px;
+        font-weight: 500;
+        color: #010432;
+    }
+    
+    .service-section .content-box {
+        max-width: 440px;
+        margin: 0 auto;
+    }
+    
     .service-section .left-box {
+        min-width: 200px;
+        padding: 0 20px;
+        display: inline-block;
+    }
+    
+    .service-section .left-box img {
+        max-width: 160px;
+        max-height: 160px;
         width: 100%;
+        height: 100%;
+        display: block;
+        margin: 0 auto;
+    }
+    
+    .service-section .left-box span {
+        text-align: center;
         display: block;
+        font-size: 16px;
+        font-weight: 500;
+        color: #010432;
     }
+    
     .service-section .right-box {
-        margin-top: 20px;
+        padding: 0 20px;
+        height: 160px;
+        display: inline-block;
     }
+    
     .service-section .right-box>div {
-        -ms-flex-align: center;
-        align-items: center;
+        height: 100%;
+    }
+    
+    .service-section .right-box img {
+        max-width: 26px;
+        max-height: 20px;
     }
+    
+    .service-section .right-box p span {
+        font-size: 16px;
+        color: #010432;
+    }
+    
     .service-section .right-box .download {
-        min-width: 200px;
+        padding: 10px 0;
+        background-color: #2a2e78;
+        cursor: pointer;
+    }
+    
+    .service-section .right-box .download span {
+        color: white;
     }
-}
-
-
-/*===========================
+    
+    .service-section .right-box .download:hover span {
+        color: #ffaa17;
+    }
+    
+    .service-section .right-box .download:hover svg path {
+        fill: #ffaa17;
+    }
+    
+    @media (max-width:576px) {
+        .service-section .right-box,
+        .service-section .left-box {
+            width: 100%;
+            display: block;
+        }
+        .service-section .right-box {
+            margin-top: 20px;
+        }
+        .service-section .right-box>div {
+            -ms-flex-align: center;
+            align-items: center;
+        }
+        .service-section .right-box .download {
+            min-width: 200px;
+        }
+    }
+    /*===========================
 	Technology page
 ===========================*/
-
-.technology-section {
-    position: relative;
-    background-color: #f6f6fe;
-}
-
-.technology-section .menu-1 {
-    color: white;
-    font-size: 24px;
-    padding: 0 0;
-}
-
-.technology-section .menu-1 .title {
-    background-color: #2a2e78;
-    padding: 15px 0 15px 15px;
-}
-
-.technology-section .menu-1 ul li {
-    color: #010432;
-    margin-bottom: 2px;
-    background-color: #e0e0f8;
-    font-size: 16px;
-    font-weight: 600;
-    cursor: pointer;
-    padding: 10px 0 10px 31px;
-}
-
-.technology-section .menu-1 ul li.active {
-    padding: 10px 0 10px 15px;
-    cursor: default;
-    color: #2a2e78;
-    font-weight: 500;
-}
-
-.technology-section .menu-1 ul li.active::before {
-    content: "▪";
-    color: #2a2e78;
-    margin-right: 10px;
-    display: inline-block;
-}
-
-.technology-section .menu-2 {
-    display: none;
-}
-
-.technology-section .menu-2 ul li {
-    min-width: 50%;
-    text-align: center;
-    font-size: 18px;
-    cursor: pointer;
-    margin-bottom: 5px;
-}
-
-.technology-section .menu-2 ul li span {
-    color: #2a2e78;
-    padding: 10px 0;
-    background-color: #e0e0f8;
-    width: 100%;
-    height: 100%;
-}
-
-.technology-section .menu-2 ul li.active span {
-    background-color: #2a2e78;
-    color: white;
-    cursor: default;
-}
-
-@media (max-width: 768px) {
+    
+    .technology-section {
+        position: relative;
+        background-color: #f6f6fe;
+    }
+    
     .technology-section .menu-1 {
-        display: none;
+        color: white;
+        font-size: 24px;
+        padding: 0 0;
+    }
+    
+    .technology-section .menu-1 .title {
+        background-color: #2a2e78;
+        padding: 15px 0 15px 15px;
+    }
+    
+    .technology-section .menu-1 ul li {
+        color: #010432;
+        margin-bottom: 2px;
+        background-color: #e0e0f8;
+        font-size: 16px;
+        font-weight: 600;
+        cursor: pointer;
+        padding: 10px 0 10px 31px;
+    }
+    
+    .technology-section .menu-1 ul li.active {
+        padding: 10px 0 10px 15px;
+        cursor: default;
+        color: #2a2e78;
+        font-weight: 500;
+    }
+    
+    .technology-section .menu-1 ul li.active::before {
+        content: "▪";
+        color: #2a2e78;
+        margin-right: 10px;
+        display: inline-block;
     }
+    
     .technology-section .menu-2 {
-        display: block;
+        display: none;
+    }
+    
+    .technology-section .menu-2 ul li {
+        min-width: 50%;
+        text-align: center;
+        font-size: 18px;
+        cursor: pointer;
+        margin-bottom: 5px;
+    }
+    
+    .technology-section .menu-2 ul li span {
+        color: #2a2e78;
+        padding: 10px 0;
+        background-color: #e0e0f8;
+        width: 100%;
+        height: 100%;
     }
-}
-
-.technology-section .content-box {
-    background-color: white;
-    padding: 40px 30px;
-}
-
-@media (max-width: 575px) {
+    
+    .technology-section .menu-2 ul li.active span {
+        background-color: #2a2e78;
+        color: white;
+        cursor: default;
+    }
+    
+    @media (max-width: 768px) {
+        .technology-section .menu-1 {
+            display: none;
+        }
+        .technology-section .menu-2 {
+            display: block;
+        }
+    }
+    
     .technology-section .content-box {
-        padding: 40px 15px;
-    }
-}
-
-.technology-section .content-box h1 {
-    font-size: 24px;
-    font-weight: 600;
-    text-align: center;
-    color: #010432;
-}
-
-.technology-section .content-box .item {
-    border: #dcdcdc 2px solid;
-}
-
-.technology-section .content-box .item .title {
-    height: 45px;
-    color: #010432;
-    background-color: #F0EFF5;
-    font-size: 20px;
-    font-weight: 600;
-}
-
-.technology-section .content-box .item .memo-box {
-    padding: 25px
-}
-
-.technology-section .content-box .item .memo-box .img-box {
-    float: left;
-    margin-right: 10px;
-    overflow: hidden;
-}
-
-.technology-section .content-box .item .memo-box .img-box .img-div {
-    width: 162px;
-    height: 199px;
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: cover;
-}
-
-.technology-section .content-box .item .memo-box p {
-    font-size: 16px;
-    font-weight: 400;
-    text-indent: 30px;
-    color: #010432;
-}
-
-@media (max-width: 576px) {
+        background-color: white;
+        padding: 40px 30px;
+    }
+    
+    @media (max-width: 575px) {
+        .technology-section .content-box {
+            padding: 40px 15px;
+        }
+    }
+    
+    .technology-section .content-box h1 {
+        font-size: 24px;
+        font-weight: 600;
+        text-align: center;
+        color: #010432;
+    }
+    
+    .technology-section .content-box .item {
+        border: #dcdcdc 2px solid;
+    }
+    
+    .technology-section .content-box .item .title {
+        height: 45px;
+        color: #010432;
+        background-color: #F0EFF5;
+        font-size: 20px;
+        font-weight: 600;
+    }
+    
+    .technology-section .content-box .item .memo-box {
+        padding: 25px
+    }
+    
     .technology-section .content-box .item .memo-box .img-box {
-        float: none;
-        width: 100%;
-        margin-right: 0;
+        float: left;
+        margin-right: 10px;
+        overflow: hidden;
     }
+    
     .technology-section .content-box .item .memo-box .img-box .img-div {
+        width: 162px;
+        height: 199px;
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+    }
+    
+    .technology-section .content-box .item .memo-box p {
+        font-size: 16px;
+        font-weight: 400;
+        text-indent: 30px;
+        color: #010432;
+    }
+    
+    @media (max-width: 576px) {
+        .technology-section .content-box .item .memo-box .img-box {
+            float: none;
+            width: 100%;
+            margin-right: 0;
+        }
+        .technology-section .content-box .item .memo-box .img-box .img-div {
+            width: 100%;
+        }
+    }
+    /* common */
+    
+    .bg-gray {
+        background: #F4F8FD
+    }
+    
+    .arrow-right {
+        width: 16px;
+    }
+    
+    h2.subtitle {
+        font-size: 32px;
+        font-weight: normal
+    }
+    
+    .title-tag2 {
+        font-size: 24px;
+        color: #444;
+        font-weight: bold;
+    }
+    
+    .learn-more {
+        margin-top: 50px;
+        text-align: right;
+        cursor: pointer;
+    }
+    
+    .line-one {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+    
+    .line-two {
+        text-overflow: -o-ellipsis-lastline;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        -webkit-box-orient: vertical;
+    }
+    /* 面包屑 */
+    
+    .crumbs li {
+        display: inline-block;
+        line-height: 50px;
+        color: #ccc;
+    }
+    
+    .crumbs li.active {
+        color: #000
+    }
+    
+    p.subtit {
+        font-size: 20px
+    }
+    
+    @media (max-width: 992px) {
+        .title-tag2 {
+            font-size: 20px;
+        }
+        .img-left .solution-list-tit {
+            margin-top: 60px
+        }
+        .img-right .main-btn {
+            margin-bottom: 20px
+        }
+        .solution-section {
+            padding-top: 0
+        }
+    }
+    /* why */
+    
+    .whyUs-section .whyUs-text p {
+        text-indent: 25px;
+        line-height: 1.8;
+    }
+    
+    @media (min-width: 991px) {
+        .pos-top {
+            margin-top: 50px
+        }
+    }
+    
+    .whyUs-item {
+        padding: 60px 0;
+        opacity: 1;
+        background: #ffffff;
+        border-radius: 10px;
+        margin-bottom: 30px;
+        -webkit-box-shadow: 0px 10px 20px 10px rgb(179 202 216 / 20%);
+        box-shadow: 0px 10px 20px 10px rgb(179 202 216 / 20%);
+    }
+    
+    .whyUs-item:hover {
+        color: #fff;
+        background: #639BFF
+    }
+    
+    .whyUs-item img {
+        margin-bottom: 54px
+    }
+    /* about */
+    
+    .about-section {
+        background: #F4F8FD
+    }
+    
+    .about-section .learn-more {
+        margin-bottom: 50px
+    }
+    
+    @media (min-width: 991px) {
+        .about-text-box {
+            padding-right: 80px
+        }
+    }
+    /* news */
+    
+    .news-section .col-md-6 {
+        padding-bottom: 80px;
+        padding-top: 80px;
+    }
+    
+    .news-section .col-md-6:before {
+        content: '';
+        width: calc(100% - 50px);
+        height: 2px;
+        display: inline-block;
+        background-color: #F5F5F5;
+        /* margin-right: 5px; */
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        margin-left: 14px;
+    }
+    
+    .news-tit {
+        font-size: 18px;
+        color: #2A2A2A;
+        line-height: 40px;
+        margin-bottom: 10px;
+        font-weight: normal
+    }
+    
+    .news-section .right-sec {
+        position: relative
+    }
+    
+    .news-time {
+        font-size: 14px;
+        color: #666666;
+        position: absolute;
+        top: 12px;
+        display: block;
+        right: 50px
+    }
+    
+    .read-more {
+        position: absolute;
+        bottom: 0px;
+        width: 16px;
+        right: 50px
+    }
+    /* solution */
+    
+    .solution-section p {
+        font-size: 18px;
+        margin-bottom: 20px
+    }
+    
+    .solution-img img {
+        width: 70%;
+    }
+    
+    .solution-list .solution-img img {
+        width: 90%
+    }
+    
+    .solution-img {
+        text-align: center
+    }
+    
+    .solution-list-tit {
+        font-size: 20px;
+        margin-bottom: 40px
+    }
+    
+    .solution-list .learn-more {
+        margin-top: 0
+    }
+    
+    @media (min-width: 1200px) {
+        .solution-section p {
+            width: 96%
+        }
+    }
+    /* solution-detail */
+    
+    .solution-detail .section-content>p {
+        text-indent: 25px;
+    }
+    
+    .solution-detail .section-content img {
+        margin-top: 30px
+    }
+    /* solution-detail2 */
+    
+    .list-content {
+        position: relative;
+        margin-top: 30px;
+        text-align: center
+    }
+    
+    .list-content .modal-bg {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
         width: 100%;
+        height: 100%;
+        background-color: #041d38;
+        z-index: 1;
+        -webkit-transition: all 0.3s ease-out 0s;
+        transition: all 0.3s ease-out 0s;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        opacity: 0;
+        visibility: hidden;
+    }
+    
+    .list-content:hover .modal-bg {
+        opacity: 1;
+        background-color: rgba(0, 0, 0, .3);
+        visibility: visible;
     }
-}
+    
+    span.click-more {
+        text-align: center;
+        align-items: center;
+        justify-content: center;
+        font-size: 18px;
+        background: #639BFF;
+        padding: 8px 13px;
+        border-radius: 20px;
+        color: #fff;
+        display: inline-block
+    }
+    
+    .solution-detail .list-content img {
+        margin-top: 0;
+        width: 100%
+    }
+    
+    .list-content:hover .click-more {
+        opacity: 0.9;
+        visibility: visible;
+    }
+    
+    .pro-tit {
+        text-align: center;
+        margin-top: 15px;
+    }

index.html

@@ -60,7 +60,7 @@
                                             <a>城市治理</a>
                                             <ul class="submenu">
                                                 <!-- <li><a href="./example">经典案例</a></li> -->
-                                                <li><a href="">智能招商</a></li>
+                                                <li><a href="solution">智能招商</a></li>
                                                 <li><a href="">智慧安防</a></li>
                                                 <li><a href="">智慧消防</a></li>
                                             </ul>
@@ -127,17 +127,35 @@
     </section>
     <!--====== BANNER SECTION END ======-->
 
-    <!--====== ABOUT SECTION START ======-->
-    <section class="about-section pt-120 pb-120">
+    <!--====== WHYUS SECTION START ======-->
+    <section class="whyUs-section pt-120 pb-120">
         <div class="container">
             <div class="section-title text-center both-border pb-60">
                 <span class="title-tag">为什么选择永天云</span>
             </div>
             <div class="row align-items-center justify-content-center">
                 <div class="col-lg-7 col-md-10">
-                    <div class="about-tile-gallery row">
-                        <div class="col-md-6">1</div>
-                        <div class="col-md-6">2</div>
+                    <div class=" row">
+                        <div class="col-md-6">
+                            <div class="whyUs-item text-center">
+                                <img src="assets/img/whyUs-item1.png" alt="" width="63">
+                                <p>专业的项目执行团队</p>
+                            </div>
+                            <div class="whyUs-item text-center ">
+                                <img src="assets/img/whyUs-item1.png" alt="" width="63">
+                                <p>十六年的服务经验</p>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="whyUs-item text-center pos-top">
+                                <img src="assets/img/whyUs-item1.png" alt="" width="63">
+                                <p>成熟的运维服务体系</p>
+                            </div>
+                            <div class="whyUs-item text-center ">
+                                <img src="assets/img/whyUs-item1.png" alt="" width="63">
+                                <p>一站式技术服务解决</p>
+                            </div>
+                        </div>
 
                         <!-- <img src="assets/img/tile-gallery/01.png" alt="Image" class="image-one">
                         <img src="assets/img/tile-gallery/02.png" alt="Image" class="image-two">
@@ -145,14 +163,16 @@
                     </div>
                 </div>
                 <div class="col-lg-5 col-md-10">
-                    <div class="about-text pl-25">
-                        <h2 class="mb-40">成熟的运维服务体系</h2>
+                    <div class="whyUs-text pl-25">
+                        <h2 class="mb-40 subtitle">成熟的运维服务体系</h2>
                         <p>
                             自2004年起，公司长期从事智能楼宇、通信配套、物联网监测和数字政务等领域的项目建设和信息服务，常年提供全国范围内数千个项目的后期维护服务。多年的服务工作，积累了大量的技术经验和用户资源，并形成了一整套运维管理体系。</p>
                         <p> 公司拥有设计、项目、物联网、运维等多个面向业务的职能部门，并在各个相关的支撑部门及总经办的服务协调整合下，公司具备相关项目的“一站式”服务能力，包含：勘察、设计、施工、系统集成、应用平台及软件开发。
                         </p>
                         <p> 通过十多年的系统经验积累和人才培养，公司已拥有多领域、多系统的技术储备，而且多地分公司、办事机构的管理体系也使得永天科技具备各种异地实施、管理能力。
                         </p>
+                        <div class="learn-more"><a class="main-btn">了解更多</a></div>
+
 
                     </div>
                 </div>
@@ -160,313 +180,125 @@
         </div>
 
     </section>
-    <!--====== ABOUT SECTION END ======-->
+    <!--====== WHYUS SECTION END ======-->
 
-    <!--====== SOLUTION PART START ======-->
-    <section class="solution-section pt-60 pb-40">
+
+    <!--====== ABOUT SECTION START ======-->
+    <section class="about-section pt-80 pb-80">
         <div class="container">
-            <div class="section-title mb-80 text-center both-border">
-                <span class="title-tag">解决方案</span>
-                <p style="text-indent:25px">永天科技基于永天云打造的智慧城市管理平台，可支持多个子平台的统一管理，可灵活适配多种应用功能，同时对传感层各终端的数据进行收集分析，为政府管理者，商业设施运营者提供决策辅助，实现更高效的运营管理。同时，子平台的各类生活服务，政务服务应用，让城市居民的生活更便捷，更舒心。</p>
+            <div class="section-title text-center both-border pb-60">
+                <span class="title-tag">关于我们</span>
             </div>
-            <div class="row justify-content-center">
-                <div class="col-lg-3 col-md-6 col-sm-10 d-flex justify-content-center">
-                    <div style="min-width: 240px; height: 430px;">
-                        <img src="assets/img/solution/01.png" style="position: relative;z-index:10;">
-                        <div class="shadow d-flex flex-column justify-content-around align-items-center" style="background-color: white; height: 280px;position: relative; top:-120px;z-index: 1;padding-top: 150px;">
-                            <p class="font-weight-bold solution-content">城市治理类应用</p>
-                            <a href="./solution/index.html" class="solution-btn">查看案例</a>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-3 col-md-6 col-sm-10 d-flex justify-content-center">
-                    <div style="min-width: 240px; height: 430px;">
-                        <img src="assets/img/solution/02.png" style="position: relative;z-index:10;">
-                        <div class="shadow d-flex flex-column justify-content-around align-items-center" style="background-color: white; height: 280px;position: relative; top:-120px;z-index: 1;padding-top: 150px;">
-                            <p class="font-weight-bold solution-content">生活服务类应用</p>
-                            <a href="./solution/life.html" class="solution-btn">查看案例</a>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-3 col-md-6 col-sm-10 d-flex justify-content-center">
-                    <div style="min-width: 240px; height: 430px;">
-                        <img src="assets/img/solution/03.png" style="position: relative;z-index:10;">
-                        <div class="shadow d-flex flex-column justify-content-around align-items-center" style="background-color: white; height: 280px;position: relative; top:-120px;z-index: 1;padding-top: 150px;">
-                            <p class="font-weight-bold solution-content">绿色发展类应用</p>
-                            <a href="./solution/sustainable.html" class="solution-btn">查看案例</a>
-                        </div>
+            <div class="row align-items-center justify-content-center">
+
+                <div class="col-md-6 about-text-box">
+                    <div class="">
+                        <h2 class="mb-40 subtitle">上海永天 <br> 科技股份有限公司
+                        </h2>
+                        <p>
+                            永天科技始创于2004年，致力于物联网平台的开发、智慧城市设计与实施，助力智慧城市运营。先后为不同城市与各类项目提供定制化智能化、新型特色智慧城市整体解决方案。
+                        </p>
+                        <p> 公司拥有数十项软著与专利，永天科技总部在上海，经过15年发展，我们在美国加州、香港、深圳、北京、南昌、上饶、宜春、常州、济南、成都、乌鲁木齐等地均设立分公司和办事处。2013年8月，永天科技在新三板上市。
+                        </p>
+
+                        <div class="learn-more"><a class="main-btn">了解更多</a></div>
                     </div>
                 </div>
-                <div class="col-lg-3 col-md-6 col-sm-10 d-flex justify-content-center">
-                    <div style="min-width: 240px; height: 430px;">
-                        <img src="assets/img/solution/04.png" style="position: relative;z-index:10;">
-                        <div class="shadow d-flex flex-column justify-content-around align-items-center" style="background-color: white; height: 280px;position: relative; top:-120px;z-index: 1;padding-top: 150px;">
-                            <p class="font-weight-bold solution-content">其他创新类应用</p>
-                            <a href="./solution/others.html" class="solution-btn">查看案例</a>
-                        </div>
-                    </div>
+                <div class="col-md-6">
+                    <img src="assets/img/about/about-img.png" alt="">
+
                 </div>
             </div>
         </div>
+
     </section>
-    <!--====== SOLUTION PART END ======-->
+    <!--====== ABOUT SECTION END ======-->
 
-    <!--====== COREPRODUCT PART START ======-->
-    <section class="coreproduct-section pt-60 pb-40">
+    <!--====== NEWS SECTION START ======-->
+    <section class="news-section pt-80 ">
         <div class="container">
-            <div class="section-title mb-20 text-center both-border">
-                <span class="title-tag">核心产品</span>
+            <div class="section-title text-center both-border">
+                <span class="title-tag">新闻动态</span>
             </div>
-            <div class="row justify-content-center">
-                <div class="col-lg-4 col-md-6 col-sm-10 grid_item">
-                    <div class="shadow d-flex flex-column">
-                        <div class="grid_titlle d-flex justify-content-center align-items-center">
-                            <span>智慧消防综合管理系统软件</span>
-                        </div>
-                        <div class="grid_img">
-                            <div style="background-image: url(assets/img/core-product/01.png);"></div>
-                        </div>
-                        <p class="flex-grow-1">
-                            智慧消防是一个建立在消防物联网技术基础上的，有别于传统消防的现代行业智能监控系统
-                        </p>
-                        <div class="d-flex justify-content-end">
-                            <div class="grid_button">
-                                经典案例
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-4 col-md-6 col-sm-10 grid_item">
-                    <div class="shadow d-flex flex-column">
-                        <div class="grid_titlle d-flex justify-content-center align-items-center">
-                            <span>智慧安防综合管理系统软件</span>
-                        </div>
-                        <div class="grid_img">
-                            <div style="background-image: url(assets/img/core-product/02.png);"></div>
-                        </div>
-                        <p class="flex-grow-1">
-                            智慧安防是一款基于物联网、5G数据通信、大数据分析等 "新基建" 技术，以园区、社区安全防范为主要实现功能的智能监测、监控、计算服务系统平台软件。
-                        </p>
-                        <div class="d-flex justify-content-end">
-                            <div class="grid_button">
-                                经典案例
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-4 col-md-6 col-sm-10 grid_item">
-                    <div class="shadow d-flex flex-column">
-                        <div class="grid_titlle d-flex justify-content-center align-items-center">
-                            <span>智慧园区综合管理系统软件</span>
-                        </div>
-                        <div class="grid_img">
-                            <div style="background-image: url(assets/img/core-product/03.png);"></div>
+            <div class="row">
+                <div class="col-md-6">
+                    <div class="row">
+                        <div class="col-md-9 col-sm-9 col-9">
+                            <h3 class="news-tit line-one">
+                                集聚智慧楼宇产业链资源 永天科技发起设立产业
+                            </h3>
+                            <p class="news-des line-two">
+                                近日，新三板企业上海永天科技股份有限公司（简称“永天科技”)在其智慧云平台基础上发起设立了智慧楼宇产业联盟。据......
+                            </p>
                         </div>
-                        <p class="flex-grow-1">
-                            智慧园区是一套基于物联网、5G数据通信、大数据分析等“新基建”技术的园区新型管理平台系统。适用于各类园区的物业及综合管理工作。
-                        </p>
-                        <div class="d-flex justify-content-end">
-                            <div class="grid_button">
-                                经典案例
-                            </div>
+                        <div class="col-md-3 col-sm-3 col-3 right-sec">
+                            <span class="news-time">2020-12-08</span>
+                            <a class="read-more" href="blog-details.html"><img src="assets/img/arrow-right.png" alt=""></a>
                         </div>
                     </div>
                 </div>
-                <div class="col-lg-4 col-md-6 col-sm-10 grid_item">
-                    <div class="shadow d-flex flex-column">
-                        <div class="grid_titlle d-flex justify-content-center align-items-center">
-                            <span>永天智慧宝APP</span>
+                <div class="col-md-6">
+                    <div class="row">
+                        <div class="col-md-9 col-sm-9 col-9">
+                            <h3 class="news-tit line-one">
+                                集聚智慧楼宇产业链资源 永天科技发起设立产业
+                            </h3>
+                            <p class="news-des line-two">
+                                近日，新三板企业上海永天科技股份有限公司（简称“永天科技”)在其智慧云平台基础上发起设立了智慧楼宇产业联盟。据......
+                            </p>
                         </div>
-                        <div class="grid_img">
-                            <div style="background-image: url(assets/img/core-product/04.png);"></div>
-                        </div>
-                        <p class="flex-grow-1">
-                            永天智慧宝是一款配套智慧消防、智慧安防和智慧园区系统平台的综合移动端程序。
-                        </p>
-                        <div class="d-flex justify-content-end">
-                            <div class="grid_button">
-                                经典案例
-                            </div>
+                        <div class="col-md-3 col-sm-3 col-3 right-sec">
+                            <span class="news-time">2020-12-08</span>
+                            <a class="read-more" href="blog-details.html"><img src="assets/img/arrow-right.png" alt=""></a>
                         </div>
                     </div>
                 </div>
-                <div class="col-lg-4 col-md-6 col-sm-10 grid_item">
-                    <div class="shadow d-flex flex-column">
-                        <div class="grid_titlle d-flex justify-content-center align-items-center">
-                            <span>智慧用电综合处理单元</span>
+                <div class="col-md-6">
+                    <div class="row">
+                        <div class="col-md-9 col-sm-9 col-9 ">
+                            <h3 class="news-tit line-one">
+                                集聚智慧楼宇产业链资源 永天科技发起设立产业
+                            </h3>
+                            <p class="news-des line-two">
+                                近日，新三板企业上海永天科技股份有限公司（简称“永天科技”)在其智慧云平台基础上发起设立了智慧楼宇产业联盟。据......
+                            </p>
                         </div>
-                        <div class="grid_img">
-                            <div style="background-image: url(assets/img/core-product/05.png);"></div>
-                        </div>
-                        <p class="flex-grow-1">
-                            智慧用电综合处理单元是一款由永天科技独立研发的，以智慧安全用电为主要功能的边缘计算设备。
-                        </p>
-                        <div class="d-flex justify-content-end">
-                            <div class="grid_button">
-                                经典案例
-                            </div>
+                        <div class="col-md-3 col-sm-3 col-3 right-sec">
+                            <span class="news-time">2020-12-08</span>
+                            <a class="read-more" href="blog-details.html"><img src="assets/img/arrow-right.png" alt=""></a>
                         </div>
                     </div>
                 </div>
-                <div class="col-lg-4 col-md-6 col-sm-10 grid_item">
-                    <div class="shadow d-flex flex-column">
-                        <div class="grid_titlle d-flex justify-content-center align-items-center">
-                            <span>用水数据采集单元</span>
-                        </div>
-                        <div class="grid_img">
-                            <div style="background-image: url(assets/img/core-product/06.png);"></div>
+                <div class="col-md-6">
+                    <div class="row">
+                        <div class="col-md-9 col-sm-9 col-9">
+                            <h3 class="news-tit line-one">
+                                集聚智慧楼宇产业链资源 永天科技发起设立产业
+                            </h3>
+                            <p class="news-des line-two">
+                                近日，新三板企业上海永天科技股份有限公司（简称“永天科技”)在其智慧云平台基础上发起设立了智慧楼宇产业联盟。据......
+                            </p>
                         </div>
-                        <p class="flex-grow-1">
-                            采集处理生活用水用量数据，实现远程“抄表”功能。分时段统计用水数据，可针对智慧水务、智慧用水、智慧能耗能应用提供对应的分析数据源。
-                        </p>
-                        <div class="d-flex justify-content-end">
-                            <div class="grid_button">
-                                经典案例
-                            </div>
+                        <div class="col-md-3 col-sm-3 col-3 right-sec">
+                            <span class="news-time">2020-12-08</span>
+                            <a class="read-more" href="blog-details.html"><img src="assets/img/arrow-right.png" alt=""></a>
                         </div>
                     </div>
                 </div>
-            </div>
-        </div>
-    </section>
-    <!--====== COREPRODUCT PART END ======-->
 
-    <!--====== ABOUTTOW PART START ======-->
-    <section class="abouttwo-section d-flex flex-wrap">
-        <div class="abouttwo_item abouttwo_img" style="background-image: url(assets/img/about.png);">
-        </div>
-        <div class="abouttwo_item d-flex flex-column abouttwo_content">
-            <span>关于我们</span>
-            <div class="flex-grow-1">
-                <p>创始于2004年，致力于通过最新的智能硬件技术、互联网技术、物联网技术结合的方式进行建筑体智能化设计与实施，先后为不同城市写字楼、商业体、社区、园区、政府机构、金融机构、酒店等提供定制化建筑体智能化解决方案。</p>
-                <p>公司在上海张江、美国硅谷设立两大研发中心，拥有专业的跨国研发团队和自主知识产权。2013年8月，永天科技在全国中小企业股份转让系统公开挂牌转让，证券代码：430273</p>
-            </div>
-            <div class="d-flex justify-content-end">
-                <a href="./about/index.html">了解更多</a>
-            </div>
-        </div>
-    </section>
-    <!--====== ABOUTTOW PART END ======-->
 
-    <!--====== CLASSICCASE PART START ======-->
-    <section class="classic-case-section pt-60 pb-120">
-        <div class="container">
-            <div class="section-title mb-80 text-center d-flex justify-content-center">
-                <h2>经典案例</h2>
-            </div>
-            <div class="row">
-                <div class="col-lg-6 col-md-8 col-sm-10">
-                    <div class="case-left">
-                        <div class="d-flex flex-column" style="background-color: white;height: 100%;">
-                            <h1>温岭碧桂园·翡翠湾</h1>
-                            <strong>区位：浙江省，温岭市<br/> 规模：143500㎡</strong>
-                            <div class="flex-grow-1">
-                                <p>温岭碧桂园位于温岭市东部新区，容积率1.31，建筑类别包括多层住宅、洋房别墅、商业。</p>
-                                <p>实施内容包括停车场系统、监控系统、对讲系统、综合布线、周界系统。实施的智能停车场在传统停车场的基础上进行管理方式、服务、通行控制、和设备上改进升级，实现了人性化和智能化的革新，有效的将停车、监控、和对讲系统进行集成管理，实现真正的“无障碍通行”管理。</p>
-                            </div>
-                            <div class="d-flex justify-content-end">
-                                <a href="example/index.html">查看更多</a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-6 col-md-8 col-sm-10">
-                    <div class="case-img">
-                        <img src="assets/img/case.png" alt="Image">
-                    </div>
-                </div>
             </div>
         </div>
-    </section>
-    <!--====== CLASSICCASE PART END ======-->
-
-    <!--====== SUB COMPANY PART START ======-->
-    <section class="sub-company-section pt-60">
-        <div class="container d-flex justify-content-end">
-            <div>
-                <p class="d-flex align-items-start">
-                    <span class="company-short-name">上海总部</span>
-                    <svg class="icon" aria-hidden="true">
-            <use xlink:href="#icon-location"></use>
-          </svg>
-                    <span class="company-name">上海市青浦区徐乐路208号</span>
-                </p>
-                <p class="d-flex justify-content-end phone">
-                    <svg class="icon" aria-hidden="true">
-            <use xlink:href="#icon-phone"></use>
-          </svg>
-                    <span>400-6338668</span>
-                </p>
-                <hr>
-                <p class="d-flex align-items-start">
-                    <span class="company-short-name">美国分公司</span>
-                    <svg class="icon" aria-hidden="true">
-            <use xlink:href="#icon-location"></use>
-          </svg>
-                    <span class="company-name">725 San aleso Ave suite 1.Sunnyvale,Ca 94085</span>
-                </p>
-                <hr>
-                <p class="d-flex align-items-start">
-                    <span class="company-short-name">上饶分公司</span>
-                    <svg class="icon" aria-hidden="true">
-            <use xlink:href="#icon-location"></use>
-          </svg>
-                    <span class="company-name">江西省上饶市信州区庆丰路288号2楼</span>
-                </p>
-                <p class="d-flex justify-content-end phone">
-                    <svg class="icon" aria-hidden="true">
-            <use xlink:href="#icon-phone"></use>
-          </svg>
-                    <span>13576387031</span>
-                </p>
-                <hr>
-                <p class="d-flex align-items-start">
-                    <span class="company-short-name">新疆分公司</span>
-                    <svg class="icon" aria-hidden="true">
-            <use xlink:href="#icon-location"></use>
-          </svg>
-                    <span class="company-name">新疆乌鲁木齐高新技术产业开发区（新市区）迎宾路东三巷13号4596室</span>
-                </p>
-                <p class="d-flex justify-content-end phone">
-                    <svg class="icon" aria-hidden="true">
-            <use xlink:href="#icon-phone"></use>
-          </svg>
-                    <span>15879302112</span>
-                </p>
-                <hr>
-                <p class="d-flex align-items-start">
-                    <span class="company-short-name">香港分公司</span>
-                    <svg class="icon" aria-hidden="true">
-            <use xlink:href="#icon-location"></use>
-          </svg>
-                    <span class="company-name">香港观塘开源道64号源成中心5楼507室</span>
-                </p>
-                <p class="d-flex justify-content-end phone">
-                    <svg class="icon" aria-hidden="true">
-            <use xlink:href="#icon-phone"></use>
-          </svg>
-                    <span>852-35211208</span>
-                </p>
-                <hr>
-            </div>
         </div>
-    </section>
-    <!--====== SUB COMPANY PART END======-->
 
-    <!--====== CUS CONTACT PART START=====-->
-    <section class="cus-contact-section pt-60 pb-40">
-        <div class="container text-center d-flex flex-column align-items-center">
-            <h2>联系我们</h2>
-            <h1 class="mb-40 mt-20">对我们产品感兴趣？</h1>
-            <p>智慧消防：赵女士 18117368271<span style="width:80px"></span>人脸识别系统： 李先生 13918571231</p>
-            <p>弱电智能化：庞女士 18116253580<span style="width:80px"></span>质量监督投诉： 孙先生 17721169552</p>
-            <p>其它智慧城市相关应用合作: 021-65376655</p>
-            <div class="contact-btn mt-20 mb-20 shadow-sm d-flex justify-content-center align-items-center">
-                <span>联系我们</span>
-            </div>
-        </div>
     </section>
-    <!--====== CUS CONTACT PART END=====-->
+    <!--====== NEWS SECTION END ======-->
+
+
+
+
+
+
 
     <!--====== FOOTER PART START ======-->
     <footer>

solution/detail.html

@@ -0,0 +1,314 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <title>服务案例详情1</title>
+
+    <link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
+    <!--====== Owl Carousel css ======-->
+    <link rel="stylesheet" href="../assets/css/slick.css" />
+    <!--====== Mean Menu ======-->
+    <link rel="stylesheet" href="../assets/css/meanmenu.min.css" />
+    <!--====== Default css ======-->
+    <link rel="stylesheet" href="../assets/css/default.css" />
+    <!--====== Style css ======-->
+    <link rel="stylesheet" href="../assets/css/style.css" />
+</head>
+
+<body>
+    <!--[if lte IE 9]>
+		<p class="browserupgrade">请使用chrome，IE11等现代浏览器，浏览本网站.</p>
+  <![endif]-->
+
+    <!--====== HEADER START ======-->
+    <header class="header-absolute sticky-header">
+        <div class="custom-container-one">
+            <div class="header-top-area">
+                <div class="container align-items-center">
+                    <div class="col-md-6 col-sm-7">
+                        <ul class="contact-list">
+                            <li>
+                                <a href="javascipt:void();">www.chinausky.com</a>
+                            </li>
+                            <li>
+                                <a href="javascipt:void();">400 633 8668</a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div class="mainmenu-area container">
+                <div class="d-flex align-items-center justify-content-between">
+                    <nav class="main-menu">
+                        <div class="logo">
+                            <a href="index.html"><img src="../assets/img/logo.png" alt="uskylogo"></a>
+                        </div>
+                        <div class="menu-items">
+                            <ul>
+                                <li>
+                                    <a href="../">首页</a>
+                                </li>
+                                <li class="active">
+                                    <a>解决方案</a>
+                                    <ul class="submenu">
+                                        <li>
+                                            <a>城市治理</a>
+                                            <ul class="submenu">
+                                                <li><a href="../solution">智能招商</a></li>
+                                                <li><a href="../solution">智慧安防</a></li>
+                                                <li><a href="../solution">智慧消防</a></li>
+                                            </ul>
+                                        </li>
+                                        <li><a href="../solution">民生服务</a></li>
+                                        <li><a href="../solution">园区服务</a></li>
+                                        <li><a href="../solution">其他拓展</a></li>
+                                    </ul>
+                                </li>
+                                <li>
+                                    <a>新闻动态</a>
+                                    <ul class="submenu">
+                                        <li><a href="../news">公司新闻</a></li>
+                                        <li><a href="../news">行业动态</a></li>
+                                    </ul>
+                                </li>
+                                <li>
+                                    <a href="../about">关于我们</a>
+                                </li>
+                                <li>
+                                    <a href="../join">加入我们</a>
+                                </li>
+                            </ul>
+                        </div>
+                    </nav>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-12">
+                    <div class="mobile-menu"></div>
+                </div>
+            </div>
+        </div>
+    </header>
+    <!--====== HEADER END ======-->
+
+    <!--====== COMMON BREADCRUMB START ======-->
+    <section class="common-bradcrumb-section" style="background-image: url('../assets/img/solution/detail2-banner.png'); height:300px">
+        <!-- <img src="../assets/img/solution/solution-banner.png" alt=""> -->
+    </section>
+    <!--====== COMMON BREADCRUMB END ======-->
+
+    <section class="crumbs">
+        <div class="container">
+            <ul>
+                <li>解决方案 ></li>
+                <li>城市治理 ></li>
+                <li class="active">智慧招商</li>
+            </ul>
+        </div>
+
+
+    </section>
+
+    <!--====== SOLUTION DETAIL START ======-->
+    <section class="solution-detail pt-40 pb-50">
+        <div class="container">
+            <div class="section-title text-center both-border mb-40">
+                <span class="title-tag2">宜春招商平台系统软件功能介绍</span>
+                <p class="subtit mt-40">区域：江西省，宜春市 规模：永丰街道，7.4万人</p>
+            </div>
+            <div class="section-content">
+                <p>永丰街道位于上饶市广丰区，现为广丰区人民政府驻地，是全区政治、经济、文化中心。面积为25平方公里，人口7.4万，其中非农人口6.6万，辖：东街、麦园、湖沿、鸟林街、横路、东关、裕丰、北门、南山、大塘、西门、商城、西山、白鹤、平安十五个社区居委会。</p>
+                <p> 实施内容主要为社会服务管理中心数字平台。通过系统整合资源，提升公共服务优质化，全面融合技术，促进社会管理信息化，科学健全体系，打造城区发展网格化。
+                </p>
+                <p> 永丰街道位于上饶市广丰区，现为广丰区人民政府驻地，是全区政治、经济、文化中心。面积为25平方公里，人口7.4万，其中非农人口6.6万，辖：东街、麦园、湖沿、鸟林街、横路、东关、裕丰、北门、南山、大塘、西门、商城、西山、白鹤、平安十五个社区居委会。
+                </p>
+                <p>实施内容主要为社会服务管理中心数字平台。通过系统整合资源，提升公共服务优质化，全面融合技术，促进社会管理信息化，科学健全体系，打造城区发展网格化。</p>
+                <p> 永丰街道位于上饶市广丰区，现为广丰区人民政府驻地，是全区政治、经济、文化中心。面积为25平方公里，人口7.4万，其中非农人口6.6万，辖：东街、麦园、湖沿、鸟林街、横路、东关、裕丰、北门、南山、大塘、西门、商城、西山、白鹤、平安十五个社区居委会。
+                </p>
+                <p> 永丰街道位于上饶市广丰区，现为广丰区人民政府驻地，是全区政治、经济、文化中心。面积为25平方公里，人口7.4万，其中非农人口6.6万，辖：东街、麦园、湖沿、鸟林街、横路、东关、裕丰、北门、南山、大塘、西门、商城、西山、白鹤、平安十五个社区居委会。永丰街道位于上饶市广丰区，现为广丰区人民政府驻地，是全区政治、经济、文化中心。面积为25平方公里，人口7.4万，其中非农人口6.6万，辖：东街、麦园、湖沿、鸟林街、横路、东关、裕丰、北门、南山、大塘、西门、商城、西山、白鹤、平安十五个社区居委会。</p>
+                </p>
+
+                <div class="row">
+                    <div class="col-md-4 col-4 col-sm-4"><img src="../assets/img/solution/detail1.png" alt=""></div>
+                    <div class="col-md-4 col-4 col-sm-4"><img src="../assets/img/solution/detail2.png" alt=""></div>
+
+                    <div class="col-md-4 col-4 col-sm-4"><img src="../assets/img/solution/detail3.png" alt=""></div>
+
+                </div>
+            </div>
+        </div>
+
+    </section>
+
+    <section class="solution-detail pt-40 pb-50  bg-gray">
+        <div class="container">
+            <div class="section-title text-center both-border mb-40 ">
+                <span class="title-tag2">智慧招商综合管理平台软件</span>
+            </div>
+            <div class="section-content">
+                <p>永丰街道位于上饶市广丰区，现为广丰区人民政府驻地，是全区政治、经济、文化中心。面积为25平方公里，人口7.4万，其中非农人口6.6万，辖：东街、麦园、湖沿、鸟林街、横路、东关、裕丰、北门、南山、大塘、西门、商城、西山、白鹤、平安十五个社区居委会。</p>
+                <p> 实施内容主要为社会服务管理中心数字平台。通过系统整合资源，提升公共服务优质化，全面融合技术，促进社会管理信息化，科学健全体系，打造城区发展网格化。
+                </p>
+                <p> 永丰街道位于上饶市广丰区，现为广丰区人民政府驻地，是全区政治、经济、文化中心。面积为25平方公里，人口7.4万，其中非农人口6.6万，辖：东街、麦园、湖沿、鸟林街、横路、东关、裕丰、北门、南山、大塘、西门、商城、西山、白鹤、平安十五个社区居委会。
+                </p>
+                <p>实施内容主要为社会服务管理中心数字平台。通过系统整合资源，提升公共服务优质化，全面融合技术，促进社会管理信息化，科学健全体系，打造城区发展网格化。</p>
+                <p> 永丰街道位于上饶市广丰区，现为广丰区人民政府驻地，是全区政治、经济、文化中心。面积为25平方公里，人口7.4万，其中非农人口6.6万，辖：东街、麦园、湖沿、鸟林街、横路、东关、裕丰、北门、南山、大塘、西门、商城、西山、白鹤、平安十五个社区居委会。
+                </p>
+                <p> 永丰街道位于上饶市广丰区，现为广丰区人民政府驻地，是全区政治、经济、文化中心。面积为25平方公里，人口7.4万，其中非农人口6.6万，辖：东街、麦园、湖沿、鸟林街、横路、东关、裕丰、北门、南山、大塘、西门、商城、西山、白鹤、平安十五个社区居委会。永丰街道位于上饶市广丰区，现为广丰区人民政府驻地，是全区政治、经济、文化中心。面积为25平方公里，人口7.4万，其中非农人口6.6万，辖：东街、麦园、湖沿、鸟林街、横路、东关、裕丰、北门、南山、大塘、西门、商城、西山、白鹤、平安十五个社区居委会。</p>
+                </p>
+
+                <div class="row">
+                    <div class="col-md-4 col-4 col-sm-4"><img src="../assets/img/solution/detail1.png" alt=""></div>
+                    <div class="col-md-4 col-4 col-sm-4"><img src="../assets/img/solution/detail2.png" alt=""></div>
+
+                    <div class="col-md-4 col-4 col-sm-4"><img src="../assets/img/solution/detail3.png" alt=""></div>
+
+                </div>
+            </div>
+        </div>
+
+    </section>
+    <!--====== SOLUTION DETAIL END ======-->
+
+
+
+
+
+
+
+    <!--====== FOOTER PART START ======-->
+    <footer>
+        <!-- widgets -->
+        <div class="footer-widget-area">
+            <div class="container">
+                <div class="row">
+                    <div class="col-lg-2 col-md-6 col-sm-6 col-6">
+                        <div class="copyrigt-or-code  d-flex flex-column align-items-center">
+                            <img width="130" height="130" src="../assets/img/qr_code.png">
+                            <span style="text-align: left;color:#fff;margin-top:10px">微信公众号</span>
+                        </div>
+                    </div>
+                    <div class="col-lg-2 col-md-6 col-sm-6 col-6">
+                        <div class="widget nav-widget d-flex justify-content-center">
+                            <div>
+                                <h5 class="widget-title">核心服务</h5>
+                                <ul>
+                                    <li><a href="#">智能楼宇</a></li>
+                                    <li><a href="#">物联技术</a></li>
+                                    <li><a href="#">通信配套</a></li>
+                                    <li><a href="#">数字政务</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-2 col-md-6 col-sm-6 col-6">
+                        <div class="widget nav-widget d-flex justify-content-center">
+                            <div>
+                                <h5 class="widget-title">企业服务</h5>
+                                <ul>
+                                    <li><a href="#">运维服务</a></li>
+                                    <li><a href="#">设计管理</a></li>
+                                    <li><a href="#">项目实施</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-2 col-md-6 col-sm-6 col-6">
+                        <div class="widget nav-widget d-flex justify-content-center">
+                            <div>
+                                <h5 class="widget-title">合作客户</h5>
+                                <ul>
+                                    <li><a href="#">偶天集团</a></li>
+                                    <li><a href="#">海康威视</a></li>
+                                    <li><a href="#">大华集团</a></li>
+                                    <li><a href="#">派米雷集团</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-2 col-md-6 col-sm-6 col-6">
+                        <div class="widget nav-widget d-flex justify-content-center">
+                            <div>
+                                <h5 class="widget-title">新闻动态</h5>
+                                <ul>
+                                    <li><a href="#">公司新闻</a></li>
+                                    <li><a href="#">行业动态</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-2 col-md-6 col-sm-6 col-6">
+                        <div class="widget nav-widget d-flex justify-content-center">
+                            <div>
+                                <h5 class="widget-title">加入我们</h5>
+                                <ul>
+                                    <li><a href="#">岗位信息</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- copyright -->
+        <div class="copy-right-area">
+            <div class="container">
+                <div class="row copyrigt-text">
+                    <div class="col-lg-12">
+                        <p>Copyright © 2001- 2014 Usky. All Rights Reserved. 永天股份 版权所有</p>
+                        <p>增值电信业务经营许可证（IDC、ISP）编号B2-20080010</p>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </footer>
+    <!--====== FOOTER PART END ======-->
+
+    <script src="../assets/js/vendor/modernizr-3.6.0.min.js"></script>
+    <script src="../assets/js/vendor/jquery-1.12.4.min.js"></script>
+    <!--====== Bootstrap js ======-->
+    <script src="../assets/js/bootstrap.min.js"></script>
+    <script src="../assets/js/popper.min.js"></script>
+    <!--====== Mean Menu ======-->
+    <script src="../assets/js/jquery.meanmenu.min.js"></script>
+    <!--====== Main js ======-->
+    <script src="../assets/js/main.js"></script>
+    <!--====== Example Info js======-->
+    <script src="../assets/js/exampleinfo.js"></script>
+    <!--====== Vue Developer js ======-->
+    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
+    <!--====== Vue js======-->
+    <script src="../assets/js/vue.min.js"></script>
+    <script>
+        var app = new Vue({
+            el: '#app',
+            data: {
+                examples: [],
+                selectedId: 0,
+            },
+            computed: {
+                isInitData: function() {
+                    return this.examples.length > 0;
+                },
+                currentExamples: function() {
+                    return this.examples[this.selectedId];
+                }
+            },
+            methods: {
+                changeExampleType: function(tid) {
+                    this.selectedId = tid;
+                }
+            },
+            mounted: function() {
+                this.examples = window.exampleinfo;
+            }
+        })
+    </script>
+</body>
+
+</html>

solution/detail2.html

@@ -0,0 +1,357 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <title>服务案例详情2</title>
+
+    <link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
+    <!--====== Owl Carousel css ======-->
+    <link rel="stylesheet" href="../assets/css/slick.css" />
+    <!--====== Mean Menu ======-->
+    <link rel="stylesheet" href="../assets/css/meanmenu.min.css" />
+    <!--====== Default css ======-->
+    <link rel="stylesheet" href="../assets/css/default.css" />
+    <!--====== Style css ======-->
+    <link rel="stylesheet" href="../assets/css/style.css" />
+</head>
+
+<body>
+    <!--[if lte IE 9]>
+		<p class="browserupgrade">请使用chrome，IE11等现代浏览器，浏览本网站.</p>
+  <![endif]-->
+
+    <!--====== HEADER START ======-->
+    <header class="header-absolute sticky-header">
+        <div class="custom-container-one">
+            <div class="header-top-area">
+                <div class="container align-items-center">
+                    <div class="col-md-6 col-sm-7">
+                        <ul class="contact-list">
+                            <li>
+                                <a href="javascipt:void();">www.chinausky.com</a>
+                            </li>
+                            <li>
+                                <a href="javascipt:void();">400 633 8668</a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div class="mainmenu-area container">
+                <div class="d-flex align-items-center justify-content-between">
+                    <nav class="main-menu">
+                        <div class="logo">
+                            <a href="index.html"><img src="../assets/img/logo.png" alt="uskylogo"></a>
+                        </div>
+                        <div class="menu-items">
+                            <ul>
+                                <li>
+                                    <a href="../">首页</a>
+                                </li>
+                                <li class="active">
+                                    <a>解决方案</a>
+                                    <ul class="submenu">
+                                        <li>
+                                            <a>城市治理</a>
+                                            <ul class="submenu">
+                                                <li><a href="../solution">智能招商</a></li>
+                                                <li><a href="../solution">智慧安防</a></li>
+                                                <li><a href="../solution">智慧消防</a></li>
+                                            </ul>
+                                        </li>
+                                        <li><a href="../solution">民生服务</a></li>
+                                        <li><a href="../solution">园区服务</a></li>
+                                        <li><a href="../solution">其他拓展</a></li>
+                                    </ul>
+                                </li>
+                                <li>
+                                    <a>新闻动态</a>
+                                    <ul class="submenu">
+                                        <li><a href="../news">公司新闻</a></li>
+                                        <li><a href="../news">行业动态</a></li>
+                                    </ul>
+                                </li>
+                                <li>
+                                    <a href="../about">关于我们</a>
+                                </li>
+                                <li>
+                                    <a href="../join">加入我们</a>
+                                </li>
+                            </ul>
+                        </div>
+                    </nav>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-12">
+                    <div class="mobile-menu"></div>
+                </div>
+            </div>
+        </div>
+    </header>
+    <!--====== HEADER END ======-->
+
+    <!--====== COMMON BREADCRUMB START ======-->
+    <section class="common-bradcrumb-section" style="background-image: url('../assets/img/solution/detail2-banner.png'); height:300px">
+        <!-- <img src="../assets/img/solution/solution-banner.png" alt=""> -->
+    </section>
+    <!--====== COMMON BREADCRUMB END ======-->
+
+    <section class="crumbs">
+        <div class="container">
+            <ul>
+                <li>解决方案 ></li>
+                <li>城市治理 ></li>
+                <li class="active">智慧招商</li>
+            </ul>
+        </div>
+
+
+    </section>
+
+    <!--====== SOLUTION DETAIL START ======-->
+    <section class="solution-detail pt-40 pb-50">
+        <div class="container">
+            <div class="section-title text-center both-border mb-40">
+                <span class="title-tag2">宜春招商平台系统软件功能介绍</span>
+                <p class="subtit mt-40">区域：江西省，宜春市 规模：永丰街道，7.4万人</p>
+            </div>
+            <div class="section-content">
+                <p>永丰街道位于上饶市广丰区，现为广丰区人民政府驻地，是全区政治、经济、文化中心。面积为25平方公里，人口7.4万，其中非农人口6.6万，辖：东街、麦园、湖沿、鸟林街、横路、东关、裕丰、北门、南山、大塘、西门、商城、西山、白鹤、平安十五个社区居委会。</p>
+                <p> 实施内容主要为社会服务管理中心数字平台。通过系统整合资源，提升公共服务优质化，全面融合技术，促进社会管理信息化，科学健全体系，打造城区发展网格化。
+                </p>
+                <p> 永丰街道位于上饶市广丰区，现为广丰区人民政府驻地，是全区政治、经济、文化中心。面积为25平方公里，人口7.4万，其中非农人口6.6万，辖：东街、麦园、湖沿、鸟林街、横路、东关、裕丰、北门、南山、大塘、西门、商城、西山、白鹤、平安十五个社区居委会。
+                </p>
+                <p>实施内容主要为社会服务管理中心数字平台。通过系统整合资源，提升公共服务优质化，全面融合技术，促进社会管理信息化，科学健全体系，打造城区发展网格化。</p>
+                <p> 永丰街道位于上饶市广丰区，现为广丰区人民政府驻地，是全区政治、经济、文化中心。面积为25平方公里，人口7.4万，其中非农人口6.6万，辖：东街、麦园、湖沿、鸟林街、横路、东关、裕丰、北门、南山、大塘、西门、商城、西山、白鹤、平安十五个社区居委会。
+                </p>
+                <p> 永丰街道位于上饶市广丰区，现为广丰区人民政府驻地，是全区政治、经济、文化中心。面积为25平方公里，人口7.4万，其中非农人口6.6万，辖：东街、麦园、湖沿、鸟林街、横路、东关、裕丰、北门、南山、大塘、西门、商城、西山、白鹤、平安十五个社区居委会。永丰街道位于上饶市广丰区，现为广丰区人民政府驻地，是全区政治、经济、文化中心。面积为25平方公里，人口7.4万，其中非农人口6.6万，辖：东街、麦园、湖沿、鸟林街、横路、东关、裕丰、北门、南山、大塘、西门、商城、西山、白鹤、平安十五个社区居委会。</p>
+                </p>
+
+                <div class="row">
+                    <div class="col-md-4 col-4 col-sm-4"><img src="../assets/img/solution/detail1.png" alt=""></div>
+                    <div class="col-md-4 col-4 col-sm-4"><img src="../assets/img/solution/detail2.png" alt=""></div>
+
+                    <div class="col-md-4 col-4 col-sm-4"><img src="../assets/img/solution/detail3.png" alt=""></div>
+
+                </div>
+            </div>
+        </div>
+
+    </section>
+
+    <section class="solution-detail pt-40 pb-80  bg-gray">
+        <div class="container">
+            <div class="section-title text-center both-border mb-40 ">
+                <span class="title-tag2">智慧招商综合管理平台软件</span>
+            </div>
+            <div class="section-content">
+                <div class="row">
+                    <div class="col-md-2 col-sm-4 col-4">
+                        <div class="list-content">
+                            <img src="../assets/img/solution/pro-list1.png" alt="">
+                            <div class="modal-bg">
+                                <span class="click-more">查看详情</span>
+                            </div>
+                        </div>
+                        <p class="pro-tit">视频检测</p>
+                    </div>
+                    <div class="col-md-2 col-sm-4 col-4">
+                        <div class="list-content">
+                            <img src="../assets/img/solution/pro-list2.png" alt="">
+                            <div class="modal-bg">
+                                <span class="click-more">查看详情</span>
+                            </div>
+                        </div>
+                        <p class="pro-tit">占道侦测</p>
+                    </div>
+                    <div class="col-md-2 col-sm-4 col-4">
+                        <div class="list-content">
+                            <img src="../assets/img/solution/pro-list3.png" alt="">
+                            <div class="modal-bg">
+                                <span class="click-more">查看详情</span>
+                            </div>
+                        </div>
+                        <p class="pro-tit">电动车禁入</p>
+                    </div>
+                    <div class="col-md-2 col-sm-4 col-4">
+                        <div class="list-content">
+                            <img src="../assets/img/solution/pro-list4.png" alt="">
+                            <div class="modal-bg">
+                                <span class="click-more">查看详情</span>
+                            </div>
+                        </div>
+                        <p class="pro-tit">可燃气体侦测</p>
+                    </div>
+
+                    <div class="col-md-2 col-sm-4 col-4">
+                        <div class="list-content">
+                            <img src="../assets/img/solution/pro-list5.png" alt="">
+                            <div class="modal-bg">
+                                <span class="click-more">查看详情</span>
+                            </div>
+                        </div>
+                        <p class="pro-tit">窖井盖监测</p>
+                    </div>
+
+                    <div class="col-md-2 col-sm-4 col-4">
+                        <div class="list-content">
+                            <img src="../assets/img/solution/pro-list6.png" alt="">
+                            <div class="modal-bg">
+                                <span class="click-more">查看详情</span>
+                            </div>
+                        </div>
+                        <p class="pro-tit">二次供水监测</p>
+                    </div>
+
+
+
+                </div>
+            </div>
+        </div>
+
+    </section>
+    <!--====== SOLUTION DETAIL END ======-->
+
+
+
+
+
+
+
+    <!--====== FOOTER PART START ======-->
+    <footer>
+        <!-- widgets -->
+        <div class="footer-widget-area">
+            <div class="container">
+                <div class="row">
+                    <div class="col-lg-2 col-md-6 col-sm-6 col-6">
+                        <div class="copyrigt-or-code  d-flex flex-column align-items-center">
+                            <img width="130" height="130" src="../assets/img/qr_code.png">
+                            <span style="text-align: left;color:#fff;margin-top:10px">微信公众号</span>
+                        </div>
+                    </div>
+                    <div class="col-lg-2 col-md-6 col-sm-6 col-6">
+                        <div class="widget nav-widget d-flex justify-content-center">
+                            <div>
+                                <h5 class="widget-title">核心服务</h5>
+                                <ul>
+                                    <li><a href="#">智能楼宇</a></li>
+                                    <li><a href="#">物联技术</a></li>
+                                    <li><a href="#">通信配套</a></li>
+                                    <li><a href="#">数字政务</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-2 col-md-6 col-sm-6 col-6">
+                        <div class="widget nav-widget d-flex justify-content-center">
+                            <div>
+                                <h5 class="widget-title">企业服务</h5>
+                                <ul>
+                                    <li><a href="#">运维服务</a></li>
+                                    <li><a href="#">设计管理</a></li>
+                                    <li><a href="#">项目实施</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-2 col-md-6 col-sm-6 col-6">
+                        <div class="widget nav-widget d-flex justify-content-center">
+                            <div>
+                                <h5 class="widget-title">合作客户</h5>
+                                <ul>
+                                    <li><a href="#">偶天集团</a></li>
+                                    <li><a href="#">海康威视</a></li>
+                                    <li><a href="#">大华集团</a></li>
+                                    <li><a href="#">派米雷集团</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-2 col-md-6 col-sm-6 col-6">
+                        <div class="widget nav-widget d-flex justify-content-center">
+                            <div>
+                                <h5 class="widget-title">新闻动态</h5>
+                                <ul>
+                                    <li><a href="#">公司新闻</a></li>
+                                    <li><a href="#">行业动态</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-2 col-md-6 col-sm-6 col-6">
+                        <div class="widget nav-widget d-flex justify-content-center">
+                            <div>
+                                <h5 class="widget-title">加入我们</h5>
+                                <ul>
+                                    <li><a href="#">岗位信息</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- copyright -->
+        <div class="copy-right-area">
+            <div class="container">
+                <div class="row copyrigt-text">
+                    <div class="col-lg-12">
+                        <p>Copyright © 2001- 2014 Usky. All Rights Reserved. 永天股份 版权所有</p>
+                        <p>增值电信业务经营许可证（IDC、ISP）编号B2-20080010</p>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </footer>
+    <!--====== FOOTER PART END ======-->
+
+    <script src="../assets/js/vendor/modernizr-3.6.0.min.js"></script>
+    <script src="../assets/js/vendor/jquery-1.12.4.min.js"></script>
+    <!--====== Bootstrap js ======-->
+    <script src="../assets/js/bootstrap.min.js"></script>
+    <script src="../assets/js/popper.min.js"></script>
+    <!--====== Mean Menu ======-->
+    <script src="../assets/js/jquery.meanmenu.min.js"></script>
+    <!--====== Main js ======-->
+    <script src="../assets/js/main.js"></script>
+    <!--====== Example Info js======-->
+    <script src="../assets/js/exampleinfo.js"></script>
+    <!--====== Vue Developer js ======-->
+    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
+    <!--====== Vue js======-->
+    <script src="../assets/js/vue.min.js"></script>
+    <script>
+        var app = new Vue({
+            el: '#app',
+            data: {
+                examples: [],
+                selectedId: 0,
+            },
+            computed: {
+                isInitData: function() {
+                    return this.examples.length > 0;
+                },
+                currentExamples: function() {
+                    return this.examples[this.selectedId];
+                }
+            },
+            methods: {
+                changeExampleType: function(tid) {
+                    this.selectedId = tid;
+                }
+            },
+            mounted: function() {
+                this.examples = window.exampleinfo;
+            }
+        })
+    </script>
+</body>
+
+</html>

solution/index.html

@@ -9,20 +9,19 @@
     <title>解决方案</title>
 
     <link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
+    <!--====== Owl Carousel css ======-->
+    <link rel="stylesheet" href="../assets/css/slick.css" />
     <!--====== Mean Menu ======-->
     <link rel="stylesheet" href="../assets/css/meanmenu.min.css" />
     <!--====== Default css ======-->
     <link rel="stylesheet" href="../assets/css/default.css" />
     <!--====== Style css ======-->
     <link rel="stylesheet" href="../assets/css/style.css" />
-    <!--====== Animation css =======-->
-    <link rel="stylesheet" href="../assets/css/animation.css" />
-
 </head>
 
 <body>
     <!--[if lte IE 9]>
-	<p class="browserupgrade">请使用chrome，IE11等现代浏览器，浏览本网站.</p>
+		<p class="browserupgrade">请使用chrome，IE11等现代浏览器，浏览本网站.</p>
   <![endif]-->
 
     <!--====== HEADER START ======-->
@@ -97,197 +96,106 @@
     <!--====== HEADER END ======-->
 
     <!--====== COMMON BREADCRUMB START ======-->
-    <section class="common-bradcrumb-section" style="background-image: url('../assets/img/solution/bg.png');">
+    <section class="common-bradcrumb-section" style="background-image: url('../assets/img/solution/solution-banner.png'); height:325px">
+        <!-- <img src="../assets/img/solution/solution-banner.png" alt=""> -->
     </section>
     <!--====== COMMON BREADCRUMB END ======-->
 
-    <!--====== SOLUTION PAGE BREADCRUMB START ======-->
-    <section class="solution-page-section pt-60 pb-60">
+    <section class="crumbs">
         <div class="container">
-            <div class="row">
-                <!-- tab menu-1 -->
-                <div class="col-lg-2 col-md-3 tab-menu-1">
-                    <div class="title"><span>解决方案</span></div>
-                    <!-- <ul>
-                        <li class="active">城市治理类应用</li>
-                        <li><a href="./life.html">生活服务类应用</a></li>
-                        <li><a href="./sustainable.html">绿色发展类应用</a></li>
-                        <li><a href="./others.html">其它创新类应用</a></li>
-                    </ul> -->
+            <ul>
+                <li>解决方案 ></li>
+                <li>城市治理 ></li>
+                <li class="active">智慧招商</li>
+            </ul>
+        </div>
+
+
+    </section>
+
+    <!--====== SOLUTION SECTION START ======-->
+    <section class="solution-section pt-80 pb-60">
+        <div class="container">
+            <div class="section-title text-center both-border mb-60">
+                <span class="title-tag2">打破实体商业瓶颈  大幅降低运营成本</span>
+            </div>
+            <div class="row align-items-center justify-content-center">
+
+                <div class="col-md-6">
+                    <p>
+                        以云平台为基础，云平台作为数据中心、交互中心，通过“移动端+PC+门店端”多方入口的方式进行信息采集、将根据各种消费行为进行综合分析管理。
+                    </p>
+
+                    <p> 系统集成：门禁系统、停车场系统、监控系统、环境控制系统、会员积分系统、室内导航系统、无线AP覆盖系统、电子支付系统。
+                    </p>
                 </div>
-                <!-- tab menu-2 -->
-                <div class="col-md-10 tab-menu-2">
-                    <ul class="row cannot_selected">
-                        <li class="col-md-3 col-sm-6 col-6 active">
-                            <div class="d-flex justify-content-center align-items-center"><span>城市治理</span></div>
-                        </li>
-                        <li class="col-md-3 col-sm-6 col-6"><a href="./life.html">生活服务</a></li>
-                        <li class="col-md-3 col-sm-6 col-6"><a href="./sustainable.html">绿色发展</a></li>
-                        <li class="col-md-3 col-sm-6 col-6"><a href="./others.html">其它创新</a></li>
-                    </ul>
+                <div class="col-md-6 solution-img ">
+                    <img src="../assets/img/solution/rh1.png" alt="">
+
                 </div>
-                <!-- content -->
-                <div class="col-lg-10 col-md-9 ">
-                    <div class="row main pl-20 pr-20">
-                        <!-- title -->
-                        <div class="col-lg-12 title  pt-40 pb-40">
-                            <h1>城市治理类应用</h1>
-                        </div>
-                        <!-- description -->
-                        <div class="col-lg-12 pb-60">
-                            <p>描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字</p>
-                        </div>
-                        <!-- sub title -->
-                        <div class="col-lg-12 pb-60 sub-title">
-                            <h2>城市治理类相关应用</h2>
-                        </div>
-                        <div class="col-lg-12">
-                            <div class="row">
-                                <!-- 1 -->
-                                <div class="col-lg-4 col-sm-6 ">
-                                    <div class="solution-grid-box">
-                                        <div class="solution-img">
-                                            <div style="background-image: url('../assets/img/solution/index/01.png');"></div>
-                                        </div>
-                                        <div class="cover-box d-flex flex-column justify-content-center align-items-center">
-                                            <div class="flex-grow-1 d-flex justify-content-center align-items-center">
-                                                <p>利用自动化检测与测量技术捕获交通违法或交通事故，将数据传回公安部门进行分析处理，并以此为证据对肇事者进行处罚，以减少事故发生，辅助交警工作。</p>
-                                            </div>
-                                            <div class="d-flex justify-content-center align-items-center">
-                                                <p>适用于：公安及交警部门</p>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="solution-grid-title d-flex justify-content-center align-items-center pt-20 pb-20">
-                                        <span>电子警察</span>
-                                    </div>
-                                </div>
-                                <!-- 2 -->
-                                <div class="col-lg-4 col-sm-6 ">
-                                    <div class="solution-grid-box">
-                                        <div class="solution-img">
-                                            <div style="background-image: url('../assets/img/solution/index/02.png');"></div>
-                                        </div>
-                                        <div class="cover-box d-flex flex-column justify-content-center align-items-center">
-                                            <div class="flex-grow-1 d-flex justify-content-center align-items-center">
-                                                <p>结合原有消防系统，加装智能化传感终端采集数据传回永天科技智慧消防管理平台，对城市所有单位的消防安全系统进行统一管理。</p>
-                                            </div>
-                                            <div class="d-flex justify-content-center align-items-center">
-                                                <p>适用于：公安、专职消防部门<br/>企事业单位消防部门<br/>项目相关管理运维部门</p>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="solution-grid-title d-flex justify-content-center align-items-center pt-20 pb-20">
-                                        <span>智慧消防</span>
-                                    </div>
-                                </div>
-                                <!-- 3 -->
-                                <div class="col-lg-4 col-sm-6 ">
-                                    <div class="solution-grid-box">
-                                        <div class="solution-img">
-                                            <div style="background-image: url('../assets/img/solution/index/03.png');"></div>
-                                        </div>
-                                        <div class="cover-box d-flex flex-column justify-content-center align-items-center">
-                                            <div class="flex-grow-1 d-flex justify-content-center align-items-center">
-                                                <p>采用永天科技智慧招商大数据平台，对政策新闻进行解读推荐、出具数据化的分析报告，结合产业地图、展会活动、企业查询、项目跟踪、内部数据共享等功能模块，为领导者决策提供阻力。</p>
-                                            </div>
-                                            <div class="d-flex justify-content-center align-items-center">
-                                                <p>适用于：城市招商相关部门<br/>区级招商部门<br/>园区招商部门</p>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="solution-grid-title d-flex justify-content-center align-items-center pt-20 pb-20">
-                                        <span>智慧招商</span>
-                                    </div>
-                                </div>
-                                <!-- 4 -->
-                                <div class="col-lg-4 col-sm-6 ">
-                                    <div class="solution-grid-box">
-                                        <div class="solution-img">
-                                            <div style="background-image: url('../assets/img/solution/index/04.png');"></div>
-                                        </div>
-                                        <div class="cover-box d-flex flex-column justify-content-center align-items-center">
-                                            <div class="flex-grow-1 d-flex justify-content-center align-items-center">
-                                                <p>永天科技智慧国土综合管理系统，采用GIS地图与遥感技术，通过多种传感器回传数据，为政府部门提供国土数据采集、存储、管理、分析、建模、可视化展现等智慧国土服务，辅助领导者解决复杂的规划和管理问题。</p>
-                                            </div>
-                                            <div class="d-flex justify-content-center align-items-center">
-                                                <p>适用于：各级政府国土资源相关部门</p>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="solution-grid-title d-flex justify-content-center align-items-center pt-20 pb-20">
-                                        <span>智慧国土</span>
-                                    </div>
-                                </div>
-                                <!-- 5 -->
-                                <div class="col-lg-4 col-sm-6 ">
-                                    <div class="solution-grid-box">
-                                        <div class="solution-img">
-                                            <div style="background-image: url('../assets/img/solution/index/05.png');"></div>
-                                        </div>
-                                        <div class="cover-box d-flex flex-column justify-content-center align-items-center">
-                                            <div class="flex-grow-1 d-flex justify-content-center align-items-center">
-                                                <p>利用分布在不同节点如景区、社区、商场、车站等位置的摄像头、报警终端，结合人体分析、人脸分析、行为分析与图像分析技术，对不同场所的人流量、人物、人物行为等进行分析管控，为打击违法犯罪、预防突发事件提供诸多方便。</p>
-                                            </div>
-                                            <div class="d-flex justify-content-center align-items-center">
-                                                <p>适用于：公安及交警部门<br/>项目相关管理运维部门</p>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="solution-grid-title d-flex justify-content-center align-items-center pt-20 pb-20">
-                                        <span>智慧安防</span>
-                                    </div>
-                                </div>
-                                <!-- 6 -->
-                                <div class="col-lg-4 col-sm-6 ">
-                                    <div class="solution-grid-box">
-                                        <div class="solution-img">
-                                            <div style="background-image: url('../assets/img/solution/index/06.png');"></div>
-                                        </div>
-                                        <div class="cover-box d-flex flex-column justify-content-center align-items-center">
-                                            <div class="flex-grow-1 d-flex justify-content-center align-items-center">
-                                                <p>多源感知城市时空数据，充分考虑城市种建设主体的生存现状、发展需求、活动规律，预测城市的发展态势，涵盖公共资源、通讯站点、路线规划、区域规划等方方面面，为领导者实现城市规划的科学化目标。</p>
-                                            </div>
-                                            <div class="d-flex justify-content-center align-items-center">
-                                                <p>适用于：城市规划管理部门</p>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="solution-grid-title d-flex justify-content-center align-items-center pt-20 pb-20">
-                                        <span>智慧规划</span>
-                                    </div>
-                                </div>
-                                <!-- 7 -->
-                                <div class="col-lg-4 col-sm-6 ">
-                                    <div class="solution-grid-box">
-                                        <div class="solution-img">
-                                            <div style="background-image: url('../assets/img/solution/index/07.png');"></div>
-                                        </div>
-                                        <div class="cover-box d-flex flex-column justify-content-center align-items-center">
-                                            <div class="flex-grow-1 d-flex justify-content-center align-items-center">
-                                                <p>永天科技民防综合管理系统按照民防办组织相关标注打造，利用GIS地理信息技术、遥感技术、视频监控技术、移动平台技术，实现民防业务从工程规划、审批、建设到安全检查、实时监控、执法、日常工作、政策法规等的集成化管理。</p>
-                                            </div>
-                                            <div class="d-flex justify-content-center align-items-center">
-                                                <p>适用于：民防办公室<br/>及有关管理部门</p>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="solution-grid-title d-flex justify-content-center align-items-center pt-20 pb-20">
-                                        <span>智慧民防</span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <!-- 翻页 -->
-                    <div class="d-flex justify-content-end align-items-center pt-40 page">
-                        <a href="./life.html">下一个：生活服务类应用</a>
-                    </div>
+            </div>
+        </div>
+
+    </section>
+    <!--====== SOLUTION SECTION END ======-->
+
+    <!--====== SOLUTION LIST START ======-->
+    <section class="solution-section pt-80 pb-80 img-left">
+        <div class="container">
+            <div class="section-title text-center both-border pb-60">
+                <span class="title-tag2">宜春招商平台系统软件功能介绍</span>
+            </div>
+            <div class="row align-items-center justify-content-center solution-list">
+                <div class="col-md-5 solution-img ">
+                    <img src="../assets/img/solution/solution-list1.png" alt="">
+                </div>
+                <div class="col-md-7">
+                    <h4 class="solution-list-tit">区域：江西省，宜春市 规模：永丰街道，7.4万人</h4>
+                    <p>
+                        永丰街道位于上饶市广丰区，现为广丰区人民政府驻地，是全区政治、经济、文化中心。面积为25平方公里，人口7.4万，其中非农人口6.6万，辖：东街、麦园、湖沿、鸟林街、横路、东关、裕丰、北门、南山、大塘、西门、商城、西山、白鹤、平安十五个社区居委会。
+
+                    </p>
+
+                    <p> 实施内容主要为社会服务管理中心数字平台。通过系统整合资源，提升公共服务优质化，全面融合技术，促进社会管理信息化，科学健全体系，打造城区发展网格化。
+                    </p>
+                    <div class="learn-more"><a class="main-btn" href="detail.html">了解更多</a></div>
                 </div>
+
             </div>
         </div>
     </section>
-    <!--====== SOLUTION PAGE BREADCRUMB END ======-->
+
+    <section class="solution-section pt-80 pb-80 img-right">
+        <div class="container">
+            <div class="section-title text-center both-border pb-60">
+                <span class="title-tag2">宜春招商平台系统软件功能介绍</span>
+            </div>
+            <div class="row align-items-center justify-content-center solution-list">
+                <div class="col-md-7">
+                    <h4 class="solution-list-tit">区域：江西省，宜春市 规模：永丰街道，7.4万人</h4>
+                    <p>
+                        永丰街道位于上饶市广丰区，现为广丰区人民政府驻地，是全区政治、经济、文化中心。面积为25平方公里，人口7.4万，其中非农人口6.6万，辖：东街、麦园、湖沿、鸟林街、横路、东关、裕丰、北门、南山、大塘、西门、商城、西山、白鹤、平安十五个社区居委会。
+
+                    </p>
+
+                    <p> 实施内容主要为社会服务管理中心数字平台。通过系统整合资源，提升公共服务优质化，全面融合技术，促进社会管理信息化，科学健全体系，打造城区发展网格化。
+                    </p>
+                    <div class="learn-more"><a class="main-btn" href="detail2.html">了解更多</a></div>
+                </div>
+                <div class="col-md-5 solution-img  ">
+                    <img src="../assets/img/solution/solution-list2.png" alt="">
+                </div>
+
+
+            </div>
+        </div>
+    </section>
+    <!--====== SOLUTION LIST END ======-->
+
+
+
+
+
 
     <!--====== FOOTER PART START ======-->
     <footer>
@@ -387,6 +295,37 @@
     <script src="../assets/js/jquery.meanmenu.min.js"></script>
     <!--====== Main js ======-->
     <script src="../assets/js/main.js"></script>
+    <!--====== Example Info js======-->
+    <script src="../assets/js/exampleinfo.js"></script>
+    <!--====== Vue Developer js ======-->
+    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
+    <!--====== Vue js======-->
+    <script src="../assets/js/vue.min.js"></script>
+    <script>
+        var app = new Vue({
+            el: '#app',
+            data: {
+                examples: [],
+                selectedId: 0,
+            },
+            computed: {
+                isInitData: function() {
+                    return this.examples.length > 0;
+                },
+                currentExamples: function() {
+                    return this.examples[this.selectedId];
+                }
+            },
+            methods: {
+                changeExampleType: function(tid) {
+                    this.selectedId = tid;
+                }
+            },
+            mounted: function() {
+                this.examples = window.exampleinfo;
+            }
+        })
+    </script>
 </body>
 
 </html>