/* A A A : A : A : A : */ #carDetail { width : 100%; height : auto; color : #fff; padding : 5% 2%; position : relative; overflow : hidden; background: #15292e; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #15292e 50%, #9eabb0 50%); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #15292e 50%, #9eabb0 50%); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } #carDetail .carDetailWrap { width : 100%; height : auto; max-width : 1300px; display : flex; margin : 0 auto; align-items : center; position : relative; z-index : 1; } #carDetail .carDetailWrap .carDetailLeft { width : 35%; height : auto; margin-right : 5%; } #carDetail .carDetailWrap .carDetailLeft .companyName { width : 100%; height : auto; display : flex; align-items : center; } #carDetail .carDetailWrap .carDetailLeft .companyName span { width : auto; height : 1px; background : #fff; display : inline-block; flex-grow : 1; } #carDetail .carDetailWrap .carDetailLeft .companyName p { width : auto; font-size : calc(12px + 0.2vw); font-weight : 500; margin-left : 2%; } #carDetail .carDetailWrap .carDetailLeft .carInfoBox { width : 100%; height : auto; margin-top : 10%; } #carDetail .carDetailWrap .carDetailLeft .carInfoBox .infoBoxTop { width : 100%; height : auto; display : flex; align-items : center; } #carDetail .carDetailWrap .carDetailLeft .carInfoBox .infoBoxTop .carName { width : auto; font-size : calc(16px + 0.5vw); font-weight : 500; line-height : 1em; position : relative; padding-right : 5%; margin-right : 5%; } #carDetail .carDetailWrap .carDetailLeft .carInfoBox .infoBoxTop .carName::after { content : ""; width : 1px; height : 90%; background : #707070; display : inline-block; position : absolute; top : 50%; right : 0; transform : translateY(-50%); } #carDetail .carDetailWrap .carDetailLeft .carInfoBox .infoBoxTop .carLogo { width : calc(20px + 2vw); height : auto; } #carDetail .carDetailWrap .carDetailLeft .carInfoBox .infoBoxTop .carLogo img { width : 100%; height : auto; } #carDetail .carDetailWrap .carDetailLeft .carInfoBox .carInfo { width : 100%; height : auto; margin : 5% 0 7%; } #carDetail .carDetailWrap .carDetailLeft .carInfoBox .carInfo p { font-size : calc(14px + 0.3vw); line-height : 1.8em; } #carDetail .carDetailWrap .carDetailLeft .carInfoBox .carInfo p span { font-size : calc(14px + 0.2vw); font-weight : 100; } #carDetail .carDetailWrap .carDetailLeft .carInfoBox .carInfoBot { width : 100%; height : auto; } #carDetail .carDetailWrap .carDetailLeft .carInfoBox .carInfoBot .carDetailPhotoBox { width : 100%; height : auto; display : flex; margin : 0 auto; } #carDetail .carDetailWrap .carDetailLeft .carInfoBox .carInfoBot .carDetailPhotoBox .carDetailPhoto { width : calc(100% /3); height : auto; cursor : pointer; overflow : hidden; transition : .3s; } #carDetail .carDetailWrap .carDetailLeft .carInfoBox .carInfoBot .carDetailPhotoBox .carDetailPhoto:hover { filter : drop-shadow(2px 4px 6px black); transition : .3s;} #carDetail .carDetailWrap .carDetailLeft .carInfoBox .carInfoBot .carDetailPhotoBox .carDetailPhoto img { width : 100%; height : 100%; object-fit : cover; filter : brightness(0.5); clip-path : polygon(20% 0, 100% 0%, 80% 100%, 0% 100%);transition : .3s; } #carDetail .carDetailWrap .carDetailLeft .carInfoBox .carInfoBot .carDetailPhotoBox .carDetailPhoto:hover img { filter : brightness(1); transition : .3s; } #carDetail .carDetailWrap .carDetailLeft .carInfoBox .qnalinkBox { width : 100%; height : auto; display : flex; justify-content : flex-end; margin-top : 10%; } #carDetail .carDetailWrap .carDetailLeft .carInfoBox .qnalinkBox .qnaLink { width : auto; font-size : calc(14px + 0.3vw); color : #fff; display : inline-block; font-weight : 400; border : 1px solid #fff; padding : 1% 10%; transition : .4s; } #carDetail .carDetailWrap .carDetailLeft .carInfoBox .qnalinkBox .qnaLink:hover { color : #000; background : #fff; transition : .4s; } #carDetail .carDetailWrap .carDetailRight { width : 60%; height : auto; } #carDetail .carDetailWrap .carDetailRight .carEngNameBox { width : 100%; height : auto; text-align : right; } #carDetail .carDetailWrap .carDetailRight .carEngNameBox #carEngName { opacity : 0.2; word-break : keep-all; line-height : 0.9em; } #carDetail .carDetailWrap .carDetailRight .carPhoto { width : 100%; height : auto; } #carDetail .carDetailWrap .carDetailRight .carPhoto img { width : 100%; height : auto; } #carDetail .blackDeco { width : 100%; height : 40%; position : absolute; bottom : 0; left : 0; z-index : 0; } #carDetail .blackDeco img { width : 100%; height : 100%; } #carDetail .blackDecoMobile { width : 100%; height : 120%; position : absolute; bottom : 0; left : 0; z-index : 0; display : none; } #carDetail .blackDecoMobile img { width : 100%; height : 100%; } #carDetail .companyNameMobile { width : 100%; height : auto; display : none; align-items : center; } #carDetail .companyNameMobile span { width : auto; height : 1px; background : #fff; display : inline-block; flex-grow : 1; } #carDetail .companyNameMobile p { width : auto; font-size : calc(12px + 0.2vw); font-weight : 500; margin-left : 2%; } @media(max-width:640px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #carDetail { padding : 10% 0; background: #15292e; /* fallback for old browsers */ background: -webkit-linear-gradient(to top, #15292e 63%, #9eabb0 38%); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to top, #15292e 63%, #9eabb0 38%); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } #carDetail .companyNameMobile { width : 85%; display : flex; margin-bottom : 8%; } #carDetail .companyNameMobile p { font-size : 14px; flex-grow : 1; } #carDetail .carDetailWrap { flex-direction : column; } #carDetail .carDetailWrap .carDetailLeft { width : 85%; margin : 0 auto; order : 2; } #carDetail .carDetailWrap .carDetailLeft .companyName { display : none; } #carDetail .carDetailWrap .carDetailLeft .carInfoBox { display : flex; flex-direction : column; margin-top : 5%; } #carDetail .carDetailWrap .carDetailLeft .carInfoBox .infoBoxTop { order : 2; margin-top : 10%; } #carDetail .carDetailWrap .carDetailLeft .carInfoBox .carInfo { order : 3; margin : 5% 0 0; } #carDetail .carDetailWrap .carDetailLeft .carInfoBox .carInfo p { font-size : 14px; } #carDetail .carDetailWrap .carDetailLeft .carInfoBox .carInfo p span { font-size : 13px; } #carDetail .carDetailWrap .carDetailLeft .carInfoBox .carInfoBot { order : 1; } #carDetail .carDetailWrap .carDetailLeft .carInfoBox .carInfoBot .carDetailPhotoBox .carDetailPhoto { filter : drop-shadow(2px 4px 6px black); } #carDetail .carDetailWrap .carDetailLeft .carInfoBox .carInfoBot .carDetailPhotoBox .carDetailPhoto img { filter : unset; } #carDetail .carDetailWrap .carDetailLeft .carInfoBox .qnalinkBox { order : 4; justify-content : center; } #carDetail .carDetailWrap .carDetailLeft .carInfoBox .qnalinkBox span { flex-grow : 0; } #carDetail .carDetailWrap .carDetailLeft .carInfoBox .qnalinkBox .qnaLink { margin-left : 0; font-size : 16px; font-weight : 500; } #carDetail .carDetailWrap .carDetailRight { width : 95%; margin : 0 auto; order : 1; } #carDetail .blackDeco { display : none; } #carDetail .blackDecoMobile { display : block; } }