gil/fod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:최초 업로드

Browse Source
This commit is contained in:
NEW_GIL_HOME\hyeon
2023-11-24 11:32:01 +09:00
commit 107dbaa207
815 changed files with 779456 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
assets/css/genesis/genesis-font.css Normal file
View File

@@ -0,0 +1,87 @@
@charset "utf-8";
/* Genesis Sans KR Head */
@font-face {
font-family: 'GenesisSansHead';
src: url('/kr/assets/font/genesis/GenesisSansHeadKRLight.eot');
src: url('/kr/assets/font/genesis/GenesisSansHeadKRLight.eot?#iefix') format("embedded-opentype"), url('/kr/assets/font/genesis/GenesisSansHeadKRLight.woff2') format("woff2"), url('/kr/assets/font/genesis/GenesisSansHeadKRLight.woff') format("woff");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'GenesisSansHead';
src: url('/kr/assets/font/genesis/GenesisSansHeadKRRegular.eot');
src: url('/kr/assets/font/genesis/GenesisSansHeadKRRegular.eot?#iefix') format("embedded-opentype"), url('/kr/assets/font/genesis/GenesisSansHeadKRRegular.woff2') format("woff2"), url('/kr/assets/font/genesis/GenesisSansHeadKRRegular.woff') format("woff");
font-weight: 400;
font-style: normal;
}
/* Genesis Sans KR Text */
@font-face {
font-family: 'GenesisSansText';
src: url('/kr/assets/font/genesis/GenesisSansTextKRRegular.eot');
src: url('/kr/assets/font/genesis/GenesisSansTextKRRegular.eot?#iefix') format("embedded-opentype"), url('/kr/assets/font/genesis/GenesisSansTextKRRegular.woff2') format("woff2"), url('/kr/assets/font/genesis/GenesisSansTextKRRegular.woff') format("woff");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'GenesisSansText';
src: url('/kr/assets/font/genesis/GenesisSansTextKRMedium.eot');
src: url('/kr/assets/font/genesis/GenesisSansTextKRMedium.eot?#iefix') format("embedded-opentype"), url('/kr/assets/font/genesis/GenesisSansTextKRMedium.woff2') format("woff2"), url('/kr/assets/font/genesis/GenesisSansTextKRMedium.woff') format("woff");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'GenesisSansText';
src: url('/kr/assets/font/genesis/GenesisSansTextKRBold.eot');
src: url('/kr/assets/font/genesis/GenesisSansTextKRBold.eot?#iefix') format("embedded-opentype"), url('/kr/assets/font/genesis/GenesisSansTextKRBold.woff2') format("woff2"), url('/kr/assets/font/genesis/GenesisSansTextKRBold.woff') format("woff");
font-weight: 700;
font-style: normal;
}
/* Genesis Sans Office Head */
@font-face {
font-family: 'GenesisSansHeadOffice';
src: url('/kr/assets/font/genesis/GenesisSansHeadOffice-Light.eot');
src: url('/kr/assets/font/genesis/GenesisSansHeadOffice-Light.eot?#iefix') format("embedded-opentype"), url('/kr/assets/font/genesis/GenesisSansHeadOffice-Light.woff2') format("woff2"), url('/kr/assets/font/genesis/GenesisSansHeadOffice-Light.woff') format("woff");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'GenesisSansHeadOffice';
src: url('/kr/assets/font/genesis/GenesisSansHeadOffice-Regular.eot');
src: url('/kr/assets/font/genesis/GenesisSansHeadOffice-Regular.eot?#iefix') format("embedded-opentype"), url('/kr/assets/font/genesis/GenesisSansHeadOffice-Regular.woff2') format("woff2"), url('/kr/assets/font/genesis/GenesisSansHeadOffice-Regular.woff') format("woff");
font-weight: 400;
font-style: normal;
}
/* Genesis Sans Office Text */
@font-face {
font-family: 'GenesisSansTextOffice';
src: url('/kr/assets/font/genesis/GenesisSansTextOffice-Regular.eot');
src: url('/kr/assets/font/genesis/GenesisSansTextOffice-Regular.eot?#iefix') format("embedded-opentype"), url('/kr/assets/font/genesis/GenesisSansTextOffice-Regular.woff2') format("woff2"), url('/kr/assets/font/genesis/GenesisSansTextOffice-Regular.woff') format("woff");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'GenesisSansHeadOffice';
src: url('/kr/assets/font/genesis/GenesisSansTextOffice-Medium.eot');
src: url('/kr/assets/font/genesis/GenesisSansTextOffice-Medium.eot?#iefix') format("embedded-opentype"), url('/kr/assets/font/genesis/GenesisSansTextOffice-Medium.woff2') format("woff2"), url('/kr/assets/font/genesis/GenesisSansTextOffice-Medium.woff') format("woff");
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'GenesisSansHeadOffice';
src: url('/kr/assets/font/genesis/GenesisSansTextOffice-Bold.eot');
src: url('/kr/assets/font/genesis/GenesisSansTextOffice-Bold.eot?#iefix') format("embedded-opentype"), url('/kr/assets/font/genesis/GenesisSansTextOffice-Bold.woff2') format("woff2"), url('/kr/assets/font/genesis/GenesisSansTextOffice-Bold.woff') format("woff");
font-weight: 700;
font-style: normal;
}

2380
assets/css/genesis/genesis.css Normal file
View File

File diff suppressed because it is too large Load Diff

1
assets/css/genesis/genesis.css.map Normal file
View File

File diff suppressed because one or more lines are too long

2603
assets/css/genesis/genesis.scss Normal file
View File

File diff suppressed because it is too large Load Diff

971
assets/css/genesis/genesisMain.css Normal file
View File

@@ -0,0 +1,971 @@
@charset "UTF-8";
/*변수*/
/*반응형 화면 크기*/
/*css 디폴트는 모바일이 기준*/
/*반응형, 브라우저 크기가 300px 이하일때*/
/*반응형, 브라우저 크기가 800px 이상일때*/
/*@media (min-width: $mobile ) and (max-width: $tablet){*/
/*반응형, 브라우저 크기가 1025px 이상일때*/
/*반응형, 브라우저 크기가 1204px 이상일때*/
/*넓이, 높이 자동 계산함수*/
/*변수파일 import*/
@-webkit-keyframes fadein {
from {
opacity: 0.9;
}
to {
opacity: 1;
}
}
@keyframes fadein {
from {
opacity: 0.9;
}
to {
opacity: 1;
}
}
.contentWarp.main {
margin-bottom: 0;
}
.contentWarp.main .mainWarpInner {
width: 120rem;
margin: 0 auto;
}
.mainBanner + .contentWarp {
margin-top: 8rem;
}
.mainBanner + .contentWarp .mainWarpInner .mainProductList .mainProductInner {
margin-top: 0;
}
.mainTopKey {
width: 100%;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
z-index: 2;
}
@media (min-width: 1025px) {
.mainTopKey {
max-width: 192rem;
}
}
.mainTopKey .mainSwiper {
max-width: 192rem;
width: 100%;
top: 0;
left: 50%;
transform: translate(-50%, 0);
height: 64rem;
background-size: cover;
z-index: 0;
}
@media (min-width: 768px) {
.mainTopKey .mainSwiper {
height: 64rem;
}
}
@media (min-width: 1025px) {
.mainTopKey .mainSwiper {
height: 69rem;
}
}
@media (min-width: 1240px) {
.mainTopKey .mainSwiper {
height: 85.5rem;
}
}
.mainTopKey .mainSwiper::before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 8rem;
top: 0;
background: linear-gradient(180deg, rgba(5, 20, 31, 0.8) 0%, rgba(5, 20, 31, 0) 100%);
z-index: 2;
}
.mainTopKey .mainSwiper ul li {
displaY: flex;
height: 64rem;
background-size: cover;
}
@media (min-width: 768px) {
.mainTopKey .mainSwiper ul li {
height: 69rem;
}
}
@media (min-width: 1025px) {
.mainTopKey .mainSwiper ul li {
height: 69rem;
}
}
@media (min-width: 1240px) {
.mainTopKey .mainSwiper ul li {
height: 85.5rem;
}
}
.mainTopKey .mainSwiper ul li .mainLine {
position: fixed;
left: 0;
top: 50%;
transform: translate(-50%);
background-image: url(/kr/assets/images/genesis/maib-line.png);
background-position: center right;
background-repeat: no-repeat;
width: 30%;
height: 6rem;
}
.mainTopKey .mainSwiper ul li .mainText {
width: 100%;
height: 33rem;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
padding-left: 2rem;
padding-right: 2rem;
flex-direction: column;
justify-content: space-between;
margin-top: 16rem;
}
@media (min-width: 1025px) {
.mainTopKey .mainSwiper ul li .mainText {
width: 120rem;
margin-top: 20.5rem;
height: 33rem;
}
}
@media (min-width: 1240px) {
.mainTopKey .mainSwiper ul li .mainText {
padding-left: 0rem;
padding-right: 0rem;
margin-top: 20.5rem;
height: 48rem;
}
}
.mainTopKey .mainSwiper ul li .mainText p {
width: 100%;
}
.mainTopKey .mainSwiper ul li .mainText p strong {
font-size: 3.5rem;
font-weight: 300;
font-family: "GenesisSansHead";
}
@media (min-width: 1025px) {
.mainTopKey .mainSwiper ul li .mainText p strong {
font-size: 8rem;
}
}
.mainTopKey .mainSwiper ul li .mainText p strong,
.mainTopKey .mainSwiper ul li .mainText p span {
displaY: block;
width: 100%;
color: #fff;
}
.mainTopKey .mainSwiper ul li .mainText p span {
margin-top: 2.5rem;
font-size: 1.6rem;
line-height: 2.8rem;
font-weight: 300;
}
@media (min-width: 1240px) {
.mainTopKey .mainSwiper ul li .mainText p span {
font-size: 2rem;
}
}
.mainTopKey .mainSwiper ul li .mainText .oneButton {
width: 11rem;
margin-top: 5rem;
}
.mainTopKey .mainSwiper ul li .mainText .oneButton a {
display: flex;
align-items: center;
background-color: transparent;
border: none;
}
.mainTopKey .mainSwiper ul li .mainText .oneButton a p {
color: #fff;
}
.mainTopKey .mainSwiper ul li .mainText .oneButton a::after {
content: "";
width: 1.4rem;
height: 0.8rem;
background-image: url(/kr/assets/images/common/icon-wtbarrow.svg);
background-size: contain;
background-repeat: no-repeat;
transform: rotate(-90deg);
}
.mainTopKey .mainSwiper .swiper-pagination {
bottom: 10.8rem;
}
.mainTopKey .mainSwiper .swiper-pagination span {
width: 1rem;
height: 1rem;
border-radius: 50%;
background-color: #fff;
opacity: 0.5;
}
.mainTopKey .mainSwiper .swiper-pagination .swiper-pagination-bullet-active {
background-color: transparent;
border: 1px solid #fff;
opacity: 1;
}
.mainTopKey .mycarInfo {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 8.7rem;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
background-color: rgba(0, 0, 0, 0.6);
}
@media (min-width: 1025px) {
.mainTopKey .mycarInfo {
width: 100%;
padding-left: 2rem;
padding-right: 2rem;
}
}
@media (min-width: 1240px) {
.mainTopKey .mycarInfo {
max-width: 192rem;
padding-left: 0rem;
padding-right: 0rem;
}
}
.mainTopKey .mycarInfo .mycarInfoInner {
width: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
@media (min-width: 1240px) {
.mainTopKey .mycarInfo .mycarInfoInner {
width: 120rem;
}
}
.mainTopKey .mycarInfo .mycarInfoInner .mainComment {
display: none;
}
@media (min-width: 1025px) {
.mainTopKey .mycarInfo .mycarInfoInner .mainComment {
display: block;
}
}
.mainTopKey .mycarInfo .mycarInfoInner .mainComment p {
color: #fff;
font-size: 1.6rem;
display: flex;
align-items: center;
}
.mainTopKey .mycarInfo .mycarInfoInner .mainComment p::before {
content: "";
display: block;
width: 4.3rem;
height: 4.3rem;
margin-right: 1.5rem;
background-image: url(/kr/assets/images/common/icon-car.svg);
background-size: contain;
background-repeat: no-repeat;
}
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum {
width: 100%;
}
@media (min-width: 1025px) {
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
}
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist {
position: relative;
width: 100%;
padding-left: 2rem;
padding-right: 2rem;
}
@media (min-width: 1025px) {
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist {
width: auto;
display: block;
padding-left: 0rem;
padding-right: 0rem;
}
}
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist span {
color: #fff;
font-weight: 400;
displaY: flex;
width: auto;
min-width: 2.2rem;
}
@media (min-width: 1025px) {
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist span {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
}
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist span + span {
width: 100%;
}
@media (min-width: 1025px) {
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist span + span {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
}
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist span + span::before {
content: "";
displaY: block;
width: 1px;
height: 1.4rem;
background-color: #DEDEDE;
margin-left: 1rem;
margin-right: 1rem;
}
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carItem {
displaY: flex;
height: 8.7rem;
font-size: 1.4rem;
align-items: center;
cursor: pointer;
color: #676767;
}
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carItem::after {
content: "";
width: 2.5rem;
height: 0.8rem;
displaY: block;
background: url("/kr/assets/images/common/icon-wtbarrow.svg") center right no-repeat;
background-size: 1.2rem;
}
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carItem:hover, .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carItem:focus {
border: none;
outline: none;
}
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carItem.on .carlistItem {
display: block;
}
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carlistItem {
display: none;
position: absolute;
width: 100%;
min-width: 17rem;
top: 8.7rem;
left: 50%;
transform: translate(-50%, 0);
background-color: #fff;
z-index: 1;
}
@media (min-width: 1025px) {
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carlistItem {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
}
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carlistItem .boxBullet {
display: none;
}
@media (min-width: 1025px) {
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carlistItem .boxBullet {
width: 1.4rem;
height: 1rem;
displaY: block;
position: absolute;
top: -0.9rem;
left: 50%;
transform: translate(-50%, 0);
z-index: 1;
}
}
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carlistItem ul {
position: relative;
display: block;
padding: 2rem;
background-color: #fff;
border: 1px solid #DEDEDE;
}
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carlistItem ul li a {
display: flex;
font-size: 1.4rem;
align-items: center;
}
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carlistItem ul li a:hover span {
color: #000;
}
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carlistItem ul li a span {
color: #9EA1A2;
font-weight: 400;
displaY: flex;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carlistItem ul li + li {
margin-top: 1rem;
}
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carlistItem.on {
display: block;
}
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carItem.on + .carlistItem {
display: block;
width: 100%;
}
@media (min-width: 1025px) {
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carItem.on + .carlistItem {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
}
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist.on a::after {
transform: rotate(-180deg);
background-position-x: left;
}
.mainTopKey + .contentWarp {
margin-top: 63.5rem;
z-index: 1;
}
@media (min-width: 1240px) {
.mainTopKey + .contentWarp {
margin-top: 85.5rem;
}
}
.mainProductList {
padding-left: 2rem;
padding-right: 2rem;
}
@media (min-width: 1240px) {
.mainProductList {
padding-left: 0;
padding-right: 0;
}
}
.mainProductList .mainContensTitle {
display: block;
}
.mainProductList .mainContensTitle h1, .mainProductList .mainContensTitle p {
text-align: left;
}
.mainProductList .mainContensTitle h1 {
font-size: 3.5rem;
font-weight: 300;
text-transform: uppercase;
font-family: "GenesisSansHead";
}
@media (min-width: 1025px) {
.mainProductList .mainContensTitle h1 {
font-size: 5.5rem;
line-height: 6rem;
}
}
.mainProductList .mainContensTitle p {
display: none;
font-size: 1.8rem;
font-weight: 400;
margin-top: 1.5rem;
color: #676767;
}
@media (min-width: 1025px) {
.mainProductList .mainContensTitle p {
display: block;
}
}
.mainProductList .mainProductInner {
max-width: 50rem;
margin: 0 auto;
margin-top: 2rem;
}
@media (min-width: 768px) {
.mainProductList .mainProductInner {
max-width: 120rem;
}
}
@media (min-width: 1025px) {
.mainProductList .mainProductInner {
margin-top: 5rem;
margin-top: 7rem;
}
}
.mainProductList .mainProductInner ul li {
position: relative;
width: 100%;
overflow: hidden;
background-color: #fff;
display: flex;
flex-direction: column;
border: 1px solid #DEDEDE;
}
@media (min-width: 1025px) {
.mainProductList .mainProductInner ul li {
height: 35rem;
}
}
@media (min-width: 768px) {
.mainProductList .mainProductInner ul li {
display: grid;
flex-direction: inherit;
grid-template-columns: 35rem auto;
}
}
.mainProductList .mainProductInner ul li > p {
position: relative;
width: 100%;
}
@media (min-width: 1240px) {
.mainProductList .mainProductInner ul li > p {
height: 35rem;
width: 35rem;
}
}
.mainProductList .mainProductInner ul li > p img {
top: 0;
left: 0;
transform: translate(50, 50);
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
margin: auto;
}
.mainProductList .mainProductInner ul li .productSmallVideo {
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
}
.mainProductList .mainProductInner ul li video {
width: 100%;
height: 100%;
}
.mainProductList .mainProductInner ul li .contentInfo {
width: 100%;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 2rem;
}
@media (min-width: 768px) {
.mainProductList .mainProductInner ul li .contentInfo {
padding: 3rem;
}
}
@media (min-width: 1025px) {
.mainProductList .mainProductInner ul li .contentInfo {
padding: 4rem;
justify-content: inherit;
}
}
@media (min-width: 1240px) {
.mainProductList .mainProductInner ul li .contentInfo {
height: 100%;
justify-content: inherit;
}
}
.mainProductList .mainProductInner ul li .contentInfo .tag {
display: flex;
}
.mainProductList .mainProductInner ul li .contentInfo .tag span {
padding: 0.6rem;
font-size: 1.3rem;
font-weight: 400;
color: #9EA1A2;
background-color: #fff;
border: 1px solid #9EA1A2;
text-transform: uppercase;
font-family: "GenesisSansHead";
}
@media (min-width: 1025px) {
.mainProductList .mainProductInner ul li .contentInfo .tag span {
font-size: 1.3rem;
}
}
.mainProductList .mainProductInner ul li .contentInfo .tag span + span {
margin-left: 0.8rem;
}
.mainProductList .mainProductInner ul li .contentInfo .tag + h2 {
margin-top: 2rem;
}
.mainProductList .mainProductInner ul li .contentInfo h2 {
font-size: 3.5rem;
font-weight: 300;
color: #000;
text-transform: uppercase;
font-family: "GenesisSansHead";
}
@media (min-width: 1025px) {
.mainProductList .mainProductInner ul li .contentInfo h2 {
font-size: 4rem;
}
}
.mainProductList .mainProductInner ul li .contentInfo .listOtionPrice {
margin-top: 3rem;
display: block;
}
@media (min-width: 768px) {
.mainProductList .mainProductInner ul li .contentInfo .listOtionPrice {
margin-top: 0rem;
display: flex;
align-items: center;
}
}
@media (min-width: 1025px) {
.mainProductList .mainProductInner ul li .contentInfo .listOtionPrice {
position: absolute;
bottom: 4rem;
left: 4rem;
}
}
@media (min-width: 1240px) {
.mainProductList .mainProductInner ul li .contentInfo .listOtionPrice {
position: absolute;
bottom: 4rem;
left: 4rem;
}
}
.mainProductList .mainProductInner ul li .contentInfo .listOtionPrice dl {
displaY: flex;
justify-content: space-between;
flex-direction: row-reverse;
width: 100%;
align-items: center;
}
@media (min-width: 768px) {
.mainProductList .mainProductInner ul li .contentInfo .listOtionPrice dl {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
flex-direction: column-reverse;
justify-content: inherit;
}
}
.mainProductList .mainProductInner ul li .contentInfo .listOtionPrice dl dt, .mainProductList .mainProductInner ul li .contentInfo .listOtionPrice dl dd {
color: #676767;
font-size: 1.4rem;
width: 100%;
}
@media (min-width: 1025px) {
.mainProductList .mainProductInner ul li .contentInfo .listOtionPrice dl dt, .mainProductList .mainProductInner ul li .contentInfo .listOtionPrice dl dd {
font-size: 1.6rem;
}
}
.mainProductList .mainProductInner ul li .contentInfo .listOtionPrice dl dt {
font-weight: 400;
border-left: 1px solid rgba(255, 255, 255, 0.5);
}
.mainProductList .mainProductInner ul li .contentInfo .listOtionPrice dl dd {
font-weight: 400;
margin-top: 1rem;
color: #000;
text-align: right;
}
@media (min-width: 768px) {
.mainProductList .mainProductInner ul li .contentInfo .listOtionPrice dl dd {
text-align: left;
}
}
.mainProductList .mainProductInner ul li .contentInfo .listOtionPrice dl + dl {
border-top: 1px solid #DEDEDE;
margin-top: 1.5rem;
padding-top: 1.5rem;
}
@media (min-width: 768px) {
.mainProductList .mainProductInner ul li .contentInfo .listOtionPrice dl + dl {
border-left: 1px solid #DEDEDE;
margin-left: 1.5rem;
padding-left: 1.5rem;
border-top: 0;
margin-top: 0;
padding-top: 0;
}
}
.mainProductList .mainProductInner ul li .contentInfo .noActionDescript {
color: #676767;
font-weight: 400;
line-height: 2.2rem;
font-size: 1.4rem;
margin-top: 1rem;
}
@media (min-width: 1025px) {
.mainProductList .mainProductInner ul li .contentInfo .noActionDescript {
font-size: 1.6rem;
margin-top: 1.5rem;
line-height: 2.4rem;
}
}
.mainProductList .mainProductInner ul li .contentInfo .listImgBtn {
right: 4rem;
bottom: 4rem;
width: 100%;
margin-top: 4rem;
}
@media (min-width: 768px) {
.mainProductList .mainProductInner ul li .contentInfo .listImgBtn {
margin-top: 0rem;
width: 16rem;
}
}
@media (min-width: 1025px) {
.mainProductList .mainProductInner ul li .contentInfo .listImgBtn {
position: absolute;
}
}
@media (min-width: 1240px) {
.mainProductList .mainProductInner ul li .contentInfo .listImgBtn {
position: absolute;
}
}
.mainProductList .mainProductInner ul li .contentInfo .descript + .listImgBtn {
margin-top: 4rem;
}
.mainProductList .mainProductInner ul li + li {
margin-top: 4rem;
}
.mainSevice {
width: 100%;
display: flex;
flex-wrap: wrap;
max-width: 120rem;
margin: 0 auto;
justify-content: space-between;
padding-left: 2rem;
padding-right: 2rem;
margin-top: 5rem;
}
@media (min-width: 768px) {
.mainSevice {
margin-top: 6rem;
flex-wrap: nowrap;
}
}
@media (min-width: 1025px) {
.mainSevice {
margin-top: 12rem;
}
}
@media (min-width: 1240px) {
.mainSevice {
padding-left: 0;
padding-right: 0;
}
}
@media (min-width: 768px) {
.mainSevice .left {
width: 50%;
}
}
.mainSevice .left span {
color: #676767;
font-size: 1.6rem;
text-transform: uppercase;
font-family: "GenesisSansHead";
}
.mainSevice .left h2 {
margin-top: 1rem;
font-size: 3rem;
font-weight: 300;
line-height: 4rem;
font-family: "GenesisSansHead";
}
@media (min-width: 1025px) {
.mainSevice .left h2 {
font-size: 4rem;
line-height: 5rem;
}
}
.mainSevice .right {
display: flex;
flex-wrap: wrap;
margin-top: 2.5rem;
width: 100%;
}
@media (min-width: 768px) {
.mainSevice .right {
flex-wrap: nowrap;
width: 50%;
margin-top: 0;
}
}
.mainSevice .right a {
width: 100%;
height: 14rem;
padding: 3rem;
border: 1px solid #DEDEDE;
}
@media (min-width: 768px) {
.mainSevice .right a {
height: 17rem;
}
}
@media (min-width: 1025px) {
.mainSevice .right a {
width: 29rem;
}
}
.mainSevice .right a:hover {
border: 1px solid #05141F;
}
.mainSevice .right a .faq, .mainSevice .right a .cs {
display: flex;
height: 100%;
flex-direction: column;
justify-content: space-between;
}
.mainSevice .right a .faq span, .mainSevice .right a .cs span {
position: relative;
displaY: block;
font-weight: 400;
font-size: 1.8rem;
color: #000;
}
.mainSevice .right a .faq span::after, .mainSevice .right a .cs span::after {
content: "";
position: absolute;
right: 0;
displaY: inline-block;
width: 0.8rem;
height: 1.6rem;
background-size: contain;
background-repeat: no-repeat;
background-position: center right;
background-image: url(/kr/assets/images/common/icon-bgo.svg);
}
.mainSevice .right a .faq::before, .mainSevice .right a .cs::before {
content: "";
display: block;
width: 4.5rem;
height: 4.5rem;
background-size: contain;
background-repeat: no-repeat;
}
.mainSevice .right a .faq::before {
background-image: url(/kr/assets/images/common/icon-faq.svg);
}
.mainSevice .right a .cs::before {
background-image: url(/kr/assets/images/common/icon-bannercs.svg);
}
.mainSevice .right a + a {
margin-top: 1rem;
}
@media (min-width: 768px) {
.mainSevice .right a + a {
margin-left: 1rem;
margin-top: 0;
}
}
.mainBanner {
background-image: url(/kr/assets/images/hyundai/product-img/producy-mtemp8.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 34rem;
margin-top: 6rem;
display: flex;
align-items: center;
padding-top: 5rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.mainBanner {
padding-top: 0;
padding-bottom: 0;
height: 34rem;
background-image: url(/kr/assets/images/hyundai/product-img/producy-temp8.png);
}
}
@media (min-width: 1025px) {
.mainBanner {
margin-top: 8rem;
}
}
.mainBanner .mabannerInner {
position: relative;
display: flex;
flex-wrap: wrap;
max-width: 120rem;
width: 100%;
margin: 0 auto;
padding-left: 2rem;
padding-right: 2rem;
height: 100%;
flex-direction: column;
justify-content: space-between;
}
@media (min-width: 768px) {
.mainBanner .mabannerInner {
height: auto;
flex-direction: inherit;
justify-content: inherit;
}
}
@media (min-width: 1240px) {
.mainBanner .mabannerInner {
max-width: 120rem;
padding-left: 0rem;
padding-right: 0rem;
}
}
.mainBanner .mabannerInner dl {
width: 100%;
}
.mainBanner .mabannerInner dl dt, .mainBanner .mabannerInner dl dd {
width: 100%;
color: #fff;
}
.mainBanner .mabannerInner dl dt {
font-size: 2.5rem;
font-weight: 300;
font-family: "GenesisSansHead";
}
@media (min-width: 1025px) {
.mainBanner .mabannerInner dl dt {
font-size: 4rem;
}
}
.mainBanner .mabannerInner dl dd {
margin-top: 1.5rem;
line-height: 2.2rem;
}
.mainBanner .mabannerInner dl dd br {
display: none;
}
@media (min-width: 768px) {
.mainBanner .mabannerInner dl dd br {
display: block;
}
}
.mainBanner .mabannerInner .listImgBtn {
width: 100%;
margin-top: 3rem;
}
@media (min-width: 768px) {
.mainBanner .mabannerInner .listImgBtn {
width: 17.6rem;
}
}
.mainNotice {
margin-top: 9rem;
}
@media (min-width: 1025px) {
.mainNotice {
margin-top: 15rem;
}
}

1
assets/css/genesis/genesisMain.css.map Normal file
View File

File diff suppressed because one or more lines are too long

870
assets/css/genesis/genesisMain.scss Normal file
View File

@@ -0,0 +1,870 @@
@charset "UTF-8";
@import '../utils.scss';
/*변수파일 import*/
@keyframes fadein {
from {
opacity: 0.9;
}
to {
opacity: 1;
}
}
.contentWarp.main{
margin-bottom:0;
.mainWarpInner{
width:120rem;
margin:0 auto;
}
}
.mainBanner+.contentWarp{
margin-top: 8rem;
.mainWarpInner{
.mainProductList{
.mainProductInner{
margin-top:0;
}
}
}
}
.mainTopKey{
width:100%;
position: absolute;
top:0;
left:50%;
transform: translate(-50%, 0);
z-index: 2;
@include desktopMin{
max-width: 192rem;
}
.mainSwiper{
max-width: 192rem;
width:100%;
top:0;
left:50%;
transform: translate(-50%, 0);
height:64rem;
background-size: cover;
z-index: 0;
@include tablet{
height:64rem;
}
@include desktopMin{
height:69rem;
}
@include desktopMax{
height:85.5rem;
}
&::before{
content: "";
display: block;
position: absolute;
width:100%;
height:8rem;
top:0;
background: linear-gradient(180deg, rgba(5,20,31,0.8) 0%, rgba(5,20,31,0) 100%);
z-index: 2;
}
ul{
li{
displaY:flex;
height:64rem;
background-size: cover;
@include tablet{
height:69rem;
}
@include desktopMin{
height:69rem;
}
@include desktopMax{
height:85.5rem;
}
.mainLine{
position: fixed;
left:0;
top:50%;
transform: translate(-50%);
background-image: url(/kr/assets/images/genesis/maib-line.png);
background-position: center right;
background-repeat: no-repeat;
width:30%;
height:6rem;
}
.mainText{
width:100%;
height:33rem;
margin:0 auto;
display:flex;
flex-wrap: wrap;
padding-left:2rem;
padding-right:2rem;
flex-direction: column;
justify-content: space-between;
margin-top:16rem;
@include desktopMin{
width:120rem;
margin-top:20.5rem;
height:33rem;
}
@include desktopMax{
padding-left:0rem;
padding-right:0rem;
margin-top:20.5rem;
height:48rem;
}
p{
width:100%;
strong{
font-size: 3.5rem;
font-weight: 300;
font-family: 'GenesisSansHead';
@include desktopMin{
font-size: 8rem;
}
}
strong,
span{
displaY:block;
width:100%;
color:#fff;
}
span{
margin-top:2.5rem;
font-size: 1.6rem;
line-height: 2.8rem;
font-weight: 300;
@include desktopMax{
font-size: 2rem;;
}
}
}
.oneButton{
width:11rem;
margin-top:5rem;
a{
display: flex;
align-items: center;
background-color: transparent;
border:none;
p{
color:#fff;
}
&::after{
content: "";
width:1.4rem;
height:0.8rem;
background-image: url(/kr/assets/images/common/icon-wtbarrow.svg);
background-size: contain;
background-repeat: no-repeat;
transform: rotate(-90deg);
}
}
}
}
}
}
.swiper-pagination{
bottom:10.8rem;
span{
width: 1rem;
height: 1rem;
border-radius: 50%;
background-color: #fff;
opacity: 0.5;
}
.swiper-pagination-bullet-active{
background-color: transparent;
border:1px solid #fff;
opacity: 1;
}
}
}
.mycarInfo{
display: flex;
justify-content: space-between;
align-items: center;
width:100%;
height:8.7rem;
position: absolute;
bottom:0;
left:0;
z-index: 1;
background-color:rgba(0,0,0,0.6);
@include desktopMin{
width:100%;
padding-left:2rem;
padding-right:2rem;
}
@include desktopMax{
max-width:192rem;
padding-left:0rem;
padding-right:0rem;
}
.mycarInfoInner{
width:100%;
margin:0 auto;
display: flex;
align-items: center;
justify-content: space-between;
@include desktopMax{
width:120rem;
}
.mainComment{
display: none;
@include desktopMin{
display:block;
}
p{
color:#fff;
font-size: 1.6rem;
display: flex;
align-items: center;
&::before{
content: "";
display:block;
width:4.3rem;
height:4.3rem;
margin-right:1.5rem;
background-image: url(/kr/assets/images/common/icon-car.svg);
background-size: contain;
background-repeat: no-repeat;
}
}
}
.mainCarNum{
width:100%;
@include desktopMin{
width:fit-content;
}
.carlist {
position: relative;
width:100%;
padding-left:2rem;
padding-right:2rem;
@include desktopMin{
width:auto;
display: block;
padding-left:0rem;
padding-right:0rem;
}
span{
color: #fff;
font-weight: 400;
displaY:flex;
width:auto;
min-width: 2.2rem;
@include desktopMin{
width:fit-content;
}
}
span+span{
width:100%;
@include desktopMin{
width:fit-content;
}
&::before{
content:"";
displaY:block;
width:1px;
height:1.4rem;
background-color:#DEDEDE;
margin-left:1rem;
margin-right:1rem;
}
}
.carItem {
displaY:flex;
height:8.7rem;
font-size:1.4rem;
align-items: center;
cursor: pointer;
color:#676767;
&::after{
content:"";
width:2.5rem;
height:0.8rem;
displaY:block;
background: url("/kr/assets/images/common/icon-wtbarrow.svg") center right no-repeat;
background-size: 1.2rem;
}
&:hover,
&:focus{
border:none;
outline: none;
}
}
.carItem.on{
.carlistItem{
display:block;
}
}
.carlistItem {
display: none;
position: absolute;
width: 100%;
min-width:17rem;
top: 8.7rem;
left: 50%;
transform: translate(-50%, 0);
background-color: #fff;
z-index:1;
@include desktopMin{
width: fit-content;
}
.boxBullet{
display:none;
@include desktopMin{
width:1.4rem;
height:1rem;
displaY:block;
position:absolute;
top:-0.9rem;
left:50%;
transform: translate(-50%,0);
z-index: 1;
}
}
ul{
position: relative;
display: block;
padding: 2rem;
background-color:#fff;
border:1px solid #DEDEDE;
li {
a {
display:flex;
font-size:1.4rem;
align-items: center;
&:hover{
span{
color:#000;
}
}
span{
color: #9EA1A2;
font-weight: 400;
displaY:flex;
width:fit-content;
}
}
}
li+li{
margin-top:1rem;
}
}
}
.carlistItem.on{
display:block;
}
.carItem.on+.carlistItem {
display: block;
width:100%;
@include desktopMin{
width: fit-content;
}
}
}
.carlist.on {
a {
&::after{
transform: rotate(-180deg);
background-position-x: left;
}
}
}
}
}
}
}
.mainTopKey+.contentWarp{
margin-top:63.5rem;
z-index: 1;
@include desktopMax{
margin-top:85.5rem;
}
}
.mainProductList{
padding-left: 2rem;
padding-right: 2rem;
@include desktopMax{
padding-left:0;
padding-right:0;
}
.mainContensTitle{
display:block;
h1,p{
text-align: left;
}
h1{
font-size: 3.5rem;
font-weight: 300;
text-transform: uppercase;
font-family: "GenesisSansHead";
@include desktopMin{
font-size: 5.5rem;
line-height: 6rem;
}
}
p{
display: none;
font-size:1.8rem;
font-weight: 400;
margin-top:1.5rem;
color:#676767;
@include desktopMin{
display:block;
}
}
}
.mainProductInner{
max-width:50rem;
margin:0 auto;
margin-top:2rem;
@include tablet{
max-width:120rem;
}
@include desktopMin{
margin-top:5rem;
margin-top:7rem;
}
ul{
li{
position: relative;
width:100%;
overflow: hidden;
background-color:#fff ;
display: flex;
flex-direction: column;
border:1px solid #DEDEDE;
@include desktopMin{
height:35rem;
}
@include tablet{
display: grid;
flex-direction: inherit;
grid-template-columns: 35rem auto;
}
>p{
position: relative;
width: 100%;
@include desktopMax{
height:35rem;
width:35rem;
}
img{
top: 0;
left: 0;
transform: translate(50, 50);
width: 100%;
height: 100%;
object-fit: cover;
margin: auto;
}
}
.productSmallVideo{
position: absolute;
top:0;
left:0;
z-index: 0;
width:100%;
height:100%;
}
video{
width:100%;
height:100%;
}
.contentInfo{
width:100%;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
padding:2rem;
@include tablet{
padding:3rem;
}
@include desktopMin{
padding:4rem;
justify-content: inherit;
}
@include desktopMax{
height:100%;
justify-content: inherit;
}
.tag{
display: flex;
span{
padding:0.6rem;
font-size: 1.3rem;
font-weight: 400;
color: #9EA1A2;
background-color: #fff;
border:1px solid #9EA1A2;
text-transform: uppercase;
font-family: "GenesisSansHead";
@include desktopMin{
font-size: 1.3rem;
}
}
span+span{
margin-left:0.8rem;
}
}
.tag+h2{
margin-top:2rem;
}
h2{
font-size:3.5rem ;
font-weight: 300;
color:#000;
text-transform: uppercase;
font-family:"GenesisSansHead";
@include desktopMin{
font-size: 4rem;
}
}
.listOtionPrice{
margin-top:3rem;
display:block;
@include tablet{
margin-top:0rem;
display:flex;
align-items: center;
}
@include desktopMin{
position: absolute;
bottom:4rem;
left:4rem;
}
@include desktopMax{
position: absolute;
bottom:4rem;
left:4rem;
}
dl{
displaY:flex;
justify-content: space-between;
flex-direction: row-reverse;
width: 100%;
align-items: center;
@include tablet{
width: fit-content;
flex-direction: column-reverse;
justify-content: inherit;
}
dt,dd{
color:#676767;
font-size:1.4rem;
width: 100%;
@include desktopMin{
font-size:1.6rem;
}
}
dt{
font-weight: 400;
border-left:1px solid rgba(255,255,255,0.5);
}
dd{
font-weight: 400;
margin-top:1rem;
color:#000;
text-align: right;
@include tablet{
text-align: left;
}
}
}
dl+dl{
border-top:1px solid #DEDEDE;
margin-top:1.5rem;
padding-top:1.5rem;
@include tablet{
border-left:1px solid #DEDEDE;
margin-left:1.5rem;
padding-left:1.5rem;
border-top:0;
margin-top:0;
padding-top:0;
}
}
}
.noActionDescript{
color:#676767;
font-weight: 400;
line-height: 2.2rem;
font-size:1.4rem;
margin-top:1rem;
@include desktopMin{
font-size:1.6rem;
margin-top:1.5rem;
line-height: 2.4rem;
}
}
.listImgBtn{
right:4rem;
bottom:4rem;
width:100%;
margin-top:4rem;
@include tablet{
margin-top:0rem;
width:16rem;
}
@include desktopMin{
position: absolute;
}
@include desktopMax{
position: absolute;
}
}
.descript+.listImgBtn{
margin-top:4rem;
}
}
}
li+li{
margin-top:4rem;
}
}
}
}
.mainSevice{
width:100%;
display: flex;
flex-wrap: wrap;
max-width: 120rem;
margin:0 auto;
justify-content: space-between;
padding-left:2rem;
padding-right:2rem;
margin-top:5rem;
@include tablet{
margin-top:6rem;
flex-wrap: nowrap;
}
@include desktopMin{
margin-top:12rem;
}
@include desktopMax{
padding-left:0;
padding-right:0;
}
.left{
@include tablet{
width:50%;
}
span{
color:#676767;
font-size: 1.6rem;
text-transform: uppercase;
font-family: "GenesisSansHead";
}
h2{
margin-top:1rem;
font-size:3rem;
font-weight: 300;
line-height: 4rem;
font-family: "GenesisSansHead";
@include desktopMin{
font-size:4rem;
line-height: 5rem;
}
}
}
.right{
display: flex;
flex-wrap: wrap;
margin-top:2.5rem;
width:100%;
@include tablet{
flex-wrap: nowrap;
width:50%;
margin-top:0;
}
a{
width:100%;
height:14rem;
padding:3rem;
border:1px solid #DEDEDE;
@include tablet{
height:17rem;
}
@include desktopMin{
width:29rem;
}
&:hover{
border:1px solid #05141F;
}
.faq,.cs{
display:flex;
height:100%;
flex-direction: column;
justify-content: space-between;
span{
position: relative;
displaY:block;
font-weight: 400;
font-size: 1.8rem;
color:#000;
&::after{
content: "";
position: absolute;
right:0;
displaY:inline-block;
width:0.8rem;
height:1.6rem;
background-size: contain;
background-repeat: no-repeat;
background-position: center right;
background-image: url(/kr/assets/images/common/icon-bgo.svg);
}
}
&::before{
content: "";
display:block;
width:4.5rem;
height:4.5rem;
background-size: contain;
background-repeat: no-repeat;
}
}
.faq{
&::before{
background-image: url(/kr/assets/images/common/icon-faq.svg);
}
}
.cs{
&::before{
background-image: url(/kr/assets/images/common/icon-bannercs.svg);
}
}
}
a+a{
margin-top:1rem;
@include tablet{
margin-left:1rem;
margin-top:0;
}
}
}
}
.mainBanner{
background-image: url(/kr/assets/images/hyundai/product-img/producy-mtemp8.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height:34rem;
margin-top:6rem;
display: flex;
align-items: center;
padding-top:5rem;
padding-bottom:4rem;
@include tablet{
padding-top:0;
padding-bottom:0;
height:34rem;
background-image: url(/kr/assets/images/hyundai/product-img/producy-temp8.png);
}
@include desktopMin{
margin-top:8rem;
}
.mabannerInner{
position: relative;
display: flex;
flex-wrap: wrap;
max-width:120rem;
width:100%;
margin:0 auto;
padding-left:2rem;
padding-right:2rem;
height:100%;
flex-direction: column;
justify-content: space-between;
@include tablet{
height:auto;
flex-direction: inherit;
justify-content: inherit;
}
@include desktopMax{
max-width:120rem;
padding-left:0rem;
padding-right:0rem;
}
dl{
width:100%;
dt,dd{
width:100%;
color:#fff;
}
dt{
font-size: 2.5rem;
font-weight: 300;
font-family:"GenesisSansHead" ;
@include desktopMin{
font-size: 4rem;
}
}
dd{
margin-top:1.5rem;
line-height: 2.2rem;
br{
display:none;
@include tablet{
display: block;
}
}
}
}
.listImgBtn{
width:100%;
margin-top:3rem;
@include tablet{
width:17.6rem;
}
}
}
}
.mainNotice{
margin-top:9rem;
@include desktopMin{
margin-top:15rem;
}
}