@charset "UTF-8";

html,body {scroll-behavior: smooth;}
div,p,table,iframe,main,section,aside,footer,nav{margin:0;padding: 0;}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0;padding: 0;}
ul,ol{margin:0;padding:0;list-style:none;}
a{background-color:transparent;text-decoration:none;color:inherit;}
b,strong{font-weight:bolder;}

main {background: #000 url(../../images/ai-video-enhancer/showcase/bg.png) no-repeat center top;}

.banner {padding: 54px 0 50px;border-bottom: 2px solid #121317;}
.banner-content {width: 1026px;margin: 0 auto;}
.banner h1 {font-size: calc(2.75rem + .3vw);color: #fff;line-height: 1;font-weight: 600;text-align: center;}
.banner-p {color: #9599b7;line-height: 1.6;text-align: center;padding: 25px 60px 55px;}
.banner-card {border: 1px solid #373b58;border-radius: 14px;padding-left: 50px;display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 20px;}
.banner-card-left {width: 520px;}
.banner-card-left>h3 {font-size: calc(.77rem + .3vw);color: #fff;line-height: 1;}
.banner-card-p {color: #9599b7;line-height: 1.2;padding: 16px 0 22px;}
.banner-buttons {display: flex;}
.banner-buttons>a {min-width: 188px;height: 46px;box-sizing: border-box;padding: 0 10px;display: flex;justify-content: center;align-items: center;gap: 9px;border-radius: 6px;background-color: #80cb1a;color: #fff;line-height: 1;}
.banner-buttons>a::before {content: "";width: 15px;height: 22px;background: url(../../images/ai-video-enhancer/showcase/download-icon.png);}
.banner-card-right {width: 414px;display: flex;justify-content: flex-end;}
.banner-card-right>img {flex-shrink: 0;}
@media (max-width: 1026px) {
    .banner-content {width: 96%;}
    .banner-card {padding: 30px;}
    .banner-card-left {width: 100%;}
    .banner-card-right {display: none;}
}

.case {padding: 36px 0 55px;}
.case-content {width: 1200px;margin: 0 auto;}
.case-top {display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 20px;padding-bottom: 27px;}
.case-select {display: flex;align-items: center;gap: 20px;color: #808080;line-height: 1;}
.case-select select {color: #fff;background: none;outline: none;border: none;cursor: pointer;}
.case-select select option {color: #000;}
.case-top>button,.emit-more {min-width: 140px;box-sizing: border-box;padding: 0 10px;line-height: 38px;box-shadow: inset 0 0 0 1px #4d4d4d;border-radius: 5px;background-color: transparent;border: none;outline: none;cursor: pointer;}
.emit-more {display: block;width: 140px;color: #ccc;margin: 30px auto 0;}
.case-container {display: flex;justify-content: center;align-items: flex-start;gap: 30px;}
.case-items {width: 380px;display: flex;flex-direction: column;gap: 30px;}
.case-items>li {background-color: #0d0d0d;border-radius: 12px;position: relative;}
.case-items>li:hover {box-shadow: 0 0 0 1px #595959;border-radius: 12px 12px 0 0;z-index: 1;}
.item-top {border-radius: 12px;overflow: hidden;position: relative;}
.item-content {position: relative;}
.item-content::before {content: "";display: block;}
.item-content.ratio16-9::before {padding-bottom: 56.25%;}
.item-content.ratio9-16::before {padding-bottom: 177.78%;}
.item-content iframe {width: 100%;height: 100%;position: absolute;top: 0;left: 0;border: none;}
.item-bottom {display: none;width: 100%;box-sizing: border-box;padding: 1px 25px 15px;position: absolute;top: 100%;left: 0;margin-top: 1px;box-shadow: 0 0 0 1px #595959;background-color: #0d0d0d;border-radius: 0 0 12px 12px;}
.item-bottom::before {content: "";width: 100%;height: 1px;background-color: #0d0d0d;position: absolute;top: -1px;left: 0;}
.case-items>li:hover .item-bottom {display: block;}
.item-btns {height: 46px;width: 100%;padding: 0 25px;background-color: #242424;display: flex;justify-content: space-between;align-items: center;margin: 0 0 15px -25px;}
.item-btn-left,.item-btn-right {display: flex;align-items: center;gap: 20px;}
.item-btns button {outline: none;border: none;background-color: transparent;cursor: pointer;}
.item-btns .vote {display: flex;align-items: center;gap: 6px;}
.item-btns .vote::before {content: "";width: 25px;height: 25px;background: url(../../images/ai-video-enhancer/showcase/vote-icons.svg) no-repeat center bottom/100% auto;}
.item-btns .vote.active::before {background-position-y: top;}
.item-btns .vote::after {content: attr(data-vote);font-size: 17px;line-height: 1;color: #fff;}
.item-btns .copy {width: 26px;height: 25px;background: url(../../images/ai-video-enhancer/showcase/copy.svg) no-repeat center/100% 100%;}
.item-btns .copy.active {animation: copyBtn 0.2s linear;}
@keyframes copyBtn {0% {transform: scale(1);} 50% {transform: scale(1.2);} 100% {transform: scale(1);}}
.item-btns .link {width: 23px;height: 23px;background: url(../../images/ai-video-enhancer/showcase/link.svg) no-repeat center/100% 100%;}
.item-title {color: #ccc;line-height: 1;}
.item-info {color: #666;line-height: 1.3;padding: 8px 0;}
.item-pro>a {color: #ccc;line-height: 1;text-decoration: underline;}
@media (max-width: 1200px) {
    .case-content {width: 96%;}
    .case-top>button, .emit-more {min-width: 120px;}
    .case-items>li,.case-items>li:hover {box-shadow: 0 0 0 1px #595959;border-radius: 12px;z-index: 1;border-radius: 12px;}
    .item-bottom {display: block;position: static;box-shadow: none;}
    .item-bottom::before {display: none;}
}

aside {position: fixed;top: 30%;left: 0;width: 160px;}
aside>a {display: block;color: #adadad;line-height: 1;text-align: center;}
aside>a+a {margin-top: 40px;}
aside>a::before {content: "";display: block;height: 52px;background-position: center;background-repeat: no-repeat;}
aside>a.aside-link1::before {background-image: url(../../images/ai-video-enhancer/showcase/icon1.svg);}
aside>a.aside-link2::before {background-image: url(../../images/ai-video-enhancer/showcase/icon2.svg);}
aside>a.aside-link3::before {background-image: url(../../images/ai-video-enhancer/showcase/icon3.svg);}
@media (max-width: 1200px) {
    aside {position: static;width: 100%;display: flex;justify-content: center;flex-wrap: wrap;gap: 20px;padding: 20px 0 50px;background-color: #000;}
    aside>a+a {margin-top: 0;}
}

.popup-container {display: none;width: 100%;height: 100%;background-color: rgba(0,0,0,0.7);position: fixed;top: 0;left: 0;z-index: 100;}
.popup-content {width: 870px;box-sizing: border-box;padding: 30px 80px 42px;background-color: #1d1d1d;border-radius: 18px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.cancel-popup {width: 30px;height: 30px;font-size: 30px;line-height: 25px;color: #fff;text-align: center;position: absolute;top: -40px;right: 10px;cursor: pointer;}
.popup-p {line-height: 1.2;padding-bottom: 27px;}
.popup-items {padding-bottom: 34px;}
.popup-items label {display: block;color: #939393;line-height: 30px;}
.popup-items label>span {color: #d10000;}
.popup-items input,.popup-items textarea {width: 100%;box-sizing: border-box;padding: 0 15px;font-size: 17px;border: 1px solid #2d2d2d;border-radius: 6px;background-color: #171717;outline: none;color: #939393;line-height: 1.4;}
.popup-items input::-webkit-input-placeholder,.popup-items textarea::-webkit-input-placeholder {color: #404040;}
.popup-items input {height: 38px;}
.popup-items textarea {padding-top: 8px;padding-bottom: 8px;resize: none;font-family: 'Helvetica Neue';}
.submit-before>button {display: block;width: 350px;box-sizing: border-box;padding: 0 10px;font-size: calc(.77rem + .3vw);color: #000;line-height: 42px;text-align: center;border-radius: 6px;background-color: #80cb1a;border: none;outline: none;margin: 0 auto;cursor: pointer;}
.submit-after {display: none;text-align: center;}
.after-title {line-height: 1;padding-bottom: 20px;}
.after-info {line-height: 1.4;}
@media (max-width: 880px) {
    .popup-content {width: 96%;padding: 20px;}
    .submit-before>button {width: 300px;}
}

.to-top {position: fixed;bottom: 200px;right: 155px;}
@media (max-width: 1200px) {
    .to-top {display: none;}
}