/*产品样式*/
.banner_wrapper {background-color:#d8dadb;}
.product_nav {display:flex; justify-content:space-between;}
.product_nav_item {cursor: pointer;}
.nav_item_bg {width:80px; height:80px; background-size:100%; margin-bottom:10px;}
.nav_item_bg img{ opacity:0;}
.product_nav_item.cur .nav_item_bg img{opacity:1;} 
.product_nav_item.cur .nav_item_bg {background-image:none !important;}

#hightLine {width:80px; height:5px; background:#0680F1; transition:all 0.2s ease-in-out;}

.nav_item_bg.bg1 {background-image:url("../video/1.png");}
.nav_item_bg.bg2 {background-image:url("../video/2.png");}
.nav_item_bg.bg3 {background-image:url("../video/3.png");}
.nav_item_bg.bg4 {background-image:url("../video/4.png");}
.nav_item_bg.bg5 {background-image:url("../video/5.png");}
.nav_item_bg.bg6 {background-image:url("../video/6.png");}
.nav_item_bg.bg7 {background-image:url("../video/7.png");}
.nav_item_bg.bg8 {background-image:url("../video/8.png");}
.nav_item_bg.bg9 {background-image:url("../video/9.png");}
.nav_item_bg.bg10 {background-image:url("../video/10.png");}
.nav_item_bg.bg11 {background-image:url("../video/11.png");}

.product_wrapper {height:580px;background: rgba(243,245,248,0.4);box-shadow: inset 0px 15px 30px 1px rgba(152,160,204,0.16);}
.product_box {padding-top:40px; display:none; }
.product_box.cur {display:block;}

.product_box .product_item {display:flex;}
.product_box .left_info_wrapper {width:326px; height:488px; background:url("../images/main_pro_left.jpg") #fff; padding:32px 26px; line-height:24px; position:relative;}
.product_box .left_info_wrapper.sms {height:224px;}
.product_box .l_btn_box {position:absolute; left:26px; bottom:30px; background:none;}
.left_info_wrapper .c_btn {box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.16);}
.product_box .product_info { background: #FFFFFF; box-shadow: 10px 10px 10px 1px rgba(167,167,167,0.13); flex:1; display:flex; flex-wrap:wrap; padding:20px;}
.product_box .product_info.other {padding-top:60px;}
.product_box .product_info.other2 {padding-top:100px;}
.product_box .des_box { width:33.3%; padding:0 40px;}
.product_box .des_title {font-size:18px; padding-bottom:12px; position: relative; font-weight:bold;}
.product_box .des_title .tag1,.product_box .des_title .tag2 {position:absolute; right:0; top:0; font-size:12px; font-weight:lighter;}
.product_box .des_title .tag1 {width:66px; height:21px; background:url("../images/tag.png"); color:#fff; text-align:center; padding-left:4px; opacity:0.7;}
.product_box .des_title .tag2 {width:60px; height:20px; border: 1px solid #0680F1; color:#0680F1; text-align:center;}


.fang_an_box {background:url("../images/bg1.jpg") center center no-repeat; background-size:cover; padding:70px 0; transition:all 0.5s;}
.fang_an_box.bg0 {background-image:url("../images/bg1.jpg");}
.fang_an_box.bg1 {background-image:url("../images/bg2.jpg");}
.fang_an_box.bg2 {background-image:url("../images/bg3.jpg");}
.fang_an_box.bg3 {background-image:url("../images/bg4.jpg");}
.fang_an_box.bg4 {background-image:url("../images/bg5.jpg");}

.fang_an {background:rgb(255, 255, 255, .6); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); position: relative; overflow: hidden; padding:20px 40px;}
.fa_tab {border-bottom:1px solid #c5c5c5; display:flex; justify-content:space-between; padding:40px 40px 0 40px;}
.fa_tab .fa_tab_nav {width:120px; text-align:center; font-size:20px; font-weight:bold; position: relative; padding-bottom:20px; cursor: pointer;}
.fa_tab .fa_tab_nav:after {background:#0680F1; content:""; width:0; height:4px; display:block; position:absolute; left:50%; transform:translateX(-50%); bottom:-1px; transition:all 0.3s;}
.fa_tab .fa_tab_nav.cur:after {width:100%;}
.fa_content {padding-top:30px; height:420px;}
.fa_tab_content {height:0; overflow: hidden; opacity:0;}
.fa_tab_content.cur {opacity:1; height:auto;}
.fa_content .fa_l_box {width:46%; padding-top:30px; line-height:28px;}
.fa_content .fa_case_box {padding-top:20px; padding-bottom: 20px;}
.fa_content .fa_case {display:inline-block; margin-right:16px; width:126px; background:#fff; cursor:pointer; box-shadow:5px 3px 4px 1px rgb(152 160 204 / 16%);}
.fa_content .fa_case:hover {box-shadow:none;}
.fa_content .fa_case img{display:block;}
.fa_img_box {position:absolute; right:-80px; bottom:-100px; opacity:0; transition:all 0.8s; width:680px; height:418px;}
.fa_img_box img {display:block; position:absolute; right:0; bottom:0; opacity:0; transition:all 0.3s;}
.fa_img_box img.cur {opacity:1;}
.fa_tab_content.cur .fa_img_box {opacity:1; bottom:0; right:0;}
.fa_more { line-height:38px; width:120px; font-size:16px; color:#505E77; border: 1px solid #505E77; display:block; text-align:center;}


.case_title_box {background: #F3F5F8; padding:60px 0; border-top:2px solid #fff; box-shadow: 0px 15px 50px 1px rgba(150,181,212,0.26), inset 0px 15px 30px 1px rgba(152,160,204,0.06);}
.case_wrapper {display:inline-flex; flex-wrap:wrap;  justify-content: space-between;  margin:auto; }
.case_content_box {background: rgba(243,245,248,0.65);  padding:40px 0; overflow: hidden;}
.case_item {background: #FFF;  box-shadow: 10px 10px 10px 1px rgba(152,160,204,0.16); width:210px; text-align:center; padding:10px 0; margin-right:15px; margin-bottom:15px;}
.case_content {text-align:center; white-space: nowrap;}

.banner_slide {width:100%;}
.banner_side_bg {position:absolute; left:-2px; top:0; opacity:0; transition:all 0.6s;}
.banner_side_bg.r {position:absolute; left:auto; right:-2px; top:0; transform:rotateY(180deg); opacity:0; transition:all 0.6s;}
.banner_slide.hightlight .banner_side_bg{opacity:1;}
.banner_slide .b_video {cursor:pointer;}
.banner_slide .content {pointer-events:none;}
.banner_slide .content .c_btn {pointer-events:auto;}
.banner_slide.banner_act {background: linear-gradient(180deg, #CFE9FF 0%, #EEF7FF 100%);}
.banner_act .first_img {position:absolute; right:60px; top:60px;}

.main_fa_box {height:718px; color:#fff; background:url("../images/main/jjfa_bj1.png") #505E77 center center no-repeat; background-size:cover; padding:70px 0; transition:all 0.5s;}
.main_fa_box.bg0 {background-image:url("../images/main/jjfa_bj1.png");}
.main_fa_box.bg1 {background-image:url("../images/main/jjfa_bj2.png");}
.main_fa_box.bg2 {background-image:url("../images/main/jjfa_bj3.png");}
.main_fa_box.bg3 {background-image:url("../images/main/jjfa_bj4.png");}
.main_fa_box.bg4 {background-image:url("../images/main/jjfa_bj5.png");}

.main_fa_content {display:flex; height:486px;}
.main_fa_content .fa_rightbar {flex: 1; }
.main_fa_content .fa_right_box {height:100%; display:none;}
.main_fa_content .fa_right_box.cur {display:flex;}

.main_fa_content .fa_leftbar,.main_fa_content .fa_case {width:310px; padding:24px; background:rgba(0,0,0,0.3); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);}
.main_fa_content .fa_body {flex:1; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); padding:65px 50px 0 50px;}
.main_fa_content .fa_body .sub_t {line-height:28px;font-size:17px; word-spacing:4px; height:116px;}
.main_fa_content .fa_icons_box {display:flex;}
.main_fa_content .fa_icons_box .fa_icon_item {padding-right:20px;}
.main_fa_content .fa_icons_box .fa_icon_item .fa_icon {display:block; width:32px; height:32px; margin:auto; text-align:center; margin-bottom:8px;}
.main_fa_content .fa_body .line {height: 2px; background:#fff; opacity:.2;}

.fa_leftbar .fa_menu {line-height:58px; padding:0 30px; cursor:pointer; font-size:22px; margin-bottom:20px;}
.fa_leftbar .fa_menu.cur {background: linear-gradient(135deg, #0680F1 0%, #2985D9 50%, #59A9F5 100%);}

.fa_rightbar .fa_case_wrap { display:flex; justify-content:space-between; flex-wrap: wrap; padding:0 16px;}
.fa_rightbar .fa_case_w {width:100px; height:100px; background:#fff; position:relative; text-align:center; margin-top:24px; border-radius:6px; opacity:.8; transition:all 0.3s;}
.fa_rightbar .fa_case_w>img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); max-width:94%; }
.fa_rightbar .fa_case_w:hover {opacity:1; transform:scale(1.4);}

.main_case { padding-top:60px; padding-bottom:30px;}
.main_case_tab {border-bottom:1px solid #bdc4cf; text-align:center; margin-top:30px;}
.main_case_tab .main_case_nav {width:220px; display:inline-block; line-height:48px; font-size:22px; color:#253654; position: relative; padding-bottom:10px; cursor:pointer;}
.main_case_tab .main_case_nav.cur {color:#0680F1;}
.main_case_tab .main_case_nav:after {background: linear-gradient(90deg, #0680F1 0%, #51AEFF 100%); content: ""; width: 0; height: 4px; display: block;
    position: absolute;left: 50%; transform: translateX(-50%); bottom:-3px; transition: all 0.3s;}
.main_case_tab .main_case_nav.cur:after {width:100%;}

.main_c_item {height:353px; position:relative; color:#fff; display:none;}
.main_c_item.cur {display:flex; }
.main_c_item .sms_icon {position:absolute; left:0; top:0;}
.main_c_item>div {flex:1; overflow: hidden;}

.m_c_item_right {background:url("../images/main/main_c_bg1.png") center center no-repeat; background-size:cover; }
.m_c_item_right>img {margin-left:220px;}
.m_c_item_right.bg2 {background-image:url("../images/main/main_c_bg2.png");}
.m_c_item_right.bg3 {background-image:url("../images/main/main_c_bg3.png");}
.m_c_item_right.bg4 {background-image:url("../images/main/main_c_bg4.png");}
.m_c_item_right.bg5 {background-image:url("../images/main/main_c_bg5.png");}

.m_c_item_left {background: linear-gradient(90deg, #6BB8FF 0%, #0680F1 27%, #0680F1 100%);}
.m_c_item_left .m_brand_box {width:600px; padding:50px 40px 0 0; position:relative;}
.m_c_item_left .m_brand_box .brand_subt {font-size:18px; opacity:.85; line-height:30px;}
.m_c_item_left .m_brand_box .brand_txt { display:inline-block; padding-right:20px;}
.m_c_item_left .m_brand_box .brand_txt .brand_num {font-size:32px; font-weight:lighter; padding-top:16px;}
.m_c_item_left .m_brand_box .line { width:1px; height:58px; background:#fff; opacity:.2; display:inline-block; margin-right:20px;}
.m_c_item_left .m_brand_box .douhao {position:absolute; left:-60px; top:30px;}

.change_icons {position:absolute;right:0; bottom:0;}
.change_icons .brand_icon {width:37px; height:37px; background:url("../images/main/brand_icon_l1.png"); display:inline-block; margin-left:20px; cursor:pointer; opacity:.6;}
.change_icons .brand_icon:hover {background:url("../images/main/brand_icon_l2.png"); opacity:1;}
.change_icons .brand_icon.r {background:url("../images/main/brand_icon_r1.png");}
.change_icons .brand_icon.r:hover {background:url("../images/main/brand_icon_r2.png"); opacity:1;}


@media screen and (max-width:1280px) {
    .case_wrapper {padding:0 20px;}
    .fa_content .fa_case_box {padding-top:10px;}
    .main_case_tab .main_case_nav {font-size:18px; width:180px;}
}