/* A A A : A : A : A : */ #division4x4_product { width : 100%; height : auto; text-align : center; padding : 0 2%; margin-top : 6%; position : relative; z-index : 0; } #division4x4_product .division4x4_productWrap { width : 100%; height : auto; max-width : 1300px; display : inline-block; } #division4x4_product .division4x4_productWrap .logoBox { width : calc(125px + 4vw); height : auto; display : inline-block; margin-bottom : 2%; } #division4x4_product .division4x4_productWrap .logoBox img { width : 100%; height : auto; } #division4x4_product .division4x4_productWrap .sectionTitBox { width : 100%; height : auto; display : flex; justify-content : space-between; align-items : center; } #division4x4_product .division4x4_productWrap .sectionTitBox .TitLine { width : auto; height : 1px; background : #c9c9ca; position : relative; flex-grow : 1; } #division4x4_product .division4x4_productWrap .sectionTitBox .TitLine::before { content : "●"; font-size : calc(8px + 0.1vw);line-height : 0; color : #c9c9ca; position : absolute; top : 50%; left : 0; transform : translateY(-50%); } #division4x4_product .division4x4_productWrap .sectionTitBox .TitLine::after { content : "●"; font-size : calc(8px + 0.1vw);line-height : 0; color : #c9c9ca; position : absolute; top : 50%; right : 0; transform : translateY(-50%); } #division4x4_product .division4x4_productWrap .sectionTitBox .Tit { font-size : calc(18px + 1vw); font-weight : 300; margin : 0 1%; } #division4x4_product .division4x4_productWrap .sectionTitBox .Tit span { font-size : calc(18px + 1vw); color : #b60005; font-weight : 600; } #division4x4_product .division4x4_productWrap .subTit { font-size : calc(14px + 0.2vw); color : #999999; font-weight : 700; } #division4x4_product .division4x4_productWrap .productWrap { width : 100%; height : auto; display : grid; justify-content : center; grid-template-columns: 22% 22% 22% 22%; gap : calc(5px + 2vw) calc(5px + 1vw); margin-top : 5%; } #division4x4_product .division4x4_productWrap .productWrap .productBox { width : 100%; height : auto; position : relative; background: #fff; /* fallback for old browsers */ background: -webkit-linear-gradient(to bottom, #fff 25%, #eeefef 70%, #fff 0); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to bottom, #fff 25%, #eeefef 70%, #fff 0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } #division4x4_product .division4x4_productWrap .productWrap .productBox .productImgBox { width : 60%; height : auto; display : inline-block; } #division4x4_product .division4x4_productWrap .productWrap .productBox .productImgBox img { width : 100%; height : auto; transition : .4s; } #division4x4_product .division4x4_productWrap .productWrap .productBox:hover .productImgBox img { transform : scale(1.1); transition : .4s; } #division4x4_product .division4x4_productWrap .productWrap .productBox .productInstallmentBox { width : 90%; background : #fff; border-radius : 25px; padding : 5% 0; margin : 5% auto 0; box-shadow : 0px 0px 15px 0px #0000005e; transition : .4s; } #division4x4_product .division4x4_productWrap .productWrap .productBox .productInstallmentBox .productName { font-size : calc(12px + 0.2vw); font-weight : 500; color : #000; transition : .4s; } #division4x4_product .division4x4_productWrap .productWrap .productBox .productInstallmentBox .productPrice { font-size : calc(12px + 0.1vw); font-weight : 500; color : #666; margin-bottom : 2%; transition : .4s; } #division4x4_product .division4x4_productWrap .productWrap .productBox .productInstallmentBox .productInstallment { width : 100%; height : auto; } #division4x4_product .division4x4_productWrap .productWrap .productBox .productInstallmentBox .productInstallment .InstallmentPrice { font-size : calc(12px + 0.5vw); font-weight : 700; color : #b60005; display : inline-block; margin : 0 2%; transition : .4s; } #division4x4_product .division4x4_productWrap .productWrap .productBox .productInstallmentBox .productInstallment::before { content : "월"; font-size : calc(12px + 0.2vw); font-weight : 500; display : inline-block; color : #000; transition : .4s; } #division4x4_product .division4x4_productWrap .productWrap .productBox .productInstallmentBox .productInstallment::after { content : "~"; font-size : calc(12px + 0.5vw); font-weight : 700; display : inline-block; color : #000; transition : .4s; } #division4x4_product .division4x4_productWrap .productWrap .productBox:hover .productInstallmentBox { background : #2a60ad; transition : .4s; } #division4x4_product .division4x4_productWrap .productWrap .productBox:hover .productInstallmentBox .productName, #division4x4_product .division4x4_productWrap .productWrap .productBox:hover .productInstallmentBox .productPrice, #division4x4_product .division4x4_productWrap .productWrap .productBox:hover .productInstallmentBox .productInstallment::before, #division4x4_product .division4x4_productWrap .productWrap .productBox:hover .productInstallmentBox .productInstallment::after { color : #fff; transition : .4s; } #division4x4_product .division4x4_productWrap .productWrap .productBox:hover .productInstallmentBox .productInstallment .InstallmentPrice { color : #fff000; transition : .4s; } /* 모바일 버전 */ #division4x4_product .division4x4_productWrap .productWrap.mobile { width : 100%; height : auto; display : none; } #division4x4_product .division4x4_productWrap .productWrap.mobile .productBox { width : 100%; height : auto; position : relative; display : inline-block; padding : 5% 0; } #division4x4_product .division4x4_productWrap .productWrap.mobile .productBox .productImgBox { width : 60%; height : auto; display : inline-block; } #division4x4_product .division4x4_productWrap .productWrap.mobile .productBox .productImgBox img { width : 100%; height : auto; } #division4x4_product .division4x4_productWrap .productWrap.mobile .productBox .productInstallmentBox { width : 90%; padding : 5% 0; margin : 5% auto 0; } #division4x4_product .division4x4_productWrap .productWrap.mobile .productBox .productInstallmentBox .productName { font-size : 17px; font-weight : 500; } #division4x4_product .division4x4_productWrap .productWrap.mobile .productBox .productInstallmentBox .productPrice { font-size : 14px; font-weight : 500; color : #666; } #division4x4_product .division4x4_productWrap .productWrap.mobile .productBox .productInstallmentBox .productInstallment { width : 100%; height : auto; } #division4x4_product .division4x4_productWrap .productWrap.mobile .productBox .productInstallmentBox .productInstallment .InstallmentPrice { font-size : 24px; font-weight : 700; color : #b60005; display : inline-block; margin : 0 2%; } #division4x4_product .division4x4_productWrap .productWrap.mobile .productBox .productInstallmentBox .productInstallment::before { content : "월"; font-size : 16px; font-weight : 500; display : inline-block; color : #000; } #division4x4_product .division4x4_productWrap .productWrap.mobile .productBox .productInstallmentBox .productInstallment::after { content : "~"; font-size : 24px; font-weight : 700; display : inline-block; color : #000; } @media (min-width:641px) and (max-width:768px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #division4x4_product .division4x4_productWrap .productWrap { grid-template-columns : 48% 48%;} } @media (max-width:640px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #division4x4_product .division4x4_productWrap .productWrap { display : none; } #division4x4_product .division4x4_productWrap .productWrap.mobile { display : block; overflow : hidden; } }