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

#sub_title{position: relative; height: 80px;}
.sub_list ul{display: flex; width: 300px; justify-content: space-between; margin: 90px 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:nth-child(3) a::after{display: block;}

#detailTop{width: 60%; margin: 3.5% auto;}
.detail_info{display: flex; justify-content: space-between;}
.detail_info_img{width: 49%;}
.detail_info_img img{width: 100%;}
.detail_info_text{display: flex; flex-direction: column; justify-content: space-between; width: 50%; position: relative; padding-left: 5%;}
.detail_info_text .page_title{font-weight: bold; font-size: 2.5em;}
.detail_wrap{flex-grow: 1;}
.detail_wrap>li{margin: 5%;}
.detail_info h3{font-size: 1.1em; font-weight: bold;}
.detail_info ul{margin-bottom: 20px;}
.detail_description{display: flex;}
.detail_description h3{margin-right: 20px;}
.detail_colorchip{display: flex;}
.detail_colorchip ul{display: flex; margin-left: 20px;}
.detail_colorchip li .detail_color{display: flex;}
.detail_colorchip li p{padding-left: 10px;}

.detail_border{margin-right: 15px; box-sizing: border-box; border: 2px solid rgba(0,0,0,0); }
.detail_border img{width: 100%;}
.detail_border:hover{border: 2px solid #0000C8;}

.detail_size{display: flex;}
.detail_size ul{display: flex;}
.detail_size ul li{margin-left: 10px; box-sizing: border-box; border: 3px solid rgba(0,0,0,0); padding: 10px 20px;}
.detail_size ul li a{color: #000; font-weight: bold;}
.detail_size ul li:hover{border: 3px solid #0000C8;}

.detail_price{display: flex;}
.detail_price p{font-size: 2em; font-weight: bold; color: #00857B; padding-left: 30px; padding-bottom: 30px;}

.detail_info .btn_wrap{display: flex;}
.detail_info .btn_wrap a:first-child{border-right: none;}
.detail_info .btn_wrap a{display: block; width: 40%;  line-height: 3em; text-align: center; color: #000; border: 1px solid #000; box-sizing: border-box; transition-duration: 0.5s; }
.detail_info .btn_wrap a:hover{color:#FFF; background-color: #000;}

#detailMid{position: relative; width: 70%; margin: 50px auto;}
#detailMid .detail_con ul{position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
#detailMid .detail_con ul li{width: 50%;}
.detail_con img{width: 100%;}

#detailBottom{position: relative; width: 100%; margin: 0 auto; padding: 30px 0;}
.detail_cut h3{text-align: center; font-weight:  bold; font-size: 1.3em; margin: 10px 0;} 
.detail_cut ul{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 80%; margin: 0 auto;}
.detail_cut ul li{position: relative; width: 49%; margin-bottom: 10px;}
.detail_cut ul li img{width: 100%;}
.detail_cut ul li p{font-size: 1em; padding-left: 10px;}
.detail_cut .hidden{line-height: 50px;}
.detail_cut ul li div{position: absolute; left: 0; bottom: 0;width: 100%; height: 50px; background-color: rgba(255, 255, 255, 0.5);}


.recommend{position: relative; width: 80%; margin: 10%;}
.recommend h3{font-size: 1.5em; font-weight: 700; margin-bottom: 30px; padding-left: 30px;}
.recommend ul{display: flex; justify-content: space-evenly; align-items: center;}
.recommend ul li{position: relative; width: 18%;}
.recommend ul li img{width: 100%;}
.recommend ul li a{color: #000; }
.over_text{position: absolute; left: 0;top: 0; opacity: 0; transition-duration: 0.6s; width: 100%; height: 100%;  background-color: rgba(255, 255, 255, 0.8)}
.recommend ul li:hover .over_text{ opacity: 1;}
.recommend ul li a h4{position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); font-weight: bold;}
.material-icons{font-weight: 20px;}