@import url(font-awesome.min.css);

/*container*/
#wrapper {background:url(./../image/bg_2.svg) no-repeat 0 bottom #daf1ff; background-size:20%;}
#wrapper .main_wrap{overflow:auto; position:relative;  background-size:100%; padding:50px 0px 50px;  width:72%; justify-content: space-between; margin: 0 auto;  display: flex; min-height: 789px; align-items: center;}

#wrapper .main_wrap h2{width:40%; padding-right: 10px; word-break: keep-all; font-size:42px; display: block;}
#wrapper .main_wrap h2 strong{color:#338dee; display: block;}

.main_link_wrap{display:flex; width:60%; flex-wrap:wrap;}
.main_link_wrap li{width:47%; margin:8px;}
.main_link_wrap li a{width:100%; padding:25px; box-shadow:5px 5px 10px #c0cee082; display: block; position: relative; color:#fff;  background: url(./../image/sales_obj01.png) no-repeat 100px 30px,
     url(./../image/sales_obj03.png) no-repeat 200px 60px #f6f9ff; height:150px; border-radius: 35px 8px;}

.main_link_wrap li a strong{font-size:20px; color:#000;}
.main_link_wrap li a p{color:#8ea6c4; font-size:12px; word-break: keep-all; line-height:1.5;}

.main_link_wrap li a:hover{ transition: all 0.8s; background: url(./../image/sales_obj01.png) no-repeat -135px -0px, url(./../image/sales_obj03.png) no-repeat 124px 80px #f6f9ff;}
.main_link_wrap li a:hover strong{color:#329be0;}

.main_link_wrap li a em {position: absolute; background:#ffffff00; transition: all 0.8s;}
.main_link_wrap li a em:nth-of-type(1) {left: 0; top: 0; width: 0%; height: 1px;}
.main_link_wrap li a em:nth-of-type(2) {left: 0; top: 0; width: 1px; height: 0%;}
.main_link_wrap li a em:nth-of-type(3) {right: 0; bottom: 0; width:1px; height:0%;}
.main_link_wrap li a em:nth-of-type(4) {right: 0; bottom: 0; width:0px; height:1%;}
.main_link_wrap li a:hover em {background:#329be0;}
.main_link_wrap li a:hover em:nth-of-type(1) {width:100%;}
.main_link_wrap li a:hover em:nth-of-type(2) {height:100%;}
.main_link_wrap li a:hover em:nth-of-type(3) {height:100%;}
.main_link_wrap li a:hover em:nth-of-type(4) {width:100%;}

.header_link .btn_c1{color:#000 !important;}

.btn{border-radius:3px;}
.header_menu .btn:hover,
.header_menu .btn:active,
.header_menu .btn:focus,
.header_menu .btn_wrap a:hover{background:#d5dbe8; color:#fff;}

.btn_c1{border:1px solid #ddd;}
.btn_c1:hover{background:#e3e8f3; color:#000; box-shadow:none;}


@media (max-width:1680px){
  #wrapper .main_wrap{width:90%; padding:80px 0; align-items:flex-start;  min-height:auto;}
  #wrapper .main_wrap h2 {font-size: 35px; padding: 20px;}
  .main_link_wrap li { width: 47%;}

}

@media (max-width:1120px) {
#wrapper .main_wrap{flex-direction:column; justify-content: center;  padding:50px 0;}
#wrapper .main_wrap h2 {width:100%; font-size:30px; text-align:center; padding: 0px 0 20px;}

.main_link_wrap {flex-wrap:wrap; width:80%; margin: 0 auto;}
.main_link_wrap li a{margin-bottom:5px;}
.main_link_wrap li a:hover{padding:20px 20px 0px;}
}



@media (max-width:768px) {

 #wrapper .main_wrap h2 {width:100%; font-size:22px;}

 .main_link_wrap{flex-direction:column; width: 97%;}
 .main_link_wrap li {width:99%; margin:2px; }
 .main_link_wrap li a{padding:15px; background: url(./../image/sales_obj01.png) no-repeat 110px 20px, url(./../image/sales_obj03.png) no-repeat 215px 5px #f6f9ff;  height: 80px;}
 .main_link_wrap li a:hover{padding:15px; background: url(./../image/sales_obj01.png) no-repeat 80px 35px, url(./../image/sales_obj03.png) no-repeat 200px 10px #f6f9ff;}
 .main_link_wrap li a strong {font-size: 16px;}
}



@media (max-width:500px) {

}


@media (max-width:412px) {

}