/*home style*/

#bot .footer { max-width: 1440px; border-top:0px none; }

#mid .banner { overflow: hidden; position: relative; max-height: 90vh; width: 100%; }
#mid .banner .slider { height:100%;}
#mid .banner .slider .bnr-wrapper { position: relative; }
#mid .banner .slider .slider-item { height: 100%; }
.banner .slider .slider-item .sliderWrap { position: absolute; top: 0; left: 0; bottom: 0; right: 0; /* max-width: 1440px; */ height: 100%; margin: auto; }
#mid .banner .slider .overlay { position: absolute; max-width: 1440px; height: 100%; margin: auto; left: 0; right: 0; top: 0; bottom: 0; }
#mid .banner .slider .overlay:before,
#mid .banner .slider .overlay:after { content: ''; position: absolute; left: 0; right: 0; margin: auto; height: 50%; width: 250px; background-color: #da2128; opacity: 0.35; }
#mid .banner .slider .overlay.first:before,
#mid .banner .slider .overlay.first:after { margin-left:45%;}
#mid .banner .slider .overlay.second:before,
#mid .banner .slider .overlay.second:after { margin-left: 200%;display:none; }
#mid .banner .slider .overlay:before {  top: 0; -webkit-transform: skew(143deg, 0deg); -moz-transform: skew(143deg, 0deg); -ms-transform: skew(143deg, 0deg); -o-transform: skew(143deg, 0deg); transform: skew(143deg, 0deg); }
#mid .banner .slider .overlay:after { top: 50%; -webkit-transform: skew(-143deg, 0deg); -moz-transform: skew(-143deg, 0deg); -ms-transform: skew(-143deg, 0deg); -o-transform: skew(-143deg, 0deg); transform: skew(-143deg, 0deg); }
/*#mid .banner:hover .slider .overlay:before,
#mid .banner:hover .slider .overlay:after { left: -200%; transition:all 0.75s ease-in-out; }
#mid .banner:hover .slider .overlay.second:before,
#mid .banner:hover .slider .overlay.second:after { left: -155%; transition: all 0.75s ease-in-out; }*/

/* announcement */
#mid .announcement {background-color: #da2128; color: #ffffff; text-align: center; padding: 0px 10px 5px 10px; }
#mid .announcement a {color: #ffffff; text-decoration: underline;}
#mid .announcement a:hover {color: #ffffff; text-decoration: none;}

#mid .banner .slick-dotted.slick-slider { margin: 0; }

.banner .slider .banner-angle-bg {
  position: absolute;
  width: 43vw;
  height: 100%;
  background: rgba(47, 47, 47, 0.55);
  top: 0;
  transform: skew(-30deg);
  transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
  right: -50vw;
  opacity: 0;
}
@media screen and (max-width: 1200px) {
  .banner .slider .banner-angle-bg {
    width: 65vw;
  }
}
@media screen and (max-width: 1024px) {
  .banner .slider .banner-angle-bg {
    width: 70vw;
  }
}
.banner .slider .banner-angle-bg:before {
  content: '';
  display: block;
  position: absolute;
  width: 8vw;
  height: 55vh;
  top: 20%;
  background: rgba(218, 33, 40, 0.35);
  left: -4vw;
  /* transition: all 0.6s 0.3s; */
  opacity: 1;
}
.banner .slider .banner-angle-bg:after {
  content: '';
  display: block;
  position: absolute;
  width: 8vw;
  height: 30vh;
  bottom: -10%;
  background: #da2128;
  left: -6vw;
  /* transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1) 0.6s; */
  opacity: 1;
}
.banner .slider .slick-active .banner-angle-bg {
  right: -18vw;
  opacity: 1;
}

@media screen and (max-width: 1200px) {
  .banner .slider .slick-active .banner-angle-bg {
    right: -20vw;
  }
}
@media screen and (max-width: 1024px) {
  .banner .slider .slick-active .banner-angle-bg {
    right: -23vw;
  }
}
.banner .slider .slick-active .banner-angle-bg:before {
  opacity: 1;
  top: 25%;
}
.banner .slider .slick-active .banner-angle-bg:after {
  opacity: 1;
  bottom: 0;
}
.banner .slider .slick-active .item-content {
  top: 0;
  opacity: 1;
}

/* Webcast */
#mid .webcast-wrapper{background-color: #ff4d00; width: 100%; color: #ffffff; text-transform: uppercase; line-height: 120%; min-height: 50px; }
#mid .webcast-wrapper:hover {background-color: #ff763b;}
#mid .webcast-wrapper .webcast { -webkit-box-align: center; align-items: center; display: flex; justify-content: center; padding: 15px; width: 100%; position: unset;}
#mid .webcast-wrapper .webcast img {display: inline-block; height: auto; vertical-align: middle; margin:0 0 0 0; }
#mid .webcast-wrapper a {width: 100%; color: #ffffff; font-weight: normal; text-decoration:none; font-family: 'Roboto Medium';}
#mid .webcast-wrapper a:hover {color: #ffffff; text-decoration: none;}
#mid .webcast-wrapper .webcast .hover {display:none;}
#mid .webcast-wrapper .webcast .hover {display:none;}
#mid .webcast-wrapper .img-overlay{display: block; opacity: 0; position: absolute; width: 100%; height: 100%; transition: opacity 0.25s; z-index: 1; background-color: #0B0B1B;}
#mid .webcast-wrapper .img-overlay:hover {opacity: 0.3;}

/* device portrait */
@media only screen and (min-device-width: 300px) and (max-device-width: 1200px) and (orientation: portrait) {
  .banner .slider .banner-angle-bg {
    width: 90vh;
  }
  .banner .slider .banner-angle-bg:before {
    width: 5.5vh;
    left: -3vh;
    height: 15vh;
  }
  .banner .slider .banner-angle-bg:after {
    width: 5.5vh;
    left: -5vh;
    height: 15vh;
  }
  .banner .slider .slick-active .banner-angle-bg {
    right: -50vh;
  }
  .banner .slider .slick-active .banner-angle-bg:before {
    top: 50%;
  }
  .banner .slider .item-content {
    justify-content: flex-start;
    padding-top: 10vh;
  }
}
@media only screen and (min-device-width: 300px) and (max-device-width: 550px) and (orientation: portrait) {
  .banner .slider .slick-active .banner-angle-bg {
    right: -78vh;
  }
  .banner .slider .item-content {
    padding: 20px;
    padding-top: 50px;
  }
}


/* Slider Dots */
#mid .banner .slider .slick-dots { bottom: 10px; right: 10px; margin: 0; padding: 0; text-align: right; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear; }
#mid .banner .slider .slick-dots li button { background-color: #da2128; border-radius: 100%;  }
#mid .banner .slider .slick-dots li button::before { content: ""; }
#mid .banner .slider .slick-dots li.slick-active button { background-color: #ffffff; border: 3px solid #da2128; }
#mid .banner .slider:hover .slick-dots { visibility: visible; opacity: 1; }


#mid .banner .slider .msg {  }
#mid .banner img{width:100%;max-width:none; max-height: 90vh; }
#mid .banner .msg { position: absolute; background-color: #fff; background-color: rgba(255,255,255,0.5); right: 35px; bottom: 40px; padding: 25px; max-width: 330px; font-size: 20px; }
#mid .banner .msg p{margin:0;}


#mid .stats { background-color: #f2f2f2; text-align: center; padding: 75px 0 75px; position:relative;}
#mid .stats .statsWrap { max-width: 1440px;}
#mid .stats .circle-stat { position: relative; }
#mid .stats .circle-stat .circleCnt { width: 100%; z-index: 2; position: relative; font-size: 0; }
#mid .stats .circle-stat .circleCnt > * { display: inline-block; width: 45%; font-size: 14px;vertical-align:middle; text-align:left; }
#mid .stats .circle-stat .circleCnt .circleText { margin-left: 5%; width: 50%; font-size: 14px; font-weight: bold; line-height: 125%; }
#mid .stats .circle-stat .circleCnt .textAlt {display:inline-block;margin-top:10px; }
#mid .stats .circle-stat .circleCnt .focus { font-size: 48px; vertical-align: middle; line-height: 100%; }
#mid .stats .circle-stat .circleCnt .focus2 { font-size: 33px; vertical-align: middle; line-height: 100%; }
#mid .stats .circle-stat .circleCnt .focus3 { vertical-align: -15px  }
#mid .stats .circle-stat .circle { z-index: 1; position: absolute; left: 0; right: 0; margin: -15% auto 0; top: 0; bottom: 0; background-color: #fff; width: 60%; padding: 60% 0 0; border-radius: 200px; }


#mid .about { border-top: 10px solid #da2128;}
#mid .about .aboutWrap { max-width: 1440px; margin: auto; font-size: 0; }
#mid .about .aboutWrap > div { font-size: 14px;   }
#mid .about .aboutWrap p { line-height: 200%;}
#mid .about .stockInfo {  font-size: 0; }
#mid .about .stockInfo .stockItem { line-height: 200%; display: inline-block; width: 50%; font-size: 14px; vertical-align: top; margin-bottom: 10px; }
#mid .about .stockInfo .stockItem .stockValue { color: #da2128;}

#mid .newsroom .newsWrap { max-width: 1440px; margin: auto; }
#mid .newsroom .summary { font-weight: bold; }

#mid .links { background-color: #e1e1e1; }
#mid .links .linksWrap { max-width: 1440px; margin: auto; }
#mid .links .link-item { text-align: center; }
#mid .links .link-item a { display: inline-block; vertical-align: middle; text-decoration: none; }
#mid .links .link-item .hover { display: none }
#mid .links .link-item a:hover .hover { display: inline-block; transition:all 0.25s; }
#mid .links .link-item a:hover .default { display: none; transition: all 0.25s; }
#mid .links .link-item a > * { transition: all 0.25s; }
#mid .links .link-item a:hover > * {color:#da2128; transition:all 0.25s;}
#mid .links a > *{display:inline-block; vertical-align:middle;}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 #mid .banner .msg {right: 35px; max-width: 370px;  }
}

@media screen and (max-width: 1600px){
	#mid .banner .msg { right: 35px; max-width: 330px; }
  }
  
@media screen and (max-width: 1440px){
	#mid .banner .msg { right: 10px; max-width: 306px; padding: 15px; }
  }

@media screen and (max-width: 1366px) {
}
 


@media screen and (max-width: 1280px) {
  #mid .stats .circle-stat .circleCnt .circleText {  font-size: 14px; }
  #mid .stats .circle-stat .circleCnt .focus { font-size: 43px; }
  #mid .links .link-item a h3 { font-size: 21px; margin-left: 10px !important; }
}

@media screen and (max-width: 1152px) {
  #mid .stats .circle-stat .circleCnt > * { width: 35%; }
  #mid .stats .circle-stat .circleCnt .focus { font-size: 38px; }
  #mid .stats .circle-stat .circleCnt .circleText { font-size: 14px; width: 60%; }
  #mid .links .link-item a h3 {  margin-left:0px !important; }
}


@media screen and (max-width: 1024px) {
  
}


@media screen and (max-width: 991px) {
  #mid .stats .circle-stat .circle { width: 42.5%; padding: 42.5% 0 0; }
  #mid .stats .circle-stat .circleCnt > * { width: 25%; }
  #mid .stats .circle-stat .circleCnt .circleText{width:30%;}
}

@media screen and (max-width: 767px) {
  #mid .stats .circle-stat .circle { display: none; }
  #mid .stats .circle-stat { background-color: #fff; border-bottom: 3px dashed #f2f2f2; }
  #mid .stats .circle-stat:last-child {  border-bottom: 0px none; }
  #mid .stats .circle-stat .circleCnt .circleText { width: 50%; }
  #mid .stats .circle-stat .circleCnt > * { width: 35%; }
  #mid .links .link-item a h3 { font-size: 20px; margin-top:10px;}
	
	.banner .slider .slider-item .sliderWrap { position: relative; z-index: 1; }
	#mid .banner .msg { position: relative; font-size: 16px; width: 100%; max-width: none; left: 0; right: 0; bottom: 0; padding: 15px; }
	#mid .banner .slider .overlay:before,
	#mid .banner .slider .overlay:after { width: 30%; }
}

@media screen and (max-width: 640px) {
  #mid .links .linksWrap { margin: 10px 0 0 !important; text-align: left; }
  #mid .links .link-item a h3 { font-size: 24px; margin-left: 20px !important; }
  #mid .banner .msg { font-size: 14px; }
}

@media screen and (max-width: 512px) {
  #mid .about .stockInfo .stockItem {  width: 100%;   }
}

@media screen and (max-width: 420px) {
  #mid .links .link-item a > * { display: block; margin:auto;}
  #mid .links .link-item a h3 {   margin-left: 0px !important; }
}


