@charset "UTF-8";

/* Layout */
@import url('/common/css/default.css');
@import url('/common/css/layout.css');

#landing {position:relative; background:#eefbff; height:100vh; overflow:hidden}
#landing:before {position:absolute;  left:0px; top:0px; width:480px; height:260px; background:url('/site/mpva/images/main/landing_left.png') no-repeat left top; display:block}

#landing:after {position:absolute; right:0px; bottom:0px; width:1080px; height:684px; background:url('/site/mpva/images/main/landing_right.png') no-repeat left top; display:block}
#landing .wrap { position:relative; width:1200px; margin:0 auto; z-index:10;}
#landing .wrap h1 {text-align:center;  padding:130px 0 110px; z-index:10}
#landing .wrap .text_wrap {position:relative;  z-index:10}
#landing .wrap .text_wrap .text_1 {font-size:18px; font-weight:200; letter-spacing:7px; color:#192d64; vertical-align:top}
#landing .wrap .text_wrap .text_1 span {display:inline-block; padding:10px 20px; border-top:1px solid #8394b1; border-bottom:1px solid #8394b1;}
#landing .wrap .text_wrap .text_2 {color:#192d64; font-weight:200; font-size:50px; line-height:1em; vertical-align:top; margin:53px 0}
#landing .wrap .text_wrap .text_2 strong {color:#164adc}
#landing .wrap .text_wrap .text_3 {font-size:16px; color:#192d64; }
#landing .wrap .text_wrap .text_3 span {display:block}
#landing .wrap .text_wrap .text_4 {color:#192d64; margin-top:50px; font-size:36px; font-weight:200}
#landing .wrap .text_wrap .text_4 strong {font-size:18px}
#landing .img {position:absolute; right:80px; bottom:90px; z-index:10}


@media screen and (max-width:1340px) {
	#landing:before {transform: scale(0.75); transform-origin: left top;}
	#landing:after {transform: scale(0.75); transform-origin: right bottom;}
	#landing .img   {transform: scale(0.75); transform-origin: right bottom;}

}


@media screen and (max-width:1200px) {
	#landing .wrap {padding:0 15px; width:100%}
	#landing .wrap h1 {padding:100px 0 80px; z-index:10}
	#landing .wrap h1 img {width:200px;}
	#landing .wrap .text_wrap .text_2 {margin:43px 0; font-size:45px}
	#landing .wrap .text_wrap .text_4 {font-size:30px}
	#landing .img {right:20px}
	#landing .wrap .text_wrap .text_4 strong span {display:none}
	#landing .wrap .text_wrap .text_4 strong  {display:block; line-height:1em}
}
@media screen and (max-width:1000px) {
	#landing:before {transform: scale(0.65); }
	#landing:after {transform: scale(0.65); }
	#landing .img   {transform: scale(0.65); transform-origin: right center;}

}

@media screen and (max-width:900px) {
	#landing .wrap h1 {padding:50px 0 40px; z-index:10}
	#landing:before {transform: scale(0.5);}
	#landing:after {transform: scale(0.5); }
	#landing .img   {transform: scale(0.5); transform-origin: right bottom; bottom:20px}
	#landing .wrap .text_wrap {position:relative;text-align:center;}
	#landing .wrap {z-index:20}
}
@media screen and (max-width:800px) {
	#landing .img {display:none}
}


@media screen and (max-width:640px) {
	#landing .wrap h1 img {width:160px}
	#landing .wrap .text_wrap .text_1 {font-size:16px; letter-spacing:5px;  padding:5px 10px}
	#landing .wrap .text_wrap .text_2 {font-size:30px}
	#landing .wrap .text_wrap .text_4 {font-size:24px}
}

@media screen and (max-width:480px) {
	#landing .wrap .text_wrap .text_1 {letter-spacing:0px;  padding:5px;}
	#landing .wrap .text_wrap .text_2 {margin:30px 0; font-size:24px}
	#landing .wrap .text_wrap .text_3 {font-size:15px}
	#landing .wrap .text_wrap .text_4 {font-size:16px}
	#landing:before {transform: scale(0.3);}
	#landing:after {transform: scale(0.3); }

}