@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2018-03-27
******************************************************** */

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:718px; position:relative;}	/* 비주얼높이값 이미지에맞게 수정 */
.main-visual-con .slick-track,
.main-visual-con .slick-list {
	 -webkit-perspective: 2000;
	-webkit-backface-visibility: hidden;
}
.main-visual-con, 
.main-visual-con .slick-list,  
.main-visual-con .slick-track, 
.main-visual-item{
	height:100%;
}
.main-visual-con{z-index:1;}
/* 메인 비주얼 :: 이미지 */
.main-visual-item{position:relative;}
.main-visual-item .main-visual-pc-img{
	width:100%;
	height:100%;
	background-size:cover !important;
}
.main-visual-item .main-visual-m-img{display:none;}

/* 메인 비주얼 :: 화살표 */
.main-visual-con .slick-arrow{	position:absolute; width:104px; height:30px; top:50%; margin-top:-15px; cursor:pointer; border:0; cursor:pointer; filter: drop-shadow(5px 4px 5px rgba(0,0,0,0.7)); z-index:9; font-size:0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.main-visual-con .slick-arrow.slick-prev{left:6%; background:url("/images/button/arrow_prev.png") no-repeat;}
.main-visual-con .slick-arrow.slick-next{right:6%; background:url("/images/button/arrow_next.png") no-repeat;}
@media all and ( min-width: 1220px ){
	.main-visual-con .slick-arrow.slick-prev:hover{margin-left: -10px;}
	.main-visual-con .slick-arrow.slick-next:hover{margin-right: -10px;}
}
/* 모바일용 슬라이드 버튼 */
.m-slide-btn{display: none;}



/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit{letter-spacing:-0.5px; text-align:center;}
.main-tit strong{display:block; color:#fff; font-size:32px; font-weight:600;}
.main-sub-tit{margin-top:15px; color:rgba(255,255,255,0.8); font-weight: 400; font-size:15px; letter-spacing:0.5px; text-align: center;}


/* -------- 비주얼 하단 :: 메뉴컨텐츠 -------- */
.main-menu-con{position: relative; top: -65px; z-index: 1;}
.main-menu-con ul{}
.main-menu-con ul li{float: left; width: 16.66%;}
.main-menu-con ul li a{display: block; height: 235px; text-align: center; -webkit-transition: transform 0.3s; -moz-transition: transform 0.3s; -ms-transition: transform 0.3s; -o-transition: transform 0.3s; transition: transform 0.3s;}
.main-menu-con ul li a .img{position: relative;}
.main-menu-con ul li a .img span{display: inline-block; height: 159px;}
.main-menu-con ul li a .img span img{height: 100%;}
.main-menu-con ul li a .txt{margin-top: 10px;}
.main-menu-con ul li a .txt .kr{font-size: 25px; letter-spacing: -0.25px; color: #fff;}
.main-menu-con ul li a .txt .en{padding-top: 15px; font-size: 13px; font-weight: 400; letter-spacing: 0.5px; color: rgba(255,255,255,0.5);}
/* 별 */
.main-menu-con ul li a .img .star-con{}
.main-menu-con ul li a .img .star-con em{position: absolute; display: block; width: 18px; height: 17px; opacity: 0; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -ms-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s;}
.main-menu-con ul li a .img .star-con em img{width: 100%; height: 100%; filter: drop-shadow(5px 1px 5px rgba(0,0,0,0.2));}
.main-menu-con ul li a .img .star-con .star01{top: -20px; left: 50%; margin-left: -38px;
-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
.main-menu-con ul li a .img .star-con .star02{top: -28px; left: 50%; margin-left: -9px; transition-delay: 0.08s;}
.main-menu-con ul li a .img .star-con .star03{top: -20px; left: 50%; margin-left: 19px; transition-delay: 0.16s;
-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}

@media all and (min-width:1220px){
	/* hover시 */
	.main-menu-con ul li a:hover{-webkit-transform: translateY(-40px); -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); -o-transform: translateY(-40px); transform: translateY(-40px);}
	.main-menu-con ul li a:hover .star-con em{opacity: 1;}
}





/* -------- 메인 컨텐츠 :: 컨텐츠1(베스트메뉴) -------- */
#mainContent .main-bg-con{width: 100%; height: 1112px; background: url("../images/main/main_con01_bg.jpg") center 0 no-repeat; -webkit-background-size: cover; background-size: cover;}
#mainContent1{padding-top: 95px;}

.main-best-menu{margin-top: 50px;}
/* 큰 사이즈 제품사진 컨텐츠 */
.ori-list-con{width: 720px; float: left;}
.ori-list-con ul{}
.ori-list-con ul li{float: left; width: 100%;}
.ori-list-con ul li a{position: relative; display: block;}
.ori-list-con ul li a .img{height: 400px; text-align: center; background: url("../images/main/best_menu_bg.jpg") center 0 no-repeat;}
.ori-list-con ul li a .img span{margin-top: 17px; display: inline-block; width: auto; height: 365px;}/* 이미지 사이즈 546x443 */
.ori-list-con ul li a .img span img{height: 100%;}
.ori-list-con ul li a .txt{position: relative; background-color: #fff;}
.ori-list-con ul li a .txt > div{border: 1px solid #eee; width: calc(100% - 62px); padding: 30px; height: 60px;}
.ori-list-con ul li a .txt .tit{font-size: 24px; letter-spacing: -0.25px; color: #af222b; font-family: 'S-CoreDream-6Bold', 'Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;}
.ori-list-con ul li a .txt .sub-tit{margin-top: 20px; font-size: 16px; font-weight: 400; letter-spacing: -0.5px; color: #666;}
.ori-list-con ul li a .txt .more-btn{position: absolute; top: 50%; margin-top: -25px; right: 30px; display: block; width: 49px; height: 49px; border: 1px solid #eee; text-align: center;}
.ori-list-con ul li a .txt .more-btn i{display: inline-block; color: #aaa; font-size: 30px; line-height: 49px;}
/* num배너 */
.ori-list-con ul li a .top-banner{position: absolute; top: 0; left: 0; width: 60px; height: 60px; background-color: #af222b; text-align: center;}
.ori-list-con ul li a .top-banner span{display: block; width: 26px; margin: 10px auto 0;}
.ori-list-con ul li a .top-banner span img{width: 100%;}
.ori-list-con ul li a .top-banner em{display: inline-block; margin-top: 5px; font-size: 14px; color: #fff; font-family: 'S-CoreDream-4Regular', 'Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;}

/* 썸네일 제품사진 컨텐츠 */
.thum-list-con{width: 460px; float: right;}
.thum-list-con{}
.thum-list-con ul{margin: -10px;}
.thum-list-con ul li{float: left; width: calc(50% - 20px) !important; margin: 10px;}
.thum-list-con ul li a{position: relative; display: block;}
.thum-list-con ul li a:before{position: absolute; top: 0; left: 0; display: block; content: ''; width: calc(100% - 6px); height: calc(100% - 6px); border: 3px solid transparent; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.thum-list-con ul li a .img{height: 170px; text-align: center; background: url("../images/main/best_menu_bg.jpg") center center no-repeat;}
.thum-list-con ul li a .img span{margin-top: 7px; display: inline-block; width: auto; height: 155px;}
.thum-list-con ul li a .img span img{height: 100%;}
.thum-list-con ul li a .txt{height: 80px; background-color: #fff; text-align: center;}
.thum-list-con ul li a .txt .up-tit{padding-top: 15px; font-size: 12px; font-weight: 400; color: #af222b;}
.thum-list-con ul li a .txt .tit{margin-top: 10px; font-size: 22px; letter-spacing: -0.5px; color: #333; font-family: 'S-CoreDream-5Medium', 'Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;}

.thum-list-con ul li.slick-current a:before{border-color: #af222b;}

@media (max-width:1220px) {
	#mainContent1{padding-top: 200px; padding-bottom: 150px;}
	
	.main-best-menu{margin-top: 50px; padding-bottom: 0}
	/* 큰 사이즈 제품사진 컨텐츠 */
	.ori-list-con{width: 60%; float: left;}
	.ori-list-con ul{}
	.ori-list-con ul li{float: left; width: 100%;}
	.ori-list-con ul li a{position: relative; display: block; height: 0; padding-top: 72%;}
	.ori-list-con ul li a .img{width: 100%; position: absolute; top: 0; left: 0; height: 0; padding-top: 55%; text-align: center; background: url("../images/main/best_menu_bg.jpg") center 0 no-repeat; -webkit-background-size: cover;
	background-size: cover;}
	.ori-list-con ul li a .img span{position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; display: inline-block; width: 65%; height: auto;}/* 이미지 사이즈 546x443 */
	.ori-list-con ul li a .img span img{position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; height: auto; width: 100%;}
	.ori-list-con ul li a .txt{position: absolute; border: 1px solid #eee; width: calc(100% - 2px); bottom: 0; left: 0; height: 0; padding-top: 17%;}
	.ori-list-con ul li a .txt > div{border: none; width: calc(100% - 40px); height: auto; padding: 0 20px; position: absolute; top: 50%; margin-top: -24px; left: 0;}
	.ori-list-con ul li a .txt .tit{font-size: 20px;}
	.ori-list-con ul li a .txt .sub-tit{margin-top: 3%; font-size: 16px; font-weight: 400; letter-spacing: -0.5px; color: #666; width: calc(100% - 55px); height:16px; overflow: hidden; white-space:nowrap; text-overflow:ellipsis;}
	.ori-list-con ul li a .txt .more-btn{position: absolute; top: 50%; margin-top: -21px; right: 20px; display: block; width: 40px; height: 40px;}
	.ori-list-con ul li a .txt .more-btn i{font-size: 26px; line-height: 40px;}
	/* num배너 */
	.ori-list-con ul li a .top-banner{position: absolute; top: 0; left: 0; width: 60px; height: 60px; background-color: #af222b; text-align: center;}
	.ori-list-con ul li a .top-banner span{display: block; width: 26px; margin: 10px auto 0;}
	.ori-list-con ul li a .top-banner span img{width: 100%;}
	.ori-list-con ul li a .top-banner em{display: inline-block; margin-top: 5px; font-size: 14px; color: #fff;}

	/* 썸네일 제품사진 컨텐츠 */
	.thum-list-con{width: 38%; float: right;}
	.thum-list-con{}
	.thum-list-con ul{margin: -2%;}
	.thum-list-con ul li{float: left; width: 46% !important; margin: 2%;}
	.thum-list-con ul li a{position: relative; display: block; height: 0; padding-top: 113%;}
	.thum-list-con ul li a:before{z-index: 1;}
	.thum-list-con ul li a .img{height: 0; position: absolute; background: url("../images/main/best_menu_bg.jpg") center center no-repeat; top: 0; left: 0; width: 100%; padding-top: 77%;}
	.thum-list-con ul li a .img span{position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; display: inline-block; width: 65%; height: auto;}
	.thum-list-con ul li a .img span img{position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; height: auto; width: 100%;}
	.thum-list-con ul li a .txt{background-color: #fff; text-align: center; position: absolute; width: 100%; bottom: 0; left: 0; height: 0; padding-top: 36%;}
	.thum-list-con ul li a .txt > div{width: 100%; height: auto; position: absolute; top: 50%; margin-top: -16px; left: 0;}
	.thum-list-con ul li a .txt .up-tit{padding-top: 0; font-size: 12px;}
	.thum-list-con ul li a .txt .tit{margin-top: 5px; font-size: 15px;}

	.thum-list-con ul li.slick-current a:before{border-color: #af222b;}
}
@media (max-width:800px) {
	#mainContent1{padding-top: 100px; padding-bottom: 75px;}
	
	.main-best-menu{margin-top: 50px; padding-bottom: 0}
	/* 큰 사이즈 제품사진 컨텐츠 */
	.ori-list-con{width: 100%; float: none;}
	.ori-list-con ul li{}
	.ori-list-con ul li a {position: static; display: block; height: auto; padding-top: 0;}
	.ori-list-con ul li a .img {position: relative; height: 0; padding-top: 54%; -webkit-background-size: cover; background-size: cover;}
	.ori-list-con ul li a .img span{max-width: 340px; width: 60%;}
	.ori-list-con ul li a .txt {position: relative; padding-top: 0; height: 50px;}
	.ori-list-con ul li a .txt > div {position: static; width: calc(100% - 40px); padding: 0 20px; margin-top: 0; left: 0;}
	.ori-list-con ul li a .txt .tit{font-size: 20px; line-height: 50px;}
	.ori-list-con ul li a .txt .sub-tit{display: none;}
	.ori-list-con ul li a .txt .more-btn{position: absolute; top: 50%; margin-top: -11.5px; right: 20px; display: block; width: 25px; height: 25px;}
	.ori-list-con ul li a .txt .more-btn i{font-size: 16px; line-height: 25px;}
	.thum-list-con ul li a:before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    content: ''; width: calc(100% - 3px); height: calc(100% - 3px);}
	/* num배너 */
	.ori-list-con ul li a .top-banner{width: 50px; height: 50px;}
	.ori-list-con ul li a .top-banner span{width: 22px; margin: 7px auto 0;}
	.ori-list-con ul li a .top-banner em{margin-top: 5px; font-size: 12px;}

	/* 썸네일 제품사진 컨텐츠 */
	.thum-list-con{margin-top: 2%; width: 100%; float: none;}
	.thum-list-con ul{margin: -1%;}
	.thum-list-con ul li{float: left; width: 23% !important; margin: 1%;}
	.thum-list-con ul li a {padding-top: 0; position: relative; height: auto;}
	.thum-list-con ul li a .img {height: 0; padding-top: 82%; position: relative;}
	.thum-list-con ul li a .txt{padding-top: 0; height: 30px; position: static;}
	.thum-list-con ul li a .txt > div{margin-top: 0; position: static;}
	.thum-list-con ul li a .txt .up-tit{padding-top: 0; font-size: 15px; color: #555; line-height: 30px;}
	.thum-list-con ul li a .txt .tit{display: none;}

}



/* -------- 메인 컨텐츠 :: 컨텐츠2(관리 배너) -------- */
.main-full-banner-box{width:100%;}
.main-full-banner-box .main-full-banner-left{width: 50%; float: left; height: auto;}
.main-full-banner-box .main-full-banner-left .pc-img, .main-full-banner-box .main-full-banner-right .pc-img{width: 100%; height: 100%;}
.main-full-banner-box .main-full-banner-right{width: 50%; float: left; height: auto;}
/* 모바일 이미지 */
.main-full-banner-box .main-full-banner-left .m-img, .main-full-banner-box .main-full-banner-right .m-img{display: none;}