.clearfix { clear: both; } .clearfix::before { content: ""; display: table; height: 0; } .clearfix::after { content: ""; display: table; clear: both; } .left { float: left; } .right { float: right; } .content-box { position: relative; max-width: 1200px; margin: auto; overflow: hidden; } /*标题*/ .au-title { /* padding: 40px 0 100px 0; */ text-align: center; color: #333333; } .au-title-h { font-size: 28px; font-weight: 600; } /*解释脚注*/ .footnote-box { padding: 38px 0 100px 0; color: #333; } .footnote-box h2 { font-size: 22px; } .footnote-box .footnote-content { padding: 24px 0; font-weight: bold; } .footnote-box .fontnete { text-align: right; } /*广告及说明*/ .au-banner-box { perspective: 1000px; transform-style: preserve-3d; } .au-banner-box > .banner-item { transition: transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .au-banner-box > .banner-item:hover > .banner-text-box { border: 4px solid #ccc; } .au-banner-box:nth-child(even) .banner-item:hover { transform: rotateY(-3deg) } @media screen and (max-width: 640px) { .au-banner-box:nth-child(even) .banner-item:hover{ transform: none; } .au-banner-box > .banner-item:hover > .banner-text-box{ border: none; } } .au-banner-box:nth-child(odd) .banner-item:hover { transform: rotateY(3deg) } .au-banner-box:nth-child(odd) { transform-origin: 50% 50%; } .au-banner-box:nth-child(even) { transform-origin: 50% 50%; } .banner-item { margin-bottom: 100px; display: flex; align-items: center; justify-content: space-between; } .banner-item:last-child { margin-bottom: 120px; } .banner-img-box { } .banner-img-box img { width: 100%; height: 100%; } .banner-text-box { box-sizing: border-box; display: flex; align-items: center; width: 550px; padding: 60px 30px; line-height: 1.8; color: #666; overflow: hidden; border: 4px solid transparent; transition: border 0.75s; } .banner-text-box:hover { border: 4px solid #ccc; } /*移动端是改变 布局*/ @media screen and (max-width: 768px) { .au-title { padding-bottom: 20px; } .banner-item { margin-bottom: 40px; flex-wrap: wrap; } .banner-img-box { flex: 0 0 100%; } .banner-text-box { padding: 10px 0 0; flex: 0 0 100%; } } @media screen and (max-width: 540px) { .au-title p{font-size: 12px; color: #c4bdbd;} } /*第4张 star*/ /*声明布局样式*/ [class*="lg-"], [class*="xs-"] { float: left; } .xs-10 { width: 10%; } .xs-20 { width: 20%; } .xs-25 { width: 25%; } .xs-33 { width: 33.3%; } .xs-40 { width: 40%; } .xs-45 { width: 45%; } .xs-50 { width: 50%; } .xs-60 { width: 60%; } .xs-80 { width: 80%; } .xs-100 { width: 100%; } @media screen and (min-width: 1200px) { .lg-10 { width: 10%; } .lg-12 { width: 12%; } .lg-20 { width: 20%; } .lg-25 { width: 25%; } .lg-33 { width: 33.3%; } .lg-40 { width: 40%; } .lg-44 { width: 44%; } .lg-45 { width: 45%; } .lg-50 { width: 50%; } .lg-60 { width: 60%; } .lg-80 { width: 80%; } .lg-100 { width: 100%; } } .range-item img, .partner-type-box img, .cattle-item img, .suppor-item img { width: 100%; height: auto; vertical-align: bottom; } /*线条*/ .line-title-box { text-align: center; } .line-box { height: 30px; line-height: 30px; margin-bottom: 60px; font-size: 22px; font-weight: 400; } .line { display: inline-block; float: left; border-top: 1px solid #ccc; margin-top: 14px; width: -moz-calc(50% - 109px); width: -webkit-calc(50% - 109px); width: calc(50% - 109px); } .line-text { display: inline-block; float: left; text-align: center; width: 218px; } /*合伙人类型*/ .one-partner { box-sizing: border-box; } .partner-type-box { margin-bottom: 100px; } .partner-type-box > :nth-child(even) { padding-left: 20px; } .partner-type-box > :nth-child(odd) { padding-right: 20px; } /*合伙人标准*/ .div-bg { background: #F5F5F5; padding-top: 80px; padding-bottom: 100px; } .cattle-text-box { padding-top: 60px; } .cattle-text-box > div { box-sizing: border-box; } .cattle-item { position: relative; width: 180px; float: left; margin-right: 75px; font-size: 14px; line-height: 1.5; } .cattle-text-box > div:last-child { margin-right: 0; } .cattle-item > div { position: absolute; top: 0; right: 0; left: 0; bottom: 0; padding: 22px 18px 0 18px; display: flex; align-items: center; overflow: hidden; justify-content: center; } /*合伙人范围*/ .partner-range { padding: 80px 0 0 0; } .range-item { width: 350px; margin-right: 60px; float: left; } .range-box { padding-bottom: 100px; } .range-box > :last-child { margin-right: 0; } .range-item > p { width: 280px; padding: 15px 0 0 0; color: #333; line-height: 1.5; } /*支持*/ .suppor-item { width: 224px; margin-right: 20px; float: left; position: relative; } .support-box > :last-child { margin-right: 0px; } .suppor-cover { position: absolute; top: 0; right: 0; left: 0; bottom: 0; align-items: center; padding: 20px; justify-content: center; background: rgba(0, 0, 0, 0.3); color: #fff; opacity: 1; transition: all 0.75s; } .suppor-cover .title { left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); -webkit-transform: translate3d(-50%, -50%, 0); position: absolute; } .small-support { position: absolute; top: 20px; bottom: 20px; right: 20px; left: 20px; background: rgba(0, 0, 0, 0.5); overflow: hidden; justify-content: center; align-items: center; opacity: 0; transition: all 0.75s; display: flex; } .small-support p { font-size: 14px; line-height: 1.8; } .divMid { padding: 15px; max-width: 480px; } .suppor-cover:hover .small-support { opacity: 1; } .suppor-cover:hover { background: none; } .suppor-cover:hover .title { opacity: 0; transition: all 0.75s; } .support-box .divMid { max-width: 140px; left: 50%; } /*合伙人流程*/ .Process-text-box { padding-bottom: 120px; } .phone-and-email { margin-bottom: 16px; font-size: 22px; color: #333; } .explain-text { margin-top: 14px; color: #666; } .apply-partner { display: inline-block; font-size: 16px; font-weight: bold; color: #333; text-decoration: underline; margin-top: 40px; width: 100%; text-align: center; } /*适应移动端 的样式容器*/ @media screen and (max-width: 768px) { .au-title { padding: 20px 0 40px 0; } /*合伙人类型*/ .partner-type-box > :nth-child(even) { padding-left: 5px; } .partner-type-box > :nth-child(odd) { padding-right: 5px; } .partner-type-box { margin-top: 50px; } /*合伙人标准*/ .cattle-text-box > :nth-child(5) { padding: 0; } .cattle-item { width: 50%; margin-right: 0; margin-bottom: 10px; } .cattle-text-box > .cattle-item:nth-child(odd) { padding-right: 10px; } .cattle-text-box > .cattle-item:nth-child(even) { padding-left: 10px; } /*范围*/ .range-item { width: 100%; margin-right: 0px; } .range-item > p { width: 280px; padding: 12px; overflow: hidden; } /*支持*/ .suppor-item { width: 50%; margin-right: 0; } /*申请*/ .Process-text-box { padding-left: 12px; padding-right: 12px; } } /*第4张 end*/ /*第3张 star */ /*18张图片*/ .slide-18-box img { vertical-align: bottom; width: 100%; } .slide-18-box { overflow: hidden; width: 200%; } .slide-item { width: 50%; float: left; transition: all .75s; } .slide-img-box { position: relative; width: 384px; margin-right: 24px; margin-bottom: 24px; float: left; } .slide-item > :nth-child(3n) { margin-right: 0; } .slide-row { margin-bottom: 24px; } .slide-item > :last-child { margin-bottom: 30px; } /*切换按钮*/ .switch-box { text-align: center; padding-bottom: 50px; } .switch-button { display: inline-block; width: 14px; height: 14px; margin-right: 14px; } .switch-box > :nth-child(1) { background: #333; } .switch-box > :nth-child(2) { background: rgba(51, 51, 51, 0.3); } /*流程图*/ .order-chart-box{display: flex; font-size: 14px;} .order-item { box-sizing: border-box; min-height: 150px; margin-bottom: 20px; text-align: center; float: left; overflow: hidden;flex: 1; } .order-inner{margin: 12px;border: 1px solid #ccc;border-radius: 5px;} .chart-title { font-size: 28px; color: #666; height: 34px; line-height: 33px; border-bottom: 1px solid #000; border-color: rgba(0, 0, 0, 0.2); padding-bottom: 10px; box-sizing: content-box; margin: 20px 12px 0; } .chart-text { min-height: 70px; display: flex; align-items: center; justify-content: center; padding: 12px; } .bg-arrow { display: none; } @media screen and (max-width: 1120px) { .order-chart-box{justify-content: flex-start; flex-wrap: wrap;} .order-chart-box .order-item{ flex: 0 0 25%;} } @media screen and (max-width: 1120px) { .order-chart-box .order-item{ flex: 0 0 20%;} } @media screen and (max-width: 820px) { .order-chart-box .order-item{ flex: 0 0 33.3%;} } @media screen and (max-width: 540px) { .order-chart-box .order-item .order-inner{ margin: 4px;} .chart-text{font-size: 12px;} } /*联系云顶集团3118*/ .boss-contact-box { padding-bottom: 120px; text-align: center; color: #333; } .contact-item { box-sizing: border-box; height: 146px; /*border-right: 1px solid #ccc;*/ width: 33%; float: left; } .boss-contact-box > :last-child { border-right: none; } .boss-name { padding: 26px 0 44px 0; font-weight: normal; } .boss-email { font-size: 16px; word-break: break-all; } @media screen and (max-width: 1200px) { .slide-img-box { margin: 0; width: 33.33%; } .bg-arrow { display: block; } } @media screen and (max-width: 768px) { .slide-item { width: 100%; } .slide-img-box:nth-child(odd) { margin: 0 0 10px; width: 48%; margin-right: 3%; box-sizing: border-box; overflow: hidden; } .slide-img-box:nth-child(even) { margin-right: 0; margin: 0 0 10px; width: 48.7%; box-sizing: border-box; overflow: hidden; border-right: 1px solid #fff; } .boss-contact-box { padding-left: 12px; padding-right: 12px; } .boss-contact-box > :nth-child(odd) { border-left: none; } .boss-contact-box > :nth-child(even) { border: none; } .contact-item { width: 50%; margin-bottom: 10px; } .line-text { font-size: 14px; } .order-item { font-size: 12px; } .cu-title-box { margin-top: 80px; } .div-bg { padding-bottom: 50px; } .range-box { padding-bottom: 50px; } } /*第3张 end*/ /*发展历程页 star*/ /*上移动画class*/ .slide-up { transform: translateY(30%); transition: all 1s; opacity: 1; } .slide-up.active { transform: translateY(0%); opacity: 1; } .add-padding { padding-bottom: 150px; } .course-box img { width: 100%; border: 1px solid #ababab; box-sizing: border-box; } #course-all-box > :nth-child(odd) > .course-img-box { float: left; width: 35%; } #course-all-box > :nth-child(even) > .course-img-box { float: right; width: 35%; } /*#course-all-box > :nth-child(1) > .course-img-box { width: 348px; !*height:464px;*! margin-bottom: 188px; } #course-all-box > :nth-child(2) > .course-img-box { width: 380px; !*height:285px;*! margin-bottom: 136px; } #course-all-box > :nth-child(3) > .course-img-box { width: 400px; !*height:400px;*! margin-bottom: 250px; } #course-all-box > :nth-child(4) > .course-img-box { width: 348px; !*height:464px;*! margin-bottom: 284px; } #course-all-box > :nth-child(5) > .course-img-box { width: 380px; !*height:285px;*! margin-bottom: 436px; } #course-all-box > :nth-child(6) > .course-img-box { width: 400px; !*height:400px;*! margin-bottom: 436px; } #course-all-box > :nth-child(7) > .course-img-box { width: 348px; !*height:464px;*! margin-bottom: 380px; } #course-all-box > :nth-child(8) > .course-img-box { width: 380px; !*height:285px;*! margin-bottom: 120px; }*/ .course-img-box { display: inline-block; } .course-text { line-height: 1.5; color: #333; padding-top: 9px; } /*滑动索引*/ .slide-box { font-family: "Roboto Regular"; font-size: 16px; color: #333; width: 100px; position: fixed; top: 100%; transform: translateY(-80%); left: 50%; margin-left: -50px; } .slide-box > a { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; margin-bottom: 40px; justify-content: center; align-items: center; font-weight: bold; color: #333; } /*增加横线*/ .slide-box > a > .active-left, .slide-box > a > .active-right { display: inline-block; border-bottom: 4px solid #333; -webkit-transition: all 0.75s; transition: all 0.75s; width: 0px; margin: 0; } .slide-box > a.active > .active-left { margin-right: 8px; } .slide-box > a.active > .active-right { margin-left: 8px; } .slide-box > a.active > i { width: 24px; } /*移动端 查询*/ @media screen and (max-width: 768px) { #course-all-box > .course-box > .course-img-box { width: 100%; margin: 0 0 125px 0; padding: 0 12px; } .course-text { padding-left: 12px; padding-right: 12px; } .slide-box { display: none; } .slide-img-box-culture { width: 100% !important; } } /*发展历程页 end*/