.gk_bg{  background-color: #eff1f3;padding: 53px 0px;}
.bgwhite{ background: url("../images/sq.files/gkbg.png") top center no-repeat; padding: 28px 50px;}
.gk_left{ float: left; width: 575px;  }
.gk_tit{ height: 52px; background: url("../images/sq.files/gk1.png") left center no-repeat; }
.gk_tit h1{ padding-left: 70px;}
.gk_tit h1 b{ display: block; font-size: 24px; color: #245399;}
.gk_tit h1 span{ display: block; color: #dcdcdc; font-size: 20px;}
.sq_desc{ line-height: 30px; font-size: 16px; text-indent: 2em; margin: 20px 0px 15px;}
.gk_btn li{ float: left;  width: 170px; line-height: 45px; margin: 10px 20px 11px 0px; background-color: #eff1f3;}
.gk_btn li.gk1 i{width:27px; height:26px; margin-right: 10px;display: inline-block; vertical-align: middle; background-image: url("../images/sq.files/gkicon1.png"); background-repeat: no-repeat;}
.gk_btn li.gk2 i{width:31px; height:26px; margin-right: 10px;display: inline-block; vertical-align: middle; background-image: url("../images/sq.files/gkicon2.png"); background-repeat: no-repeat;}
.gk_btn li.gk3 i{width:24px; height:25px; margin-right: 10px;display: inline-block; vertical-align: middle; background-image: url("../images/sq.files/gkicon3.png"); background-repeat: no-repeat;}
.gk_btn li.gk4 i{width:22px; height:26px; margin-right: 10px;display: inline-block; vertical-align: middle; background-image: url("../images/sq.files/gkicon4.png"); background-repeat: no-repeat;}
.gk_btn li.gk5 i{width:23px; height:23px; margin-right: 10px;display: inline-block; vertical-align: middle; background-image: url("../images/sq.files/gkicon5.png"); background-repeat: no-repeat;}
.gk_btn li.gk6 i{width:22px; height:26px; margin-right: 10px;display: inline-block; vertical-align: middle; background-image: url("../images/sq.files/gkicon6.png"); background-repeat: no-repeat;}
.gk_btn li.gk7 i{width:25px; height:25px; margin-right: 10px;display: inline-block; vertical-align: middle; background-image: url("../images/sq.files/gkicon7.png"); background-repeat: no-repeat;}
.gk_btn li.gk8 i{width:26px; height:24px; margin-right: 10px;display: inline-block; vertical-align: middle; background-image: url("../images/sq.files/gkicon8.png"); background-repeat: no-repeat;}
.gk_btn li.gk9 i{width:22px; height:22px; margin-right: 10px;display: inline-block; vertical-align: middle; background-image: url("../images/sq.files/gkicon9.png"); background-repeat: no-repeat;}
.gk_btn li a{ display: block; padding: 0px 20px 0px 20px; font-size: 16px; }
.gk_btn li:hover i{transition:ease 0.3s;transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);}
.gk_right{ float: right; width: 555px; margin-top: 10px;}
.gk_right .sp_box{ position: relative; width: 555px; height: 385px;}
.gk_right .sp_box .sp_img{ width: 555px; height: 385px;}
.gk_right .sp_btn{ width: 62px; height: 62px; position: absolute; top: 50%; left:50%; margin-left: -31px; margin-top: -31px; z-index: 999; cursor: pointer;}
.gk_right .sp_btn:hover {
    animation: puffOut .6s ease-in-out;
}

@keyframes puffOut {
    0% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1, 1);
        -webkit-filter: blur(0px);
    }
    100% {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(2, 2);
        -webkit-filter: blur(2px);
    }
}
.ts_bg{ background: url("../images/sq.files/youbg.png")  center -220px no-repeat; padding: 50px 0px 100px;}
.ts_tit{ width: 166px; margin: 0 auto;  text-align: center; margin-bottom: 50px;}
.ts_tit b{ font-size: 30px; font-weight: bold;}
.ts_tit span{ display: block; font-size: 20px; color: #dcdcdc; line-height: 18px;}
.ts_lef{ float: left; width: 910px;}
.ts_rig{ float: right; width: 290px;}
.ts_con li{ float: left; display: block;}
.ts_con li a{ display: inline-block;}
.ts_con li a img{ transition:transform 1s ease 0s;}
.ts_con li a:hover img{transform:scale(1.03,1.03); -webkit-transform:scale(1.03,1.03);-moz-transform:scale(1.03,1.03);-o-transform:scale(1.03,1.03);}
.ts_lef li{ margin-right: 11px;}
.ts_con li.l2 .qa1{ display: inline-block; margin-right: 10px;}
.ts_con li.l2 a{ margin-bottom: 7px;}
.ts_con li.l4{ width: 290px;}
.ts_con li.l4 a{ margin-bottom: 7px;}

.js_bg{ height: 748px; background-image: url("../images/sq.files/jsbg.jpg") ; background-position: top center; background-color: rgba(0,0,0,.4);  }
.js_tit{ width: 500px; margin: 0px auto;  text-align: center;padding: 40px 0px 30px; }
.js_tit b{ font-size: 30px; font-weight: bold;}
.js_tit span{ display: block; font-size: 20px; color: #de979d; line-height: 18px;}
.js_tit p{ font-size: 18px; line-height: 35px; text-indent: 2em; margin-top: 20px;}
.picScroll{ width:1200px; margin: 30px auto 100px; position:relative; }
.picScroll .hd{ overflow:hidden;  height:30px; position: absolute; bottom:-55px; left:50%; margin-left: -30px; }
.picScroll .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:10px; zoom:1; }
.picScroll .hd ul li{ float:left;  width:14px; height:14px; color: #fff;  margin-right:5px; overflow: hidden; text-indent:-999px;  cursor:pointer; background: url("../images/sq.files/iconwhite.png") top center no-repeat;}
.picScroll .hd ul li.on{ background: url("../images/sq.files/iconred.png") top center no-repeat;  color: #fff;}
.picScroll .bd{  width:1200px;  height: 395px; margin: 0 auto; }
.picScroll .bd ul{ overflow:hidden; zoom:1; }
.picScroll .bd ul li{ width: 243px; height: 395px; background: url("../images/sq.files/jsimg.png") top center no-repeat; margin:0 28px; float:left; _display:inline; overflow:hidden; text-align:center;  }
.picScroll .bd ul li .title{ padding:80px 15px 20px;   }
.picScroll .bd ul li .title a{ font-size: 18px;  font-weight: bold;  line-height:50px;}
.picScroll .bd ul li .title p{ font-size: 16px;  line-height:36px;}

.clear{ clear: both; overflow: hidden;}

.you_bg{ margin-top: 66px;}




.desktop-wrapper {
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.desktop-wrapper .options {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    min-width: 600px;
    width: 1200px;
    height: 355px;
}

.desktop-wrapper .options .option {
    position: relative;
    overflow: hidden;
    min-width: 206px;
    margin:0px 7px;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
    color: #fff;
}

.desktop-wrapper .options .option.active {
    flex-grow: 10000;
    -webkit-transition-property: all;
    -moz-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    transition-duration: 0.4s;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.desktop-wrapper .options .option.active>div {
    z-index: 1;
}

.desktop-wrapper .options .option.active>div .info-wrapper {
    z-index: 999; margin: 30px 0px;
}


.desktop-wrapper .options .option.active>div .info-wrapper .description {

    left: 0px;
    opacity: 1;
    margin-top: 2.5rem;
    margin-left:1.5rem;
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    -webkit-transition-delay: 0.6s;
    -moz-transition-delay: 0.6s;
    transition-delay: 0.6s;
}

.desktop-wrapper .options .option.active>div .info-wrapper .description li {
    float: left; width: 190px; line-height: 45px;background-color: rgba(85,135,218,0.7); margin: 10px 20px; border-radius: 3px; text-align: center; list-style: none;
}
.desktop-wrapper .options .option.active>div .info-wrapper .description li a{ color: #ffffff; font-size: 18px; text-decoration: none;}

.desktop-wrapper .options .option.active>div .info-wrapper .ext-link {
    text-decoration: none;
    width: 6rem;
    color: #e9ecef;
    text-shadow: 1px 2px 4px rgba(33, 37, 41, 0.5);
    box-shadow: 2px 2px 4px rgba(33, 37, 41, 0.3);
    background: rgba(255, 255, 255, 0.1);
    padding: .35rem .75rem;
    position: relative;
    overflow: hidden;
    transition: all 0.2s linear 0s;
}

.desktop-wrapper .options .option.active>div .info-wrapper .ext-link:after {
    position: absolute;
    transition: .3s;
    content: '';
    width: 0;
    left: 0;
    bottom: 0;
    height: .15rem;
    background: rgba(255, 255, 255, 0.2);
}

.desktop-wrapper .options .option.active>div .info-wrapper .ext-link:hover {
    text-shadow: none;
    box-shadow: 3px 3px 8px rgba(33, 37, 41, 0.6);
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.desktop-wrapper .options .option.active>div .info-wrapper .ext-link:hover:after {
    left: 0;
    width: 100%;
}

.desktop-wrapper .options .option.active>div:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 101%;
    top: 0;
    left: 0;
    z-index: 1;
    -webkit-transition-property: all;
    -moz-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
}

.desktop-wrapper .options .option.active>div .icon-wrapper {
    display: flex;
    align-items: flex-start;
    align-content: baseline;
}

.desktop-wrapper .options .option.active>div .icon-wrapper .category-text {
    opacity: 1;
    display: initial;
    -webkit-transition-property: all;
    -moz-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
}

.desktop-wrapper .options .option.active>div .icon-wrapper .category-icon:before {
    opacity: 1;
}
.desktop-wrapper .options .option.active>div .icon-wrapper .category-icon{ opacity: 0;}
.desktop-wrapper .options .option.active>div .icon-wrapper .category-text{ opacity: 0;}
.desktop-wrapper .options .option:not(.active) {
    flex-grow: 1;
}

.desktop-wrapper .options .option:not(.active):hover {
}

.desktop-wrapper .options .option:not(.active):hover>div:before {
}

.desktop-wrapper .options .option:not(.active)>div .title,
.desktop-wrapper .options .option:not(.active)>div .subtitle,
.desktop-wrapper .options .option:not(.active)>div .description {
    opacity: 0;
}

.desktop-wrapper .options .option:not(.active)>div .icon-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    align-items: center;
}

.desktop-wrapper .options .option:not(.active)>div .icon-wrapper .category-icon:before {
    opacity: .5;
}

.desktop-wrapper .options .option:not(.active)>div:before {
    background: rgba(52, 58, 64, 0.3);
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition-property: all;
    -moz-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
}

.desktop-wrapper .options .option>div {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}

.desktop-wrapper .options .option>div .icon-wrapper .category-text {
    position: absolute;
    top:145px;
}
.desktop-wrapper .options .option>div .icon-wrapper .category-text h1{
    width: 20px;
    line-height: 35px;
    font-size: 20px;
}
.desktop-wrapper .options .option>div .icon-wrapper .category-icon {
    display: flex;
    align-items: flex-start;
    width: 84px;
    height: 84px;
    top:-215px;
    border-radius: 100%;
    position: relative;
    box-shadow: 0 2px 9px rgba(33, 37, 41, 0.4);
}

.desktop-wrapper .options .option>div .icon-wrapper .icon1{background-image: url("../images/sq.files/you11.png");}
.desktop-wrapper .options .option>div .icon-wrapper .icon2{background-image: url("../images/sq.files/you2.png");}
.desktop-wrapper .options .option>div .icon-wrapper .icon3{background-image: url("../images/sq.files/you3.png");}
.desktop-wrapper .options .option>div .icon-wrapper .icon4{background-image: url("../images/sq.files/you4.png");}

.desktop-wrapper .options .option>div .icon-wrapper .category-icon:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat;
}

.desktop-wrapper .options .option>div .icon-wrapper.sb .category-icon {
    /*background-color: #0DAFE0;*/
}

.desktop-wrapper .options .option>div .icon-wrapper.ce .category-icon {
    background-color: #f2501f;
}

.options> :nth-child(1) {
    background-color: #515272;
    background-image: url("../images/sq.files/you1.png");
    background-position: center center;
    background-size: cover;
}

.options> :nth-child(2) {
    background-color: #6c3f31;
    background-image: url("../images/sq.files/you21.png");
    background-position: center center;
    background-size: cover;
}

.options> :nth-child(3) {
    background-color: #323119;
    background-image: url("../images/sq.files/you31.png");
    background-position: center center;
    background-size: cover;
}

.options> :nth-child(4) {
    background-color: #5d92cb;
    background-image: url("../images/sq.files/you41.png");
    background-position: center center;
    background-size: cover;
}

.mobile-wrapper {
    height: initial;
    max-width: 320px;
    margin: 0 auto;
}

.mobile-wrapper .options {
    position: relative;
    height: auto;
    max-width: none !important;
    flex-basis: 100% !important;
}

.mobile-wrapper .options .option {
    position: relative;
    overflow: hidden;
    background-size: auto 120%;
    background-position: center;
    transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
    color: #fff;
}

.mobile-wrapper .options .option>div {
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}

.mobile-wrapper .options .option>div .info-wrapper {
    z-index: 999;
}

.mobile-wrapper .options .option>div .info-wrapper .title {
    font-size: 1.5rem;
    text-shadow: 1px 2px 4px rgba(33, 37, 41, 0.5);
    text-transform: uppercase;
    line-height: 1;
    opacity: 1;
    position: relative;
    margin: 0 0 .5rem;
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.mobile-wrapper .options .option>div .info-wrapper .subtitle {
    color: white;
    font-size: .8rem;
    letter-spacing: .06rem;
    line-height: 1.125;
    margin: 0;
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    -webkit-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

.mobile-wrapper .options .option>div .info-wrapper .description {
    left: 0px;
    opacity: 1;
    margin-top: 1.5rem;
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    -webkit-transition-delay: 0.6s;
    -moz-transition-delay: 0.6s;
    transition-delay: 0.6s;
}

.mobile-wrapper .options .option>div .info-wrapper .description p {
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.mobile-wrapper .options .option>div .info-wrapper .ext-link {
    text-decoration: none;
    width: 6rem;
    color: #e9ecef;
    text-shadow: 1px 2px 4px rgba(33, 37, 41, 0.5);
    box-shadow: 2px 2px 4px rgba(33, 37, 41, 0.3);
    background: rgba(255, 255, 255, 0.1);
    padding: .35rem .75rem;
    position: relative;
    overflow: hidden;
    transition: all 0.2s linear 0s;
}

.mobile-wrapper .options .option>div .info-wrapper .ext-link:after {
    position: absolute;
    transition: .3s;
    content: '';
    width: 0;
    left: 0;
    bottom: 0;
    height: .15rem;
    background: rgba(255, 255, 255, 0.2);
}

.mobile-wrapper .options .option>div .info-wrapper .ext-link:hover {
    text-shadow: none;
    box-shadow: 3px 3px 8px rgba(33, 37, 41, 0.6);
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.mobile-wrapper .options .option>div .info-wrapper .ext-link:hover:after {
    left: 0;
    width: 100%;
}

.mobile-wrapper .options .option>div .icon-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 2rem 0 0;
    z-index: 999;
}

.mobile-wrapper .options .option>div .icon-wrapper .category-text {
    line-height: 40px;
    padding-left: .75rem;
}

.mobile-wrapper .options .option>div .icon-wrapper .category-icon {
    display: flex;
    align-items: flex-start;
    width: 32px;
    height: 32px;
    border-radius: 100%;
    position: relative;
    box-shadow: 0 2px 9px rgba(33, 37, 41, 0.4);
}

.mobile-wrapper .options .option>div .icon-wrapper .category-icon:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat;
    background-color: #fff;
    height: 16px;
    width: 16px;
}

.mobile-wrapper .options .option>div .icon-wrapper.sb .category-icon {
    background-color: #0DAFE0;
}

.mobile-wrapper .options .option>div .icon-wrapper.ce .category-icon {
    background-color: #f2501f;
}

.mobile-wrapper .options .option>div:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 101%;
    top: 0;
    left: 0;
    z-index: 1;
    background: rgba(52, 58, 64, 0.2);
    -webkit-transition-property: all;
    -moz-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
}

.container .row h4:first-of-type {
    text-align: center;
    margin: 0 auto;
    padding-bottom: 1rem;
}