@charset "UTF-8";

@media screen and (max-width: 1800px){
    .container{
        width: 95%;
    }
    .container .center .swiper-slide > div .left div:nth-of-type(2){
        width: 85%;
    }
    .container .right .r-left .line{
        width: 30%;
    }
}

@media screen and (max-width: 1700px){
    #guide .g-nav{
        width: 95%;
    }
    .container .right .swiper-container-horizontal>.swiper-pagination-bullets,
    .container .right .swiper-pagination-custom,
    .container .right .swiper-pagination-fraction{
        bottom: 40px;
    }
    .container .right .swiper-button-next, .container .right .swiper-button-prev{
        bottom: 37px;
    }
    .container .right .r-left .line{
        bottom: 54px;
    }
}

@media screen and (max-width: 1600px){
    .container .right .r-left .line{
        width: 25%;
    }
}

@media screen and (max-width: 1440px){
    .container .right .r-left .line{
        width: 20%;
    }
    .container .right .r-right div p{
        font-size: 12px;
    }
}

@media screen and (max-width: 1250px){
    .b-bottom > div{
        width: 95%;
    }
}

@media screen and (max-width: 1050px){
    .container .center .swiper-slide > div .left div:nth-of-type(2){
        width: 83%;
    }
}

@media screen and (max-width: 1024px){
    .container .right .swiper-container-horizontal>.swiper-pagination-bullets,
    .container .right .swiper-pagination-custom,
    .container .right .swiper-pagination-fraction {
        bottom: 104px;
        left: 65px;
    }
    .container .right .r-right div h3,
    .container .center .left-bottom h3,
    .container > .left > div h3{
        font-size: 15px;
    }
    .container .center .left-bottom p,
    .container > .left > div p{
        font-size: 12px;
    }
}

@media screen and (max-width: 768px){
    header{
        position: relative;
    }
    #online .message {
        right: 15px;
    }
    #online .service {
        right: 145px;
    }
    .container > div{
        float: none;
        width: 100%;
        margin-bottom: 20px;
    }
    .container > div + div{
        margin-left: 0;
    }
    .container{
        width: 70%;
    }
    .container .right .swiper-container-horizontal>.swiper-pagination-bullets, .container .right .swiper-pagination-custom, .container .right .swiper-pagination-fraction {
        bottom: 40px;
    }
    .container > .left{
        box-sizing: border-box;
        padding-top: 40px;
    }
    .container > .left > p{
        margin: 0 auto 0;
    }
    .container .right .r-left .line{
        display: none;
    }
    .container > .right{
        height: 270px;
    }
}

@media screen and (max-width: 425px){
    #guide .g-nav .logo{
        width: 100px;
    }
    #guide .g-right{
        display: none;
    }
    #guide .g-title h2{
        font-size: 20px;
    }
    #guide .g-title p{
        font-size: 12px;
    }
    #guide .right-bottom {
        right: 35px;
        bottom: 30px;
    }
    #online{
        width: 95%;
    }
    .container {
        width: 95%;
    }
    .banner .swiper-container2 .swiper-container-horizontal>.swiper-pagination-bullets,
    .banner .swiper-container2 .swiper-pagination-custom,
    .banner .swiper-container2 .swiper-pagination-fraction{
        bottom: 10px;
    }
    .r-bottom{
        bottom: 20px;
    }
    .b-bottom{
        display: none;
    }
    .container .right .swiper-container-horizontal>.swiper-pagination-bullets,
    .container .right .swiper-pagination-custom,
    .container .right .swiper-pagination-fraction {
        left: 35px;
    }
    #online a{
        height: 25px;
        line-height: 25px;
    }
    .container{
        padding: 30px 0;
    }
}
@media screen and (max-width: 375px){
    .container > .right {
        height: 250px;
    }
}

@media screen and (max-width: 320px){
    #online a{
        width: 80px;
    }
    #online .service {
        right: 120px;
    }
    .container > .right {
        height: 220px;
    }
}