#contact_1{
width: 100%;
height: 465px;
background: #FFFFFF;
min-width: 1200px;
overflow: hidden;
}
.contact_1_01{
width: 1120px;
height: 225px;
margin: 125px auto 0;
}
.contatdiv_01{
width: 290px;
height: 120px;
border-bottom: 1px solid #dddddd;
color: #222222;
float: left;
}
.contatdiv_01 span{
display: block;
font-size: 32px;
font-weight: 600;
margin-bottom: 10px;
}
.contatdiv_01 p{
font-size: 28px;
font-weight: bold;
margin-top: 20px;
}
.contatdiv_02{
/* position: relative; */
width: 576px;
height: auto;
float: right;
}
.qrcode-wrapper {
position: relative;
width: 22px;
height: 22px;
}
.qrcode-wrapper .qrcode-s{
display: block;
width: 22px;
height: 22px;
}
.qrcode-wrapper .qrcode{
position: absolute;
right: -120px;
top: -43px;
display: block;
width: 120px;
height: 120px;
transform: scale(0);
transition: all .5s ease;
transform-origin: 0 0;
}
.qrcode-wrapper:hover .qrcode {
transform: scale(1);
}
/* .contatdiv_02 .qrcode {
position: absolute;
bottom: -80px;
left: 20px;
transform: scale(.4);
transition: all .5s ease;
transform-origin: 0 0;
}
.contatdiv_02 .qrcode:hover {
transform: scale(1);
} */
.contatdiv_02 span{
display: block;
font-size: 48px;
color: #222222;
font-weight: bold;
}
.contatdiv_02 p{
font-size: 16px;
color: #666666;
margin-top: 22px;
}
.contatdiv_02 ul{
margin-top: 55px;
line-height: 30px;
}
.contatdiv_02 li{
font-size: 16px;
color: #666666;
}
#contact_2{
width: 100%;
height: 800px;
background: #f7f8fa;
min-width: 1200px;
overflow: hidden;
}
.contact_2_01{
width: 1120px;
height: 570px;
margin: 110px auto 0;
}
.cv_02{
width: 290px;
height: 185px;
border-bottom: 1px solid #dddddd;
color: #222222;
float: left;
}
.ca_02 span{
font-size: 36px;
line-height: 45px;
margin-top: -3px;
}
.ca_02 p{
margin-top: 37px;
}
.contact_2_01 ul{
width: 100%;
height: 285px;
float: left;
margin-top: 110px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.contact_2_01 ul li{
width: 250px;
height: 100px;
margin-right: 150px;
margin-bottom: 85px;
}
.contact_2_01 ul li:nth-child(3n){
margin-right: 0px;
}
.contact_2_01 ul li:nth-child(n+4){
margin-bottom: 0px;
}
.contact_2_01 ul li span{
font-size: 20px;
font-weight: 600;
color: #222222;
margin-bottom: 34px;
display: block;
}
.contact_2_01 ul li p{
font-size: 16px;
color: #666666;
line-height: 25px;
}
#contact_3{
width: 100%;
height: 765px;
overflow: hidden;
min-width: 1200px;
}
.contact_3_01{
width: 1120px;
height: 500px;
margin: 115px auto 0;
}
.cv_03{
height: 180px
}
.ca_03 span{
font-size: 36px;
}
.ca_03 span:nth-child(2){
font-size: 24px;
margin-top: 15px;
}
.ca_03 img{
margin-top: 35px;
}
.contatdiv_03{
width: 1070px;
height: 230px;
float: left;
margin-top: 95px;
overflow: hidden;
}
.contatdiv_03 span{
display: block;
font-size: 20px;
color: #222222;
font-weight: bold;
}
.contatdiv_03 p{
width: 100%;
font-size: 16px;
color: #666666;
margin-top: 38px;
float: left;
margin-right: 169px;
margin-bottom: 40px;
}
.contatdiv_03 p:nth-child(4){
margin-right: 0px;
}
.contatdiv_03 span:nth-child(5){
margin-top: 130px;
}
#contact_4{
width: 100%;
height: 875px;
overflow: hidden;
min-width: 1200px;
background: #f7f8fa;
}
.contact_4_01{
width: 1120px;
height: 720px;
margin: 100px auto 0;
}
.cv_04{
height: 180px;
}
.cv_04 p:nth-child(4){
position: absolute;
color: #666666;
font-size: 16px;
margin-top: 95px;
font-weight: normal;
}
.map_02{
width: 546px;
height: 702px;
position: absolute;
left: 50%;
}
.mapimg_01{
position: absolute;
}
.map_02_1{
width: 45px;
height: 66px;
text-align: center;
position: absolute;
}
.map_02_1:nth-child(2){
top: 158px;
left: 250px;
}
.map_02_1:nth-child(3){
top: 55px;
left: 210px;
}
.map_02_1:nth-child(4){
top: 62px;
left: 387px;
}
.map_02_1:nth-child(5){
top: 505px;
left: 194px;
}
.map_02_1:nth-child(6){
top: 162px;
left: 451px;
}
.map_02_1:nth-child(7){
top: 170px;
left: 137px;
}
.map_02_1:nth-child(8){
top: 276px;
left: 12px;
}
.map_02_1:nth-child(9){
top: 365px;
left: 121px;
}
.map_02_1:nth-child(10){
top: 289px;
left: 301px;
}
.map_02_1:nth-child(11){
top: 242px;
left: 120px;
}
.mapspan{
font-size: 14px;
color: #000000;
font-weight: bold;
}
.map_02_2{
width: 12px;
height: 12px;
border-radius: 50%;
background: #337dff;
margin: 20px auto 0;
}
.mapdonghua_01{
width: 12px;
height: 12px;
border-radius: 50%;
position: absolute;
border: 1px solid #337dff;
animation: donghua1 2s;
animation-iteration-count:infinite;
}
@keyframes donghua1
{
0% {width: 12px;height: 12px;opacity: 1;left: 15.5px;margin-top: -1px;}
100% {width: 60px;height: 60px;opacity: 0;left:-9px;margin-top: -23px;}
}
.mapdonghua_02{
width: 12px;
height: 12px;
border-radius: 50%;
position: absolute;
border: 1px solid #337dff;
animation: donghua2 2s;
animation-delay: 0.2s;
animation-iteration-count:infinite;
}
@keyframes donghua2
{
0% {width: 12px;height: 12px;opacity: 1;left: 15.5px;margin-top: -1px;}
100% {width: 60px;height: 60px;opacity: 0;left:-9px;margin-top: -23px;}
}
.map_02_3{
width: 355px;
height: 160px;
position: absolute;
margin-left: 25px;
background: #FFFFFF;
border: 1px solid #d8d4d4;
z-index: 10;
display: none;
}
.map_02_31{
width: 315px;
height: 125px;
margin: 20px auto 0;
display: flex;
align-items: flex-start;
flex-direction: column;
}
.map_02_31 img{
width: 18px;
height: 24px;
margin-left: 20px;
}
.map_02_31 div{
display: flex;
}
.map_02_31 span{
font-size: 26px;
font-weight: bold;
margin-left: 20px;
margin-top: 0px;
}
.map_02_31 p{
font-size: 14px;
line-height: 1.2;
margin-left: 25px;
margin-top: 6px;
text-align: left;
}
.map_02_31 p:nth-child(2){
margin-top: 20px;
}
.map_02_1:hover .map_02_3{
display: block;
}
#contact_5{
width: 100%;
overflow: hidden;
min-width: 1200px;
background: #f7f8fa;
}
.contact_5_01{
width: 1190px;
height: 508px;
margin: 0 auto;
}
.concul_1{
width: 1190px;
height: 60px;
}
.concul_1 li{
width: 117.9px;
height: 58px;
border: 1px solid #ebeaef;
float: left;
text-align: center;
line-height: 58px;
color: #8a8b8b;
font-size: 16px;
letter-spacing: 3px;
background: #fff;
cursor: pointer;
border-right: none;
}
.concul_1 li:last-of-type{
border-right: 1px solid #ebeaef;
}
.contact_5_02{
width: 1190px;
height: 362px;
margin-top: 80px;
}
.contact_5_02_1{
width: 600px;
height: 362px;
background: #FFFFFF;
float: left;
}
#allmap{
width: 590px;
height: 362px;
float: right;
}
.liactive{
background: #337dff !important;
color: #FFFFFF !important;
}
.contact_5_02_1 ul{
width: 330px;
height: 235px;
margin-left: 100px;
margin-top: 65px;
display: none;
}
.contact_5_02_1 ul li{
font-size: 16px;
color: #808080;
margin-bottom: 22px;
}
.contact_5_02_1 ul li:last-of-type{
line-height: 30px;
margin-top: -10px;
}
.contact_5_02_1 ul li:nth-child(1){
font-size: 28px;
color: #222222;
margin-bottom: 40px;
}
.concul_2{
display: block !important;
}
/*鍔ㄧ敾*/
.cv_02 ,.cv_03 ,.cv_04{
margin-top: 100px;
opacity: 0;
transition: all 1s ease;
}
.cv_01 ,.ca_01{
opacity: 0;
transition: all .9s ease;
}
.ca_02 ,.ca_03{
margin-top: 100px;
opacity: 0;
transition: all 1s ease;
}
.contact_2_01 ul li{
margin-top: 100px;
opacity: 0;
transition: all .8s;
}
.contatdiv_03{
margin-top: 195px;
opacity: 0;
transition: all 1s ease;
}
.map_02{
left: 70%;
opacity: 0;
transition: all 1s ease;
}