@charset "utf-8";
/* CSS Document */

.sys_menu{ position: absolute; left: 6%;}
.sys_menu.cur{ top: calc(53.8% + 100px) !important;}
.sys_menu.cur2{ position: fixed; top: 8% !important;}
.sys_menu.stop{ top: inherit;}
.sys_menu .m_item{ position: relative; margin-top: 9px; padding-right: 15px; height: 33px; text-align: right;}
.sys_menu .m_item:before{ display: block; content: ''; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; background: #dadada; border: 2px solid #fff; -webkit-border-radius: 50%; border-radius: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.sys_menu .m_item .m_item_a{ display: inline-block; position: relative; margin-right: 14px; padding: 0 5px 0 14px; height: 100%; line-height: 33px; font-size: 16px; color: #666; text-decoration: none;}
.sys_menu .m_item .m_item_a:before{ display: none; content: ''; position: absolute; left: 100%; top: 0;  width: 14px; height: 100%; background: url(../images/system/b2c/m_item_icon.png) no-repeat right center;}
.sys_menu .m_item.cur:before{ background: none; border-color: #0bba91;}
.sys_menu .m_item.cur .m_item_a{ background: #0bba91; color: #fff;}
.sys_menu .m_item.cur .m_item_a:before{ display: block;}

.sys_con{ margin-top: 100px; padding-bottom: 120px; overflow: hidden;}
.sys_con .sys_list{ margin-top: 90px; width: 100%;}
.sys_con .sys_list:first-child{ margin-top: 0;}
.sys_con .sys_list .sys_title{ position: relative; width: 100%; height: 56px; text-align: center;}
.sys_con .sys_list .sys_title:before{ display: block; content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: #e1dfdf; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.sys_con .sys_list .sys_title .sys_txt{ display: inline-block; position: relative; padding: 0 104px; height: 100%; line-height: 56px; background: #fff; font-size: 36px; color: #333;}
.sys_con .sys_list .list{ display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 18px; margin-top: 50px;}
.sys_con .sys_list .list .item{ display: block; padding: 38px 0 57px; border: 1px solid #e6e6e6; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.sys_con .sys_list .list .item .o_img{ display: flex; position: relative; margin: 0 auto; width: 96px; height: 96px; align-items: center;}
.sys_con .sys_list .list .item .o_img .img{ display: block; position: relative; z-index: 3; width: 100%; height: 100%; text-decoration: none; -webkit-border-radius: 50%; border-radius: 50%;}
.sys_con .sys_list .list .item .title{ display: block; margin-top: 10px; width: 100%;/* height: 33px;*/ line-height: 33px; font-size: 20px; color: #333; text-align: center; text-decoration: none;}
.sys_con .sys_list .list .item .brief{ width: 100%; line-height: 26px; font-size: 14px; color: #999; text-align: center;}
.sys_con .sys_list .list .item .m_brief{ display: none;}
.sys_con .sys_list .list .item .btn{ display: block; margin: 7px 0 -42px; width: 100%; height: 35px; line-height: 35px; font-size: 16px; color: #ff5043; text-align: center; text-decoration: none;}

.sys_con .sys_list .list .item.btn_item .o_img.anim:before{ display: block; content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-border-radius: 50%; border-radius: 50%; -webkit-animation: anim-out 2s ease-out infinite; animation: anim-out 2s ease-out infinite; z-index: 1;}

.sys_con .sys_list .list .item.btn_item .o_img.anim:after{ display: block; content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-border-radius: 50%; border-radius: 50%; -webkit-animation: anim-out 2s 1s ease-out infinite; animation: anim-out 2s 1s ease-out infinite; z-index: 2;}

.sys_con .sys_list.list0 .list .item .o_img .img,
.sys_con .sys_list.list0 .list .item .o_img.anim:before,
.sys_con .sys_list.list0 .list .item .o_img.anim:after{ background: #419cff;}
.sys_con .sys_list.list1 .list .item .o_img .img,
.sys_con .sys_list.list1 .list .item .o_img.anim:before,
.sys_con .sys_list.list1 .list .item .o_img.anim:after{ background: #37c99f;}
.sys_con .sys_list.list2 .list .item .o_img .img,
.sys_con .sys_list.list2 .list .item .o_img.anim:before,
.sys_con .sys_list.list2 .list .item .o_img.anim:after{ background: #ffa650;}
.sys_con .sys_list.list3 .list .item .o_img .img,
.sys_con .sys_list.list3 .list .item .o_img.anim:before,
.sys_con .sys_list.list3 .list .item .o_img.anim:after{ background: #4bc5ed;}
.sys_con .sys_list.list4 .list .item .o_img .img,
.sys_con .sys_list.list4 .list .item .o_img.anim:before,
.sys_con .sys_list.list4 .list .item .o_img.anim:after{ background: #68d172;}
.sys_con .sys_list.list5 .list .item .o_img .img,
.sys_con .sys_list.list5 .list .item .o_img.anim:before,
.sys_con .sys_list.list5 .list .item .o_img.anim:after{ background: #7282f3;}
.sys_con .sys_list.list6 .list .item .o_img .img,
.sys_con .sys_list.list6 .list .item .o_img.anim:before,
.sys_con .sys_list.list6 .list .item .o_img.anim:after{ background: #c6bca4;}
.sys_con .sys_list.list7 .list .item .o_img .img,
.sys_con .sys_list.list7 .list .item .o_img.anim:before,
.sys_con .sys_list.list7 .list .item .o_img.anim:after{ background: #419cff;}
.sys_con .sys_list.list8 .list .item .o_img .img,
.sys_con .sys_list.list8 .list .item .o_img.anim:before,
.sys_con .sys_list.list8 .list .item .o_img.anim:after{ background: #37c99f;}
.sys_con .sys_list.list9 .list .item .o_img .img,
.sys_con .sys_list.list9 .list .item .o_img.anim:before,
.sys_con .sys_list.list9 .list .item .o_img.anim:after{ background: #ffa650;}
.sys_con .sys_list.list10 .list .item .o_img .img,
.sys_con .sys_list.list10 .list .item .o_img.anim:before,
.sys_con .sys_list.list10 .list .item .o_img.anim:after{ background: #5b8ad5;}
.sys_con .sys_list.list11 .list .item .o_img .img,
.sys_con .sys_list.list11 .list .item .o_img.anim:before,
.sys_con .sys_list.list11 .list .item .o_img.anim:after{ background: #4285f4;}
.sys_con .sys_list.list12 .list .item .o_img .img,
.sys_con .sys_list.list12 .list .item .o_img.anim:before,
.sys_con .sys_list.list12 .list .item .o_img.anim:after{ background: #686f80;}
.sys_con .sys_list.list13 .list .item .o_img .img,
.sys_con .sys_list.list13 .list .item .o_img.anim:before,
.sys_con .sys_list.list13 .list .item .o_img.anim:after{ background: #4bc5ed;}
.sys_con .sys_list.list14 .list .item .o_img .img,
.sys_con .sys_list.list14 .list .item .o_img.anim:before,
.sys_con .sys_list.list14 .list .item .o_img.anim:after{ background: #68d172;}
.sys_con .sys_list.list15 .list .item .o_img .img,
.sys_con .sys_list.list15 .list .item .o_img.anim:before,
.sys_con .sys_list.list15 .list .item .o_img.anim:after{ background: #7282f3;}
.sys_con .sys_list.list16 .list .item .o_img .img,
.sys_con .sys_list.list16 .list .item .o_img.anim:before,
.sys_con .sys_list.list16 .list .item .o_img.anim:after{ background: #c6bca4;}

.sys_con.b2b_sys_con .sys_list .list .item.btn_item:hover .o_img.anim:before{ display: block; content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-border-radius: 50%; border-radius: 50%; -webkit-animation: anim-out 2s ease-out infinite; animation: anim-out 2s ease-out infinite; z-index: 1;}

.sys_con.b2b_sys_con .sys_list .list .item.btn_item:hover .o_img.anim:after{ display: block; content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-border-radius: 50%; border-radius: 50%; -webkit-animation: anim-out 2s 1s ease-out infinite; animation: anim-out 2s 1s ease-out infinite; z-index: 2;}

.sys_con.b2b_sys_con .sys_list.list0 .list .item .o_img .img,
.sys_con.b2b_sys_con .sys_list.list0 .list .item .o_img.anim:before,
.sys_con.b2b_sys_con .sys_list.list0 .list .item .o_img.anim:after{ background: #419cff;}
.sys_con.b2b_sys_con .sys_list.list1 .list .item .o_img .img,
.sys_con.b2b_sys_con .sys_list.list1 .list .item .o_img.anim:before,
.sys_con.b2b_sys_con .sys_list.list1 .list .item .o_img.anim:after{ background: #37c99f;}
.sys_con.b2b_sys_con .sys_list.list2 .list .item .o_img .img,
.sys_con.b2b_sys_con .sys_list.list2 .list .item .o_img.anim:before,
.sys_con.b2b_sys_con .sys_list.list2 .list .item .o_img.anim:after{ background: #ff8f6d;}
.sys_con.b2b_sys_con .sys_list.list3 .list .item .o_img .img,
.sys_con.b2b_sys_con .sys_list.list3 .list .item .o_img.anim:before,
.sys_con.b2b_sys_con .sys_list.list3 .list .item .o_img.anim:after{ background: #68d172;}
.sys_con.b2b_sys_con .sys_list.list4 .list .item .o_img .img,
.sys_con.b2b_sys_con .sys_list.list4 .list .item .o_img.anim:before,
.sys_con.b2b_sys_con .sys_list.list4 .list .item .o_img.anim:after{ background: #7282f3;}
.sys_con.b2b_sys_con .sys_list.list5 .list .item .o_img .img,
.sys_con.b2b_sys_con .sys_list.list5 .list .item .o_img.anim:before,
.sys_con.b2b_sys_con .sys_list.list5 .list .item .o_img.anim:after{ background: #ffa650;}
.sys_con.b2b_sys_con .sys_list.list6 .list .item .o_img .img,
.sys_con.b2b_sys_con .sys_list.list6 .list .item .o_img.anim:before,
.sys_con.b2b_sys_con .sys_list.list6 .list .item .o_img.anim:after{ background: #4bc5ed;}
.sys_con.b2b_sys_con .sys_list.list7 .list .item .o_img .img,
.sys_con.b2b_sys_con .sys_list.list7 .list .item .o_img.anim:before,
.sys_con.b2b_sys_con .sys_list.list7 .list .item .o_img.anim:after{ background: #7282f3;}
.sys_con.b2b_sys_con .sys_list.list8 .list .item .o_img .img,
.sys_con.b2b_sys_con .sys_list.list8 .list .item .o_img.anim:before,
.sys_con.b2b_sys_con .sys_list.list8 .list .item .o_img.anim:after{ background: #c6bca4;}

/* 涟漪特效代码 */
@-webkit-keyframes anim-out{
    0%{ opacity: 0.5;}
    100%{ transform: scale(1.5); opacity: 0;}
}

@-moz-keyframes anim-out{
    0%{ opacity: 0.5;}
    100%{ transform: scale(1.5); opacity: 0;}
}

@-ms-keyframes anim-out{
    0%{ opacity: 0.5;}
    100%{ transform: scale(1.5); opacity: 0;}
}

@keyframes anim-out{
    0%{ opacity: 0.5;}
    100%{ transform: scale(1.5); opacity: 0;}
}

#s_footer{ display: none;}
#s_global_bottom_box{ display: none;}

@media screen and (max-width: 1800px){
	#system .sys_con{ margin: 0 auto 0 16%;}
}
@media screen and (max-width: 1450px){
	#system .sys_con{ margin: 0 1% 0 auto; width: 80%; min-width: auto;}
	.sys_con .sys_list .list{ grid-template-columns: repeat(3, 1fr);}
}
@media screen and (max-width: 1050px){
	#system .sys_con{ margin: 0 1% 0 auto; width: 75%;}
	.sys_con .sys_list .list{ grid-template-columns: repeat(2, 1fr);}
}
@media screen and (max-width: 750px){
	#w1000{ padding-bottom: 1rem;}
	#w1000 .wrap{ width: 98%; max-width:750px; min-width: auto; margin:0 auto;}
	.min{ min-width: auto;}
	.container{ padding:0 0.2rem;}
	#header{ display: none;}
	.header_fill{ display: none;}
	#footer{ display: none;}
	#footer_alert{ display: none;}
	#s_footer{ display: block;}
	#s_global_bottom_box{ display: block;}
	.banner{ display: none;}
	.m_banner{ display: block; width: 100%;}

	#s_global_bottom_box{ width:100%; height:1rem; line-height:1rem; position:fixed; bottom:0; left:0; background:rgba(53,178,158,0.95); text-align:center; z-index:100;}
	#s_global_bottom_box a{ width:33%; height:100%; display:block; float:left; color:#fff; font-size:0.36rem; text-indent:0.3rem;}
	#s_global_bottom_box a:nth-child(1){ background:url(/mweb/images/global_bottom_tel.png) 0.45rem center no-repeat; background-size:auto 0.45rem;}
	#s_global_bottom_box a:nth-child(2){ background:url(/mweb/images/global_bottom_service.png) 0.1rem center no-repeat; background-size:auto 0.45rem;}
	#s_global_bottom_box a:nth-child(3){ background:url(/mweb/images/global_bottom_qiao.png) 0.1rem center no-repeat; background-size:auto 0.45rem;}

	#s_footer{ padding:0.2rem 0; background:#f7f7f7;}
	#s_footer .rows{ text-align:center; font-size:0.28rem; color:#6d6d6d; padding:0.03rem 0;}
	#s_footer .rows a{ font-size:0.28rem; color:#6d6d6d;}
	#s_footer_blank{ height:1rem;}

	.global_subbanner{ height: 2.9rem;}
	#banner .global_subbanner, #in_banner .global_subbanner{ padding-top: 9.3333vw;}
 	#in_banner{ height: 53.3333vw;}
	#banner .global_subbanner .title, 
	#in_banner .global_subbanner .title{ height: .68rem; line-height: .68rem; font-size: 0.4rem;}
	#banner .global_subbanner .intro, 
	#in_banner .global_subbanner .intro{ margin-top: 0.2rem; height: 1.04rem; line-height: .52rem; font-size: .36rem; color: #474848;}
	.global_category{ display: none;}
	/*
	.global_category .global_category_box{ margin: 0 auto; padding: 0; width: 98%;}
	.global_category .global_category_abs a{ margin: 0; margin-left: 1%; padding: 0;}
	.global_category .global_category_abs a:first-child{ margin-left: 0;}
	*/

	#system .sys_menu{ display: none;}
	#system .sys_con{ margin-top: .5rem; padding-bottom: 1.2rem; width: 100%;}
	#system .sys_con .sys_list{ margin-top: .65rem;}
	#system .sys_con .sys_list:first-child{ margin-top: 0;}
	#system .sys_con .sys_list .sys_title{ height: auto; line-height: .7rem; font-size: .5rem; color: #333;}
	#system .sys_con .sys_list .sys_title:before{ display: none;}
	#system .sys_con .sys_list .sys_title .sys_txt{ font-size: .7rem;}
	#system .sys_con .sys_list .list{ grid-gap: 0; margin-top: .7rem;}
	#system .sys_con .sys_list .list .item{ padding: .38rem 0 .57rem; border-left: 0; border-top: 0; -webkit-border-radius: 0; border-radius: 0;}
	#system .sys_con .sys_list .list .item:nth-child(even){ border-left: 0; border-right: 0;}
	#system .sys_con .sys_list .list .item:nth-child(2),
	#system .sys_con .sys_list .list .item:first-child{ border-top: 1px solid #e6e6e6;}
	#system .sys_con .sys_list .list .item .title{ margin-top: .4rem; padding: 0 .45rem; height: auto; line-height: .52rem; font-size: .32rem; -webkit-box-sizing: border-box; box-sizing: border-box;}
	#system .sys_con .sys_list .list .item .brief{ display: none;}
	#system .sys_con .sys_list .list .item .m_brief{ display: block; margin-top: .34rem; padding: 0 0.1rem; line-height: .38rem; font-size: .28rem; color: #999; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box;}
	#system .sys_con .sys_list .list .item .btn{ position: relative; bottom: -.1rem; margin: .07rem 0 0; height: .35rem; line-height: .35rem; font-size: .2rem;}
	#system #marketing{ width: 100%;}

	.global_bottom_ad .ad_table .ad_table_cell span{ display: inline-block; width: 100%; height: .46rem; line-height: .46rem; font-size: .4rem;}
	.global_bottom_ad .ad_table .ad_table_cell a{ display: inline-block; margin-top: .2rem; width: 2.4rem; height: .47rem; line-height: .47rem; margin-left: 0; font-size: .18rem;}
}