@charset "utf-8";

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


#banner{ width: 100%; height: 100%;}
#banner .swiper{ position: relative;z-index: 80; height: 100%;}
#banner .swiper-wrapper{z-index: inherit;}
#banner .swiper-slide{width: 100%;height:100%;overflow: hidden;position: relative;background-position: center top;background-size: cover;}
#banner .swiper-slide .video_mask{ display: none; position: absolute;z-index: 60; left: 0; top: 0; width: 100%;height: 100%; background: rgba(0,0,0,.8);}
#banner .swiper-slide .video_mask:after{position: absolute; z-index: 50; left: 50%; top:50%; color: #fff; transform: translate(-50%,-50%); font-family: iconfont; font-weight: 100; font-size: 6rem; content: '\e651'; transition: all .35s;}
#banner .swiper-slide .banner_video{width: 100%;height:auto;position: absolute;left: 50%;top:50%; transform: translate(-50%,-50%); z-index: 0;}
#banner .swiper-slide .mob{display: none;}
#banner .swiper-pagination{ z-index: 80; bottom: 60px;}
#banner .swiper-pagination-bullet{width:10px;height:10px;background-color:#fff;opacity: 1; transition: all .3s;}
#banner .swiper-pagination-bullet-active{ background: #002fa7; width: 30px; border-radius: 10px;}
#banner .info{position: absolute;z-index: 560; left: 50%; top: 46%; margin-left: -30%; width:60%; text-align: center;}
#banner .info>h2{font-size: 5rem; font-weight: 700; color: rgba(255,255,255,1);}
#banner .info>h3{ width: 60%; margin: 0 auto; font-size: 2rem; line-height: 3.6rem; font-weight: normal; padding: 10px 0; color: rgba(255,255,255,.8);}




#main{margin: 0 auto; padding: 60px 0;}
#main .title{ text-align: center; margin: 0 auto; padding: 20px 0;}
#main .title>h3{display: block; margin: 0 auto; font-size: 3.6rem; font-weight: 400; color: #000;}
#main .title>p{ display: block; margin: 0 auto; font-size: 1.4rem; color: #a5a5a5; text-transform: uppercase;}
#main .more{text-align: center; margin:  0 auto;}
#main .more>a{display: inline-block; transition: all .5s;}
#main .more>a>span{display: block; width: 42px;height: 42px; background: url("../img/ico_more.png") no-repeat; background-position: 0 0;}
#main .more>a:hover{ transform: rotate(180deg);}


#main .product{ margin: 0 auto; padding: 65px 0;}
#main .product>.container{margin: 0 auto;}
#main .product>.container .display{box-sizing: border-box;}
#main .product>.container .display .navs{ position: relative; width:100%; margin:0 auto; border-top: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8;}
#main .product>.container .display .navs>.swiper{ position: relative; margin:0 auto; text-align:center; overflow: hidden;}
#main .product>.container .display .navs>.swiper .swiper-slide{ position: relative; padding: 30px 0; text-align: center; box-sizing: border-box;}
#main .product>.container .display .navs>.swiper .swiper-slide:after{position: absolute;z-index: 1; left: 0;bottom: 0; width: 0; height: 2px; background: #002fa7; content: '';transition: all .35s;}
#main .product>.container .display .navs>.swiper .swiper-slide span{display: block; position: relative; width: 46px; height: 46px;overflow: hidden; text-align: center; margin: 0 auto;}
#main .product>.container .display .navs>.swiper .swiper-slide span img{ width: 100%; max-width:46px; height:auto; display:block; margin: 0 auto; box-sizing:border-box; filter: grayscale(100%); transition: all .35s;}
#main .product>.container .display .navs>.swiper .swiper-slide p{ padding-top: 10px; font-size: 1.6rem; color: #666;  transition: all .35s;}
#main .product>.container .display .navs>.swiper .swiper-slide:hover img{filter: grayscale(0);}
#main .product>.container .display .navs>.swiper .swiper-slide:hover p{color: #002fa7;}
#main .product>.container .display .navs>.swiper .swiper-slide-thumb-active span>img{filter: grayscale(0);opacity: 1;}
#main .product>.container .display .navs>.swiper .swiper-slide-thumb-active p{ color: #002fa7;}
#main .product>.container .display .navs>.swiper .swiper-slide-thumb-active:after{width: 100%;}
#main .product>.container .display .navs .arrow-prev, #main .product>.container .display .navs .arrow-next{ display: none; position:absolute; z-index:99; left:18%; top:50%; width:100px; height:100px; line-height: 100px; transform: translateY(-50%); cursor: pointer; text-align: center; transition: all .35s; }
#main .product>.container .display .navs .arrow-next{ left: auto; right: 18%; }
#main .product>.container .display .navs .arrow-prev>i, #main .product>.container .display .navs .arrow-next>i{font-size: 4rem; color: #999;}
#main .product>.container .display .shows{ position:relative; display: block; margin:45px auto;  box-sizing: border-box; }
#main .product>.container .display .shows .swiper{width:100%; height:100%; margin: 0 auto;box-sizing: border-box;overflow: hidden; }
#main .product>.container .display .shows .swiper-slide{ text-align: center; margin: 0 auto;}
#main .product>.container .display .shows .swiper-slide>a{display: block;position: relative;overflow: hidden;}
#main .product>.container .display .shows .swiper-slide>a:before{position: absolute;z-index: 10; left: 50%; top: 50%; width: 42px;height: 42px; opacity: 0; transform: translate(-50%,-40%); background: url("../img/ico_more.png") no-repeat; background-position: 0 0; content: ''; transition: all .6s;}
#main .product>.container .display .shows .swiper-slide>a:after{position: absolute;z-index: 1; left: 0;top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.3); opacity: 0; content: '';transition: all .35s;}
#main .product>.container .display .shows .swiper-slide>a>img{object-fit: cover; object-position:center; aspect-ratio:2; transition: all .8s;}
#main .product>.container .display .shows .swiper-slide>a:hover:before{opacity: 1; transform: translate(-50%,-50%) rotate(180deg);}
#main .product>.container .display .shows .swiper-slide>a:hover:after{opacity: 1;}
#main .product>.container .display .shows .swiper-slide>a:hover img{transform: scale(1.1);}
#main .product>.container .display .shows .swiper-pagination{ display: none; text-align:center; position:relative; bottom:-30px;}
#main .product>.container .display .shows .swiper-pagination .swiper-pagination-bullet { position: relative; width: 8px;height: 8px; margin:0 8px; transition: all .35s;}
#main .product>.container .display .shows .swiper-pagination .swiper-pagination-bullet:after{position: absolute;z-index: 1; left: 50%;top: 50%;width: 8px;height: 8px; border: 1px solid #000; border-radius: 100%; transform: translate(-50%,-50%); content: ''; transition: all .35s;}
#main .product>.container .display .shows .swiper-pagination .swiper-pagination-bullet-active{background:#002fa7;}
#main .product>.container .display .shows .swiper-pagination .swiper-pagination-bullet-active:after{width: 16px;height: 16px; border-color: #002fa7;}


#main .about{margin: 0 auto; height: 800px; background: url("../img/main_about_bg.jpg") no-repeat; background-position: 0 50%; background-attachment: fixed;overflow: hidden;}
#main .about>.container{margin: 0 auto; padding: 100px 0;}
#main .about>.container .title>p{font-size: 4.2rem; color: #fff;}
#main .about>.container .shares{ margin: 0 auto; padding: 10px 0; text-align: center;}
#main .about>.container .shares>span{display: inline-block; padding: 5px 30px; background: #002fa7; border-radius: 50px; font-size:2rem; color: #fff;}
#main .about>.container .intro{text-align: center;margin: 0 auto; padding: 30px 0;}
#main .about>.container .intro>p{ display: block; margin-bottom: 5px; font-size: 2rem; color: #fff;}
#main .about>.container .statistics{display: flex; margin: 0 auto; justify-content: center; align-items: center; padding: 80px 0;}
#main .about>.container .statistics>.row{ position: relative; display: inline-block; width: 25%; text-align: center;}
#main .about>.container .statistics>.row>.num{ display: block;}
#main .about>.container .statistics>.row>.num>span{ position: relative; display: inline-block; height: 65px; line-height: 65px; letter-spacing: 2px; font-size:6.5rem; font-family: 'Anton', sans-serif; font-weight: 100; color: #fff;}
#main .about>.container .statistics>.row>.num>span:after{position: absolute;z-index: 10; right: -22px; top:-33px;font-size: 3.6rem; font-family: 'Do Hyeon', sans-serif; font-weight: 200; color: #fff; content: '+';}
#main .about>.container .statistics>.row>.num>sup{ display: none; position: relative; margin-left: 5px; top: -45px; font-size: 3.6rem; font-family: 'Do Hyeon', sans-serif; font-weight: 200; color: #fff;}
#main .about>.container .statistics>.row>.tit{font-size: 1.8rem; color: #fff;}
#main .about>.container .more>a>span{ background-position: 0 0;}




#main .service{margin: 0 auto; box-sizing: border-box;padding: 70px 0;  background: url("../img/main_service_bg.jpg") no-repeat; background-position: 0 0; background-size: cover; overflow: hidden;}
#main .service>.container{margin: 0 auto; padding: 10px 0;}
#main .service>.container .intro{text-align: center;font-size: 1.8rem; color: #000;}
#main .service>.container .items{ display: flex; padding: 70px;  margin: 0 auto; justify-content: center; align-items: center;}
#main .service>.container .items>.row{ position: relative; display: inline-block; width: 25%; text-align: center;}
#main .service>.container .items>.row>a{display: block;transition: all .35s;}
#main .service>.container .items>.row>a span{ display: block;margin: 0 auto; filter: grayscale(100%); transition: all .35s;}
#main .service>.container .items>.row>a p{display: block; padding-top: 20px; font-size: 2rem; color: #000;transition: all .35s;}
#main .service>.container .items>.row>a:hover{transform: translateY(-6px);}
#main .service>.container .items>.row>a:hover span{filter: grayscale(0); }
#main .service>.container .items>.row>a:hover p{color: #002fa7;}

#main .news{margin: 0 auto;padding: 80px 0; }
#main .news>.container{margin: 0 auto; padding: 10px 0;}
#main .news>.container .list{margin: 0 auto;}
#main .news>.container .list>.row{display:inline-block; float: left; width: 31.33%; margin-right: 3%; }
#main .news>.container .list>.row:nth-child(3n){margin-right: 0;}
#main .news>.container .list>.row>a{display: block;}
#main .news>.container .list>.row>a>.img{overflow: hidden;}
#main .news>.container .list>.row>a>.img img{width: 100%;height: auto; transition: all .8s;}
#main .news>.container .list>.row>a>.box{ position: relative; text-align: left;padding: 10px 0; border-bottom: 2px solid #ebeced;}
#main .news>.container .list>.row>a>.box:after{position: absolute;z-index: 23; left: 0; bottom: -2px; width: 0;height: 2px;background: #002fa7; content: '';transition: all .35s;}
#main .news>.container .list>.row>a>.box:before{position: absolute;z-index: 10; right: 0;bottom: 10px; width: 16px; height: 16px; opacity: 0; background: url("../img/ico_plus.png") no-repeat; content: '';transition: all .35s;}
#main .news>.container .list>.row>a>.box>.date{ font-size: 1.4rem; color: #888;transition: all .35s;}
#main .news>.container .list>.row>a>.box>.title{ text-align: left; font-size: 1.7rem; color: #000; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;transition: all .35s;}
#main .news>.container .list>.row>a>.box>.text{ margin: 10px auto 30px auto; font-size: 1.4rem; color: #888; line-height: 2.4rem;  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden;transition: all .35s;}
#main .news>.container .list>.row>a>.box>.view{display: block;  text-align: left;}
#main .news>.container .list>.row>a>.box>.view>span{display: inline-block;font-size: 1.4rem; color: #888; transition: all .35s;}
#main .news>.container .list>.row>a:hover .box:after{ width: 100%; }
#main .news>.container .list>.row>a:hover .box:before{transform: rotate(180deg); opacity: 1;}
#main .news>.container .list>.row>a:hover .img>img{transform: scale(1.08);}
#main .news>.container .list>.row>a:hover .box>.date{color: #002fa7;}
#main .news>.container .list>.row>a:hover .box>.title{color: #002fa7;}
#main .news>.container .list>.row>a:hover .box>.text{color: #002fa7;}
#main .news>.container .list>.row>a:hover .box>.view>span{color: #002fa7;}
#main .news>.container .more{padding-top: 50px;}
#main .news>.container .more>a>span{ background-position: 0 -42px;}
#main .news>.container .more>a:hover span{background-position: 0 -84px;}




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


    #main .title>h3 {font-size: 3rem;}
    #main .title>p { font-size: 1.3rem; }

    #main .product { padding: 40px 0;}

    #main .about>.container .title>p {font-size: 3.6rem;}
    #main .about>.container .intro>p { font-size: 1.8rem; }



}

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

    #main .about>.container .statistics>.row>.num>span {  height: 56px; line-height: 56px; font-size: 5.6rem;}
    #main .about>.container .statistics>.row>.tit { font-size: 1.6rem;}
    #main .about>.container .statistics>.row>.num>sup {top: -30px;}

    #main .service>.container .items { padding: 70px 40px; }



}


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

    #banner{ height: 70%;}
    /*#banner .info{display: none;}*/
    /*#banner .swiper-slide .banner_video{display: none;}*/

    #banner .info>h2{font-size: 4.6rem;}
    #banner .info>h3{ font-size: 1.6rem; line-height:2.8rem;}
    #banner .swiper-slide .video_mask{display: inline-block;}
    #banner .swiper-slide .banner_video{width: auto;height:100%;}

    #main .title>h3 {font-size: 2.8rem;}

    #main .about>.container .title>p {font-size: 3rem;}
    #main .about>.container .statistics>.row>.num>sup {top: -24px;}

    #main .news>.container .list>.row>a>.box>.title{font-size: 1.6rem;}
    #foot .main>.intro>.logo{display: none;}
}

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



    #banner{ height: 100%;}

    #banner .info>h2{font-size: 4rem;}
    #banner .info>h3{  width: 80%; }
    #banner .swiper-slide{background: #000; background-image: none!important; text-align: center;}
    #banner .swiper-slide .mob{display: inline-block; width: 100%;height: auto;}


    #main .about>.container .statistics { width: 100%;}
    #main .about>.container .statistics>.row>.num>span {  font-size: 4.6rem;}
    #main .about>.container .statistics>.row>.num>span:after{top:-22px;}

    #main .service{padding: 50px 0;}
    #main .service>.container .items { padding: 70px 0; }
    #main .service>.container .items>.row>a p {font-size: 1.8rem;}



    #main .news{padding: 50px 0 0 0;}
    #main .news>.container .list>.row{display:block; float: none; width: 100%; margin-right: 0; margin-bottom: 15px; }


}

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


    #main .about>.container .statistics{display: block; padding: 30px 0;}
    #main .about>.container .statistics>.row{ float: left; width: 50%; margin-bottom: 30px;}

}



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

    /*#banner .swiper-slide .mob{ width: auto;height: 100%;}*/
    #banner .info{top: 40%; margin-left: -40%; width:80%; text-align: center;}
    #banner .info>h2{font-size: 3rem;}
    #banner .info>h3{  font-size: 1.4rem; line-height:2.4rem;}
    #banner .swiper-pagination { bottom: 20px; }
    #banner .swiper-pagination-bullet{width:6px;height:6px;}
    #banner .swiper-pagination-bullet-active{ width: 20px; border-radius: 6px;}


    #main .title>h3 {font-size: 2.4rem;}
    #main .title>p { font-size: 1.2rem;}


    #main .about>.container .title>p { font-size: 2.4rem;}
    #main .about>.container .shares { padding: 0; }
    #main .about>.container .intro>p {font-size: 1.5rem;}

    #main .news>.container .list>.row {margin-bottom: 30px;}
    #main .news>.container .list>.row>a>.box>.title{padding:10px 0 0 0;}
    #main .news>.container .list>.row>a>.box>.text {margin: 10px auto;}

    #main .service>.container .intro {font-size: 1.5rem; }
    #main .service>.container .items{display: block;}
    #main .service>.container .items>.row { width: 50%; float: left; margin-bottom: 50px;}
    #main .service>.container .items>.row>a p {padding-top: 10px;}

    #main .news>.container .more {padding: 0 0 30px 0; }

}

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

    /*#banner{ height: 90%;}*/
    #banner .info>h2{font-size: 2.6rem;}
    #banner .info>h3{font-size: 1.2rem; line-height:2rem;}

    #main {padding: 0;}
    #main .service>.container .items>.row>a p {font-size: 1.6rem; }


}