@charset "utf-8";
/* CSS Document */

.main .attr{ width:1600px;}

.contact{ padding:60px 0 80px;}
.contact ul.tab{ display:block; font-size:18px; overflow:hidden; margin:0 -0.9em;}
.contact ul.tab li{ display:block; width:25%; float:left;}
.contact ul.tab li::after{ content:''; display:block; width:0; height:0; border:1px solid #f6f6f6; border-width:16px 20px 0; border-color:#fff transparent; margin:0 auto; transition:all ease 0.4s;}
.contact ul.tab li a{ display:block; background:#f6f6f6; text-align:center; overflow:hidden; padding:14% 10% 16%; margin:0 0.9em; cursor:pointer; user-select:none; transition:all ease 0.4s;}
.contact ul.tab li i{ display:inline-block; vertical-align:top; overflow:hidden; position:relative;}
.contact ul.tab li i img{ display:block; height:6.12em; transition:all ease 0.4s;}
.contact ul.tab li i img:last-child{ position:absolute; left:100%; top:0; filter:brightness(0) invert(1);}
.contact ul.tab li b{ display:block; line-height:4; color:#e71f19; font-size:1.23em; transition:all ease 0.4s;}
.contact ul.tab li p{ display:block; line-height:1.78; color:#333; transition:all ease 0.4s;}
.contact ul.tab li.cur::after{ border-color:#e71f19 transparent;}
.contact ul.tab li.cur a{ background:#e71f19;}
.contact ul.tab li.cur i img{ transform:translateX(-100%);}
.contact ul.tab li.cur b{ color:#fff;}
.contact ul.tab li.cur p{ color:#fff;}
.contact .mapBox{ padding:40px 0 0;}
.contact .map{ display:none;}
.contact .map img{ display:none;}
.contact .map img.pc{ display:block;}
.contact .map img.spc{ display:none;}



@media only screen and (max-width:1600px){

.contact ul.tab{ font-size:15px;}
.contact ul.tab li a{ padding:14% 8% 16%;}
.contact ul.tab li i img{ height:5em;}

.main .attr{ width:1200px;}
.contact .map img.pc{ display:none;}
.contact .map img.spc{ display:block;}







}




/**/