@charset "utf-8";

div.main-visual.slick-dotted.slick-slider{margin-bottom:0;}
div.main-visual .box {display:block; position:relative; height:100vh;}
div.main-visual .box:after {display:block; position:absolute; content:""; width:100%; height:100%; background-color:rgba(0,0,0,0.3);}
div.main-visual .box.bg1{ background-image: url("../img/main/main-visual01.jpg");}
div.main-visual .box.bg2{ background-image: url("../img/main/main-visual02.jpg");}
div.main-visual .box div.txt-area{position: absolute; top: 65%; left: 15%; z-index:1; transform: translate(0%, -50%); }
div.main-visual .box div.txt-area a{}
div.main-visual .box div.txt-area a p.tit{color: #fff; font-size: 6rem; font-weight: 800; line-height:1.3;}
div.main-visual .box div.txt-area a p.sub{color: #fff; font-size: 2.6rem; font-weight: 400; line-height:1.3; margin-top:5rem;}
div.main-visual .box div.txt-area a p span{display:block;}
div.main-visual .slick-dots {bottom: 40px;}

div.main-visual .slick-prev, 
div.main-visual .slick-next{top: 50%; transform: translateY(-50%); z-index:1;}
div.main-visual .slick-prev{left: 14%;}
div.main-visual .slick-next{right: 14%;}
div.main-visual .slick-prev:before, 
div.main-visual .slick-next:before{font-size:3.8rem;}
div.main-visual .slick-prev:hover, 
div.main-visual .slick-next:hover{background:none;}

.a_more{
	display:inline-block; 
	position:relative; 
	border-bottom:0.1rem solid rgba(0,0,0,0); 
	font-size:2rem; 
	font-weight:800; 
	color:#222; 
	transition:ease all 0.3s; 
	padding:1rem 4.5rem 1rem 0rem; 
	background:url("../img/main/icon-more.png") center right no-repeat;
	text-transform:uppercase;/*모든 글자를 대문자로 바꿉니다*/

}
.a_more.white{color:#fff; background:url("../img/main/icon-more-w.png") center right no-repeat;}

.a_more:hover{border-bottom:0.1rem solid #222;}
.a_more.white:hover{border-bottom:0.1rem solid #fff;}

.ell.row3{max-height:8rem; height:8rem;}

.tit-area{margin-bottom:4rem;}
.tit-area p.tit{font-size:4.8rem; font-weight:800;}
.tit-area p.sub{font-size:2.2rem; font-weight:600; color:#666; margin:2rem 0;}

#main section.business{position:relative; padding:18rem 0 16rem;}
#main section.business:before{
	position: absolute;
    top: 20rem;
    right: -40%;
    display: block;
    content: "WUONENG";
    font-size: 32rem;
    font-weight: 800;
    color: #f2f9ff;
}
#main section.business div.tit-area{position:relative; padding-bottom:6rem;}
#main section.business div.pro-bar-flex{position:absolute; left:2.7rem; bottom:-2.4rem;}
#main section.business p.more-txt{margin-bottom:15rem;}
#main section.business div.business-list{margin-left:-78rem}
#main section.business div.box{position:relative; width:60rem; margin:0 2rem; transition:ease all 0.3s; margin-top:10rem;}
#main section.business div.box a{}
#main section.business div.box a div.img-box{position:relative; width:100%; padding-top:56.2%; border-radius:3rem; overflow:hidden; border:0.1rem solid #ddd;}
#main section.business div.box a div.img-box img{position:absolute; top:0; left:0; width:100%;}
#main section.business div.box a div.img-box p.num{position:absolute; bottom:-1.5rem; left:2rem; font-size:10rem; font-weight:800; color:#fff; line-height:1; text-shadow: 0px 1px 8px rgb(0 0 0 / 20%);}
#main section.business div.box a div.txt-area{padding:2rem; box-sizing:border-box;}
#main section.business div.box a div.txt-area p.tit{position:relative; font-size:4rem; font-weight:800; color:#222; padding-bottom:5rem;}
#main section.business div.box a div.txt-area p.tit span{display:block; font-size:1.6rem; font-weight:600; color:#666;}
#main section.business div.box a div.txt-area p.tit:after{position:absolute; left:0; bottom:2.5rem; display:block; content:""; width:4rem; height:0.1rem; background:#222;}
#main section.business div.box a div.txt-area p.sub{font-size:1.6rem; font-weight:600; color:#666;}
#main section.business div.box a div.txt-area .a_more{font-size:1.4rem; background-size:15%; padding-right:3rem;}

#main section.business div.box.slick-active{margin-top:2rem;}

#main section.business .slick-prev, 
#main section.business .slick-next{top: -3rem; transform: translateY(-50%); z-index:1; }
#main section.business .slick-prev{left: unset; right:60%;}
#main section.business .slick-next{right: 56.5%;}

#main section.business .slick-prev:before, 
#main section.business .slick-next:before{font-size:1.8rem; color:#222;}
#main section.business .slick-prev:before{content:"◀";} 
#main section.business .slick-next:before{content:"▶";}

#main section.business .slick-prev:hover, 
#main section.business .slick-next:hover{background:none;}

#main section.partner{padding:14rem 0 15rem; background:#f5f5f5;}
#main section.partner div.tit-area{margin-bottom:10rem;}
#main section.partner ul li{width:19%; margin-right:1.25%; box-sizing:border-box; margin-bottom:1.25%;}
#main section.partner ul li:nth-child(5n){margin-right:0;}
#main section.partner ul li div.img-box{position:relative; width:100%; padding-top:75%; background-color:#fff; background-repeat:no-repeat; background-position:center center;background-size: 80%;}

#main section.partner ul li:first-child div.img-box{background-image: url("../img/content/img-logo-01.png"); }
#main section.partner ul li:nth-child(2) div.img-box{background-image: url("../img/content/img-logo-02.png"); }
#main section.partner ul li:nth-child(3) div.img-box{background-image: url("../img/content/img-logo-03.png"); }
#main section.partner ul li:nth-child(4) div.img-box{background-image: url("../img/content/img-logo-04.png"); }
#main section.partner ul li:nth-child(5) div.img-box{background-image: url("../img/content/img-logo-05.png"); }
#main section.partner ul li:nth-child(6) div.img-box{background-image: url("../img/content/img-logo-06.png"); }
#main section.partner ul li:nth-child(7) div.img-box{background-image: url("../img/content/img-logo-07.png"); }
#main section.partner ul li:nth-child(8) div.img-box{background-image: url("../img/content/img-logo-08.png"); }
#main section.partner ul li:nth-child(9) div.img-box{background-image: url("../img/content/img-logo-09.png"); }
#main section.partner ul li:nth-child(10) div.img-box{background-image: url("../img/content/img-logo-010.png"); }
#main section.partner ul li:nth-child(11) div.img-box{background-image: url("../img/content/img-logo-011.png"); }
#main section.partner ul li:nth-child(12) div.img-box{background-image: url("../img/content/img-logo-012.png"); }
#main section.partner ul li:nth-child(13) div.img-box{background-image: url("../img/content/img-logo-013.png"); }
#main section.partner ul li:nth-child(14) div.img-box{background-image: url("../img/content/img-logo-014.png"); }
#main section.partner ul li:nth-child(15) div.img-box{background-image: url("../img/content/img-logo-015.png"); }
#main section.partner ul li:nth-child(16) div.img-box{background-image: url("../img/content/img-logo-016.png"); }
#main section.partner ul li:nth-child(17) div.img-box{background-image: url("../img/content/img-logo-017.png"); }
#main section.partner ul li:nth-child(18) div.img-box{background-image: url("../img/content/img-logo-018.png"); }
#main section.partner ul li:nth-child(19) div.img-box{background-image: url("../img/content/img-logo-019.png"); }
#main section.partner ul li:nth-child(20) div.img-box{background-image: url("../img/content/img-logo-020.png"); }

#main section.about{background:url("../img/main/bg-about.jpg") #fff top center no-repeat; padding:15rem 0; background-size:100%;}
#main section.about div.tit-area > div{position:relative; padding-left:10rem; font-size:1.4rem; font-weight:800; margin-bottom:5rem;}
#main section.about div.tit-area > div:after{position:absolute; top:50%; left:0; content:""; width:9rem; height:0.1rem; background:#444; display:block;}
#main section.about div.abuot-area{}
#main section.about div.abuot-area div.tit-area{color:#fff; margin-bottom:10rem;}
#main section.about div.abuot-area div.tit-area p.sub{color:#fff; margin:8rem 0 10rem;}
#main section.about div.abuot-area div.tit-area > div{}
#main section.about div.abuot-area div.tit-area > div:after{background:#fff;}
#main section.about div.location-area{background:#fff; padding:8rem 5rem; box-sizing:border-box;}
#main section.about div.location-area div.left{width:50%;}
#main section.about div.location-area div.right{width:40%; margin-left:10%; margin-top:5rem;}
#main section.about div.location-area div.right div.tit-area p.sub{font-size:1.8rem; margin-bottom:5rem;}
#main section.about div.location-area div.right div.tit-area dl{display:flex; font-size:1.6rem; font-weight:600;}
#main section.about div.location-area div.right div.tit-area dl dd{padding-left:1rem;}
#main section.about div.location-area div.right div.tit-area a{margin-top:5rem}
#main section.about div.big{text-align:center; font-size: 20rem; font-weight: 900; line-height:1; background-size:100%; background:url("../img/main/bg-about02.jpg") center center no-repeat;  background-clip: text;-webkit-background-clip: text;color: transparent;}

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

	div.main-visual .slick-prev{left: 4%;}
	div.main-visual .slick-next{right: 4%;}

	.tit-area p.tit{font-size:4rem;}
	div.tit-area p.sub{font-size:1.8rem;}


	#main section.business div.business-list{margin-left:0;}
	#main section.business div.pro-bar-flex{left:2.5%;}
	#main section.business .slick-prev{right:unset; left:4%;}
	#main section.business .slick-next{right:unset; left:12%;}

	#main section.about{background-size: auto;}
	#main section.about div.abuot-area div.tit-area{margin-bottom: 6rem;}
	#main section.about div.abuot-area div.tit-area p.sub{margin: 5rem 0 6rem;}
	
}


@media screen and (max-width:1365px) {
	#main section.business div.pro-bar-flex{left:8%;}
}

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

@media screen and (max-width:839px) {
	div.main-visual .box div.txt-area{top:50%; left:0%; width:100%; padding:0 4%; box-sizing:border-box;}
	div.main-visual .box div.txt-area a p.tit{font-size:5rem;}
	div.main-visual .box div.txt-area a p.tit span{display:inline}
	div.main-visual .box div.txt-area a p.sub{font-size:2rem;}

	#main section.about div.location-area{display:block;}
	#main section.about div.location-area div.left,
	#main section.about div.location-area div.right{width:100%; margin:0;}
	#main section.about div.location-area div.right{margin-top:5rem;}

	#main section.about div.big{font-size:17vw}
		.
}
@media screen and (max-width:599px) {
	
	div.tit-area p.tit{font-size:3rem;}
	div.tit-area p.sub{font-size:1.6rem;}

	div.main-visual .box div.txt-area a p.tit{font-size:4rem;}
	div.main-visual .box div.txt-area a p.sub{font-size:1.8rem;}

	#main section.business div.box a div.img-box p.num{font-size:8rem;}
	
	#main section.business div.pro-bar-flex{left:12%;}
	#main section.business .slick-prev{right:unset; left:0%;}
	#main section.business .slick-next{right:unset; left:24%;}

}