@import url("./animate.min.css");
@import url("../../assets/libs/font-awesome/css/font-awesome.min.css");
@import url("../../assets/libs/bootstrap-select/dist/css/bootstrap-select.min.css");
@import url("../../assets/libs/bootstrap-table/dist/bootstrap-table.min.css");

html{-webkit-text-size-adjust: 100%;}
@font-face {
    font-family: 'Wingdings';
    font-style: normal;
    font-weight: normal;
    src: local('Wingdings'), url('wingding.woff') format('woff'),
    url('wingding.ttf') format('truetype');
}
.hidden {
    display: none !important;
}

.btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 13px;
    line-height: 1.42857143;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.btn-group,
.btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
    position: relative;
    float: left;
}
.open > .dropdown-menu {
    display: block;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 13px;
    text-align: left;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
}
.caret{ background: url("../image/down.png") no-repeat; width: 20px; height: 20px;  position: absolute; right: 20px; top:50%;}
.bootstrap-select .dropdown-toggle:focus{ outline: none !important;}
.bs-searchbox .form-control{ font-size: 18px;}
.bootstrap-select.btn-group .dropdown-menu li a{ display: block; font-size: 18px;
    -webkit-transition: background-color 0.1ms ease-in-out, color 0s ease-in-out, border 0s ease-in-out;
    transition: background-color 0.1ms ease-in-out, color 0s ease-in-out, border 0s ease-in-out, opacity 0s ease-in-out;
}
.bootstrap-select.btn-group .dropdown-menu li a:hover{ background-color: var(--bgColor3); color: #fff;}
.bootstrap-select.btn-group .dropdown-toggle .caret{ top: 32%;}
:root {
    --bgColor: #ff4f00;
    --bgColor1: #0047d1;
    --bgColor3: rgb(22, 22, 26);
    --bgColor4: rgba(201,11,13, 1);
    --bgColor5: rgba(215,15,32, 1);
    --black: #000000;
    --black-3: #333333;
    --black-alpha-1: rgba(0, 0, 0, 0.1);
    --black-alpha-2: rgba(0, 0, 0, 0.2);
    --black-alpha-4: rgba(0, 0, 0, 0.4);
    --black-alpha-6: rgba(0, 0, 0, 0.6);
    --black-alpha-8: rgba(0, 0, 0, 0.8);
}

* {
    margin: 0;
    padding: 0;
    /*-webkit-transition: background-color .35s ease-in-out, color .35s ease-in-out, border .35s ease-in-out;*/
    /*transition: background-color .35s ease-in-out, color .35s ease-in-out, border .35s ease-in-out, opacity .35s ease-in-out;*/
}

*, *::before, *::after {
    box-sizing: border-box
}

/*body { font-size: 0; color: #333; font-family:"微軟雅黑", Arial, Helvetica, sans-serif , Microsoft YaHei;}*/
body {
    color: #000;
    background: #fff;
    font-family: "Microsoft JhengHei", "微軟雅黑", sans-serif, Arial;
    min-height: 100vh;
}
img{ display: block}
a {
    text-decoration: none;
}

a:hover {
    color: #000
}

em {
    font-style: normal;
}

li {
    list-style: none;
}

.downimg {
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url(../image/down0.png) right center no-repeat;
    background-position: 96% center !important;
}

.dd-flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex
}

.dd-flex-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch
}

.dd-flex-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch
}

.dd-justify-start {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.dd-justify-end {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.dd-justify-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.dd-justify-between {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.dd-justify-around {
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around
}

.dd-align-start {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start
}

.dd-align-end {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end
}

.dd-align-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.dd-align-stretch {
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch
}

.dd-align-baseline {
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline
}

.dd-nowrap {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
}

.dd-wrap {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.dd-item {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}
.t-first::first-letter  {
    color: var(--bgColor4) !important;
}
.img100 {
    display: inline-block;
    width: 100%;
    height: auto;
}

.ml10 {
    margin-left: 10px;
}
#toast-container{ display: none !important;;}
button,
input {
    border: none;
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    outline: none
}

.input1 {
    width: 100%;
    height: 52px;

    border-radius: 10px;
    text-indent: 40px;
    font-size: 18px;
    font-weight: 400;
    color: #000;
    line-height: 26px;
    position: relative;
    background-color: rgb(228, 228, 228);
    border: 2px solid #fff;
    background-repeat: no-repeat;
    background-position: 10px center;
    font-family: "Microsoft JhengHei", "微軟雅黑", sans-serif, Arial;
}

.input1::placeholder, .input2::placeholder, textarea::placeholder, textarea::-moz-placeholder, textarea::-ms-input-placeholder {
    color: #332333
}

.input1:focus, .input2:focus {
    background-color: #fff;
    border: 2px solid var(--bgColor1);
}

.nosan {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: none;
    outline: none;
}

.nosan:focus {
    border-color: rgb(0, 78, 162);
}

.input2 {
    width: 100%;
    height: 52px;
    border-radius: 10px;
    padding-left: 20px;
    font-size: 18px;
    font-weight: 400;
    color: #212122;
    line-height: 26px;
    position: relative;
    border: 2px solid #fff;
    background: #fff;
    background-repeat: no-repeat;
    background-position: 95% center;
}
header .nav dl.mobilelang{ display: none;}
header .nav div.header-r{ display: none;}
.cqcx-box {
    height: 88px
}
.cqcx-box select{ width: 320px;}
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn){ width: 320px;}
.cqcx-l .bs-caret{ display: none}
.iconstart {
    background-image: url("../image/start.png");
}

.iconend {
    background-image: url("../image/end.png");
}

.iconjob {
    background-image: url("../image/about/job.png");
    background-size: 30px;
}

.iconarea {
    background-image: url("../image/area.png");
}

.icondown {
    background-image: url("../image/down.png");
}
.iconsearch{ background-image: url("../image/vector.png");}
.button1 {
    width: calc(100% - 116px);
    display: block;
    background: #fff;
    border-radius: 50px;
    border: 2px solid var(--bgColor1);
    opacity: 1;
    font-size: 16px;
    color: #000;
    padding: 6px 25px;
    margin: 20px auto 0;
    font-weight: bold;
}

.button1:hover {
    background: var(--bgColor);
    border: 2px solid var(--bgColor);
    color: #fff;
}

.button3{
    width: calc(100% - 116px);
    display: block;
    border-radius: 20px;
    border:2px solid #000;
    cursor: pointer;
    opacity: 1;
    font-size: 16px;
    color: #212122;
    padding: 6px 25px;
    margin: 20px auto 0;
    font-weight: bold;
}
.button3:hover{
    border:2px solid var(--bgColor1);
}
.more { position: absolute; bottom: 40px; right: 2%; background: url("../image/jt.png") no-repeat rgba(255,255,255,0.8); background-size: 30px;
    background-position: 120px center; z-index: 9; height: 50px; line-height: 50px; color: #000;
    width: 180px; border: 1px solid #000; border-radius: 10px; text-align: left; padding:0 10px; font-weight: normal;
}
.more:hover { background-position: 130px center; background-color: #fff;}


input[type=radio] {
    cursor: pointer;
    display: none;
    height: auto;
    margin-bottom: 0;
    padding: 0;
    width: auto;
}

input[type=radio] + label {
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.6rem;
    position: relative;
}

input[type=radio] + label:before {
    -webkit-margin-end: 1rem;
    border: 0.1rem solid #aca39a;
    border-radius: 50%;
    /*content: "";*/
    cursor: pointer;
    height: 20px;
    margin-top: 5px;
    margin-inline-end: 1rem;
    min-width: 20px;
    vertical-align: middle;
    width: 20px;
}

input[type=radio]:checked + label:after {
    background: var(--bgColor);
    border-radius: 50%;
    /*content: "";*/
    height: 10px;
    left: 5px;
    position: absolute;
    top: 10px;
    width: 10px;
}
input[type=radio]:checked + label{ color: #fff;}
.title1 {
    text-align: center;
    position: relative;
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 38px;
    color: #000;
}
.title1 span{ border-radius: 50px; background: rgb(245,245,245); text-align: center; color: var(--bgColor); padding: 10px 44px;}
.title1 span em{ color: #000; }
.flc::first-letter{ color: var(--bgColor1)}
.flc1::first-letter{ color: var(--bgColor)}
.flc2::first-letter{ color: #000 !important;;}



.mt1440 {
    width: 1440px;
    margin: 0 auto;
    position: relative;
}

.mt1200 {
    width: 1200px;
    margin: 0 auto;
    position: relative;
}
.mt820{ width: 820px; margin: 0 auto; position: relative;}
.mt900 {
    width: 900px;
    margin: 0 auto;
    position: relative;
}
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 999999;
    height: 66px;
}
header .logo{ position: relative; top: 6px; left: 80px;}
header .logo a{
    background: url(../image/logo.png) no-repeat ;
    background-size: contain; 
    display: block;
    width: 148px; height: 54px;
}
header .lang{ background: url(../image/fth.png) no-repeat left center; padding-left: 38px; background-size: 30px; height: 30px; line-height: 30px;; margin-right: 30px;;}
header .lang a{ border-right: 1px dotted #000; display: inline-block; color: #000; height: 22px; line-height: 22px; padding-right: 6px; font-size: 14px;;}
header .lang a.active{ color: var(--bgColor1);}
header .lang a:last-child{ border-right: none;}
header .menu{ width: 35px; height: 40px; margin-right:30px; }
header .menu .line{position: relative; top:0; display:block; width:26px; height:4px; background-color:#222; margin: 3px auto; border-radius: 50px;}
header .menu .line::before{ content: ""; display: block; position: absolute; left:  -8px; top: 0;width: 4px; height:4px; border-radius: 50%; background-color:#222;}
header .menu .line:nth-child(1){background:var(--bgColor) !important;}
header .menu .line:nth-child(1)::before{background:var(--bgColor) !important;}
/* active */
header .menu.active{position:relative; z-index:100000;}
header .menu.active .line:nth-child(1){transform:translateY(8px); opacity:0; transition:transform 0.4s 0s, opacity 0s 0.4s, background 0.4s 0.4s;}
header .menu.active .line:nth-child(2){ background-color: #fff;
	transform: rotate(45deg);  transition: transform 0.4s 0.4s, background 0.4s 0.4s;
}
header .menu.active .line:nth-child(3){background-color: #fff;
	transform: rotate(-45deg); top:-8px; transition:top 0.4s 0s, transform 0.4s 0.4s, background 0.4s 0.4s;
}
header .menu.active .line::before{ opacity: 0;}

header.active {
    position: fixed;
    z-index: 99999999;
    background: none;
}
header.active .lang{ opacity: 0;}
header.active .logo{ background-color: #e9e9e9; border-radius: 10px;padding: 10px;    height: 76px;}
.header1{ height: 66px; width: 1px;}

.navbg{ background: rgba(0, 0, 0, 0.6); width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99999998;backdrop-filter: blur(10px);transition: all 0.6s ease; visibility: hidden; opacity: 0;}
.navbg.cur{ opacity: 1; visibility: visible;}
.nav{ position: fixed; top: 100px;z-index: 99999999; opacity: 0; visibility: hidden; transition: all 0.6s ease; width: 1000px; left: 50%; margin-left: -500px; }
.nav.cur{ opacity: 1; visibility: visible;}
.nav dl{ border-bottom: 1px solid #fff; display: flex;   padding: 25px 10px;   -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center}
.nav dl dt{ font-size: 24px;; width: 135px; }
.nav dl dt a{ color: #fff; padding: 10px; display: block; font-weight: bold; text-align: center;border-radius: 10px;}
.nav dl dd{ font-size: 18px;;}
.nav dl dd a{color: #fff;padding: 10px 15px; display:inline-block;font-weight: bold;border-radius: 10px; margin-top: 5px}
.nav dl dt a:hover,.nav dl dd a:hover{ background: var(--bgColor1); }

footer{ border-top: 1px solid #e9e9e9; padding: 20px 0;position: relative;
    z-index: 99999;
    background: #fff;}
footer .img{ margin-right: 30px;}

footer .banshichu a{ color: #000}
footer .banshichu span {
    display: block;
    line-height: 38px;
}
footer .banshichu .img img{
    height: 70px;
}

footer .banshichu .phone {
    background: url("../image/phone.png") no-repeat left center;
    padding-left: 30px;
}

footer .banshichu .fax {
    background: url("../image/fax.png") no-repeat left center;
    padding-left: 30px;
}

footer .banshichu .email {
    background: url("../image/email.png") no-repeat left center;
    padding-left: 30px;
}

footer .banshichu .gps {
    background: url("../image/gps.png") no-repeat left center;
    padding-left: 30px;
}

footer .liaojie a{
    font-size: 16px;
    color: #000;
    font-weight: bold;
    line-height: 30px;
    border-right-width: 1px;
    border-right-style: dashed;
    border-right-color: var(--bgColor);
    padding: 0 10px;
}
.copyright{ background: rgb(175,171,171); padding: 10px 0; text-align: center; color: #fff; font-size: 14px; position: relative; z-index: 9999}
.winBox {
    width: 100%;
    height: 100px;
    overflow: hidden;
    position: relative;
}

.scroll {
    position: absolute;
    left: 0;
    top: 0;
}

.scroll li {
    flex: 1;
    display: block;
    line-height: 100px;
    text-align: center;
    margin-right: 36px;
    font-size: 80px;
    word-break: keep-all;
    white-space: nowrap;
    text-shadow: 1px 1px #d9d9d9, -1px -1px 2px #d9d9d9, 1px 1px 1px #d9d9d9, -1px -1px 4px #d9d9d9;
    color: rgb(51,108,218);
}

.banner{ height: 920px; width: 100%; overflow: hidden; position: relative; background: #fff;}
.banner .shapee{      width: 1900px;
    height: 1900px;
    background: url(../image/img-earth1.png) no-repeat;
    background-size: cover;
    opacity: 1;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 285px;
    z-index: 2}
.banner .shapee1{
    width: 1880px;
    height: 1880px;
    background-color: var(--bgColor1);
    border-radius:1000px;
    opacity: 1;
    position: absolute;
    left: 50%;    transform: translateX(-50%);
    top: 295px;
    z-index: 0
}
.banner .banner-body{ position: relative; z-index: 2; transform: translateY(38%)}
.banner .banner-body .title{ -webkit-text-stroke: 1px #fff; /* Safari */ font-family: "微软雅黑";
    text-stroke: 1px #fff;  color: var(--bgColor1); font-size: 46px;
   background: url("../image/sm.png") no-repeat left bottom ; background-size: 100%;
    }
.banner .banner-body .title h1{ font-weight: 600;
    opacity: 0;}
.banner .banner-body .imgs{ position: relative; z-index: 2; width: 780px;
    margin-left: 40px;}
.banner .banner-body .imgs dl{border: 5px solid rgb(179,179,179); border-radius: 50%;overflow: hidden;width:400px; height: 400px;}
.banner .banner-body .imgs dl dt img{ width:100%; height:100%;border-radius: 50%; -webkit-transform: scale(1.01);-webkit-transition: -webkit-transform 0.3s ease-in-out;
    transition: -webkit-transform 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    -ms-transform:scale(1.01);
    transform:scale(1.01); }
.banner .banner-body .imgs dl:last-child{width: 320px; height: 320px; border-color: var(--bgColor1)}
.banner .banner-body .imgs dl:last-child dt img{ width: 320px; height: 320px;}
.banner .banner-body .imgs dl img:hover{     -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);}
.banner .banner-footer{ position: absolute; bottom: 20px; left: 0;}
.banner .banner-footer li{}
[animate] {opacity: 0; transition-property: opacity,transform; transition-timing-function: cubic-bezier(.25,.46,.45,.94); transition-duration: .5s;}
/* [animate][animate-duration="800"] {transition-duration: .5s;} */
[animate=fade-up] {transform: translate3d(0,80px,0);}
[animate=fade-up] {transform: translate3d(0,80px,0);}
[animate=fade-up][animate-transform="y-200"] {transform: translate3d(0,200px,0);}
[animate=fade-up][animate-dutaion="1s"] {transition-duration: 1s;}
[animate].on {opacity: 1;}
[animate=fade-up].on {transform: translateZ(0);}
.item.exhibition .img-wrap img,
.item.artwork .img-wrap img,
.item.business .img-wrap img,
.item.creator .img-wrap img,
.item.contest .img-wrap img {-webkit-transition: -webkit-transform 0.3s ease-in-out;
    transition: -webkit-transform 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
@keyframes maskFill {
    0% {transform: translate(0,100%);}
    100% {transform: translate(0,0%);}
}
@keyframes maskWidth {
    0% {width: 100%;}
    100% {width: 0px;}
}
@keyframes projecShow {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes projecTextHide {
    100% {opacity: 0; width: 0; padding: 0;}
}
.home-server{ background: #fff; position: relative; z-index: 9}
.home-server .item {display: -ms-flexbox; display: -webkit-flex; display: flex; color: #fff;
    -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;
}
.home-server .img-area {overflow: hidden;width: calc(100% - 384px); min-height: 140px; height: 7.292vw; border-radius: 30px;}
.home-server .img-wrap,
.home-server .img-wrap img {height: inherit; min-height: inherit;}
.home-server .project-list > li {position: relative; overflow: hidden;}
.home-server .project-list > li::before {content: ''; display: block; position: absolute; top: 0; width: 100%; height: 100%; background-color: var(--light-gray02); transform: translate(0,100%); z-index: 1;}
.home-server .project-list > li:nth-child(odd)::before {left: 0;}
.home-server .project-list > li:nth-child(even)::before {right: 0;}
.home-server .project-list > li.on::before {animation: maskFill 1s ease-in-out both, maskWidth 1.5s ease-in-out 1s both;}
.home-server .img-area {position: relative; opacity: 0;}
.home-server li.on .img-area {animation: projecShow 1s ease 1.5s both; transition: width 0.3s ease 0s, height 0.3s ease 0s;}
.home-server .img-area::before {content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 30px; background-color: var(--black-alpha-4); opacity: 0; transition: opacity 0.5s ease;}
.home-server .text-wrap {display: -ms-flexbox; display: -webkit-flex; display: flex;
    -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
    -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end;
    position: absolute; top: 0; width: 384px; height: 100%; transition: opacity 0s ease, padding 0.3s; margin-top: 0; opacity: 0;
}
.home-server .project-list > li:nth-child(odd) .text-wrap {transform: translate(-50%, 0%); right: 0;}
.home-server .project-list > li:nth-child(even) .text-wrap {transform: translate(50%, 0%); left: 0;}
.home-server .project-list li.on .text-wrap {animation: projecShow 0.5s ease 0.5s both; transform: translate(0%,0%); transition: transform 1.5s ease 1s}
.home-server .project-list > li:nth-child(even) .item {-webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse;}
.home-server .project-list > li:nth-child(odd) .text-wrap {padding-left: 42px;}
.home-server .project-list > li:nth-child(even) .text-wrap {padding-right: 42px;}
.home-server .item .text-wrap .text {font-weight: bold; color: rgb(148,148,148)}
.home-server .item .text-wrap .title {font-weight: 700;
    font-size: 34px;
    letter-spacing: 0;}
.home-server .item.business .title {font-weight: 700; font-size: 44px; letter-spacing: 0; color: var(--bgColor1)}
.home-server .item.business .cover-wrap .title { color: #fff; margin-right: 4px;}
.home-server .item.business .cover-wrap  .ico{ background: url(../image/cjiantou.png) no-repeat; width: 52px;height: 29px; display: block;}
.home-server .item.business .cover-wrap .title span  { display: block; color: #fff; margin-right: 4px;}
.home-server .item.business .cover-wrap {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.home-server .item.business .cover-wrap .cover {display: -ms-flexbox; display: -webkit-flex; display: flex;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    width: 100%; height: 100%;
}
.home-server .item .cover-wrap {opacity: 0; transition: 0.5s ease;}
.home-server .item .cover {opacity: 0; transition: 0s ease 0s;}
.home-server .item .cover .title {text-align: center}


.home-server .project-list .hover .item .img-area {width: 100%; height: 10.938vw; transition: width 0.3s ease 0s, height 0.3 ease 0s}
.home-server .project-list .hover .item .text-wrap {padding: 0 ; opacity: 0; animation: none; transform: translate(0%,0%); transition: none;}
.home-server .project-list .hover .img-area::before,
.home-server .project-list .hover .item .cover-wrap,
.home-server .project-list .hover .item .cover {opacity: 1;}
.home-server .project-list .hover .item .cover {transition: 0.3s ease 0.3s;}
.home-server .project-list .hover .img-area::before,
.home-server .project-list .hover .item .cover-wrap {z-index: 1;}
.home-server .project-list > li + li {margin-top: 40px;}
.home-server .project-list > li:nth-child(even) .text-wrap {text-align: right;}
.home-server .btnpage { position: relative; height: 100px;}
.home-server .homes-title{ height: 70px; line-height: 70px; text-shadow: 1px 1px #fff, -1px -1px 2px #fff, 1px 1px 1px #fff, -1px -1px 4px #fff;
    color: var(--bgColor1); font-size: 36px; font-weight: bold; text-align: center; width: 300px; background: rgb(208,206,206); margin: 0px auto 40px auto; border-radius: 20px;-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.48);
    -moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.48); transform: translateY(-20px);
    box-shadow:         7px 7px 5px 0px rgba(50, 50, 50, 0.48);}
.home-server .homes-title span{ color: var(--bgColor)}


.home-server .swiper-button-next:after,.home-server  .swiper-button-prev:after{ content: ''}
.c-hover{     width: 40px;
    height: 40px;
    border-radius: 50%;transition: scale .3s cubic-bezier(.33,1,.68,1);
    border:1px solid var(--bgColor1);display: block;    position: relative;}
.c-hover .arrow {
    overflow: hidden;
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: url(../image/jiantou.svg);
    background-size: cover;
    margin-top: 50%;
    margin-left: 50%;
    top:-10px;
    left: -10px;
}
.c-hover.circlel .arrow {  rotate: 180deg}
.c-hover .shape{ opacity: 0; width: 6px; height: 6px; border-radius: 50%; position: absolute; top: 18px;
    margin-left: 50%; display: block; background:#fff; z-index: 2}

.c-hover .shape:nth-child(2){ left: -14px;animation: light 1.4s cubic-bezier(.33,1,.68,1) infinite;}
.c-hover .shape:nth-child(3){ left:-3px;animation: light1 1.4s cubic-bezier(.33,1,.68,1) infinite;}
.c-hover .shape:nth-child(4){ left: 8px;animation: light 1.4s cubic-bezier(.33,1,.68,1) infinite;}
.c-hover:hover {scale: 1.3; border:none;}
.c-hover:hover::after{content: ''; border-radius: 50%; z-index: 1; position: absolute; top: 0; left: 0; height:100%; width: 100%; animation: rotate 6.4s linear infinite;
    background: linear-gradient(270deg,#7da8ff,#0558ff 50%,#0047d1);}
.c-hover:hover .arrow{ opacity: 0; transition: 0.5s ease;}
.c-hover:hover .shape{ opacity: 1 !important; transition: 0.5s ease;}


.index-us{ background: rgb(241,240,240); padding: 0 0 30px 0; position: relative; z-index: 9}
.index-us h3.title{ font-size: 60px; font-weight: bold; text-align: center; color: var(--bgColor1); font-family:  "微軟雅黑";
    padding: 30px 0; margin:0 auto 20px auto; }

.index-us .index-usphone{ background: url("../image/homeus-bg.png") no-repeat; background-size: cover; width: 288px; height: 496px; padding: 80px 10px;}
.index-us .index-usphone .phoneimg{ background: url("../image/homeusphonebg.jpg?v1") no-repeat; background-size: cover; width: 256px; height: 304px; margin: 0 auto; position: relative;}
.index-us .form{ margin: 20px 0 20px 80px;}
.form-group1 {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    width: 100%;
    height: 100px;
    display: -webkit-flex;
    display: flex;
    align-items: center;
}



.form-group1 > input {
    font-size: 26px;
    width: 100%;
    height: 56px;
    border: 2px solid transparent;
    border-radius: 10px;
    padding-left:10px;
    color: #000;
    font-weight: normal;
    background: rgba(255,255,255,.8);
}

.form-group1 > select {
    outline: none;
    font-size: 26px;
    font-weight: normal;
    width: 100%;
    height: 56px;
    border: 2px solid transparent;
    border-radius: 10px;
    padding-left: 10px;
    color: #000;
    background: rgba(255,255,255,.8);
}

.form-group1 select option {
    color: #000;
}

.form-group1 select:focus, .form-group1 input:focus {
    border-color:var(--bgColor1);
}

.form-group1 > input::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #000;
}

.form-group1 > input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #000;
}

.form-group1 > input:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #000;
}
.form-box{ min-width: 545px; margin: 0 auto; height: 400px;}

.form-box .more,.inquiry .more{
    cursor: pointer;
    font-weight: 400;
    line-height: 52px;
    right: 0;
    left: 0;
    bottom: 0;
    background: #fff;
    color: #000;
    border: none;
    font-size: 18px;
    overflow: hidden;
}
.form-box .more:hover{ color: #fff;}
.form-box .more:hover::before,.inquiry .more::before{ content: ""; position: absolute;  width: 100%; height: 100%;z-index:0;animation: btnshow 0.5s forwards;
    background: linear-gradient(90deg,#7da8ff,#0558ff 50%,#0047d1); top: 0; left: 0;}

.form-box .more span,.inquiry .more span{ position: relative; z-index: 99;}
.form-box .more .icon,.inquiry .more .icon{ background: url("../image/jiantou.svg") no-repeat #fff center center; z-index: 99; border-radius: 50%;  background-size: 70%; width:30px; top: 10px; height: 30px; position: absolute; right: 10px;}
.form-box .sex{ margin-left: 10px}
.form-box .sex  .choose-sex {
    display: block;
    width: 126px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    font-size: 26px;
    border-radius: 10px;
    font-weight: 400;
    color: #000;
    background-color: rgba(255,255,255, 0.8);
}
.chooseBtn { display: none;}
.form-box .sex .chooseBtn:checked + label.choose-sex,.inquiry input:checked + label {
    background-color: var(--bgColor1) !important;    color: #fff;
}
.banner1{
    order: 0;
    place-self: auto;
    grid-area: auto;
    z-index: 1;
    float: none;
    flex-shrink: 1;
    display: flex;
    margin: 0px;
    inset: 0px;
    position: relative;
    flex-basis: auto;
    overflow: visible;
    box-sizing: border-box;
    width:  100%;
    height:  911px;
    padding: 0px;
          }
.banner1 .bannerimg{
    translate: none;
    rotate: none;
    scale: none;
    top: 0px;
    transform: translate(0px, 0px);
    left: 0px;
    margin: 0px;
    max-width: 100%;
    width:  100%;
    max-height: 911px;
    height: 911px;
    padding: 0px;
    box-sizing: border-box;
    position: fixed;
    z-index: 9;
}
.banner1 .bannerimg img{ height: 100%; width: 100%; object-fit: fill;}
.banner1 .bannerimg:before,.banner2:before,.banner1:before{ content: ""; position: fixed; z-index: 1; width: 100%;height: 100%; background: rgba(255,255,255,0.5); top: 0; left: 0;}
.banner1 .txt,.banner2 .txt{ position: absolute; top: 50%; left: 50%; transform: translateX(-50%); z-index: 22; text-align: center; color: #ff4f00 ; width: 100%; font-size: 68px;
    font-family: "微软雅黑"; font-weight: bold; text-shadow: 1px 1px #999999, -1px -1px 2px #999999, 1px 1px 1px #999999, -1px -1px 4px #999999;  }
.banner1 .txt .highlight,.banner2 .txt .highlight{ color: #fff;}
.banner2{ height: 600px; width: 100%;overflow: hidden; position: relative;}
.banner2 .txt,.banner2:before { position: absolute;}
.banner2 .position{ z-index: 999; width: 100%;position: absolute; bottom: 0;}
.ctsearch{ width: 400px;}
.ctsearch .input1{ width: 240px; background:url("../image/vector.png") no-repeat 8px center #fff; height: 40px; line-height: 40px;}
.ctsearch .button3{ width: 120px;
    margin: 0;}
.subpage {
    height: auto;
    width: 100%;
    min-height: 100vh;
    position: relative;
    background: #fff;
    border-radius: 105px 105px 0px 0px;
    z-index: 2
}
.subpage .content {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 200px 20px 200px;
    overflow: hidden
}

#gravity {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background-size: cover
}
#gravity .section2 {
    height: calc(100vh + 100px);
    padding-top: 100px;
    position: relative;
    background-color: #005fd1;
    margin-top: 100px
}
#gravity .section0 {
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative
}

#gravity .section0 .earthWrap {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 70%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 1
}

#gravity .section0 .earthWrap .earth1 {
    width: 1900px;
    height: 1900px;
    background: url(../image/img-earth1.png) no-repeat;
    background-size: cover;
    opacity: 1;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 2
}

@media(min-width: 769px)and (max-width: 1024px) {
    #gravity .section0 .earthWrap .earth1 {
        background:url(../image/img-earth1.png) no-repeat center;
        background-size: cover
    }
}

#gravity .section0 .earthWrap .earth2 {
    width: 1880px;
    height: 1880px;
    background-color: #005fd1;
    border-radius: 1000px;
    opacity: 1;
    position: absolute;
    left: 50%;
    top: 5px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 0
}
#gravity .textWrap h1 {
    font-size: 72px;
    font-weight: bold;
    margin-bottom: 50px;
    text-align: center;
    color: #000;
    line-height: 1;
}
#gravity .textWrap p{ text-align: center; color: #000; font-size: 24px;}
#gravity .textWrap.textWrap1 {
    position: relative;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    opacity: 0;
    z-index: 99;
    margin-top: 200px
}
#gravity .textWrap.textWrap1 h1,#gravity .textWrap.textWrap1 p {
    color: #fff
}
#gravity .textWrap.textWrap1 .picture {
    margin-top: 100px;
    margin-bottom: 200px;
    opacity: 0;
    position: relative;
    top: 0%;
    left: 0;
    height: 360px;
}
#gravity .textWrap.textWrap1  .picture .swiper-slide a{ width: 100%; display: block; height: 360px;}
#gravity .textWrap.textWrap1  .picture .swiper-slide { position: relative}
#gravity .textWrap.textWrap1  .picture .swiper-slide h1{ position: absolute; z-index: 9999; width: 100%; display: block; height: 360px; background: rgba(0,0,0,0.4);top:0; left: 0; line-height: 360px; font-size: 30px;}
#gravity .textWrap.textWrap1 .btnpage { position: relative;top: -50%; z-index: 9999; height: 0}
#gravity .textWrap.textWrap1 .btnpage .c-hover { background: #fff; }
#gravity .section1 {
    padding-top: 100px;
    background-color: var(--bgColor1);
}
#gravity .textWrap.textWrap2 {
    position: relative;
    top: 0%;
    left: 50%;
    -webkit-transform: translate(-50%, 10%);
    transform: translate(-50%, 10%);
    opacity: 0
}

#gravity .textWrap.textWrap2 h1,#gravity .textWrap.textWrap2 p {
    color: #fff
}
.home-yj h1{ text-align: center;}
#gravity .textWrap.textWrap2 .visionWrap,.home-yj .visionWrap{
    max-width: 800px;
    width: 100%;
    margin: 100px auto 0;
    padding-bottom: 100px
}

#gravity .textWrap.textWrap2 .visionWrap ul,.home-yj .visionWrap ul {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

#gravity .textWrap.textWrap2 .visionWrap ul li,.home-yj .visionWrap ul li {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    opacity: 0;
    position: relative;
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out
}

#gravity .textWrap.textWrap2 .visionWrap ul li.on,.home-yj .visionWrap ul li.on {
    opacity: 1;
    -webkit-transform: translateY(0%);
    transform: translateY(0%)
}

#gravity .textWrap.textWrap2 .visionWrap ul li.on div.item1 span,.home-yj .visionWrap ul li.on div.item1 span {
    left: 0%;
    top: 0%;
    opacity: 1
}

#gravity .textWrap.textWrap2 .visionWrap ul li.on div.item2 span,.home-yj .visionWrap ul li.on div.item2 span {
    left: 0%;
    top: 0%;
    opacity: 1
}

#gravity .textWrap.textWrap2 .visionWrap ul li.on div.item3 span,.home-yj .visionWrap ul li.on div.item3 span {
    left: 0%;
    top: 0%;
    opacity: 1
}

#gravity .textWrap.textWrap2 .visionWrap ul li div,.home-yj .visionWrap ul li div {
    position: relative;
    background-color: #005fd1;
    width: 160px;
    height: 160px;
    border-radius: 200px;
    margin-bottom: 20px;
    overflow: hidden
}

#gravity .textWrap.textWrap2 .visionWrap ul li div.item1 span,.home-yj .visionWrap ul li div.item1 span {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../image/about/l1.png) no-repeat;
    background-size: 69%;
    background-position: center;
    left: 0;
    top: 50%;
    opacity: 0;
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out
}

#gravity .textWrap.textWrap2 .visionWrap ul li div.item2 span,.home-yj .visionWrap ul li div.item2 span {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../image/about/l2.png) no-repeat -1px 8px;
    background-size: 69%;
    background-position: center;
    left: 0;
    top: 50%;
    opacity: 0;
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out
}

#gravity .textWrap.textWrap2 .visionWrap ul li div.item3 span,.home-yj .visionWrap ul li div.item3 span {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../image/about/l3.png) no-repeat;
    background-size: 69%;
    background-position: center;
    left: 0;
    top: 50%;
    opacity: 0;
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out
}

#gravity .textWrap.textWrap2 .visionWrap ul li h1,.home-yj .visionWrap ul li h1 {
    font-size: 20px;
    text-align: center;
    margin-bottom: 10px;
    line-height: 1;
    font-weight: 400;
    font-family: inherit
}

#gravity .textWrap.textWrap2 .visionWrap ul li p,.home-yj .visionWrap ul li p {
    line-height: 1;
    font-size: 20px;
    font-weight: bold;
    text-align: center
}

#gotop1{ position: fixed; bottom: 20px; right: 20px; width: 40px; height: 40px; z-index: 999999;}
#gotop1 .c-hover{ background: #fff;}
#gotop1 .c-hover .arrow{ background-color: #fff; transform:  rotate(-90deg);}

.position{ padding: 10px 0;}
.position .home{ background: url("../image/home.png") no-repeat; width: 29px; height: 26px; display: block;}
.position a{ color: #000;}
.position em{ color: rgb(0,78,172); margin: 0 12px;}

.s5Mask {opacity: 0; visibility: hidden; transition: .4s; position: fixed; left: 0; width: 100%; background: #fff; z-index: 101;}
.s5Mask.visible {opacity: 1; visibility: visible;}
.s5Mask._top {top: 0; height: 90px;}
.s5Mask._bottom {bottom: 0; height: calc((100vh - 85vh) - 90px);}
.about{ position: relative; z-index: 99999}
.about .s5 {overflow: hidden;
    padding-bottom: 100px;}
.about .s5 .wrap { box-sizing: border-box; margin: 0 auto;
    width: 80%; border-radius: 20px;
    overflow: hidden;}
.about .s5 .history {position: relative; box-sizing: border-box; overflow: hidden;}
.about .s5 .history .bgWrap {position: absolute; width: 100%; left: 0; top: 0;}
.about .s5 .history .bg {margin-top: 90px; box-sizing: border-box; position: relative; width: 100%; height: 85vh; border-radius: 30px; overflow: hidden;}
 .about .s5 .history .bg::after {content: ''; display: block; background-color: rgba(0,0,0,0.5); width: 100%; height: 100%; position: relative;}
.about .s5 .history .bg img {transition: .4s; position: absolute; left: 50%; top: 100%; transform: translate(-50%, 0%); width: 100%; height: 100%; object-fit: cover;}
.about .s5 .history .bg img.act,
.about .s5 .history .bg img:first-child {top: 0;}
.about .s5 .history .txtPin {padding-top: 90px;}
.about .s5 .history .txtWrap {--gap:85px; position: relative; width: 100%; height: 100%; display: flex; justify-content: flex-end; padding: 20vh 190px; box-sizing: border-box;}
.about .s5 .history .txtWrap .years {flex-shrink: 0; padding-right: var(--gap); text-align: right; padding-top: 10vh;}
.about .s5 .history .txtWrap .years ul {display: flex; flex-direction:  column; align-items: flex-end;}
.about .s5 .history .txtWrap .years li {cursor: pointer; display: inline-block; height: auto; font-size: 20px; font-family: "微软雅黑"; font-weight: bold; letter-spacing: -0.045em; color: rgb(191,191,191);  transition: .4s;}
/* .about .s5 .history .txtWrap .years li:hover {opacity: 1;} */
.about .s5 .history .txtWrap .years li.act {font-size: 50px; opacity: 1; color: #fff;}
.about .s5 .history .txtWrap .years li+li {margin-top: 40px;}
.about .s5 .history .txtWrap .dataSwiper {padding-left: var(--gap);}
.about .s5 .history .txtWrap .dataSwiper .swiper-wrapper{ display: block;}
.about .s5 .history .txtWrap .dataWrap .hisData {padding: 90px 60px; opacity: .3; background: #fff; border-radius: 30px; transition: .4s; height: auto;}
.about .s5 .history .txtWrap .dataWrap .hisData+.hisData {margin-top: 120px;}
.about .s5 .history .txtWrap .dataWrap .hisData.opacity_1 {opacity: 0.9;}
.about .s5 .history .txtWrap .dataWrap .hisData .info { width: 300px;}
.about .s5 .history .txtWrap .dataWrap .hisData p {word-break: keep-all; font-size: 18px; letter-spacing: -0.045em; line-height: 1.4; color: #444444;}
.about .s5 .history .txtWrap .dataWrap .hisData li b {font-weight: 600; color: #000;}

.timeline-area {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
@charset "UTF-8";
.timeline-area .timeline-group .month-group {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    overflow: hidden;
}
.timeline-area .timeline-group .month-group .date-group {
    position: absolute;
    z-index: 1;
    width: 44px;
    height: 64px;
    top: 21px;
    left: 50%;
    transform: translate(-50%, 0);
}
.timeline-area .timeline-group .month-group .date-group .month,
.timeline-area .timeline-group .month-group .date-group .year {
    color: #666666;
    text-align: center;
}
.timeline-area .timeline-group .month-group .date-group .month {
    font-size: 36px;
    font-weight: bold;
    line-height: 40px;
    margin-bottom: 0;
    font-family: "微软雅黑";
}
.timeline-area .timeline-group .month-group .date-group .year {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    font-family: "微软雅黑";
}
.timeline-area .timeline-group .month-group img {
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
}
.timeline-area .timeline-group .dot-group {
    position: relative;
    width: 120px;
}
.timeline-area .timeline-group .dot-group .dot {
    width: 16px;
    height: 16px;
    margin: 4px auto;
    border-radius: 100%;
    background-color: var(--bgColor1);
}
.timeline-area .timeline-group .dot-group.top {
    margin: 32px auto 4px auto;
}
.timeline-area .timeline-group .dot-group.bottom {
    margin: 4px auto 32px auto;
}
.timeline-area .timeline-group .content-group {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    padding: 6px 0px;
}
@media screen and (max-width: 1380px) {
    .timeline-area .timeline-group .content-group {
        display: block;
    }
}
.timeline-area .timeline-group .content-group .left,
.timeline-area .timeline-group .content-group .center,
.timeline-area .timeline-group .content-group .right {
    z-index: 1;
}
.timeline-area .timeline-group .content-group .left {
    margin-right: 20px;
}
@media screen and (max-width: 1380px) {
    .timeline-area .timeline-group .content-group .left {
        position: relative;
        z-index: 2;
        margin: 0;
    }
}
.timeline-area .timeline-group .content-group .right {
    margin-left: 20px;
}
@media screen and (max-width: 1380px) {
    .timeline-area .timeline-group .content-group .right {
        position: relative;
        z-index: 2;
        margin: 0;
    }
}
.timeline-area .timeline-group .content-group .content-box {
    position: relative;
    width: 736px;
    min-height: 124px;
    max-height: 272px;
    padding: 24px;
    margin: 24px auto;
    border-radius: 8px;
    background-color: white;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 1512px) {
    .timeline-area .timeline-group .content-group .content-box {
        width: 624px;
    }
}
@media screen and (max-width: 768px) {
    .timeline-area .timeline-group .content-group .content-box {
        width: 344px;
        padding: 16px;
    }
}
.timeline-area .timeline-group .content-group .content-box.image .img-rwd {
    position: relative;
    width: 100%;
    height: 224px;
    max-width: 336px;
    border-radius: 8px;
    overflow: hidden;
}
.timeline-area .timeline-group .content-group .content-box.image .img-rwd img {
    width: 100%;
    height: auto;
}
.timeline-area .timeline-group .content-group .content-box.image .img-box {
    background-image: url("../image/logo.png");
    background-size: initial;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 224px;
    max-width: 336px;
    border-radius: 8px;
    overflow: hidden;
}
@media screen and (max-width: 768px) {
    .timeline-area .timeline-group .content-group .content-box.image .img-box {
        max-width: 138px;
        height: 92px;
    }
}
.timeline-area .timeline-group .content-group .content-box.image .text-box {
    margin-left: 24px;
    width: 328px;
}
@media screen and (max-width: 1280px) {
    .timeline-area .timeline-group .content-group .content-box.image .text-box {
        width: 216px;
    }
}
@media screen and (max-width: 768px) {
    .timeline-area .timeline-group .content-group .content-box.image .text-box {
        width: 158px;
        margin-left: 16px;
    }
}
.timeline-area .timeline-group .content-group .content-box.image .text-box .title {
    font-size: 24px;
    font-weight: 600;
    line-height: 28px;
    margin-bottom: 0;
}
.timeline-area .timeline-group .content-group .content-box.image .text-box .title span,
.timeline-area .timeline-group .content-group .content-box .text-box .title span { color: var(--bgColor1) !important;}

.timeline-area .timeline-group .content-group .content-box.image .text-box .desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}
.timeline-area .timeline-group .content-group .content-box .text-box {
    width: 520px;
}
@media screen and (max-width: 1280px) {
    .timeline-area .timeline-group .content-group .content-box .text-box {
        width: 420px;
    }
}
@media screen and (max-width: 768px) {
    .timeline-area .timeline-group .content-group .content-box .text-box {
        width: 312px;
    }
}
.timeline-area .timeline-group .content-group .content-box .text-box .title {
    font-size: 24px;
    font-weight: 600;
    line-height: 28px;
    margin-bottom: 16px;
}
@media screen and (max-width: 768px) {
    .timeline-area .timeline-group .content-group .content-box .text-box .title {
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 4px;
    }
}
.timeline-area .timeline-group .content-group .content-box .text-box .desc,
.timeline-area .timeline-group .content-group .content-box .text-box .date {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}
.timeline-area .timeline-group .content-group .content-box .text-box .desc {
    margin-bottom: 0;
}
@media screen and (max-width: 768px) {
    .timeline-area .timeline-group .content-group .content-box .text-box .desc {
        min-height: 40px;
        font-size: 14px;
        line-height: 20px;
    }
}
.timeline-area .timeline-group .content-group .content-box .text-box .date {
    color: #666666;
    text-align: right;
    position: absolute;
    right: 24px;
    bottom: 24px;
}
@media screen and (max-width: 768px) {
    .timeline-area .timeline-group .content-group .content-box .text-box .date {
        position: relative;
        display: block;
        right: 0px;
        bottom: 0px;
        margin-top: 4px;
    }
}
.timeline-area .timeline-group .content-group .line {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 100%;
    min-height: 180px;
    background-color: #999999;
    border-radius: 24px;
}


@keyframes btnshow {
    0% {
        width: 0;
    }

    50% {

    }



    to {
        width: 100%;
    }
}
.rz{ margin: 40px auto;}
.filter-input-group-inner .form-label {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 12px;
    font-weight: 400;
}
.dropdown-wrapper {
    cursor: pointer;
    width: 220px;
    position: relative;
    z-index: 999999;
}
.dropdown {
    padding: 9px 20px 9px 44px;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #999;
    border-radius: 24px;
    background-color: #fff;
}
.dropdown .dropdown-text-wrapper {
    display: grid;
    grid-template-columns: 1fr 28px;
}
.dropdown .dropdown-text {
    text-align: left;
    vertical-align: middle;
    font-size: 20px;
    line-height: 28px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dropdown .dropdown-text-wrapper::after {
    content: "";
    background: url("data:image/svg+xml,<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' clip-rule='evenodd' d='M15.7071 6.79289C16.0976 7.18342 16.0976 7.81658 15.7071 8.20711L10.7071 13.2071C10.5196 13.3946 10.2652 13.5 10 13.5C9.73478 13.5 9.48043 13.3946 9.29289 13.2071L4.29289 8.20711C3.90237 7.81658 3.90237 7.18342 4.29289 6.79289C4.68342 6.40237 5.31658 6.40237 5.70711 6.79289L10 11.0858L14.2929 6.79289C14.6834 6.40237 15.3166 6.40237 15.7071 6.79289Z' fill='%23333333'/> </svg> ");
    width: 28px;
    height: 28px;
    display: inline-block;
    background-size: 100% 100%;
    vertical-align: middle;
}
.dropdown-options {
    position: absolute;
    display: none;
    text-decoration: none;
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 220px;
    border: 1px solid #999;
    border-bottom-right-radius: 24px;
    border-bottom-left-radius: 24px;
    overflow-y: scroll;
    box-sizing: border-box;
    width: 100%;
    z-index: 3;
    background: #fff;
}

.dropdown-options li {
    height: 40px;
    font-size: 20px;
    line-height: 28px;
    padding: 6px 20px 6px 44px;
    position: relative;
    background: #fff;
}
.dropdown:hover {
    background-color: rgba(33, 33, 33, 0.05);
}
.dropdown-options li:hover {
    background: rgba(33, 33, 33, 0.05);
}
.dropdown.active {
    background-color: rgba(33, 33, 33, 0.05);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.dropdown.active + .dropdown-options {
    display: block;
}

.notice{ position: relative;}
.notice:after{ content: ''; position: absolute; height: 600px; top: 50%;
    margin-top: -300px; background-color: #f5f5f5;border-top-left-radius: 30px; border-bottom-left-radius: 30px; right: 0;width: 40%; }
.notice .mt1440{ padding: 100px 0;}
.notice .swiper-slide{ padding: 50px 30px;}
.notice dl{ border-radius: 15px; background-color: #fff; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); padding:30px 20px 20px 20px;
    overflow: hidden; transition: scale 3s cubic-bezier(.33,1,.68,1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);}
.notice dl dt{}
.notice dl dt img{ width: 100%; border-radius: 10px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);}
.notice dl dd{
    padding-top: 15px;}
.notice dl dd a{ color: #000;line-height: 25px; height: 52px; display: block; font-weight: bold;}
.notice dl dd p{ font-size: 14px;}
.notice dl dd span{
    background-image: linear-gradient(#000,#000);
    background-size: 0 1px;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    transition: background-size .3s cubic-bezier(.33,1,.68,1);
}
.notice  .swiper-slide-next dl dd span{
    background-image: linear-gradient(#fff,#fff);
    background-size: 0 1px;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    transition: background-size .3s cubic-bezier(.33,1,.68,1);
}
.notice dl dd a:hover span {
    background-size: 100% 1px;
    background-position: 0 100%
}
.notice .swiper-slide-next dl{ background-color: var(--bgColor1); transform: scale(1.2);}
.notice .swiper-slide-next dl dd p,.notice .swiper-slide-next dl dd a{ color: #fff;}
.notice .btnpage{ width: 330px; height: 60px; margin-left: 370px;}
.notice .btnpage .swiper-pagination{ width: 200px; position: inherit;}
.nt {margin-top: -112px;}
.nt .scroll li{ color: #fff;}

.gg-ad{ border-top: 2px solid var(--bgColor); border-bottom: 2px solid var(--bgColor); padding: 20px 0; overflow: hidden;}
.gg-info{ padding: 20px 0;}
.gg-info img{ max-width: 100%;}
 .gg-nav .fpian{ text-align: center}
 .gg-nav .fpian:first-child img{ transform: rotate(-180deg);}
 .gg-nav .jiantou{ border-radius: 50%; border: 2px solid rgb(118,113,113); width: 40px; height: 40px;
     margin-top: 10px;
    padding-top: 6px; fill: rgb(118,113,113);
    padding-left: 5px;
    overflow: hidden;}
 .gg-nav .fh{ background: url("../image/about/list.png") no-repeat center -2px ; background-size:40px; padding-top: 50px;}
 .gg-nav .fh:hover{ background: url("../image/about/listh.png") no-repeat center -2px ; background-size:40px;  color: var(--bgColor1)}
 .gg-nav .jiantou img{ width: 26px; }
 .gg-nav .jiantou:hover{ border: 2px solid var(--bgColor1);}
 .gg-nav a:hover img:first-child{ display: none}
 .gg-nav a:hover p{ color: var(--bgColor1);}

.job{  padding: 100px 0;}
.job .swiper-slide{  padding: 10px 10px;}
.job dl{ box-shadow: 0 0 10px rgba(0,0,0,.1);}
.job dl dt{ width: 550px; height: 280px;
    overflow: hidden;}
.job dl dt img{ width: 100%;transition: transform 0.2s 0.2s}
.job dl dt img:hover{ transform: scale(1.2)}
.job dl dd{ padding: 10px 20px 70px 20px; position: relative;}
.job dl dd h1{ text-align: center;  color: #000; font-weight: bold; font-family: "微软雅黑"}
.job dl dd h1 a{}
.job dl dd p{ line-height: 26px;}
.job dl dd .more{ background: none;
    width: 100%; height: 60px; line-height: 60px; right: 0; bottom: 0; border: none;}
.job dl dd .more span{ position: relative; z-index: 9999; color: #fff;}
.job dl dd .more.animate-btnshow::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    animation: btnshow 0.5s forwards;
    background: linear-gradient(90deg,#7da8ff,#0558ff 50%,#0047d1);
    top: 0;
    left: 0;
}
.job .job-list .btnpage {
    position: absolute;
    top: 50%;
    width: 110%;
    left: 50%;
    margin-left: -55%;
    z-index: 9999;
}
.jobmore { padding: 100px 0;}
.jobmore .title1{}
.jobmore .title1 img{ height: 60px; display: block;}
.jobmore .title1 span{ display: block; background: var(--bgColor1); color: #fff; padding: 5px 30px; margin-left: 20px;  border-radius: 10px;}
.jobmore .jobinfo {}
.jobmore .jobinfo .jobitem{ margin: 10px 20px; width: 440px;}
.jobmore .jobinfo .jobitem h2{ text-align: center; color: var(--bgColor1)}
.jobmore .jobinfo .jobitem .info{ border: 1px solid rgb(217,216,216); border-radius: 10px; padding: 20px; height: 100%;
    margin-top: 20px;}
.jobmore .jobinfo .p span{ min-width: 90px;}
.jobmore .jobinfo .p {
    color: #000;
    font-size: 16px;
    line-height: 30px;
    margin-top: 10px;
    font-weight: bold;
    display: flex;
    border-bottom: 1px solid rgb(179,179,179);
}
.jobmore .jobinfo .p:last-child{ border-bottom: none;}

.applyform{ height: 832px; background: url("../image/applybg.png?v3") no-repeat center; background-size: cover; width: 100%; padding: 30px 0; position: relative;}
.applyform:after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 1;}
.applyform .mt1200{position: relative; z-index: 2;}
.applyform .title{ font-size: 38px; text-align: center; color: #fff; font-weight: bold; padding: 20px 0; line-height: 60px;}
.applyform form{margin: 0 auto;}
.applyform .tabsa{margin: 20px auto 40px auto;}
.applyform .tabsa a{ width: 160px; text-align: center;line-height: 50px; border-radius: 20px 0; color: #fff; border: 1px solid #fff; font-size: 24px; font-weight: bold; }
.applyform .tabsa a.cur{ background: var(--bgColor1); border-color: #fff;}
.applyform .tabsa .line{ width: 140px; height: 1px; background:rgb(128,128,128);}
.applyform .tabsa .line.cur{ background:rgb(0,160,233);}
.applyform form .form-box{}
.applyform form .form-box .form-group1{ width: 800px; border-bottom: none; height: 80px;}
.applyform form .form-box .btn{
    margin-right: 0;
    margin-left: 0;}
.applyform form .form-group1 > label{font-size: 26px;}
.applyform form .form-group1 > label span{color:red;}
.applyform form .form-group1 > select{font-size: 26px;}
.applyform form .form-group1 > input{font-size: 26px;}
.applyform .uploadlist{ width: 800px;  margin: 0 auto; border-top: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128);
    padding: 30px 0;}

.applyform .uploadlist h2{ color: #fff; line-height: 40px;}
.applyform .uploadlist h2 span{ color: red;}
.applyform .uploadlist p{ color: #fff;
    padding-left: 10px;}
.applyform .uploadlist ul{padding: 30px 0;}
.applyform .uploadlist ul li{margin: 0 30px; position: relative;}
.applyform .uploadlist ul li a{
    padding-top: 106px; background: url("../image/upload.png") no-repeat; background-size: contain; width: 210px; height: 146px; color: #fff; font-size: 22px; display: block; text-align: center; font-weight: bold;}
.applyform .uploadlist ul li.ok a{ background-image: url("../image/uploadok.png") ; }
.applyform .uploadlist ul li a.del{ position: absolute; background: url("../image/del.png") no-repeat center; background-size: 20px; width: 30px; height: 30px; left: 10px; top: 10px;
    padding: 0; border: 1px solid #fff; border-radius: 50%; }

.applyform .btnmain{width: 800px;  margin: 0 auto; }
.applyform .btnmain .btn{  margin-right: 0;
    margin-left: 0;}
.sendsuccess{ width: 800px; margin: 0 auto; color: #fff; line-height: 40px;
    padding-top: 172px;}

.applyform .form-group1 {
    position: relative;
    z-index: 1;
    width: 1000px;
    margin: 0 auto;
    border-bottom: 1px solid #D8D8D8;
    height: 100px;
    display: -webkit-flex;
    display: flex;
    align-items: center;
}

.applyform .form-group1 > label {
    width: 246px;
    font-size: 32px;
    color: #fff;
    text-indent: 16px;
}

.applyform .form-group1 > input {
    font-size: 32px;
    font-weight: 400;
    width: 754px;
    height: 56px;
    border: 2px solid #fff;
    border-radius: 10px;
    padding-left:10px;
    color: #fff;
    background: none;
}

.applyform .form-group1 > select {
    outline: none;
    font-size: 32px;
    font-weight: 400;
    width: 754px;
    height: 56px;
    border: 2px solid #fff;
    border-radius: 10px;
    padding-left: 10px;
    color: #fff;
    background: none;
}

.applyform .form-group1 select option {
    color: #000;
}

.applyform .form-group1 select:focus, .applyform .form-group1 input:focus {
    border-color: var(--bgColor);
}

.applyform .form-group1 > input::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #fff;
}

.applyform .form-group1 > input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #fff;
}

.applyform .form-group1 > input:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #fff;
}

.form-box .btn,.btnmain .btn {
    display: block;
    margin: 60px 0 0 880px;
    text-align: center;
    width: 220px;
    height: 56px;
    border: 2px solid #fff;
    font-size: 32px;
    font-weight: 400;
    color: #fff;
    line-height: 52px;
}

.form-box .btn:hover,.btnmain .btn:hover {
    background-color: #004EA2;
    border-color: #004EA2
}
.form-box .sex{ margin-left: 10px}
.form-box .sex  .choose-sex {
    display: block;
    width: 126px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    font-size: 32px;
    border-radius: 10px;
    font-weight: 400;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.3);;
}
.chooseBtn { display: none;}
.form-box .sex .chooseBtn:checked + label.choose-sex,.inquiry input:checked + label {
    background-color: #004EA2;
}
.applyform  .form-box .sex .chooseBtn:checked + label.choose-sex {
    background-color: var(--bgColor) !important;
}
.inquiry input + label{background: #e4e4e4; border-radius: 10px;}

.sub-section {
    /*min-height: calc(100vh - 112px);*/
    position: relative;
}
.reference-list {
    height: calc(100vh - 112px);
    border-radius: 30px;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
}
.reference-list .ref-list-item {
    position: relative;
    height: 100%;
    scroll-snap-align: start;
    border-radius: 30px;
    overflow: hidden;
    z-index: 1;
}
.reference-list .ref-list-item+.ref-list-item {
    margin-top: 30px;
}
.reference-list .ref-list-item .ref-list-item-inner {
    height: 100%;
}
.reference-list .ref-list-item .ref-back {
    display: block;
    height: 100%;
}
.reference-list .ref-list-item .ref-back:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.4);
    left: 0;
    bottom: 0;
    z-index: 1;
}
.reference-list .ref-list-item .ref-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
    transition: transform .5s;
}
.reference-list .ref-list-item .ref-back h1{
    position:absolute;
    top: 50%;
    color: #fff;
    font-size: 50px;
    text-align: center;
    width: 100%;
    z-index: 99;
    font-family: "微软雅黑";
}
.reference-list .ref-list-item .ref-back h1 span{ color: var(--bgColor1); text-shadow:  1px 1px #fff, -1px -1px 2px #fff, 1px 1px 2px #fff, -1px -1px 1px #fff;}
.reference-nav-box {
    position: absolute;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    left: 40px;
    right: 40px;
    bottom: 80px;
    z-index: 9000;
    pointer-events: none;
}

.reference-nav-box .reference-nav-list {
    position: relative;
    flex: 1;
    max-width: calc(50% - 86px);
    height: 130px;
    margin-left: 40px;
    border: 1px solid #fff;
    border-radius: 30px;
    pointer-events: all;
    padding: 0 40px;
    margin-right: 80px;
}
.reference-nav-box .reference-nav-list:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.1);
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    border-radius: 30px;
}
.reference-nav-box .swiper {
    height: 100%;
    padding: 0 0 20px;
    overflow-x: clip;
    overflow-y: visible;
}
.reference-nav-box .swiper .swiper-wrapper .swiper-slide {
    position: relative;
    width: 160px;
    height: 70px;
    margin-bottom: 10px;
    border-radius: 35px;
    overflow: hidden;
    align-self: end;
    transition: height .3s,border-radius .3s,scale 0.5s ease-in-out;
}
.reference-nav-box .swiper .swiper-wrapper .swiper-slide .reference-nav-item {
    width: 100%;
    height: 100%;
}
.reference-nav-item .project-thumb-box img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 35px;
    margin: 0 auto;
}
.reference-nav-box .ref-view-toggle-box {
    pointer-events: all;
    /*margin-left: 20px;*/
    /*width: 46px;*/
    /*position: absolute;*/
    /*right: 0;*/
    /*top: 0;*/
    /*z-index: 9999;*/
}
.ref-btn-toggle {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 130px;
    border: 1px solid #fff;
    border-radius: 23px;
    vertical-align: top;
    box-sizing: border-box;
}
.ref-btn-toggle input[type=checkbox] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}
.ref-btn-toggle input[type=checkbox]+label {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.8);
    border: 1px solid #000;
    border-radius: 22px;
    font-size: 0;
    transition: background .2s ease-out;
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
}
.ref-btn-toggle input[type=checkbox]+label:before {
    content: "";
    position: absolute;
    width: 40px;
    height: 66px;
    background: #fff;
    border-radius: 20px;
    left: 1px;
    top: 1px;
    z-index: 2;
    transition: all .2s ease-out;
}
.ref-btn-toggle input[type=checkbox]:checked+label:before {
    top: 100%;
    margin-top: -67px;
}
.ref-btn-toggle .toggle-ico {
    position: absolute;
    display: inline-block;
    width: 16px;
    height: 16px;
    font-size: 0;
    left: 50%;
    margin-left: -7px;
    z-index: 3;
    pointer-events: none;
}
.ref-btn-toggle .toggle-ico.big {
    top: 25px;
}

.ref-btn-toggle .toggle-ico.grid {
    bottom: 25px;
}
.ref-btn-toggle .toggle-ico span {
    display: inline-block;
    border: 1px solid #fff;
    transition: border-color .5s;
}
.ref-btn-toggle .toggle-ico.big span {
    width: 100%;
    height: 100%;
    border-radius: 2px;
}
.ref-btn-toggle input[type=checkbox]~.toggle-ico.big span {
    border-color: #000;
}
.ref-btn-toggle .toggle-ico.grid span {
    width: 6px;
    height: 6px;margin: 1px;
}
.ref-btn-toggle input[type=checkbox]~.toggle-ico.grid span {
    border-color: #fff;
}
.ref-btn-toggle input[type=checkbox]:checked~.toggle-ico.grid span {
    border-color: #000;
}
.ref-btn-toggle input[type=checkbox]:checked~.toggle-ico.big span {
    border-color: #fff;
}

.reference-nav-list .swiper-slide-active{
transform: scale(2) translateY(-14px);
}
.reference-nav-list .swiper-slide-active img{ display: none;}
.reference-nav-list .swiper-slide-active .project-info-box{ color: #fff; padding-top: 20px; display: block; border-radius: 50%; width: 70px; height: 70px; background:rgba(0,0,0,0.3); margin: 0 auto;}

.reference-list.grid {
    display: grid;
    overflow-y: auto;
    scroll-snap-type: none;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-rows: min-content;
    gap: 10px;
    height: auto;
    padding: 20px 20px 90px 20px;
}
.reference-list.grid .ref-list-item{
    height: 376px;
    margin-top: 30px;
}
.reference-list.grid .ref-list-item .ref-back h1{ font-size: 30px;
    margin-top: -20px;}
.reference-list.grid .ref-list-item .ref-back h1 span{
    text-shadow: none;
color: #fff;
    transition: color .5s;
}
.reference-list.grid .ref-list-item:hover .ref-back h1 span,#gravity .textWrap.textWrap1 .picture .swiper-slide:hover h1 span{
    color: var(--bgColor1);
    text-shadow:  1px 1px #fff, -1px -1px 2px #fff, 1px 1px 2px #fff, -1px -1px 1px #fff;
}


.service1 {
    padding-top: 80px;
    padding-bottom: 80px;}
.service1 .title{ background: var(--bgColor1); text-align: center; font-size: 30px; color: #fff; border-radius: 10px; padding: 10px; margin-bottom: 30px; font-weight: bold;}
.service1 .info{ font-size: 24px;  line-height: 36px;
    padding: 30px 100px; margin: 0 auto 30px auto; border-radius: 10px; border: 2px solid rgb(230,230,230)}
.service1 .descmain{ position: relative;border-radius: 10px; border: 2px solid rgb(230,230,230);padding: 30px 100px; }
.service1 .descinfo{ }
.service1 .descinfo .title{text-align: left; border-radius: 0; font-size: 40px;border-bottom: 1px solid rgb(217,217,217); background: none; color: var(--bgColor1); font-family: "微软雅黑"}
.service1 .descinfo .title:first-letter{ color: var(--bgColor)}
.service1 .descinfo .desc{ padding: 60px 0;
    position: relative;}
.service1 .descinfo .desc ul{}
.service1 .descinfo .desc p{  line-height: 32px; position: relative;
    padding-left: 18px;}
.service1 .descinfo .desc li:after{content: " "; display: block; width: 10px; height: 10px; border-radius: 50px; background: #000; position: absolute; left: 0; top: 12px;}

.service2 {
    padding-top: 80px;
    padding-bottom: 30px;}
.service2 .title{ background: var(--bgColor1); text-align: center; font-size: 30px; color: #fff; border-radius: 10px; padding: 10px; margin-bottom: 30px; font-weight: bold;}
.service2 .info{ font-size: 24px;line-height: 36px;
    padding: 20px 60px; margin: 0 auto 80px auto;}
.service2 .info dd{background: #fff; border-radius: 20px; padding: 20px 30px; width: 590px;}
.service2 .info dt img{ border-radius: 20px; width: 500px;}
.service2 .descinfo{ border-top: 1px solid rgb(230,230,230);
    margin-top: 130px;
    padding: 50px 0;
}
.service2 .descinfo .mt1200.dd-flex{
    padding-bottom: 110px;}
.service2 .descinfo .title{ margin: 0 auto;
}
.service2 .descinfo .desc{ padding: 20px 30px; height: 100%;
    margin-top: 20px; width: 580px; border-radius:10px; border: 2px solid rgb(230,230,230);}
.service2 .descinfo .desc p{  line-height: 32px; position: relative;
    padding-left: 18px;}
.service2 .descinfo .desc li:after{content: " "; display: block; width: 10px; height: 10px; border-radius: 50px; background: rgb(0,160,233); position: absolute; left: 0; top: 12px;}


.inquiry{}
.inquiry .title1{
    margin-bottom: 50px;}
.inquiry h3{ font-size: 30px; font-weight: bold; margin-bottom: 16px; border-bottom: 1px solid #f4f4f4; text-align: center;
    padding: 20px 0; display: flex; justify-content: center; align-items: center;}
.inquiry h3 img{ display: inline-block; vertical-align: middle; height: 40px;
    margin-right: 10px;}
.inquiry .form-control{ display: flex; align-items: center; padding: 5px 0; width: 800px; margin: 0 auto;}
.inquiry .form-control label span{color: red;}
.inquiry .form-control label{ width: 165px; font-size: 18px; font-weight: bold; text-align: right;
    margin-right: 20px;}
.inquiry .form-control .input1{ text-indent: 0;
    padding-left: 25px; flex: 1; width: 100% !important;}
.inquiry .form-control input,.inquiry .form-control select{ flex: 1;}
.inquiry input[type=radio]+label{ position: relative; text-align: center; display: block; height: 46px; line-height: 46px; width: 120px;
    margin-left: 12px; background: rgb(228, 228, 228); border-radius: 10px;
    margin-right: 0;}
.inquiry input[type=radio]+label:before{
    margin-top: 0; z-index: -1; background: #e4e4e4; border: none; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 10px;
}
.inquiry input[type=radio]:checked+label:before{
    background: var(--bgColor1);}
.inquiry input[type=radio]+label:after{display: none;}
.inquiry .btnmain{  border-radius: 10px;
    overflow: hidden;}
.inquiry .button2{  color: #000;  background: #e4e4e4; height: 48px; line-height: 48px;  padding: 0 14px; cursor: pointer; font-weight: bold;}
.inquiry .button2.cur,.inquiry .button2:hover{color: #fff; background: var(--bgColor1);}
.inquiry .piece { font-size: 16px; text-align: center; }
.inquiry .piece .line{
    margin-bottom: 10px;}
.inquiry .piece .input1{ width: 74px; border-radius: 0; text-align: center; text-indent: 0; border: 2px solid var(--bgColor1);
    margin-left: -1px; height: 48px;}
.inquiry .piece .input1:first-child{ border-top-left-radius: 10px; border-bottom-left-radius: 10px;margin-left: 0;}
.inquiry .piece .input1:last-child{ border-top-right-radius: 10px; border-bottom-right-radius: 10px;}
.inquiry .form-control .input1 .btn{ font-size: 18px; padding: 11px 5px; color: #333}
.inquiry .tabs{ text-align: right; width: 800px; margin: 0 auto;}
.inquiry .tabs a{ display: inline-block; background: #e4e4e4; height: 48px; line-height: 48px; padding: 0 14px; cursor: pointer;
    color: #000; font-size: 16px; margin-left: 10px; border-radius: 10px; font-weight: bold}
.inquiry .tabs a.cur,.inquiry .tabs a:hover{ background: var(--bgColor1); color: #fff;}
.inquiry .btns{}
.inquiry .btns button{display: inline-block; background: #e4e4e4; height: 48px; line-height: 48px; padding: 0 14px; cursor: pointer;
    color: #000; font-size: 16px;
    margin-left: 10px; border-radius: 10px; width: 140px;}
.inquiry .tools{ text-align: right; width: 800px; margin: 0 auto; padding: 10px 0;}
.inquiry .result{ text-align: right; width: 800px; margin: 0 auto; padding: 10px 0; color: red;}
.inquiry .tools img{ width: 26px;margin: 0 10px; }
.inquiry .textarea{
    height: 120px;
    flex: 1;
    border-radius: 10px ;
    padding-left: 26px;
    font-size: 18px;
    font-weight: 400;
    color: #000;
    line-height: 26px;
    position: relative;
    background-color: rgb(228,228,228);
    border: 2px solid #fff;
    background-repeat: no-repeat; background-position: 10px center;
}
.inquiry .send { margin: 30px auto; display: block; padding: 0 60px; border-radius: 50px; font-size: 18px; position: relative;}
.inquiry .send .more{ top: 0;right: 15px;  left: initial; display: none; }
.inquiry .send .more#next{display: block; }
.inquiry{ position: relative; z-index: 99999}
.inquiry .s5 {overflow: hidden; padding-bottom: 0px; background: #fff;}
.inquiry .s5 .wrap { box-sizing: border-box; margin: 0 auto;
    width:100%;
    overflow: hidden;}
.inquiry .s5 .history {position: relative; box-sizing: border-box; overflow: hidden;}
.inquiry .s5 .history .bgWrap {position: absolute; width: 100%; left: 0; top: 0;}
.inquiry .s5 .history .bg {margin-top: 66px; box-sizing: border-box; position: relative; width: 100%; height: 95vh; overflow: hidden;}
/*.inquiry .s5 .history .bg::after {content: ''; display: block; background-color: rgba(255,255,255,0.95); width: 100%; height: 100%; position: relative;}*/
.inquiry .s5 .history .bg div {transition: .4s; position: absolute; left: 50%; background: #fff; top: 100%; transform: translate(-50%, 0%); width: 1920px; height: 1024px; object-fit: cover;}
.inquiry .s5 .history .bg div.act,
.inquiry .s5 .history .bg div:first-child {top: 0;}
.inquiry .s5 .history .bg div:nth-child(2){ background: url("../image/44.jpg?v1") no-repeat center center; background-size: cover;}
.inquiry .s5 .history .txtPin {padding-top: 90px;}
.inquiry .s5 .history .txtWrap {--gap:85px; position: relative; width: 100%; height: 100%; display: flex; justify-content: flex-start; padding: 20vh 110px; box-sizing: border-box;}
.inquiry .s5 .history .txtWrap .years {flex-shrink: 0; padding-right: var(--gap); text-align: right; padding-top: 10vh;}
.inquiry .s5 .history .txtWrap .years ul {display: flex; flex-direction:  column; align-items: flex-end;}
.inquiry .s5 .history .txtWrap .years li {cursor: pointer; display: inline-block; padding: 10px 20px; border-radius: 10px; height: auto; font-size: 20px; font-weight: bold; letter-spacing: -0.045em; color: rgb(191,191,191);  transition: .4s;}
/* .inquiry .s5 .history .txtWrap .years li:hover {opacity: 1;} */
.inquiry .s5 .history .txtWrap .years li.act { opacity: 1; color: #fff; background: var(--bgColor)}
.inquiry .s5 .history .txtWrap .years li+li {margin-top: 40px;}
.inquiry .s5 .history .txtWrap .dataSwiper {padding-left: var(--gap);}
.inquiry .s5 .history .txtWrap .dataSwiper .swiper-wrapper{ display: block;}
.inquiry .s5 .history .txtWrap .dataWrap .hisData {padding: 40px 60px;  transition: .4s; height: auto; background: #fff;
    opacity: .4;}
.inquiry .s5 .history .txtWrap .dataWrap .hisData+.hisData {margin-top: 120px;}
.inquiry .s5 .history .txtWrap .dataWrap .hisData.opacity_1 {opacity: 0.9;}
.inquiry .s5 .history .txtWrap .dataWrap .hisData .info { }
.inquiry .s5 .history .txtWrap .dataWrap .hisData p {word-break: keep-all; font-size: 18px; letter-spacing: -0.045em; line-height: 1.4; color: #444444;}
.inquiry .s5 .history .txtWrap .dataWrap .hisData li b {font-weight: 600; color: #000;}
.inquiry .s5 .history   .down { position: absolute; z-index: 99999999; bottom: 20px; right:10%;    animation: fadeInDown 1.5s linear infinite;}
.inquiry .s5 .history   .down span { background: url("../image/down1.png") no-repeat center;
    display: block; width: 20px; height: 20px;}
.cs-btn {
    margin: 0 20px;
    padding-bottom: 42px;
    text-align: center;
    cursor: pointer;
    margin-top: -26px;
    width: 40px;
    background: url("../image/about/cs-img.png") center 30px no-repeat;
    background-size: 25px 24px;
}


.cfs .title1{ padding:20px 0 0;color: rgb(242,242,242);font-size: 90px; margin-bottom: -80px;}
.cfs .form{ width: 500px; padding: 30px; margin: 0 auto; border-radius: 20px; position: relative;
}
.cfs .form label{ font-size: 20px; font-weight: bold;}
.cfs .form .input1{ width: 100% !important; text-indent: 0px;
    padding-left: 10px;}
select.selectpicker{ display: none !important;}

.cfs .form .filter-option,.filter-option{  font-size: 18px; line-height: 32px;}
.bootstrap-select .btn-default{ color: #000 !important; font-weight: normal; font-family: "Microsoft JhengHei", "微軟雅黑", sans-serif, Arial;
    padding-left: 0; margin: 0 auto;}
.inquiry .bootstrap-select.btn-group .dropdown-toggle .caret{ right: 23px;}
.bootstrap-select ul {
    padding-left: 10px !important;}
.cfs .form .button3{ width: 180px; border: none; position: relative; color: #fff; height: 50px; line-height: 50px; border-radius: 10px; padding: 0;
    overflow: hidden; margin: 0; text-align: left;
    padding-left: 20px;
    margin-left: 20px;}
.cfs .form .button3 span{ position: relative; z-index: 99}
.cfs .form .button3 i{ position: relative; z-index: 99;    background: url(../image/jiantou.svg) no-repeat #fff center center;
    z-index: 99;
    border-radius: 50%;
    background-size: 70%;
    width: 30px;
    top: 10px;
    height: 30px;
    position: absolute;
    right: 10px;}
.cfs .form .button3:after{content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    animation: btnshow 0.5s forwards;
    background: linear-gradient(90deg, #7da8ff, #0558ff 50%, #0047d1);
    top: 0;
    left: 0;}
.cfs #filter{ padding:0 0 40px 0; background: #fff; }
.cfs #result{  background: #fff; padding: 40px 0;}
.cfs #result .mt1440{ background: rgb(241,241,241); border-radius: 20px;
    padding: 20px; }
.cfs #result .tips{ border-bottom:1px solid var(--bgColor1); line-height: 30px; padding: 10px 0;}
.cfs #result .tips img{ margin-right: 20px; }
.cfs #result .rule{  line-height: 28px;border-bottom:1px solid var(--bgColor1) ; padding: 20px 0; font-weight: bold;}
.cfs #result .pictel{  line-height: 28px; padding: 10px 0; }
.cfs #result .pictel a{ font-weight: bold;}
.cfs .bootstrap-table .table thead>tr>th{ background: var(--bgColor1); text-align: left;border-color: #fff; border-bottom: 2px solid #fff;}
.cfs .fixed-table-container thead th .both { color: #fff;
    background-image: url('../image/bothsort.png')
}
#cfsform > div.tran > a > img{ height: 40px; display: block;}
.cfs .fixed-table-container thead th .asc {
    background-image: url('../image/upsort.png')
}

.cfs .fixed-table-container thead th .desc {
    background-image: url('../image/downsort.png')
}
.cfs .fixed-table-container tbody td{ border-color: #fff; border-bottom: 1px solid #fff;}
.cfs .btns{
    padding: 10px 0;}
.cfs .btns button{ width: initial; margin: 0 10px;}
.cfs .btns button:hover{  color: #fff; background: var(--bgColor1)}
.cfs .btns button i{  margin-right: 10px;}
.filter{ position: relative;}
.filter .title1 .t-first{ background: rgba(29,34,132,0.4); color: #fff; padding:20px 40px; border-radius: 20px;
    margin-left: 20px;}
.filter .form{ width: 950px; padding: 30px; margin: 0 auto;
}
.filter .form label{ font-size: 20px; font-weight: bold;}
.filter .form .input1{ width: 100% !important; text-indent: 0px; background: #fff;border: 2px solid var(--bgColor1); border-radius: 50px;
    padding-left: 10px;}
.filter .form .input1:hover{ background: var(--bgColor1);}
.filter .form .input1:hover .btn-default{  color: #fff !important;background-image: url("../image/1h.png");}
.filter .form .form-group:nth-child(3) .input1:hover .btn-default{  color: #fff !important;background-image: url("../image/2h.png");}
select.selectpicker{ display: none !important;}
.filter .form .form-group{ min-width: 320px; margin-right: 10px; }
.filter .form .tran{  margin-right: 10px;}
.filter .form .filter-option,.filter-option{  font-size: 18px; line-height: 32px;}
.filter .button3{
    margin-top: 0;}
.filter .bootstrap-select .btn-default{  padding-left: 36px;background: url("../image/1.png") no-repeat 2px center; background-size: 32px;}
.filter .form .form-group:nth-child(3) .btn-default{ background-image: url("../image/2.png");}
.cfs .form .button3 i{
    margin-left: 20px;}


.ocean .abc{ padding: 50px 0;}
.ocean .abc a{ font-size: 16px;  background: #f2f2f2; font-weight: bold; color: #000; width: 30px; line-height: 28px; text-align: center; border-radius: 5px; margin: 0 5px;}
.ocean .abc a:hover,.ocean .abc a.cur{ color: #fff; background: var(--bgColor1);}
.ocean dl{ margin: 10px 0; padding: 10px 0 10px 0; border-bottom: 2px dotted #333;
    position: relative;}

.ocean dl dt{font-size: 16px; height: 32px; border: 2px solid #f1f1f1; background: #f1f1f1; font-weight: bold; color: #000; width: 30px; line-height: 28px; text-align: center; border-radius: 5px;}
.ocean dl.hover dt,.airline dl.hover dt{  background:none; border: 2px solid transparent; color: #fff;}
.ocean dl dd{ flex: 1; padding: 0 30px;}
.ocean dl dd a{ font-size: 16px; color: #000; line-height: 32px; text-decoration: underline;
    margin-right: 50px;
    margin-bottom: 10px; font-weight: bold;}
.airline dl dd div{ width: 30%; line-height: 50px;
    margin-right: 0px;}
.airline dl dd a{
    margin-right: 0px;}
.airline dl dt{
    margin-top: 8px;}
.ocean dl.hover::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    animation: btnshow 1s forwards;
    background: linear-gradient(90deg,#7da8ff,#0558ff 50%,#0047d1);
    top: 0;
    left: 0;
}
.ocean dl.hover a,.ocean dl.hover span{ color: #fff;}


.oceancount ul.tabli{ width: 700px; margin: 0 auto;
    padding-top: 20px;}
.oceancount .tabli li{ position: relative;  padding:20px 70px;border: 2px solid  #fff;  background: rgb(242,242,242); cursor: pointer; width: 50%; text-align: center}
.oceancount .tabli li a{ font-size:20px; color: #000; display: block;}
.oceancount .tabli li:hover a,.oceancount .tabli li.cur a{ font-weight: bold; color: #000}
.oceancount .tabli li.cur,.oceancount .tabli li:hover{ background: #fff; color: #000; border-top: 2px solid  var(--bgColor1);}
.oceancount .tabli li.cur span,.oceancount .tabli li:hover span{ color: var(--bgColor);}
.oceancount .form{
    padding-top: 60px;}
.oceancount .form li{ padding: 10px 0;}
.oceancount .form li h5{ font-weight: bold; text-align: center; line-height: 40px; width: 90px; font-size: 18px; }
.oceancount .form li .deng{ font-weight: bold; text-align: center; line-height: 40px; width: 90px; font-size: 18px; }
.oceancount .form li input{ width: 200px;}
.oceancount  button{ width: 120px;float: right;}
.oceancount  .jsresult{  margin: 80px auto 50px auto;  clear: both; background: #f1f1f1; padding: 20px;}
.oceancount  .jsresult h3{ font-size: 50px;  color: var(--bgColor); opacity: .2; text-align: center;}
.oceancount  .jsresult dl{  border-radius: 50px; overflow: hidden;
    padding-right: 20px;
    margin-top: 30px;}
.oceancount  .jsresult dl dt{  font-weight: bold; border: 2px solid var(--bgColor1);
    color: #000; border-radius: 50px; text-align: center; line-height: 50px; font-size: 18px; padding: 0 40px; width: 240px;}
.oceancount  .jsresult dl dd{ border: 2px solid #fff; background: #fff;
    color: #000; border-radius: 50px; text-align: center; line-height: 50px; font-size: 18px; padding: 0 40px; width: 240px;
    margin-left: 10px;}
.shippingterms{ background: url("../image/tools/bg.jpg") no-repeat top center; background-size: cover; padding: 50px 0 100px 0; }
.shippingterms .abc{ font-weight: bold; background: url("../image/tools/jia.png") no-repeat left center; background-size: 20px; line-height: 35px; font-size: 24px;
    padding-left: 35px; border-bottom: 1px solid rgb(128,128,128) ;cursor: pointer;
    margin-top: 10px;}
.shippingterms .abc.active{ border-bottom: none; color: var(--bgColor);background: url("../image/tools/jian.png") no-repeat left center; background-size: 20px;  }
.shippingterms .abc span{  display: inline-block; text-align: center; line-height: 30px; padding: 0 8px}
.shippingterms .abc.active span{  border: 1px solid var(--bgColor); border-radius: 10px; background: #fff;  }
.shippingterms .dl{ border-bottom: 1px solid rgb(128,128,128); display: none;
    padding: 20px 0 40px 40px;}
.shippingterms dl dt{ color: var(--bgColor1); font-weight: bold; line-height: 36px; font-family: "微软雅黑";
    margin-top: 10px;}
.shippingterms dl dd{}
.conversion{ padding-top: 40px ;}
.converform{ width: 48%; margin: 20px 0;
   }
.converform  dt{ font-size: 24px; color: var(--bgColor1); border-bottom: 2px solid var(--bgColor1); line-height: 40px;}
.converform  dd{ padding: 30px 0 30px 100px; background: #fff;}
.converform .input1{ width: 48%; background: #fff; border: 1px solid rgb(128,128,128); margin: 6px 0;}
.converform input.input1:read-only{  background: rgb(217,217,217); border: 1px solid rgb(128,128,128);}
.converform:nth-child(1) dd{ background: url("../image/tools/1.png") no-repeat 20px center #fff; background-size: 60px;}
.converform:nth-child(2) dd{ background: url("../image/tools/2.png") no-repeat 20px center #fff; background-size: 60px;}
.converform:nth-child(3) dd{ background: url("../image/tools/3.png") no-repeat 20px center #fff; background-size: 60px;}
.converform:nth-child(4) dd{ background: url("../image/tools/4.png") no-repeat 20px center #fff; background-size: 60px;}
.spec{}
.spec div{ background: none !important;}
.spec div > p{ font-weight: bold; color: var(--bgColor1); font-size: 24px; line-height: 40px;}
.spec table{ margin: 0; border-collapse: collapse; min-width: 820px}
.spec table td{ border: 1px solid var(--bgColor1); text-align: left; line-height: 40px; font-size: 18px; text-indent: 10px; padding: 0 10px;}
.spec table th{ border: 1px solid var(--bgColor1); text-align: left; line-height: 40px; font-size: 18px; text-indent: 10px; padding: 0 10px;}

.spec{
    overflow: hidden;}
.spec .btns{ width: 460px; height: 460px; border-radius: 50%; margin: -230px auto 20px auto; border: 1px solid #000;
    padding-top: 180px;}
.spec .btns h1{ color: #fff; text-align: center; width: 330px; height: 330px; border-radius: 50%;
    margin: -125px auto 0 auto;
    overflow: hidden;
    padding-top: 194px; position: relative;}
.spec .btns h1:before{ content: '';width: 330px; height: 330px;top: 0; left: 0; position: absolute; z-index: 0; border-radius: 50%;display: block; background: url("../image/sanjiao.png") no-repeat bottom center; }
.spec .btns h1.deg1:before{transform: rotate(59deg)}
.spec .btns h1.deg2:before{transform: rotate(29deg)}
.spec .btns h1.deg3:before{transform: rotate(-22deg)}
.spec .btns h1.deg4:before{transform: rotate(-54deg)}
.spec .btns h1:after{ border: 1px solid #000; content: '';width: 330px; height: 330px;top: 0; left: 0; position: absolute; z-index: -1; border-radius: 50%;display: block; background: linear-gradient(270deg,#7da8ff,#0558ff 50%,#0047d1); animation: rotate 6.4s linear infinite;}
.spec .btns a{ display: block; color: #000; width: 50px; text-align: center; font-weight: bold;}
.spec .btns a.cur{ color: var(--bgColor); font-weight: bold;}
.spec .btns a:nth-child(2){ transform: rotateZ(60deg)  translate3d(-50px, -64px, 0px)}
.spec .btns a:nth-child(3){ transform: rotateZ(40deg)  translate3d(61px, -82px, 0px)}
.spec .btns a:nth-child(4){ transform: rotateZ(-31deg)  translate3d(264px, 109px, 0px)}
.spec .btns a:nth-child(5){ transform: rotateZ(-56deg)  translate3d(331px, 215px, 0px)}

.contcats{ height: 800px;  position: relative;}
.contcats .title1{ position: absolute; top: -36px; left: 50%;  margin-left: -150px; z-index: 999;box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); border-radius: 10px;
    overflow: hidden;}
.contcats .title1 span{ color: #000; display: block; border-radius: initial;}
.contcats .map{ background: url("../image/contacts/map.png") no-repeat top left; background-size: 1903px; height: 800px; position: relative;}
.contcats .map .mappoint{ background: url("../image/contacts/1.png") no-repeat; width: 40px; height: 48px; background-size: 40px; position: absolute;}
.contcats .map .mappoint.active{ background: url("../image/contacts/2.png") no-repeat; background-size: 40px;
    -webkit-animation: jump .5s ease 1;
    -o-animation: jump .5s ease 1;
    animation: jump .5s ease 1;
}
.contcats .map .pointinfo{ background: #fff; display: none; border-radius: 20px; position: absolute; right: 10%; bottom: 30%; padding: 20px; width: 340px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);}
.contcats .map .pointinfo .title{ color: var(--bgColor1); font-weight: bold; font-size: 28px; line-height: 60px;}
.contcats .map .pointinfo .text { padding: 10px 0;}
.contcats .map .pointinfo .text div{ color: var(--bgColor1); font-weight: bold; min-width: 50px}
.contcats .map .pointinfo .close{ background:url("../image/contacts/close.png") no-repeat; width: 26px; height: 26px; background-size: 26px; position: absolute; top: 20px; right: 20px;}



@keyframes jump {
    0% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        -o-transform: translateY(-10px);
        transform: translateY(-10px)
    }

    100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
}
@keyframes light {
    0% {
        background: #fff;
    }

    50% {
        background: #afadad;
    }

    50.1% {
        background: #afadad;
    }

    to {
        background: #fff;
    }
}
@keyframes light1 {
    0% {
        background:  #afadad;
    }

    50% {
        background: #fff;
    }

    50.1% {
        background: #fff;
    }

    to {
        background: #afadad;
    }
}

@keyframes rotate {
    0% {
        rotate: 0
    }

    to {
        rotate: 1turn
    }
}
@media screen and (max-width: 1440px) {
    * {
        touch-action: auto;
    }

    body {
    }

    .mt1440 {
        width: 100%;
    }
    .reference-list.grid .ref-list-item{
        height: 277px;
    }


}
@media screen and (max-width: 1024px) {
    * {
        touch-action: auto;
    }
    body {
    }
    .mt1200{ width: 100%}
    .mt900{ width: 100%}
    .mt1440 {
        width: 100%;
    }
   
}



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

    * {
        touch-action: auto;
    }
    header .logo{ left: 0}
    .banner .banner-body{    -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;  }
    .banner .banner-body .title{font-size: 34px; text-align: center; background-size: 90%; background-position: center; margin-top: -10%}
    .banner .banner-body .imgs{ width: 100%;
        padding:50px 10px ;
        margin-left: 0;}
    .banner .banner-body .imgs dl{ width: 200px; height: 200px;}
    .banner .banner-body .imgs dl:last-child{ width: 160px; height: 160px;}
    .banner .banner-body .imgs dl:last-child dt img{ width: 160px; height: 160px;}
    .home-server .item{ display: block;}
    .home-server .img-area{        width: calc(100% + 0px);
        height: 32vw;}
    .home-server .item .text-wrap .text{}
    .home-server .item.business .title{ font-size: 34px;}
    .home-server .text-wrap{ position: initial;}
    .index-us .index-usphone{ display: none;}
    .index-us .form{ margin: 20px auto; padding: 0 10px;}
    .form-box{ width: 100%;}
    #realname{ width: 100% !important;}
    body > div.index-us > div > div.form > form > div > div:nth-child(2) > div{ width: 100%; padding: 10px 0 5px 0;}
    .form-box .sex{ width: 50%; margin:0 5px;}
    .form-box .sex .choose-sex{ width: 100%}
    .form-box .form-group1{ height: inherit;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
    footer .img{ display: none;}
    footer .banshichu{ padding: 0 10px;}
    .nav{ width: 100%; left: 0;
        margin-left: 0;}
    .nav dl{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        padding: 0;
        position: relative;
    }
    .nav dl:after{ content: ''; position: absolute; right: 20px; background: url("../image/down0.png") no-repeat right center; width: 25px; height: 14px; top: 20px;}
    .nav dl dd{ display: none;}
    .nav dl dd a{  }
    header .menu{
        margin-right: 10px;}
    .banner1{ }
    .banner1 .bannerimg{}
    .banner1 .bannerimg img{ object-fit: cover}
    #gravity .textWrap.textWrap2 .visionWrap ul,.home-yj .visionWrap ul{ flex-wrap: wrap;}
    #gravity .textWrap.textWrap2 .visionWrap ul li,.home-yj .visionWrap ul li{flex: 0 0 45% ;
        margin-bottom: 20px;}
    .about .s5 .wrap{ width: 96%;}
    .about .s5 .history {height: 75vh;}
    .about .s5 .history .txtPin {padding-top: 0; height: 100%;}
    .about .s5 .history .txtWrap {flex-direction: column; justify-content: space-between; padding: 30px; height: 100%;}
    .about .s5 .history .txtWrap .years {margin-bottom: 20px; padding-top: 0; padding-right: 0;}
    .about .s5 .history .txtWrap .years ul {flex-direction: row;}
    .about .s5 .history .txtWrap .years li {display: inline-block; width: auto;}
    .about .s5 .history .txtWrap .years li.act {font-size: 18px; opacity: .5;}
    .about .s5 .history .txtWrap .years li.swiper-slide-thumb-active {color: #fff; opacity: 1;}
    .about .s5 .history .txtWrap .years li+li {margin-top: 0; margin-left: 40px;}
    .about .s5 .history .txtWrap .dataSwiper {padding-left: 0;}
    .about .s5 .history .txtWrap .dataWrap .hisData {box-sizing: border-box;}
    .about .s5 .history .txtWrap .dataWrap .hisData+.hisData {margin-top: 0;}
    .about .s5 .history .bgWrap{height: 100%;}
    .about .s5 .history .bg {margin-top: 0; height: 100%;}
    .about .s5 .history .bg img {top: 0; opacity: 0;}
    .about .s5 .history .bg img.act {opacity: 1;}
    .about .s5 .history .txtWrap .dataWrap .hisData {opacity: 1;}
    .about  .s5 .history .txtWrap .years li {font-size: 15px;}
    .about  .s5 .history .txtWrap .years li.act {font-size: 15px;}
    .about  .s5 .history .txtWrap .years li+li {margin-left: 20px;}
    .about  .s5 .history .txtWrap .dataWrap .hisData li {font-size: 14px;}
    .about  .s5 .history .txtWrap {padding: 30px 15px;}
    .about  .s5 .history .txtWrap .dataSwiper {height: 80%;}
    .about  .s5 .history .txtWrap .dataWrap .hisData { padding: 25px; height: 100%;}
    .about .s5 .history .txtWrap .dataSwiper .swiper-wrapper{ display: flex}

    .inquiry .s5 .wrap{ width: 100%;}
    .inquiry .s5 .history {height: 95vh; min-height: 805px;}
    .inquiry .s5 .history .txtPin {padding-top: 0; height: 100%;}
    .inquiry .s5 .history .txtWrap {flex-direction: column; justify-content: space-between; padding: 30px; height: 100%;}
    .inquiry .s5 .history .txtWrap .years {margin-bottom: 0px; padding-top: 0; padding-right: 0;}
    .inquiry .s5 .history .txtWrap .years ul {flex-direction: row;}
    .inquiry .s5 .history .txtWrap .years li {display: inline-block; width: auto;}
    .inquiry .s5 .history .txtWrap .years li.act {font-size: 18px; opacity: .5;}
    .inquiry .s5 .history .txtWrap .years li.swiper-slide-thumb-active {color: #fff; opacity: 1;}
    .inquiry .s5 .history .txtWrap .years li+li {margin-top: 0; margin-left: 40px;}
    .inquiry .s5 .history .txtWrap .dataSwiper {padding-left: 0;}
    .inquiry .s5 .history .txtWrap .dataWrap .hisData {box-sizing: border-box;}
    .inquiry .s5 .history .txtWrap .dataWrap .hisData+.hisData {margin-top: 0;}
    .inquiry .s5 .history .bgWrap{height: 100%;}
    .inquiry .s5 .history .bg {margin-top: 0; height: 100%;}
    .inquiry .s5 .history .bg img {top: 0; opacity: 0;}
    .inquiry .s5 .history .bg img.act {opacity: 1;}
    .inquiry .s5 .history .txtWrap .dataWrap .hisData {opacity: 1;}
    .inquiry  .s5 .history .txtWrap .years li {font-size: 15px; color: #000}
    .inquiry  .s5 .history .txtWrap .years li.act {font-size: 15px;}
    .inquiry  .s5 .history .txtWrap .years li+li {margin-left: 20px;}
    .inquiry  .s5 .history .txtWrap .dataWrap .hisData li {font-size: 14px;}
    .inquiry  .s5 .history .txtWrap {padding: 10px 15px;}
    .inquiry  .s5 .history .txtWrap .dataSwiper {height: 90%;}
    .inquiry  .s5 .history .txtWrap .dataWrap .hisData { padding: 5px 0px; height: 100%;}
    .inquiry .s5 .history .txtWrap .dataSwiper .swiper-wrapper{ display: flex}
    .notice .btnpage{
        margin-left: 30px;}
    .job .job-list .btnpage {
        position: absolute;
        top: 60%;
        width: 94%;
         left: 3%;
         margin-left:0;
        z-index: 9999;
    }
    .job .swiper-slide{ padding: 10px 0;}
    .jobmore .jobinfo{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
    }
    .jobmore .jobinfo .jobitem{ width: 90%;}
    .service1 .info{ padding: 20px 10px}
    .service1 .descmain{ padding: 20px 10px}
    .service2 .info{ width: 100%; padding:10px 10px 20px 10px; text-indent: 0;
        margin-bottom: 0 !important;
        flex-direction: column-reverse;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;}
    .service2 .info dt img{ width: 100%}
    .service2 .info dd{ width: 100%; transform: translateX(0) translateY(-30px);}
    .service2 .descinfo{
        margin-top: 40px;}
    .service2 .descinfo .desc,.service2 .descinfo .title{ width: 100%; padding: 10px;
        margin-top: 40px;}
    .service2 .descinfo .mt1200{  -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;}
    .inquiry .s5 .history .down{ display: none;}
    .inquiry .form-control{ width: 100%;}
    .inquiry .form-control label{ width: 100px;
        margin-right: 5px;
        font-size: 16px;}
    .inquiry .piece{ width: 100%; overflow-x: auto;}
    .inquiry .piece .line{ width: 900px}
    .inquiry .piece .input1:first-child{}
    .inquiry .tools{ width: 100%;}
    .inquiry .result{ width: 100%;}
    .inquiry .tabs{ width: 100%;}
    .inquiry .btns{ width: 150px;}
    .inquiry .labelwidth label{ width: 150px;}
    .inquiry input[type=radio]+label{ width: 75px;}
    .inquiry  .labelwidth input[type=radio]+label{ width: 108px;}
    .inquiry  .bootstrap-select.btn-group .dropdown-toggle .filter-option{ font-size: 18px;}
    .filter .form{ width: 100%;}
    .filter .form form{   -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;}
    .filter .form .tran{ display: none;}
    .cfs .form .form-group{
        margin-bottom: 10px;}
    .cfs .form .button3{ margin: 0 auto;}
    #print{ display: none;}
    .ocean .abc a {
        margin-top: 10px;
    }
    .oceancount ul.tabli{ width: 100%;}
    .oceancount .tabli li{ padding: 10px;}
    .mt820 {
        width: 100%;
    }
    .oceancount .form{ background: #fff;}
    .oceancount .form li input {
        width: 100px;
        text-indent: 10px;
        font-size: 16px;
    }
    .oceancount .jsresult h3{ font-size: 35px;}
    .oceancount .jsresult dl dt{ padding: 0 5px;}
    .spec .info {
        overflow: auto;
    }
    .converform{ width: 100%;}
    body > div.banner2 > div.position > div > div{ display: none;}
    .ctsearch{ width: 100%;}
    body > footer > div > div.banshichu > div > div:nth-child(2){ width: auto !important;}
    .incoterms .info img{ width:100%;}
    .contcats .map .mappoint{ display: none;}
    .contcats .map{ background: #fff; height: auto;
        padding-top: 60px;}
    .contcats .map .pointinfo{ display: block !important; position: inherit; width: 100%; right: 0;
        margin-bottom: 20px;}
    .contcats .map .pointinfo .close{ display: none;}
    .contcats{ height: auto;}
    .cs-btn{margin: 0 5px;}
    .textWrap0{ padding: 0 10px; word-break: break-word}
    .about .s5{   padding-bottom: 10px;}
    .reference-nav-box{  left: 10px; right: 10px;}
    .reference-nav-box .reference-nav-list{ max-width: calc(100% - 56px);
        margin-left: 0;
        margin-right: 10px;}
    .reference-nav-box .swiper .swiper-wrapper .swiper-slide{ width:40px;}
    .reference-nav-item .project-thumb-box img{ width: 40px; height: 40px;}
    .reference-nav-item .project-info-box{ display: none;}
    .reference-list.grid{ grid-template-columns: 1fr 1fr;}
    .reference-nav-list .swiper-slide-active{ transform: scale(1.5) translateY(-14px);}

    .spec .btns{ width: 360px; height: 360px; border-radius: 50%; margin: -180px auto 20px auto; border: 1px solid #000;
        padding-top: 180px;}
    .spec .btns h1{ color: #000; text-align: center; width: 230px; height: 230px; border-radius: 50%;
        margin: -115px auto 0 auto;
        overflow: hidden;
        padding-top: 115px; position: relative;}
    .spec .btns h1:after{ content: '';width: 230px; height: 230px;top: 0; left: 0; position: absolute; z-index: -1; border-radius: 50%;display: block; background: linear-gradient(270deg,#7da8ff,#0558ff 50%,#0047d1); animation: rotate 6.4s linear infinite;}
    .spec .btns a{ display: block; color: #000; width: 50px; text-align: center;}
    .spec .btns a.cur{ color: var(--bgColor); font-weight: bold;}
    .spec .btns a:nth-child(2){ transform: rotateZ(60deg)  translate3d(-50px, -52px, 0px)}
    .spec .btns a:nth-child(3){ transform: rotateZ(40deg)  translate3d(61px, -67px, 0px)}
    .spec .btns a:nth-child(4){ transform: rotateZ(-31deg)  translate3d(210px, 79px, 0px)}
    .spec .btns a:nth-child(5){ transform: rotateZ(-56deg)  translate3d(294px, 148px, 0px)}
    .spec .btns h1:before{ content: '';width: 230px; height: 230px;top: 0; left: 0; position: absolute; z-index: 0; border-radius: 50%;display: block; background: url("../image/sanjiao.png") no-repeat bottom center; }
    .spec .btns h1.deg1:before{transform: rotate(66deg)}
    .spec .btns h1.deg2:before{transform: rotate(24deg)}
    .spec .btns h1.deg3:before{transform: rotate(-25deg)}
    .spec .btns h1.deg4:before{transform: rotate(-68deg)}
    .inquiry .send{ display: flex; padding: 0 25px;}
    .inquiry .send .more{ position: relative; display: block;   margin-left: 20px; color: #fff; font-weight: bold;}
    .inquiry .send .more.shang {  text-align: right;}
    .inquiry .send .more.shang .icon{ transform: rotate(180deg); left: 10px; right: auto;}
    .reference-list.grid .ref-list-item{
        height: 156px;
    }
    .form-group1 > label{ display: none;}
    .form-box .sex .choose-sex{ font-size: 18px; width: 80px;}
    .form-box{ padding: 0 10px;
        margin-top: 30px;}
    .applyform .tabsa .line {
        width: 45px;
    }
    .applyform form .form-box .form-group1{ width: auto}
    .applyform form .form-group1 > input,.applyform form .form-group1 > select{ font-size: 22px; width: 100%}
    .applyform .uploadlist,.applyform .btnmain{ width: 100%;}
    .applyform .uploadlist ul li{ margin: 0 5px;}
    .applyform .uploadlist ul li a{ width: 120px;
        padding-top: 52px; height: 84px}
    .form-box{ min-width: auto;}
    .form-box .sex{ width: auto;}
    .sendsuccess{ width: 100%}
}
@media screen and (max-width: 429px) {
    #gravity .section0 .earthWrap,#gravity .section0{ height: 140vh;}

}