@media screen and (min-width: 900px) {
.mobile-content{
display: none !important;
}
.pc-header-inner{
width: 90%;
max-width: 1400px;
min-width: 1190px;
margin: auto;
display: flex;
height: 100%;
}
.pc-header{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100px;
background: linear-gradient(rgba(0,0,0,0.3) 30%,rgba(0,0,0,0) 90%);
z-index: 9;
}
.scrolled .pc-header{
background: #fff;
height: 70px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.pc-header-left{
display: flex;
align-items: center;
height: 100%;
}
.pc-header-left img{
height: 43px;
width: auto;
}
.pc-logo-main{
display: none;
}
.scrolled .pc-logo-main{
display: block;
}
.scrolled .pc-logo-white{
display: none;
}
.pc-header-middle{
display: flex;
flex: 1;
justify-content: center;
align-items: center;
height: 100%;
}
.pc-menu{
color: #fff;
font-weight: bold;
}
.scrolled .pc-menu{
color: #333;
font-weight: normal;
}
.pc-menu li {
float: left;
font-size: 16px;
margin: 0 20px;
}
.pc-header-right{
display: flex;
align-items: center;
height: 100%;
}
.phone-icon-holder{
display: flex;
color: #333;
background: rgba(255,255,255,0.6);
border-radius: 50px;
padding: 2px;
}
.phone-text{
font-size: 12px;
line-height: 1.2em;
padding-right: 15px;
padding-left: 6px;
margin-top: 4px;
}
.scrolled .phone-text{
color: #666;
}
.phone-text .phone-number{
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
}
.scrolled .phone-text .phone-number{
color: #EB661B;
}
.phone-icon{
width: 40px;
height: 40px;
border-radius: 40px;
font-size: 26px;
background: #ED6A00;
color: #fff;
text-align: center;
line-height: 40px;
}
.scrolled .phone-icon{
background: none;
color: #EB661B;
}
.home-slider-holder{
width: 100%;
top: 0;
z-index: 1;
}
.home-slider{
overflow: hidden;
}
.home-slider-item-media{
width: 100%;
height: auto;
}
.main{
position: relative;
z-index: 8;
}
.main-section-inner{
max-width: 1400px;
width: 90%;
margin: auto;
}
.full-section-inner{
width: 90%;
margin: auto;
}
.real-full-section-inner{
width: 100%;
margin: auto;
}
.product-section{
background-color: #F6AC19;
overflow: hidden;
background-image: url("http://www.hongtaosan.com/assets/images/new-big-bg-pattern-3.png");
background-size: auto 100%;
background-position-x: -10%;
background-position-y: -20%;
background-repeat: no-repeat;
position: relative;
}
.product-section .main-section-inner{
height: 800px;
display: flex;
}
.product-section-left{
width: 50%;
display: flex;
align-items: center;
position: relative;
}
.product-section-right{
width: 50%;
position: relative;
}
.index-1 .circle-info-a{
opacity: 1;
}
.index-2 .circle-info-b{
opacity: 1;
}
.index-3 .circle-info-c{
opacity: 1;
}
.index-4 .circle-info-d{
opacity: 1;
}
.index-1 .circle-info-a .circle-item-title,
.index-1 .circle-info-a .circle-item-tag,
.index-1 .circle-info-a .circle-item-summary{
opacity: 1;
transform: translateY(0);
}
.index-2 .circle-info-b .circle-item-title,
.index-2 .circle-info-b .circle-item-tag,
.index-2 .circle-info-b .circle-item-summary{
opacity: 1;
transform: translateY(0);
}
.index-3 .circle-info-c .circle-item-title,
.index-3 .circle-info-c .circle-item-tag,
.index-3 .circle-info-c .circle-item-summary{
opacity: 1;
transform: translateY(0);
}
.index-4 .circle-info-d .circle-item-title,
.index-4 .circle-info-d .circle-item-tag,
.index-4 .circle-info-d .circle-item-summary{
opacity: 1;
transform: translateY(0);
}
.index-1 #main-circle{
transform: rotate(0deg);
}
.index-2 #main-circle{
transform: rotate(90deg);
}
.index-3 #main-circle{
transform: rotate(180deg);
}
.index-4 #main-circle{
transform: rotate(270deg);
}
.index-1 .circle-item-a,
.index-2 .circle-item-d,
.index-3 .circle-item-c,
.index-4 .circle-item-b{
background: rgba(255,255,255, 0.1);
}
.product-arrow{
position: absolute;
text-align: center;
color: #333;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 30px;
opacity: 1;
border-radius: 50px;
background: #fff;
cursor: pointer;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.product-arrow:hover{
background: #000;
color: #fff;
}
.product-arrow-left{
left: 20px;
top: 350px
}
.product-arrow-right{
right: 20px;
top: 350px
}
#main-circle{
width: 1100px;
height: 1100px;
background: #F1C71A;
border-radius: 600px;
position: absolute;
top: -150px;
left: 250px;
transform-origin: center center;
transition: transform 1s;
}
.circle-item-bubble{
position: absolute;
border-radius: 100px;
opacity: 0;
transform: translate3d(0,100px,0);
transition: opacity 500ms, transform 500ms;
}
.circle-item-a .circle-item-bubble-1{
background-color: #F1C71A;width:110px;height:110px; left:0px;top:380px
}
.circle-item-a .circle-item-bubble-2{
background-color: #A2C31D;width:40px;height:40px; left:50px;top:100px
}
.circle-item-a .circle-item-bubble-3{
background-color: #fff;width:160px;height:160px; right:-100px;top:130px
}
.circle-item-a .circle-item-bubble-4{
background-color: #F4B3B2;width:70px;height:70px; right:40px;top:350px
}
.circle-item-b .circle-item-bubble-1{
background-color: #FF6800;width:80px;height:80px; left:80px;top:380px
}
.circle-item-b .circle-item-bubble-2{
background-color: #FF6800;width:50px;height:50px; left:-50px;top:100px
}
.circle-item-b .circle-item-bubble-3{
background-color: #F4B3B2;width:130px;height:130px; right:0px;top:130px
}
.circle-item-b .circle-item-bubble-4{
background-color: #fff;width:70px;height:70px; right:40px;top:350px
}
.circle-item-c .circle-item-bubble-1{
background-color: #fff;width:50px;height:50px; left:80px;top:0px
}
.circle-item-c .circle-item-bubble-2{
background-color: #FFA101;width:200px;height:200px; right:-100px;top:200px
}
.circle-item-c .circle-item-bubble-3{
background-color: #A6CD6C;width:80px;height:80px; right:-200px;top:330px
}
.circle-item-c .circle-item-bubble-4{
background-color: #F0832B;width:90px;height:90px; left:-40px;top:450px
}
.circle-item-d .circle-item-bubble-1{
background-color: #fff;width:50px;height:50px; left:80px;top:380px
}
.circle-item-d .circle-item-bubble-2{
background-color: #F4B3B2;width:120px;height:120px; left:-50px;top:100px
}
.circle-item-d .circle-item-bubble-3{
background-color: #A6CD6C;width:80px;height:80px; right:0px;top:130px
}
.circle-item-d .circle-item-bubble-4{
background-color: #fff;width:180px;height:180px; right:-140px;top:350px
}
.index-1 .circle-item-a .circle-item-bubble,
.index-2 .circle-item-d .circle-item-bubble,
.index-3 .circle-item-c .circle-item-bubble,
.index-4 .circle-item-b .circle-item-bubble{
opacity: 1;
transform: translate3d(0,0px,0);
-webkit-transform: translate3d(0,0px,0);
}
.index-1 .circle-item-a .circle-item-bubble-1{
animation: floating-1 16s infinite;
animation-delay: 50ms;
-webkit-animation-name: floating-1;
-webkit-animation-duration: 16s;
-webkit-animation-iteration-count: infinite;
}
.index-1 .circle-item-a .circle-item-bubble-2{
animation: floating-2 13s infinite;
animation-delay: 50ms;
-webkit-animation-name: floating-2;
-webkit-animation-duration: 13s;
-webkit-animation-iteration-count: infinite;
}
.index-1 .circle-item-a .circle-item-bubble-3{
animation: floating-3 10s infinite;
animation-delay: 50ms;
-webkit-animation-name: floating-3;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
}
.index-1 .circle-item-a .circle-item-bubble-4{
animation: floating-4 12s infinite;
animation-delay: 50ms;
-webkit-animation-name: floating-4;
-webkit-animation-duration: 12s;
-webkit-animation-iteration-count: infinite;
}
.index-2 .circle-item-d .circle-item-bubble-1{
animation: floating-1 16s infinite;
animation-delay: 50ms;
}
.index-2 .circle-item-d .circle-item-bubble-2{
animation: floating-2 13s infinite;
animation-delay: 50ms;
}
.index-2 .circle-item-d .circle-item-bubble-3{
animation: floating-3 10s infinite;
animation-delay: 50ms;
}
.index-2 .circle-item-d .circle-item-bubble-4{
animation: floating-4 12s infinite;
animation-delay: 50ms;
}
.index-4 .circle-item-b .circle-item-bubble-1{
animation: floating-1 16s infinite;
animation-delay: 50ms;
}
.index-4 .circle-item-b .circle-item-bubble-2{
animation: floating-2 13s infinite;
animation-delay: 50ms;
}
.index-4 .circle-item-b .circle-item-bubble-3{
animation: floating-3 10s infinite;
animation-delay: 50ms;
}
.index-4 .circle-item-b .circle-item-bubble-4{
animation: floating-4 12s infinite;
animation-delay: 50ms;
}
.index-3 .circle-item-c .circle-item-bubble-1{
animation: floating-1 16s infinite;
animation-delay: 50ms;
}
.index-3 .circle-item-c .circle-item-bubble-2{
animation: floating-2 13s infinite;
animation-delay: 50ms;
}
.index-3 .circle-item-c .circle-item-bubble-3{
animation: floating-3 10s infinite;
animation-delay: 50ms;
}
.index-3 .circle-item-c .circle-item-bubble-4{
animation: floating-4 12s infinite;
animation-delay: 50ms;
}
.circle-item{
width: 550px;
height: 550px;
border-radius: 300px;
background: rgba(255,255,255, 0);
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.circle-item-a{
left: -25%;
top: 25%;
}
.circle-item-b{
left: 25%;
top: -25%;
transform: rotate(90deg);
}
.circle-item-c{
left: 75%;
top: 25%;
transform: rotate(180deg);
}
.circle-item-d{
left: 25%;
top: 75%;
transform: rotate(270deg);
}
.circle-item-photo{
height: 650px;
width: auto;
transform: scale3d(0.2,0.2,0.2);
transition: transform 600ms;
}
.index-1 .circle-item-a .circle-item-photo,
.index-2 .circle-item-d .circle-item-photo,
.index-3 .circle-item-c .circle-item-photo,
.index-4 .circle-item-b .circle-item-photo{
transform: scale3d(1,1,1);
transition: transform 600ms;
}
.product-section-inner{
width: 100%;
}
.circle-item-info-holder{
display: flex;
justify-content: left;
text-align: left;
height: 120px;
position: relative;
width: 100%;
}
.circle-item-info{
opacity: 0;
position: absolute;
top:-30px;
left: 0;
width: 100%;
transition: opacity 0.5s;
}
.circle-item-tag{
font-size: 26px;
color: #fff;
display: block;
padding: 5px 0px;
opacity: 0;
transform: translateY(150px);
transition: 0.8s;
margin-bottom: 10px;
font-weight: bold;
}
.circle-item-tag-icon{
display: inline-block;
width: auto;
height: 25px;
text-align: center;
font-size: 26px;
line-height: 30px;
color: #fff;
font-weight: normal;
vertical-align: middle;
}
.circle-item-title{
font-size: 50px;
font-weight: bold;
color: #EB661B;
opacity: 0;
transform: translateY(150px);
transition: 0.8s;
background: #fff;
padding: 8px 20px;
border-radius: 8px;
display: inline-block;
}
.circle-item-summary{
font-size: 20px;
color: #fff;
opacity: 0;
transform: translateY(150px);
transition: 0.8s;
margin-top: 10px;
}
.circle-item-pagination{
margin-top: 80px;
position: relative;
z-index: 9;
}
.circle-item-pagination div{
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50px;
border: 2px solid rgba(255,255,255,0);
margin-right: 20px;
background-color: rgba(255,255,255,0.6);
background-size: auto 150%;
background-repeat: no-repeat;
background-position: center -20%;
cursor: pointer;
transform: scale3d(1,1,1);
transition: transform 500ms, border 500ms;
}
.circle-item-pagination div.active, .circle-item-pagination div:hover{
border: 2px solid rgba(255,255,255,1);
transform: scale3d(1.3,1.3,1.3);
}
.jiameng-items-section{
padding: 80px 0;
background: #fff;
}
.section-title-holder{
text-align: center;
}
.section-title span{
}
.section-tag{
margin-bottom: 10px;
}
.d-flex{
display: flex;
}
.flex-grow-1{
flex-grow: 1;
}
@keyframes bg-color-1 {
0% {
background: #EB661B;
}
20% {
background: #F5AB1A;
}
40% {
background: #21b8c5;
}
60% {
background: #A2C31D;
}
80% {
background: #EB661B;
}
}
@keyframes bg-color-2 {
0% {
background: #21b8c5;
}
20% {
background: #A2C31D;
}
40% {
background: #F5AB1A;
}
60% {
background: #EB661B;
}
80% {
background: #21b8c5;
}
}
@keyframes bg-color-3 {
0% {
background: #E23354;
}
20% {
background: #EB661B;
}
40% {
background: #A2C31D;
}
60% {
background: #F4B3B2;
}
80% {
background: #E23354;
}
}
.date{
color: #999;
display: block;
}
.job-wrap p{
margin-top: 0;
margin-bottom: 10px;
}
.job-wrap .work-info h3{
font-size: 20px !important;
}
.job-wrap .work-info{
color: #444;
background: #f3f3f3;
border-radius: 4px;
border: 1px solid #EC6A00;
}
.job-wrap .single .work-info{
color: #444;
background: #f8dfb7;
border-radius: 4px;
}
.job-wrap .work-info:hover {
box-shadow: 0 0 8px rgba(0,0,0,0.2);
background: #EB661B;
color: #fff;
}
.job-wrap .work-info p{
display: none;
}
.work-item{
position: relative;
}
.work-item-container{
position: relative;
}
.work-info{
padding: 15px;
background: #fff;
text-align: center;
}
.work-info{
text-align: left;
}
.work-info h1{
font-size: 2.5rem;
}
.work-info h3{
font-size: 16px;
font-weight: bold;
}
.work-info.caption{
position: absolute;
padding: 0;
background: none;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-shadow: 0 0 5px rgba(0,0,0,0.8);
}
.work-info.caption .work-info-inner{
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
}
.work-info-inner p{
font-size: 13px;
margin-top: 10px;
}
.item-margin-none .work-item-inner{
margin-right: 0;
margin-bottom: 0;
}
.item-margin-line .work-item-inner{
margin-right: 1px;
margin-bottom: 1px;
}
.item-margin-tiny .work-item-inner{
margin-right: 10px;
margin-bottom: 10px;
}
.item-margin-small .work-item-inner{
margin-right: 20px;
margin-bottom: 20px;
}
.item-margin-large .work-item-inner{
margin-right: 40px;
margin-bottom: 40px;
}
.work-image{
overflow: hidden;
position: relative;
}
.work-overlay{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #000 ;
opacity: 0.3;
-webkit-transition: opacity 300ms;
transition: opacity 300ms;
}
.work-item:hover .work-overlay{
opacity: 0.1;
-webkit-transition: opacity 300ms;
transition: opacity 300ms;
}
.work-image img{
width: 100%;
height: auto;
}
.work-item-zoom .work-image img{
transition: transform 300ms;
}
.work-item-zoom:hover img{
transition: transform 300ms;
transform: scale(1.2, 1.2);;
}
.col-4 .work-item{
width: 25%;
float: left;
}
.responsive-item-list{
display: flex;
}
.responsive-item{
width: 25%;
padding: 20px;
}
.responsive-item-icon-holder{
display: flex;
justify-content: center;
}
.responsive-item-icon-inner{
width: 100px;
height: 100px;
background: #F55E23;
border-radius: 100px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.responsive-item-icon{
position: absolute;
}
.responsive-item-icon .icon-font{
font-size: 40px;
color: #fff;
}
.responsive-item-icon .icon-font.large{
font-size: 55px;
}
.responsive-item-icon .number{
font-size: 30px;
height: 30px;
line-height: 30px;
color: #fff;
}
.responsive-item-icon-bg-1{
position: absolute;
width: 86px;
height: 86px;
background: rgba(0,0,0,0.1);
border-radius: 100px;
}
.responsive-item-icon-bg-2{
position: absolute;
width: 72px;
height: 72px;
background: rgba(0,0,0,0.1);
border-radius: 100px;
}
.responsive-item-list.color .responsive-item-icon-inner{
border-radius: 20px;
background: none;
}
.responsive-item-list.color .responsive-item-icon-bg-1{
border-radius: 10px;
transform: rotate(22deg);
width: 50px;
height: 50px;
background: #F7AC14;
}
.responsive-item-list.color .responsive-item-icon-bg-2{
border-radius: 10px;
transform: rotate(-22deg);
width: 50px;
height: 50px;
background: #F7AC14;
}
.responsive-item-list.orange .responsive-item-icon-inner{
background: rgba(255,255,255, 0.5);
}
.responsive-item-list.orange .responsive-item-icon-bg-1{
background: rgba(255,255,255, 0.5);
}
.responsive-item-list.orange .responsive-item-icon-bg-2{
background: rgba(255,255,255, 0.5);
}
.responsive-item-list.orange .responsive-item-icon .icon-font{
color: #EB661B;
}
.responsive-item-title{
text-align: center;
font-size: 18px;
margin-top: 20px;
font-weight: bold;
letter-spacing: 1px;
}
.responsive-item-summary{
text-align: center;
font-size: 14px;
opacity: 0.6;
margin-top: 8px;
}
.responsive-item-icon-inner:after{
content: '';
position: absolute;
height: 1px;
background: #ccc;
width: 110%;
right: -125%;
}
.responsive-item-icon-inner:before{
content: '';
position: absolute;
height: 1px;
background: #ccc;
width: 110%;
left: -125%;
}
.jiameng-items-section .responsive-item-list .responsive-item:first-child .responsive-item-icon-inner:before,
.jiameng-items-section .responsive-item-list .responsive-item:last-child .responsive-item-icon-inner:after,
.orange .responsive-item-icon-inner:after,
.factory .responsive-item-icon-inner:after{
display: none;
}
.orange .responsive-item-icon-inner:before, .factory .responsive-item-icon-inner:before{
display: none;
}
.responsive-holder{
display: flex;
}
.col-1{
flex: 1;
}
.col-2{
flex: 2;
}
.partner-story-section{
background: #333;
padding: 200px 0;
color: #fff;
}
.partner-story-section .section-tag{
margin-top: -30px;
}
.partner-avatar img{
width: 100%;
height: auto;
}
.section-title-holder.pc-align-left{
text-align: left;
}
.partner-stories{
width: 500px;
}
.partner-story{
width: 500px;
}
.partner{
display: flex;
margin-top: 40px;
}
.partner-quote{
line-height: 1.6em;
position: relative;
padding: 40px 20px 10px 20px;
position: relative;
}
.partner-quote:before{
content: '“';
position: absolute;
left: 0px;
top: 10px;
font-size: 60px;
color: #666;
}
.partner-quote:after{
content: '”';
position: absolute;
right: -0px;
bottom: -30px;
font-size: 60px;
color: #666;
}
.partner-avatar{
width: 80px;
height: 80px;
background-color: #ccc;
border-radius: 100px;
overflow: hidden;
}
.partner-info{
display: flex;
align-items: center;
margin-left: 15px;
}
.partner-name{
font-size: 18px;
font-weight: bold;
}
.partner-note{
font-size: 14px;
}
.partner-stories .slick-dots{
width: 100%;
text-align: center;
margin-top: 30px;
}
.partner-stories .slick-dots li{
display: inline-block;
margin: 0 10px;
}
.partner-stories .slick-dots li button{
display: inline-block;
border-radius: 20px;
width: 18px;
height: 18px;
text-align: center;
line-height: 18px;
font-size: 12px;
border: none;
background: #666;
color: #333;
cursor: pointer;
}
.partner-stories .slick-dots li.slick-active button{
background: #EB661B;
color: #fff;
}
.partner-stories .slick-dots li:hover button{
background: #EB661B;
color: #fff;
}
.store-gallery-section{
background: #fff;
}
.store-gallery-section-inner{
padding: 16px;
display: flex;
flex-wrap: wrap;
}
.store-gallery-photo{
width: 25%;
padding-bottom: 16.5%;
background-size: cover;
background-position: center center;
}
.store-feature-section{
padding: 100px 0;
background-color: #fff;
background-image: url("http://www.hongtaosan.com/bingxue/assets/images/big-bg-pattern.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.featured-stores{
margin: 30px 0;
height: 540px;
overflow: hidden;
}
.featured-store{
width: 800px;
height: 600px;
position: relative;
display: inline-block;
}
.featured-store img{
display: block;
width: 100%;
height: auto;
transform: scale3d(0.6,0.6,0.6);
transition: transform 0.5s;
border-radius: 12px;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
position: absolute;
left: 0;
top: 0;
}
.featured-store.slick-center img{
transform: scale3d(0.9,0.9,0.9);
}
.store-feature-section .slick-list{
overflow: visible !important;
}
.featured-stores-navs-holder{
text-align: center;
}
.featured-stores-navs{
text-align: center;
background: rgba(202,135,27,0.2);
display: inline-block;
border-radius: 100px;
}
.featured-stores-nav{
display: inline-block;
color: #EB661B;
padding: 8px;
margin: 3px;
border-radius: 20px;
font-size: 19px;
height: 29px;
line-height: 15px;
cursor: pointer;
transition: background-color 0.5s, color 0.5s;
}
.bigger .featured-stores-nav{
padding: 12px;
font-size: 20px;
height: 20px;
line-height: 20px;
}
.featured-stores-nav.active{
background: #EB661B;
color: #fff;
font-weight: bolder;
}
.text-12{
font-size: 12px;
}
.text-14{
font-size: 14px;
}
.text-16{
font-size: 16px;
}
.text-18{
font-size: 18px;
}
.text-24{
font-size: 24px;
}
.text-32{
font-size: 32px;
}
.text-40{
font-size: 40px;
}
.text-48{
font-size: 48px;
}
.text-bold{
font-weight: bold;
}
.text-spacing-1{
letter-spacing: 1px;
}
.text-spacing-2{
letter-spacing: 2px;
}
.text-spacing-4{
letter-spacing: 4px;
}
.opacity-10{
opacity: 0.1;
}
.opacity-20{
opacity: 0.2;
}
.opacity-30{
opacity: 0.3;
}
.opacity-40{
opacity: 0.4;
}
.opacity-60{
opacity: 0.6;
}
.opacity-80{
opacity: 0.8;
}
.opacity-90{
opacity: 0.9;
}
.text-gradient-color-orange{
background-image: linear-gradient(to right,#E83818,#EFEBE4);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
.text-gradient-color-yellow{
background-image: linear-gradient(to right,#F5AB1A,#FFFFFF);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
.text-color-white{
color: #fff;
}
.text-color-blue{
color: #21b8c5;
}
#store-highlight-section{
background-color: #F0832B;
padding: 130px 0 120px 0;
background-image: url("/static/image/big-bg-pattern-4.png");
background-size: auto 100%;
background-position-x: -10%;
background-position-y: -20%;
background-repeat: no-repeat;
}
.highlight-stores{
margin-top:50px;
height: 430px;
}
.highlight-store-image{
width: 80%;
height: auto;
border-radius: 12px;
border: 8px solid #fff;
}
.highlight-store-info{
margin-left: 80px;
}
#highlight-stores-navs{
text-align: center;
margin-top: 70px;
}
#highlight-stores-navs .slick-dots{
display: inline-block;
}
#highlight-stores-navs li{
display: inline-block;
margin: 10px;
width: 14px;
height: 14px;
overflow: hidden;
font-size: 1px;
line-height: 1000px;
border: 1px solid #fff;
border-radius: 20px;
cursor: pointer;
}
#highlight-stores-navs li.slick-active{
background: #fff;
}
#highlight-stores-navs button{
display: none;
}
.product-list-section{
padding: 90px 0;
background: #fff;
}
.products-list{
height: 500px;
}
.products-new-list .product-list-item{
width: 25%;
}
.product-image{
width: 100%;
height: auto;
}
.product-list-item-inner{
margin: 10px;
border-bottom-left-radius: 50px;
border-top-right-radius: 50px;
overflow: hidden;
position: relative;
}
.products-new-list .product-list-item-inner{
border-radius: 5px;
margin: 2px;
}
.product-main-title{
position: absolute;
left: 0;
top: 0;
height: 80px;
display: flex;
width: 100%;
justify-content: center;
align-items: center;
text-align: center;
font-size: 18px;
font-weight: bold;
letter-spacing: 2px;
opacity: 0.8;
transition: opacity 0.5s;
}
.product-info{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(237,106,0,0);
color: #fff;
transition: background-color 0.5s;
cursor: pointer;
}
.product-info-inner{
margin: 20px;
}
.product-info-title{
font-weight: bold;
font-size: 14px;
opacity: 0;
transform: translateY(90px);
transition: opacity 0.5s, transform 0.5s;
transition-delay: 0.2s;
}
.product-info-summary{
font-size: 15px;
opacity: 0;
transform: translateY(90px);
transition: opacity 0.5s, transform 0.5s;
transition-delay: 0.3s;
}
.product-icon{
position: absolute;
right: 30px;
bottom: 30px;
height: 40px;
opacity: 0;
transform: translateY(90px);
transition: opacity 0.5s, transform 0.5s;
transition-delay: 0.4s;
}
.product-list-item-inner:hover .product-main-title, .product-list-item-inner.hover .product-main-title{
opacity: 0;
}
.product-list-item-inner:hover .product-info, .product-list-item-inner.hover .product-info{
background-color: rgba(237,106,0,0.8);
}
.product-list-item-inner:hover .product-info-summary, .product-list-item-inner.hover .product-info-summary{
opacity: 1;
transform: translateY(0);
transition-delay: 0ms;
}
.product-list-item-inner:hover .product-info-title, .product-list-item-inner.hover .product-info-title{
opacity: 1;
transform: translateY(0);
transition-delay: 0ms;
}
.product-list-item-inner:hover .product-icon, .product-list-item-inner.hover .product-icon{
opacity: 1;
transform: translateY(0);
transition-delay: 0ms;
}
.products-header{
margin: 10px;
}
.products-category-title{
font-size: 24px;
}
.products-arrows button{
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: none;
width: 30px;
height: 30px;
background-size: 100% 100%;
opacity: 0.6;
}
.products-arrows button:hover {
opacity: 1;
}
.products-arrows .slick-next{
background-image: url("http://www.hongtaosan.com/bingxue/assets/images/next-arrow.png");
}
.products-arrows .slick-prev{
background-image: url("http://www.hongtaosan.com/bingxue/assets/images/previous-arrow.png");
margin-right: 10px;
}
.products-list-navs{
text-align: center;
}
.products-list-navs .slick-dots{
display: inline-block;
}
.products-list-navs .slick-dots li{
display: inline-block;
width: 14px;
height: 14px;
color: transparent;
margin: 10px;
border-radius: 20px;
border: 1px solid #ccc;
cursor: pointer;
}
.products-list-navs .slick-dots li:hover, .products-list-navs .slick-dots li.slick-active{
border: 1px solid #EB661B;
background: #EB661B;
}
.products-list-navs .slick-dots button{
opacity: 0;
cursor: pointer;
}
.about-section {
padding: 100px 0;
background-image: url("http://www.hongtaosan.com/bingxue/assets/images/big-bg-pattern-2.png");
background-size: auto 100%;
background-position-x: -10%;
background-position-y: -20%;
background-repeat: no-repeat;
}
.about-section .col-2{
padding-right: 120px;
}
.footer{
padding: 80px 0 80px 0;
background-color: #EB661B;
background-image: url("http://www.hongtaosan.com/bingxue/assets/images/vi-bg.png");
background-size: 150% auto;
background-position: left 150%;
background-repeat: no-repeat;
color: #fff;
position: relative;
}
.footer-logo{
height: 40px;
width: auto;
}
.footer-website-url{
letter-spacing: 0.9px;
font-size: 11px;
margin-top: 10px;
opacity: 0.7;
}
.footer-website-note{
letter-spacing: 0.5px;
font-size: 11px;
margin-top: 5px;
opacity: 0.7;
}
.social-link-list{
display: flex;
justify-content: center;
}
.social-link{
width: 40px;
height: 40px;
border-radius: 40px;
line-height: 40px;
text-align: center;
font-size: 30px;
background: #fff;
color: #EB661B;
margin: 0 15px 0 15px;
}
.social-link.douyin{
font-size: 24px;
}
.social-link-image{
width: 40px;
height: 40px;
}
.footer-contact{
text-align: right;
}
.footer-info {
background: #F6AC19;
color: rgba(0,0,0,0.8);
padding: 20px;
}
.footer-info .col-2{
text-align: right;
}
.footer-application{
padding: 80px 0;
background-image: url(http://www.hongtaosan.com/assets/images/zixun-cover.jpg);
background-size: 100% auto;
background-position: center top;
background-repeat: no-repeat;
}
.footer-application .main-section-inner{
height: 150px;
align-items: center;
}
.footer-application{
color: #333;
}
.footer-application .main-section-inner .col-2{
margin-left: 80px;
}
.footer-application .main-section-inner .col-1{
margin-right: 50px;
text-align: right;
}
.application-icon{
width: 150px;
height: 150px;
border-radius: 100px;
background-image: url("http://www.hongtaosan.com/bingxue/assets/images/application-cover.jpg");
background-position: center center;
background-size: 100% 100%;
}
.application-button{
display: inline-block;
padding: 12px 25px;
background: #EB661B;
color: #fff;
font-size: 18px;
border-radius: 30px;
font-weight: bold;
}
.application-button .icon-font{
font-size: 20px;
}
.big-leaf{
border-top-left-radius: 40px;
border-bottom-right-radius: 40px;
overflow: hidden;
}
.supply-chain-section{
padding: 130px 0 180px 0;
background: #eee;
}
.supply-chain-section .section-title-holder{
margin-bottom: 50px;
}
.supply-chain-item-holder{
margin: 30px;
}
.supply-chain-item{
position: relative;
}
.supply-chain-inner{
background: #fff;
position: relative;
cursor: pointer;
}
.supply-chain-bg{
position: absolute;
left: 10px;
top: 10px;
width: 100%;
height: 100%;
background: #21B8C5;
border-top-left-radius: 47px;
border-bottom-right-radius: 47px;
}
.supply-chain-cover img{
width: 100%;
height: auto;
}
.supply-chain-info{
min-height: 60px;
position: relative;
}
.info-icon{
position: absolute;
width: 34px;
height: 34px;
line-height: 34px;
font-size: 30px;
text-align: center;
border-radius: 30px;
background: #fff;
color: #EB661B;
left: 30px;
top: -20px;
}
.supply-chain-info-inner{
padding: 30px 20px 20px 20px;
}
.supply-chain-info-inner .text-12{
line-height: 1.5em;
opacity: 0.6;
margin-top: 10px;
}
.supply-chain-info-header{
display: flex;
}
.supply-chain-info-header .text-18{
font-weight: bold;
}
.supply-chain-info-header .icon-font{
font-size: 20px;
color: #EC6A00;
}
.supply-chain-info-detail{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
color: #fff;
opacity: 0;
transition: opacity 300ms;
}
.supply-chain-cover {
position: relative;
}
.supply-chain-info-detail-inner{
padding: 16px;
font-size: 12px;
line-height: 18px;
transform: translateY(100px);
transition: transform 300ms;
}
.supply-chain-item:hover .supply-chain-info-detail{
opacity: 1;
}
.supply-chain-item:hover .supply-chain-info-detail-inner{
transform: translateY(0px);
}
.home-number-section{
padding: 60px 0;
background: #EC6A00;
}
.home-number-section .main-section-inner{
margin-top: 0;
}
.home-number-item{
margin-left: 16px;
align-items: center;
justify-content: center;
color: #fff;
}
.home-number span{
font-size: 40px;
display: inline-block;
margin-right: 5px;
color: #fff;
font-weight: bold;
}
.home-number{
font-size: 18px;
}
.hom-number-icon{
font-size: 30px;
margin-right: 10px;
color: #0BB8C5;
background: #fff;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
margin-bottom: 8px;
border-bottom-left-radius: 5px;
border-top-right-radius: 18px;
border-top-left-radius: 18px;
border-bottom-right-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
}
.hom-number-icon img{
height: 30px;
width: auto;
}
.number-note{
opacity: 0.6;
font-size: 16px;
}
.jiameng-items-section .section-title-holder{
margin-bottom: 40px;
}
.section-tag-image{
height: 100px;
width: auto;
}
.jiameng-section-4{
padding: 140px 0;
background: #EB661B;
}
.ip-gallery-section-inner{
display: flex;
flex-wrap: wrap;
}
.ip-gallery-photo{
width: 25%;
}
.ip-gallery-photo img{
width: 100%;
height: auto;
}
.ip-photo-1{
animation: bg-color-1 3s infinite;
background: #EB661B;
}
.ip-photo-2{
background: #21b8c5;
animation: bg-color-2 3s infinite;
}
.ip-photo-3{
background: #E23354;
animation: bg-color-3 3s infinite;
}
.ip-photo-4{
background: #EB661B;
animation: bg-color-1 3s reverse infinite;
}
.factory-section{
padding: 120px 0;
background-image: url(http://www.hongtaosan.com/bingxue/assets/images/factory.jpg);
background-size: cover;
background-position: center center;
position: relative;
color: #fff;
}
.factory-section .main-section-inner{
position: relative;
}
.section-bg-overlay{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
}
.factory-section .section-title-holder{
margin-bottom: 50px;
}
.factory-section .responsive-item{
width: 33.3%;
}
.news-section{
padding: 130px 0 180px 0;
background: #eee;
}
.news-item-holder{
margin: 20px;
}
.news-item{
position: relative;
}
.news-inner{
background: #fff;
position: relative;
border-radius: 8px;
overflow: hidden;
}
.news-bg{
position: absolute;
left: 6px;
top: 6px;
width: 100%;
height: 100%;
background: #21B8C5;
border-radius: 8px;
}
.news-cover img{
width: 100%;
height: auto;
}
.news-info{
min-height: 100px;
position: relative;
}
.info-icon{
position: absolute;
width: 34px;
height: 34px;
line-height: 34px;
font-size: 30px;
text-align: center;
border-radius: 30px;
background: #fff;
color: #EB661B;
right: 30px;
top: -20px;
}
.news-info-inner{
padding: 20px;
}
.news-info-inner .text-12{
line-height: 1.5em;
opacity: 0.6;
margin-top: 10px;
}
.news-section .responsive-item{
padding: 0;
}
.news-section .responsive-holder{
margin-top: 50px;
}
.fl-item{
float: left;
width: 25%;
}
.fl-inner{
height: 150px;
margin: 20px;
background-size: cover;
background-position: center center;
position: relative;
color: #fff;
border-radius: 3px;
overflow: hidden;
}
.fl-inner:before{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
}
.fl-inner h3{
padding: 20px;
font-size: 18px;
position: relative;
}
.fl-inner p{
padding: 0 20px;
position: relative;
}
.job-page-intro{
background: #f3f3f3;
padding-bottom: 80px;
padding-top: 80px;
}
.job-page-intro .section-caption h1{
color: #333;
}
.job-page-intro .section-caption p{
color: #666;
font-size: 16px;
margin-top: 15px;
}
.job-page-intro .section-caption{
margin-bottom: 20px;
}
.job-code {
text-align: center;
width: 350px;
margin: auto;
padding: 15px 15px;
border-radius: 4px;
margin-top: 35px;
background: rgba(255,255,255,0.1);
}
.job-code img{
float: left;
width: 100px;
height: auto;
display: inline-block;
}
.job-code p{
float:left;
height: 80px;
width: 240px;
margin-left: 10px;
margin-top: 2px !important;
text-align: left;
font-size: 16px;
}
.works-section{
padding: 100px 0 180px 0;
}
.supply-section{
padding: 150px 0;
position: relative;
font-weight: bold;
}
.supply-section .main-section-inner{
position: relative;
}
.supply-section-bg-holder{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.supply-section-bg{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #eee;
background-position: center center;
background-image: url(http://www.hongtaosan.com/bingxue/assets/images/supply-bg-2.jpg);
background-size: cover;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 1500ms;
}
.supply-section-bg.active{
opacity: 1;
transition: opacity 500ms;
}
.supply-section-bg img{
width: 100%;
height: auto;
}
.supply-section .section-tag-image{
animation: fly 5s infinite;
}
.supply-list{
display: flex;
flex-wrap: wrap;
margin-top: 50px;
}
.supply-item{
width: 25%;
}
.supply-item-inner{
margin: 30px 100px;
}
.supply-item-photo{
padding-bottom: 100%;
border-radius: 150px;
background-position: left top;
background-size: cover;
display: flex;
justify-content: center;
position: relative;
border:4px solid #fff;
box-shadow: 0 0 15px rgba(0,0,0,0.3);
}
.supply-item-flag{
width: 50px;
height: 50px;
border-radius: 80px;
background-position: left top;
background-size: cover;
position: absolute;
bottom: -25px;
border: 4px solid #fff;
}
.supply-item-info{
padding-top: 30px;
text-align: center;
font-size: 20px;
color: #fff;
}
.home .news-section{
background: #fff;
}
.h-store-icon{
margin-left: 26px;margin-bottom: 50px
}
.h-store-icon-2{
margin-right: 10px;margin-top: 6px
}
.h-store-info-2{
margin-top: 20px
}
.h-store-icon img{
height: 50px;
width: auto;
}
.pinpai-summary{
margin-top: 20px;
line-height: 1.5em
}
.value-section{
background: #EB661B;
}
.core-value-list{
margin-top: 80px;
}
.core-value-item{
padding: 14px 0;
font-size: 18px;
border-bottom: 1px solid #ccc;
color: #666;
}
.core-value-item .icon-font{
color: #EC6A00;
font-size: 20px;
}
.core-value-item span{
margin-right: 15px;
}
.core-value-list .core-value-item:last-child{
border-bottom: none;
}
.history-section{
padding: 130px 0;
background: #EB661B;
}
.history-list{
position: relative;
}
.history-item{
position: absolute;
left: 0;
top: 0;
opacity: 0;
transform: translate3d(0,100px,0);
transition: opacity 500ms, transform 500ms;
}
.history-item.active{
opacity: 1;
transform: translate3d(0,0,0);
}
.history-section .col-1{
margin-right: 50px;
}
.history-cover{
width: 600px;
height: 400px;
background-color: #ccc;
background-position: center center;
background-size: cover;
}
.history-info{
background: #fff;
padding: 20px;
line-height: 1.8em;
}
.history-holder{
display: flex;
}
.timeline{
padding-right: 20px;
font-size: 30px;
font-weight: 200;
margin-right: 40px;
border-right: 1px solid #fff;
}
.timeline-year{
margin-bottom: 50px;
position: relative;
height: 20px;
line-height: 22px;
color: #fff;
cursor: pointer;
}
.timeline-year:after{
content: '';
position: absolute;
right: -31px;
top: 0;
width: 10px;
height: 10px;
background: #F5AB1A;
border: 6px solid #fff;
border-radius: 20px;
transform: scale3d(0.5,0.5,0.5);
transition: transform 500ms;
}
.timeline-year.active,.timeline-year:hover{
font-weight: bold;
}
.timeline-year.active:after{
transform: scale3d(1,1,1);
}
.jiameng-yaoqiu{
padding: 80px 0 130px 0;
background: #eee;
}
.yaoqiu-col{
}
.yaoqiu-title-col{
margin-right: 100px;
}
.yaoqu-list{
margin-top: 20px;
}
.yaoqu-list li{
margin-bottom: 10px;
}
.yaoqu-list li span.icon-font{
margin-right: 10px;
color: #EB661B;
}
.yaoqiu-title{
margin-top: 20px;
color: #EB661B;
}
.yaoqiu-title .icon-font{
font-weight: normal;
margin-right: 10px;
font-size: 20px;
}
.feiyong-section{
padding: 130px 0;
background: url("http://www.hongtaosan.com/bingxue/assets/images/section-bg-store.jpg");
background-size: cover;
background-position: center center;
}
.feiyong-list{
display: flex;
width: 95%;
max-width: 1400px;
margin: 60px auto 0 auto;
align-items: stretch;
flex-wrap: wrap;
}
.feiyong-list li{
width: 33.3%;
margin-bottom: 65px;
}
.feiyong-item{
margin: 20px 10px 0px 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
padding: 20px 20px 20px 20px;
height: 100%;
background: #fff;
border-top: 5px solid #EB661B;
}
.feiyong-item h3{
padding-top: 20px;
}
.feiyong-info{
font-size: 12px;
opacity: 0.6;
}
.feiyong-money{
margin-top: 20px;
font-size: 20px;
min-height: 80px;
}
.feiyong-money span{
font-size: 12px;
}
.jiameng-liucheng{
padding: 80px 0;
background: #eee;
}
.liucheng-list{
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 750px;
margin: auto;
}
.liucheng-item{
margin: 16px 10px;
width: 130px;
text-align: center;
}
.liucheng-number{
font-size: 20px;
border-radius: 50px;
display: inline-block;
width: 90px;
height: 90px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
position: relative;
}
.liucheng-number-holder{
position: absolute;
width: 20px;
height: 20px;
left: 2px;
top: 2px;
background: #fff;
border: 2px solid #EC6A00;
color: #EC6A00;
font-size: 12px;
line-height: 20px;
text-align: center;
z-index: 1;
border-radius: 50px;
font-weight: bolder;
}
.liucheng-number .icon-font{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #EC6A00;
color: #fff;
line-height: 90px;
text-align: center;
font-size: 40px;
border-radius: 50px;
}
.liucheng-holder{
margin-top: 0;
}
.liucheng-title{
font-size: 20px;
margin-top: 15px;
font-weight: bold;
}
.fuchi-section{
padding: 130px 0;
}
.fuchi-section .supply-chain-item{
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.fuchi-section .supply-chain-item .supply-chain-bg{
display: none;
}
.fuchi-section .supply-chain-item .big-leaf{
border-radius: 0;
}
.fuchi-section .supply-chain-info{
min-height: 150px;
}
.fullscreen-video-wrap{
height: 100%;
overflow: hidden;
}
.section-summary{
margin-top: 10px;
}
.page-cover{
position: relative;
}
.page-cover-overlay{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(236,106,0,0.6);
display: flex;
justify-content: center;
align-items: center;
}
.page-cover-overlay.no-bg-color{
background: transparent;
}
.page-cover-overlay.black-bg-color{
background: rgba(0,0,0,0.3);
}
.page-cover-overlay.dark-black-bg-color{
background: rgba(0,0,0,0.5);
}
.page-cover-title{
color: #fff;
font-size: 60px;
}
#video{
width: 100%;
height: auto
}
.jiameng-page-cover{
background-image: url("http://www.hongtaosan.com/assets/images/cover-11.jpg");
}
.mendian-page-cover{
background-image: url("http://www.hongtaosan.com/assets/images/cover-18.jpg");
}
.pinpai-page-cover{
background-image: url("/static/image/cover-pinpai.jpg");
}
.news-page-cover{
background-image: url("/static/image/cover-news.jpg");
}
.jiaru-page-cover{
background-image: url("http://www.hongtaosan.com/assets/images/cover-19.jpg");
}
.pc-supply-section{
padding: 150px 0;
}
.supply-dot-america{
left: 294px;
top: 270px;
}
.supply-dot-brazil{
left: 428px;
top: 502px;
}
.supply-dot-belgium{
left: 733px;
top: 142px;
}
.supply-dot-africa{
left: 733px;
top: 462px;
}
.supply-dot-india{
top: 345px;
left: 910px;
}
.supply-dot-thailand{
top: 430px;
left: 1011px;
}
.supply-dot-malaysia{
top: 383px;
left: 1073px;
}
.supply-dot-nz{
left: 1264px;
top: 600px;
}
.pc-supply-bg{
width: 1400px;
height: 676px;
position: relative;
margin: auto;
background-image: url(http://www.hongtaosan.com/assets/images/supply-bg-4.png);
}
.supply-dot{
position: absolute;
transform: translate(-40px,-40px) scale3d(1,1,1);
cursor: pointer;
transition: transform 500ms;
transform-origin: center center;
-webkit-transform-origin: center center;
}
.supply-dot:hover{
transform: translate(-80px,-80px) scale3d(2,2,2);
}
.supply-dot-bg{
position: absolute;
left: 0;
top: 0;
width: 84px;
height: 84px;
background-color: rgba(236,106,0,0.5);
border-radius: 50px;
animation: breath-3 1.6s infinite;
}
.supply-dot-bg:after{
content:'';
position: absolute;
left: 14px;
top: 14px;
width: 56px;
height: 56px;
background: rgba(236,106,0,1);
border-radius: 50px;
animation: breath-1 1.6s infinite;
}
.supply-dot-bg:before{
content:'';
position: absolute;
left: 8px;
top: 8px;
width: 68px;
height: 68px;
background: rgba(236,106,0,0.5);
border-radius: 50px;
animation: breath-2 1.6s infinite;
}
.supply-product{
position: absolute;
width: 48px;
height: 48px;
background-size: cover;
background-position: center center;
border-radius: 50px;
left: 18px;
top: 18px;
}
.jiaru .work-info-inner h3{
font-size: 18px;
}
@keyframes breath-1 {
0% {
opacity: 0;
transform: scale(0.1,0.1);
}
20% {
opacity: 1;
transform: scale(1,1);
}
40% {
opacity: 1;
transform: scale(1,1);
}
60% {
opacity: 1;
transform: scale(1,1);
}
75% {
opacity: 1;
transform: scale(1,1);
}
90% {
opacity: 1;
transform: scale(1,1);
}
100% {
opacity: 0;
transform: scale(0.1,0.1);
}
}
@keyframes breath-2 {
0% {
opacity: 0;
transform: scale(0.1,0.1);
}
20% {
opacity: 0;
transform: scale(0.1,0.1);
}
40% {
opacity: 1;
transform: scale(1,1);
}
60% {
opacity: 1;
transform: scale(1,1);
}
75% {
opacity: 1;
transform: scale(1,1);
}
90% {
opacity: 0;
transform: scale(0.1,0.1);
}
100% {
opacity: 0;
transform: scale(0.1,0.1);
}
}
@keyframes breath-3 {
0% {
background: rgba(236,106,0,0);
}
20% {
background: rgba(236,106,0,0);
}
40% {
background: rgba(236,106,0,0);
}
60% {
background: rgba(236,106,0,0.4);
}
75% {
background: rgba(236,106,0,0);
}
90% {
background: rgba(236,106,0,0);
}
100% {
background: rgba(236,106,0,0);
}
}
.supply-dot-america .supply-dot-bg,
.supply-dot-america .supply-dot-bg:after,
.supply-dot-america .supply-dot-bg:before{
animation-delay: 0.5s;
}
.supply-dot-belgium .supply-dot-bg,
.supply-dot-belgium .supply-dot-bg:after,
.supply-dot-belgium .supply-dot-bg:before{
animation-delay: 0.9s;
}
.supply-dot-india .supply-dot-bg,
.supply-dot-india .supply-dot-bg:after,
.supply-dot-india .supply-dot-bg:before{
animation-delay: 1.5s;
}
.supply-dot-thailand .supply-dot-bg,
.supply-dot-thailand .supply-dot-bg:after,
.supply-dot-thailand .supply-dot-bg:before{
animation-delay: 1.8s;
}
.supply-product:after{
content: '';
position: absolute;
width: 18px;
height: 18px;
bottom: -12px;
left: 13px;
border-radius: 20px;
background-size: cover;
border: 2px solid #fff;
}
.supply-dot-america .supply-product:after{
background-image: url(http://www.hongtaosan.com/bingxue/assets/photos/flag-america.jpg)
}
.supply-dot-brazil .supply-product:after{
background-image: url(http://www.hongtaosan.com/bingxue/assets/photos/flag-brazil.jpg)
}
.supply-dot-india .supply-product:after{
background-image: url(http://www.hongtaosan.com/bingxue/assets/photos/flag-india.jpg)
}
.supply-dot-africa .supply-product:after{
background-image: url(http://www.hongtaosan.com/bingxue/assets/photos/flag-southafrica.jpg)
}
.supply-dot-thailand .supply-product:after{
background-image: url(http://www.hongtaosan.com/bingxue/assets/photos/flag-thailand.jpg)
}
.supply-dot-malaysia .supply-product:after{
background-image: url(http://www.hongtaosan.com/bingxue/assets/photos/flag-malaysia.jpg)
}
.supply-dot-nz .supply-product:after{
background-image: url(http://www.hongtaosan.com/bingxue/assets/photos/flag-newzealand.jpg)
}
.supply-dot-belgium .supply-product:after{
background-image: url(http://www.hongtaosan.com/bingxue/assets/photos/flag-belgium.jpg)
}
.supply-dot:hover .supply-dot-title{
}
.supply-dot-title{
position: absolute;
width: 150px;
height: 30px;
top: 85px;
left: -33px;
text-align: center;
opacity: 1;
transition: opacity 500ms;
}
.supply-dot-title span{
display: inline-block;
background: #D6630D;
color: #fff;
border-radius: 20px;
font-size: 12px;
padding: 4px 8px;
}
.supply-dot:hover .supply-dot-title{
opacity: 0;
}
#wrap{
position: relative;
width: 100%;
}
.ajax-page-active #wrap{
position: fixed;
}
#ajax-page{
position: fixed;
z-index: -2;
opacity: 0;
width: 100%;
}
#ajax-page-overlay{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
background: rgba(0,0,0,0.5);
}
.ajax-page-active #ajax-page-overlay{
opacity: 1;
-webkit-transition: opacity 300ms;
transition: opacity 300ms;
}
.ajax-page-active #ajax-page{
position: relative;
opacity: 1;
z-index: 9999;
}
#ajax-page-wrap{
position: relative;
margin: auto;
transform: translateX(-1000px);
-webkit-transform: translateX(-1000px);
width: 700px;
min-height: 100vh;
background: #fff;
}
.ajax-page-active #ajax-page-wrap{
transform: translateX(0);
-webkit-transform: translateX(0);
-webkit-transition: -webkit-transform 300ms;
transition: transform 300ms;
}
#ajax-page-content{
color: #333;
padding: 30px;
}
.post{
color: #333;
font-size: 16px;
line-height: 22px;
}
.post p{
line-height: 28px;
margin-bottom: 15px;
text-indent: 30px;
}
.post img{
width: 100%;
height: auto;
display: block;
}
.post-title{
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid #ccc;
position: relative;
}
.external-link{
position: absolute;
right: 0px;;
top: -20px;
color: #666;
}
.single-post{
padding-top: 160px;
background: #fff;
padding-bottom: 80px;
}
.single-post-body{
width: 800px;
margin: auto;
color: #333;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
border-radius: 10px;
padding: 30px;
padding-top: 40px;
}
.post-title h1{
width: 80%;
position: relative;
}
.post-date{
float: right;
width: 20%;
height: 40px;
line-height: 40px;
text-align: right;
color: #666;
}
.home .page-cover{
height: 100vh;
}
.home-slide-wrap{
height: 100vh;
}
.home-slide-wrap-holder{
height: 100vh;
position: relative;
}
#home-slide-pagination{
position: absolute;
bottom: 50px;
text-align: center;
width: 100%;
}
.home-slide-image{
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
position: relative;
}
#home-slide-pagination .slick-dots{
display: inline-block;
}
#home-slide-pagination li{
display: inline-block;
margin: 8px;
width: 8px;
height: 8px;
overflow: hidden;
font-size: 1px;
line-height: 1000px;
border: 1px solid #fff;
border-radius: 20px;
cursor: pointer;
}
#home-slide-pagination li.slick-active{
background: #fff;
}
#home-slide-pagination button{
display: none;
}
.home-slide-image-inner {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
.new-supply-section-2{
background-color: #F6AC19;
}
.new-supply-section-2 .pc-supply-bg{
background-image: url(http://www.hongtaosan.com/assets/images/supply-bg-13.png);
background-size: 1400px auto;
}
.new-supply-section-2{
background-image: url(http://www.hongtaosan.com/assets/images/cloud-bg-2.png);
background-repeat: no-repeat;
background-position: center 200px;
}
.new-supply-section{
padding: 150px 0;
background-color: #F6AC19;
background-image: url(http://www.hongtaosan.com/assets/images/cloud-bg.png);
background-repeat: no-repeat;
background-position: center center;
}
.new-supply-section-inner{
display: flex;
width: 80%;
max-width: 1300px;
margin: auto;
}
.new-supply-section-title{
flex:1;
}
.new-supply-section-map-holder{
height: 750px;
width: 750px;
position: relative;
}
.new-supply-section-map-image{
position: absolute;
height: 100%;
width: auto;
right: 0;
top: 0;
}
.new-supply-section-3 .new-supply-section-map-image{
position: absolute;
height: 100%;
width: auto;
right: -20%;
top: 0;
}
.new-supply-section-title{
position: relative;
z-index: 1;
text-align: left;
}
.new-supply-section-title .section-title-holder{
text-align: left;
margin-top: 80px;
font-weight: bolder;
font-size: 38px;
}
#supply-slide-pagination{
margin-top: 20px;
margin-left: -10px;
}
#supply-slide-pagination .slick-dots{
display: inline-block;
}
#supply-slide-pagination li{
display: inline-block;
margin: 8px;
width: 8px;
height: 8px;
overflow: hidden;
font-size: 1px;
line-height: 1000px;
border: 1px solid #fff;
border-radius: 20px;
cursor: pointer;
}
#supply-slide-pagination li.slick-active{
background: #fff;
}
#supply-slide-pagination button{
display: none;
}
.new-supply-icon{
position: absolute;
transition: transform 300ms;
cursor: pointer;
}
.new-supply-icon.active, .new-supply-icon:hover{
transform: scale3d(1.4,1.4,1.4) ;
z-index: 9;
}
.new-supply-slider{
width: 100%;
overflow: hidden;
}
.new-supply-slider-holder{
width: 80%;
}
.new-supply-slider-image{
width: 100%;
height: auto;
border-radius: 8px;
}
}
@media screen and (min-width: 900px) and (max-width: 1500px){
.supply-item-inner{
margin: 30px 70px;
}
.new-supply-section-map-holder{
height: 600px;
width: 600px;
position: relative;
}
.new-supply-section-title .section-title-holder{
text-align: left;
margin-top: 80px;
font-weight: bolder;
font-size: 32px;
}
.new-supply-slider-image{
width: 70%;
height: auto;
border-radius: 8px;
min-width: 350px;
}
.new-supply-section-title .section-tag-image{
height: 60px;
width: auto;
}
}