.choose-img-box {
position: relative;
display: block;
width: 100%;
padding-top: 120px;
z-index: 1;
}
.choose-img-box:before {
content: "";
position: absolute;
top: 0;
left: -1000000px;
bottom: 0;
right: 200px;
background-color: var(--thm-base, #ff8300);
z-index: -1;
}
.choose-img-box .inner {
position: relative;
display: block;
overflow: hidden;
background-color: var(--thm-bg, #1a1a1a);
} .choose-img-box .border-box {
position: absolute;
top: 120px; bottom: 0;
left: -10px;
width: 10px;
background: #ffffff;
-webkit-animation-duration: 2s;
animation-duration: 2s;
z-index: 2; margin-top: 40px;
margin-bottom: 40px;
} .choose-img-box.choose-img-box--both .border-box {
top: 120px;
bottom: 120px;
} .choose-img-box.choose-img-box--bottom .border-box {
top: 0;
bottom: 120px;
margin-top: 40px;
}
.choose-img-box .inner {
position: relative;
display: block;
overflow: hidden;
background-color: var(--thm-bg, #1a1a1a);
}
.choose-img-box .inner img {
width: 100%;
display: block;
-webkit-transform: scale(1.0);
-moz-transform: scale(1.0);
transform: scale(1.0);
-webkit-transition: transform 0.5s ease-out !important;
-moz-transition: transform 0.5s ease-out !important;
transition: transform 0.5s ease-out !important;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: transform;
mix-blend-mode: luminosity;
}
.choose-img-box .inner:hover img {
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
transform: scale(1.3);
mix-blend-mode: normal;
} @-webkit-keyframes float-bob-y {
0% {
transform: translateY(-20px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(-20px);
}
}
@keyframes float-bob-y {
0% {
transform: translateY(-20px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(-20px);
}
}
.float-bob-y {
-webkit-animation-name: float-bob-y;
animation-name: float-bob-y;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
} @-webkit-keyframes float-bob-x {
0% {
transform: translateX(-20px);
}
50% {
transform: translateX(-10px);
}
100% {
transform: translateX(-20px);
}
}
@keyframes float-bob-x {
0% {
transform: translateX(-20px);
}
50% {
transform: translateX(-10px);
}
100% {
transform: translateX(-20px);
}
}
.float-bob-x {
-webkit-animation-name: float-bob-x;
animation-name: float-bob-x;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
} @media only screen and (max-width: 1200px) {
.choose-img-box:before {
display: none;
}
.choose-img-box.choose-img-box--right:before {
display: none;
}
}
@media only screen and (max-width: 991px) {
.choose-img-box {
padding-top: 60px;
}
.choose-img-box:before {
left: -1000000px;
right: -100000px;
}
.choose-img-box.choose-img-box--right:before {
left: -100000px !important;
right: -1000000px !important;
}
}
@media only screen and (max-width: 767px) {
.choose-img-box {
padding-top: 40px;
}
.choose-img-box .border-box {
display: none;
}
} .choose-img-box.choose-img-box--right:before {
left: 200px !important;
right: -1000000px !important;
}
.choose-img-box.choose-img-box--right .border-box {
left: auto;
right: -10px;
} .choose-img-box.no-bg-extension:before {
display: none !important;
} .choose-img-box.choose-img-box--both {
padding-top: 120px;
padding-bottom: 120px;
} .choose-img-box.choose-img-box--bottom {
padding-top: 0;
padding-bottom: 120px;
} @media only screen and (max-width: 991px) {
.choose-img-box.choose-img-box--both {
padding-top: 60px;
padding-bottom: 60px;
}
.choose-img-box.choose-img-box--bottom {
padding-bottom: 60px;
} .choose-img-box .border-box {
top: 60px;
margin-top: 20px;
margin-bottom: 20px;
}
.choose-img-box.choose-img-box--both .border-box {
top: 60px;
bottom: 60px;
}
.choose-img-box.choose-img-box--bottom .border-box {
top: 0;
bottom: 60px;
margin-top: 20px;
}
}
@media only screen and (max-width: 767px) {
.choose-img-box.choose-img-box--both {
padding-top: 40px;
padding-bottom: 40px;
}
.choose-img-box.choose-img-box--bottom {
padding-bottom: 40px;
}
}  .shape-1 {
position: absolute;
top: 60px;
left: -100px;
width: 120px;
height: 170px;
z-index: 2;
}
.shape-1:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--thm-base, #ff8300);
-moz-transform: skew(20deg, 0deg);
-webkit-transform: skew(20deg, 0deg);
-o-transform: skew(20deg, 0deg);
-ms-transform: skew(20deg, 0deg);
transform: skew(20deg, 0deg);
} .shape-1.shape-right {
left: auto;
right: -120px;
}
.shape-1.shape-right:before {
-moz-transform: skew(-20deg, 0deg);
-webkit-transform: skew(-20deg, 0deg);
-o-transform: skew(-20deg, 0deg);
-ms-transform: skew(-20deg, 0deg);
transform: skew(-20deg, 0deg);
} .shape-2 {
position: absolute;
top: 230px;
left: -170px;
width: 80px;
height: 80px;
z-index: 2;
}
.shape-2:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--thm-black, #1a1a1a);
-moz-transform: skew(20deg, 0deg);
-webkit-transform: skew(20deg, 0deg);
-o-transform: skew(20deg, 0deg);
-ms-transform: skew(20deg, 0deg);
transform: skew(20deg, 0deg);
} .shape-2.shape-right {
left: auto;
right: -200px;
}
.shape-2.shape-right:before {
-moz-transform: skew(-20deg, 0deg);
-webkit-transform: skew(-20deg, 0deg);
-o-transform: skew(-20deg, 0deg);
-ms-transform: skew(-20deg, 0deg);
transform: skew(-20deg, 0deg);
}