
/*_pc*/
@media all and (min-width:1025px) {	 

		/*타이틀*/
	  .mH2{font-size:60px;text-align:center;font-weight:600;margin:50px 0; color:#989898}
	  .mH2:before{content:'';display:block;width:1px;height:50px;background:#989898;transform:rotate(45deg);margin:10px auto}
	  
	  .mMore{display:block;position:relative;width:200px;line-height:50px;border:1px solid #111;margin:50px auto;text-align:center}
	  .mMore:before{content:'';position:absolute;left:0;height:100%;width:0;background:#111;transition: 0.3s}
	  .mMore:hover:before{width:100%}
	  .mMore:hover{color:#fff}
	  .mMore:hover span{background-image:url('../images/arrow-more-w.png')}
	  .mMore span{position:relative;padding-right:50px;background: url('../images/arrow-more.png') no-repeat right center}


        :root{
            --wide_banner_con_width:500px
        }
        .wide_banner{position:relative;background:#9d7d4c}    
        .wide_banner .swiper-slide{display:flex;height:900px}
        .wide_banner .swiper-slide .banner{flex:1;opacity:0;transform:translateX(-50px);transition:0.5s}
        .wide_banner .swiper-slide .banner img{width:100%;height:100%;object-fit:cover}
        .wide_banner .swiper-slide .con{width:var(--wide_banner_con_width);color:#fff;padding:200px 70px 0;opacity:0;transform:translateX(30px);font-size:14px;transition:0.5s}
        .wide_banner .swiper-slide .con .name{font-size:40px}
        .wide_banner .swiper-slide .con .desc{font-size:16px;margin:20px 0 40px;color:#fff}
        .wide_banner .swiper-slide .con .info li{display:flex;gap:20px;margin:5px 0}
        .wide_banner .swiper-slide .con .info b{width:80px}    

        .wide_banner .swiper-slide-active .banner{opacity:1;transform:translateX(0)}
        .wide_banner .swiper-slide-active .con{opacity:1;transform:translateX(0)}

        .wide_banner .swiper-button-prev,
        .wide_banner .swiper-button-next{color:#fff}
        .wide_banner .swiper-button-prev{left:20px}
        .wide_banner .swiper-button-next{right:calc(20px + var(--wide_banner_con_width))}

        .wide_banner .swiper-pagination{position:absolute;left:calc(100% - var(--wide_banner_con_width) + 60px + 20px);top:100px;bottom:auto;width:auto}
        .wide_banner .swiper-pagination-bullet{position:relative;background:#fff;width:4px;height:4px;margin-right:20px !important}    
        .wide_banner .swiper-pagination-bullet:after{content:'';position:absolute;width:36px;height:36px;border:1px solid rgba(255,255,255,0.3);left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;opacity:0;transition:0.5s}
        .wide_banner .swiper-pagination-bullet-active:after{width:26px;height:26px;opacity:1;}

        .wide_banner .more{position:absolute;bottom:50px;}
        .wide_banner .more a{display:inline-block;position:relative;border:1px solid rgba(255,255,255,0.5);line-height:50px;padding:0 50px;color:#fff}
        .wide_banner .more a:hover{color:#000}
        .wide_banner .more a:hover:after{width:100%}
        .wide_banner .more a:after{content:'';position:absolute;z-index:-1;left:0;top:0;bottom:0;width:0%;background:#fff;transition:0.3s}
		
		
		
        :root{
            --wide_banner2_con_width:500px
        }
        .wide_banner2{position:relative;background:#989898}    
        .wide_banner2 .swiper-slide{display:flex;height:900px}
        .wide_banner2 .swiper-slide .banner{flex:1;opacity:0;transform:translateX(-50px);transition:0.5s}
        .wide_banner2 .swiper-slide .banner img{width:100%;height:100%;object-fit:cover}
        .wide_banner2 .swiper-slide .con{width:var(--wide_banner2_con_width);
		color:#fff;padding:200px 70px 0;opacity:0;transform:translateX(30px);font-size:14px;transition:0.5s}
        .wide_banner2 .swiper-slide .con .name{font-size:30px}
        .wide_banner2 .swiper-slide .con .desc{font-size:16px;margin:20px 0 40px;color:#fff}
        .wide_banner2 .swiper-slide .con .info li{display:flex;gap:20px;margin:5px 0}
        .wide_banner2 .swiper-slide .con .info b{width:80px}    

        .wide_banner2 .swiper-slide-active .banner{opacity:1;transform:translateX(0)}
        .wide_banner2 .swiper-slide-active .con{opacity:1;transform:translateX(0)}

        .wide_banner2 .swiper-button-prev,
        .wide_banner2 .swiper-button-next{color:#fff}
        .wide_banner2 .swiper-button-prev{left:20px}
        .wide_banner2 .swiper-button-next{right:calc(20px + var(--wide_banner2_con_width))}

        .wide_banner2 .swiper-pagination{position:absolute;left:calc(100% - var(--wide_banner2_con_width) + 60px);top:100px;bottom:auto;width:auto}
        .wide_banner2 .swiper-pagination-bullet{all:unset;color:#fff;font-size:20px;margin:0 20px !important;opacity:0.6;cursor:pointer}
        .wide_banner2 .swiper-pagination-bullet-active{border-bottom:1px solid #fff;opacity:1}

        .wide_banner2 .more{position:absolute;z-index:10;bottom:50px;}
        .wide_banner2 .more a{display:inline-block;position:relative;border:1px solid rgba(255,255,255,0.5);line-height:50px;padding:0 50px;color:#fff}
        .wide_banner2 .more a:hover{color:#000}
        .wide_banner2 .more a:hover:after{width:100%}
        .wide_banner2 .more a:after{content:'';position:absolute;z-index:-1;left:0;top:0;bottom:0;width:0%;background:#fff;transition:0.3s}
	
	
	
	 :root{
            --wide_banner3_con_width:500px
        }
        .wide_banner3{position:relative;background:#eeeeee}    
        .wide_banner3 .swiper-slide{display:flex;height:900px}
        .wide_banner3 .swiper-slide .banner{flex:1;opacity:0;transform:translateX(-50px);transition:0.5s}
        .wide_banner3 .swiper-slide .banner img{width:100%;height:100%;object-fit:cover}
        .wide_banner3 .swiper-slide .con{width:var(--wide_banner3_con_width);color:#fff;padding:280px 70px 0;opacity:0;
		transform:translateX(30px);font-size:14px;transition:0.5s}
        .wide_banner3 .swiper-slide .con .name{font-size:35px}
        .wide_banner3 .swiper-slide .con .desc{font-size:16px;margin:20px 0 40px;color:#fff}
        .wide_banner3 .swiper-slide .con .info li{display:flex;gap:20px;margin:5px 0}
        .wide_banner3 .swiper-slide .con .info b{width:80px}    

        .wide_banner3 .swiper-slide-active .banner{opacity:1;transform:translateX(0)}
        .wide_banner3 .swiper-slide-active .con{opacity:1;transform:translateX(0)}

        .wide_banner3 .swiper-button-prev,
        .wide_banner3 .swiper-button-next{color:#fff}
        .wide_banner3 .swiper-button-prev{left:20px}
        .wide_banner3 .swiper-button-next{right:calc(20px + var(--wide_banner3_con_width))}

        .wide_banner3 .swiper-pagination{position:absolute;left:calc(100% - var(--wide_banner3_con_width));top:80px;
		bottom:auto;width:var(--wide_banner3_con_width);text-align:left}
        .wide_banner3 .swiper-pagination-bullet{all:unset;display:block;color:#e1e1e1;margin:5px 0 !important;padding:10px 60px;
		font-size:16px;background:#6f5f47;cursor:pointer;translateX(0);transition:0.5s}
        .wide_banner3 .swiper-pagination-bullet-active{transform:translateX(-180px); font-size:16px; color:#FFF}

        .wide_banner3 .more{position:absolute;z-index:10;bottom:300px;}
        .wide_banner3 .more a{display:inline-block;position:relative;border:1px solid rgba(255,255,255,0.5);line-height:50px;padding:0 50px;color:#fff}
        .wide_banner3 .more a:hover{color:#000}
        .wide_banner3 .more a:hover:after{width:100%}
        .wide_banner3 .more a:after{content:'';position:absolute;z-index:-1;left:0;top:0;bottom:0;width:0%;background:#fff;transition:0.3s}		
		

	
	
	
		
		
		




		.mBanner1{position:relative;padding:50px 0}
		.mBanner1:before{content:'';position:absolute;z-index:-1;width:100%;top:0;height:400px;background:#eee}
		.mBanner1 .container{display:flex}
		.mBanner1 .tit_con{position:relative;width:35%}
		.mBanner1 .tit_con .text{position:absolute;opacity:0;top:100px;}
		.mBanner1 .tit_con .text .t1{display:block;font-size:24px;color:#333}
		.mBanner1 .tit_con .text .t2{display:block;font-size:44px;color:#777}
		.mBanner1 .tit_con .text.is-on{opacity:1;top:80px;transition:0.6s}

		.mBanner1 .controls{position:absolute;display:flex;gap:5px;top:450px}
		.mBanner1 .controls .prev,
		.mBanner1 .controls .next{cursor:pointer}
		.mBanner1 .controls .swiper-button-disabled{opacity:0.5}

		.mBanner1 .gallery{flex:1}	
		.mBanner1 .gallery .swiper-slide .text{display:none}

		.mBanner1 .thumb{margin:50px 0;margin-left:100px}
		.mBanner1 .thumb .swiper-slide{filter:brightness(0.5)}
		.mBanner1 .thumb .swiper-slide-thumb-active{filter:brightness(1)}
		.mBanner1 .thumb .swiper-slide .t1{display:block;font-size:20px;margin:10px 0;color:#555}
		.mBanner1 .thumb .swiper-slide .t2{display:none}








	  	.mBanner2{overflow:hidden;padding-bottom:200px}
	  	.mBanner2 img{width:100%;border-radius:0 0 50% 50% / 0 0 20% 20%;overflow:hidden;transform:scale(1.1)}



		.mBanner3 .swiper{padding-bottom:100px}
		.mBanner3 .controls{display:flex;gap:5px;justify-content:center;margin:0 0 50px}
		.mBanner3 .controls .prev,
		.mBanner3 .controls .next{cursor:pointer}
		.mBanner3 .controls .swiper-button-disabled{opacity:0.5}
		.mBanner3 .swiper-slide{}
		.mBanner3 .swiper-slide a{display:block;position:relative}
		.mBanner3 .swiper-slide a span{position:absolute;z-index:10;left:10px;bottom:20px;/*writing-mode: vertical-rl;*/text-orientation: sideways;
		font-size:24px;color:#fff;transition: 0.6s}

		.mBanner3 .swiper-slide a img{object-fit:cover;width:100%;height:100vh;filter:brightness(0.5);transition: 0.6s}
		.mBanner3 .swiper-slide a:hover span{transform:translateY(100px);opacity:0}
		.mBanner3 .swiper-slide a:hover img{transform:translateY(100px);filter:brightness(1)}





		.mBanner4{margin:0 0 100px}
		.mBanner4 .swiper1{z-index:10;padding:100px 0 20px}
		.mBanner4 .swiper1 .swiper-wrapper{transition-timing-function: linear;}
		.mBanner4 .swiper1 .swiper-slide{position:relative;width:350px}
		.mBanner4 .swiper1 .swiper-slide.s1,
		.mBanner4 .swiper1 .swiper-slide.s3,
		.mBanner4 .swiper1 .swiper-slide.s5,
		.mBanner4 .swiper1 .swiper-slide.s7,
		.mBanner4 .swiper1 .swiper-slide.s9,
		.mBanner4 .swiper1 .swiper-slide.s11,
		.mBanner4 .swiper1 .swiper-slide.s13,
		.mBanner4 .swiper1 .swiper-slide.s14,
		.mBanner4 .swiper1 .swiper-slide.s15,
		.mBanner4 .swiper1 .swiper-slide.s17,
		.mBanner4 .swiper1 .swiper-slide.s19{transform:translateY(-50px)}
		.mBanner4 .swiper1 .swiper-slide a{display:flex;justify-content:center;align-items:center;
		position:absolute;z-index:10;width:100%;height:100%;font-size:24px;color:#fff;opacity:0;transition:0.3s}
		.mBanner4 .swiper1 .swiper-slide:hover a{opacity:1}	
		.mBanner4 .swiper1 .swiper-slide:hover img{transform:scale(1.1);filter:brightness(0.5)}
		.mBanner4 .swiper1 .swiper-slide img{width:350px;height:350px;object-fit:cover;border-radius:50%;overflow:hidden;transition: 0.3s}
		
		.mBanner4 .swiper2{padding:0 0;margin-top:-70px}
		.mBanner4 .swiper2 .swiper-wrapper{transition-timing-function: linear;}
		.mBanner4 .swiper2 .swiper-slide{width:auto;font-size:80px;color:#cdcdcc;font-weight:600}
		
		
    }
     

/*_mobile*/
@media all and (max-width:1024px) {
	   /*타이틀*/
	  .mH2{font-size:30px;text-align:center;font-weight:600;margin:30px 0; color:#989898}
	  .mH2:before{content:'';display:block;width:1px;height:30px;background:#989898;transform:rotate(45deg);margin:10px auto}
	  
	  .mMore{display:block;position:relative;width:150px;line-height:40px;border:1px solid #111;margin:30px auto;text-align:center}
	  .mMore:before{content:'';position:absolute;left:0;height:100%;width:0;background:#111;transition: 0.3s}
	  .mMore:hover:before{width:100%}
	  .mMore:hover{color:#fff}
	  .mMore:hover span{background-image:url('../images/arrow-more-w.png')}
	  .mMore span{position:relative;padding-right:40px;background: url('../images/arrow-more.png') no-repeat right center /30px}

        .wide_banner{position:relative;background:#eeeeee;padding-bottom:1px}    
        .wide_banner .swiper-slide{}
        .wide_banner .swiper-slide .con{color:#fff;padding:50px 15px 0;font-size:12px;opacity:0;transition:0.5s}
        .wide_banner .swiper-slide .con .name{font-size:30px}
        .wide_banner .swiper-slide .con .desc{font-size:14px;margin:20px 0 20px;color:#fff}
        .wide_banner .swiper-slide .con .info li{font-size:16px;display:flex;gap:20px;margin:5px 0}
        .wide_banner .swiper-slide .con .info b{width:60px}   
        
        .wide_banner .swiper-slide-active .con{opacity:1;}
        
        .wide_banner .swiper-button-prev,
        .wide_banner .swiper-button-next{display:none}

        .wide_banner .swiper-pagination{position:absolute;left:0;right:0;top:0;bottom:auto;margin-top:78%}
        .wide_banner .swiper-pagination-bullet{position:relative;background:#fff;width:4px;height:4px;margin-right:20px !important}    
        .wide_banner .swiper-pagination-bullet:after{content:'';position:absolute;width:36px;height:36px;border:1px solid rgba(255,255,255,0.3);left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;opacity:0;transition:0.5s}
        .wide_banner .swiper-pagination-bullet-active:after{width:26px;height:26px;opacity:1;}

        .wide_banner .more{text-align:center;margin:30px 0}
        .wide_banner .more a{display:inline-block;border:1px solid rgba(255,255,255,0.5);line-height:40px;padding:0 30px;color:#fff}



        .wide_banner2{position:relative;background:#989898;padding-bottom:1px}    
        .wide_banner2 .swiper-slide{}
        .wide_banner2 .swiper-slide .con{color:#fff;padding:100px 15px 0;font-size:12px;opacity:0;transition:0.5s}
        .wide_banner2 .swiper-slide .con .name{font-size:30px}
        .wide_banner2 .swiper-slide .con .desc{font-size:14px;margin:20px 0 20px;color:#fff}
        .wide_banner2 .swiper-slide .con .info li{font-size:16px;display:flex;gap:20px;margin:5px 0}
        .wide_banner2 .swiper-slide .con .info b{width:60px}   
        
        .wide_banner2 .swiper-slide-active .con{opacity:1;}
        
        .wide_banner2 .swiper-button-prev,
        .wide_banner2 .swiper-button-next{display:none}

        .wide_banner2 .swiper-pagination{position:absolute;left:0;right:0;top:0;bottom:auto;margin-top:78%}
        .wide_banner2 .swiper-pagination-bullet{all:unset;color:#fff;font-size:14px;
		margin:0 5px !important;opacity:0.7;cursor:pointer}
        .wide_banner2 .swiper-pagination-bullet-active{border-bottom:1px solid #fff;opacity:1}

        .wide_banner2 .more{text-align:center;margin:30px 0}
        .wide_banner2 .more a{display:inline-block;border:1px solid rgba(255,255,255,0.5);
		line-height:40px;padding:0 30px;color:#fff}


        .wide_banner3{position:relative;background:#eeeeee;padding-bottom:1px}    
        .wide_banner3 .swiper-slide{}
        .wide_banner3 .swiper-slide .con{color:#fff;padding:40px 25px 0;font-size:12px;opacity:0;transition:0.5s}
        .wide_banner3 .swiper-slide .con .name{font-size:30px}
        .wide_banner3 .swiper-slide .con .desc{font-size:16px;margin:10px 0 20px;color:#fff}
        .wide_banner3 .swiper-slide .con .info li{font-size:14px;display:flex;gap:20px;margin:5px 0}
        .wide_banner3 .swiper-slide .con .info b{width:60px}   
        .wide_banner3 .swiper-slide-active .con{opacity:1;}
        .wide_banner3 .swiper-button-prev,
        .wide_banner3 .swiper-button-next{display:none}
        .wide_banner3 .swiper-pagination{position:absolute;left:0;right:0;top:0;bottom:auto;margin-top:70%}
        .wide_banner3 .swiper-pagination-bullet{all:unset;color:#e1e1e1;font-size:14px;background:#6f5f47;
		padding:6px 20px;margin:0px 2px !important;;cursor:pointer;transition:0.5s}
        .wide_banner3 .swiper-pagination-bullet-active{padding:15px 20px 8p; color:#FFF;background:#000;}
        .wide_banner3 .more{text-align:center;margin:30px 0}
        .wide_banner3 .more a{display:inline-block;border:1px solid rgba(255,255,255,0.5);
		line-height:40px;padding:0 30px;color:#fff}
		 
		  






















		.mBanner1{position:relative;padding:0px 0 0}
		.mBanner1:before{content:'';position:absolute;z-index:-1;width:100%;top:0;height:30vw;background:#eee}
		.mBanner1 .container{display:flex;flex-direction:column}
		
		.mBanner1 .tit_con{position:relative;order:2}
		.mBanner1 .tit_con .text{position:absolute;opacity:0;top:40px;}
		.mBanner1 .tit_con .text .t1{display:block;font-size:16px;color:#333}
		.mBanner1 .tit_con .text .t2{display:block;font-size:26px;color:#777}
		.mBanner1 .tit_con .text.is-on{opacity:1;top:20px;transition:0.6s}

		.mBanner1 .controls{position:relative;display:flex;gap:5px;top:20px;order:3;justify-content:flex-end}
		.mBanner1 .controls .prev,
		.mBanner1 .controls .next{cursor:pointer}
		.mBanner1 .controls .swiper-button-disabled{opacity:0.5}

		.mBanner1 .gallery{width:100%;order:1}	
		.mBanner1 .gallery .swiper-slide .text{display:none}
		
		.mBanner1 .thumb_wrap{padding:0 15px}
		.mBanner1 .thumb{margin:50px 0;}
		.mBanner1 .thumb .swiper-slide{filter:brightness(0.5)}
		.mBanner1 .thumb .swiper-slide-thumb-active{filter:brightness(1)}
		.mBanner1 .thumb .swiper-slide .t1{display:block;font-size:14px;margin:10px 0;color:#555}
		.mBanner1 .thumb .swiper-slide .t2{display:none}



		.mBanner2{overflow:hidden;padding-bottom:100px}
	  	.mBanner2 img{width:100%;border-radius:0 0 50% 50% / 0 0 20% 20%;overflow:hidden;transform:scale(1.1)}  


		.mBanner3 .swiper{padding-bottom:50px}
		.mBanner3 .controls{display:flex;gap:5px;justify-content:center;margin:30px 0}
		.mBanner3 .controls .prev,
		.mBanner3 .controls .next{cursor:pointer}
		.mBanner3 .controls .swiper-button-disabled{opacity:0.5}
		.mBanner3 .swiper-slide{}
		.mBanner3 .swiper-slide a{display:block;position:relative}
		.mBanner3 .swiper-slide a span{position:absolute;z-index:10;left:10px;bottom:20px;writing-mode: vertical-rl;text-orientation: sideways; ;font-size:18px;color:#fff;transition: 0.6s}
		.mBanner3 .swiper-slide a img{object-fit:cover;width:100%;height:400px;filter:brightness(0.9);transition: 0.6s}
		.mBanner3 .swiper-slide a:hover span{transform:translateY(50px);opacity:0}
		.mBanner3 .swiper-slide a:hover img{transform:translateY(50px);filter:brightness(1)}




		.mBanner4{margin:0 0 0px}
		.mBanner4 .swiper1{z-index:10;padding:50px 0 10px}
		.mBanner4 .swiper1 .swiper-wrapper{transition-timing-function: linear;}
		.mBanner4 .swiper1 .swiper-slide{position:relative;width:180px}
		.mBanner4 .swiper1 .swiper-slide.s1,
		.mBanner4 .swiper1 .swiper-slide.s3,
		.mBanner4 .swiper1 .swiper-slide.s5,
		.mBanner4 .swiper1 .swiper-slide.s7,
		.mBanner4 .swiper1 .swiper-slide.s9,
		.mBanner4 .swiper1 .swiper-slide.s11,
		.mBanner4 .swiper1 .swiper-slide.s13,
		.mBanner4 .swiper1 .swiper-slide.s14,
		.mBanner4 .swiper1 .swiper-slide.s15,
		.mBanner4 .swiper1 .swiper-slide.s17,
		.mBanner4 .swiper1 .swiper-slide.s19{transform:translateY(-40px)}
		.mBanner4 .swiper1 .swiper-slide a{display:flex;justify-content:center;align-items:center;position:absolute;z-index:10;
		width:100%;height:100%;font-size:18px;color:#fff}
		.mBanner4 .swiper1 .swiper-slide img{;filter:brightness(0.8)}
		.mBanner4 .swiper1 .swiper-slide img{width:180px;height:180px;object-fit:cover;
		border-radius:50%;overflow:hidden;transition: 0.3s}
		
		.mBanner4 .swiper2{padding:0 0;margin-top:-40px}
		.mBanner4 .swiper2 .swiper-wrapper{transition-timing-function: linear;}
		.mBanner4 .swiper2 .swiper-slide{width:auto;font-size:40px;color:#cdcdcc;font-weight:600}

}
