/* BASIC css start */
/* 메인 비쥬얼 배너 */
#mainSpot { position:relative; width:100%; min-width:1100px; height:500px; overflow:hidden }
#mainSpot .inner { margin-left:-1000px; position:absolute; top:0; left:50%; right:0; width:2000px; height:500px;}
#mainSpot .bx-pager { position:absolute; bottom:15px; left:0; right:0; height:11px; text-align:center }
#mainSpot .bx-pager .bx-pager-item { display:inline-block;  margin:0 7px }
*:first-child+html #mainSpot .bx-pager .bx-pager-item { display:inline } /* IE7 Hack */
#mainSpot .bx-pager .bx-pager-item a { display:block; width:11px; height:11px; text-indent:-9999em; background:url(//image.makeshop.co.kr/makeshop/d3/basic_simple/main/sp_spot_pager.png) 0 0 no-repeat }
#mainSpot .bx-pager .bx-pager-item a.active { background-position:0 -11px }

/* 이미지 배너 */
.imgBanner { margin:30px auto 0; position:relative; width:1100px; overflow:hidden }
.imgBanner ul { *zoom:1 }
.imgBanner ul:after { display:block; clear:both; content:'' }
.imgBanner ul li { padding-right:10px; float:left }

/* 상품 목록 영역 */
.product-wrap { margin:0 auto; position:relative; width:1100px }

/* 고정 이미지 배너 */
.fixedBnnr { position:relative; width:100%; min-width:1100px; height:220px; background:url(//image.makeshop.co.kr/makeshop/d3/basic_simple/main/fixbn.jpg) center top no-repeat fixed }
.fixedBnnr .inner { margin:0 auto; position:relative; width:1100px; text-align:center }
.fixedBnnr .inner .tx { padding-top:100px; font-size:16px; color:#fff; letter-spacing:16px }

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	/*font-family: "Noto Sans KR", sans-serif;*/
	color: black; }

	.irion-location {
		background-image: url(/design/wooriwa/images/irion_location.png);
		height: 240px;
		background-position: center;
		margin-top:30px;margin-bottom:100px;
	}

	/*반려동물 상식*/
	.animal-life {background:#f4f4f4; padding-bottom:127px !important;}
	.animal-life h2 {padding-top:80px;}
	.animal-life .item img {filter : gray(1) !important;}
	.animal-life .item-3 {margin-bottom:0}
	.doctors-life .content .carousel .item > div .description {text-align:left;}

	.slick-active::after {
		content: none !important;
	}

	section {padding:120px 0 !important;}
	section .content {margin-top:40px !important;}
	section .section-title {font-family:GothamPro,"Noto Sans KR", sans-serif !important; color:#333333 !important;}

	/* 인스타그램 */
	.irion-insta .controls .prev-button {left:-5% !important;}
	.irion-insta .controls .next-button {right:-2.5% !important;}
	.insta-btn {margin-top:40px;}
	.insta-btn a {font-size:16px; border-radius: 50px;}

	/* 닥터스 라이프 */
	.doctors-life .content .carousel .item > div .image::after {background:none !important;}
	.doctors-life .slick-dots li button {width:13px !important; height:13px !important;}
	.main-banner .slick-dots li.active button {width:30px !important; height:13px !important;}
	.doctors-life .content .carousel .item > div .description .number {color:#dc5f0d !important;}
	.doctors-life .content .carousel .item > div .description {color:#343434 !important}


	/*엠디스픽*/
	.mds-pick {padding:60px 0 !important; width:1200px; margin:0 auto; padding-bottom:0px !important}
	
	/*트렌드키워드*/
	.trend-keyword {background:#f4f4f4 !important;}
	
	/*애니멀라이프*/
	.animal-life {padding:0 0 108px !important;}
	.animal-life h2 {padding-top:90px !important;}
	.animal-life .item h3 {text-shadow: 0px 2px 6px #000000;}

	/*인스타그램*/
	.instagram {padding:111px 0 150px !important;}
	#eapps-instagram-feed-1 .eapps-instagram-feed-posts-slider-nav {background:rgba(255, 255, 255, 0.9) !important;}
	#eapps-instagram-feed-1 .eapps-instagram-feed-posts-slider-nav-icon {fill:rgb(0, 0, 0) !important;}

	/*기본 탭 추가*/
	label.panel-label {
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		display: block;
		width: 100%;
		color: #bdc3c7;
		cursor: pointer;
		background-color: #fff;
		-webkit-transition-property: background-color, color;
		transition-property: background-color, color;
		-webkit-transition-duration: 200ms;
		transition-duration: 200ms;
	}
	label.panel-label:hover { color: #343434;}
	#panels { margin:50px 0 60px; background-color: white;}
	#panels .container { margin: 0 auto; width: 1200px;}
	#panels section main { box-sizing: border-box; display:none;}
	#panel-1-ctrl:checked ~ #panels #panel-1 main { display:block;}
	#panel-2-ctrl:checked ~ #panels #panel-2 main { display:block;}
	#panel-3-ctrl:checked ~ #panels #panel-3 main { display:block;}
	#panel-4-ctrl:checked ~ #panels #panel-4 main { display:block;}

	#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {color: #343434;}
	#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label::after { height: 3px;}
	#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label { color: #343434;}
	#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label::after { height: 3px;}
	#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label { color: #343434;}
	#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label::after { height: 3px;}
	#panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 label.panel-label { color: #343434;}
	#panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 label.panel-label::after {height: 3px;}

	ul#tabs-list {
		display: flex;
		justify-content: center;
		list-style: none;
		text-align: center;
		margin-top: 30px;
		padding: 0;
		text-align: center;
	}
	ul#tabs-list li {
		display: flex;
		text-align: center;
		font-size: 18px;
		font-weight:600;
		width: 5%;
		margin:0 25px;

		position: relative;
	}
	ul#tabs-list li:hover {
		-webkit-transition: none;
		transition: none;
		border-right: none;
	}
	ul#tabs-list li:hover.last {
		/*border-right: 1px solid transparent;*/
	}
	ul#tabs-list li:hover + li {
		/*border-left: 1px solid #dfdfdf;*/
	}
	ul#tabs-list li label.panel-label {
		position: relative;
		padding: 8px 0;
		font-size: 20px;
	}
	ul#tabs-list li label.panel-label::after {
		content: "";
		position: absolute;
		width: 100%;
		left: 0;
		top: 100%;
		background-color: #343434;
		height: 0;
		-webkit-transition-property: height;
		transition-property: height;
		-webkit-transition-duration: 100ms;
		transition-duration: 100ms;
	}
	ul#tabs-list li label.panel-label:hover {
		/*padding-top: 20px;*/
	}
	ul#tabs-list li label.panel-label:hover::after {
		height: 3px;
	}

	.panel-radios {
		display: none;
	}

	#panel-1, #panel-2, #panel-3, #panel-4  {padding:0 !important; margin:0 !important;}

	/*상품 4열 진열 */
	/* .item-wrap */
	.product-wrap {width:1200px;}
	.item-wrap4 { overflow: hidden; width:1200px }
	.item-wrap4 .item-hd { margin: 40px 0 20px 0 }
	.item-wrap4 .nbg { background: none; text-align: center; }
	.item-wrap4 .item-info { zoom: 1; overflow: hidden; padding: 35px 0 10px; margin-bottom:10px }
	.item-wrap4 .item-info:after { display:block; clear:both; content:'' }
	.item-wrap4 .item-info .item-total { float: left; font-size:14px; color:#7b7b7b }
	.item-wrap4 .item-info .item-total span { color: #0e0d0d }
	.item-wrap4 .item-info .item-order { float: right }
	.item-wrap4 .item-info .item-order li { float: left; padding: 0 15px; line-height:12px; border-right:1px solid #ddd }
	.item-wrap4 .item-info .item-order li.nobg { padding-right:0; border-right:none }
	.item-wrap4 .item-info .item-order li a { font-size: 12px; color:#a6a6a6; line-height:12px; vertical-align:top }
	.item-wrap4 .item-info .item-order li a .on { color: #111 }

	.item-wrap4 .item-cont { width:1200px; *zoom:1 }
	.item-wrap4 .item-cont:after { content: ""; display: block; clear: both }
	.item-wrap4 .item-cont .nomg { padding-right: 0px }
	.item-wrap4 .item-page { margin-top: 50px; text-align: center; }
	.item-wrap4 .item-page a { padding: 0 5px }
	.item-wrap4 .item-page a:hover, .item-wrap .item-page a.now { color: #111; font-weight: bold; letter-spacing: -1px; }

	.item-wrap4 .item-cont .item-list { padding-right:20px; float:left; width:285px; text-align:center }
	.item-wrap4 .item-cont dl:last-child {padding-right:0 !important;}
	.item-wrap4 .item-cont .item-list .thumb { width:285px; height:285px; overflow:hidden }
	.item-wrap4 .item-cont .item-list .thumb img { width:285px;  height:285px }
	.item-wrap4 .item-cont .item-list .prd-info { padding:18px 0 40px; overflow:hidden; text-align:left; }
	.item-wrap4 .item-cont .item-list .prd-ico img { margin:2px }
	.item-wrap4 .item-cont .item-list .prd-name { padding-top:5px; }
	.item-wrap4 .item-cont .item-list .prd-name a { display:block; font-size:16px; color:#343434; line-height:21px; text-overflow:ellipsis; word-wrap:normal }
	.item-wrap4 .item-cont .item-list .prd-price { padding-top:5px; font-weight:normal; }
	.item-wrap4 .item-cont .item-list .prd-price strike { color:#6f6f6f; }
	.item-wrap4 .item-cont .item-list .prd-price .price { color:#dc5f0d; font-weight:600; font-size:18px;}
	.item-wrap4 .item-cont .item-list .prd-color { padding-top:5px }
	.item-wrap4 .item-cont .item-list .prd-preview { padding-top:5px }
	.item-wrap4 .item-cont .item-list .prd-preview img {width:20px;}
	.item-wrap4 .item-cont .item-list .prd-preview .btn-preview { display:inline-block; width:69px; height:17px; text-indent:-9999em; background:url(//image.makeshop.co.kr/makeshop/d3/basic_simple/common/btn_preview.gif) 0 0 no-repeat }
	.item-wrap4 .item-cont .item-list .prd-subname { margin-top:15px; padding-top:15px; color:#8b8b8b; text-align:left; border-top:1px dashed #c6c6c6 }
	.item-wrap4 .item-cont .item-list .MK-product-icons img { vertical-align: middle }

	.more {text-align:center;}
	.more a{padding:10px 40px;}

	/*메인 슬라이드 배너*/
	section.slide-banner{
		padding:0 !important;
	}
	#f2s-rolling-container1 .swiper-pagination-bullet {
		border-radius:50% !important;
		margin:0 4px !important;
	}

	/*띠배너*/
	.line-banner {background:#fdebdf; text-align:center;}
	.line-banner img {width:1100px;}

	/*추가 작업 */
	.sub-txt {text-align:center; color:#666; font-weight:400; padding-top:10px; font-size:18px;}

	/*펫플레이스*/
	.petplace{}
	.petplace .container {height:447px !important;}
	.petplace ul li { float:left;}
	.petplace ul li.place-left { width:684px; padding-right:30px;}
	.petplace ul li.place-right { width:480px; text-align:left; }
	.petplace ul li.place-right .sub-title { font-size:20px; color:#666; font-weight:normal;}
	.petplace ul li.place-right .con-txt {font-size:16px; color:#aaa; padding-top:12px;}
	.petplace h2 { font-size:42px; color:#333; font-weight:600;}

	.petplace .owl-item { color: white; text-align: center; padding-top: 45px;}
	.petplace .owl-prev { float: left; font-size: 20px; text-transform: uppercase; padding: 20px;}
	.petplace .owl-next { float: right; font-size: 20px; text-transform: uppercase; padding: 20px;}
	.petplace .owl-nav button span { visibility:visible !important;}

	.btns {z-index:1; position: relative; bottom:152px; left: 684px; width:480px; display: table;}
	.btns img{width:46px !important;}

	.customNextBtn, .customPreviousBtn{float:left; cursor: pointer;}
	.customPreviousBtn { margin-right:65px; }
	.customPreviousBtn img{
		-webkit-transform: scaleX(-1);
		-moz-transform: scaleX(-1);
		-o-transform: scaleX(-1);
		transform: scaleX(-1);

		filter: FlipH;
		-ms-filter: "FlipH";}

		.petplace .owl-dots {
			color:#aaa;
			font-family: GothamPro, sans-serif;
			counter-reset: slides-num;
			/* Initialize counter. */
			position: absolute;
			font-size: 20px;
			bottom: 120px;
			left: 742px;
			font-weight: noraml;
			color:#aaa;
			margin-top: 15px;
			vertical-align: middle;
		}
		.petplace .owl-dots:before { content:"/"; position: absolute; left: 15px;}
		.petplace .owl-dots:after {
			content: counter(slides-num);
			/* get total number of items - more info on http://www.sitepoint.com/a-little-known-way-to-replace-some-scripts-with-css-counters/ */
			display: inline-block;
			position: absolute;
			left: 30px;
		}


		.petplace .owl-dot {
			display: inline-block;
			counter-increment: slides-num;
			/* Increment counter */
			margin-right: 6px;

		}
		.petplace .owl-dot span {
			display: none;
		}

		.petplace .owl-dot.active:after {
			font-family: GothamPro, sans-serif;
			content: counter(slides-num);
			/* Use the same counter to get current item. */
			display: inline-block;
			position: absolute;
			color:#dc5f0d;
			left: 0;
			top: 0;
		}

/* 파트너쉽 로고 영역 추가 */

section.partner-logo {padding:30px 0 !important; text-align:center}
.logo-img {padding-bottom:20px;}
.logo-img li {display:inline-block; width:237px;}
.logo-img li img {width:100%; text-align:center;}

/*메인슬라이드 추가 2022 */
.hm-slide {
    padding:0 !important;
    margin-top:150px;
}
.hm-slide .slider-wraper .sl-item{
	position: relative;
    width:1920px
	height: 700px;
	z-index: 10;
}
.hm-slide .slider-wraper .sl-item img{
	top: 0;
	left: 0;
	background-color: #333;
	height: 100%;
}

/*Slider Nav*/

.hm-slide .owl-nav .disabled{
	opacity: 0.3;
}

.hm-slide .owl-nav .owl-prev{
	position: absolute;
	top: calc(50% - 65px);
	left:2%;
	width: auto;
	padding: 0;
	color: rgba(255, 255, 255, 0);

	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
}
.hm-slide .owl-nav .owl-next{
	position: absolute;
	top: calc(50% - 65px);
	right:2%;
	width: auto;
	padding: 0;
	color: rgba(255, 255, 255, 0);

	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
}

.hm-slide .owl-nav .owl-prev::before{
	text-decoration: none;
	speak: none;
	content: "〈";
	font-size: 50px;
	color: rgba(255, 255, 255, 0.5);

	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
}
.hm-slide .owl-nav .owl-next::before{
	text-decoration: none;
	speak: none;
	content: "〉";
	font-size: 50px;
	color: rgba(255, 255, 255, 0.5);

	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
}

.hm-slide .owl-nav .owl-prev:hover::before,
.hm-slide .owl-nav .owl-next:hover::before{
	color: rgba(220, 95, 14, 1);
}
/*dots*/
.hm-slide .owl-dots{
	position: absolute;
	width: 100%;
	padding-bottom: 15px;
	bottom: 0;
	text-align: center;
	pointer-events: none;
}
.hm-slide .owl-dots .owl-dot{
	display: inline-block;
	pointer-events: auto;
	background-color: rgba(255, 255, 255, 1);
	width: 11px;
	height: 11px;
	margin-left: 8px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
.hm-slide .owl-dots .owl-dot::before{
	content: "";
	display: block;
	width: 11px;
	height: 11px;
	background-color: transparent;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
.hm-slide .owl-dots .owl-dot.active::before{
	background-color: rgba(220, 95, 14, 1);
}
/* BASIC css end */

