/* BASIC css start */
@import url('https://fonts.googleapis.com/css2?family=Arsenal&family=Merriweather&family=Noto+Serif:ital@1&family=PT+Serif:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2? family= 나눔+펜+스크립트 & display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300&display=swap');

/* 메인 롤링 배너 */
.sliderWrap {position:relative; overflow:hidden; margin:0 auto 50px; width: 1400px;  }

/* 상품 타이틀 */
.h_title h3 { text-align:center; font-size: 28px; color:#2e2e2e; }

.item-wrap .item-cont2 {overflow: hidden; margin-left:-20px;}
.item-wrap .item-cont2 .item-list {float:left;width: 285px; margin: 0 0 30px 20px;}
.item-wrap .item-cont2 .item-list .thumb { position: relative; }
.item-wrap .item-cont2 .item-list .thumb a { display:block; overflow:hidden }
.item-wrap .item-cont2 .item-list .thumb a img { width:100%;-webkit-transition: -webkit-transform 0.5s ease;transition:transform 0.5s ease;}
.item-wrap .item-cont2 .item-list .thumb a:hover img {-webkit-transform: scale(1.15);transform: scale(1.15) }
.item-wrap .item-cont2 .item-list .thumb .clChip {margin-top:5px; }
.item-wrap .item-cont2 .item-list .thumb .clChip span {display: inline-block;width: 14px;height: 4px;}

/* 이미지 고정 배너 */
.fixed-img-banner { position: relative; height: 480px; background: url('/design/sfsintl/12923/tem162/fixban.jpg') center top no-repeat; background-attachment: fixed; overflow: hidden; }
.fixed-img-banner .inner {width: 1200px; margin: 60px auto 0; text-align:center; }
.fixed-img-banner .inner .t1 { padding: 120px 0 60px 0; font-size: 46px; color: #fff; font-weight: bold;}
.fixed-img-banner .inner .t2 a { display:inline-block; font-size: 16px; color: #fff; border:1px solid #fff; padding:8px 40px; }
.fixed-img-banner .inner .t2 a:hover { background-color:rgb(255,255,255,0.3)}

/* Best Seller */
.bestPrdArea {width:1200px;margin:120px auto;position:relative;}
.bestPrdArea .bx-viewport { margin:40px 0 0;}
.bestPrdArea li { width: 285px; float:left;vertical-align: top; text-align: center;margin:0 20px 20px 0;box-sizing:border-box;position:relative;}
.bestPrdArea li:nth-child(4n) { margin:0;}
.bestPrdArea li img.listPic { width: 100%;   height: 285px;}
.bestPrdArea li a {display:block;position:relative;}
.bestPrdArea li a .best { font-size: 16px; color: #fff; background: rgba(0,0,0,0.3); width: 50px; height: 34px; position: absolute; top: 0; right: 0; line-height: 34px; }
.bestPrdArea .bx-controls {height:40px;}
.bestPrdArea .bx-pager {position:absolute;top:5px;left:50%;width:200px;text-align:center;margin-left:-100px;}
.bestPrdArea .bx-pager-item {display:inline-block;vertical-align:top;font-size:0;padding:0 7px;}
.bestPrdArea .bx-pager-link {display:inline-block;width:12px;height:12px;border:2px solid #e1e0e0;border-radius:50%;font-size:0;}
.bestPrdArea .bx-pager-link.active {background-color:#383838;border-color:#383838;cursor:default;}
.bestPrdArea .bx-controls-direction a {font-size:50px; }
.bestPrdArea .bx-controls-direction .bx-prev, 
.bestPrdArea .bx-controls-direction .bx-next { position:absolute;top:47%;}
.bestPrdArea .bx-controls-direction .bx-prev {left:-80px; }
.bestPrdArea .bx-controls-direction .bx-next {right:-80px; }
.bestPrdArea .bx-controls-direction .bx-prev:hover, 
.bestPrdArea .bx-controls-direction .bx-next:hover { opacity:0.5;}

.bestPrdArea .shoppingInfo { display:none;position:absolute;top:0;left:0;width:100%;height:100%;text-align: center; font-size: 13px; background:rgba(0,0,0,0.5);}
.bestPrdArea .shoppingInfo a { color:#fff;}
.bestPrdArea .shoppingInfo .listName {padding:120px 0 10px;font-size:14px; }
.bestPrdArea .shoppingInfo .listPrice { font-size:14px;}
.bestPrdArea .shoppingInfo .listPrice .originPrice { color:#cdcdcd;margin:0 4px 0 0;}
.bestPrdArea .shoppingInfo .prd-preview a {padding:20px 0 0;font-size:24px; }

/* SPEICAL ITEM */
#specialWrap {width:1200px; margin:120px auto; }

/*.button {width:80;height:65px;position:absolute; top:50px; left:20px;}
.button a {text-align:center;font-weight:bold;font-size: 30px;} */

.button:hover{background:#b8ade0; padding:15px 5% 13px;}

contents2 {width:100%;margin:0 auto; text-align:center;}
.visual { position:relative;margin:0 }
.visual img { width:100%; }
.visual>div { position:absolute; width:1024px; left:50%; transform:translateX(-50%); top:30%; }
.visual h4 {color:#fff; font-size:13px;margin-bottom:20px;}
.visual h1 {font-family: 'Arsenal', sans-serif; font-size:3rem; color:#fff;letter-spacing:1.6s;
font-weight:bold; }
.btn { display:inline-block; margin:100px 300px; padding:16px 40px; background:#bf5b7c; color:#fff; transition:all 0.6s; }
.btn:hover { background: #fff; color:#000; font-weight:bold; }


/*
.visual h1 {
	-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}*/

*{
    margin: 0;
    padding:0
}


.main {}

.main .mainImg {width:100%;}

.textBox1 a {font-size: 10pt;
    font-weight: bold;
    padding: 13px 67px;
    border: 1px solid;
    background-color: #ffffff;}


.imgBox .textBox2 {
position: absolute;
    margin-top: 27%;
    margin-left: 70%;}
    
.textBox2 a {font-size: 10pt;
    font-weight: bold;
    padding: 13px 67px;
    border: 1px solid;
    background-color: #ffffff;}
    

.textBox1 a:hover{background-color:#b5b4b4;}

.textBox2 a:hover{background-color:#b5b4b4;}
    


/*.mainTxt a:after{
content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 0px;
  height: 2px;
  margin: 5px 0 0;
  transition: all 0.2s ease-in-out;
  transition-duration: 0.3s;
  opacity: 0;
  background-color: #000;
}

.mainTxt a:hover:after {
    width: 100%;
  opacity: 1;
}*/



.swiper-container.swiper1 .swiper-button-prev, .swiper-container.swiper1
.swiper-button-next {
padding: 15px 5px;
    border-radius: 20px;
    color: black !important;
    padding-top: 6%;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
}



.pg2 {position: relative;}
.pg2 .swiper.mySwiper { margin-top: 70px; }
.pg2 .swiper.mySwiper .txt { }
.swiper.mySwiper .txt h3 { text-align: center; font-size: 25px;font-weight:bold }
.swiper-wrapper {margin-top: 16px;}
.pg2 .swiper-wrapper .swiper-slide { position: relative; }
.pg2 .swiper-slide img { }
.pg3 {margin-top: 68px;}
.pg4 {margin-top: 68px;}
.ho-a { width: 100%; }
.ho-b { width: 100%; position: absolute; top: 0px; left: 0px; display: none; }
.swiper-slide:hover .ho-b { display: block; }
.icon { position: absolute; margin: -54px 0px 0px 370px; }
.icon img { width: 35px; }
.icon .url { }
.icon .color { }
.subTxt { text-align: center; }
.subTxt h4 {font-weight: bold;
    margin-top: 21px;
    border-bottom:1px solid;
    display:inline-block;
    }
.subTxt p {margin-top: 13px;font-size: 14px;}
.topBanner { margin-top: 100px; text-align:center; }
.topBanner img { }
.allprd { text-align: center; margin-top: 12px; }
.allprd a {    color: black;
    font-size: 1.2em;
    border-bottom: 1px solid;}


.swiper.mySwiper .swiper-button-prev, 
.swiper.mySwiper .swiper-button-next {padding: 0; color:black !important;}


.swiper-container.swiper2 .text {text-align:center;margin-top:150px;}     
.swiper-container.swiper2 .text h1 {color:#000; font-size:38px; font-weight:bold; margin-top:150px}
.swiper-container.swiper2 .text h2 { padding-top:45px; color:#9d9d9d;font-size:20px; }
.swiper-container.swiper2 .text p { padding-top:45px; color:#201f1f;    padding-bottom: 55px;} 
.swiper-container.swiper2 .swiper-pagination {position: relative;
    margin-top: -20px;}
.swiper-container.swiper2 .swiper-button-prev,
.swiper-container.swiper2 .swiper-button-next {}
/*up*/
@keyframes motion {
    0%{transform:translateY(0);}
    50%{transform: translateY(-10px);}
    100%{transform: translateY(0);}
}

#up {position:fixed; right: 60px; bottom:60px; animation:motion ease 1s infinite; z-index:9;}


/* ----------------------------------------------
 * Generated by Animista on 2021-9-16 16:5:44
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tracking-in-expand
 * ----------------------------------------
 */
@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}



@media (max-width:1024px) {
	
	.visual div { width:80%; left:10%; transform:translateX(0); }

}

@media (max-width:680px) {
	
	.visual div { position:static; width:100%; left:0; text-align:center; padding-top:100px; } 
	 /* absolute유지한상태에서 top속성으로 위치수정가능  */
	.visual h1 { font-size:2rem; }
	
}



/* CSS: 안정성 및 반응형 레이아웃 */
.main-banner-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #f4f4f4; /* 이미지 로딩 전 배경색 */
}

.banner-link {
    display: block;
    position: relative;
    text-decoration: none;
}

.image-wrapper img {
    width: 100%;
    display: block;
    transition: transform 1.2s ease; /* 호버 시 미세한 확대 효과 */
}

.banner-link:hover .image-wrapper img {
    transform: scale(1.03);
}

/* 문구 배치 및 효과 */
.banner-text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center; /* 수직 중앙 정렬 */
    justify-content: center; /* 수평 중앙 정렬 */
    text-align: center;
    background: rgba(0, 0, 0, 0.1); /* 이미지 가독성을 위한 미세한 어두움 */
}

.text-inner {
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s forwards ease-out 0.5s; /* 0.5초 뒤 등장 */
}

.main-title {
    font-size: 4rem; /* 모바일 대응 시 조정 필요 */
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    font-family: 'Playfair Display', serif; /* 고급스러운 세리프체 권장 */
}

.sub-title {
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 0.3em;
    margin-bottom: 30px;
}

.shop-now {
    display: inline-block;
    padding: 10px 30px;
    border: 1px solid #ffffff;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.shop-now:hover {
    background: #ffffff;
    color: #000000;
}

/* 등장 애니메이션 */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.main-banner-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.banner-link {
    display: block;
    position: relative;
}

/* 1. 이미지 위에 은은한 레이어 추가 (글자를 살리는 핵심) */
.banner-text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* 중앙 부분에만 시선이 집중되도록 그라데이션 처리 */
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.2) 0%, 
        rgba(0,0,0,0.4) 50%, 
        rgba(0,0,0,0.2) 100%
    );
}

/* 2. 텍스트 가독성 강화 스타일 */
.text-inner {
    /* 배경이 복잡할 때 유용한 블러 효과 (글자 주변만 살짝 몽환적으로) */
    backdrop-filter: blur(2px); 
    -webkit-backdrop-filter: blur(2px);
    padding: 40px;
    border-radius: 20px;
}

.main-title {
    font-size: 4.5rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    margin-bottom: 15px;
    /* 텍스트 컬러를 화이트로 변경하고 미세한 그림자 추가 */
    color: #ffffff; 
    text-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5); 
}

.sub-title {
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.4em;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 35px;
    text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4);
}

.shop-now {
    display: inline-block;
    padding: 12px 35px;
    border: 1.5px solid #ffffff;
    background: rgba(255, 255, 255, 0.1); /* 버튼 투명도 */
    color: #ffffff;
    font-size: 0.95rem;
    letter-spacing: 0.2em;
    transition: 0.3s;
    backdrop-filter: blur(5px);
}

.shop-now:hover {
    background: #ffffff;
    color: #000000;
}


/* BASIC css end */