html{ font-size: 10px;}
 
.blog-area *{font-family: 'Inter', sans-serif;}
.blog-area{ min-height: 100%; padding-bottom: 50px; background-color: rgba(var(--main-blue-bg-o), .2);}

.blog-area .route-area{ background-color: var(--main-blue-bg); width: 100%;}
.blog-area .route-area .route{ border-bottom: 1px solid var(--main-blue-border); max-width: 1200px; margin: 0 auto; display: flex; padding: 25px 10px 30px; align-items: center; gap: 40px;}
.blog-area .route-area .route > a{ position: relative; font-size: 1.6rem; text-decoration: none; color: rgba(var(--black-o), .5); display: flex; gap: 15px; align-items: center;}
.blog-area .route-area .route > a:hover{ color: rgba(var(--black-o), .9); transition: all .2s ease;}
.blog-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-area .route-area .route > a:last-child{ font-weight: 600; color: rgba(var(--main-blue-txt), 1);}
.blog-area .route-area .route > a:last-child:hover{ text-decoration: underline;}

.blog-area .content-area{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 30px 10px;}
.blog-area .content-area h1{ font-weight: 700; font-size: 4.8rem; line-height: 1.3; color: #131318;}
.blog-area .content-area .slider-area{ margin-top: 30px; overflow: hidden; position: relative; height: 420px; width: 100%;}
.blog-area .content-area .slider-area .sliders{ border: 1px solid var(--main-blue-border); border-radius: 3px; scroll-behavior: smooth; overflow: hidden; display: flex; flex-wrap: nowrap; height: 100%;}
.blog-area .content-area .slider-area .sliders > div{ cursor: pointer; user-select: none; background-color: rgba(var(--white-o), 1); padding: 0 50px; position: relative; display: flex; align-items: center; justify-content: center; gap: 30px; min-width: 100%; max-width: 100%; height: 100%;}
.blog-area .content-area .slider-area .sliders > div .img-area{ min-width: 300px; width: 300px; height: 300px; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.blog-area .content-area .slider-area .sliders > div .img-area img{ width: 100%;}
.blog-area .content-area .slider-area .sliders > div .detail{ }
.blog-area .content-area .slider-area .sliders > div .detail .info{ margin-bottom: 20px; display: flex; align-items: center; gap: 30px;}
.blog-area .content-area .slider-area .sliders > div .detail .info > a{ font-size: 1.6rem; color: rgba(var(--black-o), 1); padding: 5px 15px 4.5px; border: 1px solid rgba(var(--black-o), 1); border-radius: 15px;}
.blog-area .content-area .slider-area .sliders > div .detail .info > span{ font-size: 1.4rem; color: rgba(var(--black-o), .7);}
.blog-area .content-area .slider-area .sliders > div .detail > h2{ font-weight: 600; font-size: 4rem; line-height: 1.3; color: #131318; margin-bottom: 20px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
.blog-area .content-area .slider-area .sliders > div .detail > p{ font-weight: 400; font-size: 1.6rem; line-height: 1.2; color: rgba(var(--black-o), 1); -webkit-box-orient: vertical; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}

.blog-area .content-area .slider-area .controller{ background-color: rgba(var(--white-o), .1); padding: 10px 13px; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 5px; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2;}
.blog-area .content-area .slider-area .controller > span{ cursor: pointer; transition: all .2s ease; display: inline-block; width: 20px; height: 8px; border-radius: 10px; background-color: var(--main-blue-bg); border: 1px solid var(--main-blue-border);}
.blog-area .content-area .slider-area .controller > span:hover{ background-color: rgba(var(--white-o), 1);}
.blog-area .content-area .slider-area .controller > span.active{ pointer-events: none; background-color: var(--main-blue-txt);}
.blog-area .content-area .slider-area .arr{ cursor: pointer; transition: all .2s ease; width: 40px; height: 80px; background-color: rgba(var(--white-o), .1); display: flex; align-items: center; justify-content: center; border-radius: 30px; position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);}
.blog-area .content-area .slider-area .arr.disabled{ pointer-events: none;}
.blog-area .content-area .slider-area .arr:hover{ background-color: rgba(var(--black-o), .2); color: var(--white-txt);}
.blog-area .content-area .slider-area .arr.left-arr{ left: 20px;}
.blog-area .content-area .slider-area .arr.right-arr{ right: 20px;}

.blog-area .content-area .content{ margin-top: 30px; display: grid; grid-template-columns: 1fr 270px; gap: 30px;}
.blog-area .content-area .content > div{ }
.blog-area .content-area .content > .right{ }
.blog-area .content-area .content > .right > div{ position: sticky; top: 30px; display: flex; flex-direction: column; background-color: var(--white-bg); border: 1px solid var(--main-blue-border); border-radius: 3px; overflow: hidden;}
.blog-area .content-area .content > .right > div a{ transition: all .2s ease; position: relative; font-size: 1.4rem; font-weight: 500; padding: 20px; text-decoration: none; color: var(--main-blue-txt);}
.blog-area .content-area .content > .right > div a:hover{ background-color: rgba(var(--black-o), .05);}
.blog-area .content-area .content > .right > div a.active{ background-color: var(--main-blue-txt); color: var(--white-txt);}
.blog-area .content-area .content > .right > div a.active::before{ content: '\f104'; display: inline-block; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
.blog-area .content-area .content > .right > div a:not(:last-child){ border-bottom: 1px solid var(--main-blue-border);}
.blog-area .content-area .content > .left{ display: flex; flex-direction: column; gap: 30px;}
.blog-area .content-area .content > .left > a{ text-decoration: none; background-color: var(--white-bg); border-radius: 3px; overflow: hidden;}
.blog-area .content-area .content > .left > a > div{ transition: all .3s ease; cursor: pointer; background-color: rgba(var(--color), .1); border: 1px solid rgba(var(--color), .1); width: 100%; height: 300px; border-radius: 5px; display: flex; gap: 10px; padding: 40px 30px;}
.blog-area .content-area .content > .left > a > div:hover{ background-color: rgba(var(--color), .05); border-color: rgba(var(--color), 1);}
.blog-area .content-area .content > .left > a > div .detail{ display: flex; flex-direction: column; justify-content: space-between;}
.blog-area .content-area .content > .left > a > div .detail > div{}
.blog-area .content-area .content > .left > a > div .detail > div h2{ margin-bottom: 20px; font-weight: 500; font-size: 2.3rem; line-height: 1.2; color: #000; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.blog-area .content-area .content > .left > a > div .detail > div p{ font-weight: 400; font-size: 1.7rem; line-height: 1.2; color: #3e424b; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.blog-area .content-area .content > .left > a > div .detail > span{ color: rgba(var(--color), 1); border: 1px solid rgba(var(--color), 1); font-size: 1.6rem; display: inline-block; width: fit-content; font-weight: 400; padding: 6px 15px; border-radius: 15px;}
.blog-area .content-area .content > .left > a > div .img-area{ min-width: 250px; width: 250px; height: 200px; display: flex; align-items: center; justify-content: center; }
.blog-area .content-area .content > .left > a > div .img-area img{ width: 100%;}


@media screen and (max-width: 1100px){
    html{ font-size: 9px;}
    .blog-area .content-area .slider-area .sliders > div .img-area{ width: 230px; height: 230px; min-width: 230px;}
}


@media screen and (max-width: 768px) {
    html{ font-size: 8px;}
    .blog-area .route-area .route{ padding: 10px 10px 13px;}
    .blog-area .content-area h1{ font-size: 4rem;}
    .blog-area .content-area .slider-area .sliders > div .detail > h2{ font-size: 3rem;}

    .blog-area .content-area .content{ display: flex; flex-direction: column-reverse;}
    .blog-area .content-area .content > .right > div{ flex-direction: row; overflow-x: auto; border: none; border-radius: 0; padding-bottom: 10px; gap: 3px;}
    .blog-area .content-area .content > .right > div a{ white-space: nowrap; border-radius: 15px; padding: 7px 15px;}
    .blog-area .content-area .content > .right > div a.active::before{ display: none;}
    .blog-area .content-area .content > .left > a > div{ flex-direction: column-reverse; height: auto; align-items: center; padding: 20px 10px;}
    .blog-area .content-area .content > .left > a > div .img-area{ overflow: hidden; margin-bottom: 10px;}
    .blog-area .content-area .content > .left > a > div .detail > span{ margin-top: 20px;}
    .blog-area .content-area .content > .left > a > div .detail > div h2{ text-align: center;}
    .blog-area .content-area .content > .left > a > div .detail > div p{ text-align: center; -webkit-line-clamp: 5;}
    .blog-area .content-area .content > .left > a > div .detail{ align-items: center;}

    .blog-area .content-area .slider-area{ height: fit-content;}
    .blog-area .content-area .slider-area .sliders > div{ flex-direction: column; padding: 20px 20px 50px;}
    .blog-area .content-area .slider-area .sliders > div .detail .info{ justify-content: center;}
    .blog-area .content-area .slider-area .sliders > div .detail > h2{ text-align: center;}
    .blog-area .content-area .slider-area .sliders > div .detail > p{ text-align: center;}
}