@charset "utf-8";
:root{
    --color: #262626;
    --active-color: #682d7d;
    --border: 1px solid #fafafa;
    --margin: 30px;
    --max-width:1690px;
    --font-family:system-ui,-apple-system,BlinkMacSystemFont,'segoe ui',Roboto, Helvetica,Arial,sans-serif,'apple color emoji','segoe ui emoji','segoe ui symbol';
}

* {word-wrap:break-word;word-break:normal;box-sizing:border-box;outline: none;}
html{
    font-family: var(--font-family), system-ui;
    -webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;
    font-size:16px;
    min-width: 1300px;
    /*font-size: calc(100vw / 30);*/
}
body {
    background: #ffffff;
    font-family: var(--font-family), system-ui;
    color: var(--color);
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

/*	防止复制代码
body {-moz-user-select: none;-webkit-user-select: none;}
*/

header, section, footer, aside, nav, main, article, figure {
    display: block;margin:0;padding:0;border:0;
}
img,p,form {margin:0;padding:0;border:0;}
ul,li{list-style:none;padding:0;margin:0;}
h1,h2,h3 {margin:5px 0;padding:5px 0;}
input,textarea,button {
    font-family:system-ui,-apple-system,BlinkMacSystemFont,'segoe ui',Roboto, Helvetica,Arial,sans-serif,'apple color emoji','segoe ui emoji','segoe ui symbol';
    color: #000;
}

.float-l {float:left;}
.float-r {float:right;}
.display-hidden{display: none;}
.display-block{display: block;}
.clear {clear:both;font-size:0; line-height:0; height:0; visibility:hidden;}
.pointer{cursor: pointer;}

/*	链接样式	*/
a {color:var(--color);}
a:hover {text-decoration: none;color:var(--active-color);}
a:link,a:visited,a:active {text-decoration: none;}

a.white-link {color:#fff;}
a.white-link:hover {text-decoration:none; color:#f0ab49;}
a.white-link:link,a.white-link:visited,a.white-link:active {text-decoration:none;}


.mb{margin-bottom: var(--margin);}
.wrap {margin: 0 auto;width: 100%; max-width:var(--max-width);padding: 0 20px;}
.header {position: relative;width: 100%;height: 115px;background-color: #ffffff;}
.header .header-main{height: 115px;display: flex;flex-flow: row nowrap;justify-content: space-between;align-items: center;align-content: center;}
.header .header-main .logo {flex:none; width: 360px;height: 60px; background-image: url(../images/logo.png);background-size: contain;background-position: left center;background-repeat: no-repeat;}
.header .header-main .logo a{float: left; width: 100%; height: 100%; display: block;}

.header .header-main .nav {
    flex: auto;margin-left: 200px;
    display: flex;flex-flow: row nowrap;justify-content: space-between;align-items: center;
}
.header .header-main .nav .nav-ul {
    float: left; width: 100%;
    display: flex;flex-flow: row nowrap;justify-content: space-between;align-items: center;
}
.header .header-main .nav .nav-ul .nav-li {
    flex: auto;
    height: 115px; display: flex;flex-direction: column;justify-content: center;align-items: center;
}
.header .header-main .nav .nav-ul .nav-li .name {
    padding: 10px 0; position: relative;
}
.header .header-main .nav .nav-ul .nav-li .name:after{
    content: '';
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background-color: var(--active-color);
    transition: all .25s;
}
.header .header-main .nav .nav-ul .nav-li:hover .name:after{
    width: 100%;
}

.header .header-main .nav .nav-ul .nav-li:hover .name a{
    color:var(--active-color);
}
.header .header-main .nav .nav-ul .nav-selected .name:after{
    content: '';
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background-color: var(--active-color);
    transition: all .25s;
}
.header .header-main .nav .nav-ul .nav-selected .name a{
    color:var(--active-color);
}
.header .header-main .nav .nav-ul .nav-selected:after{
    content: '';
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background-color: var(--active-color);
    transition: all .25s;
}

.header .header-main .nav .nav-ul .drop-nav {
    display: none;
    position: absolute; z-index: 100;
    left: 0;
    background-color: rgba(255,255,255,.8);
    top: 115px; width: 100%; padding: 20px;
    overflow: hidden;
}
.header .header-main .nav .nav-ul .drop-nav ul {
    float: left; width: 100%;display: flex;flex-flow: row wrap;justify-content: center;align-items: center;
}
.header .header-main .nav .nav-ul .drop-nav ul li {padding: 5px 20px;}


.banner{float: left;width: 100%;overflow: hidden;}
.banner .swiper-slide{position: relative;}
.banner .swiper-slide .info {
    z-index: 10;background-color: rgba(0,0,0,0.1);
    position: absolute;width: 100%;height: 100%;top:0;left: 0; bottom: 0;
}
.banner .swiper-slide .info .main{
    color: #ffffff;
    width: 100%;height: 100%; max-width: var(--max-width); margin: 0 auto;
    display: flex;flex-flow: column nowrap;justify-content: center;align-items: flex-start;
}
.banner .swiper-slide .info .en-title{
    font-size:46px; text-transform: uppercase;font-weight: bold;
}
.banner .swiper-slide .info .title{
    font-size:26px;
}

.banner img{float: left;width: 100%;position: relative;z-index: 1;}

.i-about {
    margin-bottom: var(--margin);
    display: flex;flex-flow: row nowrap;justify-content: space-between;align-items: stretch;
    overflow: hidden;
}
.i-about .i-about-l {
    padding: 50px 100px 50px 0;
    width: 50%;display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
}
.i-about .i-about-l .title {width: 100%; display: flex;flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-end;overflow: hidden;}
.i-about .i-about-l .title b{
    font-size: 62px;
    font-weight: bold;
    font-stretch: normal;
    letter-spacing: 0;
    color: #333333;}
.i-about .i-about-l .title span{font-size: 16px;color: #666666;margin-left: 10px; margin-bottom: 20px;}
.i-about .i-about-l .name{
    width: 100%;font-size: 32px;
    padding: 30px 0;
    margin-bottom: 30px;
    line-height: 30px;
    color: var(--active-color);
    position: relative;
    overflow: hidden;
}
.i-about .i-about-l .name:after{
    position: absolute;
    z-index: 1;
    left: 0; bottom: 0; width: 100px; border-bottom: 5px solid var(--active-color);
    content: '';
}
.i-about .i-about-l .demo{
    margin-bottom: 30px;
    width: 100%;line-height: 30px;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    color: #666666;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;

}
.i-about .i-about-l .link{
    flex: none;
    padding: 0 56px; height: 56px;line-height: 54px; border-radius: 28px;
    color: var(--active-color); border: 1px solid var(--active-color);
    overflow: hidden;
}
.i-about .i-about-l .link:hover{
    background-color: var(--active-color); color: #ffffff;
}

.i-about .i-about-r {
    width: 50%;
}
.i-about .i-about-r img {float: left; width: 100%;object-fit: contain;}

.i-quick {
    float:left;width: 100%;margin-bottom: var(--margin);
    border:var(--border);
    display: flex;flex-flow: row nowrap;justify-content: space-between;align-items: center;
    overflow: hidden;
}

.i-quick .item{
    flex: auto;
    width: 25%;
    padding: 20px;
    border-right: var(--border);
    display: flex;flex-flow: row nowrap;justify-content: center;align-items: center;
    color: #333333;
}
.i-quick .item:last-child{
    border-right: 0;
}
.i-quick .item i{
    flex: none;color: #666666;
    width: 100px;height: 100px;
    line-height: 96px;font-size:40px;
    border: 2px solid #dbdbdb;text-align: center;
    border-radius: 50%;overflow: hidden;
}
.i-quick .item:hover i {
    border: 2px solid #ffffff;
    background-color: #ffffff;
    color:var(--active-color);
}
.i-quick .item .info{
    margin-left: 20px;
    flex: auto; display: flex;flex-flow: column nowrap;justify-content: space-between;align-items: flex-start;
}
.i-quick .item .info b{font-size: 24px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 30px;
    color: #333333;
}
.i-quick .item .info span{
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 30px;
    color: #666666;
}
.i-quick .item:hover{
    background-color:var(--active-color);
    color: #ffffff;
}
.i-quick .item:hover .info b,
.i-quick .item:hover .info span {
    color: #ffffff;
}

.i-new-wrap {
    width: 100%;
    background-color: #f5f5f5;padding: 30px 0;
    overflow: hidden;
}
.i-news {
    display: flex;flex-flow: row nowrap;justify-content: space-between;align-items: flex-start;
    overflow: hidden;
}
.i-news .i-news-l{
    position: relative;
    flex:none; width: 25%; margin-right: 30px; overflow: hidden;
}
.i-news .i-news-l img{float: left; width: 100%; }
.i-news .i-news-l .info{
    position: absolute;width: 100%; top: 0;left: 0;
    z-index: 1;
    padding: 30px;
    display: flex;flex-flow: column nowrap;justify-content: space-between;align-items: flex-start;
    overflow: hidden;
}

.i-news .i-news-l .info .title {
    position: relative;
    width: 100%; display: flex;flex-flow: row nowrap;
    justify-content: flex-start;align-items: flex-end;
    padding: 30px 0;
    margin-bottom: 30px;
    overflow: hidden;}
.i-news .i-news-l .info .title b{
    font-size: 62px;
    font-weight: bold;
    font-stretch: normal;
    letter-spacing: 0;
    color: #ffffff;}
.i-news .i-news-l .info .title span{font-size: 16px;color: rgba(255,255,255,.5);margin-left: 10px; margin-bottom: 20px;}
.i-news .i-news-l .info .title:after{
    position: absolute;
    z-index: 1;
    left: 0; bottom: 0; width: 100px; border-bottom: 5px solid rgba(255,255,255,.5);
    content: '';
}
.i-news .i-news-l .info .demo{
    margin-bottom: 30px;
    width: 100%;line-height: 30px;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    color: rgba(255,255,255,.8);
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;

}
.i-news .i-news-l .info .link{
    flex: none;
    width:60px;height: 60px;line-height: 56px;
    text-align: center;font-size: 40px;
    color: #ffffff; border: 2px solid #ffffff;
    overflow: hidden;
}
.i-news .i-news-l .info .link:hover{
    background-color: var(--active-color); color: #ffffff;
}

.i-news .i-news-r{flex:auto;overflow: hidden;}
.i-news .i-news-r .item {
    width: 100%; margin-bottom: var(--margin);
    display: flex;flex-flow: row nowrap;justify-content: space-between;align-items: stretch;
    background-color: #ffffff;
    overflow: hidden;
}
.i-news .i-news-r .item .image {
    flex: none; width:40%;
}
.i-news .i-news-r .item .image img{float: left; width: 100%;height: 100%; object-fit: cover;}

.i-news .i-news-r .item .info {
    flex: auto;
    margin-left: var(--margin);
    padding: 30px;
    display: flex;flex-flow: column nowrap;justify-content: space-between;align-items: flex-start;
    overflow: hidden;
}
.i-news .i-news-r .item .info .title {
    width: 100%; font-size: 24px;text-align: justify;line-height: 35px;font-weight: normal;margin-bottom: 10px;
}
.i-news .i-news-r .item .info .date {
    width: 100%; font-size: 14px;text-align: left; margin-bottom: 10px;color: #666666;
}
.i-news .i-news-r .item .info .demo {
    color:#666666;
    width: 100%; font-size: 16px;text-align: justify;line-height: 25px;font-weight: normal;margin-bottom: 20px;
}
.i-news .i-news-r .item .info .more {
    height:50px; line-height: 48px;padding: 0 50px;
    border-radius: 25px;border:1px solid var(--active-color);
    font-size: 16px;
    overflow: hidden;
}
.i-news .i-news-r .item .info:hover .more{
    background-color: var(--active-color);
    color: #ffffff;
}


.i-service {
    width: 100%;background-color: #ffffff;
    overflow: hidden;
}
.i-service .image-list {
    width: 100%; overflow: hidden;
}
.i-service .image-list .item {
    display: none;
    position: relative;overflow: hidden;
}
.i-service .image-list .item:first-child{display: block;}

.i-service .image-list .item .image {
    float: left; width: 100%;overflow: hidden;
}
.i-service .image-list .item .image img{
    float: left; width: 100%;overflow: hidden;
}
.i-service .image-list .item .info {
    /*backdrop-filter: blur(3px);*/
    background-color: rgba(0,0,0,.5);
    position: absolute;top: 0; width: 100%; height: 100%;
    left: 0; z-index: 1;
    overflow: hidden;
}
.i-service .image-list .item .info .wrap {
    width: 100%; height: 100%;
    display: flex;flex-flow: column nowrap;justify-content: center;
    align-items: center;color: #ffffff;
    overflow: hidden;
}
.i-service .image-list .item .info .icon {
    font-size: 40px;
}
.i-service .image-list .item .info .title {
    font-size: 36px; margin-bottom: 20px;
}
.i-service .image-list .item .info .demo {
    line-height: 30px;
    font-size: 16px;margin-bottom: 20px; text-align: center;
}
.i-service .image-list .item .info .more {
    height:50px; line-height: 48px;padding: 0 50px;
    border-radius: 25px;border:1px solid var(--active-color);
    background-color: var(--active-color);
    color: #ffffff;
    font-size: 16px;
    overflow: hidden;
}

.i-service .icon-box {
    width: 100%;display: flex;flex-flow: row nowrap;justify-content: center;align-items: center;
}
.i-service .icon-box .item {
    color:#868686;
    padding: 20px 10px; margin: 0 30px; position: relative;
    display: flex;flex-flow: column nowrap;justify-content: center;align-items: center;
}
.i-service .icon-box .item .icon{
    margin-top: 20px;
    font-size: 30px;margin-bottom: 20px;
}
.i-service .icon-box .item .name{
    font-size: 18px; margin-bottom: 20px;
}
.i-service .icon-box .item:hover {color:var(--active-color);}
.i-service .icon-box .item:after {
    content: '';
    position: absolute;width: 0;height: 4px; background-color: var(--active-color);
    z-index: 1;left: 0; top: 0;transition: all .25s;
}
.i-service .icon-box .item:hover:after{width: 100%;}
.i-service .icon-box .active{color: var(--active-color);}
.i-service .icon-box .active:after {
    content: '';
    position: absolute;width: 100%;height: 4px; background-color: var(--active-color);
    z-index: 1;left: 0; bottom: 0;transition: all .25s;
}
.i-partner-wrap {
    width: 100%;
    background-color: #f5f5f5;padding: 30px 0;
    overflow: hidden;
}
.i-partner {
    display: flex;flex-flow: column wrap;justify-content: flex-start;align-items: flex-start;
}

.i-partner .title {
    position: relative;
    width: 100%; display: flex;flex-flow: row nowrap;
    justify-content: flex-start;align-items: flex-end;
    padding: 30px 0;
    margin-bottom: 0;
    overflow: hidden;}
.i-partner .title b{
    font-size: 62px;
    font-weight: bold;
    font-stretch: normal;
    letter-spacing: 0;
    color: rgb(51, 51, 51);}
.i-partner .title span{font-size: 16px;color: rgba(51, 51, 51, .5);;margin-left: 10px; margin-bottom: 20px;}
/*

.i-partner .title:after{
    position: absolute;
    z-index: 1;
    left: 0; bottom: 0; width: 100px; border-bottom: 5px solid rgba(255,255,255,.5);
    content: '';
}
*/

.i-partner-list {
    width: 100%;
    display: flex;flex-flow: row wrap;justify-content: flex-start;align-items: flex-start;
}
.i-partner-list .item{
    flex: none; width: 20%;padding: 10px;
}
.i-partner-list .item img {float: left; width: 100%;height: 120px;}


.bottom {
    width: 100%;padding: 30px 0;
    border-bottom: 1px solid rgb(67, 67, 67);
    background: rgb(51, 51, 51);
    overflow: hidden;
}
.bottom .bottom-main{
    display: flex;flex-flow: row nowrap;justify-content:space-between;align-items: flex-start;
    overflow: hidden;
}
.bottom .bottom-main .logo{
    flex: none; width: 300px;
}
.bottom .bottom-main .logo img{
    float: left; width: 100%;
}

.bottom .bottom-main .nav {
    flex: auto;
    margin:0 50px;
    display: flex;flex-flow: row nowrap;justify-content: space-between;align-items: flex-start;
    overflow: hidden;
}

.bottom .bottom-main .nav .item{
    flex: auto;
    margin:0 20px; font-size: 14px;
    display: flex;flex-flow: column nowrap;justify-content: space-between;align-items: flex-start;
    line-height: 30px;
}
.bottom .bottom-main .nav .item b{width: 100%;font-size: 18px;color:#fffefe;}
.bottom .bottom-main .nav .item p{
    width: 100%; padding-left: 1em; font-size:14px;
    display: flex;flex-flow: column nowrap;justify-content: space-between;align-items: flex-start;
}
.bottom .bottom-main .nav .item p a{color:#959595;}
.bottom .bottom-main .nav .item p a:hover{color:#cccccc;}

.bottom .bottom-main .bottom-qrcode {
    display: flex;flex-flow: row wrap;justify-content:flex-start;align-items: flex-start;
}
.bottom .bottom-main .bottom-qrcode .item {flex: none; width: 100px; margin: 0 10px;}
.bottom .bottom-main .bottom-qrcode .item .image{float: left; width: 100%; overflow: hidden;}
.bottom .bottom-main .bottom-qrcode .item .image img{float: left; width: 100%; overflow: hidden;}
.bottom .bottom-main .bottom-qrcode .item .name{float: left;color:#ffffff; font-size: 14px; width: 100%;text-align: center; height: 35px; line-height:35px; overflow: hidden;}

.bottom-line {
    width: 100%;padding: 30px 0;
    text-align: center;color:rgba(255,255,255,.5);
    border-bottom: 1px solid rgb(67, 67, 67);
    background: rgb(51, 51, 51); font-size: 14px;
    overflow: hidden;
}
.bottom-line a{color:rgba(255,255,255,.5);}

.go-top{
    position: fixed;z-index:999;
    right:20px;bottom:20px;
    width: 40px;height: 40px;line-height: 40px;
    text-align: center;cursor:pointer;
    background-color: rgba(0,0,0,.5);color: #ffffff;font-size:20px;
    overflow: hidden;}
.go-top:hover{background-color: #005775;color: #ffffff;}

/* 分页 */
.page{float: left;width: 100%;margin: 20px 0;overflow: hidden;}
.page .pagination{display: flex;flex-flow: row wrap;justify-content: center;align-items: center;align-content: center;}
.page ul li{cursor:pointer;background-color:#dbdbdb;color:#ffffff;font-size:14px;height: 30px;line-height: 30px;margin:5px;border-radius:2px;overflow: hidden;}
.page ul li:hover{background-color: var(--active-color);color: #ffffff;}
.page ul li a{float:left;width:100%;color: #ffffff;padding:0 10px;}
.page ul li span{padding:0 10px;}
.page .disabled{background-color: #484848;color: #ffffff;}
.page .active{background-color: var(--active-color);color: #ffffff;}

.empty {
    width: 100%; padding: 50px;
    display: flex;flex-flow: column nowrap;justify-content: center;align-items: center;
}
.empty .image {width: 200px;}
.empty .image img{float:left; width: 100%;}
.empty .name {font-size: 18px; color:#868686;padding: 20px;}


.page-nav {
    width: 100%;margin-bottom: var(--margin);
    background-color: #fafafa;
    padding: 20px; display: flex;flex-flow: row nowrap;justify-content: space-between;align-items: center;
    box-shadow: 0 0 5px 5px rgba(0,0,0,.1);
}
.page-nav .current {
    padding: 10px 0;font-size: 16px;text-align: left;
}
.page-nav .category {
    flex: auto;
}
.page-nav .category ul {
    width: 100%; display: flex;flex-flow: row wrap;justify-content: flex-end;
}
.page-nav .category ul li{
    padding: 10px 10px;
    margin-left: 20px;font-size: 16px;position: relative;
}

.page-nav .category .selected a{
    color: var(--active-color);
}
.page-nav .category .selected:after{
    content: '';
    width: 0;
    position: absolute;
    left: 50%; bottom: 0;border-bottom: 2px solid var(--active-color);
    animation: border-width 1s infinite;
}
@keyframes border-width {
    from {width: 0;left: 50%;}
    to {width: 100%;left: 0;}
}
.flex-column{
    display: flex;flex-flow: column nowrap;justify-content: center;align-items: center;align-content: center;
}
.flex-row-nowrap{
    display: flex;flex-flow: row nowrap;justify-content: space-between;align-items: flex-start;
}
.page-main {
    margin: 0 auto; width: 100%; max-width: var(--max-width);
    padding: 20px;
}
.page-main .content-title {font-size: 40px; line-height:1.5;margin-bottom: 20px;}
.page-main .content-date{
    font-size: 16px; line-height:1.5;margin-bottom: 20px;color:var(--color);
    display: flex;flex-flow: row nowrap;justify-content: center;align-items: center;
    overflow: hidden;
}

.page-main .content-date span{
    margin: 0 10px;
    display: flex;flex-flow: row nowrap;justify-content: center;align-items: center;
    height: 40px; line-height: 40px;border-radius: 20px;padding-right: 20px;background-color: var(--active-color); color:#ffffff; overflow: hidden;
}
.page-main .content-date span i {
    margin: 5px 10px 5px 5px;
    width: 30px; height: 30px;line-height: 30px;text-align: center; background-color: #ffffff; color:var(--active-color); border-radius: 50%; overflow: hidden;}


.page-main .content-demo{
    width: 100%; border: 1px dashed var(--active-color);
    padding: 20px 20px 20px 50px;text-align: justify;
    background-color: #fafafa; font-size: 14px; line-height: 25px;
    border-radius: 4px;margin-bottom: 20px;color:#666666;
    position: relative;
    overflow: hidden;
}
.page-main .content-demo:before{
    content: '“';
    font-size: 50px;position: absolute;top: 20px; left: 20px;
}

.page-main .content-text{
    width: 100%; text-align: justify;font-size: 16px;line-height: 30px;margin-bottom: 20px;
}
.page-main .content-text img{max-width: 100%;}

.page-main .page-per-next{
    width: 100%; border-top: 2px solid #fafafa;padding-top: 20px; margin-bottom: 20px;
}
.page-main .page-per-next ul {
    width: 100%;display: flex;flex-flow: row nowrap;justify-content: center;align-items: center;
}
.page-main .page-per-next ul li{
    padding: 0 20px;color:#868686; font-size: 14px;
}
.page-main .page-per-next ul li a {color: #868686;}
.page-main .page-per-next ul li a:hover{color:var(--active-color);}
.page-main .map{
    width: 100%; height: 500px; border:1px solid #dbdbdb; border-radius: 5px; overflow: hidden;
    margin-bottom: 20px;
}

.page-main .image-list {
    float: left; width: calc(100% + 40px);
    margin-left:-20px;display: flex;flex-flow: row wrap; justify-content: flex-start;align-items: center;
    overflow: hidden;
}
.page-main .image-list .item {flex: none; width: calc(25% - 40px);
    padding: 20px;
    background-color: #ffffff;border-radius: 2px;
    border: 1px solid #dbdbdb;margin: 20px;overflow: hidden;}
.page-main .image-list .item .image{float:left; width: 100%;margin-bottom: 10px; overflow: hidden;}
.page-main .image-list .item .image img{float:left; width: 100%;}
.page-main .image-list .item .title{float:left;width: 100%;
    font-weight: normal;
    text-align: center; height: 40px;line-height: 40px; overflow: hidden;}
.page-main .image-list .item:hover {
    background-color: var(--active-color);
    color: #ffffff;
}
.page-main .image-list .item:hover a{color:#ffffff;}

.page-main .page-item{
    flex: auto; padding: 30px 0;
    width: 100%;display: flex;flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;overflow: hidden;
    border-bottom: 1px dashed #fafafa;
}

.page-main .page-item .image{
    border: 1px solid #fafafa;
    flex: none; width: 30%; margin-right: 20px;overflow: hidden;
}
.page-main .page-item .image img{float: left; width: 100%; object-fit: cover;}


.page-main .page-item .info {
    flex: auto;
    margin-left: var(--margin);
    padding: 30px;
    display: flex;flex-flow: column nowrap;justify-content: space-between;align-items: flex-start;
    overflow: hidden;
}
.page-main .page-item .info .title {
    width: 100%; font-size: 24px;text-align: justify;line-height: 35px;font-weight: normal;margin-bottom: 20px;
}
.page-main .page-item .info .date {
    width: 100%; font-size: 16px;text-align: left; margin-bottom: 20px;color: #666666;
}
.page-main .page-item .info .demo {
    color:#666666;
    width: 100%; font-size: 16px;text-align: justify;line-height: 25px;font-weight: normal;margin-bottom: 20px;
}
.page-main .page-item .info .more {
    height:40px; line-height: 38px;padding: 0 40px;
    border-radius: 25px;border:1px solid var(--active-color);
    font-size: 16px;
    overflow: hidden;
}
.page-main .page-item .info:hover .more{
    background-color: var(--active-color);
    color: #ffffff;
}

.image-scale{transition: all .5s;object-fit: cover;}
.image-scale:hover{transform: scale(1.2);}
.page-main .page-service-1 .image{order:1;}
.page-main .page-service-1 .info{order:2;}
.page-main .page-service-0 .image{order:2;}
.page-main .page-service-0 .info{order:1;}
.page-main .page-service{
    flex: auto; padding:0;
    width: 100%;display: flex;flex-flow: row nowrap;
    justify-content: space-between;
    align-items: stretch;overflow: hidden;
}
.page-main .page-service .image{
    flex: none; width: 50%;overflow: hidden;
}
.page-main .page-service .image img{float: left; width: 100%; object-fit: cover;}
.page-main .page-service .info {
    background-color: #ffffff;
    flex: none; width: 50%;
    padding: 80px;
    display: flex;flex-flow: column nowrap;justify-content: center;align-items: flex-start;
    overflow: hidden;
}
.page-main .page-service .info .title {
    width: 100%; font-size: 24px;text-align: justify;line-height: 35px;font-weight: normal;margin-bottom: 20px;
}
.page-main .page-service .info .date {
    width: 100%; font-size: 16px;text-align: left; margin-bottom: 20px;color: #666666;
}
.page-main .page-service .info .demo {
    color:#666666;
    width: 100%; font-size: 16px;text-align: justify;line-height: 25px;font-weight: normal;margin-bottom: 20px;
}
.page-main .page-service .info .more {
    height:40px; line-height: 38px;padding: 0 40px;
    border-radius: 25px;border:1px solid var(--active-color);
    font-size: 16px;
    overflow: hidden;
}
.page-main .page-service .info:hover .more{
    background-color: var(--active-color);
    color: #ffffff;
}

.x-msg{
    float: left;width: 100%;margin-top: 100px;
    display: flex;flex-flow: column nowrap;
    align-content: center;align-items: center;
    overflow: hidden;}
.x-msg .ico-success{margin-top:30px;padding:0;font-size:200px;color: #198754;}
.x-msg .ico-error{margin-top:30px;padding:0;font-size:200px;color: #dc3545;}
.x-msg .msg-box{padding:20px;width:100%;text-align: center;color: #adb5bd;}
.x-msg .btn-box{padding:20px;width:100%;font-size:16px;}