main {
background-image: url(//lawgenix.co.th/wp-content/themes/lawgenix/assets/image/bg-single.png);
background-size: cover;
background-position: top;
}
section.single-section {
padding: 100px 48px;
}
section.cover-section {
position: relative;
z-index: 0;
padding-top: 0;
padding-bottom: 0;
padding: 0;
transition: .6s all;
}
.single-cover {
height: 150px;
object-fit: cover;
width: 100%;
}
.detail-group {
padding-top: 44px;
margin-bottom: 44px;
border-top: 1px solid #00000033;
}
.table-of-content-card {
transform: scale(0);
border: 1px solid var(--grey-light-color-2);
border-radius: 30px;
width: 340px;
position: fixed;
top: 238px; right: 100px;
}
.table-of-content-card .header {
background: linear-gradient(107.24deg, #143333 0.3%, #D8AE64 132.84%);
color: var(--site-bg-color);
border-radius: 30px 30px 0 0;
font-size: 24px;
line-height: 32px;
font-weight: bold;
padding: 26px;
}
.table-of-content-card .body {
background-color: #fff;
border-radius: 0 0 30px 30px;
padding: 26px;
}
.table-of-content-card a {
display: block;
margin-bottom: 0.5rem;
transition: all .3s;
}
.table-of-content-card a:hover {
font-weight: bold;
}
@media(min-width: 576px) {
.single-cover {
height: 200px;
}
}
@media(min-width: 768px) {
.single-cover {
height: 300px;
}
}
@media(min-width: 1200px) {
section.single-section {
padding: 100px 100px;
}
section.cover-section {
margin: 0 60px;
position: relative;
z-index: -1;
}
.single-cover {
height: 500px;
}
.table-of-content-card {
border: 1px solid var(--grey-light-color-2);
border-radius: 30px;
width: 340px;
position: fixed;
top: 238px; right: 100px;
transform: scale(1);
transition: .3s all;
}
.table-of-content-card.scroll {
top: 118px;
}
.table-of-content-card .header {
background: linear-gradient(107.24deg, #143333 0.3%, #D8AE64 132.84%);
color: var(--site-bg-color);
border-radius: 30px 30px 0 0;
font-size: 24px;
line-height: 32px;
font-weight: bold;
padding: 26px;
}
.table-of-content-card .body {
background-color: #fff;
border-radius: 0 0 30px 30px;
padding: 26px;
}
.table-of-content-card a {
display: block;
margin-bottom: 0.5rem;
transition: all .3s;
}
.table-of-content-card a:hover {
font-weight: bold;
}
}
@media(min-width: 1400px) {
.table-of-content-card {
top: 198px; }
}