@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'huakang';
    src:url('../css/HelveticaNeue.ttc')  format('truetype'); /* Safari, Android, iOS */
}
.huakang{ font-family: 'huakang';}

.page-frame{ width: 100%; height:100%; position: absolute; top: 0; left: 0;}
body::-webkit-scrollbar{ width: 6px; background-color: #fff;}
body::-webkit-scrollbar-thumb{ width: 6px; background-color: #aaa;}
#welcomePage{ background-color: #000; z-index: 200;}
#welcomePage::-webkit-scrollbar{ width: 0px; background-color: #fff;}
.intro{ width: 1200px; font-size: 12px; color: #fff;position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -600px; text-align: center; opacity: 0;}
.intro p{ margin-bottom: 10px;}

.logo{ width: 78px; position: fixed; top: 50%; left: 50%; margin: 170px 0 0 -39px; z-index: 1000; opacity: 0; font-size: 50px; color: #fff;
    -webkit-transition: color 2s ease-in-out;
    -moz-transition: color 2s ease-in-out;
    -o-transition: color 2s ease-in-out;
    transition: color 2s ease-in-out;}
.logo-black{ color: #000000;}

.worker-list{ width: 100%; overflow: hidden; position: relative; margin-top: 8%;}
.worker-list li{ width: 190px; height: 250px; float: left; margin-right: 12px; background-size: 100% 100%;}

.about-intro,.contact-info{ width: 50%; float: right; padding: 90px 50px 0 50px; position: relative; z-index: 5;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;}
.about-intro>div{ margin-bottom: 50px; overflow: hidden;}
.about-intro>div p{ font-size: 16px; font-weight: bold; width: 230px; float: left;}
.about-intro>div div{ font-size: 12px; color: rgb(113,112,113); margin-left: 230px; line-height: 2;}

.navs{ width: 46%; position: fixed; bottom: 20px; left: 50px; z-index: 10;}
.navs>div{ margin-bottom: 30px; font-size: 10vw;}
.navs>div a{ color: #000;}
.navs>div img{ width: 100%;}
.navs>ul{ overflow: hidden; margin-bottom: 30px;}
.navs>ul li{ width: 50%; float: left;}
.navs>ul li a{ width: 50%; display: block; color: #000; font-size: 4vw;}
.navs>ul li a img{ width: 100%;}
.navs>ul li:hover{ opacity: 0.4;}

.contact-info{ height: 97%; padding: 0 50px;}
.contact-info>div{ height: 17%;}
.contact-info>div:first-child{ margin-top: 24%;}
.contact-info>div p{ font-size: 24px; width: 230px; float: left;}
.contact-info>div p span{ font-size: 16px;}
.contact-info>div div{ font-size: 12px; color: rgb(113,112,113); margin-left: 230px; line-height: 2;}

.pro-list{ width: 100%; overflow: hidden; position: relative;
    -webkit-transition: all 0.3s ease-in-out 0.06s;
    -moz-transition: all 0.3s ease-in-out 0.06s;
    -ms-transition: all 0.3s ease-in-out 0.06s;
    -o-transition: all 0.3s ease-in-out 0.06s;
    transition: all 0.3s ease-in-out 0.06s;}
.pro-list ul{ width: 100%; overflow: hidden; margin-left: 50px;}
.pro-list ul li{ width: 24%; float: left; margin-right: 50px;}
.pro-list ul li a{ width: 100%; height: 220px; display: flex; justify-content: center; align-items: center;  position: relative; overflow: hidden;}
.pro-list ul li a:first-child{ margin-bottom: 36px;}
.pro-list ul li img{ width: 460px; height: 100%; display: block;}
.pro-list ul li div{ width: 100%; background-color: #000; font-size: 16px; color: #fff; padding: 2% 5%; position: absolute; left: 0; bottom: -50px;
    -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;}
.pro-list ul li a:hover div{ bottom: 0;}
.pro-list ul li div span{ 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 0.2s;}
.pro-list ul li a:hover div span{ opacity: 1;}

.pro-list-frame{ width: 100%; position: relative; overflow: hidden; margin-top: 100px;}
/*.pro-list-frame:hover .pro-list,.pro-list-frame:hover .detail-list{*/
    /*-webkit-transform: translate(-40px, 0);*/
    /*-moz-transform: translate(-40px, 0);*/
    /*-ms-transform: translate(-40px, 0);*/
    /*-o-transform: translate(-40px, 0);*/
    /*transform: translate(-40px, 0);}*/
.arrow{ width: auto; height: 100%; background-color: #fff; position: absolute; top: 0; z-index: 10; opacity: 0; font-size: 28px; color: #000;
    -webkit-transition: all 0.3s ease-in-out 0.06s;
    -moz-transition: all 0.3s ease-in-out 0.06s;
    -ms-transition: all 0.3s ease-in-out 0.06s;
    -o-transition: all 0.3s ease-in-out 0.06s;
    transition: all 0.3s ease-in-out 0.06s;}
.arrow span{ width: 70%; position: relative; top: 50%; margin: -14px auto 0 auto; display: block;
    -webkit-transition: all 0.3s ease-in-out 0.16s;
    -moz-transition: all 0.3s ease-in-out 0.16s;
    -ms-transition: all 0.3s ease-in-out 0.16s;
    -o-transition: all 0.3s ease-in-out 0.16s;
    transition: all 0.3s ease-in-out 0.16s;}
.arrow-left,.arrow-left span{
    -webkit-transform: translate(-40px, 0);
    -moz-transform: translate(-40px, 0);
    -ms-transform: translate(-40px, 0);
    -o-transform: translate(-40px, 0);
    transform: translate(-40px, 0);}
.arrow-right,.arrow-right span{
    -webkit-transform: translate(40px, 0);
    -moz-transform: translate(40px, 0);
    -ms-transform: translate(40px, 0);
    -o-transform: translate(40px, 0);
    transform: translate(40px, 0); }
.pro-list-frame:hover .arrow-left,.pro-list-frame:hover .arrow-right,.pro-list-frame:hover .arrow-left span,.pro-list-frame:hover .arrow-right span{
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0); opacity: 1;}
#arrowLeftPro,#arrowLeftDetail{ left: 0;}
#arrowRightPro,#arrowRightDetail{ right: 0;}
#arrowLeftDetail,#arrowRightDetail{ height: calc(100% - 17px); height: -webkit-calc(100% - 17px);}

.worker-intro{ width: 400px; margin: 60px auto 0 auto;}
.worker-intro h3{ font-size: 48px; font-weight: bold; margin-bottom: 30px;}
.worker-intro ul{ overflow: hidden;}
.worker-intro li{ float: left; margin-right: 40px;}
.worker-intro li p{ font-size: 18px; font-weight: bold; margin-bottom: 20px;}
.worker-intro li div{ font-size: 12px;}

.detail-list{ overflow: hidden; margin-right: 50px; position: relative;
    -webkit-transition: all 0.3s ease-in-out 0.06s;
    -moz-transition: all 0.3s ease-in-out 0.06s;
    -ms-transition: all 0.3s ease-in-out 0.06s;
    -o-transition: all 0.3s ease-in-out 0.06s;
    transition: all 0.3s ease-in-out 0.06s;}
.detail-list ul{ margin-left: 42%; overflow: hidden;}
.detail-list ul li{ width: 58%; float: left; margin-right: 50px; overflow: hidden; display: flex; justify-content: center; align-items: center;}
.detail-list ul li img{ width: 100%; display: block;}

.nav-bars{ float: right; margin-top: 15px;}
.nav-bars a{ display: block; float: left; width: 50px; height: 2px; background-color: rgb(218,219,219); margin-left: 6px;}
.nav-bars a.active{ background-color: #000;}


.footer{ position: fixed; left: 0; bottom: 0; width: 100%; height: 40px; background-color: #fff; z-index: 100; display: none;}
.footer p{ float: left; margin: 10px 0 0 50px;  font-size: 12px; color: rgb(179,179,180);}
.footer a{ float: right; margin-right: 50px; margin-top: 8px; font-size: 24px; color: #b3b3b4;}

.pro-type{ width: 540px; margin: 0 auto 0 auto; overflow: hidden; position: relative;}
.pro-type>a{float: left; margin-top: 90px; font-size: 20px; color: #000; margin-right: 25px;}
.pro-type a:hover{ opacity: 0.4;}
.pro-type>a p{ font-size: 16px; margin-top: 10px; font-weight: bold;}
.pro-type a.active{ position: absolute; top: 0; left: 0; margin-top: 0; font-size: 40px;}
.pro-type a.active:hover{ opacity: 1;}
.pro-type a.active p{ display: none;}

.workerTitle:hover{ opacity: 0.4;}