@charset "utf-8";

.mainTop { position:relative; height:980px; overflow:hidden; }
#mainVisual { position:relative; padding:0; width:100%; height:980px; }
#mainVisual.fixNo { position:relative; }
#mainVisual .swiper-container { position:relative; width:100%; height:980px; overflow:hidden; }
#mainVisual .swiper-container .swiper-slide { position:relative; width:100%; overflow:hidden; display:flex; }
#mainVisual .swiper-container .swiper-slide .mvisualImage { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover;  }

#mainVisual .swiper-container .swiper-slide .bg { opacity:0.5; position:absolute; right:0; bottom:0; width:696px; height:435px; background:url(/img/main/bg_visual.png) right bottom no-repeat; }
/*
#mainVisual .swiper-container .swiper-pagination.swiper-pagination { display:block; height:9px; position:relative !important; }
#mainVisual .swiper-container .swiper-pagination.swiper-pagination .swiper-pagination-bullet { position:relative; opacity:1; display:inline-block; margin:0 7px; width:9px; height:9px; border:none; background-color:#bbbbb6; border-radius:50%; }
#mainVisual .swiper-container .swiper-pagination.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color:#b1090d; }
*/

#mainVisual .swiper-container .btn_pn { position:absolute; top:22px; width:10px; height:13px; background-size:7px 13px; outline:none; background-position:center center; background-repeat:no-repeat; }
#mainVisual .swiper-container .swiper-button-next { left:auto; right:0 !important; background-image:url(/img/main/btn_swiper_next.png); }
#mainVisual .swiper-container .swiper-button-prev { left:auto; right:20px !important; background-image:url(/img/main/btn_swiper_prev.png); }

#mainVisual .swiper-container .btnbox { position:absolute; top:50%; right:0; transform:translateY(-50%); z-index:9; text-align:left; }
#mainVisual .swiper-container .btnbox .box { position:relative; width:150px; text-align:left; }
#mainVisual .swiper-container .btnbox .swiper-pagination { width:240px; display:inline-block; vertical-align:bottom; }
#mainVisual .swiper-container .btnbox .swiper-scrollbar { width:240px; display:inline-block; vertical-align:bottom; }
#mainVisual .swiper-container .btnbox .num { display:none; position:absolute; top:0; font-size:16px; line-height:15px; font-weight:500; letter-spacing:-0.04em; color:rgba(255,255,255,0.5); width:55px; text-align:left; vertical-align:bottom; }
#mainVisual .swiper-container .totalslide { position:relative; color:rgba(255,255,255,0.2); display:inline-block; }
#mainVisual .swiper-container .activeslide { position:relative; color:#fff; display:inline-block; }
#mainVisual .swiper-pagination-progressbar { background:rgba(255,255,255,0.0) !important; height:1px !important; display:none }
#mainVisual .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background:#fff !important; }
#mainVisual .swiper-scrollbar { background:rgba(255,255,255,0.0) !important; height:1px !important; }
#mainVisual .swiper-scrollbar-fill { background:#fff !important; }
.swiper-button-next:after, 
.swiper-button-prev:after { display:none; }

#mainVisual .swiper-container .btnbox .playstop { position:absolute; top:0; right:0; display:none; }
#mainVisual .swiper-container .btnbox .playstop span { display:inline-block; width:13px; height:13px; cursor:pointer; }
#mainVisual .swiper-container .btnbox .playstop span.play { background: url(/img/main/btn_swiper_play.png) center center no-repeat; }
#mainVisual .swiper-container .btnbox .playstop span.stop { background: url(/img/main/btn_swiper_stop.png) center center no-repeat; margin:0 0 0 5px; }


#mainVisual .swiper-container .btnbox .swiper-pagination-bullet { position:relative; width:55px !important; text-align:left; opacity:1; background-color: transparent; }
#mainVisual .swiper-container .btnbox .swiper-pagination-bullet:after { content:""; display:block; z-index:1; position:absolute; left:-1px; top:-1px; width:3px; height:3px; background-color:rgba(255,255,255,0.2); border-radius:100%; transition:all 0.3s ease-in-out; }
#mainVisual .swiper-container .btnbox .swiper-pagination-bullet:before { content:""; display:block; z-index:1; position:absolute; left:0; top:0; width:0; height:0; background-color:rgba(255,255,255,0.12); transition:all 0.3s ease-in-out; border-radius:100%; }
#mainVisual .swiper-container .btnbox .swiper-pagination-bullet em { position: absolute; top:20px; left:-6px; color:rgba(255,255,255,0.5); font-weight:500; font-size:16px; letter-spacing:-0.04em; }
#mainVisual .swiper-container .btnbox .swiper-pagination-bullet span { display:block; }
#mainVisual .swiper-container .btnbox .swiper-pagination-bullet .bg { position: absolute; top:0; left:0; z-index:1; background:rgba(255,255,255,0.2); width:100%; height:1px; }
#mainVisual .swiper-container .btnbox .swiper-pagination-bullet .bar { position:absolute; top:0; left:0; z-index:2; width:0; height:0; background:#fff; }
#mainVisual .swiper-container .btnbox .swiper-pagination-bullet-active .bar { animation:countingBar 3s; animation-fill-mode:forwards; }
#mainVisual .swiper-container .btnbox .swiper-pagination-bullet-active em { color:#fff; }
#mainVisual .swiper-container .btnbox .swiper-pagination-bullet-active:after { content:""; display:block; z-index:1; position:absolute; left:-2px; top:-2px; width:5px; height:5px; background-color:rgba(255,255,255,1); }
#mainVisual .swiper-container .btnbox .swiper-pagination-bullet-active:before { width:21px; height:21px; left:-10px; top:-10px;  }

#mainVisual .swiper-container .txtbox { color:#fff; position:absolute; top:50%; left:0; transform:translateY(-50%); z-index:9; text-align:left; width:100%; padding:0 0 0 120px; box-sizing:border-box; }
#mainVisual .swiper-container .txtbox .txt { overflow:hidden; text-transform:uppercase; }
#mainVisual .swiper-container .txtbox .txt > span { overflow:hidden; display:inline-block; margin-right:35px; }
#mainVisual .swiper-container .txtbox .txt > span strong { opacity:0; font-family: 'Lexend', sans-serif; color:#fff; font-weight:100; font-size:95px; line-height:95px; letter-spacing:-0.04em; display:inline-block; position:relative; word-break: break-word; word-wrap: break-word; }
#mainVisual .swiper-container .txtbox .txt > span strong { animation:txtLeft 1.0s 0.8s; animation-fill-mode:both; }
#mainVisual .swiper-container .txtbox .txt_3 { margin:42px 0 0 0;  line-height:30px; overflow:hidden; }
#mainVisual .swiper-container .txtbox .txt_3 span i { font-weight:300; min-width:8px; color:#fff; font-size:32px; line-height:30px; font-style:normal; display:inline-block; }
#mainVisual .swiper-container .txtbox .txt_3 span i { opacity:0; }
#mainVisual .swiper-container .txtbox .txt_3 span.br { display:block; line-height:10px; height:10px;  }
#mainVisual .swiper-container .txtbox .txt_3 span:nth-child(1) i{ animation:txtOver 1.0s 0.8s; animation-fill-mode:both; }
#mainVisual .swiper-container .txtbox .txt_3 span:nth-child(2) i{ animation:txtOver 1.0s 0.9s; animation-fill-mode:both; }
#mainVisual .swiper-container .txtbox .txt_3 span:nth-child(3) i{ animation:txtOver 1.0s 1.0s; animation-fill-mode:both; }
#mainVisual .swiper-container .txtbox .txt_3 span:nth-child(4) i{ animation:txtOver 1.0s 1.1s; animation-fill-mode:both; }
#mainVisual .swiper-container .txtbox .txt_3 span:nth-child(5) i{ animation:txtOver 1.0s 1.2s; animation-fill-mode:both; }
#mainVisual .swiper-container .txtbox .txt_3 span:nth-child(6) i{ animation:txtOver 1.0s 1.3s; animation-fill-mode:both; }
#mainVisual .swiper-container .txtbox .txt_3 span:nth-child(7) i{ animation:txtOver 1.0s 1.4s; animation-fill-mode:both; }
#mainVisual .swiper-container .txtbox .txt_3 span:nth-child(8) i{ animation:txtOver 1.0s 1.5s; animation-fill-mode:both; }
#mainVisual .swiper-container .txtbox .txt_3 span:nth-child(9) i{ animation:txtOver 1.0s 1.6s; animation-fill-mode:both; }
#mainVisual .swiper-container .txtbox .txt_3 span:nth-child(10) i{ animation:txtOver 1.0s 1.7s; animation-fill-mode:both; }
#mainVisual .swiper-container .txtbox .txt_3 span:nth-child(11) i{ animation:txtOver 1.0s 1.8s; animation-fill-mode:both; }
#mainVisual .swiper-container .txtbox .txt_3 span:nth-child(12) i{ animation:txtOver 1.0s 1.9s; animation-fill-mode:both; }
#mainVisual .swiper-container .txtbox .txt_3 span:nth-child(13) i{ animation:txtOver 1.0s 2.0s; animation-fill-mode:both; }
#mainVisual .swiper-container .txtbox .txt_3 span:nth-child(14) i{ animation:txtOver 1.0s 2.1s; animation-fill-mode:both; }
#mainVisual .swiper-container .txtbox .txt_3 span:nth-child(15) i{ animation:txtOver 1.0s 2.2s; animation-fill-mode:both; }
#mainVisual .swiper-container .txtbox .txt_3 span:nth-child(16) i{ animation:txtOver 1.0s 2.3s; animation-fill-mode:both; }
#mainVisual .swiper-container .txtbox .txt_3 span:nth-child(17) i{ animation:txtOver 1.0s 2.4s; animation-fill-mode:both; }
#mainVisual .swiper-container .txtbox .txt_3 span:nth-child(18) i{ animation:txtOver 1.0s 2.5s; animation-fill-mode:both; }
#mainVisual .swiper-container .txtbox .txt_3 span:nth-child(19) i{ animation:txtOver 1.0s 2.6s; animation-fill-mode:both; }
#mainVisual .swiper-container .txtbox .txt_3 span:nth-child(20) i{ animation:txtOver 1.0s 2.7s; animation-fill-mode:both; }
#mainVisual .swiper-container .txtbox .txt_3 span:nth-child(21) i{ animation:txtOver 1.0s 2.8s; animation-fill-mode:both; }
#mainVisual .swiper-container .txtbox .txt_3 span:nth-child(22) i{ animation:txtOver 1.0s 2.9s; animation-fill-mode:both; }
#mainVisual .swiper-container .txtbox .txt_3 span:nth-child(23) i{ animation:txtOver 1.0s 3.0s; animation-fill-mode:both; }
#mainVisual .swiper-container .txtbox .txt_3 span:nth-child(24) i{ animation:txtOver 1.0s 3.1s; animation-fill-mode:both; }
#mainVisual .swiper-container .txtbox .txt_3 span:nth-child(25) i{ animation:txtOver 1.0s 3.2s; animation-fill-mode:both; }
#mainVisual .swiper-container .txtbox .txt_3 span:nth-child(26) i{ animation:txtOver 1.0s 3.3s; animation-fill-mode:both; }
#mainVisual .swiper-container .txtbox .txt_3 span:nth-child(27) i{ animation:txtOver 1.0s 3.4s; animation-fill-mode:both; }

@media screen and (max-width:1440px){
	.mainTop,
	#mainVisual,
	#mainVisual .swiper-container,
	#mainVisual .swiper-container .swiper-slide,
	#mainVisual .swiper-container .swiper-slide .mvisualImage { height:700px; }
	#mainVisual .swiper-container .txtbox { padding:0 0 0 100px; }
	#mainVisual .swiper-container .txtbox .txt > span { margin-right:35px; }
	#mainVisual .swiper-container .txtbox .txt > span strong { font-size:80px; line-height:80px; }
	#mainVisual .swiper-container .txtbox .txt_3 { margin:30px 0 0 0;  line-height:30px; }
	#mainVisual .swiper-container .txtbox .txt_3 span i { font-size:30px; line-height:30px; }
	#mainVisual .swiper-container .swiper-slide .bg { width:450px; height:281px; background-size:450px auto; }
}
@media screen and (max-width:1200px){
	#mainVisual .swiper-container .txtbox { padding:0 0 0 80px; }
	#mainVisual .swiper-container .txtbox .txt > span { margin-right:20px; }
	#mainVisual .swiper-container .txtbox .txt > span strong { font-size:60px; line-height:60px; }
	#mainVisual .swiper-container .txtbox .txt_3 { margin:20px 0 0 0;  line-height:20px; }
	#mainVisual .swiper-container .txtbox .txt_3 span i { font-size:20px; line-height:20px; }
	#mainVisual .swiper-container .swiper-slide .bg { width:380px; height:238px; background-size:380px auto; }
}
@media screen and (max-width:760px){
	.mainTop,
	#mainVisual,
	#mainVisual .swiper-container,
	#mainVisual .swiper-container .swiper-slide,
	#mainVisual .swiper-container .swiper-slide .mvisualImage { height:650px; }
	#mainVisual .swiper-container .txtbox { padding:0 0 0 50px; }
	#mainVisual .swiper-container .txtbox .txt > span { margin-right:15px; }
	#mainVisual .swiper-container .txtbox .txt > span strong { font-size:45px; line-height:45px; }
	#mainVisual .swiper-container .txtbox .txt_3 { margin:18px 0 0 0;  line-height:18px; }
	#mainVisual .swiper-container .txtbox .txt_3 span i { font-size:18px; line-height:18px; }
	#mainVisual .swiper-container .swiper-slide .bg { width:300px; height:188px; background-size:300px auto; }
}
@media screen and (max-width:640px){
	#mainVisual .swiper-container .txtbox { padding:0 0 0 30px; }
	#mainVisual .swiper-container .txtbox .txt > span { margin-right:12px; }
	#mainVisual .swiper-container .txtbox .txt > span strong { font-size:38px; line-height:38px; }
	#mainVisual .swiper-container .txtbox .txt_3 { margin:16px 0 0 0;  line-height:16px; }
	#mainVisual .swiper-container .txtbox .txt_3 span i { font-size:16px; line-height:16px; }
	#mainVisual .swiper-container .swiper-slide .bg { width:220px; height:138px; background-size:220px auto; }
}



/* portfolio */
.mainPortfolio { width:100%; background-color:#fff; padding:180px 0 205px 0; position:relative; z-index:2; }
.mainPortfolio .btnBottom { position:absolute; top:-50px; left:80px; width:100px; height:100px; background-color:#b50b14; }
.mainPortfolio .btnBottom a { position:relative; display:block; width:100%; height:100%; overflow:hidden; text-indent:-9999em; }
.mainPortfolio .btnBottom a:after { content:""; display:block; height:24px; width:25px; margin:-12px 0 0 -12px; transform:translateY(-6px); animation: top_scroll 1.5s 0.3s linear 9999 normal forwards; background:url(/img/common/icon_arr_1.png) left center no-repeat; position:absolute; left:50%; top:50%; transition:all .3s ease-in-out; } 
.mainPortfolio .btnBottom a:hover:after {  }
.mainPortfolio .pbox { overflow:hidden; height:620px; }
.mainPortfolio .titlebox { padding:0 0 0 80px; margin-top:-8px; }
.mainPortfolio .titlebox p { font-family: 'Lexend', sans-serif; color:#222; font-weight:100; font-size:75px; text-transform:uppercase; }
.mainPortfolio .titlebox .txt { margin:32px 0 0 0; font-size:20px; line-height:34px; color:#666; font-weight:300; }

.mainPortfolio .swiper-box { position:relative;  }
.mainPortfolio .swiper-portfolio .swiper-container { position:absolute; left:42%; top:0; width:58%; height:620px; overflow:auto; overflow:hidden; }
.mainPortfolio .swiper-portfolio .swiper-container .swiper-slide { position:relative; width:850px; height:520px;  display:flex;  }
.mainPortfolio .swiper-portfolio .swiper-container .swiper-slide .mvisualImage { -webkit-filter: grayscale(100%); filter:grayscale(100%); transition:all .3s .1s ease-in-out; position:absolute; left:0; right:0; top:0; bottom:0; background-position:center center; background-repeat:no-repeat; background-size:cover; }
.mainPortfolio .swiper-portfolio .swiper-container .swiper-slide.swiper-slide-active .mvisualImage { -webkit-filter: grayscale(0); filter:grayscale(0); }


.mainPortfolio .swiper-portfolio .btn_pn { position:relative; top:357px; left:80px; border:1px solid #aaa; display:inline-block !important; vertical-align:middle; width:88px; height:88px; outline:none; background-position:center center; background-repeat:no-repeat; }
.mainPortfolio .swiper-portfolio .swiper-button-prev {  background-image:url(/img/main/btn_swiper_v_prev.png); transition:all .3s ease-in-out;}
.mainPortfolio .swiper-portfolio .swiper-button-prev:hover { border:1px solid #b50b14; background-image:url(/img/main/btn_swiper_v_prev_on.png); }
.mainPortfolio .swiper-portfolio .swiper-button-next { margin-left:16px; background-image:url(/img/main/btn_swiper_v_next.png); transition:all .3s ease-in-out;}
.mainPortfolio .swiper-portfolio .swiper-button-next:hover { border:1px solid #b50b14; margin-left:16px; background-image:url(/img/main/btn_swiper_v_next_on.png); }

.mainPortfolio .swiper-container .btnbox { position:absolute; bottom:0; right:80px; z-index:9;  }
.mainPortfolio .swiper-container .btnbox .box { position:relative;  }
.mainPortfolio .swiper-container .btnbox .txt { position:absolute; bottom:0; font-family: 'Lexend', sans-serif; color:#f0f0f0; font-weight:100; font-size:80px; line-height:80px; width:150px; text-align:right; }
.mainPortfolio .swiper-container .btnbox .txt.txt_l { right:140px; color:#ddd; text-align:left; }
.mainPortfolio .swiper-container .btnbox .txt.txt_r { right:0; }
.mainPortfolio .swiper-container .btnbox .txt_p { position:absolute; right:130px; bottom:30px; color:#f0f0f0; font-weight:100; font-size:50px; font-family: 'Lexend', sans-serif; }
.mainPortfolio .swiper-container .btnbox .tit { position:absolute; right:190px; bottom:0; padding:1px 2px 2px 2px; z-index:2; background-color:#fff; color:#666; white-space:nowrap; font-weight:100; font-size:20px; font-family: 'Lexend', sans-serif; }
.mainPortfolio .swiper-container .totalslideV { position:relative; color:#f0f0f0; display:inline-block; font-family: 'Lexend', sans-serif; font-weight:100;  }
.mainPortfolio .swiper-container .activeslideV { position:relative; color:#ddd; display:inline-block; font-family: 'Lexend', sans-serif; font-weight:100; }
.mainPortfolio .swiper-container .swiper-pagination-progressbar {position:absolute; bottom:1px; right:400px; background:#d5d5d5 !important; height:1px !important; width:380px; }
.mainPortfolio .swiper-container .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background:#b50b14 !important; height:3px !important; margin-top:-1px; }


.mainPortfolio .swiper-info .swiper-container { position:absolute; right:50%; top:252px; width:420px; z-index:10; }
.mainPortfolio .swiper-info .swiper-container .swiper-slide { position:relative; overflow:hidden; width:420px; height:370px; opacity:0 !important; background:#292a31 url(/img/main/bg_portfolio_s.png) left bottom no-repeat;}
.mainPortfolio .swiper-info .swiper-container .swiper-slide:after { content:""; display:block; z-index:1; position:absolute; right:0; top:0; width:100%; padding-bottom:100%; background-color:rgba(255,255,255,1); }
.mainPortfolio .swiper-info .swiper-container .swiper-slide.swiper-slide-active:after{ width:0; transition:width 0.8s 0.3s; }
.mainPortfolio .swiper-info .swiper-container .swiper-slide.swiper-slide-active { opacity:1 !important;  }
.mainPortfolio .swiper-info .swiper-container .swiper-slide dl { padding:60px 10px 60px 50px; overflow:hidden; }
.mainPortfolio .swiper-info .swiper-container .swiper-slide dl dt { opacity:0; color:#fff; font-weight:600; font-size:40px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;  }
.mainPortfolio .swiper-info .swiper-container .swiper-slide dl dd { padding:20px 0 0 0; }
.mainPortfolio .swiper-info .swiper-container .swiper-slide dl dd li { opacity:0; position:relative; margin:28px 0 0 0; padding:0 0 0 72px; font-size:16px; font-weight:300; color:rgba(255,255,255,0.5); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;  }
.mainPortfolio .swiper-info .swiper-container .swiper-slide dl dd li strong { position:absolute; left:0; top:0; font-weight:300; color:rgba(255,255,255,0.8); }
@media screen and (max-width:1760px){
	.mainPortfolio .titlebox p { font-size:80px; }
	.mainPortfolio .titlebox .txt { margin:25px 0 0 0; font-size:18px; line-height:30px; }
	.mainPortfolio .swiper-portfolio .swiper-container { left:46%; width:54%; }
	.mainPortfolio .swiper-portfolio .btn_pn { top:400px; width:78px; height:78px; }
	.mainPortfolio .swiper-container .btnbox { right:50px; }
	.mainPortfolio .swiper-container .btnbox .txt { font-size:60px; line-height:50px; width:120px; }
	.mainPortfolio .swiper-container .btnbox .txt.txt_l { right:100px; }
	.mainPortfolio .swiper-container .btnbox .txt_p { right:100px; bottom:20px; font-size:40px; }
	.mainPortfolio .swiper-container .btnbox .tit { right:130px; font-size:16px;  }
	.mainPortfolio .swiper-container .swiper-pagination-progressbar { width:250px; right:280px; }
	.mainPortfolio .swiper-info .swiper-container { right:45%; top:252px; }
}
@media screen and (max-width:1280px){
	.mainPortfolio { padding:120px 0 140px 0; }
	.mainPortfolio .titlebox { padding:0 0 0 50px; margin-top:0px; }
	.mainPortfolio .titlebox p { font-size:50px; }
	.mainPortfolio .titlebox .txt { margin:25px 0 0 0; font-size:18px; line-height:30px; }
	.mainPortfolio .pbox { height:500px; }
	.mainPortfolio .swiper-portfolio .swiper-container { left:46%; width:54%; height:500px; }
	.mainPortfolio .swiper-portfolio .swiper-container .swiper-slide { width:520px; height:400px; }			
	.mainPortfolio .swiper-portfolio .btn_pn { top:330px; width:60px; height:60px; left:50px; }
	.mainPortfolio .swiper-container .btnbox { right:50px; }
	.mainPortfolio .swiper-container .btnbox .txt { font-size:60px; line-height:50px; width:120px; }
	.mainPortfolio .swiper-container .btnbox .txt.txt_l { right:100px; }
	.mainPortfolio .swiper-container .btnbox .txt_p { right:100px; bottom:20px; font-size:40px; }
	.mainPortfolio .swiper-container .btnbox .tit { right:130px; font-size:16px;  }
	.mainPortfolio .swiper-container .swiper-pagination-progressbar { width:150px; right:270px; }
	.mainPortfolio .swiper-info .swiper-container { right:45%; top:250px; width:320px; }
	.mainPortfolio .swiper-info .swiper-container .swiper-slide { width:320px; height:250px; }
	.mainPortfolio .swiper-info .swiper-container .swiper-slide dl { padding:30px 10px 30px 30px; }
	.mainPortfolio .swiper-info .swiper-container .swiper-slide dl dt { font-size:25px; }
	.mainPortfolio .swiper-info .swiper-container .swiper-slide dl dd { padding:10px 0 0 0; }
	.mainPortfolio .swiper-info .swiper-container .swiper-slide dl dd li { margin:20px 0 0 0; padding:0 0 0 65px; font-size:15px; }
}
@media screen and (max-width:1024px){
	.mainPortfolio { padding:100px 0 120px 0; }
	.mainPortfolio .titlebox { padding:0 0 0 50px; margin-top:0px; }
	.mainPortfolio .titlebox p { font-size:40px; }
	.mainPortfolio .titlebox .txt { margin:15px 0 0 0; font-size:16px; line-height:24px; }
	.mainPortfolio .pbox { height:600px; }
	.mainPortfolio .swiper-portfolio { padding:100px 0 0 0; }
	.mainPortfolio .swiper-portfolio .swiper-container { left:0%; width:100%; height:450px; top:120px; }
	.mainPortfolio .swiper-portfolio .swiper-container .swiper-slide { width:70%; height:350px; }
	.mainPortfolio .swiper-container .btnbox { right:20px; }
	.mainPortfolio .swiper-container .btnbox .txt { font-size:40px; line-height:40px; width:100px; }
	.mainPortfolio .swiper-container .btnbox .txt.txt_l { right:50px; }
	.mainPortfolio .swiper-container .btnbox .txt_p { right:70px; bottom:14px; font-size:30px; }
	.mainPortfolio .swiper-container .btnbox .tit { right:80px; font-size:14px;  }
	.mainPortfolio .swiper-container .swiper-pagination-progressbar { width:100px; right:200px; }
	.mainPortfolio .swiper-info .swiper-container { right:0; top:260px; width:250px; }
	.mainPortfolio .swiper-info .swiper-container .swiper-slide { width:250px; height:220px; }
	.mainPortfolio .swiper-info .swiper-container .swiper-slide dl { padding:30px 10px 30px 30px; }
	.mainPortfolio .swiper-info .swiper-container .swiper-slide dl dt { font-size:24px; }
	.mainPortfolio .swiper-info .swiper-container .swiper-slide dl dd { padding:10px 0 0 0; }
	.mainPortfolio .swiper-info .swiper-container .swiper-slide dl dd li { margin:20px 0 0 0; padding:0 0 0 65px; font-size:15px; }
	.mainPortfolio .swiper-portfolio .btn_pn { top:340px; width:50px; height:50px; left:20px; }
}
@media screen and (max-width:960px){
	.mainPortfolio .titlebox { padding:0 0 0 20px; }
	.mainPortfolio .btnBottom { top:-40px; width:80px; height:80px; left:50px; }
}
@media screen and (max-width:640px){
	.mainPortfolio .swiper-container .swiper-pagination-progressbar { display:none; }
	.mainPortfolio .btnBottom { top:-30px; width:50px; height:50px; left:20px; }
	.mainPortfolio .btnBottom a:after { background-size:14px auto; margin:-7px 0 0 -7px; }
}


.mainPortfolio .swiper-info .swiper-container .swiper-slide.swiper-slide-active dl dt { animation:ani_3 0.7s 1.0s; animation-fill-mode:forwards; }
.mainPortfolio .swiper-info .swiper-container .swiper-slide.swiper-slide-active dd li:nth-child(1) { animation:ani_2 0.7s 1.2s; animation-fill-mode:forwards; }
.mainPortfolio .swiper-info .swiper-container .swiper-slide.swiper-slide-active dd li:nth-child(2) { animation:ani_2 0.7s 1.4s; animation-fill-mode:forwards; }
.mainPortfolio .swiper-info .swiper-container .swiper-slide.swiper-slide-active dd li:nth-child(3) { animation:ani_2 0.7s 1.6s; animation-fill-mode:forwards; }
.mainPortfolio .swiper-info .swiper-container .swiper-slide.swiper-slide-active dd li:nth-child(4) { animation:ani_2 0.7s 1.8s; animation-fill-mode:forwards; }
.mainPortfolio .swiper-info .swiper-container .swiper-slide.swiper-slide-active dd li:nth-child(5) { animation:ani_2 0.7s 2.0s; animation-fill-mode:forwards; }

/* best */
.mainBest { position:relative; z-index:2; background-color:#fff; text-align:center; padding:45px 80px 0 80px; }
/* .mainBest .titbox { opacity:0; width:calc(100% - 160px); position:absolute; margin-top:-45px; z-index:1; } */
.mainBest .titbox { opacity:0; width:calc(100% - 160px); position:absolute; margin-top:-85px; z-index:1; }
.mainBest .titbox p { color:#222; font-family: 'Lexend', sans-serif; font-weight:100; font-size:65px; line-height:60px; }
/* .mainBest .titbox .stxt { margin:28px 0 0 0; color:#333; font-weight:300; font-size:20px; } */
.mainBest .titbox .stxt { margin:0 0 68px 0; color:#333; font-weight:400; font-size:38px; line-height: 130%; }
.mainBest .btn_view { opacity:0; position:absolute; top:205px; width:calc(100% - 160px); }
.mainBest .btn_view a { display:block; width:298px; text-align:center; padding:28px 0; font-family: 'Lexend', sans-serif; font-weight:400; font-size:18px; line-height:16px; color:#000; border:1px solid #000; margin:0 auto; }
.mainBest .imgbox { position:relative; overflow:hidden;  max-width:1760px; height:450px; margin:0 auto; background-position:center top; background-repeat:no-repeat; background-size:cover; }
.mainBest .imgbox:after { content:""; display:block; z-index:1; position:absolute; left:0; top:0; width:100%; padding-bottom:100%; background-color:rgba(255,255,255,1); }
.mainBest.on .imgbox:after{ width:0; transition:width 1.5s 0.3s; }
.mainBest.on .titbox { animation:ani_3 0.7s 1.2s; animation-fill-mode:forwards; }
.mainBest.on .btn_view { animation:ani_3 0.7s 1.5s; animation-fill-mode:forwards; }
@media screen and (max-width:1760px){
	.mainBest .btn_view,
	.mainBest .titbox { width:100%; }
	.mainBest { padding:0 0; }
}
@media screen and (max-width:1024px){
	.mainBest { padding-top:35px; }
/* 	.mainBest .titbox { margin-top:-35px; } */
		.mainBest .titbox { margin-top:-45px; }
	.mainBest .titbox p { font-size:45px; line-height:40px; }
/* 	.mainBest .titbox .stxt { margin:0px 0 0 0; font-size:18px; } */
	.mainBest .titbox .stxt { margin:0px 0 30px 0; font-size:28px; }
	.mainBest .btn_view { top:180px;  }
	.mainBest .btn_view a { width:250px; padding:25px 0; font-size:18px; line-height:16px; } 
	.mainBest .imgbox { height:350px; }
}
@media screen and (max-width:640px){
	.mainBest { padding-top:20px; }
/* 	.mainBest .titbox { margin-top:-20px; } */
	.mainBest .titbox { margin-top:-75px; }
	.mainBest .titbox p { font-size:30px; line-height:25px; }
/* 	.mainBest .titbox .stxt { margin:15px 0 0 0; font-size:16px; } */
		.mainBest .titbox .stxt { margin:0px 0 35px 0; font-size:24px; }
	.mainBest .btn_view { top:120px;  }
	.mainBest .btn_view a { width:200px; padding:18px 0; font-size:16px; line-height:14px; } 
	.mainBest .imgbox { height:250px; }
}

/* notice */
.mainNotice { position:relative; z-index:2; padding:140px 0 160px 0; overflow:hidden; background:#fff url(/img/main/bg_notice.png) right 55px no-repeat; }
.mainNotice .box { padding:0 80px; }
.mainNotice .titbox p { color:#222; font-family: 'Lexend', sans-serif; font-weight:100; font-size:75px; line-height:70px; text-transform:uppercase; }
.mainNotice .titbox .stxt { margin:48px 0 0 0; color:#333; font-weight:300; font-size:20px; line-height:34px; }
.mainNotice .swiper-notice { position:relative;  padding:70px 0 0 0; margin:0 -20px 0 0; width:calc(100% + 20px); }
.mainNotice .swiper-notice .swiper-container { position:relative; padding:0 20px 50px 0; }
.mainNotice .swiper-notice .swiper-container .swiper-slide { opacity:0; position:relative; }
.mainNotice .swiper-notice .swiper-container .swiper-slide:after { content:""; display:block; z-index:1; position:absolute; right:-20px; bottom:-20px; background:#b50b14 url(/img/main/icon_more.png) center center no-repeat; animation:info_over_off 0.3s ease-in-out; }
.mainNotice .swiper-notice .swiper-container .swiper-slide:hover:after { animation:info_over 0.3s ease-in-out; width:70px; height:70px; }
.mainNotice .swiper-notice .swiper-container .txtbox { border:1px solid #ccc; box-sizing:border-box; padding:45px 30px; background-color:#fff; transition:all .3s ease-in-out}
.mainNotice .swiper-notice .swiper-container .swiper-slide:hover .txtbox  { border:1px solid #f4f4f4; background-color:#f4f4f4; box-shadow:3px 3px 8px #f6f6f6; }
.mainNotice .swiper-notice .swiper-container .txtbox dt { color:#333; font-weight:700; font-size:26px; line-height:36px; max-height:70px; height:70px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.mainNotice .swiper-notice .swiper-container .txtbox dd { margin:32px 0 0 0; color:#666; font-weight:300; font-size:15px; line-height:26px; max-height:76px; height:78px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;}
.mainNotice .swiper-notice .swiper-container .txtbox .date { padding:70px 0 0 0; color:#666; font-weight:300; font-size:15px; }
.mainNotice .swiper-notice .btn_pn { opacity:0; position:absolute; top:0 !important; left:auto !important; right:20px !important; border:none; display:inline-block !important; vertical-align:middle; width:70px; height:70px; outline:none; background-position:center center; background-repeat:no-repeat; background-color:#f4f4f4; }
.mainNotice .swiper-notice .swiper-button-prev { right:100px !important; background-image:url(/img/main/btn_swiper_n_prev.png); transition:all .3s ease-in-out; }
.mainNotice .swiper-notice .swiper-button-prev:hover { background-color:#b50b14; background-image:url(/img/main/btn_swiper_n_prev_on.png); }
.mainNotice .swiper-notice .swiper-button-next { background-image:url(/img/main/btn_swiper_n_next.png); transition:all .3s ease-in-out; }
.mainNotice .swiper-notice .swiper-button-next:hover { background-color:#b50b14; background-image:url(/img/main/btn_swiper_n_next_on.png); }
.mainNotice .swiper-notice .swiper-pagination { display:none; }
.mainNotice.on .swiper-notice .swiper-container .swiper-slide { animation:ani_3 0.7s 1.2s; animation-fill-mode:forwards; }
.mainNotice.on .swiper-notice .btn_pn { animation:ani_2 0.7s 1.5s; animation-fill-mode:forwards; }
@media screen and (max-width:1280px){
	.mainNotice { padding:120px 0 140px 0; }
	.mainNotice .box { padding:0 50px; }
	.mainNotice .titbox p { font-size:85px; line-height:70px; }
	.mainNotice .titbox .stxt { margin:30px 0 0 0; font-size:18px; line-height:30px; }
	.mainNotice .swiper-notice { margin:0 -25px 0 0; width:calc(100% + 25px); }
}
@media screen and (max-width:1024px){
	.mainNotice { padding:100px 0 120px 0; }
	.mainNotice .box { padding:0 50px; }
	.mainNotice .titbox p { font-size:75px; line-height:60px; }
	.mainNotice .titbox .stxt { margin:20px 0 0 0; font-size:16px; line-height:26px; }
	.mainNotice .swiper-notice { padding:50px 0 0 0; }
	.mainNotice .swiper-notice .btn_pn { width:50px; height:50px; }
	.mainNotice .swiper-notice .swiper-button-prev { right:80px !important }
	.mainNotice .swiper-notice .swiper-container .swiper-slide:after { right:-12px; bottom:-12px; }
	.mainNotice .swiper-notice .swiper-container .swiper-slide:hover:after { width:50px; height:50px; }
	.mainNotice .swiper-notice .swiper-container .txtbox { padding:40px 30px; }
	.mainNotice .swiper-notice .swiper-container .txtbox dt { font-size:22px; line-height:30px; max-height:68px; height:68px; }
	.mainNotice .swiper-notice .swiper-container .txtbox dd { margin:25px 0 0 0; font-size:15px; line-height:26px; max-height:76px; }
	.mainNotice .swiper-notice .swiper-container .txtbox .date { padding:60px 0 0 0; font-size:15px; }
}
@media screen and (max-width:760px){
	.mainNotice { padding:80px 0 100px 0; }
	.mainNotice .box { padding:0 20px; }
	.mainNotice .titbox p { font-size:62px; line-height:50px; }
	.mainNotice .titbox .stxt { margin:18px 0 0 0; font-size:16px; line-height:26px; }
}
@media screen and (max-width:640px){
	.mainNotice { padding:60px 0 80px 0; }
	.mainNotice .titbox p { font-size:40px; line-height:30px; }
	.mainNotice .titbox .stxt { margin:12px 0 0 0; font-size:15px; line-height:22px; }
	.mainNotice .box { padding:0 0 0 20px; }
	.mainNotice .swiper-notice { padding:30px 0 0 0; margin:0 0 0 0; width:100%; }
	.mainNotice .swiper-notice .swiper-container .txtbox { padding:30px 20px; }
	.mainNotice .swiper-notice .swiper-container .txtbox dt { font-size:20px; line-height:28px; max-height:65px; height:65px; }
	.mainNotice .swiper-notice .swiper-container .txtbox dd { margin:10px 0 0 0; font-size:15px; line-height:26px; max-height:76px; }
	.mainNotice .swiper-notice .swiper-container .txtbox .date { padding:50px 0 0 0; font-size:15px; }
	.mainNotice .swiper-notice .btn_pn { top:auto !important; bottom:-10px !important; left:50% !important; right:auto !important; }
	.mainNotice .swiper-notice .swiper-button-prev { right:auto !important; margin-left:-60px; }
	.mainNotice .swiper-notice .swiper-button-next { margin-right:-60px;}
}
@media screen and (max-width:480px){
	.mainNotice .titbox .stxt br { display:none; }
}

@keyframes scale {
	0%{transform:scale(0); }
	100%{transform:scale(1); }
}

@keyframes countingBar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}


@-webkit-keyframes txtLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
    opacity:0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity:1;
  }
}

@keyframes txtLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
    opacity:0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity:1;
  }
}

@-webkit-keyframes txtOver {
  from {
  	/*transform:translateY(100px); */
  	will-change:transform; transform-style:preserve-3d; transform:rotate3d(0,1,0,90deg); transition:transform 1400ms cubic-bezier(0.425,0.005,0,1);*/
    opacity:0;
  }
  to {
  	transform:translateY(0); 
    opacity:1;
  }
}

@keyframes txtOver {
  from {
  	/*transform:translateY(100px); */
  	will-change:transform; transform-style:preserve-3d; transform:rotate3d(0,1,0,90deg); transition:transform 1400ms cubic-bezier(0.425,0.005,0,1);
    opacity:0;
  }
  to {
  	transform:translateY(0); 
    opacity:1;
  }
}

@-webkit-keyframes bgOver {
  from { opacity:0; }
  to {  opacity:1; }
}

@keyframes bgOver {
  from { opacity:0; }
  to {  opacity:1; }
}

@keyframes info_over{
	0%{ width:0;height:0; }
	100%{width:70px; height:70px;  }
}
@keyframes info_over_off{
	0%{ width:70px;height:70px; }
	100%{width:0; height:0;  }
}
@media screen and (max-width:1024px){
	@keyframes info_over{
		0%{ width:0;height:0; }
		100%{width:50px; height:50px;  }
	}
	@keyframes info_over_off{
		0%{ width:50px;height:50px; }
		100%{width:0; height:0;  }
	}
}