/* section01 */
#section01{ padding: 87px 0; background-position: center; background-size: cover; background-repeat: no-repeat;}
#section01 #tit-wrap{ padding-bottom: 50px;}
#section01 .con-wrap{ display: flex; justify-content: center;}
#section01 .con-wrap .circle{ display: table; width: 210px; height: 210px; border-radius: 50%; background-color: #fff; border: 2px solid #7718bd; text-align: center; margin: 0 40px;}
#section01 .con-wrap .circle i{ font-size: 50px; color: #a1a0a0; padding-bottom: 30px; transition: .3s;}
#section01 .con-wrap .circle h3{ font-size: 16px; color: #a1a0a0; line-height: 16px; padding-bottom: 10px; transition: .3s;}
#section01 .con-wrap .circle h4{ font-size: 14px; color: #a1a0a0; line-height: 14px; transition: .3s; }
#section01 .con-wrap .circle:hover i{ color: #e93463;}
#section01 .con-wrap .circle:hover h3, #section01 .con-wrap .circle:hover h4{ color: #505050;}
#section01 .con-wrap .circle.active i{ color: #e93463;}
#section01 .con-wrap .circle.active h3, #section01 .con-wrap .circle.active h4{ color: #505050;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section01{ padding: 40px 0; background-image: url(../img/main/mo-sec03-bg.jpg); background-position: center; background-size: cover; background-repeat: no-repeat;}
  #section01 #tit-wrap{ padding-bottom: 20px;}
  #section01 .con-wrap{ flex-wrap: wrap;}
  #section01 .con-wrap .circle{ display: table; width: 110px; height: 110px; border-radius: 50%; background-color: #fff; border: 1px solid #7718bd; text-align: center; margin: 10px;}
  #section01 .con-wrap .circle i{ font-size: 28px; color: #a1a0a0; padding-bottom: 15px; transition: .3s;}
  #section01 .con-wrap .circle h3{ font-size: 12px; color: #a1a0a0; line-height: 12px; padding-bottom: 4px; transition: .3s;}
  #section01 .con-wrap .circle h4{ font-size: 10px; color: #a1a0a0; line-height: 10px; transition: .3s; }
}


/* section02 */
#section02{ padding: 80px 0 140px;}
#section02 .wrap1600{ overflow: visible; display: none;}
#section02 .wrap1600.active{ display: block;}
#section02 .img-wrap{ position: relative; width: 100%; height: 840px; margin-bottom: 80px; box-shadow: 8px 0 10px rgba(0,0,0,.2); border-radius: 10px; overflow: hidden;}
#section02 .text-wrap{ padding: 0 100px 70px; background-color: #f3f3f3; width: 100%; text-align: center; border-radius: 10px;}
#section02 .text-wrap h3{ line-height: 80px; font-size: 18px; border-bottom: 1px solid #e93463; }
#section02 .text-wrap .con{ font-size: 16px; line-height: 26px; padding-top: 25px;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section02{ padding: 20px 0 40px;}
    #section02 .img-wrap{ height:56.00vw; margin-bottom: 15px; box-shadow: 4px 0 5px rgba(0,0,0,.2); border-radius: 1.33vw;}
    #section02 .text-wrap{ padding: 0 12px 30px; border-radius: 1.33vw;}
    #section02 .text-wrap h3{ line-height: 29px; font-size: 11px; }
    #section02 .text-wrap .con{ font-size: 10px; line-height: 16px; padding-top: 30px;}
}