.title h2{
font-size: 0.48rem;
}
.about_top{
padding-bottom: 0.5rem;
}
.about_top .content{
padding-top: 0.45rem;
padding-bottom: 0.45rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.about_top .content:nth-child(even){
flex-direction: row-reverse;
}
.about_top .content .left{
max-width: 650px;
width: 100%;
}
.about_top .content .left .title h2{
margin-bottom: 0.6rem;
}
.about_top .content .left p{
color: #322F2E;
}
.about_top .content .right{
max-width: 670px;
width: 100%;
position: relative;
}
.about_top .content .right img{
width: 100%;
object-fit: cover;
}
.about_top .content .right .mask{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.about_top .content .right .mask .play{
width: 72px;
height: 72px;
background-color: rgba(50, 47, 46,0.7);
border-radius: 50%;
cursor: pointer;
}
.about_top .content .right .mask .play img{
width: 30px;
}
.four_box{
width: 100%;
height: 440px;
background-image: url(//www.ketangjewelry.com/lib/images/about_us/four_box_bg.png);
background-repeat: no-repeat;
background-size: cover;
position: relative;
margin-top: 1.2rem;
}
.four_box .mask{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: '';
background-color: rgba(50, 47, 46,0.15);
}
.four_box .content{
position: relative;
z-index: 9;
display: flex;
}
.four_box .content .box{
width: 25%;
margin: 0 10px;
padding: 0.9rem 0.3rem;
flex-direction: column;
box-shadow: 0px 2px 10px 1px rgba(50, 47, 46, 0.15);
background-color: #fff;
margin-top: -1.2rem;
}
.four_box .content .box h3{
font-size: 0.2rem;
color: #322F2E;
margin: 0.3rem 0;
text-align: center;
}
.four_box .content .box p{
text-align: center;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
color: #73706D;
}
.qualifications{
padding: 1rem 0;
}
.qualifications .title h2{
text-align: center;
margin-bottom: 0.6rem;
}
.qualifications .qualifications_main{
display: flex;
}
.qualifications .qualifications_main .box{
width: 25%;
margin: 0 10px;
}
.qualifications .btn.more{
margin: 0 auto;
margin-top: 0.6rem;
}
.workshop{
margin-bottom: 1rem;
}
.workshop .title{
margin: 0 auto;
margin-bottom: 0.6rem;
max-width: 1100px;
}
.workshop .title h2{
text-align: center;
}
.workshop .title p{
text-align: center;
}
.workshop .sorkshop_main{
display: flex;
max-height: 434px;
}
.workshop .sorkshop_main .box{
width: 25%;
margin-right: 20px;
}
.workshop .sorkshop_main .box:last-child{
margin-right: 0;
}
.workshop .sorkshop_main .box img{
width: 100%;
height: 100%;
object-fit: cover;
}
.workshop .sorkshop_main .box>div{
display: flex;
flex-direction: column;
}
.workshop .sorkshop_main .box>div:first-child{
margin-bottom: 20px;
}
@media (max-width:1279px) {
.about_top .content .left{
max-width: 48%;
}
.about_top .content .right{
max-width: 48%;
}
}
@media (max-width:767px) {
.about_top .content{
flex-direction: column;
}
.about_top .content:nth-child(even){
flex-direction: column;
}
.about_top .content .left{
max-width: 100%;
margin: 15px 0;
}
.about_top .content .right{
max-width: 100%;
}
.four_box{
height: auto;
padding: 30px 0;
}
.four_box .content{
flex-wrap: wrap;
justify-content: space-between;
}
.four_box .content .box{
width: 48%;
margin: 0;
margin: 10px 0;
}
.qualifications .qualifications_main{
justify-content: space-between;
}
.qualifications .qualifications_main .box{
width: 48%;
margin: 0;
}
.workshop .sorkshop_main{
flex-wrap: wrap;
justify-content: space-between;
}
.workshop .sorkshop_main .box{
width: 49%;
margin: 0;
margin-bottom: 10px;
}
.workshop .sorkshop_main .box>div:first-child{
margin-bottom: 10px;
}
}