/*=================================================
        	jinjo
=================================================*/
.product-img{
	display: none;
}

.product-img.img1{
	display: block;
}

.ratio-box.nav-slider-box:before{
	padding-top: 12.25%;
}

.arrow-img{
	transform: translateX(100%);
	-webkit-transform: translateX(100%);
	-ms-transform: translateX(100%);

	transition: all 0.25s ease-in-out;
	-webkit-transition: all 0.25s ease-in-out;
}

.text-wrap{
	transform: translateX(100%);
	-webkit-transform: translateX(100%);
	-ms-transform: translateX(100%);

	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}

.big-slider-btn-next:hover .arrow-img{
	transform: translateX(0);
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
}

.big-slider-btn-next:hover .text-wrap{
	transform: translateX(0);
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
}

.big-slider-btn-prev:hover .arrow-img{
	transform: translateX(0);
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
}

.big-slider-btn-prev:hover .text-wrap{
	transform: translateX(0);
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
}

#page-product-page{
	padding: 135px 0 100px 0;
}

.nav-outter-wrap{
	cursor: pointer;
}

.big-slider-btn{
	cursor: pointer;
}

section{
	position: relative;
	overflow: hidden;
}

section .detail-box{
	padding: 45px 0 35px;
}

section .container-fluid{
	padding: 0;
	overflow-x: hidden;
}

.category-name{
	position: absolute;
	z-index: 5;

	width: 100%;
	height: auto;

	top: 0;
	left: 0;
}

.ratio-box.cate-img-box:before{
	padding-top: 685px;
}

.cate-img-box >.ratio-content{
	background-size: cover !important;
}

.vertical img{
	width: 100%;
}

.lSSlideOuter .lSPager.lSGallery{
	margin-top: 35px;
}

.slider-nav{
	padding: 0 50px;
}

.img-slider-wrap{
	position: absolute;
	right: 0;
	top: 50%;

	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}

.big-slider-btn{
	position: relative;
	width: 100%;
	height: 100%;

	float:none;
	display: block;
}

.big-slider-btn-prev{
	display: none;
}

.img-slider-wrap .arrow{
	position: absolute;

	right: 0;

	z-index:10;
}

.img-slider-wrap .next-arrow{
	bottom: 10px ;

	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
}

.img-slider-wrap .next-arrow-black{
	bottom: 10px ;

	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
}

.big-slider-btn-next:hover .next-arrow-black{
	opacity: 0;
}

.big-slider-btn-next:hover .next-arrow{
	opacity: 1;
}

.img-slider-wrap .arrow-img-wrap{
	position:  relative;
	tramsform: translateX(100%);
}

.img-slider-wrap .prev-arrow{
	top: 10px;

	opacity: 0;

	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);

	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
}

.img-slider-wrap .prev-arrow-black{
	top: 10px;

	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);

	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
}

.big-slider-btn-prev:hover .prev-arrow-black{
	opacity: 0;
}

.big-slider-btn-prev:hover .prev-arrow{
	opacity: 1;
}

.next-img,
.prev-img{
	display: block;
	width: 235px;
	height: 185px;
	float: none;

	background-size: 90%;
}

.arrow-img:before{
	content:"";
	position: absolute;
	width: 100%;
	height: 100%;

	background: -webkit-linear-gradient(#a3a3a3, #000); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#a3a3a3, #000); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#a3a3a3, #000); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#a3a3a3, #000); /* Standard syntax */

	opacity: 0.8;

	z-index:0;
}

.img-slider-wrap .text-wrap{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	padding: 10px 20px;

	color: #fff;
}

.img-slider-wrap .text-wrap .text{
	margin: 0 0 50px 0;
}

.img-slider-wrap .text-wrap .separator{
	width: 40px;
	height: 1px;

	background-color: #fff;

	margin: 0 0 15px 0;
}

/*****#####===== 미디어 쿼리  =====#####*****/
/***** lg *****/
@media (min-width: 992px) and (max-width: 1199px) {

}

/***** md *****/
@media (min-width: 768px) and (max-width: 991px) {
	#page-product-page{
		padding: 135px 0 0 0;
	}
}

/***** sm *****/
@media (min-width: 576px) and (max-width: 767px) {
	#page-product-page{
		padding: 45px 0 50px 0;
	}

	.slider-nav{
		padding: 15px 50px;
	}
}

/***** xs *****/
@media (max-width: 576px){
	#page-product-page{
		padding: 45px 0 0 0;
	}

	section .detail-box{
		padding: 50px 0;
	}

	.slider-nav{
		padding: 15px 50px;
	}

	.ratio-box.nav-slider-box:before{
		padding-top: 12.25%;
	}
}

/*=================================================
            리스트에서가져온것
=================================================*/
.product-wrap{
	min-height: 835px;
	font-size: 36px;

	letter-spacing: -0.7px;
}

.product-wrap .item-title{
	padding: 30px 0 10px;
	font-size: 36px;
	letter-spacing: -0.7px;
}

.product-wrap.rodster .item-title{
	color: #000000;
}

 .product-wrap .item-content{
	font-size: 18px;
	letter-spacing: -0.4px;
	word-break: keep-all;
}

/*****#####=====  하단 제품 슬라이드 =====#####*****/
.slideitem-wrap{
	opacity: 0.5;
}

.slideitem-wrap:hover,
.slideitem-wrap.slick-current{
	opacity: 1;
}

.ratio-box.ratio_product:before {
    padding-top: 48%;
}

.ratio-box .ratio-content.bg{
    background-size: 80%;
}

.slide-title{
    font-weight: 300;
    font-size: 18px;
    color: #000000;
    text-align: center;
}

/*****##### 슬라이드 버튼 #####*****/
.slider-btn-wrap a{
    position:absolute;
    top: 50%;
    transform:translate(-50%,-50%);
    margin-top: -35px;
    width: 33px;
    height: 79px;
    cursor:pointer;
    z-index: 1;
    display: block;

    transform: inherit !important;
}

.slider-btn-prev{
	left: 0;
    background-image: url('/img/product/gray-arrow-left.png');

	background-repeat: no-repeat;
}

.slider-btn-next{
    right: 0;
    background-image: url('/img/product/gray-arrow-right.png');

	background-repeat: no-repeat;
}

/*****#####===== 미디어 쿼리 =====#####*****/
/***** lg *****/
@media (min-width: 992px) and (max-width: 1200px){

}

/***** md *****/
@media (min-width: 768px) and (max-width: 991px){
	.board-product-lists-wrap .product-wrap .item-wrap {
	    top: 45%;
	}

	.board-product-lists-wrap .product-wrap .item-logo img{
		height: 60px;
	}

	.board-product-lists-wrap .product-wrap .item-title {
	    padding: 25px 0 5px;
	    font-size: 30px;
	}

	.board-product-lists-wrap .product-wrap .item-content {
	    font-size: 15px;
	}

	/* 하단 제품 슬라이드 */
	.product-list .slide-title {
	    font-size: 15px;
	}

}

/***** sm *****/
@media (min-width: 554px) and (max-width: 767px){
	.board-product-lists-wrap .product-wrap .item-wrap {
	    top: 45%;
	}

	.board-product-lists-wrap .product-wrap .item-logo img{
		height: 60px;
	}

	.board-product-lists-wrap .product-wrap .item-title {
	    padding: 25px 0 5px;
	    font-size: 30px;
	}

	.board-product-lists-wrap .product-wrap .item-content {
	    font-size: 15px;
	}

	/* 하단 제품 슬라이드 */
	.product-list .slide-title {
	    font-size: 15px;
	}

	.slider-btn-wrap a {
	    width: 23px;
	    height: 53px;
	    background-size: 90%;
	}

	.slide-title{
	    font-size: 15px;
	}
}

/***** xs *****/
@media (max-width: 553px){
	.board-product-lists-wrap .product-wrap {
	    min-height: 570px;
	}

	.board-product-lists-wrap .product-wrap .item-wrap {
	    top: 50%;
        width: 80%;
	}

	.board-product-lists-wrap .product-wrap .item-title {
	    padding: 10px 0 5px;
	    font-size: 20px;
	}

	.board-product-lists-wrap .product-wrap .item-content {
	    font-size: 12px;
	}

	/* 하단 제품 슬라이드 */
	.product-list .slide-title {
	    font-size: 15px;
	}

	.slider-btn-wrap a {
	    margin-top: -30px;
	    width: 25px;
	    height: 59px;
	    background-size: 100%;
	}

	.slide-title{
		font-size: 11px;
	}

}

/*=================================================
            뷰에서 가져온것
=================================================*/
.cate-img-box{
	background-color: #f1f1f1;
}

.detail-box{
	min-height: 715px;
	/* background-color: #f1f1f1; */
}

/*****#####=====  타이틀 =====#####*****/

.product-name{
    padding: 0 0 10px;
    font-family: "Raleway", sans-serif;
    font-size: 47px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 1.9px;
    color: #000000;
}

/*****#####=====  좌측 상세이미지 =====#####*****/
.img-outter-wrap{
	position: relative;
	background-color: #fff;

	height: 100%;

	min-height: 475px;
}

.nav-outter-wrap{
	margin: 20px 0 0 0;
}

.detail-box .product-info{
    margin: 0 5px;
	background-color: #FFFFFF;
}

.detail-box .product-img{
	position: absolute;
	width: 100%;
	padding-left: 30px;

	left: 0;
	top: 50%;

	transform: translateY(-46%);
	-webkit-transform: translateY(-46%);
	-ms-transform: translateY(-46%);
}

/*=================================================
* 작성자 : atom
* 작성날짜 : 2017-05-18
* 작성내용 : 상하여백, 이미지 크기조정
=================================================*/
.detail-box .product-img .ratio-box.ratio_product:before{
	padding-top: 67%;
}
/*=================================================*/

.detail-box .img-wrap {
	position: relative;
	height: 100%;
	overflow: hidden;
}

.detail-box .product-img .ratio-box .ratio-content.bg {
	background-size: 100%;
}

.detail-box .product-img .list ul{
	padding: 0 30px 0 0;
}

.detail-box .product-img .list ul>li{
	cursor: pointer;
}

.detail-box .product-img .list .ratio-content.bg{
	background-size: 100%;
}

/*****#####=====  우측 제품상세내용 =====#####*****/
.flex-column {
    display: flex;
}

.detail-box .product-info{
    padding: 10px 10px 25px;
	height: 100%;
	border-radius: 3px;
}

.detail-box .product-info .info-detail .size p {
    font-size: 13px;
    font-family: "맑은 고딕",sans-serif;
	line-height: 1.8;
}

.detail-box .product-info .info-title-wrap{
    padding: 0 0 5px;
    border-bottom: 1px solid #CCCCCC;
}

.detail-box .product-info .info-title-wrap .link-btn a{
    font-family: "Raleway", sans-serif;
    font-size: 15px;
    color: #cea052;
    border-bottom: 1px solid;
}

.detail-box .product-info .info-title{
    padding: 15px 0 0;
    font-weight: 300;
    font-size: 24px;
    line-height: 1;
    color: #111111;
}

.detail-box .product-info .info-subtitle{
	font-size: 18px;
}

.detail-box .product-info .info-detail{
	height: 314px;
	overflow-y: scroll;
}

.detail-box .product-info .info-detail .size{
	padding: 15px 0;
}

.detail-box .product-info .info-detail .size ul{
    list-style: none;
    padding: 0;
}

.detail-box .product-info .info-detail .size ul>li{
    font-size: 15px;
}

.product-sub-nav{
	display: none;
}

/*****#####===== 미디어 쿼리  =====#####*****/
/***** lg *****/
@media (min-width: 992px) and (max-width: 1199px) {
	.detail-box .product-img {
	    transform: translateY(-20%);
	    -webkit-transform: translateY(-20%);
	    -ms-transform: translateY(-20%);
	}

	.nav-outter-wrap {
	    margin: 50% 0 0 0;
	}

	.ratio-box.cate-img-box:before {
	    padding-top: 822px;
	}

	.detail-box .product-img .ratio-box.ratio_product:before{
		padding-top: 48%;
	}
}

/***** md *****/
@media (min-width: 768px) and (max-width: 991px) {
	.detail-box .product-img {
	    transform: translateY(-20%);
	    -webkit-transform: translateY(-20%);
	    -ms-transform: translateY(-20%);
	}

	.nav-outter-wrap {
	    margin: 100% 0 0 0;
	}

	.ratio-box.cate-img-box:before {
	    padding-top: 730px;
	}

	.detail-box .product-img .ratio-box.ratio_product:before{
		padding-top: 48%;
	}
}

/***** sm *****/
@media (min-width: 576px) and (max-width: 767px) {
	.category-name{
		position:  relative;
	}

	.ratio-box.cate-img-box:before{
		padding-top: 365px;
	}

	.slider-wrap .ratio-box.cate-img-box:before{
		padding-top: 660px;
	}

	.detail-box .product-info{
		margin: 0;
	}

	.img-outter-wrap{
		min-height: 275px;
	}

	.img-outter-wrap > .row {
		height: 100%;
	}

	.detail-box .product-img {
		padding-left: 10px;
	}

	.detail-box .product-info{
		margin: 15px 0 0 0;
	}

	.detail-box .product-info .info-detail{
		height: 160px;
		overflow-y: scroll;
	}

	.detail-box .product-img .ratio-box.ratio_product:before{
		padding-top: 69%;
	}

	.nav-outter-wrap{
		margin: 20px 0 0 -20px;
	}
}

/***** xs *****/
@media (max-width: 576px){
	.category-name{
		position:  relative;
	}

	.detail-box .product-info{
		position:  relative;
		margin: 0;
	}

	.img-outter-wrap{
		min-height: 165px;
	}

	.category-name .ratio-box .ratio-content.bg{
		background-size: 100% !important;
	}

	.ratio-box.cate-img-box:before{
		padding-top: 365px;
	}

	.slider-wrap .ratio-box.cate-img-box:before{
		padding-top: 660px;
	}

	.product-name{
		font-size: 24px;
	}

	.detail-box .product-img {
		padding-left: 10px;
	}

	.img-outter-wrap > .row {
		height: 100%;
	}

	.detail-box .product-info .info-detail .size ul>li{
		font-size: 10px;
	}

	.detail-box .product-info .info-title{
		padding: 5px 0 0 0;
		font-size: 15px;
	}

	.detail-box .product-info .info-subtitle{
		font-size: 16px;
	}

	.detail-box .product-info .info-title-wrap .link-btn a{
		font-size: 12px;
	}

	.detail-box .product-info .info-title-wrap{
	    width: 55%;
	}

	.detail-box .info-detail{
		width: 55%;
	}

	.detail-box .size-img{
		position: absolute;
		right: 0;
		top: 45px;
	}

	.detail-box .size-img img{
		height: 150px;
	}

	.detail-box{
		min-height: 500px;
	}

	.detail-box .product-info{
		margin: 15px 0 0 0;
	}

	.detail-box .product-info .info-detail{
		height: 160px;
		overflow-y: scroll;
	}

	.dropdown-menu{
		position: fixed;
		top: 42px;
		border-radius: 0;

		z-index:12;
	}

	.product-sub-nav{
		display: block;
	}

	.detail-box .product-img .ratio-box.ratio_product:before{
		padding-top: 72%;
	}

	.nav-outter-wrap{
		margin: 20px 0 0 -20px;
	}
}