/* ===============================================================
    * services
=============================================================== */
.services {position: relative; background: url(/img/bg/bg-services.jpg) no-repeat center / cover; padding: 150px 0 120px; z-index: 1;}
.services:after {content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(27,45,63,.9); z-index: -1;}
.services .deco {position: absolute; top: 180px; left: 30px; transform: rotate(-90deg);}
.sv-list {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
.sv-list li {position: relative; width: calc((100% - 90px) / 4); height: 200px; margin-right: 30px; margin-bottom: 30px; border: 1px solid #fff; padding: 25px; transition: .3s;}
.sv-list li:nth-of-type(4n) {margin-right: 0;}
.sv-list h2 {font-size: 22px; color: #fff; margin-bottom: 20px; text-transform: capitalize;}
.sv-list h3 {font-size: 14px; letter-spacing: 0.025em; color: #ccc;}
.sv-list span {position: absolute; right: 25px; bottom: 25px; font-size: 30px; color: #fff;}
.sv-list li:hover, .sv-list li.active {background: #fff;}
.sv-list li:hover h2, .sv-list li.active h2 {color: #3d4e60;}
.sv-list li:hover h3, .sv-list li.active h3 {color: #87929e;}
.sv-list li:hover span, .sv-list li.active span {color: #a2ca02;}
@media (max-width: 1400px){
    .services .deco {display: none;}
}
@media (max-width: 850px){
    .services {padding: 60px 15px 45px;}
    .sv-list {display: block;}
    .sv-list li {width: 100%; height: 166px; margin-right: 0; margin-bottom: 15px; padding: 30px;}
    .sv-list h2 {font-size: 20px; margin-bottom: 15px;}
    .sv-list h3 {font-size: 14px;}
    .sv-list span {right: 30px; bottom: 30px; font-size: 30px;}
}
/* ===============================================================
    * service
=============================================================== */
.sv {position: relative;}
.sv:after {content: ''; position: absolute; left: 0; bottom: 0; width: calc(100% / 3 * 2); height: 652px; background: url(/img/bg/bg-sv.png) no-repeat center / cover;}
.sv .width-bd {padding: 150px 0;}
.sv-img {float: left; width: calc(100% / 3 * 2); height: 444px;}
.sv-box {position: relative; float: right; width: calc(100% / 3 * 2); margin-top: -20px; padding: 60px; z-index: 1; background: #fff;}
.sv-box h2 {font-size: 40px;}
.sv-box h3 {font-size: 18px; margin: 20px 0 50px;}
.sv-txt {font-size: 13px; line-height: 24px; letter-spacing: 0.015em;}
.sv-tag {width: 236px; height: 46px; line-height: 46px; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; margin: 50px 0 0 auto;}
@media (max-width: 850px){
    .sv:after {width: 100%; height: 212px;}
    .sv .width-bd {padding: 60px 0;}
    .sv-img {float: none; width: 100%; height: 212px;}
    .sv-box {float: none; width: calc(100% - 30px); margin: -15px auto 0; padding: 40px 15px;}
    .sv-box h2 {font-size: 30px;}
    .sv-box h3 {font-size: 14px; margin: 15px 0 30px;}
    .sv-txt {font-size: 12px; line-height: 20px;}
    .sv-tag {width: 140px; height: 30px; line-height: 30px; font-size: 12px; margin: 30px 0 0 auto;}
}