.banner-main{position: relative;margin-top: 5px;overflow: hidden;font-size: 0;display: block;text-decoration: none;}
.banner-main:after{background-color: #fff;  content: " ";  height: 50px;  left: -5px;  position: absolute;  top: -33px;  transform: rotate(-1deg);  width: calc(100% + 5px);z-index: 8;}

.banner-main-text{position: absolute;right: 0;width: 50%;height: 100%;background-color: #10384f;clip-path: polygon(16% 0,100% 0,100% 100%,0 100%);padding-right: 62px;display: flex;flex-direction: column;justify-content: center;z-index: 1;align-items: flex-end;padding: 0 4.9% 0 5%;text-align: right;opacity: .9;}
.banner-main-h1{color: #00bcff;font-size: 50px;font-style: italic;font-weight: 200;letter-spacing: 1.26px;line-height: 1.05;margin: 10px 0 36px 0;}
.banner-main-more-btn{transition:.5s ease;color: #fff;font-size: 12px;font-style: italic;font-weight: 800;letter-spacing: .5px;line-height: 1;text-transform: uppercase;}
.banner-main-more-btn:before{transition:.5s ease;content:'';border-left: solid 1px currentColor;transform: rotate(19deg);display: inline-block;height: 154%;margin: 0 5px -4px 0;}
.banner-main-image{position: static;}
.banner-main-image img{width: 100%;height: auto;transition: transform ease .5s}
.banner-main:hover img{transform: scale(1.05)}
.banner-main:hover:before{transform: rotate(27deg);}
.banner-main:hover .banner-main-more-btn:before{  margin: 0 40px -4px 0;}
.banner-main:hover .banner-main-more-btn{transform: translateX(-30px);}

.banner-main-line{border: .5px solid #ff3162;height: 120%;/*! left: 54%; */position: absolute;top: -30px;transform: translateX(0) rotate(15deg);z-index: 3;left: auto;right: 46%;transform: translateX(0) rotate(16deg);transition: all .3s ease-out,right .2s ease-out;}
.banner-main:hover .banner-main-line{transform: rotate(20deg);}
.banner-main-angle{background-color: #00bcff;height: 100%;opacity: .5;position: absolute;/*! right: -98%; */transform: skewX(-24deg);width: 100%;z-index: 1;left: -98%;transition: left .5s ease-out;}
.banner-main:hover .banner-main-angle{left: -100%;}
  
@media (max-width:1440px){
  .banner-main-h1{font-size: 40px;}
}

@media (max-width:991px){
  .banner-main{display: flex;flex-direction: column-reverse;}
  .banner-main-text {width: 100%; height: auto;margin-top: -15px;overflow-wrap: break-word;padding: 51px 16px 38px 0;position: static;clip-path: polygon(0 20px,100% 0,100% 100%,0 100%);opacity: 1;}

  .banner-main-angle{display: none}
  .banner-main-line{border-width: 1px 0 0;height: 1px;left: 0;margin-top: 8px;position: absolute;top: 65%;transform: skewY(-7deg);width: 100%;z-index: 1;}
  .banner-main-line, .banner-main:hover .banner-main-line{transform: skewY(-7deg);height: auto;margin-top: -2px;overflow-wrap: break-word;padding: 2px 35px 4px;position: relative;text-align: right;width: 100%;z-index: 1;} 
  .banner-main:hover img{transform: none;}
  .banner-main:hover .banner-main-more-btn::before{margin: 0 5px -4px 0;}
  .banner-main:hover .banner-main-more-btn{transform: none;}
  .banner-main-more-btn::before{height: 21px;margin: 0 5px -4px 0;border-left: solid 1px currentColor;transform: rotate(13deg);}
  .banner-main::after{content:none}
  .banner-main-h1{font-size: 44px;margin: -2px 0 28px 0;}
  .banner-main-image img{transform: scale(1.15);/*! transform-origin: 100% 100%; */}
}

@media (max-width:480px){
  .banner-main-h1{font-size: 35px;}
}