/* BASIC css start */
/******************************************************* Main *******************************************************/
#content{max-width:100%;}
#maincontents{width:100%; padding-top:0;} /* 메인단독 */
.w_1500{width:100%; max-width:1500px; margin:0 auto;}
.mainCon{margin-top:120px; position:relative;}



/* fade Effect */
.fadeEft{opacity:0; transform: translateY(100px); transition:transform 1s ease-in-out, opacity 1s ease-in-out; transition-delay:0.3s;}
.fadeEft.in{opacity:1; transform: translateY(0);}



/* 상단 슬라이드 */
#mainBanner{position: relative; width:100%; height:100%;}
#mainBanner .main-cell{width:100%;}
#mainBanner .main-cell a{display:block;}
#mainBanner .main-cell a img{width:100%;}
#mainBanner .main-cell .mainTypo{display:none !important; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); font-size:36px; letter-spacing:0.5px; color:#f9f9f9; text-align:center; line-height:1.1;}
#mainBanner .main-cell .mainTypo p{font-size:18px;}

/* Fade */
#mainBanner .flickity-slider{transform: none !important;}
#mainBanner .main-cell {left:0 !important; opacity:0; transition:opacity 0.5s ease-in-out; z-index:-1;}
#mainBanner .main-cell.is-selected {opacity:1; z-index:0;}

/* Dots */
#mainBanner .carousel-main ol.flickity-page-dots{position:absolute; right:55px; bottom:50px; z-index:51; width:auto;}
#mainBanner .carousel-main ol.flickity-page-dots li.dot{display:inline-block; width:12px; height:12px; text-align:center; margin:0 8px; position:relative; opacity:1; background:transparent;}
#mainBanner .carousel-main ol.flickity-page-dots li.dot:after{content:""; display:inline-block; vertical-align:middle; width:5px; height:5px; background:#f9f9f9; border-radius:10px; transition: .2s ease-in-out;}
#mainBanner .carousel-main ol.flickity-page-dots li.dot:hover:after,
#mainBanner .carousel-main ol.flickity-page-dots li.dot:focus:after,
#mainBanner .carousel-main ol.flickity-page-dots li.dot.is-selected:after{width:11px; height:11px;}
/* //상단 슬라이드 */




/* 지그재그 */
#zigzag-prd{padding-bottom:150px; position:relative;}

#zigzag-prd .textArea{width:100%; font-size:0; line-height:0; letter-spacing:0; padding:0 105px; box-sizing:border-box; font-family:'Muli', sans-serif;}
#zigzag-prd .textArea h2,
#zigzag-prd .textArea p{display:inline-block; vertical-align:top; width:37%; font-size:1.3vw; line-height:1.55; letter-spacing:0.5px; font-weight:800;}
#zigzag-prd .textArea p{width:63%;}
#zigzag-prd .textArea p b{display:block; margin-bottom:30px; font-size:1.4vw; letter-spacing:0px; font-weight:800; text-transform:uppercase;}
#zigzag-prd .textArea p span{display:block; margin-bottom:60px;}

#zigzag-prd .thumbArea{margin-top:160px;}
#zigzag-prd .thumbArea ul{font-size:0; line-height:0; letter-spacing:0;}
#zigzag-prd .thumbArea ul li{display:inline-block; width:50%; position:relative; padding-bottom:0;}
#zigzag-prd .thumbArea ul li img{width:100%;}
#zigzag-prd .thumbArea li:nth-child(even){position: relative; bottom:-150px;}
#zigzag-prd .thumbArea li .infoBox{position:absolute; top:0; left:0; width:100%; height:100%; background: rgba(20,20,20,0.4); opacity:0; transition: opacity 0.3s; cursor:pointer;}
#zigzag-prd .thumbArea li .infoBox .txtbox{display:none !important; position:absolute; bottom:0; left:0; padding:0 0 80px 80px; line-height:24px;}
#zigzag-prd .thumbArea li .infoBox .txtbox h4{display:none; font-size:18px; color:#efefef; font-weight:600;}
#zigzag-prd .thumbArea li .infoBox .txtbox p{/*margin-top:8px; border-top:1px solid #eee; padding-top:8px;*/ color:#efefef; max-width:500px; font-size:17px; text-align:left;}
#zigzag-prd .thumbArea li:hover .infoBox{opacity:1;}



/* 탭상품 */
#tab-prd .carousel-tab{width:100%;}
#tab-prd .carousel-tab .tab-cell{width:100%;}
#tab-prd .carousel-tab .tab-cell:nth-child(3) .prd-consumer,
#tab-prd .carousel-tab .tab-cell:nth-child(3) .prd-price,
#tab-prd .carousel-tab .tab-cell:nth-child(3) .prd-icon{display:block;}

#tab-prd .carousel-tab .tab-cell:nth-child(1) .prd-thumb .button,
#tab-prd .carousel-tab .tab-cell:nth-child(2) .prd-thumb .button{display:none !important;}

/* Nav */
#tab-prd .carousel-nav{text-align:center; margin-bottom:50px;}
#tab-prd .carousel-nav .nav-cell{display:inline-block; width:auto; font-size:26px; font-weight:normal; letter-spacing:0.3px; color:#ddd; border-bottom:1px solid #e8e8e8; padding:5px 3px; margin: 0 20px; font-family: 'Rozha One','Jeju Myeongjo',serif; vertical-align: middle; text-align:center; transition:0.5s; cursor:pointer;}
#tab-prd .carousel-nav .nav-cell:hover{color:#777;}
#tab-prd .carousel-nav .nav-cell.is-selected{color:#444; border-color:#666;}
/* //탭상품영역 */





/* layout - 메인에서만 적용된 부분 */

/* header */
#header{opacity:0; visibility:hidden;}
#header .leftArea{left:0px !important;}
#header .rightArea{right:0px !important;}

#header.fixed{opacity:1; visibility:visible;}
#header.fixed .leftArea{left:70px !important;}
#header.fixed .rightArea{right:81px !important;}

/* footer */
#footer{margin-top:200px !important;}
#btn_top{opacity:0; visibility:hidden; bottom:30px !important;}
#btn_top.fade{opacity:1; visibility:visible; bottom:60px !important;}





/************************************ 0~1200px// ************************************/
@media screen and (max-width:1200px){
	#maincontents{padding-top:80px;}
	#mainBanner .main-cell .mainTypo{font-size:32px;}
	#zigzag-prd .textArea h2 img{width:70%;}
	#zigzag-prd .thumbArea li .infoBox .txtbox{padding:30px;}

	/* header */
	#header .leftArea{left:40px !important;}
	#header .rightArea{right:40px !important;}
	#header.fixed .leftArea{left:40px !important;}
	#header.fixed .rightArea{right:40px !important;}
}
/************************************ //0~1200px ************************************/
/* BASIC css end */