GBRSWN/CZKJ.GBRS2.Web/wwwroot/assets/scss/services.scss

@import 'global.scss';
.banner{
    img{
        width:100%;
    }
}
.service{
    margin-top:40px;
    margin-bottom:60px;
    @media(min-width:768px){
        margin-top:50px;
        margin-bottom: 90px;
    }
    @media(min-width:1200px){
        margin-top:80px;
        margin-bottom: 120px;
    }
}
.headline{
    text-align: center;
    color: #111;
    font-size: 24px;
    @media(min-width:768px){
        font-size: 32px;
    }
    @media(min-width:1200px){
        font-size: 44px;
    }
}
.icon{
        text-align: center;
        margin: 30px auto;
        @media(min-width:768px){
            margin: 50px auto;
        }
        @media(min-width:1200px){
            margin: 90px auto 70px;
        }
        ul{
            clear: fix;
            li{
                float: left;
                width:33.33%;
                margin-top: 20px;
                @media(min-width:768px){
                    margin-top: 0;
                    width:20%;
                }
            }
        }
        a{
            display:inline-block;
            cursor: pointer;
            padding: 0 10px;
            &:hover,&:active{
                
                img{
                    transform: translateY(-10px);
                }
                p{
                    color: $color;
                    transform: translateY(-15px);
                }
            }
        }
        img{
            width:46px;
            height:46px;
            object-fit: contain;
            transition: all .5s ease;
            @media(min-width:768px){
                width:64px;
                height:64px;
            }
        }
        p{
            font-size: 14px;
            color:#666;
            margin-top:10px;
            transition: all .5s ease .1s;
            @media(min-width:768px){
                margin-top:15px;
                font-size: 16px;
            }
        }
}
.list{
    .row>div{
        margin-top: 20px;
        @media(min-width:768px){
            margin-top: 20px;
        }
        @media(min-width:1200px){
            margin-top: 50px;
        }
    }
    h2.title{
        padding: 15px 0;
        border-bottom: 1px solid #ddd; 
        color: #111;
        font-size: 20px;
        margin-bottom:20px;
        @media(min-width:768px){
            font-size: 24px;
            margin-bottom:20px;
        } 
        @media(min-width:1200px){
            font-size: 30px;
            margin-bottom:40px;
        }
    }
    .con{
        position: relative;
        background: #f5f5f5;
         height: 180px;
         padding:20px 15px;
         transition: all .5s ease;
         @media(min-width:768px){
            padding:30px 20px;
             height: 218px;
         }
         &:hover{
             background: #fff;
             box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.2);
             .see{
                 opacity: 1;
             }
         }
         h4{
            color: #111;
            margin-bottom: 10px;
            font-size: 16px; 
            @media(min-width:768px){
                font-size: 20px; 
            }  
         }
         p{
             color: #666;
             line-height: 2;
             font-size: 14px;
             @media(min-width:768px){
                font-size: 16px; 
            }
             a{
                 display: block;
                 @include ellipsis(auto);
                 color: #666;
                 &:hover{
                    color: $color;   
                 }
             }
         }
         .see{
             position: absolute;
             right: 30px;
             bottom: 30px;
             opacity: 0;
             color: $color;
             transition: all .5s ease;
             &:hover{
                 text-decoration: underline;
             }
         }
         .btn-i{
             a{
                 position: relative;
                 overflow: hidden;
                 z-index: 1;
                 margin-top:30px;
                 display: block;
                 width: 160px;
                 height: 42px;
                 line-height: 42px;
                 background: $color;
                 color: #fff;
                 text-align: center;
                 font-size: 16px;
                 &:after {
                    content: '';
                    position: absolute;
                    z-index: -1;
                    transition: width 0.3s, opacity 0.3s;
                    width: 0;
                    height: 530px;
                    top: 50%;
                    left: 50%;
                    opacity: 0;
                    background: #f13737;
                    transform: translate3d(-50%, -50%, 0) rotate(45deg);
                    backface-visibility: hidden;
                }
                &:hover,&:active {
                    &:after {
                        width: 100%;
                        opacity: 1;
                    }
                }
                 
             }
         }
    }

}