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

.main ul.contact1{ display:block; font-size:16px; overflow:hidden; padding:24px 0 80px;}
.main ul.contact1 li{ display:block; overflow:hidden; background:#fff; position:relative; margin:48px 0 0;}
.main ul.contact1 li a.pic{ display:block; width:40%; overflow:hidden; position:relative; float:left;}
.main ul.contact1 li a.pic::after{ content:''; display:block; width:60%; height:100%; background:linear-gradient(to right, rgba(0,170,114,1), rgba(0,170,114,0)); position:absolute; left:0; top:0; z-index:2;}
.main ul.contact1 li a.pic img{ display:block; width:100%; height:320px; object-fit:cover; float:left;}
.main ul.contact1 li i{ display:block; width:68px; height:68px; background:url(../images/icons/team.png) center no-repeat; position:absolute; left:40%; top:50%; transform:translate(-50%,-50%); z-index:3;}
.main ul.contact1 li .info{ padding:0 54px; position:relative; overflow:hidden;}
.main ul.contact1 li a.close{ display:block; width:30px; height:30px; background:url(../images/icons/close.png) no-repeat; position:absolute; right:0; top:0; z-index:3; margin:16px; opacity:0.7; cursor:pointer;}
.main ul.contact1 li h4{ display:block; color:#333; font-size:1.5em; font-weight:normal; padding:1.5em 0 1em;}
.main ul.contact1 li .txt{ display:block; line-height:2; color:#666; font-weight:normal; overflow:hidden; overflow-y:auto; padding-right:1em; margin-right:-2em;}
.main ul.contact1 li .txt a{ display:inline-block; vertical-align:text-bottom; color:#00aa72; font-size:1.125em; margin:0.75em 0 0;}

.main ul.contact1 li:nth-child(even) a.pic{ float:right;}
.main ul.contact1 li:nth-child(even) a.pic::after{ transform:rotateY(180deg); left:auto; right:0;}
.main ul.contact1 li:nth-child(even) i{ left:auto; right:40%; transform:translate(50%,-50%) rotateY(180deg);}

.contact2{ position:relative;}
.contact2 .map{ position:relative; padding:31.77% 0 0; overflow:hidden; box-shadow:none;}
.contact2 .map::after{ content:''; display:block; width:100%; height:100%; background:url(../images/icons/map.png) center no-repeat; background-size:cover; position:absolute; left:0; top:0; z-index:2; opacity:0.4;}
.contact2 .map > img{ display:block; width:100%; height:100%; object-fit:cover; position:absolute; left:0; top:0; z-index:1;}
.contact2 p.dots{ display:block; font-size:16px;}
.contact2 p.dots span{ display:block; position:absolute; transform:translate(-50%,-100%); z-index:3;}
.contact2 p.dots span i{ display:block; width:1.75em; line-height:1.75; color:#fff; text-align:center; padding:0 0 1em; background:url(../images/icons/dot.png) center no-repeat; background-size:100% 100%; cursor:pointer; transition/:all ease 0.4s; transform-origin:bottom center !important;}
.contact2 p.dots span.on i{ background-image:url(../images/icons/dot_h.png);}
.contact2 p.dots span.c1{ left:41.6%; top:29.0%;}
.contact2 p.dots span.c2{ left:43.4%; top:44.4%;}
.contact2 p.dots span.c3{ left:38.8%; top:61.1%;}
.contact2 p.dots span.c4{ left:39.7%; top:61.8%;}
.contact2 .info{ font-size:16px; background:#fff; padding:1.5em 2em; position:absolute; left:60%; top:40%; z-index:3; transition:all ease 0.4s; opacity:0; transform:translateY(3em);}
.contact2 .info::before{ content:''; display:block; width:5px; height:100%; background:#00aa72; position:absolute; left:0; bottom:0; transition:all ease 0.4s; opacity:0; transform:scale(1,0); transform-origin:center bottom; transition-delay:0.2s;}
.contact2 .info h4{ display:block; line-height:1.5; color:#333; font-size:1.5em; font-weight:normal; overflow:hidden; background:url(../images/icons/list.png) left top calc(0.52em + 2px) no-repeat; background-size:auto 0.46em; padding-left:1.5em; margin:0 0 4px;}
.contact2 .info h4::before{ content:''; display:none; width:0.5em; height:0.5em; background:#00aa72; float:left; margin:0.6em 0.5em 0 0;}
.contact2 .info p{ display:block; line-height:1.5; color:#666; padding:5px 0 0;}
.contact2 .info.on{ opacity:1; transform:translateY(0); z-index:5;}
.contact2 .info.on::before{ transform:scale(1,1); opacity:1;}



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

.main ul.contact1{ font-size:15px;}
.main ul.contact1 li img.pic{ height:272px;}

.contact2 p.dots{ font-size:14px;}
.contact2 .info{ font-size:14px; top:34%;}
.contact2 .info h4{ font-size:1.25em; background-position: left top calc(0.52em + 1px);}


}

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

.main ul.contact1{ font-size:13px; padding:5px 0 40px;}
.main ul.contact1 li{ margin:15px 0 0;}
.main ul.contact1 li a.pic{ width:100%;}
.main ul.contact1 li a.pic img{ height:44vw;}
.main ul.contact1 li .info{ padding:0 15px 15px;}
.main ul.contact1 li i{ display:none;}
.main ul.contact1 li h4{ font-size:1.375em; padding:1.25em 0 0.75em;}
.main ul.contact1 li .txt{ padding:0; margin:0;}


}












/**/