/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

/* 门店展示 */
.main-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 1.7rem 1.4rem;
    padding-top: 0.8rem;
    padding-left: 4.5rem;
    background-attachment: fixed;
    overflow: hidden;
}

.top-title {
	color: #fff;
    font-size: 0.28rem;
    display: inline-block;
    float: left;
}


.main-page .dets {
    margin-top: 0.6rem;
    position: relative;
    width: 100%;
    height: 7.2rem;
}

.main-page .dets .switch-btn {
    width: 3.2725rem;
    height: 2.41rem;
    background-color: #ffba00;
    position: absolute;
    z-index: 100;
    right: 0;
    bottom: 0;
}

.main-page .dets .switch-btn .btns {
    width: 100%;
    height: 50%;
    border: none;
    outline: none;
    font-size: .24rem;
    background-color: transparent;
    color: #ffffff;
    opacity: 0.7;
    -webkit-transition: opacity 300ms;
    -o-transition: opacity 300ms;
    transition: opacity 300ms;
}

.main-page .dets .switch-btn .btns:hover {
    opacity: 1;
}

.main-page .dets .links {
    display: block;
}

.main-page .dets .gredd {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 3.2725rem .07rem 3.2725rem .07rem 3.2725rem .07rem 3.2725rem;
    grid-template-columns: 3.2725rem 3.2725rem 3.2725rem 3.2725rem;
    -ms-grid-rows: 2.42rem .07rem 2.42rem;
    grid-template-rows: 2.42rem 2.42rem;
    grid-row-gap: .07rem;
    grid-column-gap: .07rem;
    grid-auto-flow: row dense;
}

.main-page .dets .gredd > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.main-page .dets .gredd > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

.main-page .dets .gredd > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
}

.main-page .dets .gredd > *:nth-child(4) {
    -ms-grid-row: 1;
    -ms-grid-column: 7;
}

.main-page .dets .gredd > *:nth-child(5) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
}

.main-page .dets .gredd > *:nth-child(6) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
}

.main-page .dets .gredd > *:nth-child(7) {
    -ms-grid-row: 3;
    -ms-grid-column: 5;
}

.main-page .dets .gredd > *:nth-child(8) {
    -ms-grid-row: 3;
    -ms-grid-column: 7;
}

.main-page .dets .gredd .links {
    display: block;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-decoration: none;
    color: #ffffff;
    overflow: hidden;
    font-size: .2rem;
}

/*.main-page .dets .gredd .links:first-child {
    position: relative;
    z-index: 100;
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    grid-row-start: 1;
    grid-row-end: 4;
}*/
.main-page .dets .gredd .links:nth-child(5){
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
}
.main-page .dets .gredd .links:nth-child(6){
    -ms-grid-column: 5;
    -ms-grid-column-span: 1;
}
.main-page .dets .gredd .links p{
    opacity: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: .2rem;
    text-align: center;
    background-color: rgba(32, 66, 116, 0.7);
    -webkit-transform: perspective(20px) translateZ(2px);
            transform: perspective(20px) translateZ(2px);
    -webkit-transition: opacity 300ms, -webkit-transform 300ms;
    transition: opacity 300ms, -webkit-transform 300ms;
    -o-transition: opacity 300ms, transform 300ms;
    transition: opacity 300ms, transform 300ms;
    transition: opacity 300ms, transform 300ms, -webkit-transform 300ms;
}
.main-page .dets .gredd .links:hover p{
    opacity: 1;
    -webkit-transform: perspective(20px) translateZ(0px);
            transform: perspective(20px) translateZ(0px);
}