@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");
:root {
    --bgColor: #47AB00;
    --bgColor3: rgba(255,217,51, 0.3);
    --color-line5: rgb(165,165,165);
    --color-point2: #47AB00;
}
* { 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;}
a { text-decoration: none;}
a:hover{ color: #000}
em{ font-style: normal;}
li{ list-style: none;}
.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}
.img100{ display: inline-block; width: 100%; height: auto;}

.btn-group > .btn,
.btn-group-vertical > .btn {
    position: relative;
    float: left;
    height: 100%;
    line-height: 40px;
}
.bootstrap-select.btn-group .dropdown-toggle .filter-option{ line-height: 40px; color: #000}
.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 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;
}
.bootstrap-select .dropdown-toggle:focus{ outline: none !important;}
select.selectpicker {
    display: none !important;
}
.bootstrap-select.btn-group .dropdown-menu.inner{ max-height: 170px !important;}
.bootstrap-select.btn-group .dropdown-menu li{
    padding-left: 10px;}
.bs-actionsbox, .bs-donebutton, .bs-searchbox{ }
.bs-searchbox .form-control{ height: 40px; line-height: 40px; font-size: 14px;border:1px solid #f5f5f5;
    padding-left: 10px;}
.hidden {
    display: none !important;
}
.ml10{
    margin-left: 10px;}
button,
input {
    border: none;
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    outline: none
}
.input1{
    width: 100%;
    height: 48px;

    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: #000}


.input1:focus,.input2:focus{
    background-color: #fff;
    border: 2px solid var(--bgColor);
}
.input2{
    width: 100%;
    height: 48px;
    border-radius: 10px ;
    text-indent: 20px;
    font-size: 18px;
    font-weight: 400;
    color: #212122;
    line-height: 26px;
    position: relative;
    border: 2px solid #eaeaea;;
    background:  rgba(255,255,255,0.8);
    background-repeat: no-repeat;
    background-position: 95% center;
}
.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");}
.iconup{ background-image: url("../image/about/up.png");}

.iconsearch{ background-image: url("../image/vector.png");}
.w48{ width: 48%}
.w60{ width: 60%}
.w38{ width: 38%}

.button1{
    width: calc(100% - 140px);
    display: block;
    background: url("../image/line.png") no-repeat #fff;
    opacity: 1;
    font-size: 16px;
    color: #212122;
    padding: 8px 12px;
    margin: 20px auto 0;
    font-weight: bold;
    background-size: 40px; background-position: 80px 12px;
     border: 1px solid #000;
    border-radius: 10px; text-align: left;
    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和Chrome */
    -o-transition:all 0.5s ease-in-out;/* Opera */
}

.button3{
    width: calc(100% - 140px);
    display: block;
    background: url("../image/line2.png") no-repeat var(--bgColor);
    opacity: 1;
    font-size: 16px;
    color: #212122;
    padding: 8px 12px;
    margin: 20px auto 0;
    font-weight: bold;
    background-size: 40px;
    background-position: 110px 12px;
    border-radius: 10px; text-align: left;
    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和Chrome */
    -o-transition:all 0.5s ease-in-out;/* Opera */
}

.button1:hover{
    border-color: var(--bgColor);color: var(--bgColor);
    background-position: 90px 12px;
}

.button2:hover,.button2.cur{
    background: var(--bgColor);
}
.button3:hover{
    background-position: 120px 12px;
}
.more{ color: #000; display: block; width: 130px; text-align: center; margin: 0 auto; font-size: 16px;  font-weight: bold; }
.more img{ vertical-align: middle;  color: #eed484;transition: transform 0.35s; height: 14px; }
.more:hover img{transform: translate(10px, 0); }
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;
    display: inline-block;
    height:20px;
    margin-top: 5px;
    margin-inline-end: 1rem;
    min-width: 20px;
    vertical-align: middle;
    width: 20px;
}

input[type=radio]:checked+label:after {
    background: #FFC924;
    border-radius: 50%;
    content: "";
    display: block;
    height: 10px;
    left: 5px;
    position: absolute;
    top: 10px;
    width: 10px;
}

.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;}
header{ position: fixed;top:0; left: 0; width: 100%; background: #fff; z-index: 999;}
.header1{ height: 90px; width: 100%;}
.banner{
    position: fixed;top: 0;left: 0; z-index: 1;
    overflow: hidden;
    width: 100%;
    height: 100%
}
.bannerinfo{ width: 100%; position: relative; height: 100%;z-index: 20;}
.bannerinfo .van{ width: 168px; padding: 10px 20px; position: absolute; background: rgba(255,255,255,0.3); left: 40px; bottom: 150px; border: 1px solid var(--bgColor); border-radius: 20px;}
.bannerinfo h3{ font-size:  16px; color: #000; font-weight: normal;}
.bannerinfo .logovan{ width: 100%; margin: 10px 0}
.bannerinfo .visit{ width: 100%; text-align: center; color: #000;   }
.bannerinfo .visit img{ width: 40px; display: inline-block;margin-left: 10px; 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和Chrome */
    -o-transition:all 0.5s ease-in-out;/* Opera */}
.bannerinfo .van:hover .visit img{ transform: translateX(10px)}
.bannerinfo .ovl{ width: 490px; height: 360px; position: absolute; left: 50%; top: 50%; z-index: 10;
    margin-left: -245px;
    margin-top: -290px;}
.banner img{ width: 100%; height: 100%; object-fit: cover;}
.p-index_movie__mask {
    height: 100vh;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    -webkit-transform: scale(1.5,1.8) translate(-20%,20%);
    transform: scale(1.5,1.8) translate(-20%,20%);
    -webkit-transition: all 2s cubic-bezier(.215,.61,.355,1);
    transition: all 2s cubic-bezier(.215,.61,.355,1);
    width: 100vw
}

.p-index_movie__mask.is-act,.p-index_movie__svg {
    -webkit-transform: scale(1) translateX(0);
    transform: scale(1) translateX(0)
}

.p-index_movie__svg {
    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和Chrome */
    -o-transition:all 0.5s ease-in-out;/* Opera */
    height: 100vh;
    left: 0;
    position: absolute;
    top: 0;
    width: 100vw
}

.p-index_movie__svg.-sp {
    display: none
}

.more { position: absolute; bottom: -78px; right: 0; background: url("../image/line.png") no-repeat ; background-size: 40px; height: 38px; line-height: 38px;
    background-position: 120px 12px;
    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和Chrome */
    -o-transition:all 0.5s ease-in-out;/* Opera */
}
 .more:hover { background-position: 130px 12px; border-color: var(--bgColor); color: var(--bgColor); background-color: #fff;}


header .logo{
    margin: 20px 0 20px 40px;
}


header .logo a{ display: block; height: 50px; width: 260px; background: url("../image/logo.png") no-repeat center center; background-size: contain}
header .nav{ margin-left: 100px;}
header .nav dl{ position: relative; margin: 0 10px;}
header .nav dl dt a{
    font-size: 20px;
    font-weight: bold;
    color: #000;
    line-height: 26px;
    margin: 0 30px;
    position: relative;
}
header .nav dl:hover dd{
    /*opacity: 1;*/
    /*visibility: visible;*/
    /*transform: translateY(0%);*/
    /*-webkit-transform: translateY(0%);*/
    /*-moz-transform: translateY(0%);*/
}
header .nav dl dd{
    padding-top: 45px;
    width: 100%;
    height: 420px;
    overflow: hidden;
    position: absolute;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    line-height: 26px;
    top: 100%;
    z-index: 999;
    visibility: hidden;
    transition: all .4s ease-in-out;
}
header .nav dl dd a{
display: block;
    line-height: 34px;
    color: #000;
    font-size: 16px;
    font-weight: 400;

}
header.cur .nav dl dd{ visibility: visible;}
header .nav dl dd a:hover{ font-weight: bold;}
header .mobilelang{ display: none;}
header .nav dt > a:before{
    position: absolute;
    height: 3px;
    background-color: var(--bgColor);
    content: ' ';
    bottom: -34px;
    left: 0;
    right: 0;
    opacity: 0;
    z-index: 9998;
    -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 dt:after {
    position: absolute;
    display: block;
    width: 8px;
    height: 8px;
    background-color: rgba(71,171,0);
    content: ' ';
    bottom: -36px;
    z-index: 9999;
    left: 50%;
    margin-left: -4px;
    opacity: 0;
    border-radius: 50%;
    -webkit-transition: background-color .35s ease-in-out,color .35s ease-in-out,border .35s ease-in-out;
}
header .nav dt > a:after {
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    background-color: rgba(71,171,0,0.3);
    content: ' ';
    bottom: -43px;
    z-index: 9999;
    left: 50%;
    margin-left: -10px;
    opacity: 0;
    border-radius: 50%;
    -webkit-transition: background-color .35s ease-in-out,color .35s ease-in-out,border .35s ease-in-out;
}

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





header .lang{
    font-size: 16px;
    margin-right: 80px;
}
header .lang dt {  background: url("../image/down.png") no-repeat right center;
    background-size: 20px;
    padding-right: 26px;}
header .lang a{
    font-size: 16px;
    font-weight: 400;
    color: #000;
    line-height: 23px;

}

header .lang dl {
    z-index: 9999;
    position: relative;
    height: 38px;
    line-height: 34px;
    border: 2px solid #fff;
}

header.static .lang dl,header.static1 .lang dl  {
    border: 2px solid #000;
}

header .lang dt {
    position: relative;
    height: 34px;
    font-size: 16px;
    font-weight: 400;
}

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 .search{
    margin: 0 30px ;
}
header .search a{ display: block; background: url("../image/vector.png") no-repeat center; width: 20px; height: 20px;}
header .search img{ height: 20px; display: block;}
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: 90px; left: 0; width: 100%; height: 360px; z-index: 99;}
header.cur .navbg{ visibility: visible;}
.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; }



footer{ background: #fff; padding:20px 0 0 0;border-top: 1px solid #f5f5f5; position: relative; z-index: 999}
footer h3{ font-size: 18px; font-weight: 600; margin-bottom: 15px;}
footer .banshichu{ width: 390px;}
footer .banshichu input{ border: 2px solid var(--bgColor);
    margin-bottom: 10px;}
footer .banshichu span{ display: block; line-height: 38px;}
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 .xieshou{width: 520px; text-align: center;}
footer .xieshou h3 img{ height: 37px;
    margin-bottom: 30px;}
footer .xieshou 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 .xieshou a:last-child{ border: none;}
footer .xieshou span{ display: inline-block; margin: 0 14px; font-size: 18px;}
footer .xieshou a{ position:relative}
footer .xieshou a:after{ display: none; content: ''; background: url("../image/logo1.png") no-repeat; background-size: 100%; position: absolute; width: 72px; height: 30px; top: 16px; left: 0;}
footer .xieshou a:hover:after{ display: block;}
footer .liaojie{ text-align: right; width: 365px; height: 210px;}
footer .liaojie h3{ text-align: right;}
footer .liaojie .logos{ width: 100%;}
footer .liaojie .logos a{
    display: block;
    width: 30px;
    height: 30px;
    position: relative;
}
footer .liaojie .logos a img{ display: block; width: 100%; position: absolute; top: 0;left: 0;}
footer .liaojie .logos a img:nth-child(2){ opacity: 0;}
footer .liaojie .logos a:hover img:nth-child(2){
    opacity: 1;
}

footer .liaojie .qrimg{ width: 70px; display:  block; margin: 10px 0; border-radius: 10px;}

footer .copyright{  line-height: 40px; background: #000; 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; background: #fff; width: 52px; height: 52px;
    margin-bottom: 15px;border-radius: 10px; border: 1px solid #2f2f2f;
    -webkit-transition: all .35s  ease;
    transition: all .3s ease;

}
.right_btn a:hover{ background:var(--bgColor); border-color: var(--bgColor); }
.right_btn a.a1{padding-top: 10px;}
.right_btn a.a2{
    padding-top: 12px;}
.right_btn a.a2 img{ width: 28px;}
.right_btn a.a3{
    padding-top: 11px;}
.right_btn a.a3 img{ width: 30px;}
.right_btn a img{ display: block; width:40px; margin:  0 auto; }
.right_btn a:hover{transform: translateY(-2px);}

.warp{
    position: relative; z-index: 99;}
#contcat{ background: rgba(255,255,255,0.7)}

.about{ width: 100%; background: rgba(217,217,217,0.7);
    padding: 40px 0 120px 0;}
.about .leftabout{ position: relative;}
.about .leftabout img{ width: 500px; border-radius: 50px;}
.about .leftabout h1{ width: 200px;position: absolute; top: 0; left: 60px; background: var(--bgColor); color: #fff; text-align: center;}
.about .leftabout .logo1{ position: absolute; bottom: -80px; right: -50px; font-weight: bold; color: #000; font-size: 30px; width: 200px;
    height: 160px; line-height: 160px; text-align: center; background: url("../image/logo1.png") no-repeat center #fff; border-radius: 20px; background-size: 125px; background-position: 30px 90px;}
.about .rightabout { font-weight: bold; font-size: 18px; color: #000;padding-left: 80px; line-height: 2em;}
.about .rightabout .more { position: absolute; bottom: -78px; right: 0; background: url("../image/line.png") no-repeat ; background-size: 40px;
    background-position: 120px 12px;
    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和Chrome */
    -o-transition:all 0.5s ease-in-out;/* Opera */
}
.about .rightabout .more:hover { background-position: 130px 12px; border-color: var(--bgColor); color: var(--bgColor); background-color: #fff;}

.cfshome{ background: url("../image/cfsbg.jpg") no-repeat top center; background-size:cover; height: 560px; width: 100%; position: relative;}
.cfshome .form{ position: absolute; right:20%; top: 100px;}
.cfshome .form h1{  color: #fff;background: url("../image/logo1.png") no-repeat center; height: 98px; background-size: 125px; text-align: center;
    margin-bottom: 20px;background-position: 114px 30px; width: 370px;}
.cfshome .form .select{ width: 380px !important; background: #fff; height: 40px; line-height: 40px;
    padding-left: 20px;
    position: relative; margin: 15px 0;
     border-radius: 5px;
    border: 1px solid #fff;}
.cfshome .form .select.open{ border: 1px solid var(--bgColor);}
.cfshome .form .sort{
    margin-left: 20px; background: url("../image/sort.png") no-repeat 100%; width: 30px; height: 30px; display: block; background-size: cover}
.cfshome .form .search{
width: 140px !important;
    margin-right: 50px;
}
.cfshome1 .form{ right: 50%; margin-right: -200px; width: 400px;}
.cfshome1 .form .select{ width: 380px !important;}
.cfshome1 .form h1{background-position: 130px 30px;}
.service{ background: url("../image/servicebg.jpg") no-repeat top center; background-size:cover; height: 700px; width: 100%; position: relative;
    overflow: hidden;}
.swiper-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.service .mt1200 {}
.service .swiper-container {
    width: 1000px;
    margin-left: 364px;
}
.service .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    transition: 300ms;
    transform: scale(0.8) translateY(68px);
    position: relative;
}
.service .swiper-slide a{ display: block; width: 100%; height: 100%; font-size: 0;}
.service .swiper-slide .bg{ width: 100%; height: 100%; }
.service .swiper-slide:before{ content: ' '; position: absolute; bottom: 30px; z-index: 2; left: 50%; opacity: 0;    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和Chrome */
    -o-transition:all 0.5s ease-in-out;/* Opera */
    margin-left: -35px; width: 70px; height:60px; background:url("../image/line2.png") no-repeat center; background-size: contain;}
.service .swiper-slide:after{ content: ' '; position: absolute; top: 0; z-index: 1; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5);}
.service .swiper-slide .icon{ position: absolute; text-align: center; bottom: 50%; width: 80px; left: 50%;
    margin-left: -40px; z-index: 2}
.service .swiper-slide h1{ color: #fff; position: absolute; width: 100%;
    margin-bottom: -70px; text-align: center; bottom: 50%;z-index: 2; font-size: 18px;}
.service .swiper-slide:hover:before{ opacity: 1;}
.service .swiper-slide-prev{transform: scale(1);}
.service .btns{ position: absolute; bottom: 0px; left: 140px;}
.service .swiper-button-prev1{ margin: 0 10px; display: block; background: url("../image/line1.png") no-repeat center; background-color: rgba(255,255,255,0.3); background-size: 40px; width: 80px; height: 50px; border: 1px solid rgb(128,128,128); border-radius: 10px; }
.service .swiper-button-next1{  margin: 0 10px; display: block; background: url("../image/line.png") no-repeat center; background-color: rgba(255,255,255,0.3); background-size: 40px; width: 80px; height: 50px; border: 1px solid rgb(128,128,128); border-radius: 10px; }
.service .swiper-button-prev1:hover,.service .swiper-button-next1:hover{ background-color: #fff;}
.service h1{ line-height: 100px; color: #fff; font-size: 54px; font-weight: normal;
    padding-top: 30px; }
.service .more{ bottom: 30px; right: 18%;}
.service .points{ width: 200px; background: rgba(255,255,255,0.3); height: 100%; position: relative;
    overflow: hidden;}
.service .points .round{ width: 500px; height: 500px; border-radius: 50%; border: 1px solid rgb(161,165,161);
    position: absolute; left: -340px; top: 50%;
    margin-top: -250px;}
.service .points .round a{ display: block; width: 100%; height: 100%; position: absolute; top: 0;
left: 0}
.service .points .round a:after{   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和Chrome */
    -o-transition:all 0.5s ease-in-out;/* Opera */
    position: absolute; content: ' '; display: block; width: 14px; height: 14px; border-radius: 50%; background:var(--bgColor); right: 0; top: 50%;
    margin-top: -7px;  margin-right: -7px;}
.service .points .round a.cur:after{width: 18px; height: 18px;margin-right: -9px;
    margin-top: -9px;}
.service .points .round a.cur:before{
    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和Chrome */
    -o-transition:all 0.5s ease-in-out;/* Opera */
    position: absolute; content: ' '; display: block;  border-radius: 50%; right: 0; top: 50%;
    margin-top: -14px;
    width: 28px; height: 28px;margin-right: -14px; border:5px solid rgba(71,171,0,.3)}
.service .points .round a:nth-child(1){transform: rotate(-57deg);}
.service .points .round a:nth-child(2){transform: rotate(-43deg);}
.service .points .round a:nth-child(3){transform: rotate(-27deg);}
.service .points .round a:nth-child(4){transform: rotate(-9deg);}
.service .points .round a:nth-child(5){transform: rotate(9deg);}
.service .points .round a:nth-child(6){transform: rotate(27deg);}
.service .points .round a:nth-child(7){transform: rotate(43deg);}
.service .points .round a:nth-child(8){transform: rotate(57deg);}

.contcat{ width: 100%; height: 600px; background:  #fff; position: relative;}
.contcat .title{width: 50%; text-align: right;
    padding-top: 50px;}
.contcat .title h1{ font-size: 80px; font-weight: normal;text-shadow: 0 0 10px rgba(0,0,0,.1);}
.contcat .title h3{ font-size: 32px;
    padding-right: 110px;}
.contcat .title h1 span{ color: var(--bgColor);}
.contcat .form{
    padding-top: 50px; width: 50%; height: 100%; background: url("../image/concatbg.jpg") no-repeat left top #fff; background-size: cover}
.contcat .form .us{ font-size: 80px; color: #fff; text-align: left; padding-left: 30px;}
.contcat .form form{ width: 500px; margin: 0 auto; padding-top: 70px;}
.contcat .form form .form-group{margin-bottom: 15px; text-align: right;}
.contcat .form form .form-group .button1{ background-color: rgba(255,255,255,0.8); width: 144px;display: inline-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);}
.joinus{ background: url("../image/joinusbg.jpg") no-repeat right top #fff; width: 100%; height: 600px; position: relative;}
.joinus:after{
    position: absolute; width: 100%; height: 100%; content: ""; left: 0; top: 0; background: rgba(0,0,0,0.3); z-index: 0}
.joinus .linkbtn{ z-index: 1; background: #fff; width: 500px; height: 130px; position: absolute; left: 50%;  margin-left: -250px; top:50%; line-height: 130px; margin-top: -50px; border-radius: 20px; border: 1px solid #0c0c0c;}
.joinus .linkbtn h1{
    margin-left: 80px;
    padding: 0 20px; font-size: 32px; color: #000; position: relative; background: url("../image/logo1.png") no-repeat; background-size: 125px; background-position: 16px 74px;}
.joinus .linkbtn .en{ font-size: 20px; color: #000; font-weight: bold;
    margin-right: 30px; line-height: 116px;
    padding-right: 94px;
background: url("../image/line.png") no-repeat; background-size: 60px;
background-position: 100px center;
    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和Chrome */
    -o-transition:all 0.5s ease-in-out;/* Opera */
}
.joinus .linkbtn .en em{ color: var(--bgColor);}
.joinus .linkbtn:hover .en{background-position: 110px center;}
.position {
    font-size: 14px;
    font-weight: bold;
    line-height: 60px;
}
.position a {
    color: #000;
}
.position a:first-child{ background: url("../image/home.png") no-repeat; background-size: cover; display: inline-block; width: 22px; height: 22px; vertical-align: sub;}

.banner1{
    overflow: hidden;}
.banner1 img{ display: block; max-width: 100%;}
.banner1 .txt{ position: absolute; padding: 20px 40px;  color: #fff; border-radius: 20px 0;z-index: 2;
    top: 50%; left: 50%; font-size: 52px; font-weight: bold;
    -webkit-transform: translate(-50%,-100%);
    -ms-transform: translate(-50%,-100%);
    /*文字阴影*/
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}
.aboutmain{ background: rgb(242,242,242); padding: 80px 0;}
.aboutmain .aboutimg{ width: 400px; border-bottom: 8px solid var(--bgColor);
    margin-right: 40px;}
.aboutmain .info{}
.aboutmain .info .title{ font-size: 30px; line-height: 80px;   text-shadow: 0 0 4px rgba(0,0,0,.2);
}
.aboutmain .info .title::first-letter,.t-first::first-letter  {
    color: var(--bgColor);
}
.aboutmain .info .content{ line-height: 24px;}

.history {display: flex; flex-direction: column; position: relative; gap: clamp(50px,150px, 92px); margin: 50px auto;}
.history .line {display: block; position: absolute; left: 50%; top: 20px; width: 2px; height: 100%; background: var(--color-line5);}
.history .line .bar {position: absolute; left: 0; top: 0; width: 100%; background: var(--color-point2); transform-origin: 0 0; z-index: 1; transition: height .2s ease;}
.history .item {position: relative; z-index: 2;}
.history .year {font-size: 32px; line-height: 1; font-weight: bold; letter-spacing: -0.025em; }
.history .month {position: relative;}
.history .month .txt{ position: relative; background: rgb(242,242,242); border: 1px solid rgb(222,222,222); border-radius: 20px; padding: 20px 40px; font-size: 18px; line-height: 24px;}
.history .month .txt::before{ content: ""; position: absolute; left: -6px; top: 50%; transform: translate(-50%, -50%); width: 20px; height: 32px; background:url("../image/about/sj.png") no-repeat center; background-size: 13px; }
.history .month .txt img{ max-width: 150px; display: block; margin: 10px auto;}
.history .month::before {content: ""; display: block; width: 30px; aspect-ratio: 1; background: rgb(128,128,128); border-radius: 50%; position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); z-index: 5;}
.history .month::after {content: ""; display: block; width: 15px; aspect-ratio: 1; background:url("../image/about/start.png") no-repeat; background-size: 100%; border-radius: 50%; position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); z-index: 5;}
.history .month.on::before {background: var(--color-point2);}
.history .month.on::after {background-image: url("../image/about/starth.png");}
.history .month.on .txt{ border-color: var(--bgColor);}
.history .item > .month:not(:first-of-type) {margin-top: clamp(18px, 5vw * 0.6, 49px);}
.history .month {display: flex; gap: 30px; position: relative; padding-left: 45px; line-height: 1.556;}
.history .year {position: absolute; left: -45px; top: 50%; transform: translate(-100%, -18px);}
.history .item {flex: 0 0 auto; width: 50%;}
.history .item:nth-child(odd) {margin-left: auto;}
.history .item:nth-child(even) {text-align: right; padding-left: 0;}
.history .item:nth-child(even) .year {left: auto; right: -45px; transform: translate(100%, -18px);}
.history .item:nth-child(even) .month {justify-content: flex-end; padding-right: 45px; padding-left: 0;}
.history .item:nth-child(even) .img {margin-left: auto;}
.history .item:nth-child(even) .month::before {left: auto; right: 0; transform: translate(50%, -50%);}
.history .item:nth-child(even) .txt::before {left: auto; right: -4px; transform: translate(50%, -50%); background-image: url("../image/about/sj2.png"); background-position: right;}
.history .item:nth-child(even) .month::after {left: auto; right: 0; transform: translate(50%, -50%);}
.history .month.on .txt:before{ background-image: url("../image/about/sj1.png");}
.history .item:nth-child(even) .month.on .txt:before{ background-image: url("../image/about/sj3.png");}





.rz .rzinfo{ width: 900px; border-radius: 20px; background: rgb(242,242,242);  margin: 100px auto 160px auto; position: relative; padding: 40px 160px 40px 60px;}
.rz .rzinfo .title{ font-size: 30px; line-height: 80px;   text-shadow: 0 0 4px rgba(0,0,0,.2);
}
.rz .rzinfo  .title::first-letter {
    color: var(--bgColor);
}
.rz .rzinfo .info{ line-height: 30px; font-size: 18px; color: #666;
    margin-top: 10px;}
.rz .rzinfo .aeo{ position: absolute; right: 0; top: 50%;
    margin-right: -110px;  transform: translateY(-50%); width: 220px;}
.rz .rzinfo .button3{ position: absolute;bottom: -20px; right: 60px;
    width: 182px; height: 40px; background-position: 120px 12px; }
.rz .rzinfo .button3:hover {background-position: 128px 12px;}
.rz .infolist{ position: relative;}
.rz .infolist .swiper-slide{ width: 100%; height:600px;  background-size:1920px 600px;
    background-position: center center; display: flex; align-items: center; flex-direction: column; justify-content: center;}
.rz .infolist  .swiper-slide:after{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255,255,255,.5); z-index: 1; opacity: 1; transition: all .3s ease-in-out;}
.rz .infolist .swiper-slide .out{ position:absolute; z-index: 2; width:1000px; height: 1000px; border: 1px solid #fff;  border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size:1920px 600px; text-align: left;}
.rz .infolist .swiper-slide .after{ position:absolute; z-index: 99; width:1000px; height: 1000px; border: 1px solid #fff;border-radius: 50%; background:rgba(255,255,255,.5); content: ''; transform: scale(0)}
.rz .infolist .swiper-slide .after.animat{
    -webkit-transition: all 0.5s 1s;
    transition: all 0.5s 1s;
    -webkit-animation: scale 1s 0s 1;
    animation: scale 1s 0s 1;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
     }
.rz .infolist .swiper-slide .info{ position:absolute; z-index: 3; width:400px; height: 400px; border: 1px solid #fff; border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size:1920px 600px; text-align: left;}
.rz .infolist .swiper-slide img{ margin-bottom: 20px;}
.rz .infolist .swiper-slide h1{ width: 300px; color: #fff; text-align: center;}
.rz .infolist .swiper-button-next{ background: url("../image/about/rightbtn.png") no-repeat; background-size: cover; width: 50px; height: 50px; z-index: 99}
.rz .infolist .swiper-button-prev{ background: url("../image/about/leftbtn.png") no-repeat; background-size: cover;width: 50px; height: 50px;z-index: 99}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{ display: none;}
.rz .top5000{ background: url("../image/about/topbg.jpg") no-repeat center; background-size: cover; width: 100%; height: 650px;}

.videolist{ position: relative;
    margin: 80px auto;}
.videolist .btns{}
.videolist .btns .rjiantou{ background: url("../image/about/ljiantou.png") no-repeat; background-size: cover; width:60px; height: 60px; position: absolute; top: 50%; left: 60px; margin-top: -30px; z-index: 99;}
.gginfo{}
.gginfo .swiper-slide{ position: relative; display: flex; align-items: center; justify-content: center; width:600px;
    transition:all 1s ease-in-out;
    -moz-transition:all 1s ease-in-out;/*Firefox 4 */
    -webkit-transition:all 1s ease-in-out;/* Safari和Chrome */
    -o-transition:all 1s ease-in-out;/* Opera */}
.gginfo .swiper-slide.swiper-slide-next{align-items: start; justify-content: left; width:800px; transform: scale(0.7) }
.gginfo .swiper-slide.swiper-slide-prev{opacity: 0;transform: scale(0.7)}
.gginfo .swiper-slide .img-info{ position: relative; padding: 60px 60px 0px 0; height: 708px;}
.gginfo .swiper-slide .img{ width: 460px; height:558px; z-index: 2; position: absolute; left: 30px; top: 30px; }
.gginfo .swiper-slide .imgborder{width: 460px; height:558px; z-index: 0; border: 2px solid #000;}
.gginfo .swiper-slide h1{ font-size: 30px; color:#000; width: 460px;margin-top: 10px;
    transition:all 1.5s ease-in-out;
    -moz-transition:all 1.5s ease-in-out;/*Firefox 4 */
    -webkit-transition:all 1.5s ease-in-out;/* Safari和Chrome */
    -o-transition:all 1.5s ease-in-out;/* Opera */
    transform: translateX(-200px);
    opacity: 0;}
.gginfo .swiper-slide .button3{ width: 180px; position: absolute; bottom: 102px;right:-30px; z-index: 99;
    transition:all 2s ease-in-out;
    -moz-transition:all 2s ease-in-out;/*Firefox 4 */
    -webkit-transition:all 2s ease-in-out;/* Safari和Chrome */
    -o-transition:all 1.5s ease-in-out;/* Opera */
    opacity: 0;}
.gginfo .swiper-slide span{
    opacity: 0;
    -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; overflow: hidden;
    z-index: 5; text-indent: -90000px; background: url("../image/about/news.png") no-repeat; background-size: cover; width: 60px; height: 60px; position: absolute; right: 0; top: 0px;}
.gginfo .swiper-slide.swiper-slide-active span,.gginfo .swiper-slide.swiper-slide-active .button3{ opacity: 1;}
.gginfo .swiper-slide.swiper-slide-active h1{ transform: translateX(0px); opacity: 1}

.toptitle{ background: rgb(242,242,242);margin-top: 100px; height: 300px;}
.toptitle .mt1200{ height: 100%; position: relative;}
.toptitle .infotitle{ height: 100%;}
.toptitle .title{padding-top: 40px; font-size: 34px;}
.toptitle .infoimg{ position: absolute; right: 0;top:-30px;}
.toptitle .img{ width: 360px; height:420px; z-index: 2; position: absolute; left: 30px; top: -30px; }
.toptitle .imgborder{width: 360px; height:420px; z-index: 0; border: 2px solid #000;}
.toptitle .infoimg span{
    -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;
    overflow: hidden;
    z-index: 5; text-indent: -90000px; background: url("../image/about/news.png") no-repeat; background-size: cover; width: 60px; height: 60px; position: absolute; right: -60px; top: -60px;}

.gg-info{padding: 200px 140px 40px 140px; font-size: 24px;}
.gg-nav{ padding: 40px 0;}
.gg-nav a{ color: var(--bgColor); font-size: 24px;}
.gg-nav p{ font-weight: bold; width: 300px;}
.gg-nav .prev h5{ text-align: right;}
.gg-nav .prev p{ text-align: right;}
.gg-nav .fh{
    padding-top: 26px; background: url("../image/about/list.png") no-repeat center 4px; background-size: 35px;}
.job{ background: rgb(242,242,242);}
.job .title{  text-align: center; font-size: 36px; margin: 40px auto;}
.job .job-list{
    padding-bottom: 100px;}
.job .job-list dl{ height: 300px; background: #fff; border-radius: 20px; width: 900px;
    margin: 100px auto 0 auto;}
.job .job-list dl dt{ padding: 30px 40px;
    position: relative;}
.job .job-list dl dt{ width: 50%;}
.job .job-list dl dt .title{ font-size: 28px; font-weight: bold; color: #000;
    margin:0 0 20px 0; text-align: left; display: block;}
.job .job-list dl dt .moredetail{ bottom: -18px;left: 20px;
    position: absolute; width: 180px;}
.job .job-list dl dd{ position: relative; width: 50%;}
.job .job-list dl dd img{ position: absolute; top: -30px; width: 300px; height: 300px;
    margin-left: 60px;}

.job .job-list dl:nth-child(even) dt{ transform: translateX(100%)}
.job .job-list dl:nth-child(even) dt .moredetail{ right: 20px;left:auto;}
.job .job-list dl:nth-child(even) dd{ transform: translateX(-100%)}

.apply{ background: url("../image/about/applybg.png") no-repeat; background-size: cover; width: 100%; min-height: 600px; position: relative;}
.apply .apply-title{ position: absolute; top: 40px; left: 200px; font-size: 60px; color: #fff; z-index: 2;}
.apply .bg-left{ position: absolute;top: 0; left: 0; width:225px; height: 100%; background: rgba(255,255,255,0.5); z-index: 1}
.apply .form{ width: 500px;
    position: absolute; top:  120px; right: 100px;}
.apply .form-group{ margin: 10px 0}
.apply .form-group input::placeholder{ color:#333}
.apply .form-group .button1{ width: 140px; margin: 10px 0 0 auto;}
.apply .form-group.fileline{background: rgba(255,255,255,0.8); height: 48px; border-radius: 10px; padding: 0 20px; border: 2px solid #eaeaea;}
.apply .form-group.fileline img{ width:20px;}

.jobmore{ padding: 40px 0;}
.jobmore .top{ border-bottom: 2px solid #000; width: 1100px; margin: 0 auto;}
.jobmore .top .joinusdown{ width: 130px; height: 130px; border-radius: 50%;overflow: hidden;}
.jobmore .jobmore-info{ width: 960px; margin: 0 auto;}
.jobmore .jobmore-info table{ width: 100%; margin: 20px 0;}
.jobmore .jobmore-info th{ height: 60px; font-weight: bold; font-size: 28px; text-align: left; }
.jobmore .jobmore-info th:last-child{ font-size: 26px;}
.jobmore .jobmore-info td:first-child{ height: 120px; width: 280px; font-weight: bold;
    padding-left: 20px;}
.jobmore .jobmore-info tr:nth-child(odd) td:first-child{ background: rgb(217,217,217) }
.jobmore .jobmore-info tr td:last-child{padding-left:  20px; position: relative;
    overflow: hidden;}
.jobmore .jobmore-info tr td:last-child:after{ content: ''; position: absolute; height: 2px; width: 100%;left: 20px; bottom: 2px; background: #000;}

.servicemain{ padding: 50px 0 0;}
.servicemain dl{}
.servicemain dl dt{  width: 50%; padding:80px 0; text-align: right;}
.servicemain dl:nth-child(even){flex-direction:row-reverse;}
.servicemain dl dt{ background: rgb(242,242,242); text-align: right;}
.servicemain dl dt img{ display: inline-block; transform: translateX(50px); height: 480px;}
.servicemain dl dd{ width: 50%;padding-left: 140px;}
.servicemain dl dd h1{  line-height: 80px;}
.servicemain dl dd p{ max-width: 500px; position: relative;}
.servicemain dl:nth-child(even) dt{  text-align: left;}
.servicemain dl:nth-child(even) dd{ padding-right: 140px;}
.servicemain dl:nth-child(even) dt img{ transform: translateX(-50px)}



.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;
    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{  background: #e4e4e4; height: 48px; line-height: 48px;  padding: 0 14px; cursor: pointer; font-weight: bold; margin: 0;}
.inquiry .button2.cur,.inquiry .button2:hover{ 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;}
.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);}
.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;}
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;}

.imground{ position: relative; border-top-right-radius: 50%; border-bottom-right-radius: 50%;
    overflow: hidden;}
.imground:after{ content: '';color: #fff; text-align: center; line-height: 90px;
    font-size: 16px; position: absolute; top: -80px; left: -80px; width:160px; height: 160px; border-radius: 50%;
    background:var(--bgColor3);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.imground:hover:after{transform: scale(1.2);}

.imground1{ position: relative;border-top-left-radius: 50%; border-bottom-left-radius: 50%;
    overflow: hidden;}
.imground1:after{ content: '';color: #fff; text-align: center; line-height: 90px;
    font-size: 16px; position: absolute; top: -80px; right: -80px; width:160px; height: 160px; border-radius: 50%;
    background:var(--bgColor3);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.imground1:hover:after{transform: scale(1.2);}


.airline{
    padding-top: 30px;}
.airline .title1{}
.airline ul{}
.airline ul li{ width: 50%; line-height: 40px;}
.airline ul li a{ color: #000; text-decoration: underline}
.airline ul li a:hover{ color: var(--bgColor)}


.cfs{ background: rgb(241,241,241);
}
.cfs .title1{ padding:20px 0 40px;}
.cfs .form{ width: 500px; padding: 30px; margin: 0 auto; background: #fff;border-radius: 20px;
}
.cfs .form label{ font-size: 20px;}
.cfs .form .input1{ width: 100% !important; text-indent: 0px;
    padding-left: 10px;}
select.selectpicker{ display: none !important;}
.cfs .form .form-group{
    margin-bottom: 10px;}
.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;}
.inquiry .bootstrap-select.btn-group .dropdown-toggle .caret{ right: 23px;}
.bootstrap-select ul {
    padding-left: 10px !important;}
.cfs .form .button3{ width: 120px;}
.cfs #filter{ padding:0 0 40px 0; display: none}
.cfs #result{ display: none;  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 {
    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; background: none; border-radius: 50px;
    border: 2px solid #333;}
.cfs .btns button i{
    margin-right: 10px;}
.ocean{    padding-top: 30px;}
.ocean .title1{ font-weight: bold;}

.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(--bgColor);}
.ocean dl{ margin: 10px 0; padding: 120px 0 10px 0; border-bottom: 1px dotted 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(--bgColor); border: 2px solid var(--bgColor);}
.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 img{ width: 100%;}
.incoterms .info ul{
    padding-left: 20px;}
.incoterms strong{ display: inline-block;}
.incoterms strong::first-letter{ color: var(--bgColor);}
.incoterms .info li{ list-style: initial; }
.entry .topabc{
    position: relative; z-index: 1}
.entry table{ width: 100%;}
.entry table th{ padding: 15px 15px; background: var(--bgColor); 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 .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 #f1f1f1; background: #f1f1f1; text-align: center; line-height: 40px; margin: 0 20px; color: #000; width: 150px ;border-radius: 10px;
    display: block;}
.spec .btns a.cur,.spec  .btns a:hover{ background: #fff; border:2px solid var(--bgColor);}
.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;
    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-top:1px solid #f1f1f1; 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;}



.oceancount ul.tabli{ width: 700px; margin: 0 auto;
    padding-top: 20px;}
.oceancount .tabli li{ position: relative; background: rgb(242,242,242); padding:20px 70px; border:2px solid rgb(242,242,242);  border-radius: 10px; cursor: pointer;}
.oceancount .tabli li:after{  position: absolute; left: -20px; top: 15px;
    width: 40px; height: 40px;
    border-radius: 50%;
    border:2px solid  rgb(217,217,217);
}
.oceancount .tabli li:nth-child(1):after{
    background: url("../image/tools/shipicon.png") no-repeat center #fff;background-size: 60%;
}
.oceancount .tabli li:nth-child(2):after{
    background: url("../image/tools/airicon.png") no-repeat center #fff;background-size: 60%;
}

.oceancount .tabli li:nth-child(1):hover:after,.oceancount .tabli li:nth-child(1).cur:after{
    background: url("../image/tools/shipiconh.png") no-repeat center #fff;background-size: 60%;border: 2px solid var(--bgColor);
}
.oceancount .tabli li:nth-child(2):hover:after,.oceancount .tabli li:nth-child(2).cur:after{
    background: url("../image/tools/airiconh.png") no-repeat center #fff;background-size: 60%;border: 2px solid var(--bgColor);
}

.oceancount .tabli li a{ font-size:20px; color: #000}
.oceancount .tabli li:hover a,.oceancount .tabli li.cur a{ font-weight: bold;}
.oceancount .tabli li.cur,.oceancount .tabli li:hover{ background: #fff; border: 2px solid  var(--bgColor);}
.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; background: none; text-align: center; border-radius: 50px;}
.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); border-radius: 50px; text-align: center; line-height: 50px; font-size: 18px; padding: 0 40px; width: 240px;}
.oceancount  .jsresult dl dd{ font-weight: bold;}

.dialogbg{ background: rgba(0,0,0,0.5); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index:9999; }
.dialog{ position: fixed; top: 50%; display: none; background: rgb(217,217,217);
    margin-top: -250px; left: 50%; padding: 20px 20px;
;
    margin-left: -180px; width: 360px; z-index: 10000;
}
.dialog .swiper-containerad{ width: 100%;   overflow: hidden;}
.dialog h2 a{ font-size: 26px;}
.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: -15px; top: -15px; background: url("../image/closewhite.png") no-repeat;
    background-size: 100%; width: 30px; height: 30px; cursor: pointer;}
#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);
}

.qu_list {
    position: relative;
    z-index: 5;
    padding-top: 32px
}

.qu_list li {
    margin-bottom: 12px
}

.qu_list li h5 {
    position: relative;
    margin: 0;
    padding: 16px 0;
    font-size: 30px;
    text-indent: 40px;
    line-height: 1;
    color: #fff;
    border-bottom: 1px solid var(--bgColor);
    cursor: pointer;
}

.qu_list li h5::after {
    position: absolute;
    top: auto;
    right: 20px;
    bottom: auto;
    width: 37px;
    height: 37px;
    background-image: url("../image/about/lidown.png");
    background-repeat: no-repeat;
    background-size: 37px;
    transition: .3s;
    content: "";
}

.qu_list li:hover h5 {
    color: var(--bgColor)
}

.qu_div p {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 12px;
    overflow: hidden;
    height: 0;
    transition: height .3s ease-in-out;
}

.qu_div p a {
    display: block;
    padding: 6px 0;
    width: 100%;
    max-width: 33.3%;
    font-size: 18px;
    color: #fff;
    line-height: 1.79;
    text-align: left;
    padding-left: 100px;
    transition: all .3s ease-in-out;
    font-weight: bold;
}

.qu_list li.cur h5 {
    color: var(--bgColor)
}

.qu_list li.cur h5::after {
    transform: rotate(180deg);
    background-image: url("../image/about/lidownh.png");
}

.qu_list li.cur .qu_div p {
    height: auto
}

.map-box {
    padding: 16px 30px ;
    background: #F2F2F2;
    border-radius: 10px;
    margin-bottom: 26px;
    overflow: hidden;
    transition: height .3s ease-in-out;
}

.map-box h5 {
    position: relative;
    margin-bottom: 20px;
    padding: 10px 36px 10px 12px;
    border-bottom: 1px solid var(--bgColor);
}

.map-box h5 em::after {
    position: absolute;
    top: 25px;
    right: 6px;
    width: 21px;
    height: 13px;
    background-image: url("../image/about/dw2.png");
    background-repeat: no-repeat;
    background-size: 21px 13px;
    transition: .3s;
    content: "";
}

.map-box1 h5 em::after {
    cursor: pointer;
    position: absolute;
    top: 25px;
    right: 6px;
    width: 21px;
    height: 13px;
    background-image: url("../image/about/dw21.png");
    background-repeat: no-repeat;
    background-size: 21px 13px;
    transition: .3s;
    content: "";
}
.map-box.down h5 em::after {
    transform: rotate(180deg);
    background-image: url("../image/about/dw2h.png");
}

.map-box h5 span {
    font-size: 30px;
}

.map-box h5 em {
    cursor: pointer;
    font-size: 30px;
    color: var(--bgColor)
}

.map-box li {
    position: relative;
    padding-left: 48px;
    line-height: 34px;
    margin-bottom: 10px;
    width: 50%;
    font-size: 16px
}

.map-box li img {
    position: absolute;
    left: 0;
    top: 0;
    width: 34px;
    height: 34px
}
.map-dl dt{ margin: 20px 0}
.map-dl dt em {
    padding: 0 24px;
    height: 42px;
    line-height: 40px;
    border: 1px solid #fff;
    font-size: 20px;
    border-radius: 21px;
    background: #D9D9D9;
    margin-right: 10px;
    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
}
.map-dl dt em.cur {
    border-color: var(--bgColor);
    background: #fff;
}
.map-dl dd img{display: none; width: 100%; height: 323px}
.ctsearch{ width: 340px; }
.ctsearch input{ width: 230px;}
.ctsearch button{ width: 100px; margin-top: 0; margin-left: 10px; border-radius: 50px; text-align: center; background: none;}
.allsearch{ width: 380px; }
.allsearch input{ width: 270px;}
.allsearch button{ width: 100px; margin-top: 0; margin-left: 10px;}


.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;}
#unit{ text-align: left;}
.service3  .swiper-pagination{ display: none;}


.service1{}
.service1 .serviceinfo{padding: 50px 0; }
.service1 .serviceinfo .mt1200{ background:#fff;padding:0px 80px 60px;}
.service1 .serviceinfo .mt1200 .en{  text-align: center; position: relative; overflow: hidden;
    padding-top: 14px;}
.service1 .serviceinfo .mt1200 .en:before{
    content: ""; display: block; width: 50px; height: 18px; top: 0px; left: 50%;
    margin-left: -25px; border: 1px solid var(--bgColor); border-radius: 50%; position: absolute; z-index: 1;
}
.service1 .serviceinfo .mt1200 .en:after{
    content: ""; display: block; width: 50px; height: 10px; top: 8px; left: 50%; background: #fff;
    margin-left: -25px; position: absolute; z-index: 2;
}
.service1 .serviceinfo .mt1200 .cn{  text-align: center;
    padding-top: 10px;}
.service1 .serviceinfo .mt1200 .content{
    padding: 30px 0; font-size: 20px;
}
.service1  .infodesc{}
.service1  .infodesc dl{ position: relative; background: rgb(242,242,242); margin: 20px auto 80px auto; padding: 0px 80px;}
.service1  .infodesc dl dt{ padding:0 40px 0 0; flex: 1;}
.service1  .infodesc dl dt h1{padding-bottom: 10px;}
.service1  .infodesc dl dt p{
    padding-bottom: 10px;}
.service1  .infodesc dl dd{margin-top: -40px;padding-bottom: 40px;}
.service1  .infodesc dl:last-child{ flex-direction: row-reverse;}
.service1  .infodesc dl:last-child dt{
    padding-left: 80px;}

.subnav{
    padding-top: 30px;}
.subnav dl{}
.subnav dl dt{ position: relative;}
.subnav dl dt a{ overflow: hidden; width: 300px; height: 160px; display: block; border-radius:80px; background-size: cover; background-position: center center; background-repeat: no-repeat;}
.subnav dl dd{ font-size: 18px; text-align: center; line-height: 40px; color: #000;}
.subnav dl dd a{ color: #000; font-weight: bold; position: relative;}
.subnav dl dt:after{ content: ''; position: absolute; width: 300px; height: 160px;border-radius:80px;  background: rgba(0,0,0,0.3);top: 0; left: 0;
    opacity: 0; cursor: pointer}
.subnav dl dt:hover:after{ opacity: 1;}
.subnav .mulist{ background: url("../image/service/mulist.png") no-repeat center 0px ; background-size: 30px; height: 50px;
    padding-top: 30px; color: var(--bgColor); font-weight: bold;}



.service2 {}
.service2 .serviceinfo{padding: 50px 0; }
.service2 .serviceinfo .mt1200{ background:#fff;padding:0px 80px 60px;}
.service2 .serviceinfo .mt1200 .en{  text-align: center; position: relative; overflow: hidden;
    padding-top: 14px;}
.service2 .serviceinfo .mt1200 .en:before{
    content: ""; display: block; width: 50px; height: 18px; top: 0px; left: 50%;
    margin-left: -25px; border: 1px solid var(--bgColor); border-radius: 50%; position: absolute; z-index: 1;
}
.service2 .serviceinfo .mt1200 .en:after{
    content: ""; display: block; width: 50px; height: 10px; top: 8px; left: 50%; background: #fff;
    margin-left: -25px; position: absolute; z-index: 2;
}
.service2 .serviceinfo .mt1200 .cn{  text-align: center;
    padding-top: 10px;}
.service2 .serviceinfo .mt1200 .content{
    padding: 30px 0; font-size: 20px;
}
.service2 dl{ height: 700px;background: rgb(242,242,242); }
.service2 dl dt{  width: 50%;  height: 100%; padding: 40px;}
.service2 dl dt h1{
    padding-bottom: 30px;}
.service2 dl:nth-child(even){flex-direction:row-reverse;}
.service2 dl dt{ }
.service2 dl dt img{ display: inline-block; transform: translateX(50px); height: 480px;}
.service2 dl dd{ width: 50%;padding-left: 140px; height: 100%;  background-repeat: no-repeat; background-position: center; background-size: cover;}
.service2 dl dd h1{  line-height: 80px;}
.service2 dl dd p{ max-width: 500px; position: relative;}
.service2 dl:nth-child(even) dt{  text-align: left; position: relative; }
.service2 dl:nth-child(even) dt .dtpos{ position: absolute; background: #fff; width: 70%; left:-30%;top: 10%; height: 80%;
    padding: 40px; line-height: 30px;}

.service2 dl:nth-child(even) dd{ padding-right: 140px;}
.service2 dl:nth-child(even) dt img{ transform: translateX(-50px)}

#resultlist{}
#resultlist dl{ width: 753px; margin: 0 auto;
}
#resultlist dl dt{ position: relative;    padding-left: 70px; color: #000; font-weight: bold;
    background: url("../image/contacts/line.png") no-repeat;
background-position: 30px 106px;
}
#resultlist dl dt h1{ line-height: 80px;
    padding-left: 30px;}
#resultlist dl dt .worktime1{ position: absolute; background: url("../image/contacts/address.png") no-repeat; width:88px;  height: 109px;
    text-align: center; padding: 20px 20px; color: #000; top: 0; left: 0;}
#resultlist dl dt .worktime{ margin-top: 50px; font-size: 18px;}
#resultlist dl dt .other-info{margin-top: 116px; font-size: 18px; line-height: 34px;background: url("../image/contacts/line1.png") no-repeat; background-position: 2px 84px;}
#resultlist dl dt{}
#resultlist dl dt{}
#resultlist dl dt .other-info a{ left: 0; bottom: initial;
    margin-left: 0;}
#resultlist dl dt .mapbtn{ cursor: default; background: url("../image/contacts/maph.png") no-repeat; width: 193px; height: 156px; display: block; }
#resultlist dl dt .mapbtn.cur{ background: url("../image/contacts/maph.png") no-repeat; }
#resultlist dl dd{ background: url("../image/contacts/line1.png") no-repeat; min-height: 150px; background-position: 61px -65px; }
#resultlist dl dd .mapmain{ display: none; border: 2px solid var(--bgColor); border-radius: 30px; padding: 20px; background: #fff; }
#resultlist dl dd.cur { padding-bottom: 60px;background-position: 88px bottom;}
#resultlist dl dd.cur .mapmain{ display: block;}
#resultlist dl dd .mapmain .maphead{ border-bottom: 1px solid var(--bgColor); padding-bottom: 10px;}
#resultlist dl dd .mapmain .maphead h1{ font-weight: bold; line-height: 50px;}
#resultlist dl dd .mapmain .maphead span{ color: var(--bgColor); font-weight: bold; font-size: 20px; display: inline-block; line-height: 40px;}
#resultlist dl dd .mapmain .map{ height: 400px; margin: 20px auto;}
#resultlist dl dd .mapmain .button1{ width:170px; background-position: 118px 12px; margin:0;}
#svg{ display:block }
#svg1{ display: none}
@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 .nav{
        margin-left: 40px;}
    header .nav dl dt a{ margin: 0 10px;}

}
@media screen and (max-width: 1024px) {
    * {
        touch-action: auto;
    }
    body {
        overflow-x: hidden
    }
    .mt1200{ 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 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:10px; 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;
        opacity: 1;}
    header .nav dl dd a:first-child{  box-shadow: none; }
    .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/menuh.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}
}



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

    * {
        touch-action: auto;
    }
    .mt1200{ width: 100%}
    .banner1{ width: 100%; position: relative;
        overflow: hidden;}
    .banner1 img{ max-width: 140%; margin-left: -20%; }
    .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 .nav dl{ width: 100%;}
    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:10px; background: url("../image/down1.png") no-repeat;
        width: 16px; height: 16px; background-size: 100%; left: auto;}
    header .nav dl dd{ position: initial; width: 100%; visibility: visible; text-align: left; display: none; height: auto;
        padding-top: 0;
        opacity: 1;}
    header .nav dl dd a:first-child{  box-shadow: none; }
    .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/menuh.png");}

    .bannerinfo .ovl{ width: 210px; height: auto;
        margin-top: -190px;
        margin-left: -105px;}
    .banner .t2{ font-size: 30px;}
    .tooltabs{ width: 100%; left: 0;
        margin-left: 0;}
    .tooltabs .tab-info{ width: 100%; padding-left:10px;
        padding-right: 10px;}
    .xieshou,.liaojie{ display: none;}
    footer .copyright{ font-size: 12px;}
    footer .banshichu{ width: 100%;padding: 0px 10px;}
    .mapa{ display: none;}
    #contcat .form{ width: 100%;}
    #contcat .form form{ width: 100%;
        padding: 20px 10px;}
    #contcat .form p{ font-size: 55px;}
    #contcat .form form label{
        margin-right: 2px;}
    .tooltabs .tab a{ font-size: 16px;}
    .cfs .form .filter-option, .filter-option{ font-size: 14px;}
    #services .serverswiper{ width: 100%; }
    #services .swiper-container{ max-width: 100%;}
    #professional{
        padding-top: 50px;}
    .title1{ font-size: 30px;}
    #professional .dd-item{ width: 100%;
        margin-top:20px;}
    .bg_wrwppe{ display: none;}
    #services .bgimg{ display: block; position: absolute; z-index: 0; width: 100%; height: 100%; object-fit: cover;}
    #services .service-item{ position: relative; height: 280px;}
    #services .swiper-button-next, .info2 .swiper-button-next,#services .swiper-button-prev, .info2 .swiper-button-prev{ display: none;}
    .service3  .swiper-pagination{ display: block;}
    #services .swiper-container{border-radius: 0;}
    #professional .sw .pro-title a{ font-size: 18px;}
    .aboutinfo{ padding: 40px ;}
    .tabli{ justify-content:center;}
    .advantage li{ margin: 10px 12px;}
    .summarize .t1{ font-size: 60px; top: -40px;}
    .summarize .t2{ font-size: 60px; bottom:-30px;}

    .authentication .rzlist dl,.activities .gylist dl{ flex-direction:column; height: auto; width: 100%;}
    .authentication .rzlist dl dt{ margin: 0 auto;}
    .authentication .rzlist dl dd{ width: 100%;margin-left: 0;
        margin-top: 10px;}
    .authentication .rzlist dl dd p{ display: none;}
    .authentication .rzlist dl dd a.more{ display: none;}
    .authentication .rzlist dl dd .date{
        padding-top: 8px;}
    .rzm-bt{ height: initial; line-height: initial;}
    .rzm-info{ display: block;padding: 20px 5px 50px}
    .rzm-info .info{ width: 100%; }
    .rzm-info .image, .rzm-info img{ width: 100%; height: auto;}
    .gg-nav > .mt1440 .fpian p{ font-size: 16px; display: none;}
    .gg-nav > .mt1440 .fh{ font-size: 16px;}

    .gytop{ flex-direction: column; }
    .activities .gydesc{ width: 100%; height: 266px;display:none;}
    .activities .gydesc p{
        padding: 12px 10px;}
    .activities .imgs{ width: 100%;}
    .activities .imgs .swiper-pagination{ display: block; top: 10px; height: 20px;}
    .activities .swiper-pagination .swiper-pagination-bullet{ width: 16px; height: 16px;}
    .activities .imgs .pro-title a{ }
    .activities .gylist dl dd{ padding: 20px 10px 60px 10px;}
    .gy-time dl{
        margin: 0; padding: 10px 10px; height: auto;}
    .gy-info{ display: block;}
    .gy-info .gy-l{ width: initial; padding: 0 10px;}
    .gy-info .gy-l img{ display: block; margin: 0 auto; max-width: 100%; height: auto}
    .gy-info .gy-r{ width: 100%; height: auto;}
    .gy-info .gy-r img{ display: block;}
    .notice .noticelist dl{ flex-direction: column;
        padding: 0;}
    .notice .noticelist dl dt{ width: 100%;}
    .notice .noticelist dl dd{ width: 100%;
        padding: 10px 10px 50px 10px;}
    .notice .gginfo{}
    .notice .gginfo .title{ width: 100%;
        padding: 18px 8px;}
    .notice .gginfo .desc{ width: 100%;
        padding: 10px 10px;}
    .notice .gginfo .readmore{ width: 100%;
        padding: 10px 0;}
    .notice .gginfo .videolist .btns{ }
    .videolist .btns .rjiantou{ width: 30px; height: 30px; left: 10px;}
    .notice .gginfo .videolist .swiper-container{ width: 80%;   opacity: 1; visibility: visible; margin: 0 auto 0 15%;}
    .notice .gginfo .swiper-pagination{ width: 290px}
    .notice .gginfo .swiper-page{ right: 20px;}
    .notice .gginfo .videolist img{ display: block; margin: 0 auto;}
    .notice .noticelist dl dd h1{
        padding-bottom: 20px;}
    .gg-ad{ position: initial;width: 100%}
    .gg-ad em{ position: initial;}
    .gg-ad h2{ margin: 0 auto;}
    .gg-info{
        padding: 10px;}
    .gg-info .gg-news{ z-index: -1;}
    .gg-infoimg{ position: initial; width: 100%;}
    .gg-info img{ max-width: 100%; display: block; margin: 0 auto; height: auto;}
    .job .title,.job .jobform{ width: 100%;}
    .job .jobresult .map{ width: 100%;}
    .job .jobresult .joblist{ width: 100%;}
    .service1 .serviceinfo .mt1200{ padding: 0 10px 10px;}
    .jk-box{ flex-direction: column;}
    .jk-r{ width: 100%; margin: 0 0px; padding: 0 10px;}
    .ps-box{ width: 100%;}
    .ps-box a.ps-btn{ width: 170px;}
    .ps-box a.ps-btn p{font-size: 16px;}
    .ps-box a.ps-btn em, .ps-box a.ps-btn em img{ width: 20px; height: 20px;}
    body > div.service1 > div:nth-child(2) > div:nth-child(2) > div.jk-r{ text-align: right;}
    .serul-box{ flex-direction: column;}
    .serul-box li{ width: 100%;}
    .service3 .serviceinfo .mt1200{ padding: 0 10px 10px;}
    .service3 .serviceinfo .mt1200 .content img{ display: block; margin: 0 auto; max-width: 100%;}
    .service3 .info1 dl{ width: 50%; margin: 0;
        padding-left: 10px;}
    .service3 .info1{ background-color: rgb(248,248,248);}
    .service3 .info1 dl dd{ width: 100%;}
    .service3 .cate ul.tabli{ justify-content: space-between}
    .service3 .cate .tabli li{ padding: 10px 10px;}
    .service3 .cate .tabli li:after{ display: none;}
    .service3 .info2 .swiper-slide h5{ font-size: 20px;}
    .service3  .swiper-button-next, .info2 .swiper-button-next, .service3 .swiper-button-prev, .info2 .swiper-button-prev{ display: none;}
    .service3 .swiper-button-next,  .service3 .info2 .swiper-button-next{ right: 10px; top: 30px;}
    .service3 .swiper-button-prev,  .service3 .info2 .swiper-button-prev{ left: 10px;top: 30px;}
    .map-box li span{ word-break: break-all;}
    .qu_div p a{
        padding-left: 10px; width: 50%; font-size: 16px;}
    .contacts-top .title{ display: none;}
    .cs-btn{
        color: #000;
        line-height: 30px; width: 96px;
        border-radius: 16px;
        border: 2px solid #595959;
        margin-top:  10px;
        font-size: 18px;
        background-position: 4px center; background-size: 18px;
        padding-bottom: 0px;}
    .cs-btn:hover{ color: #000;}
    .sx-btn{
        margin-top: 10px;}
    .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;}
    .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: 30px;}
    .right_btn a.a2 img{ width: 24px;}
    .right_btn a.a3 img{ width: 25px;}
    .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%;}
    .about .leftabout img{ width: 100%;}
    .about .leftabout .logo1{ display: none;}
    .about .rightabout{
        padding:0 10px;}
    .about .rightabout .more{ right: 10px;}
    .cfshome .form h1{ width: 100%; color: #fff;}
    .cfshome .form{ right: 10px; top: 180px;}
    .service .swiper-container{ width: 100%;
        margin-top: 85px;
        margin-left:0;}
    .service .points{ z-index:1; position: absolute; width: 95px;}
    .service h1{
        padding-left: 100px;}
    .service .swiper-slide h1{
        padding-left: 0;}
    .service .points .round{
        z-index: 2; width: 300px; height: 300px;left: -214px;
        margin-top: -150px;}
    .service .swiper-slide-prev{ transform: scale(0)}
    .service .swiper-slide-active{ transform: scale(1)}
    .service .btns{ bottom: -106px;}
    .service .more{ display: none;}
    .concat{ position: relative;}
    .contcat .title{ position: absolute; width: 100%; text-align: left;
        padding-left: 20px;}
    .contcat .form{ width: 100%;}
    .contcat .title h1{ font-size: 50px; color: #fff;}
    .contcat .form .us{ text-align: right; font-size: 50px;
        padding-right: 56px;}
    .contcat .title h3{ display: none;}
    .contcat .form form{ width: 98%; margin: 0 1%;}
    .joinus .linkbtn{ width: 100%; left: 0;
        margin-left: 0;}
    .joinus .linkbtn h1{
        margin-left: 8px;}
    header .nav dt > a:before{ bottom: -8px;}
    header .nav dt > a:after{ display: none;}
    .aboutmain .mt1200{ flex-wrap: wrap;}
    .aboutmain .aboutimg{ width: 100%;
        margin-right: 0;}
    .aboutmain .info{ padding: 0 10px;}
    body > footer > div.mt1440.dd-flex.dd-justify-between.dd-align-end > div.banshichu > div > div:nth-child(5){ width: 100% !important;}
    .history .item{ width: 65%;}
    .history .item:nth-child(even) {text-align: left; padding-left: initial;
        margin-left: auto;}
    .history .item:nth-child(even) .year {left: -45px; right: initial; transform: translate(-100%, -18px);}
    .history .item:nth-child(even) .month {justify-content: flex-end; padding-right: initial; padding-left: 45px;}
    .history .item:nth-child(even) .img {margin-left: auto;}
    .history .item:nth-child(even) .month::before {left: 0; right: initial; transform: translate(-50%, -50%);}
    .history .item:nth-child(even) .txt::before {left: -6px; right: initial; transform: translate(-50%, -50%); background-image: url("../image/about/sj.png"); background-position: center;}
    .history .item:nth-child(even) .month::after {left: 0; right: initial; transform: translate(-50%, -50%);}
    .history .month.on .txt:before{ background-image: url("../image/about/sj1.png");}
    .history .item:nth-child(even) .month.on .txt:before{ background-image: url("../image/about/sj1.png");}
    .history .line{ left: 35%; top: 30px;}
    .history .month .txt{ padding: 20px ;}
    .rz .rzinfo{ width: 100%; padding: 10px;
        margin-top: 20px;}
    .rz .rzinfo .aeo{ display: none;}
    .rz .top5000{  height: 180px;}
    .gginfo .swiper-slide .img{ width: 100%; position: initial; height: auto;}
    .gginfo .swiper-slide h1{ width: 98%;
        padding: 0 1%;}
    .gginfo .swiper-slide .imgborder{ display: none;}
    .gginfo .swiper-slide span{ }
    .gginfo .swiper-slide .img-info{ height: auto;
        padding: 30px 30px 0 0;}
    .gginfo .swiper-slide span{ width: 60px; height: 60px;}
    .gginfo .swiper-slide{ width: 100%;}
    .gginfo .swiper-slide.swiper-slide-next{ width: 100%;}
    .toptitle .imgborder{ display: none;}
    .toptitle{
        margin-top: 0; height: auto;}
    .job .job-list dl{ width: 100%;}
    .job .job-list dl dt{ width: 100%;}
    .job .job-list dl dd{ display: none;}
    .job .job-list dl:nth-child(even) dt{ transform: translateX(0)}
    .job .job-list dl dt .moredetail {
        right: 20px;
        left: auto;
    }
    .jobmore .top{ width: 100%;}
    .jobmore .jobmore-info{ width: 100%;}
    .jobmore .jobmore-info td:first-child{ width: 146px;}
    .apply .bg-left{ display: none;}
    .apply .apply-title{ left: 30px;}
    .apply .form{ width: 100%; right: 0;}
    .service1 .infodesc dl{ padding: 0 10px; flex-wrap: wrap}
    .service1 .infodesc dl dt{
        padding: 0;}
    .service1 .infodesc dl dd{width: 100%;
        margin-top: 0;}
    .service1 .infodesc dl dd img{ width: 100%;}
    .service1 .infodesc dl:last-child dt{
        padding-left: 10px;}
    .service2 dl dd{ display: none;}
    .service2 dl dt{ width: 100%;}
    .service2 dl{ height: initial;}
    .service2 .serviceinfo .mt1200{
        padding: 0 10px;}
    .service2 dl:nth-child(even) dt .dtpos{ position: initial; width: 100%;}
    .service2 dl:nth-child(even) dt{
        padding: 0;}
    .subnav dl dt a{ width: 120px; height: 60px;}
    .subnav dl {
        margin: 0 10px;
    }
    .subnav dl dt:after{ display: none;}
    #resultlist dl{ width: 100%;}
    #resultlist dl dt h1{ line-height: initial;}
    .cfshome{ padding: 0 10px;}
    .cfshome1 .form{ width: 100%; right: 0;
        margin-right:initial;}
    .cfshome .form .search{ display: block;}
    .cfshome1 .form h1{ color: #fff;}
    footer .copyright{ line-height: 28px;}
    #resultlist dl dt h1{
        padding-left: 90px;}
    #resultlist dl dt{
        padding-left: 20px; background: none; }
    #resultlist dl dt .other-info{ flex-wrap: wrap; background: none;position: relative;
        margin-top: 15px;}
    #resultlist dl dd{ background: none;}
    #resultlist dl dt .mapbtn{ position: absolute; right: 20px; width: 86px; height: 60px; background-size: contain; bottom: 5px; display: none;}
    #resultlist dl dt .mapbtn.cur{ background-size: contain; }
    #svg{ display: none}
    #svg1{ display: block}
    .p-index_movie__svg{ height: 103vh;}
}




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

    body {
        overflow-x: hidden
    }

    .mt1440,.mt820 {
        width: 100%;
    }
}




@-webkit-keyframes circle2 {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes circle2 {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes scale {
    0%{
        transform: scale(0);
    }
    50%{
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}