@charset "UTF-8";
*{transition:all 0.3s ease-in;}
a{color: #262626;text-decoration: none;}
a:hover{text-decoration: none;}
html,body{font-family:"MicrosoftJhengHei","Microsoft YaHei";color: #262626;width: 100%;overflow-x: hidden;}
header,section,footer{width:100%;position: relative;}
.btn-yi.btn-outline-primary{color: #286bc1;border-color: #286bc1;border-radius: 0;padding: .625rem 2rem;font-size: 1rem;}
.btn-yi.btn-outline-primary:hover{background-color: #286bc1;color: #fff;}
.area .title{width: 100%;text-align: center;font-size: 1.5em;position: relative;display: flex;justify-content: center;}
.area .title::after{content: '';width: 10rem;border-bottom: 1px solid #3959ac;position: absolute; bottom: -.5rem;}
.area .title::before{content: '';height: .5rem;width: 1rem;background-color:#fff;position: absolute; bottom: -1.05rem;transform: skewX(-45deg); z-index: 3;border-right: 1px solid #fff;border-top: 1px solid #fff;border-bottom: 1px solid #fff;border-left: 1px solid #3959ac;box-sizing: content-box;}
.card{border-radius: 0;border: none;}

.header{width: 100%;}
.header{position: relative;height: 50px;}
.header .container{height: 50px;display: flex;align-items: center;}
.header .container .logo img{max-width: 160px;}
.header .nav-area{height: 50px;position: absolute;right: 0;top: 0;display: flex;align-items: center;}
.header .nav-area .nav{flex: 1;display: none;top: 50px;}
.header .nav-area .nav .nav-link{padding: .5rem 1.5rem;display: flex;align-items: center;position: relative;}
.header .nav-area .nav .nav-item:last-child .nav-link::before{content: none;}
.header .nav-area .nav .nav-link::before{content: "";display: inline-block;height: 20px;width: 1px;background-color: #e6e6e6;position: absolute;right: 0;}
.header .nav-area .nav .nav-item .dropdown-menu{border: none;margin-top: .5rem;border-radius: 0;}
.header .nav-area .nav .nav-item .dropdown-menu a{padding: .5rem 1.5rem;}
.en_us .header .container .logo img{max-width: 260px;}
.en_us .header .nav-area .language .dropdown-menu .dropdown-item {padding: .25rem 1.7rem;}
.header .nav-area .nav .nav-item.active .nav-link{color: #003978;}
.header .nav-area .language{ border-left: 1px solid #e6e6e6;}
.header .nav-area .language .btn{height: 50px;line-height:50px;padding: 0 20px; border: none;border-right: 1px solid #e6e6e6 !important;background: none;border-radius: 0;color: #003978;}
.header .nav-area .language .dropdown-menu{border: none;border-radius: 0;margin: 0;transition:all 0s ease-in;transform: translate3d(0, 50px, 0px) !important;box-shadow: 0 5px 5px rgb(0 0 0 / 10%);width: auto;min-width: auto;}
.header .nav-area .language .btn:focus{box-shadow:none!important;border: 0;}
.header .nav-area .language .menu.btn{border-right: none;font-size: 1.5rem;}
.header .nav-area .language .close-menu.btn{display: none;}
.indexBanner .banner-top .swiper-slide{position: relative;}
.indexBanner .banner-top .swiper-slide .banner-text{position: absolute;color: #fff;font-weight: bold;display: flex;left: 0;top: 0;right: 0;bottom: 0;font-size: 16px;align-items: flex-end;}
.indexBanner .banner-top .swiper-slide .banner-text .container{display: block;}
.indexBanner .banner-top .swiper-slide .banner-text .container .text{border-bottom: 1px solid #fff;display: inline-block;padding-right: 10%;}
.indexBanner .container{display: flex;justify-content: flex-end;}
.indexBanner .banner-thumbs{position: relative;z-index: 9; transform: translate3d(0px, -50%, 0px);max-width: 400px;margin: 0 !important;border: 5px solid #fff;box-shadow: 0 0 5px rgb(0 0 0 / 15%);overflow: visible;}
.indexBanner .banner-thumbs .swiper-wrapper{display: flex;}
.indexBanner .banner-thumbs .swiper-slide{cursor: pointer;margin: 0 !important;position: relative;flex: 1;}
.indexBanner .banner-thumbs .swiper-slide::before{content: '';position: absolute;height: 100%;width: 100%;top: 0;background-color: rgb(0 0 0 / 60%);}
.indexBanner .banner-thumbs .swiper-slide img{width: 100%;}
.indexBanner .banner-thumbs .swiper-slide-thumb-active::before{background-color: rgb(0 0 0 / 0);}
.indexBanner .banner-thumbs .swiper-slide-thumb-active::after{position: absolute;content: "";height: 5px;width: 1.6rem;top: -5px;left: 50%;margin-left: -.8rem;background-color: #4069b6;z-index: 999;}
.indexBanner .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{background-color: #fff;height: 3px;width: 1.5rem;border-radius: 0;}
.indexBanner .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active{background-color: #286bc1;}
.scroll-down{position: absolute;z-index: 9;writing-mode:vertical-rl;color: #fff;top: 50%;right: 2%;display: flex;align-items: center;white-space: nowrap;font-size: 14px;}
.scroll-down::after{content: '';width: 1px;height: 100px;background-color: #ccc;margin-top: 1rem;animation:linedwon 2s infinite;-webkit-animation:linedwon 2s infinite;}
@keyframes linedwon{
    from {height:0;}
    to {height:100px;}
}

@-webkit-keyframes linedwon{
    from {height:0;}
    to {height:100px;}
}

.product{margin-top: 3rem;}
.product::after{content: '';position: absolute;width: 100%;height: 75%;background-color: #286bc1;right: -10%;top: 35%;z-index: 0;}
.product .container{padding-left: 1.25rem;padding-right: 1.25rem;}
.product .swiper-container .swiper-slide{width: 50%;padding: 1rem 0;}
.product-card.card{height: 100%;background-color: #edefef;margin:0 .325rem;transition:all 0.2s ease;}
.product-card.card:hover{box-shadow: 0 5px 5px rgba(0, 0, 0, .2); transform:translateY(-15px);}
.product-card.card img{width: 100%;}
.product-card.card .card-body{font-size: 1.125rem;padding: 1rem;}
.product-card.card .card-text{font-size: 1rem;color: #6f6f6f;}
.product-card.card .card-footer{background: none;border: none;text-align: right;font-size: .875rem;}
.product-card.card>a{overflow: hidden;}
.product-card.card>a:hover img{transform: scale(1.5);}
.product .product-btn{width: 100%;display: flex;align-items: center;justify-content: center;margin-top: 1rem;position: relative;z-index: 9;}
.product .product-btn span{position: relative;padding: .5rem 1.2rem;display: block;border: 1px solid #fff;top: 0;margin-top: 0;height: auto;width: auto;}
.product .product-btn span.swiper-button-next{left: -1px;}
.product .product-btn span.swiper-button-prev{left: 1px;;}
.product .product-btn span::after{font-size: 1rem;color: #fff;}
.product .product-btn a{color: #fff;display: block;border: 1px solid #fff;padding: .5rem 2rem;}

.about{margin-top: 6rem;}
.about-text .title{display: block;}
.about-text .title::before,.about-text .title::after{content: none;}
.about .container{padding-left: .75rem;padding-right: .75rem;}
.about .container .about-text p{color: #7d7d7d;line-height: 2;}
.en_us .about .container .about-text p{text-align: justify;line-height: 1.8;}
.about .container .about-text .more{display: flex;justify-content: center;}
.about .container .about-img img{width: 100%;}
.about .container img.ys{width: 50%;bottom: 50%;left: 25%;}

.news{margin-top: 3rem;position: relative;}
.news::after{content: '';position: absolute;width: 100%;height: 80%;background-color: #f8f8f8;left: -18%;top: 30%;z-index: 0;}
.news .container{background-color: #fff;box-shadow: 0 0 20px rgb(0 0 0 / 15%);padding: 3rem 1rem;position: relative;z-index: 99;}
.news-list ul{margin: 0;padding: 0;}
.news-list li{display: flex;font-size: 1rem;padding: 1rem 0;border-bottom: 1px solid #d0d0d0;align-items: center;flex-wrap: wrap;}
.news-list li .date{margin-right: .5rem;}
.news-list li .tag{padding: 0 .5rem;background-color: #74a0d1;color: #fff;font-size: .875rem;width: 80px;text-align: center;}
.news-list li .url{padding-top: .5rem;width: 100%;}
.news-list li .more{color: #286bc1;font-size: .825rem;display: none;}

.customer{margin-top: 6rem;}
.customer .row{border-top: 5px solid #f7f8fa;border-bottom: 5px solid #f7f8fa;padding: 1rem 0;}
.customer .swiper-container{width: 90%;}
.customer .swiper-container .swiper-wrapper .swiper-slide{width: 50%;text-align: center;position: relative;}
.customer .swiper-container .swiper-wrapper .swiper-slide::after{content: '';position: absolute;width: 1px;height: 70%;display: block;background-color: #ccc;top: 15%;right: -0.5px;}
.customer .swiper-container .swiper-wrapper .swiper-slide img{max-height: 50px;object-fit: cover;}
.customer .swiper-button-next{right: 0;}
.customer .swiper-button-prev{left: 0;}
.customer .swiper-button-next:hover,.customer .swiper-button-prev:hover{background: rgba(255, 255, 255, .85);}
.customer .swiper-button-next:after,.customer .swiper-button-prev:after{font-size: 1rem;color: #262626;}
.customer .swiper-button-next:hover::after,.customer .swiper-button-prev:hover::after{color: #375582;}
.customer .more{text-align: center;}

.footer{background-color: #183a60;color: #fff;}
.footer p{margin-bottom: .35rem;}
.footer .col-md-7 p{display: flex;}
.footer .col-md-7 p span:nth-child(2){padding: 0 5px;}
.en_us .footer .col-md-7 p span:first-child{width: 60px;}
.footer .subnav{display: flex;flex-wrap: wrap;align-content: center;}
.footer .subnav a{width: 50%;text-decoration: none;padding: .25rem 0;}
/* .zh_hk .footer .subnav a:nth-child(2n){text-align: right;} */
.footer .subnav a:hover{transform: translateX(5px);}
.footer .subnav a::before{content: "-";padding-right: .5rem;}
.copyright{background-color: #0b294a;color: #fff;font-size: .875rem;}
.copyright .row{align-items: center;}
.copyright .subnav a{float: left;}
.copyright .subnav a::after{content: "|";font-size: .825rem;width: 1rem;text-align: center;display: inline-block;}
.copyright .subnav a:last-child:after{content: '';}
.footer a,.copyright a{color: #fff;}

.header.sticky {position: fixed;left: 0;top: 0;right: 0;z-index: 999;animation: sticky 1.2s;box-shadow: 0 5px 5px 0 rgb(0 0 0 / 4%);background-color:#fff}


.pageBanner img{width: 100%;height: 200px;object-fit: cover;}
.pageBanner .banner-text{position: absolute;height: 100%;width: 100%;top: 0;left: 0;}
.pageBanner .banner-text .container{height: 100%;display: flex;color: #fff;flex-direction: column; justify-content: center;}
.pageBanner .banner-text .container .breadcrumb{background: none;color: #fff;padding: 0;text-transform: uppercase;}
.pageBanner .banner-text .container .breadcrumb a{color: #fff;}
.pageBanner .banner-text .container .breadcrumb a::after{content: "/";padding: 0 .5rem;}
.pageBanner .banner-text .container .breadcrumb a:last-child::after{content: none;}
.pageBanner .banner-text .container h1{color: #fff;text-transform: uppercase;}
.area h2.tit{color: #4f8fdf;font-weight: normal;}
.area h2.tit::after{content: "";border-bottom: #d5d5d5 1px solid;display: block;width: 45%;margin: 1.5rem 0;}
.area .area-info,.page-about .about-text{text-align: justify;color: #1e1e1e;}
.area .area-info p{margin-bottom: 0;font-size: 18px;line-height: 2;}
.partner-body .row .col-6 span{display: flex;align-items: center;justify-content: center;height: 120px;}
.partner-body .row span img{max-width: 60%;max-height: 70%;}
.page-about .container .about-img{position: absolute;bottom: -30px;right: 0;width: 50%;z-index: 99;box-shadow: 10px 10px 0 0 #b0d6e6;}
.page-about .container .about-img img{width: 100%;}
.page-about .container .ys{top: -20%;right: 0;width: 50%;z-index: 999;}
.page-about.factory .container h2.tit{text-align: left;}
.page-about.factory .container .row{align-items: center;}
.about-area{width: 40%;text-align: justify;}
.about-area h2.tit::after{width: 100%;}
.about-area p{line-height: 2;}
.since{background-color: #286bc1;color: #fff;}
.since .container{position: relative;}
.since .container::after{content: "";position: absolute;height: 100%;width: 100%;background: url(../images/since-bg.png) right no-repeat;background-size: contain;top: 0;right: 0;}
.since .about-area{padding: 5rem 0;}
.since .about-area h2.tit{color: #fff;}
.about-pic{top: -20px;}
.about-pic .container .row span{display: block;box-shadow: 10px 10px 0 0 #b0d6e6;}
.about-pic .container .row img{width: 100%;}
.page-aim h2.tit::after{content: none;}
.page-aim .aim-img .container{position: relative;}
.page-aim .aim-img .container .ys{position: absolute;top: -20%;left: 20%;width: 60%;}
.page-aim .aim-img img{width: 100%;}
.aim-area{margin-top: 2rem;}
.aim-list .aim-item img{width: 100%;}
.aim-list .aim-item{position: relative;}
.aim-list .aim-item span{position: absolute;display: block;background-color: #286bc1;color: #fff;width: 80%;height: 3rem;line-height: 3rem;padding: 0 1rem;bottom: -1.5rem;right: -.5rem;}
.service-list .row{margin-bottom: -2rem;}
.service-list .row .col-xl-3{margin-bottom: 12rem;}
.service-list .service-card{position: relative;}
.service-list .service-card .service-card-body{overflow: hidden;}
.service-list .service-card .service-card-body img{width: 100%;}
.service-list .service-card .service-card-footer{position: absolute;background-color: #286bc1;color: #fff;width: 80%;left: 10%;top: 80%; padding: 1rem;text-align: center;}
.service-list .service-card .service-card-footer a{color: #fff;display: flex;flex-direction: column;}

.service-list .service-card .service-card-footer h5{font-weight: normal;font-size: 1rem;height: 4rem;display: flex;align-items: center;border-bottom: #fff 1px solid;justify-content: center;}
.service-list .service-card .service-card-footer p{height: 5rem;overflow: hidden;}
.service-list .service-card:hover .service-card-footer{transform: translateY(-15px);}
.service-list .service-card:hover .service-card-body img{transform: scale(1.2);}

.page-news .container{padding:10px 15px;}
.page-news .news-title{border-bottom: #f1f1f1 1px solid;display: flex;align-items: center;flex-wrap: wrap;}
.page-news .news-title h2{padding: 1rem 0;width: 100%;border-bottom: #f1f1f1 1px solid;margin-bottom: 0;}
.page-news .news-title .news-subnav{flex: 1;padding: 1rem 0;width: 100%;}
.page-news .news-title .news-subnav a{display: inline-block;padding: 2px 2rem;}
.page-news .news-title .news-subnav a.active{background-color: #74a0d1;color: #fff;}
.pagination{width: 100%;}
.pagination ul{list-style: none;margin: 0;padding: 0;text-align: center;width: 100%;}
.pagination ul li{display: inline-block;}
.pagination ul li a{display: block;padding:3px 5px;}
.pagination ul li.active a{border-bottom: #286bc1 1px solid;}
.content-topic{padding: 1rem 0;border-bottom: #f1f1f1 1px solid;}
.content-topic h2{font-weight: 400;text-align: justify;}
.content-date{padding: 1rem 0;}
.content-date a{display: inline-block;background-color: #74a0d1;color: #fff;padding: 0 2rem;margin-left: 1rem;}
.content-body{text-align: justify;}

@-webkit-keyframes sticky{
    0%{top:-200px}
    100%{top:0}
}
@keyframes sticky{
    0%{top:-200px}
    100%{top:0}
}
@media screen and (max-width: 1199px){
    .about-area{width: 100%;}
    .page-about .container .about-img{width: 100%;position: relative;}
}
@media screen and (max-width: 991px){
    .header .nav-area .nav{position: fixed;width: 100%;left: 0;background: #fff;padding: 1rem;box-shadow: 0 5px 5px 0 rgb(0 0 0 / 4%);border-top: 1px solid #eee;z-index: 999;}
    .header .nav-area .nav .nav-item{border-bottom: 1px solid #eee;}
    /* .about-area{width: 100%;} */
    /* .page-about .container .about-img{width: 100%;position: relative;} */
    .since .container::after{opacity: .3;}
    .header .nav-area .nav .nav-link::before{content: none;}
    .header .nav-area .nav .nav-item.show{display: flex;flex-direction: column;}
    .header .nav-area .nav .nav-item .dropdown-menu{position: inherit !important;transform: inherit !important;margin-top: 0;padding-top: 0;}
    .header .nav-area .nav .nav-item .dropdown-menu .text-center{text-align: left !important;padding-left: 2rem;}
}
@media screen and (max-width:768px){
    .pageBanner .banner-text .container h1{font-size: 1.8rem !important;}
    .pageBanner .banner-text .container .breadcrumb{white-space: nowrap;}
    .pageBanner .banner-text .container .breadcrumb a{font-size: .875rem;}
    .pageBanner .banner-text .container .breadcrumb a::after{padding: 0 .25rem !important;}
    .area h2.tit{font-size: 1.5rem !important;}
    .area h2.tit::after{width: 100% !important;margin: 1rem 0 !important;}
}
@media screen and (max-width:576px){
    .header .container .logo img{width: 80%;}
    .scroll-down{top: 20%;}
    .pageBanner .banner-text .container h1{font-size: 1.5rem !important;}
    .content-date a{padding: 0 1rem !important;margin-left: .5rem !important;}
}

@media screen and (min-width:576px){
    .indexBanner .banner-top .swiper-slide .banner-text{font-size: 20px;}
    .product .container,.about .container{padding-left: 1rem;padding-right: 1;}
    .customer .swiper-container .swiper-wrapper .swiper-slide{width: 33.33333%;}

}
@media screen and (min-width:768px){
    .scroll-down{top: 70%;}
    .area .title{font-size: 1.5rem;}
    .area .infos{font-size: 1.125rem;}
    .header,.header .container,.header .nav-area{height: 60px;}
    .header .nav-area .nav{top: 60px;}
    .header .nav-area .language .btn{height: 60px;line-height: 60px;}
    .header .nav-area .language .dropdown-menu{transform: translate3d(0, 60px, 0px) !important;}
    .indexBanner .banner-top .swiper-slide .banner-text{font-size: 30px;}
    /* .product,.news,.footer{margin-top: 4rem;} */
    .about,.customer{margin-top: 8rem;}
    .product::after{right: -10%;}
    .product .container .row{margin-top: 3rem !important;}
    .product .container .row .card{margin: 0 .625rem;}
    .product .container,.about .container{padding-left: .625rem;padding-right: .625rem;}
    .news .container{padding:3rem 2rem;}
    .customer .swiper-container .swiper-wrapper .swiper-slide{width: 25%;}
    .footer .subnav a{padding: .5rem 0;}
    .copyright .powerby{text-align: right;}    

    .pageBanner img{width: 100%;height: auto;}
    .partner-body .row .col-6{padding: 2rem 0;}
}
@media screen and (min-width:992px) {
    .area .title{font-size: 1.8rem;}
    .header,.header .container,.header .nav-area{height: 72px;}
    .header .nav-area .language .btn{height: 72px;line-height: 72px;}
    .header .nav-area .language .dropdown-menu{transform: translate3d(0, 72px, 0px) !important;}
    .header .nav-area .nav{display: flex !important;}
    .header .nav-area .language .menu.btn{display: none !important;}
    .indexBanner .banner-top .swiper-slide .banner-text{font-size: 36px;}
    .about .container img.ys{bottom: -7rem;}
    .product::after{right: -15%;}
    .product .swiper-container .swiper-slide{width: 25%;}
    .about .container{display: flex;align-items: center;}
    .about .container .about-text{width: 44%;padding-right: 8%;}
    .about .container .about-text .title{text-align: left;}
    .about .container .about-img{width: 56%;}
    .about .container img.ys{bottom: -1rem;}
    .news{margin-top: 5rem;}
    .news .container{padding: 3rem;}
    .news-list li .url{flex: 1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 0 .5rem;}
    .news-list li .more{display: block;}
    .customer .swiper-container .swiper-wrapper .swiper-slide{width: 20%;}
    footer .container{padding: 0 100px;}

    .page-aim{position: relative;}
    .page-aim .aim-text{position: absolute;bottom: -1rem;z-index: 99;}
    .page-aim .aim-info{background-color: #286bc1;color: #fff;width: 65%;padding: 2rem 2rem 1rem;text-align: justify;}
    .page-aim .aim-img .container{max-width: 100% !important;margin: 0;padding: 0;}
    .page-aim .aim-img{width: 100%;text-align: right;}
    .page-aim .aim-img img{width: 50%;}
    .page-aim .aim-img .ys{position: absolute;z-index: 99;bottom: -3rem !important;right: 10%;width: 30% !important;top: auto !important;left: auto !important;}
    .aim-area{margin-top: 6rem;}
    .page-news .container{box-shadow: 0 0 8px rgba(0, 0, 0, .2);padding:10px 2rem;}
    .page-news .news-title h2{padding: 1rem 2rem;border-right: #f1f1f1 1px solid;display: inline-block;width: auto;border-bottom: none;}
    .page-news .news-title .news-subnav{padding: 1rem 2rem;}
    .content-topic{padding: 1rem;}
    .content-topic h2{line-height: 1.5;}
    .content-date{padding: 1rem;}
    .content-body{padding: 1rem;}
}
@media screen and (min-width:1200px) {
    .area .title{font-size: 2rem;}
    .product::after{right: -20%;}
    .about .container img.ys{bottom: -8rem;}
    .news{margin-top: 13rem;}
    .service-list .row .col-xl-3{margin-bottom: 13rem;}
    .page-aim .aim-info{width: 50%;padding: 3rem 3rem 2rem;}
    .page-aim .aim-img .ys{bottom: -4rem !important;}
    .about-area{width: 45%;}
    .zh_hk .page-about .container .about-img{bottom: -190px;}
    .indexBanner .banner-thumbs{max-width: 500px;}
    .page-about.factory .container .row:nth-child(even) .about-area{padding-left: 3rem;}
    .page-about.factory .container .row:nth-child(odd){flex-direction: row-reverse;}
    .page-about.factory .container .row:nth-child(odd) .about-area{padding-right: 3rem;}
}
@media screen and (min-width:1920px) {
    .scroll-down{top: 80%;}
    .area .title{font-size: 2.25rem;}
    .container{max-width: 1512px;}
    .news{margin-top: 15rem;}
    .news .container{max-width: 1610px;}
    .product::after{right: -25%;}
    .about-area{width: 40%;}
    .about .container img.ys{bottom: -9rem;}
    .footer .container,.copyright .container{max-width: 1120px;}
    .page-about .container .about-img{bottom: -100px;}
    .zh_hk .page-about .container .about-img{bottom: -230px;}
    .page-aim .aim-img img{max-height: 380px;object-fit: cover;}
    .page-aim .aim-img .ys{bottom: -5rem !important;}
    .customer .swiper-container .swiper-wrapper .swiper-slide img{max-height: 70px;}
    .indexBanner .banner-thumbs{max-width: 600px;}

}