/*
 *  style.css by 453883682@qq.com
 */
 /* loading */
.load-mask{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999999;}
.load-mask .load-item{ position: absolute; left: 0; top: 0; width: 100%; height: 33.33%; background-color: #FFFFFF;}
.load-mask .load-item + .load-item{ top: 33.33%;}
.load-mask .load-item + .load-item + .load-item{ top: 66.66%;}
.load-mask .load-item.play { animation: animate-load-bg 0.5s forwards ease;}
.load-mask .load-logo{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 206px; height: 65px; z-index: 2; overflow: hidden;}
.load-mask .load-logo-left{ width: 32%; height: 100%; background: url(../images/logo.png) left center no-repeat; background-size: cover;}
.load-mask .load-logo-right{ width: 68%; height: 100%; background: url(../images/logo.png) right center no-repeat; background-size: cover;}

.load-mask.play .load-logo-left { animation: animate-load-left 0.8s forwards ease-in;}
.load-mask.play .load-logo-right { animation: animate-load-right 0.8s forwards ease-in;}

 /* banner */
.banner{  position: relative; height: 100vh; background-color: #FFFFFF;}
.banner::before{ display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to bottom,rgba(0,0,0,0.5) 0%, rgba(0,0,0,0));}
.banner video{ display: block; width: 100%; height: 100%; object-fit: cover;}
.banImg{ width: 100%; height: 100%;}
.mouse{ position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); width: 37px; height: 52px; border: 3px solid #FFFFFF; border-radius: 18px; z-index: 2;}
.mouse span{ display: block; position: absolute; left: 0; right: 0; top: 10%; width: 5px; height: 12px; margin: 0 auto; background: #ee7700; border-radius: 2px; animation: aniMouse 1.4s linear infinite;}
.ban-text{ position: absolute; left: 0; right: 0; bottom: 15%; z-index: 1;}
.ban-text .cn{ color: #ffb96e;}
.ban-text .en{ line-height: 1.2; font-family: 'BaiJamjuree-SemiBold'; font-weight: normal;}
.ban-btn{ position: absolute; top: 50%; transform: translateY(-50%); width: 74px; height: 74px; max-width: .8rem; max-height: .8rem; border-radius: 50%; border: 2px solid #FFFFFF; background-position: center center; background-size: contain; background-repeat: no-repeat; opacity: .5; cursor: pointer; z-index: 1; transition: all .3s;}
.ban-prev{ left: 4%; background-image: url(../images/ban-prev.png);}
.ban-next{ right: 4%; background-image: url(../images/ban-next.png);}
.ban-btn:hover{ background-color: #FFFFFF; opacity: 1;}
.ban-prev:hover{ background-image: url(../images/ban-prev-hover.png);}
.ban-next:hover{ background-image: url(../images/ban-next-hover.png);}

.index-type{ position: relative; line-height: 1.1; padding-left: 26px; margin-bottom: .2rem; text-transform: uppercase; font-weight: bold;}
.index-type::before{ display: block; content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--main-color);}
.index-type.color-f::before{ background-color: #FFFFFF; opacity: .5;}
.index-title{ line-height: 1.1; margin-bottom: .2rem; font-family: 'OPPOSans-B'; font-weight: normal;}
.index-more{ display: block; width: fit-content; padding: .1rem 0; border-bottom: 1px solid #FFFFFF;}
.index-more i{ display: inline-block; vertical-align: middle; margin-left: 5px; transform: rotate(-45deg); transition: all .3s;}
.index-more:hover i{ transform: rotate(0);}
.index-more.main-color{ border-bottom-color: var(--main-color);}

/* index-suning */
.box1-bg{ position: relative; padding: 1.5rem 0; background: url(../images/box1-bg.png) left center no-repeat; background-color: #FFFFFF; background-size: cover; overflow: hidden;}
.box1-text{ width: 50%; max-width: 814px; line-height: 1.8;}
.box1-des{ margin: .8rem 0 .5rem; text-align: justify;}
.box1-line{ position: relative; display: block; width: 100%; height: 3px; margin: .6rem 0; background: #C7C7C7;}
.box1-line::before{ display: block; content: ""; position: absolute; left: 30%; top: 50%; margin-top: -7px; width: 14px; height: 14px; background-color: var(--main-color); border-radius: 50%;}
.box1-line::after{ display: block; content: ""; position: absolute; left: 0; top: 0; width: 30%; height: 100%; background-color: var(--main-color);}
.box1-type{ position: relative; margin: .4rem 0; opacity: .6;}
.box1-list{ margin-top: 1.5rem;}
.box1-list p{ opacity: .7;}
.box1-num{ position: relative; display: flex; align-items: center; color: var(--main-color);}
.box1-num strong{ line-height: 1; font-family: 'BaiJamjuree-SemiBold'; font-weight: bold;}
.box1-num span{ line-height: 1;}
.box1-num sup{ position: absolute; left: 100%; top: 0;}
.box1-num sub{ position: absolute; left: 100%; bottom: 0;}
.box1-video{ position: absolute; right: 0; top: 0; width: 42%; max-width: 815px; height: 100%; z-index: 1;}
.box1-video-bg{ position: absolute; right: 0; top: 0; width: 100%; height: 100%; background: url(../images/box1-video.png) left center no-repeat; background-size: cover; z-index: -1;}
.box1-video-title{ position: absolute; right: 12%; top: 10%; bottom: 10%; height: 80%;}
.box1-video-title img{ height: 100%;} 
.box1-video-play{ position: absolute; left: 50%; top: 40%; transform: translateY(-50%); width: 1rem; height: 1rem; cursor: pointer; z-index: 2;}
.box1-video-play span{ display: block; width: 100%; height: 100%; border-radius: 50%; background: url(../images/icon-paly.png) center center #FFFFFF no-repeat; background-size: contain;}
.box1-video-play::before,
.box1-video-play::after{ display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; background-color: rgba(255, 255, 255, 0.3); z-index: -1; animation: aniLight 1s linear infinite;}
.box1-video-play::after{ animation-delay: 0.3s;}
.box1-img{ position: absolute; right: 0; top: 0; width: 45%; max-width: 780px; height: 100%; z-index: 1;}
.box1-img .imgBg{ width: 100%; height: 100%; background-position: left center;}

/* index-Industry */
.box2-bg{ position: relative; background: #F4F7FC; z-index: 1;}
.box2-img li{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; visibility: hidden; overflow: hidden; transition: all .6s linear;}
.box2-img li img{ display: block; width: 100%; height: 100%; object-fit: cover;}
.box2-img li.active{ opacity: 1; visibility: visible; transition: all .3s linear;}

.box2-list{ height: calc(100vh - 80px); border-right: 1px solid rgba(255, 255, 255, 0.2);}
.box2-list li{ width: 20%; height: 100%; border-left: 1px solid rgba(255, 255, 255, 0.2); border-top: 1px solid rgba(255, 255, 255, 0.2); transition: all .3s linear;}
.box2-link{ position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; padding: .3rem .5rem;}
.box2-icon{ position: relative; width: 36px; height: 36px; transition: all .3s;}
.box2-icon img{ max-width: 100%; max-height: 100%;}
.box2-title{ position: relative; margin-bottom: .3rem; font-weight: normal;}
.box2-title span{ font-size: 66%;}
.box2-title::before{ display: block; content: ""; position: absolute; left: -.5rem; top: 50%; margin-top: -7px; margin-left: -7px; width: 14px; height: 14px; background-color: var(--main-color); border-radius: 50%; transform: scale(0); transition: all .3s;}
.box2-info{ height: 0; interpolate-size: allow-keywords; margin-bottom: .6rem; font-family: 'OPPOSans-R'; transition: all .3s;}
.box2-text{ height: 0; interpolate-size: allow-keywords; opacity: .7; margin-bottom: .3rem; transition: all .3s linear;}
.box2-more{ position: absolute; right: 0; bottom: 0; width: 120px; height: 120px; padding: 20px 0 0 20px; border-radius: 120px 0 0 0; color: #FFFFFF; background-color: var(--main-color); transform: scale(0); transform-origin: right bottom; transition: all .3s;}
.box2-link .box-more{ opacity: 0; visibility: hidden; transform: translateY(25%); transform-origin: left center; transition: all .3s;}

.box2-list li.active{ width: 40%; text-align: left;}
.box2-list li.active .box2-link{ align-items: flex-start;}
.box2-list li.active .box2-title span{ font-size: 100%;}
.box2-list li.active .box2-title{ margin: .4rem 0;}
.box2-list li.active .box2-title::before{ transform: scale(1);}
.box2-list li.active .box2-info{ height: auto;}
.box2-list li.active .box2-text{ height: auto; margin-bottom: 1rem;}
.box2-list li.active .box-more{ opacity: 1; visibility: visible; transform: translateY(0); transition: all .3s linear .3s;}

.box2-bot{ position: relative; width: 100%; height: .96rem; margin-top: -0; height: 0; background: url(../images/box5-bot.png) center bottom no-repeat; pointer-events: none; z-index: 1; background-size: 100% 100%;}

/* index-news */
.box3-bg{ position: relative; padding-top: .6rem; padding-bottom: 1.3rem; background-color: #FFFFFF; overflow: hidden; z-index: 1;}
.box3-top{ margin-bottom: .5rem;}
.box3-title .index-title{ margin-bottom: 0;}
.box3-sort li{ margin-left: .28rem;}
.box3-sort li a,
.box3-sort li span{ display: block; color: #000000; line-height: 36px; padding: 0 .25rem; border: 1px solid #CDCDCD; border-radius: 20px; transition: all .3s; cursor: pointer;}
.box3-sort li.active a,
.box3-sort li.active span,
.box3-sort li a:hover,
.box3-sort li span:hover{ border-color: var(--main-color); background-color: var(--main-color); color: #FFFFFF;}

.box3-left{ flex-shrink: 0; width: 48%; max-width: 783px; margin-right: 3%;}
.box3-right{ flex: auto; max-width: 836px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;}
.box3-right .index-more{ margin-left: auto;}
.box3-item{ display: none;}
.box3-link{ display: block;}
.box3-left .box3-link{ display: block; border-radius: 10px; background-color: var(--main-color);}
.box3-left .box3-img{ padding-bottom: 50.19%; border-radius: 10px;}
.box3-left .box3-text{ padding: .35rem;}
.box3-left .box-more .flex{ background-color: #FFFFFF;}
.box3-type{ position: absolute; right: .14rem; top: .2rem; width: fit-content; min-width: 126px; line-height: 44px; background: var(--main-color); border-radius: .22rem; text-align: center;}
.box3-name{ line-height: 1.5; margin-bottom: .3rem; -webkit-line-clamp: 2; transition: all .3s;}
.box3-link:hover .box3-img .imgBg{ transform: scale(1.05);}
.box3-link:hover .box-more .flex i{ background-color: var(--hover-color); color: #FFFFFF; font-size: 80%; transform: translateX(25%);}

.box3-list li{ border-bottom: 1px solid rgba(0, 0, 0, 0.2);}
.box3-list li:first-child .box3-link{ padding-top: 0;}
.box3-list .box3-link{ display: flex; padding: .3rem 0;}
.box3-list .box3-img{ flex-shrink: 0; width: 266px; max-width: 35%; border-radius: 10px; margin-right: .3rem; overflow: hidden;}
.box3-list .box3-img .imgBg{ height: 100%; min-height: 174px; transition: all 1s;}
.box3-list .box3-text{ flex: auto; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;}
.box3-list .box3-name{ opacity: .8; -webkit-line-clamp: 3; line-height: 1.5; margin-bottom: .1rem; transition: all .3s linear;}
.box3-list .box3-time{ opacity: .6; font-family: 'BaiJamjuree-SemiBold';}
.box3-list .box3-link:hover .box3-name{ color: var(--main-color); opacity: 1;}


.box4-bg{ position: relative; padding: 0 0 1.5rem; background-color: #F4F7FC; overflow: hidden; z-index: 1;}
.box4-top{ width: 100%; height: 96px; height: 0; background: url(../images/box6-bot.png) center bottom no-repeat; pointer-events: none; z-index: 1; background-size: 100% 100%;}
.box4-bg .index-title{ margin: .3rem 0 .6rem;}
.box4-list{ gap: .15rem;}
.box4-list li{ position: relative; flex: .125; background-color: #0068B7; border-radius: 10px; overflow: hidden; transition: all .3s linear;}
.box4-list .box4-img{ opacity: 0; visibility: hidden;}
.box4-list .box4-img .imgBg{ height: 453px;}
.box4-mask{ position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: url(../images/box4-mask.png) left top no-repeat; background-size: cover;}
.box4-icon{ width: auto; height: 70px; max-height: .9rem;}
.box4-icon img{ display: block; height: 100%;}
.box4-text{ position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; padding: .4rem .2rem;}
.box4-text .box4-icon img{ margin: 0 auto;}
.box4-text .box4-icon-bg{ position: absolute; left: -2%; bottom: -5%; width: 104%; transform-origin: center bottom; transition: all .4s linear .2s;}
.box4-text .box4-icon-bg img{ display: block; width: 100%; height: auto; opacity: .1;}
.box4-active{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: .4rem .5rem;}
.box4-active .box4-cn,
.box4-active .box4-en,
.box4-active .box4-icon{ opacity: 0; visibility: hidden; transform: translateX(-.2rem); transition: all .2s;}
.box4-active .box4-en{ text-transform: uppercase; font-family: 'BaiJamjuree-SemiBold';}
.box4-active .box4-icon{ margin-top: auto;}
.box4-list li.active{ flex: .5;}
.box4-list li.active .box4-img{ opacity: 1; visibility: visible;}
.box4-list li.active .box4-text{ opacity: 0; visibility: hidden;}
.box4-list li.active .box4-text .box4-icon-bg{ transform: translateY(100%);}
.box4-list li.active .box4-active .box4-cn,
.box4-list li.active .box4-active .box4-en,
.box4-list li.active .box4-active .box4-icon{ opacity: 1; visibility: visible; transform: translateX(0);}
.box4-list li.active .box4-active .box4-en{ opacity: .6;}
.box4-list li.active .box4-active .box4-cn{ transition: all .3s linear 0.2s;}
.box4-list li.active .box4-active .box4-en{ transition: all .3s linear 0.4s;}
.box4-list li.active .box4-active .box4-icon{ transition: all .3s linear 0.6s;}

/* dichan */
.dc-box1-bg{ position: relative; padding: 1.1rem 0; background: url(../images/industry/dc-box1-bg.png) center center fixed #FFFFFF no-repeat; background-size: cover; overflow: hidden;}
.dc-box1-text{ line-height: 1.5; margin: .5rem 0;}
.dc-box1-text p{ opacity: .7;}
.dc-box1-list{ max-width: 900px; margin: 0 auto; margin-top: .9rem;}

.dc-box2-bg{ padding: 1rem 0;}
.dc-box2-bg + .dc-box3-bg{ margin-top: -1rem;}
.dc-box2-tab{ margin-bottom: .5rem; font-family: 'OPPOSans-M';}
.dc-box2-tab li{ flex: 1; border-bottom: .04rem solid #F4F7FC; transition: all .3s;}
.dc-box2-tab li span{ display: block; padding: .3rem 0; cursor: pointer;}
.dc-box2-tab li.active{ border-bottom-color: var(--main-color);}
.dc-box2-tab li.active span{ color: var(--main-color);}
.dc-box2-con{ background: #F4F7FC; border-radius: 0 1rem 0px 1rem; overflow: hidden;}
.dc-box2-left,
.dc-box2-right{ flex-shrink: 0; width: 50%;}
.dc-box2-left{ padding: .6rem .3rem;}
.dc-box2-top{ gap: .2rem;}
.dc-box2-logo{ height: 53px; max-height: .7rem;}
.dc-box2-logo img{ max-height: 100%;}
.dc-box2-name{ font-family: 'STZhongsong';}
.dc-box2-info{ margin: .4rem 0;}
.dc-box2-list{ margin-top: .3rem;}
.dc-box2-list li{ position: relative; padding: 0 .4rem; margin-top: .2rem; border-left: 1px solid #000000;}
.dc-box2-list li:first-child{ border-left: none;}
.dc-box2-icon{ width: 53px; height: 53px; max-width: .6rem; max-height: .6rem; margin: 0 auto .15rem;}
.dc-box2-icon img{ width: 100%; height: 100%; object-fit: contain;}
.dc-box2-list p{ opacity: .7; line-height: 1;}
.dc-box2-img{ height: 100%; min-height: 5rem;}
.dc-box2-btn{ position: relative; display: flex; align-items: center; justify-content: flex-end; gap: .17rem; margin-top: .45rem;}
.dc-box2-btn .dc-box2-line{ display: block; flex: auto; height: 1px; background-color: rgba(0, 0, 0, 0.1); overflow: hidden;}
.dc-box2-btn .dc-box2-prev,
.dc-box2-btn .dc-box2-next{ flex-direction: row; width: 62px; height: 62px; max-width: .7rem; max-height: .7rem; border-radius: 30px; background: var(--main-color); cursor: pointer; transition: all .3s;}
.dc-box2-btn .dc-box2-next{ flex-direction: row-reverse;}
.dc-box2-btn .dc-box2-next span{ background-image: url(../images/industry/dc-box2-next.png); background-position: right center;}
.dc-box2-btn span{ width: 16px; height: 27px; max-width: 25%; max-height: 42%; background: url(../images/industry/dc-box2-prev.png) left center no-repeat; background-size: contain;}
.dc-box2-btn strong{ width: .8rem; height: 2px; background-color: #FFFFFF; width: 0; transition: all .3s;}
.dc-box2-btn i{ display: block; width: 4px; height: 4px; border-radius: 50%; background-color: #FFFFFF; opacity: 0; transform: scale(0); transition: all .3s;}
.dc-box2-btn .dc-box2-prev:hover,
.dc-box2-btn .dc-box2-next:hover{ width: 158px; max-width: 2rem;}
.dc-box2-btn .dc-box2-prev:hover strong,
.dc-box2-btn .dc-box2-next:hover strong{ width: .8rem;}
.dc-box2-btn .dc-box2-prev:hover strong{ transform: translateX(-12px);}
.dc-box2-btn .dc-box2-next:hover strong{ transform: translateX(12px);}
.dc-box2-btn .dc-box2-prev:hover i,
.dc-box2-btn .dc-box2-next:hover i{ opacity: 1; transform: scale(1);}


.dc-box3-bg{ padding: 1rem 0;}
.dc-box3-des{ max-width: 1068px; height: 34px; line-height: 34px; margin: .3rem auto; overflow: hidden; interpolate-size: allow-keywords; transition: all .3s;}
.dc-box3-des.active{ height: auto;}
.dc-box3-open{ width: fit-content; margin: 0 auto; cursor: pointer; transition: all .3s;}
.dc-box3-open i{ display: inline-block; vertical-align: middle; font-size: 80%; margin-left: 6px; transition: all .3s;}
.dc-box3-open.active i{ transform: rotate(-180deg);}
.dc-box3-open:hover{ color: var(--hover-color);}
.dc-box3-swiper{ position: relative; margin: .5rem 0 0; padding: 0 .9rem;}
.dc-box3-swiper .swiper-prev{ margin-left: -.3rem;}
.dc-box3-swiper .swiper-next{ margin-right: -.3rem;}
.dc-box3-item{ position: relative; display: block; border-radius: 10px; overflow: hidden;}
.dc-box3-img{ padding-bottom: 126.53%;}
.dc-box3-mask{ position: absolute; left: 0; bottom: 0; width: 100%; height: 50%; background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%); transition: all .3s;}
.dc-box3-text{ position: absolute; left: 0; bottom: 0; width: 100%; padding: .5rem; transition: all .3s;}
.dc-box3-hover{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: .5rem; opacity: 0; visibility: hidden; transition: all .3s;}
.dc-box3-name{ line-height: 1.5; margin: .3rem 0;}
.dc-box3-dot{ position: relative; width: 100%; height: 1px; background-color: rgba(255, 255, 255, 0.2);}
.dc-box3-dot::before{ display: block; content: ""; position: absolute; left: 50%; top: 50%; margin: -5px 0 0 -5px; width: 10px; height: 10px; border-radius: 10px; background-color: var(--main-color);}
.dc-box3-con{ line-height: 1.6; -webkit-line-clamp: 4; margin: .7rem auto;}
.dc-box3-more{ font-family: 'OPPOSans-M';}
.dc-box3-hover .dc-box3-name,
.dc-box3-hover .dc-box3-dot,
.dc-box3-hover .dc-box3-con,
.dc-box3-hover .dc-box3-more{ opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .3s;}
.dc-box3-hover .dc-box3-dot::before{ background-color: #FFFFFF;}
.dc-box3-item:hover .dc-box3-img .imgBg{ transform: scale(1.05);}
.dc-box3-item:hover .dc-box3-text{ opacity: 0; visibility: hidden; transform: translateY(.2rem);}
.dc-box3-item:hover .dc-box3-mask{ height: 100%; background: var(--main-color); opacity: .9;}
.dc-box3-item:hover .dc-box3-hover{ opacity: 1; visibility: visible;}
.dc-box3-item:hover .dc-box3-hover .dc-box3-name,
.dc-box3-item:hover .dc-box3-hover .dc-box3-dot,
.dc-box3-item:hover .dc-box3-hover .dc-box3-con,
.dc-box3-item:hover .dc-box3-hover .dc-box3-more{ opacity: 1; visibility: visible; transform: translateY(0);}
.dc-box3-item:hover .dc-box3-hover .dc-box3-name{ transition: all .3s linear .3s;}
.dc-box3-item:hover .dc-box3-hover .dc-box3-dot{ transition: all .3s linear .4s;}
.dc-box3-item:hover .dc-box3-hover .dc-box3-con{ transition: all .3s linear .5s;}
.dc-box3-item:hover .dc-box3-hover .dc-box3-more{ transition: all .3s linear .7s;}

.dc-box4-bg{ position: relative; padding: 1rem 0; background-color: #F4F7FC; overflow: hidden;}
.dc-box4-swiper{ position: relative; margin: .5rem 0; padding: 0 .9rem;}
.dc-box4-swiper .swiper-btn span{ transform: translateY(-120%);}
.dc-box4-swiper .swiper-prev{ margin-left: -.3rem;}
.dc-box4-swiper .swiper-next{ margin-right: -.3rem;}
.dc-box4-item{ display: block;}
.dc-box4-img{ padding-bottom: 60.42%; border-radius: 10px; overflow: hidden;}
.dc-box4-time{ margin: .24rem 0; font-family: 'BaiJamjuree-SemiBold';}
.dc-box4-title{ margin: .2rem 0; transition: all .3s;}
.dc-box4-more{ font-family: 'OPPOSans-M';}
.dc-box4-item:hover .dc-box4-img .imgBg{ transform: scale(1.05);}
.dc-box4-item:hover .dc-box4-title{ color: var(--main-color);}
.dc-box4-item:hover .dc-box4-more i{ transform: rotate(0);}

/* 关注我们 */
.follow-bg{ position: relative; min-height: 5.55rem; padding: 1rem 0; background: url(../images/follow/follow-bg.png) center center no-repeat; background-size: cover; overflow: hidden;}
.follow-list{ margin-top: 1.3rem; gap: .45rem;}
.follow-list li{ position: relative;}
.follow-icon{ display: block; width: 80px; height: 80px; max-width: .8rem; max-height: .8rem; border-radius: 50%; overflow: hidden; cursor: pointer;}
.follow-icon img{ display: block; width: 100%; height: 100%; object-fit: cover;}
.follow-con{ position: absolute; left: 50%; transform: translateX(-50%) translateY(-10px); bottom: 100%; width: 230px; max-width: 2.3rem; padding-bottom: .2rem; opacity: 0; visibility: hidden; transition: all .3s;}
.follow-con::before{ display: block; content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); border-top: .14rem solid #FFFFFF; border-left: .11rem solid transparent; border-right: .11rem solid transparent; margin-bottom: .07rem;}
.follow-img{ border-radius: 10px; overflow: hidden;}
.follow-img img{ display: block; width: 100%; height: auto;}
.follow-list li:hover .follow-con{ opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);}