@charset "UTF-8";

/* Smart Link */
.smart-link {position: relative; background:#000 url('../images/link-bg.png') no-repeat center / cover; background-attachment: fixed; padding:100px 0;}
.smart-link .link {min-height:230px;}
.smart-link > .inner {display: flex; align-items: stretch; justify-content: space-between;}
.smart-link .section-title h1,
.smart-link .section-title p {color:#fff;}
.smart-link .section-title h1 span::after {background:#fff;}

.smart-link .list {max-width:calc(100% - 380px); margin:0 -18px; width:100%; color:#fff;}
.smart-link .list li {text-align: center; padding:0 18px;}
.smart-link .box {display: flex; align-items: center; justify-content: center; flex-direction: column; padding:30px; color:#fff; border:1px solid #fff; border-radius:20px; height:230px;}
.smart-link .img-box {text-align: center;}
.smart-link .text {font-size: 24px; line-height: 26px; font-family: 'SUITE SemiBold'; margin-top: 25px;}

.smart-link li a:hover .box {background:#fff;}
.smart-link li a:hover img,
.smart-link li 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: 50px;}
.smart-link .control .prevnext::before {content:''; background:#fff; width:5px; height: 5px; position: absolute; left:50%; margin-left:-2px; top:50%; margin-top:-2px; border-radius:50%; opacity:0.4;}
.smart-link .control button {width:17px; height:24px; text-indent: -9999px; opacity:0.4;}
.smart-link .control button:hover {opacity:1;}
.smart-link .control .prev {background:url('../images/prev.png') no-repeat center; margin-right: 24px;}
.smart-link .control .next {background:url('../images/next.png') no-repeat center; margin-left: 24px;}
.smart-link .nodata {font-family: 'HG Regular';}
@media screen and (max-width:1800px) {
    .smart-link > .inner {margin:0 20px;}
    .smart-link .section-title {margin:0;}
}
@media screen and (max-width:1200px) {
    .smart-link {padding:80px 0;}
    .section-title.link {width:380px;}
    .smart-link .link {min-height:200px;}
    .smart-link a {display: block; height:200px;}
    .smart-link .box {height:199px;}
    .smart-link .list {max-width:calc(100% - 360px);}
    .smart-link .list .slick-slide {width:225px;}
    .smart-link .list li {padding:0 12px}
    .smart-link .text {font-size: 20px; line-height: 26px;}
    
}
@media screen and (max-width:768px) {
    .smart-link {padding:37px 0 50px 0;}
    .smart-link .link {min-height:unset; position: relative; width:auto; flex:1;}
    .smart-link > .inner {flex-direction: column;}
    .smart-link .list {width:100%; max-width:unset; margin:0 -10px; margin-top:25px;}
    .smart-link .list li {padding:0 10px;}
    .smart-link .control {bottom:unset; left:unset; right:0; top:5px; }
    .smart-link .control .prevnext {margin-right: 0;}
}
@media screen and (max-width:550px) {
    .smart-link {background-size:150%; background-attachment: unset; background-position:left;}
    .smart-link .list {width:unset;}
    .smart-link .list .slick-slide {width:auto;}
}