@charset "utf-8";


main article { padding: 100px 0; }
main article .at-container { padding: 0; }
main article .title-area { padding: 0 0 50px; text-align: center;}
main article .title-area h2 {  font-size: 40px; font-weight: 700; line-height: 1; color: #000;}
main article .title-area h2 + p { padding: 10px 0 0; color: #000; font-weight: 400; line-height: 1.3; word-break: keep-all;}

@media (max-width:1199px){
    main article .at-container { padding: 0 10px; }
}


@media (max-width:991px){
    main article { padding: 80px 0; }
    main article .title-area h2  { font-size: 38px; }
}
@media (max-width:768px){
    main article { padding: 70px 0; }
    main article .title-area h2  { font-size: 34px; }
}
@media (max-width:576px){
    main article { padding: 60px 0; }
    main article .title-area h2  { font-size: 30px; }
}

main .business {}
main .business .flex {}
main .business .flex a { display: block; position: relative; width: 31.62393%; border: 1px solid #e1e1e1; border-bottom-width: 5px; }
main .business .flex a .img { position: relative; background: #f2f2f2; text-align: center;}
main .business .flex a .img img{ width: 100%}
main .business .flex a .txt { padding: 70px 10px 40px; text-align: center;}
main .business .flex a .txt h3 { padding: 0 0 20px; font-size: 22px; font-weight: 500; color: #000;  line-height: 1;}
main .business .flex a .txt p { font-size: 15px;  color: #666; line-height: 1.5; word-break: keep-all;}
main .business .flex a .txt p span { display: block;}
main .business .flex a:after { content:''; display: block; position: absolute; left: 0; bottom: -5px; width: 100%; height: 0px; background: #1869c3; transition: all .1s;}
main .business .flex a:hover:after { height: 5px;}
main .business .flex a .img:before { content:''; display: block; position: absolute; bottom:0; left: 50%; width: 50px; height: 50px; background: url(/data/main/ico_more.png) no-repeat center/ contain; transform:translate(-50%,50%) }

@media (max-width:1199px){
    main .business .flex a .txt p span { display: inline;}
}
@media (max-width:991px){
    main .business .flex a { width: 32.5%;}
    main .business .flex a .txt { padding: 60px 10px 40px; }
}
@media (max-width:600px){
    main .business .flex { flex-direction: column;}
    main .business .flex a { margin: 0 0 20px; width: 100%;}
    main .business .flex a:last-of-type { margin: 0;}
    /* main .business .flex a .img { padding: 15px 0 30px;} */
    main .business .flex a .txt { padding: 50px 10px 30px}
    main .business .flex a .txt h3 { padding: 0 0 15px;}

}



main .location { background: url('/data/main/main_location_bg.jpg') no-repeat center / cover;}
main .location .title-area h2 { color: #fff;}
main .location .title-area h2:after { content:''; display: block; margin: 20px auto 0; width: 35px; height: 2px; background: #fff;}
main .location .flex > .map { width: calc(100% - 420px);}
main .location .flex > .map p { height: 50px; background: #015294; text-align: center; font-size: 16px; line-height:50px; color: #fff; }
main .location .flex .info { flex-direction: column; width: 390px; }
main .location .flex .info .customer { padding: 30px 20px; background: #fff url('/data/main/bg_customer.png') no-repeat right bottom ; border: 1px solid #dcdcdc;}
main .location .flex .info .customer h4 {  font-size: 23px; font-weight: 400; color: #282828;   }
main .location .flex .info .customer h4:after { content:''; display: block; margin: 15px 0; width: 20px; height: 1px; background: #282828;}
main .location .flex .info .customer dl { display: flex; padding: 0 0 10px;}
main .location .flex .info .customer dl dt { width: 40px; height: 25px; font-size: 15px; color: #fff; line-height: 25px; font-weight: 400; text-align: center; border-radius: 5px; background: #20a4d3;}
main .location .flex .info .customer dl dd { padding: 0 0 0 10px; height: 25px; font-size: 24px; line-height: 25px; font-weight: 700; color: #555;}
main .location .flex .info .customer dl:nth-of-type(2) dt { background: #015294;}
main .location .flex .info .customer p { padding: 10px 0 0; font-size: 16px; }
/* main .location .flex .info .link { height: 35%;} */
main .location .flex .info .link a { display: block; padding: 24px 10px ; width: calc(50% - 5px); background: #fff; border: 1px solid #dcdcdc; text-align: center;}
main .location .flex .info .link a span {  padding: 15px 0 0;  font-size: 16px; color: #555; line-height: 1; font-weight: 400;}

@media (max-width:991px){
    main .location .flex > .map { width: 56%;}
    main .location .flex .info  { width: 42%}
    main .location .flex .info .customer dl dd  { font-size: 22px;}
}



@media (max-width:768px){
    main .location .at-container > .flex { flex-direction: column;}
    main .location .flex > .map { margin: 0 0 20px; width: 100%;}
    main .location .flex .info  { width: 100%}
    main .location .flex .info .customer { margin: 0 0 20px;}
    main .location .flex .info .customer dl dd  { font-size: 22px;}
}


@media (max-width:400px){
    main .location .flex .map p { font-size: 15px;  ;}
    main .location .flex .info .customer {padding: 30px 10px; margin: 0 0 20px;}
    main .location .flex .info .customer dl dd  { font-size: 20px;}
}