@charset "utf-8";

.banner { position:relative; width:100%; }

.swiper-container-1 { position:relative; width:100%; height:100vh!important; overflow:hidden; }
.swiper-container-1 .swiper-slide { position:relative; width:100%; height:100vh; overflow:hidden; }
.swiper-container-1 .swiper-slide .img02 { display:none; }
.swiper-container-1 .swiper-slide video { width:100%; height:100vh; object-fit: cover; }
.swiper-container-1 .swiper-slide .img01 { width:100%; height:100vh; object-fit: cover; }
.swiper-container-1 .swiper-slide .txt { position:absolute; left:0; bottom:50px; right:0; color:#fff; line-height:1.1; z-index:2; }
.swiper-container-1 .swiper-slide .txt .p1 { position:relative; top:50px; transition: all 0.6s; width:20px; height:1px; background:#fff; }
.swiper-container-1 .swiper-slide .txt .p2 { position:relative; top:50px; transition: all 1.2s; font-family: "PinyonScript"; font-size: 40px; margin-top:20px; }
.swiper-container-1 .swiper-slide .txt .p3 { position:relative; top:50px; transition: all 1.6s; font-size: 52px; margin-top:5px; text-shadow: 0 5px 5px rgba(0, 0, 0, 0.25); }
.swiper-container-1 .swiper-slide .txt .p4 { position:relative; top:50px; transition: all 2.2s;  font-size: 14px; margin-top:50px; line-height:25px; min-height:100px; max-width:715px; }

 
.swiper-container-1 .swiper-slide-active .txt .p1 { top:0; }
.swiper-container-1 .swiper-slide-active .txt .p2 { top:0; }
.swiper-container-1 .swiper-slide-active .txt .p3 { top:0; }
.swiper-container-1 .swiper-slide-active .txt .p4 { top:0; }
 



.banner .btn { position:absolute; right:6%; top:50%; transform: translateY(-50%); z-index:2; }
.banner .skipBtn { position:absolute; right:0; bottom:-40px; font-size:16px; color:#fff; text-transform: uppercase; z-index:2; cursor:pointer; }
.banner .skipBtn:before { position:absolute; width:28px; height:1px; top:50%; left:-38px;transform: translateY(-50%); display:block; content:""; background:#fff; z-index:2; }
.banner .skipBtn:after { position:absolute; width:14px; height:1px; top:50%; left:-53px;transform: translateY(-50%); display:block; content:""; background:#fff; z-index:2; }

.swiper-pagination-1 { position:relative; width:52px; text-align:center; z-index:9;  }
.swiper-pagination-1 .swiper-pagination-bullet { position:relative; width:52px; height:35px; line-height:35px; margin:17px 0; font-size:14px; color:#fff; border-radius:100%; background:none; opacity:1; }
.swiper-pagination-1 .swiper-pagination-bullet:before { position:absolute; left:50%; bottom:-19px; transform: translateX(-50%); width:4px; height:4px; background:#fff; border-radius:100%; display:block; content:""; z-index:1; }
.swiper-pagination-1 .swiper-pagination-bullet:last-child:before { display:none; }
.swiper-pagination-1 .swiper-pagination-bullet-active { width:52px; height:52px; line-height:52px; background:rgba(148, 137, 124, 0.80); backdrop-filter: blur(2px); }

@media all and (max-width:1680px){
	.swiper-container-1 .swiper-slide .txt { bottom:30px; }
	.swiper-container-1 .swiper-slide .txt .p1 { width:20px; height:1px; }
	.swiper-container-1 .swiper-slide .txt .p2 { font-size: 30px; margin-top:15px; }
	.swiper-container-1 .swiper-slide .txt .p3 { font-size: 44px; margin-top:5px; }
	.swiper-container-1 .swiper-slide .txt .p4 { font-size: 14px; margin-top:30px; line-height:25px; min-height:100px; max-width:715px; }
	
	.swiper-pagination-1 { width:40px; }
	.swiper-pagination-1 .swiper-pagination-bullet { width:40px; }
	.swiper-pagination-1 .swiper-pagination-bullet-active { width:40px; height:40px; line-height:40px; }
}
@media all and (max-width:1200px){
	.swiper-container-1 .swiper-slide .txt .p1 { width:20px; height:1px; }
	.swiper-container-1 .swiper-slide .txt .p2 { font-size: 24px; margin-top:15px; }
	.swiper-container-1 .swiper-slide .txt .p3 { font-size: 34px; margin-top:5px; }
	.swiper-container-1 .swiper-slide .txt .p4 { font-size: 14px; margin-top:30px; line-height:25px; min-height:100px; max-width:715px; }
}
@media all and (max-width:1000px){
	 .banner .btn { display:none; }
}
@media all and (max-width:900px){
	.swiper-container-1 .swiper-slide .txt { text-align:center; bottom:20px; }
	.swiper-container-1 .swiper-slide .txt .p1 { width:20px; height:1px; display:none; }
	.swiper-container-1 .swiper-slide .txt .p2 { font-size: 18px; margin-top:0; }
	.swiper-container-1 .swiper-slide .txt .p3 { font-size: 20px; margin-top:5px; }
	.swiper-container-1 .swiper-slide .txt .p4 { font-size: 14px; margin-top:15px; line-height:25px; min-height:100px; }
}



.aArea { padding-top:198px; }
.aArea .wrap { position:relative; display:flex; flex-wrap: wrap;  flex-direction:row-reverse; justify-content: space-between; }
.aBox02 { width:610px; overflow:hidden; }
.aBox02 img { width:100%; height:auto; transition: all 0.6s; }
.aBox02:hover img { transform: scale(1.05)!important; }

.aBox01 { width:675px; margin-right:225px; color:#94897C; }
.aBox01 .bd01 { font-size:46px; margin-top: 60px; line-height: 1.1; }
.aBox01 .bd02 { font-size:28px; margin-top: 20px; line-height: 1.3; font-weight: 100; }
.aBox01 .bd03 { font-size:14px; margin-top: 40px; line-height: 25px; letter-spacing: 1.4px; }
.aBox01 .bd04 { margin-top: 75px; }

.aBox03 { position:absolute; right:0; bottom: 0; width:530px; z-index: 2; }
.aBox03 { overflow:hidden; }
.aBox03 img { width:100%; height:auto; transition: all 0.6s; }
.aBox03:hover img { transform: scale(1.05)!important; }

@media all and (max-width:1680px){
	.aArea { padding-top:100px; }
	.aBox02 { width:37%; }
	.aBox01 { width:50%; margin-right:5%; }
	.aBox01 .bd01 { font-size:28px; margin-top: 40px; }
	.aBox01 .bd02 { font-size:18px; margin-top: 15px; }
	.aBox01 .bd03 { font-size:14px; margin-top: 20px; line-height: 25px; letter-spacing: 1.4px; }
	.aBox01 .bd04 { margin-top: 50px; }

	.aBox03 { width:25%; }
}
@media all and (max-width:1200px){
	.aArea { padding-top:60px; }
	.aArea .wrap { flex-direction:row; }
	.aBox02 { width:100%; margin:30px auto 0; max-width: 640px; }
	.aBox01 { width:100%; margin-right:0; text-align: left; }
	.aBox01 .bd01 { font-size:18px; margin-top: 20px; text-align: center; }
	.aBox01 .bd02 { font-size:16px; margin-top: 15px; text-align: center; }
	.aBox01 .bd03 { font-size:14px; margin-top: 20px; line-height: 25px; letter-spacing: 0; }
	.aBox01 .bd04 { margin-top: 30px; }

	.aBox03 { width:25%; display:none; }
}
@media all and (max-width:900px){
	.aArea { padding-top:40px; }
	
	.aBox01 .bd01 { font-weight: 400; }
	.aBox01 .bd02 { font-weight: 400; }
	.aBox01 .bd03 {  text-align:justify; }
}

.bArea { width:100%; overflow: hidden; margin-top: 198px;}
.bArea .Area-hd { padding-bottom: 15px; border-bottom: 1px solid rgba(148,137,124,0.5); }
.bArea .Area-hd .p3 { position: absolute;  right:0; bottom: 15px; font-size: 0; z-index: 2; }
.bArea .Area-hd .p3 i { display:inline-block; width:16px; height:20px; margin-right: 10px; background: url(ico12.svg) no-repeat center; background-size: 100% 100%; }
.bArea .Area-hd .p3 i:last-child { margin-right: 0!important; }
.bBox01 { margin-top: 60px; color:#94897C; display:flex; flex-wrap: wrap;  flex-direction:row; justify-content: space-between; align-items: flex-end; }
.bBox01 .p1 { font-size: 46px; line-height: 1.5; font-weight: 100; }
.bBox01 .p2 { font-size: 14px; line-height: 25px; width:385px; letter-spacing: 1.4px; }

.bBox02 { margin-top: 60px; }
.bBox02 .bd { width:94vw; }
.bBox02 .swiper-slide { width:55vw; max-width:1050px; margin-right: 10px; overflow: hidden; }
.bBox02 .swiper-slide:last-child { margin-right: 0; }
.bBox02 .swiper-slide a { position: relative; display: block; }
.bBox02 .swiper-slide .pic { position: relative; overflow: hidden; }
.bBox02 .swiper-slide .pic img { transition: all 1s; }
.bBox02 .swiper-slide .txt { position:absolute; padding: 130px 45px 0 45px; left: -500px; top:0; width:100%; box-sizing: border-box; color:#fff; line-height: 1.1; transition: all 0.6s;  opacity:0; }
.bBox02 .swiper-slide .txt .p2 { position: relative; font-family: "PinyonScript"; font-size: 36px; margin-top:10px; padding-left: 40px; }
.bBox02 .swiper-slide .txt .p2:before { position: absolute; left: 0; top:50%; transform: translateY(-50%); display: block; content: ""; width:30px; height:1px; background: rgba(255,255,255,0.5); z-index: 2;}
.bBox02 .swiper-slide .txt .p3 { font-size: 32px; margin-top:15px; letter-spacing: 4.8px; font-weight: 100; }

.bBox02 .swiper-slide:hover .pic img { transform: scale(1.05) rotate(-1deg)!important; }
.bBox02 .swiper-slide:hover .txt { left:0; opacity: 1; }

.bBox02 .btn { margin-top: 20px; display: flex; flex-wrap: wrap;  flex-direction:row; justify-content: center; align-items: center; }
.bBox02 .btn .btn01 { width:35px; height:35px; background:#fff; border-radius: 100%; cursor: pointer; display: flex; justify-content: center; align-items: center;  }

.swiper-pagination-b01 { margin:0 15px; height:2px; }
.swiper-pagination-b01 .swiper-pagination-bullet { width:8px; height:2px; margin:0 2px;  border-radius:0; background:#94897C; opacity:0.3; vertical-align:top; }
.swiper-pagination-b01 .swiper-pagination-bullet-active { opacity: 1; }

@media all and (max-width:1680px){
	.bArea { margin-top: 100px;}
	.bArea .Area-hd { padding-bottom: 15px; }
	.bArea .Area-hd .p3 { bottom: 15px; }
	.bArea .Area-hd .p3 i { width:16px; height:20px; margin-right: 10px; }
	.bBox01 { margin-top: 40px; }
	.bBox01 .p1 { font-size: 28px;  }
	.bBox01 .p2 { font-size: 14px; line-height: 25px; width:385px; letter-spacing: 1.4px; }

	.bBox02 { margin-top: 40px; }
	 
	.bBox02 .swiper-slide .txt { padding: 80px 35px 0 35px;  }
	.bBox02 .swiper-slide .txt .p2 { font-size: 28px; }
	.bBox02 .swiper-slide .txt .p3 { font-size: 20px; margin-top:15px; letter-spacing: 3px; }
}
@media all and (max-width:1200px){
	.bArea { margin-top: 60px;}
	.bArea .Area-hd { padding-bottom: 15px; }
	.bArea .Area-hd .p3 { bottom: 15px; display: none; }
	.bArea .Area-hd .p3 i { width:16px; height:20px; margin-right: 10px; }
	
	.bBox01 { margin-top: 30px; }
	.bBox01 .p1 { font-size: 18px;  }
	.bBox01 .p2 { font-size: 14px; line-height: 25px; width:385px; letter-spacing: 1px; }

	.bBox02 { margin-top: 30px; }
 
	.bBox02 .swiper-slide .txt { padding: 30px 25px 0 25px; left:0;  opacity:1; }
	.bBox02 .swiper-slide .txt .p1 img { height:20px; width:auto; }
	.bBox02 .swiper-slide .txt .p2 { font-size: 20px; padding-left: 30px; }
	.bBox02 .swiper-slide .txt .p2:before { width:20px; }
	.bBox02 .swiper-slide .txt .p3 { font-size: 18px; margin-top:10px; letter-spacing: 3px; }
}
@media all and (max-width:900px){
	.bArea { margin-top: 40px;}
	.bBox01 .p1 { width:100%; text-align: center; font-weight:400;  }
	.bBox01 .p2 { width:100%; margin-top: 10px;  text-align:justify; letter-spacing: 0; }

	.bBox02 .swiper-slide { width:70vw; }

	.bBox02 .btn { display: flex; }
}

.cArea { margin-top: 198px; }
.cArea .wrap { display:flex; flex-wrap: wrap;  flex-direction:row; justify-content: space-between; align-items: flex-end; }
.cArea .bd { width:915px; }
.cArea .bd .p1 { font-size: 14px; color:#94897C; line-height: 25px; letter-spacing: 1.4px; }
.cArea .bd .p2 { margin-top: 20px; }

.cArea01 { margin-top: 45px; display:flex; flex-wrap: wrap;  flex-direction:row; justify-content: space-between;  }
.cArea01 .ul01 { width:35.833%; }
.cArea01 .ul02 { width:23.437%; }
.cArea01 .ul03 { width:23.437%; }
.cArea01 .ul04 { width:15.729%; }

.cArea01 ul li a { position: relative; display: block; }
.cArea01 ul li:nth-child(2) { margin-top: 2.4%; }
.cArea01 ul li .pic { position:relative; overflow:hidden; }
.cArea01 ul li .pic img { width:100%; height:auto; transition: all 0.6s; }
.cArea01 ul li .pic p { position:absolute; width:100%; height:100%; top:0; left:0; background: rgba(0, 0, 0, 0.7); z-index:2; display:none; }
.cArea01 ul li .txt { position:absolute; top:50%; left:0; width:100%; transform: translateY(-50%); text-align: center; color:#fff; z-index:5; display:none; }
.cArea01 ul li .txt .p1 { font-size: 32px; color:#94897C; letter-spacing: 3.2px; font-weight: 100; }
.cArea01 ul li .txt .p2 { margin-top: 25px; }

.cArea01 ul li:hover .pic img { transform: scale(1.05)!important; }
.cArea01 ul li:hover .pic p { display: block; }
.cArea01 ul li:hover .txt { display: block; }
 
.cArea01 ul.ul04 li:nth-child(1) .pic p { display: none!important; }
.cArea01 ul.ul04 li:nth-child(1) .txt01 { position:absolute; top:50%; left:0; width:100%; transform: translateY(-50%); text-align: center; color:#fff; font-size: 16px; letter-spacing: 5px; z-index:55; }
.cArea01 ul.ul04 li:nth-child(1) .txt01 p:nth-child(n + 2) { margin-top: 20px; }

@media all and (max-width:1680px){
	.cArea { margin-top: 100px; }
	.cArea .wrap { align-items: flex-start; }
	.cArea .bd { width:calc(100% - 430px); }
	.cArea .bd .p1 { font-size: 14px; letter-spacing: 1.4px; }
	.cArea .bd .p2 { margin-top: 20px; }

	.cArea01 { margin-top: 30px; }
	 
	.cArea01 ul li .txt .p1 { font-size: 24px; letter-spacing: 2px; }
	.cArea01 ul li .txt .p2 { margin-top: 20px; }
 
	.cArea01 ul.ul04 li:nth-child(1) .txt01 { font-size: 16px; letter-spacing: 3px; }
	.cArea01 ul.ul04 li:nth-child(1) .txt01 p:nth-child(n + 2) { margin-top: 15px; }
}
@media all and (max-width:1200px){
	.cArea { margin-top: 60px; }
	.cArea .wrap { align-items: flex-start; }
	.cArea .Area-hd { width:100%; }
	.cArea .bd { width:100%; margin-top: 15px; text-align: left; }
	.cArea .bd .p1 { font-size: 14px; letter-spacing: 1px; }
	.cArea .bd .p2 { margin-top: 20px; }

	.cArea01 { margin-top: 30px; }
	 
	.cArea01 ul li .txt .p1 { font-size: 20px; letter-spacing: 2px; }
	.cArea01 ul li .txt .p2 { margin-top: 15px; }
	.cArea01 ul li .txt .p2 img { width:35px; height:auto; }
 
	.cArea01 ul.ul04 li:nth-child(1) .txt01 { font-size: 14px; letter-spacing: 2px; }
	.cArea01 ul.ul04 li:nth-child(1) .txt01 p:nth-child(n + 2) { margin-top: 10px; }
}
@media all and (max-width:900px){
	.cArea { margin-top: 40px; }
	.cArea .bd .p1 { font-size: 14px; letter-spacing: 0;  text-align:justify; }

	.cArea01 .ul01 { width:60.1%;; }
	.cArea01 .ul02 { width:39.20%; }
	.cArea01 .ul03 { width:60.1%; margin-top:  0.8%; }
	.cArea01 .ul03 li:nth-child(2) { margin-top: 1%; }
	
	.cArea01 .ul04 { width:39.20%; margin-top: 0.8%; } 
	.cArea01 .ul04 li:nth-child(1) .pic img { height:38.9vw; }
}

.dArea { margin-top: 110px; padding-top: 198px; background: #231F20; }
.dArea .hd { line-height: 1.1; text-align: center; color:#94897C; }
.dArea .hd .p1 { font-size: 46px; line-height: 1.5; font-weight: 100; }
.dArea .hd .p2 { font-size: 16px; margin-top: 20px;  font-family: 'GoogleSans'; }
.dArea .hd .p3 { margin-top: 25px; }

.dBox01 { margin-top: 70px; }
.dBox02 { margin-top: 10px; }
 
.dArea01 { width:100%; overflow:hidden;}
.dArea01 ul li { float:left; width:21.8vw; margin-right: 10px; overflow:hidden; }
.dArea01 ul li img { width:100%; height:auto; transition: all 0.6s; }
.dArea01 ul li:hover img { transform: scale(1.05)!important; }
  
@media all and (max-width:1680px){
	.dArea { margin-top: 80px; padding-top: 100px; }
	.dArea .hd .p1 { font-size: 28px; }
	.dArea .hd .p2 { font-size: 14px; margin-top: 15px; }
	.dArea .hd .p3 { margin-top: 25px; }

	.dBox01 { margin-top: 40px; }
	.dBox02 { margin-top: 10px; }
}
@media all and (max-width:1200px){
	.dArea { margin-top: 60px; padding-top: 60px; }
	.dArea .hd .p1 { font-size: 18px; }
	.dArea .hd .p2 { font-size: 12px; margin-top: 10px; }
	.dArea .hd .p3 { margin-top: 20px; }

	.dBox01 { margin-top: 30px; }
	.dBox02 { margin-top: 10px; }
}
@media all and (max-width:900px){
	.dArea { margin-top: 40px; padding-top: 40px; }

	.dArea01 ul li { float:left; width:180px; margin-right: 10px; }
}

.eArea { position: relative; padding: 198px 0; overflow: hidden; }
.eArea:before { position: absolute; top:0; left:0; width:100%; height:100%; display: block; background:url(eArea.png) no-repeat center; background-size: 100% 100%; content: ""; z-index: 1; transition: all 0.6s; }
.eArea .wrap { position: relative; z-index: 5; display:flex; flex-wrap: wrap;  flex-direction:row-reverse; justify-content: space-between; }
.eBox01 { width:675px; padding-top: 70px; }
.eBox01 .bd { font-size: 14px; line-height: 25px; margin-top: 50px; color:#94897C; letter-spacing: 1.4px; }

.eBox02 { width:870px; }
.eBox02 .swiper-slide { text-align: center; }
.eBox02 .swiper-slide .p1 { width:142px; height:142px; margin: 0 auto; background: url(ico16.svg) no-repeat center; background-size: 100% 100%; font-size: 28px; padding-top: 45px; font-family: 'GoogleSans'; box-sizing: border-box; }
.eBox02 .swiper-slide .p2 { font-size: 14px; letter-spacing: 1.4px; max-width: 200px; margin: 0 auto; }

.eArea:hover:before { transform: scale(1.05)!important; }

.swiper-pagination-e01 { margin-top: 40px; text-align: center; }
.swiper-pagination-e01 .swiper-pagination-bullet { width:8px; height:1px; margin:0 2px;  border-radius:0; background:#fff; opacity:0.5; }
.swiper-pagination-e01 .swiper-pagination-bullet-active { width:14px; height:2px; background: #94897C; opacity: 1; }

@media all and (max-width:1680px){
	.eArea { padding: 100px 0; }
 
	.eBox01 { width:40.6%; padding-top: 50px; }
	.eBox01 .bd { font-size: 14px; line-height: 25px; margin-top: 30px; letter-spacing: 1.4px; }

	.eBox02 { width:52.5%; }
	.eBox02 .swiper-slide .p1 { width:120px; height:120px; font-size: 24px; padding-top:40px; }
	.eBox02 .swiper-slide .p2 { font-size: 14px; letter-spacing: 1.4px; }

	.eArea:hover:before { transform: scale(1.05)!important; }

	.swiper-pagination-e01 { margin-top: 40px; text-align: center; }
}
@media all and (max-width:1200px){
	.eArea { padding:60px 0; background: #231F20; }
	.eArea:before { display: none; }
	.eArea .wrap { flex-direction:row; }

	.eBox01 { width:100%; padding-top: 0; }
	.eBox01 .bd { font-size: 14px; line-height: 25px; margin-top: 20px; letter-spacing: 1px; text-align: left; }

	.eBox02 { width:100%; margin-top: 30px; }
	.eBox02 .swiper-slide .p1 { width:120px; height:120px; font-size: 24px; padding-top:40px; }
	.eBox02 .swiper-slide .p2 { font-size: 14px; letter-spacing: 1px; max-width: 185px;  }
 
	.swiper-pagination-e01 { margin-top: 20px; text-align: center; }
}
@media all and (max-width:900px){
	.eArea { padding:40px 0;  }
	.eBox01 .bd { letter-spacing: 0;  text-align:justify; }

	.eBox02 .swiper-slide { padding-top: 15px; }
	.eBox02 .swiper-slide .p1 { width:90px; height:90px; font-size: 20px; padding-top:30px; }
	.eBox02 .swiper-slide .p2 { font-size: 13px; letter-spacing: 0; }
}
@media all and (max-width:400px){
	.eBox02 .swiper-slide .p2 { font-size: 12px; letter-spacing: 0; max-width: 150px;  }
}

.fArea { position: relative; padding: 198px 0; }
.fArea video { position: absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; z-index: 1; opacity:0.2; }
.fArea .wrap { position: relative; z-index: 5;  }

.fBox01 { margin-top: 70px; }
.fBox01 ul li { position: relative; float:left; width:180px; margin-right: 116px; text-align: center; cursor: pointer; }
.fBox01 ul li:before { position: absolute; top:50%; transform: translateY(-50%); right:-58px; width:1px; height:32px; display: block; content: ""; background:rgba(148, 137, 124, 0.5); line-height: 1.1; z-index: 2; }
.fBox01 ul li:nth-child(6n) { margin-right:0; }
.fBox01 ul li:nth-child(6n):before { display:none; }
.fBox01 ul li:nth-child(n + 7) { margin-top:100px; }
.fBox01 ul li .p1 { height:55px; }
.fBox01 ul li .p1 img { max-height: 48px; width:auto; } 
.fBox01 ul li .p2 { font-size: 14px; letter-spacing: 1.4px;  font-family: 'GoogleSans'; text-transform: uppercase; } 
.fBox01 ul li .p3 { font-size: 30px; letter-spacing: 3px; font-weight: 100; } 

.fBox01 ul li .txt { opacity: 1; }
.fBox01 ul li:hover .txt { opacity: 1; }
.fBox01 ul li:hover .p1 { transform: rotateY(360deg);-webkit-transform: rotateY(360deg);-moz-transform: rotateY(360deg);transition: transform 0.9s;-webkit-transition: transform 0.9s;-moz-transition: transform 0.9s;  }

.fBox02 { margin-top: 100px; text-align: center; font-size: 0; }
.fBox02 a { position: relative; display: inline-block; width:365px; border-radius: 100px; border: 1px solid #94897C; z-index: 1; overflow: hidden; }
.fBox02 a:before { position: absolute; left:0; width:100%; height:0; bottom:0; display: block; content: ""; background:rgba(148,137,124,0.15); transition: all 0.6s; z-index: 1; }
.fBox02 a i { position:relative; display: inline-block; padding-left:60px; font-size: 20px; color:#94897C; height: 80px; line-height: 80px; font-weight: bold; background: url(ico11.svg) no-repeat center left; background-size: 40px 27px; z-index: 2;}

.fBox02 a:hover:before { height:100%; }

@media all and (max-width:1680px){
	.fArea { padding: 100px 0; }

	.fBox01 { margin-top: 50px; }
	.fBox01 ul li {  float:left; width:15%; margin-right: 2%; }
	.fBox01 ul li:before { right:-6.6%; width:1px; height:32px; }
	.fBox01 ul li:nth-child(6n) { margin-right:0; }
	.fBox01 ul li:nth-child(6n):before { display:none; }
	.fBox01 ul li:nth-child(n + 7) { margin-top:60px; }
	.fBox01 ul li .p1 { height:50px; }
	.fBox01 ul li .p1 img { max-height: 40px; width:auto; } 
	.fBox01 ul li .p2 { font-size: 14px; letter-spacing: 1.4px; } 
	.fBox01 ul li .p3 { font-size: 24px; letter-spacing: 2px; } 
 
	.fBox02 { margin-top: 50px; }
	.fBox02 a { width:280px; }
	.fBox02 a i { padding-left:50px; font-size: 18px; height: 60px; line-height: 60px;  background-size: 30px 21px; }
}
@media all and (max-width:1200px){
	.fArea { padding: 60px 0; }

	.fBox01 { margin-top: 30px; }
	.fBox01 ul li {  float:left; width:15%; margin-right: 2%; }
	.fBox01 ul li:before { right:-5%; width:1px; height:32px; }
	.fBox01 ul li:nth-child(6n) { margin-right:0; }
	.fBox01 ul li:nth-child(6n):before { display:none; }
	.fBox01 ul li:nth-child(n + 7) { margin-top:30px; }
	.fBox01 ul li .p1 { height:45px; }
	.fBox01 ul li .p1 img { max-height: 35px; width:auto; } 
	.fBox01 ul li .p2 { font-size: 14px; letter-spacing: 1px; } 
	.fBox01 ul li .p3 { font-size: 18px; letter-spacing: 1px; } 
 
	.fBox02 { margin-top: 30px; }
	.fBox02 a { width:180px; }
	.fBox02 a i { padding-left:35px; font-size: 14px; height: 40px; line-height: 40px;  background-size: 21px 14px; }
}
@media all and (max-width:1000px){
	.fBox01 { margin-top: 30px; }
	.fBox01 ul li {  float:left; width:23.5%; margin-right: 2%; }
	.fBox01 ul li:before { right:-5%; width:1px; height:24px; }
	.fBox01 ul li:nth-child(6n) { margin-right:2%; }
	.fBox01 ul li:nth-child(4n) { margin-right:0; }
	.fBox01 ul li:nth-child(6n):before { display:block; }
	.fBox01 ul li:nth-child(4n):before { display:none; }
	.fBox01 ul li:nth-child(n + 5) { margin-top:25px; }

	.fBox01 ul li .p1 { height:45px; }
	.fBox01 ul li .p1 img { max-height: 35px; width:auto; } 
	.fBox01 ul li .p2 { font-size: 14px; letter-spacing: 0; } 
	.fBox01 ul li .p3 { font-size: 16px; letter-spacing: 0; } 
}
@media all and (max-width:900px){
	.fArea { padding: 40px 0; }

	.fBox01 ul li .p2 { font-size: 12px; letter-spacing: 0; } 
	.fBox01 ul li .p3 { font-size: 14px; letter-spacing: 0; font-weight: normal; } 
}
@media all and (max-width:750px){
	.fBox01 ul li {  float:left; width:32%; margin-right: 2%; }
	.fBox01 ul li:before { right:-5%; width:1px; height:24px; }
	.fBox01 ul li:nth-child(6n) { margin-right:2%; }
	.fBox01 ul li:nth-child(4n) { margin-right:2%; }
	.fBox01 ul li:nth-child(3n) { margin-right:0; }
	.fBox01 ul li:nth-child(6n):before { display:block; }
	.fBox01 ul li:nth-child(4n):before { display:block; }
	.fBox01 ul li:nth-child(3n):before { display:none; }
	.fBox01 ul li:nth-child(n + 4) { margin-top:20px; }
}
@media all and (max-width:500px){
	.fBox01 ul li {  float:left; width:50%; margin-right: 0; }
	.fBox01 ul li:before { right:0; width:1px; height:24px; }
	.fBox01 ul li:nth-child(6n) { margin-right:0; }
	.fBox01 ul li:nth-child(4n) { margin-right:0; }
	.fBox01 ul li:nth-child(3n) { margin-right:0; }
	.fBox01 ul li:nth-child(2n) { margin-right:0; }
	.fBox01 ul li:nth-child(6n):before { display:block; }
	.fBox01 ul li:nth-child(4n):before { display:block; }
	.fBox01 ul li:nth-child(3n):before { display:block; }
	.fBox01 ul li:nth-child(2n):before { display:none; }
	.fBox01 ul li:nth-child(n + 3) { margin-top:20px; }
}
 


@media all and (max-width:1680px){
	 
}
@media all and (max-width:1200px){
	 
}
@media all and (max-width:900px){
	 
}




@media all and (max-width:1680px){
	 
}
@media all and (max-width:1200px){
	 
}
@media all and (max-width:900px){
	 
}



.wipe-effect {
	clip-path: inset(0 100% 0 0);
	animation: wipeOpen 5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	display: block; 
}

@keyframes wipeOpen {
	to {
		clip-path: inset(0 0 0 0);
	}
}
