/*
+----------------------------------------------------------------------
| LN-EWS v2.0 [ Do a line, love a line ]
| Copyright (c) 2010~2024 http://jzline.com All rights reserved.
| Author: xwxc
+----------------------------------------------------------------------
*/
.product_bg{height:auto;width:100%;overflow:hidden;position:static;background-size:100% 100%;height:auto;background-size:cover;background-attachment:fixed}
.product{margin:120px 0px 120px 0px;color:#fff;position:relative;color:#333;height:auto}
.product .tit_box{height:auto}
.product .tit{margin:0px 0px 0px 0px;height:85px}
.product .tit h2{color:#0158a8;font-size:20px;font-weight:bold;font-family:arial;}
.product .tit h3{color:#222;font-size:40px;padding-top:10px;height:52px;text-transform: uppercase;}
.product .tit_desc{font-size:18px;padding-top:10px;line-height:1.8;color:#999;text-align:right}
.product .btn{color:#fff;font-size:16px;margin-top:40px;line-height:2em;background-color:#0158a8;float:right;height:50px;width:168px;line-height:50px;text-align:center;border-radius:28px}
.product .btn:hover{background-color:#ff5822}
.product .class_list{width:100%;height:85px;text-align:right;float:right}
.product .class_list ul{width:100%;margin-top:15px;height:50px;text-align:right}
.product .class_list ul li{line-height:50px;height:50px;margin:0 5px 0 0;border-radius:50px;background-color:#0158a8;display:inline-block}
.product .class_list ul li a{line-height:50px;height:50px;color:#fff;display:block;padding:0 36px}
.product .class_list ul li:hover{background-color:#ff5822}

.product .pic_item_box{height:auto;margin:30px 0 0 0}
.product .pic_item{border:1px solid #eee}
.product .pic_item .pic{width:100%;height:310px;overflow:hidden;background-color:#fff}
.product .pic_item .pic img{width:100%;height:auto;overflow:hidden;object-fit:cover;object-position:top;transition:all 0.5s ease}
.product .pic_item .name{background-color:#0158a8;height:50px;width:100%;line-height:50px;font-size:16px;text-align:center;color:#fff}
.product .pic_item .name i{position:absolute;right:20px}

/*.product .pic_item:hover .pic img{transform:scale(1.1);transition:all 1s ease}
.product .pic_item:hover .name{color:#fff}
.product .pic_item:hover .name i{position:absolute;right:30px;color:#fff}*/

.product .but_box{position:relative;width:420px;height:70px;margin:0 auto;cursor:pointer;margin-top:30px}
.product .but_box a{cursor:pointer}
.product .but_box p{display:block;position:absolute;top:8%;width:100%;left:0;z-index:3;font-size:20px;font-weight:bold;color:#FFFFFF;text-align:center}


.product .but_box::before{content:"";display:block;position:absolute;top:0;left:0;width:95%;height:71%;margin:0 auto;background:#155bb5;transform:skewX(-25deg);z-index:2;transition:all .5s ease}
.product .but_box:hover::before{background:#E60012}
.product .but_box::after{content:"";display:block;position:absolute;top:10px;left:7px;width:95%;height:71%;margin:0 auto;background:rgba(21,91,181,0.40);transform:skewX(-25deg)}



.product .pic_item{
	
	
position: relative; 
            border-radius: 8px;   
            align-items: center;
            color: white;
            font-size: 18px;
            font-weight: 500;
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            padding: 2px;
            text-align: center;


}
.product .pic_item:hover{transform:translateY(-5px);box-shadow:0 12px 40px rgba(0,0,0,0.2)}
.product .pic_item::before,.product .pic_item::after{content:'';position:absolute;background:linear-gradient(45deg,#ff8a00,#e52e71,#00b4db,#00c853);z-index:-1;transition:all 0.5s ease}
.product .pic_item::before{top:0;left:0;width:100%;height:3px;transform:scaleX(0);transform-origin:left;transition-delay:0.3s}
.product .pic_item::after{top:0;right:0;width:3px;height:100%;transform:scaleY(0);transform-origin:top;transition-delay:0.2s}
.product .pic_item .bottom-border{position:absolute;bottom:0;right:0;width:100%;height:3px;background:linear-gradient(45deg,#00c853,#00b4db,#e52e71,#ff8a00);transform:scaleX(0);transform-origin:right;transition:all 0.5s ease;transition-delay:0.1s;z-index:-1}
.product .pic_item .left-border{position:absolute;bottom:0;left:0;width:3px;height:100%;background:linear-gradient(45deg,#00b4db,#00c853,#ff8a00,#e52e71);transform:scaleY(0);transform-origin:bottom;transition:all 0.5s ease;transition-delay:0s;z-index:-1}
.product .pic_item:hover::before{transform:scaleX(1);transition-delay:0s}
.product .pic_item:hover::after{transform:scaleY(1);transition-delay:0.1s}
.product .pic_item:hover .bottom-border{transform:scaleX(1);transition-delay:0.2s}
.product .pic_item:hover .left-border{transform:scaleY(1);transition-delay:0.3s}
.product .pic_item:not(:hover)::before{transition-delay:0.3s}
.product .pic_item:not(:hover)::after{transition-delay:0.2s}
.product .pic_item:not(:hover) .bottom-border{transition-delay:0.1s}
.product .pic_item:not(:hover) .left-border{transition-delay:0s}










/* 小于768px  */
@media only screen and (max-width:768px){
    .product{
        margin: 50px 0px 50px 0px;
    }
    .product .pic_item .pic{
        height: auto;
    }
    .product .pic_item .pic img{
        height: auto;
    }
    .product .but_box{
        width: 320px;
    }
    .product .but_box p{
        dfont-size: 14px;
    }
    .product .class_list{
        height: auto;
    }
    .product .class_list ul{
        height: auto;
        text-align: left;
    }
    .product .class_list ul li{
        margin-bottom: 10px
    }
}
@media only screen and (max-width:1000px){
    .product .class_list{
        height: auto;
    }
    .product .class_list ul{
        height: auto;
        text-align: left;
    }
    .product .class_list ul li{
        margin-bottom: 10px
    }
}
@media only screen and (max-width:1300px){
    .product .tit img{
        width: 300px
    }
}