.top-marquee{overflow: hidden;   border-top:1px solid #888;border-bottom:1px solid #888}
.top-marquee .box{display: flex; height:35px; position: relative;}
.top-marquee .marquee-list{position: absolute;top: 0 ; left: 0;display: flex; padding: 0px 0 0px 0; }
.top-marquee .marquee-list1{animation: aniScroll 60s linear  infinite;}
.top-marquee .marquee-list2{animation: aniScroll-2 60s linear  infinite;}
.top-marquee .marquee-list li{margin:0 30px;}
.top-marquee .marquee-list li .txt{text-align: center; color: #444;font-weight:200 ; padding:10px;font-size: 1rem;   font-family: 'pretendard'; white-space: nowrap;}
 @media(max-width:1024px){
         .top-marquee .marquee-list li .txt{font-size: 1.6rem;}
         .top-marquee .marquee-list li .txt{font-size: 1rem;}        
         .top-marquee .marquee-list  img{height: 300px;}
}
@keyframes aniScroll{
    0%{ transform: translateX(0%) }
    100%{ transform: translateX(-100%) }
}
@keyframes aniScroll-2{
    0%{ transform: translateX(100%) }
    100%{ transform: translateX(0%) }
}
.highlights-tit{display: flex; justify-content: space-between;}
.works{display: flex;justify-content: center; gap: 20px; margin-top: 120px;}



/*index*/
.wrap .visual{padding: 0 20px;}
.wrap .visual .title h2{ font-family: "Roboto Flex", sans-serif; font-size: 180px; font-weight: 700; }
.wrap .visual .visual-content{display: flex; justify-content: space-between; font-weight: 700;font-family: "Roboto Flex", sans-serif;}
.wrap .visual .visual-content .content h3{font-size: 120px;}
.wrap .visual .disc{text-align: right; margin-top: 300px;}
.wrap .visual .disc video{max-width: 560px;width: 100%;}
.wrap .visual .disc p {font-weight: 200;line-height: 1.3;margin-top: 20px;}

.wrap .highlights .file1 a{width: 100%;}
.wrap .highlights .file2{display: flex; max-height: 638px; gap: 20px; margin-top: 20px;}
.wrap .highlights .file2 video{width: 100%;height: 100%;object-fit: cover;}
.wrap .highlights .file video{width: 100%;}
.wrap .highlights .works-more{margin: 50px 0; text-align: center; border-bottom: 1px solid #222; padding-bottom: 20px;}
.wrap .highlights .works-more a{font-size: 120px; display: flex; align-items: center; justify-content: center;}
.wrap .highlights .works-more a img{max-width: 100px; margin-left: 20px;}
.wrap .introduction{padding: 0 20px 200px 20px;}
.wrap .introduction .box .myself-introduction{margin-bottom: 100px;}
.wrap .introduction p {font-family: "Roboto Flex", sans-serif; font-size: 62px;}
.wrap .introduction .box .tit{margin-bottom: 60px; }
.wrap .introduction .tit h3{font-size: 90px; border-bottom: 1px solid #444;padding-bottom: 30px; font-weight: 500;}
.wrap .introduction a{font-size:24px ; color: #FF7448; display: flex; align-items: center;  margin-top: 20px;}


.sec04{padding: 200px 0; overflow: hidden;}
.sec04 .box{position: relative;}
.sec04 .box .thumbnail img{width: 100%;}
.sec04 .box .txt{ width: 100%; background-color: #EC520B;  font-family: 'Sequel 100 Wide 95'; font-size: 110px; font-weight: 800; text-align: center; padding: 50px 0 70px 0;}
.sec04 .box .txt h1{white-space: nowrap; margin: 50px 0; font-family: "Sequel 100 Wide 95";}

@media(max-width:1024px){
    .wrap .highlights .works-more a{font-size: 60px;}
    .wrap .highlights .works-more a img{max-width: 48px;}
    .wrap .visual{margin-top: 40px;}
    .wrap .visual .disc{margin-top: 30px;}
    .wrap .visual .visual-content{flex-direction: column;}
    .wrap .visual .title h2{font-size: 90px; line-height: 0.8;}
    .wrap .visual .disc p{text-align: left;}
    .wrap .visual .visual-content .content h3{font-size: 24px;}
    .wrap .visual .visual-content .content {margin-top: 15px;}
    .sec04 .box .txt{font-size: 60px;}
    .sec04 .box .txt h1{margin: 20px 0;}
    .wrap .introduction .tit h3{font-size: 40px;}
    .wrap .introduction p{font-size: 18px;}
    .wrap .introduction p br{display: none;}
    .wrap .introduction{padding-bottom: 100px;}
    .wrap .introduction .box .tit{margin-bottom: 30px;}
    .wrap .introduction .box .myself-introduction{margin-bottom: 50px;}
    .wrap .highlights .file video{height: 400px; object-fit: cover;}
    .wrap .highlights .file2{flex-direction: column;}
}
/*contact*/
.contact-wrap{padding: 100px 20px;}
.contact-wrap .contact-title h2{font-size:120px; font-family: "Roboto Flex", sans-serif;}

.contact-wrap .contact-from .tit{color: #1a1a1a; margin-bottom: 50px; border-top:1px solid #222; padding-top:30px;}
.contact-wrap .contact-from .tit h4{font-size: 30px; font-family: "Roboto Flex", sans-serif; margin-bottom: 30px;}
.contact-wrap .contact-from .tit p{font-size: 20px; color: #444;}
.contact-wrap .contact-from{margin-top: 100px;}
.contact-wrap .contact-from .line{margin: 30px 0;}
.contact-wrap .contact-from span{margin-bottom: 10px; color: #1a1a1a;}
.contact-wrap .contact-from span strong{color: #EC520B;}
.contact-wrap .contact-from .form-box input, .contact-wrap .contact-from .form-box textarea{width: 100%; outline: none; border: 1px solid ;background-color: #FAFAFA;border-radius: 5px;border: 1px solid #D4D4D4; padding: 10px; box-sizing: border-box;}
.contact-wrap .sand-btn button{background-color: #1a1a1a;border: none; outline: none;color: #fff; padding: 10px 30px; border-radius: 5px; cursor: pointer; font-family: "pretendard";}

@media(max-width:1024px){
    .contact-wrap{padding: 50px 20px;}
    .contact-wrap .contact-from{margin-top: 40px;}
    .contact-wrap .contact-title h2{font-size: 48px;}
    .contact-wrap .contact-from .tit{margin-bottom: 30px; padding-top: 15px;}
    .contact-wrap .contact-from .tit h4{font-size: 24px; margin-bottom: 10px;}
    .contact-wrap .contact-from .tit p{font-size: 16px;}    
    .contact-wrap .contact-from .line{margin: 20px 0;}
    .contact-wrap .contact-from .form-box textarea{height: 200px;}
}

/*myself*/
.myself-wrap{padding: 100px 20px;}
.myself-wrap .contact-title h2{font-size:120px; font-family: "Roboto Flex", sans-serif;}
.myself-wrap .myself-content{border-bottom: 1px solid #444; padding-bottom: 20px;}
.myself-wrap .myself-content .box{display: flex; justify-content: space-between; margin-top: 100px;}
.myself-wrap .myself-content .box .txt{flex: 0.7;}
.myself-wrap .myself-content .box .txt p{font-size: 21px; color: #444; font-weight: 200; line-height: 1.3; word-break: keep-all;}
.myself-wrap .myself-content .box .myself-video{flex: 0.3; max-width: 500px;}
.myself-wrap .myself-content .box video{width: 100%; border-radius: 5px;}


.myself-stack{ margin-top: 100px; }

.myself-stack .box .experience .title h3{font-size: 48px; margin-bottom: 20px;}
.myself-stack .box .experience ul li{display: flex; justify-content: space-between; padding: 20px 0; border-top: 1px solid #888; font-size: 18px;  color: #444; font-weight: 300;}
.view-page{border: 1px solid #222;display: inline-block;  border-radius: 30px; margin-top: 20px;}
    .view-page a{ padding:10px 20px; font-size: 32px;}
@media(max-width:1024px){
    .view-page a{font-size: 24px;}
    .view-page a img{width: 17px;}
    .myself-wrap .contact-title h2{font-size: 50px;}
    .myself-wrap{padding:50px 20px ;}
    .myself-wrap .myself-content .box{margin-top: 30px;}
    .myself-wrap .myself-content .box{flex-direction: column;}
    .myself-wrap .myself-content .box .txt p{font-size: 15px; margin-bottom: 20px;}
    .myself-wrap .myself-content{border-bottom: none;}
    .myself-stack{margin-top: 50px;}
    .myself-stack .box .experience .title h3{font-size: 32px;}
    .myself-stack .box .experience ul li{font-size: 15px;}
    .myself-stack .box .experience ul li{padding: 10px 0;}
}