/* Section Banner */

.section-banner {
    margin-top: 110px;
}

.overlay-line {
    background-image: url(../img/overlay.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 100% 100%;
}

.overlay {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}

.section-banner .item-caption .caption-title {
    font-family: UTM-Neo-Sans-Intel-Bold;
    color: #f8b416;
    font-size: 40px;
    text-transform: uppercase;
    text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}

.section-banner .item-caption .caption-content {
    font-family: UTM-Caviar;
    font-size: 24px;
    color: #000000;
    letter-spacing: 4px;
    text-shadow: none;
}

.section-banner .item-caption .caption-content .special-text {
    font-size: 36px;
    text-transform: uppercase;
    letter-spacing: 0;
    opacity: 0.8;
}

.section-banner .carousel-inner>.item>img {
    width: 100%;
}


/* Section Introduce */

.section-introduce {
    padding: 100px 0 45px 0;
    background-image: url(../img/company-page/bg-section-introduce.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100% 100%;
}

.section-introduce .caption {
    text-transform: uppercase;
    color: #ffffff;
    position: relative;
    text-shadow: 8px 8px 2px #1a1a1b;
}

.section-introduce .caption .we,
.section-introduce .caption .are,
.section-introduce .caption .an,
.section-introduce .caption .affiliate,
.section-introduce .caption .company {
    position: absolute;
    transform: translateX(-50%);
}

.section-introduce .caption .we {
    font-family: Panton-Thin;
    font-size: 117px;
    top: -75%;
    left: 50%;
}

.section-introduce .caption .are {
    font-family: Panton-SemiBold;
    font-size: 28px;
    left: 51.32%;
    top: 32%;
    letter-spacing: 1px;
}

.section-introduce .caption .an {
    font-family: Panton-Light;
    font-size: 15px;
    left: 38%;
    top: 71%;
}

.section-introduce .caption .affiliate {
    font-family: Panton-ExtraBold;
    font-size: 49px;
    top: 60%;
}

.section-introduce .caption .company {
    font-family: Panton-SemiBold;
    font-size: 21px;
    letter-spacing: 15px;
    bottom: -70%;
}

.section-introduce .content p {
    font-family: UTM-Caviar;
    font-size: 16px;
    color: grey;
    width: 55%;
    margin: auto;
    margin-top: 80px;
}


/* Section Introduce 2 */

.section-introduce-2 {
    padding: 90px 0 45px 0;
}

.section-introduce-2 p {
    font-family: UTM-Caviar;
    font-size: 18px;
    color: #737373;
    line-height: 30px;
}

.section-introduce-2 .first-row-intro .content:first-child {
    padding: 0 30px 0 120px;
    margin-bottom: 45px;
}

.section-introduce-2 .first-row-intro .content:last-child {
    padding: 0 120px 0 30px;
}

.section-introduce-2 .second-row-intro .content p {
    font-size: 22px;
    margin-top: 45px;
}

.section-introduce-2 .second-row-intro .content a {
    display: inline-block;
    position: relative;
    font-family: Panton-Bold;
    color: #ffffff;
    font-size: 24px;
    text-align: center;
    text-transform: uppercase;
    background-color: #e5b128;
    border: 1px solid #e5b128;
    border-radius: 35px;
    padding: 15px 50px 10px 50px;
    margin-top: 35px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.section-introduce-2 .second-row-intro .content a:hover {
    background-color: #333;
    opacity: 0.5;
    border: 1px solid #fff;
}


/* Section vision */

.section-vision {
    /* position: relative;
    min-height: 395px; */
    color: #ffffff;
    /* background-image: url(../img/company-page/bg_company_glass_city.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; */
}

.section-vision .img-container {
    position: relative;
    min-height: 419px;
    overflow: hidden;
}

.section-vision .img-container img {
    position: absolute;
    width: 100%;
    height: auto;
    /* max-height: 380px; */
}

.section-vision .img-container .img-bg {
    z-index: 9;
    position: absolute !important;
    top: 0px;
}

.section-vision .img-container .img-glass {
    z-index: 99;
}

.section-vision h2 {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    font-family: Panton-Light;
    font-size: 54px;
    text-transform: uppercase;
    z-index: 999;
}

.section-vision .special-text {
    font-family: Panton-ExtraBold;
    font-size: 57px;
}


/* Section intro tabs */

.section-intro-tabs {
    background-color: #fff;
}
.large-header {
    background-image: url(../img/vision/vision-bg.jpg);
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    z-index: 1;
}
/*canvas {
    width: 100%;
}*/
.section-intro-tabs ul {
    text-align: center;
}

.section-intro-tabs ul li {
    padding: 0;
    cursor: pointer;
    /* border-bottom: 1px solid black; */
}

.section-intro-tabs ul li span {
    font-family: UTM-Neo-Sans-Intel-Bold;
    font-size: 20px;
    color: #9f9f9f;
    text-transform: uppercase;
    margin: 0 25px;
    padding: 0 10px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.section-intro-tabs ul li:hover span {
    color: #35a0d9;
}

.section-intro-tabs ul li:hover hr {
    border-top: 3px solid #669aba;
}

.section-intro-tabs ul li hr {
    border-top: 3px solid #c7c7c7;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.section-intro-tabs ul li .performance-line {
    width: 102%;
}

.section-intro-tabs ul li .quality-line {
    width: 103%;
}

.section-intro-tabs ul li .innovation-line {
    width: 102%;
}

.section-intro-tabs ul li .cooperation-line {}

.section-intro-tabs ul li .active {
    color: #35a0d9;
}

.section-intro-tabs ul li .line-active {
    border-top: 3px solid #669aba;
}

.section-intro-tabs .content .content-item p {
    font-family: UTM-Caviar;
    font-size: 16px;
    max-width: 515px;
    margin: auto;
    line-height: 25px;
}

.section-intro-tabs .content .content-item {
    /* position: relative; */
}

#quality,
#innovation,
#cooperation {
    display: none;
}


/* Section introduce 3 */

.section-introduce-3 .top-banner {
    position: relative;
    background-image: url(../img/company-page/bg-section-introduce-3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 335px;
}

.section-introduce-3 .top-banner h2 {
    margin: 0;
    text-transform: uppercase;
    position: absolute;
}

.section-introduce-3 .top-banner h2:first-child {
    font-family: Panton-Light;
    font-size: 91px;
    color: #ffffff;
    left: 42%;
    transform: translateX(-50%);
    top: 18%;
}

.section-introduce-3 .top-banner h2:last-child {
    font-family: Panton-Black;
    font-size: 100px;
    color: #0f54d9;
    left: 50%;
    transform: translateX(-50%);
    top: 40%;
}

.section-introduce-3 .main-introduce {
    padding: 45px 0;
}

.section-introduce-3 .main-introduce p {
    font-family: UTM-Caviar;
    font-size: 17px;
}

.section-introduce-3 .main-introduce .introcude-item-container:nth-child(4) {
    clear: both;
}

.section-introduce-3 .main-introduce .introduce-item {
    clear: both;
    margin-top: 30px;
}

.section-introduce-3 .main-introduce .introduce-item .img-container {
    float: left;
}

.section-introduce-3 .main-introduce .introduce-item .item-content {
    margin-left: 80px;
}

/**
========Vision======
*/

.vision-wrapper {
    position: relative;
    margin: 0 auto;
    display: block;
    height: 560px !important;
    width: 98%;
}
.order-num {
    font-size: 60px;
    margin-top: -5px;
    padding: 0;
    float: left;
    width: 22%;
    font-family: Panton-Light;
}
.order-cnt {
    width: 78%;
    float: left;
}
.vision {
    position: absolute;
    width: 38%;
    height: auto;
}
.vision-title {
    font-size: 30px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    display: inline-block;
    text-transform: uppercase;
    font-family: UTM-Neo-Sans-Intel;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0;
}
.vision-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 10;
}
.vision-cnt {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.vision-cnt span {
    text-transform: uppercase;
    color: #888888;
    font-size: 18px;
    padding: 0;
    margin-bottom: 25px;
    font-family: UTM-Neo-Sans-Intel;
    font-weight: 600;
}
.vision-cnt p {
    font-family: 'UTM-Caviar';
}

#vision1 {
    top: 53px;
    left: 0;
}
#vision1 .vision-title {
    color: #c49b1a;
}
#vision1 .order-num {
    color: #c49b1a;
}
#vision1 .vision-line {
    position: absolute; 
    top: 48px;
    left: 22%;
}
#vision1 .vision-cnt {
    width: 80%;
}
#vision2 {
    top: 53px;
    right: 0;
    text-align: right;
}
#vision2 .vision-title {
    color: #ff5450;
}
#vision2 .order-num {
    color: #ff5450;
}
#vision2 .vision-line {
    position: absolute;
    top: 48px;
    right: 22%;
}
#vision3 {
    bottom: 70px;
    left: 0;
}
#vision3 .vision-title {
    color: #21a08a;
}
#vision3 .order-num {
    color: #21a08a;
}
#vision3 .vision-line {
    position: absolute;
    bottom: 80px;
    left: 22%;
}
#vision4 {
    bottom: 70px;
    right: 0;
    text-align: right;
}   
#vision4 .vision-title {
    color: #a9374e;
}
#vision4 .order-num {
    color: #a9374e;
}
#vision4 .vision-line {
    position: absolute;
    bottom: 135px;
    right: 22%;
}