/* BASIC css start */
/* BASIC css start */
/* reset css */
* {
margin: 0; padding: 0;
box-sizing: border-box;
}
html, body, div, section {
position: relative;
}
ul, li {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
cursor: pointer;
}

/* page common css */
html, body {
scroll-behavior: smooth;
background-color: #F3F0ED
}

.stylelog-wrap img {
display: block;
width: 100%;
}

/* stylelog start */
.stylelog-wrap {
width: 100%;
position: relative;
}
.stylelog-wrap .posiImg {
position: absolute;
}
.stylelog-wrap .container {
max-width: 800px;
width: 100%;
background-color: #ffffff;
margin: 0 auto;
position: relative;
}

/* background */
.stylelog-wrap .bg_left,
.stylelog-wrap .bg_right {
position: fixed;
top: 0;
width: calc((100% - 800px) / 2); height: 100vh;
z-index: -111;
}
.stylelog-wrap .bg_left {
background: url(//jstyle07.jpg3.kr/SITE/EVENT/2024/0327_silver/bg_left.jpg) no-repeat top right/cover;
right: calc(50% + 400px);
}
.stylelog-wrap .bg_right {
background: url(//jstyle07.jpg3.kr/SITE/EVENT/2024/0327_silver/bg_right.jpg) no-repeat top left/cover;
left: calc(50% + 400px)
}

/* logo */
.stylelog-wrap .logo {
display: block;
width: 6.125%;
max-width: 49px;
top: 3.32%;
right: 3.75%;
z-index: 9999;
position: absolute;
}

/* section 1 : top swiper slider */
.sec_01 .swiper-wrapper {
width: 100%; height: 100%;
display: flex;
box-sizing: content-box;
}
.sec_01 .sec_01_tit {
position: absolute;
z-index: 999;
width: 74.75%;
bottom: 8.64%; left: 50%;
transform: translateX(-50%);
}

/* section 2 : notice */
.stylelog-wrap .sec_02 .link-box {
position: relative;
}
.stylelog-wrap .sec_02 .link-box-cont {
position: absolute;
top: 10.97%;
}
.stylelog-wrap .sec_02 .link-box-cont.left {
left: 4.50%; 
width: 44.50%; height: 68.35%;
/* transform: translateY(30px); */
opacity: 1;
/* transition: 0.4s; */
}
.stylelog-wrap .sec_02 .link-box-cont.right {
right: 4.50%;
width: 44.50%; height: 68.35%;
/* transform: translateY(40px); */
opacity: 1;
/* transition: 0.8s; */
}
/*
.stylelog-wrap .sec_02 .link-box-cont.left.scroll,
.stylelog-wrap .sec_02 .link-box-cont.right.scroll {
position: absolute;
transform: translateY(0);
opacity: 1;
}
*/
.stylelog-wrap .sec_02 a[class*="link"] {
position: absolute;
}
.stylelog-wrap .sec_02 .link-box a.link_btn_1 {
display: block;
width: 20.13%; height: 5.27%;
bottom: 5.06%; left: 50%;
transform: translateX(-50%);
cursor: pointer;
}
.stylelog-wrap .sec_02 .link_btn_1 {
overflow: hidden;
height: 0;
transition-duration: 0.4s;
}

/* 섹션3, 7 : pager가 있는 swiper slider */
/* swiper slide pager 부분 */
.stylelog-wrap .sec_03 .swiper-pagination,
.stylelog-wrap .sec_07 .swiper-pagination {
display: flex;
justify-content: center;
align-items: center;
bottom: 3.7%;
top: auto;
}
.stylelog-wrap .sec_03 .swiper-pagination-bullet,
.stylelog-wrap .sec_07 .swiper-pagination-bullet {
background-color: #c3c3c3;
opacity: 1;
/* width: 1.50%; height: 1.20%; */
margin: 0 4px;
}
.stylelog-wrap .sec_03 .swiper-pagination-bullet-active,
.stylelog-wrap .sec_07 .swiper-pagination-bullet-active {
background-color: #ffffff;
/* width: 1.88%; height: 1.50%; */
}
.sec_03 .sec_03_tit,
.sec_07 .sec_07_tit {
position: absolute;
bottom: 8.50%; left: 50%;
transform: translateX(-50%);
width: 54.88%; height: 7.20%;
z-index: 999;
}

/* 플러스 버튼 있는 섹션들 css 모음 */
/* 공통 */
.stylelog-wrap .product-add {
position: absolute;
top: 0; left: 0;
display: block;
width: 100%; height: 100%;
}
.stylelog-wrap .product-add li {
position: absolute;
opacity: 0;
z-index: 999;
transform: translateY(30px);
transition: 0.3s;
}
.stylelog-wrap .product-add li.scroll {
position: absolute;
transform: translateY(0);
opacity: 1;
}
/* 4, 8, 12, 13, 15 섹션 */
.sec_04.a li,
.sec_06 li
.sec_08 li,
.sec_12 li,
.sec_13 li,
.sec_10 li,
.sec_18 li {
position: absolute;
width: 3.21%; height: 1.68%; 
}
.sec_04.b li {
width: 3.21%; height: 1.68%;
}
/* 섹션4 */
.sec_04.a li:nth-last-child(1) {
top: 28.00%; left: 14.88%;
width: 3.21%; height: 1.68%; 
}
.sec_04.a li:nth-last-child(2) {
top: 41.60%; left: 23.63%;
width: 3.21%; height: 1.68%; 
}
.sec_04.a li:nth-last-child(3) {
top: 56.20%; left: 23.63%;
width: 3.21%; height: 1.68%; 
}
.sec_04.b li:nth-last-child(1) {
top: 53.17%; left: 72.13%;
width: 5.58%; height: 4.36%;
}
.sec_04.b li:nth-last-child(2) {
top: 60.29%; left: 35.50%;
width: 5.58%; height: 2.93%;
}
/* 섹션6 */
.sec_06 li {
top: 86.41%; left: 68.75%;
width: 3.50%; height: 1.63%;
}
/* 섹션8 */
.sec_08 li {
width: 5.58%; height: 4.47%;
}
.sec_08 li:nth-last-child(1) {
top: 38.90%; right: 13.17%;
}
.sec_08 li:nth-last-child(2) {
top: 58.20%; left: 25.88%;
}
.sec_08 li:nth-last-child(3) {
top: 84.90%; left: 56.63%;
}
/* 섹션10 */
.sec_10 li {
width: 5.58%; height: 4.47%;
}
.sec_10 li:nth-last-child(1) {
top: 36.20%; right: 7.73%;
}
/* 섹션12 */
.sec_12 .posiImg.left {
width: 51.13%;
top: 9.11%; left: 5.88%;
}
.sec_12 .posiImg.right {
width: 49.75%;
top: 37.94%; right: 5.78%;
}
.sec_12 li {
width: 4%; height: 3.19%;
}
.sec_12 li:nth-last-child(1) {
top: 46.35%; right: 20.15%;
}
.sec_12 li:nth-last-child(2) {
top: 72.97%; right: 27.28%;
}
/* 섹션13 */
.sec_13 li {
width: 5.58%; height: 4.45%;;
}
.sec_13 li:nth-last-child(1) {
top: 10.10%; left: 58.63%;
}
.sec_13 li:nth-last-child(2) {
top: 38.90%; left: 71.25%;
}
/* 섹션15 */
.sec_15 .posiImg.top-right {
width: 36.50%;
top: 8.66%; right: 6.63%;
}
.sec_15 .posiImg.btm-left {
width: 36.74%;
bottom: 9.14%; left: 5.38%;
}
.sec_15 li {
width: 4.18%; height: 3.33%;
}
.sec_15 li:nth-last-child(1) {
top: 66.57%; left: 33.50%;
}
.sec_15 li:nth-last-child(2) {
top: 81.49%; left: 22.25%;
}
/* 섹션18 */ 
.sec_18 li {
width: 4.18%; height: 5.78%;
top: 54.33%; left: 28.63%;
}

/* 섹션5 */
.sec_05_tit {
position: absolute;
bottom: 7.60%; left: 50%;
transform: translateX(-50%);
width: 57.88%; height: 10.90%;
z-index: 999;
}

/* 컬러에서 흑백으로 애니메이션 처리 */
/* 6, 14, 16 섹션 */
.sec_06 .posiImg.top {
top: 4.20%; left: 50%;
transform: translateX(-50%);
width: 82.63%;
}
.sec_06 .posiImg.mood1 {
width: 35.25%; height: 2.92%;
top: 61.32%; left: 53.75%;
}
.sec_06 .posiImg.mood2 {
width: 35.25%; height: 2.92%;
top: 62.78%; left: 50.88%;
}
.sec_06 .posiImg.btm.left {
width: 41.25%;
bottom: 6.74%; left: 7.75%;
}
.sec_06 .posiImg.btm.right {
width: 30.13%;
bottom: 6.74%; right: 9%;
}

/* 14, 16 섹션 */
.sec_14 .imgBox1 {
height: 3.51%;
}
.sec_14 .imgBox1 img {
height: 100%;
}
.sec_14 .sec_14_tit {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 32.38%;
}
.sec_16 .imgBox {
height: 5.85%;
}
.sec_16 .imgBox img {
height: 100%;
}

/* 섹션9 */
.sec_09 {
position: relative;
}
.sec_09 .posiImg.left {
width: 41.50%; height: 77.77%;
top: 11.07%; left: 9.50%;
}
.sec_09 .posiImg.center {
width: 20.88%;
top: 20.28%; left: 45.13%;
}
.sec_09 .posiImg.right1 {
width: 17.51%;
top: 17.04%; right: 8%;
}
.sec_09 .posiImg.right2 {
width: 17.51%; 
top: 49.91%; right: 25.38%;
}

/* 섹션11 : 전광판 롤러 효과 부분 */
.stylelog-wrap .sec_11 {
overflow: hidden;
/* background-color: #ffffff; */
}
.stylelog-wrap .sec_11 .original {
animation: 15s linear 0s infinite normal forwards running rollingOriginal;
}
.stylelog-wrap .sec_11 .clone {
animation: 15s linear 0s infinite normal none running rollingClone;
position: absolute;
top: 0; left: 100%;
}
@keyframes rollingOriginal {
0% {
    transform: translateX(0);
}
50% {
    transform: translateX(-100%);
}
50.01% {
    transform: translateX(100%);
}
100% {
    transform: translateX(0);
}
}
@keyframes rollingClone {
0% {
    transform: translateX(0);
}
100% {
    transform: translateX(-200%);
}
}

/* 섹션18 */
.sec_18 .posiImg.center {
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 88.85%;
}

/* 마지막 섹션 에디터 부분 */
.stylelog-wrap .sec_last {
width: 100%;
padding-bottom: 8%;
background-color: #343434;
}
.stylelog-wrap .sec_last .secLastSwiper {
position: absolute;
width: 100%; height: 100%;
}
.stylelog-wrap .sec_last .swiper-slide img {
vertical-align: top;
}

/* scroll event */
[data-scroll="transform"] {
transform: translateY(30px);
transition: 0.3s;
opacity: 0
}
[data-scroll="transform"].active {
transform: translateY(0);
opacity: 1
}
[data-scroll="transform2"] {
transform: translateY(30px);
transition: 0.6s;
opacity: 0
}
[data-scroll="transform2"].active {
transform: translateY(0);
opacity: 1
}

[data-scroll^="scroll"] {
transition-duration: 0.3s;
transform: translateY(30px);
opacity: 0;
}
[data-scroll^="scroll"].scroll {
transform: translateY(0);
opacity: 1;
}
[data-scroll="opacity"] {
transition: 2.5s;
filter: grayscale(1);
transform: all;
}
[data-scroll="opacity"].opacity {
filter: grayscale(0);
}
[data-scroll="opacity2"] {
transition: 3.5s;
filter: grayscale(0);
transform: all;
}
[data-scroll="opacity2"].opacity {
filter: grayscale(1);
}

/* responsive */
@media screen and (max-width: 799px) {
.stylelog-wrap .bg_left,
.stylelog-wrap .bg_right {
    display: none;
}
}

.product_wrap {
max-width: 800px;
margin: 0 auto;
}

/* 상품 영역 */
.proSection {
    max-width: 900px;
    margin: 0 auto;
    background-color: #fff;
    overflow: hidden;
}
.proSection .product_wrap_section .list {
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: start;
    gap: 1%;
    padding-left: 1%;
}
.proSection .product_wrap_section h2 {
    padding: 40px 0 30px;
    font-size: 20px;
    font-family: "NanumGothic";
    font-weight: 700;
    padding-left: 3%;
}

/*
.scroll_btn a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: block;
    position: fixed;
    bottom: 80px;
    text-align: center;
    z-index: 99;
    background: #333;
    border: #333;
    box-sizing: border-box;
    right: 12px;
    display: none;
    transition: all .3s;
}
.scroll_btn a.top_btn {
    bottom: 130px;
}
.scroll_btn a.bot_btn {
    transform: rotate(180deg);
    -webkit-transform: -webkit-rotate(180deg);
}
.scroll_btn a img {
    width: 14px;
    padding-top: 15px;
    margin-left: 13px !importante;
}
*/
/* BASIC css end */


/* BASIC css end */