.main-area .first-section{ }
.main-area .first-section .right{ gap: 5px; display: grid; grid-template-columns: 1fr 300px;}
.main-area .first-section .right:has(.videos-area){ grid-template-columns: 1fr;}
.main-area .first-section .right > div{ border-radius: 3px;}
.main-area .first-section .right .video-area{ height: fit-content;}
.main-area .first-section .right .video-area .video{}
.main-area .first-section .right .video-area .video iframe{ width: 100%; height: 320px;}
.main-area .first-section .right .video-area .other{ display: flex; flex-direction: column; background-color: var(--white-bg); margin-top: 5px; padding: 10px; border: 1px solid var(--main-blue-border); border-radius: 3px;}
.main-area .first-section .right .video-area .other .name{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; font-size: 14px; font-weight: 600; margin-top: 5px; font-weight: 500;}
.main-area .first-section .right .video-area .other .buttons{ margin-top: 10px;}
.main-area .first-section .right .video-area .other .buttons a { display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all .2s ease; cursor: pointer; font-weight: 600; width: 150px; height: 27px; font-size: 11px; border-radius: 3px;}

.main-area .first-section .videos-area{ width: 100%;}
.main-area .first-section .videos-area .videos{ display: flex; flex-wrap: wrap; gap: 5px;}
.main-area .first-section .videos-area .videos .video{ background-color: white; border: 1px solid white; padding: 10px; border-radius: 10px; transition: all .3s ease; text-decoration: none; color: inherit; width: calc(((100% / 3) - (5px)) + (5px / 3));}
.main-area .first-section .videos-area .videos .video:hover{ background-color: rgba(255, 255, 255, 0.5);}
.main-area .first-section .videos-area .videos .video .img-area{ height: 180px; overflow: hidden; border-radius: 7px; position: relative; display: flex; align-items: center; justify-content: center;}
.main-area .first-section .videos-area .videos .video .img-area > img{ transition: all .3s ease; height: 100%; width: 100%; object-fit: cover;}
.main-area .first-section .videos-area .videos .video:hover .img-area > img{ transform: scale(1.05);}
.main-area .first-section .videos-area .videos .video .img-area > span{ position: absolute; right: 10px; bottom: 10px; padding: 2px 5px; font-size: 11px; color: white; background-color: black; border-radius: 3px;}
.main-area .first-section .videos-area .videos .video .detail{ padding: 5px 2px 0; display: flex; flex-direction: column; gap: 3px;}
.main-area .first-section .videos-area .videos .video .detail > b{ height: 35.2px; font-size: 13px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.main-area .first-section .videos-area .videos .video .detail > span{ font-size: 12px; font-weight: 600; color: #777;}



.main-area .first-section .right .product-area{ background-color: var(--white-bg); border: 1px solid var(--main-blue-border);}
.main-area .first-section .right .product-area .products{ height: 405px; max-height: 405px; overflow-y: auto; display: flex; flex-direction: column;}
.main-area .first-section .right .product-area .products::-webkit-scrollbar{ border-radius: 0 3px 3px 0; width: 6px; background-color: rgba(vaR(--black-o), .05);}
.main-area .first-section .right .product-area .products::-webkit-scrollbar-thumb{ border-radius: 0 3px 3px 0; background-color: var(--main-blue-txt);}
.main-area .first-section .right .product-area .products .product{ border-bottom: 1px solid rgba(var(--main-blue-txt-o), .1); transition: all .2s ease; cursor: pointer; padding: 15px; display: flex; align-items: center; gap: 10px;}
.main-area .first-section .right .product-area .products .product:hover{ background-color: rgba(var(--main-blue-txt-o), .05);}
.main-area .first-section .right .product-area .products .product .img-area{ width: 40px; height: 40px; min-width: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden;}
.main-area .first-section .right .product-area .products .product .img-area img{ width: 100%;}
.main-area .first-section .right .product-area .products .product .detail{ width: calc(100% - 50px); display: flex; flex-direction: column;}
.main-area .first-section .right .product-area .products .product .detail .name{ font-size: 11px; font-weight: 500; color: rgba(vaR(--black-o), 1); line-height: 1.2;}
.main-area .first-section .right .product-area .products .product .detail .video-detail{ display: flex; align-items: center; justify-content: space-between; margin-top: 5px;}
.main-area .first-section .right .product-area .products .product .detail .video-detail > span{ font-size: 10px; color: rgba(vaR(--black-o), .7); font-weight: 600;}
.main-area .first-section .right .product-area .products .product .detail .video-detail .watch{}
.main-area .first-section .right .product-area .products .product .detail .video-detail .time{}



@media screen and (max-width: 916px){
    .main-area .first-section{ display: flex;}
    .main-area .first-section > .right{ display: flex; flex-direction: column; padding: 0 10px;}
    header > div .logo-area .open-left-nav{ display: none !important;}
    header > div .logo-area .go-back{ display: inline-block !important;}
    .main-area .first-section .right .video-area .video iframe{ height: 55vw;}
}