html{ font-size: 10px; scroll-behavior: smooth;}
/* html{ font-size: 10px; --main-color: 138, 208    , 100; --main-color: 208, 125, 100;} */
 
::-moz-selection { color: var(--white-txt); background: rgba(var(--main-color), 1);}
::selection { color: var(--white-txt); background: rgba(var(--main-color), 1);}

.blog-detail-area{ --main-color: var(--color);}
.blog-detail-area *{font-family: 'Inter', sans-serif;}
.blog-detail-area{ min-height: 100%; padding-bottom: 100px;}

.blog-detail-area > .route-area{ width: 100%; max-width: 1200px; padding: 0 10px; margin: 0 auto;}
.blog-detail-area > .route-area .route{ padding: 25px 0 30px; overflow-x: auto; display: flex; align-items: center; gap: 40px;}
.blog-detail-area > .route-area .route > a{ white-space: nowrap; position: relative; font-size: 1.6rem; text-decoration: none; color: rgba(var(--black-o), .5); display: flex; gap: 15px; align-items: center;}
.blog-detail-area > .route-area .route > a:hover{ color: rgba(var(--black-o), .9); transition: all .2s ease;}
.blog-detail-area > .route-area .route > a:not(:last-child)::after{ position: absolute; top: 50%; transform: translateY(-50%); right: -22px; pointer-events: none; color: rgba(var(--black-o), .6); font-size: 10px; content: '\f054'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; display: inline-block;}
.blog-detail-area > .route-area .route > a:last-child{ font-weight: 600; color: rgba(var(--main-color), 1);}
.blog-detail-area > .route-area .route > a:last-child:hover{ text-decoration: underline;}

.blog-detail-area > .banner{ width: 100%; background-color: rgba(var(--main-color), .1);}
.blog-detail-area > .banner > div{ display: flex; gap: 50px; width: 100%; max-width: 1200px; padding: 70px 10px; margin: 0 auto;}
.blog-detail-area > .banner > div .img-area{ min-width: 250px; width: 250px; height: 250px; display: flex; align-items: center; justify-content: center;}
.blog-detail-area > .banner > div .img-area img{ width: 100%;}
.blog-detail-area > .banner > div .detail{ display: flex; flex-direction: column;}
.blog-detail-area > .banner > div .detail .info{ display: flex; gap: 25px; align-items: center;}
.blog-detail-area > .banner > div .detail .info a{ font-size: 1.6rem; text-decoration: none; color: rgba(var(--black-o), 1); border: 1px solid rgba(var(--black-o), 1); border-radius: 20px; padding: 7px 20px;}
.blog-detail-area > .banner > div .detail .info span{ font-size: 1.4rem; color: rgba(var(--black-o), .8);}
.blog-detail-area > .banner > div .detail h1{ margin-top: 20px; font-size: 4.8rem; font-weight: 600; line-height: 1.3; color: rgba(var(--black-o), .85); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
.blog-detail-area > .banner > div .detail .author{ display: flex; align-items: center;margin-top: 30px;}
.blog-detail-area > .banner > div .detail .author .img-area{ transform: translateY(-1px); margin-right: 15px; min-width: 35px; width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.blog-detail-area > .banner > div .detail .author .img-area img{ width: 100%;}
.blog-detail-area > .banner > div .detail .author b{ font-size: 1.3rem; font-weight: 600; color: rgba(var(--black-o), .7);}
.blog-detail-area > .banner > div .detail .author div{ margin: 0 10px; transform: translateY(1px); width: 5px; height: 5px; border-radius: 50%; background-color: rgba(var(--black-o), .7);}
.blog-detail-area > .banner > div .detail .author span{ font-size: 1.3rem; color: rgba(var(--black-o), .6);}

.blog-detail-area > .content{ width: 100%;}
.blog-detail-area > .content > div{ gap: 40px; width: 100%; max-width: 1200px; padding: 50px 10px; margin: 0 auto; display: grid; grid-template-columns: 300px 1fr;}
.blog-detail-area > .content > div .left .show > div *:not(.bar){ display: none;}
.blog-detail-area > .content > div .left .show > div .bar{ position: fixed; top: 0; left: 0; height: 6px; background-color: rgba(var(--main-color), 1);}
.blog-detail-area > .content > div .left .content{ height: fit-content; position: sticky; top: 60px; padding-left: 30px;}
.blog-detail-area > .content > div .left .content > span{ font-size: 1.7rem; font-weight: 500; color: rgba(var(--black-o), 1); display: inline-block; margin-bottom: 25px;}
.blog-detail-area > .content > div .left .content .links{ display: flex; flex-direction: column; gap: 17px;}
.blog-detail-area > .content > div .left .content .links a{ transition: all .2s ease; position: relative; font-size: 1.4rem; text-decoration: none; color: rgba(var(--black-o), .6);}
.blog-detail-area > .content > div .left .content .links a:hover{ color: rgba(var(--black-o), 1);}
.blog-detail-area > .content > div .left .content .links a::before{ content: ''; display: inline-block; height: 1px; width: 0px; background-color: rgba(var(--main-color), 1); position: absolute; top: 50%; left: -30px; transform: translateY(-50%); transition: all .2s ease;}
.blog-detail-area > .content > div .left .content .links a.active{ color: rgba(var(--main-color), 1);}
.blog-detail-area > .content > div .left .content .links a.active::before{ width: 20px;}
.blog-detail-area > .content > div .left .content .share{ display: none;}
.blog-detail-area > .content > div .right{ }
.blog-detail-area > .content > div .right > div{ padding-top: 20px;}
.blog-detail-area > .content > div .right > div p{ font-style: normal; font-weight: 400; font-size: 1.8rem; color: #3e424b; line-height: 1.3; margin-bottom: 20px; letter-spacing: normal;}
.blog-detail-area > .content > div .right > div strong{ color: #131318; font-weight: 500;}
.blog-detail-area > .content > div .right > div img{ width: 100%; border-radius: 10px;}
.blog-detail-area > .content > div .right > div h2{ scroll-margin-top: 30px; margin-top: 50px; font-style: normal; font-weight: 600; font-size: 3rem; color: #101828; line-height: 1.3; margin-bottom: 20px; letter-spacing: normal;}
.blog-detail-area > .content > div .right > div a{ color: rgba(var(--main-color), 1); font-weight: 500; text-decoration: none;}
.blog-detail-area > .content > div .right > div ul{ padding: 0px 40px 18px;}
.blog-detail-area > .content > div .right > div ul li{ font-style: normal; font-weight: 400; font-size: 1.8rem; color: #3e424b; line-height: 1.3; margin-bottom: 10px; letter-spacing: normal !important;}


@media screen and (max-width: 1100px){
    html{ font-size: 9px;}
    .blog-detail-area > .content > div{ grid-template-columns: 200px 1fr; gap: 15px;}
    .blog-detail-area > .banner > div{ gap: 15px;}
    .blog-detail-area > .banner > div .img-area{ width: 200px; height: 200px; min-width: 200px;}
    .blog-detail-area > .banner > div .detail h1{ font-size: 4.3rem;}
}

@media screen and (max-width: 768px){
    body{ padding-top: 50px;}
    html{ font-size: 8px;}
    .blog-detail-area > .banner > div{ padding: 30px 10px; flex-direction: column; align-items: center;}
    .blog-detail-area > .banner > div .detail{ align-items: center;}
    .blog-detail-area > .banner > div .detail h1{ text-align: center; font-size: 3.5rem;}
    .blog-detail-area > .content > div{ display: flex; flex-direction: column;}
    .blog-detail-area > .content > div .left{ position: fixed; top: 0; left: 0;}
    .blog-detail-area > .content > div .left .show{ display: block; background-color: white; z-index: 10; width: 100%; height: 50px; position: fixed; top: 0; left: 0;}
    .blog-detail-area > .content > div .left .show > div *:not(.bar){ display: inline-block;}
    .blog-detail-area > .content > div .left .show > .txt{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: rgba(var(--main-color), .2);}
    .blog-detail-area > .content > div .left .show > .txt h3{ position: relative; z-index: 3; max-width: calc(100% - 80px); text-align: center; display: -webkit-box; word-break: break-all; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: 1.8rem; font-weight: 400;}
    .blog-detail-area > .content > div .left .show > .txt span{ position: relative; z-index: 3; font-size: 1.8rem; padding-left: 10px;}
    .blog-detail-area > .content > div .left .show > .txt span i{ transition: all .2s ease;}
    .blog-detail-area > .content > div .left .show > .txt span .close{ opacity: 0; transform: translateX(-11px);}
    .blog-detail-area > .content > div .left.active .show > .txt span .close{ opacity: 1;}
    .blog-detail-area > .content > div .left.active .show > .txt span .open{ opacity: 0;}
    .blog-detail-area > .content > div .left .show > .txt .bar{ position: relative; z-index: 2; position: absolute; left: 0; top: 0; height: 100%; width: 20%; background-color: rgba(var(--main-color), .5);}
    .blog-detail-area > .content > div .left .content{ transition: all .4s ease; transform: translateY(-100%) ; opacity: 0; background-color: white; padding: 80px 35px 40px; position: fixed; top: 0; left: 0; width: 100%; height: 100vh;}
    .blog-detail-area > .content > div .left.active .content{ transform: translateY(0%) ; opacity: 1;}
    .blog-detail-area > .content > div .left .content > span{ font-size: 2.2rem;}
    .blog-detail-area > .content > div .left .content .links{ border-bottom: 2px solid rgba(var(--black-o), .2); padding: 0 0 30px;}
    .blog-detail-area > .content > div .left .content .links a{ font-size: 2rem; color: rgba(var(--black-o), .6);}
    .blog-detail-area > .content > div .left .content .links a::before{ left: -23px; background-color: rgba(var(--black-o), 1); height: 2px;}
    .blog-detail-area > .content > div .left .content .links a.active::before{ width: 15px;}
    .blog-detail-area > .content > div .left .content .links a.active{ color: rgba(var(--black-o), 1);}
    .blog-detail-area > .content > div .left .content .share{ display: flex; flex-direction: column; padding-top: 30px; gap: 20px;}
    .blog-detail-area > .content > div .left .content .share > span{ font-size: 2.2rem; font-weight: 500; color: black;}
    .blog-detail-area > .content > div .left .content .share > div{ display: flex; align-items: center; gap: 10px;}
    .blog-detail-area > .content > div .left .content .share > div a{ text-decoration: none; width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: white; background-color: black;}
    .blog-detail-area > .content > div .left .content .share > div a.tg i{ transform: translate(-1px, -1px);}
    .blog-detail-area > .content > div .left .content .share > div a.wp i{ transform: translate(0px, -1px); font-size: 2.4rem;}
    .blog-detail-area > .content > div .right > div h2{ scroll-margin-top: 60px;}
}





/* .right > div h2 {
    scroll-margin-top: 40px;
} */