@charset "utf-8"; /* CSS Document */ *{ box-sizing: border-box !important; font-family: Microsoft Yahei,Tahoma,Arial,Helvetica,STHeiti; word-break: normal !important; word-wrap: normal !important; /* font-weight:300;*/ } .h_icon{ font-family: 'iconfont2' !important; font-weight:normal; font-style:normal; } body { width: 100vw; overflow: hidden; } html { overflow-y: scroll; } body * a,img{ transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */ -webkit-transition: all 0.5s; /* Safari 和 Chrome */ -o-transition: all 0.5s; /* Opera */ } .gr_ani * { transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */ -webkit-transition: all 0.5s; /* Safari 和 Chrome */ -o-transition: all 0.5s; /* Opera */ } .gr_ani *:before { transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */ -webkit-transition: all 0.5s; /* Safari 和 Chrome */ -o-transition: all 0.5s; /* Opera */ } .gr_ani *:after { transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */ -webkit-transition: all 0.5s; /* Safari 和 Chrome */ -o-transition: all 0.5s; /* Opera */ } /*------------------------------------------------------------------------------------------------------------*/ /*Root Start*/ /*color*/ :root { --main-color:#2797d5; --main-color2:#e77912; --active-color: rgba(251,95,1,1); --main-bg: rgba(251,95,1,1); --list-bg: #f5f5f5; --linear-bg: linear-gradient(180deg, #024d9b, #024d90); } /*fontSize*/ @media only screen and (min-width: 769px) { :root { --f80: 80px; --f50: 50px; --f40: 40px; --f36: 36px; --f30: 30px; --f24: 24px; --f22: 22px; --f20: 20px; --f18: 18px; } .gr_pchide { display: none !important; } } @media only screen and (max-width: 1200px) and (min-width: 769px) { :root { --f80: 40px; --f50: 36px; --f40: 36px; --f36: 30px; } } @media only screen and (max-width: 768px) { :root { --f80: 24px; --f50: 22px; --f40: 22px; --f36: 20px; --f30: 20px; --f24: 20px; --f22: 18px; --f20: 16px; --f18: 16px; } .gr_mohide { display: none !important; } .gr_NewsdtTit { font-size: 22px !important; } .gr_motit { font-size: 20px !important; } .gr_mohide { display: none !important; } input::-webkit-input-placeholder { font-size: 14px; line-height: 1.42857143; } input::-moz-placeholder { font-size: 14px; line-height: 1.42857143; } input:-ms-input-placeholder { font-size: 14px; line-height: 1.42857143; } input:-moz-placeholder { font-size: 14px; line-height: 1.42857143; } } :root { overflow-y: auto; overflow-x: hidden; } :root body { position: absolute; } /*Root End*/ /*------------------------------------------------------------------------------------------------------------*/ /*flexBox*/ .gr_flexline { display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本语法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本语法: IE 10 */ display: -webkit-flex; /* 新版本语法: Chrome 21+ */ display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */ -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; -moz-flex-wrap: nowrap; flex-wrap: nowrap; } .gr_flexwrap { display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本语法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本语法: IE 10 */ display: -webkit-flex; /* 新版本语法: Chrome 21+ */ display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */ -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; -moz-flex-wrap: wrap; flex-wrap: wrap; } .gr_flex_between { -webkit-box-pack: justify; -moz-justify-content: space-between; -webkit-justify-content: space-between; justify-content: space-between; } .gr_flex_Xend { -webkit-box-pack: end; -moz-justify-content: flex-end; -webkit-justify-content: flex-end; justify-content: flex-end; } .gr_flex_Xcenter { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .gr_flex_Yend { -webkit-align-items: flex-end; align-items: flex-end; } .gr_flex_Ycenter { -webkit-box-align: center; -moz-align-items: center; -webkit-align-items: center; align-items: center; } /*------------------------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------------------------------------*/ /*排列布局 fa_ln(一排n个)*/ .gr_l2 { display: inline-block; width: calc((100% - 50px) / 2); margin-right: 50px; margin-bottom: 50px; } .gr_l3 { display: inline-block; width: calc((100% - 60px) / 3); margin-right: 30px; margin-bottom: 30px; } .gr_l4 { display: inline-block; width: calc((100% - 6%) / 4); margin-right: 2%; margin-bottom: 30px; } .gr_l5 { display: inline-block; width: calc((100% - 80px) / 5); margin-right: 20px; margin-bottom: 20px; } .gr_l6 { display: inline-block; width: calc((100% - 100px) / 6); margin-right: 20px; margin-bottom: 20px; } @media only screen and (min-width: 769px) { .gr_l2:nth-child(2n), .gr_l3:nth-child(3n), .gr_l4:nth-child(4n), .gr_l5:nth-child(5n), .gr_l6:nth-child(6n) { margin-right: 0; } } @media only screen and (max-width: 768px) { .gr_l2, .gr_l3, .gr_l4 { display: block; width: 100%; margin: 10px 0; } .gr_l5, .gr_l6 { display: block; width: calc((100% - 10px) / 2); margin-right: 10px; margin-bottom: 10px; } .gr_l5:nth-child(2n), .gr_l6:nth-child(2n) { margin-right: 0; } } /*------------------------------------------------------------------------------------------------------------*/ /*加载动效 topshow(从上往下)fa_LeftShow (从左往右) */ .delighter { position: relative; } .gr_TopShow, .gr_LeftShow, .gr_RightShow, .gr_BottomShow { overflow: hidden; } .gr_TopShow.delighter:before { width: 100%; position: absolute; height: 100%; top: 0; left: 0; transform: translateY(0%); display: block; background: #fff; z-index: 10; content: ""; transition: 1s cubic-bezier(0.68, 0.54, 0.14, 0.96) 0.5s; } .gr_TopShow.started.delighter:before { transform: translateY(100%); } .gr_LeftShow.delighter:before { width: 100%; position: absolute; height: 100%; top: 0; left: 0; transform: translateX(0%); display: block; background: #fff; z-index: 10; content: ""; transition: 1s cubic-bezier(0.68, 0.54, 0.14, 0.96) 0.5s; } .gr_LeftShow.started.delighter:before { transform: translateX(100%); } .gr_RightShow.delighter:before { width: 100%; position: absolute; height: 100%; top: 0; left: 0; transform: translateX(0%); display: block; background: #fff; z-index: 10; content: ""; transition: 1s cubic-bezier(0.68, 0.54, 0.14, 0.96) 0.5s; } .gr_RightShow.started.delighter:before { transform: translateX(-100%); } .gr_BottomShow.delighter:before { width: 100%; position: absolute; height: 100%; top: 0; left: 0; transform: translateX(0%); display: block; background: #fff; z-index: 10; content: ""; transition: 1s cubic-bezier(0.68, 0.54, 0.14, 0.96) 0.5s; } .gr_BottomShow.started.delighter:before { transform: translateY(-100%); } /*------------------------------------------------------------------------------------------------------------*/ /*homeTit*/ .gr_homeTitBox { text-align: center; margin-bottom: 40px; } .gr_homeTitCn { color: #222222 !important; font-size: 32px !important; margin: 0; padding: 0; font-weight: 700; } .gr_homeTitCn b { color: var(--main-color); font-weight: normal; } .gr_homeTitFlex { align-items: flex-end; } .gr_homeTitEn { font-size: 2.3vw !important; text-transform: uppercase; color: #1b1f2b !important; font-weight: 700; } .gr_homeTitSum { font-size: 16px; color: #999; margin-top: 12px; } @media only screen and (max-width: 768px) { .gr_homeTitBox { margin-bottom: 20px; } .gr_homeTitCn { font-size: 24px !important; } .gr_homeTitEn { font-size: 22px; } .gr_homeTitSum { font-size: 14px; } .p_breadcrumb { display: flex; flex-wrap: wrap; } } /*------------------------------------------------------------------------------------------------------------*/ /*swiperBtn*/ .gr_SwiperBox .swiper-pagination-bullet-active { background: var(--main-color); } .gr_SwiperBox { position:relative; } .gr_SwiperBox .gr_SwiperBtn { z-index: 999 !important; background: rgba(0,0,0,0.6) !important; opacity: 0.5 !important; top: 50% !important; transform: translateY(-50%) !important; margin-top: 0 !important; cursor: pointer !important; color:#fff; transition:all 0.5s; } .gr_SwiperBox .gr_SwiperBtn:after{ color:#fff; } .gr_SwiperBox .gr_SwiperBtn:hover{ background:var(--main-color) !important; } /*------------------------------------------------------------------------------------------------------------*/ /*h_title*/ h2{ font-size: 30px !important; color: var(--main-color) !important; } h3{ font-size: var(--f40) !important; color: #333 !important; text-transform: capitalize; } /*------------------------------------------------------------------------------------------------------------*/ .swiper { position: relative; overflow: hidden; }