
.pro_2 { overflow: hidden; background:url('../img/pro_1_bg.png')no-repeat right top 200px; min-height:100vh; padding:0 60px;}
.pro_2 .wid { max-width:1700px; margin:0 auto; position: relative; height:100vh; max-height:990px; min-height:820px;}
.pro_2 .wid2 {padding:150px 0px 0px 0px; }
.pro_2 h1 {font-size:60px; color:#111; font-family: 'Paperlogy-9Black'; margin-top:8px; }
.pro_2 h2 {font-size:30px; color:#111; font-weight:700; margin-top:20px;}
.pro_2 p {font-size:16px; color:#111; margin-top:20px; line-height:1.5em;}

.pro_2 ul {width:300px;  padding:6px; background:#f3f3f3; border-radius:50px; }
.pro_2 ul:after {content:''; clear:both; display: table;}
.pro_2 ul li {float:left; width:50%; border-radius:50px; font-size:18px; color:#111; font-weight:500; height:50px; line-height:50px; text-align: center; cursor: pointer;}
.pro_2 ul li.on {background:#111; color:#fff;}

.pro_2 .posi {position: absolute; left:0; bottom:70px; z-index: 1;}

.pro_2 .app_bt {margin-top:30px; margin-left:-5px; }
.pro_2 .app_bt:after {content:''; clear:both; display: table;}
.pro_2 .app_bt button {border:none; background:#111; color:#fff; font-weight:500; font-size:19px; height:60px; width:305px; border-radius:50px;}
.pro_2 .app_bt button:last-child {margin-right:0;}

.pro_2 .img {position: absolute; right:30px; top:140px;}
.pro_2 .img1 {right:150px;}
.pro_2 .img2 {right:100px; top:90px;}
.pro_2 .img3 {right:-10px; top:264px; width:950px;}
.pro_2 .img4 {right:-10px; top:120px; width:950px;}
.pro_2 .img4 {right:-10px; top:120px; width:950px;}
.pro_2 .img6 {right:200px; top:120px; width:470px;}
.pro_2 .img7 {right:-20px; top:210px; width:970px;}

.pro_2 .img_view {text-align: center; margin-top:80px; position: relative; padding-top:80px;}
.pro_2 .img_view:after {content:''; position: absolute; left:-60px; width:Calc(100% + 120px); top:0; height:140px; background:#f5f5f5; z-index: -1;}
.pro_2 .img_view img {width:100%; max-width:1200px; margin:0 auto ;display: block;}
.pro_2 .img_view .img_mo {display: none;}

.pro_2 .youtube {max-width:1000px; margin:50px auto 80px auto; }
.pro_2 .youtube a {display: inline-block; width:100%; text-align: center; font-size:32px; color:#000; font-weight:500;}
.pro_2 .youtube a img {display: inline-block; margin-right:25px; margin-top:-2px;}
.pro_2 .youtube iframe {width:100%; aspect-ratio:16 / 9; border-radius:20px; margin-top:50px;}
.pro_2 .youtube p {width:100%; text-align: left; font-size:24px; color:#222; font-weight:500; margin-top:30px; display: none;}
.pro_2 .youtube p:after {content:''; clear:both ;display: table}
.pro_2 .youtube p button {float:right; height:40px; border:none; border-bottom:1px solid #222; font-size:16px; color:#222; padding:0 10px; text-align: left; background:none; margin-top:-7px;}
.pro_2 .youtube p button:after {content:''; clear:both; display: table}
.pro_2 .youtube p button img {float:right; margin-top:2px; margin-left:15px;}

@media screen and (max-width:1400px) { 
	.pro_2 {background-position: right -180px top 200px;}
	.pro_2 h1 {font-size:50px;}
	.pro_2 h2 {font-size:25px;}
	.pro_2 .app_bt button img { height:55px; }
	.pro_2 .img1 {right:40px;}
	.pro_2 .img2 {right:0px; width:700px;}
	.pro_2 .img3 {right:0px; width:750px; top:304px}
	.pro_2 .img4 {right:-30px; width:760px; top:160px;}
	.pro_2 .img5 {right:-30px; width:760px; top:130px;}
	.pro_2 .img6 {right:50px; width:400px; top:130px;}
}


@media screen and (max-width:1279px) {
	.pro_2 .wid {min-height:820px;} 
	.pro_2 .wid2 {padding:120px 0 0 0}
	.pro_2 {padding:0 40px; background-size:700px auto; background-position: right -180px top 300px;}
	.pro_2 ul {width:280px;}
	.pro_2 ul li {height:45px; line-height:45px; font-size:17px;}
	.pro_2 .posi {position: relative; bottom:0;}

	.pro_2 .img1 {width:400px; top:initial; bottom:30px; right:20px}
	.pro_2 .img2 {width:580px; top:initial; bottom:30px; right:20px}
	.pro_2 .img3 {width:710px; top:initial; bottom:60px; right:0px}
	.pro_2 .img4 {width:660px; top:initial; bottom:30px; right:20px}
	.pro_2 .img5 {width:660px; top:initial; bottom:30px; right:20px}
	.pro_2 .img7 {right:-20px; top:290px; width:700px;}
}


@media screen and (max-width:1023px) { 
	.pro_2 {padding:0 30px; background-position: right -180px top 380px;}
	.pro_2 .wid2 {padding-top:100px;}
	.pro_2 ul {width:250px;}
	.pro_2 ul li {height:40px; line-height:40px; font-size:16px;}
	.pro_2 h1 {font-size:45px;}
	.pro_2 h2 {font-size:22px;}
	.pro_2 .app_bt button img {height:50px;}
	.pro_2 .img1 {width:400px;}
	.pro_2 .img2 {width:500px;}

	.pro_2 .img_view:after {height:131px;}
	.pro_2 .img_view p {font-size:22px;}
	.pro_2 .img_view span {font-size:16px;}
}


@media screen and (max-width:767px) {
	.pro_2 {padding:0 25px; background-position: right -220px top 390px; background-size:570px auto;}
	.pro_2 .wid {min-height:740px; max-height:810px;}
	.pro_2 .wid2 {padding-top:100px; min-height:830px; max-height:770px;}

	.pro_2_2 {background-position: right -220px top 320px;}
	.pro_2_2 .wid {max-height:690px; min-height:750px;}

	.pro_2_3 {background-position: right -220px top 300px;}
	.pro_2_3 .wid {max-height: 570px; min-height: 600px;}

	.pro_2_4 {background-position: right -220px top 300px;}
	.pro_2_4 .wid {max-height: 620px; min-height: 620px;}

	.pro_2 ul {width:calc(100% + 20px); margin-left:-10px;}
	.pro_2 ul li {height:38px; line-height:38px; font-size:15px;}

	.pro_2 h1 {font-size:35px; margin-top:8px;}
	.pro_2 h2 {font-size:20px; margin-top:30px;}
	.pro_2 h1.ja {font-size:25px;}
	.pro_2 p {font-size:14px; margin-top:15px;}
	.pro_2 p .mo {display: none;}
	.pro_2 .app_bt {margin-top:20px;}
	.pro_2 .app_bt button {width:100%; margin-right:0; height:45px;  font-size:16px;}
	.pro_2 .img1 {width:350px; right:initial; left:50%; transform: translate(-50%,0); bottom:25px;}
	.pro_2 .img2 {width:350px; right:initial; left:50%; transform: translate(-50%,0); bottom:25px;}
	.pro_2 .img3 {width:500px; bottom:0px; top:initial; left:50%; transform: translate(-50%,0); right:initial;}
	.pro_2 .img4 {width:350px; right:initial; left:50%; transform: translate(-50%,0); bottom:-20px;}
	.pro_2 .img5 {width:350px; right:initial; left:50%; transform: translate(-50%,0); bottom:-20px;}
	.pro_2 .img6 {width:250px; right:initial; left:48%; transform: translate(-50%,0); bottom:-40px; top:initial;}
	.pro_2 .img7 {width:420px; right:initial; left:48%; transform: translate(-50%,0); bottom:-40px; top:initial;}

	.pro_2 .img_view {margin-top:60px; padding-top:30px;}
	.pro_2 .img_view:after {height:90px;}
	.pro_2 .img_view p { line-height:1.25em;}
	.pro_2 .img_view p br {display: block;}
	.pro_2 .img_view span {font-size:14px; margin-bottom:80px;}
	.pro_2 .img_view span .mo {display: block;}
	.pro_2 .img_view span:after {height:45px; bottom:-84px;}
	.pro_2 .img_view img {margin-left:-25px; width:calc(100% + 50px);}

	.pro_2 .img_view .img_pc {display: none;}
	.pro_2 .img_view .img_mo {display:block;}

	.pro_2.eng {background-position: right -220px top 390px;}
	.pro_2.eng .wid {min-height:720px;}
	.pro_2.eng .img_view {margin-top:45px;}


	.pro_2 .youtube a {font-size:20px;}
	.pro_2 .youtube a img {width:35px; margin-right:15px;}
	.pro_2 .youtube iframe {margin-top:30px;}

	.pro_2 .youtube p {font-size:16px; margin-top:15px}
	.pro_2 .youtube p button img {width:auto;}
	.pro_2 .youtube p button {margin-top:20px; float:initial; display: block; padding:0 3px; width:100%; margin-top:10px;}
}