/* video */
#video_wrapper .inner {width: 100%;max-width: 1216px;margin: 0 auto;}
#video_wrapper .pagination {margin: 40px 0;}
#video_wrapper .sub_title {
    color: var(--ktech-gray-700);
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    margin-bottom: 4px;
}
#video_wrapper .title_flex_wrapper {display: flex;flex-direction: column;align-items: flex-end;padding-right: 16px;margin-bottom: 24px;}
#video_wrapper .title_flex_wrapper a {width: fit-content;text-decoration: underline;text-underline-offset: 2px;color: var(--ktech-gray-700);}
#video_wrapper .title {
    width: 100%;
    color: var(--ktech-gray-950);
    font-size: 24px;
    font-weight: var(--font-weight-bold);
}
#video_wrapper #shorts_wrapper {margin-bottom: 40px;padding-left: 16px; padding-top: 8px;}
#video_wrapper #shorts_wrapper .shorts {width: 100px;aspect-ratio: 9 / 16;}
#video_wrapper #shorts_wrapper .shorts img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
}
#video_wrapper #long_wrapper {
    margin: 0 16px;
    padding: 40px 0 40PX;
    border-top: 1px solid var(--ktech-gray-300);
}
#video_wrapper #long_wrapper .video {margin-bottom: 16px;}
#video_wrapper #long_wrapper .video a {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}
#video_wrapper #long_wrapper .video .left {flex: 1 156px;aspect-ratio: 16 / 9;}
#video_wrapper #long_wrapper .video .left > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: 4px;
    overflow: hidden;
}
#video_wrapper #long_wrapper .video .right {flex: 1 164px;}
#video_wrapper #long_wrapper .video .title {
    width: 100%;
    color: var(--ktech-gray-950);
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    margin-bottom: 8px;
}
#video_wrapper #long_wrapper .video .tag_wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
}
#video_wrapper #long_wrapper .video .tag {
    display: inline-block;
    color: var(--ktech-gray-500);
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    padding: 2px 8px;
    border-radius: 50px;
    border: 1px solid var(--ktech-gray-200);
}

/* video_shorts_wrapper */
#video_wrapper.video_shorts_wrapper .title {margin-bottom: 24px;}
#video_wrapper.video_shorts_wrapper #shorts_wrapper ul {display: flex;flex-wrap: wrap;gap: 8px;}
#video_wrapper.video_shorts_wrapper #shorts_wrapper .shorts {width: calc((100% - 16px) / 3);aspect-ratio: unset;}
#video_wrapper.video_shorts_wrapper #shorts_wrapper .shorts a {aspect-ratio: unset;border-radius: 0;}
#video_wrapper.video_shorts_wrapper #shorts_wrapper .shorts .img_inner {aspect-ratio: 3 / 4.8;display: flex;align-items: center;margin-bottom: 8px;overflow: hidden;border-radius: 4px;}
#video_wrapper.video_shorts_wrapper #shorts_wrapper .shorts .img_inner img {aspect-ratio: 9 / 16;}
#video_wrapper.video_shorts_wrapper #shorts_wrapper .shorts .title {width: 100%;font-size: 14px;font-weight: var(--font-weight-medium);}

/* video_long_wrapper */
#video_wrapper.video_long_wrapper .title {margin-bottom: 24px;}
#video_wrapper.video_long_wrapper #long_wrapper {border: 0;padding-top: 0;}
#video_wrapper.video_long_wrapper #long_wrapper .video a {gap: 8px;}
#video_wrapper.video_long_wrapper #long_wrapper .video .left > img {border-radius: 8px;}
#video_wrapper.video_long_wrapper #long_wrapper .video .title {font-size: 14px;}

@media (min-width: 800px) {
    #video_wrapper {padding: 64px 16px;}
    #video_wrapper .sub_title {font-size: 24px;margin-bottom: 16px;}
    #video_wrapper .title_flex_wrapper {flex-direction: row;flex-wrap: nowrap;justify-content: space-between;gap: 32px;align-items: center;padding: 0;margin-bottom: 64px;}
    #video_wrapper .title_flex_wrapper a {font-size: 24px;flex-shrink: 0;}
    #video_wrapper .title {font-size: 48px;}
    #video_wrapper #shorts_wrapper {padding: 0;margin-bottom: 80px;}
    #video_wrapper #shorts_wrapper .swiper {overflow: unset;}
    #video_wrapper #shorts_wrapper .shorts {width: 280px;aspect-ratio: 3 / 4.8;overflow: hidden;border-radius: 16px;display: flex;align-items: center;}
    #video_wrapper #shorts_wrapper .shorts a {display: block;width: 100%;aspect-ratio: 9 / 16;}
    #video_wrapper #shorts_wrapper .shorts img {border-radius: 16px;}
    #video_wrapper #long_wrapper {margin: 0;padding-top: 80px;}
    #video_wrapper #long_wrapper .video {margin-bottom: 32px;}
    #video_wrapper #long_wrapper .video a {gap: 2.6%;}
    #video_wrapper #long_wrapper .video .left > img {border-radius: 16px;}
    #video_wrapper #long_wrapper .video .title {font-size: 24px;margin: 0;}
    #video_wrapper #long_wrapper .video .left {flex: 1 50%;max-width: 590px;}
    #video_wrapper #long_wrapper .video .right {flex: 1 50%;max-width: unset;}

    /* shorts */
    #video_wrapper.video_shorts_wrapper .title {margin-bottom: 64px;font-size: 64px;}
    #video_wrapper.video_shorts_wrapper #shorts_wrapper ul {gap: 32px;}
    #video_wrapper.video_shorts_wrapper #shorts_wrapper .shorts {width: calc((100% - 96px) / 4);aspect-ratio: unset;}
    #video_wrapper.video_shorts_wrapper #shorts_wrapper .shorts a {aspect-ratio: unset;border-radius: 0;}
    #video_wrapper.video_shorts_wrapper #shorts_wrapper .shorts .img_inner {margin-bottom: 16px;overflow: hidden;border-radius: 16px;}
    #video_wrapper.video_shorts_wrapper #shorts_wrapper .shorts .img_inner .img {width: 100%;}
    #video_wrapper.video_shorts_wrapper #shorts_wrapper .shorts .title {font-size: 24px;margin: 0;}

    /* video_long_wrapper */
    #video_wrapper.video_long_wrapper .title {margin-bottom: 64px;font-size: 64px;}
    #video_wrapper.video_long_wrapper #video_list {display: flex;flex-wrap: wrap;gap: 32px;justify-content: space-between;}
    #video_wrapper.video_long_wrapper #long_wrapper {margin-bottom: 64px;}
    #video_wrapper.video_long_wrapper #long_wrapper .video {width: calc((100% - 32px) / 2);margin-bottom: 0;}
    #video_wrapper.video_long_wrapper #long_wrapper .video a {flex-direction: column;gap: 16px;}
    #video_wrapper.video_long_wrapper #long_wrapper .video .title {font-size: 24px;-webkit-line-clamp: 2;}
    #video_wrapper.video_long_wrapper #long_wrapper .video .left > img {border-radius: 16px;}
}