@charset "utf-8";

#mainvd{background: url(../../img/mainvd_sub.png);background-repeat: no-repeat; background-position:center; background-size: cover;}
#mainvd article{background: rgba(0,177,235,0.07); padding:85px 0px 85px;}
#mainvd .article_r{float:right; padding:10px 0px; width:44%;}

#one{margin:50px 0 0px 0;}
#one h2{margin-bottom:35px;}
#one .inlineBlock>li{width:48%; margin-right:4%;margin-bottom:20px; padding:20px 0px 20px 10px;box-sizing:border-box; border:6px solid #ECECEC; vertical-align: top; position:relative; height: 220px;}
#one .inlineBlock>li dd,#one .inlineBlock>li dt{display: inline-block;}
#one .inlineBlock>li dt{width:30%; margin-right:6%;text-align: center; box-sizing:border-box; vertical-align: top;}
#one .inlineBlock>li dt img{width:100%;}
#one .inlineBlock>li dd{width:64%;}
#one h3{display:inline-block;position: relative;padding: 9px 0px 9px 25px;color: #FFF;background: #929292;width:98%; font-weight:500; font-size:18px;}
#one h3:before{position: absolute;content: '';top: 100%; right: 0; border: none; border-bottom: solid 9px transparent; border-left: solid 13px #6C6B6B;}
#one p{padding:15px 18px 10px 25px;}
#one .inlineBlock>li:nth-child(2),#one .inlineBlock>li:nth-child(4),#one .inlineBlock>li:nth-child(6){margin-right:0;}

#two{margin:50px 0 70px 0;}
#two h2{margin-bottom:35px;}
#two ul.inlineBlock{text-align:center;}
#two .inlineBlock>li{display: inline-block;width:29%;margin-right:3%; vertical-align: top; padding:30px 45px 30px 45px; margin-bottom:20px; box-sizing: border-box; background: #F7F5F5; border:1px solid rgba(0,174,230,0.05);height: 410px;}
#two .inlineBlock>li img{width:63%; margin-bottom:15px;}
#two .inlineBlock>li:nth-child(3),#two li:nth-child(6),#one li:nth-child(8){margin-right:0%;}
#two h3{background: #929295; color:#fff; margin-bottom:15px;font-weight:500;border-radius: 5px;}
#two p{text-align:left;}
#two .padding{padding-bottom:25px;}

.new{display: block;position: relative;}
.new_ribbon{position: absolute;top: -6px;right: -6px;width: 89px;height: 91px;overflow: hidden;}
.ribbon{
    display: inline-block;
    position: absolute;
    padding: 7px 0;
    left: -23px;
    top: 22px;
    width: 160px;
    text-align: center;
    font-size: 18px;
    line-height: 16px;
    background: linear-gradient(to right, #4298fa 0%,#8fcdff 100%);
    color: #fff;
    text-shadow: 0 2px 2px #56a1f3;
    letter-spacing: 0.05em;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);}

.ribbon:before,.ribbon:after{
    position: absolute;
    content: "";
    border-top: 4px solid #3672b6;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    bottom: -4px;
}

.ribbon:before{
    left: 14px;
}

.ribbon:after{
   right: 18px;
}

.banner_function{
    border: solid 1px #00aee6;
    width: 400px;
    margin: 0 auto;
    margin-top: 40px;
    text-align: center;
    transition: all .2s;
}
.banner_function:hover{
    background-color: #cbf2ff;
    transition: all .2s;
}

.banner_function a{
    display: block;
    padding: 20px;
    font-size: 1.2rem;
    color: #00aee6;
}

@media screen and (max-width : 640px ){
    #one .inlineBlock>li{width:100%;}
    #two .inlineBlock>li{width:100%;}
    #two h3{padding: 5px 0px;}
}