.banner-event{ width:100%; height:auto; position:relative; overflow:hidden;}
.banner-event .pic-pc{ width:100%; height:auto; display:block;}
.banner-event .txt-wrap{ width:1280px; height:100%; display:flex; align-items:center; position:absolute; left:50%; margin-left:-640px; top:0; z-index:2;}
.banner-event .txt{ width:100%; max-width:100%; height:auto; color:#fff; opacity:0; -webkit-transition:all 0.3s linear 0s; -moz-transition:all 0.3s linear 0s; transition:all 0.3s linear 0s;}
.banner-event .headline{ line-height:1.25em; font-size:64px; margin:0;}
.banner-event .txt.active{ -webkit-animation-name:fadeInUpliu; animation-name:fadeInUpliu; -webkit-animation-duration:0.5s; animation-duration:0.5s; -webkit-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-delay:0s; animation-delay:0s; -webkit-animation-iteration-count:1; animation-iteration-count:1; presented-by:nation-liu; opacity:1;}
.banner-event .date{ line-height:1.25em; padding-left:65px; font-size:40px; font-family:dc-light; margin:60px 0 0; position:relative;}
.banner-event .date:before{  content:''; width:40px; height:40px; background:url(/wp-content/themes/deepcomputing/html/images/icon_date_event.svg) center center no-repeat; background-size:100% 100%; position:absolute; left:0; top:5px;}
.banner-event .location{ line-height:1.25em; padding-left:65px; font-size:40px; font-family:dc-light; margin:25px 0 0; position:relative;}
.banner-event .location:before{ content:''; width:45px; height:50px; background:url(/wp-content/themes/deepcomputing/html/images/icon_location.svg) center center no-repeat; background-size:100% 100%; position:absolute; left:-3px; top:0;}
.event-details{ width:1280px; height:auto; margin:0 auto;}
.event-details .event-content{ width:100%; height:auto; margin:80px auto 60px;}
.event-details .event-content .wp-block-heading{ line-height:1.25em; font-size:40px; font-family:dc-semibold; margin-bottom:40px;}
.event-details .event-content p{ line-height:1.5em; font-family:dc-light; font-size:20px; margin-top:15px;}
.event-details .event-content p a {color: #dc1f2d;text-decoration:underline;}
.event-details .event-content .has-text-align-center{ margin:50px 0; text-align:center;}
.event-details .event-content .has-text-align-center a{ display:inline-block; padding:0 100px; line-height:55px; font-size:18px; font-family:dc-semibold; color:#fff; letter-spacing:1px; background:#dc1f2d; border-radius:3px; text-transform:uppercase;}
.event-details .event-content .has-text-align-center a:hover{ opacity:0.8;}
.event-details .event-intro{ width:100%; height:auto; display:flex; justify-content:center; gap:20px; flex-wrap:wrap; margin:60px auto 150px;}
.event-details .event-intro .item{ width:calc(31.5% - 42px); height:auto; padding:50px 20px 40px; font-size:16px; border:1px solid #d1d6de; box-shadow:0 0 10px rgba(4,0,0,.15); border-radius:6px;}
.event-details .event-intro .item .icon{ width:100%; height:126px; text-align:center;}
.event-details .event-intro .item .icon img{ width:auto; max-width:100%; height:100%;}
.event-details .event-intro .item .title{ height:auto; line-height:1.25em; font-size:20px; font-family:dc-bold; text-align:center; text-transform:uppercase; margin:45px 0;}
.event-details .event-intro .item p{ line-height:1.5em; font-size:16px; margin-top:15px;}
.event-details .event-intro .item p img{ display:block; width:auto; max-width:100%; height:auto; margin:20px auto; border:none;}
.event-details .event-intro .item p a{ color:#dc1f2d; text-decoration:underline;}
.event-details .event-intro .item ul {margin-top: 10px;}
.event-details .event-intro .item ul li:before {content: '•';position: absolute;left: 0;top: 0;font-size: 40px;line-height: 16px;}
.event-details .event-intro .item ul li {margin-bottom: 10px;padding-left: 24px;position: relative;line-height: 22px;}
.event-details .event-intro .item b,
.event-details .event-intro .item strong{ color:#dc1f2d; font-family:dc-semibold;}
.event-details .event-intro .item strong.black {color: #2a2d42;}
.event-details .event-intro .item .build,
.event-details .event-intro .item h4,
.event-details .event-intro .item h5,
.event-details .event-intro .item h6{ line-height:1.25em; font-size:16px; text-transform:uppercase;}
.event-details .event-intro .item .level{ margin-top:0; font-size:12px; text-transform:uppercase;}
.event-details .event-intro .item .date{ padding-left:25px; margin:12px 0; line-height:20px; font-size:16px; position:relative;}
.event-details .event-intro .item .date:before{ content:''; width:16px; height:16px; background:url(/wp-content/themes/deepcomputing/html/images/icon_date_event_red.svg) center center no-repeat; background-size:100% 100%; position:absolute; left:0; top:2px;}
.event-details .event-intro .item .location, .event-details .event-intro .item .devroom{ padding-left:25px; margin:12px 0; line-height:20px; font-size:16px; position:relative;}
.event-details .event-intro .item .location:before{ content:''; width:18px; height:18px; background:url(/wp-content/themes/deepcomputing/html/images/icon_location_red.svg) center center no-repeat; background-size:100% 100%; position:absolute; left:0; top:0;}
.event-details .event-intro .item .devroom:before{ content:''; width:18px; height:18px; background:url(/wp-content/themes/deepcomputing/html/images/devroom.svg) center center no-repeat; background-size:100% 100%; position:absolute; left:0; top:0;}
.event-details .event-intro .item .hero{ margin:20px 0 25px; display:flex; align-items:center;}
.event-details .event-intro .item .hero .avatar{ width:90px; height:90px; border:1px solid #dc1f2d; border-radius:50%;}
.event-details .event-intro .item .hero .avatar img{ width:100%; height:100%; border-radius:50%;}
.event-details .event-intro .item .hero .txt{ width:calc(100% - 112px); padding-left:20px;}
.event-details .event-intro .item .hero .name{ line-height:1.5em; font-size:16px; font-family:dc-semibold; margin-bottom:5px;}
.event-details .event-intro .item .hero .name b,
.event-details .event-intro .item .hero .name strong{ color:#2a2d42;}
.event-details .event-intro .item .hero .ceo{ line-height:18px; font-size:14px;}
.event-details .event-intro .item .btn{ margin-top:35px;}
.event-details .event-intro .item .btn a{ width:100%; height:55px; display:flex; justify-content:center; align-items:center; margin-top:10px;  font-size:18px; font-family:dc-bold; color:#fff; background:#dc1f2d; border-radius:3px; text-transform:uppercase;}
.event-details .event-intro .item .btn a.btn-black{ background:#19191d;}
.event-details .event-intro .item .btn a:hover{ opacity:0.8;}
/*Events List*/
.bg-events{ padding:100px 0; background:#f1f1f1;}
.events-wrap{ width:1280px; height:auto; margin:0 auto;}
.events-wrap .summary{ line-height:1.5em; font-size:20px; margin-bottom:60px;}
.events-list{ width:100%; height:auto; display:flex; justify-content:left; gap:20px; flex-wrap:wrap; margin:0 auto;}
.events-list .upcoming-title {color: #2a2d42;font-family: 'dc-bold';text-transform: none;text-align: center; width: 100%;font-size: 40px; line-height: 50px;}
.events-list .item{ width:calc((100% - 160px) / 3); height:auto; padding:25px 20px; font-size:16px; background:#fff;}
.events-list .item .title{ line-height:1.5em; font-size:20px; font-family:dc-bold; color:#1b1b1b; margin-bottom:30px;}
.events-list .item .title a{ color:#1b1b1b;}
.events-list .item .title a:hover{ color:#dc1f2d;}
.events-list .item .location{ padding-left:25px; margin:8px 0; line-height:20px; font-size:14px; color:#474545; position:relative;}
.events-list .item .location:before{ content:''; width:18px; height:18px; background:url(../images/icon_location_red.svg) center center no-repeat; background-size:100% 100%; position:absolute; left:-1px; top:0;}
.events-list .item .date{ padding-left:25px; margin:8px 0; line-height:20px; font-size:14px; color:#474545; position:relative;}
.events-list .item .date:before{ content:''; width:16px; height:16px; background:url(../images/icon_date_event_red.svg) center center no-repeat; background-size:100% 100%; position:absolute; left:0; top:2px;}
.events-list .item .more{ line-height:1.5em; font-size:16px; color:#1b1b1b; margin-top:25px;}
.events-list .item .more a{ display:inline-block; padding-right:30px; color:#1b1b1b; background:url(../images/arrow.svg) right center no-repeat; -webkit-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s;}
.events-list .item .more a:hover{ margin-left:15px;}
.events-list .item:hover .title{ color:#dc1f2d;}
.events-list .item:hover .title a{ color:#dc1f2d;}
.past-events{ width:100%; height:auto; margin-top:100px;}
.past-events .headline{ line-height:50px; font-size:40px; font-family:dc-bold; color:#2a2d42; text-align:center; text-transform:capitalize;}
.past-events .switch-past-events{ display:inline-block; padding-right:42px; position:relative; cursor:pointer;}
.past-events .switch-past-events:before{ content:''; width:32px; height:32px; background:#dc1f2d url(../images/arrow_events.svg) center center no-repeat; background-size:auto 50%; position:absolute; right:0; top:9px; border-radius:50%; -webkit-transform:rotate(-90deg); transform:rotate(-90deg); -webkit-transition:all 0.3s linear 0s; transition:all 0.3s linear 0s;}
.past-events.opening .switch-past-events:before{ -webkit-transform:rotate(90deg); transform:rotate(90deg);}
.past-events .past-years{ width:100%; height:auto; display:none;}
.past-events .past-years .year{ padding-bottom:10px; margin:40px 0 30px; line-height:1em; font-size:24px; font-family:dc-semibold; color:#1b1b1b; border-bottom:2px solid #80818e;}
.past-events.opening .past-years{ display:block;}
.event--map {padding: 50px 0; text-align: center;margin: 0 auto;width: 1280px;}
.event--map img {width: 100%;}

@media screen and (max-width:1650px){
.banner-event .headline {font-size: 44px;}
.banner-event .date, .banner-event .location {font-size: 30px;}
.banner-event .date:before {width: 30px; height: 30px;}
.banner-event .location:before {width: 35px; height: 40px;}
}

@media screen and (max-width:1440px){
.banner-event .txt-wrap{ width:1180px; margin-left:-590px;}
.event-details{ width:1180px;}
.events-wrap{ width:1180px;}
.event--map { width:1180px;}
}

@media screen and (max-width:1280px){
.banner-event .txt-wrap{ width:1080px; margin-left:-540px;}
.banner-event .headline{ font-size:54px;}
.banner-event .date{ padding-left:55px; font-size:36px; margin:50px 0 0;}
.banner-event .date:before{ width:36px; height:36px; top:2px;}
.banner-event .location{ padding-left:55px; font-size:36px; margin:20px 0 0;}
.banner-event .location:before{ width:40px; height:40px; top:0;}
.event-details{ width:1080px;}
.events-wrap{ width:1080px;}
.event--map { width:1080px;}
}

@media screen and (max-width:1152px){
.banner-event .txt-wrap{ width:960px; margin-left:-480px;}
.banner-event .headline{ font-size:50px;}
.event-details{ width:960px;}
.events-wrap{ width:960px;}
.event--map { width:100%;}
}

@media screen and (max-width:768px){
.banner-event .txt-wrap{ width:720px; margin-left:-360px;}
.banner-event .headline{ font-size:32px;}
.banner-event .date{ padding-left:40px; font-size:22px; margin:30px 0 0;}
.banner-event .date:before{ width:26px; height:26px; top:0;}
.banner-event .location{ padding-left:40px; font-size:22px; margin:15px 0 0;}
.banner-event .location:before{ width:28px; height:28px; left:0; top:0;}
.event-details{ width:720px;}
.event-details .event-content{ margin:60px auto 0;}
.event-details .event-content .wp-block-heading{ font-size:36px; margin-bottom:30px;}
.event-details .event-intro{ margin:60px auto 100px;}
.event-details .event-intro .item .icon{ height:80px;}
.event-details .event-intro .item .title{ margin:30px 0;}
.event-details .event-intro .item .hero .avatar{ width:60px; height:60px;}
.event-details .event-intro .item .hero .txt{ width:calc(100% - 77px); padding-left:15px;}
.event-details .event-intro .item .hero .ceo{ line-height:20px;}
.event-details .event-intro .item .btn a{ font-size:15px;}
.bg-events{ padding:50px 0 60px;}
.events-wrap{ width:720px;}
.event--map { width:100%;}
}

@media screen and (max-width:767px){
.banner-event .pic-pc{ width:150%; margin-left:-25%;}
.banner-event .txt-wrap{ width:90vw; left:5vw; margin:0;}
.banner-event .headline{ font-size:24px;}
.banner-event .date{ padding-left:26px; font-size:16px; margin:20px 0 0;}
.banner-event .date:before{ width:16px; height:16px; top:0;}
.banner-event .location{ padding-left:26px; font-size:16px; margin:6px 0 0;}
.banner-event .location:before{ width:18px; height:18px; left:-1px; top:0;}
.event-details{ width:auto; margin:0 5vw;}
.event-details .event-content{ margin:30px auto 0;}
.event-details .event-content .wp-block-heading{ font-size:30px; margin-bottom:20px;}
.event-details .event-content .has-text-align-center{ margin:30px 0;}
.event-details .event-content .has-text-align-center a{ width:100%; padding:0;}
.event-details .event-intro{ margin:50px auto; display:block; gap:0;}
.event-details .event-intro .item{ width:calc(100% - 42px); padding:40px 20px; margin-bottom:20px;}
.event-details .event-intro .item .icon{ height:100px;}
.event-details .event-intro .item .title{ margin:30px 0;}
.event-details .event-intro .item .hero .avatar{ width:80px; height:80px;}
.event-details .event-intro .item .hero .txt{ width:calc(100% - 97px); padding-left:15px;}
.event-details .event-intro .item .btn a{ font-size:18px;}
.bg-events{ padding:30px 5vw 50px;}
.events-wrap{ width:100%;}
.events-wrap .summary{ margin-bottom:30px;}
.events-list{ display:block; gap:0;}
.events-list .upcoming-title {line-height:40px; font-size:30px;}
.events-list .item{ width:auto; margin-bottom:20px;}
.events-list .item .more a:hover{ margin-left:0;}
.events-list .item:hover .title{ color:#1b1b1b;}
.past-events{ margin-top:50px;}
.past-events .headline{ line-height:40px; font-size:30px;}
.past-events .switch-past-events{ padding-right:35px;}
.past-events .switch-past-events:before{ width:26px; height:26px; top:8px;}
.past-events .past-years .year{ margin:30px 0 20px;}
}