@charset "utf-8";

.img.mob{display:none !important;}

.area_visual{position:relative;}
.area_visual .list li a{display:block;}
.area_visual .list li a,
.area_visual .list li div{overflow:hidden;}
.area_visual .list .web{display:block; overflow:hidden; position:relative;}
.area_visual .list .web img{width: 100%;}
.area_visual .list .mob{display:none;}
.area_visual .bx-controls .bx-next,
.area_visual .bx-controls .bx-prev{opacity:0; display:inline-block; position:absolute; top:50%; z-index:70; width:30px; height:55px; box-sizing:border-box; padding-top:5px; transform:translateY(-50%); font-size:0px; transition:opacity 0.3s ease, background 0.3s ease;}
.area_visual .bx-controls .bx-prev{left:50%; margin-left:-44%;}
.area_visual .bx-controls .bx-next{right:50%; margin-right:-44%; transform:translateY(-50%) scaleX(-1);}
.area_visual .bx-controls .bx-next:before,
.area_visual .bx-controls .bx-next:after,
.area_visual .bx-controls .bx-prev:before,
.area_visual .bx-controls .bx-prev:after{content:''; display:block; width:2px; height:35px; margin:0 6px; background:#fff; transition:background 0.3s ease;}
.area_visual .bx-controls .bx-next:before,
.area_visual .bx-controls .bx-prev:before{transform:rotate(45deg); transform-origin:0 100%;}
.area_visual .bx-controls .bx-next:after,
.area_visual .bx-controls .bx-prev:after{transform:rotate(-45deg); transform-origin:0 0;}
.area_visual .bx-controls .bx-pager{position:absolute; left:50%; bottom:50px; z-index:70; transform:translateX(-50%);}
.area_visual .bx-pager-item{display:inline-block; padding:0 5px;}
.area_visual .bx-pager-link{display:inline-block; width:35px; height:3px; background:rgba(255, 255, 255, .3); font-size:0px; transition:0.3s ease;}
.area_visual .bx-pager-link.active{background:#fff;}
.area_visual .bx-wrapper:hover .bx-next,
.area_visual .bx-wrapper:hover .bx-prev{opacity:1;}

/* 공통 */
#content > div[class^="area_"]{margin-top:120px;}
#content > div[class^="area_"] h2 {font-size: 35px; font-weight: 600; font-family: 'Noto Serif KR', serif; color: #000;}

.main_title {margin-bottom: 30px; text-align: center;}
.main_title em {color: #aaa;}

/* 상품리스트 */
.product_list {display: flex; flex-wrap: wrap; margin: -35px -10px;}
.product_list .list {position:relative; margin: 35px 0; padding: 0 10px; box-sizing: border-box;}
.product_list .img {aspect-ratio: 3/4; overflow: hidden; isolation: isolate;}
.product_list .img span {display: block; width: 100%; height:100%; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; transition: .3s;}
.product_list .list.none .img span {background-color: #f0f0f0; background-image: url(/images/common/none_product.jpg);}
.product_list .list:hover .img span {transform: scale(1.05);}
.product_list dl {min-height: 55px; margin-top: 20px; color: #777;}
.product_list dl > * {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.product_list dl dt { margin-bottom: 5px; font-size: 18px; font-weight: 500; color: #000; }
.product_list .price {display: flex; flex-wrap: wrap; align-items: center; margin-top: 15px; font-size: 17px; font-weight: 600; color: #7ba548;}
.product_list .price span {position:relative; padding: 0 2px; margin-left: 10px; font-size: 14px; font-weight: 400; color: #aaa;}
.product_list .price span::after {position:absolute; left:0; top:50%; content:''; width:100%; height:1px; margin-top: -1px;  background:#bbb;}
.pdList02 .list {width: 50%;}
.pdList03 .list {width: 33.33%;}
.pdList04 .list {width: 25%;}
.pdList05 .list {width: 20%;}

/* area_today */
.area_today {display: flex; }
.area_today .text {margin-top: 100px; flex-basis: calc(50% - 100px); padding-right: 50px; color: #000; box-sizing: border-box;}
.area_today .text em {display: block; font-weight: 900; margin-bottom: 40px;}
.area_today .text h2 {margin-bottom: 15px;}
.area_today .text p {line-height: 1.6;}
.area_today .text .process {display: flex; margin-top: 55px;}
.area_today .text .process li {width: 185px; padding: 40px 25px; font-size: 18px; color: #888; border-radius: 5px; box-sizing: border-box; border: 1px solid #eee; transition: .3s;}
.area_today .text .process li + li {margin-left: 10px;}
.area_today .text .process li i {position: relative; display: block; width: 25px; height:25px; margin-bottom: 20px;}
.area_today .text .process li i img {max-height: 100%;}
.area_today .text .process li i img.on {position:absolute; left:0; opacity: 0; visibility: hidden;}
.area_today .text .process li.on {color: var(--primary2); border-color: #d8c9b7;}
.area_today .text .process li.on img {opacity: 0; visibility: hidden;}
.area_today .text .process li.on img.on {opacity: 1; visibility: visible;}
.area_today .text h3 {margin-top: 120px; font-size: 115px; font-weight: 1000; color:#000; line-height: 1; opacity: .06;}
.area_today .text h3 span {display: block; font-size: 50px; margin-bottom: 10px;}
.area_today .product_list {flex-basis: calc(50% + 100px); grid-template-columns: repeat(3, 1fr);}

/* area_best */
.area_best {padding: 120px 0; background: #f7f7f7;}
.area_best .product_list_wrap {display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 20px;}
.area_best .product_list {display: flex; flex-wrap: wrap; gap: 0; justify-content: space-between; margin: -35px 0;}
.area_best .product_list .list {width: calc((100% - 20px)/2); padding: 0;}
.area_best .product_list .list .img {aspect-ratio: 3/4; height: auto;}
.area_best .product_list:first-child .list:first-child {flex-basis: 100%; margin-bottom: 65px;}
.area_best .product_list:nth-child(2) .list:last-child {flex-basis: 100%; margin-top: 65px;}
.area_best .product_list.mobile {display: none;}

/* area_banner */
.area_banner {margin-top: 0 !important; padding: 70px 0; color: #fff; background: url(/images/main/banner.jpg) no-repeat center / cover;}
.area_banner p {font-size: 20px; margin-bottom: 5px;}
.area_banner h4 {position: relative; font-size: 27px; font-weight: 700;}
.area_banner h4 br {display: none;}
.area_banner span {position:absolute; left:50%; bottom: 3px; display: inline-block; margin-left: 50px; font-size: 16px; font-weight: 500; padding-bottom: 10px;}
.area_banner span::after {position:absolute; left:0; bottom:0; content:''; display: block; width:100%; height:2px; background:#fff;}

 /* area_recommend  */
/*.area_recommend .product_list .img {aspect-ratio: auto; height: 20.3vw;}*/

/* area_event */
.area_event {display: none; /*display: grid;*/ grid-template-columns: repeat(2, 1fr); gap: 0 20px;}
.area_event a {position: relative; display: block; padding-top: 69%; color: #fff; font-size: 18px; font-weight: 500; overflow: hidden; isolation: isolate; overflow: hidden;}
.area_event a .img {position:absolute; display: block; left:0; top: 0; width: 100%; height:100%; background-size: cover; background-repeat: no-repeat; background-position: center; transition: .3s;}
.area_event a > div {position: relative;}
.area_event a h3 {font-size: 42px; font-weight: 800; margin-bottom: 20px;}
.area_event a:hover .img {transform: scale(1.05);}

/* area_event */
.area_inquiry ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 20px;}
.area_inquiry ul a {display: flex; align-items: center; padding: 50px; color: #666; background: #f5f5f5; transition: all .3s;}
.area_inquiry ul a dl * {transition: all .3s;}
.area_inquiry ul a dt {margin-bottom: 5px; font-size: 18px; font-weight: 600; color: #000;}
.area_inquiry ul a i {display: block; width: 70px; height: 70px; margin-right: 25px; transition: all .3s;}
.area_inquiry ul a i img {max-height: 100%;}
.area_inquiry ul a:hover {background-color: var(--primary2);}
.area_inquiry ul a:hover dl * {color: #fff}
.area_inquiry ul a:hover i {filter:invert();}


@media screen and (max-width:1680px){
	.area_visual {height: 650px;}
	.area_visual .bx-wrapper,
	.area_visual .bx-viewport,
	.area_visual .list,
	.area_visual .list li,
	.area_visual .list li a, 
	.area_visual .list li a span {height: 100% !important;}
	.area_visual .list img {width: 100%; height:100%; object-fit: cover; object-position: center;}
	.area_visual .bx-controls .bx-prev {left: 2%; margin-left: 0;}
	.area_visual .bx-controls .bx-next {right: 2%; margin-right: 0;}
}

@media screen and (max-width:1280px){
	.area_today .text .process li {width: 160px; font-size: 16px;}
}


@media screen and (max-width:1250px){
	.area_today {flex-wrap: wrap;}
	.area_today .text {flex-basis:100%; padding-right: 0; margin: 0 0 80px;}
	.area_today .text em {margin-bottom: 20px;}
	.area_today .text h3 {display: none;}
	.area_today .text .process {display: grid; gap: 0 10px; grid-template-columns: repeat(3, 1fr); margin-top: 37px ;}
	.area_today .text .process li {width: auto; padding: 30px 20px; font-size: 16px;}
	.area_today .text .process li + li {margin-left: 0;}
	.area_today .text .process li i {width: 20px; height: 20px; margin-bottom: 10px;}
	.area_today .text .process li:nth-child(2) i {width: 17px;}
	.area_today .text .process li br {display: none;}
	.area_today .product_list {flex-basis: auto;}
}

@media screen and (max-width:1080px){
	.area_banner {padding: 60px 0; background-position:  center right 30%;}
	.area_banner h4 {display: flex;align-items: center;}
	.area_banner span {position:relative; left:auto; bottom:auto; padding-bottom: 5px;}
	.area_inquiry ul a {padding: 40px 30px;}
}

@media screen and (max-width:1024px){
	.area_visual {height: 585px;}
	#content > div[class^="area_"] {margin-top: 100px;}

	.product_list .list {margin: 30px 0;}
	.product_list .price em {flex-basis: 100%; margin-bottom: 3px;}
	.product_list .price span {margin-left: 0;}

	.pdList04 .list, 
	.pdList05 .list {width: 33.33%;}

	.area_best {padding: 100px 0;}
	.area_best .product_list_wrap {grid-template-columns: 1fr; margin: -30px -10px;}
	.area_best .product_list {margin: 0; justify-content: flex-start;}
	.area_best .product_list .list {width: 33.33%; margin: 30px 0 !important; padding: 0 10px; box-sizing: border-box;}
	.area_best .product_list:first-child .list:first-child,
	.area_best .product_list:nth-child(2) .list:last-child {width: 33.33%; flex-basis: auto;}
	.area_banner {padding: 50px 0;}
	.area_banner p {font-size: 16px;}
	.area_banner h4 {font-size: 24px;}
	.area_recommend .product_list .img {height: 39.5vw;}
	.area_event a {padding-top: 70%;}
	.area_event a h3 {font-size: 35px; line-height: 1.4; margin-bottom: 15px;}
	.area_inquiry ul {grid-template-columns: 1fr; gap: 10px 0;}
	.area_inquiry ul a i {width: 55px; height: 55px;}

}

@media screen and (max-width:850px){
	#content > div[class^="area_"] {margin-top: 80px;}
	#content > div[class^="area_"] h2 {font-size: 27px;}

	.product_list .list {width: 50% !important;}
	.product_list .price em {flex-basis: auto; margin-right: 10px;}

	.area_visual {height: 630px;}
	.area_visual .list .web{display:none;}
	.area_visual .list .mob{display:block;}
	.area_visual .list .mob img{width:100%;}
	.area_visual .bx-controls .bx-next,
	.area_visual .bx-controls .bx-prev{opacity:1;}

	.area_best {padding: 80px 0;}
	.area_best .product_list {display: none;}
	.area_best .product_list.mobile {display: flex;}

	.area_recommend .product_list .img {aspect-ratio: 3/4; height: auto;}

	.area_today .text {margin-bottom: 50px;}
	.area_today .text em {font-size: 14px;}
	.area_today .text h2 {margin-bottom: 12px;}
	.area_today .text .process {margin-top: 35px;}

	.area_event {grid-template-columns: 1fr; gap: 15px 0;}
}

@media screen and (max-width:540px){
	#content > div[class^="area_"]{margin-top:65px;}
	#content > div[class^="area_"] h2 {font-size: 24px;}

	.product_list {margin: -20px -5px;}
	.product_list .list {padding: 0 5px; margin: 20px 0;}
	.product_list dl {min-height: 48px;}
	.product_list dl dt {font-size: 16px; margin-bottom: 3px;}
	.product_list dl dd {font-size: 14px;}
	.product_list .price {margin-top: 12px;}
	.product_list .price em{font-size: 15px; flex-basis: 100%;}
	.product_list .price span {font-size: 13px;}
	

	.area_visual {height:500px;}
	.area_visual .bx-controls .bx-next:before,
	.area_visual .bx-controls .bx-next:after,
	.area_visual .bx-controls .bx-prev:before,
	.area_visual .bx-controls .bx-prev:after {height: 25px;}
	.area_visual .bx-controls .bx-pager {bottom: 30px;}
	.area_best {padding: 65px 0;}
	.area_best .product_list_wrap {margin: -30px -5px;}
	.area_best .product_list .list {padding: 0 5px;}
	.area_banner {position:relative;}
	.area_banner::before {position:absolute; left:0; top:0; content:''; width:100%; height:100%; background: rgba(0, 0, 0, .2);}
	.area_banner h4 {display: block;}
	.area_banner h4 br {display: block;}
	.area_banner span {margin: 20px 0 0; font-size: 14px;}

	.area_event a {padding-top: 65%;}
	.area_event a h3 {font-size: 30px;}
	.area_event a .img.web {display: none;}
	.area_event a .img.mob {display: block !important;}
	.area_inquiry ul {gap: 5px 0;}
	.area_inquiry ul a {padding: 30px 20px;}
	.area_inquiry ul a i {width: 45px; height:45px; margin-right: 20px;}
	.area_inquiry ul a dt {font-size: 16px;}
	
}



@media screen and (max-width:450px){

	.area_visual {height: 420px;}
	
	.area_today .text .process {grid-template-columns: 1fr; gap: 5px 0;}
	.area_today .text .process li {display: flex; align-items: center; padding: 20px 10px;}
	.area_today .text .process li i {margin: 0 15px;}

	.area_event a h3 {font-size: 27px; margin-bottom: 10px;}
	.area_event a p {font-size: 14px;}

	
}