#content{
padding: 0 var(--pad-space) !important;
}
.page-content{
display: grid;
grid-template-columns: 1fr;
grid-gap: 40px;
}
.post-top-section,
.post-title-sec,
.post-nav-bar,
.page-content,
.post-category-line{
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.post-category-line{
padding:40px 0 80px 0;
}
.post-category-line p{
display: flex;
align-items: center;
gap:5px;
margin: 0;
font-family: var(--ch-font);
font-size: var(--xd-19px);
font-weight: 400;
color: #000000;
line-height: 1.2em;
}
.post-top-section{
padding-top: 185px;
}
.post-banner-img-box {
width: 100%;
border-radius: var(--box-radius);
overflow: hidden;
aspect-ratio: 536 / 304;
}
.post-banner-img-box img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
max-height:unset !important;
}
.post-title-sec{
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom:60px;
gap:20px;
}
.post-title-sec h1{
margin: 0;
font-family: var(--ch-font);
font-size: var(--xd-48px);
font-weight: 400;
color: var(--main-color);
line-height: 1.2em;
}
.post-title-sec p{
margin: 0;
font-family: var(--ch-font);
font-size: var(--xd-19px);
font-weight: 400;
color: #000000;
line-height: 1.2em;
margin-bottom:20px;
}
.post-title-sec>div{
display: flex;
flex-direction: column;
align-items: flex-end;
}
.social_btn{
display: flex;
align-items: center;
gap: 20px;
}
.social_btn img{
height:25px;
}
.page-content p{
margin: 0;
font-family: var(--ch-font);
font-size: var(--xd-19px);
font-weight: 400;
color: #000000;
line-height: 2em;
}
.page-content img{
max-width:100%;
width: 100%;
margin:0 auto;
border-radius:var(--box-radius);
display:block;
}
.page-content .wp-block-embed{
margin: 0;
}
.page-content .wp-block-embed__wrapper{
aspect-ratio: 16 / 9;
border-radius: var(--box-radius);
overflow: hidden;
}
.page-content iframe{
width: 100%;
height: 100%;
}
.post-nav-bar{
padding-top:var(--section-gap);
padding-bottom:calc( var(--section-gap) / 2);
}
.post-nav-bar>div{
display:flex;
justify-content: space-between;
align-items: flex-start;
}
.post-nav-bar>div a{
display:flex;
align-items: center;
gap:20px;
}
.post-nav-bar>div a>p{
margin: 0;
font-family: var(--ch-font);
font-size: var(--xd-19px);
font-weight: 400;
color: #000000;
line-height:1em;
}
.post-nav-bar>div a>div{
width:40px;
height:40px;
display:flex;
justify-content: center;
align-items: center;
border:2px solid #707070;
border-radius:100%;
padding:5px;
}
.post-next-btn-box svg{
transform: translateX(15%);
}
.post-prev-btn-box svg{
transform: translateX(-15%);
}
.new_content_btn {
display: grid;
grid-template-columns: auto auto auto;
align-items: flex-end;
grid-gap: 20px;
}
.mobile_share{
grid-template-columns: auto;
}
.share-button{
background: transparent !important;
border: unset !important;
outline: unset !important;
padding: 0px;
display: flex;
align-items: center;
gap: 10px;
}
.share-button svg{
height: 20px;
}
.new_content_btn>div {
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.new_content_btn>div>a>img{
width: 45px;
}
.new_content_btn>a{
display: flex;
align-items: flex-end;
}
.new_content_btn>a>img{
height: 27px;
}
.share-more-box>img{
height: 27px;
}
.share-more-box{
position: relative;
}
.share-more-box,
.share-more-box>div{
cursor: pointer;
}
.share-more-box:hover >div,
.share-more-box>div:hover{
display:grid;
}
.share-more-box>div{
position: absolute;
width: 200px;
top: 100%;
right: calc( 0px - var(--pad-space));
z-index: 3;
display:none;
padding-top: 6px;
}
.new_content_btn_top .share-more-box>div{
left:unset;
right: calc( 0px - var(--pad-space) - var(--pad-space));
transform: translateX(0%);
}
.share-more-box button{
padding: 0px;
display: grid;
grid-template-columns: 20px 1fr;
grid-gap: 20px;
align-items: center;
border: unset;
background: transparent !important;
outline: unset !important;
color: #707070 !important;
}
.share-more-box button span{
text-align: left;
}
.share-more-box>div>div>div{
display: grid;
grid-template-columns: 20px 1fr;
grid-gap: 20px;
align-items: center;
position: relative;
}
.share-more-box>div>div{
background: white;
padding: 20px;
border-radius: 20px;
grid-template-columns: 1fr;
grid-gap: 15px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
display: grid;
}
.share-more-box span{
font-family: var(--en-font) !important;
font-size: 15px !important;
font-weight: 500 !important;
line-height: 1em !important;
}
.share-more-box a{
display: grid;
grid-template-columns: 20px 1fr;
grid-gap: 20px;
align-items: center;
text-decoration: none !important;
color: #707070 !important;
}
.mobile_share span{
font-size: 14px;
}
.mobile_share img{
height: 15px;
}
.mobile_share span{
color: #707070 !important;
}
@media only screen and (max-width:1024px){
.post-top-section{
padding-top: 150px;
}
.post-nav-bar{
padding-bottom: var(--section-gap);
}
}
@media only screen and (max-width:767px){
.post-top-section{
padding-top: 115px;
}
.post-title-sec h1{
line-height:1.4em;
}
.post-title-sec{
flex-direction: column;
}
.post-category-line{
padding: 30px 0 10px 0;
}
.post-title-sec>div{
flex-direction: row;
justify-content: space-between;
width: 100%;
}
.post-title-sec p{
margin-bottom:0px;
}
.social_btn a{
display:flex;
align-items:flex-end;
}
.post-title-sec{
gap:15px;
margin-bottom:40px;
}
.page-content p{
line-height:1.7em;
}
.social_btn img{
height:20px;
}
.page-content img{
border-radius:20px;
}
.post-nav-bar>div a>div{
width:30px;
height:30px;
}
.post-nav-bar>div a svg{
height:15px;
}
.post-nav-bar>div a{
gap:10px;
}
.page-content{
grid-gap: 20px;
}
}
@media only screen and (max-width:600px){
.post-top-section{
padding-top: 95px;
}
.new_content_btn>a>img,
.share-more-box>img{
height: 20px;
}
}