* {
    font-family: "Arial", "微軟正黑體";
}

@font-face {}
body{
    -ms-overflow-x: hidden;
        overflow-x: hidden;
}
.nav-section {
    width: 100%;
    background-color: #FED845;
    position: fixed;
    -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    
}

.nav-section .first-nav>li>a {
    color: #000;
    font-weight: bold;
}

@media (min-width:768px) {
    .nav-section .first-nav>li>a {
    margin-top: -5px;
}

    .first-nav>li>a:after {
        position: absolute;
        left: 50%;
        color: #DF0615;
        background-color: #DF0615;
        top: 25px;
        width: 10px;
        height: 10px;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        content: "";
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        opacity: 0;
        -webkit-transition: ease-in-out 0.5s all;
        -moz-transition: ease-in-out 0.5s all;
        -ms-transition: ease-in-out 0.5s all;
        -o-transition: ease-in-out 0.5s all;
        transition: ease-in-out 0.5s all;
    }
    .first-nav>li:hover>a {
        color: #DF0615;
    }
    .first-nav>li:hover>a:after {
        top: 15px;
        opacity: 1;
    }
    .nav-img {
        padding: 15px;
    }
}

@media (min-width:768px) {
    .first-nav li {
        display: inline-block;
        margin: 0;
    }
    .nav-section .first-nav>li:nth-last-child(2) a {
        color: #DF012A;
        position: relative;
        margin-right: 30px;
    }
    /**
    .nav-section .first-nav>li:nth-last-child(2) a:before {
        content: " | ";
        position: absolute;
        right: -20px;
        top: 50%;
        font-style: normal;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        color: #000;
    }**/
    .sub {
        text-align: center;
        display: none;
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        top: 100%;
        width: 100%;
        max-width: 1024px;
        min-width: 768px;
        background-color: rgba(255, 255, 255, 1);
        list-style: none;
        overflow: hidden;
        z-index: 99;
        border: 1px solid #ccc;
        border-top: none;
        -webkit-border-bottom-left-radius: 5px;
        border-bottom-left-radius: 5px;
        -webkit-border-bottom-right-radius: 5px;
        border-bottom-right-radius: 5px;
        padding: 15px 0;
    }
    .sub>li {
        vertical-align: top;
        text-align: center;
        width: 100%;font-size: 15px;
        max-width: calc(100% /5);
        border: 1px solid #fff;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
    .sub>li>a {
        display: inline-block;
        color: #555;
        padding: 10px;
        display: block;
        text-decoration: none;
    }
    .sub>li:hover {
        border: 1px solid #ddd;
    }
    .sub>li:hover a {
        color: #DF0615;
    }
    .first-nav>li:hover>.sub {
        display: flex;
        align-items: center;
    }
    .first-nav>li>a {
        color: #FFF;
        font-size: 16px;
        display: block;
        padding: 25px 10px;
        text-decoration: none;
        position: relative;
    }
    .navbar-brand {
        margin-top: 3px;
    }
    .lan {

        padding-left: 0;
        list-style: none;
        position: relative;
    }
    .lan-block{
        position: absolute;
        right: 32px;
        top: 25px;
    }
    .lan li {
        width: 25px;
        margin-right: 5px;
        height: 25px;
        text-align: center;
        vertical-align: middle;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        display: inline-block;
        background-color: #222;
        -webkit-transition: ease-in-out 0.5s all;
        -moz-transition: ease-in-out 0.5s all;
        -ms-transition: ease-in-out 0.5s all;
        -o-transition: ease-in-out 0.5s all;
    }
    .lan li a {
        color: #bbb;
        display: block;
        padding: 3px 0;
        text-decoration: none;
    }
    .lan li:not(.active):hover a {
        color: #FFF;
    }
    .lan li:nth-child(1) {
        position: relative;
        z-index: 50;
    }
    .lan li.active {
        background-color: #DE0515;
        color: #fff;
    }
    .lan li.active a {
        color: #fff;
    }
    .lan li:nth-child(2) {
        position: absolute;
        top: 0;
        left: 0;
    }
    .lan li:nth-child(3) {
        position: absolute;
        top: 0;
        left: 0;
    }
    .lan:hover li:nth-child(2) {
        top: 110%;
    }
    .lan:hover li:nth-child(3) {
        top: 220%;
    }
}
@media (min-width:1600px) {
    .sub {
        max-width: 1300px;
    }
    
}
@media (min-width:768px) and (max-width:991px) {
    .first-nav>li>a {
        padding: 10px;
    }
    .first-nav{
        display: inline-block;
        margin-top: 0px;
        left: 0%;
        clear: right;
        margin-left: 0;
        padding-left: 10px;
    }
    .lan-block{
        right: 0;
        top:70px;
    }
}

@media (max-width:767px) {
    .lan {
        padding-left: 0;
        list-style: none;
        margin-bottom: 10px;
    }
    .lan li {
        display: inline-block;
        width: 25px;
        height: 25px;
        padding: 3px 0;
        text-align: center;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        margin-right: 5px;
        background-color: #333;
        color: #bbb;
    }
    .lan li a {
        color: #bbb;
    }
    .lan li.active {
        color: #fff;
        background-color: #D7181C;
    }
    .lan li.active a {
        color: #fff;
    }
    .sub img {
        display: none;
    }
    .sub {
        max-height: 0;
        overflow: hidden;
        -webkit-transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
        -moz-transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
        -ms-transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
        -o-transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
        transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
    }
    .sub.in {
        max-height: 1000px;
        -webkit-transition: max-height 1s ease-in-out;
        -moz-transition: max-height 1s ease-in-out;
        -ms-transition: max-height 1s ease-in-out;
        -o-transition: max-height 1s ease-in-out;
        transition: max-height 1s ease-in-out;
    }
    .first-nav {
        padding-left: 0;
        list-style: none;
    }
    .first-nav li a {
        text-decoration: none;
    }
    .first-nav>li>a {
        display: block;
        position: relative;
        width: 100%;font-size: 18px;
        border-bottom: 1px solid rgba(51,51,51,0.7);
    }
    .first-nav>li>a:not(:only-child):after {
        position: absolute;
        right: 0;
        top: 50%;
        color:rgba(51,51,51,0.7);
        font-family: 'FontAwesome';
        content: "\f067";
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .first-nav>li>a.in:after {
        content: "\f068";
    }
    .first-nav>li {
        padding: 5px 0;
    }
    .sub {
        padding-left: 16px;
        list-style: none;
        margin-bottom: 10px;
    }
    .sub>li {
        color: #888;
        padding: 5px 0;
    }
    .sub>li a {font-size: 18px;
        color: #555;display: block;
    }
}

#map {
    height: 500px;
    border: 1px solid #ccc;
}
#map-img{
    border: 1px solid #ddd;
}
.marker-list {
    padding-left: 0;
    list-style: none;
    margin-bottom: 20px;
}

.marker-list li {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 10px;
    cursor: pointer;
    border: 1px solid #ccc;
    padding: 5px 10px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.marker-list li:hover {
    background-color: #de0515;
    color: #fff;
}

#map-select-input,
#map-select-input2 {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 150px;
    padding: 5px 10px;
}

@media (max-width:767px) {
    #map {
        height: 300px;
    }
}

@media (min-width:1250px) {
    .dec{
        position: absolute;
        bottom: -15px;
        right: 20%;
    }
    .dec img{
        max-width: 140px;
    }
}
@media (min-width:767px)and (max-width:1249px){
    .dec{
        position: absolute;
        bottom: -15px;
        right: 10%;
    }
    .dec img{
        max-width: 100px;
    }
}
@media ( max-width:767px){
    .dec{
        position: absolute;
        bottom:100%;
left: 50%;
        -webkit-transform: translateX(-50%);
           -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
             -o-transform: translateX(-50%);
                transform: translateX(-50%);
    }
    .index-story-title.text-center{
        font-size: 20px;
    }
    .dec img{
        max-width: 100px;
    }
}
.index-story-block{
    padding-top: 120px;
}
.index-story-flex{
    display: flex;
    padding-left: 0;
    list-style: none;
}
.index-story-flex li{
    border: 1px solid #eaeaea;
    -webkit-flex: 25%;
        -ms-flex: 25%;
            flex: 25%;
    -webkit-transition: ease-in-out all 0.3s;
       -moz-transition: ease-in-out all 0.3s;
        -ms-transition: ease-in-out all 0.3s;
         -o-transition: ease-in-out all 0.3s;
            transition: ease-in-out all 0.3s;
}
.index-story-flex li:nth-child(1):hover{
    background-color: #bcd218;
}
.index-story-flex li:nth-child(2):hover{
    background-color: #68b8e9;
}
.index-story-flex li:nth-child(3):hover{
    background-color: #efa6ba;
}
.index-story-flex li:nth-child(4):hover{
    background-color: #47baa8;
}
.index-story-flex a{
    text-decoration: none;display: block;
}
.index-story-title{
    font-size: 25px;
    margin-bottom: 10px;position: relative;
}
.index-story-img img{
    width: 100%;
}
.index-story-text{
    text-align: center;
    color: #555;
    font-size: 18px;
    padding: 20px 0;
}
.index-story-flex a:hover {
    color: #B93334;
}
@media (max-width:768px) {
    .index-story-flex{
   -webkit-flex-wrap: wrap;
       -ms-flex-wrap: wrap;
           flex-wrap: wrap;
}
.index-story-flex li{
    -webkit-flex: 50%;
        -ms-flex: 50%;
            flex: 50%;
}
}
/********* Index **********/

.banner {
    -webkit-box-shadow: 0px 2px 6px -1px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 6px -1px rgba(0, 0, 0, 0.3);
}

.banner-text {
    position: absolute;
    left: 120px;
    z-index: 99;
    top: 100px;
}

.banner-text p {
    opacity: 0;
    -webkit-transition-delay: 1s;
    -moz-transition-delay: 1s;
    -ms-transition-delay: 1s;
    -o-transition-delay: 1s;
    transition-delay: 1s;
    -webkit-transition: ease-in-out all 1.5s;
    -moz-transition: ease-in-out all 1.5s;
    -ms-transition: ease-in-out all 1.5s;
    -o-transition: ease-in-out all 1.5s;
    transition: ease-in-out all 1.5s;
}

.owl-item.active .banner-text p:nth-child(1) {
    opacity: 1;
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -ms-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s;
        
}

@font-face {
    font-family: 'cwTeXMing';
    font-style: normal;
    font-weight: 500;
    src: url(../fonts/cwTeXMing-zhonly.eot);
    src: url(../fonts/cwTeXMing-zhonly.eot?#iefix) format('embedded-opentype'), url(../fonts/cwTeXMing-zhonly.woff2) format('woff2'), url(../fonts/cwTeXMing-zhonly.woff) format('woff'), url(../fonts/cwTeXMing-zhonly.ttf) format('truetype');
}

.owl-item.active .banner-text p:nth-child(2) {
    opacity: 1;

            -webkit-transition-delay: 0.8s;
    -moz-transition-delay: 0.8s;
    -ms-transition-delay: 0.8s;
    -o-transition-delay: 0.8s;
    transition-delay: 0.8s;
}

.owl-item.active .banner-text p:nth-child(3) {
    opacity: 1;
    -webkit-transition-delay: 1.4s;
    -moz-transition-delay: 1.4s;
    -ms-transition-delay: 1.4s;
    -o-transition-delay: 1.4s;
    transition-delay: 1.4s;
}

.owl-item.active .banner-text p:nth-child(4) {
    opacity: 1;
}

@media (max-width:768px) {
    .banner-text {
         left: 15px;
        top: 20px;
    }
    .banner-text>p {
        font-size: 12px!important;
        line-height: 10px;
    }
}

.index-item {
    padding-left: 0;
    list-style: none;
    font-size: 0;
    display: flex;
}







.index-ani-block{
    max-width: 1000px;

    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
         -o-transform: translateX(-50%);
            transform: translateX(-50%);
}
.index-ani-block .left , .index-ani-block .right{
    -webkit-flex: 50%;
        -ms-flex: 50%;
            flex: 50%;
}

.index-ani-title .main-title{
    font-size: 36px; font-weight: bold;
    display: inline-block;
    letter-spacing: 10px;
    margin-right: 5px;
}
.index-ani-title .sub-title{
    font-size: 30px;
    color: #9FA0A0;
    font-weight: bold;display: inline-block;
}



.index-ani-content{
    line-height: 2;        max-width: 310px;
}
.index-ani-ul-intro{
    color: #E71F19;
    letter-spacing: 2px;
    margin-bottom: 10px;
}
.index-ani-ul{
    padding-left: 0;
    list-style: none;
    overflow: hidden;
}
.index-ani-ul li{
    height: 110px;
    -webkit-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
    display: inline-block;
    width: 110px;cursor: pointer;
}
.index-ani-ul li.btn-game{
    background-image: url(../images/pro/btn-game.png);
}
.index-ani-ul li.btn-game:hover , .index-ani-ul li.btn-game.active{
    background-image: url(../images/pro/btn-game2.png);
}
.index-ani-ul li.btn-read{
    background-image: url(../images/pro/btn-read.png);
}
.index-ani-ul li.btn-read:hover , .index-ani-ul li.btn-read.active{
    background-image: url(../images/pro/btn-read2.png);
}
.index-ani-ul li.btn-paint{
    background-image: url(../images/pro/btn-paint.png);
}
.index-ani-ul li.btn-paint:hover , .index-ani-ul li.btn-paint.active{
    background-image: url(../images/pro/btn-paint2.png);
}
.index-ani-ul li.btn-write{
    background-image: url(../images/pro/btn-write.png);
}
.index-ani-ul li.btn-write:hover , .index-ani-ul li.btn-write.active{
    background-image: url(../images/pro/btn-write2.png);
}
.ani-block{
    display: none;
}
.ani-block.active , .ani-img.active{
    display: block;
}
.ani-img{
    width: 100%;
    height: 0;
    padding-bottom: 140%;
    background-image: url(../images/pro/bg.JPG);
    -ms-background-position-x: calc(100%/15*0);
        background-position-x: calc(100%/15*0);
    overflow: hidden;
    -webkit-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}
@media (min-width:768px) {
    .index-ani-group{
    position: absolute;
    left: 0;
    bottom: 30px;
}
.index-ani-block{
        display: flex;}
        .index-ani-title{
    margin-bottom: 20px;
    margin-top: 200px;
}
}
@media (max-width:767px) {
    .index-ani-ul{
        text-align: center;
    }
    .index-ani-ul li{
        width: 70px;
        height: 70px;
    }
    .index-ani-title{
    margin: 20px 0 10px 0;
}
.index-ani-title .main-title{
    font-size: 25px;
}
.index-ani-title .sub-title{
    font-size: 20px;
}
.ani-img{
    text-align: center;
    min-height: 343px;
}
.ani-img img{
    max-width: 250px;
}
.index-ani-content{
    min-height: 115px;
    
}
}

@media (max-width:320px){
     .index-ani-ul li{
        width: 65px;
        height: 65px;
    }
}

.ani-block{
    -webkit-animation-duration: 1.5s;
       -moz-animation-duration: 1.5s;
         -o-animation-duration: 1.5s;
            animation-duration: 1.5s;
}









.hrw{
    background-color: #fff;
    position: relative;
    z-index: 5;
}
.index-item li {
    margin: 7px;
    border: 1px solid #eaeaea;
    position: relative;
    -webkit-transition: opacity ease 0.1s;
    -moz-transition: opacity ease 0.1s;
    -ms-transition: opacity ease 0.1s;
    -o-transition: opacity ease 0.1s;
    transition: opacity ease 0.1s;
}


.index-item:hover li:not(:hover) {}
@media (min-width:768px) {
    .index-item-text {

    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 10px;
    z-index: 9;
    top: 0;
    left: 0;
    color: #222;
    background-color: rgba(223, 6, 1, 0.8);
    -webkit-transition: ease opacity 0.5s;
    -moz-transition: ease opacity 0.5s;
    -ms-transition: ease opacity 0.5s;
    -o-transition: ease opacity 0.5s;
    transition: ease opacity 0.5s;
}
.index-item-descript p {
   text-align: center;
    width: 100%;
    font-size: 18px;
}

.index-item-descript {
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.index-item-text.gray {
    background-color: rgba(183, 182, 183, 0.8);
}

.index-item-text.red {
    background-color: rgba(195, 21, 44, 0.8);
}

.index-item-text.blue {
    background-color: rgba(86, 190, 217, 0.8);
}

.index-item-text.pink {
    background-color: rgba(233, 163, 199, 0.8);
}

.index-item-text.green {
    background-color: rgba(168, 207, 82, 0.8);
}

.index-item-text.yellow {
    background-color: rgba(239, 184, 23, 0.8);
}
}
@media (max-width:767px) {
    .index-item-descript {
        vertical-align: middle;text-align: center; position: relative;
    }
     .index-item-text {
         text-align: center;
         color: #555;
         border-top: 1px solid #eaeaea;
     }
    .index-item {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .index-item li {
        width: 50%;
        -webkit-flex: 50%;
        -ms-flex: 50%;
        flex: 50%;
    }
    .brands.index-item li {
        width: 100%;
        -webkit-flex: 100%;
        -ms-flex: 100%;
        flex: 100%;
    }
    .index-item-descript p {
margin-top: 10px;
    width: 100%;font-weight: bold;
    font-size: 16px;text-decoration: none;
}

}

.index-item li:hover .index-item-text {
    opacity: 1;
}



.video .gray {
    background-color: rgba(183, 182, 183, 0.8);
}

.video .red {
    background-color: rgba(195, 21, 44, 0.8);
}

.video .blue {
    background-color: rgba(86, 190, 217, 0.8);
}

.video .pink {
    background-color: rgba(233, 163, 199, 0.8);
}

.video .green {
    background-color: rgba(168, 207, 82, 0.8);
}

.video .yellow {
    background-color: rgba(239, 184, 23, 0.8);
}

.index-title {
    font-size: 30px;
    padding: 30px 0;
    margin-bottom: 20px;
    text-align: center;
    color: #000;
    position: relative;
}

.index-title:after {
    position: absolute;
    left: 50%;
    bottom: 15px;
    content: "";
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #df0615 transparent transparent transparent;
}

@media (max-width:767px) {
    .index-title {
        font-size: 20px;
        padding: 10px 0;
        margin-bottom: 20px;
        text-align: center;
        color: #555;
        letter-spacing: 10px;
        position: relative;
    }
    .index-title:after {
        bottom: -5%;
    }
}

.e-store {
    padding-left: 0;
    list-style: none;
    margin-bottom: 20px;
}

.e-store li {
    display: inline-block;
    width: calc(100%/6);
}

.e-store li:first-child {
    background-color: #ddd;
    position: relative;
}

.e-store-title h4 {
    position: absolute;
    top: 50%;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 20px;
    vertical-align: middle;
}

.col-subnav>ul {
    padding-left: 0;
    list-style: none;
    margin-bottom: 40px;
}

.col-subnav>ul>li {
    margin-bottom: 20px;
    position: relative;
}

.col-subnav a {
    color: #333;
}

.e-store li {
    -webkit-flex: calc(100%/6);
    -ms-flex: calc(100%/6);
    flex: calc(100%/6);
    text-align: center;
    font-size: 25px;
    border: 1px solid #fff;
}

@media (max-width:767px) {
    .e-store li {
        -webkit-flex: 100%;
        -ms-flex: 100%;
        flex: 100%;
        text-align: center;
        font-size: 25px;
        border: 1px solid #fff;
    }
}

.es-img {
    display: inline-block;
    font-size: 40px;
}

.e-store li:not(:first-child):hover {
    border: 1px solid #ddd;
}

.e-store li:not(:first-child) {
    -webkit-filter: grayscale(1);
}

.e-store:hover li:hover {
    -webkit-filter: grayscale(0);
}

.e-store li:first-child {}

.e-contact .es-img img {
    padding: 13px;
}

.map-section {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: ease 1s max-height;
    -moz-transition: ease 1s max-height;
    -ms-transition: ease 1s max-height;
    -o-transition: ease 1s max-height;
    transition: ease 1s max-height;
}

.map-section.in {
    max-height: 1600px;
}

.map-title {
    font-size: 18px;
    color: #555;
    font-weight: bold;
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid #ccc;
}

.map-tel,
.map-addr,
.map-remark {
    color: #777;
}
@media (max-width:767px) {
 .map-tel,
.map-addr,
.map-remark {
   max-width: 320px;
}   
}
#map a {
    text-decoration: none;
}

.sub-nav-text {
    position: absolute;
    top: 10%;
    left: 50%;
    font-size: 30px;
    -webkit-transition: ease-in-out all 0.5s;
    -moz-transition: ease-in-out all 0.5s;
    -ms-transition: ease-in-out all 0.5s;
    -o-transition: ease-in-out all 0.5s;
    transition: ease-in-out all 0.5s;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.sub-nav a {
    color: #555;
}

.sub-nav {
    border: 1px solid #eaeaea;
    margin-bottom: 20px;
    -webkit-transition: ease-in-out all 0.2s;
    -moz-transition: ease-in-out all 0.2s;
    -ms-transition: ease-in-out all 0.2s;
    -o-transition: ease-in-out all 0.2s;
    transition: ease-in-out all 0.2s;
}

.sub-nav:hover {
    opacity: 0.8;
}

.sub-nav:hover .sub-nav-text {
    top: 5%;
    color: #DF0615;
}

.col-subnav li:hover .sub-nav-text-left {
    left: 60px;
    color: #DF0615;
}

.e-contact {
    display: flex;
    padding-left: 0;
    list-style: none;
    margin-bottom: 40px;
}

.e-contact li {
    -webkit-flex: 25%;
    text-align: center;
    -ms-flex: 25%;
    flex: 25%;
    padding: 20px;
}

.e-contact li img {
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

@media (max-width:767px) {
    .e-contact {
        margin-bottom: 40px;
    }
    .e-contact li {
        padding: 0px;
    }
}

.youtube {
    position: relative;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    width: 100%;
    padding-bottom: 40%;
    overflow: hidden;
}

.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.gif-nav {
    width: 100%;
    display: flex;
    padding-left: 0;
    list-style: none;
    margin-bottom: 20px;
    font-size: 18px;
}

.gif-nav li {
    width: 25%;
    position: relative;
    -webkit-flex: 25%;
    -ms-flex: 25%;
    flex: 25%;
    padding: 0 10px;
    overflow: hidden;
    border: 1px solid #ddd;
    font-weight: bold;
    border-top: none;
    margin-right: -1px;
    text-align: center;
    -webkit-transition: ease-in-out 0.2s all;
    -moz-transition: ease-in-out 0.2s all;
    -ms-transition: ease-in-out 0.2s all;
    -o-transition: ease-in-out 0.2s all;
    transition: ease-in-out 0.2s all;
}

.gif-nav li h4 {
    display: inline-block;
    padding: 8px 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}

.gif-nav li.active {}

.gif-nav li.active h4 {
    background-color: #de0515;
    color: #fff;
    font-weight: bold;
}

@media (max-width:767px) {
    .gif-nav {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .gif-nav li {
        width: 50%;
        -webkit-flex: 50%;
        -ms-flex: 50%;
        flex: 50%;
    }
    .gif-nav li h4 {
        font-size: 16px;
        padding: 8px 10px;
        margin: 5px;
    }
}
.index-intro{
    padding-bottom: 60px;
}
.index-intro-gray{
    border: 1px solid #eaeaea;
}
.gray-bg{
    background-color: #f0efed;
 min-height: 360px;font-size: 15px;
}
.index-intro-text{
    line-height: 1.8;
}
.index-intro-text2 .text{
    border-left: 4px solid #676664;
    padding-left: 10px;
    line-height: 1.8;
}
.intro-mt {
    text-align: center;
}
.intro-mt img{
}
@media (min-width:768px) {
    .gray-bg{
        display: flex;
    }
    .gray-bg>div{
        -webkit-flex: 50%;
            -ms-flex: 50%;
                flex: 50%;
        padding: 40px;
    }
    .index-intro-text2{
        margin-top:110px;
    }
    .mtl{
        text-align: left;
    }
    .mtr{
        text-align: right;
    }
    .intro-mt {
        margin-top: -80px;
    }
}
@media (max-width:767px) {
    .intro-mt{
        max-width: 250px;
        margin-top: -80px;
    }
    .gray-bg{
     padding: 20px;   
    }
    .index-intro-text , .index-intro-text2{
        margin-bottom: 20px;
    }
}
/**
.gif-nav li:nth-child(2):after {
    background-color: #e9a3c7;
}

.gif-nav li:nth-child(3):after {
    background-color: #a8cf52;
}

.gif-nav li:nth-child(4):after {
    background-color: #efb817;
}
**/

.gif-page {
    list-style: none;
    padding-left: 0;
    width: 100%;
    margin-bottom: 0;
}

.gif-page li {
    display: none;
}

.gif-page li.active {
    display: block;
}


/********* Product **********/

.product {
    padding: 0px 0;
    border: 1px solid #eee;
}

.product:nth-child(2n) {}

.product-banner-block {
    position: relative;
    width: 100%;
}

.product-banner-L {
    position: relative;
    border-bottom: 1px solid #ddd;
}
@media (min-width:1200px){
    .product-banner-text-block {left: 150px;
         }
}
@media (max-width:1199px) and (min-width:768px) {
     .product-banner-text-block{
        left: 75px;
     }
}
@media (min-width:768px) {
    .product-banner-text-block {
        position: absolute;
        width: 50%;
        top: 50%;
        
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }

}

.product-banner-title {
    font-size: 40px;
    font-weight: bold;
    position: relative;
    margin-bottom: 5px;
}

.product-banner-text ul {
    padding-left: 0;
    list-style: none;
    font-size: 18px;
    width: 100%;
    max-width: 400px;
}

.product-banner-text ul li {
    margin-bottom: 5px;
    display: inline-block;
    text-align: center;
    margin-right: 10px;position: relative;
    padding-right: 15px;
    border-right: 1px solid #ccc;
}

.product-banner-text ul li:hover .product-banner-ulimg {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
}

.product-banner-ulimg {
    margin-bottom: 10px;
    -webkit-transition: transform ease-in-out 0.3s;
    -moz-transition: transform ease-in-out 0.3s;
    -ms-transition: transform ease-in-out 0.3s;
    -o-transition: transform ease-in-out 0.3s;
    transition: transform ease-in-out 0.3s;
}

.product-banner-ulimg img {
    width: 100%;
    max-width: 120px;
}

.product-banner-text ul li:last-child {
    border-right: none;
}

.product-banner-text ul li a {
    color: #555;
    text-decoration: none;
    padding: 0;
    display: block;
}

.product-banner-text ul li:nth-child(1) a {
    padding-left: 0;
}

.product-banner-text ul li a:hover {
    color: #DF0615;
}
@media (min-width:1200px){
    .product-banner-text-block {left: 150px;
         }
         .product-text-block.left , .product-text-block2.left{
        left: 210px;
    }
}
@media (max-width:1199px) and (min-width:768px) {
     .product-banner-text-block{
        left: 75px;
     }
     .product-text-block.left , .product-text-block2.left{
        left: 105px;
    }
}
@media (min-width:768px) {
    .product-title {
        font-size: 30px;
        font-weight: bold;
        margin-bottom: 30px;
        position: relative;
    }
    .left .product-title:after {
        font-family: 'FontAwesome';
        content: "\f0da";
        color: #DF0615;
        margin-left: 10px;
    }
    .right .product-title:before {
        font-family: 'FontAwesome';
        content: "\f0d9 ";
        color: #DF0615;
        margin-right: 10px;
    }

    .product-text-block.right {
        left: 65%;
    }
    .product-block {
        position: relative;
        margin-bottom: 20px;
    }
    .product-banner-content {
        position: absolute;
        top: 50%;
        left: 12%;
        max-width: 300px;
        z-index: 999;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }
}
 .product-banner-img , .product-img-block{
        margin: 0 -15px ;
    }

@media (max-width:767px) {
    .product-banner-img{
        position: relative;
    }
    .product-banner-title {
        font-size: 20px;
       -webkit-transform: translateY(-50%);
          -moz-transform: translateY(-50%);
           -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
               transform: translateY(-50%);
        position: absolute;
        top:50%;
        left: 15px;
        margin-bottom: 10px;
    }
   
    .product-banner-text ul li{
        font-size: 14px;
    }
    .product-banner-text {
        margin-top: 10px;
        margin-bottom: 20px;
    }
    .product-banner-text > li {
        display: inline-block;
    }
    .product-img-block{
        position: relative;
    }
    .product-title {
        position: absolute;
        font-size: 18px;
        font-weight: bold;
        left: 30px;
        top: 50%;
        -webkit-transform: translateY(-50%);
           -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
             -o-transform: translateY(-50%);
                transform: translateY(-50%);
    }
    .product-text{
        margin-top: 20px;
    }
    .product-banner-title:after {
        top: 20px;
    }
    .product-block {
        position: relative;
    }
    .product-banner-L,
    .product {
        position: relative;
    }
}

.owl-product {
    margin: 40px 0;
}

.owl-product .item {
    cursor: pointer;
}

.owl-product .item {
    position: relative;
    border: 1px solid #ddd;
    padding: 1px;
}



@media (min-width:768px) {
    .product-text {
        line-height: 2;
        font-size: 16px;
    }
    .product-text-block {
        position: absolute;
        top: 50%;
        max-width: 320px;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .product-text-block2 {
        position: relative;
        padding: 50px 0 20px 0;
         max-width: 320px;
    }
}
@media   (min-width:768px) and (max-width:991px){
    .product-banner-title  {
        font-size: 30px;
    }
    .product-banner-text-block{
        left: 35px;
    }
    .product-title{
        font-size: 25px;
    }
    .product-text-block.left, .product-text-block2.left{
        left: 70px;
    }
}
.owl-product {
    margin-bottom: 60px;
}
@media (min-width:768px) {
    .product-item-text {
        text-align: center;
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 15px;
    color: #333;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.owl-product .item:hover .product-item-text {
    top: 0;
    opacity: 1;
}

.owl-product .item .product-item-text p {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
    opacity: 0;
    -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;
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -ms-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.owl-product .item:hover .product-item-text p {
    opacity: 1;
}
.gray .product-item-text {
    background-color: rgba(183, 182, 183, 0.8);
}

.red .product-item-text {
    background-color: rgba(195, 21, 44, 0.8);
}

.blue .product-item-text {
    background-color: rgba(86, 190, 217, 0.8);
}

.pink .product-item-text {
    background-color: rgba(233, 163, 199, 0.8);
}

.green .product-item-text {
    background-color: rgba(168, 207, 82, 0.8);
}

.yellow .product-item-text {
    background-color: rgba(239, 184, 23, 0.8);
}
}

@media (max-width:767px) {

     .product-item-text {
        border-top: 1px solid #ccc;
        padding: 10px;font-size: 12px;
     }
}


.product .owl-carousel .owl-nav .owl-prev,
.product .owl-carousel .owl-nav .owl-next {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.product .owl-carousel .owl-nav .owl-prev {
    right: 101%;
}

.product .owl-carousel .owl-nav .owl-next {
    left: 101%;
}
@media (max-width:767px) {
    .product .owl-carousel .owl-nav .owl-prev {
    right: 100%;
}
    
    .product .owl-carousel .owl-nav .owl-next {
    left: 100%;
} 
}
.product .owl-carousel .owl-nav .owl-prev:after {
    font-family: 'FontAwesome';
    content: "\f0d9";
    font-size: 40px;
    color: #555;
}

.product .owl-carousel .owl-nav .owl-next:after {
    font-family: 'FontAwesome';
    content: "\f0da";
    font-size: 40px;
    color: #555;
}

@media (min-width:991px) {
    .left-nav-block.in {
        position: relative;
        top: 120px;
        -webkit-transition: ease 0.3s top;
        -moz-transition: ease 0.3s top;
        -ms-transition: ease 0.3s top;
        -o-transition: ease 0.3s top;
        transition: ease 0.3s top;
    }
}

.left-nav-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #666;
}

.left-nav {
    padding-left: 0;
    list-style: none;
}

.left-nav li {
    margin-bottom: 10px;
}

.left-nav li a {
    color: #555;
    text-decoration: none;
}

.left-nav li a:hover {
    color: #222;
}

.left-nav li.active a {
    color: #DE0515;
    font-weight: bold;
}
.send-group{
    text-align: right;
}
@media (max-width:767px) {
    .left-nav-block{
        margin-top: 20px;
        border-bottom: 1px solid #ddd;
    }
    .left-nav {
        display: flex;
    }
    .left-nav li {display: inline-block;
        -webkit-flex: 25%;
            -ms-flex: 25%;
                flex: 25%;
    }
    .left-nav li a{
        display: block;
    }
    .left-nav-title{text-align: center;
        font-size: 16px;
        margin-bottom: 10px;
    }
    .send-group{
        text-align: center;
    }
}


/********* About ***********/

.about-title {
    font-size: 30px;
    font-weight: bold;
    padding: 10px 0;
    color: #555;
    margin-bottom: 20px;
    border-bottom: solid 1px #ddd;
}

.about-title2 {
    font-size: 30px;
    letter-spacing: 5px;
    padding: 10px 0;
    color: #000;
    margin-bottom: 20px;
}

.about {
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position-x: 100%;
}

.about-intro {
    position: relative;
    max-width: 630px;
    font-size: 20px;
    left: 50%;
    margin-bottom: 40px;
    display: inline-block;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.about-edit p {
    line-height: 1.8;
}

@media (min-width:768px) {
    .map-block {
        width: 100%;
    }
}

@media (max-width:767px) {

    .about-intro{
        font-size: 14px;
    }
   
}
.map-block{
    overflow: hidden;
}
.map-block .map-img {
    display: inline-block;
    float: left;
    width: calc(100%/4);
}

.map-block .map-img:nth-child(1) {
    width: 50%;
}

.map-img {
    padding: 2px;
}
@media (max-width:767px) {
    .map-block .map-img {

    width: calc(100%/3);
}

    .map-block .map-img:nth-child(1) {
    width:calc(100%/3);
}
}
.idea-item {
    padding: 15px;
    ;
}

.idea-item-block {
    margin-bottom: 40px;
    overflow: hidden;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

.idea-item-block.green {
    border: dotted 1px rgba(168, 207, 82, 1);
    background-color: rgba(168, 207, 82, 0.15);
}

.idea-item-block.blue {
    border: dotted 1px rgba(86, 190, 217, 1);
    background-color: rgba(86, 190, 217, 0.15);
}

.idea-item-block.pink {
    border: dotted 1px rgba(233, 163, 199, 11);
    background-color: rgba(233, 163, 199, 0.151);
}

.idea-item-block.yellow {
    border: dotted 1px rgba(239, 184, 23, 1);
    background-color: rgba(239, 184, 23, 0.15);
}

.idea-title {
    font-size: 30px;
    padding-bottom: 5px;
    margin-bottom: 10px;
    font-weight: bold;
    text-align: center;
}

.idea-sub {
    font-size: 20px;
    color: #333;
}

.idea {
    padding: 40px 0 0 0;
}

.idea-title.green {
    color: rgba(168, 207, 82, 1);
}

.idea-title.blue {
    color: rgba(86, 190, 217, 1);
}

.idea-title.pink {
    color: rgba(233, 163, 199, 1);
}

.idea-title.yellow {
    color: rgba(239, 184, 23, 1);
}

.idea-text {
    margin-bottom: 10px;
}

.idea-img {margin-top: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (min-width:768px) {
    .idea-img {
    width: 380px;
}
}
@media (max-width:500px) {
    .idea-img{
        max-width: 100%;
    }
}
.idea-img .idea-img-item {
    width: 30%;
    -webkit-flex: calc(100%/3);
    -ms-flex: calc(100%/3);
    flex: calc(100%/3);
    padding: 10px;
}
.fr{
   float: right;
}
.idea-img div img {
    margin-bottom: 5px;
}

.idea-img-title {
    text-align: center;
    font-size: 12px;
}

.idea-img-item {
    text-align: center;
}
@media (min-width:1200px) {
    .about-block {
        padding: 40px 0;
        padding-left: 150px;
        position: relative;
    }
    .about-blockL {
        padding: 80px 0;
        padding-left: 150px;
    }
    .about-blockL.map {
        padding: 98px 0;
        padding-left: 150px;
    }
}
@media (max-width:1199px) and (min-width:768px){
    .about-block {
        padding: 40px 0;
        padding-left: 75px;
        position: relative;
    }
    .about-blockL {
        padding: 80px 0;
        padding-left: 75px;
    }
    .about-blockL.map {
        padding: 98px 0;
        padding-left: 75px;
    }

}
@media (min-width:768px) {
    .text-block {
        position: relative;
        width: 100%;
    }
    .text-block2 {
        margin-top: 50px;
    }
    
}

.idea-img-item a img {
    max-height: 60px;
}

.idea-img-item a + a {
    margin: 0 10px;
}

.idea-img-item a + a + a {
    margin: 0px;
}

.idea-img-item a img.cer {
    max-height: 80px;
    margin-bottom: 10px;
}

.idea-item-block-flex{
    display: flex;
}

.idex-flex-img img{
    max-width: 700px;
}
@media (min-width:1200px) {
    .idex-flex-text{
    -webkit-flex: 45%;
        -ms-flex: 45%;
            flex: 45%;
        padding-right: 20px;
}
.idex-flex-img{
    margin-right: -15px;
    -webkit-flex:55%;
        -ms-flex:55%;
            flex:55%;
}
}

.idex-flex-text-title{
    margin-top: 20px;
    font-size: 30px;font-weight: bold;margin-bottom: 5px;
}
@media (min-width:768px) {
    .idex-flex-img{
        margin-right: -15px;
    }
    .idex-flex-text{
        padding-left: 150px;
    }
    .idex-flex-img.text-right{
        text-align: right;
    }
    
}
@media (max-width:1200px) {
    .fr{
        float: none;
    }
    .idex-flex-text-title{
        margin-top: 0;font-size: 25px;
    }

    .idex-flex-img{
        text-align: center;
    }
    .idex-flex-img img{
        max-width: 600px;
    }
    .idex-flex-text{
        padding-left: 75px;
    }
}
@media (max-width:768px) {
    .idex-flex-text{
        padding-left: 0px;
    }
    .idex-flex-img{
        margin-right: -15px;
    }
}
@media (max-width:1199px) and (min-width:768px){
    .idex-flex-text{
    -webkit-flex: 50%;
        -ms-flex: 50%;
            flex: 50%;
    }
    .idex-flex-img{
        -webkit-flex: 50%;
            -ms-flex: 50%;
                flex: 50%;
    }
      .idex-flex-text-title {
        font-size: 18px;
        top: 20px;
        margin-bottom: 10px;
    }
}
@media (max-width:991px) {
    .idea-item-block-flex{
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
    }
        .idex-flex-text{
    -webkit-flex: 100%;
        -ms-flex: 100%;
            flex: 100%;
}
.idex-flex-img{
    -webkit-flex: 100%;
        -ms-flex: 100%;
            flex: 100%;
}
}
.flex-eng{
     color: rgba(86, 190, 217, 1);
}
.idex-flex-text-P{
    -ms-word-break: break-all;
        word-break: break-all;
}
.flex-eng:after{
    font-family: 'FontAwesome';
    content: "\f0c8 ";
    position: relative;
   font-size: 10px;
   vertical-align: middle;
    margin:  15px;
}
.idea{
    border-top: 1px solid #eaeaea;
}
@media (max-width:767px) {
    .idea-item-block-flex{
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}
    .idex-flex-text{
    -webkit-flex: 100%;
        -ms-flex: 100%;
            flex: 100%;
}
.idex-flex-img{
    -webkit-flex: 100%;
        -ms-flex: 100%;
            flex: 100%;
}
}
@media (min-width:768px) and (max-width:1199px) {
    .about-edit ul {
        background-color: rgba(255, 255, 255, 0.6);
        padding: 5px;
    }
    .about-edit p {
        line-height: 1.5;
    }
    .text-block .about-title ,.text-block2 .about-title {
        font-size: 18px;
        top: 20px;
        margin-bottom: 10px;
    }
}
.phone-img{
    display: none;
}
@media (max-width:767px) {
    .text-block,.text-block2{
        margin-bottom: 40px;
    }

    .text-block .about-title,.text-block2 .about-title {
        font-size: 25px;
        margin-bottom: 0;
    }
   .phone-img{
       display: block;
       margin: 0 -15px;
   }
   .phone-block{
       position: relative;
   }
.phone-block .about-title{
    position: absolute;
    top: 50%;
    border-bottom: none;font-size: 20px;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
}
.about-title3{
    font-size: 20px;font-weight: bold;border-bottom: 1px solid #ccc;
    margin-bottom: 10px; 
}
    .about-block{
        background-image: none!important;
    }
    .about-block .about-edit {
        padding: 15px 0px;
    }
    .idea-title {
        font-size: 20px;
    }
    .idea-sub {
        font-size: 20px;
    }
    .about-banner {
        position: relative;
    }
}

.history {
    padding-left: 0;
    list-style: none;
}

.history li {
    margin-bottom: 5px;
}

.history li:nth-child(1) {
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
    -o-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

.history li:nth-child(2) {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.history li:nth-child(3) {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    -o-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.history li:nth-child(4) {
    -webkit-animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
    -o-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.history li:nth-child(5) {
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    -o-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.history li:nth-child(6) {
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
    -o-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.history li:nth-child(7) {
    -webkit-animation-delay: 0.7s;
    -moz-animation-delay: 0.7s;
    -o-animation-delay: 0.7s;
    animation-delay: 0.7s;
}

.history li:nth-child(8) {
    -webkit-animation-delay: 0.8s;
    -moz-animation-delay: 0.8s;
    -o-animation-delay: 0.8s;
    animation-delay: 0.8s;
}

@media (min-width:768px) {
    .history li {
        display: flex;
    }
}

.history .year {
    margin-right: 5px;
    display: inline-block;
}

.history .thing {
    display: inline-block;
    max-width: 470px;
    vertical-align: top;
}

.history .year:after {
    font-family: 'FontAwesome';
    content: "\f0da  ";
    color: #aaa;
    margin-left: 10px;
}

@media (max-width:767px) {
    .history .year {
        display: block;
    }
    .history li {
        display: flex;
        margin-bottom: 10px;
    }
}

.role-img {
    margin-bottom: 20px;
}

.role-name {
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
    padding-bottom: 5px;
    text-align: center;
}

.story-banner img {
    width: 100%;
}

@media (min-width:767px) {
    .about-banner {
        top: 0;
        right: 0;
        position: absolute;
        height: 100%;
    }
    .about-banner img {
        height: 100%;
        width: initial;
    }
    .story {
        display: flex;
         
    }
    .story:not(:last-child) {
        padding-bottom: 60px;
    }
    .story:not(:last-child):after {
        position: absolute;
        left: 50%;
        bottom: 25px;
        content: "";
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 12px 15px 0 15px;
        border-color: #939a9a transparent transparent transparent;
    }
    .story-banner {
        -webkit-flex: 65%;
        -ms-flex: 65%;
        flex: 65%;
    }
    .story-text-block {
        -webkit-flex: 35%;
        -ms-flex: 35%;
        flex: 35%;
        position: relative;
        padding: 0px 70px;display: flex; -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
    }
    .story-text {
        position: relative;

        left: 0%;
        font-size: 18px;
        width: 100%;
        line-height: 1.8;
    }
}
.story-title {
    color: rgba(255, 255, 255, 0.9);
    font-weight: bold;
}
@media (max-width:768px) {
    .about-banner {
        width: 100%;
    }
    .about-banner img {
        width: 100%;
    }
    .story-text-block {
        padding: 15px;
        font-size: 14px;
        line-height: 1.8;
        margin-bottom: 20px;
    }
    .story-title {
    font-size: 18px;
}
.story:not(:last-child){
    position: relative;
    margin-bottom: 40px;
}
.story-text-block:last-child{
    margin-bottom: 0;
}
    .story:not(:last-child):after {
        position: absolute;
        left: 50%;
        bottom: -25px;
        content: "";
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 12px 15px 0 15px;
        border-color: #939a9a transparent transparent transparent;
    }
}



.about .edit-text {
    margin-top: 20%;
}

.about .edit-text ul {
    padding-left: 16px;
}

.about .edit-text ul li {
    font-size: 16px;
}

.about .edit-text {
    font-size: 16px;
    line-height: 1.8;
}

.role-item {
    padding-left: 0;
    list-style: none;
}

.role-item>li {
    display: none;
}

.role-item>li.active {
    display: block;
}


/********* Video **********/

@media (min-width:768px) {
    .col-sm-3.col-xs-6:nth-child(1),
    .col-sm-3.col-xs-6:nth-child(4n+1) {
        -webkit-animation-delay: 0;
        -moz-animation-delay: 0;
        -o-animation-delay: 0;
        animation-delay: 0;
    }
    .col-sm-3.col-xs-6:nth-child(2n) {
        -webkit-animation-delay: 0.2s;
        -moz-animation-delay: 0.2s;
        -o-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }
    .col-sm-3.col-xs-6:nth-child(3n) {
        -webkit-animation-delay: 0.4s;
        -moz-animation-delay: 0.4s;
        -o-animation-delay: 0.4s;
        animation-delay: 0.4s;
    }
    .col-sm-3.col-xs-6:nth-child(4n) {
        -webkit-animation-delay: 0.8s;
        -moz-animation-delay: 0.8s;
        -o-animation-delay: 0.8s;
        animation-delay: 0.8s;
    }
}

@media (max-width:767px) {
    .col-sm-3.col-xs-6:nth-child(2n+1) {
        -webkit-animation-delay: 0s;
        -moz-animation-delay: 0s;
        -o-animation-delay: 0s;
        animation-delay: 0s;
    }
    .col-sm-3.col-xs-6:nth-child(2n) {
        -webkit-animation-delay: 0.4s;
        -moz-animation-delay: 0.4s;
        -o-animation-delay: 0.4s;
        animation-delay: 0.4s;
    }
}

.video {
    position: relative;
    border: 1px solid #ddd;
    margin-bottom: 40px;
}

.video-title {
    padding: 10px;
    text-align: center;
}

.video li .video-iframe {
    position: relative;
    height: 0;
    padding-bottom: 0%;
    -webkit-transition: ease-in-out all 0.5s;
    -moz-transition: ease-in-out all 0.5s;
    -ms-transition: ease-in-out all 0.5s;
    -o-transition: ease-in-out all 0.5s;
    transition: ease-in-out all 0.5s;
}

.video-img {
    position: relative;
    cursor: pointer;
}

.close {
    position: absolute;
    right: 10px;
    top: 20px;
    z-index: 999;
    padding: 0;
    opacity: 1;
}

.close:after {
    content: "X";
    cursor: pointer;
    font-size: 20px;
    height: 50px;
    width: 50px;
    background-color: #ccc;
    padding: 10px 15px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
@media (max-width:767px) {
    .close{
        right: 5px;
        top: 5px;
    }
    .close:after {
        font-size: 12px;
        padding: 5px 7px;
    }
}
.black-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

@media (min-width:768px) {
    .video-img:hover:after {
        font-family: 'FontAwesome';
        position: absolute;
        content: "\f144 ";
        top: 50%;
        left: 50%;
        font-size: 80px;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}

@media (max-width:767px) {
    .video-img:after {
        font-family: 'FontAwesome';
        position: absolute;
        content: "\f144 ";
        font-size: 30px;
        top: 50%;
        font-size: 40px;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}

.video-section {
    opacity: 0;
    -webkit-transition: ease all 0.5s;
    -moz-transition: ease all 0.5s;
    -ms-transition: ease all 0.5s;
    -o-transition: ease all 0.5s;
    transition: ease all 0.5s;
}

.video-section.in {
    opacity: 1;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 5;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.8);
}

.video-section.in .iframe {
    width: 60%;
    height: 0;
    padding-bottom: 34%;
    top: 50%;
    left: 50%;
    position: relative;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.video-section .iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video li .video-img.in +.video-iframe {
    padding-bottom: 40%;
}

.video li .video-iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (min-width:768px) {
    .video li .video-text {
        position: absolute;
        left: 10%;
        top: 50%;
        height: 40%;
        width: 30%;
        padding: 15px;
        opacity: 0;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-transition: ease-in-out all 0.5s;
        -moz-transition: ease-in-out all 0.5s;
        -ms-transition: ease-in-out all 0.5s;
        -o-transition: ease-in-out all 0.5s;
        transition: ease-in-out all 0.5s;
    }
}

@media (max-width:767px) {
    .video li .video-text {
        padding: 15px;
    }
    .video-section.in .iframe {
    width: 100%;
    padding-bottom: 52.25%;

}
}

.video li:hover .video-text {
    opacity: 1;
}

.cer-ul {
    padding-left: 0;
    list-style: none;
}

.cer-ul li {
    display: flex;
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
}

.cer-ul li:last-child {
    border-bottom: none
}

.cer-icon {
    -webkit-flex: 30%;
    -ms-flex: 30%;
    flex: 30%;
    text-align: center;
}

.cer-icon img {
    max-width: 120px;
}

.cer-text {
    -webkit-flex: 70%;
    -ms-flex: 70%;
    flex: 70%;
}


/********* Contact **********/
@media (max-width:767px) {
  #country{
  text-align-last: right;
}
}
.contact-text {
    color: #B06636;
    font-weight: bold;
    margin-bottom: 50px;
    border-top: 1px solid #ddd;
    line-height: 1.6;
    font-size: 16px;
    border-bottom: 1px solid #ddd;
    padding: 20px 0;
}
@media (max-width:767px) {
    .contact-text{
        font-size: 14px;
        margin-bottom: 20px;
    }
    .col-md-4.col-md-push-1.col-xs-12.text-right{
        text-align: center;
    }

}
.contact-text p {
    margin: 0;
}

.contact-ul {
    padding-left: 0;
    list-style: none;
    font-weight: bold;
    color: #333;
    display: inline-block;
}

.contact-ul li {
    text-align: left;
    margin-bottom: 2px;
}

.input-group {
    width: 100%;
    overflow: hidden;
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
}

.input-group2 {
    width: 100%;
    overflow: hidden;
    margin-bottom: 10px;
}

.input-group > label {
    width: 50px;
    color: #555;
}

.input-group2 > label {
    width: 80px;
    color: #555;
}

.input-group > label:before,
.input-group2 > label:before {
    content: "*";
    color: #b06636;
    margin-right: 5px;
}

.input-group > .input,
.input-group>textarea,
.input-group2 > .input,
.input-group2 >textarea {
    padding: 3px 8px;
    vertical-align: top;
    outline: none;
    border: none;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    width: calc(100% - 50px);
    width: -moz-calc(100% - 50px);
    width: -webkit-calc(100% - 50px);
}

#country,
#country:focus {
    vertical-align: top;
    border: none;
    outline: none;
    padding: 5px;
    width: calc(100% -50px);
    width: -moz-calc(100% - 50px);
    width: -webkit-calc(100% - 50px);
}

.se {
    display: inline-block;
    margin-right: 5px;
}

.code {
    padding: 3px 8px;
    vertical-align: top;
    outline: none;
    border: 1px solid #ccc;
    max-width: 75px;
}

.send {
    background-color: #FFDF00;
    outline: none;
    color: #222;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    font-weight: bold;
    border: solid 1px #ccc;
    padding: 5px 30px;
    margin-bottom: 20px;
}

.send:hover {
    background-color: #DE0515;
    color: #FFF;
}


/********* FOOTER *********/

footer {
    background-color: #FED845;
    border-top: 1px solid #ccc;
    padding: 30px 0 0 0;
}

@media (min-width:768px) {
    body {
        padding-bottom: 215px;
    }
    footer {
        position: fixed;
        z-index: 0;
        bottom: 0;
        width: 100vw;
        z-index: 0;
    }
    section:not(.nav-section) {
        background-color: #FFF;
        position: relative;
        z-index: 2;
    }
}

footer a {
    color: #333;
    text-decoration: none;
}

footer a:hover {
    color: #DF0615;
    text-decoration: none;
}

.footer-flexul {
    display: flex;
    padding-left: 0;
    list-style: none;
    padding: 0 15px;
}

.footer-flexul>li {
    width: 24%;
    -webkit-flex: 24%;
    -ms-flex: 24%;
    flex: 24%;
}

.footer-flexul>li:last-child {
    width: 28%;
    -webkit-flex: 28%;
    -ms-flex: 28%;
    flex: 28%;
}


.footer-title {
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: bold;
}

@media (min-width:768px) {
    .footer-title {
        padding-right: 10px;
        border-right: 1px solid #555;
    }
}

.footer-sub {
    padding-left: 0;
    list-style: none;
    margin-bottom: 20px;
}

.footer-sub li {
    margin-bottom: 3px;
}

.footer-logo {
    margin-top: 0px;
    clear: left;
}

.footer-contact {
    list-style: none;
    padding-left: 0;
    display: flex;
    float: left;
    margin-top: -20px;
}

.footer-contact .es-img img {
    max-width: 40px;
}

.footer-contact li {
    margin-right: 10px;
}

.footer-logo img {
    max-width: 250px;
}

.footer-ul {
    padding-left: 0;
    list-style: none;
}

.footer-ul li {
    display: inline-block;
    margin-right: 10px;
}

.copyright {
    font-size: 13px;
    margin-bottom: 20px;
}

.footer-split {
    display: flex;
    padding-left: 0;
    list-style: none;
}

.footer-split li:nth-child(1) {
    margin-right: 10px;
}

@media( max-width:767px) {
    .footer-split {
        display: block;
    }
    .footer-split li {
        width: 100%;
    }
    .footer-title{
        font-size: 16px;
    }
    .footer-sub{
        margin-top: 5px;
        padding-left: 16px;
         max-height: 0;
        overflow: hidden;
        -webkit-transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
        -moz-transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
        -ms-transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
        -o-transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
        transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
        margin-bottom: 10px;
        
    }
    .footer-sub li{
        margin-bottom: 10px;
    }
    .footer-title{
        border-bottom: 1px solid rgba(51,51,51,0.7);
    }
    .sub {
       
    }


    .footer-sub.in{
        max-height: 600px;
         -webkit-transition: max-height 1s ease-in-out;
        -moz-transition: max-height 1s ease-in-out;
        -ms-transition: max-height 1s ease-in-out;
        -o-transition: max-height 1s ease-in-out;
        transition: max-height 1s ease-in-out;
    }
    .footer-title{
        position: relative;
        margin-bottom: 0;
    }
    .footer-title:after {
        position: absolute;
        right: 0;
        top: 50%;
        color:rgba(51,51,51,0.7);
        font-family: 'FontAwesome';
        content: "\f067";
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .footer-title.in:after{
        content: "\f068"
    }
    .footer-flexul {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .footer-flexul>li{
        width: 100%;
        -webkit-flex: 100%;
        -ms-flex: 100%;
        flex: 100%;
        margin-bottom: 5px;
    }
    .footer-flexul>li:last-child {
        width: 100%;
        -webkit-flex: 100%;
        -ms-flex: 100%;
        flex: 100%;
    }
    .footer-flexul>li:nth-child(4){
        text-align: center;
    }
    .footer-flexul>li a{
        display: block;
    }
    .footer-flexul li:nth-child(3) .footer-sub.in{
        border-bottom: 1px solid rgba(51,51,51,0.7);
    }
    .footer-contact{

        width: 100%;
        text-align: center;
           margin-top: 0px;
           display: inline-block;
           margin-bottom: 5px;
    }
    .footer-contact li{
        display: inline-block;
    }
    .es-img{
        font-size: 0;
    }
}


/********margin-top********/

.content {
    padding: 40px 0;
}

.video {
    padding: 0;
}

@media(min-width:991px) {
    .banner,
    .content,
    .company,
    .product-banner-L {
        padding-top: 74px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    .banner,
    .content,
    .company,
    .product-banner-L {
        padding-top: 107px;
    }
}

@media(max-width:767px) {
    .banner,
    .content,
    .company,
    .product-banner-L {
        padding-top: 51px;
    }
}

#scrollUp1 {
    bottom: 5%;
    right: 5%;
    width: 50px;
    height: 50px;
    background-image: url(../images/top2.svg);
    background-size: cover;
}

#scrollUp1:hover {
    background-image: url(../images/top.svg);
}

.about-block {
    background-repeat: no-repeat;
    background-position: 100% 100%;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media (min-width:768px) and (max-width:1295px) {
    .about-block {
    background-repeat: no-repeat;
    background-position: 70% 100%;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}