@charset "utf-8";
html {
    font-size: 62.5%
}

body {
    font-size: 14px;
    font-family: "Open Sans", "PingFangSC-Light", Arial, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
    color: #374051;
    overflow-x: hidden;
    line-height: 1;
    word-wrap: break-word
}

code,
pre {
    font-family: "\5FAE\8F6F\96C5\9ED1", sans-serif
}

.hint {
    font-size: 12px;
    color: #999;
    clear: both;
    margin-top: 5px
}

.js-tooltip {
    display: inline-block;
    margin: 0 5px !important;
    color: #21d376 !important;
    font-size: 14px !important;
    line-height: 1em;
    float: none !important
}

.js-tooltip:after {
    content: "\e622";
    font-family: "kf5-website"
}

input {
    font-family: "Open Sans", "PingFangSC-Light", Arial, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif
}

.cf:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.fl {
    float: left
}

.fr {
    float: right
}

.tc {
    text-align: center
}

.tl {
    text-align: left
}

.tr {
    text-align: right
}

.fn {
    float: none
}

.red {
    color: #ff595f
}

.green {
    color: #21d376
}

.orange {
    color: #ffa900
}

.blue {
    color: #01aef0
}

.purple {
    color: #9e5ae3
}

.link {
    color: #00b4de
}

.link:hover {
    color: #00c8f2
}

.ofh {
    overflow-y: hidden
}

.tran2 {
    -webkit-transition: all ease 0.2s;
    -moz-transition: all ease 0.2s;
    -o-transition: all ease 0.2s;
    transition: all ease 0.2s
}

.tran4 {
    -webkit-transition: all ease 0.4s;
    -moz-transition: all ease 0.4s;
    -o-transition: all ease 0.4s;
    transition: all ease 0.4s
}

[class^=btn] {
    border-radius: 3px;
    display: inline-block
}

[class^=btn]:active {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset
}

[class^=btn].green {
    color: #fff;
    background: #21d376
}

[class^=btn].green:hover {
    background: #2bdd80
}

.btn-lg {
    font-size: 18px;
    height: 42px;
    line-height: 42px;
    padding: 0 15px
}

.center {
    float: left;
    position: relative;
    left: 50%
}

.center>* {
    float: left;
    position: relative;
    left: -50%
}

.hue-shine {
    color: #21d376;
    background-image: -webkit-linear-gradient(92deg, #21d376, #00c8f2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 15s infinite linear
}

@-webkit-keyframes hue {
    from {
        -webkit-filter: hue-rotate(0deg)
    }
    to {
        -webkit-filter: hue-rotate(-360deg)
    }
}

.wrap {
    max-width: 1160px;
    margin: 0 auto
}

#toolitembar {
    position: fixed;
    right: 25px;
    bottom: 120px;
    z-index: 999
}
#back-top {
    opacity: 0;
    -webkit-transform: translateY(60px);
    -moz-transform: translateY(60px);
    -ms-transform: translateY(60px);
    -o-transform: translateY(60px);
    transform: translateY(60px);
    -webkit-transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -moz-transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -o-transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275)
}

#back-top.show {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px)
}


.nine {
    background-color: #2250AE;
    background-image: url(../images/gfx/six-banner.png);
    background-position: center 160px;
    background-repeat: no-repeat
}

.nine .wrap {
    position: relative
}

.nine .btn-lg {
    position: absolute;
    left: -15px;
    top: 610px;
    border-radius: 40px;
    background: #22ac38;
    padding: 0 40px;
    color: #fff
}

.nine .btn-lg:hover {
    background: #2cb642
}

.nine-row1 {
    height: 850px;
    background: url(../images/gfx/six-row1-banner.png) no-repeat center #fffaee;
    text-indent: -9999px;
	
}

.nine-row2 {
    padding: 80px 0;
	background:url(../images/gfx/decorates-lines.png) no-repeat top center #fffaee;
}

.nine-row2 .f18 {
    font-size: 18px
}

.nine-row2 .nine-article {
    padding: 30px 60px 60px;
    font-size: 18px;
    color: #555;
    line-height: 1.5em;
    background: #fff;
    position: relative;
    margin: auto;
	border-radius:10px;
	max-width:800px;
    opacity:0.9
}


.nine-row2 .nine-article h3 {
    font-size: 30px;
    margin-bottom:30px;
	margin-top:25px;
    position: relative;
    line-height: 50px;
    padding-left: 110px;
    left: -60px;
    color: #555
}

.nine-row2 .nine-article h3:before {
    content: "";
    display: inline-block;
    height: 50px;
    width: 95px;
    background: url(../images/gfx/six-arrow.png) no-repeat top right;
    position: absolute;
    left: 0;
    top: 0
}

.nine-row2 .nine-article h4 {
    font-size: 26px;
    margin-bottom:30px;
	margin-top:25px;
    position: relative;
    line-height: 50px;
	font-weight:bold;
    color: #555
}

.nine-row2 .nine-article p {
    margin-bottom: 20px;
}

.nine-row2 .nine-article .number {
    height: 40px;
    min-width: 40px;
    text-align: center;
    line-height: 40px;
    background:#01aef0;
    border-radius: 100%;
	color:#fff;
    display: inline-block;
    margin-right:20px
}

.nine-row2 .nine-price {
    width: 258px;
    display: inline-block;
    line-height: 1.5em;
    background: #f5f5f5;
    padding: 30px 20px;
    color: #333;
    margin: 0 3px
}

.nine-row2 .nine-price p {
    margin-bottom: 0
}

.nine-row2 .nine-price h4 {
    font-size: 22px;
    font-weight: bold;
    line-height: 30px;
    color: #333;
    text-align: center;
    width: 235px;
    margin: auto;
    padding-bottom: 18px;
    border-bottom: 1px solid #999;
    position: relative;
    margin-bottom: 30px
}

.nine-row2 .nine-price h4:before {
    content: "";
    margin-right: 8px;
    vertical-align: top
}

.nine-row2 .nine-price h4:after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #999;
    position: absolute;
    bottom: -5px;
    left: 50%;
    margin-left: -4px
}

.nine-row2 .nine-price .f15 {
    font-size: 15px
}

.nine-row2 .nine-price .f36 {
    font-size: 36px
}

.nine-row2 .nine-price .fb {
    font-weight: bold
}

.nine-row2 .nine-price .btn {
    display: inline-block;
    height: 40px;
    width: 160px;
    color: #fff;
    font-size: 15px;
    line-height: 40px;
    border-radius: 0;
    font-weight: normal
}

.nine-row2 .nine-item1 {
    border-top: 8px solid #01caff
}

.nine-row2 .nine-item1 .btn {
    background: #999
}

.nine-row2 .nine-item2 {
    border-top: 8px solid #31eeba
}

.nine-row2 .nine-item2 h4:before {
    background-position: -29px 0
}

.nine-row2 .nine-item2 .btn {
    background: #00a5cd;
    background: #999
}

.nine-row2 .nine-item3 {
    border-top: 8px solid #41a5ec
}

.nine-row2 .nine-item3 h4:before {
    background-position: -58px 0
}

.nine-row2 .nine-item3 .btn {
    background: #ff9300;
    background: #999
}

.nine-row2 .back-double11 {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-bottom: 130px solid #01aef0;
    border-left: 130px solid transparent
}

.nine-row2 .back-double11 a {
    font-size: 20px;
    position: absolute;
    line-height: 1;
    width: 130px;
    left: -85px;
    bottom: -115px;
    font-weight: normal;
    color:#fff;
}

.nine-row2 .back-double11 a:before {
    content: "";
    display: inline-block;
    height: 32px;
    width: 28px;
    position: absolute;
    left: 40px;
    bottom: 28px
}


ul.line{padding:10px 0}
ul.line li{font-size:18px;line-height:40px;margin-bottom:20px;color:#666}
ul.line li i{font-size:14px;color:#999;margin-right:40px}

.copyright{text-align:center;padding-top:40px}
.widgets{position:fixed;bottom:20px;right:20px}
.widgets a{display:block;background:#fff;padding:5px;text-align:center;font-size:13px;padding-bottom:8px;border-radius:5px;color:#777}
.widgets a img{width:90px}
@media screen and (max-width: 450px) { 
.nine-row1{background-size:150%;height:400px;max-width:100%;overflow:hidden}
.nine-row2{padding:30px 0;background-size:110%;max-width:100%;overflow:hidden}
.nine-row2 .nine-article {margin:0 10px;padding:30px 25px 25px}
.nine-row2 .nine-article h3{margin-top:15px}
.nine-row2 .nine-article h4{margin-bottom:20px}
.nine-row2 .nine-article .number {margin-right:10px}
ul.line{padding-bottom:0}
ul.line li i{margin-right:10px}
.copyright{margin-left:10px;margin-right:10px}
.widgets{display:none}
}