#container.main{position:relative; background-size:70% 100%;}
#container.main:before{z-index: -1; content:''; position:absolute; left:0; top:0; display:block; width:50%; height:100%; background:#f2f2f2; }
.main_wrap{overflow: hidden;}

.main_left{box-sizing:border-box; float:left; width:70%; padding:30px 30px 30px 0; background:#f2f2f2;}
.area_visual{position:relative; width:100%;}
.area_visual .list li{height:520px;}
.area_visual .text{z-index:90; position:absolute; top:167px; left:0; width:100%; color:#fff; text-align:left; text-align:center;   -webkit-animation:fade-in-bottom 0.8s ease-in-out; animation:fade-in-bottom 0.8s ease-in-out}
.area_visual .text > i{display: block; font-size:18px; font-weight:bold}
.area_visual .text > h2{margin:7px 0 30px 0; font-weight:200; font-size:35px; animation-delay:0.2s;  -webkit-animation:fade-in-bottom 1.2s ease-in-out; animation:fade-in-bottom 1.2s ease-in-out}
.area_visual .text > a{display:inline-block; padding:16px 50px; border:1px solid #fff; color:#fff;}
.area_visual .text > a:hover{background:#fff; color:#555}
.area_visual .bx-pager.bx-default-pager {z-index:98; position:absolute; top:120px; left:50%; margin-left:-37.5px;}
.area_visual .bx-pager-item{float:left; margin:0 8px;}
.area_visual .bx-pager-item .bx-pager-link{opacity:0.5; display:block; width:9px; height:9px; margin:8px auto; background:#fff; border-radius:50%;  text-indent:-9999px; transition:all 0.3s ease-in-out 0s;}
.area_visual .bx-pager-item .bx-pager-link.active{opacity:1; background:#fff; transition:all 0.3s ease 0s;}

.area_customer{display:flex; margin-top:20px;}
.area_customer > div{ height:250px;}
.area_customer .customer{display: flex; flex-direction: column; justify-content: center; position:relative;width:30%;margin-right:20px;background:url(../../images/main/img_customer_bg.jpg) no-repeat;background-size:cover;text-align:center;z-index: 1;}
.area_customer .customer > a{z-index: 10; display:block; color:#fff;}
.area_customer .customer h3{margin:7px; color:#fff; font-size:16px; font-weight:600}
.area_customer .customer a.c_tel{font-size:26px; font-weight:bold;}
.area_customer .customer span{margin:15px auto 0;}
.area_customer .customer span a{display: flex; align-items: center; justify-content: center; width:30px; height:30px; background:#0c1c26; border-radius:100%;}

.area_customer .notice{width:70%; padding:35px 30px;  background:#fff;}
.area_customer .notice h3{position:relative; margin-bottom:25px; padding-bottom:25px; font-size:22px;}
.area_customer .notice h3:before{content:'';position:absolute; bottom:0; left:0; display:block; width:100%; height:4px; background:url(../../images/main/line.png) repeat-x}
.area_customer .notice h3 a{position:absolute; right:0; top:16px;}
.area_customer .notice h3 a:before,
.area_customer .notice h3 a:after {content: '';position: absolute;top: 50%; right:0; margin: -1px 0 0 -6px; width: 12px; height: 2px; background-color: #7f7f7f; -webkit-transition: -webkit-transform .6s;  transition: -webkit-transform .6s;  -o-transition: transform .6s;  transition: transform .6s;  transition: transform .6s, -webkit-transform .6s;}
.area_customer .notice h3 a:before { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg);}
.area_customer .notice h3 a:after { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg);}

.area_customer .notice ul{box-sizing:border-box; background:#fff;}
.area_customer .notice ul li{overflow:hidden; position:relative; margin-bottom:11px; padding:0 100px 0 13px; font-size:16px; color:#444; transition:0.5s; white-space: nowrap; text-overflow: ellipsis;}
.area_customer .notice ul li:before{content:''; position:absolute; left:0; top:9px; display:block; width:4px; height:4px; background:#666; border-radius:50%;}
.area_customer .notice ul li i{position:absolute; top:2px; right:0; color:#999; font-size:14px;}

.main_right{float:left; width:30%; padding:30px 0 30px 30px; background:#fff;}
.area_banner{width:100%;}
.area_banner ul li{margin-top:20px; background:#214986; height:250px;}
.area_banner ul li:hover{ background:#3164b3;}
.area_banner ul li:nth-child(2){background:#089896}
.area_banner ul li:nth-child(2):hover{background:#0cbdba}
.area_banner ul li:last-child{background:url(../../images/main/img_service_bg.jpg) no-repeat; background-size:cover;}
.area_banner ul li:first-child{margin-top:0;}
.area_banner ul li a{position:relative; display:block; width:100%; height:100%; padding:40px;}
.area_banner ul li a h3{margin-bottom:10px; font-size:22px; color:#fff; font-weight:500}
.area_banner ul li a p{opacity:0.9; font-size:15px; color:#fff; font-weight:300;}
.area_banner ul li a span{display:inline-block; position:absolute; left:40px; bottom:40px; padding:10px 30px; border:1px solid rgba(255,255,255,0.5); color:#fff; font-size:14px; }
.area_banner ul li a:hover span{background:#fff; color:#555}
.area_banner img{opacity:0.6; position:absolute; bottom:40px; right:40px; height:40px;}

@media screen and (max-width:1420px){
	.main_left{width:68%;}
	.main_right{width:32%;}
}

@media screen and (max-width:1279px){
	.area_customer .customer{width:45%;}
	.area_customer .notice{width:55%;}

	.area_banner ul li a p br{display:none;}
	.area_banner ul li a h3{font-size:19px;}
}

@media screen and (max-width:1024px){
	.main_wrap {background:#f6f6f6}
	#container.main{padding:20px 0; background:#f6f6f6;}
	#container.main:before{display:none;}
	.main_left{width:100%; padding:0;}
	.main_right{width:100%; padding:0; margin-top:20px;}
	.area_banner ul{display:flex; justify-content: space-between;}
	.area_banner ul li{width:32%; margin-top:0 }
	.area_banner ul li a{padding:25px}
	.area_banner ul li a span{left:25px; bottom:25px;}
	.area_banner img{height:30px; right:25px; bottom:25px;}
}

@media screen and (max-width:767px){
	.area_visual .text > h2{font-size:22px;}
	.area_visual .text > i{font-size:14px;}
	.area_visual .text > a{padding:8px 20px; font-size:13px;}

	.area_banner ul{display:block;}
	.area_banner ul li{width:100%; margin-top:10px; height:auto;}
	.area_banner ul li a span{position:static; padding:8px 20px; margin-top:25px; font-size:12px;}

	.area_customer .notice h3{font-size:16px;}
	.area_customer .customer a.c_tel{font-size:20px;}
	.area_banner ul li a h3{font-size:16px; font-weight:600}
	.area_banner ul li a p{font-size:14px;}

}

@media screen and (max-width:580px){
	.area_visual .text{top:35%;}

	.area_customer{display:block;}
	.area_customer .customer{margin-bottom:10px; padding:20px 10px; width:100%;}
	.area_customer .notice{width:100%; padding:25px;}

	.area_customer > div{height:auto;}
	

}