/* 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;
}

.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%;
/* opacity: 0.6; */
}
.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;
}

/* 상품 영역 */
.product_wrap h2 {
    padding: 40px 0 30px;
    font-size: 20px;
    font-family: "NanumGothic";
    font-weight: 700;
}

.sec001 {
    width: 100%;
    margin: 0;
    position: relative;
    box-sizing: border-box;
}

.sec001 h3 {
    color: #1B1B1B;
    letter-spacing: -0.02em;
    font-weight: 600;
    font-size: 27px;
    line-height: 27px;
    margin: 70px 0 35px;
}

.sec001 .normal_item:nth-child(4n) {
    margin-right: 20px !important;
}

.sec001 .swiper-button-next,
.sec001 .swiper-button-prev {
    width: 80px;
    height: 78px;
}

.sec001 .swiper-button-next::after,
.sec001 .swiper-button-prev::after {
    display: none;
}

.sec001 .swiper-button-next {
    background: url('/design/jstyle07/wib/img_pc/main/pnext.svg') no-repeat;
    background-position: center;
    right: -92px;
    transform: translateY(-50%);
}

.sec001 .swiper-button-prev {
    background: url('/design/jstyle07/wib/img_pc/main/pprev.svg') no-repeat;
    background-position: center;
    left: -92px;
    transform: translateY(-50%);
}

.sec001 .list {
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1%;
}

.sec001 .list>div {
    width: calc(33.33% - 15px);
}

.sec001 .list>div:nth-child(3n) {
    margin-right: 0 !important;
}

/* 공통 상품 기본폼 */
.normal_prod_wrap {
    font-size: 0;
    letter-spacing: 0
}

.normal_item .prod_thumb {
    margin-bottom: 20px;
    position: relative
}

.normal_item .prod_thumb .thumb_img {
    width: 100%
}

.normal_item .prod_thumb .thumb_ov {
    background: rgba(255, 255, 255, .75);
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: all .35s;
    -webkit-transition: all .35s;
    -ms-transition: all .35s
}

.normal_item:hover .prod_thumb .thumb_ov {
    opacity: 1;
    visibility: visible
}

.normal_item .prod_thumb .thumb_ov>* {
    height: 12px;
    display: inline-block;
    vertical-align: top;
    padding: 0 17px;
    margin: 15px 0
}

.normal_item .prod_thumb .thumb_ov a:last-child {
    border-right: none
}

.normal_item .prod_thumb .thumb_ov a img {
    margin-top: -2px
}

.normal_item .prod_thumb .prod_icon {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block
}

.normal_item .prod_color span,
.normal_item .prod_thumb .prod_icon img {
    display: inline-block;
    vertical-align: top;
    width: auto;
}

.normal_item .normal_price {
    font-size: 15px;
    font-weight: 600;
    padding-right: 8px;
    color: #1B1B1B !important;
    letter-spacing: 0.02em;
}

.normal_item .consumer_price strike {
    color: #9C9C9C;
}

.normal_item .consumer_price1 strike {
    color: #9C9C9C;
    padding-right: 8px;
}

.normal_item .consumer_price2 {
    padding-left: 5px;
}

.normal_item .prod_name,
.normal_item .prod_price {
    margin-bottom: 10px;
    position: relative;
}

.normal_item .prod_price .sold_out b {
    color: red;
    display: inline-block;
    margin-left: 5px;
    font-size: 13px;
    line-height: 13px;
    margin-top: -2px
}

.normal_item .prod_subname {
    width: 320px;
    color: #9C9C9C;
    margin-bottom: 12px;
    word-wrap: break-word;
}

.normal_item .prod_color span {
    width: 20px;
    height: 3px;
    margin-right: 5px;
    margin-bottom: 5px;
}

.normal_item .prod_color span.border {
    border: 1px solid #e2e2e2 !important;
    ;
    width: 20px;
    height: 3px;
    box-sizing: border-box
}

.normal_item .prod_thumb a.link_wrap {
    vertical-align: top;
}

.normal_item {
    width: 31.9%;
    vertical-align: top;
    font-size: 13px;
    margin-bottom: 72px;
}

/* 상품 영역 끝 */

.product_wrap>div {
    margin: 0 auto;
    padding: 0 5%;
    box-sizing: border-box;
}

.product_wrap>div h1 {
    margin-top: 30px;
}

.product_wrap>div h1 img {
    width: 160px;
    filter: invert(100%);
}

/* 모바일 */

.list_shopping2x {
    text-align: left;
}

.list_shopping2x h2 {
    text-transform: uppercase;
    font-size: 1.2em;
    font-weight: 300;
    padding: 10px;
    border-top: 1px solid #737373;
    border-bottom: 1px solid #737373;
    width: calc(100% - 4px);
    margin: 55px auto 25px;
    box-sizing: border-box;
}

html .list_shoppingInfo .dc_perc,
html .list_shoppingInfo .dc_info {
    color: #512772 !important;
    font-weight: bold !important;
}

body .list_shoppingInfo .listPrice {
    margin: 0 !important;
}

body .list_shoppingInfo .consumer {
    margin: 0 !important;
}

body .list_shopping2x .thumb_wrap_slider .pro_icons {
    position: static !important;
}
/* BASIC css end */