:root {
  --hover: #2a45bd;
  --content: #666;
}

.container { width: 1190px; margin: 0 auto; }
/* .hover { color: #2a45bd; } */
.tr { text-align: right; }

.h2-title { font-size: 42px; color: #000; }
.h2-title em { display: block; font-size: 14px; color: #999; font-weight: normal; letter-spacing: 2px; }

.h2-title_style_1 { height: 72px; padding-right: 14px; margin-top: 20px; text-align: right; background: url(/e_html/2020/heec2020/img/title-bg.png) no-repeat center right; }
.h2-title_style_1 em { line-height: 2.4; }

.h2-title_style_2 { margin-bottom: 50px; text-align: center; background: url(/e_html/2020/heec2020/img/title-bg_2.png) no-repeat center; }
.h2-title_style_2 em { margin-top: 10px; line-height: 3.2; }


/* --------- banner --------- */
.banner { position: relative; height: 650px; padding-top: .5px; text-align: center; background: url(/e_html/2020/heec2020/img/banner/banner_pc.jpg) no-repeat center; background-size: cover; color: #fff; }
.banner h2 { margin-top: 105px; font-size: 32px; color: #d9fef7; font-weight: normal; letter-spacing: 10px; }
.banner h1 { margin: 62px auto 58px; width: 1195px; height: 77px; background: url(/e_html/2020/heec2020/img/banner/banner_pc-text-img.png) no-repeat center; text-indent: -9999px; }
.banner h3 { display: inline-block; padding: 0 92px; height: 52px; line-height: 52px; border-radius: 999px; font-size: 28px; background-color: #84b6ef; color: #120082; font-weight: normal; letter-spacing: 10px; text-transform: capitalize; }
.banner time { display: block; margin: 70px 0 18px; font-size: 40px; }
.banner i { font-size: 20px; }


/* --------- banner-mobile --------- */
.banner-mobile { overflow: hidden; position: relative; padding: 200px 80px 0; height: 100vh; background: url(/e_html/2020/heec2020/img/banner/banner_mobile-bg.jpg) no-repeat center; background-size: cover; color: #fff; }
.banner-mobile::before { animation:bannerMobileMove1 5s infinite; transform: scale(1.5); height: 300px; background: url(/e_html/2020/heec2020/img/banner/banner_mobile-icon_1.png) no-repeat center; }
.banner-mobile::after { animation:bannerMobileMove2 5s infinite; height: 614px; background: url(/e_html/2020/heec2020/img/banner/banner_mobile-icon_2.png) no-repeat center; }
.banner-mobile::before,
.banner-mobile::after { content: ''; position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; background-size: cover; }
.banner-mobile h2 { font-size: 80px; font-weight: normal; letter-spacing: 10px; }
.banner-mobile h2 span { font-size: 48px; }
.banner-mobile h1 { margin: 140px 0 180px -42px; width: 1000px; height: 300px; background: url(/e_html/2020/heec2020/img/banner/banner_mobile-text-img.png) no-repeat center; background-size: cover; text-indent: -9999px; }
.banner-mobile h3 { display: inline-block; line-height: 1.5; font-size: 60px; font-weight: normal; letter-spacing: 10px; text-transform: uppercase; opacity: .7; }
.banner-mobile time { display: block; margin: 200px 0 18px; font-size: 80px; }
.banner-mobile i { font-size: 60px; }
.banner-mobile .arrows { animation:bannerMobileArrowsMove 3s infinite; position: absolute; bottom: 500px; left: 50%; z-index: 1; transform: translateX(-50%); width: 168px; height: 156px; }

@keyframes bannerMobileMove1
{
  0% { bottom: 60px; left: -50px; }
  50% { bottom: 40px; left: 50px; }
  100% { bottom: 60px; left: -50px; }
}

@keyframes bannerMobileMove2
{
  0% { bottom: 40px; left: 50px; }
  60% { bottom: 60px; left: -50px; }
  100% { bottom: 40px; left: 50px; }
}

@keyframes bannerMobileArrowsMove
{
  0% { bottom: 500px; opacity: 1; }
  30% { bottom: 550px; opacity: .5; }
  100% { bottom: 500px; opacity: 1; }
}


/* --------- nav --------- */
.nav { height: 68px; line-height: 68px; font-size: 20px; background-color: #0626af; color: #fff; }
.nav .link { transition: all .6s; }
.nav .link span { position: relative; }
.nav .link span::after { content: ''; transition: all .5s; opacity: 0; position: absolute; bottom: -10px; left: -100px; z-index: 0; width: 100%; height: 1px; background-color: #fff; }
.nav .link:hover { transform: translateY(-10px); }
.nav .link:hover span::after { opacity: 1; left: 0; }



/* --------- news --------- */
.news { height: 200px; padding-top: 46px; background-color: #f6f6f6; }
.news .c-image { width: 116px; height: 112px; margin: 0 42px; }
/* .news .title {  } */
.news .content { margin-top: 16px; line-height: 1.5; color: var(--content); }
.news .article_detaile { color: var(--hover); }
.news .title { transition: all .5s; }
.news a:hover .title { transform: translateX(-8px); color: var(--hover); }


/* --------- trends --------- */
.trends { margin: 90px 0; }
.trends .container { position: relative; }
.trends .img_bg { position: absolute; right: 40px; bottom: -50px; z-index: -1; display: block; }
.trends .c-image { width: 536px; height: 341px; margin-right: 108px; }
.trends .list { margin-top: 60px; }
.trends .list li:not(:last-child) { margin-bottom: 10px; }
.trends .link { transition: transform .5s; display: block; padding: 16px 26px; }
.trends .link:hover { transform: translateX(-10px); background-color: #2a45bd; color: #fff; }


/* --------- agenda --------- */
.agenda { margin: 60px 0 90px; text-align: center; }
.agenda .wrap {overflow-y: auto; width: 1000px; height: 500px; margin: 0 auto; }
.agenda img { width: 100%; } 
/* .agenda img:hover { box-shadow: 0 5px 10px 1px rgba(0, 0, 0, .2); }  */


/* --------- guest --------- */
.guest .wrap { height: 700px; padding: 115px 0 74px; background: url(/e_html/2020/heec2020/img/guest-bg.jpg) no-repeat center; background-size: cover; }
.guest .swiper { position: relative; width: 1024px; margin: 0 auto; }
.guest .swiper::after { content: ''; position: absolute; top: 310px; width: 100%; height: 150px; background-color: #fff; }

.guest .item { text-align: center; }
.guest .item:hover { height: 450px; }
.guest .item:hover .c-image { transform: scale(1.1); box-shadow: 0 0 10px 1px rgba(0, 0, 0, .2); }
.guest .item:hover .title { padding-top: 10px; color: var(--hover); }
.guest .c-image { transition: all .5s; width: 245px; height: 310px; }
/* .guest .item:hover .c-image .box { margin-top: -110px; } */
/* .guest .c-image img:last-child { display: none; } */
/* .guest .item.active .c-image { width: 326px; height: 458px; } */
/* .guest .item.active img:first-child { display: none; }
.guest .item.active img:last-child { display: block; } */
/* .guest .swiper { position: relative; } */
/* .guest .box { height: 194px; margin-top: -88px; background-color: #fff; } */
.guest .info { padding: 0 20px; }
.guest .title { transition: all .5s; margin: 20px 0 12px; font-size: 18px; font-weight: bold; }
.guest .content { font-size: 14px; }

.guest .swiper-button-next { right: -60px; }
.guest .swiper-button-prev { left: -60px; }
.guest .swiper-button-next.swiper-button-white,
.guest .swiper-button-prev.swiper-button-white { top: 200px; width: 50px; height: 50px; border-radius: 100%; background-color: #023f8a; outline: none; }
.guest .swiper-button-next.swiper-button-disabled,
.guest .swiper-button-prev.swiper-button-disabled { background-color: #dcdcdc; opacity: .65; }
.guest .swiper-button-next:after,
.guest .swiper-button-prev:after { font-size: 24px; }


/* --------- keyword --------- */
.keyword { padding-top: 90px; margin-bottom: 82px; text-align: center; background-color: #f6f6f6; }
/* .keyword .img-bg { } */
.keyword .wrap { position: relative; display: inline-block; width: 790px; height: 748px; margin-right: -78px; }
.keyword .link { transition: all 1s; position: absolute; }
.keyword .link:hover { transform: scale(1.1); }
.keyword .link_1 { top: 50px; left: 290px; font-size: 33.75px; color: #666; opacity: .77; }
.keyword .link_2 { top: 100px; left: 90px; font-size: 32px; color: #01a1e9; opacity: .87; }
.keyword .link_3 { top: 100px; right: 124px; font-size: 41.48px; color: #333; font-weight: bold; }
.keyword .link_4 { top: 178px; left: 152px; font-size: 37.49px; color: #235e96; font-weight: bold; }
.keyword .link_5 { top: 200px; right: 210px; font-size: 32px; color: #666; }
.keyword .link_6 { top: 264px; left: -14px; font-size: 33px; color: #333; font-weight: bold; }
.keyword .link_7 { top: 254px; right: 10px; font-size: 35px; color: #235e96; font-weight: bold; }
.keyword .link_8 { top: 364px; left: -14px; font-size: 30px; color: #666; }
.keyword .link_9 { top: 364px; right: -44px; font-size: 32px; color: #666; opacity: .77; }
.keyword .link_10 { top: 456px; left: -80px; font-size: 33.75px; color: #01a1e9; opacity: .7; }
.keyword .link_11 { top: 456px; right: 60px; font-size: 33.75px; color: #333; font-weight: bold; }
.keyword .link_12 { top: 518px; left: 298px; font-size: 32px; color: #235e96; font-weight: bold; }
.keyword .link_13 { top: 580px; left: 14px; font-size: 32px; color: #333; font-weight: bold; }
.keyword .link_14 { top: 580px; right: 60px; font-size: 30px; color: #01a1e9; opacity: .74; }


.keyword .link_15 { top: 640px; left: 236px; font-size: 30px; color: #666; opacity: .74; }



/* --------- forum --------- */
.forum { margin-bottom: 82px; }
.forum .list { width: 100%;  }
.forum .item { transform: all .6s; position: relative; width: 368px; height: 170px; margin-bottom: 44px; }
.forum .text { opacity: 0; position: absolute; top: 50%; left: 0; z-index: 2; transform: translateY(-50%); width: 100%; padding: 20px; text-align: center; line-height: 1.5; font-size: 20px; color: #fff; font-weight: bold; }
/* .forum .item img { transition: all .7s; } */
/* .forum .item:hover img { transform: scale(1.1); } */
.forum .item:hover::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background-color: rgba(0, 0, 0, .75); }
.forum .item:hover .text { opacity: 1; }
/* .forum .item:hover::before { content: ''; position: absolute; top: 50%; left: 0; z-index: 2; transform: translateY(-50%); width: 100%; padding: 20px; text-align: center; line-height: 1.5; font-size: 20px; color: #fff; font-weight: bold; } */


/* --------- heec --------- */
.heec { margin-bottom: 88px; text-align: center; color: #fff; }
.heec .wrap { height: 400px; padding-top: 64px; background: url(/e_html/2020/heec2020/img/heec-bg.jpg); background-size: cover; }
.heec .title { font-size: 32px; }
.heec .content { margin: 36px 0 50px; line-height: 40px; font-size: 18px; }
.heec .btn { display: inline-block; width: 342px; height: 46px; line-height: 46px; padding: 0 30px; border-radius: 999px; font-size: 18px; background-color: #fff; color: #2a45bd; font-weight: bold; text-transform: uppercase; letter-spacing: 4px; }
.heec .btn .icon { opacity: 0; width: 0; margin: 0 0 -6px 4px; }


/* --------- heec-mobile --------- */
.heec-mobile { margin-bottom: 82px; background: url(/e_html/2020/heec2020/img/heec-mobile/heec-mobile-bg.png) no-repeat center bottom; }
.heec-mobile .wrap { width: 860px; padding-bottom: 62px; margin: 0 auto; }
.heec-mobile .view { position: relative; width: 277px; height: 551px; margin-right: 62px; }
.heec-mobile .view-border { position: absolute; top: 0; left: 0; z-index: 1; }
.heec-mobile .view .view-img { position: absolute; top: 50%; left: 50%; z-index: 0; transform: translate(-50%, -50%); width: 255px; height: 529px; }
.heec-mobile .list { padding: 30px 0 40px; }
.heec-mobile .item { height: 50px; padding: 0 38px; line-height: 50px; font-size: 18px; }
.heec-mobile .item:not(:last-child) { margin-bottom: 10px; }
.heec-mobile .item.on { background-color: var(--hover); color: #fff; }
.heec-mobile .qr { display: none; margin-right: 34px; margin-left: 50px; }


/* --------- images --------- */
.images { margin-bottom: 80px; }
.images .wrap { position: relative; width: 1000px; margin: 0 auto; }
.images .gallery-top { height: 480px;}
.images .gallery-thumbs { height: 112px; padding: 10px 0; }
.images .gallery-thumbs img { max-width: 100%; }
.images .swiper-button-next.swiper-button-white,
.images .swiper-button-prev.swiper-button-white { z-index: 100; width: 70px; height: 38px; background-color: #2a45bd; outline: none; }
.images .swiper-button-next { right: -40px; background: url(/e_html/2020/heec2020/img/images/next-btn.png) no-repeat center; }
.images .swiper-button-prev { left: -40px; background: url(/e_html/2020/heec2020/img/images/prev-btn.png) no-repeat center; }
.images .swiper-button-prev::after,
.images .swiper-button-next::after { content: none; }
/* .images .swiper-button-white:hover { background-color: #2a45bd; } */
.images .swiper-button-next.swiper-button-disabled,
.images .swiper-button-prev.swiper-button-disabled { background-color: #dcdcdc; opacity: .85; }


/* --------- friendlink --------- */
.friendlink { padding: 46px 0 50px; background-color: #f6f6f6;}
.friendlink .logo { width: 165px; }
.friendlink .layout-list { padding-left: 76px; }
.friendlink .layout-item { float: left; }
.friendlink .layout-item:not(:last-child) { margin-right: 120px; }
.friendlink .layout-item:first-child { text-align: center; }
.friendlink .layout-item:first-child .title { margin-bottom: 50px; }
.friendlink .title { margin-bottom: 20px; font-size: 18px; }
.friendlink .content { font-size: 14px; }
.friendlink .content:not(:last-child) { margin-bottom: 12px; }
.friendlink .layout-item:nth-child(2) .info-item:first-child { margin-bottom: 84px; }


/* --------- footer --------- */
.footer { height: 62px; text-align: center; line-height: 62px; background-color: #2a45bd; color: #fff; }