@charset "UTF-8"; @import '../utils.scss'; html{ body{ font-family: 'GenesisSansHead'; font-weight: 400; } input[type=checkbox]{ accent-color:#000; width:2rem; height:2rem; border-radius: 0.6rem; border-color: #DEDEDE; } // 아이콘 .icon-cs{width:2.4rem; height:2.4rem; background-image: url(/kr/assets/images/common/icon-wcs.svg);} .icon-user{width:2.4rem; height:2.4rem; background-image: url(/kr/assets/images/common/icon-wuser.svg);} .icon-cart{width:2.4rem; height:2.4rem; background-image: url(/kr/assets/images/common/icon-wcart.svg);} .hederWarp.noBoder, .hederWarp.hBoder{ .icon-cs{width:2.4rem; height:2.4rem; background-image: url(/kr/assets/images/common/icon-wcs.svg);} .icon-user{width:2.4rem; height:2.4rem; background-image: url(/kr/assets/images/common/icon-wuser.svg);} .icon-cart{width:2.4rem; height:2.4rem; background-image: url(/kr/assets/images/common/icon-wcart.svg);} } textarea{ width:100%; border:1px solid #DEDEDE; outline: 0 none; border-radius: 0; padding:1.5rem 1.7rem; font-size:1.6rem; font-family: 'genesisSansHeadKR'; } .icon-tbarrow {width:2.4rem; height:2.4rem; background-image: url(/kr/assets/images/kia/svg/icon-tbarrow.svg);} .icon-wtbarrow {width:2.4rem; height:2.4rem; background-image: url(/kr/assets/images/kia/svg/icon-wtbarrow.svg);} .scrollDisable{ .logoImg{ background-image: url(/kr/assets/images/kia/kia-blogo.svg); } } //메인 .mainNotice{ background-color: #F3F3F3; height:8.5rem; width:100%; display: flex; justify-content: center; align-items: center; padding-left:2rem; padding-right:2rem; @include tablet{ height:8.5rem; } @include desktopMax{ padding-left:0; padding-right:0; } .noticInnerWarp{ width:100%; @include desktopMax{ width:120rem; } .noticeInner{ display:flex; height:8.5rem; position: relative; @include tablet{ height:10rem; } h2{ display: none; @include tablet{ font-size: 2.2rem; font-weight: 400; font-family: "GenesisSansHead"; text-transform: uppercase; color:#000; display:flex; align-items: center; } } .mainNiticeList{ margin-left:0rem; display:flex; align-items: center; height:8.5rem; width:100%; overflow: hidden; justify-content: space-between; @include tablet{ margin-left:7.5rem; height:10rem; } ul{ li{ display:flex; align-items: flex-start; padding-top:2.3rem; @include tablet{ align-items: center; padding-top:0; } dl{ display:flex; flex-wrap: wrap; align-items: center; @include tablet{ flex-wrap: nowrap; } dt,dd{ font-size:1.4rem; width:100%; @include tablet{ font-size:1.6rem; width:fit-content; } } dt{ color:#9EA1A2; font-family: "GenesisSansHead"; } dd{ color:#000; margin-top:0.8rem; font-weight: 400; @include tablet{ margin-top:0; border-left:1px solid rgba(0, 0, 0, 0.3); padding-left:1rem; margin-left:1rem; } } } } } .swiperButtonWarp{ right:0; margin-top: 2rem; .swiper-button-next, .swiper-button-prev{ position: relative; justify-content:flex-end; top:55%; margin-top:0; height:auto; width:auto; right:inherit; &::after{ content: ""; display: block; width:1.4rem; height:0.8rem; background-image: url(/kr/assets/images/common/icon-notice.svg); background-repeat: no-repeat; background-position:center; } } .swiper-button-next{ transform: rotate(0deg); margin-top:-2rem; right:0; } .swiper-button-prev{ transform: rotate(-180deg); margin-bottom:0; left:0; margin-top: 2rem; } } } } } } //현대푸터 .footer{ position: relative; width:100%; height:100%; background-color: #111; color:#fff; font-family: 'genesisSansHeadKR'; padding-top:5rem; @include tablet{ padding-bottom:10rem; } @include desktopMax{ padding-top:7rem; padding-bottom:7.5rem; } .genesisInner{ position: relative; width:100%; padding-left:2rem; padding-right:2rem; margin:0 auto; display: block; padding-bottom:16.3rem; @include tablet{ padding-bottom:0rem; } @include desktopMax{ width:120rem; padding-left:0; padding-right:0; } .tLeft{ displaY:block; @include desktopMax{ display: flex; } .companyInfo{ margin-left:0rem; margin-top:0; @include tablet{ margin-top:2.5rem; } @include desktopMax{ margin-top:0rem; } ul{ displaY:flex; li{ displaY:flex; align-items: center; color:#aaa; font-size:1.2rem; font-weight: 400; @include tablet{ font-size:1.2rem; } a{ color:#aaa; font-size:1.2rem; font-weight: 400; } &:first-child{ a{ color:#C36F51; font-weight: 600; } } &::after{ content:""; displaY:block; margin-left:1rem; margin-right:1rem; width: 1px; height:1.5rem; background-color: rgba(68, 68, 68, 1); } &:last-child{ &::after{ display: none; } } } } ul+ul{ margin-top:1.3rem; flex-wrap: wrap; @include tablet{ margin-top:0.9rem; } li{ margin-bottom:1rem; &:nth-child(3){ &::after{ displaY:none; } } &:nth-child(1), &:nth-child(2), &:nth-child(3), &:nth-child(4){ width:100%; @include tablet{ width:fit-content; } &::after{ display:none; @include tablet{ display:block; } } } } } } } .csTime{ min-width:25rem; margin-top:3rem; @include tablet{ display: flex; justify-content: space-between; } >div{ >ul{ displaY:flex; flex-wrap: wrap; >li{ displaY:flex; width:100%; align-items: center; color:#aaa; font-size:1.2rem; font-weight: 400; @include tablet{ font-size:1.2rem; } p{ color:#aaa; font-size:1.2rem; font-weight: 400; } >&:first-child{ a{ color:#fff; font-weight: 600; } } >&::after{ content:""; displaY:block; margin-left:1rem; margin-right:1rem; width: 1px; height:1.5rem; background-color: rgba(68, 68, 68, 1); } > &:last-child{ &::after{ display: none; } } } >li+li{ margin-top:0.8rem; } } p{ strong{ displaY:block; font-size:1.4rem; font-weight: 400; color:#fff; margin-bottom:1rem; } span{ displaY:block; font-size: 1.4rem; font-weight: 400; color:#aaa; } } p+p{ margin-top:0.8rem; } } } .copyRight{ position:absolute; left:2rem; bottom:4rem; font-size: 1.2rem; @include tablet{ bottom:0; } @include desktopMax{ left:15rem; } span{ font-family: Arial, Helvetica, sans-serif; } } .familyBoxWarp{ display:flex; justify-content: flex-start; width:100%; @include tablet{ width:24rem; justify-content: flex-end; } .familyBox{ margin-top:2.7rem; width:100%; .familyInner{ .cont-select { position: relative; width: 100%; height:4.5rem; min-width:10rem; @include tablet{ width:24rem; } .btn-select { position: relative; width: 100%; height:3.5rem; font-size:1.4rem; padding: 1rem; background-color: #1D1D1D; border: 1px solid #676767; box-sizing: border-box; cursor: pointer; text-align: left; color:#fff; line-height: 1; /* 말줄임 */ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-transform: uppercase; font-family: "GenesisSansHead"; @include tablet{ font-size:1.4rem; } &::after{ content: ""; position: absolute; right:1rem; top:35%; transform: translate(-50%, 0); width:1.2rem; height:1.2rem; displaY:block; background: url("/kr/assets/images/common/icon-wplus.svg") ; background-size: contain; background-repeat: no-repeat; transform: rotate(-180deg); } } .list-member { display: none; position: absolute; padding: 1rem 1.5rem; width: 100%; bottom: 4.4rem; left: 0; border: 1px solid #676767; box-sizing: border-box; background-color:#1D1D1D; z-index: 1; } .btn-select.on { &::after{ transform: rotate(0deg); } } .btn-select.on+.list-member { display: block; } .list-member li { display: flex; align-items: center; font-size:1.4rem; line-height: 2; height:3rem; box-sizing: border-box; } .list-member li a { display: block; width: 100%; font-size:1.4rem; border: none; cursor: pointer; text-align: left; color:#676767; /* 말줄임 */ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; &::after{ content: none; } &:hover{ color:#fff; } } } } } .searchTextBox{ width:100%; border:1px solid #DEDEDE; border-left:0; height:4.5rem; padding: 1rem 2rem; display: flex; justify-content: space-between; @include tablet{ width:32rem; } input[type=text]{ width:100%; } .icon-search{ displaY:block; width:2.4rem; height:2.4rem; background-image: url(/kr/assets/images/common/icon-search.svg); background-size: contain; } } } } .logoSEction{ width:100%; text-align: center; border-top:1px solid #1E1E1E; margin-top:6rem; padding-top:5.5rem; @include tablet{ display:block; } >div{ max-width:120rem; margin:0 auto; img{ width:10rem; height:2rem; } .copyRight{ position: relative; left:initial; bottom: initial; margin-top:1.5rem; @include tablet{ margin-top:0; } } } } .top{ position: absolute; right: 2rem; bottom: 65rem; @include tablet{ right: 7.5rem; bottom: 60rem; } } } //현대 결재버튼 [2개 짜리] .towButton{ .leftBtn, .rightBtn{ height:4.8rem; displaY:flex; width: 100%; p{ displaY:flex; justify-content: center; align-items: center; width:100%; height:4.8rem; font-size: 1.4rem; font-weight: 400; font-family: 'GenesisSansText'; } } .leftBtn{ p{ background-color: #fff; color:#000; border-width:1px; border-style: solid; border-color: #111; border-radius: 0; } &:hover{ p{ color:#fff; border-color: #111; background-color: #111; } } } .rightBtn{ border-radius: 0.4rem ; p{ background-color: #111; color:#fff; border:1px solid #111; border-radius:0; font-family: 'GenesisSansText'; } &:hover{ p{ color:#05141F; border-color: #111; background-color: #fff; } } } } //현대 버튼 [1개 짜리 불랙] .oneButton{ height:4.5rem; width:100%; display: flex; justify-content: center; @include tablet{ max-width: 18.8rem; } button, div, a{ width:100%; height:4.5rem; align-items: center; display:flex; border:1px solid #111; background-color: #fff; p{ font-family: 'GenesisSansText'; display:flex; font-size: 1.6rem; align-items: center; justify-content: center; width:100%; color:#111; } &:hover{ border:1px solid #000; background-color: #000; p{ color:#fff; } } } } .oneButtonBlack{ height:4.8rem; width:100%; button, a{ width:100%; // max-width:calc(100% - 54px); display:flex; &:hover{ p{ color:#fff; border-color: #111; background-color: #111; } } p{ font-family: 'genesisSansHeadKR'; display:flex; font-size: 1.4rem; font-weight: 600; align-items: center; justify-content: center; height: 4.8rem; width:100%; background-color: #fff; color:#111; border-width:1px; border-style: solid; border-color: #111; border-radius: 0 ; } } } } //헤더 .hederWarp{ .headerInner{ .headerTop{ .headerGnb{ .logo{ a{ font-family: 'genesisSansHeadKR'; .logoImg{ display:block; width:8.5rem; height:1.7rem; background-image: url(/kr/assets/images/genesis/genesis-logo.svg); @include desktopMin{ width:12.8rem; height:2.6rem; } } } p{color:#fff !important; text-transform: uppercase;} } .logo.on{ a{ .logoImg{ width:8.5rem; height:1.7rem; background-image: url(/kr/assets/images/genesis/genesis-logo.svg); } } p{ color:#fff !important; } } .topUtil{ position: relative; display:flex; align-items: center; .carlist { position: relative; display: none; @include desktopMin{ display: block; } span{ color: #fff; font-weight: 400; displaY:flex; width:fit-content; min-width: 2.2rem; } span+span{ &::before{ content:""; displaY:block; width:1px; height:1.4rem; background-color:#fff; margin-left:1rem; margin-right:1rem; } } .carItem { displaY:flex; height:8rem; font-size:1.4rem; align-items: center; cursor: pointer; color:#fff; &::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: fit-content; min-width:17rem; top: 7.9rem; left: 50%; transform: translate(-50%, 0); @include desktopMin{ } .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; } } .carlist.on { a { &::after{ transform: rotate(-180deg); background-position-x: left; } } } .gnbIcon{ display:flex; i{ displaY:block; } .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; } } .mMenuWarp{ position: fixed; //display: none; right:-100rem; top:0; height:100vh; width: 100%; min-width:36rem; -webkit-transition: right .3s; -moz-transition: right .3s; -ms-transition: right .3s; -o-transition: right .3s; transition: right .3s; @include mobile{ max-width:36rem; } @include maxtablet{ background-color: #fff; } @include mobileSmall{ max-width:32rem; } @include tablet{ max-width:36rem; } @include desktopMin{ position:inherit; display:flex; align-items: center; right:inherit; top:inherit; width:auto; height:auto; width:100%; min-width:auto; box-shadow:none; } .mobileMember{ margin-top:5.6rem; displaY:flex; @include desktopMin{ display:none; } button{ width:50%; height:5rem; background-color:#F3F3F3 ; border: solid #DEDEDE; border-width: 1px 1px 1px 0px; padding:2rem; display: flex; align-items: center; justify-content: space-between; @include desktopMin{ display:none; } &::after{ content: ""; display:block; width:0.6rem; height:1.2rem; background-image: url(/kr/assets/images/common/icon-mMarrow.svg); background-repeat: no-repeat; background-size: contain; } } button+button{ border-right:0; } @include desktopMin{ display: none; } } .menu{ position: relative; padding:3rem 2rem; min-height:100vh; overflow-y:auto; background-color: #fff; @include desktopMin{ padding:0; min-height:auto; overflow-y:inherit; padding:0; background-color: transparent; } > a{ display:none; @include desktopMin{ display:flex; align-items: center; height:8rem; } } .gnbMenu{ width: 100%; displaY:block; margin-bottom:4rem; @include desktopMin{ display:none; position: absolute; min-width:11rem; top: 7.9rem; left: 50%; transform: translate(-50%, 0); background-color:#fff; padding: 1.5rem; border:1px solid #DEDEDE; } .moblieBlock{ display:block; margin-top:5rem; @include desktopMin{ display:none; } li{ a{ color:#676767; } } li+li{margin-top:2rem;} } ul{ position: relative; display: block; li { a { display:flex; font-size:1.6rem; font-weight: 600; align-items: center; color:#000; @include desktopMin{ color:#9EA1A2; font-size:1.4rem; font-weight: 400; } &:hover{ color:#000; } span{ color: #676767; font-weight: 400; displaY:flex; width:fit-content; } } } li+li{ margin-top:3rem; @include desktopMin{ margin-top:1rem; } } } } .loginBtn{ @include desktopMin{ display: none; } } .gnbMenu.on{ display:block; } } .user{ position: relative; display:none; @include desktopMin{ display:block; } > a{ display:none; @include desktopMin{ display:flex; align-items: center; height:8rem; } } .userMenu{ @include desktopMin{ displaY:none; width: 100%; min-width:11rem; top: 7.9rem; left: 50%; transform: translate(-50%, 0); position: absolute; padding: 1.5rem; background-color:#fff; border:1px solid #DEDEDE; } ul{ position: relative; display: block; li { a { display:flex; font-size:1.4rem; align-items: center; color:#9EA1A2; &:hover{ color:#000; } span{ color: #676767; font-weight: 400; displaY:flex; width:fit-content; } } } li+li{ margin-top:1rem; } } } .userMenu.on{ display:block; } } .menu+.user{ margin-left:2rem; } } .mMenuWarp.on{ right:0rem; display:block; background-color: #000; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; } .mMenuWarp+.cart{ margin-left:0; @include desktopMin{ margin-left:2rem; } } .cart{ > a{ display:flex; align-items: center; height:5.6rem; @include desktopMin{ height:8rem; } } } .moblieMenu{ position:relative; display:block; width:3rem; height:5.6rem; @include desktopMin{ display:none; height:8rem; } .slide-open{ position:absolute; display: flex; align-items: center; justify-content: flex-end; top:50%; left:0%; width:3.6rem; height:5rem; transform: translate(0%,-50%); cursor:pointer; } .burgur{ display:block; position: absolute; width:0px; height:0px; left: 50%; transform: translate(-50%, -50%); top: 50%; } .burgur .top-line{ width: 1.8rem; height:0.2rem; background-color: #fff; bottom: -0.4rem; content: ''; position: absolute; left: -0.4rem; -webkit-transition: -webkit-transform .3s; transition: transform .3s; } .burgur .bot-line { width: 1.8rem; height: 0.2rem; background-color: #fff; top: -0.6rem; content: ''; position: absolute; left: -0.4rem; -webkit-transition: -webkit-transform .3s; transition: transform .3s; } .burgur.on { width: 0; } .burgur.on .bot-line { -webkit-transform: translateY(4px) rotate(135deg); transform: translateY(4px) rotate(135deg); background-color: #fff; } .burgur.on .top-line{ -webkit-transform: translateY(-4px) rotate(-135deg); transform: translateY(-4px) rotate(-135deg); background-color: #fff; } } } .carlist+.gnbIcon{ margin-left:0; @include desktopMin{ margin-left:2.5rem; } } } } } } } .hederWarp.hBoder, .hederWarp.noBoder{ .headerInner{ .headerTop{ .headerGnb{ .logo{ a{ font-family: 'genesisSansHeadKR'; .logoImg{ display:block; width:8.5rem; height:1.7rem; background-image: url(/kr/assets/images/genesis/genesis-logo.svg); @include desktopMin{ width:12.8rem; height:2.6rem; } } } p{color:#fff !important; text-transform: uppercase;} } .logo.on{ a{ .logoImg{ width:8.5rem; height:1.7rem; background-image: url(/kr/assets/images/genesis/genesis-logo.svg); } } p{ color:#fff !important; } } .topUtil{ position: relative; display:flex; align-items: center; .carlist { position: relative; display: none; @include desktopMin{ display: block; } span{ color: #fff; font-weight: 400; displaY:flex; width:fit-content; min-width: 2.2rem; } span+span{ &::before{ content:""; displaY:block; width:1px; height:1.4rem; background-color:#fff; margin-left:1rem; margin-right:1rem; } } .carItem { displaY:flex; height:8rem; font-size:1.4rem; align-items: center; cursor: pointer; color:#fff; &::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: fit-content; min-width:17rem; top: 7.9rem; left: 50%; transform: translate(-50%, 0); @include desktopMin{ } .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; } } .carlist.on { a { &::after{ transform: rotate(-180deg); background-position-x: left; } } } .gnbIcon{ display:flex; i{ displaY:block; } .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; } } .mMenuWarp{ position: fixed; //display: none; right:-100rem; top:0; height:100vh; width: 100%; min-width:36rem; -webkit-transition: right .3s; -moz-transition: right .3s; -ms-transition: right .3s; -o-transition: right .3s; transition: right .3s; @include mobile{ max-width:36rem; } @include maxtablet{ background-color: #fff; } @include mobileSmall{ max-width:32rem; } @include tablet{ max-width:36rem; } @include desktopMin{ position:inherit; display:flex; align-items: center; right:inherit; top:inherit; width:auto; height:auto; width:100%; min-width:auto; box-shadow:none; } .mobileMember{ margin-top:5.6rem; displaY:flex; @include desktopMin{ display:none; } button{ width:50%; height:5rem; background-color:#F3F3F3 ; border: solid #DEDEDE; border-width: 1px 1px 1px 0px; padding:2rem; display: flex; align-items: center; justify-content: space-between; @include desktopMin{ display:none; } &::after{ content: ""; display:block; width:0.6rem; height:1.2rem; background-image: url(/kr/assets/images/common/icon-mMarrow.svg); background-repeat: no-repeat; background-size: contain; } } button+button{ border-right:0; } @include desktopMin{ display: none; } } .menu{ position: relative; padding:3rem 2rem; min-height:100vh; overflow-y:auto; background-color: #fff; @include desktopMin{ padding:0; min-height:auto; overflow-y:inherit; padding:0; background-color: #000; } > a{ display:none; @include desktopMin{ display:flex; align-items: center; height:8rem; } } .gnbMenu{ width: 100%; displaY:block; margin-bottom:4rem; @include desktopMin{ display:none; position: absolute; min-width:11rem; top: 7.9rem; left: 50%; transform: translate(-50%, 0); background-color:#fff; padding: 1.5rem; border:1px solid #DEDEDE; } .moblieBlock{ display:block; margin-top:5rem; @include desktopMin{ display:none; } li{ a{ color:#676767; } } li+li{margin-top:2rem;} } ul{ position: relative; display: block; li { a { display:flex; font-size:1.6rem; font-weight: 600; align-items: center; color:#000; @include desktopMin{ color:#9EA1A2; font-size:1.4rem; font-weight: 400; } &:hover{ color:#000; } span{ color: #676767; font-weight: 400; displaY:flex; width:fit-content; } } } li+li{ margin-top:3rem; @include desktopMin{ margin-top:1rem; } } } } .loginBtn{ @include desktopMin{ display: none; } } .gnbMenu.on{ display:block; } } .user{ position: relative; display:none; @include desktopMin{ display:block; } > a{ display:none; @include desktopMin{ display:flex; align-items: center; height:8rem; } } .userMenu{ @include desktopMin{ displaY:none; width: 100%; min-width:11rem; top: 7.9rem; left: 50%; transform: translate(-50%, 0); position: absolute; padding: 1.5rem; background-color:#fff; border:1px solid #DEDEDE; } ul{ position: relative; display: block; li { a { display:flex; font-size:1.4rem; align-items: center; color:#9EA1A2; &:hover{ color:#000; } span{ color: #676767; font-weight: 400; displaY:flex; width:fit-content; } } } li+li{ margin-top:1rem; } } } .userMenu.on{ display:block; } } .menu+.user{ margin-left:2rem; } } .mMenuWarp.on{ right:0rem; display:block; background-color: #000; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; } .mMenuWarp+.cart{ margin-left:0; @include desktopMin{ margin-left:2rem; } } .cart{ > a{ display:flex; align-items: center; height:5.6rem; @include desktopMin{ height:8rem; } } } .moblieMenu{ position:relative; display:block; width:3rem; height:5.6rem; @include desktopMin{ display:none; height:8rem; } .slide-open{ position:absolute; display: flex; align-items: center; justify-content: flex-end; top:50%; left:0%; width:3.6rem; height:5rem; transform: translate(0%,-50%); cursor:pointer; } .burgur{ display:block; position: absolute; width:0px; height:0px; left: 50%; transform: translate(-50%, -50%); top: 50%; } .burgur .top-line{ width: 1.8rem; height:0.2rem; background-color: #fff; bottom: -0.4rem; content: ''; position: absolute; left: -0.4rem; -webkit-transition: -webkit-transform .3s; transition: transform .3s; } .burgur .bot-line { width: 1.8rem; height: 0.2rem; background-color: #fff; top: -0.6rem; content: ''; position: absolute; left: -0.4rem; -webkit-transition: -webkit-transform .3s; transition: transform .3s; } .burgur.on { width: 0; } .burgur.on .bot-line { -webkit-transform: translateY(4px) rotate(135deg); transform: translateY(4px) rotate(135deg); background-color: #fff; } .burgur.on .top-line{ -webkit-transform: translateY(-4px) rotate(-135deg); transform: translateY(-4px) rotate(-135deg); background-color: #fff; } } } .carlist+.gnbIcon{ margin-left:0; @include desktopMin{ margin-left:2.5rem; } } } } } } } .infoSticky{ background-color: #1E1E1E; } body{ overflow-x: hidden; .faqKey{ background-image: url(/kr/assets/images/genesis/keybg/faq-key.png); @include desktopMin{ background-image: url(/kr/assets/images/genesis/keybg/faq-key.png); } } .csKey{ background-image: url(/kr/assets/images/genesis/keybg/cs-key.png); @include desktopMin{ background-image: url(/kr/assets/images/genesis/keybg/cs-key.png); } } .serviceInfo{ background-image: url(/kr/assets/images/genesis/keybg/serviceinfo-key.png); @include desktopMin{ background-image: url(/kr/assets/images/genesis/keybg/serviceinfo-key.png); } } .notice{ background-image: url(/kr/assets/images/genesis/keybg/notice-key.png); @include desktopMin{ background-image: url(/kr/assets/images/genesis/keybg/notice-key.png); } } } body#notice{ .hederWarp.hskey{ .headerInner{ background-color:#000; width:100%; .headerTop{ max-width:120rem; margin:0 auto; } } } .pageTitle{ h1{ font-weight: 300; } } .contentWarp{ .noticeList{ .borderList{ ul{ li{ a{ border:1px solid #DEDEDE; border-radius: 0; div{ p{ font-weight: 500; font-family: 'GenesisSansText'; } span{ color:#111; } } } } li.point{ a{ border:1px solid #111; border-radius: 0; } } } } } } .contentWarp.listView{ .noticeView{ .viewInner{ .viewTitle{ h1{ font-weight: 400; } p{ span{ color:#111; } } } } } } .btnNextPre{ .btnInner{ >div{ >p{ span{ font-weight: 400; } } div{ span{ color:#111; } a{ font-weight: 400; } } } div+div{ >div{ p{ font-weight: 400; } } } } } } body#faq{ .pageTitle{ h1{ font-weight: 300; } } .hederWarp.hskey{ .headerInner{ background-color:#000; width:100%; .headerTop{ max-width:120rem; margin:0 auto; } } } .contentWarp{ .faqList{ .faqAccodion{ .accordion{ dl{ border-radius: 0; dt{ font-weight: 500; font-family: 'GenesisSansText'; } } } .noList{ border-radius: 0; } } } .csWarp{ dl.important{ dt{ &::after{ content:""; background-color: #AF6249; } } } dl{ dt{ font-weight: 500; } } .csComplete{ p{ strong{ font-weight: 500; font-family: 'GenesisSansText'; } } } } } } .contentWarp{ .productView{ .productRight{ .optionWarp{ .producTitle{ h1{ font-weight: 300; } } .producOption{ h2{ font-weight: 500; font-family: 'GenesisSansText'; } .optionList{ .productSmallVideo{border-radius: 0rem;} .checkBtn{ label{ border-radius: 0rem; border:1px solid #DEDEDE; } input[type=checkbox]{ visibility: hidden; position: absolute; &:checked + label{ background-color: #fff !important; border:1px solid #05141F; &::before{ content: ""; position: absolute; right:2rem; top:50%; transform: translate(-50%, -50%); display:block; width:2rem; height:2rem; background-image: url(/kr/assets/images/genesis/svg/icon_select.svg) !important; background-size: contain; background-repeat: no-repeat; } div{ p{ span, strong{color:#000 !important;} } } } } &:hover{ label{ border:1px solid #000; } } div{ display:flex; flex-wrap: wrap; align-items: center; padding-left:3rem; p{ span, strong{displaY:block; width:100%; font-size:1.6rem ;} strong{font-weight: 600;} span{font-weight: 400;} strong + span{margin-top:1rem; } } } } .checkBtn + .checkBtn{margin-top:1rem;} } .priceList{ .radioBtn{ label{ border-radius: 0; strong{ font-weight: 400; } } } } } .producInfoWarp{ .producInfoLogIn{ ul{ li{ border-radius: 0; &:hover{ background-color: #fff; border-color: #111; dl{ dt, dd{ color:#111; p,strong{ color:#111; } } } } } } } } .priceTotal{ .total{ dt{ font-weight:500 ; } dd{ font-weight: 400; } } } } } } //현대 상품 상세 버튼 스타일 .cartView{ .pageTitle{ h1{ font-weight: 300; } p{ font-weight: 300; } } .productListWarp{ .allSelect{ border-radius: 0; } .productLis{ ul{ li{ border-radius: 0; .cartItem{ .cartItemInfo{ >div{ dl{ dd{ font-weight: 400; font-family: 'GenesisSansHead'; } dt{ font-weight: 400; font-family: 'GenesisSansHead'; } } } } .cartItemInfo+dl{ dd,dt{ font-weight: 400; font-family: 'GenesisSansText'; } } } .addBtnWarp{ .towButton{ display: block; .leftBtn{ margin-right:0; } .rightBtn{ margin-left:0; margin-top:1rem; } } } } } } .totalWarp{ border-radius: 0; .totalPrice{ p{ font-weight: 400; font-family: 'GenesisSansText'; } } } } } .tabWarp{ a{ font-weight: 400; } } .mypageWarp{ .leftLnbWarp{ .title{ h1{ font-weight: 300; font-family: 'GenesisSansHead'; } } .lnbList{ ul{ li{ a{ font-weight: 400; font-family: 'GenesisSansHead'; } } } } } .rightConWarp{ .conTitle{ h2{ font-weight: 300; } p{ font-family: 'GenesisSansText'; } } .myItemWarp{ >div{ h3{ font-weight: 400; font-family: 'GenesisSansText'; } .itemListWarp{ >ul{ >li{ border-radius: 0; .cartItem{ .cartItemInfo{ >div{ >p{ border-radius: 0; } dl{ dt{ font-weight: 400; } dd{ span{ color:#AF6249; } } } } } } .thankInfo { dt{ font-weight: 500; font-family: 'GenesisSansText'; } dd{ font-family: 'GenesisSansText'; } } } } } } >div.myPayList { >ul{ >li{ border-radius: 0; .paySummary { dl{ dt{ font-weight: 500; font-family: 'GenesisSansText'; } } dl.totalPay { dd{ font-weight: 500; font-family: 'GenesisSansText'; } } } } } } } .itemInfo { h3{ font-weight: 400; font-family: 'GenesisSansText'; } } .cancleInfo { dl{ dt{ font-weight: 500; font-family: 'GenesisSansText'; margin-bottom:1rem; } dd{ font-family: 'GenesisSansText'; color:#111; margin-top:0; } } dl+dl{ dt{ font-weight: 400; color:#111; } dd{ font-family: 'GenesisSansText'; color:#676767; } } } .questions { ul{ li{ border-radius: 0; a{ >div{ span, em{ font-weight: 400; font-family: 'GenesisSansHead'; } } >p{ font-weight:500 ; font-family: 'GenesisSansText'; } } } } } .questionsView { .usrQuestions { >div{ span{ font-weight: 400; } } dl{ dt{ font-weight: 500; font-family: 'GenesisSansText'; } dd{ font-family: 'GenesisSansText'; } } } .adminAnswer { dl{ dd{ font-family: 'GenesisSansText'; } } } } .listbtnWarp{ width:100%; max-width:38.4rem; justify-content: center; display: flex; } .myAccount { .myinfomation { >div{ p{ font-family: 'GenesisSansText'; strong{ font-weight: 500; font-family: 'GenesisSansText'; } span{ font-family: 'GenesisSansText'; } } } } .marketingAgrre{ h3{ strong{ font-weight: 500; font-family: 'GenesisSansText'; } p{ font-family: 'GenesisSansText'; } } div{ label{ span{ font-family: 'GenesisSansText'; } } } } .serviceOut{ dl{ dt{ font-weight: 500; color:#676767; font-family: 'GenesisSansText'; } dd{ input{ font-family: 'GenesisSansText'; } } } } .outAgrre { div{ label{ span{ font-family: 'GenesisSansText'; } } } } .outInfo { p{ strong{ font-family: 'GenesisSansText'; font-weight: 500; } span{ font-family: 'GenesisSansText'; } } } } } } .paging { .pagingInner { a{ font-family: 'GenesisSansText'; font-weight: 700; } } } .member { .pageTitle{ h1{ font-weight: 300; } } .section1, .section2, .section3{ h2{ font-weight: 500; font-family: 'GenesisSansText'; } p{ font-family: 'GenesisSansText'; } label{ span{ font-family: 'GenesisSansText'; } } } .section1{ .memberComplet { p{ strong{ font-weight: 500; font-family: 'GenesisSansText'; } span{ font-family: 'GenesisSansText'; } } } } .termsContents { h2{ font-family: 'GenesisSansText'; font-weight: 500; } h3,h4,p,span{ font-family: 'GenesisSansText'; } } } } .relatedProducts{ .relatedInnder{ .relatedList{ a{ .relatedListItem{ border-radius: 0; .itemInner{ .itemLeft{ .productName{ dt{ font-weight: 400; } } .img{ border-radius: 0; } } } } } } } } .contentWarp.carsw{ .carswRight{ .carswRightInner{ h2{ font-weight: 400; } .carswInfo{ dl{ dd{ font-weight: 400; font-family: 'GenesisSansText'; } } } } } .carsFull{ .pageSubTitle{ h2{ font-weight: 400; font-family: 'GenesisSansHead'; } p{ font-family: 'GenesisSansText'; } } .selectStreamign{ li{ border-radius: 0; >div{ div{ dl{ dt{ font-weight: 400; font-family: 'GenesisSansHead'; } } .oneButton{ a{ border:0; p{ border-width: 1px; height:4.8rem; } &::after, &::before{ content: none; } &:hover{ p{ background-color: #111; color:#fff; border-color: #111; } } } } } } } } .installGuide{ div{ p{ strong,span{ font-weight: 400; font-family: 'GenesisSansText'; } } } } .completeForm{ >div{ >dl{ .completeItemList{ ul{ li{ .imgItem{ >div{ border-radius: 0; } dl{ dt{ font-weight: 400; font-family: 'GenesisSansHead'; } } } .cachItem{ dl{ dd{ font-weight: 400; font-family: 'GenesisSansText'; } } } } } } >dd{ font-family: 'GenesisSansText'; } } } } } } .alertPopup{ display:none !important; .popInner{ border-radius: 0; p{ strong{ font-family: 'GenesisSansText'; font-weight: 500; } span{ font-family: 'GenesisSansText'; } } .tableStyle{ dl{ dt{ font-family: 'GenesisSansText'; } dd{ font-family: 'GenesisSansText'; } } } } }