/* A A A : A : A : A : */ #division2A_car_lease { width : 100%; height : auto; padding : 2%; } #division2A_car_lease .division2A_car_leaseWrap { width : 100%; height : auto; max-width : 1200px; margin : 0 auto; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap { width : 100%; height : auto; display : grid; grid-template-columns : repeat(2, 50%); gap : calc(15px + 1vw) 0; justify-content : space-between; } /* 좌우 공통 CSS */ #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .carEngName.mobile { font-size : calc(20px + 1vw); color : #e5e6e6; font-weight : 700; line-height : 1em; display : none; word-break : keep-all; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .carEngName.opacity { font-size : calc(20px + 1vw); opacity : 0; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .TextWrap .TextFront .carName { font-size : calc(18px + 0.2vw); font-weight : 500; overflow : hidden; text-overflow : ellipsis; white-space : nowrap; word-break : keep-all; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .TextWrap .TextFront .carGas, #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .TextWrap .TextFront .carPrice, #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .TextWrap .TextFront .carClass { font-size : calc(12px + 0.2vw); font-weight : 500; word-break : keep-all; color : #656666; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseRightWrap { width : 50%; height : auto; position : relative; } /*왼쪽*/ /* A A A : A : A : A : */ #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseLeftWrap { width : 100%; height : calc(200px + 3vw); display : flex; align-items : center; position : relative; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseLeftWrap .car_leaseLeftBack { width : 70%; height : 100%; position : absolute; top : 0; right : 0; display : flex; flex-direction : column; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseLeftWrap .car_leaseLeftBack .carEngName { width : 100%; height : auto; font-size : calc(20px + 1vw); color : #e5e6e6; font-weight : 700; line-height : 1em; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseLeftWrap .car_leaseLeftBack .leftBackColor { width : 100%; height : 100%; background : #f7f7f7; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseLeftWrap .car_leaseLeftContWrap { width : 100%; height : 69%; display : flex; align-items : center; justify-content : space-between; position : relative; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseLeftWrap .car_leaseLeftContWrap .leftCarImg { width : 50%; height : auto; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseLeftWrap .car_leaseLeftContWrap .leftCarImg img { width : 100%; height : auto; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseLeftWrap .car_leaseLeftContWrap .leftTextWrap { width : 45%; height : 100%; position : relative; display : flex; justify-content : flex-end; align-items : center; perspective : 1000px; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseLeftWrap .car_leaseLeftContWrap .TextWrap .TextBack { width : 100%; height : auto; padding-left : 10%; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseLeftWrap .car_leaseLeftContWrap .TextWrap .TextFront { width : 100%; height : 100%; position : absolute; top : 50%; left : 50%; transform : translate(-50%,-50%); background : #f7f7f7; padding : 5% 0 5% 10%; transform-origin : left; display : flex; flex-direction : column; justify-content : center; transition : .4s; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseLeftWrap:hover .car_leaseLeftContWrap .TextWrap .TextFront { transform : translate(-50%,-50%) rotateY(-120deg); box-shadow : 0px 0px 15px 0px #dadada; transition : .4s; } /*오른쪽*/ /* A A A : A : A : A : */ #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseRightWrap { width : 100%; height : calc(200px + 3vw); display : flex; align-items : center; position : relative; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseRightWrap .car_leaseRightBack { width : 70%; height : 100%; position : absolute; top : 0; left : 0; display : flex; flex-direction : column; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseRightWrap .car_leaseRightBack .carEngName { width : 100%; height : auto; font-size : calc(20px + 1vw); color : #e5e6e6; font-weight : 700; line-height : 1em; text-align : right; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseRightWrap .car_leaseRightBack .rightBackColor { width : 100%; height : 100%; background : #e5e6e6; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseRightWrap .car_leaseRightContWrap { width : 100%; height : 69%; display : flex; align-items : center; justify-content : space-between; position : relative; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseRightWrap .car_leaseRightContWrap .rightCarImg { width : 50%; height : auto; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseRightWrap .car_leaseRightContWrap .rightCarImg img { width : 100%; height : auto; transform : rotate(90deg); -moz-transform : scaleX(-1); -o-transform : scaleX(-1); -webkit-transform : scaleX(-1); transform : scaleX(-1); filter : FlipH; -ms-filter : "FlipH"; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseRightWrap .car_leaseRightContWrap .rightTextWrap { width : 45%; height : 100%; position : relative; display : flex; justify-content : flex-end; align-items : center; perspective : 1000px; z-index : 1; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseRightWrap .car_leaseRightContWrap .TextWrap .TextBack { width : 100%; height : auto; padding-left : 10%; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseRightWrap .car_leaseRightContWrap .TextWrap .TextFront { width : 100%; height : 100%; position : absolute; top : 50%; left : 50%; transform : translate(-50%,-50%); background : #e5e6e6; padding : 5% 0 5% 10%; transform-origin : right; display : flex; flex-direction : column; justify-content : center; transition : .4s; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseRightWrap:hover .car_leaseRightContWrap .TextWrap .TextFront { transform : translate(-50%,-50%) rotateY(120deg); box-shadow : 0px 0px 15px 0px #dadada; transition : .4s; } @media (min-width:641px) and (max-width:1024px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap { grid-template-columns : repeat(3,32.5%); gap : calc(10px + 1vw) 0; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseLeftWrap, #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseRightWrap { height : auto; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseLeftWrap .car_leaseLeftBack, #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseRightWrap .car_leaseRightBack { display : none; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseLeftWrap .car_leaseLeftContWrap { flex-direction : column; height : 100%; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseRightWrap .car_leaseRightContWrap { flex-direction : column-reverse; height : 100%; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .carEngName.mobile { display : block; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseLeftWrap .car_leaseLeftContWrap .leftCarImg, #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseLeftWrap .car_leaseLeftContWrap .leftTextWrap, #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseRightWrap .car_leaseRightContWrap .rightCarImg, #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseRightWrap .car_leaseRightContWrap .rightTextWrap { width : 100%; flex-direction : column; text-align : center; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseRightWrap .car_leaseRightContWrap .rightCarImg img { transform : unset; filter : none;} #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseLeftWrap .car_leaseLeftContWrap .TextWrap .TextBack, #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseRightWrap .car_leaseRightContWrap .TextWrap .TextBack { display : none; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseLeftWrap .car_leaseLeftContWrap .TextWrap .TextFront, #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseRightWrap .car_leaseRightContWrap .TextWrap .TextFront { position : static; transform : unset; background : #f7f7f7; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseLeftWrap:hover .car_leaseLeftContWrap .TextWrap .TextFront, #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseRightWrap:hover .car_leaseRightContWrap .TextWrap .TextFront { box-shadow : none; transform : unset;} } @media (max-width:640px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .carEngName.mobile { font-size : 15px; word-break : keep-all; margin : 2% 0; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .TextWrap .TextFront .carName { font-size : 16px; word-break : keep-all; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .TextWrap .TextFront .carGas, #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .TextWrap .TextFront .carPrice, #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .TextWrap .TextFront .carClass { font-size : 12px; word-break : keep-all; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap { grid-template-columns : repeat(2,48.5%); gap : calc(10px + 1vw) 0; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseLeftWrap, #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseRightWrap { height : auto; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseLeftWrap .car_leaseLeftBack, #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseRightWrap .car_leaseRightBack { display : none; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseLeftWrap .car_leaseLeftContWrap { flex-direction : column; height : 100%; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseRightWrap .car_leaseRightContWrap { flex-direction : column-reverse; height : 100%; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .carEngName.mobile { display : block; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseLeftWrap .car_leaseLeftContWrap .leftCarImg, #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseLeftWrap .car_leaseLeftContWrap .leftTextWrap, #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseRightWrap .car_leaseRightContWrap .rightCarImg, #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseRightWrap .car_leaseRightContWrap .rightTextWrap { width : 100%; flex-direction : column; text-align : center; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseRightWrap .car_leaseRightContWrap .rightCarImg img { transform : unset; filter : none;} #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseLeftWrap .car_leaseLeftContWrap .TextWrap .TextBack, #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseRightWrap .car_leaseRightContWrap .TextWrap .TextBack { display : none; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseLeftWrap .car_leaseLeftContWrap .TextWrap .TextFront, #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseRightWrap .car_leaseRightContWrap .TextWrap .TextFront { position : static; transform : unset; background : #f7f7f7; } #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseLeftWrap:hover .car_leaseLeftContWrap .TextWrap .TextFront, #division2A_car_lease .division2A_car_leaseWrap .car_leaseAllWrap .car_leaseRightWrap:hover .car_leaseRightContWrap .TextWrap .TextFront { box-shadow : none; transform : unset;} } }