/* BASIC css start */ /*sec1 메인중앙베너*/ #sec1 { margin-bottom: 50px } /*베너 바로 아래 공간*/ #sec1 .swiper { } #sec1 .swiper>ul { } #sec1 .swiper>ul>li { width: 1200px; } #sec1 .swiper>ul>li>a { display:block; width:100% } #sec1 .swiper>ul>li>a>img { width: 100%; } #sec1 .swiper .btn_wrap { padding: 30px; position: absolute; z-index: 1; bottom: 0; right: 50%; transform: translateX(600px); width: max-content; display: flex; align-items: center; gap: 12px; } #sec1 .swiper .btn_wrap>* { } #sec1 .swiper .btn_wrap>ul { background-color: rgba(0,0,0,.4); display: flex; align-items: center; gap: 20px; padding: 10px 17px; border-radius: 25px; } #sec1 .swiper .btn_wrap>ul li { } #sec1 .swiper .btn_wrap>ul li>div:has(img) { display: flex; align-items: center; justify-content: center; } #sec1 .swiper .btn_wrap>ul li .swiper_prev { cursor: pointer; } #sec1 .swiper .btn_wrap>ul li .swiper_prev img { } #sec1 .swiper .btn_wrap>ul li .swiper-pagination { position: unset; color: #fff; font-size: 15px; display: flex; align-items: center; gap: 1px; } #sec1 .swiper .btn_wrap>ul li .swiper-pagination span { display: inline-block; font-size: 18px; } /*플레이버튼 옆 베너갯수*/ #sec1 .swiper .btn_wrap>ul li .swiper_next { cursor: pointer; } #sec1 .swiper .btn_wrap>ul li .swiper_next img { } /*플레이버튼*/ #sec1 .swiper .btn_wrap .control { } #sec1 .swiper .btn_wrap .control a { cursor: pointer; display: flex; transition: all .1s; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 50%; background-color: rgba(0,0,0,.4); } #sec1 .swiper .btn_wrap .control a.clicked { opacity: .5; } #sec1 .swiper .btn_wrap .control a img { } #sec1 .swiper ul li.swiper-slide-active .txt_area p { transform: translateY(0px); opacity: 1; } #sec1 .swiper ul li.swiper-slide-active .txt_area a.more { transform: translateY(0px); opacity: 1; } #sec1 .swiper ul li .txt_area { overflow: visible; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; padding-left: 230px; } #sec1 .swiper ul li .txt_area>* { transform: translateY(-25px); } #sec1 .swiper ul li .txt_area p { opacity: 0; line-height: 1.3; } #sec1 .swiper ul li .txt_area p.big { transition: all .5s; transition-delay: .35s; margin-bottom: 20px; } #sec1 .swiper ul li .txt_area p.sub { font-weight: 400; transition: all .5s; margin-bottom: 15px; transition-delay: .57s; } #sec1 .swiper ul li .txt_area a.more { opacity: 0; transition-delay: .7s; } #sec1 .swiper ul li .txt_area a.more:hover { background-color: #000; color: #fff; } /* 메인베너 바로 아래 회원혜택 베너*/ .benefit-banner { max-width: 1200px; background: linear-gradient(45deg, #000000, #910000); color: #ffffff; text-align: left; /* 좌측 정렬 */ padding: 10px; border-radius: 0px; margin: 0px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);} .benefit-banner .banner-link { text-decoration: none; color: inherit; display: block; } .benefit-banner .banner-content h2 { font-size: 1.5em; margin-bottom: 10px; font-weight: bold; } .benefit-banner .banner-content p { font-size: 1em; margin: 5px 0; } .benefit-banner .banner-content strong { color: #fff; font-weight: bold; } /* 배너 */ .subbanBox { padding: 0px 0 80px; text-align: center; } /*sec4 메인베너 바로 하단 베너들*/ #sec4 { } #sec4 .sec_inner { } #sec4 .sec_inner ul { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 10px; } #sec4 .sec_inner ul li { position: relative; flex-grow: 1; } #sec4 .sec_inner ul li>a { display: block; width: 125%; } #sec4 .sec_inner ul li>a>img { width: 80%; } #sec4 .sec_inner ul li .txt_area { position: absolute; top: 65%; transform: translateY(-50%); left: 40px; max-width: 80% } #sec4 .sec_inner ul li .txt_area p { opacity: 0; } #sec4 .sec_inner ul li .txt_area p.big { font-size: 30px; font-weight: 700; margin-bottom: 7px; transition-delay: .1s; } #sec4 .sec_inner ul li .txt_area p.sub { font-size: 15px; line-height:1.4; margin-bottom: 5px; transition-delay: .27s; } #sec4 .sec_inner ul li .txt_area a.more { font-size: 12px; opacity: 0; transition-delay: .48s; position:relative; } #sec4.act .sec_inner ul li .txt_area p { transform: translateY(-25px); opacity: 1; } #sec4.act .sec_inner ul li .txt_area a.more { transform: translateY(-25px); opacity: 1; } /*sec44 메인베너 바로 하단 베너 그아래 작은베너들*/ #sec44 { } #sec44 .sec_inner { } #sec44 .sec_inner ul { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 10px; } #sec44 .sec_inner ul li { position: relative; flex-grow: 1; } #sec44 .sec_inner ul li>a { display: block; width: 100%; } #sec44 .sec_inner ul li>a>img { width: 100%; } #sec44 .sec_inner ul li .txt_area { position: absolute; top: 75%; transform: translateY(-50%); left: 10px; max-width: 80% } #sec44 .sec_inner ul li .txt_area p { opacity: 1; } #sec44 .sec_inner ul li .txt_area p.big { font-size: 20px; font-weight: 700; margin-bottom: 1px; transition-delay: .1s; } #sec44 .sec_inner ul li .txt_area p.sub { font-size: 14px; line-height:1.1; margin-bottom: 10px; transition-delay: .27s; } /*sec444 메인베너 바로 하단 베너 그아래 작은베너들*/ #sec444 { } #sec444 .sec_inner { } #sec444 .sec_inner ul { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 10px; } #sec444 .sec_inner ul li { position: relative; flex-grow: 1; } #sec444 .sec_inner ul li>a { display: block; width: 100%; } #sec444 .sec_inner ul li>a>img { width: 100%; } #sec444 .sec_inner ul li .txt_area { position: absolute; top: 75%; transform: translateY(-50%); left: 10px; max-width: 80% } #sec444 .sec_inner ul li .txt_area p { opacity: 1; } #sec444 .sec_inner ul li .txt_area p.big { font-size: 20px; font-weight: 700; margin-bottom: 1px; transition-delay: .1s; } #sec444 .sec_inner ul li .txt_area p.sub { font-size: 14px; line-height:1.1; margin-bottom: 10px; transition-delay: .27s; } /*sec2 BEST 카테고리*/ #sec2 { } #sec2 .sec_inner { } #sec2 .sec_inner { } #sec2 .sec_inner .sec2_tit { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } #sec2 .sec_inner .sec2_tit h2 { margin-bottom: 0; } #sec2 .sec_inner .sec2_tit .nav_wrap { display: flex; align-items: center; gap: 15px; } #sec2 .sec_inner .sec2_tit .nav_wrap>* { } #sec2 .sec_inner .sec2_tit .nav_wrap .swiper-button-next { } #sec2 .sec_inner .sec2_tit .nav_wrap .swiper-button-prev { } #sec2 .sec_inner .swiper { } #sec2 .sec_inner .swiper>ul { } #sec2 .sec_inner .swiper>ul>li { display: flex; flex-direction: column; gap: 10px; align-items: center; } #sec2 .sec_inner .swiper>ul>li>a { display: flex; width: 100%; transition: all .1s; overflow: hidden; border-radius: 7%; border:3px solid transparent } #sec2 .sec_inner .swiper>ul>li>a:hover { border-color:var(--main-color) } #sec2 .sec_inner .swiper>ul>li:hover>p { color:var(--main-color) } #sec2 .sec_inner .swiper>ul>li>a>img { width: 100%; transition: all .1s; } #sec2 .sec_inner .swiper>ul>li>p { text-align: center; color: #5d5d5d; font-size: 16px; font-weight: 600; } /*sec22 BEST 아이템*/ #sec22 { } #sec22 .sec_inner { } #sec22 .sec_inner { } #sec22 .sec_inner .sec22_tit { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } #sec22 .sec_inner .sec22_tit h2 { margin-bottom: 0; } #sec22 .sec_inner .sec22_tit .nav_wrap { display: flex; align-items: center; gap: 15px; } #sec22 .sec_inner .sec22_tit .nav_wrap>* { } #sec22 .sec_inner .sec22_tit .nav_wrap .swiper-button-next { } #sec22 .sec_inner .sec22_tit .nav_wrap .swiper-button-prev { } #sec22 .sec_inner .swiper { } #sec22 .sec_inner .swiper>ul { } #sec22 .sec_inner .swiper>ul>li { display: flex; flex-direction: column; gap: 10px; align-items: center; } #sec22 .sec_inner .swiper>ul>li>a { display: flex; width: 100%; transition: all .1s; overflow: hidden; border-radius: 50%; border:2px solid transparent } #sec22 .sec_inner .swiper>ul>li>a:hover { border-color:var(--main-color) } #sec22 .sec_inner .swiper>ul>li:hover>p { color:var(--main-color) } #sec22 .sec_inner .swiper>ul>li>a>img { width: 100%; transition: all .1s; } #sec22 .sec_inner .swiper>ul>li>p { text-align: center; color: #5d5d5d; font-size: 16px; font-weight: 600; } /*sec222 BEST 반제품*/ #sec222 { } #sec222 .sec_inner { } #sec222 .sec_inner { } #sec222 .sec_inner .sec222_tit { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } #sec222 .sec_inner .sec222_tit h2 { margin-bottom: 0; } #sec222 .sec_inner .sec222_tit .nav_wrap { display: flex; align-items: center; gap: 15px; } #sec222 .sec_inner .sec222_tit .nav_wrap>* { } #sec222 .sec_inner .sec222_tit .nav_wrap .swiper-button-next { } #sec222 .sec_inner .sec222_tit .nav_wrap .swiper-button-prev { } #sec222 .sec_inner .swiper { } #sec222 .sec_inner .swiper>ul { } #sec222 .sec_inner .swiper>ul>li { display: flex; flex-direction: column; gap: 10px; align-items: center; } #sec222 .sec_inner .swiper>ul>li>a { display: flex; width: 100%; transition: all .1s; overflow: hidden; border-radius: 50%; border:2px solid transparent } #sec222 .sec_inner .swiper>ul>li>a:hover { border-color:var(--main-color) } #sec222 .sec_inner .swiper>ul>li:hover>p { color:var(--main-color) } #sec222 .sec_inner .swiper>ul>li>a>img { width: 100%; transition: all .1s; } #sec222 .sec_inner .swiper>ul>li>p { text-align: center; color: #5d5d5d; font-size: 16px; font-weight: 600; } /*3개짜리 시트지베너*/ .banner-container { width: 1200px; margin: 0 auto; /* 가운데 정렬 */ display: flex; /* 플렉스 레이아웃 사용 */ justify-content: center; /* 내부 요소를 가로로 중앙 정렬 */ gap: 0px; } .banner-container a img { display: block; /* 이미지를 블록 요소로 설정 */ max-width: 100%; /* 이미지가 컨테이너를 넘지 않도록 설정 */ height: auto; /* 비율 유지 */ } /* 5개짜리 배너모음 */ .mainBnSet { margin:30px auto 0; position:relative; width:1200px; *zoom:1 } .mainBnSet:after { display:block; clear:both; content:'' } .mainBnSet .leftBn { float:left; width:700px } .mainBnSet .leftBn ul { *zoom:1 } .mainBnSet .leftBn ul:after { display:block; clear:both; content:'' } .mainBnSet .leftBn ul.last { padding-top:11px } .mainBnSet .leftBn ul li { padding-right:10px; float:left } .mainBnSet .rightBn { float:left; width:500px } /*sec5 스테디셀러*/ #sec5 .sec_inner { position:relative; } #sec5 .sec_inner .swiper-button-prev { position: absolute; top: 50%; left: 0; transform: translate(-80px, -80%); z-index: 2; } #sec5 .sec_inner .swiper-button-next { position: absolute; top: 50%; right: 0; transform: translate(80px, -50%); z-index: 2; } #sec5 .sec_inner .sec5_cont .swiper { padding-bottom:30px; } /*sec3 신상품*/ #sec3 .sec_inner { position:relative; } #sec3 .sec_inner .swiper-button-prev { position: absolute; top: 50%; left: 0; transform: translate(-80px, -50%); z-index: 2; } #sec3 .sec_inner .swiper-button-next { position: absolute; top: 50%; right: 0; transform: translate(80px, -50%); z-index: 2; } #sec3 .sec_inner .sec3_cont .swiper { padding-bottom:30px; } /*sec6*/ #sec6 { } #sec6 .sec_inner { position:relative; } #sec6 .sec_inner .sec6_cont .swiper { } #sec6 .sec_inner .sec6_cont .swiper ul { } #sec6 .sec_inner .sec6_cont .swiper ul li { } #sec6 .sec_inner .sec6_cont .swiper ul li a { display: block; width: 100%; overflow:hidden; } #sec6 .sec_inner .sec6_cont .swiper ul li a img { width: 100%; transition:transform .3s } #sec6 .sec_inner .sec6_cont .swiper ul li a:hover>img { transform:scale(1.16) rotate(5deg) } #sec6 .sec_inner .sec6_cont .swiper ul li .txt_area { padding:20px 0 } #sec6 .sec_inner .sec6_cont .swiper ul li .txt_area p { transition: all .3s; } #sec6 .sec_inner .sec6_cont .swiper ul li .txt_area p.big { color: #161616; font-size: 18px; margin-bottom:10px } #sec6 .sec_inner .sec6_cont .swiper ul li:hover .txt_area p.big { color: #000; padding-left: 21px; position:relative; } #sec6 .sec_inner .sec6_cont .swiper ul li:hover .txt_area p.big::before { content: "→"; font-size:17px; display: inline-block; position: absolute; left: 0; transition: all .5s; top:50%; transform:translateY(-50%) } #sec6 .sec_inner .sec6_cont .swiper ul li .txt_area p.sub { color: #555555; font-size: 14px; line-height:1.4 } #sec6 .sec_inner .swiper-button-prev { position: absolute; top: 50%; left: 0; transform: translate(-80px, -50%); z-index: 2; } #sec6 .sec_inner .swiper-button-next { position: absolute; top: 50%; right: 0; transform: translate(80px, -50%); z-index: 2; } /*sec7*/ #sec7 { } #sec7 .sec_inner { } #sec7 .sec_inner .sec7_cont { display: flex; justify-content: space-between; gap: 20px; } #sec7 .sec_inner .sec7_cont>div { flex-grow: 1; height:490px } #sec7 .sec_inner .sec7_cont .banner_area { position:relative; flex-grow:1; } #sec7 .sec_inner .sec7_cont .banner_area>a { display: block; width: 100%; } #sec7 .sec_inner .sec7_cont .banner_area>a img { width: 100%; } #sec7 .sec_inner .sec7_cont .banner_area .txt_area { position: absolute; top: 80%; transform: translateY(-50%); left: 40px; max-width: 80% } #sec7 .sec_inner .sec7_cont .banner_area .txt_area>* { color: #fff; opacity:0 } #sec7 .sec_inner .sec7_cont .banner_area .txt_area p.big { font-size: 34px; font-weight: 700; margin-bottom: 12px; transition-delay: .1s; } #sec7 .sec_inner .sec7_cont .banner_area .txt_area p.sub { font-size: 16px; line-height:1.5; margin-bottom: 10px; transition-delay: .37s; } #sec7 .sec_inner .sec7_cont .banner_area .txt_area a { border-color:#fff; transition-delay: .58s; position:relative; } #sec7 .sec_inner .sec7_cont .banner_area .txt_area a.btn_more>span { background-color:#fff } #sec7.act .sec_inner .sec7_cont .banner_area .txt_area p { transform: translateY(-25px); opacity: 1; } #sec7.act .sec_inner .sec7_cont .banner_area .txt_area a.more { transform: translateY(-25px); opacity: 1; } #sec7 .sec_inner .sec7_cont .item_area { width:480px; } #sec7 .sec_inner .sec7_cont .item_area .swiper { height:100% } #sec7 .sec_inner .sec7_cont .item_area ul { height:100%; overflow-y:auto; display:flex; flex-wrap:wrap; } #sec7 .sec_inner .sec7_cont .item_area ul>li { display: flex; flex-wrap: nowrap; align-items: center; width:100%; padding:10px 0; /*height:calc(100% / 3)*/ } #sec7 .sec_inner .sec7_cont .item_area ul>li:first-child { padding-top:0 } #sec7 .sec_inner .sec7_cont .item_area ul>li:nth-child(2) { padding:7px 0; margin:5px 0 } #sec7 .sec_inner .sec7_cont .item_area ul>li .thumb { width:150px; height:100% } #sec7 .sec_inner .sec7_cont .item_area ul>li .thumb>a { height: 100%; } #sec7 .sec_inner .sec7_cont .item_area ul>li .thumb>a>img { height: 100%; object-fit: cover; } #sec7 .sec_inner .sec7_cont .item_area ul>li .info { width:70%; padding:0 20px 0 20px; height:100%; } /* sec8 */ #sec8 { } #sec8 .sec_inner { } #sec8 .sec_inner h2 { } #sec8 .sec_inner .sec8_cate { margin-bottom: 100px; } #sec8 .sec_inner .sec8_cate ul { display:flex; gap:15px; flex-wrap:wrap } #sec8 .sec_inner .sec8_cate ul li { } #sec8 .sec_inner .sec8_cate ul li a { overflow:hidden; display:block; width:100%; background-color: #eeeeee; border-radius: 40px; padding: 11px 45px; text-align:center; color:#555555; position:relative; font-size: 17px; font-weight: 500; display:block; transition:all .3s } #sec8 .sec_inner .sec8_cate ul li.on>a { color: #fff; background-color: var(--main-color); } #sec8 .sec_inner .sec8_cate ul li a:hover { color: #fff; background-color: transparent } #sec8 .sec8_prd { } #sec8 .sec8_prd>div { display: none; position:relative; opacity:0; transition:opacity .5s } #sec8 .sec8_prd>div.show { display: block; } #sec8 .sec8_prd>div.act { opacity:1 } #sec8 .sec_inner .sec8_cate ul li a::after { position: absolute; content: ""; width: 0%; height: 100%; top: 0; right: 0; z-index: -1; background-color:var(--main-color); transition: all 0.3s ease; } #sec8 .sec_inner .sec8_cate ul li a:hover::after { right: auto; left: 0; width: 100%; } /*sec9*/ #sec9 .sec_inner h2 { display: flex; align-items: center; gap: 16px; } #sec9 .sec_inner h2 span { display: inline-block; color: #999999; font-size: 18px; font-weight: 500; } /*유튜브*/ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #ffffff; } .video-container { width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; /* 각 비디오 사이의 여백을 균등 배분 */ gap: 20px; /* 비디오 간의 간격 */ } .video-frame { width: 100%; max-width: 280px; /* 1200px ÷ 4 - 여백 */ aspect-ratio: 16 / 9; /* 16:9 비율로 고정 */ overflow: hidden; border-radius: 8px; /* 프레임 모서리 둥글게 */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 그림자 효과 */ } .video-frame iframe { width: 100%; height: 100%; border: none; border-radius: 8px; } /*메인 공통*/ .section,.section :is(*) { box-sizing: border-box; font-family: "Pretendard Variable", Pretendard, sans-serif; } .section:not(#sec1) { margin-bottom: 20px; } .section .sec_inner { width: 1200px; margin: 0 auto; } .section h2 { font-size:32px; font-family: "Pretendard Variable", Pretendard, sans-serif; color: #111111; font-weight: 500; margin-bottom: 40px; } .section .txt_area p.sub { color: #000; line-height: 1.6; font-weight: 500; transition: all .5s; font-size: 17px; } .section .txt_area p.big { color: #000; font-weight: 500; line-height: 1.3; transition: all .5s; font-size: 48px; } .section .txt_area a.more { display: inline-block; font-size: 12px; transition: transform .4s, opacity .4s; border: 1px solid #000; color: #000; margin-top: 8px; font-weight: 600; padding:6px 15px; } .section :is(.sec_next,.sec_prev) { position: unset; color: #000; width: 40px; background-color: #ccf37d; height: 40px; border-radius: 50%; margin-top: 0; transition:all .1s } .section :is(.sec_next,.sec_prev)::after { font-size: 14px; } .section :is(.sec_next,.sec_prev):not(.swiper-button-disabled):hover { background-color:var(--main-color); color:#fff } .section .swiper-pagination-bullet-active { background-color:var(--main-color) } .section a.btn_more { color: #fff; font-size: 15px; border: 1px solid #fff; position: relative; display: flex; align-items: center; justify-content: center; -webkit-font-smoothing: antialiased; } .section a.btn_more>span { display: block; position: absolute; background-color: #000; } .section .btn_more .span_index_one { width: 1px; left: 0; bottom: 0; } .section .btn_more .span_index_two { height: 1px; left: 0; top: 0; } .section .btn_more .span_index_three { width: 1px; right: 0; top: 0; } .section .btn_more .span_index_four { height: 1px; right: 0; bottom: 0; } .section .btn_more:hover { border-color: transparent !important; } .section .btn_more:hover .span_index_one { -webkit-animation: move1 1500ms infinite ease; animation: move1 1500ms infinite ease; } .section .btn_more:hover .span_index_two { -webkit-animation: move2 1500ms infinite ease; animation: move2 1500ms infinite ease; } .section .btn_more:hover .span_index_three { -webkit-animation: move3 1500ms infinite ease; animation: move3 1500ms infinite ease; } .section .btn_more:hover .span_index_four { -webkit-animation: move4 1500ms infinite ease; animation: move4 1500ms infinite ease; } @-webkit-keyframes move1 { 0% { height: 100%; bottom: 0; } 54% { height: 0; bottom: 100%; } 55% { height: 0; bottom: 0; } 100% { height: 100%; bottom: 0; } } @keyframes move1 { 0% { height: 100%; bottom: 0; } 54% { height: 0; bottom: 100%; } 55% { height: 0; bottom: 0; } 100% { height: 100%; bottom: 0; } } @-webkit-keyframes move2 { 0% { width: 0; left: 0; } 50% { width: 100%; left: 0; } 100% { width: 0; left: 100%; } } @keyframes move2 { 0% { width: 0; left: 0; } 50% { width: 100%; left: 0; } 100% { width: 0; left: 100%; } } @-webkit-keyframes move3 { 0% { height: 100%; top: 0; } 54% { height: 0; top: 100%; } 55% { height: 0; top: 0; } 100% { height: 100%; top: 0; } } @keyframes move3 { 0% { height: 100%; top: 0; } 54% { height: 0; top: 55%; } 100% { height: 0; top: 0; } 100% { height: 100%; top: 0; } } @-webkit-keyframes move4 { 0% { width: 0; right: 0; } 55% { width: 100%; right: 0; } 100% { width: 0; right: 100%; } } @keyframes move4 { 0% { width: 0; right: 0; } 55% { width: 100%; right: 0; } 100% { width: 0; right: 100%; } } /*스테디셀러 한줄 노출 상품수 조정 소스 추가, 이 소스는 맨 하단에 위치 해야함 */ .w25p { width: 12.6%!important;} .w25p:nth-child(4n) {margin-right: 1.5%!important; margin-bottom: 45px;} .item_list .thumb { width: 150px!important;} .item_list .thumb>a {width: 150px!important;} .item_list .thumb>a>img {width: 150px!important;} /* BASIC css end */