@charset 'utf-8';

#main .con { padding: 80px 10px; }
#main .con h3 { position: relative; font-size: 40px; font-weight: 700; line-height: 1; text-align: center;}
#main .con h3 span { display: inline-block; position: relative;}
#main .con h3 span:after { animation: jump 5s infinite both; content:''; display: block; position: absolute; top: 0; right: -20px; width: 12px; height: 15px; background: url('/data/main/ico_after.png') no-repeat;}
#main .con h3 + p { padding: 30px 0; font-size: 20px; text-align: center; color: #555; word-break: keep-all;}
#main .con a.more { display: block; margin:50px auto 0; width: 180px; height: 45px;  font-size: 18px; text-align: center; line-height: 45px; color: #fff;  border:1px solid #fff; border-radius:23px; transition: all .1s;  }
#main .con a.more:hover { background: #e10000; color:#fff; border-color: #e10000;}

@media(min-width:769px){
    #main .con a.more:hover { width: 220px;}
}

@media (max-width:1199px){
    #main .con { padding: 70px 10px; }
    #main .con h3 { font-size: 38px;}
    
}
@media (max-width:991px){
    #main .con { padding: 60px 0px; }
    #main .con h3 { font-size: 36px;}
}
@media (max-width:768px){
    #main .con { padding: 55px 0px; }
    #main .con h3 { font-size: 34px;}
    #main .con h3 + p { padding: 20px 0 30px; font-size: 18px; }
    #main .con a.more  {margin: 40px auto 0; width: 170px; height: 40px; line-height: 40px; font-size: 16px;  }
}
@media (max-width:576px){
    #main .con { padding: 50px 0px; }
    #main .con h3 { font-size: 32px;}
    #main .con h3 + p { padding: 15px 0 30px; font-size: 16px; }
}
@media (max-width:480px){
    #main .con { padding: 45px 0px; }
    #main .con h3 { font-size: 30px;}
    #main .con a.more  {margin: 30px auto 0; width: 150px; height: 37px; line-height: 37px; font-size: 14px; }
}



#main .con1 .wrap { display: flex; margin: 0 0 0 1px;}
#main .con1 .wrap .prod { display: flex; justify-content: center; align-items: center; flex:1;  position: relative; padding: 107px 10px 20px; margin: 0 0 0 -1px; border:1px solid #d7d7d7; text-align: center; transition: all .3s;}
#main .con1 .wrap .prod:after { content: ''; display: block; position: absolute; top: -1px; right: -1px; width: calc(100% + 2px); height: calc(100% + 2px); border: solid 5px blue; opacity:0; transition: all .3s;}
#main .con1 .wrap .prod:hover { flex: 1.2;}
#main .con1 .wrap .prod:hover:after { opacity:1;}
#main .con1 .wrap .prod .txt { position: absolute; top: 22px; width: 100%; font-size: 24px; font-weight: 500;  color: #000; line-height: 1;}
#main .con1 .wrap .prod .txt span { display: block; padding: 12px 0 0; font-size: 17px; color: #555; font-weight: 400;}

@media (max-width:991px){
    #main .con1 .wrap .prod .img img { width: 100%;}
    #main .con1 .wrap .prod { padding: 130px 10px 20px;}
    #main .con1 .wrap .prod .txt { top: 37px;}
}
@media(max-width:576px){
    #main .con1 .wrap .prod { padding: 110px 10px 20px;}
    #main .con1 .wrap .prod .txt { top: 32px; font-size: 21px;}
    #main .con1 .wrap .prod .txt span { font-size: 15px;}
}
@media (max-width:480px){
    
    #main .con1 .wrap { flex-direction: column; margin: 0 0 1px;}
    #main .con1 .wrap .prod { flex-direction: column; padding: 40px 10px; margin: 0 0 -1px;}
    #main .con1 .wrap .prod .txt { position: static; padding: 30px 0 0;}
}


#main .con2 { background: url('/data/main/con2_bg.jpg') no-repeat center / cover;}
#main .con2 h3,
#main .con2 h3+p { color: #fff;}
#main .con3 a.more { border: 1px solid #d7d7d7; color: #333;}


#main .con4 { overflow: hidden; background: #f9f9f9; }
#main .con4 .at-container { overflow: visible;;}
#main .con4 .wrap { display: flex; justify-content: space-between; margin: 0 -10px;}
#main .con4 .wrap li { position: relative; flex:1; margin: 0 10px; box-shadow: 4px 4px 7px rgba(0,0,0,.2); background-repeat: no-repeat; background-position: center; background-size: cover; transition: all .3s;}
#main .con4 .wrap li:nth-of-type(1) { background-image: url('/data/main/con4_bg1.jpg');}
#main .con4 .wrap li:nth-of-type(2) { background-image: url('/data/main/con4_bg2.jpg');}
#main .con4 .wrap li:nth-of-type(3) { background-image: url('/data/main/con4_bg3.jpg');}
#main .con4 .wrap li a { display: block; padding: 30px; color:#fff;  }
#main .con4 .wrap li a h4 { padding: 0 0 20px; font-size: 25px; font-weight: 500; line-height: 1; color: }
#main .con4 .wrap li a h4:before { content: ''; display: block; margin: 0 0 25px; width: 30px; height: 2px; background: #fff;}
#main .con4 .wrap li a p { word-break: keep-all;}
#main .con4 .wrap li a span { display: block; margin: 30px 0 20px; width: 120px; height: 40px; line-height: 36px; text-align: center; border-radius:20px; border:1px solid #fff; opacity:0; transition: all  .5s;}
#main .con4 .wrap li:hover { flex:1.4; }
#main .con4 .wrap li a:hover span { opacity: 1; }
#main .con4 .wrap li a span:hover { background: rgba(255,255,255,.1);}

@media (max-width:991px){
    #main .con4 .wrap { margin: 0 -5px;}
    #main .con4 .wrap li { margin: 0 5px;} 
    #main .con4 .wrap li a { padding: 30px 15px;}
    #main .con4 .wrap li a span { opacity: 1;}
}
@media (max-width:768px){
    #main .con4 .wrap { flex-direction: column; margin: -10px 0;}
    #main .con4 .wrap li { margin: 10px 0px;}     
    #main .con4 .wrap li a { padding: 30px; } 
    #main .con4 .wrap li a p br { display: none;}
    #main .con4 .wrap li a span { margin: 30px 0 20px auto;}
}