/* A A A : A : A : A : */ .TitleWrap { width : 100%; height : auto; text-align : center; padding : 5% 0 0 0; } .TitleWrap img { width : calc(125px + 4vw); height : auto; opacity :1; transform : scale(0.8); animation-name : boom_ani; animation-duration : 4.5s; animation-delay : 0s; animation-fill-mode : both; animation-iteration-count : 1; animation-timing-function : linear; } .TitleWrap p { font-size : 60px; font-weight : 600; color : #e5e5e5; margin-top : -20px; } @keyframes boom_ani { 0% { transform : scale(0.8); opacity : 0.8; } 10% { transform : scale(0.7); opacity : 0.4; } 20% { transform : scale(0.9); opacity : 0.3; } 30% { transform : scale(0.8); opacity : 0.4; } 60% { transform : scale(1.0); opacity : 0.5; } 70% { transform : scale(0.7); opacity : 0.5; } 90% { transform : scale(0.9); opacity : 0.4; } 100% { transform : scale(0.8); opacity : 0.8; } } #carBrandList{ width : 100%; height : auto; text-align : center; padding : 3%; background-color : #f7f7f7; margin-top : -20px; } #carBrandList .carBrandListWrap { width : 100%; height : auto; max-width : 1200px; display : inline-block; } #carBrandList .carBrandListWrap .carBrandListGrid { width : 100%; height : auto; display : grid; grid-template-columns : repeat(4,1fr); gap : calc(10px + 1vw) calc(6px + 1vw); } #carBrandList .carBrandListWrap .carBrandListGrid .carBrandBox { width : 100%; height : auto; position : relative; cursor : pointer; perspective : 1000px; z-index : 0; } #carBrandList .carBrandListWrap .carBrandListGrid .carBrandBox:after { content : ''; left : 0; bottom : 0; margin-top : 10px; width : 100%; border-bottom : 3px } #carBrandList .carBrandListWrap .carBrandListGrid .carBrandBox:hover { z-index : 1;} #carBrandList .carBrandListWrap .carBrandListGrid .carBrandBox .carBrandBoxBack { width : 100%; height : 90%; position : absolute; top : 5%; left : 0; padding : 5%; z-index : -1; transition : .4s; opacity : 0; border-radius : 10px; overflow : hidden; background : #2a60ad; /* fallback for old browsers */ background : -webkit-linear-gradient(to top, #2a60ad 30%, #fff 30%); /* Chrome 10-25, Safari 5.1-6 */ background : linear-gradient(to top, #2a60ad 30%, #fff 30%); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } #carBrandList .carBrandListWrap .carBrandListGrid .carBrandBox .carBrandBoxBack:after { content : ''; width : 40px; height : 290px; left : -40%; bottom : 0%; transition : 0.3s; position : absolute; background-color : #fff; transform : rotate(45deg); animation-name: qnabackLink_ani; animation-duration: 2.2s; animation-delay: 0s; animation-timing-function: linear; animation-fill-mode: both; animation-iteration-count: infinite; background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.7) 50%,rgba(255,255,255,0) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.7) 50%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); } @keyframes qnabackLink_ani { 0% { left : -40%; bottom : 0%; } 80% { left : 160%; bottom : -100%; } 100% { left : 160%; bottom : -100%; } } #carBrandList .carBrandListWrap .carBrandListGrid .carBrandBox:hover .carBrandBoxBack { box-shadow : 0px 5px 8px 0px #999; opacity : 1; transition : .4s; } #carBrandList .carBrandListWrap .carBrandListGrid .carBrandBox .carBrandBoxBack .carBrandBoxBackWrap { width : 95%; height : 100%; margin : 0 auto; display : flex; align-items : flex-end; position : relative; } #carBrandList .carBrandListWrap .carBrandListGrid .carBrandBox .carBrandBoxBack .carBrandBoxBackWrap .carBrandBackLogo { width : 55%; height : auto; position : absolute; bottom : 9%; right : 0; filter : opacity(0.5); z-index : -1; text-align : right; } #carBrandList .carBrandListWrap .carBrandListGrid .carBrandBox .carBrandBoxBack .carBrandBoxBackWrap .carBrandBackLogo img { width : 65%; height : 100%; object-fit : contain; mix-blend-mode : darken; } #carBrandList .carBrandListWrap .carBrandListGrid .carBrandBox .carBrandBoxBack .carBrandBoxBackWrap .carBrandName { width : 100%; font-size : calc(12px + 0.4vw); color : #fff; font-weight : 400; line-height : 1em; text-align : left; transition : .4s; } #carBrandList .carBrandListWrap .carBrandListGrid .carBrandBox .carBrandBoxBack .carBrandBoxBackWrap .carBrandName:hover { color : #fff000; transition : .4s; } #carBrandList .carBrandListWrap .carBrandListGrid .carBrandBox .carBrandBoxBack .carBrandBoxBackWrap .carBrandName:before { content : "ㅣ"; width : 8%; height : auto; display : inline-block; font-size : calc(12px + 0.4vw); line-height : 1em; font-weight : 400; color : #fff; transition : .4s; } #carBrandList .carBrandListWrap .carBrandListGrid .carBrandBox .carBrandBoxBack .carBrandBoxBackWrap .carBrandName:hover:before { color : #fff000; transition : .4s; } #carBrandList .carBrandListWrap .carBrandListGrid .carBrandBox .carBrandBoxBack .carBrandBoxBackWrap .carBrandName span { font-weight : 300; opacity : 0.7; } #carBrandList .carBrandListWrap .carBrandListGrid .carBrandBox .carBrandBoxFront { width : 100%; height : 100%; background : #f7f7f7; transform-origin : top; padding : 3% 3%; border-radius : 10px; border : 2px solid #f7f7f7;transition : .4s; position : relative; } #carBrandList .carBrandListWrap .carBrandListGrid .carBrandBox:hover .carBrandBoxFront { transform : rotateX(60deg); box-shadow : 0px 5px 15px 0px #ccc; border : 2px solid #f7f7f7;transition : .4s; background-color : #fff; } #carBrandList .carBrandListWrap .carBrandListGrid .carBrandBox .carBrandBoxFront .carBrandLogoBox { width : 30%; height : auto; position : relative; z-index : 97; } #carBrandList .carBrandListWrap .carBrandListGrid .carBrandBox .carBrandBoxFront .carBrandLogoBox img { width : 100%; height : auto; max-width : 60px; margin-top : 15px; opacity : 1; } /* 모바일 버전 박스 */ #carBrandList .carBrandListWrap .carBrandListGrid .carBrandBox .carBrandBoxFront .mobileBox { width : 100%; height : auto; display : none; align-items : center; margin-bottom : 5%; z-index : 98; position : relative; } #carBrandList .carBrandListWrap .carBrandListGrid .carBrandBox .carBrandBoxFront .mobileBox .mobileCarBrandName { font-size : 14px; font-weight : 500; color : #333; margin-left : 2%; } /* */ #carBrandList .carBrandListWrap .carBrandListGrid .carBrandBox .carBrandBoxFront .carBrandImgBox { width : 100%; height : auto; margin-top : -19px; position : relative; z-index : 99; } #carBrandList .carBrandListWrap .carBrandListGrid .carBrandBox .carBrandBoxFront .carBrandImgBox img { width : 100%; height : auto; max-width : 260px; } @media (min-width:769px) and (max-width:1024px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #carBrandList .carBrandListWrap .carBrandListGrid { grid-template-columns : repeat(3,1fr); } #carBrandList .carBrandListWrap .carBrandListGrid .carBrandBox .carBrandBoxBack .carBrandBoxBackWrap { width : 100%; } #carBrandList .carBrandListWrap .carBrandListGrid .carBrandBox .carBrandBoxBack .carBrandBoxBackWrap .carBrandName { font-size : 14px; } #carBrandList .carBrandListWrap .carBrandListGrid .carBrandBox .carBrandBoxBack .carBrandBoxBackWrap .carBrandName:before { font-size : 14px; } } @media (max-width:768px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ .TitleWrap p { font-size : 30px; font-weight : 600; color : #e5e5e5; margin-top : -20px; } .TitleWrap img { width : 180px; height : auto; opacity : 0.7; transform : scale(0.5); animation-name : boom_ani_mobile; animation-duration : 3.5s; animation-delay : 0s; animation-fill-mode : both; animation-iteration-count : 1; animation-timing-function : linear; } @keyframes boom_ani_mobile { 0% { transform : scale(0.55); opacity : 0.8; } 10% { transform : scale(0.35); opacity : 0.4; } 20% { transform : scale(0.45); opacity : 0.3; } 30% { transform : scale(0.4); opacity : 0.4; } 60% { transform : scale(0.6); opacity : 0.5; } 70% { transform : scale(0.45); opacity : 0.5; } 90% { transform : scale(0.6); opacity : 0.4; } 100% { transform : scale(0.55); opacity : 0.8; } } #carBrandList { margin-top : -11px; padding : 35px 5%;} #carBrandList .carBrandListWrap .carBrandListGrid { grid-template-columns : 1fr 1fr; gap: calc(6px + 1vw) calc(6px + 1vw); } #carBrandList .carBrandListWrap .carBrandListGrid .carBrandBox:hover .carBrandBoxFront { transform : unset; } #carBrandList .carBrandListWrap .carBrandListGrid .carBrandBox .carBrandBoxFront .mobileBox .mobileCarBrandLogoBox { width : 35%; } #carBrandList .carBrandListWrap .carBrandListGrid .carBrandBox .carBrandBoxFront .carBrandImgBox { margin-top : -12px; } #carBrandList .carBrandListWrap .carBrandListGrid .carBrandBox .carBrandBoxFront .mobileBox .mobileCarBrandLogoBox { width : 40%; } #carBrandList .carBrandListWrap .carBrandListGrid .carBrandBox .carBrandBoxFront .mobileBox .mobileCarBrandName { font-size : 16px; color : #666; margin-left : 5px; } }