#sub section{padding:200px 0;width:100%;overflow:hidden;}

#product ul{overflow:hidden;margin:250px 0;width:100%}
#product ul li{float:left;width:30%;text-align:center;}
#product ul li .ft03{font-weight:500}
#product ul li:nth-child(2){margin:0 5%;}
#product ul img{margin:0 0 50px 0}
#product ul li a{position:relative;display:block;}
#product .view{opacity:0;position: absolute;left: 50%;top:50%;transform: translate(-50%,-50%);padding:30px;display:inline-block;background:url('/img/main/arrow_on.png')no-repeat center center #000;}
#product .filter{position: absolute;opacity:0;background:#403717;width:100%;height:100%}
#product ul li a:hover .view{opacity:1;transition:All .5s ease}
#product ul li a:hover .filter{opacity:0.4;transition:All .5s ease}

#sub .thum {position:Relative;margin:Auto;/*max-width:1920px;*/}
#sub .thum .tab-content{display:none;}
#sub .thum .tab-content.current{display:block;}

#sub .thum .tit{position:Absolute;top:35%;left:15%;}
#sub .thum .tit h1{font-weight:400}
#sub .thum .tit .tag{background:#d8d8d8;color:#848484;padding:5px 10px;display:inline-block;margin:30px 0}
#sub .thum .tit .cost{font-size:16px;margin:30px 0}
#sub .thum .tit .view{font-size:16px;background:#000;color:#FFF;display:inline-block;padding:5px 50px;}

#sub .thum .tab{position:absolute;right:10%;bottom:20%;}
#sub .thum .tab li{cursor:pointer;float:left;}
#sub .thum .tab li:nth-child(2){margin:0 20px}
#sub .thum .tab li.current{border:1px solid #fff;transition:All .3s ease;}
#sub .thum .tab li.white p{color:#FFF}

#sub .content{overflow:hidden;max-width:1920px;margin:auto}
#sub .content .serif{font-weight:500}
#sub .content .box01{width:50%;}
#sub .content .box02{width:35%;margin:0 0 0 7%}
#sub .content .box02 ul{padding:50px 0 0 0}

#sub .content02 p{margin:300px 0 0 0}

#sub .icon ul li{float:left;width:20%;text-align:Center}

#sub .banner{background-size:cover;background-attachment:fixed;background-repeat:no-repeat;background-position:Center center;height:540px;}
#sub .banner01 {background-image:url('/img/sub/pd01/pd01_banner.jpg');}
#sub .banner03 {background-image:url('/img/sub/pd03/pd03_banner.jpg');}

#sub .element .ft03 {padding:0 0 30px 0;margin:0 0 50px 0;border-bottom:2px solid #050001}
#sub .element .ft01{color:#898989;}
#sub .element ul{margin:0 0 50px 0}
#sub .element ul:last-child{margin:0}

#sub .step{background:#f0eade}
#sub .step_slide {margin:50px 0 0 0;padding:0 0 50px 0}
#sub .step_slide p{text-align:Center;margin:0 0 30px 0}
#sub .step_slide .swiper-pagination-bullet-active {background:#898989;}

#sub .bg01{max-width:1920px;margin:auto;position:relative;background:url('/img/sub/pd01/pd01_bg.jpg') no-repeat center center;height:540px;}
#sub .bg01 .txt{position:absolute;left:10%;top:50%;transform:translateY(-50%);color:#FFF}

#sub .serum{padding:100px 0 0 0}

#sub .top {position:relative;margin:Auto;/*max-width:1920px;*/}
#sub .top .tit{position:Absolute;top:35%;left:15%;}
#sub .top .tit h1{font-size:60px;font-weight:400;margin-bottom:150px}

#sub .why {position:relative;background-image:url('/img/sub/why/banner.jpg');background-size:cover;background-attachment:fixed;background-repeat:no-repeat;background-position:Center center;height:1080px;}
#sub .why img{margin:auto;display:Block;}
#sub .why .ft02 {font-weight:200}
#sub .why .ft02 b{font-weight:500}
#sub .why .bar{background:#FFF;width:1px;height:30px;margin:50px auto;}
#sub .why .bg{position:Absolute;bottom:0;background:rgba(24,42,50,0.9);width:100%;color:#FFF}
#sub .why .bg .txt{position:Absolute;width:80%;left:50%;top:50%;transform:translate(-50%,-50%);}

#sub .why02 h1{font-size:60px;font-weight:400}
#sub .why02 .box01{background:url('/img/sub/why/why_bg.png') no-repeat 75% 10%;margin:100px 0 200px 0}
#sub .why02 .box01 ul{overflow:hidden}
#sub .why02 .box01 ul li{width:45%;} 
#sub .why02 .box01 ul li:nth-child(1) img{float:left}
#sub .why02 .box01 ul li:nth-child(2){margin:250px 0 0 0}
#sub .why02 .box01 ul li:nth-child(2) img{float:right}

#sub .why02 .box02 ul{overflow:hidden}
#sub .why02 .box02 ul li{width:50%;} 
#sub .why02 .box02 .ft02{margin:0 0 50px 0}

#sub .why_scroll {margin:auto;background:url('/img/sub/why/scroll.jpg') no-repeat center center;height:590px;}

#sub .brand {background:#f0eade}
#sub .brand .container{background:url('/img/sub/brand/product01.png') no-repeat bottom right}
#sub .brand h1{font-size:60px;font-weight:400;padding:0 0 50px 0;margin:0 0 50px 0;border-bottom:2px solid #b8996f}
#sub .brand p{color:#b8996f}

#sub .brand02{max-width:1920px;overflow:hidden;margin:auto}
#sub .brand02 .box{float:left;width:50%;}
#sub .brand_slide .swiper-pagination-bullet-active{width:25px !important;border-radius:50px;}
#sub .brand_slide .swiper-pagination-bullet{background:#707070;height:10px;width:10px;}



@media (max-width: 1400px){
	#product ul{margin:100px 0}
	#sub section{padding:100px 0}
	
	#sub .thum .tit{left:10%;top:15%;}	
	#sub .thum .tab{bottom:10%;}

	#sub .content{width:90%;}
	#sub .content .box{width:100%;float:none}
	#sub .content .box02{margin:80px 0;}
	#sub .content .box02 ul{padding:0}
	#sub .content .box02 ul:nth-child(2){padding:50px 0}

	#sub .content02 p{margin:0}

	#sub .bg01{background-position:70% center}

	#sub .top .tit{width:90%;top:15%;left:50%;transform:translateX(-50%);text-align:Center;}
	#sub .why02 .box01{margin:100px 0}
	#sub .why02 .box02 ul li{width:100%;text-align:center}
	#sub .why02 .box02 ul li img{margin:50px auto 0}
}

@media (max-width:1365px) and (min-width:1023px){

}

@media (max-width:1023px){
		#sub .thum .tit .ft01{display:none}

		#sub .top .tit h1{margin:0 0 50px 0}
		#sub .why {height:900px;}

}
@media (max-width:1023px) and (min-width:768px){

	

} 
@media (max-width: 767px){
	#product ul{margin:80px 0}
	#sub section{padding:80px 0}
	
	#sub .thum .tit{left:50%;transform:translateX(-50%);text-align:Center;width:80%;}
	#sub .thum .tit .cost{margin:15px 0}
	#sub .thum .tab{position:unset;width:80%;overflow:hidden;margin:20px auto 0}
	#sub .thum .tab li{width:30%;text-align:center}
	#sub .thum .tab li:nth-child(2){margin:0 5%}

	
	#product ul li{width:100%;}
	#product ul li:nth-child(2){margin:10% 0;}
	#product ul img{margin:0 auto 20px}
	
	#sub .content .box02{margin:30px 0}

	#sub .bg01 {height:350px}
	#sub .bg01 .txt{width:90%;left:50%;transform:translate(-50%,-50%);text-align:Center;}

	#sub .icon ul li{width:33.333%;margin:0 0 5% 0}
	#sub .icon ul li img{width:30%;}

	#sub .banner{height:350px;background-attachment:unset;}
	
	#sub .element .ft03{padding:0 0 20px 0;margin:0 0 20px 0}
	#sub .element ul{border-bottom:1px solid #e5e5e5;padding:0 0 20px 0;margin:0 0 20px 0}
	
	#sub .serum{padding:30px 0 0 0}
	#sub .serum img{width:70%}


	#sub .step_slide{margin:20px 0 0 0}
	
	
	#sub .top .tit h1{font-size:30px;}	
	
	#sub .why{background-attachment:unset;height:600px;}
	#sub .why .bg{position:initial;height:100%;}

	#sub .why02 h1{font-size:30px;}
	#sub .why02 .box01{margin:50px 0}
	#sub .why02 .box01 ul li{width:100%;}
	#sub .why02 .box01 ul li:nth-child(2){margin:50px 0 0 0}
	#sub .why02 .box02 ul li img {width:70%;}
	
	#sub .brand h1{font-size:30px}
	#sub .brand .container{background:none;}
	#sub .brand .product {width:80%;}

	#sub .brand02 .box{width:100%;}
}