/* Main */
.wrapper{ width: 100%;}
.header_w{ color: #fff;}
.main_kv{ position: relative; }
.main_kv video{ display: block; width: 100%; position: relative; z-index: -2 }
.mesh{ position: absolute; height: 100%; width: 100%; left: 0; top: 0; z-index: -1; 
	-webkit-transform: translateZ(0); background: url(../img/v-mesh.png) repeat;}
#new_ac { position: relative}
#new_ac img{ display: block; width: 100%;}

.content{ overflow: hidden; }
.content img{ width: auto; display: inline-block;}
.promo_g{ position: relative; width: 100%; min-height: 680px; z-index: 0; overflow: hidden; }
.promo_g video{ z-index: -4; min-height: 100%; min-width: 100%; position: absolute; left: 50%; top: 0; transform: translateX(-50%);}
.promo_g img{ display: block; margin-right: 20px; vertical-align: top; }
.promo_g .content{ width: 640px; padding: 15% 0; margin-left: 15%; }
.g_logos{ display: inline-block; margin-top: 25px; text-align: center; }
.s_pd_logo{ display: block; background: url('../img/pd_logos.png') no-repeat; margin: 0 auto;}
.promo_g .s_pd_logo{  width: 170px; height: 33px;  background-position: top left; }

.g_img{ float: left; }
.key_logo img:nth-child(2){ display: none; }
.promo_g .btn,.promo_b .btn{ display: inline-block; margin: 10px auto;}
.promo_b .s_pd_logo{ width: 155px; height: 63px; background: url('../img/pd_logos.png') no-repeat; background-position:10% 0; }
.promo_b{ position: relative; width: 100%; min-height: 680px; z-index: 0; background: url('../img/bg_star.jpg') no-repeat; background-size: cover;}
.promo_b img{ display: inline-block; margin-bottom: 10px; vertical-align: top; }
.promo_b .content{ width: 850px; padding: 15% 0; margin-left: 15%;}
.promo_g:after{ position: absolute; top: 0; right: 0; z-index:-1; content: ''; width: 100%; height: 675px; max-width: 308px;
 background: url('../img/g_note.png') no-repeat; background-size: contain; opacity: .8; }
.promo_b .content > div{ display: inline-block; float: left; margin-top: 90px; }
.promo_b:after{ position: absolute; z-index: -1; top: 0; left: 0; content: ''; width: 308px; height: 675px; background: url('../img/b_note.png') no-repeat; }

@keyframes flash {from { opacity: 1;-moz-opacity:1; -khtml-opacity: 1; } 50% { opacity: .5; -moz-opacity:.5; -khtml-opacity: .5; } 100% { opacity: 1; -moz-opacity:1; -khtml-opacity: 1; }}
@-webkit-keyframes flash { from { opacity: 1;-moz-opacity:1; -khtml-opacity: 1; } 50% { opacity: .5; -moz-opacity:.5; -khtml-opacity: .5; } 100% { opacity: 1; -moz-opacity:1; -khtml-opacity: 1; }}
.promo_b:after{ animation: flash 3s linear infinite alternate; -webkit-animation: flash 5s linear infinite alternate; 
		-moz-animation: flash 3s linear infinite alternate; -ms-animation: flash 3s linear infinite alternate;
		-o-animation: flash 3s linear infinite alternate; }

.other_infor{ position: relative; overflow: hidden; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+23,ccced4+100 */
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 23%, rgba(204,206,212,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 23%,rgba(204,206,212,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 23%,rgba(204,206,212,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ccced4',GradientType=0 ); /* IE6-9 */
}
.other_infor .container { width: 100%; max-width: 1000px; padding:5% 0;}
.other_infor_img{ display: inline-block; max-width: 515px; width: 50%; vertical-align: top;}
.other_infor h2{ font-size: 1.8rem; font-weight: 700; color: #009a52; margin-bottom: 10px}
.other_infor .content{ display: inline-block; text-align: left; width: 400px; color: #4a4a4c; padding-top: 150px;}
.other_infor .content p{ display: inline; font-size: 18px; line-height: 1.7;  }
.other_infor ul{ margin: 15px 0 0; }
.other_infor ul li p{ position: relative; line-height: 1.7; padding-left: 20px;}
.other_infor ul li p:before{ position: absolute; top:9px; left: 0; content: ''; width: 6px; height: 6px; background: #009a52;}
.other_infor:after{ content: ''; position: absolute; right: 0; top:8%; width: 412px; height: 130px; background: url('../img/leave.png') no-repeat; }
h1{ display: none}


@media only screen and (max-width: 1000px) {
    .container{ max-width: 100%; overflow: hidden; }
}
@media only screen and (min-width: 960px) {
  	.promo_g,.promo_b{ min-height: 100%;}
  	.g_img{ max-width: 225px; }
  	.b_img{ max-width: 255px; }
	.promo_b .content > div { margin-top: 70px; margin-left: 8%;}
	.promo_b .content { margin-left: 5%;}
}
@media only screen and (max-width: 959px) {
	.promo_g:after,.promo_b:after{ min-width: 240px; width: auto; height: 100%; background-size: contain;}
	.promo_g .content ,.promo_b .content { }
	.promo_g,.promo_b{ min-height: auto; }
	.promo_b .content{ margin-left: 10%;}
	}
@media only screen and (max-width: 889px) {
	.g_img { max-width: 220px;}
	.g_logos { margin-top: 10px;}
	.promo_b .b_img { display: inline-block; max-width: 250px}
	.promo_b .content { margin-left: 0;}
	.promo_b .content > div { margin-left: 15%; margin-top: 45px;}
	.promo_g .content, .promo_b .content { width: 100%;}
	.key_logo img:first-child{ display: none;}
	.key_logo img:nth-child(2){ display: block;}
	.other_infor .content{ width: 100%; max-width: 300px; padding-top: 13%;}
	.footer_infor{ text-align: center; width: 100%; }
	.abbot_link{ margin: 0 auto 10px; display: block; text-align: center;}
}
@media only screen and (max-width: 768px) {

}
@media only screen and (max-width: 689px) {
	.promo_g .btn, .promo_b .btn{ margin: 15px auto;}
	.promo_b .content{ width: 100%;}
	.g_img { max-width: 140px;}
	.promo_b .b_img{ display: inline-block; max-width: 175px;}
	.key_logo img:nth-child(2){    width: 280px;} 
	.other_infor .content{ max-width: 46%; padding-top: 7%; }
	.other_infor ul li p{ padding-left: 0;}
	.other_infor:after{ top: 2%; right: 0%; background-size: contain; width: 230px;}
	.g_logos img{ width: 195px;}
	.other_infor .content p{ font-size: 15px; }
	.promo_g .content, .promo_b .content,.other_infor .container{ padding: 8% 0;}
	.promo_b .content > div { margin-top: 0;}
	.other_infor_img{ width: 45%; }
	.other_infor .content ul p{ padding-left: 15px }
	.call { font-size: 1.1rem;}
}
@media only screen and (max-width: 640px) {

}
@media only screen and (max-width: 540px) {
	.promo_g .content,.promo_b .content{ margin: 0;}
	.g_img,.promo_b .content > div{ float: none;}
	.content img{ margin:0 auto; } 
	.promo_b .b_img { display: block; max-width: 135px;}
	.promo_g .content > div{ margin-top: 0; width: 100%;text-align: center;}
	.g_img { max-width: 105px;}
	.promo_b .content > div{ margin: 0 auto; width: 100%; }
	.other_infor_img{ width: 50%; margin: 0 auto; display: block;}
	.other_infor .content{ display: block; max-width: 77%; text-align: center; padding: 4%; margin: 0 auto;}
	.other_infor ul li p:before{ left: -13px;} 
}
@media only screen and (max-width: 480px) {
	.promo_g .content{ margin-left: 0; padding: 4%;}
	.promo_g .btn, .promo_b .btn { display: inline-block;}
	.promo_g video{ transform: translateY(-40%); left: 0;}
}
@media only screen and (max-width: 414px) {
	body{ font-size: 15px; }
	.other_infor h2{ font-size: 1.4rem; }
	.g_logos{ display: initial;}
	.other_infor .content p{ font-size: 1rem }
	.promo_g img{ width: 200px; float: left; padding: 0 5px;}
	.menu_icon{ margin-right: 15px;}
	.key_logo img:nth-child(2){width: 300px}
}