/* section01 */
#section01{ padding: 100px 0;}
#section01 a{ width: calc(25% - 15px); padding: 60px 0; text-align: center; display: block; border: 1px solid #ccc; transition: .3s;}
#section01 .circle{ display: inline-block; width: 120px; height: 120px; border-radius: 50%; border: 1px solid rgba(18,61,109,.2); position: relative; margin-bottom: 40px; transition: .3s;}
#section01 .circle .circle-inner{ width: 100px; height: 100px; line-height: 100px; border-radius: 50%; background-color: #123d6d; text-align: center; position: absolute; transition: .3s; display: flex; justify-content: center; align-items: center; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}
#section01 .circle .normal{ display: block;}
#section01 .circle .hover{display: none;}
#section01 h3{ font-size: 24px; padding-bottom: 10px; transition: .3s;}
#section01 p{ opacity: .7; font-size: 14px; padding-bottom: 40px; transition: .3s;}
#section01 #btn_01{ border: 1px solid #ccc; color: #222; transition: .3s;}
#section01 a:hover{ background-color: #123d6d; border: 1px solid #123d6d; box-shadow: 2px 0 10px rgba(0,0,0,.2);}
#section01 a:hover .circle{ border: 1px solid rgba(255,255,255,.2); }
#section01 a:hover .circle .circle-inner{ background-color: #fff;}
#section01 a:hover .circle .normal{ display: none;}
#section01 a:hover .circle .hover{display: block;}
#section01 a:hover h3{ color: #fff;}
#section01 a:hover > p{ color: #fff;}
#section01 a:hover #btn_01{ color: #123d6d; border: 1px solid #fff;}
#section01 a:hover .btn-hover-3:after{ width: 100%;}
/* =================== 1660px =================== */
@media (max-width: 1660px) {
}

/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section01{ padding: 60px 0 50px;}
    #section01 a{ width: calc(50% - 5px); height: calc(232px + 29.33vw); padding: 30px 15px; border: 1px solid #123d6d; background-color: #123d6d; margin-bottom: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    #section01 .circle{width: 29.33vw; height: 29.33vw; min-width: 110px; min-height: 110px; border: 1px solid rgba(255,255,255,.2); margin-bottom: 30px; }
    #section01 .circle .circle-inner{ width: 24.00vw; height: 24.00vw; min-width: 90px; min-height: 90px; line-height: 90px; background-color: #fff;}
    #section01 .circle .normal{ display: none;}
    #section01 .circle .hover{display: block;}
    #section01 h3{ font-size: 16px; padding-bottom: 10px; color: #fff;}
    #section01 a > p{ font-size: 13px; padding-bottom: 30px; color: #fff;}
    #section01 #btn_01{ width: 100%; height: 40px; line-height: 40px; font-size: 12px; border: 1px solid #fff; background-color: #fff; color: #123d6d; transition: .3s;}
    #section01 #btn_01 p{ font-size: 12px; line-height: 39px!important; padding-bottom: 0;}
}