@charset "utf-8";
@import url("base.css");
@import url("aos.css");
@import url("swiper-bundle.min.css");


/**index**/
.hcHead{ background:var(--color-blue);  width:100%;  position:fixed; left: 0; top: 0; z-index: 99; }
.hcHead.topFix{ background:var(--color-blue);  box-shadow: 0 0 0.2rem rgba(0,0,0,.15);}
.hcHead .w{ width: 84%; max-width: 1600px;}
.hcHead-nav{ margin-left: auto; margin-right: 5.729vw;}
.hcHead-nav li{ padding: 0 1.77vw; position: relative;}
.hcHead-nav li a.far{ display: block; line-height: 1rem; color: var(--color-white); position: relative;}
.hcHead-nav li a.far:before{ content:''; background: #89abd9; width: 0; height: 2px; position: absolute; left: 50%; bottom: 0.2rem;}
.hcHead-nav li.active a.far:before, .hcHead-nav li:hover a.far:before{ width: 100%; left: 0;}
.hcHead-nav li .subnav { background-color:var(--color-blue); width:100%; padding:0.15rem 0; text-align: center; position:absolute; top:100%; left:0; pointer-events:none; opacity:0; transform:translateY(10px); backdrop-filter:blur(5px); box-shadow:0 5px 0.2rem -3px rgba(0, 0, 0, 0.06); }
.hcHead-nav li .subnav a { display:block; padding:0.05rem 0; color: var(--color-white); font-size: 0.15rem; }
.hcHead-nav li:hover .subnav{ opacity:1; pointer-events:auto; transform:none; }

.hcHead-language:hover .lan-dropdown{ opacity:1; pointer-events:auto; transform:none;}
.hcHead-language .lan-toggle{ line-height:1rem; cursor:pointer;}
.hcHead-language .lan-dropdown{ background:var(--color-white); width:160%; position:absolute; left:-10%; top:100%; padding:0.1rem 0; text-align:center; pointer-events:none; opacity:0; transform:translateY(10px); backdrop-filter:blur(5px); box-shadow:0 5px 0.2rem -3px rgba(0, 0, 0, 0.06);}
.hcHead-language .lan-dropdown a{ display:block; padding:0.1rem 0; line-height:1;}


.hcBanner{ width: 100%; height: 100vh;}
.hcAbout{ background-image: url(../images/hcAbout-bg.jpg); width: 100%; height: 100vh;}
.hcAbout .w{ width: 84%; max-width: 1600px; justify-content: flex-end;}
.hcAbout-thumb{ width: 50%; height: 100%; position: absolute; left: 0; top: 0;}
.hcAbout-thumb .play{ background: rgba(83, 83, 83, .3); width: 0.8rem; height: 0.8rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; color: var(--color-white); border-radius: 100%; cursor: pointer;}
.hcAbout-thumb:hover  img{filter: brightness(50%);}
.hcAbout-thumb:hover  .play{ background: var(--color-blue);}
.hcAbout-text{ width: 43.125%; padding-top:6.375vw;}
.hcAbout-text .text{ margin-top: 3.125vw;}
.hcAbout-text .more{ line-height: 0.38rem; padding: 0 0.2rem; margin-top: 3.645vw; display: inline-block; border: 1px #d2d2d2 solid; border-radius: 0.2rem;}
.hcAbout-text .more:hover{ background: var(--color-blue); color: var(--color-white); border-color: var(--color-blue);}
.hcAbout-links{ width: 45.3125%; position: absolute; bottom: 3.77vw; right: 17.708vw; z-index: 10;}
.hcAbout-links a{ background: var(--color-white); width: 22.72%; padding: 0.2rem; border-radius: 0.1rem; box-shadow: 0 0 0.15rem rgba(0,0,0,.15);}
.hcAbout-links a .en{ text-transform: uppercase; color: #c9c9c9;}
.hcAbout-links a .ic{ margin-top: 3.645vw; display: inline-block;}
.hcAbout-links a:hover{ background: var(--color-blue); color: var(--color-white); transform: translateY(-0.2rem);}
.hcAbout-links a:hover *{ color: var(--color-white);}


.hcProduct{ background-image: url(../images/hcProduct-bg.jpg); width: 100%; height: 100vh;}
.hcProduct .w{ width: 84%; max-width: 1600px; }
.hcProduct-list li{ display: none;}
.hcProduct-list li:first-child{ display: block;}
.hcProduct-list li .text{ width: 28.75%; padding-top: 11.7vw;}
.hcProduct-list li .text .t{ padding-bottom: 0.25rem; font-size: 0.42rem; line-height: 1;}
.hcProduct-list li .text .t:before{ content: ''; background: var(--color-blue); width: 1rem; height: 0.04rem; position: absolute; left: 0; bottom: 0;}
.hcProduct-list li .text .c{ margin-top: 2.6vw;}
.hcProduct-list li .text .m{ width: 2rem; height: 3.645vw; margin-top: 3.64vw; border: 1px #e5e5e5 solid; border-radius: 0.35rem;}
.hcProduct-list li .text .m:hover{ background: var(--color-blue); color: var(--color-white); border-color: var(--color-blue);}
.hcProduct-list li .thumb{ width: 65%; height: 90%; text-align: right; position: absolute; right: 0; top: 0;}
.hcProduct-list li .thumb img{ max-height: 100%;}

.hcProduct-tabs{ background: #e5e5e5; width: 84%; min-width: 1200px; max-width: 1600px; position: absolute; left:50%; transform: translateX(-50%); bottom: 5.29vw; z-index: 2;}
.hcProduct-tabs a{ flex: 1; font-size: 0.18rem; color: var(--color-gray); text-align: center; line-height:4.16vw; }
.hcProduct-tabs a.active{ background: var(--color-blue); color: var(--color-white); }


.hcTechnical{ background: #f5f5f5; width: 100%; height: 100vh;}
.hcTechnical .w{ width: 84%; max-width: 1600px; }
.hcTechnical-list{ margin-top: 3.12vw; padding-bottom: 4.2vw;}
.hcTechnical-list li{ padding-right: 6vw;}
.hcTechnical-list li a{ display:block; padding-bottom: 33.33vw;}
.hcTechnical-list li .word{ width: 28.57%; height: 100%; position: absolute; left: 0; top: 0; padding: 8.33vw 0 0 5.729vw;}
.hcTechnical-list li .word .t:before{ content: ''; background: var(--color-blue); width: 1.4rem; height: 0.02rem; position: absolute; left: -9.11vw; top: 50%;}
.hcTechnical-list li .word .c{ margin-top: 1.822vw;}
.hcTechnical-list li .word .m{ background: var(--color-blue); color: var(--color-white); width: 1.8rem; height:2.6vw; margin-top:4.68vw; }
.hcTechnical-list .scrollbar{ color: #d0d0d0; line-height: 1; position: absolute; top: 4.427vw; z-index: 2; left: 5.729vw;}
.hcTechnical-list .scrollbar .current{ font-size: 0.36rem; color: var(--color-white);}
.hcTechnical-list .swiper-pagination-bullet{ background: var(--color-light); width: 0.1rem; height: 0.1rem; margin: 0 0.08rem !important; border-radius: 0; opacity: 1;}
.hcTechnical-list .swiper-pagination-bullet-active{ background: var(--color-blue);}


.hcNews{ background-image: url(../images/hcNews-bg.jpg); width: 100%; height: 100vh;}
.hcNews .w{ width: 84%; max-width: 1600px; }
.hcNews-head{ align-items: flex-end; margin-bottom: 2.6vw;}
.hcNews-head .more{ line-height: 0.38rem; padding: 0 0.2rem; display: inline-block; border: 1px #d2d2d2 solid; border-radius: 0.2rem;}
.hcNews-head .more:hover{ background: var(--color-blue); color: var(--color-white); border-color: var(--color-blue);}
.hcNews-tabs{ width: 13.75%; display:flex; flex-direction: column;}
.hcNews-tabs li{ padding: 1.3vw 0;}
.hcNews-tabs li a{ position: relative; padding-bottom: 0.06rem; display: inline-block;}
.hcNews-tabs li a:before{ content: ''; background: var(--color-blue); width: 0; height: 2px; position: absolute; left: 0; bottom: 0;}
.hcNews-tabs li.active a, .hcNews-tabs li:hover a{ color: var(--color-blue);}
.hcNews-tabs li.active a:before, .hcNews-tabs li:hover a:before{ width: 100%;}
.hcNews-list{ width: 96.625%; margin-right: -11%; padding-bottom: 6.77vw;}
.hcNews-list li{ background: var(--color-white);}
.hcNews-list li .thumb{ padding-bottom: 80%;}
.hcNews-list li .text{ padding: 1.56vw;}
.hcNews-list li .text .s{ background: var(--color-blue); color: var(--color-white); line-height: 0.32rem; padding: 0 0.22rem; display: inline-block; border-radius: 0.2rem;}
.hcNews-list li:hover .thumb img{ transform: scale(1.05);}
.hcNews-list .swiper-button-next, .hcNews-list .swiper-button-prev{ background: #d2d2d2; width: 0.6rem; height: 0.6rem; top: auto; margin-top: auto; bottom: 0;border-radius: 0.05rem;}
.hcNews-list .swiper-button-next{ right: 11%;}
.hcNews-list .swiper-button-next:hover{ background: var(--color-blue);}
.hcNews-list .swiper-button-prev{ left: auto; right: calc(11% + 0.8rem); }
.hcNews-list .swiper-button-prev:hover{ background: var(--color-blue);}


.hcFooter{ background:var(--color-three); }
.hcFooter .w{ width: 84%; max-width: 1600px;}
.hcFooter-top{ padding: 0.5rem 0 0.35rem 0; }
.hcFooter-topContact{ width: 30%;}

.hcFooter-topMenu{ width:65.626%; }
.hcFooter-topMenu dl dd a{ display: block; margin-top: 0.15rem;}
.hcFooter-topMenu dl dd a:hover{ color: var(--color-white);}

.hcFooter-copy{ border-top: 1px solid var(--color-gray); padding: 0.1rem 0; }

.hcSidebar-buttons { width:0.5rem; position: fixed; top: 60%; transform: translateY(-50%); right: 0; z-index: 99; }
.hcSidebar-buttons li{ position: relative; width: 100%; margin-top: 5px;}
.hcSidebar-buttons li .click-btn{ background: rgba(0,0,0,.5); width: 0.5rem; height: 0.5rem; color: var(--color-white); border-radius: 0.05rem;}
.hcSidebar-buttons li .qrcode-dialog { background:var(--color-white); width: 1.5rem; min-height: 0.5rem; padding:0.1rem; font-size: 0.14rem; position: absolute; top:0; right: 0.63rem; border-radius: 0.05rem; display: none; flex-direction: column; box-shadow: 0 0 0.1rem rgba(0,0,0,.2);}
.hcSidebar-buttons li:hover .click-btn{ background:var(--color-white); color: var(--color-three);}
.hcSidebar-buttons li:hover .qrcode-dialog{ display:flex;}


/**产品中心**/
.public-banner{ height:5.8rem; }
.public-menu{ background: var(--color-white); width: 100%; z-index: 9; box-shadow: 0 0.08rem 0.18rem rgba(181, 181, 181, .16);}
.public-menu a{ line-height: 0.8rem; margin-right: 0.6rem; position: relative;}
.public-menu a:before{ content: ''; background: var(--color-blue); width:0; height: 0.03rem; position: absolute; left: 50%; bottom: 0;}
.public-menu a.active{ color: var(--color-blue);}
.public-menu a.active:before, .public-menu a:hover:before{ width: 100%; left: 0;}


.pmain{ padding: 0.6rem 0;}
.pmain-page{ padding-top: 0.5rem;}
.pmain-page a{ height: 0.48rem; line-height: 0.48rem; margin: 0 0.09rem; padding: 0 0.18rem; border: 1px #bfbfbf solid;}
.pmain-page .nowpage { background:var(--color-blue); color: var(--color-white); height: 0.48rem; line-height: 0.48rem; margin: 0 0.09rem; padding: 0 0.18rem; border: 1px var(--color-blue) solid;}
.pmain-page a:hover { background:var(--color-blue); color: var(--color-white); border: 1px var(--color-blue) solid; }


.pproduct-list{ margin-left:-0.5rem; margin-top: -0.35rem;}
.pproduct-list li{ width: calc(25% - 0.5rem); margin: 0.35rem 0 0 0.5rem; }
.pproduct-list li .thumb{ padding-top: 84.375%; }
.pproduct-list li:hover .thumb img{ transform: scale(1.05);}


.pproject-details-top .gdt-photo{ width: 38%; }
.pproject-details-top .gdt-photo img{ width: 100%;}
.pproject-details-top .gdt-info{ width: 55.55%;}
.pproject-details-desc .desc-head{ border-bottom: 2px #bfbfbf solid;}
.pproject-details-desc .desc-head a{ font-size: 0.18rem; color: var(--color-light); line-height: 0.45rem; padding: 0 0.3rem;}
.pproject-details-desc .desc-head a.active{ background: var(--color-blue); color: var(--color-white);}
.pproject-details-desc .desc-word .w-swith{ display: none;}
.pproject-details-desc .desc-word .w-swith:first-child{ display: block;}



/**资讯中心**/
.pnews-list { margin-left: -0.5rem; margin-top: -0.5rem; }
.pnews-list li {  width: calc(33.33% - 0.5rem); margin: 0.5rem 0 0 0.5rem; border: 1px #dcdcdc solid;}
.pnews-list li .thumb { padding-bottom: 64.70588%;}
.pnews-list li .word{ padding: 0.2rem;}
.pnews-list li:hover .thumb img{ transform: scale(1.05); }

.ptender-list li{  margin-top: 0.3rem; padding: 0.3rem 0.5rem; box-shadow: 0 0 0.15rem rgba(0,0,0,.1);}


/**关于我们**/
.pabout-honor{ margin-left:-0.5rem; margin-top: -0.5rem;}
.pabout-honor li{ width: calc(25% - 0.5rem); margin: 0.5rem 0 0 0.5rem; }
.pabout-honor li .thumb{height: 2.7rem;}
.pabout-honor li .thumb img{ max-height: 100%;}


.pabout-culture li{ width: 33.33%; position: relative; flex-direction: column;}
.pabout-culture li:before{ content: ''; background: #e5e5e5; width: 1px; height: 3.6rem; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.pabout-culture li:last-child:before{ display: none;}
.pabout-culture li .tit{ background:url(../images/culture-bg.png) no-repeat; background-size: 100% 100%; width: 1.88rem; height: 2.18rem; font-size: 0.6rem; color: var(--color-white);}


.pabout-info{ justify-content: flex-end;}
.pabout-info .thumb{ width: 46.875%; position: absolute; left: 0; top: 0.6rem;}
.pabout-info .play{ background: rgba(83, 83, 83, .3); width: 0.8rem; height: 0.8rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; color: var(--color-white); border-radius: 100%; cursor: pointer;}
.pabout-info .play:hover{ background: var(--color-blue);}
.pabout-info .word{ width: 50%; padding-top: 0.3rem; min-height: 6rem;}
.pabout-info .word .t{ padding-bottom: 0.2rem;}
.pabout-info .word .t:before{ content: ''; background: var(--color-blue); width: 1rem; height: 0.03rem; position: absolute; left: 0; bottom: 0;}


/**技术能力**/
.technical-skills-title{ padding-bottom: 0.2rem;}
.technical-skills-title:before{ content: ''; background: var(--color-blue); width: 0.48rem; height: 0.04rem; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);}

.technical-skills-list{ padding-top: 0.35rem; margin-left: -0.45rem;}
.technical-skills-list li{ width: calc(33.33% - 0.45rem); margin: 0.45rem 0 0 0.45rem; padding-bottom: 23%;}
.technical-skills-list li:hover img{ transform: scale(1.05);}

.technical-skills-text{ margin-top: 3.9vw;}
/**三台水晶电子**/
.crystal-info .word{ width: 43.75%;}
.crystal-info .word .t{ padding-bottom: 0.25rem;}
.crystal-info .word .t:before{ content: ''; background: var(--color-blue); width: 1rem; height: 0.03rem; position: absolute; left: 0; bottom: 0;}
.crystal-info .thumb{ width: 50%;}


/**联系我们**/
.pcontact-divis{ width: 33%;}
.pcontact-divis li{ margin-bottom: 0.3rem;}
.pcontact-divis li:last-child{ margin-bottom: 0;}
.pcontact-divis li .icon{ width: 1rem; height: 1rem; border: 1px #dcdcdc solid; border-radius: 50%;}
.pcontact-divis li .text{ flex: 1;}

.pcontact-map{ width: 67%; height: 5rem;}



.pmessage-thumb{ width: 57.6%;}
.pmessage-body{ width: 37%; }

.pmessage-body .bo-filed li{ margin-top: 0.2rem;}
.pmessage-body .bo-filed li .aside{ width: 46%;}
.pmessage-body .bo-filed li label{ display: block;}
.pmessage-body .bo-filed li .inpt{ background: #eee; width: 100%; height: 0.3rem; font-size: 0.14rem; color: #aaa; padding-left: 0.1rem; margin-top: 0.1rem;}
.pmessage-body .bo-filed li .area{ background: #eee; width: 100%; height: 0.65rem; font-size: 0.14rem; color: #aaa; padding: 0.1rem; margin-top: 0.1rem; vertical-align: top;}
.pmessage-body .bo-filed li .yzm-inpt{ width: 2.4rem;}
.pmessage-body .bo-filed li .yzm-in{ height: 0.3rem;}
.pmessage-body .bo-filed li .sbtn{ background: var(--color-blue); width: 1.2rem; height: 0.3rem; display: inline-block; color: var(--color-white); font-size: 0.14rem; border-radius: 0.03rem; cursor: pointer;}


.pjob-strategy{ padding: 1.2rem 0 1rem 0;}
.pjob-strategy .word{ width: 45.48%;}
.pjob-strategy .thumb{ width: 47.91%;}

.pjob-Service{ background-image: url(../images/jon-Service.jpg); height: 6.6rem;}
.pjob-Service .w{ justify-content: flex-end;}
.pjob-Service .text{ width: 37.5%; padding-top: 0.7rem;}

.pjob-list li{ margin-top: 0.3rem;}
.pjob-list li .li-head{ padding: 0.25rem 0.35rem; cursor:pointer; border-bottom: 1px #dcdcdc solid; }
.pjob-list li .li-head .hc{ width:53%; color:#999; display:flex; justify-content:space-between; margin-top:0.2rem; line-height:0.3rem; flex-wrap:wrap;}
.pjob-list li .li-head .hc > span{ width:33.33%; display:inline-block;}
.pjob-list li .li-head .hc > span label{ color:#474747;}

.pjob-list li .li-text{ padding: 0.35rem; display: none;}
.pjob-list li .li-text .hc{ padding-bottom: 0.3rem; border-bottom: 1px #dcdcdc solid;}
.pjob-list li .li-text .hc span{ position: relative; padding-left: 0.15rem; display: inline-block;}
.pjob-list li .li-text .hc span:before{ content:''; background: var(--color-three); width: 0.05rem; height: 0.05rem; position: absolute; left: 0; top: 50%; transform:translateY(-50%); border-radius: 50%;}
.pjob-list li .li-text .hb{ background: var(--color-blue); width: 2rem; height: 0.5rem; color: var(--color-white); border-radius: 0.3rem;}

.pjob-list li.active{ box-shadow:0 0 0.2rem rgba(0,0,0,.15);}
.pjob-list li.active .li-head{ background:var(--color-blue); color: var(--color-white); }
.pjob-list li.active .li-head .click{ transform:rotate(45deg);}
.pjob-list li.active .li-text{ display:block;}


.pabout-video-pop { background: rgba(0, 0, 0, .8); width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 99999; opacity: 0; pointer-events: none; }
.pabout-video-pop .pop-box{ width: 65%; }
.pabout-video-pop .video-item { width: 100%; padding-bottom: 63.15789%; pointer-events: none; opacity: 0; transform: translateY(-0.4rem); }
.pabout-video-pop .pop-close { width:0.6rem; height: 0.6rem; position: absolute; right: 0.3rem; top: 0.3rem; pointer-events: none; opacity: 0; transform: translateY(-40px); cursor: pointer; }
.pabout-video-pop .pop-close:after { content: ""; background:var(--color-white); width: 100%; height: 1px; position: absolute; left: 0; top: 50%; transform: rotate(45deg); }
.pabout-video-pop .pop-close:before { content: ""; background:var(--color-white); width: 100%; height: 1px; position: absolute; left: 0; top: 50%; transform: rotate(-45deg); }
.pabout-video-pop .pop-close:hover:after { transform: rotate(30deg); }
.pabout-video-pop .pop-close:hover:before { transform: rotate(-30deg); }
.pabout-video-pop.video-active { opacity: 1; pointer-events: auto; }
.pabout-video-pop.video-active .pop-close { opacity: 1; pointer-events: auto; transform: translateY(0); }
.pabout-video-pop.video-active .video-item { opacity: 1; pointer-events: auto; transform: translateY(0); }


.pjob-details-filed{ width: 590px; margin: auto;}
.pjob-details-filed li .red{ color: #e60012;}
.pjob-details-filed li .label{ min-width: 1.05rem; text-align: right;}
.pjob-details-filed li .aside{ flex:1; padding-left: 0.1rem;}
.pjob-details-filed li .inpt{ width:100%; height:0.4rem; line-height:0.28rem; padding:0.05rem 0.15rem; border: 1px #bfbfbf solid; border-radius: 0.05rem;}
.pjob-details-filed li .area{ width:100%; height:1.2rem; line-height:0.24rem; vertical-align: top; padding:0.1rem 0.15rem; border: 1px #bfbfbf solid; border-radius: 0.05rem;}
.pjob-details-filed li .yzm-in{ position: absolute; right: 1px; top: 1px;}
.pjob-details-filed li .sbtn{ background: var(--color-blue); margin-left: 1rem; width: 4.2rem; height: 0.5rem; color: var(--color-white); border-radius: 0.05rem; cursor: pointer;}



/**菜单**/
.Mobile-button{ background:var(--color-blue); width:50px; height:100%; position:absolute; top:0; right:0; z-index: 1; align-items:center; justify-content:center; flex-direction:column; display:none;}
.Mobile-button .solid{  background-color:var(--color-white); width:26px; height:2px; transition:var(--transition);}
.Mobile-button .solid2{ margin:8px 0; }
.Mobile-button.active .solid1{ transform:rotate(-45deg) translateY(14px); margin-right:19px !important;}
.Mobile-button.active .solid2{ transform:translateX(40px);}
.Mobile-button.active .solid3{ transform:rotate(45deg) translateY(-14px); margin-right:19px !important;}

.Mobile-menu{ background:var(--color-white); width:100%; height:100%; position:fixed; z-index:98; top:0; left:-100%; overflow-y:auto; padding:70px 3% 0 3%; transition:var(--transition);}
.Mobile-menu.onShow{ left:0; }
.Mobile-menu li .lit{ display:flex; align-items:center; justify-content:center; padding:15px 0;}
.Mobile-menu li .lit a{ font-size:17px; font-weight:bold;}
.Mobile-menu li .lic{ display:none;}
.Mobile-menu li .lic li a{ font-size:15px; font-weight:500; text-align: center; display:block; padding:10px 0;  opacity: .7; }