@charset "utf-8";
/* *******************************************************
 * filename : main_responsive.css
 * description : 메인 레이아웃 및 컨텐츠 반응형 CSS
 * date : 2019-02-01
******************************************************** */

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인컨텐츠 :: 제품 -------- */
@media all and ( max-width: 1440px ){
	.main-prd-txt-wrapper {left: 0; right: 40px;}
	.main-prd-list .main-prd-item .circle-wrapper .circle-more-btn{left:10px; bottom:30px; width:70px; height:70px; line-height:70px;}
	.orange-bg{width: 25%;}
	.gray-bg{width: 75%;}
	.main-area {width: 92%;}

	.main-prd-list .slick-dots{left: 18.5%;}
}
@media all and ( max-width: 1220px ){
	#mainVisual{height: 800px !important;}
	/* 제품 :: 리스트 */
	.orange-bg{display: none;}
	.gray-bg{width: 100%; height: 100%;}
	.main-area{width: 100%;}
	.main-prd-list-wrapper{margin-top:-145px;}
	.main-prd-list{height:auto; margin:0px auto; padding:0; border:0;}
	.prd-name-box .prd-top-line{margin: 0 auto;}
	.main-prd-list:before{display:none;}
	.main-prd-list .slick-list{overflow:hidden;}
	.main-prd-list .main-prd-item{height:330px}
	.main-prd-list .main-prd-item .circle-wrapper,
	.main-prd-list .main-prd-item .circle-wrapper .circle-icon{width: 330px; height: 330px;}
	.main-prd-list .main-prd-item .circle-wrapper .circle-icon img{opacity:1.0;filter:Alpha(opacity=100);}
	.main-prd-list .main-prd-item .circle-wrapper .circle-more-btn{opacity:1.0;filter:Alpha(opacity=100); transform:scale(1);}
	/* 제품 :: 텍스트 */
	.main-prd-txt-wrapper{left:15px; right:15px;}
	.main-prd-txt-inner{margin-left:0;}
	.prd-name-box{text-align:center; width:100%; margin-bottom:180px;}
	.prd-detail-txt dt, .prd-detail-txt dd p{display: none;}
	.prd-detail-txt{position:absolute; width: 100%; top:50%; left:0; margin-top: 260px; text-align: center;}
	.prd-detail-txt dd a{margin-top: 0; display:inline-block; width: 245px; height: 40px; line-height: 40px; font-size: 15px;}
	/* 제품 :: 버튼 */
	.main-prd-controls{position:absolute; width: auto; height:40px; top:50%; bottom: auto; background-color: transparent; left:15px; right:15px; margin-top: -20px; z-index:99;}
	.main-prd-controls.m-dis-block{display: block;}
	.main-prd-controls.m-dis-none{display: none;}
	.main-prd-controls .main-prd-controls-inner{position:relative; width:auto; height:100%;}
	.main-prd-controls button{position:absolute; width: 40px; height: 40px;}
	.main-prd-controls .main-prd-next-btn:before{display: none;}
	.main-prd-controls .main-prd-prev-btn{left:50%; margin-left:-260px}
	.main-prd-controls .main-prd-next-btn{right:50%; margin-right:-260px}

	.main-prd-list .main-prd-item .circle-wrapper .circle-more-btn{left:10px; bottom:30px; width:60px; height:60px; line-height:60px;}
}
@media all and ( max-width: 800px ){
	#mainVisual{height: 570px !important;}
	/* 제품 :: 리스트 */
	.main-prd-list-wrapper{margin-top:-120px;}
	.main-prd-list .main-prd-item {height: 240px;}
	.main-prd-list .main-prd-item .circle-wrapper,
	.main-prd-list .main-prd-item .circle-wrapper .circle-icon{width: 240px; height: 240px;}
	.main-prd-list .main-prd-item .circle-wrapper .circle-icon{background-color: #fff;}
	.main-prd-list .main-prd-item .circle-wrapper .circle-more-btn{width:45px; height:45px; line-height:45px; left:3px; bottom:13px;}
	.main-prd-list .main-prd-item .circle-wrapper .circle-more-btn img{line-height:45px; max-width: 25%; max-height: 25%;}
	/* 제품 :: 텍스트 */
	.prd-name-box{margin-bottom:150px}
	.prd-name-box .prd-top-line{width: 12px; height: 3px;}
	.prd-name-box .prd-name{margin-top: 10px; font-size:25px; margin-bottom: 10px;}
	.prd-name-box .prd-category{margin-top: 0; font-size: 13px; line-height: 1.3;}
	.prd-name-box .m-br{display: block;}
	.prd-detail-txt{margin-top: 170px;}
	/* 제품 :: 버튼 */
	.main-prd-controls{/* margin-top:30px */}
	.main-prd-controls button img{height: 17px;}
	.main-prd-controls .main-prd-prev-btn{margin-left:-190px}
	.main-prd-controls .main-prd-next-btn{margin-right:-190px}
	/* 제품 :: 탭 */
	.main-prd-tab-content{bottom:30px; left:15px; right:15px; width:auto}
	.main-prd-tab-content ul li a{height:43px;font-size:15px}
}
@media all and ( max-width: 480px ){
	/* 제품 :: 버튼 */	
	.main-prd-controls .main-prd-prev-btn{margin-left:-160px}
	.main-prd-controls .main-prd-next-btn{margin-right:-160px}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width: 800px ){
	.main-cm-tit{margin-bottom:20px;}
	.main-cm-tit strong{font-size:20px;}	
}

/* -------- 메인 컨텐츠 :: 컨텐츠1(PRODUCTS) -------- */
@media all and ( max-width: 1220px ){
	.main-product-wrapper > ul{margin:0 -0.3%}
	.main-product-wrapper .gallery-over-list-item {margin: 0 0.3%;}
}

@media all and ( max-width: 800px ){
	#mainContent1 {padding: 50px 0 55px;}
	.main-product-wrapper{width: 66%; margin: 0; margin-left: 7px; padding: 0 !important;}
	.main-product-wrapper .slick-list {overflow: visible;}
	.main-product-wrapper > ul{margin:0 -0.4%}
	.main-product-wrapper .gallery-over-list-item {margin: 0 0.4%;}

	.main-product-wrapper .gallery-img-box .gallery-btn {width:35px; height:35px; right:15px; bottom:-17.5px;}
	.main-product-wrapper .gallery-img-box .gallery-btn i{line-height: 35px; font-size: 20px;}
	.main-product-wrapper .gallery-info {padding: 30px 0 0;}
	.main-product-wrapper .gallery-info .gallery-info-tit {font-size:15px;}
	.main-product-wrapper .gallery-info p {font-size:12px; line-height: 17px; margin:10px 0 0; height:68px;}
}
@media all and ( max-width: 480px ){
    .main-product-wrapper{margin-left: 5px;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠2(배너) -------- */
@media all and ( max-width: 800px ){
	ul.main-bnr-list li{width: 100%; float: left;}
	ul.main-bnr-list li .inner{padding-top: 55%;}
	ul.main-bnr-list li .inner .txt-con{left: 25px; right: 25px; top: 13%;}
	ul.main-bnr-list li .inner .txt-con h5{font-size: 20px; text-shadow: 0px 0px 6px rgba(255,255,255,0.56);}
	ul.main-bnr-list li .inner .txt-con p{display: none;}
	ul.main-bnr-list li .inner .txt-con span{margin-top: 25px; width: 145px; line-height: 30px; border: 1px solid #fff; font-size: 13px;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3(PR VIDEO) -------- */
@media all and ( max-width: 800px ){
	#mainBrandCon{padding:50px 0 55px;}
	.video-cover-box .icon {-webkit-background-size: 100%; background-size: 100%;}
}

/* ******************  메인 오른쪽 퀵메뉴 ********************** */
@media all and (max-width:1536px){
	#rightBar{right: 15px;}
}
@media all and ( max-width: 1220px ){
	#rightBar{right: -100px;}
	#rightBar.fixed{visibility:hidden;opacity:0;filter:Alpha(opacity=0);}
}