@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");
/* font-family: 'Pretendard', sans-serif; */

@media screen and (min-width:1201px) {
/* topBanner */
#topBanner{position: relative; background-color: #000; height: calc(100vh + 60px); overflow: hidden;}
#topBanner video{opacity: 0.7;}
#topBanner .top_text{position: absolute; top: 50%; transform: translateY(-50%); left: 8%; opacity: 0;}
#topBanner .top_text h2{font-size: 64px; color: #fff; line-height: 1.5em;}
#topBanner .top_text p{font-size: 24px; color: #fff; margin-top: 34px;}


/* neuromeka */
#neuromeka{position: relative; padding: 168px 8% 127px 8%; background-color: #000; display: flex; justify-content: space-between;}
#neuromeka>div{width: 40%;}
#neuromeka .neuromeka_text{width: 52%; padding-top: 95px;}
#neuromeka .con_title{font-size: 52px;}
#neuromeka h4{font-size: 24px; color: #fff; margin-bottom: 32px; line-height: 1.6em;}
#neuromeka .more_btn{margin-top: 84px;}


/* product */
#product{position: relative; padding: 127px 0 127px 8%; background-color: #000; overflow: hidden;}
#product h2{margin-bottom: 78px;}
#product .more_btn2{margin-bottom: 32px;}
#product .product_left{float: left; padding: 9% 0 0 9%; position: relative; top: -50px; opacity: 0;}
#product .product_sort li{margin-bottom: 44px; position: relative;}
#product .product_sort li button{position: relative; font-size: 32px; font-weight: 700; color: #4D4D4D;}
#product .product_sort li button::after{content: ''; display: block; position: absolute; width: 100%; height: 100%; box-shadow: 0 0 6px 3px rgba(0, 140, 255, 1); opacity: 0; top: 50%; transform: translateY(-50%); left: 0; transition-duration: 0.1s;}
#product .product_sort li button:hover::after{opacity: 1;}
#product .product_sort li.select button{color: #fff;}
#product .product_sort li.select button::before{content: ''; display: block; width: 14px; height: 14px; border-radius: 8px; background-color: #008CFF; position: absolute; left: -32px; top: 50%; transform: translateY(-50%);}

#product .product_right{float: right; width: 55%; overflow: hidden; position: relative; top: -50px; opacity: 0;}
#product .product_list{position: relative; display: flex; width: 360%; justify-content: space-between;}
#product .product_list li{position: relative; width: 16.166%; transition-duration: 0.3s;}

#product .product_list li h3{opacity: 0.1; transition-duration: 0.3s;}
#product .product_list li p{opacity: 0.1; transition-duration: 0.3s;}
#product .product_list li img{opacity: 0.1; transition-duration: 0.3s;}
#product .product_list li.select h3{opacity: 1; transition-duration: 0.3s;}
#product .product_list li.select p{opacity: 1; transition-duration: 0.3s;}
#product .product_list li.select img{opacity: 1; transition-duration: 0.3s;}

#product .product_list li a{display: flex; width: 100%; height: 100%; background: linear-gradient(360deg, rgba(12,12,12,1) 0%, rgba(12,12,12,0) 100%); border-radius: 16px; flex-direction: column; justify-content: space-between;}
#product .product_list li a::after{content: ''; position: absolute; width: 100%; height: 100%; border: 2px solid #008CFF; transition-duration: 0.2s; opacity: 0; top: 50%; transform: translateY(-50%); left: 0; border-radius: 16px; box-sizing: border-box;}
#product .product_list li a:hover::after{opacity: 1;}
#product .product_list li a img{width: 100%;}
#product .product_title{padding: 48px 0 0 48px;}
#product .product_title h3{font-size: 3vw; font-weight: 700; color: #fff; margin-bottom: 12px;}
#product .product_title p{font-size: 20px; color: #646464;}
#product::after{content: ''; display: block; clear: both;}


/* service */
#service{position: relative; background-color: #000;}
#service .service_title{padding: 127px 0 0 8%; margin-bottom: 115px;}
#service .service_list{display: flex; background: linear-gradient(360deg, rgba(12,12,12,1) 0%, rgba(12,12,12,0) 100%);;}
#service .service_list>a{position: relative; display: block; width: 50%; height: 867px; border-right: 1.5px solid #0E0E0E; box-sizing: border-box; border-top: 1.5px solid #0E0E0E;}
#service .service_list>a>div{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%;}
#service .service_list a .service_bg{width: 0%;}
#service .service_list>a:first-child>.service_bg{background-image: url(../img/service0.jpg); background-size: cover; background-position: center;}
#service .service_list>a:nth-child(2)>.service_bg{background-image: url(../img/service1.jpg); background-size: cover; background-position: center;}
#service .service_text{position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center;}
#service .service_text span{position: relative; font-size: 20px; margin-bottom: 4px; top: 0;}
#service .service_text h3{position: relative; font-size: 36px; top: 0;}
#service .service_text p{position: relative; font-size: 20px; top: 50px; opacity: 0;}


/* cases */
#cases{position: relative; padding: 179px 0 200px 0; background-color: #F9F9F9; overflow: hidden;}
#cases .cases_title{padding: 0 8%;}
#cases .con_title{color: #000; margin-bottom: 48px;}
#cases .more_btn2{color: #000; margin-bottom: 84px;}
#cases .cases_swiper{width: 84%; margin: 0 auto;}
#cases .cases_list{display: flex; width: 180%; position: relative; top: 50px; opacity: 0; overflow: visible;}
#cases .case_img{position: relative; border-radius: 8px; margin-bottom: 18px; box-sizing: border-box;}
#cases .cases_list img{width: 100%; position: relative; border-radius: 8px;}
#cases .cases_list span{font-size: 16px; color: #000;}
#cases .cases_list h4{margin-top: 12px; font-size: 20px; color: #000;}
#cases .case_bottom{margin-top: 110px; display: flex; align-items: center; padding-left: 8%;}
#cases .case_bottom .cases_next{margin: 0 52px 0 24px;}

/* news */
#news{position: relative; padding: 179px 8% 200px 8%;}
#news .con_title{color: #000; margin-bottom: 84px;}
#news .news_list{width: 100%;}
#news .news_list li{width: 100%; border-top: 1px solid #eee; padding: 36px 0; display: flex; justify-content: space-between;}
#news .news_list li a{color: #000; font-size: 20px;}
#news .news_list li span{font-size: 16px; color: #646464;}
#news .news_list .news_btn a{margin-left: auto;}
}





@media screen and (min-width:901px) and (max-width:1200px) {
/* topBanner */
#topBanner{position: relative; background-color: #000; height: calc(100vh + 60px); overflow: hidden;}
#topBanner video{opacity: 0.7;}
#topBanner .top_text{position: absolute; top: 50%; transform: translateY(-50%); left: 8%;}
#topBanner .top_text h2{font-size: 52px; color: #fff; line-height: 1.5em;}
#topBanner .top_text p{font-size: 24px; color: #fff; margin-top: 34px;}


/* neuromeka */
#neuromeka{position: relative; padding: 168px 8% 127px 8%; background-color: #000; display: flex; justify-content: space-between;}
#neuromeka>div{width: 40%;}
#neuromeka .neuromeka_text{width: 50%; padding-top: 95px;}
#neuromeka .con_title{font-size: 40px;}
#neuromeka h4{font-size: 24px; color: #fff; margin-bottom: 32px; line-height: 1.6em;}
#neuromeka .more_btn{margin-top: 84px;}


/* product */
#product{position: relative; padding: 127px 0 127px 8%; background-color: #000; overflow: hidden;}
#product h2{margin-bottom: 78px; font-size: 32px;}
#product .more_btn2{margin-bottom: 32px;}
#product .product_left{float: left; padding: 9% 0 0 9%;}
#product .product_sort li{margin-bottom: 44px; position: relative;}
#product .product_sort li button{position: relative; font-size: 24px; font-weight: 700; color: #4D4D4D;}
/* #product .product_sort li button::after{content: ''; display: block; position: absolute; width: 100%; height: 100%; box-shadow: 0 0 6px 3px rgba(0, 140, 255, 1); opacity: 0; top: 50%; transform: translateY(-50%); left: 0; transition-duration: 0.2s;}
#product .product_sort li button:hover::after{opacity: 1;} */
#product .product_sort li.select button{color: #fff;}
#product .product_sort li.select button::before{content: ''; display: block; width: 14px; height: 14px; border-radius: 8px; background-color: #008CFF; position: absolute; left: -32px; top: 50%; transform: translateY(-50%);}

#product .product_right{float: right; width: 55%; overflow: hidden;}
#product .product_list{position: relative; display: flex; width: 480%; justify-content: space-between;}
#product .product_list li{position: relative; width: 16.166%; transition-duration: 0.3s;}

#product .product_list li h3{opacity: 0.1; transition-duration: 0.3s;}
#product .product_list li p{opacity: 0.1; transition-duration: 0.3s;}
#product .product_list li img{opacity: 0.1; transition-duration: 0.3s;}
#product .product_list li.select h3{opacity: 1; transition-duration: 0.3s;}
#product .product_list li.select p{opacity: 1; transition-duration: 0.3s;}
#product .product_list li.select img{opacity: 1; transition-duration: 0.3s;}

#product .product_list li a{display: flex; width: 100%; height: 100%; background: linear-gradient(360deg, rgba(12,12,12,1) 0%, rgba(12,12,12,0) 100%); border-radius: 16px; flex-direction: column; justify-content: space-between;}
#product .product_list li a::after{content: ''; position: absolute; width: 100%; height: 100%; border: 2px solid #008CFF; transition-duration: 0.2s; opacity: 0; top: 50%; transform: translateY(-50%); left: 0; border-radius: 16px; box-sizing: border-box;}
#product .product_list li a:hover::after{opacity: 1;}
#product .product_list li a img{width: 100%;}
#product .product_title{padding: 48px 0 0 32px;}
#product .product_title h3{font-size: 40px; font-weight: 700; color: #fff; margin-bottom: 12px;}
#product .product_title p{font-size: 20px; color: #646464;}
#product::after{content: ''; display: block; clear: both;}


/* service */
#service{position: relative; background-color: #000;}
#service .service_title{padding: 127px 0 0 8%; margin-bottom: 115px;}
#service .service_list{display: flex;}
#service .service_list>a{position: relative; display: block; width: 50%; height: 650px;}
#service .service_list>a>div{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%;}
#service .service_list>a:first-child>div{background-image: url(../img/service0.jpg); background-size: cover; background-position: center;}
#service .service_list>a:nth-child(2)>div{background-image: url(../img/service1.jpg); background-size: cover; background-position: center;}
#service .service_text{position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center;}
#service .service_text span{font-size: 16px; margin-bottom: 4px;}
#service .service_text h3{font-size: 32px; margin-bottom: 32px;}
#service .service_text p{font-size: 16px;}


/* cases */
#cases{position: relative; padding: 179px 0 200px 0; background-color: #F9F9F9; overflow: hidden;}
#cases .cases_title{padding: 0 8%;}
#cases .con_title{color: #000; margin-bottom: 48px;}
#cases .more_btn2{color: #000; margin-bottom: 84px;}
#cases .cases_swiper{width: 84%; margin: 0 auto;}
#cases .cases_list{display: flex; width: 300%;}
#cases .cases_list img{border-radius: 8px; margin-bottom: 18px; width: 100%;}
#cases .cases_list span{font-size: 16px; color: #4D4D4D;}
#cases .cases_list h4{margin-top: 12px; font-size: 20px; color: #000;}
#cases .case_bottom{margin-top: 110px; display: flex; align-items: center; padding-left: 8%;}
#cases .case_bottom .cases_next{margin: 0 52px 0 24px;}
#cases .cases_pager{position: relative; width: 80%; height: 2px; background-color: #BBBBBB;}


/* news */
#news{position: relative; padding: 179px 8% 200px 8%;}
#news .con_title{color: #000; margin-bottom: 84px;}
#news .news_list{width: 100%;}
#news .news_list li{width: 100%; border-top: 1px solid #eee; padding: 36px 0; display: flex; justify-content: space-between;}
#news .news_list li a{color: #000; font-size: 16px;}
#news .news_list li span{font-size: 16px; color: #646464;}
#news .news_list .news_btn a{margin-left: auto;}
}





@media screen and (min-width:601px) and (max-width:900px) {
    /* topBanner */
#topBanner{position: relative; background-color: #000; height: calc(100vh + 60px); overflow: hidden;}
#topBanner video{opacity: 0.7;}
#topBanner .top_text{position: absolute; top: 50%; transform: translateY(-50%); left: 4%; width: 84%;}
#topBanner .top_text h2{font-size: 24px; color: #fff; line-height: 1.5em;}
#topBanner .top_text p{font-size: 16px; color: #fff; margin-top: 34px;}


/* neuromeka */
#neuromeka{position: relative; padding: 80px 4% 36px 4%; background-color: #000;}
#neuromeka .neuromeka_text{padding-top: 24px;}
#neuromeka .con_title{font-size: 24px;}
#neuromeka h4{font-size: 20px; color: #fff; margin-bottom: 32px; line-height: 1.6em;}
#neuromeka .more_btn{margin-top: 45px;}


/* product */
#product{position: relative; padding: 72px 0 36px 4%; background-color: #000; overflow: hidden;}
#product h2{margin-bottom: 24px; font-size: 24px;}
#product .more_btn2{margin-bottom: 48px;}
#product .product_left{width: 125%;}
#product .product_sort{display: flex; margin-bottom: 16px; position: relative; gap: 0 3%;}
#product .product_sort li{position: relative;}
#product .product_sort li button{display: block; position: relative; font-size: 20px; font-weight: 700; color: #4D4D4D;}
/* #product .product_sort li button::after{content: ''; display: block; position: absolute; width: 100%; height: 100%; box-shadow: 0 0 6px 3px rgba(0, 140, 255, 1); opacity: 0; top: 50%; transform: translateY(-50%); left: 0; transition-duration: 0.2s;}
#product .product_sort li button:hover::after{opacity: 1;} */
#product .product_sort li.select button{color: #fff;}
#product .product_sort li.select button{color: #008CFF;}

#product .product_list{position: relative; display: flex; width: 480%; justify-content: space-between;}
#product .product_list li{position: relative; width: 16.166%; transition-duration: 0.3s;}

#product .product_list li h3{opacity: 0.1; transition-duration: 0.3s;}
#product .product_list li p{opacity: 0.1; transition-duration: 0.3s;}
#product .product_list li img{opacity: 0.1; transition-duration: 0.3s;}
#product .product_list li.select h3{opacity: 1; transition-duration: 0.3s;}
#product .product_list li.select p{opacity: 1; transition-duration: 0.3s;}
#product .product_list li.select img{opacity: 1; transition-duration: 0.3s;}

#product .product_list li a{display: flex; width: 100%; height: 100%; background: linear-gradient(360deg, rgba(12,12,12,1) 0%, rgba(12,12,12,0) 100%); border-radius: 16px; flex-direction: column; justify-content: space-between;}
#product .product_list li a::after{content: ''; position: absolute; width: 100%; height: 100%; border: 2px solid #008CFF; transition-duration: 0.2s; opacity: 0; top: 50%; transform: translateY(-50%); left: 0; border-radius: 16px; box-sizing: border-box;}
#product .product_list li a:hover::after{opacity: 1;}
#product .product_list li a img{width: 100%;}
#product .product_title{padding: 48px 0 0 32px; }
#product .product_title h3{font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 12px;}
#product .product_title p{font-size: 16px; color: #646464;}
#product::after{content: ''; display: block; clear: both;}


/* service */
#service{position: relative; background-color: #000;}
#service .service_title{padding: 36px 0 0 4%; margin-bottom: 36px;}
#service .service_title .con_title{font-size: 24px;}
#service .service_list>a{position: relative; display: block; height: 500px;}
#service .service_list>a>div{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%;}
#service .service_list>a:first-child>div{background-image: url(../img/service0.jpg); background-size: cover; background-position: center;}
#service .service_list>a:nth-child(2)>div{background-image: url(../img/service1.jpg); background-size: cover; background-position: center;}
#service .service_text{position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center;}
#service .service_text span{font-size: 16px; margin-bottom: 4px;}
#service .service_text h3{font-size: 32px; margin-bottom: 32px;}
#service .service_text p{font-size: 16px;}


/* cases */
#cases{position: relative; padding: 72px 0 72px 0; background-color: #F9F9F9; overflow: hidden;}
#cases .cases_title{padding: 0 4%;}
#cases .con_title{color: #000; margin-bottom: 36px;}
#cases .more_btn2{color: #000; margin-bottom: 32px;}
#cases .cases_swiper{width: 92%; margin: 0 auto;}
#cases .cases_list{display: flex; width: 588%}
#cases .cases_list>div{width: 15%;}
#cases .cases_list img{border-radius: 8px; margin-bottom: 18px; width: 100%;}
#cases .cases_list span{font-size: 16px; color: #4D4D4D;}
#cases .cases_list h4{margin-top: 12px; font-size: 20px; color: #000;}
#cases .case_bottom{display: none;}


/* news */
#news{position: relative; padding: 72px 4% 72px 4%;}
#news .con_title{color: #000; margin-bottom: 24px;}
#news .news_list{width: 100%;}
#news .news_list li{width: 100%; border-top: 1px solid #eee; padding: 20px 0; display: flex; justify-content: space-between;}
#news .news_list li a{color: #000; font-size: 16px;}
#news .news_list li span{font-size: 16px; color: #646464;}
#news .news_list .news_btn a{margin-left: auto;}
}








@media screen and (max-width:600px) {
        /* topBanner */
#topBanner{position: relative; background-color: #000; height: calc(100vh + 60px); overflow: hidden;}
#topBanner video{opacity: 0.7;}
#topBanner .top_text{position: absolute; top: 50%; transform: translateY(-50%); left: 4%; width: 84%;}
#topBanner .top_text h2{font-size: 24px; color: #fff; line-height: 1.5em;}
#topBanner .top_text p{font-size: 16px; color: #fff; margin-top: 34px;}


/* neuromeka */
#neuromeka{position: relative; padding: 80px 4% 36px 4%; background-color: #000;}
#neuromeka .neuromeka_text{padding-top: 24px;}
#neuromeka .con_title{font-size: 24px;}
#neuromeka h4{font-size: 20px; color: #fff; margin-bottom: 32px; line-height: 1.6em;}
#neuromeka .more_btn{margin-top: 45px;}


/* product */
#product{position: relative; padding: 72px 0 36px 4%; background-color: #000; overflow: hidden;}
#product h2{margin-bottom: 24px; font-size: 24px;}
#product .more_btn2{margin-bottom: 48px;}
#product .product_left{width: 200%;}
#product .product_sort{display: flex; margin-bottom: 16px; position: relative; gap: 0 3%; width: 100%;}
#product .product_sort li{position: relative;}
#product .product_sort li button{position: relative; font-size: 18px; font-weight: 700; color: #4D4D4D;}
/* #product .product_sort li button::after{content: ''; display: block; position: absolute; width: 100%; height: 100%; box-shadow: 0 0 6px 3px rgba(0, 140, 255, 1); opacity: 0; top: 50%; transform: translateY(-50%); left: 0; transition-duration: 0.2s;}
#product .product_sort li button:hover::after{opacity: 1;} */
#product .product_sort li.select button{color: #fff;}
#product .product_sort li.select button{color: #008CFF;}

#product .product_list{position: relative; display: flex; width: 600%; justify-content: space-between;}
#product .product_list li{position: relative; width: 16.066%; transition-duration: 0.3s;}

#product .product_list li h3{opacity: 0.1; transition-duration: 0.3s;}
#product .product_list li p{opacity: 0.1; transition-duration: 0.3s;}
#product .product_list li img{opacity: 0.1; transition-duration: 0.3s;}
#product .product_list li.select h3{opacity: 1; transition-duration: 0.3s;}
#product .product_list li.select p{opacity: 1; transition-duration: 0.3s;}
#product .product_list li.select img{opacity: 1; transition-duration: 0.3s;}

#product .product_list li a{display: flex; width: 100%; height: 100%; background: linear-gradient(360deg, rgba(12,12,12,1) 0%, rgba(12,12,12,0) 100%); border-radius: 16px; flex-direction: column; justify-content: space-between;}
#product .product_list li a::after{content: ''; position: absolute; width: 100%; height: 100%; border: 2px solid #008CFF; transition-duration: 0.2s; opacity: 0; top: 50%; transform: translateY(-50%); left: 0; border-radius: 16px; box-sizing: border-box;}
#product .product_list li a:hover::after{opacity: 1;}
#product .product_list li a img{width: 100%;}
#product .product_title{padding: 30px 0 0 26px;}
#product .product_title h3{font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 12px;}
#product .product_title p{font-size: 16px; color: #646464;}
#product::after{content: ''; display: block; clear: both;}


/* service */
#service{position: relative; background-color: #000;}
#service .service_title{padding: 36px 0 0 4%; margin-bottom: 24px;}
#service .service_list>a{position: relative; display: block; height: 325px;}
#service .service_list>a>div{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%;}
#service .service_list>a:first-child>div{background-image: url(../img/service0.jpg); background-size: cover; background-position: center;}
#service .service_list>a:nth-child(2)>div{background-image: url(../img/service1.jpg); background-size: cover; background-position: center;}
#service .service_text{position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center;}
#service .service_text span{font-size: 16px; margin-bottom: 4px;}
#service .service_text h3{font-size: 20px; margin-bottom: 32px;}
#service .service_text p{display: none;}


/* cases */
#cases{position: relative; padding: 72px 0 48px 0; background-color: #F9F9F9; overflow: hidden;}
#cases .cases_title{padding: 0 4%;}
#cases .con_title{color: #000; margin-bottom: 12px;}
#cases .more_btn2{color: #000; margin-bottom: 36px;}
#cases .cases_swiper{width: 92%; margin: 0 auto;}
#cases .cases_list{display: flex; width: 588%;}
#cases .cases_list>div{width: 15%;}
#cases .cases_list img{border-radius: 8px; margin-bottom: 18px; width: 100%;}
#cases .cases_list span{font-size: 14px; color: #4D4D4D;}
#cases .cases_list h4{margin-top: 4px; font-size: 16px; color: #000;}
#cases .case_bottom{display: none;}

/* news */
#news{position: relative; padding: 48px 4% 48px 4%;}
#news .con_title{color: #000; margin-bottom: 24px;}
#news .news_list{width: 100%;}
#news .news_list li{width: 100%; border-top: 1px solid #eee; padding: 20px 0; display: flex; justify-content: space-between;}
#news .news_list li a{color: #000; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 70%;}
#news .news_list li span{font-size: 12px; color: #646464;}
#news .news_list .news_btn a{margin-left: auto; width: auto;}
}