NEW_GIL_HOME\hyeon
6373983f0b
- index.html 파일 생성 및 기본 구조 작성 - 스타일 초기화 및 스와이프 관련 SCSS 파일 추가 - 코드 품질 검사용 GitHub Actions 워크플로우 추가 - 다양한 이미지 파일 추가
864 lines
18 KiB
SCSS
864 lines
18 KiB
SCSS
@charset "utf-8";
|
|
@use '_reset' as *;
|
|
@use '_swiper' as *;
|
|
|
|
//rem 변환 $value = 디자인px
|
|
@function rem($value) {
|
|
$remValue: calc($value / 16) + rem;
|
|
@return $remValue;
|
|
}
|
|
|
|
//flex
|
|
$flex-map: (
|
|
start: flex-start,
|
|
end: flex-end,
|
|
between: space-between,
|
|
around: space-around,
|
|
stretch: stretch,
|
|
center: center
|
|
);
|
|
|
|
@function _get-flex-value($key) {
|
|
//입력한 키값($key)를 받아서
|
|
@return map-get($flex-map, $key); // @return 리턴한다. 배열에서 입력한 키값에 맞는 값을.
|
|
}
|
|
|
|
@mixin flex($js: center, $ai: center) {
|
|
// : 를 붙히고 값을 써준 것은 default값을 설정함
|
|
display: flex;
|
|
justify-content: _get-flex-value($js);
|
|
align-items: _get-flex-value($ai);
|
|
}
|
|
|
|
@mixin inlineflex($js: center, $ai: center) {
|
|
// : 를 붙히고 값을 써준 것은 default값을 설정함
|
|
display: inline-flex;
|
|
justify-content: _get-flex-value($js);
|
|
align-items: _get-flex-value($ai);
|
|
}
|
|
|
|
.layer-wrap {
|
|
overflow-y: auto;
|
|
position: fixed;
|
|
top:0;
|
|
left:0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #f3f4f9;
|
|
|
|
.layer-header {
|
|
@include flex(start, center);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 10;
|
|
width: 100%;
|
|
height: rem(60);
|
|
padding: 0 rem(10);
|
|
background-color: #fff;
|
|
border-bottom: 1px solid #c8c8c8;
|
|
|
|
.header-title {
|
|
font-size: rem(20);
|
|
font-weight: 600;
|
|
color: #000;
|
|
}
|
|
|
|
.btn-back {
|
|
position: relative;
|
|
width: rem(30); // 화살표 너비
|
|
height: rem(30); // 화살표 높이
|
|
|
|
|
|
&::before {
|
|
position: absolute;
|
|
top: 30%;
|
|
left: 40%;
|
|
content: '';
|
|
width: rem(12); //화살표 크기
|
|
height: rem(12); //화살표 크기
|
|
border-top: rem(2) solid #000; //화살표 선
|
|
border-right: rem(2) solid #000; //화살표 선
|
|
transform: rotate(225deg); //다음 화살표
|
|
}
|
|
|
|
|
|
em {
|
|
display: block;
|
|
text-indent: -9999em;
|
|
}
|
|
}
|
|
|
|
.btn-close {
|
|
position: absolute;
|
|
top:50%;
|
|
right: rem(20);
|
|
transform: translateY(-50%);
|
|
width: rem(26);
|
|
height: rem(26);
|
|
background: url(../images/ico_close.png) no-repeat center / 100% auto;
|
|
|
|
em {
|
|
display: block;
|
|
text-indent: -9999em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.layer-container {
|
|
padding:rem(60) 0 0;
|
|
|
|
.layer-content-header {
|
|
padding: rem(16);
|
|
border-radius: 0 0 rem(30) rem(30);
|
|
background-color: #fff;
|
|
.point-area {
|
|
position: relative;
|
|
height: rem(130);
|
|
padding:0 rem(20);
|
|
background: url(../images/ico_point.png) no-repeat 95% 50% / rem(72) auto;
|
|
|
|
dt {
|
|
font-size: rem(18);
|
|
font-weight: 500;
|
|
color: #000;
|
|
span {
|
|
margin-left:rem(4);
|
|
font-size: rem(10);
|
|
color:#6b6b6b;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
dd {
|
|
font-size: rem(26);
|
|
font-weight: 500;
|
|
color: #000;
|
|
letter-spacing: rem(-0.64);
|
|
strong {
|
|
font-size: rem(32);
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
.btn-useage {
|
|
@include flex(start, center);
|
|
position: absolute;
|
|
top:0;
|
|
right:rem(20);
|
|
|
|
em {
|
|
display: block;
|
|
color:#666;
|
|
font-size: rem(14);
|
|
font-weight: 400;
|
|
border-bottom:1px solid #666;
|
|
}
|
|
&:before {
|
|
content:"";
|
|
display: block;
|
|
width: rem(14);
|
|
height: rem(14);
|
|
margin-right: rem(4);
|
|
background: url(../images/ico_info.png) no-repeat center / 100% auto;
|
|
}
|
|
|
|
}
|
|
}
|
|
.btn-txt-arr {
|
|
@include flex(start, center);
|
|
border-bottom:1px solid #6b6b6b;
|
|
color:#6b6b6b;
|
|
font-size: rem(10);
|
|
font-weight: 400;
|
|
|
|
&:after {
|
|
content:"";
|
|
display: block;
|
|
width: rem(8);
|
|
height: rem(8);
|
|
margin-left: rem(4);
|
|
background: url(../images/ico_arrow_r2.png) no-repeat center / 100% auto;
|
|
}
|
|
|
|
}
|
|
|
|
.btn-area {
|
|
@include flex(between, start);
|
|
column-gap: rem(8);
|
|
& > * {
|
|
flex: 1;
|
|
@include flex(between, center);
|
|
height: rem(76);
|
|
padding: rem(14);
|
|
font-size: rem(16);
|
|
color:#fff;
|
|
font-weight: 500;
|
|
border-radius: rem(16);
|
|
text-align: left;
|
|
}
|
|
.btn-discount {
|
|
position: relative;
|
|
background-color: #e30084;
|
|
.btn-switch {
|
|
@include flex(end, center);
|
|
position: absolute;
|
|
top:0;
|
|
left:0;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-right: rem(14);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.btn-point-use {
|
|
background-color: #1e1a3a;
|
|
&:after {
|
|
content:"";
|
|
display: block;
|
|
width: rem(26);
|
|
height: rem(26);
|
|
background: url(../images/ico_arrow_r.png) no-repeat center / 100% auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.layer-content {
|
|
padding:rem(22) rem(16) rem(16);
|
|
.category-area {
|
|
overflow: hidden;
|
|
position: relative;
|
|
padding-right: rem(44);
|
|
margin-bottom:rem(16);
|
|
&:after {
|
|
content:"";
|
|
display: block;
|
|
position: absolute;
|
|
top:0;
|
|
right:0;
|
|
z-index: 1;
|
|
width: rem(62);
|
|
height: 100%;
|
|
background: rgb(243,244,249);
|
|
background: linear-gradient(90deg, rgba(243,244,249,0) 0%, rgba(243,244,249,1) 40%);
|
|
}
|
|
.btn-cate {
|
|
@include flex(center, center);
|
|
height: rem(36);
|
|
padding:0 rem(12);
|
|
font-size: rem(16);
|
|
color:#7a7d87;
|
|
font-weight: 400;
|
|
background-color: #e4e7ee;
|
|
border-radius: rem(18);
|
|
&.active {
|
|
color: #fff;
|
|
background-color: #1e1a3a;
|
|
}
|
|
}
|
|
.btn-more {
|
|
display: block;
|
|
position: absolute;
|
|
top:50%;
|
|
right:0;
|
|
z-index: 2;
|
|
transform: translateY(-50%);
|
|
width: rem(30);
|
|
height: rem(30);
|
|
background: url(../images/btn_more.png) no-repeat center / 100% auto;
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.list-area {
|
|
.noti {
|
|
@include flex(between, center);
|
|
width: 100%;
|
|
height: rem(111);
|
|
padding: rem(2);
|
|
margin-bottom:rem(14);
|
|
border-radius: rem(16);
|
|
border: 0 ;
|
|
border-image-source: linear-gradient(to right, #e30084, #a62cbf 51%, #6b57f8);
|
|
border-image-slice: 1;
|
|
background-image: linear-gradient(to bottom, #fff, #fff), linear-gradient(to right, #e30084, #a62cbf 51%, #6b57f8);
|
|
background-origin: border-box;
|
|
background-clip: content-box, border-box;
|
|
.txt-area {
|
|
padding:0 rem(20);
|
|
line-height: 1.3;
|
|
.tit {
|
|
position: relative;
|
|
font-size: rem(18);
|
|
color:#7a7d87;
|
|
}
|
|
|
|
.acc {
|
|
display: block;
|
|
font-size: rem(22);
|
|
font-weight: 700;
|
|
|
|
strong {
|
|
font-size: rem(30);
|
|
font-weight: 700;
|
|
margin-left: 0;
|
|
padding: 0 rem(4);
|
|
}
|
|
}
|
|
}
|
|
.img-area {
|
|
padding:0 rem(20) 0 rem(10);
|
|
img {
|
|
width: rem(66);
|
|
}
|
|
}
|
|
|
|
&.quick {
|
|
.tit {
|
|
&:after {
|
|
content: "즉시적립";
|
|
@include inlineflex(center, center);
|
|
position: absolute;
|
|
top:rem(3);
|
|
left: 100%;
|
|
height: rem(18);
|
|
padding: 0 rem(6) rem(2);
|
|
margin-left:rem(8);
|
|
font-size: rem(10);
|
|
font-weight: 700;
|
|
color: #e30084;
|
|
background-color: #fbdaed;
|
|
border-radius: rem(10);
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.list {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-template-rows: repeat(2, 1fr);
|
|
grid-column-gap: rem(12);
|
|
grid-row-gap: rem(10);
|
|
margin-bottom:rem(22);
|
|
|
|
li {
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
height: rem(143);
|
|
padding: 0;
|
|
border: solid 0 rgba(233, 233, 233);
|
|
border-radius: rem(8);
|
|
background-color: #fff;
|
|
|
|
&+li {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.img-area {
|
|
@include flex(end, center);
|
|
width: 100%;
|
|
height: rem(62);
|
|
padding: 0 rem(12);
|
|
margin-right: 0;
|
|
background-color: #fff;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
|
|
img {
|
|
width: rem(48);
|
|
height: rem(48);
|
|
}
|
|
}
|
|
|
|
.txt-area {
|
|
@include flex(start, start);
|
|
flex-direction: column;
|
|
width: 100%;
|
|
padding: rem(10) rem(16) rem(2);
|
|
font-size: rem(16);
|
|
color: #1e1a3a;
|
|
font-weight: 500;
|
|
border-radius: 0;
|
|
|
|
.acc {
|
|
align-items: flex-end;
|
|
font-size: rem(20);
|
|
font-weight: 700;
|
|
|
|
strong {
|
|
font-size: rem(30);
|
|
font-weight: 700;
|
|
margin-left: 0;
|
|
padding: 0 rem(4);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.quick {
|
|
&:after {
|
|
content: "즉시적립";
|
|
@include inlineflex(center, center);
|
|
position: absolute;
|
|
bottom:rem(8.5);
|
|
left:rem(6);
|
|
height: rem(18);
|
|
padding: 0 rem(6) rem(2);
|
|
margin-left: rem(6);
|
|
font-size: rem(10);
|
|
font-weight: 700;
|
|
color: #e30084;
|
|
background-color: #fbdaed;
|
|
border-radius: rem(10);
|
|
}
|
|
|
|
.txt-area {
|
|
&:before {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.etc-cash {
|
|
&:before {
|
|
content: "방문+1";
|
|
display: block;
|
|
position: absolute;
|
|
bottom: rem(12);
|
|
left: rem(8.5);
|
|
z-index: 3;
|
|
padding: 2px;
|
|
font-size: rem(10);
|
|
font-weight: 700;
|
|
color: #f84d40;
|
|
background-color: #fff7d7;
|
|
}
|
|
}
|
|
|
|
&.quick {
|
|
&.etc-cash {
|
|
&:before {
|
|
left: rem(53.5);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
.caution-area {
|
|
padding: rem(16);
|
|
border-radius: rem(8);
|
|
background-color: #fff;
|
|
h3 {
|
|
margin-bottom:rem(12);
|
|
font-size: rem(18);
|
|
font-weight: 700;
|
|
color:#000;
|
|
}
|
|
p {
|
|
font-size: rem(13);
|
|
font-weight: 400;
|
|
color:#666;
|
|
line-height: 1.54;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.point-earn {
|
|
padding-bottom:rem(68);
|
|
background-color: #fff;
|
|
|
|
.point-info {
|
|
width: 100%;
|
|
height: auto;
|
|
padding:rem(30) rem(22);
|
|
background: none;
|
|
|
|
figure {
|
|
@include flex(start, center);
|
|
|
|
img {
|
|
width: rem(110);
|
|
}
|
|
|
|
figcaption {
|
|
margin-left: rem(22);
|
|
font-size: rem(20);
|
|
color: #6b6b6b;
|
|
|
|
strong {
|
|
display: block;
|
|
margin-top: rem(6);
|
|
font-size: rem(28);
|
|
color: #212121;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.desc {
|
|
padding:0 rem(22);
|
|
margin: 0 0 rem(40);
|
|
|
|
>dl {
|
|
padding: 0;
|
|
}
|
|
|
|
dt {
|
|
font-size: rem(20);
|
|
font-weight: 700;
|
|
color: #212121;
|
|
margin-bottom: rem(20);
|
|
}
|
|
|
|
dd {
|
|
font-size: rem(16);
|
|
color: #6b6b6b;
|
|
font-weight: 400;
|
|
|
|
dl {
|
|
@include flex(start, start);
|
|
padding: rem(16) 0 0;
|
|
|
|
&+dl {
|
|
margin-top: 0;
|
|
border-top: 0;
|
|
}
|
|
|
|
dt {
|
|
font-size: rem(16);
|
|
font-weight: 400;
|
|
color: #212121;
|
|
}
|
|
|
|
dd {
|
|
margin-left: rem(16);
|
|
}
|
|
}
|
|
}
|
|
li {
|
|
@include flex(start, start);
|
|
margin-bottom: rem(18);
|
|
font-size: rem(16);
|
|
color: #6b6b6b;
|
|
|
|
em {
|
|
float: none;
|
|
width: rem(110);
|
|
color: #212121;
|
|
}
|
|
> span {
|
|
flex: 1;
|
|
}
|
|
|
|
.coupon {
|
|
display: block;
|
|
margin-bottom: rem(5);
|
|
|
|
img {
|
|
width: rem(150);
|
|
}
|
|
}
|
|
|
|
.txt-caution {
|
|
margin-top: rem(4);
|
|
|
|
&>* {
|
|
@include flex(start, start);
|
|
font-size: rem(10);
|
|
line-height: 1.6;
|
|
|
|
&:before {
|
|
content: "";
|
|
display: block;
|
|
width: rem(3);
|
|
height: rem(3);
|
|
margin: rem(6) rem(4) 0 0;
|
|
border-radius: rem(2);
|
|
background-color: #6b6b6b;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.txt-box {
|
|
padding: rem(24) rem(22);
|
|
margin: 0;
|
|
background-color: #f2f3f7;
|
|
border-radius: 0;
|
|
ul+h4 {
|
|
margin-top: rem(26);
|
|
}
|
|
|
|
h4 {
|
|
font-size: rem(18);
|
|
font-weight: 500;
|
|
margin-bottom: rem(8);
|
|
}
|
|
|
|
li {
|
|
@include flex(start, start);
|
|
font-size: rem(13);
|
|
color: #666;
|
|
margin-bottom: rem(6);
|
|
line-height: 1.54;
|
|
|
|
&::before {
|
|
content: "";
|
|
display: block;
|
|
flex: 0 0 auto;
|
|
width: rem(4);
|
|
height: rem(4);
|
|
margin: rem(5) rem(6) 0 0;
|
|
border-radius: rem(2);
|
|
opacity: 0.56;
|
|
background-color: #999;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.ico-bu {
|
|
@include inlineflex(start, start);
|
|
|
|
&::before {
|
|
content: "";
|
|
display: block;
|
|
width: rem(4);
|
|
height: rem(4);
|
|
margin: rem(6) rem(6) 0 0;
|
|
border-radius: rem(2);
|
|
opacity: 0.56;
|
|
background-color: #999;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.btn-area.fixed-bottom {
|
|
@include flex(center, center);
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
padding: rem(12);
|
|
z-index: 10;
|
|
|
|
button + button {
|
|
margin: 0;
|
|
}
|
|
button {
|
|
@include flex(center, center);
|
|
width: 100%;
|
|
height: rem(58);
|
|
padding: 0 rem(20);
|
|
font-size: rem(20);
|
|
color:#fff;
|
|
font-weight: 500;
|
|
border-radius: rem(8);
|
|
background-color: #e30084;
|
|
}
|
|
|
|
&.btn-full {
|
|
height: fit-content;
|
|
|
|
button {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.card {
|
|
padding: 0 1.25rem;
|
|
border-radius: rem(10);
|
|
background-color: #fff;
|
|
|
|
+ .card {
|
|
margin-top: 0.9375rem;
|
|
}
|
|
}
|
|
|
|
.cache-guide {
|
|
padding: rem(20) rem(12);
|
|
|
|
#header + main {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
section {
|
|
padding: rem(28) rem(24);
|
|
|
|
h3 {
|
|
@include inlineflex(start, center);
|
|
position: relative;
|
|
font-size: rem(16);
|
|
font-weight: 500;
|
|
color:#e30084;
|
|
margin-bottom: rem(20);
|
|
border-bottom: 1px solid #e30084;
|
|
|
|
em {
|
|
font-size: rem(20);
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
img {
|
|
margin-top:rem(20);
|
|
}
|
|
}
|
|
|
|
.bu-type li {
|
|
position: relative;
|
|
padding: 0 rem(8) 0 rem(16);
|
|
font-size: rem(14);
|
|
color: #555;
|
|
line-height: rem(18);
|
|
text-indent: rem(-14);
|
|
word-break: keep-all;
|
|
word-wrap: break-word;
|
|
|
|
&:before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: rem(10);
|
|
height: rem(10);
|
|
margin-right: rem(4);
|
|
border-radius: 50%;
|
|
background-color: #ffe4f4;
|
|
}
|
|
|
|
+ li {
|
|
margin-top: rem(12);
|
|
}
|
|
|
|
b {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.cs-info {
|
|
margin-top: -0.3125rem;
|
|
|
|
&:before {
|
|
display: none;
|
|
}
|
|
|
|
h4 {
|
|
padding: 0.75rem 0 0.625rem;
|
|
font-size: 1rem;
|
|
color: #e30084;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
}
|
|
|
|
p {
|
|
padding: 0.625rem 0 0;
|
|
font-size: 0.75rem;
|
|
color: #666;
|
|
text-align: center;
|
|
|
|
em {
|
|
display: block;
|
|
margin-top: 0.4375rem;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
.cs-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 3.75rem;
|
|
border-radius: 1.875rem;
|
|
background-color: #ffe8f5;
|
|
|
|
strong {
|
|
display: block;
|
|
font-size: 0.975rem;
|
|
color: #e30084;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
}
|
|
|
|
a {
|
|
font-size: 0.75rem;
|
|
color: #111;
|
|
}
|
|
}
|
|
}
|
|
|
|
.switch {
|
|
display: block;
|
|
position: relative;
|
|
width: rem(49);
|
|
height: rem(26);
|
|
|
|
input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
background-color: #e30084;
|
|
}
|
|
|
|
.slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #fff;
|
|
transition: 0.2s all ease;
|
|
border-radius: 1rem;
|
|
|
|
&:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: rem(2);
|
|
width: rem(22);
|
|
height: rem(22);
|
|
transform: translateY(-50%);
|
|
background-color: #e30084;
|
|
border-radius: 50%;
|
|
transition: 0.2s all ease;
|
|
}
|
|
}
|
|
|
|
input:checked + .slider {
|
|
background-color: #fff;
|
|
|
|
&:before {
|
|
left: rem(24);
|
|
}
|
|
}
|
|
}
|
|
|
|
.swiper {
|
|
width: 100%;
|
|
height: 100%;
|
|
.swiper-slide {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
|
|
@media only screen and (max-width: 320px) {
|
|
html {
|
|
font-size: 14px;
|
|
}
|
|
} |