﻿.mainSecOne {
    padding-bottom: .53%;}

.secOneTlt {
    padding: 1% 0;
    line-height: 1.8;
}

.secOnePara {
    max-width: 771px;
    margin: 0 auto;
    line-height: 1.56;
    text-align: center;
}

.secOneImg {
    max-width: 898px;
    margin: 0 auto;
}

.secTwoUl {
    padding: 1.4% 0;
    max-width: 1240px;
}

.secTwoItem {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
    margin: 0 auto;
    padding: 1.22% 1.56%;
}

.secTwoItem .linkEle {
    padding: 3% 4% 6%;
    background-color: #fff;
    transition: all .3s;
}

.secTwoItem .linkEle:hover {
    -webkit-box-shadow: 4px 5px 15px rgba(0,0,0,.1);
    -moz-box-shadow: 4px 5px 15px rgba(0,0,0,.1);
    box-shadow: 4px 5px 15px rgba(0,0,0,.1);
}

.secTwoImgBox {
    position: relative;
    overflow: hidden;
    width: 39%;
    padding-bottom: 39%;
    margin: 0 auto 1.13%;
}

.secTwoItem .secImg,
.secThreeItem .secImg,
.secTwoItem:hover {
    -webkit-transition: all .45s;
    -moz-transition: all .45s;
    transition: all .45s;
}

.secThreeItem:hover .secImg {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
}

.secTwoItem:hover {color: #6d6d6d;}

.secTwoItem .secTwoSubhead {
    position: relative;
    overflow: hidden;
    z-index: 0;
    padding: 2% 0;
    text-align: center;
    color: #fff;
    background-color: #61A1FF;
    border-radius: 4px;
}

.secTwoSubhead::before,
.secTwoSubhead::after {
    position: absolute;
    box-sizing: border-box;
    left: 0;
    z-index: -1;
    content: '';
    width: 100%;
    height: 120%;
    background-color: #2c78ff;
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    transform: rotate(4.5deg);
    -webkit-transition: top .4s ease-in-out;
    -moz-transition: top .4s ease-in-out;
    transition: top .4s ease-in-out;
}

.secTwoSubhead::before {
    top: 120%;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
}

.secTwoSubhead::after {
    top: -120%;
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

.secTwoItem:hover .secTwoSubhead::before,
.secTwoItem:hover .secTwoSubhead::after{
    top: 0;
}

.secTwoParaLeft,.secTwoParaRight {padding-top: 24px;}

.secTwoParaLeft::before,
.secTwoParaRight::before {
    content: '•';
    padding-right: 2%;
}

.secTwoParaUl {
    display: -webkit-flex;
    display: flex;
    justify-content: space-evenly;
}

.secTwoParaItem {
    -webkit-flex-grow: .1;
    flex-grow: .1;
}

.secThreeTlt {
    padding: 3% 0 1%;
    line-height: 1.8;
}

.secThreeUl {
    max-width: 1226px;
    margin: 0 auto;
    padding: 1% 0 2%;
}

.secThreeItem {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 25%;
    padding: 1%;
    transition: all .45s ease;
}

.secThreeImgBox {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-bottom: 61.7%;
    margin-bottom: 1.42%;
}

.secThreeTxt {
    line-height: 3;
    font-weight: 700;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #1069ED;
}

.secThreeItem:hover {
    text-shadow: 0 3px 10px rgb(0 63 155);
}

@media screen and (max-width: 1080px) {
    .secThreeItem {width: 33.33%;}
}

@media screen and (max-width: 790px) {
    .secTwoItem {width: 100%;}
    .secThreeItem {width: 50%;}
}

@media screen and (max-width: 600px) {
    .secTwoParaLeft,
    .secTwoParaRight {
        padding-top: 13px;
    }
    .secThreeTxt {font-size: 12px;}
}

