/**{ margin: 0; padding: 0; font-size: 16px; color: #222327; box-sizing: border-box;

font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "SF Pro Text", "Helvetica Neue", Helvetica, "PingFang SC", "Segoe UI", Roboto, "Hiragino Sans GB", 'arial', 'microsoft yahei ui', "Microsoft YaHei", SimSun, sans-serif;}

img{ border: 0; -ms-interpolation-mode: bicubic;}

a,p,span,h1,i{ text-decoration: none; margin: 0;}

li,ul{ list-style: none;}

input,button{ border: none; outline: none; background: none; margin: 0;}

a,button{cursor: pointer;}

a,li,img,div{ -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

-webkit-user-select: none;

-moz-user-focus: none;

-moz-user-select: none;}


*/


.container{ margin: 0 auto;}

.rel{ position: relative;}

.flow{ overflow: hidden;}

.clear{ clear: both;}

.fl{ float: left;}

.fr{ float: right;}

.container::after{ content:''; display:block; width: 0; height:0; clear:both; visibility:hidden;}

.product_title{ position: relative;}

.product_title p{ color: #eeeff7; text-transform: uppercase;}

.product_title h1{ color: #1c1f3e; position: absolute; left: 0; bottom: 0; z-index: 9;}

.product_title .pro_col01{ color: #354a9d;}

.product_title .pro_col02{ color: #fff;}

.product_title .pro_col03{ color: #f0f0f0; opacity: 0.2;}

.pro_btn{ display: inline-flex; align-items: center; border: solid 1px #333; transition: all 0.2s;}

.pro_btn_col{ border: solid 1px #fff;}

.pro_btn_col span{ color: #fff;}

.about_word{ color: #767785; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}

.about_pic{ width: 100%; overflow: hidden; transition: all 0.5s;}

.about_pic img{ display: block; width: 100%; height: 100%; object-fit: cover;}

.pro_btn img{ display: block;}

.pro_btn .pro_icon02{ display: none;}

.pro_btn:hover{ background: #0144a8; border: solid 1px #0144a8;}

.pro_btn:hover>span{ color: #fff;}

.pro_btn:hover>.pro_icon01{ display: none;}

.pro_btn:hover>.pro_icon02{ display: block;}

.product_btn{ position: absolute; right: 0; bottom: 0; z-index: 9;}

.product_btn a{ color:#fff}

.popular{ /*background: url(../images/popular_bg.jpg) center no-repeat;*/ background-size: cover;}

.popular_ul ul{ overflow: hidden;}

.popular_ul li{ overflow: hidden; float: left;}

.popular_pic01{ float: left; width: 100%; overflow: hidden; position: relative;}

.popular_pic02{ float: left; background: #fff; position: relative; overflow: hidden;}

.popular_pic01 .popular_tu{ width: 100%; height: 100%; object-fit: cover;}

.popular_pic01 .popular_w{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 99;}

.popular_w h1{ color: #fff;}

.popular_w span{ text-transform: capitalize; color: #fff;}

.popular_pic02 p{ color: #767785; opacity: 0; visibility: hidden; transition: all 0.1s ease 0.2s;}

.popular_on .popular_pic02{ transition: all 0.8s;}

.popular_on .popular_pic02 p{ opacity: 1; visibility: visible;}

.ar_btn{ position: absolute; z-index: 9; border: solid 1px #767785; display: inline-flex; align-items: center; transition: opacity 0.3s ease 0.4s,background 0.2s; opacity: 0; visibility: hidden;}

.popular_on .popular_pic02 .ar_btn{ opacity: 1; visibility: visible;}

.ar_btn span{ color: #767785;}

.ar_btn:hover{ background: #293d8d; border: solid 1px #293d8d;}

.ar_btn img{ display: block;}

.ar_btn .ar_01{ display: none;}

.ar_btn:hover>span{ color: #fff;}

.ar_btn:hover>.ar_02{ display: none;}

.ar_btn:hover>.ar_01{ display: block;}