.i04 img {width: 100%;object-fit: cover;transition: 0.3s;display: block;}

/* common */
.icenter {width: 1460px;position: relative;margin: auto;}

/* i04 */
.i04 {padding: 10rem 0;position: relative;overflow: hidden;background-color: #f5f5f5;}
.i04 .i_top {display: flex;justify-content: center;align-items: center;flex-direction: column;}
.i04 dl {display: flex;justify-content: space-between;height: 64rem;}
.i04 dl dd {transition: 0.3s; position: relative; width: 33.2%; height: 100%;}
.i04 dl dd:hover {width: 85%;}
.i04 dl dd:nth-of-type(2){margin: 0 3px;}
.i04 dl dd:nth-of-type(4){margin: 0 3px;}
.i04 dl dd  .bg ,.i04 dl dd  .bg img{height: 100%;}    
.i04 dl dd::before {    position: absolute; content: ""; left: 0px; top: 0px; background-color: rgba(0,0,0,0.20); width: 100%; height: 100%;}
.i04 dl dd:hover::before {background-color: rgba(0,0,0,0.6)}
.i04 dl dd .content { transition: 0s; opacity: 0; position: absolute;width: 80%;left: 50%;top: calc(50% + 30px);transform: translate(-50%,-50%); z-index: 1;}
.i04 dl dd .tp {transition: 0.3s; z-index: 1;position: absolute;width: 90%;left: 50%;transform: translateX(-50%);bottom: 104px;display: flex;justify-content: center;align-items: center;flex-direction: column;}
.i04 dl dd .tp span {font-size: 20px;font-family: arial;color: #fff;}
.i04 dl dd .tp .line {background-color: rgba(255,255,255,0.3);width: 1px;height: 12.6rem;margin-top: 1.5rem;}
.i04 dl dd .tp img {width: 5.7rem;margin: 4.2rem 0 2.4rem;}
.i04 dl dd .tp h4 {text-align: center;font-size: 22px;font-weight: bold;color: #fff;}
.i04 dl dd:hover .tp{opacity: 0;bottom:8rem;}
.i04 dl dd:hover .content {transition-delay: 0.15s; transition: 0.3s; opacity: 1;top: calc(50% + 0px);}
.i04 dl dd .content  img {width: 5.7rem;}
.i04 dl dd .content  h3 {font-weight: bold; position: relative; font-size: 40px;color: #fff;margin: 3.6rem 0 1.6rem;padding-bottom: 2.1rem;border-bottom: 1px solid rgba(255,255,255,0.2);}
.i04 dl dd .content  h3::after {position: absolute;content: ""; width: 5rem;height: 0.6rem;background-color: var(--dex);bottom: -0.3rem;left: 0px;}
.i04 dl dd .content p {      width: 62rem; font-size: 16px;line-height: 26px;color: #fff;margin-bottom: 14rem;}

.i_top {margin-bottom: 4.2rem;}
.i_top  h3 {font-size: 50px;font-weight: bold;color: #333333;line-height: 64px;}






@media screen and (max-width:1600px) {
    html {font-size: 7px;}
    .i_top h3 { font-size: 38px; line-height: 48px; }
  

    /* i04 */
    .i04 dl dd .tp span { font-size: 16px; }
    .i04 dl dd .content h3 { font-size: 28px;}
    .i04 dl dd .content p { font-size: 14px; line-height: 24px; margin-bottom: 10rem; }
    .i04 dl dd .tp h4 { font-size: 17px; }
    
    /* common */
    .icenter {width: 1100px;}

  

}