body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{padding:0;margin:0;}
body,input,button,select,textarea{ font:12px/1.5 Arial Verdana,Microsoft yahei,sans-serif;color:#fff;}
body{ background:#000;}
textarea{resize: none;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:none;vertical-align:middle;}
address,caption,cite,code,dfn,em,strong,th,var,em,i{font-weight:normal;font-style:normal;}
ol,ul{list-style:none;}list{vertical-align:middle;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;}
q:before,q:after{content:'';}
abbr,acronym{border:none;}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}
a{text-decoration:none; color:#fff;}
a:hover{text-decoration:none;color:#fff;}
input {vertical-align:middle;}
button{overflow:visible;}
.hide,.displayno{display:none;}.show{display:block;}
/*****¸،¶¯؛حاه³‎¸،¶¯******/
.left{float:left;display:inline;}
.right{float:right;display:inline;}
.clearfix:before,.clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden}.clearfix{display:inline-block;} *html .clearfix{height:1%}.clearfix{display:block;}.zoom{zoom:1}.clr { height:0;clear:both; overflow:hidden; width:100%}
.text-center{text-align:center !important}
.text-left{text-align:left !important}
.text-right{text-align:right !important}
:-webkit-autofill{background:#fff;} 
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;}
input::-webkit-input-placeholder {color:#ccc;}
input::-moz-input-placeholder {color:#ccc;}
input::-ms-input-placeholder {color:#ccc;}
.icon-home-fill { background:url(../images/icon_home.png) no-repeat; width:16px; height:16px; margin:12px 10px 0 0; padding:0!important}
.icon-home-fill:hover { background-color:none!important}
.head_nav { height:40px; background:#000; line-height:40px; height:40px;}
.head_nav_l { float:left;}  
.head_nav_l a { color:#ccc; font-size:13px; display:inline-block; padding:0 16px; float:left;} 
.head_nav .login_box { float:right;} 
.head_nav .login_box a { margin:0 5px;}

.w1200,.wrapper{ width:1200px; margin:0 auto;}
.banner_index { height:1100px; background:url(../images/banner.jpg) top center no-repeat; overflow:hidden}
.banner_index .company { width:1200px; margin:630px auto 0;background:url(../images/company_bg.jpg) top center no-repeat; padding:40px 590px 50px 60px; text-align:justify}
.banner_index .company h3 { font-size:24px; color:#21b8ce; font-weight:700; margin:0 0 30px;}
.banner_index .company p { margin:0 0 25px; line-height:22px; font-size:14px;} 
.company_m .wrapper { padding:0 0 0 20px;}
.company_m { padding:150px 0 0; background:url(../images/company_m_bg.jpg) top center no-repeat; height:555px; }
.company_m h3 { color:#2bdaf4; font-size:22px; margin:0 0 10px;}
.company_m h2 { color:#2bdaf4; font-size:24px; margin:0 0 10px; padding:0 0 20px; border-bottom:2px solid #2bdaf4; display:inline-block}
.company_m h2 span { font-size:20px; font-weight:700; margin:0 10px}
.company_m h2 { color:#2bdaf4; font-size:24px; margin:0 0 30px; padding:0 0 20px; border-bottom:2px solid #2bdaf4; display:inline-block}
.company_m p { font-size:14px; line-height:22px; margin-bottom:20px}
.tit { background:url(../images/tit_bg.png) no-repeat top center; text-align:center; font-size:36px; font-weight:700; padding:40px 0; margin:100px 0 40px; color:#2bdaf4}
.tit span { margin:0 25px; font-weight:400}
.swiper-container-new { display:none}
.card-item-bg { background:#2a2a2a}
.card-item { width:1230px; margin:0 auto; background:#000; overflow:hidden}
.card-area .card-item { z-index:4;transition:all .3s cubic-bezier(.4,0,.2,1),z-index 0s .12s;position:relative;float:left; width:17%;height:400px;background-color:transparent; padding:0 10px;}
.card-area .card-item+.card-item {margin-left:-3px}
.card-area .card-item img { width:650px; height:400px;}
.card-area .card-item.active {z-index:6;box-shadow:0 0 30px rgba(0,0,0,.2); width:49%; height:400px}
.card-area .card-item.active .card .card-content.content-first {transition:all .12s cubic-bezier(.4,0,.2,1) 0s;z-index:2;opacity:0;filter:alpha(opacity=0);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=(0))}
.card-area .card-item.active .card .card-content.content-second {transition:all .12s cubic-bezier(.4,0,.2,1) .18s;z-index:3;opacity:1;filter:alpha(opacity=100);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=(100))}
.card-area .card-item .card { transition:all .3s cubic-bezier(.4,0,.2,1),z-index 0s .12s; width:100%; height:100%; padding:120px 100px; text-align:center; background:rgba(0,0,0,.5); position:absolute; left:0; top:0; display:none}
.card-area .card-item:hover .card,.card-area .active .card{ display:block}
.card-area .active .titBar { display:none}
.card-area .card-item .card h2 { font-size:26px; color:#2bdaf4; font-weight:700; line-height:36px; margin-bottom:30px;}
.card-area .card-item .card p { line-height:22px;}
.card-area .card-item .titBar { height:100px; padding:10px 20px; background:rgba(0,0,0,.5); font-size:16px; line-height:30px; position:absolute; bottom:0; left:0; width:100%;}
.pro_list { margin:0 0 0 -3px}
.pro_list li { float:left; width:400px; height:350px; margin:0 1px 1px 0; display:inline-block; overflow:hidden; position:relative;}
.pro_list li img { width:400px; height:350px;}
.pro_list li .up_text { overflow: hidden; width:100%; height:100%; padding:80px 60px; position:absolute; top:200px; left:0; opacity:1; visibility:hidden; z-index:101; -webkit-transition:all .3s ease-in-out .1s; -moz-transition:all .3s ease-in-out .1s; transition:all .3s ease-in-out .1s; background:rgba(0,0,0,.7);}
.pro_list li:hover .up_text{ top:0; opacity:1; z-index:103; visibility:visible}
.pro_list li .up_text h3 { font-size:18px; margin:0 0 20px; color:#2bdaf4; font-weight:700; text-align:center;} 
.pro_list li .up_text p { margin:0 0 30px; line-height:24px;}
.pro_list li .up_text .btn_link { font-size:14px; color:#000; background:#2bdaf4; border-radius:2px; display:inline-block; padding:0 10px; margin:0 auto}
.tab_video { margin:30px 0 0; overflow:hidden}
.tab_video .tab_video_cnt { text-align:center;}
.tab_video .tab_video_cnt video { width:100%;}
.tab_video_tab { text-align:center; padding:50px 0 30px}
.tab_video_tab a { font-size:18px; margin:0 30px; position:relative}
.tab_video_tab a.cur { color:#2bdaf4;}
.tab_video_tab a.cur:before { content:""; width:0; height:0; border-bottom:10px solid #21b8ce; border-left: 10px solid transparent; border-right: 10px solid transparent;display: inline-block; margin: 0 6px; position:absolute; top:-15px; right:40%;}
.tab_video_tab a.cur::after { content:""; width:80px; height:4px;background:#21b8ce; position:absolute; bottom:-25px; left:50%; margin-left:-40px;}
.case_list li { float:left; width:33.3333%; position:relative; overflow:hidden}
.case_list li img { width:100%; transform: scale(1); transition:all 0.2s}
.case_list li:hover img { width:100%; transform: scale(1.2); transition:all 0.2s}
.case_list li .up_text { width:100%; height:70px; padding:10px 20px; background:rgba(0,0,0,.6); color:#2bdaf4; font-size:16px; position:absolute; bottom:-100px; left:0; opacity:1; visibility:hidden; z-index:101; -webkit-transition:all .3s ease-in-out .1s; -moz-transition:all .3s ease-in-out .1s; transition:all .3s ease-in-out .1s; background:rgba(0,0,0,.7);}
.case_list li:hover .up_text{ bottom:0; opacity:1; z-index:103; visibility:visible}
.footer { text-align:center; padding:40px 0; font-size:14px;}

@media screen and (max-width: 768px) {
    .banner_index { height:1100px; background:url(../images/banner_wp.jpg) top center no-repeat; background-size:contain; overflow:hidden}
    .banner_index .company { width:auto; margin:460px 20px 0; background:#181e21 url(../images/company_bg_wp.jpg) bottom center no-repeat; padding:20px 20px 260px; text-align:justify}
    .company_m { padding:50px 0 0; background:url(../images/company_m_bg_wp.jpg) bottom center no-repeat;background-size:contain; height:405px; }
    .head_nav { display:none}
    .w1200,.wrapper { padding:0 0 20px; width:100%}
    .banner_index .company h3 { font-size:16px; margin:0 0 10px;}
    .banner_index .company p { font-size:12px; margin:0 0 10px; line-height:20px;text-align:justify;}
    .company_m .wrapper { padding:0 20px}
    .company_m h3 { font-size:16px;} 
    .company_m h2 { font-size:18px;}
    .company_m p { font-size:12px; line-height:20px; margin-bottom:10px;text-align:justify; padding:0 80px 0 0}
    .card-item-bg { display:none}
    /*.card-item { width:100%}
    .card-area .card-item.active { height:auto;}
    .card-area .card-item:hover .card, .card-area .active .card { display:none}
    .card-area .active .titBar { display:block;}
    .card-area .card-item { width:100%; height:auto; margin:5px 0}
    .card-area .card-item.active { width:100%}
    .card-area .card-item .card h2 { font-size:16px; line-height:20px;}
    .card-area .card-item .titBar { height:40px; line-height:20px; font-size:14px;background:rgba(0,0,0,.9); text-align:center}
    .card-area .card-item img { width:100%; height:auto}*/

    .swiper-container-new { display:block}
    .swiper-container-new .swiper-slide img { width:100%; height:250px;}
    .swiper-container-new .swiper-slide .titBar { height:30px; padding:0 10px; color:#2bdaf4; background:rgba(0,0,0,.7); line-height:30px; position:absolute; top:220px; width:100%}
    .swiper-container-new .swiper-slide p { padding:10px 10px 0; text-align:justify}
    .swiper-container-new .swiper-pagination { top:225px!important; right:0; left:inherit!important; width:100px!important;}
    .swiper-container-new .swiper-pagination .swiper-pagination-bullet { background:#fff;}
    .pro_list li { width:46%; height:152px; float:left; margin:0; margin:0 0 10px 11px;}
    .pro_list li:hover .up_text { display:block}
    .pro_list li img { width:100%; height:auto}
    .pro_list li .up_text { display:block;visibility:inherit; top:125px; padding:5px 10px;}
    .pro_list li .up_text p { line-height:20px;}
    .pro_list li .up_text h3 { font-size:12px; text-align:left; font-weight:400; height:20px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
    .tab_video_tab a { font-size:16px; margin:0 15px;}
    .tab_video_tab a.cur::after { bottom:-12px;}
    .tab_video .tab_video_cnt { height:auto;}
    .tab_video .tab_video_cnt video { width:100%}
    .tit { background-size:contain; padding:20px 0 10px; font-size:22px; margin:40px 0 20px}
    .case_list li { width:100%; margin:0 0 10px;}
    .case_list li .up_text { height:60px; font-size:12px; padding:10px; display:block;visibility:inherit; bottom:0;background: rgba(0,0,0,.8);}
    .case_list li .up_text p { padding:0}
    .tit span { margin:0 10px;}
    .footer { padding:20px; overflow:hidden; text-align:center; font-size:12px; } 
    }