/* ******************************************************************************************************************************************************************************** */ /* */ /* */ /* PC CSS */ /* */ /* */ /* ******************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ .sub_navi { width : 100%; height : auto; text-align : center; background-color : #f9f9f9; padding : 40px; } .sub_navi p.navititle { font-size : 30px; font-weight : 500; color : #99999990; margin-bottom : 20px; text-align : center; } .sub_navi .navi_ul { width : 100%; height : auto; display : flex; justify-content : center; margin : 0 auto; max-width : 1500px; align-items : center; flex-wrap: wrap; } .sub_navi .navi_ul .cate_degree { width : calc(100% / 12); height : auto; display : inline-block; float : left; margin : 3px; } .sub_navi .navi_ul .cate_degree .cate_href { width : 100%; height : auto; padding : 10%; text-align : center; display : inline-block; border-radius : 20px; } .sub_navi .navi_ul .cate_degree #bo_cate_on { background-color : #3a8afd; } .sub_navi .navi_ul .cate_degree #bo_cate_on .cate_name { color : #fff; } .sub_navi .navi_ul .cate_degree .cate_href .cate_logo { width : 100%; max-width : 50px; } .sub_navi .navi_ul .cate_degree .cate_href .cate_name { font-size : 13px; font-weight : 400; color : #666; margin-top : 5px; } .sub_navi .navi_ul .cate_degree .cate_href:hover { background-color : #3a8afd; } .sub_navi .navi_ul .cate_degree .cate_href:hover .cate_name { color : #fff; } /* A A A : A : A : A : */ #productList{ width : 100%; height : auto; text-align : center; padding : 0 2%; margin : 5% 0; } #productList .productListWrap { width : 100%; height : auto; max-width : 1300px; display : inline-block; } #productList .productListWrap .productBoxWrap { width : 100%; height : auto; display : grid; grid-template-columns : repeat(4,24.2%); justify-content : space-between; gap : 30px 0; } #productList .productListWrap .productBoxWrap .productBox { width : 100%; height : auto; border : 2px solid #b3b3b34f; padding : 5% 0; position : relative; transition : .4s; } #productList .productListWrap .productBoxWrap .productBox:hover { box-shadow : 0px 0px 15px 0px #dadada; transition : .4s; } #productList .productListWrap .productBoxWrap .productBox .labelBox { width : 32%; height : auto; position : absolute; top : 0; right : 0; } #productList .productListWrap .productBoxWrap .productBox .labelBox img { width : 100%; height : auto; } #productList .productListWrap .productBoxWrap .productBox .hoverBox { width : 100%; height : 68px; font-size : calc(16px + 0.8vw); position : relative; overflow : hidden; } #productList .productListWrap .productBoxWrap .productBox .detailGo { font-size : calc(12px + 0.3vw); background : #00105c; display : inline-block; opacity : 0; color : #fff; padding : 1% 8%; position : relative; transition : .4s; border-radius : 15px; } #productList .productListWrap .productBoxWrap .productBox:hover .detailGo { color : #fff; opacity : 1; transition : .4s; } #productList .productListWrap .productBoxWrap .productBox .detailGo:hover { color : #fff000; } #productList .productListWrap .productBoxWrap .productBox .productImgBox { width : 100%; height : auto; margin : 3% 0 0; } #productList .productListWrap .productBoxWrap .productBox .productImgBox img { width : 100%; height : auto; max-width : 260px; } #productList .productListWrap .productBoxWrap .productBox .productNameBox { width : 100%; height : auto; display : flex; align-items : center; justify-content : center; } #productList .productListWrap .productBoxWrap .productBox .productNameBox .productName { font-size : calc(14px + 0.3vw); font-weight : 600; line-height : 1em; margin-right : 3%; } #productList .productListWrap .productBoxWrap .productBox .productNameBox .productBrandLogo { width : calc(40px + 1vw); height : auto; } #productList .productListWrap .productBoxWrap .productBox .productNameBox .productBrandLogo img { width : 100%; height : auto; } #productList .productListWrap .productBoxWrap .productBox .hoverBox .productPrice { width : 100%; font-size : calc(16px + 0.3vw); color : #565454; position : absolute; bottom : 30%; left : 50%; transform : translateX(-50%); line-height : 1em; transition : .4s; } #productList .productListWrap .productBoxWrap .productBox:hover .hoverBox .productPrice { bottom : -100%; opacity : 0; transition : .4s; } #productList .productListWrap .productBoxWrap .productBox .hoverBox .productInstallment.hover { font-size : calc(15px + 0.6vw); font-weight : 600; color : #980000; width : 100%; position : absolute; bottom : -100%; left : 50%; transform : translateX(-50%); line-height : 1em; opacity : 0; transition : .4s; } #productList .productListWrap .productBoxWrap .productBox .hoverBox .productInstallment.hover span { font-size : calc(14px + 0.2vw); color : #000; font-weight : 400; } #productList .productListWrap .productBoxWrap .productBox:hover .hoverBox .productInstallment.hover { bottom : 0; opacity : 1; transition : .4s; } #productList .productListWrap .productBoxWrap .productBox .productPrice.mobile { display : none; } @media (min-width:641px) and (max-width:1024px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #productList .productListWrap .productBoxWrap { grid-template-columns : repeat(3,32.2%)} #productList .productListWrap .productBoxWrap .productBox .labelBox { width : 30%; } } @media (max-width:640px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #productList .productListWrap .productBoxWrap { grid-template-columns : 49% 49%; gap : 15px 0; } #productList .productListWrap .productBoxWrap .productBox { padding : 15% 0; } #productList .productListWrap .productBoxWrap .productBox .detailGo { display : none; } #productList .productListWrap .productBoxWrap .productBox .productPrice.mobile { display : block; font-size : 14px; color : #565454; margin-top : 4%; } #productList .productListWrap .productBoxWrap .productBox .productImgBox { margin : 0; } #productList .productListWrap .productBoxWrap .productBox .productNameBox {flex-wrap : wrap-reverse; } #productList .productListWrap .productBoxWrap .productBox .productNameBox .productName { width : 100%; font-size : 14px; margin-top : 3%; margin-right : 0; } #productList .productListWrap .productBoxWrap .productBox .productNameBox .productBrandLogo { width : 40px; } #productList .productListWrap .productBoxWrap .productBox .hoverBox { font-size : 18px; margin-top : 3%; } #productList .productListWrap .productBoxWrap .productBox .hoverBox .productPrice { display : none; } #productList .productListWrap .productBoxWrap .productBox .hoverBox .productInstallment.hover { bottom : 0; opacity : 1; font-size : 18px; } }