@charset "utf-8";

@import url('https://fonts.font.im/css?family=Anton|Do+Hyeon');




#about{margin: 0 auto;}
#about .profile{margin: 0 auto; padding: 110px 0;}
#about .profile .title{ width: 30%; text-align: left;}
#about .profile .title>h3{ display: block; position: relative; padding-bottom: 18px; font-size: 3.2rem; font-weight: bold; color: #000;}
#about .profile .title>h3:after{position: absolute;z-index: 1; left: 0; bottom: 0;width: 40px;height: 4px; background: #002fa7; content: '';}
#about .profile .title>p{ display: block; padding-top: 10px; font-size: 1.8rem; color: #999;}
#about .profile .content{ width: 55%;text-align: left;}
#about .profile .content>.intro{ border-bottom: 1px solid #ddd; padding-bottom: 30px;}
#about .profile .content>.intro>.theme{font-size: 3rem; font-weight: bold; color: #000;}
#about .profile .content>.intro>.text{ font-size: 1.6rem; color: #676767; line-height: 3.2rem; padding: 20px 0;}
#about .profile .content>.standard{ padding-top: 50px;}
#about .profile .content>.standard>.theme{font-size: 3rem; font-weight: bold; color: #000;}
#about .profile .content>.standard>.box{ text-align: left; padding: 20px 0;}
#about .profile .content>.standard>.box>.row{display: block;position: relative; box-sizing: border-box;padding:5px 16px;font-size: 1.6rem; color: #676767; }
#about .profile .content>.standard>.box>.row:after{position: absolute; left: 0;top: 12px; width: 8px;height: 8px; border-radius: 100%; background: #002fa7; content:'';}

#about .chairman{margin: 0 auto; padding: 110px 0 60px 0; background: #f2f3f5;}
#about .chairman .content{ width: 52%; text-align: left}
#about .chairman .content>.title{display: block;}
#about .chairman .content>.title>h3{ display: block; position: relative; padding-bottom: 18px; font-size: 3.2rem; font-weight: bold; color: #000;}
#about .chairman .content>.title>h3:after{position: absolute;z-index: 1; left: 0; bottom: 0;width: 40px;height: 4px; background: #002fa7; content: '';}
#about .chairman .content>.title>p{ display: block; padding-top: 10px; font-size: 1.8rem; color: #999;}
#about .chairman .content>.intro{ position: relative; margin-top: 60px; padding-left:40px;}
#about .chairman .content>.intro:after{position: absolute;z-index: 1; left: -40px; top:-16px;font-size: 8rem; color: #002fa7; content: '“';}
#about .chairman .content>.intro>p{ margin-bottom: 40px; font-size: 1.6rem; color: #676767; line-height: 3.2rem;}
#about .chairman .photo{ position: relative; width: 40%; text-align: right;}
#about .chairman .photo>span{position: absolute;z-index: 1; right: 320px;top: 200px; text-align: left; font-size: 1.4rem; color: #676767; transition: all .35s;}
#about .chairman .photo>img{ width: 100%; height: auto; }

#about .culture{margin: 0 auto; padding-bottom: 110px; background: #f2f3f5;}
#about .culture .item{ display: block; float: left; background: #fff; width: 32.66%; margin-right: 1%; box-sizing: border-box;padding: 35px; text-align: left; position: relative;}
#about .culture .item:nth-child(3n){margin-right: 0;}
#about .culture .item>.ico{text-align: left;}
#about .culture .item>.box{ position: relative; padding: 25px 0;}
#about .culture .item>.box>.title{font-size: 2.8rem;font-weight: bold; color: #002fa7;}
#about .culture .item>.box>.text{ padding-top: 16px; font-size: 2.2rem; color: #676767; height: 65px; line-height: 3rem;}
#about .culture .item>.line{content: '';width: 100%;height: 10px;position: absolute;right: 0;bottom: 0;z-index: 2; background: #002fa7;  background: linear-gradient(to right, #4f8ef9, #002fa7);}
#about .culture .item:hover .line{animation:lefttoright 1000ms ease-in-out 1 forwards;}


#about .strength{margin: 0 auto; padding: 100px 0;}
#about .strength .title{display: block;}
#about .strength .title>h3{ display: block; position: relative; padding-bottom: 18px; font-size: 3.2rem; font-weight: bold; color: #000;}
#about .strength .title>h3:after{position: absolute;z-index: 1; left: 0; bottom: 0;width: 40px;height: 4px; background: #002fa7; content: '';}
#about .strength .title>p{ display: block; padding-top: 10px; font-size: 1.8rem; color: #999;}
#about .strength .topping{margin:  0 auto; padding: 35px 0;}
#about .strength .topping>.img{width: 50%;text-align: left;overflow: hidden;}
#about .strength .topping>.img>span{display: block; max-height:  410px;overflow: hidden; transition: all .35s;}
#about .strength .topping>.box{ width: 50%; text-align: left; box-sizing: border-box; padding: 50px 70px;}
#about .strength .topping>.box>h3{display: block; font-size: 3rem; font-weight: 500; color: #000;}
#about .strength .topping>.box>p{ display: block;padding-top: 20px; font-size: 1.6rem; color: #676767; line-height: 3rem;}
#about .strength .topping:hover .box>h3{ color: #002fa7;}
#about .strength .topping:hover .img>span{transform: scale(1.06);}
#about .strength .lists{ margin: 0 auto;}
#about .strength .lists .swiper-slide>.img{overflow: hidden;}
#about .strength .lists .swiper-slide>.img>img{transition: all .8s;}
#about .strength .lists .swiper-slide>.box{text-align: left; box-sizing: border-box; padding: 35px 15px; transition: all .35s;}
#about .strength .lists .swiper-slide>.box>h3{display: block; font-size: 3rem; font-weight: 500; color: #000; transition: all .35s;}
#about .strength .lists .swiper-slide>.box>p{ display: block;padding-top: 20px; font-size: 1.6rem; color: #676767; line-height: 3rem; transition: all .35s;}
#about .strength .lists .swiper-slide:hover .img>img{transform: scale(1.06);}
#about .strength .lists .swiper-slide:hover .box{ }
#about .strength .lists .swiper-slide:hover .box>h3{color: #002fa7;}
#about .strength .lists .swiper-pagination-bullet{ background: #002fa7!important; transition: all .35s;}
#about .strength .lists .swiper-pagination-bullet-active{width: 30px; border-radius: 10px; }

#about .honor{margin: 0 auto; padding: 110px 0; background: url("../img/honor_bg.jpg") no-repeat; background-position: 0 0; background-size: cover; }
#about .honor .content{width: 100%;text-align: center; box-sizing: border-box;padding: 70px 0;}
#about .honor .content>.title{font-size: 3rem; color: #fff;}
#about .honor .content>.text{ width: 80%; max-width: 900px; margin:  0 auto; font-size: 1.6rem; line-height: 3rem; color: #fff; padding-top: 20px;}
#about .honor .photo{ position: relative; width: 100%;text-align: center; padding-bottom: 20px;}
#about .honor .photo .prev{ position: absolute;z-index: 10; left:50px; top: 50%;transform: translateY(-50%); width: 38px; height: 74px; background: url("../img/arrow_prev.png") no-repeat; background-size: cover;opacity: .5; cursor: pointer;}
#about .honor .photo .next{ position: absolute;z-index: 10; right: 50px; top: 50%;transform: translateY(-50%); width: 38px; height: 74px; background: url("../img/arrow_next.png") no-repeat; background-size: cover; opacity: .5;  cursor: pointer;}
#about .honor .photo .swiper{ position: relative; width: 80%;margin: 0 auto;}
#about .honor .photo .swiper-slide img{display:block;}
#about .honor .photo .swiper-pagination{ display: none; position: relative!important; bottom: 0; padding-top: 20px;}
#about .honor .photo .swiper-pagination .swiper-pagination-bullet{ width: 8px; height: 8px; background: #fff!important;opacity: 1!important; }
#about .honor .photo .swiper-pagination .swiper-pagination-bullet-active{ width: 30px; border-radius: 30px; background: #002fa7!important;}



#about .marketing{margin: 0 auto; padding: 170px 0;}
#about .marketing .wrap{position: relative;}
#about .marketing .content{ position: relative;z-index: 60; width: 44%;text-align: left;}
#about .marketing .content>.title{font-size: 3rem; color: #000;}
#about .marketing .content>.text{font-size: 1.6rem; line-height: 3rem; color: #676767; padding-top: 20px;}
#about .marketing .content>.statistics>.row{ position: relative; display:block; margin-top: 100px; }
#about .marketing .content>.statistics>.row>.num{ display: block;}
#about .marketing .content>.statistics>.row>.num>span{ display: inline-block;  font-size:10rem; font-family: 'Anton', sans-serif; font-weight: 100; color: #002fa7;}
#about .marketing .content>.statistics>.row>.num>sup{ position: relative; margin-left: 5px; top: -60px; font-size:6rem; font-family: 'Do Hyeon', sans-serif; font-weight: 200; color: #002fa7;}
#about .marketing .content>.statistics>.row>.tit{font-size: 1.8rem; color: #676767;}
#about .marketing .map{position: relative;z-index: 1; margin-top: -640px;}
#about .marketing .yun1 { display: none; width: 257px;height: 109px;position: absolute;left: 60%;top: 26%;z-index: 30;background: url('../img/yun1.png') center no-repeat;background-size: 100% auto;pointer-events: none;animation: fudong1 90000ms ease infinite;opacity: 0;}
#about .marketing .yun2 { display: none; width: 391px;height: 134px;position: absolute;left: 80%;top: 45%;z-index: 30;background: url('../img/yun2.png') center no-repeat;background-size: 100% auto;pointer-events: none;animation: fudong2 40000ms ease infinite;opacity: 0;}
#about .marketing .yun3 { display: none; width: 480px;height: 150px;position: absolute;left: 30%;top: 60%;z-index: 30;background: url('../img/yun3.png') center no-repeat;background-size: 100% auto;pointer-events: none;animation: fudong3 80000ms ease infinite;opacity: 0;}


#about .partners{margin: 0 auto; padding: 80px 0; background: #f2f3f5;}
#about .partners .title{font-size: 3rem; color: #000;}
#about .partners .lists{margin:  0 auto; padding: 35px 0;}
#about .partners .lists>.row{display: inline-flex; justify-content: center;align-items: center; float: left; width: 19.2%; margin-right: 1%; margin-bottom: 1%; background: #fff;transition: all .35s;}
#about .partners .lists>.row:nth-child(5n){margin-right: 0;}
#about .partners .lists>.row>img{width: 100%;height: auto;}
#about .partners .lists>.row:hover{box-shadow: 0 0 16px rgba(0,0,0,.1);}
#about .partners .lists>.more{margin-right: 0!important;}



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

    #about .profile .content{ width: 60%;}

    #about .chairman .photo>span{top: 180px; font-size: 1.3rem;}



}

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

    #about .culture .item>.box>.text{ font-size: 2rem; line-height: 2.8rem;}

    #about .chairman .photo>span{ right: 280px; top: 160px;}



}

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


    #about .profile .title>h3{ font-size: 2.8rem;}
    #about .profile .title>p{ font-size: 1.6rem;}
    #about .profile .content{ width: 65%;}
    #about .profile .content>.intro>.theme{font-size: 2.8rem;}
    #about .profile .content>.intro>.text{ font-size: 1.5rem; line-height: 2.8rem;}
    #about .profile .content>.standard>.theme{font-size: 2.8rem;}
    #about .profile .content>.standard>.box>.row{font-size: 1.5rem; }


    #about .chairman .content>.title>h3{ font-size: 2.8rem; }
    #about .chairman .content>.title>p{ font-size: 1.6rem;}
    #about .chairman .content>.intro>p{ font-size: 1.5rem; line-height: 2.8rem;}
    #about .chairman .photo>span{ right: 260px; top: 150px;}

    #about .culture .item>.box>.title{font-size: 2.4rem;}

    #about .strength .title>h3{ font-size: 2.8rem; }
    #about .strength .title>p{ font-size: 1.6rem;}
    #about .strength .topping>.box>h3{ font-size: 2.6rem}
    #about .strength .topping>.box>p{ font-size: 1.5rem; line-height: 2.6rem;}
    #about .strength .lists .swiper-slide>.box>h3{ font-size: 2.6rem}
    #about .strength .lists .swiper-slide>.box>p{ font-size: 1.5rem;  line-height: 2.6rem;}




    #about .honor .content>.title{font-size: 2.4rem;}
    #about .honor .content>.text{font-size: 1.5rem; line-height: 2.6rem;}




    #about .marketing .content>.title{font-size: 2.4rem;}
    #about .marketing .content>.text{font-size: 1.5rem; line-height: 2.6rem;}
    #about .marketing .content>.statistics>.row>.num>span{ font-size:8rem;}
    #about .marketing .content>.statistics>.row>.num>sup{ font-size:5rem;}

    #about .partners .title{font-size: 2.4rem;}


}


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


    #about .profile .content>.intro>.theme{font-size: 2.6rem;}
    #about .profile .content>.standard>.theme{font-size: 2.6rem;}


    #about .chairman .photo>span{ right: 240px;}

    #about .culture .item>.box>.text{ font-size: 1.7rem; height: 40px; line-height: 2.2rem;}

    #about .strength .lists .swiper-slide>.box>h3 { font-size: 2.2rem; }


    #about .honor .photo .prev{ left:20px;}
    #about .honor .photo .next{ right: 20px;}




}


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

    #about .chairman .photo>span{ right: 220px; top: 120px;}

}


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

    #about .profile .title{ width: 100%;float: none;}
    #about .profile .content{ width: 100%; float: none; padding-top: 40px;}


    #about .chairman .content{ width: 100%;float: none;}
    #about .chairman .photo{ width: 100%; float: none; text-align: center;}
    #about .chairman .photo>span{ right: auto; left: 200px; top: 240px;}
    #about .chairman .photo>img{width: auto;}


    #about .culture .item>.box>.title {font-size: 2rem; }
    #about .culture .item>.box>.text{ font-size: 1.5rem;  line-height: 2rem;}


    #about .marketing .content{ width: 100%; float: none;}
    #about .marketing .content>.statistics>.row{ display:inline-block; margin-top: 40px; margin-right: 60px; }
    #about .marketing .map{ float: none; margin-top: 60px;}


    #about .partners .lists>.row{width: 24.25%; margin-right: 1%;}
    #about .partners .lists>.row:nth-child(5n){margin-right: 1%;}
    #about .partners .lists>.row:nth-child(4n){margin-right: 0;}



}

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

    #about .culture .item{ float: none; width: 100%; margin-right: 0; margin-bottom: 15px; }
    #about .culture .item>.ico{ float: left;}
    #about .culture .item>.box{float: left; padding:0 0 0 30px;}
    #about .culture .item>.box>.text { padding-top: 10px;}

}

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

    #about .profile {padding: 80px 0;}

    #about .chairman {padding: 80px 0 60px 0; }
    #about .chairman .photo>span{ left: 100px;}

    #about .chairman .content>.intro {padding-left: 0;}
    #about .chairman .content>.intro:after{left: -30px; top:-30px;font-size: 5rem;}

    #about .culture { padding-bottom: 80px; }


    #about .strength{padding: 80px 0;}
    #about .strength .topping>.img{width: 100%; float: none;}
    #about .strength .topping>.img>span{display: block; max-height:  410px;overflow: hidden;}
    #about .strength .topping>.box{ width: 100%; float: none; padding: 30px 10px;}

    #about .honor{padding: 80px 0;}
    #about .honor .content { padding-top:0;}
    #about .honor .content>.text { width: 100%; }
    #about .honor .photo .prev{ left:0; width: 24px; height: 47px;}
    #about .honor .photo .next{ right: 0; width: 24px; height: 47px;}

    #about .marketing { padding: 80px 0; }
    #about .marketing .content>.statistics>.row>.num>span{ font-size:6.5rem;}
    #about .marketing .content>.statistics>.row>.num>sup {top: -40px; font-size: 4rem; }


    #about .partners .lists>.row{width:32.66%;}
    #about .partners .lists>.row:nth-child(4n){margin-right: 1%;}
    #about .partners .lists>.row:nth-child(3n){margin-right: 0;}


}

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

    #about .chairman .photo>span{ left: 40px; top: 100px;}

}


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


    #about .profile .title>h3{ font-size: 2rem; padding-bottom: 10px;}
    #about .profile .title>p{ font-size: 1.4rem;padding-top: 5px;}
    #about .profile .content>.intro>.theme{font-size: 2rem;}
    #about .profile .content>.intro>.text{ font-size: 1.4rem; line-height: 2.4rem;}
    #about .profile .content>.standard>.theme{font-size: 2rem;}
    #about .profile .content>.standard>.box>.row{font-size: 1.4rem; line-height: 2.4rem; }


    #about .chairman .content>.title>h3 {font-size: 2rem; padding-bottom: 10px;}
    #about .chairman .content>.title>p{ font-size: 1.4rem;padding-top: 5px;}
    #about .chairman .content>.intro>p { margin-bottom: 20px; font-size: 1.4rem; line-height: 2.4rem; }
    #about .chairman .photo>span{ left: 0; font-size: 1.2rem;}

    #about .culture .item>.ico>img { width: 70px; height: auto;}
    #about .culture .item>.box{ width: 70%;}
    #about .culture .item>.box>.text {font-size: 1.6rem; height: auto; line-height: 2rem;}


    #about .strength .title>h3 { font-size: 2rem;padding-bottom: 10px;}
    #about .strength .title>p{ font-size: 1.4rem;padding-top: 5px;}
    #about .strength .topping>.box>h3 {font-size: 2rem;}
    #about .strength .topping>.box>p{padding-top: 10px;}
    #about .strength .lists .swiper-slide>.box>h3 {font-size: 2rem;}
    #about .strength .lists .swiper-slide>.box>p { padding-top: 10px; font-size: 1.4rem; line-height: 2.4rem;}

    #about .honor .content { padding-bottom: 40px; }
    #about .honor .content>.text { font-size: 1.4rem; line-height: 2.4rem;}
    #about .honor .photo{padding-bottom: 0;}
    #about .honor .photo .swiper {width: 76%; }

    #about .marketing .content>.text { font-size: 1.4rem;line-height: 2.4rem;}
    #about .marketing .content>.statistics>.row {margin-right: 30px; }
    #about .marketing .content>.statistics>.row>.num>span {font-size: 6rem;}
    #about .marketing .content>.statistics>.row>.num>sup { top: -30px;}
    #about .marketing .content>.statistics>.row>.tit {font-size: 1.6rem; }

    #about .partners .lists { padding: 20px 0; }
}


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


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

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

    #about .culture { padding-bottom: 50px; }
    #about .culture .item { padding: 25px; }
    #about .culture .item>.ico>img { width: 60px;}
    #about .culture .item>.box{ width: 75%; padding-left: 20px;}
    #about .culture .item>.box>.text { font-size: 1.4rem;}


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

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


    #about .marketing { padding: 50px 0; }
    #about .marketing .content>.statistics>.row {margin-right: 20px; }
    #about .marketing .content>.statistics>.row>.num>span {font-size: 5rem;}
    #about .marketing .content>.statistics>.row>.num>sup { top: -20px;}




}











@keyframes lefttoright{ 0%{width: 100%;right: 0;} 50%{width: 0;right: 0;} 100%{width: 100%;left: 0;}}
@keyframes fudong1 {0% {left: 0;opacity: 0;} 10% {left:10%;;opacity: 1;}50% {left:50%;;opacity: 1;} 90% {left: 90%;opacity: 1;}100% {left: 100%;opacity: 0;} }
@keyframes fudong2 {0% {left: 30%;opacity: 0;} 10% {left:30%;;opacity: 1;}50% {left:50%;;opacity: 1;} 90% {left: 90%;opacity: 1;}100% {left: 100%;opacity: 0;} }
@keyframes fudong3 {0% {left: 40%;opacity: 0;} 10% {left:50%;;opacity: 1;}50% {left:60%;;opacity: 1;} 90% {left: 90%;opacity: 1;}100% {left: 100%;opacity: 0;} }