@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");


@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: #20237f;
    --bgColor1: #c90b0d;
    --bgColor3: rgba(32,35,127, 1);
    --bgColor4: rgba(201,11,13, 1);
    --bgColor5: rgba(215,15,32, 1);
}

* {
    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;
}
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(--bgColor5);
}

.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 .menu{display: none;}
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;
    transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;/*Firefox 4 */
    -webkit-transition:all 0.5s ease-in-out;/* Safari疇�蕰𣚦hrome */
    -o-transition:all 0.5s ease-in-out;/* Opera */
}
.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:after {
    position: absolute;
    width: 90px;
    height: 2px;
    /*background-color: #FFDB6D;*/
    content: ' ';
    bottom: -10px;
    left: 50%;
    margin-left: -45px;
    border-radius: 10px;
    -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;
}

.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: 999;
}
header .navbg{border-top: 1px solid rgb(217,217,217); visibility: hidden; transition: all .4s ease-in-out; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; background: #fff; position: fixed; top: 100px; left: 0; width: 100%; height: 360px; z-index: 9;}
header.cur .navbg{ visibility: visible;}

.banner {
    /*position: absolute;*/
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
    width: 100%;
}

.bannerc {
    width: 100%;
    background-color: #F2F2F2;
}

.banner .info {
    position: absolute;
    width: 530px;
    top: 190px;
    left: 50%;
    margin-left: -265px;
    z-index: 999
}

.banner .t1 {
    font-size: 38px;
    color: #000000;
    line-height: 62px;
    text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.16);
    text-align: center;
}

.banner .t2 {
    margin: 0 auto;
    font-size: 62px;
    font-weight: 600;
    color: #fff;
    /*text-shadow: 0px 3px 8px rgba(0,0,0,0.16);*/
    text-align: center;
}

header .logo {
    margin: 6px 0 6px 80px;
}

header.static,header.static1 {
    background: #fff;
    -webkit-box-shadow: 0 0.3rem 6.6rem -2.5rem #222221;
    box-shadow: 0 0.3rem 6.6rem -2.5rem #222221;
}

header.header {
    position: relative;
    background: #fff;
}
.header1{ height: 100px; width: 1px;}

header .logo a {
    display: block;
    height: 76px;
    width: 260px;
    background: url("../image/logo.png") no-repeat center center;
    background-size: contain;
}

header.static .logo a, header.header .logo a,header.static1 .logo a{
    background: url("../image/logo.png") no-repeat center center;
    background-size: contain
}

header .nav {
    margin: 0 auto;
}

header .nav dl {
    position: relative;
}
header .nav dl dt{ height: 100px; display: flex;    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;}
header .nav dl dt a {
    display: inline-block;
    vertical-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #000;
    padding: 0 46px;
    position: relative;
}

header .nav:hover dd {
    opacity: 1;
    visibility: visible;
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
}

header .nav dl dd {
    padding-top: 16px;
    width: 100%;
    height: 360px;
    overflow: hidden;
    position: absolute;
    font-size: 16px;
    font-weight: normal;
    text-align: center;
    line-height: 26px;
    top: 100%;
    z-index: 99;
    visibility: hidden;
    border-right: 1px solid rgb(217,217,217);
}
header .nav dl:last-child dd{ border: 0;}
header.cur .nav dl dd{ visibility: visible;}
header .nav dl:hover dd {
}

header .nav dl dd a {

    display: block;
    line-height: 36px;
    color: #000;
    font-size: 20px;
    font-weight: 600;

}

header .nav dl dd a:hover {
    font-weight: bold;
    color: rgb(0, 78, 162);
}

header.static .nav a, header.static .lang a, header.header .nav a, header.static .lang dt,
header.static1 .nav a, header.static1 .lang a,header.static1 .lang dt
{
    color: #000;
}

header .nav dt > a:after {
    position: absolute;
    height: 3px;
    background-color: rgb(0, 78, 162);
    content: ' ';
    bottom: -2px;
    left: 0;
    right: 0;
    opacity: 0;
    z-index: 10;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transition: opacity .6s ease 0s, transform .6s ease 0s;
    transition: opacity .6s ease 0s, transform .6s ease 0s;
}

header .nav dl:hover a:after {
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

/*header .nav a:hover{ font-weight: bold;}*/

header .lang {
    font-size: 16px;
    margin-right: 80px;
}

header .lang dl {
    z-index: 9999;
    position: relative;
    height: 38px;
    line-height: 34px;
}



header .lang dt {
    position: relative;
    height: 34px;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    /*background: url("../image/down.png") no-repeat right center;*/
    background-size: 20px;
    padding-right: 26px;
    padding-left: 32px;
}

header .lang dd {
    display: none;
    width: 100%;
    position: absolute;
    left: 0;
    top: 34px;
    border-radius: 10px;
    border: 1px solid #000;
    background-color: #fff;
}

header .lang dd a {
    display: block;
    font-size: 16px;
    color: #000;
    text-align: center
}

header .lang dd a:hover {
    font-weight: bold;
    color: #004ea2
}

header .lang dl:hover dd {
    display: block;
}

header .lang dt::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 5px;
    width: 19px;
    height: 18px;
    background: url("../image/fth.png") no-repeat center center;
    background-size: contain;
}

header.static .lang dt::before,header.static1 .lang dt::before {
    background: url("../image/fth.png") no-repeat center center;
    background-size: contain;
}

/*header.static .lang dt,header.static1 .lang dt {*/
/*    background: url("../image/down.png") no-repeat right center;*/
/*}*/

/*header.static .lang dl, header.header .lang dl,header.static1 .lang dl {*/
/*    background: url("../image/down.png") no-repeat right center;*/
/*}*/

header .search {
    margin: 0 30px;
}

header .search a {
    display: block;
    background: url("../image/vector.png") no-repeat center;
    width: 20px;
    height: 20px;
}

header.static .search a, header.header .search a,header.static1 .search a {
    background: url("../image/vector.png") no-repeat center;
}

header .search img {
    height: 20px;
    display: block;
}

.banner video {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    object-fit: cover;
}

.banner .swiper-pagination-bullet {
    width: 15px;
    height: 15px;
    background: none;
    border: 1px solid #eed484;
    opacity: 1;
}

.banner .swiper-pagination-bullet-active {
    background: #eed484;
}

.swiper-container2 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.bgcolor {
    background: -webkit-linear-gradient(-45deg, #004ea2, #2e93ff, #b9dbff);
    background: linear-gradient(135deg, #004ea2, #2e93ff, #b9dbff);
}

.header-down {
    visibility: hidden;
    opacity: 0;
    border-top: 1px solid #000;
    position: absolute;
    width: 100%;
    height: 420px;
    z-index: 2;
    top: 100%;
    left: 0;
    background-color: #fff;
    transition: all .4s ease-in-out;
}

.header-down:hover {
    display: -webkit-flex;
    display: flex;

}

.header-l, .header-r {
    /*width: 400px;*/
    padding: 0 30px;
}

.header-l {
    border-right: 1px solid #000;
}

.header-r {
    border-left: 1px solid #000;
}

.header-r a{ height: 104px; width: 99px; background-size: contain;
    padding-top: 74px; font-weight: bold; text-align: center; color: #000; }
.swiper-container2 .title {
    position: absolute;
    left: 0%;
    text-align: center;
    top: 35%;
    width: 100%;
}

.swiper-container2 .title h3 {
    font-size: 64px;
    font-weight: 600;
    color: #fff;
    font-family: sans-serif, Arial;
    margin-bottom: 24px;
}

.swiper-container2 .title p {
    font-size: 64px;
    font-weight: 600;
    color: #fff;
    position: relative;
    display: inline-block;
}
.swiper-container2 .title p .more{ font-size: 18px; bottom: -90px; right: 0;}
header.cur .header-down {
    display: -webkit-flex;
    display: flex;
    opacity: 1;
    visibility: visible;
}

footer {
    background: #fff;
    padding: 20px 0 0 0;
    border-top: 1px solid #f5f5f5;
}

footer h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
}

footer .banshichu {
    width: 390px;
}

footer .banshichu input {
    border: 2px solid #000;
    margin-bottom: 10px;
}
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;
}
footer .liaojie a:last-child{ border: none;}
footer .liaojie span{ display: inline-block; margin: 0 14px; font-size: 18px;}

footer .copyright {
    line-height: 40px;
    background: #7E7F7F;
    color: #fff;
    margin-top: 20px;
}

footer .copyright a {
    color: #fff;
    margin-right: 20px;
}

.right_btn {
    position: fixed;
    right: 20px;
    bottom: 70px;
    z-index: 99999;
}

.right_btn a {
    display: block;
    width: 70px;
    height: 70px;
    -webkit-transition: all .35s ease;
    transition: all .3s ease;
    background:url("../image/top.png") no-repeat;
    background-size: cover;
}
.right_btn a:hover {
    background:url("../image/toph.png") no-repeat;
    background-size: cover;
}
.right_btn a img {
    display: block;
    width: 90px;
}

.right_btn a:hover {
    transform: translateY(-2px);
}

.cqcx {
    background-color: #F2F2F2;
    padding: 12px 0
}

.cqcx-l h4, .swiper-container3 h4 {
    font-size: 22px;
    line-height: 2
}

.cqcx-l h4 {
    text-indent: 16px;
}

.cqcx-box > img {
    cursor: pointer;
    width: 55px;
    height: 55px;
    margin: 0 26px
}

.cqcx-box button {
    margin: 0 42px
}

.cqcx .cqcx-l {
    border-right: 2px solid rgb(0, 78, 162);
    margin-right: 42px
}

.cqcx-r {
    width: 184px;
    height: 130px;
    position: relative
}

.swiper-container3 {
    overflow: hidden
}

.cqcx-r .container3-button-next {
    position: absolute;
    left: inherit;
    margin-top: 0;
    right: -82px;
    top: 56px;
    width: 55px;
    height: 55px;
    background: url("../image/rbtn.png") no-repeat center center;
}

.cqcx-r .container3-button-next:after {
    content: none
}

.service {
    height: 690px; position: relative;
    background-size: 100% 100%
}

.service .tip {
    position: absolute;
    top: 30px; left: 10%;
    font-size: 80px; color: #fff; z-index: 99; font-family: 敺株蔓��暺�;
    text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);
}
.service .more:hover {}


.service .gallery-top{ width: 100%; height: 690px;
    overflow: hidden; position: relative;}
.service .gallery-top .swiper-slide{  background-size: cover; background-repeat: no-repeat; background-position: center;}
.service .gallery-top:after{ content: ' '; display: block; z-index: 9; background: rgba(0,0,0,0.3); width: 100%; height: 100%; position: absolute;top: 0; left: 0;}
.service h3 {
    font-size: 64px;
    line-height: 4;
    color: #fff;
    margin-bottom: 30px;
    font-family: sans-serif, Arial
}

.swiper-container4 {
    /*width: 1000px;*/
    margin: 0 auto;
    overflow: hidden
}

.swiper-container4 .swiper-slide {
    position: relative;
    color: #fff;
    text-align: center;
    transition: 0.3s;
    cursor: pointer;
    transform: scale(0.8) translateY(20px);
    -webkit-box-shadow: 7px 7px 5px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:    7px 7px 5px 0px rgba(0, 0, 0, 0.2);
    box-shadow:         7px 7px 5px 0px rgba(0, 0, 0, 0.2);
}
.swiper-container4 .swiper-slide h4{ position: absolute; top: 0; left: 0; text-align: center; width: 100%; height: 100%; background: rgba(0,0,0,0.1);
    opacity: 0; font-weight: bold; font-size: 36px;
    padding-top: 175px;}
.swiper-container4 .swiper-slide-active{transform: scale(1);}
.swiper-container4 .swiper-slide-active h4{
    opacity: 1;}
.container4-box {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 180px;
    z-index: 99;
}
.container4-box .swiper-slide img{
    width: 100%;
}

.swiper-button-prev4 {
    width: 65px !important;
    height: 65px !important;
    background: url("../image/lbtn.png") no-repeat center center;
    background-size: cover;
}

.swiper-button-next4 {
    width: 65px !important;
    height: 65px !important;
    background: url("../image/rbtn.png") no-repeat center center;
    background-size: cover;
}
 .swiper-button-prev4:after, .swiper-button-next4:after {
    content: none
}

.winBox {
    width: 100%;
    height: 100px;
    overflow: hidden;
    position: relative;
}

.scroll {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

.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 #004ea2, -1px -1px 2px #004ea2, 1px 1px 1px #004ea2, -1px -1px 4px #004ea2;
    color: #fff;
}

.index-us {
    position: relative;
    height: 780px;
    background: url("../image/us.jpg?v3") no-repeat top center;
    background-size: cover;
}
.index-us .form{ width: 50%; height: 100%; background: rgba(255,255,255,.52); text-align: center; padding-top: 90px;}
.index-us .form h3{ display: inline-block;
    padding-left: 100px; margin: 0 auto; font-size: 40px; color: #fff; text-align: center; line-height: 100px; background: url("../image/contact-mail.png") no-repeat left center; background-size: 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(--bgColor);
}

.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{ width: 545px; margin: 0 auto;}

.form-box .more{
    cursor: pointer;
    font-weight: 400;
    line-height: 52px;
    right: 0;
}


.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(--bgColor);    color: #fff;
}
.inquiry input + label{background: #e4e4e4; border-radius: 10px;}

.tw-box{ margin: 30px 0; background: url("../image/diandian.png") repeat-x left center; position: relative;}
.tw-box > .mt1200::after{ content: ""; position: absolute; right: 0; top: 0; width:336px; height: 569px; background: url("../image/yuandian.png") no-repeat top left; background-size: auto 569px; z-index: 0}
.tw-btn{  top: 55%; height: 55px; width: 175px; left: 50%;
    margin-left: -600px; position: absolute; z-index: 99;}
#certify {
    position: relative;
    overflow: hidden;
    padding: 145px 0;

}
.tw-btn .swiper-button-prev5 , .tw-btn .swiper-button-next5{ position: static !important; width: 55px !important; height: 55px !important; display: inline-block; vertical-align: top; margin-right: 16px;}
.tw-btn .swiper-button-prev5:after, .tw-btn  .swiper-button-next5:after{ content: none !important;}
.tw-btn .more{
    position: absolute;
    right: 10px;
    top: -10px;
    border: 1px solid var(--bgColor);
    color: var(--bgColor);
    font-size: 12px;
    width: 110px;
    height: 24px;
    line-height: 22px;}
#certify .swiper-container5 {
}

#certify  .swiper-slide {
    width: 1200px;
    height: 510px;
    -webkit-transition: all 0.5s 0.5s;
    transition: all 0.5s 0.5s;
}
#certify  .swiper-slide .main{
    width: 1200px;
}
#certify  .swiper-slide .img{
    display:block; position: relative;
}
#certify  .swiper-slide .img img{ display: block; position: relative; z-index: 9; border-radius: 50%; opacity: 0;transition: all 0.2s 0.2s; width: 510px; height: 510px;}
#certify  .swiper-slide .img img.bg{position: absolute; opacity: 0;transition: all 0.5s 0.5s; left: 0; top: 0; z-index: 1 }
#certify  .swiper-slide .img .txt{ font-weight: bold; position: absolute; width: 100px; height: 100px; line-height: 100px; text-align: center; opacity: 0;color: #000; font-size: 28px; border-radius: 50%; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; z-index: 10; transition: all 0.5s 0.5s; background: rgba(0,160,233,.9)}
#certify  .swiper-slide.swiper-slide-active .img img.bg{position: absolute; opacity: 0.2;transition: all 0.8s 0.8s; left: -150px; top: 0; z-index: 1 }
#certify  .swiper-slide.swiper-slide-active .img img{opacity: 1}
#certify  .swiper-slide.swiper-slide-active .img .txt{opacity: 1}
#certify .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 5px;
    background-color: #00a9ab;
    width: 15px;
    height: 7px;
    opacity: 1;
    border-radius: 5px;
}

#certify .swiper-pagination-bullets .swiper-pagination-bullet-active {

    background-color: #83dedf;
    width: 45px;

}
#certify .round{ border: 1px dotted var(--bgColor); height: 600px; width: 600px; border-radius: 50%; position: absolute; top: 0; right:-300px;
    z-index: 10;}

#certify  .swiper-slide h1{  color: var(--bgColor); font-size: 50px; width: 440px;padding-top: 100px;}
#certify  .swiper-slide a.more{  color: var(--bgColor);
    margin-top: 60px; border: 1px solid   var(--bgColor);
    margin-left: 300px;}
#certify  .swiper-slide.swiper-slide-prev{  }
#certify  .swiper-slide.swiper-slide-next{ opacity: 0.2 }

#certify::before {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: -400px;
    z-index: -2;
    width: 800px;
    height: 800px;
    border-radius: 100%;
    border: 2px dotted #aebcce;
    content: '';
}

#certify::after {
    position: absolute;
    top: 50%;
    margin-top: -5px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: -5px;
    z-index: -1;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #4aa0d7;
    content: '';
    -webkit-transition: all 0.5s 1s;
    transition: all 0.5s 1s;
    -webkit-animation: circle2 10s 1s infinite;
    animation: circle2 10s 1s infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}



.banner1{ position: relative; width: 100%;overflow: hidden;}
.banner1 .txt{ position: absolute; padding: 20px 40px; border:2px solid #fff; background: rgba(0,0,0,.4); color: #fff; border-radius: 40px 0;
    left: 50%;top: 50%; font-size: 34px; font-weight: bold;
/*撅�銝剜遬蝷�  */
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    display: none;
}

.position{ padding: 12px 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;}



.about{  }
.about .title{ margin: 90px 0;  text-align: center; line-height: 50px; font-weight: bold; font-family: Calibri;}
.about .title span{ color: var(--bgColor)  }
.about .title span em{ color: var(--bgColor1)  }
.about .title img{ display: inline-block; vertical-align: top; height: 50px;
    margin-right: 20px;  }
.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 #004ea2, -1px -1px 2px #004ea2, 1px 1px 1px #004ea2, -1px -1px 4px #004ea2;
    color: #fff;
}



.about .aboutinfo dl{}
.about .aboutinfo dl dt{margin:0 70px; position: relative;}
.about .aboutinfo dl dt:after{
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    border-left:1px dashed var(--bgColor);
    z-index: 0;
}
.about .aboutinfo dl:last-child dt:after{ display: none;}
.about .aboutinfo dl dt .lay1{ background: rgb(255, 255, 255);
    background: -moz-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(32, 35, 127) 100%);
    background: -webkit-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(32, 35, 127) 100%);
    background: -o-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(32, 35, 127) 100%);
    background: -ms-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(32, 35, 127) 100%);
    background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(32, 35, 127) 100%);
    border-radius: 50%; padding: 10px; position: relative; z-index: 2;
}
.about .aboutinfo dl dt .lay2{ background: #fff; border-radius: 50%;padding: 10px;}
.about .aboutinfo dl dt .lay2 img{ border: 1px dotted  var(--bgColor1); border-radius: 50%;padding: 10px;}
.about .aboutinfo dl dd{ }
.about .aboutinfo dl dd h1{ font-family: Calibri; color: var(--bgColor); font-size: 38px; line-height: 80px; }
.about .aboutinfo dl dd .info{ font-size: 34px;  line-height: 60px; color: #000;}


.authentication{
    padding-bottom: 30px;}
.authentication .swiper-container{
    height: 700px; width: 100%;
    position: relative;
    overflow: hidden;
}
.authentication .rzmain{ background: url("../image/about/rzbg.jpg") no-repeat center center; background-size: cover; }
.authentication .swiper-container{ width: 680px; margin: 0 auto;}
.authentication .swiper-container .swiperbtns{ width: 680px; margin: 0 auto; position: absolute; top: 50%; left: 50%; transform: translateX(-50%); z-index: 10;}
.authentication .swiper-container .swiperbtns .swiper-button-next4{ width: 65px; height: 65px; }
.authentication .swiper-container .swiperbtns .swiper-button-prev4{ width: 65px; height: 65px;}
.swiper-button-next:after, .swiper-button-prev:after{ display: none;}
.authentication .swiper-container .swiper-slide{
    width: 100%; height: 100%; background-size: cover; background-position: center;
}
.authentication .swiper-container .swiper-slide .ly1{
    animation: rotate_image 5s linear infinite;
    width: 410px; height: 410px;
    background: rgb(255, 255, 255);
    background: -moz-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(32, 35, 127) 100%);
    background: -webkit-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(32, 35, 127) 100%);
    background: -o-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(32, 35, 127) 100%);
    background: -ms-linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(32, 35, 127) 100%);
    background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(32, 35, 127) 100%);
    border-radius: 50%; padding: 20px; position: relative; z-index: 2;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.5);
    -moz-box-shadow:    0px 0px 10px 0px rgba(255, 255, 255, 0.5);
    box-shadow:         0px 0px 20px 10px rgba(255, 255, 255, 0.5);

}
.authentication .swiper-container .swiper-slide .ly2{background: #fff; border-radius: 50%;padding: 10px; width: 370px; height: 370px; margin: 0 auto; animation: rotate_image1 5s linear infinite;}
.authentication .swiper-container .swiper-slide .ly3 {border: 1px dotted  var(--bgColor1); border-radius: 50%; width: 350px;height: 350px;
    position: relative;
    overflow: hidden;}
.authentication .swiper-container .swiper-slide .ly3 img{ max-height: 120px;}
.authentication .swiper-container .swiper-slide .ly3 h2{ text-align: center;margin-top: 10px; max-width: 300px;}
.authentication .swiper-container .swiper-slide .ly3 .after{  width: 370px;height:370px; background: #fff; position: absolute; top: 0; left: 0;
    opacity: 0;}
.authentication .swiper-container .swiper-slide .ly3 .after.animat{  animation: rollOutLeft 300ms linear;}
.page{ text-align: right; width: 100%;}
.page a,.page span{ display: inline-block; border-radius: 50%; width: 50px; height: 50px; line-height: 50px; text-align: center;
font-size: 24px; margin: 10px 0; color: rgb(191,191,191);
}
.page span{   color: #fff;
    background-clip: content-box;
    box-sizing: border-box;
    background-image: -webkit-linear-gradient(135deg, rgba(0,78,162,.7), rgba(46,147,255,.7), rgba(185,219,255,.7));
    background-image: linear-gradient(135deg, rgba(0,78,162,.7), rgba(46,147,255,.7), rgba(185,219,255,.7));}

.notice{ background: url("../image/about/bgline.jpg") repeat-x; background-size: 100% 100%;}
.mn-swiper{ width: 1200px;overflow: hidden;  margin-top: 80px; }
.mn-swiper .swiper-slide{ position: relative;padding: 30px 0;  transform: scale(0.8) translateY(20px) !important;}
.mn-swiper .swiper-slide h3{ font-size: 18px; padding: 10px 0;
    opacity: 0;}
.mn-swiper .swiper-slide dl{ border: 6px solid #fff; border-radius: 10px; position: relative;    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:    0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    box-shadow:         0px 0px 20px 10px rgba(0, 0, 0, 0.5);}
.mn-swiper .swiper-slide dl dt{ border-radius: 10px;  overflow: hidden;}
.mn-swiper .swiper-slide dl dd{
    opacity: 0; background: rgba(0,0,0,0.2); position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: flex; justify-content: center; align-items: center;}
.mn-swiper .swiper-slide dl dd a{ color: #fff; font-size: 12px; word-break: break-all; padding-top: 23px;
    padding-left: 10px; border-radius: 50%; width:80px; border: 1px solid #fff; height: 80px;background: url("../image/jt.png") no-repeat 50px center rgba(0,0,0,0.5); background-size: 20px;}
.mn-swiper .swiper-slide.swiper-slide-active{ transform: scale(1) !important;}
.mn-swiper .swiper-slide.swiper-slide-active h3{ opacity: 1;}
.mn-swiper .swiper-slide dl:hover dd { opacity: 1;}
.mn-swiper .btnpage { position: relative; width: 200px; float: right; margin-top: 40px;}
.mn-swiper .btnpage .swiper-button-next{ background: url("../image/jt.png") no-repeat; z-index: 999; background-size: 100%;margin-top: -32px; }
.mn-swiper .btnpage .swiper-button-prev{background: url("../image/jt1.png") no-repeat; z-index: 999; background-size: 100%; margin-top: -32px; }
.mn-swiper .btnpage .swiper-pagination-current{ font-weight: bold; font-size: 20px;}
.mn-swiper img{ width: 100%;height: 100%;}
.notice .noticelist{ margin-top: 80px;
    padding-bottom: 80px;}
.notice .noticelist dl{ background: #fff; border-radius: 20px; padding: 30px 20px; height: 260px; margin-bottom: 30px;}
.notice .noticelist dl dt{ position: relative; overflow: hidden; width: 300px;}
.notice .noticelist dl dt:after{ content: ''; position: absolute; left: -50px; top: -50px; border-radius: 50%; width: 100px; height: 100px; background: rgba(201, 11, 13,0.5); z-index: 1;}
.notice .noticelist dl dt:hover a{ opacity: 1;}
.notice .noticelist dl dt img{  width: 100%;}
.notice .noticelist dl dd{ text-align: left; padding: 15px 10px; width: 820px; position: relative;}
.notice .noticelist dl dd a{ bottom: 0;}
.notice .noticelist dl dd a h1{ color: #000; font-size: 20px; text-align: left; height: 54px;}




.join{ width: 100%; height: 590px;
    margin-bottom: 50px; background: url("../image/about/joinbg.jpg?v1") center no-repeat; background-size: cover; position: relative;}
.join .mt1200{ height: 100%; z-index: 2; position: relative;}
.join h1{ line-height: 60px; color: #fff; font-size: 30px; text-align: center; border-radius: 20px 0; width: 700px;margin: 0 auto;
    background-clip: content-box;
    box-sizing: border-box;
    background-image: -webkit-linear-gradient(135deg, rgba(0,78,162,.7), rgba(46,147,255,.7), rgba(185,219,255,.7));
    background-image: linear-gradient(135deg, rgba(0,78,162,.7), rgba(46,147,255,.7), rgba(185,219,255,.7));
}
.join .dllist{
    padding-top: 120px;}
.join dl{
    margin-top: -32px;}
.join dl dt{
    margin-right: 10px; font-weight: bold; background: var(--bgColor); border-radius: 10px; height: 70px; text-align: center; line-height: 70px; padding: 0 20px; font-size:24px;
    margin-top: 12px; color: #fff; }
.join dl dd{
    padding-left: 10px; position: relative; z-index: 2; background: url("../image/about/pt1.png") no-repeat; font-family: Calibri; background-size: cover; color: #fff; width: 120px; height: 120px; font-size: 32px; font-weight: bold; text-align: center; line-height: 120px;}
.join dl:nth-child(2) dt{ background: #fff; color: #000;}
.join dl:nth-child(2) dd{ background-image: url("../image/about/pt2.png"); color: #000; position: relative; z-index: 0}
.job-list{}
.job-list dl{ margin: 40px 0;  padding: 20px 40px;}
.job-list dl dt{}
.job-list dl dt h1{ background: var(--bgColor); text-align: center; color: #fff; font-weight: bold; border-radius: 10px;}
.job-list dl dt h1 a{ color:#fff; font-size: 30px; font-weight: bold; text-decoration: none;}
.job-list dl dd p{ color:var(--bgColor); font-size: 16px; line-height: 30px; margin-top: 10px; font-weight: bold;}
.job-list dl dd p span{ color: #000;
    margin-right: 20px;}
.job-list dl dd{ position: relative; border: 2px solid rgb(217,217,217);
    border-radius: 10px; padding: 20px 40px 100px; margin-top: 20px; }
.job-list dl dd a{ }
.job-list dl dd a.apply{}
.job-list dl dd a.more{ bottom: 20px;}

.jobmore{ width: 800px; margin: 0 auto; padding: 20px 0; text-align: center;}
.jobmore .title{ padding: 0 20px; line-height: 60px; text-align: center; font-size: 30px; font-weight: bold; color: #fff;background: var(--bgColor); border-radius: 10px;}
.jobmore .jobinfo{
    margin-top: 30px; border: 2px solid rgb(217,217,217); border-radius: 20px; padding: 20px 40px; text-align: left;}
.jobmore .jobinfo h2{ font-size: 24px; font-weight: bold; color: var(--bgColor); border-bottom: 1px solid rgb(217,217,217);
    padding-bottom: 10px; font-weight: bold;}
.jobmore .jobinfo .p{ color:#000; font-size: 16px; line-height: 30px; margin-top: 10px; font-weight: bold; display: flex; font-weight: bold;}
.jobmore .jobinfo .p span{ color: #000;
    margin-right: 20px;}
.apply{  padding-top: 90px;}
.applymain{ background: url("../image/about/jobapply.jpg") no-repeat; background-size: cover; width: 100%; min-height: 600px; position: relative;}
.applymain .form{ width: 500px;
    margin-left: 100px;
    padding-top: 120px;}
.w48{ width: 48%}
.w60{ width: 60%}
.w38{ width: 38%}
.applymain .form-group{ margin: 10px 0; position: relative;}
.applymain .form-group input,.applymain .form-group select{background: rgba(255,255,255,0.8);}
.applymain .form-group input::placeholder{ color:#333}
.applymain .form-group .button1{ width: 140px; margin: 10px 0 0 auto;}
.applymain .form-group.fileline{background: rgba(255,255,255,0.8); height: 48px; border-radius: 10px; padding: 0 20px; border: 2px solid #eaeaea;}
.applymain .form-group.fileline img{ width:20px;}
.applymain .form-group .more{ position: initial; display: block;}
.button4{width: 90px; height: 48px;
    margin-left: 10px; background:#e4e4e4; color: #000; border: none; font-size: 18px;  border-radius: 10px;}
.button4.cur{ background: var(--bgColor); color: #fff;}
.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;}

.yy{
    -webkit-box-shadow: 0px 5px 7px 0px rgba(50, 50, 50, 0.4);
    -moz-box-shadow:    0px 5px 7px 0px rgba(50, 50, 50, 0.4);
    box-shadow:         0px 5px 7px 0px rgba(50, 50, 50, 0.4);
}

.servicemain{padding-bottom: 60px;}
.servicemain .title{ margin: 90px 0;  text-align: center; line-height: 50px; font-weight: bold; font-family: "敺株蔓��暺�";}
.servicemain .title img{ display: inline-block; vertical-align: top; height: 50px;  margin-right: 20px;  }
.servicemain dl{ border-top: 1px solid rgb(230,230,230); padding: 20px 20px 120px 20px;}
.servicemain dl dt{ }
.servicemain dl dt img{ border-radius: 20px; width: 600px; height: 338px;}
.servicemain dl dd{position: relative;padding-left: 20px;}
.servicemain dl dd a{ color: #000; }
.servicemain dl dd h1{ line-height: 120px; color: #000; font-weight: bold; background: url("../image/jt.png") no-repeat right center; background-size: 28px; padding-right: 32px; font-size: 28px; display: inline-block;}
.servicemain dl dd .info{ border-radius: 20px; background: #fff; width: 600px; height: 300px;
    position: absolute;    transform: translateX(-100px); top: 120px; padding: 30px; font-size: 20px;}
.servicemain dl:nth-child(even) {
    flex-direction: row-reverse;
    -webkit-box-pack: justify;-webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between
}
.servicemain dl:nth-child(even) dt{}
.servicemain dl:nth-child(even) dd{}
.servicemain dl:nth-child(even) dd h1{
    padding-left: 50px;}
.servicemain dl:nth-child(even) dd .info{ transform: translateX(20px); }

.service1 {
    padding-top: 80px;
    padding-bottom: 80px;}
.service1 .title{ background: var(--bgColor); 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(--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: 130px;}
.service2 .title{ background: var(--bgColor); 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{transform: translateX(100px) translateY(100px); 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 .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;}



.ggmore{background: #fff; padding-bottom: 50px;}
.ggmore .events{ font-size: 60px;
    margin-top: 30px;
    background-image: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,.1));
    color: transparent;
    -webkit-background-clip: text;}
.ggmore .ggmoremain{ background:#fff; position: relative;
    padding-top:70px;}
.ggmore .ggmoremain .position{ padding-left: 20px;}
.ggmore .ggmoremain .gg-ad{-webkit-box-shadow: 0px 5px 7px 0px rgba(50, 50, 50, 0.4);
    -moz-box-shadow:    0px 5px 7px 0px rgba(50, 50, 50, 0.4);
    box-shadow:         0px 5px 7px 0px rgba(50, 50, 50, 0.4); background: var(--bgColor); padding: 10px 90px; color:#fff; position: absolute; top: -150px; left: 20px; height: 200px; width: 100%; font-size: 24px;}
.ggmore .ggmoremain .gg-ad:after{ content: ''; position: absolute; width: 20px; height: 100%; background: var(--bgColor1); left: 30px;}
.ggmore .ggmoremain .gg-ad:before{content: ''; position: absolute; width: 2px; height: 100%; background: #FFF; left: 60px;}
.ggmore .ggmoremain .gg-ad em{ color: rgb(128,128,128); display: block; border-top: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding: 6px 0; )}
.ggmore .ggmoremain .gg-info {padding: 10px 60px; line-height: 30px;}
.ggmore .ggmoremain .gg-info img{ max-width: 100%;}
.ggmore .gg-nav{}
.ggmore .gg-nav a{ margin: 20px 0; color: rgb(128,128,128); border-radius: 50px; font-weight: bold;}
.ggmore .gg-nav a.fh:hover{ background:var(--bgColor); color:#fff;}
.ggmore .gg-nav a img{ height: 36px;  margin-right: 10px;}
.ggmore .gg-nav a.fh{ border-radius: 10px; border: 1px solid var(--bgColor); padding: 10px 50px;}


.inquiry{}
.inquiry .title1,.ocean .title1,.oceancount .title1,.spec .title1,.conversion .title1,.incoterms .title1,.contcats .title1,.jobmore .title1,.apply .title1,.job .title1{ margin-bottom: 50px;}
.inquiry .title1 span,.ocean .title1 span,.oceancount .title1 span,.spec .title1 span,.conversion .title1 span,.incoterms .title1 span,.contcats .title1 span,.jobmore .title1 span,.apply .title1 span,.job .title1 span{ display: inline-block;}
.inquiry .title1 img,.ocean .title1 img,.oceancount .title1 img,.spec .title1 img,.conversion .title1 img,.incoterms .title1 img,.contcats .title1 img,.jobmore .title1 img,.apply .title1 img,.job .title1 img{ display: inline-block;    vertical-align: top;
    height: 50px;
    margin-right: 20px;}
.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; color: var(--bgColor);}
.inquiry h3 img{ display: none; 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;
    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(--bgColor);}
.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(--bgColor);}
.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(--bgColor);
    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 .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(--bgColor); 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{ position: relative;}
.inquiry .send .more{ position: initial; display: block; margin:30px auto; cursor: pointer;}
select{ position: relative;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url("../image/down.png") right center no-repeat;
    background-position: 96% center !important;
}
option{ margin: 0 10px; padding: 0 10px;}

.cfs{ display: none}

.cfs .title1{ padding:20px 0 0;color: rgb(242,242,242);font-size: 90px; margin-bottom: -80px;}
.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: 1080px; padding: 30px; margin: 0 auto; border-radius: 20px; position: absolute; top: -400px; left: 50%;
    margin-left: -540px;
}
.filter .form label{ font-size: 20px; font-weight: bold;}
.filter .form .input1{ width: 100% !important; text-indent: 0px; background: #fff;
    padding-left: 10px;}
.filter .form .input1:hover{ border: 2px solid var(--bgColor5);}
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;}
.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;}
.filter .form .button3{ width: 180px; height: 54px; text-align: left;
    padding-left: 20px; cursor: pointer;
    margin: 0; background: url("../image/vector.png") no-repeat 80% center #fff; border-radius: 50px; border: 2px solid rgb(65,113,156);}
.filter .form .button3:hover{ border: 2px solid var(--bgColor5);}
.cfs #filter{ padding:0 0 40px 0; display: none; 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(--bgColor); line-height: 30px; padding: 10px 0;}
.cfs #result .tips img{ margin-right: 20px; }
.cfs #result .rule{  line-height: 28px;border-bottom:1px solid var(--bgColor) ; padding: 20px 0; }
.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(--bgColor); 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')
}

.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 i{
    margin-right: 10px;}
.ocean{    padding-top: 30px;}

.ocean .abc{ padding: 50px 0;}
.ocean .abc a{ font-size: 16px; border: 2px solid #f1f1f1; background: #f1f1f1; 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{ background: #fff; border: 2px solid var(--bgColor1);}
.ocean dl{ margin: 10px 0; padding: 120px 0 10px 0; border-bottom: 2px solid var(--bgColor);  margin-top: -110px;}
.airline  dl{  padding: 110px 0 10px 0; }

.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: var(--bgColor1); border: 2px solid var(--bgColor1); 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;}

.incoterms{}
.incoterms .info img{ width: 100%;}
.incoterms .info ul{
    padding-left: 20px;}
.incoterms .info li{ list-style: initial; color:#000}
.incoterms .info li p{ color: #000;}
.incoterms .info strong{ display: inline-block;}
.incoterms strong::first-letter {
    color: var(--bgColor1);
}
.entry .topabc{
    position: relative; z-index: 1}
.entry table{ width: 100%;}
.entry table th{ padding: 15px 15px; background: var(--bgColor); color: #fff; border-right: 1px solid #fff;text-align: left;  border-left: 1px solid #fff;}
.entry table{ padding-top: 110px; margin-top: -100px}
.entry table td{ padding: 15px 15px; border-right: 1px solid #fff;border-bottom: 1px solid #fff; text-align: left; border-left: 1px solid #fff;}
.entry table td:nth-child(1){  font-weight: bold; font-size: 18px; }
.entry table.cur td:nth-child(1){ color: var(--bgColor1);}
.entry table .first td{ border-top: 1px solid var(--bgColor);}
/*.entry .topabc{ position: fixed; top: 0; left: 0; width: 100%;background: #fff; z-index: 9}*/
.entry .shippingterms{background: #f1f1f1; padding: 20px 0;}
.entry .shippingterms.fiexd{
    padding-top: 203px;}
.spec{}
.spec .btns{
    padding: 30px 0;}
.spec .btns a{ border: 2px solid #fff; background: rgb(242,242,242);  text-align: center; line-height: 40px; margin: 0 20px; color: #000; width: 150px ; border-radius: 10px;
    display: block; font-weight: bold;}
.spec .btns a.cur,.spec  .btns a:hover{ background:#fff; border:2px solid var(--bgColor1); color: #000;}
.spec table{ border-radius: 10px;
    overflow: hidden;}
.spec table td{ line-height: 40px;
    padding-left: 10px; border-bottom: 1px solid #fff; border-right: 1px solid #fff;}
.table1{border-radius: 10px; width: 100%; background: #f1f1f1; margin: 20px auto;
    overflow: hidden;}
.table1 tr td.title{font-weight: bold; text-align: center; }
.table1 tr th{ line-height: 40px; background: var(--bgColor); text-align: left; text-transform: uppercase; color: #fff;
    padding-left: 10px;}
.table1 tr td{ line-height: 40px; text-align: center;
    padding-left: 10px; border-bottom: 2px solid #fff; border-right: 2px solid #fff;}
.table1 tr td:last-child{ border-right: 0;}
.conversion{}
.conversion .title3{ font-weight: bold; text-align: center; line-height: 40px; width: 800px;  margin: 0 auto;}
.conversion .rules{ width: 800px; margin: 0 auto;
    padding: 40px 0;}
.converform{ width: 800px; margin: 0px auto;border-bottom:1px solid var(--bgColor); padding: 10px 0}
.converform h5{ font-weight: bold; text-align: center; line-height: 40px; width: 60px; font-size: 18px;}
.converform a img{ width:40px; margin: 0 20px;}
.converform input.input1{ width: 170px; text-indent: 15px;}
.converform select.input1{ width:160px; text-indent: 0px;
    padding-left: 15px;}
.converform a{ font-size: 24px; color:#000; margin: 0 10px;}
.ctsearch{ width: 340px; }
.ctsearch input{ width: 230px;}
.ctsearch button{ width: 100px; margin-top: 0; margin-left: 10px;}
.allsearch{ width: 380px; }
.allsearch input{ width: 270px;}
.allsearch button{ width: 100px; margin-top: 0; margin-left: 10px;}


.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); border-radius:10px; cursor: pointer;}
.oceancount .tabli li a{ font-size:20px; color: #000}
.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: 2px solid  var(--bgColor1);}
.oceancount .form{
    padding-top: 60px;}
.oceancount .form li{ padding: 10px 0; border-top: 1px dotted var(--bgColor);}
.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; border-radius: 10px; padding: 20px;}
.oceancount  .jsresult h3{ font-size: 20px; border-bottom: 1px solid var(--bgColor);}
.oceancount  .jsresult dl{ background: #fff; border-radius: 50px; overflow: hidden;
    padding-right: 20px;
    margin-top: 30px;}
.oceancount  .jsresult dl dt{  font-weight: bold;background: var(--bgColor);
    color: #fff; border-radius: 50px; text-align: center; line-height: 50px; font-size: 18px; padding: 0 40px; width: 240px;}
.oceancount  .jsresult dl dd{ font-weight: bold;}

.dialog{ position: fixed; top: 50%; display: none;
    margin-top: -250px; left: 50%; padding: 20px 40px;
;
    margin-left: -450px; width: 900px; height: 500px; border-radius: 20px; background: #fff; z-index: 10000;
    box-shadow: 0 0 10px rgba(0,0,0,.5);
}
.dialog .img{ width: 400px; height: 460px;}
.dialog img{ width: 100%; height: 100%; object-fit: contain}
.dialog .info{ height: 460px; overflow-y: scroll;}
.dialog .close{  position: absolute; right: 2px; top: 2px; background: url("../image/close.png") no-repeat;
    background-size: 100%; width: 26px; height: 26px;}
#hrefimg{ position: relative; background-repeat: no-repeat; background-position: center; width: 100%; height: 300px; background-size: cover; overflow: hidden;}
#hrefimg h2{ position: absolute;  text-align: center; width: 100%; top: 80px; left: 0; color: #fff;}
#hrefimg a{ position: absolute;  text-align: center; width: 120px; top: 130px; left: 50%;
    margin-left: -60px; border-radius: 50px; padding: 3px 0;  border: 1px solid #212122; color: #212122; background: rgba(255,255,255,.5); font-weight: bold;}
#hrefimg a:hover{ background: var(--bgColor); border: 1px solid var(--bgColor);}
.contacts-top{
    margin-top: 70px;
    margin-bottom: 30px;}
.contacts-top .title {
    font-size: 22px;
    margin-right: 26px
}

.types {
    width: 196px;
    height: 32px;
    line-height: 29px;
    margin: 32px 0 32px 10px;
    border-radius: 4px;
    font-size: 24px;
    color: #595959;
    background: #e4e4e4;
    position: relative;
}

.types .sheng {
    width: 100%;
    padding: 0 10px;
    text-shadow: 0 0 0 #000;
    font-size: 18px;
    color: transparent;
}

.types::after {
    content: "";
    position: absolute;
    width: 27px;
    height: 12px;
    background: url("../image/about/dimg.png") center center no-repeat;
    background-size: cover;
    right: 10px;
    top: 50%;
    margin-top: -6px;
    z-index: 1;
}

.types .sheng_empty {
    position: absolute;
    z-index: 88;
    left: 0;
    top: 28px;
    border-radius: 2px;
    white-space: nowrap;
    width: 100%;
    max-height: 186px;
    background: #e4e4e4;
    display: none;
    overflow-y: auto;
}

.types .sheng_empty li {
    line-height: 32px;
    text-indent: 10px;
    color: #595959;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.types .sheng_empty li:hover {
    color: #000;
    font-weight: bold;
}

.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;
}
.cs-btn:hover {
    background-image: url("../image/about/cs-imgh.png");
}
.sx-btn {
    width: 96px;
    height: 32px;
    text-align: center;
    line-height: 30px;
    border-radius: 16px;
    border: 2px solid #595959;
    font-size: 18px;
    color: #595959;
    cursor: pointer;
}

.sx-btn:hover {
    border-color: var(--bgColor);
}

.contacts-info {
    position: relative;
    min-height: 600px;
    transition: height .3s ease-in-out;
    background: url("../image/about/con-map.png") center 26px no-repeat;
    z-index: 1;
}

.contacts-info::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: rgba(80, 80, 80, .5);
}
.contcats{ background: url("../image/about/rzbg.jpg") no-repeat; background-size: cover; background-position: center center; padding: 30px 0 90px 0;}
.contcats .title1{ color: #fff;}
.contcats .descmain{ position: relative; width: 482px; margin: 0 auto; }
.contcats .descmain .swiper-container{ width: 100%;background: url("../image/contacts/phonebg.png") no-repeat top center;
    height: 100%;
    position: relative;
    overflow: hidden;}
.contcats .descmain .swiper-slide{  width: 482px; height: 885px;
    padding: 200px 96px 0px 96px;
}
.contcats .descmain .title{ font-size: 24px; font-weight: bold;margin-bottom: 20px;background: #fff;}
.contcats .descmain .desc{ background: #fff; height: 400px;}
.contcats .descmain .text{ font-size: 16px; margin: 10px 0;}
.contcats .descmain .map{ font-size: 18px; }
.contcats .descmain .map img{ width: 90%; border: 1px solid rgb(230,230,230); display: block; margin: 30px auto 0;}
.contcats .descmain .more{ left: 50%; bottom:0px; transform: translateX(-50%)}
.contcats .descmain .swiper-button-next4{  right: -50px;}
.contcats .descmain .swiper-button-prev4{ left:-50px;}
 .swiper-button-next4:hover{ background-image: url("../image/rbtnh.png");}
 .swiper-button-prev4:hover{ background-image: url("../image/lbtnh.png");}




.searchmain{padding: 20px;
    width: 450px;
    background: #fff;
    position: fixed;
    left: 50%;
    margin-left: -225px;
    border-radius: 20px;
    top: 15%;
    z-index: 9999999;}
.search-result{ padding: 20px 0;}
.search-result a{ font-size: 18px; color: #000; line-height: 42px; display: block; border-bottom: 1px solid #f5f5f5;}

@keyframes rotate_image{
    100% {
        transform: rotate(360deg);
    }
}
@keyframes rotate_image1{
    100% {
        transform: rotate(-360deg);
    }
}
@-webkit-keyframes circle2 {
    from {
        -webkit-transform: rotate(0deg) translateX(400px) rotate(0deg);
        transform: rotate(0deg) translateX(400px) rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg) translateX(400px) rotate(-360deg);
        transform: rotate(360deg) translateX(400px) rotate(-360deg);
    }
}

@keyframes circle2 {
    from {
        -webkit-transform: rotate(0deg) translateX(400px) rotate(0deg);
        transform: rotate(0deg) translateX(400px) rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg) translateX(400px) rotate(-360deg);
        transform: rotate(360deg) translateX(400px) rotate(-360deg);
    }
}


@-webkit-keyframes rollOutLeft {
    0% {
        opacity: 1
    }
    to {
        opacity: 0.9;
        -webkit-transform: translate3d(-100%, 0, 0) ;
        transform: translate3d(-100%, 0, 0)
    }
}

@keyframes rollOutLeft {
    0% {
        opacity: 1
    }
    to {
        opacity: 0.9;
        -webkit-transform: translate3d(-100%, 0, 0) ;
        transform: translate3d(-100%, 0, 0)
    }
}





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

    body {
        overflow-x: hidden
    }

    .mt1440 {
        width: 100%;
    }
    #services .swiper-button-prev, .info2 .swiper-button-prev{ display: none;}
    #services .swiper-button-next, .info2 .swiper-button-next{ display: none;}
    .header-l{
        opacity: 0;}

}
@media screen and (max-width: 1024px) {
    * {
        touch-action: auto;
    }
    body {
        overflow-x: hidden
    }
    .mt1200{ width: 100%}
    .mt900{ width: 100%}
    .mt1440 {
        width: 100%;
    }
    header .nav{ background: #fff; position: fixed; top: 89px; left: 0; width: 100%; z-index: 999;
        overflow: scroll; display: none; height: 100%;
        margin-left: 0;flex-direction: column;}
    header .nav dl{ width: 100%;}
    header .nav dl dt a{ line-height: 50px;}
    header .nav dl dd a,header .nav dl dt a{ color: #000;}
    header .nav dl dt{ line-height: 50px; position: relative;}
    header .nav dl dt:after{ content: ''; display: block; clear: both; position: absolute; right:20px; top:22px; background: url("../image/down1.png") no-repeat;
        width: 16px; height: 16px; background-size: 100%;}
    header .nav dl dd{ position: initial; width: 100%; visibility: visible; text-align: left; display: none;
        padding-top: 0; height: auto;
        opacity: 1;}
    header .nav dl dd a:first-child{  box-shadow: none; }
   header .search,.lang{ display: none }
    header .nav dl dd a{ display: inline-block; width: 48%; font-size: 16px; text-align: center}
    header .nav dl.mobilelang{ display: block;}
    header .menu{ display: block;margin-right: 20px; width: 30px; background: url("../image/menuh.png") center no-repeat; height: 48px; background-size: 100%;}
    header.static .menu,header.header .menu{ background-image: url("../image/menuhh.png");}
    #services .serverswiper{ width: 100%}
    #contcat .form p{ font-size: 54px;}
    footer .liaojie{ position: absolute; right: 20px;}
    .advantage .tabhead{ text-indent: 0; text-align: center; font-size: 30px; color: #000; font-weight: bold; line-height: 40px;}
    .advantage ul{ padding: 20px; display: none;}
    .advantage li{ padding: 20px 50px;}
    .activities .gydesc p{ font-size: 14px;}
    .service3 .cate ul.tabli{ padding: 20px}
    .swiper-container2 .title h3{ font-size: 40px;}
    .swiper-container2 .title p{ font-size: 36px;}
}



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

    * {
        touch-action: auto;
    }
    header .nav div.header-r{ display: flex;
        margin-top: 20px;}
    .mt1200{ width: 100%}
    .banner1{ width: 100%;
        overflow: initial;}
    .banner1 img{ width: 100%; height: 100%; object-fit: cover;}
    .banner1 .txt{ font-size: 26px; padding: 10px 10px; width: 90%; text-align: center;}
    .serverswiper .swiper-pagination{ display: block;}
    .refresh{ display: none;}
    header .logo{ margin: 20px 0 20px 20px;}
    header .nav{ background: #fff; position: fixed; top: 89px; left: 0; width: 100%; z-index: 999;
        overflow: scroll; display: none; height: 100%;
        margin-left: 0;flex-direction: column;}
    header .logo a{ height: 60px; background-size: contain !important;}
    header.static, header.static1{ box-shadow:none;}
    header .nav dl{ width: 100%;}
    header .nav dl dt a{ line-height: 50px;}
    header .nav dl dd a,header .nav dl dt a{ color: #000;}
    header .nav dl dt{ line-height: 50px; position: relative;}
    header .nav dl dt:after{ content: ''; display: block; clear: both; position: absolute; right:20px; top:22px; background: url("../image/down1.png") no-repeat;
        width: 16px; height: 16px; background-size: 100%;}
    header .nav dl dd{ position: initial; width: 100%; visibility: visible; text-align: left; display: none;
        padding-top: 0; height: auto;
        opacity: 1;}
    header .nav dl dd a:first-child{  box-shadow: none; }
    .search,.lang{ }
    header .nav dl dd a{ display: inline-block; width: 48%; font-size: 16px; text-align: center; line-height: 50px;}
    header .nav dl.mobilelang{ display: block;}
    header .menu{ display: block;margin-right: 20px; width: 30px; background: url("../image/menuh.png") center no-repeat; height: 48px; background-size: 100%;}
    header.static .menu,header.header .menu, header.static1 .menu{ background-image: url("../image/menuh.png");}

    .banner{ height:700px;}

    .swiper-container,.swiper-container1 ,.swiper-container2,.swiper-container3{
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
    }
    .swiper-container2 .title p .more{ right:25px;}
    .swiper-container2 .title{ top: 30%;}
    .cqcx-box{ height: auto; position: relative;}
    .cqcx-r{ display: none;}
    .cqcx .cqcx-l{ border: none; margin:0 auto;}
    .cqcx .cqcx-l .input2{ margin: 5px;}
    .cqcx-box > img.sort{ position: absolute; right: 10px; top:40px; width: 40px; height: 40px; margin: 0; display: none}
    .cqcx-box #searchcfs{ position: absolute; right: 10px; top:40px; width: 40px; height: 40px; margin: 0;}
    .cqcx-box #searchcfs img{width: 40px; height: 40px; }
    .swiper-container4{ width:80%;}
    .form-group1{ width: 100%; height: 80px;}
    .form-group1 > select,.form-group1 > input{  font-size: 18px;}
    .form-box .more{ bottom: 0;}
    .form-box .btn, .btnmain .btn{ margin: 0;}
    .scroll li{ font-size: 30px; line-height:80px;}
    #certify .swiper-slide{ width: 100%;}
    #certify .swiper-slide .main{ width: 100%; flex-wrap: wrap; flex-direction: column-reverse;}
    #certify .swiper-slide .img img{ width: 224px; height: 224px; margin: 0 auto;}
    #certify .swiper-slide.swiper-slide-active .img img.bg{ left: 30px;}
    #certify .swiper-slide h1{ width: 100%; font-size: 30px; padding: 40px 20px;}
    #certify .swiper-slide a.more{
        margin-left: auto;
        margin-right: 10px;
        margin-top: 0px;}
    #certify{ padding: 0;}
    #certify::before{ display: none;}
    #certify::after{ display: none;}
    .tw-btn{
        margin-left: auto; bottom: 0; top: auto; width: 100%; left: 0; text-align: center;}
    footer .liaojie{ display: none;}
    .index-us > h3{ font-size: 34px;}
    .form-group1 > label{ display: none;}
    .form-box .sex .choose-sex{ font-size: 18px; width: 80px;}
    .form-box{ padding: 0 10px; width: 100%;
        margin-top: 30px;}
    .index-us{ background-size: cover; width: 100%;}
    .index-us .form{ width: 100%; padding: 0 10px;}

    .form-box .btn, .btnmain .btn{margin: 20px 0 0 auto;}
    footer .banshichu{ width: 100%; padding: 0 10px;}
    .copyright span{
        padding: 0 10px; word-break: break-word; font-size: 14px; line-height: 30px;}
    .banner1{ height: 400px;}
    .container4-box{}

    /*.container4-box .swiper-container4{opacity: 0;}*/

    .about .tabheader{
        padding: 50px 10px;}
    .about .tabheader li{ margin: 0 10px;}
    .about .tabheader li a{ font-size: 16px;}
    .about .aboutinfo{
        padding-top: 0;}
    .about .aboutinfo .info,.about .philosophy,.about .agent .agentinfo{ width: 100%; font-size: 18px; line-height:initial;        padding: 0 10px;}
    .about .agent .img{ width: 100%; font-size: 18px; line-height:initial;}
    .about .agent{
        padding-bottom: 20px;}
    .about .philosophy-round{ width: 390px;height: 390px;}
    .philosophy-round .round{ width: 280px; height: 280px;
        margin-left:-140px;
        margin-top: -140px;}
    .philosophy-round .round h2{ font-size: 16px;}
    .philosophy-round .round .logo{ height: 90px;}
    .authentication .rzlist{ padding: 0 10px;}
    .authentication .rzlist dl{ padding: 10px; flex-wrap: wrap;}
    .authentication .rzlist dl dt{ margin: 0 auto;}
    .authentication .rzlist dl dd{
        margin-left: 0;}
    .ggmore .ggmoremain .gg-ad,.ggmore .ggmoremain .gg-info{ padding: 10px 10px;}
    .ggmore .ggmoremain .gg-ad img,.ggmore .ggmoremain .gg-info img{ max-width: 100%;}
    .notice .noticelist{ height: auto;}
    .notice .search{ flex-wrap: wrap;}
    .notice .search input{
        margin-top: 10px;}
    .notice .search button{
        margin-top: 10px;}
    .noticelist .swiper-wrapper{ flex-wrap: wrap;}
    .join h1{ width: 100%;}
    .join dl dt img{ height: 40px;}
    .join dl dd{ font-size: 16px;}
    .join .dllist{
        padding-top: 40px;}
    .join dl dd{ width: 80px; height: 80px; line-height: 80px;}
    .join dl{ width: auto;
        margin-top: -21px;}
    .join dl dt{ height: 46px; line-height: 46px; font-size: 16px;}
    .join{ height: 380px;}
    .job-list dl,.jobmore .jobinfo{ padding: 20px 15px;}
    .jobmore{ width: 100%; padding: 50px 10px;}
    .jobmore .jobinfo .p div{ width: 240px;}
    .applymain .form{ width: 100%;
        margin-left: 0; padding: 80px 10px;}
    .applymain form .form-group input,.applymain form .form-group select{ font-size: 16px;}
    .applymain .button4{ font-size: 16px;}
    .applyform .tabsa .line{ width: 15px;}
    .applyform form .form-box .form-group1{ width: auto}
    .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}
    .sendsuccess{ width: 100%;}
    .service1 .info{ width: 100%; padding: 0 10px;}
    .service1 .descinfo{ position: relative;}
    .service1 .descmain{ padding: 30px 10px;}
    .service1 .descinfo .title{ position: absolute; padding: 0; top: 10px;}
    .service1 .descinfo .desc{ padding: 70px 0 30px 10px;   margin-left: 10px;}
    /*.service1 .descinfo .desc p span span{ display: inline-block; width: 12px; height: 12px;  border-radius: 50%; text-indent: -9999px !important; vertical-align: middle; font-family: "Microsoft JhengHei", "敺株�罸�暺�", sans-serif, Arial !important; background: #000 !important;}*/
    .service1 .descmain .linebox{ left: 10px;
        margin-left: 0;}
    .service2 {
        padding-bottom: 0;}
    .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;}
    .contcats .descmain{ width: 100%;}
    .contcats .descmain .swiper-slide{ padding: 180px 50px 0 50px;}
    .contcats .descmain .swiper-button-next4{         right: 56px;
        bottom: 206px;
        top: inherit;}
    .contcats .descmain .swiper-button-prev4{         left: 56px;
        bottom: 206px;
        top: inherit;}
    .contcats .descinfo{ position: relative;}

    .contcats .descinfo .title{ position: absolute; top: 10px; padding: 0;}
    .contcats .descinfo .desc{ width: 100%;
        padding-left: 18px;
        margin-left: 10px;}
    .contcats .descmain .linebox{ left: 10px;
        margin-left: 0;}
    .contcats .descinfo .desc .map{ width: 97%;}

    .banner1 .filter .title1 img{ width: 60px; height: 60px;}
    .filter .form .input1{ width: 100%}
    .filter .form{ width: 100%; margin-left: 0; left: 0; padding: 10px;top:-370px;}
    .filter form{ flex-direction: column;}
    .filter .form .tran{ display: none;}
    .filter .form .form-group{
        margin-right: 0; width: 100%;
        margin-top: 10px;
        margin-bottom: 10px;}
    .filter .form .button3{        margin-top: 20px;}
    .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;}
    .banner1 .txt{ font-size: 18px;    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);}
    .contacts-top select.input1{ width:50%;}
    .map-box li{ width: 100%;}

    .cfs .form{ width: 100%;}
    .fixed-table-body table{ width: 1200px; touch-action: auto;}
    #print{ display: none;}
    #hrefimg{ height: 200px;}
    #hrefimg img{ height: 200px; width: auto;}
    .ocean dl{padding: 120px 0 10px 10px;}
    .ocean .abc a{
        margin-top: 10px;}
    .airline dl dd div{ width: 100%;}

    .oceancount ul.tabli{ width: 100%;}
    .oceancount .tabli li{ padding: 20px 20px; margin:0 10px; }
    .mt820{
        width: 100%;}
    .oceancount .form li input{ width: 100px;text-indent: 10px;}
    .oceancount button{
        margin-right: 20px;}
    .spec .btns a{ margin: 0 4px;}
    .spec .info{ overflow: auto;}
    .conversion .rules{ width: 100%;
        overflow: auto;}
    .conversion .rules table{ width: 100%;}
    .converform{
        width: 100%; flex-wrap: wrap}
    .conversion .title3{ width: 100%;}
    .converform a{ width: 60px; margin: 0; text-align: center;}
    .converform a img{ display: block; margin: 0 auto;}
    .service .leftinfo dl dd{ justify-content: end;
        padding-right: 10px; }
    .service .rightinfo dl dd{
        padding-left: 10px; justify-content: start}
    body > div.service1 > div:nth-child(2) > div:nth-child(2) > div.jk-r{ text-align: left;}
    .jk-box:last-child{flex-direction:column-reverse;}
    .inquiry .form-control.zl{ flex-wrap: wrap}
    .inquiry .form-control.zl .input1{ width: 237px !important;}
    .inquiry .form-control.zl .btns{ width: 100%; text-align: right}
    .inquiry .form-control.zl .btns button{
        margin-left: 0;}
    .right_btn{ bottom: 90px;}
    .right_btn a{ width: 45px; height: 45px; margin-bottom: 8px;}
    .right_btn a img{ width: 40px;}
    .inquiry .form-control .input1{ font-size: 16px;}
    .incoterms .info p{ word-break: break-word;}
    .incoterms .info ul{ max-width: 100% !important;}
    .notice .gginfo .blur{ width: 100%; background: rgba(0,0,0,0.6)}
    .activities .gylist dl dt img{ width: 100%}
    .banner .info{ width: 100%; margin-left: -50%;}
    .notice .noticelist dl dt img{ width: 100%;}
    .oceancount .form li input{ font-size: 16px;}
    .form-group1 > select{ width: 100%;}
    .applyform .btnmain .btn{
        margin-right: 10px;}
    .about .tabheader li:hover a{ background: none; color: #fff;}
    .servicemain .cates{ width: 100%;
        margin-top: 20px;}
    .servicemain .swiper-slide{ width: 100%; padding: 30px 10px 5px 10px;}
    .servicemain .cates a{ width: 33%;}
    body > footer > div.mt1440.dd-flex.dd-justify-between.dd-align-center > div.banshichu > div > div:nth-child(5){ width: 100% !important;}
    .swiper-container2 .title p{ font-size: 70px;}
    footer{
        overflow: hidden;}
    .about .title{ margin: 30px auto;}
    .about .aboutinfo dl dt{ margin: 0 3px;}
    .about .aboutinfo dl dd{
        padding: 0 10px;}
    .about .aboutinfo dl dd h1{ text-align: center;}
    .about .aboutinfo dl dd .info{ font-size: 20px; line-height: 36px; text-align: justify;}
    .about .aboutinfo dl dt .lay2 img{ width: 50px;}
    .about .aboutinfo dl dd h1{ font-size: 30px;}
    .about div.img{ height: 300px !important;}
    .authentication .swiper-container{ width: 100%}
    .authentication .swiper-container .swiperbtns{ width: 100%;}
    .authentication .swiper-container .swiper-slide .ly1,.authentication .swiper-container .swiper-slide .ly3 .after{ width: 310px; height: 310px;}
    .authentication .swiper-container .swiper-slide .ly2{ width: 270px; height: 270px;}
    .authentication .swiper-container .swiper-slide .ly3{ width: 250px; height: 250px;}
    .notice .noticelist dl{     -webkit-box-orient: vertical; height: auto;
        -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}
    .notice .noticelist dl dt{ width: 100%;}
    .notice .noticelist dl dd{ width: 100%;}
    .notice .noticelist dl dd a.more{ display: none;}
    .mn-swiper .swiper-slide h3{ text-align: center;}
    .ggmore .ggmoremain .gg-ad{left: 0; font-size: 20px;}
    .ggmore .ggmoremain .gg-ad h2{ padding-left: 60px;}
    .ggmore .gg-nav a.fh{ padding: 10px 35px;}
    .service {
        background: rgb(247, 250, 253);
        background: -moz-linear-gradient(90deg, rgb(247, 250, 253) 1%, rgb(32, 35, 127) 74%);
        background: -webkit-linear-gradient(90deg, rgb(247, 250, 253) 1%, rgb(32, 35, 127) 74%);
        background: -o-linear-gradient(90deg, rgb(247, 250, 253) 1%, rgb(32, 35, 127) 74%);
        background: -ms-linear-gradient(90deg, rgb(247, 250, 253) 1%, rgb(32, 35, 127) 74%);
        background: linear-gradient(180deg, rgb(247, 250, 253) 1%, rgb(32, 35, 127) 74%);
    }
    .service .tip{ top: 90px;}
    .swiper-container4 .swiper-slide h4{ font-size: 26px;
        padding-top: 40%;}
    .service .gallery-top .swiper-slide{ background-image: none !important;
        background: rgb(247, 250, 253);
        background: -moz-linear-gradient(90deg, rgb(247, 250, 253) 1%, rgb(32, 35, 127) 74%);
        background: -webkit-linear-gradient(90deg, rgb(247, 250, 253) 1%, rgb(32, 35, 127) 74%);
        background: -o-linear-gradient(90deg, rgb(247, 250, 253) 1%, rgb(32, 35, 127) 74%);
        background: -ms-linear-gradient(90deg, rgb(247, 250, 253) 1%, rgb(32, 35, 127) 74%);
        background: linear-gradient(180deg, rgb(247, 250, 253) 1%, rgb(32, 35, 127) 74%);

    }
    .authentication .swiper-container .swiper-slide .ly3 .after{ border-radius: 50%; display: none;}

}