@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&family=Noto+Sans+KR&display=swap');

#topBanner{position: relative; overflow: hidden;}
.con_title{position: absolute; left: 50%; top: 90%; transform: translate(-50%,-50%);font-weight: bold; font-size: 2.5em; color: #fff;}

#sub_title{position: relative; height: 80px; background-color: #eaf1fe; }
.sub_list ul{display: flex; width: 300px; justify-content: space-between; margin: 0 auto;}
.sub_list ul li a{line-height: 80px; font-size: 1.2em; font-weight: bold; color: #000; position: relative;}
.sub_list ul li a::after{content: ""; position: absolute; width: 100%; height: 3px; background-color:#00857B; bottom: -10px; left: 0; display: none;}
.sub_list ul li:hover a::after{display: block;}
.sub_list ul li:first-child a::after{display: block;}

#product{position: relative; background-color: #eaf1fa; padding:30px 0;}
.product_list ul{display: flex; flex-wrap: wrap; justify-content: space-between; width: 1440px; margin: 0 auto;}
.product_list li{width:24%; margin-bottom: 20px; position: relative;}
.product_list li img{width: 100%;}
.product_list li .over_box{position: absolute; left: 0; bottom: 0; opacity: 0; transition-duration: 0.6s;  background-color: #000;}
.product_list li .over_box img{opacity: 0.8;}
.product_list li:hover .over_box{ opacity: 1;}
.product_list li .over_box .over_text{position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #FFF;}
.product_list li .over_box .over_text h3{font-size: 2em;}
.product_list li .over_box .over_text .price{font-size: 1.5em;}

.page_num{position: relative; display: flex; width: 280px; margin: 0 auto;  justify-content: space-between; padding: 50px 0;}
.page_num ul{display: flex;}
.page_num::after{content: ""; position: absolute; width: 150px; height: 1px; background-color:#000; bottom: 50px; left: 50%; transform: translateX(-50%);}
.page_num ul li{position: absolute; color: #0000c5; font-size: 2em ; opacity: 0; left:50%;top: 50%; transform: translate(-50%,-50%);}
.page_num ul:hover li{opacity: 1;}
.page_num ul li:last-child{margin-right: 0;}

.prev_btn a ,.next_btn a{display: block; color: #000; font-size: 1.5em;}