﻿div.linkmap {
 position: absolute;
 top: 0;
 left: 50%;
 margin-left: -600px !important;
 color: #fff;
}

.wrap_main {
 position: relative;
}

.wrap_main .linkmap a {
 color: #fff;
}

.main {
 height: 790px;
 background: url(/Content/Areas/Doctors/images/bigBG.jpg)
}

.Left {
 width: 100%;
 margin-top: 40px;
}

.Right {
 width: 600px;
}

.Left ul,
.Right ul {
 position: relative;
 height: 100%;
 display: flex;
 flex-wrap: wrap;
 /* justify-content: space-between; */
 /* align-items: center; */
}

.Left ul li a,
.Right ul li a {
 display: block;
 width: 100%;
 height: 220px;
 font-size: 20px;
 color: #fff;
 overflow: hidden;
 text-align: center;
 /* position: absolute; */
 -webkit-transition: all 4s cubic-bezier(.08, .82, .17, 1);
 transition: all 4s cubic-bezier(.08, .82, .17, 1);
 -webkit-transform: translateY(100px);
 transform: translateY(100px);
 opacity: 0;
 visibility: hidden;
}

.Left ul li a:hover img,
.Right ul li a:hover img {
 transform: scale(1.1);
}

.Left ul li a img,
.Right ul li a img {
 display: block;
 margin: 50px auto 40px;
 transition: all 0.3s;
}

.Left ul li:nth-child(1) a {
 background: url(/Content/Areas/Common/images/common/bg_yuyue.png);
 top: 60px;
 left: 1px;
 background-size: cover;
}

.Left ul li:nth-child(2) a {
 background: url(/Content/Areas/Common/images/common/bg_chuzhen.png);
 top: 62px;
 left: 300px;
    background-size: cover;
}

.Left ul li:nth-child(3) a {
 background: url(/Content/Areas/Common/images/common/bg_baogao.png);
 top: 500px;
 left: 0;
    background-size: cover;
}

.Left ul li:nth-child(4) a {
 background: url(/Content/Areas/Common/images/common/bg_tijian.png);
 right: 0px;
 top: 280px;
    background-size: cover;
}

.Left ul li:nth-child(9) a {
  background: url(/Sites/Uploaded/UserUpLoad/20220606/20220606174524.png);
  top: 60px;
  left: 1px;
  background-size: cover;
}
.Left ul li:nth-child(5) a {
 background: url(/Content/Areas/Common/images/common/bg_yibao.png);
 top: 63px;
 background-size: cover;
 right: 0px;
}

.Left ul li:nth-child(6) a {
 background: url(/Content/Areas/Common/images/common/bg_xinxiang.png);
 top: 280px;
 background-size: cover;
 right: 2px;
}

.Left ul li:nth-child(7) a {
 background: url(/Content/Areas/Common/images/common/bg_yiliao.png);
 top: 280px;
 background-size: cover;
 left: -1px;
}

.Left ul li:nth-child(8) a {
 background: url(/Content/Areas/Common/images/common/bg_zhuyuan.png);
 top: 499px;
 background-size: cover;
 left: 0;
}

.Left ul li a b,
.Right ul li a b {
 width: 40px;
 height: 40px;
 background: url(/Content/Areas/Common/images/common/icon_BG.png);
 display: block;
 position: absolute;
}

.Left ul li a b.before1,
.Right ul li a b.before1 {
 top: -40px;
 left: -40px;
 transition: all 0.5s;
 opacity: 0;
}

.Left ul li a b.before2,
.Right ul li a b.before2 {
 transform: rotate(90deg);
 top: -40px;
 right: -40px;
 transition: all 0.5s;
}

.Left ul li a b.before3,
.Right ul li a b.before3 {
 transform: rotate(270deg);
 left: -40px;
 bottom: -40px;
 transition: all 0.5s;
}

.Left ul li a b.before4,
.Right ul li a b.before4 {
 transform: rotate(180deg);
 right: -40px;
 bottom: -40px;
 transition: all 0.5s;
}

.Left ul li.active a b.before1,
.Right ul li.active a b.before1 {
 top: 5px;
 left: 5px;
 opacity: 1;
}

.Left ul li.active a b.before2,
.Right ul li.active a b.before2 {
 top: 5px;
 right: 5px;
 opacity: 1;
}

.Left ul li.active a b.before3,
.Right ul li.active a b.before3 {
 left: 5px;
 bottom: 5px;
 opacity: 1;
}

.Left ul li.active a b.before4,
.Right ul li.active a b.before4 {
 right: 5px;
 bottom: 5px;
 opacity: 1;
}

.animate .Left ul li:nth-child(1) a {
 -webkit-transform: translateY(0);
 transform: translateY(0);
 opacity: 1;
 visibility: visible;
 -webkit-transition-delay: 0s;
 transition-delay: 0s;
}

.animate .Left ul li:nth-child(2) a {
 -webkit-transform: translateY(0);
 transform: translateY(0);
 opacity: 1;
 visibility: visible;
 -webkit-transition-delay: 0.2s;
 transition-delay: 0.2s;
}

.animate .Left ul li:nth-child(3) a {
 -webkit-transform: translateY(0);
 transform: translateY(0);
 opacity: 1;
 visibility: visible;
 -webkit-transition-delay: 0.4s;
 transition-delay: 0.4s;
}

.animate .Left ul li:nth-child(4) a {
 -webkit-transform: translateY(0);
 transform: translateY(0);
 opacity: 1;
 visibility: visible;
 -webkit-transition-delay: 0.6s;
 transition-delay: 0.6s;
}

.animate .Left ul li:nth-child(5) a {
 -webkit-transform: translateY(0);
 transform: translateY(0);
 opacity: 1;
 visibility: visible;
 -webkit-transition-delay: 0.6s;
 transition-delay: 0.6s;
}

.animate .Left ul li:nth-child(6) a {
 -webkit-transform: translateY(0);
 transform: translateY(0);
 opacity: 1;
 visibility: visible;
 -webkit-transition-delay: 0.6s;
 transition-delay: 0.6s;
}

.animate .Left ul li:nth-child(7) a {
 -webkit-transform: translateY(0);
 transform: translateY(0);
 opacity: 1;
 visibility: visible;
 -webkit-transition-delay: 0.6s;
 transition-delay: 0.6s;
}

.animate .Left ul li:nth-child(8) a {
 -webkit-transform: translateY(0);
 transform: translateY(0);
 opacity: 1;
 visibility: visible;
 -webkit-transition-delay: 0.6s;
 transition-delay: 0.6s;
}
.animate .Left ul li:nth-child(9) a {
 -webkit-transform: translateY(0);
 transform: translateY(0);
 opacity: 1;
 visibility: visible;
 -webkit-transition-delay: 0.6s;
 transition-delay: 0.6s;
}
/* .animate .Right ul li:nth-child(1) a {
 -webkit-transform: translateY(0);
 transform: translateY(0);
 opacity: 1;
 visibility: visible;
 -webkit-transition-delay: 0.8s;
 transition-delay: 0.8s;
}

.animate .Right ul li:nth-child(2) a {
 -webkit-transform: translateY(0);
 transform: translateY(0);
 opacity: 1;
 visibility: visible;
 -webkit-transition-delay: 1s;
 transition-delay: 1s;
}

.animate .Right ul li:nth-child(3) a {
 -webkit-transform: translateY(0);
 transform: translateY(0);
 opacity: 1;
 visibility: visible;
 -webkit-transition-delay: 1.2s;
 transition-delay: 1.2s;
}

.animate .Right ul li:nth-child(4) a {
 -webkit-transform: translateY(0);
 transform: translateY(0);
 opacity: 1;
 visibility: visible;
 -webkit-transition-delay: 1.4s;
 transition-delay: 1.4s;
} */
.Left ul li {
 margin-right: 24px;
 margin-bottom: 24px;
 width: 32%;
}

.Left ul li:nth-child(3n) {
 margin-right: 0;
}
@media only screen and (max-width:768px){
 .main_content {
 min-height: auto;
}
 .Left,.Right{
 width: 100%;
 margin-top: 0;
 }
 .Left ul, .Right ul,.main{
 height: auto;
 overflow: hidden;
 }
 .Left ul li a, .Right ul li a{
 position: relative !important;
 top: 0 !important;
 left: 0 !important;
 transform: translateY(0) !important;
 /* margin: 0 auto 20px; */
 height: 175px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 }
 .main{padding: 20px 10px;}
 .Left ul li {
 margin-right: 10px;
 margin-bottom: 10px;
}

.Left ul li a img, .Right ul li a img {
 margin: 0 0 20px 0;
}
}
@media only screen and (max-width:500px){
 .Left ul li {
 margin-right: 5px;
 margin-bottom: 5px;
}

.Left ul li a, .Right ul li a {
 height: 140px;
 font-size: 16px;
}

.Left ul li a img, .Right ul li a img {
 margin: 0 0 10px 0;
 width: 50px;
}
}
@media only screen and (max-width:400px){
.Left ul li a, .Right ul li a {
 height: 120px;
}
}
@media only screen and (max-width:320px){
.Left ul li a, .Right ul li a {
 height: 100px;
 font-size: 14px;
}
} 