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







/* BASIC css end */