@charset "utf-8";
/* CSS Document */

#solution{position:relative; margin:0 auto;overflow:hidden;transition: all .35s; }
#solution.active {transform: translateX(-220px);}

#solution>.container{ position:relative;z-index:1;margin:0 auto;}
#solution>.container>.item{ position:absolute;z-index:96;}
#solution>.container>.item>a{display:block; position:relative;}
#solution>.container>.item>a .con{ position:relative;display:inline-block; background:#00428E;padding:10px 25px; border-radius:3px;animation: fadeInUp .5s; animation-timing-function: ease-in; transition:all .35s;}
#solution>.container>.item>a .con:after{ position:absolute;z-index:5; left:50%; bottom:-6px; margin-left:-6px; width:0;height:0;border-right:6px solid transparent;border-left:6px solid transparent; border-top:6px solid #00428E;content:'';transition:all .35s;}
#solution>.container>.item>a .con>.tit{ padding-top: 0;font-size:1.6rem; color:#fff; text-align:center;}
#solution>.container>.item>a .spot{ position:absolute;z-index:6; left:50%;bottom:-25px; margin-left:-5px; width:10px; height:10px; background:#00428E; border-radius:10px; animation: scaled-rect 1s infinite; animation-timing-function: ease-in-out;}
#solution>.container>.item>a .spot:before {content: "";box-sizing: border-box;width: 40px; height: 40px;position: absolute; left: 50%; top: 50%; margin-top: -20px; margin-left: -20px; border-radius: 50%; box-shadow: 0 0 6px 1px #00428E; transform: scale(0); opacity: 1; will-change: transform, opacity;}
#solution>.container>.item>a:hover .con{background:#444;}
#solution>.container>.item>a:hover .con:after{border-top:6px solid #444;}
#solution>.container>.item>a:hover .spot:before{animation: out-circle 1s infinite;animation-timing-function: ease-in;}
#solution>.container>.city{ text-align:left;margin:0 auto;}
#solution>.container>.city>img{width:100%;height:auto;}


#solution .view{ position:relative; padding-top:50px; margin:0 auto;}
#solution .view>.nav{ position:relative;z-index:99; top:0; padding-top:50px; width:160px; text-align:right;}
#solution .view>.nav-active{top: 90px;}
#solution .view>.nav>ul{display:block;margin:0 auto;}
#solution .view>.nav>ul>li{display:block; font-size:1.6rem;}
#solution .view>.nav>ul>li a{display:block; padding:10px;}
#solution .view>.nav>ul>li.A{ background:#00428E; border-radius: 3px; }
#solution .view>.nav>ul>li.A a{ color:#fff;}

#solution .view>.container{width:84.8%; text-align:left; border-left:1px solid #eee;}
#solution .view>.container .title{font-size:3.6rem; font-weight: bold; color:#00428E;}
#solution .view>.container .content{margin:0 auto;padding:50px 0;}
#solution .view>.container>.plan{padding-left:5%;}
#solution .view>.container>.plan .tag{ margin-bottom:30px;}
#solution .view>.container>.plan .tag>.tit{ position:relative; font-size:1.8rem; color:#444; background:#eee; border-radius: 3px;overflow: hidden; padding:15px 30px;}
#solution .view>.container>.plan .tag>.tit:after{position:absolute;z-index:2; left:0;top:0; width: 4px;height: 100%; background: #00428E; content:'';}
#solution .view>.container>.plan .tag>.con{padding:20px; text-align:left; font-size:1.4rem; line-height:25px; color:#666;}
#solution .view>.container>.plan .tag>.con img{max-width:100%;height:auto;}
#solution .view>.container>.related{ padding:5% 0 0 5%; border-top:1px solid #eee;}
#solution .view>.container>.related .swiper-slide{border-right:1px dashed #eee;}
#solution .view>.container>.related .swiper-pagination{ position:relative!important; padding:20px 0;}
#solution .view>.container>.related .swiper-container-horizontal>.swiper-pagination-bullets, #solution .view>.container>.related .swiper-pagination-custom, #solution .view>.container>.related .swiper-pagination-fraction {bottom: 0px!important;}
#solution .view>.container>.related .swiper-pagination-bullet-active {background:#00428E!important;}
#solution .view>.container>.related .img{padding:50px; text-align:center;}
#solution .view>.container>.related .img>img{ width:100%;height:auto;}
#solution .view>.container>.related .tit{ padding-left:50px; text-align:left;font-size:1.8rem; color:#666;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
#solution .view>.container>.related .tit_sub{ padding-left:50px; text-align:left;font-size:1.4rem; color:#999;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
#solution .view>.container>.related .more{ padding:10px 50px; color:#00428E;font-size:1.4rem;}
#solution .view>.container>.related .more>img{display:inline-block; margin-left:6px; height:12px; width:auto; transition:all .35s;}
#solution .view>.container>.related a:hover .more>img{ padding-left:10px;}


@media only screen and (max-width: 1200px){

    #solution .view>.container{width:80%;}

}


@media only screen and (max-width: 1080px){

    #solution .view{padding: 0;}
    #solution .view>.nav{ left:0;width:100%; padding:20px; margin-bottom: 20px; background: rgba(53,59,73,1); text-align:left;}
    #solution .view>.nav-active{top: 78px;}
    #solution .view>.nav>ul{display:block;margin:0 auto; text-align: center; }
    #solution .view>.nav>ul>li{position:relative; display: inline-block;vertical-align: top; text-align:center;}
    #solution .view>.nav>ul>li a{display:block;  padding:5px 15px; color: #fff; }
    #solution .view>.nav>ul>li.A{ background:rgba(255,255,255,1); }
    #solution .view>.nav>ul>li.A a{ color:rgba(53,59,73,1);}
    #solution .view>.nav>ul>li:after{ display: none;}
    #solution .view>.nav>ul>li:first-child:after{opacity:0;}
    #solution .view>.container{ float:none; width:100%; border-left:0;}
    #solution .view>.container>.plan{padding-left:0;}
    #solution .view>.container .title{font-size:24px;}
    #solution .view>.container>.plan .tag>.tit{ font-size:16px;}

    #solution .container>.item>a .con{ padding:8px 20px;}
    #solution .container>.item>a .con>.tit{ font-size:1.4rem;}

}

@media only screen and (max-width: 960px){
    #solution .container>.item>a .con{ padding:4px 15px;}
    #solution .container>.item>a .con>.tit{ font-size:1.2rem;}
    #solution .container>.item>a .spot{ bottom:-18px; margin-left:-4px; width:8px; height:8px;}

}

@media only screen and (max-width: 780px){

    #solution .view>.nav-active{top: 58px;}
}

@media only screen and (max-width: 640px){

    #solution .container{ width: 86%;margin: 0 auto; }
    #solution .container>.item{ position:relative; float: left; width: 48%; margin:0 auto 15px auto; left:0 !important; top:0 !important;}
    #solution .container>.item:nth-child(even){float: right;}
    #solution .container>.item>a .con{ position:relative;display:block; background:#00428E;padding:16px;}
    #solution .container>.item>a .con:after{ display:none;}
    #solution .container>.item>a .con>.tit{ float: none; width:100%; font-size: 1.7rem;color:#fff; text-align:center;}
    #solution .container>.item>a .spot{ display:none;}
    #solution .container>.item>a .spot:before { display:none;}
    #solution .container>.city{opacity:.4; transform:scale(1.6);}

    #solution .view>.container .title{font-size:20px;}
}

@media only screen and (max-width: 480px){

    #solution .container>.item{ float: none; width: 100%;;}
    #solution .container>.item:nth-child(even){float: none;}

}

@media only screen and (max-width: 420px){

    #solution>.view>.nav>ul>li{ font-size:12px;}
    #solution>.view>.nav>ul.n5>li{ font-size:12px;}
    #solution>.view>.nav>ul.n6>li{ font-size:12px; }


}
@keyframes scaled-rect {
    0%, to {
        transform:translateZ(0) scale(1.2) rotate(0);
        -moz-transform:translateZ(0) scale(1.2) rotate(.02deg)
    }
    50% {
        transform:translateZ(0) scale(.8) rotate(0);
        -moz-transform:translateZ(0) scale(.8) rotate(.02deg)
    }
}

@keyframes out-circle {
    0% {
        transform:scale(0);
        -moz-transform:scale(0) rotate(.02deg);
        opacity:1
    }
    70% {
        opacity:1
    }
    to {
        transform:scale(1);
        -moz-transform:scale(1) rotate(.02deg);
        opacity:0
    }
}