@charset "utf-8";

main {}
main article { padding: 100px 0;  }
main article .title  { padding: 0 0 70px;  text-align: center; }
main article .title h2 {  font-size: 48px; font-weight: 500; color: #111; line-height: 1; }
main article .title p  { padding: 20px 0 0; }

@media (max-width:991px){
    main article { padding: 80px 0;  }
    main article .title { padding: 0 0 60px;}
    main article .title h2 {  font-size: 44px; }
    
}
@media (max-width:769px){
    main article { padding: 70px 0;  }
    main article .title { padding: 0 0 50px;}
    main article .title h2 {  font-size: 40px; }
    main article .title p { padding: 15px 0 0; }
}
@media (max-width:576px){
    main article { padding: 60px 0;  }
    main article .title { padding: 0 0 40px;}
    main article .title h2 {   font-size: 36px; }
}
@media (max-width:480px){    
    main article .title h2 {  font-size: 32px; }
}


main .business {}
main .business .wrap { }
main .business .wrap a { display: block; padding: 50px 10px; width: 23.23%; border: 1px solid #e1e1e1; transition: .3s; }
main .business .wrap a h3 { padding: 150px 0 0; line-height: 1; font-size: 20px; font-weight: 500; color: #111; text-align: center; background-repeat: no-repeat; background-position: top center; transition: .3s;}
main .business .wrap a:hover { border-color: #0a3281;  }

main .business .wrap a:nth-of-type(1) h3 { background-image: url('/img/hans/ico_bus1.png');}
main .business .wrap a:nth-of-type(2) h3 { background-image: url('/img/hans/ico_bus2.png');}
main .business .wrap a:nth-of-type(3) h3 { background-image: url('/img/hans/ico_bus3.png');}
main .business .wrap a:nth-of-type(4) h3 { background-image: url('/img/hans/ico_bus4.png');}
main .business .wrap a:hover:nth-of-type(1) h3 { background-image: url('/img/hans/ico_bus1_h.png');}
main .business .wrap a:hover:nth-of-type(2) h3 { background-image: url('/img/hans/ico_bus2_h.png');}
main .business .wrap a:hover:nth-of-type(3) h3 { background-image: url('/img/hans/ico_bus3_h.png');}
main .business .wrap a:hover:nth-of-type(4) h3 { background-image: url('/img/hans/ico_bus4_h.png');}




main .bg { height: 350px; background: url('/img/hans/bg_box1.jpg') no-repeat center /  cover; background-attachment: fixed; }
main .notice { background: url('/img/hans/bg_notice.jpg') no-repeat center /  cover; background-attachment: fixed; }
main .notice .title h2 { color: #fff;}
main .notice .title p { color: #fff;}
main .notice a.go-notice { display: block; margin: 50px auto 0; width: 250px; height: 60px; line-height: 60px; text-align: center; color: #fff; border: 1px solid #fff;  transition: all .2s;  }
main .notice a.go-notice:hover { background: rgba(0,0,0,.3);}

main .contact_us {}
main .contact_us .wrap { position: relative;}
main .contact_us .wrap .info { position: absolute; z-index: 10; top: 50%; left: 50px; transform: translateY(-50%); padding: 50px 30px 40px;  background: rgba(0,60,117,.9); }
main .contact_us .wrap .info p { color: #fff; line-height: 1.66;}
main .contact_us .wrap .info p.name {  font-size: 35px;  font-weight: 500; line-height: 1; }
main .contact_us .wrap .info p.add { padding: 80px 0 15px;}
main .contact_us .wrap .info p.tel {}


@media (max-width:1199px){
    
}
@media (max-width:991px){
    main .business .wrap a { padding: 45px 10px; width: 24%;}
    main .business .wrap a h3 { font-size: 18px; line-height: inherit;}
    main .bg { height: 300px;}

    main .contact_us .wrap .info  { position: static; transform: translateY(0);}
    main .contact_us .wrap .info p.name { font-size: 30px;}
    main .contact_us .wrap .info p.add { padding: 20px 0 10px;}
    

}
@media (max-width:768px){
    main .business .wrap { margin: 0 0 -20px; flex-wrap:wrap;}
    main .business .wrap a { padding: 40px 10px; margin: 0 0 20px; width: 49%;}
    main .business .wrap a h3 { padding: 130px 0 0; background-size: 100px auto;}
    main .bg { height: 230px;}
    main .notice a.go-notice { width: 220px;  height: 50px;  line-height: 50px;}
    main .contact_us .wrap .info { padding: 40px 30px;}  
}
@media (max-width:576px){
    main .business .wrap a {padding: 30px 5px;  margin: 0 0 10px;}
    main .business .wrap a h3 { padding: 120px 0 0; font-size: 16px; line-height: 1.2; background-size: 90px auto;}

    main .bg { height: 150px; }
    main .notice a.go-notice { width: 180px;  height: 40px;  line-height: 40px;}
    main .contact_us .wrap .info  { padding: 35px 20px;}
    main .contact_us .wrap .info p.name { font-size: 24px; }
    main .contact_us .wrap .info p.add { padding: 15px 0 10px; } 
}
@media (max-width:480px){
    
}
@media (min-width:769px){
    main .business .wrap a:hover h3 {  padding: 140px 0 0; color: #0a3281;}
}