99 lines
2.4 KiB
SCSS
99 lines
2.4 KiB
SCSS
@use "../abstracts" as *;
|
|
|
|
.main-contens{
|
|
width: 100%;
|
|
height: auto;
|
|
padding: 0 20px;
|
|
background-color: $white-fff;
|
|
}
|
|
.main-head-block{
|
|
padding: 33px 30px;
|
|
background: linear-gradient(102deg, #F8F9EC 2.93%, rgba(249, 239, 236, 0.80) 98.22%);
|
|
border-radius: 16px;
|
|
.head-block-tit{
|
|
@include defaultFont($font-s-18, $font-w-600, #F86A56)
|
|
}
|
|
.head-block-text{
|
|
@include defaultFont($font-s-13, $font-w-500, #F86A56)
|
|
}
|
|
.head-block-link-wrap{
|
|
margin-top: 18px;
|
|
.head-block-link{
|
|
@include flex(10px);
|
|
align-items: center;
|
|
padding: 8px 13px;
|
|
background-color: #CD8888;
|
|
border-radius: 100px;
|
|
@include defaultFont($font-s-12, $font-w-600, $white-fff);
|
|
.block-arr{
|
|
display: block;
|
|
width: 6px;
|
|
height: 11px;
|
|
background: url(/assets/images/main/block_arr.svg)no-repeat center;
|
|
background-size: cover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.main-grid-wrap{
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 15px;
|
|
margin-top: 15px;
|
|
.main-grid-bx{
|
|
min-height: 160px;
|
|
padding: 40px 20px 10px;
|
|
border-radius: 16px;
|
|
&.bx01{
|
|
background: linear-gradient(134deg, #F0EDFF 5.92%, #F0FFF6 96.24%);
|
|
}
|
|
&.bx02{
|
|
background: linear-gradient(134deg, #FFF4F4 3.38%, #F2FFF5 98.09%);
|
|
}
|
|
&.bx03{
|
|
background: linear-gradient(136deg, #F7FAF1 3.75%, #E6FCF7 98.46%);
|
|
}
|
|
&.bx04{
|
|
background: linear-gradient(133deg, #FFFBEF 3.32%, rgba(243, 236, 255, 0.33) 100%);
|
|
}
|
|
.grid-bx-head{
|
|
@include flex(0px);
|
|
align-items: center;
|
|
.main-bx-icon{
|
|
@include flex(0px);
|
|
}
|
|
.main-bx-arr{
|
|
display: block;
|
|
margin-left: auto;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
background-color: #fff;
|
|
background-image: url(/assets/images/main/main_contens_arr.svg);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 12px 12px;
|
|
}
|
|
}
|
|
.grid-bx-body{
|
|
margin-top: 16px;
|
|
.grid-bx-body-tit{
|
|
@include defaultFont($font-s-14, $font-w-600, #7896BA);
|
|
}
|
|
.grid-bx-body-txt{
|
|
@include defaultFont($font-s-12, $font-w-500, #7896BA);
|
|
opacity: 0.6;
|
|
margin-top: 3px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 360px){
|
|
.main-grid-wrap{
|
|
.main-grid-bx{
|
|
padding: 40px 20px 20px;
|
|
}
|
|
}
|
|
} |