@charset "UTF-8";

.smart-link {position: relative; background:#000 url('../images/link-bg.png') no-repeat center / cover; background-attachment: fixed; padding:10rem 0;}
.smart-link > .area {display: flex; align-items: stretch; justify-content: space-between;}

.smart-link .section-title {min-height:23rem;}
.smart-link .section-title h1,
.smart-link .section-title p {color:#fff;}
.smart-link .section-title h1 {font-size: 5rem; font-weight: 600;}
.smart-link .section-title h1 span {position: relative;}
.smart-link .section-title h1 span::after {content: ''; position: absolute; left: calc(100% + 1rem); bottom: .8rem; width: 1rem; height: 1rem; background:#fff; border-radius: 100%;}
.smart-link .section-title p {margin-top: 1rem; font-size: 1.8rem;}

.smart-link .slider {overflow: hidden; max-width:calc(100% - 43rem); width:100%; color:#fff;}
.smart-link .slider .box {display: flex; align-items: center; justify-content: center; flex-direction: column; padding:3rem; color:#fff; border:.1rem solid #fff; border-radius:2rem; height:23rem;}
.smart-link .slider .img-box {text-align: center;}
.smart-link .slider .text {font-size: 2.4rem; line-height: 2.6rem; margin-top: 2.5rem;}
.smart-link .slider .text span {font-size: 2rem; font-weight: 500;}
.smart-link .slider li {text-align: center;}
.smart-link .slider a:hover .box {background:#fff;}
.smart-link .slider a:hover img,
.smart-link .slider a:hover p {filter:invert(1);}

.smart-link .control {display: inline-block; position: absolute; bottom:0; left:0;}
.smart-link .control .prevnext{position: relative; margin-right: 5rem;}
.smart-link .control .prevnext::before {content:''; background:#fff; width:.5rem; height: .5rem; position: absolute; left:50%; margin-left:-.2rem; top:50%; margin-top:-.2rem; border-radius:50%; opacity:0.4;}
.smart-link .control button {width:1.7rem; height:2.4rem; text-indent: -99999rem; opacity:0.4;}
.smart-link .control button:hover {opacity:1;}
.smart-link .control .prev {background:url('../images/prev.png') no-repeat center; margin-right: 2.4rem;}
.smart-link .control .next {background:url('../images/next.png') no-repeat center; margin-left: 2.4rem;}

@media screen and (max-width:1840px) {
    .smart-link .control {left: 2rem;}
    .smart-link .section-title {margin:0;}
}

@media screen and (max-width:1200px) {
    .smart-link {padding:8rem 0;}
    .smart-link .section-title {width:38rem; min-height:20rem;}
    .smart-link .slider {max-width:calc(100% - 36rem);}
    .smart-link .slider .slick-slide {width:22.5rem;}
    .smart-link .slider .box {height:19.9rem;}
    .smart-link .slider .text {font-size: 2rem; line-height: 2.6rem;}
    .smart-link .slider a {display: block; height:20rem;}
}

@media screen and (max-width:1000px) {
    .smart-link {padding:3.7rem 0 5rem 0;}
    .smart-link > .area {flex-direction: column;}
    .smart-link .section-title {min-height:unset; position: relative; width:auto; flex:1;}
    .smart-link .slider {width:100%; max-width:unset; margin-top:2.5rem;}
    .smart-link .control {bottom:unset; left:unset; right:0; top:.5rem; }
    .smart-link .control .prevnext {margin-right: 0;}
}

@media screen and (max-width:550px) {
    .smart-link {background-size:150%; background-attachment: unset; background-position:left;}
}