attestation-new.css 45 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509
  1. @charset "utf-8";
  2. li{list-style:none}
  3. /**
  4. * PC端
  5. */
  6. @media screen and (min-width:768px){
  7. [v-cloak] {
  8. opacity: 0;
  9. }
  10. .el-carousel__item {
  11. display: flex;
  12. justify-content: space-between;
  13. align-items: center;
  14. }
  15. .el-carousel__item h3 {
  16. color: #475669;
  17. font-size: 14px;
  18. opacity: 0.75;
  19. line-height: 200px;
  20. margin: 0;
  21. }
  22. .el-carousel__indicator--horizontal .el-carousel__button {
  23. width: 6px;
  24. height: 6px;
  25. background: transparent;
  26. background: rgba(255, 111, 0, 0.45);
  27. border-radius: 50%;
  28. opacity: 1;
  29. }
  30. .el-carousel__indicator--horizontal.is-active .el-carousel__button{
  31. width: 6px;
  32. height: 6px;
  33. background: #FF5B00;
  34. border-radius: 50%;
  35. opacity: 1;
  36. }
  37. .section_banner{width: 100%;height: 420px;background: url("/img/activity/attestation/Authentication-new.png");background-size: cover;-webkit-box-sizing: border-box;box-sizing: border-box;padding-top: 140px;}
  38. .section_banner h1{font-size: 60px;line-height: 36px;margin-bottom: 30px;text-align: center;color: #FFFFFF;}
  39. .section_banner p{font-size: 36px;line-height: 36px;margin-bottom: 30px;text-align: center;color: #FFFFFF;}
  40. .section{width: 100%;}
  41. .inner{width: 1200px;margin: 0 auto;}
  42. .section_main{width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;}
  43. /*section_main 01*/
  44. .section_main.one{height: 723px;background-color: #FFFFFF;padding: 80px 0;}
  45. .section_main.one .title{width: 100%;margin-bottom: 80px;}
  46. .section_main.one .title h1{line-height: 40px;text-align: center;font-size: 40px;color: #333333;font-weight: normal;}
  47. .section_main.one .section_content{width: 100%;height: 404px;-webkit-box-sizing: border-box;box-sizing: border-box;}
  48. .section_main.one .section_content .image{width: 568px;height: 404px;float: left;}
  49. .section_main.one .section_content .image img{width: 100%;height: 100%;display: block;}
  50. .section_main.one .section_content .text{width: 476px;height: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 62px 0 0 0;float: right;}
  51. .section_main.one .section_content .text .h1{font-size: 28px;line-height: 36px;color: #464646;text-align: justify;margin-bottom: 52px;}
  52. .section_main.one .section_content .text p{font-size: 16px;line-height: 32px;color: #707070;padding-left: 10px;position: relative;}
  53. .section_main.one .section_content .text p:before{content: '';width: 6px;height: 6px;background-color: #D4D4D4;position: absolute;left: 0;top: 13px;border-radius: 50%;}
  54. /*section_main 02*/
  55. .section_main.two{height: 560px;background-color: #FFF8F9;padding: 98px 0;}
  56. .section_main.two .title{width: 100%;margin-bottom: 115px;}
  57. .section_main.two .title h1{line-height: 40px;text-align: center;font-size: 40px;color: #333333;font-weight: normal;}
  58. .section_main.two .title p{line-height: 40px;text-align: center;font-size: 16px;color: #707070;font-weight: normal;}
  59. .section_main.two .section_content{width: 100%;height: 140px;-webkit-box-sizing: border-box;box-sizing: border-box;}
  60. .section_main.two .section_content .section_li{width: 100px;height: 140px;float: left;margin: 0 100px;}
  61. .section_main.two .section_content .section_li .li_icon{width: 100px;height: 100px;display: block;margin-bottom: 30px;}
  62. .section_main.two .section_content .section_li p{line-height: 20px;font-size: 20px;color: #333333;text-align: center;}
  63. /*section_main 03*/
  64. .section_main.three{height: 720px;background: url("/img/activity/attestation/section_image_bg.png");background-size: cover;padding: 100px 0;}
  65. .section_main.three .title{width: 100%;margin-bottom: 106px;}
  66. .section_main.three .title h1{line-height: 40px;text-align: center;font-size: 40px;color: #FFFFFF;font-weight: normal;}
  67. .section_main.three .section_content{width: 100%;height: auto;-webkit-box-sizing: border-box;box-sizing: border-box;}
  68. .section_main.three .section_content .text-left{width:757px;float: left;}
  69. .section_main.three .section_content .text-right{width:443px;float: left;}
  70. .section_main.three .section_content .text-left .text-ti{width:100%;height:62px;margin-bottom: 84px;}
  71. .section_main.three .section_content .text-left .text-ti-a{width:200px;height:62px;-webkit-box-sizing:border-box;box-sizing:border-box;float: left;border: 1px solid transparent;margin-left: 48px;text-align: center;line-height: 60px;font-size: 24px;color: #FFFFFF;opacity: 0.7;-o-transition: all .4s;-webkit-transition: all .4s;transition: all .4s;}
  72. .section_main.three .section_content .text-left p{width: 100%;padding-left: 46px;height: 23px;line-height: 23px;font-size: 18px;color: #FFFFFF;position: relative;margin-bottom: 66px;opacity: 0.7;-o-transition: all .4s;-webkit-transition: all .4s;transition: all .4s;}
  73. .section_main.three .section_content .text-left p:before{content: '';width: 23px;height: 23px;background: url(/img/activity/attestation/section_icon_x.png);position: absolute;left: 0;top: 0;border-radius: 50%;}
  74. .section_main.three .section_content .text-right .text-ti{width:100%;height:62px;margin-bottom: 84px;}
  75. .section_main.three .section_content .text-right .text-ti-a{width:200px;height:62px;-webkit-box-sizing:border-box;box-sizing:border-box;float: left;border: 1px solid transparent;margin-left: 48px;text-align: center;line-height: 62px;font-size: 24px;color: #FFFFFF;opacity: 0.7;-o-transition: all .4s;-webkit-transition: all .4s;transition: all .4s;}
  76. .section_main.three .section_content .text-right p{width: 100%;padding-left: 46px;height: 23px;line-height: 23px;font-size: 18px;color: #FFFFFF;position: relative;margin-bottom: 66px;opacity: 0.7;-o-transition: all .4s;-webkit-transition: all .4s;transition: all .4s;}
  77. .section_main.three .section_content .text-right p:before{content: '';width: 23px;height: 23px;background: url(/img/activity/attestation/section_icon_d.png);position: absolute;left: 0;top: 0;border-radius: 50%;}
  78. .section_main.three .section_content .text-left:hover p{opacity: 1;}
  79. .section_main.three .section_content .text-left:hover .text-ti-a{border: 1px solid #FFFFFF;opacity: 1;}
  80. .section_main.three .section_content .text-right:hover p{opacity: 1;}
  81. .section_main.three .section_content .text-right:hover .text-ti-a{border: 1px solid #FFFFFF;opacity: 1;}
  82. /*section_main 04*/
  83. .section_main.four{height: 838px;background-color: #FFFFFF;padding: 100px 0;position: relative}
  84. .section_main.four .el-carousel__arrow{
  85. display: none;
  86. }
  87. .section_main.four .pageNoChangeLeft {
  88. position: absolute;
  89. width: 40px;
  90. height: 48px;
  91. background-color: rgb(255, 255, 255);
  92. border-radius: 2px;
  93. color: rgb(178, 178, 178);
  94. top: 450px;
  95. left: 250px;
  96. border: 1px solid #ccc;
  97. text-align: center;
  98. line-height: 48px;
  99. font-size: 17px;
  100. cursor: pointer;
  101. }
  102. .section_main.four .pageNoChangeRight {
  103. position: absolute;
  104. width: 40px;
  105. height: 48px;
  106. background-color: rgb(255, 255, 255);
  107. border-radius: 2px;
  108. color: rgb(178, 178, 178);
  109. top: 450px;
  110. right: 250px;
  111. border: 1px solid #ccc;
  112. text-align: center;
  113. line-height: 48px;
  114. font-size: 17px;
  115. cursor: pointer;
  116. }
  117. .section_main.four .isActivePage {
  118. color: #FF5B00;
  119. border: 1px solid #FF5B00;
  120. }
  121. .section_main.four .title{width: 100%;margin-bottom: 100px;}
  122. .section_main.four .title h1{line-height: 40px;text-align: center;font-size: 40px;color: #333333;font-weight: normal;}
  123. .section_main.four .section_content{width: 100%;height: 460px;-webkit-box-sizing: border-box;box-sizing: border-box;}
  124. .section_main.four .section_content .authlist {
  125. cursor: pointer;
  126. width: 8px;
  127. height: 8px;
  128. background: #FF990066;
  129. border-radius: 50%;
  130. }
  131. .section_main.four .section_content .isAuthlist {
  132. background: #FF5B00;
  133. cursor: pointer;
  134. width: 8px;
  135. height: 8px;
  136. border-radius: 50%;
  137. }
  138. .section_main.four .section_content .section_li{width: 288px;height: 380px;float: left;position: relative;margin-right: 15px;-webkit-box-sizing: border-box;box-sizing: border-box;border-radius: 4px;float: left; vertical-align: top;-webkit-perspective: 1000px;perspective: 1000px;}
  139. .section_main.four .section_content .section_li:last-child{margin-right: 0;}
  140. .section_main.four .section_content .section_li .box{position: absolute;height: 100%;width: 100%;-webkit-backface-visibility: hidden;backface-visibility: hidden;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transition: ease-in-out 600ms;-o-transition: ease-in-out 600ms;transition: ease-in-out 600ms;}
  141. .section_main.four .section_content .section_li .bg{width: 100%;height: 380px;background-size: 100% 100%;}
  142. .section_main.four .section_content .section_li .front{-webkit-box-sizing: border-box;box-sizing: border-box;
  143. display: flex;
  144. flex-direction: column;
  145. justify-content: space-around;border:1px solid #D4D4D4;border-radius: 4px;padding: 32px 0;}
  146. .section_main.four .section_content .section_li .front .icon{width: 100px;height: 100px;display: block;margin: 0 auto;border-radius: 50%;border: 1px solid #cccccc;}
  147. .section_main.four .section_content .section_li .front h1{line-height: 20px;font-size: 20px;text-align: center;font-weight: normal;color: #333333;}
  148. .section_main.four .section_content .section_li .front p{text-align: center;font-size: 20px;line-height: 20px;color: #333333;}
  149. .section_main.four .section_content .section_li .front .isAuthH1 {
  150. line-height: 20px;font-size: 20px;text-align: center;color: #FFFFFF;font-weight: normal;
  151. }
  152. .section_main.four .section_content .section_li .front .isAuthBtn {
  153. background: linear-gradient(-90deg, #FFBA63, #F3920D);border: 1px solid #fff;color: #fff;
  154. }
  155. .section_main.four .section_content .section_li .back{-webkit-transform: rotateY(-180deg);transform: rotateY(-180deg);}
  156. .section_main.four .section_content .section_li .back .content-box{width: 100%;height: 100%;position: absolute;top: 0;left: 0;-webkit-box-sizing: border-box;box-sizing: border-box;display: flex;flex-direction: column;justify-content: space-around;padding: 32px 0;}
  157. .section_main.four .section_content .section_li .back .content-box h1{line-height: 20px;font-size: 20px;text-align: center;color: #FFFFFF;font-weight: normal;}
  158. .section_main.four .section_content .section_li .back .content-box .line{width: 32px;height: 2px;background: #FFFFFF;margin: 0 auto;}
  159. .section_main.four .section_content .section_li .back .content-box p{line-height: 20px;font-size: 16px;text-align: center;color: #FFFFFF;}
  160. .section_main.four .section_content .section_li .back .content-box .icon {
  161. width: 100px;height: 100px;display: block;margin: 0 auto;border-radius: 50%;border: 1px solid #cccccc;
  162. }
  163. .section_main.four .section_content .section_li .isAuthActive {
  164. background: linear-gradient(-90deg, #FFBA63, #F3920D);
  165. }
  166. .section_main.four .section_content .section_li .back .bg1{
  167. background: linear-gradient(-90deg, #FFBA63, #F3920D);
  168. }
  169. .section_main.four .section_content .section_li .back .bg2{
  170. background: linear-gradient(-90deg, #3bb5d2, #0160aa);
  171. }
  172. .section_main.four .section_content .section_li .back .bg3{
  173. background: linear-gradient(-90deg, #1b3250, #0b1529);
  174. }
  175. .section_main.four .section_content .section_li .back .bg4{background: linear-gradient(-90deg, #77b2d0, #4496c3);}
  176. .section_main.four .section_content .section_li .back .bg5{background: linear-gradient(-90deg, #8395b3, #cddbef);}
  177. .section_main.four .section_content .section_li:hover .front{-webkit-transform: rotateY(180deg);transform: rotateY(180deg);}
  178. .section_main.four .section_content .section_li:hover .back{-webkit-transform: rotateY(0deg);transform: rotateY(0deg);}
  179. /*section_main 05*/
  180. .section_main.five{height: 700px;background: #F7F7F7;padding: 100px 0;}
  181. .section_main.five .title{width: 100%;margin-bottom: 106px;}
  182. .section_main.five .title h1{line-height: 40px;text-align: center;font-size: 40px;color: #333333;font-weight: normal;}
  183. .section_main.five .section_content{width: 100%;height: 333px;-webkit-box-sizing: border-box;box-sizing: border-box;}
  184. .section_main.five .section_content .text-left{width:632px;float: left;margin-right: 234px;}
  185. .section_main.five .section_content .text-left img{width:632px;height: 333px;display: block;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transition: ease-in-out 400ms;-o-transition: ease-in-out 400ms;transition: ease-in-out 400ms;}
  186. .section_main.five .section_content .text-right{float: left;-webkit-box-sizing: border-box;box-sizing: border-box;padding-top: 90px;}
  187. .section_main.five .section_content .text-right .text-right-text{width: 325px;height: 123px;position: relative;}
  188. .section_main.five .section_content .text-right .text-right-text img{width: 130px;height: 123px;display: block;}
  189. .section_main.five .section_content .text-right .text-right-text .p{line-height: 28px;font-size: 28px;text-align: center;color: #464646;position: absolute;top: 45px;right: 0;}
  190. .section_main.five .section_content:hover .text-left img{-webkit-transform: translateY(-20px);-ms-transform: translateY(-20px);transform: translateY(-20px);}
  191. /*section_main 06*/
  192. .section_main.six{height: 700px;background: #FFFFFF;padding: 115px 0;}
  193. .section_main.six .section_content{width: 100%;height: 467px;-webkit-box-sizing: border-box;box-sizing: border-box;}
  194. .section_main.six .section_content .text-left{float: left;-webkit-box-sizing: border-box;box-sizing: border-box;padding-top: 130px;}
  195. .section_main.six .section_content .text-left .text-right-text{width: 325px;height: 123px;position: relative;}
  196. .section_main.six .section_content .text-left .text-right-text img{width: 148px;height: 123px;display: block;}
  197. .section_main.six .section_content .text-left .text-right-text .p{line-height: 28px;font-size: 28px;text-align: center;color: #464646;position: absolute;top: 45px;right: 0;}
  198. .section_main.six .section_content .text-right{width:633px;float: right;}
  199. .section_main.six .section_content .text-right img{width:632px;height: 467px;display: block;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transition: ease-in-out 400ms;-o-transition: ease-in-out 400ms;transition: ease-in-out 400ms;}
  200. .section_main.six .section_content:hover .text-right img{-webkit-transform: translateY(-20px);-ms-transform: translateY(-20px);transform: translateY(-20px);}
  201. /*section_main 07*/
  202. .section_main.seven{height: 700px;background: #F7F7F7;padding: 100px 0;}
  203. .section_main.seven .section_content{width: 100%;height: 497px;-webkit-box-sizing: border-box;box-sizing: border-box;}
  204. .section_main.seven .section_content .text-left{width:697px;float: left;margin-right: 176px;}
  205. .section_main.seven .section_content .text-left img{width:697px;height: 497px;display: block;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transition: ease-in-out 400ms;-o-transition: ease-in-out 400ms;transition: ease-in-out 400ms;}
  206. .section_main.seven .section_content .text-right{float: left;-webkit-box-sizing: border-box;box-sizing: border-box;padding-top: 162px;}
  207. .section_main.seven .section_content .text-right .text-right-text{width: 325px;height: 123px;position: relative;}
  208. .section_main.seven .section_content .text-right .text-right-text img{width: 146px;height: 123px;display: block;}
  209. .section_main.seven .section_content .text-right .text-right-text .p{line-height: 28px;font-size: 28px;text-align: center;color: #464646;position: absolute;top: 45px;right: 0;}
  210. .section_main.seven .section_content:hover .text-left img{-webkit-transform: translateY(-20px);-ms-transform: translateY(-20px);transform: translateY(-20px);}
  211. /*section_main 08*/
  212. .section_main.eight{height: 0;background: #FFFFFF;padding: 0;}
  213. .section_main.eight .title{width: 100%;margin-bottom: 71px;}
  214. .section_main.eight .title h1{line-height: 40px;text-align: center;font-size: 40px;color: #333333;font-weight: normal;}
  215. .section_main.eight .section_content{width: 100%;height: 483px;-webkit-box-sizing: border-box;box-sizing: border-box;}
  216. .section_main.eight .section_content img{width:987px;height: 483px;display: block;margin: 0 auto;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transition: ease-in-out 400ms;-o-transition: ease-in-out 400ms;transition: ease-in-out 400ms;}
  217. .section_main.eight .section_content:hover img{-webkit-transform: translateY(-20px);-ms-transform: translateY(-20px);transform: translateY(-20px);}
  218. /*section_main 09*/
  219. .section_main.nine{background: #F7F7F7;padding: 79px 0;}
  220. .section_main.nine .title{width: 100%;margin-bottom: 99px;}
  221. .section_main.nine .title h1{line-height: 40px;text-align: center;font-size: 40px;color: #333333;font-weight: normal;}
  222. .section_main.nine .title h1 span{ font-size: 24px;color: #999; }
  223. .section_main.nine .section_content{width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;height: 160px;}
  224. .section_main.nine .section_content .section_li{position: relative; width: 390px;height: 160px;-webkit-box-sizing: border-box;box-sizing: border-box;margin-right: 15px;margin-bottom: 15px;background-color: #FFFFFF;padding: 20px;-webkit-transition: all .4s;-o-transition: all .4s;transition: all .4s;border-bottom-width: 1px;border-bottom-color: #fff;border-bottom-style: solid; cursor: pointer;}
  225. /*.section_main.nine .section_content .section_li:nth-child(3n){margin-right: 0;}*/
  226. .section_main.nine .section_content .section_li img{float: left; width: 120px;height: 120px;display: block;border-radius: 50%;border: 1px solid #F5F5F5;}
  227. .section_main.nine .section_content .section_li .content{ float: left ;margin-left: 18px; width: 208px;}
  228. .section_main.nine .section_content .section_li .icon-marks{display: block; width: 40px;height: 40px;background: url(/img/activity/attestation/icon-marks.png) no-repeat center;background-size: 40px;}
  229. .section_main.nine .section_content .section_li .name{font-size: 16px;color: #333;line-height: 1.6em;margin-top: 20px; width: 100%; word-break: break-all; text-align: left; -webkit-transition: color .2s; -o-transition: color .2s; transition: color .2s}
  230. .section_main.nine .section_content .section_li:hover { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px);border-bottom-color: #BC1724}
  231. .section_main.nine .section_content .section_li:hover .name{color: #BC1724}
  232. .section_main.nine .section_content .section_li:hover .icon-marks{ background-image: url("/img/activity/attestation/icon-marks-active.png")}
  233. .section_main.nine .section_content.mobile{display: none !important;}
  234. /*section_main 10*/
  235. .section_main.ten{ background: #fff; padding: 0; }
  236. .section_main.ten .title{width: 100%;margin-bottom: 99px;}
  237. .section_main.ten .title h1{line-height: 40px;text-align: center;font-size: 40px;color: #333333;font-weight: normal;}
  238. .section_main.ten .section_content{width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
  239. .section_main.ten .section_content .section_li{ display: -webkit-box; display: -ms-flexbox; display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 288px; height: 218px; /*float: left ;margin:0 16px 16px 0;*/background-size: 288px;background-repeat: no-repeat; -webkit-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s;cursor: pointer}
  240. .section_main.ten .section_content .section_li .logo{ width: 98px;height: 98px;margin-bottom: 28px;border-radius: 50%; }
  241. .section_main.ten .section_content .section_li .name{ font-size: 20px; color: #fff }
  242. /*.section_main.ten .section_content .section_li:nth-child(1){background-image: url("/img/activity/attestation/section_bg_club_01.png");margin-right: 80px; }*/
  243. .section_main.ten .section_content .section_li:nth-child(1){background-image: url("/img/activity/attestation/section_bg_device_03.png"); margin-right: 16px;}
  244. .section_main.ten .section_content .section_li:nth-child(2){background-image: url("/img/activity/attestation/section_bg_device_01.png"); margin-right: 16px;}
  245. .section_main.ten .section_content .section_li:nth-child(3){background-image: url("/img/activity/attestation/section_bg_device_02.png"); margin-right: 16px;}
  246. .section_main.ten .section_content .section_li:nth-child(4){background-image: url("/img/activity/attestation/section_bg_device_04.png"); }
  247. .section_main.ten .section_content .section_li:hover { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px);border-bottom-color: #BC1724}
  248. .section_main.ten .section_content.mobile{display: none !important; }
  249. /*侧边栏-联系我们*/
  250. .section-tel{width: 52px;height: 92px;position: fixed;right: 0;top: 50%;z-index: 99;border-radius: 2px;-webkit-box-shadow: 0px 2px 12px 0px rgba(43, 43, 43, 0.1);box-shadow: 0px 2px 12px 0px rgba(43, 43, 43, 0.1);}
  251. .section-tel .box{width: 52px;height: 46px;background: #FFFFFF;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 9px 12px;cursor: pointer;position: relative;}
  252. .section-tel .box .code{width: 27px;height: 27px;background:#FFFFFF url("/img/activity/attestation/code_1.png");background-size: cover;-o-transition: all .1s;-webkit-transition: all .1s;transition: all .1s;}
  253. .section-tel .box .tel{width: 26px;height: 28px;background:#FFFFFF url("/img/activity/attestation/phone_1.png");background-size: cover;-o-transition: all .1s;-webkit-transition: all .1s;transition: all .1s;}
  254. .section-tel .box .box-code{width: 148px;height: 170px;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 17px 24px;background-color:#FFFFFF;position: absolute;left: -173px;top: -78px;display: none;-o-transition: all .4s;-webkit-transition: all .4s;transition: all .4s;border-radius: 4px;-webkit-box-shadow: 0px 2px 12px 0px rgba(43, 43, 43, 0.1);box-shadow: 0px 2px 12px 0px rgba(43, 43, 43, 0.1);}
  255. .section-tel .box .box-code:before{content: '';width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #FFFFFF;position: absolute;right:-10px;top: 50%;}
  256. .section-tel .box .box-code p{text-align: center;line-height: 20px;font-size: 14px;color: #333333;margin-bottom: 12px;}
  257. .section-tel .box .box-code img{width: 100px;height: 100px;display: block;}
  258. .section-tel .box .box-tel{width: 180px;height: 70px;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 20px 10px;background-color: #FFFFFF;position: absolute;left: -210px;top: -20px;display: none;-o-transition: all .4s;-webkit-transition: all .4s;transition: all .4s;border-radius: 4px;-webkit-box-shadow: 0px 2px 12px 0px rgba(43, 43, 43, 0.1);box-shadow: 0px 2px 12px 0px rgba(43, 43, 43, 0.1);}
  259. .section-tel .box .box-tel:before{content: '';width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #FFFFFF;position: absolute;right:-10px;top: 44%;}
  260. .section-tel .box .box-tel p{text-align: center;line-height: 30px;font-size: 20px;color: #BC1724;}
  261. .section-tel .box:hover{background:#BC1724;}
  262. .section-tel .box.code:hover .code{background:#BC1724 url("/img/activity/attestation/code_2.png");}
  263. .section-tel .box.tel:hover .tel{background:#BC1724 url("/img/activity/attestation/phone_2.png");}
  264. .section-tel .box.code:hover .box-code{left: -159px;display: block;}
  265. .section-tel .box.tel:hover .box-tel{left: -190px;display: block;}
  266. /*温馨提示*/
  267. .popup-tip { width: 100vw; height: 100vh;position: fixed; top: 0; left: 0;z-index: 9999; }
  268. .popup-tip .mask{position: fixed;width: 100vw; height: 100vh; top: 0; left: 0; z-index: 1;background: rgba(0,0,0,.7)}
  269. .popup-tip .content {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column; position: absolute; width: 380px;height: 320px; z-index: 2 ;top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);background: #fff;}
  270. .popup-tip .content .title{ font-size: 24px; color: #101010; }
  271. .popup-tip .content .tip { font-size: 16px; color: #BC1724;margin-top: 25px;}
  272. .popup-tip .content .close{ position: absolute; right: 8px;top: 8px; width: 36px;height: 36px; background: url("/img/activity/attestation/icon-close.png") no-repeat center; cursor: pointer;}
  273. /*底部*/
  274. .foot{width:100%;height:130px;background:#262626;}
  275. .footer{width:1190px;margin:0 auto;text-align:center;height: 130px;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 39px 0;}
  276. .footer p{line-height: 30px;color: #FFFFFF;}
  277. .footer p span{margin:0 5px}
  278. .footer p span a{color: #FFFFFF;}
  279. .footer p span img.icp{width: 18px;height: 18px;display: inline-block;}
  280. }
  281. /**
  282. * 移动端
  283. */
  284. @media screen and (max-width:768px){
  285. [v-cloak] {
  286. opacity: 0;
  287. }
  288. .section_banner{width: 100%;height: 42vw;background: url("/img/activity/logo-new/H5-banner_.png");background-size: cover;-webkit-box-sizing: border-box;box-sizing: border-box;padding-top: 11vw;}
  289. .section_banner h1{font-size: 6.4vw;line-height: 36px;margin-bottom: 4.3vw;text-align: center;color: #FFFFFF;}
  290. .section_banner p{font-size: 4vw;line-height: 4vw;text-align: center;color: #FFFFFF;}
  291. .section{width: 100%;}
  292. .inner{width: 100%;}
  293. .section_main{width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;}
  294. /*section_main 01*/
  295. .section_main.one{height: 131.3vw;background-color: #FFFFFF;padding: 10.5vw 0;}
  296. .section_main.one .title{width: 100%;margin-bottom: 10vw;}
  297. .section_main.one .title h1{line-height: 4.9vw;text-align: center;font-size: 4.8vw;color: #333333;font-weight: normal;}
  298. .section_main.one .section_content{width: 100%;height: auto;-webkit-box-sizing: border-box;box-sizing: border-box;}
  299. .section_main.one .section_content .image{width: 72.7vw;height: 51.7vw;margin: 0 auto;margin-bottom: 10vw;}
  300. .section_main.one .section_content .image img{width: 100%;height: 100%;display: block;}
  301. .section_main.one .section_content .text{width: 100%;height: auto;-webkit-box-sizing: border-box;box-sizing: border-box;padding:0 14.4vw;}
  302. .section_main.one .section_content .text .h1{font-size: 4vw;line-height: 5.2vw;font-weight: bold; color: #464646;text-align: justify;margin-bottom: 5.2vw;}
  303. .section_main.one .section_content .text p{font-size: 3vw;line-height: 6.6vw;color: #707070;padding-left: 3vw;position: relative;}
  304. .section_main.one .section_content .text p:before{content: '';width: 6px;height: 6px;background-color: #D4D4D4;position: absolute;left: 0;top: 2.4vw;border-radius: 50%;}
  305. /*section_main 02*/
  306. .section_main.two{height: 93vw;background-color: #FFF8F9;padding: 8vw 0 0 0;}
  307. .section_main.two .title{width: 100%;margin-bottom: 8vw;}
  308. .section_main.two .title h1{line-height: 8.6vw;text-align: center;font-size: 5vw;color: #333333;font-weight: normal;}
  309. .section_main.two .title p{line-height: 4.8vw;text-align: center;font-size: 3.4vw;color: #707070;font-weight: normal;}
  310. .section_main.two .section_content{width: 100%;height: auto;-webkit-box-sizing: border-box;box-sizing: border-box;}
  311. .section_main.two .section_content .section_li{width: 16.4vw;height: auto;float: left;margin: 0 16vw;margin-bottom: 6vw;}
  312. .section_main.two .section_content .section_li .li_icon{width: 16.4vw;height: 16.4vw;display: block;margin-bottom: 2vw;}
  313. .section_main.two .section_content .section_li p{line-height: 6vw;font-size: 3.2vw;color: #333333;text-align: center;}
  314. /*section_main 03*/
  315. .section_main.three{height: 90vw;background: url("/img/activity/attestation/section_image_bg_h5.png");background-size: cover;padding: 10vw 0 0 0;}
  316. .section_main.three .title{width: 100%;margin-bottom: 8vw;}
  317. .section_main.three .title h1{line-height: 4.9vw;text-align: center;font-size: 5.2vw;color: #FFFFFF;font-weight: normal;}
  318. .section_main.three .section_content{width: 100%;height: auto;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 7vw;overflow: hidden;}
  319. .section_main.three .section_content .text-left{width:44%;float: left;-webkit-box-sizing: border-box;box-sizing: border-box;margin-right:7vw;}
  320. .section_main.three .section_content .text-right{width:44%;float: left;-webkit-box-sizing: border-box;box-sizing: border-box;}
  321. .section_main.three .section_content .text-left .text-ti{width:100%;height:6.4vw;margin-bottom: 4vw;}
  322. .section_main.three .section_content .text-left .text-ti-a{width:200px;height:6.4vw;-webkit-box-sizing:border-box;box-sizing:border-box;float: left;margin-left: 6vw;text-align: left;line-height: 6.4vw;font-size: 4vw;color: #FFFFFF;}
  323. .section_main.three .section_content .text-left p{width: 100%;padding-left: 5vw;height:auto;line-height: 6vw;font-size: 2.4vw;color: #FFFFFF;position: relative;margin-bottom: 4vw;}
  324. .section_main.three .section_content .text-left p:before{content: '';width:3.6vw;height: 3.6vw;background: url(/img/activity/attestation/section_icon_x.png);background-size: cover;position: absolute;left: 0;top: 4vw;border-radius: 50%;}
  325. .section_main.three .section_content .text-right .text-ti{width:100%;height:6.4vw;margin-bottom: 4vw;}
  326. .section_main.three .section_content .text-right .text-ti-a{width:200px;height:6.4vw;-webkit-box-sizing:border-box;box-sizing:border-box;float: left;margin-left: 6vw;text-align: left;line-height: 6.4vw;font-size: 4vw;color: #FFFFFF;}
  327. .section_main.three .section_content .text-right p{width: 100%;padding-left: 5vw;height:auto;line-height: 6vw;font-size: 2.4vw;color: #FFFFFF;position: relative;margin-bottom: 4vw;}
  328. .section_main.three .section_content .text-right p:before{content: '';width:3.6vw;height: 3.6vw;background: url(/img/activity/attestation/section_icon_d.png);background-size: cover;position: absolute;left: 0;top: 4vw;border-radius: 50%;}
  329. /*section_main 04*/
  330. .section_main.four{background-color: #FFFFFF;padding: 10vw 0 0 0;}
  331. .el-carousel__item h3 {
  332. color: #475669;
  333. font-size: 18px;
  334. opacity: 0.75;
  335. line-height: 300px;
  336. margin: 0;
  337. }
  338. .el-carousel__arrow{
  339. display: none;
  340. }
  341. .el-carousel__indicator--horizontal .el-carousel__button {
  342. width: 6px;
  343. height: 6px;
  344. background: transparent;
  345. background: rgba(255, 111, 0, 0.45);
  346. border-radius: 50%;
  347. opacity: 1;
  348. }
  349. .el-carousel__indicator--horizontal.is-active .el-carousel__button{
  350. width: 6px;
  351. height: 6px;
  352. background: #FF5B00;
  353. border-radius: 50%;
  354. opacity: 1;
  355. }
  356. .section_main.four .el-carousel__item {
  357. background: #fff;
  358. display: flex;
  359. flex-wrap: wrap;
  360. padding: 0 0%;
  361. justify-content: space-between;
  362. }
  363. .section_main.four .el-carousel__item .authlistH5{
  364. width: 48%;
  365. height: 48%;
  366. box-shadow: 0px 6px 28px 0px rgba(51,51,51,0.1);
  367. margin: 1%;
  368. overflow: hidden;
  369. display: flex;
  370. justify-content: space-around;
  371. flex-direction: column;
  372. }
  373. .section_main.four .el-carousel__item .authlistH5 .icon {
  374. border-radius: 50%;
  375. border: 1px solid #ccc;
  376. width: 18vw;
  377. padding: 3vw;
  378. background: #fff;
  379. }
  380. .section_main.four .el-carousel__item .isAuthActive {
  381. background: linear-gradient(-90deg, #FFBA63, #F3920D);
  382. }
  383. .section_main.four .el-carousel__item .authlistH5 .isAuthtext {
  384. color: #fff;
  385. }
  386. .section_main.four .el-carousel__item .authlistH5 div{
  387. display: flex;
  388. justify-content: center;
  389. align-items: center;
  390. }
  391. .section_main.four .el-carousel__item .authlistH5 div .isAuthBtn {
  392. background: linear-gradient(-90deg, #FFBA63, #F3920D);
  393. border: 1px solid #fff;
  394. color: #fff !important;
  395. }
  396. .section_main.four .title{width: 100%;margin-bottom: 8vw;}
  397. .section_main.four .title h1{line-height: 4.9vw;text-align: center;font-size: 4.8vw;color: #333333;font-weight: normal;}
  398. .section_main.four .section_content{width: 100%;height:auto;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 7vw;}
  399. .section_main.four .section_content .section_li{width: 100%;height: 40vw;border-bottom: 1px solid #E1E1E1;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 12vw;}
  400. .section_main.four .section_content .section_li:last-child{border-bottom: none;}
  401. .section_main.four .section_content .section_li .li_icon{width:18.8vw;height: 40vw;float: left;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 10vw 0;margin-right: 9vw;}
  402. .section_main.four .section_content .section_li .li_text{float: left;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 8vw 0;}
  403. .section_main.four .section_content .section_li .li_text h1{line-height: 6vw;text-align: left;font-size: 4vw;color: #333333;font-weight: normal;margin-bottom: 2vw;}
  404. .section_main.four .section_content .section_li .li_text p{line-height: 4.9vw;text-align: left;font-size: 3.2vw;color: #808080;}
  405. .section_main.four .section_content .section_li.li02 .li_text{margin-right: 9vw;}
  406. .section_main.four .section_content .section_li.li02 .li_icon{margin-right: 0vw;}
  407. /*section_main 05*/
  408. .section_main.five{height: 66vw;background: #F7F7F7;padding: 10vw 0 0 0;-webkit-box-sizing: border-box;box-sizing: border-box;}
  409. .section_main.five .title{width: 100%;margin-bottom: 8vw;}
  410. .section_main.five .title h1{line-height: 4.9vw;text-align: center;font-size: 4.8vw;color: #333333;font-weight: normal;}
  411. .section_main.five .section_content{width: 100%;height: 27.6vw;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 7vw;}
  412. .section_main.five .section_content .text-left{width:48.2vw;float: left;margin-right: 6vw;}
  413. .section_main.five .section_content .text-left img{width:48.2vw;height: 27.6vw;display: block;}
  414. .section_main.five .section_content .text-right{float: left;-webkit-box-sizing: border-box;box-sizing: border-box;padding-top: 5vw;}
  415. .section_main.five .section_content .text-right .text-right-text{width: 30.5vw;height: 12.3vw;position: relative;}
  416. .section_main.five .section_content .text-right .text-right-text img{width: 13vw;height:12.3vw;display: block;}
  417. .section_main.five .section_content .text-right .text-right-text .p{line-height: 4.8vw;font-size: 3.2vw;text-align: center;color: #464646;position: absolute;top:4vw;right: -3vw;}
  418. /*section_main 06*/
  419. .section_main.six{height: 50.2vw;background: #FFFFFF;padding: 10vw 0 0 0;-webkit-box-sizing: border-box;box-sizing: border-box;}
  420. .section_main.six .section_content{width: 100%;height: 33.9vw;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 7vw;}
  421. .section_main.six .section_content .text-left{float: left;-webkit-box-sizing: border-box;box-sizing: border-box;padding-top:10vw;}
  422. .section_main.six .section_content .text-left .text-right-text{width: 30.5vw;height:12.3vw;position: relative;}
  423. .section_main.six .section_content .text-left .text-right-text img{width: 14.8vw;height: 12.3vw;display: block;}
  424. .section_main.six .section_content .text-left .text-right-text .p{line-height: 4.8vw;font-size: 3.2vw;text-align: center;color: #464646;position: absolute;top:4vw;right: -3vw;}
  425. .section_main.six .section_content .text-right{width:48.2vw;float: right;}
  426. .section_main.six .section_content .text-right img{width:48.2vw;height: 34.7vw;display: block;}
  427. /*section_main 07*/
  428. .section_main.seven{height: 58vw;background: #F7F7F7;padding: 10vw 0 0 0;}
  429. .section_main.seven .title{width: 100%;margin-bottom: 8vw;}
  430. .section_main.seven .title h1{line-height: 4.9vw;text-align: center;font-size: 4.8vw;color: #333333;font-weight: normal;}
  431. .section_main.seven .section_content{width: 100%;height: 34.7vw;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 7vw;}
  432. .section_main.seven .section_content .text-left{width:48.2vw;float: left;margin-right: 6vw;}
  433. .section_main.seven .section_content .text-left img{width:48.2vw;height: 34.7vw;display: block;}
  434. .section_main.seven .section_content .text-right{float: left;-webkit-box-sizing: border-box;box-sizing: border-box;padding-top: 10vw;}
  435. .section_main.seven .section_content .text-right .text-right-text{width: 30.5vw;height: 12.3vw;position: relative;}
  436. .section_main.seven .section_content .text-right .text-right-text img{width: 13vw;height:12.3vw;display: block;}
  437. .section_main.seven .section_content .text-right .text-right-text .p{line-height: 4.8vw;font-size: 3.2vw;text-align: center;color: #464646;position: absolute;top:4vw;right: -3vw;}
  438. /*section_main 08*/
  439. .section_main.eight{height: 0;background: #FFFFFF;padding: 0;}
  440. .section_main.eight .title{width: 100%;margin-bottom: 8vw;}
  441. .section_main.eight .title h1{line-height: 4.9vw;text-align: center;font-size: 4.8vw;color: #333333;font-weight: normal;}
  442. .section_main.eight .section_content{width: 100%;height: 46.4vw;-webkit-box-sizing: border-box;box-sizing: border-box;}
  443. .section_main.eight .section_content img{width:82.1vw;height: 46.4vw;display: block;margin: 0 auto;}
  444. /*section_main 09*/
  445. .section_main.nine{height: 100vw;background: #F7F7F7;padding:10vw 0 0 0;}
  446. .section_main.nine .title{width: 100%;margin-bottom: 8vw;}
  447. .section_main.nine .title h1{line-height: 4.9vw;text-align: center;font-size: 4.8vw;color: #333333;font-weight: normal;}
  448. .section_main.nine .title h1 span{ display: block; font-size: 3vw;color: #999; margin-top: 2.4vw }
  449. .section_main.nine .section_content{width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 6.4vw;}
  450. .section_main.nine .section_content .section_li{width: 42.2vw;height: 18.6vw;float: left;-webkit-box-sizing: border-box;box-sizing: border-box;margin-right: 2.7vw;margin-bottom:2.4vw;padding:2.4vw;background-color: #FFFFFF;}
  451. .section_main.nine .section_content .section_li:nth-child(2n){margin-right: 0;}
  452. .section_main.nine .section_content .section_li img{float: left; width: 10vw;height: 10vw; margin-top: 1.6vw; display: block;border: 1px solid #F5F5F5;border-radius: 50%;}
  453. .section_main.nine .section_content .section_li .content{float: left;margin-left: 2.4vw;width: 24vw;}
  454. .section_main.nine .section_content .section_li .content .name{font-size: 2.6vw;color: #333;line-height: 1.6em;margin-top: 1.2vw}
  455. .section_main.nine .section_content .section_li .icon-marks{display: block; width: 4vw;height: 4vw;background: url(/img/activity/attestation/icon-marks.png) no-repeat center;background-size: 4vw;}
  456. .section_main.nine .section_content.pc{display: none !important;}
  457. /*section_main 10*/
  458. .section_main.ten{ background: #fff; padding:0;}
  459. .section_main.ten .title{width: 100%;margin-botgbtom: 8vw;}
  460. .section_main.ten .title h1{line-height: 4.9vw;text-align: center;font-size: 4.8vw;color: #333333;font-weight: normal;}
  461. .section_main.ten .section_content{width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;margin-top: 8.2vw;display: flex;justify-content: space-between; align-items: center;flex-wrap: wrap;}
  462. .section_main.ten .section_content .section_li{ display: -webkit-box; display: -ms-flexbox; display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 40vw; height: 29.6vw; background-size: 40vw; background-repeat: no-repeat;margin-bottom: 2.4vw;margin-right: 2.4vw;}
  463. .section_main.ten .section_content .section_li:nth-child(2n) { margin-right: 0}
  464. .section_main.ten .section_content .section_li .logo{ width: 12.9vw;height: 12.9vw;margin-bottom: 3.3vw;border-radius: 50%; }
  465. .section_main.ten .section_content .section_li .name{ font-size: 3.6vw; color: #fff }
  466. .section_main.ten .section_content .section_li {background-size: cover; background-position: center;}
  467. .section_main.ten .section_content .section_li_0{background-image: url(/img/activity/attestation/section_bg_device_03.png) }
  468. .section_main.ten .section_content .section_li_1{background-image: url(/img/activity/attestation/section_bg_device_01.png) }
  469. .section_main.ten .section_content .section_li_2{background-image: url(/img/activity/attestation/section_bg_device_02.png) }
  470. .section_main.ten .section_content .section_li_3{background-image: url(/img/activity/attestation/section_bg_device_04.png) }
  471. /*.section_main.ten .section_content .section_li:nth-child(3){background-image: url("/img/activity/attestation/section_bg_club_02.png") }*/
  472. /*.section_main.ten .section_content .section_li:nth-child(4){background-image: url("/img/activity/attestation/section_bg_device_02.png") }*/
  473. /*.section_main.ten .section_content.pc{display: none !important; }*/
  474. /*侧边栏-联系我们*/
  475. .section-tel{width: 52px;height: 92px;position: fixed;right: 0;top: 50%;z-index: 99;border-radius: 2px;-webkit-box-shadow: 0px 2px 12px 0px rgba(43, 43, 43, 0.1);box-shadow: 0px 2px 12px 0px rgba(43, 43, 43, 0.1);}
  476. .section-tel .box{width: 52px;height: 46px;background: #FFFFFF;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 9px 12px;cursor: pointer;position: relative;}
  477. .section-tel .box .code{width: 27px;height: 27px;background:#FFFFFF url("/img/activity/attestation/code_1.png");background-size: cover;-o-transition: all .1s;-webkit-transition: all .1s;transition: all .1s;}
  478. .section-tel .box .tel{width: 26px;height: 28px;background:#FFFFFF url("/img/activity/attestation/phone_1.png");background-size: cover;-o-transition: all .1s;-webkit-transition: all .1s;transition: all .1s;}
  479. .section-tel .box .box-code{width: 148px;height: 170px;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 17px 24px;background-color:#FFFFFF;position: absolute;left: -173px;top: -78px;display: none;-o-transition: all .4s;-webkit-transition: all .4s;transition: all .4s;border-radius: 4px;-webkit-box-shadow: 0px 2px 12px 0px rgba(43, 43, 43, 0.1);box-shadow: 0px 2px 12px 0px rgba(43, 43, 43, 0.1);}
  480. .section-tel .box .box-code:before{content: '';width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #FFFFFF;position: absolute;right:-10px;top: 50%;}
  481. .section-tel .box .box-code p{text-align: center;line-height: 20px;font-size: 14px;color: #333333;margin-bottom: 12px;}
  482. .section-tel .box .box-code img{width: 100px;height: 100px;display: block;}
  483. .section-tel .box .box-tel{width: 180px;height: 70px;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 20px 10px;background-color: #FFFFFF;position: absolute;left: -210px;top: -20px;display: none;-o-transition: all .4s;-webkit-transition: all .4s;transition: all .4s;border-radius: 4px;-webkit-box-shadow: 0px 2px 12px 0px rgba(43, 43, 43, 0.1);box-shadow: 0px 2px 12px 0px rgba(43, 43, 43, 0.1);}
  484. .section-tel .box .box-tel:before{content: '';width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #FFFFFF;position: absolute;right:-10px;top: 44%;}
  485. .section-tel .box .box-tel p{text-align: center;line-height: 30px;font-size: 20px;color: #BC1724;}
  486. .section-tel .box:hover{background:#BC1724;}
  487. .section-tel .box.code:hover .code{background:#BC1724 url("/img/activity/attestation/code_2.png");}
  488. .section-tel .box.tel:hover .tel{background:#BC1724 url("/img/activity/attestation/phone_2.png");}
  489. .section-tel .box.code:hover .box-code{left: -159px;display: block;}
  490. .section-tel .box.tel:hover .box-tel{left: -190px;display: block;}
  491. /*温馨提示*/
  492. .popup-tip { width: 100vw; height: 100vh;position: fixed; top: 0; left: 0;z-index: 9999; }
  493. .popup-tip .mask{position: fixed;width: 100vw; height: 100vh; top: 0; left: 0; z-index: 1;background: rgba(0,0,0,.7)}
  494. .popup-tip .content {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column; position: absolute; width: 76vw;height: 70.5vw; z-index: 2 ;top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);background: #fff;}
  495. .popup-tip .content .title{ font-size: 4.8vw; color: #101010; }
  496. .popup-tip .content .tip { font-size: 3.2vw; color: #BC1724;margin-top: 7vw;}
  497. .popup-tip .content .close{ position: absolute; right: 4vw;top: 4vw; width: 6vw;height: 6vw; background: url("/img/activity/attestation/icon-close.png") no-repeat center; cursor: pointer;}
  498. /*底部*/
  499. .foot{width:100%;height:auto;background:#262626;}
  500. .footer{width:100%;padding:4vw 0;background:#262626;margin-top:4vw;text-align:center}
  501. .footer p span a{color: #FFFFFF;}
  502. .footer .logo img{width:9.2vw;height:8vw;vertical-align:middle}
  503. .footer .dizhi{display:inline-table;color:#ccc;font-size:3.1vw;line-height:4.8vw;vertical-align:super}
  504. }