@charset "utf-8";

#about{margin: 0 auto;}
#about .wrap{margin: 0 auto;}

#about .theme{ margin: 0 auto;}
#about .theme>.title{display: block; text-align: center; margin: 0 auto;}
#about .theme>.title>h3{ position: relative; padding-bottom: 20px; display: block; font-size: 3.2rem; color: #333;}
#about .theme>.title>h3:after{position: absolute;z-index: 12; left: 50%;bottom: 0;width: 60px;height: 2px; background: #cc151e; content: ''; transform: translateX(-50%);}
#about .theme>.intro{ width: 70%; margin: 0 auto; padding: 30px 0; text-align: center;font-size: 1.6rem; color: rgba(255,255,255,.5); line-height: 2.4rem;}


#about .profile{margin: 0 auto; padding: 100px 0 200px 0; background: #f7f7f7;}
#about .profile .theme>.title{text-align: left;}
#about .profile .theme>.title>h3:after{display: none;}
#about .profile .container{margin: 0 auto; padding: 50px 0; }
#about .profile .container>.text{ text-align: left; font-size: 1.6rem; color: #444; line-height: 2.4rem;}
#about .profile .container>.text>p{margin-bottom: 20px;}

#about .statistics{ margin: 0 auto;background: #281b6e;}
#about .statistics .layout{transform: translateY(-40%);}
#about .statistics .layout>.rows{display: block; float: left; width: 22%; margin-right: 4%; background: #fff; box-sizing: border-box;padding: 50px 0; text-align: center; transition: all .35s;}
#about .statistics .layout>.rows:nth-child(4n){margin-right: 0;}
#about .statistics .layout>.rows>.ico{text-align: center;margin: 0 auto;}
#about .statistics .layout>.rows>.ico>img{height: 76px;width: auto;}
#about .statistics .layout>.rows>.num{ font-size: 7.6rem; font-weight: bold; color: #000; padding: 20px 0;}
#about .statistics .layout>.rows>.title{ height: 70px; font-size: 2rem; color: #333;padding: 0 50px;}
#about .statistics .layout>.rows:hover{box-shadow: 0 2px 26px rgba(0,0,0,.1);}

#about .advantage{background: #281b6e url("../img/about_advantage_bg.png") no-repeat; background-position: right bottom; margin: 0 auto;padding-bottom: 100px;}
#about .advantage .wrap{max-width: 1400px;}
#about .advantage .theme>.title>h3{  color: #fff;}
#about .advantage .container{ margin: 0 auto;padding: 50px 0;}
#about .advantage .container>.layout{display: flex;}
#about .advantage .container>.layout>.slide {flex: 1;position: relative;margin-right: 3px; overflow:hidden; transition: .6s;}
#about .advantage .container>.layout>.slide:after{opacity: 1; position: absolute;z-index: 1; left: 0;top: 0; width: 100%;height: 100%;background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.5), rgba(0,0,0,.8)); content: ''; transition: all .35s;}
#about .advantage .container>.layout>.slide:last-child {margin-right: 0;}
#about .advantage .container>.layout>.slide .img {width: 100%;}
#about .advantage .container>.layout>.slide .img>img {width: 100%; height: 500px; object-fit: cover;}
#about .advantage .container>.layout>.slide .box {position: absolute;z-index: 12; bottom: 30px;left: 0; width: 100%;padding: 40px; box-sizing: border-box; transition: .8s;}
#about .advantage .container>.layout>.slide .box>.title{font-size: 2rem; font-weight: bold; color: #fff; white-space: nowrap; transition: all .35s;}
#about .advantage .container>.layout>.slide .box>.text{ opacity: 0; transform: translateY(-60px); padding-bottom: 20px; width: 90%; font-size: 1.4rem; line-height: 1.8rem; color: rgba(255,255,255,.8);transition: all .35s;}
#about .advantage .container>.layout>.slide:hover {flex: 2;}
#about .advantage .container>.layout>.slide:hover:after{opacity: .7; background: #cc151e;}
#about .advantage .container>.layout>.slide:hover .box{ background: transparent;}
#about .advantage .container>.layout>.slide:hover .box>.title{color: #fff; transform: translateY(-30px);}
#about .advantage .container>.layout>.slide:hover .box>.text{ opacity: 1; transform: translateY(-30px); }


#about .marketing{margin: 0 auto;padding: 100px 0;}
#about .marketing .wrap{max-width: 1400px;}
#about .marketing .theme>.title>h3{ color: #333;}
#about .marketing .theme>.intro{color: rgba(0,0,0,.5);}
#about .marketing .container{ margin: 0 auto; padding: 50px 0; position: relative;}
#about .marketing .container>.map{margin: 0 auto; position: relative;}
#about .marketing .container>.map>.area{ position: absolute;z-index: 50; width: 100%;height: 100%;}
#about .marketing .container>.map>.area .item { position: absolute;cursor: pointer; list-style: none; display: flex;flex-direction: column; align-items: center;transform: translate(-50%, -5px); opacity: 0; transition-duration: 1s;animation-timing-function: ease-in; }
#about .marketing .container>.map>.area .item.item1 { left: 19.4%; top: 38%; }
#about .marketing .container>.map>.area .item.item2 {left: 54.1%; top: 35.1%;}
#about .marketing .container>.map>.area .item.item3 { left: 75.2%; top: 41.4%;}
#about .marketing .container>.map>.area .item.item4 {left: 31.3%; top: 71.6%;}
#about .marketing .container>.map>.area .item.item5 {left: 51.2%;top: 58%;}
#about .marketing .container>.map>.area .item.item6 { left: 83.1%; top: 75.4%;}
#about .marketing .container>.map>.area .item i {width: 10px;height: 10px; display: block;border-radius: 100%;background: #c10020; position: relative; z-index: 20; margin-bottom: 16px;}
#about .marketing .container>.map>.area .item i.headquarters {width: 60px;height: auto;background: none; margin-bottom: 5px;}
#about .marketing .container>.map>.area .item i.headquarters>img{width: 100%;height: auto;}
#about .marketing .container>.map>.area .item i:after {content: ""; animation: ani_drop_wave 1.6s linear infinite;position: absolute; z-index: 1; left: 0;top: 0; width: 100%;height: 100%;border-radius: 100%;background: rgba(193,0,32,.5); opacity: .36;}
#about .marketing .container>.map>.area .item i.headquarters:after { border: none; background: none;}
#about .marketing .container>.map>.area .item p {font-size: 1.8rem;}
#about .marketing .container>.map.active>.area .item1{animation:ani_drop_opacity 1s ease-out 0.4s both; animation-delay: 2.6s;}
#about .marketing .container>.map.active>.area .item2{animation:ani_drop_opacity 1s ease-out 0.4s both; animation-delay: 2s;}
#about .marketing .container>.map.active>.area .item3{animation:ani_drop_opacity 1s ease-out 0.4s both; animation-delay: 0s;}
#about .marketing .container>.map.active>.area .item4{animation:ani_drop_opacity 1s ease-out 0.4s both; animation-delay: 3s;}
#about .marketing .container>.map.active>.area .item5{animation:ani_drop_opacity 1s ease-out 0.4s both; animation-delay: 3.2s;}
#about .marketing .container>.map.active>.area .item6{animation:ani_drop_opacity 1s ease-out 0.4s both; animation-delay: 2.8s;}
#about .marketing .container>.map>.line{position: absolute;z-index: 30; top: 0;left: 0;display: flex; box-sizing: border-box;}
#about .marketing .container>.map>.line>.left { clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);}
#about .marketing .container>.map>.line>.right { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}
#about .marketing .container>.map.active .line>div {clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%);transition-duration: 6s;}





@keyframes ani_drop_opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes ani_drop_wave {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: scale(3);
    }

    100% {
        opacity: 0;
        transform: scale(5);
    }
}




@media only screen and (max-width: 1560px){


    #about .statistics .layout>.rows>.num { font-size: 6.8rem;}





}


@media only screen and (max-width: 1480px){

    #about .statistics .layout>.rows{width: 22.75%; margin-right: 3%;}
    #about .statistics .layout>.rows>.num { font-size: 6rem;}
    #about .statistics .layout>.rows>.title { font-size: 1.8rem; }


}

@media only screen and (max-width: 1280px){

    #about .theme>.title>h3 {font-size: 2.8rem;}
    #about .theme>.intro{ font-size: 1.4rem; line-height: 2rem;}


    #about .statistics .layout>.rows>.num { font-size: 5.2rem;}
    #about .statistics .layout>.rows>.title { height: 60px; font-size: 1.6rem; }


    #about .marketing .container>.map>.area .item p { font-size: 1.6rem;}



}

@media only screen and (max-width: 1200px){


    #about .theme>.intro{width: 86%;}

    #about .statistics .layout>.rows{padding: 30px 0;}

    #about .advantage .container>.layout>.slide .box{padding: 25px;}
    #about .advantage .container>.layout>.slide .box>.title { font-size: 1.6rem;}
    #about .advantage .container>.layout>.slide .img>img { height: 400px; }


}

@media only screen and (max-width: 1080px){

    #about .statistics .layout{ transform: translateY(-12%);}
    #about .statistics .layout>.rows{width: 46%; margin-right: 0; margin-bottom: 8%; padding: 50px 0;}
    #about .statistics .layout>.rows:nth-child(even){float: right;}
    #about .statistics .layout>.rows>.num { font-size: 8rem;}
    #about .statistics .layout>.rows>.title { font-size: 2rem; }


    #about .marketing .container>.map>.area .item p { font-size: 1.4rem;}


}

@media only screen and (max-width: 960px){

    #about .advantage{padding-bottom: 0;}
    #about .advantage .wrap{max-width: 100%; width: 100%;}
    #about .advantage .theme>.intro{width: 70%;}
    #about .advantage .container{padding-bottom: 0;}
    #about .advantage .container>.layout{display: block;}
    #about .advantage .container>.layout>.slide { display: block; margin-right: 0; }
    #about .advantage .container>.layout>.slide .box { padding: 80px;}
    #about .advantage .container>.layout>.slide .box>.text {opacity: 1;transform: translateY(-20px);}


}

@media only screen and (max-width: 860px){

    #about .theme>.title>h3 { font-size: 2.4rem;}
    #about .theme>.intro { font-size: 1.2rem;  line-height: 1.8rem;}


    #about .profile {padding: 100px 0; }
    #about .profile .container { padding: 10px 0 30px 0;}
    #about .profile .container>.text { font-size: 1.4rem; line-height: 2rem;}


    #about .statistics .layout>.rows>.num { font-size: 7rem;}
    #about .statistics .layout>.rows>.title { font-size: 1.8rem; }

    #about .marketing .container>.map>.area .item i.headquarters { width: 50px;}
    #about .marketing .container>.map>.area .item i { width: 8px;height: 8px; margin-bottom: 12px;}
    #about .marketing .container>.map>.area .item p { font-size: 1.2rem;}
}

@media only screen and (max-width: 780px){

    #about .statistics .layout>.rows>.num { font-size: 5rem;}
    #about .statistics .layout>.rows>.title { font-size: 1.6rem; }


}



@media only screen and (max-width: 640px){

    #about .theme>.title>h3 { font-size: 2rem;}
    #about .theme>.intro{width: 90% !important;}


    #about .statistics .layout { transform: translateY(-20%);}
    #about .statistics .layout>.rows{padding: 30px 0;}
    #about .statistics .layout>.rows>.ico>img { height: 50px;}
    #about .statistics .layout>.rows>.num { font-size: 4rem;}
    #about .statistics .layout>.rows>.title { height: 40px; font-size: 1.2rem; padding: 0 20px; }

    #about .advantage{background-color: #281b6e; background-image: none;}
    #about .advantage .container>.layout>.slide .box { padding:0 50px; bottom: 25%;}
    #about .advantage .container>.layout>.slide .box>.text { width: 100%; font-size: 1.2rem; line-height: 1.6rem; padding-bottom: 0;}
    #about .advantage .container>.layout>.slide .img>img { height: auto;}


    #about .marketing { padding: 50px 0;}

}


@media only screen and (max-width: 520px){

    #about .statistics .layout>.rows {  padding: 20px 0;}
    #about .statistics .layout>.rows>.ico>img { height: 32px;}
    #about .statistics .layout>.rows>.num { padding: 10px 0; font-size: 3.2rem;}

}