@charset "utf-8";

.mainpage-wrapper{overflow: hidden;}

.title{font-size: 23px; color: #B1B1B1; display: block; line-height: 1; font-weight: 700;}
.link-btn{background: rgba(0,0,0,.9); height: fit-content; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 20px; font-weight: 600; color: #fff; min-width: 113.3px; height: 113.3px; width: fit-content; gap: 9px; min-height: 113.3px; transition: all .4s;}

@media (hover: hover) {
    .link-btn:hover{background: #2D8FFF; transform: scale(1.2) !important;}
}

/* 태블릿/모바일 터치 지원 */
@media (hover: none) and (pointer: coarse) {
    .link-btn:active,
    .link-btn.touch-active{background: #2D8FFF; transform: scale(1.2) !important;}
    .link-btn{touch-action: manipulation;}
}


.swiper-slide{position: relative;}
.visual-slide video{object-fit: cover; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: no-repeat / cover;}

.main-visual{width: 100%; position: relative; height: 100vh; overflow: hidden;}
.main-visual .container--wide{height: 100%; position: relative; z-index: 1;}
.main-visual .container--wide .flex{flex-direction: column; height: 100%; justify-content: center; transition:transform .4s ease, opacity .8s ; opacity: 0; transform: translate(100px); transition-duration: .8s ;}
.main-visual.init .swiper-slide-active .container--wide .flex {opacity: 1; transform: translate(0px);}
.main-visual h1{font-size: 141px; color: #fff; font-weight: 700; line-height: 1;}
.main-visual p{font-size: 31px; color: rgba(255,255,255,.63);}
.main-visual .img-box{width: fit-content; margin: 388.2px 0 0;}
.main-visual img{max-width: fit-content;}

.main-visual-nav{position: absolute; z-index: 10; bottom: 64px; left: 50%; transform: translateX(-50%); width: min(var(--container-wide-width), calc(100% - 100px));}
.main-visual-nav .pagination{display: flex; align-items: center; justify-content: center; gap: 37px; margin: 0; width: auto;}
/* 커스텀 페이지네이션 스타일 */
.main-visual-nav .pagination .swiper-pagination-bullet{width: auto; height: auto; border: none; background: none; color: rgba(255, 255, 255, 0.46); font-size: 20px; font-weight: 700; margin: 0; flex-shrink: 0; transition: all 0.3s ease; cursor: pointer; position: relative; border-radius: 0; opacity: 1;}
.main-visual-nav .pagination .swiper-pagination-bullet-active{color: #fff; text-decoration: underline;}


/* company */
.company{padding: 140px 0 0; text-align: center; overflow: hidden; background: #000;}
.company .container--wide{position: relative; z-index: 1;}
.company .slogan{font-size: 46px; line-height: 1.468; margin: 18px 0 39px; color: #fff; font-weight: bold; line-height: 1.37; display: block;}
.company .slogan span{font-weight: normal; display: block;}
/* .company .cont{position: relative; height: 849px; color: #fff;} */
/* .company .cont>img{width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover;} */
/* .company .cont .container--wide{height: 100%; padding: 0;} */
/* .company .cont .container--wide>.flex{flex-direction: column; height: 100%; justify-content: center; padding: 0 0 67px;} */
/* .company .cont .container--wide>.flex p{text-align: left; font-size: 24px; margin: 12.8px 0 30.4px;} */
.company .link-btn.ver2{margin: auto;}
.company div:has(.link-btn.ver2){position: relative; z-index: 1;}
/* .company .typo{-webkit-mask-image: var(--mask-img); -webkit-mask-position: center center; -webkit-mask-repeat: no repeat; -webkit-mask-size: auto; backdrop-filter: blur(29px) brightness(1); --mask-img: url(../images/main/company-typo.svg); mask-image: var(--mask-img); mask-position: center center; mask-repeat: no-repeat; mask-size: auto; object-fit: cover;  display: block;} */
.company video{margin: -343px auto 0; max-width: 1920px; width: 100%; min-height: 1080px;}

/* product */
.product{overflow: hidden;}
.product>.flex{position: relative;}
.product .container--wide{display: flex; flex-direction: column; height: 100%; padding: 198.7px 0 140px; justify-content: center; color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;}
.product .flex>div:not(.container--wide){position: relative; flex: 1; display: flex; align-items: center; height: 100vh; min-height: 1080px;}
.product .flex>div:not(.container--wide) video{object-fit: cover; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: no-repeat / cover; z-index: -1;}
.product .flex>.last-video:not(.container--wide){width: 638px; flex: initial;}
.product .last-video video{width: 638px;}
.product p{font-size: 46px; margin: 15px 0 34.3px; line-height: 1.37; font-weight: 300;}
.product p span{font-weight: 700;}
/* .product b:not(.title){font-size: 46px; display: block;} */
.product span{display: block;}
.link-btn.ver2{flex-direction: row; height: initial; min-width: 155px; min-height: 41px; border-radius: 21px; font-size: 17px; line-height: 1; gap: 23.5px; background: #3A3A3A;}
.product .typo-box{position: relative; margin: auto 0 0;}
.product .typo-box div{position: absolute; left: 195px; top: 12px;}
.product .typo-box span{font-size: 23px; color: #fff; border-top: 1px solid #fff; width: 115px; margin: 0 0 4px;}
.product .typo{-webkit-mask-image: var(--mask-img); -webkit-mask-position: center center; -webkit-mask-repeat: no repeat; -webkit-mask-size: auto; backdrop-filter: blur(30px) brightness(1.2); --mask-img: url(../images/main/main-typo-2.svg); mask-image: var(--mask-img); mask-position: center center; mask-repeat: no-repeat; mask-size: auto; object-fit: cover;  display: block;}

@media (hover: hover) {
    .link-btn.ver2:hover{transform: initial !important; background: #2D8FFF !important; backdrop-filter: none;}
}

/* 태블릿/모바일 터치 지원 */
@media (hover: none) and (pointer: coarse) {
    .link-btn.ver2:active,
    .link-btn.ver2.touch-active{transform: initial !important; background: #2D8FFF !important; backdrop-filter: none;}
    .link-btn.ver2{touch-action: manipulation;}
}

/* partner */
.partner-banner .container--wide{padding: 0; position: relative;}
.partner-banner {background: #fff; padding: 17px 0; overflow: hidden;}
.partner-banner img{min-width: 182px; height: 81px; opacity: .4; mix-blend-mode: multiply; border-right: 1px solid #E6E6E6;}
.partner-banner .flex:first-child{margin-bottom: 16px;}
.partner-roll { display: flex; white-space: nowrap; width: 100%;}
.partner-roll-inner { display: flex; animation-timing-function: linear; animation-iteration-count: infinite;}
.partner-roll-right .partner-roll-inner { animation-name: roll-right; animation-duration: 100s;}
.partner-roll-left .partner-roll-inner { animation-name: roll-left; animation-duration: 100s;}

@keyframes roll-right {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes roll-left {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

.partner-roll-inner > div {
    flex-shrink: 0;
}
/* .partner-banner .container {position: relative;} */
/* .partner-swiper {width: 100%; position: static; width: calc(100% - 220px);} */
/* .partner-swiper .swiper-slide{position: relative;} */
/* .partner-swiper .swiper-slide::before{width: 1px; height: 63px; background: #C5C5C5; position: absolute; content: ''; right: -27.5px; top: 50%; transform: translateY(-50%);} */
/*  */
/* .partner-swiper .controll { width: 100%; height: 100%; display: flex; justify-content: space-between;  z-index: 5555;} */
/* .partner-swiper .controll .swiper-button-prev:after {display: none;} */
/* .partner-swiper .controll .swiper-button-next:after {display: none;} */
/* .swiper-button-next{transform: translateY(-50%); right: 0; width: 37.6px; height: 37.6px; margin-top: 0} */
/* .swiper-button-prev{transform: translateY(-50%) rotate(180deg); left: 0; width: 37.6px; height: 37.6px; margin-top: 0} */
/* .swiper-button-prev, .swiper-button-next{width: 37.6px; height: 37.6px;} */

@media screen and (min-width: 1920px) {
}
@media (hover: hover) {
    .swiper-button-prev:hover{opacity: 0.7;}
    .swiper-button-next:hover{opacity: 0.7;}
}

/* 태블릿/모바일 터치 지원 */
@media (hover: none) and (pointer: coarse) {
    .swiper-button-prev:active,
    .swiper-button-prev.touch-active,
    .swiper-button-next:active,
    .swiper-button-next.touch-active{opacity: 0.7;}
    .swiper-button-prev,
    .swiper-button-next{touch-action: manipulation;}
}

/* tech */
.tech{padding: 136px 0 215px; position: relative; overflow: hidden;}
.tech>img{width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover;}
.tech .container--wide{position: relative; z-index: 1; display: flex; justify-content: flex-end;}
.tech .flex{flex-direction: column; color: #fff;}
.tech h2{font-size: 40px; font-weight: 500; line-height: 1.25; margin: 15px 0 66px;}
.tech h2 span{display: block; font-weight: 700;}
.tech .link-btn.ver2{gap: 17.3px; min-width: 171px; background: rgba(0,0,0,0); backdrop-filter: blur(30px) brightness(1.5);}

/* tech-menu */
.tech .title{color: #6A6A6A;}
.tech-menu-cover{background: #F9F9F9;}
.tech-menu{margin-top: -143px;}
.tech-menu ul{display: grid; grid-template-columns: repeat(5,1fr); gap: 13px;}
.tech-menu ul li{position: relative; box-shadow: 10px 10px 19px rgba(107,123,155,.24); border-radius: 25px; background: #fff; height: 329px; transition: all .4s;}
.tech-menu ul li a{padding: 21px 21px 31px 22px; height: 100%; display: flex; flex-direction: column;}
.tech-menu ul .flex{justify-content: flex-end; margin: 0 0 auto;}
.tech-menu ul .flex .img-box{display: flex; align-items: center; justify-content: center; width: 96px; height: 96px ; background-color: #EBF2FB; border-radius: 48px;}
.tech-menu ul b{font-size: 24px; line-height: 1.3;}
.tech-menu ul p{font-size: 15px; line-height: 1.3; margin: 0 0 17px; color: #2D8FFF;}
.tech-menu ul span{display: block; color: #fff; font-weight: 300; display: none; margin: 21px 0 0;}

@media screen and (min-width: 1399px) {
    @media (hover: hover) {
        .tech-menu ul li:hover{background: #2D8FFF; color: #fff; margin-top: -35px;}
        .tech-menu ul li:hover .flex .img-box{background: #247ADC;}
        .tech-menu ul li:hover p{display: none;}
        .tech-menu ul li:hover span{display: block;}
        .tech-menu ul li:nth-child(1):hover .flex .img-box img{content: url(../images/main/sub-visual-1.png);}
        .tech-menu ul li:nth-child(2):hover .flex .img-box img{content: url(../images/main/sub-visual-2.png);}
        .tech-menu ul li:nth-child(3):hover .flex .img-box img{content: url(../images/main/sub-visual-3.png);}
        .tech-menu ul li:nth-child(4):hover .flex .img-box img{content: url(../images/main/sub-visual-4.png);}
        .tech-menu ul li:nth-child(5):hover .flex .img-box img{content: url(../images/main/sub-visual-5.png);}
    }
    
    /* 태블릿/모바일 터치 지원 */
    /* @media (hover: none) and (pointer: coarse) {
        .tech-menu ul li:active,
        .tech-menu ul li.touch-active{background: #2D8FFF; color: #fff; margin-top: -35px;}
        .tech-menu ul li:active .flex .img-box,
        .tech-menu ul li.touch-active .flex .img-box{background: #247ADC;}
        .tech-menu ul li:active p,
        .tech-menu ul li.touch-active p{display: none;}
        .tech-menu ul li:active span,
        .tech-menu ul li.touch-active span{display: block;}
        .tech-menu ul li:nth-child(1):active .flex .img-box img,
        .tech-menu ul li:nth-child(1).touch-active .flex .img-box img{content: url(../images/main/sub-visual-1.png);}
        .tech-menu ul li:nth-child(2):active .flex .img-box img,
        .tech-menu ul li:nth-child(2).touch-active .flex .img-box img{content: url(../images/main/sub-visual-2.png);}
        .tech-menu ul li:nth-child(3):active .flex .img-box img,
        .tech-menu ul li:nth-child(3).touch-active .flex .img-box img{content: url(../images/main/sub-visual-3.png);}
        .tech-menu ul li:nth-child(4):active .flex .img-box img,
        .tech-menu ul li:nth-child(4).touch-active .flex .img-box img{content: url(../images/main/sub-visual-4.png);}
        .tech-menu ul li:nth-child(5):active .flex .img-box img,
        .tech-menu ul li:nth-child(5).touch-active .flex .img-box img{content: url(../images/main/sub-visual-5.png);}
        .tech-menu ul li{touch-action: manipulation;}
    } */
}


.last.section{background: #F9F9F9;}
.last.section .container--wide{padding: 0 0 211px;}
.last.section .top{margin: 0 0 65px; padding: 194px 0 0;}
.last.section .title{font-size: 23px; color: #B1B1B1;}
.last.section h2{font-size: 40px; margin: 0 auto 0 258px;}
.last.section h2 b{display: block;}
.last.section .link-btn{color: #757575; margin: 0; height: fit-content; margin: auto 0 0; background: initial; min-width: initial; flex-direction: row; min-height: initial; transform: initial !important}
.last.section .link-btn div{background: #B1B1B1; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%;}

.news-content {position: relative; overflow: visible;}
.news-content::before{content: ''; width: 1000vw; height: 100%; position: absolute; background-color: #f9f9f9; right: 100%; top: -1px; z-index: 10;}
.news-content .swiper-slide{width: fit-content !important;}
.news-content .item {transition: .3s ease; display: flex;}
.news-content .item .inner {display: flex; flex-direction: column; position: relative; width: 100%;}
.news-content .item .inner .img-box{position: relative;}
.news-content .item .inner .img-box::before{content: ''; width: 100%; height: 233px; background: rgba(255,255,255,.79); position: absolute; left: 0; top: 0; mix-blend-mode: saturation; z-index: 1;}
.news-content .item .inner .text-box{margin: 0; padding: 30px 19px 40px 18px; min-height: 185px;}
.news-content .item .inner .tit {color: #2D8FFF; font-size: 18px; font-weight: 700; margin: 0 0 6.5px 0;}
.news-content .item .inner .tit span{color: #B1B1B1; position: relative; margin: 0 0 0 20px;}
.news-content .item .inner .tit span::before{content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); height: 13px; width: 1px; background: #707070;}
.news-content .item .inner .tit .tag{margin: 0; color: #2D8FFF;}
.news-content .item .inner .tit .tag.blog{color: #1D32B9;}
.news-content .item .inner .tit .tag.newsletter{color: #00C4B6;}
.news-content .item .inner .tit .tag::before{display: none;}
.news-content .item .inner .desc {font-size: 23px; font-weight: 700; padding: 0 0 0 0; max-width: 314px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: inline-block;}
.news-content .item .inner .date{display: none; font-size: 15px; color: #B1B1B1; line-height: 1; margin-top: 15px;}
.news-content .swiper-slide-active .item .inner .img-box{clip-path: inset(0 0 0 0);}
.news-content .swiper-slide-active .text-box{margin: 0; width: 100%; background: #000;}
.news-content .swiper-slide-active .desc{color: #fff;}
.news-content .swiper-slide-active .item .inner .date{display: block;}
.news-content .swiper-slide-active .item .inner .img-box::before{opacity: 0;}
.news-content .swiper-slide-active .tit .tag{color: #fff !important;}
.news-content .swiper-slide-active .item .inner .tit span{color: #6A6A6A;}
.news-content .swiper-slide-active .item .inner .tit span::before{color: #6A6A6A;}

.news-content .controller {position: relative; height: 51px; z-index: 111; display: flex; gap: 21.5px; align-items: center; margin: -51px 0 0;}
.news-content .pagination {width: 855px; position: relative; display: block;}
.news-content .navigation {height: 51px; right: 0; display: flex; align-items: center; justify-content: center; margin: 0 59px 0 auto; position: relative;}
.news-content .swiper-pagination-progressbar{background: rgba(201,198,198,.27);}
.news-content .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: #878787;}
.news-content .navigation .swiper-button-next{right: -72.5px; transform: rotate(180deg) translateY(50%); margin-top: 0;}
.news-content .navigation .swiper-button-prev{left: -72.5px; margin-top: 0; transform: translateY(-50%);}
.news-content .navigation .swiper-button-prev, .news-content .navigation .swiper-button-next{width: 51px; height: 51px;}
.news-content .navigation .swiper-button-next:after, 
.news-content .navigation .swiper-button-prev:after {display: none;}

@media (hover: hover) {
    .last.section .link-btn:hover{opacity: .6;}
}

/* 태블릿/모바일 터치 지원 */
@media (hover: none) and (pointer: coarse) {
    .last.section .link-btn:active,
    .last.section .link-btn.touch-active{opacity: .6;}
    .last.section .link-btn{touch-action: manipulation;}
}


/* news */
/* .news{padding: 337px 0 162.9px;}
.news .container--wide>.flex{justify-content: space-between;}
.news .left{display: flex; flex-direction: column;}
.news .left p{font-size: 40px; margin: 28px 0 auto;}
.news .left p span{display: block; font-weight: bold;}

.news .right ul{display: flex; flex-direction: column; gap: 40px; padding: 56.5px 0 20px; border-bottom: 1px solid #D1D1D1;}
.news .right li{display: flex; align-items: center; position: relative; width: 835px;}
.news .right li::before{content: ''; width: 100%; height: 1px; background: #D1D1D1; position: absolute; left: 0; top: -20px;}
.news .right li:first-child::before{height: 2px;}
.news .right li>div{margin: 0 auto 0 33.5px;}
.news .right li .flex{font-size: 18px; gap: 21px;}
.news .right li .flex p{color: #264197; font-weight: bold; position: relative;}
.news .right li .flex p::after{content: ''; width: 1px; height: 13px; background: #707070; position: absolute; right: -10px; top: 50%; transform: translateY(-50%);}
.news .right li .flex span{color: #B1B1B1;}
.news .right li>div b{font-size: 23px; line-height: 1.478; margin: 28.5px 0 0; display: block;}

@media (hover: hover) {
    .news .right li a:hover{opacity: .7;}
} */

@media screen and (max-width: 1830px) {
    .product .typo{max-width: 600px; mask-size: 100%;}
}

@media screen and (max-width: 1600px) {
    .product .typo{max-width: 460px;}
    .product .flex>div:not(.container--wide){min-height: initial; max-height: 840px;}
}
@media screen and (max-width: 1500px) {
    .news-content .pagination{width: 755px;}
}
@media screen and (max-width: 1399px) {
    .main-visual{max-height: 680px; padding-top: 59px;}
    .main-visual .img-box{margin: 200px 0 0;}
    .main-visual .img-box img{max-width: 300px;}
    .main-visual h1{font-size: 90px;}
    .main-visual-nav{bottom: 40px;}

    .company .slogan{font-size: 32px;}
    .company video{min-height: auto; margin: -100px 0 0;}

    
    .product .container--wide{justify-content: flex-start; padding: 140px 0;}
    .product>.flex{flex-direction: column;}
    .product .flex>div:not(.container--wide){min-height: 900px;}
    .product .flex>.last-video:not(.container--wide){width: 100%;}
    .product .typo-box{margin: 270px 0 0;}
    .product p{font-size: 32px;}
    .tech-menu ul span{font-size: 12px; margin: auto 0 0;}

    .tech h2{font-size: 32px;}
    .tech-menu ul{grid-template-columns: repeat(3, 1fr);}
    .tech-menu ul li{height: auto; text-align: center; word-break: keep-all;}
    .tech-menu ul li a{padding: 16px;}
    .tech-menu ul .flex{margin: 0 auto 20px;}
    .tech-menu ul b{font-size: 16px;}
    .tech-menu ul p{font-size: 12px;}
    .tech-menu ul span{display: block; color: #000; margin-top: 10px; font-size: 14px;}

    .last.section .top{flex-direction: column;}
    .last.section h2{margin: 15px 0 -32px; font-size: 32px;}
    .last.section .link-btn{margin: auto 0 0 auto;}

    .last.section .container--wide{padding: 0 0 100px;}
    .news-content .controller{margin: 20px 0 0;}
    .news-content .navigation{width: 100%; margin: 0;}
    .news-content .navigation .swiper-button-prev, .news-content .navigation .swiper-button-next{width: 30px; height: 30px;}
    .news-content .navigation .swiper-button-next{right: 0;}
    .news-content .navigation .swiper-button-prev{left: 0;}
    .news-content .pagination{width: calc(100% - 100px);}
}
@media screen and (max-width: 767px) {
    .title{font-size: 16px;}

    video{display: none;}
    video.mo{display: block;}
    .main-visual{padding-top: 50px; max-height: initial; text-align: center;}
    .main-visual .img-box{margin: auto auto 0;}
    .main-visual .container--wide .flex{padding-block: 80px 40px;}
    .main-visual h1{font-size: 74px;}
    .main-visual p{font-size: 28px;}
    .main-visual-nav{bottom: 64px;}

    .company{padding: 90px 0 0;}
    .company .slogan{font-size: 20px; margin: 22px 0 51px;}
    .company .slogan span{display: inline;}
    .company video{margin: -80% 0 0;}
    .link-btn.ver2{font-size: 14px; min-width: 110px; min-height: 35px; gap: 10px;}
    .link-btn.ver2 svg{max-width: 15px;}

    .product .container--wide{padding: 90px 0 27px;}
    .product p{font-size: 20px; margin: 22px 0 51px;}
    .product .typo-box{margin: auto 0 0;}
    .product .typo{max-width: 100%;}
    .product .container--wide{top: 0; transform: translateX(-50%); height: 59.8%;}
    .product .flex>div:not(.container--wide){min-height: 162vw;}
    .product .flex>.last-video:not(.container--wide){min-height: initial; height: initial; max-height: initial;}
    .product .flex>.last-video:not(.container--wide) video{position: initial;}

    .tech{text-align: center; padding: 90px 0 420px;}
    .tech>img{content: url(../images/main/tech-mo.png);}
    .tech .container--wide{justify-content: center;}
    .tech h2{font-size: 20px; margin: 22px 0 51px;}
    .tech .link-btn.ver2{margin: auto; min-width: 130px; gap: 10px;}
    .tech-menu ul{grid-template-columns: repeat(2,1fr); justify-content: center;}
    .tech-menu ul li{max-width: 330px; margin: auto; width: 100%;}
    .tech-menu ul p{display: none;}

    .last.section{text-align: center;}
    .last.section .container--wide{padding: 0 0 120px;}
    .last.section .top{padding: 90px 0 0; margin: 0 0 40px;}
    .last.section .title{font-size: 16px;}
    .last.section h2{font-size: 20px; margin: 22px 0 51px;}
    .last.section .link-btn{margin: auto; font-size: 16px;}
    .last.section .link-btn div{width: 18px; height: 18px;}
    .last.section .link-btn svg{max-width: 14px;}

    .news-content{margin-left: -15px;}
    .news-content .swiper-wrapper{padding-left: 15px;}
    .news-content .swiper-slide-active .text-box{position: initial; background: initial;}
    .news-content .swiper-slide-active .desc{color: #000;}
    .news-content .swiper-slide-active .item .inner .img-box::before{opacity: 0;}
    .news-content .swiper-slide{width: 50% !important; min-width: 241px;}
    .news-content .item .inner .text-box{text-align: left; margin: 0; padding: 20px 15px;}
    .news-content .item .inner .tit{font-size: 16px; margin: 0 0 10px;}
    .news-content .item .inner .desc{font-size: 20px; max-width: 100%;}
    .news-content .item .inner .img-box::before{height: 100%;}
    .news-content .swiper-slide-active .tit .tag{color: #000 !important;}
    
    .news-content .navigation{margin: 0 0 0 15px;}
}
@media screen and (max-width: 500px) {
    .tech-menu ul{grid-template-columns: 1fr;}
}

/* Base */
@media (hover: hover) {}
@media screen and (max-width: 1399px) {}
@media screen and (max-width: 767px) {}